/* * Huisstijl van het CRM. De standaard is die van websignaal.nl; onderaan staat * de tweede, van aenv-ict.nl, met daar ook hoe een omgeving kiest welke ze * draagt. * * Eén plek voor alle kleuren en lettertypes. Verder noemt niets in het CRM nog * een hexwaarde: de eigen regels in base.html.twig, de inline stijlen in de * partials, de SCSS en ook de meegeleverde themabestanden app.css en * bootstrap.css verwijzen hiernaar met var(). Een kleur wijzigen is daarmee één * regel in dit bestand. * * Dit bestand wordt ná de themabestanden geladen, zie partials/head-css.html.twig. * Voor de --ws-tokens maakt dat niet uit, een custom property geldt ongeacht de * volgorde. Voor de --bs-tokens onderaan wel: die overschrijven een waarde die * Bootstrap zelf op :root zet, en bij gelijke specificiteit wint de laatste. * * WAAR DE WAARDEN VANDAAN KOMEN * Niet uit de stylesheet van het thema maar uit de pagina zelf: het thema leest * zijn accenttinten uit Dashboard > Huisstijl en zet ze als --wsc-huisstijl-* in * de . De hexwaarden in de stylesheet zijn alleen de fallback voor als daar * niets is ingevuld, en die wijkt af van wat er werkelijk staat (#1E69A6 tegen * #1D76A0, #1E8FC9 tegen #2390C3, #F2F8FE tegen #EEF8FC). Hieronder staat wat de * site echt gebruikt. * * DE NAMEN ZEGGEN DE ROL, NIET DE KLEUR * Tot 11 nov 2026 heetten deze tokens --ws-cyan en --ws-blue, naar de kleuren van * websignaal.nl. Met een tweede huisstijl erbij klopt zo'n naam niet meer: in de * A&V ICT-set is --ws-accent oranje. De namen gaan daarom over wat een kleur doet: * * --ws-accent het gevulde merkvlak, met donkere tekst erop * --ws-primary tekstlinks, randen, actieve items, en gevulde donkere vlakken * * TWEE TINTEN, EN WAAROM DAT MOET * Het accent is te licht voor witte tekst: cyaan haalt 2,8 staat tot 1, oranje * 1,9. De site lost dat op met de inkt uit het logo op die knop, en dat haalt 5,4. * Gevulde accentvlakken dragen dus donkere tekst, en voor tekstlinks, randen en * actieve items is er een tweede, donkere tint (--ws-primary) die op wit wél * leesbaar is. Beide huisstijlen werken zo; de getallen staan bij de tweede set. * * De -rgb-varianten bestaan voor regels met rgba(): daar kan geen hex uit een * var() in, wel een los triplet. */ :root { /* Accent. Dit staat op de site in Dashboard > Huisstijl. */ /* AI-acties. Het paars van vóór de huisstijlwissel; die knoppen staan live nog zo en iedereen herkent ze eraan. Wit erop haalt 6,51 staat tot 1, ruim boven de 4,5 die AA vraagt. */ --ws-ai: #6f42c1; --ws-ai-rgb: 111, 66, 193; --ws-ai-h: #5e35a8; --ws-accent: #28a4de; --ws-accent-rgb: 40, 164, 222; --ws-accent-h: #2390c3; --ws-accent-soft: #84cbec; --ws-primary: #1d76a0; --ws-primary-rgb: 29, 118, 160; --ws-primary-h: #17547f; --ws-primary-bg: #eef8fc; --ws-primary-line: #bfe4f5; --ws-on-primary: #dceef9; /* Tekst en lijnen. Het ontwerp werkt met haarlijnen in plaats van schaduwen, vandaar twee lijnkleuren en geen enkele schaduw. */ --ws-ink: #000000; --ws-article: #242a2e; --ws-body: #545c61; --ws-muted: #9ba3a8; --ws-hair: #e2e7ea; --ws-hair-blue: #c2c9cc; --ws-canvas: #ffffff; --ws-surface-alt: #f4f5f6; /* Alleen in het CRM, de site kent ze niet. Het paginavlak omdat een applicatie met kaarten erop structuur nodig heeft die een website met secties niet nodig heeft, en de donkerste trap omdat het thema daar diepere tinten van zijn primary gebruikte. */ --ws-page: var(--ws-surface-alt); --ws-primary-deep: #114760; /* Status staat bewust buiten de huisstijl: de site kent geen groen, rood of amber, en in het CRM moet rood rood blijven. Anders verdwijnt het verschil tussen een actie en een waarschuwing. */ --ws-danger: #dc2626; --ws-danger-rgb: 220, 38, 38; --ws-danger-hover: #b91c1c; --ws-warning: #f59e0b; --ws-success: #15803d; /* Badges. Elk een paar: vulling en tekst. */ --ws-badge-muted-bg: #f1f3f5; --ws-badge-muted: #6c757d; --ws-badge-green-bg: #e7f6ec; --ws-badge-green: #1b7a3d; --ws-badge-amber-bg: #fff4e5; --ws-badge-amber: #b26a00; --ws-badge-red-bg: #fdecec; --ws-badge-red: #b42318; /* Vorm, uit DESIGN.md. Drie maten en niet meer: bediening, vlak, badge. De huisstijl zit op 14 en de stijlreferentie op 10 tot 14; dit is waar beide samenkomen. Een kaart heeft geen schaduw, alleen wat echt boven de pagina zweeft (dropdown, modal) houdt er een. */ --ws-radius-control: 10px; --ws-radius-card: 12px; --ws-radius-badge: 7px; --ws-shadow-raised: rgba(28, 40, 64, .06) 0 2px 6px 0, rgba(28, 40, 64, .08) 0 6px 20px -2px; /* De kaart, het meest herhaalde vlak van het CRM. Deze drie regels bepalen hoe elke lijst, elk paneel en elke tegel eruitziet; ze stonden tot 1 nov 2026 als Tailwind-utilities in 88 templates. De ronding stond tot 3 nov 2026 op 8 omdat Tailwind's .rounded-lg (.5rem) het won van de 12 uit het ontwerp: die klasse stond naast .ws-card op de kaarten zelf. Sinds de omzetting naar het datagrid en de componenten is dat er nog op één plek, en die is weg; vandaar nu de ontwerpwaarde. */ --ws-card-bg: var(--ws-canvas); --ws-card-radius: var(--ws-radius-card); --ws-card-border: rgba(0, 0, 0, .12); --ws-card-ring: var(--ws-hair); --ws-card-border-alert: #fecaca; /* Lettertypes, dezelfde als op de site. Alle drie SIL Open Font License en los te laden bij Google Fonts, zie head-css.html.twig. */ --ws-font-head: 'Archivo', system-ui, -apple-system, sans-serif; --ws-font-body: 'Inter', system-ui, -apple-system, sans-serif; --ws-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; /* Hoe die drie worden ingezet. Dit is het tweede deel van een huisstijl: de lettertypes zijn op beide sites dezelfde, de manier waarop ze gebruikt worden niet. Websignaal zet labels en knoppen in mono-kapitalen, A&V ICT in gewone letters; dat verschil is groter dan welke kleur dan ook, en het gaat niet over de componenten zelf. Vandaar tokens in plaats van een tweede set regels. De waarden hieronder zijn Websignaal; de tweede set staat verderop. Gemeten op beide sites met getComputedStyle, niet uit de stylesheet gelezen: de hero van websignaal.nl is Archivo 900 op -0,045em, die van aenv-ict.nl Archivo 800 op -0,025em. */ --ws-title-weight: 900; --ws-title-tracking: -.045em; --ws-head-tracking: -.03em; --ws-label-font: var(--ws-font-mono); --ws-label-weight: 500; --ws-label-tracking: .18em; --ws-btn-font: var(--ws-font-mono); --ws-btn-weight: 500; --ws-btn-size: .78125rem; --ws-btn-tracking: .1em; --ws-btn-transform: uppercase; /* Het merkteken voor een label. Bij Websignaal de vorm uit het logo, bij een huisstijl zonder zo'n vorm gewoon een stip. */ --ws-mark-radius: 55% 0 55% 0; /* De grote vorm achter elke paginakop, op 14% dekking. Bij ons het blokje uit het logo als SVG; een andere huisstijl heeft dat blokje niet, en krijgt een vlak in de eigen accentkleur met de vorm hierboven. Daarom twee tokens: de achtergrond en de ronding van dat vlak. */ --ws-page-shape: url("/images/ws-blokje-blauw.svg") no-repeat 50% 50% / contain; --ws-page-shape-radius: 0; } /* * TWEEDE HUISSTIJL: A&V ICT (crm.aenv-ict.nl) * * Het CRM draait op meer dan één plek. Welke huisstijl een omgeving draagt staat * in Instellingen > Huisstijl (corporate_identity.theme, zie App\Enum\Theme); * base.html.twig en de inlogpagina zetten die waarde als data-theme op . * * Alleen de accentfamilie staat hieronder. Alles wat er niet in staat, staat er * bewust niet in: tekst en lijnen, status, badges, vorm en lettertypes zijn voor * elke huisstijl gelijk, en aenv-ict.nl gebruikt dezelfde drie lettertypes als * websignaal.nl. Een huisstijl is hier dus een kleurmerk, geen tweede ontwerp. * * DE WAARDEN * De vijf tinten van aenv-ict.nl zelf, uitgelezen uit de --wsc-huisstijl-* * die het thema in de zet: #FFA934, #E0952E, #FFF8EF, #FFE5C2, #FFCE8B. * * Eén tint kon niet mee. De site gebruikt #B87A25 als donkere variant, en die * haalt op wit 3,59 staat tot 1, te weinig voor tekst (AA vraagt 4,5). In de rol * van --ws-primary draagt die kleur bijna vierhonderd verwijzingen, waaronder * elke tekstlink. Daarom #95611b (5,25), tegenover de 5,06 van Websignaal, met * #6f4812 als hover (8,04, precies gelijk aan de hover daar). Gemeten, niet * geschat; elk paar in deze set haalt minstens dezelfde verhouding als zijn * tegenhanger in de standaardset. */ :root[data-theme="aenv-ict"] { --ws-accent: #ffa934; --ws-accent-rgb: 255, 169, 52; --ws-accent-h: #e0952e; --ws-accent-soft: #ffce8b; --ws-primary: #95611b; --ws-primary-rgb: 149, 97, 27; --ws-primary-h: #6f4812; --ws-primary-bg: #fff8ef; --ws-primary-line: #ffe5c2; --ws-primary-deep: #5a3a0e; --ws-on-primary: #fdeeda; /* Typografie. Dezelfde drie lettertypes, anders ingezet. Gemeten op aenv-ict.nl: de hero is Archivo 800 op -0,025em in plaats van 900 op -0,045em, de eyebrow staat in Archivo 700 en niet in mono, en een knop is gewoon Inter 600 op 14 px zonder kapitalen. Dat laatste is het verschil dat je in het CRM het meest ziet, want elke knop draagt het. */ --ws-title-weight: 800; --ws-title-tracking: -.025em; --ws-head-tracking: -.02em; --ws-label-font: var(--ws-font-head); --ws-label-weight: 700; --ws-label-tracking: .14em; --ws-btn-font: var(--ws-font-body); --ws-btn-weight: 600; --ws-btn-size: .875rem; --ws-btn-tracking: normal; --ws-btn-transform: none; /* Geen logovorm van ons bij een andere huisstijl: een ronde stip, en achter de paginakop een rond vlak in de accentkleur in plaats van ons blokje. */ --ws-mark-radius: 999px; --ws-page-shape: var(--ws-accent); --ws-page-shape-radius: 999px; } /* * Het thema tekent zo goed als alles met --bs-font-sans-serif, dat op * "Noto Sans" stond. Door die variabele hier opnieuw te zetten volgt het hele * CRM het lettertype van de site, zonder dat er één regel in app.css of * bootstrap.css hoeft te veranderen. Koppen krijgen Archivo, dat staat in * head-css.html.twig omdat het een regel is en geen waarde. */ :root { --bs-font-sans-serif: var(--ws-font-body); --bs-font-monospace: var(--ws-font-mono); --bs-body-font-family: var(--ws-font-body); /* Ronding, lijnen en schaduw van het thema. * * Dit is de plek waar de huisstijl het hele CRM bereikt in plaats van alleen * de schermen die .content-section gebruiken. Van de 194 templates erven er * 183 direct van base.html.twig en maar 10 van view_base, en de dominante * container is niet .content-section (99 keer) maar .card (874 keer) en het * Tailwind-patroon "bg-white rounded-lg shadow" (221 keer). Bootstrap tekent * die allemaal via de variabelen hieronder, dus één herdefinitie hier doet * meer dan honderd regels in websignaal.css. * * De schaduw-utilities van Bootstrap staan op !important, maar lezen wel * --bs-box-shadow. Door daar een haarlijn in te zetten wordt elke .shadow in * de templates vanzelf de lijn uit het ontwerp, zonder dat er één class uit * een template hoeft. Alleen -lg blijft een echte schaduw: die zit op wat * boven de pagina zweeft, zoals een dropdown of een modal. */ --bs-border-radius: var(--ws-radius-control); --bs-border-radius-sm: var(--ws-radius-badge); --bs-border-radius-lg: var(--ws-radius-card); --bs-border-radius-xl: var(--ws-radius-card); --bs-border-radius-2xl: var(--ws-radius-card); --bs-border-color: var(--ws-hair); --bs-box-shadow: 0 0 0 1px var(--ws-hair); --bs-box-shadow-sm: 0 0 0 1px var(--ws-hair); --bs-box-shadow-lg: var(--ws-shadow-raised); --bs-box-shadow-inset: none; }