/* ============================================================ PACKS DE THÈMES — un par vue, choisi dans l'admin. ------------------------------------------------------------ Chargé APRÈS theme.css (le contrat de tokens) et AVANT components.css et le CSS de la vue. RÈGLE ABSOLUE : ce fichier ne contient QUE des custom properties. Aucun sélecteur de composant, aucune propriété de mise en page. Un pack qui oublie un token retombe sur theme.css, jamais dans le vide. `color-scheme` par pack n'est PAS cosmétique : sans lui, Chrome garde les internes de formulaire sombres — , et les barres de défilement deviennent illisibles sur un thème clair. L'attribut data-theme est posé sur par le script anti-flash du , puis confirmé depuis app_settings (_theme). ============================================================ */ /* ════════════════════════════════════════════════════════════ DELAN — le thème historique. Sert aussi de base : un slug inconnu retombe ici plutôt que sur une page sans style. ════════════════════════════════════════════════════════════ */ :root, [data-theme="delan"] { color-scheme: dark; } /* La cuisine avait son propre :root dans cuisine.css — fond plus sombre, coins plus carrés. Déplacé ici : un :root de vue, chargé après, aurait annulé tous les autres packs. Valeurs strictement identiques. */ [data-theme="delan"][data-view="cuisine"] { --bg: #0c0c0c; --surface: #161616; --surface-2: #1f1f1f; --surface-3: #272727; --cream-dim: #c8b98a; --ok-dim: rgba(34,197,94,.15); --orange-dim: rgba(249,115,22,.14); --r-md: 10px; --r-sm: 6px; --sh-2: 0 6px 22px rgba(0,0,0,.55); --header-bg: rgba(12,12,12,.96); } [data-theme="delan"][data-view="index"] { --r-md: 16px; --sh-2: 0 8px 30px rgba(0,0,0,0.45); --header-bg: rgba(15,15,15,0.92); } /* ════════════════════════════════════════════════════════════ SUMUP — clair, épuré, photo-forward. La référence de la caisse. Gris très clair, cartes blanches, ombres douces, barre de total noire. Le rouge de marque est conservé. ════════════════════════════════════════════════════════════ */ [data-theme="sumup"] { --accent-text:#14171f; /* Texte sur teinte — voir le bloc du même nom dans css/theme.css */ --ok-text:#0a6b4b; --warn-text:#954507; --info-text:#1853d3; --orange-text:#9a4504; --danger-text:#b2251a; --brand-text:#d11f09; color-scheme: light; --bg: #f5f6f8; --surface: #ffffff; --surface-2: #f0f2f5; --surface-3: #e8ebf0; --border: #e1e5ea; --border-strong: #c9d0d8; --text: #14171f; --text-strong: #000000; --text-muted: #5b626e; /* 4,47:1 sur le fond clair → sous le seuil ; assombri à ~5,5:1 */ --text-invert: #ffffff; --overlay: rgba(20,23,31,0.45); --scrim-soft: rgba(0,0,0,0.05); --scrim-strong: rgba(0,0,0,0.08); --header-bg: rgba(255,255,255,0.92); --focus: #2461e6; --brand: #d11f09; --brand-dim: #fde7e3; --brand-glow: rgba(232,34,10,0.15); --on-brand: #ffffff; /* Le crème est une couleur CLAIRE : sur fond blanc il devient le texte foncé, sinon tous les titres et onglets actifs disparaissent. */ --cream: #14171f; --cream-dim: #5f6773; /* légende cuisine : 4,47 → 5,3 */ /* L'accent SumUp, c'est la barre de total noire pleine largeur. */ --accent: #14171f; --accent-dim: rgba(20,23,31,0.08); --on-accent: #ffffff; --ok: #0b7954; --ok-dim: rgba(14,159,110,0.12); --on-ok: #ffffff; --warn: #a94e08; --warn-dim: rgba(180,83,9,0.12); --on-warn: #ffffff; --danger: #d92d20; --danger-dim: rgba(217,45,32,0.10); --on-danger: #ffffff; --info: #2461e6; --info-dim: rgba(37,99,235,0.10); --on-info: #ffffff; --orange: #af4e04; --on-orange: #ffffff; --orange-dim: rgba(220,104,3,0.12); /* texte sur fond clair : 3,49 → 4,66 */ --neutral-dim: rgba(20,23,31,0.06); --on-urg: #ffffff; --urg-glow: 7px; /* le halo se lit comme une salissure sur du blanc */ --urg-ring: 2px; --urg-ring-card: 2px; /* l'anneau reprend le relais */ /* Le ticket cuisine FUSIONNE avec les surfaces : sur une interface blanche, une feuille crème flotterait au milieu de rien. */ --paper: #ffffff; --paper-2: #f7f8fa; --paper-3: #eef1f5; --paper-press: #e9edf2; --paper-line: #e1e5ea; --paper-line-soft: #edf0f4; --paper-ink: #14171f; --paper-ink-2: #2b303b; --paper-ink-soft: #616872; --paper-accent: #d92d20; --paper-accent-bg: #fde7e3; --paper-note-bg: #fef6dc; --paper-note-ink: #8a5a00; --paper-ok: #0b7954; --paper-progress: #dc6803; --paper-comment-bg: #fff7ed; /* Une ombre calibrée pour du noir est crasseuse sur du blanc. */ --sh-1: 0 1px 2px rgba(16,24,40,0.06); --sh-2: 0 4px 16px rgba(16,24,40,0.10); --sh-3: 0 12px 32px rgba(16,24,40,0.14); --sh-focus: 0 0 0 3px rgba(37,99,235,0.25); } /* ════════════════════════════════════════════════════════════ SQUARE — clair, blanc franc, accent bleu, grandes cibles tactiles. L'autre grande référence du secteur. ════════════════════════════════════════════════════════════ */ [data-theme="square"] { --accent-text:#0049b0; /* Texte sur teinte — voir le bloc du même nom dans css/theme.css */ --ok-text:#006c4a; --warn-text:#815600; --info-text:#0057d2; --orange-text:#a04000; --danger-text:#b71e29; --brand-text:#cc1e09; color-scheme: light; --bg: #ffffff; --surface: #ffffff; --surface-2: #f6f7f9; --surface-3: #eceff3; --border: #dde1e6; --border-strong: #b8c0ca; --text: #1c1c1e; --text-strong: #000000; --text-muted: #5c646d; /* idem SumUp : passe le seuil de contraste */ --text-invert: #ffffff; --overlay: rgba(28,28,30,0.45); --scrim-soft: rgba(0,0,0,0.04); --scrim-strong: rgba(0,0,0,0.07); --header-bg: rgba(255,255,255,0.94); --focus: #0062eb; --brand: #cc1e09; --brand-dim: #fde7e3; --brand-glow: rgba(232,34,10,0.14); --on-brand: #ffffff; --cream: #1c1c1e; --cream-dim: #636b74; --accent: #0062eb; --accent-dim: rgba(0,106,255,0.10); --on-accent: #ffffff; --ok: #007953; --ok-dim: rgba(0,138,94,0.12); --on-ok: #ffffff; --warn: #916100; --warn-dim: rgba(154,103,0,0.12); --on-warn: #ffffff; --danger: #cf222e; --danger-dim: rgba(207,34,46,0.10); --on-danger: #ffffff; --info: #0062eb; --info-dim: rgba(0,106,255,0.10); --on-info: #ffffff; --orange: #b14700; --on-orange: #ffffff; --orange-dim: rgba(188,76,0,0.12); --neutral-dim: rgba(28,28,30,0.05); --on-urg: #ffffff; --urg-glow: 6px; --urg-ring: 2px; --urg-ring-card: 2px; --paper: #ffffff; --paper-2: #f6f7f9; --paper-3: #eceff3; --paper-press: #e4e8ed; --paper-line: #dde1e6; --paper-line-soft: #eceff3; --paper-ink: #1c1c1e; --paper-ink-2: #32363c; --paper-ink-soft: #646d76; --paper-accent: #cf222e; --paper-accent-bg: #ffebe9; --paper-note-bg: #fff8c5; --paper-note-ink: #7d4e00; --paper-ok: #007953; --paper-progress: #b14700; --paper-comment-bg: #fff8f0; --sh-1: 0 1px 3px rgba(0,0,0,0.08); --sh-2: 0 4px 14px rgba(0,0,0,0.10); --sh-3: 0 10px 28px rgba(0,0,0,0.14); --sh-focus: 0 0 0 3px rgba(0,106,255,0.28); /* Square pousse des cibles franches et des coins doux. */ --r-sm: 8px; --r-md: 12px; --tap-min: 52px; --tap-min-sm: 48px; } /* ════════════════════════════════════════════════════════════ KDS TOAST — écran de production. Charbon chaud + orange, gros caractères, coins carrés. Pensé pour la cuisine. ════════════════════════════════════════════════════════════ */ [data-theme="kds-toast"] { /* Texte sur teinte — voir le bloc du même nom dans css/theme.css */ --ok-text:#4ade80; --warn-text:#fbbf24; --info-text:#83b9fb; --orange-text:#ff9f61; --danger-text:#f7917b; --brand-text:#ffa37b; color-scheme: dark; --bg: #1a1917; --surface: #24221f; --surface-2: #2e2b27; --surface-3: #383430; --border: #423e39; --border-strong: #56504a; --text: #f5f0e8; --text-strong: #ffffff; --text-muted: #a9a197; --text-invert: #1a1917; --overlay: rgba(0,0,0,0.72); --scrim-soft: rgba(255,255,255,0.06); --scrim-strong: rgba(255,255,255,0.11); --header-bg: rgba(26,25,23,0.96); --focus: #ffb27a; --brand: #ff6b2c; --brand-dim: #7a2f0d; --brand-glow: rgba(255,107,44,0.20); --on-brand: #1a1917; --cream: #f5f0e8; --cream-dim: #c4b9a8; --accent: #ff6b2c; --accent-dim: rgba(255,107,44,0.14); --on-accent: #1a1917; --ok: #4ade80; --ok-dim: rgba(74,222,128,0.14); --on-ok: #0d2b16; --warn: #fbbf24; --warn-dim: rgba(251,191,36,0.14); --on-warn: #2b1f00; --danger: #d53b1a; /* assombri : le blanc de --on-danger n’y passait pas (3,75 / 3,55) */ --danger-dim: rgba(242,67,30,0.14); --on-danger: #ffffff; --info: #60a5fa; --info-dim: rgba(96,165,250,0.14); --on-info: #06203f; --orange: #ff8c42; --orange-dim: rgba(255,140,66,0.14); --neutral-dim: rgba(163,156,146,0.12); --on-urg: #1a1917; --urg-glow: 22px; --urg-ring: 3px; --urg-ring-card: 2px; /* Le ticket s'OPPOSE au fond : c'est un objet posé sur le plan de travail. */ --paper: #fdf8ee; --paper-2: #f2e9d6; --paper-3: #e8dcc2; --paper-press: #ece2ce; --paper-line: #d6c8ab; --paper-line-soft: #e6dcc4; --paper-ink: #1a1917; --paper-ink-2: #2c2825; --paper-ink-soft: #736a55; --paper-accent: #c2410c; --paper-accent-bg: #ffe4d0; --paper-note-bg: #fdf3c8; --paper-note-ink: #7a4a00; --paper-ok: #15803d; --paper-progress: #e0a96b; --paper-comment-bg: #fff6e8; --sh-1: 0 2px 8px rgba(0,0,0,0.35); --sh-2: 0 6px 22px rgba(0,0,0,0.55); --sh-3: 0 14px 34px rgba(0,0,0,0.62); /* Écran mural : un cran plus gros, et des coins francs. */ --font-scale: 1.12; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; } /* ════════════════════════════════════════════════════════════ KIOSQUE — contraste maximal, typographie très grande. Pour une cuisine très éclairée ou une lecture de loin. Tout est plat : pas d'ombre, pas de halo, des bordures franches. ════════════════════════════════════════════════════════════ */ [data-theme="kiosque"] { --accent-text:#6f4800; /* Texte sur teinte — voir le bloc du même nom dans css/theme.css */ --ok-text:#00632a; --warn-text:#764d00; --info-text:#003be9; --orange-text:#913900; --danger-text:#ab0000; --brand-text:#c70000; color-scheme: light; --bg: #ffffff; --surface: #ffffff; --surface-2: #f2f2f2; --surface-3: #e6e6e6; --border: #111111; --border-strong: #000000; --text: #000000; --text-strong: #000000; --text-muted: #3a3a3a; --text-invert: #ffffff; --overlay: rgba(0,0,0,0.60); --scrim-soft: rgba(0,0,0,0.06); --scrim-strong: rgba(0,0,0,0.10); --header-bg: #ffffff; --focus: #0040ff; --brand: #c70000; --brand-dim: #ffd6d6; --brand-glow: rgba(212,0,0,0.18); --on-brand: #ffffff; --cream: #000000; --cream-dim: #3a3a3a; /* L'accent sert AUSSI de couleur de texte (onglet actif, titres) : un jaune vif sur blanc est illisible (contraste 1,5). D'où un ambre foncé pour le texte et les bordures, et le jaune vif réservé aux REMPLISSAGES via --accent-dim. */ --accent: #8a5a00; --accent-dim: rgba(255,210,0,0.45); --on-accent: #ffffff; /* --accent est un ambre foncé depuis le lot 3 : le noir n'y passait plus (3,54) */ --ok: #007531; --ok-dim: rgba(0,122,51,0.16); --on-ok: #ffffff; --warn: #8a5a00; --warn-dim: rgba(138,90,0,0.16); --on-warn: #ffffff; --danger: #c70000; --danger-dim: rgba(212,0,0,0.14); --on-danger: #ffffff; --info: #0040ff; --info-dim: rgba(0,64,255,0.14); --on-info: #ffffff; --orange: #ac4400; --on-orange: #ffffff; --orange-dim: rgba(179,71,0,0.16); --neutral-dim: rgba(0,0,0,0.08); --on-urg: #ffffff; --urg-glow: 0px; /* aucun halo : il n'apporte rien à contraste maximal */ --urg-ring: 5px; /* c'est l'anneau qui porte tout le signal */ --urg-ring-card: 4px; --paper: #ffffff; --paper-2: #f2f2f2; --paper-3: #e6e6e6; --paper-press: #dcdcdc; --paper-line: #111111; --paper-line-soft: #999999; --paper-ink: #000000; --paper-ink-2: #000000; --paper-ink-soft: #3a3a3a; --paper-accent: #c70000; --paper-accent-bg: #ffd6d6; --paper-note-bg: #ffd200; --paper-note-ink: #000000; --paper-ok: #007531; --paper-progress: #ac4400; --paper-comment-bg: #fff4cc; --sh-1: none; --sh-2: none; --sh-3: 0 4px 12px rgba(0,0,0,0.25); --sh-focus: 0 0 0 4px rgba(0,64,255,0.40); /* Le token le plus rentable du projet : une ligne remplace la réécriture des ~68 tailles de police. */ --font-scale: 1.35; --fw-medium: 700; --fw-bold: 800; --lh-normal: 1.35; --tap-min: 60px; --tap-min-sm: 56px; --card-min-h: 120px; --r-sm: 4px; --r-md: 6px; } /* ════════════════════════════════════════════════════════════ COURSE — téléphone du livreur, tenu à une main, en extérieur. Sombre profond, vert « départ », contraste élevé. ════════════════════════════════════════════════════════════ */ [data-theme="course"] { /* Texte sur teinte — voir le bloc du même nom dans css/theme.css */ --ok-text:#00cc6e; --warn-text:#ffb02e; --info-text:#4dd4ff; --orange-text:#ff9752; --danger-text:#ff827b; --brand-text:#00e57c; color-scheme: dark; --bg: #0e1116; --surface: #171c24; --surface-2: #1f2630; --surface-3: #2a323e; --border: #303945; --border-strong: #435063; --text: #ffffff; --text-strong: #ffffff; --text-muted: #909cae; --text-invert: #0e1116; --overlay: rgba(0,0,0,0.70); --scrim-soft: rgba(255,255,255,0.06); --scrim-strong: rgba(255,255,255,0.10); --header-bg: rgba(14,17,22,0.95); --focus: #4dd4ff; --brand: #00c46a; --brand-dim: #0a5c36; --brand-glow: rgba(0,196,106,0.20); --on-brand: #06210f; --cream: #ffffff; --cream-dim: #b6c0cf; --accent: #00c46a; --accent-dim: rgba(0,196,106,0.14); --on-accent: #06210f; --ok: #00c46a; --ok-dim: rgba(0,196,106,0.14); --on-ok: #06210f; --warn: #ffb02e; --warn-dim: rgba(255,176,46,0.14); --on-warn: #2b1f00; --danger: #db3329; /* assombri : le blanc de --on-danger n’y passait pas (3,75 / 3,55) */ --danger-dim: rgba(255,59,48,0.14); --on-danger: #ffffff; --info: #4dd4ff; --info-dim: rgba(77,212,255,0.14); --on-info: #06203f; --orange: #ff8a3d; --orange-dim: rgba(255,138,61,0.14); --neutral-dim: rgba(139,151,168,0.12); --on-urg: #ffffff; --urg-glow: 18px; --urg-ring: 2px; --urg-ring-card: 2px; --paper: #f7f9fb; --paper-2: #eaeef3; --paper-3: #dde3ea; --paper-press: #e2e7ee; --paper-line: #ccd4de; --paper-line-soft: #e2e7ee; --paper-ink: #0e1116; --paper-ink-2: #232a34; --paper-ink-soft: #616d7d; --paper-accent: #c2410c; --paper-accent-bg: #ffe4d0; --paper-note-bg: #fff3c4; --paper-note-ink: #7a4a00; --paper-ok: #067647; --paper-progress: #d97706; --paper-comment-bg: #fff7ed; --sh-1: 0 2px 8px rgba(0,0,0,0.4); --sh-2: 0 6px 20px rgba(0,0,0,0.5); --sh-3: 0 14px 34px rgba(0,0,0,0.6); /* Une main, en marchant, parfois en plein soleil. */ --tap-min: 52px; --tap-min-sm: 48px; --r-md: 16px; --r-lg: 22px; }