designer updates for the ci themes

Author: cagataycivici

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

@@ -8,7 +8,7 @@
     }
 
     .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 dark:focus:outline-white disabled:opacity-60;
+        @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 disabled:cursor-auto transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 dark:focus:outline-white disabled:opacity-60 disabled:hover:border-gray-200 dark:disabled:hover:border-gray-700;
     }
 
     .icon-btn {

apps/showcase/components/layout/AppDesigner.vue

@@ -121,21 +121,23 @@ export default {
             }
         },
         async saveTheme(theme) {
-            const { error } = await $fetch(this.designerApiUrl + '/theme/update', {
-                method: 'PATCH',
-                credentials: 'include',
-                headers: {
-                    'X-CSRF-Token': this.$appState.designer.csrfToken
-                },
-                body: {
-                    key: theme.key,
-                    preset: theme.preset,
-                    config: theme.config
-                }
-            });
+            if (theme.origin === 'web') {
+                const { error } = await $fetch(this.designerApiUrl + '/theme/update', {
+                    method: 'PATCH',
+                    credentials: 'include',
+                    headers: {
+                        'X-CSRF-Token': this.$appState.designer.csrfToken
+                    },
+                    body: {
+                        key: theme.key,
+                        preset: theme.preset,
+                        config: theme.config
+                    }
+                });
 
-            if (error) {
-                this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 });
+                if (error) {
+                    this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 });
+                }
             }
         },
         applyTheme(theme) {
@@ -221,7 +223,8 @@ export default {
                 key: data.t_key,
                 name: data.t_name,
                 preset: typeof data.t_preset === 'string' ? JSON.parse(data.t_preset) : data.t_preset,
-                config: typeof data.t_config === 'string' ? JSON.parse(data.t_config) : data.t_config
+                config: typeof data.t_config === 'string' ? JSON.parse(data.t_config) : data.t_config,
+                origin: data.t_origin
             };
 
             usePreset(this.$appState.designer.theme.preset);

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

@@ -51,10 +51,12 @@
         <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-surface-200 dark:border-surface-700 hover:border-surface-400 dark:hover:border-surface-500 text-black dark:text-white"
+                class="relative 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>
+
+                <span class="absolute bottom-2 start-0 text-xs text-muted-color ms-start w-full" v-if="theme.t_origin !== 'web'">View Only</span>
             </button>
             <div class="flex flex-col items-center gap-1">
                 <div class="group flex items-center gap-2 relative">
@@ -63,11 +65,12 @@
                         type="text"
                         :class="['w-24 text-sm px-2 text-center pr-4t', { 'bg-red-50 dark:bg-red-500/30': !theme.t_name, 'bg-transparent': theme.t_name }]"
                         maxlength="100"
+                        :disabled="theme.t_origin !== 'web'"
                         @blur="renameTheme(theme)"
                         @keydown.enter="onThemeNameEnterKey($event)"
                         @keydown.escape="onThemeNameEscape($event)"
                     />
-                    <i class="hidden group-hover:block pi pi-pencil !text-xs absolute top-50 text-muted-color" style="right: 2px"></i>
+                    <i class="hidden group-hover:block pi pi-pencil !text-xs absolute top-50 text-muted-color" style="right: 2px" v-if="theme.t_origin === 'web'"></i>
                 </div>
                 <span class="text-muted-color text-xs">{{ formatTimestamp(theme.t_last_updated) }}</span>
             </div>
@@ -242,7 +245,7 @@ export default {
             }
         },
         async renameTheme(theme) {
-            if (theme.t_name && theme.t_name.trim().length) {
+            if (theme.t_name && theme.t_name.trim().length && theme.t_origin === 'web') {
                 const { error } = await $fetch(this.designerApiUrl + '/theme/rename/' + theme.t_key, {
                     method: 'PATCH',
                     credentials: 'include',

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

@@ -1,7 +1,7 @@
 <template>
     <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>
+        <button type="button" @click="apply" icon="pi pi-download" class="btn-design" :disabled="$appState.designer.theme.origin !== 'web'">Apply</button>
     </div>
 </template>
 

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

@@ -18,6 +18,7 @@
                 optionLabel="label"
                 :showEmptyMessage="false"
                 appendTo="self"
+                :disabled="$appState.designer.theme.origin !== 'web'"
                 :pt="{
                     pcInputText: {
                         root: {

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

@@ -24,8 +24,8 @@
         </li>
     </ul>
     <div class="flex justify-between">
-        <button type="button" @click="addToken" class="btn-design-outlined">Add New</button>
-        <button type="button" @click="save" class="btn-design">Save</button>
+        <button type="button" @click="addToken" class="btn-design-outlined" :disabled="$appState.designer.theme.origin !== 'web'">Add New</button>
+        <button type="button" @click="save" class="btn-design" :disabled="$appState.designer.theme.origin !== 'web'">Save</button>
     </div>
 </template>
 

apps/showcase/components/layout/designer/editor/primitive/DesignColors.vue

@@ -4,7 +4,14 @@
             <section v-if="key !== 'borderRadius'" class="flex justify-between items-center mb-4 gap-8">
                 <div class="flex gap-2 items-center">
                     <span class="text-sm capitalize block w-20">{{ key }}</span>
-                    <input :value="designerService.resolveColor($appState.designer.theme.preset.primitive[key]['500'])" @input="onColorChange($event, key)" type="color" @blur="onBlur" />
+                    <input
+                        :value="designerService.resolveColor($appState.designer.theme.preset.primitive[key]['500'])"
+                        @input="onColorChange($event, key)"
+                        type="color"
+                        @blur="onBlur"
+                        :disabled="$appState.designer.theme.origin !== 'web'"
+                        :class="{ '!cursor-not-allowed': $appState.designer.theme.origin !== 'web' }"
+                    />
                 </div>
                 <DesignColorPalette :value="$appState.designer.theme.preset.primitive[key]" />
             </section>

apps/showcase/components/layout/designer/editor/semantic/DesignGeneral.vue

@@ -3,7 +3,15 @@
         <section class="flex justify-between items-center mb-5 gap-8">
             <div class="flex gap-2 items-center">
                 <span class="text-sm">Primary</span>
-                <input :value="primary" @input="onPrimaryColorChange($event)" type="color" class="w-0 h-0" @onBlur="onColorPickerBlur" />
+                <input
+                    :value="primary"
+                    @input="onPrimaryColorChange($event)"
+                    type="color"
+                    class="w-0 h-0"
+                    @onBlur="onColorPickerBlur"
+                    :disabled="$appState.designer.theme.origin !== 'web'"
+                    :class="{ '!cursor-not-allowed': $appState.designer.theme.origin !== 'web' }"
+                />
             </div>
             <DesignColorPalette :value="$appState.designer.theme.preset.semantic.primary" />
         </section>

apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSCommon.vue

@@ -3,7 +3,14 @@
         <section class="flex justify-between items-center mb-5 gap-8">
             <div class="flex gap-2 items-center">
                 <span class="text-sm">Surface</span>
-                <input :value="surface" @input="onSurfaceColorChange($event)" type="color" @blur="onColorPickerBlur" />
+                <input
+                    :value="surface"
+                    @input="onSurfaceColorChange($event)"
+                    type="color"
+                    @blur="onColorPickerBlur"
+                    :disabled="$appState.designer.theme.origin !== 'web'"
+                    :class="{ '!cursor-not-allowed': $appState.designer.theme.origin !== 'web' }"
+                />
             </div>
             <DesignColorPalette :value="$colorScheme.surface" />
         </section>

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

@@ -5,14 +5,24 @@
         <div class="flex gap-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.font_size" @change="changeBaseFontSize" class="appearance-none px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 w-20">
+                <select
+                    v-model="$appState.designer.theme.config.font_size"
+                    @change="changeBaseFontSize"
+                    class="appearance-none px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 w-20"
+                    :disabled="$appState.designer.theme.origin !== 'web'"
+                >
                     <option v-for="fontSize of fontSizes" :key="fontSize" :value="fontSize">{{ fontSize }}</option>
                 </select>
             </div>
 
             <div>
                 <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Family</div>
-                <select v-model="$appState.designer.theme.config.font_family" @change="changeFont" class="appearance-none px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 w-48">
+                <select
+                    v-model="$appState.designer.theme.config.font_family"
+                    @change="changeFont"
+                    class="appearance-none px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 w-48"
+                    :disabled="$appState.designer.theme.origin !== 'web'"
+                >
                     <option v-for="font of fonts" :key="font" :value="font">{{ font }}</option>
                 </select>
             </div>
@@ -26,7 +36,7 @@
         </span>
         <div class="flex justify-start gap-2">
             <button type="button" @click="preview" class="btn-design-outlined disabled:pointer-events-none" :disabled="!$appState.designer.verified">Check for Updates</button>
-            <button v-if="status === 'preview' && missingTokens.length > 0" type="button" @click="confirmMigration" class="btn-design">Migrate</button>
+            <button v-if="status === 'preview' && missingTokens.length > 0" type="button" @click="confirmMigration" class="btn-design" :disabled="$appState.designer.theme.origin !== 'web'">Migrate</button>
         </div>
         <div v-if="status === 'preview'">
             <div v-if="missingTokens.length" class="p-3 bg-yellow-100 text-yellow-950 dark:bg-yellow-500/30 dark:text-yellow-100 font-medium mt-4 rounded-md leading-normal">