vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

UI Cosmetics

pull/7044/head
Cagatay Civici 2025-01-03 19:06:56 +03:00
parent 72bf74a104
commit 84673ed08a
17 changed files with 69 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
View File

@ -11,14 +11,19 @@
<div class="flex justify-between items-center mb-2 mt-6"> <div class="flex justify-between items-center mb-2 mt-6">
<span class="text-lg font-semibold">My Themes</span> <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> </div>
<span class="block text-muted-color leading-6 mb-4">Continue editing your existing themes or build a new one.</span> <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 <button
type="button" type="button"
:class="[ :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 } { 'opacity-50 cursor-auto': themeLimitReached, 'hover:border-gray-400 dark:hover:border-gray-500': !themeLimitReached }
]" ]"
@click="openNewTheme" @click="openNewTheme"
@ -26,31 +31,27 @@
<i class="pi pi-plus !text-2xl"></i> <i class="pi pi-plus !text-2xl"></i>
</button> </button>
<template v-if="loading"> <template v-if="loading">
<Skeleton class="!rounded-xl !h-36 !w-36">-</Skeleton> <Skeleton class="!rounded-xl !h-32 !w-32">-</Skeleton>
<Skeleton class="!rounded-xl !h-36 !w-36">-</Skeleton> <Skeleton class="!rounded-xl !h-32 !w-32">-</Skeleton>
</template> </template>
<template v-else> <template v-else>
<div v-for="theme of $appState.designer.themes" :key="theme.t_key" class="flex flex-col gap-2 relative"> <div v-for="theme of $appState.designer.themes" :key="theme.t_key" class="flex flex-col gap-2 relative">
<button <button
type="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)" @click="loadTheme(theme)"
> >
<span class="text-2xl uppercase">{{ abbrThemeName(theme) }}</span> <span class="text-2xl uppercase font-bold">{{ abbrThemeName(theme) }}</span>
</button> </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"> <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> <i class="hidden group-hover:block pi pi-pencil !text-sm absolute top-50 right-0 text-muted-color"></i>
</div> </div>
<span class="text-muted-color text-xs">{{ formatTimestamp(theme.t_last_updated) }}</span> <span class="text-muted-color text-xs">{{ formatTimestamp(theme.t_last_updated) }}</span>
</div> </div>
<button <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">
type="button" <i class="pi pi-ellipsis-h !text-xs" />
@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> </button>
</div> </div>
</template> </template>
@ -270,8 +271,10 @@ export default {
}, },
computed: { computed: {
themeLimitReached() { themeLimitReached() {
if (this.$appState.designer.themeLimit > 0 && this.$appState.designer.themes?.length) return this.$appState.designer.themeLimit === this.$appState.designer.themes.length; return this.$appState.designer.themeLimit ? this.$appState.designer.themeLimit === this.$appState.designer.themes.length : false;
else return false; },
themeUsageRatio() {
return this.$appState.designer.themeLimit ? 100 * (this.$appState.designer.themes.length / this.$appState.designer.themeLimit) : 0;
} }
} }
}; };

2
apps/showcase/components/layout/designer/editor/DesignEditorFooter.vue
View File

@ -1,5 +1,5 @@
<template> <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="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">Apply</button>
</div> </div>

6
apps/showcase/components/layout/designer/editor/DesignTokenField.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class="group"> <div class="group">
<div class="flex justify-between justify-items-center"> <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> <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"></i></button> <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>
<div :id="id" class="relative"> <div :id="id" class="relative">
<AutoComplete <AutoComplete
@ -16,7 +16,7 @@
:showEmptyMessage="false" :showEmptyMessage="false"
:pt="{ :pt="{
pcInputText: { 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', 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', listContainer: 'max-h-40 overflow-auto',

2
apps/showcase/components/layout/designer/editor/component/DesignComponentSection.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<section> <section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0 capitalize">{{ sectionName }}</div> <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"> <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" /> <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> </template>

4
apps/showcase/components/layout/designer/editor/custom/DesignCustomTokens.vue
View File

@ -1,6 +1,6 @@
<template> <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> <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 class="flex flex-col gap-4 list-none p-0 mx-0 my-4"> <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"> <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"> <div class="flex items-center gap-4">
<label class="flex items-center gap-2 flex-auto"> <label class="flex items-center gap-2 flex-auto">

2
apps/showcase/components/layout/designer/editor/primitive/DesignBorderRadius.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<Fieldset legend="Rounded" :toggleable="true"> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$appState.designer.theme.preset.primitive.borderRadius.none" label="None" /> <DesignTokenField v-model="$appState.designer.theme.preset.primitive.borderRadius.none" label="None" />
</div> </div>

8
apps/showcase/components/layout/designer/editor/semantic/DesignFormField.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<Fieldset legend="Form Field" :toggleable="true"> <Fieldset legend="Form Field" :toggleable="true">
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Base</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$appState.designer.theme.preset.semantic.formField.paddingX" label="Padding X" /> <DesignTokenField v-model="$appState.designer.theme.preset.semantic.formField.paddingX" label="Padding X" />
</div> </div>
@ -17,7 +17,7 @@
</section> </section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Small</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$appState.designer.theme.preset.semantic.formField.sm.paddingX" label="Padding X" /> <DesignTokenField v-model="$appState.designer.theme.preset.semantic.formField.sm.paddingX" label="Padding X" />
</div> </div>
@ -31,7 +31,7 @@
</section> </section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Large</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$appState.designer.theme.preset.semantic.formField.lg.paddingX" label="Padding X" /> <DesignTokenField v-model="$appState.designer.theme.preset.semantic.formField.lg.paddingX" label="Padding X" />
</div> </div>
@ -45,7 +45,7 @@
</section> </section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Focus Ring</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$appState.designer.theme.preset.semantic.formField.focusRing.width" label="Width" /> <DesignTokenField v-model="$appState.designer.theme.preset.semantic.formField.focusRing.width" label="Width" />
</div> </div>

6
apps/showcase/components/layout/designer/editor/semantic/DesignGeneral.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<Fieldset legend="General" :toggleable="true"> <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"> <div class="flex gap-2 items-center">
<span class="text-sm">Primary</span> <span class="text-sm">Primary</span>
<input :value="$appState.designer.theme.preset.semantic.primary['500']" @input="onPrimaryColorChange($event)" type="color" /> <input :value="$appState.designer.theme.preset.semantic.primary['500']" @input="onPrimaryColorChange($event)" type="color" />
</div> </div>
<DesignColorPalette :value="$appState.designer.theme.preset.semantic.primary" /> <DesignColorPalette :value="$appState.designer.theme.preset.semantic.primary" />
</section> </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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$appState.designer.theme.preset.semantic.transitionDuration" label="Transition Duration" /> <DesignTokenField v-model="$appState.designer.theme.preset.semantic.transitionDuration" label="Transition Duration" />
</div> </div>
@ -31,7 +31,7 @@
</section> </section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Focus Ring</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$appState.designer.theme.preset.semantic.focusRing.width" label="Width" /> <DesignTokenField v-model="$appState.designer.theme.preset.semantic.focusRing.width" label="Width" />
</div> </div>

6
apps/showcase/components/layout/designer/editor/semantic/DesignList.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<Fieldset legend="List" :toggleable="true"> <Fieldset legend="List" :toggleable="true">
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Container</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$appState.designer.theme.preset.semantic.list.padding" label="Padding" /> <DesignTokenField v-model="$appState.designer.theme.preset.semantic.list.padding" label="Padding" />
</div> </div>
@ -15,7 +15,7 @@
</section> </section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Option</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$appState.designer.theme.preset.semantic.list.option.padding" label="Padding" /> <DesignTokenField v-model="$appState.designer.theme.preset.semantic.list.option.padding" label="Padding" />
</div> </div>
@ -25,7 +25,7 @@
</section> </section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Option Group</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$appState.designer.theme.preset.semantic.list.optionGroup.padding" label="Padding" /> <DesignTokenField v-model="$appState.designer.theme.preset.semantic.list.optionGroup.padding" label="Padding" />
</div> </div>

8
apps/showcase/components/layout/designer/editor/semantic/DesignNavigation.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<Fieldset legend="Navigation" :toggleable="true"> <Fieldset legend="Navigation" :toggleable="true">
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">List</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$appState.designer.theme.preset.semantic.navigation.list.padding" label="Padding" /> <DesignTokenField v-model="$appState.designer.theme.preset.semantic.navigation.list.padding" label="Padding" />
</div> </div>
@ -13,7 +13,7 @@
</section> </section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Item</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$appState.designer.theme.preset.semantic.navigation.item.padding" label="Padding" /> <DesignTokenField v-model="$appState.designer.theme.preset.semantic.navigation.item.padding" label="Padding" />
</div> </div>
@ -27,7 +27,7 @@
</section> </section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Submenu Label</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$appState.designer.theme.preset.semantic.navigation.submenuLabel.padding" label="Padding" /> <DesignTokenField v-model="$appState.designer.theme.preset.semantic.navigation.submenuLabel.padding" label="Padding" />
</div> </div>
@ -39,7 +39,7 @@
</section> </section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Submenu Icon</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$appState.designer.theme.preset.semantic.navigation.submenuIcon.size" label="Size" /> <DesignTokenField v-model="$appState.designer.theme.preset.semantic.navigation.submenuIcon.size" label="Size" />
</div> </div>

8
apps/showcase/components/layout/designer/editor/semantic/DesignOverlay.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<Fieldset legend="Overlay" :toggleable="true"> <Fieldset legend="Overlay" :toggleable="true">
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Select</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$appState.designer.theme.preset.semantic.overlay.select.borderRadius" label="Border Radius" /> <DesignTokenField v-model="$appState.designer.theme.preset.semantic.overlay.select.borderRadius" label="Border Radius" />
</div> </div>
@ -13,7 +13,7 @@
</section> </section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Popover</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$appState.designer.theme.preset.semantic.overlay.popover.borderRadius" label="Border Radius" /> <DesignTokenField v-model="$appState.designer.theme.preset.semantic.overlay.popover.borderRadius" label="Border Radius" />
</div> </div>
@ -27,7 +27,7 @@
</section> </section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Modal</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$appState.designer.theme.preset.semantic.overlay.modal.borderRadius" label="Border Radius" /> <DesignTokenField v-model="$appState.designer.theme.preset.semantic.overlay.modal.borderRadius" label="Border Radius" />
</div> </div>
@ -41,7 +41,7 @@
</section> </section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Navigation</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$appState.designer.theme.preset.semantic.overlay.navigation.shadow" label="Shadow" /> <DesignTokenField v-model="$appState.designer.theme.preset.semantic.overlay.navigation.shadow" label="Shadow" />
</div> </div>

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

@ -8,7 +8,7 @@
<DesignColorPalette :value="$colorScheme.surface" /> <DesignColorPalette :value="$colorScheme.surface" />
</section> </section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Typography</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$colorScheme.text.color" label="Text" type="color" /> <DesignTokenField v-model="$colorScheme.text.color" label="Text" type="color" />
</div> </div>
@ -22,7 +22,7 @@
<DesignTokenField v-model="$colorScheme.text.hoverMutedColor" label="Text Hover Muted" type="color" /> <DesignTokenField v-model="$colorScheme.text.hoverMutedColor" label="Text Hover Muted" type="color" />
</div> </div>
</section> </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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$colorScheme.content.background" label="Content BG" type="color" /> <DesignTokenField v-model="$colorScheme.content.background" label="Content BG" type="color" />
</div> </div>
@ -47,7 +47,7 @@
</section> </section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Accent</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$colorScheme.primary.color" label="Primary" type="color" /> <DesignTokenField v-model="$colorScheme.primary.color" label="Primary" type="color" />
</div> </div>
@ -61,7 +61,7 @@
<DesignTokenField v-model="$colorScheme.primary.activeColor" label="Primary Active" type="color" /> <DesignTokenField v-model="$colorScheme.primary.activeColor" label="Primary Active" type="color" />
</div> </div>
</section> </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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$colorScheme.highlight.background" label="Highlight BG" type="color" /> <DesignTokenField v-model="$colorScheme.highlight.background" label="Highlight BG" type="color" />
</div> </div>

4
apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSFormField.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<Fieldset legend="Form Field" :toggleable="true"> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$colorScheme.formField.background" label="BG" type="color" /> <DesignTokenField v-model="$colorScheme.formField.background" label="BG" type="color" />
</div> </div>
@ -50,7 +50,7 @@
</section> </section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Float Label</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$colorScheme.formField.floatLabelColor" label="Color" type="color" /> <DesignTokenField v-model="$colorScheme.formField.floatLabelColor" label="Color" type="color" />
</div> </div>

6
apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSList.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<Fieldset legend="List" :toggleable="true"> <Fieldset legend="List" :toggleable="true">
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Option</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$colorScheme.list.option.focusBackground" label="Focus BG" type="color" /> <DesignTokenField v-model="$colorScheme.list.option.focusBackground" label="Focus BG" type="color" />
</div> </div>
@ -25,7 +25,7 @@
</section> </section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Option Icon</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$colorScheme.list.option.icon.color" label="Color" type="color" /> <DesignTokenField v-model="$colorScheme.list.option.icon.color" label="Color" type="color" />
</div> </div>
@ -35,7 +35,7 @@
</section> </section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Option Group</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$colorScheme.list.optionGroup.background" label="BG" type="color" /> <DesignTokenField v-model="$colorScheme.list.optionGroup.background" label="BG" type="color" />
</div> </div>

8
apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSNavigation.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<Fieldset legend="Navigation" :toggleable="true"> <Fieldset legend="Navigation" :toggleable="true">
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Item</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$colorScheme.navigation.item.focusBackground" label="Focus BG" type="color" /> <DesignTokenField v-model="$colorScheme.navigation.item.focusBackground" label="Focus BG" type="color" />
</div> </div>
@ -24,7 +24,7 @@
</section> </section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Item Icon</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$colorScheme.navigation.item.icon.color" label="Color" type="color" /> <DesignTokenField v-model="$colorScheme.navigation.item.icon.color" label="Color" type="color" />
</div> </div>
@ -38,7 +38,7 @@
</section> </section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Submenu Label</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$colorScheme.navigation.submenuLabel.background" label="BG" type="color" /> <DesignTokenField v-model="$colorScheme.navigation.submenuLabel.background" label="BG" type="color" />
</div> </div>
@ -50,7 +50,7 @@
</section> </section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Submenu Icon</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$colorScheme.navigation.submenuIcon.color" label="Color" type="color" /> <DesignTokenField v-model="$colorScheme.navigation.submenuIcon.color" label="Color" type="color" />
</div> </div>

6
apps/showcase/components/layout/designer/editor/semantic/colorscheme/DesignCSOverlay.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<Fieldset legend="Overlay" :toggleable="true"> <Fieldset legend="Overlay" :toggleable="true">
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Select</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$colorScheme.overlay.select.background" label="BG" type="color" /> <DesignTokenField v-model="$colorScheme.overlay.select.background" label="BG" type="color" />
</div> </div>
@ -15,7 +15,7 @@
</section> </section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Popover</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$colorScheme.overlay.popover.background" label="BG" type="color" /> <DesignTokenField v-model="$colorScheme.overlay.popover.background" label="BG" type="color" />
</div> </div>
@ -29,7 +29,7 @@
</section> </section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Modal</div> <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"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$colorScheme.overlay.modal.background" label="BG" type="color" /> <DesignTokenField v-model="$colorScheme.overlay.modal.background" label="BG" type="color" />
</div> </div>

14
apps/showcase/components/layout/designer/editor/settings/DesignSettings.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<section class="mb-6"> <section>
<div class="text-lg font-semibold mb-4">Font</div> <div class="text-lg font-semibold mb-2">Font</div>
<div class="flex gap-4"> <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> <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"> <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> <option v-for="fontSize of fontSizes" :key="fontSize" :value="fontSize">{{ fontSize }}</option>
@ -18,15 +18,15 @@
</div> </div>
</div> </div>
</section> </section>
<section class="mb-6"> <section class="mt-6">
<div class="block text-lg font-semibold mb-2">Migration Assistant</div> <div class="block text-lg font-semibold mb-2">Migration Assistant</div>
<span class="block text-muted-color leading-6 mb-4" <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 >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. before the migration.
</span> </span>
<div class="flex justify-between"> <div class="flex justify-start gap-2">
<button type="button" @click="preview" class="btn-design-outlined">Preview</button> <button type="button" @click="preview" class="btn-design-outlined">Check for Updates</button>
<button type="button" :disabled="status !== 'preview'" @click="confirmMigration" class="btn-design">Migrate</button> <button v-if="status === 'preview' && missingTokens.length > 0" type="button" @click="confirmMigration" class="btn-design">Migrate</button>
</div> </div>
<div v-if="status === 'preview'"> <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"> <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">