From e0a4653653aaed6993e7dc5c332715c975cac437 Mon Sep 17 00:00:00 2001 From: Hermann_Kitio Date: Fri, 17 Apr 2026 23:51:02 +0300 Subject: [PATCH] fix(design-system): ancrer palette canvas/ink-2 sur html+body --- src/index.css | 104 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 104 insertions(+) diff --git a/src/index.css b/src/index.css index d4b5078..558ede0 100644 --- a/src/index.css +++ b/src/index.css @@ -1 +1,105 @@ @import 'tailwindcss'; + +/* Dark mode : .dark class sur — 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; +}