chore(merge): merge token changes ; update deps

Author: Tahul

components/AppFooter.vue

@@ -67,7 +67,7 @@ css({
     '.message': {
       textAlign: 'center',
       marginBottom: '{space.4}',
-      color: '{elements.color.text.secondary.default}'
+      color: '{elements.text.secondary.color.static}'
     },
     '.icons': {
       display: 'grid',

components/AppHeader.vue

@@ -62,7 +62,7 @@ css({
     '.overlay': {
       position: 'absolute',
       top: 'calc(var(--header-padding) + var(--logo-height) + {space.2})',
-      backgroundColor: '{alpine.backdrop.backgroundColor.light}',
+      backgroundColor: '{alpine.backdrop.backgroundColor}',
       border: '1px solid {color.gray.200}',
       borderRadius: '{radii.md}',
       padding: '{space.6}',
@@ -93,8 +93,7 @@ css({
         display: 'none'
       },
       '@dark': {
-        backgroundColor: '{alpine.backdrop.backgroundColor.dark}',
-        border: '1px solid {color.gray.800}',
+        borderColor: '{color.gray.800}',
       }
     },
     '.logo': {

layouts/article.vue

@@ -48,7 +48,7 @@ css({
       display: 'inline-flex',
       alignItems: 'center',
       fontSize: '{text.lg.fontSize}',
-      borderBottom: '1px solid {elements.border.secondary.default}',
+      borderBottom: '1px solid {elements.border.secondary.static}',
       '& :deep(svg)': {
         width: '{size.16}',
         height: '{size.16}',
@@ -66,7 +66,7 @@ css({
       marginBottom: '{space.4}'
     },
     time: {
-      color: '{elements.color.text.secondary.default}'
+      color: '{elements.text.secondary.color.static}'
     },
     '.prose': {
       '& :deep(h1)': {

tokens.config.ts

@@ -11,7 +11,7 @@ export default defineTheme({
     },
     backdrop: {
       backgroundColor: {
-        light: '#f4f4f5b3', // TODO: rgba({color.gray.100}, 0.7)
+        initial: '#f4f4f5b3', // TODO: rgba({color.gray.100}, 0.7)
         dark: '#18181bb3' // TODO: rgba({color.gray.900}, 0.7)
       }
     },
@@ -37,17 +37,5 @@ export default defineTheme({
     p: {
       fontSize: '18px'
     },
-    code: {
-      block: {
-        backgroundColor: {
-          light: 'transparent',
-          dark: 'transparent'
-        },
-        borderColor: {
-          light: '{color.gray.200}',
-          dark: '{color.gray.800}'
-        }
-      }
-    }
   }
 })