YvvandClaude Fable 5
b1c6a2f280
- darkClass: bascule une classe unique sur <html> selon isDark
(variants dark: UnoCSS/Tailwind — besoin GrateWizard)
- setMood(id, { persist: false }): application éphémère (embed, prefers-color-scheme)
- initMood ne persiste plus le défaut, seulement un choix déjà stocké
- README: section GrateWizard + avertissement distribution (extends relatif
hors repo = build Docker/CI cassé, à trancher avant merge)
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
69 lines
3.9 KiB
Markdown
69 lines
3.9 KiB
Markdown
# @yvv/nuxt-base
|
|
|
|
Nuxt layer partagé pour les projets Nuxt Yvv (librodrome, GrateWizard, libreDecision, SejeteralO).
|
|
Fournit le **mécanisme** commun, jamais les couleurs (chaque projet garde son identité).
|
|
|
|
## Contenu
|
|
|
|
- `app/composables/useMood.ts` — mécanisme d'ambiances/palettes (extrait de libreDecision, généralisé).
|
|
Supporte les 2 patterns existants sans réécrire le CSS d'un projet :
|
|
- **classes `.mood-<id>`** + variables `--mood-*` définies en CSS (style libreDecision) ;
|
|
- **variables CSS injectées en JS** via `MoodDef.vars` (style librodrome `--color-*`) ;
|
|
- option `lightDarkClasses` pour basculer aussi `.palette-light/.palette-dark` ;
|
|
- option `darkClass: 'dark'` pour basculer une classe unique selon `isDark`
|
|
(variants `dark:` UnoCSS/Tailwind — style GrateWizard) ;
|
|
- `setMood(id, { persist: false })` pour une application éphémère
|
|
(thème imposé en mode embed, suivi de `prefers-color-scheme`) ;
|
|
- `initMood()` ne persiste que si un choix était déjà stocké.
|
|
|
|
## Adoption (à faire AVEC vérif visuelle mobile + desktop — zéro régression)
|
|
|
|
Dans `nuxt.config.ts` du projet :
|
|
|
|
```ts
|
|
export default defineNuxtConfig({
|
|
extends: ['../yvv-nuxt-base'], // chemin relatif depuis la racine frontend du projet
|
|
})
|
|
```
|
|
|
|
`useMood` devient auto-importé. Puis, par projet :
|
|
|
|
### libreDecision (risque quasi nul — c'est le mécanisme canonique)
|
|
Remplacer le corps de `frontend/app/composables/useMood.ts` par un appel au layer :
|
|
```ts
|
|
// frontend/app/composables/useMood.ts
|
|
const moods = [
|
|
{ id: 'peps', label: 'Peps', description: 'Chaud et tonique', icon: 'i-lucide-sun', color: '#d44a10', isDark: false },
|
|
{ id: 'zen', label: 'Zen', description: 'Nature vivante', icon: 'i-lucide-leaf', color: '#2e8b48', isDark: false },
|
|
{ id: 'chagrine', label: 'Chagrine', description: 'Nuit profonde', icon: 'i-lucide-moon', color: '#6488d8', isDark: true },
|
|
{ id: 'grave', label: 'Grave', description: 'Ambre mineral', icon: 'i-lucide-shield', color: '#d8a030', isDark: true },
|
|
]
|
|
export const useLibreMood = () => useMood(moods, { storageKey: 'libredecision_mood', defaultId: 'peps' })
|
|
```
|
|
`moods.css` (les couleurs) reste inchangé. Vérifier le switch des 4 moods + persistance.
|
|
|
|
### librodrome (via l'option vars — le CSS `--color-*` reste inchangé)
|
|
Convertir `stores/palette.ts` pour déléguer l'application DOM à `useMood`, en passant les triplets HSL dans `vars` (`--color-primary`, etc.) et `lightDarkClasses: true`. Le store peut rester pour l'API publique, mais l'application au DOM passe par le mécanisme partagé. Vérifier les 4 saisons + light/dark.
|
|
|
|
### GrateWizard (dark/light seulement, contraintes embed)
|
|
Deux moods `light`/`dark` avec `darkClass: 'dark'` (variants UnoCSS) et
|
|
`syncColorMode: false`. `useDarkMode` reste l'API publique et garde sa logique
|
|
de décision : thème imposé par `?theme=` en embed (`setMood(id, { persist: false })`
|
|
— ne jamais écraser la préférence standalone, même origine), migration du
|
|
stockage legacy `'true'/'false'` → `'dark'/'light'`, suivi de
|
|
`prefers-color-scheme` tant qu'aucun choix explicite n'est stocké.
|
|
Vérifier : toggle + persistance standalone, embed `?theme=light` non persisté, sceau.
|
|
|
|
### SejeteralO
|
|
Adopter en dernier (pas d'UnoCSS, vue-router 5), prudemment.
|
|
|
|
## ⚠️ Distribution — à régler AVANT tout merge/push des adoptions
|
|
Les `extends` relatifs (`../yvv-nuxt-base`) pointent HORS des repos consommateurs :
|
|
les builds Docker (`COPY . .`) et la CI échoueront. Options à trancher :
|
|
repo distant + dépendance git, `git subtree` vendoré par projet, ou contexte
|
|
Docker élargi. En dev local, rien à faire.
|
|
|
|
## Principe
|
|
|
|
Ce layer unifie la **logique** (application DOM, persistance, SSR-guard, color-mode), pas le **contrat CSS**. Migrer le contrat CSS (renommer `--color-*` → `--mood-*`) est une étape séparée, optionnelle, à faire sous contrôle visuel.
|