/* * jetons.css : la palette Arcadia et les mesures du produit, en un * seul endroit, pour les deux thèmes (clair et sombre). * * Ces valeurs viennent d'ARCADIA, le système de design interne d'ABB ; * voir habillage/ARCADIA.md pour la provenance de chaque teinte. * Elles sont ici, et nulle part ailleurs : aucun autre fichier de ce * projet n'a le droit d'écrire une couleur en dur. Changer une teinte * ici la change dans l'accueil, dans l'éditeur, et dans tous les guides * déjà publiés : ils rechargent ce même fichier à l'ouverture. * * Un jeton dont la valeur est identique en clair et en sombre prend une * seule ligne, en hexa nu. Un jeton dont la valeur DIFFÈRE prend deux * lignes : un repli en hexa clair, puis light-dark(clair, sombre). Le * repli existe parce que light-dark() date de 2024 (Chrome 123, * Firefox 120, Safari 17.5) : un navigateur plus ancien rend la * deuxième ligne invalide et retombe sur la première. Ne JAMAIS * envelopper dans light-dark() un jeton dont les deux valeurs sont * identiques : ce serait du bruit. * * La bascule elle-même ne coûte pas une ligne de plus : voir * color-scheme et les deux règles [data-theme] en fin de fichier. * * Trois règles d'usage tiennent tout le reste : * * 1. Le rouge ABB est la marque, pas un état. Il coiffe les titres : * le filet au-dessus du titre de page, celui des titres de groupe * de l'accueil, et le logo. Jamais un bouton, jamais un lien, * jamais un état. Dans l'interface, ce qui doit attirer l'œil est * lilas. Une seule exception, --abb-repere plus bas : le repère * d'une étape se pose sur une photo de matériel, où le lilas se * perd. * 2. Les couleurs de statut ne décorent rien. Elles disent qu'une * chose a réussi, échoué, ou mérite attention ; sinon, du gris. * 3. Ce qui s'écrit SUR le lilas, le rouge ou un statut emploie * --abb-sur-couleur, jamais --abb-white : ces fonds-là ne * s'inversent pas en sombre, leur encre non plus. */ :root { /* Tant que personne n'a choisi, le navigateur suit le système d'exploitation. Le module theme.js (lot 4) ne fait que poser data-theme sur pour CONTREDIRE le système si l'auteur a cliqué ; voir les deux règles en fin de fichier. */ color-scheme: light dark; /* ---- couleurs de base ------------------------------------------- */ --abb-primary-default: #615eef; /* la seule couleur d'action */ --abb-red: #ff000f; /* logo, filets de titre, et le repère d'étape plus bas */ /* Le rouge décomposé, pour les halos et les fonds en rgba(), comme --abb-primary-rgb plus bas. Il ne s'inverse pas entre les modes. */ --abb-red-rgb: 255, 0, 15; --abb-text-primary: #1f1f1f; /* repli navigateur d'avant 2024 */ --abb-text-primary: light-dark(#1f1f1f, #ffffff); --abb-text-secondary: #696969; /* identique dans les deux modes */ --abb-background: #ebebeb; /* repli navigateur d'avant 2024 */ --abb-background: light-dark(#ebebeb, #0f0f0f); --abb-white: #ffffff; /* repli navigateur d'avant 2024 */ --abb-white: light-dark(#ffffff, #1f1f1f); /* SURFACE de composant, pas une encre ; voir --abb-sur-couleur plus bas */ /* ---- échelle de gris ---------------------------------------------- */ --abb-black: #1f1f1f; /* identique dans les deux modes */ --abb-grey-900: #333333; /* repli navigateur d'avant 2024 */ --abb-grey-900: light-dark(#333333, #fafafa); --abb-grey-800: #696969; /* repli navigateur d'avant 2024 */ --abb-grey-800: light-dark(#696969, #333333); /* distinct de --abb-text-secondary : même valeur en clair, diverge en sombre */ --abb-grey-700: #868686; /* repli navigateur d'avant 2024 */ --abb-grey-700: light-dark(#868686, #9f9f9f); /* état pressé */ --abb-grey-500: #bababa; /* repli navigateur d'avant 2024 */ --abb-grey-500: light-dark(#bababa, #525252); /* désactivé */ --abb-grey-400: #dbdbdb; /* repli navigateur d'avant 2024 */ --abb-grey-400: light-dark(#dbdbdb, #696969); /* traits et séparateurs */ --abb-grey-300: var(--abb-background); /* même jeton Arcadia que --abb-background (fond d'application) ; alias, les deux noms sont employés dans le code */ --abb-grey-200: #f5f5f5; /* repli navigateur d'avant 2024 */ --abb-grey-200: light-dark(#f5f5f5, #333333); /* survol d'une icône */ --abb-grey-100: #fafafa; /* repli navigateur d'avant 2024 */ --abb-grey-100: light-dark(#fafafa, #333333); /* en-têtes de liste, volet gauche */ /* ---- le repère d'une étape sur le châssis --------------------------- * * Ce que l'étape en cours désigne sur la photo de la console : la * touche à presser, ou la zone d'interaction où agir. C'est la seule * sortie du rouge ABB hors des titres, et elle est voulue : ce repère * se pose sur une PHOTO de matériel, pas sur une surface du produit, * où le lilas se perdait. Il ne s'inverse pas non plus entre les * modes, la photo n'ayant pas de mode sombre. * * Deux noms plutôt que --abb-red employé directement : le jour où la * teinte du repère doit bouger, elle bouge sans toucher au logo. */ --abb-repere: var(--abb-red); --abb-repere-rgb: var(--abb-red-rgb); /* ---- lilas : les états d'un élément interactif --------------------- */ --abb-primary-pressed: #4c49ed; /* identique dans les deux modes */ --abb-primary-hover: #7673f1; /* identique dans les deux modes */ --abb-primary-disabled: #a09ef5; /* repli navigateur d'avant 2024 */ --abb-primary-disabled: light-dark(#a09ef5, #c6c5f9); --abb-primary-transparent: #e8e7fd; /* repli navigateur d'avant 2024 */ --abb-primary-transparent: light-dark(#e8e7fd, #3a394f); /* Le lilas décomposé, pour les halos et les voiles en rgba(). Ne change pas de valeur entre les modes : le lilas ne s'inverse pas. */ --abb-primary-rgb: 97, 94, 239; /* ---- l'afficheur des consoles --------------------------------------- * * Le vert-gris d'un écran à cristaux liquides et son encre. Ils ne * viennent pas d'ARCADIA : ils imitent du matériel, ils n'habillent * pas l'application. VALEUR UNIQUE, jamais light-dark() : un * variateur posé dans une armoire n'a pas de mode sombre. Une console * dont l'écran a une autre teinte les redéfinit pour elle seule dans * ecran.css, sous sa classe « .abb-mc-lcd-- ». */ --abb-lcd-fond: #cfd3c8; --abb-lcd-encre: #12171a; /* Encre atténuée de l'afficheur, pour un texte secondaire posé dessus (« écran absent »). Même raison que --abb-lcd-encre : VALEUR UNIQUE, elle imite du matériel. */ --abb-lcd-encre-attenuee: #3a403c; /* Le fond de l'afficheur des consoles au moteur « acq » : l'ACQ580 n'a pas le vert-gris du cristal liquide, son écran est blanc, et l'encre ne bouge pas. Jeton à part pour qu'on retouche cette teinte-là en une ligne sans toucher aux autres consoles ; il se pose dans ecran.css, sur la console qui porte ce moteur. VALEUR UNIQUE, comme les deux jetons ci-dessus : c'est du matériel. */ --abb-lcd-acq-fond: #ffffff; /* Le fond de l'afficheur des consoles au moteur « ach580 ». Même raison et même usage que le jeton ci-dessus, un jeton par moteur : deux écrans blancs aujourd'hui, mais rien ne dit qu'ils le resteront ensemble. VALEUR UNIQUE, c'est du matériel. */ --abb-lcd-ach580-fond: #ffffff; /* L'afficheur à segments du PLC PM5670 : un rétroéclairage orange et une encre presque noire. Même raison que les deux jetons ci-dessus, VALEUR UNIQUE : c'est du matériel, il n'a pas de mode sombre. La console les prend pour elle seule dans ecran.css, sous .abb-mc-console--pm5670 et .abb-mc-pm. */ --abb-lcd-pm5670-fond: #fea00c; --abb-lcd-pm5670-encre: #17130a; /* Les touches du châssis : un voile clair au survol, sombre à l'appui, un contour blanc à la mise au point. Ce sont des surcharges neutres posées sur la photo du châssis, pas des couleurs de marque : elles ne suivent donc pas le thème non plus. Décomposé en RGB (comme --abb-primary-rgb plus haut) pour que le repos (opacité 0) et le survol (opacité .25) restent la même teinte. */ --abb-touche-voile-survol-rgb: 255, 255, 255; --abb-touche-voile-appui: rgba(0, 0, 0, .18); --abb-touche-contour-focus: #ffffff; /* Les voyants du châssis (chantier ZONAGE). La TEINTE d'un voyant n'est pas ici : elle est relevée sur le matériel, voyant par voyant, dans le console.js de sa console, et moteur.js la pose en ligne (--abb-voyant-teinte). Ce qui est ici, c'est ce qui ne dépend pas du matériel : le contour qui rend le voyant repérable même éteint, et le repli de teinte quand la console n'en déclare aucune. VALEUR UNIQUE, comme les touches ci-dessus : c'est du matériel photographié, il n'a pas de mode sombre. */ --abb-voyant-contour: rgba(0, 0, 0, .35); --abb-voyant-repli: #9e9e9e; /* La plaque sous la lumière qui clignote : sans elle, la phase basse du battement se mélangeait à la photo du châssis, où la diode est déjà visible allumée, et le clignotement s'y noyait. */ --abb-voyant-fond: #000000; /* ---- ce qui se dessine sur une surface toujours sombre --------------- * * La scène de l'éditeur (.abb-mc-scene) et le plan de l'atelier * (.at-plan) ne suivent pas le thème : ce sont des plans de travail, * toujours noirs (--abb-black, VALEUR UNIQUE, voir plus haut). Les gris * de l'échelle sont calibrés pour un fond qui s'inverse LUI AUSSI ; * posés ici, certains perdent leur contraste en sombre : * --abb-grey-900 y ferait un pavé presque blanc, --abb-grey-500 y * deviendrait trop sombre pour se lire, --abb-grey-300 (texte du * bandeau d'aperçu) est carrément l'alias du fond de PAGE, pas fait * pour porter du texte. D'où ces trois jetons dédiés, VALEUR UNIQUE. */ --abb-scene-trait: #333333; /* diviseur du pied de scène, fond du bandeau d'aperçu */ --abb-scene-attenue: #bababa; /* texte discret posé sur la scène ou le plan */ --abb-scene-texte: #ebebeb; /* texte net du bandeau d'aperçu, sur --abb-scene-trait */ /* ---- ce qui se dessine SUR une photo, dans les ateliers -------------- * * Le relevé d'une console se trace par-dessus la PHOTO du boîtier : * une zone, un point, une étiquette. Ni la photo ni ces marqueurs ne * suivent le thème de l'interface : ils imitent un instrument de * mesure posé sur le matériel, comme les touches du châssis plus haut. * VALEUR UNIQUE. */ --abb-releve-marque: #ffffff; --abb-releve-marque-rgb: 255, 255, 255; /* décomposé pour le halo du tracé en cours */ /* ---- ce qui s'écrit SUR une couleur de marque ou de statut --------- * * Le lilas, le rouge et les statuts ne s'inversent jamais entre les * modes (voir plus bas), leur encre non plus. --abb-white, lui, * s'inverse (c'est une SURFACE) : l'employer ici ferait disparaître * un libellé de bouton en sombre. VALEUR UNIQUE. * * Posé au lot 3 partout où le produit employait --abb-white à tort * comme premier plan sur du lilas plein (boutons, cases cochées, * pastilles, étiquettes) ; voir ARCHITECTURE.md §8. */ --abb-sur-couleur: #ffffff; /* ---- statuts ------------------------------------------------------- */ --abb-error: #ef3934; /* identique dans les deux modes */ --abb-error-transparent: #feefef; /* repli navigateur d'avant 2024 */ --abb-error-transparent: light-dark(#feefef, #300c0a); --abb-warning: #ffa200; /* identique dans les deux modes */ --abb-warning-transparent: #fff8eb; /* repli navigateur d'avant 2024 */ --abb-warning-transparent: light-dark(#fff8eb, #352122); --abb-success: #21a67a; /* identique dans les deux modes */ --abb-success-transparent: #edf8f4; /* repli navigateur d'avant 2024 */ --abb-success-transparent: light-dark(#edf8f4, #202d1f); --abb-info: #615eef; /* identique dans les deux modes */ --abb-info-transparent: #e8e7fd; /* repli navigateur d'avant 2024 */ --abb-info-transparent: light-dark(#e8e7fd, #3a394f); /* Réservées aux graphiques, quand une série a besoin d'une teinte. Identiques dans les deux modes. */ --abb-yellow: #ffd800; --abb-magenta: #e64997; /* ---- typographie ---------------------------------------------------- */ /* * ABBvoice est la police de la marque, et la seule pour l'interface * (habillage/design.md, section 2.1). Le nom est celui que porte la * police elle-même, celui sous lequel elle s'installe sur un poste : * un poste où elle est installée la trouve donc sans fichier déposé. * Elle n'est pas distribuée avec ce dossier : sans elle, on retombe * sur Inter, puis sur la police système. Rien ne casse, les * proportions restent proches. */ --abb-police: "ABBvoice", "Inter", -apple-system, "Segoe UI", sans-serif; /* * La monospace ne sert plus à décorer. Elle est réservée à ce qui se * lit chiffre par chiffre : les valeurs de l'écran LCD et les codes de * paramètres (2201, 40.01). */ --abb-police-mono: "IBM Plex Mono", Consolas, monospace; /* ---- mesures --------------------------------------------------------- */ --abb-rayon: 4px; /* cartes, champs, jetons */ --abb-rayon-capsule: 20px; /* boutons */ /* light-dark() ne prend que des couleurs, jamais une valeur de box-shadow entière : la teinte sort dans son propre jeton, et --abb-ombre-carte la compose. Aucun appelant ne change. */ --abb-ombre-teinte: rgba(31, 31, 31, .06); /* repli navigateur d'avant 2024 */ --abb-ombre-teinte: light-dark(rgba(31, 31, 31, .06), rgba(0, 0, 0, .5)); --abb-ombre-carte: 0 1px 2px var(--abb-ombre-teinte); /* Le voile du barrage d'un atelier : la page reste lisible dessous, mais hors d'atteinte. Il assombrit dans les deux modes, ce n'est pas une surface qui s'inverse. VALEUR UNIQUE. */ --abb-voile: rgba(31, 31, 31, .55); --abb-hauteur-entete: 48px; --abb-hauteur-onglets: 40px; /* la bande d'onglets, sous la barre */ --abb-transition: 120ms ease; /* * La largeur à laquelle une console est dessinée : sa taille de * référence, et la seule. Tout ce qui s'affiche à l'écran du boîtier * est calé dessus ; quand la place manque, c'est la console entière * qui est réduite, pas son contenu qui se réorganise. Voir la tête de * ecran.css. La colonne de gauche de .abb-mc-grille (page.css) est * taillée pour la loger sans réduction. */ --abb-console-largeur: 320px; /* * La largeur à laquelle l'AFFICHEUR est dessiné, quelle que soit la * place que la photo du boîtier lui laisse. 254 px : ce que mesure * la zone de la console ACS-AP-S, la console de référence, qui * n'est donc pas touchée (échelle exactement 1). Une photo qui * montre tout le boîtier laisse deux fois moins de place : c'est le * même écran, dessiné pareil, montré plus petit. Voir la tête * d'ecran.css. */ --abb-lcd-largeur-dessin: 254px; /* ---- nuanciers de graphiques : réservé, aucun usage aujourd'hui ------ * * La palette Arcadia complète pour la visualisation de données : * 8 familles, nuances 100 (la plus claire) à 600 (la plus soutenue). * Identiques dans les deux modes : ce sont des couleurs de DONNÉE, pas * d'interface, elles ne suivent pas le thème. Aucun guide n'affiche * encore de graphique ; ces jetons attendent ce jour-là. */ --abb-data-blue-600: #1b7ac2; --abb-data-blue-500: #00acec; --abb-data-blue-400: #2fc8f7; --abb-data-blue-300: #6cd5ff; --abb-data-blue-200: #b3e6ff; --abb-data-blue-100: #def4fa; --abb-data-teal-600: #3b786e; --abb-data-teal-500: #3da190; --abb-data-teal-400: #5abfae; --abb-data-teal-300: #7ed6c6; --abb-data-teal-200: #b5ebe2; --abb-data-teal-100: #d7f7f3; --abb-data-green-600: #477a43; --abb-data-green-500: #51a34b; --abb-data-green-400: #75ba70; --abb-data-green-300: #98d694; --abb-data-green-200: #bfedbb; --abb-data-green-100: #e2f7df; --abb-data-yellow-600: #756e09; --abb-data-yellow-500: #968d0b; --abb-data-yellow-400: #b5aa0d; --abb-data-yellow-300: #d6c918; --abb-data-yellow-200: #ede56f; --abb-data-yellow-100: #faf5b6; --abb-data-gold-600: #a65503; --abb-data-gold-500: #c27121; --abb-data-gold-400: #d98f45; --abb-data-gold-300: #f2ac66; --abb-data-gold-200: #ffd3a8; --abb-data-gold-100: #ffeddb; --abb-data-orange-600: #d93616; --abb-data-orange-500: #ed5739; --abb-data-orange-400: #f57c64; --abb-data-orange-300: #ff9f8c; --abb-data-orange-200: #ffcec4; --abb-data-orange-100: #ffeae8; --abb-data-magenta-600: #c2347b; --abb-data-magenta-500: #e64997; --abb-data-magenta-400: #ff6bb5; --abb-data-magenta-300: #ff94c9; --abb-data-magenta-200: #ffc7e4; --abb-data-magenta-100: #ffe3f0; --abb-data-purple-600: #a13fa1; --abb-data-purple-500: #cc50cc; --abb-data-purple-400: #e670e6; --abb-data-purple-300: #f291f2; --abb-data-purple-200: #fac5fa; --abb-data-purple-100: #fae3fa; } /* * La bascule explicite. C'est tout, aucune couleur n'est redéclarée : * light-dark() ci-dessus fait tout le travail. theme.js (lot 4) ne fait * que poser l'un de ces deux attributs sur quand l'auteur clique * le sélecteur ; tant qu'il n'a pas cliqué, color-scheme: light dark * (en tête du bloc :root) fait suivre le système d'exploitation. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; }