Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tokenisation & Prose components cleanup #492

Merged
merged 6 commits into from
Jun 22, 2021
Merged

Tokenisation & Prose components cleanup #492

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
615ce2f
ProseA
bdrtsky Jun 22, 2021
cf207a4
ProseBlockquote
bdrtsky Jun 22, 2021
00724fc
ProseCode
bdrtsky Jun 22, 2021
d490ec3
ProseCodeInline
bdrtsky Jun 22, 2021
fd13afb
Merge branch 'dev' into fix/tokenisation-prose-cleanup
Tahul Jun 22, 2021
3b88473
:bug: (colors) fix default theme using nuxtjs color
Tahul Jun 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions nuxtjs.org/docus.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,16 @@ export default {
'd-secondary-text-active': 'text-gray-900 dark:text-cloud-surface',
'd-primary-text-hover': 'text-gray-600 dark:text-cloud-lighter',
'd-prose-code-inline-bg': 'bg-gray-100 dark:bg-secondary-darkest',
'd-prose-code-bg': 'bg-gray-100 dark:bg-secondary-darkest',
'd-bg-header': 'bg-white bg-opacity-80 dark:bg-secondary-black dark:bg-opacity-80',
'd-border': 'light:border-gray-200 light:border-opacity-50 dark:border-secondary-darker',
'd-border-header': 'border-none',
'd-page-mobile-toc-bg': 'd-body-bg bg-opacity-80 dark:bg-opacity-80',
'd-aside-header-bg': 'bg-gray-50 dark:bg-secondary-darkest',
'd-active-aside-navigation-item-bg': 'bg-primary-50 dark:bg-secondary-darkest',
'd-active-aside-navigation-item-text': 'text-primary-500 dark:text-primary-400 ',
'd-code-group-header-bg': 'bg-gray-100 dark:bg-secondary-darker',
'd-code-group-tab': 'bg-gray-200 dark:bg-secondary-dark',
'd-code-group-header-bg': 'bg-gray-200 dark:bg-secondary-darker',
'd-code-group-tab': 'bg-gray-300 dark:bg-secondary-dark',
'd-prose-code-filename-bg': 'bg-gray-100 dark:bg-secondary-darker',
'd-prose-code-filename-text': 'text-gray-600 dark:text-secondary-light',
'd-prose-thead-border': 'border-b border-gray-200 dark:border-secondary-dark',
Expand Down
6 changes: 6 additions & 0 deletions src/defaultTheme/components/atoms/CodeGroup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,12 @@ export default defineComponent({
</script>

<style scoped lang="postcss">
.code-group {
>>> pre {
@apply rounded-tl-none rounded-tr-none !important;
}
}

.code-group {
@apply my-4;

Expand Down
46 changes: 7 additions & 39 deletions src/defaultTheme/components/atoms/prose/ProseA.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,70 +30,38 @@ export default defineComponent({

<style lang="postcss" scoped>
:not(h1, h2, h3, h4) > a {
/* TODO: shouldn't rely on autogenerated CSS vars? */
color: var(--primary-500);
font-weight: theme('fontWeight.medium');
text-decoration: none;
&:hover {
border-bottom-width: 1px;
border-bottom-color: var(--primary-500);
padding-bottom: 1px;
}
}

.dark :not(h1, h2, h3, h4) > a {
color: var(--primary-400);
&:hover {
border-bottom-color: var(--primary-400);
}
@apply font-medium no-underline d-prose-a-text d-prose-a-border hover:d-prose-a-border-hover;
}

h1 a,
h2 a,
h3 a,
h4 a {
position: relative;
/* &:hover {
border-bottom-width: 0px;
padding-bottom: 0px;
} */
@apply relative;
&::after {
@apply absolute pl-2 w-5 h-5 opacity-0;
content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%23111827"%3E%3Cpath stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /%3E%3C/svg%3E');
position: absolute;
padding-left: theme('padding.2');
width: theme('spacing.5');
height: theme('spacing.5');
opacity: 0;
}
&:hover {
&::after {
opacity: 1;
@apply opacity-100;
}
}
/* hover underline */
&:before {
@apply absolute top-0 left-0 w-full;
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: calc(100% + 4px);
}
&:hover:before {
border-bottom-width: 1px;
border-style: dashed;
border-bottom-color: theme('colors.gray.900');
@apply d-prose-a-headline-border;
}
}

.dark h1 a,
.dark h2 a,
.dark h3 a,
.dark h4 a {
&:hover {
&:before {
border-bottom-color: theme('colors.gray.100');
}
}
&::after {
content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="white"%3E%3Cpath stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /%3E%3C/svg%3E');
}
Expand Down
6 changes: 1 addition & 5 deletions src/defaultTheme/components/atoms/prose/ProseBlockquote.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,8 @@

<style lang="postcss" scoped>
blockquote {
/* TODO */
@apply text-base pl-4 d-secondary-text d-prose-blockquote-border;
font-weight: 500;
@apply text-base mt-[1.5em] mb-[1.5em] font-medium pl-4 d-prose-blockquote-text d-prose-blockquote-border;
quotes: '201C' '201D' '2018' '2019';
margin-top: 1.5em;
margin-bottom: 1.5em;
}

blockquote p:first-of-type::before {
Expand Down
35 changes: 3 additions & 32 deletions src/defaultTheme/components/atoms/prose/ProseCode.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,39 +6,10 @@
</template>

<style lang="postcss" scoped>
.code-group {
pre {
@apply rounded-tl-none rounded-tr-none !important;
}
}
pre {
@apply dark:bg-secondary-darkest rounded-lg !important;
/* line-height: 1.7142857; */
/* border-radius: 0 theme('borderRadius.lg'); */
padding: theme('padding.4');
margin-top: 0px;
margin-bottom: 0px;
overflow-x: auto;
}
code {
/* TODO */
/* font-size: 0.875em; */
@apply text-sm leading-relaxed;
font-weight: 400;
color: inherit;
background-color: transparent !important;
border-radius: theme('borderRadius.md');
}

pre code {
background-color: transparent;
font-family: theme('fontFamily.mono');
}

.dark {
pre code {
background-color: transparent;
color: theme('colors.gray.100');
@apply p-4 my-0 overflow-x-auto leading-normal d-prose-code-bg rounded-lg;
code {
@apply font-normal text-sm leading-relaxed;
}
}

Expand Down
48 changes: 5 additions & 43 deletions src/defaultTheme/components/atoms/prose/ProseCodeInline.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,7 @@

<style lang="postcss" scoped>
code {
/* TODO */
/* font-size: 0.875em; */
@apply text-sm whitespace-nowrap d-prose-code-inline-bg;
color: inherit;
font-weight: 400;
padding: 0.2rem theme('padding.2');
border-radius: theme('borderRadius.md');
@apply font-normal text-sm py-3px px-6px whitespace-nowrap rounded-md d-prose-code-inline-bg;
}

a code {
Expand All @@ -23,8 +17,7 @@ a code {
}

tbody code {
/* TODO */
font-size: 12px;
@apply text-[12px];
}

h1 a,
Expand All @@ -33,48 +26,17 @@ h3 a,
h4 a {
&:hover {
& code {
border-color: theme('colors.gray.500');
@apply d-prose-code-inline-in-heading-border-hover;
}
}
code {
font-size: inherit;
color: inherit;
pointer-events: none;
border: 1px dashed transparent;
position: relative;
z-index: 0;
@apply relative text-inherit;
}
& code:before {
@apply d-prose-code-inline-bg rounded-md;
@apply absolute top-[-2px] left-[-2px] -z-1 d-prose-code-inline-bg rounded-md pointer-events-none;
content: '';
position: absolute;
top: -2px;
left: -2px;
z-index: -1;
width: calc(100% + 4px);
height: calc(100% + 4px);
/* background-color: theme('colors.white'); */
pointer-events: none;
}
}

.dark {
code {
color: inherit;
}
h1 a,
h2 a,
h3 a,
h4 a {
&:hover {
code {
border-color: theme('colors.gray.200');
}
}
code:before {
/* @apply bg-transparent; */
/* background-color: theme('colors.gray.900'); */
}
}
}
</style>
13 changes: 10 additions & 3 deletions src/defaultTheme/settings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,15 @@ const defaultThemeSettings = {
'd-primary-text-hover': 'text-gray-600 dark:text-gray-400',
'd-secondary-text-active': 'text-gray-900 dark:text-gray-300',
'd-prose-code-inline-bg': 'bg-gray-100 dark:bg-gray-800',
'd-prose-code-bg': 'bg-gray-100 dark:bg-gray-800',
'd-prose-thead-border': 'border-b border-gray-200 dark:border-gray-700',
'd-prose-tr-border': 'border-b border-gray-100 dark:border-gray-800',
'd-prose-blockquote-border': 'border-l-2 border-gray-200 dark:border-gray-700',
'd-prose-blockquote-text': 'd-secondary-text',
'd-prose-a-text': 'text-primary-500',
'd-prose-a-border': 'border-b border-transparent',
'd-prose-a-border-hover': 'border-b border-primary-500',
'd-prose-a-headline-border': 'border-b border-dashed border-gray-900 dark:border-gray-100',
// Primary
'd-text-primary': 'text-primary-500 dark:text-primary-400',
'd-border-primary': 'border-primary-500 dark:border-primary-400',
Expand All @@ -54,10 +60,11 @@ const defaultThemeSettings = {
'd-aside-header-bg': 'bg-gray-50 dark:bg-gray-800',
'd-active-aside-navigation-item-bg': 'bg-primary-50 dark:bg-primary-900',
'd-active-aside-navigation-item-text': 'text-primary-500 dark:text-primary-400 ',
'd-code-group-header-bg': 'bg-gray-100 dark:bg-gray-800',
'd-code-group-tab': 'bg-gray-200 dark:bg-gray-700',
'd-code-group-header-bg': 'bg-gray-200 dark:bg-gray-800',
'd-code-group-tab': 'bg-gray-300 dark:bg-gray-700',
'd-prose-code-filename-bg': 'bg-gray-100 dark:bg-gray-800',
'd-prose-code-filename-text': 'text-gray-600 dark:text-gray-400',
'd-prose-code-inline-in-heading-border-hover': 'border-gray-500 dark:border-gray-200',
// Icons
'd-text-icon': 'd-secondary-text hover:d-secondary-text-hover',
'd-icon': 'd-text-icon focus:outline-none',
Expand All @@ -72,7 +79,7 @@ const defaultThemeSettings = {
// Header
'd-blur-header': 'blur-12',
'd-bg-header': 'bg-white bg-opacity-80 dark:bg-gray-900 dark:bg-opacity-80',
'd-border': ' light:border-gray-200 light:border-opacity-50 dark:border-secondary-darker',
'd-border': 'light:border-gray-200 light:border-opacity-50 dark:border-gray-800',
'd-border-hover': 'border-primary-200 dark:border-secondary-dark',
'd-border-header': 'border-b border-gray-200 dark:border-gray-800 border-opacity-50',
'd-header': 'sticky w-full top-0 z-50 d-bg-header d-border-header d-blur-header h-header'
Expand Down
1 change: 1 addition & 0 deletions src/defaultTheme/windi.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export default defineConfig({
},
extend: {
fontSize: {
inherit: 'inherit',
root: '16px', // Safari fix to disable font size scaling
lg: ['1.125rem', '1.5rem'] // NOT WORKING
},
Expand Down