/** * GAS Design Tokens * ================= * Design system centralisé pour l'interface admin du plugin. * Ce fichier est le SEUL à modifier pour themer un site. * * Architecture : * 1. Primitives → valeurs brutes (couleurs HSL, px) * 2. Tokens → variables sémantiques réutilisables * 3. Composants → variables génériques pour les éléments UI * * Convention : toutes les variables commencent par --gas- */ :root { /* ============================================= 1. PRIMITIVES ============================================= */ /* @gas:palette-start Bloc géré par le bootstrap MCP (pattern palette_to_css_block). Le contenu entre les marqueurs start/end peut être réécrit automatiquement depuis un preset (chaleureux, moderne, institutionnel, minimal) ou une couleur primaire. Modifications manuelles préservées tant que le wizard n'est pas relancé sur cette section. */ /* --- Couleur primaire (#004253) --- */ --gas-primary-h: 193; --gas-primary-s: 100%; --gas-primary-l: 16%; /* --- Couleur secondaire (#695c4f) --- */ --gas-secondary-h: 27; --gas-secondary-s: 14%; --gas-secondary-l: 36%; /* --- Couleur accent (#cf7c34) --- */ --gas-accent-h: 27; --gas-accent-s: 57%; --gas-accent-l: 51%; /* --- Neutre (slate) --- */ --gas-neutral-h: 220; --gas-neutral-s: 14%; --gas-neutral-l: 46%; /* --- Base spacing unit (px) --- */ --gas-space-unit: 4px; /* --- Base radius (px) --- */ --gas-radius-unit: 4px; /* --- Base rem : html { font-size: var(--gas-root-font-pct) }. --- DÉFAUT = 100% (1rem = 16px) depuis 2026-06 : le 62.5% historique (1rem=10px) est abandonné car il « comprime » le contenu NON-GAS (thème WP, Gutenberg, tous en rem) et laisse le texte libre hériter ~10px. Tout le CSS GAS est en px (invariant au root) → le défaut peut être 100% sans décaler le rendu GAS. Les sites existants tunés sous 62.5% (aph, assp) sont ÉPINGLÉS à 62.5% via leur fichier config/deploy/{tenant}/gas-design-tokens.css + la DB (design_tokens.root_font_pct). NB : seul le TOKEN est ici (zéro impact). La règle html n'est émise que sur les pages rendues par GAS (frontend/blocs/Astro/showcase), jamais sur l'admin. */ --gas-root-font-pct: 100%; /* @gas:palette-end */ /* ============================================= 2. TOKENS — Couleurs ============================================= */ /* Primary */ --gas-primary: hsl(var(--gas-primary-h) var(--gas-primary-s) var(--gas-primary-l)); --gas-primary-dark: hsl(var(--gas-primary-h) var(--gas-primary-s) calc(var(--gas-primary-l) - 10%)); --gas-primary-light: hsl(var(--gas-primary-h) var(--gas-primary-s) calc(var(--gas-primary-l) + 20%)); --gas-primary-ultra-light: hsl(var(--gas-primary-h) calc(var(--gas-primary-s) - 20%) 95%); /* Secondary */ --gas-secondary: hsl(var(--gas-secondary-h) var(--gas-secondary-s) var(--gas-secondary-l)); --gas-secondary-dark: hsl(var(--gas-secondary-h) var(--gas-secondary-s) calc(var(--gas-secondary-l) - 10%)); --gas-secondary-light: hsl(var(--gas-secondary-h) var(--gas-secondary-s) calc(var(--gas-secondary-l) + 20%)); --gas-secondary-ultra-light: hsl(var(--gas-secondary-h) calc(var(--gas-secondary-s) - 15%) 95%); /* Accent */ --gas-accent: hsl(var(--gas-accent-h) var(--gas-accent-s) var(--gas-accent-l)); --gas-accent-dark: hsl(var(--gas-accent-h) var(--gas-accent-s) calc(var(--gas-accent-l) - 10%)); --gas-accent-light: hsl(var(--gas-accent-h) var(--gas-accent-s) calc(var(--gas-accent-l) + 25%)); --gas-accent-ultra-light: hsl(var(--gas-accent-h) calc(var(--gas-accent-s) - 20%) 95%); /* Neutral */ --gas-neutral-900: hsl(var(--gas-neutral-h) calc(var(--gas-neutral-s) + 6%) 12%); --gas-neutral-800: hsl(var(--gas-neutral-h) calc(var(--gas-neutral-s) + 4%) 20%); --gas-neutral-700: hsl(var(--gas-neutral-h) var(--gas-neutral-s) 32%); --gas-neutral-600: hsl(var(--gas-neutral-h) var(--gas-neutral-s) var(--gas-neutral-l)); --gas-neutral-500: hsl(var(--gas-neutral-h) calc(var(--gas-neutral-s) - 4%) 58%); --gas-neutral-400: hsl(var(--gas-neutral-h) calc(var(--gas-neutral-s) - 6%) 70%); --gas-neutral-300: hsl(var(--gas-neutral-h) calc(var(--gas-neutral-s) - 6%) 82%); --gas-neutral-200: hsl(var(--gas-neutral-h) calc(var(--gas-neutral-s) - 4%) 90%); --gas-neutral-100: hsl(var(--gas-neutral-h) calc(var(--gas-neutral-s) - 2%) 95%); --gas-neutral-50: hsl(var(--gas-neutral-h) calc(var(--gas-neutral-s) - 2%) 98%); /* États */ --gas-success: hsl(152, 56%, 40%); --gas-success-light: hsl(152, 56%, 92%); --gas-success-lighter: hsl(152, 56%, 88%); --gas-success-dark: hsl(152, 56%, 32%); --gas-success-text: hsl(152, 56%, 20%); --gas-warning: hsl(38, 90%, 50%); --gas-warning-light: hsl(38, 90%, 92%); --gas-warning-lighter: hsl(38, 90%, 88%); --gas-warning-dark: hsl(38, 90%, 42%); --gas-warning-text: hsl(38, 60%, 28%); --gas-warning-text-strong: hsl(38, 60%, 20%); --gas-warning-orange: hsl(32, 90%, 50%); --gas-warning-orange-dark: hsl(32, 90%, 35%); --gas-danger: hsl(0, 65%, 50%); --gas-danger-light: hsl(0, 65%, 94%); --gas-danger-dark: hsl(0, 65%, 40%); --gas-danger-border: hsl(0, 65%, 80%); --gas-info: hsl(205, 75%, 48%); --gas-info-light: hsl(205, 75%, 93%); --gas-info-lighter: hsl(205, 75%, 88%); --gas-info-dark: hsl(205, 75%, 28%); --gas-info-hover: hsl(205, 75%, 38%); --gas-info-text: hsl(205, 75%, 25%); /* ============================================= 2. TOKENS — Typographie ============================================= */ --gas-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; --gas-font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace; /* * Tailles — Échelle fluide (Major Third × 1.25) * ────────────────────────────────────────────── * INVARIANCE ROOT (2026-06) : l'échelle est exprimée en **px** (plus en rem), * donc INDÉPENDANTE de `--gas-root-font-pct` (html { font-size: 62.5% | 100% }). * Un site peut passer `root_font_pct` de 62.5% à 100% (site-config) sans décaler * la typo, et l'admin (qui n'émet jamais la règle html 62.5%) rend les tokens à la * bonne taille. Le terme fluide `vi` est viewport-relatif (zéro dépendance au root) : * il est conservé tel quel. Le zoom navigateur scale les px ; les `vi` assurent le * fluide responsive (WCAG 1.4.4 : max ≤ 2.5 × min ✓). * * Conversion depuis l'ancienne échelle rem-base-10 : Xrem → (X×10)px ; `vi` inchangé. * * Viewport : 320px → 1280px · Base : 16px mobile → 18px desktop · Ratio : 1.25 * * Step px min → px max * xs 11 → 13 * s 13 → 15 * m 16 → 18 ← base paragraphe * l 18 → 22 * xl 22 → 27 * 2xl 27 → 33 * 3xl 33 → 41 */ --gas-text-xs: clamp(11px, 10.33px + 0.208vi, 13px); --gas-text-s: clamp(13px, 12.33px + 0.208vi, 15px); --gas-text-m: clamp(16px, 15.33px + 0.208vi, 18px); --gas-text-l: clamp(18px, 16.75px + 0.417vi, 22px); --gas-text-xl: clamp(22px, 20.13px + 0.625vi, 27px); --gas-text-2xl: clamp(27px, 25.00px + 0.625vi, 33px); --gas-text-3xl: clamp(33px, 29.63px + 1.094vi, 41px); /* Poids */ --gas-weight-normal: 400; --gas-weight-medium: 500; --gas-weight-semi: 600; --gas-weight-bold: 700; /* Hauteurs de ligne */ --gas-leading-tight: 1.25; --gas-leading-snug: 1.4; --gas-leading-normal: 1.5; --gas-leading-relaxed: 1.625; --gas-leading-loose: 1.75; /* ============================================= 2. TOKENS — Espacement ============================================= */ --gas-site-max-width: 1280px; --gas-admin-fullwidth-max: 1600px; --gas-space-2xs: 3px; /* 3px (px : invariant au root) */ --gas-space-xs: calc(var(--gas-space-unit) * 1); /* 4px */ --gas-space-s: calc(var(--gas-space-unit) * 2); /* 8px */ --gas-space-m: calc(var(--gas-space-unit) * 4); /* 16px */ --gas-space-l: calc(var(--gas-space-unit) * 6); /* 24px */ --gas-space-xl: calc(var(--gas-space-unit) * 8); /* 32px */ --gas-space-2xl: calc(var(--gas-space-unit) * 12); /* 48px */ --gas-space-3xl: calc(var(--gas-space-unit) * 16); /* 64px */ /* ============================================= 2. TOKENS — Bordures, Radius, Ombres ============================================= */ --gas-radius-s: var(--gas-radius-unit); /* 4px */ --gas-radius-m: calc(var(--gas-radius-unit) * 2); /* 8px */ --gas-radius-l: calc(var(--gas-radius-unit) * 3); /* 12px */ --gas-radius-xl: calc(var(--gas-radius-unit) * 4); /* 16px */ --gas-radius-full: 9999px; --gas-border-color: var(--gas-neutral-300); --gas-border-color-strong: var(--gas-neutral-400); --gas-border-width: 1px; --gas-border-width-medium: 3px; --gas-border-width-thick: 4px; --gas-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --gas-shadow-s: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --gas-shadow-m: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04); --gas-shadow-l: 0 10px 30px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.04); --gas-shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.14), 0 8px 16px rgba(0, 0, 0, 0.06); /* ============================================= 2. TOKENS — Backgrounds ============================================= */ --gas-bg-page: var(--gas-neutral-100); --gas-bg-surface: #fff; --gas-bg-surface-alt: var(--gas-neutral-50); --gas-bg-elevated: #fff; --gas-bg-inset: var(--gas-neutral-100); --gas-bg-overlay: rgba(0, 0, 0, 0.45); --gas-bg: var(--gas-bg-surface); --gas-bg-secondary: var(--gas-bg-surface-alt); /* Utilitaires */ --gas-white: #fff; --gas-black: var(--gas-neutral-900); /* Variantes primaire supplémentaires */ --gas-primary-semi-light: hsl(var(--gas-primary-h) var(--gas-primary-s) calc(var(--gas-primary-l) + 30%)); --gas-primary-ultra-dark: hsl(var(--gas-primary-h) var(--gas-primary-s) calc(var(--gas-primary-l) - 20%)); /* Variantes secondaire supplémentaires */ --gas-secondary-semi-light: hsl(var(--gas-secondary-h) var(--gas-secondary-s) calc(var(--gas-secondary-l) + 30%)); --gas-secondary-ultra-dark: hsl(var(--gas-secondary-h) var(--gas-secondary-s) calc(var(--gas-secondary-l) - 20%)); /* Variantes accent supplémentaires */ --gas-accent-semi-light: hsl(var(--gas-accent-h) var(--gas-accent-s) calc(var(--gas-accent-l) + 35%)); --gas-accent-ultra-dark: hsl(var(--gas-accent-h) var(--gas-accent-s) calc(var(--gas-accent-l) - 18%)); /* Tokens d'intention (alias sémantiques utilisés par le shared kit React) */ --gas-color-intent-primary: var(--gas-primary); --gas-color-intent-secondary: var(--gas-secondary); --gas-color-intent-success: var(--gas-success); --gas-color-intent-warning: var(--gas-warning); --gas-color-intent-danger: var(--gas-danger); --gas-color-intent-info: var(--gas-info); --gas-color-intent-danger-text: var(--gas-danger-dark); --gas-color-intent-primary-soft: var(--gas-primary-ultra-light); /* Surfaces / textes / bordures sémantiques (alias kit React). ⚠️ NE PAS SUPPRIMER : sans ces définitions, les nombreux `var(--gas-color-surface-card, #fff)` reposent sur leur seul fallback, et toute référence l'oubliant (popups dupliquées du rich editor, panier…) devient transparente / illisible. Incidents récurrents : bug panier 2026-05-29 + popup IA activités. */ --gas-color-surface: var(--gas-bg-surface); --gas-color-surface-card: var(--gas-bg-surface); --gas-color-surface-default: var(--gas-color-surface-card); --gas-color-surface-alt: var(--gas-bg-surface-alt); --gas-color-surface-muted: var(--gas-bg-surface-alt); --gas-color-surface-2: var(--gas-color-surface-alt); --gas-surface: var(--gas-color-surface); --gas-surface-card: var(--gas-color-surface-card); --gas-surface-alt: var(--gas-color-surface-alt); --gas-surface-muted: var(--gas-color-surface-muted); --gas-surface-subtle: var(--gas-color-surface-muted); --gas-surface-color: var(--gas-color-surface-card); --gas-surface-color-subtle: var(--gas-color-surface-muted); --gas-surface-color-primary-subtle: var(--gas-color-intent-primary-soft); --gas-bg-soft: var(--gas-color-surface-muted); --gas-bg-subtle: var(--gas-color-bg-subtle); --gas-bg-hover: var(--gas-color-bg-hover); --gas-bg-surface-subtle: var(--gas-color-surface-muted); --gas-bg-surface-hover: var(--gas-color-bg-hover); --gas-color-border-default: var(--gas-border-color); --gas-color-border: var(--gas-border-color); --gas-color-border-light: var(--gas-neutral-200); --gas-color-border-strong: var(--gas-border-color-strong); --gas-border-color-light: var(--gas-color-border-light); --gas-border-color-subtle: var(--gas-color-border-light); --gas-color-bg-subtle: var(--gas-bg-surface-alt); --gas-color-bg-secondary: var(--gas-bg-surface-alt); --gas-color-bg-hover: var(--gas-neutral-100); --gas-color-background: var(--gas-color-bg-secondary); --gas-color-text-default: var(--gas-text-color); --gas-color-text-muted: var(--gas-text-color-muted); --gas-color-text: var(--gas-text-color); --gas-color-text-muted: var(--gas-text-color-muted); --gas-color-text-strong: var(--gas-neutral-900); --gas-color-text-secondary: var(--gas-text-secondary); --gas-color-text-subtle: var(--gas-text-color-muted); --gas-color-primary: var(--gas-primary); --gas-color-primary-600: var(--gas-primary); --gas-color-primary-dark: var(--gas-primary-dark); --gas-color-primary-light: var(--gas-primary-ultra-light); --gas-color-primary-soft: var(--gas-primary-ultra-light); --gas-color-primary-bg: var(--gas-primary-ultra-light); --gas-color-primary-fg: var(--gas-primary); --gas-primary-50: var(--gas-primary-ultra-light); --gas-primary-100: var(--gas-primary-ultra-light); --gas-primary-200: var(--gas-primary-semi-light); --gas-primary-300: var(--gas-primary-light); --gas-primary-400: var(--gas-primary-light); --gas-primary-500: var(--gas-primary); --gas-primary-600: var(--gas-primary); --gas-primary-700: var(--gas-primary-dark); /* ⚠️ Échelles numériques -50..-700 (ci-dessus) : alias de compatibilité Tailwind-style, DÉPRÉCIÉES pour le nouveau code (<30 usages). Utiliser -ultra-light/-light/-dark/-ultra-dark. */ --gas-color-primary-ring: color-mix(in srgb, var(--gas-primary) 18%, transparent); --gas-color-on-primary: var(--gas-text-color-inverse); --gas-text-on-primary: var(--gas-color-on-primary); --gas-color-success: var(--gas-success); --gas-color-success-light: var(--gas-success-light); --gas-color-success-bg: var(--gas-success-light); --gas-color-intent-success-subtle: var(--gas-color-success-bg); --gas-success-soft: var(--gas-color-success-bg); --gas-success-50: var(--gas-success-light); --gas-success-100: var(--gas-success-light); --gas-success-200: var(--gas-success-lighter); --gas-success-700: var(--gas-success-dark); --gas-color-success-border: var(--gas-success-lighter); --gas-color-success-text: var(--gas-success-text); --gas-color-warning: var(--gas-warning); --gas-color-warning-bg: var(--gas-warning-light); --gas-color-intent-warning-subtle: var(--gas-color-warning-bg); --gas-warning-50: var(--gas-warning-light); --gas-warning-100: var(--gas-warning-light); --gas-warning-200: var(--gas-warning-lighter); --gas-warning-300: var(--gas-warning-lighter); --gas-warning-600: var(--gas-warning-dark); --gas-warning-700: var(--gas-warning-dark); --gas-warning-800: var(--gas-warning-text-strong); --gas-color-warning-border: var(--gas-warning-lighter); --gas-color-warning-text: var(--gas-warning-text); --gas-color-danger: var(--gas-danger); --gas-color-danger-bg: var(--gas-danger-light); --gas-color-intent-danger-subtle: var(--gas-color-danger-bg); --gas-danger-soft: var(--gas-color-danger-bg); --gas-danger-50: var(--gas-danger-light); --gas-danger-100: var(--gas-danger-light); --gas-danger-200: var(--gas-danger-border); --gas-danger-600: var(--gas-danger); --gas-danger-700: var(--gas-danger-dark); --gas-color-danger-border: var(--gas-danger-border); --gas-color-danger-text: var(--gas-danger-dark); --gas-color-info: var(--gas-info); --gas-color-info-bg: var(--gas-info-light); --gas-color-intent-info-subtle: var(--gas-color-info-bg); --gas-info-50: var(--gas-info-light); --gas-info-100: var(--gas-info-light); --gas-info-200: var(--gas-info-lighter); --gas-info-700: var(--gas-info-dark); --gas-color-info-border: var(--gas-info-lighter); --gas-color-info-text: var(--gas-info-text); /* ============================================= 2. TOKENS — Texte ============================================= */ --gas-text-color: var(--gas-neutral-800); --gas-text-color-light: var(--gas-neutral-600); --gas-text-color-muted: var(--gas-neutral-700); --gas-text-color-inverse: #fff; --gas-text-color-link: var(--gas-primary); --gas-text-color-link-hover: var(--gas-primary-dark); --gas-text-primary: var(--gas-text-color); --gas-text-secondary: var(--gas-neutral-600); --gas-text-muted: var(--gas-text-color-muted); --gas-text: var(--gas-text-color); --gas-text-tertiary: var(--gas-text-color-muted); --gas-border: var(--gas-border-color); /* ============================================= 2. TOKENS — Transitions ============================================= */ --gas-transition-fast: 0.1s ease; --gas-transition-normal: 0.15s ease; --gas-transition-slow: 0.25s ease; /* ============================================= 3. COMPOSANTS — Boutons ============================================= */ --gas-button-font-size: var(--gas-text-s); --gas-button-font-weight: var(--gas-weight-medium); --gas-button-padding-y: var(--gas-space-s); --gas-button-padding-x: var(--gas-space-m); --gas-button-radius: var(--gas-radius-s); --gas-button-transition: var(--gas-transition-normal); --gas-button-sm-padding-y: var(--gas-space-xs); --gas-button-sm-padding-x: 10px; --gas-button-sm-font-size: var(--gas-text-xs); --gas-button-primary-bg: var(--gas-primary); --gas-button-primary-bg-hover: var(--gas-primary-dark); --gas-button-primary-color: var(--gas-text-color-inverse); --gas-button-success-bg: var(--gas-success); --gas-button-success-color: var(--gas-text-color-inverse); --gas-button-warning-color: var(--gas-warning-text-strong); --gas-button-info-color: #082f49; --gas-button-danger-bg: var(--gas-danger); --gas-button-danger-color: var(--gas-text-color-inverse); --gas-button-secondary-bg: var(--gas-neutral-200); --gas-button-secondary-color: var(--gas-neutral-800); --gas-button-secondary-border: var(--gas-neutral-400); --gas-switch-checked-bg: var(--gas-primary); --gas-switch-checked-border: var(--gas-primary-dark); /* ============================================= 3. COMPOSANTS — Inputs & Forms ============================================= */ --gas-input-height: 38px; --gas-input-font-size: var(--gas-text-s); --gas-input-padding: 5px 10px; --gas-input-inline-gap: 6px; --gas-input-inner-offset: 2px; --gas-textarea-min-height: 96px; --gas-select-item-min-height: 38px; --gas-checkbox-size: 16px; --gas-map-mobile-height: 220px; --gas-datepicker-width: 300px; --gas-datepicker-nav-size: 36px; --gas-datepicker-day-size: 34px; --gas-datepicker-footer-button-height: 32px; --gas-input-radius: var(--gas-radius-s); --gas-input-border: var(--gas-border-color-strong); --gas-input-bg: var(--gas-bg-surface); --gas-input-color: var(--gas-text-color); --gas-input-bg-disabled: var(--gas-neutral-100); --gas-input-color-disabled: var(--gas-neutral-400); --gas-input-focus-border: var(--gas-primary); --gas-input-focus-shadow: 0 0 0 1px var(--gas-primary); --gas-input-placeholder: var(--gas-neutral-400); --gas-label-font-size: var(--gas-text-s); --gas-label-font-weight: var(--gas-weight-semi); --gas-label-color: var(--gas-neutral-800); --gas-help-font-size: var(--gas-text-xs); --gas-help-color: var(--gas-neutral-500); /* ============================================= 3. COMPOSANTS — Cards & Surfaces ============================================= */ --gas-card-bg: var(--gas-bg-surface); --gas-card-border: var(--gas-border-color); --gas-card-radius: var(--gas-radius-m); --gas-card-padding: var(--gas-space-l); --gas-card-shadow: var(--gas-shadow-xs); --gas-section-bg: var(--gas-neutral-50); --gas-section-border: var(--gas-primary); --gas-section-radius: 0 var(--gas-radius-m) var(--gas-radius-m) 0; --gas-section-padding-y: var(--gas-space-l); --gas-section-padding-x: var(--gas-space-l); /* ============================================= 3. COMPOSANTS — Header admin ============================================= */ --gas-header-bg: var(--gas-neutral-900); --gas-header-color: var(--gas-text-color-inverse); --gas-header-padding: 12px var(--gas-space-l); --gas-header-radius: var(--gas-radius-m); --gas-header-shadow: var(--gas-shadow-m); --gas-header-min-h: 56px; --gas-topbar-bg: var(--gas-neutral-900); --gas-topbar-color: var(--gas-neutral-100); --gas-topbar-line: color-mix(in srgb, var(--gas-topbar-color) 15%, transparent); --gas-topbar-hover-bg: color-mix(in srgb, var(--gas-topbar-color) 12%, transparent); --gas-topbar-active-bg: color-mix(in srgb, var(--gas-topbar-color) 18%, transparent); --gas-topbar-active-color: var(--gas-text-color-inverse); /* ============================================= 3. COMPOSANTS — Tabs ============================================= */ --gas-tab-font-size: var(--gas-text-s); --gas-tab-font-weight: var(--gas-weight-medium); --gas-tab-color: var(--gas-neutral-500); --gas-tab-color-hover: var(--gas-neutral-800); --gas-tab-color-active: var(--gas-primary); --gas-tab-border-active: var(--gas-primary); --gas-tab-padding: 10px var(--gas-space-m); /* ============================================= 3. COMPOSANTS — Badges & Pills ============================================= */ --gas-pill-font-size: var(--gas-text-xs); --gas-pill-font-weight: var(--gas-weight-semi); --gas-pill-padding: 2px var(--gas-space-s); --gas-pill-radius: var(--gas-radius-full); --gas-pill-published-bg: var(--gas-success); --gas-pill-published-color: var(--gas-text-color-inverse); --gas-pill-draft-bg: rgba(255, 255, 255, 0.15); --gas-pill-draft-color: rgba(255, 255, 255, 0.8); --gas-pill-paused-bg: var(--gas-warning); --gas-pill-paused-color: var(--gas-text-color-inverse); /* Tokens texte sur fond hero sombre (primary background) */ --gas-on-primary-text: rgba(255, 255, 255, 1); --gas-on-primary-text-muted: rgba(255, 255, 255, 0.8); --gas-on-primary-text-subtle: rgba(255, 255, 255, 0.75); --gas-on-primary-divider: rgba(255, 255, 255, 0.2); /* ============================================= 3. COMPOSANTS — Tables ============================================= */ --gas-table-header-bg: var(--gas-neutral-50); --gas-table-header-color: var(--gas-neutral-700); --gas-table-border: var(--gas-neutral-200); --gas-table-row-hover: var(--gas-primary-ultra-light); --gas-table-cell-padding: var(--gas-space-s) var(--gas-space-m); /* Zebra striping — lignes paires transparentes, impaires tintees */ --gas-list-row-bg-even: transparent; --gas-list-row-bg-odd: var(--gas-neutral-50); /* Autosave status — aliases semantiques pour le feedback de sauvegarde (consommes par .gas-autosave-status dans gas-admin-partials.css) */ --gas-autosave-saved-color: var(--gas-success); --gas-autosave-saved-bg: var(--gas-success-lighter); --gas-autosave-saved-border: var(--gas-success-light); --gas-autosave-saving-color: var(--gas-primary); --gas-autosave-saving-bg: var(--gas-primary-ultra-light); --gas-autosave-error-color: var(--gas-danger-dark); --gas-autosave-error-bg: var(--gas-danger-light); --gas-autosave-dirty-color: var(--gas-neutral-600); --gas-autosave-dirty-bg: var(--gas-neutral-100); /* ============================================= 3. COMPOSANTS — Modals ============================================= */ --gas-modal-bg: var(--gas-bg-surface); --gas-modal-radius: var(--gas-radius-l); --gas-modal-padding: var(--gas-space-l); --gas-modal-shadow: var(--gas-shadow-xl); --gas-modal-overlay: var(--gas-bg-overlay); /* ============================================= 3. COMPOSANTS — Notifications / Toasts ============================================= */ --gas-toast-radius: var(--gas-radius-m); --gas-toast-padding: var(--gas-space-m); --gas-toast-shadow: var(--gas-shadow-l); /* ============================================= 3. COMPOSANTS — Rich text editor ============================================= */ --gas-editor-toolbar-bg: var(--gas-neutral-200); --gas-editor-toolbar-border: var(--gas-neutral-300); --gas-editor-content-bg: var(--gas-bg-surface); --gas-editor-min-height: 120px; --gas-editor-border: var(--gas-border-color-strong); --gas-editor-focus-border: var(--gas-primary); /* ============================================= 2. TOKENS — Blocs structurés + alias de compatibilité --------------------------------------------- Tokens consommés par common/assets/css/gas-blocks.css. Mappés sur la palette du site (jamais de hex hardcodé). Trois groupes : (a) alias --gas-color-* manquants ; (b) noms alternatifs (radius-md vs -m, space-4 vs -m, text-sm, font-heading…) qui échouaient en fallback silencieux ; (c) modifiers tone / density / container (étaient inertes : tokens absents). NB : --gas-block-section-* / --gas-block-row-columns / --gas-pathway-card-bg / --gas-its-decor restent posés EN INLINE par les renderers (pas des tokens). ============================================= */ /* (a) Alias --gas-color-* manquants (le reste est défini plus haut + dark mode) */ --gas-color-accent: var(--gas-accent); /* Texte d'accent/primary LISIBLE : tokens dédiés au TEXTE coloré de marque (eyebrows, prix, liens « Découvrir → », ✓). Distincts de --gas-color-accent (qui sert aussi de FOND de badge/bouton). Calibrés AA sur fond clair, puis réassignés en thème sombre + bandes teintées (is-tone-*) plus bas. */ --gas-accent-text: var(--gas-accent-ultra-dark); --gas-primary-text: var(--gas-color-primary); --gas-color-accent-soft: var(--gas-accent-ultra-light); --gas-color-accent-bg: var(--gas-accent-ultra-light); --gas-color-accent-fg: var(--gas-accent-dark); --gas-color-secondary: var(--gas-secondary); --gas-color-secondary-soft: var(--gas-secondary-ultra-light); --gas-color-surface-soft: var(--gas-neutral-50); --gas-color-surface-hover: var(--gas-neutral-100); --gas-color-white: var(--gas-white); /* (b) Noms alternatifs (suffixes abrégés / numériques). Valeurs en px (invariantes au root). ⚠️ DÉPRÉCIÉ pour le nouveau code (audit 2026-06-11) : ces variantes sont des alias de compatibilité. Variantes canoniques à utiliser : - espacement : --gas-space-{2xs|xs|s|m|l|xl|2xl|3xl} (PAS --gas-space-1..10, ~340 usages résiduels contre ~52 000 pour les noms canoniques) - radius : --gas-radius-{xs|s|m|l|xl|full} (PAS -sm/-md/-lg) - texte : --gas-text-{xs|s|m|l|xl|2xl|3xl} (PAS -sm/-lg) Ne pas supprimer sans migrer les usages restants. */ --gas-radius-xs: 2px; /* 2px (px : invariant au root) */ --gas-radius-sm: var(--gas-radius-s); /* 4px */ --gas-radius-md: var(--gas-radius-m); /* 8px */ --gas-radius-lg: var(--gas-radius-l); /* 12px */ --gas-space-1: var(--gas-space-xs); /* 4px */ --gas-space-2: var(--gas-space-s); /* 8px */ --gas-space-3: 12px; /* 12px (px : invariant au root) */ --gas-space-4: var(--gas-space-m); /* 16px */ --gas-space-5: 20px; /* 20px (px : invariant au root) */ --gas-space-6: var(--gas-space-l); /* 24px */ --gas-space-8: var(--gas-space-xl); /* 32px */ --gas-space-10: 40px; /* 40px (px : invariant au root) */ --gas-text-sm: var(--gas-text-s); --gas-text-lg: var(--gas-text-l); --gas-text-4xl: clamp(40px, 34px + 2vi, 52px); /* px : invariant au root (cf. échelle ci-dessus) */ --gas-font-base: var(--gas-font-family); /* La police de titre éditée (design_tokens.font_family_heading) est exportée en --gas-font-family-heading : on la consomme ici, avec repli sur la base. */ --gas-font-heading: var(--gas-font-family-heading, var(--gas-font-family)); --gas-font-serif: Georgia, "Times New Roman", serif; --gas-content-max-width: var(--gas-container-default); --gas-wide-max-width: var(--gas-container-wide); --gas-border-subtle: var(--gas-neutral-200); --gas-prose-leading: var(--gas-leading-normal); --gas-block-gap-m: var(--gas-space-l); --gas-block-gap-l: var(--gas-space-xl); --gas-block-pad-x: var(--gas-space-l); --gas-aspect-square: 1 / 1; --gas-aspect-card: 4 / 3; /* (c) Tone — surfaces sémantiques des sections (modifier is-tone-{value}) */ --gas-tone-surface-bg: transparent; --gas-tone-surface-fg: var(--gas-text-color); --gas-tone-accent-bg: var(--gas-accent-ultra-light); --gas-tone-accent-fg: var(--gas-neutral-900); --gas-tone-primary-bg: var(--gas-primary); --gas-tone-primary-fg: var(--gas-white); /* « Ton sombre » = surface volontairement foncée, identique en thème clair ET sombre (ne PAS référencer --gas-neutral-900 qui s'inverse en dark mode, sinon fond clair + texte clair = illisible). Littéraux fixes. */ --gas-tone-dark-bg: #111827; --gas-tone-dark-fg: #f9fafb; --gas-tone-primary-soft-bg: var(--gas-primary-ultra-light); --gas-tone-primary-soft-fg: var(--gas-primary-dark); --gas-tone-muted-bg: var(--gas-neutral-50); --gas-tone-muted-fg: var(--gas-neutral-800); /* (c) Density — multiplicateur d'espacement (les blocs multiplient par var(--gas-density,1)) */ --gas-density-compact: 0.7; --gas-density-comfortable: 1; --gas-density-spacious: 1.4; --gas-density: var(--gas-density-comfortable); /* (c) Container — largeur max de contenu (max-width: var(--gas-container, …)) */ --gas-container-narrow: 640px; /* 640px (px : invariant au root) */ --gas-container-default: 800px; /* 800px (px : invariant au root) */ --gas-container-wide: 1120px; /* 1120px (px : invariant au root) */ --gas-container-full: none; /* pleine largeur — 36 schémas déclarent container=full */ --gas-container: var(--gas-container-default); /* Anneau de focus clavier (a11y) — consommé par gas-buttons.css + règle générique blocs */ --gas-focus-ring-color: var(--gas-primary); --gas-focus-ring-width: 2px; --gas-focus-ring-offset: 2px; /* ============================================= 2. TOKENS — Alias consommés par le kit React partagé --------------------------------------------- Ces tokens étaient utilisés par resources/react/shared/kit/ sans être définis nulle part : les usages avec fallback rendaient leur valeur hardcodée, les usages SANS fallback (ex. --gas-radius-control ×20) tombaient sur la valeur initiale de la propriété (bug silencieux). Tous sont des alias de tokens existants → ils s'adaptent automatiquement au thème sombre et aux palettes tenant. Audit 2026-06-11. ============================================= */ --gas-border-default: var(--gas-border-color); --gas-color-border-focus: var(--gas-input-focus-border); --gas-color-danger-soft: var(--gas-color-danger-bg); --gas-color-success-soft: var(--gas-color-success-bg); --gas-color-warning-soft: var(--gas-color-warning-bg); --gas-warning-soft: var(--gas-color-warning-bg); --gas-color-surface-raised: var(--gas-bg-elevated); --gas-error: var(--gas-danger); --gas-primary-soft: var(--gas-primary-ultra-light); --gas-radius-card: var(--gas-card-radius); /* 8px */ --gas-radius-control: var(--gas-radius-m); /* 8px — cf. docs/dev-en-cours/design/design-react-concept.md */ --gas-radius-pill: var(--gas-radius-full); --gas-react-sidebar-width: 260px; --gas-shadow-card-hover: var(--gas-shadow-m); --gas-shadow-dropdown: var(--gas-shadow-l); --gas-space-3xs: 2px; /* 2px (px : invariant au root) */ --gas-space-sm: var(--gas-space-3); /* 12px — les fallbacks kit attendaient 12px, PAS l'alias de -s */ --gas-space-xxs: var(--gas-space-xs); /* 4px — fallback kit dominant */ --gas-success-bg: var(--gas-color-success-bg); --gas-warning-bg: var(--gas-color-warning-bg); --gas-text-default: var(--gas-text-color); } /* ============================================= THEME SOMBRE — overrides semantiques ============================================= */ :root[data-theme="dark"] { color-scheme: dark; /* Compatibilité legacy admin : certains écrans anciens utilisent encore directement les primitives neutres pour textes, fonds et bordures. */ --gas-neutral-900: #f8fafc; --gas-neutral-800: #e2e8f0; --gas-neutral-700: #cbd5e1; --gas-neutral-600: #94a3b8; --gas-neutral-500: #64748b; --gas-neutral-400: #475569; --gas-neutral-300: #3f3f46; --gas-neutral-200: #323232; --gas-neutral-100: #262626; --gas-neutral-50: #171717; --gas-bg-page: #121212; --gas-bg-surface: #1e1e1e; --gas-bg-surface-alt: #171717; --gas-bg-elevated: #262626; --gas-bg-inset: #101010; --gas-bg-overlay: rgba(0, 0, 0, 0.68); --gas-bg: var(--gas-bg-surface); --gas-bg-secondary: var(--gas-bg-surface-alt); --gas-border-color: #3a3a3a; --gas-border-color-strong: #5f6368; --gas-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --gas-shadow-s: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30); --gas-shadow-m: 0 10px 24px rgba(0, 0, 0, 0.38), 0 2px 6px rgba(0, 0, 0, 0.28); --gas-shadow-l: 0 18px 46px rgba(0, 0, 0, 0.46), 0 8px 16px rgba(0, 0, 0, 0.30); --gas-shadow-xl: 0 28px 70px rgba(0, 0, 0, 0.58), 0 12px 28px rgba(0, 0, 0, 0.36); --gas-text-color: #f8fafc; --gas-text-color-light: #cbd5e1; --gas-text-color-muted: #94a3b8; --gas-text-color-inverse: #ffffff; --gas-text-color-link: #7dd3fc; --gas-text-color-link-hover: #bae6fd; --gas-text-primary: var(--gas-text-color); --gas-text-secondary: #cbd5e1; --gas-text-muted: var(--gas-text-color-muted); --gas-primary-dark: hsl(var(--gas-primary-h) var(--gas-primary-s) calc(var(--gas-primary-l) + 10%)); --gas-primary-light: hsl(var(--gas-primary-h) calc(var(--gas-primary-s) - 10%) 72%); --gas-primary-ultra-light: color-mix(in srgb, var(--gas-primary) 24%, #121212); --gas-secondary-ultra-light: color-mix(in srgb, var(--gas-secondary) 22%, #121212); --gas-accent-ultra-light: color-mix(in srgb, var(--gas-accent) 22%, #121212); /* En sombre, le texte de marque s'éclaircit (l'ultra-dark serait illisible). */ --gas-accent-text: var(--gas-accent-light); --gas-primary-text: var(--gas-primary-light); --gas-success: #15803d; --gas-success-light: rgba(34, 197, 94, 0.18); --gas-success-lighter: rgba(34, 197, 94, 0.28); --gas-success-dark: hsl(152, 62%, 58%); --gas-success-text: #bbf7d0; --gas-warning: hsl(42, 92%, 56%); --gas-warning-light: rgba(245, 158, 11, 0.18); --gas-warning-lighter: rgba(245, 158, 11, 0.28); --gas-warning-dark: hsl(42, 92%, 64%); --gas-warning-text: #fde68a; --gas-warning-text-strong: #fef3c7; --gas-danger: hsl(0, 72%, 62%); --gas-danger-light: rgba(248, 113, 113, 0.18); --gas-danger-dark: hsl(0, 72%, 72%); --gas-danger-border: rgba(248, 113, 113, 0.38); --gas-info: hsl(199, 89%, 58%); --gas-info-light: rgba(56, 189, 248, 0.18); --gas-info-lighter: rgba(56, 189, 248, 0.28); --gas-info-dark: hsl(199, 89%, 70%); --gas-info-hover: hsl(199, 89%, 66%); --gas-info-text: #bae6fd; --gas-color-intent-primary: var(--gas-primary-light); --gas-color-intent-secondary: var(--gas-secondary-light); --gas-color-intent-success: var(--gas-success); --gas-color-intent-warning: var(--gas-warning); --gas-color-intent-danger: var(--gas-danger); --gas-color-intent-info: var(--gas-info); --gas-color-intent-danger-text: #fecaca; --gas-color-intent-primary-soft: var(--gas-primary-ultra-light); --gas-color-surface: var(--gas-bg-surface); --gas-color-surface-card: #1e1e1e; --gas-color-surface-default: var(--gas-color-surface-card); --gas-color-surface-alt: var(--gas-bg-surface-alt); --gas-color-surface-muted: #2b2b2b; --gas-color-surface-2: var(--gas-color-surface-muted); --gas-surface: var(--gas-color-surface); --gas-surface-card: var(--gas-color-surface-card); --gas-surface-alt: var(--gas-color-surface-alt); --gas-surface-muted: var(--gas-color-surface-muted); --gas-surface-subtle: var(--gas-color-surface-muted); --gas-surface-color: var(--gas-color-surface-card); --gas-surface-color-subtle: var(--gas-color-surface-muted); --gas-surface-color-primary-subtle: var(--gas-color-intent-primary-soft); --gas-bg-soft: var(--gas-color-surface-muted); --gas-bg-subtle: var(--gas-color-bg-subtle); --gas-bg-hover: var(--gas-color-bg-hover); --gas-bg-surface-subtle: var(--gas-color-surface-muted); --gas-bg-surface-hover: var(--gas-color-bg-hover); --gas-color-border-default: var(--gas-border-color); --gas-color-border: var(--gas-border-color); --gas-color-border-light: #3a3a3a; --gas-color-border-strong: var(--gas-border-color-strong); --gas-border-color-light: var(--gas-color-border-light); --gas-border-color-subtle: var(--gas-color-border-light); --gas-color-bg-subtle: var(--gas-color-surface-muted); --gas-color-bg-secondary: var(--gas-bg-surface-alt); --gas-color-bg-hover: #333333; --gas-color-background: var(--gas-color-bg-secondary); --gas-color-text-default: var(--gas-text-color); --gas-color-text-muted: var(--gas-text-color-muted); --gas-color-text: var(--gas-text-color); --gas-color-text-strong: var(--gas-neutral-900); --gas-color-text-secondary: var(--gas-text-secondary); --gas-color-text-subtle: var(--gas-text-color-muted); --gas-color-primary: var(--gas-primary-light); --gas-color-primary-600: var(--gas-primary-light); --gas-color-primary-dark: var(--gas-primary-dark); --gas-color-primary-light: var(--gas-primary-ultra-light); --gas-color-primary-soft: var(--gas-primary-ultra-light); --gas-color-primary-bg: var(--gas-primary-ultra-light); --gas-color-primary-fg: #bae6fd; --gas-primary-50: var(--gas-primary-ultra-light); --gas-primary-100: var(--gas-primary-ultra-light); --gas-primary-200: color-mix(in srgb, var(--gas-primary-light) 32%, #121212); --gas-primary-300: color-mix(in srgb, var(--gas-primary-light) 55%, #121212); --gas-primary-400: var(--gas-primary-light); --gas-primary-500: var(--gas-primary-light); --gas-primary-600: var(--gas-primary-light); --gas-primary-700: #bae6fd; --gas-color-primary-ring: color-mix(in srgb, var(--gas-primary-light) 28%, transparent); --gas-color-on-primary: #082f49; --gas-text-on-primary: var(--gas-color-on-primary); --gas-on-primary: var(--gas-color-on-primary); --gas-color-success: var(--gas-success); --gas-color-success-light: var(--gas-success-light); --gas-color-success-bg: var(--gas-success-light); --gas-color-intent-success-subtle: var(--gas-color-success-bg); --gas-success-soft: var(--gas-color-success-bg); --gas-success-50: var(--gas-success-light); --gas-success-100: var(--gas-success-light); --gas-success-200: var(--gas-success-lighter); --gas-success-700: var(--gas-success-dark); --gas-color-success-border: var(--gas-success-lighter); --gas-color-success-text: var(--gas-success-text); --gas-color-warning: var(--gas-warning); --gas-color-warning-bg: var(--gas-warning-light); --gas-color-intent-warning-subtle: var(--gas-color-warning-bg); --gas-warning-50: var(--gas-warning-light); --gas-warning-100: var(--gas-warning-light); --gas-warning-200: var(--gas-warning-lighter); --gas-warning-300: var(--gas-warning-lighter); --gas-warning-600: var(--gas-warning-dark); --gas-warning-700: var(--gas-warning-dark); --gas-warning-800: var(--gas-warning-text-strong); --gas-color-warning-border: var(--gas-warning-lighter); --gas-color-warning-text: var(--gas-warning-text); --gas-color-danger: var(--gas-danger); --gas-color-danger-bg: var(--gas-danger-light); --gas-color-intent-danger-subtle: var(--gas-color-danger-bg); --gas-danger-soft: var(--gas-color-danger-bg); --gas-danger-50: var(--gas-danger-light); --gas-danger-100: var(--gas-danger-light); --gas-danger-200: var(--gas-danger-border); --gas-danger-600: var(--gas-danger); --gas-danger-700: var(--gas-danger-dark); --gas-color-danger-border: var(--gas-danger-border); --gas-color-danger-text: #fecaca; --gas-color-info: var(--gas-info); --gas-color-info-bg: var(--gas-info-light); --gas-color-intent-info-subtle: var(--gas-color-info-bg); --gas-info-50: var(--gas-info-light); --gas-info-100: var(--gas-info-light); --gas-info-200: var(--gas-info-lighter); --gas-info-700: var(--gas-info-dark); --gas-color-info-border: var(--gas-info-lighter); --gas-color-info-text: var(--gas-info-text); --gas-bg-info: var(--gas-info-light); --gas-button-secondary-bg: #333333; --gas-button-secondary-color: var(--gas-text-color); --gas-button-secondary-border: #525252; --gas-button-primary-color: var(--gas-color-on-primary); --gas-button-success-color: #052e16; --gas-button-warning-color: #422006; --gas-button-info-color: #082f49; --gas-switch-checked-bg: #075985; --gas-switch-checked-border: #38bdf8; --gas-input-border: #6b7280; --gas-input-bg: #101010; --gas-input-color: var(--gas-text-color); --gas-input-bg-disabled: #262626; --gas-input-color-disabled: #9ca3af; --gas-input-placeholder: #cbd5e1; --gas-label-color: var(--gas-text-color); --gas-help-color: var(--gas-text-color-muted); --gas-card-bg: var(--gas-color-surface-card); --gas-card-border: var(--gas-color-border-default); --gas-topbar-bg: #0f172a; --gas-topbar-color: #f8fafc; --gas-topbar-line: color-mix(in srgb, var(--gas-topbar-color) 15%, transparent); --gas-topbar-hover-bg: color-mix(in srgb, var(--gas-topbar-color) 12%, transparent); --gas-topbar-active-bg: color-mix(in srgb, var(--gas-topbar-color) 20%, transparent); --gas-topbar-active-color: #ffffff; --gas-section-bg: var(--gas-bg-surface-alt); --gas-table-header-bg: var(--gas-color-surface-muted); --gas-table-header-color: var(--gas-text-color); --gas-table-border: var(--gas-color-border-default); --gas-table-row-hover: var(--gas-primary-ultra-light); --gas-list-row-bg-odd: rgba(255, 255, 255, 0.03); --gas-modal-bg: var(--gas-color-surface-card); --gas-editor-toolbar-bg: #262626; --gas-editor-toolbar-border: var(--gas-color-border-default); --gas-editor-content-bg: var(--gas-bg-elevated); --gas-editor-border: var(--gas-border-color-strong); } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { color-scheme: dark; --gas-neutral-900: #f8fafc; --gas-neutral-800: #e2e8f0; --gas-neutral-700: #cbd5e1; --gas-neutral-600: #94a3b8; --gas-neutral-500: #64748b; --gas-neutral-400: #475569; --gas-neutral-300: #3f3f46; --gas-neutral-200: #323232; --gas-neutral-100: #262626; --gas-neutral-50: #171717; --gas-bg-page: #121212; --gas-bg-surface: #1e1e1e; --gas-bg-surface-alt: #171717; --gas-bg-elevated: #262626; --gas-bg-inset: #101010; --gas-bg-overlay: rgba(0, 0, 0, 0.68); --gas-bg: var(--gas-bg-surface); --gas-bg-secondary: var(--gas-bg-surface-alt); --gas-border-color: #3a3a3a; --gas-border-color-strong: #5f6368; --gas-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --gas-shadow-s: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30); --gas-shadow-m: 0 10px 24px rgba(0, 0, 0, 0.38), 0 2px 6px rgba(0, 0, 0, 0.28); --gas-shadow-l: 0 18px 46px rgba(0, 0, 0, 0.46), 0 8px 16px rgba(0, 0, 0, 0.30); --gas-shadow-xl: 0 28px 70px rgba(0, 0, 0, 0.58), 0 12px 28px rgba(0, 0, 0, 0.36); --gas-text-color: #f8fafc; --gas-text-color-light: #cbd5e1; --gas-text-color-muted: #94a3b8; --gas-text-color-inverse: #ffffff; --gas-text-color-link: #7dd3fc; --gas-text-color-link-hover: #bae6fd; --gas-text-primary: var(--gas-text-color); --gas-text-secondary: #cbd5e1; --gas-text-muted: var(--gas-text-color-muted); --gas-primary-dark: hsl(var(--gas-primary-h) var(--gas-primary-s) calc(var(--gas-primary-l) + 10%)); --gas-primary-light: hsl(var(--gas-primary-h) calc(var(--gas-primary-s) - 10%) 72%); --gas-primary-ultra-light: color-mix(in srgb, var(--gas-primary) 24%, #121212); --gas-secondary-ultra-light: color-mix(in srgb, var(--gas-secondary) 22%, #121212); --gas-accent-ultra-light: color-mix(in srgb, var(--gas-accent) 22%, #121212); /* En sombre, le texte de marque doit s'ÉCLAIRCIR (l'ultra-dark serait illisible). */ --gas-accent-text: var(--gas-accent-light); --gas-primary-text: var(--gas-primary-light); --gas-success: #15803d; --gas-success-light: rgba(34, 197, 94, 0.18); --gas-success-lighter: rgba(34, 197, 94, 0.28); --gas-success-dark: hsl(152, 62%, 58%); --gas-success-text: #bbf7d0; --gas-warning: hsl(42, 92%, 56%); --gas-warning-light: rgba(245, 158, 11, 0.18); --gas-warning-lighter: rgba(245, 158, 11, 0.28); --gas-warning-dark: hsl(42, 92%, 64%); --gas-warning-text: #fde68a; --gas-warning-text-strong: #fef3c7; --gas-danger: hsl(0, 72%, 62%); --gas-danger-light: rgba(248, 113, 113, 0.18); --gas-danger-dark: hsl(0, 72%, 72%); --gas-danger-border: rgba(248, 113, 113, 0.38); --gas-info: hsl(199, 89%, 58%); --gas-info-light: rgba(56, 189, 248, 0.18); --gas-info-lighter: rgba(56, 189, 248, 0.28); --gas-info-dark: hsl(199, 89%, 70%); --gas-info-hover: hsl(199, 89%, 66%); --gas-info-text: #bae6fd; --gas-color-intent-primary: var(--gas-primary-light); --gas-color-intent-secondary: var(--gas-secondary-light); --gas-color-intent-success: var(--gas-success); --gas-color-intent-warning: var(--gas-warning); --gas-color-intent-danger: var(--gas-danger); --gas-color-intent-info: var(--gas-info); --gas-color-intent-danger-text: #fecaca; --gas-color-intent-primary-soft: var(--gas-primary-ultra-light); --gas-color-surface: var(--gas-bg-surface); --gas-color-surface-card: #1e1e1e; --gas-color-surface-default: var(--gas-color-surface-card); --gas-color-surface-alt: var(--gas-bg-surface-alt); --gas-color-surface-muted: #2b2b2b; --gas-color-surface-2: var(--gas-color-surface-muted); --gas-surface: var(--gas-color-surface); --gas-surface-card: var(--gas-color-surface-card); --gas-surface-alt: var(--gas-color-surface-alt); --gas-surface-muted: var(--gas-color-surface-muted); --gas-surface-subtle: var(--gas-color-surface-muted); --gas-surface-color: var(--gas-color-surface-card); --gas-surface-color-subtle: var(--gas-color-surface-muted); --gas-surface-color-primary-subtle: var(--gas-color-intent-primary-soft); --gas-bg-soft: var(--gas-color-surface-muted); --gas-bg-subtle: var(--gas-color-bg-subtle); --gas-bg-hover: var(--gas-color-bg-hover); --gas-bg-surface-subtle: var(--gas-color-surface-muted); --gas-bg-surface-hover: var(--gas-color-bg-hover); --gas-color-border-default: var(--gas-border-color); --gas-color-border: var(--gas-border-color); --gas-color-border-light: #3a3a3a; --gas-color-border-strong: var(--gas-border-color-strong); --gas-border-color-light: var(--gas-color-border-light); --gas-border-color-subtle: var(--gas-color-border-light); --gas-color-bg-subtle: var(--gas-color-surface-muted); --gas-color-bg-secondary: var(--gas-bg-surface-alt); --gas-color-bg-hover: #333333; --gas-color-background: var(--gas-color-bg-secondary); --gas-color-text-default: var(--gas-text-color); --gas-color-text-muted: var(--gas-text-color-muted); --gas-color-text: var(--gas-text-color); --gas-color-text-strong: var(--gas-neutral-900); --gas-color-text-secondary: var(--gas-text-secondary); --gas-color-text-subtle: var(--gas-text-color-muted); --gas-color-primary: var(--gas-primary-light); --gas-color-primary-600: var(--gas-primary-light); --gas-color-primary-dark: var(--gas-primary-dark); --gas-color-primary-light: var(--gas-primary-ultra-light); --gas-color-primary-soft: var(--gas-primary-ultra-light); --gas-color-primary-bg: var(--gas-primary-ultra-light); --gas-color-primary-fg: #bae6fd; --gas-primary-50: var(--gas-primary-ultra-light); --gas-primary-100: var(--gas-primary-ultra-light); --gas-primary-200: color-mix(in srgb, var(--gas-primary-light) 32%, #121212); --gas-primary-300: color-mix(in srgb, var(--gas-primary-light) 55%, #121212); --gas-primary-400: var(--gas-primary-light); --gas-primary-500: var(--gas-primary-light); --gas-primary-600: var(--gas-primary-light); --gas-primary-700: #bae6fd; --gas-color-primary-ring: color-mix(in srgb, var(--gas-primary-light) 28%, transparent); --gas-color-on-primary: #082f49; --gas-text-on-primary: var(--gas-color-on-primary); --gas-on-primary: var(--gas-color-on-primary); --gas-color-success: var(--gas-success); --gas-color-success-light: var(--gas-success-light); --gas-color-success-bg: var(--gas-success-light); --gas-color-intent-success-subtle: var(--gas-color-success-bg); --gas-success-soft: var(--gas-color-success-bg); --gas-success-50: var(--gas-success-light); --gas-success-100: var(--gas-success-light); --gas-success-200: var(--gas-success-lighter); --gas-success-700: var(--gas-success-dark); --gas-color-success-border: var(--gas-success-lighter); --gas-color-success-text: var(--gas-success-text); --gas-color-warning: var(--gas-warning); --gas-color-warning-bg: var(--gas-warning-light); --gas-color-intent-warning-subtle: var(--gas-color-warning-bg); --gas-warning-50: var(--gas-warning-light); --gas-warning-100: var(--gas-warning-light); --gas-warning-200: var(--gas-warning-lighter); --gas-warning-300: var(--gas-warning-lighter); --gas-warning-600: var(--gas-warning-dark); --gas-warning-700: var(--gas-warning-dark); --gas-warning-800: var(--gas-warning-text-strong); --gas-color-warning-border: var(--gas-warning-lighter); --gas-color-warning-text: var(--gas-warning-text); --gas-color-danger: var(--gas-danger); --gas-color-danger-bg: var(--gas-danger-light); --gas-color-intent-danger-subtle: var(--gas-color-danger-bg); --gas-danger-soft: var(--gas-color-danger-bg); --gas-danger-50: var(--gas-danger-light); --gas-danger-100: var(--gas-danger-light); --gas-danger-200: var(--gas-danger-border); --gas-danger-600: var(--gas-danger); --gas-danger-700: var(--gas-danger-dark); --gas-color-danger-border: var(--gas-danger-border); --gas-color-danger-text: #fecaca; --gas-color-info: var(--gas-info); --gas-color-info-bg: var(--gas-info-light); --gas-color-intent-info-subtle: var(--gas-color-info-bg); --gas-info-50: var(--gas-info-light); --gas-info-100: var(--gas-info-light); --gas-info-200: var(--gas-info-lighter); --gas-info-700: var(--gas-info-dark); --gas-color-info-border: var(--gas-info-lighter); --gas-color-info-text: var(--gas-info-text); --gas-bg-info: var(--gas-info-light); --gas-button-secondary-bg: #333333; --gas-button-secondary-color: var(--gas-text-color); --gas-button-secondary-border: #525252; --gas-button-primary-color: var(--gas-color-on-primary); --gas-button-success-color: #052e16; --gas-button-warning-color: #422006; --gas-button-info-color: #082f49; --gas-switch-checked-bg: #075985; --gas-switch-checked-border: #38bdf8; --gas-input-border: #6b7280; --gas-input-bg: #101010; --gas-input-color: var(--gas-text-color); --gas-input-bg-disabled: #262626; --gas-input-color-disabled: #9ca3af; --gas-input-placeholder: #cbd5e1; --gas-label-color: var(--gas-text-color); --gas-help-color: var(--gas-text-color-muted); --gas-card-bg: var(--gas-color-surface-card); --gas-card-border: var(--gas-color-border-default); --gas-topbar-bg: #0f172a; --gas-topbar-color: #f8fafc; --gas-topbar-line: color-mix(in srgb, var(--gas-topbar-color) 15%, transparent); --gas-topbar-hover-bg: color-mix(in srgb, var(--gas-topbar-color) 12%, transparent); --gas-topbar-active-bg: color-mix(in srgb, var(--gas-topbar-color) 20%, transparent); --gas-topbar-active-color: #ffffff; --gas-section-bg: var(--gas-bg-surface-alt); --gas-table-header-bg: var(--gas-color-surface-muted); --gas-table-header-color: var(--gas-text-color); --gas-table-border: var(--gas-color-border-default); --gas-table-row-hover: var(--gas-primary-ultra-light); --gas-list-row-bg-odd: rgba(255, 255, 255, 0.03); --gas-modal-bg: var(--gas-color-surface-card); --gas-editor-toolbar-bg: #262626; --gas-editor-toolbar-border: var(--gas-color-border-default); --gas-editor-content-bg: var(--gas-bg-elevated); --gas-editor-border: var(--gas-border-color-strong); } } /* Icônes inline (GasInlineIcon) : alignement vertical propre avec le texte. width/height = 1em (héritent de la taille de police), couleur = currentColor. */ .gas-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; flex: none; }