/* * Kodeq — huisstijltokens. De bron voor kodeq.nl, MotoWire en PCBCanvas. * Stijlrichting D1 "Atelier verzacht": licht als uitgangspunt, grotesk, * haarlijnen, monospace voor getallen, één signaalrood. * * Dit bestand staat in portaal\static\ omdat het portaal de enige site zonder * buildstap is: hij moet het rechtstreeks als /static/kodeq-tokens.css kunnen * laden, in ontwikkeling én online. De apps hebben wél een build en halen het * bestand relatief op in hun src\index.css: * * @import '../../Kodeq/portaal/static/kodeq-tokens.css'; * * Licht is de standaard; donker komt uit de systeemvoorkeur of uit een expliciete * keuze (data-thema op , gezet door thema.js). Verander hier iets en het * verandert op alle drie de sites — dat is de bedoeling. * * NIET in dit bestand: het palet ván een tekening. De draadkleuren in MotoWire * (bruin is bruin omdat de draad bruin is) en het groene soldeermasker met koper * in PCBCanvas zijn gegevens, geen stijl. Die blijven in domain\constants.ts. * De tokens hieronder kleuren de schil eromheen. */ :root { color-scheme: light; /* --- Grond en vlakken -------------------------------------------------- Drie lagen, in beide thema's in dezelfde volgorde: grond — de pagina, ligt het verst naar achteren vlak-2 — een verdiept vlak binnen een paneel (balk, ingedrukte rij) vlak — het paneel zelf, ligt het hoogst In licht wordt hoger lichter, in donker ook. Draai die volgorde niet om: dan klapt "knop op een balk" per thema om. ---------------------------- */ --kodeq-grond: #eceeed; --kodeq-vlak-2: #f5f6f5; --kodeq-vlak: #ffffff; /* lijn = haarlijn voor panelen en scheidingen; lijn-sterk = de rand van iets waar je op klikt. Die tweede haalt bewust 3:1 met het vlak eronder, want anders is een knop niet van zijn ondergrond te onderscheiden. */ --kodeq-lijn: #d5dad7; --kodeq-lijn-sterk: #7f8682; /* Zweefkleur. Moet in licht donkerder en in donker lichter worden dan het vlak eronder, dus dat kan geen enkel ander token voor je doen. */ --kodeq-hover: #e6e9e7; /* --- Tekst ------------------------------------------------------------ */ --kodeq-tekst: #14181a; --kodeq-gedempt: #5f6b68; /* --- Accent ----------------------------------------------------------- */ --kodeq-accent: #d92e14; --kodeq-accent-hover: #b3260f; --kodeq-accent-tekst: #ffffff; --kodeq-accent-zacht: #fbe9e6; /* --- Toestand. Los van het accent, zodat een melding een melding blijft. */ --kodeq-goed: #1c7a4a; --kodeq-goed-zacht: #e4f1ea; --kodeq-let-op: #8a5800; --kodeq-let-op-zacht: #f6eeda; --kodeq-fout: #c02616; --kodeq-fout-zacht: #fbe8e5; /* --- Werkvlak: de tekenpagina waar de schil omheen zit. --------------- */ --kodeq-werkvlak: #ffffff; --kodeq-raster: #dde2df; /* --- Overig ----------------------------------------------------------- */ --kodeq-sluier: rgb(20 24 26 / 0.4); --kodeq-focus: var(--kodeq-accent); --kodeq-schaduw-1: 0 1px 2px rgb(20 24 26 / 0.06); --kodeq-schaduw-2: 0 8px 24px -12px rgb(20 24 26 / 0.28); /* --- Per app één accent. Meer kleuren erbij verzwakt het signaal, dus MotoWire krijgt het accent en PCBCanvas de inkt. ----------------- */ --kodeq-app-motowire: var(--kodeq-accent); --kodeq-app-pcbcanvas: var(--kodeq-tekst); /* --- Vorm. Bescheiden ronde hoeken; 6 px is de standaard. ------------- */ --kodeq-radius-sm: 0.25rem; --kodeq-radius: 0.375rem; --kodeq-radius-lg: 0.625rem; --kodeq-radius-vol: 999px; /* --- Typografie. Grotesk voor tekst, mono voor alles met een eenheid. font-src staat op 'self', dus een eigen webfont kan later gewoon zelf gehost worden; tot die tijd is dit de systeemgrotesk. ------- */ --kodeq-sans: "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif; --kodeq-mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", monospace; --kodeq-label-spatie: 0.08em; } /* * Donker. Eén tokenblok, langs twee wegen bereikbaar: de systeemvoorkeur (tenzij * de bezoeker expliciet licht koos) en een expliciete keuze. Componenten lezen * alleen de variabelen en weten dus niet welke weg het was. */ @media (prefers-color-scheme: dark) { :root:not([data-thema="licht"]) { color-scheme: dark; --kodeq-grond: #15181a; --kodeq-vlak-2: #1a1e20; --kodeq-vlak: #1f2325; --kodeq-lijn: #2e3336; --kodeq-lijn-sterk: #6d7573; --kodeq-hover: #292f31; --kodeq-tekst: #e9edee; --kodeq-gedempt: #96a1a3; --kodeq-accent: #f4593b; --kodeq-accent-hover: #ff7256; --kodeq-accent-tekst: #1a0603; --kodeq-accent-zacht: #2b1411; --kodeq-goed: #4ade80; --kodeq-goed-zacht: #12301f; --kodeq-let-op: #f0b429; --kodeq-let-op-zacht: #302711; --kodeq-fout: #f87171; --kodeq-fout-zacht: #331714; --kodeq-werkvlak: #121517; --kodeq-raster: #262b2e; --kodeq-sluier: rgb(0 0 0 / 0.62); --kodeq-schaduw-1: 0 1px 2px rgb(0 0 0 / 0.5); --kodeq-schaduw-2: 0 12px 28px -14px rgb(0 0 0 / 0.75); } } :root[data-thema="donker"] { color-scheme: dark; --kodeq-grond: #15181a; --kodeq-vlak-2: #1a1e20; --kodeq-vlak: #1f2325; --kodeq-lijn: #2e3336; --kodeq-lijn-sterk: #6d7573; --kodeq-hover: #292f31; --kodeq-tekst: #e9edee; --kodeq-gedempt: #96a1a3; --kodeq-accent: #f4593b; --kodeq-accent-hover: #ff7256; --kodeq-accent-tekst: #1a0603; --kodeq-accent-zacht: #2b1411; --kodeq-goed: #4ade80; --kodeq-goed-zacht: #12301f; --kodeq-let-op: #f0b429; --kodeq-let-op-zacht: #302711; --kodeq-fout: #f87171; --kodeq-fout-zacht: #331714; --kodeq-werkvlak: #121517; --kodeq-raster: #262b2e; --kodeq-sluier: rgb(0 0 0 / 0.62); --kodeq-schaduw-1: 0 1px 2px rgb(0 0 0 / 0.5); --kodeq-schaduw-2: 0 12px 28px -14px rgb(0 0 0 / 0.75); }