/* ============================================================================ DashMail Hexagone — Design Tokens ---------------------------------------------------------------------------- Système de thèmes basé sur la charte graphique Hexagone 2024. 4 thèmes prédéfinis, sélectionnables via [data-theme="..."] sur . Usage : → thème par défaut document.documentElement.dataset.theme = 'green-dark'; Tous les composants doivent consommer var(--color-*) — aucun hexcode en dur. ============================================================================ */ /* === FONT === */ @import url('/static/fonts/plus-jakarta-sans.css'); /* ============================================================================ TOKENS GLOBAUX (constants — partagés par tous les thèmes) ============================================================================ */ :root { /* — Palette de marque (charte stricte, ne JAMAIS modifier) — */ --hex-violet: #31084c; --hex-violet-deep: #4a1a6e; --hex-blue: #4541ff; --hex-blue-deep: #102c96; --hex-blue-light: #cdddff; --hex-yellow: #fbba33; --hex-yellow-deep: #db7f12; --hex-green: #00af9f; --hex-green-deep: #00665b; --hex-pink: #dd179c; --hex-pink-deep: #9e1058; --hex-orange: #fa8d39; --hex-orange-deep: #a14600; --hex-white: #ffffff; /* — Typographie — */ --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 28px; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --fw-extra: 800; /* — Espacements — */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* — Rayons — */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 14px; --radius-2xl: 20px; --radius-full: 9999px; /* — Transitions — */ --t-fast: 120ms; --t-medium: 200ms; --t-slow: 320ms; --easing: cubic-bezier(0.4, 0, 0.2, 1); /* — Z-index — */ --z-sidebar: 10; --z-topbar: 20; --z-dropdown: 100; --z-modal: 200; --z-toast: 300; } /* ============================================================================ THÈME 1 — VIOLET LIGHT (défaut, canon Hexagone) ============================================================================ */ :root, [data-theme="violet-light"] { --theme-mode: light; /* Primaire & accents */ --color-primary: var(--hex-violet); --color-primary-hover: var(--hex-violet-deep); --color-primary-soft: #ece4f5; --color-primary-on: #ffffff; /* texte sur fond primaire */ --accent-1: var(--hex-violet); --accent-2: var(--hex-blue); --accent-3: var(--hex-green); --accent-4: var(--hex-orange); --accent-5: var(--hex-pink); /* Surfaces */ --color-bg: #f6f4f9; --color-bg-subtle: #fafaff; --color-card-bg: #ffffff; --color-sidebar-bg: #ffffff; --color-topbar-bg: #ffffff; --color-overlay-bg: rgba(26, 13, 43, 0.5); /* Sidebar interactions */ --color-sidebar-hover-bg: #f4f1f9; --color-sidebar-active-bg: #ece4f5; --color-sidebar-active-fg: var(--hex-violet); /* Bordures & séparateurs */ --color-border: #ece8f1; --color-border-strong:#d8d2e2; --color-divider: #f0ecf5; /* Texte */ --color-text-strong: #1a0d2b; --color-text-body: #3d3450; --color-text-muted: #7a6e8a; --color-text-faint: #b3a9c3; --color-text-on-primary: #ffffff; /* Champs / chips / search */ --color-chip-bg: #f4f1f9; --color-chip-fg: #3d3450; --color-input-bg: #fafafd; --color-input-border: #ece8f1; /* Sémantique */ --color-success: var(--hex-green); --color-success-bg: #dff6f3; --color-warning: var(--hex-orange); --color-warning-bg: #fde8d6; --color-danger: var(--hex-pink); --color-danger-bg: #fcdcef; --color-info: var(--hex-blue); --color-info-bg: #e7e6ff; /* Welcome banner (gradient signature violet) */ --welcome-bg: linear-gradient(135deg, #31084c 0%, #4a1a6e 100%); --welcome-fg: #ffffff; --welcome-avatar-bg: var(--hex-yellow); --welcome-avatar-fg: var(--hex-violet); --welcome-btn-bg: rgba(255,255,255,0.12); --welcome-btn-fg: #ffffff; --welcome-btn-border: rgba(255,255,255,0.25); /* Ombres */ --shadow-sm: 0 1px 2px rgba(49, 8, 76, 0.04); --shadow-md: 0 1px 3px rgba(49, 8, 76, 0.04), 0 1px 2px rgba(49, 8, 76, 0.03); --shadow-lg: 0 4px 12px rgba(49, 8, 76, 0.08), 0 2px 4px rgba(49, 8, 76, 0.04); --shadow-xl: 0 12px 32px rgba(49, 8, 76, 0.12), 0 2px 6px rgba(49, 8, 76, 0.05); --shadow-focus: 0 0 0 3px rgba(49, 8, 76, 0.18); color-scheme: light; } /* ============================================================================ THÈME 2 — BLUE LIGHT (épuré, moderne SaaS) ============================================================================ */ [data-theme="blue-light"] { --theme-mode: light; --color-primary: var(--hex-blue); --color-primary-hover: var(--hex-blue-deep); --color-primary-soft: var(--hex-blue-light); --color-primary-on: #ffffff; --accent-1: var(--hex-blue); --accent-2: var(--hex-violet); --accent-3: var(--hex-green); --accent-4: var(--hex-orange); --accent-5: var(--hex-pink); --color-bg: #f7f8fc; --color-bg-subtle: #fbfcff; --color-card-bg: #ffffff; --color-sidebar-bg: #ffffff; --color-topbar-bg: #ffffff; --color-overlay-bg: rgba(15, 18, 53, 0.5); --color-sidebar-hover-bg: #f0f2fb; --color-sidebar-active-bg: #e8ebff; --color-sidebar-active-fg: var(--hex-blue); --color-border: #eaecf3; --color-border-strong:#d4d8e4; --color-divider: #eef0f8; --color-text-strong: #0f1235; --color-text-body: #3a3d5e; --color-text-muted: #6e72a0; --color-text-faint: #a8acc8; --color-text-on-primary: #ffffff; --color-chip-bg: #eef0f8; --color-chip-fg: #3a3d5e; --color-input-bg: #f8f9fc; --color-input-border: #eaecf3; --color-success: var(--hex-green); --color-success-bg: #dff6f3; --color-warning: var(--hex-orange); --color-warning-bg: #fde8d6; --color-danger: var(--hex-pink); --color-danger-bg: #fcdcef; --color-info: var(--hex-blue); --color-info-bg: var(--hex-blue-light); --welcome-bg: #ffffff; --welcome-fg: #0f1235; --welcome-avatar-bg: var(--hex-blue); --welcome-avatar-fg: #ffffff; --welcome-btn-bg: var(--hex-blue); --welcome-btn-fg: #ffffff; --welcome-btn-border: transparent; --shadow-sm: 0 1px 2px rgba(15, 18, 53, 0.04); --shadow-md: 0 1px 3px rgba(15, 18, 53, 0.04), 0 1px 2px rgba(15, 18, 53, 0.03); --shadow-lg: 0 4px 12px rgba(15, 18, 53, 0.08), 0 2px 4px rgba(15, 18, 53, 0.04); --shadow-xl: 0 12px 32px rgba(15, 18, 53, 0.12), 0 2px 6px rgba(15, 18, 53, 0.05); --shadow-focus: 0 0 0 3px rgba(69, 65, 255, 0.20); color-scheme: light; } /* ============================================================================ THÈME 3 — GREEN DARK (technique ops longue session) ============================================================================ */ [data-theme="green-dark"] { --theme-mode: dark; --color-primary: var(--hex-green); --color-primary-hover: #00c5b3; --color-primary-soft: rgba(0, 175, 159, 0.18); --color-primary-on: #0c1419; --accent-1: var(--hex-green); --accent-2: var(--hex-blue); --accent-3: var(--hex-yellow); --accent-4: var(--hex-orange); --accent-5: var(--hex-pink); --color-bg: #0c1419; --color-bg-subtle: #0f1a20; --color-card-bg: #141f26; --color-sidebar-bg: #0a1115; --color-topbar-bg: #0f1a20; --color-overlay-bg: rgba(0, 0, 0, 0.65); --color-sidebar-hover-bg: #152229; --color-sidebar-active-bg: rgba(0, 175, 159, 0.15); --color-sidebar-active-fg: var(--hex-green); --color-border: #1f2d35; --color-border-strong:#2a3a44; --color-divider: #1a262d; --color-text-strong: #eaf3f3; --color-text-body: #b9c7c8; --color-text-muted: #6e8088; --color-text-faint: #4a5862; --color-text-on-primary: #0c1419; --color-chip-bg: #1a262d; --color-chip-fg: #b9c7c8; --color-input-bg: #0f1a20; --color-input-border: #1f2d35; --color-success: var(--hex-green); --color-success-bg: rgba(0, 175, 159, 0.18); --color-warning: var(--hex-yellow); --color-warning-bg: rgba(251, 186, 51, 0.18); --color-danger: var(--hex-pink); --color-danger-bg: rgba(221, 23, 156, 0.18); --color-info: var(--hex-blue); --color-info-bg: rgba(69, 65, 255, 0.18); --welcome-bg: linear-gradient(135deg, #00665b 0%, #00af9f 100%); --welcome-fg: #ffffff; --welcome-avatar-bg: var(--hex-yellow); --welcome-avatar-fg: var(--hex-green-deep); --welcome-btn-bg: rgba(255,255,255,0.12); --welcome-btn-fg: #ffffff; --welcome-btn-border: rgba(255,255,255,0.22); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.30); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25); --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.45); --shadow-focus: 0 0 0 3px rgba(0, 175, 159, 0.35); color-scheme: dark; } /* ============================================================================ THÈME 4 — MULTICOLOR DARK (audacieux, identité Hexagone complète) ============================================================================ */ [data-theme="multicolor-dark"] { --theme-mode: dark; --color-primary: var(--hex-pink); --color-primary-hover: #ff2eaf; --color-primary-soft: rgba(221, 23, 156, 0.18); --color-primary-on: #ffffff; --accent-1: var(--hex-violet); --accent-2: var(--hex-blue); --accent-3: var(--hex-yellow); --accent-4: var(--hex-orange); --accent-5: var(--hex-pink); --color-bg: #0e0a18; --color-bg-subtle: #13101f; --color-card-bg: #191429; --color-sidebar-bg: #0a0714; --color-topbar-bg: #13101f; --color-overlay-bg: rgba(0, 0, 0, 0.7); --color-sidebar-hover-bg: #1f1834; --color-sidebar-active-bg: rgba(221, 23, 156, 0.15); --color-sidebar-active-fg: var(--hex-pink); --color-border: #241c3c; --color-border-strong:#33285a; --color-divider: #1f1834; --color-text-strong: #f1ecf9; --color-text-body: #bdb3d4; --color-text-muted: #7a6f9c; --color-text-faint: #4f4670; --color-text-on-primary: #ffffff; --color-chip-bg: #1f1834; --color-chip-fg: #bdb3d4; --color-input-bg: #13101f; --color-input-border: #241c3c; --color-success: var(--hex-green); --color-success-bg: rgba(0, 175, 159, 0.18); --color-warning: var(--hex-yellow); --color-warning-bg: rgba(251, 186, 51, 0.18); --color-danger: var(--hex-pink); --color-danger-bg: rgba(221, 23, 156, 0.22); --color-info: var(--hex-blue); --color-info-bg: rgba(69, 65, 255, 0.20); --welcome-bg: linear-gradient(135deg, #31084c 0%, #4541ff 50%, #dd179c 100%); --welcome-fg: #ffffff; --welcome-avatar-bg: var(--hex-yellow); --welcome-avatar-fg: var(--hex-violet); --welcome-btn-bg: rgba(255,255,255,0.14); --welcome-btn-fg: #ffffff; --welcome-btn-border: rgba(255,255,255,0.25); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.35); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.30); --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.50); --shadow-focus: 0 0 0 3px rgba(221, 23, 156, 0.35); color-scheme: dark; } /* ============================================================================ RESET & BASE ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-sans); font-size: var(--fs-base); background: var(--color-bg); color: var(--color-text-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background var(--t-medium) var(--easing), color var(--t-medium) var(--easing); } /* ============================================================================ UTILITAIRES ============================================================================ */ /* Scrollbar harmonisée avec le thème */ .dh-scroll::-webkit-scrollbar, *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-sm); } *::-webkit-scrollbar-thumb:hover { background: var(--color-text-faint); } /* Focus accessibility — un seul ring cohérent partout */ :where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); } /* Sélection de texte */ ::selection { background: var(--color-primary-soft); color: var(--color-text-strong); }