/* * WinetPay — Design tokens (A-16a / P2++). * Source unique de marque : config/brand.php (valeurs miroir). cf. design/02-UI-KIT.md. * * RÈGLES : * - Aucune couleur en dur dans les composants : utiliser ces rôles sémantiques. * - Scope-ready (A-17) : les thèmes §116 re-bindent les rôles sémantiques via * [data-theme="…"] / .sale-scope SANS toucher les composants (cf. bloc en bas). * - RTL-ready : préférer les propriétés logiques (margin-inline, padding-inline, inset-*). */ :root { /* — Primitives : Primary (indigo) — */ --c-primary-50: #EEF0FE; --c-primary-100: #DCE0FD; --c-primary-200: #BAC2FB; --c-primary-300: #94A0F6; --c-primary-400: #6E7CF0; --c-primary-500: #3B4FE0; --c-primary-600: #2E3FC0; --c-primary-700: #26339A; --c-primary-800: #1F2A7C; --c-primary-900: #1A2465; /* — Primitives : Accent (teal) — */ --c-accent-50: #E6FBFA; --c-accent-300: #5FD9D4; --c-accent-500: #00B5B0; --c-accent-600: #019490; --c-accent-700: #08736F; /* — Primitives : Neutres (chauds) — */ --c-neutral-0: #FFFFFF; --c-neutral-50: #FAFAF9; --c-neutral-100: #F4F3F1; --c-neutral-200: #E7E5E1; --c-neutral-300: #D6D3CD; --c-neutral-400: #A8A39B; --c-neutral-500: #78736B; --c-neutral-600: #57534C; --c-neutral-700: #403D37; --c-neutral-800: #2A2823; --c-neutral-900: #1A1815; /* — Sémantiques — */ --c-success: #15803D; --c-success-bg: #DCFCE7; --c-warning: #B45309; --c-warning-bg: #FEF3C7; --c-error: #B91C1C; --c-error-bg: #FEE2E2; --c-info: #2563EB; --c-info-bg: #DBEAFE; /* — Rôles de surface (re-bindables par scope/thème) — */ --c-primary: var(--c-primary-500); --c-primary-strong: var(--c-primary-600); --c-accent: var(--c-accent-500); --c-bg: var(--c-neutral-50); --c-surface: var(--c-neutral-0); --c-surface-raised: var(--c-neutral-0); --c-border: var(--c-neutral-200); --c-text: var(--c-neutral-900); --c-text-muted: var(--c-neutral-500); --c-text-inverse: var(--c-neutral-0); --c-focus: var(--c-primary-500); /* — Typographie — */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: var(--font-sans); --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace; --fs-display: 2.5rem; --fs-h1: 2rem; --fs-h2: 1.5rem; --fs-h3: 1.25rem; --fs-h4: 1.125rem; --fs-body: 1rem; --fs-small: .875rem; --fs-caption: .75rem; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.2; --lh-normal: 1.5; /* — Espacement (base 4px) — */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* — Rayons / élévation — */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 9999px; --e0: none; --e1: 0 1px 2px rgba(0,0,0,.06); --e2: 0 2px 6px rgba(0,0,0,.08); --e3: 0 6px 16px rgba(0,0,0,.10); --e4: 0 12px 32px rgba(0,0,0,.14); /* — Z-index — */ --z-dropdown: 1000; --z-sticky: 1100; --z-drawer: 1200; --z-modal: 1300; --z-popover: 1400; --z-toast: 1500; /* — Motion (cf. design/05-MOTION.md) — */ --t-instant: 75ms; --t-fast: 150ms; --t-base: 200ms; --t-slow: 300ms; --ease-out: cubic-bezier(.2,.8,.2,1); /* — Focus (a11y AA) — */ --focus-ring: 2px solid var(--c-focus); --focus-offset: 2px; } /* * ==================================================================================== * THÈMES (A-17, design/14-THEME-SYSTEM §3-4 ; CDC §116) — 7 presets. * Un thème = un RE-BIND des rôles sémantiques dans un scope [data-theme="…"], sans toucher * aucun composant. « Classic » = :root ci-dessus. Ces blocs sont le MIROIR de config/themes.php * (source de données, validée AA par ThemeContrastTest). On re-binde aussi les primitives que * les composants consomment (--c-primary-50/500/600) pour thémer hovers/tints sans réécriture. * Changement instantané : swap de l'attribut data-theme sur ou .sale-scope (§117). * ==================================================================================== */ [data-theme="minimal"] { --c-primary-50: #F3F4F6; --c-primary-500: #111827; --c-primary-600: #000000; --c-primary: #111827; --c-primary-strong: #000000; --c-accent: #3B4FE0; --c-bg: #FFFFFF; --c-surface: #FFFFFF; --c-surface-raised: #FFFFFF; --c-border: #ECECEC; --c-text: #111827; --c-text-muted: #6B7280; --c-text-inverse: #FFFFFF; --c-focus: #111827; } [data-theme="corporate"] { --c-primary-50: #EAF0FB; --c-primary-500: #1E3A8A; --c-primary-600: #172E6E; --c-primary: #1E3A8A; --c-primary-strong: #172E6E; --c-accent: #0EA5A4; --c-bg: #F8FAFC; --c-surface: #FFFFFF; --c-surface-raised: #FFFFFF; --c-border: #E2E8F0; --c-text: #0F172A; --c-text-muted: #64748B; --c-text-inverse: #FFFFFF; --c-focus: #1E3A8A; } [data-theme="emerald"] { --c-primary-50: #E3F3EC; --c-primary-500: #047857; --c-primary-600: #065F46; --c-primary: #047857; --c-primary-strong: #065F46; --c-accent: #10B981; --c-bg: #F7FBF9; --c-surface: #FFFFFF; --c-surface-raised: #FFFFFF; --c-border: #DCEDE6; --c-text: #11201A; --c-text-muted: #5E7268; --c-text-inverse: #FFFFFF; --c-focus: #047857; } [data-theme="sunset"] { --c-primary-50: #FCEBDD; --c-primary-500: #C2410C; --c-primary-600: #9A3412; --c-primary: #C2410C; --c-primary-strong: #9A3412; --c-accent: #F97316; --c-bg: #FFFBF7; --c-surface: #FFFFFF; --c-surface-raised: #FFFFFF; --c-border: #F1E2D6; --c-text: #1F140C; --c-text-muted: #7A6A5C; --c-text-inverse: #FFFFFF; --c-focus: #C2410C; } [data-theme="crimson"] { --c-primary-50: #FBE1E7; --c-primary-500: #BE123C; --c-primary-600: #9F1239; --c-primary: #BE123C; --c-primary-strong: #9F1239; --c-accent: #F43F5E; --c-bg: #FFF7F8; --c-surface: #FFFFFF; --c-surface-raised: #FFFFFF; --c-border: #F3DDE2; --c-text: #1F1014; --c-text-muted: #7A626A; --c-text-inverse: #FFFFFF; --c-focus: #BE123C; } /* Midnight = dark mode (§10) : sémantiques ÉCLAIRCIES + fonds de statut sombres, élévation par surfaces plus claires (les ombres rgba(noir) sont invisibles sur fond sombre). */ [data-theme="midnight"] { color-scheme: dark; --c-primary-50: #232A44; --c-primary-500: #6E7CF0; --c-primary-600: #94A0F6; --c-primary: #6E7CF0; --c-primary-strong: #94A0F6; --c-accent: #2DD4CF; --c-bg: #0F1115; --c-surface: #171A21; --c-surface-raised: #1C2029; --c-border: #2A2F3A; --c-text: #ECECEC; --c-text-muted: #9AA0AB; --c-text-inverse: #0F1115; --c-focus: #6E7CF0; --c-success: #4ADE80; --c-success-bg: #16351F; --c-warning: #FBBF24; --c-warning-bg: #3A2E10; --c-error: #F87171; --c-error-bg: #3A1B1B; --c-info: #60A5FA; --c-info-bg: #16233A; } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; } } /* * Indicateur hors-ligne (C-OFFLINE-INDICATOR, §141/§154) — SEUL micro-composant runtime global : * il doit apparaître sur toutes les surfaces, or tokens.css est la seule feuille chargée partout. * Créé en DOM par public/js/offline.js. Uniquement des rôles/tokens (aucune couleur en dur). */ .wnp-offline { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 2000; display: none; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); font-family: var(--font-sans); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--c-neutral-0); background: var(--c-neutral-800); box-shadow: var(--e3); } .wnp-offline.is-visible { display: flex; } .wnp-offline-dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--c-warning); }