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

New color palette logic

pull/7277/head
Cagatay Civici 2025-02-18 19:46:43 +03:00
parent 3b00f66917
commit f4e1ba7241
6 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -53,7 +53,7 @@ export default {
activateTheme: this.activateTheme,
applyTheme: this.applyTheme,
applyFont: this.applyFont,
replaceColorPalette: this.replaceColorPalette
resolveColor: this.resolveColor
}
};
},
@ -207,11 +207,6 @@ export default {
// silent fail as some fonts may have not all the font weights
}
},
replaceColorPalette() {
this.$appState.designer.theme.preset.semantic.primary = this.$appState.designer.theme.preset.primitive.emerald;
this.$appState.designer.theme.preset.semantic.colorScheme.light.surface = { ...{ 0: '#ffffff' }, ...this.$appState.designer.theme.preset.primitive.slate };
this.$appState.designer.theme.preset.semantic.colorScheme.dark.surface = { ...{ 0: '#ffffff' }, ...this.$appState.designer.theme.preset.primitive.zinc };
},
toggleDarkMode() {
EventBus.emit('dark-mode-toggle', { dark: !this.$appState.darkTheme });
},
@ -240,6 +235,14 @@ export default {
}
return null;
},
resolveColor(token) {
if (token.startsWith('{') && token.endsWith('}')) {
let cssVariable = $dt(token).variable.slice(4, -1);
return getComputedStyle(document.documentElement).getPropertyValue(cssVariable);
} else {
return token;
}
}
},
computed: {

1
apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
View File

@ -210,7 +210,6 @@ export default {
this.designerService.applyFont('Inter var');
document.documentElement.style.fontSize = '14px';
this.designerService.replaceColorPalette();
usePreset(preset);
this.designerService.refreshACTokens();

3
apps/showcase/components/layout/designer/editor/DesignColorPalette.vue
View File

@ -1,11 +1,12 @@
<template>
<div class="flex flex-1 border border-surface rounded-l-lg rounded-r-lg overflow-hidden">
<div v-for="color of value" :key="color" class="flex-1 h-8" :style="{ backgroundColor: color }" :title="color"></div>
<div v-for="color of value" :key="color" class="flex-1 h-8" :style="{ backgroundColor: designerService.resolveColor(color) }" :title="color"></div>
</div>
</template>
<script>
export default {
inject: ['designerService'],
props: {
value: {
type: Object,

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

@ -4,7 +4,7 @@
<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="$appState.designer.theme.preset.primitive[key]['500']" @input="onColorChange($event, key)" type="color" />
<input :value="designerService.resolveColor($appState.designer.theme.preset.primitive[key]['500'])" @input="onColorChange($event, key)" type="color" />
</div>
<DesignColorPalette :value="$appState.designer.theme.preset.primitive[key]" />
</section>
@ -16,6 +16,7 @@
import { palette } from '@primeuix/themes';
export default {
inject: ['designerService'],
methods: {
onColorChange(event, color) {
this.$appState.designer.theme.preset.primitive[color] = palette(event.target.value);

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

@ -3,7 +3,7 @@
<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="$appState.designer.theme.preset.semantic.primary['500']" @input="onPrimaryColorChange($event)" type="color" />
<input :value="designerService.resolveColor($appState.designer.theme.preset.semantic.primary['500'])" @input="onPrimaryColorChange($event)" type="color" class="w-0 h-0" />
</div>
<DesignColorPalette :value="$appState.designer.theme.preset.semantic.primary" />
</section>
@ -52,6 +52,7 @@
import { palette } from '@primeuix/themes';
export default {
inject: ['designerService'],
methods: {
onPrimaryColorChange(event) {
this.$appState.designer.theme.preset.semantic.primary = palette(event.target.value);

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

@ -3,7 +3,7 @@
<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="$colorScheme.surface['500']" @input="onSurfaceColorChange($event)" type="color" />
<input :value="designerService.resolveColor($colorScheme.surface['500'])" @input="onSurfaceColorChange($event)" type="color" />
</div>
<DesignColorPalette :value="$colorScheme.surface" />
</section>
@ -82,7 +82,7 @@
import { palette } from '@primeuix/themes';
export default {
inject: ['$colorScheme'],
inject: ['$colorScheme', 'designerService'],
methods: {
onSurfaceColorChange(event) {
this.$colorScheme.surface = { ...{ 0: '#ffffff' }, ...palette(event.target.value) };