feat(AppHeaderLogo): tokenize

nuxt-themes · Mar 31, 2023 · adade82 · adade82
1 parent 17b8302
commit adade82
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 12 deletions.
diff --git a/components/app/AppHeaderLogo.vue b/components/app/AppHeaderLogo.vue
@@ -31,7 +31,7 @@ css({
     flex: 'none',
 
     '.logo': {
-      height: '{space.6}',
+      height: '{docus.header.logo.height}',
       width: 'auto',
       'img, svg': {
         height: 'inherit',
@@ -48,20 +48,14 @@ css({
           display: 'block'
         }
       },
-      '@sm': {
-        height: '{space.7}'
-      }
     },
 
     '.title': {
-      fontSize: '{fontSize.xl}',
-      fontWeight: '{fontWeight.bold}',
-      color: '{color.gray.900}',
-      '@dark': {
-        color: '{color.gray.100}',
-      },
+      fontSize: '{docus.header.title.fontSize}',
+      fontWeight: '{docus.header.title.fontWeight}',
+      color: '{docus.header.title.color.static}',
       '&:hover': {
-        color: '{color.gray.500}',
+        color: '{docus.header.title.color.hover}',
       }
     }
   }

diff --git a/tokens.config.ts b/tokens.config.ts
@@ -84,7 +84,26 @@ export default defineTheme({
         '@studioIcon material-symbols:docs'
       ]
     },
-    header: { height: '64px' },
+    header: { 
+      height: '64px',
+      logo: {
+        height: {
+          initial: '{space.6}',
+          sm: '{space.7}'
+        }
+      },
+      title: {
+        fontSize: '{fontSize.2xl}', 
+        fontWeight: '{fontWeight.bold}', 
+        color: {
+          static: {
+            initial: '{color.gray.900}', 
+            dark: '{color.gray.100}', 
+          },
+          hover: '{color.primary.500}', 
+        }
+      }
+    },
     footer: { height: { initial: '145px', sm: '100px' }, padding: '{space.4} 0' },
     readableLine: '78ch',
     loadingBar: {