Yvv
5ec6474b37
- extends ../yvv-nuxt-base dans nuxt.config.ts - application DOM (vars --color-*, palette-light/dark, color-scheme) via useMood(vars) + lightDarkClasses - storageKey 'palette' et défaut 'ete' conservés — zéro migration utilisateur - couleurs et API du store inchangées (currentPalette, colors, setPalette, applyToDOM) - vérifié Playwright : 4 palettes × desktop/mobile au reload + switch à chaud via PaletteSelector, zéro erreur console, prod :3099 → 200 - CONTRIBUTING.md : mécanique déléguée documentée + blocant distribution layer Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
127 lines
3.9 KiB
TypeScript
127 lines
3.9 KiB
TypeScript
export type PaletteName = 'automne' | 'hiver' | 'printemps' | 'ete'
|
|
|
|
interface PaletteColors {
|
|
primary: string
|
|
accent: string
|
|
surface: string
|
|
bg: string
|
|
surfaceLight: string
|
|
text: string
|
|
textMuted: string
|
|
isLight: boolean
|
|
label: string
|
|
icon: string
|
|
}
|
|
|
|
const palettes: Record<PaletteName, PaletteColors> = {
|
|
// ══════ DARK THEMES ══════
|
|
|
|
// Automne : cuivre chaud, feuilles mortes, terre brûlée
|
|
automne: {
|
|
primary: '18 80% 45%', // cuivre profond
|
|
accent: '32 85% 50%', // ambre doré
|
|
surface: '20 10% 12%', // écorce
|
|
bg: '20 10% 7%', // terre sombre
|
|
surfaceLight: '20 8% 17%', // bois fumé
|
|
text: '0 0% 100%',
|
|
textMuted: '0 0% 65%',
|
|
isLight: false,
|
|
label: 'Automne',
|
|
icon: 'i-lucide-leaf',
|
|
},
|
|
|
|
// Hiver : bleu nuit, givre, argent lunaire
|
|
hiver: {
|
|
primary: '215 55% 52%', // bleu nuit étoilé
|
|
accent: '195 40% 65%', // givre argenté
|
|
surface: '222 14% 13%', // ciel de minuit
|
|
bg: '225 16% 8%', // nuit polaire
|
|
surfaceLight: '220 12% 18%', // brume nocturne
|
|
text: '0 0% 100%',
|
|
textMuted: '210 10% 65%',
|
|
isLight: false,
|
|
label: 'Hiver',
|
|
icon: 'i-lucide-snowflake',
|
|
},
|
|
|
|
// ══════ LIGHT THEMES ══════
|
|
|
|
// Printemps : vert soutenu, magenta chaud, lumière vivante
|
|
printemps: {
|
|
primary: '152 80% 24%', // vert émeraude sombre
|
|
accent: '338 88% 45%', // magenta profond
|
|
surface: '145 25% 85%', // prairie franche
|
|
bg: '140 28% 90%', // vert lumineux franc
|
|
surfaceLight: '148 22% 77%', // feuillage vif
|
|
text: '155 50% 6%', // encre noire-verte
|
|
textMuted: '150 22% 28%', // sous-bois dense
|
|
isLight: true,
|
|
label: 'Printemps',
|
|
icon: 'i-lucide-flower-2',
|
|
},
|
|
|
|
// Été : orange brûlant, corail profond, chaleur méditerranéenne
|
|
ete: {
|
|
primary: '18 90% 44%', // terre cuite brûlante
|
|
accent: '355 78% 50%', // corail ardent
|
|
surface: '32 40% 85%', // ocre clair
|
|
bg: '35 42% 90%', // chaleur dorée
|
|
surfaceLight: '30 32% 78%', // argile chaude
|
|
text: '20 45% 8%', // brun profond
|
|
textMuted: '22 22% 30%', // ombre terracotta
|
|
isLight: true,
|
|
label: 'Été',
|
|
icon: 'i-lucide-sun',
|
|
},
|
|
}
|
|
|
|
// Chaque palette devient un "mood" du layer @yvv/nuxt-base : les couleurs
|
|
// (identité du projet) sont injectées en variables CSS --color-*, et les classes
|
|
// .palette-light / .palette-dark + color-scheme sont gérées par le mécanisme partagé.
|
|
const paletteMoods = (Object.entries(palettes) as [PaletteName, PaletteColors][]).map(
|
|
([id, c]) => ({
|
|
id,
|
|
isDark: !c.isLight,
|
|
vars: {
|
|
'--color-primary': c.primary,
|
|
'--color-accent': c.accent,
|
|
'--color-surface': c.surface,
|
|
'--color-bg': c.bg,
|
|
'--color-surface-light': c.surfaceLight,
|
|
'--color-text': c.text,
|
|
'--color-text-muted': c.textMuted,
|
|
},
|
|
}),
|
|
)
|
|
|
|
export const usePaletteStore = defineStore('palette', () => {
|
|
// Application DOM + persistance + light/dark déléguées au layer partagé.
|
|
// storageKey 'palette' conservé pour ne pas perdre les préférences existantes.
|
|
const { currentMood, setMood, initMood } = useMood(paletteMoods, {
|
|
storageKey: 'palette',
|
|
defaultId: 'ete',
|
|
syncColorMode: false, // librodrome n'utilise pas @nuxtjs/color-mode
|
|
lightDarkClasses: true,
|
|
})
|
|
|
|
const currentPalette = computed<PaletteName>(() => (currentMood.value as PaletteName) || 'ete')
|
|
const colors = computed(() => palettes[currentPalette.value])
|
|
const isLight = computed(() => colors.value.isLight)
|
|
|
|
// Init depuis localStorage (SSR-safe : no-op côté serveur).
|
|
const applyToDOM = () => initMood()
|
|
|
|
function setPalette(name: PaletteName) {
|
|
setMood(name)
|
|
}
|
|
|
|
return {
|
|
currentPalette,
|
|
colors,
|
|
palettes,
|
|
isLight,
|
|
setPalette,
|
|
applyToDOM,
|
|
}
|
|
})
|