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

Use a custom field to enter tokens

pull/6768/head
Cagatay Civici 2024-11-12 12:18:07 +03:00
parent ff099dfac6
commit b2b21ca9dd
16 changed files with 200 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
apps/showcase/assets/styles/layout/_designer.scss Normal file
View File

@ -0,0 +1,22 @@
.designer {
[type='color'] {
margin-top: -4px;
border: 0 none;
padding: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 28px;
height: 28px;
background-color: transparent;
border: none;
cursor: pointer;
}
[type='color']::-webkit-color-swatch {
border-radius: 4px;
width: 24px;
height: 24px;
border: 0 none;
}
}

1
apps/showcase/assets/styles/layout/layout.scss
View File

@ -5,6 +5,7 @@
@import './_core';
@import './_glow';
@import './_topbar';
@import './_designer';
@import './_sidebar';
@import './_content';
@import './_news';

6
apps/showcase/components/layout/AppDesigner.vue
View File

@ -1,5 +1,5 @@
<template>
<Drawer v-model:visible="$appState.designerActive" header="Theme Designer" position="right" class="!w-screen md:!w-[60rem]" :modal="false">
<Drawer v-model:visible="$appState.designerActive" header="Theme Designer" position="right" class="designer !w-screen md:!w-[48rem]" :modal="false">
<Tabs value="0">
<TabList>
<Tab value="0">Primitive</Tab>
@ -49,7 +49,7 @@
</AccordionPanel>
</Accordion>
</TabPanel>
<TabPanel value="2"> Component tokens are not supported by the Visual Editor at the moment. </TabPanel>
<TabPanel value="2"> <div class="p-4">Component tokens are not supported by the Visual Editor at the moment.</div></TabPanel>
</TabPanels>
</Tabs>
@ -64,7 +64,7 @@
<script>
import { updatePreset } from '@primevue/themes';
import AuraBase from '@primevue/themes/nora/base';
import AuraBase from '@primevue/themes/aura/base';
export default {
provide() {

4
apps/showcase/components/layout/designer/DesignColorPalette.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="flex border border-surface">
<div v-for="color of value" :key="color" class="w-4 h-4 sm:w-8 sm:h-8" :style="{ backgroundColor: color }" :title="color"></div>
<div class="flex border border-surface rounded-l-lg rounded-r-lg overflow-hidden">
<div v-for="color of value" :key="color" class="w-8 h-8" :style="{ backgroundColor: color }" :title="color"></div>
</div>
</template>

39
apps/showcase/components/layout/designer/DesignTokenField.vue Normal file
View File

@ -0,0 +1,39 @@
<template>
<span class="text-sm">{{ label }}</span>
<div class="relative">
<input :value="modelValue" @input="onInput" type="text" :class="['border border-surface-300 dark:border-surface-600 rounded-lg py-2 px-2 w-full', { 'pr-8': type === 'color' }]" />
<div v-if="type === 'color'" class="absolute right-[4px] top-1/2 -mt-3 w-6 h-6 rounded-md border border-surface-300 dark:border-surface-600" :style="{ backgroundColor: previewColor }"></div>
</div>
</template>
<script>
import { $dt } from '@primevue/themes';
export default {
emits: ['update:modelValue'],
props: {
label: {
type: String,
default: undefined
},
type: {
type: String,
default: undefined
},
modelValue: {
type: null,
default: undefined
}
},
methods: {
onInput(event) {
this.$emit('update:modelValue', event.target.value);
}
},
computed: {
previewColor() {
return this.modelValue && this.modelValue.startsWith('{') && this.modelValue.endsWith('}') ? $dt(this.modelValue).variable : 'transparent';
}
}
};
</script>

22
apps/showcase/components/layout/designer/primitive/DesignColors.vue
View File

@ -24,3 +24,25 @@ export default {
}
};
</script>
<style scoped>
[type='color'] {
border: 0 none;
padding: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 28px;
height: 28px;
background-color: transparent;
border: none;
cursor: pointer;
}
[type='color']::-webkit-color-swatch {
border-radius: 4px;
width: 24px;
height: 24px;
border: 0 none;
}
</style>

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

@ -3,36 +3,29 @@
<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">
<div class="flex flex-col gap-1">
<span class="text-sm">Padding X</span>
<input v-model="$preset.semantic.formField.paddingX" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.formField.paddingX" label="Padding X" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Padding Y</span>
<input v-model="$preset.semantic.formField.paddingY" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.formField.paddingY" label="Padding Y" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Border Radius</span>
<input v-model="$preset.semantic.formField.borderRadius" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.formField.borderRadius" label="Border Radius" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Transition Duration</span>
<input v-model="$preset.semantic.formField.transitionDuration" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.formField.transitionDuration" label="Transition Duration" />
</div>
</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">
<div class="flex flex-col gap-1">
<span class="text-sm">Padding X</span>
<input v-model="$preset.semantic.formField.sm.paddingX" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.formField.sm.paddingX" label="Padding X" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Padding Y</span>
<input v-model="$preset.semantic.formField.sm.paddingY" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.formField.sm.paddingY" label="Padding Y" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Font Size</span>
<input v-model="$preset.semantic.formField.sm.fontSize" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.formField.sm.fontSize" label="Font Size" />
</div>
<div></div>
</section>
@ -40,16 +33,13 @@
<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">
<div class="flex flex-col gap-1">
<span class="text-sm">Padding X</span>
<input v-model="$preset.semantic.formField.lg.paddingX" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.formField.lg.paddingX" label="Padding X" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Padding Y</span>
<input v-model="$preset.semantic.formField.lg.paddingY" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.formField.lg.paddingY" label="Padding Y" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Font Size</span>
<input v-model="$preset.semantic.formField.lg.fontSize" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.formField.lg.fontSize" label="Font Size" />
</div>
<div></div>
</section>
@ -57,20 +47,16 @@
<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">
<div class="flex flex-col gap-1">
<span class="text-sm">Width</span>
<input v-model="$preset.semantic.formField.focusRing.width" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.formField.focusRing.width" label="Width" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Style</span>
<input v-model="$preset.semantic.formField.focusRing.style" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.formField.focusRing.style" label="Style" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$preset.semantic.formField.focusRing.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.formField.focusRing.color" label="Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Offset</span>
<input v-model="$preset.semantic.formField.focusRing.offset" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.formField.focusRing.offset" label="Offset" />
</div>
</section>
</Fieldset>

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

@ -29,7 +29,7 @@
<input v-model="$preset.semantic.content.borderRadius" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Mask Transition Duration</span>
<span class="text-sm">Mask Transition Dur.</span>
<input v-model="$preset.semantic.mask.transitionDuration" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1"></div>
@ -47,8 +47,7 @@
<input v-model="$preset.semantic.focusRing.style" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$preset.semantic.focusRing.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.focusRing.color" label="Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Offset</span>

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

@ -3,16 +3,13 @@
<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">
<div class="flex flex-col gap-1">
<span class="text-sm">Padding</span>
<input v-model="$preset.semantic.list.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.list.padding" label="Padding" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Gap</span>
<input v-model="$preset.semantic.list.gap" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.list.gap" label="Gap" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Header Padding</span>
<input v-model="$preset.semantic.list.header.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.list.header.padding" label="Header Padding" />
</div>
<div class="flex flex-col gap-1"></div>
</section>
@ -20,24 +17,20 @@
<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">
<span class="text-sm">Padding</span>
<input v-model="$preset.semantic.list.option.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.list.option.padding" label="Padding" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Border Radius</span>
<input v-model="$preset.semantic.list.option.borderRadius" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.list.option.borderRadius" label="Border Radius" />
</div>
</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">
<div class="flex flex-col gap-1">
<span class="text-sm">Padding</span>
<input v-model="$preset.semantic.list.optionGroup.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.list.optionGroup.padding" label="Padding" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Font Weight</span>
<input v-model="$preset.semantic.list.optionGroup.fontWeight" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.list.optionGroup.fontWeight" label="Font Weight" />
</div>
</section>
</Fieldset>

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

@ -3,12 +3,10 @@
<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">
<div class="flex flex-col gap-1">
<span class="text-sm">Padding</span>
<input v-model="$preset.semantic.navigation.list.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.navigation.list.padding" label="Padding" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Gap</span>
<input v-model="$preset.semantic.navigation.list.gap" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.navigation.list.gap" label="Gap" />
</div>
<div class="flex flex-col gap-1"></div>
<div class="flex flex-col gap-1"></div>
@ -17,16 +15,13 @@
<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">
<span class="text-sm">Padding</span>
<input v-model="$preset.semantic.navigation.item.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.navigation.item.padding" label="Padding" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Border Radius</span>
<input v-model="$preset.semantic.navigation.item.borderRadius" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.navigation.item.borderRadius" label="Border Radius" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Gap</span>
<input v-model="$preset.semantic.navigation.item.gap" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.navigation.item.gap" label="Gap" />
</div>
<div class="flex flex-col gap-1"></div>
</section>
@ -34,12 +29,10 @@
<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">
<div class="flex flex-col gap-1">
<span class="text-sm">Padding</span>
<input v-model="$preset.semantic.navigation.submenuLabel.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.navigation.submenuLabel.padding" label="Padding" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Font Weight</span>
<input v-model="$preset.semantic.navigation.submenuLabel.fontWeight" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.navigation.submenuLabel.fontWeight" label="Font Weight" />
</div>
<div class="flex flex-col gap-1"></div>
<div class="flex flex-col gap-1"></div>
@ -48,8 +41,7 @@
<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">
<div class="flex flex-col gap-1">
<span class="text-sm">Size</span>
<input v-model="$preset.semantic.navigation.submenuIcon.size" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.navigation.submenuIcon.size" label="Size" />
</div>
<div class="flex flex-col gap-1"></div>
<div class="flex flex-col gap-1"></div>

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

@ -3,12 +3,10 @@
<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">
<span class="text-sm">Border Radius</span>
<input v-model="$preset.semantic.overlay.select.borderRadius" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.overlay.select.borderRadius" label="Border Radius" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Shadow</span>
<input v-model="$preset.semantic.overlay.select.shadow" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.overlay.select.shadow" label="Shadow" />
</div>
<div class="flex flex-col gap-1"></div>
<div class="flex flex-col gap-1"></div>
@ -17,16 +15,13 @@
<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">
<div class="flex flex-col gap-1">
<span class="text-sm">Border Radius</span>
<input v-model="$preset.semantic.overlay.popover.borderRadius" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.overlay.popover.borderRadius" label="Border Radius" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Padding</span>
<input v-model="$preset.semantic.overlay.popover.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.overlay.popover.padding" label="Padding" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Shadow</span>
<input v-model="$preset.semantic.overlay.popover.shadow" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.overlay.popover.shadow" label="Shadow" />
</div>
<div class="flex flex-col gap-1"></div>
</section>
@ -34,16 +29,13 @@
<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">
<div class="flex flex-col gap-1">
<span class="text-sm">Border Radius</span>
<input v-model="$preset.semantic.overlay.modal.borderRadius" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.overlay.modal.borderRadius" label="Border Radius" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Padding</span>
<input v-model="$preset.semantic.overlay.modal.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.overlay.modal.padding" label="Padding" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Shadow</span>
<input v-model="$preset.semantic.overlay.modal.shadow" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.overlay.modal.shadow" label="Shadow" />
</div>
<div class="flex flex-col gap-1"></div>
</section>
@ -51,8 +43,7 @@
<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">
<div class="flex flex-col gap-1">
<span class="text-sm">Shadow</span>
<input v-model="$preset.semantic.overlay.navigation.shadow" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$preset.semantic.overlay.navigation.shadow" label="Shadow" />
</div>
<div class="flex flex-col gap-1"></div>
<div class="flex flex-col gap-1"></div>

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

@ -10,88 +10,69 @@
<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">
<div class="flex flex-col gap-1">
<span class="text-sm">Text Color</span>
<input v-model="$colorScheme.text.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.text.color" label="Text" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Text Hover Color</span>
<input v-model="$colorScheme.text.hoverColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.text.hoverColor" label="Text Hover" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Text Muted Color</span>
<input v-model="$colorScheme.text.mutedColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.text.mutedColor" label="Text Muted" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Text Hover Muted Color</span>
<input v-model="$colorScheme.text.hoverMutedColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.text.hoverMutedColor" label="Text Hover Muted" type="color" />
</div>
</section>
<section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Content Background</span>
<input v-model="$colorScheme.content.background" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.content.background" label="Content BG" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Content Hover Background</span>
<input v-model="$colorScheme.content.hoverBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.content.hoverBackground" label="Content Hover BG" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Content Border Color</span>
<input v-model="$colorScheme.content.borderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.content.borderColor" label="Content Border Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Content Color</span>
<input v-model="$colorScheme.content.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.content.color" label="Content Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Content Hover Color</span>
<input v-model="$colorScheme.content.hoverColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.content.hoverColor" label="Content Hover Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Mask Background</span>
<input v-model="$colorScheme.mask.background" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.mask.background" label="Mask BG" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Mask Color</span>
<input v-model="$colorScheme.mask.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.mask.color" label="Mask Color" type="color" />
</div>
</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">
<div class="flex flex-col gap-1">
<span class="text-sm">Primary</span>
<input v-model="$colorScheme.primary.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.primary.color" label="Primary" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Primary Contrast</span>
<input v-model="$colorScheme.primary.contrastColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.primary.contrastColor" label="Primary Contrast" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Primary Hover</span>
<input v-model="$colorScheme.primary.hoverColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.primary.hoverColor" label="Primary Hover" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Primary Active</span>
<input v-model="$colorScheme.primary.activeColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.primary.activeColor" label="Primary Active" type="color" />
</div>
</section>
<section class="grid grid-cols-4 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Highlight Background</span>
<input v-model="$colorScheme.highlight.background" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.highlight.background" label="Highlight BG" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Highlight Color</span>
<input v-model="$colorScheme.highlight.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.highlight.color" label="Highlight Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Highlight Focus Background</span>
<input v-model="$colorScheme.highlight.focusBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.highlight.focusBackground" label="Highlight Focus BG" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Highlight Focus Color</span>
<input v-model="$colorScheme.highlight.focusColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.highlight.focusColor" label="Highlight Focus Color" type="color" />
</div>
</section>
</Fieldset>
@ -104,7 +85,7 @@ export default {
inject: ['$colorScheme'],
methods: {
onSurfaceColorChange(event) {
this.$colorScheme.surface = { ...{ 0: 'ffffff' }, ...palette(event.target.value) };
this.$colorScheme.surface = { ...{ 0: '#ffffff' }, ...palette(event.target.value) };
}
}
};

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

@ -2,64 +2,49 @@
<Fieldset legend="Form Field" :toggleable="true" class="mb-3">
<section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Background</span>
<input v-model="$colorScheme.formField.background" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.formField.background" label="BG" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$colorScheme.formField.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.formField.color" label="Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Icon Color</span>
<input v-model="$colorScheme.formField.iconColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.formField.iconColor" label="Icon Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Shadow</span>
<input v-model="$colorScheme.formField.shadow" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.formField.shadow" label="Shadow" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Border Color</span>
<input v-model="$colorScheme.formField.borderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.formField.borderColor" label="Border Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Hover Border Color</span>
<input v-model="$colorScheme.formField.hoverBorderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.formField.hoverBorderColor" label="Hover Border Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Focus Border Color</span>
<input v-model="$colorScheme.formField.focusBorderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.formField.focusBorderColor" label="Focus Border Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Invalid Border Color</span>
<input v-model="$colorScheme.formField.invalidBorderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.formField.invalidBorderColor" label="Invalid Border Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Disabled Background</span>
<input v-model="$colorScheme.formField.disabledBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.formField.disabledBackground" label="Disabled BG" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Disabled Color</span>
<input v-model="$colorScheme.formField.disabledColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.formField.disabledColor" label="Disabled Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Placeholder Color</span>
<input v-model="$colorScheme.formField.placeholderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.formField.placeholderColor" label="Placeholder" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Invalid Placeholder Color</span>
<input v-model="$colorScheme.formField.invalidPlaceholderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.formField.invalidPlaceholderColor" label="Invalid Placeholder" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Filled Background</span>
<input v-model="$colorScheme.formField.filledBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.formField.filledBackground" label="Filled BG" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Filled Hover Background</span>
<input v-model="$colorScheme.formField.filledHoverBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.formField.filledHoverBackground" label="Filled Hover BG" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Filled Focus Background</span>
<input v-model="$colorScheme.formField.filledFocusBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.formField.filledFocusBackground" label="Filled Focus BG" type="color" />
</div>
<div class="flex flex-col gap-1"></div>
</section>
@ -67,20 +52,16 @@
<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">
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$colorScheme.formField.floatLabelColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.formField.floatLabelColor" label="Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Focus Color</span>
<input v-model="$colorScheme.formField.floatLabelFocusColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.formField.floatLabelFocusColor" label="Focus Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Active Color</span>
<input v-model="$colorScheme.formField.floatLabelActiveColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.formField.floatLabelActiveColor" label="Active Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Invalid Color</span>
<input v-model="$colorScheme.formField.floatLabelInvalidColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.formField.floatLabelInvalidColor" label="Invalid Color" type="color" />
</div>
</section>
</Fieldset>

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

@ -3,29 +3,23 @@
<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">
<span class="text-sm">Focus Background</span>
<input v-model="$colorScheme.list.option.focusBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.list.option.focusBackground" label="Focus BG" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Selected Background</span>
<input v-model="$colorScheme.list.option.selectedBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.list.option.selectedBackground" label="Selected BG" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Selected Focus Background</span>
<input v-model="$colorScheme.list.option.selectedFocusBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.list.option.selectedFocusBackground" label="Selected Focus BG" type="color" />
</div>
<div class="flex flex-col gap-1"></div>
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$colorScheme.list.option.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.list.option.color" label="Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Selected Color</span>
<input v-model="$colorScheme.list.option.selectedColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.list.option.selectedColor" label="Selected Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Selected Focus Color</span>
<input v-model="$colorScheme.list.option.selectedFocusColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.list.option.selectedFocusColor" label="Selected Focus Colo" type="color" />
</div>
<div class="flex flex-col gap-1"></div>
</section>
@ -33,24 +27,20 @@
<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">
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$colorScheme.list.option.icon.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.list.option.icon.color" label="Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Focus Color</span>
<input v-model="$colorScheme.list.option.icon.focusColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.list.option.icon.focusColor" label="Focus Color" type="color" />
</div>
</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">
<div class="flex flex-col gap-1">
<span class="text-sm">Background</span>
<input v-model="$colorScheme.list.optionGroup.background" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.list.optionGroup.background" label="BG" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$colorScheme.list.optionGroup.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.list.optionGroup.color" label="Color" type="color" />
</div>
<div class="flex flex-col gap-1"></div>
<div class="flex flex-col gap-1"></div>

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

@ -3,27 +3,22 @@
<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">
<span class="text-sm">Focus Background</span>
<input v-model="$colorScheme.navigation.item.focusBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.navigation.item.focusBackground" label="Focus BG" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Acitve Background</span>
<input v-model="$colorScheme.navigation.item.focusBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.navigation.item.focusBackground" label="Active BG" type="color" />
</div>
<div class="flex flex-col gap-1"></div>
<div class="flex flex-col gap-1"></div>
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$colorScheme.navigation.item.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.navigation.item.color" label="Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Focus Color</span>
<input v-model="$colorScheme.navigation.item.focusColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.navigation.item.focusColor" label="Focus Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Active Color</span>
<input v-model="$colorScheme.navigation.item.activeColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.navigation.item.activeColor" label="Active Color" type="color" />
</div>
<div class="flex flex-col gap-1"></div>
</section>
@ -31,16 +26,13 @@
<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">
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$colorScheme.navigation.item.icon.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.navigation.item.icon.color" label="Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Focus Color</span>
<input v-model="$colorScheme.navigation.item.icon.focusColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.navigation.item.icon.focusColor" label="Focus Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Active Color</span>
<input v-model="$colorScheme.navigation.item.icon.activeColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.navigation.item.icon.activeColor" label="Active Color" type="color" />
</div>
<div class="flex flex-col gap-1"></div>
</section>
@ -48,12 +40,10 @@
<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">
<div class="flex flex-col gap-1">
<span class="text-sm">Background</span>
<input v-model="$colorScheme.navigation.submenuLabel.background" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.navigation.submenuLabel.background" label="BG" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$colorScheme.navigation.submenuLabel.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.navigation.submenuLabel.color" label="Color" type="color" />
</div>
<div class="flex flex-col gap-1"></div>
<div class="flex flex-col gap-1"></div>
@ -62,16 +52,13 @@
<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">
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$colorScheme.navigation.submenuIcon.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.navigation.submenuIcon.color" label="Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Focus Color</span>
<input v-model="$colorScheme.navigation.submenuIcon.focusColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.navigation.submenuIcon.focusColor" label="Focus Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Active Color</span>
<input v-model="$colorScheme.navigation.submenuIcon.activeColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.navigation.submenuIcon.activeColor" label="Active Color" type="color" />
</div>
<div class="flex flex-col gap-1"></div>
</section>

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

@ -3,16 +3,13 @@
<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">
<span class="text-sm">Background</span>
<input v-model="$colorScheme.overlay.select.background" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.overlay.select.background" label="BG" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Border Color</span>
<input v-model="$colorScheme.overlay.select.borderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.overlay.select.borderColor" label="Border Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$colorScheme.overlay.select.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.overlay.select.color" label="Color" type="color" />
</div>
<div class="flex flex-col gap-1"></div>
</section>
@ -20,16 +17,13 @@
<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">
<div class="flex flex-col gap-1">
<span class="text-sm">Background</span>
<input v-model="$colorScheme.overlay.popover.background" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.overlay.popover.background" label="BG" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Border Color</span>
<input v-model="$colorScheme.overlay.popover.borderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.overlay.popover.borderColor" label="Border Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$colorScheme.overlay.popover.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.overlay.popover.color" label="Color" type="color" />
</div>
<div class="flex flex-col gap-1"></div>
</section>
@ -37,16 +31,13 @@
<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">
<div class="flex flex-col gap-1">
<span class="text-sm">Background</span>
<input v-model="$colorScheme.overlay.modal.background" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.overlay.modal.background" label="BG" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Border Color</span>
<input v-model="$colorScheme.overlay.modal.borderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.overlay.modal.borderColor" label="Border Color" type="color" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$colorScheme.overlay.modal.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
<DesignTokenField v-model="$colorScheme.overlay.modal.color" label="Color" type="color" />
</div>
<div class="flex flex-col gap-1"></div>
</section>