feat(tokens): update tokens and elements

nuxt-themes · Dec 1, 2022 · b4cba79 · b4cba79
1 parent ab5e8d4
commit b4cba79
Show file tree

Hide file tree

Showing 23 changed files with 573 additions and 580 deletions.
diff --git 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');
       }
     }
   }
-}
+}
diff --git 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
@@ -41,37 +41,37 @@ css({
     alignItems: 'center',
     borderTopWidth: '1px',
     borderTopStyle: 'solid',
-    borderTopColor: '{colors.gray.100}',
+    borderTopColor: '{color.gray.100}',
 
     ':deep(.icon)': {
       width: '{space.4}',
       height: '{space.4}'
     },
 
     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': {
       display: 'flex',
       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
@@ -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
@@ -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,21 +76,21 @@ css({
     '@dark': {
       backgroundColor: 'rgba(0, 0, 0, 0.5)'
     },
-    '@mq.lg': {
+    '@lg': {
       display: 'none'
     },
     // Dialog content
     '& > div': {
       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
@@ -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
@@ -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
@@ -25,50 +25,50 @@ 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}',
         }
       }
     },
     span: {
       '&: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
@@ -39,16 +39,16 @@ const icons = computed<any>(() => {
 <style lang="ts" scoped>
 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}',
       }
     },
   }