From 733794134190fcd336ba18738d90d8d0ff4f906a Mon Sep 17 00:00:00 2001
From: productdevbook <hi@productdevbook.com>
Date: Sat, 9 Nov 2024 19:37:27 +0300
Subject: [PATCH] chore: update docs

---
 .../components/NewHeroCodeGroup.vue           |  2 +-
 .../components/NewHeroContainer.vue           | 18 ++++
 .docs/.vitepress/config.ts                    |  2 +-
 .docs/codeeditor/index.ts                     | 14 ++++
 .docs/components/Nuxt.vue                     | 41 +++++++++
 .docs/components/Storybook.vue                | 41 +++++++++
 .docs/components/Tooltip.vue                  |  2 +-
 .../demo/Accordion/tailwind/index.vue         |  2 +-
 .../demo/Checkbox/tailwind/index.vue          |  2 +-
 .../demo/Collapsible/tailwind/index.vue       |  2 +-
 .../demo/ContextMenu/tailwind/index.vue       | 68 +++++++--------
 .../components/demo/Dialog/tailwind/index.vue |  8 +-
 .../demo/DialogNested/tailwind/index.vue      |  8 +-
 .../demo/DialogToaster/tailwind/index.vue     |  4 +-
 .../demo/DropdownMenu/tailwind/index.vue      | 70 ++++++++--------
 .../demo/Menubar/tailwind/index.vue           | 84 +++++++++----------
 .../demo/Popover/tailwind/index.vue           | 14 ++--
 .../demo/RadioGroup/tailwind/index.vue        |  6 +-
 .docs/components/demo/Tabs/tailwind/index.vue | 24 +++---
 .../components/demo/Toast/tailwind/index.vue  |  2 +-
 .../components/demo/Toggle/tailwind/index.vue |  2 +-
 .../demo/ToggleGroup/tailwind/index.vue       |  2 +-
 .../demo/Toolbar/tailwind/index.vue           | 16 ++--
 .../demo/Tooltip/tailwind/index.vue           |  2 +-
 .docs/content/guides/i18n.md                  |  4 +-
 .docs/content/index.md                        |  2 +-
 .docs/content/public/demo.json                |  3 +
 .docs/scripts/autogen.ts                      |  4 +-
 .storybook/version.txt                        |  1 +
 packages/core/tsconfig.docs.json              | 26 ++++++
 30 files changed, 309 insertions(+), 167 deletions(-)
 create mode 100644 .docs/components/Nuxt.vue
 create mode 100644 .docs/components/Storybook.vue
 create mode 100644 .docs/content/public/demo.json
 create mode 100644 .storybook/version.txt
 create mode 100644 packages/core/tsconfig.docs.json

diff --git a/.docs/.vitepress/components/NewHeroCodeGroup.vue b/.docs/.vitepress/components/NewHeroCodeGroup.vue
index cd3840e8..20fec27a 100644
--- a/.docs/.vitepress/components/NewHeroCodeGroup.vue
+++ b/.docs/.vitepress/components/NewHeroCodeGroup.vue
@@ -121,7 +121,7 @@ watch(open, () => {
                   <SelectItem
                     v-for="framework in cssFrameworkOptions"
                     :key="framework.label"
-                    class="text-xs leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                    class="text-xs leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
                     :value="framework.value"
                   >
                     <SelectItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
diff --git a/.docs/.vitepress/components/NewHeroContainer.vue b/.docs/.vitepress/components/NewHeroContainer.vue
index b5c9df2f..fc7488f6 100644
--- a/.docs/.vitepress/components/NewHeroContainer.vue
+++ b/.docs/.vitepress/components/NewHeroContainer.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import CodeSandbox from '../../components/CodeSandbox.vue'
 import Stackblitz from '../../components/Stackblitz.vue'
+import Storybook from '../../components/Storybook.vue'
+import Nuxt from '../../components/Nuxt.vue'
 
 withDefaults(
   defineProps<{
@@ -36,6 +38,22 @@ withDefaults(
           :name="folder"
           :files="files"
         />
+
+        <Storybook
+          v-if="folder"
+          :key="cssFramework"
+          class="hidden sm:block absolute bottom-4 left-4"
+          :name="folder"
+          :files="files"
+        />
+
+        <Nuxt
+          v-if="folder"
+          :key="cssFramework"
+          class="hidden sm:block absolute bottom-4 left-12"
+          :name="folder"
+          :files="files"
+        />
       </div>
     </div>
     <slot name="codeSlot" />
diff --git a/.docs/.vitepress/config.ts b/.docs/.vitepress/config.ts
index 741cbb29..fe3cdb40 100644
--- a/.docs/.vitepress/config.ts
+++ b/.docs/.vitepress/config.ts
@@ -19,7 +19,7 @@ import { preWrapperPlugin } from './plugins/preWrapper'
 import { snippetPlugin } from './plugins/snippet'
 
 function BadgeHTML(text: string, translucent = false) {
-  return `<div class="inline-flex items-center rounded-full border px-2.5 py-0.5 ml-2 mt-1 text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-green8 ${translucent ? 'bg-opacity-30' : ''} text-white">
+  return `<div class="inline-flex items-center rounded-full border px-2.5 py-0.5 ml-2 mt-1 text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-indigo8 ${translucent ? 'bg-opacity-30' : ''} text-white">
 ${text}
 </div>
 `
diff --git a/.docs/codeeditor/index.ts b/.docs/codeeditor/index.ts
index 8a53a399..056208c6 100644
--- a/.docs/codeeditor/index.ts
+++ b/.docs/codeeditor/index.ts
@@ -26,6 +26,20 @@ export function makeStackblitzParams(componentName: string, sources: Record<stri
   })
 }
 
+export function makeDemoParams(componentName: string, type: 'storybook' | 'nuxt') {
+  console.log('componentName', componentName)
+  const storybookUrl = 'https://primitives-storybook.oku-ui.com/?path=/story/components-'
+  const nuxtUrl = 'https://primitives-nuxt.oku-ui.com/'
+  if (type === 'storybook') {
+    return `${storybookUrl}${componentName.toLowerCase().replace(/ /g, '-')}`
+  }
+
+  if (type === 'nuxt') {
+    // ScrollArea -> scroll-area
+    return nuxtUrl + componentName.replace(/([A-Z])/g, '-$1').toLowerCase().replace(/^-/, '');
+  }
+}
+
 const viteConfig = {
   'vite.config.js': {
     content: `import { defineConfig } from 'vite'
diff --git a/.docs/components/Nuxt.vue b/.docs/components/Nuxt.vue
new file mode 100644
index 00000000..0267ecf7
--- /dev/null
+++ b/.docs/components/Nuxt.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { makeDemoParams } from '../codeeditor'
+import Tooltip from './Tooltip.vue'
+import { Icon } from '@iconify/vue'
+
+const props = defineProps<{
+  name: string
+  files: string[]
+}>()
+
+const sources = ref<Record<string, string>>({})
+
+onMounted(() => {
+  props.files?.forEach((file) => {
+    const [folder, fileName] = file.split('/')
+    const extension = file.split('.').pop()
+    import(`../components/demo/${props.name}/${folder}/${fileName.replace(`.${extension}`, '')}.${extension}?raw`).then(
+      res => (sources.value[fileName] = res.default),
+    )
+  })
+})
+
+function handleClick() {
+  const url = makeDemoParams(props.name, 'nuxt')
+
+  window.open
+    ? window.open(url, '_blank')
+    : window.location.assign
+}
+</script>
+
+<template>
+  <div>
+    <Tooltip :content="`Open ${name} in Nuxt 3`">
+      <button @click="handleClick">
+        <Icon icon="simple-icons:nuxtdotjs" />
+      </button>
+    </Tooltip>
+  </div>
+</template>
diff --git a/.docs/components/Storybook.vue b/.docs/components/Storybook.vue
new file mode 100644
index 00000000..072b4f44
--- /dev/null
+++ b/.docs/components/Storybook.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { makeDemoParams } from '../codeeditor'
+import Tooltip from './Tooltip.vue'
+import { Icon } from '@iconify/vue'
+
+const props = defineProps<{
+  name: string
+  files: string[]
+}>()
+
+const sources = ref<Record<string, string>>({})
+
+onMounted(() => {
+  props.files?.forEach((file) => {
+    const [folder, fileName] = file.split('/')
+    const extension = file.split('.').pop()
+    import(`../components/demo/${props.name}/${folder}/${fileName.replace(`.${extension}`, '')}.${extension}?raw`).then(
+      res => (sources.value[fileName] = res.default),
+    )
+  })
+})
+
+function handleClick() {
+  const url = makeDemoParams(props.name, 'storybook')
+
+  window.open
+    ? window.open(url, '_blank')
+    : window.location.assign
+}
+</script>
+
+<template>
+  <div>
+    <Tooltip :content="`Open ${name} in Storybook with Vue 3`">
+      <button @click="handleClick">
+        <Icon icon="simple-icons:storybook" />
+      </button>
+    </Tooltip>
+  </div>
+</template>
diff --git a/.docs/components/Tooltip.vue b/.docs/components/Tooltip.vue
index b1421e0a..5990737c 100644
--- a/.docs/components/Tooltip.vue
+++ b/.docs/components/Tooltip.vue
@@ -10,7 +10,7 @@ defineProps<{
   <TooltipProvider>
     <TooltipRoot>
       <TooltipTrigger
-        class="text-white hover:text-mauve12 focus:text-mauve12 shadow-blackA7 focus:bg-green3 hover:bg-green3 inline-flex h-[35px] w-[35px] items-center justify-center rounded-full shadow-none outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
+        class="text-white hover:text-mauve12 focus:text-mauve12 shadow-blackA7 focus:bg-indigo3 hover:bg-indigo3 inline-flex h-[35px] w-[35px] items-center justify-center rounded-full shadow-none outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
         as-child
       >
         <slot />
diff --git a/.docs/components/demo/Accordion/tailwind/index.vue b/.docs/components/demo/Accordion/tailwind/index.vue
index 767f543e..24e67319 100644
--- a/.docs/components/demo/Accordion/tailwind/index.vue
+++ b/.docs/components/demo/Accordion/tailwind/index.vue
@@ -41,7 +41,7 @@ const accordionItems = [
             <span>{{ item.title }}</span>
             <Icon
               icon="radix-icons:chevron-down"
-              class="text-green10 ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180"
+              class="text-indigo10 ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180"
               aria-label="Expand/Collapse"
             />
           </AccordionTrigger>
diff --git a/.docs/components/demo/Checkbox/tailwind/index.vue b/.docs/components/demo/Checkbox/tailwind/index.vue
index e4b0f41a..1f3b359b 100644
--- a/.docs/components/demo/Checkbox/tailwind/index.vue
+++ b/.docs/components/demo/Checkbox/tailwind/index.vue
@@ -11,7 +11,7 @@ const checkboxOne = ref(true)
     <label class="flex flex-row gap-4 items-center [&>.checkbox]:hover:bg-neutral-100">
       <CheckboxRoot
         v-model:checked="checkboxOne"
-        class="shadow-blackA7 hover:bg-green3 flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-[4px] bg-white shadow-[0_2px_10px] outline-none focus-within:shadow-[0_0_0_2px_black]"
+        class="shadow-blackA7 hover:bg-indigo3 flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-[4px] bg-white shadow-[0_2px_10px] outline-none focus-within:shadow-[0_0_0_2px_black]"
       >
         <CheckboxIndicator class="bg-white h-full w-full rounded flex items-center justify-center">
           <Icon
diff --git a/.docs/components/demo/Collapsible/tailwind/index.vue b/.docs/components/demo/Collapsible/tailwind/index.vue
index cdd14e19..d6c3c161 100644
--- a/.docs/components/demo/Collapsible/tailwind/index.vue
+++ b/.docs/components/demo/Collapsible/tailwind/index.vue
@@ -14,7 +14,7 @@ const open = ref(false)
     <div style="display: flex; align-items: center; justify-content: space-between">
       <span class="text-white text-[15px] leading-[25px]"> @peduarte starred 3 repos </span>
       <CollapsibleTrigger
-        class="cursor-default rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-mauve12 shadow-[0_2px_10px] shadow-blackA7 outline-none data-[state=closed]:bg-white data-[state=open]:bg-green3 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black"
+        class="cursor-default rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-mauve12 shadow-[0_2px_10px] shadow-blackA7 outline-none data-[state=closed]:bg-white data-[state=open]:bg-indigo3 hover:bg-indigo3 focus:shadow-[0_0_0_2px] focus:shadow-black"
       >
         <Icon
           v-if="open"
diff --git a/.docs/components/demo/ContextMenu/tailwind/index.vue b/.docs/components/demo/ContextMenu/tailwind/index.vue
index 79c47354..caf9eec5 100644
--- a/.docs/components/demo/ContextMenu/tailwind/index.vue
+++ b/.docs/components/demo/ContextMenu/tailwind/index.vue
@@ -43,7 +43,7 @@ function handleClick() {
       >
         <ContextMenuItem
           value="New Tab"
-          class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+          class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
           @click="handleClick"
         >
           New Tab <div
@@ -55,7 +55,7 @@ function handleClick() {
         <ContextMenuSub>
           <ContextMenuSubTrigger
             value="more toolsz"
-            class="group w-full text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
+            class="group w-full text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1 data-[highlighted]:data-[state=open]:bg-indigo9 data-[highlighted]:data-[state=open]:text-indigo1"
           >
             More Tools <div
               class="ml-auto pl-[20px] text-mauve12 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
@@ -70,7 +70,7 @@ function handleClick() {
               :align-offset="-5"
             >
               <ContextMenuItem
-                class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
               >
                 Save Page As… <div
                   class="ml-auto pl-[20px] text-mauve12 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
@@ -79,18 +79,18 @@ function handleClick() {
                 </div>
               </ContextMenuItem>
               <ContextMenuItem
-                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
               >
                 Create Shortcut…
               </ContextMenuItem>
               <ContextMenuItem
-                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
               >
                 Name Window…
               </ContextMenuItem>
-              <ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
+              <ContextMenuSeparator class="h-[1px] bg-indigo6 m-[5px]" />
               <ContextMenuItem
-                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
               >
                 Developer Tools
               </ContextMenuItem>
@@ -99,7 +99,7 @@ function handleClick() {
         </ContextMenuSub>
         <ContextMenuItem
           value="New Window"
-          class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+          class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
         >
           New Window <div
             class="ml-auto pl-[20px] text-mauve12 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
@@ -109,7 +109,7 @@ function handleClick() {
         </ContextMenuItem>
         <ContextMenuItem
           value="New Private Window"
-          class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+          class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
           disabled
         >
           New Private Window <div
@@ -121,7 +121,7 @@ function handleClick() {
         <ContextMenuSub>
           <ContextMenuSubTrigger
             value="more tools"
-            class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none w-full outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
+            class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none w-full outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1 data-[highlighted]:data-[state=open]:bg-indigo9 data-[highlighted]:data-[state=open]:text-indigo1"
           >
             More Tools <div
               class="ml-auto pl-[20px] text-mauve12 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
@@ -136,7 +136,7 @@ function handleClick() {
               :align-offset="-5"
             >
               <ContextMenuItem
-                class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
               >
                 Save Page As… <div
                   class="ml-auto pl-[20px] text-mauve12 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
@@ -145,25 +145,25 @@ function handleClick() {
                 </div>
               </ContextMenuItem>
               <ContextMenuItem
-                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
               >
                 Create Shortcut…
               </ContextMenuItem>
               <ContextMenuItem
-                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
               >
                 Name Window…
               </ContextMenuItem>
-              <ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
+              <ContextMenuSeparator class="h-[1px] bg-indigo6 m-[5px]" />
               <ContextMenuItem
-                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
               >
                 Developer Tools
               </ContextMenuItem>
               <ContextMenuSub>
                 <ContextMenuSubTrigger
                   value="more toolsz"
-                  class="group w-full text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
+                  class="group w-full text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1 data-[highlighted]:data-[state=open]:bg-indigo9 data-[highlighted]:data-[state=open]:text-indigo1"
                 >
                   More Tools <div
                     class="ml-auto pl-[20px] text-mauve12 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
@@ -178,7 +178,7 @@ function handleClick() {
                     :align-offset="-5"
                   >
                     <ContextMenuItem
-                      class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                      class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
                     >
                       Save Page As… <div
                         class="ml-auto pl-[20px] text-mauve12 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
@@ -187,25 +187,25 @@ function handleClick() {
                       </div>
                     </ContextMenuItem>
                     <ContextMenuItem
-                      class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                      class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
                     >
                       Create Shortcut…
                     </ContextMenuItem>
                     <ContextMenuItem
-                      class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                      class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
                     >
                       Name Window…
                     </ContextMenuItem>
-                    <ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
+                    <ContextMenuSeparator class="h-[1px] bg-indigo6 m-[5px]" />
                     <ContextMenuItem
-                      class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                      class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
                     >
                       Developer Tools
                     </ContextMenuItem>
                     <ContextMenuSub>
                       <ContextMenuSubTrigger
                         value="more toolsz"
-                        class="group w-full text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
+                        class="group w-full text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1 data-[highlighted]:data-[state=open]:bg-indigo9 data-[highlighted]:data-[state=open]:text-indigo1"
                       >
                         More Tools <div
                           class="ml-auto pl-[20px] text-mauve12 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
@@ -220,7 +220,7 @@ function handleClick() {
                           :align-offset="-5"
                         >
                           <ContextMenuItem
-                            class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                            class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
                           >
                             Save Page As… <div
                               class="ml-auto pl-[20px] text-mauve12 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
@@ -229,18 +229,18 @@ function handleClick() {
                             </div>
                           </ContextMenuItem>
                           <ContextMenuItem
-                            class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                            class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
                           >
                             Create Shortcut…
                           </ContextMenuItem>
                           <ContextMenuItem
-                            class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                            class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
                           >
                             Name Window…
                           </ContextMenuItem>
-                          <ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
+                          <ContextMenuSeparator class="h-[1px] bg-indigo6 m-[5px]" />
                           <ContextMenuItem
-                            class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                            class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
                           >
                             Developer Tools
                           </ContextMenuItem>
@@ -251,17 +251,17 @@ function handleClick() {
                 </ContextMenuPortal>
               </ContextMenuSub>
               <ContextMenuItem
-                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
               >
                 Developer Tools
               </ContextMenuItem>
             </ContextMenuSubContent>
           </ContextMenuPortal>
         </ContextMenuSub>
-        <ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
+        <ContextMenuSeparator class="h-[1px] bg-indigo6 m-[5px]" />
         <ContextMenuCheckboxItem
           v-model="checkboxOne"
-          class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+          class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
         >
           <ContextMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
             <Icon icon="radix-icons:check" />
@@ -273,19 +273,19 @@ function handleClick() {
         </ContextMenuCheckboxItem>
         <ContextMenuCheckboxItem
           v-model="checkboxTwo"
-          class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+          class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
         >
           <ContextMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
             <Icon icon="radix-icons:check" />
           </ContextMenuItemIndicator> Show Full URLs
         </ContextMenuCheckboxItem>
-        <ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
+        <ContextMenuSeparator class="h-[1px] bg-indigo6 m-[5px]" />
         <ContextMenuLabel class="pl-[25px] text-xs leading-[25px] text-mauve12">
           People
         </ContextMenuLabel>
         <ContextMenuRadioGroup v-model="person">
           <ContextMenuRadioItem
-            class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+            class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
             value="pedro"
           >
             <ContextMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
@@ -293,7 +293,7 @@ function handleClick() {
             </ContextMenuItemIndicator> Pedro Duarte
           </ContextMenuRadioItem>
           <ContextMenuRadioItem
-            class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+            class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
             value="colm"
           >
             <ContextMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
diff --git a/.docs/components/demo/Dialog/tailwind/index.vue b/.docs/components/demo/Dialog/tailwind/index.vue
index 2dbe068c..a0e0bc48 100644
--- a/.docs/components/demo/Dialog/tailwind/index.vue
+++ b/.docs/components/demo/Dialog/tailwind/index.vue
@@ -37,7 +37,7 @@ import { Icon } from '@iconify/vue'
           > Name </label>
           <input
             id="name"
-            class="text-mauve12 shadow-green7 focus:shadow-green8 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
+            class="text-mauve12 shadow-indigo7 focus:shadow-indigo8 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
             defaultValue="Pedro Duarte"
           >
         </fieldset>
@@ -48,21 +48,21 @@ import { Icon } from '@iconify/vue'
           > Username </label>
           <input
             id="username"
-            class="text-mauve12 shadow-green7 focus:shadow-green8 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
+            class="text-mauve12 shadow-indigo7 focus:shadow-indigo8 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
             defaultValue="@peduarte"
           >
         </fieldset>
         <div class="mt-[25px] flex justify-end">
           <DialogClose as-child>
             <button
-              class="bg-green4 text-green11 hover:bg-green5 focus:shadow-green7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-semibold leading-none focus:shadow-[0_0_0_2px] focus:outline-none"
+              class="bg-indigo4 text-indigo11 hover:bg-indigo5 focus:shadow-indigo7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-semibold leading-none focus:shadow-[0_0_0_2px] focus:outline-none"
             >
               Save changes
             </button>
           </DialogClose>
         </div>
         <DialogClose
-          class="text-mauve12 hover:bg-green4 focus:shadow-green7 absolute top-[10px] right-[10px] inline-flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-full focus:shadow-[0_0_0_2px] focus:outline-none"
+          class="text-mauve12 hover:bg-indigo4 focus:shadow-indigo7 absolute top-[10px] right-[10px] inline-flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-full focus:shadow-[0_0_0_2px] focus:outline-none"
           aria-label="Close"
         >
           <Icon icon="lucide:x" />
diff --git a/.docs/components/demo/DialogNested/tailwind/index.vue b/.docs/components/demo/DialogNested/tailwind/index.vue
index 4299a5f1..c1b70b76 100644
--- a/.docs/components/demo/DialogNested/tailwind/index.vue
+++ b/.docs/components/demo/DialogNested/tailwind/index.vue
@@ -35,7 +35,7 @@ import { Icon } from '@iconify/vue'
           <div class="mt-[25px] flex gap-4 justify-end">
             <DialogClose as-child>
               <button
-                class="bg-green4 text-green11 hover:bg-green5 focus:shadow-green7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-semibold leading-none focus:shadow-[0_0_0_2px] focus:outline-none"
+                class="bg-indigo4 text-indigo11 hover:bg-indigo5 focus:shadow-indigo7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-semibold leading-none focus:shadow-[0_0_0_2px] focus:outline-none"
               >
                 Close
               </button>
@@ -43,7 +43,7 @@ import { Icon } from '@iconify/vue'
 
             <DialogRoot>
               <DialogTrigger
-                class="bg-green9 font-semibold shadow-blackA7 hover:bg-green10  inline-flex h-[35px] items-center justify-center rounded-[4px] text-white px-[15px] leading-none shadow-[0_2px_10px] focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none"
+                class="bg-indigo9 font-semibold shadow-blackA7 hover:bg-indigo10  inline-flex h-[35px] items-center justify-center rounded-[4px] text-white px-[15px] leading-none shadow-[0_2px_10px] focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none"
               >
                 Open second
               </DialogTrigger>
@@ -63,7 +63,7 @@ import { Icon } from '@iconify/vue'
                   <div class="flex justify-end">
                     <DialogClose as-child>
                       <button
-                        class="bg-green4 text-green11 hover:bg-green5 focus:shadow-green7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-semibold leading-none focus:shadow-[0_0_0_2px] focus:outline-none"
+                        class="bg-indigo4 text-indigo11 hover:bg-indigo5 focus:shadow-indigo7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-semibold leading-none focus:shadow-[0_0_0_2px] focus:outline-none"
                       >
                         Close
                       </button>
@@ -74,7 +74,7 @@ import { Icon } from '@iconify/vue'
             </DialogRoot>
           </div>
           <DialogClose
-            class="text-mauve12 hover:bg-green4 focus:shadow-green7 absolute top-[10px] right-[10px] inline-flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-full focus:shadow-[0_0_0_2px] focus:outline-none"
+            class="text-mauve12 hover:bg-indigo4 focus:shadow-indigo7 absolute top-[10px] right-[10px] inline-flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-full focus:shadow-[0_0_0_2px] focus:outline-none"
             aria-label="Close"
           >
             <Icon icon="lucide:x" />
diff --git a/.docs/components/demo/DialogToaster/tailwind/index.vue b/.docs/components/demo/DialogToaster/tailwind/index.vue
index 5cccd6ff..cbb4fed0 100644
--- a/.docs/components/demo/DialogToaster/tailwind/index.vue
+++ b/.docs/components/demo/DialogToaster/tailwind/index.vue
@@ -39,7 +39,7 @@ import { Toaster, toast } from 'vue-sonner'
           </DialogDescription>
 
           <button
-            class="bg-green4 text-green11 hover:bg-green5 focus:shadow-green7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-semibold leading-none focus:shadow-[0_0_0_2px] focus:outline-none"
+            class="bg-indigo4 text-indigo11 hover:bg-indigo5 focus:shadow-indigo7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-semibold leading-none focus:shadow-[0_0_0_2px] focus:outline-none"
             @click="() => toast('Event has been created', {
               action: {
                 label: 'Undo',
@@ -51,7 +51,7 @@ import { Toaster, toast } from 'vue-sonner'
           </button>
 
           <DialogClose
-            class="text-mauve12 hover:bg-green4 focus:shadow-green7 absolute top-[10px] right-[10px] inline-flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-full focus:shadow-[0_0_0_2px] focus:outline-none"
+            class="text-mauve12 hover:bg-indigo4 focus:shadow-indigo7 absolute top-[10px] right-[10px] inline-flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-full focus:shadow-[0_0_0_2px] focus:outline-none"
             aria-label="Close"
           >
             <Icon icon="lucide:x" />
diff --git a/.docs/components/demo/DropdownMenu/tailwind/index.vue b/.docs/components/demo/DropdownMenu/tailwind/index.vue
index 269f5957..800e0317 100644
--- a/.docs/components/demo/DropdownMenu/tailwind/index.vue
+++ b/.docs/components/demo/DropdownMenu/tailwind/index.vue
@@ -33,7 +33,7 @@ function handleClick() {
 <template>
   <DropdownMenuRoot v-model:open="toggleState">
     <DropdownMenuTrigger
-      class="rounded-full w-[35px] h-[35px] inline-flex items-center justify-center text-mauve12 bg-white shadow-[0_2px_10px] shadow-blackA7 outline-none hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black"
+      class="rounded-full w-[35px] h-[35px] inline-flex items-center justify-center text-mauve12 bg-white shadow-[0_2px_10px] shadow-blackA7 outline-none hover:bg-indigo3 focus:shadow-[0_0_0_2px] focus:shadow-black"
       aria-label="Customise options"
     >
       <Icon icon="radix-icons:hamburger-menu" />
@@ -46,7 +46,7 @@ function handleClick() {
       >
         <DropdownMenuItem
           value="New Tab"
-          class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+          class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
           @click="handleClick"
         >
           New Tab
@@ -59,7 +59,7 @@ function handleClick() {
         <DropdownMenuSub>
           <DropdownMenuSubTrigger
             value="more toolsz"
-            class="group w-full text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
+            class="group w-full text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1 data-[highlighted]:data-[state=open]:bg-indigo9 data-[highlighted]:data-[state=open]:text-indigo1"
           >
             More Tools
             <div
@@ -75,7 +75,7 @@ function handleClick() {
               :align-offset="-5"
             >
               <DropdownMenuItem
-                class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
               >
                 Save Page As…
                 <div
@@ -85,18 +85,18 @@ function handleClick() {
                 </div>
               </DropdownMenuItem>
               <DropdownMenuItem
-                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
               >
                 Create Shortcut…
               </DropdownMenuItem>
               <DropdownMenuItem
-                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
               >
                 Name Window…
               </DropdownMenuItem>
-              <DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
+              <DropdownMenuSeparator class="h-[1px] bg-indigo6 m-[5px]" />
               <DropdownMenuItem
-                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
               >
                 Developer Tools
               </DropdownMenuItem>
@@ -105,7 +105,7 @@ function handleClick() {
         </DropdownMenuSub>
         <DropdownMenuItem
           value="New Window"
-          class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+          class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
         >
           New Window
           <div
@@ -116,7 +116,7 @@ function handleClick() {
         </DropdownMenuItem>
         <DropdownMenuItem
           value="New Private Window"
-          class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+          class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
           disabled
         >
           New Private Window
@@ -129,7 +129,7 @@ function handleClick() {
         <DropdownMenuSub>
           <DropdownMenuSubTrigger
             value="more tools"
-            class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none w-full outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
+            class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none w-full outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1 data-[highlighted]:data-[state=open]:bg-indigo9 data-[highlighted]:data-[state=open]:text-indigo1"
           >
             More Tools
             <div
@@ -145,7 +145,7 @@ function handleClick() {
               :align-offset="-5"
             >
               <DropdownMenuItem
-                class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
               >
                 Save Page As…
                 <div
@@ -155,25 +155,25 @@ function handleClick() {
                 </div>
               </DropdownMenuItem>
               <DropdownMenuItem
-                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
               >
                 Create Shortcut…
               </DropdownMenuItem>
               <DropdownMenuItem
-                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
               >
                 Name Window…
               </DropdownMenuItem>
-              <DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
+              <DropdownMenuSeparator class="h-[1px] bg-indigo6 m-[5px]" />
               <DropdownMenuItem
-                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
               >
                 Developer Tools
               </DropdownMenuItem>
               <DropdownMenuSub>
                 <DropdownMenuSubTrigger
                   value="more toolsz"
-                  class="group w-full text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
+                  class="group w-full text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1 data-[highlighted]:data-[state=open]:bg-indigo9 data-[highlighted]:data-[state=open]:text-indigo1"
                 >
                   More Tools
                   <div
@@ -189,7 +189,7 @@ function handleClick() {
                     :align-offset="-5"
                   >
                     <DropdownMenuItem
-                      class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                      class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
                     >
                       Save Page As…
                       <div
@@ -199,25 +199,25 @@ function handleClick() {
                       </div>
                     </DropdownMenuItem>
                     <DropdownMenuItem
-                      class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                      class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
                     >
                       Create Shortcut…
                     </DropdownMenuItem>
                     <DropdownMenuItem
-                      class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                      class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
                     >
                       Name Window…
                     </DropdownMenuItem>
-                    <DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
+                    <DropdownMenuSeparator class="h-[1px] bg-indigo6 m-[5px]" />
                     <DropdownMenuItem
-                      class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                      class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
                     >
                       Developer Tools
                     </DropdownMenuItem>
                     <DropdownMenuSub>
                       <DropdownMenuSubTrigger
                         value="more toolsz"
-                        class="group w-full text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
+                        class="group w-full text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1 data-[highlighted]:data-[state=open]:bg-indigo9 data-[highlighted]:data-[state=open]:text-indigo1"
                       >
                         More Tools
                         <div
@@ -233,7 +233,7 @@ function handleClick() {
                           :align-offset="-5"
                         >
                           <DropdownMenuItem
-                            class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                            class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
                           >
                             Save Page As…
                             <div
@@ -243,18 +243,18 @@ function handleClick() {
                             </div>
                           </DropdownMenuItem>
                           <DropdownMenuItem
-                            class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                            class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
                           >
                             Create Shortcut…
                           </DropdownMenuItem>
                           <DropdownMenuItem
-                            class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                            class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
                           >
                             Name Window…
                           </DropdownMenuItem>
-                          <DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
+                          <DropdownMenuSeparator class="h-[1px] bg-indigo6 m-[5px]" />
                           <DropdownMenuItem
-                            class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                            class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
                           >
                             Developer Tools
                           </DropdownMenuItem>
@@ -265,17 +265,17 @@ function handleClick() {
                 </DropdownMenuPortal>
               </DropdownMenuSub>
               <DropdownMenuItem
-                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
               >
                 Developer Tools
               </DropdownMenuItem>
             </DropdownMenuSubContent>
           </DropdownMenuPortal>
         </DropdownMenuSub>
-        <DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
+        <DropdownMenuSeparator class="h-[1px] bg-indigo6 m-[5px]" />
         <DropdownMenuCheckboxItem
           v-model:checked="checkboxOne"
-          class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+          class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
         >
           <DropdownMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
             <Icon icon="radix-icons:check" />
@@ -289,21 +289,21 @@ function handleClick() {
         </DropdownMenuCheckboxItem>
         <DropdownMenuCheckboxItem
           v-model:checked="checkboxTwo"
-          class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+          class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
         >
           <DropdownMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
             <Icon icon="radix-icons:check" />
           </DropdownMenuItemIndicator>
           Show Full URLs
         </DropdownMenuCheckboxItem>
-        <DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
+        <DropdownMenuSeparator class="h-[1px] bg-indigo6 m-[5px]" />
 
         <DropdownMenuLabel class="pl-[25px] text-xs leading-[25px] text-mauve12">
           People
         </DropdownMenuLabel>
         <DropdownMenuRadioGroup v-model="person">
           <DropdownMenuRadioItem
-            class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+            class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
             value="pedro"
           >
             <DropdownMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
@@ -312,7 +312,7 @@ function handleClick() {
             Pedro Duarte
           </DropdownMenuRadioItem>
           <DropdownMenuRadioItem
-            class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+            class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
             value="colm"
           >
             <DropdownMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
diff --git a/.docs/components/demo/Menubar/tailwind/index.vue b/.docs/components/demo/Menubar/tailwind/index.vue
index a1215cd7..571a7094 100644
--- a/.docs/components/demo/Menubar/tailwind/index.vue
+++ b/.docs/components/demo/Menubar/tailwind/index.vue
@@ -35,7 +35,7 @@ function handleClick() {
   >
     <MenubarMenu value="file">
       <MenubarTrigger
-        class="py-2 px-3 outline-none select-none font-semibold leading-none rounded text-mauve12 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-green4 data-[state=open]:bg-green4"
+        class="py-2 px-3 outline-none select-none font-semibold leading-none rounded text-mauve12 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-indigo4 data-[state=open]:bg-indigo4"
       >
         File
       </MenubarTrigger>
@@ -47,7 +47,7 @@ function handleClick() {
           :align-offset="-3"
         >
           <MenubarItem
-            class="group text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+            class="group text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-indigo9 data-[highlighted]:to-indigo10 data-[highlighted]:text-indigo1 data-[highlighted]:data-[state=open]:text-indigo1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
           >
             New Tab
             <div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
@@ -55,7 +55,7 @@ function handleClick() {
             </div>
           </MenubarItem>
           <MenubarItem
-            class="group text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+            class="group text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-indigo9 data-[highlighted]:to-indigo10 data-[highlighted]:text-indigo1 data-[highlighted]:data-[state=open]:text-indigo1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
           >
             New Window
             <div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
@@ -63,15 +63,15 @@ function handleClick() {
             </div>
           </MenubarItem>
           <MenubarItem
-            class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+            class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-indigo9 data-[highlighted]:to-indigo10 data-[highlighted]:text-indigo1 data-[highlighted]:data-[state=open]:text-indigo1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
             disabled
           >
             New Incognito Window
           </MenubarItem>
-          <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
+          <MenubarSeparator class="h-[1px] bg-indigo6 m-[5px]" />
           <MenubarSub>
             <MenubarSubTrigger
-              class="group text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+              class="group text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-indigo9 data-[highlighted]:to-indigo10 data-[highlighted]:text-indigo1 data-[highlighted]:data-[state=open]:text-indigo1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
             >
               Share
               <div
@@ -86,26 +86,26 @@ function handleClick() {
                 :align-offset="-5"
               >
                 <MenubarItem
-                  class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+                  class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-indigo9 data-[highlighted]:to-indigo10 data-[highlighted]:text-indigo1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
                 >
                   Email Link
                 </MenubarItem>
                 <MenubarItem
-                  class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+                  class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-indigo9 data-[highlighted]:to-indigo10 data-[highlighted]:text-indigo1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
                 >
                   Messages
                 </MenubarItem>
                 <MenubarItem
-                  class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+                  class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-indigo9 data-[highlighted]:to-indigo10 data-[highlighted]:text-indigo1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
                 >
                   Notes
                 </MenubarItem>
               </MenubarSubContent>
             </MenubarPortal>
           </MenubarSub>
-          <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
+          <MenubarSeparator class="h-[1px] bg-indigo6 m-[5px]" />
           <MenubarItem
-            class="group text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+            class="group text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-indigo9 data-[highlighted]:to-indigo10 data-[highlighted]:text-indigo1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
           >
             Print…
             <div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
@@ -118,7 +118,7 @@ function handleClick() {
 
     <MenubarMenu value="Edit">
       <MenubarTrigger
-        class="py-2 px-3 outline-none select-none font-semibold leading-none rounded text-mauve12 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-green4 data-[state=open]:bg-green4"
+        class="py-2 px-3 outline-none select-none font-semibold leading-none rounded text-mauve12 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-indigo4 data-[state=open]:bg-indigo4"
       >
         Edit
       </MenubarTrigger>
@@ -130,7 +130,7 @@ function handleClick() {
           :align-offset="-3"
         >
           <MenubarItem
-            class="group text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+            class="group text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-indigo9 data-[highlighted]:to-indigo10 data-[highlighted]:text-indigo1 data-[highlighted]:data-[state=open]:text-indigo1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
           >
             Undo
             <div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
@@ -138,17 +138,17 @@ function handleClick() {
             </div>
           </MenubarItem>
           <MenubarItem
-            class="group text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+            class="group text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-indigo9 data-[highlighted]:to-indigo10 data-[highlighted]:text-indigo1 data-[highlighted]:data-[state=open]:text-indigo1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
           >
             Redo
             <div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
               ⇧ ⌘ Z
             </div>
           </MenubarItem>
-          <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
+          <MenubarSeparator class="h-[1px] bg-indigo6 m-[5px]" />
           <MenubarSub>
             <MenubarSubTrigger
-              class="group text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+              class="group text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-indigo9 data-[highlighted]:to-indigo10 data-[highlighted]:text-indigo1 data-[highlighted]:data-[state=open]:text-indigo1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
             >
               Find
               <div
@@ -164,42 +164,42 @@ function handleClick() {
                 :align-offset="-5"
               >
                 <MenubarItem
-                  class="group text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+                  class="group text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-indigo9 data-[highlighted]:to-indigo10 data-[highlighted]:text-indigo1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
                 >
                   Search the web…
                 </MenubarItem>
-                <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
+                <MenubarSeparator class="h-[1px] bg-indigo6 m-[5px]" />
                 <MenubarItem
-                  class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+                  class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-indigo9 data-[highlighted]:to-indigo10 data-[highlighted]:text-indigo1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
                 >
                   Find…
                 </MenubarItem>
                 <MenubarItem
-                  class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+                  class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-indigo9 data-[highlighted]:to-indigo10 data-[highlighted]:text-indigo1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
                 >
                   Find Next
                 </MenubarItem>
                 <MenubarItem
-                  class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+                  class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-indigo9 data-[highlighted]:to-indigo10 data-[highlighted]:text-indigo1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
                 >
                   Find Previous
                 </MenubarItem>
               </MenubarSubContent>
             </MenubarPortal>
           </MenubarSub>
-          <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
+          <MenubarSeparator class="h-[1px] bg-indigo6 m-[5px]" />
           <MenubarItem
-            class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+            class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-indigo9 data-[highlighted]:to-indigo10 data-[highlighted]:text-indigo1 data-[highlighted]:data-[state=open]:text-indigo1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
           >
             Cut
           </MenubarItem>
           <MenubarItem
-            class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+            class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-indigo9 data-[highlighted]:to-indigo10 data-[highlighted]:text-indigo1 data-[highlighted]:data-[state=open]:text-indigo1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
           >
             Copy
           </MenubarItem>
           <MenubarItem
-            class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+            class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-indigo9 data-[highlighted]:to-indigo10 data-[highlighted]:text-indigo1 data-[highlighted]:data-[state=open]:text-indigo1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
           >
             Paste
           </MenubarItem>
@@ -209,7 +209,7 @@ function handleClick() {
 
     <MenubarMenu value="View">
       <MenubarTrigger
-        class="py-2 px-3 outline-none select-none font-semibold leading-none rounded text-mauve12 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-green4 data-[state=open]:bg-green4"
+        class="py-2 px-3 outline-none select-none font-semibold leading-none rounded text-mauve12 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-indigo4 data-[state=open]:bg-indigo4"
       >
         View
       </MenubarTrigger>
@@ -222,7 +222,7 @@ function handleClick() {
         >
           <MenubarCheckboxItem
             v-model="checkboxOne"
-            class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[20px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+            class="group text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[20px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
           >
             <MenubarItemIndicator class="absolute left-0 w-[20px] inline-flex items-center justify-center">
               <Icon icon="radix-icons:check" />
@@ -236,16 +236,16 @@ function handleClick() {
           </MenubarCheckboxItem>
           <MenubarCheckboxItem
             v-model="checkboxTwo"
-            class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[20px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+            class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[20px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
           >
             <MenubarItemIndicator class="absolute left-0 w-[20px] inline-flex items-center justify-center">
               <Icon icon="radix-icons:check" />
             </MenubarItemIndicator>
             Show Full URLs
           </MenubarCheckboxItem>
-          <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
+          <MenubarSeparator class="h-[1px] bg-indigo6 m-[5px]" />
           <MenubarItem
-            class="group text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+            class="group text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-indigo9 data-[highlighted]:to-indigo10 data-[highlighted]:text-indigo1 data-[highlighted]:data-[state=open]:text-indigo1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
           >
             Reload
             <div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
@@ -253,7 +253,7 @@ function handleClick() {
             </div>
           </MenubarItem>
           <MenubarItem
-            class="group text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+            class="group text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-indigo9 data-[highlighted]:to-indigo10 data-[highlighted]:text-indigo1 data-[highlighted]:data-[state=open]:text-indigo1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
             disabled
           >
             Force Reload
@@ -261,15 +261,15 @@ function handleClick() {
               ⇧ ⌘ R
             </div>
           </MenubarItem>
-          <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
+          <MenubarSeparator class="h-[1px] bg-indigo6 m-[5px]" />
           <MenubarItem
-            class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+            class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-indigo9 data-[highlighted]:to-indigo10 data-[highlighted]:text-indigo1 data-[highlighted]:data-[state=open]:text-indigo1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
           >
             Toggle Fullscreen
           </MenubarItem>
-          <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
+          <MenubarSeparator class="h-[1px] bg-indigo6 m-[5px]" />
           <MenubarItem
-            class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+            class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-indigo9 data-[highlighted]:to-indigo10 data-[highlighted]:text-indigo1 data-[highlighted]:data-[state=open]:text-indigo1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
           >
             Hide Sidebar
           </MenubarItem>
@@ -279,7 +279,7 @@ function handleClick() {
 
     <MenubarMenu value="Profiles">
       <MenubarTrigger
-        class="py-2 px-3 outline-none select-none font-semibold leading-none rounded text-mauve12 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-green4 data-[state=open]:bg-green4"
+        class="py-2 px-3 outline-none select-none font-semibold leading-none rounded text-mauve12 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-indigo4 data-[state=open]:bg-indigo4"
       >
         Profiles
       </MenubarTrigger>
@@ -292,7 +292,7 @@ function handleClick() {
         >
           <MenubarRadioGroup v-model="person">
             <MenubarRadioItem
-              class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[20px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+              class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[20px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
               value="pedro"
             >
               <MenubarItemIndicator class="absolute left-0 w-[20px] inline-flex items-center justify-center">
@@ -301,7 +301,7 @@ function handleClick() {
               Pedro Duarte
             </MenubarRadioItem>
             <MenubarRadioItem
-              class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[20px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+              class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[20px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
               value="colm"
             >
               <MenubarItemIndicator class="absolute left-0 w-[20px] inline-flex items-center justify-center">
@@ -310,16 +310,16 @@ function handleClick() {
               Colm Tuite
             </MenubarRadioItem>
           </MenubarRadioGroup>
-          <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
+          <MenubarSeparator class="h-[1px] bg-indigo6 m-[5px]" />
           <MenubarItem
-            class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+            class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-indigo9 data-[highlighted]:to-indigo10 data-[highlighted]:text-indigo1 data-[highlighted]:data-[state=open]:text-indigo1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
             @click="handleClick"
           >
             Edit…
           </MenubarItem>
-          <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
+          <MenubarSeparator class="h-[1px] bg-indigo6 m-[5px]" />
           <MenubarItem
-            class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+            class="text-[13px] leading-none text-mauve12 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-indigo4 data-[state=open]:text-mauve12 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-indigo9 data-[highlighted]:to-indigo10 data-[highlighted]:text-indigo1 data-[highlighted]:data-[state=open]:text-indigo1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
           >
             Add Profile…
           </MenubarItem>
diff --git a/.docs/components/demo/Popover/tailwind/index.vue b/.docs/components/demo/Popover/tailwind/index.vue
index 69f93e1c..ab58975d 100644
--- a/.docs/components/demo/Popover/tailwind/index.vue
+++ b/.docs/components/demo/Popover/tailwind/index.vue
@@ -6,7 +6,7 @@ import { PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot,
 <template>
   <PopoverRoot>
     <PopoverTrigger
-      class="rounded-full w-[35px] h-[35px] inline-flex items-center justify-center text-mauve12 bg-white shadow-[0_2px_10px] shadow-blackA7 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black cursor-default outline-none"
+      class="rounded-full w-[35px] h-[35px] inline-flex items-center justify-center text-mauve12 bg-white shadow-[0_2px_10px] shadow-blackA7 hover:bg-indigo3 focus:shadow-[0_0_0_2px] focus:shadow-black cursor-default outline-none"
       aria-label="Update dimensions"
     >
       <Icon icon="radix-icons:mixer-horizontal" />
@@ -15,7 +15,7 @@ import { PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot,
       <PopoverContent
         side="bottom"
         :side-offset="5"
-        class="rounded p-5 w-[260px] bg-white shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.green7)] will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
+        class="rounded p-5 w-[260px] bg-white shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.indigo7)] will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
       >
         <div class="flex flex-col gap-2.5">
           <p class="text-mauve12 text-[15px] leading-[19px] font-semibold mb-2.5">
@@ -28,7 +28,7 @@ import { PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot,
             > Width </label>
             <input
               id="width"
-              class="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-mauve12 shadow-[0_0_0_1px] shadow-green7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
+              class="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-mauve12 shadow-[0_0_0_1px] shadow-indigo7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-indigo8 outline-none"
               defaultValue="100%"
             >
           </fieldset>
@@ -39,7 +39,7 @@ import { PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot,
             > Max. width </label>
             <input
               id="maxWidth"
-              class="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-mauve12 shadow-[0_0_0_1px] shadow-green7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
+              class="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-mauve12 shadow-[0_0_0_1px] shadow-indigo7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-indigo8 outline-none"
               defaultValue="300px"
             >
           </fieldset>
@@ -50,7 +50,7 @@ import { PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot,
             > Height </label>
             <input
               id="height"
-              class="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-mauve12 shadow-[0_0_0_1px] shadow-green7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
+              class="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-mauve12 shadow-[0_0_0_1px] shadow-indigo7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-indigo8 outline-none"
               defaultValue="25px"
             >
           </fieldset>
@@ -61,13 +61,13 @@ import { PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot,
             > Max. height </label>
             <input
               id="maxHeight"
-              class="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-mauve12 shadow-[0_0_0_1px] shadow-green7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
+              class="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-mauve12 shadow-[0_0_0_1px] shadow-indigo7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-indigo8 outline-none"
               defaultValue="none"
             >
           </fieldset>
         </div>
         <PopoverClose
-          class="rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-mauve12 absolute top-[5px] right-[5px] hover:bg-green4 focus:shadow-[0_0_0_2px] focus:shadow-green7 outline-none cursor-default"
+          class="rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-mauve12 absolute top-[5px] right-[5px] hover:bg-indigo4 focus:shadow-[0_0_0_2px] focus:shadow-indigo7 outline-none cursor-default"
           aria-label="Close"
         >
           <Icon icon="radix-icons:cross-2" />
diff --git a/.docs/components/demo/RadioGroup/tailwind/index.vue b/.docs/components/demo/RadioGroup/tailwind/index.vue
index 89e282b7..f0dccae2 100644
--- a/.docs/components/demo/RadioGroup/tailwind/index.vue
+++ b/.docs/components/demo/RadioGroup/tailwind/index.vue
@@ -15,7 +15,7 @@ const radioStateSingle = ref('default')
     <div class="flex items-center">
       <RadioGroupItem
         id="r1"
-        class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default"
+        class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-indigo3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default"
         value="default"
       >
         <RadioGroupIndicator
@@ -32,7 +32,7 @@ const radioStateSingle = ref('default')
     <div class="flex items-center">
       <RadioGroupItem
         id="r2"
-        class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default"
+        class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-indigo3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default"
         value="comfortable"
       >
         <RadioGroupIndicator
@@ -49,7 +49,7 @@ const radioStateSingle = ref('default')
     <div class="flex items-center">
       <RadioGroupItem
         id="r3"
-        class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default"
+        class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-indigo3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default"
         value="compact"
       >
         <RadioGroupIndicator
diff --git a/.docs/components/demo/Tabs/tailwind/index.vue b/.docs/components/demo/Tabs/tailwind/index.vue
index 91395cd2..a4e9563f 100644
--- a/.docs/components/demo/Tabs/tailwind/index.vue
+++ b/.docs/components/demo/Tabs/tailwind/index.vue
@@ -36,29 +36,29 @@ import { TabsContent, TabsList, TabsRoot, TabsTrigger } from '@oku-ui/primitives
       </p>
       <fieldset class="mb-[15px] w-full flex flex-col justify-start">
         <label
-          class="text-[13px] leading-none mb-2.5 text-green12 block"
+          class="text-[13px] leading-none mb-2.5 text-indigo12 block"
           for="name"
         > Name </label>
         <input
           id="name"
-          class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-mauve12 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
+          class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-mauve12 shadow-[0_0_0_1px] shadow-indigo7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-indigo8 outline-none"
           value="Pedro Duarte"
         >
       </fieldset>
       <fieldset class="mb-[15px] w-full flex flex-col justify-start">
         <label
-          class="text-[13px] leading-none mb-2.5 text-green12 block"
+          class="text-[13px] leading-none mb-2.5 text-indigo12 block"
           for="username"
         > Username </label>
         <input
           id="username"
-          class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-mauve12 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
+          class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-mauve12 shadow-[0_0_0_1px] shadow-indigo7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-indigo8 outline-none"
           value="@peduarte"
         >
       </fieldset>
       <div class="flex justify-end mt-5">
         <button
-          class="inline-flex items-center justify-center rounded px-[15px] text-[15px] leading-none font-medium h-[35px] bg-green4 text-green11 hover:bg-green5 focus:shadow-[0_0_0_2px] focus:shadow-green7 outline-none cursor-default"
+          class="inline-flex items-center justify-center rounded px-[15px] text-[15px] leading-none font-medium h-[35px] bg-indigo4 text-indigo11 hover:bg-indigo5 focus:shadow-[0_0_0_2px] focus:shadow-indigo7 outline-none cursor-default"
         >
           Save changes
         </button>
@@ -73,44 +73,44 @@ import { TabsContent, TabsList, TabsRoot, TabsTrigger } from '@oku-ui/primitives
       </p>
       <fieldset class="mb-[15px] w-full flex flex-col justify-start">
         <label
-          class="text-[13px] leading-none mb-2.5 text-green12 block"
+          class="text-[13px] leading-none mb-2.5 text-indigo12 block"
           for="currentPassword"
         >
           Current password
         </label>
         <input
           id="currentPassword"
-          class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-mauve12 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
+          class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-mauve12 shadow-[0_0_0_1px] shadow-indigo7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-indigo8 outline-none"
           type="password"
         >
       </fieldset>
       <fieldset class="mb-[15px] w-full flex flex-col justify-start">
         <label
-          class="text-[13px] leading-none mb-2.5 text-green12 block"
+          class="text-[13px] leading-none mb-2.5 text-indigo12 block"
           for="newPassword"
         > New password </label>
         <input
           id="newPassword"
-          class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-mauve12 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
+          class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-mauve12 shadow-[0_0_0_1px] shadow-indigo7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-indigo8 outline-none"
           type="password"
         >
       </fieldset>
       <fieldset class="mb-[15px] w-full flex flex-col justify-start">
         <label
-          class="text-[13px] leading-none mb-2.5 text-green12 block"
+          class="text-[13px] leading-none mb-2.5 text-indigo12 block"
           for="confirmPassword"
         >
           Confirm password
         </label>
         <input
           id="confirmPassword"
-          class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-mauve12 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
+          class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-mauve12 shadow-[0_0_0_1px] shadow-indigo7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-indigo8 outline-none"
           type="password"
         >
       </fieldset>
       <div class="flex justify-end mt-5">
         <button
-          class="inline-flex items-center justify-center rounded px-[15px] text-[15px] leading-none font-medium h-[35px] bg-green4 text-green11 hover:bg-green5 focus:shadow-[0_0_0_2px] focus:shadow-green7 outline-none cursor-default"
+          class="inline-flex items-center justify-center rounded px-[15px] text-[15px] leading-none font-medium h-[35px] bg-indigo4 text-indigo11 hover:bg-indigo5 focus:shadow-[0_0_0_2px] focus:shadow-indigo7 outline-none cursor-default"
         >
           Change password
         </button>
diff --git a/.docs/components/demo/Toast/tailwind/index.vue b/.docs/components/demo/Toast/tailwind/index.vue
index 3994965b..e0bfc382 100644
--- a/.docs/components/demo/Toast/tailwind/index.vue
+++ b/.docs/components/demo/Toast/tailwind/index.vue
@@ -55,7 +55,7 @@ useToastProvider()
       as-child
       alt-text="Goto schedule to undo"
     >
-      <button class="inline-flex items-center justify-center rounded font-medium text-xs px-[10px] leading-[25px] h-[25px] bg-green2 text-green11 shadow-[inset_0_0_0_1px] shadow-green7 hover:shadow-[inset_0_0_0_1px] hover:shadow-green8 focus:shadow-[0_0_0_2px] focus:shadow-green8">
+      <button class="inline-flex items-center justify-center rounded font-medium text-xs px-[10px] leading-[25px] h-[25px] bg-indigo2 text-indigo11 shadow-[inset_0_0_0_1px] shadow-indigo7 hover:shadow-[inset_0_0_0_1px] hover:shadow-indigo8 focus:shadow-[0_0_0_2px] focus:shadow-indigo8">
         Undo
       </button>
     </ToastAction>
diff --git a/.docs/components/demo/Toggle/tailwind/index.vue b/.docs/components/demo/Toggle/tailwind/index.vue
index e77dff15..e2c65a8f 100644
--- a/.docs/components/demo/Toggle/tailwind/index.vue
+++ b/.docs/components/demo/Toggle/tailwind/index.vue
@@ -10,7 +10,7 @@ const toggleState = ref(false)
   <Toggle
     v-model:pressed="toggleState"
     aria-label="Toggle italic"
-    class="hover:bg-green3 text-mauve12 data-[state=on]:bg-green6 data-[state=on]:text-violet12 shadow-blackA7 flex h-[35px] w-[35px] items-center justify-center rounded bg-white text-base leading-4 shadow-[0_2px_10px] focus-within:shadow-[0_0_0_2px] focus-within:shadow-black"
+    class="hover:bg-indigo3 text-mauve12 data-[state=on]:bg-indigo6 data-[state=on]:text-violet12 shadow-blackA7 flex h-[35px] w-[35px] items-center justify-center rounded bg-white text-base leading-4 shadow-[0_2px_10px] focus-within:shadow-[0_0_0_2px] focus-within:shadow-black"
   >
     <Icon
       icon="radix-icons:font-italic"
diff --git a/.docs/components/demo/ToggleGroup/tailwind/index.vue b/.docs/components/demo/ToggleGroup/tailwind/index.vue
index 5c457b31..bd9b3c24 100644
--- a/.docs/components/demo/ToggleGroup/tailwind/index.vue
+++ b/.docs/components/demo/ToggleGroup/tailwind/index.vue
@@ -7,7 +7,7 @@ const toggleStateSingle = ref('left')
 const toggleStateMultiple = ref(['italic'])
 
 const toggleGroupItemClasses
-  = 'hover:bg-green3 text-mauve12 data-[state=on]:bg-green6 data-[state=on]:text-violet12 flex h-[35px] w-[35px] items-center justify-center bg-white text-base leading-4 first:rounded-l last:rounded-r focus:z-10 focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none'
+  = 'hover:bg-indigo3 text-mauve12 data-[state=on]:bg-indigo6 data-[state=on]:text-violet12 flex h-[35px] w-[35px] items-center justify-center bg-white text-base leading-4 first:rounded-l last:rounded-r focus:z-10 focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none'
 </script>
 
 <template>
diff --git a/.docs/components/demo/Toolbar/tailwind/index.vue b/.docs/components/demo/Toolbar/tailwind/index.vue
index 0e2e7502..f55a8e44 100644
--- a/.docs/components/demo/Toolbar/tailwind/index.vue
+++ b/.docs/components/demo/Toolbar/tailwind/index.vue
@@ -25,7 +25,7 @@ const toggleStateMultiple = ref([])
       aria-label="Text formatting"
     >
       <ToolbarToggleItem
-        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve12 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-green3 hover:text-mauve12 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green5 data-[state=on]:text-mauve12"
+        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve12 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-indigo3 hover:text-mauve12 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-indigo7 first:ml-0 data-[state=on]:bg-indigo5 data-[state=on]:text-mauve12"
         value="bold"
         aria-label="Bold"
       >
@@ -35,7 +35,7 @@ const toggleStateMultiple = ref([])
         />
       </ToolbarToggleItem>
       <ToolbarToggleItem
-        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve12 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-green3 hover:text-mauve12 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green5 data-[state=on]:text-mauve12"
+        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve12 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-indigo3 hover:text-mauve12 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-indigo7 first:ml-0 data-[state=on]:bg-indigo5 data-[state=on]:text-mauve12"
         value="italic"
         aria-label="Italic"
       >
@@ -45,7 +45,7 @@ const toggleStateMultiple = ref([])
         />
       </ToolbarToggleItem>
       <ToolbarToggleItem
-        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve12 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-green3 hover:text-mauve12 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green5 data-[state=on]:text-mauve12"
+        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve12 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-indigo3 hover:text-mauve12 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-indigo7 first:ml-0 data-[state=on]:bg-indigo5 data-[state=on]:text-mauve12"
         value="strikethrough"
         aria-label="Strike through"
       >
@@ -62,7 +62,7 @@ const toggleStateMultiple = ref([])
       aria-label="Text Alignment"
     >
       <ToolbarToggleItem
-        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve12 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-green3 hover:text-mauve12 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green5 data-[state=on]:text-mauve12"
+        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve12 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-indigo3 hover:text-mauve12 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-indigo7 first:ml-0 data-[state=on]:bg-indigo5 data-[state=on]:text-mauve12"
         value="left"
         aria-label="Left Aligned"
       >
@@ -72,7 +72,7 @@ const toggleStateMultiple = ref([])
         />
       </ToolbarToggleItem>
       <ToolbarToggleItem
-        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve12 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-green3 hover:text-mauve12 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green5 data-[state=on]:text-mauve12"
+        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve12 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-indigo3 hover:text-mauve12 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-indigo7 first:ml-0 data-[state=on]:bg-indigo5 data-[state=on]:text-mauve12"
         value="center"
         aria-label="Center Aligned"
       >
@@ -82,7 +82,7 @@ const toggleStateMultiple = ref([])
         />
       </ToolbarToggleItem>
       <ToolbarToggleItem
-        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve12 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-green3 hover:text-mauve12 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green5 data-[state=on]:text-mauve12"
+        class="flex-shrink-0 flex-grow-0 basis-auto text-mauve12 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-indigo3 hover:text-mauve12 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-indigo7 first:ml-0 data-[state=on]:bg-indigo5 data-[state=on]:text-mauve12"
         value="right"
         aria-label="Right Aligned"
       >
@@ -94,7 +94,7 @@ const toggleStateMultiple = ref([])
     </ToolbarToggleGroup>
     <ToolbarSeparator class="w-[1px] bg-mauve6 mx-[10px]" />
     <ToolbarLink
-      class="bg-transparent !font-normal !text-mauve12 inline-flex justify-center items-center hover:bg-transparent hover:cursor-pointer flex-shrink-0 flex-grow-0 basis-auto h-[25px] px-[5px] rounded text-[13px] leading-none bg-white ml-0.5 outline-none hover:bg-green3 hover:text-mauve12 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7 first:ml-0 data-[state=on]:bg-green5 data-[state=on]:text-mauve12"
+      class="bg-transparent !font-normal !text-mauve12 inline-flex justify-center items-center hover:bg-transparent hover:cursor-pointer flex-shrink-0 flex-grow-0 basis-auto h-[25px] px-[5px] rounded text-[13px] leading-none bg-white ml-0.5 outline-none hover:bg-indigo3 hover:text-mauve12 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-indigo7 first:ml-0 data-[state=on]:bg-indigo5 data-[state=on]:text-mauve12"
       href="#"
       target="_blank"
       style="margin-right: 10"
@@ -102,7 +102,7 @@ const toggleStateMultiple = ref([])
       Edited 2 hours ago
     </ToolbarLink>
     <ToolbarButton
-      class="px-[10px] text-white bg-green9 flex-shrink-0 flex-grow-0 basis-auto h-[25px] rounded inline-flex text-[13px] leading-none items-center justify-center outline-none hover:bg-green10 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-green7"
+      class="px-[10px] text-white bg-indigo9 flex-shrink-0 flex-grow-0 basis-auto h-[25px] rounded inline-flex text-[13px] leading-none items-center justify-center outline-none hover:bg-indigo10 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-indigo7"
       style="margin-left: auto"
     >
       Share
diff --git a/.docs/components/demo/Tooltip/tailwind/index.vue b/.docs/components/demo/Tooltip/tailwind/index.vue
index 5d073dea..71e527a3 100644
--- a/.docs/components/demo/Tooltip/tailwind/index.vue
+++ b/.docs/components/demo/Tooltip/tailwind/index.vue
@@ -7,7 +7,7 @@ import { Icon } from '@iconify/vue'
   <TooltipProvider>
     <TooltipRoot>
       <TooltipTrigger
-        class="text-mauve12 shadow-blackA7 hover:bg-green3 inline-flex h-[35px] w-[35px] items-center justify-center rounded-full bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
+        class="text-mauve12 shadow-blackA7 hover:bg-indigo3 inline-flex h-[35px] w-[35px] items-center justify-center rounded-full bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
       >
         <Icon icon="radix-icons:plus" />
       </TooltipTrigger>
diff --git a/.docs/content/guides/i18n.md b/.docs/content/guides/i18n.md
index 31c4d31d..1d09330a 100644
--- a/.docs/content/guides/i18n.md
+++ b/.docs/content/guides/i18n.md
@@ -197,7 +197,7 @@ function selectLanguage(newLanguage: string) {
         @update:model-value="selectLanguage"
       >
         <SelectTrigger
-          class="inline-flex min-w-[160px] items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-mauve12 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9 outline-none"
+          class="inline-flex min-w-[160px] items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-mauve12 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-indigo9 outline-none"
           aria-label="Customize options"
         >
           <SelectValue placeholder="Select a language..." />
@@ -226,7 +226,7 @@ function selectLanguage(newLanguage: string) {
                 <SelectItem
                   v-for="(option, index) in languages"
                   :key="index"
-                  class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+                  class="text-[13px] leading-none text-mauve12 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-indigo9 data-[highlighted]:text-indigo1"
                   :value="option.value"
                 >
                   <SelectItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
diff --git a/.docs/content/index.md b/.docs/content/index.md
index d586b2e3..86af9e58 100644
--- a/.docs/content/index.md
+++ b/.docs/content/index.md
@@ -12,7 +12,7 @@ hero:
     alt: Oku Primitives
   prelink:
     title: 🎉 Hooks News Struct
-    link: https://github.com/oku-ui/primitives/releases/tag/v1.9.0
+    link: https://github.com/oku-ui/primitives/releases/tag/v0.7.0
     target: _blank
   actions:
     - theme: brand
diff --git a/.docs/content/public/demo.json b/.docs/content/public/demo.json
new file mode 100644
index 00000000..544b7b4d
--- /dev/null
+++ b/.docs/content/public/demo.json
@@ -0,0 +1,3 @@
+{
+    
+}
\ No newline at end of file
diff --git a/.docs/scripts/autogen.ts b/.docs/scripts/autogen.ts
index 424aaecc..8226b3a5 100644
--- a/.docs/scripts/autogen.ts
+++ b/.docs/scripts/autogen.ts
@@ -21,7 +21,7 @@ const checkerOptions: MetaCheckerOptions = {
   forceUseTs: true,
   printer: { newLine: 1 },
 }
-const file = resolve(__dirname, '../../packages/core/tsconfig.app.json')
+const file = resolve(__dirname, '../../packages/core/tsconfig.docs.json')
 const tsconfigChecker = createChecker(
   file,
   checkerOptions,
@@ -65,9 +65,7 @@ primitiveComponents.forEach((componentPath) => {
   }
   
   const componentName = parse(componentPath).name
-  console.log(componentName, componentPath)
   const meta = parseMeta(tsconfigChecker.getComponentMeta(componentPath))
-  console.log(`Generating meta for ${meta}`)
 
   const metaDirPath = resolve(__dirname, '../content/meta')
 
diff --git a/.storybook/version.txt b/.storybook/version.txt
new file mode 100644
index 00000000..9759e31c
--- /dev/null
+++ b/.storybook/version.txt
@@ -0,0 +1 @@
+version=0.0.1
\ No newline at end of file
diff --git a/packages/core/tsconfig.docs.json b/packages/core/tsconfig.docs.json
new file mode 100644
index 00000000..0afacedd
--- /dev/null
+++ b/packages/core/tsconfig.docs.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "target": "ES2020",
+    "jsx": "preserve",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+
+    "moduleResolution": "bundler",
+
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "resolveJsonModule": true,
+    "allowImportingTsExtensions": true,
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*", "src/**/*.vue", "src/**/*.ts", "src/**/*.tsx"]
+}