fix: backdrop tokens; CodeGroup

components/content/CodeBlock.vue

@@ -5,22 +5,22 @@ defineProps({
    */
   label: {
     type: String,
-    required: true,
+    required: true
   },
   /**
    * Select which tab should be active
    */
   active: {
     type: Boolean,
-    default: false,
+    default: false
   },
   /**
    * Preiew block are bordered and have small padding.
    */
   preview: {
     type: Boolean,
-    default: false,
-  },
+    default: false
+  }
 })
 </script>
 

components/content/CodeGroup.vue

@@ -84,52 +84,25 @@ export default defineComponent({
 })
 </script>
 
-<style lang="postcss">
-li {
-  .code-group {
-    @apply my-4;
-  }
-}
-
-html.dark {
-  .code-group-content {
-    .preview-canvas {
-      @apply z-0 my-0 overflow-x-auto rounded-bl-lg rounded-br-lg rounded-tl-none rounded-tr-none bg-gray-900 p-4 leading-normal;
-    }
-  }
-}
-</style>
-
-<style scoped lang="postcss">
-.code-group {
-  @apply overflow-hidden rounded-lg;
-
-  :deep(.prose-code) {
-    @apply mt-0 mb-0 rounded-none !important;
-  }
-
-  :deep(.prose-code-header) {
-    @apply hidden;
-  }
-
-  :deep(pre) {
-    @apply mt-0 !important;
-  }
-
-  :deep(.filename) {
-    @apply hidden;
-  }
-}
-
-.code-group-content {
-  @apply rounded-b-lg;
-
-  .preview-canvas {
-    @apply z-0 my-0 overflow-x-auto rounded-bl-lg rounded-br-lg p-4 leading-normal text-gray-800 dark:text-gray-200;
-
-    & > * {
-      @apply my-0;
+<style scoped lang="ts">
+css({
+  '.code-group': {
+    border: '1px solid {docus.border.secondary.default}',
+    borderRadius: '{radii.md}',
+    overflow: 'hidden',
+    ':deep(.prose-code)': {
+      margin: 0,
+      border: 'none',
+      borderRadius: 0,
+      // TODO: update token in typography
+      '--prose-code-block-background-color-dark': '{colors.gray.900}'
+    },
+    ':deep(.filename)': {
+      display: 'none'
+    },
+    '.preview-canvas': {
+      padding: '{space.4}'
     }
   }
-}
+})
 </style>

components/content/TabsHeader.vue

@@ -5,12 +5,12 @@ import type { PropType } from 'vue'
 const props = defineProps({
   tabs: {
     type: Array as PropType<{ label: string }[]>,
-    required: true,
+    required: true
   },
   activeTabIndex: {
     type: Number,
-    required: true,
-  },
+    required: true
+  }
 })
 
 const emit = defineEmits(['update:activeTabIndex'])
@@ -45,8 +45,8 @@ watch(
     }, 50)
   },
   {
-    immediate: true,
-  },
+    immediate: true
+  }
 )
 </script>
 
@@ -65,7 +65,7 @@ watch(
         ref="highlightUnderline"
         class="highlight-underline"
       >
-        <span class="flex h-full w-full bg-gray-700 dark:bg-gray-900" />
+        <span class="tab" />
       </span>
     </div>
 
@@ -76,17 +76,19 @@ watch(
 <style scoped lang="ts">
 css({
   ".tabs-header": {
-    // relative bg-gray-800 text-white
     position: 'relative',
-    background: '{colors.gray.800}',
-    color: '{colors.white}',
+    background: '{colors.gray.200}',
+    color: '{colors.red.700}',
+    '@dark': {
+      color: '{colors.red.500}',
+      background: '{colors.gray.800}',
+    },
     '.tabs': {
-      //relative z-0 px-2
       position: 'relative',
       zIndex: 0,
       px: '{space.2}',
       button: {
-        py: '{space.3}',
+        py: '{space.2-5}',
         px: '{space.4}',
         position: 'relative',
         fontFamily: '{font.mono}',
@@ -96,24 +98,43 @@ css({
         userSelect: 'none',
         transition: 'color 100ms, background 100ms',
         '&.not-active': {
-          color: '{colors.gray.400}',
+          color: '{colors.gray.700}',
           '&:hover': {
-            color: '{colors.gray.200}',
-            background: '{colors.gray.700}'
+            color: '{colors.gray.800}',
+            background: '{colors.gray.300}'
           },
+          '@dark': {
+            color: '{colors.gray.200}',
+            '&:hover': {
+              color: '{colors.gray.200}',
+              background: '{colors.gray.700}'
+            },
+          }
         },
         '&.active': {
-          color: '{colors.gray.100}'
+          color: '{colors.gray.500}',
+          '@dark': {
+            color: '{colors.gray.300}',
+          }
         }
       },
       '.highlight-underline': {
         position: 'absolute',
         zIndex: -1,
         top: 0,
         height: '100%',
-        transition: 'left 150ms, width 150ms'
+        transition: 'left 150ms, width 150ms',
+        '.tab': {
+          display: 'flex',
+          width: '100%',
+          height: '100%',
+          backgroundColor: '{colors.gray.100}',
+          '@dark': {
+            backgroundColor: '{colors.gray.900}',
+          }
+        }
       }
     }
   }
 })
-</style>
+</style>

components/docs/DocsPageContent.vue

@@ -223,8 +223,8 @@ css({
     },
     '.toc-wrapper': {
       width: '100%',
-      // TODO: rgba() doesn't work in tokens.config; replace with backdrop tokens
-      backgroundColor: 'red',
+      backdropFilter: '{backdrop.filter}',
+      backgroundColor: '{backdrop.background}',
       px: '{space.4}',
       '@mq.sm': {
         px: '{space.6}',

components/landing/Card.vue

@@ -35,14 +35,6 @@ defineProps({
   </div>
 </template>
 
-<style scoped lang="postcss">
-.card {
-  &.blurry {
-    @apply !backdrop-blur-lg !bg-opacity-20 backdrop-saturate-150;
-  }
-}
-</style>
-
 <style scoped lang="ts">
 css({
   '.card': {

nuxt.config.ts

@@ -9,7 +9,7 @@ export default defineNuxtConfig({
     '@nuxthq/studio',
     'pinceau/nuxt',
     '@nuxtjs/color-mode',
-    '@nuxtjs/tailwindcss',
+    // '@nuxtjs/tailwindcss',
     '@nuxt/content',
     '@vueuse/nuxt',
     resolve('./app/module')