/* ============================================================================= * GITSS Design System — tokens.css * Direction : Modern SaaS, sobre (Linear / Stripe) * Marque : accent sarcelle #2b97a4 · encre navy #16222e * Typographie : Inter (UI/corps) + JetBrains Mono (montants/codes) * Compatible Bootstrap 5.3 — surcharge des --bs-* via les tokens GITSS * ============================================================================= * * STRUCTURE * ────────────────────────────────────────────────────────────────────────────── * 1. @font-face Inter + JetBrains Mono (woff2 variable, OFL) * 2. :root Primitives → composants → Bootstrap 5.3 * 3. [data-bs-theme="dark"] Inversions dark complètes * ============================================================================= */ /* ═══════════════════════════════════════════════════════════════════════════════ 1. @font-face ─ Polices à licence ouverte (SIL OFL 1.1) ─ Télécharger les woff2 et placer dans ../fonts/ ─ Sources : https://fonts.google.com/specimen/Inter https://fonts.google.com/specimen/JetBrains+Mono https://rsms.me/inter/ (Inter — variable complète) https://www.jetbrains.com/lp/mono/ ══════════════════════════════════════════════════════════════════════════════ */ /* * Inter — Variable font (axes : wght 100–900, ital 0–1) * Licence : SIL OFL 1.1 · Copyright 2020 The Inter Project Authors */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: local('Inter'), url('../fonts/inter-variable.woff2') format('woff2 supports variations'), url('../fonts/inter-variable.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: local('Inter Italic'), url('../fonts/inter-variable-italic.woff2') format('woff2 supports variations'), url('../fonts/inter-variable-italic.woff2') format('woff2'); } /* * JetBrains Mono — Variable font (axe : wght 100–800) * Usage : montants MRU/EUR, numéros de documents, codes, chiffres tabulaires * Licence : SIL OFL 1.1 · Copyright 2020 JetBrains s.r.o. */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: local('JetBrains Mono'), url('../fonts/jetbrains-mono-variable.woff2') format('woff2 supports variations'), url('../fonts/jetbrains-mono-variable.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 100 800; font-display: swap; src: local('JetBrains Mono Italic'), url('../fonts/jetbrains-mono-variable-italic.woff2') format('woff2 supports variations'), url('../fonts/jetbrains-mono-variable-italic.woff2') format('woff2'); } /* ═══════════════════════════════════════════════════════════════════════════════ 2. :root — Tokens primitifs + composants + Bootstrap 5.3 ══════════════════════════════════════════════════════════════════════════════ */ :root { /* ─── PRIMITIVES — Palette Teal ──────────────────────────────────────────── * Base : #2b97a4 · hsl(186°, 58%, 41%) * Rôle : accent principal, bouton primaire, sidebar active, liens * ─────────────────────────────────────────────────────────────────────────── */ --gitss-teal-50: #edfafb; --gitss-teal-100: #d0f3f5; --gitss-teal-200: #9de5ec; --gitss-teal-300: #5cccd6; --gitss-teal-400: #2db3bf; --gitss-teal-500: #2b97a4; /* ← Teal de marque */ --gitss-teal-600: #20778a; --gitss-teal-700: #185a68; --gitss-teal-800: #103f4a; --gitss-teal-900: #07262d; /* ─── PRIMITIVES — Palette Navy ──────────────────────────────────────────── * Base : #16222e · hsl(210°, 35%, 13%) * Rôle : sidebar, texte principal, fond dark, en-têtes * ─────────────────────────────────────────────────────────────────────────── */ --gitss-navy-50: #f5f7f9; --gitss-navy-100: #e8ecf0; --gitss-navy-200: #cdd4dc; --gitss-navy-300: #a3b1be; --gitss-navy-400: #6c8399; --gitss-navy-500: #445e73; --gitss-navy-600: #2c4457; --gitss-navy-700: #1e3045; --gitss-navy-800: #162434; --gitss-navy-900: #16222e; /* ← Navy de marque */ /* ─── PRIMITIVES — Neutral ───────────────────────────────────────────────── * Teinte légèrement blue-steel pour cohérence avec le navy * Rôle : surfaces, bordures, texte muted, fond page * ─────────────────────────────────────────────────────────────────────────── */ --gitss-neutral-0: #ffffff; --gitss-neutral-50: #f8f9fa; --gitss-neutral-100: #f1f3f5; --gitss-neutral-200: #e9ecef; --gitss-neutral-300: #dee2e6; --gitss-neutral-400: #ced4da; --gitss-neutral-500: #adb5bd; --gitss-neutral-600: #6c757d; --gitss-neutral-700: #495057; --gitss-neutral-800: #343a40; --gitss-neutral-900: #212529; /* ─── PRIMITIVES — Sémantique Green ──────────────────────────────────────── * Rôle : statut Payé, encaissements, validations, tendances positives * ─────────────────────────────────────────────────────────────────────────── */ --gitss-green-50: #f0faf4; --gitss-green-100: #d0f0de; --gitss-green-200: #a4dfbf; --gitss-green-300: #5ec99a; --gitss-green-400: #27ad74; --gitss-green-500: #1a8a4a; /* ← Succès */ --gitss-green-600: #147040; --gitss-green-700: #0e5430; --gitss-green-800: #08391f; --gitss-green-900: #041f10; /* ─── PRIMITIVES — Sémantique Amber ──────────────────────────────────────── * Rôle : statut Partiel, devis expirants, avertissements * ─────────────────────────────────────────────────────────────────────────── */ --gitss-amber-50: #fffbeb; --gitss-amber-100: #fef3c7; --gitss-amber-200: #fde68a; --gitss-amber-300: #fcd34d; --gitss-amber-400: #fbbf24; --gitss-amber-500: #d97706; /* ← Avertissement */ --gitss-amber-600: #b45309; --gitss-amber-700: #92400e; --gitss-amber-800: #78350f; --gitss-amber-900: #451a03; /* ─── PRIMITIVES — Sémantique Red ────────────────────────────────────────── * Rôle : impayés KPI, statut Annulé, erreurs formulaire, danger * ─────────────────────────────────────────────────────────────────────────── */ --gitss-red-50: #fef2f2; --gitss-red-100: #fee2e2; --gitss-red-200: #fecaca; --gitss-red-300: #fca5a5; --gitss-red-400: #f87171; --gitss-red-500: #dc3545; /* ← Danger (aligné BS5) */ --gitss-red-600: #b91c2c; --gitss-red-700: #991b1b; --gitss-red-800: #7f1d1d; --gitss-red-900: #450a0a; /* ─── PRIMITIVES — Sémantique Violet ─────────────────────────────────────── * Rôle : badge BC (bon de commande), contrats spéciaux, encaissements Bamis * ─────────────────────────────────────────────────────────────────────────── */ --gitss-violet-50: #faf5ff; --gitss-violet-100: #ede9fe; --gitss-violet-200: #ddd6fe; --gitss-violet-300: #c4b5fd; --gitss-violet-400: #a78bfa; --gitss-violet-500: #7c3aed; /* ← Violet */ --gitss-violet-600: #6d28d9; --gitss-violet-700: #5b21b6; --gitss-violet-800: #4c1d95; --gitss-violet-900: #2e1065; /* ─── TYPOGRAPHIE ─────────────────────────────────────────────────────────── * Inter : UI, corps, labels — chiffres tabulaires avec font-variant-numeric * JetBrains : montants MRU/EUR, numéros de doc, codes, données numériques * ─────────────────────────────────────────────────────────────────────────── */ --gitss-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --gitss-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, 'SF Mono', monospace; /* Échelle — dense SaaS (base 14px, non 16px) */ --gitss-text-2xs: 0.625rem; /* 10px — badges type, metadata */ --gitss-text-xs: 0.6875rem; /* 11px — captions, étiquettes */ --gitss-text-sm: 0.75rem; /* 12px — texte secondaire, labels champs */ --gitss-text-base: 0.875rem; /* 14px — corps principal app */ --gitss-text-md: 1rem; /* 16px — titres de section légère */ --gitss-text-lg: 1.125rem; /* 18px */ --gitss-text-xl: 1.25rem; /* 20px — titres de page */ --gitss-text-2xl: 1.5rem; /* 24px */ --gitss-text-3xl: 1.875rem; /* 30px — montants KPI secondaires */ --gitss-text-4xl: 2.25rem; /* 36px — montants KPI principaux */ /* OpenType : chiffres tabulaires sur Inter */ --gitss-font-feat-tabular: 'tnum' 1, 'lnum' 1; --gitss-font-feat-ui: 'kern' 1, 'liga' 1, 'calt' 1; /* ─── ESPACEMENT ──────────────────────────────────────────────────────────── * Base 4px (t-shirt sizing) * ─────────────────────────────────────────────────────────────────────────── */ --gitss-space-px: 1px; --gitss-space-0: 0px; --gitss-space-1: 4px; --gitss-space-2: 8px; --gitss-space-3: 12px; --gitss-space-4: 16px; --gitss-space-5: 20px; --gitss-space-6: 24px; --gitss-space-7: 28px; --gitss-space-8: 32px; --gitss-space-10: 40px; --gitss-space-12: 48px; --gitss-space-14: 56px; --gitss-space-16: 64px; --gitss-space-20: 80px; --gitss-space-24: 96px; /* ─── BORDER RADIUS ───────────────────────────────────────────────────────── * Sobre — pas de grandes courbures, cohérent avec Linear/Stripe * ─────────────────────────────────────────────────────────────────────────── */ --gitss-radius-none: 0; --gitss-radius-xs: 2px; /* badges type, très petits éléments */ --gitss-radius-sm: 3px; /* boutons sm, chips */ --gitss-radius-md: 5px; /* boutons, champs, cartes internes */ --gitss-radius-lg: 8px; /* cartes KPI, modales, panneaux */ --gitss-radius-xl: 12px; /* drawers, grandes cartes */ --gitss-radius-2xl: 16px; --gitss-radius-full: 9999px; /* badges statut pill */ /* ─── OMBRES ──────────────────────────────────────────────────────────────── * Légères, couleur navy (non noire) pour rester dans la palette * ─────────────────────────────────────────────────────────────────────────── */ --gitss-shadow-xs: 0 1px 2px 0 rgba(22, 34, 46, 0.05); --gitss-shadow-sm: 0 1px 3px 0 rgba(22, 34, 46, 0.08), 0 1px 2px -1px rgba(22, 34, 46, 0.05); --gitss-shadow-md: 0 4px 6px -1px rgba(22, 34, 46, 0.08), 0 2px 4px -2px rgba(22, 34, 46, 0.04); --gitss-shadow-lg: 0 10px 15px -3px rgba(22, 34, 46, 0.08), 0 4px 6px -4px rgba(22, 34, 46, 0.04); --gitss-shadow-xl: 0 20px 25px -5px rgba(22, 34, 46, 0.10), 0 8px 10px -6px rgba(22, 34, 46, 0.04); --gitss-shadow-inset: inset 0 1px 2px rgba(22, 34, 46, 0.06); /* ─── Z-INDEX ───────────────────────────────────────────────────────────────*/ --gitss-z-below: -1; --gitss-z-base: 0; --gitss-z-raised: 1; --gitss-z-dropdown: 1000; --gitss-z-sticky: 1020; --gitss-z-fixed: 1030; --gitss-z-modal-bg: 1040; --gitss-z-modal: 1050; --gitss-z-popover: 1060; --gitss-z-tooltip: 1070; --gitss-z-cmdpal: 1080; /* palette Ctrl+K */ --gitss-z-toast: 1090; /* ─── TRANSITIONS ───────────────────────────────────────────────────────────*/ --gitss-ease-in: cubic-bezier(0.4, 0, 1, 1); --gitss-ease-out: cubic-bezier(0, 0, 0.2, 1); --gitss-ease-inout: cubic-bezier(0.4, 0, 0.2, 1); --gitss-dur-fast: 80ms; --gitss-dur-base: 150ms; --gitss-dur-slow: 250ms; --gitss-dur-slower: 400ms; --gitss-transition-fast: 80ms var(--gitss-ease-out); --gitss-transition-base: 150ms var(--gitss-ease-out); --gitss-transition-slow: 250ms var(--gitss-ease-inout); /* ─── LAYOUT APP ────────────────────────────────────────────────────────────*/ --gitss-sidebar-width: 220px; --gitss-sidebar-collapsed: 52px; --gitss-topbar-height: 48px; --gitss-table-row-height: 36px; --gitss-table-row-height-sm: 30px; --gitss-kanban-col-width: 280px; /* ─── COMPOSANTS — Sidebar ────────────────────────────────────────────────── * La sidebar est toujours dark (navy-900), en light comme en dark * ─────────────────────────────────────────────────────────────────────────── */ --gitss-sidebar-bg: var(--gitss-navy-900); --gitss-sidebar-border: rgba(255, 255, 255, 0.06); --gitss-sidebar-color: var(--gitss-navy-300); --gitss-sidebar-color-muted: var(--gitss-navy-400); --gitss-sidebar-icon-color: var(--gitss-navy-500); --gitss-sidebar-hover-bg: rgba(255, 255, 255, 0.05); --gitss-sidebar-hover-color: var(--gitss-neutral-200); --gitss-sidebar-active-bg: rgba(43, 151, 164, 0.14); --gitss-sidebar-active-color: var(--gitss-teal-300); --gitss-sidebar-active-border: var(--gitss-teal-500); --gitss-sidebar-section-color: var(--gitss-navy-500); --gitss-sidebar-section-size: var(--gitss-text-2xs); --gitss-sidebar-num-color: var(--gitss-navy-600); /* ─── COMPOSANTS — Topbar ───────────────────────────────────────────────────*/ --gitss-topbar-bg: #ffffff; --gitss-topbar-border: var(--gitss-neutral-200); --gitss-topbar-color: var(--gitss-navy-900); --gitss-topbar-muted: var(--gitss-neutral-600); --gitss-search-bg: var(--gitss-neutral-100); --gitss-search-border: var(--gitss-neutral-300); --gitss-search-radius: var(--gitss-radius-md); --gitss-search-focus-bg: var(--gitss-neutral-0); /* ─── COMPOSANTS — Badges STATUT ─────────────────────────────────────────── * Style pill, fond teinté + bordure subtile + texte sombre * ─────────────────────────────────────────────────────────────────────────── */ --gitss-badge-emis-bg: #e8f6f8; --gitss-badge-emis-color: var(--gitss-teal-700); --gitss-badge-emis-border: #b0dfe4; --gitss-badge-partiel-bg: #fef8ea; --gitss-badge-partiel-color: var(--gitss-amber-700); --gitss-badge-partiel-border:#f5d87a; --gitss-badge-paye-bg: #ebf7f0; --gitss-badge-paye-color: var(--gitss-green-700); --gitss-badge-paye-border: #8fd4ab; --gitss-badge-annule-bg: var(--gitss-neutral-100); --gitss-badge-annule-color: var(--gitss-neutral-600); --gitss-badge-annule-border: var(--gitss-neutral-300); /* ─── COMPOSANTS — Badges TYPE ───────────────────────────────────────────── * Style compact, fond plein, texte blanc, lettres majuscules * ─────────────────────────────────────────────────────────────────────────── */ --gitss-badge-devis-bg: var(--gitss-teal-500); --gitss-badge-devis-color: #ffffff; --gitss-badge-facture-bg: var(--gitss-red-500); --gitss-badge-facture-color: #ffffff; --gitss-badge-bl-bg: var(--gitss-amber-500); --gitss-badge-bl-color: #ffffff; --gitss-badge-bc-bg: var(--gitss-violet-500); --gitss-badge-bc-color: #ffffff; --gitss-badge-avoir-bg: var(--gitss-neutral-600); --gitss-badge-avoir-color: #ffffff; /* ─── COMPOSANTS — Cartes KPI ─────────────────────────────────────────────── * Barre d'accentuation gauche (3px) selon la nature du KPI * ─────────────────────────────────────────────────────────────────────────── */ --gitss-kpi-bg: var(--gitss-neutral-0); --gitss-kpi-border: var(--gitss-neutral-200); --gitss-kpi-radius: var(--gitss-radius-lg); --gitss-kpi-shadow: var(--gitss-shadow-sm); --gitss-kpi-accent-ca: var(--gitss-navy-900); --gitss-kpi-accent-impaye: var(--gitss-red-500); --gitss-kpi-accent-encaisse: var(--gitss-green-500); --gitss-kpi-accent-contrat: var(--gitss-amber-500); --gitss-kpi-accent-treso: var(--gitss-violet-500); /* ─── FOCUS ───────────────────────────────────────────────────────────────── * Anneau teal, compatible WCAG 2.1 niveau AA * ─────────────────────────────────────────────────────────────────────────── */ --gitss-focus-ring: 0 0 0 3px rgba(43, 151, 164, 0.28); --gitss-focus-ring-danger: 0 0 0 3px rgba(220, 53, 69, 0.22); /* ═══════════════════════════════════════════════════════════════════════════ BOOTSTRAP 5.3 — Surcharge des variables --bs-* Permet d'utiliser les composants Bootstrap sans fichier Sass ══════════════════════════════════════════════════════════════════════════ */ /* Couleurs sémantiques BS */ --bs-blue: var(--gitss-teal-500); --bs-primary: #2b97a4; --bs-primary-rgb: 43, 151, 164; --bs-secondary: #445e73; --bs-secondary-rgb: 68, 94, 115; --bs-success: #1a8a4a; --bs-success-rgb: 26, 138, 74; --bs-info: #2db3bf; --bs-info-rgb: 45, 179, 191; --bs-warning: #d97706; --bs-warning-rgb: 217, 119, 6; --bs-danger: #dc3545; --bs-danger-rgb: 220, 53, 69; --bs-light: #f1f3f5; --bs-light-rgb: 241, 243, 245; --bs-dark: #16222e; --bs-dark-rgb: 22, 34, 46; /* Corps */ --bs-body-font-family: var(--gitss-font-sans); --bs-body-font-size: 0.875rem; /* 14px — dense SaaS */ --bs-body-font-weight: 400; --bs-body-line-height: 1.5; --bs-body-color: var(--gitss-navy-900); --bs-body-color-rgb: 22, 34, 46; --bs-body-bg: var(--gitss-neutral-50); --bs-body-bg-rgb: 248, 249, 250; /* Emphase / secondaire / tertiaire */ --bs-emphasis-color: var(--gitss-navy-900); --bs-emphasis-color-rgb: 22, 34, 46; --bs-secondary-color: var(--gitss-neutral-600); --bs-secondary-color-rgb: 108, 117, 125; --bs-secondary-bg: var(--gitss-neutral-100); --bs-secondary-bg-rgb: 241, 243, 245; --bs-tertiary-color: var(--gitss-neutral-500); --bs-tertiary-color-rgb: 173, 181, 189; --bs-tertiary-bg: var(--gitss-neutral-200); --bs-tertiary-bg-rgb: 233, 236, 239; /* En-têtes */ --bs-heading-color: var(--gitss-navy-900); /* Liens */ --bs-link-color: var(--gitss-teal-600); --bs-link-color-rgb: 32, 119, 138; --bs-link-decoration: none; --bs-link-hover-color: var(--gitss-teal-700); --bs-link-hover-color-rgb: 24, 90, 104; --bs-link-hover-decoration: underline; /* Code inline */ --bs-code-color: var(--gitss-violet-600); /* Bordures */ --bs-border-width: 1px; --bs-border-style: solid; --bs-border-color: var(--gitss-neutral-300); --bs-border-color-translucent: rgba(22, 34, 46, 0.12); /* Rayons — alignés sur tokens GITSS */ --bs-border-radius: 5px; --bs-border-radius-sm: 3px; --bs-border-radius-lg: 8px; --bs-border-radius-xl: 12px; --bs-border-radius-xxl: 16px; --bs-border-radius-2xl: 16px; --bs-border-radius-pill: 9999px; /* Ombres */ --bs-box-shadow: var(--gitss-shadow-sm); --bs-box-shadow-sm: var(--gitss-shadow-xs); --bs-box-shadow-lg: var(--gitss-shadow-lg); --bs-box-shadow-inset: var(--gitss-shadow-inset); /* Focus ring */ --bs-focus-ring-width: 3px; --bs-focus-ring-opacity: 0.28; --bs-focus-ring-color: rgba(43, 151, 164, 0.28); /* Validation formulaire */ --bs-form-valid-color: var(--gitss-green-600); --bs-form-valid-border-color: var(--gitss-green-500); --bs-form-invalid-color: var(--gitss-red-600); --bs-form-invalid-border-color: var(--gitss-red-500); } /* ═══════════════════════════════════════════════════════════════════════════════ 3. Dark theme — [data-bs-theme="dark"] ─ Toutes les surfaces, textes, bordures, ombres inversés ─ La sidebar reste navy-900 (identique light/dark) ══════════════════════════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] { color-scheme: dark; /* Corps */ --bs-body-color: var(--gitss-navy-200); --bs-body-color-rgb: 205, 212, 220; --bs-body-bg: var(--gitss-navy-900); --bs-body-bg-rgb: 22, 34, 46; /* Emphase */ --bs-emphasis-color: var(--gitss-neutral-50); --bs-emphasis-color-rgb: 248, 249, 250; --bs-secondary-color: var(--gitss-navy-300); --bs-secondary-color-rgb: 163, 177, 190; --bs-secondary-bg: var(--gitss-navy-800); --bs-secondary-bg-rgb: 22, 36, 52; --bs-tertiary-color: var(--gitss-navy-400); --bs-tertiary-color-rgb: 108, 131, 153; --bs-tertiary-bg: var(--gitss-navy-700); --bs-tertiary-bg-rgb: 30, 48, 69; /* En-têtes */ --bs-heading-color: var(--gitss-neutral-100); /* Liens */ --bs-link-color: var(--gitss-teal-300); --bs-link-color-rgb: 92, 204, 214; --bs-link-hover-color: var(--gitss-teal-200); /* Bordures */ --bs-border-color: rgba(255, 255, 255, 0.10); --bs-border-color-translucent: rgba(255, 255, 255, 0.06); /* Ombres renforcées (fond sombre) */ --bs-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.35), 0 1px 2px -1px rgba(0, 0, 0, 0.25); --bs-box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.25); --bs-box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.40), 0 4px 6px -4px rgba(0, 0, 0, 0.25); /* Topbar dark */ --gitss-topbar-bg: var(--gitss-navy-800); --gitss-topbar-border: rgba(255, 255, 255, 0.08); --gitss-topbar-color: var(--gitss-neutral-200); --gitss-topbar-muted: var(--gitss-navy-300); --gitss-search-bg: rgba(255, 255, 255, 0.06); --gitss-search-border: rgba(255, 255, 255, 0.10); --gitss-search-focus-bg: rgba(255, 255, 255, 0.09); /* Cartes KPI dark */ --gitss-kpi-bg: var(--gitss-navy-800); --gitss-kpi-border: rgba(255, 255, 255, 0.08); /* Badges statut dark — fond semi-opaque */ --gitss-badge-emis-bg: rgba(43, 151, 164, 0.16); --gitss-badge-emis-color: var(--gitss-teal-300); --gitss-badge-emis-border: rgba(43, 151, 164, 0.30); --gitss-badge-partiel-bg: rgba(217, 119, 6, 0.16); --gitss-badge-partiel-color: var(--gitss-amber-300); --gitss-badge-partiel-border:rgba(217, 119, 6, 0.30); --gitss-badge-paye-bg: rgba(26, 138, 74, 0.16); --gitss-badge-paye-color: var(--gitss-green-300); --gitss-badge-paye-border: rgba(26, 138, 74, 0.30); --gitss-badge-annule-bg: rgba(255, 255, 255, 0.07); --gitss-badge-annule-color: var(--gitss-neutral-400); --gitss-badge-annule-border: rgba(255, 255, 255, 0.12); /* Focus dark */ --gitss-focus-ring: 0 0 0 3px rgba(43, 151, 164, 0.35); --gitss-focus-ring-danger: 0 0 0 3px rgba(220, 53, 69, 0.30); }