Color updates for labels

apps/showcase/components/layout/designer/create/DesignCreateTheme.vue

@@ -16,8 +16,7 @@
                     <button
                         type="button"
                         @click="createThemeFromPreset"
-                        icon="pi pi-download"
-                        class="px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
+                        class="btn-design"
                     >
                         Create
                     </button>
@@ -34,8 +33,7 @@
                     <button
                         type="button"
                         @click="createThemeFromFigma"
-                        icon="pi pi-download"
-                        class="px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
+                        class="btn-design"
                     >
                         Create
                     </button>

apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue

@@ -23,8 +23,8 @@
         <button
             type="button"
             :class="[
-                'rounded-xl h-32 w-32 bg-transparent border border-gray-200 dark:border-gray-700 text-black dark:text-white',
-                { 'opacity-50 cursor-auto': themeLimitReached, 'hover:border-gray-400 dark:hover:border-gray-500': !themeLimitReached }
+                'rounded-xl h-32 w-32 bg-transparent border border-surface-200 dark:border-surface-700 text-black dark:text-white',
+                { 'opacity-50 cursor-auto': themeLimitReached, 'hover:border-surface-400 dark:hover:border-surface-500': !themeLimitReached }
             ]"
             @click="openNewTheme"
         >
@@ -38,7 +38,7 @@
             <div v-for="theme of $appState.designer.themes" :key="theme.t_key" class="flex flex-col gap-2 relative">
                 <button
                     type="button"
-                    class="rounded-xl h-32 w-32 px-4 overflow-hidden text-ellipsis bg-transparent border border-gray-200 dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-500 text-black dark:text-white"
+                    class="rounded-xl h-32 w-32 px-4 overflow-hidden text-ellipsis bg-transparent border border-surface-200 dark:border-surface-700 hover:border-surface-400 dark:hover:border-surface-500 text-black dark:text-white"
                     @click="loadTheme(theme)"
                 >
                     <span class="text-2xl uppercase font-bold">{{ abbrThemeName(theme) }}</span>
@@ -50,7 +50,7 @@
                     </div>
                     <span class="text-muted-color text-xs">{{ formatTimestamp(theme.t_last_updated) }}</span>
                 </div>
-                <button type="button" @click="toggleMenuOptions($event, theme)" class="hover:bg-surface-100 dark:hover:bg-surface-800 text-zinc-500 dark:text-zinc-400 flex absolute top-1 right-1 w-8 h-8 rounded-lg items-center justify-center">
+                <button type="button" @click="toggleMenuOptions($event, theme)" class="hover:bg-surface-100 dark:hover:bg-surface-800 text-surface-500 dark:text-surface-400 flex absolute top-1 right-1 w-8 h-8 rounded-lg items-center justify-center">
                     <i class="pi pi-ellipsis-h !text-xs" />
                 </button>
             </div>

apps/showcase/components/layout/designer/editor/DesignTokenField.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="group">
         <div class="flex justify-between justify-items-center">
-            <label :for="inputId" class="text-xs text-zinc-700 dark:text-white block capitalize text-ellipsis overflow-hidden w-full whitespace-nowrap mb-px" :title="label">{{ label }}</label>
-            <button type="button" @click="transfer"><i class="pi pi-sort-alt !text-xs text-zinc-400 hidden group-hover:block animate-fadein" title="Transfer between color scheme and common"></i></button>
+            <label :for="inputId" class="text-xs text-zinc-700 dark:text-white/70 block capitalize text-ellipsis overflow-hidden w-full whitespace-nowrap mb-px" :title="label">{{ label }}</label>
+            <button type="button" @click="transfer"><i class="pi pi-sort-alt !text-xs text-zinc-700 dark:text-white/70 hidden group-hover:block animate-fadein" title="Transfer between color scheme and common"></i></button>
         </div>
         <div :id="id" class="relative">
             <AutoComplete
@@ -16,7 +16,7 @@
                 :showEmptyMessage="false"
                 :pt="{
                     pcInputText: {
-                        root: ['border border-surface-300 dark:border-surface-600 rounded-lg py-2 px-2 w-full text-xs', { 'pr-8': type === 'color' }]
+                        root: ['border border-surface-300 text-zinc-950 dark:text-white dark:border-surface-600 rounded-lg py-2 px-2 w-full text-xs', { 'pr-8': type === 'color' }]
                     },
                     overlay: 'border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-950 shadow-2 rounded-md',
                     listContainer: 'max-h-40 overflow-auto',