skcr-design-tokens 1.0.0

package/README.md

@@ -0,0 +1,122 @@
+# skcr-design-tokens
+
+Le design system SkillCorner, en CSS pur et sans dépendance : tokens de couleur,
+utilitaires typographiques et classes de composants. Source unique pour orion et
+gaffer, et contrat de rendu de la librairie de composants `skcr-autechre`.
+
+Aucune dépendance, aucun build : le paquet publie les fichiers `.css` tels quels.
+Il est donc consommable par n'importe quel front — Angular, React ou vanilla.
+
+## Installation
+
+```bash
+npm install skcr-design-tokens
+```
+
+Dans le `styles.css` (ou `styles.scss`) de l'application :
+
+```css
+@import 'tailwindcss';
+@import 'skcr-design-tokens/tokens.css';
+@import 'skcr-design-tokens/utilities.css';
+@import 'skcr-design-tokens/components.css';
+```
+
+## Applications qui consomment skcr-autechre
+
+Tailwind ne scanne pas `node_modules`. Les classes que les composants de la
+librairie écrivent dans leurs templates ne seraient donc jamais générées, et les
+styles manqueraient sans qu'aucune erreur ne le signale. Une ligne suffit :
+
+```css
+@source '../node_modules/skcr-autechre/fesm2022/*.mjs';
+```
+
+Le chemin vise le JavaScript **construit**, où ng-packagr a inliné les templates :
+c'est là que les classes se trouvent dans le paquet publié.
+
+## Thème clair / sombre
+
+L'attribut se pose sur `<html>`, **jamais sur `<body>`**. Tailwind émet le bloc
+`@theme` dans `:root`, c'est-à-dire sur `<html>` ; or une custom property est
+substituée à l'élément où elle est déclarée. Une surcharge posée sur `<body>`
+serait invisible pour les utilitaires, qui hériteraient d'une valeur déjà
+résolue avec la palette claire — les couleurs écrites à la main basculeraient,
+les classes Tailwind non.
+
+Pour éviter tout scintillement au chargement, l'attribut doit être posé **avant
+la première peinture**. Aucun mécanisme applicatif ne peut le faire : un
+initialiseur Angular s'exécute après le premier rendu. Coller ce script dans
+`index.html`, dans le `<head>` :
+
+```html
+<script>
+  try {
+    document.documentElement.dataset.theme = localStorage.getItem('skcr-theme') || 'light';
+  } catch {
+    document.documentElement.dataset.theme = 'light';
+  }
+</script>
+```
+
+Les applications Angular utilisent ensuite le `ThemeService` de `skcr-autechre`
+pour la bascule et la synchronisation entre onglets. Il ne fait pas
+l'initialisation : le script ci-dessus l'a déjà faite.
+
+## Contenu
+
+| Entrée | Contenu |
+| --- | --- |
+| `tokens.css` | Bloc `@theme` : couleurs primaires, neutres, de statut, de dataviz, et familles de polices |
+| `utilities.css` | `text-body-*`, `text-caption`, `info-caption`, `title-one` à `title-five` |
+| `components.css` | Famille `.btn`, utilitaires de barre de défilement, correction Angular Material du sélecteur de date |
+| `display.css` | **Opt-in.** Classes de présentation. Aucune application du socle ne l'importe. |
+
+## Ce qui reste dans l'application
+
+Trois catégories ne montent pas ici, et c'est délibéré :
+
+- **Les `@font-face`.** Shentox est une police commerciale : la redistribuer
+  dans un paquet npm public serait une violation de licence. Le paquet déclare
+  la famille (`--font-title`), l'application fournit les fichiers.
+- **Les resets globaux.** `html, body { height: 100vh; overflow: hidden }` est
+  une décision d'application monopage, pas une décision de design.
+- **Les tokens de domaine.** `--color-tactical` (gaffer), `--color-tooltip-*`
+  (orion) : ils ne servent qu'à une application.
+
+## Règles d'extension
+
+La distinction est nette, et c'est elle qui empêche le design system de
+re-diverger comme il l'a fait entre les trois applications :
+
+**Surcharger une valeur est libre.** Une application peut redéfinir n'importe
+quel token dans son propre `styles.css`, après les `@import` :
+
+```css
+:root {
+  --color-primary: #0f766e;
+}
+```
+
+C'est le mécanisme du thème sombre, et c'est ce qui permet à un projet de se
+repeindre sans forker le paquet. Le contrat reste le même, seules les valeurs
+changent.
+
+**Définir un utilitaire ne l'est pas.** Ajouter un `@utility`, une classe
+`.btn-*` ou une classe de présentation dans le `styles.css` d'une application
+est interdit : c'est exactement comme ça que `.btn-icon` s'est retrouvé dans
+orion seul, et que la famille `.btn` a divergé sur cinq points. Une nouvelle
+définition passe par une merge request sur ce paquet.
+
+**Ajouter dans `display.css`.** C'est le fichier prévu pour les besoins neufs,
+notamment ceux des projets qui n'ont pas de design validé. Il vise les **projets vibe-codés**, à qui il donne une uniformité de façade ; les
+applications de la plateforme ont leurs propres besoins, tranchés par le product
+design, et ne l'importent pas. Trois règles :
+
+1. Une classe n'utilise que les tokens de `tokens.css`. Aucune couleur en dur —
+   c'est ce qui garantit qu'elle suivra le thème sombre sans retouche.
+2. Une classe ne redéfinit jamais une classe du socle. En cas de doute sur un
+   nom, vérifier dans `components.css`.
+3. Ne pas écrire pour le socle. Ces classes n'ont pas vocation à y remonter : ce
+   n'est pas une antichambre. Si l'une devait un jour servir orion ou gaffer, ce
+   serait une décision explicite et exceptionnelle, pas un glissement.

package/components.css

@@ -0,0 +1,243 @@
+/* ---------------------------------------------------------------------------
+   Classes de composants du design system SkillCorner.
+
+   Exige `tokens.css` et `utilities.css`.
+
+   La famille `.btn` reprend la variante d'orion, choisie comme référence.
+   gaffer s'y aligne : ombre portée, base en `py-2`,
+   `.btn-mini` en `py-1.5`, survol neutre en `bg-slate-100`, et `.btn-selected`
+   sans `px-2.5`. `.btn-input` vient de gaffer, qui l'emploie ; `.btn-select`
+   n'est repris nulle part : il était défini sans être utilisé nulle part.
+
+   La famille `.btn` est passée aux tokens sémantiques. Le rendu en thème clair
+   est identique au précédent, à une exception près : le survol de
+   `.btn-transparent` passe de slate-50 à slate-100, d'un cran. Les survols ont
+   leurs propres tokens plutôt qu'une opacité, parce qu'en sombre le fond
+   primaire est CLAIR : son survol doit s'éclaircir, là où en clair il assombrit.
+
+   La famille `.badge` garde en revanche ses teintes brutes, et c'est délibéré :
+   `badge-purple` est violet par définition, pas par rôle. Ses pastilles sont des
+   fonds clairs à texte sombre, ce qui reste lisible sur une interface sombre.
+
+   `.badge` reprend la variante de gaffer, seule à être réellement employée — 38
+   usages. La variante écartée portait des classes `dark:` qui n'auraient de toute
+   façon pas répondu au `data-theme`.
+   `.link`, `.step-number` (gaffer) et le motif `.has-tooltip` (orion) montent
+   ici : génériques et additifs, aucune application n'y perd quelque chose.
+
+   `.spinner` NE monte PAS, et c'est délibéré : orion en définit un global qui
+   duplique le style encapsulé du `skcr-submit-button`, avec une bordure haute
+   grise au lieu de blanche. Une règle globale et un style de composant ont la
+   même spécificité — le vainqueur dépend de l'ordre d'injection. Le monter ici
+   repeindrait le spinner du bouton de soumission dans les trois applications.
+   À terme, orion devrait abandonner le sien au profit du composant.
+
+   `.mat-datepicker-content-container` n'est pas du design system : c'est une
+   correction Angular Material qu'exige le `skcr-date-picker` de la librairie.
+   Elle vit ici parce que les trois applications la portent déjà à l'identique
+   et qu'une librairie Angular ne peut pas livrer de style global.
+   --------------------------------------------------------------------------- */
+
+@layer components {
+  .mat-datepicker-content-container {
+    background-color: var(--color-popover);
+  }
+
+  .btn {
+    @apply rounded-md leading-5 shadow-sm items-center flex gap-1 justify-center py-2 px-3 max-w-sm text-body-small outline-1 -outline-offset-1 outline-border-color focus:outline-2 focus:-outline-offset-2 font-medium relative overflow-hidden z-0 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50;
+
+    &.btn-large {
+      @apply px-4 py-2.5;
+    }
+
+    &.btn-mini {
+      @apply px-2.5 py-1.5;
+    }
+
+    &.btn-icon {
+      @apply size-8 p-0 rounded-lg shadow-none;
+    }
+
+    &.btn-input {
+      @apply py-2;
+    }
+
+    &.btn-full {
+      @apply max-w-full;
+    }
+
+    &.btn-selected {
+      @apply bg-primary-subtle text-primary-subtle-foreground;
+    }
+
+    &.btn-primary {
+      @apply bg-primary text-primary-foreground hover:bg-primary-hover focus:outline-primary;
+    }
+
+    &.btn-neutral {
+      @apply bg-card hover:bg-muted;
+    }
+
+    &.btn-transparent {
+      @apply hover:bg-muted outline-0;
+    }
+
+    &.btn-danger {
+      @apply bg-destructive text-destructive-foreground hover:bg-destructive-hover;
+    }
+  }
+
+  .badge {
+    @apply inline-flex items-center justify-center gap-0.5 rounded-lg border border-transparent bg-slate-100 px-2 py-0.5 text-xs leading-4 font-medium text-slate-950;
+
+    &.badge-primary {
+      @apply border-primary-300 bg-primary-100;
+    }
+
+    &.badge-green {
+      @apply border-green-300 bg-green-100;
+    }
+
+    &.badge-yellow {
+      @apply border-yellow-300 bg-yellow-100;
+    }
+
+    &.badge-orange {
+      @apply border-orange-300 bg-orange-100;
+    }
+
+    &.badge-destructive {
+      @apply border-red-300 bg-red-100;
+    }
+
+    &.badge-blue {
+      @apply border-blue-300 bg-blue-100;
+    }
+
+    &.badge-purple {
+      @apply border-purple-300 bg-purple-100;
+    }
+
+    &.badge-pink {
+      @apply border-pink-300 bg-pink-100;
+    }
+
+    &.badge-cyan {
+      @apply border-cyan-300 bg-cyan-100;
+    }
+
+    &.badge-strong-yellow {
+      @apply bg-yellow-300;
+    }
+
+    &.badge-strong-orange {
+      @apply bg-orange-300;
+    }
+
+    &.badge-strong-red {
+      @apply bg-red-300;
+    }
+
+    &.badge-strong-slate {
+      @apply bg-slate-200;
+    }
+  }
+
+  .link {
+    @apply text-primary underline cursor-pointer;
+  }
+
+  .step-number {
+    @apply flex h-8 w-8 items-center justify-center rounded-full bg-primary p-2 text-xl text-primary-foreground;
+  }
+
+  .tooltip {
+    @apply invisible absolute;
+  }
+
+  .has-tooltip:hover .tooltip {
+    @apply visible z-50;
+  }
+
+  .has-tooltip {
+    @apply relative;
+  }
+
+  .scrollbar-hide {
+    /* IE et Edge */
+    -ms-overflow-style: none;
+    /* Firefox */
+    scrollbar-width: none;
+    /* Safari et Chrome */
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .scrollbar-hide-y {
+    /* IE et Edge — impossible de masquer la seule barre verticale */
+    -ms-overflow-style: none;
+    /* Firefox */
+    scrollbar-width: none;
+    /* Safari et Chrome */
+    &::-webkit-scrollbar {
+      height: auto; /* barre horizontale conservée */
+      width: 0; /* barre verticale masquée */
+    }
+  }
+
+  .scrollbar-hide-x {
+    /* IE et Edge — impossible de masquer la seule barre horizontale */
+    -ms-overflow-style: none;
+    /* Firefox */
+    scrollbar-width: none;
+    /* Safari et Chrome */
+    &::-webkit-scrollbar {
+      height: 0; /* barre horizontale masquée */
+      width: auto; /* barre verticale conservée */
+    }
+  }
+
+  .scrollbar-default {
+    /* IE et Edge */
+    -ms-overflow-style: auto;
+    /* Firefox */
+    scrollbar-width: auto;
+    /* Safari et Chrome */
+    &::-webkit-scrollbar {
+      display: block;
+    }
+  }
+}
+
+/* ---------------------------------------------------------------------------
+   Angular Material dérive tout son habillage des tokens système `--mat-sys-*`,
+   dont son thème préfabriqué fixe la teinte. Sans cette redirection, le
+   calendrier et le panneau d'heures de `skcr-date-picker` et
+   `skcr-datetime-picker` sortent en bleu azur au milieu d'une interface verte.
+
+   Les variables pointent vers les tokens du design system plutôt que d'en
+   recopier les valeurs : un changement de charte — ou de thème — les suit.
+   C'est pour cette raison que la surface vise `--color-popover` et non un
+   blanc littéral : le calendrier est un panneau flottant, il doit suivre la
+   même surface que les autres.
+
+   Volontairement hors couche : Material déclare ses propres `--mat-sys-*` sans
+   `@layer`, et une déclaration layerisée perdrait l'arbitrage de cascade.
+
+   Inerte pour une application qui n'affiche aucun composant Material : ni orion ni
+   gaffer n'importe Material directement. gaffer, en
+   revanche, affiche un `skcr-datetime-picker` sans cette recette — ce picker
+   rend donc aujourd'hui en bleu.
+   --------------------------------------------------------------------------- */
+:root {
+  --mat-sys-primary: var(--color-primary);
+  --mat-sys-on-primary: var(--color-primary-foreground);
+  --mat-sys-surface: var(--color-popover);
+  --mat-sys-surface-container-high: var(--color-popover);
+  --mat-sys-on-surface: var(--color-foreground);
+  --mat-sys-on-surface-variant: var(--color-muted-foreground);
+  --mat-sys-outline: var(--color-border-color);
+  --mat-sys-outline-variant: var(--color-border-color);
+  --mat-sys-corner-large: 0.5rem;
+}

package/display.css

@@ -0,0 +1,44 @@
+/* ---------------------------------------------------------------------------
+   Classes de présentation — entrée OPT-IN.
+
+   Ce fichier n'est importé par aucune application de la plateforme : ni orion, ni
+   gaffer n'en dépendent. Il existe pour donner une uniformité de façade aux PROJETS
+   VIBE-CODÉS — qu'un outil monté vite ne réinvente pas sa carte, son badge et sa
+   pastille à chaque fois. C'est un garde-fou, pas un catalogue de composants.
+
+   Ces classes n'ont PAS vocation à remonter un jour dans le socle : ce n'est pas une
+   antichambre. Un besoin de la plateforme se traite par le product design, pas en
+   promouvant une classe écrite pour un autre usage.
+
+   Trois règles, détaillées dans le README :
+   1. Aucune couleur en dur — uniquement les tokens de `tokens.css`. C'est ce qui
+      garantit qu'une classe suivra le thème sombre sans retouche.
+   2. Aucune redéfinition d'une classe du socle : vérifier `components.css`.
+   3. Ne pas écrire pour le socle. Si une classe devait un jour servir orion ou gaffer,
+      ce serait une décision explicite et exceptionnelle, jamais un glissement.
+
+   Les deux classes ci-dessous sont des exemples de référence, tirés de motifs
+   réellement répétés dans les applications, pas inventés :
+
+   - `.card` : 19 fichiers d'orion écrivent `bg-white border border-border-color
+     rounded-lg p-5` à la main, aucun composant partagé ne le couvre. La classe
+     porte la SURFACE ; la mise en page (`flex`, `gap-4`, `flex-1`, `mb-8`, qui
+     varient d'un usage à l'autre) reste dans le template.
+   - `.avatar` : reprend la géométrie du `user-avatar` d'orion. Le repli sur les
+     initiales, lui, porte de la logique — c'est le premier candidat à un vrai
+     composant, une fois la classe confrontée à l'usage.
+
+   Noter que `bg-card` et `border-background` remplacent ici les `bg-white` et
+   `border-white` de l'existant : à valeur identique aujourd'hui, mais suivant le
+   thème demain. C'est la règle 1 en pratique.
+   --------------------------------------------------------------------------- */
+
+@layer components {
+  .card {
+    @apply bg-card border border-border-color rounded-lg p-5;
+  }
+
+  .avatar {
+    @apply size-8 rounded-full object-cover border-2 border-background;
+  }
+}

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "skcr-design-tokens",
+  "version": "1.0.0",
+  "description": "Design system SkillCorner : tokens de couleur, utilitaires typographiques et classes de composants. CSS pur, sans dépendance.",
+  "license": "UNLICENSED",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "*.css",
+    "README.md"
+  ],
+  "exports": {
+    "./tokens.css": "./tokens.css",
+    "./utilities.css": "./utilities.css",
+    "./components.css": "./components.css",
+    "./display.css": "./display.css"
+  }
+}

package/tokens.css

@@ -0,0 +1,199 @@
+/* ---------------------------------------------------------------------------
+   Tokens du design system SkillCorner.
+
+   Source unique des valeurs qu'orion et gaffer recopiaient chacun dans son
+   `styles.scss`. Les couleurs primaires, neutres, de statut et de
+   dataviz y étaient déjà rigoureusement identiques dans les trois. Les tokens
+   d'infobulle ne venaient que d'orion : ils montent ici avec le motif
+   `.has-tooltip` de `components.css`, et sont donc additifs pour les deux
+   autres applications.
+
+   Délibérément absents, parce qu'ils n'appartiennent qu'à une application :
+   - `--color-tactical` (gaffer) : concept métier.
+   - `--animate-splash-*` et leurs `@keyframes` (orion) : écran de chargement.
+   - les `@font-face` Shentox : police commerciale, non redistribuable dans un
+     paquet npm public. Chaque application fournit les siens ; ce fichier ne
+     déclare que la famille.
+
+   Thème sombre — l'attribut se pose sur `<html>`, jamais sur `<body>` :
+   Tailwind émet ce bloc `@theme` dans `:root`, donc sur `<html>`. Une custom
+   property est substituée à l'élément où elle est déclarée ; une surcharge
+   posée sur `<body>` serait donc invisible pour les utilitaires, qui hériteraient
+   d'une valeur déjà résolue avec la palette claire. Sur `<html>`, les deux
+   déclarations vivent sur le même élément et la surcharge s'applique :
+
+     :root[data-theme='dark'] { --color-card: …; }
+
+   Le sélecteur d'attribut l'emporte sur le `:root` du bloc `@theme`, qui est
+   par ailleurs émis dans une couche (`@layer theme`) — les deux mécanismes
+   pointent dans le même sens.
+   --------------------------------------------------------------------------- */
+
+@theme {
+  --font-sans: 'Inter', sans-serif;
+  --font-title: 'Shentox', serif;
+
+  /* Couleurs primaires */
+  --color-primary-50: #edfff1;
+  --color-primary-100: #d5ffe1;
+  --color-primary-200: #aeffc5;
+  --color-primary-300: #6fff9a;
+  --color-primary-400: #32fe6b;
+  --color-primary-500: #02e540;
+  --color-primary-600: #00bf30;
+  --color-primary-700: #008a26;
+  --color-primary-800: #057626;
+  --color-primary-900: #066122;
+  --color-primary: #008a26;
+  /* Survols. Un `/90` d'opacité aurait suffi en clair mais pas en sombre, où le fond
+     primaire est CLAIR : son survol doit s'éclaircir, pas s'assombrir. C'est pourquoi
+     chaque couleur d'action a son token de survol plutôt qu'une opacité. */
+  --color-primary-hover: #057626; /* primary-800 */
+  /* Libellé lisible SUR un fond primaire. En sombre le primaire s'éclaircit,
+     donc ce libellé s'assombrit : `bg-primary text-white` ne peut pas suivre
+     le thème, `bg-primary text-primary-foreground` si. */
+  --color-primary-foreground: theme(colors.white);
+  /* Surface primaire discrète : option sélectionnée d'une liste, pastille. */
+  --color-primary-subtle: #edfff1;
+  --color-primary-subtle-foreground: #057626;
+
+  /* Couleurs neutres */
+  --color-background: theme(colors.white);
+  --color-card: theme(colors.white);
+  --color-popover: theme(colors.white);
+  --color-card-foreground: theme(colors.slate.950);
+  --color-popover-foreground: theme(colors.slate.950);
+  --color-foreground: theme(colors.slate.950);
+  --color-muted: theme(colors.slate.100);
+  --color-muted-foreground: theme(colors.slate.500);
+  --color-border-color: theme(colors.slate.200);
+  --color-input: theme(colors.slate.200);
+  --color-ring: theme(colors.slate.950);
+  --color-subtitle: theme(colors.slate.500);
+  /* Fond d'un contrôle désactivé. Distinct de `muted`, qui est un fond de
+     zone : les deux valeurs sont voisines en clair mais divergent en sombre. */
+  --color-disabled: theme(colors.slate.50);
+  /* Fond de piste : conteneur d'onglets, onglet non sélectionné, rail d'un
+     interrupteur. Un cran plus marqué que `muted`, qui est un fond de zone. */
+  --color-track: theme(colors.slate.200);
+  /* Surface surélevée : ce qui est POSÉ sur une autre surface — onglet actif sur sa piste,
+     pastille d'interrupteur sur son rail, point d'un bouton radio coché sur son fond
+     primaire. À distinguer d'un CREUX, qui prend `background` : le cercle d'un radio non
+     coché, le fond d'un champ. En clair elle vaut blanc, comme le fond de page ; en sombre
+     elle doit être plus CLAIRE que ce qu'elle surmonte, sans quoi l'élément en relief
+     paraît creusé — et aucun autre token ne le permet, `popover` y valant exactement
+     `track`. */
+  --color-elevated: theme(colors.white);
+  /* Voile de modale. Seul token qui ne s'inverse pas : un voile doit assombrir
+     dans les deux thèmes, il ne peut donc pas suivre `foreground`. */
+  --color-scrim: theme(colors.slate.500);
+
+  /* Couleurs de statut */
+  --color-info: theme(colors.blue.700);
+  --color-info-hover: theme(colors.blue.800);
+  --color-info-foreground: theme(colors.blue.100);
+  --color-success: theme(colors.green.700);
+  --color-success-foreground: theme(colors.green.100);
+  --color-destructive: theme(colors.red.700);
+  --color-destructive-hover: theme(colors.red.800);
+  --color-destructive-foreground: theme(colors.red.100);
+  --color-warning: theme(colors.orange.700);
+  --color-warning-hover: theme(colors.orange.800);
+  --color-warning-foreground: theme(colors.orange.100);
+  --color-neutral: theme(colors.slate.700);
+  --color-neutral-foreground: theme(colors.slate.100);
+
+  /* Infobulles — consommés par le motif `.has-tooltip` de components.css */
+  --color-tooltip-surface: theme(colors.slate.800);
+  --color-tooltip-border: theme(colors.slate.500);
+  --color-tooltip-foreground: theme(colors.white);
+  --color-tooltip-subtitle: theme(colors.slate.200);
+
+  /* Couleurs de dataviz */
+  --color-chart-1: theme(colors.green.500);
+  --color-chart-1-accent: theme(colors.green.300);
+  --color-chart-1-foreground: theme(colors.green.100);
+  --color-chart-2: theme(colors.lime.500);
+  --color-chart-2-accent: theme(colors.lime.300);
+  --color-chart-2-foreground: theme(colors.lime.100);
+  --color-chart-3: theme(colors.yellow.500);
+  --color-chart-3-accent: theme(colors.yellow.300);
+  --color-chart-3-foreground: theme(colors.yellow.100);
+  --color-chart-4: theme(colors.orange.500);
+  --color-chart-4-accent: theme(colors.orange.300);
+  --color-chart-4-foreground: theme(colors.orange.100);
+  --color-chart-5: theme(colors.red.500);
+  --color-chart-5-accent: theme(colors.red.300);
+  --color-chart-5-foreground: theme(colors.red.100);
+  --color-chart-6: theme(colors.gray.500);
+  --color-chart-6-accent: theme(colors.gray.300);
+  --color-chart-6-foreground: theme(colors.gray.100);
+}
+
+/* ---------------------------------------------------------------------------
+   Thème sombre.
+
+   Hors `@theme` et donc hors couche : le sélecteur d'attribut l'emporte à la
+   fois par spécificité et par la règle des couches, ce qui rend la bascule
+   déterministe.
+
+   Toutes les paires de texte sont vérifiées au ratio WCAG AA (4.5:1). Les plus
+   serrées sont ici plus confortables qu'en thème clair, où `primary` est à
+   exactement 4.50.
+
+   Les échelles numériques (`--color-primary-50` à `900`, `--color-chart-*`) ne
+   sont PAS inversées : ce sont des gammes, choisies délibérément par une
+   application, pas des rôles. Les usages qui avaient besoin de suivre le thème
+   sont passés aux tokens sémantiques ci-dessous.
+   --------------------------------------------------------------------------- */
+:root[data-theme='dark'] {
+  /* Surfaces, du plus sombre au plus clair : le fond de page porte les cartes,
+     les cartes portent les panneaux flottants. En sombre l'ombre portée ne
+     sépare presque rien — c'est la valeur de fond qui fait ce travail. */
+  --color-background: #020617; /* slate-950 */
+  --color-card: #0f172a; /* slate-900 */
+  --color-popover: #1e293b; /* slate-800 */
+
+  --color-foreground: #f8fafc; /* slate-50 */
+  --color-card-foreground: #f8fafc;
+  --color-popover-foreground: #f8fafc;
+  --color-muted: #1e293b; /* slate-800 */
+  --color-muted-foreground: #94a3b8; /* slate-400 */
+  --color-subtitle: #94a3b8;
+  --color-border-color: #334155; /* slate-700 */
+  --color-input: #334155;
+  --color-ring: #cbd5e1; /* slate-300 */
+  --color-disabled: #1e293b; /* slate-800 */
+  /* slate-800 et non slate-700 : les onglets non sélectionnés posent `text-subtitle`
+     dessus, et sur slate-700 la paire tombe à 4.04, sous le seuil AA de 4.5. */
+  --color-track: #1e293b; /* slate-800 */
+  --color-elevated: #334155; /* slate-700 : un cran AU-DESSUS de track */
+  --color-scrim: #020617; /* slate-950 : le voile assombrit, il ne s'inverse pas */
+
+  --color-primary: #32fe6b; /* primary-400 : #008a26 échoue au contraste sur fond sombre */
+  --color-primary-hover: #6fff9a; /* primary-300 : le survol ÉCLAIRCIT sur fond clair */
+  --color-primary-foreground: #020617;
+  --color-primary-subtle: #052e16;
+  --color-primary-subtle-foreground: #32fe6b;
+
+  --color-info: #60a5fa; /* blue-400 */
+  --color-info-hover: #93c5fd; /* blue-300 */
+  --color-info-foreground: #172554; /* blue-950 */
+  --color-success: #4ade80; /* green-400 */
+  --color-success-foreground: #052e16; /* green-950 */
+  --color-destructive: #f87171; /* red-400 */
+  --color-destructive-hover: #fca5a5; /* red-300 */
+  --color-destructive-foreground: #450a0a; /* red-950 */
+  --color-warning: #fb923c; /* orange-400 */
+  --color-warning-hover: #fdba74; /* orange-300 */
+  --color-warning-foreground: #431407; /* orange-950 */
+  --color-neutral: #cbd5e1; /* slate-300 */
+  --color-neutral-foreground: #020617;
+
+  /* L'infobulle s'inverse : sombre sur clair, elle ne se détacherait plus d'une
+     interface déjà sombre. */
+  --color-tooltip-surface: #e2e8f0; /* slate-200 */
+  --color-tooltip-border: #94a3b8; /* slate-400 */
+  --color-tooltip-foreground: #020617;
+  --color-tooltip-subtitle: #334155; /* slate-700 */
+}

package/utilities.css

@@ -0,0 +1,49 @@
+/* ---------------------------------------------------------------------------
+   Utilitaires typographiques du design system SkillCorner.
+
+   Exige `tokens.css` : `font-title` et `text-subtitle` viennent de là.
+
+   `title-three` est en `font-semibold`, l'usage d'orion ; gaffer rendait en
+   `font-medium` et s'aligne.
+   `info-caption` venait de gaffer seul : générique et additif, il monte ici.
+   --------------------------------------------------------------------------- */
+
+@utility text-body-large {
+  @apply text-lg leading-7;
+}
+
+@utility text-body-medium {
+  @apply text-base leading-6;
+}
+
+@utility text-body-small {
+  @apply text-sm leading-5;
+}
+
+@utility text-caption {
+  @apply text-xs leading-4;
+}
+
+@utility info-caption {
+  @apply text-caption italic text-subtitle;
+}
+
+@utility title-one {
+  @apply font-bold text-6xl leading-10 font-title;
+}
+
+@utility title-two {
+  @apply font-semibold text-5xl leading-12 font-title;
+}
+
+@utility title-three {
+  @apply font-semibold text-4xl leading-10 font-title;
+}
+
+@utility title-four {
+  @apply font-medium text-3xl leading-8 font-title;
+}
+
+@utility title-five {
+  @apply font-medium text-2xl leading-7 font-title;
+}