/* ========================================================= TELEMAQUE — JETONS Les valeurs de l'identite et rien d'autre : aucune regle sur un element, aucun composant. Toute page qui ecrit var(--surface-...), var(--action-...) ou tout autre jeton charge cette feuille d'abord, qu'elle vive dans base/app.html, dans base/parent_app.html ou seule. telemaque-theme.css, lui, pose la fondation visuelle de l'espace de gestion et ne se charge que la. --- Token values only, no element rules. Every page writing a token loads this sheet first. ========================================================= */ /* ========================================================= JETONS — GRAMMAIRE D'INTENTION Un jeton dit ce qu'une valeur fait, jamais de quelle couleur elle est. « action-primary » restera le nom de l'action principale que l'ecole soit en indigo, en vert ou en noir, et que le theme soit clair ou sombre : seules les valeurs changent, jamais les noms. C'est ce qui permettra d'ecrire un jour un theme sombre en redefinissant ce seul bloc, sans toucher a un seul composant. Regle qui vaut pour tout ce fichier : un jeton ne ment jamais sur son nom : la reussite s'appelle status-success, et sa valeur est verte. Les anciens noms --tm-* et --eros-*, numerotes ou nommes d'apres leur teinte, ont disparu ; un test veille a ce qu'ils ne reviennent pas. --- Intent-based tokens: a token says what a value does, never what colour it is. A token never lies about its name. ========================================================= */ :root { /* ----------------------------------------------------- ECHELLE DE L'ECOLE Seul endroit du depot ou une couleur porte un numero. Aucun composant ne s'en sert directement : tous passent par les jetons d'intention plus bas. Toute l'echelle se deduit d'une seule ancre, --brand-500, la couleur que chaque ecole pose dans l'ecran Apparence : les teintes claires la melangent au blanc, les foncees au noir, par pas de 20 %. Pour l'indigo par defaut, ces melanges redonnent exactement l'echelle d'origine. Une ecole en vert a donc des fonds verts pales et une barre laterale vert profond, jamais des fonds lilas. --- The only numbered colours. The whole scale is mixed from one anchor, --brand-500, set per school on the Appearance screen: white for the light steps, black for the dark ones, by 20 % steps. No fixed hue leaks into a school. ----------------------------------------------------- */ --brand-500: #6610F2; /* l'ancre, indigo par defaut */ --brand-100: color-mix(in srgb, var(--brand-500) 20%, white); --brand-200: color-mix(in srgb, var(--brand-500) 40%, white); --brand-300: color-mix(in srgb, var(--brand-500) 60%, white); --brand-400: color-mix(in srgb, var(--brand-500) 80%, white); --brand-600: color-mix(in srgb, var(--brand-500) 80%, black); --brand-700: color-mix(in srgb, var(--brand-500) 60%, black); --brand-800: color-mix(in srgb, var(--brand-500) 40%, black); --brand-900: color-mix(in srgb, var(--brand-500) 20%, black); /* Neutres : un gris franc, legerement teinte de l'ancre (8 %), pour que les textes et filets s'accordent a la couleur de l'ecole quelle qu'elle soit. --- Neutrals: plain greys tinted 8 % with the anchor. */ --neutral-0: #FFFFFF; --neutral-500: color-mix(in srgb, var(--brand-500) 8%, #C6C6C6); --neutral-600: color-mix(in srgb, var(--brand-500) 8%, #616161); --neutral-700: color-mix(in srgb, var(--brand-500) 8%, #4B4B4B); --neutral-900: color-mix(in srgb, var(--brand-500) 8%, #141414); /* ----------------------------------------------------- SURFACES L'application est claire et la couleur de l'ecole y est partout en teinte : le fond de page en est une teinte tres pale, sur lequel les cartes blanches ressortent ; les zones en creux prennent le 100. Le fonce est reserve a la barre laterale, le 900, qui tranche avec tout le contenu, et aux bandeaux d'accent, le 800. --- A light application tinted with the school colour: pale page, white cards, brand-100 sunken areas. Dark is kept for the sidebar (900) and accent bands (800). ----------------------------------------------------- */ --surface-page: color-mix(in srgb, var(--brand-100) 40%, white); /* #F3ECFE pour l'indigo */ --surface-default: var(--neutral-0); /* cartes et panneaux */ --surface-sunken: var(--brand-100); /* zones en creux */ --surface-raised: var(--neutral-0); /* ce qui flotte, avec ombre */ --surface-inverse: var(--brand-800); /* bandeaux d'accent du contenu */ --surface-sidebar: var(--brand-900); /* la barre laterale */ /* ----------------------------------------------------- BORDURES ----------------------------------------------------- */ --border-subtle: var(--brand-200); /* filets internes */ --border-default: var(--brand-200); /* contour des cartes, separateurs */ --border-strong: var(--neutral-500); /* separation appuyee */ --border-inverse: color-mix(in srgb, var(--neutral-0) 14%, transparent); /* filet sur surface-inverse */ /* ----------------------------------------------------- TEXTE Les quatre premiers tiennent 4,5 pour 1 sur page, default et sunken. Le creux et la page prennent la teinte de l'ecole : le texte discret est donc, comme -link, assombri juste assez pour chaque ancre, par le calcul de appearance/contraste.py. Ecrit ici pour l'indigo. Le cinquieme, disabled, ne le tient pas et n'a pas a le tenir : un texte desactive est exempte, et il ne doit servir qu'a cela. --- The first four hold AA on every light surface; disabled is exempt and must serve only that purpose. ----------------------------------------------------- */ --text-primary: var(--neutral-900); /* 17,8:1 sur blanc */ --text-secondary: var(--neutral-700); /* 9,3:1 */ --text-muted: color-mix(in srgb, var(--neutral-600) 100%, black); /* calcule par ancre */ --text-disabled: var(--brand-300); /* hors AA, par nature */ --text-inverse: var(--neutral-0); /* 19,4:1 sur inverse */ --text-inverse-muted: color-mix(in srgb, var(--text-inverse) 60%, var(--surface-inverse)); /* 7,1:1 */ /* ----------------------------------------------------- ACTION primary le bouton et le lien d'action primary-hover au survol primary-active a l'enfoncement primary-subtle fond d'une action calme, d'une pastille primary-border contour sur ce fond primary-emphasis le texte lisible sur primary-subtle primary-link le texte d'un lien sur les surfaces claires primary-on ce qui s'ecrit sur primary Seule l'ancre se regle, dans l'ecran Apparence : chaque ecole y pose sa couleur. Les teintes s'en deduisent par melange, dans les proportions qui redonnent exactement l'echelle indigo. primary-emphasis suit le contrat des statuts : sur un fond doux on n'ecrit jamais l'ancre, on ecrit -emphasis. C'est l'ancre assombrie juste assez pour tenir 4,5 pour 1 sur son propre fond doux. L'indigo le tient sans assombrissement, d'ou la valeur ci-dessous ; pour une autre ancre, l'ecran Apparence pose le melange calcule par appearance/contraste.py. primary-link obeit a la meme regle, sur le fond de page, les cartes et les zones en creux : un lien ne s'ecrit jamais avec l'ancre elle-meme. L'ecran ne refuse une couleur que si le texte blanc d'un bouton n'y tient pas. --- Only the anchor is a setting; the tints are mixed from it. primary-emphasis is the anchor darkened just enough for AA on its own subtle tint: none for indigo, computed by appearance/contraste.py for any other anchor. primary-link does the same on the light surfaces. ----------------------------------------------------- */ --action-primary: var(--brand-500); --action-primary-hover: color-mix(in srgb, var(--action-primary) 80%, black); --action-primary-active: color-mix(in srgb, var(--action-primary) 60%, black); --action-primary-subtle: color-mix(in srgb, var(--action-primary) 20%, white); --action-primary-border: color-mix(in srgb, var(--action-primary) 40%, white); --action-primary-emphasis: color-mix(in srgb, var(--action-primary) 100%, black); --action-primary-link: color-mix(in srgb, var(--action-primary) 100%, black); --action-primary-on: var(--neutral-0); /* 7,2:1 */ /* ----------------------------------------------------- ETATS DESACTIVES, ICONES, GRAPHIQUES Le 300 et le 400 portent ce qui accompagne sans parler : l'etat desactive d'un controle, l'icone secondaire, les series d'un graphique. La premiere serie suit la couleur de l'ecole ; la grille des graphiques prend le 100. --- Indigo 300 and 400 carry disabled states, secondary icons and chart series; the first series follows the school. ----------------------------------------------------- */ --action-disabled: var(--brand-300); /* fond ou filet d'un controle desactive */ --icon-secondary: var(--brand-400); /* 5,2:1 sur blanc */ --chart-primary: var(--action-primary); --chart-secondary: var(--brand-400); --chart-tertiary: var(--brand-300); --chart-grid: var(--brand-100); /* ----------------------------------------------------- ICONES ET ILLUSTRATIONS Les icones sont a trait fin : une epaisseur, trois tailles. Les illustrations des etats vides lisent quatre teintes, toutes tirees de l'echelle de l'ecole. --- Thin-stroke icons, three sizes; empty-state illustrations read four tints from the school scale. ----------------------------------------------------- */ --icon-size-sm: 16px; --icon-size-md: 20px; --icon-size-lg: 24px; --icon-stroke: 1.6; --illustration-width: 220px; --illustration-accent: var(--action-primary); --illustration-tint: var(--brand-100); --illustration-tint-strong: var(--brand-200); --illustration-ink: var(--brand-800); /* ----------------------------------------------------- STATUTS Le contrat est le meme pour les quatre : status-X aplat ; on y ecrit status-X-on status-X-subtle fond doux ; on y ecrit -emphasis status-X-emphasis le texte lisible sur -subtle status-X-border le filet sur -subtle status-X-inverse le texte du statut sur surface-inverse Ecrire status-success sur status-success-subtle donne 4,43 pour 1 : c'est precisement pourquoi -emphasis existe, et pourquoi il est obligatoire la. -inverse est le ton clair du statut, pour un bandeau ou un en-tete sombre. Sans lui, l'or d'avertissement ecrit sur l'indigo profond est devenu -emphasis, un brun fait pour les fonds clairs, et s'est eteint. --- Same contract for all four. Text on -subtle uses -emphasis, never the base tone; text on surface-inverse uses -inverse. ----------------------------------------------------- */ --status-success: #1A7F4B; --status-success-subtle: #E6F4EC; --status-success-emphasis: #106037; /* 7,6:1 sur blanc */ --status-success-border: #A9D9BF; --status-success-on: var(--neutral-0); /* 5,0:1 */ --status-success-inverse: #6FD3A0; /* 10,6:1 sur inverse */ --status-error: #B3261E; --status-error-subtle: #FBEAE8; --status-error-emphasis: #8C1D18; --status-error-border: #EDBCB8; --status-error-on: var(--neutral-0); /* 6,5:1 */ --status-error-inverse: #FF9B8F; /* 9,5:1 */ --status-warning: #8A5A00; --status-warning-subtle: #FFF3DC; --status-warning-emphasis: #6B4600; --status-warning-border: #E8C88A; --status-warning-on: var(--neutral-0); /* 5,9:1 */ --status-warning-inverse: #F2BC35; /* 11,1:1 */ --status-info: var(--brand-600); --status-info-subtle: color-mix(in srgb, var(--brand-500) 12%, white); --status-info-emphasis: var(--brand-700); --status-info-border: var(--brand-200); --status-info-on: var(--neutral-0); /* 9,6:1 */ --status-info-inverse: var(--brand-200); /* 8,9:1 */ /* ----------------------------------------------------- FOCUS Un etat, pas une elevation : il ne se range pas dans l'echelle d'ombres. --- A state, not an elevation. ----------------------------------------------------- */ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--action-primary) 35%, transparent); /* ----------------------------------------------------- RAYONS Echelle resserree. Les champs de formulaire sont a zero : angle net, et le champ se distingue du bouton qui le suit. --- Tightened scale. Form fields are square-cornered. ----------------------------------------------------- */ --radius-none: 0; /* champs de formulaire */ --radius-sm: 2px; /* boutons, pastilles */ --radius-md: 2px; /* cartes */ --radius-lg: 2px; /* panneaux */ --radius-full: 2px; /* ancienne pilule : desormais nette */ /* ----------------------------------------------------- ESPACEMENTS — inchanges, ils ne portent pas d'identite ----------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; /* ----------------------------------------------------- TYPOGRAPHIE ----------------------------------------------------- */ --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Les chiffres s'ecrivent dans la police du texte ; les chiffres tabulaires (body) gardent l'alignement des colonnes. --- Figures use the text font; tabular numerals keep columns aligned. */ --font-figure: var(--font-sans); --text-xs: 10.5px; --text-sm: 12px; --text-base: 13px; --text-md: 14px; --text-lg: 15px; --text-xl: 20px; --text-2xl: 24px; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-strong: 800; /* ----------------------------------------------------- DECLINAISON DE L'INDIGO La couleur de l'ecole est la seule teinte : les zones se distinguent par le palier. Le 900 porte le panneau focal, le 800 le bloc de premier plan, le 500 les aplats d'accent et les carres d'icone, le 100 les zones pales et les filets. Les titres s'ecrivent en 900, les surtitres en 600. Les trois cycles gardent chacun leur palier, partout ou ils se distinguent : 300, 500, 800. --- Indigo scale roles: 900 focal panel, 800 foreground block, 500 accent fills and icon squares, 100 pale areas and rules. ----------------------------------------------------- */ --surface-focal: var(--brand-900); --surface-emphase: var(--brand-800); --surface-pale: var(--brand-100); --surface-marque: var(--brand-500); --text-titre: var(--brand-900); --text-accent: var(--brand-600); --text-sur-focal: var(--brand-200); --text-sur-emphase: var(--brand-200); --carre-plein: var(--brand-500); --carre-doux: var(--brand-100); --carre-doux-on: var(--brand-700); --filet-pale: var(--brand-100); --cycle-maternelle: var(--brand-300); --cycle-primaire: var(--brand-500); --cycle-secondaire: var(--brand-800); /* ----------------------------------------------------- OMBRES Une teinte, le 900 de l'ecole, et une intensite : le reglage « Intensite des ombres » de l'ecran Apparence, pose par base/_jetons.html en multiplicateur (5, la valeur par defaut, vaut 1 ; 0 eteint toutes les ombres). Chaque ombre porte son opacite de reference multipliee. --- One tint (school 900) and one strength, set from the Appearance screen (default 5 = 1, 0 = no shadow); each shadow's reference opacity is multiplied. ----------------------------------------------------- */ --shadow-color: var(--brand-900); --shadow-strength: 1; --shadow-xs: 0 1px 2px color-mix(in srgb, var(--shadow-color) calc(5% * var(--shadow-strength)), transparent); /* Relief d'un bouton : une ombre discrete, juste assez pour qu'il se detache du fond et reponde au survol. Un panneau ne la porte pas : elle dit « ceci se clique ». --- Button lift: a discreet shadow that says "this is clickable". */ --ombre-bouton: 0 1px 2px color-mix(in srgb, var(--shadow-color) 18%, transparent); --ombre-bouton-survol: 0 1px 3px color-mix(in srgb, var(--shadow-color) 26%, transparent), 0 2px 6px color-mix(in srgb, var(--shadow-color) 16%, transparent); --shadow-sm: 0 1px 3px color-mix(in srgb, var(--shadow-color) calc(7% * var(--shadow-strength)), transparent); --shadow-md: 0 1px 2px color-mix(in srgb, var(--shadow-color) calc(5% * var(--shadow-strength)), transparent), 0 1px 8px color-mix(in srgb, var(--shadow-color) calc(6% * var(--shadow-strength)), transparent); --shadow-lg: 0 4px 14px color-mix(in srgb, var(--shadow-color) calc(11% * var(--shadow-strength)), transparent); } /* ========================================================= LE JOUR OU UN THEME SOMBRE ARRIVERA Il s'ecrira ici, et nulle part ailleurs : les memes noms, d'autres valeurs. Aucun composant n'aura a changer, parce qu'aucun composant ne connait la couleur qu'il emploie. :root[data-theme="sombre"] { --surface-page: var(--brand-900); --surface-default: #1C0B3D; --text-primary: var(--neutral-0); --action-primary: var(--brand-300); --action-primary-on: var(--brand-900); ... } --- A dark theme would be written here and nowhere else. ========================================================= */