Yugonito
b6185cd127
- tokens.css : échelles fait-cyan (#16D5FF) et fait-gray (#545454) en oklch, statuts - theme.css : variables sémantiques shadcn light/dark mappées sur les primitifs - demo : page de validation de la direction visuelle Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
29 lines
1.2 KiB
Markdown
29 lines
1.2 KiB
Markdown
# @forgetaboutit/ui
|
|
|
|
Design system Forget About IT — tokens de marque et thème sémantique pour les applications Tailwind v4 + shadcn/ui (fait-customers, leguidepourve, …).
|
|
|
|
## Contenu
|
|
|
|
- `src/tokens.css` — tokens primitifs : échelles `fait-cyan` (cyan logo `#16D5FF`) et `fait-gray` (anthracite logo `#545454`), couleurs de statut. Expose les utilitaires Tailwind (`bg-fait-cyan-400`, `text-fait-gray-200`, …).
|
|
- `src/theme.css` — thème sémantique compatible shadcn/ui (`--background`, `--primary`, `--sidebar`, …) en light et dark. Direction : **dark tech + cyan** (dark = thème de référence).
|
|
|
|
## Usage
|
|
|
|
Installer depuis le repo git :
|
|
|
|
```bash
|
|
npm install git+https://git.fabout.it/hcloez/forgetaboutit-ui.git
|
|
```
|
|
|
|
Puis dans le `globals.css` de l'app :
|
|
|
|
```css
|
|
@import "tailwindcss";
|
|
@import "@forgetaboutit/ui/theme.css"; /* importe aussi tokens.css */
|
|
```
|
|
|
|
Les composants shadcn consomment automatiquement les variables sémantiques. Règles d'usage dans les apps :
|
|
|
|
- Toujours les tokens sémantiques (`text-foreground`, `bg-card`, `border-border`) — jamais de couleur hardcodée (`text-zinc-400`, `bg-[#16D5FF]`).
|
|
- Les primitifs `fait-*` sont réservés aux cas où le sémantique ne suffit pas (illustrations, dégradés, marketing).
|