/* ============================================================================= Indeso Design System - tokens ----------------------------------------------------------------------------- Source unique de verite pour toutes les valeurs de style. REGLE : un composant n'ecrit JAMAIS une valeur en dur (couleur, taille, espacement, rayon). Il consomme toujours une variable definie ici. C'est ce qui permet de rehabiller l'ensemble des projets sans toucher au code des composants. Organisation en deux couches : 1. PRIMITIVES - les valeurs brutes, sans intention (--my-neutral-600) 2. SEMANTIQUES - les roles, ce que consomment les composants (--my-action-primary, --my-text-body) Les couleurs de marque ne sont pas definies ici mais dans wwwroot/css/brands/.css. Ce fichier declare les roles et les branche sur les variables de marque. ============================================================================= */ :root { /* ========================================================================= 1. PRIMITIVES - neutres Gris legerement bleutes, derives des deux gris releves sur indeso.fr (#3A3B43 pour les titres, #696B70 pour le texte courant). ========================================================================= */ --my-neutral-0: #ffffff; --my-neutral-50: #f8f9fa; --my-neutral-100: #f1f2f4; --my-neutral-200: #e4e5e8; --my-neutral-300: #cdced2; --my-neutral-400: #adaeb3; --my-neutral-500: #8a8c92; --my-neutral-600: #696b70; /* indeso.fr - texte courant */ --my-neutral-700: #4e5058; --my-neutral-800: #3a3b43; /* indeso.fr - titres */ --my-neutral-900: #23242a; --my-neutral-1000: #000000; /* ========================================================================= 1b. PRIMITIVES - retours utilisateur Boracay portait DEUX palettes de retour concurrentes : - celle du MudTheme success #64B44D, warning #ffc107, error #dc3545, info #17a2b8 - celle du portail --cp-success #1e9e62, --cp-warning #d97706, client --cp-info #4a6fd8 Les valeurs du MudTheme sont retenues, pour deux raisons : c'est la seule palette commune aux trois applications, et les --cp-* appartiennent au portail client, hors du perimetre de ce Design System. Consequence a valider : les etiquettes de statut changent legerement de teinte par rapport a Boracay, ou elles suivaient les --cp-*. C'est le prix de la suppression de la double palette. Les niveaux 300 et 100 n'existaient pas dans le MudTheme, qui ne declare que la couleur pleine ; ils sont derives pour servir de bordure et de fond d'etiquette. Sans le niveau intermediaire, une bordure prend la couleur pleine et devient trop contrastee sur un fond clair. Ces couleurs ne dependent pas de la marque : une erreur reste rouge chez tous les clients. ========================================================================= */ --my-success-500: #64b44d; --my-success-300: #c4e3b9; --my-success-100: #eff7ec; --my-warning-500: #ffc107; --my-warning-300: #ffe28a; --my-warning-100: #fff8e1; --my-error-500: #dc3545; --my-error-300: #f3b6bd; --my-error-100: #fdecee; --my-info-500: #17a2b8; --my-info-300: #a5dde5; --my-info-100: #e7f6f8; /* Composantes RVB des couleurs ci-dessus. MudBlazor ne se contente pas des couleurs pleines : il compose aussi des teintes translucides pour les bordures et les etats de survol, via des variables --mud-palette-*-rgb. Sans ces valeurs, une bordure de bouton resterait au violet MudBlazor par defaut alors que son texte suit la marque. Il n'existe pas de fonction CSS permettant d'extraire les composantes d'un token hexadecimal, d'ou cette duplication. A maintenir alignee sur les valeurs ci-dessus. */ --my-success-500-rgb: 100, 180, 77; --my-warning-500-rgb: 255, 193, 7; --my-error-500-rgb: 220, 53, 69; --my-info-500-rgb: 23, 162, 184; --my-neutral-800-rgb: 58, 59, 67; /* ========================================================================= 1c. PRIMITIVES - palette d'etiquettes metier Douze couples de couleurs, reprises des --chips-primary-N et --chips-secondary-N de Boracay. Elles servent aux statuts metier configures en base de donnees, ou l'intention n'est pas connue a la compilation : un utilisateur choisit "orange" pour son statut, sans qu'on puisse savoir si cela signifie un avertissement. C'est le seul cas ou une couleur est designee par sa teinte et non par son role. Les index numeriques d'origine sont remplaces par les noms deja utilises dans le code appelant, ce qui evite de maintenir un dictionnaire C# de correspondance. A noter : certains noms decrivent mal leur couleur. "blue" et "dark-blue" sont en realite deux cyans, et "light-green" est plus sombre que "green". Les valeurs sont conservees a l'identique pour ne pas modifier des statuts existants, mais il faudra decider si on les corrige. ========================================================================= */ --my-tag-red-fg: #dc2626; --my-tag-red-bg: #fecccf; --my-tag-orange-fg: #ea580c; --my-tag-orange-bg: #ffedd5; --my-tag-yellow-fg: #be9000; --my-tag-yellow-bg: #fef6c6; --my-tag-green-fg: #5d9a06; --my-tag-green-bg: #ecfccc; --my-tag-light-green-fg: #16a34a; --my-tag-light-green-bg: #dcfce7; --my-tag-green-blue-fg: #0d9488; --my-tag-green-blue-bg: #ccfbf1; --my-tag-blue-fg: #0991b2; --my-tag-blue-bg: #cffafe; --my-tag-dark-blue-fg: #208a9e; --my-tag-dark-blue-bg: #dbeafe; --my-tag-purple-fg: #8c46e5; --my-tag-purple-bg: #ebe1ff; --my-tag-mauve-fg: #c027d3; --my-tag-mauve-bg: #f8eafd; --my-tag-pink-fg: #ff099c; --my-tag-pink-bg: #fbdbfe; --my-tag-grey-fg: #676767; --my-tag-grey-bg: #d8d8d8; /* ========================================================================= 2. SEMANTIQUES - couleurs Branchees sur les variables de marque. Voir wwwroot/css/brands/. ========================================================================= */ /* Action - boutons et elements interactifs */ --my-action-primary: var(--my-brand-primary); --my-action-primary-hover: var(--my-brand-primary-dark); --my-action-primary-text: var(--my-brand-primary-contrast); --my-action-secondary: var(--my-brand-secondary); --my-action-secondary-hover: var(--my-brand-secondary-dark); --my-action-secondary-text: var(--my-brand-secondary-contrast); --my-action-disabled: var(--my-neutral-300); --my-action-disabled-text: var(--my-neutral-500); /* Surfaces - fonds */ --my-surface-page: var(--my-neutral-50); --my-surface-card: var(--my-neutral-0); --my-surface-raised: var(--my-neutral-0); --my-surface-sunken: var(--my-neutral-100); --my-surface-hover: var(--my-neutral-100); --my-surface-selected: var(--my-brand-primary-subtle); --my-surface-inverse: var(--my-neutral-800); /* Texte */ --my-text-heading: var(--my-neutral-800); --my-text-body: var(--my-neutral-600); --my-text-muted: var(--my-neutral-500); --my-text-disabled: var(--my-neutral-400); --my-text-on-brand: var(--my-brand-primary-contrast); --my-text-on-inverse: var(--my-neutral-0); --my-text-link: var(--my-brand-secondary); /* Bordures et separateurs */ --my-border-subtle: var(--my-neutral-200); --my-border-default: var(--my-neutral-300); --my-border-strong: var(--my-neutral-400); --my-border-focus: var(--my-brand-primary); /* Navigation - barre laterale et barre d'application */ --my-nav-bg: var(--my-brand-nav-bg); --my-nav-text: var(--my-brand-nav-text); --my-nav-active-bg: var(--my-brand-nav-active-bg); /* ========================================================================= 3. TYPOGRAPHIE Police Indeso : Lato (relevee sur indeso.fr). ATTENTION - Lato ne propose que 300 / 400 / 700 / 900 sur Google Fonts. Il n'existe ni 500 ni 600. Toute valeur intermediaire serait synthetisee par le navigateur, avec un rendu incoherent d'un poste a l'autre. Les tokens ci-dessous sont donc volontairement limites a ces 4 graisses. JetBrains Mono est conserve pour les donnees techniques (references, codes, identifiants) : ses chiffres sont a largeur fixe, ce qui evite le tremblement des colonnes dans les tableaux. ========================================================================= */ /* La police fait partie de l'identite : elle est donc definie par la marque. Le repli couvre le cas ou aucun fichier de marque n'est charge. */ --my-font-sans: var(--my-brand-font-sans, "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif); --my-font-mono: "JetBrains Mono", "Consolas", "Courier New", monospace; --my-font-weight-light: 300; --my-font-weight-regular: 400; --my-font-weight-bold: 700; --my-font-weight-black: 900; /* Graisse intermediaire, definie par la marque parce qu'elle depend de la police : Inter fournit un 600, Lato non. Boracay utilisait 600 sur ses etiquettes et ses libelles ; demander la meme valeur avec Lato donnerait une graisse synthetisee par le navigateur, au rendu variable. Chaque marque declare donc la graisse intermediaire que sa police sait rendre, et les composants demandent ce token plutot qu'un chiffre. */ --my-font-weight-medium: var(--my-brand-font-weight-medium, 700); /* Graisse appuyee, entre bold et black. Meme raison : Inter fournit un 800, Lato non. Boracay l'emploie sur les liens actifs de la barre laterale, les titres d'ecran et les noms d'utilisateur. */ --my-font-weight-heavy: var(--my-brand-font-weight-heavy, 900); /* Echelle de taille. La base applicative est 14px : plus dense que le site vitrine (16px), adapte aux ecrans de saisie et aux tableaux. */ --my-font-size-2xs: 0.6875rem; /* 11px - micro-libelles, badges */ --my-font-size-xs: 0.75rem; /* 12px - legendes, aide */ --my-font-size-sm: 0.8125rem; /* 13px - tableaux denses */ --my-font-size-md: 0.875rem; /* 14px - BASE applicative */ --my-font-size-lg: 1rem; /* 16px - confort, base mobile */ --my-font-size-xl: 1.125rem; /* 18px */ --my-font-size-2xl: 1.375rem; /* 22px */ --my-font-size-3xl: 1.625rem; /* 26px */ --my-font-size-4xl: 2rem; /* 32px */ --my-font-size-5xl: 2.875rem; /* 46px - display, aligne sur le site */ --my-line-height-tight: 1.25; --my-line-height-snug: 1.4; --my-line-height-normal: 1.5; --my-line-height-loose: 1.7; --my-letter-spacing-tight: -0.01em; --my-letter-spacing-normal: 0; --my-letter-spacing-wide: 0.02em; --my-letter-spacing-caps: 0.08em; /* pour les libelles en capitales */ /* ========================================================================= 4. ESPACEMENT Echelle reprise de Boracay (ClientSpacing) pour que le portage des composants existants se fasse sans reinterpretation des valeurs. ========================================================================= */ --my-space-none: 0; --my-space-2xs: 2px; --my-space-xs: 4px; --my-space-sm: 8px; --my-space-md: 16px; --my-space-lg: 24px; --my-space-xl: 40px; --my-space-2xl: 64px; /* ========================================================================= 5. RAYONS Echelle reprise de Boracay (ClientRadius). Le site vitrine utilise des boutons en pilule complete (100px), en capitales et en graisse 800. C'est un registre marketing : transpose dans un formulaire dense ou un tableau, il devient illisible et consomme trop de largeur. Le rayon applicatif par defaut est donc --my-radius-md ; la pilule reste disponible via --my-radius-full pour les ecrans de type portail ou page d'accueil. ========================================================================= */ --my-radius-none: 0; --my-radius-sm: 6px; --my-radius-md: 12px; --my-radius-lg: 20px; --my-radius-xl: 32px; --my-radius-full: 9999px; /* ========================================================================= 6. OMBRES Echelle reprise de Boracay (ClientShadow). ========================================================================= */ --my-shadow-none: none; --my-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --my-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08); --my-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.12); --my-shadow-focus: 0 0 0 3px var(--my-brand-primary-subtle); /* ========================================================================= 7. TAILLES DE CONTROLE ET CIBLES TACTILES Pose des maintenant, avant le projet LIVIN (saisie des heures de mobilite sur smartphone) : 44px est le minimum recommande pour une cible tactile. Les composants doivent respecter --my-touch-target-min des la conception, pas en rattrapage. ========================================================================= */ --my-control-height-sm: 32px; --my-control-height-md: 40px; /* defaut desktop */ --my-control-height-lg: 48px; /* defaut mobile */ --my-touch-target-min: 44px; /* Dimensions de la charpente d'ecran, reprises de Boracay. Elles etaient ecrites en dur dans plusieurs endroits : la hauteur 72 de la barre de titre apparaissait aussi sous la forme calc(100% - 77px) dans MyMainContentStack, ou 77 valait 72 plus la bordure. Un seul token evite que les deux se desynchronisent. */ --my-appbar-height: 72px; --my-sidebar-width: 270px; --my-sidebar-width-mini: 76px; /* ========================================================================= 8. POINTS DE RUPTURE Alignes sur les breakpoints MudBlazor pour eviter deux systemes concurrents. Utilisables en CSS uniquement a titre de reference : les media queries ne peuvent pas consommer une variable, les valeurs sont donc reecrites dans base.css. ========================================================================= */ --my-breakpoint-xs: 0px; --my-breakpoint-sm: 600px; --my-breakpoint-md: 960px; --my-breakpoint-lg: 1280px; --my-breakpoint-xl: 1920px; /* ========================================================================= 9. TRANSITIONS ET PROFONDEUR ========================================================================= */ --my-transition-fast: 120ms ease; --my-transition-base: 180ms ease; --my-transition-slow: 300ms ease; --my-z-dropdown: 1000; --my-z-sticky: 1100; --my-z-drawer: 1200; --my-z-dialog: 1300; --my-z-toast: 1400; }