9caf11c8ab
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
- Structure par section : /numerique, /economique, /citoyenne (plus de /gestation) - Chaque section a index + sous-pages avec contenu YAML administrable - API content supporte les chemins imbriqués ([...path]) - Admin : liste des pages + éditeur par section - Page /economique : monnaie libre (picto Ğ1), modèle éco, productions collectives, commande livre - Page /citoyenne : decision (CTA Glibredecision), tarifs-eau (CTA SejeteralO) - BookActions : composant partagé (player, PDF, chapitres, commande) sur home, eco et modele-eco - GrateWizard remonté dans la section économique de la home - Palette été par défaut, choix persisté en localStorage - Fix lisibilité été (text-white/65 + variables CSS) - Shadoks thématiques sur toutes les pages (8-10 par page, métiers variés) - Redirections 301 : /gestation/*, /modele-eco/*, /decision, /lire/* - README, CONTRIBUTING, CLAUDE.md mis à jour Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
119 lines
3.6 KiB
TypeScript
119 lines
3.6 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',
|
|
},
|
|
}
|
|
|
|
export const usePaletteStore = defineStore('palette', () => {
|
|
const currentPalette = ref<PaletteName>(
|
|
(import.meta.client && localStorage.getItem('palette') as PaletteName) || 'ete',
|
|
)
|
|
|
|
const colors = computed(() => palettes[currentPalette.value])
|
|
const isLight = computed(() => colors.value.isLight)
|
|
|
|
function applyToDOM() {
|
|
if (!import.meta.client) return
|
|
const c = colors.value
|
|
const root = document.documentElement
|
|
const s = root.style
|
|
s.setProperty('--color-primary', c.primary)
|
|
s.setProperty('--color-accent', c.accent)
|
|
s.setProperty('--color-surface', c.surface)
|
|
s.setProperty('--color-bg', c.bg)
|
|
s.setProperty('--color-surface-light', c.surfaceLight)
|
|
s.setProperty('--color-text', c.text)
|
|
s.setProperty('--color-text-muted', c.textMuted)
|
|
// Toggle light/dark class for CSS overrides
|
|
root.classList.toggle('palette-light', c.isLight)
|
|
root.classList.toggle('palette-dark', !c.isLight)
|
|
s.setProperty('color-scheme', c.isLight ? 'light' : 'dark')
|
|
}
|
|
|
|
function setPalette(name: PaletteName) {
|
|
currentPalette.value = name
|
|
if (import.meta.client) localStorage.setItem('palette', name)
|
|
applyToDOM()
|
|
}
|
|
|
|
return {
|
|
currentPalette,
|
|
colors,
|
|
palettes,
|
|
isLight,
|
|
setPalette,
|
|
applyToDOM,
|
|
}
|
|
})
|