/* ============================================================ AGENDAPILOT — DESIGN-TOKENS ------------------------------------------------------------ Eén ontwerptaal voor alle SOSO-dashboards: de tokennamen en -waarden hieronder zijn letterlijk dezelfde als in de Towerly-werkvloer van de Antwoordservice (antwoordservice/src/Antwoordservice.Api/wwwroot/app.css). Bewust GEKOPIEERD en niet via een pad naar die andere repo gekoppeld: het zijn twee losse producten/repos die los deployen; een relatief pad naar een zusterrepo zou hier alleen lokaal werken en op prev2/productie breken. Licht = de bare :root. Donker herdefinieert alleen wat verschilt, in twee varianten: de media query (systeemthema) en een expliciete [data-theme="dark"] voor de schakelaar — exact hetzelfde patroon als Towerly. PER KANTOOR (tenant) instelbaar: --accent en --navy (plus de afgeleiden --accent-hover/--accent-ink/--accent-bg en de --brand-*-verloopkleuren) worden door demo.js als inline custom properties op gezet, samen met een data-tenant-attribuut. Alles in app.css leest die tokens, dus één kleurwissel kleurt het hele dashboard om — geen aparte styling per klant. ============================================================ */ :root{ --ground:#ffffff; --surface:#f5f8fb; --surface-2:#eaf1f7; --surface-sunk:#eef3f8; --line:#d8e2ec; --line-soft:#e8eef5; --ink:#101f36; --ink-2:#3b4d68; --ink-3:#6b7d95; --ink-invert:#ffffff; --accent:#0c7f9e; --accent-hover:#096a85; --accent-ink:#075d75; --accent-bg:#e4f2f7; --navy:#1b355c; --brand-a:#00b1d4; --brand-b:#158cb3; --brand-c:#1b355c; --good:#16704a; --good-bg:#e6f4ec; --info:#1d5fa8; --info-bg:#e6eff9; --warn:#96550c; --warn-bg:#fdf2e0; --stop:#a3341f; --stop-bg:#fbeae6; --urg-laag:#6b7d95; --urg-normaal:#1d5fa8; --urg-hoog:#96550c; --urg-spoed:#a3341f; --shadow-rest:0 1px 2px rgba(16,31,54,.05),0 8px 24px -12px rgba(16,31,54,.14); --shadow-float:0 4px 12px rgba(16,31,54,.09),0 16px 40px -16px rgba(16,31,54,.22); --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Consolas,monospace; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --ground:#0d1724; --surface:#131f30; --surface-2:#1b2a3e; --surface-sunk:#17253a; --line:#2a3c53; --line-soft:#213246; --ink:#e8eef6; --ink-2:#a9bacf; --ink-3:#7f90a8; --ink-invert:#0d1724; --accent:#3fc8e4; --accent-hover:#7bd9ee; --accent-ink:#7bd9ee; --accent-bg:#102c39; --navy:#8fb4d8; --brand-a:#35BCD8; --brand-b:#398ACA; --brand-c:#5A9BD8; --good:#5ec899; --good-bg:#122e26; --info:#7fb2ee; --info-bg:#12253c; --warn:#e6b168; --warn-bg:#2e2415; --stop:#ef8f78; --stop-bg:#331d1a; --urg-laag:#7f90a8; --urg-normaal:#7fb2ee; --urg-hoog:#e6b168; --urg-spoed:#ef8f78; --shadow-rest:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6); --shadow-float:0 4px 14px rgba(0,0,0,.5),0 18px 44px -16px rgba(0,0,0,.75); } } :root[data-theme="dark"]{ --ground:#0d1724; --surface:#131f30; --surface-2:#1b2a3e; --surface-sunk:#17253a; --line:#2a3c53; --line-soft:#213246; --ink:#e8eef6; --ink-2:#a9bacf; --ink-3:#7f90a8; --ink-invert:#0d1724; --accent:#3fc8e4; --accent-hover:#7bd9ee; --accent-ink:#7bd9ee; --accent-bg:#102c39; --navy:#8fb4d8; --brand-a:#35BCD8; --brand-b:#398ACA; --brand-c:#5A9BD8; --good:#5ec899; --good-bg:#122e26; --info:#7fb2ee; --info-bg:#12253c; --warn:#e6b168; --warn-bg:#2e2415; --stop:#ef8f78; --stop-bg:#331d1a; --urg-laag:#7f90a8; --urg-normaal:#7fb2ee; --urg-hoog:#e6b168; --urg-spoed:#ef8f78; --shadow-rest:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6); --shadow-float:0 4px 14px rgba(0,0,0,.5),0 18px 44px -16px rgba(0,0,0,.75); } /* ------------------------------------------------------------ AGENDAPILOT-ALIASSEN De hele bestaande app.css is geschreven op --ap-*-tokens. Die verwijzen nu één-op-één naar de Towerly-tokens hierboven in plaats van eigen hexwaarden te herhalen: zo hoefde er geen enkele regel css herschreven te worden om dezelfde kleuren, schaduwen en typografie te krijgen, en volgt AgendaPilot automatisch mee als de gedeelde ontwerptaal ooit bijdraait. ------------------------------------------------------------ */ :root{ --ap-bg: var(--surface); --ap-surface: var(--ground); --ap-surface-2: var(--surface-2); --ap-surface-sunk: var(--surface-sunk); --ap-border: var(--line); --ap-border-soft: var(--line-soft); --ap-text: var(--ink); --ap-text-2: var(--ink-2); --ap-text-muted: var(--ink-3); --ap-text-invert: var(--ink-invert); /* --ap-cyan was de "primaire accentkleur" van AgendaPilot; dat is nu gewoon --accent, dus per kantoor instelbaar zonder dat er iets anders hoeft te veranderen. */ --ap-cyan: var(--accent); --ap-cyan-light: var(--accent-hover); --ap-cyan-ink: var(--accent-ink); --ap-cyan-bg: var(--accent-bg); --ap-navy: var(--navy); --ap-navy-dark: var(--brand-c); --ap-danger: var(--stop); --ap-danger-bg: var(--stop-bg); --ap-ok: var(--good); --ap-ok-bg: var(--good-bg); --ap-warn: var(--warn); --ap-warn-bg: var(--warn-bg); --ap-info: var(--info); --ap-info-bg: var(--info-bg); /* Extra accentkleuren voor de publieke klantpagina (locatiepin, walk-in-melding, kaartje). Generieke AgendaPilot-defaults; per tenant overschreven met de echte huisstijl (zie klant.html voor Nieuw Vaarwater: roze #FEA4CE, geel #FFBF00). */ --ap-accent-roze: #d6547e; --ap-accent-geel: #e0b400; --ap-accent-geel-licht: #fbf3d9; --ap-radius: 10px; --ap-shadow: var(--shadow-rest); --ap-shadow-float: var(--shadow-float); --ap-sans: var(--sans); --ap-mono: var(--mono); color-scheme: light; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme: dark; } } :root[data-theme="dark"]{ color-scheme: dark; }