From 84673ed08ac2617f9dbb757a93e3435907a0dbfb Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 3 Jan 2025 19:06:56 +0300
Subject: [PATCH] UI Cosmetics

---
 .../designer/dashboard/DesignDashboard.vue    | 37 ++++++++++---------
 .../designer/editor/DesignEditorFooter.vue    |  2 +-
 .../designer/editor/DesignTokenField.vue      |  6 +--
 .../component/DesignComponentSection.vue      |  2 +-
 .../editor/custom/DesignCustomTokens.vue      |  4 +-
 .../editor/primitive/DesignBorderRadius.vue   |  2 +-
 .../editor/semantic/DesignFormField.vue       |  8 ++--
 .../editor/semantic/DesignGeneral.vue         |  6 +--
 .../designer/editor/semantic/DesignList.vue   |  6 +--
 .../editor/semantic/DesignNavigation.vue      |  8 ++--
 .../editor/semantic/DesignOverlay.vue         |  8 ++--
 .../semantic/colorscheme/DesignCSCommon.vue   |  8 ++--
 .../colorscheme/DesignCSFormField.vue         |  4 +-
 .../semantic/colorscheme/DesignCSList.vue     |  6 +--
 .../colorscheme/DesignCSNavigation.vue        |  8 ++--
 .../semantic/colorscheme/DesignCSOverlay.vue  |  6 +--
 .../editor/settings/DesignSettings.vue        | 14 +++----
 17 files changed, 69 insertions(+), 66 deletions(-)

diff --git a/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue b/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
index 8907bf2e4..660f1f657 100644
--- a/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
+++ b/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
@@ -11,14 +11,19 @@
 
     <div class="flex justify-between items-center mb-2 mt-6">
         <span class="text-lg font-semibold">My Themes</span>
-        <span class="text-muted-color text-sm">{{ $appState.designer.themes?.length }} / {{ $appState.designer.themeLimit }}</span>
+        <div v-if="$appState.designer.themeLimit" class="flex items-center gap-2">
+            <span class="text-muted-color text-xs">{{ $appState.designer.themes.length }} / {{ $appState.designer.themeLimit }}</span>
+            <div class="h-2 border rounded-md w-32 overflow-hidden">
+                <div class="bg-zinc-950 dark:bg-white h-full" :style="{ width: themeUsageRatio + '%' }"></div>
+            </div>
+        </div>
     </div>
     <span class="block text-muted-color leading-6 mb-4">Continue editing your existing themes or build a new one.</span>
-    <div class="flex flex-wrap gap-6">
+    <div class="flex flex-wrap gap-4">
         <button
             type="button"
             :class="[
-                'rounded-xl h-36 w-36 bg-transparent border border-gray-200 dark:border-gray-700 text-black dark:text-white',
+                '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 }
             ]"
             @click="openNewTheme"
@@ -26,31 +31,27 @@
             <i class="pi pi-plus !text-2xl"></i>
         </button>
         <template v-if="loading">
-            <Skeleton class="!rounded-xl !h-36 !w-36">-</Skeleton>
-            <Skeleton class="!rounded-xl !h-36 !w-36">-</Skeleton>
+            <Skeleton class="!rounded-xl !h-32 !w-32">-</Skeleton>
+            <Skeleton class="!rounded-xl !h-32 !w-32">-</Skeleton>
         </template>
         <template v-else>
             <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-36 w-36 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-gray-200 dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-500 text-black dark:text-white"
                     @click="loadTheme(theme)"
                 >
-                    <span class="text-2xl uppercase">{{ abbrThemeName(theme) }}</span>
+                    <span class="text-2xl uppercase font-bold">{{ abbrThemeName(theme) }}</span>
                 </button>
-                <div class="flex flex-col items-center gap-2">
+                <div class="flex flex-col items-center gap-1">
                     <div class="group flex items-center gap-2 relative">
-                        <input v-model="theme.t_name" type="text" class="w-24 text-sm px-2 py-1 text-center" maxlength="100" @blur="renameTheme(theme)" />
+                        <input v-model="theme.t_name" type="text" class="w-24 text-sm px-2 text-center" maxlength="100" @blur="renameTheme(theme)" />
                         <i class="hidden group-hover:block pi pi-pencil !text-sm absolute top-50 right-0 text-muted-color"></i>
                     </div>
                     <span class="text-muted-color text-xs">{{ formatTimestamp(theme.t_last_updated) }}</span>
                 </div>
-                <button
-                    type="button"
-                    @click="toggleMenuOptions($event, theme)"
-                    class="bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-700 text-black dark:text-white flex absolute top-2 right-2 w-8 h-8 rounded-full items-center justify-center"
-                >
-                    <i class="pi pi-ellipsis-v" />
+                <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">
+                    <i class="pi pi-ellipsis-h !text-xs" />
                 </button>
             </div>
         </template>
@@ -270,8 +271,10 @@ export default {
     },
     computed: {
         themeLimitReached() {
-            if (this.$appState.designer.themeLimit > 0 && this.$appState.designer.themes?.length) return this.$appState.designer.themeLimit === this.$appState.designer.themes.length;
-            else return false;
+            return this.$appState.designer.themeLimit ? this.$appState.designer.themeLimit === this.$appState.designer.themes.length : false;
+        },
+        themeUsageRatio() {
+            return this.$appState.designer.themeLimit ? 100 * (this.$appState.designer.themes.length / this.$appState.designer.themeLimit) : 0;
         }
     }
 };
diff --git a/apps/showcase/components/layout/designer/editor/DesignEditorFooter.vue b/apps/showcase/components/layout/designer/editor/DesignEditorFooter.vue
index de1c800a5..7500b04b9 100644
--- a/apps/showcase/components/layout/designer/editor/DesignEditorFooter.vue
+++ b/apps/showcase/components/layout/designer/editor/DesignEditorFooter.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex justify-between gap-2">
+    <div class="flex justify-end gap-2">
         <button type="button" @click="download" icon="pi pi-download" class="btn-design-outlined">Download</button>
         <button type="button" @click="apply" icon="pi pi-download" class="btn-design">Apply</button>
     </div>
diff --git a/apps/showcase/components/layout/designer/editor/DesignTokenField.vue b/apps/showcase/components/layout/designer/editor/DesignTokenField.vue
index 01ab3ff9c..6d70e2239 100644
--- a/apps/showcase/components/layout/designer/editor/DesignTokenField.vue
+++ b/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-sm text-zinc-700 dark:text-white block capitalize text-ellipsis overflow-hidden w-full whitespace-nowrap" :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"></i></button>
+            <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>
         </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-sm', { 'pr-8': type === 'color' }]
+                        root: ['border border-surface-300 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',
diff --git a/apps/showcase/components/layout/designer/editor/component/DesignComponentSection.vue b/apps/showcase/components/layout/designer/editor/component/DesignComponentSection.vue
index 5a72daf43..b94f889fa 100644
--- a/apps/showcase/components/layout/designer/editor/component/DesignComponentSection.vue
+++ b/apps/showcase/components/layout/designer/editor/component/DesignComponentSection.vue
@@ -1,7 +1,7 @@
 <template>
     <section>
         <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0 capitalize">{{ sectionName }}</div>
-        <div class="grid grid-cols-4 gap-2">
+        <div class="grid grid-cols-4 gap-x-2 gap-y-3">
             <template v-for="(t_value, t_name) in tokens" :key="t_name">
                 <DesignTokenField v-if="!isObject(t_value)" v-model="tokens[t_name]" :label="camelCaseToSpaces(t_name)" :type="isColor(t_name) ? 'color' : null" :componentKey="componentKey" :path="path + '.' + t_name" />
             </template>
diff --git a/apps/showcase/components/layout/designer/editor/custom/DesignCustomTokens.vue b/apps/showcase/components/layout/designer/editor/custom/DesignCustomTokens.vue
index 0d42410b5..2ca1ced61 100644
--- a/apps/showcase/components/layout/designer/editor/custom/DesignCustomTokens.vue
+++ b/apps/showcase/components/layout/designer/editor/custom/DesignCustomTokens.vue
@@ -1,6 +1,6 @@
 <template>
-    <span class="leading-6 text-muted-color">Extend the theming system with your own design tokens e.g. <span class="font-medium">accent.color</span>. Do not use curly braces in the name field.</span>
-    <ul class="flex flex-col gap-4 list-none p-0 mx-0 my-4">
+    <div class="leading-6 text-muted-color mb-4">Extend the theming system with your own design tokens e.g. <span class="font-medium">accent.color</span>. Do not use curly braces in the name field.</div>
+    <ul v-if="tokens?.length" class="flex flex-col gap-4 list-none p-0 mx-0 mb-4">
         <li v-for="(token, index) of tokens" :key="index" class="first:border-t border-b border-surface-200 dark:border-surface-300 py-2">
             <div class="flex items-center gap-4">
                 <label class="flex items-center gap-2 flex-auto">
diff --git a/apps/showcase/components/layout/designer/editor/primitive/DesignBorderRadius.vue b/apps/showcase/components/layout/designer/editor/primitive/DesignBorderRadius.vue
index ee56b4da5..ea2b847c5 100644
--- a/apps/showcase/components/layout/designer/editor/primitive/DesignBorderRadius.vue
+++ b/apps/showcase/components/layout/designer/editor/primitive/DesignBorderRadius.vue
@@ -1,6 +1,6 @@
 <template>
     <Fieldset legend="Rounded" :toggleable="true">
-        <section class="grid grid-cols-4 gap-2">
+        <section class="grid grid-cols-4 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$appState.designer.theme.preset.primitive.borderRadius.none" label="None" />
             </div>
diff --git a/apps/showcase/components/layout/designer/editor/semantic/DesignFormField.vue b/apps/showcase/components/layout/designer/editor/semantic/DesignFormField.vue
index 901738fff..e8b46d58d 100644
--- a/apps/showcase/components/layout/designer/editor/semantic/DesignFormField.vue
+++ b/apps/showcase/components/layout/designer/editor/semantic/DesignFormField.vue
@@ -1,7 +1,7 @@
 <template>
     <Fieldset legend="Form Field" :toggleable="true">
         <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">
+        <section class="grid grid-cols-4 mb-3 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$appState.designer.theme.preset.semantic.formField.paddingX" label="Padding X" />
             </div>
@@ -17,7 +17,7 @@
         </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">
+        <section class="grid grid-cols-4 mb-3 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$appState.designer.theme.preset.semantic.formField.sm.paddingX" label="Padding X" />
             </div>
@@ -31,7 +31,7 @@
         </section>
 
         <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">
+        <section class="grid grid-cols-4 mb-3 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$appState.designer.theme.preset.semantic.formField.lg.paddingX" label="Padding X" />
             </div>
@@ -45,7 +45,7 @@
         </section>
 
         <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">
+        <section class="grid grid-cols-4 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$appState.designer.theme.preset.semantic.formField.focusRing.width" label="Width" />
             </div>
diff --git a/apps/showcase/components/layout/designer/editor/semantic/DesignGeneral.vue b/apps/showcase/components/layout/designer/editor/semantic/DesignGeneral.vue
index e3812d374..b86d5510e 100644
--- a/apps/showcase/components/layout/designer/editor/semantic/DesignGeneral.vue
+++ b/apps/showcase/components/layout/designer/editor/semantic/DesignGeneral.vue
@@ -1,13 +1,13 @@
 <template>
     <Fieldset legend="General" :toggleable="true">
-        <section class="flex justify-between items-center mb-4">
+        <section class="flex justify-between items-center mb-5">
             <div class="flex gap-2 items-center">
                 <span class="text-sm">Primary</span>
                 <input :value="$appState.designer.theme.preset.semantic.primary['500']" @input="onPrimaryColorChange($event)" type="color" />
             </div>
             <DesignColorPalette :value="$appState.designer.theme.preset.semantic.primary" />
         </section>
-        <section class="grid grid-cols-4 mb-3 gap-2">
+        <section class="grid grid-cols-4 mb-3 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$appState.designer.theme.preset.semantic.transitionDuration" label="Transition Duration" />
             </div>
@@ -31,7 +31,7 @@
         </section>
 
         <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">
+        <section class="grid grid-cols-4 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$appState.designer.theme.preset.semantic.focusRing.width" label="Width" />
             </div>
diff --git a/apps/showcase/components/layout/designer/editor/semantic/DesignList.vue b/apps/showcase/components/layout/designer/editor/semantic/DesignList.vue
index 30a9aa7bc..5f8cc392e 100644
--- a/apps/showcase/components/layout/designer/editor/semantic/DesignList.vue
+++ b/apps/showcase/components/layout/designer/editor/semantic/DesignList.vue
@@ -1,7 +1,7 @@
 <template>
     <Fieldset legend="List" :toggleable="true">
         <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">
+        <section class="grid grid-cols-4 mb-3 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$appState.designer.theme.preset.semantic.list.padding" label="Padding" />
             </div>
@@ -15,7 +15,7 @@
         </section>
 
         <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">
+        <section class="grid grid-cols-4 mb-3 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$appState.designer.theme.preset.semantic.list.option.padding" label="Padding" />
             </div>
@@ -25,7 +25,7 @@
         </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">
+        <section class="grid grid-cols-4 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$appState.designer.theme.preset.semantic.list.optionGroup.padding" label="Padding" />
             </div>
diff --git a/apps/showcase/components/layout/designer/editor/semantic/DesignNavigation.vue b/apps/showcase/components/layout/designer/editor/semantic/DesignNavigation.vue
index 5033ecd16..d9ac50dcc 100644
--- a/apps/showcase/components/layout/designer/editor/semantic/DesignNavigation.vue
+++ b/apps/showcase/components/layout/designer/editor/semantic/DesignNavigation.vue
@@ -1,7 +1,7 @@
 <template>
     <Fieldset legend="Navigation" :toggleable="true">
         <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">
+        <section class="grid grid-cols-4 mb-3 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$appState.designer.theme.preset.semantic.navigation.list.padding" label="Padding" />
             </div>
@@ -13,7 +13,7 @@
         </section>
 
         <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">
+        <section class="grid grid-cols-4 mb-3 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$appState.designer.theme.preset.semantic.navigation.item.padding" label="Padding" />
             </div>
@@ -27,7 +27,7 @@
         </section>
 
         <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">
+        <section class="grid grid-cols-4 mb-3 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$appState.designer.theme.preset.semantic.navigation.submenuLabel.padding" label="Padding" />
             </div>
@@ -39,7 +39,7 @@
         </section>
 
         <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">
+        <section class="grid grid-cols-4 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$appState.designer.theme.preset.semantic.navigation.submenuIcon.size" label="Size" />
             </div>
diff --git a/apps/showcase/components/layout/designer/editor/semantic/DesignOverlay.vue b/apps/showcase/components/layout/designer/editor/semantic/DesignOverlay.vue
index 7f0775296..fe92d24db 100644
--- a/apps/showcase/components/layout/designer/editor/semantic/DesignOverlay.vue
+++ b/apps/showcase/components/layout/designer/editor/semantic/DesignOverlay.vue
@@ -1,7 +1,7 @@
 <template>
     <Fieldset legend="Overlay" :toggleable="true">
         <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">
+        <section class="grid grid-cols-4 mb-3 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$appState.designer.theme.preset.semantic.overlay.select.borderRadius" label="Border Radius" />
             </div>
@@ -13,7 +13,7 @@
         </section>
 
         <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">
+        <section class="grid grid-cols-4 mb-3 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$appState.designer.theme.preset.semantic.overlay.popover.borderRadius" label="Border Radius" />
             </div>
@@ -27,7 +27,7 @@
         </section>
 
         <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">
+        <section class="grid grid-cols-4 mb-3 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$appState.designer.theme.preset.semantic.overlay.modal.borderRadius" label="Border Radius" />
             </div>
@@ -41,7 +41,7 @@
         </section>
 
         <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">
+        <section class="grid grid-cols-4 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$appState.designer.theme.preset.semantic.overlay.navigation.shadow" label="Shadow" />
             </div>
diff --git a/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSCommon.vue b/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSCommon.vue
index 63a913e5d..f66795790 100644
--- a/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSCommon.vue
+++ b/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSCommon.vue
@@ -8,7 +8,7 @@
             <DesignColorPalette :value="$colorScheme.surface" />
         </section>
         <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">
+        <section class="grid grid-cols-4 mb-3 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$colorScheme.text.color" label="Text" type="color" />
             </div>
@@ -22,7 +22,7 @@
                 <DesignTokenField v-model="$colorScheme.text.hoverMutedColor" label="Text Hover Muted" type="color" />
             </div>
         </section>
-        <section class="grid grid-cols-4 mb-3 gap-2">
+        <section class="grid grid-cols-4 mb-3 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$colorScheme.content.background" label="Content BG" type="color" />
             </div>
@@ -47,7 +47,7 @@
         </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">
+        <section class="grid grid-cols-4 mb-3 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$colorScheme.primary.color" label="Primary" type="color" />
             </div>
@@ -61,7 +61,7 @@
                 <DesignTokenField v-model="$colorScheme.primary.activeColor" label="Primary Active" type="color" />
             </div>
         </section>
-        <section class="grid grid-cols-4 gap-2">
+        <section class="grid grid-cols-4 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$colorScheme.highlight.background" label="Highlight BG" type="color" />
             </div>
diff --git a/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSFormField.vue b/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSFormField.vue
index 4cb09fb70..b794fd111 100644
--- a/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSFormField.vue
+++ b/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSFormField.vue
@@ -1,6 +1,6 @@
 <template>
     <Fieldset legend="Form Field" :toggleable="true">
-        <section class="grid grid-cols-4 mb-3 gap-2">
+        <section class="grid grid-cols-4 mb-3 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$colorScheme.formField.background" label="BG" type="color" />
             </div>
@@ -50,7 +50,7 @@
         </section>
 
         <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">
+        <section class="grid grid-cols-4 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$colorScheme.formField.floatLabelColor" label="Color" type="color" />
             </div>
diff --git a/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSList.vue b/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSList.vue
index b35bdc11e..6412d95f4 100644
--- a/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSList.vue
+++ b/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSList.vue
@@ -1,7 +1,7 @@
 <template>
     <Fieldset legend="List" :toggleable="true">
         <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">
+        <section class="grid grid-cols-4 mb-3 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$colorScheme.list.option.focusBackground" label="Focus BG" type="color" />
             </div>
@@ -25,7 +25,7 @@
         </section>
 
         <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">
+        <section class="grid grid-cols-4 mb-3 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$colorScheme.list.option.icon.color" label="Color" type="color" />
             </div>
@@ -35,7 +35,7 @@
         </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">
+        <section class="grid grid-cols-4 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$colorScheme.list.optionGroup.background" label="BG" type="color" />
             </div>
diff --git a/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSNavigation.vue b/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSNavigation.vue
index 3e27a13ca..20d844bfd 100644
--- a/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSNavigation.vue
+++ b/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSNavigation.vue
@@ -1,7 +1,7 @@
 <template>
     <Fieldset legend="Navigation" :toggleable="true">
         <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">
+        <section class="grid grid-cols-4 mb-3 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$colorScheme.navigation.item.focusBackground" label="Focus BG" type="color" />
             </div>
@@ -24,7 +24,7 @@
         </section>
 
         <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">
+        <section class="grid grid-cols-4 mb-3 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$colorScheme.navigation.item.icon.color" label="Color" type="color" />
             </div>
@@ -38,7 +38,7 @@
         </section>
 
         <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">
+        <section class="grid grid-cols-4 mb-3 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$colorScheme.navigation.submenuLabel.background" label="BG" type="color" />
             </div>
@@ -50,7 +50,7 @@
         </section>
 
         <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">
+        <section class="grid grid-cols-4 mb-3 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$colorScheme.navigation.submenuIcon.color" label="Color" type="color" />
             </div>
diff --git a/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSOverlay.vue b/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSOverlay.vue
index 3978b16a3..ad798022b 100644
--- a/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSOverlay.vue
+++ b/apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSOverlay.vue
@@ -1,7 +1,7 @@
 <template>
     <Fieldset legend="Overlay" :toggleable="true">
         <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">
+        <section class="grid grid-cols-4 mb-3 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$colorScheme.overlay.select.background" label="BG" type="color" />
             </div>
@@ -15,7 +15,7 @@
         </section>
 
         <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">
+        <section class="grid grid-cols-4 mb-3 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$colorScheme.overlay.popover.background" label="BG" type="color" />
             </div>
@@ -29,7 +29,7 @@
         </section>
 
         <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">
+        <section class="grid grid-cols-4 gap-x-2 gap-y-3">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$colorScheme.overlay.modal.background" label="BG" type="color" />
             </div>
diff --git a/apps/showcase/components/layout/designer/editor/settings/DesignSettings.vue b/apps/showcase/components/layout/designer/editor/settings/DesignSettings.vue
index 2403169a1..b8719f7c5 100644
--- a/apps/showcase/components/layout/designer/editor/settings/DesignSettings.vue
+++ b/apps/showcase/components/layout/designer/editor/settings/DesignSettings.vue
@@ -1,9 +1,9 @@
 <template>
-    <section class="mb-6">
-        <div class="text-lg font-semibold mb-4">Font</div>
+    <section>
+        <div class="text-lg font-semibold mb-2">Font</div>
 
         <div class="flex gap-4">
-            <div class="mb-4">
+            <div>
                 <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Base</div>
                 <select v-model="$appState.designer.theme.config.fontSize" @change="changeBaseFontSize" class="appearance-none px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 w-20">
                     <option v-for="fontSize of fontSizes" :key="fontSize" :value="fontSize">{{ fontSize }}</option>
@@ -18,15 +18,15 @@
             </div>
         </div>
     </section>
-    <section class="mb-6">
+    <section class="mt-6">
         <div class="block text-lg font-semibold mb-2">Migration Assistant</div>
         <span class="block text-muted-color leading-6 mb-4"
             >Automatically update your themes to the latest version. This tool does not override the values of existing tokens, and only adds missing tokens if necessary. Still, it is recommended to duplicate your theme as a backup and run a preview
             before the migration.
         </span>
-        <div class="flex justify-between">
-            <button type="button" @click="preview" class="btn-design-outlined">Preview</button>
-            <button type="button" :disabled="status !== 'preview'" @click="confirmMigration" class="btn-design">Migrate</button>
+        <div class="flex justify-start gap-2">
+            <button type="button" @click="preview" class="btn-design-outlined">Check for Updates</button>
+            <button v-if="status === 'preview' && missingTokens.length > 0" type="button" @click="confirmMigration" class="btn-design">Migrate</button>
         </div>
         <div v-if="status === 'preview'">
             <div v-if="missingTokens.length" class="p-3 bg-yellow-100 text-yellow-950 dark:bg-amber-600 dark:text-black font-medium mt-4 rounded-md leading-normal">