From 71f2e0b2294706d6a9ab8be140564aa580d85879 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 13 Nov 2024 14:35:07 +0300
Subject: [PATCH] Visual cosmetics

---
 .../components/layout/AppDesigner.vue         | 29 +++++++++++--------
 .../designer/primitive/DesignBorderRadius.vue |  2 +-
 .../semantic/colorscheme/DesignCS.vue         | 12 ++++----
 .../semantic/colorscheme/DesignCSCommon.vue   |  2 +-
 .../colorscheme/DesignCSFormField.vue         |  2 +-
 .../semantic/colorscheme/DesignCSList.vue     |  2 +-
 .../colorscheme/DesignCSNavigation.vue        |  2 +-
 .../semantic/colorscheme/DesignCSOverlay.vue  |  2 +-
 8 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/apps/showcase/components/layout/AppDesigner.vue b/apps/showcase/components/layout/AppDesigner.vue
index 6b3be803b..bcd1f9460 100644
--- a/apps/showcase/components/layout/AppDesigner.vue
+++ b/apps/showcase/components/layout/AppDesigner.vue
@@ -10,11 +10,12 @@
             </TabList>
             <TabPanels class="!px-0">
                 <TabPanel value="0">
-                    <div class="text-lg font-semibold mb-4">Choose a Theme to Get Started</div>
-                    <div class="flex flex-col gap-4">
+                    <div class="text-lg font-semibold mb-2">Choose a Theme to Get Started</div>
+                    <span class="block text-muted-color leading-6 mb-4">Begin by selecting a built-in theme as a foundation, continue editing your current theme, or import a Figma tokens file.</span>
+                    <div class="flex flex-col">
                         <div class="flex flex-col gap-4 border border-surface-200 dark:border-surface-700 rounded-md p-4">
-                            <span class="font-semibold">Built-in Themes</span>
-                            <span class="text-muted-color">Four alternatives to choose from.</span>
+                            <span class="font-semibold">Base Theme</span>
+                            <span class="text-muted-color">Variety of built-in themes with distinct characteristics.</span>
                             <SelectButton v-model="$appState.preset" @update:modelValue="onPresetChange" :options="presetOptions" optionLabel="label" optionValue="value" :allowEmpty="false" />
                         </div>
                         <Divider>OR</Divider>
@@ -36,7 +37,7 @@
                 </TabPanel>
                 <TabPanel value="1">
                     <div class="flex flex-col gap-3">
-                        <form @keydown="onKeyDown">
+                        <form @keydown="onKeyDown" class="flex flex-col gap-3">
                             <DesignBorderRadius />
                             <DesignColors />
                         </form>
@@ -48,7 +49,7 @@
                             <AccordionHeader>Common</AccordionHeader>
                             <AccordionContent>
                                 <div class="flex flex-col gap-3">
-                                    <form @keydown="onKeyDown">
+                                    <form @keydown="onKeyDown" class="flex flex-col gap-3">
                                         <DesignGeneral />
                                         <DesignFormField />
                                         <DesignList />
@@ -84,7 +85,9 @@
                         </AccordionPanel>
                     </Accordion>
                 </TabPanel>
-                <TabPanel value="3">Component tokens are not supported by the Visual Editor at the moment.</TabPanel>
+                <TabPanel value="3">
+                    <span class="leading-6">Component tokens are not supported by the Visual Editor at the moment.</span>
+                </TabPanel>
                 <TabPanel value="4">
                     <span class="leading-6">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">
@@ -101,7 +104,7 @@
                                 <button
                                     type="button"
                                     @click="removeToken(index)"
-                                    class="cursor-pointer inline-flex items-center justify-center ms-auto w-8 h-8 rounded-full bg-red-50 hover:bg-red-100 text-red-600 dark:bg-red-400/10 dark:hover:bg-red-400/20 dark:text-red-400 transition-colors duration-200 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-red-600 focus-visible:dark:outline-red-400"
+                                    class="cursor-pointer inline-flex items-center justify-center ms-auto w-8 h-8 rounded-full bg-red-50 hover:bg-red-100 text-red-600 dark:bg-red-400/10 dark:hover:bg-red-400/20 dark:text-red-400 transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-red-600 focus:dark:outline-red-400"
                                 >
                                     <i class="pi pi-times" />
                                 </button>
@@ -112,14 +115,15 @@
                         <button
                             type="button"
                             @click="addToken"
-                            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-visible:outline focus-visible:outline-offset-2 focus-visible:outline-zinc-950 focus-visible:dark:outline-white"
+                            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"
                         >
                             Add New
                         </button>
                         <button
+                            v-if="customTokens.length"
                             type="button"
                             @click="saveTokens"
-                            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-visible:outline focus-visible:outline-offset-2 focus-visible:outline-zinc-950 focus-visible:dark:outline-white"
+                            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"
                         >
                             Save
                         </button>
@@ -134,14 +138,14 @@
                     type="button"
                     @click="download"
                     icon="pi pi-download"
-                    class="px-3 py-2 bg-transparent border border-gray-200 dark:border-gray-700 hover:border-gray-800 dark:hover:border-gray-500 text-black dark:text-white rounded-md font-medium cursor-pointer transition-colors duration-200 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-zinc-950 focus-visible:dark:outline-white"
+                    class="px-3 py-2 bg-transparent border border-gray-200 dark:border-gray-700 hover:border-gray-800 dark:hover:border-gray-500 text-black dark:text-white rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
                 >
                     Download
                 </button>
                 <button
                     type="button"
                     @click="apply"
-                    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-visible:outline focus-visible:outline-offset-2 focus-visible:outline-zinc-950 focus-visible:dark:outline-white"
+                    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"
                 >
                     Apply
                 </button>
@@ -274,6 +278,7 @@ app.mount("#app");
 
                     if (defaultTheme.preset) {
                         this.preset = defaultTheme.preset;
+                        usePreset(this.preset);
                     }
 
                     if (defaultTheme.customTokens) {
diff --git a/apps/showcase/components/layout/designer/primitive/DesignBorderRadius.vue b/apps/showcase/components/layout/designer/primitive/DesignBorderRadius.vue
index 6b2f1ac1c..e8e34a38e 100644
--- a/apps/showcase/components/layout/designer/primitive/DesignBorderRadius.vue
+++ b/apps/showcase/components/layout/designer/primitive/DesignBorderRadius.vue
@@ -1,6 +1,6 @@
 <template>
     <Fieldset legend="Rounded" :toggleable="true">
-        <section class="grid grid-cols-4 mb-3 gap-2">
+        <section class="grid grid-cols-4 gap-2">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$preset.primitive.borderRadius.none" label="None" />
             </div>
diff --git a/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCS.vue b/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCS.vue
index eb6c2ba0d..b4e9da717 100644
--- a/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCS.vue
+++ b/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCS.vue
@@ -1,9 +1,11 @@
 <template>
-    <DesignCSCommon />
-    <DesignCSFormField />
-    <DesignCSOverlay />
-    <DesignCSList />
-    <DesignCSNavigation />
+    <div class="flex flex-col gap-3">
+        <DesignCSCommon />
+        <DesignCSFormField />
+        <DesignCSOverlay />
+        <DesignCSList />
+        <DesignCSNavigation />
+    </div>
 </template>
 
 <script>
diff --git a/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSCommon.vue b/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSCommon.vue
index df7f83527..63a913e5d 100644
--- a/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSCommon.vue
+++ b/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSCommon.vue
@@ -1,5 +1,5 @@
 <template>
-    <Fieldset legend="Common" :toggleable="true" class="mb-3">
+    <Fieldset legend="Common" :toggleable="true">
         <section class="flex justify-between items-center mb-4">
             <div class="flex gap-2 items-center">
                 <span class="text-sm">Surface</span>
diff --git a/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSFormField.vue b/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSFormField.vue
index f4924081b..4cb09fb70 100644
--- a/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSFormField.vue
+++ b/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSFormField.vue
@@ -1,5 +1,5 @@
 <template>
-    <Fieldset legend="Form Field" :toggleable="true" class="mb-3">
+    <Fieldset legend="Form Field" :toggleable="true">
         <section class="grid grid-cols-4 mb-3 gap-2">
             <div class="flex flex-col gap-1">
                 <DesignTokenField v-model="$colorScheme.formField.background" label="BG" type="color" />
diff --git a/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSList.vue b/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSList.vue
index 57c7ec3bf..b35bdc11e 100644
--- a/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSList.vue
+++ b/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSList.vue
@@ -1,5 +1,5 @@
 <template>
-    <Fieldset legend="List" :toggleable="true" class="mb-3">
+    <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">
             <div class="flex flex-col gap-1">
diff --git a/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSNavigation.vue b/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSNavigation.vue
index be220355d..3e27a13ca 100644
--- a/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSNavigation.vue
+++ b/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSNavigation.vue
@@ -1,5 +1,5 @@
 <template>
-    <Fieldset legend="Navigation" :toggleable="true" class="mb-3">
+    <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">
             <div class="flex flex-col gap-1">
diff --git a/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSOverlay.vue b/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSOverlay.vue
index da9d0cc81..3978b16a3 100644
--- a/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSOverlay.vue
+++ b/apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSOverlay.vue
@@ -1,5 +1,5 @@
 <template>
-    <Fieldset legend="Overlay" :toggleable="true" class="mb-3">
+    <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">
             <div class="flex flex-col gap-1">