UI Cosmetics

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;
         }
     }
 };

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>

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',

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>

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">

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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">