/* ========================================================================== UI-TOKENS — de kleurlaag waar css/ui-stijl.css volledig op draait ========================================================================== WAAROM DIT BESTAND BESTAAT `css/ui-stijl.css` is 1-op-1 overgenomen uit 4planning en is bewust TOKENS-ONLY: er staat geen enkele hex in. Alle kleur komt uit de variabelen hieronder. In 4planning worden die per omgeving berekend en per pagina ingespoten (functions/brand_css_vars.php + color_functions.php), omdat die app whitelabel is en een dark mode heeft. Mijn We4media is GEEN whitelabel en heeft GEEN dark mode. Die hele generator is hier dus overbodig. In plaats daarvan zijn de waarden hieronder ÉÉN KEER berekend met 4planning's `calcBrandColors('EC671A', '01165A', 'light')` en daarna bevroren. Netto resultaat: exact dezelfde vormtaal en dezelfde tint-verhoudingen als 4planning, maar zonder runtime-machinerie — en `ui-stijl.css` kan letterlijk ongewijzigd blijven, zodat je hem later kunt hersyncen met 4planning zonder merge-werk. REGELS - Kleur in nieuwe componenten komt ALTIJD uit deze vars, nooit uit een hex. - Wil je de huisstijl aanpassen (personaliseren), doe dat HIER — niet in ui-stijl.css. Eén waarde veranderen werkt dan meteen door in elk component. - Dit bestand MOET vóór ui-stijl.css laden en NA css/styles.css: het overschrijft bewust een paar Bootstrap-vars uit de SB-Admin-build (o.a. --bs-primary-soft, die daar per ongeluk gelijk is aan de volle merkkleur en dus geen zachte tint oplevert). Bron: 4planning public_html/functions/brand_css_vars.php (brandCssVarsStyle) ========================================================================== */ :root { /* --- Merkkleuren -------------------------------------------------------- */ --primary-color: #EC671A; --primary-color-rgb: 236, 103, 26; --secondary-color: #01165A; --secondary-color-rgb: 1, 22, 90; /* Tekst BOVENOP een merkvlak (knop, page-header). */ --primary-bg-text-color: #FFFFFF; --primary-bg-text-color-rgb: 255, 255, 255; --primary-bg-text-color-dark: #CCC; --primary-bg-text-color-gray: #BFBFBF; --secondary-bg-text-color: #E6E6E6; --secondary-bg-text-color-rgb: 255, 255, 255; /* Contrast-gegarandeerde "op-oppervlak"-merkkleuren (tekst 4.5:1, niet-tekst UI 3:1). Voor TEKST, LINKS, RANDEN en ICONEN in de merkkleur — de kale --primary-color is oranje en zakt op wit door de contrastgrens. Grote merk-VLAKKEN houden gewoon --primary-color. */ --brand-on-surface: #bd4f10; --brand-on-surface-ui: #ec6518; --secondary-on-surface: #01165A; --secondary-on-surface-ui: #01165A; /* --- Oppervlakken (light) ---------------------------------------------- */ --theme-color-body: #F2F6FC; --theme-color-card: #FFF; --theme-color-card-2: #FFF; --theme-color-1: #FFF; --theme-color-1-rgb: 255, 255, 255; --theme-color-2: #F8F8F8; --theme-color-2-rgb: 248, 248, 248; --theme-color-3: #F0F0F0; --theme-color-3-rgb: 240, 240, 240; --theme-color-4: #EBEBEB; --theme-color-4-rgb: 235, 235, 235; --theme-color-5: #E6E6E6; --theme-color-5-rgb: 230, 230, 230; /* --- Kaarten ------------------------------------------------------------ De "secondary mist": een kaart is niet spierwit maar een vleugje navy op het kaartvlak, met een rand in dezelfde familie. Dat scheelt op een lichtblauwe body-achtergrond precies genoeg om de kaart als eigen vlak te lezen zonder dat er een harde rand omheen hoeft. Stond als losse color-mix in een stuk of acht pagina-stylesheets (klantenlijst, aanvragen, bellijst, dashboard, meldingen, zoeken, app-detail); sinds 2026-08-27 komt hij hiervandaan en hangt hij op .card-soft, dus op ELKE kaart in de app. */ --kaart-bg: color-mix(in srgb, var(--secondary-color) 5%, var(--theme-color-card)); --kaart-rand: color-mix(in srgb, var(--secondary-color) 15%, var(--theme-color-3)); /* --- Rij-hover ---------------------------------------------------------- ÉÉN tint voor elke hoverbare rij (table-soft, .table-hover, .table-clickable, .data-list-row-clickable). Secundair (donkerblauw) i.p.v. primair oranje: de hover is een neutraal "hier sta je"-signaal, geen merkaccent, en een oranje waas onder een rij vol status-pills vecht met die pills. 6% navy is genoeg: donkerblauw leest een stuk sterker dan dezelfde alpha oranje, dus meer wordt een vlak i.p.v. een hint. Pas je hem aan, doe dat HIER — niet per component. */ --rij-hover-bg: color-mix(in srgb, var(--secondary-color) 6%, transparent); /* --- Formuliervelden ---------------------------------------------------- */ --theme-color-input: #FFF; --theme-color-input-active: #FFF; --theme-color-input-border: #c5ccd6; /* --- Tekst -------------------------------------------------------------- */ --theme-text-color: #000; --theme-text-color-rgb: 0, 0, 0; --theme-text-color-dark: #666; --theme-text-color-dark-rgb: 102, 102, 102; --theme-text-color-gray: #6c757d; --theme-text-color-gray-rgb: 108, 117, 125; /* --- Schaduw ------------------------------------------------------------ LET OP: dit is een KAAL rgb-triplet zonder alpha. Gebruik altijd `rgba(var(--custom-theme-box-shadow-rgb), )` en zet NOOIT een alpha terug in de var zelf — dan krijgt rgba() vijf argumenten en is de hele declaratie stil ongeldig (kaarten zonder schaduw). In 4planning heeft precies die fout 17 declaraties onzichtbaar gesloopt. */ --custom-theme-box-shadow-rgb: 33, 40, 50; --custom-theme-box-shadow-alpha: 0.17; /* --- Bootstrap-statuskleuren + hun zachte tinten ------------------------ Semantisch en vast: success = gelukt, warning = let op, danger = fout, info = neutrale toelichting. Deze veranderen NIET mee met de merkkleur. De -soft-tinten zijn 15% kleur op de achtergrond en zijn de basis van status-pill / btn-soft-* / icon-tile. */ --bs-success: #00ac69; --bs-success-rgb: 0, 172, 105; --bs-success-soft: #e0f5ec; --bs-success-soft-rgb: 224, 245, 236; --bs-info: #00cfd5; --bs-info-rgb: 0, 207, 213; --bs-info-soft: #e0f9fa; --bs-info-soft-rgb: 224, 249, 250; --bs-warning: #f4a100; --bs-warning-rgb: 244, 161, 0; --bs-warning-soft: #fef5e0; --bs-warning-soft-rgb: 254, 245, 224; --bs-danger: #e81500; --bs-danger-rgb: 232, 21, 0; --bs-danger-soft: #fde7e5; --bs-danger-soft-rgb: 253, 231, 229; --bs-purple: #6f42c1; --bs-purple-rgb: 111, 66, 193; --bs-purple-soft: #ede0f7; --bs-purple-soft-rgb: 237, 224, 247; /* Merkgebonden softs. styles.css zet --bs-primary-soft op de VOLLE merkkleur (#EC671A) — dat is geen zachte tint en maakt elke soft-component onleesbaar. Hier staat de echte 15%-tint. */ --bs-primary: #EC671A; --bs-primary-rgb: 236, 103, 26; --bs-primary-soft: #fce8dd; --bs-primary-soft-rgb: 252, 232, 221; --bs-secondary: #01165A; --bs-secondary-rgb: 1, 22, 90; --bs-secondary-soft: #d9dce6; --bs-secondary-soft-rgb: 217, 220, 230; --bs-light: #f8f9fa; --bs-light-rgb: 248, 249, 250; --bs-dark: #212529; --bs-dark-rgb: 33, 37, 41; /* Bootstrap-basisvars die de SB-Admin-build mist of anders invult; zonder deze resolveren var(--bs-border-color) / var(--bs-secondary-color) leeg in de componentlaag (randloze pills, kleurloze meta-tekst). */ --bs-border-color: var(--theme-color-input-border); --bs-secondary-color: var(--theme-text-color-gray); --bs-link-color: var(--brand-on-surface); --bs-link-hover-color: var(--brand-on-surface); /* Light-only. Staat hier zodat form-controls en scrollbars de juiste browser-chrome krijgen; wordt dark mode ooit alsnog gewenst, dan is dit (samen met de blokken hierboven) de enige plek die mee moet. */ --color-scheme: light; }