/* * Tokens du design system Spicto — support app. * * ARTEFACT DÉRIVÉ : généré depuis designsystem/spicto/DESIGN.md (tronc) * et designsystem/spicto/app/DESIGNAPP.md (support app). Le markdown fait foi ; * ne jamais modifier une valeur ici sans la modifier d'abord dans le DS. * * Trois étages : primitive → semantic → component. Les styles de l'app ne * consomment que les sémantiques (--sp-color-bg-*, --sp-font-size-body, …), * jamais une primitive directement. */ :root { /* ============================================================ 1. PRIMITIVES (tronc DESIGN.md) — ne pas consommer directement ============================================================ */ /* Color */ --sp-color-cream-0: #FFFFFF; /* blanc pur : cartes, champs */ --sp-color-cream-100: #FAF9F5; /* fond de page */ --sp-color-cream-200: #F5F3EB; /* panneau crème surélevé */ --sp-color-cream-300: #EFE9DD; /* creux crème / pill d'onglet actif */ --sp-color-cream-border: #D3CDC3; /* filet chaud sur crème */ --sp-color-ink-800: #1E1C1A; /* texte principal + bouton ink */ --sp-color-brown-700: #766552; /* texte secondaire / bordures sur crème */ --sp-color-brown-400: #A29689; /* légendes sur crème */ --sp-color-grey-700: #464646; /* corps d'un texte de conseil : un cran sous l'ink, jamais du muted */ --sp-color-grey-600: #767676; /* texte secondaire / placeholder sur blanc */ --sp-color-grey-300: #D1D1D1; /* filet posé sur du blanc */ --sp-color-grey-200: #E8E8E8; /* filet */ --sp-color-grey-100: #F3F3F3; /* surface grise */ --sp-color-grey-50: #F4F4F2; /* neutre le plus clair : contrôle au repos dans une carte blanche */ --sp-color-orange-600: #FF6204; /* orange de marque, l'unique accent d'intention */ --sp-color-orange-400: #FD7701; /* survol / accent plus clair */ --sp-color-orange-200: #FFD3B8; /* pêche : remplissages doux */ --sp-color-orange-100: #FFE9DC; /* surface pêche la plus pâle */ --sp-color-violet-600: #8C78E9; /* violet : la remise de volume, acquise ou réglée, en aplat seulement */ --sp-color-green-500: #03C354; /* vert vif : le bouton de téléchargement offert, et lui seul */ --sp-color-green-600: #4CAF50; /* vert franc : réussite d'un transfert, en aplat seulement */ --sp-color-green-700: #006056; /* vert-sarcelle : compteurs, succès */ --sp-color-red-600: #B71600; /* alerte / destructif */ --sp-color-red-400: #F5494A; /* rouge clair : le même danger, écrit sur une surface sombre */ --sp-color-blue-600: #0080FF; /* info / « disponible » : aplats et pictogrammes */ --sp-color-blue-800: #0060BF; /* bleu d'info assombri : la version qui porte du texte */ --sp-color-amber-700: #8A5D08; /* ambre : avertissement */ --sp-color-yellow-500: #FFC83A; /* badges de note */ --sp-color-scrim: rgba(15, 15, 17, 0.72); /* scrim texte-sur-photo */ /* Typography */ --sp-font-family-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --sp-font-family-label: "Anuphan", "Inter", sans-serif; --sp-font-size-12: 12px; /* mentions fines */ --sp-font-size-13: 13px; /* méta : badges, détail et méta de ListItem, méta de carte */ --sp-font-size-14: 14px; /* label UI dense (le plus courant) */ --sp-font-size-15: 15px; /* corps */ --sp-font-size-16: 16px; /* corps large / titre de liste */ --sp-font-size-20: 20px; /* titre de carte */ --sp-font-size-24: 24px; /* chiffre posé en vis-à-vis d'un titre de section */ --sp-font-size-28: 28px; /* display léger */ --sp-font-size-40: 40px; /* hero / display de page */ --sp-font-size-48: 48px; /* nom sur une carte d'identité couchée : le sujet de la surface */ --sp-font-weight-300: 300; /* light */ --sp-font-weight-400: 400; /* regular : la prose continue, jamais l'UI */ --sp-font-weight-500: 500; /* medium */ --sp-font-weight-600: 600; /* semibold */ --sp-font-weight-700: 700; /* bold */ --sp-font-leading-tight: 1.1; --sp-font-leading-snug: 1.25; --sp-font-leading-normal: 1.4; --sp-font-tracking-tight: -0.02em; /* Spacing */ --sp-space-1: 4px; --sp-space-2: 8px; --sp-space-3: 12px; --sp-space-4: 16px; --sp-space-5: 20px; --sp-space-6: 24px; --sp-space-8: 32px; --sp-space-10: 40px; --sp-space-12: 48px; --sp-space-16: 64px; /* Shape */ --sp-radius-none: 0; --sp-radius-xs: 6px; /* petits éléments très arrondis */ --sp-radius-sm: 8px; /* champs, petits éléments, bouton sm */ --sp-radius-md: 12px; /* chips, pills d'onglet, vignettes */ --sp-radius-lg: 16px; /* cartes */ --sp-radius-xl: 20px; /* grandes cartes évènement ; tout ce qui s'emboîte dans une carte */ --sp-radius-2xl: 24px; /* photo en vedette (vue photo) */ --sp-radius-3xl: 36px; /* carte qui HÉBERGE une carte imbriquée */ --sp-radius-full: 999px; /* chips ronds, tags, barre de recherche, toggles */ --sp-border-width-default: 1px; --sp-border-width-strong: 1.5px; /* trait ink du bouton contour, contrôles */ /* Elevation */ --sp-shadow-none: none; /* absence ASSUMÉE (carte de section en espace connecté) */ --sp-shadow-sm: 0 1px 3px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .04); /* carte au repos */ --sp-shadow-md: 0 4px 16px rgba(0, 0, 0, .07); /* survol / popover */ --sp-shadow-lg: 0 8px 32px rgba(0, 0, 0, .10); --sp-shadow-pop: 0 12px 40px rgba(0, 0, 0, .12); --sp-shadow-knob: 0 1px 4px rgba(0, 0, 0, .24); /* poignée : resserrée, nette */ --sp-shadow-ring: 0 0 0 3px rgba(255, 98, 4, .25); /* anneau de focus orange */ /* Motion */ --sp-duration-fast: 150ms; /* survols, fondus */ --sp-duration-base: 180ms; /* transitions d'état */ --sp-easing-standard: ease; --sp-gesture-press: scale(0.97); /* boutons au :active */ /* Aucun geste de survol pour les cartes : elles répondent par l'ombre seule, jamais en se déplaçant (tronc DESIGN.md, « Une carte ne se déplace jamais au survol »). */ /* ============================================================ 2. SÉMANTIQUES D'IDENTITÉ (tronc DESIGN.md) — l'étage à consommer ============================================================ */ /* Color : fonds */ --sp-color-bg-default: var(--sp-color-cream-100); /* fond de page SUR MOBILE ; ailleurs, la surface claire posée dessus */ --sp-color-bg-surface: var(--sp-color-cream-0); /* carte / champ (blanc plein) */ --sp-color-bg-cream: var(--sp-color-cream-200); /* panneau crème surélevé ; ET le fond de page sur desktop */ --sp-color-bg-sunken: var(--sp-color-cream-300); /* creux crème */ --sp-color-bg-grey: var(--sp-color-grey-100); /* surface grise neutre */ --sp-color-bg-control: var(--sp-color-grey-50); /* contrôle au repos sur une carte blanche */ --sp-color-bg-dark: var(--sp-color-ink-800); /* surface sombre */ /* Color : textes */ --sp-color-text-default: var(--sp-color-ink-800); --sp-color-text-muted: var(--sp-color-grey-600); /* secondaire sur blanc / gris */ --sp-color-text-advice: var(--sp-color-grey-700); /* le corps d'un CONSEIL : on le lit, il n'accompagne pas */ --sp-color-text-brown: var(--sp-color-brown-700); /* secondaire sur crème */ --sp-color-text-caption: var(--sp-color-brown-400); /* légendes sur crème */ --sp-color-text-inverse: var(--sp-color-cream-0); /* sur fond sombre / photo */ --sp-color-text-link: var(--sp-color-orange-600); /* liens */ /* Color : bordures */ --sp-color-border-default: var(--sp-color-cream-300); /* filet chaud : séparateurs */ --sp-color-border-cream: var(--sp-color-cream-border); /* filet sur surface crème */ --sp-color-border-on-white: var(--sp-color-grey-300); /* tout filet posé sur du BLANC : contour, séparateur */ --sp-color-border-strong: var(--sp-color-ink-800); /* trait ink (bouton contour) */ --sp-color-border-control: var(--sp-color-grey-200); /* filet d'un contrôle qui se dessine, sur carte blanche */ --sp-color-border-focus: var(--sp-color-orange-600); /* anneau de focus */ /* Color : actions et accents */ --sp-color-action-primary: var(--sp-color-ink-800); /* bouton ink : action standard */ --sp-color-action-primary-text: var(--sp-color-cream-0); --sp-color-action-marketing: var(--sp-color-orange-600); /* l'intention la plus forte */ --sp-color-action-free: var(--sp-color-green-500); /* la gratuité : téléchargement offert */ /* Séries de graphique (fiche chart). Volontairement distinctes des tokens feedback : une série n'est ni un succès ni une alerte, et une reprise de la palette d'alerte ne doit pas repeindre les statistiques. */ --sp-color-chart-views: var(--sp-color-blue-600); --sp-color-chart-sales: var(--sp-color-yellow-500); --sp-color-accent-selected: var(--sp-color-orange-600); /* coché, badge de date */ --sp-color-accent-soft: var(--sp-color-orange-200); /* surface pêche douce */ --sp-color-accent-softer: var(--sp-color-orange-100); /* pêche pâle (encart pub) */ --sp-color-accent-deal: var(--sp-color-violet-600); /* la remise de volume, acquise (panier) ou réglée (dépôt) */ --sp-color-accent-seal: var(--sp-color-orange-600); /* le sceau de certification de la marque (verrou « Spicto Pro »), et lui seul */ /* Color : superpositions et feedback */ --sp-color-overlay-scrim: var(--sp-color-scrim); /* scrim SOUS du texte, sur photo */ --sp-color-overlay-veil: rgba(30, 28, 26, 0.4); /* voile SUR la page, sous un Sheet (ink.800 40%) */ --sp-color-feedback-danger: var(--sp-color-red-600); --sp-color-feedback-danger-on-dark: var(--sp-color-red-400); /* le même danger sur un scrim / fond sombre (AA) */ --sp-color-feedback-success-fill: var(--sp-color-green-600); /* la même réussite en aplat : jauge de transfert */ --sp-color-feedback-success: var(--sp-color-green-700); --sp-color-feedback-info: var(--sp-color-blue-600); /* aplats et pictogrammes */ --sp-color-feedback-info-text: var(--sp-color-blue-800); /* dès qu'un mot est écrit (AA) */ --sp-color-feedback-warning: var(--sp-color-amber-700); --sp-color-feedback-rating: var(--sp-color-yellow-500); /* Typography (sémantiques ; family.label sémantique = la primitive du même nom) */ --sp-font-family-base: var(--sp-font-family-sans); --sp-font-size-body: var(--sp-font-size-15); --sp-font-size-label: var(--sp-font-size-14); --sp-font-size-meta: var(--sp-font-size-13); /* le petit texte : badge, méta, détail, consigne de section */ --sp-font-size-h1: var(--sp-font-size-40); --sp-font-size-h2: var(--sp-font-size-28); --sp-font-size-h2-dense: var(--sp-font-size-24); /* titre de page là où deux titres se font face */ --sp-font-size-h3: var(--sp-font-size-20); --sp-font-size-h3-dense: var(--sp-font-size-15); /* titre d'un bloc d'accompagnement : il montre ou conseille, on n'y remplit rien */ --sp-font-size-h4: var(--sp-font-size-16); /* titre d'un bloc DANS une carte : il coiffe un contenu, pas une section */ --sp-font-size-identity: var(--sp-font-size-48); /* le nom d'une personne sur sa carte d'identité couchée */ --sp-font-size-figure: var(--sp-font-size-24); /* le chiffre d'une section, en vis-à-vis de son titre */ --sp-font-weight-prose: var(--sp-font-weight-400); /* un paragraphe qu'on traverse, pas un libellé qu'on repère */ --sp-font-weight-body: var(--sp-font-weight-500); --sp-font-weight-title: var(--sp-font-weight-600); --sp-font-weight-bold: var(--sp-font-weight-700); --sp-font-weight-display: var(--sp-font-weight-300); /* ============================================================ 3. SÉMANTIQUES D'USAGE APP (app/DESIGNAPP.md) ============================================================ */ /* Surface flottante : verre dépoli */ --sp-glass-search-tint: linear-gradient(180deg, rgba(118, 118, 118, 0.05) 0%, rgba(118, 118, 118, 0) 30%, rgba(118, 118, 118, 0) 70%, rgba(118, 118, 118, 0.03) 100%); --sp-glass-search-border: 2px solid rgba(255, 255, 255, 0.7); --sp-glass-search-shadow: 0 16px 16px 0 rgba(0, 0, 0, 0.03), inset 0 -10px 5px 0 rgba(255, 255, 255, 0.5); --sp-glass-overlay-bg: rgba(20, 20, 22, 0.32); /* verre sombre : compteurs / méta */ --sp-glass-overlay-border: rgba(255, 255, 255, 0.2); /* liseré clair, atténué */ /* Le verre d'overlay est un VRAI verre, pas un voile teinté : il lui faut le reflet et l'ombre que la barre de recherche a déjà. Même grammaire, sol inverse — le voile s'éclaircit vers le haut (la lumière vient de là), le liseré haut fait l'arête, et l'ombre portée décolle la pastille de la photo. */ --sp-glass-overlay-tint: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0) 100%); /* Le décollement appartient à la SUPERPOSITION, pas au verre : tout badge posé sur une photo le prend, verre ou aplat, sans quoi deux pastilles du même coin ne flottent pas à la même hauteur. Les ombres du tronc sont taillées pour le crème (alphas à .07) et disparaissent sur un cliché. */ --sp-glass-overlay-lift: 0 4px 14px 0 rgba(0, 0, 0, 0.28); --sp-glass-overlay-shadow: var(--sp-glass-overlay-lift), inset 0 1px 0 0 rgba(255, 255, 255, 0.28), inset 0 -8px 8px -6px rgba(255, 255, 255, 0.2); /* Verre des BOUTONS sur fond sombre ou chargé. Plus opaque que celui des badges (0,6 vs 0,32) : c'est ce qui garantit qu'un libellé blanc reste lisible même sur une photo claire — 4,81:1 au pire cas, contre 2,07:1 à 0,32. */ --sp-glass-button-bg: rgba(20, 20, 22, 0.6); --sp-glass-button-border: rgba(255, 255, 255, 0.2); /* liseré discret, 1px */ --sp-glass-blur: 20px; /* rayon backdrop-filter */ --sp-glass-saturate: 160%; /* la photo dessous garde ses couleurs à travers le flou */ /* Shell mobile */ --sp-layout-topbar-h: 56px; /* barre haute */ --sp-layout-screen-pad: var(--sp-space-4); /* gouttière horizontale d'écran */ --sp-layout-section-gap: var(--sp-space-6); /* espace vertical entre les blocs du shell */ --sp-control-icon-button: 44px; /* cible tactile des boutons-icônes */ --sp-avatar-xs: 25px; /* avatar posé DANS une ligne de méta courante */ --sp-avatar-sm: 32px; /* avatar dans la barre haute */ --sp-avatar-md: 40px; /* avatar de fiche */ --sp-avatar-lg: 64px; /* portrait sur sa propre carte d'identité */ --sp-avatar-xl: 120px; /* ce même portrait quand la carte est couchée */ --sp-carousel-dot: 6px; /* pastille d'indicateur de carrousel */ /* ============================================================ 4. COMPAGNONS DÉRIVÉS (hors DS) Triplets RGB requis par la mécanique Bootstrap (--bs-*-rgb). Dérivés des primitives ci-dessus, à régénérer avec elles. ============================================================ */ --sp-color-ink-800-rgb: 30, 28, 26; --sp-color-brown-700-rgb: 118, 101, 82; --sp-color-grey-600-rgb: 118, 118, 118; --sp-color-green-700-rgb: 0, 96, 86; --sp-color-red-600-rgb: 183, 22, 0; }