From b2b21ca9dde1d31aaf19d8e3aa1f0372916d4af1 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 12 Nov 2024 12:18:07 +0300
Subject: [PATCH] Use a custom field to enter tokens

---
 .../assets/styles/layout/_designer.scss       | 22 +++++++
 .../showcase/assets/styles/layout/layout.scss |  1 +
 .../components/layout/AppDesigner.vue         |  6 +-
 .../layout/designer/DesignColorPalette.vue    |  4 +-
 .../layout/designer/DesignTokenField.vue      | 39 ++++++++++++
 .../designer/primitive/DesignColors.vue       | 22 +++++++
 .../designer/semantic/DesignFormField.vue     | 42 +++++--------
 .../designer/semantic/DesignGeneral.vue       |  5 +-
 .../layout/designer/semantic/DesignList.vue   | 21 +++----
 .../designer/semantic/DesignNavigation.vue    | 24 +++-----
 .../designer/semantic/DesignOverlay.vue       | 27 +++------
 .../semantic/colorscheme/DesignCSCommon.vue   | 59 +++++++------------
 .../colorscheme/DesignCSFormField.vue         | 57 ++++++------------
 .../semantic/colorscheme/DesignCSList.vue     | 30 ++++------
 .../colorscheme/DesignCSNavigation.vue        | 39 ++++--------
 .../semantic/colorscheme/DesignCSOverlay.vue  | 27 +++------
 16 files changed, 200 insertions(+), 225 deletions(-)
 create mode 100644 apps/showcase/assets/styles/layout/_designer.scss
 create mode 100644 apps/showcase/components/layout/designer/DesignTokenField.vue

diff --git a/apps/showcase/assets/styles/layout/_designer.scss b/apps/showcase/assets/styles/layout/_designer.scss
new file mode 100644
index 000000000..460ff1a51
--- /dev/null
+++ b/apps/showcase/assets/styles/layout/_designer.scss
@@ -0,0 +1,22 @@
+.designer {
+    [type='color'] {
+        margin-top: -4px;
+        border: 0 none;
+        padding: 0;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        width: 28px;
+        height: 28px;
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+    }
+    
+    [type='color']::-webkit-color-swatch {
+        border-radius: 4px;
+        width: 24px;
+        height: 24px;
+        border: 0 none;
+    }
+}
\ No newline at end of file
diff --git a/apps/showcase/assets/styles/layout/layout.scss b/apps/showcase/assets/styles/layout/layout.scss
index eb9938455..d15826645 100644
--- a/apps/showcase/assets/styles/layout/layout.scss
+++ b/apps/showcase/assets/styles/layout/layout.scss
@@ -5,6 +5,7 @@
 @import './_core';
 @import './_glow';
 @import './_topbar';
+@import './_designer';
 @import './_sidebar';
 @import './_content';
 @import './_news';
diff --git a/apps/showcase/components/layout/AppDesigner.vue b/apps/showcase/components/layout/AppDesigner.vue
index 87e948308..931600def 100644
--- a/apps/showcase/components/layout/AppDesigner.vue
+++ b/apps/showcase/components/layout/AppDesigner.vue
@@ -1,5 +1,5 @@
 <template>
-    <Drawer v-model:visible="$appState.designerActive" header="Theme Designer" position="right" class="!w-screen md:!w-[60rem]" :modal="false">
+    <Drawer v-model:visible="$appState.designerActive" header="Theme Designer" position="right" class="designer !w-screen md:!w-[48rem]" :modal="false">
         <Tabs value="0">
             <TabList>
                 <Tab value="0">Primitive</Tab>
@@ -49,7 +49,7 @@
                         </AccordionPanel>
                     </Accordion>
                 </TabPanel>
-                <TabPanel value="2"> Component tokens are not supported by the Visual Editor at the moment. </TabPanel>
+                <TabPanel value="2"> <div class="p-4">Component tokens are not supported by the Visual Editor at the moment.</div></TabPanel>
             </TabPanels>
         </Tabs>
 
@@ -64,7 +64,7 @@
 
 <script>
 import { updatePreset } from '@primevue/themes';
-import AuraBase from '@primevue/themes/nora/base';
+import AuraBase from '@primevue/themes/aura/base';
 
 export default {
     provide() {
diff --git a/apps/showcase/components/layout/designer/DesignColorPalette.vue b/apps/showcase/components/layout/designer/DesignColorPalette.vue
index 0d26257c2..54bd22c7b 100644
--- a/apps/showcase/components/layout/designer/DesignColorPalette.vue
+++ b/apps/showcase/components/layout/designer/DesignColorPalette.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="flex border border-surface">
-        <div v-for="color of value" :key="color" class="w-4 h-4 sm:w-8 sm:h-8" :style="{ backgroundColor: color }" :title="color"></div>
+    <div class="flex border border-surface rounded-l-lg rounded-r-lg overflow-hidden">
+        <div v-for="color of value" :key="color" class="w-8 h-8" :style="{ backgroundColor: color }" :title="color"></div>
     </div>
 </template>
 
diff --git a/apps/showcase/components/layout/designer/DesignTokenField.vue b/apps/showcase/components/layout/designer/DesignTokenField.vue
new file mode 100644
index 000000000..40315a1fa
--- /dev/null
+++ b/apps/showcase/components/layout/designer/DesignTokenField.vue
@@ -0,0 +1,39 @@
+<template>
+    <span class="text-sm">{{ label }}</span>
+    <div class="relative">
+        <input :value="modelValue" @input="onInput" type="text" :class="['border border-surface-300 dark:border-surface-600 rounded-lg py-2 px-2 w-full', { 'pr-8': type === 'color' }]" />
+        <div v-if="type === 'color'" class="absolute right-[4px] top-1/2 -mt-3 w-6 h-6 rounded-md border border-surface-300 dark:border-surface-600" :style="{ backgroundColor: previewColor }"></div>
+    </div>
+</template>
+
+<script>
+import { $dt } from '@primevue/themes';
+
+export default {
+    emits: ['update:modelValue'],
+    props: {
+        label: {
+            type: String,
+            default: undefined
+        },
+        type: {
+            type: String,
+            default: undefined
+        },
+        modelValue: {
+            type: null,
+            default: undefined
+        }
+    },
+    methods: {
+        onInput(event) {
+            this.$emit('update:modelValue', event.target.value);
+        }
+    },
+    computed: {
+        previewColor() {
+            return this.modelValue && this.modelValue.startsWith('{') && this.modelValue.endsWith('}') ? $dt(this.modelValue).variable : 'transparent';
+        }
+    }
+};
+</script>
diff --git a/apps/showcase/components/layout/designer/primitive/DesignColors.vue b/apps/showcase/components/layout/designer/primitive/DesignColors.vue
index d9694781b..111cbf6ef 100644
--- a/apps/showcase/components/layout/designer/primitive/DesignColors.vue
+++ b/apps/showcase/components/layout/designer/primitive/DesignColors.vue
@@ -24,3 +24,25 @@ export default {
     }
 };
 </script>
+
+<style scoped>
+[type='color'] {
+    border: 0 none;
+    padding: 0;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 28px;
+    height: 28px;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+}
+
+[type='color']::-webkit-color-swatch {
+    border-radius: 4px;
+    width: 24px;
+    height: 24px;
+    border: 0 none;
+}
+</style>
diff --git a/apps/showcase/components/layout/designer/semantic/DesignFormField.vue b/apps/showcase/components/layout/designer/semantic/DesignFormField.vue
index c4af455bf..1a8486fea 100644
--- a/apps/showcase/components/layout/designer/semantic/DesignFormField.vue
+++ b/apps/showcase/components/layout/designer/semantic/DesignFormField.vue
@@ -3,36 +3,29 @@
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Base</div>
         <section class="grid grid-cols-4 mb-3 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Padding X</span>
-                <input v-model="$preset.semantic.formField.paddingX" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.formField.paddingX" label="Padding X" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Padding Y</span>
-                <input v-model="$preset.semantic.formField.paddingY" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.formField.paddingY" label="Padding Y" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Border Radius</span>
-                <input v-model="$preset.semantic.formField.borderRadius" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.formField.borderRadius" label="Border Radius" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Transition Duration</span>
-                <input v-model="$preset.semantic.formField.transitionDuration" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.formField.transitionDuration" label="Transition Duration" />
             </div>
         </section>
 
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Small</div>
         <section class="grid grid-cols-4 mb-3 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Padding X</span>
-                <input v-model="$preset.semantic.formField.sm.paddingX" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.formField.sm.paddingX" label="Padding X" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Padding Y</span>
-                <input v-model="$preset.semantic.formField.sm.paddingY" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.formField.sm.paddingY" label="Padding Y" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Font Size</span>
-                <input v-model="$preset.semantic.formField.sm.fontSize" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.formField.sm.fontSize" label="Font Size" />
             </div>
             <div></div>
         </section>
@@ -40,16 +33,13 @@
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Large</div>
         <section class="grid grid-cols-4 mb-3 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Padding X</span>
-                <input v-model="$preset.semantic.formField.lg.paddingX" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.formField.lg.paddingX" label="Padding X" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Padding Y</span>
-                <input v-model="$preset.semantic.formField.lg.paddingY" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.formField.lg.paddingY" label="Padding Y" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Font Size</span>
-                <input v-model="$preset.semantic.formField.lg.fontSize" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.formField.lg.fontSize" label="Font Size" />
             </div>
             <div></div>
         </section>
@@ -57,20 +47,16 @@
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Focus Ring</div>
         <section class="grid grid-cols-4 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Width</span>
-                <input v-model="$preset.semantic.formField.focusRing.width" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.formField.focusRing.width" label="Width" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Style</span>
-                <input v-model="$preset.semantic.formField.focusRing.style" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.formField.focusRing.style" label="Style" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Color</span>
-                <input v-model="$preset.semantic.formField.focusRing.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.formField.focusRing.color" label="Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Offset</span>
-                <input v-model="$preset.semantic.formField.focusRing.offset" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.formField.focusRing.offset" label="Offset" />
             </div>
         </section>
     </Fieldset>
diff --git a/apps/showcase/components/layout/designer/semantic/DesignGeneral.vue b/apps/showcase/components/layout/designer/semantic/DesignGeneral.vue
index dfdcc3dac..675ecee46 100644
--- a/apps/showcase/components/layout/designer/semantic/DesignGeneral.vue
+++ b/apps/showcase/components/layout/designer/semantic/DesignGeneral.vue
@@ -29,7 +29,7 @@
                 <input v-model="$preset.semantic.content.borderRadius" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Mask Transition Duration</span>
+                <span class="text-sm">Mask Transition Dur.</span>
                 <input v-model="$preset.semantic.mask.transitionDuration" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
             </div>
             <div class="flex flex-col gap-1"></div>
@@ -47,8 +47,7 @@
                 <input v-model="$preset.semantic.focusRing.style" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Color</span>
-                <input v-model="$preset.semantic.focusRing.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.focusRing.color" label="Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
                 <span class="text-sm">Offset</span>
diff --git a/apps/showcase/components/layout/designer/semantic/DesignList.vue b/apps/showcase/components/layout/designer/semantic/DesignList.vue
index dea299d27..19ab40bf8 100644
--- a/apps/showcase/components/layout/designer/semantic/DesignList.vue
+++ b/apps/showcase/components/layout/designer/semantic/DesignList.vue
@@ -3,16 +3,13 @@
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Container</div>
         <section class="grid grid-cols-4 mb-3 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Padding</span>
-                <input v-model="$preset.semantic.list.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.list.padding" label="Padding" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Gap</span>
-                <input v-model="$preset.semantic.list.gap" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.list.gap" label="Gap" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Header Padding</span>
-                <input v-model="$preset.semantic.list.header.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.list.header.padding" label="Header Padding" />
             </div>
             <div class="flex flex-col gap-1"></div>
         </section>
@@ -20,24 +17,20 @@
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Option</div>
         <section class="grid grid-cols-4 mb-3 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Padding</span>
-                <input v-model="$preset.semantic.list.option.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.list.option.padding" label="Padding" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Border Radius</span>
-                <input v-model="$preset.semantic.list.option.borderRadius" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.list.option.borderRadius" label="Border Radius" />
             </div>
         </section>
 
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Option Group</div>
         <section class="grid grid-cols-4 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Padding</span>
-                <input v-model="$preset.semantic.list.optionGroup.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.list.optionGroup.padding" label="Padding" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Font Weight</span>
-                <input v-model="$preset.semantic.list.optionGroup.fontWeight" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.list.optionGroup.fontWeight" label="Font Weight" />
             </div>
         </section>
     </Fieldset>
diff --git a/apps/showcase/components/layout/designer/semantic/DesignNavigation.vue b/apps/showcase/components/layout/designer/semantic/DesignNavigation.vue
index f572c9706..f2e45dc5a 100644
--- a/apps/showcase/components/layout/designer/semantic/DesignNavigation.vue
+++ b/apps/showcase/components/layout/designer/semantic/DesignNavigation.vue
@@ -3,12 +3,10 @@
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">List</div>
         <section class="grid grid-cols-4 mb-3 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Padding</span>
-                <input v-model="$preset.semantic.navigation.list.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.navigation.list.padding" label="Padding" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Gap</span>
-                <input v-model="$preset.semantic.navigation.list.gap" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.navigation.list.gap" label="Gap" />
             </div>
             <div class="flex flex-col gap-1"></div>
             <div class="flex flex-col gap-1"></div>
@@ -17,16 +15,13 @@
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Item</div>
         <section class="grid grid-cols-4 mb-3 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Padding</span>
-                <input v-model="$preset.semantic.navigation.item.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.navigation.item.padding" label="Padding" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Border Radius</span>
-                <input v-model="$preset.semantic.navigation.item.borderRadius" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.navigation.item.borderRadius" label="Border Radius" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Gap</span>
-                <input v-model="$preset.semantic.navigation.item.gap" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.navigation.item.gap" label="Gap" />
             </div>
             <div class="flex flex-col gap-1"></div>
         </section>
@@ -34,12 +29,10 @@
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Submenu Label</div>
         <section class="grid grid-cols-4 mb-3 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Padding</span>
-                <input v-model="$preset.semantic.navigation.submenuLabel.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.navigation.submenuLabel.padding" label="Padding" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Font Weight</span>
-                <input v-model="$preset.semantic.navigation.submenuLabel.fontWeight" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.navigation.submenuLabel.fontWeight" label="Font Weight" />
             </div>
             <div class="flex flex-col gap-1"></div>
             <div class="flex flex-col gap-1"></div>
@@ -48,8 +41,7 @@
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Submenu Icon</div>
         <section class="grid grid-cols-4 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Size</span>
-                <input v-model="$preset.semantic.navigation.submenuIcon.size" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.navigation.submenuIcon.size" label="Size" />
             </div>
             <div class="flex flex-col gap-1"></div>
             <div class="flex flex-col gap-1"></div>
diff --git a/apps/showcase/components/layout/designer/semantic/DesignOverlay.vue b/apps/showcase/components/layout/designer/semantic/DesignOverlay.vue
index 563d4c42d..1fea0ba84 100644
--- a/apps/showcase/components/layout/designer/semantic/DesignOverlay.vue
+++ b/apps/showcase/components/layout/designer/semantic/DesignOverlay.vue
@@ -3,12 +3,10 @@
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Select</div>
         <section class="grid grid-cols-4 mb-3 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Border Radius</span>
-                <input v-model="$preset.semantic.overlay.select.borderRadius" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.overlay.select.borderRadius" label="Border Radius" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Shadow</span>
-                <input v-model="$preset.semantic.overlay.select.shadow" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.overlay.select.shadow" label="Shadow" />
             </div>
             <div class="flex flex-col gap-1"></div>
             <div class="flex flex-col gap-1"></div>
@@ -17,16 +15,13 @@
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Popover</div>
         <section class="grid grid-cols-4 mb-3 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Border Radius</span>
-                <input v-model="$preset.semantic.overlay.popover.borderRadius" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.overlay.popover.borderRadius" label="Border Radius" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Padding</span>
-                <input v-model="$preset.semantic.overlay.popover.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.overlay.popover.padding" label="Padding" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Shadow</span>
-                <input v-model="$preset.semantic.overlay.popover.shadow" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.overlay.popover.shadow" label="Shadow" />
             </div>
             <div class="flex flex-col gap-1"></div>
         </section>
@@ -34,16 +29,13 @@
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Modal</div>
         <section class="grid grid-cols-4 mb-3 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Border Radius</span>
-                <input v-model="$preset.semantic.overlay.modal.borderRadius" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.overlay.modal.borderRadius" label="Border Radius" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Padding</span>
-                <input v-model="$preset.semantic.overlay.modal.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.overlay.modal.padding" label="Padding" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Shadow</span>
-                <input v-model="$preset.semantic.overlay.modal.shadow" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.overlay.modal.shadow" label="Shadow" />
             </div>
             <div class="flex flex-col gap-1"></div>
         </section>
@@ -51,8 +43,7 @@
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Navigation</div>
         <section class="grid grid-cols-4 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Shadow</span>
-                <input v-model="$preset.semantic.overlay.navigation.shadow" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$preset.semantic.overlay.navigation.shadow" label="Shadow" />
             </div>
             <div class="flex flex-col gap-1"></div>
             <div class="flex flex-col gap-1"></div>
diff --git a/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSCommon.vue b/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSCommon.vue
index df6ad0c6d..df7f83527 100644
--- a/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSCommon.vue
+++ b/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSCommon.vue
@@ -10,88 +10,69 @@
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Typography</div>
         <section class="grid grid-cols-4 mb-3 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Text Color</span>
-                <input v-model="$colorScheme.text.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.text.color" label="Text" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Text Hover Color</span>
-                <input v-model="$colorScheme.text.hoverColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.text.hoverColor" label="Text Hover" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Text Muted Color</span>
-                <input v-model="$colorScheme.text.mutedColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.text.mutedColor" label="Text Muted" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Text Hover Muted Color</span>
-                <input v-model="$colorScheme.text.hoverMutedColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.text.hoverMutedColor" label="Text Hover Muted" type="color" />
             </div>
         </section>
         <section class="grid grid-cols-4 mb-3 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Content Background</span>
-                <input v-model="$colorScheme.content.background" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.content.background" label="Content BG" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Content Hover Background</span>
-                <input v-model="$colorScheme.content.hoverBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.content.hoverBackground" label="Content Hover BG" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Content Border Color</span>
-                <input v-model="$colorScheme.content.borderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.content.borderColor" label="Content Border Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Content Color</span>
-                <input v-model="$colorScheme.content.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.content.color" label="Content Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Content Hover Color</span>
-                <input v-model="$colorScheme.content.hoverColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.content.hoverColor" label="Content Hover Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Mask Background</span>
-                <input v-model="$colorScheme.mask.background" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.mask.background" label="Mask BG" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Mask Color</span>
-                <input v-model="$colorScheme.mask.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.mask.color" label="Mask Color" type="color" />
             </div>
         </section>
 
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Accent</div>
         <section class="grid grid-cols-4 mb-3 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Primary</span>
-                <input v-model="$colorScheme.primary.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.primary.color" label="Primary" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Primary Contrast</span>
-                <input v-model="$colorScheme.primary.contrastColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.primary.contrastColor" label="Primary Contrast" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Primary Hover</span>
-                <input v-model="$colorScheme.primary.hoverColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.primary.hoverColor" label="Primary Hover" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Primary Active</span>
-                <input v-model="$colorScheme.primary.activeColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.primary.activeColor" label="Primary Active" type="color" />
             </div>
         </section>
         <section class="grid grid-cols-4 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Highlight Background</span>
-                <input v-model="$colorScheme.highlight.background" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.highlight.background" label="Highlight BG" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Highlight Color</span>
-                <input v-model="$colorScheme.highlight.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.highlight.color" label="Highlight Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Highlight Focus Background</span>
-                <input v-model="$colorScheme.highlight.focusBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.highlight.focusBackground" label="Highlight Focus BG" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Highlight Focus Color</span>
-                <input v-model="$colorScheme.highlight.focusColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.highlight.focusColor" label="Highlight Focus Color" type="color" />
             </div>
         </section>
     </Fieldset>
@@ -104,7 +85,7 @@ export default {
     inject: ['$colorScheme'],
     methods: {
         onSurfaceColorChange(event) {
-            this.$colorScheme.surface = { ...{ 0: 'ffffff' }, ...palette(event.target.value) };
+            this.$colorScheme.surface = { ...{ 0: '#ffffff' }, ...palette(event.target.value) };
         }
     }
 };
diff --git a/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSFormField.vue b/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSFormField.vue
index 589960ba2..f4924081b 100644
--- a/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSFormField.vue
+++ b/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSFormField.vue
@@ -2,64 +2,49 @@
     <Fieldset legend="Form Field" :toggleable="true" class="mb-3">
         <section class="grid grid-cols-4 mb-3 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Background</span>
-                <input v-model="$colorScheme.formField.background" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.formField.background" label="BG" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Color</span>
-                <input v-model="$colorScheme.formField.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.formField.color" label="Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Icon Color</span>
-                <input v-model="$colorScheme.formField.iconColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.formField.iconColor" label="Icon Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Shadow</span>
-                <input v-model="$colorScheme.formField.shadow" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.formField.shadow" label="Shadow" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Border Color</span>
-                <input v-model="$colorScheme.formField.borderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.formField.borderColor" label="Border Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Hover Border Color</span>
-                <input v-model="$colorScheme.formField.hoverBorderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.formField.hoverBorderColor" label="Hover Border Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Focus Border Color</span>
-                <input v-model="$colorScheme.formField.focusBorderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.formField.focusBorderColor" label="Focus Border Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Invalid Border Color</span>
-                <input v-model="$colorScheme.formField.invalidBorderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.formField.invalidBorderColor" label="Invalid Border Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Disabled Background</span>
-                <input v-model="$colorScheme.formField.disabledBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.formField.disabledBackground" label="Disabled BG" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Disabled Color</span>
-                <input v-model="$colorScheme.formField.disabledColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.formField.disabledColor" label="Disabled Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Placeholder Color</span>
-                <input v-model="$colorScheme.formField.placeholderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.formField.placeholderColor" label="Placeholder" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Invalid Placeholder Color</span>
-                <input v-model="$colorScheme.formField.invalidPlaceholderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.formField.invalidPlaceholderColor" label="Invalid Placeholder" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Filled Background</span>
-                <input v-model="$colorScheme.formField.filledBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.formField.filledBackground" label="Filled BG" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Filled Hover Background</span>
-                <input v-model="$colorScheme.formField.filledHoverBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.formField.filledHoverBackground" label="Filled Hover BG" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Filled Focus Background</span>
-                <input v-model="$colorScheme.formField.filledFocusBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.formField.filledFocusBackground" label="Filled Focus BG" type="color" />
             </div>
             <div class="flex flex-col gap-1"></div>
         </section>
@@ -67,20 +52,16 @@
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Float Label</div>
         <section class="grid grid-cols-4 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Color</span>
-                <input v-model="$colorScheme.formField.floatLabelColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.formField.floatLabelColor" label="Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Focus Color</span>
-                <input v-model="$colorScheme.formField.floatLabelFocusColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.formField.floatLabelFocusColor" label="Focus Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Active Color</span>
-                <input v-model="$colorScheme.formField.floatLabelActiveColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.formField.floatLabelActiveColor" label="Active Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Invalid Color</span>
-                <input v-model="$colorScheme.formField.floatLabelInvalidColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.formField.floatLabelInvalidColor" label="Invalid Color" type="color" />
             </div>
         </section>
     </Fieldset>
diff --git a/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSList.vue b/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSList.vue
index 14232e90a..57c7ec3bf 100644
--- a/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSList.vue
+++ b/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSList.vue
@@ -3,29 +3,23 @@
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Option</div>
         <section class="grid grid-cols-4 mb-3 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Focus Background</span>
-                <input v-model="$colorScheme.list.option.focusBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.list.option.focusBackground" label="Focus BG" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Selected Background</span>
-                <input v-model="$colorScheme.list.option.selectedBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.list.option.selectedBackground" label="Selected BG" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Selected Focus Background</span>
-                <input v-model="$colorScheme.list.option.selectedFocusBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.list.option.selectedFocusBackground" label="Selected Focus BG" type="color" />
             </div>
             <div class="flex flex-col gap-1"></div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Color</span>
-                <input v-model="$colorScheme.list.option.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.list.option.color" label="Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Selected Color</span>
-                <input v-model="$colorScheme.list.option.selectedColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.list.option.selectedColor" label="Selected Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Selected Focus Color</span>
-                <input v-model="$colorScheme.list.option.selectedFocusColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.list.option.selectedFocusColor" label="Selected Focus Colo" type="color" />
             </div>
             <div class="flex flex-col gap-1"></div>
         </section>
@@ -33,24 +27,20 @@
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Option Icon</div>
         <section class="grid grid-cols-4 mb-3 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Color</span>
-                <input v-model="$colorScheme.list.option.icon.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.list.option.icon.color" label="Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Focus Color</span>
-                <input v-model="$colorScheme.list.option.icon.focusColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.list.option.icon.focusColor" label="Focus Color" type="color" />
             </div>
         </section>
 
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Option Group</div>
         <section class="grid grid-cols-4 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Background</span>
-                <input v-model="$colorScheme.list.optionGroup.background" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.list.optionGroup.background" label="BG" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Color</span>
-                <input v-model="$colorScheme.list.optionGroup.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.list.optionGroup.color" label="Color" type="color" />
             </div>
             <div class="flex flex-col gap-1"></div>
             <div class="flex flex-col gap-1"></div>
diff --git a/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSNavigation.vue b/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSNavigation.vue
index 3c281dbbc..be220355d 100644
--- a/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSNavigation.vue
+++ b/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSNavigation.vue
@@ -3,27 +3,22 @@
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Item</div>
         <section class="grid grid-cols-4 mb-3 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Focus Background</span>
-                <input v-model="$colorScheme.navigation.item.focusBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.navigation.item.focusBackground" label="Focus BG" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Acitve Background</span>
-                <input v-model="$colorScheme.navigation.item.focusBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.navigation.item.focusBackground" label="Active BG" type="color" />
             </div>
             <div class="flex flex-col gap-1"></div>
             <div class="flex flex-col gap-1"></div>
 
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Color</span>
-                <input v-model="$colorScheme.navigation.item.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.navigation.item.color" label="Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Focus Color</span>
-                <input v-model="$colorScheme.navigation.item.focusColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.navigation.item.focusColor" label="Focus Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Active Color</span>
-                <input v-model="$colorScheme.navigation.item.activeColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.navigation.item.activeColor" label="Active Color" type="color" />
             </div>
             <div class="flex flex-col gap-1"></div>
         </section>
@@ -31,16 +26,13 @@
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Item Icon</div>
         <section class="grid grid-cols-4 mb-3 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Color</span>
-                <input v-model="$colorScheme.navigation.item.icon.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.navigation.item.icon.color" label="Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Focus Color</span>
-                <input v-model="$colorScheme.navigation.item.icon.focusColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.navigation.item.icon.focusColor" label="Focus Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Active Color</span>
-                <input v-model="$colorScheme.navigation.item.icon.activeColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.navigation.item.icon.activeColor" label="Active Color" type="color" />
             </div>
             <div class="flex flex-col gap-1"></div>
         </section>
@@ -48,12 +40,10 @@
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Submenu Label</div>
         <section class="grid grid-cols-4 mb-3 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Background</span>
-                <input v-model="$colorScheme.navigation.submenuLabel.background" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.navigation.submenuLabel.background" label="BG" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Color</span>
-                <input v-model="$colorScheme.navigation.submenuLabel.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.navigation.submenuLabel.color" label="Color" type="color" />
             </div>
             <div class="flex flex-col gap-1"></div>
             <div class="flex flex-col gap-1"></div>
@@ -62,16 +52,13 @@
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Submenu Icon</div>
         <section class="grid grid-cols-4 mb-3 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Color</span>
-                <input v-model="$colorScheme.navigation.submenuIcon.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.navigation.submenuIcon.color" label="Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Focus Color</span>
-                <input v-model="$colorScheme.navigation.submenuIcon.focusColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.navigation.submenuIcon.focusColor" label="Focus Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Active Color</span>
-                <input v-model="$colorScheme.navigation.submenuIcon.activeColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.navigation.submenuIcon.activeColor" label="Active Color" type="color" />
             </div>
             <div class="flex flex-col gap-1"></div>
         </section>
diff --git a/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSOverlay.vue b/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSOverlay.vue
index 9da04cea2..da9d0cc81 100644
--- a/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSOverlay.vue
+++ b/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSOverlay.vue
@@ -3,16 +3,13 @@
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Select</div>
         <section class="grid grid-cols-4 mb-3 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Background</span>
-                <input v-model="$colorScheme.overlay.select.background" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.overlay.select.background" label="BG" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Border Color</span>
-                <input v-model="$colorScheme.overlay.select.borderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.overlay.select.borderColor" label="Border Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Color</span>
-                <input v-model="$colorScheme.overlay.select.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.overlay.select.color" label="Color" type="color" />
             </div>
             <div class="flex flex-col gap-1"></div>
         </section>
@@ -20,16 +17,13 @@
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Popover</div>
         <section class="grid grid-cols-4 mb-3 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Background</span>
-                <input v-model="$colorScheme.overlay.popover.background" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.overlay.popover.background" label="BG" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Border Color</span>
-                <input v-model="$colorScheme.overlay.popover.borderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.overlay.popover.borderColor" label="Border Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Color</span>
-                <input v-model="$colorScheme.overlay.popover.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.overlay.popover.color" label="Color" type="color" />
             </div>
             <div class="flex flex-col gap-1"></div>
         </section>
@@ -37,16 +31,13 @@
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Modal</div>
         <section class="grid grid-cols-4 gap-2">
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Background</span>
-                <input v-model="$colorScheme.overlay.modal.background" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.overlay.modal.background" label="BG" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Border Color</span>
-                <input v-model="$colorScheme.overlay.modal.borderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.overlay.modal.borderColor" label="Border Color" type="color" />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="text-sm">Color</span>
-                <input v-model="$colorScheme.overlay.modal.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
+                <DesignTokenField v-model="$colorScheme.overlay.modal.color" label="Color" type="color" />
             </div>
             <div class="flex flex-col gap-1"></div>
         </section>