/* Étiquettes AppVoraUI — écrites depuis l'export Penpot versionné. * * Ne pas éditer : ce fichier est produit par npm --prefix design/style-dictionary run build * Une valeur changée ici serait perdue au prochain export, et surtout * elle divergerait de la maquette — exactement ce qu'on veut éviter. * * Les mesures sont communes à toutes les marques ; seules les couleurs * changent. `CoproHub` tient la racine, une autre se pose avec * ``, le mode sombre avec `data-mode="sombre"`. * * Les états de composants ne portent que des rôles, jamais une couleur : * ils suivent donc la marque sans rien savoir d'elle. */ :root { /* Mesures, typographie, mouvement — indépendants de la marque */ --casse-normale: none; --casse-surtitre: uppercase; --cible-tactile: 44px; --cible-tactile-mac: 40px; --espace-0: 0px; --espace-12: 12px; --espace-16: 16px; --espace-2: 2px; --espace-24: 24px; --espace-32: 32px; --espace-4: 4px; --espace-48: 48px; --espace-8: 8px; --etat-appui-echelle: 0.97; --etat-desactive: 0.4; --etat-presse: 0.8; --etat-voile: 0.32; --etat-voile-fort: 0.55; --gabarit-contenu: 900px; --graisse-appuyee: 600; --graisse-grasse: 700; --graisse-moyenne: 500; --graisse-normale: 400; --interlettre-affiche: -0.54px; --interlettre-corps: 0px; --interlettre-etiquette: 1.54px; --interlettre-mention: 1.8px; --interlettre-surtitre: 2.2px; --interlettre-titre: -0.42px; --interlettre-titre2: -0.33px; --interligne-corps: 1.55; --interligne-large: 1.44; --interligne-serre: 1.2; --interligne-titre: 1.3; --mouvement-couleur: 160ms; --mouvement-deplace: 260ms; --mouvement-etat: 90ms; --mouvement-feuille: 380ms; --police-corps: Inter Tight; --police-mono: JetBrains Mono; --police-titre: Fraunces; --rayon-l: 18px; --rayon-m: 14px; --rayon-pilule: 999px; --rayon-s: 8px; --rayon-sheet: 20px; --rayon-xl: 24px; --texte-accroche: 17px; --texte-affiche: 36px; --texte-code: 14px; --texte-corps: 15px; --texte-etiquette: 11px; --texte-grand-titre: 34px; --texte-lecture: 16px; --texte-legende: 12px; --texte-lien: 14px; --texte-micro: 10px; --texte-titre: 22px; --texte-titre-carte: 21px; --texte-titre2: 28px; --texte-titre3: 20px; --verre-flou: 20px; --verre-flou-fort: 40px; /* Couleurs — CoproHub */ --couleur-accent: #C9A961; --couleur-accent-clair: #E6CB91; --couleur-accent-texte: #B45309; --couleur-attention: #D97706; --couleur-attention-doux: #FFFBEB; --couleur-attention-texte: #B45309; --couleur-attention-trait: #FDE68A; --couleur-bordure: #E2DFD6; --couleur-carte: #FFFFFF; --couleur-danger: #B42318; --couleur-danger-doux: #FEF4F3; --couleur-danger-texte: #8E0307; --couleur-danger-trait: #F2B8B2; --couleur-embleme: #C9A961; --couleur-encre: #0F2E45; --couleur-fond: #F8F5F0; --couleur-fond-creux: #EEEBE3; --couleur-marque: #1E3A5F; --couleur-marque-100: #CCDBEC; --couleur-marque-200: #ABBFD5; --couleur-marque-50: #F1F8FF; --couleur-marque-claire: #335476; --couleur-marque-sombre: #0F2E45; --couleur-neutre: #718096; --couleur-neutre-doux: #EEEBE3; --couleur-neutre-texte: #4A5568; --couleur-neutre-trait: #E2DFD6; --couleur-separateur: #E2DFD6; --couleur-succes: #059669; --couleur-succes-doux: #ECFDF5; --couleur-succes-texte: #047857; --couleur-succes-trait: #A7F3D0; --couleur-sur-marque: #FFFFFF; --couleur-texte: #1A202C; --couleur-texte-discret: #5E6B80; --couleur-texte-secondaire: #4A5568; --couleur-voile: #0F2E4552; --couleur-voile-fort: #0F2E458C; --donnee-1: #1E3A5F; --donnee-2: #C9A961; --donnee-3: #335476; --donnee-4: #059669; --donnee-5: #D97706; --donnee-6: #6D88A5; --donnee-axe: #0F2E4547; --donnee-grille: #0F2E4514; --donnee-piste: #0F2E450F; --focus-anneau: #1E3A5F8C; --halo-marque: 0px 8px 24px 0px #1E3A5F52; --halo-marque-doux: 0px 4px 14px 0px #1E3A5F38; --ombre-elevated: 0px 12px 24px 0px #0F2E4533; --ombre-sheet: 0px -8px 40px 0px #0F2E452E; --ombre-standard: 0px 2px 8px 0px #0F2E451F; --ombre-subtle: 0px 1px 2px 0px #0F2E4514; --squelette-fond: #0F2E450F; --verre-filet: #0F2E450F; } [data-marque="appvora"] { --accent: #D4AF37; --amber-500: #FF9F0A; --amber-600: #C93400; --attention: var(--amber-500); --attention-douce: #FF9F0A29; --blue-400: #60A5FA; --blue-500: #3B82F6; --bordure: #FFFFFF47; --bordure-forte: #FFFFFF6B; --cible-tactile: 56px; --cible-tactile-mac: 40px; --conteneur-ipad: 700px; --conteneur-mac: 900px; --coral-300: #FF8AA3; --coral-500: #E23E63; --donnee-1: #FFFFFF; --donnee-2: var(--green-500); --donnee-3: var(--blue-500); --donnee-4: var(--amber-500); --donnee-5: #EC4899; --donnee-6: #14B8A6; --donnee-axe: #FFFFFF73; --donnee-grille: #FFFFFF2E; --donnee-piste: #FFFFFF2E; --echelle-police: 0.9; --erreur: var(--red-400); --erreur-douce: #EF44442E; --espace-gouttiere: 16px; --espace-lg: 14px; --espace-md: 10px; --espace-none: 0px; --espace-sm: 8px; --espace-unit: 4px; --espace-xl: 32px; --espace-xs: 4px; --espace-xxl: 48px; --espace-xxs: 2px; --etat-desactive: 0.4; --etat-presse: 0.8; --focus-anneau: #8B5CF6A6; --fond: #000000; --fond-eleve: var(--violet-500); --forest-300: #63C79A; --forest-500: #1F8A57; --graisse-appuyee: 600; --graisse-display: 700; --graisse-grasse: 700; --graisse-moyenne: 500; --graisse-normale: 400; --green-400: #4ADE80; --green-500: #22C55E; --green-600: #16A34A; --halo-primaire: 0px 8px 24px 0px #7C3AED57; --halo-primaire-doux: 0px 4px 14px 0px #7C3AED57; --info: var(--blue-400); --info-douce: #3B82F62E; --ink-0: #FFFFFF; --ink-025: #FBFAFF; --ink-050: #F6F5FA; --ink-100: #EFEDF4; --ink-200: #E2E0E9; --ink-300: #C9C6D4; --ink-400: #9C98AB; --ink-500: #736F82; --ink-600: #565162; --ink-700: #3C3849; --ink-800: #232030; --ink-850: #1B1626; --ink-900: #14101C; --ink-950: #0B0711; --interligne-caption: 1.33; --interligne-corps: 1.44; --interligne-large-title: 1.2; --interligne-serre: 1.27; --interligne-title: 1.21; --lavender-300: #C4B5FD; --lavender-500: #8B5CF6; --midnight-300: #8E8E99; --midnight-500: #2C2C34; --mouvement-base: 0ms; --mouvement-instant: 90ms; --mouvement-lent: 0ms; --mouvement-rapide: 0ms; --ocean-300: #6FA8FF; --ocean-500: #0A6CFF; --ombre-elevated: 0px 40px 90px 0px #00000073; --ombre-sheet: 0px -10px 48px 0px #00000099; --ombre-standard: 0px 4px 18px 0px #2E106538; --ombre-subtle: 0px 1px 2px 0px #00000066; --police-display: Baloo Tamma 2; --police-mono: JetBrains Mono; --police-texte: Source Sans 3; --primaire: var(--violet-400); --primaire-doux: #A78BFA38; --primaire-presse: var(--violet-700); --primaire-survol: var(--accent); --rayon-icon-tile: 10px; --rayon-large: 24px; --rayon-medium: 14px; --rayon-pill: 999px; --rayon-small: 10px; --rayon-xlarge: 32px; --red-400: #F87171; --red-500: #EF4444; --sand-300: #D9BE93; --sand-500: #9A7B4F; --secondaire: var(--ink-300); --separateur: #FFFFFF2E; --slate-300: #93A0B2; --slate-500: #4E5A6B; --squelette: #FFFFFF24; --squelette-reflet: #FFFFFF4D; --succes: var(--green-400); --succes-doux: #22C55E2E; --sunset-300: #FFA469; --sunset-500: #E4671B; --sur-primaire: var(--violet-600); --surface: #1C1C1E; --surface-creuse: #111113; --surface-survol: #FFFFFF33; --texte-lien: var(--violet-700); --texte-primaire: #FFFFFF; --texte-secondaire: #FFFFFFC2; --texte-sur-primaire: #FFFFFF; --texte-tertiaire: #FFFFFF94; --texte-body: 15 * var(--echelle-police); --texte-callout: 14 * var(--echelle-police); --texte-caption: 12 * var(--echelle-police); --texte-caption2: 11 * var(--echelle-police); --texte-footnote: 13 * var(--echelle-police); --texte-headline: 17 * var(--echelle-police); --texte-large-title: 34 * var(--echelle-police); --texte-subheadline: 15 * var(--echelle-police); --texte-title: 28 * var(--echelle-police); --texte-title2: 22 * var(--echelle-police); --texte-title3: 20 * var(--echelle-police); --verre-bordure: #FFFFFF38; --verre-filet: #FFFFFF0F; --verre-flou: 44px; --verre-flou-fort: 40px; --verre-fond: #2822366B; --verre-fond-fort: #FFFFFF3D; --violet-050: #F5F3FF; --violet-100: #EDE9FE; --violet-200: #DDD6FE; --violet-300: #C4B5FD; --violet-400: #A78BFA; --violet-500: #8B5CF6; --violet-600: #7C3AED; --violet-700: #6D28D9; --violet-800: #5B21B6; --violet-900: #4C1D95; --violet-950: #2E1065; --voile: #0000008C; } [data-marque="manquapp"] { --couleur-accent: #FFD43B; --couleur-accent-clair: #FFD43B; --couleur-accent-texte: #B45309; --couleur-attention: #D97706; --couleur-attention-doux: #FFFBEB; --couleur-attention-texte: #B45309; --couleur-attention-trait: #FDE68A; --couleur-bordure: #E2DFD6; --couleur-carte: #FFFFFF; --couleur-danger: #B42318; --couleur-danger-doux: #FEF4F3; --couleur-danger-texte: #8E0307; --couleur-danger-trait: #F2B8B2; --couleur-embleme: #FFD43B; --couleur-encre: #333333; --couleur-fond: #FFFAF6; --couleur-fond-creux: #EEEBE3; --couleur-marque: #F4756C; --couleur-marque-100: #FFFAF6; --couleur-marque-200: #FF8787; --couleur-marque-50: #FFFAF6; --couleur-marque-claire: #FF8787; --couleur-marque-sombre: #333333; --couleur-neutre: #718096; --couleur-neutre-doux: #EEEBE3; --couleur-neutre-texte: #4A5568; --couleur-neutre-trait: #E2DFD6; --couleur-separateur: #E2DFD6; --couleur-succes: #059669; --couleur-succes-doux: #ECFDF5; --couleur-succes-texte: #047857; --couleur-succes-trait: #A7F3D0; --couleur-sur-marque: #FFFFFF; --couleur-texte: #1A202C; --couleur-texte-discret: #5E6B80; --couleur-texte-secondaire: #4A5568; --couleur-voile: #33333352; --couleur-voile-fort: #3333338C; --donnee-1: #F4756C; --donnee-2: #FFD43B; --donnee-3: #FF8787; --donnee-4: #059669; --donnee-5: #D97706; --donnee-6: #FF8787; --donnee-axe: #33333347; --donnee-grille: #33333314; --donnee-piste: #3333330F; --focus-anneau: #F4756C8C; --halo-marque: 0px 8px 24px 0px #F4756C52; --halo-marque-doux: 0px 4px 14px 0px #F4756C38; --ombre-elevated: 0px 12px 24px 0px #33333333; --ombre-sheet: 0px -8px 40px 0px #3333332E; --ombre-standard: 0px 2px 8px 0px #3333331F; --ombre-subtle: 0px 1px 2px 0px #33333314; --squelette-fond: #3333330F; --verre-filet: #3333330F; } [data-marque="ton-miroir"] { --couleur-accent: #EFC15F; --couleur-accent-clair: #EFC15F; --couleur-accent-texte: #B45309; --couleur-attention: #D97706; --couleur-attention-doux: #FFFBEB; --couleur-attention-texte: #B45309; --couleur-attention-trait: #FDE68A; --couleur-bordure: #E2DFD6; --couleur-carte: #FFFFFF; --couleur-danger: #B42318; --couleur-danger-doux: #FEF4F3; --couleur-danger-texte: #8E0307; --couleur-danger-trait: #F2B8B2; --couleur-embleme: #EFC15F; --couleur-encre: #252A52; --couleur-fond: #F4F1FB; --couleur-fond-creux: #EEEBE3; --couleur-marque: #252A52; --couleur-marque-100: #F4F1FB; --couleur-marque-200: #A78BDA; --couleur-marque-50: #F4F1FB; --couleur-marque-claire: #A78BDA; --couleur-marque-sombre: #252A52; --couleur-neutre: #718096; --couleur-neutre-doux: #EEEBE3; --couleur-neutre-texte: #4A5568; --couleur-neutre-trait: #E2DFD6; --couleur-separateur: #E2DFD6; --couleur-succes: #059669; --couleur-succes-doux: #ECFDF5; --couleur-succes-texte: #047857; --couleur-succes-trait: #A7F3D0; --couleur-sur-marque: #FFFFFF; --couleur-texte: #1A202C; --couleur-texte-discret: #5E6B80; --couleur-texte-secondaire: #4A5568; --couleur-voile: #252A5252; --couleur-voile-fort: #252A528C; --donnee-1: #252A52; --donnee-2: #EFC15F; --donnee-3: #A78BDA; --donnee-4: #059669; --donnee-5: #D97706; --donnee-6: #A78BDA; --donnee-axe: #252A5247; --donnee-grille: #252A5214; --donnee-piste: #252A520F; --focus-anneau: #252A528C; --halo-marque: 0px 8px 24px 0px #252A5252; --halo-marque-doux: 0px 4px 14px 0px #252A5238; --ombre-elevated: 0px 12px 24px 0px #252A5233; --ombre-sheet: 0px -8px 40px 0px #252A522E; --ombre-standard: 0px 2px 8px 0px #252A521F; --ombre-subtle: 0px 1px 2px 0px #252A5214; --squelette-fond: #252A520F; --verre-filet: #252A520F; } [data-marque="fo-soneo"] { --couleur-accent: #E2001A; --couleur-accent-clair: #E2001A; --couleur-accent-texte: #B45309; --couleur-attention: #D97706; --couleur-attention-doux: #FFFBEB; --couleur-attention-texte: #B45309; --couleur-attention-trait: #FDE68A; --couleur-bordure: #E2DFD6; --couleur-carte: #FFFFFF; --couleur-danger: #B42318; --couleur-danger-doux: #FEF4F3; --couleur-danger-texte: #8E0307; --couleur-danger-trait: #F2B8B2; --couleur-embleme: #E2001A; --couleur-encre: #000000; --couleur-fond: #FFFFFF; --couleur-fond-creux: #EEEBE3; --couleur-marque: #E2001A; --couleur-marque-100: #FFFFFF; --couleur-marque-200: #E2001A; --couleur-marque-50: #FFFFFF; --couleur-marque-claire: #E2001A; --couleur-marque-sombre: #000000; --couleur-neutre: #718096; --couleur-neutre-doux: #EEEBE3; --couleur-neutre-texte: #4A5568; --couleur-neutre-trait: #E2DFD6; --couleur-separateur: #E2DFD6; --couleur-succes: #059669; --couleur-succes-doux: #ECFDF5; --couleur-succes-texte: #047857; --couleur-succes-trait: #A7F3D0; --couleur-sur-marque: #FFFFFF; --couleur-texte: #1A202C; --couleur-texte-discret: #5E6B80; --couleur-texte-secondaire: #4A5568; --couleur-voile: #00000052; --couleur-voile-fort: #0000008C; --donnee-1: #E2001A; --donnee-2: #E2001A; --donnee-3: #E2001A; --donnee-4: #059669; --donnee-5: #D97706; --donnee-6: #E2001A; --donnee-axe: #00000047; --donnee-grille: #00000014; --donnee-piste: #0000000F; --focus-anneau: #E2001A8C; --halo-marque: 0px 8px 24px 0px #E2001A52; --halo-marque-doux: 0px 4px 14px 0px #E2001A38; --ombre-elevated: 0px 12px 24px 0px #00000033; --ombre-sheet: 0px -8px 40px 0px #0000002E; --ombre-standard: 0px 2px 8px 0px #0000001F; --ombre-subtle: 0px 1px 2px 0px #00000014; --squelette-fond: #0000000F; --verre-filet: #0000000F; } /* États des composants — des rôles, jamais des couleurs. Un seul bloc suffit : `var()` se résout à l'usage, donc ces noms suivent la marque et le mode sans être redéclarés. */ :root { --badge-accent-fond: var(--couleur-accent-clair); --badge-accent-texte: var(--couleur-texte); --badge-accent-trait: var(--couleur-accent); --badge-attention-fond: var(--couleur-attention-doux); --badge-attention-texte: var(--couleur-attention-texte); --badge-attention-trait: var(--couleur-attention-trait); --badge-danger-fond: var(--couleur-danger-doux); --badge-danger-texte: var(--couleur-danger-texte); --badge-danger-trait: var(--couleur-danger-trait); --badge-interlettre: 0.96px; --badge-marque-bordure: var(--couleur-marque-200); --badge-marque-fond: var(--couleur-marque-doux); --badge-marque-texte: var(--couleur-marque-sombre); --badge-marque-trait: var(--couleur-marque-200); --badge-neutre-fond: var(--couleur-neutre-doux); --badge-neutre-texte: var(--couleur-neutre-texte); --badge-neutre-trait: var(--couleur-neutre-trait); --badge-rayon: var(--rayon-pilule); --badge-rembourrage-h: 10px; --badge-rembourrage-v: var(--espace-4); --badge-succes-fond: var(--couleur-succes-doux); --badge-succes-texte: var(--couleur-succes-texte); --badge-succes-trait: var(--couleur-succes-trait); --bandeau-espace: 10px; --bandeau-rembourrage-h: 40px; --bandeau-rembourrage-v: 30px; --bouton-discret-fond: var(--couleur-fond); --bouton-discret-fond-presse: var(--couleur-marque-100); --bouton-discret-fond-survol: var(--couleur-marque-50); --bouton-discret-texte: var(--couleur-marque); --bouton-focus-bordure: var(--couleur-accent); --bouton-l-hauteur: 56px; --bouton-l-rembourrage-h: 24px; --bouton-l-texte: var(--texte-accroche); --bouton-m-hauteur: 44px; --bouton-m-rembourrage-h: 18px; --bouton-m-texte: var(--texte-lien); --bouton-principal-fond: var(--couleur-marque); --bouton-principal-fond-desactive: var(--couleur-marque-200); --bouton-principal-fond-presse: var(--couleur-marque-sombre); --bouton-principal-fond-survol: var(--couleur-marque-claire); --bouton-principal-texte: var(--couleur-sur-marque); --bouton-rayon: 10px; --bouton-rembourrage-h: 30px; --bouton-rembourrage-v: 15px; --bouton-s-hauteur: 32px; --bouton-s-rembourrage-h: 12px; --bouton-s-texte: var(--texte-legende); --bouton-secondaire-bordure: var(--couleur-bordure); --bouton-secondaire-bordure-survol: var(--couleur-marque-200); --bouton-secondaire-fond: var(--couleur-carte); --bouton-secondaire-fond-desactive: var(--couleur-fond-creux); --bouton-secondaire-fond-presse: var(--couleur-marque-100); --bouton-secondaire-fond-survol: var(--couleur-marque-50); --bouton-secondaire-texte: var(--couleur-marque); --carte-bordure: var(--couleur-bordure); --carte-entete-fond: var(--couleur-fond); --carte-entete-rembourrage-v: 12px; --carte-espace: 10px; --carte-fond: var(--couleur-carte); --carte-rembourrage-h: 16px; --carte-rembourrage-v: 14px; --champ-bordure: var(--couleur-bordure); --champ-bordure-focus: var(--couleur-marque); --champ-fond: var(--couleur-fond); --champ-fond-desactive: var(--couleur-fond-creux); --champ-indice: var(--couleur-texte-discret); --champ-rayon: var(--rayon-l); --champ-texte: var(--couleur-texte); --chassis-barre-fond: var(--couleur-marque-sombre); --chassis-barre-largeur: 248px; --chassis-barre-rembourrage-h: 14px; --chassis-barre-rembourrage-v: 22px; --chassis-contenu-fond: var(--couleur-fond); --chassis-gouttiere: 34px; --chassis-gouttiere-resserree: 18px; --chassis-panneau-fond: var(--couleur-carte); --chassis-panneau-largeur: 436px; --chassis-panneau-largeur-resserree: 392px; --chassis-tiroir-fond: var(--couleur-carte); --chassis-tiroir-largeur: var(--chassis-panneau-largeur); --description-espace: var(--espace-8); --description-rembourrage-h: var(--espace-24); --description-rembourrage-v: 22px; --email-espace-action: 18px; --email-espace-bloc: var(--espace-24); --email-espace-bouton: 28px; --email-espace-paragraphe: var(--espace-16); --email-espace-pied: 38px; --email-espace-statut: 20px; --email-espace-surtitre: 34px; --email-espace-titre: 10px; --email-gouttiere: 40px; --entete-rembourrage-h: 40px; --entete-rembourrage-v: var(--espace-24); --lien-normal: var(--couleur-marque); --lien-survol: var(--couleur-marque-claire); --lien-visite: var(--couleur-marque-sombre); --liste-colonne-espace: 14px; --liste-entete-fond: var(--couleur-fond); --liste-entete-rembourrage-v: 11px; --liste-entete-texte: var(--couleur-texte-discret); --liste-rangee-fond: var(--couleur-carte); --liste-rangee-rembourrage-h: 18px; --liste-rangee-rembourrage-v: 14px; --liste-rangee-selection: var(--couleur-marque-50); --liste-rangee-survol: var(--couleur-fond); --liste-separateur: var(--couleur-separateur); --resolution-espace: 10px; --resolution-rembourrage-h: 26px; --resolution-rembourrage-v: 24px; --ticket-colonne-cle: 142px; --ticket-colonne-valeur: 330px; --ticket-espace-ligne: 10px; --ticket-rembourrage-h: var(--espace-24); --ticket-rembourrage-v: 20px; --tuile-bordure: var(--couleur-bordure); --tuile-bordure-survol: var(--couleur-marque-100); --tuile-espace: 12px; --tuile-filet: 3px; --tuile-fond: var(--couleur-carte); --tuile-libelle: var(--couleur-texte-discret); --tuile-rembourrage-h: 17px; --tuile-rembourrage-v: 15px; }