From f184b9b7c85543d2494c5a9324a277614c99f77f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ya=C3=ABl=20GUILLOUX?= <yael.guilloux@gmail.com>
Date: Thu, 24 Nov 2022 00:59:14 +0100
Subject: [PATCH] feat(lighten): move a lot of components to elements ; update
 to new tokens definition ; use elements

---
 .docs/content/0.index.md              |  10 +-
 components/{content => app}/Logo.vue  |   0
 components/content/Alert.vue          |  52 -------
 components/content/Badge.vue          |  52 -------
 components/content/ButtonLink.vue     |  80 ----------
 components/content/Callout.vue        | 108 -------------
 components/content/CodeBlock.vue      |  47 ------
 components/content/CodeGroup.vue      | 115 --------------
 components/content/CopyButton.vue     |  35 -----
 components/content/Ellipsis.vue       |  60 --------
 components/content/List.vue           |  86 -----------
 components/content/NuxtImg.vue        |  65 --------
 components/content/Props.vue          | 141 -----------------
 components/content/Sandbox.vue        |  96 ------------
 components/content/SourceLink.vue     |  21 ---
 components/content/TabsHeader.vue     | 141 -----------------
 components/content/Terminal.vue       | 171 --------------------
 components/content/VideoPlayer.vue    | 120 ---------------
 components/docs/DocsAsideTree.vue     |   4 +-
 components/docs/DocsPageContent.vue   |   4 +-
 components/docs/DocsPrevNext.vue      |   2 +-
 components/icons/IconCodeSandBox.vue  |   5 -
 components/icons/IconDocus.vue        |  10 --
 components/icons/IconNuxt.vue         |  14 --
 components/icons/IconNuxtContent.vue  |  20 ---
 components/icons/IconNuxtLabs.vue     |   8 -
 components/icons/IconNuxtStudio.vue   |  16 --
 components/icons/IconStackBlitz.vue   |   5 -
 components/icons/IconVueTelescope.vue |   8 -
 components/landing/BlockHero.vue      | 154 ------------------
 components/landing/Card.vue           |  75 ---------
 components/landing/CardGrid.vue       |  64 --------
 nuxt.config.ts                        |  18 +--
 package.json                          |   3 +-
 pnpm-lock.yaml                        |  32 +++-
 tokens.config.ts                      | 214 --------------------------
 36 files changed, 37 insertions(+), 2019 deletions(-)
 rename components/{content => app}/Logo.vue (100%)
 delete mode 100644 components/content/Alert.vue
 delete mode 100644 components/content/Badge.vue
 delete mode 100644 components/content/ButtonLink.vue
 delete mode 100644 components/content/Callout.vue
 delete mode 100644 components/content/CodeBlock.vue
 delete mode 100644 components/content/CodeGroup.vue
 delete mode 100644 components/content/CopyButton.vue
 delete mode 100644 components/content/Ellipsis.vue
 delete mode 100644 components/content/List.vue
 delete mode 100644 components/content/NuxtImg.vue
 delete mode 100644 components/content/Props.vue
 delete mode 100644 components/content/Sandbox.vue
 delete mode 100644 components/content/SourceLink.vue
 delete mode 100644 components/content/TabsHeader.vue
 delete mode 100644 components/content/Terminal.vue
 delete mode 100644 components/content/VideoPlayer.vue
 delete mode 100644 components/icons/IconCodeSandBox.vue
 delete mode 100644 components/icons/IconDocus.vue
 delete mode 100644 components/icons/IconNuxt.vue
 delete mode 100644 components/icons/IconNuxtContent.vue
 delete mode 100644 components/icons/IconNuxtLabs.vue
 delete mode 100644 components/icons/IconNuxtStudio.vue
 delete mode 100644 components/icons/IconStackBlitz.vue
 delete mode 100644 components/icons/IconVueTelescope.vue
 delete mode 100644 components/landing/BlockHero.vue
 delete mode 100644 components/landing/Card.vue
 delete mode 100644 components/landing/CardGrid.vue

diff --git a/.docs/content/0.index.md b/.docs/content/0.index.md
index 04cce97e6..afc4b14b4 100644
--- a/.docs/content/0.index.md
+++ b/.docs/content/0.index.md
@@ -2,7 +2,6 @@
 title: Home
 navigation: false
 layout: page
-fuild: true
 ---
 
 :ellipsis{right=0px width=75% blur=150px}
@@ -27,12 +26,11 @@ Write pages in [Markdown](https://content.nuxtjs.org), use [Vue](https://vuejs.o
 #extra
   ::list
   - **+50 Components** ready to build rich pages
-  - **Article**, **Docs** and **Blog** layouts
+  - **Article**, **Docs** and **Page** layouts
   - Start from a `README`, scale to a framework documentation
-  - Table of contents support
-  - Configurable design system integration
-  - Replace, extend, customize any component in a breeze
-  - Leverages [**@nuxt-themes/typography**](https://github.com/nuxt-themes/typography)
+  - Navigation and Table of Contents generation
+  - Fully configurable [design system](https://github.com/nuxt-themes/tokens)
+  - Leverages [**Typography**](https://typography.nuxt.space/) and [**Elements**](https://elements.nuxt.dev)
   - Used on [Content Documentation](https://content.nuxtjs.org)
   ::
 ::
diff --git a/components/content/Logo.vue b/components/app/Logo.vue
similarity index 100%
rename from components/content/Logo.vue
rename to components/app/Logo.vue
diff --git a/components/content/Alert.vue b/components/content/Alert.vue
deleted file mode 100644
index 5dc3a8687..000000000
--- a/components/content/Alert.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script setup lang="ts">
-const props = defineProps({
-  /**
-   * @values info, success, warning, danger
-   */
-  type: {
-    type: String,
-    default: 'info',
-    validator (value: string) {
-      return ['info', 'success', 'warning', 'danger', 'primary'].includes(value)
-    }
-  }
-})
-</script>
-
-<template>
-  <div class="alert" :class="[type]">
-    <div class="alert-content">
-      <ContentSlot :use="$slots.default" unwrap="p" />
-    </div>
-  </div>
-</template>
-
-<style scoped lang="ts">
-css({
-  '.alert': {
-    my: '{space.8}',
-    borderRadius: '{radii.md}',
-    px: '{space.4}',
-    py: '{space.3}',
-    fontSize: '{text.sm.fontSize}',
-    lineHeight: '{text.sm.lineHeight}',
-    border: '1px solid',
-
-    '&.primary': {
-      stateColors: 'primary'
-    },
-    '&.info': {
-      stateColors: 'info'
-    },
-    '&.success': {
-      stateColors: 'success'
-    },
-    '&.warning': {
-      stateColors: 'warning'
-    },
-    '&.danger': {
-      stateColors: 'danger'
-    }
-  }
-})
-</style>
diff --git a/components/content/Badge.vue b/components/content/Badge.vue
deleted file mode 100644
index 3943af809..000000000
--- a/components/content/Badge.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script setup lang="ts">
-defineProps({
-  /**
-   * @values info, success, warning, danger
-   */
-  type: {
-    type: String,
-    default: 'info',
-    validator (value: string) {
-      return ['info', 'success', 'warning', 'danger', 'primary'].includes(value)
-    }
-  }
-})
-</script>
-
-<template>
-  <span :class="[type]" class="badge">
-    <ContentSlot :use="$slots.default" unwrap="p" />
-  </span>
-</template>
-
-<style scoped lang="ts">
-css({
-  '.badge': {
-    display: 'inline-flex',
-    alignItems: 'center',
-    px: '{space.3}',
-    py: '{space.1}',
-    fontSize: '{text.base.fontSize}',
-    lineHeight: '{text.base.lineHeight}',
-    letterSpacing: '{letterSpacings.tight}',
-    borderRadius: '{radii.full}',
-    border: '1px solid',
-
-    '&.primary': {
-      stateColors: 'primary'
-    },
-    '&.info': {
-      stateColors: 'info'
-    },
-    '&.success': {
-      stateColors: 'success'
-    },
-    '&.warning': {
-      stateColors: 'warning'
-    },
-    '&.danger': {
-      stateColors: 'danger'
-    }
-  }
-})
-</style>
diff --git a/components/content/ButtonLink.vue b/components/content/ButtonLink.vue
deleted file mode 100644
index 38c8d45ce..000000000
--- a/components/content/ButtonLink.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<script setup lang="ts">
-import { computedStyle } from 'pinceau/runtime'
-
-defineProps({
-  blank: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  color: computedStyle('color', 'primary', false),
-  href: {
-    type: String,
-    default: ''
-  },
-  icon: {
-    type: String,
-    default: ''
-  },
-  ...variants
-})
-</script>
-
-<template>
-  <NuxtLink class="button-link" :to="href" :target="blank ? '_blank' : undefined">
-    <Icon v-if="icon" :name="icon" />
-    <ContentSlot :use="$slots.default" unwrap="p ul li" />
-  </NuxtLink>
-</template>
-
-<style lang="ts" scoped>
-css({
-  '.button-link': {
-    display: 'inline-flex',
-    flex: 'none',
-    alignItems: 'center',
-    borderRadius: '{radii.lg}',
-    transition: 'all 100ms ease-in-out',
-    fontWeight: '{fontWeights.bold}',
-    color: '{colors.white}',
-    backgroundColor: (props, utils) => utils.scale('colors', props.color, '600'),
-    '&:hover': {
-      backgroundColor: (props, utils) => utils.scale('colors', props.color, '500')
-    },
-    '&:focus': {
-      border: (props, utils) => `1px solid ${utils.scale('colors', props.color, '600')}`
-    },
-    '.icon': {
-      marginRight: '{space.1}'
-    }
-  },
-  variants: {
-    size: {
-      small: {
-        padding: `{space.2} {space.1-5}`,
-        lineHeight: '{leads.3}',
-      },
-      medium: {
-        padding: `{space.3} {space.2}`,
-        lineHeight: '{leads.4}',
-      },
-      large: {
-        padding: `{space.3} {space.2-5}`,
-        lineHeight: '{leads.6}',
-      },
-      giant: {
-        padding: `{space.8} {space.4}`,
-        fontWeight: `{fontWeights.medium}`
-      },
-      options: {
-        default: 'medium'
-      }
-    },
-    transparent: {
-      true: {
-        backgroundColor: `transparent`,
-      }
-    }
-  }
-})
-</style>
diff --git a/components/content/Callout.vue b/components/content/Callout.vue
deleted file mode 100644
index cb1ff96d9..000000000
--- a/components/content/Callout.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<script setup lang="ts">
-const props = defineProps({
-  /**
-   * @values info, success, warning, danger
-   */
-  type: {
-    type: String,
-    default: 'info',
-    validator (value: string) {
-      return ['info', 'success', 'warning', 'danger', 'primary'].includes(value)
-    }
-  },
-  modelValue: {
-    required: false,
-    default: () => ref(false)
-  }
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const isOpen = ref(props.modelValue)
-
-const toggle = () => {
-  isOpen.value = !isOpen.value
-  emit('update:modelValue', isOpen.value)
-}
-</script>
-
-<template>
-  <div class="callout" :class="[type]">
-    <span class="preview" @click="toggle">
-      <span class="summary">
-        <ContentSlot :use="$slots.summary" />
-      </span>
-      <Icon
-        name="heroicons-outline:chevron-right"
-        class="icon"
-        :class="[isOpen && 'rotate']"
-      />
-    </span>
-
-    <div v-show="isOpen" class="content">
-      <ContentSlot :use="$slots.content" />
-    </div>
-  </div>
-</template>
-
-<style scoped lang="ts">
-css({
-  '.callout': {
-    position: 'relative',
-    px: '{space.4}',
-    py: '{space.3}',
-    my: '{space.8}',
-    fontSize: '{text.sm.fontSize}',
-    lineHeight: '{text.sm.lineHeight}',
-    borderRadius: '{radii.xl}',
-    border: '1px solid',
-
-    '&.primary': {
-      stateColors: 'primary'
-    },
-    '&.info': {
-      stateColors: 'info'
-    },
-    '&.success': {
-      stateColors: 'success'
-    },
-    '&.warning': {
-      stateColors: 'warning'
-    },
-    '&.danger': {
-      stateColors: 'danger'
-    },
-    '.preview': {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      cursor: 'pointer',
-      '.summary': {
-        ':deep(p)': {
-          margin: 0,
-          '& + p': {
-            marginTop: '{space.2}'
-          }
-        }
-      },
-      '.icon': {
-        width: '{space.5}',
-        height: '{space.5}',
-        transition: 'transform 100ms',
-        '&.rotate': {
-          transform: 'rotate(90deg)'
-        }
-      }
-    },
-    '.content': {
-      paddingTop: '{space.3}',
-      ':deep(p)': {
-        margin: 0,
-        '& + p': {
-          marginTop: '{space.2}'
-        }
-      }
-    }
-  }
-})
-</style>
diff --git a/components/content/CodeBlock.vue b/components/content/CodeBlock.vue
deleted file mode 100644
index 4abd17cc4..000000000
--- a/components/content/CodeBlock.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<script setup lang="ts">
-defineProps({
-  /**
-   * Label to display for the tab
-   */
-  label: {
-    type: String,
-    required: true
-  },
-  /**
-   * Select which tab should be active
-   */
-  active: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * Preiew block are bordered and have small padding.
-   */
-  preview: {
-    type: Boolean,
-    default: false
-  }
-})
-</script>
-
-<template>
-  <div
-    class="code-block"
-    :class="{
-      active,
-      'rounded-lg p-4': preview,
-    }"
-  >
-    <slot />
-  </div>
-</template>
-
-<style scoped>
-.code-block {
-  display: none;
-}
-
-.code-block.active {
-  display: block;
-}
-</style>
diff --git a/components/content/CodeGroup.vue b/components/content/CodeGroup.vue
deleted file mode 100644
index f195d1cea..000000000
--- a/components/content/CodeGroup.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<script lang="ts">
-import TabsHeader from './TabsHeader.vue'
-
-const isTag = (slot: any, tag: string) => {
-  return slot.type && slot.type.tag && slot.type.tag === tag
-}
-
-export default defineComponent({
-  data () {
-    return {
-      activeTabIndex: 0,
-      /**
-       * A simple number that increases on every changes
-       */
-      counter: 0
-    }
-  },
-  render () {
-    const slots = this.$slots?.default?.() || []
-    const tabs = slots
-      .filter(slot => isTag(slot, 'code-block') || isTag(slot, 'code'))
-      .map((slot, index) => {
-        return {
-          label: slot?.props?.filename || slot?.props?.label || `${index}`,
-          active: slot?.props?.active || false,
-          component: slot
-        }
-      })
-
-    return h(
-      'div',
-      {
-        class: {
-          'code-group': true,
-          'first-tab': this.activeTabIndex === 0
-        }
-      },
-      [
-        h(TabsHeader, {
-          ref: 'tabs-header',
-          activeTabIndex: this.activeTabIndex,
-          tabs,
-          'onUpdate:activeTabIndex': $event => (this.activeTabIndex = $event)
-        }),
-        h(
-          'div',
-          {
-            class: 'code-group-content',
-            text: this.activeTabIndex
-          },
-          // Map slots to content children
-          slots.map((slot, index) =>
-            h(
-              'div',
-              {
-                // Current slot is displayed, others are hidden
-                style: {
-                  display: index === this.activeTabIndex ? 'block' : 'none'
-                },
-                class: {
-                  '': !isTag(slot, 'code')
-                }
-              },
-              // Display direct children if not a ```code``` block
-              [
-                isTag(slot, 'code')
-                  ? slot
-                  : h(
-                    'div',
-                    {
-                      class: {
-                        'preview-canvas': true
-                      }
-                    },
-                    [(slot.children as any)?.default?.() || h('div')]
-                  )
-              ]
-            )
-          )
-        )
-      ]
-    )
-  }
-})
-</script>
-
-<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}',
-      '&:has(.sandbox)': {
-        padding: 0,
-        ':deep(.sandbox)': {
-          border: 0,
-          borderRadius: 0
-        }
-      }
-    }
-  }
-})
-</style>
diff --git a/components/content/CopyButton.vue b/components/content/CopyButton.vue
deleted file mode 100644
index 9e5bb68bb..000000000
--- a/components/content/CopyButton.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import { useClipboard } from '@vueuse/core'
-
-const props = defineProps({
-  content: {
-    type: String,
-    default: ''
-  }
-})
-
-const { copy: copyToClipboard } = useClipboard()
-
-const state = ref('init')
-
-const copy = (e: MouseEvent) => {
-  copyToClipboard(props.content)
-    .then(() => {
-      state.value = 'copied'
-
-      setTimeout(() => {
-        state.value = 'init'
-      }, 1000)
-    })
-    .catch(() => {
-      console.warn("Couldn't copy to clipboard!")
-    })
-}
-</script>
-
-<template>
-  <button class="copy rounded-lg bg-gray-800 px-2 py-2 font-mono text-xs font-semibold leading-none text-gray-400 focus:outline-none dark:bg-black" @click="copy">
-    <Icon v-if="state === 'copied'" name="fa-check" class="h-4 w-4" />
-    <Icon v-else name="fa-copy" class="h-4 w-4" />
-  </button>
-</template>
diff --git a/components/content/Ellipsis.vue b/components/content/Ellipsis.vue
deleted file mode 100644
index 2e6b1164a..000000000
--- a/components/content/Ellipsis.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<script setup lang="ts">
-defineProps({
-  width: {
-    type: String,
-    default: '10rem'
-  },
-  height: {
-    type: String,
-    default: '10rem'
-  },
-  zIndex: {
-    type: String,
-    default: '10'
-  },
-  top: {
-    type: String,
-    default: '0'
-  },
-  left: {
-    type: String,
-    default: 'auto'
-  },
-  right: {
-    type: String,
-    default: 'auto'
-  },
-  blur: {
-    type: String,
-    default: '50px'
-  }
-})
-</script>
-
-<template>
-  <div class="ellipsis">
-    <div class="ellipsis-item" />
-  </div>
-</template>
-
-<style scoped lang="ts">
-css({
-  '.ellipsis': {
-    pointerEvents: 'none',
-    position: 'absolute',
-    top: (props) => props.top,
-    left: (props) => props.left,
-    right: (props) => props.right,
-    zIndex: (props) => props.zIndex,
-    width: '-webkit-fill-available',
-    maxWidth: (props) => props.width,
-    height: (props) => props.height,
-    filter: (props) => `blur(${props.blur})`,
-    '.ellipsis-item': {
-      width: '100%',
-      height: '100%',
-      background: 'linear-gradient(97.62deg, rgba(0, 71, 225, 0.22) 2.27%, rgba(26, 214, 255, 0.22) 50.88%, rgba(0, 220, 130, 0.22) 98.48%)',
-    }
-  }
-})
-</style>
diff --git a/components/content/List.vue b/components/content/List.vue
deleted file mode 100644
index 63d390220..000000000
--- a/components/content/List.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<script lang="ts">
-const iconTypeMap = {
-  primary: 'heroicons-outline:check',
-  info: 'heroicons-outline:information-circle',
-  success: 'heroicons-outline:check-circle',
-  warning: 'heroicons-outline:exclamation',
-  danger: 'heroicons-outline:exclamation-circle'
-}
-
-export default defineComponent({
-  props: {
-    /**
-     * Used to override the default <code>type</code> icon, check out the
-     *  <a href="https://github.com/nuxt/content/tree/dev/packages/theme-docs/src/components/global/icons">icons available</a>
-     */
-    icon: {
-      type: String,
-      default: null
-    },
-    /**
-     * Type of list
-     */
-    type: {
-      type: String,
-      default: 'primary',
-      validator: (value: string) => ['primary', 'info', 'success', 'warning', 'danger'].includes(value)
-    }
-  },
-  setup (props) {
-    const slots = useSlots()
-
-    const { flatUnwrap, unwrap } = useUnwrap()
-
-    const iconName = computed(() => props.icon || (iconTypeMap as any)[props.type])
-
-    // Usage of render function is mandatory to access default slot
-    // Otherwise Vue warns that slot "default" was invoked outside of the render function
-    return () => {
-      const items = flatUnwrap((slots.default && slots.default()) ?? [], ['ul']).map(li => unwrap(li, ['li']))
-
-      return h(
-        'ul',
-        items.map(item =>
-          h('li', [
-            h('span', { class: `list-icon ${props.type}` }, h(resolveComponent('icon'), { name: iconName.value, class: 'icon' })),
-            h('span', h(resolveComponent('ContentSlot'), { use: () => item }))
-          ])
-        )
-      )
-    }
-  }
-})
-</script>
-
-<style scoped lang="ts">
-css({
-  li: {
-    marginBottom: '{space.3}',
-    display: 'flex',
-    alignItems: 'center',
-    '.list-icon': {
-      marginRight: '{space.3}',
-      flexShrink: 0,
-      '&.primary': {
-        color: '{docus.state.primary.color.primary}'
-      },
-      '&.info': {
-        color: '{docus.state.info.color.primary}'
-      },
-      '&.success': {
-        color: '{docus.state.success.color.primary}'
-      },
-      '&.warning': {
-        color: '{docus.state.warning.color.primary}'
-      },
-      '&.danger': {
-        color: '{docus.state.danger.color.primary}'
-      },
-      '.icon': {
-        width: '{space.6}',
-        height: '{space.6}',
-      }
-    }
-  }
-})
-</style>
diff --git a/components/content/NuxtImg.vue b/components/content/NuxtImg.vue
deleted file mode 100644
index a8c299f54..000000000
--- a/components/content/NuxtImg.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script lang="ts">
-import type { PropType } from 'vue'
-
-type NuxtImg = string & {
-  light: string
-  dark: string
-}
-
-export default defineComponent({
-  props: {
-    src: {
-      type: [String, Object] as PropType<NuxtImg>,
-      default: null
-    },
-    alt: {
-      type: String,
-      default: ''
-    },
-    width: {
-      type: [String, Number],
-      default: undefined
-    },
-    height: {
-      type: [String, Number],
-      default: undefined
-    }
-  },
-  setup (props) {
-    const imgSrc = computed(() => {
-      let src = props.src
-
-      try {
-        src = JSON.parse(src as any)
-      } catch (e) {
-        src = props.src
-      }
-
-      if (typeof src === 'string') { return props.src }
-
-      return src
-    })
-
-    return {
-      imgSrc
-    }
-  },
-  render ({ imgSrc }) {
-    // String as `src`; return a single image
-    if (typeof imgSrc === 'string') {
-      return h('img', { src: imgSrc })
-    }
-
-    // Object as `src`; return a light and dark image if present
-    const nodes = []
-    if (imgSrc.light) {
-      nodes.push(h('img', { src: imgSrc.light, class: ['dark-img'] }))
-    }
-    if (imgSrc.dark) {
-      nodes.push(h('img', { src: imgSrc.dark, class: ['light-img'] }))
-    }
-
-    return nodes
-  }
-})
-</script>
diff --git a/components/content/Props.vue b/components/content/Props.vue
deleted file mode 100644
index a4a95b744..000000000
--- a/components/content/Props.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<script>
-import { kebabCase } from 'scule'
-
-export default defineComponent({
-  props: {
-    of: {
-      type: String,
-      default: undefined
-    },
-    /**
-     * Toggle required column.
-     */
-    required: {
-      type: Boolean,
-      default: undefined
-    },
-    /**
-     * Toggle values column.
-     */
-    values: {
-      type: Boolean,
-      default: undefined
-    },
-    /**
-     * Toggle description column.
-     */
-    description: {
-      type: Boolean,
-      default: undefined
-    },
-    /**
-     * Toglle default column.
-     */
-    default: {
-      type: Boolean,
-      default: undefined
-    }
-  },
-  async setup (props) {
-    // Docs: https://github.com/nuxtlabs/nuxt-component-meta
-    const query = `/api/component-meta/${kebabCase(props.of)}`
-
-    const { data: meta } = await useAsyncData(props.of, () => $fetch(query))
-
-    const properties = computed(() => meta.value.props.filter(prop => !prop.tags?.ignore.includes(prop)))
-
-    const showRequired = computed(() => {
-      if (props.required !== undefined) {
-        return props.required
-      }
-
-      return properties.value?.find(prop => prop.required !== undefined)
-    })
-
-    const showValues = computed(() => {
-      if (props.values !== undefined) {
-        return props.values
-      }
-
-      return properties.value?.find(prop => prop.values)
-    })
-
-    const showDescription = computed(() => {
-      if (props.description !== undefined) {
-        return props.description
-      }
-
-      return properties.value?.find(prop => prop.description)
-    })
-
-    const showDefault = computed(() => {
-      if (props.default !== undefined) {
-        return props.default
-      }
-
-      return properties.value?.find(prop => prop.default)
-    })
-
-    return {
-      meta,
-      properties,
-      showRequired,
-      showValues,
-      showDescription,
-      showDefault
-    }
-  }
-})
-</script>
-
-<template>
-  <ProseTable v-if="meta && meta?.props && meta?.props?.length">
-    <ProseThead>
-      <ProseTr>
-        <ProseTh>Prop</ProseTh>
-        <ProseTh>Type</ProseTh>
-        <ProseTh v-if="showRequired">
-          Required
-        </ProseTh>
-        <ProseTh v-if="showDefault">
-          Default
-        </ProseTh>
-        <ProseTh v-if="showValues">
-          Values
-        </ProseTh>
-        <ProseTh v-if="showDescription">
-          Description
-        </ProseTh>
-      </ProseTr>
-    </ProseThead>
-    <ProseTbody>
-      <ProseTr v-for="prop in properties" :key="prop.name">
-        <ProseTd>
-          <ProseCodeInline>{{ prop?.name || '?' }}</ProseCodeInline>
-        </ProseTd>
-        <ProseTd>
-          <ProseCodeInline>{{ prop?.type || '?' }}</ProseCodeInline>
-        </ProseTd>
-        <ProseTd v-if="showRequired">
-          <ProseCodeInline>{{ prop.required === '?' ? '?' : prop.required ? 'Yes' : 'No' }}</ProseCodeInline>
-        </ProseTd>
-        <ProseTd v-if="showDefault">
-          <ProseCodeInline v-if="prop.default">
-            {{ prop?.default || '?' }}
-          </ProseCodeInline>
-        </ProseTd>
-        <ProseTd v-if="showValues">
-          <ProseCodeInline v-if="prop.values">
-            {{ prop?.values || '?' }}
-          </ProseCodeInline>
-          <ProseCodeInline v-else>
-            -
-          </ProseCodeInline>
-        </ProseTd>
-        <ProseTd v-if="showDescription">
-          <ProseCodeInline>{{ prop.description }}</ProseCodeInline>
-        </ProseTd>
-      </ProseTr>
-    </ProseTbody>
-  </ProseTable>
-</template>
diff --git a/components/content/Sandbox.vue b/components/content/Sandbox.vue
deleted file mode 100644
index 3c01e9228..000000000
--- a/components/content/Sandbox.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<script setup lang="ts">
-const props = defineProps({
-  src: {
-    type: String,
-    default: ''
-  },
-  repo: {
-    type: String,
-    default: ''
-  },
-  branch: {
-    type: String,
-    default: ''
-  },
-  dir: {
-    type: String,
-    default: ''
-  },
-  file: {
-    type: String,
-    default: 'app.vue'
-  }
-})
-
-const colorMode = useColorMode()
-
-const providers = {
-  CodeSandBox: () => `https://codesandbox.io/embed/github/${props.repo}/tree/${props.branch}/${props.dir}?hidenavigation=1&theme=${colorMode.value}`,
-  StackBlitz: () => `https://stackblitz.com/github/${props.repo}/tree/${props.branch}/${props.dir}?embed=1&file=${props.file}&theme=${colorMode.value}`
-}
-
-const providersTabs = Object.keys(providers).map(p => ({ label: p }))
-const activeTabIndex = ref(-1)
-const tabs = ref()
-const url = ref('')
-const provider = ref('')
-
-const changeProvider = (value) => {
-  provider.value = value
-  url.value = props.src || providers[provider.value]()
-  localStorage.setItem('docus_sandbox', value)
-}
-
-const sandBoxUrl = computed(() => url.value?.replace('?embed=1&', '?').replace('/embed/', '/s/'))
-
-const updateTab = (i: number) => {
-  activeTabIndex.value = i
-  changeProvider(providersTabs[i].label)
-}
-
-onMounted(() => {
-  // TODO: if Safari, use CodeSandBox by default: const defaultSandbox = ...
-  provider.value = window.localStorage.getItem('docus_sandbox') || 'CodeSandBox'
-
-  url.value = props.src || providers[provider.value]()
-
-  // Set active tab
-  activeTabIndex.value = Object.keys(providers).indexOf(provider.value)
-})
-</script>
-
-<template>
-  <div class="sandbox">
-    <TabsHeader v-if="!src" ref="tabs" :active-tab-index="activeTabIndex" :tabs="providersTabs" @update:active-tab-index="updateTab" />
-
-    <iframe
-      v-if="url"
-      :src="url"
-      title="Sandbox editor"
-      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-    />
-
-    <span v-else>Loading Sandbox...</span>
-  </div>
-</template>
-
-<style scoped lang="ts">
-css({
-  '.sandbox': {
-    '--sandbox-height': '700px',
-    background: '{docus.surface.background.base}',
-    width: '100%',
-    height: 'var(--sandbox-height)',
-    overflow: 'hidden',
-    fontSize: '{text.3xl.fontSize}',
-    lineHeight: '{text.3xl.lineHeight}',
-    border: '1px solid {docus.border.secondary.default}',
-    borderRadius: '{radii.md}',
-    iframe: {
-      width: '100%',
-      height: '100%',
-      overflow: 'hidden'
-    }
-  }
-})
-</style>
diff --git a/components/content/SourceLink.vue b/components/content/SourceLink.vue
deleted file mode 100644
index 7e803e06b..000000000
--- a/components/content/SourceLink.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-defineProps({
-  source: {
-    type: String,
-    required: true,
-  },
-})
-</script>
-
-<template>
-  <ProseP>
-    <!--
-    <GithubLink v-slot="data" :source="source" :edit="false">
-      <NuxtLink :href="data?.url" target="_blank" rel="noopener" class="hover:text-primary-500 flex items-center gap-1 text-sm font-semibold">
-        <Icon name="fa-brands:github" class="mr-1 h-5 w-5" />
-        <span>Show Source</span>
-      </NuxtLink>
-    </GithubLink>
-    -->
-  </ProseP>
-</template>
diff --git a/components/content/TabsHeader.vue b/components/content/TabsHeader.vue
deleted file mode 100644
index 824318d57..000000000
--- a/components/content/TabsHeader.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<script setup lang="ts">
-import { nextTick, ref, watch } from 'vue'
-import type { PropType } from 'vue'
-
-const props = defineProps({
-  tabs: {
-    type: Array as PropType<{ label: string }[]>,
-    required: true
-  },
-  activeTabIndex: {
-    type: Number,
-    required: true
-  }
-})
-
-const emit = defineEmits(['update:activeTabIndex'])
-
-const tabsRef = ref()
-
-const highlightUnderline = ref()
-
-const updateHighlightUnderlinePosition = (activeTab) => {
-  if (!activeTab) {
-    return
-  }
-
-  highlightUnderline.value.style.left = `${activeTab.offsetLeft}px`
-  highlightUnderline.value.style.width = `${activeTab.clientWidth}px`
-}
-
-const updateTabs = ($event, i) => {
-  emit('update:activeTabIndex', i)
-  nextTick(() => updateHighlightUnderlinePosition($event.target))
-}
-
-watch(
-  tabsRef,
-  (newVal) => {
-    if (!newVal) {
-      return
-    }
-
-    setTimeout(() => {
-      updateHighlightUnderlinePosition(tabsRef.value.children[props.activeTabIndex])
-    }, 50)
-  },
-  {
-    immediate: true
-  }
-)
-</script>
-
-<template>
-  <div class="tabs-header">
-    <div v-if="tabs" ref="tabsRef" class="tabs">
-      <button
-        v-for="({ label }, i) in tabs"
-        :key="`${i}${label}`"
-        :class="[activeTabIndex === i ? 'active' : 'not-active']"
-        @click="updateTabs($event, i)"
-      >
-        {{ label }}
-      </button>
-      <span
-        ref="highlightUnderline"
-        class="highlight-underline"
-      >
-        <span class="tab" />
-      </span>
-    </div>
-
-    <slot name="footer" />
-  </div>
-</template>
-
-<style scoped lang="ts">
-css({
-  ".tabs-header": {
-    position: 'relative',
-    background: '{colors.gray.200}',
-    color: '{colors.red.700}',
-    '@dark': {
-      color: '{colors.red.500}',
-      background: '{colors.gray.800}',
-    },
-    '.tabs': {
-      position: 'relative',
-      zIndex: 0,
-      display: 'flex',
-      px: '{space.2}',
-      button: {
-        py: '{space.2-5}',
-        px: '{space.4}',
-        position: 'relative',
-        fontFamily: '{fonts.mono}',
-        fontSize: '{text.sm.fontSize}',
-        lineHeight: '{text.sm.lineHeight}',
-        letterSpacing: '{letterSpacings.tight}',
-        userSelect: 'none',
-        transition: 'color 100ms, background 100ms',
-        '&.not-active': {
-          color: '{colors.gray.700}',
-          '&:hover': {
-            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.500}',
-          '@dark': {
-            color: '{colors.gray.300}',
-          }
-        }
-      },
-      '.highlight-underline': {
-        position: 'absolute',
-        zIndex: -1,
-        top: 0,
-        height: '100%',
-        transition: 'left 150ms, width 150ms',
-        '.tab': {
-          display: 'flex',
-          width: '100%',
-          height: '100%',
-          backgroundColor: '{colors.gray.100}',
-          '@dark': {
-            backgroundColor: '{colors.gray.900}',
-          }
-        }
-      }
-    }
-  }
-})
-</style>
diff --git a/components/content/Terminal.vue b/components/content/Terminal.vue
deleted file mode 100644
index 7faa10a66..000000000
--- a/components/content/Terminal.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<script setup lang="ts">
-import { useClipboard } from '@vueuse/core'
-
-const props = defineProps({
-  content: {
-    type: String,
-    required: true
-  }
-})
-
-const { copy: copyToClipboard } = useClipboard()
-
-const state = ref('init')
-
-const copy = (e: MouseEvent) => {
-  copyToClipboard(props.content)
-    .then(() => {
-      state.value = 'copied'
-
-      setTimeout(() => {
-        state.value = 'init'
-      }, 1000)
-    })
-    .catch(() => {
-      console.warn("Couldn't copy to clipboard!")
-    })
-}
-</script>
-
-<template>
-  <div class="terminal" @click="copy">
-    <div v-if="state === 'copied'" class="copied">
-      <div class="scrim" />
-      <div class="content">
-        Copied!
-      </div>
-    </div>
-    <div class="header">
-      <div class="controls">
-        <div />
-        <div />
-        <div />
-      </div>
-      <div class="title">
-        Bash
-      </div>
-    </div>
-    <div class="window">
-      <span class="sign">$</span>
-      <span class="content">{{ content }}</span>
-    </div>
-    <div v-if="state !== 'copied'" class="prompt">
-      Click to copy
-    </div>
-  </div>
-</template>
-
-<style scoped lang="ts">
-css({
-  '.terminal': {
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-    height: '{space.64}',
-    cursor: 'pointer',
-    overflow: 'hidden',
-    border: '1px solid {docus.border.primary.default}',
-    borderRadius: '{radii.lg}',
-    background: '{colors.gray.900}',
-    '.copied': {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      zIndex: 10,
-      width: '100%',
-      height: '100%',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      '.scrim': {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        background: '{colors.black}',
-        opacity: '0.75'
-      },
-      '.content': {
-        zIndex: 10,
-        fontWeight: '{fontWeights.semibold}',
-        color: '{colors.gray.100}',
-        fontSize: '{fontSizes.lg}'
-      }
-    },
-    '.header': {
-      position: 'relative',
-      display: 'flex',
-      alignItems: 'center',
-      borderBottom: '1px solid {colors.gray.800}',
-      width: '100%',
-      height: '{space.12}',
-      '.controls': {
-        display: 'flex',
-        marginLeft: '{space.4}',
-        div: {
-          '&:nth-child(1)': {
-            width: '{space.3}',
-            height: '{space.3}',
-            borderRadius: '{radii.full}',
-            background: '{colors.red.400}'
-          },
-          '&:nth-child(2)': {
-            width: '{space.3}',
-            height: '{space.3}',
-            borderRadius: '{radii.full}',
-            background: '{colors.yellow.400}',
-            marginLeft: '{space.2}'
-          },
-          '&:nth-child(3)': {
-            width: '{space.3}',
-            height: '{space.3}',
-            borderRadius: '{radii.full}',
-            background: '{colors.green.400}',
-            marginLeft: '{space.2}'
-          },
-        }
-      },
-      '.title': {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        fontWeight: '{fontWeights.semibold}',
-        fontFamily: '{fonts.mono}'
-      }
-    },
-    '.window': {
-      display: 'flex',
-      flex: '1 1 0%',
-      padding: '{space.4}',
-      fontFamily: '{fonts.mono}',
-      '.sign': {
-        marginRight: '{space.2}',
-        display: 'inline-block',
-        userSelect: 'none',
-        fontWeight: '{fontWeights.bold}'
-      },
-      '.content': {
-        display: 'inline-block',
-        color: '{colors.gray.200}'
-      }
-    },
-    '.prompt': {
-      paddingTop: '{space.2}',
-      paddingBottom: '{space.2}',
-      fontWeight: '{fontWeights.semibold}',
-      textAlign: 'center',
-      opacity: 0,
-    },
-    '&:hover .prompt': {
-      opacity: 1
-    }
-  }
-})
-</style>
diff --git a/components/content/VideoPlayer.vue b/components/content/VideoPlayer.vue
deleted file mode 100644
index 0e4ebbb8f..000000000
--- a/components/content/VideoPlayer.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<script lang="ts" setup>
-import type { PropType } from 'vue'
-
-const props = defineProps({
-  poster: {
-    type: String,
-    default: ''
-  },
-  src: {
-    type: String,
-    default: ''
-  },
-  sources: {
-    type: Array as PropType<any[]>,
-    default: () => []
-  },
-  autoplay: {
-    type: Boolean,
-    default: false
-  }
-})
-
-const provider = computed(() => {
-  if (props.src && props.src.includes('youtube.com/watch')) {
-    const match = props.src.match(/\?v=([^&]*)/)
-
-    return {
-      name: 'youtube',
-      src: `https://www.youtube-nocookie.com/embed/${match?.[1] || ''}?autoplay=1`,
-      poster: props.poster || `https://i3.ytimg.com/vi/${match?.[1] || ''}/hqdefault.jpg`
-    }
-  }
-})
-
-const loaded = ref(false)
-
-if (!props.src && !props.sources.length) { throw new Error('VideoPlayer: you need to provide either `src` or `sources` props') }
-
-const src = computed(() => props.src || props.sources?.[0]?.src || false)
-</script>
-
-<template>
-  <div class="video-player" :class="{ loaded }">
-    <NuxtImg v-if="provider ? provider.poster : poster" :src="(provider ? provider.poster : poster as any)" />
-
-    <div v-if="loaded" class="loaded">
-      <!-- Remote -->
-      <video v-if="!provider" :poster="poster" controls autoplay>
-        <source v-if="src" :src="src">
-        <source v-for="source in sources" :key="source.src || source" :src="source.src || source" :type="source.type">
-      </video>
-
-      <!-- YouTube -->
-      <iframe
-        v-else-if="provider.name === 'youtube'"
-        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-        allowfullscreen="true"
-        :autoplay="autoplay"
-        :src="provider.src"
-      />
-    </div>
-
-    <div v-if="!loaded" class="play-button" @click="loaded = true">
-      <button />
-    </div>
-  </div>
-</template>
-
-<style scoped lang="ts">
-css({
-  '.video-player': {
-    position: 'relative',
-    display: 'inline-block',
-    my: '{space.8}',
-    overflow: 'hidden',
-    background: '{colors.gray.900}',
-    borderRadius: '{radii.lg}',
-    '.loaded': {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: '100%',
-    },
-    video: {
-      width: '100%'
-    },
-    iframe: {
-      width: '100%',
-      height: '100%',
-    },
-    '.play-button': {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: '100%',
-      cursor: 'pointer',
-      button: {
-        position: 'absolute',
-        transform: 'translate3d(-50%, -50%, 0)',
-        top: '50%',
-        left: '50%',
-        zIndex: 1,
-        width: '{space.24}',
-        height: '{space.24}',
-        filter: 'grayscale(100%)',
-        transition: 'filter 0.1s cubic-bezier(0, 0, 0.2, 1)',
-        backgroundPosition: 'center',
-        backgroundRepeat: 'no-repeat',
-        backgroundColor: 'transparent',
-        backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="%23f00" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>')`
-      },
-      '&:hover button': {
-        filter: 'none'
-      }
-    }
-  }
-})
-</style>
diff --git a/components/docs/DocsAsideTree.vue b/components/docs/DocsAsideTree.vue
index f1c6c051e..320766fbf 100644
--- a/components/docs/DocsAsideTree.vue
+++ b/components/docs/DocsAsideTree.vue
@@ -118,9 +118,9 @@ css({
   '.docs-aside-tree': {
     li: {
       '&.bordered': {
-        borderLeft: '1px solid {docus.border.primary.default}',
+        borderLeft: '1px solid {borders.primary.default}',
         '&:hover': {
-          borderColor: '{docus.border.primary.hover}'
+          borderColor: '{borders.primary.hover}'
         },
         '&.active': {
           borderColor: '{colors.primary.400}',
diff --git a/components/docs/DocsPageContent.vue b/components/docs/DocsPageContent.vue
index aec5faa9a..27e0e72e9 100644
--- a/components/docs/DocsPageContent.vue
+++ b/components/docs/DocsPageContent.vue
@@ -14,7 +14,7 @@ const hasBody = computed(() => !page.value || page.value?.body?.children?.length
 const hasToc = computed(() => page.value?.toc !== false && page.value?.body?.toc?.links?.length >= 2)
 
 // TODO: get navigation links from aside level
-const hasAside = computed(() => page.value?.aside !== false && navigation.value?.length > 1)
+const hasAside = computed(() => page.value?.aside !== false && navigation.value?.length > 0)
 const bottom = computed(() => fallbackValue('bottom', true))
 const isOpen = ref(false)
 
@@ -176,7 +176,7 @@ css({
       marginTop: 0,
       marginBottom: '{space.8}',
       paddingBottom: '{space.8}',
-      borderBottom: '1px solid {docus.border.primary.default}',
+      borderBottom: '1px solid {borders.primary.default}',
       color: '{colors.gray.500}',
       '@mq.sm': {
         fontSize: '{text.lg.fontSize}',
diff --git a/components/docs/DocsPrevNext.vue b/components/docs/DocsPrevNext.vue
index ed58c3c11..baa4f52f5 100644
--- a/components/docs/DocsPrevNext.vue
+++ b/components/docs/DocsPrevNext.vue
@@ -68,7 +68,7 @@ css({
       position: 'relative',
       minWidth: '0px',
       padding: '{space.3}',
-      border: '1px solid {docus.border.primary.default}',
+      border: '1px solid {borders.primary.default}',
       borderRadius: '{radii.lg}',
       '&:hover': {
         borderColor: '{colors.primary.100}',
diff --git a/components/icons/IconCodeSandBox.vue b/components/icons/IconCodeSandBox.vue
deleted file mode 100644
index 4682bdaea..000000000
--- a/components/icons/IconCodeSandBox.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <svg viewBox="0 0 105 104" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M104.297.31104.87354.3111V103.735H104.297V.31104ZM93.7196 93.1572V10.8885H11.4509v82.2687h82.2687Z" fill="currentColor" />
-  </svg>
-</template>
diff --git a/components/icons/IconDocus.vue b/components/icons/IconDocus.vue
deleted file mode 100644
index b09b36385..000000000
--- a/components/icons/IconDocus.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <svg viewBox="0 0 57 57" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M28.5445 0C12.8044 0 0 12.7599 0 28.5v25.4549c0 1.5835 1.28368 2.8672 2.86718 2.8672H28.5889C44.2799 56.8221 57 44.102 57 28.4111 57 12.7201 44.2355 0 28.5445 0Zm15.4963 34.452c3.3649 0 6.0927-2.7278 6.0927-6.0928 0-3.3649-2.7278-6.0927-6.0927-6.0927-3.365 0-6.0928 2.7278-6.0928 6.0927 0 3.365 2.7278 6.0928 6.0928 6.0928Zm-18.0833.0003c3.3649 0 6.0927-2.7278 6.0927-6.0927s-2.7278-6.0928-6.0927-6.0928-6.0928 2.7279-6.0928 6.0928c0 3.3649 2.7279 6.0927 6.0928 6.0927Z"
-      fill="currentColor"
-    />
-  </svg>
-</template>
diff --git a/components/icons/IconNuxt.vue b/components/icons/IconNuxt.vue
deleted file mode 100644
index d2567d9e4..000000000
--- a/components/icons/IconNuxt.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <svg viewBox="0 0 124 124" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M55.7498 27.1551C52.5277 21.615 44.4723 21.6149 41.2502 27.1551L6.13404 87.5346C2.91191 93.0748 6.93956 100 13.3838 100H40.7975C38.0438 97.5934 37.0241 93.4303 39.1079 89.8584L65.7033 44.2694L55.7498 27.1551Z"
-      fill="currentColor"
-    />
-    <path
-      d="M78.0002 40.3997C80.6668 35.8668 87.3332 35.8668 89.9998 40.3997L119.061 89.801C121.728 94.3339 118.395 100 113.062 100H54.9383C49.6052 100 46.2719 94.3339 48.9385 89.801L78.0002 40.3997Z"
-      fill="currentColor"
-    />
-  </svg>
-</template>
diff --git a/components/icons/IconNuxtContent.vue b/components/icons/IconNuxtContent.vue
deleted file mode 100644
index 9701d2637..000000000
--- a/components/icons/IconNuxtContent.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M53.0214 38.137C55.1705 41.8324 52.4842 46.4516 48.1861 46.4516H21.5917C17.2936 46.4516 14.6073 41.8323 16.7564 38.137L30.0536 15.272C32.2026 11.5766 37.5752 11.5766 39.7242 15.272L53.0214 38.137Z"
-      fill="#00CD81"
-    />
-    <path
-      d="M60.3763 68.7869C62.5253 65.0919 67.8979 65.0919 70.047 68.7869L83.3442 91.6497C85.4932 95.3447 82.8069 99.9634 78.5088 99.9634H51.9144C47.6164 99.9634 44.9301 95.3447 47.0791 91.6497L60.3763 68.7869Z"
-      fill="#003E27"
-    />
-    <path
-      d="M70.047 31.1765C67.8979 34.8716 62.5253 34.8716 60.3763 31.1765L47.0791 8.31374C44.9301 4.6187 47.6164 0 51.9144 0H78.5088C82.8069 0 85.4932 4.6187 83.3442 8.31374L70.047 31.1765Z"
-      fill="#99EBCD"
-    />
-    <path
-      d="M48.1861 55.0018C52.4842 55.0018 55.1705 59.621 53.0214 63.3164L39.7242 86.1814C37.5752 89.8769 32.2026 89.8767 30.0536 86.1814L16.7564 63.3164C14.6073 59.621 17.2936 55.0018 21.5917 55.0018H48.1861Z"
-      fill="#007B4D"
-    />
-  </svg>
-</template>
diff --git a/components/icons/IconNuxtLabs.vue b/components/icons/IconNuxtLabs.vue
deleted file mode 100644
index 3cc0b831d..000000000
--- a/components/icons/IconNuxtLabs.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <svg viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M39.4645 56.1168H62.5554C63.2888 56.1169 64.0093 55.9266 64.6445 55.5649C65.2796 55.2033 65.807 54.6831 66.1736 54.0567C66.5401 53.4303 66.7329 52.7198 66.7326 51.9966C66.7323 51.2734 66.5388 50.5631 66.1717 49.937L50.6645 23.4515C50.298 22.8253 49.7707 22.3053 49.1357 21.9437C48.5007 21.5821 47.7803 21.3917 47.0471 21.3917C46.3138 21.3917 45.5934 21.5821 44.9584 21.9437C44.3234 22.3053 43.7962 22.8253 43.4296 23.4515L39.4645 30.2282L31.712 16.9766C31.3452 16.3504 30.8177 15.8305 30.1825 15.469C29.5473 15.1074 28.8268 14.9171 28.0934 14.9171C27.36 14.9171 26.6396 15.1074 26.0044 15.469C25.3692 15.8305 24.8417 16.3504 24.4749 16.9766L5.17805 49.937C4.81095 50.5631 4.61751 51.2734 4.61719 51.9966C4.61687 52.7198 4.80968 53.4303 5.17624 54.0567C5.54279 54.6831 6.07016 55.2033 6.7053 55.5649C7.34044 55.9266 8.06096 56.1169 8.79438 56.1168H23.2889C29.0318 56.1168 33.267 53.6294 36.1812 48.7765L43.2563 36.6943L47.046 30.2282L58.4193 49.6508H43.2563L39.4645 56.1168ZM23.0526 49.6441L12.9373 49.6419L28.1002 23.7467L35.6659 36.6943L30.6003 45.3482C28.665 48.4969 26.4664 49.6441 23.0526 49.6441Z"
-      fill="currentColor"
-    />
-  </svg>
-</template>
diff --git a/components/icons/IconNuxtStudio.vue b/components/icons/IconNuxtStudio.vue
deleted file mode 100644
index 96cfbef48..000000000
--- a/components/icons/IconNuxtStudio.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <svg width="308" height="209" viewBox="0 0 308 209" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M172.791 209H287.287C290.924 209 294.497 208.035 297.646 206.2C300.795 204.366 303.41 201.727 305.228 198.55C307.046 195.372 308.002 191.768 308 188.099C307.998 184.43 307.039 180.827 305.219 177.651L228.326 43.2938C226.509 40.117 223.894 37.4789 220.746 35.6447C217.597 33.8105 214.025 32.8448 210.389 32.8448C206.753 32.8448 203.181 33.8105 200.033 35.6447C196.884 37.4789 194.269 40.117 192.452 43.2938L172.791 77.671L134.35 10.4475C132.531 7.27095 129.915 4.63321 126.766 2.79932C123.616 0.96544 120.044 0 116.407 0C112.771 0 109.198 0.96544 106.049 2.79932C102.899 4.63321 100.284 7.27095 98.4645 10.4475L2.78107 177.651C0.960764 180.827 0.00158427 184.43 1.96086e-06 188.099C-0.00158035 191.768 0.95449 195.372 2.77205 198.55C4.58961 201.727 7.20458 204.366 10.3539 206.2C13.5033 208.035 17.076 209 20.7126 209H92.584C121.06 209 142.06 196.382 156.511 171.764L191.593 110.472L210.384 77.671L266.778 176.199H191.593L172.791 209ZM91.4682 176.154H41.2553L116.441 44.791L153.955 110.472L128.838 154.372C119.242 170.345 108.34 176.165 91.4124 176.165" fill="currentColor" />
-  </svg>
-</template>
-
-<style scoped lang="ts">
-css({
-  svg: {
-    fill: '{colors.black}',
-    '@dark': {
-      fill: '{colors.white}'
-    }
-  }
-})
-</style>
diff --git a/components/icons/IconStackBlitz.vue b/components/icons/IconStackBlitz.vue
deleted file mode 100644
index 09d5859f9..000000000
--- a/components/icons/IconStackBlitz.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <svg viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M11.46 14.773H4L17.638 0l-3.671 10.227h7.46L7.788 25l3.671-10.227h.001Z" fill="currentColor" />
-  </svg>
-</template>
diff --git a/components/icons/IconVueTelescope.vue b/components/icons/IconVueTelescope.vue
deleted file mode 100644
index bdd1ed242..000000000
--- a/components/icons/IconVueTelescope.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <svg viewBox="0 0 124 124" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M48 82.5887L57.1066 98.175C59.3073 101.942 64.8092 101.942 67.0102 98.175L101 40H72.8834L48 82.5887Z" fill="currentColor" />
-    <path d="M77 33H104.936L105.23 32.4924C107.417 28.718 104.684 24 100.31 24H82.2142L77 33Z" fill="currentColor" />
-    <path d="M74 24L68.7601 33H19.0689L18.7734 32.4924C16.5759 28.718 19.3228 24 23.7177 24H74Z" fill="currentColor" />
-    <path d="M65 40L44 76L23 40H65Z" fill="currentColor" />
-  </svg>
-</template>
diff --git a/components/landing/BlockHero.vue b/components/landing/BlockHero.vue
deleted file mode 100644
index 1ed393fe6..000000000
--- a/components/landing/BlockHero.vue
+++ /dev/null
@@ -1,154 +0,0 @@
-<script setup lang="ts">
-import type { PropType } from 'vue'
-
-defineProps({
-  cta: {
-    type: Array as PropType<string[]>,
-    required: false
-  },
-  secondary: {
-    type: Array as PropType<string[]>,
-    required: false
-  },
-  snippet: {
-    type: String,
-    required: false
-  },
-  video: {
-    type: Array as PropType<string[]>,
-    required: false
-  }
-})
-</script>
-
-<template>
-  <section class="block-hero">
-    <div class="layout">
-      <div class="content">
-        <p v-if="$slots.announce" class="announce">
-          <ContentSlot :use="$slots.announce" unwrap="p" />
-        </p>
-
-        <h1 v-if="$slots.title" class="title">
-          <ContentSlot :use="$slots.title" unwrap="p" />
-        </h1>
-
-        <p v-if="$slots.description" class="description">
-          <ContentSlot :use="$slots.description" unwrap="p" />
-        </p>
-
-        <div v-if="$slots.extra" class="extra">
-          <ContentSlot :use="$slots.extra" unwrap="p" />
-        </div>
-
-        <div class="actions">
-          <template v-if="!$slots.actions">
-            <ButtonLink v-if="cta" class="cta" bold size="large" :href="(cta[1] as any)">
-              {{ cta[0] }}
-            </ButtonLink>
-
-            <a v-if="secondary" :href="(secondary[1] as any)" class="secondary">
-              {{ secondary[0] }}
-            </a>
-          </template>
-          <ContentSlot v-else :use="$slots.actions" unwrap="p" />
-        </div>
-      </div>
-
-      <div class="support">
-        <slot name="support">
-          <Terminal v-if="snippet" :content="snippet" />
-        </slot>
-      </div>
-    </div>
-  </section>
-</template>
-
-<style scoped lang="ts">
-css({
-  '.block-hero': {
-    padding: '{space.20} 0',
-    '@mq.sm': {
-      padding: '{space.24} 0',
-    },
-    '@mq.lg': {
-      padding: '{space.32} 0',
-    },
-    '.layout': {
-      display: 'grid',
-      gap: '{space.8}',
-      '@mq.lg': {
-        gridTemplateColumns: 'repeat(3, minmax(0, 1fr))'
-      }
-    },
-    '.content': {
-      '@mq.lg': {
-        gridColumn: 'span 2 / span 2'
-      },
-      '.announce': {
-        marginBottom: '{space.2}',
-        textAlign: 'center',
-        '@mq.lg': {
-          textAlign: 'left'
-        }
-      },
-      '.title': {
-        color: '{docus.text.color.primary}',
-        fontWeight: '{fontWeights.bold}',
-        letterSpacing: '{letterSpacings.tight}',
-        textAlign: 'center',
-        fontSize: '{text.4xl.fontSize}',
-        lineHeight: '{text.4xl.lineHeight}',
-        '@mq.sm': {
-          fontSize: '{text.5xl.fontSize}',
-          lineHeight: '{text.5xl.lineHeight}',
-        },
-        '@mq.lg': {
-          fontSize: '{text.6xl.fontSize}',
-          lineHeight: '{text.6xl.lineHeight}',
-          textAlign: 'left'
-        }
-      },
-      '.description': {
-        marginTop: '{space.4}',
-        fontSize: '{text.lg.fontSize}',
-        lineHeight: '{text.lg.lineHeight}',
-        textAlign: 'center',
-        color: '{docus.text.color.secondary}',
-        '@mq.lg': {
-          textAlign: 'left'
-        }
-      },
-      '.extra': {
-        marginTop: '{space.6}'
-      },
-      '.actions': {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: '{space.4}',
-        marginTop: '{space.6}',
-        '@mq.sm': {
-          marginTop: '{space.10}',
-          flexDirection: 'row',
-          gap: '{space.6}'
-        },
-        '@mq.lg': {
-          justifyContent: 'flex-start'
-        },
-        '.cta': {
-          marginBottom: 0
-        },
-        '.secondary': {
-          fontWeight: '{fontWeights.medium}',
-          color: '{docus.text.color.secondary}',
-          '&:hover': {
-            color: '{docus.text.color.secondaryHover}'
-          }
-        }
-      }
-    }
-  }
-})
-</style>
diff --git a/components/landing/Card.vue b/components/landing/Card.vue
deleted file mode 100644
index f2156dab3..000000000
--- a/components/landing/Card.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<script setup lang="ts">
-defineProps({
-  icon: {
-    type: String,
-    default: ''
-  },
-  iconClass: {
-    type: String,
-    default: ''
-  },
-  blurry: {
-    type: Boolean,
-    default: true,
-    required: false
-  }
-})
-</script>
-
-<template>
-  <div :class="{ blurry }" class="card">
-    <Icon v-if="icon" :name="icon" />
-    <slot />
-    <div>
-      <h3 class="title">
-        <ContentSlot :use="$slots.title" unwrap="p">
-          Card title
-        </ContentSlot>
-      </h3>
-      <p class="description">
-        <ContentSlot :use="$slots.description" unwrap="p">
-          Card description
-        </ContentSlot>
-      </p>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="ts">
-css({
-  '.card': {
-    display: 'block',
-    position: 'relative',
-    width: '100%',
-    padding: '{space.8}',
-    borderRadius: '{radii.xl}',
-    border: '1px solid {colors.gray.200}',
-    background: '{backdrop.background}',
-    '@dark': {
-      borderColor: '{colors.gray.900}',
-      color: '{colors.gray.50}'
-    },
-    '&.blurry': {
-      backdropFilter: '{backdrop.filter}',
-    },
-    '.icon': {
-      display: 'inline-block',
-      marginBottom: '{space.2}',
-      width: '{space.6}',
-      height: '{space.6}'
-    },
-    '.title': {
-      marginBottom: '{space.2}',
-      fontSize: '{text.lg.fontSize}',
-      lineHeight: '{text.lg.lineHeight}',
-      fontWeight: '{fontWeights.semibold}'
-    },
-    '.description': {
-      fontSize: '{text.sm.fontSize}',
-      lineHeight: '{text.sm.lineHeight}',
-      fontWeight: '{fontWeights.medium}',
-      color: '{docus.text.color.secondary}'
-    }
-  }
-})
-</style>
diff --git a/components/landing/CardGrid.vue b/components/landing/CardGrid.vue
deleted file mode 100644
index 0ed172a42..000000000
--- a/components/landing/CardGrid.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<script setup lang="ts">
-defineProps({
-  title: {
-    type: String,
-    default: 'Features'
-  }
-})
-</script>
-
-<template>
-  <section class="card-grid">
-    <ContentSlot :use="$slots.root" />
-
-    <h2 class="title">
-      <ContentSlot :use="$slots.title" unwrap="p" />
-    </h2>
-    <div class="layout">
-      <slot />
-    </div>
-  </section>
-</template>
-
-<style scoped lang="ts">
-css({
-  '.card-grid': {
-    position: 'relative',
-    paddingBottom: '{space.20}',
-    '@mq.sm': {
-      paddingBottom: '{space.24}',
-    },
-    '@mq.lg': {
-      paddingBottom: '{space.32}',
-    },
-    '.title': {
-      marginBottom: '{space.8}',
-      fontSize: '{text.3xl.fontSize}',
-      lineHeight: '{text.3xl.lineHeight}',
-      fontWeight: '{fontWeights.bold}',
-      letterSpacing: '{letterSpacings.tight}',
-      color: '{docus.text.color.primary}',
-      '@mq.sm': {
-        fontSize: '{text.4xl.fontSize}',
-        lineHeight: '{text.4xl.lineHeight}',
-      }
-    },
-    '.layout': {
-      display: 'grid',
-      gap: '{space.4}',
-      fontWeight: '{fontWeights.semibold}',
-      textAlign: 'left',
-      color: '{docus.text.color.primary}',
-      '@mq.sm': {
-        gridTemplateColumns: 'repeat(2, minmax(0, 1fr))'
-      },
-      '@mq.lg': {
-        gridTemplateColumns: 'repeat(3, minmax(0, 1fr))'
-      },
-      '@mq.2xl': {
-        gap: '{space.8}'
-      }
-    }
-  }
-})
-</style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 81ff43a50..8c49dac74 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -5,13 +5,14 @@ const { resolve } = createResolver(import.meta.url)
 // That allows to overwrite these dependencies paths via `.env` for local development
 const envModules = {
   'tokens': process?.env?.THEME_DEV_TOKENS_PATH || '@nuxt-themes/tokens',
+  'elements': process?.env?.THEME_DEV_ELEMENTS_PATH || '@nuxt-themes/elements',
   'studio': process?.env?.THEME_DEV_STUDIO_PATH || '@nuxthq/studio',
   'pinceau': process?.env?.THEME_DEV_PINCEAU_PATH || 'pinceau/nuxt',
   'typography': process?.env?.THEME_DEV_TYPOGRAPHY_PATH || '@nuxt-themes/typography'
 }
 
 export default defineNuxtConfig({
-  extends: [envModules.typography],
+  extends: [envModules.typography, envModules.elements],
 
   modules: [
     envModules.tokens,
@@ -36,21 +37,6 @@ export default defineNuxtConfig({
       prefix: '',
       path: resolve('./components/docs'),
       global: true
-    },
-    {
-      prefix: '',
-      path: resolve('./components/content'),
-      global: true
-    },
-    {
-      prefix: '',
-      path: resolve('./components/icons'),
-      global: true
-    },
-    {
-      prefix: '',
-      path: resolve('./components/landing'),
-      global: true
     }
   ],
 
diff --git a/package.json b/package.json
index b5f89270a..f75fc338e 100644
--- a/package.json
+++ b/package.json
@@ -30,8 +30,9 @@
     "@docsearch/js": "^3.3.0",
     "@fontsource/inter": "^4.5.14",
     "@iconify/vue": "^4.0.0",
-    "@nuxt-themes/typography": "latest",
+    "@nuxt-themes/elements": "^0.1.0",
     "@nuxt-themes/tokens": "latest",
+    "@nuxt-themes/typography": "latest",
     "@nuxt/content": "^2.2.2",
     "@nuxthq/studio": "^0.2.6",
     "@nuxtjs/algolia": "^1.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4cff95cbd..b402b71f4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,6 +6,7 @@ specifiers:
   '@docsearch/js': ^3.3.0
   '@fontsource/inter': ^4.5.14
   '@iconify/vue': ^4.0.0
+  '@nuxt-themes/elements': ^0.1.0
   '@nuxt-themes/tokens': latest
   '@nuxt-themes/typography': latest
   '@nuxt/content': ^2.2.2
@@ -28,7 +29,8 @@ dependencies:
   '@docsearch/js': 3.3.0_tbpndr44ulefs3hehwpi2mkf2y
   '@fontsource/inter': 4.5.14
   '@iconify/vue': 4.0.0_vue@3.2.45
-  '@nuxt-themes/tokens': 1.1.12_vue@3.2.45
+  '@nuxt-themes/elements': 0.1.0_vue@3.2.45
+  '@nuxt-themes/tokens': 1.1.13_vue@3.2.45
   '@nuxt-themes/typography': 0.0.24_vue@3.2.45
   '@nuxt/content': 2.2.2
   '@nuxthq/studio': 0.2.6
@@ -653,8 +655,22 @@ packages:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.13.0
 
-  /@nuxt-themes/tokens/1.1.12_vue@3.2.45:
-    resolution: {integrity: sha512-NxhOhzazzp+Qm4MrXlgvwa+UIej4G/H32axNzYlIsaadPkfGpw0EwkqqTppQvITWoTL1SVIZopEWCLy1ujsYUQ==}
+  /@nuxt-themes/elements/0.1.0_vue@3.2.45:
+    resolution: {integrity: sha512-OndK0hf2vy/4MoUOGE9FuRZDZuMBGgUaKcThkiWhlfXzqV7zz/Kjv8v1oQbAWlF/ISePmMCkVMmPh1Aq/8dLdQ==}
+    dependencies:
+      '@nuxt-themes/tokens': 1.1.13_vue@3.2.45
+      '@vueuse/core': 9.6.0_vue@3.2.45
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - postcss
+      - rollup
+      - sass
+      - supports-color
+      - vue
+    dev: false
+
+  /@nuxt-themes/tokens/1.1.13_vue@3.2.45:
+    resolution: {integrity: sha512-XseCu1sACziUOIXS/MXKPZA4NwoWVTp7jnZ6qKQ433w/6qP5VUVeqH0/MmXDojIamlZGD/wSfUPB8z4xHGRDWA==}
     dependencies:
       '@nuxtjs/color-mode': 3.1.8
       '@vueuse/core': 9.6.0_vue@3.2.45
@@ -672,7 +688,7 @@ packages:
   /@nuxt-themes/typography/0.0.24_vue@3.2.45:
     resolution: {integrity: sha512-WJV2AO7bDP32Au8o7S+0eMUNeXKsH6VYKoz2feXdOaHk9Wu+sb0AUMR/+bHQAUva6m7uavLAlTb/AVinO/BYhA==}
     dependencies:
-      '@nuxt-themes/tokens': 1.1.12_vue@3.2.45
+      '@nuxt-themes/tokens': 1.1.13_vue@3.2.45
       '@nuxtjs/color-mode': 3.1.8
       nuxt-icon: 0.1.7_vue@3.2.45
       pinceau: 0.6.26
@@ -3041,8 +3057,8 @@ packages:
       memory-fs: 0.5.0
       tapable: 1.1.3
 
-  /enhanced-resolve/5.11.0:
-    resolution: {integrity: sha512-0Gcraf7gAJSQoPg+bTSXNhuzAYtXqLc4C011vb8S3B8XUSEkGYNBk20c68X9291VF4vvsCD8SPkr6Mza+DwU+g==}
+  /enhanced-resolve/5.12.0:
+    resolution: {integrity: sha512-QHTXI/sZQmko1cbDoNAa3mJ5qhWUUNAq3vR0/YiD379fWQrcfuoX1+HW2S0MTt7XmoPLapdaDKUtelUSPic7hQ==}
     engines: {node: '>=10.13.0'}
     dependencies:
       graceful-fs: 4.2.10
@@ -3382,7 +3398,7 @@ packages:
       eslint-plugin-import: '*'
     dependencies:
       debug: 4.3.4
-      enhanced-resolve: 5.11.0
+      enhanced-resolve: 5.12.0
       eslint: 8.28.0
       eslint-plugin-import: 2.26.0_vc54pluhgv7booofyyjouvuf74
       get-tsconfig: 4.2.0
@@ -3748,7 +3764,7 @@ packages:
   /externality/1.0.0:
     resolution: {integrity: sha512-MAU9ci3XdpqOX1aoIoyL2DMzW97P8LYeJxIUkfXhOfsrkH4KLHFaYDwKN0B2l6tqedVJWiTIJtWmxmZfa05vOQ==}
     dependencies:
-      enhanced-resolve: 5.11.0
+      enhanced-resolve: 5.12.0
       mlly: 1.0.0
       pathe: 1.0.0
       ufo: 1.0.0
diff --git a/tokens.config.ts b/tokens.config.ts
index 1772a38e6..aab416036 100644
--- a/tokens.config.ts
+++ b/tokens.config.ts
@@ -12,200 +12,6 @@ export default defineTheme({
     },
     header: { height: '64px' },
     footer: { height: '50px' },
-    surface: {
-      background: {
-        base: {
-          initial: '{colors.gray.100}',
-          dark: '{colors.gray.900}'
-        }
-      }
-    },
-    // TODO: improve structure to text.color.primary[default|hover]
-    text: {
-      color: {
-        primary: {
-          initial: '{colors.gray.900}',
-          dark: '{colors.gray.50}'
-        },
-        secondary: {
-          initial: '{colors.gray.500}',
-          dark: '{colors.gray.400}'
-        },
-        secondaryHover: {
-          initial: '{colors.gray.700}',
-          dark: '{colors.gray.200}'
-        }
-      }
-    },
-    border: {
-      primary: {
-        default: {
-          initial: '{colors.gray.100}',
-          dark: '{colors.gray.800}'
-        },
-        hover: {
-          initial: '{colors.gray.200}',
-          dark: '{colors.gray.700}'
-        }
-      },
-      secondary: {
-        default: {
-          initial: '{colors.gray.200}',
-          dark: '{colors.gray.700}'
-        },
-        hover: {
-          initial: '',
-          dark: ''
-        }
-      }
-    },
-    state: {
-      primary: {
-        color: {
-          primary: {
-            initial: '{colors.primary.600}',
-            dark: '{colors.primary.400}'
-          },
-          secondary: {
-            initial: '{colors.primary.700}',
-            dark: '{colors.primary.200}'
-          }
-        },
-        backgroundColor: {
-          primary: {
-            initial: '{colors.primary.50}',
-            dark: '{colors.primary.900}'
-          },
-          secondary: {
-            initial: '{colors.primary.100}',
-            dark: '{colors.primary.800}'
-          }
-        },
-        borderColor: {
-          primary: {
-            initial: '{colors.primary.100}',
-            dark: '{colors.primary.800}'
-          },
-          secondary: {}
-        }
-      },
-      info: {
-        color: {
-          primary: {
-            initial: '{colors.blue.500}',
-            dark: '{colors.blue.400}'
-          },
-          secondary: {
-            initial: '{colors.blue.600}',
-            dark: '{colors.blue.200}'
-          }
-        },
-        backgroundColor: {
-          primary: {
-            initial: '{colors.blue.50}',
-            dark: '{colors.blue.900}'
-          },
-          secondary: {
-            initial: '{colors.blue.100}',
-            dark: '{colors.blue.800}'
-          }
-        },
-        borderColor: {
-          primary: {
-            initial: '{colors.blue.100}',
-            dark: '{colors.blue.800}'
-          },
-          secondary: {}
-        }
-      },
-      success: {
-        color: {
-          primary: {
-            initial: '{colors.green.500}',
-            dark: '{colors.green.400}'
-          },
-          secondary: {
-            initial: '{colors.green.600}',
-            dark: '{colors.green.200}'
-          }
-        },
-        backgroundColor: {
-          primary: {
-            initial: '{colors.green.50}',
-            dark: '{colors.green.900}'
-          },
-          secondary: {
-            initial: '{colors.green.100}',
-            dark: '{colors.green.800}'
-          }
-        },
-        borderColor: {
-          primary: {
-            initial: '{colors.green.100}',
-            dark: '{colors.green.800}'
-          },
-          secondary: {}
-        }
-      },
-      warning: {
-        color: {
-          primary: {
-            initial: '{colors.yellow.600}',
-            dark: '{colors.yellow.400}'
-          },
-          secondary: {
-            initial: '{colors.yellow.700}',
-            dark: '{colors.yellow.200}'
-          }
-        },
-        backgroundColor: {
-          primary: {
-            initial: '{colors.yellow.50}',
-            dark: '{colors.yellow.900}'
-          },
-          secondary: {
-            initial: '{colors.yellow.100}',
-            dark: '{colors.yellow.800}'
-          }
-        },
-        borderColor: {
-          primary: {
-            initial: '{colors.yellow.100}',
-            dark: '{colors.yellow.800}'
-          },
-          secondary: {}
-        }
-      },
-      danger: {
-        color: {
-          primary: {
-            initial: '{colors.red.500}',
-            dark: '{colors.red.300}'
-          },
-          secondary: {
-            initial: '{colors.red.600}',
-            dark: '{colors.red.200}'
-          }
-        },
-        backgroundColor: {
-          primary: {
-            initial: '{colors.red.50}',
-            dark: '{colors.red.900}'
-          },
-          secondary: {
-            initial: '{colors.red.100}',
-            dark: '{colors.red.800}'
-          }
-        },
-        borderColor: {
-          primary: {
-            initial: '{colors.red.100}',
-            dark: '{colors.red.800}'
-          },
-          secondary: {}
-        }
-      }
-    }
   },
   typography: {
     colors: {
@@ -243,25 +49,5 @@ export default defineTheme({
       // TODO: rgba 80% from colors.black
       dark: '#0c0d0ccc'
     }
-  },
-  utils: {
-    stateColors: (value: any) => {
-      return {
-        color: `{docus.state.${value}.color.primary}`,
-        backgroundColor: `{docus.state.${value}.backgroundColor.primary}`,
-        borderColor: `{docus.state.${value}.borderColor.primary}`,
-        ':deep(code)': {
-          color: `{docus.state.${value}.color.secondary}`,
-          backgroundColor: `{docus.state.${value}.backgroundColor.secondary}`
-        },
-        ':deep(a)': {
-          borderColor: 'currentColor',
-          '&:hover': {
-            color: `{docus.state.${value}.color.secondary}`,
-            borderColor: 'currentColor'
-          }
-        }
-      }
-    }
   }
 })