/* ════════════════════════════════════════════════════════════════════ * gs-components.css — Kit de composants .gsa-* (SOURCE UNIQUE) * -------------------------------------------------------------------- * EXTRAIT de public/theme/gs-app.css (audit design 2026-06-29) pour être * chargé sur TOUTES les pages, pas seulement les ~36 vues layouts.app : * • layouts/app.blade.php le lie explicitement (avant gs-app.css) * • App\Http\Middleware\InjectDesignTokens l'injecte sur les autres * → les 54 vues AUTONOMES (login, cpanel, canvass, dashboards…) peuvent * enfin consommer .gsa-btn / .gsa-card / .gsa-field au lieu de * redessiner un bouton chacune (constat audit : 8 paddings + 6 rayons * différents pour « un bouton »). * * PÉRIMÈTRE : tokens --gs-* + composants .gsa-* UNIQUEMENT. * Aucun reset, aucun sélecteur d'élément nu → injectable partout sans * risque de régression : les classes .gsa-* n'existent nulle part ailleurs. * Le reset + le shell applicatif (body.gsa, .gsa-header, .gsa-main) * restent dans gs-app.css, qui n'est chargé que par layouts.app. * * RTL : props logiques (padding-inline / border-inline-start / text-align:start) * → bascule automatique sous , pas de feuille RTL séparée. * ════════════════════════════════════════════════════════════════════ */ :root { /* ── Brand (navy + teal, matches login & tracking-v2) ─────────────── */ --gs-accent: #041E3F; --gs-accent-ink: #ffffff; --gs-accent-2: #12E7AD; --gs-accent-3: #0AC795; --gs-accent-soft: #e6fbf5; /* ── Neutrals (light) ─────────────────────────────────────────────── */ --gs-bg: #f6f7f9; --gs-surface: #ffffff; --gs-surface-2: #fafbfc; --gs-border: #e5e7eb; --gs-border-soft: #f1f3f5; --gs-text: #0b1320; --gs-text-muted: #5b6776; --gs-text-faint: #6b7787; /* AA ~4.6:1 on white */ /* ── Status ───────────────────────────────────────────────────────── */ --gs-success: #0f9d6b; --gs-warn: #b9760a; --gs-danger: #c81e1e; --gs-info: #2563c9; --gs-success-soft: #e7f6ef; --gs-warn-soft: #fdf3e3; --gs-danger-soft: #fde8e8; --gs-info-soft: #e8effb; /* ── Geometry ─────────────────────────────────────────────────────── */ --gs-radius: 14px; --gs-radius-sm: 8px; --gs-radius-lg: 20px; /* ── Shadows ──────────────────────────────────────────────────────── */ /* Échelle d'élévation alignée sur css/gs-tokens.css (--shadow-*), qui la porte à 2 couches. Les deux vocabulaires sont rendus CÔTE À CÔTE (23 consommateurs un-préfixés, 14 en --gs-*) : une carte du kit et un panneau de vue autonome doivent flotter à la même hauteur. */ --gs-shadow-sm: 0 1px 2px rgba(4,30,63,.06), 0 1px 3px rgba(4,30,63,.08); --gs-shadow: 0 4px 12px rgba(4,30,63,.10); --gs-shadow-lg: 0 12px 32px rgba(4,30,63,.16); /* ── Typography ───────────────────────────────────────────────────── */ --gs-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Arabic', sans-serif; --gs-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --gs-text-xs: 11px; --gs-text-sm: 12.5px; --gs-text-base: 14px; --gs-text-lg: 16px; --gs-text-xl: 20px; --gs-text-xxl: 28px; /* ── Spacing ──────────────────────────────────────────────────────── */ --gs-space-1: 4px; --gs-space-2: 8px; --gs-space-3: 12px; --gs-space-4: 16px; --gs-space-5: 24px; --gs-space-6: 32px; /* ── Layout metrics ───────────────────────────────────────────────── */ --gs-header-h: 56px; --gs-content-max: 1200px; /* ── Canonical breakpoint scale (audit: stop the 760/768/800/900/980 drift) */ --gs-bp-sm: 640px; --gs-bp-md: 860px; --gs-bp-lg: 1100px; --gs-ease: cubic-bezier(.4, 0, .2, 1); } [data-theme="dark"] { --gs-bg: #0b1320; --gs-surface: #161e2e; --gs-surface-2: #1c2434; --gs-border: #283246; --gs-border-soft: #1f273a; --gs-text: #f1f5fb; --gs-text-muted: #95a3b8; --gs-text-faint: #818ea0; --gs-accent: #0AC795; --gs-accent-ink: #06231b; --gs-accent-2: #12E7AD; --gs-accent-3: #5AEEC4; --gs-accent-soft: #0a2a25; --gs-success-soft: #0e2a20; --gs-warn-soft: #2c2310; --gs-danger-soft: #2c1414; --gs-info-soft: #11203b; --gs-shadow-sm: 0 1px 2px rgba(0,0,0,.30); --gs-shadow: 0 4px 14px rgba(0,0,0,.40); --gs-shadow-lg: 0 12px 34px rgba(0,0,0,.55); } /* ── Page header ────────────────────────────────────────────────────── */ .gsa-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gs-space-4); flex-wrap: wrap; margin-block-end: var(--gs-space-5); } .gsa-page-header h1 { font-size: var(--gs-text-xl); } .gsa-page-header .gsa-page-sub { color: var(--gs-text-muted); font-size: var(--gs-text-sm); margin-block-start: 4px; } .gsa-page-header .gsa-page-actions { display: flex; gap: var(--gs-space-2); flex-wrap: wrap; } /* ── Buttons ────────────────────────────────────────────────────────── */ .gsa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border: 1px solid transparent; border-radius: var(--gs-radius-sm); font-family: inherit; font-size: var(--gs-text-sm); font-weight: 600; line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap; transition: filter .15s, background .15s, border-color .15s, transform .08s; } .gsa-btn:hover { text-decoration: none; } .gsa-btn:active { transform: scale(.98); } .gsa-btn[disabled], .gsa-btn:disabled { opacity: .55; cursor: not-allowed; } .gsa-btn--primary { background: var(--gs-accent); color: var(--gs-accent-ink); } .gsa-btn--primary:hover { filter: brightness(1.12); } .gsa-btn--secondary { background: var(--gs-surface); color: var(--gs-text); border-color: var(--gs-border); } .gsa-btn--secondary:hover { background: var(--gs-surface-2); border-color: var(--gs-text-faint); } .gsa-btn--ghost { background: transparent; color: var(--gs-text-muted); } .gsa-btn--ghost:hover { background: var(--gs-border-soft); color: var(--gs-text); } .gsa-btn--danger { background: var(--gs-danger); color: #fff; } .gsa-btn--danger:hover { filter: brightness(1.08); } .gsa-btn--sm { padding: 6px 11px; font-size: var(--gs-text-xs); } /* --lg = le bouton TACTILE. Le kit n'avait que --sm et la taille canonique (~34px de haut) : trop petit pour un pouce, ce qui forçait les vues mobiles (dvir, portail chauffeur) à réécrire leurs boutons à la main. min-height porte le contrat 44px (WCAG 2.5.5 / Apple HIG) INDÉPENDAMMENT des métriques de police — un padding seul se ferait rogner par un font-size plus petit. */ .gsa-btn--lg { min-height: 44px; padding: 12px 20px; font-size: var(--gs-text-base); } .gsa-btn--block { width: 100%; } /* Focus clavier porté par le COMPOSANT, pas par le shell. gs-app.css pose `.gsa :focus-visible` mais c'est scopé au de layouts.app ; or le kit sert maintenant des pages AUTONOMES (settings/hub, account/*) dont le n'a pas cette classe → sans ceci, un .gsa-btn n'y aurait aucun anneau de focus au clavier. Mêmes valeurs que la règle du shell → sur layouts.app le rendu est inchangé. */ .gsa-btn:focus-visible { outline: 2px solid var(--gs-accent-2); outline-offset: 2px; } /* ── Card ───────────────────────────────────────────────────────────── */ .gsa-card { background: var(--gs-surface); border: 1px solid var(--gs-border); border-radius: var(--gs-radius); box-shadow: var(--gs-shadow-sm); padding: var(--gs-space-5); } .gsa-card--pad-sm { padding: var(--gs-space-4); } .gsa-card-title { font-size: var(--gs-text-lg); font-weight: 700; margin-block-end: var(--gs-space-3); } .gsa-grid { display: grid; gap: var(--gs-space-4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .gsa-stack > * + * { margin-block-start: var(--gs-space-4); } /* vertical rhythm between cards */ /* ── Table (responsive: horizontal scroll wrapper, no fixed widths) ──── */ .gsa-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--gs-border); border-radius: var(--gs-radius); background: var(--gs-surface); -webkit-overflow-scrolling: touch; } .gsa-table { width: 100%; border-collapse: collapse; font-size: var(--gs-text-sm); } .gsa-table th, .gsa-table td { padding: 10px 14px; text-align: start; border-block-end: 1px solid var(--gs-border-soft); white-space: nowrap; } .gsa-table thead th { background: var(--gs-surface-2); color: var(--gs-text-muted); font-weight: 600; position: sticky; inset-block-start: 0; } .gsa-table tbody tr:hover { background: var(--gs-accent-soft); } .gsa-table tbody tr:last-child td { border-block-end: 0; } .gsa-table--num td.gsa-num, .gsa-table .gsa-num { text-align: end; font-variant-numeric: tabular-nums; } /* ── Form field ─────────────────────────────────────────────────────── */ .gsa-field { display: flex; flex-direction: column; gap: 6px; margin-block-end: var(--gs-space-4); } .gsa-label { font-size: var(--gs-text-sm); font-weight: 600; color: var(--gs-text); } .gsa-label .gsa-req { color: var(--gs-danger); margin-inline-start: 2px; } .gsa-input, .gsa-select, .gsa-textarea { width: 100%; padding: 10px 12px; font-family: inherit; font-size: var(--gs-text-base); color: var(--gs-text); background: var(--gs-surface); border: 1px solid var(--gs-border); border-radius: var(--gs-radius-sm); transition: border-color .15s, box-shadow .15s; } .gsa-input::placeholder, .gsa-textarea::placeholder { color: var(--gs-text-faint); } .gsa-input:focus, .gsa-select:focus, .gsa-textarea:focus { outline: none; border-color: var(--gs-accent-3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gs-accent-2) 30%, transparent); } .gsa-field--error .gsa-input, .gsa-field--error .gsa-select, .gsa-field--error .gsa-textarea { border-color: var(--gs-danger); } .gsa-error { font-size: var(--gs-text-xs); color: var(--gs-danger); } .gsa-hint { font-size: var(--gs-text-xs); color: var(--gs-text-muted); } /* ── Alert ──────────────────────────────────────────────────────────── */ .gsa-alert { display: flex; gap: var(--gs-space-3); align-items: flex-start; padding: 12px 16px; border-radius: var(--gs-radius-sm); border-inline-start: 3px solid var(--gs-info); background: var(--gs-info-soft); color: var(--gs-text); font-size: var(--gs-text-sm); margin-block-end: var(--gs-space-4); } .gsa-alert--success { border-inline-start-color: var(--gs-success); background: var(--gs-success-soft); } .gsa-alert--warn { border-inline-start-color: var(--gs-warn); background: var(--gs-warn-soft); } .gsa-alert--danger { border-inline-start-color: var(--gs-danger); background: var(--gs-danger-soft); } /* ── Badge ──────────────────────────────────────────────────────────── */ .gsa-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: var(--gs-text-xs); font-weight: 600; background: var(--gs-border-soft); color: var(--gs-text-muted); } .gsa-badge--success { background: var(--gs-success-soft); color: var(--gs-success); } .gsa-badge--warn { background: var(--gs-warn-soft); color: var(--gs-warn); } .gsa-badge--danger { background: var(--gs-danger-soft); color: var(--gs-danger); } /* ── Responsive (breakpoint canonique unique --gs-bp-md) ────────────── */ @media (max-width: 860px) { .gsa-page-header { flex-direction: column; align-items: stretch; } .gsa-grid { grid-template-columns: 1fr; } }