/* ============================================================================= Ecorem — design tokens ============================================================================= THIS IS THE FILE TO EDIT WHEN YOU WANT ANOTHER COLOUR SCHEME. Everything below the "Presets" section is derived: app.css and Bootstrap both read these variables, so changing a preset restyles the whole application. Switching theme --------------- Set 'theme' in the runtime configuration (see config.example.php): 'theme' => 'ecorem', // ecorem | blauw | groen | leisteen | donker | eigenhaard | haagwonen That renders and the matching preset below takes over. No CSS edit and no deploy needed — it is a configuration change. Adding a preset --------------- Copy a [data-theme="..."] block, give it a new name, change the values, and add the name to ECOREM_THEMES in src/config.php so it is accepted. A note on the status colours: success / warning / danger / neutral carry meaning in this application (green = valid, orange = expired, red = missing, grey = in progress). Keep them distinguishable from the accent colour — that is why the default accent is the logo's purple rather than its green. ============================================================================= */ /* ----------------------------------------------------------------------------- Presets -------------------------------------------------------------------------- */ /* Ecorem — the house style, taken from the logo: leaf green #59ac1c and building purple #642182. Purple carries the interface because green is already spoken for by the "actueel" status; the green stays in the logo. */ :root, [data-theme='ecorem'] { --canvas: #f7f6f9; --surface: #ffffff; --surface-sunken: #f2f0f6; --surface-inverse: #1a1020; --border: #e7e3ee; --border-strong: #cdc6d9; --text: #1a1020; --text-muted: #5d5470; --text-subtle: #857c96; --text-inverse: #f8f6fb; --accent: #642182; --accent-rgb: 100, 33, 130; --accent-hover: #501a68; --accent-active: #3d1450; --accent-contrast: #ffffff; --accent-subtle: #f2eaf7; --accent-border: #d6c0e3; --success: #3f7a12; --success-subtle: #edf5e5; --warning: #8f5504; --warning-subtle: #fcf1e0; --danger: #ad2820; --danger-subtle: #fbeae8; --neutral: #5d5470; --neutral-subtle: #f0eef4; /* Map polygon fills. Read from JavaScript, so they must be plain colours. */ --map-success: #59ac1c; --map-warning: #d98324; --map-danger: #c8443a; --map-highlight: #642182; } /* Blauw — neutral slate surfaces with a corporate blue accent. */ [data-theme='blauw'] { --canvas: #f5f7f9; --surface: #ffffff; --surface-sunken: #f1f4f7; --surface-inverse: #101720; --border: #e3e8ee; --border-strong: #c9d2dd; --text: #111823; --text-muted: #56626f; --text-subtle: #7d8895; --text-inverse: #f4f7fa; --accent: #17549b; --accent-rgb: 23, 84, 155; --accent-hover: #114281; --accent-active: #0d3467; --accent-contrast: #ffffff; --accent-subtle: #e9f0f8; --accent-border: #b9cfe6; --success: #17734a; --success-subtle: #e6f4ec; --warning: #8f5504; --warning-subtle: #fcf1e0; --danger: #ad2820; --danger-subtle: #fbeae8; --neutral: #5b6675; --neutral-subtle: #eef1f4; /* Map polygon fills. Read from JavaScript, so they must be plain colours. */ --map-success: #1f9d63; --map-warning: #d98324; --map-danger: #c8443a; --map-highlight: #17549b; } /* Eigen Haard — hun karmijnrood #e20030, uit het logobestand gemeten. Let hier op de statuskleuren. Rood betekent in deze applicatie "geen onderzoek", en de huisstijl van deze corporatie ís rood — die twee zouden hetzelfde gaan lezen. Het accent houdt daarom de heldere huisstijlkleur en --danger schuift naar een donkerder, bruiner baksteenrood dat niet voor een knop of een link kan worden aangezien. Success en warning bleven staan; die zaten al ver genoeg weg. */ [data-theme='eigenhaard'] { /* De neutralen dragen de huisstijlkleur duidelijk mee. Met een bijna-witte ondergrond zat het verschil met een andere corporatie alleen in een knop hier en daar, en leken twee tenants op elkaar. */ --canvas: #fbf1f3; --surface: #ffffff; --surface-sunken: #f8e7eb; --surface-inverse: #1c1013; --border: #f2d9df; --border-strong: #e8b0bc; --text: #1b1216; --text-muted: #675a5e; --text-subtle: #8b7c81; --text-inverse: #fbf6f7; /* Uit het logobestand gemeten, niet geschat: #e20030. Contrast met wit is 4,91 — genoeg voor tekst op een knop, dus de huisstijlkleur kan hier letterlijk worden gebruikt. */ --accent: #e20030; --accent-rgb: 226, 0, 48; --accent-hover: #c40029; --accent-active: #ad0025; --accent-contrast: #ffffff; --accent-subtle: #f9ebee; --accent-border: #edc0c9; --success: #17734a; --success-subtle: #e6f4ec; --warning: #8f5504; --warning-subtle: #fcf1e0; --danger: #8e1b12; --danger-subtle: #f7e6e4; --neutral: #5b6675; --neutral-subtle: #eef1f4; /* Map polygon fills. Read from JavaScript, so they must be plain colours. */ --map-success: #1f9d63; --map-warning: #d98324; --map-danger: #9c3128; --map-highlight: #e20030; } /* Haag Wonen — hun bladgroen #66CC33, uit het logobestand gemeten. * * Die kleur kan niet als accent worden gebruikt zoals hij is: contrast met wit * is 2,05, en witte tekst op een knop in die groentint is onleesbaar. De tint * en de verzadiging blijven dus staan en alleen de helderheid zakt, tot 4,67 — * herkenbaar dezelfde groen, wél leesbaar. Het felle groen zit in hun logo, dat * ernaast staat. * * En de kaartmarkering is hier bewust niet het accent. Groen betekent op die * kaart "laatste onderzoek is actueel"; een groene markeringsrand om een groen * complex is geen markering. Daarom een blauw dat in geen enkele status * voorkomt. */ [data-theme='haagwonen'] { --canvas: #f5faf2; --surface: #ffffff; --surface-sunken: #eff7eb; --surface-inverse: #101a0e; --border: #e2f1da; --border-strong: #bee0ae; --text: #131a0f; --text-muted: #556150; --text-subtle: #7f8b7a; --text-inverse: #f5faf2; --accent: #418321; --accent-rgb: 65, 131, 33; --accent-hover: #39721d; --accent-active: #316218; --accent-contrast: #ffffff; --accent-subtle: #edf7e9; --accent-border: #cae6bc; --success: #17734a; --success-subtle: #e3f2e9; --warning: #8f5504; --warning-subtle: #fcf1e0; --danger: #ad2820; --danger-subtle: #fbeae8; --neutral: #5b6675; --neutral-subtle: #eef1ec; /* Map polygon fills. Read from JavaScript, so they must be plain colours. */ --map-success: #1f9d63; --map-warning: #d98324; --map-danger: #c8443a; --map-highlight: #17549b; } /* Groen — for an ecology-forward look. The accent sits close to the "valid" status colour, so status tinting reads slightly weaker here. */ [data-theme='groen'] { --canvas: #f4f7f4; --surface: #ffffff; --surface-sunken: #eff4ef; --surface-inverse: #101a14; --border: #e0e8e1; --border-strong: #c4d3c6; --text: #101a14; --text-muted: #4f5f55; --text-subtle: #7a8a80; --text-inverse: #f3f8f4; --accent: #1f6b45; --accent-rgb: 31, 107, 69; --accent-hover: #175435; --accent-active: #114228; --accent-contrast: #ffffff; --accent-subtle: #e7f2eb; --accent-border: #b6d3c2; --success: #17734a; --success-subtle: #e3f2e9; --warning: #8f5504; --warning-subtle: #fcf1e0; --danger: #ad2820; --danger-subtle: #fbeae8; --neutral: #5b6675; --neutral-subtle: #edf1ee; --map-success: #1f9d63; --map-warning: #d98324; --map-danger: #c8443a; --map-highlight: #1f6b45; } /* Leisteen — monochrome and understated. */ [data-theme='leisteen'] { --canvas: #f6f7f8; --surface: #ffffff; --surface-sunken: #f0f2f4; --surface-inverse: #14181d; --border: #e4e7ea; --border-strong: #c8cdd3; --text: #14181d; --text-muted: #565e68; --text-subtle: #7c848d; --text-inverse: #f5f6f8; --accent: #2f3a46; --accent-rgb: 47, 58, 70; --accent-hover: #212a34; --accent-active: #161d24; --accent-contrast: #ffffff; --accent-subtle: #eceef1; --accent-border: #c3c9d1; --success: #17734a; --success-subtle: #e6f2ea; --warning: #8f5504; --warning-subtle: #fbf1e2; --danger: #ad2820; --danger-subtle: #fae9e8; --neutral: #5b6675; --neutral-subtle: #eef0f2; --map-success: #1f9d63; --map-warning: #d98324; --map-danger: #c8443a; --map-highlight: #2f3a46; } /* Donker — opt-in only; nothing switches to this automatically. */ [data-theme='donker'] { --canvas: #0e1319; --surface: #161d26; --surface-sunken: #1c242f; --surface-inverse: #f4f7fa; --border: #29323d; --border-strong: #3a4552; --text: #e8edf3; --text-muted: #a3aebb; --text-subtle: #7d8895; --text-inverse: #111823; --accent: #6ea8f0; --accent-rgb: 110, 168, 240; --accent-hover: #8dbcf5; --accent-active: #a9cdf8; --accent-contrast: #0b1119; --accent-subtle: #1a2735; --accent-border: #2f455f; --success: #5cc48d; --success-subtle: #16281f; --warning: #e0a45c; --warning-subtle: #2a2116; --danger: #ef8279; --danger-subtle: #2c1a19; --neutral: #9aa5b3; --neutral-subtle: #1e252e; --map-success: #34b877; --map-warning: #e09a45; --map-danger: #e0655a; --map-highlight: #6ea8f0; } /* ----------------------------------------------------------------------------- Derived tokens — shared by every preset -------------------------------------------------------------------------- */ :root { --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Inter ships as a variable font; these are axis positions, not files. */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-lg: 1.0625rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --radius-sm: 4px; --radius: 7px; --radius-lg: 11px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgb(16 24 40 / 6%); --shadow: 0 1px 3px rgb(16 24 40 / 8%), 0 1px 2px rgb(16 24 40 / 4%); --shadow-lg: 0 10px 24px -6px rgb(16 24 40 / 14%), 0 4px 8px -4px rgb(16 24 40 / 8%); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); --navbar-height: 58px; --content-max: 1400px; /* Paper is white whichever preset is active. */ --print-bg: #ffffff; --print-text: #000000; /* The logo is drawn for a white ground, so the plate it sits on stays white in every preset rather than following --surface. */ --logo-plate: #ffffff; } /* ----------------------------------------------------------------------------- Bootstrap bridge ----------------------------------------------------------------------------- Bootstrap 5.3 reads its own --bs-* variables, so pointing those at the tokens above themes every component without overriding component rules one by one. -------------------------------------------------------------------------- */ :root { --bs-body-bg: var(--canvas); --bs-body-color: var(--text); --bs-body-font-family: var(--font-sans); --bs-body-font-size: var(--text-base); --bs-body-font-weight: var(--weight-normal); --bs-body-line-height: 1.55; --bs-emphasis-color: var(--text); --bs-secondary-color: var(--text-muted); --bs-tertiary-color: var(--text-subtle); --bs-border-color: var(--border); --bs-border-radius: var(--radius); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius-lg: var(--radius-lg); --bs-primary: var(--accent); --bs-primary-rgb: var(--accent-rgb); --bs-link-color: var(--accent); --bs-link-hover-color: var(--accent-hover); --bs-success: var(--success); --bs-warning: var(--warning); --bs-danger: var(--danger); --bs-secondary: var(--neutral); --bs-success-text-emphasis: var(--success); --bs-warning-text-emphasis: var(--warning); --bs-danger-text-emphasis: var(--danger); --bs-success-bg-subtle: var(--success-subtle); --bs-warning-bg-subtle: var(--warning-subtle); --bs-danger-bg-subtle: var(--danger-subtle); --bs-secondary-bg-subtle: var(--neutral-subtle); --bs-table-color: var(--text); --bs-table-bg: transparent; --bs-table-border-color: var(--border); --bs-table-striped-bg: var(--surface-sunken); --bs-table-hover-bg: var(--accent-subtle); }