CSS component for buttons

apps/showcase/assets/styles/tailwind/main.css

@@ -1,3 +1,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+    .btn-design {
+      @apply px-3 py-2 bg-zinc-950 disabled:hover:bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:disabled:hover:bg-white dark:text-black rounded-md font-medium cursor-pointer disabled:cursor-auto transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white disabled:opacity-60;
+    }
+
+    .btn-design-outlined {
+        @apply 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 disabled:opacity-60;
+    }
+}

apps/showcase/components/layout/AppDesigner.vue

@@ -1,18 +1,5 @@
 <template>
-    <Drawer
+    <Drawer v-model:visible="$appState.designer.active" position="right" class="designer !w-screen md:!w-[48rem]" :modal="false" :dismissable="false" @after-show="onShow" @after-hide="onHide" :dt="drawerTokens">
-        v-model:visible="$appState.designer.active"
-        position="right"
-        class="designer !w-screen md:!w-[48rem]"
-        :modal="false"
-        :dismissable="false"
-        @after-show="onShow"
-        @after-hide="onHide"
-        :pt="{
-            header: 'p-5',
-            content: '!p-5',
-            footer: '!p-5'
-        }"
-    >
         <template #header>
             <div class="flex items-center gap-2">
                 <Button v-if="$appState.designer.activeView !== 'dashboard'" variant="text" severity="secondary" rounded type="button" icon="pi pi-chevron-left" @click="openDashboard" />
@@ -199,6 +186,38 @@ export default {
             }
 
             return null;
+        },
+        drawerTokens() {
+            return {
+                root: {
+                    shadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)'
+                },
+                header: {
+                    padding: '1.25rem'
+                },
+                title: {
+                    fontSize: '1.5rem',
+                    fontWeight: '600'
+                },
+                content: {
+                    padding: '0 1.25rem 1.25rem 1.25rem'
+                },
+                footer: {
+                    padding: '1.25rem'
+                },
+                colorScheme: {
+                    light: {
+                        background: '{surface.0}',
+                        borderColor: '{surface.200}',
+                        color: '#09090b'
+                    },
+                    dark: {
+                        background: '{surface.900}',
+                        borderColor: '{surface.700}',
+                        color: '#ffffff'
+                    }
+                }
+            };
         }
     }
 };

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

@@ -6,15 +6,7 @@
     >
     <form @submit.prevent class="flex gap-4">
         <input v-model="licenseKey" type="password" autocomplete="off" class="px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 flex-1" />
-        <button
+        <button type="button" @click="activate(false)" icon="pi pi-download" :disabled="!licenseKey" class="btn-design">Activate</button>
-            type="button"
-            @click="activate(false)"
-            icon="pi pi-download"
-            :disabled="!licenseKey"
-            class="px-3 py-2 bg-zinc-950 disabled:hover:bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:disabled:hover:bg-white dark:text-black rounded-md font-medium cursor-pointer disabled:cursor-auto transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white disabled:opacity-60"
-        >
-            Activate
-        </button>
     </form>
 
     <div class="flex justify-between items-center mb-2 mt-6">

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

@@ -1,21 +1,7 @@
 <template>
     <div class="flex justify-between gap-2">
-        <button
+        <button type="button" @click="download" icon="pi pi-download" class="btn-design-outlined">Download</button>
-            type="button"
+        <button type="button" @click="apply" icon="pi pi-download" class="btn-design">Apply</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:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
-        >
-            Download
-        </button>
-        <button
-            type="button"
-            @click="apply"
-            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"
-        >
-            Apply
-        </button>
     </div>
 </template>
 

apps/showcase/components/layout/designer/editor/custom/DesignCustomTokens.vue

@@ -22,20 +22,8 @@
         </li>
     </ul>
     <div class="flex justify-between">
-        <button
+        <button type="button" @click="addToken" class="btn-design-outlined">Add New</button>
-            type="button"
+        <button type="button" @click="save" class="btn-design">Save</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:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
-        >
-            Add New
-        </button>
-        <button
-            type="button"
-            @click="save"
-            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>
     </div>
 </template>
 

apps/showcase/components/layout/designer/editor/settings/DesignSettings.vue

@@ -25,21 +25,8 @@
             before the migration.
         </span>
         <div class="flex justify-between">
-            <button
+            <button type="button" @click="preview" class="btn-design-outlined">Preview</button>
-                type="button"
+            <button type="button" :disabled="status !== 'preview'" @click="confirmMigration" class="btn-design">Migrate</button>
-                @click="preview"
-                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"
-            >
-                Preview
-            </button>
-            <button
-                type="button"
-                :disabled="status !== 'preview'"
-                @click="confirmMigration"
-                class="px-3 py-2 bg-zinc-950 disabled:hover:bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:disabled:hover:bg-white dark:text-black rounded-md font-medium cursor-pointer disabled:cursor-auto transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white disabled:opacity-60"
-            >
-                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">