Design Tokens

L'ensemble des CSS custom properties qui definissent l'identite visuelle de Speedcube Master. Ces tokens sont partages entre l'application principale et le design system via le fichier src/styles/tokens.css.

Comment ca marche

Le systeme de tokens repose sur trois niveaux dans tokens.css :

@theme inline { } — Expose les variables CSS au systeme de theming Tailwind v4. Chaque entree --color-xxx: var(--xxx) cree une classe utilitaire bg-xxx, text-xxx, etc.
:root { } — Definit les valeurs par defaut de chaque token. Comme l'app est « dark-first », le :root contient les couleurs du theme sombre.
.light { } — Surcharge les tokens pour le theme clair. La classe .light est ajoutee dynamiquement sur le <html> selon la preference utilisateur.

Un custom variant @custom-variant dark (&:is(.dark *)) est egalement declare pour permettre les classes dark:xxx si necessaire.

Backgrounds

Couleurs d'arriere-plan et de surface. Definissent la hierarchie de profondeur de l'interface.

Variable CSS	Valeur Dark	Valeur Light	Classe Tailwind
--background	#0b0f1a	#f4f6fa	`bg-background`
--card	#0f1524	#f8fafc	`bg-card`
--card-foreground	#e5e7eb	#171717	`text-card-foreground`
--popover	#0f1524	#f8fafc	`bg-popover`
--popover-foreground	#e5e7eb	#171717	`text-popover-foreground`
--secondary	#111827	#f1f5f9	`bg-secondary`
--secondary-foreground	#e5e7eb	#171717	`text-secondary-foreground`
--muted	#111827	#f1f5f9	`bg-muted`
--muted-foreground	#9ca3af	#64748b	`text-muted-foreground`

Textes

Couleurs de texte principal, secondaire et sur fond colore.

Variable CSS	Valeur Dark	Valeur Light	Classe Tailwind
--foreground	#e5e7eb	#171717	`text-foreground`
--primary-foreground	#ffffff	#ffffff	`text-primary-foreground`
--accent-foreground	#ffffff	#ffffff	`text-accent-foreground`

Bordures

Couleurs de bordures, champs de saisie et anneau de focus.

Variable CSS	Valeur Dark	Valeur Light	Classe Tailwind
--border	#1f2937	#e2e8f0	`border-border`
--input	#1f2937	#e2e8f0	`border-input`
--ring	#2563eb	#2563eb	`ring-ring`

Couleurs de marque

Les deux couleurs identitaires : bleu primaire (actions, CTA) et vert accent (succes, validation).

Variable CSS	Valeur Dark	Valeur Light	Classe Tailwind
--primary	#2563eb	#2563eb	`bg-primary / text-primary`
--accent	#22c55e	#22c55e	`bg-accent / text-accent`

Statuts

Couleurs semantiques pour les etats d'avertissement et d'erreur.

Variable CSS	Valeur Dark	Valeur Light	Classe Tailwind
--warning	#f59e0b	#f59e0b	`text-warning`
--destructive	#ef4444	#ef4444	`bg-destructive`

Charts

Palette dediee aux graphiques recharts. Identique dans les deux themes.

Variable CSS	Valeur Dark	Valeur Light	Classe Tailwind
--chart-1	#2563eb	#2563eb	`text-chart-1`
--chart-2	#22c55e	#22c55e	`text-chart-2`
--chart-3	#f59e0b	#f59e0b	`text-chart-3`
--chart-4	#ef4444	#ef4444	`text-chart-4`
--chart-5	#8b5cf6	#8b5cf6	`text-chart-5`

Fonts

Familles de polices. Inter pour le corps de texte, JetBrains Mono pour les temps et le code.

Variable CSS	Valeur Dark	Valeur Light	Classe Tailwind
--font-sans	var(--font-inter)	var(--font-inter)	`font-sans`
--font-mono	var(--font-jetbrains)	var(--font-jetbrains)	`font-mono`

Radius

Echelle de rayons de bordure basee sur une valeur de reference (--radius: 1rem).

Variable CSS	Valeur Dark	Valeur Light	Classe Tailwind
--radius	1rem	1rem	`(base)`
--radius-sm	calc(var(--radius) - 4px)	calc(var(--radius) - 4px)	`rounded-sm`
--radius-md	calc(var(--radius) - 2px)	calc(var(--radius) - 2px)	`rounded-md`
--radius-lg	var(--radius)	var(--radius)	`rounded-lg`
--radius-xl	calc(var(--radius) + 4px)	calc(var(--radius) + 4px)	`rounded-xl`
--radius-2xl	calc(var(--radius) + 8px)	calc(var(--radius) + 8px)	`rounded-2xl`

Utilisation des tokens

Les tokens peuvent etre utilises directement en CSS ou via les classes utilitaires Tailwind.

En CSS

/* Utilisation directe des variables CSS */
.my-component {
  background-color: var(--card);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* Avec opacite (format oklch / rgb selon le navigateur) */
.overlay {
  background-color: color-mix(in srgb, var(--background) 80%, transparent);
}

En Tailwind (JSX)

{/* Utilisation via les classes Tailwind */}
<div className="bg-card text-foreground border border-border rounded-lg">
  <h2 className="text-primary">Titre</h2>
  <p className="text-muted-foreground">Description secondaire</p>
  <button className="bg-primary text-primary-foreground rounded-md">
    Action
  </button>
  <span className="text-accent">Succes !</span>
  <span className="text-destructive">Erreur</span>
</div>

Ajout d'un token

Procedure pour ajouter un nouveau token au design system.

Definir la variable — Ajouter la variable dans :root (valeur dark) et .light (valeur light) dans src/styles/tokens.css.
Exposer a Tailwind — Ajouter l'entree correspondante dans le bloc @theme inline (ex: --color-my-token: var(--my-token)).
Documenter dans le design system — Mettre a jour cette page en ajoutant le token dans la categorie appropriee.
Tester les deux themes — Verifier le rendu en mode sombre et clair.

Exemple

/* 1. Ajouter la variable dans :root (dark) ET .light dans tokens.css */
:root {
  --my-new-token: #value-dark;
}
.light {
  --my-new-token: #value-light;
}

/* 2. Exposer au theme Tailwind dans le bloc @theme inline */
@theme inline {
  --color-my-new-token: var(--my-new-token);
}

/* 3. Utiliser en Tailwind : bg-my-new-token, text-my-new-token, etc. */

Comment ca marche

Le systeme de tokens repose sur trois niveaux dans tokens.css :

@theme inline { } — Expose les variables CSS au systeme de theming Tailwind v4. Chaque entree --color-xxx: var(--xxx) cree une classe utilitaire bg-xxx, text-xxx, etc.
:root { } — Definit les valeurs par defaut de chaque token. Comme l'app est « dark-first », le :root contient les couleurs du theme sombre.
.light { } — Surcharge les tokens pour le theme clair. La classe .light est ajoutee dynamiquement sur le <html> selon la preference utilisateur.

Un custom variant @custom-variant dark (&:is(.dark *)) est egalement declare pour permettre les classes dark:xxx si necessaire.

Variable CSS

Valeur Dark

Valeur Light

Classe Tailwind

--background

#0b0f1a

#f4f6fa

bg-background

--card

#0f1524

#f8fafc

bg-card

--card-foreground

#e5e7eb

#171717

text-card-foreground

--popover

#0f1524

#f8fafc

bg-popover

--popover-foreground

#e5e7eb

#171717

text-popover-foreground

--secondary

#111827

#f1f5f9

bg-secondary

--secondary-foreground

#e5e7eb

#171717

text-secondary-foreground

--muted

#111827

#f1f5f9

bg-muted

--muted-foreground

#9ca3af

#64748b

text-muted-foreground

Variable CSS

Valeur Dark

Valeur Light

Classe Tailwind

--foreground

#e5e7eb

#171717

text-foreground

--primary-foreground

#ffffff

text-primary-foreground

--accent-foreground

#ffffff

text-accent-foreground

Variable CSS

Valeur Dark

Valeur Light

Classe Tailwind

--border

#1f2937

#e2e8f0

border-border

--input

#1f2937

#e2e8f0

border-input

--ring

#2563eb

ring-ring

Variable CSS

Valeur Dark

Valeur Light

Classe Tailwind

--primary

#2563eb

bg-primary / text-primary

--accent

#22c55e

bg-accent / text-accent

Variable CSS

Valeur Dark

Valeur Light

Classe Tailwind

--warning

#f59e0b

text-warning

--destructive

#ef4444

bg-destructive

Variable CSS

Valeur Dark

Valeur Light

Classe Tailwind

--chart-1

#2563eb

text-chart-1

--chart-2

#22c55e

text-chart-2

--chart-3

#f59e0b

text-chart-3

--chart-4

#ef4444

text-chart-4

--chart-5

#8b5cf6

text-chart-5

Variable CSS

Valeur Dark

Valeur Light

Classe Tailwind

--font-sans

var(--font-inter)

font-sans

--font-mono

var(--font-jetbrains)

font-mono

Variable CSS

Valeur Dark

Valeur Light

Classe Tailwind

--radius

1rem

(base)

--radius-sm

calc(var(--radius) - 4px)

rounded-sm

--radius-md

calc(var(--radius) - 2px)

rounded-md

--radius-lg

var(--radius)

rounded-lg

--radius-xl

calc(var(--radius) + 4px)

rounded-xl

--radius-2xl

calc(var(--radius) + 8px)

rounded-2xl

/* Utilisation directe des variables CSS */ .my-component { background-color: var(--card); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius-lg); } /* Avec opacite (format oklch / rgb selon le navigateur) */ .overlay { background-color: color-mix(in srgb, var(--background) 80%, transparent); }

{/* Utilisation via les classes Tailwind */} <div className="bg-card text-foreground border border-border rounded-lg"> <h2 className="text-primary">Titre</h2> <p className="text-muted-foreground">Description secondaire</p> <button className="bg-primary text-primary-foreground rounded-md"> Action </button> <span className="text-accent">Succes !</span> <span className="text-destructive">Erreur</span> </div>

/* 1. Ajouter la variable dans :root (dark) ET .light dans tokens.css */ :root { --my-new-token: #value-dark; } .light { --my-new-token: #value-light; } /* 2. Exposer au theme Tailwind dans le bloc @theme inline */ @theme inline { --color-my-new-token: var(--my-new-token); } /* 3. Utiliser en Tailwind : bg-my-new-token, text-my-new-token, etc. */