fix(design-system): ancrer palette canvas/ink-2 sur html+body

2026-04-17 23:51:02 +03:00 · 2026-04-17 23:51:02 +03:00 · e0a4653653
commit e0a4653653
parent f343fb4696
1 changed files with 104 additions and 0 deletions
--- a/src/index.css
+++ b/src/index.css
@ -1 +1,105 @@
@import 'tailwindcss';
+
+/* Dark mode : .dark class sur <html> — toggle React (ThemeProvider, étape 2) */
+@variant dark (&:where(.dark, .dark *));
+
+@theme {
+  /* ─── Typographie ───────────────────────────────────────────── */
+  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    system-ui, sans-serif;
+
+  /* ─── Fonds ─────────────────────────────────────────────────── */
+  /* bg-canvas    = fond de page (jamais pur blanc) */
+  /* bg-surface   = cards — ressortent sur le canvas */
+  --color-canvas:        #EEF2F8;
+  --color-canvas-2:      #E6EBF4;
+  --color-surface:       #FFFFFF;
+  --color-surface-hover: #F8FAFD;
+
+  /* ─── Hairlines ──────────────────────────────────────────────── */
+  --color-line:          #DDE3ED;
+  --color-line-strong:   #C7D0E0;
+
+  /* ─── Encres ─────────────────────────────────────────────────── */
+  --color-ink-1: #0F172A;
+  --color-ink-2: #1E293B;
+  --color-ink-3: #475569;
+  --color-ink-4: #64748B;
+  --color-ink-5: #94A3B8;
+
+  /* ─── Brand Expria ───────────────────────────────────────────── */
+  --color-expria:        #1B4FD8;
+  --color-expria-hover:  #1741B8;
+  --color-expria-50:     #EEF3FF;
+  --color-expria-100:    #DCE6FF;
+  --color-expria-200:    #B8CDFF;
+  --color-deep:          #0B1F5C;
+  --color-deep-2:        #142B6E;
+
+  /* ─── Sémantiques ────────────────────────────────────────────── */
+  --color-success:     #0E9F6E;
+  --color-success-bg:  #E6F6F0;
+  --color-warning:     #C77A00;
+  --color-warning-bg:  #FEF3E2;
+  --color-danger:      #C53030;
+  --color-danger-bg:   #FDECEC;
+
+  /* ─── Rayons (override des defaults Tailwind) ────────────────── */
+  --radius-sm:   6px;
+  --radius-md:   10px;
+  --radius-lg:   14px;
+  --radius-xl:   18px;
+  --radius-full: 999px;
+
+  /* ─── Ombres (light mode) ────────────────────────────────────── */
+  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
+  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
+  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
+}
+
+/* ─── Dark mode — override des tokens couleur et ombres ──────────── */
+.dark {
+  /* Fonds */
+  --color-canvas:        #0D1220;
+  --color-canvas-2:      #121A2D;
+  --color-surface:       #182238;
+  --color-surface-hover: #1E2A42;
+
+  /* Hairlines */
+  --color-line:          #27324B;
+  --color-line-strong:   #364363;
+
+  /* Encres */
+  --color-ink-1: #F1F4FA;
+  --color-ink-2: #DDE3EF;
+  --color-ink-3: #A8B2C7;
+  --color-ink-4: #7A8499;
+  --color-ink-5: #525C73;
+
+  /* Brand — remonté en luminance pour rester lisible sur fond sombre */
+  --color-expria:       #5B7FFF;
+  --color-expria-hover: #6F8EFF;
+  --color-expria-50:    rgba(91, 127, 255, 0.12);
+  --color-deep:         #060B1A;
+
+  /* Sémantiques */
+  --color-success:    #3DD68C;
+  --color-success-bg: rgba(61, 214, 140, 0.12);
+  --color-warning:    #F5B849;
+  --color-warning-bg: rgba(245, 184, 73, 0.12);
+  --color-danger:     #F06B6B;
+  --color-danger-bg:  rgba(240, 107, 107, 0.12);
+
+  /* Ombres — jouer sur les surfaces, pas les ombres claires */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
+}
+
+/* ─── Rendu sub-pixel global (non couvert par Tailwind) ──────────── */
+body {
+  background-color: var(--color-canvas);
+  color: var(--color-ink-2);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}