From b4cba79fac05162dfddbb2e688c700a13cd3f79b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ya=C3=ABl=20GUILLOUX?= Date: Thu, 1 Dec 2022 18:29:55 +0100 Subject: [PATCH] feat(tokens): update tokens and elements --- assets/css/main.css | 40 +- components/app/AppContainer.vue | 2 +- components/app/AppFooter.vue | 16 +- components/app/AppHeader.vue | 8 +- components/app/AppHeaderDialog.vue | 20 +- components/app/AppHeaderLogo.vue | 10 +- components/app/AppHeaderNavigation.vue | 8 +- components/app/AppSearch.vue | 34 +- components/app/AppSocialIcons.vue | 8 +- components/app/DocumentDrivenNotFound.vue | 49 +- components/app/Logo.vue | 6 +- components/app/ThemeSelect.vue | 8 +- components/docs/DocsAside.vue | 4 +- components/docs/DocsAsideTree.vue | 26 +- components/docs/DocsPageBottom.vue | 8 +- components/docs/DocsPageContent.vue | 42 +- components/docs/DocsPrevNext.vue | 20 +- components/docs/DocsToc.vue | 4 +- components/docs/DocsTocLinks.vue | 10 +- nuxt.config.ts | 1 - package.json | 2 +- pnpm-lock.yaml | 775 +++++++++++----------- tokens.config.ts | 52 +- 23 files changed, 573 insertions(+), 580 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index 4c98451cf..4f3ca8e24 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -16,13 +16,13 @@ :root { /* DocSearch */ - --docsearch-primary-color: $dt('colors.primary.500') !important; + --docsearch-primary-color: $dt('color.primary.500') !important; } .dark:root { color-scheme: dark; /* DocSearch */ - --docsearch-primary-color: $dt('colors.primary.500') !important; + --docsearch-primary-color: $dt('color.primary.500') !important; --docsearch-text-color: rgb(245, 246, 247); --docsearch-container-background: rgba(9, 10, 17, 0.8); --docsearch-modal-background: rgb(21, 23, 42); @@ -54,13 +54,13 @@ body { overflow-y: scroll; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - background: $dt('colors.neutral.white'); - color: $dt('colors.gray.700'); - font-family: $dt('fonts.sans'); + background: $dt('color.white'); + color: $dt('color.gray.700'); + font-family: $dt('font.sans'); @dark { - background: $dt('colors.neutral.black'); - color: $dt('colors.gray.200'); + background: $dt('color.black'); + color: $dt('color.gray.200'); } } @@ -70,35 +70,35 @@ body { height: 0.6em; background: transparent; } - + & ::-webkit-scrollbar-track { - background: $dt('colors.gray.100'); + background: $dt('color.gray.100'); } - + & ::-webkit-scrollbar-thumb { border-radius: 0.6em; - background: $dt('colors.gray.300'); + background: $dt('color.gray.300'); &:hover { - background: $dt('colors.gray.400'); + background: $dt('color.gray.400'); } &:active { - background: $dt('colors.gray.500'); + background: $dt('color.gray.500'); } } - + &.dark { & ::-webkit-scrollbar-track { - background: $dt('colors.gray.800'); + background: $dt('color.gray.800'); } - + & ::-webkit-scrollbar-thumb { - background: $dt('colors.gray.700'); + background: $dt('color.gray.700'); &:hover { - background: $dt('colors.gray.600'); + background: $dt('color.gray.600'); } &:active { - background: $dt('colors.gray.500'); + background: $dt('color.gray.500'); } } } -} \ No newline at end of file +} diff --git a/components/app/AppContainer.vue b/components/app/AppContainer.vue index a19f17418..752986b69 100644 --- a/components/app/AppContainer.vue +++ b/components/app/AppContainer.vue @@ -30,7 +30,7 @@ css({ padded: { true: { px: '{space.4}', - '@mq.sm': { + '@sm': { px: '{space.6}', } }, diff --git a/components/app/AppFooter.vue b/components/app/AppFooter.vue index bf8a9f602..43d2fbb13 100644 --- a/components/app/AppFooter.vue +++ b/components/app/AppFooter.vue @@ -41,7 +41,7 @@ css({ alignItems: 'center', borderTopWidth: '1px', borderTopStyle: 'solid', - borderTopColor: '{colors.gray.100}', + borderTopColor: '{color.gray.100}', ':deep(.icon)': { width: '{space.4}', @@ -49,20 +49,20 @@ css({ }, a: { - color: '{colors.gray.500}', + color: '{color.gray.500}', '@dark': { - color: '{colors.gray.400}' + color: '{color.gray.400}' }, '&:hover': { - color: '{colors.gray.700}', + color: '{color.gray.700}', '@dark': { - color: '{colors.gray.200}', + color: '{color.gray.200}', } }, }, '@dark': { - borderTopColor: '{colors.gray.900}' + borderTopColor: '{color.gray.900}' }, '.left': { @@ -70,8 +70,8 @@ css({ alignItems: 'center', p: { - fontSize: '{fontSizes.xs}', - fontWeight: '{fontWeights.bold}' + fontSize: '{fontSize.xs}', + fontWeight: '{fontWeight.bold}' }, '&-icon': { diff --git a/components/app/AppHeader.vue b/components/app/AppHeader.vue index d8a2dda1c..498e4681d 100644 --- a/components/app/AppHeader.vue +++ b/components/app/AppHeader.vue @@ -37,14 +37,14 @@ css({ '.left &': { '.has-dialog &': { display: 'none', - '@mq.lg': { + '@lg': { display: 'block' } }, }, '.center &': { display: 'block', - '@mq.lg': { + '@lg': { display: 'none' } } @@ -56,12 +56,12 @@ css({ top: 0, zIndex: 10, width: '100%', - borderBottom: '1px solid {colors.gray.100}', + borderBottom: '1px solid {color.gray.100}', backgroundColor: '{backdrop.background}', height: '{docus.header.height}', '@dark': { - borderBottom: '1px solid {colors.gray.900}', + borderBottom: '1px solid {color.gray.900}', }, '.container': { diff --git a/components/app/AppHeaderDialog.vue b/components/app/AppHeaderDialog.vue index 58328b5e5..e5de8b2a5 100644 --- a/components/app/AppHeaderDialog.vue +++ b/components/app/AppHeaderDialog.vue @@ -50,17 +50,17 @@ css({ position: 'relative', zIndex: '10', borderRadius: '{radii.xl}', - '@mq.lg': { + '@lg': { display: 'none' }, - color: '{colors.gray.500}', + color: '{color.gray.500}', '@dark': { - color: '{colors.gray.400}', + color: '{color.gray.400}', }, '&:hover': { - color: '{colors.gray.700}', + color: '{color.gray.700}', '@dark': { - color: '{colors.gray.200}', + color: '{color.gray.200}', } }, }, @@ -76,7 +76,7 @@ css({ '@dark': { backgroundColor: 'rgba(0, 0, 0, 0.5)' }, - '@mq.lg': { + '@lg': { display: 'none' }, // Dialog content @@ -84,13 +84,13 @@ css({ maxWidth: '{size.xs}', width: '100%', minHeight: '100%', - boxShadow: '{shadows.md}', + boxShadow: '{shadow.md}', px: '{space.4}', - backgroundColor: '{colors.white}', + backgroundColor: '{color.white}', '@dark': { - backgroundColor: '{colors.black}', + backgroundColor: '{color.black}', }, - '@mq.sm': { + '@sm': { px: '{space.6}', }, // Dialog header diff --git a/components/app/AppHeaderLogo.vue b/components/app/AppHeaderLogo.vue index 355a167c6..e4e03fb28 100644 --- a/components/app/AppHeaderLogo.vue +++ b/components/app/AppHeaderLogo.vue @@ -25,14 +25,14 @@ css({ flex: 'none', span: { - fontSize: '{fontSizes.xl}', - fontWeight: '{fontWeights.bold}', - color: '{colors.gray.900}', + fontSize: '{fontSize.xl}', + fontWeight: '{fontWeight.bold}', + color: '{color.gray.900}', '@dark': { - color: '{colors.gray.100}', + color: '{color.gray.100}', }, '&:hover': { - color: '{colors.gray.500}', + color: '{color.gray.500}', } } } diff --git a/components/app/AppHeaderNavigation.vue b/components/app/AppHeaderNavigation.vue index ecaa81d3e..d3d06d5fc 100644 --- a/components/app/AppHeaderNavigation.vue +++ b/components/app/AppHeaderNavigation.vue @@ -67,7 +67,7 @@ css({ alignItems: 'center', gap: '{space.2}', padding: '{space.2} {space.4}', - fontSize: '{fontSizes.sm}', + fontSize: '{fontSize.sm}', borderRadius: '{radii.md}', outline: 'none', transition: 'background 200ms ease', @@ -77,15 +77,15 @@ css({ }, '&:active,&.active,&:hover': { - backgroundColor: '{colors.gray.100}', + backgroundColor: '{color.gray.100}', '@dark': { - backgroundColor: '{colors.gray.900}', + backgroundColor: '{color.gray.900}', }, }, '&.active': { boxShadow: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)', - fontWeight: '{fontWeights.semibold}' + fontWeight: '{fontWeight.semibold}' } } } diff --git a/components/app/AppSearch.vue b/components/app/AppSearch.vue index 5df5610e5..8bbdcc501 100644 --- a/components/app/AppSearch.vue +++ b/components/app/AppSearch.vue @@ -25,31 +25,31 @@ css({ '.doc-search': { '&:hover': { button: { - borderColor: '{colors.gray.300}' + borderColor: '{color.gray.300}' } }, button: { borderRadius: '{radii.md}', display: 'flex', alignItems: 'center', - fontSize: '{fontSizes.sm}', - color: '{colors.gray.500}', + fontSize: '{fontSize.sm}', + color: '{color.gray.500}', borderStyle: 'solid', borderWidth: '1px', - borderColor: '{colors.gray.100}', - fontSize: '{fontSizes.xs}', + borderColor: '{color.gray.100}', + fontSize: '{fontSize.xs}', gap: '{space.2}', padding: '{space.1-5}', '@dark': { - color: '{colors.gray.400}', - borderColor: '{colors.gray.900}', + color: '{color.gray.400}', + borderColor: '{color.gray.900}', }, '&:hover': { - color: '{colors.gray.700}', - borderColor: '{colors.gray.400}', + color: '{color.gray.700}', + borderColor: '{color.gray.400}', '@dark': { - color: '{colors.gray.200}', - borderColor: '{colors.gray.700}', + color: '{color.gray.200}', + borderColor: '{color.gray.700}', } } }, @@ -57,18 +57,18 @@ css({ '&:first-child': { // hidden text-xs font-medium lg:block display: 'none', - fontSize: '{fontSizes.xs}', - fontWeight: '{fontWeights.medium}', - '@mq.lg': { + fontSize: '{fontSize.xs}', + fontWeight: '{fontWeight.medium}', + '@lg': { display: 'block' } }, '&:nth-child(2)': { flex: 'none', display: 'none', - fontSize: '{fontSizes.xs}', - fontWeight: '{fontWeights.semibold}', - '@mq.lg': { + fontSize: '{fontSize.xs}', + fontWeight: '{fontWeight.semibold}', + '@lg': { display: 'block' } } diff --git a/components/app/AppSocialIcons.vue b/components/app/AppSocialIcons.vue index d3a05fe89..b370b584c 100644 --- a/components/app/AppSocialIcons.vue +++ b/components/app/AppSocialIcons.vue @@ -39,16 +39,16 @@ const icons = computed(() => {