/* ========================================================================== SOCLE 1.2 — LES PALETTES PRETES -------------------------------------------------------------------------- POURQUOI UN NOM, ET PAS UN CHOIX LIBRE DE COULEURS Un dashboard qui laisse choisir une couleur au hasard produit, tot ou tard, du jaune sur blanc — et c'est nous qu'on appelle. Le proprietaire choisit donc parmi les palettes de ce fichier, dont CHAQUE contraste a ete calcule. LES NOMS SONT CEUX DU SOCLE L'accent du socle s'appelle --orange (l'aplat), --orange-vif (l'accent en texte, la seule qui change de valeur entre les deux themes), --orange-sombre et --sur-orange (le texte pose SUR l'aplat). Une premiere version de ce fichier redefinissait --accent : la page de vente ne l'emploie pas, et la palette ne changeait rien. Les deux familles de noms sont donc ecrites ici, pour que le fichier serve aussi la vitrine Sitek, qui emploie --accent. LE SELECTEUR N'EST PAS :root, ET C'EST VOULU [data-palette="bleu"] s'applique a n'importe quel element. La page porte l'attribut sur ; le dashboard le porte aussi sur chaque CARTE d'echantillon, ce qui fait que la case montre exactement les couleurs qu'elle propose. Avec :root, les sept cases affichaient la meme couleur. CE QU'UNE PALETTE NE TOUCHE PAS Ni les fonds, ni les textes, ni le vert, l'ambre, le rouge et le WhatsApp : ceux-la portent une information que tout le monde lit de la meme facon, et les repeindre la ferait disparaitre. LES CONTRASTES, MESURES SUR --fond-0 DE CHAQUE THEME (limite : 4,5:1 pour du texte courant) bleu aplat 5.17:1 accent sombre 9.25:1 accent clair 6.70:1 orange aplat 5.88:1 accent sombre 9.23:1 accent clair 5.52:1 olive aplat 4.99:1 accent sombre 10.80:1 accent clair 6.90:1 bordeaux aplat 8.02:1 accent sombre 7.18:1 accent clair 8.02:1 turquoise aplat 5.36:1 accent sombre 10.01:1 accent clair 7.52:1 violet aplat 7.10:1 accent sombre 8.27:1 accent clair 8.98:1 ========================================================================== */ /* ---------- Bleu — Électronique, services, matériel ---------- */ [data-palette="bleu"]{ --orange:#2563EB; --orange-vif:#8AB4FF; /* 9.25:1 sur le fond sombre */ --orange-sombre:#1B3FA0; --sur-orange:#FFFFFF; /* 5.17:1 sur l'aplat */ --voile-orange-fort:rgba(37,99,235,.20); --voile-orange:rgba(37,99,235,.16); --voile-orange-doux:rgba(37,99,235,.12); --shadow-accent:0 8px 28px rgba(37,99,235,.28); --voile-accent-fort:rgba(37,99,235,.35); --voile-accent-moyen:rgba(37,99,235,.18); --voile-accent-doux:rgba(37,99,235,.12); --voile-accent-tres-doux:rgba(37,99,235,.05); /* Les memes valeurs sous les noms de la vitrine Sitek. */ --accent:#2563EB; --accent-texte:#8AB4FF; --accent-profond:#1B3FA0; } :root[data-theme="light"] [data-palette="bleu"], :root[data-palette="bleu"][data-theme="light"]{ --orange-vif:#1D4ED8; /* 6.70:1 sur blanc */ --accent-texte:#1D4ED8; --voile-orange-fort:rgba(37,99,235,.16); --voile-orange:rgba(37,99,235,.12); --voile-orange-doux:rgba(37,99,235,.10); --shadow-accent:0 8px 22px rgba(37,99,235,.30); --voile-accent-fort:rgba(37,99,235,.28); --voile-accent-moyen:rgba(37,99,235,.14); --voile-accent-doux:rgba(37,99,235,.10); --voile-accent-tres-doux:rgba(37,99,235,.04); } /* ---------- Orange — Matériel, bricolage, sécurité ---------- */ [data-palette="orange"]{ --orange:#F26522; --orange-vif:#FF9A5C; /* 9.23:1 sur le fond sombre */ --orange-sombre:#B8410F; --sur-orange:#1A1206; /* 5.88:1 sur l'aplat */ --voile-orange-fort:rgba(242,101,34,.20); --voile-orange:rgba(242,101,34,.16); --voile-orange-doux:rgba(242,101,34,.12); --shadow-accent:0 8px 28px rgba(242,101,34,.28); --voile-accent-fort:rgba(242,101,34,.35); --voile-accent-moyen:rgba(242,101,34,.18); --voile-accent-doux:rgba(242,101,34,.12); --voile-accent-tres-doux:rgba(242,101,34,.05); /* Les memes valeurs sous les noms de la vitrine Sitek. */ --accent:#F26522; --accent-texte:#FF9A5C; --accent-profond:#B8410F; } :root[data-theme="light"] [data-palette="orange"], :root[data-palette="orange"][data-theme="light"]{ --orange-vif:#B8410F; /* 5.52:1 sur blanc */ --accent-texte:#B8410F; --voile-orange-fort:rgba(242,101,34,.16); --voile-orange:rgba(242,101,34,.12); --voile-orange-doux:rgba(242,101,34,.10); --shadow-accent:0 8px 22px rgba(242,101,34,.30); --voile-accent-fort:rgba(242,101,34,.28); --voile-accent-moyen:rgba(242,101,34,.14); --voile-accent-doux:rgba(242,101,34,.10); --voile-accent-tres-doux:rgba(242,101,34,.04); } /* ---------- Olive — Alimentaire, cosmétique naturel ---------- */ [data-palette="olive"]{ --orange:#4D7C0F; --orange-vif:#A3D13A; /* 10.80:1 sur le fond sombre */ --orange-sombre:#33520A; --sur-orange:#FFFFFF; /* 4.99:1 sur l'aplat */ --voile-orange-fort:rgba(77,124,15,.20); --voile-orange:rgba(77,124,15,.16); --voile-orange-doux:rgba(77,124,15,.12); --shadow-accent:0 8px 28px rgba(77,124,15,.28); --voile-accent-fort:rgba(77,124,15,.35); --voile-accent-moyen:rgba(77,124,15,.18); --voile-accent-doux:rgba(77,124,15,.12); --voile-accent-tres-doux:rgba(77,124,15,.05); /* Les memes valeurs sous les noms de la vitrine Sitek. */ --accent:#4D7C0F; --accent-texte:#A3D13A; --accent-profond:#33520A; } :root[data-theme="light"] [data-palette="olive"], :root[data-palette="olive"][data-theme="light"]{ --orange-vif:#3F6410; /* 6.90:1 sur blanc */ --accent-texte:#3F6410; --voile-orange-fort:rgba(77,124,15,.16); --voile-orange:rgba(77,124,15,.12); --voile-orange-doux:rgba(77,124,15,.10); --shadow-accent:0 8px 22px rgba(77,124,15,.30); --voile-accent-fort:rgba(77,124,15,.28); --voile-accent-moyen:rgba(77,124,15,.14); --voile-accent-doux:rgba(77,124,15,.10); --voile-accent-tres-doux:rgba(77,124,15,.04); } /* ---------- Bordeaux — Parfum, prêt-à-porter ---------- */ [data-palette="bordeaux"]{ --orange:#9F1239; --orange-vif:#FB7185; /* 7.18:1 sur le fond sombre */ --orange-sombre:#6B0B26; --sur-orange:#FFFFFF; /* 8.02:1 sur l'aplat */ --voile-orange-fort:rgba(159,18,57,.20); --voile-orange:rgba(159,18,57,.16); --voile-orange-doux:rgba(159,18,57,.12); --shadow-accent:0 8px 28px rgba(159,18,57,.28); --voile-accent-fort:rgba(159,18,57,.35); --voile-accent-moyen:rgba(159,18,57,.18); --voile-accent-doux:rgba(159,18,57,.12); --voile-accent-tres-doux:rgba(159,18,57,.05); /* Les memes valeurs sous les noms de la vitrine Sitek. */ --accent:#9F1239; --accent-texte:#FB7185; --accent-profond:#6B0B26; } :root[data-theme="light"] [data-palette="bordeaux"], :root[data-palette="bordeaux"][data-theme="light"]{ --orange-vif:#9F1239; /* 8.02:1 sur blanc */ --accent-texte:#9F1239; --voile-orange-fort:rgba(159,18,57,.16); --voile-orange:rgba(159,18,57,.12); --voile-orange-doux:rgba(159,18,57,.10); --shadow-accent:0 8px 22px rgba(159,18,57,.30); --voile-accent-fort:rgba(159,18,57,.28); --voile-accent-moyen:rgba(159,18,57,.14); --voile-accent-doux:rgba(159,18,57,.10); --voile-accent-tres-doux:rgba(159,18,57,.04); } /* ---------- Turquoise — Électroménager, puériculture ---------- */ [data-palette="turquoise"]{ --orange:#0E7490; --orange-vif:#5BC8E8; /* 10.01:1 sur le fond sombre */ --orange-sombre:#094F62; --sur-orange:#FFFFFF; /* 5.36:1 sur l'aplat */ --voile-orange-fort:rgba(14,116,144,.20); --voile-orange:rgba(14,116,144,.16); --voile-orange-doux:rgba(14,116,144,.12); --shadow-accent:0 8px 28px rgba(14,116,144,.28); --voile-accent-fort:rgba(14,116,144,.35); --voile-accent-moyen:rgba(14,116,144,.18); --voile-accent-doux:rgba(14,116,144,.12); --voile-accent-tres-doux:rgba(14,116,144,.05); /* Les memes valeurs sous les noms de la vitrine Sitek. */ --accent:#0E7490; --accent-texte:#5BC8E8; --accent-profond:#094F62; } :root[data-theme="light"] [data-palette="turquoise"], :root[data-palette="turquoise"][data-theme="light"]{ --orange-vif:#0B5C73; /* 7.52:1 sur blanc */ --accent-texte:#0B5C73; --voile-orange-fort:rgba(14,116,144,.16); --voile-orange:rgba(14,116,144,.12); --voile-orange-doux:rgba(14,116,144,.10); --shadow-accent:0 8px 22px rgba(14,116,144,.30); --voile-accent-fort:rgba(14,116,144,.28); --voile-accent-moyen:rgba(14,116,144,.14); --voile-accent-doux:rgba(14,116,144,.10); --voile-accent-tres-doux:rgba(14,116,144,.04); } /* ---------- Violet — Bijoux, accessoires ---------- */ [data-palette="violet"]{ --orange:#6D28D9; --orange-vif:#B39AFF; /* 8.27:1 sur le fond sombre */ --orange-sombre:#4A17A0; --sur-orange:#FFFFFF; /* 7.10:1 sur l'aplat */ --voile-orange-fort:rgba(109,40,217,.20); --voile-orange:rgba(109,40,217,.16); --voile-orange-doux:rgba(109,40,217,.12); --shadow-accent:0 8px 28px rgba(109,40,217,.28); --voile-accent-fort:rgba(109,40,217,.35); --voile-accent-moyen:rgba(109,40,217,.18); --voile-accent-doux:rgba(109,40,217,.12); --voile-accent-tres-doux:rgba(109,40,217,.05); /* Les memes valeurs sous les noms de la vitrine Sitek. */ --accent:#6D28D9; --accent-texte:#B39AFF; --accent-profond:#4A17A0; } :root[data-theme="light"] [data-palette="violet"], :root[data-palette="violet"][data-theme="light"]{ --orange-vif:#5B21B6; /* 8.98:1 sur blanc */ --accent-texte:#5B21B6; --voile-orange-fort:rgba(109,40,217,.16); --voile-orange:rgba(109,40,217,.12); --voile-orange-doux:rgba(109,40,217,.10); --shadow-accent:0 8px 22px rgba(109,40,217,.30); --voile-accent-fort:rgba(109,40,217,.28); --voile-accent-moyen:rgba(109,40,217,.14); --voile-accent-doux:rgba(109,40,217,.10); --voile-accent-tres-doux:rgba(109,40,217,.04); } /* ========================================================================== POUR EN AJOUTER UNE 1. Relever les couleurs de la marque AU PIXEL sur un visuel officiel. 2. Les passer dans scratchpad/palettes.py : il refuse d'ecrire le fichier si un contraste tombe sous 4,5:1. 3. Ajouter le nom a la liste PALETTES de admin/js/page-1.2.js. ========================================================================== */