diff --git a/.github/workflows/code-quality.yml b/.github/workflows/code-quality.yml index f3effeaed..f2d488d53 100644 --- a/.github/workflows/code-quality.yml +++ b/.github/workflows/code-quality.yml @@ -148,7 +148,15 @@ permissions: jobs: quality: - if: (github.event_name != 'pull_request' || github.head_ref != 'development') + # The pull_request run of a PR whose head is `development` is skipped + # because the `development` push run already decided that commit — EXCEPT + # the promotion into `beta`. The shared workflow runs E2E on the promotion + # path only (`e2e-promotion-only`), never on a `development` push, so for + # `development -> beta` this run is not a duplicate: it is the only run + # that executes E2E for the commits being promoted. Without this clause + # every `development -> beta` PR (#1080) reported E2E as skipped, while a + # hotfix branch into `beta` (#1102) ran all eight shards. + if: (github.event_name != 'pull_request' || github.head_ref != 'development' || github.base_ref == 'beta') uses: ConductionNL/.github/.github/workflows/quality.yml@main with: app-name: thematiq diff --git a/.github/workflows/sync-to-beta.yml b/.github/workflows/sync-to-beta.yml index e8a817f7d..61991da7e 100644 --- a/.github/workflows/sync-to-beta.yml +++ b/.github/workflows/sync-to-beta.yml @@ -1,10 +1,53 @@ name: Sync to Beta +# WEEKLY, NOT PER PUSH. This used to run on every push to `development`, so the +# `development -> beta` promotion PR was open permanently: the push after a +# promotion was merged (usually the beta -> development back-sync itself) +# opened the next one straight away. Since the promotion PR is where E2E runs, +# a permanently open promotion PR meant the full E2E suite ran on every +# `development` push after all. +# +# Opening it once a week makes the promotion a deliberate weekly event: the +# PR appears on Friday morning, carries one E2E verdict for the week's work, +# and closes when it is merged. A PR that is left open still picks up every +# `development` push (its head IS `development`) and re-runs E2E each time, so +# merge it — or close it — the same day. +# +# Scheduled runs read this file from the DEFAULT branch (`main`), so the +# schedule takes effect once this change has been promoted to `main`. on: - push: - branches: [development] + schedule: + # Friday 06:00 UTC: 08:00 Amsterdam in summer time, 07:00 in winter time. + - cron: "0 6 * * 5" + workflow_dispatch: jobs: sync-to-beta: uses: ConductionNL/.github/.github/workflows/sync-to-beta.yml@main secrets: inherit + + # A PR opened with `github.token` starts no workflows — GitHub suppresses + # events created by that token — so the Friday PR would sit there with no + # Code Quality run, and E2E would first run on whatever `development` push + # happens to come next. `workflow_dispatch` is the one event that token MAY + # trigger, and the shared quality workflow treats a manual run on a branch + # with an open PR into `beta` as the promotion path, so it runs E2E. + promotion-e2e: + needs: sync-to-beta + runs-on: ubuntu-latest + timeout-minutes: 5 + permissions: + actions: write + pull-requests: read + steps: + - name: Run Code Quality for the open promotion PR + env: + GH_TOKEN: ${{ github.token }} + run: | + PR=$(gh pr list --repo "$GITHUB_REPOSITORY" --base beta --head development --state open --json number --jq '.[0].number // empty') + if [ -z "$PR" ]; then + echo "No open development -> beta PR, so there is nothing to verify." + exit 0 + fi + gh workflow run code-quality.yml --repo "$GITHUB_REPOSITORY" --ref development + echo "Started Code Quality on development for #${PR}." diff --git a/.gitignore b/.gitignore index d2590c665..89f634917 100644 --- a/.gitignore +++ b/.gitignore @@ -76,6 +76,7 @@ !/js/lib/ !/js/preview-banner.js !/js/environment-marker.js +!/js/header-user.js !/js/playground.js !/js/playground/ !/js/ownTokens.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 806c5aaa5..9148fc31f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,96 @@ All notable changes to this project will be documented in this file. ## Unreleased ### Added +- **Zuiddrecht's website measures and type.** The site's columns (1328px page with a 24px gutter, + 1280px header row and opening band), 17px running text, a 21px lead (Contentpagina; it was 18), + semibold buttons (`--nldesign-website-button-font-weight`, read by the public bridge's four + button weights, 700 for every other set), the site's own grey `#4A4A4A` (8.86:1 on white) beside + the workplace's `#5E6168`, and a light blue ground for a missing picture (`#D9E3EF`). + +### Fixed +- **The blue mark under the menu item on screen is back on the Zuiddrecht site.** #1105 removed + `--nldesign-website-nav-current-in-line` and `--nldesign-website-nav-current-color` as unread, + because only the portal read them. Every `--nldesign-*` name the portal reads now has a role in + `css/public-bridge.css`, and `tests/vitest/portalReaders.spec.js` checks a measured list of them, + so the vocabulary test no longer calls such a name unread. + +- **The workplace top bar, as an option.** A seventh layout option, `header_style` (`default` or + `workplace`), draws the DqKop board's bar with the light layout: no logo and no app name, the + search beside the app grid button, an outline bell with a red dot, a divider, and your initials, + name and profile role. The name and role reach the bar through initial state and the small + script `js/header-user.js`; without it the bar keeps Nextcloud's avatar. Zuiddrecht names it, + and puts its brand stripe on the login card only (`brand_stripe_placement: login`). Every other + set keeps Nextcloud's bar. The option travels in the configuration bundle. +- **Zuiddrecht's navigation, measured on the boards (DqZijbalk, AppZijbalk).** The column runs + along the window's left edge with a hairline, 20px by 14px of padding and 20px between its + blocks: the brand block (a 19px name over a 13px grey line), the 42px primary button, 12px grey + captions, 42px entries with a 20px icon and a 15px label, a grey wash under the pointer, red + count circles with white 12px figures, the day-close card on the workspace grey at the foot, and + 40px footer entries with the settings foldout drawn as one of them. Nextcloud's cards take the + boards' 12px radius. +- **The light workplace login fields, as the board draws them.** The label sits above the field, + the field is 44px with a 1px edge in the darker border colour (3:1 on white), and the login + button is 46px. + +### Fixed +- **The light layout's page no longer runs past the window.** Nextcloud works out the page height + once, from its own 50px bar; with the 68px bar the page ended 18px below the window. +- **The soft selected entry has no leading bar.** Nextcloud 34 draws a 3px bar on the selected + entry's edge; the soft style is the wash and the bold label only. + +- **Four more layout options, each with a per-theme default.** Where the brand stripe is drawn + (`brand_stripe_placement`: both places, the top bar only or the login card only), the + navigation width (`navigation_width`, 200 to 480 pixels), the selected navigation entry's style + (`navigation_active_style`: Nextcloud's or a soft tint of the accent with a bold label) and the + login watermark (`login_watermark`). Each follows the active token set's `layout` block until an + administrator chooses, and a set that names none keeps what it had. Zuiddrecht names a 264px + navigation and the soft entry. All six layout choices now travel in the configuration bundle + (`config.layoutOptions`, bundle version 4), which the first Zuiddrecht change left out. +- **Zuiddrecht wears the workplace boards.** `css/token-overrides/zuiddrecht.css` now carries the + measures of the approved workplace boards (DqTokens, DqZijbalk, DqDashboard, DqZaken, DqZaak) on + the Conduction library's own class names, for this set only: a 264px navigation + (`--nldesign-nc-navigation-width`), small grey capital captions, a flat soft-red selected entry with + a bold label, 28px page titles and a 32px greeting, 18px card titles, the attention card's 13px red + kicker over a 20px title, 34px counters over grey labels, 38px pill views with the chosen one in ink, + and a quiet 14px table. Every colour goes through a token, so the dark variant follows on its own. +- **The light workplace draws the standard apps as cards.** While the workplace layout is `light`, + `css/workplace-layout.css` draws the dashboard's panels, the Files list, the settings sections and + the thematiq panel as cards on the surface (the container radius, a hairline, the cards' shadow + colour), with the card title size on the dashboard, a quiet 14px header row on the Files list, and + a 44px token set select in the theme picker. No colour literal. +- **The light workplace draws the login page and the top bar.** While the workplace layout is + `light`, `css/workplace-layout.css` now draws Nextcloud's own pages the way the Zuiddrecht boards + draw them: the logo above the login card, 56px high, the card 420px wide with a hairline, the + container radius, the cards' shadow colour and a 24px title, 44px controls with a 1px edge, a + muted footer line without a plate; a 68px top bar with a 40px app grid square and a 44px search + pill on the workspace colour. On a guest page the "Back to …" button's label, which the NL Design + link rule painted link-blue on blue, reads again. No colour literal: the sheet still suits any set + an administrator turns it on for. +- **The site's page title, lead, notice text and surface are vocabulary.** A set may name + `--nldesign-website-page-title-size` and `-line-height`, `--nldesign-website-lead-font-size`, + `--nldesign-website-notice-color` and `--nldesign-color-surface` for its portal; only the public + bridge reads them, and a set that names none keeps every value it had. Zuiddrecht names them: + 2.75rem on 1.15, 18px, #1A1A1A and #F4F6F9, every pair computed. +- **An attention strip apart from the plain notice.** `--nldesign-website-attention-background-color`, + `-border-color` and `-color` name the "Let op" strip; Zuiddrecht: #FFF4DE, #E8C77D, #1A1A1A. +- **Four demo schools in Zuiddrecht.** `wilgenboom` (Basisschool De Wilgenboom, willow green + `#2F6B4A` and sun yellow, Lexend), `vaartveld` (Vaartveld College, cobalt `#1F4FD8` and aqua, + Red Hat Display over Red Hat Text), `esdoornveen` (Esdoornveen, mbo college, plum `#5B2E91` + and maple rose, IBM Plex Sans with IBM Plex Mono for codes) and `warmtepompacademie` + (Warmtepompacademie, petrol `#0B6E7A` and ember, Barlow Semi Condensed over Barlow). Each is + built the way `zuiddrecht` is: a light workplace on Nextcloud's radius scale, a generated + dark variant, four logos and a login watermark. Every text pair reaches AA in the light and + in both dark scopes, computed by `tests/vitest/schoolTokenSets.spec.js`. +- **Lexend, Red Hat Display, Red Hat Text, Barlow, Barlow Semi Condensed, IBM Plex Sans 500 and + IBM Plex Mono 400 and 500** join the bundled typefaces, all SIL OFL 1.1, from Fontsource 5.3.0. +- **A brand stripe may draw a motif of its own.** A set names any background image in + `--nldesign-brand-stripe-image` and the stripe draws it instead of the three bands. The four + schools draw their motifs this way: the hanging twigs, the canal, the slanted cut and the + temperature line. +- **Website corners and heading faces on a portal.** A set may name the website's own radii in + `--nldesign-website-border-radius` and `--nldesign-website-border-radius-large`; only the + public bridge reads them, so the workplace keeps 8px and 12px. The bridge also hands + `--nldesign-component-heading-font-family` to the website's headings. - **Gemeente Zuiddrecht, a demo municipality.** The `zuiddrecht` token set is a light workplace: blue `#3669A5` for actions, red `#CC0000` as the accent, a white top bar and navigation, a grey workspace with white cards, Nextcloud's own radius scale and a diff --git a/README.md b/README.md index bcb3d6d55..8042ef192 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ Apply Dutch government design tokens (NL Design System) to your Nextcloud instan ## Features -- **59 token sets**: Choose from Dutch government design systems, including: +- **63 token sets**: Choose from Dutch government design systems, including: - Rijkshuisstijl (Dutch national government) - Gemeente Utrecht - Gemeente Amsterdam @@ -27,13 +27,13 @@ Apply Dutch government design tokens (NL Design System) to your Nextcloud instan - **No Build Required**: Tokens are pre-compiled CSS and fonts are bundled and self-hosted (no external CDN) -- **NL-Government and French-Government Icons**: Includes 1488 SVG icons sourced from `@conduction/nextcloud-vue`'s EUPL-compatible NL-government packs (RVO, OpenGemeenten, Gemeente Den Haag) plus 1038 SVG icons from the French-government DSFR pack (`@gouvfr/dsfr`, Etalab-2.0) — 2526 icons total — plus 41 organization and example logos, for use across all Nextcloud apps +- **NL-Government and French-Government Icons**: Includes 1488 SVG icons sourced from `@conduction/nextcloud-vue`'s EUPL-compatible NL-government packs (RVO, OpenGemeenten, Gemeente Den Haag) plus 1038 SVG icons from the French-government DSFR pack (`@gouvfr/dsfr`, Etalab-2.0) — 2526 icons total — plus 57 organization and example logos, for use across all Nextcloud apps - **Theme-switchable iconography**: The icon pack an app resolves through nldesign travels with the active design system — a French-government (`lasuite`) theme serves the DSFR pack, a Dutch-government theme serves the RVO/OpenGemeenten/Den Haag packs — resolved via `DesignSystemService` and advertised on the public capability (`iconPacks`). See `img/ICONS.md`. ## Icons -The app includes **2526 icons** across four government icon sets and **41 logos**: +The app includes **2526 icons** across four government icon sets and **57 logos**: - RVO, OpenGemeenten, Gemeente Den Haag — **1488 icons** (CC0-1.0 / CC0-1.0 / EUPL-1.2), materialized from `@conduction/nextcloud-vue` - DSFR (Système de Design de l'État) — **1038 icons** (**Etalab-2.0**), materialized from `@gouvfr/dsfr` @@ -55,10 +55,11 @@ Icon and logo filenames are a public API: other apps reference them by name (e.g git clone https://github.com/ConductionNL/thematiq.git ``` -2. Install npm dependencies (for fonts and icons): +2. Install the npm dependencies and build the fonts, the icons and the playground's + code editor (Node.js 20 or later, see [Development](#development)): ```bash cd thematiq - npm install + npm ci npm run build ``` @@ -254,16 +255,24 @@ nldesign/ ### Prerequisites -- Node.js 18+ -- npm +- Node.js 20 or later, with npm, for `npm ci` and `npm run build` +- Node.js 22.14 or later, or 24, for the test and lint tooling (Vitest, ESLint) — + the versions `package.json` declares under `engines` ### Setup ```bash -cd nldesign -npm install +cd thematiq +npm ci +npm run build ``` +`npm run build` also bundles the code editor of the playground's "Your components" +tab into `js/vendor/codeEditor.js` (gitignored). Without that file the tab still +works, with plain text fields. The +[developer guide](docs/reference/development.md#the-code-editor-bundle) explains why +this one file is built. + ### Updating Fonts The fonts are bundled and self-hosted (committed under `css/systems/nldesign/fonts/`), so no build step and no network access are required at runtime. To refresh them from the npm package: @@ -386,6 +395,7 @@ Contributions are welcome! Please feel free to submit a Pull Request. 5. Test in Nextcloud 6. Submit PR with documentation + ## Authors - [Conduction](https://conduction.nl) diff --git a/REUSE.toml b/REUSE.toml index 8f575308e..793fa4740 100644 --- a/REUSE.toml +++ b/REUSE.toml @@ -83,7 +83,10 @@ SPDX-FileCopyrightText = "2022 The Figtree Project Authors (https://github.com/e SPDX-License-Identifier = "OFL-1.1" [[annotations]] -path = "css/fonts/ibm-plex-mono-*" +path = [ + "css/fonts/ibm-plex-mono-*", + "css/systems/nldesign/fonts/ibm-plex-mono-*", +] precedence = "override" SPDX-FileCopyrightText = "2017 IBM Corp. with Reserved Font Name \"Plex\" (https://github.com/IBM/plex)" SPDX-License-Identifier = "OFL-1.1" @@ -134,6 +137,36 @@ precedence = "override" SPDX-FileCopyrightText = "2017 IBM Corp. with Reserved Font Name \"Plex\" (https://github.com/IBM/plex)" SPDX-License-Identifier = "OFL-1.1" +# The typefaces of the four school sets (openspec/changes/school-token-sets). +[[annotations]] +path = [ + "css/fonts/lexend-*", + "css/systems/nldesign/fonts/lexend-*", +] +precedence = "override" +SPDX-FileCopyrightText = "2019 The Lexend Project Authors (https://github.com/googlefonts/lexend)" +SPDX-License-Identifier = "OFL-1.1" + +[[annotations]] +path = [ + "css/fonts/red-hat-display-*", + "css/systems/nldesign/fonts/red-hat-display-*", + "css/fonts/red-hat-text-*", + "css/systems/nldesign/fonts/red-hat-text-*", +] +precedence = "override" +SPDX-FileCopyrightText = "2024 The Red Hat Project Authors (https://github.com/RedHatOfficial/RedHatFont)" +SPDX-License-Identifier = "OFL-1.1" + +[[annotations]] +path = [ + "css/fonts/barlow-*", + "css/systems/nldesign/fonts/barlow-*", +] +precedence = "override" +SPDX-FileCopyrightText = "2017 The Barlow Project Authors (https://github.com/jpt/barlow)" +SPDX-License-Identifier = "OFL-1.1" + # Intel Clear Sans is Apache-2.0, not OFL, so it travels with # LICENSES/Apache-2.0.txt and its own APACHE-2.0.txt beside the binaries. [[annotations]] @@ -163,6 +196,9 @@ SPDX-FileCopyrightText = [ "2011 The Roboto Project Authors (https://github.com/googlefonts/roboto-classic)", "2017 IBM Corp. with Reserved Font Name \"Plex\" (https://github.com/IBM/plex)", "2022 The Figtree Project Authors (https://github.com/erikdkennedy/figtree)", + "2019 The Lexend Project Authors (https://github.com/googlefonts/lexend)", + "2024 The Red Hat Project Authors (https://github.com/RedHatOfficial/RedHatFont)", + "2017 The Barlow Project Authors (https://github.com/jpt/barlow)", ] SPDX-License-Identifier = "OFL-1.1" @@ -225,3 +261,31 @@ path = "scripts/sources/denhaag/*.css" precedence = "override" SPDX-FileCopyrightText = "Gemeente Den Haag" SPDX-License-Identifier = "EUPL-1.2" + +# The Den Haag token set and the brand files it is generated from. These are +# COMPOSITE: the palette, the component mapping and the ramp are Den Haag's own +# values, read off the vendored CSS above, while the role layer around them and +# the --nldesign-* semantic layer are ours. Both halves are EUPL-1.2, so the +# licence identifier the blanket entry gives them was already right; the +# copyright line was not, because it named only us. Two holders, one licence. +# +# `precedence = "override"` for the same reason the entry above uses it: these +# files carry no SPDX header of their own (the CSS is written by +# scripts/generate-brand-set.mjs and an SPDX comment is not valid JSON), so +# without this they silently inherit a copyright line that leaves Den Haag out. +# +# css/tokens/rotterdam.css has the same shape with no entry of its own. That +# predates this change and is not fixed here. +[[annotations]] +path = [ + "css/tokens/denhaag.css", + "css/tokens/dark/denhaag.css", + "scripts/brands/denhaag.json", + "scripts/brands/denhaag.components.json", +] +precedence = "override" +SPDX-FileCopyrightText = [ + "2026 Conduction B.V. ", + "Gemeente Den Haag", +] +SPDX-License-Identifier = "EUPL-1.2" diff --git a/css/admin.css b/css/admin.css index 7b600168a..3b5429a56 100644 --- a/css/admin.css +++ b/css/admin.css @@ -866,16 +866,38 @@ } /* ========================================================================== - * Token editor — name, picker and revert on a single line + * Token editor — name, controls and revert on one line, the dark value under + * the controls. A grid rather than a wrapping flex row, so every row puts its + * controls and its revert button in the same place. * ========================================================================== */ .nldesign-token-row { - display: flex; - flex-wrap: wrap; + display: grid; + grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; - gap: 12px; + gap: 6px 12px; padding: 7px 0; border-bottom: 1px solid var(--color-border); } +/* Columns only, no rows: the revert button takes the last column of the + * controls' line, and the dark value lands under the controls on the next. */ +.nldesign-token-row > .nldesign-reset-btn { + grid-column: -2; +} +.nldesign-token-row > .nldesign-token-dark { + grid-column: -3; +} +.nldesign-token-row > .nldesign-motion-preview { + grid-column: 1 / -1; +} +/* A narrow screen puts the label above its controls. */ +@media (max-width: 768px) { + .nldesign-token-row { + grid-template-columns: minmax(0, 1fr) auto; + } + .nldesign-token-row > .nldesign-token-label-wrap { + grid-column: 1 / -1; + } +} /* A row the "primary drives every component" setting has taken ownership of. * * Dimmed rather than hidden: the stored value is still there and comes back the @@ -911,17 +933,26 @@ gap: 6px; flex: 0 0 auto; } -.nldesign-color-picker { - width: 34px; - height: 32px; +/* The picker lies, invisible, over the swatch: clicking the swatch opens it, + * and the swatch shows the focus ring the hidden input cannot. Under the + * settings id, to beat the margin and padding Nextcloud gives every input. */ +#nldesign-settings .nldesign-color-picker { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + margin: 0; padding: 0; - border: 1px solid var(--color-border); - border-radius: var(--border-radius); - background: none; + border: 0; + opacity: 0; cursor: pointer; } +#nldesign-settings .nldesign-color-picker:disabled { + cursor: not-allowed; +} .nldesign-color-text { width: 104px; + margin: 0; } .nldesign-text-input { width: 180px; @@ -930,9 +961,11 @@ /* Typed values (authoring-token-value-types): opacity, the dark line, motion. */ /* The swatch shows the colour over a checkerboard, so transparency is visible. */ .nldesign-color-swatch { + position: relative; + flex: none; display: inline-block; - width: 24px; - height: 24px; + width: var(--default-clickable-area, 34px); + height: var(--default-clickable-area, 34px); border: 1px solid var(--color-border); border-radius: var(--border-radius); background-color: var(--color-main-background); @@ -949,29 +982,46 @@ -4px 0; overflow: hidden; } -.nldesign-color-swatch > span { +.nldesign-color-swatch:focus-within { + outline: 2px solid var(--color-main-text); + outline-offset: 2px; +} +.nldesign-color-swatch-fill { display: block; width: 100%; height: 100%; } +.nldesign-color-opacity { + display: flex; + align-items: center; + gap: 6px; +} +.nldesign-color-opacity-label, +.nldesign-color-opacity-unit { + color: var(--color-text-maxcontrast); +} .nldesign-color-alpha { width: 80px; + margin: 0; } +/* Wide enough for "100" next to the browser's spin buttons. */ .nldesign-color-alpha-number { - width: 64px; + width: 76px; + margin: 0; } .nldesign-token-dark { display: flex; align-items: center; gap: 6px; - flex: 1 0 100%; - padding-left: 24px; } .nldesign-token-dark-label { color: var(--color-text-maxcontrast); } +/* The rest of the controls' width, so the derived value shows in full. */ .nldesign-dark-text { - width: 104px; + flex: 1; + min-width: 104px; + margin: 0; } .nldesign-duration-input, .nldesign-easing-input, @@ -2595,6 +2645,14 @@ margin: 0; } +.nldesign-documents-upload { + margin: 12px 0; +} + +.nldesign-documents-upload > label { + display: block; +} + .nldesign-file-pick__name { max-width: 220px; overflow: hidden; diff --git a/css/brand-stripe-header-only.css b/css/brand-stripe-header-only.css new file mode 100644 index 000000000..2c008573f --- /dev/null +++ b/css/brand-stripe-header-only.css @@ -0,0 +1,17 @@ +/** + * Brand stripe placement: the top bar only + * (openspec/changes/layout-options-navigation-stripe-watermark/specs/brand-stripe/spec.md). + * + * SPDX-License-Identifier: EUPL-1.2 + * SPDX-FileCopyrightText: 2026 Conduction B.V. + * + * Loaded after css/brand-stripe.css, only while the stripe is on and its + * placement resolves to `header`. The stripe keeps its one shared rule for + * the colours, the stops and the height; this sheet takes the login card's + * copy off again, at the weight and the selector the shared rule uses, so + * the later sheet wins. + */ +#body-login div[class*='login-box__wrapper']::before { + content: none !important; + display: none !important; +} diff --git a/css/brand-stripe-login-only.css b/css/brand-stripe-login-only.css new file mode 100644 index 000000000..95f7507f1 --- /dev/null +++ b/css/brand-stripe-login-only.css @@ -0,0 +1,18 @@ +/** + * Brand stripe placement: the login card only + * (openspec/changes/layout-options-navigation-stripe-watermark/specs/brand-stripe/spec.md). + * + * SPDX-License-Identifier: EUPL-1.2 + * SPDX-FileCopyrightText: 2026 Conduction B.V. + * + * Loaded after css/brand-stripe.css, only while the stripe is on and its + * placement resolves to `login`. The stripe keeps its one shared rule for + * the colours, the stops and the height; this sheet takes the top bar's + * copy off again, at the weight and the selector the shared rule uses, so + * the later sheet wins. The `--cn-brand-stripe-*` hand-over to the component + * library stays, so a portal header still draws the same bands. + */ +:where(body:not(#body-login)) #header::after { + content: none !important; + display: none !important; +} diff --git a/css/brand-stripe.css b/css/brand-stripe.css index 3e738bd9a..d6e49d7cb 100644 --- a/css/brand-stripe.css +++ b/css/brand-stripe.css @@ -19,6 +19,18 @@ * A set that declares none gets three equal bands in its primary colour, the * primary hover and the primary again, 4px high. * + * A MOTIF THAT IS NOT THREE BANDS. A set may name an image of its own in + * + * --nldesign-brand-stripe-image any background-image value + * + * and the stripe draws that instead of the three bands, in the same box and at + * the same height: the hanging twigs of wilgenboom, the canal and its bank of + * vaartveld, the slanted cut of esdoornveen, the five steps of the + * warmtepompacademie (openspec/changes/school-token-sets). The three colours + * stay declared, because the component library's stripe below reads only + * those. An image named by url() must be a data: URI: a relative path would + * resolve against this stylesheet, not against the token file that names it. + * * IT SITS INSIDE THE BAR, NOT UNDER IT. Nextcloud places the content exactly * one header height from the top, so a stripe hanging below the bar would lie * over the first pixels of every app, and raising `--header-height` moves @@ -78,12 +90,15 @@ z-index: 1; height: var(--nldesign-brand-stripe-height, 4px); pointer-events: none; - background-image: linear-gradient( - to right, - var(--thematiq-stripe-color-1) 0 var(--thematiq-stripe-stop-1), - var(--thematiq-stripe-color-2) var(--thematiq-stripe-stop-1) - var(--thematiq-stripe-stop-2), - var(--thematiq-stripe-color-3) var(--thematiq-stripe-stop-2) 100% + background-image: var( + --nldesign-brand-stripe-image, + linear-gradient( + to right, + var(--thematiq-stripe-color-1) 0 var(--thematiq-stripe-stop-1), + var(--thematiq-stripe-color-2) var(--thematiq-stripe-stop-1) + var(--thematiq-stripe-stop-2), + var(--thematiq-stripe-color-3) var(--thematiq-stripe-stop-2) 100% + ) ); } @@ -96,3 +111,40 @@ #body-login div[class*='login-box__wrapper']::before { top: 0; } + +/* + * The same stripe for the shared component library. Its `CnBrandStripe` reads + * its own `--cn-brand-stripe-*` properties and knows no theme, so the tokens + * are handed over here, with the fallbacks the stripe above uses. While the + * stripe is off this sheet is not loaded and the component draws its own + * default: one band in the primary colour. + */ +:root { + --cn-brand-stripe-color-1: var( + --nldesign-brand-stripe-color-1, + var(--color-primary-element) + ); + --cn-brand-stripe-color-2: var( + --nldesign-brand-stripe-color-2, + var(--color-primary-element-hover) + ); + --cn-brand-stripe-color-3: var( + --nldesign-brand-stripe-color-3, + var(--cn-brand-stripe-color-1) + ); + --cn-brand-stripe-ratio-1: var(--nldesign-brand-stripe-ratio-1, 1); + --cn-brand-stripe-ratio-2: var(--nldesign-brand-stripe-ratio-2, 1); + --cn-brand-stripe-ratio-3: var(--nldesign-brand-stripe-ratio-3, 1); + --cn-brand-stripe-height: var(--nldesign-brand-stripe-height, 4px); + /* + * The motif, when the set names one, and its variant for a dark band + * (openspec/changes/brand-motif-on-portals). No fallback: with the set + * silent both are the guaranteed-invalid value and the component draws its + * three bands, exactly as before. + */ + --cn-brand-stripe-image: var(--nldesign-brand-stripe-image); + --cn-brand-stripe-image-inverse: var( + --nldesign-brand-stripe-image-inverse, + var(--nldesign-brand-stripe-image) + ); +} diff --git a/css/fonts.css b/css/fonts.css index 55b44c263..6a03714fc 100644 --- a/css/fonts.css +++ b/css/fonts.css @@ -288,6 +288,7 @@ * IBM Plex Sans — OFL-1.1. * Copyright 2017 IBM Corp. with Reserved Font Name "Plex" (https://github.com/IBM/plex). * From @fontsource/ibm-plex-sans 5.3.0, latin subset. + * Medium (500) is there for esdoornveen, whose design uses four weights. */ @font-face { @@ -300,6 +301,16 @@ font-display: swap; } +@font-face { + font-family: 'IBM Plex Sans'; + src: + local('IBM Plex Sans Medium'), + url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + @font-face { font-family: 'IBM Plex Sans'; src: @@ -320,6 +331,238 @@ font-display: swap; } +/* + * IBM Plex Mono — OFL-1.1. + * Copyright 2017 IBM Corp. with Reserved Font Name "Plex" (https://github.com/IBM/plex). + * From @fontsource/ibm-plex-mono 5.3.0, latin subset. + * Codes such as crebo numbers and exam codes in the esdoornveen set. The 400 file keeps the name css/fonts-conduction.css has always linked; it is byte-identical to the package file ibm-plex-mono-latin-400-normal.woff2. + */ + +@font-face { + font-family: 'IBM Plex Mono'; + src: + local('IBM Plex Mono'), + url('fonts/ibm-plex-mono-latin-400.woff2') format('woff2'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'IBM Plex Mono'; + src: + local('IBM Plex Mono Medium'), + url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +/* + * Lexend — OFL-1.1. + * Copyright 2019 The Lexend Project Authors (https://github.com/googlefonts/lexend). + * From @fontsource/lexend 5.3.0, latin subset. + * Named by the wilgenboom set. + */ + +@font-face { + font-family: 'Lexend'; + src: + local('Lexend'), + url('fonts/lexend-latin-400-normal.woff2') format('woff2'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Lexend'; + src: + local('Lexend Medium'), + url('fonts/lexend-latin-500-normal.woff2') format('woff2'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Lexend'; + src: + local('Lexend SemiBold'), + url('fonts/lexend-latin-600-normal.woff2') format('woff2'); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Lexend'; + src: + local('Lexend Bold'), + url('fonts/lexend-latin-700-normal.woff2') format('woff2'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +/* + * Red Hat Display — OFL-1.1. + * Copyright 2024 The Red Hat Project Authors (https://github.com/RedHatOfficial/RedHatFont). + * From @fontsource/red-hat-display 5.3.0, latin subset. + * The heading face of the vaartveld set. + */ + +@font-face { + font-family: 'Red Hat Display'; + src: + local('Red Hat Display SemiBold'), + url('fonts/red-hat-display-latin-600-normal.woff2') format('woff2'); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Red Hat Display'; + src: + local('Red Hat Display Bold'), + url('fonts/red-hat-display-latin-700-normal.woff2') format('woff2'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Red Hat Display'; + src: + local('Red Hat Display ExtraBold'), + url('fonts/red-hat-display-latin-800-normal.woff2') format('woff2'); + font-weight: 800; + font-style: normal; + font-display: swap; +} + +/* + * Red Hat Text — OFL-1.1. + * Copyright 2024 The Red Hat Project Authors (https://github.com/RedHatOfficial/RedHatFont). + * From @fontsource/red-hat-text 5.3.0, latin subset. + * The text face of the vaartveld set. + */ + +@font-face { + font-family: 'Red Hat Text'; + src: + local('Red Hat Text'), + url('fonts/red-hat-text-latin-400-normal.woff2') format('woff2'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Red Hat Text'; + src: + local('Red Hat Text Medium'), + url('fonts/red-hat-text-latin-500-normal.woff2') format('woff2'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Red Hat Text'; + src: + local('Red Hat Text SemiBold'), + url('fonts/red-hat-text-latin-600-normal.woff2') format('woff2'); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Red Hat Text'; + src: + local('Red Hat Text Bold'), + url('fonts/red-hat-text-latin-700-normal.woff2') format('woff2'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +/* + * Barlow — OFL-1.1. + * Copyright 2017 The Barlow Project Authors (https://github.com/jpt/barlow). + * From @fontsource/barlow 5.3.0, latin subset. + * The text face of the warmtepompacademie set. + */ + +@font-face { + font-family: 'Barlow'; + src: + local('Barlow'), + url('fonts/barlow-latin-400-normal.woff2') format('woff2'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Barlow'; + src: + local('Barlow Medium'), + url('fonts/barlow-latin-500-normal.woff2') format('woff2'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Barlow'; + src: + local('Barlow SemiBold'), + url('fonts/barlow-latin-600-normal.woff2') format('woff2'); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Barlow'; + src: + local('Barlow Bold'), + url('fonts/barlow-latin-700-normal.woff2') format('woff2'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +/* + * Barlow Semi Condensed — OFL-1.1. + * Copyright 2017 The Barlow Project Authors (https://github.com/jpt/barlow). + * From @fontsource/barlow-semi-condensed 5.3.0, latin subset. + * The heading face of the warmtepompacademie set. + */ + +@font-face { + font-family: 'Barlow Semi Condensed'; + src: + local('Barlow Semi Condensed SemiBold'), + url('fonts/barlow-semi-condensed-latin-600-normal.woff2') format('woff2'); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Barlow Semi Condensed'; + src: + local('Barlow Semi Condensed Bold'), + url('fonts/barlow-semi-condensed-latin-700-normal.woff2') format('woff2'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + /* * Clear Sans — Apache-2.0. * Copyright 2012 Intel Corporation (https://github.com/intel/clear-sans). diff --git a/css/fonts/OFL.txt b/css/fonts/OFL.txt index c12e6b004..6073a5541 100644 --- a/css/fonts/OFL.txt +++ b/css/fonts/OFL.txt @@ -5,8 +5,13 @@ Open Sans: Copyright 2020 The Open Sans Project Authors (https://github.com/goog Lato: Copyright 2010-2011 by tyPoland Lukasz Dziedzic (team@latofonts.com) with Reserved Font Name "Lato" Roboto: Copyright 2011 The Roboto Project Authors (https://github.com/googlefonts/roboto-classic) IBM Plex Sans: Copyright 2017 IBM Corp. with Reserved Font Name "Plex" (https://github.com/IBM/plex) -Figtree: Copyright 2022 The Figtree Project Authors (https://github.com/erikdkennedy/figtree) IBM Plex Mono: Copyright 2017 IBM Corp. with Reserved Font Name "Plex" (https://github.com/IBM/plex) +Lexend: Copyright 2019 The Lexend Project Authors (https://github.com/googlefonts/lexend) +Red Hat Display: Copyright 2024 The Red Hat Project Authors (https://github.com/RedHatOfficial/RedHatFont) +Red Hat Text: Copyright 2024 The Red Hat Project Authors (https://github.com/RedHatOfficial/RedHatFont) +Barlow: Copyright 2017 The Barlow Project Authors (https://github.com/jpt/barlow) +Barlow Semi Condensed: Copyright 2017 The Barlow Project Authors (https://github.com/jpt/barlow) +Figtree: Copyright 2022 The Figtree Project Authors (https://github.com/erikdkennedy/figtree) licensed under the SIL Open Font License, Version 1.1. This license is copied below, and is also available with a FAQ at: diff --git a/css/fonts/barlow-latin-400-normal.woff2 b/css/fonts/barlow-latin-400-normal.woff2 new file mode 100644 index 000000000..3914af460 Binary files /dev/null and b/css/fonts/barlow-latin-400-normal.woff2 differ diff --git a/css/fonts/barlow-latin-500-normal.woff2 b/css/fonts/barlow-latin-500-normal.woff2 new file mode 100644 index 000000000..b1d06c6db Binary files /dev/null and b/css/fonts/barlow-latin-500-normal.woff2 differ diff --git a/css/fonts/barlow-latin-600-normal.woff2 b/css/fonts/barlow-latin-600-normal.woff2 new file mode 100644 index 000000000..b1a019f9d Binary files /dev/null and b/css/fonts/barlow-latin-600-normal.woff2 differ diff --git a/css/fonts/barlow-latin-700-normal.woff2 b/css/fonts/barlow-latin-700-normal.woff2 new file mode 100644 index 000000000..4ee6cd865 Binary files /dev/null and b/css/fonts/barlow-latin-700-normal.woff2 differ diff --git a/css/fonts/barlow-semi-condensed-latin-600-normal.woff2 b/css/fonts/barlow-semi-condensed-latin-600-normal.woff2 new file mode 100644 index 000000000..613e861ac Binary files /dev/null and b/css/fonts/barlow-semi-condensed-latin-600-normal.woff2 differ diff --git a/css/fonts/barlow-semi-condensed-latin-700-normal.woff2 b/css/fonts/barlow-semi-condensed-latin-700-normal.woff2 new file mode 100644 index 000000000..d96ddc1d7 Binary files /dev/null and b/css/fonts/barlow-semi-condensed-latin-700-normal.woff2 differ diff --git a/css/fonts/ibm-plex-mono-latin-500-normal.woff2 b/css/fonts/ibm-plex-mono-latin-500-normal.woff2 new file mode 100644 index 000000000..090f82f7e Binary files /dev/null and b/css/fonts/ibm-plex-mono-latin-500-normal.woff2 differ diff --git a/css/fonts/ibm-plex-sans-latin-500-normal.woff2 b/css/fonts/ibm-plex-sans-latin-500-normal.woff2 new file mode 100644 index 000000000..6d5527eef Binary files /dev/null and b/css/fonts/ibm-plex-sans-latin-500-normal.woff2 differ diff --git a/css/fonts/lexend-latin-400-normal.woff2 b/css/fonts/lexend-latin-400-normal.woff2 new file mode 100644 index 000000000..a65647312 Binary files /dev/null and b/css/fonts/lexend-latin-400-normal.woff2 differ diff --git a/css/fonts/lexend-latin-500-normal.woff2 b/css/fonts/lexend-latin-500-normal.woff2 new file mode 100644 index 000000000..57a4bae04 Binary files /dev/null and b/css/fonts/lexend-latin-500-normal.woff2 differ diff --git a/css/fonts/lexend-latin-600-normal.woff2 b/css/fonts/lexend-latin-600-normal.woff2 new file mode 100644 index 000000000..38cdff617 Binary files /dev/null and b/css/fonts/lexend-latin-600-normal.woff2 differ diff --git a/css/fonts/lexend-latin-700-normal.woff2 b/css/fonts/lexend-latin-700-normal.woff2 new file mode 100644 index 000000000..1639b3445 Binary files /dev/null and b/css/fonts/lexend-latin-700-normal.woff2 differ diff --git a/css/fonts/red-hat-display-latin-600-normal.woff2 b/css/fonts/red-hat-display-latin-600-normal.woff2 new file mode 100644 index 000000000..b7d73a0ce Binary files /dev/null and b/css/fonts/red-hat-display-latin-600-normal.woff2 differ diff --git a/css/fonts/red-hat-display-latin-700-normal.woff2 b/css/fonts/red-hat-display-latin-700-normal.woff2 new file mode 100644 index 000000000..1e9484f34 Binary files /dev/null and b/css/fonts/red-hat-display-latin-700-normal.woff2 differ diff --git a/css/fonts/red-hat-display-latin-800-normal.woff2 b/css/fonts/red-hat-display-latin-800-normal.woff2 new file mode 100644 index 000000000..a162d3e9a Binary files /dev/null and b/css/fonts/red-hat-display-latin-800-normal.woff2 differ diff --git a/css/fonts/red-hat-text-latin-400-normal.woff2 b/css/fonts/red-hat-text-latin-400-normal.woff2 new file mode 100644 index 000000000..f679845ee Binary files /dev/null and b/css/fonts/red-hat-text-latin-400-normal.woff2 differ diff --git a/css/fonts/red-hat-text-latin-500-normal.woff2 b/css/fonts/red-hat-text-latin-500-normal.woff2 new file mode 100644 index 000000000..3881ce0b9 Binary files /dev/null and b/css/fonts/red-hat-text-latin-500-normal.woff2 differ diff --git a/css/fonts/red-hat-text-latin-600-normal.woff2 b/css/fonts/red-hat-text-latin-600-normal.woff2 new file mode 100644 index 000000000..c963fbd1f Binary files /dev/null and b/css/fonts/red-hat-text-latin-600-normal.woff2 differ diff --git a/css/fonts/red-hat-text-latin-700-normal.woff2 b/css/fonts/red-hat-text-latin-700-normal.woff2 new file mode 100644 index 000000000..ff78f0523 Binary files /dev/null and b/css/fonts/red-hat-text-latin-700-normal.woff2 differ diff --git a/css/header-workplace.css b/css/header-workplace.css new file mode 100644 index 000000000..5b309194a --- /dev/null +++ b/css/header-workplace.css @@ -0,0 +1,315 @@ +/** + * Header style: workplace + * (openspec/changes/header-style-workplace/specs/workplace-layout/spec.md). + * + * SPDX-License-Identifier: EUPL-1.2 + * SPDX-FileCopyrightText: 2026 Conduction B.V. + * + * Loaded only while the header style resolves to `workplace`: an + * administrator chose it, or the active token set names it in its `layout` + * block and the administrator left the choice to the theme. A set that names + * nothing never loads it, so its top bar is Nextcloud's own. + * + * WHAT IT DRAWS (the DqKop board). The bar of a workplace whose app + * navigation carries the brand: no wordmark and no current-app name in the + * bar, the app grid button at the start, the search field right beside it, + * and at the end the bell, a thin divider and the person who is signed in: + * an initials avatar, the name in bold, the role in grey and a chevron. + * + * The bar's height, colours and the look of the grid button and the search + * field come from the workplace layout (css/workplace-layout.css); this sheet + * only places them. No colour is written: every value reads a token, with + * Nextcloud's own variable behind it. + * + * THE NAME AND THE ROLE. Nextcloud's account menu shows only an avatar. The + * small script js/header-user.js, loaded with this sheet, adds a label inside + * that menu with the name and the profile's role, and marks the bar with + * `data-thematiq-user-chip`. Only then is Nextcloud's own avatar hidden and + * its button stretched over the label, so the label opens the real menu with + * its real name for assistive technology. Without the script (or before it + * ran) the bar shows Nextcloud's avatar as always. + */ + +body:not(#body-login) #header { + gap: 16px; + padding-inline: 28px; +} + +/* No wordmark and no current-app name: the app navigation carries the brand. */ +body:not(#body-login) #header #nextcloud, +body:not(#body-login) #header .app-menu__current-app { + display: none !important; +} + +body:not(#body-login) #header .header-start { + flex: 0 0 auto; +} + +body:not(#body-login) #header .app-menu, +body:not(#body-login) #header .app-menu > div { + margin: 0 !important; + padding: 0 !important; +} + +body:not(#body-login) #header .app-menu__waffle.button-vue { + margin-inline: 0 !important; +} + +body:not(#body-login) #header .header-end { + flex: 1 1 auto; + gap: 12px; + align-items: center; + padding: 0 !important; +} + +/* The search field right after the grid button, as wide as the board draws + * it, instead of centred over the whole bar. */ +body:not(#body-login) #header .unified-search-menu { + flex: 1 1 360px; + max-width: 560px; + margin-inline-end: auto; +} + +body:not(#body-login) #header .unified-search-input { + position: static !important; + flex: 1 1 auto; + max-width: none !important; + padding: 0 !important; + width: 100% !important; + margin: 0 !important; +} + +body:not(#body-login) #header .unified-search-input__button { + width: 100% !important; + margin: 0 !important; + padding: 0 14px !important; + justify-content: flex-start !important; + gap: 10px !important; +} + +/* The board's line icons: the magnifier and the bell are drawn as outlines + * (a mask in the text colour), where Nextcloud draws filled ones. The mask + * carries only a shape; its colour is the element's own. */ +body:not(#body-login) #header .unified-search-input__icon { + width: 18px !important; + height: 18px !important; + background-color: var(--color-text-maxcontrast) !important; + -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") + center / contain no-repeat !important; + mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") + center / contain no-repeat !important; +} + +body:not(#body-login) #header .unified-search-input__icon svg, +body:not(#body-login) #header .notifications-button__icon svg { + visibility: hidden; +} + +body:not(#body-login) #header .unified-search-input__label { + font-size: 15px !important; + font-weight: 400 !important; + color: var(--color-text-maxcontrast) !important; +} + +/* The bell: a 40px round button with a 22px icon, the unread dot in the + * accent. */ +body:not(#body-login) #header .header-end > #notifications { + display: flex; + align-items: center; + gap: 12px; + width: auto !important; + height: var(--header-height); +} + +body:not(#body-login) #header .header-end > #notifications > .header-menu { + display: flex; + align-items: center; + justify-content: center; + width: auto !important; + height: 100%; +} + +body:not(#body-login) #header #notifications .header-menu__trigger { + --button-size: 40px; + + width: 40px !important; + min-width: 40px !important; + height: 40px !important; + min-height: 40px !important; + position: relative !important; + inset-inline-start: 0 !important; + margin: 0 !important; + padding: 0 !important; + border-radius: 20px !important; +} + +body:not(#body-login) #header .notifications-button__icon { + display: block; + width: 22px !important; + height: 22px !important; + background-color: currentColor !important; + -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16V11a6 6 0 1 1 12 0v5l1.5 2h-15zM10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E") + center / contain no-repeat !important; + mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16V11a6 6 0 1 1 12 0v5l1.5 2h-15zM10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E") + center / contain no-repeat !important; +} + +body:not(#body-login) #header .notifications-button__icon svg { + width: 22px !important; + height: 22px !important; +} + +/* The unread dot: Nextcloud draws its bell with a dot only while there is + * something new; then the board's dot sits on the bell's shoulder, the + * accent with a ring of the bar's own colour. */ +body:not(#body-login) + #header + #notifications + .header-menu__trigger:has(.notification__dot)::after { + content: ''; + position: absolute; + top: 7px; + right: 8px; + width: 9px; + height: 9px; + border: 2px solid var(--color-main-background); + border-radius: 50%; + background-color: var(--nldesign-color-accent, var(--color-error)); + pointer-events: none; +} + +/* The thin divider between the bell and the person. */ +body:not(#body-login) #header .header-end > #notifications::after { + content: ''; + flex: none; + width: 1px; + height: 28px; + background-color: var(--color-border); +} + +/* The board's bar has no contacts menu. */ +body:not(#body-login) #header #contactsmenu { + display: none !important; +} + +/* The person: only once the script has added the label. */ +body:not(#body-login) #header[data-thematiq-user-chip] #user-menu { + position: relative; + display: flex; + align-items: center; + width: auto !important; + height: var(--header-height); + margin-inline-end: 0; +} + +body:not(#body-login) + #header[data-thematiq-user-chip] + #user-menu + > .header-menu__trigger { + position: absolute !important; + inset: calc((var(--header-height) - 48px) / 2) 0 auto 0; + width: 100% !important; + height: 48px !important; + min-height: 48px !important; + margin: 0 !important; + border-radius: 24px !important; + opacity: 1; + z-index: 1; +} + +body:not(#body-login) + #header[data-thematiq-user-chip] + #user-menu + > .header-menu__trigger + .account-menu__avatar { + visibility: hidden !important; + opacity: 0 !important; +} + +#header .thematiq-user-chip { + display: flex; + align-items: center; + gap: 10px; + height: 48px; + padding: 0 8px 0 4px; + color: var(--color-main-text) !important; + font-size: 15px; + line-height: 1.2; + white-space: nowrap; + pointer-events: none; +} + +#header .thematiq-user-chip__avatar { + display: flex; + flex: none; + align-items: center; + justify-content: center; + width: 38px; + height: 38px; + border-radius: 19px; + background-color: var( + --nldesign-color-primary-light, + var(--color-primary-element-light) + ); + color: var( + --nldesign-color-primary-hover, + var(--color-primary-element-light-text) + ) !important; + font-size: 14px; + font-weight: 700; +} + +#header .thematiq-user-chip__text { + display: flex; + flex-direction: column; + align-items: flex-start; +} + +#header .thematiq-user-chip__name { + color: var(--color-main-text) !important; + font-size: 15px; + font-weight: 700; +} + +#header .thematiq-user-chip__role { + color: var(--color-text-maxcontrast) !important; + font-size: 13px; +} + +#header .thematiq-user-chip__chevron { + flex: none; + width: 16px; + height: 16px; + fill: none !important; + stroke: currentColor; +} + +/* A narrow screen keeps the avatar and drops the words. */ +@media (max-width: 1024px) { + #header .thematiq-user-chip__text { + display: none; + } +} + +body:not(#body-login) #header .thematiq-user-chip__chevron path { + fill: none !important; + stroke: currentColor !important; +} + +/* In the dark the set's hover blue stays a light-scheme value (#234A78 on a + * dark tint is unreadable), so the avatar takes Nextcloud's own tint pair, + * which Nextcloud keeps readable in every scheme. */ +@media (prefers-color-scheme: dark) { + body:not([data-theme-light]):not([data-themes*='light']) + #header + .thematiq-user-chip__avatar { + background-color: var(--color-primary-element-light); + color: var(--color-primary-element-light-text) !important; + } +} + +body[data-theme-dark] #header .thematiq-user-chip__avatar, +body[data-themes*='dark'] #header .thematiq-user-chip__avatar { + background-color: var(--color-primary-element-light); + color: var(--color-primary-element-light-text) !important; +} diff --git a/css/login-watermark-off.css b/css/login-watermark-off.css new file mode 100644 index 000000000..1a572b5ee --- /dev/null +++ b/css/login-watermark-off.css @@ -0,0 +1,17 @@ +/** + * Login watermark: off + * (openspec/changes/layout-options-navigation-stripe-watermark/specs/workplace-layout/spec.md). + * + * SPDX-License-Identifier: EUPL-1.2 + * SPDX-FileCopyrightText: 2026 Conduction B.V. + * + * Loaded after css/workplace-layout.css, only while the layout is light and + * the login watermark resolves to off: an administrator switched it off, or + * the active token set says so in its `layout` block. The watermark rule in + * the layout sheet stays as it is; this sheet takes the mark off the login + * page again, on the same pseudo-element, so the later sheet wins. + */ +body#body-login::before { + content: none !important; + background-image: none !important; +} diff --git a/css/navigation-active-soft.css b/css/navigation-active-soft.css new file mode 100644 index 000000000..12dcae3f5 --- /dev/null +++ b/css/navigation-active-soft.css @@ -0,0 +1,53 @@ +/** + * Selected navigation entry: soft tint with a bold label + * (openspec/changes/layout-options-navigation-stripe-watermark/specs/workplace-layout/spec.md). + * + * SPDX-License-Identifier: EUPL-1.2 + * SPDX-FileCopyrightText: 2026 Conduction B.V. + * + * Loaded only while the selected entry's style resolves to `soft`: an + * administrator chose it, or the active token set names it in its `layout` + * block and the administrator left the choice to the theme. Off for every + * other set, which keeps the entry as Nextcloud draws it. + * + * The entry you are on becomes a flat wash of the accent's light tint with + * the accent's dark text as a bold label, the way the Zuiddrecht workplace + * boards draw it (DqZijbalk: #A30000 on #FCEDEC, 600). A set that names no + * accent falls back to its primary tint and its primary, the pair every set + * already reaches AA on (the primary on the primary-light wash). Every colour + * is a token, so the generated dark variant keeps up on its own. + * + * The selectors carry the navigation id, as element-overrides.css does: the + * component's own rules are scoped and injected after this sheet, so a bare + * class would lose on specificity and on order. + */ +#app-navigation .app-navigation-entry:not(.app-navigation-entry--legacy).active, +#app-navigation-vue .app-navigation-entry:not(.app-navigation-entry--legacy).active, +.app-navigation .app-navigation-entry:not(.app-navigation-entry--legacy).active { + background-color: var( + --nldesign-color-accent-light, + var(--nldesign-color-primary-light, var(--color-primary-element-light)) + ) !important; +} + +#app-navigation .app-navigation-entry.active .app-navigation-entry-link, +#app-navigation-vue .app-navigation-entry.active .app-navigation-entry-link, +.app-navigation .app-navigation-entry.active .app-navigation-entry-link { + font-weight: 600; + color: var( + --nldesign-color-accent-text, + var( + --nldesign-component-navigation-active-color, + var(--nldesign-color-primary, var(--color-primary-element)) + ) + ) !important; +} + +/* The soft entry is a wash and a label, nothing more: the 3px bar Nextcloud + * 34 draws on the selected entry's leading edge (`::before`) is not part of + * it (DqZijbalk draws none). */ +#app-navigation .app-navigation-entry.active::before, +#app-navigation-vue .app-navigation-entry.active::before, +.app-navigation .app-navigation-entry.active::before { + display: none !important; +} diff --git a/css/navigation-width.css b/css/navigation-width.css new file mode 100644 index 000000000..6e2d79c0f --- /dev/null +++ b/css/navigation-width.css @@ -0,0 +1,38 @@ +/** + * Navigation width + * (openspec/changes/layout-options-navigation-stripe-watermark/specs/workplace-layout/spec.md). + * + * SPDX-License-Identifier: EUPL-1.2 + * SPDX-FileCopyrightText: 2026 Conduction B.V. + * + * Loaded only while a navigation width resolves: an administrator stored + * one, or the active token set names one in its `layout` block and the + * administrator left the choice to the theme. Off for every other set, which + * keeps the width Nextcloud gives the panel. + * + * THE WIDTH ITSELF IS NOT IN THIS FILE. The page carries it as one inline + * `:root` variable, `--thematiq-navigation-width`, emitted next to this link + * (and replaced in place by the admin page when the choice changes), so this + * sheet stays static and cacheable. + * + * Three readers are served. Nextcloud sizes the panel and positions the + * content from `--navigation-width`, which theme-scopes.css maps from the + * thematiq global; both are set from the inline value. The panel's own + * component rule then sizes it again from a literal, so the width is said + * outright on the panel as well, with the weight the component rule carries + * (measured 6 October 2026: a variable alone left the panel at 300px). + */ +:root { + --nldesign-nc-navigation-width: var(--thematiq-navigation-width); + --thematiq-global-navigation-width: var(--thematiq-navigation-width); + --navigation-width: var(--thematiq-navigation-width); +} + +#app-navigation-vue, +.app-navigation { + --navigation-width: var(--thematiq-navigation-width); + + width: var(--thematiq-navigation-width) !important; + min-width: var(--thematiq-navigation-width) !important; + flex: 0 0 var(--thematiq-navigation-width) !important; +} diff --git a/css/playground.css b/css/playground.css index 0fcc19261..d6b7ef592 100644 --- a/css/playground.css +++ b/css/playground.css @@ -361,6 +361,16 @@ display: none !important; } +/* While a component is open, only its own rows are offered: the editor's + component-variable groups belong to no one component. */ +.nldesign-pg-in-component .nldesign-token-groups { + display: none; +} + +.nldesign-pg-advanced { + margin-top: 12px; +} + .nldesign-pg-panel-head { display: flex; align-items: center; @@ -379,9 +389,21 @@ text-decoration: underline; } +/* A component's row has a fourth column, what the token paints, between the + label and the controls of the editor's own grid (css/admin.css). */ +@media (min-width: 769px) { + .nldesign-token-row.nldesign-pg-row { + grid-template-columns: minmax(0, 1fr) 190px auto auto; + } + /* A row with no token is a label and the reason. Across the content-sized + columns above, the long reason took them over and squeezed the label to a + word a line, under the text; two shared columns keep both readable. */ + .nldesign-token-row.nldesign-pg-row.nldesign-pg-row-fixed { + grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); + } +} + .nldesign-pg-paints { - flex: none; - width: 190px; color: var(--color-text-maxcontrast); font-size: 14px; } @@ -390,8 +412,9 @@ color: var(--color-text-maxcontrast); } +/* A row with no token explains why, across every column after the label. */ .nldesign-pg-why { - flex: 1; + grid-column: 2 / -1; color: var(--color-text-maxcontrast); font-size: 14px; } @@ -2483,6 +2506,21 @@ } /* Your component (authoring-own-markup-preview): two fields, the frame, the reports. */ +/* The name on the left, "Edit" on the right, as a shipped component's title. */ +.nldesign-own-head { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 12px; +} +.nldesign-own-edit[aria-expanded='true'] { + background-color: var(--color-primary-element-light); +} +/* Both carry a display of their own, which beats the hidden attribute. */ +.nldesign-own-fields[hidden], +.nldesign-own-save[hidden] { + display: none; +} .nldesign-own-fields { display: grid; gap: 4px; @@ -2496,6 +2534,37 @@ .nldesign-own-label { font-weight: 600; } +/* The code editor (src/codeEditor.js) over a field. CodeMirror brings its own + styles; nextcloud-vue's stylesheet is not on this page, so the border that + makes it read as a field is drawn here, the way the text area's is. */ +.nldesign-code-editor { + overflow: hidden; + border: 2px solid var(--color-border-maxcontrast); + border-radius: var(--border-radius-large); +} +.nldesign-code-editor:focus-within { + border-color: var(--color-main-text); +} +/* The editor takes the height CnJsonViewer gives its wrapper and scrolls inside + it; nextcloud-vue's stylesheet, which normally says so, is not on this page. */ +#nldesign-settings .nldesign-code-editor .cm-editor { + height: 100%; +} +#nldesign-settings .nldesign-code-editor .cm-scroller { + overflow: auto; +} +/* Nextcloud draws every editable div as a text field. CodeMirror's editing area + is one, so without this it is a small bordered box on the first line instead + of the whole editor, and a click below the last line misses it. */ +#nldesign-settings .nldesign-code-editor .cm-content { + min-height: 100%; + margin: 0; + padding: 4px 0; + border: 0; + border-radius: 0; + background: none; + box-shadow: none; +} .nldesign-own-frame { display: block; width: 100%; @@ -2510,15 +2579,52 @@ .nldesign-own-report { color: var(--color-text-maxcontrast); } +.nldesign-own-org-start { + display: flex; + align-items: center; + gap: 8px; + color: var(--color-text-maxcontrast); +} +.nldesign-own-org .nldesign-reset-btn[aria-busy='true'] { + cursor: progress; +} .nldesign-own-contrast { margin: 0; padding-left: 18px; } +/* The stage's footer: the name with Save on the left, Remove on its own on the + right, apart from it, under a rule. */ .nldesign-own-save { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; + margin-top: 12px; + padding-top: 12px; + border-top: 1px solid var(--color-border); +} +.nldesign-own-save .nldesign-own-name { + margin: 0; +} +/* Saving is the primary action, in the primary colour (which follows a live + edit of it, see js/admin.js writeLiveToken()); removing is the destructive one, + in Nextcloud's error red. Under the settings id, to beat core's button rule. */ +#nldesign-settings .nldesign-own-save-btn { + background-color: var(--color-primary-element); + color: var(--color-primary-element-text); +} +#nldesign-settings .nldesign-own-save-btn:hover, +#nldesign-settings .nldesign-own-save-btn:focus-visible { + background-color: var(--color-primary-element-hover); +} +#nldesign-settings .nldesign-own-remove { + margin-left: auto; + background-color: var(--color-error); + color: #ffffff; +} +#nldesign-settings .nldesign-own-remove:hover, +#nldesign-settings .nldesign-own-remove:focus-visible { + background-color: var(--color-error-hover, var(--color-error)); } .nldesign-own-error { color: var(--color-text-error, var(--color-error)); diff --git a/css/public-bridge.css b/css/public-bridge.css index 836912c50..8c7e0221e 100644 --- a/css/public-bridge.css +++ b/css/public-bridge.css @@ -23,11 +23,12 @@ * * MEASURED COVERAGE (a test recomputes these from token-sets.json and * css/tokens/, and fails when they drift): - * coverage: listed=59 roleLayer=25 nldesignOnly=12 denhaagComponents=17 - * Of the listed sets, 25 carry the full `--utrecht-*` role layer, 12 declare - * only `--nldesign-*`, and 17 declare Den Haag component properties. No set - * declares a case card property; the Den Haag section at the end of this - * block gives every set one. + * coverage: listed=63 roleLayer=26 nldesignOnly=15 denhaagComponents=18 + * Of the listed sets, 26 carry the full `--utrecht-*` role layer, 15 declare + * only `--nldesign-*`, and 18 declare Den Haag component properties. Two sets + * declare a case card property of their own, `cunningham` and `denhaag`; the + * Den Haag section at the end of this block gives every other set one, and + * fills the properties those two leave out. * * WHO LINKS THIS FILE. Portaliq does not link it yet. Its change * `site-links-the-theme-bridge` (portaliq, open) adds the link, before the set. @@ -70,11 +71,15 @@ * reads its OWN token — setting only `--utrecht-heading-color` leaves every * numbered level unstyled, which is how a page ends up with one styled * heading and five browser-default ones. + * + * A set with a heading face of its own names it in + * `--nldesign-component-heading-font-family`, the token Nextcloud's + * headings already read (vaartveld: Red Hat Display over Red Hat Text). + * A set that names none keeps its one family for both. */ --utrecht-heading-font-family: var( - --nldesign-font-family, - system-ui, - sans-serif + --nldesign-component-heading-font-family, + var(--nldesign-font-family, system-ui, sans-serif) ); --utrecht-heading-color: var(--nldesign-color-text, #1b1b23); --utrecht-heading-1-color: var(--nldesign-color-text, #1b1b23); @@ -84,21 +89,45 @@ --utrecht-heading-5-color: var(--nldesign-color-text, #1b1b23); --utrecht-heading-6-color: var(--nldesign-color-text, #1b1b23); --utrecht-heading-1-font-family: var( - --nldesign-font-family, - system-ui, - sans-serif + --nldesign-component-heading-font-family, + var(--nldesign-font-family, system-ui, sans-serif) ); --utrecht-heading-2-font-family: var( - --nldesign-font-family, - system-ui, - sans-serif + --nldesign-component-heading-font-family, + var(--nldesign-font-family, system-ui, sans-serif) ); --utrecht-heading-3-font-family: var( - --nldesign-font-family, - system-ui, - sans-serif + --nldesign-component-heading-font-family, + var(--nldesign-font-family, system-ui, sans-serif) ); + /* + * Website corners (openspec/changes/school-token-sets). + * + * The workplace keeps Nextcloud's radius scale (8px controls, 12px + * cards), so a set's `--nldesign-border-radius` cannot also be the + * website's. A set whose website is rounder or squarer than its workplace + * names the website's two radii here, and only this file reads them: it + * is linked by a public portal and never on an instance page. + * + * --nldesign-website-border-radius buttons and form fields + * --nldesign-website-border-radius-large cards, dialogs and messages + * + * NO FALLBACK, ON PURPOSE. For a set that names neither, each role below + * resolves to the guaranteed-invalid value, which a consumer's + * `var(--utrecht-button-border-radius, 8px)` treats exactly as an unset + * property, so its own fallback still applies and no existing portal + * changes. A set that declares a role itself loads after this file and + * keeps its value. + */ + --utrecht-button-border-radius: var(--nldesign-website-border-radius); + --utrecht-textbox-border-radius: var(--nldesign-website-border-radius); + --utrecht-textarea-border-radius: var(--nldesign-website-border-radius); + --utrecht-select-border-radius: var(--nldesign-website-border-radius); + --utrecht-form-control-border-radius: var(--nldesign-website-border-radius); + --utrecht-border-radius-md: var(--nldesign-website-border-radius-large); + --utrecht-alert-border-radius: var(--nldesign-website-border-radius-large); + /* Links */ --utrecht-link-color: var( --nldesign-color-link, @@ -331,6 +360,909 @@ --nldesign-hero-title-color: var(--nldesign-color-primary-text, #fff); --nldesign-hero-body-color: var(--nldesign-color-primary-light, #eee); + /* + * THE ROLE LAYER THE PORTAL SITE READS (openspec/changes/brand-motif-on-portals). + * + * A set that declares only `--nldesign-*` (zuiddrecht, the four school + * sets, and every set the coverage line above counts as nldesignOnly) used + * to reach the site with 116 of the 489 component roles it reads, against + * 489 for an `example-*` set that carries its own role layer. Measured on a + * portal with `wilgenboom` in place of `example-basisschool`: no logo, the + * header and the DigiD button in browser defaults, the footer without its + * padding. A portal that moved to a school set looked worse than before. + * + * So the roles the site reads are named here, once, for every set: + * + * colours from the set's `--nldesign-*` layer, each with a fallback; + * logos from `--nldesign-logo-url`, which the portal resolves to an + * absolute address, and the set's light logo for the footer; + * geometry (spacing, sizes, the type scale) as neutral values, the scale + * of the reference implementation the vendored CSS came from. + * + * A set with a role layer of its own loads after this file and keeps every + * value it declares; tests/vitest/publicBridgeRoleLayer.spec.js holds the + * list to what the site reads and the `example-*` sets to their own values. + */ + + /* Logos. The footer band is dark, so it takes the light variant the + * portal names in --nldesign-logo-inverse-url when the set ships one. */ + --conduction-logo-header-background-image: var(--nldesign-logo-url, none); + --conduction-logo-navbar-background-image: var(--nldesign-logo-url, none); + --conduction-logo-footer-background-image: var( + --nldesign-logo-inverse-url, + var(--nldesign-logo-url, none) + ); + --conduction-logo-header-block-size: var(--nldesign-website-logo-height, 50px); + --conduction-logo-header-inline-size: var(--nldesign-website-logo-width, 96px); + --conduction-logo-navbar-block-size: var(--nldesign-website-logo-height, 50px); + --conduction-logo-navbar-inline-size: var(--nldesign-website-logo-width, 96px); + --conduction-logo-footer-block-size: var(--nldesign-website-logo-height, 50px); + --conduction-logo-footer-inline-size: var(--nldesign-website-logo-width, 96px); + /* + * A logo that carries the organisation's name (a wordmark) makes the site + * title beside it a second copy. Such a set says so with + * `--nldesign-website-logo-text-size: 0`; the portal then keeps the title + * for screen readers only. No fallback: unset keeps the portal's size. + */ + --thematiq-logo-text-font-size: var(--nldesign-website-logo-text-size); + + /* The dropdown under a menu item */ + --conduction-primary-top-nav-dropdown-background-color: var( + --nldesign-color-background, + #fff + ); + --conduction-primary-top-nav-dropdown-color: var(--nldesign-color-text, #1b1b23); + --conduction-primary-top-nav-dropdown-current-background-color: var( + --nldesign-color-primary-light, + #eee + ); + --conduction-primary-top-nav-dropdown-current-color: var( + --nldesign-color-text, + #1b1b23 + ); + --conduction-primary-top-nav-dropdown-hover-background-color: var( + --nldesign-color-background-hover, + #f0f0f3 + ); + --conduction-primary-top-nav-dropdown-hover-color: var( + --nldesign-color-text, + #1b1b23 + ); + --conduction-tooltip-background-color: var(--nldesign-color-text, #1b1b23); + --conduction-tooltip-color: var(--nldesign-color-background, #fff); + + /* The tilburg roles the site's own components read */ + --tilburg-color-dark-alpha-50: rgba(0, 0, 0, 0.05); + --tilburg-color-extra-purple: var(--nldesign-color-primary, #1b1b23); + --tilburg-color-green-100: var( + --nldesign-component-status-badge-success-background-color, + rgba(var(--nldesign-color-success-rgb, 57, 135, 12), 0.12) + ); + --tilburg-color-green-300: var(--nldesign-color-success, #39870c); + --tilburg-color-orange-100: var( + --nldesign-component-status-badge-warning-background-color, + rgba(var(--nldesign-color-warning-rgb, 225, 112, 0), 0.12) + ); + --tilburg-color-orange-300: var(--nldesign-color-warning, #e17000); + --tilburg-color-pink-100: var(--nldesign-color-primary-light, #eee); + --tilburg-color-pink-200: var( + --nldesign-color-primary-light-hover, + var(--nldesign-color-primary-light, #ddd) + ); + --tilburg-color-pink-300: var(--nldesign-color-primary, #1b1b23); + --tilburg-color-pink-400: var( + --nldesign-color-primary-hover, + var(--nldesign-color-primary, #1b1b23) + ); + --tilburg-color-red-100: var( + --nldesign-component-status-badge-error-background-color, + rgba(var(--nldesign-color-error-rgb, 213, 43, 30), 0.12) + ); + --tilburg-color-red-300: var(--nldesign-color-error, #d52b1e); + --tilburg-color-red-400: var( + --nldesign-color-error-hover, + var(--nldesign-color-error, #d52b1e) + ); + --tilburg-document-color: var(--nldesign-color-text, #1b1b23); + --tilburg-document-inverse-color: var(--nldesign-color-primary-text, #fff); + --tilburg-document-subtle-color: var(--nldesign-color-text-muted, #75758a); + --tilburg-feedback-informative-color: var( + --nldesign-color-info, + var(--nldesign-color-primary, #1b1b23) + ); + --tilburg-feedback-negative-color: var(--nldesign-color-error, #d52b1e); + --tilburg-feedback-positive-color: var(--nldesign-color-success, #39870c); + --tilburg-feedback-warning-border-color: var(--nldesign-color-warning, #e17000); + --tilburg-feedback-warning-color: var(--nldesign-color-warning, #e17000); + --tilburg-focus-background-color: var(--nldesign-color-primary-light, #eee); + --tilburg-focus-color: var(--nldesign-color-text, #1b1b23); + --tilburg-form-control-background-color: var(--nldesign-color-background, #fff); + --tilburg-form-control-border-color: var( + --nldesign-color-border-dark, + var(--nldesign-color-background-darker, #8a929e) + ); + --tilburg-form-control-color: var(--nldesign-color-text, #1b1b23); + --tilburg-form-control-disabled-color: var(--nldesign-color-text-muted, #75758a); + --tilburg-form-control-focus-color: var(--nldesign-color-text, #1b1b23); + --tilburg-form-control-hover-color: var(--nldesign-color-text, #1b1b23); + --tilburg-form-control-placeholder-color: var( + --nldesign-color-text-muted, + #75758a + ); + --tilburg-form-control-read-only-color: var(--nldesign-color-text, #1b1b23); + --tilburg-heading-color: var(--nldesign-color-text, #1b1b23); + --tilburg-interaction-active-color: var( + --nldesign-color-link-hover, + var(--nldesign-color-primary, #1b1b23) + ); + --tilburg-interaction-color: var( + --nldesign-color-link, + var(--nldesign-color-primary, #1b1b23) + ); + --tilburg-interaction-hover-color: var( + --nldesign-color-link-hover, + var(--nldesign-color-primary, #1b1b23) + ); + --tilburg-line-border-color: var(--nldesign-color-border, #e2e2ea); + /* The header's account links: a filled button in the primary colour, as + * the vendored header draws them. */ + --tilburg-navigation-background-color: var(--nldesign-color-primary, #1b1b23); + --tilburg-navigation-color: var(--nldesign-color-primary-text, #fff); + --tilburg-navigation-hover-background-color: var( + --nldesign-color-primary-hover, + var(--nldesign-color-primary, #1b1b23) + ); + --tilburg-navigation-hover-color: var(--nldesign-color-primary-text, #fff); + --tilburg-navigation-mobile-background-color: var( + --nldesign-color-primary-hover, + var(--nldesign-color-primary, #1b1b23) + ); + --tilburg-navigation-mobile-item-border-bottom-color: var( + --nldesign-color-border, + #e2e2ea + ); + + /* Buttons: every state the site draws, from the primary and its tints */ + --utrecht-button-background-color: transparent; + --utrecht-button-border-color: var(--nldesign-color-primary, #1b1b23); + --utrecht-button-color: var(--nldesign-color-primary, #1b1b23); + --utrecht-button-hover-background-color: var( + --nldesign-color-primary-light, + #eee + ); + --utrecht-button-hover-border-color: var( + --nldesign-color-primary-hover, + var(--nldesign-color-primary, #1b1b23) + ); + --utrecht-button-hover-color: var( + --nldesign-color-primary-hover, + var(--nldesign-color-primary, #1b1b23) + ); + --utrecht-button-active-background-color: var( + --nldesign-color-primary-light-hover, + var(--nldesign-color-primary-light, #ddd) + ); + --utrecht-button-active-border-color: var( + --nldesign-color-primary-hover, + var(--nldesign-color-primary, #1b1b23) + ); + --utrecht-button-active-color: var( + --nldesign-color-primary-hover, + var(--nldesign-color-primary, #1b1b23) + ); + --utrecht-button-focus-background-color: var( + --nldesign-color-primary-light, + #eee + ); + --utrecht-button-focus-border-color: transparent; + --utrecht-button-focus-color: var(--nldesign-color-text, #1b1b23); + --utrecht-button-disabled-background-color: var( + --nldesign-color-background-hover, + #f0f0f3 + ); + --utrecht-button-disabled-border-color: transparent; + --utrecht-button-disabled-color: var(--nldesign-color-text-muted, #75758a); + --utrecht-button-primary-action-border-color: var( + --nldesign-color-button-primary-border, + var(--nldesign-color-primary, #1b1b23) + ); + --utrecht-button-primary-action-hover-border-color: var( + --nldesign-color-primary-hover, + var(--nldesign-color-primary, #1b1b23) + ); + --utrecht-button-primary-action-hover-color: var( + --nldesign-color-primary-text, + #fff + ); + --utrecht-button-primary-action-active-background-color: var( + --nldesign-color-primary-hover, + var(--nldesign-color-primary, #1b1b23) + ); + --utrecht-button-primary-action-active-border-color: var( + --nldesign-color-primary-hover, + var(--nldesign-color-primary, #1b1b23) + ); + --utrecht-button-primary-action-active-color: var( + --nldesign-color-primary-text, + #fff + ); + --utrecht-button-primary-action-focus-background-color: var( + --nldesign-color-primary-hover, + var(--nldesign-color-primary, #1b1b23) + ); + --utrecht-button-primary-action-focus-border-color: transparent; + --utrecht-button-primary-action-focus-color: var( + --nldesign-color-primary-text, + #fff + ); + --utrecht-button-primary-action-disabled-background-color: var( + --nldesign-color-background-hover, + #f0f0f3 + ); + --utrecht-button-primary-action-disabled-border-color: transparent; + --utrecht-button-primary-action-disabled-color: var( + --nldesign-color-text-muted, + #75758a + ); + --utrecht-button-secondary-action-border-color: var( + --nldesign-color-primary, + #1b1b23 + ); + --utrecht-button-secondary-action-hover-background-color: var( + --nldesign-color-primary-light, + #eee + ); + --utrecht-button-secondary-action-hover-border-color: var( + --nldesign-color-primary-hover, + var(--nldesign-color-primary, #1b1b23) + ); + --utrecht-button-secondary-action-hover-color: var( + --nldesign-color-primary-hover, + var(--nldesign-color-primary, #1b1b23) + ); + --utrecht-button-secondary-action-active-background-color: var( + --nldesign-color-primary-light-hover, + var(--nldesign-color-primary-light, #ddd) + ); + --utrecht-button-secondary-action-active-border-color: var( + --nldesign-color-primary-hover, + var(--nldesign-color-primary, #1b1b23) + ); + --utrecht-button-secondary-action-active-color: var( + --nldesign-color-primary-hover, + var(--nldesign-color-primary, #1b1b23) + ); + --utrecht-button-secondary-action-focus-background-color: var( + --nldesign-color-primary-light, + #eee + ); + --utrecht-button-secondary-action-focus-border-color: var( + --nldesign-color-primary, + #1b1b23 + ); + --utrecht-button-secondary-action-focus-color: var( + --nldesign-color-primary-hover, + var(--nldesign-color-primary, #1b1b23) + ); + --utrecht-button-secondary-action-disabled-background-color: var( + --nldesign-color-background-hover, + #f0f0f3 + ); + --utrecht-button-secondary-action-disabled-border-color: transparent; + --utrecht-button-secondary-action-disabled-color: var( + --nldesign-color-text-muted, + #75758a + ); + --utrecht-button-subtle-background-color: transparent; + --utrecht-button-subtle-border-color: transparent; + --utrecht-button-subtle-color: var( + --nldesign-color-link, + var(--nldesign-color-primary, #1b1b23) + ); + --utrecht-button-subtle-hover-background-color: var( + --nldesign-color-background-hover, + #f0f0f3 + ); + --utrecht-button-subtle-hover-border-color: transparent; + --utrecht-button-subtle-hover-color: var( + --nldesign-color-link-hover, + var(--nldesign-color-primary, #1b1b23) + ); + --utrecht-button-subtle-active-background-color: var( + --nldesign-color-background-dark, + #e2e2ea + ); + --utrecht-button-subtle-active-border-color: transparent; + --utrecht-button-subtle-active-color: var( + --nldesign-color-link-hover, + var(--nldesign-color-primary, #1b1b23) + ); + --utrecht-button-subtle-focus-background-color: var( + --nldesign-color-primary-light, + #eee + ); + --utrecht-button-subtle-focus-border-color: transparent; + --utrecht-button-subtle-focus-color: var(--nldesign-color-text, #1b1b23); + --utrecht-button-subtle-disabled-background-color: transparent; + --utrecht-button-subtle-disabled-border-color: transparent; + --utrecht-button-subtle-disabled-color: var( + --nldesign-color-text-muted, + #75758a + ); + + /* Links, lists, separators, alerts and the accordion */ + --utrecht-link-active-color: var( + --nldesign-color-link-hover, + var(--nldesign-color-primary, #1b1b23) + ); + --utrecht-link-focus-background-color: transparent; + --utrecht-link-focus-color: var(--nldesign-color-text, #1b1b23); + --utrecht-link-text-decoration-color: currentcolor; + --utrecht-breadcrumb-nav-link-disabled-color: var( + --nldesign-color-text-muted, + #75758a + ); + --utrecht-document-inverse-color: var(--nldesign-color-primary-text, #fff); + --utrecht-paragraph-lead-color: var(--nldesign-color-text, #1b1b23); + --utrecht-paragraph-small-color: var(--nldesign-color-text-muted, #75758a); + --utrecht-unordered-list-marker-color: var(--nldesign-color-primary, #1b1b23); + --utrecht-separator-color: var(--nldesign-color-border, #e2e2ea); + --utrecht-alert-info-border-color: var( + --nldesign-color-info, + var(--nldesign-color-primary, #1b1b23) + ); + --utrecht-alert-info-color: var(--nldesign-color-text, #1b1b23); + /* A plain notice (no type): the set's own notice colours, else the + * component's own (see the website vocabulary below). */ + --utrecht-alert-background-color: var( + --nldesign-website-notice-background-color + ); + --utrecht-alert-border-color: var(--nldesign-website-notice-border-color); + --utrecht-alert-color: var(--nldesign-website-notice-color); + --utrecht-alert-ok-color: var(--nldesign-color-text, #1b1b23); + --utrecht-alert-warning-color: var(--thematiq-status-warning-text); + --utrecht-alert-error-color: var(--thematiq-status-error-text); + --utrecht-alert-icon-positive-color: var(--nldesign-color-success, #39870c); + --utrecht-alert-icon-warning-color: var(--nldesign-color-warning, #e17000); + --utrecht-accordion-button-active-background-color: var( + --nldesign-color-background-dark, + #e2e2ea + ); + --utrecht-accordion-button-border-color: transparent; + --utrecht-accordion-panel-border-color: transparent; + + /* Form controls: every state */ + --utrecht-form-label-color: var(--nldesign-color-text, #1b1b23); + --utrecht-form-field-error-message-color: var(--thematiq-status-error-text); + --utrecht-textbox-background-color: var(--nldesign-color-background, #fff); + --utrecht-textbox-placeholder-color: var(--nldesign-color-text-muted, #75758a); + --utrecht-textbox-focus-background-color: var(--nldesign-color-background, #fff); + --utrecht-textbox-focus-border-color: var(--nldesign-color-text, #1b1b23); + --utrecht-textbox-focus-color: var(--nldesign-color-text, #1b1b23); + --utrecht-textbox-invalid-background-color: var( + --nldesign-color-background, + #fff + ); + --utrecht-textbox-invalid-border-color: var(--nldesign-color-error, #d52b1e); + --utrecht-textbox-invalid-color: var(--nldesign-color-text, #1b1b23); + --utrecht-textbox-disabled-background-color: var( + --nldesign-color-background-hover, + #f0f0f3 + ); + --utrecht-textbox-disabled-border-color: var( + --nldesign-color-border-dark, + #8a929e + ); + --utrecht-textbox-disabled-color: var(--nldesign-color-text-muted, #75758a); + --utrecht-textbox-read-only-background-color: var( + --nldesign-color-background-hover, + #f0f0f3 + ); + --utrecht-textbox-read-only-border-color: var( + --nldesign-color-border-dark, + #8a929e + ); + --utrecht-textbox-read-only-color: var(--nldesign-color-text, #1b1b23); + --utrecht-select-background-color: var(--nldesign-color-background, #fff); + --utrecht-select-border-color: var( + --nldesign-color-border-dark, + var(--nldesign-color-background-darker, #8a929e) + ); + --utrecht-select-color: var(--nldesign-color-text, #1b1b23); + --utrecht-select-disabled-background-color: var( + --nldesign-color-background-hover, + #f0f0f3 + ); + --utrecht-select-disabled-border-color: var( + --nldesign-color-border-dark, + #8a929e + ); + --utrecht-select-disabled-color: var(--nldesign-color-text-muted, #75758a); + --utrecht-select-font-family: var(--nldesign-font-family, system-ui, sans-serif); + --utrecht-radio-button-label-font-family: var( + --nldesign-font-family, + system-ui, + sans-serif + ); + --utrecht-heading-4-font-family: var( + --nldesign-component-heading-font-family, + var(--nldesign-font-family, system-ui, sans-serif) + ); + --utrecht-heading-5-font-family: var( + --nldesign-component-heading-font-family, + var(--nldesign-font-family, system-ui, sans-serif) + ); + --utrecht-heading-6-font-family: var( + --nldesign-component-heading-font-family, + var(--nldesign-font-family, system-ui, sans-serif) + ); + + /* Geometry: the spacing, sizes and type scale, brand neutral */ + --conduction-primary-top-nav-dropdown-hover-text-decoration: underline; + --conduction-primary-top-nav-dropdown-text-decoration: none; + --conduction-tooltip-border-radius: 0px; + --conduction-tooltip-padding-block-end: 8px; + --conduction-tooltip-padding-block-start: 8px; + --conduction-tooltip-padding-inline-end: 14px; + --conduction-tooltip-padding-inline-start: 14px; + --tilburg-border-radius-lg: 16px; + --tilburg-border-radius-md: 8px; + --tilburg-border-radius-round: 999px; + --tilburg-border-radius-sm: 4px; + --tilburg-border-width-lg: 4px; + --tilburg-border-width-md: 2px; + --tilburg-border-width-sm: 1px; + --tilburg-document-font-size: 16px; + --tilburg-document-font-weight: 400; + --tilburg-document-line-height: 150%; + --tilburg-document-strong-font-weight: 700; + --tilburg-erm-font-size: 16px; + --tilburg-footer-link-hover-text-decoration: underline; + --tilburg-footer-link-text-decoration: none; + --tilburg-form-control-border-width: 1px; + --tilburg-heading-font-weight: 700; + --tilburg-icon-functional-size: 24px; + --tilburg-navigation-font-weight: 700; + --tilburg-pointer-target-min-size: 48px; + --tilburg-size-2xs: 16px; + --tilburg-size-4xs: 4px; + --tilburg-size-icon-4xl: 48px; + --tilburg-size-icon-md: 24px; + --tilburg-size-icon-sm: 16px; + --tilburg-size-md: 48px; + --tilburg-size-xs: 24px; + --tilburg-space-block-ant: 4px; + --tilburg-space-block-beetle: 8px; + --tilburg-space-block-cat: 32px; + --tilburg-space-block-dog: 48px; + --tilburg-space-block-flea: 2px; + --tilburg-space-block-mouse: 16px; + --tilburg-space-block-pig: 64px; + --tilburg-space-block-rabbit: 24px; + --tilburg-space-block-rat: 20px; + --tilburg-space-block-snail: 12px; + --tilburg-space-column-ant: 2px; + --tilburg-space-column-beetle: 4px; + --tilburg-space-column-cat: 24px; + --tilburg-space-column-dog: 28px; + --tilburg-space-column-elephant: 96px; + --tilburg-space-column-horse: 64px; + --tilburg-space-column-mouse: 12px; + --tilburg-space-column-pig: 32px; + --tilburg-space-column-rabbit: 20px; + --tilburg-space-column-rat: 16px; + --tilburg-space-column-snail: 8px; + --tilburg-space-column-tiger: 48px; + --tilburg-space-inline-ant: 4px; + --tilburg-space-inline-beetle: 8px; + --tilburg-space-inline-mouse: 16px; + --tilburg-space-inline-rabbit: 24px; + --tilburg-space-inline-snail: 12px; + --tilburg-space-row-cat: 24px; + --tilburg-space-row-dog: 28px; + --tilburg-space-row-elephant: 96px; + --tilburg-space-row-mouse: 12px; + --tilburg-space-row-rabbit: 20px; + --tilburg-space-row-rat: 16px; + --tilburg-space-row-snail: 8px; + --tilburg-space-row-tiger: 48px; + --tilburg-space-text-beetle: 4px; + --tilburg-space-text-mouse: 8px; + --tilburg-space-text-snail: 6px; + --tilburg-typography-font-size-2xl: 32px; + --tilburg-typography-font-size-3xl: 36px; + --tilburg-typography-font-size-lg: 20px; + --tilburg-typography-font-size-md: 16px; + --tilburg-typography-font-size-sm: 14px; + --tilburg-typography-font-size-xl: 24px; + --tilburg-typography-font-weight-bold: 700; + --tilburg-typography-font-weight-normal: 400; + --tilburg-typography-line-height-md: 150%; + --tilburg-typography-line-height-sm: 125%; + --utrecht-accordion-button-border-width: 1px; + --utrecht-accordion-button-line-height: 150%; + --utrecht-accordion-button-padding-block-end: 12px; + --utrecht-accordion-button-padding-block-start: 12px; + --utrecht-accordion-button-padding-inline-end: 16px; + --utrecht-accordion-button-padding-inline-start: 16px; + --utrecht-accordion-panel-border-width: 4px; + --utrecht-alert-border-width: var(--nldesign-website-notice-border-width, 2px); + --utrecht-button-border-width: var(--nldesign-website-control-border-width, 1px); + --utrecht-button-font-size: 16px; + --utrecht-button-font-weight: var(--nldesign-website-button-font-weight, 700); + --utrecht-button-icon-size: 24px; + --utrecht-button-line-height: 150%; + --utrecht-button-min-block-size: 48px; + --utrecht-button-min-inline-size: 48px; + --utrecht-button-padding-block-end: 12px; + --utrecht-button-padding-block-start: 12px; + --utrecht-button-padding-inline-end: 16px; + --utrecht-button-padding-inline-start: 16px; + --utrecht-button-primary-action-font-weight: var( + --nldesign-website-button-font-weight, + 700 + ); + --utrecht-button-secondary-action-font-weight: var( + --nldesign-website-button-font-weight, + 700 + ); + --utrecht-button-subtle-font-weight: var( + --nldesign-website-button-font-weight, + 700 + ); + --utrecht-data-list-item-key-font-weight: 700; + --utrecht-document-font-size: 16px; + --utrecht-document-line-height: 150%; + --utrecht-form-label-checkbox-font-weight: 400; + --utrecht-form-label-font-size: 16px; + --utrecht-form-label-font-weight: 700; + --utrecht-heading-1-font-size: var(--nldesign-website-heading-1-font-size, 36px); + --utrecht-heading-1-font-weight: 700; + --utrecht-heading-1-line-height: 125%; + --utrecht-heading-2-font-size: var(--nldesign-website-heading-2-font-size, 32px); + --utrecht-heading-2-font-weight: 700; + --utrecht-heading-2-line-height: 125%; + --utrecht-heading-3-font-size: var(--nldesign-website-heading-3-font-size, 24px); + --utrecht-heading-3-font-weight: 700; + --utrecht-heading-3-line-height: 125%; + --utrecht-heading-4-font-size: 20px; + --utrecht-heading-4-font-weight: 700; + --utrecht-heading-4-line-height: 150%; + --utrecht-heading-5-font-size: 16px; + --utrecht-heading-5-font-weight: 700; + --utrecht-heading-5-line-height: 150%; + --utrecht-heading-6-font-size: 14px; + --utrecht-heading-6-font-weight: 700; + --utrecht-heading-6-line-height: 150%; + --utrecht-link-focus-text-decoration: none; + --utrecht-link-focus-text-decoration-thickness: auto; + --utrecht-link-hover-text-decoration: none; + --utrecht-link-hover-text-decoration-thickness: auto; + --utrecht-link-icon-margin-inline: 4px; + --utrecht-link-icon-size: 24px; + --utrecht-link-text-decoration: underline; + --utrecht-link-text-decoration-thickness: auto; + --utrecht-link-text-underline-offset: auto; + --utrecht-ordered-list-font-size: 16px; + --utrecht-ordered-list-item-margin-block-end: 4px; + --utrecht-ordered-list-item-margin-block-start: 4px; + --utrecht-ordered-list-padding-inline-start: 24px; + --utrecht-paragraph-font-size: 16px; + --utrecht-paragraph-font-weight: 400; + --utrecht-paragraph-lead-font-size: var(--nldesign-website-lead-font-size, 20px); + --utrecht-paragraph-lead-font-weight: 400; + --utrecht-paragraph-lead-line-height: 150%; + --utrecht-paragraph-line-height: 150%; + --utrecht-paragraph-small-font-size: 14px; + --utrecht-paragraph-small-font-weight: 400; + --utrecht-paragraph-small-line-height: 150%; + --utrecht-radio-button-label-font-size: 16px; + --utrecht-radio-button-label-font-weight: 400; + --utrecht-radio-button-label-line-height: 150%; + --utrecht-radio-button-min-block-size: 16px; + --utrecht-radio-button-min-inline-size: 16px; + --utrecht-select-border-width: 1px; + --utrecht-select-font-size: 16px; + --utrecht-select-hover-border-width: 2px; + --utrecht-select-max-inline-size: 400px; + --utrecht-separator-margin-block-end: 32px; + --utrecht-separator-margin-block-start: 32px; + --utrecht-skip-link-text-decoration: underline; + --utrecht-table-cell-padding-inline-start: 12px; + --utrecht-textbox-border-width: var( + --nldesign-website-control-border-width, + 1px + ); + --utrecht-textbox-font-size: 16px; + --utrecht-textbox-font-weight: 400; + --utrecht-textbox-max-inline-size: 400px; + --utrecht-textbox-padding-block-start: 12px; + --utrecht-textbox-padding-inline-end: 12px; + --utrecht-textbox-padding-inline-start: 12px; + --utrecht-unordered-list-font-size: 16px; + --utrecht-unordered-list-item-margin-block-end: 4px; + --utrecht-unordered-list-item-margin-block-start: 4px; + --utrecht-unordered-list-padding-inline-start: 24px; + + --tilburg-box-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); + --tilburg-box-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1); + --conduction-tooltip-z-index: 9999; + + /* Tabs */ + --conduction-tabs-scroll-button-background-color: var( + --nldesign-color-primary, + #1b1b23 + ); + --conduction-tabs-scroll-button-color: var(--nldesign-color-primary-text, #fff); + --conduction-tabs-scroll-button-hover-background-color: var( + --nldesign-color-primary-hover, + var(--nldesign-color-primary, #1b1b23) + ); + --conduction-tabs-scroll-button-hover-color: var( + --nldesign-color-primary-text, + #fff + ); + --conduction-tabs-tab-background-color: transparent; + --conduction-tabs-tab-color: var(--nldesign-color-text, #1b1b23); + --conduction-tabs-tab-font-family: var( + --nldesign-font-family, + system-ui, + sans-serif + ); + --conduction-tabs-tab-hover-background-color: transparent; + --conduction-tabs-tab-hover-color: var(--nldesign-color-text, #1b1b23); + --conduction-tabs-tab-list-border-bottom-color: var( + --nldesign-color-border, + #e2e2ea + ); + --conduction-tabs-tab-selected-background-color: transparent; + --conduction-tabs-tab-selected-border-bottom-color: var(--thematiq-accent-color); + --conduction-tabs-tab-selected-color: var(--nldesign-color-text, #1b1b23); + --conduction-tabs-tab-selected-hover-color: var(--nldesign-color-text, #1b1b23); + --conduction-tabs-tab-bottom: -3px; + --conduction-tabs-tab-button-bottom: 0px; + --conduction-tabs-tab-font-size: 16px; + --conduction-tabs-tab-font-weight: 400; + --conduction-tabs-tab-hover-font-weight: 700; + --conduction-tabs-tab-letter-spacing: normal; + --conduction-tabs-tab-list-border-bottom-style: solid; + --conduction-tabs-tab-list-border-bottom-width: 0.3rem; + --conduction-tabs-tab-list-margin-block-end: 0px; + --conduction-tabs-tab-list-padding-inline-end: 2px; + --conduction-tabs-tab-list-padding-inline-start: 2px; + --conduction-tabs-tab-min-height: 48px; + --conduction-tabs-tab-padding-block-end: 6px; + --conduction-tabs-tab-padding-block-start: 6px; + --conduction-tabs-tab-padding-inline-end: 12px; + --conduction-tabs-tab-padding-inline-start: 12px; + --conduction-tabs-tab-panel-padding-block-end: 24px; + --conduction-tabs-tab-panel-padding-block-start: 24px; + --conduction-tabs-tab-panel-padding-inline-end: 24px; + --conduction-tabs-tab-panel-padding-inline-start: 24px; + --conduction-tabs-tab-selected-border-bottom-style: solid; + --conduction-tabs-tab-selected-border-bottom-width: 0.3rem; + --conduction-tabs-tab-selected-font-weight: 700; + --conduction-tabs-tab-selected-hover-font-weight: 700; + + /* + * THE ACCENT (openspec/changes/brand-motif-on-portals). + * + * A school set has a second colour besides its interactive primary: sun + * yellow, aqua, maple rose, ember. It marks the menu item on screen, the + * count badges and the "today first" card; it is never the colour of a + * button or a link. A set names it in three vocabulary tokens: + * + * --nldesign-color-accent the accent itself (bars, underlines) + * --nldesign-color-accent-light its light wash (a card's ground) + * --nldesign-color-accent-text text in the accent's hue on that wash + * + * The site reads the three roles below. A set that names no accent gets + * its primary, so the marks still show, in the brand's main colour. + */ + --thematiq-accent-color: var( + --nldesign-color-accent, + var(--nldesign-color-primary, #1b1b23) + ); + --thematiq-accent-light-color: var( + --nldesign-color-accent-light, + var(--nldesign-color-primary-light, #eee) + ); + --thematiq-accent-text-color: var( + --nldesign-color-accent-text, + var(--nldesign-color-primary, #1b1b23) + ); + /* A count badge: the set's own navigation badge, else the accent with the + * primary's text colour on it. */ + --thematiq-badge-background-color: var( + --nldesign-component-navigation-badge-background-color, + var(--thematiq-accent-color) + ); + --thematiq-badge-color: var( + --nldesign-component-navigation-badge-color, + var(--nldesign-color-primary-text, #fff) + ); + + /* + * THE WEBSITE'S TYPE SCALE, CONTROLS AND MARKS + * (openspec/changes/zuiddrecht-website-type-and-controls). + * + * A design draws its signed-in pages with a type scale, a control border, + * a tag shape, process step markers, a notice and tabs of its own. The + * Zuiddrecht boards: 44px page titles over a 36px default, 2px outlined + * buttons, pill tags, 36px steps filled blue when done and red-ringed + * when current, a light blue notice with a 1px border, a grey tab line + * with the tab on screen in red. None of that is a colour the + * `--nldesign-color-*` layer names, so a set says it in this vocabulary, + * which only this file reads (an instance page never sees it): + * + * --nldesign-website-heading-1-font-size, -2-, -3- the three heading sizes + * --nldesign-website-control-border-width buttons and text boxes + * --nldesign-website-badge-border-radius a data badge (a status tag) + * --nldesign-website-step-marker-size a process step's marker + * --nldesign-website-step-done-color a done step's fill, ring and line + * --nldesign-website-step-done-mark-color the tick on that fill + * --nldesign-website-step-current-color the current step's ring and number + * --nldesign-website-step-current-background-color the current step's fill + * --nldesign-website-notice-background-color a plain notice's ground + * --nldesign-website-notice-border-color its border + * --nldesign-website-notice-border-width its border width + * --nldesign-website-tab-line-color the line under a tab list + * --nldesign-website-tab-current-color the mark under the tab on screen + * + * The public site's own pages add to it + * (openspec/changes/zuiddrecht-site-page-title-notice-surface): + * + * --nldesign-website-page-title-size a content page's title (an h1 + * drawn larger than heading 1) + * --nldesign-website-page-title-line-height its line height + * --nldesign-website-lead-font-size the lead paragraph + * --nldesign-website-notice-color the text on a plain notice + * --nldesign-color-surface the site's grey band and a + * boxed table's header row + * + * An attention strip ("Let op": something the resident has to act on) is + * not the plain notice above, which a board draws next to it in its own + * colours, so it has names of its own: + * + * --nldesign-website-attention-background-color its ground + * --nldesign-website-attention-border-color its border + * --nldesign-website-attention-color its text + * + * The portal reads them by name for its notice banner; the roles below + * carry them, without a fallback. + * + * The portal reads the page title, the notice text and the surface by + * name (css/site-theme.css in portaliq); the roles below carry them so a + * reader exists in this repository, and the lead size wraps the Utrecht + * literal, which the portal's lead paragraph reads. + * + * EVERY ROLE KEEPS TODAY'S VALUE AS ITS FALLBACK, so a set that names + * none of these changes nothing: the heading sizes, border widths, the + * notice border width and the Den Haag step marker roles fall back to + * what they were (the marker roles are wrapped by + * scripts/generate-denhaag-bridge.mjs from the `website` section of the + * mapping). The notice ground, border and text, the data badge radius (no + * pinned Den Haag stylesheet reads it; the portal's badge does), the two + * tab roles, the page title roles, the surface and the attention roles below carry no + * fallback on purpose: unset, a consumer's own fallback applies, as with + * the website radii above. + */ + --nl-data-badge-border-radius: var(--nldesign-website-badge-border-radius); + --thematiq-tab-line-color: var(--nldesign-website-tab-line-color); + --thematiq-tab-current-color: var(--nldesign-website-tab-current-color); + --thematiq-page-title-font-size: var(--nldesign-website-page-title-size); + --thematiq-page-title-line-height: var( + --nldesign-website-page-title-line-height + ); + --thematiq-surface-color: var(--nldesign-color-surface); + --thematiq-attention-background-color: var( + --nldesign-website-attention-background-color + ); + --thematiq-attention-border-color: var( + --nldesign-website-attention-border-color + ); + --thematiq-attention-color: var(--nldesign-website-attention-color); + + /* + * The footer's bottom band: the footer's own ground one step darker, as + * the school designs draw it. No fallback: a set that names no footer + * colour keeps the band it had. + */ + --thematiq-footer-legal-background-color: color-mix( + in srgb, + var(--nldesign-color-footer-background) 80%, + #000 + ); + + /* + * A light hero (openspec/changes/brand-motif-on-portals). The vendored hero + * band paints itself in the primary with white type; a set whose website + * hero is a light ground names it, its first button and a watermark + * (--nldesign-hero-decoration-image, usually the emblem the portal names + * in --nldesign-emblem-url). No fallbacks: a set that names none keeps the + * hero it had. The type colours are --nldesign-hero-title-color and + * --nldesign-hero-body-color above, which such a set declares itself. + */ + --thematiq-hero-background-color: var(--nldesign-hero-background-color); + --thematiq-hero-action-background-color: var( + --nldesign-hero-action-background-color + ); + --thematiq-hero-action-color: var(--nldesign-hero-action-color); + --thematiq-hero-decoration-image: var(--nldesign-hero-decoration-image); + + /* + * THE NAMES THE PORTAL READS BY ITSELF (portaliq css/site-theme.css; the + * full list is tests/vitest/fixtures/portal-site-nldesign-readers.json). + * A set may only declare a `--nldesign-*` name something reads + * (TokenSetVocabularyTest), and that test looks inside this repository. + * The portal read these names and nothing here did, so #1105 took two of + * them out of Zuiddrecht as unread, and the blue mark under the menu item + * on screen went with them. Each gets a role here, so the vocabulary + * knows the portal reads it. No fallbacks: a set that names none of them + * leaves the portal's own fallback in force. + */ + --thematiq-website-page-max-width: var(--nldesign-website-page-max-width); + --thematiq-website-page-gutter: var(--nldesign-website-page-gutter); + --thematiq-website-band-max-width: var(--nldesign-website-band-max-width); + --thematiq-website-header-max-width: var(--nldesign-website-header-max-width); + --thematiq-website-header-gutter: var(--nldesign-website-header-gutter); + --thematiq-website-content-font-size: var(--nldesign-website-content-font-size); + --thematiq-website-nav-current-in-line: var( + --nldesign-website-nav-current-in-line + ); + --thematiq-website-nav-current-color: var(--nldesign-website-nav-current-color); + --thematiq-website-hero-title-size: var(--nldesign-website-hero-title-size); + --thematiq-website-hero-decoration-opacity: var( + --nldesign-website-hero-decoration-opacity + ); + --thematiq-color-border-strong: var(--nldesign-color-border-strong); + --thematiq-emblem-url: var(--nldesign-emblem-url); + + /* + * The site's own grey text and the ground of a missing picture. The site + * reads --nldesign-color-text-muted, which is the workplace's grey too, + * and this file loads before the set, so it cannot change that name; it + * offers the website's grey under its own role, falling back to the + * shared one. The placeholder ground has no fallback. + */ + --thematiq-website-text-muted: var( + --nldesign-website-color-text-muted, + var(--nldesign-color-text-muted) + ); + --thematiq-placeholder-background-color: var( + --nldesign-website-placeholder-background-color + ); + + /* + * THE BRAND STRIPE ON THE PORTAL (openspec/changes/brand-motif-on-portals). + * + * css/brand-stripe.css draws the stripe on Nextcloud's own pages; a portal + * never loads that file, so the same tokens reach the site here, under the + * names the component library's CnBrandStripe reads. + * + * NO FALLBACKS, unlike brand-stripe.css. That file is loaded only while + * the stripe is on; this one is loaded for every set, and a set that + * declares no stripe must not suddenly grow one on its portal. With the + * set silent every name below is the guaranteed-invalid value, the site's + * own `var(--cn-brand-stripe-height, 0)` applies and nothing is drawn. + * + * The image is the motif (the twigs, the canal, the cut, the temperature + * line). The inverse image is the same motif for a dark band such as the + * footer; a set that names none draws its one image there too. + */ + --cn-brand-stripe-color-1: var(--nldesign-brand-stripe-color-1); + --cn-brand-stripe-color-2: var(--nldesign-brand-stripe-color-2); + --cn-brand-stripe-color-3: var(--nldesign-brand-stripe-color-3); + --cn-brand-stripe-ratio-1: var(--nldesign-brand-stripe-ratio-1); + --cn-brand-stripe-ratio-2: var(--nldesign-brand-stripe-ratio-2); + --cn-brand-stripe-ratio-3: var(--nldesign-brand-stripe-ratio-3); + --cn-brand-stripe-height: var(--nldesign-brand-stripe-height); + --cn-brand-stripe-image: var(--nldesign-brand-stripe-image); + --cn-brand-stripe-image-inverse: var( + --nldesign-brand-stripe-image-inverse, + var(--nldesign-brand-stripe-image) + ); + /* * `--navigation-bar-height` IS DELIBERATELY NOT BRIDGED HERE, and the reason * is worth keeping: it cannot be. @@ -351,7 +1283,7 @@ * Den Haag component properties for every token set. GENERATED by * scripts/generate-denhaag-bridge.mjs from scripts/mapping/denhaag-component-tokens.json. * Do not edit by hand. Colours follow the set; geometry is Den Haag's. - * Mapping sha256: 4c73482f86ef509de822329eecebbb461274a7cde01c5b11f6a947da5b08ff46 + * Mapping sha256: b5b633d2a29aa3ea5198cfadf824421dc604f7b5f324db1a8d3522ee352439fe * Sources: @gemeente-denhaag/action 4.4.2, @gemeente-denhaag/card 5.1.4, @gemeente-denhaag/contact-timeline 4.1.3, @gemeente-denhaag/data-badge 2.2.2, @gemeente-denhaag/file 2.5.3, @gemeente-denhaag/process-steps 4.3.3, @gemeente-denhaag/side-navigation 4.2.4, @gemeente-denhaag/sidenav 2.0.0, @gemeente-denhaag/step-marker 3.1.3, @gemeente-denhaag/design-tokens-components 5.1.0, @gemeente-denhaag/design-tokens-common 4.0.0 */ --thematiq-status-warning-text: color-mix( @@ -678,14 +1610,17 @@ --denhaag-step-marker-border-color: var(--nldesign-color-border-dark, #696969); --denhaag-step-marker-border-width: 2px; --denhaag-step-marker-checked-background-color: var( - --nldesign-color-background, - #fff + --nldesign-website-step-done-color, + var(--nldesign-color-background, #fff) ); --denhaag-step-marker-checked-border-color: var( - --nldesign-color-success, - #39870c + --nldesign-website-step-done-color, + var(--nldesign-color-success, #39870c) + ); + --denhaag-step-marker-checked-color: var( + --nldesign-website-step-done-mark-color, + var(--thematiq-status-success-text) ); - --denhaag-step-marker-checked-color: var(--thematiq-status-success-text); --denhaag-step-marker-checked-nested-background-color: var( --nldesign-color-background, #fff @@ -697,8 +1632,8 @@ --denhaag-step-marker-checked-nested-color: var(--thematiq-status-success-text); --denhaag-step-marker-color: var(--nldesign-color-text, #333333); --denhaag-step-marker-connector-checked-outline-color: var( - --nldesign-color-success, - #39870c + --nldesign-website-step-done-color, + var(--nldesign-color-success, #39870c) ); --denhaag-step-marker-connector-color: var( --nldesign-color-border-dark, @@ -726,14 +1661,17 @@ #e17000 ); --denhaag-step-marker-current-background-color: var( - --nldesign-color-primary, - #154273 + --nldesign-website-step-current-background-color, + var(--nldesign-color-primary, #154273) ); --denhaag-step-marker-current-border-color: var( - --nldesign-color-primary, - #154273 + --nldesign-website-step-current-color, + var(--nldesign-color-primary, #154273) + ); + --denhaag-step-marker-current-color: var( + --nldesign-website-step-current-color, + var(--nldesign-color-primary-text, #ffffff) ); - --denhaag-step-marker-current-color: var(--nldesign-color-primary-text, #ffffff); --denhaag-step-marker-current-nested-background-color: var( --nldesign-color-primary, #154273 @@ -831,7 +1769,7 @@ --nldesign-color-text-muted, #696969 ); - --denhaag-step-marker-size: 32px; + --denhaag-step-marker-size: var(--nldesign-website-step-marker-size, 32px); --denhaag-step-marker-warning-background-color: var( --nldesign-color-background, #fff diff --git a/css/systems/nldesign/element-overrides.css b/css/systems/nldesign/element-overrides.css index 36e7c84c2..41406e464 100644 --- a/css/systems/nldesign/element-overrides.css +++ b/css/systems/nldesign/element-overrides.css @@ -337,11 +337,19 @@ header nav .icon { SOLID BACKGROUNDS ============================================ */ +/* + * A widget gets a solid ground; the parts inside it do not. A BEM element + * such as `.cn-stages-widget__bar` also holds "widget" in its class, and + * this rule (ID-level specificity through `:not(#header *)`) used to paint + * it the page background, so a part that is drawn as a coloured shape, the + * stages bars first, disappeared on its card. Skipping `widget__` leaves + * every container solid and the parts their own colour. + */ .panel:not(#header *), .widget:not(#header *), .dashboard-widget:not(#header *), [class*='panel']:not(#header *), -[class*='widget']:not(#header *), +[class*='widget']:not([class*='widget__']):not(#header *), #app-content, .app-content { background: var(--color-main-background); @@ -351,6 +359,37 @@ header nav .icon { -webkit-backdrop-filter: none; } +/* + * A borderless widget asks for no ground of its own: it sits on the page + * ground (nextcloud-vue draws `.cn-widget-wrapper--borderless` transparent). + * The rule above painted the wrapper and the widget inside it white, so a + * greeting on the ground sat in a white box, a borderless attention banner + * had a second, taller white card under it (dossiq, DqDashboard) and the + * borderless rows of the pipelinq and decidiq dashboards showed white bands + * on the grey workspace. + * + * So every borderless wrapper, its content and the widget directly in it + * stay transparent, and so does a greeting on the ground anywhere. A widget + * that draws its own card keeps it: the attention banner, the calendar and + * the tiles paint their own ground, which this rule leaves alone. + * + * WEIGHT. The solid rule above scores (1,2,0): two attribute selectors and + * the ID inside `:not(#header *)`. A selector here that scores less loses, + * whatever its place, so each one carries at least two classes besides the + * `:not(#header *)`, and the block comes after the solid rule. + */ +.cn-widget-wrapper.cn-widget-wrapper--borderless:not(#header *), +.cn-widget-wrapper--borderless > .cn-widget-wrapper__content:not(#header *), +.cn-widget-wrapper--borderless + > .cn-widget-wrapper__content + > [class*='widget']:not([class*='widget__']):not( + .cn-banner-widget--attention + ):not(.cn-calendar-widget):not([class*='tile-widget']):not(#header *), +.cn-header-widget.cn-header-widget--ground:not(#header *) { + background: transparent; + background-color: transparent; +} + /* ============================================ TEXT COLOR FIXES ============================================ */ diff --git a/css/systems/nldesign/fonts.css b/css/systems/nldesign/fonts.css index 55b44c263..6a03714fc 100644 --- a/css/systems/nldesign/fonts.css +++ b/css/systems/nldesign/fonts.css @@ -288,6 +288,7 @@ * IBM Plex Sans — OFL-1.1. * Copyright 2017 IBM Corp. with Reserved Font Name "Plex" (https://github.com/IBM/plex). * From @fontsource/ibm-plex-sans 5.3.0, latin subset. + * Medium (500) is there for esdoornveen, whose design uses four weights. */ @font-face { @@ -300,6 +301,16 @@ font-display: swap; } +@font-face { + font-family: 'IBM Plex Sans'; + src: + local('IBM Plex Sans Medium'), + url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + @font-face { font-family: 'IBM Plex Sans'; src: @@ -320,6 +331,238 @@ font-display: swap; } +/* + * IBM Plex Mono — OFL-1.1. + * Copyright 2017 IBM Corp. with Reserved Font Name "Plex" (https://github.com/IBM/plex). + * From @fontsource/ibm-plex-mono 5.3.0, latin subset. + * Codes such as crebo numbers and exam codes in the esdoornveen set. The 400 file keeps the name css/fonts-conduction.css has always linked; it is byte-identical to the package file ibm-plex-mono-latin-400-normal.woff2. + */ + +@font-face { + font-family: 'IBM Plex Mono'; + src: + local('IBM Plex Mono'), + url('fonts/ibm-plex-mono-latin-400.woff2') format('woff2'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'IBM Plex Mono'; + src: + local('IBM Plex Mono Medium'), + url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +/* + * Lexend — OFL-1.1. + * Copyright 2019 The Lexend Project Authors (https://github.com/googlefonts/lexend). + * From @fontsource/lexend 5.3.0, latin subset. + * Named by the wilgenboom set. + */ + +@font-face { + font-family: 'Lexend'; + src: + local('Lexend'), + url('fonts/lexend-latin-400-normal.woff2') format('woff2'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Lexend'; + src: + local('Lexend Medium'), + url('fonts/lexend-latin-500-normal.woff2') format('woff2'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Lexend'; + src: + local('Lexend SemiBold'), + url('fonts/lexend-latin-600-normal.woff2') format('woff2'); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Lexend'; + src: + local('Lexend Bold'), + url('fonts/lexend-latin-700-normal.woff2') format('woff2'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +/* + * Red Hat Display — OFL-1.1. + * Copyright 2024 The Red Hat Project Authors (https://github.com/RedHatOfficial/RedHatFont). + * From @fontsource/red-hat-display 5.3.0, latin subset. + * The heading face of the vaartveld set. + */ + +@font-face { + font-family: 'Red Hat Display'; + src: + local('Red Hat Display SemiBold'), + url('fonts/red-hat-display-latin-600-normal.woff2') format('woff2'); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Red Hat Display'; + src: + local('Red Hat Display Bold'), + url('fonts/red-hat-display-latin-700-normal.woff2') format('woff2'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Red Hat Display'; + src: + local('Red Hat Display ExtraBold'), + url('fonts/red-hat-display-latin-800-normal.woff2') format('woff2'); + font-weight: 800; + font-style: normal; + font-display: swap; +} + +/* + * Red Hat Text — OFL-1.1. + * Copyright 2024 The Red Hat Project Authors (https://github.com/RedHatOfficial/RedHatFont). + * From @fontsource/red-hat-text 5.3.0, latin subset. + * The text face of the vaartveld set. + */ + +@font-face { + font-family: 'Red Hat Text'; + src: + local('Red Hat Text'), + url('fonts/red-hat-text-latin-400-normal.woff2') format('woff2'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Red Hat Text'; + src: + local('Red Hat Text Medium'), + url('fonts/red-hat-text-latin-500-normal.woff2') format('woff2'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Red Hat Text'; + src: + local('Red Hat Text SemiBold'), + url('fonts/red-hat-text-latin-600-normal.woff2') format('woff2'); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Red Hat Text'; + src: + local('Red Hat Text Bold'), + url('fonts/red-hat-text-latin-700-normal.woff2') format('woff2'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +/* + * Barlow — OFL-1.1. + * Copyright 2017 The Barlow Project Authors (https://github.com/jpt/barlow). + * From @fontsource/barlow 5.3.0, latin subset. + * The text face of the warmtepompacademie set. + */ + +@font-face { + font-family: 'Barlow'; + src: + local('Barlow'), + url('fonts/barlow-latin-400-normal.woff2') format('woff2'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Barlow'; + src: + local('Barlow Medium'), + url('fonts/barlow-latin-500-normal.woff2') format('woff2'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Barlow'; + src: + local('Barlow SemiBold'), + url('fonts/barlow-latin-600-normal.woff2') format('woff2'); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Barlow'; + src: + local('Barlow Bold'), + url('fonts/barlow-latin-700-normal.woff2') format('woff2'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +/* + * Barlow Semi Condensed — OFL-1.1. + * Copyright 2017 The Barlow Project Authors (https://github.com/jpt/barlow). + * From @fontsource/barlow-semi-condensed 5.3.0, latin subset. + * The heading face of the warmtepompacademie set. + */ + +@font-face { + font-family: 'Barlow Semi Condensed'; + src: + local('Barlow Semi Condensed SemiBold'), + url('fonts/barlow-semi-condensed-latin-600-normal.woff2') format('woff2'); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Barlow Semi Condensed'; + src: + local('Barlow Semi Condensed Bold'), + url('fonts/barlow-semi-condensed-latin-700-normal.woff2') format('woff2'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + /* * Clear Sans — Apache-2.0. * Copyright 2012 Intel Corporation (https://github.com/intel/clear-sans). diff --git a/css/systems/nldesign/fonts/OFL.txt b/css/systems/nldesign/fonts/OFL.txt index 71596c328..6073a5541 100644 --- a/css/systems/nldesign/fonts/OFL.txt +++ b/css/systems/nldesign/fonts/OFL.txt @@ -5,6 +5,12 @@ Open Sans: Copyright 2020 The Open Sans Project Authors (https://github.com/goog Lato: Copyright 2010-2011 by tyPoland Lukasz Dziedzic (team@latofonts.com) with Reserved Font Name "Lato" Roboto: Copyright 2011 The Roboto Project Authors (https://github.com/googlefonts/roboto-classic) IBM Plex Sans: Copyright 2017 IBM Corp. with Reserved Font Name "Plex" (https://github.com/IBM/plex) +IBM Plex Mono: Copyright 2017 IBM Corp. with Reserved Font Name "Plex" (https://github.com/IBM/plex) +Lexend: Copyright 2019 The Lexend Project Authors (https://github.com/googlefonts/lexend) +Red Hat Display: Copyright 2024 The Red Hat Project Authors (https://github.com/RedHatOfficial/RedHatFont) +Red Hat Text: Copyright 2024 The Red Hat Project Authors (https://github.com/RedHatOfficial/RedHatFont) +Barlow: Copyright 2017 The Barlow Project Authors (https://github.com/jpt/barlow) +Barlow Semi Condensed: Copyright 2017 The Barlow Project Authors (https://github.com/jpt/barlow) Figtree: Copyright 2022 The Figtree Project Authors (https://github.com/erikdkennedy/figtree) licensed under the SIL Open Font License, Version 1.1. diff --git a/css/systems/nldesign/fonts/barlow-latin-400-normal.woff2 b/css/systems/nldesign/fonts/barlow-latin-400-normal.woff2 new file mode 100644 index 000000000..3914af460 Binary files /dev/null and b/css/systems/nldesign/fonts/barlow-latin-400-normal.woff2 differ diff --git a/css/systems/nldesign/fonts/barlow-latin-500-normal.woff2 b/css/systems/nldesign/fonts/barlow-latin-500-normal.woff2 new file mode 100644 index 000000000..b1d06c6db Binary files /dev/null and b/css/systems/nldesign/fonts/barlow-latin-500-normal.woff2 differ diff --git a/css/systems/nldesign/fonts/barlow-latin-600-normal.woff2 b/css/systems/nldesign/fonts/barlow-latin-600-normal.woff2 new file mode 100644 index 000000000..b1a019f9d Binary files /dev/null and b/css/systems/nldesign/fonts/barlow-latin-600-normal.woff2 differ diff --git a/css/systems/nldesign/fonts/barlow-latin-700-normal.woff2 b/css/systems/nldesign/fonts/barlow-latin-700-normal.woff2 new file mode 100644 index 000000000..4ee6cd865 Binary files /dev/null and b/css/systems/nldesign/fonts/barlow-latin-700-normal.woff2 differ diff --git a/css/systems/nldesign/fonts/barlow-semi-condensed-latin-600-normal.woff2 b/css/systems/nldesign/fonts/barlow-semi-condensed-latin-600-normal.woff2 new file mode 100644 index 000000000..613e861ac Binary files /dev/null and b/css/systems/nldesign/fonts/barlow-semi-condensed-latin-600-normal.woff2 differ diff --git a/css/systems/nldesign/fonts/barlow-semi-condensed-latin-700-normal.woff2 b/css/systems/nldesign/fonts/barlow-semi-condensed-latin-700-normal.woff2 new file mode 100644 index 000000000..d96ddc1d7 Binary files /dev/null and b/css/systems/nldesign/fonts/barlow-semi-condensed-latin-700-normal.woff2 differ diff --git a/css/systems/nldesign/fonts/ibm-plex-mono-latin-400.woff2 b/css/systems/nldesign/fonts/ibm-plex-mono-latin-400.woff2 new file mode 100644 index 000000000..0804aaff9 Binary files /dev/null and b/css/systems/nldesign/fonts/ibm-plex-mono-latin-400.woff2 differ diff --git a/css/systems/nldesign/fonts/ibm-plex-mono-latin-500-normal.woff2 b/css/systems/nldesign/fonts/ibm-plex-mono-latin-500-normal.woff2 new file mode 100644 index 000000000..090f82f7e Binary files /dev/null and b/css/systems/nldesign/fonts/ibm-plex-mono-latin-500-normal.woff2 differ diff --git a/css/systems/nldesign/fonts/ibm-plex-sans-latin-500-normal.woff2 b/css/systems/nldesign/fonts/ibm-plex-sans-latin-500-normal.woff2 new file mode 100644 index 000000000..6d5527eef Binary files /dev/null and b/css/systems/nldesign/fonts/ibm-plex-sans-latin-500-normal.woff2 differ diff --git a/css/systems/nldesign/fonts/lexend-latin-400-normal.woff2 b/css/systems/nldesign/fonts/lexend-latin-400-normal.woff2 new file mode 100644 index 000000000..a65647312 Binary files /dev/null and b/css/systems/nldesign/fonts/lexend-latin-400-normal.woff2 differ diff --git a/css/systems/nldesign/fonts/lexend-latin-500-normal.woff2 b/css/systems/nldesign/fonts/lexend-latin-500-normal.woff2 new file mode 100644 index 000000000..57a4bae04 Binary files /dev/null and b/css/systems/nldesign/fonts/lexend-latin-500-normal.woff2 differ diff --git a/css/systems/nldesign/fonts/lexend-latin-600-normal.woff2 b/css/systems/nldesign/fonts/lexend-latin-600-normal.woff2 new file mode 100644 index 000000000..38cdff617 Binary files /dev/null and b/css/systems/nldesign/fonts/lexend-latin-600-normal.woff2 differ diff --git a/css/systems/nldesign/fonts/lexend-latin-700-normal.woff2 b/css/systems/nldesign/fonts/lexend-latin-700-normal.woff2 new file mode 100644 index 000000000..1639b3445 Binary files /dev/null and b/css/systems/nldesign/fonts/lexend-latin-700-normal.woff2 differ diff --git a/css/systems/nldesign/fonts/red-hat-display-latin-600-normal.woff2 b/css/systems/nldesign/fonts/red-hat-display-latin-600-normal.woff2 new file mode 100644 index 000000000..b7d73a0ce Binary files /dev/null and b/css/systems/nldesign/fonts/red-hat-display-latin-600-normal.woff2 differ diff --git a/css/systems/nldesign/fonts/red-hat-display-latin-700-normal.woff2 b/css/systems/nldesign/fonts/red-hat-display-latin-700-normal.woff2 new file mode 100644 index 000000000..1e9484f34 Binary files /dev/null and b/css/systems/nldesign/fonts/red-hat-display-latin-700-normal.woff2 differ diff --git a/css/systems/nldesign/fonts/red-hat-display-latin-800-normal.woff2 b/css/systems/nldesign/fonts/red-hat-display-latin-800-normal.woff2 new file mode 100644 index 000000000..a162d3e9a Binary files /dev/null and b/css/systems/nldesign/fonts/red-hat-display-latin-800-normal.woff2 differ diff --git a/css/systems/nldesign/fonts/red-hat-text-latin-400-normal.woff2 b/css/systems/nldesign/fonts/red-hat-text-latin-400-normal.woff2 new file mode 100644 index 000000000..f679845ee Binary files /dev/null and b/css/systems/nldesign/fonts/red-hat-text-latin-400-normal.woff2 differ diff --git a/css/systems/nldesign/fonts/red-hat-text-latin-500-normal.woff2 b/css/systems/nldesign/fonts/red-hat-text-latin-500-normal.woff2 new file mode 100644 index 000000000..3881ce0b9 Binary files /dev/null and b/css/systems/nldesign/fonts/red-hat-text-latin-500-normal.woff2 differ diff --git a/css/systems/nldesign/fonts/red-hat-text-latin-600-normal.woff2 b/css/systems/nldesign/fonts/red-hat-text-latin-600-normal.woff2 new file mode 100644 index 000000000..c963fbd1f Binary files /dev/null and b/css/systems/nldesign/fonts/red-hat-text-latin-600-normal.woff2 differ diff --git a/css/systems/nldesign/fonts/red-hat-text-latin-700-normal.woff2 b/css/systems/nldesign/fonts/red-hat-text-latin-700-normal.woff2 new file mode 100644 index 000000000..ff78f0523 Binary files /dev/null and b/css/systems/nldesign/fonts/red-hat-text-latin-700-normal.woff2 differ diff --git a/css/token-overrides/esdoornveen.css b/css/token-overrides/esdoornveen.css new file mode 100644 index 000000000..12124c8e6 --- /dev/null +++ b/css/token-overrides/esdoornveen.css @@ -0,0 +1,66 @@ +/* SPDX-License-Identifier: EUPL-1.2 + SPDX-FileCopyrightText: 2026 Conduction B.V. + + Esdoornveen, mbo college overrides: the dark page, the dark workspace and the + login logo, as css/token-overrides/zuiddrecht.css sets them for zuiddrecht + and for the same reasons (openspec/changes/school-token-sets). + + 1. THE PAGE BACKGROUND. Nextcloud keeps the theming background (#F5F6F8) + in the dark, so a dark workplace would sit in a light grey frame. In the + dark the page takes the colour of the workspace. + + 2. THE WORKSPACE. The generator turns the light #F5F6F8 into a grey that is + lighter than Nextcloud's dark cards (#171717), so the cards would sink + into it. In the dark the workspace is #121315, below the cards. + + 3. WHAT THE GENERATOR DERIVES BELOW AA. Measured by + tests/vitest/schoolTokenSets.spec.js; each is set by hand here: + - --nldesign-color-info: the generator put the info colour at #966bc9, 4.47:1 on the dark cards; it takes the dark link colour, as info equals the link in the light + - --nldesign-color-info-rgb: the same colour as channels + - --nldesign-component-navigation-active-background-color: the generated #d14274 carries the dark label #111111 at 4.26:1 where the entry is filled solid; #d94d7f carries it at 4.78:1 + - --nldesign-component-navigation-active-color: the generated #e36390 is 4.42:1 on the hovered wash; #ec86ab is 6.14:1 on the wash and 5.67:1 hovered + + This lives outside `css/tokens/` because a shipped token file is one flat + `:root { }` block with no at-rule (TokenCssShapeTest). The selectors start + with `:root` so they outrank the generated dark file, which loads after + this one. */ +@media (prefers-color-scheme: dark) { + :root + body:not([data-theme-light]):not([data-theme-dark]):not( + [data-theme-light-highcontrast] + ):not([data-theme-dark-highcontrast]) { + --color-background-plain: #121315; + --color-background-plain-text: var(--color-main-text); + --nldesign-component-content-surface-background-color: #121315; + --nldesign-color-info: #d8c8eb; + --nldesign-color-info-rgb: 216, 200, 235; + --nldesign-component-navigation-active-background-color: #d94d7f; + --nldesign-component-navigation-active-color: #ec86ab; + } +} + +:root body[data-theme-dark], +:root body[data-themes*='dark'] { + --color-background-plain: #121315; + --color-background-plain-text: var(--color-main-text); + --nldesign-component-content-surface-background-color: #121315; + --nldesign-color-info: #d8c8eb; + --nldesign-color-info-rgb: 216, 200, 235; + --nldesign-component-navigation-active-background-color: #d94d7f; + --nldesign-component-navigation-active-color: #ec86ab; +} + +/* The logo on the login card. The NL Design sheet draws it in a 40 by 32 + * pixel box, which suits an emblem; this logo is a wordmark, + * 3.97 times as wide as it is high. It gets 200 by 44 pixels, + * centred in the 100px the card keeps free above the form (the box is + * `contain`, so the wordmark keeps its proportions inside it). Same + * selectors as the rule it follows (css/systems/nldesign/theme.css). */ +#body-login .guest-box.login-box::after, +#body-login div.guest-box::after, +.guest-box.login-box::after, +div.guest-box.login-box::after { + top: 28px !important; + width: 200px !important; + height: 44px !important; +} diff --git a/css/token-overrides/vaartveld.css b/css/token-overrides/vaartveld.css new file mode 100644 index 000000000..6fcf381e3 --- /dev/null +++ b/css/token-overrides/vaartveld.css @@ -0,0 +1,78 @@ +/* SPDX-License-Identifier: EUPL-1.2 + SPDX-FileCopyrightText: 2026 Conduction B.V. + + Vaartveld College overrides: the dark page, the dark workspace and the + login logo, as css/token-overrides/zuiddrecht.css sets them for zuiddrecht + and for the same reasons (openspec/changes/school-token-sets). + + 1. THE PAGE BACKGROUND. Nextcloud keeps the theming background (#F5F6F8) + in the dark, so a dark workplace would sit in a light grey frame. In the + dark the page takes the colour of the workspace. + + 2. THE WORKSPACE. The generator turns the light #F5F6F8 into a grey that is + lighter than Nextcloud's dark cards (#171717), so the cards would sink + into it. In the dark the workspace is #121315, below the cards. + + 3. WHAT THE GENERATOR DERIVES BELOW AA. Measured by + tests/vitest/schoolTokenSets.spec.js; each is set by hand here: + - --nldesign-color-info: the generator kept the info colour at #2f5bd7, 3.07:1 on the dark cards; it takes the dark link colour, as info equals the link in the light + - --nldesign-color-info-rgb: the same colour as channels + + This lives outside `css/tokens/` because a shipped token file is one flat + `:root { }` block with no at-rule (TokenCssShapeTest). The selectors start + with `:root` so they outrank the generated dark file, which loads after + this one. */ +@media (prefers-color-scheme: dark) { + :root + body:not([data-theme-light]):not([data-theme-dark]):not( + [data-theme-light-highcontrast] + ):not([data-theme-dark-highcontrast]) { + --color-background-plain: #121315; + --color-background-plain-text: var(--color-main-text); + --nldesign-component-content-surface-background-color: #121315; + --nldesign-color-info: #9aafec; + --nldesign-color-info-rgb: 154, 175, 236; + } +} + +:root body[data-theme-dark], +:root body[data-themes*='dark'] { + --color-background-plain: #121315; + --color-background-plain-text: var(--color-main-text); + --nldesign-component-content-surface-background-color: #121315; + --nldesign-color-info: #9aafec; + --nldesign-color-info-rgb: 154, 175, 236; +} + +/* The logo on the login card. The NL Design sheet draws it in a 40 by 32 + * pixel box, which suits an emblem; this logo is a wordmark, + * 3.47 times as wide as it is high. It gets 200 by 44 pixels, + * centred in the 100px the card keeps free above the form (the box is + * `contain`, so the wordmark keeps its proportions inside it). Same + * selectors as the rule it follows (css/systems/nldesign/theme.css). */ +#body-login .guest-box.login-box::after, +#body-login div.guest-box::after, +.guest-box.login-box::after, +div.guest-box.login-box::after { + top: 28px !important; + width: 200px !important; + height: 44px !important; +} + +/* The solid selected entry: ink on the accent. + + Where Nextcloud still fills the selected navigation entry solid (the + server-rendered navigation of the settings pages, an entry marked + --legacy, and every entry on Nextcloud 32 and 33), it fills it with the + accent #1FB5A8 and writes the primary's label colour on it: white, which + is under 3:1 on this accent. The design writes ink on the accent, so the + label colour is ink for those entries only. The wash Nextcloud 34 and later + draw keeps its own label (--nldesign-component-navigation-active-color). + Same selectors as the rule in css/systems/nldesign/element-overrides.css + that hands those entries the label colour, one `:root` in front. */ +:root #app-navigation li.active, +:root #app-navigation .app-navigation-entry--legacy.active, +:root #app-navigation-vue .app-navigation-entry--legacy.active, +:root .app-navigation .app-navigation-entry--legacy.active { + --color-primary-element-text: #1a1a1a; +} diff --git a/css/token-overrides/warmtepompacademie.css b/css/token-overrides/warmtepompacademie.css new file mode 100644 index 000000000..06def85a3 --- /dev/null +++ b/css/token-overrides/warmtepompacademie.css @@ -0,0 +1,51 @@ +/* SPDX-License-Identifier: EUPL-1.2 + SPDX-FileCopyrightText: 2026 Conduction B.V. + + Warmtepompacademie overrides: the dark page, the dark workspace and the + login logo, as css/token-overrides/zuiddrecht.css sets them for zuiddrecht + and for the same reasons (openspec/changes/school-token-sets). + + 1. THE PAGE BACKGROUND. Nextcloud keeps the theming background (#F5F6F8) + in the dark, so a dark workplace would sit in a light grey frame. In the + dark the page takes the colour of the workspace. + + 2. THE WORKSPACE. The generator turns the light #F5F6F8 into a grey that is + lighter than Nextcloud's dark cards (#171717), so the cards would sink + into it. In the dark the workspace is #121315, below the cards. + + This lives outside `css/tokens/` because a shipped token file is one flat + `:root { }` block with no at-rule (TokenCssShapeTest). The selectors start + with `:root` so they outrank the generated dark file, which loads after + this one. */ +@media (prefers-color-scheme: dark) { + :root + body:not([data-theme-light]):not([data-theme-dark]):not( + [data-theme-light-highcontrast] + ):not([data-theme-dark-highcontrast]) { + --color-background-plain: #121315; + --color-background-plain-text: var(--color-main-text); + --nldesign-component-content-surface-background-color: #121315; + } +} + +:root body[data-theme-dark], +:root body[data-themes*='dark'] { + --color-background-plain: #121315; + --color-background-plain-text: var(--color-main-text); + --nldesign-component-content-surface-background-color: #121315; +} + +/* The logo on the login card. The NL Design sheet draws it in a 40 by 32 + * pixel box, which suits an emblem; this logo is a wordmark, + * 3.78 times as wide as it is high. It gets 200 by 44 pixels, + * centred in the 100px the card keeps free above the form (the box is + * `contain`, so the wordmark keeps its proportions inside it). Same + * selectors as the rule it follows (css/systems/nldesign/theme.css). */ +#body-login .guest-box.login-box::after, +#body-login div.guest-box::after, +.guest-box.login-box::after, +div.guest-box.login-box::after { + top: 28px !important; + width: 200px !important; + height: 44px !important; +} diff --git a/css/token-overrides/wilgenboom.css b/css/token-overrides/wilgenboom.css new file mode 100644 index 000000000..0dc83353d --- /dev/null +++ b/css/token-overrides/wilgenboom.css @@ -0,0 +1,69 @@ +/* SPDX-License-Identifier: EUPL-1.2 + SPDX-FileCopyrightText: 2026 Conduction B.V. + + Basisschool De Wilgenboom overrides: the dark page, the dark workspace and the + login logo, as css/token-overrides/zuiddrecht.css sets them for zuiddrecht + and for the same reasons (openspec/changes/school-token-sets). + + 1. THE PAGE BACKGROUND. Nextcloud keeps the theming background (#F5F6F8) + in the dark, so a dark workplace would sit in a light grey frame. In the + dark the page takes the colour of the workspace. + + 2. THE WORKSPACE. The generator turns the light #F5F6F8 into a grey that is + lighter than Nextcloud's dark cards (#171717), so the cards would sink + into it. In the dark the workspace is #121315, below the cards. + + This lives outside `css/tokens/` because a shipped token file is one flat + `:root { }` block with no at-rule (TokenCssShapeTest). The selectors start + with `:root` so they outrank the generated dark file, which loads after + this one. */ +@media (prefers-color-scheme: dark) { + :root + body:not([data-theme-light]):not([data-theme-dark]):not( + [data-theme-light-highcontrast] + ):not([data-theme-dark-highcontrast]) { + --color-background-plain: #121315; + --color-background-plain-text: var(--color-main-text); + --nldesign-component-content-surface-background-color: #121315; + } +} + +:root body[data-theme-dark], +:root body[data-themes*='dark'] { + --color-background-plain: #121315; + --color-background-plain-text: var(--color-main-text); + --nldesign-component-content-surface-background-color: #121315; +} + +/* The logo on the login card. The NL Design sheet draws it in a 40 by 32 + * pixel box, which suits an emblem; this logo is a wordmark, + * 4.77 times as wide as it is high. It gets 200 by 44 pixels, + * centred in the 100px the card keeps free above the form (the box is + * `contain`, so the wordmark keeps its proportions inside it). Same + * selectors as the rule it follows (css/systems/nldesign/theme.css). */ +#body-login .guest-box.login-box::after, +#body-login div.guest-box::after, +.guest-box.login-box::after, +div.guest-box.login-box::after { + top: 28px !important; + width: 200px !important; + height: 44px !important; +} + +/* The solid selected entry: ink on the accent. + + Where Nextcloud still fills the selected navigation entry solid (the + server-rendered navigation of the settings pages, an entry marked + --legacy, and every entry on Nextcloud 32 and 33), it fills it with the + accent #F5B82E and writes the primary's label colour on it: white, which + is under 3:1 on this accent. The design writes ink on the accent, so the + label colour is ink for those entries only. The wash Nextcloud 34 and later + draw keeps its own label (--nldesign-component-navigation-active-color). + Same selectors as the rule in css/systems/nldesign/element-overrides.css + that hands those entries the label colour, one `:root` in front. */ +:root #app-navigation li.active, +:root #app-navigation .app-navigation-entry--legacy.active, +:root #app-navigation-vue .app-navigation-entry--legacy.active, +:root .app-navigation .app-navigation-entry--legacy.active { + --color-primary-element-text: #1a1a1a; +} diff --git a/css/token-overrides/zuiddrecht.css b/css/token-overrides/zuiddrecht.css index 2bf87a323..3833fb705 100644 --- a/css/token-overrides/zuiddrecht.css +++ b/css/token-overrides/zuiddrecht.css @@ -61,3 +61,541 @@ div.guest-box.login-box::after { width: 200px !important; height: 44px !important; } + +/* THE WORKPLACE BOARDS (DqTokens, DqZijbalk, DqDashboard, DqZaken, DqZaak: + * ~/memcap-work/zuiddrecht/project, canvas QaVhkmB26mfFGJs8VWUDRF). What the + * tokens cannot say about the shapes the Conduction library draws, for this + * set only: the measures of the boards on the library's own class names, and + * every colour through a token so the dark variant keeps up on its own. + * + * Sizes: page title 28, greeting 32, card title 18, attention card title 20, + * kicker 13, counter value 34, table 14, navigation caption 12 (DqTokens: + * "Paginatitel 30, Kaarttitel 18, Tekst 15, Meta 13"; the page boards draw + * their titles at 28). + * + * EVERY SELECTOR CARRIES THE CONTENT OR NAVIGATION ID. The library's own + * rules are component-scoped (`.cn-x[data-v-…]`) and injected after this + * sheet, so a bare class here loses twice: on specificity and on order. + * `#app-content-vue` / `#app-navigation-vue` outrank both, the way + * element-overrides.css already addresses the navigation (measured on the + * throwaway instance, 6 October 2026: a bare `.cn-kpi-card__value` lost to + * the inline rule and the counter stayed 18.75px). */ + +/* THE NAVIGATION'S WIDTH AND ITS SELECTED ENTRY ARE NOT IN THIS FILE. The + * set's `layout` block in token-sets.json names a 264px navigation (DqZijbalk) + * and the soft selected entry, so with nothing stored the page loads + * css/navigation-width.css with an inline 264px and + * css/navigation-active-soft.css (LayoutOptionsService::stylesheets(), after + * this sheet). A literal here would only overrule an administrator who picks + * another width or the plain entry. */ +:root { + /* Headings: the NL Design sheet sizes every h2 and h3 from these tokens + * with !important, so a class rule cannot. h2 stays the defaults' 2rem + * (30px: DqTokens "Paginatitel 30"); h3, the card title, is 18px + * ("Kaarttitel 18"). */ + --nldesign-component-heading-3-font-size: 18px; + + /* Cards: 12px (DqTokens "12 kaart"), the radius the library's widgets + * already draw; Nextcloud's own cards (the dashboard panels, the Files + * list, the settings sections) read this one and were 16. */ + --nldesign-nc-border-radius-container-large: 12px; +} + +/* The captions: small capitals in grey. */ +#app-navigation-vue .app-navigation-caption__name, +.app-navigation .app-navigation-caption__name { + font-size: 12px; + font-weight: 600; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--color-text-maxcontrast); +} + +/* The card at the foot of the navigation (DqZijbalk "Dag afsluiten"): its + * link reads as a link, 14px, 600, in the link colour and underlined. Two + * ids: the NL Design link sheet paints every `a:not(#header a)` in the + * surface text colour with an id-strength !important rule, and the + * navigation sheet takes the underline off every link in the panel. */ +#content #app-navigation-vue .cn-app-nav__card-link { + color: var(--nldesign-color-link) !important; + font-size: 14px; + font-weight: 600; + text-decoration: underline !important; +} + +#content #app-navigation-vue .cn-app-nav__card-link:hover { + color: var(--nldesign-color-link-hover) !important; +} + +/* The greeting (DqDashboard: 32px, an h2 the heading token would hold at 30). */ +#app-content-vue .cn-header-widget__title { + font-size: 32px !important; + letter-spacing: -0.01em; +} + +/* The attention card: a 20px title (an h3, 18 by the token) under a 13px + * kicker in the accent's dark step (DqDashboard "Vandaag eerst"); the + * paragraph sheet otherwise sizes the kicker as body text. */ +#app-content-vue .cn-banner-widget__title { + font-size: 20px !important; + line-height: 1.3; +} + +#app-content-vue .cn-banner-widget__kicker { + font-size: 13px !important; + font-weight: 700; + letter-spacing: 0.06em; +} + +#app-content-vue .cn-banner-widget--error .cn-banner-widget__kicker { + color: var(--nldesign-color-accent-text) !important; +} + +/* Two ids: the NL Design link sheet paints every `a:not(#header a)` with an + * id-strength !important rule, and this action is a link. */ +#content #app-content-vue .cn-banner-widget__action--primary { + border-color: var(--color-primary-element) !important; + background: var(--color-primary-element) !important; + /* The set's own button text token (white, ink in the dark variant): the link sheet otherwise paints the + * label link-blue on the blue button (measured 6 October 2026). */ + color: var(--nldesign-color-button-primary-text, #fff) !important; +} + +/* Counters (DqDashboard): a grey 14px label over a 34px number. The value + * rule names the stat widget's own class: the countdown tile in a case's side + * column shares `.cn-kpi-card__value`, and at 34px "31 days overdue" no longer + * fits its card (DqZaak draws that one at 26px, which it keeps). */ +#app-content-vue .cn-kpi-card__title { + font-weight: 400; + color: var(--color-text-maxcontrast); +} + +#app-content-vue .cn-stat-widget__value { + font-size: 34px; + line-height: 1; + letter-spacing: -0.01em; +} + +/* Views on a list (DqZaken): 38px pills, the chosen one ink on white. */ +#app-content-vue .cn-quick-filter-bar__tab { + min-height: 38px; + border-radius: 19px; + font-size: 14px; + font-weight: 600; +} + +#app-content-vue .cn-quick-filter-bar__tab--active { + background-color: var(--color-main-text); + border-color: var(--color-main-text); + color: var(--color-main-background); +} + +/* The label and the count inside it are spans, and the NL Design element + * sheet paints every `span:not(#header span)` in the surface text colour with + * an id-strength !important rule: ink on ink, a black pill with no label + * (seen on :8080, 6 October 2026). Two ids outrank it. */ +#content #app-content-vue .cn-quick-filter-bar__tab--active, +#content + #app-content-vue + .cn-quick-filter-bar__tab--active + span:not(#header span):not(#header * span) { + color: var(--color-main-background) !important; +} + +#content + #app-content-vue + .cn-quick-filter-bar__tab--active + .cn-quick-filter-bar__count { + background-color: color-mix( + in srgb, + var(--color-main-background) 22%, + transparent + ); +} + +/* The table (DqZaken): a quiet 14px header in grey on a near-white row, 14px cells. */ +#app-content-vue .cn-data-table thead th { + font-size: 14px; + font-weight: 600; + color: var(--color-text-maxcontrast); + background-color: color-mix( + in srgb, + var(--color-main-background) 60%, + var(--color-background-hover) + ); +} + +#app-content-vue .cn-data-table tbody td { + font-size: 14px; +} + +/* My tasks as a checkbox list (DqDashboard "Mijn taken"; dossiq's opt-in + * `variant: list`, which the simple profile declares): the task in the text + * colour, its case and its date in grey, a date due today or past in the + * accent's dark step, bold. The NL Design element sheet paints every `a`, + * `span` and `div` outside the header with an !important rule of up to two + * ids, so these carry three: `:not(#header *)` adds the third and matches + * everything in the content. */ +#content #app-content-vue .dossiq-task-list__title:not(#header *) { + color: var(--color-main-text) !important; + text-decoration: none !important; +} + +#content #app-content-vue .dossiq-task-list__title:not(#header *):hover, +#content #app-content-vue .dossiq-task-list__title:not(#header *):focus-visible { + text-decoration: underline !important; +} + +#content #app-content-vue .dossiq-task-list__case:not(#header *), +#content #app-content-vue .dossiq-task-list__due:not(#header *) { + color: var(--color-text-maxcontrast) !important; +} + +#content #app-content-vue .dossiq-task-list__due--urgent:not(#header *) { + color: var(--nldesign-color-accent-text) !important; +} + +/* THE APP NAVIGATION (DqZijbalk, AppZijbalk): the measures of the boards on + * Nextcloud's navigation and the library's brand block, card and button, for + * this set only. Every colour through a token. + * + * The workplace has no floating page: the navigation runs from the top bar + * to the bottom of the window along the left edge, with a hairline on its + * right, and the workspace fills the rest. Nextcloud draws the page as a + * card 8px in from the window with rounded corners; here that margin and + * that radius are 0. */ +body:not(#body-login) { + --body-container-margin: 0px; + --body-container-radius: 0px; + --body-height: calc( + 100% - env(safe-area-inset-bottom) - var(--header-height) - + var(--body-container-margin) + ); +} + +:is(#content, #content-vue) .app-navigation { + border-inline-end: 1px solid var(--color-border); +} + +/* The column: 20px from the top and the bottom, 14px from the sides, 20px + * between the brand, the button, the groups, the card and the footer. The + * lists inside lose their own inset, so the column says it once. */ +:is(#content, #content-vue) #app-navigation-vue { + --app-navigation-padding: 0px; + --cn-nav-card-background: var( + --nldesign-component-content-surface-background-color + ); + --cn-nav-card-radius: 12px; + + box-sizing: border-box; + gap: 20px; + padding: 20px 14px; +} + +:is(#content, #content-vue) #app-navigation-vue .app-navigation__search, +:is(#content, #content-vue) #app-navigation-vue .app-navigation__body, +:is(#content, #content-vue) #app-navigation-vue .app-navigation-list { + padding: 0 !important; +} + +:is(#content, #content-vue) #app-navigation-vue .app-navigation-list { + gap: 2px; +} + +/* A navigation without a brand block or a primary button keeps no empty + * room for them. */ +:is(#content, #content-vue) #app-navigation-vue .app-navigation__search:empty, +:is(#content, #content-vue) #app-navigation-vue .app-navigation__body:empty { + display: none; +} + +/* The brand block: the emblem 34px high, 10px to the name; the name 19px + * bold, the municipality 13px in grey under it. */ +:is(#content, #content-vue) #app-navigation-vue .cn-app-nav__brand { + gap: 10px; + padding: 0 8px; +} + +:is(#content, #content-vue) + #app-navigation-vue + .cn-app-nav__brand-name:not(#header *) { + color: var(--color-main-text) !important; + font-size: 19px; + font-weight: 700; +} + +:is(#content, #content-vue) + #app-navigation-vue + .cn-app-nav__brand-caption:not(#header *) { + color: var( + --nldesign-color-text-muted, + var(--color-text-maxcontrast) + ) !important; + font-size: 13px; +} + +/* The primary button: 42px, the controls' radius, 15px semibold. */ +:is(#content, #content-vue) #app-navigation-vue .cn-app-nav__primary-action { + padding: 0; +} + +:is(#content, #content-vue) + #app-navigation-vue + .cn-app-nav__primary-action + .button-vue { + height: 42px; + min-height: 42px; + border-radius: var(--border-radius-element, 8px); + font-size: 15px; + font-weight: 600; +} + +/* A group caption: 12px small capitals in grey, 6px above its first entry + * and 20px under the group before it. */ +:is(#content, #content-vue) #app-navigation-vue .app-navigation-caption { + display: block !important; + flex-shrink: 0; + height: auto !important; + margin-top: 18px; + padding: 0 10px 4px; +} + +:is(#content, #content-vue) #app-navigation-vue .app-navigation-caption:first-child, +:is(#content, #content-vue) + #app-navigation-vue + .app-navigation-list__highlight + + .app-navigation-caption { + margin-top: 0; +} + +/* A caption drawn as a heading (Settings: "Personal", "Administration") is + * an h2, which the NL Design heading sheet sizes with !important. */ +:is(#content, #content-vue) #app-navigation-vue .app-navigation-caption__name { + /* The NL Design text sheet paints every span the surface text with an + * id-strength !important rule; it reads this variable first. */ + --nldesign-color-on-surface: var( + --nldesign-color-text-muted, + var(--color-text-maxcontrast) + ); + + overflow: hidden; + color: var( + --nldesign-color-text-muted, + var(--color-text-maxcontrast) + ) !important; + font-size: 12px !important; + font-weight: 600 !important; + letter-spacing: 0.06em !important; + text-overflow: ellipsis; + text-transform: uppercase; + white-space: nowrap; + display: block !important; + height: auto !important; + min-height: 0 !important; + margin: 0 !important; + padding: 0 !important; + line-height: 16px !important; +} + +/* An entry: 42px, 10px in from its edge, a 20px icon 12px from the label, + * 15px medium; the selected one is the soft style's (navigation-active-soft.css). */ +:is(#content, #content-vue) #app-navigation-vue .app-navigation-entry { + min-height: 42px; + border-radius: var(--border-radius-element, 8px); +} + +/* An entry under the pointer: the workspace grey (DqTokens "Bij aanwijzen: + * grijs vlak"). */ +:is(#content, #content-vue) + #app-navigation-vue + .app-navigation-entry:not(.active):hover { + background-color: var( + --nldesign-component-content-surface-background-color + ) !important; +} + +:is(#content, #content-vue) #app-navigation-vue .app-navigation-entry-link { + gap: 12px; + min-height: 42px; + padding-inline: 10px 0 !important; + font-size: 15px; + font-weight: 500; +} + +:is(#content, #content-vue) #app-navigation-vue .app-navigation-entry-icon { + flex: 0 0 20px; + width: 20px !important; + min-width: 20px !important; + height: auto; +} + +:is(#content, #content-vue) #app-navigation-vue .app-navigation-entry-icon svg { + width: 20px; + height: 20px; +} + +:is(#content, #content-vue) #app-navigation-vue .app-navigation-entry__name { + padding: 0; + font-size: 15px; + font-weight: inherit; + line-height: 42px; +} + +:is(#content, #content-vue) + #app-navigation-vue + .cn-app-nav__footer-list + .app-navigation-entry__name { + line-height: 40px; +} + +:is(#content, #content-vue) #app-navigation-vue .app-navigation-entry__utils { + margin: 0 !important; + padding: 0 10px 0 0 !important; +} + +:is(#content, #content-vue) + #app-navigation-vue + .app-navigation-entry__counter-wrapper { + margin: 0 !important; + padding: 0 !important; +} + +/* The count: a 22px red circle with white 12px bold figures (it grows into + * a pill past two figures). The NL Design element sheet paints every `div` + * outside the header with an id-strength rule, so this carries three. */ +:is(#content, #content-vue) + #app-navigation-vue + .counter-bubble__counter:not(#header *) { + box-sizing: border-box; + min-width: 22px; + height: 22px; + padding: 0 6px; + border-radius: 11px; + background-color: var( + --nldesign-component-navigation-badge-background-color + ) !important; + color: var(--nldesign-component-navigation-badge-color) !important; + font-size: 12px; + font-weight: 700; + line-height: 22px; +} + +/* The card ("Dag afsluiten") sits at the foot of the column, on the + * workspace grey with the cards' radius. */ +:is(#content, #content-vue) #app-navigation-vue .cn-app-nav__card { + margin: auto 0 0; + padding: 16px; +} + +:is(#content, #content-vue) + #app-navigation-vue + .cn-app-nav__card-title:not(#header *) { + color: var(--color-main-text) !important; + font-size: 15px; +} + +:is(#content, #content-vue) + #app-navigation-vue + .cn-app-nav__card-text:not(#header *) { + color: var( + --nldesign-color-text-muted, + var(--color-text-maxcontrast) + ) !important; + font-size: 14px; + line-height: 1.4; +} + +/* The footer entries (Instellingen, Hulp en uitleg): 40px, regular weight. */ +:is(#content, #content-vue) + #app-navigation-vue + .cn-app-nav__footer-list + .app-navigation-entry, +:is(#content, #content-vue) + #app-navigation-vue + .cn-app-nav__footer-list + .app-navigation-entry-link { + min-height: 40px; +} + +:is(#content, #content-vue) + #app-navigation-vue + .cn-app-nav__footer-list + .app-navigation-entry-link { + font-weight: 400; +} + +/* The settings foldout the library puts above the footer entries + * (`nav.footer: ["settings", …]`): drawn as one of those entries, 40px, + * regular weight, its icon where the entries carry theirs, 2px above the + * next entry as in one list. */ +:is(#content, #content-vue) #app-navigation-vue [data-testid='cn-nav-settings'], +:is(#content, #content-vue) + #app-navigation-vue + [data-testid='cn-nav-settings'] + > div:first-child { + margin: 0 !important; + padding: 0 !important; +} + +:is(#content, #content-vue) + #app-navigation-vue + [data-testid='cn-nav-settings'] + > div + > .button-vue { + height: 40px !important; + min-height: 40px; + border: 0 !important; + padding: 0 10px !important; + border-radius: var(--border-radius-element, 8px); + color: var(--color-main-text) !important; +} + +:is(#content, #content-vue) + #app-navigation-vue + [data-testid='cn-nav-settings'] + > div + > .button-vue + .button-vue__wrapper { + gap: 12px; + justify-content: flex-start; +} + +:is(#content, #content-vue) + #app-navigation-vue + [data-testid='cn-nav-settings'] + > div + > .button-vue + .button-vue__icon { + width: 20px; + min-width: 20px; + height: 40px; +} + +:is(#content, #content-vue) + #app-navigation-vue + [data-testid='cn-nav-settings'] + > div + > .button-vue + .button-vue__text { + margin: 0; + padding: 0; + font-size: 15px; + font-weight: 400 !important; +} + +:is(#content, #content-vue) + #app-navigation-vue + .cn-app-nav__footer-list--after-settings { + margin-top: -18px; +} + +/* The button that folds the navigation away sits over the top left corner + * of the page (it covered the "T" of the Theming title). The boards draw no + * such button: on a wide screen the navigation stays. Below 1024px, where + * Nextcloud slides the navigation in and out, the button stays. */ +@media (min-width: 1024px) { + :is(#content, #content-vue) .app-navigation-toggle-wrapper, + :is(#content, #content-vue) .app-navigation .app-navigation-toggle { + display: none !important; + } +} diff --git a/css/tokens/dark/denhaag.css b/css/tokens/dark/denhaag.css index 77274e5ff..e7a4261dc 100644 --- a/css/tokens/dark/denhaag.css +++ b/css/tokens/dark/denhaag.css @@ -1,200 +1,2062 @@ -/* GENERATED by nldesign DarkPaletteService v9 from tokens/denhaag.css (sha256:7ae80c6f06039b1bbdccc66aa1e045d09674b8665426a9def0e8c5821b34613a) — do not edit */ +/* GENERATED by nldesign DarkPaletteService v9 from tokens/denhaag.css (sha256:668a916c3252418f205127f58c5c0778414066801fcdb7d3bbed71a1bc6e8a2f) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { - --denhaag-color-blue: #59a5e4; - --denhaag-color-green: #7cdda0; - --denhaag-color-green-dark: #8ce2ac; - --denhaag-color-orange: #d4611d; - --denhaag-color-red: #ca3232; - --denhaag-color-yellow: #dfb715; + --ams-date-input-background-color: #141414; + --ams-date-input-border-color: #848484; + --ams-date-input-color: #b5b5b5; + --ams-pagination-button-active-color: #7adc98; + --ams-pagination-button-color: #7adc98; + --ams-pagination-button-current-background-color: #1f1f1f; + --ams-pagination-button-current-color: #d1d1d1; + --ams-pagination-button-focus-background-color: #5ba6e4; + --ams-pagination-button-focus-color: #7adc98; + --ams-pagination-button-hover-color: #7adc98; + --ams-pagination-color: #7adc98; + --ams-pagination-description-color: #d1d1d1; + --ams-pagination-ellipses-color: #9e9e9e; + --ams-pagination-relative-link-active-color: #7adc98; + --ams-pagination-relative-link-color: #7adc98; + --ams-pagination-relative-link-disabled-color: #9e9e9e; + --ams-pagination-relative-link-focus-background-color: #5ba6e4; + --ams-pagination-relative-link-focus-color: #7adc98; + --ams-pagination-relative-link-hover-color: #7adc98; + --conduction-primary-top-nav-background-color: #5ba6e4; + --conduction-primary-top-nav-color: #9e9e9e; + --conduction-primary-top-nav-current-background-color: #5ba6e4; + --conduction-primary-top-nav-current-color: #9e9e9e; + --conduction-primary-top-nav-dropdown-background-color: #0c283f; + --conduction-primary-top-nav-dropdown-color: #ebebeb; + --conduction-primary-top-nav-dropdown-current-background-color: #0c283f; + --conduction-primary-top-nav-dropdown-current-color: #ebebeb; + --conduction-primary-top-nav-dropdown-hover-background-color: #0c283f; + --conduction-primary-top-nav-dropdown-hover-color: #ebebeb; + --conduction-primary-top-nav-hover-background-color: #5ba6e4; + --conduction-primary-top-nav-hover-color: #9e9e9e; + --conduction-tabs-scroll-button-background-color: #74d492; + --conduction-tabs-scroll-button-color: #9e9e9e; + --conduction-tabs-scroll-button-hover-background-color: #89d9a0; + --conduction-tabs-scroll-button-hover-color: #9e9e9e; + --conduction-tabs-tab-color: #d1d1d1; + --conduction-tabs-tab-hover-color: #d1d1d1; + --conduction-tabs-tab-list-border-bottom-color: #1f1f1f; + --conduction-tabs-tab-selected-border-bottom-color: #5ba6e4; + --conduction-tabs-tab-selected-color: #b0dafc; + --conduction-tabs-tab-selected-hover-color: #b0dafc; + --conduction-tooltip-background-color: #ebebeb; + --conduction-tooltip-color: #9e9e9e; + --denhaag-accordion-section-content-background-color: #141414; + --denhaag-accordion-section-description-color: #d1d1d1; + --denhaag-accordion-section-header-background-color: #141414; + --denhaag-accordion-section-header-icon-color: #7adc98; + --denhaag-accordion-section-title-color: #7adc98; + --denhaag-action-background-color: #141414; + --denhaag-action-border-color: #3b3b3b; + --denhaag-action-color: #d1d1d1; + --denhaag-action-date-color: #b5b5b5; + --denhaag-action-date-warning-color: #ffaa75; + --denhaag-action-link-icon-color: #5eaced; + --denhaag-action-single-focus-outline-color: #f8da72; + --denhaag-action-single-hover-background-color: #1f1f1f; + --denhaag-action-warning-icon-color: #fe883e; + --denhaag-alert-error-action-button-background-color: #ed4734; + --denhaag-alert-error-action-button-color: #9e9e9e; + --denhaag-alert-error-action-button-hover-background-color: #f65b56; + --denhaag-alert-error-background-color: #470904; + --denhaag-alert-error-close-icon-color: #ffaead; + --denhaag-alert-error-icon-color: #f95644; + --denhaag-alert-error-paragraph-color: #ffaead; + --denhaag-alert-error-title-color: #ffaead; + --denhaag-alert-info-action-button-background-color: #5ba6e4; + --denhaag-alert-info-action-button-color: #9e9e9e; + --denhaag-alert-info-action-button-hover-background-color: #73b7ee; + --denhaag-alert-info-background-color: #0c283f; + --denhaag-alert-info-close-icon-color: #b0dafc; + --denhaag-alert-info-icon-color: #5eaced; + --denhaag-alert-info-paragraph-color: #b0dafc; + --denhaag-alert-info-title-color: #b0dafc; + --denhaag-alert-success-action-button-background-color: #74d492; + --denhaag-alert-success-action-button-color: #9e9e9e; + --denhaag-alert-success-action-button-hover-background-color: #89d9a0; + --denhaag-alert-success-background-color: #243c24; + --denhaag-alert-success-close-icon-color: #d1ffe0; + --denhaag-alert-success-icon-color: #7adc98; + --denhaag-alert-success-paragraph-color: #d1ffe0; + --denhaag-alert-success-title-color: #d1ffe0; + --denhaag-alert-warning-action-button-background-color: #f7a06a; + --denhaag-alert-warning-action-button-color: #9e9e9e; + --denhaag-alert-warning-action-button-hover-background-color: #f7a06a; + --denhaag-alert-warning-background-color: #683e05; + --denhaag-alert-warning-close-icon-color: #ffaa75; + --denhaag-alert-warning-icon-color: #ffaa75; + --denhaag-alert-warning-paragraph-color: #ffaa75; + --denhaag-alert-warning-title-color: #ffaa75; + --denhaag-anchor-collapse-border-color: #3b3b3b; + --denhaag-anchor-collapse-summary-active-color: #7adc98; + --denhaag-anchor-collapse-summary-color: #d1d1d1; + --denhaag-anchor-collapse-summary-focus-color: #7adc98; + --denhaag-anchor-collapse-summary-hover-color: #7adc98; + --denhaag-anchor-navigation-link-active-color: #7adc98; + --denhaag-anchor-navigation-link-background-color: #3b3b3b; + --denhaag-anchor-navigation-link-color: #b5b5b5; + --denhaag-anchor-navigation-link-focus-color: #7adc98; + --denhaag-anchor-navigation-link-hover-color: #7adc98; + --denhaag-anchor-navigation-link-target-color: #7adc98; + --denhaag-article-meta-border-color: #3b3b3b; + --denhaag-article-meta-color: #b5b5b5; + --denhaag-article-meta-horizontal-item-border-color: #3b3b3b; + --denhaag-blockquote-attribution-color: #b5b5b5; + --denhaag-blockquote-border-color: #243c24; + --denhaag-blockquote-paragraph-color: #93e1aa; + --denhaag-breadcrumb-background-color: #201c16; + --denhaag-breadcrumb-color: #b5b5b5; + --denhaag-breadcrumb-current-color: #b5b5b5; + --denhaag-breadcrumb-dots-background-color: #1f1f1f; + --denhaag-breadcrumb-dots-color: #9e9e9e; + --denhaag-breadcrumb-dots-hover-background-color: #3b3b3b; + --denhaag-breadcrumb-link-color: #5eaced; + --denhaag-breadcrumb-link-focus-color: #7ec0f6; + --denhaag-breadcrumb-link-hover-color: #7ec0f6; + --denhaag-button-focus-border-color: #f8da72; + --denhaag-button-primary-action-background-color: #74d492; + --denhaag-button-primary-action-color: #9e9e9e; + --denhaag-button-primary-action-disabled-background-color: #3b3b3b; + --denhaag-button-primary-action-disabled-color: #9e9e9e; + --denhaag-button-primary-action-hover-background-color: #89d9a0; + --denhaag-button-primary-action-hover-color: #9e9e9e; + --denhaag-button-secondary-action-background-color: #141414; + --denhaag-button-secondary-action-border-color: #74d492; + --denhaag-button-secondary-action-color: #7adc98; + --denhaag-button-secondary-action-disabled-background-color: #141414; + --denhaag-button-secondary-action-disabled-border-color: #3b3b3b; + --denhaag-button-secondary-action-disabled-color: #9e9e9e; + --denhaag-button-secondary-action-hover-background-color: #141414; + --denhaag-button-secondary-action-hover-border-color: #89d9a0; + --denhaag-button-secondary-action-hover-color: #93e1aa; + --denhaag-card-authentication-background-color: #141414; + --denhaag-card-authentication-border-color: #3b3b3b; + --denhaag-card-news-icon-color: #5eaced; + --denhaag-case-card-action-active-color: #7ec0f6; + --denhaag-case-card-action-color: #5eaced; + --denhaag-case-card-archived-action-active-color: #d1d1d1; + --denhaag-case-card-archived-action-color: #b5b5b5; + --denhaag-case-card-archived-background-background-color: #1f1f1f; + --denhaag-case-card-archived-background-color: #3b3b3b; + --denhaag-case-card-archived-color: #b5b5b5; + --denhaag-case-card-archived-context-color: #b5b5b5; + --denhaag-case-card-archived-subtitle-color: #b5b5b5; + --denhaag-case-card-archived-title-color: #d1d1d1; + --denhaag-case-card-background-background-color: #0c283f; + --denhaag-case-card-background-color: #1a3f64; + --denhaag-case-card-context-color: #7ec0f6; + --denhaag-case-card-list-background-hover-background-color: #1f1f1f; + --denhaag-case-card-list-border-color: #3b3b3b; + --denhaag-case-card-list-context-color: #b5b5b5; + --denhaag-case-card-list-subtitle-color: #b5b5b5; + --denhaag-case-card-list-title-color: #d1d1d1; + --denhaag-case-card-paper-color: #9e9e9e; + --denhaag-case-card-subtitle-color: #7ec0f6; + --denhaag-case-card-title-color: #b0dafc; + --denhaag-checkbox-checked-disabled-background-color: #3b3b3b; + --denhaag-checkbox-checked-disabled-border-color: #3b3b3b; + --denhaag-checkbox-checked-invalid-background-color: #ed4734; + --denhaag-checkbox-hover-border-color: #acacac; + --denhaag-checkbox-hover-checked-background-color: #89d9a0; + --denhaag-checkbox-hover-checked-border-color: #89d9a0; + --denhaag-checkbox-hover-invalid-background-color: #f65b56; + --denhaag-checkbox-hover-invalid-border-color: #f65b56; + --denhaag-color-black: #ebebeb; + --denhaag-color-blue-1: #0c283f; + --denhaag-color-blue-2: #1a3f64; + --denhaag-color-blue-3: #5ba6e4; + --denhaag-color-blue-4: #73b7ee; + --denhaag-color-blue-5: #9acdf6; + --denhaag-color-green-1: #243c24; + --denhaag-color-green-2: #51854f; + --denhaag-color-green-3: #74d492; + --denhaag-color-green-4: #89d9a0; + --denhaag-color-green-5: #b4fbcb; + --denhaag-color-grey-1: #1f1f1f; + --denhaag-color-grey-2: #3b3b3b; + --denhaag-color-grey-3: #848484; + --denhaag-color-grey-4: #acacac; + --denhaag-color-grey-5: #c4c4c4; + --denhaag-color-ocher-1: #4b3f04; + --denhaag-color-ocher-2: #887307; + --denhaag-color-ocher-3: #d0b012; + --denhaag-color-ocher-4: #f4cb35; + --denhaag-color-ocher-5: #f8da72; + --denhaag-color-orange-1: #683e05; + --denhaag-color-orange-2: #a96309; + --denhaag-color-orange-3: #f39419; + --denhaag-color-orange-4: #f37526; + --denhaag-color-orange-5: #f7a06a; + --denhaag-color-red-1: #470904; + --denhaag-color-red-2: #87231a; + --denhaag-color-red-3: #ed4734; + --denhaag-color-red-4: #f65b56; + --denhaag-color-red-5: #fa9897; + --denhaag-color-warmgrey-1: #201c16; + --denhaag-color-white: #141414; + --denhaag-contact-timeline-step-header-toggle-active-color: #7adc98; + --denhaag-contact-timeline-step-header-toggle-focus-color: #7adc98; + --denhaag-contact-timeline-step-header-toggle-hover-color: #7adc98; + --denhaag-contact-timeline-step-meta-marker-color: #ebebeb; + --denhaag-cta-download-border-color: #3b3b3b; + --denhaag-cta-download-color: #b5b5b5; + --denhaag-cta-download-dot-background-color: #5ba6e4; + --denhaag-cta-download-dot-color: #9e9e9e; + --denhaag-cta-download-focus-dot-background-color: #73b7ee; + --denhaag-cta-download-hover-dot-background-color: #73b7ee; + --denhaag-cta-download-title-color: #d1d1d1; + --denhaag-cta-event-border-color: #3b3b3b; + --denhaag-cta-event-color: #b5b5b5; + --denhaag-cta-event-date-color: #9e9e9e; + --denhaag-cta-event-dot-background-color: #5ba6e4; + --denhaag-cta-event-focus-dot-background-color: #73b7ee; + --denhaag-cta-event-hover-dot-background-color: #73b7ee; + --denhaag-cta-event-title-color: #d1d1d1; + --denhaag-cta-image-content-background-color: #141414; + --denhaag-cta-image-content-filled-background-color: #201c16; + --denhaag-cta-link-border-color: #3b3b3b; + --denhaag-cta-link-color: #d1d1d1; + --denhaag-cta-link-dot-color: #9e9e9e; + --denhaag-cta-link-focus-highlight-color: #7ec0f6; + --denhaag-cta-link-highlight-color: #5eaced; + --denhaag-cta-link-hover-highlight-color: #7ec0f6; + --denhaag-description-list-border-color: #3b3b3b; + --denhaag-description-list-caption-color: #ebebeb; + --denhaag-description-list-color: #b5b5b5; + --denhaag-description-list-title-color: #d1d1d1; + --denhaag-divider-border-color: #3b3b3b; + --denhaag-dot-indicator-background-color: #ed4734; + --denhaag-dot-indicator-border-color: #141414; + --denhaag-dynamic-content-card-content-color: #b5b5b5; + --denhaag-dynamic-content-card-title-color: #d1d1d1; + --denhaag-dynamic-content-icon-color: #5eaced; + --denhaag-dynamic-content-image-background-color: #1f1f1f; + --denhaag-event-date-icon-color: #5eaced; + --denhaag-file-border-color: #3b3b3b; + --denhaag-file-focus-outline-color: #f8da72; + --denhaag-file-hover-color: #7ec0f6; + --denhaag-file-left-background-color: #201c16; + --denhaag-file-link-color: #5eaced; + --denhaag-floating-contact-color: #d1ffe0; + --denhaag-floating-contact-link-color: #9e9e9e; + --denhaag-floating-contact-overlay-background-color: #74d492; + --denhaag-floating-contact-overlay-color: #84b984; + --denhaag-floating-contact-status-offline-background-color: #ed4734; + --denhaag-floating-contact-status-offline-border-color: #470904; + --denhaag-floating-contact-status-online-background-color: #74d492; + --denhaag-floating-contact-status-online-border-color: #243c24; + --denhaag-floating-contact-switch-background-color: #243c24; + --denhaag-floating-contact-switch-border-color: #51854f; + --denhaag-floating-contact-switch-focus-icons-background-color: #89d9a0; + --denhaag-floating-contact-switch-hover-icons-background-color: #89d9a0; + --denhaag-floating-contact-switch-icons-background-color: #74d492; + --denhaag-floating-contact-switch-icons-color: #9e9e9e; + --denhaag-focus-border-color: #f8da72; + --denhaag-footer-background-color: #acacac; + --denhaag-footer-color: #9e9e9e; + --denhaag-footer-heading-color: #f9db43; + --denhaag-footer-mega-background-color: #c4c4c4; + --denhaag-footer-mega-color: #9e9e9e; + --denhaag-form-field-description-color: #b5b5b5; + --denhaag-form-field-description-error-color: #f95644; + --denhaag-form-group-helper-text-color: #b5b5b5; + --denhaag-form-group-helper-text-error-color: #f95644; + --denhaag-form-group-label-color: #b0dafc; + --denhaag-form-progress-label-color: #b5b5b5; + --denhaag-form-progress-progress-background-color: #3b3b3b; + --denhaag-form-progress-progress-bar-background-color: #74d492; + --denhaag-header-border-bottom-color: #1f1f1f; + --denhaag-heading-color: #d1d1d1; + --denhaag-hero-background-color: #74d492; + --denhaag-hero-color: #ebebeb; + --denhaag-hero-home-title-color: #9e9e9e; + --denhaag-hero-routing-background-color: #d0b012; + --denhaag-hero-routing-shape-background-color: #a0870e; + --denhaag-hero-theme-page-content-background-color: #141414; + --denhaag-icon-button-color: #b5b5b5; + --denhaag-icon-button-focus-outline-color: #f8da72; + --denhaag-icon-button-hover-color: #7adc98; + --denhaag-image-figcaption-download-color: #5eaced; + --denhaag-image-figcaption-download-hover-color: #7ec0f6; + --denhaag-image-figcaption-text-color: #b5b5b5; + --denhaag-language-switcher-list-item-link-active-color: #7adc98; + --denhaag-link-color: #5eaced; + --denhaag-link-disabled-color: #9e9e9e; + --denhaag-link-focus-color: #7ec0f6; + --denhaag-link-hover-color: #7ec0f6; + --denhaag-list-item-active-border-color: #5ba6e4; + --denhaag-list-item-focus-color: #5eaced; + --denhaag-list-item-hover-color: #5eaced; + --denhaag-list-item-icon-color: #d1d1d1; + --denhaag-list-item-secondary-action-color: #d1d1d1; + --denhaag-list-item-text-primary-color: #d1d1d1; + --denhaag-list-item-text-secondary-color: #d1d1d1; + --denhaag-list-subheader-color: #d1d1d1; + --denhaag-menu-button-active-color: #7adc98; + --denhaag-menu-button-chevron-active-color: #7adc98; + --denhaag-menu-button-chevron-hover-color: #7adc98; + --denhaag-menu-button-color: #b5b5b5; + --denhaag-menu-button-hover-color: #7adc98; + --denhaag-mobile-menu-list-submenu-back-button-icon-color: #5eaced; + --denhaag-modal-background-color: #141414; + --denhaag-modal-close-color: #7adc98; + --denhaag-modal-close-hover-color: #93e1aa; + --denhaag-modal-header-border-bottom-color: #3b3b3b; + --denhaag-modal-title-color: #ebebeb; + --denhaag-note-color: #b5b5b5; + --denhaag-note-icon-color: #b5b5b5; + --denhaag-note-icon-info-color: #9e9e9e; + --denhaag-note-icon-warning-color: #9e9e9e; + --denhaag-page-buttons-outline-dark-action-background-color: #141414; + --denhaag-page-buttons-outline-dark-action-border-color: #3b3b3b; + --denhaag-page-buttons-outline-dark-action-color: #acacac; + --denhaag-page-buttons-outline-dark-action-disabled-background-color: #141414; + --denhaag-page-buttons-outline-dark-action-disabled-border-color: #3b3b3b; + --denhaag-page-buttons-outline-dark-action-disabled-color: #3b3b3b; + --denhaag-page-buttons-outline-dark-action-hover-background-color: #141414; + --denhaag-page-buttons-outline-dark-action-hover-border-color: #74d492; + --denhaag-page-buttons-outline-dark-action-hover-color: #74d492; + --denhaag-page-header-background-color: #141414; + --denhaag-page-index-background-color: #0c283f; + --denhaag-pagination-button-color: #b5b5b5; + --denhaag-pagination-button-current-color: #7adc98; + --denhaag-pagination-button-current-disabled-background-color: #3b3b3b; + --denhaag-pagination-button-current-disabled-color: #9e9e9e; + --denhaag-pagination-button-disabled-color: #9e9e9e; + --denhaag-pagination-button-hover-color: #7adc98; + --denhaag-posttypelabel-color: #5eaced; + --denhaag-process-steps-step-content-color: #b5b5b5; + --denhaag-process-steps-step-heading-color: #b5b5b5; + --denhaag-process-steps-step-heading-current-color: #7adc98; + --denhaag-process-steps-step-heading-error-color: #f95644; + --denhaag-process-steps-step-heading-warning-color: #ffaa75; + --denhaag-radio-background-color: #141414; + --denhaag-radio-border-color: #848484; + --denhaag-radio-checked-background-color: #74d492; + --denhaag-radio-checked-border-color: #74d492; + --denhaag-radio-checked-disabled-background-color: #3b3b3b; + --denhaag-radio-checked-disabled-border-color: #3b3b3b; + --denhaag-radio-checked-inner-background-color: #141414; + --denhaag-radio-checked-invalid-background-color: #ed4734; + --denhaag-radio-disabled-background-color: #1f1f1f; + --denhaag-radio-disabled-border-color: #848484; + --denhaag-radio-hover-border-color: #acacac; + --denhaag-radio-hover-checked-background-color: #89d9a0; + --denhaag-radio-hover-checked-border-color: #89d9a0; + --denhaag-radio-hover-invalid-background-color: #f65b56; + --denhaag-radio-hover-invalid-border-color: #f65b56; + --denhaag-radio-invalid-border-color: #ed4734; + --denhaag-select-hover-background-color: #201c16; + --denhaag-select-hover-border-color: #848484; + --denhaag-select-hover-color: #d1d1d1; + --denhaag-sheet-background-color: #141414; + --denhaag-side-navigation-link-active-color: #7adc98; + --denhaag-side-navigation-link-color: #b5b5b5; + --denhaag-side-navigation-link-hover-color: #7adc98; + --denhaag-sidenav-link-active-color: #7adc98; + --denhaag-sidenav-link-color: #d1d1d1; + --denhaag-sidenav-link-hover-color: #7adc98; + --denhaag-step-marker-checked-background-color: #141414; + --denhaag-step-marker-checked-border-color: #74d492; + --denhaag-step-marker-checked-color: #74d492; + --denhaag-step-marker-connector-checked-outline-color: #74d492; + --denhaag-step-marker-connector-default-outline-color: #3b3b3b; + --denhaag-step-marker-connector-error-outline-color: #ed4734; + --denhaag-step-marker-connector-not-checked-outline-color: #3b3b3b; + --denhaag-step-marker-connector-warning-outline-color: #f37526; + --denhaag-step-marker-current-background-color: #74d492; + --denhaag-step-marker-current-border-color: #74d492; + --denhaag-step-marker-current-color: #141414; + --denhaag-step-marker-current-nested-color: #74d492; + --denhaag-step-marker-default-background-color: #3b3b3b; + --denhaag-step-marker-default-border-color: #3b3b3b; + --denhaag-step-marker-default-color: #141414; + --denhaag-step-marker-default-nested-color: #3b3b3b; + --denhaag-step-marker-disabled-background-color: #1f1f1f; + --denhaag-step-marker-disabled-border-color: #1f1f1f; + --denhaag-step-marker-disabled-color: #acacac; + --denhaag-step-marker-error-background-color: #ed4734; + --denhaag-step-marker-error-border-color: #ed4734; + --denhaag-step-marker-error-color: #141414; + --denhaag-step-marker-not-checked-background-color: #141414; + --denhaag-step-marker-not-checked-border-color: #3b3b3b; + --denhaag-step-marker-not-checked-color: #acacac; + --denhaag-step-marker-warning-background-color: #f37526; + --denhaag-step-marker-warning-border-color: #f37526; + --denhaag-step-marker-warning-color: #141414; + --denhaag-step-marker-warning-nested-background-color: #141414; + --denhaag-step-marker-warning-nested-border-color: #f37526; + --denhaag-table-cell-color: #b5b5b5; + --denhaag-table-cell-outline-color: #f8da72; + --denhaag-table-heading-color: #d1d1d1; + --denhaag-table-row-background-color: #141414; + --denhaag-table-row-hover-background-color: #201c16; + --denhaag-tabs-border-color: #3b3b3b; + --denhaag-tabs-tab-background-color: #141414; + --denhaag-tabs-tab-color: #b5b5b5; + --denhaag-tabs-tab-focus-color: #7adc98; + --denhaag-tabs-tab-hover-color: #7adc98; + --denhaag-tabs-tab-indicator-border-color: #74d492; + --denhaag-tabs-tab-selected-color: #7adc98; + --denhaag-timeline-step-content-color: #b5b5b5; + --denhaag-timeline-step-icon-active-color: #5eaced; + --denhaag-timeline-step-icon-color: #9e9e9e; + --denhaag-timeline-step-icon-completed-color: #7adc98; + --denhaag-timeline-step-icon-disabled-color: #9e9e9e; + --denhaag-timeline-step-icon-text-active-color: #9e9e9e; + --denhaag-timeline-step-label-active-color: #5eaced; + --denhaag-timeline-step-label-completed-hover-color: #5eaced; + --denhaag-timeline-step-label-disabled-color: #9e9e9e; + --denhaag-unordered-list-color: #b5b5b5; + --nl-data-badge-background-color: #1f1f1f; + --nl-data-badge-color: #d1d1d1; + --nl-data-badge-error-background-color: #470904; + --nl-data-badge-error-color: #ff615c; + --nl-data-badge-neutral-background-color: #0c283f; + --nl-data-badge-neutral-color: #7ec0f6; + --nl-data-badge-success-background-color: #243c24; + --nl-data-badge-success-color: #93e1aa; + --nl-data-badge-warning-background-color: #683e05; + --nl-data-badge-warning-color: #ffaa75; + --nl-link-color: #5eaced; + --nl-link-disabled-color: #9e9e9e; + --nl-link-focus-visible-color: #7ec0f6; + --nl-link-hover-color: #7ec0f6; + --nl-number-badge-background-color: #0c283f; + --nl-number-badge-color: #7ec0f6; --nldesign-color-background: #141414; - --nldesign-color-background-dark: #282828; - --nldesign-color-background-darker: #393939; - --nldesign-color-background-hover: #1d1d1d; - --nldesign-color-border: #3f3f3f; - --nldesign-color-border-dark: #6a6a6a; - --nldesign-color-button-primary-background: #7cdda0; - --nldesign-color-button-primary-border: #7cdda0; - --nldesign-color-button-primary-hover: #8ce2ac; + --nldesign-color-background-dark: #1f1f1f; + --nldesign-color-background-darker: #3b3b3b; + --nldesign-color-background-hover: #201c16; + --nldesign-color-border: #3b3b3b; + --nldesign-color-border-dark: #848484; + --nldesign-color-button-primary-background: #74d492; + --nldesign-color-button-primary-border: #74d492; + --nldesign-color-button-primary-hover: #89d9a0; --nldesign-color-button-primary-text: #3e3e3e; - --nldesign-color-error: #ca3232; - --nldesign-color-error-hover: #d35555; - --nldesign-color-error-rgb: 202, 50, 50; + --nldesign-color-error: #f65b56; + --nldesign-color-error-hover: #fa9897; + --nldesign-color-error-rgb: 246, 91, 86; --nldesign-color-favorite: #f48c25; - --nldesign-color-focus: #59a5e480; - --nldesign-color-focus-rgb: 89, 165, 228; - --nldesign-color-header-background: #7cdda0; - --nldesign-color-header-text: #9e9e9e; - --nldesign-color-info: #59a5e4; - --nldesign-color-info-rgb: 89, 165, 228; - --nldesign-color-link: #59a5e4; - --nldesign-color-link-hover: #7cdda0; - --nldesign-color-link-visited: #8960ba; + --nldesign-color-focus: #f8da72; + --nldesign-color-focus-rgb: 248, 218, 114; + --nldesign-color-header-background: #141414; + --nldesign-color-header-text: #d1d1d1; + --nldesign-color-info: #73b7ee; + --nldesign-color-info-rgb: 115, 183, 238; + --nldesign-color-link: #5ba6e4; + --nldesign-color-link-hover: #73b7ee; + --nldesign-color-link-visited: #5ba6e4; --nldesign-color-nav-background: #141414; - --nldesign-color-placeholder-dark: #3f3f3f; - --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #3ed677; - --nldesign-color-primary-hover: #156633; - --nldesign-color-primary-light: #173020; - --nldesign-color-primary-light-hover: #21452f; + --nldesign-color-placeholder-dark: #3b3b3b; + --nldesign-color-placeholder-light: #1f1f1f; + --nldesign-color-primary: #55d27b; + --nldesign-color-primary-hover: #1e6c35; + --nldesign-color-primary-light: #243c24; + --nldesign-color-primary-light-hover: #243c24; --nldesign-color-primary-text: #111111; - --nldesign-color-success: #7cdda0; - --nldesign-color-success-rgb: 124, 221, 160; - --nldesign-color-text: #cccccc; + --nldesign-color-success: #89d9a0; + --nldesign-color-success-rgb: 137, 217, 160; + --nldesign-color-text: #d1d1d1; --nldesign-color-text-light: #9e9e9e; - --nldesign-color-text-muted: #9e9e9e; - --nldesign-color-warning: #d4611d; - --nldesign-color-warning-rgb: 212, 97, 29; - --nldesign-component-badge-background-color: #7cdda0; + --nldesign-color-text-muted: #b5b5b5; + --nldesign-color-warning: #f37526; + --nldesign-color-warning-rgb: 243, 117, 38; + --nldesign-component-badge-background-color: #74d492; --nldesign-component-badge-color: #3e3e3e; - --nldesign-component-button-active-background-color: #21452f; - --nldesign-component-button-active-color: #85e5a9; - --nldesign-component-button-border-color: #7cdda0; - --nldesign-component-button-color: #85e5a9; + --nldesign-component-button-active-background-color: #243c24; + --nldesign-component-button-active-color: #7adc98; + --nldesign-component-button-border-color: #74d492; + --nldesign-component-button-color: #7adc98; --nldesign-component-button-disabled-background-color: #2a2a2a; --nldesign-component-button-disabled-border-color: #535353; --nldesign-component-button-disabled-color: #9e9e9e; - --nldesign-component-button-error-color: #ffffff; - --nldesign-component-button-focus-border-color: #59a5e480; - --nldesign-component-button-hover-background-color: #173020; - --nldesign-component-button-hover-border-color: #8ce2ac; - --nldesign-component-button-hover-color: #85e5a9; - --nldesign-component-button-primary-action-background-color: #7cdda0; - --nldesign-component-button-primary-action-border-color: #7cdda0; + --nldesign-component-button-error-color: #000000; + --nldesign-component-button-focus-border-color: #f8da72; + --nldesign-component-button-hover-background-color: #243c24; + --nldesign-component-button-hover-border-color: #89d9a0; + --nldesign-component-button-hover-color: #7adc98; + --nldesign-component-button-primary-action-background-color: #74d492; + --nldesign-component-button-primary-action-border-color: #74d492; --nldesign-component-button-primary-action-color: #3e3e3e; - --nldesign-component-button-primary-action-hover-background-color: #8ce2ac; + --nldesign-component-button-primary-action-hover-background-color: #89d9a0; --nldesign-component-button-primary-action-hover-color: #3e3e3e; - --nldesign-component-button-secondary-action-border-color: #7cdda0; - --nldesign-component-button-secondary-action-color: #85e5a9; - --nldesign-component-button-secondary-action-hover-background-color: #173020; - --nldesign-component-form-field-label-color: #cccccc; - --nldesign-component-form-fieldset-border-color: #3f3f3f; - --nldesign-component-form-select-border-color: #3f3f3f; - --nldesign-component-form-select-focus-border-color: #59a5e4; - --nldesign-component-heading-1-color: #cccccc; - --nldesign-component-heading-2-color: #cccccc; - --nldesign-component-heading-3-color: #cccccc; - --nldesign-component-heading-4-color: #cccccc; - --nldesign-component-heading-5-color: #cccccc; - --nldesign-component-heading-6-color: #cccccc; - --nldesign-component-heading-color: #cccccc; - --nldesign-component-link-color: #5cabed; - --nldesign-component-link-hover-color: #85e5a9; - --nldesign-component-link-visited-color: #9a74c8; - --nldesign-component-ordered-list-color: #cccccc; - --nldesign-component-paragraph-color: #cccccc; - --nldesign-component-separator-border-color: #3f3f3f; - --nldesign-component-table-border-color: #3f3f3f; - --nldesign-component-table-header-background-color: #282828; - --nldesign-component-table-header-color: #cccccc; - --nldesign-component-table-row-hover-background-color: #1d1d1d; + --nldesign-component-button-secondary-action-border-color: #74d492; + --nldesign-component-button-secondary-action-color: #7adc98; + --nldesign-component-button-secondary-action-hover-background-color: #243c24; + --nldesign-component-form-field-label-color: #d1d1d1; + --nldesign-component-form-fieldset-border-color: #3b3b3b; + --nldesign-component-form-select-border-color: #3b3b3b; + --nldesign-component-form-select-focus-border-color: #73b7ee; + --nldesign-component-heading-1-color: #d1d1d1; + --nldesign-component-heading-2-color: #d1d1d1; + --nldesign-component-heading-3-color: #d1d1d1; + --nldesign-component-heading-4-color: #d1d1d1; + --nldesign-component-heading-5-color: #d1d1d1; + --nldesign-component-heading-6-color: #d1d1d1; + --nldesign-component-heading-color: #d1d1d1; + --nldesign-component-link-color: #5eaced; + --nldesign-component-link-hover-color: #7ec0f6; + --nldesign-component-link-visited-color: #5eaced; + --nldesign-component-ordered-list-color: #d1d1d1; + --nldesign-component-paragraph-color: #d1d1d1; + --nldesign-component-separator-border-color: #3b3b3b; + --nldesign-component-table-border-color: #3b3b3b; + --nldesign-component-table-header-background-color: #1f1f1f; + --nldesign-component-table-header-color: #d1d1d1; + --nldesign-component-table-row-hover-background-color: #201c16; --nldesign-component-textbox-background-color: #141414; - --nldesign-component-textbox-border-color: #7f7f7f; - --nldesign-component-textbox-color: #cccccc; + --nldesign-component-textbox-border-color: #7b7b7b; + --nldesign-component-textbox-color: #d1d1d1; --nldesign-component-textbox-disabled-background-color: #2a2a2a; --nldesign-component-textbox-disabled-color: #9e9e9e; - --nldesign-component-textbox-focus-border-color: #59a5e4; - --nldesign-component-textbox-hover-border-color: #6a6a6a; - --nldesign-component-textbox-invalid-border-color: #ca3232; - --nldesign-component-unordered-list-color: #cccccc; + --nldesign-component-textbox-focus-border-color: #73b7ee; + --nldesign-component-textbox-hover-border-color: #848484; + --nldesign-component-textbox-invalid-border-color: #f65b56; + --nldesign-component-unordered-list-color: #d1d1d1; + --of-alert-error-bg: #470904; + --of-alert-info-bg: #0c283f; + --of-alert-warning-bg: #683e05; + --of-button-anchor-fg: #5ba6e4; + --of-button-primary-active-bg: #89d9a0; + --of-button-primary-active-color-border: #f8da72; + --of-button-primary-active-fg: #141414; + --of-button-primary-bg: #74d492; + --of-button-primary-fg: #141414; + --of-button-primary-hover-bg: #89d9a0; + --of-button-primary-hover-color-border: #f8da72; + --of-checkbox-bg: #141414; + --of-color-bg: #141414; + --of-color-border: #848484; + --of-color-danger: #f65b56; + --of-color-fg: #ebebeb; + --of-color-fg-muted: #acacac; + --of-color-info: #73b7ee; + --of-color-primary: #74d492; + --of-color-secondary: #3b3b3b; + --of-color-success: #89d9a0; + --of-color-warning: #f37526; + --of-field-border-color: #848484; + --of-helptext-bg: #0c283f; + --of-layout-background: #141414; + --of-layout-bg: #141414; + --of-link-color: #5eaced; + --of-page-footer-bg: #c4c4c4; + --of-page-header-bg: #141414; + --tilburg-color-black: #ebebeb; + --tilburg-color-black-txt: #c4c4c4; + --tilburg-color-blue-100: #0c283f; + --tilburg-color-blue-200: #1a3f64; + --tilburg-color-blue-300: #5ba6e4; + --tilburg-color-blue-400: #73b7ee; + --tilburg-color-blue-500: #9acdf6; + --tilburg-color-code-background-color: #1f1f1f; + --tilburg-color-dark-alpha-100: #ebebeb1a; + --tilburg-color-dark-alpha-50: #ebebeb0d; + --tilburg-color-extra-limegreen: #85ba40; + --tilburg-color-extra-purple: #8c6cc7; + --tilburg-color-extra-yellow: #d0b012; + --tilburg-color-gray-100: #1f1f1f; + --tilburg-color-gray-200: #1f1f1f; + --tilburg-color-gray-300: #3b3b3b; + --tilburg-color-gray-400: #3b3b3b; + --tilburg-color-gray-50: #201c16; + --tilburg-color-gray-500: #848484; + --tilburg-color-gray-600: #848484; + --tilburg-color-gray-700: #acacac; + --tilburg-color-gray-800: #acacac; + --tilburg-color-gray-900: #c4c4c4; + --tilburg-color-gray-950: #c4c4c4; + --tilburg-color-green-100: #243c24; + --tilburg-color-green-200: #51854f; + --tilburg-color-green-300: #74d492; + --tilburg-color-green-400: #89d9a0; + --tilburg-color-light-alpha-100: #1414141a; + --tilburg-color-light-alpha-50: #1414140d; + --tilburg-color-orange-100: #683e05; + --tilburg-color-orange-200: #a96309; + --tilburg-color-orange-300: #f39419; + --tilburg-color-orange-400: #f37526; + --tilburg-color-pink-100: #390322; + --tilburg-color-pink-200: #5f113b; + --tilburg-color-pink-300: #f5399e; + --tilburg-color-pink-400: #f655ac; + --tilburg-color-red-100: #470904; + --tilburg-color-red-200: #87231a; + --tilburg-color-red-300: #ed4734; + --tilburg-color-red-400: #f65b56; + --tilburg-color-white: #141414; + --tilburg-document-background-color: #141414; + --tilburg-document-color: #d1d1d1; + --tilburg-document-inverse-background-color: #c4c4c4; + --tilburg-document-inverse-color: #9e9e9e; + --tilburg-document-subtle-color: #9e9e9e; + --tilburg-feedback-informative-background-color: #0c283f; + --tilburg-feedback-informative-border-color: #73b7ee; + --tilburg-feedback-informative-color: #7ec0f6; + --tilburg-feedback-negative-background-color: #470904; + --tilburg-feedback-negative-border-color: #ed4734; + --tilburg-feedback-negative-color: #f95644; + --tilburg-feedback-positive-background-color: #243c24; + --tilburg-feedback-positive-border-color: #74d492; + --tilburg-feedback-positive-color: #7adc98; + --tilburg-feedback-warning-background-color: #683e05; + --tilburg-feedback-warning-border-color: #a96309; + --tilburg-feedback-warning-color: #ffab3d; + --tilburg-focus-background-color: #5ba6e4; + --tilburg-focus-color: #7adc98; + --tilburg-focus-inverse-outline-color: #141414; + --tilburg-focus-outline-color: #f8da72; + --tilburg-footer-background-color: #74d492; + --tilburg-footer-color: #9e9e9e; + --tilburg-form-control-accent-color: #74d492; + --tilburg-form-control-active-accent-color: #74d492; + --tilburg-form-control-active-background-color: #1f1f1f; + --tilburg-form-control-active-border-color: #848484; + --tilburg-form-control-active-color: #d1d1d1; + --tilburg-form-control-background-color: #141414; + --tilburg-form-control-border-color: #848484; + --tilburg-form-control-color: #d1d1d1; + --tilburg-form-control-disabled-accent-color: #848484; + --tilburg-form-control-disabled-background-color: #201c16; + --tilburg-form-control-disabled-border-color: #848484; + --tilburg-form-control-disabled-color: #9e9e9e; + --tilburg-form-control-focus-background-color: #141414; + --tilburg-form-control-focus-border-color: #ebebeb; + --tilburg-form-control-focus-color: #ebebeb; + --tilburg-form-control-hover-accent-color: #74d492; + --tilburg-form-control-hover-background-color: #201c16; + --tilburg-form-control-hover-border-color: #848484; + --tilburg-form-control-hover-color: #d1d1d1; + --tilburg-form-control-invalid-background-color: #141414; + --tilburg-form-control-invalid-border-color: #ed4734; + --tilburg-form-control-invalid-color: #f95644; + --tilburg-form-control-placeholder-color: #9e9e9e; + --tilburg-form-control-read-only-background-color: #201c16; + --tilburg-form-control-read-only-border-color: #848484; + --tilburg-form-control-read-only-color: #d1d1d1; + --tilburg-header-background-color: #141414; + --tilburg-heading-color: #ebebeb; + --tilburg-interaction-active-color: #7adc98; + --tilburg-interaction-color: #7adc98; + --tilburg-interaction-hover-color: #7adc98; + --tilburg-line-border-color: #848484; + --tilburg-logo-color: #ebebeb; + --tilburg-navigation-background-color: #5ba6e4; + --tilburg-navigation-color: #9e9e9e; + --tilburg-navigation-hover-background-color: #5ba6e4; + --tilburg-navigation-hover-color: #9e9e9e; + --tilburg-navigation-mobile-background-color: #73b7ee; + --tilburg-navigation-mobile-item-border-bottom-color: #5ba6e4; + --tilburg-search-card-border-color: #1f1f1f; + --tilburg-search-card-hover-border-color: #74d492; + --tilburg-status-badge-background-color: #1f1f1f; + --tilburg-status-badge-color: #d1d1d1; + --tilburg-status-badge-informative-background-color: #0c283f; + --tilburg-status-badge-informative-color: #7ec0f6; + --tilburg-status-badge-negative-background-color: #470904; + --tilburg-status-badge-negative-color: #f95644; + --tilburg-status-badge-positive-background-color: #243c24; + --tilburg-status-badge-positive-color: #7adc98; + --tilburg-status-badge-warning-background-color: #683e05; + --tilburg-status-badge-warning-color: #ffab3d; + --utrecht-accordion-button-active-background-color: #1f1f1f; + --utrecht-accordion-button-active-color: #7adc98; + --utrecht-accordion-button-background-color: #201c16; + --utrecht-accordion-button-color: #7adc98; + --utrecht-accordion-button-expanded-background-color: #201c16; + --utrecht-accordion-button-expanded-color: #7adc98; + --utrecht-accordion-button-focus-background-color: #5ba6e4; + --utrecht-accordion-button-focus-color: #7adc98; + --utrecht-accordion-button-hover-background-color: #1f1f1f; + --utrecht-accordion-button-hover-color: #7adc98; + --utrecht-accordion-section-border-color: #848484; + --utrecht-alert-background-color: #0c283f; + --utrecht-alert-color: #b0dafc; + --utrecht-alert-error-background-color: #470904; + --utrecht-alert-error-border-color: #fa9897; + --utrecht-alert-error-color: #ffaead; + --utrecht-alert-icon-color: #5eaced; + --utrecht-alert-icon-error-color: #f95644; + --utrecht-alert-icon-info-color: #b0dafc; + --utrecht-alert-icon-informative-color: #7ec0f6; + --utrecht-alert-icon-negative-color: #f95644; + --utrecht-alert-icon-ok-color: #7adc98; + --utrecht-alert-icon-positive-color: #7adc98; + --utrecht-alert-icon-warning-color: #ffab3d; + --utrecht-alert-info-background-color: #0c283f; + --utrecht-alert-info-border-color: #5ba6e4; + --utrecht-alert-info-color: #b0dafc; + --utrecht-alert-informative-background-color: #0c283f; + --utrecht-alert-informative-border-color: #73b7ee; + --utrecht-alert-informative-color: #d1d1d1; + --utrecht-alert-negative-background-color: #470904; + --utrecht-alert-negative-border-color: #ed4734; + --utrecht-alert-negative-color: #d1d1d1; + --utrecht-alert-ok-background-color: #243c24; + --utrecht-alert-ok-border-color: #51854f; + --utrecht-alert-ok-color: #d1ffe0; + --utrecht-alert-positive-background-color: #243c24; + --utrecht-alert-positive-border-color: #74d492; + --utrecht-alert-positive-color: #d1d1d1; + --utrecht-alert-warning-background-color: #683e05; + --utrecht-alert-warning-border-color: #f7a06a; + --utrecht-alert-warning-color: #ffaa75; + --utrecht-badge-background-color: #1f1f1f; + --utrecht-badge-color: #d1d1d1; + --utrecht-badge-counter-background-color: #0c283f; + --utrecht-badge-counter-color: #7ec0f6; + --utrecht-breadcrumb-nav-divider-color: #848484; + --utrecht-breadcrumb-nav-link-active-color: #7adc98; + --utrecht-breadcrumb-nav-link-color: #5eaced; + --utrecht-breadcrumb-nav-link-current-color: #9e9e9e; + --utrecht-breadcrumb-nav-link-disabled-color: #b5b5b5; + --utrecht-breadcrumb-nav-link-focus-background-color: #5ba6e4; + --utrecht-breadcrumb-nav-link-focus-color: #7ec0f6; + --utrecht-breadcrumb-nav-link-hover-color: #7ec0f6; + --utrecht-button-active-background-color: #1f1f1f; + --utrecht-button-active-border-color: #74d492; + --utrecht-button-active-color: #7adc98; + --utrecht-button-background-color: #74d492; + --utrecht-button-border-color: #c4c4c4; + --utrecht-button-color: #9e9e9e; + --utrecht-button-disabled-background-color: #3b3b3b; + --utrecht-button-disabled-color: #b5b5b5; + --utrecht-button-focus-background-color: #89d9a0; + --utrecht-button-focus-color: #7adc98; + --utrecht-button-hover-background-color: #89d9a0; + --utrecht-button-hover-border-color: #74d492; + --utrecht-button-hover-color: #7adc98; + --utrecht-button-primary-action-active-background-color: #74d492; + --utrecht-button-primary-action-active-color: #9e9e9e; + --utrecht-button-primary-action-background-color: #74d492; + --utrecht-button-primary-action-color: #9e9e9e; + --utrecht-button-primary-action-disabled-background-color: #3b3b3b; + --utrecht-button-primary-action-disabled-color: #b5b5b5; + --utrecht-button-primary-action-focus-background-color: #89d9a0; + --utrecht-button-primary-action-focus-color: #7adc98; + --utrecht-button-primary-action-hover-background-color: #89d9a0; + --utrecht-button-primary-action-hover-color: #9e9e9e; + --utrecht-button-secondary-action-active-background-color: #1f1f1f; + --utrecht-button-secondary-action-active-border-color: #74d492; + --utrecht-button-secondary-action-active-color: #7adc98; + --utrecht-button-secondary-action-background-color: #141414; + --utrecht-button-secondary-action-border-color: #74d492; + --utrecht-button-secondary-action-color: #7adc98; + --utrecht-button-secondary-action-disabled-background-color: #201c16; + --utrecht-button-secondary-action-disabled-border-color: #3b3b3b; + --utrecht-button-secondary-action-disabled-color: #b5b5b5; + --utrecht-button-secondary-action-focus-background-color: #5ba6e4; + --utrecht-button-secondary-action-focus-border-color: #89d9a0; + --utrecht-button-secondary-action-focus-color: #93e1aa; + --utrecht-button-secondary-action-hover-background-color: #201c16; + --utrecht-button-secondary-action-hover-border-color: #89d9a0; + --utrecht-button-secondary-action-hover-color: #93e1aa; + --utrecht-button-subtle-active-background-color: #ebebeb1a; + --utrecht-button-subtle-active-color: #7adc98; + --utrecht-button-subtle-color: #7adc98; + --utrecht-button-subtle-disabled-background-color: #201c16; + --utrecht-button-subtle-disabled-color: #9e9e9e; + --utrecht-button-subtle-focus-background-color: #5ba6e4; + --utrecht-button-subtle-focus-color: #7adc98; + --utrecht-button-subtle-hover-background-color: #ebebeb0d; + --utrecht-button-subtle-hover-color: #7adc98; + --utrecht-checkbox-active-background-color: #141414; + --utrecht-checkbox-active-border-color: #848484; + --utrecht-checkbox-active-color: #d1d1d1; + --utrecht-checkbox-background-color: #141414; + --utrecht-checkbox-border-color: #848484; + --utrecht-checkbox-checked-active-background-color: #74d492; + --utrecht-checkbox-checked-active-color: #9e9e9e; + --utrecht-checkbox-checked-background-color: #74d492; + --utrecht-checkbox-checked-border-color: #74d492; + --utrecht-checkbox-checked-color: #9e9e9e; + --utrecht-checkbox-checked-disabled-background-color: #848484; + --utrecht-checkbox-checked-disabled-color: #9e9e9e; + --utrecht-checkbox-checked-focus-background-color: #141414; + --utrecht-checkbox-checked-focus-border-color: #ebebeb; + --utrecht-checkbox-checked-focus-color: #ebebeb; + --utrecht-checkbox-checked-hover-background-color: #74d492; + --utrecht-checkbox-checked-hover-color: #9e9e9e; + --utrecht-checkbox-color: #9e9e9e; + --utrecht-checkbox-disabled-background-color: #1f1f1f; + --utrecht-checkbox-disabled-border-color: #848484; + --utrecht-checkbox-disabled-color: #b5b5b5; + --utrecht-checkbox-focus-background-color: #141414; + --utrecht-checkbox-focus-border-color: #ebebeb; + --utrecht-checkbox-focus-color: #ebebeb; + --utrecht-checkbox-hover-background-color: #201c16; + --utrecht-checkbox-hover-border-color: #848484; + --utrecht-checkbox-hover-color: #d1d1d1; + --utrecht-checkbox-indeterminate-active-background-color: #74d492; + --utrecht-checkbox-indeterminate-active-color: #9e9e9e; + --utrecht-checkbox-indeterminate-background-color: #74d492; + --utrecht-checkbox-indeterminate-color: #9e9e9e; + --utrecht-checkbox-indeterminate-disabled-background-color: #848484; + --utrecht-checkbox-indeterminate-disabled-color: #9e9e9e; + --utrecht-checkbox-indeterminate-focus-background-color: #141414; + --utrecht-checkbox-indeterminate-focus-border-color: #ebebeb; + --utrecht-checkbox-indeterminate-focus-color: #ebebeb; + --utrecht-checkbox-indeterminate-hover-background-color: #74d492; + --utrecht-checkbox-indeterminate-hover-color: #9e9e9e; + --utrecht-checkbox-invalid-background-color: #141414; + --utrecht-checkbox-invalid-border-color: #ed4734; + --utrecht-checkbox-invalid-color: #f95644; + --utrecht-code-background-color: #1f1f1f; + --utrecht-code-color: #d1d1d1; + --utrecht-data-list-item-border-color: #848484; + --utrecht-data-list-item-color: #d1d1d1; + --utrecht-data-list-item-key-color: #b5b5b5; + --utrecht-document-background-color: #141414; + --utrecht-document-color: #d1d1d1; + --utrecht-document-inverse-background-color: #c4c4c4; + --utrecht-document-inverse-color: #9e9e9e; + --utrecht-document-subtle-color: #9e9e9e; + --utrecht-feedback-danger-background-color: #470904; + --utrecht-feedback-danger-color: #ff615c; + --utrecht-feedback-danger-fill-background-color: #470904; + --utrecht-feedback-danger-fill-border-color: #ed4734; + --utrecht-feedback-danger-fill-color: #f65b56; + --utrecht-feedback-neutral-background-color: #0c283f; + --utrecht-feedback-neutral-color: #7ec0f6; + --utrecht-feedback-neutral-fill-background-color: #0c283f; + --utrecht-feedback-neutral-fill-border-color: #3b3b3b; + --utrecht-feedback-neutral-fill-color: #73b7ee; + --utrecht-feedback-safe-background-color: #243c24; + --utrecht-feedback-safe-color: #93e1aa; + --utrecht-feedback-safe-fill-background-color: #243c24; + --utrecht-feedback-safe-fill-color: #89d9a0; + --utrecht-feedback-success-fill-background-color: #243c24; + --utrecht-feedback-success-fill-border-color: #74d492; + --utrecht-feedback-success-fill-color: #74d492; + --utrecht-feedback-warning-background-color: #683e05; + --utrecht-feedback-warning-color: #ffaa75; + --utrecht-feedback-warning-fill-background-color: #683e05; + --utrecht-feedback-warning-fill-border-color: #f39419; + --utrecht-feedback-warning-fill-color: #f7a06a; + --utrecht-focus-border-color: #f8da72; + --utrecht-focus-outline-color: #f8da72; + --utrecht-form-control-active-background-color: #141414; + --utrecht-form-control-active-border-color: #848484; + --utrecht-form-control-active-color: #d1d1d1; + --utrecht-form-control-background-color: #141414; + --utrecht-form-control-border-color: #848484; + --utrecht-form-control-checked-background-color: #74d492; + --utrecht-form-control-checked-border-color: #74d492; + --utrecht-form-control-checked-color: #9e9e9e; + --utrecht-form-control-color: #b5b5b5; + --utrecht-form-control-disabled-background-color: #1f1f1f; + --utrecht-form-control-disabled-border-color: #848484; + --utrecht-form-control-disabled-color: #b5b5b5; + --utrecht-form-control-focus-background-color: #141414; + --utrecht-form-control-focus-border-color: #ebebeb; + --utrecht-form-control-focus-color: #ebebeb; + --utrecht-form-control-hover-background-color: #201c16; + --utrecht-form-control-hover-border-color: #848484; + --utrecht-form-control-hover-color: #d1d1d1; + --utrecht-form-control-invalid-background-color: #141414; + --utrecht-form-control-invalid-border-color: #ed4734; + --utrecht-form-control-invalid-color: #f95644; + --utrecht-form-control-placeholder-color: #b5b5b5; + --utrecht-form-field-description-color: #b5b5b5; + --utrecht-form-field-description-invalid-color: #f95644; + --utrecht-form-field-error-message-color: #f95644; + --utrecht-form-fieldset-legend-color: #d1d1d1; + --utrecht-form-label-checkbox-color: #b5b5b5; + --utrecht-form-label-color: #b5b5b5; + --utrecht-form-label-radio-color: #b5b5b5; + --utrecht-form-toggle-accent-color: #848484; + --utrecht-form-toggle-border-color: #848484; + --utrecht-form-toggle-checked-accent-color: #74d492; + --utrecht-form-toggle-color: #9e9e9e; + --utrecht-form-toggle-focus-border-color: #f8da72; + --utrecht-heading-1-color: #ebebeb; + --utrecht-heading-2-color: #ebebeb; + --utrecht-heading-3-color: #ebebeb; + --utrecht-heading-4-color: #ebebeb; + --utrecht-heading-5-color: #ebebeb; + --utrecht-heading-6-color: #ebebeb; + --utrecht-heading-color: #d1d1d1; + --utrecht-link-active-color: #b0dafc; + --utrecht-link-color: #5eaced; + --utrecht-link-focus-color: #7ec0f6; + --utrecht-link-hover-color: #7ec0f6; + --utrecht-link-social-color: #9e9e9e; + --utrecht-link-social-hover-color: #ffdf3d; + --utrecht-link-text-decoration-color: #7adc98; + --utrecht-link-visited-color: #5eaced; + --utrecht-ordered-list-color: #d1d1d1; + --utrecht-page-footer-background-color: #acacac; + --utrecht-page-footer-color: #9e9e9e; + --utrecht-paragraph-color: #d1d1d1; + --utrecht-paragraph-lead-color: #d1d1d1; + --utrecht-paragraph-small-color: #d1d1d1; + --utrecht-radio-button-active-background-color: #141414; + --utrecht-radio-button-active-border-color: #848484; + --utrecht-radio-button-active-color: #d1d1d1; + --utrecht-radio-button-background-color: #141414; + --utrecht-radio-button-border-color: #848484; + --utrecht-radio-button-checked-active-background-color: #b4fbcb; + --utrecht-radio-button-checked-active-border-color: #b4fbcb; + --utrecht-radio-button-checked-active-color: #9e9e9e; + --utrecht-radio-button-checked-background-color: #74d492; + --utrecht-radio-button-checked-border-color: #74d492; + --utrecht-radio-button-checked-color: #9e9e9e; + --utrecht-radio-button-checked-disabled-background-color: #201c16; + --utrecht-radio-button-checked-disabled-border-color: #848484; + --utrecht-radio-button-checked-disabled-color: #9e9e9e; + --utrecht-radio-button-checked-focus-background-color: #89d9a0; + --utrecht-radio-button-checked-focus-border-color: #74d492; + --utrecht-radio-button-checked-focus-color: #9e9e9e; + --utrecht-radio-button-checked-hover-background-color: #89d9a0; + --utrecht-radio-button-checked-hover-border-color: #89d9a0; + --utrecht-radio-button-checked-hover-color: #9e9e9e; + --utrecht-radio-button-disabled-background-color: #1f1f1f; + --utrecht-radio-button-disabled-border-color: #848484; + --utrecht-radio-button-disabled-color: #b5b5b5; + --utrecht-radio-button-focus-background-color: #141414; + --utrecht-radio-button-focus-border-color: #ebebeb; + --utrecht-radio-button-focus-color: #ebebeb; + --utrecht-radio-button-hover-background-color: #201c16; + --utrecht-radio-button-hover-border-color: #848484; + --utrecht-radio-button-invalid-background-color: #141414; + --utrecht-radio-button-invalid-border-color: #ed4734; + --utrecht-radio-button-invalid-color: #f95644; + --utrecht-select-background-color: #141414; + --utrecht-select-border-color: #848484; + --utrecht-select-color: #b5b5b5; + --utrecht-select-disabled-background-color: #1f1f1f; + --utrecht-select-disabled-border-color: #848484; + --utrecht-select-disabled-color: #b5b5b5; + --utrecht-select-focus-background-color: #141414; + --utrecht-select-focus-border-color: #ebebeb; + --utrecht-select-focus-color: #ebebeb; + --utrecht-select-hover-background-color: #201c16; + --utrecht-select-hover-border-color: #848484; + --utrecht-select-hover-color: #d1d1d1; + --utrecht-select-invalid-background-color: #141414; + --utrecht-select-invalid-border-color: #ed4734; + --utrecht-select-invalid-color: #d1d1d1; + --utrecht-separator-color: #3b3b3b; + --utrecht-skip-link-background-color: #c4c4c4; + --utrecht-skip-link-color: #9e9e9e; + --utrecht-skip-link-focus-background-color: #5ba6e4; + --utrecht-skip-link-focus-color: #7adc98; + --utrecht-table-border-color: #3b3b3b; + --utrecht-table-caption-color: #ebebeb; + --utrecht-table-data-cell-color: #d1d1d1; + --utrecht-table-footer-border-block-end-color: #848484; + --utrecht-table-footer-cell-color: #d1d1d1; + --utrecht-table-header-border-block-end-color: #1f1f1f; + --utrecht-table-header-cell-color: #7adc98; + --utrecht-table-row-alternate-even-background-color: #141414; + --utrecht-table-row-alternate-odd-background-color: #191919; + --utrecht-table-row-border-block-end-color: #1f1f1f; + --utrecht-textarea-background-color: #141414; + --utrecht-textarea-border-color: #848484; + --utrecht-textarea-color: #b5b5b5; + --utrecht-textarea-disabled-background-color: #1f1f1f; + --utrecht-textarea-disabled-border-color: #848484; + --utrecht-textarea-disabled-color: #b5b5b5; + --utrecht-textarea-focus-background-color: #141414; + --utrecht-textarea-focus-border-color: #ebebeb; + --utrecht-textarea-focus-color: #ebebeb; + --utrecht-textarea-invalid-background-color: #141414; + --utrecht-textarea-invalid-border-color: #ed4734; + --utrecht-textarea-invalid-color: #f95644; + --utrecht-textarea-placeholder-color: #9e9e9e; + --utrecht-textbox-background-color: #141414; + --utrecht-textbox-border-color: #848484; + --utrecht-textbox-color: #b5b5b5; + --utrecht-textbox-disabled-background-color: #1f1f1f; + --utrecht-textbox-disabled-border-color: #848484; + --utrecht-textbox-disabled-color: #9e9e9e; + --utrecht-textbox-focus-background-color: #141414; + --utrecht-textbox-focus-border-color: #ebebeb; + --utrecht-textbox-focus-color: #ebebeb; + --utrecht-textbox-hover-background-color: #201c16; + --utrecht-textbox-hover-border-color: #848484; + --utrecht-textbox-hover-color: #d1d1d1; + --utrecht-textbox-invalid-background-color: #141414; + --utrecht-textbox-invalid-border-color: #ed4734; + --utrecht-textbox-invalid-color: #d1d1d1; + --utrecht-textbox-placeholder-color: #9e9e9e; + --utrecht-textbox-read-only-background-color: #201c16; + --utrecht-textbox-read-only-border-color: #848484; + --utrecht-textbox-read-only-color: #d1d1d1; + --utrecht-unordered-list-color: #d1d1d1; + --utrecht-unordered-list-marker-border-color: #c4c4c4; + --utrecht-unordered-list-marker-color: #5ba6e4; + --vng-color-black: #ebebeb; + --vng-color-black-txt: #c4c4c4; + --vng-color-blue-100: #0c283f; + --vng-color-blue-200: #1a3f64; + --vng-color-blue-300: #5ba6e4; + --vng-color-blue-400: #73b7ee; + --vng-color-blue-500: #9acdf6; + --vng-color-extra-limegreen: #85ba40; + --vng-color-extra-purple: #8c6cc7; + --vng-color-extra-yellow: #d0b012; + --vng-color-gray-100: #1f1f1f; + --vng-color-gray-200: #1f1f1f; + --vng-color-gray-300: #3b3b3b; + --vng-color-gray-400: #3b3b3b; + --vng-color-gray-50: #201c16; + --vng-color-gray-500: #848484; + --vng-color-gray-600: #848484; + --vng-color-gray-700: #acacac; + --vng-color-gray-800: #acacac; + --vng-color-gray-900: #c4c4c4; + --vng-color-gray-950: #c4c4c4; + --vng-color-green-100: #243c24; + --vng-color-green-200: #51854f; + --vng-color-green-300: #74d492; + --vng-color-green-400: #89d9a0; + --vng-color-orange-100: #683e05; + --vng-color-orange-200: #a96309; + --vng-color-orange-300: #f39419; + --vng-color-orange-400: #f37526; + --vng-color-pink-100: #390322; + --vng-color-pink-200: #5f113b; + --vng-color-pink-300: #f5399e; + --vng-color-pink-400: #f655ac; + --vng-color-red-100: #470904; + --vng-color-red-200: #87231a; + --vng-color-red-300: #ed4734; + --vng-color-red-400: #f65b56; + --vng-color-white: #141414; } } body[data-theme-dark], body[data-themes*=dark] { - --denhaag-color-blue: #59a5e4; - --denhaag-color-green: #7cdda0; - --denhaag-color-green-dark: #8ce2ac; - --denhaag-color-orange: #d4611d; - --denhaag-color-red: #ca3232; - --denhaag-color-yellow: #dfb715; + --ams-date-input-background-color: #141414; + --ams-date-input-border-color: #848484; + --ams-date-input-color: #b5b5b5; + --ams-pagination-button-active-color: #7adc98; + --ams-pagination-button-color: #7adc98; + --ams-pagination-button-current-background-color: #1f1f1f; + --ams-pagination-button-current-color: #d1d1d1; + --ams-pagination-button-focus-background-color: #5ba6e4; + --ams-pagination-button-focus-color: #7adc98; + --ams-pagination-button-hover-color: #7adc98; + --ams-pagination-color: #7adc98; + --ams-pagination-description-color: #d1d1d1; + --ams-pagination-ellipses-color: #9e9e9e; + --ams-pagination-relative-link-active-color: #7adc98; + --ams-pagination-relative-link-color: #7adc98; + --ams-pagination-relative-link-disabled-color: #9e9e9e; + --ams-pagination-relative-link-focus-background-color: #5ba6e4; + --ams-pagination-relative-link-focus-color: #7adc98; + --ams-pagination-relative-link-hover-color: #7adc98; + --conduction-primary-top-nav-background-color: #5ba6e4; + --conduction-primary-top-nav-color: #9e9e9e; + --conduction-primary-top-nav-current-background-color: #5ba6e4; + --conduction-primary-top-nav-current-color: #9e9e9e; + --conduction-primary-top-nav-dropdown-background-color: #0c283f; + --conduction-primary-top-nav-dropdown-color: #ebebeb; + --conduction-primary-top-nav-dropdown-current-background-color: #0c283f; + --conduction-primary-top-nav-dropdown-current-color: #ebebeb; + --conduction-primary-top-nav-dropdown-hover-background-color: #0c283f; + --conduction-primary-top-nav-dropdown-hover-color: #ebebeb; + --conduction-primary-top-nav-hover-background-color: #5ba6e4; + --conduction-primary-top-nav-hover-color: #9e9e9e; + --conduction-tabs-scroll-button-background-color: #74d492; + --conduction-tabs-scroll-button-color: #9e9e9e; + --conduction-tabs-scroll-button-hover-background-color: #89d9a0; + --conduction-tabs-scroll-button-hover-color: #9e9e9e; + --conduction-tabs-tab-color: #d1d1d1; + --conduction-tabs-tab-hover-color: #d1d1d1; + --conduction-tabs-tab-list-border-bottom-color: #1f1f1f; + --conduction-tabs-tab-selected-border-bottom-color: #5ba6e4; + --conduction-tabs-tab-selected-color: #b0dafc; + --conduction-tabs-tab-selected-hover-color: #b0dafc; + --conduction-tooltip-background-color: #ebebeb; + --conduction-tooltip-color: #9e9e9e; + --denhaag-accordion-section-content-background-color: #141414; + --denhaag-accordion-section-description-color: #d1d1d1; + --denhaag-accordion-section-header-background-color: #141414; + --denhaag-accordion-section-header-icon-color: #7adc98; + --denhaag-accordion-section-title-color: #7adc98; + --denhaag-action-background-color: #141414; + --denhaag-action-border-color: #3b3b3b; + --denhaag-action-color: #d1d1d1; + --denhaag-action-date-color: #b5b5b5; + --denhaag-action-date-warning-color: #ffaa75; + --denhaag-action-link-icon-color: #5eaced; + --denhaag-action-single-focus-outline-color: #f8da72; + --denhaag-action-single-hover-background-color: #1f1f1f; + --denhaag-action-warning-icon-color: #fe883e; + --denhaag-alert-error-action-button-background-color: #ed4734; + --denhaag-alert-error-action-button-color: #9e9e9e; + --denhaag-alert-error-action-button-hover-background-color: #f65b56; + --denhaag-alert-error-background-color: #470904; + --denhaag-alert-error-close-icon-color: #ffaead; + --denhaag-alert-error-icon-color: #f95644; + --denhaag-alert-error-paragraph-color: #ffaead; + --denhaag-alert-error-title-color: #ffaead; + --denhaag-alert-info-action-button-background-color: #5ba6e4; + --denhaag-alert-info-action-button-color: #9e9e9e; + --denhaag-alert-info-action-button-hover-background-color: #73b7ee; + --denhaag-alert-info-background-color: #0c283f; + --denhaag-alert-info-close-icon-color: #b0dafc; + --denhaag-alert-info-icon-color: #5eaced; + --denhaag-alert-info-paragraph-color: #b0dafc; + --denhaag-alert-info-title-color: #b0dafc; + --denhaag-alert-success-action-button-background-color: #74d492; + --denhaag-alert-success-action-button-color: #9e9e9e; + --denhaag-alert-success-action-button-hover-background-color: #89d9a0; + --denhaag-alert-success-background-color: #243c24; + --denhaag-alert-success-close-icon-color: #d1ffe0; + --denhaag-alert-success-icon-color: #7adc98; + --denhaag-alert-success-paragraph-color: #d1ffe0; + --denhaag-alert-success-title-color: #d1ffe0; + --denhaag-alert-warning-action-button-background-color: #f7a06a; + --denhaag-alert-warning-action-button-color: #9e9e9e; + --denhaag-alert-warning-action-button-hover-background-color: #f7a06a; + --denhaag-alert-warning-background-color: #683e05; + --denhaag-alert-warning-close-icon-color: #ffaa75; + --denhaag-alert-warning-icon-color: #ffaa75; + --denhaag-alert-warning-paragraph-color: #ffaa75; + --denhaag-alert-warning-title-color: #ffaa75; + --denhaag-anchor-collapse-border-color: #3b3b3b; + --denhaag-anchor-collapse-summary-active-color: #7adc98; + --denhaag-anchor-collapse-summary-color: #d1d1d1; + --denhaag-anchor-collapse-summary-focus-color: #7adc98; + --denhaag-anchor-collapse-summary-hover-color: #7adc98; + --denhaag-anchor-navigation-link-active-color: #7adc98; + --denhaag-anchor-navigation-link-background-color: #3b3b3b; + --denhaag-anchor-navigation-link-color: #b5b5b5; + --denhaag-anchor-navigation-link-focus-color: #7adc98; + --denhaag-anchor-navigation-link-hover-color: #7adc98; + --denhaag-anchor-navigation-link-target-color: #7adc98; + --denhaag-article-meta-border-color: #3b3b3b; + --denhaag-article-meta-color: #b5b5b5; + --denhaag-article-meta-horizontal-item-border-color: #3b3b3b; + --denhaag-blockquote-attribution-color: #b5b5b5; + --denhaag-blockquote-border-color: #243c24; + --denhaag-blockquote-paragraph-color: #93e1aa; + --denhaag-breadcrumb-background-color: #201c16; + --denhaag-breadcrumb-color: #b5b5b5; + --denhaag-breadcrumb-current-color: #b5b5b5; + --denhaag-breadcrumb-dots-background-color: #1f1f1f; + --denhaag-breadcrumb-dots-color: #9e9e9e; + --denhaag-breadcrumb-dots-hover-background-color: #3b3b3b; + --denhaag-breadcrumb-link-color: #5eaced; + --denhaag-breadcrumb-link-focus-color: #7ec0f6; + --denhaag-breadcrumb-link-hover-color: #7ec0f6; + --denhaag-button-focus-border-color: #f8da72; + --denhaag-button-primary-action-background-color: #74d492; + --denhaag-button-primary-action-color: #9e9e9e; + --denhaag-button-primary-action-disabled-background-color: #3b3b3b; + --denhaag-button-primary-action-disabled-color: #9e9e9e; + --denhaag-button-primary-action-hover-background-color: #89d9a0; + --denhaag-button-primary-action-hover-color: #9e9e9e; + --denhaag-button-secondary-action-background-color: #141414; + --denhaag-button-secondary-action-border-color: #74d492; + --denhaag-button-secondary-action-color: #7adc98; + --denhaag-button-secondary-action-disabled-background-color: #141414; + --denhaag-button-secondary-action-disabled-border-color: #3b3b3b; + --denhaag-button-secondary-action-disabled-color: #9e9e9e; + --denhaag-button-secondary-action-hover-background-color: #141414; + --denhaag-button-secondary-action-hover-border-color: #89d9a0; + --denhaag-button-secondary-action-hover-color: #93e1aa; + --denhaag-card-authentication-background-color: #141414; + --denhaag-card-authentication-border-color: #3b3b3b; + --denhaag-card-news-icon-color: #5eaced; + --denhaag-case-card-action-active-color: #7ec0f6; + --denhaag-case-card-action-color: #5eaced; + --denhaag-case-card-archived-action-active-color: #d1d1d1; + --denhaag-case-card-archived-action-color: #b5b5b5; + --denhaag-case-card-archived-background-background-color: #1f1f1f; + --denhaag-case-card-archived-background-color: #3b3b3b; + --denhaag-case-card-archived-color: #b5b5b5; + --denhaag-case-card-archived-context-color: #b5b5b5; + --denhaag-case-card-archived-subtitle-color: #b5b5b5; + --denhaag-case-card-archived-title-color: #d1d1d1; + --denhaag-case-card-background-background-color: #0c283f; + --denhaag-case-card-background-color: #1a3f64; + --denhaag-case-card-context-color: #7ec0f6; + --denhaag-case-card-list-background-hover-background-color: #1f1f1f; + --denhaag-case-card-list-border-color: #3b3b3b; + --denhaag-case-card-list-context-color: #b5b5b5; + --denhaag-case-card-list-subtitle-color: #b5b5b5; + --denhaag-case-card-list-title-color: #d1d1d1; + --denhaag-case-card-paper-color: #9e9e9e; + --denhaag-case-card-subtitle-color: #7ec0f6; + --denhaag-case-card-title-color: #b0dafc; + --denhaag-checkbox-checked-disabled-background-color: #3b3b3b; + --denhaag-checkbox-checked-disabled-border-color: #3b3b3b; + --denhaag-checkbox-checked-invalid-background-color: #ed4734; + --denhaag-checkbox-hover-border-color: #acacac; + --denhaag-checkbox-hover-checked-background-color: #89d9a0; + --denhaag-checkbox-hover-checked-border-color: #89d9a0; + --denhaag-checkbox-hover-invalid-background-color: #f65b56; + --denhaag-checkbox-hover-invalid-border-color: #f65b56; + --denhaag-color-black: #ebebeb; + --denhaag-color-blue-1: #0c283f; + --denhaag-color-blue-2: #1a3f64; + --denhaag-color-blue-3: #5ba6e4; + --denhaag-color-blue-4: #73b7ee; + --denhaag-color-blue-5: #9acdf6; + --denhaag-color-green-1: #243c24; + --denhaag-color-green-2: #51854f; + --denhaag-color-green-3: #74d492; + --denhaag-color-green-4: #89d9a0; + --denhaag-color-green-5: #b4fbcb; + --denhaag-color-grey-1: #1f1f1f; + --denhaag-color-grey-2: #3b3b3b; + --denhaag-color-grey-3: #848484; + --denhaag-color-grey-4: #acacac; + --denhaag-color-grey-5: #c4c4c4; + --denhaag-color-ocher-1: #4b3f04; + --denhaag-color-ocher-2: #887307; + --denhaag-color-ocher-3: #d0b012; + --denhaag-color-ocher-4: #f4cb35; + --denhaag-color-ocher-5: #f8da72; + --denhaag-color-orange-1: #683e05; + --denhaag-color-orange-2: #a96309; + --denhaag-color-orange-3: #f39419; + --denhaag-color-orange-4: #f37526; + --denhaag-color-orange-5: #f7a06a; + --denhaag-color-red-1: #470904; + --denhaag-color-red-2: #87231a; + --denhaag-color-red-3: #ed4734; + --denhaag-color-red-4: #f65b56; + --denhaag-color-red-5: #fa9897; + --denhaag-color-warmgrey-1: #201c16; + --denhaag-color-white: #141414; + --denhaag-contact-timeline-step-header-toggle-active-color: #7adc98; + --denhaag-contact-timeline-step-header-toggle-focus-color: #7adc98; + --denhaag-contact-timeline-step-header-toggle-hover-color: #7adc98; + --denhaag-contact-timeline-step-meta-marker-color: #ebebeb; + --denhaag-cta-download-border-color: #3b3b3b; + --denhaag-cta-download-color: #b5b5b5; + --denhaag-cta-download-dot-background-color: #5ba6e4; + --denhaag-cta-download-dot-color: #9e9e9e; + --denhaag-cta-download-focus-dot-background-color: #73b7ee; + --denhaag-cta-download-hover-dot-background-color: #73b7ee; + --denhaag-cta-download-title-color: #d1d1d1; + --denhaag-cta-event-border-color: #3b3b3b; + --denhaag-cta-event-color: #b5b5b5; + --denhaag-cta-event-date-color: #9e9e9e; + --denhaag-cta-event-dot-background-color: #5ba6e4; + --denhaag-cta-event-focus-dot-background-color: #73b7ee; + --denhaag-cta-event-hover-dot-background-color: #73b7ee; + --denhaag-cta-event-title-color: #d1d1d1; + --denhaag-cta-image-content-background-color: #141414; + --denhaag-cta-image-content-filled-background-color: #201c16; + --denhaag-cta-link-border-color: #3b3b3b; + --denhaag-cta-link-color: #d1d1d1; + --denhaag-cta-link-dot-color: #9e9e9e; + --denhaag-cta-link-focus-highlight-color: #7ec0f6; + --denhaag-cta-link-highlight-color: #5eaced; + --denhaag-cta-link-hover-highlight-color: #7ec0f6; + --denhaag-description-list-border-color: #3b3b3b; + --denhaag-description-list-caption-color: #ebebeb; + --denhaag-description-list-color: #b5b5b5; + --denhaag-description-list-title-color: #d1d1d1; + --denhaag-divider-border-color: #3b3b3b; + --denhaag-dot-indicator-background-color: #ed4734; + --denhaag-dot-indicator-border-color: #141414; + --denhaag-dynamic-content-card-content-color: #b5b5b5; + --denhaag-dynamic-content-card-title-color: #d1d1d1; + --denhaag-dynamic-content-icon-color: #5eaced; + --denhaag-dynamic-content-image-background-color: #1f1f1f; + --denhaag-event-date-icon-color: #5eaced; + --denhaag-file-border-color: #3b3b3b; + --denhaag-file-focus-outline-color: #f8da72; + --denhaag-file-hover-color: #7ec0f6; + --denhaag-file-left-background-color: #201c16; + --denhaag-file-link-color: #5eaced; + --denhaag-floating-contact-color: #d1ffe0; + --denhaag-floating-contact-link-color: #9e9e9e; + --denhaag-floating-contact-overlay-background-color: #74d492; + --denhaag-floating-contact-overlay-color: #84b984; + --denhaag-floating-contact-status-offline-background-color: #ed4734; + --denhaag-floating-contact-status-offline-border-color: #470904; + --denhaag-floating-contact-status-online-background-color: #74d492; + --denhaag-floating-contact-status-online-border-color: #243c24; + --denhaag-floating-contact-switch-background-color: #243c24; + --denhaag-floating-contact-switch-border-color: #51854f; + --denhaag-floating-contact-switch-focus-icons-background-color: #89d9a0; + --denhaag-floating-contact-switch-hover-icons-background-color: #89d9a0; + --denhaag-floating-contact-switch-icons-background-color: #74d492; + --denhaag-floating-contact-switch-icons-color: #9e9e9e; + --denhaag-focus-border-color: #f8da72; + --denhaag-footer-background-color: #acacac; + --denhaag-footer-color: #9e9e9e; + --denhaag-footer-heading-color: #f9db43; + --denhaag-footer-mega-background-color: #c4c4c4; + --denhaag-footer-mega-color: #9e9e9e; + --denhaag-form-field-description-color: #b5b5b5; + --denhaag-form-field-description-error-color: #f95644; + --denhaag-form-group-helper-text-color: #b5b5b5; + --denhaag-form-group-helper-text-error-color: #f95644; + --denhaag-form-group-label-color: #b0dafc; + --denhaag-form-progress-label-color: #b5b5b5; + --denhaag-form-progress-progress-background-color: #3b3b3b; + --denhaag-form-progress-progress-bar-background-color: #74d492; + --denhaag-header-border-bottom-color: #1f1f1f; + --denhaag-heading-color: #d1d1d1; + --denhaag-hero-background-color: #74d492; + --denhaag-hero-color: #ebebeb; + --denhaag-hero-home-title-color: #9e9e9e; + --denhaag-hero-routing-background-color: #d0b012; + --denhaag-hero-routing-shape-background-color: #a0870e; + --denhaag-hero-theme-page-content-background-color: #141414; + --denhaag-icon-button-color: #b5b5b5; + --denhaag-icon-button-focus-outline-color: #f8da72; + --denhaag-icon-button-hover-color: #7adc98; + --denhaag-image-figcaption-download-color: #5eaced; + --denhaag-image-figcaption-download-hover-color: #7ec0f6; + --denhaag-image-figcaption-text-color: #b5b5b5; + --denhaag-language-switcher-list-item-link-active-color: #7adc98; + --denhaag-link-color: #5eaced; + --denhaag-link-disabled-color: #9e9e9e; + --denhaag-link-focus-color: #7ec0f6; + --denhaag-link-hover-color: #7ec0f6; + --denhaag-list-item-active-border-color: #5ba6e4; + --denhaag-list-item-focus-color: #5eaced; + --denhaag-list-item-hover-color: #5eaced; + --denhaag-list-item-icon-color: #d1d1d1; + --denhaag-list-item-secondary-action-color: #d1d1d1; + --denhaag-list-item-text-primary-color: #d1d1d1; + --denhaag-list-item-text-secondary-color: #d1d1d1; + --denhaag-list-subheader-color: #d1d1d1; + --denhaag-menu-button-active-color: #7adc98; + --denhaag-menu-button-chevron-active-color: #7adc98; + --denhaag-menu-button-chevron-hover-color: #7adc98; + --denhaag-menu-button-color: #b5b5b5; + --denhaag-menu-button-hover-color: #7adc98; + --denhaag-mobile-menu-list-submenu-back-button-icon-color: #5eaced; + --denhaag-modal-background-color: #141414; + --denhaag-modal-close-color: #7adc98; + --denhaag-modal-close-hover-color: #93e1aa; + --denhaag-modal-header-border-bottom-color: #3b3b3b; + --denhaag-modal-title-color: #ebebeb; + --denhaag-note-color: #b5b5b5; + --denhaag-note-icon-color: #b5b5b5; + --denhaag-note-icon-info-color: #9e9e9e; + --denhaag-note-icon-warning-color: #9e9e9e; + --denhaag-page-buttons-outline-dark-action-background-color: #141414; + --denhaag-page-buttons-outline-dark-action-border-color: #3b3b3b; + --denhaag-page-buttons-outline-dark-action-color: #acacac; + --denhaag-page-buttons-outline-dark-action-disabled-background-color: #141414; + --denhaag-page-buttons-outline-dark-action-disabled-border-color: #3b3b3b; + --denhaag-page-buttons-outline-dark-action-disabled-color: #3b3b3b; + --denhaag-page-buttons-outline-dark-action-hover-background-color: #141414; + --denhaag-page-buttons-outline-dark-action-hover-border-color: #74d492; + --denhaag-page-buttons-outline-dark-action-hover-color: #74d492; + --denhaag-page-header-background-color: #141414; + --denhaag-page-index-background-color: #0c283f; + --denhaag-pagination-button-color: #b5b5b5; + --denhaag-pagination-button-current-color: #7adc98; + --denhaag-pagination-button-current-disabled-background-color: #3b3b3b; + --denhaag-pagination-button-current-disabled-color: #9e9e9e; + --denhaag-pagination-button-disabled-color: #9e9e9e; + --denhaag-pagination-button-hover-color: #7adc98; + --denhaag-posttypelabel-color: #5eaced; + --denhaag-process-steps-step-content-color: #b5b5b5; + --denhaag-process-steps-step-heading-color: #b5b5b5; + --denhaag-process-steps-step-heading-current-color: #7adc98; + --denhaag-process-steps-step-heading-error-color: #f95644; + --denhaag-process-steps-step-heading-warning-color: #ffaa75; + --denhaag-radio-background-color: #141414; + --denhaag-radio-border-color: #848484; + --denhaag-radio-checked-background-color: #74d492; + --denhaag-radio-checked-border-color: #74d492; + --denhaag-radio-checked-disabled-background-color: #3b3b3b; + --denhaag-radio-checked-disabled-border-color: #3b3b3b; + --denhaag-radio-checked-inner-background-color: #141414; + --denhaag-radio-checked-invalid-background-color: #ed4734; + --denhaag-radio-disabled-background-color: #1f1f1f; + --denhaag-radio-disabled-border-color: #848484; + --denhaag-radio-hover-border-color: #acacac; + --denhaag-radio-hover-checked-background-color: #89d9a0; + --denhaag-radio-hover-checked-border-color: #89d9a0; + --denhaag-radio-hover-invalid-background-color: #f65b56; + --denhaag-radio-hover-invalid-border-color: #f65b56; + --denhaag-radio-invalid-border-color: #ed4734; + --denhaag-select-hover-background-color: #201c16; + --denhaag-select-hover-border-color: #848484; + --denhaag-select-hover-color: #d1d1d1; + --denhaag-sheet-background-color: #141414; + --denhaag-side-navigation-link-active-color: #7adc98; + --denhaag-side-navigation-link-color: #b5b5b5; + --denhaag-side-navigation-link-hover-color: #7adc98; + --denhaag-sidenav-link-active-color: #7adc98; + --denhaag-sidenav-link-color: #d1d1d1; + --denhaag-sidenav-link-hover-color: #7adc98; + --denhaag-step-marker-checked-background-color: #141414; + --denhaag-step-marker-checked-border-color: #74d492; + --denhaag-step-marker-checked-color: #74d492; + --denhaag-step-marker-connector-checked-outline-color: #74d492; + --denhaag-step-marker-connector-default-outline-color: #3b3b3b; + --denhaag-step-marker-connector-error-outline-color: #ed4734; + --denhaag-step-marker-connector-not-checked-outline-color: #3b3b3b; + --denhaag-step-marker-connector-warning-outline-color: #f37526; + --denhaag-step-marker-current-background-color: #74d492; + --denhaag-step-marker-current-border-color: #74d492; + --denhaag-step-marker-current-color: #141414; + --denhaag-step-marker-current-nested-color: #74d492; + --denhaag-step-marker-default-background-color: #3b3b3b; + --denhaag-step-marker-default-border-color: #3b3b3b; + --denhaag-step-marker-default-color: #141414; + --denhaag-step-marker-default-nested-color: #3b3b3b; + --denhaag-step-marker-disabled-background-color: #1f1f1f; + --denhaag-step-marker-disabled-border-color: #1f1f1f; + --denhaag-step-marker-disabled-color: #acacac; + --denhaag-step-marker-error-background-color: #ed4734; + --denhaag-step-marker-error-border-color: #ed4734; + --denhaag-step-marker-error-color: #141414; + --denhaag-step-marker-not-checked-background-color: #141414; + --denhaag-step-marker-not-checked-border-color: #3b3b3b; + --denhaag-step-marker-not-checked-color: #acacac; + --denhaag-step-marker-warning-background-color: #f37526; + --denhaag-step-marker-warning-border-color: #f37526; + --denhaag-step-marker-warning-color: #141414; + --denhaag-step-marker-warning-nested-background-color: #141414; + --denhaag-step-marker-warning-nested-border-color: #f37526; + --denhaag-table-cell-color: #b5b5b5; + --denhaag-table-cell-outline-color: #f8da72; + --denhaag-table-heading-color: #d1d1d1; + --denhaag-table-row-background-color: #141414; + --denhaag-table-row-hover-background-color: #201c16; + --denhaag-tabs-border-color: #3b3b3b; + --denhaag-tabs-tab-background-color: #141414; + --denhaag-tabs-tab-color: #b5b5b5; + --denhaag-tabs-tab-focus-color: #7adc98; + --denhaag-tabs-tab-hover-color: #7adc98; + --denhaag-tabs-tab-indicator-border-color: #74d492; + --denhaag-tabs-tab-selected-color: #7adc98; + --denhaag-timeline-step-content-color: #b5b5b5; + --denhaag-timeline-step-icon-active-color: #5eaced; + --denhaag-timeline-step-icon-color: #9e9e9e; + --denhaag-timeline-step-icon-completed-color: #7adc98; + --denhaag-timeline-step-icon-disabled-color: #9e9e9e; + --denhaag-timeline-step-icon-text-active-color: #9e9e9e; + --denhaag-timeline-step-label-active-color: #5eaced; + --denhaag-timeline-step-label-completed-hover-color: #5eaced; + --denhaag-timeline-step-label-disabled-color: #9e9e9e; + --denhaag-unordered-list-color: #b5b5b5; + --nl-data-badge-background-color: #1f1f1f; + --nl-data-badge-color: #d1d1d1; + --nl-data-badge-error-background-color: #470904; + --nl-data-badge-error-color: #ff615c; + --nl-data-badge-neutral-background-color: #0c283f; + --nl-data-badge-neutral-color: #7ec0f6; + --nl-data-badge-success-background-color: #243c24; + --nl-data-badge-success-color: #93e1aa; + --nl-data-badge-warning-background-color: #683e05; + --nl-data-badge-warning-color: #ffaa75; + --nl-link-color: #5eaced; + --nl-link-disabled-color: #9e9e9e; + --nl-link-focus-visible-color: #7ec0f6; + --nl-link-hover-color: #7ec0f6; + --nl-number-badge-background-color: #0c283f; + --nl-number-badge-color: #7ec0f6; --nldesign-color-background: #141414; - --nldesign-color-background-dark: #282828; - --nldesign-color-background-darker: #393939; - --nldesign-color-background-hover: #1d1d1d; - --nldesign-color-border: #3f3f3f; - --nldesign-color-border-dark: #6a6a6a; - --nldesign-color-button-primary-background: #7cdda0; - --nldesign-color-button-primary-border: #7cdda0; - --nldesign-color-button-primary-hover: #8ce2ac; + --nldesign-color-background-dark: #1f1f1f; + --nldesign-color-background-darker: #3b3b3b; + --nldesign-color-background-hover: #201c16; + --nldesign-color-border: #3b3b3b; + --nldesign-color-border-dark: #848484; + --nldesign-color-button-primary-background: #74d492; + --nldesign-color-button-primary-border: #74d492; + --nldesign-color-button-primary-hover: #89d9a0; --nldesign-color-button-primary-text: #3e3e3e; - --nldesign-color-error: #ca3232; - --nldesign-color-error-hover: #d35555; - --nldesign-color-error-rgb: 202, 50, 50; + --nldesign-color-error: #f65b56; + --nldesign-color-error-hover: #fa9897; + --nldesign-color-error-rgb: 246, 91, 86; --nldesign-color-favorite: #f48c25; - --nldesign-color-focus: #59a5e480; - --nldesign-color-focus-rgb: 89, 165, 228; - --nldesign-color-header-background: #7cdda0; - --nldesign-color-header-text: #9e9e9e; - --nldesign-color-info: #59a5e4; - --nldesign-color-info-rgb: 89, 165, 228; - --nldesign-color-link: #59a5e4; - --nldesign-color-link-hover: #7cdda0; - --nldesign-color-link-visited: #8960ba; + --nldesign-color-focus: #f8da72; + --nldesign-color-focus-rgb: 248, 218, 114; + --nldesign-color-header-background: #141414; + --nldesign-color-header-text: #d1d1d1; + --nldesign-color-info: #73b7ee; + --nldesign-color-info-rgb: 115, 183, 238; + --nldesign-color-link: #5ba6e4; + --nldesign-color-link-hover: #73b7ee; + --nldesign-color-link-visited: #5ba6e4; --nldesign-color-nav-background: #141414; - --nldesign-color-placeholder-dark: #3f3f3f; - --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #3ed677; - --nldesign-color-primary-hover: #156633; - --nldesign-color-primary-light: #173020; - --nldesign-color-primary-light-hover: #21452f; + --nldesign-color-placeholder-dark: #3b3b3b; + --nldesign-color-placeholder-light: #1f1f1f; + --nldesign-color-primary: #55d27b; + --nldesign-color-primary-hover: #1e6c35; + --nldesign-color-primary-light: #243c24; + --nldesign-color-primary-light-hover: #243c24; --nldesign-color-primary-text: #111111; - --nldesign-color-success: #7cdda0; - --nldesign-color-success-rgb: 124, 221, 160; - --nldesign-color-text: #cccccc; + --nldesign-color-success: #89d9a0; + --nldesign-color-success-rgb: 137, 217, 160; + --nldesign-color-text: #d1d1d1; --nldesign-color-text-light: #9e9e9e; - --nldesign-color-text-muted: #9e9e9e; - --nldesign-color-warning: #d4611d; - --nldesign-color-warning-rgb: 212, 97, 29; - --nldesign-component-badge-background-color: #7cdda0; + --nldesign-color-text-muted: #b5b5b5; + --nldesign-color-warning: #f37526; + --nldesign-color-warning-rgb: 243, 117, 38; + --nldesign-component-badge-background-color: #74d492; --nldesign-component-badge-color: #3e3e3e; - --nldesign-component-button-active-background-color: #21452f; - --nldesign-component-button-active-color: #85e5a9; - --nldesign-component-button-border-color: #7cdda0; - --nldesign-component-button-color: #85e5a9; + --nldesign-component-button-active-background-color: #243c24; + --nldesign-component-button-active-color: #7adc98; + --nldesign-component-button-border-color: #74d492; + --nldesign-component-button-color: #7adc98; --nldesign-component-button-disabled-background-color: #2a2a2a; --nldesign-component-button-disabled-border-color: #535353; --nldesign-component-button-disabled-color: #9e9e9e; - --nldesign-component-button-error-color: #ffffff; - --nldesign-component-button-focus-border-color: #59a5e480; - --nldesign-component-button-hover-background-color: #173020; - --nldesign-component-button-hover-border-color: #8ce2ac; - --nldesign-component-button-hover-color: #85e5a9; - --nldesign-component-button-primary-action-background-color: #7cdda0; - --nldesign-component-button-primary-action-border-color: #7cdda0; + --nldesign-component-button-error-color: #000000; + --nldesign-component-button-focus-border-color: #f8da72; + --nldesign-component-button-hover-background-color: #243c24; + --nldesign-component-button-hover-border-color: #89d9a0; + --nldesign-component-button-hover-color: #7adc98; + --nldesign-component-button-primary-action-background-color: #74d492; + --nldesign-component-button-primary-action-border-color: #74d492; --nldesign-component-button-primary-action-color: #3e3e3e; - --nldesign-component-button-primary-action-hover-background-color: #8ce2ac; + --nldesign-component-button-primary-action-hover-background-color: #89d9a0; --nldesign-component-button-primary-action-hover-color: #3e3e3e; - --nldesign-component-button-secondary-action-border-color: #7cdda0; - --nldesign-component-button-secondary-action-color: #85e5a9; - --nldesign-component-button-secondary-action-hover-background-color: #173020; - --nldesign-component-form-field-label-color: #cccccc; - --nldesign-component-form-fieldset-border-color: #3f3f3f; - --nldesign-component-form-select-border-color: #3f3f3f; - --nldesign-component-form-select-focus-border-color: #59a5e4; - --nldesign-component-heading-1-color: #cccccc; - --nldesign-component-heading-2-color: #cccccc; - --nldesign-component-heading-3-color: #cccccc; - --nldesign-component-heading-4-color: #cccccc; - --nldesign-component-heading-5-color: #cccccc; - --nldesign-component-heading-6-color: #cccccc; - --nldesign-component-heading-color: #cccccc; - --nldesign-component-link-color: #5cabed; - --nldesign-component-link-hover-color: #85e5a9; - --nldesign-component-link-visited-color: #9a74c8; - --nldesign-component-ordered-list-color: #cccccc; - --nldesign-component-paragraph-color: #cccccc; - --nldesign-component-separator-border-color: #3f3f3f; - --nldesign-component-table-border-color: #3f3f3f; - --nldesign-component-table-header-background-color: #282828; - --nldesign-component-table-header-color: #cccccc; - --nldesign-component-table-row-hover-background-color: #1d1d1d; + --nldesign-component-button-secondary-action-border-color: #74d492; + --nldesign-component-button-secondary-action-color: #7adc98; + --nldesign-component-button-secondary-action-hover-background-color: #243c24; + --nldesign-component-form-field-label-color: #d1d1d1; + --nldesign-component-form-fieldset-border-color: #3b3b3b; + --nldesign-component-form-select-border-color: #3b3b3b; + --nldesign-component-form-select-focus-border-color: #73b7ee; + --nldesign-component-heading-1-color: #d1d1d1; + --nldesign-component-heading-2-color: #d1d1d1; + --nldesign-component-heading-3-color: #d1d1d1; + --nldesign-component-heading-4-color: #d1d1d1; + --nldesign-component-heading-5-color: #d1d1d1; + --nldesign-component-heading-6-color: #d1d1d1; + --nldesign-component-heading-color: #d1d1d1; + --nldesign-component-link-color: #5eaced; + --nldesign-component-link-hover-color: #7ec0f6; + --nldesign-component-link-visited-color: #5eaced; + --nldesign-component-ordered-list-color: #d1d1d1; + --nldesign-component-paragraph-color: #d1d1d1; + --nldesign-component-separator-border-color: #3b3b3b; + --nldesign-component-table-border-color: #3b3b3b; + --nldesign-component-table-header-background-color: #1f1f1f; + --nldesign-component-table-header-color: #d1d1d1; + --nldesign-component-table-row-hover-background-color: #201c16; --nldesign-component-textbox-background-color: #141414; - --nldesign-component-textbox-border-color: #7f7f7f; - --nldesign-component-textbox-color: #cccccc; + --nldesign-component-textbox-border-color: #7b7b7b; + --nldesign-component-textbox-color: #d1d1d1; --nldesign-component-textbox-disabled-background-color: #2a2a2a; --nldesign-component-textbox-disabled-color: #9e9e9e; - --nldesign-component-textbox-focus-border-color: #59a5e4; - --nldesign-component-textbox-hover-border-color: #6a6a6a; - --nldesign-component-textbox-invalid-border-color: #ca3232; - --nldesign-component-unordered-list-color: #cccccc; + --nldesign-component-textbox-focus-border-color: #73b7ee; + --nldesign-component-textbox-hover-border-color: #848484; + --nldesign-component-textbox-invalid-border-color: #f65b56; + --nldesign-component-unordered-list-color: #d1d1d1; + --of-alert-error-bg: #470904; + --of-alert-info-bg: #0c283f; + --of-alert-warning-bg: #683e05; + --of-button-anchor-fg: #5ba6e4; + --of-button-primary-active-bg: #89d9a0; + --of-button-primary-active-color-border: #f8da72; + --of-button-primary-active-fg: #141414; + --of-button-primary-bg: #74d492; + --of-button-primary-fg: #141414; + --of-button-primary-hover-bg: #89d9a0; + --of-button-primary-hover-color-border: #f8da72; + --of-checkbox-bg: #141414; + --of-color-bg: #141414; + --of-color-border: #848484; + --of-color-danger: #f65b56; + --of-color-fg: #ebebeb; + --of-color-fg-muted: #acacac; + --of-color-info: #73b7ee; + --of-color-primary: #74d492; + --of-color-secondary: #3b3b3b; + --of-color-success: #89d9a0; + --of-color-warning: #f37526; + --of-field-border-color: #848484; + --of-helptext-bg: #0c283f; + --of-layout-background: #141414; + --of-layout-bg: #141414; + --of-link-color: #5eaced; + --of-page-footer-bg: #c4c4c4; + --of-page-header-bg: #141414; + --tilburg-color-black: #ebebeb; + --tilburg-color-black-txt: #c4c4c4; + --tilburg-color-blue-100: #0c283f; + --tilburg-color-blue-200: #1a3f64; + --tilburg-color-blue-300: #5ba6e4; + --tilburg-color-blue-400: #73b7ee; + --tilburg-color-blue-500: #9acdf6; + --tilburg-color-code-background-color: #1f1f1f; + --tilburg-color-dark-alpha-100: #ebebeb1a; + --tilburg-color-dark-alpha-50: #ebebeb0d; + --tilburg-color-extra-limegreen: #85ba40; + --tilburg-color-extra-purple: #8c6cc7; + --tilburg-color-extra-yellow: #d0b012; + --tilburg-color-gray-100: #1f1f1f; + --tilburg-color-gray-200: #1f1f1f; + --tilburg-color-gray-300: #3b3b3b; + --tilburg-color-gray-400: #3b3b3b; + --tilburg-color-gray-50: #201c16; + --tilburg-color-gray-500: #848484; + --tilburg-color-gray-600: #848484; + --tilburg-color-gray-700: #acacac; + --tilburg-color-gray-800: #acacac; + --tilburg-color-gray-900: #c4c4c4; + --tilburg-color-gray-950: #c4c4c4; + --tilburg-color-green-100: #243c24; + --tilburg-color-green-200: #51854f; + --tilburg-color-green-300: #74d492; + --tilburg-color-green-400: #89d9a0; + --tilburg-color-light-alpha-100: #1414141a; + --tilburg-color-light-alpha-50: #1414140d; + --tilburg-color-orange-100: #683e05; + --tilburg-color-orange-200: #a96309; + --tilburg-color-orange-300: #f39419; + --tilburg-color-orange-400: #f37526; + --tilburg-color-pink-100: #390322; + --tilburg-color-pink-200: #5f113b; + --tilburg-color-pink-300: #f5399e; + --tilburg-color-pink-400: #f655ac; + --tilburg-color-red-100: #470904; + --tilburg-color-red-200: #87231a; + --tilburg-color-red-300: #ed4734; + --tilburg-color-red-400: #f65b56; + --tilburg-color-white: #141414; + --tilburg-document-background-color: #141414; + --tilburg-document-color: #d1d1d1; + --tilburg-document-inverse-background-color: #c4c4c4; + --tilburg-document-inverse-color: #9e9e9e; + --tilburg-document-subtle-color: #9e9e9e; + --tilburg-feedback-informative-background-color: #0c283f; + --tilburg-feedback-informative-border-color: #73b7ee; + --tilburg-feedback-informative-color: #7ec0f6; + --tilburg-feedback-negative-background-color: #470904; + --tilburg-feedback-negative-border-color: #ed4734; + --tilburg-feedback-negative-color: #f95644; + --tilburg-feedback-positive-background-color: #243c24; + --tilburg-feedback-positive-border-color: #74d492; + --tilburg-feedback-positive-color: #7adc98; + --tilburg-feedback-warning-background-color: #683e05; + --tilburg-feedback-warning-border-color: #a96309; + --tilburg-feedback-warning-color: #ffab3d; + --tilburg-focus-background-color: #5ba6e4; + --tilburg-focus-color: #7adc98; + --tilburg-focus-inverse-outline-color: #141414; + --tilburg-focus-outline-color: #f8da72; + --tilburg-footer-background-color: #74d492; + --tilburg-footer-color: #9e9e9e; + --tilburg-form-control-accent-color: #74d492; + --tilburg-form-control-active-accent-color: #74d492; + --tilburg-form-control-active-background-color: #1f1f1f; + --tilburg-form-control-active-border-color: #848484; + --tilburg-form-control-active-color: #d1d1d1; + --tilburg-form-control-background-color: #141414; + --tilburg-form-control-border-color: #848484; + --tilburg-form-control-color: #d1d1d1; + --tilburg-form-control-disabled-accent-color: #848484; + --tilburg-form-control-disabled-background-color: #201c16; + --tilburg-form-control-disabled-border-color: #848484; + --tilburg-form-control-disabled-color: #9e9e9e; + --tilburg-form-control-focus-background-color: #141414; + --tilburg-form-control-focus-border-color: #ebebeb; + --tilburg-form-control-focus-color: #ebebeb; + --tilburg-form-control-hover-accent-color: #74d492; + --tilburg-form-control-hover-background-color: #201c16; + --tilburg-form-control-hover-border-color: #848484; + --tilburg-form-control-hover-color: #d1d1d1; + --tilburg-form-control-invalid-background-color: #141414; + --tilburg-form-control-invalid-border-color: #ed4734; + --tilburg-form-control-invalid-color: #f95644; + --tilburg-form-control-placeholder-color: #9e9e9e; + --tilburg-form-control-read-only-background-color: #201c16; + --tilburg-form-control-read-only-border-color: #848484; + --tilburg-form-control-read-only-color: #d1d1d1; + --tilburg-header-background-color: #141414; + --tilburg-heading-color: #ebebeb; + --tilburg-interaction-active-color: #7adc98; + --tilburg-interaction-color: #7adc98; + --tilburg-interaction-hover-color: #7adc98; + --tilburg-line-border-color: #848484; + --tilburg-logo-color: #ebebeb; + --tilburg-navigation-background-color: #5ba6e4; + --tilburg-navigation-color: #9e9e9e; + --tilburg-navigation-hover-background-color: #5ba6e4; + --tilburg-navigation-hover-color: #9e9e9e; + --tilburg-navigation-mobile-background-color: #73b7ee; + --tilburg-navigation-mobile-item-border-bottom-color: #5ba6e4; + --tilburg-search-card-border-color: #1f1f1f; + --tilburg-search-card-hover-border-color: #74d492; + --tilburg-status-badge-background-color: #1f1f1f; + --tilburg-status-badge-color: #d1d1d1; + --tilburg-status-badge-informative-background-color: #0c283f; + --tilburg-status-badge-informative-color: #7ec0f6; + --tilburg-status-badge-negative-background-color: #470904; + --tilburg-status-badge-negative-color: #f95644; + --tilburg-status-badge-positive-background-color: #243c24; + --tilburg-status-badge-positive-color: #7adc98; + --tilburg-status-badge-warning-background-color: #683e05; + --tilburg-status-badge-warning-color: #ffab3d; + --utrecht-accordion-button-active-background-color: #1f1f1f; + --utrecht-accordion-button-active-color: #7adc98; + --utrecht-accordion-button-background-color: #201c16; + --utrecht-accordion-button-color: #7adc98; + --utrecht-accordion-button-expanded-background-color: #201c16; + --utrecht-accordion-button-expanded-color: #7adc98; + --utrecht-accordion-button-focus-background-color: #5ba6e4; + --utrecht-accordion-button-focus-color: #7adc98; + --utrecht-accordion-button-hover-background-color: #1f1f1f; + --utrecht-accordion-button-hover-color: #7adc98; + --utrecht-accordion-section-border-color: #848484; + --utrecht-alert-background-color: #0c283f; + --utrecht-alert-color: #b0dafc; + --utrecht-alert-error-background-color: #470904; + --utrecht-alert-error-border-color: #fa9897; + --utrecht-alert-error-color: #ffaead; + --utrecht-alert-icon-color: #5eaced; + --utrecht-alert-icon-error-color: #f95644; + --utrecht-alert-icon-info-color: #b0dafc; + --utrecht-alert-icon-informative-color: #7ec0f6; + --utrecht-alert-icon-negative-color: #f95644; + --utrecht-alert-icon-ok-color: #7adc98; + --utrecht-alert-icon-positive-color: #7adc98; + --utrecht-alert-icon-warning-color: #ffab3d; + --utrecht-alert-info-background-color: #0c283f; + --utrecht-alert-info-border-color: #5ba6e4; + --utrecht-alert-info-color: #b0dafc; + --utrecht-alert-informative-background-color: #0c283f; + --utrecht-alert-informative-border-color: #73b7ee; + --utrecht-alert-informative-color: #d1d1d1; + --utrecht-alert-negative-background-color: #470904; + --utrecht-alert-negative-border-color: #ed4734; + --utrecht-alert-negative-color: #d1d1d1; + --utrecht-alert-ok-background-color: #243c24; + --utrecht-alert-ok-border-color: #51854f; + --utrecht-alert-ok-color: #d1ffe0; + --utrecht-alert-positive-background-color: #243c24; + --utrecht-alert-positive-border-color: #74d492; + --utrecht-alert-positive-color: #d1d1d1; + --utrecht-alert-warning-background-color: #683e05; + --utrecht-alert-warning-border-color: #f7a06a; + --utrecht-alert-warning-color: #ffaa75; + --utrecht-badge-background-color: #1f1f1f; + --utrecht-badge-color: #d1d1d1; + --utrecht-badge-counter-background-color: #0c283f; + --utrecht-badge-counter-color: #7ec0f6; + --utrecht-breadcrumb-nav-divider-color: #848484; + --utrecht-breadcrumb-nav-link-active-color: #7adc98; + --utrecht-breadcrumb-nav-link-color: #5eaced; + --utrecht-breadcrumb-nav-link-current-color: #9e9e9e; + --utrecht-breadcrumb-nav-link-disabled-color: #b5b5b5; + --utrecht-breadcrumb-nav-link-focus-background-color: #5ba6e4; + --utrecht-breadcrumb-nav-link-focus-color: #7ec0f6; + --utrecht-breadcrumb-nav-link-hover-color: #7ec0f6; + --utrecht-button-active-background-color: #1f1f1f; + --utrecht-button-active-border-color: #74d492; + --utrecht-button-active-color: #7adc98; + --utrecht-button-background-color: #74d492; + --utrecht-button-border-color: #c4c4c4; + --utrecht-button-color: #9e9e9e; + --utrecht-button-disabled-background-color: #3b3b3b; + --utrecht-button-disabled-color: #b5b5b5; + --utrecht-button-focus-background-color: #89d9a0; + --utrecht-button-focus-color: #7adc98; + --utrecht-button-hover-background-color: #89d9a0; + --utrecht-button-hover-border-color: #74d492; + --utrecht-button-hover-color: #7adc98; + --utrecht-button-primary-action-active-background-color: #74d492; + --utrecht-button-primary-action-active-color: #9e9e9e; + --utrecht-button-primary-action-background-color: #74d492; + --utrecht-button-primary-action-color: #9e9e9e; + --utrecht-button-primary-action-disabled-background-color: #3b3b3b; + --utrecht-button-primary-action-disabled-color: #b5b5b5; + --utrecht-button-primary-action-focus-background-color: #89d9a0; + --utrecht-button-primary-action-focus-color: #7adc98; + --utrecht-button-primary-action-hover-background-color: #89d9a0; + --utrecht-button-primary-action-hover-color: #9e9e9e; + --utrecht-button-secondary-action-active-background-color: #1f1f1f; + --utrecht-button-secondary-action-active-border-color: #74d492; + --utrecht-button-secondary-action-active-color: #7adc98; + --utrecht-button-secondary-action-background-color: #141414; + --utrecht-button-secondary-action-border-color: #74d492; + --utrecht-button-secondary-action-color: #7adc98; + --utrecht-button-secondary-action-disabled-background-color: #201c16; + --utrecht-button-secondary-action-disabled-border-color: #3b3b3b; + --utrecht-button-secondary-action-disabled-color: #b5b5b5; + --utrecht-button-secondary-action-focus-background-color: #5ba6e4; + --utrecht-button-secondary-action-focus-border-color: #89d9a0; + --utrecht-button-secondary-action-focus-color: #93e1aa; + --utrecht-button-secondary-action-hover-background-color: #201c16; + --utrecht-button-secondary-action-hover-border-color: #89d9a0; + --utrecht-button-secondary-action-hover-color: #93e1aa; + --utrecht-button-subtle-active-background-color: #ebebeb1a; + --utrecht-button-subtle-active-color: #7adc98; + --utrecht-button-subtle-color: #7adc98; + --utrecht-button-subtle-disabled-background-color: #201c16; + --utrecht-button-subtle-disabled-color: #9e9e9e; + --utrecht-button-subtle-focus-background-color: #5ba6e4; + --utrecht-button-subtle-focus-color: #7adc98; + --utrecht-button-subtle-hover-background-color: #ebebeb0d; + --utrecht-button-subtle-hover-color: #7adc98; + --utrecht-checkbox-active-background-color: #141414; + --utrecht-checkbox-active-border-color: #848484; + --utrecht-checkbox-active-color: #d1d1d1; + --utrecht-checkbox-background-color: #141414; + --utrecht-checkbox-border-color: #848484; + --utrecht-checkbox-checked-active-background-color: #74d492; + --utrecht-checkbox-checked-active-color: #9e9e9e; + --utrecht-checkbox-checked-background-color: #74d492; + --utrecht-checkbox-checked-border-color: #74d492; + --utrecht-checkbox-checked-color: #9e9e9e; + --utrecht-checkbox-checked-disabled-background-color: #848484; + --utrecht-checkbox-checked-disabled-color: #9e9e9e; + --utrecht-checkbox-checked-focus-background-color: #141414; + --utrecht-checkbox-checked-focus-border-color: #ebebeb; + --utrecht-checkbox-checked-focus-color: #ebebeb; + --utrecht-checkbox-checked-hover-background-color: #74d492; + --utrecht-checkbox-checked-hover-color: #9e9e9e; + --utrecht-checkbox-color: #9e9e9e; + --utrecht-checkbox-disabled-background-color: #1f1f1f; + --utrecht-checkbox-disabled-border-color: #848484; + --utrecht-checkbox-disabled-color: #b5b5b5; + --utrecht-checkbox-focus-background-color: #141414; + --utrecht-checkbox-focus-border-color: #ebebeb; + --utrecht-checkbox-focus-color: #ebebeb; + --utrecht-checkbox-hover-background-color: #201c16; + --utrecht-checkbox-hover-border-color: #848484; + --utrecht-checkbox-hover-color: #d1d1d1; + --utrecht-checkbox-indeterminate-active-background-color: #74d492; + --utrecht-checkbox-indeterminate-active-color: #9e9e9e; + --utrecht-checkbox-indeterminate-background-color: #74d492; + --utrecht-checkbox-indeterminate-color: #9e9e9e; + --utrecht-checkbox-indeterminate-disabled-background-color: #848484; + --utrecht-checkbox-indeterminate-disabled-color: #9e9e9e; + --utrecht-checkbox-indeterminate-focus-background-color: #141414; + --utrecht-checkbox-indeterminate-focus-border-color: #ebebeb; + --utrecht-checkbox-indeterminate-focus-color: #ebebeb; + --utrecht-checkbox-indeterminate-hover-background-color: #74d492; + --utrecht-checkbox-indeterminate-hover-color: #9e9e9e; + --utrecht-checkbox-invalid-background-color: #141414; + --utrecht-checkbox-invalid-border-color: #ed4734; + --utrecht-checkbox-invalid-color: #f95644; + --utrecht-code-background-color: #1f1f1f; + --utrecht-code-color: #d1d1d1; + --utrecht-data-list-item-border-color: #848484; + --utrecht-data-list-item-color: #d1d1d1; + --utrecht-data-list-item-key-color: #b5b5b5; + --utrecht-document-background-color: #141414; + --utrecht-document-color: #d1d1d1; + --utrecht-document-inverse-background-color: #c4c4c4; + --utrecht-document-inverse-color: #9e9e9e; + --utrecht-document-subtle-color: #9e9e9e; + --utrecht-feedback-danger-background-color: #470904; + --utrecht-feedback-danger-color: #ff615c; + --utrecht-feedback-danger-fill-background-color: #470904; + --utrecht-feedback-danger-fill-border-color: #ed4734; + --utrecht-feedback-danger-fill-color: #f65b56; + --utrecht-feedback-neutral-background-color: #0c283f; + --utrecht-feedback-neutral-color: #7ec0f6; + --utrecht-feedback-neutral-fill-background-color: #0c283f; + --utrecht-feedback-neutral-fill-border-color: #3b3b3b; + --utrecht-feedback-neutral-fill-color: #73b7ee; + --utrecht-feedback-safe-background-color: #243c24; + --utrecht-feedback-safe-color: #93e1aa; + --utrecht-feedback-safe-fill-background-color: #243c24; + --utrecht-feedback-safe-fill-color: #89d9a0; + --utrecht-feedback-success-fill-background-color: #243c24; + --utrecht-feedback-success-fill-border-color: #74d492; + --utrecht-feedback-success-fill-color: #74d492; + --utrecht-feedback-warning-background-color: #683e05; + --utrecht-feedback-warning-color: #ffaa75; + --utrecht-feedback-warning-fill-background-color: #683e05; + --utrecht-feedback-warning-fill-border-color: #f39419; + --utrecht-feedback-warning-fill-color: #f7a06a; + --utrecht-focus-border-color: #f8da72; + --utrecht-focus-outline-color: #f8da72; + --utrecht-form-control-active-background-color: #141414; + --utrecht-form-control-active-border-color: #848484; + --utrecht-form-control-active-color: #d1d1d1; + --utrecht-form-control-background-color: #141414; + --utrecht-form-control-border-color: #848484; + --utrecht-form-control-checked-background-color: #74d492; + --utrecht-form-control-checked-border-color: #74d492; + --utrecht-form-control-checked-color: #9e9e9e; + --utrecht-form-control-color: #b5b5b5; + --utrecht-form-control-disabled-background-color: #1f1f1f; + --utrecht-form-control-disabled-border-color: #848484; + --utrecht-form-control-disabled-color: #b5b5b5; + --utrecht-form-control-focus-background-color: #141414; + --utrecht-form-control-focus-border-color: #ebebeb; + --utrecht-form-control-focus-color: #ebebeb; + --utrecht-form-control-hover-background-color: #201c16; + --utrecht-form-control-hover-border-color: #848484; + --utrecht-form-control-hover-color: #d1d1d1; + --utrecht-form-control-invalid-background-color: #141414; + --utrecht-form-control-invalid-border-color: #ed4734; + --utrecht-form-control-invalid-color: #f95644; + --utrecht-form-control-placeholder-color: #b5b5b5; + --utrecht-form-field-description-color: #b5b5b5; + --utrecht-form-field-description-invalid-color: #f95644; + --utrecht-form-field-error-message-color: #f95644; + --utrecht-form-fieldset-legend-color: #d1d1d1; + --utrecht-form-label-checkbox-color: #b5b5b5; + --utrecht-form-label-color: #b5b5b5; + --utrecht-form-label-radio-color: #b5b5b5; + --utrecht-form-toggle-accent-color: #848484; + --utrecht-form-toggle-border-color: #848484; + --utrecht-form-toggle-checked-accent-color: #74d492; + --utrecht-form-toggle-color: #9e9e9e; + --utrecht-form-toggle-focus-border-color: #f8da72; + --utrecht-heading-1-color: #ebebeb; + --utrecht-heading-2-color: #ebebeb; + --utrecht-heading-3-color: #ebebeb; + --utrecht-heading-4-color: #ebebeb; + --utrecht-heading-5-color: #ebebeb; + --utrecht-heading-6-color: #ebebeb; + --utrecht-heading-color: #d1d1d1; + --utrecht-link-active-color: #b0dafc; + --utrecht-link-color: #5eaced; + --utrecht-link-focus-color: #7ec0f6; + --utrecht-link-hover-color: #7ec0f6; + --utrecht-link-social-color: #9e9e9e; + --utrecht-link-social-hover-color: #ffdf3d; + --utrecht-link-text-decoration-color: #7adc98; + --utrecht-link-visited-color: #5eaced; + --utrecht-ordered-list-color: #d1d1d1; + --utrecht-page-footer-background-color: #acacac; + --utrecht-page-footer-color: #9e9e9e; + --utrecht-paragraph-color: #d1d1d1; + --utrecht-paragraph-lead-color: #d1d1d1; + --utrecht-paragraph-small-color: #d1d1d1; + --utrecht-radio-button-active-background-color: #141414; + --utrecht-radio-button-active-border-color: #848484; + --utrecht-radio-button-active-color: #d1d1d1; + --utrecht-radio-button-background-color: #141414; + --utrecht-radio-button-border-color: #848484; + --utrecht-radio-button-checked-active-background-color: #b4fbcb; + --utrecht-radio-button-checked-active-border-color: #b4fbcb; + --utrecht-radio-button-checked-active-color: #9e9e9e; + --utrecht-radio-button-checked-background-color: #74d492; + --utrecht-radio-button-checked-border-color: #74d492; + --utrecht-radio-button-checked-color: #9e9e9e; + --utrecht-radio-button-checked-disabled-background-color: #201c16; + --utrecht-radio-button-checked-disabled-border-color: #848484; + --utrecht-radio-button-checked-disabled-color: #9e9e9e; + --utrecht-radio-button-checked-focus-background-color: #89d9a0; + --utrecht-radio-button-checked-focus-border-color: #74d492; + --utrecht-radio-button-checked-focus-color: #9e9e9e; + --utrecht-radio-button-checked-hover-background-color: #89d9a0; + --utrecht-radio-button-checked-hover-border-color: #89d9a0; + --utrecht-radio-button-checked-hover-color: #9e9e9e; + --utrecht-radio-button-disabled-background-color: #1f1f1f; + --utrecht-radio-button-disabled-border-color: #848484; + --utrecht-radio-button-disabled-color: #b5b5b5; + --utrecht-radio-button-focus-background-color: #141414; + --utrecht-radio-button-focus-border-color: #ebebeb; + --utrecht-radio-button-focus-color: #ebebeb; + --utrecht-radio-button-hover-background-color: #201c16; + --utrecht-radio-button-hover-border-color: #848484; + --utrecht-radio-button-invalid-background-color: #141414; + --utrecht-radio-button-invalid-border-color: #ed4734; + --utrecht-radio-button-invalid-color: #f95644; + --utrecht-select-background-color: #141414; + --utrecht-select-border-color: #848484; + --utrecht-select-color: #b5b5b5; + --utrecht-select-disabled-background-color: #1f1f1f; + --utrecht-select-disabled-border-color: #848484; + --utrecht-select-disabled-color: #b5b5b5; + --utrecht-select-focus-background-color: #141414; + --utrecht-select-focus-border-color: #ebebeb; + --utrecht-select-focus-color: #ebebeb; + --utrecht-select-hover-background-color: #201c16; + --utrecht-select-hover-border-color: #848484; + --utrecht-select-hover-color: #d1d1d1; + --utrecht-select-invalid-background-color: #141414; + --utrecht-select-invalid-border-color: #ed4734; + --utrecht-select-invalid-color: #d1d1d1; + --utrecht-separator-color: #3b3b3b; + --utrecht-skip-link-background-color: #c4c4c4; + --utrecht-skip-link-color: #9e9e9e; + --utrecht-skip-link-focus-background-color: #5ba6e4; + --utrecht-skip-link-focus-color: #7adc98; + --utrecht-table-border-color: #3b3b3b; + --utrecht-table-caption-color: #ebebeb; + --utrecht-table-data-cell-color: #d1d1d1; + --utrecht-table-footer-border-block-end-color: #848484; + --utrecht-table-footer-cell-color: #d1d1d1; + --utrecht-table-header-border-block-end-color: #1f1f1f; + --utrecht-table-header-cell-color: #7adc98; + --utrecht-table-row-alternate-even-background-color: #141414; + --utrecht-table-row-alternate-odd-background-color: #191919; + --utrecht-table-row-border-block-end-color: #1f1f1f; + --utrecht-textarea-background-color: #141414; + --utrecht-textarea-border-color: #848484; + --utrecht-textarea-color: #b5b5b5; + --utrecht-textarea-disabled-background-color: #1f1f1f; + --utrecht-textarea-disabled-border-color: #848484; + --utrecht-textarea-disabled-color: #b5b5b5; + --utrecht-textarea-focus-background-color: #141414; + --utrecht-textarea-focus-border-color: #ebebeb; + --utrecht-textarea-focus-color: #ebebeb; + --utrecht-textarea-invalid-background-color: #141414; + --utrecht-textarea-invalid-border-color: #ed4734; + --utrecht-textarea-invalid-color: #f95644; + --utrecht-textarea-placeholder-color: #9e9e9e; + --utrecht-textbox-background-color: #141414; + --utrecht-textbox-border-color: #848484; + --utrecht-textbox-color: #b5b5b5; + --utrecht-textbox-disabled-background-color: #1f1f1f; + --utrecht-textbox-disabled-border-color: #848484; + --utrecht-textbox-disabled-color: #9e9e9e; + --utrecht-textbox-focus-background-color: #141414; + --utrecht-textbox-focus-border-color: #ebebeb; + --utrecht-textbox-focus-color: #ebebeb; + --utrecht-textbox-hover-background-color: #201c16; + --utrecht-textbox-hover-border-color: #848484; + --utrecht-textbox-hover-color: #d1d1d1; + --utrecht-textbox-invalid-background-color: #141414; + --utrecht-textbox-invalid-border-color: #ed4734; + --utrecht-textbox-invalid-color: #d1d1d1; + --utrecht-textbox-placeholder-color: #9e9e9e; + --utrecht-textbox-read-only-background-color: #201c16; + --utrecht-textbox-read-only-border-color: #848484; + --utrecht-textbox-read-only-color: #d1d1d1; + --utrecht-unordered-list-color: #d1d1d1; + --utrecht-unordered-list-marker-border-color: #c4c4c4; + --utrecht-unordered-list-marker-color: #5ba6e4; + --vng-color-black: #ebebeb; + --vng-color-black-txt: #c4c4c4; + --vng-color-blue-100: #0c283f; + --vng-color-blue-200: #1a3f64; + --vng-color-blue-300: #5ba6e4; + --vng-color-blue-400: #73b7ee; + --vng-color-blue-500: #9acdf6; + --vng-color-extra-limegreen: #85ba40; + --vng-color-extra-purple: #8c6cc7; + --vng-color-extra-yellow: #d0b012; + --vng-color-gray-100: #1f1f1f; + --vng-color-gray-200: #1f1f1f; + --vng-color-gray-300: #3b3b3b; + --vng-color-gray-400: #3b3b3b; + --vng-color-gray-50: #201c16; + --vng-color-gray-500: #848484; + --vng-color-gray-600: #848484; + --vng-color-gray-700: #acacac; + --vng-color-gray-800: #acacac; + --vng-color-gray-900: #c4c4c4; + --vng-color-gray-950: #c4c4c4; + --vng-color-green-100: #243c24; + --vng-color-green-200: #51854f; + --vng-color-green-300: #74d492; + --vng-color-green-400: #89d9a0; + --vng-color-orange-100: #683e05; + --vng-color-orange-200: #a96309; + --vng-color-orange-300: #f39419; + --vng-color-orange-400: #f37526; + --vng-color-pink-100: #390322; + --vng-color-pink-200: #5f113b; + --vng-color-pink-300: #f5399e; + --vng-color-pink-400: #f655ac; + --vng-color-red-100: #470904; + --vng-color-red-200: #87231a; + --vng-color-red-300: #ed4734; + --vng-color-red-400: #f65b56; + --vng-color-white: #141414; } diff --git a/css/tokens/dark/esdoornveen.css b/css/tokens/dark/esdoornveen.css new file mode 100644 index 000000000..9c706a36f --- /dev/null +++ b/css/tokens/dark/esdoornveen.css @@ -0,0 +1,260 @@ +/* GENERATED by nldesign DarkPaletteService v9 from tokens/esdoornveen.css (sha256:4dd3dc67d814c743232804048c851806a639c89f934e514f62cd9dd557e306ae) — do not edit */ +@media (prefers-color-scheme: dark) { + body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { + --esdoornveen-color-accent: #d14274; + --esdoornveen-color-accent-light: #330c1b; + --esdoornveen-color-accent-text: #e36390; + --esdoornveen-color-ink: #d2d3d4; + --esdoornveen-color-line: #24272d; + --esdoornveen-color-main: #966bc9; + --esdoornveen-color-main-deep: #ab87d7; + --esdoornveen-color-main-light: #20132e; + --esdoornveen-color-muted: #93969c; + --esdoornveen-color-surface: #171a20; + --nldesign-brand-stripe-color-1: #966bc9; + --nldesign-brand-stripe-color-2: #d14274; + --nldesign-brand-stripe-color-3: #966bc9; + --nldesign-color-accent: #d14274; + --nldesign-color-accent-light: #330c1b; + --nldesign-color-accent-text: #e36390; + --nldesign-color-background: #171a20; + --nldesign-color-background-dark: #1d2026; + --nldesign-color-background-darker: #2d333c; + --nldesign-color-background-hover: #1d1f23; + --nldesign-color-border: #24272d; + --nldesign-color-border-dark: #656c78; + --nldesign-color-button-primary-background: #966bc9; + --nldesign-color-button-primary-border: #966bc9; + --nldesign-color-button-primary-hover: #ab87d7; + --nldesign-color-button-primary-text: #111111; + --nldesign-color-error: #f54949; + --nldesign-color-error-hover: #f65656; + --nldesign-color-error-rgb: 245, 73, 73; + --nldesign-color-favorite: #f48c25; + --nldesign-color-focus: #966bc980; + --nldesign-color-focus-rgb: 150, 107, 201; + --nldesign-color-header-background: #141414; + --nldesign-color-header-text: #e2e3e4; + --nldesign-color-info: #966bc9; + --nldesign-color-info-rgb: 150, 107, 201; + --nldesign-color-link: #d8c8eb; + --nldesign-color-link-hover: #ab87d7; + --nldesign-color-link-visited: #c392e3; + --nldesign-color-nav-background: #141414; + --nldesign-color-placeholder-dark: #3f3f3f; + --nldesign-color-placeholder-light: #2a2a2a; + --nldesign-color-primary: #decff0; + --nldesign-color-primary-hover: #43206e; + --nldesign-color-primary-light: #20132e; + --nldesign-color-primary-light-hover: #281b37; + --nldesign-color-primary-text: #111111; + --nldesign-color-success: #8ad896; + --nldesign-color-success-rgb: 138, 216, 150; + --nldesign-color-text: #e2e3e4; + --nldesign-color-text-light: #9e9e9e; + --nldesign-color-text-muted: #999ca3; + --nldesign-color-warning: #f8ca77; + --nldesign-color-warning-rgb: 248, 202, 119; + --nldesign-component-badge-background-color: #966bc9; + --nldesign-component-badge-color: #111111; + --nldesign-component-button-active-background-color: #281b37; + --nldesign-component-button-active-color: #9b6ed1; + --nldesign-component-button-border-color: #966bc9; + --nldesign-component-button-color: #9b6ed1; + --nldesign-component-button-disabled-background-color: #2a2a2a; + --nldesign-component-button-disabled-border-color: #535353; + --nldesign-component-button-disabled-color: #9e9e9e; + --nldesign-component-button-error-color: #000000; + --nldesign-component-button-focus-border-color: #966bc980; + --nldesign-component-button-hover-background-color: #20132e; + --nldesign-component-button-hover-border-color: #ab87d7; + --nldesign-component-button-hover-color: #9b6ed1; + --nldesign-component-button-primary-action-background-color: #966bc9; + --nldesign-component-button-primary-action-border-color: #966bc9; + --nldesign-component-button-primary-action-color: #111111; + --nldesign-component-button-primary-action-hover-background-color: #ab87d7; + --nldesign-component-button-primary-action-hover-color: #2e2e2e; + --nldesign-component-button-secondary-action-border-color: #966bc9; + --nldesign-component-button-secondary-action-color: #9b6ed1; + --nldesign-component-button-secondary-action-hover-background-color: #20132e; + --nldesign-component-content-card-shadow-color: #d2d3d40a; + --nldesign-component-content-surface-background-color: #171a20; + --nldesign-component-form-field-label-color: #e2e3e4; + --nldesign-component-form-fieldset-border-color: #24272d; + --nldesign-component-form-select-border-color: #24272d; + --nldesign-component-form-select-focus-border-color: #966bc9; + --nldesign-component-heading-1-color: #e2e3e4; + --nldesign-component-heading-2-color: #e2e3e4; + --nldesign-component-heading-3-color: #e2e3e4; + --nldesign-component-heading-4-color: #e2e3e4; + --nldesign-component-heading-5-color: #e2e3e4; + --nldesign-component-heading-6-color: #e2e3e4; + --nldesign-component-heading-color: #e2e3e4; + --nldesign-component-link-color: #9b6ed1; + --nldesign-component-link-hover-color: #b491df; + --nldesign-component-link-visited-color: #cea0eb; + --nldesign-component-navigation-active-background-color: #d14274; + --nldesign-component-navigation-active-color: #e36390; + --nldesign-component-navigation-badge-background-color: #d14274; + --nldesign-component-navigation-badge-color: #000000; + --nldesign-component-ordered-list-color: #e2e3e4; + --nldesign-component-paragraph-color: #e2e3e4; + --nldesign-component-separator-border-color: #24272d; + --nldesign-component-status-badge-error-background-color: #310d0a; + --nldesign-component-status-badge-error-color: #ff5c5c; + --nldesign-component-status-badge-info-background-color: #20132e; + --nldesign-component-status-badge-info-color: #b491df; + --nldesign-component-status-badge-success-background-color: #192e1e; + --nldesign-component-status-badge-success-color: #94e1a0; + --nldesign-component-status-badge-warning-background-color: #412d03; + --nldesign-component-status-badge-warning-color: #ffd485; + --nldesign-component-table-border-color: #24272d; + --nldesign-component-table-header-background-color: #1d2026; + --nldesign-component-table-header-color: #e2e3e4; + --nldesign-component-table-row-hover-background-color: #1d1f23; + --nldesign-component-textbox-background-color: #141414; + --nldesign-component-textbox-border-color: #5d6474; + --nldesign-component-textbox-color: #e2e3e4; + --nldesign-component-textbox-disabled-background-color: #2a2a2a; + --nldesign-component-textbox-disabled-color: #9e9e9e; + --nldesign-component-textbox-focus-border-color: #966bc9; + --nldesign-component-textbox-hover-border-color: #656c78; + --nldesign-component-textbox-invalid-border-color: #f54949; + --nldesign-component-unordered-list-color: #e2e3e4; + --nldesign-hero-action-background-color: #966bc9; + --nldesign-hero-action-color: #9e9e9e; + --nldesign-hero-background-color: #141414; + --nldesign-hero-body-color: #111111; + --nldesign-hero-title-color: #111111; + --nldesign-logo-url: url('../../../img/logos/esdoornveen-dark.svg'); + } +} +body[data-theme-dark], +body[data-themes*=dark] { + --esdoornveen-color-accent: #d14274; + --esdoornveen-color-accent-light: #330c1b; + --esdoornveen-color-accent-text: #e36390; + --esdoornveen-color-ink: #d2d3d4; + --esdoornveen-color-line: #24272d; + --esdoornveen-color-main: #966bc9; + --esdoornveen-color-main-deep: #ab87d7; + --esdoornveen-color-main-light: #20132e; + --esdoornveen-color-muted: #93969c; + --esdoornveen-color-surface: #171a20; + --nldesign-brand-stripe-color-1: #966bc9; + --nldesign-brand-stripe-color-2: #d14274; + --nldesign-brand-stripe-color-3: #966bc9; + --nldesign-color-accent: #d14274; + --nldesign-color-accent-light: #330c1b; + --nldesign-color-accent-text: #e36390; + --nldesign-color-background: #171a20; + --nldesign-color-background-dark: #1d2026; + --nldesign-color-background-darker: #2d333c; + --nldesign-color-background-hover: #1d1f23; + --nldesign-color-border: #24272d; + --nldesign-color-border-dark: #656c78; + --nldesign-color-button-primary-background: #966bc9; + --nldesign-color-button-primary-border: #966bc9; + --nldesign-color-button-primary-hover: #ab87d7; + --nldesign-color-button-primary-text: #111111; + --nldesign-color-error: #f54949; + --nldesign-color-error-hover: #f65656; + --nldesign-color-error-rgb: 245, 73, 73; + --nldesign-color-favorite: #f48c25; + --nldesign-color-focus: #966bc980; + --nldesign-color-focus-rgb: 150, 107, 201; + --nldesign-color-header-background: #141414; + --nldesign-color-header-text: #e2e3e4; + --nldesign-color-info: #966bc9; + --nldesign-color-info-rgb: 150, 107, 201; + --nldesign-color-link: #d8c8eb; + --nldesign-color-link-hover: #ab87d7; + --nldesign-color-link-visited: #c392e3; + --nldesign-color-nav-background: #141414; + --nldesign-color-placeholder-dark: #3f3f3f; + --nldesign-color-placeholder-light: #2a2a2a; + --nldesign-color-primary: #decff0; + --nldesign-color-primary-hover: #43206e; + --nldesign-color-primary-light: #20132e; + --nldesign-color-primary-light-hover: #281b37; + --nldesign-color-primary-text: #111111; + --nldesign-color-success: #8ad896; + --nldesign-color-success-rgb: 138, 216, 150; + --nldesign-color-text: #e2e3e4; + --nldesign-color-text-light: #9e9e9e; + --nldesign-color-text-muted: #999ca3; + --nldesign-color-warning: #f8ca77; + --nldesign-color-warning-rgb: 248, 202, 119; + --nldesign-component-badge-background-color: #966bc9; + --nldesign-component-badge-color: #111111; + --nldesign-component-button-active-background-color: #281b37; + --nldesign-component-button-active-color: #9b6ed1; + --nldesign-component-button-border-color: #966bc9; + --nldesign-component-button-color: #9b6ed1; + --nldesign-component-button-disabled-background-color: #2a2a2a; + --nldesign-component-button-disabled-border-color: #535353; + --nldesign-component-button-disabled-color: #9e9e9e; + --nldesign-component-button-error-color: #000000; + --nldesign-component-button-focus-border-color: #966bc980; + --nldesign-component-button-hover-background-color: #20132e; + --nldesign-component-button-hover-border-color: #ab87d7; + --nldesign-component-button-hover-color: #9b6ed1; + --nldesign-component-button-primary-action-background-color: #966bc9; + --nldesign-component-button-primary-action-border-color: #966bc9; + --nldesign-component-button-primary-action-color: #111111; + --nldesign-component-button-primary-action-hover-background-color: #ab87d7; + --nldesign-component-button-primary-action-hover-color: #2e2e2e; + --nldesign-component-button-secondary-action-border-color: #966bc9; + --nldesign-component-button-secondary-action-color: #9b6ed1; + --nldesign-component-button-secondary-action-hover-background-color: #20132e; + --nldesign-component-content-card-shadow-color: #d2d3d40a; + --nldesign-component-content-surface-background-color: #171a20; + --nldesign-component-form-field-label-color: #e2e3e4; + --nldesign-component-form-fieldset-border-color: #24272d; + --nldesign-component-form-select-border-color: #24272d; + --nldesign-component-form-select-focus-border-color: #966bc9; + --nldesign-component-heading-1-color: #e2e3e4; + --nldesign-component-heading-2-color: #e2e3e4; + --nldesign-component-heading-3-color: #e2e3e4; + --nldesign-component-heading-4-color: #e2e3e4; + --nldesign-component-heading-5-color: #e2e3e4; + --nldesign-component-heading-6-color: #e2e3e4; + --nldesign-component-heading-color: #e2e3e4; + --nldesign-component-link-color: #9b6ed1; + --nldesign-component-link-hover-color: #b491df; + --nldesign-component-link-visited-color: #cea0eb; + --nldesign-component-navigation-active-background-color: #d14274; + --nldesign-component-navigation-active-color: #e36390; + --nldesign-component-navigation-badge-background-color: #d14274; + --nldesign-component-navigation-badge-color: #000000; + --nldesign-component-ordered-list-color: #e2e3e4; + --nldesign-component-paragraph-color: #e2e3e4; + --nldesign-component-separator-border-color: #24272d; + --nldesign-component-status-badge-error-background-color: #310d0a; + --nldesign-component-status-badge-error-color: #ff5c5c; + --nldesign-component-status-badge-info-background-color: #20132e; + --nldesign-component-status-badge-info-color: #b491df; + --nldesign-component-status-badge-success-background-color: #192e1e; + --nldesign-component-status-badge-success-color: #94e1a0; + --nldesign-component-status-badge-warning-background-color: #412d03; + --nldesign-component-status-badge-warning-color: #ffd485; + --nldesign-component-table-border-color: #24272d; + --nldesign-component-table-header-background-color: #1d2026; + --nldesign-component-table-header-color: #e2e3e4; + --nldesign-component-table-row-hover-background-color: #1d1f23; + --nldesign-component-textbox-background-color: #141414; + --nldesign-component-textbox-border-color: #5d6474; + --nldesign-component-textbox-color: #e2e3e4; + --nldesign-component-textbox-disabled-background-color: #2a2a2a; + --nldesign-component-textbox-disabled-color: #9e9e9e; + --nldesign-component-textbox-focus-border-color: #966bc9; + --nldesign-component-textbox-hover-border-color: #656c78; + --nldesign-component-textbox-invalid-border-color: #f54949; + --nldesign-component-unordered-list-color: #e2e3e4; + --nldesign-hero-action-background-color: #966bc9; + --nldesign-hero-action-color: #9e9e9e; + --nldesign-hero-background-color: #141414; + --nldesign-hero-body-color: #111111; + --nldesign-hero-title-color: #111111; + --nldesign-logo-url: url('../../../img/logos/esdoornveen-dark.svg'); +} diff --git a/css/tokens/dark/vaartveld.css b/css/tokens/dark/vaartveld.css new file mode 100644 index 000000000..73bf8f8bc --- /dev/null +++ b/css/tokens/dark/vaartveld.css @@ -0,0 +1,260 @@ +/* GENERATED by nldesign DarkPaletteService v9 from tokens/vaartveld.css (sha256:2f7092d1d4a3d830d4580f784ed672dd50a3a6faf70f14d9ca8e2090965d7d9b) — do not edit */ +@media (prefers-color-scheme: dark) { + body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { + --nldesign-brand-stripe-color-1: #2f5bd7; + --nldesign-brand-stripe-color-2: #4cd7cb; + --nldesign-brand-stripe-color-3: #2f5bd7; + --nldesign-color-accent: #4cd7cb; + --nldesign-color-accent-light: #143a35; + --nldesign-color-accent-text: #9df4eb; + --nldesign-color-background: #171a20; + --nldesign-color-background-dark: #1d2026; + --nldesign-color-background-darker: #2d333c; + --nldesign-color-background-hover: #1d1f23; + --nldesign-color-border: #24272d; + --nldesign-color-border-dark: #656c78; + --nldesign-color-button-primary-background: #2f5bd7; + --nldesign-color-button-primary-border: #2f5bd7; + --nldesign-color-button-primary-hover: #6a88e2; + --nldesign-color-button-primary-text: #fefefe; + --nldesign-color-error: #f54949; + --nldesign-color-error-hover: #f65656; + --nldesign-color-error-rgb: 245, 73, 73; + --nldesign-color-favorite: #f48c25; + --nldesign-color-focus: #2f5bd780; + --nldesign-color-focus-rgb: 47, 91, 215; + --nldesign-color-header-background: #141414; + --nldesign-color-header-text: #e2e3e4; + --nldesign-color-info: #2f5bd7; + --nldesign-color-info-rgb: 47, 91, 215; + --nldesign-color-link: #9aafec; + --nldesign-color-link-hover: #6a88e2; + --nldesign-color-link-visited: #c392e3; + --nldesign-color-nav-background: #141414; + --nldesign-color-placeholder-dark: #3f3f3f; + --nldesign-color-placeholder-light: #2a2a2a; + --nldesign-color-primary: #89a3ee; + --nldesign-color-primary-hover: #14338f; + --nldesign-color-primary-light: #0a1735; + --nldesign-color-primary-light-hover: #0e1c3f; + --nldesign-color-primary-text: #111111; + --nldesign-color-success: #8ad896; + --nldesign-color-success-rgb: 138, 216, 150; + --nldesign-color-text: #e2e3e4; + --nldesign-color-text-light: #9e9e9e; + --nldesign-color-text-muted: #999ca3; + --nldesign-color-warning: #f8ca77; + --nldesign-color-warning-rgb: 248, 202, 119; + --nldesign-component-badge-background-color: #2f5bd7; + --nldesign-component-badge-color: #fefefe; + --nldesign-component-button-active-background-color: #0e1c3f; + --nldesign-component-button-active-color: #567be7; + --nldesign-component-button-border-color: #2f5bd7; + --nldesign-component-button-color: #567be7; + --nldesign-component-button-disabled-background-color: #2a2a2a; + --nldesign-component-button-disabled-border-color: #535353; + --nldesign-component-button-disabled-color: #9e9e9e; + --nldesign-component-button-error-color: #000000; + --nldesign-component-button-focus-border-color: #2f5bd780; + --nldesign-component-button-hover-background-color: #0a1735; + --nldesign-component-button-hover-border-color: #6a88e2; + --nldesign-component-button-hover-color: #567be7; + --nldesign-component-button-primary-action-background-color: #2f5bd7; + --nldesign-component-button-primary-action-border-color: #2f5bd7; + --nldesign-component-button-primary-action-color: #fefefe; + --nldesign-component-button-primary-action-hover-background-color: #6a88e2; + --nldesign-component-button-primary-action-hover-color: #222222; + --nldesign-component-button-secondary-action-border-color: #2f5bd7; + --nldesign-component-button-secondary-action-color: #c6d2f7; + --nldesign-component-button-secondary-action-hover-background-color: #0a1735; + --nldesign-component-content-card-shadow-color: #d2d3d40a; + --nldesign-component-content-surface-background-color: #171a20; + --nldesign-component-form-field-label-color: #e2e3e4; + --nldesign-component-form-fieldset-border-color: #24272d; + --nldesign-component-form-select-border-color: #24272d; + --nldesign-component-form-select-focus-border-color: #2f5bd7; + --nldesign-component-heading-1-color: #e2e3e4; + --nldesign-component-heading-2-color: #e2e3e4; + --nldesign-component-heading-3-color: #e2e3e4; + --nldesign-component-heading-4-color: #e2e3e4; + --nldesign-component-heading-5-color: #e2e3e4; + --nldesign-component-heading-6-color: #e2e3e4; + --nldesign-component-heading-color: #e2e3e4; + --nldesign-component-link-color: #c6d2f7; + --nldesign-component-link-hover-color: #708feb; + --nldesign-component-link-visited-color: #cea0eb; + --nldesign-component-navigation-active-background-color: #4cd7cb; + --nldesign-component-navigation-active-color: #9df4eb; + --nldesign-component-navigation-badge-background-color: #4cd7cb; + --nldesign-component-navigation-badge-color: #111111; + --nldesign-component-ordered-list-color: #e2e3e4; + --nldesign-component-paragraph-color: #e2e3e4; + --nldesign-component-separator-border-color: #24272d; + --nldesign-component-status-badge-error-background-color: #310d0a; + --nldesign-component-status-badge-error-color: #ff5c5c; + --nldesign-component-status-badge-info-background-color: #0a1735; + --nldesign-component-status-badge-info-color: #708feb; + --nldesign-component-status-badge-success-background-color: #192e1e; + --nldesign-component-status-badge-success-color: #94e1a0; + --nldesign-component-status-badge-warning-background-color: #412d03; + --nldesign-component-status-badge-warning-color: #ffd485; + --nldesign-component-table-border-color: #24272d; + --nldesign-component-table-header-background-color: #1d2026; + --nldesign-component-table-header-color: #e2e3e4; + --nldesign-component-table-row-hover-background-color: #1d1f23; + --nldesign-component-textbox-background-color: #141414; + --nldesign-component-textbox-border-color: #5d6474; + --nldesign-component-textbox-color: #e2e3e4; + --nldesign-component-textbox-disabled-background-color: #2a2a2a; + --nldesign-component-textbox-disabled-color: #9e9e9e; + --nldesign-component-textbox-focus-border-color: #2f5bd7; + --nldesign-component-textbox-hover-border-color: #656c78; + --nldesign-component-textbox-invalid-border-color: #f54949; + --nldesign-component-unordered-list-color: #e2e3e4; + --nldesign-hero-action-background-color: #2f5bd7; + --nldesign-hero-action-color: #9e9e9e; + --nldesign-hero-background-color: #0a1735; + --nldesign-hero-body-color: #111111; + --nldesign-hero-title-color: #111111; + --nldesign-logo-url: url('../../../img/logos/vaartveld-dark.svg'); + --vaartveld-color-accent: #4cd7cb; + --vaartveld-color-accent-light: #143a35; + --vaartveld-color-accent-text: #9df4eb; + --vaartveld-color-ink: #d2d3d4; + --vaartveld-color-line: #24272d; + --vaartveld-color-main: #2f5bd7; + --vaartveld-color-main-deep: #6a88e2; + --vaartveld-color-main-light: #0a1735; + --vaartveld-color-muted: #93969c; + --vaartveld-color-surface: #171a20; + } +} +body[data-theme-dark], +body[data-themes*=dark] { + --nldesign-brand-stripe-color-1: #2f5bd7; + --nldesign-brand-stripe-color-2: #4cd7cb; + --nldesign-brand-stripe-color-3: #2f5bd7; + --nldesign-color-accent: #4cd7cb; + --nldesign-color-accent-light: #143a35; + --nldesign-color-accent-text: #9df4eb; + --nldesign-color-background: #171a20; + --nldesign-color-background-dark: #1d2026; + --nldesign-color-background-darker: #2d333c; + --nldesign-color-background-hover: #1d1f23; + --nldesign-color-border: #24272d; + --nldesign-color-border-dark: #656c78; + --nldesign-color-button-primary-background: #2f5bd7; + --nldesign-color-button-primary-border: #2f5bd7; + --nldesign-color-button-primary-hover: #6a88e2; + --nldesign-color-button-primary-text: #fefefe; + --nldesign-color-error: #f54949; + --nldesign-color-error-hover: #f65656; + --nldesign-color-error-rgb: 245, 73, 73; + --nldesign-color-favorite: #f48c25; + --nldesign-color-focus: #2f5bd780; + --nldesign-color-focus-rgb: 47, 91, 215; + --nldesign-color-header-background: #141414; + --nldesign-color-header-text: #e2e3e4; + --nldesign-color-info: #2f5bd7; + --nldesign-color-info-rgb: 47, 91, 215; + --nldesign-color-link: #9aafec; + --nldesign-color-link-hover: #6a88e2; + --nldesign-color-link-visited: #c392e3; + --nldesign-color-nav-background: #141414; + --nldesign-color-placeholder-dark: #3f3f3f; + --nldesign-color-placeholder-light: #2a2a2a; + --nldesign-color-primary: #89a3ee; + --nldesign-color-primary-hover: #14338f; + --nldesign-color-primary-light: #0a1735; + --nldesign-color-primary-light-hover: #0e1c3f; + --nldesign-color-primary-text: #111111; + --nldesign-color-success: #8ad896; + --nldesign-color-success-rgb: 138, 216, 150; + --nldesign-color-text: #e2e3e4; + --nldesign-color-text-light: #9e9e9e; + --nldesign-color-text-muted: #999ca3; + --nldesign-color-warning: #f8ca77; + --nldesign-color-warning-rgb: 248, 202, 119; + --nldesign-component-badge-background-color: #2f5bd7; + --nldesign-component-badge-color: #fefefe; + --nldesign-component-button-active-background-color: #0e1c3f; + --nldesign-component-button-active-color: #567be7; + --nldesign-component-button-border-color: #2f5bd7; + --nldesign-component-button-color: #567be7; + --nldesign-component-button-disabled-background-color: #2a2a2a; + --nldesign-component-button-disabled-border-color: #535353; + --nldesign-component-button-disabled-color: #9e9e9e; + --nldesign-component-button-error-color: #000000; + --nldesign-component-button-focus-border-color: #2f5bd780; + --nldesign-component-button-hover-background-color: #0a1735; + --nldesign-component-button-hover-border-color: #6a88e2; + --nldesign-component-button-hover-color: #567be7; + --nldesign-component-button-primary-action-background-color: #2f5bd7; + --nldesign-component-button-primary-action-border-color: #2f5bd7; + --nldesign-component-button-primary-action-color: #fefefe; + --nldesign-component-button-primary-action-hover-background-color: #6a88e2; + --nldesign-component-button-primary-action-hover-color: #222222; + --nldesign-component-button-secondary-action-border-color: #2f5bd7; + --nldesign-component-button-secondary-action-color: #c6d2f7; + --nldesign-component-button-secondary-action-hover-background-color: #0a1735; + --nldesign-component-content-card-shadow-color: #d2d3d40a; + --nldesign-component-content-surface-background-color: #171a20; + --nldesign-component-form-field-label-color: #e2e3e4; + --nldesign-component-form-fieldset-border-color: #24272d; + --nldesign-component-form-select-border-color: #24272d; + --nldesign-component-form-select-focus-border-color: #2f5bd7; + --nldesign-component-heading-1-color: #e2e3e4; + --nldesign-component-heading-2-color: #e2e3e4; + --nldesign-component-heading-3-color: #e2e3e4; + --nldesign-component-heading-4-color: #e2e3e4; + --nldesign-component-heading-5-color: #e2e3e4; + --nldesign-component-heading-6-color: #e2e3e4; + --nldesign-component-heading-color: #e2e3e4; + --nldesign-component-link-color: #c6d2f7; + --nldesign-component-link-hover-color: #708feb; + --nldesign-component-link-visited-color: #cea0eb; + --nldesign-component-navigation-active-background-color: #4cd7cb; + --nldesign-component-navigation-active-color: #9df4eb; + --nldesign-component-navigation-badge-background-color: #4cd7cb; + --nldesign-component-navigation-badge-color: #111111; + --nldesign-component-ordered-list-color: #e2e3e4; + --nldesign-component-paragraph-color: #e2e3e4; + --nldesign-component-separator-border-color: #24272d; + --nldesign-component-status-badge-error-background-color: #310d0a; + --nldesign-component-status-badge-error-color: #ff5c5c; + --nldesign-component-status-badge-info-background-color: #0a1735; + --nldesign-component-status-badge-info-color: #708feb; + --nldesign-component-status-badge-success-background-color: #192e1e; + --nldesign-component-status-badge-success-color: #94e1a0; + --nldesign-component-status-badge-warning-background-color: #412d03; + --nldesign-component-status-badge-warning-color: #ffd485; + --nldesign-component-table-border-color: #24272d; + --nldesign-component-table-header-background-color: #1d2026; + --nldesign-component-table-header-color: #e2e3e4; + --nldesign-component-table-row-hover-background-color: #1d1f23; + --nldesign-component-textbox-background-color: #141414; + --nldesign-component-textbox-border-color: #5d6474; + --nldesign-component-textbox-color: #e2e3e4; + --nldesign-component-textbox-disabled-background-color: #2a2a2a; + --nldesign-component-textbox-disabled-color: #9e9e9e; + --nldesign-component-textbox-focus-border-color: #2f5bd7; + --nldesign-component-textbox-hover-border-color: #656c78; + --nldesign-component-textbox-invalid-border-color: #f54949; + --nldesign-component-unordered-list-color: #e2e3e4; + --nldesign-hero-action-background-color: #2f5bd7; + --nldesign-hero-action-color: #9e9e9e; + --nldesign-hero-background-color: #0a1735; + --nldesign-hero-body-color: #111111; + --nldesign-hero-title-color: #111111; + --nldesign-logo-url: url('../../../img/logos/vaartveld-dark.svg'); + --vaartveld-color-accent: #4cd7cb; + --vaartveld-color-accent-light: #143a35; + --vaartveld-color-accent-text: #9df4eb; + --vaartveld-color-ink: #d2d3d4; + --vaartveld-color-line: #24272d; + --vaartveld-color-main: #2f5bd7; + --vaartveld-color-main-deep: #6a88e2; + --vaartveld-color-main-light: #0a1735; + --vaartveld-color-muted: #93969c; + --vaartveld-color-surface: #171a20; +} diff --git a/css/tokens/dark/warmtepompacademie.css b/css/tokens/dark/warmtepompacademie.css new file mode 100644 index 000000000..1d61753cf --- /dev/null +++ b/css/tokens/dark/warmtepompacademie.css @@ -0,0 +1,266 @@ +/* GENERATED by nldesign DarkPaletteService v9 from tokens/warmtepompacademie.css (sha256:d6b7d265c31a592a841b35dd69b338cac9ac6bba39ccdee989a2d8a9dfc05dc9) — do not edit */ +@media (prefers-color-scheme: dark) { + body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { + --nldesign-brand-stripe-color-1: #79e0ec; + --nldesign-brand-stripe-color-2: #24272d; + --nldesign-brand-stripe-color-3: #e6612d; + --nldesign-color-accent: #e9713f; + --nldesign-color-accent-light: #3f2109; + --nldesign-color-accent-text: #ed8765; + --nldesign-color-background: #171a20; + --nldesign-color-background-dark: #1d2026; + --nldesign-color-background-darker: #2d333c; + --nldesign-color-background-hover: #1d1f23; + --nldesign-color-border: #24272d; + --nldesign-color-border-dark: #656c78; + --nldesign-color-button-primary-background: #79e0ec; + --nldesign-color-button-primary-border: #79e0ec; + --nldesign-color-button-primary-hover: #95e6f0; + --nldesign-color-button-primary-text: #3e3e3e; + --nldesign-color-error: #f54949; + --nldesign-color-error-hover: #f65656; + --nldesign-color-error-rgb: 245, 73, 73; + --nldesign-color-favorite: #f48c25; + --nldesign-color-focus: #79e0ec80; + --nldesign-color-focus-rgb: 121, 224, 236; + --nldesign-color-footer-background: #95e6f0; + --nldesign-color-footer-text: #5e5e5e; + --nldesign-color-header-background: #141414; + --nldesign-color-header-text: #e2e3e4; + --nldesign-color-info: #79e0ec; + --nldesign-color-info-rgb: 121, 224, 236; + --nldesign-color-link: #79e0ec; + --nldesign-color-link-hover: #95e6f0; + --nldesign-color-link-visited: #c392e3; + --nldesign-color-nav-background: #141414; + --nldesign-color-placeholder-dark: #3f3f3f; + --nldesign-color-placeholder-light: #2a2a2a; + --nldesign-color-primary: #1ad4ea; + --nldesign-color-primary-hover: #084f58; + --nldesign-color-primary-light: #182f33; + --nldesign-color-primary-light-hover: #1f3a3e; + --nldesign-color-primary-text: #111111; + --nldesign-color-success: #8ad896; + --nldesign-color-success-rgb: 138, 216, 150; + --nldesign-color-text: #e2e3e4; + --nldesign-color-text-light: #9e9e9e; + --nldesign-color-text-muted: #999ca3; + --nldesign-color-warning: #f8ca77; + --nldesign-color-warning-rgb: 248, 202, 119; + --nldesign-component-badge-background-color: #79e0ec; + --nldesign-component-badge-color: #3e3e3e; + --nldesign-component-button-active-background-color: #1f3a3e; + --nldesign-component-button-active-color: #85e8f4; + --nldesign-component-button-border-color: #79e0ec; + --nldesign-component-button-color: #85e8f4; + --nldesign-component-button-disabled-background-color: #2a2a2a; + --nldesign-component-button-disabled-border-color: #535353; + --nldesign-component-button-disabled-color: #9e9e9e; + --nldesign-component-button-error-color: #000000; + --nldesign-component-button-focus-border-color: #79e0ec80; + --nldesign-component-button-hover-background-color: #182f33; + --nldesign-component-button-hover-border-color: #95e6f0; + --nldesign-component-button-hover-color: #85e8f4; + --nldesign-component-button-primary-action-background-color: #79e0ec; + --nldesign-component-button-primary-action-border-color: #79e0ec; + --nldesign-component-button-primary-action-color: #3e3e3e; + --nldesign-component-button-primary-action-hover-background-color: #95e6f0; + --nldesign-component-button-primary-action-hover-color: #5e5e5e; + --nldesign-component-button-secondary-action-border-color: #79e0ec; + --nldesign-component-button-secondary-action-color: #85e8f4; + --nldesign-component-button-secondary-action-hover-background-color: #182f33; + --nldesign-component-content-card-shadow-color: #d2d3d40a; + --nldesign-component-content-surface-background-color: #171a20; + --nldesign-component-form-field-label-color: #e2e3e4; + --nldesign-component-form-fieldset-border-color: #24272d; + --nldesign-component-form-select-border-color: #24272d; + --nldesign-component-form-select-focus-border-color: #79e0ec; + --nldesign-component-heading-1-color: #e2e3e4; + --nldesign-component-heading-2-color: #e2e3e4; + --nldesign-component-heading-3-color: #e2e3e4; + --nldesign-component-heading-4-color: #e2e3e4; + --nldesign-component-heading-5-color: #e2e3e4; + --nldesign-component-heading-6-color: #e2e3e4; + --nldesign-component-heading-color: #e2e3e4; + --nldesign-component-link-color: #85e8f4; + --nldesign-component-link-hover-color: #a7eef7; + --nldesign-component-link-visited-color: #cea0eb; + --nldesign-component-navigation-active-background-color: #e9713f; + --nldesign-component-navigation-active-color: #ed8765; + --nldesign-component-navigation-badge-background-color: #e9713f; + --nldesign-component-navigation-badge-color: #111111; + --nldesign-component-ordered-list-color: #e2e3e4; + --nldesign-component-paragraph-color: #e2e3e4; + --nldesign-component-separator-border-color: #24272d; + --nldesign-component-status-badge-error-background-color: #310d0a; + --nldesign-component-status-badge-error-color: #ff5c5c; + --nldesign-component-status-badge-info-background-color: #182f33; + --nldesign-component-status-badge-info-color: #a7eef7; + --nldesign-component-status-badge-success-background-color: #192e1e; + --nldesign-component-status-badge-success-color: #94e1a0; + --nldesign-component-status-badge-warning-background-color: #412d03; + --nldesign-component-status-badge-warning-color: #ffd485; + --nldesign-component-table-border-color: #24272d; + --nldesign-component-table-header-background-color: #1d2026; + --nldesign-component-table-header-color: #e2e3e4; + --nldesign-component-table-row-hover-background-color: #1d1f23; + --nldesign-component-textbox-background-color: #141414; + --nldesign-component-textbox-border-color: #5d6474; + --nldesign-component-textbox-color: #e2e3e4; + --nldesign-component-textbox-disabled-background-color: #2a2a2a; + --nldesign-component-textbox-disabled-color: #9e9e9e; + --nldesign-component-textbox-focus-border-color: #79e0ec; + --nldesign-component-textbox-hover-border-color: #656c78; + --nldesign-component-textbox-invalid-border-color: #f54949; + --nldesign-component-unordered-list-color: #e2e3e4; + --nldesign-hero-action-background-color: #79e0ec; + --nldesign-hero-action-color: #9e9e9e; + --nldesign-hero-background-color: #182f33; + --nldesign-hero-body-color: #111111; + --nldesign-hero-title-color: #111111; + --nldesign-logo-url: url('../../../img/logos/warmtepompacademie-dark.svg'); + --warmtepompacademie-color-accent: #e9713f; + --warmtepompacademie-color-accent-light: #3f2109; + --warmtepompacademie-color-accent-mark: #e6612d; + --warmtepompacademie-color-accent-text: #ed8765; + --warmtepompacademie-color-ink: #d2d3d4; + --warmtepompacademie-color-line: #24272d; + --warmtepompacademie-color-main: #79e0ec; + --warmtepompacademie-color-main-deep: #95e6f0; + --warmtepompacademie-color-main-light: #182f33; + --warmtepompacademie-color-muted: #93969c; + --warmtepompacademie-color-surface: #171a20; + } +} +body[data-theme-dark], +body[data-themes*=dark] { + --nldesign-brand-stripe-color-1: #79e0ec; + --nldesign-brand-stripe-color-2: #24272d; + --nldesign-brand-stripe-color-3: #e6612d; + --nldesign-color-accent: #e9713f; + --nldesign-color-accent-light: #3f2109; + --nldesign-color-accent-text: #ed8765; + --nldesign-color-background: #171a20; + --nldesign-color-background-dark: #1d2026; + --nldesign-color-background-darker: #2d333c; + --nldesign-color-background-hover: #1d1f23; + --nldesign-color-border: #24272d; + --nldesign-color-border-dark: #656c78; + --nldesign-color-button-primary-background: #79e0ec; + --nldesign-color-button-primary-border: #79e0ec; + --nldesign-color-button-primary-hover: #95e6f0; + --nldesign-color-button-primary-text: #3e3e3e; + --nldesign-color-error: #f54949; + --nldesign-color-error-hover: #f65656; + --nldesign-color-error-rgb: 245, 73, 73; + --nldesign-color-favorite: #f48c25; + --nldesign-color-focus: #79e0ec80; + --nldesign-color-focus-rgb: 121, 224, 236; + --nldesign-color-footer-background: #95e6f0; + --nldesign-color-footer-text: #5e5e5e; + --nldesign-color-header-background: #141414; + --nldesign-color-header-text: #e2e3e4; + --nldesign-color-info: #79e0ec; + --nldesign-color-info-rgb: 121, 224, 236; + --nldesign-color-link: #79e0ec; + --nldesign-color-link-hover: #95e6f0; + --nldesign-color-link-visited: #c392e3; + --nldesign-color-nav-background: #141414; + --nldesign-color-placeholder-dark: #3f3f3f; + --nldesign-color-placeholder-light: #2a2a2a; + --nldesign-color-primary: #1ad4ea; + --nldesign-color-primary-hover: #084f58; + --nldesign-color-primary-light: #182f33; + --nldesign-color-primary-light-hover: #1f3a3e; + --nldesign-color-primary-text: #111111; + --nldesign-color-success: #8ad896; + --nldesign-color-success-rgb: 138, 216, 150; + --nldesign-color-text: #e2e3e4; + --nldesign-color-text-light: #9e9e9e; + --nldesign-color-text-muted: #999ca3; + --nldesign-color-warning: #f8ca77; + --nldesign-color-warning-rgb: 248, 202, 119; + --nldesign-component-badge-background-color: #79e0ec; + --nldesign-component-badge-color: #3e3e3e; + --nldesign-component-button-active-background-color: #1f3a3e; + --nldesign-component-button-active-color: #85e8f4; + --nldesign-component-button-border-color: #79e0ec; + --nldesign-component-button-color: #85e8f4; + --nldesign-component-button-disabled-background-color: #2a2a2a; + --nldesign-component-button-disabled-border-color: #535353; + --nldesign-component-button-disabled-color: #9e9e9e; + --nldesign-component-button-error-color: #000000; + --nldesign-component-button-focus-border-color: #79e0ec80; + --nldesign-component-button-hover-background-color: #182f33; + --nldesign-component-button-hover-border-color: #95e6f0; + --nldesign-component-button-hover-color: #85e8f4; + --nldesign-component-button-primary-action-background-color: #79e0ec; + --nldesign-component-button-primary-action-border-color: #79e0ec; + --nldesign-component-button-primary-action-color: #3e3e3e; + --nldesign-component-button-primary-action-hover-background-color: #95e6f0; + --nldesign-component-button-primary-action-hover-color: #5e5e5e; + --nldesign-component-button-secondary-action-border-color: #79e0ec; + --nldesign-component-button-secondary-action-color: #85e8f4; + --nldesign-component-button-secondary-action-hover-background-color: #182f33; + --nldesign-component-content-card-shadow-color: #d2d3d40a; + --nldesign-component-content-surface-background-color: #171a20; + --nldesign-component-form-field-label-color: #e2e3e4; + --nldesign-component-form-fieldset-border-color: #24272d; + --nldesign-component-form-select-border-color: #24272d; + --nldesign-component-form-select-focus-border-color: #79e0ec; + --nldesign-component-heading-1-color: #e2e3e4; + --nldesign-component-heading-2-color: #e2e3e4; + --nldesign-component-heading-3-color: #e2e3e4; + --nldesign-component-heading-4-color: #e2e3e4; + --nldesign-component-heading-5-color: #e2e3e4; + --nldesign-component-heading-6-color: #e2e3e4; + --nldesign-component-heading-color: #e2e3e4; + --nldesign-component-link-color: #85e8f4; + --nldesign-component-link-hover-color: #a7eef7; + --nldesign-component-link-visited-color: #cea0eb; + --nldesign-component-navigation-active-background-color: #e9713f; + --nldesign-component-navigation-active-color: #ed8765; + --nldesign-component-navigation-badge-background-color: #e9713f; + --nldesign-component-navigation-badge-color: #111111; + --nldesign-component-ordered-list-color: #e2e3e4; + --nldesign-component-paragraph-color: #e2e3e4; + --nldesign-component-separator-border-color: #24272d; + --nldesign-component-status-badge-error-background-color: #310d0a; + --nldesign-component-status-badge-error-color: #ff5c5c; + --nldesign-component-status-badge-info-background-color: #182f33; + --nldesign-component-status-badge-info-color: #a7eef7; + --nldesign-component-status-badge-success-background-color: #192e1e; + --nldesign-component-status-badge-success-color: #94e1a0; + --nldesign-component-status-badge-warning-background-color: #412d03; + --nldesign-component-status-badge-warning-color: #ffd485; + --nldesign-component-table-border-color: #24272d; + --nldesign-component-table-header-background-color: #1d2026; + --nldesign-component-table-header-color: #e2e3e4; + --nldesign-component-table-row-hover-background-color: #1d1f23; + --nldesign-component-textbox-background-color: #141414; + --nldesign-component-textbox-border-color: #5d6474; + --nldesign-component-textbox-color: #e2e3e4; + --nldesign-component-textbox-disabled-background-color: #2a2a2a; + --nldesign-component-textbox-disabled-color: #9e9e9e; + --nldesign-component-textbox-focus-border-color: #79e0ec; + --nldesign-component-textbox-hover-border-color: #656c78; + --nldesign-component-textbox-invalid-border-color: #f54949; + --nldesign-component-unordered-list-color: #e2e3e4; + --nldesign-hero-action-background-color: #79e0ec; + --nldesign-hero-action-color: #9e9e9e; + --nldesign-hero-background-color: #182f33; + --nldesign-hero-body-color: #111111; + --nldesign-hero-title-color: #111111; + --nldesign-logo-url: url('../../../img/logos/warmtepompacademie-dark.svg'); + --warmtepompacademie-color-accent: #e9713f; + --warmtepompacademie-color-accent-light: #3f2109; + --warmtepompacademie-color-accent-mark: #e6612d; + --warmtepompacademie-color-accent-text: #ed8765; + --warmtepompacademie-color-ink: #d2d3d4; + --warmtepompacademie-color-line: #24272d; + --warmtepompacademie-color-main: #79e0ec; + --warmtepompacademie-color-main-deep: #95e6f0; + --warmtepompacademie-color-main-light: #182f33; + --warmtepompacademie-color-muted: #93969c; + --warmtepompacademie-color-surface: #171a20; +} diff --git a/css/tokens/dark/wilgenboom.css b/css/tokens/dark/wilgenboom.css new file mode 100644 index 000000000..8e8944f96 --- /dev/null +++ b/css/tokens/dark/wilgenboom.css @@ -0,0 +1,264 @@ +/* GENERATED by nldesign DarkPaletteService v9 from tokens/wilgenboom.css (sha256:b66140b0d636d1714c92ddf169d32b0b1683700bfb38729027f4a36de801fcf1) — do not edit */ +@media (prefers-color-scheme: dark) { + body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { + --nldesign-brand-stripe-color-1: #8cc8a7; + --nldesign-brand-stripe-color-2: #cc9414; + --nldesign-brand-stripe-color-3: #8cc8a7; + --nldesign-color-accent: #cc9414; + --nldesign-color-accent-light: #453507; + --nldesign-color-accent-text: #ffde94; + --nldesign-color-background: #171a20; + --nldesign-color-background-dark: #1d2026; + --nldesign-color-background-darker: #2d333c; + --nldesign-color-background-hover: #1d1f23; + --nldesign-color-border: #24272d; + --nldesign-color-border-dark: #656c78; + --nldesign-color-button-primary-background: #8cc8a7; + --nldesign-color-button-primary-border: #8cc8a7; + --nldesign-color-button-primary-hover: #a7d6bd; + --nldesign-color-button-primary-text: #3e3e3e; + --nldesign-color-error: #f54949; + --nldesign-color-error-hover: #f65656; + --nldesign-color-error-rgb: 245, 73, 73; + --nldesign-color-favorite: #f48c25; + --nldesign-color-focus: #8cc8a780; + --nldesign-color-focus-rgb: 140, 200, 167; + --nldesign-color-footer-background: #a7d6bd; + --nldesign-color-footer-text: #3e3e3e; + --nldesign-color-header-background: #141414; + --nldesign-color-header-text: #e2e3e4; + --nldesign-color-info: #8cc8a7; + --nldesign-color-info-rgb: 140, 200, 167; + --nldesign-color-link: #8cc8a7; + --nldesign-color-link-hover: #a7d6bd; + --nldesign-color-link-visited: #c392e3; + --nldesign-color-nav-background: #141414; + --nldesign-color-placeholder-dark: #3f3f3f; + --nldesign-color-placeholder-light: #2a2a2a; + --nldesign-color-primary: #60b988; + --nldesign-color-primary-hover: #1f4a33; + --nldesign-color-primary-light: #1c2c21; + --nldesign-color-primary-light-hover: #24362b; + --nldesign-color-primary-text: #111111; + --nldesign-color-success: #8ad896; + --nldesign-color-success-rgb: 138, 216, 150; + --nldesign-color-text: #e2e3e4; + --nldesign-color-text-light: #9e9e9e; + --nldesign-color-text-muted: #999ca3; + --nldesign-color-warning: #f8ca77; + --nldesign-color-warning-rgb: 248, 202, 119; + --nldesign-component-badge-background-color: #8cc8a7; + --nldesign-component-badge-color: #3e3e3e; + --nldesign-component-button-active-background-color: #24362b; + --nldesign-component-button-active-color: #94d0af; + --nldesign-component-button-border-color: #8cc8a7; + --nldesign-component-button-color: #94d0af; + --nldesign-component-button-disabled-background-color: #2a2a2a; + --nldesign-component-button-disabled-border-color: #535353; + --nldesign-component-button-disabled-color: #9e9e9e; + --nldesign-component-button-error-color: #000000; + --nldesign-component-button-focus-border-color: #8cc8a780; + --nldesign-component-button-hover-background-color: #1c2c21; + --nldesign-component-button-hover-border-color: #a7d6bd; + --nldesign-component-button-hover-color: #94d0af; + --nldesign-component-button-primary-action-background-color: #8cc8a7; + --nldesign-component-button-primary-action-border-color: #8cc8a7; + --nldesign-component-button-primary-action-color: #3e3e3e; + --nldesign-component-button-primary-action-hover-background-color: #a7d6bd; + --nldesign-component-button-primary-action-hover-color: #3e3e3e; + --nldesign-component-button-secondary-action-border-color: #8cc8a7; + --nldesign-component-button-secondary-action-color: #94d0af; + --nldesign-component-button-secondary-action-hover-background-color: #1c2c21; + --nldesign-component-content-card-shadow-color: #d2d3d40a; + --nldesign-component-content-surface-background-color: #171a20; + --nldesign-component-form-field-label-color: #e2e3e4; + --nldesign-component-form-fieldset-border-color: #24272d; + --nldesign-component-form-select-border-color: #24272d; + --nldesign-component-form-select-focus-border-color: #8cc8a7; + --nldesign-component-heading-1-color: #e2e3e4; + --nldesign-component-heading-2-color: #e2e3e4; + --nldesign-component-heading-3-color: #e2e3e4; + --nldesign-component-heading-4-color: #e2e3e4; + --nldesign-component-heading-5-color: #e2e3e4; + --nldesign-component-heading-6-color: #e2e3e4; + --nldesign-component-heading-color: #e2e3e4; + --nldesign-component-link-color: #94d0af; + --nldesign-component-link-hover-color: #b5e0c9; + --nldesign-component-link-visited-color: #cea0eb; + --nldesign-component-navigation-active-background-color: #cc9414; + --nldesign-component-navigation-active-color: #ffde94; + --nldesign-component-navigation-badge-background-color: #cc9414; + --nldesign-component-navigation-badge-color: #111111; + --nldesign-component-ordered-list-color: #e2e3e4; + --nldesign-component-paragraph-color: #e2e3e4; + --nldesign-component-separator-border-color: #24272d; + --nldesign-component-status-badge-error-background-color: #310d0a; + --nldesign-component-status-badge-error-color: #ff5c5c; + --nldesign-component-status-badge-info-background-color: #1c2c21; + --nldesign-component-status-badge-info-color: #b5e0c9; + --nldesign-component-status-badge-success-background-color: #192e1e; + --nldesign-component-status-badge-success-color: #94e1a0; + --nldesign-component-status-badge-warning-background-color: #412d03; + --nldesign-component-status-badge-warning-color: #ffd485; + --nldesign-component-table-border-color: #24272d; + --nldesign-component-table-header-background-color: #1d2026; + --nldesign-component-table-header-color: #e2e3e4; + --nldesign-component-table-row-hover-background-color: #1d1f23; + --nldesign-component-textbox-background-color: #141414; + --nldesign-component-textbox-border-color: #5d6474; + --nldesign-component-textbox-color: #e2e3e4; + --nldesign-component-textbox-disabled-background-color: #2a2a2a; + --nldesign-component-textbox-disabled-color: #9e9e9e; + --nldesign-component-textbox-focus-border-color: #8cc8a7; + --nldesign-component-textbox-hover-border-color: #656c78; + --nldesign-component-textbox-invalid-border-color: #f54949; + --nldesign-component-unordered-list-color: #e2e3e4; + --nldesign-hero-action-background-color: #8cc8a7; + --nldesign-hero-action-color: #9e9e9e; + --nldesign-hero-background-color: #1c2c21; + --nldesign-hero-body-color: #111111; + --nldesign-hero-title-color: #111111; + --nldesign-logo-url: url('../../../img/logos/wilgenboom-dark.svg'); + --wilgenboom-color-accent: #cc9414; + --wilgenboom-color-accent-light: #453507; + --wilgenboom-color-accent-text: #ffde94; + --wilgenboom-color-ink: #d2d3d4; + --wilgenboom-color-line: #24272d; + --wilgenboom-color-main: #8cc8a7; + --wilgenboom-color-main-deep: #a7d6bd; + --wilgenboom-color-main-light: #1c2c21; + --wilgenboom-color-muted: #93969c; + --wilgenboom-color-surface: #171a20; + } +} +body[data-theme-dark], +body[data-themes*=dark] { + --nldesign-brand-stripe-color-1: #8cc8a7; + --nldesign-brand-stripe-color-2: #cc9414; + --nldesign-brand-stripe-color-3: #8cc8a7; + --nldesign-color-accent: #cc9414; + --nldesign-color-accent-light: #453507; + --nldesign-color-accent-text: #ffde94; + --nldesign-color-background: #171a20; + --nldesign-color-background-dark: #1d2026; + --nldesign-color-background-darker: #2d333c; + --nldesign-color-background-hover: #1d1f23; + --nldesign-color-border: #24272d; + --nldesign-color-border-dark: #656c78; + --nldesign-color-button-primary-background: #8cc8a7; + --nldesign-color-button-primary-border: #8cc8a7; + --nldesign-color-button-primary-hover: #a7d6bd; + --nldesign-color-button-primary-text: #3e3e3e; + --nldesign-color-error: #f54949; + --nldesign-color-error-hover: #f65656; + --nldesign-color-error-rgb: 245, 73, 73; + --nldesign-color-favorite: #f48c25; + --nldesign-color-focus: #8cc8a780; + --nldesign-color-focus-rgb: 140, 200, 167; + --nldesign-color-footer-background: #a7d6bd; + --nldesign-color-footer-text: #3e3e3e; + --nldesign-color-header-background: #141414; + --nldesign-color-header-text: #e2e3e4; + --nldesign-color-info: #8cc8a7; + --nldesign-color-info-rgb: 140, 200, 167; + --nldesign-color-link: #8cc8a7; + --nldesign-color-link-hover: #a7d6bd; + --nldesign-color-link-visited: #c392e3; + --nldesign-color-nav-background: #141414; + --nldesign-color-placeholder-dark: #3f3f3f; + --nldesign-color-placeholder-light: #2a2a2a; + --nldesign-color-primary: #60b988; + --nldesign-color-primary-hover: #1f4a33; + --nldesign-color-primary-light: #1c2c21; + --nldesign-color-primary-light-hover: #24362b; + --nldesign-color-primary-text: #111111; + --nldesign-color-success: #8ad896; + --nldesign-color-success-rgb: 138, 216, 150; + --nldesign-color-text: #e2e3e4; + --nldesign-color-text-light: #9e9e9e; + --nldesign-color-text-muted: #999ca3; + --nldesign-color-warning: #f8ca77; + --nldesign-color-warning-rgb: 248, 202, 119; + --nldesign-component-badge-background-color: #8cc8a7; + --nldesign-component-badge-color: #3e3e3e; + --nldesign-component-button-active-background-color: #24362b; + --nldesign-component-button-active-color: #94d0af; + --nldesign-component-button-border-color: #8cc8a7; + --nldesign-component-button-color: #94d0af; + --nldesign-component-button-disabled-background-color: #2a2a2a; + --nldesign-component-button-disabled-border-color: #535353; + --nldesign-component-button-disabled-color: #9e9e9e; + --nldesign-component-button-error-color: #000000; + --nldesign-component-button-focus-border-color: #8cc8a780; + --nldesign-component-button-hover-background-color: #1c2c21; + --nldesign-component-button-hover-border-color: #a7d6bd; + --nldesign-component-button-hover-color: #94d0af; + --nldesign-component-button-primary-action-background-color: #8cc8a7; + --nldesign-component-button-primary-action-border-color: #8cc8a7; + --nldesign-component-button-primary-action-color: #3e3e3e; + --nldesign-component-button-primary-action-hover-background-color: #a7d6bd; + --nldesign-component-button-primary-action-hover-color: #3e3e3e; + --nldesign-component-button-secondary-action-border-color: #8cc8a7; + --nldesign-component-button-secondary-action-color: #94d0af; + --nldesign-component-button-secondary-action-hover-background-color: #1c2c21; + --nldesign-component-content-card-shadow-color: #d2d3d40a; + --nldesign-component-content-surface-background-color: #171a20; + --nldesign-component-form-field-label-color: #e2e3e4; + --nldesign-component-form-fieldset-border-color: #24272d; + --nldesign-component-form-select-border-color: #24272d; + --nldesign-component-form-select-focus-border-color: #8cc8a7; + --nldesign-component-heading-1-color: #e2e3e4; + --nldesign-component-heading-2-color: #e2e3e4; + --nldesign-component-heading-3-color: #e2e3e4; + --nldesign-component-heading-4-color: #e2e3e4; + --nldesign-component-heading-5-color: #e2e3e4; + --nldesign-component-heading-6-color: #e2e3e4; + --nldesign-component-heading-color: #e2e3e4; + --nldesign-component-link-color: #94d0af; + --nldesign-component-link-hover-color: #b5e0c9; + --nldesign-component-link-visited-color: #cea0eb; + --nldesign-component-navigation-active-background-color: #cc9414; + --nldesign-component-navigation-active-color: #ffde94; + --nldesign-component-navigation-badge-background-color: #cc9414; + --nldesign-component-navigation-badge-color: #111111; + --nldesign-component-ordered-list-color: #e2e3e4; + --nldesign-component-paragraph-color: #e2e3e4; + --nldesign-component-separator-border-color: #24272d; + --nldesign-component-status-badge-error-background-color: #310d0a; + --nldesign-component-status-badge-error-color: #ff5c5c; + --nldesign-component-status-badge-info-background-color: #1c2c21; + --nldesign-component-status-badge-info-color: #b5e0c9; + --nldesign-component-status-badge-success-background-color: #192e1e; + --nldesign-component-status-badge-success-color: #94e1a0; + --nldesign-component-status-badge-warning-background-color: #412d03; + --nldesign-component-status-badge-warning-color: #ffd485; + --nldesign-component-table-border-color: #24272d; + --nldesign-component-table-header-background-color: #1d2026; + --nldesign-component-table-header-color: #e2e3e4; + --nldesign-component-table-row-hover-background-color: #1d1f23; + --nldesign-component-textbox-background-color: #141414; + --nldesign-component-textbox-border-color: #5d6474; + --nldesign-component-textbox-color: #e2e3e4; + --nldesign-component-textbox-disabled-background-color: #2a2a2a; + --nldesign-component-textbox-disabled-color: #9e9e9e; + --nldesign-component-textbox-focus-border-color: #8cc8a7; + --nldesign-component-textbox-hover-border-color: #656c78; + --nldesign-component-textbox-invalid-border-color: #f54949; + --nldesign-component-unordered-list-color: #e2e3e4; + --nldesign-hero-action-background-color: #8cc8a7; + --nldesign-hero-action-color: #9e9e9e; + --nldesign-hero-background-color: #1c2c21; + --nldesign-hero-body-color: #111111; + --nldesign-hero-title-color: #111111; + --nldesign-logo-url: url('../../../img/logos/wilgenboom-dark.svg'); + --wilgenboom-color-accent: #cc9414; + --wilgenboom-color-accent-light: #453507; + --wilgenboom-color-accent-text: #ffde94; + --wilgenboom-color-ink: #d2d3d4; + --wilgenboom-color-line: #24272d; + --wilgenboom-color-main: #8cc8a7; + --wilgenboom-color-main-deep: #a7d6bd; + --wilgenboom-color-main-light: #1c2c21; + --wilgenboom-color-muted: #93969c; + --wilgenboom-color-surface: #171a20; +} diff --git a/css/tokens/dark/zuiddrecht.css b/css/tokens/dark/zuiddrecht.css index eb645997f..9f6621e88 100644 --- a/css/tokens/dark/zuiddrecht.css +++ b/css/tokens/dark/zuiddrecht.css @@ -1,9 +1,12 @@ -/* GENERATED by nldesign DarkPaletteService v9 from tokens/zuiddrecht.css (sha256:1156eaede9aa12500e92190fc80a24c7b039687a1443fa2040d5c657d46fbe37) — do not edit */ +/* GENERATED by nldesign DarkPaletteService v9 from tokens/zuiddrecht.css (sha256:a41d81eeb158b6cf63f06a21f1a1308921984d2bff7812362434411f8762c738) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { --nldesign-brand-stripe-color-1: #f43535; --nldesign-brand-stripe-color-2: #5b8ac2; --nldesign-brand-stripe-color-3: #f43535; + --nldesign-color-accent: #f43535; + --nldesign-color-accent-light: #310d0a; + --nldesign-color-accent-text: #ff5c5c; --nldesign-color-background: #171a20; --nldesign-color-background-dark: #1d2026; --nldesign-color-background-darker: #2d333c; @@ -20,6 +23,8 @@ --nldesign-color-favorite: #f48c25; --nldesign-color-focus: #5b8ac280; --nldesign-color-focus-rgb: 91, 138, 194; + --nldesign-color-footer-background: #7fa6d4; + --nldesign-color-footer-text: #2e2e2e; --nldesign-color-header-background: #141414; --nldesign-color-header-text: #e2e3e4; --nldesign-color-info: #5b8ac2; @@ -37,6 +42,7 @@ --nldesign-color-primary-text: #111111; --nldesign-color-success: #8ad896; --nldesign-color-success-rgb: 138, 216, 150; + --nldesign-color-surface: #141a23; --nldesign-color-text: #e2e3e4; --nldesign-color-text-light: #9e9e9e; --nldesign-color-text-muted: #999ca3; @@ -108,7 +114,25 @@ --nldesign-component-textbox-hover-border-color: #656c78; --nldesign-component-textbox-invalid-border-color: #f43535; --nldesign-component-unordered-list-color: #e2e3e4; + --nldesign-hero-background-color: #13202e; + --nldesign-hero-body-color: #111111; + --nldesign-hero-title-color: #111111; --nldesign-logo-url: url('../../../img/logos/zuiddrecht-dark.svg'); + --nldesign-website-attention-background-color: #412d03; + --nldesign-website-attention-border-color: #8a691f; + --nldesign-website-attention-color: #e5e5e5; + --nldesign-website-color-text-muted: #b5b5b5; + --nldesign-website-nav-current-color: #6d9acf; + --nldesign-website-notice-background-color: #13202e; + --nldesign-website-notice-border-color: #273b55; + --nldesign-website-notice-color: #e5e5e5; + --nldesign-website-placeholder-background-color: #1b2a3b; + --nldesign-website-step-current-background-color: #141414; + --nldesign-website-step-current-color: #ff3d3d; + --nldesign-website-step-done-color: #6d9acf; + --nldesign-website-step-done-mark-color: #9e9e9e; + --nldesign-website-tab-current-color: #ff3d3d; + --nldesign-website-tab-line-color: #8f9cad; --zuiddrecht-color-blue: #5b8ac2; --zuiddrecht-color-blue-dark: #7fa6d4; --zuiddrecht-color-blue-light: #13202e; @@ -126,6 +150,9 @@ body[data-themes*=dark] { --nldesign-brand-stripe-color-1: #f43535; --nldesign-brand-stripe-color-2: #5b8ac2; --nldesign-brand-stripe-color-3: #f43535; + --nldesign-color-accent: #f43535; + --nldesign-color-accent-light: #310d0a; + --nldesign-color-accent-text: #ff5c5c; --nldesign-color-background: #171a20; --nldesign-color-background-dark: #1d2026; --nldesign-color-background-darker: #2d333c; @@ -142,6 +169,8 @@ body[data-themes*=dark] { --nldesign-color-favorite: #f48c25; --nldesign-color-focus: #5b8ac280; --nldesign-color-focus-rgb: 91, 138, 194; + --nldesign-color-footer-background: #7fa6d4; + --nldesign-color-footer-text: #2e2e2e; --nldesign-color-header-background: #141414; --nldesign-color-header-text: #e2e3e4; --nldesign-color-info: #5b8ac2; @@ -159,6 +188,7 @@ body[data-themes*=dark] { --nldesign-color-primary-text: #111111; --nldesign-color-success: #8ad896; --nldesign-color-success-rgb: 138, 216, 150; + --nldesign-color-surface: #141a23; --nldesign-color-text: #e2e3e4; --nldesign-color-text-light: #9e9e9e; --nldesign-color-text-muted: #999ca3; @@ -230,7 +260,25 @@ body[data-themes*=dark] { --nldesign-component-textbox-hover-border-color: #656c78; --nldesign-component-textbox-invalid-border-color: #f43535; --nldesign-component-unordered-list-color: #e2e3e4; + --nldesign-hero-background-color: #13202e; + --nldesign-hero-body-color: #111111; + --nldesign-hero-title-color: #111111; --nldesign-logo-url: url('../../../img/logos/zuiddrecht-dark.svg'); + --nldesign-website-attention-background-color: #412d03; + --nldesign-website-attention-border-color: #8a691f; + --nldesign-website-attention-color: #e5e5e5; + --nldesign-website-color-text-muted: #b5b5b5; + --nldesign-website-nav-current-color: #6d9acf; + --nldesign-website-notice-background-color: #13202e; + --nldesign-website-notice-border-color: #273b55; + --nldesign-website-notice-color: #e5e5e5; + --nldesign-website-placeholder-background-color: #1b2a3b; + --nldesign-website-step-current-background-color: #141414; + --nldesign-website-step-current-color: #ff3d3d; + --nldesign-website-step-done-color: #6d9acf; + --nldesign-website-step-done-mark-color: #9e9e9e; + --nldesign-website-tab-current-color: #ff3d3d; + --nldesign-website-tab-line-color: #8f9cad; --zuiddrecht-color-blue: #5b8ac2; --zuiddrecht-color-blue-dark: #7fa6d4; --zuiddrecht-color-blue-light: #13202e; diff --git a/css/tokens/denhaag.css b/css/tokens/denhaag.css index 2acf17dd4..3bb5a1809 100644 --- a/css/tokens/denhaag.css +++ b/css/tokens/denhaag.css @@ -1,84 +1,2927 @@ /** * Gemeente Den Haag Design Tokens * - * Based on the Den Haag Design System. - * Source: https://github.com/nl-design-system/denhaag + * GENERATED by scripts/generate-brand-set.mjs from the pinned @gemeente-denhaag token CSS vendored under scripts/sources/denhaag/, EUPL-1.2, Gemeente Den Haag + * plus the shared role layer (css/tokens/vng.css). Do not edit by hand — + * re-run the generator against scripts/brands/denhaag.json instead. + * + * Section A is the brand palette, verbatim upstream. + * Section B is the brand's OWN component mapping, verbatim upstream. + * Section C is the shared role layer filling only what B leaves undefined, + * with the colour ramp re-pointed at this brand. + * Section D is the --nldesign-* layer Nextcloud chrome and the Portaliq + * site renderer read. + * + * ONE FLAT :root BLOCK, deliberately — a shared applier rewrites this + * selector to scope the set to one portal, and a second block or a compound + * selector silently escapes that rewrite. */ :root { - /* Den Haag primary colors - Green is the signature color */ - --nldesign-color-primary: #1a7a3e; - --nldesign-color-primary-text: #ffffff; - --nldesign-color-primary-hover: #156633; - --nldesign-color-primary-light: #e6f4eb; - --nldesign-color-primary-light-hover: #cce9d7; - - /* Logo image */ - --nldesign-logo-url: url('../../img/logos/denhaag.svg'); + /* --- A. Gemeente Den Haag palette (the pinned @gemeente-denhaag token CSS vendored under scripts/sources/denhaag/, EUPL-1.2, Gemeente Den Haag) --- */ + --denhaag-border-radius: 3px; + --denhaag-focus-border-width: 2px; + --denhaag-focus-border-style: dashed; + --denhaag-focus-offset: 0; + --denhaag-space-block-3xs: .125rem; + --denhaag-space-block-2xs: .25rem; + --denhaag-space-block-xs: .5rem; + --denhaag-space-block-sm: .75rem; + --denhaag-space-block-md: 1rem; + --denhaag-space-block-lg: 1.25rem; + --denhaag-space-block-xl: 1.5rem; + --denhaag-space-block-2xl: 2rem; + --denhaag-space-block-3xl: 2.5rem; + --denhaag-space-block-4xl: 3rem; + --denhaag-space-block-5xl: 4rem; + --denhaag-space-inline-3xs: .125rem; + --denhaag-space-inline-2xs: .25rem; + --denhaag-space-inline-xs: .5rem; + --denhaag-space-inline-sm: .75rem; + --denhaag-space-inline-md: 1rem; + --denhaag-space-inline-lg: 1.25rem; + --denhaag-space-inline-xl: 1.5rem; + --denhaag-space-inline-2xl: 2rem; + --denhaag-space-inline-3xl: 2.5rem; + --denhaag-space-inline-4xl: 3rem; + --denhaag-space-inline-5xl: 4rem; + --denhaag-color-green-1: #d5e7d5; + --denhaag-color-green-2: #7eb67c; + --denhaag-color-green-3: #238541; + --denhaag-color-green-4: #1e6c35; + --denhaag-color-green-5: #002e0f; + --denhaag-color-blue-1: #dbecfa; + --denhaag-color-blue-2: #abcced; + --denhaag-color-blue-3: #1260a1; + --denhaag-color-blue-4: #094b81; + --denhaag-color-blue-5: #032d4f; + --denhaag-color-ocher-1: #fff7d1; + --denhaag-color-ocher-2: #ffeb85; + --denhaag-color-ocher-3: #f8d62a; + --denhaag-color-ocher-4: #cca000; + --denhaag-color-ocher-5: #806400; + --denhaag-color-red-1: #ffd9d6; + --denhaag-color-red-2: #ed8b82; + --denhaag-color-red-3: #cf1b07; + --denhaag-color-red-4: #a30500; + --denhaag-color-red-5: #520100; + --denhaag-color-orange-1: #ffdcad; + --denhaag-color-orange-2: #ffb85c; + --denhaag-color-orange-3: #f08800; + --denhaag-color-orange-4: #df5601; + --denhaag-color-orange-5: #8a3500; + --denhaag-color-grey-1: #f2f2f2; + --denhaag-color-grey-2: #d1d1d1; + --denhaag-color-grey-3: #7a7a7a; + --denhaag-color-grey-4: #4a4a4a; + --denhaag-color-grey-5: #2e2e2e; + --denhaag-color-warmgrey-1: #f9f8f6; + --denhaag-color-black: #000000; + --denhaag-color-white: #ffffff; + --denhaag-size-5xs: 2px; + --denhaag-size-4xs: 4px; + --denhaag-size-3xs: 8px; + --denhaag-size-2xs: 16px; + --denhaag-size-xs: 24px; + --denhaag-size-sm: 32px; + --denhaag-size-md: 48px; + --denhaag-size-lg: 64px; + --denhaag-size-xl: 96px; + --denhaag-size-2xl: 160px; + --denhaag-size-icon-xs: 16px; + --denhaag-size-icon-sm: 20px; + --denhaag-size-icon-md: 24px; + --denhaag-size-icon-lg: 24px; + --denhaag-size-icon-xl: 24px; + --denhaag-size-icon-2xl: 32px; + --denhaag-size-icon-3xl: 40px; + --denhaag-size-icon-4xl: 48px; + --denhaag-typography-weight-regular: 400; + --denhaag-typography-weight-medium: 500; + --denhaag-typography-weight-semibold: 600; + --denhaag-typography-weight-bold: 700; + --denhaag-typography-sans-serif-font-family: "TheSans", "Fira Sans", sans-serif; + --denhaag-typography-sans-serif-alternate-font-family: "TheMix", "Fira Sans", sans-serif; + --denhaag-typography-scale-xs-font-size: 0.625rem; + --denhaag-typography-scale-s-font-size: 0.875rem; + --denhaag-typography-scale-s-line-height: 1.3; + --denhaag-typography-scale-base-font-size: 1.125rem; + --denhaag-typography-scale-base-line-height: 1.5; + --denhaag-typography-scale-lg-font-size: 1.25rem; + --denhaag-typography-scale-lg-line-height: 1.3; + --denhaag-typography-scale-xl-font-size: 1.5rem; + --denhaag-typography-scale-xl-line-height: 1.3; + --denhaag-typography-scale-2xl-font-size: 2rem; + --denhaag-typography-scale-2xl-line-height: 1.3; + --denhaag-typography-scale-3xl-font-size: 3rem; + --denhaag-typography-scale-3xl-line-height: 1.3; + --denhaag-typography-mobile-scale-xl-font-size: 1.4375rem; + --denhaag-typography-mobile-scale-2xl-font-size: 1.75rem; + --denhaag-typography-mobile-scale-3xl-font-size: 2.25rem; + --denhaag-focus-border-color: var(--denhaag-color-ocher-5); + --denhaag-focus-border: var(--denhaag-focus-border-width) var(--denhaag-focus-border-style) var(--denhaag-focus-border-color); - /* Den Haag color palette */ - --denhaag-color-green: #1a7a3e; - --denhaag-color-green-dark: #156633; - --denhaag-color-yellow: #f5c917; - --denhaag-color-orange: #ec6d23; - --denhaag-color-red: #d52d2d; - --denhaag-color-blue: #1261a3; + /* --- B. Gemeente Den Haag's own NL Design System component mapping --- */ + --utrecht-action-activate-cursor: pointer; + --utrecht-action-busy-cursor: wait; + --utrecht-action-disabled-cursor: not-allowed; + --utrecht-action-navigate-cursor: pointer; + --utrecht-action-submit-cursor: pointer; + --utrecht-form-control-border-width: 1px; + --utrecht-form-control-padding-block-end: 12px; + --utrecht-form-control-padding-block-start: 12px; + --utrecht-form-control-padding-inline-end: 12px; + --utrecht-form-control-padding-inline-start: 12px; + --utrecht-form-control-active-border-width: 2px; + --utrecht-form-control-checked-border-width: 2px; + --utrecht-form-control-focus-border-width: 2px; + --utrecht-form-control-hover-border-width: 2px; + --utrecht-form-control-invalid-border-width: 2px; + --utrecht-space-block-3xs: 2px; + --utrecht-space-block-2xs: 4px; + --utrecht-space-block-xs: 8px; + --utrecht-space-block-sm: 12px; + --utrecht-space-block-md: 16px; + --utrecht-space-block-lg: 24px; + --utrecht-space-block-xl: 28px; + --utrecht-space-block-2xl: 32px; + --utrecht-space-block-3xl: 48px; + --utrecht-space-block-4xl: 64px; + --utrecht-space-block-5xl: 80px; + --utrecht-space-inline-3xs: 2px; + --utrecht-space-inline-2xs: 4px; + --utrecht-space-inline-xs: 8px; + --utrecht-space-inline-sm: 12px; + --utrecht-space-inline-md: 16px; + --utrecht-space-inline-lg: 24px; + --utrecht-space-inline-xl: 28px; + --utrecht-space-inline-2xl: 32px; + --utrecht-space-inline-3xl: 48px; + --utrecht-space-text-3xs: 2px; + --utrecht-space-text-2xs: 4px; + --utrecht-space-text-xs: 8px; + --utrecht-space-text-sm: 12px; + --utrecht-space-text-md: 16px; + --utrecht-space-text-lg: 24px; + --utrecht-space-text-xl: 28px; + --utrecht-space-text-2xl: 32px; + --utrecht-space-text-3xl: 48px; + --utrecht-space-row-4xs: 1px; + --utrecht-space-row-3xs: 2px; + --utrecht-space-row-2xs: 4px; + --utrecht-space-row-xs: 8px; + --utrecht-space-row-sm: 12px; + --utrecht-space-row-md: 16px; + --utrecht-space-row-lg: 24px; + --utrecht-space-row-xl: 28px; + --utrecht-space-row-2xl: 32px; + --utrecht-space-row-3xl: 48px; + --utrecht-space-row-4xl: 64px; + --utrecht-space-row-5xl: 80px; + --utrecht-space-column-4xs: 1px; + --utrecht-space-column-3xs: 2px; + --utrecht-space-column-2xs: 4px; + --utrecht-space-column-xs: 8px; + --utrecht-space-column-sm: 12px; + --utrecht-space-column-md: 16px; + --utrecht-space-column-lg: 24px; + --utrecht-space-column-xl: 28px; + --utrecht-space-column-2xl: 32px; + --utrecht-space-column-3xl: 48px; + --utrecht-space-column-4xl: 64px; + --utrecht-space-column-5xl: 80px; + --of-color-primary: var(--denhaag-color-green-3); + --of-color-secondary: var(--denhaag-color-grey-2); + --of-color-info: var(--denhaag-color-blue-4); + --of-color-success: var(--denhaag-color-green-4); + --of-color-warning: var(--denhaag-color-orange-4); + --of-color-danger: var(--denhaag-color-red-4); + --of-color-bg: var(--denhaag-color-white); + --of-color-fg: var(--denhaag-color-black); + --of-color-fg-muted: var(--denhaag-color-grey-4); + --of-color-border: var(--denhaag-color-grey-3); + --utrecht-document-background-color: var(--denhaag-color-white); + --utrecht-document-color: var(--denhaag-color-grey-5); + --utrecht-document-font-family: var(--denhaag-typography-sans-serif-font-family); + --utrecht-document-font-size: var(--denhaag-typography-scale-base-font-size); + --utrecht-document-font-weight: var(--denhaag-typography-weight-regular); + --utrecht-document-line-height: var(--denhaag-typography-scale-base-line-height); + --utrecht-feedback-danger-fill-background-color: var(--denhaag-color-red-1); + --utrecht-feedback-danger-fill-color: var(--denhaag-color-red-4); + --utrecht-feedback-danger-background-color: var(--denhaag-color-red-1); + --utrecht-feedback-danger-color: var(--denhaag-color-red-4); + --utrecht-feedback-warning-fill-background-color: var(--denhaag-color-orange-1); + --utrecht-feedback-warning-fill-color: var(--denhaag-color-orange-5); + --utrecht-feedback-warning-background-color: var(--denhaag-color-orange-1); + --utrecht-feedback-warning-color: var(--denhaag-color-orange-5); + --utrecht-feedback-safe-fill-background-color: var(--denhaag-color-green-1); + --utrecht-feedback-safe-fill-color: var(--denhaag-color-green-4); + --utrecht-feedback-safe-background-color: var(--denhaag-color-green-1); + --utrecht-feedback-safe-color: var(--denhaag-color-green-4); + --utrecht-feedback-neutral-fill-background-color: var(--denhaag-color-blue-1); + --utrecht-feedback-neutral-fill-color: var(--denhaag-color-blue-4); + --utrecht-feedback-neutral-background-color: var(--denhaag-color-blue-1); + --utrecht-feedback-neutral-color: var(--denhaag-color-blue-4); + --utrecht-focus-border-style: var(--denhaag-focus-border-style); + --utrecht-focus-outline-offset: var(--denhaag-focus-offset); + --utrecht-focus-outline-style: var(--denhaag-focus-border-style); + --utrecht-focus-outline-width: var(--denhaag-focus-border-width); + --utrecht-form-control-background-color: var(--denhaag-color-white); + --utrecht-form-control-border-color: var(--denhaag-color-grey-3); + --utrecht-form-control-border-radius: var(--denhaag-border-radius); + --utrecht-form-control-color: var(--denhaag-color-grey-4); + --utrecht-form-control-font-size: var(--denhaag-typography-scale-base-font-size); + --utrecht-form-control-placeholder-color: var(--denhaag-color-grey-4); + --utrecht-form-control-active-border-color: var(--denhaag-color-grey-3); + --utrecht-form-control-active-background-color: var(--denhaag-color-white); + --utrecht-form-control-active-color: var(--denhaag-color-grey-5); + --utrecht-form-control-checked-border-color: var(--denhaag-color-green-3); + --utrecht-form-control-checked-background-color: var(--denhaag-color-green-3); + --utrecht-form-control-checked-color: var(--denhaag-color-white); + --utrecht-form-control-disabled-border-color: var(--denhaag-color-grey-3); + --utrecht-form-control-disabled-background-color: var(--denhaag-color-grey-1); + --utrecht-form-control-disabled-color: var(--denhaag-color-grey-4); + --utrecht-form-control-focus-border-color: var(--denhaag-color-black); + --utrecht-form-control-focus-background-color: var(--denhaag-color-white); + --utrecht-form-control-focus-color: var(--denhaag-color-black); + --utrecht-form-control-hover-background-color: var(--denhaag-color-warmgrey-1); + --utrecht-form-control-hover-border-color: var(--denhaag-color-grey-3); + --utrecht-form-control-hover-color: var(--denhaag-color-grey-5); + --utrecht-form-control-invalid-border-color: var(--denhaag-color-red-3); + --utrecht-form-control-invalid-background-color: var(--denhaag-color-white); + --utrecht-form-control-invalid-color: var(--denhaag-color-red-3); + --utrecht-focus-border-color: var(--denhaag-focus-border-color); + --utrecht-focus-outline-color: var(--denhaag-focus-border-color); + --utrecht-form-control-font-family: var(--utrecht-document-font-family); + --denhaag-accordion-section-content-padding-block-end: 24px; + --denhaag-accordion-section-content-padding-block-start: 24px; + --denhaag-accordion-section-content-padding-inline-end: 16px; + --denhaag-accordion-section-content-padding-inline-start: 16px; + --denhaag-accordion-section-content-transition: grid-template-rows 400ms ease-in-out; + --denhaag-accordion-section-header-column-gap: 8px; + --denhaag-accordion-section-header-cursor: pointer; + --denhaag-accordion-section-header-font-size: 18px; + --denhaag-accordion-section-header-line-height: 24px; + --denhaag-accordion-section-header-padding-block-end: 12px; + --denhaag-accordion-section-header-padding-block-start: 12px; + --denhaag-accordion-section-header-padding-inline-end: 16px; + --denhaag-accordion-section-header-padding-inline-start: 16px; + --denhaag-accordion-section-header-icon-transform: rotate(0deg); + --denhaag-accordion-section-header-icon-transition: transform 400ms ease-in-out; + --denhaag-accordion-section-header-icon-expanded-transform: rotate(180deg); + --denhaag-accordion-section-description-font-size: inherit; + --denhaag-accordion-section-title-font-size: inherit; + --denhaag-action-border-style: solid; + --denhaag-action-border-width: 1px; + --denhaag-action-link-icon-width: 20px; + --denhaag-action-warning-icon-width: 20px; + --denhaag-alert-border-radius: 1px; + --denhaag-alert-close-focus-border-color: 1px; + --denhaag-alert-close-focus-border-width: 1px; + --denhaag-alert-close-focus-border-style: 1px; + --denhaag-alert-close-focus-border-offset: 3px; + --denhaag-anchor-collapse-border-style: solid; + --denhaag-anchor-collapse-border-width: 1px; + --denhaag-anchor-collapse-rotate: -180deg; + --denhaag-anchor-collapse-summary-text-align: left; + --denhaag-anchor-navigation-list-list-style: none; + --denhaag-anchor-navigation-link-line-height: 1.5; + --denhaag-anchor-navigation-link-padding-inline-end: 0; + --denhaag-anchor-navigation-link-padding-inline-start: 1.125rem; + --denhaag-anchor-navigation-link-text-decoration: none; + --denhaag-anchor-navigation-link-width: 2px; + --denhaag-article-meta-border-width: 1px; + --denhaag-article-meta-border-style: solid; + --denhaag-article-meta-gap: 0.75rem; + --denhaag-article-meta-horizontal-item-border-width: 1px; + --denhaag-article-meta-horizontal-item-border-style: solid; + --denhaag-blockquote-attribution-font-weight: 400; + --denhaag-blockquote-attribution-line-height: 1.5; + --denhaag-blockquote-attribution-margin-block-start: 1rem; + --denhaag-blockquote-border-width: 4px; + --denhaag-blockquote-border-style: solid; + --denhaag-blockquote-margin-block-start: 0; + --denhaag-blockquote-margin-block-end: 0; + --denhaag-blockquote-margin-inline-start: 0; + --denhaag-blockquote-margin-inline-end: 0; + --denhaag-blockquote-padding-block-start: 1rem; + --denhaag-blockquote-padding-block-end: 1rem; + --denhaag-blockquote-padding-inline-start: 1rem; + --denhaag-blockquote-padding-inline-end: 1rem; + --denhaag-blockquote-paragraph-font-weight: 700; + --denhaag-blockquote-paragraph-line-height: 1.3; + --denhaag-breadcrumb-padding-block: 1rem; + --denhaag-breadcrumb-padding-block-md: 0.25rem; + --denhaag-breadcrumb-link-text-decoration: none; + --denhaag-breadcrumb-link-icon-height: .875rem; + --denhaag-breadcrumb-link-icon-width: .875rem; + --denhaag-breadcrumb-link-icon-margin-inline: .75rem; + --denhaag-breadcrumb-link-focus-text-decoration: underline; + --denhaag-breadcrumb-link-hover-text-decoration: underline; + --denhaag-breadcrumb-list-max-width: 67.5rem; + --denhaag-button-cursor: pointer; + --denhaag-button-border-width: 1px; + --denhaag-button-large-size-padding-block: 0.40625rem; + --denhaag-button-large-size-line-height: 1.75; + --denhaag-button-icon-only-height: 2.6875rem; + --denhaag-card-authentication-padding-block: 24px; + --denhaag-card-authentication-padding-inline: 24px; + --denhaag-card-authentication-border-width: 1px; + --denhaag-card-authentication-portrait-max-inline-size: 362px; + --denhaag-card-authentication-portrait-min-block-size: 415px; + --denhaag-card-authentication-portrait-min-inline-size: 283px; + --denhaag-card-authentication-portrait-footer-margin-block-start: 16px; + --denhaag-card-authentication-portrait-header-margin-block-end: 8px; + --denhaag-card-authentication-portrait-logo-size: 80px; + --denhaag-card-authentication-portrait-logo-margin-block-end: 24px; + --denhaag-card-authentication-footer-margin-block-start: 8px; + --denhaag-card-authentication-header-margin-block-end: 0px; + --denhaag-card-authentication-logo-size: 56px; + --denhaag-card-authentication-title-margin-block-end: 6px; + --denhaag-card-group-gap: 32px; + --denhaag-card-group-s-gap: 16px; + --denhaag-card-group-m-gap: 24px; + --denhaag-card-group-l-gap: 32px; + --denhaag-card-group-xl-gap: 40px; + --denhaag-card-news-text-decoration: none; + --denhaag-card-news-margin: 0; + --denhaag-card-news-image-width: 100%; + --denhaag-card-news-image-height: auto; + --denhaag-card-news-image-object-fit: cover; + --denhaag-card-news-image-aspect-ratio: 16 / 9; + --denhaag-card-news-content-padding: 0.75rem; + --denhaag-card-news-icon-text-align: right; + --denhaag-case-card-height: 240px; + --denhaag-case-card-border-radius: 3px; + --denhaag-case-card-padding-block-start: 20px; + --denhaag-case-card-wrapper-padding-block-start: 12px; + --denhaag-case-card-wrapper-padding-block-end: 24px; + --denhaag-case-card-wrapper-padding-inline-start: 24px; + --denhaag-case-card-wrapper-padding-inline-end: 24px; + --denhaag-case-card-title-line-height: 1.5; + --denhaag-case-card-subtitle-line-height: 1.5; + --denhaag-case-card-list-border-style: solid; + --denhaag-case-card-list-border-width: 1px; + --denhaag-case-card-list-wrapper-flex-direction: row; + --denhaag-checkbox-hover-border-width: 1px; + --denhaag-contact-timeline-step-header-line-height: 27px; + --denhaag-contact-timeline-step-header-font-size: 20px; + --denhaag-contact-timeline-step-header-date-width: 96px; + --denhaag-contact-timeline-step-header-channel-width: 80px; + --denhaag-contact-timeline-step-header-toggle-gap: 4px; + --denhaag-contact-timeline-step-marker-align-items: flex-start; + --denhaag-contact-timeline-step-marker-connector-bottom: 0; + --denhaag-contact-timeline-step-marker-connector-desktop-margin-inline-start: 112px; + --denhaag-contact-timeline-step-marker-connector-mobile-margin-inline-start: 0; + --denhaag-contact-timeline-step-details-desktop-margin-inline-start: 240px; + --denhaag-contact-timeline-step-details-mobile-margin-inline-start: 32px; + --denhaag-contact-timeline-step-details-sender-font-size: 18px; + --denhaag-contact-timeline-step-details-sender-margin-block-start: 16px; + --denhaag-contact-timeline-step-details-file-margin-block-start: 24px; + --denhaag-contact-timeline-step-details-file-margin-block-end: 24px; + --denhaag-contact-timeline-step-details-file-mobile-margin-block-end: 32px; + --denhaag-contact-timeline-step-meta-gap: 6px; + --denhaag-contact-timeline-step-meta-marker-size: 4px; + --denhaag-contact-timeline-step-distance: 0; + --denhaag-contact-timeline-step-padding-block-end: 32px; + --denhaag-cta-download-line-height: 1.3; + --denhaag-cta-event-line-height: 1.3; + --denhaag-cta-event-date-line-height: 1.25; + --denhaag-cta-image-content-position: relative; + --denhaag-cta-image-content-display: block; + --denhaag-cta-image-content-hover-box-shadow: 0 0.25rem 1rem 0 rgba(0, 0, 0, 0.16); + --denhaag-cta-image-content-filled-border: 0; + --denhaag-cta-image-content-image-width: 100%; + --denhaag-cta-image-content-image-object-fit: cover; + --denhaag-cta-image-content-title-margin-block-start: initial; + --denhaag-cta-image-content-text-line-height: 1.3; + --denhaag-cta-image-content-button-position: initial; + --denhaag-cta-image-content-button-after-position: absolute; + --denhaag-cta-image-content-button-after-content: ''; + --denhaag-cta-image-content-button-after-top: 0; + --denhaag-cta-image-content-button-after-right: 0; + --denhaag-cta-image-content-button-after-bottom: 0; + --denhaag-cta-image-content-button-after-left: 0; + --denhaag-cta-link-excerpt-line-height: 1.3; + --denhaag-cta-link-text-decoration: none; + --denhaag-description-list-margin-block-start: 0; + --denhaag-description-list-margin-block-end: 0; + --denhaag-description-list-font-size: 1.125rem; + --denhaag-description-list-line-height: 1.5; + --denhaag-description-list-caption-line-height: 1.3; + --denhaag-description-list-detail-padding-block-end: 0.75rem; + --denhaag-description-list-title-padding-block-start: 0.75rem; + --denhaag-divider-border-width: 1px; + --denhaag-divider-margin-block-start: 16px; + --denhaag-divider-margin-block-end: 16px; + --denhaag-divider-margin-inline-start: 16px; + --denhaag-divider-margin-inline-end: 16px; + --denhaag-dot-indicator-size: 12px; + --denhaag-dot-indicator-border-size: 2px; + --denhaag-dynamic-content-card-title-hyphens: auto; + --denhaag-dynamic-content-icon-opacity: 0; + --denhaag-dynamic-content-grid-columns: 1; + --denhaag-dynamic-content-s-grid-columns: 2; + --denhaag-dynamic-content-m-grid-columns: 3; + --denhaag-dynamic-content-hover-icon-opacity: 1; + --denhaag-dynamic-content-focus-icon-opacity: 1; + --denhaag-event-date-icon-margin-inline-end: 0.5rem; + --denhaag-event-date-text-line-height: 1.75; + --denhaag-file-border-width: 1px; + --denhaag-file-border-style: solid; + --denhaag-file-link-icon-width: 20px; + --denhaag-floating-contact-gap: 0.75rem; + --denhaag-floating-contact-position: fixed; + --denhaag-floating-contact-index: 9; + --denhaag-floating-contact-item-align-items: center; + --denhaag-floating-contact-item-icon-size: 1.75rem; + --denhaag-floating-contact-link-decoration: underline; + --denhaag-floating-contact-link-outline-color: currentColor; + --denhaag-floating-contact-switch-align-self: flex-end; + --denhaag-floating-contact-switch-align-items: center; + --denhaag-floating-contact-switch-border-style: solid; + --denhaag-floating-contact-switch-border-width: 0.0625rem; + --denhaag-floating-contact-switch-border-radius: 1.5rem; + --denhaag-floating-contact-switch-direction: row-reverse; + --denhaag-floating-contact-switch-gap: 0; + --denhaag-floating-contact-switch-line-height: 1; + --denhaag-floating-contact-switch-icon-size: 1rem; + --denhaag-floating-contact-switch-icons-display: none; + --denhaag-floating-contact-switch-icons-gap: 0.75rem; + --denhaag-floating-contact-overlay-align-items: flex-start; + --denhaag-floating-contact-overlay-border-radius: 0.25rem; + --denhaag-floating-contact-overlay-display: none; + --denhaag-floating-contact-overlay-width: 17.25rem; + --denhaag-floating-contact-active-switch-direction: row; + --denhaag-floating-contact-active-switch-icons-display: flex; + --denhaag-floating-contact-active-overlay-display: flex; + --denhaag-floating-contact-status-border-width: 0.0625rem; + --denhaag-floating-contact-status-size: 0.5rem; + --denhaag-footer-font-size: 16px; + --denhaag-footer-paragraph-margin-block-start: 12px; + --denhaag-footer-paragraph-margin-block-end: 12px; + --denhaag-footer-group-gap: 32px; + --denhaag-footer-group-padding-block-start: 40px; + --denhaag-footer-group-padding-block-end: 40px; + --denhaag-footer-legal-links-column-gap: 32px; + --denhaag-form-control-label-margin-block-end: 8px; + --denhaag-form-control-label-input-margin-inline-end: 8px; + --denhaag-form-group-helper-text-margin-block-start: 4px; + --denhaag-form-group-margin-inline-start: 8px; + --denhaag-form-group-margin-inline-end: 8px; + --denhaag-form-group-margin-block-start: 8px; + --denhaag-form-group-margin-block-end: 8px; + --denhaag-form-input-margin-block-start: 0; + --denhaag-form-input-margin-block-end: 0; + --denhaag-form-progress-header-margin-block-end: 20px; + --denhaag-form-progress-progress-height: 2px; + --denhaag-header-border-bottom-width: 1px; + --denhaag-header-border-bottom-style: solid; + --denhaag-header-height: 4.5rem; + --denhaag-header-sm-height: 6rem; + --denhaag-header-md-height: 7.5rem; + --denhaag-header-content-align-items: center; + --denhaag-header-content-display: flex; + --denhaag-header-content-flex-direction: row; + --denhaag-header-content-justify-content: space-between; + --denhaag-header-actions-display: none; + --denhaag-header-actions-desktop-display: flex; + --denhaag-header-actions-desktop-action-margin-inline-start: 24px; + --denhaag-header-mobile-actions-display: flex; + --denhaag-header-mobile-actions-desktop-display: none; + --denhaag-hero-columns: 12; + --denhaag-hero-container-max-width: 100%; + --denhaag-hero-container-max-width-xs: 20rem; + --denhaag-hero-container-max-width-s: 40.5rem; + --denhaag-hero-container-max-width-m: 56.5rem; + --denhaag-hero-container-max-width-l: 67.5rem; + --denhaag-hero-container-max-width-xl: 98rem; + --denhaag-hero-container-padding-l: 0; + --denhaag-hero-home-min-height: 20rem; + --denhaag-hero-home-min-height-s: 28rem; + --denhaag-hero-home-min-height-m: 30rem; + --denhaag-hero-home-content-align-self: center; + --denhaag-hero-home-content-padding-block: 5.75rem; + --denhaag-hero-home-content-column-start: 1; + --denhaag-hero-home-content-column-start-xl: 2; + --denhaag-hero-home-content-column-end: 12; + --denhaag-hero-home-content-column-end-s: 7; + --denhaag-hero-home-content-column-end-m: 6; + --denhaag-hero-home-content-column-end-l: 5; + --denhaag-hero-home-content-column-offset: 0; + --denhaag-hero-home-content-column-offset-s: 2; + --denhaag-hero-home-content-column-offset-m: 1; + --denhaag-hero-home-image-path: 11.25rem; + --denhaag-hero-home-title-margin-block-end: 0; + --denhaag-hero-home-title-margin-block-start: 0; + --denhaag-hero-routing-min-height: 9rem; + --denhaag-hero-routing-min-height-s: 12rem; + --denhaag-hero-routing-min-height-m: 15rem; + --denhaag-hero-routing-content-align-self: center; + --denhaag-hero-routing-content-column-start: 1; + --denhaag-hero-routing-content-column-start-xl: 3; + --denhaag-hero-routing-content-column-end: 12; + --denhaag-hero-routing-content-column-end-s: 8; + --denhaag-hero-routing-content-column-end-xl: 6; + --denhaag-hero-routing-content-column-offset: 0; + --denhaag-hero-routing-content-column-offset-l: -0.2; + --denhaag-hero-routing-content-column-offset-xl: 2; + --denhaag-hero-routing-image-path: 2.8125rem; + --denhaag-hero-routing-title-margin-block-end: 0; + --denhaag-hero-routing-title-margin-block-start: 0; + --denhaag-hero-routing-shape-background-color: #FAE166; + --denhaag-hero-routing-shape-start: 1; + --denhaag-hero-routing-shape-start-l: 0; + --denhaag-hero-routing-shape-start-xl: -0.25; + --denhaag-hero-theme-page-min-height: 0; + --denhaag-hero-theme-page-image-path: 11.25rem; + --denhaag-hero-theme-page-image-start-s: 4; + --denhaag-hero-theme-page-image-start-m: 5; + --denhaag-hero-theme-page-image-pattern-container-position: absolute; + --denhaag-hero-theme-page-image-pattern-container-size: 100%; + --denhaag-hero-theme-page-image-pattern-container-overflow: hidden; + --denhaag-hero-theme-page-image-pattern-width: 100%; + --denhaag-hero-theme-page-image-pattern-height: auto; + --denhaag-hero-theme-page-container-padding-block-start: 0; + --denhaag-hero-theme-page-container-padding-block-start-s: 3.5rem; + --denhaag-hero-theme-page-container-padding-block-start-xl: 7rem; + --denhaag-hero-theme-page-content-column-start: 1; + --denhaag-hero-theme-page-content-column-start-s: 2; + --denhaag-hero-theme-page-content-column-start-xl: 3; + --denhaag-hero-theme-page-content-column-end: 12; + --denhaag-hero-theme-page-content-column-end-s: 10; + --denhaag-hero-theme-page-content-column-end-xl: 8; + --denhaag-hero-theme-page-content-text-align: center; + --denhaag-hero-theme-page-content-padding-block: 4rem; + --denhaag-hero-theme-page-content-transform: 2rem; + --denhaag-icon-button-padding-block-start: 2px; + --denhaag-icon-button-padding-block-end: 2px; + --denhaag-icon-button-padding-inline-start: 2px; + --denhaag-icon-button-padding-inline-end: 2px; + --denhaag-icon-button-focus-outline-offset: 0px; + --denhaag-image-download-text-display-mobile: none; + --denhaag-image-download-text-display-desktop: inline; + --denhaag-image-download-text-width: max-content; + --denhaag-image-figcaption-align-items: flex-start; + --denhaag-image-figcaption-display: grid; + --denhaag-image-figcaption-download-align-items: flex-end; + --denhaag-image-figcaption-download-gap: 0.5rem; + --denhaag-image-figcaption-download-display: flex; + --denhaag-image-figcaption-download-font-size: 1.125rem; + --denhaag-image-figcaption-download-line-height: 1; + --denhaag-image-figcaption-download-margin-inline-start: 1rem; + --denhaag-image-figcaption-download-text-decoration: none; + --denhaag-image-figcaption-download-only-display: inline-flex; + --denhaag-image-figcaption-download-only-justify-content: flex-end; + --denhaag-image-figcaption-download-only-width: 100%; + --denhaag-image-figcaption-download-only-vertical-align: bottom; + --denhaag-image-figcaption-justify-content: space-between; + --denhaag-image-figcaption-gap: 1rem; + --denhaag-image-figcaption-padding-block: 1rem; + --denhaag-image-figcaption-text-line-height: 1.5; + --denhaag-image-image-display: block; + --denhaag-image-image-height: auto; + --denhaag-image-image-width: 100%; + --denhaag-image-margin-inline: 0; + --denhaag-image-margin-block-end-mobile: 1.5rem; + --denhaag-image-margin-block-end-desktop: 2rem; + --denhaag-language-switcher-mobile-title-display: none; + --denhaag-language-switcher-list-padding-block-start: 16px; + --denhaag-language-switcher-list-margin-block-start: 0; + --denhaag-language-switcher-list-margin-block-end: 16px; + --denhaag-language-switcher-list-margin-inline-start: 0; + --denhaag-language-switcher-list-padding-inline-start: 0; + --denhaag-language-switcher-list-item-list-style: none; + --denhaag-language-switcher-list-item-padding-block-start: 8px; + --denhaag-language-switcher-list-item-padding-block-end: 8px; + --denhaag-language-switcher-list-item-tablet-padding-block-start: 12px; + --denhaag-language-switcher-list-item-tablet-padding-block-end: 12px; + --denhaag-language-switcher-list-item-mobile-padding-block-start: 16px; + --denhaag-language-switcher-list-item-mobile-padding-block-end: 16px; + --denhaag-language-switcher-list-item-link-active-icon-margin-block-start: auto; + --denhaag-language-switcher-list-item-link-active-icon-margin-block-end: auto; + --denhaag-language-switcher-list-item-link-active-icon-margin-inline-start: auto; + --denhaag-language-switcher-list-item-link-active-icon-margin-inline-end: auto; + --denhaag-language-switcher-list-item-link-active-icon-padding-inline-start: 5px; + --denhaag-language-switcher-list-item-link-active-icon-padding-block-start: 0; + --denhaag-language-switcher-list-item-button-hover-text-decoration: underline; + --denhaag-language-switcher-list-item-button-text-decoration: none; + --denhaag-language-switcher-list-item-button-text-underline-offset: 1px; + --denhaag-language-switcher-list-item-button-icon-gap: 6px; + --denhaag-language-switcher-list-item-button-icon-inset-block-start: -1px; + --denhaag-language-switcher-list-item-button-icon-size: 1rem; + --denhaag-link-cursor: pointer; + --denhaag-link-text-decoration: underline; + --denhaag-link-icon-align: flex-start; + --denhaag-link-icon-font-size: 1em; + --denhaag-link-icon-size: 1.25rem; + --denhaag-link-with-icon-vertical-align: bottom; + --denhaag-link-small-icon-size: 0.5rem; + --denhaag-link-external-icon-align: center; + --denhaag-list-wrapper-margin-block: 8px; + --denhaag-list-wrapper-padding-block: 8px; + --denhaag-list-item-padding-inline: 16px; + --denhaag-list-item-padding-block: 12px; + --denhaag-list-item-secondary-action-margin-inline-start: 24px; + --denhaag-list-item-active-border-size: 2px; + --denhaag-list-item-secondary-padding-block: 8px; + --denhaag-list-item-icon-margin-inline-end: 24px; + --denhaag-list-item-text-primary-font-size: 1rem; + --denhaag-list-item-text-primary-font-weight: 400; + --denhaag-list-item-text-secondary-font-weight: 400; + --denhaag-list-item-text-secondary-line-height: 16px; + --denhaag-list-item-text-secondary-padding-block-end: 8px; + --denhaag-list-item-text-multiline-primary-line-height: 32px; + --denhaag-list-subheader-font-weight: 700; + --denhaag-menu-button-line-height: 21px; + --denhaag-menu-button-chevron-padding-inline-start: 4px; + --denhaag-menu-button-chevron-size: 12px; + --denhaag-menu-group-spacing: 40px; + --denhaag-mobile-menu-transition-duration: 200ms; + --denhaag-mobile-menu-will-change: transform; + --denhaag-mobile-menu-scrolled-transform: translateX(-100vw); + --denhaag-mobile-menu-list-expandable-display: none; + --denhaag-mobile-menu-list-expandable-open-display: block; + --denhaag-mobile-menu-list-expandable-item-border-bottom: none; + --denhaag-mobile-menu-list-padding-inline-start: 0; + --denhaag-mobile-menu-list-item-display: flex; + --denhaag-mobile-menu-list-item-flex-direction: column; + --denhaag-mobile-menu-list-item-min-block-size: 58px; + --denhaag-mobile-menu-list-item-outline-style: none; + --denhaag-mobile-menu-list-item-active-icon-transform: scaleY(-1); + --denhaag-mobile-menu-list-item-expanded-list-display: none; + --denhaag-mobile-menu-list-item-expanded-list-list-style: none; + --denhaag-mobile-menu-list-item-expanded-list-padding-inline-start: 0; + --denhaag-mobile-menu-list-item-expanded-list-open-display: block; + --denhaag-mobile-menu-list-item-button-font-size: inherit; + --denhaag-mobile-menu-list-item-button-background-color: transparent; + --denhaag-mobile-menu-list-item-button-color: auto; + --denhaag-mobile-menu-list-item-button-align-items: center; + --denhaag-mobile-menu-list-item-button-appearance: none; + --denhaag-mobile-menu-list-item-button-border: 0; + --denhaag-mobile-menu-list-item-button-display: flex; + --denhaag-mobile-menu-list-item-button-justify-content: space-between; + --denhaag-mobile-menu-list-item-button-margin-block: 0; + --denhaag-mobile-menu-list-item-button-margin-inline: 0; + --denhaag-mobile-menu-list-item-button-padding-block: 0; + --denhaag-mobile-menu-list-item-button-padding-inline: 0; + --denhaag-mobile-menu-list-item-button-text-decoration: none; + --denhaag-mobile-menu-list-item-button-width: 100%; + --denhaag-mobile-menu-list-item-button-large-font-size: 20px; + --denhaag-mobile-menu-list-item-button-large-font-weight: 700; + --denhaag-mobile-menu-list-item-button-label-gap: 8px; + --denhaag-mobile-menu-list-submenu-display: none; + --denhaag-mobile-menu-list-submenu-flex-direction: column; + --denhaag-mobile-menu-list-submenu-left: 100vw; + --denhaag-mobile-menu-list-submenu-position: absolute; + --denhaag-mobile-menu-list-submenu-top: 0; + --denhaag-mobile-menu-list-submenu-width: 100%; + --denhaag-mobile-menu-list-submenu-title-align-items: center; + --denhaag-mobile-menu-list-submenu-title-display: flex; + --denhaag-mobile-menu-list-submenu-open-display: flex; + --denhaag-mobile-menu-list-submenu-back-button-align-self: baseline; + --denhaag-mobile-menu-list-submenu-back-button-background-color: transparent; + --denhaag-mobile-menu-list-submenu-back-button-border: 0; + --denhaag-mobile-menu-list-submenu-back-button-padding-block-start: 20px; + --denhaag-mobile-menu-list-submenu-back-button-padding-block-end: 20px; + --denhaag-mobile-menu-list-submenu-back-button-padding-inline-start: 0; + --denhaag-mobile-menu-list-submenu-back-button-padding-inline-end: 24px; + --denhaag-modal-display: none; + --denhaag-modal-offset-y: 100px; + --denhaag-modal-index: 12; + --denhaag-modal-width: 765px; + --denhaag-modal-close-size: 14px; + --denhaag-modal-backdrop-background-color: rgb(0 0 0 / 50%); + --denhaag-modal-header-border-bottom-style: solid; + --denhaag-modal-header-border-bottom-width: 1px; + --denhaag-modal-title-font-style: normal; + --denhaag-modal-footer-justify-content: flex-end; + --denhaag-note-font-size: 1.125rem; + --denhaag-note-font-weight: 400; + --denhaag-note-line-height: 1.5; + --denhaag-page-buttons-margin-block-start: 0.75rem; + --denhaag-page-buttons-margin-block-end: 2rem; + --denhaag-page-buttons-outline-dark-action-min-width: 6.25rem; + --denhaag-page-buttons-outline-dark-action-margin-inline-end: 0.75rem; + --denhaag-page-buttons-outline-dark-action-margin-block-end: 0.75rem; + --denhaag-page-buttons-icon-margin-inline-end: 0.75rem; + --denhaag-page-buttons-icon-max-height: 1.25rem; + --denhaag-page-buttons-icon-max-width: 1.1875rem; + --denhaag-page-buttons-option-min-width: 2.75rem; + --denhaag-page-buttons-option-min-height: 2.594rem; + --denhaag-page-buttons-option-margin-inline-start: 0.5rem; + --denhaag-page-header-index: 2; + --denhaag-page-content-main-margin-block-start: 1rem; + --denhaag-page-content-main-sm-margin-block-start: 3.5rem; + --denhaag-page-content-main-md-margin-block-start: 4em; + --denhaag-pagination-margin-inline: 0.625rem; + --denhaag-pagination-button-background-color: transparent; + --denhaag-posttypelabel-font-weight: 700; + --denhaag-posttypelabel-line-height: 1.5; + --denhaag-posttypelabel-letter-spacing: 1px; + --denhaag-posttypelabel-text-transform: uppercase; + --denhaag-process-steps-line-height: 24px; + --denhaag-process-steps-step-header-align-items: center; + --denhaag-process-steps-step-collapse-icon-size: 16px; + --denhaag-process-steps-step-collapse-icon-padding: 4px; + --denhaag-process-steps-step-content-margin: 12px; + --denhaag-process-steps-step-padding-block-end: 0; + --denhaag-process-steps-step-padding-block-start: 0; + --denhaag-process-steps-step-meta-font-size: 16px; + --denhaag-process-steps-step-meta-date-font-size: 20px; + --denhaag-process-steps-step-meta-nested-font-size: 14px; + --denhaag-radio-checked-inner-size: 6px; + --denhaag-responsive-content-2xs-padding: 0.75rem; + --denhaag-responsive-content-xs-padding: 1.5rem; + --denhaag-responsive-content-sm-max-width: 40.5rem; + --denhaag-responsive-content-md-max-width: 56.5rem; + --denhaag-responsive-content-lg-max-width: 67.5rem; + --denhaag-rich-text-confidant-margin-block-end: 0px; + --denhaag-select-box-sizing: border-box; + --denhaag-select-max-block-size: 3rem; + --denhaag-sheet-left: flex0; + --denhaag-sheet-min-height: 100vh; + --denhaag-sheet-overflow-x: hidden; + --denhaag-sheet-position: absolute; + --denhaag-sheet-top: 4.5rem; + --denhaag-sheet-width: 100%; + --denhaag-sheet-z-index: 3; + --denhaag-sheet-title-font-size: 18px; + --denhaag-sheet-title-margin-block-end: 16px; + --denhaag-sheet-desktop-min-height: 15rem; + --denhaag-sheet-desktop-padding-block-start: 24px; + --denhaag-sheet-desktop-top: 7.5rem; + --denhaag-sheet-dialog-border: none; + --denhaag-sheet-dialog-margin-block-start: 0; + --denhaag-sheet-dialog-max-height: fit-content; + --denhaag-sheet-dialog-max-width: 100%; + --denhaag-sheet-dialog-overflow-y: hidden; + --denhaag-sheet-dialog-padding-block-end: 0; + --denhaag-sheet-dialog-padding-block-start: 0; + --denhaag-sheet-dialog-padding-inline-end: 0; + --denhaag-sheet-dialog-padding-inline-start: 0; + --denhaag-sheet-dialog-top: 0; + --denhaag-sheet-dialog-backdrop-top: 0; + --denhaag-sheet-container-margin-block-end: 4rem; + --denhaag-sheet-container-menu-display: grid; + --denhaag-sheet-close-button-float: right; + --denhaag-sheet-overlay-background-color: rgb(0 0 0 / 50%); + --denhaag-sheet-overlay-height: 100vh; + --denhaag-sheet-overlay-left: 0; + --denhaag-sheet-overlay-position: fixed; + --denhaag-sheet-overlay-top: 4.5rem; + --denhaag-sheet-overlay-width: 100vw; + --denhaag-sheet-overlay-z-index: 1; + --denhaag-sheet-overlay-tablet-top: 6rem; + --denhaag-sheet-overlay-desktop-top: 7.5rem; + --denhaag-side-navigation-display: flex; + --denhaag-side-navigation-flex-direction: column; + --denhaag-side-navigation-min-width: 14.5rem; + --denhaag-side-navigation-mobile-display: none; + --denhaag-side-navigation-item-height: 48px; + --denhaag-side-navigation-item-line-height: 1.5; + --denhaag-side-navigation-item-margin-block-start: 0; + --denhaag-side-navigation-item-margin-block-end: 0; + --denhaag-side-navigation-item-margin-inline-start: 0; + --denhaag-side-navigation-item-margin-inline-end: 0; + --denhaag-side-navigation-link-padding-block-start: 12px; + --denhaag-side-navigation-link-padding-block-end: 12px; + --denhaag-step-marker-border-width: 2px; + --denhaag-step-marker-font-weight: 400; + --denhaag-step-marker-margin: 0; + --denhaag-step-marker-padding: 12px; + --denhaag-step-marker-size: 32px; + --denhaag-step-marker-icon-size: 20px; + --denhaag-step-marker-nested-size: 16px; + --denhaag-step-marker-nested-icon-size: 10px; + --denhaag-step-marker-connector-outline-width: 1px; + --denhaag-table-width: 100%; + --denhaag-table-max-width: 100%; + --denhaag-table-border-spacing: 0; + --denhaag-table-cell-min-width: 7.5rem; + --denhaag-table-row-padding-block-end: .75rem; + --denhaag-table-row-padding-block-start: .75rem; + --denhaag-table-heading-min-width: 7.5rem; + --denhaag-table-container-overflow-x: auto; + --denhaag-table-container-shadow-group-width: inherit; + --denhaag-table-container-shadow-group-position: absolute; + --denhaag-table-container-shadow-group-bottom: 0; + --denhaag-table-container-shadow-group-display: contents; + --denhaag-table-container-shadow-height: inherit; + --denhaag-table-container-shadow-position: absolute; + --denhaag-table-container-shadow-background: linear-gradient(270deg, rgba(0, 0, 0, 0.1) 0%, rgba(255, 255, 255, 0) 76.92%); + --denhaag-table-container-shadow-bottom: 0; + --denhaag-table-container-shadow-left-left: 0; + --denhaag-table-container-shadow-left-transform: matrix(-1, 0, 0, 1, 0, 0); + --denhaag-table-container-shadow-right-right: 0; + --denhaag-table-wrapper-position: relative; + --denhaag-table-scroll-buttons-flex-direction: initial; + --denhaag-table-scroll-buttons-justify-content: flex-end; + --denhaag-tabs-border-width: 2px; + --denhaag-tabs-border-style: solid; + --denhaag-tabs-width: 100%; + --denhaag-tabs-tab-cursor: pointer; + --denhaag-tabs-tab-line-height: 1.5; + --denhaag-tabs-tab-outline: 0; + --denhaag-tabs-tab-indicator-border-width: 2px; + --denhaag-tabs-tab-indicator-bottom: 0; + --denhaag-tabs-tab-panel-padding-block-start: 0; + --denhaag-tabs-tab-panel-padding-block-end: 0; + --denhaag-tabs-tab-panel-padding-inline-start: 0; + --denhaag-tabs-tab-panel-padding-inline-end: 0; + --denhaag-tabs-tab-panel-outline: 0; + --denhaag-timeline-line-height: 24px; + --denhaag-timeline-step-icon-margin: auto; + --denhaag-timeline-step-icon-padding: 12px; + --denhaag-timeline-step-icon-size: 20px; + --denhaag-timeline-step-label-active-font-weight: 700; + --denhaag-timeline-step-collapse-icon-size: 16px; + --denhaag-timeline-step-collapse-icon-padding: 4px; + --denhaag-timeline-step-content-margin: 12px; + --denhaag-timeline-step-outline-offset: 2px; + --denhaag-timeline-step-padding: 12px; + --denhaag-unordered-list-marker-font-size: 1rem; + --denhaag-unordered-list-lower-alpha-list-style-type: lower-alpha; + --nl-data-badge-border-color: ; + --nl-data-badge-border-width: 0; + --nl-data-badge-min-block-size: ; + --nl-data-badge-min-inline-size: ; + --nl-data-badge-padding-block: 2px; + --nl-data-badge-padding-inline: 8px; + --nl-heading-level-1-margin-block-start: 0; + --nl-heading-level-1-margin-block-end: 0; + --nl-heading-level-2-margin-block-start: 0; + --nl-heading-level-2-margin-block-end: 0; + --nl-heading-level-3-margin-block-start: 0; + --nl-heading-level-3-margin-block-end: 0; + --nl-heading-level-4-margin-block-start: 0; + --nl-heading-level-4-margin-block-end: 0; + --nl-heading-level-5-margin-block-start: 0; + --nl-heading-level-5-margin-block-end: 0; + --nl-heading-level-6-margin-block-start: 0; + --nl-heading-level-6-margin-block-end: 0; + --nl-link-text-decoration-color: ; + --nl-link-text-decoration-line: underline; + --nl-link-text-decoration-thickness: ; + --nl-link-text-underline-offset: ; + --nl-link-active-color: ; + --nl-link-active-text-decoration-color: ; + --nl-link-active-text-decoration-line: underline; + --nl-link-active-text-decoration-thickness: ; + --nl-link-disabled-cursor: ; + --nl-link-focus-visible-background-color: ; + --nl-link-focus-visible-text-decoration-line: underline; + --nl-link-focus-visible-text-decoration-thickness: ; + --nl-link-hover-text-decoration-line: underline; + --nl-link-hover-text-decoration-thickness: ; + --nl-number-badge-border-color: ; + --nl-number-badge-border-radius: 50px; + --nl-number-badge-border-width: 0; + --nl-number-badge-min-block-size: ; + --nl-number-badge-min-inline-size: ; + --nl-number-badge-padding-block: 5px; + --nl-number-badge-padding-inline: 6px; + --nl-paragraph-margin-block-start: 0; + --nl-paragraph-margin-block-end: 0; + --of-button-anchor-color-border: transparent; + --of-button-anchor-bg: transparent; + --utrecht-alert-padding-block-start: 24px; + --utrecht-alert-padding-block-end: 24px; + --utrecht-alert-padding-inline-start: 24px; + --utrecht-alert-padding-inline-end: 24px; + --utrecht-article-max-inline-size: 80ch; + --utrecht-badge-counter-border-radius: 50px; + --utrecht-badge-counter-font-weight: 700; + --utrecht-badge-counter-padding-block: 5px; + --utrecht-badge-counter-padding-inline: 6px; + --utrecht-badge-padding-block: 2px; + --utrecht-badge-padding-inline: 8px; + --utrecht-breadcrumb-nav-item-padding-inline-end: 14px; + --utrecht-breadcrumb-nav-item-padding-inline-start: 14px; + --utrecht-breadcrumb-nav-link-focus-text-decoration: underline; + --utrecht-breadcrumb-nav-link-hover-text-decoration: underline; + --utrecht-breadcrumb-nav-separator-inline-size: 24px; + --utrecht-button-icon-gap: 4px; + --utrecht-button-secondary-action-border-width: 1px; + --utrecht-data-list-margin-block-start: 24px; + --utrecht-data-list-item-key-font-weight: bold; + --utrecht-data-list-item-key-line-height: 1.5; + --utrecht-data-list-item-value-line-height: 1.5; + --utrecht-data-list-rows-item-margin-block-start: 16px; + --utrecht-data-list-rows-item-padding-inline-start: 16px; + --utrecht-data-list-rows-item-value-margin-block-start: 0; + --utrecht-form-fieldset-margin-block-end: 12px; + --utrecht-form-fieldset-margin-block-start: 12px; + --utrecht-form-fieldset-legend-margin-block-end: 8px; + --utrecht-form-label-checkbox-font-weight: 400; + --utrecht-form-label-radio-font-weight: 400; + --utrecht-form-toggle-border-radius: 12px; + --utrecht-form-toggle-border-width: 0; + --utrecht-form-toggle-thumb-margin-inline-start: .2rem; + --utrecht-form-toggle-thumb-margin-inline-end: .2rem; + --utrecht-form-toggle-thumb-min-inline-size: 1em; + --utrecht-heading-2-margin-block-end: 0.5rem; + --utrecht-heading-2-margin-block-start: 1.775rem; + --utrecht-heading-3-margin-block-end: 0.375rem; + --utrecht-heading-3-margin-block-start: 1.33125rem; + --utrecht-heading-4-margin-block-end: 0.3125rem; + --utrecht-heading-4-margin-block-start: 1.1125rem; + --utrecht-heading-5-margin-block-end: 0.28125rem; + --utrecht-heading-5-margin-block-start: 1rem; + --utrecht-icon-size: 1.125rem; + --utrecht-icon-baseline-inset-block-start: 0.125em; + --utrecht-link-social-background-color: transparent; + --utrecht-link-social-border-width: 5px; + --utrecht-link-social-border-color: transparent; + --utrecht-link-text-decoration: underline; + --utrecht-link-text-decoration-thickness: auto; + --utrecht-link-text-underline-offset: auto; + --utrecht-link-focus-text-decoration-thickness: 1px; + --utrecht-link-hover-text-decoration: none; + --utrecht-link-hover-text-decoration-thickness: auto; + --utrecht-list-social-item-margin-inline-end: 14px; + --utrecht-logo-max-block-size: 97px; + --utrecht-page-footer-padding-inline-end: 30px; + --utrecht-page-footer-padding-inline-start: 30px; + --utrecht-page-footer-padding-block-start: 30px; + --utrecht-page-footer-padding-block-end: 40px; + --utrecht-paragraph-lead-line-height: 26px; + --utrecht-paragraph-distanced-margin-block-start: 0; + --utrecht-paragraph-distanced-margin-block-end: 0; + --utrecht-paragraph-paragraph-margin-block-start: 14.24px; + --utrecht-radio-button-size: 22px; + --utrecht-radio-button-icon-size: 35%; + --utrecht-select-background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z' fill='currentColor'/%3E%3C/svg%3E%0A"); + --utrecht-select-border-bottom-width: auto; + --utrecht-select-min-block-size: 3rem; + --utrecht-select-max-inline-size: 400px; + --utrecht-separator-block-size: 1px; + --utrecht-separator-margin-block-start: 16px; + --utrecht-separator-margin-block-end: 16px; + --utrecht-table-border-width: 1px; + --utrecht-table-caption-font-weight: 700; + --utrecht-table-caption-text-align: start; + --utrecht-table-header-border-block-end-width: 1px; + --utrecht-table-header-cell-font-size: 18px; + --utrecht-table-header-cell-font-weight: 700; + --utrecht-table-row-border-block-end-width: 1px; + --utrecht-table-row-alternate-odd-background-color: rgb(250, 250, 250); + --utrecht-table-row-alternate-even-background-color: rgb(255, 255, 255); + --utrecht-textbox-border-bottom-width: 1px; + --utrecht-textbox-border-radius: 3px; + --utrecht-textbox-border-width: 1px; + --utrecht-textbox-padding-inline-end: 12px; + --utrecht-textbox-padding-inline-start: 12px; + --utrecht-textarea-border-bottom-width: 1px; + --utrecht-textarea-border-radius: 3px; + --utrecht-textarea-border-width: 1px; + --denhaag-accordion-font-family: var(--denhaag-typography-sans-serif-font-family); + --denhaag-accordion-margin-block-end: var(--denhaag-space-block-xl); + --denhaag-accordion-section-border: 1px solid var(--denhaag-color-grey-3); + --denhaag-accordion-section-content-background-color: var(--denhaag-color-white); + --denhaag-accordion-section-header-background-color: var(--denhaag-color-white); + --denhaag-accordion-section-header-icon-color: var(--denhaag-color-green-3); + --denhaag-accordion-section-description-color: var(--denhaag-color-grey-5); + --denhaag-accordion-section-title-color: var(--denhaag-color-green-3); + --denhaag-action-gap: var(--denhaag-space-inline-xs); + --denhaag-action-color: var(--denhaag-color-grey-5); + --denhaag-action-background-color: var(--denhaag-color-white); + --denhaag-action-padding-inline-start: var(--denhaag-space-inline-md); + --denhaag-action-padding-inline-end: var(--denhaag-space-inline-md); + --denhaag-action-padding-block-start: var(--denhaag-space-block-md); + --denhaag-action-padding-block-end: var(--denhaag-space-block-md); + --denhaag-action-border-color: var(--denhaag-color-grey-2); + --denhaag-action-content-bold-font-weight: var(--denhaag-typography-weight-semibold); + --denhaag-action-details-gap: var(--denhaag-space-inline-md); + --denhaag-action-details-lg-gap: var(--denhaag-space-inline-xl); + --denhaag-action-date-color: var(--denhaag-color-grey-4); + --denhaag-action-date-font-weight: var(--denhaag-typography-weight-medium); + --denhaag-action-date-warning-gap: var(--denhaag-space-inline-xs); + --denhaag-action-date-warning-color: var(--denhaag-color-orange-5); + --denhaag-action-date-warning-font-weight: var(--denhaag-typography-weight-semibold); + --denhaag-action-actions-gap: var(--denhaag-space-inline-xs); + --denhaag-action-link-icon-color: var(--denhaag-color-blue-3); + --denhaag-action-warning-icon-color: var(--denhaag-color-orange-4); + --denhaag-action-single-padding-inline-start: var(--denhaag-space-inline-md); + --denhaag-action-single-padding-inline-end: var(--denhaag-space-inline-md); + --denhaag-action-single-padding-block-start: var(--denhaag-space-block-md); + --denhaag-action-single-padding-block-end: var(--denhaag-space-block-md); + --denhaag-action-single-hover-background-color: var(--denhaag-color-grey-1); + --denhaag-action-single-focus-outline-width: var(--denhaag-focus-border-width); + --denhaag-action-single-focus-outline-style: var(--denhaag-focus-border-style); + --denhaag-action-single-details-gap: var(--denhaag-space-inline-xs); + --denhaag-action-single-details-lg-gap: var(--denhaag-space-inline-xs); + --denhaag-action-lg-gap: var(--denhaag-space-inline-xl); + --denhaag-action-lg-padding-block-start: var(--denhaag-space-block-sm); + --denhaag-action-lg-padding-block-end: var(--denhaag-space-block-sm); + --denhaag-alert-padding-block-start: var(--denhaag-space-block-xl); + --denhaag-alert-padding-block-end: var(--denhaag-space-block-xl); + --denhaag-alert-padding-inline-start: var(--denhaag-space-block-xl); + --denhaag-alert-padding-inline-end: var(--denhaag-space-block-xl); + --denhaag-alert-gap: var(--denhaag-space-block-xl); + --denhaag-alert-centre-gap: var(--denhaag-space-block-md); + --denhaag-alert-content-gap: var(--denhaag-space-block-sm); + --denhaag-alert-error-background-color: var(--denhaag-color-red-1); + --denhaag-alert-error-title-color: var(--denhaag-color-red-5); + --denhaag-alert-error-paragraph-color: var(--denhaag-color-red-5); + --denhaag-alert-error-icon-color: var(--denhaag-color-red-3); + --denhaag-alert-error-action-button-color: var(--denhaag-color-white); + --denhaag-alert-error-action-button-background-color: var(--denhaag-color-red-3); + --denhaag-alert-error-action-button-hover-background-color: var(--denhaag-color-red-4); + --denhaag-alert-error-close-icon-color: var(--denhaag-color-red-5); + --denhaag-alert-info-background-color: var(--denhaag-color-blue-1); + --denhaag-alert-info-title-color: var(--denhaag-color-blue-5); + --denhaag-alert-info-paragraph-color: var(--denhaag-color-blue-5); + --denhaag-alert-info-icon-color: var(--denhaag-color-blue-3); + --denhaag-alert-info-action-button-color: var(--denhaag-color-white); + --denhaag-alert-info-action-button-background-color: var(--denhaag-color-blue-3); + --denhaag-alert-info-action-button-hover-background-color: var(--denhaag-color-blue-4); + --denhaag-alert-info-close-icon-color: var(--denhaag-color-blue-5); + --denhaag-alert-success-background-color: var(--denhaag-color-green-1); + --denhaag-alert-success-title-color: var(--denhaag-color-green-5); + --denhaag-alert-success-paragraph-color: var(--denhaag-color-green-5); + --denhaag-alert-success-icon-color: var(--denhaag-color-green-3); + --denhaag-alert-success-action-button-color: var(--denhaag-color-white); + --denhaag-alert-success-action-button-background-color: var(--denhaag-color-green-3); + --denhaag-alert-success-action-button-hover-background-color: var(--denhaag-color-green-4); + --denhaag-alert-success-close-icon-color: var(--denhaag-color-green-5); + --denhaag-alert-warning-background-color: var(--denhaag-color-orange-1); + --denhaag-alert-warning-title-color: var(--denhaag-color-orange-5); + --denhaag-alert-warning-paragraph-color: var(--denhaag-color-orange-5); + --denhaag-alert-warning-icon-color: var(--denhaag-color-orange-5); + --denhaag-alert-warning-action-button-color: var(--denhaag-color-white); + --denhaag-alert-warning-action-button-background-color: var(--denhaag-color-orange-5); + --denhaag-alert-warning-action-button-hover-background-color: var(--denhaag-color-orange-5); + --denhaag-alert-warning-close-icon-color: var(--denhaag-color-orange-5); + --denhaag-anchor-collapse-border-color: var(--denhaag-color-grey-2); + --denhaag-anchor-collapse-content-margin-block-start: var(--denhaag-space-block-xs); + --denhaag-anchor-collapse-content-padding-block-start: var(--denhaag-space-block-md); + --denhaag-anchor-collapse-content-padding-block-end: var(--denhaag-space-block-xl); + --denhaag-anchor-collapse-content-padding-inline-start: var(--denhaag-space-inline-xl); + --denhaag-anchor-collapse-content-padding-inline-end: var(--denhaag-space-inline-xl); + --denhaag-anchor-collapse-summary-color: var(--denhaag-color-grey-5); + --denhaag-anchor-collapse-summary-font-family: var(--denhaag-typography-sans-serif-font-family); + --denhaag-anchor-collapse-summary-font-size: var(--denhaag-typography-scale-lg-font-size); + --denhaag-anchor-collapse-summary-font-weight: var(--denhaag-typography-weight-bold); + --denhaag-anchor-collapse-summary-padding-block: var(--denhaag-space-block-md); + --denhaag-anchor-collapse-summary-padding-inline: var(--denhaag-space-inline-xl); + --denhaag-anchor-collapse-summary-active-color: var(--denhaag-color-green-3); + --denhaag-anchor-collapse-summary-hover-color: var(--denhaag-color-green-3); + --denhaag-anchor-collapse-summary-focus-color: var(--denhaag-color-green-3); + --denhaag-anchor-navigation-button-margin-block-start: var(--denhaag-space-block-md); + --denhaag-anchor-navigation-link-background-color: var(--denhaag-color-grey-2); + --denhaag-anchor-navigation-link-color: var(--denhaag-color-grey-4); + --denhaag-anchor-navigation-link-font-family: var(--denhaag-typography-sans-serif-font-family); + --denhaag-anchor-navigation-link-font-size: var(--denhaag-typography-scale-base-font-size); + --denhaag-anchor-navigation-link-font-weight: var(--denhaag-typography-weight-regular); + --denhaag-anchor-navigation-link-padding-block: var(--denhaag-space-block-xs); + --denhaag-anchor-navigation-link-active-color: var(--denhaag-color-green-3); + --denhaag-anchor-navigation-link-active-font-weight: var(--denhaag-typography-weight-bold); + --denhaag-anchor-navigation-link-focus-color: var(--denhaag-color-green-3); + --denhaag-anchor-navigation-link-hover-color: var(--denhaag-color-green-3); + --denhaag-anchor-navigation-link-target-color: var(--denhaag-color-green-3); + --denhaag-article-meta-border-color: var(--denhaag-color-grey-2); + --denhaag-article-meta-color: var(--denhaag-color-grey-4); + --denhaag-article-meta-font-family: var(--denhaag-typography-sans-serif-font-family); + --denhaag-article-meta-font-weight: var(--denhaag-typography-weight-regular); + --denhaag-article-meta-font-size: var(--denhaag-typography-scale-base-font-size); + --denhaag-article-meta-line-height: var(--denhaag-typography-scale-base-line-height); + --denhaag-article-meta-padding-block-start: var(--denhaag-space-block-md); + --denhaag-article-meta-padding-block-end: var(--denhaag-space-block-5xl); + --denhaag-article-meta-margin-block-start: var(--denhaag-space-block-2xl); + --denhaag-article-meta-horizontal-item-border-color: var(--denhaag-color-grey-2); + --denhaag-blockquote-attribution-color: var(--denhaag-color-grey-4); + --denhaag-blockquote-attribution-font-family: var(--denhaag-typography-sans-serif-font-family); + --denhaag-blockquote-attribution-font-size: var(--denhaag-typography-scale-s-font-size); + --denhaag-blockquote-border-color: var(--denhaag-color-green-1); + --denhaag-blockquote-paragraph-color: var(--denhaag-color-green-4); + --denhaag-blockquote-paragraph-font-family: var(--denhaag-typography-sans-serif-alternate-font-family); + --denhaag-blockquote-paragraph-font-size: var(--denhaag-typography-scale-lg-font-size); + --denhaag-breadcrumb-background-color: var(--denhaag-color-warmgrey-1); + --denhaag-breadcrumb-color: var(--denhaag-color-grey-4); + --denhaag-breadcrumb-font-weight: var(--denhaag-typography-weight-regular); + --denhaag-breadcrumb-spacing: var(--denhaag-space-inline-xs); + --denhaag-breadcrumb-current-color: var(--denhaag-color-grey-4); + --denhaag-breadcrumb-dots-background-color: var(--denhaag-color-grey-1); + --denhaag-breadcrumb-dots-border-radius: var(--denhaag-border-radius); + --denhaag-breadcrumb-dots-color: var(--denhaag-color-grey-3); + --denhaag-breadcrumb-dots-hover-background-color: var(--denhaag-color-grey-2); + --denhaag-breadcrumb-link-color: var(--denhaag-color-blue-3); + --denhaag-breadcrumb-link-focus-color: var(--denhaag-color-blue-4); + --denhaag-breadcrumb-link-hover-color: var(--denhaag-color-blue-4); + --denhaag-button-group-padding: var(--denhaag-space-block-md); + --denhaag-button-group-gap: var(--denhaag-space-block-md); + --denhaag-button-border-radius: var(--denhaag-border-radius); + --denhaag-button-font-family: var(--denhaag-typography-sans-serif-font-family); + --denhaag-button-font-size: var(--denhaag-typography-scale-base-font-size); + --denhaag-button-font-weight: var(--denhaag-typography-weight-regular); + --denhaag-button-gap: var(--denhaag-space-inline-xs); + --denhaag-button-padding-block: var(--denhaag-space-block-xs); + --denhaag-button-padding-inline: var(--denhaag-space-inline-md); + --denhaag-button-icon-padding-inline-medium: var(--denhaag-space-inline-sm); + --denhaag-button-icon-padding-inline-large: var(--denhaag-space-inline-md); + --denhaag-button-focus-border-width: var(--denhaag-focus-border-width); + --denhaag-button-focus-border-style: var(--denhaag-focus-border-style); + --denhaag-button-primary-action-background-color: var(--denhaag-color-green-3); + --denhaag-button-primary-action-color: var(--denhaag-color-white); + --denhaag-button-primary-action-hover-background-color: var(--denhaag-color-green-4); + --denhaag-button-primary-action-hover-color: var(--denhaag-color-white); + --denhaag-button-primary-action-disabled-background-color: var(--denhaag-color-grey-2); + --denhaag-button-primary-action-disabled-color: var(--denhaag-color-white); + --denhaag-button-secondary-action-background-color: var(--denhaag-color-white); + --denhaag-button-secondary-action-color: var(--denhaag-color-green-3); + --denhaag-button-secondary-action-border-color: var(--denhaag-color-green-3); + --denhaag-button-secondary-action-hover-background-color: var(--denhaag-color-white); + --denhaag-button-secondary-action-hover-border-color: var(--denhaag-color-green-4); + --denhaag-button-secondary-action-hover-color: var(--denhaag-color-green-4); + --denhaag-button-secondary-action-disabled-background-color: var(--denhaag-color-white); + --denhaag-button-secondary-action-disabled-border-color: var(--denhaag-color-grey-2); + --denhaag-button-secondary-action-disabled-color: var(--denhaag-color-grey-2); + --denhaag-button-large-size-font-size: var(--denhaag-typography-scale-lg-font-size); + --denhaag-button-large-size-padding-inline: var(--denhaag-space-inline-lg); + --denhaag-button-icon-only-icon-height: var(--denhaag-space-block-lg); + --denhaag-card-authentication-background-color: var(--denhaag-color-white); + --denhaag-card-authentication-border-color: var(--denhaag-color-grey-2); + --denhaag-card-group-margin-block: var(--denhaag-space-block-lg); + --denhaag-card-news-border: 1px solid var(--denhaag-color-grey-2); + --denhaag-card-news-box-shadow: 0 0 0.5rem var(--denhaag-color-grey-2); + --denhaag-card-news-gap: var(--denhaag-space-block-md); + --denhaag-card-news-padding: var(--denhaag-space-block-md); + --denhaag-card-news-text-margin-block-end: var(--denhaag-space-block-xs); + --denhaag-card-news-icon-height: var(--denhaag-space-block-md); + --denhaag-card-news-icon-color: var(--denhaag-color-blue-3); + --denhaag-case-card-background-color: var(--denhaag-color-blue-2); + --denhaag-case-card-paper-color: var(--denhaag-color-white); + --denhaag-case-card-background-background-color: var(--denhaag-color-blue-1); + --denhaag-case-card-title-color: var(--denhaag-color-blue-5); + --denhaag-case-card-title-font-family: var(--denhaag-typography-sans-serif-alternate-font-family); + --denhaag-case-card-title-font-size: var(--denhaag-typography-scale-xl-font-size); + --denhaag-case-card-title-font-weight: var(--denhaag-typography-weight-semibold); + --denhaag-case-card-subtitle-color: var(--denhaag-color-blue-4); + --denhaag-case-card-subtitle-font-family: var(--denhaag-typography-sans-serif-font-family); + --denhaag-case-card-subtitle-font-size: var(--denhaag-typography-scale-base-font-size); + --denhaag-case-card-subtitle-font-weight: var(--denhaag-typography-weight-medium); + --denhaag-case-card-subtitle-margin-block-start: var(--denhaag-space-block-2xs); + --denhaag-case-card-context-color: var(--denhaag-color-blue-4); + --denhaag-case-card-action-color: var(--denhaag-color-blue-3); + --denhaag-case-card-action-active-color: var(--denhaag-color-blue-4); + --denhaag-case-card-archived-color: var(--denhaag-color-grey-4); + --denhaag-case-card-archived-background-color: var(--denhaag-color-grey-2); + --denhaag-case-card-archived-background-background-color: var(--denhaag-color-grey-1); + --denhaag-case-card-archived-title-color: var(--denhaag-color-grey-5); + --denhaag-case-card-archived-subtitle-color: var(--denhaag-color-grey-4); + --denhaag-case-card-archived-context-color: var(--denhaag-color-grey-4); + --denhaag-case-card-archived-action-color: var(--denhaag-color-grey-4); + --denhaag-case-card-archived-action-active-color: var(--denhaag-color-grey-5); + --denhaag-case-card-list-border-color: var(--denhaag-color-grey-2); + --denhaag-case-card-list-wrapper-gap: var(--denhaag-space-block-xl); + --denhaag-case-card-list-wrapper-padding-block-start: var(--denhaag-space-block-md); + --denhaag-case-card-list-wrapper-padding-block-end: var(--denhaag-space-block-md); + --denhaag-case-card-list-wrapper-padding-inline-start: var(--denhaag-space-block-md); + --denhaag-case-card-list-wrapper-padding-inline-end: var(--denhaag-space-block-md); + --denhaag-case-card-list-background-hover-background-color: var(--denhaag-color-grey-1); + --denhaag-case-card-list-title-color: var(--denhaag-color-grey-5); + --denhaag-case-card-list-title-font-size: var(--denhaag-typography-scale-base-font-size); + --denhaag-case-card-list-subtitle-color: var(--denhaag-color-grey-4); + --denhaag-case-card-list-subtitle-font-size: var(--denhaag-typography-scale-base-font-size); + --denhaag-case-card-list-footer-gap: var(--denhaag-space-block-lg); + --denhaag-case-card-list-context-color: var(--denhaag-color-grey-4); + --denhaag-checkbox-checked-invalid-background-color: var(--denhaag-color-red-3); + --denhaag-checkbox-checked-disabled-background-color: var(--denhaag-color-grey-2); + --denhaag-checkbox-checked-disabled-border-color: var(--denhaag-color-grey-2); + --denhaag-checkbox-hover-border-color: var(--denhaag-color-grey-4); + --denhaag-checkbox-hover-checked-background-color: var(--denhaag-color-green-4); + --denhaag-checkbox-hover-checked-border-color: var(--denhaag-color-green-4); + --denhaag-checkbox-hover-invalid-background-color: var(--denhaag-color-red-4); + --denhaag-checkbox-hover-invalid-border-color: var(--denhaag-color-red-4); + --denhaag-contact-timeline-step-header-toggle-hover-color: var(--denhaag-color-green-3); + --denhaag-contact-timeline-step-header-toggle-focus-color: var(--denhaag-color-green-3); + --denhaag-contact-timeline-step-header-toggle-active-color: var(--denhaag-color-green-3); + --denhaag-contact-timeline-step-details-sender-font-weight: var(--denhaag-typography-weight-semibold); + --denhaag-contact-timeline-step-meta-marker-color: var(--denhaag-color-black); + --denhaag-cta-download-border-color: var(--denhaag-color-grey-2); + --denhaag-cta-download-color: var(--denhaag-color-grey-4); + --denhaag-cta-download-font-family: var(--denhaag-typography-sans-serif-font-family); + --denhaag-cta-download-font-size: var(--denhaag-typography-scale-lg-font-size); + --denhaag-cta-download-font-weight: var(--denhaag-typography-weight-regular); + --denhaag-cta-download-gap: var(--denhaag-space-block-lg); + --denhaag-cta-download-padding-block: var(--denhaag-space-block-xl); + --denhaag-cta-download-padding-inline: var(--denhaag-space-inline-md); + --denhaag-cta-download-width: var(--denhaag-space-block-5xl); + --denhaag-cta-download-focus-dot-background-color: var(--denhaag-color-blue-4); + --denhaag-cta-download-hover-dot-background-color: var(--denhaag-color-blue-4); + --denhaag-cta-download-dot-background-color: var(--denhaag-color-blue-3); + --denhaag-cta-download-dot-color: var(--denhaag-color-white); + --denhaag-cta-download-excerpt-gap: var(--denhaag-space-block-2xs); + --denhaag-cta-download-title-color: var(--denhaag-color-grey-5); + --denhaag-cta-download-title-font-size: var(--denhaag-typography-scale-lg-font-size); + --denhaag-cta-download-title-font-weight: var(--denhaag-typography-weight-bold); + --denhaag-cta-event-border-color: var(--denhaag-color-grey-2); + --denhaag-cta-event-color: var(--denhaag-color-grey-4); + --denhaag-cta-event-font-family: var(--denhaag-typography-sans-serif-font-family); + --denhaag-cta-event-font-size: var(--denhaag-typography-scale-lg-font-size); + --denhaag-cta-event-font-weight: var(--denhaag-typography-weight-regular); + --denhaag-cta-event-gap: var(--denhaag-space-block-lg); + --denhaag-cta-event-padding-block: var(--denhaag-space-block-xl); + --denhaag-cta-event-padding-inline: var(--denhaag-space-inline-md); + --denhaag-cta-event-width: var(--denhaag-space-block-5xl); + --denhaag-cta-event-focus-dot-background-color: var(--denhaag-color-blue-4); + --denhaag-cta-event-hover-dot-background-color: var(--denhaag-color-blue-4); + --denhaag-cta-event-dot-background-color: var(--denhaag-color-blue-3); + --denhaag-cta-event-date-color: var(--denhaag-color-white); + --denhaag-cta-event-date-font-family: var(--denhaag-typography-sans-serif-font-family); + --denhaag-cta-event-date-font-size: var(--denhaag-typography-scale-s-font-size); + --denhaag-cta-event-date-font-weight: var(--denhaag-typography-weight-regular); + --denhaag-cta-event-day-font-size: var(--denhaag-typography-scale-base-font-size); + --denhaag-cta-event-excerpt-gap: var(--denhaag-space-block-2xs); + --denhaag-cta-event-title-color: var(--denhaag-color-grey-5); + --denhaag-cta-event-title-font-size: var(--denhaag-typography-scale-lg-font-size); + --denhaag-cta-event-title-font-weight: var(--denhaag-typography-weight-bold); + --denhaag-cta-image-content-background-color: var(--denhaag-color-white); + --denhaag-cta-image-content-border: 1px solid var(--denhaag-color-grey-2); + --denhaag-cta-image-content-filled-background-color: var(--denhaag-color-warmgrey-1); + --denhaag-cta-image-content-content-padding-inline: var(--denhaag-space-inline-2xl); + --denhaag-cta-image-content-content-padding-block: var(--denhaag-space-block-2xl); + --denhaag-cta-image-content-content-width: calc(50% - (2 * var(--denhaag-space-inline-2xl))); + --denhaag-cta-image-content-title-margin-block-end: var(--denhaag-space-block-xs); + --denhaag-cta-image-content-title-small-font-size: var(--denhaag-typography-scale-xl-font-size); + --denhaag-cta-image-content-text-font-size: var(--denhaag-typography-scale-xl-font-size); + --denhaag-cta-image-content-text-small-font-size: var(--denhaag-typography-scale-lg-font-size); + --denhaag-cta-image-content-button-margin-block-start: var(--denhaag-space-block-xl); + --denhaag-cta-link-border-color: var(--denhaag-color-grey-2); + --denhaag-cta-link-color: var(--denhaag-color-grey-5); + --denhaag-cta-link-font-family: var(--denhaag-typography-sans-serif-font-family); + --denhaag-cta-link-font-weight: var(--denhaag-typography-weight-regular); + --denhaag-cta-link-gap: var(--denhaag-space-block-lg); + --denhaag-cta-link-padding-block: var(--denhaag-space-block-xl); + --denhaag-cta-link-padding-inline: var(--denhaag-space-inline-md); + --denhaag-cta-link-highlight-color: var(--denhaag-color-blue-3); + --denhaag-cta-link-highlight-font-weight: var(--denhaag-typography-weight-bold); + --denhaag-cta-link-width: var(--denhaag-space-block-5xl); + --denhaag-cta-link-focus-highlight-color: var(--denhaag-color-blue-4); + --denhaag-cta-link-hover-highlight-color: var(--denhaag-color-blue-4); + --denhaag-cta-link-dot-color: var(--denhaag-color-white); + --denhaag-cta-link-icon-size: var(--denhaag-space-block-lg); + --denhaag-description-list-border-color: var(--denhaag-color-grey-2); + --denhaag-description-list-color: var(--denhaag-color-grey-4); + --denhaag-description-list-font-family: var(--denhaag-typography-sans-serif-font-family); + --denhaag-description-list-font-weight: var(--denhaag-typography-weight-regular); + --denhaag-description-list-padding-inline-end: var(--denhaag-space-inline-xs); + --denhaag-description-list-padding-inline-start: var(--denhaag-space-inline-xs); + --denhaag-description-list-caption-color: var(--denhaag-color-black); + --denhaag-description-list-caption-font-family: var(--denhaag-typography-sans-serif-alternate-font-family); + --denhaag-description-list-caption-font-size: var(--denhaag-typography-scale-xl-font-size); + --denhaag-description-list-caption-font-weight: var(--denhaag-typography-weight-bold); + --denhaag-description-list-caption-margin-block-end: var(--denhaag-space-inline-xl); + --denhaag-description-list-detail-padding-block-start: var(--denhaag-space-inline-2xs); + --denhaag-description-list-title-color: var(--denhaag-color-grey-5); + --denhaag-description-list-title-font-weight: var(--denhaag-typography-weight-bold); + --denhaag-description-list-title-padding-block-end: var(--denhaag-space-inline-2xs); + --denhaag-description-list-lg-padding-inline-end: var(--denhaag-space-inline-md); + --denhaag-description-list-lg-padding-inline-start: var(--denhaag-space-inline-md); + --denhaag-description-list-lg-detail-padding-block-end: var(--denhaag-space-inline-md); + --denhaag-description-list-lg-detail-padding-block-start: var(--denhaag-space-inline-md); + --denhaag-description-list-lg-title-padding-block-end: var(--denhaag-space-inline-md); + --denhaag-description-list-lg-title-padding-block-start: var(--denhaag-space-inline-md); + --denhaag-divider-border-color: var(--denhaag-color-grey-2); + --denhaag-dot-indicator-background-color: var(--denhaag-color-red-3); + --denhaag-dot-indicator-border-color: var(--denhaag-color-white); + --denhaag-dot-indicator-border: var(--denhaag-dot-indicator-border-size) solid var(--denhaag-dot-indicator-border-color); + --denhaag-dynamic-content-card-content-color: var(--denhaag-color-grey-4); + --denhaag-dynamic-content-card-content-gap: var(--denhaag-space-inline-lg); + --denhaag-dynamic-content-card-content-padding: var(--denhaag-space-block-md); + --denhaag-dynamic-content-card-gap: var(--denhaag-space-block-md); + --denhaag-dynamic-content-card-caption-font-size: var(--denhaag-typography-scale-base-font-size); + --denhaag-dynamic-content-card-caption-font-weight: var(--denhaag-typography-weight-regular); + --denhaag-dynamic-content-card-caption-line-height: var(--denhaag-typography-scale-base-line-height); + --denhaag-dynamic-content-card-title-color: var(--denhaag-color-grey-5); + --denhaag-dynamic-content-card-title-font-size: var(--denhaag-typography-scale-xl-font-size); + --denhaag-dynamic-content-card-title-font-weight: var(--denhaag-typography-weight-bold); + --denhaag-dynamic-content-card-title-line-height: var(--denhaag-typography-scale-s-line-height); + --denhaag-dynamic-content-padding-block: var(--denhaag-space-inline-2xl); + --denhaag-dynamic-content-icon-color: var(--denhaag-color-blue-3); + --denhaag-dynamic-content-image-background-color: var(--denhaag-color-grey-1); + --denhaag-dynamic-content-image-placeholder-padding-block: var(--denhaag-space-block-xl); + --denhaag-dynamic-content-image-placeholder-padding-inline: var(--denhaag-space-inline-xl); + --denhaag-dynamic-content-list-gap: var(--denhaag-space-inline-md); + --denhaag-dynamic-content-grid-gap: var(--denhaag-space-inline-md); + --denhaag-dynamic-content-row-gap: var(--denhaag-space-block-2xl); + --denhaag-dynamic-content-pagination-padding-block: var(--denhaag-space-block-5xl); + --denhaag-dynamic-content-s-grid-gap: var(--denhaag-space-inline-md); + --denhaag-dynamic-content-m-grid-gap: var(--denhaag-space-inline-xl); + --denhaag-event-date-icon-color: var(--denhaag-color-blue-3); + --denhaag-file-border-color: var(--denhaag-color-grey-2); + --denhaag-file-hover-color: var(--denhaag-color-blue-4); + --denhaag-file-focus-outline-width: var(--denhaag-focus-border-width); + --denhaag-file-focus-outline-style: var(--denhaag-focus-border-style); + --denhaag-file-left-padding-inline-start: var(--denhaag-space-inline-sm); + --denhaag-file-left-padding-inline-end: var(--denhaag-space-inline-sm); + --denhaag-file-left-background-color: var(--denhaag-color-warmgrey-1); + --denhaag-file-right-gap: var(--denhaag-space-inline-xs); + --denhaag-file-right-padding-block-start: var(--denhaag-space-block-sm); + --denhaag-file-right-padding-block-end: var(--denhaag-space-block-sm); + --denhaag-file-right-padding-inline-start: var(--denhaag-space-inline-sm); + --denhaag-file-right-padding-inline-end: var(--denhaag-space-inline-sm); + --denhaag-file-link-color: var(--denhaag-color-blue-3); + --denhaag-file-link-gap: var(--denhaag-space-inline-2xs); + --denhaag-floating-contact-bottom: var(--denhaag-space-block-md); + --denhaag-floating-contact-color: var(--denhaag-color-green-5); + --denhaag-floating-contact-right: var(--denhaag-space-inline-md); + --denhaag-floating-contact-heading-font-family: var(--denhaag-typography-sans-serif-alternate-font-family); + --denhaag-floating-contact-heading-font-size: var(--denhaag-typography-scale-2xl-font-size); + --denhaag-floating-contact-heading-font-weight: var(--denhaag-typography-weight-bold); + --denhaag-floating-contact-heading-line-height: var(--denhaag-typography-scale-base-line-height); + --denhaag-floating-contact-item-gap: var(--denhaag-space-inline-lg); + --denhaag-floating-contact-link-color: var(--denhaag-color-white); + --denhaag-floating-contact-link-font-family: var(--denhaag-typography-sans-serif-font-family); + --denhaag-floating-contact-link-font-size: var(--denhaag-typography-scale-base-font-size); + --denhaag-floating-contact-link-font-weight: var(--denhaag-typography-weight-regular); + --denhaag-floating-contact-link-line-height: var(--denhaag-typography-scale-base-line-height); + --denhaag-floating-contact-link-outline-style: var(--denhaag-focus-border-style); + --denhaag-floating-contact-link-outline-width: var(--denhaag-focus-border-width); + --denhaag-floating-contact-link-hover-font-weight: var(--denhaag-typography-weight-bold); + --denhaag-floating-contact-switch-background-color: var(--denhaag-color-green-1); + --denhaag-floating-contact-switch-border-color: var(--denhaag-color-green-2); + --denhaag-floating-contact-switch-font-family: var(--denhaag-typography-sans-serif-font-family); + --denhaag-floating-contact-switch-font-size: var(--denhaag-typography-scale-base-font-size); + --denhaag-floating-contact-switch-font-weight: var(--denhaag-typography-weight-bold); + --denhaag-floating-contact-switch-padding-block: var(--denhaag-space-block-md); + --denhaag-floating-contact-switch-padding-inline: var(--denhaag-space-inline-md); + --denhaag-floating-contact-switch-icons-background-color: var(--denhaag-color-green-3); + --denhaag-floating-contact-switch-icons-color: var(--denhaag-color-white); + --denhaag-floating-contact-switch-hover-icons-background-color: var(--denhaag-color-green-4); + --denhaag-floating-contact-switch-focus-icons-background-color: var(--denhaag-color-green-4); + --denhaag-floating-contact-overlay-arrow-width: var(--denhaag-space-block-2xl); + --denhaag-floating-contact-overlay-background-color: var(--denhaag-color-green-3); + --denhaag-floating-contact-overlay-color: var(--denhaag-color-green-1); + --denhaag-floating-contact-overlay-padding-block: var(--denhaag-space-block-2xl); + --denhaag-floating-contact-overlay-padding-inline: var(--denhaag-space-inline-xl); + --denhaag-floating-contact-overlay-gap: var(--denhaag-space-inline-xl); + --denhaag-floating-contact-status-offline-background-color: var(--denhaag-color-red-3); + --denhaag-floating-contact-status-offline-border-color: var(--denhaag-color-red-1); + --denhaag-floating-contact-status-online-background-color: var(--denhaag-color-green-3); + --denhaag-floating-contact-status-online-border-color: var(--denhaag-color-green-1); + --denhaag-footer-color: var(--denhaag-color-white); + --denhaag-footer-background-color: var(--denhaag-color-grey-4); + --denhaag-footer-heading-color: var(--denhaag-color-ocher-3); + --denhaag-footer-mega-background-color: var(--denhaag-color-grey-5); + --denhaag-footer-mega-color: var(--denhaag-color-white); + --denhaag-form-field-label-margin-block-end: var(--denhaag-space-block-2xs); + --denhaag-form-field-description-color: var(--denhaag-color-grey-4); + --denhaag-form-field-description-font-size: var(--denhaag-typography-scale-s-font-size); + --denhaag-form-field-description-font-weight: var(--denhaag-typography-weight-regular); + --denhaag-form-field-description-line-height: var(--denhaag-typography-scale-s-line-height); + --denhaag-form-field-description-error-color: var(--denhaag-color-red-3); + --denhaag-form-group-label-color: var(--denhaag-color-blue-5); + --denhaag-form-group-helper-text-color: var(--denhaag-color-grey-4); + --denhaag-form-group-helper-text-size: var(--denhaag-typography-scale-s-font-size); + --denhaag-form-group-helper-text-error-color: var(--denhaag-color-red-3); + --denhaag-form-input-line-height: var(--denhaag-typography-scale-base-line-height); + --denhaag-form-input-icon-font-size: var(--denhaag-typography-scale-lg-font-size); + --denhaag-form-progress-label-color: var(--denhaag-color-grey-4); + --denhaag-form-progress-label-font-weight: var(--denhaag-typography-weight-regular); + --denhaag-form-progress-label-font-size: var(--denhaag-typography-scale-base-font-size); + --denhaag-form-progress-label-font-family: var(--denhaag-typography-sans-serif-font-family); + --denhaag-form-progress-progress-background-color: var(--denhaag-color-grey-2); + --denhaag-form-progress-progress-bar-background-color: var(--denhaag-color-green-3); + --denhaag-header-border-bottom-color: var(--denhaag-color-grey-1); + --denhaag-heading-color: var(--denhaag-color-grey-5); + --denhaag-heading-line-height: var(--denhaag-typography-scale-s-line-height); + --denhaag-hero-background-color: var(--denhaag-color-green-3); + --denhaag-hero-color: var(--denhaag-color-black); + --denhaag-hero-container-gutter: var(--denhaag-space-inline-xs); + --denhaag-hero-container-gutter-s: var(--denhaag-space-inline-md); + --denhaag-hero-container-gutter-m: var(--denhaag-space-inline-xl); + --denhaag-hero-container-gutter-l: var(--denhaag-space-inline-2xl); + --denhaag-hero-container-gutter-xl: var(--denhaag-space-inline-3xl); + --denhaag-hero-container-padding: var(--denhaag-space-inline-xl); + --denhaag-hero-home-content-padding-block-s: var(--denhaag-space-block-3xl); + --denhaag-hero-home-title-color: var(--denhaag-color-white); + --denhaag-hero-home-title-line-height: var(--denhaag-typography-scale-s-line-height); + --denhaag-hero-home-title-font-size-xs: var(--denhaag-typography-scale-2xl-font-size); + --denhaag-hero-home-title-weight: var(--denhaag-typography-weight-regular); + --denhaag-hero-routing-background-color: var(--denhaag-color-ocher-3); + --denhaag-hero-routing-content-padding-block: var(--denhaag-space-block-xl); + --denhaag-hero-routing-content-padding-block-s: var(--denhaag-space-block-3xl); + --denhaag-hero-routing-title-font-size-xs: var(--denhaag-typography-scale-2xl-font-size); + --denhaag-hero-theme-page-content-background-color: var(--denhaag-color-white); + --denhaag-hero-theme-page-content-box-shadow: 0px 1px 0px var(--denhaag-color-grey-2); + --denhaag-hero-theme-page-content-padding-block-s: var(--denhaag-space-block-3xl); + --denhaag-hero-theme-page-content-padding-inline-start: var(--denhaag-space-inline-md); + --denhaag-hero-theme-page-content-padding-inline-end: var(--denhaag-space-inline-md); + --denhaag-hero-theme-page-title-padding-block-end: var(--denhaag-space-block-md); + --denhaag-hero-theme-page-title-font-size-m: var(--denhaag-typography-scale-3xl-font-size); + --denhaag-hero-theme-page-text-font-size: var(--denhaag-typography-scale-lg-font-size); + --denhaag-hero-theme-page-text-font-size-m: var(--denhaag-typography-scale-xl-font-size); + --denhaag-hero-theme-page-text-padding-block-end: var(--denhaag-space-block-2xl); + --denhaag-hero-theme-page-text-line-height: var(--denhaag-typography-scale-s-line-height); + --denhaag-icon-button-color: var(--denhaag-color-grey-4); + --denhaag-icon-button-focus-outline-width: var(--denhaag-focus-border-width); + --denhaag-icon-button-focus-outline-style: var(--denhaag-focus-border-style); + --denhaag-icon-button-hover-color: var(--denhaag-color-green-3); + --denhaag-image-font-family: var(--denhaag-typography-sans-serif-font-family); + --denhaag-image-figcaption-download-color: var(--denhaag-color-blue-3); + --denhaag-image-figcaption-download-hover-color: var(--denhaag-color-blue-4); + --denhaag-image-figcaption-text-color: var(--denhaag-color-grey-4); + --denhaag-image-figcaption-text-font-size: var(--denhaag-typography-scale-s-font-size); + --denhaag-language-switcher-list-item-link-active-color: var(--denhaag-color-green-3); + --denhaag-link-color: var(--denhaag-color-blue-3); + --denhaag-link-focus-color: var(--denhaag-color-blue-4); + --denhaag-link-hover-color: var(--denhaag-color-blue-4); + --denhaag-link-disabled-color: var(--denhaag-color-grey-3); + --denhaag-link-icon-margin-start: var(--denhaag-space-inline-xs); + --denhaag-link-icon-margin-end: var(--denhaag-space-inline-xs); + --denhaag-link-icon-gap: var(--denhaag-space-inline-2xs); + --denhaag-link-small-icon-font-size: var(--denhaag-space-block-xs); + --denhaag-list-font-family: var(--denhaag-typography-sans-serif-font-family); + --denhaag-list-item-secondary-action-color: var(--denhaag-color-grey-5); + --denhaag-list-item-hover-color: var(--denhaag-color-blue-3); + --denhaag-list-item-focus-color: var(--denhaag-color-blue-3); + --denhaag-list-item-active-border-color: var(--denhaag-color-blue-3); + --denhaag-list-item-icon-color: var(--denhaag-color-grey-5); + --denhaag-list-item-text-primary-color: var(--denhaag-color-grey-5); + --denhaag-list-item-text-primary-line-height: var(--denhaag-typography-scale-base-line-height); + --denhaag-list-item-text-secondary-color: var(--denhaag-color-grey-5); + --denhaag-list-item-text-secondary-font-size: var(--denhaag-typography-scale-s-font-size); + --denhaag-list-subheader-line-height: var(--denhaag-typography-scale-base-line-height); + --denhaag-list-subheader-color: var(--denhaag-color-grey-5); + --denhaag-menu-button-active-color: var(--denhaag-color-green-3); + --denhaag-menu-button-active-font-weight: var(--denhaag-typography-weight-bold); + --denhaag-menu-button-color: var(--denhaag-color-grey-4); + --denhaag-menu-button-font-family: var(--denhaag-typography-sans-serif-font-family); + --denhaag-menu-button-font-size: var(--denhaag-typography-scale-base-font-size); + --denhaag-menu-button-font-weight: var(--denhaag-typography-weight-regular); + --denhaag-mobile-menu-list-item-border-bottom: 1px solid var(--denhaag-color-grey-1); + --denhaag-mobile-menu-list-submenu-back-button-icon-color: var(--denhaag-color-blue-3); + --denhaag-modal-background-color: var(--denhaag-color-white); + --denhaag-modal-padding-block: var(--denhaag-space-block-md); + --denhaag-modal-padding-inline: var(--denhaag-space-block-md); + --denhaag-modal-close-color: var(--denhaag-color-green-3); + --denhaag-modal-close-gap: var(--denhaag-space-inline-xs); + --denhaag-modal-close-font-size: var(--denhaag-typography-scale-base-font-size); + --denhaag-modal-close-font-weight: var(--denhaag-typography-weight-semibold); + --denhaag-modal-close-hover-color: var(--denhaag-color-green-4); + --denhaag-modal-header-padding-block: var(--denhaag-space-block-md); + --denhaag-modal-header-padding-inline: var(--denhaag-space-inline-md); + --denhaag-modal-header-border-bottom-color: var(--denhaag-color-grey-2); + --denhaag-modal-title-color: var(--denhaag-color-black); + --denhaag-modal-title-font-family: var(--denhaag-typography-sans-serif-font-family); + --denhaag-modal-title-font-weight: var(--denhaag-typography-weight-semibold); + --denhaag-modal-title-font-size: var(--denhaag-typography-scale-base-font-size); + --denhaag-modal-title-line-height: var(--denhaag-typography-scale-base-line-height); + --denhaag-modal-content-padding-block: var(--denhaag-space-block-xl); + --denhaag-modal-content-padding-inline: var(--denhaag-space-inline-md); + --denhaag-modal-footer-padding-block: var(--denhaag-space-block-md); + --denhaag-modal-footer-padding-inline: var(--denhaag-space-inline-md); + --denhaag-note-color: var(--denhaag-color-grey-4); + --denhaag-note-font-family: var(--denhaag-typography-sans-serif-font-family); + --denhaag-note-icon-color: var(--denhaag-color-grey-4); + --denhaag-note-icon-info-color: var(--denhaag-color-white); + --denhaag-note-icon-warning-color: var(--denhaag-color-white); + --denhaag-note-padding-block: var(--denhaag-space-block-2xs); + --denhaag-note-icon-spacing: var(--denhaag-space-block-xs); + --denhaag-note-icon-end-margin-inline-end: var(--denhaag-space-inline-2xs); + --denhaag-page-buttons-outline-dark-action-background-color: var(--denhaag-color-white); + --denhaag-page-buttons-outline-dark-action-color: var(--denhaag-color-grey-4); + --denhaag-page-buttons-outline-dark-action-border-color: var(--denhaag-color-grey-2); + --denhaag-page-buttons-outline-dark-action-hover-background-color: var(--denhaag-color-white); + --denhaag-page-buttons-outline-dark-action-hover-border-color: var(--denhaag-color-green-3); + --denhaag-page-buttons-outline-dark-action-hover-color: var(--denhaag-color-green-3); + --denhaag-page-buttons-outline-dark-action-disabled-background-color: var(--denhaag-color-white); + --denhaag-page-buttons-outline-dark-action-disabled-border-color: var(--denhaag-color-grey-2); + --denhaag-page-buttons-outline-dark-action-disabled-color: var(--denhaag-color-grey-2); + --denhaag-page-index-background-color: var(--denhaag-color-blue-1); + --denhaag-page-index-padding-block-end: var(--denhaag-space-block-xl); + --denhaag-page-index-padding-block-start: var(--denhaag-space-block-xl); + --denhaag-page-index-padding-inline-end: var(--denhaag-space-inline-xl); + --denhaag-page-index-padding-inline-start: var(--denhaag-space-inline-xl); + --denhaag-page-index-list-margin-block-start: var(--denhaag-space-block-md); + --denhaag-page-header-background-color: var(--denhaag-color-white); + --denhaag-pagination-border-radius: var(--denhaag-border-radius); + --denhaag-pagination-font-size: var(--denhaag-typography-scale-base-font-size); + --denhaag-pagination-font-weight: var(--denhaag-typography-weight-regular); + --denhaag-pagination-size: var(--denhaag-space-block-2xl); + --denhaag-pagination-arrow-font-size: var(--denhaag-typography-scale-s-font-size); + --denhaag-pagination-arrow-size: var(--denhaag-space-block-lg); + --denhaag-pagination-button-color: var(--denhaag-color-grey-4); + --denhaag-pagination-button-hover-color: var(--denhaag-color-green-3); + --denhaag-pagination-button-disabled-color: var(--denhaag-color-grey-2); + --denhaag-pagination-button-current-color: var(--denhaag-color-green-3); + --denhaag-pagination-button-current-font-weight: var(--denhaag-typography-weight-bold); + --denhaag-pagination-button-current-disabled-background-color: var(--denhaag-color-grey-2); + --denhaag-pagination-button-current-disabled-color: var(--denhaag-color-white); + --denhaag-posttypelabel-color: var(--denhaag-color-blue-3); + --denhaag-posttypelabel-font-family: var(--denhaag-typography-sans-serif-font-family); + --denhaag-posttypelabel-font-size: var(--denhaag-typography-scale-s-font-size); + --denhaag-process-steps-font-family: var(--denhaag-typography-sans-serif-font-family); + --denhaag-process-steps-font-size: var(--denhaag-typography-scale-base-font-size); + --denhaag-process-steps-step-heading-color: var(--denhaag-color-grey-4); + --denhaag-process-steps-step-heading-font-size: var(--denhaag-typography-scale-base-font-size); + --denhaag-process-steps-step-heading-font-weight: var(--denhaag-typography-weight-bold); + --denhaag-process-steps-step-heading-line-height: var(--denhaag-typography-scale-base-line-height); + --denhaag-process-steps-step-heading-checked-font-size: var(--denhaag-typography-scale-base-font-size); + --denhaag-process-steps-step-heading-checked-font-weight: var(--denhaag-typography-weight-bold); + --denhaag-process-steps-step-heading-checked-line-height: var(--denhaag-typography-scale-base-line-height); + --denhaag-process-steps-step-heading-current-color: var(--denhaag-color-green-3); + --denhaag-process-steps-step-heading-current-font-size: var(--denhaag-typography-scale-base-font-size); + --denhaag-process-steps-step-heading-current-font-weight: var(--denhaag-typography-weight-bold); + --denhaag-process-steps-step-heading-current-line-height: var(--denhaag-typography-scale-base-line-height); + --denhaag-process-steps-step-heading-warning-color: var(--denhaag-color-orange-5); + --denhaag-process-steps-step-heading-error-color: var(--denhaag-color-red-3); + --denhaag-process-steps-step-content-color: var(--denhaag-color-grey-4); + --denhaag-process-steps-step-meta-nested-margin-block-start: var(--denhaag-space-block-2xs); + --denhaag-radio-background-color: var(--denhaag-color-white); + --denhaag-radio-checked-inner-background-color: var(--denhaag-color-white); + --denhaag-rich-text-best-friend-margin-block-end: var(--denhaag-space-block-xs); + --denhaag-rich-text-friend-margin-block-end: var(--denhaag-space-block-md); + --denhaag-rich-text-acquaintance-margin-block-end: var(--denhaag-space-block-xl); + --denhaag-rich-text-stranger-margin-block-end: var(--denhaag-space-block-2xl); + --denhaag-select-hover-border-width: var(--utrecht-form-control-hover-border-width); + --denhaag-select-focus-border-width: var(--utrecht-form-control-focus-border-width); + --denhaag-sheet-background-color: var(--denhaag-color-white); + --denhaag-sheet-margin-block-start: var(--denhaag-header-border-bottom-width); + --denhaag-sheet-title-font-weight: var(--denhaag-typography-weight-bold); + --denhaag-side-navigation-row-gap: var(--denhaag-space-block-xl); + --denhaag-side-navigation-item-font-family: var(--denhaag-typography-sans-serif-font-family); + --denhaag-side-navigation-item-font-size: var(--denhaag-typography-scale-base-font-size); + --denhaag-side-navigation-item-font-weight: var(--denhaag-typography-weight-regular); + --denhaag-side-navigation-link-label-gap: var(--denhaag-space-inline-xs); + --denhaag-side-navigation-link-color: var(--denhaag-color-grey-4); + --denhaag-side-navigation-link-hover-color: var(--denhaag-color-green-3); + --denhaag-side-navigation-link-active-color: var(--denhaag-color-green-3); + --denhaag-side-navigation-link-active-font-weight: var(--denhaag-typography-weight-bold); + --denhaag-step-marker-font-family: var(--denhaag-typography-sans-serif-font-family); + --denhaag-step-marker-font-size: var(--denhaag-typography-scale-s-font-size); + --denhaag-step-marker-checked-background-color: var(--denhaag-color-white); + --denhaag-step-marker-checked-border-color: var(--denhaag-color-green-3); + --denhaag-step-marker-checked-color: var(--denhaag-color-green-3); + --denhaag-step-marker-current-background-color: var(--denhaag-color-green-3); + --denhaag-step-marker-current-border-color: var(--denhaag-color-green-3); + --denhaag-step-marker-current-color: var(--denhaag-color-white); + --denhaag-step-marker-current-nested-color: var(--denhaag-color-green-3); + --denhaag-step-marker-default-background-color: var(--denhaag-color-grey-2); + --denhaag-step-marker-default-border-color: var(--denhaag-color-grey-2); + --denhaag-step-marker-default-color: var(--denhaag-color-white); + --denhaag-step-marker-default-nested-color: var(--denhaag-color-grey-2); + --denhaag-step-marker-disabled-background-color: var(--denhaag-color-grey-1); + --denhaag-step-marker-disabled-border-color: var(--denhaag-color-grey-1); + --denhaag-step-marker-disabled-color: var(--denhaag-color-grey-4); + --denhaag-step-marker-not-checked-background-color: var(--denhaag-color-white); + --denhaag-step-marker-not-checked-border-color: var(--denhaag-color-grey-2); + --denhaag-step-marker-not-checked-color: var(--denhaag-color-grey-4); + --denhaag-step-marker-warning-background-color: var(--denhaag-color-orange-4); + --denhaag-step-marker-warning-border-color: var(--denhaag-color-orange-4); + --denhaag-step-marker-warning-color: var(--denhaag-color-white); + --denhaag-step-marker-warning-nested-background-color: var(--denhaag-color-white); + --denhaag-step-marker-warning-nested-border-color: var(--denhaag-color-orange-4); + --denhaag-step-marker-error-background-color: var(--denhaag-color-red-3); + --denhaag-step-marker-error-border-color: var(--denhaag-color-red-3); + --denhaag-step-marker-error-color: var(--denhaag-color-white); + --denhaag-step-marker-connector-not-checked-outline-color: var(--denhaag-color-grey-2); + --denhaag-step-marker-connector-checked-outline-color: var(--denhaag-color-green-3); + --denhaag-step-marker-connector-warning-outline-color: var(--denhaag-color-orange-4); + --denhaag-step-marker-connector-error-outline-color: var(--denhaag-color-red-3); + --denhaag-step-marker-connector-default-outline-color: var(--denhaag-color-grey-2); + --denhaag-table-cell-color: var(--denhaag-color-grey-4); + --denhaag-table-cell-font-weight: var(--denhaag-typography-weight-regular); + --denhaag-table-cell-gap: var(--denhaag-space-block-2xs); + --denhaag-table-cell-outline-style: var(--denhaag-focus-border-style); + --denhaag-table-cell-outline-width: var(--denhaag-focus-border-width); + --denhaag-table-cell-sm-padding-block-end: var(--denhaag-space-block-2xs); + --denhaag-table-cell-sm-padding-block-start: var(--denhaag-space-block-2xs); + --denhaag-table-cell-sm-padding-inline-end: var(--denhaag-space-block-xs); + --denhaag-table-cell-sm-padding-inline-start: var(--denhaag-space-block-xs); + --denhaag-table-row-background-color: var(--denhaag-color-white); + --denhaag-table-row-hover-background-color: var(--denhaag-color-warmgrey-1); + --denhaag-table-heading-color: var(--denhaag-color-grey-5); + --denhaag-table-container-shadow-width: var(--denhaag-space-inline-5xl); + --denhaag-tabs-border-color: var(--denhaag-color-grey-2); + --denhaag-tabs-tab-background-color: var(--denhaag-color-white); + --denhaag-tabs-tab-color: var(--denhaag-color-grey-4); + --denhaag-tabs-tab-font-weight: var(--denhaag-typography-weight-regular); + --denhaag-tabs-tab-font-size: var(--denhaag-typography-scale-base-font-size); + --denhaag-tabs-tab-font-family: var(--denhaag-typography-sans-serif-font-family); + --denhaag-tabs-tab-padding-block-start: var(--denhaag-space-block-xs); + --denhaag-tabs-tab-padding-block-end: var(--denhaag-space-block-xs); + --denhaag-tabs-tab-padding-inline-start: var(--denhaag-space-inline-md); + --denhaag-tabs-tab-padding-inline-end: var(--denhaag-space-inline-md); + --denhaag-tabs-tab-selected-font-weight: var(--denhaag-typography-weight-bold); + --denhaag-tabs-tab-selected-color: var(--denhaag-color-green-3); + --denhaag-tabs-tab-hover-color: var(--denhaag-color-green-3); + --denhaag-tabs-tab-focus-color: var(--denhaag-color-green-3); + --denhaag-tabs-tab-indicator-border-color: var(--denhaag-color-green-3); + --denhaag-timeline-font-family: var(--denhaag-typography-sans-serif-font-family); + --denhaag-timeline-font-size: var(--denhaag-typography-scale-base-font-size); + --denhaag-timeline-step-icon-color: var(--denhaag-color-grey-3); + --denhaag-timeline-step-icon-completed-color: var(--denhaag-color-green-3); + --denhaag-timeline-step-icon-active-color: var(--denhaag-color-blue-3); + --denhaag-timeline-step-icon-disabled-color: var(--denhaag-color-grey-2); + --denhaag-timeline-step-icon-text-active-color: var(--denhaag-color-white); + --denhaag-timeline-step-label-completed-hover-color: var(--denhaag-color-blue-3); + --denhaag-timeline-step-label-active-color: var(--denhaag-color-blue-3); + --denhaag-timeline-step-label-disabled-color: var(--denhaag-color-grey-2); + --denhaag-timeline-step-content-color: var(--denhaag-color-grey-4); + --denhaag-timeline-step-icon-text-font-size: var(--denhaag-typography-scale-s-font-size); + --denhaag-unordered-list-color: var(--denhaag-color-grey-4); + --denhaag-unordered-list-paragraph-margin-block-start: var(--denhaag-space-block-md); + --denhaag-unordered-list-lead-margin-block-start: var(--denhaag-space-block-2xl); + --denhaag-unordered-list-list-item-font-weight: var(--denhaag-typography-weight-regular); + --nl-data-badge-background-color: var(--denhaag-color-grey-1); + --nl-data-badge-border-radius: var(--denhaag-border-radius); + --nl-data-badge-color: var(--denhaag-color-grey-5); + --nl-data-badge-font-family: var(--denhaag-typography-sans-serif-font-family); + --nl-data-badge-font-size: var(--denhaag-typography-scale-s-font-size); + --nl-data-badge-font-weight: var(--denhaag-typography-weight-semibold); + --nl-data-badge-line-height: var(--denhaag-typography-scale-base-line-height); + --nl-data-badge-neutral-background-color: var(--denhaag-color-blue-1); + --nl-data-badge-neutral-color: var(--denhaag-color-blue-4); + --nl-data-badge-success-background-color: var(--denhaag-color-green-1); + --nl-data-badge-success-color: var(--denhaag-color-green-4); + --nl-data-badge-warning-background-color: var(--denhaag-color-orange-1); + --nl-data-badge-warning-color: var(--denhaag-color-orange-5); + --nl-data-badge-error-background-color: var(--denhaag-color-red-1); + --nl-data-badge-error-color: var(--denhaag-color-red-4); + --nl-heading-level-1-font-family: var(--denhaag-typography-sans-serif-alternate-font-family); + --nl-heading-level-1-font-size: var(--denhaag-typography-scale-3xl-font-size); + --nl-heading-level-1-line-height: var(--denhaag-typography-scale-3xl-line-height); + --nl-heading-level-2-font-family: var(--denhaag-typography-sans-serif-alternate-font-family); + --nl-heading-level-2-font-size: var(--denhaag-typography-scale-2xl-font-size); + --nl-heading-level-2-line-height: var(--denhaag-typography-scale-2xl-line-height); + --nl-heading-level-3-font-family: var(--denhaag-typography-sans-serif-alternate-font-family); + --nl-heading-level-3-font-size: var(--denhaag-typography-scale-xl-font-size); + --nl-heading-level-3-line-height: var(--denhaag-typography-scale-xl-line-height); + --nl-heading-level-4-font-family: var(--denhaag-typography-sans-serif-alternate-font-family); + --nl-heading-level-4-font-size: var(--denhaag-typography-scale-lg-font-size); + --nl-heading-level-4-line-height: var(--denhaag-typography-scale-lg-line-height); + --nl-heading-level-5-font-family: var(--denhaag-typography-sans-serif-alternate-font-family); + --nl-heading-level-5-font-size: var(--denhaag-typography-scale-base-font-size); + --nl-heading-level-5-line-height: var(--denhaag-typography-scale-base-line-height); + --nl-heading-level-6-font-family: var(--denhaag-typography-sans-serif-alternate-font-family); + --nl-heading-level-6-font-size: var(--denhaag-typography-scale-s-font-size); + --nl-heading-level-6-line-height: var(--denhaag-typography-scale-s-line-height); + --nl-link-color: var(--denhaag-color-blue-3); + --nl-link-disabled-color: var(--denhaag-color-grey-3); + --nl-link-focus-visible-color: var(--denhaag-color-blue-4); + --nl-link-hover-color: var(--denhaag-color-blue-4); + --nl-number-badge-background-color: var(--denhaag-color-blue-1); + --nl-number-badge-color: var(--denhaag-color-blue-4); + --nl-number-badge-font-family: var(--denhaag-typography-sans-serif-font-family); + --nl-number-badge-font-size: var(--denhaag-typography-scale-s-font-size); + --nl-number-badge-font-weight: var(--denhaag-typography-weight-bold); + --nl-paragraph-font-family: var(--denhaag-typography-sans-serif-font-family); + --nl-paragraph-font-size: var(--denhaag-typography-scale-base-font-size); + --nl-paragraph-font-weight: var(--denhaag-typography-weight-regular); + --nl-paragraph-line-height: var(--denhaag-typography-scale-base-line-height); + --nl-paragraph-lead-font-size: var(--denhaag-typography-scale-lg-font-size); + --nl-paragraph-lead-line-height: var(--denhaag-typography-scale-lg-line-height); + --of-alert-error-bg: var(--denhaag-color-red-1); + --of-alert-warning-bg: var(--denhaag-color-orange-1); + --of-alert-info-bg: var(--denhaag-color-blue-1); + --of-button-primary-bg: var(--denhaag-color-green-3); + --of-button-primary-fg: var(--denhaag-color-white); + --of-button-primary-active-bg: var(--denhaag-color-green-4); + --of-button-primary-active-fg: var(--denhaag-color-white); + --of-button-primary-active-color-border: var(--denhaag-color-ocher-5); + --of-button-primary-hover-bg: var(--denhaag-color-green-4); + --of-button-primary-hover-color-border: var(--denhaag-color-ocher-5); + --of-checkbox-bg: var(--denhaag-color-white); + --of-field-border-color: var(--denhaag-color-grey-3); + --of-helptext-bg: var(--denhaag-color-blue-1); + --of-layout-background: var(--denhaag-color-white); + --of-layout-bg: var(--denhaag-color-white); + --of-page-footer-bg: var(--denhaag-color-grey-5); + --of-page-header-bg: var(--denhaag-color-white); + --utrecht-alert-background-color: var(--denhaag-color-blue-1); + --utrecht-alert-color: var(--denhaag-color-blue-5); + --utrecht-alert-warning-background-color: var(--denhaag-color-orange-1); + --utrecht-alert-warning-color: var(--denhaag-color-orange-5); + --utrecht-alert-error-background-color: var(--denhaag-color-red-1); + --utrecht-alert-error-color: var(--denhaag-color-red-5); + --utrecht-alert-ok-background-color: var(--denhaag-color-green-1); + --utrecht-alert-ok-color: var(--denhaag-color-green-5); + --utrecht-alert-icon-color: var(--denhaag-color-blue-3); + --utrecht-alert-icon-error-color: var(--denhaag-color-red-3); + --utrecht-alert-icon-warning-color: var(--denhaag-color-orange-3); + --utrecht-alert-icon-ok-color: var(--denhaag-color-green-3); + --utrecht-badge-counter-background-color: var(--denhaag-color-blue-1); + --utrecht-badge-counter-color: var(--denhaag-color-blue-4); + --utrecht-badge-counter-font-family: var(--denhaag-typography-sans-serif-font-family); + --utrecht-badge-counter-font-size: var(--denhaag-typography-scale-s-font-size); + --utrecht-badge-background-color: var(--denhaag-color-grey-1); + --utrecht-badge-color: var(--denhaag-color-grey-5); + --utrecht-badge-border-radius: var(--denhaag-border-radius); + --utrecht-badge-font-family: var(--denhaag-typography-sans-serif-font-family); + --utrecht-badge-font-weight: var(--denhaag-typography-weight-semibold); + --utrecht-badge-font-size: var(--denhaag-typography-scale-s-font-size); + --utrecht-badge-line-height: var(--denhaag-typography-scale-base-line-height); + --utrecht-breadcrumb-nav-font-size: var(--denhaag-typography-scale-base-font-size); + --utrecht-breadcrumb-nav-link-color: var(--denhaag-color-blue-3); + --utrecht-breadcrumb-nav-link-focus-color: var(--denhaag-color-blue-4); + --utrecht-breadcrumb-nav-link-hover-color: var(--denhaag-color-blue-4); + --utrecht-button-background-color: var(--denhaag-color-green-3); + --utrecht-button-border-radius: var(--denhaag-border-radius); + --utrecht-button-color: var(--denhaag-color-white); + --utrecht-button-font-family: var(--denhaag-typography-sans-serif-font-family); + --utrecht-button-padding-block-start: var(--denhaag-space-block-xs); + --utrecht-button-padding-block-end: var(--denhaag-space-block-xs); + --utrecht-button-padding-inline-start: var(--denhaag-space-inline-md); + --utrecht-button-padding-inline-end: var(--denhaag-space-inline-md); + --utrecht-button-disabled-background-color: var(--denhaag-color-grey-2); + --utrecht-button-disabled-color: var(--denhaag-color-grey-4); + --utrecht-button-focus-background-color: var(--denhaag-color-green-4); + --utrecht-button-hover-background-color: var(--denhaag-color-green-4); + --utrecht-button-primary-action-background-color: var(--denhaag-color-green-3); + --utrecht-button-primary-action-disabled-background-color: var(--denhaag-color-grey-2); + --utrecht-button-primary-action-disabled-color: var(--denhaag-color-grey-4); + --utrecht-button-primary-action-hover-background-color: var(--denhaag-color-green-4); + --utrecht-button-primary-action-focus-background-color: var(--denhaag-color-green-4); + --utrecht-button-secondary-action-background-color: var(--denhaag-color-white); + --utrecht-button-secondary-action-border-color: var(--denhaag-color-green-3); + --utrecht-button-secondary-action-color: var(--denhaag-color-green-3); + --utrecht-button-secondary-action-disabled-border-color: var(--denhaag-color-grey-2); + --utrecht-button-secondary-action-disabled-color: var(--denhaag-color-grey-4); + --utrecht-button-secondary-action-hover-border-color: var(--denhaag-color-green-4); + --utrecht-button-secondary-action-hover-color: var(--denhaag-color-green-4); + --utrecht-button-secondary-action-focus-border-color: var(--denhaag-color-green-4); + --utrecht-button-secondary-action-focus-color: var(--denhaag-color-green-4); + --utrecht-checkbox-border-width: var(--utrecht-form-control-border-width); + --utrecht-checkbox-color: var(--denhaag-color-white); + --utrecht-checkbox-margin-inline-end: var(--denhaag-size-3xs); + --utrecht-checkbox-size: var(--denhaag-size-xs); + --utrecht-checkbox-icon-size: var(--denhaag-size-xs); + --utrecht-checkbox-active-border-width: var(--utrecht-form-control-active-border-width); + --utrecht-checkbox-hover-border-width: var(--utrecht-form-control-hover-border-width); + --utrecht-checkbox-focus-border-width: var(--utrecht-form-control-focus-border-width); + --utrecht-checkbox-disabled-border-width: var(--utrecht-form-control-border-width); + --utrecht-checkbox-checked-border-width: var(--utrecht-form-control-checked-border-width); + --utrecht-checkbox-invalid-border-width: var(--utrecht-form-control-invalid-border-width); + --utrecht-data-list-item-key-color: var(--denhaag-color-grey-4); + --utrecht-form-field-description-color: var(--denhaag-color-grey-4); + --utrecht-form-field-description-margin-block-end: var(--denhaag-size-3xs); + --utrecht-form-field-description-invalid-color: var(--denhaag-color-red-3); + --utrecht-form-field-error-message-margin-block-start: var(--denhaag-size-3xs); + --utrecht-form-field-margin-block-start: var(--denhaag-space-block-lg); + --utrecht-form-field-margin-block-end: var(--denhaag-space-block-lg); + --utrecht-form-field-label-margin-block-end: var(--denhaag-space-block-2xs); + --utrecht-form-fieldset-legend-color: var(--denhaag-color-grey-5); + --utrecht-form-fieldset-legend-font-family: var(--denhaag-typography-sans-serif-alternate-font-family); + --utrecht-form-fieldset-legend-font-size: var(--denhaag-typography-scale-base-font-size); + --utrecht-form-fieldset-legend-font-weight: var(--denhaag-typography-weight-bold); + --utrecht-form-fieldset-legend-line-height: var(--denhaag-typography-scale-base-line-height); + --utrecht-form-label-color: var(--denhaag-color-grey-4); + --utrecht-form-label-font-weight: var(--denhaag-typography-weight-bold); + --utrecht-form-label-checkbox-color: var(--denhaag-color-grey-4); + --utrecht-form-label-radio-color: var(--denhaag-color-grey-4); + --utrecht-form-toggle-accent-color: var(--denhaag-color-grey-3); + --utrecht-form-toggle-border-color: var(--denhaag-color-grey-3); + --utrecht-form-toggle-color: var(--denhaag-color-white); + --utrecht-form-toggle-checked-accent-color: var(--denhaag-color-green-3); + --utrecht-form-toggle-focus-border-style: var(--denhaag-focus-border-style); + --utrecht-form-toggle-focus-border-width: var(--denhaag-focus-border-width); + --utrecht-heading-1-font-size: var(--denhaag-typography-scale-3xl-font-size); + --utrecht-heading-1-line-height: var(--denhaag-typography-scale-3xl-line-height); + --utrecht-heading-2-font-size: var(--denhaag-typography-scale-2xl-font-size); + --utrecht-heading-2-line-height: var(--denhaag-typography-scale-2xl-line-height); + --utrecht-heading-3-font-size: var(--denhaag-typography-scale-xl-font-size); + --utrecht-heading-3-line-height: var(--denhaag-typography-scale-xl-line-height); + --utrecht-heading-4-font-size: var(--denhaag-typography-scale-lg-font-size); + --utrecht-heading-4-line-height: var(--denhaag-typography-scale-lg-line-height); + --utrecht-heading-5-font-size: var(--denhaag-typography-scale-base-font-size); + --utrecht-heading-5-line-height: var(--denhaag-typography-scale-base-line-height); + --utrecht-heading-font-family: var(--denhaag-typography-sans-serif-alternate-font-family); + --utrecht-heading-font-weight: var(--denhaag-typography-weight-bold); + --utrecht-link-list-margin-block-start: var(--denhaag-space-block-xs); + --utrecht-link-list-margin-block-end: var(--denhaag-space-block-xs); + --utrecht-link-list-row-gap: var(--denhaag-space-block-xs); + --utrecht-link-social-color: var(--denhaag-color-white); + --utrecht-link-social-hover-color: var(--denhaag-color-ocher-2); + --utrecht-link-color: var(--denhaag-color-blue-3); + --utrecht-link-active-color: var(--denhaag-color-blue-5); + --utrecht-link-focus-color: var(--denhaag-color-blue-4); + --utrecht-link-hover-color: var(--denhaag-color-blue-4); + --utrecht-link-visited-color: var(--denhaag-color-blue-3); + --utrecht-ordered-list-padding-inline-start: var(--denhaag-space-inline-xl); + --utrecht-ordered-list-item-margin-block-start: var(--denhaag-space-block-2xs); + --utrecht-ordered-list-item-margin-block-end: var(--denhaag-space-block-2xs); + --utrecht-page-footer-color: var(--denhaag-color-white); + --utrecht-page-footer-background-color: var(--denhaag-color-grey-4); + --utrecht-paragraph-font-family: var(--denhaag-typography-sans-serif-font-family); + --utrecht-paragraph-font-size: var(--denhaag-typography-scale-base-font-size); + --utrecht-paragraph-font-weight: var(--denhaag-typography-weight-regular); + --utrecht-paragraph-line-height: var(--denhaag-typography-scale-base-line-height); + --utrecht-paragraph-lead-font-size: var(--denhaag-typography-scale-lg-font-size); + --utrecht-paragraph-lead-list-margin-block-start: var(--denhaag-space-block-2xl); + --utrecht-paragraph-lead-paragraph-margin-block-start: var(--denhaag-space-block-2xl); + --utrecht-paragraph-list-margin-block-start: var(--denhaag-space-block-xl); + --utrecht-radio-button-border-width: var(--utrecht-form-control-border-width); + --utrecht-radio-button-active-border-width: var(--utrecht-form-control-active-border-width); + --utrecht-radio-button-checked-border-width: var(--utrecht-form-control-checked-border-width); + --utrecht-radio-button-checked-active-border-color: var(--denhaag-color-green-5); + --utrecht-radio-button-checked-active-border-width: var(--utrecht-form-control-checked-border-width); + --utrecht-radio-button-checked-active-background-color: var(--denhaag-color-green-5); + --utrecht-radio-button-checked-hover-border-color: var(--denhaag-color-green-4); + --utrecht-radio-button-checked-hover-border-width: var(--utrecht-form-control-checked-border-width); + --utrecht-radio-button-checked-hover-background-color: var(--denhaag-color-green-4); + --utrecht-radio-button-checked-focus-border-width: var(--utrecht-form-control-checked-border-width); + --utrecht-radio-button-checked-focus-background-color: var(--denhaag-color-green-4); + --utrecht-radio-button-hover-border-width: var(--utrecht-form-control-hover-border-width); + --utrecht-radio-button-focus-border-width: var(--utrecht-form-control-focus-border-width); + --utrecht-radio-button-disabled-border-width: var(--utrecht-form-control-border-width); + --utrecht-radio-button-invalid-border-width: var(--utrecht-form-control-invalid-border-width); + --utrecht-select-border-radius: var(--denhaag-border-radius); + --utrecht-select-border-width: var(--utrecht-form-control-border-width); + --utrecht-select-padding-block-end: var(--denhaag-space-block-sm); + --utrecht-select-padding-block-start: var(--denhaag-space-block-sm); + --utrecht-select-padding-inline-end: var(--denhaag-space-inline-sm); + --utrecht-select-padding-inline-start: var(--denhaag-space-inline-sm); + --utrecht-select-invalid-border-width: var(--utrecht-form-control-invalid-border-width); + --utrecht-separator-color: var(--denhaag-color-grey-2); + --utrecht-table-border-color: var(--denhaag-color-grey-2); + --utrecht-table-caption-font-family: var(--denhaag-typography-sans-serif-font-family); + --utrecht-table-caption-font-size: var(--denhaag-typography-scale-xl-font-size); + --utrecht-table-caption-color: var(--denhaag-color-black); + --utrecht-table-caption-line-height: var(--denhaag-typography-scale-s-line-height); + --utrecht-table-caption-margin-block-end: var(--denhaag-space-block-xl); + --utrecht-table-header-border-block-end-color: var(--denhaag-color-grey-1); + --utrecht-table-header-cell-color: var(--denhaag-color-green-3); + --utrecht-table-cell-line-height: var(--denhaag-typography-scale-base-line-height); + --utrecht-table-cell-padding-block-end: var(--denhaag-space-block-md); + --utrecht-table-cell-padding-block-start: var(--denhaag-space-block-md); + --utrecht-table-cell-padding-inline-end: var(--denhaag-space-inline-md); + --utrecht-table-cell-padding-inline-start: var(--denhaag-space-inline-md); + --utrecht-table-row-border-block-end-color: var(--denhaag-color-grey-1); + --utrecht-table-row-padding-inline-end: var(--denhaag-space-inline-xl); + --utrecht-table-row-padding-inline-start: var(--denhaag-space-inline-xl); + --utrecht-textbox-border-color: var(--denhaag-color-grey-3); + --utrecht-textbox-color: var(--denhaag-color-grey-4); + --utrecht-textbox-font-family: var(--denhaag-typography-sans-serif-font-family); + --utrecht-textbox-font-size: var(--denhaag-typography-scale-base-font-size); + --utrecht-textbox-line-height: var(--denhaag-typography-scale-base-line-height); + --utrecht-textbox-disabled-background-color: var(--denhaag-color-grey-1); + --utrecht-textbox-focus-border-width: var(--utrecht-form-control-focus-border-width); + --utrecht-textbox-invalid-border-color: var(--denhaag-color-red-3); + --utrecht-textbox-invalid-border-width: var(--utrecht-form-control-invalid-border-width); + --utrecht-textbox-invalid-border-bottom-width: var(--utrecht-form-control-invalid-border-width); + --utrecht-textarea-border-color: var(--denhaag-color-grey-3); + --utrecht-textarea-color: var(--denhaag-color-grey-4); + --utrecht-textarea-font-family: var(--denhaag-typography-sans-serif-font-family); + --utrecht-textarea-font-size: var(--denhaag-typography-scale-base-font-size); + --utrecht-textarea-line-height: var(--denhaag-typography-scale-base-line-height); + --utrecht-textarea-focus-border-width: var(--utrecht-form-control-focus-border-width); + --utrecht-textarea-invalid-border-width: var(--utrecht-form-control-invalid-border-width); + --utrecht-textarea-invalid-border-bottom-width: var(--utrecht-form-control-invalid-border-width); + --utrecht-unordered-list-item-margin-block-start: var(--denhaag-space-block-2xs); + --utrecht-unordered-list-item-margin-block-end: var(--denhaag-space-block-2xs); + --utrecht-unordered-list-item-padding-inline-start: var(--denhaag-space-inline-xl); + --denhaag-action-single-focus-outline-color: var(--denhaag-focus-border-color); + --denhaag-button-focus-border-color: var(--denhaag-focus-border-color); + --denhaag-file-focus-outline-color: var(--denhaag-focus-border-color); + --denhaag-anchor-collapse-summary-focus-outline: var(--denhaag-focus-border); + --denhaag-anchor-navigation-link-outline: var(--denhaag-focus-border); + --denhaag-breadcrumb-link-focus-outline: var(--denhaag-focus-border); + --denhaag-button-medium-size-padding-block: var(--denhaag-button-padding-block); + --denhaag-button-medium-size-padding-inline: var(--denhaag-button-padding-inline); + --denhaag-card-authentication-title-font-size: var(--utrecht-heading-3-font-size); + --denhaag-card-authentication-title-font-weight: var(--utrecht-heading-font-weight); + --denhaag-cta-download-focus-outline: var(--denhaag-focus-border); + --denhaag-cta-event-focus-outline: var(--denhaag-focus-border); + --denhaag-cta-link-focus-outline: var(--denhaag-focus-border); + --denhaag-dynamic-content-focus-outline: var(--denhaag-focus-border); + --denhaag-floating-contact-switch-outline: var(--denhaag-focus-border); + --denhaag-form-field-description-font-family: var(--utrecht-document-font-family); + --denhaag-icon-button-focus-outline-color: var(--denhaag-focus-border-color); + --denhaag-image-figcaption-download-outline: var(--denhaag-focus-border); + --denhaag-language-switcher-list-item-link-active-font-weight: var(--utrecht-heading-font-weight); + --denhaag-link-focus-outline: var(--denhaag-focus-border); + --denhaag-menu-button-hover-color: var(--denhaag-menu-button-active-color); + --denhaag-menu-button-chevron-active-color: var(--denhaag-menu-button-active-color); + --denhaag-radio-size: var(--utrecht-checkbox-size); + --denhaag-radio-border-width: var(--utrecht-checkbox-border-width); + --denhaag-radio-checked-invalid-background-color: var(--denhaag-checkbox-checked-invalid-background-color); + --denhaag-radio-checked-disabled-background-color: var(--denhaag-checkbox-checked-disabled-background-color); + --denhaag-radio-checked-disabled-border-color: var(--denhaag-checkbox-checked-disabled-border-color); + --denhaag-radio-hover-border-color: var(--denhaag-checkbox-hover-border-color); + --denhaag-radio-hover-checked-background-color: var(--denhaag-checkbox-hover-checked-background-color); + --denhaag-radio-hover-checked-border-color: var(--denhaag-checkbox-hover-checked-border-color); + --denhaag-radio-hover-invalid-background-color: var(--denhaag-checkbox-hover-invalid-background-color); + --denhaag-radio-hover-invalid-border-color: var(--denhaag-checkbox-hover-invalid-border-color); + --denhaag-select-hover-background-color: var(--utrecht-form-control-hover-background-color); + --denhaag-select-hover-border-color: var(--utrecht-form-control-hover-border-color); + --denhaag-select-hover-color: var(--utrecht-form-control-hover-color); + --denhaag-table-cell-outline-color: var(--denhaag-focus-border-color); + --denhaag-timeline-step-outline: var(--denhaag-focus-border); + --of-button-anchor-fg: var(--denhaag-link-color); + --of-link-color: var(--denhaag-link-color); + --utrecht-checkbox-background-color: var(--utrecht-form-control-background-color); + --utrecht-checkbox-border-color: var(--utrecht-form-control-border-color); + --utrecht-checkbox-border-radius: var(--utrecht-form-control-border-radius); + --utrecht-checkbox-active-border-color: var(--utrecht-form-control-active-border-color); + --utrecht-checkbox-active-background-color: var(--utrecht-form-control-active-background-color); + --utrecht-checkbox-active-color: var(--utrecht-form-control-active-color); + --utrecht-checkbox-hover-border-color: var(--utrecht-form-control-hover-border-color); + --utrecht-checkbox-hover-background-color: var(--utrecht-form-control-hover-background-color); + --utrecht-checkbox-hover-color: var(--utrecht-form-control-hover-color); + --utrecht-checkbox-focus-border-color: var(--utrecht-form-control-focus-border-color); + --utrecht-checkbox-focus-background-color: var(--utrecht-form-control-focus-background-color); + --utrecht-checkbox-focus-color: var(--utrecht-form-control-focus-color); + --utrecht-checkbox-disabled-border-color: var(--utrecht-form-control-disabled-border-color); + --utrecht-checkbox-disabled-background-color: var(--utrecht-form-control-disabled-background-color); + --utrecht-checkbox-disabled-color: var(--utrecht-form-control-disabled-color); + --utrecht-checkbox-checked-border-color: var(--utrecht-form-control-checked-border-color); + --utrecht-checkbox-checked-background-color: var(--utrecht-form-control-checked-background-color); + --utrecht-checkbox-checked-color: var(--utrecht-form-control-checked-color); + --utrecht-checkbox-invalid-border-color: var(--utrecht-form-control-invalid-border-color); + --utrecht-checkbox-invalid-background-color: var(--utrecht-form-control-invalid-background-color); + --utrecht-checkbox-invalid-color: var(--utrecht-form-control-invalid-color); + --utrecht-form-field-description-font-family: var(--utrecht-document-font-family); + --utrecht-form-field-description-font-size: var(--utrecht-document-font-size); + --utrecht-form-field-error-message-color: var(--utrecht-form-control-invalid-color); + --utrecht-form-field-error-message-font-family: var(--utrecht-document-font-family); + --utrecht-form-field-error-message-font-size: var(--utrecht-document-font-size); + --utrecht-form-field-error-message-font-weight: var(--utrecht-document-font-weight); + --utrecht-form-label-font-size: var(--utrecht-document-font-size); + --utrecht-form-toggle-focus-border-color: var(--denhaag-focus-border-color); + --utrecht-heading-1-font-family: var(--utrecht-heading-font-family); + --utrecht-heading-2-font-family: var(--utrecht-heading-font-family); + --utrecht-heading-3-font-family: var(--utrecht-heading-font-family); + --utrecht-heading-4-font-family: var(--utrecht-heading-font-family); + --utrecht-heading-5-font-family: var(--utrecht-heading-font-family); + --utrecht-heading-color: var(--denhaag-heading-color); + --utrecht-ordered-list-font-size: var(--utrecht-document-font-size); + --utrecht-ordered-list-line-height: var(--utrecht-document-line-height); + --utrecht-radio-button-background-color: var(--utrecht-form-control-background-color); + --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color); + --utrecht-radio-button-active-border-color: var(--utrecht-form-control-active-border-color); + --utrecht-radio-button-active-background-color: var(--utrecht-form-control-active-background-color); + --utrecht-radio-button-active-color: var(--utrecht-form-control-active-color); + --utrecht-radio-button-checked-border-color: var(--utrecht-form-control-checked-border-color); + --utrecht-radio-button-checked-background-color: var(--utrecht-form-control-checked-background-color); + --utrecht-radio-button-checked-color: var(--utrecht-form-control-checked-color); + --utrecht-radio-button-checked-active-color: var(--utrecht-form-control-checked-color); + --utrecht-radio-button-checked-hover-color: var(--utrecht-form-control-checked-color); + --utrecht-radio-button-checked-focus-border-color: var(--utrecht-form-control-checked-border-color); + --utrecht-radio-button-checked-focus-color: var(--utrecht-form-control-checked-color); + --utrecht-radio-button-hover-border-color: var(--utrecht-form-control-hover-border-color); + --utrecht-radio-button-hover-background-color: var(--utrecht-form-control-hover-background-color); + --utrecht-radio-button-focus-background-color: var(--utrecht-form-control-focus-background-color); + --utrecht-radio-button-focus-border-color: var(--utrecht-form-control-focus-border-color); + --utrecht-radio-button-focus-color: var(--utrecht-form-control-focus-color); + --utrecht-radio-button-disabled-border-color: var(--utrecht-form-control-disabled-border-color); + --utrecht-radio-button-disabled-background-color: var(--utrecht-form-control-disabled-background-color); + --utrecht-radio-button-disabled-color: var(--utrecht-form-control-disabled-color); + --utrecht-radio-button-invalid-border-color: var(--utrecht-form-control-invalid-border-color); + --utrecht-radio-button-invalid-background-color: var(--utrecht-form-control-invalid-background-color); + --utrecht-radio-button-invalid-color: var(--utrecht-form-control-invalid-color); + --utrecht-select-background-color: var(--utrecht-form-control-background-color); + --utrecht-select-border-color: var(--utrecht-form-control-border-color); + --utrecht-select-color: var(--utrecht-form-control-color); + --utrecht-select-font-family: var(--utrecht-document-font-family); + --utrecht-select-font-size: var(--utrecht-document-font-size); + --utrecht-select-disabled-background-color: var(--utrecht-form-control-disabled-background-color); + --utrecht-select-disabled-border-color: var(--utrecht-form-control-disabled-border-color); + --utrecht-select-disabled-color: var(--utrecht-form-control-disabled-color); + --utrecht-select-focus-background-color: var(--utrecht-form-control-focus-background-color); + --utrecht-select-focus-border-color: var(--utrecht-form-control-focus-border-color); + --utrecht-select-focus-color: var(--utrecht-form-control-focus-color); + --utrecht-select-invalid-background-color: var(--utrecht-form-control-invalid-background-color); + --utrecht-select-invalid-border-color: var(--utrecht-form-control-invalid-border-color); + --utrecht-textbox-focus-background-color: var(--utrecht-form-control-focus-background-color); + --utrecht-textbox-focus-border-color: var(--utrecht-form-control-focus-border-color); + --utrecht-textbox-focus-color: var(--utrecht-form-control-focus-color); + --utrecht-textarea-disabled-border-color: var(--utrecht-form-control-disabled-border-color); + --utrecht-textarea-disabled-background-color: var(--utrecht-form-control-disabled-background-color); + --utrecht-textarea-disabled-color: var(--utrecht-form-control-disabled-color); + --utrecht-textarea-focus-background-color: var(--utrecht-form-control-focus-background-color); + --utrecht-textarea-focus-border-color: var(--utrecht-form-control-focus-border-color); + --utrecht-textarea-focus-color: var(--utrecht-form-control-focus-color); + --utrecht-textarea-invalid-background-color: var(--utrecht-form-control-invalid-background-color); + --utrecht-textarea-invalid-border-color: var(--utrecht-form-control-invalid-border-color); + --utrecht-textarea-invalid-color: var(--utrecht-form-control-invalid-color); + --utrecht-unordered-list-font-size: var(--utrecht-document-font-size); + --utrecht-unordered-list-line-height: var(--utrecht-document-line-height); + --denhaag-card-news-outline: var(--denhaag-link-focus-outline); + --denhaag-menu-button-chevron-hover-color: var(--denhaag-menu-button-chevron-active-color); + --denhaag-radio-border-color: var(--utrecht-checkbox-border-color); + --denhaag-radio-checked-background-color: var(--utrecht-checkbox-checked-background-color); + --denhaag-radio-checked-border-color: var(--utrecht-checkbox-checked-border-color); + --denhaag-radio-invalid-border-color: var(--utrecht-checkbox-invalid-border-color); + --denhaag-radio-disabled-background-color: var(--utrecht-checkbox-disabled-background-color); + --denhaag-radio-disabled-border-color: var(--utrecht-checkbox-disabled-border-color); - /* Background colors - for hover states and dark variants. */ - /* Main background managed by Nextcloud theming system. */ - --nldesign-color-background-hover: #f5f5f5; - --nldesign-color-background-dark: #e8e8e8; - --nldesign-color-background-darker: #d4d4d4; + /* --- C. shared role layer, ramp re-pointed (fills only what B omits) --- */ + --vng-color-blue-500: #032d4f; + --vng-color-blue-400: #094b81; + --vng-color-blue-300: #1260a1; + --vng-color-blue-200: #abcced; + --vng-color-blue-100: #dbecfa; + --vng-color-red-400: #a30500; + --vng-color-red-300: #cf1b07; + --vng-color-red-200: #ed8b82; + --vng-color-red-100: #ffd9d6; + --vng-color-green-400: #1e6c35; + --vng-color-green-300: #238541; + --vng-color-green-200: #7eb67c; + --vng-color-green-100: #d5e7d5; + --vng-color-orange-400: #df5601; + --vng-color-orange-300: #f08800; + --vng-color-orange-200: #ffb85c; + --vng-color-orange-100: #ffdcad; + --vng-color-pink-400: #a40058; + --vng-color-pink-300: #c8006c; + --vng-color-pink-200: #f5b4d7; + --vng-color-pink-100: #ffe8f5; + --vng-color-gray-950: #2e2e2e; + --vng-color-gray-900: #2e2e2e; + --vng-color-gray-800: #4a4a4a; + --vng-color-gray-700: #4a4a4a; + --vng-color-gray-600: #7a7a7a; + --vng-color-gray-500: #7a7a7a; + --vng-color-gray-400: #d1d1d1; + --vng-color-gray-300: #d1d1d1; + --vng-color-gray-200: #f2f2f2; + --vng-color-gray-100: #f2f2f2; + --vng-color-gray-50: #f9f8f6; + --vng-color-black-txt: #2e2e2e; + --vng-color-black: #000000; + --vng-color-white: #ffffff; + --vng-color-extra-limegreen: #8bc63f; + --vng-color-extra-purple: #513090; + --vng-color-extra-yellow: #f8d62a; + --tilburg-erm-font-size: 16px; + --ams-pagination-button-border-color: transparent; + --ams-pagination-button-background-color: transparent; + --ams-pagination-button-active-border-color: transparent; + --ams-pagination-button-active-background-color: transparent; + --ams-pagination-button-active-text-decoration: underline; + --ams-pagination-button-text-decoration: none; + --ams-pagination-button-hover-border-color: transparent; + --ams-pagination-button-hover-background-color: transparent; + --ams-pagination-button-hover-text-decoration: underline; + --ams-pagination-button-focus-text-decoration: none; + --ams-pagination-button-border-radius: 0px; + --ams-pagination-button-current-border-color: transparent; + --ams-pagination-button-current-text-decoration: none; + --ams-pagination-relative-link-disabled-border-color: transparent; + --ams-pagination-relative-link-disabled-background-color: transparent; + --ams-pagination-relative-link-border-radius: 0px; + --ams-pagination-relative-link-text-decoration: none; + --ams-pagination-relative-link-hover-text-decoration: underline; + --ams-pagination-relative-link-hover-border-color: transparent; + --ams-pagination-relative-link-hover-background-color: transparent; + --ams-pagination-relative-link-focus-text-decoration: none; + --ams-pagination-relative-link-active-text-decoration: underline; + --ams-pagination-relative-link-active-border-color: transparent; + --ams-pagination-relative-link-active-background-color: transparent; + --ams-pagination-relative-link-border-color: transparent; + --ams-pagination-relative-link-background-color: transparent; + --ams-pagination-relative-link-padding-inline-end: 0px; + --ams-pagination-relative-link-padding-inline-start: 0px; + --utrecht-textarea-background-color: var(--tilburg-form-control-background-color); + --utrecht-textarea-font-weight: var(--tilburg-document-font-weight); + --utrecht-textarea-padding-block-end: var(--tilburg-space-block-snail); + --utrecht-textarea-padding-block-start: var(--tilburg-space-block-snail); + --utrecht-textarea-padding-inline-end: var(--tilburg-space-inline-snail); + --utrecht-textarea-padding-inline-start: var(--tilburg-space-inline-snail); + --utrecht-textarea-placeholder-color: var( --tilburg-form-control-placeholder-color ); + --utrecht-textarea-max-inline-size: 400px; + --utrecht-textarea-border-block-end-width: var(--utrecht-textarea-border-width); + --utrecht-textbox-border-block-end-width: auto; + --utrecht-textbox-max-inline-size: 400px; + --utrecht-table-row-background-color: transparent; + --utrecht-table-footer-background-color: transparent; + --utrecht-table-header-background-color: transparent; + --utrecht-skip-link-text-decoration: underline; + --utrecht-skip-link-border-color: transparent; + --utrecht-skip-link-focus-text-decoration: none; + --utrecht-skip-link-focus-border-color: transparent; + --utrecht-link-focus-text-decoration: none; + --utrecht-link-active-text-decoration: none; + --utrecht-data-list-item-action-padding-inline-start: 0px; + --utrecht-data-list-item-action-row-padding-inline-end: 0px; + --utrecht-data-list-item-key-padding-inline-start: 0px; + --utrecht-data-list-item-key-padding-inline-end: 0px; + --utrecht-data-list-item-key-row-padding-inline-start: 0px; + --utrecht-data-list-item-value-padding-inline-start: 0px; + --utrecht-data-list-item-value-padding-inline-end: 0px; + --utrecht-data-list-item-value-row-padding-inline-start: 0px; + --utrecht-data-list-item-value-row-padding-inline-end: 0px; + --utrecht-checkbox-indeterminate-hover-border-color: transparent; + --utrecht-checkbox-indeterminate-active-border-color: transparent; + --utrecht-checkbox-indeterminate-disabled-border-color: transparent; + --utrecht-checkbox-indeterminate-border-color: transparent; + --utrecht-checkbox-checked-active-border-color: transparent; + --utrecht-checkbox-checked-hover-border-color: transparent; + --utrecht-checkbox-checked-disabled-border-color: transparent; + --utrecht-button-focus-border-color: transparent; + --utrecht-button-disabled-border-color: transparent; + --utrecht-button-subtle-active-border-color: transparent; + --utrecht-button-subtle-focus-border-color: transparent; + --utrecht-button-subtle-disabled-border-color: transparent; + --utrecht-button-subtle-border-color: transparent; + --utrecht-button-subtle-background-color: transparent; + --utrecht-button-subtle-hover-border-color: transparent; + --utrecht-button-primary-action-active-border-color: transparent; + --utrecht-button-primary-action-focus-border-color: transparent; + --utrecht-button-primary-action-disabled-border-color: transparent; + --utrecht-button-primary-action-border-color: transparent; + --utrecht-button-primary-action-hover-border-color: transparent; + --utrecht-breadcrumb-nav-link-text-decoration: underline; + --utrecht-breadcrumb-nav-link-active-text-decoration: none; + --utrecht-breadcrumb-nav-link-padding-inline-start: 0px; + --utrecht-breadcrumb-nav-link-padding-inline-end: 0px; + --utrecht-badge-counter-border-color: transparent; + --utrecht-alert-icon-padding-inline-start: 0px; + --utrecht-alert-icon-padding-inline-end: 0px; + --utrecht-accordion-button-active-border-color: transparent; + --utrecht-accordion-button-focus-border-color: transparent; + --utrecht-accordion-button-border-color: transparent; + --utrecht-accordion-button-expanded-border-color: transparent; + --utrecht-accordion-button-hover-border-color: transparent; + --utrecht-accordion-panel-border-color: transparent; + --utrecht-accordion-section-border-width: auto; + --utrecht-accordion-border-radius: 0px; + --utrecht-separator-width: 100%; + --utrecht-separator-block-start: 0; + --utrecht-separator-block-end: 0; + --tilburg-status-badge-border-color: transparent; + --tilburg-status-badge-warning-border-color: transparent; + --tilburg-status-badge-negative-border-color: transparent; + --tilburg-status-badge-positive-border-color: transparent; + --tilburg-status-badge-informative-border-color: transparent; + --tilburg-focus-outline-style: dotted; + --tilburg-focus-outline-offset: 0; + --tilburg-box-shadow-lg: 0 1ratpx rgba(0, 0, 0, 0.1); + --tilburg-box-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); + --tilburg-box-shadow-sm: [object Object]; + --tilburg-typography-font-family-secondary: 'Avenir', sans-serif; + --tilburg-typography-font-family-primary: 'Avenir', sans-serif; + --tilburg-typography-font-weight-bold: 700; + --tilburg-typography-font-weight-normal: 400; + --tilburg-typography-line-height-lg: 200%; + --tilburg-typography-line-height-md: 150%; + --tilburg-typography-line-height-sm: 125%; + --tilburg-typography-line-height-xs: 100%; + --tilburg-typography-font-size-4xl: 48px; + --tilburg-typography-font-size-3xl: 36px; + --tilburg-typography-font-size-2xl: 32px; + --tilburg-typography-font-size-xl: 24px; + --tilburg-typography-font-size-lg: 20px; + --tilburg-typography-font-size-md: 16px; + --tilburg-typography-font-size-sm: 14px; + --tilburg-space-row-giraffe: 160px; + --tilburg-space-row-elephant: 96px; + --tilburg-space-row-horse: 64px; + --tilburg-space-row-tiger: 48px; + --tilburg-space-row-pig: 32px; + --tilburg-space-row-dog: 28px; + --tilburg-space-row-cat: 24px; + --tilburg-space-row-rabbit: 20px; + --tilburg-space-row-rat: 16px; + --tilburg-space-row-mouse: 12px; + --tilburg-space-row-snail: 8px; + --tilburg-space-row-beetle: 4px; + --tilburg-space-row-ant: 2px; + --tilburg-space-row-flea: 1px; + --tilburg-space-column-giraffe: 160px; + --tilburg-space-column-elephant: 96px; + --tilburg-space-column-horse: 64px; + --tilburg-space-column-tiger: 48px; + --tilburg-space-column-pig: 32px; + --tilburg-space-column-dog: 28px; + --tilburg-space-column-cat: 24px; + --tilburg-space-column-rabbit: 20px; + --tilburg-space-column-rat: 16px; + --tilburg-space-column-mouse: 12px; + --tilburg-space-column-snail: 8px; + --tilburg-space-column-beetle: 4px; + --tilburg-space-column-ant: 2px; + --tilburg-space-column-flea: 1px; + --tilburg-space-text-dog: 24px; + --tilburg-space-text-cat: 16px; + --tilburg-space-text-rabbit: 14px; + --tilburg-space-text-rat: 12px; + --tilburg-space-text-mouse: 8px; + --tilburg-space-text-snail: 6px; + --tilburg-space-text-beetle: 4px; + --tilburg-space-text-ant: 2px; + --tilburg-space-text-flea: 1px; + --tilburg-space-block-pig: 64px; + --tilburg-space-block-dog: 48px; + --tilburg-space-block-cat: 32px; + --tilburg-space-block-rabbit: 24px; + --tilburg-space-block-rat: 20px; + --tilburg-space-block-mouse: 16px; + --tilburg-space-block-snail: 12px; + --tilburg-space-block-beetle: 8px; + --tilburg-space-block-ant: 4px; + --tilburg-space-block-flea: 2px; + --tilburg-space-inline-pig: 48px; + --tilburg-space-inline-dog: 32px; + --tilburg-space-inline-cat: 28px; + --tilburg-space-inline-rabbit: 24px; + --tilburg-space-inline-rat: 20px; + --tilburg-space-inline-mouse: 16px; + --tilburg-space-inline-snail: 12px; + --tilburg-space-inline-beetle: 8px; + --tilburg-space-inline-ant: 4px; + --tilburg-space-inline-flea: 2px; + --tilburg-size-icon-4xl: 48px; + --tilburg-size-icon-3xl: 40px; + --tilburg-size-icon-2xl: 32px; + --tilburg-size-icon-xl: 24px; + --tilburg-size-icon-lg: 24px; + --tilburg-size-icon-md: 24px; + --tilburg-size-icon-sm: 16px; + --tilburg-size-2xl: 160px; + --tilburg-size-xl: 96px; + --tilburg-size-lg: 64px; + --tilburg-size-md: 48px; + --tilburg-size-sm: 32px; + --tilburg-size-xs: 24px; + --tilburg-size-2xs: 16px; + --tilburg-size-3xs: 8px; + --tilburg-size-4xs: 4px; + --tilburg-size-5xs: 2px; + --tilburg-color-red-400: #a30500; + --tilburg-color-red-300: #cf1b07; + --tilburg-color-red-200: #ed8b82; + --tilburg-color-red-100: #ffd9d6; + --tilburg-color-green-400: #1e6c35; + --tilburg-color-green-300: #238541; + --tilburg-color-green-200: #7eb67c; + --tilburg-color-green-100: #d5e7d5; + --tilburg-color-orange-400: #df5601; + --tilburg-color-orange-300: #f08800; + --tilburg-color-orange-200: #ffb85c; + --tilburg-color-orange-100: #ffdcad; + --tilburg-color-pink-400: #a40058; + --tilburg-color-pink-300: #c8006c; + --tilburg-color-pink-200: #f5b4d7; + --tilburg-color-pink-100: #ffe8f5; + --tilburg-color-blue-500: #032d4f; + --tilburg-color-blue-400: #094b81; + --tilburg-color-blue-300: #1260a1; + --tilburg-color-blue-200: #abcced; + --tilburg-color-blue-100: #dbecfa; + --tilburg-color-extra-limegreen: #8bc63f; + --tilburg-color-extra-purple: #513090; + --tilburg-color-extra-yellow: #f8d62a; + --tilburg-color-dark-alpha-100: #0000001a; + --tilburg-color-dark-alpha-50: #0000000d; + --tilburg-color-light-alpha-100: #ffffff1a; + --tilburg-color-light-alpha-50: #ffffff0d; + --tilburg-color-gray-950: #2e2e2e; + --tilburg-color-gray-900: #2e2e2e; + --tilburg-color-gray-800: #4a4a4a; + --tilburg-color-gray-700: #4a4a4a; + --tilburg-color-gray-600: #7a7a7a; + --tilburg-color-gray-500: #7a7a7a; + --tilburg-color-gray-400: #d1d1d1; + --tilburg-color-gray-300: #d1d1d1; + --tilburg-color-gray-200: #f2f2f2; + --tilburg-color-gray-100: #f2f2f2; + --tilburg-color-gray-50: #f9f8f6; + --tilburg-color-black-txt: #2e2e2e; + --tilburg-color-black: #000000; + --tilburg-color-white: #ffffff; + --tilburg-color-code-background-color: #f2f2f2; + --tilburg-border-width-lg: 4px; + --tilburg-border-width-md: 2px; + --tilburg-border-width-sm: 1px; + --tilburg-border-radius-round: 999px; + --tilburg-border-radius-lg: 16px; + --tilburg-border-radius-md: 8px; + --tilburg-border-radius-sm: 4px; + --ams-pagination-ellipses-padding-inline-start: var(--tilburg-space-inline-ant); + --ams-pagination-ellipses-padding-inline-end: var(--tilburg-space-inline-ant); + --ams-pagination-ellipses-padding-block-start: var(--tilburg-space-block-snail); + --ams-pagination-ellipses-padding-block-end: var(--tilburg-space-block-snail); + --ams-pagination-button-padding-inline: var(--tilburg-space-inline-snail); + --ams-pagination-button-padding-inline-start: var(--tilburg-space-inline-snail); + --ams-pagination-button-padding-inline-end: var(--tilburg-space-inline-snail); + --ams-pagination-button-padding-block-start: var(--tilburg-space-block-snail); + --ams-pagination-button-padding-block-end: var(--tilburg-space-block-snail); + --ams-pagination-button-current-background-color: var(--tilburg-color-gray-100); + --ams-pagination-button-border-width: var(--tilburg-border-width-sm); + --ams-pagination-relative-link-disabled-color: var(--tilburg-color-gray-500); + --ams-pagination-relative-link-padding-block-start: var( --tilburg-space-block-snail ); + --ams-pagination-relative-link-padding-block-end: var(--tilburg-space-block-snail); + --ams-pagination-relative-link-icon-margin-inline: var( --tilburg-space-text-beetle ); + --ams-pagination-relative-link-border-width: var(--tilburg-border-width-sm); + --utrecht-unordered-list-padding-inline-start: var(--tilburg-space-inline-rabbit); + --utrecht-unordered-list-marker-color: var(--tilburg-color-blue-300); + --utrecht-textbox-padding-block-start: var(--tilburg-space-block-snail); + --utrecht-textbox-padding-block-end: var(--tilburg-space-block-snail); + --utrecht-table-container-box-inline-start-shadow: var(--tilburg-box-shadow-lg); + --utrecht-table-container-box-inline-end-shadow: var(--tilburg-box-shadow-lg); + --utrecht-table-footer-border-block-end-width: var(--tilburg-border-width-sm); + --utrecht-skip-link-box-block-end-shadow: var(--tilburg-box-shadow-lg); + --utrecht-skip-link-border-width: var(--tilburg-border-width-sm); + --utrecht-skip-link-padding-inline-start: var(--tilburg-space-inline-mouse); + --utrecht-skip-link-padding-inline-end: var(--tilburg-space-inline-mouse); + --utrecht-skip-link-padding-block-start: var(--tilburg-space-block-snail); + --utrecht-skip-link-padding-block-end: var(--tilburg-space-block-snail); + --utrecht-paragraph-small-font-size: var(--tilburg-typography-font-size-sm); + --utrecht-link-icon-margin-inline: var(--tilburg-space-text-beetle); + --utrecht-heading-6-font-size: var(--tilburg-typography-font-size-sm); + --utrecht-heading-6-line-height: var(--tilburg-typography-line-height-md); + --utrecht-form-field-error-message-icon-margin-inline-end: var( --tilburg-space-text-mouse ); + --utrecht-data-list-item-action-padding-inline-end: var( --tilburg-space-inline-mouse ); + --utrecht-data-list-item-action-padding-block-start: var( --tilburg-space-block-snail ); + --utrecht-data-list-item-action-padding-block-end: var( --tilburg-space-block-snail ); + --utrecht-data-list-item-action-row-padding-inline-start: var( --tilburg-space-inline-mouse ); + --utrecht-data-list-item-action-row-padding-block-start: var( --tilburg-space-block-snail ); + --utrecht-data-list-item-action-row-padding-block-end: var( --tilburg-space-block-snail ); + --utrecht-data-list-item-border-width: var(--tilburg-border-width-sm); + --utrecht-data-list-item-key-padding-block-start: var(--tilburg-space-block-snail); + --utrecht-data-list-item-key-padding-block-end: var(--tilburg-space-block-ant); + --utrecht-data-list-item-key-row-padding-inline-end: var( --tilburg-space-inline-mouse ); + --utrecht-data-list-item-key-row-padding-block-start: var( --tilburg-space-block-snail ); + --utrecht-data-list-item-key-row-padding-block-end: var( --tilburg-space-block-snail ); + --utrecht-data-list-item-value-padding-block-start: var(--tilburg-space-block-ant); + --utrecht-data-list-item-value-padding-block-end: var(--tilburg-space-block-snail); + --utrecht-data-list-item-value-row-padding-block-start: var( --tilburg-space-block-snail ); + --utrecht-data-list-item-value-row-padding-block-end: var( --tilburg-space-block-snail ); + --utrecht-data-list-rows-item-padding-block-start: var( --tilburg-space-block-snail ); + --utrecht-data-list-rows-item-padding-block-end: var(--tilburg-space-block-ant); + --utrecht-checkbox-indeterminate-hover-color: var(--tilburg-color-white); + --utrecht-checkbox-indeterminate-active-color: var(--tilburg-color-white); + --utrecht-checkbox-indeterminate-disabled-color: var(--tilburg-color-white); + --utrecht-checkbox-indeterminate-color: var(--tilburg-color-white); + --utrecht-checkbox-checked-active-color: var(--tilburg-color-white); + --utrecht-checkbox-checked-hover-color: var(--tilburg-color-white); + --utrecht-checkbox-checked-disabled-color: var(--tilburg-color-white); + --utrecht-button-active-background-color: var(--tilburg-color-gray-100); + --utrecht-button-subtle-active-background-color: var( --tilburg-color-dark-alpha-100 ); + --utrecht-button-subtle-disabled-color: var(--tilburg-color-gray-500); + --utrecht-button-subtle-disabled-background-color: var(--tilburg-color-gray-50); + --utrecht-button-subtle-hover-background-color: var(--tilburg-color-dark-alpha-50); + --utrecht-button-border-width: var(--tilburg-border-width-sm); + --utrecht-button-border-color: var(--tilburg-color-gray-900); + --utrecht-button-secondary-action-active-background-color: var( --tilburg-color-gray-100 ); + --utrecht-button-secondary-action-disabled-background-color: var( --tilburg-color-gray-50 ); + --utrecht-button-secondary-action-hover-background-color: var( --tilburg-color-gray-50 ); + --utrecht-button-primary-action-active-color: var(--tilburg-color-white); + --utrecht-button-primary-action-color: var(--tilburg-color-white); + --utrecht-button-primary-action-hover-color: var(--tilburg-color-white); + --utrecht-breadcrumb-nav-margin-inline: var(--tilburg-space-inline-beetle); + --utrecht-breadcrumb-nav-divider-size: var(--tilburg-size-2xs); + --utrecht-breadcrumb-nav-link-padding-block-start: var( --tilburg-space-block-snail ); + --utrecht-breadcrumb-nav-link-padding-block-end: var(--tilburg-space-block-snail); + --utrecht-breadcrumb-nav-link-icon-margin-inline: var(--tilburg-space-text-beetle); + --utrecht-breadcrumb-nav-link-disabled-color: var(--tilburg-color-gray-700); + --utrecht-badge-counter-border-width: var(--tilburg-border-width-sm); + --utrecht-badge-counter-min-inline-size: var(--tilburg-size-xs); + --utrecht-badge-counter-min-block-size: var(--tilburg-size-xs); + --utrecht-alert-content-row-gap: var(--tilburg-space-row-snail); + --utrecht-alert-message-padding-block-start: var(--tilburg-space-block-beetle); + --utrecht-alert-message-padding-block-end: var(--tilburg-space-block-snail); + --utrecht-alert-message-row-gap: var(--tilburg-space-row-snail); + --utrecht-alert-icon-padding-block-start: var(--tilburg-space-block-snail); + --utrecht-alert-icon-padding-block-end: var(--tilburg-space-block-snail); + --utrecht-alert-border-width: var(--tilburg-border-width-md); + --utrecht-alert-column-gap: var(--tilburg-space-column-snail); + --utrecht-alert-heading-font-size: var(--tilburg-typography-font-size-xl); + --utrecht-alert-heading-line-height: var(--tilburg-typography-line-height-sm); + --utrecht-alert-icon-info-color: var(--tilburg-color-blue-500); + --utrecht-alert-info-background-color: var(--tilburg-color-blue-100); + --utrecht-alert-info-border-color: var(--tilburg-color-blue-300); + --utrecht-alert-info-border-width: var(--tilburg-border-width-md); + --utrecht-alert-info-color: var(--tilburg-color-blue-500); + --utrecht-alert-border-radius: var(--tilburg-border-radius-md); + --utrecht-accordion-button-border-width: var(--tilburg-border-width-sm); + --utrecht-accordion-button-active-background-color: var(--tilburg-color-gray-200); + --utrecht-accordion-button-background-color: var(--tilburg-color-gray-50); + --utrecht-accordion-button-expanded-background-color: var(--tilburg-color-gray-50); + --utrecht-accordion-button-hover-background-color: var(--tilburg-color-gray-100); + --utrecht-accordion-button-padding-inline-start: var(--tilburg-space-inline-mouse); + --utrecht-accordion-button-padding-inline-end: var(--tilburg-space-inline-mouse); + --utrecht-accordion-button-padding-block-start: var(--tilburg-space-block-snail); + --utrecht-accordion-button-padding-block-end: var(--tilburg-space-block-snail); + --utrecht-accordion-button-icon-margin-inline: var(--tilburg-space-text-mouse); + --utrecht-accordion-panel-padding-inline-start: var(--tilburg-space-inline-mouse); + --utrecht-accordion-panel-padding-inline-end: var(--tilburg-space-inline-mouse); + --utrecht-accordion-panel-padding-block-start: var(--tilburg-space-block-rabbit); + --utrecht-accordion-panel-padding-block-end: var(--tilburg-space-block-rabbit); + --utrecht-accordion-panel-border-width: var(--tilburg-border-width-lg); + --utrecht-accordion-section-border-block-end-width: var(--tilburg-border-width-sm); + --utrecht-feedback-warning-fill-border-color: var(--tilburg-color-orange-300); + --utrecht-feedback-success-fill-color: var(--tilburg-color-green-300); + --utrecht-feedback-success-fill-border-color: var(--tilburg-color-green-300); + --utrecht-feedback-success-fill-background-color: var(--tilburg-color-green-100); + --utrecht-feedback-danger-fill-border-color: var(--tilburg-color-red-300); + --utrecht-feedback-neutral-fill-border-color: var(--tilburg-color-gray-400); + --utrecht-document-strong-font-weight: var(--tilburg-typography-font-weight-bold); + --utrecht-document-subtle-color: var(--tilburg-color-gray-600); + --utrecht-document-inverse-color: var(--tilburg-color-white); + --utrecht-document-inverse-background-color: var(--tilburg-color-gray-950); + --tilburg-status-badge-background-color: var(--denhaag-color-grey-1); + --tilburg-status-badge-padding-block: var(--tilburg-space-block-flea); + --tilburg-status-badge-padding-inline: var(--tilburg-space-inline-ant); + --tilburg-status-badge-border-radius: var(--tilburg-border-radius-sm); + --tilburg-status-badge-border-width: var(--tilburg-border-width-sm); + --tilburg-status-badge-font-size: var(--tilburg-typography-font-size-sm); + --tilburg-line-border-width: var(--tilburg-border-width-sm); + --tilburg-line-border-color: #7a7a7a; + --tilburg-interaction-hover-color: #238541; + --tilburg-interaction-active-color: #238541; + --tilburg-interaction-color: #238541; + --tilburg-icon-toptask-size: var(--tilburg-size-icon-4xl); + --tilburg-icon-functional-size: var(--tilburg-size-icon-md); + --tilburg-pointer-target-min-size: var(--tilburg-size-md); + --tilburg-form-control-placeholder-color: var(--tilburg-color-gray-600); + --tilburg-form-control-read-only-color: var(--tilburg-color-gray-950); + --tilburg-form-control-read-only-border-color: var(--tilburg-color-gray-500); + --tilburg-form-control-read-only-background-color: var(--tilburg-color-gray-50); + --tilburg-form-control-invalid-color: var(--tilburg-color-red-300); + --tilburg-form-control-invalid-border-width: var(--tilburg-border-width-md); + --tilburg-form-control-invalid-border-color: var(--tilburg-color-red-300); + --tilburg-form-control-invalid-background-color: var(--tilburg-color-white); + --tilburg-form-control-hover-color: var(--tilburg-color-gray-950); + --tilburg-form-control-hover-border-width: var(--tilburg-border-width-md); + --tilburg-form-control-hover-border-color: var(--tilburg-color-gray-500); + --tilburg-form-control-hover-background-color: var(--tilburg-color-gray-50); + --tilburg-form-control-focus-color: var(--tilburg-color-black); + --tilburg-form-control-focus-border-width: var(--tilburg-border-width-md); + --tilburg-form-control-focus-border-color: var(--tilburg-color-black); + --tilburg-form-control-focus-background-color: var(--tilburg-color-white); + --tilburg-form-control-disabled-color: var(--tilburg-color-gray-500); + --tilburg-form-control-disabled-border-color: var(--tilburg-color-gray-500); + --tilburg-form-control-disabled-background-color: var(--tilburg-color-gray-50); + --tilburg-form-control-disabled-accent-color: var(--tilburg-color-gray-500); + --tilburg-form-control-active-color: var(--tilburg-color-gray-950); + --tilburg-form-control-active-border-width: var(--tilburg-border-width-md); + --tilburg-form-control-active-border-color: var(--tilburg-color-gray-500); + --tilburg-form-control-active-background-color: var(--tilburg-color-gray-100); + --tilburg-form-control-color: var(--tilburg-color-gray-950); + --tilburg-form-control-border-width: var(--tilburg-border-width-sm); + --tilburg-form-control-border-color: var(--tilburg-color-gray-500); + --tilburg-form-control-background-color: var(--tilburg-color-white); + --tilburg-focus-outline-width: var(--tilburg-border-width-md); + --tilburg-focus-inverse-outline-color: var(--tilburg-color-white); + --tilburg-focus-outline-color: var(--denhaag-focus-border-color); + --tilburg-focus-color: #238541; + --tilburg-focus-background-color: #1260a1; + --tilburg-feedback-warning-color: var(--tilburg-color-orange-300); + --tilburg-feedback-warning-border-color: var(--tilburg-color-orange-200); + --tilburg-feedback-warning-background-color: var(--tilburg-color-orange-100); + --tilburg-feedback-positive-color: var(--tilburg-color-green-300); + --tilburg-feedback-positive-border-color: var(--tilburg-color-green-300); + --tilburg-feedback-positive-background-color: var(--tilburg-color-green-100); + --tilburg-feedback-negative-color: var(--tilburg-color-red-300); + --tilburg-feedback-negative-border-color: var(--tilburg-color-red-300); + --tilburg-feedback-negative-background-color: var(--tilburg-color-red-100); + --tilburg-feedback-informative-color: var(--tilburg-color-blue-400); + --tilburg-feedback-informative-border-color: var(--tilburg-color-blue-400); + --tilburg-feedback-informative-background-color: var(--tilburg-color-blue-100); + --tilburg-document-line-height: var(--tilburg-typography-line-height-md); + --tilburg-document-strong-font-weight: var(--tilburg-typography-font-weight-bold); + --tilburg-document-font-weight: var(--tilburg-typography-font-weight-normal); + --tilburg-document-font-size: var(--tilburg-typography-font-size-md); + --tilburg-document-font-family: var(--tilburg-typography-font-family-secondary); + --tilburg-document-subtle-color: var(--tilburg-color-gray-600); + --tilburg-document-inverse-color: var(--tilburg-color-white); + --tilburg-document-inverse-background-color: var(--tilburg-color-gray-950); + --tilburg-document-color: var(--tilburg-color-black-txt); + --tilburg-document-background-color: var(--tilburg-color-white); + --tilburg-heading-font-weight: var(--tilburg-typography-font-weight-bold); + --tilburg-heading-font-family: var(--tilburg-typography-font-family-primary); + --tilburg-heading-color: var(--tilburg-color-black); + --ams-pagination-description-font-weight: var(--tilburg-document-font-weight); + --ams-pagination-description-color: var(--tilburg-document-color); + --ams-pagination-ellipses-font-weight: var(--tilburg-document-font-weight); + --ams-pagination-ellipses-color: var(--tilburg-document-subtle-color); + --ams-pagination-font-size: var(--tilburg-document-font-size); + --ams-pagination-line-height: var(--tilburg-document-line-height); + --ams-pagination-font-family: var(--tilburg-document-font-family); + --ams-pagination-color: var(--tilburg-interaction-color); + --ams-pagination-button-min-inline-size: var(--tilburg-pointer-target-min-size); + --ams-pagination-button-min-block-size: var(--tilburg-pointer-target-min-size); + --ams-pagination-button-color: var(--tilburg-interaction-color); + --ams-pagination-button-active-color: var(--tilburg-interaction-active-color); + --ams-pagination-button-hover-color: var(--tilburg-interaction-hover-color); + --ams-pagination-button-focus-color: var(--tilburg-focus-color); + --ams-pagination-button-focus-background-color: var( --tilburg-focus-background-color ); + --ams-pagination-button-current-color: var(--tilburg-document-color); + --ams-pagination-button-current-font-weight: var( --tilburg-document-strong-font-weight ); + --ams-pagination-button-font-weight: var(--tilburg-document-font-weight); + --ams-pagination-relative-link-min-inline-size: var( --tilburg-pointer-target-min-size ); + --ams-pagination-relative-link-min-block-size: var( --tilburg-pointer-target-min-size ); + --ams-pagination-relative-link-font-weight: var(--tilburg-document-font-weight); + --ams-pagination-relative-link-hover-color: var(--tilburg-interaction-hover-color); + --ams-pagination-relative-link-focus-color: var(--tilburg-focus-color); + --ams-pagination-relative-link-focus-background-color: var( --tilburg-focus-background-color ); + --ams-pagination-relative-link-active-color: var( --tilburg-interaction-active-color ); + --ams-pagination-relative-link-color: var(--tilburg-interaction-color); + --ams-pagination-relative-link-icon-size: var(--tilburg-icon-functional-size); + --utrecht-unordered-list-font-weight: var(--tilburg-document-font-weight); + --utrecht-unordered-list-font-family: var(--tilburg-document-font-family); + --utrecht-unordered-list-marker-border-color: var(--tilburg-document-color); + --utrecht-unordered-list-color: var(--tilburg-document-color); + --utrecht-textbox-hover-color: var(--tilburg-form-control-hover-color); + --utrecht-textbox-hover-border-color: var( --tilburg-form-control-hover-border-color ); + --utrecht-textbox-hover-background-color: var( --tilburg-form-control-hover-background-color ); + --utrecht-textbox-hover-border-width: var( --tilburg-form-control-hover-border-width ); + --utrecht-textbox-read-only-color: var(--tilburg-form-control-read-only-color); + --utrecht-textbox-read-only-border-color: var( --tilburg-form-control-read-only-border-color ); + --utrecht-textbox-read-only-background-color: var( --tilburg-form-control-read-only-background-color ); + --utrecht-textbox-disabled-color: var(--tilburg-form-control-disabled-color); + --utrecht-textbox-disabled-border-color: var( --tilburg-form-control-disabled-border-color ); + --utrecht-textbox-placeholder-color: var(--tilburg-form-control-placeholder-color); + --utrecht-textbox-invalid-color: var(--tilburg-form-control-color); + --utrecht-textbox-invalid-background-color: var( --tilburg-form-control-invalid-background-color ); + --utrecht-textbox-background-color: var(--tilburg-form-control-background-color); + --utrecht-textbox-font-weight: var(--tilburg-document-font-weight); + --utrecht-table-footer-cell-font-family: var(--tilburg-document-font-family); + --utrecht-table-footer-cell-color: var(--tilburg-document-color); + --utrecht-table-footer-cell-font-size: var(--tilburg-document-font-size); + --utrecht-table-footer-cell-font-weight: var( --tilburg-document-strong-font-weight ); + --utrecht-table-footer-border-block-end-color: var(--tilburg-line-border-color); + --utrecht-table-data-cell-font-size: var(--tilburg-document-font-size); + --utrecht-table-data-cell-font-weight: var(--tilburg-document-font-weight); + --utrecht-table-data-cell-font-family: var(--tilburg-document-font-family); + --utrecht-table-data-cell-color: var(--tilburg-document-color); + --utrecht-table-header-cell-font-family: var(--tilburg-document-font-family); + --utrecht-skip-link-color: var(--tilburg-document-inverse-color); + --utrecht-skip-link-background-color: var( --tilburg-document-inverse-background-color ); + --utrecht-skip-link-focus-color: var(--tilburg-focus-color); + --utrecht-skip-link-focus-background-color: var(--tilburg-focus-background-color); + --utrecht-skip-link-min-inline-size: var(--tilburg-pointer-target-min-size); + --utrecht-skip-link-min-block-size: var(--tilburg-pointer-target-min-size); + --utrecht-skip-link-font-size: var(--tilburg-document-font-size); + --utrecht-skip-link-font-family: var(--tilburg-document-font-family); + --utrecht-skip-link-font-weight: var(--tilburg-document-strong-font-weight); + --utrecht-select-font-weight: var(--tilburg-document-font-weight); + --utrecht-select-hover-border-width: var( --tilburg-form-control-hover-border-width ); + --utrecht-select-hover-color: var(--tilburg-form-control-hover-color); + --utrecht-select-hover-border-color: var( --tilburg-form-control-hover-border-color ); + --utrecht-select-hover-background-color: var( --tilburg-form-control-hover-background-color ); + --utrecht-select-focus-border-width: var( --tilburg-form-control-focus-border-width ); + --utrecht-select-invalid-color: var(--tilburg-form-control-color); + --utrecht-select-icon-size: var(--tilburg-icon-functional-size); + --utrecht-paragraph-small-line-height: var(--tilburg-document-line-height); + --utrecht-paragraph-small-font-weight: var(--tilburg-document-font-weight); + --utrecht-paragraph-small-font-family: var(--tilburg-document-font-family); + --utrecht-paragraph-small-color: var(--tilburg-document-color); + --utrecht-paragraph-lead-font-weight: var(--tilburg-document-font-weight); + --utrecht-paragraph-lead-font-family: var(--tilburg-document-font-family); + --utrecht-paragraph-lead-color: var(--tilburg-document-color); + --utrecht-paragraph-color: var(--tilburg-document-color); + --utrecht-ordered-list-font-weight: var(--tilburg-document-font-weight); + --utrecht-ordered-list-font-family: var(--tilburg-document-font-family); + --utrecht-ordered-list-color: var(--tilburg-document-color); + --utrecht-link-font-weight: var(--tilburg-document-font-weight); + --utrecht-link-font-family: var(--tilburg-document-font-family); + --utrecht-link-font-size: var(--tilburg-document-font-size); + --utrecht-link-icon-size: var(--tilburg-icon-functional-size); + --utrecht-link-focus-background-color: transparent; + --utrecht-link-text-decoration-color: var(--tilburg-interaction-color); + --utrecht-link-line-height: var(--tilburg-document-line-height); + --utrecht-heading-6-font-weight: var(--tilburg-heading-font-weight); + --utrecht-heading-6-font-family: var(--tilburg-heading-font-family); + --utrecht-heading-6-color: var(--tilburg-heading-color); + --utrecht-heading-5-font-weight: var(--tilburg-heading-font-weight); + --utrecht-heading-5-color: var(--tilburg-heading-color); + --utrecht-heading-4-font-weight: var(--tilburg-heading-font-weight); + --utrecht-heading-4-color: var(--tilburg-heading-color); + --utrecht-heading-3-font-weight: var(--tilburg-heading-font-weight); + --utrecht-heading-3-color: var(--tilburg-heading-color); + --utrecht-heading-2-font-weight: var(--tilburg-heading-font-weight); + --utrecht-heading-2-color: var(--tilburg-heading-color); + --utrecht-heading-1-font-weight: var(--tilburg-heading-font-weight); + --utrecht-heading-1-color: var(--tilburg-heading-color); + --utrecht-form-label-line-height: var(--tilburg-document-line-height); + --utrecht-form-label-font-family: var(--tilburg-document-font-family); + --utrecht-form-field-error-message-line-height: var( --tilburg-document-line-height ); + --utrecht-form-field-error-message-icon-size: var(--tilburg-icon-functional-size); + --utrecht-form-field-description-line-height: var(--tilburg-document-line-height); + --utrecht-form-field-description-font-weight: var(--tilburg-document-font-weight); + --utrecht-data-list-line-height: var(--tilburg-document-line-height); + --utrecht-data-list-font-size: var(--tilburg-document-font-size); + --utrecht-data-list-item-color: var(--tilburg-document-color); + --utrecht-data-list-item-border-color: var(--tilburg-line-border-color); + --utrecht-data-list-item-value-font-weight: var(--tilburg-document-font-weight); + --utrecht-data-list-font-family: var(--tilburg-document-font-family); + --utrecht-checkbox-indeterminate-focus-border-width: var( --tilburg-form-control-focus-border-width ); + --utrecht-checkbox-indeterminate-focus-color: var( --tilburg-form-control-focus-color ); + --utrecht-checkbox-indeterminate-focus-border-color: var( --tilburg-form-control-focus-border-color ); + --utrecht-checkbox-indeterminate-focus-background-color: var( --tilburg-form-control-focus-background-color ); + --utrecht-checkbox-indeterminate-hover-border-width: var( --tilburg-form-control-hover-border-width ); + --utrecht-checkbox-indeterminate-active-border-width: var( --tilburg-form-control-active-border-width ); + --utrecht-checkbox-indeterminate-disabled-background-color: var( --tilburg-form-control-disabled-accent-color ); + --utrecht-checkbox-indeterminate-border-width: var( --tilburg-form-control-border-width ); + --utrecht-checkbox-checked-active-border-width: var( --tilburg-form-control-active-border-width ); + --utrecht-checkbox-checked-hover-border-width: var( --tilburg-form-control-hover-border-width ); + --utrecht-checkbox-checked-focus-color: var(--tilburg-form-control-focus-color); + --utrecht-checkbox-checked-focus-border-color: var( --tilburg-form-control-focus-border-color ); + --utrecht-checkbox-checked-focus-background-color: var( --tilburg-form-control-focus-background-color ); + --utrecht-checkbox-checked-focus-border-width: var( --tilburg-form-control-focus-border-width ); + --utrecht-checkbox-checked-disabled-background-color: var( --tilburg-form-control-disabled-accent-color ); + --utrecht-button-min-inline-size: var(--tilburg-pointer-target-min-size); + --utrecht-button-min-block-size: var(--tilburg-pointer-target-min-size); + --utrecht-button-active-color: var(--tilburg-interaction-active-color); + --utrecht-button-active-border-color: var(--tilburg-interaction-active-color); + --utrecht-button-hover-color: var(--tilburg-interaction-hover-color); + --utrecht-button-hover-border-color: var(--tilburg-interaction-hover-color); + --utrecht-button-focus-color: var(--tilburg-focus-color); + --utrecht-button-line-height: var(--tilburg-document-line-height); + --utrecht-button-subtle-active-color: var(--tilburg-interaction-active-color); + --utrecht-button-subtle-focus-color: var(--tilburg-focus-color); + --utrecht-button-subtle-focus-background-color: var( --tilburg-focus-background-color ); + --utrecht-button-subtle-color: var(--tilburg-interaction-color); + --utrecht-button-subtle-hover-color: var(--tilburg-interaction-hover-color); + --utrecht-button-subtle-font-weight: var(--tilburg-document-strong-font-weight); + --utrecht-button-font-weight: var(--tilburg-document-strong-font-weight); + --utrecht-button-font-size: var(--tilburg-document-font-size); + --utrecht-button-icon-size: var(--tilburg-icon-functional-size); + --utrecht-button-secondary-action-active-color: var( --tilburg-interaction-active-color ); + --utrecht-button-secondary-action-active-border-color: var( --tilburg-interaction-active-color ); + --utrecht-button-secondary-action-font-weight: var( --tilburg-document-strong-font-weight ); + --utrecht-button-secondary-action-focus-background-color: var( --tilburg-focus-background-color ); + --utrecht-button-primary-action-active-background-color: var( --tilburg-interaction-active-color ); + --utrecht-button-primary-action-font-weight: var( --tilburg-document-strong-font-weight ); + --utrecht-button-primary-action-focus-color: var(--tilburg-focus-color); + --utrecht-breadcrumb-nav-font-weight: var(--tilburg-document-font-weight); + --utrecht-breadcrumb-nav-font-family: var(--tilburg-document-font-family); + --utrecht-breadcrumb-nav-divider-color: var(--tilburg-document-subtle-color); + --utrecht-breadcrumb-nav-link-current-color: var(--tilburg-document-subtle-color); + --utrecht-breadcrumb-nav-link-focus-background-color: var( --tilburg-focus-background-color ); + --utrecht-breadcrumb-nav-link-active-color: var( --tilburg-interaction-active-color ); + --utrecht-breadcrumb-nav-link-icon-size: var(--tilburg-icon-functional-size); + --utrecht-breadcrumb-nav-line-height: var(--tilburg-document-line-height); + --utrecht-badge-counter-line-height: var(--tilburg-document-line-height); + --utrecht-alert-warning-border-color: #8a3500; + --utrecht-alert-error-border-color: #520100; + --utrecht-alert-positive-color: var(--tilburg-document-color); + --utrecht-alert-positive-border-color: var( --tilburg-feedback-positive-border-color ); + --utrecht-alert-positive-background-color: var( --tilburg-feedback-positive-background-color ); + --utrecht-alert-negative-color: var(--tilburg-document-color); + --utrecht-alert-negative-border-color: var( --tilburg-feedback-negative-border-color ); + --utrecht-alert-negative-background-color: var( --tilburg-feedback-negative-background-color ); + --utrecht-alert-icon-size: var(--tilburg-icon-functional-size); + --utrecht-alert-icon-negative-color: var(--tilburg-feedback-negative-color); + --utrecht-alert-icon-positive-color: var(--tilburg-feedback-positive-color); + --utrecht-alert-icon-informative-color: var(--tilburg-feedback-informative-color); + --utrecht-alert-informative-color: var(--tilburg-document-color); + --utrecht-alert-informative-border-color: var( --tilburg-feedback-informative-border-color ); + --utrecht-alert-informative-background-color: var( --tilburg-feedback-informative-background-color ); + --utrecht-alert-heading-font-weight: var(--tilburg-heading-font-weight); + --utrecht-alert-heading-font-family: var(--tilburg-heading-font-family); + --utrecht-accordion-button-font-weight: var(--tilburg-document-strong-font-weight); + --utrecht-accordion-button-font-family: var(--tilburg-document-font-family); + --utrecht-accordion-button-active-color: var(--tilburg-interaction-active-color); + --utrecht-accordion-button-focus-color: var(--tilburg-focus-color); + --utrecht-accordion-button-focus-background-color: var( --tilburg-focus-background-color ); + --utrecht-accordion-button-color: var(--tilburg-interaction-color); + --utrecht-accordion-button-expanded-color: var(--tilburg-interaction-color); + --utrecht-accordion-button-hover-color: var(--tilburg-interaction-hover-color); + --utrecht-accordion-button-icon-size: var(--tilburg-icon-functional-size); + --utrecht-accordion-button-line-height: var(--tilburg-document-line-height); + --utrecht-accordion-button-font-size: var(--tilburg-document-font-size); + --utrecht-accordion-section-border-color: var(--tilburg-line-border-color); + --utrecht-radio-button-min-inline-size: 16px; + --utrecht-radio-button-min-block-size: 16px; + --utrecht-radio-button-label-font-size: var(--tilburg-document-font-size); + --utrecht-radio-button-label-line-height: var(--tilburg-document-line-height); + --utrecht-radio-button-label-font-weight: var(--tilburg-document-font-weight); + --utrecht-radio-button-label-font-family: var(--tilburg-document-font-family); + --utrecht-radio-button-checked-disabled-color: var( --tilburg-form-control-disabled-color ); + --utrecht-radio-button-checked-disabled-background-color: var( --tilburg-form-control-disabled-background-color ); + --utrecht-radio-button-checked-disabled-border-width: var( --tilburg-form-control-disabled-border-width ); + --utrecht-radio-button-checked-disabled-border-color: var( --tilburg-form-control-disabled-border-color ); + --tilburg-status-badge-color: var(--tilburg-document-color); + --tilburg-status-badge-warning-color: var(--tilburg-feedback-warning-color); + --tilburg-status-badge-warning-background-color: var( --tilburg-feedback-warning-background-color ); + --tilburg-status-badge-negative-color: var(--tilburg-feedback-negative-color); + --tilburg-status-badge-negative-background-color: var( --tilburg-feedback-negative-background-color ); + --tilburg-status-badge-positive-color: var(--tilburg-feedback-positive-color); + --tilburg-status-badge-positive-background-color: var( --tilburg-feedback-positive-background-color ); + --tilburg-status-badge-informative-color: var( --tilburg-feedback-informative-color ); + --tilburg-status-badge-informative-background-color: var( --tilburg-feedback-informative-background-color ); + --tilburg-status-badge-font-family: var(--tilburg-document-font-family); + --tilburg-status-badge-font-weight: var(--tilburg-document-strong-font-weight); + --tilburg-status-badge-line-height: var(--tilburg-document-line-height); + --tilburg-form-control-hover-accent-color: var(--tilburg-interaction-hover-color); + --tilburg-form-control-active-accent-color: var( --tilburg-interaction-active-color ); + --tilburg-form-control-accent-color: var(--tilburg-interaction-color); + --utrecht-checkbox-indeterminate-hover-background-color: var( --tilburg-form-control-hover-accent-color ); + --utrecht-checkbox-indeterminate-active-background-color: var( --tilburg-form-control-active-accent-color ); + --utrecht-checkbox-indeterminate-background-color: var( --tilburg-form-control-accent-color ); + --utrecht-checkbox-checked-active-background-color: var( --tilburg-form-control-active-accent-color ); + --utrecht-checkbox-checked-hover-background-color: var( --tilburg-form-control-hover-accent-color ); + --tilburg-header-background-color: #ffffff; + --tilburg-footer-background-color: #238541; + --tilburg-footer-color: #ffffff; + --tilburg-footer-link-text-decoration: none; + --tilburg-footer-link-hover-text-decoration: underline; + --tilburg-logo-color: var(--tilburg-color-black); + --tilburg-search-card-hover-border-color: #238541; + --tilburg-search-card-border-color: var(--tilburg-color-gray-200); + --tilburg-navigation-font-weight: 700; + --tilburg-navigation-background-color: #1260a1; + --tilburg-navigation-color: #ffffff; + --tilburg-navigation-hover-font-weight: 700; + --tilburg-navigation-hover-background-color: #1260a1; + --tilburg-navigation-hover-color: #ffffff; + --tilburg-navigation-font-family: 'Montserrat', sans-serif; + --tilburg-navigation-mobile-item-border-bottom-color: var( --tilburg-color-blue-300 ); + --tilburg-navigation-mobile-background-color: var(--tilburg-color-blue-400); + --ams-date-input-background-color: var(--utrecht-textbox-background-color); + --ams-date-input-box-shadow: ''; + --ams-date-input-color: var(--utrecht-textbox-color); + --ams-date-input-font-family: var(--utrecht-textbox-font-family); + --ams-date-input-font-size: var(--utrecht-textbox-font-size); + --ams-date-input-font-weight: var(--utrecht-textbox-font-weight); + --ams-date-input-line-height: var(--utrecht-textbox-line-height); + --ams-date-input-min-block-size: var(--utrecht-textbox-min-block-size); + --ams-date-input-min-inline-size: var(--utrecht-textbox-min-inline-size); + --ams-date-input-outline-offset: var(--utrecht-textbox-outline-offset); + --ams-date-input-padding-block: var(--utrecht-textbox-padding-block-start); + --ams-date-input-padding-inline: var(--utrecht-textbox-padding-inline-start); + --ams-date-input-calender-picker-indicator-background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJXaW5kb3dUZXh0IiBkPSJNMjAgM2gtMVYxaC0ydjJIN1YxSDV2Mkg0Yy0xLjEgMC0yIC45LTIgMnYxNmMwIDEuMS45IDIgMiAyaDE2YzEuMSAwIDItLjkgMi0yVjVjMC0xLjEtLjktMi0yLTJ6bTAgMThINFY4aDE2djEzeiIvPjxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiLz48L3N2Zz4='); + --ams-date-input-hover-calender-picker-indicator-background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJXaW5kb3dUZXh0IiBkPSJNMjAgM2gtMVYxaC0ydjJIN1YxSDV2Mkg0Yy0xLjEgMC0yIC45LTIgMnYxNmMwIDEuMS45IDIgMiAyaDE2YzEuMSAwIDItLjkgMi0yVjVjMC0xLjEtLjktMi0yLTJ6bTAgMThINFY4aDE2djEzeiIvPjxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiLz48L3N2Zz4='); + --ams-date-input-border-color: var(--utrecht-textbox-border-color); + --ams-date-input-border-style: solid; + --ams-date-input-border-width: var(--utrecht-textbox-border-width); + --ams-date-input-border-radius: var(--utrecht-textbox-border-radius); + --ams-date-input-margin-block: var(--utrecht-textbox-margin-block); + --denhaag-sidenav-link-padding-block-end: 5px; + --denhaag-sidenav-link-padding-block-start: 5px; + --denhaag-sidenav-item-margin-inline-end: 0; + --denhaag-sidenav-item-margin-inline-start: 0; + --denhaag-sidenav-item-margin-block-end: 0; + --denhaag-sidenav-item-margin-block-start: 0; + --denhaag-sidenav-item-line-height: 1.5; + --denhaag-sidenav-item-height: 48px; + --denhaag-sidenav-mobile-display: none; + --denhaag-sidenav-min-width: 14.5rem; + --denhaag-sidenav-flex-direction: column; + --denhaag-sidenav-display: flex; + --denhaag-sidenav-link-active-font-weight: 700; + --denhaag-sidenav-link-active-color: var(--tilburg-interaction-color); + --denhaag-sidenav-link-hover-color: var(--tilburg-interaction-color); + --denhaag-sidenav-link-color: #2e2e2e; + --denhaag-sidenav-link-label-gap: 0.5rem; + --denhaag-sidenav-item-font-weight: 400; + --denhaag-sidenav-item-font-size: 16px; + --denhaag-sidenav-item-font-family: var(--utrecht-document-font-family); + --denhaag-sidenav-row-gap: 5px; + --utrecht-code-background-color: var(--tilburg-color-code-background-color); + --utrecht-code-color: var(--tilburg-document-color); + --utrecht-code-font-size: inherit; + --conduction-tabs-tab-background-color: transparent; + --conduction-tabs-tab-color: var(--utrecht-document-color); + --conduction-tabs-tab-border-width: unset; + --conduction-tabs-tab-border-style: unset; + --conduction-tabs-tab-border-color: unset; + --conduction-tabs-tab-border-bottom: unset; + --conduction-tabs-tab-border-bottom-width: unset; + --conduction-tabs-tab-border-bottom-style: unset; + --conduction-tabs-tab-border-bottom-color: unset; + --conduction-tabs-tab-bottom: -3px; + --conduction-tabs-tab-padding-block-start: 6px; + --conduction-tabs-tab-padding-block-end: 6px; + --conduction-tabs-tab-padding-inline-start: 12px; + --conduction-tabs-tab-padding-inline-end: 12px; + --conduction-tabs-tab-margin-inline-end: unset; + --conduction-tabs-tab-font-size: 16px; + --conduction-tabs-tab-font-weight: 400; + --conduction-tabs-tab-font-family: var(--utrecht-document-font-family); + --conduction-tabs-tab-max-width: unset; + --conduction-tabs-tab-min-height: 48px; + --conduction-tabs-tab-min-width: 160px; + --conduction-tabs-tab-letter-spacing: 0.02857em; + --conduction-tabs-tab-text-transform: unset; + --conduction-tabs-tab-button-bottom: 0px; + --conduction-tabs-scroll-button-background-color: var( --utrecht-button-primary-action-active-background-color ); + --conduction-tabs-scroll-button-color: var(--utrecht-button-primary-action-color); + --conduction-tabs-scroll-button-hover-background-color: var( --utrecht-button-primary-action-hover-background-color ); + --conduction-tabs-scroll-button-hover-color: var( --utrecht-button-primary-action-hover-color ); + --conduction-tabs-scroll-button-border-width: unset; + --conduction-tabs-scroll-button-border-style: unset; + --conduction-tabs-scroll-button-border-color: unset; + --conduction-tabs-tab-selected-background-color: transparent; + --conduction-tabs-tab-selected-color: var(--tilburg-color-blue-500); + --conduction-tabs-tab-selected-box-shadow: unset; + --conduction-tabs-tab-selected-border-width: unset; + --conduction-tabs-tab-selected-border-style: unset; + --conduction-tabs-tab-selected-border-color: unset; + --conduction-tabs-tab-selected-border-bottom: unset; + --conduction-tabs-tab-selected-border-bottom-width: 0.3rem; + --conduction-tabs-tab-selected-border-bottom-style: solid; + --conduction-tabs-tab-selected-border-bottom-color: #1260a1; + --conduction-tabs-tab-selected-font-weight: 700; + --conduction-tabs-tab-selected-font-family: unset; + --conduction-tabs-tab-selected-hover-background-color: unset; + --conduction-tabs-tab-selected-hover-color: var(--tilburg-color-blue-500); + --conduction-tabs-tab-selected-hover-text-decoration: unset; + --conduction-tabs-tab-selected-hover-font-weight: 700; + --conduction-tabs-tab-hover-background-color: transparent; + --conduction-tabs-tab-hover-color: var(--utrecht-document-color); + --conduction-tabs-tab-hover-text-decoration: unset; + --conduction-tabs-tab-hover-font-weight: 700; + --conduction-tabs-tab-list-padding-inline-start: 2px; + --conduction-tabs-tab-list-padding-inline-end: 2px; + --conduction-tabs-tab-list-margin-block-end: 0px; + --conduction-tabs-tab-list-border-bottom-width: 0.3rem; + --conduction-tabs-tab-list-border-bottom-style: solid; + --conduction-tabs-tab-list-border-bottom-color: #f2f2f2; + --conduction-tabs-tab-panel-background-color: unset; + --conduction-tabs-tab-panel-padding-block-start: 24px; + --conduction-tabs-tab-panel-padding-block-end: 24px; + --conduction-tabs-tab-panel-padding-inline-start: 24px; + --conduction-tabs-tab-panel-padding-inline-end: 24px; + --conduction-tabs-tab-panel-border-width: unset; + --conduction-tabs-tab-panel-border-style: unset; + --conduction-tabs-tab-panel-border-color: unset; + --conduction-tabs-tab-panel-border-top: unset; + --conduction-logo-header-inline-size: 96px; + --conduction-logo-header-block-size: 50px; + --conduction-logo-header-background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjE1MCAxNSA5NiA1MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PHBhdGggaWQ9ImEiIGQ9Ik01Ny4zOTYuMjExSC4yODF2NDkuNDA1aDU3LjExNVYuMjF6Ii8+PHBhdGggaWQ9ImMiIGQ9Ik01Ny41NjQuMjExSC40NDh2NDkuNDA1aDU3LjExNlYuMjF6Ii8+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTg3LjkzMSAxNSkiPjxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNhIi8+PC9tYXNrPjxwYXRoIGQ9Ik01Ny4zOTYgMjQuOTEzYzAtMTMuNTczLTExLjAwNC0yNC42MjItMjQuNTYtMjQuNy0uMDI0IDAtLjA0OC0uMDAzLS4wNzMtLjAwM0gyNC43NWEyLjUwNCAyLjUwNCAwIDEgMCAwIDUuMDFoNy45NDVjMTAuODU4IDAgMTkuNjk0IDguODM0IDE5LjY5NCAxOS42OTMgMCAxMC44Ni04LjgzNiAxOS42OTQtMTkuNjk0IDE5LjY5NEg1LjI4OXYtNC41NzhILjI4MXY5LjU4N2gzMi40ODJ2LS4wMDFjMTMuNTktLjA0IDI0LjYzMy0xMS4xMDUgMjQuNjMzLTI0LjcwMiIgZmlsbD0iIzAwOUZFNCIgbWFzaz0idXJsKCNiKSIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNTAgMTUpIj48bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+PHVzZSB4bGluazpocmVmPSIjYyIvPjwvbWFzaz48cGF0aCBkPSJNLjQ0OCAyNC45MTNjMCAxMy41NzMgMTEuMDA0IDI0LjYyMiAyNC41NiAyNC43LjAyNCAwIC4wNDguMDAzLjA3My4wMDNoOC4wMTRhMi41MDQgMi41MDQgMCAxIDAgMC01LjAwOWgtNy45NDRjLTEwLjg1OSAwLTE5LjY5NC04LjgzNC0xOS42OTQtMTkuNjk0IDAtMTAuODU5IDguODM1LTE5LjY5NCAxOS42OTQtMTkuNjk0aDI3LjQwNHY0LjU3OGg1LjAwOVYuMjFIMjUuMDh2LjAwMUMxMS40OS4yNTEuNDQ4IDExLjMxNi40NDggMjQuOTEzIiBmaWxsPSIjMDA5RkU0IiBtYXNrPSJ1cmwoI2QpIi8+PC9nPjxwYXRoIGZpbGw9IiMwMDQzODgiIGQ9Ik0xNzYuMDE3IDQyLjExNmwtNC42NzgtMTIuNDAxaC01LjY2NGw4LjE0IDIwLjM2NmgzLjkyMWw4LjQwMS0yMC4zNjZoLTUuMzYzem0yNi41NDIuNTU4bC03LjkyOC0xMi45NTloLTYuNDEzdjIwLjM2N2g0Ljk5N1YzNi43ODdsOC4xNSAxMy4yOTVoNi4xOVYyOS43MTVoLTQuOTk2em0xOS4zMjMtNC45NHY0LjY2M2gzLjUzN3YyLjY3N2E5Ljc3MyA5Ljc3MyAwIDAgMS0xLjQxNC41NGMtLjY1Mi4yMDMtMS40NDMuMzA2LTIuMzU0LjMwNi0uODggMC0xLjY4Ni0uMTUtMi4zOTQtLjQ0OGE1LjMzOCA1LjMzOCAwIDAgMS0xLjgyNC0xLjI0NyA1LjUyMiA1LjUyMiAwIDAgMS0xLjE3LTEuODk0Yy0uMjcyLS43MjktLjQxLTEuNTQ5LS40MS0yLjQzMyAwLS44NjcuMTM4LTEuNjgxLjQxLTIuNDJhNS41MDIgNS41MDIgMCAwIDEgMS4xNy0xLjkwOCA1LjM3NCA1LjM3NCAwIDAgMSAxLjgyNC0xLjI0NmMuNzA5LS4yOTggMS41MTQtLjQ0OSAyLjM5NC0uNDQ5IDEuMDY0IDAgMS45NTkuMTUxIDIuNjU3LjQ0OS43LjI5NyAxLjMzOC43NCAxLjg5OCAxLjMxOGwuMjQyLjI0OCAzLjUxNS0zLjgzNS0uMjM3LS4yMjFhOC45MjMgOC45MjMgMCAwIDAtMy42MjctMi4wMzhjLTEuMzUtLjM4Ni0yLjg0Ny0uNTgzLTQuNDQ4LS41ODMtMS41NzIgMC0zLjA0NC4yNS00LjM3My43NDVhMTAuMTM5IDEwLjEzOSAwIDAgMC0zLjQ4MSAyLjE0M2MtLjk3NS45MjgtMS43NDYgMi4wNjYtMi4yOSAzLjM4NC0uNTQzIDEuMzE1LS44MTkgMi44LS44MTkgNC40MTMgMCAxLjYxMy4yNzYgMy4wOTguODIgNC40MTMuNTQ1IDEuMzE5IDEuMzE0IDIuNDU3IDIuMjg5IDMuMzg0Ljk3NC45MjYgMi4xNDYgMS42NDcgMy40OCAyLjE0MyAxLjMzLjQ5NCAyLjgwMi43NDQgNC4zNzQuNzQ0IDEuNDY0IDAgMi45Mi0uMTUyIDQuMzMtLjQ1MmExNi4wNTQgMTYuMDU0IDAgMCAwIDQuMDktMS40NzhsLjE3Ny0uMDlWMzcuNzMzaC04LjM2NnoiLz48L2c+PC9zdmc+'); + --conduction-logo-footer-inline-size: 96px; + --conduction-logo-footer-block-size: 50px; + --conduction-logo-footer-background-image: url(data:image/png;base64,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YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNC40LjAtRXhpdjIiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iCiAgICB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6R0lNUD0iaHR0cDovL3d3dy5naW1wLm9yZy94bXAvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDphZGFkMjJhMy0zOGE2LWU5NDEtYjUwYi02MDM2MGVkOWMzNDgiCiAgIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6YmUwZmE4ZjktYjUzNy00MjY1LTk1NDAtYWIxYmI5Zjk1NDVjIgogICB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6Mjc5YzZkZGItMjBkZS1jMTQyLWIwZWItMzdlODc2YjIzMzIxIgogICBkYzpmb3JtYXQ9ImltYWdlL3BuZyIKICAgR0lNUDpBUEk9IjIuMCIKICAgR0lNUDpQbGF0Zm9ybT0iV2luZG93cyIKICAgR0lNUDpUaW1lU3RhbXA9IjE3NDEzNTUxMjMxNTc4NDYiCiAgIEdJTVA6VmVyc2lvbj0iMi4xMC4zMiIKICAgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIKICAgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIgogICB0aWZmOk9yaWVudGF0aW9uPSIxIgogICB4bXA6Q3JlYXRlRGF0ZT0iMjAyMC0wMi0yNlQxNToyODo0MCswMTowMCIKICAgeG1wOkNyZWF0b3JUb29sPSJHSU1QIDIuMTAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjU6MDM6MDdUMTQ6NDU6MjErMDE6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDI1OjAzOjA3VDE0OjQ1OjIxKzAxOjAwIj4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIKICAgICAgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDoyNzljNmRkYi0yMGRlLWMxNDItYjBlYi0zN2U4NzZiMjMzMjEiCiAgICAgIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4xIChXaW5kb3dzKSIKICAgICAgc3RFdnQ6d2hlbj0iMjAyMC0wMi0yNlQxNToyODo0MCswMTowMCIvPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJzYXZlZCIKICAgICAgc3RFdnQ6Y2hhbmdlZD0iLyIKICAgICAgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo5NWM5MThhZS1iOGM3LWE2NDgtOGNjOS05MzJiMDBkYWFmMjgiCiAgICAgIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4xIChXaW5kb3dzKSIKICAgICAgc3RFdnQ6d2hlbj0iMjAyMC0wMi0yNlQxNToyODo0MCswMTowMCIvPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJzYXZlZCIKICAgICAgc3RFdnQ6Y2hhbmdlZD0iLyIKICAgICAgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo1MzIwMTAyMS05ODZmLTQ2YjgtYmU0Mi1jYmY5MGM3NDQ4ZDciCiAgICAgIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkdpbXAgMi4xMCAoV2luZG93cykiCiAgICAgIHN0RXZ0OndoZW49IjIwMjUtMDMtMDdUMTQ6NDU6MjMiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgIAo8P3hwYWNrZXQgZW5kPSJ3Ij8+4lFtDQAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+kDBw0tF4zJ7vgAACAASURBVHja7J15nFTF1fd/p+p298zAAAMMMsM67LILAioYVFSSYASjRiSiaEABBaNZnpg8mryaR58sSiIGVFxQUVDxcQsuEZRVBQXZFRRBUUERWWfrvlXn/aNuzwxqItB3mO6Z8/Uz0QlDT/etqvOrc+rUOYAgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCNUIySOonTAzy1MQMt5AEZGsjfR6foIIuiDCLQg1KkiyVkTwRdAFEW9ByGDRYeYSANnyJEXgRdAFEW5ByFCRkbUkAi+CLoiIC4KIuSACn1F48ghExAVBEI7UZom4i4cuC0JEXBCq3SOUdSaeu3jogoi4IAiCeO7ioQsi5IJQ056frDvx3MVDF0TEBUEQqsEeirCLoIuQC4IgiLALIugi5IIgCOlqL0XcRdBFyAVBEMRrF0TQRcgFQRBE2GsnSh7B4U86EXNBEARxlsRDl0kmCIIg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); + --conduction-logo-navbar-inline-size: 96px; + --conduction-logo-navbar-block-size: 50px; + --conduction-logo-navbar-background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjE1MCAxNSA5NiA1MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PHBhdGggaWQ9ImEiIGQ9Ik01Ny4zOTYuMjExSC4yODF2NDkuNDA1aDU3LjExNVYuMjF6Ii8+PHBhdGggaWQ9ImMiIGQ9Ik01Ny41NjQuMjExSC40NDh2NDkuNDA1aDU3LjExNlYuMjF6Ii8+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTg3LjkzMSAxNSkiPjxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNhIi8+PC9tYXNrPjxwYXRoIGQ9Ik01Ny4zOTYgMjQuOTEzYzAtMTMuNTczLTExLjAwNC0yNC42MjItMjQuNTYtMjQuNy0uMDI0IDAtLjA0OC0uMDAzLS4wNzMtLjAwM0gyNC43NWEyLjUwNCAyLjUwNCAwIDEgMCAwIDUuMDFoNy45NDVjMTAuODU4IDAgMTkuNjk0IDguODM0IDE5LjY5NCAxOS42OTMgMCAxMC44Ni04LjgzNiAxOS42OTQtMTkuNjk0IDE5LjY5NEg1LjI4OXYtNC41NzhILjI4MXY5LjU4N2gzMi40ODJ2LS4wMDFjMTMuNTktLjA0IDI0LjYzMy0xMS4xMDUgMjQuNjMzLTI0LjcwMiIgZmlsbD0iIzAwOUZFNCIgbWFzaz0idXJsKCNiKSIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNTAgMTUpIj48bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+PHVzZSB4bGluazpocmVmPSIjYyIvPjwvbWFzaz48cGF0aCBkPSJNLjQ0OCAyNC45MTNjMCAxMy41NzMgMTEuMDA0IDI0LjYyMiAyNC41NiAyNC43LjAyNCAwIC4wNDguMDAzLjA3My4wMDNoOC4wMTRhMi41MDQgMi41MDQgMCAxIDAgMC01LjAwOWgtNy45NDRjLTEwLjg1OSAwLTE5LjY5NC04LjgzNC0xOS42OTQtMTkuNjk0IDAtMTAuODU5IDguODM1LTE5LjY5NCAxOS42OTQtMTkuNjk0aDI3LjQwNHY0LjU3OGg1LjAwOVYuMjFIMjUuMDh2LjAwMUMxMS40OS4yNTEuNDQ4IDExLjMxNi40NDggMjQuOTEzIiBmaWxsPSIjMDA5RkU0IiBtYXNrPSJ1cmwoI2QpIi8+PC9nPjxwYXRoIGZpbGw9IiMwMDQzODgiIGQ9Ik0xNzYuMDE3IDQyLjExNmwtNC42NzgtMTIuNDAxaC01LjY2NGw4LjE0IDIwLjM2NmgzLjkyMWw4LjQwMS0yMC4zNjZoLTUuMzYzem0yNi41NDIuNTU4bC03LjkyOC0xMi45NTloLTYuNDEzdjIwLjM2N2g0Ljk5N1YzNi43ODdsOC4xNSAxMy4yOTVoNi4xOVYyOS43MTVoLTQuOTk2em0xOS4zMjMtNC45NHY0LjY2M2gzLjUzN3YyLjY3N2E5Ljc3MyA5Ljc3MyAwIDAgMS0xLjQxNC41NGMtLjY1Mi4yMDMtMS40NDMuMzA2LTIuMzU0LjMwNi0uODggMC0xLjY4Ni0uMTUtMi4zOTQtLjQ0OGE1LjMzOCA1LjMzOCAwIDAgMS0xLjgyNC0xLjI0NyA1LjUyMiA1LjUyMiAwIDAgMS0xLjE3LTEuODk0Yy0uMjcyLS43MjktLjQxLTEuNTQ5LS40MS0yLjQzMyAwLS44NjcuMTM4LTEuNjgxLjQxLTIuNDJhNS41MDIgNS41MDIgMCAwIDEgMS4xNy0xLjkwOCA1LjM3NCA1LjM3NCAwIDAgMSAxLjgyNC0xLjI0NmMuNzA5LS4yOTggMS41MTQtLjQ0OSAyLjM5NC0uNDQ5IDEuMDY0IDAgMS45NTkuMTUxIDIuNjU3LjQ0OS43LjI5NyAxLjMzOC43NCAxLjg5OCAxLjMxOGwuMjQyLjI0OCAzLjUxNS0zLjgzNS0uMjM3LS4yMjFhOC45MjMgOC45MjMgMCAwIDAtMy42MjctMi4wMzhjLTEuMzUtLjM4Ni0yLjg0Ny0uNTgzLTQuNDQ4LS41ODMtMS41NzIgMC0zLjA0NC4yNS00LjM3My43NDVhMTAuMTM5IDEwLjEzOSAwIDAgMC0zLjQ4MSAyLjE0M2MtLjk3NS45MjgtMS43NDYgMi4wNjYtMi4yOSAzLjM4NC0uNTQzIDEuMzE1LS44MTkgMi44LS44MTkgNC40MTMgMCAxLjYxMy4yNzYgMy4wOTguODIgNC40MTMuNTQ1IDEuMzE5IDEuMzE0IDIuNDU3IDIuMjg5IDMuMzg0Ljk3NC45MjYgMi4xNDYgMS42NDcgMy40OCAyLjE0MyAxLjMzLjQ5NCAyLjgwMi43NDQgNC4zNzQuNzQ0IDEuNDY0IDAgMi45Mi0uMTUyIDQuMzMtLjQ1MmExNi4wNTQgMTYuMDU0IDAgMCAwIDQuMDktMS40NzhsLjE3Ny0uMDlWMzcuNzMzaC04LjM2NnoiLz48L2c+PC9zdmc+'); + --conduction-primary-top-nav-padding-block-start: 16px; + --conduction-primary-top-nav-padding-block-end: 16px; + --conduction-primary-top-nav-padding-inline-start: 16px; + --conduction-primary-top-nav-padding-inline-end: 16px; + --conduction-primary-top-nav-item-padding: 18px; + --conduction-primary-top-nav-current-background-color: #1260a1; + --conduction-primary-top-nav-dropdown-current-mobile-box-shadow: unset; + --conduction-primary-top-nav-dropdown-current-box-shadow: unset; + --conduction-primary-top-nav-dropdown-current-background-color: #dbecfa; + --conduction-primary-top-nav-dropdown-current-color: #000000; + --conduction-primary-top-nav-dropdown-hover-text-decoration: underline; + --conduction-primary-top-nav-dropdown-text-decoration: none; + --conduction-primary-top-nav-dropdown-hover-background-color: #dbecfa; + --conduction-primary-top-nav-dropdown-hover-color: #000000; + --conduction-primary-top-nav-dropdown-background-color: #dbecfa; + --conduction-primary-top-nav-dropdown-color: #000000; + --conduction-primary-top-nav-current-mobile-box-shadow: unset; + --conduction-primary-top-nav-current-box-shadow: unset; + --conduction-primary-top-nav-current-color: #ffffff; + --conduction-primary-top-nav-hover-background-color: #1260a1; + --conduction-primary-top-nav-hover-color: #ffffff; + --conduction-primary-top-nav-background-color: #1260a1; + --conduction-primary-top-nav-color: #ffffff; + --conduction-tooltip-z-index: 9999; + --conduction-tooltip-border-radius: 0px; + --conduction-tooltip-border-color: unset; + --conduction-tooltip-border-style: unset; + --conduction-tooltip-border-width: 0px; + --conduction-tooltip-padding-inline-end: 14px; + --conduction-tooltip-padding-inline-start: 14px; + --conduction-tooltip-padding-block-end: 8px; + --conduction-tooltip-padding-block-start: 8px; + --conduction-tooltip-color: var(--tilburg-color-white); + --conduction-tooltip-background-color: var(--tilburg-color-black); + --utrecht-alert-ok-border-color: #7eb67c; + --utrecht-alert-ok-border-width: 1px; - /* Header - Den Haag uses green header */ - --nldesign-color-header-background: #1a7a3e; - --nldesign-color-header-text: #ffffff; - - /* Navigation */ - --nldesign-color-nav-background: #ffffff; - - /* Text colors */ - --nldesign-color-text: #333333; - --nldesign-color-text-muted: #666666; + /* --- D. --nldesign-* semantic layer --- */ + --nldesign-color-primary: #238541; + --nldesign-color-primary-hover: #1e6c35; + --nldesign-color-primary-text: #ffffff; + --nldesign-color-primary-light: #d5e7d5; + --nldesign-color-primary-light-hover: #d5e7d5; + --nldesign-color-text: #2e2e2e; + --nldesign-color-text-muted: #4a4a4a; --nldesign-color-text-light: #ffffff; - - /* Status colors */ - --nldesign-color-error: #d52d2d; - --nldesign-color-error-rgb: 213, 45, 45; - --nldesign-color-error-hover: #aa2424; - --nldesign-color-warning: #ec6d23; - --nldesign-color-warning-rgb: 236, 109, 35; - --nldesign-color-success: #1a7a3e; - --nldesign-color-success-rgb: 26, 122, 62; - --nldesign-color-info: #1261a3; - --nldesign-color-info-rgb: 18, 97, 163; - - /* Border colors */ - --nldesign-color-border: #cccccc; - --nldesign-color-border-dark: #999999; - - /* Focus color */ - --nldesign-color-focus: rgba(18, 97, 163, 0.5); - --nldesign-color-focus-rgb: 18, 97, 163; - - /* Link colors */ - --nldesign-color-link: #1261a3; - --nldesign-color-link-hover: #1a7a3e; - --nldesign-color-link-visited: #6b3fa0; - - /* Button colors */ - --nldesign-color-button-primary-background: #1a7a3e; + --nldesign-color-link: #1260a1; + --nldesign-color-link-hover: #094b81; + --nldesign-color-link-visited: #1260a1; + --nldesign-color-border: #d1d1d1; + --nldesign-color-border-dark: #7a7a7a; + --nldesign-color-background-hover: #f9f8f6; + --nldesign-color-background-dark: #f2f2f2; + --nldesign-color-background-darker: #d1d1d1; + --nldesign-color-placeholder-light: #f2f2f2; + --nldesign-color-placeholder-dark: #d1d1d1; + --nldesign-color-header-background: #ffffff; + --nldesign-color-header-text: #2e2e2e; + --nldesign-color-nav-background: #ffffff; + --nldesign-color-button-primary-background: #238541; + --nldesign-color-button-primary-border: #238541; + --nldesign-color-button-primary-hover: #1e6c35; --nldesign-color-button-primary-text: #ffffff; - --nldesign-color-button-primary-border: #1a7a3e; - --nldesign-color-button-primary-hover: #156633; - - /* Typography */ - --nldesign-font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif; - - /* Border radius */ - --nldesign-border-radius: 4px; - --nldesign-border-radius-small: 2px; - --nldesign-border-radius-large: 8px; - --nldesign-border-radius-rounded: 28px; + --nldesign-color-error: #a30500; + --nldesign-color-error-hover: #520100; + --nldesign-color-warning: #df5601; + --nldesign-color-success: #1e6c35; + --nldesign-color-info: #094b81; + --nldesign-color-focus: #806400; + --nldesign-color-error-rgb: 163, 5, 0; + --nldesign-color-warning-rgb: 223, 86, 1; + --nldesign-color-success-rgb: 30, 108, 53; + --nldesign-color-info-rgb: 9, 75, 129; + --nldesign-logo-url: url('../../img/logos/denhaag.svg'); + --nldesign-font-family: "TheSans", "Fira Sans", sans-serif; + --nldesign-border-radius: 3px; + --nldesign-border-radius-small: 3px; + --nldesign-border-radius-large: 3px; + --nldesign-border-radius-rounded: 3px; --nldesign-border-radius-pill: 100px; } diff --git a/css/tokens/esdoornveen.css b/css/tokens/esdoornveen.css new file mode 100644 index 000000000..58490e924 --- /dev/null +++ b/css/tokens/esdoornveen.css @@ -0,0 +1,202 @@ +/** + * Esdoornveen, mbo college Design Tokens + * + * Esdoornveen, mbo college is a school in Zuiddrecht, the demo town that does not exist, + * so a demonstration never borrows the house style of a real school. The + * palette is Conduction's own design for it (openspec/changes/school-token-sets). + * Learning that leads to a trade: practical and grown-up, closer to a professional tool than to a school. + * + * #5B2E91 (plum) is the interactive colour for buttons, links and focus, + * #43206E its hover. #C2255C (maple rose) is the accent, NOT the interactive + * primary: it marks the selected navigation entry (a soft wash with a + * #9C1C49 label) and the count badge in the navigation. Urgency is always the + * red status colour with words, never the accent alone. + * + * THE WORKPLACE LOOK. Like zuiddrecht, this set wears the light workplace + * layout: a white top bar with dark text, a white app navigation, a grey + * workspace (#F5F6F8) and white cards with a hairline border. token-sets.json + * turns the workplace layout on for this set (its `layout` block), and an + * administrator can switch it off again. + * + * Every text pair below reaches WCAG AA (4.5:1), computed, not estimated: + * white on #5B2E91 9.36, #5B2E91 on white 9.36 and on the workspace 8.65, + * #43206E on #F0EAF7 10.67, #1B1C1D on white 17.07, #5E6168 on white 6.20 and + * on the workspace 5.74, #B30000 on white 7.20 and on the workspace + * 6.66, #9C1C49 on the selected-entry wash #F5DCE5 6.07, + * #ffffff on #C2255C 5.66, #1E6B2A on #E7F3EA 5.77, #7A4F00 on #FFF4DE + * 6.53, #A30000 on #FCEDEC 7.22. + */ + +:root { + /* Primary interactive colour */ + --nldesign-color-primary: #5B2E91; + --nldesign-color-primary-text: #ffffff; + --nldesign-color-primary-hover: #43206E; + --nldesign-color-primary-light: #F0EAF7; + /* Not in the design: the primary-light tint with 7% of the primary mixed + * in, the step zuiddrecht's #DCE6F2 takes from its #EAF0F7. */ + --nldesign-color-primary-light-hover: #E6DDF0; + + /* Esdoornveen, mbo college palette */ + --esdoornveen-color-main: #5B2E91; + --esdoornveen-color-main-deep: #43206E; + --esdoornveen-color-main-light: #F0EAF7; + --esdoornveen-color-accent: #C2255C; + --esdoornveen-color-accent-light: #FBE9F0; + --esdoornveen-color-accent-text: #9C1C49; + --esdoornveen-color-ink: #1B1C1D; + --esdoornveen-color-muted: #5E6168; + --esdoornveen-color-line: #E4E6EA; + --esdoornveen-color-surface: #F5F6F8; + + /* Codes (crebo numbers, exam codes) in IBM Plex Mono. No layer reads a + * code face yet, so it is a palette entry the apps can pick up. */ + --esdoornveen-font-family-code: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + + /* Logo image */ + --nldesign-logo-url: url('../../img/logos/esdoornveen.svg'); + /* The logo is a wordmark, 3.97 times as wide as it is high. + * 127px gives it 32px of height in Nextcloud's header. */ + --nldesign-logo-width: 127px; + + /* Background colours, for hover states and the darker steps. The main + * background is managed by Nextcloud's theming system. */ + --nldesign-color-background-hover: #F0F1F3; + --nldesign-color-background-dark: #EDEFF2; + --nldesign-color-background-darker: #D3D8DF; + + /* Header: white with dark text and a hairline under it (as zuiddrecht) */ + --nldesign-color-header-background: #ffffff; + --nldesign-color-header-text: #1B1C1D; + --nldesign-header-border-bottom: 1px solid rgba(138, 146, 158, 0.25); + + /* Navigation */ + --nldesign-color-nav-background: #ffffff; + + /* Text colours: Cunningham's ink, and #5E6168 for muted text (Cunningham's + * own #74777c is 4.49:1 on white, just under AA). */ + --nldesign-color-text: #1B1C1D; + --nldesign-color-text-muted: #5E6168; + --nldesign-color-text-light: #ffffff; + + /* Status colours. Error is the design's #B30000; its hover is the dark red + * of the overdue pill. */ + --nldesign-color-error: #B30000; + --nldesign-color-error-rgb: 179, 0, 0; + --nldesign-color-error-hover: #A30000; + --nldesign-color-warning: #7A4F00; + --nldesign-color-warning-rgb: 122, 79, 0; + --nldesign-color-success: #1E6B2A; + --nldesign-color-success-rgb: 30, 107, 42; + --nldesign-color-info: #5B2E91; + --nldesign-color-info-rgb: 91, 46, 145; + + /* Border colours. The hairline is for cards and dividers. The design's + * field border #C4C7CB is 1.7:1 against white, under the 3:1 a control + * border needs, so controls take zuiddrecht's #8A929E (3.14). */ + --nldesign-color-border: #E4E6EA; + --nldesign-color-border-dark: #8A929E; + + /* Focus colour */ + --nldesign-color-focus: rgba(91, 46, 145, 0.5); + --nldesign-color-focus-rgb: 91, 46, 145; + + /* Link colours (the interactive colour, not the accent) */ + --nldesign-color-link: #5B2E91; + --nldesign-color-link-hover: #43206E; + + /* Button colours */ + --nldesign-color-button-primary-background: #5B2E91; + --nldesign-color-button-primary-text: #ffffff; + --nldesign-color-button-primary-border: #5B2E91; + --nldesign-color-button-primary-hover: #43206E; + + /* Typography: IBM Plex Sans in 400, 500, 600 and 700, and IBM Plex Mono in 400 and 500 for codes such as crebo numbers and exam codes, both bundled by thematiq. */ + --nldesign-font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; + + /* Border radius: NEXTCLOUD'S SCALE, NOT THE WEBSITE'S. The workplace keeps + * 8px controls and 12px containers, for the reason zuiddrecht.css and + * cunningham.css give: a near-square or rounder brand radius would reshape + * the Nextcloud chrome. Literals, not var(): overrides.css maps + * Nextcloud's scale FROM these tokens. */ + --nldesign-border-radius: 8px; + --nldesign-border-radius-small: 4px; + --nldesign-border-radius-large: 12px; + --nldesign-border-radius-rounded: 28px; + --nldesign-border-radius-pill: 100px; + + /* The website's own corners: 4px for buttons and fields, 8px for cards. + * Only css/public-bridge.css reads these, on a public portal. */ + --nldesign-website-border-radius: 4px; + --nldesign-website-border-radius-large: 8px; + + /* The selected navigation entry: the accent, where Nextcloud uses the + * primary colour. Nextcloud 34 and later draw it as a 16% wash of this + * colour (#F5DCE5 on white, the design's #FBE9F0) with the + * #9C1C49 label on it at 6.07:1. */ + --nldesign-component-navigation-active-background-color: #C2255C; + --nldesign-component-navigation-active-color: #9C1C49; + + /* The count badge in the navigation: the accent with white on it (5.66:1). */ + --nldesign-component-navigation-badge-background-color: #C2255C; + --nldesign-component-navigation-badge-color: #ffffff; + + /* The workspace: a grey surface that white cards sit on, with a very + * light shadow (4% ink). */ + --nldesign-component-content-surface-background-color: #F5F6F8; + --nldesign-component-content-card-shadow-color: rgba(27, 28, 29, 0.04); + + /* Status pills, fixed for the four school sets: received is the + * primary's own tint. info 10.67:1, success 5.77:1, warning 6.53:1, error 7.22:1. */ + --nldesign-component-status-badge-info-background-color: #F0EAF7; + --nldesign-component-status-badge-info-color: #43206E; + --nldesign-component-status-badge-success-background-color: #E7F3EA; + --nldesign-component-status-badge-success-color: #1E6B2A; + --nldesign-component-status-badge-warning-background-color: #FFF4DE; + --nldesign-component-status-badge-warning-color: #7A4F00; + --nldesign-component-status-badge-error-background-color: #FCEDEC; + --nldesign-component-status-badge-error-color: #A30000; + + /* The login watermark: the emblem in grey, large and faint, in the bottom + * corner of the login page while the workplace layout is light. */ + --nldesign-login-watermark-image: url('../../img/logos/esdoornveen-emblem-grey.svg'); + --nldesign-login-watermark-opacity: 0.06; + + /* The motif, "de snede": a slanted cut like the edge of a maple leaf, a 6px plum band with one rose segment whose ends are cut at 32 degrees. Drawn + * along the top bar and the login card while the brand stripe is on. + * The segment is the one on the designed login card: 96px wide, 32px from the start, its ends slanted as skewX(-32deg) draws them. A gradient at 122 degrees has edges 32 degrees off vertical, and along it a point at x and mid-height y = 3 lies at 0.848x + 1.59px, so 32px and 128px become 28.73px and 110.13px. The three colours are for the component library, which draws flat bands only: plum, rose, plum in the ratio 1 : 3 : 10. */ + --nldesign-brand-stripe-color-1: #5B2E91; + --nldesign-brand-stripe-color-2: #C2255C; + --nldesign-brand-stripe-color-3: #5B2E91; + --nldesign-brand-stripe-ratio-1: 1; + --nldesign-brand-stripe-ratio-2: 3; + --nldesign-brand-stripe-ratio-3: 10; + --nldesign-brand-stripe-height: 6px; + --nldesign-brand-stripe-image: linear-gradient(122deg, #5B2E91 0 28.73px, #C2255C 28.73px 110.13px, #5B2E91 110.13px); + /* Over the footer the cut sits at the other end, mirrored. */ + --nldesign-brand-stripe-image-inverse: linear-gradient(238deg, #5B2E91 0 28.73px, #C2255C 28.73px 110.13px, #5B2E91 110.13px); + + /* THE WEBSITE (openspec/changes/brand-motif-on-portals). Read only by + * css/public-bridge.css, which a portal links and an instance page never + * does. + * The accent (maple rose): the menu item on screen, count badges and the + * "today first" card. Never a button or a link colour. */ + --nldesign-color-accent: #C2255C; + --nldesign-color-accent-light: #FBE9F0; + --nldesign-color-accent-text: #9C1C49; + /* The footer band: the primary's deep step, white text on it. */ + --nldesign-color-footer-background: #43206E; + --nldesign-color-footer-text: #ffffff; + /* The logo in the site header and footer, 50px high. It carries the + * name, so the portal keeps its title for screen readers only. */ + --nldesign-website-logo-height: 50px; + --nldesign-website-logo-width: 198px; + --nldesign-website-logo-text-size: 0; + /* The hero on the website: a light ground with dark type, the first + * button in the primary colour. */ + --nldesign-hero-background-color: #ffffff; + --nldesign-hero-title-color: #1B1C1D; + --nldesign-hero-body-color: #1B1C1D; + --nldesign-hero-action-background-color: #5B2E91; + --nldesign-hero-action-color: #ffffff; +} diff --git a/css/tokens/vaartveld.css b/css/tokens/vaartveld.css new file mode 100644 index 000000000..d818437e3 --- /dev/null +++ b/css/tokens/vaartveld.css @@ -0,0 +1,204 @@ +/** + * Vaartveld College Design Tokens + * + * Vaartveld College is a school in Zuiddrecht, the demo town that does not exist, + * so a demonstration never borrows the house style of a real school. The + * palette is Conduction's own design for it (openspec/changes/school-token-sets). + * The long view down the canal: clear, confident and a little bold, for pupils of 12 to 18. + * + * #1F4FD8 (cobalt) is the interactive colour for buttons, links and focus, + * #14338F its hover. #1FB5A8 (aqua) is the accent, NOT the interactive + * primary: it marks the selected navigation entry (a soft wash with a + * #0B6259 label) and the count badge in the navigation. Urgency is always the + * red status colour with words, never the accent alone. + * + * THE WORKPLACE LOOK. Like zuiddrecht, this set wears the light workplace + * layout: a white top bar with dark text, a white app navigation, a grey + * workspace (#F5F6F8) and white cards with a hairline border. token-sets.json + * turns the workplace layout on for this set (its `layout` block), and an + * administrator can switch it off again. + * + * Every text pair below reaches WCAG AA (4.5:1), computed, not estimated: + * white on #1F4FD8 6.63, #1F4FD8 on white 6.63 and on the workspace 6.13, + * #14338F on #E8EEFC 9.51, #1B1C1D on white 17.07, #5E6168 on white 6.20 and + * on the workspace 5.74, #B30000 on white 7.20 and on the workspace + * 6.66, #0B6259 on the selected-entry wash #DBF3F1 6.23, + * #1A1A1A on #1FB5A8 6.82, #1E6B2A on #E7F3EA 5.77, #7A4F00 on #FFF4DE + * 6.53, #A30000 on #FCEDEC 7.22. + */ + +:root { + /* Primary interactive colour */ + --nldesign-color-primary: #1F4FD8; + --nldesign-color-primary-text: #ffffff; + --nldesign-color-primary-hover: #14338F; + --nldesign-color-primary-light: #E8EEFC; + /* Not in the design: the primary-light tint with 7% of the primary mixed + * in, the step zuiddrecht's #DCE6F2 takes from its #EAF0F7. */ + --nldesign-color-primary-light-hover: #DAE3F9; + + /* Vaartveld College palette */ + --vaartveld-color-main: #1F4FD8; + --vaartveld-color-main-deep: #14338F; + --vaartveld-color-main-light: #E8EEFC; + --vaartveld-color-accent: #1FB5A8; + --vaartveld-color-accent-light: #DDF5F2; + --vaartveld-color-accent-text: #0B6259; + --vaartveld-color-ink: #1B1C1D; + --vaartveld-color-muted: #5E6168; + --vaartveld-color-line: #E4E6EA; + --vaartveld-color-surface: #F5F6F8; + + /* Logo image */ + --nldesign-logo-url: url('../../img/logos/vaartveld.svg'); + /* The logo is a wordmark, 3.47 times as wide as it is high. + * 111px gives it 32px of height in Nextcloud's header. */ + --nldesign-logo-width: 111px; + + /* Background colours, for hover states and the darker steps. The main + * background is managed by Nextcloud's theming system. */ + --nldesign-color-background-hover: #F0F1F3; + --nldesign-color-background-dark: #EDEFF2; + --nldesign-color-background-darker: #D3D8DF; + + /* Header: white with dark text and a hairline under it (as zuiddrecht) */ + --nldesign-color-header-background: #ffffff; + --nldesign-color-header-text: #1B1C1D; + --nldesign-header-border-bottom: 1px solid rgba(138, 146, 158, 0.25); + + /* Navigation */ + --nldesign-color-nav-background: #ffffff; + + /* Text colours: Cunningham's ink, and #5E6168 for muted text (Cunningham's + * own #74777c is 4.49:1 on white, just under AA). */ + --nldesign-color-text: #1B1C1D; + --nldesign-color-text-muted: #5E6168; + --nldesign-color-text-light: #ffffff; + + /* Status colours. Error is the design's #B30000; its hover is the dark red + * of the overdue pill. */ + --nldesign-color-error: #B30000; + --nldesign-color-error-rgb: 179, 0, 0; + --nldesign-color-error-hover: #A30000; + --nldesign-color-warning: #7A4F00; + --nldesign-color-warning-rgb: 122, 79, 0; + --nldesign-color-success: #1E6B2A; + --nldesign-color-success-rgb: 30, 107, 42; + --nldesign-color-info: #1F4FD8; + --nldesign-color-info-rgb: 31, 79, 216; + + /* Border colours. The hairline is for cards and dividers. The design's + * field border #C4C7CB is 1.7:1 against white, under the 3:1 a control + * border needs, so controls take zuiddrecht's #8A929E (3.14). */ + --nldesign-color-border: #E4E6EA; + --nldesign-color-border-dark: #8A929E; + + /* Focus colour */ + --nldesign-color-focus: rgba(31, 79, 216, 0.5); + --nldesign-color-focus-rgb: 31, 79, 216; + + /* Link colours (the interactive colour, not the accent) */ + --nldesign-color-link: #1F4FD8; + --nldesign-color-link-hover: #14338F; + + /* Button colours */ + --nldesign-color-button-primary-background: #1F4FD8; + --nldesign-color-button-primary-text: #ffffff; + --nldesign-color-button-primary-border: #1F4FD8; + --nldesign-color-button-primary-hover: #14338F; + + /* Typography: Red Hat Text in 400, 500, 600 and 700 for text, Red Hat Display in 600, 700 and 800 for headings, both bundled by thematiq. */ + --nldesign-font-family: 'Red Hat Text', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; + + /* Headings: their own face. Nextcloud's headings read this token, and + * css/public-bridge.css hands it to the website's headings. */ + --nldesign-component-heading-font-family: 'Red Hat Display', 'Red Hat Text', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; + + /* Border radius: NEXTCLOUD'S SCALE, NOT THE WEBSITE'S. The workplace keeps + * 8px controls and 12px containers, for the reason zuiddrecht.css and + * cunningham.css give: a near-square or rounder brand radius would reshape + * the Nextcloud chrome. Literals, not var(): overrides.css maps + * Nextcloud's scale FROM these tokens. */ + --nldesign-border-radius: 8px; + --nldesign-border-radius-small: 4px; + --nldesign-border-radius-large: 12px; + --nldesign-border-radius-rounded: 28px; + --nldesign-border-radius-pill: 100px; + + /* The website's own corners: 6px for buttons and fields, 10px for cards. + * Only css/public-bridge.css reads these, on a public portal. */ + --nldesign-website-border-radius: 6px; + --nldesign-website-border-radius-large: 10px; + + /* The selected navigation entry: the accent, where Nextcloud uses the + * primary colour. Nextcloud 34 and later draw it as a 16% wash of this + * colour (#DBF3F1 on white, the design's #DDF5F2) with the + * #0B6259 label on it at 6.23:1. */ + --nldesign-component-navigation-active-background-color: #1FB5A8; + --nldesign-component-navigation-active-color: #0B6259; + + /* The count badge in the navigation: the accent with ink on it (6.82:1). */ + --nldesign-component-navigation-badge-background-color: #1FB5A8; + --nldesign-component-navigation-badge-color: #1A1A1A; + + /* The workspace: a grey surface that white cards sit on, with a very + * light shadow (4% ink). */ + --nldesign-component-content-surface-background-color: #F5F6F8; + --nldesign-component-content-card-shadow-color: rgba(27, 28, 29, 0.04); + + /* Status pills, fixed for the four school sets: received is the + * primary's own tint. info 9.51:1, success 5.77:1, warning 6.53:1, error 7.22:1. */ + --nldesign-component-status-badge-info-background-color: #E8EEFC; + --nldesign-component-status-badge-info-color: #14338F; + --nldesign-component-status-badge-success-background-color: #E7F3EA; + --nldesign-component-status-badge-success-color: #1E6B2A; + --nldesign-component-status-badge-warning-background-color: #FFF4DE; + --nldesign-component-status-badge-warning-color: #7A4F00; + --nldesign-component-status-badge-error-background-color: #FCEDEC; + --nldesign-component-status-badge-error-color: #A30000; + + /* The login watermark: the emblem in grey, large and faint, in the bottom + * corner of the login page while the workplace layout is light. */ + --nldesign-login-watermark-image: url('../../img/logos/vaartveld-emblem-grey.svg'); + --nldesign-login-watermark-opacity: 0.08; + + /* The motif, "de vaart": the canal and its bank, a 4px cobalt line, 3px of ground and a 2px aqua line. Drawn + * along the top bar and the login card while the brand stripe is on. + * The 3px between the two lines is transparent rather than white, so it is the ground of the bar it sits on in the dark as well. The three colours are for the component library, which draws flat bands only: cobalt, aqua, cobalt in the ratio 4 : 2 : 4, the weights of the two lines. */ + --nldesign-brand-stripe-color-1: #1F4FD8; + --nldesign-brand-stripe-color-2: #1FB5A8; + --nldesign-brand-stripe-color-3: #1F4FD8; + --nldesign-brand-stripe-ratio-1: 4; + --nldesign-brand-stripe-ratio-2: 2; + --nldesign-brand-stripe-ratio-3: 4; + --nldesign-brand-stripe-height: 9px; + --nldesign-brand-stripe-image: linear-gradient(to bottom, #1F4FD8 0 4px, transparent 4px 7px, #1FB5A8 7px 9px); + /* On the dark footer band the bank between the two lines is drawn white. */ + --nldesign-brand-stripe-image-inverse: linear-gradient(to bottom, #1F4FD8 0 4px, #ffffff 4px 7px, #1FB5A8 7px 9px); + + /* THE WEBSITE (openspec/changes/brand-motif-on-portals). Read only by + * css/public-bridge.css, which a portal links and an instance page never + * does. + * The accent (aqua): the menu item on screen, count badges and the + * "today first" card. Never a button or a link colour. */ + --nldesign-color-accent: #1FB5A8; + --nldesign-color-accent-light: #DDF5F2; + --nldesign-color-accent-text: #0B6259; + /* The footer band: the primary's deep step, white text on it. */ + --nldesign-color-footer-background: #14338F; + --nldesign-color-footer-text: #ffffff; + /* The logo in the site header and footer, 50px high. It carries the + * name, so the portal keeps its title for screen readers only. */ + --nldesign-website-logo-height: 50px; + --nldesign-website-logo-width: 173px; + --nldesign-website-logo-text-size: 0; + /* The hero on the website: a light ground with dark type, the first + * button in the primary colour, and the emblem as a faint watermark. */ + --nldesign-hero-background-color: #E8EEFC; + --nldesign-hero-title-color: #1B1C1D; + --nldesign-hero-body-color: #1B1C1D; + --nldesign-hero-action-background-color: #1F4FD8; + --nldesign-hero-action-color: #ffffff; + /* The portal names the set's emblem in --nldesign-emblem-url. */ + --nldesign-hero-decoration-image: var(--nldesign-emblem-url); +} diff --git a/css/tokens/warmtepompacademie.css b/css/tokens/warmtepompacademie.css new file mode 100644 index 000000000..c21403ef0 --- /dev/null +++ b/css/tokens/warmtepompacademie.css @@ -0,0 +1,200 @@ +/** + * Warmtepompacademie Design Tokens + * + * Warmtepompacademie is a school in Zuiddrecht, the demo town that does not exist, + * so a demonstration never borrows the house style of a real school. The + * palette is Conduction's own design for it (openspec/changes/school-token-sets). + * Heat moves from cold to warm: a trade academy for installers, exact and technical. + * + * #0B6E7A (petrol, the cold side) is the interactive colour for buttons, links and focus, + * #084F58 its hover. #C2410C (ember, the warm side) is the accent, NOT the interactive + * primary: it marks the selected navigation entry (a soft wash with a + * #9A3412 label) and the count badge in the navigation. Urgency is always the + * red status colour with words, never the accent alone. + * + * THE WORKPLACE LOOK. Like zuiddrecht, this set wears the light workplace + * layout: a white top bar with dark text, a white app navigation, a grey + * workspace (#F5F6F8) and white cards with a hairline border. token-sets.json + * turns the workplace layout on for this set (its `layout` block), and an + * administrator can switch it off again. + * + * Every text pair below reaches WCAG AA (4.5:1), computed, not estimated: + * white on #0B6E7A 5.96, #0B6E7A on white 5.96 and on the workspace 5.51, + * #084F58 on #E3F1F3 7.99, #1B1C1D on white 17.07, #5E6168 on white 6.20 and + * on the workspace 5.74, #B30000 on white 7.20 and on the workspace + * 6.66, #9A3412 on the selected-entry wash #F5E1D8 5.79, + * #ffffff on #C2410C 5.18, #1E6B2A on #E7F3EA 5.77, #7A4F00 on #FFF4DE + * 6.53, #A30000 on #FCEDEC 7.22. + */ + +:root { + /* Primary interactive colour */ + --nldesign-color-primary: #0B6E7A; + --nldesign-color-primary-text: #ffffff; + --nldesign-color-primary-hover: #084F58; + --nldesign-color-primary-light: #E3F1F3; + /* Not in the design: the primary-light tint with 7% of the primary mixed + * in, the step zuiddrecht's #DCE6F2 takes from its #EAF0F7. */ + --nldesign-color-primary-light-hover: #D4E8EB; + + /* Warmtepompacademie palette */ + --warmtepompacademie-color-main: #0B6E7A; + --warmtepompacademie-color-main-deep: #084F58; + --warmtepompacademie-color-main-light: #E3F1F3; + --warmtepompacademie-color-accent: #C2410C; + --warmtepompacademie-color-accent-light: #FCEBDD; + --warmtepompacademie-color-accent-text: #9A3412; + --warmtepompacademie-color-accent-mark: #D9480F; + --warmtepompacademie-color-ink: #1B1C1D; + --warmtepompacademie-color-muted: #5E6168; + --warmtepompacademie-color-line: #E4E6EA; + --warmtepompacademie-color-surface: #F5F6F8; + + /* Logo image */ + --nldesign-logo-url: url('../../img/logos/warmtepompacademie.svg'); + /* The logo is a wordmark, 3.78 times as wide as it is high. + * 121px gives it 32px of height in Nextcloud's header. */ + --nldesign-logo-width: 121px; + + /* Background colours, for hover states and the darker steps. The main + * background is managed by Nextcloud's theming system. */ + --nldesign-color-background-hover: #F0F1F3; + --nldesign-color-background-dark: #EDEFF2; + --nldesign-color-background-darker: #D3D8DF; + + /* Header: white with dark text and a hairline under it (as zuiddrecht) */ + --nldesign-color-header-background: #ffffff; + --nldesign-color-header-text: #1B1C1D; + --nldesign-header-border-bottom: 1px solid rgba(138, 146, 158, 0.25); + + /* Navigation */ + --nldesign-color-nav-background: #ffffff; + + /* Text colours: Cunningham's ink, and #5E6168 for muted text (Cunningham's + * own #74777c is 4.49:1 on white, just under AA). */ + --nldesign-color-text: #1B1C1D; + --nldesign-color-text-muted: #5E6168; + --nldesign-color-text-light: #ffffff; + + /* Status colours. Error is the design's #B30000; its hover is the dark red + * of the overdue pill. */ + --nldesign-color-error: #B30000; + --nldesign-color-error-rgb: 179, 0, 0; + --nldesign-color-error-hover: #A30000; + --nldesign-color-warning: #7A4F00; + --nldesign-color-warning-rgb: 122, 79, 0; + --nldesign-color-success: #1E6B2A; + --nldesign-color-success-rgb: 30, 107, 42; + --nldesign-color-info: #0B6E7A; + --nldesign-color-info-rgb: 11, 110, 122; + + /* Border colours. The hairline is for cards and dividers. The design's + * field border #C4C7CB is 1.7:1 against white, under the 3:1 a control + * border needs, so controls take zuiddrecht's #8A929E (3.14). */ + --nldesign-color-border: #E4E6EA; + --nldesign-color-border-dark: #8A929E; + + /* Focus colour */ + --nldesign-color-focus: rgba(11, 110, 122, 0.5); + --nldesign-color-focus-rgb: 11, 110, 122; + + /* Link colours (the interactive colour, not the accent) */ + --nldesign-color-link: #0B6E7A; + --nldesign-color-link-hover: #084F58; + + /* Button colours */ + --nldesign-color-button-primary-background: #0B6E7A; + --nldesign-color-button-primary-text: #ffffff; + --nldesign-color-button-primary-border: #0B6E7A; + --nldesign-color-button-primary-hover: #084F58; + + /* Typography: Barlow in 400, 500, 600 and 700 for text, Barlow Semi Condensed in 600 and 700 for headings and numbers, both bundled by thematiq. */ + --nldesign-font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; + + /* Headings: their own face. Nextcloud's headings read this token, and + * css/public-bridge.css hands it to the website's headings. */ + --nldesign-component-heading-font-family: 'Barlow Semi Condensed', 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; + + /* Border radius: NEXTCLOUD'S SCALE, NOT THE WEBSITE'S. The workplace keeps + * 8px controls and 12px containers, for the reason zuiddrecht.css and + * cunningham.css give: a near-square or rounder brand radius would reshape + * the Nextcloud chrome. Literals, not var(): overrides.css maps + * Nextcloud's scale FROM these tokens. */ + --nldesign-border-radius: 8px; + --nldesign-border-radius-small: 4px; + --nldesign-border-radius-large: 12px; + --nldesign-border-radius-rounded: 28px; + --nldesign-border-radius-pill: 100px; + + /* The website's own corners: 3px for buttons and fields, 6px for cards. + * Only css/public-bridge.css reads these, on a public portal. */ + --nldesign-website-border-radius: 3px; + --nldesign-website-border-radius-large: 6px; + + /* The selected navigation entry: the accent, where Nextcloud uses the + * primary colour. Nextcloud 34 and later draw it as a 16% wash of this + * colour (#F5E1D8 on white, the design's #FCEBDD) with the + * #9A3412 label on it at 5.79:1. */ + --nldesign-component-navigation-active-background-color: #C2410C; + --nldesign-component-navigation-active-color: #9A3412; + + /* The count badge in the navigation: the accent with white on it (5.18:1). */ + --nldesign-component-navigation-badge-background-color: #C2410C; + --nldesign-component-navigation-badge-color: #ffffff; + + /* The workspace: a grey surface that white cards sit on, with a very + * light shadow (4% ink). */ + --nldesign-component-content-surface-background-color: #F5F6F8; + --nldesign-component-content-card-shadow-color: rgba(27, 28, 29, 0.04); + + /* Status pills, fixed for the four school sets: received is the + * primary's own tint. info 7.99:1, success 5.77:1, warning 6.53:1, error 7.22:1. */ + --nldesign-component-status-badge-info-background-color: #E3F1F3; + --nldesign-component-status-badge-info-color: #084F58; + --nldesign-component-status-badge-success-background-color: #E7F3EA; + --nldesign-component-status-badge-success-color: #1E6B2A; + --nldesign-component-status-badge-warning-background-color: #FFF4DE; + --nldesign-component-status-badge-warning-color: #7A4F00; + --nldesign-component-status-badge-error-background-color: #FCEDEC; + --nldesign-component-status-badge-error-color: #A30000; + + /* The login watermark: the emblem in grey, large and faint, in the bottom + * corner of the login page while the workplace layout is light. */ + --nldesign-login-watermark-image: url('../../img/logos/warmtepompacademie-emblem-grey.svg'); + + /* The motif, "de temperatuurlijn": a 5px line in five hard steps from cold to warm, no gradient: #0B6E7A, #5FA3A8, #E4E6EA, #EFA06F and #D9480F in the ratio 8 : 3 : 2 : 3 : 8. Drawn + * along the top bar and the login card while the brand stripe is on. + * The three colours are for the component library, which draws three flat bands only: the cold half, the neutral middle and the warm half, 11 : 2 : 11. */ + --nldesign-brand-stripe-color-1: #0B6E7A; + --nldesign-brand-stripe-color-2: #E4E6EA; + --nldesign-brand-stripe-color-3: #D9480F; + --nldesign-brand-stripe-ratio-1: 11; + --nldesign-brand-stripe-ratio-2: 2; + --nldesign-brand-stripe-ratio-3: 11; + --nldesign-brand-stripe-height: 5px; + --nldesign-brand-stripe-image: linear-gradient(to right, #0B6E7A 0 33.333%, #5FA3A8 33.333% 45.833%, #E4E6EA 45.833% 54.167%, #EFA06F 54.167% 66.667%, #D9480F 66.667%); + + /* THE WEBSITE (openspec/changes/brand-motif-on-portals). Read only by + * css/public-bridge.css, which a portal links and an instance page never + * does. + * The accent (ember): the menu item on screen, count badges and the + * "today first" card. Never a button or a link colour. */ + --nldesign-color-accent: #C2410C; + --nldesign-color-accent-light: #FCEBDD; + --nldesign-color-accent-text: #9A3412; + /* The footer band: the primary's deep step, white text on it. */ + --nldesign-color-footer-background: #084F58; + --nldesign-color-footer-text: #ffffff; + /* The logo in the site header and footer, 50px high. It carries the + * name, so the portal keeps its title for screen readers only. */ + --nldesign-website-logo-height: 50px; + --nldesign-website-logo-width: 189px; + --nldesign-website-logo-text-size: 0; + /* The hero on the website: a light ground with dark type, the first + * button in the primary colour. */ + --nldesign-hero-background-color: #E3F1F3; + --nldesign-hero-title-color: #1B1C1D; + --nldesign-hero-body-color: #1B1C1D; + --nldesign-hero-action-background-color: #0B6E7A; + --nldesign-hero-action-color: #ffffff; +} diff --git a/css/tokens/wilgenboom.css b/css/tokens/wilgenboom.css new file mode 100644 index 000000000..6736b428d --- /dev/null +++ b/css/tokens/wilgenboom.css @@ -0,0 +1,200 @@ +/** + * Basisschool De Wilgenboom Design Tokens + * + * Basisschool De Wilgenboom is a school in Zuiddrecht, the demo town that does not exist, + * so a demonstration never borrows the house style of a real school. The + * palette is Conduction's own design for it (openspec/changes/school-token-sets). + * The tree you shelter under: warm, calm and clear for busy parents. + * + * #2F6B4A (willow green) is the interactive colour for buttons, links and focus, + * #1F4A33 its hover. #F5B82E (sun yellow) is the accent, NOT the interactive + * primary: it marks the selected navigation entry (a soft wash with a + * #6B4A00 label) and the count badge in the navigation. Urgency is always the + * red status colour with words, never the accent alone. + * + * THE WORKPLACE LOOK. Like zuiddrecht, this set wears the light workplace + * layout: a white top bar with dark text, a white app navigation, a grey + * workspace (#F5F6F8) and white cards with a hairline border. token-sets.json + * turns the workplace layout on for this set (its `layout` block), and an + * administrator can switch it off again. + * + * Every text pair below reaches WCAG AA (4.5:1), computed, not estimated: + * white on #2F6B4A 6.32, #2F6B4A on white 6.32 and on the workspace 5.84, + * #1F4A33 on #E8F1EB 8.73, #1B1C1D on white 17.07, #5E6168 on white 6.20 and + * on the workspace 5.74, #B30000 on white 7.20 and on the workspace + * 6.66, #6B4A00 on the selected-entry wash #FDF4DE 7.36, + * #1A1A1A on #F5B82E 9.76, #1E6B2A on #E7F3EA 5.77, #7A4F00 on #FFF4DE + * 6.53, #A30000 on #FCEDEC 7.22. + */ + +:root { + /* Primary interactive colour */ + --nldesign-color-primary: #2F6B4A; + --nldesign-color-primary-text: #ffffff; + --nldesign-color-primary-hover: #1F4A33; + --nldesign-color-primary-light: #E8F1EB; + /* Not in the design: the primary-light tint with 7% of the primary mixed + * in, the step zuiddrecht's #DCE6F2 takes from its #EAF0F7. */ + --nldesign-color-primary-light-hover: #DBE8E0; + + /* Basisschool De Wilgenboom palette */ + --wilgenboom-color-main: #2F6B4A; + --wilgenboom-color-main-deep: #1F4A33; + --wilgenboom-color-main-light: #E8F1EB; + --wilgenboom-color-accent: #F5B82E; + --wilgenboom-color-accent-light: #FDF3D7; + --wilgenboom-color-accent-text: #6B4A00; + --wilgenboom-color-ink: #1B1C1D; + --wilgenboom-color-muted: #5E6168; + --wilgenboom-color-line: #E4E6EA; + --wilgenboom-color-surface: #F5F6F8; + + /* Logo image */ + --nldesign-logo-url: url('../../img/logos/wilgenboom.svg'); + /* The logo is a wordmark, 4.77 times as wide as it is high. + * 153px gives it 32px of height in Nextcloud's header. */ + --nldesign-logo-width: 153px; + + /* Background colours, for hover states and the darker steps. The main + * background is managed by Nextcloud's theming system. */ + --nldesign-color-background-hover: #F0F1F3; + --nldesign-color-background-dark: #EDEFF2; + --nldesign-color-background-darker: #D3D8DF; + + /* Header: white with dark text and a hairline under it (as zuiddrecht) */ + --nldesign-color-header-background: #ffffff; + --nldesign-color-header-text: #1B1C1D; + --nldesign-header-border-bottom: 1px solid rgba(138, 146, 158, 0.25); + + /* Navigation */ + --nldesign-color-nav-background: #ffffff; + + /* Text colours: Cunningham's ink, and #5E6168 for muted text (Cunningham's + * own #74777c is 4.49:1 on white, just under AA). */ + --nldesign-color-text: #1B1C1D; + --nldesign-color-text-muted: #5E6168; + --nldesign-color-text-light: #ffffff; + + /* Status colours. Error is the design's #B30000; its hover is the dark red + * of the overdue pill. */ + --nldesign-color-error: #B30000; + --nldesign-color-error-rgb: 179, 0, 0; + --nldesign-color-error-hover: #A30000; + --nldesign-color-warning: #7A4F00; + --nldesign-color-warning-rgb: 122, 79, 0; + --nldesign-color-success: #1E6B2A; + --nldesign-color-success-rgb: 30, 107, 42; + --nldesign-color-info: #2F6B4A; + --nldesign-color-info-rgb: 47, 107, 74; + + /* Border colours. The hairline is for cards and dividers. The design's + * field border #C4C7CB is 1.7:1 against white, under the 3:1 a control + * border needs, so controls take zuiddrecht's #8A929E (3.14). */ + --nldesign-color-border: #E4E6EA; + --nldesign-color-border-dark: #8A929E; + + /* Focus colour */ + --nldesign-color-focus: rgba(47, 107, 74, 0.5); + --nldesign-color-focus-rgb: 47, 107, 74; + + /* Link colours (the interactive colour, not the accent) */ + --nldesign-color-link: #2F6B4A; + --nldesign-color-link-hover: #1F4A33; + + /* Button colours */ + --nldesign-color-button-primary-background: #2F6B4A; + --nldesign-color-button-primary-text: #ffffff; + --nldesign-color-button-primary-border: #2F6B4A; + --nldesign-color-button-primary-hover: #1F4A33; + + /* Typography: Lexend in 400, 500, 600 and 700, bundled by thematiq. It was designed for reading ease, which is the school's subject. */ + --nldesign-font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; + + /* Border radius: NEXTCLOUD'S SCALE, NOT THE WEBSITE'S. The workplace keeps + * 8px controls and 12px containers, for the reason zuiddrecht.css and + * cunningham.css give: a near-square or rounder brand radius would reshape + * the Nextcloud chrome. Literals, not var(): overrides.css maps + * Nextcloud's scale FROM these tokens. */ + --nldesign-border-radius: 8px; + --nldesign-border-radius-small: 4px; + --nldesign-border-radius-large: 12px; + --nldesign-border-radius-rounded: 28px; + --nldesign-border-radius-pill: 100px; + + /* The website's own corners: 10px for buttons and fields, 14px for cards. + * Only css/public-bridge.css reads these, on a public portal. */ + --nldesign-website-border-radius: 10px; + --nldesign-website-border-radius-large: 14px; + + /* The selected navigation entry: the accent, where Nextcloud uses the + * primary colour. Nextcloud 34 and later draw it as a 16% wash of this + * colour (#FDF4DE on white, the design's #FDF3D7) with the + * #6B4A00 label on it at 7.36:1. */ + --nldesign-component-navigation-active-background-color: #F5B82E; + --nldesign-component-navigation-active-color: #6B4A00; + + /* The count badge in the navigation: the accent with ink on it (9.76:1). */ + --nldesign-component-navigation-badge-background-color: #F5B82E; + --nldesign-component-navigation-badge-color: #1A1A1A; + + /* The workspace: a grey surface that white cards sit on, with a very + * light shadow (4% ink). */ + --nldesign-component-content-surface-background-color: #F5F6F8; + --nldesign-component-content-card-shadow-color: rgba(27, 28, 29, 0.04); + + /* Status pills, fixed for the four school sets: received is the + * primary's own tint. info 8.73:1, success 5.77:1, warning 6.53:1, error 7.22:1. */ + --nldesign-component-status-badge-info-background-color: #E8F1EB; + --nldesign-component-status-badge-info-color: #1F4A33; + --nldesign-component-status-badge-success-background-color: #E7F3EA; + --nldesign-component-status-badge-success-color: #1E6B2A; + --nldesign-component-status-badge-warning-background-color: #FFF4DE; + --nldesign-component-status-badge-warning-color: #7A4F00; + --nldesign-component-status-badge-error-background-color: #FCEDEC; + --nldesign-component-status-badge-error-color: #A30000; + + /* The login watermark: the emblem in grey, large and faint, in the bottom + * corner of the login page while the workplace layout is light. */ + --nldesign-login-watermark-image: url('../../img/logos/wilgenboom-emblem-grey.svg'); + + /* The motif, "de twijgen": the hanging twigs of the willow, short bars with round ends in uneven lengths (14, 8, 11, 6, 12, 9, 5, 13, 7 and 10px, 6px wide, 6px apart), green with every seventh one yellow. Drawn + * along the top bar and the login card while the brand stripe is on. + * The three colours read the twigs as proportions for the component library, which draws flat bands only: green, yellow, green in the ratio 3 : 1 : 3, one bar in seven. */ + --nldesign-brand-stripe-color-1: #2F6B4A; + --nldesign-brand-stripe-color-2: #F5B82E; + --nldesign-brand-stripe-color-3: #2F6B4A; + --nldesign-brand-stripe-ratio-1: 3; + --nldesign-brand-stripe-ratio-2: 1; + --nldesign-brand-stripe-ratio-3: 3; + --nldesign-brand-stripe-height: 17px; + --nldesign-brand-stripe-image: url("data:image/svg+xml,"); + /* On the dark footer band the twigs hang from its top edge, in a light + * green (#5F9A78) and the same yellow, without the green line. */ + --nldesign-brand-stripe-image-inverse: url("data:image/svg+xml,"); + + /* THE WEBSITE (openspec/changes/brand-motif-on-portals). Read only by + * css/public-bridge.css, which a portal links and an instance page never + * does. + * The accent (sun yellow; #6B4A00 on #FDF3D7 7.36:1): the menu item on screen, count badges and the + * "today first" card. Never a button or a link colour. */ + --nldesign-color-accent: #F5B82E; + --nldesign-color-accent-light: #FDF3D7; + --nldesign-color-accent-text: #6B4A00; + /* The footer band: the primary's deep step, white text on it. */ + --nldesign-color-footer-background: #1F4A33; + --nldesign-color-footer-text: #ffffff; + /* The logo in the site header and footer, 50px high. It carries the + * name, so the portal keeps its title for screen readers only. */ + --nldesign-website-logo-height: 50px; + --nldesign-website-logo-width: 238px; + --nldesign-website-logo-text-size: 0; + /* The hero on the website: a light ground with dark type, the first + * button in the primary colour, and the emblem as a faint watermark. */ + --nldesign-hero-background-color: #E8F1EB; + --nldesign-hero-title-color: #1F4A33; + --nldesign-hero-body-color: #1B1C1D; + --nldesign-hero-action-background-color: #2F6B4A; + --nldesign-hero-action-color: #ffffff; + /* The portal names the set's emblem in --nldesign-emblem-url. */ + --nldesign-hero-decoration-image: var(--nldesign-emblem-url); +} diff --git a/css/tokens/zuiddrecht.css b/css/tokens/zuiddrecht.css index 69ab55910..e769e40c0 100644 --- a/css/tokens/zuiddrecht.css +++ b/css/tokens/zuiddrecht.css @@ -21,7 +21,9 @@ * #1B1C1D on white 17.07, #5E6168 on white 6.20 and on the workspace 5.74, * #A30000 on #FCEDEC 7.22 and on the selected-entry wash #F7D6D6 6.08, white * on #CC0000 5.89, #234A78 on #EAF0F7 7.88, #1E6B2A on #E7F3EA 5.77, #7A4F00 - * on #FFF4DE 6.53. + * on #FFF4DE 6.53, #1A1A1A on #EAF0F7 15.17 and on #FFF4DE 15.95, and on the + * site's surface #F4F6F9: #1A1A1A 16.08, #5E6168 5.73, #3669A5 5.21, #A30000 + * 7.58. */ :root { @@ -168,4 +170,106 @@ --nldesign-brand-stripe-ratio-2: 3; --nldesign-brand-stripe-ratio-3: 1; --nldesign-brand-stripe-height: 5px; + + /* THE WEBSITE (openspec/changes/brand-motif-on-portals). Read only by + * css/public-bridge.css, which a portal links and an instance page never + * does. + * The accent (the red of the arms): the menu item on screen, count badges and the + * "today first" card. Never a button or a link colour. */ + --nldesign-color-accent: #CC0000; + --nldesign-color-accent-light: #FCEDEC; + --nldesign-color-accent-text: #A30000; + /* The footer band: the primary's deep step, white text on it. */ + --nldesign-color-footer-background: #234A78; + --nldesign-color-footer-text: #ffffff; + /* The logo in the site header and footer, 50px high. It carries the + * name, so the portal keeps its title for screen readers only. */ + --nldesign-website-logo-height: 50px; + --nldesign-website-logo-width: 234px; + --nldesign-website-logo-text-size: 0; + /* The hero on the website: a light ground with dark type (14.88:1) and + * the emblem in grey as a faint watermark. The portal names the grey + * emblem in --nldesign-emblem-grey-url and the coloured one in + * --nldesign-emblem-url. */ + --nldesign-hero-background-color: #EAF0F7; + --nldesign-hero-title-color: #1B1C1D; + --nldesign-hero-body-color: #1B1C1D; + --nldesign-hero-decoration-image: var(--nldesign-emblem-grey-url, var(--nldesign-emblem-url)); + /* THE SIGNED-IN PAGES (openspec/changes/zuiddrecht-website-type-and-controls), + * as the Mijn Zuiddrecht boards draw them. Read by css/public-bridge.css + * only; an instance page never sees these. + * The website's corners: 4px controls, 6px cards. */ + --nldesign-website-border-radius: 4px; + --nldesign-website-border-radius-large: 6px; + /* The type scale: 44px page titles, 40px a record's name, 26px sections. */ + --nldesign-website-heading-1-font-size: 44px; + --nldesign-website-heading-2-font-size: 40px; + --nldesign-website-heading-3-font-size: 26px; + /* Controls carry a 2px border: an outlined button is blue on white (5.64:1). */ + --nldesign-website-control-border-width: 2px; + /* A status tag is a pill. */ + --nldesign-website-badge-border-radius: 14px; + /* Process steps: 36px markers; a done step is filled blue with a white + * tick (5.64:1), the current step white with a red ring and a red + * number (5.89:1); the line after a done step is blue. */ + --nldesign-website-step-marker-size: 36px; + --nldesign-website-step-done-color: #3669A5; + --nldesign-website-step-done-mark-color: #ffffff; + --nldesign-website-step-current-color: #CC0000; + --nldesign-website-step-current-background-color: #ffffff; + /* A plain notice (the ask for an e-mail address): the light blue with a + * 1px border; ink on it 12.7:1. */ + --nldesign-website-notice-background-color: #EAF0F7; + --nldesign-website-notice-border-color: #B9CBE2; + --nldesign-website-notice-border-width: 1px; + /* Tabs: a grey line, the tab on screen marked red. */ + --nldesign-website-tab-line-color: #D3D8DF; + --nldesign-website-tab-current-color: #CC0000; + + /* THE PUBLIC SITE (openspec/changes/zuiddrecht-site-page-title-notice-surface), + * as the Kop, Home and Contentpagina boards draw it. Read by + * css/public-bridge.css and by the portal's own site stylesheet only. + * A content page's title: 44px (2.75rem) on a 1.15 line, said for the h1 + * the site draws above the page's own heading scale. The lead paragraph + * under it is 21px (Contentpagina), the running text 17px. */ + --nldesign-website-page-title-size: 2.75rem; + --nldesign-website-page-title-line-height: 1.15; + --nldesign-website-lead-font-size: 21px; + --nldesign-website-content-font-size: 17px; + /* The site's columns (Kop, Home, Contentpagina): the page 1328px wide + * with a 24px gutter, so the content is 1280px; the header's row is the + * same 1280px with no gutter of its own, and a band that opens a page is + * 1280px too. */ + --nldesign-website-page-max-width: 1328px; + --nldesign-website-page-gutter: 24px; + --nldesign-website-band-max-width: 1280px; + --nldesign-website-header-max-width: 1280px; + --nldesign-website-header-gutter: 0px; + /* The menu item on screen: a blue bar in the red line under the menu + * (Kop), not above it. */ + --nldesign-website-nav-current-in-line: 1; + --nldesign-website-nav-current-color: #3669A5; + /* Buttons on the site are semibold (Kop "Mijn Zuiddrecht", Home). */ + --nldesign-website-button-font-weight: 600; + /* The site's grey text is darker than the workplace's #5E6168: #4A4A4A, + * 8.86:1 on white, 8.19:1 on the site's surface #F4F6F9 and 6.83:1 on + * the photo ground below. A picture that has not loaded, or a card + * without one, sits on a light blue (#D9E3EF; ink on it 13.41:1). */ + --nldesign-website-color-text-muted: #4A4A4A; + --nldesign-website-placeholder-background-color: #D9E3EF; + /* The text on a plain notice: the site's ink, 15.17:1 on the light blue + * notice ground above and 15.95:1 on the soft yellow attention strip the + * Home board draws (#FFF4DE). */ + --nldesign-website-notice-color: #1A1A1A; + /* The site's grey band ("Bestuur en organisatie" on the Home board) and + * a boxed table's header row: the website's surface, a shade cooler than + * the workplace's #F5F6F8. Ink on it 16.08:1, muted text 5.73:1, the + * link blue 5.21:1 and the dark red 7.58:1. */ + --nldesign-color-surface: #F4F6F9; + /* The attention strip ("Let op" on the Home and MijnOverzicht boards): + * a soft yellow with an amber border and ink on it, 15.95:1. The plain + * notice above stays light blue; the boards draw both. */ + --nldesign-website-attention-background-color: #FFF4DE; + --nldesign-website-attention-border-color: #E8C77D; + --nldesign-website-attention-color: #1A1A1A; } diff --git a/css/workplace-layout.css b/css/workplace-layout.css index d70075642..9803773bc 100644 --- a/css/workplace-layout.css +++ b/css/workplace-layout.css @@ -81,3 +81,478 @@ body#body-login::before { background-size: contain; opacity: var(--nldesign-login-watermark-opacity, 0.07); } + +/* + * THE LOGIN PAGE AND THE GUEST PAGES + * (openspec/changes/workplace-layout-core-pages/specs/workplace-layout/spec.md). + * + * The light workplace draws Nextcloud's own login page the way its boards + * draw it (NcLogin): the logo ABOVE the card, 56px high, and the card itself + * a card of the workplace: 420px wide, a hairline border, the container + * radius, the cards' shadow colour, 32px of padding, a 24px title. The in-card + * stamp the NL Design sheet draws (40 by 32 pixels, 100px of room above the + * form) is retired here: Nextcloud's own `header-guest` logo, which that sheet + * hides, is shown again with the set's logo in it, so nothing is duplicated. + * + * The same holds for the guest pages that share `#body-login` (an error page, + * a public share): their title takes the same size and their "Back to …" + * action, a link dressed as a button, takes the login button's label colour. + * The NL Design link rule paints every `a` outside the header link-blue with + * id strength; on the primary blue of that button the label vanished + * (measured on Nextcloud 34, 6 October 2026). The selectors here carry one id + * and three classes so they outrank it (1,2,4). + * + * No colour is written: the card reads the scheme's border and the set's + * card-shadow token, the footer reads the muted text colour, the logo reads + * the set's logo token (and Nextcloud's own when a set names none). + */ +body#body-login header, +body#body-login #header.header-guest { + display: block !important; + position: static !important; + height: auto !important; + background: transparent !important; + border: 0 !important; + box-shadow: none !important; +} + +body#body-login #header.header-guest .logo { + display: block !important; + position: static !important; + width: 100% !important; + max-width: 320px !important; + height: 56px !important; + margin: 0 auto 28px !important; + background-image: var(--nldesign-logo-url, var(--image-logo)) !important; + background-size: contain !important; + background-repeat: no-repeat !important; + background-position: center !important; + filter: none !important; +} + +body#body-login .guest-box.login-box::after { + display: none !important; +} + +body#body-login .guest-box div[class*='login-box__wrapper'] { + padding-top: var(--nldesign-brand-stripe-height, 0px) !important; +} + +body#body-login .login-box form, +body#body-login .guest-box > div:not(#header):not([class*='login-box__wrapper']) { + padding: 32px !important; +} + +body#body-login .guest-box.login-box { + width: min(420px, 100%) !important; + border: 1px solid + var(--nldesign-component-login-box-border-color, var(--color-border)) !important; + border-radius: var( + --nldesign-component-login-box-border-radius, + var(--border-radius-container-large) + ) !important; + box-shadow: 0 2px 12px + var(--nldesign-component-content-card-shadow-color, transparent) !important; +} + +body#body-login .guest-box h2, +body#body-login .login-form__headline, +body#body-login .body-login-container h2 { + margin: 0 0 18px !important; + font-size: 24px !important; + line-height: 1.25 !important; +} + +/* The login title starts at the left edge, as the board draws it; a guest + * page keeps its centred title under its icon. */ +body#body-login .login-form__headline { + text-align: start !important; +} + +/* The controls on the login page: 44px, as the board draws its fields, and + * a 1px edge where the NL Design sheet draws 2px. */ +body#body-login { + --default-clickable-area: 44px; +} + +body#body-login .input-field__input, +body#body-login input:not([type='checkbox']) { + border-width: 1px !important; +} + +/* The fields as the board draws them: the label above the field, 14px + * semibold, and the field 44px with a 1px edge in the darker border colour + * (3:1 against white on Zuiddrecht, #8A929E, where the light border is not), + * the controls' radius. Nextcloud floats its label inside the field's edge; + * the NL Design sheet draws the edge around the field's wrapper, so the edge + * moves to the field itself and the wrapper keeps room for the label above. + * The login button is 46px, as the board's. */ +body#body-login .login-form .input-field { + margin-block: 0 !important; + border: 0 !important; + box-shadow: none !important; +} + +body#body-login .login-form .input-field__main-wrapper { + padding: 26px 0 0 !important; +} + +body#body-login .login-form .input-field__label { + position: absolute !important; + top: 0 !important; + inset-inline-start: 0 !important; + max-width: 100% !important; + margin: 0 !important; + padding: 0 !important; + transform: none !important; + background: none !important; + color: var(--color-main-text) !important; + font-size: 14px !important; + font-weight: 600 !important; + line-height: 20px !important; + transition: none !important; +} + +body#body-login .login-form .input-field__input { + width: 100% !important; + height: 44px !important; + margin: 0 !important; + padding: 0 12px !important; + border: 1px solid + var(--nldesign-color-border-dark, var(--color-border-maxcontrast)) !important; + border-radius: var(--border-radius-element, 8px) !important; + box-shadow: none !important; + font-size: 15px !important; +} + +body#body-login .login-form .input-field--trailing-icon .input-field__input { + padding-inline-end: 44px !important; +} + +body#body-login .login-form .input-field__trailing-button { + top: 26px !important; + height: 44px !important; + min-height: 44px !important; +} + +body#body-login .login-form__fieldset { + gap: 18px !important; +} + +body#body-login .login-form button[type='submit'] { + height: 46px !important; + min-height: 46px !important; + border-radius: var(--border-radius-element, 8px) !important; + font-size: 15px !important; + font-weight: 600 !important; +} + +/* Their colour: the link colour, blue on Zuiddrecht (#3669A5, 5.64:1 on the + * white card), as the board draws "Wachtwoord vergeten?". The NL Design text + * rule forces every span to the body text with id strength, but it reads + * `--nldesign-color-on-surface` first, the opt-out it offers any surface, so + * the buttons set that variable instead of fighting the rule. */ +body#body-login .guest-box .login-box__wrapper > .button-vue--vue-tertiary, +body#body-login .guest-box .login-box__wrapper > div > .button-vue--vue-tertiary { + --nldesign-color-on-surface: var( + --nldesign-color-link, + var(--color-primary-element) + ); + + color: var(--nldesign-color-link, var(--color-primary-element)) !important; +} + +/* The two text actions under the form (a device login, a forgotten password) + * are tertiary buttons: 14px, regular weight, underlined, as the board draws + * "Wachtwoord vergeten?". */ +body#body-login + .guest-box + .login-box__wrapper + > .button-vue--vue-tertiary + .button-vue__text, +body#body-login + .guest-box + .login-box__wrapper + > div + > .button-vue--vue-tertiary + .button-vue__text { + font-size: 14px !important; + font-weight: 400 !important; + text-decoration: underline !important; +} + +/* The footer line under the card: 13px muted text with no plate behind it + * (Nextcloud draws a blurred plate for its coloured backgrounds; the light + * workplace has none). */ +body#body-login footer.guest-box { + margin-top: 28px !important; + padding: 0 !important; + background: transparent !important; + box-shadow: none !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; +} + +body#body-login footer.guest-box p.info, +body#body-login footer.guest-box p.info a.entity-name { + color: var(--color-text-maxcontrast) !important; + font-size: 13px !important; + font-weight: 400 !important; + text-decoration: none !important; +} + +/* The guest pages' "Back to …" action and their container. */ +body#body-login .body-login-container a.button.primary, +body#body-login .guest-content a.button.primary, +body#body-login .guest-box .login-box__wrapper a.button-vue--vue-primary { + color: var( + --nldesign-component-login-button-color, + var(--color-primary-element-text) + ) !important; + text-decoration: none !important; +} + +body#body-login .guest-content .body-login-container { + border: 1px solid var(--color-border) !important; + border-radius: var(--border-radius-container-large) !important; + box-shadow: 0 2px 12px + var(--nldesign-component-content-card-shadow-color, transparent) !important; +} + +/* + * THE TOP BAR (the DqKop board). + * + * 68px high: Nextcloud sizes the bar AND the offset of everything under it + * from `--header-height`, so the one variable moves both. The app grid + * button is a 40px square on the workspace colour with the controls' radius. + * The search field is a 44px pill on the workspace colour with a hairline + * edge and a regular-weight muted label; Nextcloud draws it as a translucent + * dark bar with a bold label, which is the look of its coloured header. + * + * `--button-size` is the variable the library's icon-only button reads for + * its width and minimum width, so the square is said through it, not against it. + */ +body:not(#body-login) { + --header-height: 68px; + /* Nextcloud works out the page height once, at the root, from its own + * 50px bar; with the taller bar the page would run 18px past the window. */ + --body-height: calc( + 100% - env(safe-area-inset-bottom) - var(--header-height) - + var(--body-container-margin) + ); +} + +:where(body:not(#body-login)) #header .app-menu__waffle.button-vue { + --button-size: 40px; + --default-clickable-area: 40px; + + width: 40px !important; + min-width: 40px !important; + height: 40px !important; + min-height: 40px !important; + margin-inline: 4px; + border-radius: var(--border-radius-element) !important; + background-color: var( + --nldesign-component-content-surface-background-color, + var(--color-background-hover) + ) !important; +} + +:where(body:not(#body-login)) #header .unified-search-menu .header-menu__trigger, +:where(body:not(#body-login)) #header .unified-search-menu button, +:where(body:not(#body-login)) #header .unified-search__button { + height: 44px !important; + min-height: 44px !important; + max-width: 560px !important; + border: 1px solid var(--color-border) !important; + border-radius: 22px !important; + background-color: var( + --nldesign-component-content-surface-background-color, + var(--color-background-hover) + ) !important; + color: var(--color-text-maxcontrast) !important; + font-weight: 400 !important; +} + +:where(body:not(#body-login)) + #header + .unified-search-menu + .header-menu__trigger + .button-vue__text, +:where(body:not(#body-login)) #header .unified-search-menu button .button-vue__text { + color: var(--color-text-maxcontrast) !important; + font-weight: 400 !important; +} + +/* The dashboard's panel row: the NL Design sheet paints every element whose + * class contains "panel" with the main background, and that includes the + * `.panels` row around the cards, a white band across the grey workspace. */ +:where(body:not(#body-login)) #content.app-dashboard .panels { + background: transparent !important; +} + +/* + * THE STANDARD APPS: CARDS ON THE SURFACE (the DqTokens board; + * openspec/changes/workplace-layout-standard-apps/specs/workplace-layout/spec.md). + * + * The workplace is a grey surface with white cards on it: the container + * radius, a hairline, the cards' shadow colour. The NL Design sheet gives the + * dashboard's panels the controls' radius and the page title size; here they + * take the container radius and the card title size + * (`--nldesign-component-heading-3-font-size`, 18px on Zuiddrecht). The Files + * list becomes one card: the shared sheet paints its sticky header and footer + * rows and the README block with the SURFACE colour so they do not show as + * strips on it (thematiq#1061); inside a card they take the card's own + * background again, from selectors that outrank the shared ones by one class. + * The settings sections, the personal settings block and the profile section + * are cards too. The theme picker's token set select is 44px high, the + * height of the workplace's controls. + */ +:where(body:not(#body-login)) #content.app-dashboard .panel { + border: 1px solid var(--color-border) !important; + border-radius: var(--border-radius-container-large) !important; + box-shadow: 0 1px 2px + var(--nldesign-component-content-card-shadow-color, transparent) !important; +} + +:where(body:not(#body-login)) #content.app-dashboard .panel > .panel--header > h2, +:where(body:not(#body-login)) + #content.app-dashboard + .panels + > div + > .panel--header + > h2 { + font-size: var(--nldesign-component-heading-3-font-size) !important; +} + +:where(body:not(#body-login)) #content.app-dashboard h2 { + color: var(--color-main-text) !important; +} + +:where(body:not(#body-login)) #app-content-vue .files-list { + margin: 0 24px 24px !important; + border: 1px solid var(--color-border) !important; + border-radius: var(--border-radius-container-large) !important; + background: var(--color-main-background) !important; +} + +:where(body:not(#body-login)) #app-content-vue .files-list .files-list__thead, +:where(body:not(#body-login)) #app-content-vue .files-list .files-list__tfoot, +:where(body:not(#body-login)) + #app-content-vue + .files-list + #rich-workspace + .text-editor, +:where(body:not(#body-login)) + #app-content-vue + .files-list + #rich-workspace + .text-editor__main, +:where(body:not(#body-login)) #app-content-vue .files-list #rich-workspace .editor, +:where(body:not(#body-login)) + #app-content-vue + .files-list + #rich-workspace + .text-menubar, +:where(body:not(#body-login)) + #app-content-vue + .files-list + #rich-workspace + .ProseMirror, +:where(body:not(#body-login)) + #app-content-vue + .files-list + #rich-workspace + .heading-anchor, +:where(body:not(#body-login)) + #app-content-vue + .files-list + #rich-workspace + div[contenteditable='false'] { + background-color: var(--color-main-background) !important; +} + +:where(body:not(#body-login)) + #app-content-vue + .files-list + #rich-workspace:not(.focus):not(.empty)::after { + background-image: linear-gradient( + to bottom, + transparent, + var(--color-main-background) + ) !important; +} + +:where(body:not(#body-login)) #app-content-vue .files-list .files-list__thead th, +:where(body:not(#body-login)) + #app-content-vue + .files-list + .files-list__thead + .files-list__column, +:where(body:not(#body-login)) + #app-content-vue + .files-list + .files-list__thead + button { + color: var(--color-text-maxcontrast) !important; + font-size: 14px !important; + font-weight: 600 !important; +} + +:where(body:not(#body-login)) + #app-content-vue + .files-list + .files-list__row-name-link, +:where(body:not(#body-login)) + #app-content-vue + .files-list + .files-list__row-name-text { + font-weight: 500 !important; +} + +:where(body:not(#body-login)) #content.app-settings #app-content-vue .section, +:where(body:not(#body-login)) + #content.app-settings + #app-content-vue + #personal-settings, +:where(body:not(#body-login)) + #content.app-settings + #app-content-vue + .personal-settings-section { + margin: 16px 24px !important; + border: 1px solid var(--color-border) !important; + border-radius: var(--border-radius-container-large) !important; + background: var(--color-main-background) !important; + box-shadow: 0 1px 2px + var(--nldesign-component-content-card-shadow-color, transparent) !important; +} + +:where(body:not(#body-login)) #content.app-settings #app-content-vue .section { + padding: 28px 32px !important; +} + +:where(body:not(#body-login)) + #content.app-settings + #app-content-vue + #personal-settings, +:where(body:not(#body-login)) + #content.app-settings + #app-content-vue + .personal-settings-section { + padding: 12px 16px !important; +} + +:where(body:not(#body-login)) #nldesign-settings #nldesign-token-set-select { + height: 44px !important; + min-height: 44px !important; + padding-inline: 12px !important; + font-size: 16px !important; +} + +:where(body:not(#body-login)) + #nldesign-settings + .nldesign-token-set-selector + > label { + font-size: 16px !important; + font-weight: 600 !important; +} diff --git a/docs/features/configuration-bundle.md b/docs/features/configuration-bundle.md index 8dcbda0ed..38147efab 100644 --- a/docs/features/configuration-bundle.md +++ b/docs/features/configuration-bundle.md @@ -14,6 +14,7 @@ This is not the overrides file from [import and export](./import-export.md). Tha |---|---| | The active token set | Nextcloud's own theming values (logo, background) | | Hide slogan, show menu labels, primary colour drives components | The environment marker in `config.php` | +| The layout choices: workplace layout, brand stripe and where it is drawn, navigation width, selected entry style, login watermark (as stored, so "follow the theme" travels too) | | | Per-app exclusions | The `mail_template_class` setting in `config.php` | | Your token overrides (`custom-overrides.css`) | Font files | | Every custom token set, CSS included | Group mappings | diff --git a/docs/features/public-portals-as-consumers.md b/docs/features/public-portals-as-consumers.md index d35404ba0..b72abb817 100644 --- a/docs/features/public-portals-as-consumers.md +++ b/docs/features/public-portals-as-consumers.md @@ -46,14 +46,14 @@ to travel through that bridge, or it reaches nothing. **Portaliq does not link it yet.** Its open change `site-links-the-theme-bridge` adds the link. Until then a portal paints from whatever the set itself declares. -Measured coverage of the listed sets (`token-sets.json`, 59 sets): +Measured coverage of the listed sets (`token-sets.json`, 63 sets): | What a set declares | Sets | | --- | --- | -| the full `--utrecht-*` role layer | 25 | -| only `--nldesign-*` | 12 | -| Den Haag component properties | 17 | -| a case card property | 0 | +| the full `--utrecht-*` role layer | 26 | +| only `--nldesign-*` | 15 | +| Den Haag component properties | 18 | +| a case card property | 2 | ### The Den Haag components diff --git a/docs/features/toggles.md b/docs/features/toggles.md index 6a060b2e8..06609d8a2 100644 --- a/docs/features/toggles.md +++ b/docs/features/toggles.md @@ -65,6 +65,10 @@ One limit: the layout cannot redraw a logo. A theme whose logo is white, drawn f **How it works:** while the layout is `light`, Thematiq loads `css/workplace-layout.css`. It redeclares the variables the header rules already read, so it writes no colour of its own. +**The login page and the top bar.** With the light layout, Nextcloud's own pages follow the workplace boards: the login page shows the theme's logo above the card, 56px high, and the card is a workplace card (420px wide, a hairline, the container radius, 32px of padding, a 24px title, 44px controls). The top bar is 68px high, the app grid button a 40px square on the workspace colour, the search field a 44px pill with a muted label. On a guest page (a 403, a 404) the "Back to …" button keeps a readable label. What Nextcloud's markup draws stays as it is: the title text, the labels inside the fields, "Remember me", the device login link and the current app in the bar. + +**The standard apps.** With the light layout, the dashboard's panels, the Files list, the settings sections and the thematiq panel are cards on the grey workspace: the container radius, a hairline and the cards' shadow colour, with 18px card titles and a quiet 14px header row on the Files list. The theme picker's token set select is 44px high. + **Login watermark.** With the light layout, a theme can show its emblem on the login page: large, faint, in the bottom corner behind the login card. The theme names the image in `--nldesign-login-watermark-image` and may set `--nldesign-login-watermark-opacity` (0.07 when unset). A shipped set gets this by adding `img/logos/-emblem-grey.svg`. A theme that names no image shows none. ## Brand stripe @@ -97,18 +101,81 @@ php occ config:app:delete thematiq workplace_layout php occ config:app:delete thematiq brand_stripe ``` +## Where the brand stripe is drawn + +**Setting:** `thematiq:brand_stripe_placement` (`header-and-login`, `header`, `login`, or not set) + +Only while the brand stripe is on. **Top bar and login card** is how the stripe has always been drawn and what a theme that names nothing gets. **Top bar only** leaves the login card plain; **Login card only** leaves the top bar plain, the way the Zuiddrecht workplace boards draw it (the stripe marks the login screen, the bar carries a hairline). + +**How it works:** the stripe keeps its one stylesheet; a placement other than both loads `css/brand-stripe-header-only.css` or `css/brand-stripe-login-only.css` after it, which takes the other copy off again. + +## Navigation width + +**Setting:** `thematiq:navigation_width` (a whole number of pixels from `200` to `480`, or not set) + +The width of the app navigation. Left empty, the width follows the theme; a theme that names none keeps the width Nextcloud gives the panel. Gemeente Zuiddrecht names 264. + +**How it works:** while a width resolves, Thematiq loads `css/navigation-width.css` and one inline `:root` variable, `--thematiq-navigation-width`, that the stylesheet reads: Nextcloud's `--navigation-width`, the thematiq global and the `--nldesign-nc-navigation-width` token all take it, and the panel itself is sized outright as well. + +## Selected navigation entry + +**Setting:** `thematiq:navigation_active_style` (`default`, `soft`, or not set) + +**Default** is the entry as Nextcloud draws it. **Soft tint with a bold label** draws the entry you are on as a flat wash of the accent's light tint (`--nldesign-color-accent-light`) with the accent's dark text (`--nldesign-color-accent-text`) as a bold label, the way the Zuiddrecht workplace boards draw it: #A30000 on #FCEDEC, 7.22:1. A theme without an accent uses its primary tint and its primary colour, a pair every shipped set already reaches AA on. + +**How it works:** while the style is `soft`, Thematiq loads `css/navigation-active-soft.css`. Every colour is a token, so the generated dark variant keeps up on its own. + +## Login watermark + +**Setting:** `thematiq:login_watermark` (`1`, `0`, or not set) + +With the light top bar, a theme can draw its emblem large and faint on the login page (see the workplace layout above). **Off** hides it whatever the theme says; a theme that names no image shows none either way. + +**How it works:** while the layout is light and the watermark is off, Thematiq loads `css/login-watermark-off.css` after the layout stylesheet, which takes the mark off again. + +## Top bar style + +**Setting:** `thematiq:header_style` (`default`, `workplace`, or not set) + +**Default** is the top bar as Nextcloud draws it. **Workplace** draws the bar of the Zuiddrecht workplace boards (DqKop), and only with the light workplace layout. It drops the logo and the current app's name, since the app navigation carries the brand. The search field sits right beside the app grid button. At the end you see the bell, a thin divider and your own initials, name and role. + +**Where the role comes from:** the Role field on your personal profile (Personal info, Role). Without a role you see your name only. + +**How it works:** while the layout is light and the style is `workplace`, Thematiq loads `css/header-workplace.css` and the small script `js/header-user.js`. The page hands the script your display name and role as initial state. The script puts them in Nextcloud's account menu, so a click on them opens that menu. Without the script, or before it runs, the bar shows Nextcloud's own avatar. + +```bash +# The stripe on the login card only, a 264px navigation, the soft entry, no watermark +php occ config:app:set thematiq brand_stripe_placement --value=login +php occ config:app:set thematiq navigation_width --value=264 +php occ config:app:set thematiq navigation_active_style --value=soft +php occ config:app:set thematiq login_watermark --value=0 +php occ config:app:set thematiq header_style --value=workplace + +# Follow the theme again +php occ config:app:delete thematiq brand_stripe_placement +php occ config:app:delete thematiq navigation_width +php occ config:app:delete thematiq navigation_active_style +php occ config:app:delete thematiq login_watermark +php occ config:app:delete thematiq header_style +``` + ### Layout defaults in a token set -A shipped token set can carry defaults for both settings in `token-sets.json`: +A shipped token set can carry defaults for every layout setting in `token-sets.json`: ```json "layout": { "workplace_layout": "light", - "brand_stripe": true + "brand_stripe": true, + "brand_stripe_placement": "login", + "navigation_width": 264, + "navigation_active_style": "soft", + "login_watermark": false, + "header_style": "workplace" } ``` -They apply only while the administrator has stored no choice. +They apply only while the administrator has stored no choice. A set that leaves one out gets the behaviour every set had before the setting existed: the stripe in both places, Nextcloud's navigation width, the default entry, the watermark drawn, Nextcloud's own top bar. Every layout choice travels in the configuration bundle as the administrator stored it, "follow the theme" included. ## Theming per App diff --git a/docs/reference/brand-identity.md b/docs/reference/brand-identity.md index ccad5d972..16e3e4ffe 100644 --- a/docs/reference/brand-identity.md +++ b/docs/reference/brand-identity.md @@ -50,6 +50,10 @@ Colors are sourced from each organization's official NL Design System token set. | Gemeente Rotterdam | ![#00811f](https://via.placeholder.com/16/00811f/00811f.png) `#00811f` | `#FFFFFF` | `rotterdam.svg` | | xxllnc | ![#333333](https://via.placeholder.com/16/333333/333333.png) `#333333` | `#FFFFFF` | `xxllnc.svg` | | `zuiddrecht.svg`, `zuiddrecht-dark.svg`, `zuiddrecht-emblem.svg`, `zuiddrecht-emblem-grey.svg` | Conduction's own design for the demo municipality Zuiddrecht, which does not exist | +| `wilgenboom.svg`, `wilgenboom-dark.svg`, `wilgenboom-emblem.svg`, `wilgenboom-emblem-grey.svg` | Conduction's own design for Basisschool De Wilgenboom, a demo school in Zuiddrecht, which does not exist | +| `vaartveld.svg`, `vaartveld-dark.svg`, `vaartveld-emblem.svg`, `vaartveld-emblem-grey.svg` | Conduction's own design for Vaartveld College, a demo school in Zuiddrecht, which does not exist | +| `esdoornveen.svg`, `esdoornveen-dark.svg`, `esdoornveen-emblem.svg`, `esdoornveen-emblem-grey.svg` | Conduction's own design for Esdoornveen, mbo college, a demo school in Zuiddrecht, which does not exist | +| `warmtepompacademie.svg`, `warmtepompacademie-dark.svg`, `warmtepompacademie-emblem.svg`, `warmtepompacademie-emblem-grey.svg` | Conduction's own design for Warmtepompacademie, a demo school in Zuiddrecht, which does not exist | | Gemeente Zevenaar | ![#596E28](https://via.placeholder.com/16/596E28/596E28.png) `#596E28` | `#FFFFFF` | -- | | Gemeente Zwolle | ![#3A4F93](https://via.placeholder.com/16/3A4F93/3A4F93.png) `#3A4F93` | `#FFFFFF` | -- | | (EXAMPLE) Basisschool | ![#B03A12](https://via.placeholder.com/16/B03A12/B03A12.png) `#B03A12` | `#FFFFFF` | `example-basisschool.svg` | @@ -58,6 +62,10 @@ Colors are sourced from each organization's official NL Design System token set. | (EXAMPLE) Opleider | ![#0E4D5C](https://via.placeholder.com/16/0E4D5C/0E4D5C.png) `#0E4D5C` | `#FFFFFF` | `example-opleider.svg` | | (EXAMPLE) Gemeente | ![#12506B](https://via.placeholder.com/16/12506B/12506B.png) `#12506B` | `#FFFFFF` | `example-gemeente.svg` | | Gemeente Zuiddrecht (demo) | ![#3669A5](https://via.placeholder.com/16/3669A5/3669A5.png) `#3669A5` | `#F5F6F8` | `zuiddrecht.svg`, `zuiddrecht-dark.svg` | +| Basisschool De Wilgenboom (demo) | ![#2F6B4A](https://via.placeholder.com/16/2F6B4A/2F6B4A.png) `#2F6B4A` | `#F5F6F8` | `wilgenboom.svg`, `wilgenboom-dark.svg` | +| Vaartveld College (demo) | ![#1F4FD8](https://via.placeholder.com/16/1F4FD8/1F4FD8.png) `#1F4FD8` | `#F5F6F8` | `vaartveld.svg`, `vaartveld-dark.svg` | +| Esdoornveen, mbo college (demo) | ![#5B2E91](https://via.placeholder.com/16/5B2E91/5B2E91.png) `#5B2E91` | `#F5F6F8` | `esdoornveen.svg`, `esdoornveen-dark.svg` | +| Warmtepompacademie (demo) | ![#0B6E7A](https://via.placeholder.com/16/0B6E7A/0B6E7A.png) `#0B6E7A` | `#F5F6F8` | `warmtepompacademie.svg`, `warmtepompacademie-dark.svg` | ## Logo Sources diff --git a/docs/reference/contrast-report.json b/docs/reference/contrast-report.json index c74326202..f2976b055 100644 --- a/docs/reference/contrast-report.json +++ b/docs/reference/contrast-report.json @@ -1,5 +1,15 @@ { "$comment": "GENERATED by ContrastVerdictDocument::render() — do not edit by hand. Regenerate with: composer docs:contrast-report", + "pairs": { + "textRatio": { + "foreground": "--nldesign-color-primary-text", + "background": "--nldesign-color-primary" + }, + "uiRatio": { + "foreground": "--nldesign-color-primary", + "background": "--nldesign-color-background" + } + }, "sets": { "amsterdam": { "verdict": "pass", @@ -52,8 +62,8 @@ }, "denhaag": { "verdict": "pass", - "textRatio": 5.39, - "uiRatio": 5.39, + "textRatio": 4.66, + "uiRatio": 4.66, "textThreshold": 4.5, "uiThreshold": 3.0 }, @@ -106,6 +116,13 @@ "textThreshold": 4.5, "uiThreshold": 3.0 }, + "esdoornveen": { + "verdict": "pass", + "textRatio": 9.36, + "uiRatio": 8.65, + "textThreshold": 4.5, + "uiThreshold": 3.0 + }, "example-basisschool": { "verdict": "pass", "textRatio": 6.07, @@ -344,6 +361,13 @@ "textThreshold": 4.5, "uiThreshold": 3.0 }, + "vaartveld": { + "verdict": "pass", + "textRatio": 6.63, + "uiRatio": 6.13, + "textThreshold": 4.5, + "uiThreshold": 3.0 + }, "venray": { "verdict": "pass", "textRatio": 4.94, @@ -365,6 +389,13 @@ "textThreshold": 4.5, "uiThreshold": 3.0 }, + "warmtepompacademie": { + "verdict": "pass", + "textRatio": 5.96, + "uiRatio": 5.51, + "textThreshold": 4.5, + "uiThreshold": 3.0 + }, "westervoort": { "verdict": "pass", "textRatio": 11.3, @@ -372,6 +403,13 @@ "textThreshold": 4.5, "uiThreshold": 3.0 }, + "wilgenboom": { + "verdict": "pass", + "textRatio": 6.32, + "uiRatio": 5.84, + "textThreshold": 4.5, + "uiThreshold": 3.0 + }, "xxllnc": { "verdict": "pass", "textRatio": 11.24, diff --git a/docs/reference/contrast-report.md b/docs/reference/contrast-report.md index 25dde8ec6..2cc5f0dd1 100644 --- a/docs/reference/contrast-report.md +++ b/docs/reference/contrast-report.md @@ -26,7 +26,7 @@ system reads `--nldesign-*` tokens, computed by `ContrastService` over | conduction-new | 9.08:1 | 4.5:1 | 9.08:1 | 3.0:1 | pass | | cunningham | 7.80:1 | 4.5:1 | 6.02:1 | 3.0:1 | pass | | demodam | 4.60:1 | 4.5:1 | 4.56:1 | 3.0:1 | pass | -| denhaag | 5.39:1 | 4.5:1 | 5.39:1 | 3.0:1 | pass | +| denhaag | 4.66:1 | 4.5:1 | 4.66:1 | 3.0:1 | pass | | dinkelland | 5.46:1 | 4.5:1 | 5.46:1 | 3.0:1 | pass | | drechterland | 5.74:1 | 4.5:1 | 5.74:1 | 3.0:1 | pass | | duiven | 7.13:1 | 4.5:1 | 7.13:1 | 3.0:1 | pass | @@ -34,6 +34,7 @@ system reads `--nldesign-*` tokens, computed by `ContrastService` over | enkhuizen | 7.23:1 | 4.5:1 | 7.23:1 | 3.0:1 | pass | | enschede | 4.88:1 | 4.5:1 | 4.88:1 | 3.0:1 | pass | | epe | 7.60:1 | 4.5:1 | 7.60:1 | 3.0:1 | pass | +| esdoornveen | 9.36:1 | 4.5:1 | 8.65:1 | 3.0:1 | pass | | example-basisschool | 6.07:1 | 4.5:1 | 6.07:1 | 3.0:1 | pass | | example-college | 9.34:1 | 4.5:1 | 9.34:1 | 3.0:1 | pass | | example-gemeente | 8.80:1 | 4.5:1 | 8.80:1 | 3.0:1 | pass | @@ -68,10 +69,13 @@ system reads `--nldesign-*` tokens, computed by `ContrastService` over | tilburg | 12.61:1 | 4.5:1 | 12.61:1 | 3.0:1 | pass | | tubbergen | 5.91:1 | 4.5:1 | 5.91:1 | 3.0:1 | pass | | utrecht | 7.41:1 | 4.5:1 | 7.41:1 | 3.0:1 | pass | +| vaartveld | 6.63:1 | 4.5:1 | 6.13:1 | 3.0:1 | pass | | venray | 4.94:1 | 4.5:1 | 4.94:1 | 3.0:1 | pass | | vng | 11.98:1 | 4.5:1 | 11.98:1 | 3.0:1 | pass | | vught | 4.62:1 | 4.5:1 | 4.55:1 | 3.0:1 | pass | +| warmtepompacademie | 5.96:1 | 4.5:1 | 5.51:1 | 3.0:1 | pass | | westervoort | 11.30:1 | 4.5:1 | 11.30:1 | 3.0:1 | pass | +| wilgenboom | 6.32:1 | 4.5:1 | 5.84:1 | 3.0:1 | pass | | xxllnc | 11.24:1 | 4.5:1 | 14.16:1 | 3.0:1 | pass | | zaanstad | 5.23:1 | 4.5:1 | 5.23:1 | 3.0:1 | pass | | zevenaar | 5.70:1 | 4.5:1 | 5.70:1 | 3.0:1 | pass | @@ -105,6 +109,7 @@ Pairs: step-current, step-checked, step-not-checked, case-title, case-subtitle, | enkhuizen | 15 | 0 | 0 | | | enschede | 15 | 0 | 0 | | | epe | 15 | 0 | 0 | | +| esdoornveen | 15 | 0 | 0 | | | example-basisschool | 15 | 0 | 0 | | | example-college | 15 | 0 | 0 | | | example-gemeente | 15 | 0 | 0 | | @@ -139,10 +144,13 @@ Pairs: step-current, step-checked, step-not-checked, case-title, case-subtitle, | tilburg | 15 | 0 | 0 | | | tubbergen | 15 | 0 | 0 | | | utrecht | 15 | 0 | 0 | | +| vaartveld | 15 | 0 | 0 | | | venray | 15 | 0 | 0 | | | vng | 15 | 0 | 0 | | | vught | 15 | 0 | 0 | | +| warmtepompacademie | 15 | 0 | 0 | | | westervoort | 15 | 0 | 0 | | +| wilgenboom | 15 | 0 | 0 | | | xxllnc | 15 | 0 | 0 | | | zaanstad | 15 | 0 | 0 | | | zevenaar | 15 | 0 | 0 | | diff --git a/docs/reference/development.md b/docs/reference/development.md index 5b54ed23d..82f30536c 100644 --- a/docs/reference/development.md +++ b/docs/reference/development.md @@ -116,8 +116,9 @@ composer cs:fix # Auto-fix what PHPCBF can handle (~60% of issues) - PHP 8.1+ - Composer 2.x -- Node.js 20+ -- npm +- Node.js 20 or later, with npm, for `npm ci` and `npm run build` +- Node.js 22.14 or later, or 24, for the test and lint tooling (Vitest, ESLint) — + the versions `package.json` declares under `engines` ### Setup @@ -128,10 +129,29 @@ composer install # Install frontend dependencies npm ci -# Run the app in development mode -npm run dev +# Build the fonts, the icons and the code editor +npm run build ``` +### The code editor bundle + +Almost everything under `js/` is hand-written and served as it is, without a build +step. The one exception is the code editor of the playground's "Your components" +tab: the HTML and CSS fields are `CnJsonViewer`, the CodeMirror editor from +`@conduction/nextcloud-vue`. A browser cannot load that Vue component from +`node_modules`, so `npm run build:code-editor` (part of `npm run build`) bundles +`src/codeEditor.js` with webpack, as the other Conduction apps build, into +`js/vendor/codeEditor.js`. + +- The release workflow runs `npm ci` and `npm run build`, so every release and App + Store package contains the bundle. +- `js/vendor/` is gitignored. In a git checkout the bundle exists only after you + built it. Without it the admin page still works: the two fields are plain text + areas. +- Run `npm run build:code-editor` again after updating `@conduction/nextcloud-vue`. + A language the installed `CnJsonViewer` supports is highlighted from then on; + one it does not support yet is shown as plain text. + ### Creating a New Feature ```bash diff --git a/docs/reference/icons.md b/docs/reference/icons.md index 44777ddc1..1a97a3ce9 100644 --- a/docs/reference/icons.md +++ b/docs/reference/icons.md @@ -127,7 +127,7 @@ release** — do not build new integrations against them; migrate to the set-pre ## Logos -The 41 logos in `img/logos/` cover government and municipal organizations, plus five fictional example sets and the demo municipality Zuiddrecht. A representative sample: +The 57 logos in `img/logos/` cover government and municipal organizations, plus five fictional example sets, the demo municipality Zuiddrecht and its four demo schools. A representative sample: - `amsterdam.svg` - City of Amsterdam logo - `ggd-amsterdam.svg` - GGD Amsterdam logo - `stadsarchief.svg` - Amsterdam City Archives diff --git a/docs/reference/token-set-coverage.md b/docs/reference/token-set-coverage.md index e53b6d2bc..0125e6029 100644 --- a/docs/reference/token-set-coverage.md +++ b/docs/reference/token-set-coverage.md @@ -39,7 +39,7 @@ that lowers the allow-list count with nothing fixed, so it has to be written dow | conduction-new | 26/87 | self-hosted | no (known) | pass | | cunningham | n/a | declared | no (known) | pass | | demodam | 21/87 | self-hosted | no (known) | pass | -| denhaag | 0/87 | self-hosted | yes | pass | +| denhaag | 81/87 | declared | yes | pass | | dinkelland | 53/87 | self-hosted | no (known) | pass | | drechterland | 19/87 | system | yes | pass | | duiven | 10/87 | self-hosted | no (known) | pass | @@ -47,6 +47,7 @@ that lowers the allow-list count with nothing fixed, so it has to be written dow | enkhuizen | 19/87 | system | no (known) | pass | | enschede | 55/87 | self-hosted | no (known) | pass | | epe | 0/87 | self-hosted | yes | pass | +| esdoornveen | 0/87 | self-hosted | yes | pass | | example-basisschool | 74/87 | self-hosted | yes | pass | | example-college | 74/87 | self-hosted | yes | pass | | example-gemeente | 74/87 | self-hosted | yes | pass | @@ -80,19 +81,22 @@ that lowers the allow-list count with nothing fixed, so it has to be written dow | tilburg | 25/87 | system | yes | pass | | tubbergen | 53/87 | self-hosted | no (known) | pass | | utrecht | 0/87 | self-hosted | yes | pass | +| vaartveld | 0/87 | self-hosted | yes | pass | | venray | 23/87 | declared | no (known) | pass | | vng | 74/87 | declared | yes | pass | | vught | 23/87 | declared | no (known) | pass | +| warmtepompacademie | 0/87 | self-hosted | yes | pass | | westervoort | 8/87 | self-hosted | no (known) | pass | +| wilgenboom | 0/87 | self-hosted | yes | pass | | xxllnc | 46/87 | declared | yes | pass | | zaanstad | 55/87 | self-hosted | no (known) | pass | | zevenaar | 8/87 | self-hosted | no (known) | pass | | zuiddrecht | 0/87 | self-hosted | yes | pass | | zwolle | 0/87 | declared | no (known) | pass | -- 57 sets measured; 23 pass every gated dimension (font, logo, contrast). -- bridge (measured, NOT gated): 9 of 53 bridged sets declare none of the 87 --utrecht-* names; median 21. -- font: 16 declared, 37 self-hosted, 4 system. -- logo: 34 of 57 point Nextcloud at no logo. -- contrast: 0 of 57 do not pass. +- 61 sets measured; 27 pass every gated dimension (font, logo, contrast). +- bridge (measured, NOT gated): 12 of 57 bridged sets declare none of the 87 --utrecht-* names; median 21. +- font: 17 declared, 40 self-hosted, 4 system. +- logo: 34 of 61 point Nextcloud at no logo. +- contrast: 0 of 61 do not pass. diff --git a/docs/reference/token-sets/denhaag.md b/docs/reference/token-sets/denhaag.md index 73387119d..c4445602a 100644 --- a/docs/reference/token-sets/denhaag.md +++ b/docs/reference/token-sets/denhaag.md @@ -2,151 +2,151 @@ # Gemeente Den Haag -Token set `denhaag`: 47 declared by this set, 130 from the defaults layer. +Token set `denhaag`: 2883 declared by this set, 129 from the defaults layer. -Contrast: primary text on primary 5.39:1, primary on background 5.39:1 (pass). +Contrast: primary text on primary 4.66:1, primary on background 4.66:1 (pass). ## Colours (Kleuren) | Token | Value | Dark mode | Source | Paints | |---|---|---|---|---| -| `--nldesign-color-background-dark` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e8e8e8%22%2F%3E%3C%2Fsvg%3E) `#e8e8e8` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23282828%22%2F%3E%3C%2Fsvg%3E) `#282828` | this set | Background dark, Table header background | -| `--nldesign-color-background-darker` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d4d4d4%22%2F%3E%3C%2Fsvg%3E) `#d4d4d4` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23393939%22%2F%3E%3C%2Fsvg%3E) `#393939` | this set | Background darker | -| `--nldesign-color-background-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f5f5f5%22%2F%3E%3C%2Fsvg%3E) `#f5f5f5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231d1d1d%22%2F%3E%3C%2Fsvg%3E) `#1d1d1d` | this set | Main background color | -| `--nldesign-color-border` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E) `#cccccc` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233f3f3f%22%2F%3E%3C%2Fsvg%3E) `#3f3f3f` | this set | Border color, Select border, Table row rule, Text input border, `--nldesign-component-separator-border-color` | -| `--nldesign-color-border-dark` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23999999%22%2F%3E%3C%2Fsvg%3E) `#999999` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%236a6a6a%22%2F%3E%3C%2Fsvg%3E) `#6a6a6a` | this set | Border dark, Border max contrast | -| `--nldesign-color-button-primary-background` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231a7a3e%22%2F%3E%3C%2Fsvg%3E) `#1a7a3e` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237cdda0%22%2F%3E%3C%2Fsvg%3E) `#7cdda0` | this set | | -| `--nldesign-color-button-primary-border` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231a7a3e%22%2F%3E%3C%2Fsvg%3E) `#1a7a3e` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237cdda0%22%2F%3E%3C%2Fsvg%3E) `#7cdda0` | this set | | -| `--nldesign-color-button-primary-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23156633%22%2F%3E%3C%2Fsvg%3E) `#156633` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238ce2ac%22%2F%3E%3C%2Fsvg%3E) `#8ce2ac` | this set | | +| `--nldesign-color-background-dark` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f2f2f2%22%2F%3E%3C%2Fsvg%3E) `#f2f2f2` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | Background dark, Table header background | +| `--nldesign-color-background-darker` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | Background darker | +| `--nldesign-color-background-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f9f8f6%22%2F%3E%3C%2Fsvg%3E) `#f9f8f6` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23201c16%22%2F%3E%3C%2Fsvg%3E) `#201c16` | this set | Main background color | +| `--nldesign-color-border` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | Border color, Select border, Table row rule, Text input border, `--nldesign-component-separator-border-color` | +| `--nldesign-color-border-dark` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237a7a7a%22%2F%3E%3C%2Fsvg%3E) `#7a7a7a` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | Border dark, Border max contrast | +| `--nldesign-color-button-primary-background` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23238541%22%2F%3E%3C%2Fsvg%3E) `#238541` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--nldesign-color-button-primary-border` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23238541%22%2F%3E%3C%2Fsvg%3E) `#238541` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--nldesign-color-button-primary-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231e6c35%22%2F%3E%3C%2Fsvg%3E) `#1e6c35` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | | | `--nldesign-color-button-primary-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233e3e3e%22%2F%3E%3C%2Fsvg%3E) `#3e3e3e` | this set | | -| `--nldesign-color-error` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d52d2d%22%2F%3E%3C%2Fsvg%3E) `#d52d2d` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ca3232%22%2F%3E%3C%2Fsvg%3E) `#ca3232` | this set | Border error, Element error, Error color, Text error, Text input invalid | -| `--nldesign-color-error-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23aa2424%22%2F%3E%3C%2Fsvg%3E) `#aa2424` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d35555%22%2F%3E%3C%2Fsvg%3E) `#d35555` | this set | Error hover | -| `--nldesign-color-error-rgb` | `213, 45, 45` | `202, 50, 50` | this set | Error text color | +| `--nldesign-color-error` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23a30500%22%2F%3E%3C%2Fsvg%3E) `#a30500` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f65b56%22%2F%3E%3C%2Fsvg%3E) `#f65b56` | this set | Border error, Element error, Error color, Text error, Text input invalid | +| `--nldesign-color-error-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23520100%22%2F%3E%3C%2Fsvg%3E) `#520100` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23fa9897%22%2F%3E%3C%2Fsvg%3E) `#fa9897` | this set | Error hover | +| `--nldesign-color-error-rgb` | `163, 5, 0` | `246, 91, 86` | this set | Error text color | | `--nldesign-color-favorite` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e17000%22%2F%3E%3C%2Fsvg%3E) `#e17000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f48c25%22%2F%3E%3C%2Fsvg%3E) `#f48c25` | defaults | Background blur filter | -| `--nldesign-color-focus` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22rgba%2818%2C%2097%2C%20163%2C%200.5%29%22%2F%3E%3C%2Fsvg%3E) `rgba(18, 97, 163, 0.5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2359a5e480%22%2F%3E%3C%2Fsvg%3E) `#59a5e480` | this set | Button focus ring | -| `--nldesign-color-focus-rgb` | `18, 97, 163` | `89, 165, 228` | this set | | -| `--nldesign-color-header-background` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231a7a3e%22%2F%3E%3C%2Fsvg%3E) `#1a7a3e` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237cdda0%22%2F%3E%3C%2Fsvg%3E) `#7cdda0` | this set | | -| `--nldesign-color-header-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | -| `--nldesign-color-info` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231261a3%22%2F%3E%3C%2Fsvg%3E) `#1261a3` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2359a5e4%22%2F%3E%3C%2Fsvg%3E) `#59a5e4` | this set | Info color, Info hover color, Text input focus | -| `--nldesign-color-info-rgb` | `18, 97, 163` | `89, 165, 228` | this set | | -| `--nldesign-color-link` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231261a3%22%2F%3E%3C%2Fsvg%3E) `#1261a3` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2359a5e4%22%2F%3E%3C%2Fsvg%3E) `#59a5e4` | this set | Link colour | -| `--nldesign-color-link-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231a7a3e%22%2F%3E%3C%2Fsvg%3E) `#1a7a3e` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237cdda0%22%2F%3E%3C%2Fsvg%3E) `#7cdda0` | this set | Link hover colour | -| `--nldesign-color-link-visited` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%236b3fa0%22%2F%3E%3C%2Fsvg%3E) `#6b3fa0` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238960ba%22%2F%3E%3C%2Fsvg%3E) `#8960ba` | this set | `--nldesign-component-link-visited-color` | +| `--nldesign-color-focus` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23806400%22%2F%3E%3C%2Fsvg%3E) `#806400` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f8da72%22%2F%3E%3C%2Fsvg%3E) `#f8da72` | this set | Button focus ring | +| `--nldesign-color-focus-rgb` | `0, 123, 199` | `248, 218, 114` | defaults | | +| `--nldesign-color-header-background` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--nldesign-color-header-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232e2e2e%22%2F%3E%3C%2Fsvg%3E) `#2e2e2e` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--nldesign-color-info` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23094b81%22%2F%3E%3C%2Fsvg%3E) `#094b81` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2373b7ee%22%2F%3E%3C%2Fsvg%3E) `#73b7ee` | this set | Info color, Info hover color, Text input focus | +| `--nldesign-color-info-rgb` | `9, 75, 129` | `115, 183, 238` | this set | | +| `--nldesign-color-link` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231260a1%22%2F%3E%3C%2Fsvg%3E) `#1260a1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235ba6e4%22%2F%3E%3C%2Fsvg%3E) `#5ba6e4` | this set | Link colour | +| `--nldesign-color-link-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23094b81%22%2F%3E%3C%2Fsvg%3E) `#094b81` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2373b7ee%22%2F%3E%3C%2Fsvg%3E) `#73b7ee` | this set | Link hover colour | +| `--nldesign-color-link-visited` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231260a1%22%2F%3E%3C%2Fsvg%3E) `#1260a1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235ba6e4%22%2F%3E%3C%2Fsvg%3E) `#5ba6e4` | this set | `--nldesign-component-link-visited-color` | | `--nldesign-color-logo-background` | `transparent` | | defaults | | | `--nldesign-color-nav-background` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | -| `--nldesign-color-placeholder-dark` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E) `#cccccc` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233f3f3f%22%2F%3E%3C%2Fsvg%3E) `#3f3f3f` | defaults | Placeholder dark | -| `--nldesign-color-placeholder-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e5e5e5%22%2F%3E%3C%2Fsvg%3E) `#e5e5e5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232a2a2a%22%2F%3E%3C%2Fsvg%3E) `#2a2a2a` | defaults | Placeholder light | -| `--nldesign-color-primary` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231a7a3e%22%2F%3E%3C%2Fsvg%3E) `#1a7a3e` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233ed677%22%2F%3E%3C%2Fsvg%3E) `#3ed677` | this set | Badge background, Primary button background, Primary color, Primary element color, Primary element light text and 7 more | -| `--nldesign-color-primary-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23156633%22%2F%3E%3C%2Fsvg%3E) `#156633` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23156633%22%2F%3E%3C%2Fsvg%3E) `#156633` | this set | Primary button hover, Primary element hover, Primary hover color | -| `--nldesign-color-primary-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e6f4eb%22%2F%3E%3C%2Fsvg%3E) `#e6f4eb` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23173020%22%2F%3E%3C%2Fsvg%3E) `#173020` | this set | Primary element light, Tertiary button hover, `--color-primary-element-text-dark` | -| `--nldesign-color-primary-light-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cce9d7%22%2F%3E%3C%2Fsvg%3E) `#cce9d7` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2321452f%22%2F%3E%3C%2Fsvg%3E) `#21452f` | this set | Primary element light hover, Primary light hover, Tertiary button pressed | +| `--nldesign-color-placeholder-dark` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | Placeholder dark | +| `--nldesign-color-placeholder-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f2f2f2%22%2F%3E%3C%2Fsvg%3E) `#f2f2f2` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | Placeholder light | +| `--nldesign-color-primary` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23238541%22%2F%3E%3C%2Fsvg%3E) `#238541` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2355d27b%22%2F%3E%3C%2Fsvg%3E) `#55d27b` | this set | Badge background, Primary button background, Primary color, Primary element color, Primary element light text and 7 more | +| `--nldesign-color-primary-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231e6c35%22%2F%3E%3C%2Fsvg%3E) `#1e6c35` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231e6c35%22%2F%3E%3C%2Fsvg%3E) `#1e6c35` | this set | Primary button hover, Primary element hover, Primary hover color | +| `--nldesign-color-primary-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d5e7d5%22%2F%3E%3C%2Fsvg%3E) `#d5e7d5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23243c24%22%2F%3E%3C%2Fsvg%3E) `#243c24` | this set | Primary element light, Tertiary button hover, `--color-primary-element-text-dark` | +| `--nldesign-color-primary-light-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d5e7d5%22%2F%3E%3C%2Fsvg%3E) `#d5e7d5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23243c24%22%2F%3E%3C%2Fsvg%3E) `#243c24` | this set | Primary element light hover, Primary light hover, Tertiary button pressed | | `--nldesign-color-primary-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E) `#111111` | this set | Badge number, Primary button label, Primary element text, Primary text color | -| `--nldesign-color-success` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231a7a3e%22%2F%3E%3C%2Fsvg%3E) `#1a7a3e` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237cdda0%22%2F%3E%3C%2Fsvg%3E) `#7cdda0` | this set | Border success, Element success, Success color, Text success | -| `--nldesign-color-success-rgb` | `26, 122, 62` | `124, 221, 160` | this set | Success hover color | -| `--nldesign-color-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23333333%22%2F%3E%3C%2Fsvg%3E) `#333333` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E) `#cccccc` | this set | Body text colour, Main text color, Table header label, `--nldesign-component-form-field-label-color`, `--nldesign-component-heading-1-color` and 8 more | +| `--nldesign-color-success` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231e6c35%22%2F%3E%3C%2Fsvg%3E) `#1e6c35` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | Border success, Element success, Success color, Text success | +| `--nldesign-color-success-rgb` | `30, 108, 53` | `137, 217, 160` | this set | Success hover color | +| `--nldesign-color-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232e2e2e%22%2F%3E%3C%2Fsvg%3E) `#2e2e2e` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | Body text colour, Main text color, Table header label, `--nldesign-component-form-field-label-color`, `--nldesign-component-heading-1-color` and 8 more | | `--nldesign-color-text-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | Muted text default color | -| `--nldesign-color-text-muted` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23666666%22%2F%3E%3C%2Fsvg%3E) `#666666` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | Text lighter, Text max contrast | -| `--nldesign-color-warning` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ec6d23%22%2F%3E%3C%2Fsvg%3E) `#ec6d23` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d4611d%22%2F%3E%3C%2Fsvg%3E) `#d4611d` | this set | Element warning, Text warning, Warning color | -| `--nldesign-color-warning-rgb` | `236, 109, 35` | `212, 97, 29` | this set | Warning hover color | +| `--nldesign-color-text-muted` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%234a4a4a%22%2F%3E%3C%2Fsvg%3E) `#4a4a4a` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | Text lighter, Text max contrast | +| `--nldesign-color-warning` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23df5601%22%2F%3E%3C%2Fsvg%3E) `#df5601` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f37526%22%2F%3E%3C%2Fsvg%3E) `#f37526` | this set | Element warning, Text warning, Warning color | +| `--nldesign-color-warning-rgb` | `223, 86, 1` | `243, 117, 38` | this set | Warning hover color | | `--nldesign-component-badge-background-color` | `var( --nldesign-color-primary - )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237cdda0%22%2F%3E%3C%2Fsvg%3E) `#7cdda0` | defaults | | + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | defaults | | | `--nldesign-component-badge-color` | `var( --nldesign-color-primary-text )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233e3e3e%22%2F%3E%3C%2Fsvg%3E) `#3e3e3e` | defaults | | | `--nldesign-component-button-active-background-color` | `var( --nldesign-color-primary-light-hover - )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2321452f%22%2F%3E%3C%2Fsvg%3E) `#21452f` | defaults | | + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23243c24%22%2F%3E%3C%2Fsvg%3E) `#243c24` | defaults | | | `--nldesign-component-button-active-color` | `var( --nldesign-color-primary - )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2385e5a9%22%2F%3E%3C%2Fsvg%3E) `#85e5a9` | defaults | | + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | defaults | | | `--nldesign-component-button-background-color` | `transparent` | | defaults | | | `--nldesign-component-button-border-color` | `var( --nldesign-color-primary - )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237cdda0%22%2F%3E%3C%2Fsvg%3E) `#7cdda0` | defaults | | -| `--nldesign-component-button-color` | `var(--nldesign-color-primary)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2385e5a9%22%2F%3E%3C%2Fsvg%3E) `#85e5a9` | defaults | | + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | defaults | | +| `--nldesign-component-button-color` | `var(--nldesign-color-primary)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | defaults | | | `--nldesign-component-button-disabled-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e5e5e5%22%2F%3E%3C%2Fsvg%3E) `#e5e5e5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232a2a2a%22%2F%3E%3C%2Fsvg%3E) `#2a2a2a` | defaults | | | `--nldesign-component-button-disabled-border-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b4b4b4%22%2F%3E%3C%2Fsvg%3E) `#b4b4b4` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23535353%22%2F%3E%3C%2Fsvg%3E) `#535353` | defaults | | | `--nldesign-component-button-disabled-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23696969%22%2F%3E%3C%2Fsvg%3E) `#696969` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | defaults | | | `--nldesign-component-button-focus-border-color` | `var( --nldesign-color-focus - )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2359a5e480%22%2F%3E%3C%2Fsvg%3E) `#59a5e480` | defaults | | + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f8da72%22%2F%3E%3C%2Fsvg%3E) `#f8da72` | defaults | | | `--nldesign-component-button-hover-background-color` | `var( --nldesign-color-primary-light - )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23173020%22%2F%3E%3C%2Fsvg%3E) `#173020` | defaults | | + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23243c24%22%2F%3E%3C%2Fsvg%3E) `#243c24` | defaults | | | `--nldesign-component-button-hover-border-color` | `var( --nldesign-color-primary-hover - )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238ce2ac%22%2F%3E%3C%2Fsvg%3E) `#8ce2ac` | defaults | | + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | defaults | | | `--nldesign-component-button-hover-color` | `var( --nldesign-color-primary - )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2385e5a9%22%2F%3E%3C%2Fsvg%3E) `#85e5a9` | defaults | | + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | defaults | | | `--nldesign-component-button-primary-action-background-color` | `var( --nldesign-color-primary - )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237cdda0%22%2F%3E%3C%2Fsvg%3E) `#7cdda0` | defaults | | + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | defaults | | | `--nldesign-component-button-primary-action-border-color` | `var( --nldesign-color-primary - )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237cdda0%22%2F%3E%3C%2Fsvg%3E) `#7cdda0` | defaults | | + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | defaults | | | `--nldesign-component-button-primary-action-color` | `var( --nldesign-color-primary-text )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233e3e3e%22%2F%3E%3C%2Fsvg%3E) `#3e3e3e` | defaults | | | `--nldesign-component-button-primary-action-hover-background-color` | `var( --nldesign-color-primary-hover - )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238ce2ac%22%2F%3E%3C%2Fsvg%3E) `#8ce2ac` | defaults | | + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | defaults | | | `--nldesign-component-button-primary-action-hover-color` | `var( --nldesign-color-primary-text )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233e3e3e%22%2F%3E%3C%2Fsvg%3E) `#3e3e3e` | defaults | | | `--nldesign-component-button-secondary-action-background-color` | `transparent` | | defaults | | | `--nldesign-component-button-secondary-action-border-color` | `var( --nldesign-color-primary - )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237cdda0%22%2F%3E%3C%2Fsvg%3E) `#7cdda0` | defaults | | + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | defaults | | | `--nldesign-component-button-secondary-action-color` | `var( --nldesign-color-primary - )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2385e5a9%22%2F%3E%3C%2Fsvg%3E) `#85e5a9` | defaults | | + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | defaults | | | `--nldesign-component-button-secondary-action-hover-background-color` | `var( --nldesign-color-primary-light - )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23173020%22%2F%3E%3C%2Fsvg%3E) `#173020` | defaults | | -| `--nldesign-component-form-field-label-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E) `#cccccc` | defaults | | + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23243c24%22%2F%3E%3C%2Fsvg%3E) `#243c24` | defaults | | +| `--nldesign-component-form-field-label-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | defaults | | | `--nldesign-component-form-fieldset-border-color` | `var( --nldesign-color-border - )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233f3f3f%22%2F%3E%3C%2Fsvg%3E) `#3f3f3f` | defaults | | -| `--nldesign-component-form-select-border-color` | `var(--nldesign-color-border)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233f3f3f%22%2F%3E%3C%2Fsvg%3E) `#3f3f3f` | defaults | | -| `--nldesign-component-form-select-focus-border-color` | `var(--nldesign-color-info)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2359a5e4%22%2F%3E%3C%2Fsvg%3E) `#59a5e4` | defaults | | -| `--nldesign-component-heading-1-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E) `#cccccc` | defaults | | -| `--nldesign-component-heading-2-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E) `#cccccc` | defaults | | -| `--nldesign-component-heading-3-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E) `#cccccc` | defaults | | -| `--nldesign-component-heading-4-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E) `#cccccc` | defaults | | -| `--nldesign-component-heading-5-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E) `#cccccc` | defaults | | -| `--nldesign-component-heading-6-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E) `#cccccc` | defaults | | -| `--nldesign-component-heading-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E) `#cccccc` | defaults | | -| `--nldesign-component-link-color` | `var(--nldesign-color-link)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235cabed%22%2F%3E%3C%2Fsvg%3E) `#5cabed` | defaults | | -| `--nldesign-component-link-hover-color` | `var(--nldesign-color-link-hover)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2385e5a9%22%2F%3E%3C%2Fsvg%3E) `#85e5a9` | defaults | | -| `--nldesign-component-link-visited-color` | `var(--nldesign-color-link-visited)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239a74c8%22%2F%3E%3C%2Fsvg%3E) `#9a74c8` | defaults | | + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | defaults | | +| `--nldesign-component-form-select-border-color` | `var(--nldesign-color-border)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | defaults | | +| `--nldesign-component-form-select-focus-border-color` | `var(--nldesign-color-info)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2373b7ee%22%2F%3E%3C%2Fsvg%3E) `#73b7ee` | defaults | | +| `--nldesign-component-heading-1-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | defaults | | +| `--nldesign-component-heading-2-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | defaults | | +| `--nldesign-component-heading-3-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | defaults | | +| `--nldesign-component-heading-4-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | defaults | | +| `--nldesign-component-heading-5-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | defaults | | +| `--nldesign-component-heading-6-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | defaults | | +| `--nldesign-component-heading-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | defaults | | +| `--nldesign-component-link-color` | `var(--nldesign-color-link)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235eaced%22%2F%3E%3C%2Fsvg%3E) `#5eaced` | defaults | | +| `--nldesign-component-link-hover-color` | `var(--nldesign-color-link-hover)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237ec0f6%22%2F%3E%3C%2Fsvg%3E) `#7ec0f6` | defaults | | +| `--nldesign-component-link-visited-color` | `var(--nldesign-color-link-visited)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235eaced%22%2F%3E%3C%2Fsvg%3E) `#5eaced` | defaults | | | `--nldesign-component-ordered-list-color` | `var( --nldesign-color-text - )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E) `#cccccc` | defaults | | -| `--nldesign-component-paragraph-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E) `#cccccc` | defaults | | -| `--nldesign-component-separator-border-color` | `var(--nldesign-color-border)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233f3f3f%22%2F%3E%3C%2Fsvg%3E) `#3f3f3f` | defaults | | -| `--nldesign-component-table-border-color` | `var(--nldesign-color-border)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233f3f3f%22%2F%3E%3C%2Fsvg%3E) `#3f3f3f` | defaults | | + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | defaults | | +| `--nldesign-component-paragraph-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | defaults | | +| `--nldesign-component-separator-border-color` | `var(--nldesign-color-border)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | defaults | | +| `--nldesign-component-table-border-color` | `var(--nldesign-color-border)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | defaults | | | `--nldesign-component-table-header-background-color` | `var( --nldesign-color-background-dark - )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23282828%22%2F%3E%3C%2Fsvg%3E) `#282828` | defaults | | -| `--nldesign-component-table-header-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E) `#cccccc` | defaults | | + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | defaults | | +| `--nldesign-component-table-header-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | defaults | | | `--nldesign-component-table-row-hover-background-color` | `var( --nldesign-color-background-hover - )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231d1d1d%22%2F%3E%3C%2Fsvg%3E) `#1d1d1d` | defaults | | + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23201c16%22%2F%3E%3C%2Fsvg%3E) `#201c16` | defaults | | | `--nldesign-component-textbox-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | defaults | | -| `--nldesign-component-textbox-border-color` | `var(--nldesign-color-border)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237f7f7f%22%2F%3E%3C%2Fsvg%3E) `#7f7f7f` | defaults | | -| `--nldesign-component-textbox-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E) `#cccccc` | defaults | | +| `--nldesign-component-textbox-border-color` | `var(--nldesign-color-border)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237b7b7b%22%2F%3E%3C%2Fsvg%3E) `#7b7b7b` | defaults | | +| `--nldesign-component-textbox-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | defaults | | | `--nldesign-component-textbox-disabled-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e5e5e5%22%2F%3E%3C%2Fsvg%3E) `#e5e5e5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232a2a2a%22%2F%3E%3C%2Fsvg%3E) `#2a2a2a` | defaults | | | `--nldesign-component-textbox-disabled-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23696969%22%2F%3E%3C%2Fsvg%3E) `#696969` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | defaults | | -| `--nldesign-component-textbox-focus-border-color` | `var(--nldesign-color-info)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2359a5e4%22%2F%3E%3C%2Fsvg%3E) `#59a5e4` | defaults | | +| `--nldesign-component-textbox-focus-border-color` | `var(--nldesign-color-info)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2373b7ee%22%2F%3E%3C%2Fsvg%3E) `#73b7ee` | defaults | | | `--nldesign-component-textbox-hover-border-color` | `var( --nldesign-color-border-dark - )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%236a6a6a%22%2F%3E%3C%2Fsvg%3E) `#6a6a6a` | defaults | | -| `--nldesign-component-textbox-invalid-border-color` | `var(--nldesign-color-error)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ca3232%22%2F%3E%3C%2Fsvg%3E) `#ca3232` | defaults | | + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | defaults | | +| `--nldesign-component-textbox-invalid-border-color` | `var(--nldesign-color-error)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f65b56%22%2F%3E%3C%2Fsvg%3E) `#f65b56` | defaults | | | `--nldesign-component-unordered-list-color` | `var( --nldesign-color-text - )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E) `#cccccc` | defaults | | + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | defaults | | ## Typography (Typografie) @@ -205,7 +205,7 @@ Contrast: primary text on primary 5.39:1, primary on background 5.39:1 (pass). | `--nldesign-component-textbox-font-size` | `1rem` | | defaults | | | `--nldesign-component-unordered-list-font-size` | `1rem` | | defaults | | | `--nldesign-component-unordered-list-line-height` | `1.5` | | defaults | | -| `--nldesign-font-family` | `'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif` | | this set | Font family, `--nldesign-component-button-font-family`, `--nldesign-component-textbox-font-family` | +| `--nldesign-font-family` | `"TheSans", "Fira Sans", sans-serif` | | this set | Font family, `--nldesign-component-button-font-family`, `--nldesign-component-textbox-font-family` | | `--nldesign-font-weight-default` | `400` | | defaults | Base font size | | `--nldesign-font-weight-element` | `500` | | defaults | Control font weight | | `--nldesign-font-weight-heading` | `700` | | defaults | Heading font weight | @@ -214,11 +214,11 @@ Contrast: primary text on primary 5.39:1, primary on background 5.39:1 (pass). | Token | Value | Dark mode | Source | Paints | |---|---|---|---|---| -| `--nldesign-border-radius` | `4px` | | this set | Border radius element, Button corner, Input border width, Select corner, Text input corner | -| `--nldesign-border-radius-large` | `8px` | | this set | Container radius | +| `--nldesign-border-radius` | `3px` | | this set | Border radius element, Button corner, Input border width, Select corner, Text input corner | +| `--nldesign-border-radius-large` | `3px` | | this set | Container radius | | `--nldesign-border-radius-pill` | `100px` | | this set | Badge shape, Border radius pill | -| `--nldesign-border-radius-rounded` | `28px` | | this set | Border radius rounded | -| `--nldesign-border-radius-small` | `2px` | | this set | Border radius small | +| `--nldesign-border-radius-rounded` | `3px` | | this set | Border radius rounded | +| `--nldesign-border-radius-small` | `3px` | | this set | Border radius small | | `--nldesign-component-badge-border-radius` | `var( --nldesign-border-radius-pill )` | | defaults | | @@ -262,10 +262,2845 @@ Contrast: primary text on primary 5.39:1, primary on background 5.39:1 (pass). | Token | Value | Dark mode | Source | Paints | |---|---|---|---|---| -| `--denhaag-color-blue` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231261a3%22%2F%3E%3C%2Fsvg%3E) `#1261a3` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2359a5e4%22%2F%3E%3C%2Fsvg%3E) `#59a5e4` | this set | | -| `--denhaag-color-green` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231a7a3e%22%2F%3E%3C%2Fsvg%3E) `#1a7a3e` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237cdda0%22%2F%3E%3C%2Fsvg%3E) `#7cdda0` | this set | | -| `--denhaag-color-green-dark` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23156633%22%2F%3E%3C%2Fsvg%3E) `#156633` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238ce2ac%22%2F%3E%3C%2Fsvg%3E) `#8ce2ac` | this set | | -| `--denhaag-color-orange` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ec6d23%22%2F%3E%3C%2Fsvg%3E) `#ec6d23` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d4611d%22%2F%3E%3C%2Fsvg%3E) `#d4611d` | this set | | -| `--denhaag-color-red` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d52d2d%22%2F%3E%3C%2Fsvg%3E) `#d52d2d` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ca3232%22%2F%3E%3C%2Fsvg%3E) `#ca3232` | this set | | -| `--denhaag-color-yellow` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f5c917%22%2F%3E%3C%2Fsvg%3E) `#f5c917` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23dfb715%22%2F%3E%3C%2Fsvg%3E) `#dfb715` | this set | | +| `--ams-date-input-background-color` | `var(--utrecht-textbox-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--ams-date-input-border-color` | `var(--utrecht-textbox-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--ams-date-input-border-radius` | `var(--utrecht-textbox-border-radius)` | | this set | | +| `--ams-date-input-border-style` | `solid` | | this set | | +| `--ams-date-input-border-width` | `var(--utrecht-textbox-border-width)` | | this set | | +| `--ams-date-input-box-shadow` | `''` | | this set | | +| `--ams-date-input-calender-picker-indicator-background-image` | `url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJXaW5kb3dUZXh0IiBkPSJNMjAgM2gtMVYxaC0ydjJIN1YxSDV2Mkg0Yy0xLjEgMC0yIC45LTIgMnYxNmMwIDEuMS45IDIgMiAyaDE2YzEuMSAwIDItLjkgMi0yVjVjMC0xLjEtLjktMi0yLTJ6bTAgMThINFY4aDE2djEzeiIvPjxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiLz48L3N2Zz4=')` | | this set | | +| `--ams-date-input-color` | `var(--utrecht-textbox-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--ams-date-input-font-family` | `var(--utrecht-textbox-font-family)` | | this set | | +| `--ams-date-input-font-size` | `var(--utrecht-textbox-font-size)` | | this set | | +| `--ams-date-input-font-weight` | `var(--utrecht-textbox-font-weight)` | | this set | | +| `--ams-date-input-hover-calender-picker-indicator-background-image` | `url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJXaW5kb3dUZXh0IiBkPSJNMjAgM2gtMVYxaC0ydjJIN1YxSDV2Mkg0Yy0xLjEgMC0yIC45LTIgMnYxNmMwIDEuMS45IDIgMiAyaDE2YzEuMSAwIDItLjkgMi0yVjVjMC0xLjEtLjktMi0yLTJ6bTAgMThINFY4aDE2djEzeiIvPjxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiLz48L3N2Zz4=')` | | this set | | +| `--ams-date-input-line-height` | `var(--utrecht-textbox-line-height)` | | this set | | +| `--ams-date-input-margin-block` | `var(--utrecht-textbox-margin-block)` | | this set | | +| `--ams-date-input-min-block-size` | `var(--utrecht-textbox-min-block-size)` | | this set | | +| `--ams-date-input-min-inline-size` | `var(--utrecht-textbox-min-inline-size)` | | this set | | +| `--ams-date-input-outline-offset` | `var(--utrecht-textbox-outline-offset)` | | this set | | +| `--ams-date-input-padding-block` | `var(--utrecht-textbox-padding-block-start)` | | this set | | +| `--ams-date-input-padding-inline` | `var(--utrecht-textbox-padding-inline-start)` | | this set | | +| `--ams-pagination-button-active-background-color` | `transparent` | | this set | | +| `--ams-pagination-button-active-border-color` | `transparent` | | this set | | +| `--ams-pagination-button-active-color` | `var(--tilburg-interaction-active-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--ams-pagination-button-active-text-decoration` | `underline` | | this set | | +| `--ams-pagination-button-background-color` | `transparent` | | this set | | +| `--ams-pagination-button-border-color` | `transparent` | | this set | | +| `--ams-pagination-button-border-radius` | `0px` | | this set | | +| `--ams-pagination-button-border-width` | `var(--tilburg-border-width-sm)` | | this set | | +| `--ams-pagination-button-color` | `var(--tilburg-interaction-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--ams-pagination-button-current-background-color` | `var(--tilburg-color-gray-100)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--ams-pagination-button-current-border-color` | `transparent` | | this set | | +| `--ams-pagination-button-current-color` | `var(--tilburg-document-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--ams-pagination-button-current-font-weight` | `var( --tilburg-document-strong-font-weight )` | | this set | | +| `--ams-pagination-button-current-text-decoration` | `none` | | this set | | +| `--ams-pagination-button-focus-background-color` | `var( --tilburg-focus-background-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235ba6e4%22%2F%3E%3C%2Fsvg%3E) `#5ba6e4` | this set | | +| `--ams-pagination-button-focus-color` | `var(--tilburg-focus-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--ams-pagination-button-focus-text-decoration` | `none` | | this set | | +| `--ams-pagination-button-font-weight` | `var(--tilburg-document-font-weight)` | | this set | | +| `--ams-pagination-button-hover-background-color` | `transparent` | | this set | | +| `--ams-pagination-button-hover-border-color` | `transparent` | | this set | | +| `--ams-pagination-button-hover-color` | `var(--tilburg-interaction-hover-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--ams-pagination-button-hover-text-decoration` | `underline` | | this set | | +| `--ams-pagination-button-min-block-size` | `var(--tilburg-pointer-target-min-size)` | | this set | | +| `--ams-pagination-button-min-inline-size` | `var(--tilburg-pointer-target-min-size)` | | this set | | +| `--ams-pagination-button-padding-block-end` | `var(--tilburg-space-block-snail)` | | this set | | +| `--ams-pagination-button-padding-block-start` | `var(--tilburg-space-block-snail)` | | this set | | +| `--ams-pagination-button-padding-inline` | `var(--tilburg-space-inline-snail)` | | this set | | +| `--ams-pagination-button-padding-inline-end` | `var(--tilburg-space-inline-snail)` | | this set | | +| `--ams-pagination-button-padding-inline-start` | `var(--tilburg-space-inline-snail)` | | this set | | +| `--ams-pagination-button-text-decoration` | `none` | | this set | | +| `--ams-pagination-color` | `var(--tilburg-interaction-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--ams-pagination-description-color` | `var(--tilburg-document-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--ams-pagination-description-font-weight` | `var(--tilburg-document-font-weight)` | | this set | | +| `--ams-pagination-ellipses-color` | `var(--tilburg-document-subtle-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--ams-pagination-ellipses-font-weight` | `var(--tilburg-document-font-weight)` | | this set | | +| `--ams-pagination-ellipses-padding-block-end` | `var(--tilburg-space-block-snail)` | | this set | | +| `--ams-pagination-ellipses-padding-block-start` | `var(--tilburg-space-block-snail)` | | this set | | +| `--ams-pagination-ellipses-padding-inline-end` | `var(--tilburg-space-inline-ant)` | | this set | | +| `--ams-pagination-ellipses-padding-inline-start` | `var(--tilburg-space-inline-ant)` | | this set | | +| `--ams-pagination-font-family` | `var(--tilburg-document-font-family)` | | this set | | +| `--ams-pagination-font-size` | `var(--tilburg-document-font-size)` | | this set | | +| `--ams-pagination-line-height` | `var(--tilburg-document-line-height)` | | this set | | +| `--ams-pagination-relative-link-active-background-color` | `transparent` | | this set | | +| `--ams-pagination-relative-link-active-border-color` | `transparent` | | this set | | +| `--ams-pagination-relative-link-active-color` | `var( --tilburg-interaction-active-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--ams-pagination-relative-link-active-text-decoration` | `underline` | | this set | | +| `--ams-pagination-relative-link-background-color` | `transparent` | | this set | | +| `--ams-pagination-relative-link-border-color` | `transparent` | | this set | | +| `--ams-pagination-relative-link-border-radius` | `0px` | | this set | | +| `--ams-pagination-relative-link-border-width` | `var(--tilburg-border-width-sm)` | | this set | | +| `--ams-pagination-relative-link-color` | `var(--tilburg-interaction-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--ams-pagination-relative-link-disabled-background-color` | `transparent` | | this set | | +| `--ams-pagination-relative-link-disabled-border-color` | `transparent` | | this set | | +| `--ams-pagination-relative-link-disabled-color` | `var(--tilburg-color-gray-500)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--ams-pagination-relative-link-focus-background-color` | `var( --tilburg-focus-background-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235ba6e4%22%2F%3E%3C%2Fsvg%3E) `#5ba6e4` | this set | | +| `--ams-pagination-relative-link-focus-color` | `var(--tilburg-focus-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--ams-pagination-relative-link-focus-text-decoration` | `none` | | this set | | +| `--ams-pagination-relative-link-font-weight` | `var(--tilburg-document-font-weight)` | | this set | | +| `--ams-pagination-relative-link-hover-background-color` | `transparent` | | this set | | +| `--ams-pagination-relative-link-hover-border-color` | `transparent` | | this set | | +| `--ams-pagination-relative-link-hover-color` | `var(--tilburg-interaction-hover-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--ams-pagination-relative-link-hover-text-decoration` | `underline` | | this set | | +| `--ams-pagination-relative-link-icon-margin-inline` | `var( --tilburg-space-text-beetle )` | | this set | | +| `--ams-pagination-relative-link-icon-size` | `var(--tilburg-icon-functional-size)` | | this set | | +| `--ams-pagination-relative-link-min-block-size` | `var( --tilburg-pointer-target-min-size )` | | this set | | +| `--ams-pagination-relative-link-min-inline-size` | `var( --tilburg-pointer-target-min-size )` | | this set | | +| `--ams-pagination-relative-link-padding-block-end` | `var(--tilburg-space-block-snail)` | | this set | | +| `--ams-pagination-relative-link-padding-block-start` | `var( --tilburg-space-block-snail )` | | this set | | +| `--ams-pagination-relative-link-padding-inline-end` | `0px` | | this set | | +| `--ams-pagination-relative-link-padding-inline-start` | `0px` | | this set | | +| `--ams-pagination-relative-link-text-decoration` | `none` | | this set | | +| `--conduction-logo-footer-background-image` | `url(data:image/png;base64,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YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNC40LjAtRXhpdjIiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iCiAgICB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6R0lNUD0iaHR0cDovL3d3dy5naW1wLm9yZy94bXAvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDphZGFkMjJhMy0zOGE2LWU5NDEtYjUwYi02MDM2MGVkOWMzNDgiCiAgIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6YmUwZmE4ZjktYjUzNy00MjY1LTk1NDAtYWIxYmI5Zjk1NDVjIgogICB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6Mjc5YzZkZGItMjBkZS1jMTQyLWIwZWItMzdlODc2YjIzMzIxIgogICBkYzpmb3JtYXQ9ImltYWdlL3BuZyIKICAgR0lNUDpBUEk9IjIuMCIKICAgR0lNUDpQbGF0Zm9ybT0iV2luZG93cyIKICAgR0lNUDpUaW1lU3RhbXA9IjE3NDEzNTUxMjMxNTc4NDYiCiAgIEdJTVA6VmVyc2lvbj0iMi4xMC4zMiIKICAgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIKICAgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIgogICB0aWZmOk9yaWVudGF0aW9uPSIxIgogICB4bXA6Q3JlYXRlRGF0ZT0iMjAyMC0wMi0yNlQxNToyODo0MCswMTowMCIKICAgeG1wOkNyZWF0b3JUb29sPSJHSU1QIDIuMTAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjU6MDM6MDdUMTQ6NDU6MjErMDE6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDI1OjAzOjA3VDE0OjQ1OjIxKzAxOjAwIj4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIKICAgICAgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDoyNzljNmRkYi0yMGRlLWMxNDItYjBlYi0zN2U4NzZiMjMzMjEiCiAgICAgIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4xIChXaW5kb3dzKSIKICAgICAgc3RFdnQ6d2hlbj0iMjAyMC0wMi0yNlQxNToyODo0MCswMTowMCIvPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJzYXZlZCIKICAgICAgc3RFdnQ6Y2hhbmdlZD0iLyIKICAgICAgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo5NWM5MThhZS1iOGM3LWE2NDgtOGNjOS05MzJiMDBkYWFmMjgiCiAgICAgIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4xIChXaW5kb3dzKSIKICAgICAgc3RFdnQ6d2hlbj0iMjAyMC0wMi0yNlQxNToyODo0MCswMTowMCIvPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJzYXZlZCIKICAgICAgc3RFdnQ6Y2hhbmdlZD0iLyIKICAgICAgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo1MzIwMTAyMS05ODZmLTQ2YjgtYmU0Mi1jYmY5MGM3NDQ4ZDciCiAgICAgIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkdpbXAgMi4xMCAoV2luZG93cykiCiAgICAgIHN0RXZ0OndoZW49IjIwMjUtMDMtMDdUMTQ6NDU6MjMiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgIAo8P3hwYWNrZXQgZW5kPSJ3Ij8+4lFtDQAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+kDBw0tF4zJ7vgAACAASURBVHja7J15nFTF1fd/p+p298zAAAMMMsM67LILAioYVFSSYASjRiSiaEABBaNZnpg8mryaR58sSiIGVFxQUVDxcQsuEZRVBQXZFRRBUUERWWfrvlXn/aNuzwxqItB3mO6Z8/Uz0QlDT/etqvOrc+rUOYAgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCNUIySOonTAzy1MQMt5AEZGsjfR6foIIuiDCLQg1KkiyVkTwRdAFEW9ByGDRYeYSANnyJEXgRdAFEW5ByFCRkbUkAi+CLoiIC4KIuSACn1F48ghExAVBEI7UZom4i4cuC0JEXBCq3SOUdSaeu3jogoi4IAiCeO7ioQsi5IJQ056frDvx3MVDF0TEBUEQqsEeirCLoIuQC4IgiLALIugi5IIgCOlqL0XcRdBFyAVBEMRrF0TQRcgFQRBE2GsnSh7B4U86EXNBEARxlsRDl0kmCIIg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)` | | this set | | +| `--conduction-logo-footer-block-size` | `50px` | | this set | | +| `--conduction-logo-footer-inline-size` | `96px` | | this set | | +| `--conduction-logo-header-background-image` | `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjE1MCAxNSA5NiA1MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PHBhdGggaWQ9ImEiIGQ9Ik01Ny4zOTYuMjExSC4yODF2NDkuNDA1aDU3LjExNVYuMjF6Ii8+PHBhdGggaWQ9ImMiIGQ9Ik01Ny41NjQuMjExSC40NDh2NDkuNDA1aDU3LjExNlYuMjF6Ii8+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTg3LjkzMSAxNSkiPjxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNhIi8+PC9tYXNrPjxwYXRoIGQ9Ik01Ny4zOTYgMjQuOTEzYzAtMTMuNTczLTExLjAwNC0yNC42MjItMjQuNTYtMjQuNy0uMDI0IDAtLjA0OC0uMDAzLS4wNzMtLjAwM0gyNC43NWEyLjUwNCAyLjUwNCAwIDEgMCAwIDUuMDFoNy45NDVjMTAuODU4IDAgMTkuNjk0IDguODM0IDE5LjY5NCAxOS42OTMgMCAxMC44Ni04LjgzNiAxOS42OTQtMTkuNjk0IDE5LjY5NEg1LjI4OXYtNC41NzhILjI4MXY5LjU4N2gzMi40ODJ2LS4wMDFjMTMuNTktLjA0IDI0LjYzMy0xMS4xMDUgMjQuNjMzLTI0LjcwMiIgZmlsbD0iIzAwOUZFNCIgbWFzaz0idXJsKCNiKSIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNTAgMTUpIj48bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+PHVzZSB4bGluazpocmVmPSIjYyIvPjwvbWFzaz48cGF0aCBkPSJNLjQ0OCAyNC45MTNjMCAxMy41NzMgMTEuMDA0IDI0LjYyMiAyNC41NiAyNC43LjAyNCAwIC4wNDguMDAzLjA3My4wMDNoOC4wMTRhMi41MDQgMi41MDQgMCAxIDAgMC01LjAwOWgtNy45NDRjLTEwLjg1OSAwLTE5LjY5NC04LjgzNC0xOS42OTQtMTkuNjk0IDAtMTAuODU5IDguODM1LTE5LjY5NCAxOS42OTQtMTkuNjk0aDI3LjQwNHY0LjU3OGg1LjAwOVYuMjFIMjUuMDh2LjAwMUMxMS40OS4yNTEuNDQ4IDExLjMxNi40NDggMjQuOTEzIiBmaWxsPSIjMDA5RkU0IiBtYXNrPSJ1cmwoI2QpIi8+PC9nPjxwYXRoIGZpbGw9IiMwMDQzODgiIGQ9Ik0xNzYuMDE3IDQyLjExNmwtNC42NzgtMTIuNDAxaC01LjY2NGw4LjE0IDIwLjM2NmgzLjkyMWw4LjQwMS0yMC4zNjZoLTUuMzYzem0yNi41NDIuNTU4bC03LjkyOC0xMi45NTloLTYuNDEzdjIwLjM2N2g0Ljk5N1YzNi43ODdsOC4xNSAxMy4yOTVoNi4xOVYyOS43MTVoLTQuOTk2em0xOS4zMjMtNC45NHY0LjY2M2gzLjUzN3YyLjY3N2E5Ljc3MyA5Ljc3MyAwIDAgMS0xLjQxNC41NGMtLjY1Mi4yMDMtMS40NDMuMzA2LTIuMzU0LjMwNi0uODggMC0xLjY4Ni0uMTUtMi4zOTQtLjQ0OGE1LjMzOCA1LjMzOCAwIDAgMS0xLjgyNC0xLjI0NyA1LjUyMiA1LjUyMiAwIDAgMS0xLjE3LTEuODk0Yy0uMjcyLS43MjktLjQxLTEuNTQ5LS40MS0yLjQzMyAwLS44NjcuMTM4LTEuNjgxLjQxLTIuNDJhNS41MDIgNS41MDIgMCAwIDEgMS4xNy0xLjkwOCA1LjM3NCA1LjM3NCAwIDAgMSAxLjgyNC0xLjI0NmMuNzA5LS4yOTggMS41MTQtLjQ0OSAyLjM5NC0uNDQ5IDEuMDY0IDAgMS45NTkuMTUxIDIuNjU3LjQ0OS43LjI5NyAxLjMzOC43NCAxLjg5OCAxLjMxOGwuMjQyLjI0OCAzLjUxNS0zLjgzNS0uMjM3LS4yMjFhOC45MjMgOC45MjMgMCAwIDAtMy42MjctMi4wMzhjLTEuMzUtLjM4Ni0yLjg0Ny0uNTgzLTQuNDQ4LS41ODMtMS41NzIgMC0zLjA0NC4yNS00LjM3My43NDVhMTAuMTM5IDEwLjEzOSAwIDAgMC0zLjQ4MSAyLjE0M2MtLjk3NS45MjgtMS43NDYgMi4wNjYtMi4yOSAzLjM4NC0uNTQzIDEuMzE1LS44MTkgMi44LS44MTkgNC40MTMgMCAxLjYxMy4yNzYgMy4wOTguODIgNC40MTMuNTQ1IDEuMzE5IDEuMzE0IDIuNDU3IDIuMjg5IDMuMzg0Ljk3NC45MjYgMi4xNDYgMS42NDcgMy40OCAyLjE0MyAxLjMzLjQ5NCAyLjgwMi43NDQgNC4zNzQuNzQ0IDEuNDY0IDAgMi45Mi0uMTUyIDQuMzMtLjQ1MmExNi4wNTQgMTYuMDU0IDAgMCAwIDQuMDktMS40NzhsLjE3Ny0uMDlWMzcuNzMzaC04LjM2NnoiLz48L2c+PC9zdmc+')` | | this set | | +| `--conduction-logo-header-block-size` | `50px` | | this set | | +| `--conduction-logo-header-inline-size` | `96px` | | this set | | +| `--conduction-logo-navbar-background-image` | `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjE1MCAxNSA5NiA1MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PHBhdGggaWQ9ImEiIGQ9Ik01Ny4zOTYuMjExSC4yODF2NDkuNDA1aDU3LjExNVYuMjF6Ii8+PHBhdGggaWQ9ImMiIGQ9Ik01Ny41NjQuMjExSC40NDh2NDkuNDA1aDU3LjExNlYuMjF6Ii8+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTg3LjkzMSAxNSkiPjxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNhIi8+PC9tYXNrPjxwYXRoIGQ9Ik01Ny4zOTYgMjQuOTEzYzAtMTMuNTczLTExLjAwNC0yNC42MjItMjQuNTYtMjQuNy0uMDI0IDAtLjA0OC0uMDAzLS4wNzMtLjAwM0gyNC43NWEyLjUwNCAyLjUwNCAwIDEgMCAwIDUuMDFoNy45NDVjMTAuODU4IDAgMTkuNjk0IDguODM0IDE5LjY5NCAxOS42OTMgMCAxMC44Ni04LjgzNiAxOS42OTQtMTkuNjk0IDE5LjY5NEg1LjI4OXYtNC41NzhILjI4MXY5LjU4N2gzMi40ODJ2LS4wMDFjMTMuNTktLjA0IDI0LjYzMy0xMS4xMDUgMjQuNjMzLTI0LjcwMiIgZmlsbD0iIzAwOUZFNCIgbWFzaz0idXJsKCNiKSIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNTAgMTUpIj48bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+PHVzZSB4bGluazpocmVmPSIjYyIvPjwvbWFzaz48cGF0aCBkPSJNLjQ0OCAyNC45MTNjMCAxMy41NzMgMTEuMDA0IDI0LjYyMiAyNC41NiAyNC43LjAyNCAwIC4wNDguMDAzLjA3My4wMDNoOC4wMTRhMi41MDQgMi41MDQgMCAxIDAgMC01LjAwOWgtNy45NDRjLTEwLjg1OSAwLTE5LjY5NC04LjgzNC0xOS42OTQtMTkuNjk0IDAtMTAuODU5IDguODM1LTE5LjY5NCAxOS42OTQtMTkuNjk0aDI3LjQwNHY0LjU3OGg1LjAwOVYuMjFIMjUuMDh2LjAwMUMxMS40OS4yNTEuNDQ4IDExLjMxNi40NDggMjQuOTEzIiBmaWxsPSIjMDA5RkU0IiBtYXNrPSJ1cmwoI2QpIi8+PC9nPjxwYXRoIGZpbGw9IiMwMDQzODgiIGQ9Ik0xNzYuMDE3IDQyLjExNmwtNC42NzgtMTIuNDAxaC01LjY2NGw4LjE0IDIwLjM2NmgzLjkyMWw4LjQwMS0yMC4zNjZoLTUuMzYzem0yNi41NDIuNTU4bC03LjkyOC0xMi45NTloLTYuNDEzdjIwLjM2N2g0Ljk5N1YzNi43ODdsOC4xNSAxMy4yOTVoNi4xOVYyOS43MTVoLTQuOTk2em0xOS4zMjMtNC45NHY0LjY2M2gzLjUzN3YyLjY3N2E5Ljc3MyA5Ljc3MyAwIDAgMS0xLjQxNC41NGMtLjY1Mi4yMDMtMS40NDMuMzA2LTIuMzU0LjMwNi0uODggMC0xLjY4Ni0uMTUtMi4zOTQtLjQ0OGE1LjMzOCA1LjMzOCAwIDAgMS0xLjgyNC0xLjI0NyA1LjUyMiA1LjUyMiAwIDAgMS0xLjE3LTEuODk0Yy0uMjcyLS43MjktLjQxLTEuNTQ5LS40MS0yLjQzMyAwLS44NjcuMTM4LTEuNjgxLjQxLTIuNDJhNS41MDIgNS41MDIgMCAwIDEgMS4xNy0xLjkwOCA1LjM3NCA1LjM3NCAwIDAgMSAxLjgyNC0xLjI0NmMuNzA5LS4yOTggMS41MTQtLjQ0OSAyLjM5NC0uNDQ5IDEuMDY0IDAgMS45NTkuMTUxIDIuNjU3LjQ0OS43LjI5NyAxLjMzOC43NCAxLjg5OCAxLjMxOGwuMjQyLjI0OCAzLjUxNS0zLjgzNS0uMjM3LS4yMjFhOC45MjMgOC45MjMgMCAwIDAtMy42MjctMi4wMzhjLTEuMzUtLjM4Ni0yLjg0Ny0uNTgzLTQuNDQ4LS41ODMtMS41NzIgMC0zLjA0NC4yNS00LjM3My43NDVhMTAuMTM5IDEwLjEzOSAwIDAgMC0zLjQ4MSAyLjE0M2MtLjk3NS45MjgtMS43NDYgMi4wNjYtMi4yOSAzLjM4NC0uNTQzIDEuMzE1LS44MTkgMi44LS44MTkgNC40MTMgMCAxLjYxMy4yNzYgMy4wOTguODIgNC40MTMuNTQ1IDEuMzE5IDEuMzE0IDIuNDU3IDIuMjg5IDMuMzg0Ljk3NC45MjYgMi4xNDYgMS42NDcgMy40OCAyLjE0MyAxLjMzLjQ5NCAyLjgwMi43NDQgNC4zNzQuNzQ0IDEuNDY0IDAgMi45Mi0uMTUyIDQuMzMtLjQ1MmExNi4wNTQgMTYuMDU0IDAgMCAwIDQuMDktMS40NzhsLjE3Ny0uMDlWMzcuNzMzaC04LjM2NnoiLz48L2c+PC9zdmc+')` | | this set | | +| `--conduction-logo-navbar-block-size` | `50px` | | this set | | +| `--conduction-logo-navbar-inline-size` | `96px` | | this set | | +| `--conduction-primary-top-nav-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231260a1%22%2F%3E%3C%2Fsvg%3E) `#1260a1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235ba6e4%22%2F%3E%3C%2Fsvg%3E) `#5ba6e4` | this set | | +| `--conduction-primary-top-nav-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--conduction-primary-top-nav-current-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231260a1%22%2F%3E%3C%2Fsvg%3E) `#1260a1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235ba6e4%22%2F%3E%3C%2Fsvg%3E) `#5ba6e4` | this set | | +| `--conduction-primary-top-nav-current-box-shadow` | `unset` | | this set | | +| `--conduction-primary-top-nav-current-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--conduction-primary-top-nav-current-mobile-box-shadow` | `unset` | | this set | | +| `--conduction-primary-top-nav-dropdown-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23dbecfa%22%2F%3E%3C%2Fsvg%3E) `#dbecfa` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230c283f%22%2F%3E%3C%2Fsvg%3E) `#0c283f` | this set | | +| `--conduction-primary-top-nav-dropdown-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23000000%22%2F%3E%3C%2Fsvg%3E) `#000000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--conduction-primary-top-nav-dropdown-current-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23dbecfa%22%2F%3E%3C%2Fsvg%3E) `#dbecfa` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230c283f%22%2F%3E%3C%2Fsvg%3E) `#0c283f` | this set | | +| `--conduction-primary-top-nav-dropdown-current-box-shadow` | `unset` | | this set | | +| `--conduction-primary-top-nav-dropdown-current-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23000000%22%2F%3E%3C%2Fsvg%3E) `#000000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--conduction-primary-top-nav-dropdown-current-mobile-box-shadow` | `unset` | | this set | | +| `--conduction-primary-top-nav-dropdown-hover-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23dbecfa%22%2F%3E%3C%2Fsvg%3E) `#dbecfa` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230c283f%22%2F%3E%3C%2Fsvg%3E) `#0c283f` | this set | | +| `--conduction-primary-top-nav-dropdown-hover-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23000000%22%2F%3E%3C%2Fsvg%3E) `#000000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--conduction-primary-top-nav-dropdown-hover-text-decoration` | `underline` | | this set | | +| `--conduction-primary-top-nav-dropdown-text-decoration` | `none` | | this set | | +| `--conduction-primary-top-nav-hover-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231260a1%22%2F%3E%3C%2Fsvg%3E) `#1260a1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235ba6e4%22%2F%3E%3C%2Fsvg%3E) `#5ba6e4` | this set | | +| `--conduction-primary-top-nav-hover-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--conduction-primary-top-nav-item-padding` | `18px` | | this set | | +| `--conduction-primary-top-nav-padding-block-end` | `16px` | | this set | | +| `--conduction-primary-top-nav-padding-block-start` | `16px` | | this set | | +| `--conduction-primary-top-nav-padding-inline-end` | `16px` | | this set | | +| `--conduction-primary-top-nav-padding-inline-start` | `16px` | | this set | | +| `--conduction-tabs-scroll-button-background-color` | `var( --utrecht-button-primary-action-active-background-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--conduction-tabs-scroll-button-border-color` | `unset` | | this set | | +| `--conduction-tabs-scroll-button-border-style` | `unset` | | this set | | +| `--conduction-tabs-scroll-button-border-width` | `unset` | | this set | | +| `--conduction-tabs-scroll-button-color` | `var(--utrecht-button-primary-action-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--conduction-tabs-scroll-button-hover-background-color` | `var( --utrecht-button-primary-action-hover-background-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | | +| `--conduction-tabs-scroll-button-hover-color` | `var( --utrecht-button-primary-action-hover-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--conduction-tabs-tab-background-color` | `transparent` | | this set | | +| `--conduction-tabs-tab-border-bottom` | `unset` | | this set | | +| `--conduction-tabs-tab-border-bottom-color` | `unset` | | this set | | +| `--conduction-tabs-tab-border-bottom-style` | `unset` | | this set | | +| `--conduction-tabs-tab-border-bottom-width` | `unset` | | this set | | +| `--conduction-tabs-tab-border-color` | `unset` | | this set | | +| `--conduction-tabs-tab-border-style` | `unset` | | this set | | +| `--conduction-tabs-tab-border-width` | `unset` | | this set | | +| `--conduction-tabs-tab-bottom` | `-3px` | | this set | | +| `--conduction-tabs-tab-button-bottom` | `0px` | | this set | | +| `--conduction-tabs-tab-color` | `var(--utrecht-document-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--conduction-tabs-tab-font-family` | `var(--utrecht-document-font-family)` | | this set | | +| `--conduction-tabs-tab-font-size` | `16px` | | this set | | +| `--conduction-tabs-tab-font-weight` | `400` | | this set | | +| `--conduction-tabs-tab-hover-background-color` | `transparent` | | this set | | +| `--conduction-tabs-tab-hover-color` | `var(--utrecht-document-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--conduction-tabs-tab-hover-font-weight` | `700` | | this set | | +| `--conduction-tabs-tab-hover-text-decoration` | `unset` | | this set | | +| `--conduction-tabs-tab-letter-spacing` | `0.02857em` | | this set | | +| `--conduction-tabs-tab-list-border-bottom-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f2f2f2%22%2F%3E%3C%2Fsvg%3E) `#f2f2f2` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--conduction-tabs-tab-list-border-bottom-style` | `solid` | | this set | | +| `--conduction-tabs-tab-list-border-bottom-width` | `0.3rem` | | this set | | +| `--conduction-tabs-tab-list-margin-block-end` | `0px` | | this set | | +| `--conduction-tabs-tab-list-padding-inline-end` | `2px` | | this set | | +| `--conduction-tabs-tab-list-padding-inline-start` | `2px` | | this set | | +| `--conduction-tabs-tab-margin-inline-end` | `unset` | | this set | | +| `--conduction-tabs-tab-max-width` | `unset` | | this set | | +| `--conduction-tabs-tab-min-height` | `48px` | | this set | | +| `--conduction-tabs-tab-min-width` | `160px` | | this set | | +| `--conduction-tabs-tab-padding-block-end` | `6px` | | this set | | +| `--conduction-tabs-tab-padding-block-start` | `6px` | | this set | | +| `--conduction-tabs-tab-padding-inline-end` | `12px` | | this set | | +| `--conduction-tabs-tab-padding-inline-start` | `12px` | | this set | | +| `--conduction-tabs-tab-panel-background-color` | `unset` | | this set | | +| `--conduction-tabs-tab-panel-border-color` | `unset` | | this set | | +| `--conduction-tabs-tab-panel-border-style` | `unset` | | this set | | +| `--conduction-tabs-tab-panel-border-top` | `unset` | | this set | | +| `--conduction-tabs-tab-panel-border-width` | `unset` | | this set | | +| `--conduction-tabs-tab-panel-padding-block-end` | `24px` | | this set | | +| `--conduction-tabs-tab-panel-padding-block-start` | `24px` | | this set | | +| `--conduction-tabs-tab-panel-padding-inline-end` | `24px` | | this set | | +| `--conduction-tabs-tab-panel-padding-inline-start` | `24px` | | this set | | +| `--conduction-tabs-tab-selected-background-color` | `transparent` | | this set | | +| `--conduction-tabs-tab-selected-border-bottom` | `unset` | | this set | | +| `--conduction-tabs-tab-selected-border-bottom-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231260a1%22%2F%3E%3C%2Fsvg%3E) `#1260a1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235ba6e4%22%2F%3E%3C%2Fsvg%3E) `#5ba6e4` | this set | | +| `--conduction-tabs-tab-selected-border-bottom-style` | `solid` | | this set | | +| `--conduction-tabs-tab-selected-border-bottom-width` | `0.3rem` | | this set | | +| `--conduction-tabs-tab-selected-border-color` | `unset` | | this set | | +| `--conduction-tabs-tab-selected-border-style` | `unset` | | this set | | +| `--conduction-tabs-tab-selected-border-width` | `unset` | | this set | | +| `--conduction-tabs-tab-selected-box-shadow` | `unset` | | this set | | +| `--conduction-tabs-tab-selected-color` | `var(--tilburg-color-blue-500)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b0dafc%22%2F%3E%3C%2Fsvg%3E) `#b0dafc` | this set | | +| `--conduction-tabs-tab-selected-font-family` | `unset` | | this set | | +| `--conduction-tabs-tab-selected-font-weight` | `700` | | this set | | +| `--conduction-tabs-tab-selected-hover-background-color` | `unset` | | this set | | +| `--conduction-tabs-tab-selected-hover-color` | `var(--tilburg-color-blue-500)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b0dafc%22%2F%3E%3C%2Fsvg%3E) `#b0dafc` | this set | | +| `--conduction-tabs-tab-selected-hover-font-weight` | `700` | | this set | | +| `--conduction-tabs-tab-selected-hover-text-decoration` | `unset` | | this set | | +| `--conduction-tabs-tab-text-transform` | `unset` | | this set | | +| `--conduction-tooltip-background-color` | `var(--tilburg-color-black)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--conduction-tooltip-border-color` | `unset` | | this set | | +| `--conduction-tooltip-border-radius` | `0px` | | this set | | +| `--conduction-tooltip-border-style` | `unset` | | this set | | +| `--conduction-tooltip-border-width` | `0px` | | this set | | +| `--conduction-tooltip-color` | `var(--tilburg-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--conduction-tooltip-padding-block-end` | `8px` | | this set | | +| `--conduction-tooltip-padding-block-start` | `8px` | | this set | | +| `--conduction-tooltip-padding-inline-end` | `14px` | | this set | | +| `--conduction-tooltip-padding-inline-start` | `14px` | | this set | | +| `--conduction-tooltip-z-index` | `9999` | | this set | | +| `--denhaag-accordion-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--denhaag-accordion-margin-block-end` | `var(--denhaag-space-block-xl)` | | this set | | +| `--denhaag-accordion-section-border` | `1px solid var(--denhaag-color-grey-3)` | | this set | | +| `--denhaag-accordion-section-content-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-accordion-section-content-padding-block-end` | `24px` | | this set | | +| `--denhaag-accordion-section-content-padding-block-start` | `24px` | | this set | | +| `--denhaag-accordion-section-content-padding-inline-end` | `16px` | | this set | | +| `--denhaag-accordion-section-content-padding-inline-start` | `16px` | | this set | | +| `--denhaag-accordion-section-content-transition` | `grid-template-rows 400ms ease-in-out` | | this set | | +| `--denhaag-accordion-section-description-color` | `var(--denhaag-color-grey-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--denhaag-accordion-section-description-font-size` | `inherit` | | this set | | +| `--denhaag-accordion-section-header-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-accordion-section-header-column-gap` | `8px` | | this set | | +| `--denhaag-accordion-section-header-cursor` | `pointer` | | this set | | +| `--denhaag-accordion-section-header-font-size` | `18px` | | this set | | +| `--denhaag-accordion-section-header-icon-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-accordion-section-header-icon-expanded-transform` | `rotate(180deg)` | | this set | | +| `--denhaag-accordion-section-header-icon-transform` | `rotate(0deg)` | | this set | | +| `--denhaag-accordion-section-header-icon-transition` | `transform 400ms ease-in-out` | | this set | | +| `--denhaag-accordion-section-header-line-height` | `24px` | | this set | | +| `--denhaag-accordion-section-header-padding-block-end` | `12px` | | this set | | +| `--denhaag-accordion-section-header-padding-block-start` | `12px` | | this set | | +| `--denhaag-accordion-section-header-padding-inline-end` | `16px` | | this set | | +| `--denhaag-accordion-section-header-padding-inline-start` | `16px` | | this set | | +| `--denhaag-accordion-section-title-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-accordion-section-title-font-size` | `inherit` | | this set | | +| `--denhaag-action-actions-gap` | `var(--denhaag-space-inline-xs)` | | this set | | +| `--denhaag-action-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-action-border-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-action-border-style` | `solid` | | this set | | +| `--denhaag-action-border-width` | `1px` | | this set | | +| `--denhaag-action-color` | `var(--denhaag-color-grey-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--denhaag-action-content-bold-font-weight` | `var(--denhaag-typography-weight-semibold)` | | this set | | +| `--denhaag-action-date-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-action-date-font-weight` | `var(--denhaag-typography-weight-medium)` | | this set | | +| `--denhaag-action-date-warning-color` | `var(--denhaag-color-orange-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffaa75%22%2F%3E%3C%2Fsvg%3E) `#ffaa75` | this set | | +| `--denhaag-action-date-warning-font-weight` | `var(--denhaag-typography-weight-semibold)` | | this set | | +| `--denhaag-action-date-warning-gap` | `var(--denhaag-space-inline-xs)` | | this set | | +| `--denhaag-action-details-gap` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-action-details-lg-gap` | `var(--denhaag-space-inline-xl)` | | this set | | +| `--denhaag-action-gap` | `var(--denhaag-space-inline-xs)` | | this set | | +| `--denhaag-action-lg-gap` | `var(--denhaag-space-inline-xl)` | | this set | | +| `--denhaag-action-lg-padding-block-end` | `var(--denhaag-space-block-sm)` | | this set | | +| `--denhaag-action-lg-padding-block-start` | `var(--denhaag-space-block-sm)` | | this set | | +| `--denhaag-action-link-icon-color` | `var(--denhaag-color-blue-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235eaced%22%2F%3E%3C%2Fsvg%3E) `#5eaced` | this set | | +| `--denhaag-action-link-icon-width` | `20px` | | this set | | +| `--denhaag-action-padding-block-end` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-action-padding-block-start` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-action-padding-inline-end` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-action-padding-inline-start` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-action-single-details-gap` | `var(--denhaag-space-inline-xs)` | | this set | | +| `--denhaag-action-single-details-lg-gap` | `var(--denhaag-space-inline-xs)` | | this set | | +| `--denhaag-action-single-focus-outline-color` | `var(--denhaag-focus-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f8da72%22%2F%3E%3C%2Fsvg%3E) `#f8da72` | this set | | +| `--denhaag-action-single-focus-outline-style` | `var(--denhaag-focus-border-style)` | | this set | | +| `--denhaag-action-single-focus-outline-width` | `var(--denhaag-focus-border-width)` | | this set | | +| `--denhaag-action-single-hover-background-color` | `var(--denhaag-color-grey-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--denhaag-action-single-padding-block-end` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-action-single-padding-block-start` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-action-single-padding-inline-end` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-action-single-padding-inline-start` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-action-warning-icon-color` | `var(--denhaag-color-orange-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23fe883e%22%2F%3E%3C%2Fsvg%3E) `#fe883e` | this set | | +| `--denhaag-action-warning-icon-width` | `20px` | | this set | | +| `--denhaag-alert-border-radius` | `1px` | | this set | | +| `--denhaag-alert-centre-gap` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-alert-close-focus-border-color` | `1px` | | this set | | +| `--denhaag-alert-close-focus-border-offset` | `3px` | | this set | | +| `--denhaag-alert-close-focus-border-style` | `1px` | | this set | | +| `--denhaag-alert-close-focus-border-width` | `1px` | | this set | | +| `--denhaag-alert-content-gap` | `var(--denhaag-space-block-sm)` | | this set | | +| `--denhaag-alert-error-action-button-background-color` | `var(--denhaag-color-red-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed4734%22%2F%3E%3C%2Fsvg%3E) `#ed4734` | this set | | +| `--denhaag-alert-error-action-button-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--denhaag-alert-error-action-button-hover-background-color` | `var(--denhaag-color-red-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f65b56%22%2F%3E%3C%2Fsvg%3E) `#f65b56` | this set | | +| `--denhaag-alert-error-background-color` | `var(--denhaag-color-red-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23470904%22%2F%3E%3C%2Fsvg%3E) `#470904` | this set | | +| `--denhaag-alert-error-close-icon-color` | `var(--denhaag-color-red-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffaead%22%2F%3E%3C%2Fsvg%3E) `#ffaead` | this set | | +| `--denhaag-alert-error-icon-color` | `var(--denhaag-color-red-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f95644%22%2F%3E%3C%2Fsvg%3E) `#f95644` | this set | | +| `--denhaag-alert-error-paragraph-color` | `var(--denhaag-color-red-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffaead%22%2F%3E%3C%2Fsvg%3E) `#ffaead` | this set | | +| `--denhaag-alert-error-title-color` | `var(--denhaag-color-red-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffaead%22%2F%3E%3C%2Fsvg%3E) `#ffaead` | this set | | +| `--denhaag-alert-gap` | `var(--denhaag-space-block-xl)` | | this set | | +| `--denhaag-alert-info-action-button-background-color` | `var(--denhaag-color-blue-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235ba6e4%22%2F%3E%3C%2Fsvg%3E) `#5ba6e4` | this set | | +| `--denhaag-alert-info-action-button-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--denhaag-alert-info-action-button-hover-background-color` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2373b7ee%22%2F%3E%3C%2Fsvg%3E) `#73b7ee` | this set | | +| `--denhaag-alert-info-background-color` | `var(--denhaag-color-blue-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230c283f%22%2F%3E%3C%2Fsvg%3E) `#0c283f` | this set | | +| `--denhaag-alert-info-close-icon-color` | `var(--denhaag-color-blue-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b0dafc%22%2F%3E%3C%2Fsvg%3E) `#b0dafc` | this set | | +| `--denhaag-alert-info-icon-color` | `var(--denhaag-color-blue-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235eaced%22%2F%3E%3C%2Fsvg%3E) `#5eaced` | this set | | +| `--denhaag-alert-info-paragraph-color` | `var(--denhaag-color-blue-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b0dafc%22%2F%3E%3C%2Fsvg%3E) `#b0dafc` | this set | | +| `--denhaag-alert-info-title-color` | `var(--denhaag-color-blue-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b0dafc%22%2F%3E%3C%2Fsvg%3E) `#b0dafc` | this set | | +| `--denhaag-alert-padding-block-end` | `var(--denhaag-space-block-xl)` | | this set | | +| `--denhaag-alert-padding-block-start` | `var(--denhaag-space-block-xl)` | | this set | | +| `--denhaag-alert-padding-inline-end` | `var(--denhaag-space-block-xl)` | | this set | | +| `--denhaag-alert-padding-inline-start` | `var(--denhaag-space-block-xl)` | | this set | | +| `--denhaag-alert-success-action-button-background-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--denhaag-alert-success-action-button-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--denhaag-alert-success-action-button-hover-background-color` | `var(--denhaag-color-green-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | | +| `--denhaag-alert-success-background-color` | `var(--denhaag-color-green-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23243c24%22%2F%3E%3C%2Fsvg%3E) `#243c24` | this set | | +| `--denhaag-alert-success-close-icon-color` | `var(--denhaag-color-green-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1ffe0%22%2F%3E%3C%2Fsvg%3E) `#d1ffe0` | this set | | +| `--denhaag-alert-success-icon-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-alert-success-paragraph-color` | `var(--denhaag-color-green-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1ffe0%22%2F%3E%3C%2Fsvg%3E) `#d1ffe0` | this set | | +| `--denhaag-alert-success-title-color` | `var(--denhaag-color-green-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1ffe0%22%2F%3E%3C%2Fsvg%3E) `#d1ffe0` | this set | | +| `--denhaag-alert-warning-action-button-background-color` | `var(--denhaag-color-orange-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f7a06a%22%2F%3E%3C%2Fsvg%3E) `#f7a06a` | this set | | +| `--denhaag-alert-warning-action-button-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--denhaag-alert-warning-action-button-hover-background-color` | `var(--denhaag-color-orange-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f7a06a%22%2F%3E%3C%2Fsvg%3E) `#f7a06a` | this set | | +| `--denhaag-alert-warning-background-color` | `var(--denhaag-color-orange-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23683e05%22%2F%3E%3C%2Fsvg%3E) `#683e05` | this set | | +| `--denhaag-alert-warning-close-icon-color` | `var(--denhaag-color-orange-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffaa75%22%2F%3E%3C%2Fsvg%3E) `#ffaa75` | this set | | +| `--denhaag-alert-warning-icon-color` | `var(--denhaag-color-orange-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffaa75%22%2F%3E%3C%2Fsvg%3E) `#ffaa75` | this set | | +| `--denhaag-alert-warning-paragraph-color` | `var(--denhaag-color-orange-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffaa75%22%2F%3E%3C%2Fsvg%3E) `#ffaa75` | this set | | +| `--denhaag-alert-warning-title-color` | `var(--denhaag-color-orange-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffaa75%22%2F%3E%3C%2Fsvg%3E) `#ffaa75` | this set | | +| `--denhaag-anchor-collapse-border-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-anchor-collapse-border-style` | `solid` | | this set | | +| `--denhaag-anchor-collapse-border-width` | `1px` | | this set | | +| `--denhaag-anchor-collapse-content-margin-block-start` | `var(--denhaag-space-block-xs)` | | this set | | +| `--denhaag-anchor-collapse-content-padding-block-end` | `var(--denhaag-space-block-xl)` | | this set | | +| `--denhaag-anchor-collapse-content-padding-block-start` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-anchor-collapse-content-padding-inline-end` | `var(--denhaag-space-inline-xl)` | | this set | | +| `--denhaag-anchor-collapse-content-padding-inline-start` | `var(--denhaag-space-inline-xl)` | | this set | | +| `--denhaag-anchor-collapse-rotate` | `-180deg` | | this set | | +| `--denhaag-anchor-collapse-summary-active-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-anchor-collapse-summary-color` | `var(--denhaag-color-grey-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--denhaag-anchor-collapse-summary-focus-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-anchor-collapse-summary-focus-outline` | `var(--denhaag-focus-border)` | | this set | | +| `--denhaag-anchor-collapse-summary-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--denhaag-anchor-collapse-summary-font-size` | `var(--denhaag-typography-scale-lg-font-size)` | | this set | | +| `--denhaag-anchor-collapse-summary-font-weight` | `var(--denhaag-typography-weight-bold)` | | this set | | +| `--denhaag-anchor-collapse-summary-hover-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-anchor-collapse-summary-padding-block` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-anchor-collapse-summary-padding-inline` | `var(--denhaag-space-inline-xl)` | | this set | | +| `--denhaag-anchor-collapse-summary-text-align` | `left` | | this set | | +| `--denhaag-anchor-navigation-button-margin-block-start` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-anchor-navigation-link-active-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-anchor-navigation-link-active-font-weight` | `var(--denhaag-typography-weight-bold)` | | this set | | +| `--denhaag-anchor-navigation-link-background-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-anchor-navigation-link-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-anchor-navigation-link-focus-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-anchor-navigation-link-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--denhaag-anchor-navigation-link-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--denhaag-anchor-navigation-link-font-weight` | `var(--denhaag-typography-weight-regular)` | | this set | | +| `--denhaag-anchor-navigation-link-hover-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-anchor-navigation-link-line-height` | `1.5` | | this set | | +| `--denhaag-anchor-navigation-link-outline` | `var(--denhaag-focus-border)` | | this set | | +| `--denhaag-anchor-navigation-link-padding-block` | `var(--denhaag-space-block-xs)` | | this set | | +| `--denhaag-anchor-navigation-link-padding-inline-end` | `0` | | this set | | +| `--denhaag-anchor-navigation-link-padding-inline-start` | `1.125rem` | | this set | | +| `--denhaag-anchor-navigation-link-target-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-anchor-navigation-link-text-decoration` | `none` | | this set | | +| `--denhaag-anchor-navigation-link-width` | `2px` | | this set | | +| `--denhaag-anchor-navigation-list-list-style` | `none` | | this set | | +| `--denhaag-article-meta-border-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-article-meta-border-style` | `solid` | | this set | | +| `--denhaag-article-meta-border-width` | `1px` | | this set | | +| `--denhaag-article-meta-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-article-meta-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--denhaag-article-meta-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--denhaag-article-meta-font-weight` | `var(--denhaag-typography-weight-regular)` | | this set | | +| `--denhaag-article-meta-gap` | `0.75rem` | | this set | | +| `--denhaag-article-meta-horizontal-item-border-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-article-meta-horizontal-item-border-style` | `solid` | | this set | | +| `--denhaag-article-meta-horizontal-item-border-width` | `1px` | | this set | | +| `--denhaag-article-meta-line-height` | `var(--denhaag-typography-scale-base-line-height)` | | this set | | +| `--denhaag-article-meta-margin-block-start` | `var(--denhaag-space-block-2xl)` | | this set | | +| `--denhaag-article-meta-padding-block-end` | `var(--denhaag-space-block-5xl)` | | this set | | +| `--denhaag-article-meta-padding-block-start` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-blockquote-attribution-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-blockquote-attribution-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--denhaag-blockquote-attribution-font-size` | `var(--denhaag-typography-scale-s-font-size)` | | this set | | +| `--denhaag-blockquote-attribution-font-weight` | `400` | | this set | | +| `--denhaag-blockquote-attribution-line-height` | `1.5` | | this set | | +| `--denhaag-blockquote-attribution-margin-block-start` | `1rem` | | this set | | +| `--denhaag-blockquote-border-color` | `var(--denhaag-color-green-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23243c24%22%2F%3E%3C%2Fsvg%3E) `#243c24` | this set | | +| `--denhaag-blockquote-border-style` | `solid` | | this set | | +| `--denhaag-blockquote-border-width` | `4px` | | this set | | +| `--denhaag-blockquote-margin-block-end` | `0` | | this set | | +| `--denhaag-blockquote-margin-block-start` | `0` | | this set | | +| `--denhaag-blockquote-margin-inline-end` | `0` | | this set | | +| `--denhaag-blockquote-margin-inline-start` | `0` | | this set | | +| `--denhaag-blockquote-padding-block-end` | `1rem` | | this set | | +| `--denhaag-blockquote-padding-block-start` | `1rem` | | this set | | +| `--denhaag-blockquote-padding-inline-end` | `1rem` | | this set | | +| `--denhaag-blockquote-padding-inline-start` | `1rem` | | this set | | +| `--denhaag-blockquote-paragraph-color` | `var(--denhaag-color-green-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2393e1aa%22%2F%3E%3C%2Fsvg%3E) `#93e1aa` | this set | | +| `--denhaag-blockquote-paragraph-font-family` | `var(--denhaag-typography-sans-serif-alternate-font-family)` | | this set | | +| `--denhaag-blockquote-paragraph-font-size` | `var(--denhaag-typography-scale-lg-font-size)` | | this set | | +| `--denhaag-blockquote-paragraph-font-weight` | `700` | | this set | | +| `--denhaag-blockquote-paragraph-line-height` | `1.3` | | this set | | +| `--denhaag-border-radius` | `3px` | | this set | | +| `--denhaag-breadcrumb-background-color` | `var(--denhaag-color-warmgrey-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23201c16%22%2F%3E%3C%2Fsvg%3E) `#201c16` | this set | | +| `--denhaag-breadcrumb-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-breadcrumb-current-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-breadcrumb-dots-background-color` | `var(--denhaag-color-grey-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--denhaag-breadcrumb-dots-border-radius` | `var(--denhaag-border-radius)` | | this set | | +| `--denhaag-breadcrumb-dots-color` | `var(--denhaag-color-grey-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--denhaag-breadcrumb-dots-hover-background-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-breadcrumb-font-weight` | `var(--denhaag-typography-weight-regular)` | | this set | | +| `--denhaag-breadcrumb-link-color` | `var(--denhaag-color-blue-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235eaced%22%2F%3E%3C%2Fsvg%3E) `#5eaced` | this set | | +| `--denhaag-breadcrumb-link-focus-color` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237ec0f6%22%2F%3E%3C%2Fsvg%3E) `#7ec0f6` | this set | | +| `--denhaag-breadcrumb-link-focus-outline` | `var(--denhaag-focus-border)` | | this set | | +| `--denhaag-breadcrumb-link-focus-text-decoration` | `underline` | | this set | | +| `--denhaag-breadcrumb-link-hover-color` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237ec0f6%22%2F%3E%3C%2Fsvg%3E) `#7ec0f6` | this set | | +| `--denhaag-breadcrumb-link-hover-text-decoration` | `underline` | | this set | | +| `--denhaag-breadcrumb-link-icon-height` | `.875rem` | | this set | | +| `--denhaag-breadcrumb-link-icon-margin-inline` | `.75rem` | | this set | | +| `--denhaag-breadcrumb-link-icon-width` | `.875rem` | | this set | | +| `--denhaag-breadcrumb-link-text-decoration` | `none` | | this set | | +| `--denhaag-breadcrumb-list-max-width` | `67.5rem` | | this set | | +| `--denhaag-breadcrumb-padding-block` | `1rem` | | this set | | +| `--denhaag-breadcrumb-padding-block-md` | `0.25rem` | | this set | | +| `--denhaag-breadcrumb-spacing` | `var(--denhaag-space-inline-xs)` | | this set | | +| `--denhaag-button-border-radius` | `var(--denhaag-border-radius)` | | this set | | +| `--denhaag-button-border-width` | `1px` | | this set | | +| `--denhaag-button-cursor` | `pointer` | | this set | | +| `--denhaag-button-focus-border-color` | `var(--denhaag-focus-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f8da72%22%2F%3E%3C%2Fsvg%3E) `#f8da72` | this set | | +| `--denhaag-button-focus-border-style` | `var(--denhaag-focus-border-style)` | | this set | | +| `--denhaag-button-focus-border-width` | `var(--denhaag-focus-border-width)` | | this set | | +| `--denhaag-button-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--denhaag-button-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--denhaag-button-font-weight` | `var(--denhaag-typography-weight-regular)` | | this set | | +| `--denhaag-button-gap` | `var(--denhaag-space-inline-xs)` | | this set | | +| `--denhaag-button-group-gap` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-button-group-padding` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-button-icon-only-height` | `2.6875rem` | | this set | | +| `--denhaag-button-icon-only-icon-height` | `var(--denhaag-space-block-lg)` | | this set | | +| `--denhaag-button-icon-padding-inline-large` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-button-icon-padding-inline-medium` | `var(--denhaag-space-inline-sm)` | | this set | | +| `--denhaag-button-large-size-font-size` | `var(--denhaag-typography-scale-lg-font-size)` | | this set | | +| `--denhaag-button-large-size-line-height` | `1.75` | | this set | | +| `--denhaag-button-large-size-padding-block` | `0.40625rem` | | this set | | +| `--denhaag-button-large-size-padding-inline` | `var(--denhaag-space-inline-lg)` | | this set | | +| `--denhaag-button-medium-size-padding-block` | `var(--denhaag-button-padding-block)` | | this set | | +| `--denhaag-button-medium-size-padding-inline` | `var(--denhaag-button-padding-inline)` | | this set | | +| `--denhaag-button-padding-block` | `var(--denhaag-space-block-xs)` | | this set | | +| `--denhaag-button-padding-inline` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-button-primary-action-background-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--denhaag-button-primary-action-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--denhaag-button-primary-action-disabled-background-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-button-primary-action-disabled-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--denhaag-button-primary-action-hover-background-color` | `var(--denhaag-color-green-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | | +| `--denhaag-button-primary-action-hover-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--denhaag-button-secondary-action-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-button-secondary-action-border-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--denhaag-button-secondary-action-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-button-secondary-action-disabled-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-button-secondary-action-disabled-border-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-button-secondary-action-disabled-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--denhaag-button-secondary-action-hover-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-button-secondary-action-hover-border-color` | `var(--denhaag-color-green-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | | +| `--denhaag-button-secondary-action-hover-color` | `var(--denhaag-color-green-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2393e1aa%22%2F%3E%3C%2Fsvg%3E) `#93e1aa` | this set | | +| `--denhaag-card-authentication-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-card-authentication-border-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-card-authentication-border-width` | `1px` | | this set | | +| `--denhaag-card-authentication-footer-margin-block-start` | `8px` | | this set | | +| `--denhaag-card-authentication-header-margin-block-end` | `0px` | | this set | | +| `--denhaag-card-authentication-logo-size` | `56px` | | this set | | +| `--denhaag-card-authentication-padding-block` | `24px` | | this set | | +| `--denhaag-card-authentication-padding-inline` | `24px` | | this set | | +| `--denhaag-card-authentication-portrait-footer-margin-block-start` | `16px` | | this set | | +| `--denhaag-card-authentication-portrait-header-margin-block-end` | `8px` | | this set | | +| `--denhaag-card-authentication-portrait-logo-margin-block-end` | `24px` | | this set | | +| `--denhaag-card-authentication-portrait-logo-size` | `80px` | | this set | | +| `--denhaag-card-authentication-portrait-max-inline-size` | `362px` | | this set | | +| `--denhaag-card-authentication-portrait-min-block-size` | `415px` | | this set | | +| `--denhaag-card-authentication-portrait-min-inline-size` | `283px` | | this set | | +| `--denhaag-card-authentication-title-font-size` | `var(--utrecht-heading-3-font-size)` | | this set | | +| `--denhaag-card-authentication-title-font-weight` | `var(--utrecht-heading-font-weight)` | | this set | | +| `--denhaag-card-authentication-title-margin-block-end` | `6px` | | this set | | +| `--denhaag-card-group-gap` | `32px` | | this set | | +| `--denhaag-card-group-l-gap` | `32px` | | this set | | +| `--denhaag-card-group-m-gap` | `24px` | | this set | | +| `--denhaag-card-group-margin-block` | `var(--denhaag-space-block-lg)` | | this set | | +| `--denhaag-card-group-s-gap` | `16px` | | this set | | +| `--denhaag-card-group-xl-gap` | `40px` | | this set | | +| `--denhaag-card-news-border` | `1px solid var(--denhaag-color-grey-2)` | | this set | | +| `--denhaag-card-news-box-shadow` | `0 0 0.5rem var(--denhaag-color-grey-2)` | | this set | | +| `--denhaag-card-news-content-padding` | `0.75rem` | | this set | | +| `--denhaag-card-news-gap` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-card-news-icon-color` | `var(--denhaag-color-blue-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235eaced%22%2F%3E%3C%2Fsvg%3E) `#5eaced` | this set | | +| `--denhaag-card-news-icon-height` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-card-news-icon-text-align` | `right` | | this set | | +| `--denhaag-card-news-image-aspect-ratio` | `16 / 9` | | this set | | +| `--denhaag-card-news-image-height` | `auto` | | this set | | +| `--denhaag-card-news-image-object-fit` | `cover` | | this set | | +| `--denhaag-card-news-image-width` | `100%` | | this set | | +| `--denhaag-card-news-margin` | `0` | | this set | | +| `--denhaag-card-news-outline` | `var(--denhaag-link-focus-outline)` | | this set | | +| `--denhaag-card-news-padding` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-card-news-text-decoration` | `none` | | this set | | +| `--denhaag-card-news-text-margin-block-end` | `var(--denhaag-space-block-xs)` | | this set | | +| `--denhaag-case-card-action-active-color` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237ec0f6%22%2F%3E%3C%2Fsvg%3E) `#7ec0f6` | this set | | +| `--denhaag-case-card-action-color` | `var(--denhaag-color-blue-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235eaced%22%2F%3E%3C%2Fsvg%3E) `#5eaced` | this set | | +| `--denhaag-case-card-archived-action-active-color` | `var(--denhaag-color-grey-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--denhaag-case-card-archived-action-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-case-card-archived-background-background-color` | `var(--denhaag-color-grey-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--denhaag-case-card-archived-background-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-case-card-archived-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-case-card-archived-context-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-case-card-archived-subtitle-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-case-card-archived-title-color` | `var(--denhaag-color-grey-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--denhaag-case-card-background-background-color` | `var(--denhaag-color-blue-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230c283f%22%2F%3E%3C%2Fsvg%3E) `#0c283f` | this set | | +| `--denhaag-case-card-background-color` | `var(--denhaag-color-blue-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231a3f64%22%2F%3E%3C%2Fsvg%3E) `#1a3f64` | this set | | +| `--denhaag-case-card-border-radius` | `3px` | | this set | | +| `--denhaag-case-card-context-color` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237ec0f6%22%2F%3E%3C%2Fsvg%3E) `#7ec0f6` | this set | | +| `--denhaag-case-card-height` | `240px` | | this set | | +| `--denhaag-case-card-list-background-hover-background-color` | `var(--denhaag-color-grey-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--denhaag-case-card-list-border-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-case-card-list-border-style` | `solid` | | this set | | +| `--denhaag-case-card-list-border-width` | `1px` | | this set | | +| `--denhaag-case-card-list-context-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-case-card-list-footer-gap` | `var(--denhaag-space-block-lg)` | | this set | | +| `--denhaag-case-card-list-subtitle-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-case-card-list-subtitle-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--denhaag-case-card-list-title-color` | `var(--denhaag-color-grey-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--denhaag-case-card-list-title-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--denhaag-case-card-list-wrapper-flex-direction` | `row` | | this set | | +| `--denhaag-case-card-list-wrapper-gap` | `var(--denhaag-space-block-xl)` | | this set | | +| `--denhaag-case-card-list-wrapper-padding-block-end` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-case-card-list-wrapper-padding-block-start` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-case-card-list-wrapper-padding-inline-end` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-case-card-list-wrapper-padding-inline-start` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-case-card-padding-block-start` | `20px` | | this set | | +| `--denhaag-case-card-paper-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--denhaag-case-card-subtitle-color` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237ec0f6%22%2F%3E%3C%2Fsvg%3E) `#7ec0f6` | this set | | +| `--denhaag-case-card-subtitle-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--denhaag-case-card-subtitle-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--denhaag-case-card-subtitle-font-weight` | `var(--denhaag-typography-weight-medium)` | | this set | | +| `--denhaag-case-card-subtitle-line-height` | `1.5` | | this set | | +| `--denhaag-case-card-subtitle-margin-block-start` | `var(--denhaag-space-block-2xs)` | | this set | | +| `--denhaag-case-card-title-color` | `var(--denhaag-color-blue-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b0dafc%22%2F%3E%3C%2Fsvg%3E) `#b0dafc` | this set | | +| `--denhaag-case-card-title-font-family` | `var(--denhaag-typography-sans-serif-alternate-font-family)` | | this set | | +| `--denhaag-case-card-title-font-size` | `var(--denhaag-typography-scale-xl-font-size)` | | this set | | +| `--denhaag-case-card-title-font-weight` | `var(--denhaag-typography-weight-semibold)` | | this set | | +| `--denhaag-case-card-title-line-height` | `1.5` | | this set | | +| `--denhaag-case-card-wrapper-padding-block-end` | `24px` | | this set | | +| `--denhaag-case-card-wrapper-padding-block-start` | `12px` | | this set | | +| `--denhaag-case-card-wrapper-padding-inline-end` | `24px` | | this set | | +| `--denhaag-case-card-wrapper-padding-inline-start` | `24px` | | this set | | +| `--denhaag-checkbox-checked-disabled-background-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-checkbox-checked-disabled-border-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-checkbox-checked-invalid-background-color` | `var(--denhaag-color-red-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed4734%22%2F%3E%3C%2Fsvg%3E) `#ed4734` | this set | | +| `--denhaag-checkbox-hover-border-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23acacac%22%2F%3E%3C%2Fsvg%3E) `#acacac` | this set | | +| `--denhaag-checkbox-hover-border-width` | `1px` | | this set | | +| `--denhaag-checkbox-hover-checked-background-color` | `var(--denhaag-color-green-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | | +| `--denhaag-checkbox-hover-checked-border-color` | `var(--denhaag-color-green-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | | +| `--denhaag-checkbox-hover-invalid-background-color` | `var(--denhaag-color-red-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f65b56%22%2F%3E%3C%2Fsvg%3E) `#f65b56` | this set | | +| `--denhaag-checkbox-hover-invalid-border-color` | `var(--denhaag-color-red-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f65b56%22%2F%3E%3C%2Fsvg%3E) `#f65b56` | this set | | +| `--denhaag-color-black` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23000000%22%2F%3E%3C%2Fsvg%3E) `#000000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--denhaag-color-blue-1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23dbecfa%22%2F%3E%3C%2Fsvg%3E) `#dbecfa` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230c283f%22%2F%3E%3C%2Fsvg%3E) `#0c283f` | this set | | +| `--denhaag-color-blue-2` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23abcced%22%2F%3E%3C%2Fsvg%3E) `#abcced` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231a3f64%22%2F%3E%3C%2Fsvg%3E) `#1a3f64` | this set | | +| `--denhaag-color-blue-3` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231260a1%22%2F%3E%3C%2Fsvg%3E) `#1260a1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235ba6e4%22%2F%3E%3C%2Fsvg%3E) `#5ba6e4` | this set | | +| `--denhaag-color-blue-4` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23094b81%22%2F%3E%3C%2Fsvg%3E) `#094b81` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2373b7ee%22%2F%3E%3C%2Fsvg%3E) `#73b7ee` | this set | | +| `--denhaag-color-blue-5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23032d4f%22%2F%3E%3C%2Fsvg%3E) `#032d4f` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239acdf6%22%2F%3E%3C%2Fsvg%3E) `#9acdf6` | this set | | +| `--denhaag-color-green-1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d5e7d5%22%2F%3E%3C%2Fsvg%3E) `#d5e7d5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23243c24%22%2F%3E%3C%2Fsvg%3E) `#243c24` | this set | | +| `--denhaag-color-green-2` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237eb67c%22%2F%3E%3C%2Fsvg%3E) `#7eb67c` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2351854f%22%2F%3E%3C%2Fsvg%3E) `#51854f` | this set | | +| `--denhaag-color-green-3` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23238541%22%2F%3E%3C%2Fsvg%3E) `#238541` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--denhaag-color-green-4` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231e6c35%22%2F%3E%3C%2Fsvg%3E) `#1e6c35` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | | +| `--denhaag-color-green-5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23002e0f%22%2F%3E%3C%2Fsvg%3E) `#002e0f` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b4fbcb%22%2F%3E%3C%2Fsvg%3E) `#b4fbcb` | this set | | +| `--denhaag-color-grey-1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f2f2f2%22%2F%3E%3C%2Fsvg%3E) `#f2f2f2` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--denhaag-color-grey-2` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-color-grey-3` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237a7a7a%22%2F%3E%3C%2Fsvg%3E) `#7a7a7a` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--denhaag-color-grey-4` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%234a4a4a%22%2F%3E%3C%2Fsvg%3E) `#4a4a4a` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23acacac%22%2F%3E%3C%2Fsvg%3E) `#acacac` | this set | | +| `--denhaag-color-grey-5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232e2e2e%22%2F%3E%3C%2Fsvg%3E) `#2e2e2e` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23c4c4c4%22%2F%3E%3C%2Fsvg%3E) `#c4c4c4` | this set | | +| `--denhaag-color-ocher-1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23fff7d1%22%2F%3E%3C%2Fsvg%3E) `#fff7d1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%234b3f04%22%2F%3E%3C%2Fsvg%3E) `#4b3f04` | this set | | +| `--denhaag-color-ocher-2` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffeb85%22%2F%3E%3C%2Fsvg%3E) `#ffeb85` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23887307%22%2F%3E%3C%2Fsvg%3E) `#887307` | this set | | +| `--denhaag-color-ocher-3` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f8d62a%22%2F%3E%3C%2Fsvg%3E) `#f8d62a` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d0b012%22%2F%3E%3C%2Fsvg%3E) `#d0b012` | this set | | +| `--denhaag-color-ocher-4` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cca000%22%2F%3E%3C%2Fsvg%3E) `#cca000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f4cb35%22%2F%3E%3C%2Fsvg%3E) `#f4cb35` | this set | | +| `--denhaag-color-ocher-5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23806400%22%2F%3E%3C%2Fsvg%3E) `#806400` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f8da72%22%2F%3E%3C%2Fsvg%3E) `#f8da72` | this set | | +| `--denhaag-color-orange-1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffdcad%22%2F%3E%3C%2Fsvg%3E) `#ffdcad` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23683e05%22%2F%3E%3C%2Fsvg%3E) `#683e05` | this set | | +| `--denhaag-color-orange-2` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffb85c%22%2F%3E%3C%2Fsvg%3E) `#ffb85c` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23a96309%22%2F%3E%3C%2Fsvg%3E) `#a96309` | this set | | +| `--denhaag-color-orange-3` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f08800%22%2F%3E%3C%2Fsvg%3E) `#f08800` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f39419%22%2F%3E%3C%2Fsvg%3E) `#f39419` | this set | | +| `--denhaag-color-orange-4` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23df5601%22%2F%3E%3C%2Fsvg%3E) `#df5601` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f37526%22%2F%3E%3C%2Fsvg%3E) `#f37526` | this set | | +| `--denhaag-color-orange-5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238a3500%22%2F%3E%3C%2Fsvg%3E) `#8a3500` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f7a06a%22%2F%3E%3C%2Fsvg%3E) `#f7a06a` | this set | | +| `--denhaag-color-red-1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffd9d6%22%2F%3E%3C%2Fsvg%3E) `#ffd9d6` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23470904%22%2F%3E%3C%2Fsvg%3E) `#470904` | this set | | +| `--denhaag-color-red-2` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed8b82%22%2F%3E%3C%2Fsvg%3E) `#ed8b82` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2387231a%22%2F%3E%3C%2Fsvg%3E) `#87231a` | this set | | +| `--denhaag-color-red-3` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cf1b07%22%2F%3E%3C%2Fsvg%3E) `#cf1b07` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed4734%22%2F%3E%3C%2Fsvg%3E) `#ed4734` | this set | | +| `--denhaag-color-red-4` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23a30500%22%2F%3E%3C%2Fsvg%3E) `#a30500` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f65b56%22%2F%3E%3C%2Fsvg%3E) `#f65b56` | this set | | +| `--denhaag-color-red-5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23520100%22%2F%3E%3C%2Fsvg%3E) `#520100` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23fa9897%22%2F%3E%3C%2Fsvg%3E) `#fa9897` | this set | | +| `--denhaag-color-warmgrey-1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f9f8f6%22%2F%3E%3C%2Fsvg%3E) `#f9f8f6` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23201c16%22%2F%3E%3C%2Fsvg%3E) `#201c16` | this set | | +| `--denhaag-color-white` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-contact-timeline-step-details-desktop-margin-inline-start` | `240px` | | this set | | +| `--denhaag-contact-timeline-step-details-file-margin-block-end` | `24px` | | this set | | +| `--denhaag-contact-timeline-step-details-file-margin-block-start` | `24px` | | this set | | +| `--denhaag-contact-timeline-step-details-file-mobile-margin-block-end` | `32px` | | this set | | +| `--denhaag-contact-timeline-step-details-mobile-margin-inline-start` | `32px` | | this set | | +| `--denhaag-contact-timeline-step-details-sender-font-size` | `18px` | | this set | | +| `--denhaag-contact-timeline-step-details-sender-font-weight` | `var(--denhaag-typography-weight-semibold)` | | this set | | +| `--denhaag-contact-timeline-step-details-sender-margin-block-start` | `16px` | | this set | | +| `--denhaag-contact-timeline-step-distance` | `0` | | this set | | +| `--denhaag-contact-timeline-step-header-channel-width` | `80px` | | this set | | +| `--denhaag-contact-timeline-step-header-date-width` | `96px` | | this set | | +| `--denhaag-contact-timeline-step-header-font-size` | `20px` | | this set | | +| `--denhaag-contact-timeline-step-header-line-height` | `27px` | | this set | | +| `--denhaag-contact-timeline-step-header-toggle-active-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-contact-timeline-step-header-toggle-focus-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-contact-timeline-step-header-toggle-gap` | `4px` | | this set | | +| `--denhaag-contact-timeline-step-header-toggle-hover-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-contact-timeline-step-marker-align-items` | `flex-start` | | this set | | +| `--denhaag-contact-timeline-step-marker-connector-bottom` | `0` | | this set | | +| `--denhaag-contact-timeline-step-marker-connector-desktop-margin-inline-start` | `112px` | | this set | | +| `--denhaag-contact-timeline-step-marker-connector-mobile-margin-inline-start` | `0` | | this set | | +| `--denhaag-contact-timeline-step-meta-gap` | `6px` | | this set | | +| `--denhaag-contact-timeline-step-meta-marker-color` | `var(--denhaag-color-black)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--denhaag-contact-timeline-step-meta-marker-size` | `4px` | | this set | | +| `--denhaag-contact-timeline-step-padding-block-end` | `32px` | | this set | | +| `--denhaag-cta-download-border-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-cta-download-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-cta-download-dot-background-color` | `var(--denhaag-color-blue-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235ba6e4%22%2F%3E%3C%2Fsvg%3E) `#5ba6e4` | this set | | +| `--denhaag-cta-download-dot-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--denhaag-cta-download-excerpt-gap` | `var(--denhaag-space-block-2xs)` | | this set | | +| `--denhaag-cta-download-focus-dot-background-color` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2373b7ee%22%2F%3E%3C%2Fsvg%3E) `#73b7ee` | this set | | +| `--denhaag-cta-download-focus-outline` | `var(--denhaag-focus-border)` | | this set | | +| `--denhaag-cta-download-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--denhaag-cta-download-font-size` | `var(--denhaag-typography-scale-lg-font-size)` | | this set | | +| `--denhaag-cta-download-font-weight` | `var(--denhaag-typography-weight-regular)` | | this set | | +| `--denhaag-cta-download-gap` | `var(--denhaag-space-block-lg)` | | this set | | +| `--denhaag-cta-download-hover-dot-background-color` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2373b7ee%22%2F%3E%3C%2Fsvg%3E) `#73b7ee` | this set | | +| `--denhaag-cta-download-line-height` | `1.3` | | this set | | +| `--denhaag-cta-download-padding-block` | `var(--denhaag-space-block-xl)` | | this set | | +| `--denhaag-cta-download-padding-inline` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-cta-download-title-color` | `var(--denhaag-color-grey-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--denhaag-cta-download-title-font-size` | `var(--denhaag-typography-scale-lg-font-size)` | | this set | | +| `--denhaag-cta-download-title-font-weight` | `var(--denhaag-typography-weight-bold)` | | this set | | +| `--denhaag-cta-download-width` | `var(--denhaag-space-block-5xl)` | | this set | | +| `--denhaag-cta-event-border-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-cta-event-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-cta-event-date-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--denhaag-cta-event-date-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--denhaag-cta-event-date-font-size` | `var(--denhaag-typography-scale-s-font-size)` | | this set | | +| `--denhaag-cta-event-date-font-weight` | `var(--denhaag-typography-weight-regular)` | | this set | | +| `--denhaag-cta-event-date-line-height` | `1.25` | | this set | | +| `--denhaag-cta-event-day-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--denhaag-cta-event-dot-background-color` | `var(--denhaag-color-blue-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235ba6e4%22%2F%3E%3C%2Fsvg%3E) `#5ba6e4` | this set | | +| `--denhaag-cta-event-excerpt-gap` | `var(--denhaag-space-block-2xs)` | | this set | | +| `--denhaag-cta-event-focus-dot-background-color` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2373b7ee%22%2F%3E%3C%2Fsvg%3E) `#73b7ee` | this set | | +| `--denhaag-cta-event-focus-outline` | `var(--denhaag-focus-border)` | | this set | | +| `--denhaag-cta-event-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--denhaag-cta-event-font-size` | `var(--denhaag-typography-scale-lg-font-size)` | | this set | | +| `--denhaag-cta-event-font-weight` | `var(--denhaag-typography-weight-regular)` | | this set | | +| `--denhaag-cta-event-gap` | `var(--denhaag-space-block-lg)` | | this set | | +| `--denhaag-cta-event-hover-dot-background-color` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2373b7ee%22%2F%3E%3C%2Fsvg%3E) `#73b7ee` | this set | | +| `--denhaag-cta-event-line-height` | `1.3` | | this set | | +| `--denhaag-cta-event-padding-block` | `var(--denhaag-space-block-xl)` | | this set | | +| `--denhaag-cta-event-padding-inline` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-cta-event-title-color` | `var(--denhaag-color-grey-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--denhaag-cta-event-title-font-size` | `var(--denhaag-typography-scale-lg-font-size)` | | this set | | +| `--denhaag-cta-event-title-font-weight` | `var(--denhaag-typography-weight-bold)` | | this set | | +| `--denhaag-cta-event-width` | `var(--denhaag-space-block-5xl)` | | this set | | +| `--denhaag-cta-image-content-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-cta-image-content-border` | `1px solid var(--denhaag-color-grey-2)` | | this set | | +| `--denhaag-cta-image-content-button-after-bottom` | `0` | | this set | | +| `--denhaag-cta-image-content-button-after-content` | `''` | | this set | | +| `--denhaag-cta-image-content-button-after-left` | `0` | | this set | | +| `--denhaag-cta-image-content-button-after-position` | `absolute` | | this set | | +| `--denhaag-cta-image-content-button-after-right` | `0` | | this set | | +| `--denhaag-cta-image-content-button-after-top` | `0` | | this set | | +| `--denhaag-cta-image-content-button-margin-block-start` | `var(--denhaag-space-block-xl)` | | this set | | +| `--denhaag-cta-image-content-button-position` | `initial` | | this set | | +| `--denhaag-cta-image-content-content-padding-block` | `var(--denhaag-space-block-2xl)` | | this set | | +| `--denhaag-cta-image-content-content-padding-inline` | `var(--denhaag-space-inline-2xl)` | | this set | | +| `--denhaag-cta-image-content-content-width` | `calc(50% - (2 * var(--denhaag-space-inline-2xl)))` | | this set | | +| `--denhaag-cta-image-content-display` | `block` | | this set | | +| `--denhaag-cta-image-content-filled-background-color` | `var(--denhaag-color-warmgrey-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23201c16%22%2F%3E%3C%2Fsvg%3E) `#201c16` | this set | | +| `--denhaag-cta-image-content-filled-border` | `0` | | this set | | +| `--denhaag-cta-image-content-hover-box-shadow` | `0 0.25rem 1rem 0 rgba(0, 0, 0, 0.16)` | | this set | | +| `--denhaag-cta-image-content-image-object-fit` | `cover` | | this set | | +| `--denhaag-cta-image-content-image-width` | `100%` | | this set | | +| `--denhaag-cta-image-content-position` | `relative` | | this set | | +| `--denhaag-cta-image-content-text-font-size` | `var(--denhaag-typography-scale-xl-font-size)` | | this set | | +| `--denhaag-cta-image-content-text-line-height` | `1.3` | | this set | | +| `--denhaag-cta-image-content-text-small-font-size` | `var(--denhaag-typography-scale-lg-font-size)` | | this set | | +| `--denhaag-cta-image-content-title-margin-block-end` | `var(--denhaag-space-block-xs)` | | this set | | +| `--denhaag-cta-image-content-title-margin-block-start` | `initial` | | this set | | +| `--denhaag-cta-image-content-title-small-font-size` | `var(--denhaag-typography-scale-xl-font-size)` | | this set | | +| `--denhaag-cta-link-border-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-cta-link-color` | `var(--denhaag-color-grey-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--denhaag-cta-link-dot-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--denhaag-cta-link-excerpt-line-height` | `1.3` | | this set | | +| `--denhaag-cta-link-focus-highlight-color` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237ec0f6%22%2F%3E%3C%2Fsvg%3E) `#7ec0f6` | this set | | +| `--denhaag-cta-link-focus-outline` | `var(--denhaag-focus-border)` | | this set | | +| `--denhaag-cta-link-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--denhaag-cta-link-font-weight` | `var(--denhaag-typography-weight-regular)` | | this set | | +| `--denhaag-cta-link-gap` | `var(--denhaag-space-block-lg)` | | this set | | +| `--denhaag-cta-link-highlight-color` | `var(--denhaag-color-blue-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235eaced%22%2F%3E%3C%2Fsvg%3E) `#5eaced` | this set | | +| `--denhaag-cta-link-highlight-font-weight` | `var(--denhaag-typography-weight-bold)` | | this set | | +| `--denhaag-cta-link-hover-highlight-color` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237ec0f6%22%2F%3E%3C%2Fsvg%3E) `#7ec0f6` | this set | | +| `--denhaag-cta-link-icon-size` | `var(--denhaag-space-block-lg)` | | this set | | +| `--denhaag-cta-link-padding-block` | `var(--denhaag-space-block-xl)` | | this set | | +| `--denhaag-cta-link-padding-inline` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-cta-link-text-decoration` | `none` | | this set | | +| `--denhaag-cta-link-width` | `var(--denhaag-space-block-5xl)` | | this set | | +| `--denhaag-description-list-border-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-description-list-caption-color` | `var(--denhaag-color-black)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--denhaag-description-list-caption-font-family` | `var(--denhaag-typography-sans-serif-alternate-font-family)` | | this set | | +| `--denhaag-description-list-caption-font-size` | `var(--denhaag-typography-scale-xl-font-size)` | | this set | | +| `--denhaag-description-list-caption-font-weight` | `var(--denhaag-typography-weight-bold)` | | this set | | +| `--denhaag-description-list-caption-line-height` | `1.3` | | this set | | +| `--denhaag-description-list-caption-margin-block-end` | `var(--denhaag-space-inline-xl)` | | this set | | +| `--denhaag-description-list-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-description-list-detail-padding-block-end` | `0.75rem` | | this set | | +| `--denhaag-description-list-detail-padding-block-start` | `var(--denhaag-space-inline-2xs)` | | this set | | +| `--denhaag-description-list-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--denhaag-description-list-font-size` | `1.125rem` | | this set | | +| `--denhaag-description-list-font-weight` | `var(--denhaag-typography-weight-regular)` | | this set | | +| `--denhaag-description-list-lg-detail-padding-block-end` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-description-list-lg-detail-padding-block-start` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-description-list-lg-padding-inline-end` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-description-list-lg-padding-inline-start` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-description-list-lg-title-padding-block-end` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-description-list-lg-title-padding-block-start` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-description-list-line-height` | `1.5` | | this set | | +| `--denhaag-description-list-margin-block-end` | `0` | | this set | | +| `--denhaag-description-list-margin-block-start` | `0` | | this set | | +| `--denhaag-description-list-padding-inline-end` | `var(--denhaag-space-inline-xs)` | | this set | | +| `--denhaag-description-list-padding-inline-start` | `var(--denhaag-space-inline-xs)` | | this set | | +| `--denhaag-description-list-title-color` | `var(--denhaag-color-grey-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--denhaag-description-list-title-font-weight` | `var(--denhaag-typography-weight-bold)` | | this set | | +| `--denhaag-description-list-title-padding-block-end` | `var(--denhaag-space-inline-2xs)` | | this set | | +| `--denhaag-description-list-title-padding-block-start` | `0.75rem` | | this set | | +| `--denhaag-divider-border-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-divider-border-width` | `1px` | | this set | | +| `--denhaag-divider-margin-block-end` | `16px` | | this set | | +| `--denhaag-divider-margin-block-start` | `16px` | | this set | | +| `--denhaag-divider-margin-inline-end` | `16px` | | this set | | +| `--denhaag-divider-margin-inline-start` | `16px` | | this set | | +| `--denhaag-dot-indicator-background-color` | `var(--denhaag-color-red-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed4734%22%2F%3E%3C%2Fsvg%3E) `#ed4734` | this set | | +| `--denhaag-dot-indicator-border` | `var(--denhaag-dot-indicator-border-size) solid var(--denhaag-dot-indicator-border-color)` | | this set | | +| `--denhaag-dot-indicator-border-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-dot-indicator-border-size` | `2px` | | this set | | +| `--denhaag-dot-indicator-size` | `12px` | | this set | | +| `--denhaag-dynamic-content-card-caption-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--denhaag-dynamic-content-card-caption-font-weight` | `var(--denhaag-typography-weight-regular)` | | this set | | +| `--denhaag-dynamic-content-card-caption-line-height` | `var(--denhaag-typography-scale-base-line-height)` | | this set | | +| `--denhaag-dynamic-content-card-content-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-dynamic-content-card-content-gap` | `var(--denhaag-space-inline-lg)` | | this set | | +| `--denhaag-dynamic-content-card-content-padding` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-dynamic-content-card-gap` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-dynamic-content-card-title-color` | `var(--denhaag-color-grey-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--denhaag-dynamic-content-card-title-font-size` | `var(--denhaag-typography-scale-xl-font-size)` | | this set | | +| `--denhaag-dynamic-content-card-title-font-weight` | `var(--denhaag-typography-weight-bold)` | | this set | | +| `--denhaag-dynamic-content-card-title-hyphens` | `auto` | | this set | | +| `--denhaag-dynamic-content-card-title-line-height` | `var(--denhaag-typography-scale-s-line-height)` | | this set | | +| `--denhaag-dynamic-content-focus-icon-opacity` | `1` | | this set | | +| `--denhaag-dynamic-content-focus-outline` | `var(--denhaag-focus-border)` | | this set | | +| `--denhaag-dynamic-content-grid-columns` | `1` | | this set | | +| `--denhaag-dynamic-content-grid-gap` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-dynamic-content-hover-icon-opacity` | `1` | | this set | | +| `--denhaag-dynamic-content-icon-color` | `var(--denhaag-color-blue-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235eaced%22%2F%3E%3C%2Fsvg%3E) `#5eaced` | this set | | +| `--denhaag-dynamic-content-icon-opacity` | `0` | | this set | | +| `--denhaag-dynamic-content-image-background-color` | `var(--denhaag-color-grey-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--denhaag-dynamic-content-image-placeholder-padding-block` | `var(--denhaag-space-block-xl)` | | this set | | +| `--denhaag-dynamic-content-image-placeholder-padding-inline` | `var(--denhaag-space-inline-xl)` | | this set | | +| `--denhaag-dynamic-content-list-gap` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-dynamic-content-m-grid-columns` | `3` | | this set | | +| `--denhaag-dynamic-content-m-grid-gap` | `var(--denhaag-space-inline-xl)` | | this set | | +| `--denhaag-dynamic-content-padding-block` | `var(--denhaag-space-inline-2xl)` | | this set | | +| `--denhaag-dynamic-content-pagination-padding-block` | `var(--denhaag-space-block-5xl)` | | this set | | +| `--denhaag-dynamic-content-row-gap` | `var(--denhaag-space-block-2xl)` | | this set | | +| `--denhaag-dynamic-content-s-grid-columns` | `2` | | this set | | +| `--denhaag-dynamic-content-s-grid-gap` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-event-date-icon-color` | `var(--denhaag-color-blue-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235eaced%22%2F%3E%3C%2Fsvg%3E) `#5eaced` | this set | | +| `--denhaag-event-date-icon-margin-inline-end` | `0.5rem` | | this set | | +| `--denhaag-event-date-text-line-height` | `1.75` | | this set | | +| `--denhaag-file-border-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-file-border-style` | `solid` | | this set | | +| `--denhaag-file-border-width` | `1px` | | this set | | +| `--denhaag-file-focus-outline-color` | `var(--denhaag-focus-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f8da72%22%2F%3E%3C%2Fsvg%3E) `#f8da72` | this set | | +| `--denhaag-file-focus-outline-style` | `var(--denhaag-focus-border-style)` | | this set | | +| `--denhaag-file-focus-outline-width` | `var(--denhaag-focus-border-width)` | | this set | | +| `--denhaag-file-hover-color` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237ec0f6%22%2F%3E%3C%2Fsvg%3E) `#7ec0f6` | this set | | +| `--denhaag-file-left-background-color` | `var(--denhaag-color-warmgrey-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23201c16%22%2F%3E%3C%2Fsvg%3E) `#201c16` | this set | | +| `--denhaag-file-left-padding-inline-end` | `var(--denhaag-space-inline-sm)` | | this set | | +| `--denhaag-file-left-padding-inline-start` | `var(--denhaag-space-inline-sm)` | | this set | | +| `--denhaag-file-link-color` | `var(--denhaag-color-blue-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235eaced%22%2F%3E%3C%2Fsvg%3E) `#5eaced` | this set | | +| `--denhaag-file-link-gap` | `var(--denhaag-space-inline-2xs)` | | this set | | +| `--denhaag-file-link-icon-width` | `20px` | | this set | | +| `--denhaag-file-right-gap` | `var(--denhaag-space-inline-xs)` | | this set | | +| `--denhaag-file-right-padding-block-end` | `var(--denhaag-space-block-sm)` | | this set | | +| `--denhaag-file-right-padding-block-start` | `var(--denhaag-space-block-sm)` | | this set | | +| `--denhaag-file-right-padding-inline-end` | `var(--denhaag-space-inline-sm)` | | this set | | +| `--denhaag-file-right-padding-inline-start` | `var(--denhaag-space-inline-sm)` | | this set | | +| `--denhaag-floating-contact-active-overlay-display` | `flex` | | this set | | +| `--denhaag-floating-contact-active-switch-direction` | `row` | | this set | | +| `--denhaag-floating-contact-active-switch-icons-display` | `flex` | | this set | | +| `--denhaag-floating-contact-bottom` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-floating-contact-color` | `var(--denhaag-color-green-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1ffe0%22%2F%3E%3C%2Fsvg%3E) `#d1ffe0` | this set | | +| `--denhaag-floating-contact-gap` | `0.75rem` | | this set | | +| `--denhaag-floating-contact-heading-font-family` | `var(--denhaag-typography-sans-serif-alternate-font-family)` | | this set | | +| `--denhaag-floating-contact-heading-font-size` | `var(--denhaag-typography-scale-2xl-font-size)` | | this set | | +| `--denhaag-floating-contact-heading-font-weight` | `var(--denhaag-typography-weight-bold)` | | this set | | +| `--denhaag-floating-contact-heading-line-height` | `var(--denhaag-typography-scale-base-line-height)` | | this set | | +| `--denhaag-floating-contact-index` | `9` | | this set | | +| `--denhaag-floating-contact-item-align-items` | `center` | | this set | | +| `--denhaag-floating-contact-item-gap` | `var(--denhaag-space-inline-lg)` | | this set | | +| `--denhaag-floating-contact-item-icon-size` | `1.75rem` | | this set | | +| `--denhaag-floating-contact-link-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--denhaag-floating-contact-link-decoration` | `underline` | | this set | | +| `--denhaag-floating-contact-link-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--denhaag-floating-contact-link-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--denhaag-floating-contact-link-font-weight` | `var(--denhaag-typography-weight-regular)` | | this set | | +| `--denhaag-floating-contact-link-hover-font-weight` | `var(--denhaag-typography-weight-bold)` | | this set | | +| `--denhaag-floating-contact-link-line-height` | `var(--denhaag-typography-scale-base-line-height)` | | this set | | +| `--denhaag-floating-contact-link-outline-color` | `currentColor` | | this set | | +| `--denhaag-floating-contact-link-outline-style` | `var(--denhaag-focus-border-style)` | | this set | | +| `--denhaag-floating-contact-link-outline-width` | `var(--denhaag-focus-border-width)` | | this set | | +| `--denhaag-floating-contact-overlay-align-items` | `flex-start` | | this set | | +| `--denhaag-floating-contact-overlay-arrow-width` | `var(--denhaag-space-block-2xl)` | | this set | | +| `--denhaag-floating-contact-overlay-background-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--denhaag-floating-contact-overlay-border-radius` | `0.25rem` | | this set | | +| `--denhaag-floating-contact-overlay-color` | `var(--denhaag-color-green-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2384b984%22%2F%3E%3C%2Fsvg%3E) `#84b984` | this set | | +| `--denhaag-floating-contact-overlay-display` | `none` | | this set | | +| `--denhaag-floating-contact-overlay-gap` | `var(--denhaag-space-inline-xl)` | | this set | | +| `--denhaag-floating-contact-overlay-padding-block` | `var(--denhaag-space-block-2xl)` | | this set | | +| `--denhaag-floating-contact-overlay-padding-inline` | `var(--denhaag-space-inline-xl)` | | this set | | +| `--denhaag-floating-contact-overlay-width` | `17.25rem` | | this set | | +| `--denhaag-floating-contact-position` | `fixed` | | this set | | +| `--denhaag-floating-contact-right` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-floating-contact-status-border-width` | `0.0625rem` | | this set | | +| `--denhaag-floating-contact-status-offline-background-color` | `var(--denhaag-color-red-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed4734%22%2F%3E%3C%2Fsvg%3E) `#ed4734` | this set | | +| `--denhaag-floating-contact-status-offline-border-color` | `var(--denhaag-color-red-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23470904%22%2F%3E%3C%2Fsvg%3E) `#470904` | this set | | +| `--denhaag-floating-contact-status-online-background-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--denhaag-floating-contact-status-online-border-color` | `var(--denhaag-color-green-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23243c24%22%2F%3E%3C%2Fsvg%3E) `#243c24` | this set | | +| `--denhaag-floating-contact-status-size` | `0.5rem` | | this set | | +| `--denhaag-floating-contact-switch-align-items` | `center` | | this set | | +| `--denhaag-floating-contact-switch-align-self` | `flex-end` | | this set | | +| `--denhaag-floating-contact-switch-background-color` | `var(--denhaag-color-green-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23243c24%22%2F%3E%3C%2Fsvg%3E) `#243c24` | this set | | +| `--denhaag-floating-contact-switch-border-color` | `var(--denhaag-color-green-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2351854f%22%2F%3E%3C%2Fsvg%3E) `#51854f` | this set | | +| `--denhaag-floating-contact-switch-border-radius` | `1.5rem` | | this set | | +| `--denhaag-floating-contact-switch-border-style` | `solid` | | this set | | +| `--denhaag-floating-contact-switch-border-width` | `0.0625rem` | | this set | | +| `--denhaag-floating-contact-switch-direction` | `row-reverse` | | this set | | +| `--denhaag-floating-contact-switch-focus-icons-background-color` | `var(--denhaag-color-green-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | | +| `--denhaag-floating-contact-switch-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--denhaag-floating-contact-switch-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--denhaag-floating-contact-switch-font-weight` | `var(--denhaag-typography-weight-bold)` | | this set | | +| `--denhaag-floating-contact-switch-gap` | `0` | | this set | | +| `--denhaag-floating-contact-switch-hover-icons-background-color` | `var(--denhaag-color-green-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | | +| `--denhaag-floating-contact-switch-icon-size` | `1rem` | | this set | | +| `--denhaag-floating-contact-switch-icons-background-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--denhaag-floating-contact-switch-icons-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--denhaag-floating-contact-switch-icons-display` | `none` | | this set | | +| `--denhaag-floating-contact-switch-icons-gap` | `0.75rem` | | this set | | +| `--denhaag-floating-contact-switch-line-height` | `1` | | this set | | +| `--denhaag-floating-contact-switch-outline` | `var(--denhaag-focus-border)` | | this set | | +| `--denhaag-floating-contact-switch-padding-block` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-floating-contact-switch-padding-inline` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-focus-border` | `var(--denhaag-focus-border-width) var(--denhaag-focus-border-style) var(--denhaag-focus-border-color)` | | this set | | +| `--denhaag-focus-border-color` | `var(--denhaag-color-ocher-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f8da72%22%2F%3E%3C%2Fsvg%3E) `#f8da72` | this set | | +| `--denhaag-focus-border-style` | `dashed` | | this set | | +| `--denhaag-focus-border-width` | `2px` | | this set | | +| `--denhaag-focus-offset` | `0` | | this set | | +| `--denhaag-footer-background-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23acacac%22%2F%3E%3C%2Fsvg%3E) `#acacac` | this set | | +| `--denhaag-footer-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--denhaag-footer-font-size` | `16px` | | this set | | +| `--denhaag-footer-group-gap` | `32px` | | this set | | +| `--denhaag-footer-group-padding-block-end` | `40px` | | this set | | +| `--denhaag-footer-group-padding-block-start` | `40px` | | this set | | +| `--denhaag-footer-heading-color` | `var(--denhaag-color-ocher-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f9db43%22%2F%3E%3C%2Fsvg%3E) `#f9db43` | this set | | +| `--denhaag-footer-legal-links-column-gap` | `32px` | | this set | | +| `--denhaag-footer-mega-background-color` | `var(--denhaag-color-grey-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23c4c4c4%22%2F%3E%3C%2Fsvg%3E) `#c4c4c4` | this set | | +| `--denhaag-footer-mega-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--denhaag-footer-paragraph-margin-block-end` | `12px` | | this set | | +| `--denhaag-footer-paragraph-margin-block-start` | `12px` | | this set | | +| `--denhaag-form-control-label-input-margin-inline-end` | `8px` | | this set | | +| `--denhaag-form-control-label-margin-block-end` | `8px` | | this set | | +| `--denhaag-form-field-description-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-form-field-description-error-color` | `var(--denhaag-color-red-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f95644%22%2F%3E%3C%2Fsvg%3E) `#f95644` | this set | | +| `--denhaag-form-field-description-font-family` | `var(--utrecht-document-font-family)` | | this set | | +| `--denhaag-form-field-description-font-size` | `var(--denhaag-typography-scale-s-font-size)` | | this set | | +| `--denhaag-form-field-description-font-weight` | `var(--denhaag-typography-weight-regular)` | | this set | | +| `--denhaag-form-field-description-line-height` | `var(--denhaag-typography-scale-s-line-height)` | | this set | | +| `--denhaag-form-field-label-margin-block-end` | `var(--denhaag-space-block-2xs)` | | this set | | +| `--denhaag-form-group-helper-text-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-form-group-helper-text-error-color` | `var(--denhaag-color-red-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f95644%22%2F%3E%3C%2Fsvg%3E) `#f95644` | this set | | +| `--denhaag-form-group-helper-text-margin-block-start` | `4px` | | this set | | +| `--denhaag-form-group-helper-text-size` | `var(--denhaag-typography-scale-s-font-size)` | | this set | | +| `--denhaag-form-group-label-color` | `var(--denhaag-color-blue-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b0dafc%22%2F%3E%3C%2Fsvg%3E) `#b0dafc` | this set | | +| `--denhaag-form-group-margin-block-end` | `8px` | | this set | | +| `--denhaag-form-group-margin-block-start` | `8px` | | this set | | +| `--denhaag-form-group-margin-inline-end` | `8px` | | this set | | +| `--denhaag-form-group-margin-inline-start` | `8px` | | this set | | +| `--denhaag-form-input-icon-font-size` | `var(--denhaag-typography-scale-lg-font-size)` | | this set | | +| `--denhaag-form-input-line-height` | `var(--denhaag-typography-scale-base-line-height)` | | this set | | +| `--denhaag-form-input-margin-block-end` | `0` | | this set | | +| `--denhaag-form-input-margin-block-start` | `0` | | this set | | +| `--denhaag-form-progress-header-margin-block-end` | `20px` | | this set | | +| `--denhaag-form-progress-label-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-form-progress-label-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--denhaag-form-progress-label-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--denhaag-form-progress-label-font-weight` | `var(--denhaag-typography-weight-regular)` | | this set | | +| `--denhaag-form-progress-progress-background-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-form-progress-progress-bar-background-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--denhaag-form-progress-progress-height` | `2px` | | this set | | +| `--denhaag-header-actions-desktop-action-margin-inline-start` | `24px` | | this set | | +| `--denhaag-header-actions-desktop-display` | `flex` | | this set | | +| `--denhaag-header-actions-display` | `none` | | this set | | +| `--denhaag-header-border-bottom-color` | `var(--denhaag-color-grey-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--denhaag-header-border-bottom-style` | `solid` | | this set | | +| `--denhaag-header-border-bottom-width` | `1px` | | this set | | +| `--denhaag-header-content-align-items` | `center` | | this set | | +| `--denhaag-header-content-display` | `flex` | | this set | | +| `--denhaag-header-content-flex-direction` | `row` | | this set | | +| `--denhaag-header-content-justify-content` | `space-between` | | this set | | +| `--denhaag-header-height` | `4.5rem` | | this set | | +| `--denhaag-header-md-height` | `7.5rem` | | this set | | +| `--denhaag-header-mobile-actions-desktop-display` | `none` | | this set | | +| `--denhaag-header-mobile-actions-display` | `flex` | | this set | | +| `--denhaag-header-sm-height` | `6rem` | | this set | | +| `--denhaag-heading-color` | `var(--denhaag-color-grey-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--denhaag-heading-line-height` | `var(--denhaag-typography-scale-s-line-height)` | | this set | | +| `--denhaag-hero-background-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--denhaag-hero-color` | `var(--denhaag-color-black)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--denhaag-hero-columns` | `12` | | this set | | +| `--denhaag-hero-container-gutter` | `var(--denhaag-space-inline-xs)` | | this set | | +| `--denhaag-hero-container-gutter-l` | `var(--denhaag-space-inline-2xl)` | | this set | | +| `--denhaag-hero-container-gutter-m` | `var(--denhaag-space-inline-xl)` | | this set | | +| `--denhaag-hero-container-gutter-s` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-hero-container-gutter-xl` | `var(--denhaag-space-inline-3xl)` | | this set | | +| `--denhaag-hero-container-max-width` | `100%` | | this set | | +| `--denhaag-hero-container-max-width-l` | `67.5rem` | | this set | | +| `--denhaag-hero-container-max-width-m` | `56.5rem` | | this set | | +| `--denhaag-hero-container-max-width-s` | `40.5rem` | | this set | | +| `--denhaag-hero-container-max-width-xl` | `98rem` | | this set | | +| `--denhaag-hero-container-max-width-xs` | `20rem` | | this set | | +| `--denhaag-hero-container-padding` | `var(--denhaag-space-inline-xl)` | | this set | | +| `--denhaag-hero-container-padding-l` | `0` | | this set | | +| `--denhaag-hero-home-content-align-self` | `center` | | this set | | +| `--denhaag-hero-home-content-column-end` | `12` | | this set | | +| `--denhaag-hero-home-content-column-end-l` | `5` | | this set | | +| `--denhaag-hero-home-content-column-end-m` | `6` | | this set | | +| `--denhaag-hero-home-content-column-end-s` | `7` | | this set | | +| `--denhaag-hero-home-content-column-offset` | `0` | | this set | | +| `--denhaag-hero-home-content-column-offset-m` | `1` | | this set | | +| `--denhaag-hero-home-content-column-offset-s` | `2` | | this set | | +| `--denhaag-hero-home-content-column-start` | `1` | | this set | | +| `--denhaag-hero-home-content-column-start-xl` | `2` | | this set | | +| `--denhaag-hero-home-content-padding-block` | `5.75rem` | | this set | | +| `--denhaag-hero-home-content-padding-block-s` | `var(--denhaag-space-block-3xl)` | | this set | | +| `--denhaag-hero-home-image-path` | `11.25rem` | | this set | | +| `--denhaag-hero-home-min-height` | `20rem` | | this set | | +| `--denhaag-hero-home-min-height-m` | `30rem` | | this set | | +| `--denhaag-hero-home-min-height-s` | `28rem` | | this set | | +| `--denhaag-hero-home-title-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--denhaag-hero-home-title-font-size-xs` | `var(--denhaag-typography-scale-2xl-font-size)` | | this set | | +| `--denhaag-hero-home-title-line-height` | `var(--denhaag-typography-scale-s-line-height)` | | this set | | +| `--denhaag-hero-home-title-margin-block-end` | `0` | | this set | | +| `--denhaag-hero-home-title-margin-block-start` | `0` | | this set | | +| `--denhaag-hero-home-title-weight` | `var(--denhaag-typography-weight-regular)` | | this set | | +| `--denhaag-hero-routing-background-color` | `var(--denhaag-color-ocher-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d0b012%22%2F%3E%3C%2Fsvg%3E) `#d0b012` | this set | | +| `--denhaag-hero-routing-content-align-self` | `center` | | this set | | +| `--denhaag-hero-routing-content-column-end` | `12` | | this set | | +| `--denhaag-hero-routing-content-column-end-s` | `8` | | this set | | +| `--denhaag-hero-routing-content-column-end-xl` | `6` | | this set | | +| `--denhaag-hero-routing-content-column-offset` | `0` | | this set | | +| `--denhaag-hero-routing-content-column-offset-l` | `-0.2` | | this set | | +| `--denhaag-hero-routing-content-column-offset-xl` | `2` | | this set | | +| `--denhaag-hero-routing-content-column-start` | `1` | | this set | | +| `--denhaag-hero-routing-content-column-start-xl` | `3` | | this set | | +| `--denhaag-hero-routing-content-padding-block` | `var(--denhaag-space-block-xl)` | | this set | | +| `--denhaag-hero-routing-content-padding-block-s` | `var(--denhaag-space-block-3xl)` | | this set | | +| `--denhaag-hero-routing-image-path` | `2.8125rem` | | this set | | +| `--denhaag-hero-routing-min-height` | `9rem` | | this set | | +| `--denhaag-hero-routing-min-height-m` | `15rem` | | this set | | +| `--denhaag-hero-routing-min-height-s` | `12rem` | | this set | | +| `--denhaag-hero-routing-shape-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23FAE166%22%2F%3E%3C%2Fsvg%3E) `#FAE166` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23a0870e%22%2F%3E%3C%2Fsvg%3E) `#a0870e` | this set | | +| `--denhaag-hero-routing-shape-start` | `1` | | this set | | +| `--denhaag-hero-routing-shape-start-l` | `0` | | this set | | +| `--denhaag-hero-routing-shape-start-xl` | `-0.25` | | this set | | +| `--denhaag-hero-routing-title-font-size-xs` | `var(--denhaag-typography-scale-2xl-font-size)` | | this set | | +| `--denhaag-hero-routing-title-margin-block-end` | `0` | | this set | | +| `--denhaag-hero-routing-title-margin-block-start` | `0` | | this set | | +| `--denhaag-hero-theme-page-container-padding-block-start` | `0` | | this set | | +| `--denhaag-hero-theme-page-container-padding-block-start-s` | `3.5rem` | | this set | | +| `--denhaag-hero-theme-page-container-padding-block-start-xl` | `7rem` | | this set | | +| `--denhaag-hero-theme-page-content-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-hero-theme-page-content-box-shadow` | `0px 1px 0px var(--denhaag-color-grey-2)` | | this set | | +| `--denhaag-hero-theme-page-content-column-end` | `12` | | this set | | +| `--denhaag-hero-theme-page-content-column-end-s` | `10` | | this set | | +| `--denhaag-hero-theme-page-content-column-end-xl` | `8` | | this set | | +| `--denhaag-hero-theme-page-content-column-start` | `1` | | this set | | +| `--denhaag-hero-theme-page-content-column-start-s` | `2` | | this set | | +| `--denhaag-hero-theme-page-content-column-start-xl` | `3` | | this set | | +| `--denhaag-hero-theme-page-content-padding-block` | `4rem` | | this set | | +| `--denhaag-hero-theme-page-content-padding-block-s` | `var(--denhaag-space-block-3xl)` | | this set | | +| `--denhaag-hero-theme-page-content-padding-inline-end` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-hero-theme-page-content-padding-inline-start` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-hero-theme-page-content-text-align` | `center` | | this set | | +| `--denhaag-hero-theme-page-content-transform` | `2rem` | | this set | | +| `--denhaag-hero-theme-page-image-path` | `11.25rem` | | this set | | +| `--denhaag-hero-theme-page-image-pattern-container-overflow` | `hidden` | | this set | | +| `--denhaag-hero-theme-page-image-pattern-container-position` | `absolute` | | this set | | +| `--denhaag-hero-theme-page-image-pattern-container-size` | `100%` | | this set | | +| `--denhaag-hero-theme-page-image-pattern-height` | `auto` | | this set | | +| `--denhaag-hero-theme-page-image-pattern-width` | `100%` | | this set | | +| `--denhaag-hero-theme-page-image-start-m` | `5` | | this set | | +| `--denhaag-hero-theme-page-image-start-s` | `4` | | this set | | +| `--denhaag-hero-theme-page-min-height` | `0` | | this set | | +| `--denhaag-hero-theme-page-text-font-size` | `var(--denhaag-typography-scale-lg-font-size)` | | this set | | +| `--denhaag-hero-theme-page-text-font-size-m` | `var(--denhaag-typography-scale-xl-font-size)` | | this set | | +| `--denhaag-hero-theme-page-text-line-height` | `var(--denhaag-typography-scale-s-line-height)` | | this set | | +| `--denhaag-hero-theme-page-text-padding-block-end` | `var(--denhaag-space-block-2xl)` | | this set | | +| `--denhaag-hero-theme-page-title-font-size-m` | `var(--denhaag-typography-scale-3xl-font-size)` | | this set | | +| `--denhaag-hero-theme-page-title-padding-block-end` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-icon-button-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-icon-button-focus-outline-color` | `var(--denhaag-focus-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f8da72%22%2F%3E%3C%2Fsvg%3E) `#f8da72` | this set | | +| `--denhaag-icon-button-focus-outline-offset` | `0px` | | this set | | +| `--denhaag-icon-button-focus-outline-style` | `var(--denhaag-focus-border-style)` | | this set | | +| `--denhaag-icon-button-focus-outline-width` | `var(--denhaag-focus-border-width)` | | this set | | +| `--denhaag-icon-button-hover-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-icon-button-padding-block-end` | `2px` | | this set | | +| `--denhaag-icon-button-padding-block-start` | `2px` | | this set | | +| `--denhaag-icon-button-padding-inline-end` | `2px` | | this set | | +| `--denhaag-icon-button-padding-inline-start` | `2px` | | this set | | +| `--denhaag-image-download-text-display-desktop` | `inline` | | this set | | +| `--denhaag-image-download-text-display-mobile` | `none` | | this set | | +| `--denhaag-image-download-text-width` | `max-content` | | this set | | +| `--denhaag-image-figcaption-align-items` | `flex-start` | | this set | | +| `--denhaag-image-figcaption-display` | `grid` | | this set | | +| `--denhaag-image-figcaption-download-align-items` | `flex-end` | | this set | | +| `--denhaag-image-figcaption-download-color` | `var(--denhaag-color-blue-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235eaced%22%2F%3E%3C%2Fsvg%3E) `#5eaced` | this set | | +| `--denhaag-image-figcaption-download-display` | `flex` | | this set | | +| `--denhaag-image-figcaption-download-font-size` | `1.125rem` | | this set | | +| `--denhaag-image-figcaption-download-gap` | `0.5rem` | | this set | | +| `--denhaag-image-figcaption-download-hover-color` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237ec0f6%22%2F%3E%3C%2Fsvg%3E) `#7ec0f6` | this set | | +| `--denhaag-image-figcaption-download-line-height` | `1` | | this set | | +| `--denhaag-image-figcaption-download-margin-inline-start` | `1rem` | | this set | | +| `--denhaag-image-figcaption-download-only-display` | `inline-flex` | | this set | | +| `--denhaag-image-figcaption-download-only-justify-content` | `flex-end` | | this set | | +| `--denhaag-image-figcaption-download-only-vertical-align` | `bottom` | | this set | | +| `--denhaag-image-figcaption-download-only-width` | `100%` | | this set | | +| `--denhaag-image-figcaption-download-outline` | `var(--denhaag-focus-border)` | | this set | | +| `--denhaag-image-figcaption-download-text-decoration` | `none` | | this set | | +| `--denhaag-image-figcaption-gap` | `1rem` | | this set | | +| `--denhaag-image-figcaption-justify-content` | `space-between` | | this set | | +| `--denhaag-image-figcaption-padding-block` | `1rem` | | this set | | +| `--denhaag-image-figcaption-text-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-image-figcaption-text-font-size` | `var(--denhaag-typography-scale-s-font-size)` | | this set | | +| `--denhaag-image-figcaption-text-line-height` | `1.5` | | this set | | +| `--denhaag-image-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--denhaag-image-image-display` | `block` | | this set | | +| `--denhaag-image-image-height` | `auto` | | this set | | +| `--denhaag-image-image-width` | `100%` | | this set | | +| `--denhaag-image-margin-block-end-desktop` | `2rem` | | this set | | +| `--denhaag-image-margin-block-end-mobile` | `1.5rem` | | this set | | +| `--denhaag-image-margin-inline` | `0` | | this set | | +| `--denhaag-language-switcher-list-item-button-hover-text-decoration` | `underline` | | this set | | +| `--denhaag-language-switcher-list-item-button-icon-gap` | `6px` | | this set | | +| `--denhaag-language-switcher-list-item-button-icon-inset-block-start` | `-1px` | | this set | | +| `--denhaag-language-switcher-list-item-button-icon-size` | `1rem` | | this set | | +| `--denhaag-language-switcher-list-item-button-text-decoration` | `none` | | this set | | +| `--denhaag-language-switcher-list-item-button-text-underline-offset` | `1px` | | this set | | +| `--denhaag-language-switcher-list-item-link-active-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-language-switcher-list-item-link-active-font-weight` | `var(--utrecht-heading-font-weight)` | | this set | | +| `--denhaag-language-switcher-list-item-link-active-icon-margin-block-end` | `auto` | | this set | | +| `--denhaag-language-switcher-list-item-link-active-icon-margin-block-start` | `auto` | | this set | | +| `--denhaag-language-switcher-list-item-link-active-icon-margin-inline-end` | `auto` | | this set | | +| `--denhaag-language-switcher-list-item-link-active-icon-margin-inline-start` | `auto` | | this set | | +| `--denhaag-language-switcher-list-item-link-active-icon-padding-block-start` | `0` | | this set | | +| `--denhaag-language-switcher-list-item-link-active-icon-padding-inline-start` | `5px` | | this set | | +| `--denhaag-language-switcher-list-item-list-style` | `none` | | this set | | +| `--denhaag-language-switcher-list-item-mobile-padding-block-end` | `16px` | | this set | | +| `--denhaag-language-switcher-list-item-mobile-padding-block-start` | `16px` | | this set | | +| `--denhaag-language-switcher-list-item-padding-block-end` | `8px` | | this set | | +| `--denhaag-language-switcher-list-item-padding-block-start` | `8px` | | this set | | +| `--denhaag-language-switcher-list-item-tablet-padding-block-end` | `12px` | | this set | | +| `--denhaag-language-switcher-list-item-tablet-padding-block-start` | `12px` | | this set | | +| `--denhaag-language-switcher-list-margin-block-end` | `16px` | | this set | | +| `--denhaag-language-switcher-list-margin-block-start` | `0` | | this set | | +| `--denhaag-language-switcher-list-margin-inline-start` | `0` | | this set | | +| `--denhaag-language-switcher-list-padding-block-start` | `16px` | | this set | | +| `--denhaag-language-switcher-list-padding-inline-start` | `0` | | this set | | +| `--denhaag-language-switcher-mobile-title-display` | `none` | | this set | | +| `--denhaag-link-color` | `var(--denhaag-color-blue-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235eaced%22%2F%3E%3C%2Fsvg%3E) `#5eaced` | this set | | +| `--denhaag-link-cursor` | `pointer` | | this set | | +| `--denhaag-link-disabled-color` | `var(--denhaag-color-grey-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--denhaag-link-external-icon-align` | `center` | | this set | | +| `--denhaag-link-focus-color` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237ec0f6%22%2F%3E%3C%2Fsvg%3E) `#7ec0f6` | this set | | +| `--denhaag-link-focus-outline` | `var(--denhaag-focus-border)` | | this set | | +| `--denhaag-link-hover-color` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237ec0f6%22%2F%3E%3C%2Fsvg%3E) `#7ec0f6` | this set | | +| `--denhaag-link-icon-align` | `flex-start` | | this set | | +| `--denhaag-link-icon-font-size` | `1em` | | this set | | +| `--denhaag-link-icon-gap` | `var(--denhaag-space-inline-2xs)` | | this set | | +| `--denhaag-link-icon-margin-end` | `var(--denhaag-space-inline-xs)` | | this set | | +| `--denhaag-link-icon-margin-start` | `var(--denhaag-space-inline-xs)` | | this set | | +| `--denhaag-link-icon-size` | `1.25rem` | | this set | | +| `--denhaag-link-small-icon-font-size` | `var(--denhaag-space-block-xs)` | | this set | | +| `--denhaag-link-small-icon-size` | `0.5rem` | | this set | | +| `--denhaag-link-text-decoration` | `underline` | | this set | | +| `--denhaag-link-with-icon-vertical-align` | `bottom` | | this set | | +| `--denhaag-list-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--denhaag-list-item-active-border-color` | `var(--denhaag-color-blue-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235ba6e4%22%2F%3E%3C%2Fsvg%3E) `#5ba6e4` | this set | | +| `--denhaag-list-item-active-border-size` | `2px` | | this set | | +| `--denhaag-list-item-focus-color` | `var(--denhaag-color-blue-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235eaced%22%2F%3E%3C%2Fsvg%3E) `#5eaced` | this set | | +| `--denhaag-list-item-hover-color` | `var(--denhaag-color-blue-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235eaced%22%2F%3E%3C%2Fsvg%3E) `#5eaced` | this set | | +| `--denhaag-list-item-icon-color` | `var(--denhaag-color-grey-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--denhaag-list-item-icon-margin-inline-end` | `24px` | | this set | | +| `--denhaag-list-item-padding-block` | `12px` | | this set | | +| `--denhaag-list-item-padding-inline` | `16px` | | this set | | +| `--denhaag-list-item-secondary-action-color` | `var(--denhaag-color-grey-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--denhaag-list-item-secondary-action-margin-inline-start` | `24px` | | this set | | +| `--denhaag-list-item-secondary-padding-block` | `8px` | | this set | | +| `--denhaag-list-item-text-multiline-primary-line-height` | `32px` | | this set | | +| `--denhaag-list-item-text-primary-color` | `var(--denhaag-color-grey-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--denhaag-list-item-text-primary-font-size` | `1rem` | | this set | | +| `--denhaag-list-item-text-primary-font-weight` | `400` | | this set | | +| `--denhaag-list-item-text-primary-line-height` | `var(--denhaag-typography-scale-base-line-height)` | | this set | | +| `--denhaag-list-item-text-secondary-color` | `var(--denhaag-color-grey-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--denhaag-list-item-text-secondary-font-size` | `var(--denhaag-typography-scale-s-font-size)` | | this set | | +| `--denhaag-list-item-text-secondary-font-weight` | `400` | | this set | | +| `--denhaag-list-item-text-secondary-line-height` | `16px` | | this set | | +| `--denhaag-list-item-text-secondary-padding-block-end` | `8px` | | this set | | +| `--denhaag-list-subheader-color` | `var(--denhaag-color-grey-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--denhaag-list-subheader-font-weight` | `700` | | this set | | +| `--denhaag-list-subheader-line-height` | `var(--denhaag-typography-scale-base-line-height)` | | this set | | +| `--denhaag-list-wrapper-margin-block` | `8px` | | this set | | +| `--denhaag-list-wrapper-padding-block` | `8px` | | this set | | +| `--denhaag-menu-button-active-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-menu-button-active-font-weight` | `var(--denhaag-typography-weight-bold)` | | this set | | +| `--denhaag-menu-button-chevron-active-color` | `var(--denhaag-menu-button-active-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-menu-button-chevron-hover-color` | `var(--denhaag-menu-button-chevron-active-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-menu-button-chevron-padding-inline-start` | `4px` | | this set | | +| `--denhaag-menu-button-chevron-size` | `12px` | | this set | | +| `--denhaag-menu-button-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-menu-button-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--denhaag-menu-button-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--denhaag-menu-button-font-weight` | `var(--denhaag-typography-weight-regular)` | | this set | | +| `--denhaag-menu-button-hover-color` | `var(--denhaag-menu-button-active-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-menu-button-line-height` | `21px` | | this set | | +| `--denhaag-menu-group-spacing` | `40px` | | this set | | +| `--denhaag-mobile-menu-list-expandable-display` | `none` | | this set | | +| `--denhaag-mobile-menu-list-expandable-item-border-bottom` | `none` | | this set | | +| `--denhaag-mobile-menu-list-expandable-open-display` | `block` | | this set | | +| `--denhaag-mobile-menu-list-item-active-icon-transform` | `scaleY(-1)` | | this set | | +| `--denhaag-mobile-menu-list-item-border-bottom` | `1px solid var(--denhaag-color-grey-1)` | | this set | | +| `--denhaag-mobile-menu-list-item-button-align-items` | `center` | | this set | | +| `--denhaag-mobile-menu-list-item-button-appearance` | `none` | | this set | | +| `--denhaag-mobile-menu-list-item-button-background-color` | `transparent` | | this set | | +| `--denhaag-mobile-menu-list-item-button-border` | `0` | | this set | | +| `--denhaag-mobile-menu-list-item-button-color` | `auto` | | this set | | +| `--denhaag-mobile-menu-list-item-button-display` | `flex` | | this set | | +| `--denhaag-mobile-menu-list-item-button-font-size` | `inherit` | | this set | | +| `--denhaag-mobile-menu-list-item-button-justify-content` | `space-between` | | this set | | +| `--denhaag-mobile-menu-list-item-button-label-gap` | `8px` | | this set | | +| `--denhaag-mobile-menu-list-item-button-large-font-size` | `20px` | | this set | | +| `--denhaag-mobile-menu-list-item-button-large-font-weight` | `700` | | this set | | +| `--denhaag-mobile-menu-list-item-button-margin-block` | `0` | | this set | | +| `--denhaag-mobile-menu-list-item-button-margin-inline` | `0` | | this set | | +| `--denhaag-mobile-menu-list-item-button-padding-block` | `0` | | this set | | +| `--denhaag-mobile-menu-list-item-button-padding-inline` | `0` | | this set | | +| `--denhaag-mobile-menu-list-item-button-text-decoration` | `none` | | this set | | +| `--denhaag-mobile-menu-list-item-button-width` | `100%` | | this set | | +| `--denhaag-mobile-menu-list-item-display` | `flex` | | this set | | +| `--denhaag-mobile-menu-list-item-expanded-list-display` | `none` | | this set | | +| `--denhaag-mobile-menu-list-item-expanded-list-list-style` | `none` | | this set | | +| `--denhaag-mobile-menu-list-item-expanded-list-open-display` | `block` | | this set | | +| `--denhaag-mobile-menu-list-item-expanded-list-padding-inline-start` | `0` | | this set | | +| `--denhaag-mobile-menu-list-item-flex-direction` | `column` | | this set | | +| `--denhaag-mobile-menu-list-item-min-block-size` | `58px` | | this set | | +| `--denhaag-mobile-menu-list-item-outline-style` | `none` | | this set | | +| `--denhaag-mobile-menu-list-padding-inline-start` | `0` | | this set | | +| `--denhaag-mobile-menu-list-submenu-back-button-align-self` | `baseline` | | this set | | +| `--denhaag-mobile-menu-list-submenu-back-button-background-color` | `transparent` | | this set | | +| `--denhaag-mobile-menu-list-submenu-back-button-border` | `0` | | this set | | +| `--denhaag-mobile-menu-list-submenu-back-button-icon-color` | `var(--denhaag-color-blue-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235eaced%22%2F%3E%3C%2Fsvg%3E) `#5eaced` | this set | | +| `--denhaag-mobile-menu-list-submenu-back-button-padding-block-end` | `20px` | | this set | | +| `--denhaag-mobile-menu-list-submenu-back-button-padding-block-start` | `20px` | | this set | | +| `--denhaag-mobile-menu-list-submenu-back-button-padding-inline-end` | `24px` | | this set | | +| `--denhaag-mobile-menu-list-submenu-back-button-padding-inline-start` | `0` | | this set | | +| `--denhaag-mobile-menu-list-submenu-display` | `none` | | this set | | +| `--denhaag-mobile-menu-list-submenu-flex-direction` | `column` | | this set | | +| `--denhaag-mobile-menu-list-submenu-left` | `100vw` | | this set | | +| `--denhaag-mobile-menu-list-submenu-open-display` | `flex` | | this set | | +| `--denhaag-mobile-menu-list-submenu-position` | `absolute` | | this set | | +| `--denhaag-mobile-menu-list-submenu-title-align-items` | `center` | | this set | | +| `--denhaag-mobile-menu-list-submenu-title-display` | `flex` | | this set | | +| `--denhaag-mobile-menu-list-submenu-top` | `0` | | this set | | +| `--denhaag-mobile-menu-list-submenu-width` | `100%` | | this set | | +| `--denhaag-mobile-menu-scrolled-transform` | `translateX(-100vw)` | | this set | | +| `--denhaag-mobile-menu-transition-duration` | `200ms` | | this set | | +| `--denhaag-mobile-menu-will-change` | `transform` | | this set | | +| `--denhaag-modal-backdrop-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22rgb%280%200%200%20%2F%2050%25%29%22%2F%3E%3C%2Fsvg%3E) `rgb(0 0 0 / 50%)` | | this set | | +| `--denhaag-modal-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-modal-close-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-modal-close-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--denhaag-modal-close-font-weight` | `var(--denhaag-typography-weight-semibold)` | | this set | | +| `--denhaag-modal-close-gap` | `var(--denhaag-space-inline-xs)` | | this set | | +| `--denhaag-modal-close-hover-color` | `var(--denhaag-color-green-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2393e1aa%22%2F%3E%3C%2Fsvg%3E) `#93e1aa` | this set | | +| `--denhaag-modal-close-size` | `14px` | | this set | | +| `--denhaag-modal-content-padding-block` | `var(--denhaag-space-block-xl)` | | this set | | +| `--denhaag-modal-content-padding-inline` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-modal-display` | `none` | | this set | | +| `--denhaag-modal-footer-justify-content` | `flex-end` | | this set | | +| `--denhaag-modal-footer-padding-block` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-modal-footer-padding-inline` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-modal-header-border-bottom-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-modal-header-border-bottom-style` | `solid` | | this set | | +| `--denhaag-modal-header-border-bottom-width` | `1px` | | this set | | +| `--denhaag-modal-header-padding-block` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-modal-header-padding-inline` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-modal-index` | `12` | | this set | | +| `--denhaag-modal-offset-y` | `100px` | | this set | | +| `--denhaag-modal-padding-block` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-modal-padding-inline` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-modal-title-color` | `var(--denhaag-color-black)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--denhaag-modal-title-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--denhaag-modal-title-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--denhaag-modal-title-font-style` | `normal` | | this set | | +| `--denhaag-modal-title-font-weight` | `var(--denhaag-typography-weight-semibold)` | | this set | | +| `--denhaag-modal-title-line-height` | `var(--denhaag-typography-scale-base-line-height)` | | this set | | +| `--denhaag-modal-width` | `765px` | | this set | | +| `--denhaag-note-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-note-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--denhaag-note-font-size` | `1.125rem` | | this set | | +| `--denhaag-note-font-weight` | `400` | | this set | | +| `--denhaag-note-icon-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-note-icon-end-margin-inline-end` | `var(--denhaag-space-inline-2xs)` | | this set | | +| `--denhaag-note-icon-info-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--denhaag-note-icon-spacing` | `var(--denhaag-space-block-xs)` | | this set | | +| `--denhaag-note-icon-warning-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--denhaag-note-line-height` | `1.5` | | this set | | +| `--denhaag-note-padding-block` | `var(--denhaag-space-block-2xs)` | | this set | | +| `--denhaag-page-buttons-icon-margin-inline-end` | `0.75rem` | | this set | | +| `--denhaag-page-buttons-icon-max-height` | `1.25rem` | | this set | | +| `--denhaag-page-buttons-icon-max-width` | `1.1875rem` | | this set | | +| `--denhaag-page-buttons-margin-block-end` | `2rem` | | this set | | +| `--denhaag-page-buttons-margin-block-start` | `0.75rem` | | this set | | +| `--denhaag-page-buttons-option-margin-inline-start` | `0.5rem` | | this set | | +| `--denhaag-page-buttons-option-min-height` | `2.594rem` | | this set | | +| `--denhaag-page-buttons-option-min-width` | `2.75rem` | | this set | | +| `--denhaag-page-buttons-outline-dark-action-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-page-buttons-outline-dark-action-border-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-page-buttons-outline-dark-action-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23acacac%22%2F%3E%3C%2Fsvg%3E) `#acacac` | this set | | +| `--denhaag-page-buttons-outline-dark-action-disabled-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-page-buttons-outline-dark-action-disabled-border-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-page-buttons-outline-dark-action-disabled-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-page-buttons-outline-dark-action-hover-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-page-buttons-outline-dark-action-hover-border-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--denhaag-page-buttons-outline-dark-action-hover-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--denhaag-page-buttons-outline-dark-action-margin-block-end` | `0.75rem` | | this set | | +| `--denhaag-page-buttons-outline-dark-action-margin-inline-end` | `0.75rem` | | this set | | +| `--denhaag-page-buttons-outline-dark-action-min-width` | `6.25rem` | | this set | | +| `--denhaag-page-content-main-margin-block-start` | `1rem` | | this set | | +| `--denhaag-page-content-main-md-margin-block-start` | `4em` | | this set | | +| `--denhaag-page-content-main-sm-margin-block-start` | `3.5rem` | | this set | | +| `--denhaag-page-header-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-page-header-index` | `2` | | this set | | +| `--denhaag-page-index-background-color` | `var(--denhaag-color-blue-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230c283f%22%2F%3E%3C%2Fsvg%3E) `#0c283f` | this set | | +| `--denhaag-page-index-list-margin-block-start` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-page-index-padding-block-end` | `var(--denhaag-space-block-xl)` | | this set | | +| `--denhaag-page-index-padding-block-start` | `var(--denhaag-space-block-xl)` | | this set | | +| `--denhaag-page-index-padding-inline-end` | `var(--denhaag-space-inline-xl)` | | this set | | +| `--denhaag-page-index-padding-inline-start` | `var(--denhaag-space-inline-xl)` | | this set | | +| `--denhaag-pagination-arrow-font-size` | `var(--denhaag-typography-scale-s-font-size)` | | this set | | +| `--denhaag-pagination-arrow-size` | `var(--denhaag-space-block-lg)` | | this set | | +| `--denhaag-pagination-border-radius` | `var(--denhaag-border-radius)` | | this set | | +| `--denhaag-pagination-button-background-color` | `transparent` | | this set | | +| `--denhaag-pagination-button-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-pagination-button-current-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-pagination-button-current-disabled-background-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-pagination-button-current-disabled-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--denhaag-pagination-button-current-font-weight` | `var(--denhaag-typography-weight-bold)` | | this set | | +| `--denhaag-pagination-button-disabled-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--denhaag-pagination-button-hover-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-pagination-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--denhaag-pagination-font-weight` | `var(--denhaag-typography-weight-regular)` | | this set | | +| `--denhaag-pagination-margin-inline` | `0.625rem` | | this set | | +| `--denhaag-pagination-size` | `var(--denhaag-space-block-2xl)` | | this set | | +| `--denhaag-posttypelabel-color` | `var(--denhaag-color-blue-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235eaced%22%2F%3E%3C%2Fsvg%3E) `#5eaced` | this set | | +| `--denhaag-posttypelabel-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--denhaag-posttypelabel-font-size` | `var(--denhaag-typography-scale-s-font-size)` | | this set | | +| `--denhaag-posttypelabel-font-weight` | `700` | | this set | | +| `--denhaag-posttypelabel-letter-spacing` | `1px` | | this set | | +| `--denhaag-posttypelabel-line-height` | `1.5` | | this set | | +| `--denhaag-posttypelabel-text-transform` | `uppercase` | | this set | | +| `--denhaag-process-steps-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--denhaag-process-steps-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--denhaag-process-steps-line-height` | `24px` | | this set | | +| `--denhaag-process-steps-step-collapse-icon-padding` | `4px` | | this set | | +| `--denhaag-process-steps-step-collapse-icon-size` | `16px` | | this set | | +| `--denhaag-process-steps-step-content-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-process-steps-step-content-margin` | `12px` | | this set | | +| `--denhaag-process-steps-step-header-align-items` | `center` | | this set | | +| `--denhaag-process-steps-step-heading-checked-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--denhaag-process-steps-step-heading-checked-font-weight` | `var(--denhaag-typography-weight-bold)` | | this set | | +| `--denhaag-process-steps-step-heading-checked-line-height` | `var(--denhaag-typography-scale-base-line-height)` | | this set | | +| `--denhaag-process-steps-step-heading-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-process-steps-step-heading-current-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-process-steps-step-heading-current-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--denhaag-process-steps-step-heading-current-font-weight` | `var(--denhaag-typography-weight-bold)` | | this set | | +| `--denhaag-process-steps-step-heading-current-line-height` | `var(--denhaag-typography-scale-base-line-height)` | | this set | | +| `--denhaag-process-steps-step-heading-error-color` | `var(--denhaag-color-red-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f95644%22%2F%3E%3C%2Fsvg%3E) `#f95644` | this set | | +| `--denhaag-process-steps-step-heading-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--denhaag-process-steps-step-heading-font-weight` | `var(--denhaag-typography-weight-bold)` | | this set | | +| `--denhaag-process-steps-step-heading-line-height` | `var(--denhaag-typography-scale-base-line-height)` | | this set | | +| `--denhaag-process-steps-step-heading-warning-color` | `var(--denhaag-color-orange-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffaa75%22%2F%3E%3C%2Fsvg%3E) `#ffaa75` | this set | | +| `--denhaag-process-steps-step-meta-date-font-size` | `20px` | | this set | | +| `--denhaag-process-steps-step-meta-font-size` | `16px` | | this set | | +| `--denhaag-process-steps-step-meta-nested-font-size` | `14px` | | this set | | +| `--denhaag-process-steps-step-meta-nested-margin-block-start` | `var(--denhaag-space-block-2xs)` | | this set | | +| `--denhaag-process-steps-step-padding-block-end` | `0` | | this set | | +| `--denhaag-process-steps-step-padding-block-start` | `0` | | this set | | +| `--denhaag-radio-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-radio-border-color` | `var(--utrecht-checkbox-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--denhaag-radio-border-width` | `var(--utrecht-checkbox-border-width)` | | this set | | +| `--denhaag-radio-checked-background-color` | `var(--utrecht-checkbox-checked-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--denhaag-radio-checked-border-color` | `var(--utrecht-checkbox-checked-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--denhaag-radio-checked-disabled-background-color` | `var(--denhaag-checkbox-checked-disabled-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-radio-checked-disabled-border-color` | `var(--denhaag-checkbox-checked-disabled-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-radio-checked-inner-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-radio-checked-inner-size` | `6px` | | this set | | +| `--denhaag-radio-checked-invalid-background-color` | `var(--denhaag-checkbox-checked-invalid-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed4734%22%2F%3E%3C%2Fsvg%3E) `#ed4734` | this set | | +| `--denhaag-radio-disabled-background-color` | `var(--utrecht-checkbox-disabled-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--denhaag-radio-disabled-border-color` | `var(--utrecht-checkbox-disabled-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--denhaag-radio-hover-border-color` | `var(--denhaag-checkbox-hover-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23acacac%22%2F%3E%3C%2Fsvg%3E) `#acacac` | this set | | +| `--denhaag-radio-hover-checked-background-color` | `var(--denhaag-checkbox-hover-checked-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | | +| `--denhaag-radio-hover-checked-border-color` | `var(--denhaag-checkbox-hover-checked-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | | +| `--denhaag-radio-hover-invalid-background-color` | `var(--denhaag-checkbox-hover-invalid-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f65b56%22%2F%3E%3C%2Fsvg%3E) `#f65b56` | this set | | +| `--denhaag-radio-hover-invalid-border-color` | `var(--denhaag-checkbox-hover-invalid-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f65b56%22%2F%3E%3C%2Fsvg%3E) `#f65b56` | this set | | +| `--denhaag-radio-invalid-border-color` | `var(--utrecht-checkbox-invalid-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed4734%22%2F%3E%3C%2Fsvg%3E) `#ed4734` | this set | | +| `--denhaag-radio-size` | `var(--utrecht-checkbox-size)` | | this set | | +| `--denhaag-responsive-content-2xs-padding` | `0.75rem` | | this set | | +| `--denhaag-responsive-content-lg-max-width` | `67.5rem` | | this set | | +| `--denhaag-responsive-content-md-max-width` | `56.5rem` | | this set | | +| `--denhaag-responsive-content-sm-max-width` | `40.5rem` | | this set | | +| `--denhaag-responsive-content-xs-padding` | `1.5rem` | | this set | | +| `--denhaag-rich-text-acquaintance-margin-block-end` | `var(--denhaag-space-block-xl)` | | this set | | +| `--denhaag-rich-text-best-friend-margin-block-end` | `var(--denhaag-space-block-xs)` | | this set | | +| `--denhaag-rich-text-confidant-margin-block-end` | `0px` | | this set | | +| `--denhaag-rich-text-friend-margin-block-end` | `var(--denhaag-space-block-md)` | | this set | | +| `--denhaag-rich-text-stranger-margin-block-end` | `var(--denhaag-space-block-2xl)` | | this set | | +| `--denhaag-select-box-sizing` | `border-box` | | this set | | +| `--denhaag-select-focus-border-width` | `var(--utrecht-form-control-focus-border-width)` | | this set | | +| `--denhaag-select-hover-background-color` | `var(--utrecht-form-control-hover-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23201c16%22%2F%3E%3C%2Fsvg%3E) `#201c16` | this set | | +| `--denhaag-select-hover-border-color` | `var(--utrecht-form-control-hover-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--denhaag-select-hover-border-width` | `var(--utrecht-form-control-hover-border-width)` | | this set | | +| `--denhaag-select-hover-color` | `var(--utrecht-form-control-hover-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--denhaag-select-max-block-size` | `3rem` | | this set | | +| `--denhaag-sheet-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-sheet-close-button-float` | `right` | | this set | | +| `--denhaag-sheet-container-margin-block-end` | `4rem` | | this set | | +| `--denhaag-sheet-container-menu-display` | `grid` | | this set | | +| `--denhaag-sheet-desktop-min-height` | `15rem` | | this set | | +| `--denhaag-sheet-desktop-padding-block-start` | `24px` | | this set | | +| `--denhaag-sheet-desktop-top` | `7.5rem` | | this set | | +| `--denhaag-sheet-dialog-backdrop-top` | `0` | | this set | | +| `--denhaag-sheet-dialog-border` | `none` | | this set | | +| `--denhaag-sheet-dialog-margin-block-start` | `0` | | this set | | +| `--denhaag-sheet-dialog-max-height` | `fit-content` | | this set | | +| `--denhaag-sheet-dialog-max-width` | `100%` | | this set | | +| `--denhaag-sheet-dialog-overflow-y` | `hidden` | | this set | | +| `--denhaag-sheet-dialog-padding-block-end` | `0` | | this set | | +| `--denhaag-sheet-dialog-padding-block-start` | `0` | | this set | | +| `--denhaag-sheet-dialog-padding-inline-end` | `0` | | this set | | +| `--denhaag-sheet-dialog-padding-inline-start` | `0` | | this set | | +| `--denhaag-sheet-dialog-top` | `0` | | this set | | +| `--denhaag-sheet-left` | `flex0` | | this set | | +| `--denhaag-sheet-margin-block-start` | `var(--denhaag-header-border-bottom-width)` | | this set | | +| `--denhaag-sheet-min-height` | `100vh` | | this set | | +| `--denhaag-sheet-overflow-x` | `hidden` | | this set | | +| `--denhaag-sheet-overlay-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22rgb%280%200%200%20%2F%2050%25%29%22%2F%3E%3C%2Fsvg%3E) `rgb(0 0 0 / 50%)` | | this set | | +| `--denhaag-sheet-overlay-desktop-top` | `7.5rem` | | this set | | +| `--denhaag-sheet-overlay-height` | `100vh` | | this set | | +| `--denhaag-sheet-overlay-left` | `0` | | this set | | +| `--denhaag-sheet-overlay-position` | `fixed` | | this set | | +| `--denhaag-sheet-overlay-tablet-top` | `6rem` | | this set | | +| `--denhaag-sheet-overlay-top` | `4.5rem` | | this set | | +| `--denhaag-sheet-overlay-width` | `100vw` | | this set | | +| `--denhaag-sheet-overlay-z-index` | `1` | | this set | | +| `--denhaag-sheet-position` | `absolute` | | this set | | +| `--denhaag-sheet-title-font-size` | `18px` | | this set | | +| `--denhaag-sheet-title-font-weight` | `var(--denhaag-typography-weight-bold)` | | this set | | +| `--denhaag-sheet-title-margin-block-end` | `16px` | | this set | | +| `--denhaag-sheet-top` | `4.5rem` | | this set | | +| `--denhaag-sheet-width` | `100%` | | this set | | +| `--denhaag-sheet-z-index` | `3` | | this set | | +| `--denhaag-side-navigation-display` | `flex` | | this set | | +| `--denhaag-side-navigation-flex-direction` | `column` | | this set | | +| `--denhaag-side-navigation-item-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--denhaag-side-navigation-item-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--denhaag-side-navigation-item-font-weight` | `var(--denhaag-typography-weight-regular)` | | this set | | +| `--denhaag-side-navigation-item-height` | `48px` | | this set | | +| `--denhaag-side-navigation-item-line-height` | `1.5` | | this set | | +| `--denhaag-side-navigation-item-margin-block-end` | `0` | | this set | | +| `--denhaag-side-navigation-item-margin-block-start` | `0` | | this set | | +| `--denhaag-side-navigation-item-margin-inline-end` | `0` | | this set | | +| `--denhaag-side-navigation-item-margin-inline-start` | `0` | | this set | | +| `--denhaag-side-navigation-link-active-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-side-navigation-link-active-font-weight` | `var(--denhaag-typography-weight-bold)` | | this set | | +| `--denhaag-side-navigation-link-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-side-navigation-link-hover-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-side-navigation-link-label-gap` | `var(--denhaag-space-inline-xs)` | | this set | | +| `--denhaag-side-navigation-link-padding-block-end` | `12px` | | this set | | +| `--denhaag-side-navigation-link-padding-block-start` | `12px` | | this set | | +| `--denhaag-side-navigation-min-width` | `14.5rem` | | this set | | +| `--denhaag-side-navigation-mobile-display` | `none` | | this set | | +| `--denhaag-side-navigation-row-gap` | `var(--denhaag-space-block-xl)` | | this set | | +| `--denhaag-sidenav-display` | `flex` | | this set | | +| `--denhaag-sidenav-flex-direction` | `column` | | this set | | +| `--denhaag-sidenav-item-font-family` | `var(--utrecht-document-font-family)` | | this set | | +| `--denhaag-sidenav-item-font-size` | `16px` | | this set | | +| `--denhaag-sidenav-item-font-weight` | `400` | | this set | | +| `--denhaag-sidenav-item-height` | `48px` | | this set | | +| `--denhaag-sidenav-item-line-height` | `1.5` | | this set | | +| `--denhaag-sidenav-item-margin-block-end` | `0` | | this set | | +| `--denhaag-sidenav-item-margin-block-start` | `0` | | this set | | +| `--denhaag-sidenav-item-margin-inline-end` | `0` | | this set | | +| `--denhaag-sidenav-item-margin-inline-start` | `0` | | this set | | +| `--denhaag-sidenav-link-active-color` | `var(--tilburg-interaction-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-sidenav-link-active-font-weight` | `700` | | this set | | +| `--denhaag-sidenav-link-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232e2e2e%22%2F%3E%3C%2Fsvg%3E) `#2e2e2e` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--denhaag-sidenav-link-hover-color` | `var(--tilburg-interaction-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-sidenav-link-label-gap` | `0.5rem` | | this set | | +| `--denhaag-sidenav-link-padding-block-end` | `5px` | | this set | | +| `--denhaag-sidenav-link-padding-block-start` | `5px` | | this set | | +| `--denhaag-sidenav-min-width` | `14.5rem` | | this set | | +| `--denhaag-sidenav-mobile-display` | `none` | | this set | | +| `--denhaag-sidenav-row-gap` | `5px` | | this set | | +| `--denhaag-size-2xl` | `160px` | | this set | | +| `--denhaag-size-2xs` | `16px` | | this set | | +| `--denhaag-size-3xs` | `8px` | | this set | | +| `--denhaag-size-4xs` | `4px` | | this set | | +| `--denhaag-size-5xs` | `2px` | | this set | | +| `--denhaag-size-icon-2xl` | `32px` | | this set | | +| `--denhaag-size-icon-3xl` | `40px` | | this set | | +| `--denhaag-size-icon-4xl` | `48px` | | this set | | +| `--denhaag-size-icon-lg` | `24px` | | this set | | +| `--denhaag-size-icon-md` | `24px` | | this set | | +| `--denhaag-size-icon-sm` | `20px` | | this set | | +| `--denhaag-size-icon-xl` | `24px` | | this set | | +| `--denhaag-size-icon-xs` | `16px` | | this set | | +| `--denhaag-size-lg` | `64px` | | this set | | +| `--denhaag-size-md` | `48px` | | this set | | +| `--denhaag-size-sm` | `32px` | | this set | | +| `--denhaag-size-xl` | `96px` | | this set | | +| `--denhaag-size-xs` | `24px` | | this set | | +| `--denhaag-space-block-2xl` | `2rem` | | this set | | +| `--denhaag-space-block-2xs` | `.25rem` | | this set | | +| `--denhaag-space-block-3xl` | `2.5rem` | | this set | | +| `--denhaag-space-block-3xs` | `.125rem` | | this set | | +| `--denhaag-space-block-4xl` | `3rem` | | this set | | +| `--denhaag-space-block-5xl` | `4rem` | | this set | | +| `--denhaag-space-block-lg` | `1.25rem` | | this set | | +| `--denhaag-space-block-md` | `1rem` | | this set | | +| `--denhaag-space-block-sm` | `.75rem` | | this set | | +| `--denhaag-space-block-xl` | `1.5rem` | | this set | | +| `--denhaag-space-block-xs` | `.5rem` | | this set | | +| `--denhaag-space-inline-2xl` | `2rem` | | this set | | +| `--denhaag-space-inline-2xs` | `.25rem` | | this set | | +| `--denhaag-space-inline-3xl` | `2.5rem` | | this set | | +| `--denhaag-space-inline-3xs` | `.125rem` | | this set | | +| `--denhaag-space-inline-4xl` | `3rem` | | this set | | +| `--denhaag-space-inline-5xl` | `4rem` | | this set | | +| `--denhaag-space-inline-lg` | `1.25rem` | | this set | | +| `--denhaag-space-inline-md` | `1rem` | | this set | | +| `--denhaag-space-inline-sm` | `.75rem` | | this set | | +| `--denhaag-space-inline-xl` | `1.5rem` | | this set | | +| `--denhaag-space-inline-xs` | `.5rem` | | this set | | +| `--denhaag-step-marker-border-width` | `2px` | | this set | | +| `--denhaag-step-marker-checked-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-step-marker-checked-border-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--denhaag-step-marker-checked-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--denhaag-step-marker-connector-checked-outline-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--denhaag-step-marker-connector-default-outline-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-step-marker-connector-error-outline-color` | `var(--denhaag-color-red-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed4734%22%2F%3E%3C%2Fsvg%3E) `#ed4734` | this set | | +| `--denhaag-step-marker-connector-not-checked-outline-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-step-marker-connector-outline-width` | `1px` | | this set | | +| `--denhaag-step-marker-connector-warning-outline-color` | `var(--denhaag-color-orange-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f37526%22%2F%3E%3C%2Fsvg%3E) `#f37526` | this set | | +| `--denhaag-step-marker-current-background-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--denhaag-step-marker-current-border-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--denhaag-step-marker-current-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-step-marker-current-nested-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--denhaag-step-marker-default-background-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-step-marker-default-border-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-step-marker-default-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-step-marker-default-nested-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-step-marker-disabled-background-color` | `var(--denhaag-color-grey-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--denhaag-step-marker-disabled-border-color` | `var(--denhaag-color-grey-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--denhaag-step-marker-disabled-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23acacac%22%2F%3E%3C%2Fsvg%3E) `#acacac` | this set | | +| `--denhaag-step-marker-error-background-color` | `var(--denhaag-color-red-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed4734%22%2F%3E%3C%2Fsvg%3E) `#ed4734` | this set | | +| `--denhaag-step-marker-error-border-color` | `var(--denhaag-color-red-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed4734%22%2F%3E%3C%2Fsvg%3E) `#ed4734` | this set | | +| `--denhaag-step-marker-error-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-step-marker-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--denhaag-step-marker-font-size` | `var(--denhaag-typography-scale-s-font-size)` | | this set | | +| `--denhaag-step-marker-font-weight` | `400` | | this set | | +| `--denhaag-step-marker-icon-size` | `20px` | | this set | | +| `--denhaag-step-marker-margin` | `0` | | this set | | +| `--denhaag-step-marker-nested-icon-size` | `10px` | | this set | | +| `--denhaag-step-marker-nested-size` | `16px` | | this set | | +| `--denhaag-step-marker-not-checked-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-step-marker-not-checked-border-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-step-marker-not-checked-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23acacac%22%2F%3E%3C%2Fsvg%3E) `#acacac` | this set | | +| `--denhaag-step-marker-padding` | `12px` | | this set | | +| `--denhaag-step-marker-size` | `32px` | | this set | | +| `--denhaag-step-marker-warning-background-color` | `var(--denhaag-color-orange-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f37526%22%2F%3E%3C%2Fsvg%3E) `#f37526` | this set | | +| `--denhaag-step-marker-warning-border-color` | `var(--denhaag-color-orange-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f37526%22%2F%3E%3C%2Fsvg%3E) `#f37526` | this set | | +| `--denhaag-step-marker-warning-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-step-marker-warning-nested-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-step-marker-warning-nested-border-color` | `var(--denhaag-color-orange-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f37526%22%2F%3E%3C%2Fsvg%3E) `#f37526` | this set | | +| `--denhaag-table-border-spacing` | `0` | | this set | | +| `--denhaag-table-cell-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-table-cell-font-weight` | `var(--denhaag-typography-weight-regular)` | | this set | | +| `--denhaag-table-cell-gap` | `var(--denhaag-space-block-2xs)` | | this set | | +| `--denhaag-table-cell-min-width` | `7.5rem` | | this set | | +| `--denhaag-table-cell-outline-color` | `var(--denhaag-focus-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f8da72%22%2F%3E%3C%2Fsvg%3E) `#f8da72` | this set | | +| `--denhaag-table-cell-outline-style` | `var(--denhaag-focus-border-style)` | | this set | | +| `--denhaag-table-cell-outline-width` | `var(--denhaag-focus-border-width)` | | this set | | +| `--denhaag-table-cell-sm-padding-block-end` | `var(--denhaag-space-block-2xs)` | | this set | | +| `--denhaag-table-cell-sm-padding-block-start` | `var(--denhaag-space-block-2xs)` | | this set | | +| `--denhaag-table-cell-sm-padding-inline-end` | `var(--denhaag-space-block-xs)` | | this set | | +| `--denhaag-table-cell-sm-padding-inline-start` | `var(--denhaag-space-block-xs)` | | this set | | +| `--denhaag-table-container-overflow-x` | `auto` | | this set | | +| `--denhaag-table-container-shadow-background` | `linear-gradient(270deg, rgba(0, 0, 0, 0.1) 0%, rgba(255, 255, 255, 0) 76.92%)` | | this set | | +| `--denhaag-table-container-shadow-bottom` | `0` | | this set | | +| `--denhaag-table-container-shadow-group-bottom` | `0` | | this set | | +| `--denhaag-table-container-shadow-group-display` | `contents` | | this set | | +| `--denhaag-table-container-shadow-group-position` | `absolute` | | this set | | +| `--denhaag-table-container-shadow-group-width` | `inherit` | | this set | | +| `--denhaag-table-container-shadow-height` | `inherit` | | this set | | +| `--denhaag-table-container-shadow-left-left` | `0` | | this set | | +| `--denhaag-table-container-shadow-left-transform` | `matrix(-1, 0, 0, 1, 0, 0)` | | this set | | +| `--denhaag-table-container-shadow-position` | `absolute` | | this set | | +| `--denhaag-table-container-shadow-right-right` | `0` | | this set | | +| `--denhaag-table-container-shadow-width` | `var(--denhaag-space-inline-5xl)` | | this set | | +| `--denhaag-table-heading-color` | `var(--denhaag-color-grey-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--denhaag-table-heading-min-width` | `7.5rem` | | this set | | +| `--denhaag-table-max-width` | `100%` | | this set | | +| `--denhaag-table-row-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-table-row-hover-background-color` | `var(--denhaag-color-warmgrey-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23201c16%22%2F%3E%3C%2Fsvg%3E) `#201c16` | this set | | +| `--denhaag-table-row-padding-block-end` | `.75rem` | | this set | | +| `--denhaag-table-row-padding-block-start` | `.75rem` | | this set | | +| `--denhaag-table-scroll-buttons-flex-direction` | `initial` | | this set | | +| `--denhaag-table-scroll-buttons-justify-content` | `flex-end` | | this set | | +| `--denhaag-table-width` | `100%` | | this set | | +| `--denhaag-table-wrapper-position` | `relative` | | this set | | +| `--denhaag-tabs-border-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--denhaag-tabs-border-style` | `solid` | | this set | | +| `--denhaag-tabs-border-width` | `2px` | | this set | | +| `--denhaag-tabs-tab-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--denhaag-tabs-tab-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-tabs-tab-cursor` | `pointer` | | this set | | +| `--denhaag-tabs-tab-focus-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-tabs-tab-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--denhaag-tabs-tab-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--denhaag-tabs-tab-font-weight` | `var(--denhaag-typography-weight-regular)` | | this set | | +| `--denhaag-tabs-tab-hover-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-tabs-tab-indicator-border-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--denhaag-tabs-tab-indicator-border-width` | `2px` | | this set | | +| `--denhaag-tabs-tab-indicator-bottom` | `0` | | this set | | +| `--denhaag-tabs-tab-line-height` | `1.5` | | this set | | +| `--denhaag-tabs-tab-outline` | `0` | | this set | | +| `--denhaag-tabs-tab-padding-block-end` | `var(--denhaag-space-block-xs)` | | this set | | +| `--denhaag-tabs-tab-padding-block-start` | `var(--denhaag-space-block-xs)` | | this set | | +| `--denhaag-tabs-tab-padding-inline-end` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-tabs-tab-padding-inline-start` | `var(--denhaag-space-inline-md)` | | this set | | +| `--denhaag-tabs-tab-panel-outline` | `0` | | this set | | +| `--denhaag-tabs-tab-panel-padding-block-end` | `0` | | this set | | +| `--denhaag-tabs-tab-panel-padding-block-start` | `0` | | this set | | +| `--denhaag-tabs-tab-panel-padding-inline-end` | `0` | | this set | | +| `--denhaag-tabs-tab-panel-padding-inline-start` | `0` | | this set | | +| `--denhaag-tabs-tab-selected-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-tabs-tab-selected-font-weight` | `var(--denhaag-typography-weight-bold)` | | this set | | +| `--denhaag-tabs-width` | `100%` | | this set | | +| `--denhaag-timeline-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--denhaag-timeline-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--denhaag-timeline-line-height` | `24px` | | this set | | +| `--denhaag-timeline-step-collapse-icon-padding` | `4px` | | this set | | +| `--denhaag-timeline-step-collapse-icon-size` | `16px` | | this set | | +| `--denhaag-timeline-step-content-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-timeline-step-content-margin` | `12px` | | this set | | +| `--denhaag-timeline-step-icon-active-color` | `var(--denhaag-color-blue-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235eaced%22%2F%3E%3C%2Fsvg%3E) `#5eaced` | this set | | +| `--denhaag-timeline-step-icon-color` | `var(--denhaag-color-grey-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--denhaag-timeline-step-icon-completed-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--denhaag-timeline-step-icon-disabled-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--denhaag-timeline-step-icon-margin` | `auto` | | this set | | +| `--denhaag-timeline-step-icon-padding` | `12px` | | this set | | +| `--denhaag-timeline-step-icon-size` | `20px` | | this set | | +| `--denhaag-timeline-step-icon-text-active-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--denhaag-timeline-step-icon-text-font-size` | `var(--denhaag-typography-scale-s-font-size)` | | this set | | +| `--denhaag-timeline-step-label-active-color` | `var(--denhaag-color-blue-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235eaced%22%2F%3E%3C%2Fsvg%3E) `#5eaced` | this set | | +| `--denhaag-timeline-step-label-active-font-weight` | `700` | | this set | | +| `--denhaag-timeline-step-label-completed-hover-color` | `var(--denhaag-color-blue-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235eaced%22%2F%3E%3C%2Fsvg%3E) `#5eaced` | this set | | +| `--denhaag-timeline-step-label-disabled-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--denhaag-timeline-step-outline` | `var(--denhaag-focus-border)` | | this set | | +| `--denhaag-timeline-step-outline-offset` | `2px` | | this set | | +| `--denhaag-timeline-step-padding` | `12px` | | this set | | +| `--denhaag-typography-mobile-scale-2xl-font-size` | `1.75rem` | | this set | | +| `--denhaag-typography-mobile-scale-3xl-font-size` | `2.25rem` | | this set | | +| `--denhaag-typography-mobile-scale-xl-font-size` | `1.4375rem` | | this set | | +| `--denhaag-typography-sans-serif-alternate-font-family` | `"TheMix", "Fira Sans", sans-serif` | | this set | | +| `--denhaag-typography-sans-serif-font-family` | `"TheSans", "Fira Sans", sans-serif` | | this set | | +| `--denhaag-typography-scale-2xl-font-size` | `2rem` | | this set | | +| `--denhaag-typography-scale-2xl-line-height` | `1.3` | | this set | | +| `--denhaag-typography-scale-3xl-font-size` | `3rem` | | this set | | +| `--denhaag-typography-scale-3xl-line-height` | `1.3` | | this set | | +| `--denhaag-typography-scale-base-font-size` | `1.125rem` | | this set | | +| `--denhaag-typography-scale-base-line-height` | `1.5` | | this set | | +| `--denhaag-typography-scale-lg-font-size` | `1.25rem` | | this set | | +| `--denhaag-typography-scale-lg-line-height` | `1.3` | | this set | | +| `--denhaag-typography-scale-s-font-size` | `0.875rem` | | this set | | +| `--denhaag-typography-scale-s-line-height` | `1.3` | | this set | | +| `--denhaag-typography-scale-xl-font-size` | `1.5rem` | | this set | | +| `--denhaag-typography-scale-xl-line-height` | `1.3` | | this set | | +| `--denhaag-typography-scale-xs-font-size` | `0.625rem` | | this set | | +| `--denhaag-typography-weight-bold` | `700` | | this set | | +| `--denhaag-typography-weight-medium` | `500` | | this set | | +| `--denhaag-typography-weight-regular` | `400` | | this set | | +| `--denhaag-typography-weight-semibold` | `600` | | this set | | +| `--denhaag-unordered-list-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--denhaag-unordered-list-lead-margin-block-start` | `var(--denhaag-space-block-2xl)` | | this set | | +| `--denhaag-unordered-list-list-item-font-weight` | `var(--denhaag-typography-weight-regular)` | | this set | | +| `--denhaag-unordered-list-lower-alpha-list-style-type` | `lower-alpha` | | this set | | +| `--denhaag-unordered-list-marker-font-size` | `1rem` | | this set | | +| `--denhaag-unordered-list-paragraph-margin-block-start` | `var(--denhaag-space-block-md)` | | this set | | +| `--nl-data-badge-background-color` | `var(--denhaag-color-grey-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--nl-data-badge-border-radius` | `var(--denhaag-border-radius)` | | this set | | +| `--nl-data-badge-border-width` | `0` | | this set | | +| `--nl-data-badge-color` | `var(--denhaag-color-grey-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--nl-data-badge-error-background-color` | `var(--denhaag-color-red-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23470904%22%2F%3E%3C%2Fsvg%3E) `#470904` | this set | | +| `--nl-data-badge-error-color` | `var(--denhaag-color-red-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ff615c%22%2F%3E%3C%2Fsvg%3E) `#ff615c` | this set | | +| `--nl-data-badge-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--nl-data-badge-font-size` | `var(--denhaag-typography-scale-s-font-size)` | | this set | | +| `--nl-data-badge-font-weight` | `var(--denhaag-typography-weight-semibold)` | | this set | | +| `--nl-data-badge-line-height` | `var(--denhaag-typography-scale-base-line-height)` | | this set | | +| `--nl-data-badge-neutral-background-color` | `var(--denhaag-color-blue-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230c283f%22%2F%3E%3C%2Fsvg%3E) `#0c283f` | this set | | +| `--nl-data-badge-neutral-color` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237ec0f6%22%2F%3E%3C%2Fsvg%3E) `#7ec0f6` | this set | | +| `--nl-data-badge-padding-block` | `2px` | | this set | | +| `--nl-data-badge-padding-inline` | `8px` | | this set | | +| `--nl-data-badge-success-background-color` | `var(--denhaag-color-green-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23243c24%22%2F%3E%3C%2Fsvg%3E) `#243c24` | this set | | +| `--nl-data-badge-success-color` | `var(--denhaag-color-green-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2393e1aa%22%2F%3E%3C%2Fsvg%3E) `#93e1aa` | this set | | +| `--nl-data-badge-warning-background-color` | `var(--denhaag-color-orange-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23683e05%22%2F%3E%3C%2Fsvg%3E) `#683e05` | this set | | +| `--nl-data-badge-warning-color` | `var(--denhaag-color-orange-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffaa75%22%2F%3E%3C%2Fsvg%3E) `#ffaa75` | this set | | +| `--nl-heading-level-1-font-family` | `var(--denhaag-typography-sans-serif-alternate-font-family)` | | this set | | +| `--nl-heading-level-1-font-size` | `var(--denhaag-typography-scale-3xl-font-size)` | | this set | | +| `--nl-heading-level-1-line-height` | `var(--denhaag-typography-scale-3xl-line-height)` | | this set | | +| `--nl-heading-level-1-margin-block-end` | `0` | | this set | | +| `--nl-heading-level-1-margin-block-start` | `0` | | this set | | +| `--nl-heading-level-2-font-family` | `var(--denhaag-typography-sans-serif-alternate-font-family)` | | this set | | +| `--nl-heading-level-2-font-size` | `var(--denhaag-typography-scale-2xl-font-size)` | | this set | | +| `--nl-heading-level-2-line-height` | `var(--denhaag-typography-scale-2xl-line-height)` | | this set | | +| `--nl-heading-level-2-margin-block-end` | `0` | | this set | | +| `--nl-heading-level-2-margin-block-start` | `0` | | this set | | +| `--nl-heading-level-3-font-family` | `var(--denhaag-typography-sans-serif-alternate-font-family)` | | this set | | +| `--nl-heading-level-3-font-size` | `var(--denhaag-typography-scale-xl-font-size)` | | this set | | +| `--nl-heading-level-3-line-height` | `var(--denhaag-typography-scale-xl-line-height)` | | this set | | +| `--nl-heading-level-3-margin-block-end` | `0` | | this set | | +| `--nl-heading-level-3-margin-block-start` | `0` | | this set | | +| `--nl-heading-level-4-font-family` | `var(--denhaag-typography-sans-serif-alternate-font-family)` | | this set | | +| `--nl-heading-level-4-font-size` | `var(--denhaag-typography-scale-lg-font-size)` | | this set | | +| `--nl-heading-level-4-line-height` | `var(--denhaag-typography-scale-lg-line-height)` | | this set | | +| `--nl-heading-level-4-margin-block-end` | `0` | | this set | | +| `--nl-heading-level-4-margin-block-start` | `0` | | this set | | +| `--nl-heading-level-5-font-family` | `var(--denhaag-typography-sans-serif-alternate-font-family)` | | this set | | +| `--nl-heading-level-5-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--nl-heading-level-5-line-height` | `var(--denhaag-typography-scale-base-line-height)` | | this set | | +| `--nl-heading-level-5-margin-block-end` | `0` | | this set | | +| `--nl-heading-level-5-margin-block-start` | `0` | | this set | | +| `--nl-heading-level-6-font-family` | `var(--denhaag-typography-sans-serif-alternate-font-family)` | | this set | | +| `--nl-heading-level-6-font-size` | `var(--denhaag-typography-scale-s-font-size)` | | this set | | +| `--nl-heading-level-6-line-height` | `var(--denhaag-typography-scale-s-line-height)` | | this set | | +| `--nl-heading-level-6-margin-block-end` | `0` | | this set | | +| `--nl-heading-level-6-margin-block-start` | `0` | | this set | | +| `--nl-link-active-text-decoration-line` | `underline` | | this set | | +| `--nl-link-color` | `var(--denhaag-color-blue-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235eaced%22%2F%3E%3C%2Fsvg%3E) `#5eaced` | this set | | +| `--nl-link-disabled-color` | `var(--denhaag-color-grey-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--nl-link-focus-visible-color` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237ec0f6%22%2F%3E%3C%2Fsvg%3E) `#7ec0f6` | this set | | +| `--nl-link-focus-visible-text-decoration-line` | `underline` | | this set | | +| `--nl-link-hover-color` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237ec0f6%22%2F%3E%3C%2Fsvg%3E) `#7ec0f6` | this set | | +| `--nl-link-hover-text-decoration-line` | `underline` | | this set | | +| `--nl-link-text-decoration-line` | `underline` | | this set | | +| `--nl-number-badge-background-color` | `var(--denhaag-color-blue-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230c283f%22%2F%3E%3C%2Fsvg%3E) `#0c283f` | this set | | +| `--nl-number-badge-border-radius` | `50px` | | this set | | +| `--nl-number-badge-border-width` | `0` | | this set | | +| `--nl-number-badge-color` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237ec0f6%22%2F%3E%3C%2Fsvg%3E) `#7ec0f6` | this set | | +| `--nl-number-badge-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--nl-number-badge-font-size` | `var(--denhaag-typography-scale-s-font-size)` | | this set | | +| `--nl-number-badge-font-weight` | `var(--denhaag-typography-weight-bold)` | | this set | | +| `--nl-number-badge-padding-block` | `5px` | | this set | | +| `--nl-number-badge-padding-inline` | `6px` | | this set | | +| `--nl-paragraph-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--nl-paragraph-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--nl-paragraph-font-weight` | `var(--denhaag-typography-weight-regular)` | | this set | | +| `--nl-paragraph-lead-font-size` | `var(--denhaag-typography-scale-lg-font-size)` | | this set | | +| `--nl-paragraph-lead-line-height` | `var(--denhaag-typography-scale-lg-line-height)` | | this set | | +| `--nl-paragraph-line-height` | `var(--denhaag-typography-scale-base-line-height)` | | this set | | +| `--nl-paragraph-margin-block-end` | `0` | | this set | | +| `--nl-paragraph-margin-block-start` | `0` | | this set | | | `--nldesign-logo-url` | `url('../../img/logos/denhaag.svg')` | | this set | | +| `--of-alert-error-bg` | `var(--denhaag-color-red-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23470904%22%2F%3E%3C%2Fsvg%3E) `#470904` | this set | | +| `--of-alert-info-bg` | `var(--denhaag-color-blue-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230c283f%22%2F%3E%3C%2Fsvg%3E) `#0c283f` | this set | | +| `--of-alert-warning-bg` | `var(--denhaag-color-orange-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23683e05%22%2F%3E%3C%2Fsvg%3E) `#683e05` | this set | | +| `--of-button-anchor-bg` | `transparent` | | this set | | +| `--of-button-anchor-color-border` | `transparent` | | this set | | +| `--of-button-anchor-fg` | `var(--denhaag-link-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235ba6e4%22%2F%3E%3C%2Fsvg%3E) `#5ba6e4` | this set | | +| `--of-button-primary-active-bg` | `var(--denhaag-color-green-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | | +| `--of-button-primary-active-color-border` | `var(--denhaag-color-ocher-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f8da72%22%2F%3E%3C%2Fsvg%3E) `#f8da72` | this set | | +| `--of-button-primary-active-fg` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--of-button-primary-bg` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--of-button-primary-fg` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--of-button-primary-hover-bg` | `var(--denhaag-color-green-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | | +| `--of-button-primary-hover-color-border` | `var(--denhaag-color-ocher-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f8da72%22%2F%3E%3C%2Fsvg%3E) `#f8da72` | this set | | +| `--of-checkbox-bg` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--of-color-bg` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--of-color-border` | `var(--denhaag-color-grey-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--of-color-danger` | `var(--denhaag-color-red-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f65b56%22%2F%3E%3C%2Fsvg%3E) `#f65b56` | this set | | +| `--of-color-fg` | `var(--denhaag-color-black)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--of-color-fg-muted` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23acacac%22%2F%3E%3C%2Fsvg%3E) `#acacac` | this set | | +| `--of-color-info` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2373b7ee%22%2F%3E%3C%2Fsvg%3E) `#73b7ee` | this set | | +| `--of-color-primary` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--of-color-secondary` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--of-color-success` | `var(--denhaag-color-green-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | | +| `--of-color-warning` | `var(--denhaag-color-orange-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f37526%22%2F%3E%3C%2Fsvg%3E) `#f37526` | this set | | +| `--of-field-border-color` | `var(--denhaag-color-grey-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--of-helptext-bg` | `var(--denhaag-color-blue-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230c283f%22%2F%3E%3C%2Fsvg%3E) `#0c283f` | this set | | +| `--of-layout-background` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--of-layout-bg` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--of-link-color` | `var(--denhaag-link-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235eaced%22%2F%3E%3C%2Fsvg%3E) `#5eaced` | this set | | +| `--of-page-footer-bg` | `var(--denhaag-color-grey-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23c4c4c4%22%2F%3E%3C%2Fsvg%3E) `#c4c4c4` | this set | | +| `--of-page-header-bg` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--tilburg-border-radius-lg` | `16px` | | this set | | +| `--tilburg-border-radius-md` | `8px` | | this set | | +| `--tilburg-border-radius-round` | `999px` | | this set | | +| `--tilburg-border-radius-sm` | `4px` | | this set | | +| `--tilburg-border-width-lg` | `4px` | | this set | | +| `--tilburg-border-width-md` | `2px` | | this set | | +| `--tilburg-border-width-sm` | `1px` | | this set | | +| `--tilburg-box-shadow-lg` | `0 1ratpx rgba(0, 0, 0, 0.1)` | | this set | | +| `--tilburg-box-shadow-md` | `0 4px 12px rgba(0, 0, 0, 0.1)` | | this set | | +| `--tilburg-box-shadow-sm` | `[object Object]` | | this set | | +| `--tilburg-color-black` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23000000%22%2F%3E%3C%2Fsvg%3E) `#000000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--tilburg-color-black-txt` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232e2e2e%22%2F%3E%3C%2Fsvg%3E) `#2e2e2e` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23c4c4c4%22%2F%3E%3C%2Fsvg%3E) `#c4c4c4` | this set | | +| `--tilburg-color-blue-100` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23dbecfa%22%2F%3E%3C%2Fsvg%3E) `#dbecfa` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230c283f%22%2F%3E%3C%2Fsvg%3E) `#0c283f` | this set | | +| `--tilburg-color-blue-200` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23abcced%22%2F%3E%3C%2Fsvg%3E) `#abcced` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231a3f64%22%2F%3E%3C%2Fsvg%3E) `#1a3f64` | this set | | +| `--tilburg-color-blue-300` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231260a1%22%2F%3E%3C%2Fsvg%3E) `#1260a1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235ba6e4%22%2F%3E%3C%2Fsvg%3E) `#5ba6e4` | this set | | +| `--tilburg-color-blue-400` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23094b81%22%2F%3E%3C%2Fsvg%3E) `#094b81` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2373b7ee%22%2F%3E%3C%2Fsvg%3E) `#73b7ee` | this set | | +| `--tilburg-color-blue-500` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23032d4f%22%2F%3E%3C%2Fsvg%3E) `#032d4f` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239acdf6%22%2F%3E%3C%2Fsvg%3E) `#9acdf6` | this set | | +| `--tilburg-color-code-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f2f2f2%22%2F%3E%3C%2Fsvg%3E) `#f2f2f2` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--tilburg-color-dark-alpha-100` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230000001a%22%2F%3E%3C%2Fsvg%3E) `#0000001a` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb1a%22%2F%3E%3C%2Fsvg%3E) `#ebebeb1a` | this set | | +| `--tilburg-color-dark-alpha-50` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230000000d%22%2F%3E%3C%2Fsvg%3E) `#0000000d` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb0d%22%2F%3E%3C%2Fsvg%3E) `#ebebeb0d` | this set | | +| `--tilburg-color-extra-limegreen` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238bc63f%22%2F%3E%3C%2Fsvg%3E) `#8bc63f` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2385ba40%22%2F%3E%3C%2Fsvg%3E) `#85ba40` | this set | | +| `--tilburg-color-extra-purple` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23513090%22%2F%3E%3C%2Fsvg%3E) `#513090` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238c6cc7%22%2F%3E%3C%2Fsvg%3E) `#8c6cc7` | this set | | +| `--tilburg-color-extra-yellow` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f8d62a%22%2F%3E%3C%2Fsvg%3E) `#f8d62a` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d0b012%22%2F%3E%3C%2Fsvg%3E) `#d0b012` | this set | | +| `--tilburg-color-gray-100` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f2f2f2%22%2F%3E%3C%2Fsvg%3E) `#f2f2f2` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--tilburg-color-gray-200` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f2f2f2%22%2F%3E%3C%2Fsvg%3E) `#f2f2f2` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--tilburg-color-gray-300` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--tilburg-color-gray-400` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--tilburg-color-gray-50` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f9f8f6%22%2F%3E%3C%2Fsvg%3E) `#f9f8f6` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23201c16%22%2F%3E%3C%2Fsvg%3E) `#201c16` | this set | | +| `--tilburg-color-gray-500` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237a7a7a%22%2F%3E%3C%2Fsvg%3E) `#7a7a7a` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--tilburg-color-gray-600` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237a7a7a%22%2F%3E%3C%2Fsvg%3E) `#7a7a7a` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--tilburg-color-gray-700` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%234a4a4a%22%2F%3E%3C%2Fsvg%3E) `#4a4a4a` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23acacac%22%2F%3E%3C%2Fsvg%3E) `#acacac` | this set | | +| `--tilburg-color-gray-800` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%234a4a4a%22%2F%3E%3C%2Fsvg%3E) `#4a4a4a` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23acacac%22%2F%3E%3C%2Fsvg%3E) `#acacac` | this set | | +| `--tilburg-color-gray-900` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232e2e2e%22%2F%3E%3C%2Fsvg%3E) `#2e2e2e` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23c4c4c4%22%2F%3E%3C%2Fsvg%3E) `#c4c4c4` | this set | | +| `--tilburg-color-gray-950` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232e2e2e%22%2F%3E%3C%2Fsvg%3E) `#2e2e2e` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23c4c4c4%22%2F%3E%3C%2Fsvg%3E) `#c4c4c4` | this set | | +| `--tilburg-color-green-100` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d5e7d5%22%2F%3E%3C%2Fsvg%3E) `#d5e7d5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23243c24%22%2F%3E%3C%2Fsvg%3E) `#243c24` | this set | | +| `--tilburg-color-green-200` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237eb67c%22%2F%3E%3C%2Fsvg%3E) `#7eb67c` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2351854f%22%2F%3E%3C%2Fsvg%3E) `#51854f` | this set | | +| `--tilburg-color-green-300` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23238541%22%2F%3E%3C%2Fsvg%3E) `#238541` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--tilburg-color-green-400` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231e6c35%22%2F%3E%3C%2Fsvg%3E) `#1e6c35` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | | +| `--tilburg-color-light-alpha-100` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff1a%22%2F%3E%3C%2Fsvg%3E) `#ffffff1a` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231414141a%22%2F%3E%3C%2Fsvg%3E) `#1414141a` | this set | | +| `--tilburg-color-light-alpha-50` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff0d%22%2F%3E%3C%2Fsvg%3E) `#ffffff0d` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231414140d%22%2F%3E%3C%2Fsvg%3E) `#1414140d` | this set | | +| `--tilburg-color-orange-100` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffdcad%22%2F%3E%3C%2Fsvg%3E) `#ffdcad` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23683e05%22%2F%3E%3C%2Fsvg%3E) `#683e05` | this set | | +| `--tilburg-color-orange-200` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffb85c%22%2F%3E%3C%2Fsvg%3E) `#ffb85c` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23a96309%22%2F%3E%3C%2Fsvg%3E) `#a96309` | this set | | +| `--tilburg-color-orange-300` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f08800%22%2F%3E%3C%2Fsvg%3E) `#f08800` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f39419%22%2F%3E%3C%2Fsvg%3E) `#f39419` | this set | | +| `--tilburg-color-orange-400` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23df5601%22%2F%3E%3C%2Fsvg%3E) `#df5601` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f37526%22%2F%3E%3C%2Fsvg%3E) `#f37526` | this set | | +| `--tilburg-color-pink-100` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffe8f5%22%2F%3E%3C%2Fsvg%3E) `#ffe8f5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23390322%22%2F%3E%3C%2Fsvg%3E) `#390322` | this set | | +| `--tilburg-color-pink-200` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f5b4d7%22%2F%3E%3C%2Fsvg%3E) `#f5b4d7` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235f113b%22%2F%3E%3C%2Fsvg%3E) `#5f113b` | this set | | +| `--tilburg-color-pink-300` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23c8006c%22%2F%3E%3C%2Fsvg%3E) `#c8006c` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f5399e%22%2F%3E%3C%2Fsvg%3E) `#f5399e` | this set | | +| `--tilburg-color-pink-400` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23a40058%22%2F%3E%3C%2Fsvg%3E) `#a40058` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f655ac%22%2F%3E%3C%2Fsvg%3E) `#f655ac` | this set | | +| `--tilburg-color-red-100` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffd9d6%22%2F%3E%3C%2Fsvg%3E) `#ffd9d6` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23470904%22%2F%3E%3C%2Fsvg%3E) `#470904` | this set | | +| `--tilburg-color-red-200` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed8b82%22%2F%3E%3C%2Fsvg%3E) `#ed8b82` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2387231a%22%2F%3E%3C%2Fsvg%3E) `#87231a` | this set | | +| `--tilburg-color-red-300` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cf1b07%22%2F%3E%3C%2Fsvg%3E) `#cf1b07` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed4734%22%2F%3E%3C%2Fsvg%3E) `#ed4734` | this set | | +| `--tilburg-color-red-400` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23a30500%22%2F%3E%3C%2Fsvg%3E) `#a30500` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f65b56%22%2F%3E%3C%2Fsvg%3E) `#f65b56` | this set | | +| `--tilburg-color-white` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--tilburg-document-background-color` | `var(--tilburg-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--tilburg-document-color` | `var(--tilburg-color-black-txt)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--tilburg-document-font-family` | `var(--tilburg-typography-font-family-secondary)` | | this set | | +| `--tilburg-document-font-size` | `var(--tilburg-typography-font-size-md)` | | this set | | +| `--tilburg-document-font-weight` | `var(--tilburg-typography-font-weight-normal)` | | this set | | +| `--tilburg-document-inverse-background-color` | `var(--tilburg-color-gray-950)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23c4c4c4%22%2F%3E%3C%2Fsvg%3E) `#c4c4c4` | this set | | +| `--tilburg-document-inverse-color` | `var(--tilburg-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--tilburg-document-line-height` | `var(--tilburg-typography-line-height-md)` | | this set | | +| `--tilburg-document-strong-font-weight` | `var(--tilburg-typography-font-weight-bold)` | | this set | | +| `--tilburg-document-subtle-color` | `var(--tilburg-color-gray-600)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--tilburg-erm-font-size` | `16px` | | this set | | +| `--tilburg-feedback-informative-background-color` | `var(--tilburg-color-blue-100)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230c283f%22%2F%3E%3C%2Fsvg%3E) `#0c283f` | this set | | +| `--tilburg-feedback-informative-border-color` | `var(--tilburg-color-blue-400)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2373b7ee%22%2F%3E%3C%2Fsvg%3E) `#73b7ee` | this set | | +| `--tilburg-feedback-informative-color` | `var(--tilburg-color-blue-400)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237ec0f6%22%2F%3E%3C%2Fsvg%3E) `#7ec0f6` | this set | | +| `--tilburg-feedback-negative-background-color` | `var(--tilburg-color-red-100)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23470904%22%2F%3E%3C%2Fsvg%3E) `#470904` | this set | | +| `--tilburg-feedback-negative-border-color` | `var(--tilburg-color-red-300)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed4734%22%2F%3E%3C%2Fsvg%3E) `#ed4734` | this set | | +| `--tilburg-feedback-negative-color` | `var(--tilburg-color-red-300)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f95644%22%2F%3E%3C%2Fsvg%3E) `#f95644` | this set | | +| `--tilburg-feedback-positive-background-color` | `var(--tilburg-color-green-100)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23243c24%22%2F%3E%3C%2Fsvg%3E) `#243c24` | this set | | +| `--tilburg-feedback-positive-border-color` | `var(--tilburg-color-green-300)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--tilburg-feedback-positive-color` | `var(--tilburg-color-green-300)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--tilburg-feedback-warning-background-color` | `var(--tilburg-color-orange-100)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23683e05%22%2F%3E%3C%2Fsvg%3E) `#683e05` | this set | | +| `--tilburg-feedback-warning-border-color` | `var(--tilburg-color-orange-200)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23a96309%22%2F%3E%3C%2Fsvg%3E) `#a96309` | this set | | +| `--tilburg-feedback-warning-color` | `var(--tilburg-color-orange-300)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffab3d%22%2F%3E%3C%2Fsvg%3E) `#ffab3d` | this set | | +| `--tilburg-focus-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231260a1%22%2F%3E%3C%2Fsvg%3E) `#1260a1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235ba6e4%22%2F%3E%3C%2Fsvg%3E) `#5ba6e4` | this set | | +| `--tilburg-focus-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23238541%22%2F%3E%3C%2Fsvg%3E) `#238541` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--tilburg-focus-inverse-outline-color` | `var(--tilburg-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--tilburg-focus-outline-color` | `var(--denhaag-focus-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f8da72%22%2F%3E%3C%2Fsvg%3E) `#f8da72` | this set | | +| `--tilburg-focus-outline-offset` | `0` | | this set | | +| `--tilburg-focus-outline-style` | `dotted` | | this set | | +| `--tilburg-focus-outline-width` | `var(--tilburg-border-width-md)` | | this set | | +| `--tilburg-footer-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23238541%22%2F%3E%3C%2Fsvg%3E) `#238541` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--tilburg-footer-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--tilburg-footer-link-hover-text-decoration` | `underline` | | this set | | +| `--tilburg-footer-link-text-decoration` | `none` | | this set | | +| `--tilburg-form-control-accent-color` | `var(--tilburg-interaction-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--tilburg-form-control-active-accent-color` | `var( --tilburg-interaction-active-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--tilburg-form-control-active-background-color` | `var(--tilburg-color-gray-100)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--tilburg-form-control-active-border-color` | `var(--tilburg-color-gray-500)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--tilburg-form-control-active-border-width` | `var(--tilburg-border-width-md)` | | this set | | +| `--tilburg-form-control-active-color` | `var(--tilburg-color-gray-950)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--tilburg-form-control-background-color` | `var(--tilburg-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--tilburg-form-control-border-color` | `var(--tilburg-color-gray-500)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--tilburg-form-control-border-width` | `var(--tilburg-border-width-sm)` | | this set | | +| `--tilburg-form-control-color` | `var(--tilburg-color-gray-950)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--tilburg-form-control-disabled-accent-color` | `var(--tilburg-color-gray-500)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--tilburg-form-control-disabled-background-color` | `var(--tilburg-color-gray-50)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23201c16%22%2F%3E%3C%2Fsvg%3E) `#201c16` | this set | | +| `--tilburg-form-control-disabled-border-color` | `var(--tilburg-color-gray-500)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--tilburg-form-control-disabled-color` | `var(--tilburg-color-gray-500)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--tilburg-form-control-focus-background-color` | `var(--tilburg-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--tilburg-form-control-focus-border-color` | `var(--tilburg-color-black)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--tilburg-form-control-focus-border-width` | `var(--tilburg-border-width-md)` | | this set | | +| `--tilburg-form-control-focus-color` | `var(--tilburg-color-black)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--tilburg-form-control-hover-accent-color` | `var(--tilburg-interaction-hover-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--tilburg-form-control-hover-background-color` | `var(--tilburg-color-gray-50)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23201c16%22%2F%3E%3C%2Fsvg%3E) `#201c16` | this set | | +| `--tilburg-form-control-hover-border-color` | `var(--tilburg-color-gray-500)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--tilburg-form-control-hover-border-width` | `var(--tilburg-border-width-md)` | | this set | | +| `--tilburg-form-control-hover-color` | `var(--tilburg-color-gray-950)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--tilburg-form-control-invalid-background-color` | `var(--tilburg-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--tilburg-form-control-invalid-border-color` | `var(--tilburg-color-red-300)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed4734%22%2F%3E%3C%2Fsvg%3E) `#ed4734` | this set | | +| `--tilburg-form-control-invalid-border-width` | `var(--tilburg-border-width-md)` | | this set | | +| `--tilburg-form-control-invalid-color` | `var(--tilburg-color-red-300)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f95644%22%2F%3E%3C%2Fsvg%3E) `#f95644` | this set | | +| `--tilburg-form-control-placeholder-color` | `var(--tilburg-color-gray-600)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--tilburg-form-control-read-only-background-color` | `var(--tilburg-color-gray-50)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23201c16%22%2F%3E%3C%2Fsvg%3E) `#201c16` | this set | | +| `--tilburg-form-control-read-only-border-color` | `var(--tilburg-color-gray-500)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--tilburg-form-control-read-only-color` | `var(--tilburg-color-gray-950)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--tilburg-header-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--tilburg-heading-color` | `var(--tilburg-color-black)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--tilburg-heading-font-family` | `var(--tilburg-typography-font-family-primary)` | | this set | | +| `--tilburg-heading-font-weight` | `var(--tilburg-typography-font-weight-bold)` | | this set | | +| `--tilburg-icon-functional-size` | `var(--tilburg-size-icon-md)` | | this set | | +| `--tilburg-icon-toptask-size` | `var(--tilburg-size-icon-4xl)` | | this set | | +| `--tilburg-interaction-active-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23238541%22%2F%3E%3C%2Fsvg%3E) `#238541` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--tilburg-interaction-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23238541%22%2F%3E%3C%2Fsvg%3E) `#238541` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--tilburg-interaction-hover-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23238541%22%2F%3E%3C%2Fsvg%3E) `#238541` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--tilburg-line-border-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237a7a7a%22%2F%3E%3C%2Fsvg%3E) `#7a7a7a` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--tilburg-line-border-width` | `var(--tilburg-border-width-sm)` | | this set | | +| `--tilburg-logo-color` | `var(--tilburg-color-black)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--tilburg-navigation-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231260a1%22%2F%3E%3C%2Fsvg%3E) `#1260a1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235ba6e4%22%2F%3E%3C%2Fsvg%3E) `#5ba6e4` | this set | | +| `--tilburg-navigation-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--tilburg-navigation-font-family` | `'Montserrat', sans-serif` | | this set | | +| `--tilburg-navigation-font-weight` | `700` | | this set | | +| `--tilburg-navigation-hover-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231260a1%22%2F%3E%3C%2Fsvg%3E) `#1260a1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235ba6e4%22%2F%3E%3C%2Fsvg%3E) `#5ba6e4` | this set | | +| `--tilburg-navigation-hover-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--tilburg-navigation-hover-font-weight` | `700` | | this set | | +| `--tilburg-navigation-mobile-background-color` | `var(--tilburg-color-blue-400)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2373b7ee%22%2F%3E%3C%2Fsvg%3E) `#73b7ee` | this set | | +| `--tilburg-navigation-mobile-item-border-bottom-color` | `var( --tilburg-color-blue-300 )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235ba6e4%22%2F%3E%3C%2Fsvg%3E) `#5ba6e4` | this set | | +| `--tilburg-pointer-target-min-size` | `var(--tilburg-size-md)` | | this set | | +| `--tilburg-search-card-border-color` | `var(--tilburg-color-gray-200)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--tilburg-search-card-hover-border-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23238541%22%2F%3E%3C%2Fsvg%3E) `#238541` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--tilburg-size-2xl` | `160px` | | this set | | +| `--tilburg-size-2xs` | `16px` | | this set | | +| `--tilburg-size-3xs` | `8px` | | this set | | +| `--tilburg-size-4xs` | `4px` | | this set | | +| `--tilburg-size-5xs` | `2px` | | this set | | +| `--tilburg-size-icon-2xl` | `32px` | | this set | | +| `--tilburg-size-icon-3xl` | `40px` | | this set | | +| `--tilburg-size-icon-4xl` | `48px` | | this set | | +| `--tilburg-size-icon-lg` | `24px` | | this set | | +| `--tilburg-size-icon-md` | `24px` | | this set | | +| `--tilburg-size-icon-sm` | `16px` | | this set | | +| `--tilburg-size-icon-xl` | `24px` | | this set | | +| `--tilburg-size-lg` | `64px` | | this set | | +| `--tilburg-size-md` | `48px` | | this set | | +| `--tilburg-size-sm` | `32px` | | this set | | +| `--tilburg-size-xl` | `96px` | | this set | | +| `--tilburg-size-xs` | `24px` | | this set | | +| `--tilburg-space-block-ant` | `4px` | | this set | | +| `--tilburg-space-block-beetle` | `8px` | | this set | | +| `--tilburg-space-block-cat` | `32px` | | this set | | +| `--tilburg-space-block-dog` | `48px` | | this set | | +| `--tilburg-space-block-flea` | `2px` | | this set | | +| `--tilburg-space-block-mouse` | `16px` | | this set | | +| `--tilburg-space-block-pig` | `64px` | | this set | | +| `--tilburg-space-block-rabbit` | `24px` | | this set | | +| `--tilburg-space-block-rat` | `20px` | | this set | | +| `--tilburg-space-block-snail` | `12px` | | this set | | +| `--tilburg-space-column-ant` | `2px` | | this set | | +| `--tilburg-space-column-beetle` | `4px` | | this set | | +| `--tilburg-space-column-cat` | `24px` | | this set | | +| `--tilburg-space-column-dog` | `28px` | | this set | | +| `--tilburg-space-column-elephant` | `96px` | | this set | | +| `--tilburg-space-column-flea` | `1px` | | this set | | +| `--tilburg-space-column-giraffe` | `160px` | | this set | | +| `--tilburg-space-column-horse` | `64px` | | this set | | +| `--tilburg-space-column-mouse` | `12px` | | this set | | +| `--tilburg-space-column-pig` | `32px` | | this set | | +| `--tilburg-space-column-rabbit` | `20px` | | this set | | +| `--tilburg-space-column-rat` | `16px` | | this set | | +| `--tilburg-space-column-snail` | `8px` | | this set | | +| `--tilburg-space-column-tiger` | `48px` | | this set | | +| `--tilburg-space-inline-ant` | `4px` | | this set | | +| `--tilburg-space-inline-beetle` | `8px` | | this set | | +| `--tilburg-space-inline-cat` | `28px` | | this set | | +| `--tilburg-space-inline-dog` | `32px` | | this set | | +| `--tilburg-space-inline-flea` | `2px` | | this set | | +| `--tilburg-space-inline-mouse` | `16px` | | this set | | +| `--tilburg-space-inline-pig` | `48px` | | this set | | +| `--tilburg-space-inline-rabbit` | `24px` | | this set | | +| `--tilburg-space-inline-rat` | `20px` | | this set | | +| `--tilburg-space-inline-snail` | `12px` | | this set | | +| `--tilburg-space-row-ant` | `2px` | | this set | | +| `--tilburg-space-row-beetle` | `4px` | | this set | | +| `--tilburg-space-row-cat` | `24px` | | this set | | +| `--tilburg-space-row-dog` | `28px` | | this set | | +| `--tilburg-space-row-elephant` | `96px` | | this set | | +| `--tilburg-space-row-flea` | `1px` | | this set | | +| `--tilburg-space-row-giraffe` | `160px` | | this set | | +| `--tilburg-space-row-horse` | `64px` | | this set | | +| `--tilburg-space-row-mouse` | `12px` | | this set | | +| `--tilburg-space-row-pig` | `32px` | | this set | | +| `--tilburg-space-row-rabbit` | `20px` | | this set | | +| `--tilburg-space-row-rat` | `16px` | | this set | | +| `--tilburg-space-row-snail` | `8px` | | this set | | +| `--tilburg-space-row-tiger` | `48px` | | this set | | +| `--tilburg-space-text-ant` | `2px` | | this set | | +| `--tilburg-space-text-beetle` | `4px` | | this set | | +| `--tilburg-space-text-cat` | `16px` | | this set | | +| `--tilburg-space-text-dog` | `24px` | | this set | | +| `--tilburg-space-text-flea` | `1px` | | this set | | +| `--tilburg-space-text-mouse` | `8px` | | this set | | +| `--tilburg-space-text-rabbit` | `14px` | | this set | | +| `--tilburg-space-text-rat` | `12px` | | this set | | +| `--tilburg-space-text-snail` | `6px` | | this set | | +| `--tilburg-status-badge-background-color` | `var(--denhaag-color-grey-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--tilburg-status-badge-border-color` | `transparent` | | this set | | +| `--tilburg-status-badge-border-radius` | `var(--tilburg-border-radius-sm)` | | this set | | +| `--tilburg-status-badge-border-width` | `var(--tilburg-border-width-sm)` | | this set | | +| `--tilburg-status-badge-color` | `var(--tilburg-document-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--tilburg-status-badge-font-family` | `var(--tilburg-document-font-family)` | | this set | | +| `--tilburg-status-badge-font-size` | `var(--tilburg-typography-font-size-sm)` | | this set | | +| `--tilburg-status-badge-font-weight` | `var(--tilburg-document-strong-font-weight)` | | this set | | +| `--tilburg-status-badge-informative-background-color` | `var( --tilburg-feedback-informative-background-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230c283f%22%2F%3E%3C%2Fsvg%3E) `#0c283f` | this set | | +| `--tilburg-status-badge-informative-border-color` | `transparent` | | this set | | +| `--tilburg-status-badge-informative-color` | `var( --tilburg-feedback-informative-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237ec0f6%22%2F%3E%3C%2Fsvg%3E) `#7ec0f6` | this set | | +| `--tilburg-status-badge-line-height` | `var(--tilburg-document-line-height)` | | this set | | +| `--tilburg-status-badge-negative-background-color` | `var( --tilburg-feedback-negative-background-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23470904%22%2F%3E%3C%2Fsvg%3E) `#470904` | this set | | +| `--tilburg-status-badge-negative-border-color` | `transparent` | | this set | | +| `--tilburg-status-badge-negative-color` | `var(--tilburg-feedback-negative-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f95644%22%2F%3E%3C%2Fsvg%3E) `#f95644` | this set | | +| `--tilburg-status-badge-padding-block` | `var(--tilburg-space-block-flea)` | | this set | | +| `--tilburg-status-badge-padding-inline` | `var(--tilburg-space-inline-ant)` | | this set | | +| `--tilburg-status-badge-positive-background-color` | `var( --tilburg-feedback-positive-background-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23243c24%22%2F%3E%3C%2Fsvg%3E) `#243c24` | this set | | +| `--tilburg-status-badge-positive-border-color` | `transparent` | | this set | | +| `--tilburg-status-badge-positive-color` | `var(--tilburg-feedback-positive-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--tilburg-status-badge-warning-background-color` | `var( --tilburg-feedback-warning-background-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23683e05%22%2F%3E%3C%2Fsvg%3E) `#683e05` | this set | | +| `--tilburg-status-badge-warning-border-color` | `transparent` | | this set | | +| `--tilburg-status-badge-warning-color` | `var(--tilburg-feedback-warning-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffab3d%22%2F%3E%3C%2Fsvg%3E) `#ffab3d` | this set | | +| `--tilburg-typography-font-family-primary` | `'Avenir', sans-serif` | | this set | | +| `--tilburg-typography-font-family-secondary` | `'Avenir', sans-serif` | | this set | | +| `--tilburg-typography-font-size-2xl` | `32px` | | this set | | +| `--tilburg-typography-font-size-3xl` | `36px` | | this set | | +| `--tilburg-typography-font-size-4xl` | `48px` | | this set | | +| `--tilburg-typography-font-size-lg` | `20px` | | this set | | +| `--tilburg-typography-font-size-md` | `16px` | | this set | | +| `--tilburg-typography-font-size-sm` | `14px` | | this set | | +| `--tilburg-typography-font-size-xl` | `24px` | | this set | | +| `--tilburg-typography-font-weight-bold` | `700` | | this set | | +| `--tilburg-typography-font-weight-normal` | `400` | | this set | | +| `--tilburg-typography-line-height-lg` | `200%` | | this set | | +| `--tilburg-typography-line-height-md` | `150%` | | this set | | +| `--tilburg-typography-line-height-sm` | `125%` | | this set | | +| `--tilburg-typography-line-height-xs` | `100%` | | this set | | +| `--utrecht-accordion-border-radius` | `0px` | | this set | | +| `--utrecht-accordion-button-active-background-color` | `var(--tilburg-color-gray-200)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--utrecht-accordion-button-active-border-color` | `transparent` | | this set | | +| `--utrecht-accordion-button-active-color` | `var(--tilburg-interaction-active-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--utrecht-accordion-button-background-color` | `var(--tilburg-color-gray-50)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23201c16%22%2F%3E%3C%2Fsvg%3E) `#201c16` | this set | | +| `--utrecht-accordion-button-border-color` | `transparent` | | this set | | +| `--utrecht-accordion-button-border-width` | `var(--tilburg-border-width-sm)` | | this set | | +| `--utrecht-accordion-button-color` | `var(--tilburg-interaction-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--utrecht-accordion-button-expanded-background-color` | `var(--tilburg-color-gray-50)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23201c16%22%2F%3E%3C%2Fsvg%3E) `#201c16` | this set | | +| `--utrecht-accordion-button-expanded-border-color` | `transparent` | | this set | | +| `--utrecht-accordion-button-expanded-color` | `var(--tilburg-interaction-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--utrecht-accordion-button-focus-background-color` | `var( --tilburg-focus-background-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235ba6e4%22%2F%3E%3C%2Fsvg%3E) `#5ba6e4` | this set | | +| `--utrecht-accordion-button-focus-border-color` | `transparent` | | this set | | +| `--utrecht-accordion-button-focus-color` | `var(--tilburg-focus-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--utrecht-accordion-button-font-family` | `var(--tilburg-document-font-family)` | | this set | | +| `--utrecht-accordion-button-font-size` | `var(--tilburg-document-font-size)` | | this set | | +| `--utrecht-accordion-button-font-weight` | `var(--tilburg-document-strong-font-weight)` | | this set | | +| `--utrecht-accordion-button-hover-background-color` | `var(--tilburg-color-gray-100)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--utrecht-accordion-button-hover-border-color` | `transparent` | | this set | | +| `--utrecht-accordion-button-hover-color` | `var(--tilburg-interaction-hover-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--utrecht-accordion-button-icon-margin-inline` | `var(--tilburg-space-text-mouse)` | | this set | | +| `--utrecht-accordion-button-icon-size` | `var(--tilburg-icon-functional-size)` | | this set | | +| `--utrecht-accordion-button-line-height` | `var(--tilburg-document-line-height)` | | this set | | +| `--utrecht-accordion-button-padding-block-end` | `var(--tilburg-space-block-snail)` | | this set | | +| `--utrecht-accordion-button-padding-block-start` | `var(--tilburg-space-block-snail)` | | this set | | +| `--utrecht-accordion-button-padding-inline-end` | `var(--tilburg-space-inline-mouse)` | | this set | | +| `--utrecht-accordion-button-padding-inline-start` | `var(--tilburg-space-inline-mouse)` | | this set | | +| `--utrecht-accordion-panel-border-color` | `transparent` | | this set | | +| `--utrecht-accordion-panel-border-width` | `var(--tilburg-border-width-lg)` | | this set | | +| `--utrecht-accordion-panel-padding-block-end` | `var(--tilburg-space-block-rabbit)` | | this set | | +| `--utrecht-accordion-panel-padding-block-start` | `var(--tilburg-space-block-rabbit)` | | this set | | +| `--utrecht-accordion-panel-padding-inline-end` | `var(--tilburg-space-inline-mouse)` | | this set | | +| `--utrecht-accordion-panel-padding-inline-start` | `var(--tilburg-space-inline-mouse)` | | this set | | +| `--utrecht-accordion-section-border-block-end-width` | `var(--tilburg-border-width-sm)` | | this set | | +| `--utrecht-accordion-section-border-color` | `var(--tilburg-line-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-accordion-section-border-width` | `auto` | | this set | | +| `--utrecht-action-activate-cursor` | `pointer` | | this set | | +| `--utrecht-action-busy-cursor` | `wait` | | this set | | +| `--utrecht-action-disabled-cursor` | `not-allowed` | | this set | | +| `--utrecht-action-navigate-cursor` | `pointer` | | this set | | +| `--utrecht-action-submit-cursor` | `pointer` | | this set | | +| `--utrecht-alert-background-color` | `var(--denhaag-color-blue-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230c283f%22%2F%3E%3C%2Fsvg%3E) `#0c283f` | this set | | +| `--utrecht-alert-border-radius` | `var(--tilburg-border-radius-md)` | | this set | | +| `--utrecht-alert-border-width` | `var(--tilburg-border-width-md)` | | this set | | +| `--utrecht-alert-color` | `var(--denhaag-color-blue-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b0dafc%22%2F%3E%3C%2Fsvg%3E) `#b0dafc` | this set | | +| `--utrecht-alert-column-gap` | `var(--tilburg-space-column-snail)` | | this set | | +| `--utrecht-alert-content-row-gap` | `var(--tilburg-space-row-snail)` | | this set | | +| `--utrecht-alert-error-background-color` | `var(--denhaag-color-red-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23470904%22%2F%3E%3C%2Fsvg%3E) `#470904` | this set | | +| `--utrecht-alert-error-border-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23520100%22%2F%3E%3C%2Fsvg%3E) `#520100` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23fa9897%22%2F%3E%3C%2Fsvg%3E) `#fa9897` | this set | | +| `--utrecht-alert-error-color` | `var(--denhaag-color-red-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffaead%22%2F%3E%3C%2Fsvg%3E) `#ffaead` | this set | | +| `--utrecht-alert-heading-font-family` | `var(--tilburg-heading-font-family)` | | this set | | +| `--utrecht-alert-heading-font-size` | `var(--tilburg-typography-font-size-xl)` | | this set | | +| `--utrecht-alert-heading-font-weight` | `var(--tilburg-heading-font-weight)` | | this set | | +| `--utrecht-alert-heading-line-height` | `var(--tilburg-typography-line-height-sm)` | | this set | | +| `--utrecht-alert-icon-color` | `var(--denhaag-color-blue-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235eaced%22%2F%3E%3C%2Fsvg%3E) `#5eaced` | this set | | +| `--utrecht-alert-icon-error-color` | `var(--denhaag-color-red-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f95644%22%2F%3E%3C%2Fsvg%3E) `#f95644` | this set | | +| `--utrecht-alert-icon-info-color` | `var(--tilburg-color-blue-500)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b0dafc%22%2F%3E%3C%2Fsvg%3E) `#b0dafc` | this set | | +| `--utrecht-alert-icon-informative-color` | `var(--tilburg-feedback-informative-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237ec0f6%22%2F%3E%3C%2Fsvg%3E) `#7ec0f6` | this set | | +| `--utrecht-alert-icon-negative-color` | `var(--tilburg-feedback-negative-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f95644%22%2F%3E%3C%2Fsvg%3E) `#f95644` | this set | | +| `--utrecht-alert-icon-ok-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--utrecht-alert-icon-padding-block-end` | `var(--tilburg-space-block-snail)` | | this set | | +| `--utrecht-alert-icon-padding-block-start` | `var(--tilburg-space-block-snail)` | | this set | | +| `--utrecht-alert-icon-padding-inline-end` | `0px` | | this set | | +| `--utrecht-alert-icon-padding-inline-start` | `0px` | | this set | | +| `--utrecht-alert-icon-positive-color` | `var(--tilburg-feedback-positive-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--utrecht-alert-icon-size` | `var(--tilburg-icon-functional-size)` | | this set | | +| `--utrecht-alert-icon-warning-color` | `var(--denhaag-color-orange-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffab3d%22%2F%3E%3C%2Fsvg%3E) `#ffab3d` | this set | | +| `--utrecht-alert-info-background-color` | `var(--tilburg-color-blue-100)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230c283f%22%2F%3E%3C%2Fsvg%3E) `#0c283f` | this set | | +| `--utrecht-alert-info-border-color` | `var(--tilburg-color-blue-300)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235ba6e4%22%2F%3E%3C%2Fsvg%3E) `#5ba6e4` | this set | | +| `--utrecht-alert-info-border-width` | `var(--tilburg-border-width-md)` | | this set | | +| `--utrecht-alert-info-color` | `var(--tilburg-color-blue-500)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b0dafc%22%2F%3E%3C%2Fsvg%3E) `#b0dafc` | this set | | +| `--utrecht-alert-informative-background-color` | `var( --tilburg-feedback-informative-background-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230c283f%22%2F%3E%3C%2Fsvg%3E) `#0c283f` | this set | | +| `--utrecht-alert-informative-border-color` | `var( --tilburg-feedback-informative-border-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2373b7ee%22%2F%3E%3C%2Fsvg%3E) `#73b7ee` | this set | | +| `--utrecht-alert-informative-color` | `var(--tilburg-document-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--utrecht-alert-message-padding-block-end` | `var(--tilburg-space-block-snail)` | | this set | | +| `--utrecht-alert-message-padding-block-start` | `var(--tilburg-space-block-beetle)` | | this set | | +| `--utrecht-alert-message-row-gap` | `var(--tilburg-space-row-snail)` | | this set | | +| `--utrecht-alert-negative-background-color` | `var( --tilburg-feedback-negative-background-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23470904%22%2F%3E%3C%2Fsvg%3E) `#470904` | this set | | +| `--utrecht-alert-negative-border-color` | `var( --tilburg-feedback-negative-border-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed4734%22%2F%3E%3C%2Fsvg%3E) `#ed4734` | this set | | +| `--utrecht-alert-negative-color` | `var(--tilburg-document-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--utrecht-alert-ok-background-color` | `var(--denhaag-color-green-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23243c24%22%2F%3E%3C%2Fsvg%3E) `#243c24` | this set | | +| `--utrecht-alert-ok-border-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237eb67c%22%2F%3E%3C%2Fsvg%3E) `#7eb67c` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2351854f%22%2F%3E%3C%2Fsvg%3E) `#51854f` | this set | | +| `--utrecht-alert-ok-border-width` | `1px` | | this set | | +| `--utrecht-alert-ok-color` | `var(--denhaag-color-green-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1ffe0%22%2F%3E%3C%2Fsvg%3E) `#d1ffe0` | this set | | +| `--utrecht-alert-padding-block-end` | `24px` | | this set | | +| `--utrecht-alert-padding-block-start` | `24px` | | this set | | +| `--utrecht-alert-padding-inline-end` | `24px` | | this set | | +| `--utrecht-alert-padding-inline-start` | `24px` | | this set | | +| `--utrecht-alert-positive-background-color` | `var( --tilburg-feedback-positive-background-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23243c24%22%2F%3E%3C%2Fsvg%3E) `#243c24` | this set | | +| `--utrecht-alert-positive-border-color` | `var( --tilburg-feedback-positive-border-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--utrecht-alert-positive-color` | `var(--tilburg-document-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--utrecht-alert-warning-background-color` | `var(--denhaag-color-orange-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23683e05%22%2F%3E%3C%2Fsvg%3E) `#683e05` | this set | | +| `--utrecht-alert-warning-border-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238a3500%22%2F%3E%3C%2Fsvg%3E) `#8a3500` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f7a06a%22%2F%3E%3C%2Fsvg%3E) `#f7a06a` | this set | | +| `--utrecht-alert-warning-color` | `var(--denhaag-color-orange-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffaa75%22%2F%3E%3C%2Fsvg%3E) `#ffaa75` | this set | | +| `--utrecht-article-max-inline-size` | `80ch` | | this set | | +| `--utrecht-badge-background-color` | `var(--denhaag-color-grey-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--utrecht-badge-border-radius` | `var(--denhaag-border-radius)` | | this set | | +| `--utrecht-badge-color` | `var(--denhaag-color-grey-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--utrecht-badge-counter-background-color` | `var(--denhaag-color-blue-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230c283f%22%2F%3E%3C%2Fsvg%3E) `#0c283f` | this set | | +| `--utrecht-badge-counter-border-color` | `transparent` | | this set | | +| `--utrecht-badge-counter-border-radius` | `50px` | | this set | | +| `--utrecht-badge-counter-border-width` | `var(--tilburg-border-width-sm)` | | this set | | +| `--utrecht-badge-counter-color` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237ec0f6%22%2F%3E%3C%2Fsvg%3E) `#7ec0f6` | this set | | +| `--utrecht-badge-counter-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--utrecht-badge-counter-font-size` | `var(--denhaag-typography-scale-s-font-size)` | | this set | | +| `--utrecht-badge-counter-font-weight` | `700` | | this set | | +| `--utrecht-badge-counter-line-height` | `var(--tilburg-document-line-height)` | | this set | | +| `--utrecht-badge-counter-min-block-size` | `var(--tilburg-size-xs)` | | this set | | +| `--utrecht-badge-counter-min-inline-size` | `var(--tilburg-size-xs)` | | this set | | +| `--utrecht-badge-counter-padding-block` | `5px` | | this set | | +| `--utrecht-badge-counter-padding-inline` | `6px` | | this set | | +| `--utrecht-badge-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--utrecht-badge-font-size` | `var(--denhaag-typography-scale-s-font-size)` | | this set | | +| `--utrecht-badge-font-weight` | `var(--denhaag-typography-weight-semibold)` | | this set | | +| `--utrecht-badge-line-height` | `var(--denhaag-typography-scale-base-line-height)` | | this set | | +| `--utrecht-badge-padding-block` | `2px` | | this set | | +| `--utrecht-badge-padding-inline` | `8px` | | this set | | +| `--utrecht-breadcrumb-nav-divider-color` | `var(--tilburg-document-subtle-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-breadcrumb-nav-divider-size` | `var(--tilburg-size-2xs)` | | this set | | +| `--utrecht-breadcrumb-nav-font-family` | `var(--tilburg-document-font-family)` | | this set | | +| `--utrecht-breadcrumb-nav-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--utrecht-breadcrumb-nav-font-weight` | `var(--tilburg-document-font-weight)` | | this set | | +| `--utrecht-breadcrumb-nav-item-padding-inline-end` | `14px` | | this set | | +| `--utrecht-breadcrumb-nav-item-padding-inline-start` | `14px` | | this set | | +| `--utrecht-breadcrumb-nav-line-height` | `var(--tilburg-document-line-height)` | | this set | | +| `--utrecht-breadcrumb-nav-link-active-color` | `var( --tilburg-interaction-active-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--utrecht-breadcrumb-nav-link-active-text-decoration` | `none` | | this set | | +| `--utrecht-breadcrumb-nav-link-color` | `var(--denhaag-color-blue-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235eaced%22%2F%3E%3C%2Fsvg%3E) `#5eaced` | this set | | +| `--utrecht-breadcrumb-nav-link-current-color` | `var(--tilburg-document-subtle-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-breadcrumb-nav-link-disabled-color` | `var(--tilburg-color-gray-700)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--utrecht-breadcrumb-nav-link-focus-background-color` | `var( --tilburg-focus-background-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235ba6e4%22%2F%3E%3C%2Fsvg%3E) `#5ba6e4` | this set | | +| `--utrecht-breadcrumb-nav-link-focus-color` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237ec0f6%22%2F%3E%3C%2Fsvg%3E) `#7ec0f6` | this set | | +| `--utrecht-breadcrumb-nav-link-focus-text-decoration` | `underline` | | this set | | +| `--utrecht-breadcrumb-nav-link-hover-color` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237ec0f6%22%2F%3E%3C%2Fsvg%3E) `#7ec0f6` | this set | | +| `--utrecht-breadcrumb-nav-link-hover-text-decoration` | `underline` | | this set | | +| `--utrecht-breadcrumb-nav-link-icon-margin-inline` | `var(--tilburg-space-text-beetle)` | | this set | | +| `--utrecht-breadcrumb-nav-link-icon-size` | `var(--tilburg-icon-functional-size)` | | this set | | +| `--utrecht-breadcrumb-nav-link-padding-block-end` | `var(--tilburg-space-block-snail)` | | this set | | +| `--utrecht-breadcrumb-nav-link-padding-block-start` | `var( --tilburg-space-block-snail )` | | this set | | +| `--utrecht-breadcrumb-nav-link-padding-inline-end` | `0px` | | this set | | +| `--utrecht-breadcrumb-nav-link-padding-inline-start` | `0px` | | this set | | +| `--utrecht-breadcrumb-nav-link-text-decoration` | `underline` | | this set | | +| `--utrecht-breadcrumb-nav-margin-inline` | `var(--tilburg-space-inline-beetle)` | | this set | | +| `--utrecht-breadcrumb-nav-separator-inline-size` | `24px` | | this set | | +| `--utrecht-button-active-background-color` | `var(--tilburg-color-gray-100)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--utrecht-button-active-border-color` | `var(--tilburg-interaction-active-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--utrecht-button-active-color` | `var(--tilburg-interaction-active-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--utrecht-button-background-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--utrecht-button-border-color` | `var(--tilburg-color-gray-900)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23c4c4c4%22%2F%3E%3C%2Fsvg%3E) `#c4c4c4` | this set | | +| `--utrecht-button-border-radius` | `var(--denhaag-border-radius)` | | this set | | +| `--utrecht-button-border-width` | `var(--tilburg-border-width-sm)` | | this set | | +| `--utrecht-button-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-button-disabled-background-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--utrecht-button-disabled-border-color` | `transparent` | | this set | | +| `--utrecht-button-disabled-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--utrecht-button-focus-background-color` | `var(--denhaag-color-green-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | | +| `--utrecht-button-focus-border-color` | `transparent` | | this set | | +| `--utrecht-button-focus-color` | `var(--tilburg-focus-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--utrecht-button-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--utrecht-button-font-size` | `var(--tilburg-document-font-size)` | | this set | | +| `--utrecht-button-font-weight` | `var(--tilburg-document-strong-font-weight)` | | this set | | +| `--utrecht-button-hover-background-color` | `var(--denhaag-color-green-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | | +| `--utrecht-button-hover-border-color` | `var(--tilburg-interaction-hover-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--utrecht-button-hover-color` | `var(--tilburg-interaction-hover-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--utrecht-button-icon-gap` | `4px` | | this set | | +| `--utrecht-button-icon-size` | `var(--tilburg-icon-functional-size)` | | this set | | +| `--utrecht-button-line-height` | `var(--tilburg-document-line-height)` | | this set | | +| `--utrecht-button-min-block-size` | `var(--tilburg-pointer-target-min-size)` | | this set | | +| `--utrecht-button-min-inline-size` | `var(--tilburg-pointer-target-min-size)` | | this set | | +| `--utrecht-button-padding-block-end` | `var(--denhaag-space-block-xs)` | | this set | | +| `--utrecht-button-padding-block-start` | `var(--denhaag-space-block-xs)` | | this set | | +| `--utrecht-button-padding-inline-end` | `var(--denhaag-space-inline-md)` | | this set | | +| `--utrecht-button-padding-inline-start` | `var(--denhaag-space-inline-md)` | | this set | | +| `--utrecht-button-primary-action-active-background-color` | `var( --tilburg-interaction-active-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--utrecht-button-primary-action-active-border-color` | `transparent` | | this set | | +| `--utrecht-button-primary-action-active-color` | `var(--tilburg-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-button-primary-action-background-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--utrecht-button-primary-action-border-color` | `transparent` | | this set | | +| `--utrecht-button-primary-action-color` | `var(--tilburg-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-button-primary-action-disabled-background-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--utrecht-button-primary-action-disabled-border-color` | `transparent` | | this set | | +| `--utrecht-button-primary-action-disabled-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--utrecht-button-primary-action-focus-background-color` | `var(--denhaag-color-green-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | | +| `--utrecht-button-primary-action-focus-border-color` | `transparent` | | this set | | +| `--utrecht-button-primary-action-focus-color` | `var(--tilburg-focus-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--utrecht-button-primary-action-font-weight` | `var( --tilburg-document-strong-font-weight )` | | this set | | +| `--utrecht-button-primary-action-hover-background-color` | `var(--denhaag-color-green-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | | +| `--utrecht-button-primary-action-hover-border-color` | `transparent` | | this set | | +| `--utrecht-button-primary-action-hover-color` | `var(--tilburg-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-button-secondary-action-active-background-color` | `var( --tilburg-color-gray-100 )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--utrecht-button-secondary-action-active-border-color` | `var( --tilburg-interaction-active-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--utrecht-button-secondary-action-active-color` | `var( --tilburg-interaction-active-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--utrecht-button-secondary-action-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--utrecht-button-secondary-action-border-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--utrecht-button-secondary-action-border-width` | `1px` | | this set | | +| `--utrecht-button-secondary-action-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--utrecht-button-secondary-action-disabled-background-color` | `var( --tilburg-color-gray-50 )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23201c16%22%2F%3E%3C%2Fsvg%3E) `#201c16` | this set | | +| `--utrecht-button-secondary-action-disabled-border-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--utrecht-button-secondary-action-disabled-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--utrecht-button-secondary-action-focus-background-color` | `var( --tilburg-focus-background-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235ba6e4%22%2F%3E%3C%2Fsvg%3E) `#5ba6e4` | this set | | +| `--utrecht-button-secondary-action-focus-border-color` | `var(--denhaag-color-green-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | | +| `--utrecht-button-secondary-action-focus-color` | `var(--denhaag-color-green-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2393e1aa%22%2F%3E%3C%2Fsvg%3E) `#93e1aa` | this set | | +| `--utrecht-button-secondary-action-font-weight` | `var( --tilburg-document-strong-font-weight )` | | this set | | +| `--utrecht-button-secondary-action-hover-background-color` | `var( --tilburg-color-gray-50 )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23201c16%22%2F%3E%3C%2Fsvg%3E) `#201c16` | this set | | +| `--utrecht-button-secondary-action-hover-border-color` | `var(--denhaag-color-green-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | | +| `--utrecht-button-secondary-action-hover-color` | `var(--denhaag-color-green-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2393e1aa%22%2F%3E%3C%2Fsvg%3E) `#93e1aa` | this set | | +| `--utrecht-button-subtle-active-background-color` | `var( --tilburg-color-dark-alpha-100 )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb1a%22%2F%3E%3C%2Fsvg%3E) `#ebebeb1a` | this set | | +| `--utrecht-button-subtle-active-border-color` | `transparent` | | this set | | +| `--utrecht-button-subtle-active-color` | `var(--tilburg-interaction-active-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--utrecht-button-subtle-background-color` | `transparent` | | this set | | +| `--utrecht-button-subtle-border-color` | `transparent` | | this set | | +| `--utrecht-button-subtle-color` | `var(--tilburg-interaction-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--utrecht-button-subtle-disabled-background-color` | `var(--tilburg-color-gray-50)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23201c16%22%2F%3E%3C%2Fsvg%3E) `#201c16` | this set | | +| `--utrecht-button-subtle-disabled-border-color` | `transparent` | | this set | | +| `--utrecht-button-subtle-disabled-color` | `var(--tilburg-color-gray-500)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-button-subtle-focus-background-color` | `var( --tilburg-focus-background-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235ba6e4%22%2F%3E%3C%2Fsvg%3E) `#5ba6e4` | this set | | +| `--utrecht-button-subtle-focus-border-color` | `transparent` | | this set | | +| `--utrecht-button-subtle-focus-color` | `var(--tilburg-focus-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--utrecht-button-subtle-font-weight` | `var(--tilburg-document-strong-font-weight)` | | this set | | +| `--utrecht-button-subtle-hover-background-color` | `var(--tilburg-color-dark-alpha-50)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb0d%22%2F%3E%3C%2Fsvg%3E) `#ebebeb0d` | this set | | +| `--utrecht-button-subtle-hover-border-color` | `transparent` | | this set | | +| `--utrecht-button-subtle-hover-color` | `var(--tilburg-interaction-hover-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--utrecht-checkbox-active-background-color` | `var(--utrecht-form-control-active-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--utrecht-checkbox-active-border-color` | `var(--utrecht-form-control-active-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-checkbox-active-border-width` | `var(--utrecht-form-control-active-border-width)` | | this set | | +| `--utrecht-checkbox-active-color` | `var(--utrecht-form-control-active-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--utrecht-checkbox-background-color` | `var(--utrecht-form-control-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--utrecht-checkbox-border-color` | `var(--utrecht-form-control-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-checkbox-border-radius` | `var(--utrecht-form-control-border-radius)` | | this set | | +| `--utrecht-checkbox-border-width` | `var(--utrecht-form-control-border-width)` | | this set | | +| `--utrecht-checkbox-checked-active-background-color` | `var( --tilburg-form-control-active-accent-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--utrecht-checkbox-checked-active-border-color` | `transparent` | | this set | | +| `--utrecht-checkbox-checked-active-border-width` | `var( --tilburg-form-control-active-border-width )` | | this set | | +| `--utrecht-checkbox-checked-active-color` | `var(--tilburg-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-checkbox-checked-background-color` | `var(--utrecht-form-control-checked-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--utrecht-checkbox-checked-border-color` | `var(--utrecht-form-control-checked-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--utrecht-checkbox-checked-border-width` | `var(--utrecht-form-control-checked-border-width)` | | this set | | +| `--utrecht-checkbox-checked-color` | `var(--utrecht-form-control-checked-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-checkbox-checked-disabled-background-color` | `var( --tilburg-form-control-disabled-accent-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-checkbox-checked-disabled-border-color` | `transparent` | | this set | | +| `--utrecht-checkbox-checked-disabled-color` | `var(--tilburg-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-checkbox-checked-focus-background-color` | `var( --tilburg-form-control-focus-background-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--utrecht-checkbox-checked-focus-border-color` | `var( --tilburg-form-control-focus-border-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--utrecht-checkbox-checked-focus-border-width` | `var( --tilburg-form-control-focus-border-width )` | | this set | | +| `--utrecht-checkbox-checked-focus-color` | `var(--tilburg-form-control-focus-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--utrecht-checkbox-checked-hover-background-color` | `var( --tilburg-form-control-hover-accent-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--utrecht-checkbox-checked-hover-border-color` | `transparent` | | this set | | +| `--utrecht-checkbox-checked-hover-border-width` | `var( --tilburg-form-control-hover-border-width )` | | this set | | +| `--utrecht-checkbox-checked-hover-color` | `var(--tilburg-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-checkbox-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-checkbox-disabled-background-color` | `var(--utrecht-form-control-disabled-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--utrecht-checkbox-disabled-border-color` | `var(--utrecht-form-control-disabled-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-checkbox-disabled-border-width` | `var(--utrecht-form-control-border-width)` | | this set | | +| `--utrecht-checkbox-disabled-color` | `var(--utrecht-form-control-disabled-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--utrecht-checkbox-focus-background-color` | `var(--utrecht-form-control-focus-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--utrecht-checkbox-focus-border-color` | `var(--utrecht-form-control-focus-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--utrecht-checkbox-focus-border-width` | `var(--utrecht-form-control-focus-border-width)` | | this set | | +| `--utrecht-checkbox-focus-color` | `var(--utrecht-form-control-focus-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--utrecht-checkbox-hover-background-color` | `var(--utrecht-form-control-hover-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23201c16%22%2F%3E%3C%2Fsvg%3E) `#201c16` | this set | | +| `--utrecht-checkbox-hover-border-color` | `var(--utrecht-form-control-hover-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-checkbox-hover-border-width` | `var(--utrecht-form-control-hover-border-width)` | | this set | | +| `--utrecht-checkbox-hover-color` | `var(--utrecht-form-control-hover-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--utrecht-checkbox-icon-size` | `var(--denhaag-size-xs)` | | this set | | +| `--utrecht-checkbox-indeterminate-active-background-color` | `var( --tilburg-form-control-active-accent-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--utrecht-checkbox-indeterminate-active-border-color` | `transparent` | | this set | | +| `--utrecht-checkbox-indeterminate-active-border-width` | `var( --tilburg-form-control-active-border-width )` | | this set | | +| `--utrecht-checkbox-indeterminate-active-color` | `var(--tilburg-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-checkbox-indeterminate-background-color` | `var( --tilburg-form-control-accent-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--utrecht-checkbox-indeterminate-border-color` | `transparent` | | this set | | +| `--utrecht-checkbox-indeterminate-border-width` | `var( --tilburg-form-control-border-width )` | | this set | | +| `--utrecht-checkbox-indeterminate-color` | `var(--tilburg-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-checkbox-indeterminate-disabled-background-color` | `var( --tilburg-form-control-disabled-accent-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-checkbox-indeterminate-disabled-border-color` | `transparent` | | this set | | +| `--utrecht-checkbox-indeterminate-disabled-color` | `var(--tilburg-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-checkbox-indeterminate-focus-background-color` | `var( --tilburg-form-control-focus-background-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--utrecht-checkbox-indeterminate-focus-border-color` | `var( --tilburg-form-control-focus-border-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--utrecht-checkbox-indeterminate-focus-border-width` | `var( --tilburg-form-control-focus-border-width )` | | this set | | +| `--utrecht-checkbox-indeterminate-focus-color` | `var( --tilburg-form-control-focus-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--utrecht-checkbox-indeterminate-hover-background-color` | `var( --tilburg-form-control-hover-accent-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--utrecht-checkbox-indeterminate-hover-border-color` | `transparent` | | this set | | +| `--utrecht-checkbox-indeterminate-hover-border-width` | `var( --tilburg-form-control-hover-border-width )` | | this set | | +| `--utrecht-checkbox-indeterminate-hover-color` | `var(--tilburg-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-checkbox-invalid-background-color` | `var(--utrecht-form-control-invalid-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--utrecht-checkbox-invalid-border-color` | `var(--utrecht-form-control-invalid-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed4734%22%2F%3E%3C%2Fsvg%3E) `#ed4734` | this set | | +| `--utrecht-checkbox-invalid-border-width` | `var(--utrecht-form-control-invalid-border-width)` | | this set | | +| `--utrecht-checkbox-invalid-color` | `var(--utrecht-form-control-invalid-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f95644%22%2F%3E%3C%2Fsvg%3E) `#f95644` | this set | | +| `--utrecht-checkbox-margin-inline-end` | `var(--denhaag-size-3xs)` | | this set | | +| `--utrecht-checkbox-size` | `var(--denhaag-size-xs)` | | this set | | +| `--utrecht-code-background-color` | `var(--tilburg-color-code-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--utrecht-code-color` | `var(--tilburg-document-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--utrecht-code-font-size` | `inherit` | | this set | | +| `--utrecht-data-list-font-family` | `var(--tilburg-document-font-family)` | | this set | | +| `--utrecht-data-list-font-size` | `var(--tilburg-document-font-size)` | | this set | | +| `--utrecht-data-list-item-action-padding-block-end` | `var( --tilburg-space-block-snail )` | | this set | | +| `--utrecht-data-list-item-action-padding-block-start` | `var( --tilburg-space-block-snail )` | | this set | | +| `--utrecht-data-list-item-action-padding-inline-end` | `var( --tilburg-space-inline-mouse )` | | this set | | +| `--utrecht-data-list-item-action-padding-inline-start` | `0px` | | this set | | +| `--utrecht-data-list-item-action-row-padding-block-end` | `var( --tilburg-space-block-snail )` | | this set | | +| `--utrecht-data-list-item-action-row-padding-block-start` | `var( --tilburg-space-block-snail )` | | this set | | +| `--utrecht-data-list-item-action-row-padding-inline-end` | `0px` | | this set | | +| `--utrecht-data-list-item-action-row-padding-inline-start` | `var( --tilburg-space-inline-mouse )` | | this set | | +| `--utrecht-data-list-item-border-color` | `var(--tilburg-line-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-data-list-item-border-width` | `var(--tilburg-border-width-sm)` | | this set | | +| `--utrecht-data-list-item-color` | `var(--tilburg-document-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--utrecht-data-list-item-key-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--utrecht-data-list-item-key-font-weight` | `bold` | | this set | | +| `--utrecht-data-list-item-key-line-height` | `1.5` | | this set | | +| `--utrecht-data-list-item-key-padding-block-end` | `var(--tilburg-space-block-ant)` | | this set | | +| `--utrecht-data-list-item-key-padding-block-start` | `var(--tilburg-space-block-snail)` | | this set | | +| `--utrecht-data-list-item-key-padding-inline-end` | `0px` | | this set | | +| `--utrecht-data-list-item-key-padding-inline-start` | `0px` | | this set | | +| `--utrecht-data-list-item-key-row-padding-block-end` | `var( --tilburg-space-block-snail )` | | this set | | +| `--utrecht-data-list-item-key-row-padding-block-start` | `var( --tilburg-space-block-snail )` | | this set | | +| `--utrecht-data-list-item-key-row-padding-inline-end` | `var( --tilburg-space-inline-mouse )` | | this set | | +| `--utrecht-data-list-item-key-row-padding-inline-start` | `0px` | | this set | | +| `--utrecht-data-list-item-value-font-weight` | `var(--tilburg-document-font-weight)` | | this set | | +| `--utrecht-data-list-item-value-line-height` | `1.5` | | this set | | +| `--utrecht-data-list-item-value-padding-block-end` | `var(--tilburg-space-block-snail)` | | this set | | +| `--utrecht-data-list-item-value-padding-block-start` | `var(--tilburg-space-block-ant)` | | this set | | +| `--utrecht-data-list-item-value-padding-inline-end` | `0px` | | this set | | +| `--utrecht-data-list-item-value-padding-inline-start` | `0px` | | this set | | +| `--utrecht-data-list-item-value-row-padding-block-end` | `var( --tilburg-space-block-snail )` | | this set | | +| `--utrecht-data-list-item-value-row-padding-block-start` | `var( --tilburg-space-block-snail )` | | this set | | +| `--utrecht-data-list-item-value-row-padding-inline-end` | `0px` | | this set | | +| `--utrecht-data-list-item-value-row-padding-inline-start` | `0px` | | this set | | +| `--utrecht-data-list-line-height` | `var(--tilburg-document-line-height)` | | this set | | +| `--utrecht-data-list-margin-block-start` | `24px` | | this set | | +| `--utrecht-data-list-rows-item-margin-block-start` | `16px` | | this set | | +| `--utrecht-data-list-rows-item-padding-block-end` | `var(--tilburg-space-block-ant)` | | this set | | +| `--utrecht-data-list-rows-item-padding-block-start` | `var( --tilburg-space-block-snail )` | | this set | | +| `--utrecht-data-list-rows-item-padding-inline-start` | `16px` | | this set | | +| `--utrecht-data-list-rows-item-value-margin-block-start` | `0` | | this set | | +| `--utrecht-document-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--utrecht-document-color` | `var(--denhaag-color-grey-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--utrecht-document-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--utrecht-document-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--utrecht-document-font-weight` | `var(--denhaag-typography-weight-regular)` | | this set | | +| `--utrecht-document-inverse-background-color` | `var(--tilburg-color-gray-950)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23c4c4c4%22%2F%3E%3C%2Fsvg%3E) `#c4c4c4` | this set | | +| `--utrecht-document-inverse-color` | `var(--tilburg-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-document-line-height` | `var(--denhaag-typography-scale-base-line-height)` | | this set | | +| `--utrecht-document-strong-font-weight` | `var(--tilburg-typography-font-weight-bold)` | | this set | | +| `--utrecht-document-subtle-color` | `var(--tilburg-color-gray-600)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-feedback-danger-background-color` | `var(--denhaag-color-red-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23470904%22%2F%3E%3C%2Fsvg%3E) `#470904` | this set | | +| `--utrecht-feedback-danger-color` | `var(--denhaag-color-red-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ff615c%22%2F%3E%3C%2Fsvg%3E) `#ff615c` | this set | | +| `--utrecht-feedback-danger-fill-background-color` | `var(--denhaag-color-red-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23470904%22%2F%3E%3C%2Fsvg%3E) `#470904` | this set | | +| `--utrecht-feedback-danger-fill-border-color` | `var(--tilburg-color-red-300)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed4734%22%2F%3E%3C%2Fsvg%3E) `#ed4734` | this set | | +| `--utrecht-feedback-danger-fill-color` | `var(--denhaag-color-red-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f65b56%22%2F%3E%3C%2Fsvg%3E) `#f65b56` | this set | | +| `--utrecht-feedback-neutral-background-color` | `var(--denhaag-color-blue-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230c283f%22%2F%3E%3C%2Fsvg%3E) `#0c283f` | this set | | +| `--utrecht-feedback-neutral-color` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237ec0f6%22%2F%3E%3C%2Fsvg%3E) `#7ec0f6` | this set | | +| `--utrecht-feedback-neutral-fill-background-color` | `var(--denhaag-color-blue-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230c283f%22%2F%3E%3C%2Fsvg%3E) `#0c283f` | this set | | +| `--utrecht-feedback-neutral-fill-border-color` | `var(--tilburg-color-gray-400)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--utrecht-feedback-neutral-fill-color` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2373b7ee%22%2F%3E%3C%2Fsvg%3E) `#73b7ee` | this set | | +| `--utrecht-feedback-safe-background-color` | `var(--denhaag-color-green-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23243c24%22%2F%3E%3C%2Fsvg%3E) `#243c24` | this set | | +| `--utrecht-feedback-safe-color` | `var(--denhaag-color-green-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2393e1aa%22%2F%3E%3C%2Fsvg%3E) `#93e1aa` | this set | | +| `--utrecht-feedback-safe-fill-background-color` | `var(--denhaag-color-green-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23243c24%22%2F%3E%3C%2Fsvg%3E) `#243c24` | this set | | +| `--utrecht-feedback-safe-fill-color` | `var(--denhaag-color-green-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | | +| `--utrecht-feedback-success-fill-background-color` | `var(--tilburg-color-green-100)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23243c24%22%2F%3E%3C%2Fsvg%3E) `#243c24` | this set | | +| `--utrecht-feedback-success-fill-border-color` | `var(--tilburg-color-green-300)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--utrecht-feedback-success-fill-color` | `var(--tilburg-color-green-300)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--utrecht-feedback-warning-background-color` | `var(--denhaag-color-orange-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23683e05%22%2F%3E%3C%2Fsvg%3E) `#683e05` | this set | | +| `--utrecht-feedback-warning-color` | `var(--denhaag-color-orange-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffaa75%22%2F%3E%3C%2Fsvg%3E) `#ffaa75` | this set | | +| `--utrecht-feedback-warning-fill-background-color` | `var(--denhaag-color-orange-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23683e05%22%2F%3E%3C%2Fsvg%3E) `#683e05` | this set | | +| `--utrecht-feedback-warning-fill-border-color` | `var(--tilburg-color-orange-300)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f39419%22%2F%3E%3C%2Fsvg%3E) `#f39419` | this set | | +| `--utrecht-feedback-warning-fill-color` | `var(--denhaag-color-orange-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f7a06a%22%2F%3E%3C%2Fsvg%3E) `#f7a06a` | this set | | +| `--utrecht-focus-border-color` | `var(--denhaag-focus-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f8da72%22%2F%3E%3C%2Fsvg%3E) `#f8da72` | this set | | +| `--utrecht-focus-border-style` | `var(--denhaag-focus-border-style)` | | this set | | +| `--utrecht-focus-outline-color` | `var(--denhaag-focus-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f8da72%22%2F%3E%3C%2Fsvg%3E) `#f8da72` | this set | | +| `--utrecht-focus-outline-offset` | `var(--denhaag-focus-offset)` | | this set | | +| `--utrecht-focus-outline-style` | `var(--denhaag-focus-border-style)` | | this set | | +| `--utrecht-focus-outline-width` | `var(--denhaag-focus-border-width)` | | this set | | +| `--utrecht-form-control-active-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--utrecht-form-control-active-border-color` | `var(--denhaag-color-grey-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-form-control-active-border-width` | `2px` | | this set | | +| `--utrecht-form-control-active-color` | `var(--denhaag-color-grey-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--utrecht-form-control-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--utrecht-form-control-border-color` | `var(--denhaag-color-grey-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-form-control-border-radius` | `var(--denhaag-border-radius)` | | this set | | +| `--utrecht-form-control-border-width` | `1px` | | this set | | +| `--utrecht-form-control-checked-background-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--utrecht-form-control-checked-border-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--utrecht-form-control-checked-border-width` | `2px` | | this set | | +| `--utrecht-form-control-checked-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-form-control-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--utrecht-form-control-disabled-background-color` | `var(--denhaag-color-grey-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--utrecht-form-control-disabled-border-color` | `var(--denhaag-color-grey-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-form-control-disabled-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--utrecht-form-control-focus-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--utrecht-form-control-focus-border-color` | `var(--denhaag-color-black)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--utrecht-form-control-focus-border-width` | `2px` | | this set | | +| `--utrecht-form-control-focus-color` | `var(--denhaag-color-black)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--utrecht-form-control-font-family` | `var(--utrecht-document-font-family)` | | this set | | +| `--utrecht-form-control-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--utrecht-form-control-hover-background-color` | `var(--denhaag-color-warmgrey-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23201c16%22%2F%3E%3C%2Fsvg%3E) `#201c16` | this set | | +| `--utrecht-form-control-hover-border-color` | `var(--denhaag-color-grey-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-form-control-hover-border-width` | `2px` | | this set | | +| `--utrecht-form-control-hover-color` | `var(--denhaag-color-grey-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--utrecht-form-control-invalid-background-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--utrecht-form-control-invalid-border-color` | `var(--denhaag-color-red-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed4734%22%2F%3E%3C%2Fsvg%3E) `#ed4734` | this set | | +| `--utrecht-form-control-invalid-border-width` | `2px` | | this set | | +| `--utrecht-form-control-invalid-color` | `var(--denhaag-color-red-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f95644%22%2F%3E%3C%2Fsvg%3E) `#f95644` | this set | | +| `--utrecht-form-control-padding-block-end` | `12px` | | this set | | +| `--utrecht-form-control-padding-block-start` | `12px` | | this set | | +| `--utrecht-form-control-padding-inline-end` | `12px` | | this set | | +| `--utrecht-form-control-padding-inline-start` | `12px` | | this set | | +| `--utrecht-form-control-placeholder-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--utrecht-form-field-description-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--utrecht-form-field-description-font-family` | `var(--utrecht-document-font-family)` | | this set | | +| `--utrecht-form-field-description-font-size` | `var(--utrecht-document-font-size)` | | this set | | +| `--utrecht-form-field-description-font-weight` | `var(--tilburg-document-font-weight)` | | this set | | +| `--utrecht-form-field-description-invalid-color` | `var(--denhaag-color-red-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f95644%22%2F%3E%3C%2Fsvg%3E) `#f95644` | this set | | +| `--utrecht-form-field-description-line-height` | `var(--tilburg-document-line-height)` | | this set | | +| `--utrecht-form-field-description-margin-block-end` | `var(--denhaag-size-3xs)` | | this set | | +| `--utrecht-form-field-error-message-color` | `var(--utrecht-form-control-invalid-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f95644%22%2F%3E%3C%2Fsvg%3E) `#f95644` | this set | | +| `--utrecht-form-field-error-message-font-family` | `var(--utrecht-document-font-family)` | | this set | | +| `--utrecht-form-field-error-message-font-size` | `var(--utrecht-document-font-size)` | | this set | | +| `--utrecht-form-field-error-message-font-weight` | `var(--utrecht-document-font-weight)` | | this set | | +| `--utrecht-form-field-error-message-icon-margin-inline-end` | `var( --tilburg-space-text-mouse )` | | this set | | +| `--utrecht-form-field-error-message-icon-size` | `var(--tilburg-icon-functional-size)` | | this set | | +| `--utrecht-form-field-error-message-line-height` | `var( --tilburg-document-line-height )` | | this set | | +| `--utrecht-form-field-error-message-margin-block-start` | `var(--denhaag-size-3xs)` | | this set | | +| `--utrecht-form-field-label-margin-block-end` | `var(--denhaag-space-block-2xs)` | | this set | | +| `--utrecht-form-field-margin-block-end` | `var(--denhaag-space-block-lg)` | | this set | | +| `--utrecht-form-field-margin-block-start` | `var(--denhaag-space-block-lg)` | | this set | | +| `--utrecht-form-fieldset-legend-color` | `var(--denhaag-color-grey-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--utrecht-form-fieldset-legend-font-family` | `var(--denhaag-typography-sans-serif-alternate-font-family)` | | this set | | +| `--utrecht-form-fieldset-legend-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--utrecht-form-fieldset-legend-font-weight` | `var(--denhaag-typography-weight-bold)` | | this set | | +| `--utrecht-form-fieldset-legend-line-height` | `var(--denhaag-typography-scale-base-line-height)` | | this set | | +| `--utrecht-form-fieldset-legend-margin-block-end` | `8px` | | this set | | +| `--utrecht-form-fieldset-margin-block-end` | `12px` | | this set | | +| `--utrecht-form-fieldset-margin-block-start` | `12px` | | this set | | +| `--utrecht-form-label-checkbox-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--utrecht-form-label-checkbox-font-weight` | `400` | | this set | | +| `--utrecht-form-label-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--utrecht-form-label-font-family` | `var(--tilburg-document-font-family)` | | this set | | +| `--utrecht-form-label-font-size` | `var(--utrecht-document-font-size)` | | this set | | +| `--utrecht-form-label-font-weight` | `var(--denhaag-typography-weight-bold)` | | this set | | +| `--utrecht-form-label-line-height` | `var(--tilburg-document-line-height)` | | this set | | +| `--utrecht-form-label-radio-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--utrecht-form-label-radio-font-weight` | `400` | | this set | | +| `--utrecht-form-toggle-accent-color` | `var(--denhaag-color-grey-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-form-toggle-border-color` | `var(--denhaag-color-grey-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-form-toggle-border-radius` | `12px` | | this set | | +| `--utrecht-form-toggle-border-width` | `0` | | this set | | +| `--utrecht-form-toggle-checked-accent-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--utrecht-form-toggle-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-form-toggle-focus-border-color` | `var(--denhaag-focus-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f8da72%22%2F%3E%3C%2Fsvg%3E) `#f8da72` | this set | | +| `--utrecht-form-toggle-focus-border-style` | `var(--denhaag-focus-border-style)` | | this set | | +| `--utrecht-form-toggle-focus-border-width` | `var(--denhaag-focus-border-width)` | | this set | | +| `--utrecht-form-toggle-thumb-margin-inline-end` | `.2rem` | | this set | | +| `--utrecht-form-toggle-thumb-margin-inline-start` | `.2rem` | | this set | | +| `--utrecht-form-toggle-thumb-min-inline-size` | `1em` | | this set | | +| `--utrecht-heading-1-color` | `var(--tilburg-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--utrecht-heading-1-font-family` | `var(--utrecht-heading-font-family)` | | this set | | +| `--utrecht-heading-1-font-size` | `var(--denhaag-typography-scale-3xl-font-size)` | | this set | | +| `--utrecht-heading-1-font-weight` | `var(--tilburg-heading-font-weight)` | | this set | | +| `--utrecht-heading-1-line-height` | `var(--denhaag-typography-scale-3xl-line-height)` | | this set | | +| `--utrecht-heading-2-color` | `var(--tilburg-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--utrecht-heading-2-font-family` | `var(--utrecht-heading-font-family)` | | this set | | +| `--utrecht-heading-2-font-size` | `var(--denhaag-typography-scale-2xl-font-size)` | | this set | | +| `--utrecht-heading-2-font-weight` | `var(--tilburg-heading-font-weight)` | | this set | | +| `--utrecht-heading-2-line-height` | `var(--denhaag-typography-scale-2xl-line-height)` | | this set | | +| `--utrecht-heading-2-margin-block-end` | `0.5rem` | | this set | | +| `--utrecht-heading-2-margin-block-start` | `1.775rem` | | this set | | +| `--utrecht-heading-3-color` | `var(--tilburg-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--utrecht-heading-3-font-family` | `var(--utrecht-heading-font-family)` | | this set | | +| `--utrecht-heading-3-font-size` | `var(--denhaag-typography-scale-xl-font-size)` | | this set | | +| `--utrecht-heading-3-font-weight` | `var(--tilburg-heading-font-weight)` | | this set | | +| `--utrecht-heading-3-line-height` | `var(--denhaag-typography-scale-xl-line-height)` | | this set | | +| `--utrecht-heading-3-margin-block-end` | `0.375rem` | | this set | | +| `--utrecht-heading-3-margin-block-start` | `1.33125rem` | | this set | | +| `--utrecht-heading-4-color` | `var(--tilburg-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--utrecht-heading-4-font-family` | `var(--utrecht-heading-font-family)` | | this set | | +| `--utrecht-heading-4-font-size` | `var(--denhaag-typography-scale-lg-font-size)` | | this set | | +| `--utrecht-heading-4-font-weight` | `var(--tilburg-heading-font-weight)` | | this set | | +| `--utrecht-heading-4-line-height` | `var(--denhaag-typography-scale-lg-line-height)` | | this set | | +| `--utrecht-heading-4-margin-block-end` | `0.3125rem` | | this set | | +| `--utrecht-heading-4-margin-block-start` | `1.1125rem` | | this set | | +| `--utrecht-heading-5-color` | `var(--tilburg-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--utrecht-heading-5-font-family` | `var(--utrecht-heading-font-family)` | | this set | | +| `--utrecht-heading-5-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--utrecht-heading-5-font-weight` | `var(--tilburg-heading-font-weight)` | | this set | | +| `--utrecht-heading-5-line-height` | `var(--denhaag-typography-scale-base-line-height)` | | this set | | +| `--utrecht-heading-5-margin-block-end` | `0.28125rem` | | this set | | +| `--utrecht-heading-5-margin-block-start` | `1rem` | | this set | | +| `--utrecht-heading-6-color` | `var(--tilburg-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--utrecht-heading-6-font-family` | `var(--tilburg-heading-font-family)` | | this set | | +| `--utrecht-heading-6-font-size` | `var(--tilburg-typography-font-size-sm)` | | this set | | +| `--utrecht-heading-6-font-weight` | `var(--tilburg-heading-font-weight)` | | this set | | +| `--utrecht-heading-6-line-height` | `var(--tilburg-typography-line-height-md)` | | this set | | +| `--utrecht-heading-color` | `var(--denhaag-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--utrecht-heading-font-family` | `var(--denhaag-typography-sans-serif-alternate-font-family)` | | this set | | +| `--utrecht-heading-font-weight` | `var(--denhaag-typography-weight-bold)` | | this set | | +| `--utrecht-icon-baseline-inset-block-start` | `0.125em` | | this set | | +| `--utrecht-icon-size` | `1.125rem` | | this set | | +| `--utrecht-link-active-color` | `var(--denhaag-color-blue-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b0dafc%22%2F%3E%3C%2Fsvg%3E) `#b0dafc` | this set | | +| `--utrecht-link-active-text-decoration` | `none` | | this set | | +| `--utrecht-link-color` | `var(--denhaag-color-blue-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235eaced%22%2F%3E%3C%2Fsvg%3E) `#5eaced` | this set | | +| `--utrecht-link-focus-background-color` | `transparent` | | this set | | +| `--utrecht-link-focus-color` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237ec0f6%22%2F%3E%3C%2Fsvg%3E) `#7ec0f6` | this set | | +| `--utrecht-link-focus-text-decoration` | `none` | | this set | | +| `--utrecht-link-focus-text-decoration-thickness` | `1px` | | this set | | +| `--utrecht-link-font-family` | `var(--tilburg-document-font-family)` | | this set | | +| `--utrecht-link-font-size` | `var(--tilburg-document-font-size)` | | this set | | +| `--utrecht-link-font-weight` | `var(--tilburg-document-font-weight)` | | this set | | +| `--utrecht-link-hover-color` | `var(--denhaag-color-blue-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237ec0f6%22%2F%3E%3C%2Fsvg%3E) `#7ec0f6` | this set | | +| `--utrecht-link-hover-text-decoration` | `none` | | this set | | +| `--utrecht-link-hover-text-decoration-thickness` | `auto` | | this set | | +| `--utrecht-link-icon-margin-inline` | `var(--tilburg-space-text-beetle)` | | this set | | +| `--utrecht-link-icon-size` | `var(--tilburg-icon-functional-size)` | | this set | | +| `--utrecht-link-line-height` | `var(--tilburg-document-line-height)` | | this set | | +| `--utrecht-link-list-margin-block-end` | `var(--denhaag-space-block-xs)` | | this set | | +| `--utrecht-link-list-margin-block-start` | `var(--denhaag-space-block-xs)` | | this set | | +| `--utrecht-link-list-row-gap` | `var(--denhaag-space-block-xs)` | | this set | | +| `--utrecht-link-social-background-color` | `transparent` | | this set | | +| `--utrecht-link-social-border-color` | `transparent` | | this set | | +| `--utrecht-link-social-border-width` | `5px` | | this set | | +| `--utrecht-link-social-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-link-social-hover-color` | `var(--denhaag-color-ocher-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffdf3d%22%2F%3E%3C%2Fsvg%3E) `#ffdf3d` | this set | | +| `--utrecht-link-text-decoration` | `underline` | | this set | | +| `--utrecht-link-text-decoration-color` | `var(--tilburg-interaction-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--utrecht-link-text-decoration-thickness` | `auto` | | this set | | +| `--utrecht-link-text-underline-offset` | `auto` | | this set | | +| `--utrecht-link-visited-color` | `var(--denhaag-color-blue-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235eaced%22%2F%3E%3C%2Fsvg%3E) `#5eaced` | this set | | +| `--utrecht-list-social-item-margin-inline-end` | `14px` | | this set | | +| `--utrecht-logo-max-block-size` | `97px` | | this set | | +| `--utrecht-ordered-list-color` | `var(--tilburg-document-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--utrecht-ordered-list-font-family` | `var(--tilburg-document-font-family)` | | this set | | +| `--utrecht-ordered-list-font-size` | `var(--utrecht-document-font-size)` | | this set | | +| `--utrecht-ordered-list-font-weight` | `var(--tilburg-document-font-weight)` | | this set | | +| `--utrecht-ordered-list-item-margin-block-end` | `var(--denhaag-space-block-2xs)` | | this set | | +| `--utrecht-ordered-list-item-margin-block-start` | `var(--denhaag-space-block-2xs)` | | this set | | +| `--utrecht-ordered-list-line-height` | `var(--utrecht-document-line-height)` | | this set | | +| `--utrecht-ordered-list-padding-inline-start` | `var(--denhaag-space-inline-xl)` | | this set | | +| `--utrecht-page-footer-background-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23acacac%22%2F%3E%3C%2Fsvg%3E) `#acacac` | this set | | +| `--utrecht-page-footer-color` | `var(--denhaag-color-white)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-page-footer-padding-block-end` | `40px` | | this set | | +| `--utrecht-page-footer-padding-block-start` | `30px` | | this set | | +| `--utrecht-page-footer-padding-inline-end` | `30px` | | this set | | +| `--utrecht-page-footer-padding-inline-start` | `30px` | | this set | | +| `--utrecht-paragraph-color` | `var(--tilburg-document-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--utrecht-paragraph-distanced-margin-block-end` | `0` | | this set | | +| `--utrecht-paragraph-distanced-margin-block-start` | `0` | | this set | | +| `--utrecht-paragraph-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--utrecht-paragraph-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--utrecht-paragraph-font-weight` | `var(--denhaag-typography-weight-regular)` | | this set | | +| `--utrecht-paragraph-lead-color` | `var(--tilburg-document-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--utrecht-paragraph-lead-font-family` | `var(--tilburg-document-font-family)` | | this set | | +| `--utrecht-paragraph-lead-font-size` | `var(--denhaag-typography-scale-lg-font-size)` | | this set | | +| `--utrecht-paragraph-lead-font-weight` | `var(--tilburg-document-font-weight)` | | this set | | +| `--utrecht-paragraph-lead-line-height` | `26px` | | this set | | +| `--utrecht-paragraph-lead-list-margin-block-start` | `var(--denhaag-space-block-2xl)` | | this set | | +| `--utrecht-paragraph-lead-paragraph-margin-block-start` | `var(--denhaag-space-block-2xl)` | | this set | | +| `--utrecht-paragraph-line-height` | `var(--denhaag-typography-scale-base-line-height)` | | this set | | +| `--utrecht-paragraph-list-margin-block-start` | `var(--denhaag-space-block-xl)` | | this set | | +| `--utrecht-paragraph-paragraph-margin-block-start` | `14.24px` | | this set | | +| `--utrecht-paragraph-small-color` | `var(--tilburg-document-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--utrecht-paragraph-small-font-family` | `var(--tilburg-document-font-family)` | | this set | | +| `--utrecht-paragraph-small-font-size` | `var(--tilburg-typography-font-size-sm)` | | this set | | +| `--utrecht-paragraph-small-font-weight` | `var(--tilburg-document-font-weight)` | | this set | | +| `--utrecht-paragraph-small-line-height` | `var(--tilburg-document-line-height)` | | this set | | +| `--utrecht-radio-button-active-background-color` | `var(--utrecht-form-control-active-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--utrecht-radio-button-active-border-color` | `var(--utrecht-form-control-active-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-radio-button-active-border-width` | `var(--utrecht-form-control-active-border-width)` | | this set | | +| `--utrecht-radio-button-active-color` | `var(--utrecht-form-control-active-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--utrecht-radio-button-background-color` | `var(--utrecht-form-control-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--utrecht-radio-button-border-color` | `var(--utrecht-form-control-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-radio-button-border-width` | `var(--utrecht-form-control-border-width)` | | this set | | +| `--utrecht-radio-button-checked-active-background-color` | `var(--denhaag-color-green-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b4fbcb%22%2F%3E%3C%2Fsvg%3E) `#b4fbcb` | this set | | +| `--utrecht-radio-button-checked-active-border-color` | `var(--denhaag-color-green-5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b4fbcb%22%2F%3E%3C%2Fsvg%3E) `#b4fbcb` | this set | | +| `--utrecht-radio-button-checked-active-border-width` | `var(--utrecht-form-control-checked-border-width)` | | this set | | +| `--utrecht-radio-button-checked-active-color` | `var(--utrecht-form-control-checked-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-radio-button-checked-background-color` | `var(--utrecht-form-control-checked-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--utrecht-radio-button-checked-border-color` | `var(--utrecht-form-control-checked-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--utrecht-radio-button-checked-border-width` | `var(--utrecht-form-control-checked-border-width)` | | this set | | +| `--utrecht-radio-button-checked-color` | `var(--utrecht-form-control-checked-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-radio-button-checked-disabled-background-color` | `var( --tilburg-form-control-disabled-background-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23201c16%22%2F%3E%3C%2Fsvg%3E) `#201c16` | this set | | +| `--utrecht-radio-button-checked-disabled-border-color` | `var( --tilburg-form-control-disabled-border-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-radio-button-checked-disabled-border-width` | `var( --tilburg-form-control-disabled-border-width )` | | this set | | +| `--utrecht-radio-button-checked-disabled-color` | `var( --tilburg-form-control-disabled-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-radio-button-checked-focus-background-color` | `var(--denhaag-color-green-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | | +| `--utrecht-radio-button-checked-focus-border-color` | `var(--utrecht-form-control-checked-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--utrecht-radio-button-checked-focus-border-width` | `var(--utrecht-form-control-checked-border-width)` | | this set | | +| `--utrecht-radio-button-checked-focus-color` | `var(--utrecht-form-control-checked-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-radio-button-checked-hover-background-color` | `var(--denhaag-color-green-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | | +| `--utrecht-radio-button-checked-hover-border-color` | `var(--denhaag-color-green-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | | +| `--utrecht-radio-button-checked-hover-border-width` | `var(--utrecht-form-control-checked-border-width)` | | this set | | +| `--utrecht-radio-button-checked-hover-color` | `var(--utrecht-form-control-checked-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-radio-button-disabled-background-color` | `var(--utrecht-form-control-disabled-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--utrecht-radio-button-disabled-border-color` | `var(--utrecht-form-control-disabled-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-radio-button-disabled-border-width` | `var(--utrecht-form-control-border-width)` | | this set | | +| `--utrecht-radio-button-disabled-color` | `var(--utrecht-form-control-disabled-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--utrecht-radio-button-focus-background-color` | `var(--utrecht-form-control-focus-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--utrecht-radio-button-focus-border-color` | `var(--utrecht-form-control-focus-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--utrecht-radio-button-focus-border-width` | `var(--utrecht-form-control-focus-border-width)` | | this set | | +| `--utrecht-radio-button-focus-color` | `var(--utrecht-form-control-focus-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--utrecht-radio-button-hover-background-color` | `var(--utrecht-form-control-hover-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23201c16%22%2F%3E%3C%2Fsvg%3E) `#201c16` | this set | | +| `--utrecht-radio-button-hover-border-color` | `var(--utrecht-form-control-hover-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-radio-button-hover-border-width` | `var(--utrecht-form-control-hover-border-width)` | | this set | | +| `--utrecht-radio-button-icon-size` | `35%` | | this set | | +| `--utrecht-radio-button-invalid-background-color` | `var(--utrecht-form-control-invalid-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--utrecht-radio-button-invalid-border-color` | `var(--utrecht-form-control-invalid-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed4734%22%2F%3E%3C%2Fsvg%3E) `#ed4734` | this set | | +| `--utrecht-radio-button-invalid-border-width` | `var(--utrecht-form-control-invalid-border-width)` | | this set | | +| `--utrecht-radio-button-invalid-color` | `var(--utrecht-form-control-invalid-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f95644%22%2F%3E%3C%2Fsvg%3E) `#f95644` | this set | | +| `--utrecht-radio-button-label-font-family` | `var(--tilburg-document-font-family)` | | this set | | +| `--utrecht-radio-button-label-font-size` | `var(--tilburg-document-font-size)` | | this set | | +| `--utrecht-radio-button-label-font-weight` | `var(--tilburg-document-font-weight)` | | this set | | +| `--utrecht-radio-button-label-line-height` | `var(--tilburg-document-line-height)` | | this set | | +| `--utrecht-radio-button-min-block-size` | `16px` | | this set | | +| `--utrecht-radio-button-min-inline-size` | `16px` | | this set | | +| `--utrecht-radio-button-size` | `22px` | | this set | | +| `--utrecht-select-background-color` | `var(--utrecht-form-control-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--utrecht-select-background-image` | `url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z' fill='currentColor'/%3E%3C/svg%3E%0A")` | | this set | | +| `--utrecht-select-border-bottom-width` | `auto` | | this set | | +| `--utrecht-select-border-color` | `var(--utrecht-form-control-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-select-border-radius` | `var(--denhaag-border-radius)` | | this set | | +| `--utrecht-select-border-width` | `var(--utrecht-form-control-border-width)` | | this set | | +| `--utrecht-select-color` | `var(--utrecht-form-control-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--utrecht-select-disabled-background-color` | `var(--utrecht-form-control-disabled-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--utrecht-select-disabled-border-color` | `var(--utrecht-form-control-disabled-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-select-disabled-color` | `var(--utrecht-form-control-disabled-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--utrecht-select-focus-background-color` | `var(--utrecht-form-control-focus-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--utrecht-select-focus-border-color` | `var(--utrecht-form-control-focus-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--utrecht-select-focus-border-width` | `var( --tilburg-form-control-focus-border-width )` | | this set | | +| `--utrecht-select-focus-color` | `var(--utrecht-form-control-focus-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--utrecht-select-font-family` | `var(--utrecht-document-font-family)` | | this set | | +| `--utrecht-select-font-size` | `var(--utrecht-document-font-size)` | | this set | | +| `--utrecht-select-font-weight` | `var(--tilburg-document-font-weight)` | | this set | | +| `--utrecht-select-hover-background-color` | `var( --tilburg-form-control-hover-background-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23201c16%22%2F%3E%3C%2Fsvg%3E) `#201c16` | this set | | +| `--utrecht-select-hover-border-color` | `var( --tilburg-form-control-hover-border-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-select-hover-border-width` | `var( --tilburg-form-control-hover-border-width )` | | this set | | +| `--utrecht-select-hover-color` | `var(--tilburg-form-control-hover-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--utrecht-select-icon-size` | `var(--tilburg-icon-functional-size)` | | this set | | +| `--utrecht-select-invalid-background-color` | `var(--utrecht-form-control-invalid-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--utrecht-select-invalid-border-color` | `var(--utrecht-form-control-invalid-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed4734%22%2F%3E%3C%2Fsvg%3E) `#ed4734` | this set | | +| `--utrecht-select-invalid-border-width` | `var(--utrecht-form-control-invalid-border-width)` | | this set | | +| `--utrecht-select-invalid-color` | `var(--tilburg-form-control-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--utrecht-select-max-inline-size` | `400px` | | this set | | +| `--utrecht-select-min-block-size` | `3rem` | | this set | | +| `--utrecht-select-padding-block-end` | `var(--denhaag-space-block-sm)` | | this set | | +| `--utrecht-select-padding-block-start` | `var(--denhaag-space-block-sm)` | | this set | | +| `--utrecht-select-padding-inline-end` | `var(--denhaag-space-inline-sm)` | | this set | | +| `--utrecht-select-padding-inline-start` | `var(--denhaag-space-inline-sm)` | | this set | | +| `--utrecht-separator-block-end` | `0` | | this set | | +| `--utrecht-separator-block-size` | `1px` | | this set | | +| `--utrecht-separator-block-start` | `0` | | this set | | +| `--utrecht-separator-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--utrecht-separator-margin-block-end` | `16px` | | this set | | +| `--utrecht-separator-margin-block-start` | `16px` | | this set | | +| `--utrecht-separator-width` | `100%` | | this set | | +| `--utrecht-skip-link-background-color` | `var( --tilburg-document-inverse-background-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23c4c4c4%22%2F%3E%3C%2Fsvg%3E) `#c4c4c4` | this set | | +| `--utrecht-skip-link-border-color` | `transparent` | | this set | | +| `--utrecht-skip-link-border-width` | `var(--tilburg-border-width-sm)` | | this set | | +| `--utrecht-skip-link-box-block-end-shadow` | `var(--tilburg-box-shadow-lg)` | | this set | | +| `--utrecht-skip-link-color` | `var(--tilburg-document-inverse-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-skip-link-focus-background-color` | `var(--tilburg-focus-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235ba6e4%22%2F%3E%3C%2Fsvg%3E) `#5ba6e4` | this set | | +| `--utrecht-skip-link-focus-border-color` | `transparent` | | this set | | +| `--utrecht-skip-link-focus-color` | `var(--tilburg-focus-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--utrecht-skip-link-focus-text-decoration` | `none` | | this set | | +| `--utrecht-skip-link-font-family` | `var(--tilburg-document-font-family)` | | this set | | +| `--utrecht-skip-link-font-size` | `var(--tilburg-document-font-size)` | | this set | | +| `--utrecht-skip-link-font-weight` | `var(--tilburg-document-strong-font-weight)` | | this set | | +| `--utrecht-skip-link-min-block-size` | `var(--tilburg-pointer-target-min-size)` | | this set | | +| `--utrecht-skip-link-min-inline-size` | `var(--tilburg-pointer-target-min-size)` | | this set | | +| `--utrecht-skip-link-padding-block-end` | `var(--tilburg-space-block-snail)` | | this set | | +| `--utrecht-skip-link-padding-block-start` | `var(--tilburg-space-block-snail)` | | this set | | +| `--utrecht-skip-link-padding-inline-end` | `var(--tilburg-space-inline-mouse)` | | this set | | +| `--utrecht-skip-link-padding-inline-start` | `var(--tilburg-space-inline-mouse)` | | this set | | +| `--utrecht-skip-link-text-decoration` | `underline` | | this set | | +| `--utrecht-space-block-2xl` | `32px` | | this set | | +| `--utrecht-space-block-2xs` | `4px` | | this set | | +| `--utrecht-space-block-3xl` | `48px` | | this set | | +| `--utrecht-space-block-3xs` | `2px` | | this set | | +| `--utrecht-space-block-4xl` | `64px` | | this set | | +| `--utrecht-space-block-5xl` | `80px` | | this set | | +| `--utrecht-space-block-lg` | `24px` | | this set | | +| `--utrecht-space-block-md` | `16px` | | this set | | +| `--utrecht-space-block-sm` | `12px` | | this set | | +| `--utrecht-space-block-xl` | `28px` | | this set | | +| `--utrecht-space-block-xs` | `8px` | | this set | | +| `--utrecht-space-column-2xl` | `32px` | | this set | | +| `--utrecht-space-column-2xs` | `4px` | | this set | | +| `--utrecht-space-column-3xl` | `48px` | | this set | | +| `--utrecht-space-column-3xs` | `2px` | | this set | | +| `--utrecht-space-column-4xl` | `64px` | | this set | | +| `--utrecht-space-column-4xs` | `1px` | | this set | | +| `--utrecht-space-column-5xl` | `80px` | | this set | | +| `--utrecht-space-column-lg` | `24px` | | this set | | +| `--utrecht-space-column-md` | `16px` | | this set | | +| `--utrecht-space-column-sm` | `12px` | | this set | | +| `--utrecht-space-column-xl` | `28px` | | this set | | +| `--utrecht-space-column-xs` | `8px` | | this set | | +| `--utrecht-space-inline-2xl` | `32px` | | this set | | +| `--utrecht-space-inline-2xs` | `4px` | | this set | | +| `--utrecht-space-inline-3xl` | `48px` | | this set | | +| `--utrecht-space-inline-3xs` | `2px` | | this set | | +| `--utrecht-space-inline-lg` | `24px` | | this set | | +| `--utrecht-space-inline-md` | `16px` | | this set | | +| `--utrecht-space-inline-sm` | `12px` | | this set | | +| `--utrecht-space-inline-xl` | `28px` | | this set | | +| `--utrecht-space-inline-xs` | `8px` | | this set | | +| `--utrecht-space-row-2xl` | `32px` | | this set | | +| `--utrecht-space-row-2xs` | `4px` | | this set | | +| `--utrecht-space-row-3xl` | `48px` | | this set | | +| `--utrecht-space-row-3xs` | `2px` | | this set | | +| `--utrecht-space-row-4xl` | `64px` | | this set | | +| `--utrecht-space-row-4xs` | `1px` | | this set | | +| `--utrecht-space-row-5xl` | `80px` | | this set | | +| `--utrecht-space-row-lg` | `24px` | | this set | | +| `--utrecht-space-row-md` | `16px` | | this set | | +| `--utrecht-space-row-sm` | `12px` | | this set | | +| `--utrecht-space-row-xl` | `28px` | | this set | | +| `--utrecht-space-row-xs` | `8px` | | this set | | +| `--utrecht-space-text-2xl` | `32px` | | this set | | +| `--utrecht-space-text-2xs` | `4px` | | this set | | +| `--utrecht-space-text-3xl` | `48px` | | this set | | +| `--utrecht-space-text-3xs` | `2px` | | this set | | +| `--utrecht-space-text-lg` | `24px` | | this set | | +| `--utrecht-space-text-md` | `16px` | | this set | | +| `--utrecht-space-text-sm` | `12px` | | this set | | +| `--utrecht-space-text-xl` | `28px` | | this set | | +| `--utrecht-space-text-xs` | `8px` | | this set | | +| `--utrecht-table-border-color` | `var(--denhaag-color-grey-2)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--utrecht-table-border-width` | `1px` | | this set | | +| `--utrecht-table-caption-color` | `var(--denhaag-color-black)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--utrecht-table-caption-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--utrecht-table-caption-font-size` | `var(--denhaag-typography-scale-xl-font-size)` | | this set | | +| `--utrecht-table-caption-font-weight` | `700` | | this set | | +| `--utrecht-table-caption-line-height` | `var(--denhaag-typography-scale-s-line-height)` | | this set | | +| `--utrecht-table-caption-margin-block-end` | `var(--denhaag-space-block-xl)` | | this set | | +| `--utrecht-table-caption-text-align` | `start` | | this set | | +| `--utrecht-table-cell-line-height` | `var(--denhaag-typography-scale-base-line-height)` | | this set | | +| `--utrecht-table-cell-padding-block-end` | `var(--denhaag-space-block-md)` | | this set | | +| `--utrecht-table-cell-padding-block-start` | `var(--denhaag-space-block-md)` | | this set | | +| `--utrecht-table-cell-padding-inline-end` | `var(--denhaag-space-inline-md)` | | this set | | +| `--utrecht-table-cell-padding-inline-start` | `var(--denhaag-space-inline-md)` | | this set | | +| `--utrecht-table-container-box-inline-end-shadow` | `var(--tilburg-box-shadow-lg)` | | this set | | +| `--utrecht-table-container-box-inline-start-shadow` | `var(--tilburg-box-shadow-lg)` | | this set | | +| `--utrecht-table-data-cell-color` | `var(--tilburg-document-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--utrecht-table-data-cell-font-family` | `var(--tilburg-document-font-family)` | | this set | | +| `--utrecht-table-data-cell-font-size` | `var(--tilburg-document-font-size)` | | this set | | +| `--utrecht-table-data-cell-font-weight` | `var(--tilburg-document-font-weight)` | | this set | | +| `--utrecht-table-footer-background-color` | `transparent` | | this set | | +| `--utrecht-table-footer-border-block-end-color` | `var(--tilburg-line-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-table-footer-border-block-end-width` | `var(--tilburg-border-width-sm)` | | this set | | +| `--utrecht-table-footer-cell-color` | `var(--tilburg-document-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--utrecht-table-footer-cell-font-family` | `var(--tilburg-document-font-family)` | | this set | | +| `--utrecht-table-footer-cell-font-size` | `var(--tilburg-document-font-size)` | | this set | | +| `--utrecht-table-footer-cell-font-weight` | `var( --tilburg-document-strong-font-weight )` | | this set | | +| `--utrecht-table-header-background-color` | `transparent` | | this set | | +| `--utrecht-table-header-border-block-end-color` | `var(--denhaag-color-grey-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--utrecht-table-header-border-block-end-width` | `1px` | | this set | | +| `--utrecht-table-header-cell-color` | `var(--denhaag-color-green-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237adc98%22%2F%3E%3C%2Fsvg%3E) `#7adc98` | this set | | +| `--utrecht-table-header-cell-font-family` | `var(--tilburg-document-font-family)` | | this set | | +| `--utrecht-table-header-cell-font-size` | `18px` | | this set | | +| `--utrecht-table-header-cell-font-weight` | `700` | | this set | | +| `--utrecht-table-row-alternate-even-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22rgb%28255%2C%20255%2C%20255%29%22%2F%3E%3C%2Fsvg%3E) `rgb(255, 255, 255)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--utrecht-table-row-alternate-odd-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22rgb%28250%2C%20250%2C%20250%29%22%2F%3E%3C%2Fsvg%3E) `rgb(250, 250, 250)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23191919%22%2F%3E%3C%2Fsvg%3E) `#191919` | this set | | +| `--utrecht-table-row-background-color` | `transparent` | | this set | | +| `--utrecht-table-row-border-block-end-color` | `var(--denhaag-color-grey-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--utrecht-table-row-border-block-end-width` | `1px` | | this set | | +| `--utrecht-table-row-padding-inline-end` | `var(--denhaag-space-inline-xl)` | | this set | | +| `--utrecht-table-row-padding-inline-start` | `var(--denhaag-space-inline-xl)` | | this set | | +| `--utrecht-textarea-background-color` | `var(--tilburg-form-control-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--utrecht-textarea-border-block-end-width` | `var(--utrecht-textarea-border-width)` | | this set | | +| `--utrecht-textarea-border-bottom-width` | `1px` | | this set | | +| `--utrecht-textarea-border-color` | `var(--denhaag-color-grey-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-textarea-border-radius` | `3px` | | this set | | +| `--utrecht-textarea-border-width` | `1px` | | this set | | +| `--utrecht-textarea-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--utrecht-textarea-disabled-background-color` | `var(--utrecht-form-control-disabled-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--utrecht-textarea-disabled-border-color` | `var(--utrecht-form-control-disabled-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-textarea-disabled-color` | `var(--utrecht-form-control-disabled-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--utrecht-textarea-focus-background-color` | `var(--utrecht-form-control-focus-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--utrecht-textarea-focus-border-color` | `var(--utrecht-form-control-focus-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--utrecht-textarea-focus-border-width` | `var(--utrecht-form-control-focus-border-width)` | | this set | | +| `--utrecht-textarea-focus-color` | `var(--utrecht-form-control-focus-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--utrecht-textarea-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--utrecht-textarea-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--utrecht-textarea-font-weight` | `var(--tilburg-document-font-weight)` | | this set | | +| `--utrecht-textarea-invalid-background-color` | `var(--utrecht-form-control-invalid-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--utrecht-textarea-invalid-border-bottom-width` | `var(--utrecht-form-control-invalid-border-width)` | | this set | | +| `--utrecht-textarea-invalid-border-color` | `var(--utrecht-form-control-invalid-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed4734%22%2F%3E%3C%2Fsvg%3E) `#ed4734` | this set | | +| `--utrecht-textarea-invalid-border-width` | `var(--utrecht-form-control-invalid-border-width)` | | this set | | +| `--utrecht-textarea-invalid-color` | `var(--utrecht-form-control-invalid-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f95644%22%2F%3E%3C%2Fsvg%3E) `#f95644` | this set | | +| `--utrecht-textarea-line-height` | `var(--denhaag-typography-scale-base-line-height)` | | this set | | +| `--utrecht-textarea-max-inline-size` | `400px` | | this set | | +| `--utrecht-textarea-padding-block-end` | `var(--tilburg-space-block-snail)` | | this set | | +| `--utrecht-textarea-padding-block-start` | `var(--tilburg-space-block-snail)` | | this set | | +| `--utrecht-textarea-padding-inline-end` | `var(--tilburg-space-inline-snail)` | | this set | | +| `--utrecht-textarea-padding-inline-start` | `var(--tilburg-space-inline-snail)` | | this set | | +| `--utrecht-textarea-placeholder-color` | `var( --tilburg-form-control-placeholder-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-textbox-background-color` | `var(--tilburg-form-control-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--utrecht-textbox-border-block-end-width` | `auto` | | this set | | +| `--utrecht-textbox-border-bottom-width` | `1px` | | this set | | +| `--utrecht-textbox-border-color` | `var(--denhaag-color-grey-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-textbox-border-radius` | `3px` | | this set | | +| `--utrecht-textbox-border-width` | `1px` | | this set | | +| `--utrecht-textbox-color` | `var(--denhaag-color-grey-4)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--utrecht-textbox-disabled-background-color` | `var(--denhaag-color-grey-1)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--utrecht-textbox-disabled-border-color` | `var( --tilburg-form-control-disabled-border-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-textbox-disabled-color` | `var(--tilburg-form-control-disabled-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-textbox-focus-background-color` | `var(--utrecht-form-control-focus-background-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--utrecht-textbox-focus-border-color` | `var(--utrecht-form-control-focus-border-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--utrecht-textbox-focus-border-width` | `var(--utrecht-form-control-focus-border-width)` | | this set | | +| `--utrecht-textbox-focus-color` | `var(--utrecht-form-control-focus-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--utrecht-textbox-font-family` | `var(--denhaag-typography-sans-serif-font-family)` | | this set | | +| `--utrecht-textbox-font-size` | `var(--denhaag-typography-scale-base-font-size)` | | this set | | +| `--utrecht-textbox-font-weight` | `var(--tilburg-document-font-weight)` | | this set | | +| `--utrecht-textbox-hover-background-color` | `var( --tilburg-form-control-hover-background-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23201c16%22%2F%3E%3C%2Fsvg%3E) `#201c16` | this set | | +| `--utrecht-textbox-hover-border-color` | `var( --tilburg-form-control-hover-border-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-textbox-hover-border-width` | `var( --tilburg-form-control-hover-border-width )` | | this set | | +| `--utrecht-textbox-hover-color` | `var(--tilburg-form-control-hover-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--utrecht-textbox-invalid-background-color` | `var( --tilburg-form-control-invalid-background-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--utrecht-textbox-invalid-border-bottom-width` | `var(--utrecht-form-control-invalid-border-width)` | | this set | | +| `--utrecht-textbox-invalid-border-color` | `var(--denhaag-color-red-3)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed4734%22%2F%3E%3C%2Fsvg%3E) `#ed4734` | this set | | +| `--utrecht-textbox-invalid-border-width` | `var(--utrecht-form-control-invalid-border-width)` | | this set | | +| `--utrecht-textbox-invalid-color` | `var(--tilburg-form-control-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--utrecht-textbox-line-height` | `var(--denhaag-typography-scale-base-line-height)` | | this set | | +| `--utrecht-textbox-max-inline-size` | `400px` | | this set | | +| `--utrecht-textbox-padding-block-end` | `var(--tilburg-space-block-snail)` | | this set | | +| `--utrecht-textbox-padding-block-start` | `var(--tilburg-space-block-snail)` | | this set | | +| `--utrecht-textbox-padding-inline-end` | `12px` | | this set | | +| `--utrecht-textbox-padding-inline-start` | `12px` | | this set | | +| `--utrecht-textbox-placeholder-color` | `var(--tilburg-form-control-placeholder-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--utrecht-textbox-read-only-background-color` | `var( --tilburg-form-control-read-only-background-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23201c16%22%2F%3E%3C%2Fsvg%3E) `#201c16` | this set | | +| `--utrecht-textbox-read-only-border-color` | `var( --tilburg-form-control-read-only-border-color )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--utrecht-textbox-read-only-color` | `var(--tilburg-form-control-read-only-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--utrecht-unordered-list-color` | `var(--tilburg-document-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | this set | | +| `--utrecht-unordered-list-font-family` | `var(--tilburg-document-font-family)` | | this set | | +| `--utrecht-unordered-list-font-size` | `var(--utrecht-document-font-size)` | | this set | | +| `--utrecht-unordered-list-font-weight` | `var(--tilburg-document-font-weight)` | | this set | | +| `--utrecht-unordered-list-item-margin-block-end` | `var(--denhaag-space-block-2xs)` | | this set | | +| `--utrecht-unordered-list-item-margin-block-start` | `var(--denhaag-space-block-2xs)` | | this set | | +| `--utrecht-unordered-list-item-padding-inline-start` | `var(--denhaag-space-inline-xl)` | | this set | | +| `--utrecht-unordered-list-line-height` | `var(--utrecht-document-line-height)` | | this set | | +| `--utrecht-unordered-list-marker-border-color` | `var(--tilburg-document-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23c4c4c4%22%2F%3E%3C%2Fsvg%3E) `#c4c4c4` | this set | | +| `--utrecht-unordered-list-marker-color` | `var(--tilburg-color-blue-300)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235ba6e4%22%2F%3E%3C%2Fsvg%3E) `#5ba6e4` | this set | | +| `--utrecht-unordered-list-padding-inline-start` | `var(--tilburg-space-inline-rabbit)` | | this set | | +| `--vng-color-black` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23000000%22%2F%3E%3C%2Fsvg%3E) `#000000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ebebeb%22%2F%3E%3C%2Fsvg%3E) `#ebebeb` | this set | | +| `--vng-color-black-txt` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232e2e2e%22%2F%3E%3C%2Fsvg%3E) `#2e2e2e` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23c4c4c4%22%2F%3E%3C%2Fsvg%3E) `#c4c4c4` | this set | | +| `--vng-color-blue-100` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23dbecfa%22%2F%3E%3C%2Fsvg%3E) `#dbecfa` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230c283f%22%2F%3E%3C%2Fsvg%3E) `#0c283f` | this set | | +| `--vng-color-blue-200` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23abcced%22%2F%3E%3C%2Fsvg%3E) `#abcced` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231a3f64%22%2F%3E%3C%2Fsvg%3E) `#1a3f64` | this set | | +| `--vng-color-blue-300` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231260a1%22%2F%3E%3C%2Fsvg%3E) `#1260a1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235ba6e4%22%2F%3E%3C%2Fsvg%3E) `#5ba6e4` | this set | | +| `--vng-color-blue-400` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23094b81%22%2F%3E%3C%2Fsvg%3E) `#094b81` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2373b7ee%22%2F%3E%3C%2Fsvg%3E) `#73b7ee` | this set | | +| `--vng-color-blue-500` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23032d4f%22%2F%3E%3C%2Fsvg%3E) `#032d4f` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239acdf6%22%2F%3E%3C%2Fsvg%3E) `#9acdf6` | this set | | +| `--vng-color-extra-limegreen` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238bc63f%22%2F%3E%3C%2Fsvg%3E) `#8bc63f` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2385ba40%22%2F%3E%3C%2Fsvg%3E) `#85ba40` | this set | | +| `--vng-color-extra-purple` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23513090%22%2F%3E%3C%2Fsvg%3E) `#513090` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238c6cc7%22%2F%3E%3C%2Fsvg%3E) `#8c6cc7` | this set | | +| `--vng-color-extra-yellow` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f8d62a%22%2F%3E%3C%2Fsvg%3E) `#f8d62a` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d0b012%22%2F%3E%3C%2Fsvg%3E) `#d0b012` | this set | | +| `--vng-color-gray-100` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f2f2f2%22%2F%3E%3C%2Fsvg%3E) `#f2f2f2` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--vng-color-gray-200` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f2f2f2%22%2F%3E%3C%2Fsvg%3E) `#f2f2f2` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f1f1f%22%2F%3E%3C%2Fsvg%3E) `#1f1f1f` | this set | | +| `--vng-color-gray-300` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--vng-color-gray-400` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d1d1d1%22%2F%3E%3C%2Fsvg%3E) `#d1d1d1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233b3b3b%22%2F%3E%3C%2Fsvg%3E) `#3b3b3b` | this set | | +| `--vng-color-gray-50` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f9f8f6%22%2F%3E%3C%2Fsvg%3E) `#f9f8f6` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23201c16%22%2F%3E%3C%2Fsvg%3E) `#201c16` | this set | | +| `--vng-color-gray-500` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237a7a7a%22%2F%3E%3C%2Fsvg%3E) `#7a7a7a` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--vng-color-gray-600` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237a7a7a%22%2F%3E%3C%2Fsvg%3E) `#7a7a7a` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23848484%22%2F%3E%3C%2Fsvg%3E) `#848484` | this set | | +| `--vng-color-gray-700` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%234a4a4a%22%2F%3E%3C%2Fsvg%3E) `#4a4a4a` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23acacac%22%2F%3E%3C%2Fsvg%3E) `#acacac` | this set | | +| `--vng-color-gray-800` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%234a4a4a%22%2F%3E%3C%2Fsvg%3E) `#4a4a4a` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23acacac%22%2F%3E%3C%2Fsvg%3E) `#acacac` | this set | | +| `--vng-color-gray-900` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232e2e2e%22%2F%3E%3C%2Fsvg%3E) `#2e2e2e` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23c4c4c4%22%2F%3E%3C%2Fsvg%3E) `#c4c4c4` | this set | | +| `--vng-color-gray-950` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232e2e2e%22%2F%3E%3C%2Fsvg%3E) `#2e2e2e` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23c4c4c4%22%2F%3E%3C%2Fsvg%3E) `#c4c4c4` | this set | | +| `--vng-color-green-100` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d5e7d5%22%2F%3E%3C%2Fsvg%3E) `#d5e7d5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23243c24%22%2F%3E%3C%2Fsvg%3E) `#243c24` | this set | | +| `--vng-color-green-200` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237eb67c%22%2F%3E%3C%2Fsvg%3E) `#7eb67c` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2351854f%22%2F%3E%3C%2Fsvg%3E) `#51854f` | this set | | +| `--vng-color-green-300` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23238541%22%2F%3E%3C%2Fsvg%3E) `#238541` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2374d492%22%2F%3E%3C%2Fsvg%3E) `#74d492` | this set | | +| `--vng-color-green-400` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231e6c35%22%2F%3E%3C%2Fsvg%3E) `#1e6c35` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389d9a0%22%2F%3E%3C%2Fsvg%3E) `#89d9a0` | this set | | +| `--vng-color-orange-100` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffdcad%22%2F%3E%3C%2Fsvg%3E) `#ffdcad` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23683e05%22%2F%3E%3C%2Fsvg%3E) `#683e05` | this set | | +| `--vng-color-orange-200` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffb85c%22%2F%3E%3C%2Fsvg%3E) `#ffb85c` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23a96309%22%2F%3E%3C%2Fsvg%3E) `#a96309` | this set | | +| `--vng-color-orange-300` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f08800%22%2F%3E%3C%2Fsvg%3E) `#f08800` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f39419%22%2F%3E%3C%2Fsvg%3E) `#f39419` | this set | | +| `--vng-color-orange-400` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23df5601%22%2F%3E%3C%2Fsvg%3E) `#df5601` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f37526%22%2F%3E%3C%2Fsvg%3E) `#f37526` | this set | | +| `--vng-color-pink-100` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffe8f5%22%2F%3E%3C%2Fsvg%3E) `#ffe8f5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23390322%22%2F%3E%3C%2Fsvg%3E) `#390322` | this set | | +| `--vng-color-pink-200` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f5b4d7%22%2F%3E%3C%2Fsvg%3E) `#f5b4d7` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235f113b%22%2F%3E%3C%2Fsvg%3E) `#5f113b` | this set | | +| `--vng-color-pink-300` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23c8006c%22%2F%3E%3C%2Fsvg%3E) `#c8006c` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f5399e%22%2F%3E%3C%2Fsvg%3E) `#f5399e` | this set | | +| `--vng-color-pink-400` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23a40058%22%2F%3E%3C%2Fsvg%3E) `#a40058` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f655ac%22%2F%3E%3C%2Fsvg%3E) `#f655ac` | this set | | +| `--vng-color-red-100` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffd9d6%22%2F%3E%3C%2Fsvg%3E) `#ffd9d6` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23470904%22%2F%3E%3C%2Fsvg%3E) `#470904` | this set | | +| `--vng-color-red-200` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed8b82%22%2F%3E%3C%2Fsvg%3E) `#ed8b82` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2387231a%22%2F%3E%3C%2Fsvg%3E) `#87231a` | this set | | +| `--vng-color-red-300` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cf1b07%22%2F%3E%3C%2Fsvg%3E) `#cf1b07` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed4734%22%2F%3E%3C%2Fsvg%3E) `#ed4734` | this set | | +| `--vng-color-red-400` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23a30500%22%2F%3E%3C%2Fsvg%3E) `#a30500` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f65b56%22%2F%3E%3C%2Fsvg%3E) `#f65b56` | this set | | +| `--vng-color-white` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | diff --git a/docs/reference/token-sets/esdoornveen.md b/docs/reference/token-sets/esdoornveen.md new file mode 100644 index 000000000..6f20c0f98 --- /dev/null +++ b/docs/reference/token-sets/esdoornveen.md @@ -0,0 +1,316 @@ + + +# Esdoornveen, mbo college + +Token set `esdoornveen`: 93 declared by this set, 129 from the defaults layer. + +Contrast: primary text on primary 9.36:1, primary on background 8.65:1 (pass). + +## Colours (Kleuren) + +| Token | Value | Dark mode | Source | Paints | +|---|---|---|---|---| +| `--nldesign-color-background-dark` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23EDEFF2%22%2F%3E%3C%2Fsvg%3E) `#EDEFF2` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231d2026%22%2F%3E%3C%2Fsvg%3E) `#1d2026` | this set | Background dark, Table header background | +| `--nldesign-color-background-darker` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23D3D8DF%22%2F%3E%3C%2Fsvg%3E) `#D3D8DF` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232d333c%22%2F%3E%3C%2Fsvg%3E) `#2d333c` | this set | Background darker | +| `--nldesign-color-background-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23F0F1F3%22%2F%3E%3C%2Fsvg%3E) `#F0F1F3` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231d1f23%22%2F%3E%3C%2Fsvg%3E) `#1d1f23` | this set | Main background color | +| `--nldesign-color-border` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E4E6EA%22%2F%3E%3C%2Fsvg%3E) `#E4E6EA` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2324272d%22%2F%3E%3C%2Fsvg%3E) `#24272d` | this set | Border color, Select border, Table row rule, Text input border, `--nldesign-component-separator-border-color` | +| `--nldesign-color-border-dark` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238A929E%22%2F%3E%3C%2Fsvg%3E) `#8A929E` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23656c78%22%2F%3E%3C%2Fsvg%3E) `#656c78` | this set | Border dark, Border max contrast | +| `--nldesign-color-button-primary-background` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235B2E91%22%2F%3E%3C%2Fsvg%3E) `#5B2E91` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23966bc9%22%2F%3E%3C%2Fsvg%3E) `#966bc9` | this set | | +| `--nldesign-color-button-primary-border` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235B2E91%22%2F%3E%3C%2Fsvg%3E) `#5B2E91` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23966bc9%22%2F%3E%3C%2Fsvg%3E) `#966bc9` | this set | | +| `--nldesign-color-button-primary-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2343206E%22%2F%3E%3C%2Fsvg%3E) `#43206E` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ab87d7%22%2F%3E%3C%2Fsvg%3E) `#ab87d7` | this set | | +| `--nldesign-color-button-primary-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E) `#111111` | this set | | +| `--nldesign-color-error` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23B30000%22%2F%3E%3C%2Fsvg%3E) `#B30000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f54949%22%2F%3E%3C%2Fsvg%3E) `#f54949` | this set | Border error, Element error, Error color, Text error, Text input invalid | +| `--nldesign-color-error-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23A30000%22%2F%3E%3C%2Fsvg%3E) `#A30000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f65656%22%2F%3E%3C%2Fsvg%3E) `#f65656` | this set | Error hover | +| `--nldesign-color-error-rgb` | `179, 0, 0` | `245, 73, 73` | this set | Error text color | +| `--nldesign-color-favorite` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e17000%22%2F%3E%3C%2Fsvg%3E) `#e17000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f48c25%22%2F%3E%3C%2Fsvg%3E) `#f48c25` | defaults | Background blur filter | +| `--nldesign-color-focus` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22rgba%2891%2C%2046%2C%20145%2C%200.5%29%22%2F%3E%3C%2Fsvg%3E) `rgba(91, 46, 145, 0.5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23966bc980%22%2F%3E%3C%2Fsvg%3E) `#966bc980` | this set | Button focus ring | +| `--nldesign-color-focus-rgb` | `91, 46, 145` | `150, 107, 201` | this set | | +| `--nldesign-color-header-background` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--nldesign-color-header-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231B1C1D%22%2F%3E%3C%2Fsvg%3E) `#1B1C1D` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | this set | | +| `--nldesign-color-info` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235B2E91%22%2F%3E%3C%2Fsvg%3E) `#5B2E91` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23966bc9%22%2F%3E%3C%2Fsvg%3E) `#966bc9` | this set | Info color, Info hover color, Text input focus | +| `--nldesign-color-info-rgb` | `91, 46, 145` | `150, 107, 201` | this set | | +| `--nldesign-color-link` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235B2E91%22%2F%3E%3C%2Fsvg%3E) `#5B2E91` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d8c8eb%22%2F%3E%3C%2Fsvg%3E) `#d8c8eb` | this set | Link colour | +| `--nldesign-color-link-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2343206E%22%2F%3E%3C%2Fsvg%3E) `#43206E` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ab87d7%22%2F%3E%3C%2Fsvg%3E) `#ab87d7` | this set | Link hover colour | +| `--nldesign-color-link-visited` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2342145f%22%2F%3E%3C%2Fsvg%3E) `#42145f` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23c392e3%22%2F%3E%3C%2Fsvg%3E) `#c392e3` | defaults | `--nldesign-component-link-visited-color` | +| `--nldesign-color-logo-background` | `transparent` | | defaults | | +| `--nldesign-color-nav-background` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--nldesign-color-placeholder-dark` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E) `#cccccc` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233f3f3f%22%2F%3E%3C%2Fsvg%3E) `#3f3f3f` | defaults | Placeholder dark | +| `--nldesign-color-placeholder-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e5e5e5%22%2F%3E%3C%2Fsvg%3E) `#e5e5e5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232a2a2a%22%2F%3E%3C%2Fsvg%3E) `#2a2a2a` | defaults | Placeholder light | +| `--nldesign-color-primary` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235B2E91%22%2F%3E%3C%2Fsvg%3E) `#5B2E91` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23decff0%22%2F%3E%3C%2Fsvg%3E) `#decff0` | this set | Badge background, Primary button background, Primary color, Primary element color, Primary element light text and 7 more | +| `--nldesign-color-primary-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2343206E%22%2F%3E%3C%2Fsvg%3E) `#43206E` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2343206e%22%2F%3E%3C%2Fsvg%3E) `#43206e` | this set | Primary button hover, Primary element hover, Primary hover color | +| `--nldesign-color-primary-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23F0EAF7%22%2F%3E%3C%2Fsvg%3E) `#F0EAF7` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2320132e%22%2F%3E%3C%2Fsvg%3E) `#20132e` | this set | Primary element light, Tertiary button hover, `--color-primary-element-text-dark` | +| `--nldesign-color-primary-light-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E6DDF0%22%2F%3E%3C%2Fsvg%3E) `#E6DDF0` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23281b37%22%2F%3E%3C%2Fsvg%3E) `#281b37` | this set | Primary element light hover, Primary light hover, Tertiary button pressed | +| `--nldesign-color-primary-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E) `#111111` | this set | Badge number, Primary button label, Primary element text, Primary text color | +| `--nldesign-color-success` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231E6B2A%22%2F%3E%3C%2Fsvg%3E) `#1E6B2A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238ad896%22%2F%3E%3C%2Fsvg%3E) `#8ad896` | this set | Border success, Element success, Success color, Text success | +| `--nldesign-color-success-rgb` | `30, 107, 42` | `138, 216, 150` | this set | Success hover color | +| `--nldesign-color-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231B1C1D%22%2F%3E%3C%2Fsvg%3E) `#1B1C1D` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | this set | Body text colour, Main text color, Table header label, `--nldesign-component-form-field-label-color`, `--nldesign-component-heading-1-color` and 8 more | +| `--nldesign-color-text-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | Muted text default color | +| `--nldesign-color-text-muted` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235E6168%22%2F%3E%3C%2Fsvg%3E) `#5E6168` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23999ca3%22%2F%3E%3C%2Fsvg%3E) `#999ca3` | this set | Text lighter, Text max contrast | +| `--nldesign-color-warning` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237A4F00%22%2F%3E%3C%2Fsvg%3E) `#7A4F00` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f8ca77%22%2F%3E%3C%2Fsvg%3E) `#f8ca77` | this set | Element warning, Text warning, Warning color | +| `--nldesign-color-warning-rgb` | `122, 79, 0` | `248, 202, 119` | this set | Warning hover color | +| `--nldesign-component-badge-background-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23966bc9%22%2F%3E%3C%2Fsvg%3E) `#966bc9` | defaults | | +| `--nldesign-component-badge-color` | `var( + --nldesign-color-primary-text + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E) `#111111` | defaults | | +| `--nldesign-component-button-active-background-color` | `var( + --nldesign-color-primary-light-hover + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23281b37%22%2F%3E%3C%2Fsvg%3E) `#281b37` | defaults | | +| `--nldesign-component-button-active-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239b6ed1%22%2F%3E%3C%2Fsvg%3E) `#9b6ed1` | defaults | | +| `--nldesign-component-button-background-color` | `transparent` | | defaults | | +| `--nldesign-component-button-border-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23966bc9%22%2F%3E%3C%2Fsvg%3E) `#966bc9` | defaults | | +| `--nldesign-component-button-color` | `var(--nldesign-color-primary)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239b6ed1%22%2F%3E%3C%2Fsvg%3E) `#9b6ed1` | defaults | | +| `--nldesign-component-button-disabled-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e5e5e5%22%2F%3E%3C%2Fsvg%3E) `#e5e5e5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232a2a2a%22%2F%3E%3C%2Fsvg%3E) `#2a2a2a` | defaults | | +| `--nldesign-component-button-disabled-border-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b4b4b4%22%2F%3E%3C%2Fsvg%3E) `#b4b4b4` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23535353%22%2F%3E%3C%2Fsvg%3E) `#535353` | defaults | | +| `--nldesign-component-button-disabled-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23696969%22%2F%3E%3C%2Fsvg%3E) `#696969` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | defaults | | +| `--nldesign-component-button-focus-border-color` | `var( + --nldesign-color-focus + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23966bc980%22%2F%3E%3C%2Fsvg%3E) `#966bc980` | defaults | | +| `--nldesign-component-button-hover-background-color` | `var( + --nldesign-color-primary-light + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2320132e%22%2F%3E%3C%2Fsvg%3E) `#20132e` | defaults | | +| `--nldesign-component-button-hover-border-color` | `var( + --nldesign-color-primary-hover + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ab87d7%22%2F%3E%3C%2Fsvg%3E) `#ab87d7` | defaults | | +| `--nldesign-component-button-hover-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239b6ed1%22%2F%3E%3C%2Fsvg%3E) `#9b6ed1` | defaults | | +| `--nldesign-component-button-primary-action-background-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23966bc9%22%2F%3E%3C%2Fsvg%3E) `#966bc9` | defaults | | +| `--nldesign-component-button-primary-action-border-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23966bc9%22%2F%3E%3C%2Fsvg%3E) `#966bc9` | defaults | | +| `--nldesign-component-button-primary-action-color` | `var( + --nldesign-color-primary-text + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E) `#111111` | defaults | | +| `--nldesign-component-button-primary-action-hover-background-color` | `var( + --nldesign-color-primary-hover + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ab87d7%22%2F%3E%3C%2Fsvg%3E) `#ab87d7` | defaults | | +| `--nldesign-component-button-primary-action-hover-color` | `var( + --nldesign-color-primary-text + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232e2e2e%22%2F%3E%3C%2Fsvg%3E) `#2e2e2e` | defaults | | +| `--nldesign-component-button-secondary-action-background-color` | `transparent` | | defaults | | +| `--nldesign-component-button-secondary-action-border-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23966bc9%22%2F%3E%3C%2Fsvg%3E) `#966bc9` | defaults | | +| `--nldesign-component-button-secondary-action-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239b6ed1%22%2F%3E%3C%2Fsvg%3E) `#9b6ed1` | defaults | | +| `--nldesign-component-button-secondary-action-hover-background-color` | `var( + --nldesign-color-primary-light + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2320132e%22%2F%3E%3C%2Fsvg%3E) `#20132e` | defaults | | +| `--nldesign-component-form-field-label-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-form-fieldset-border-color` | `var( + --nldesign-color-border + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2324272d%22%2F%3E%3C%2Fsvg%3E) `#24272d` | defaults | | +| `--nldesign-component-form-select-border-color` | `var(--nldesign-color-border)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2324272d%22%2F%3E%3C%2Fsvg%3E) `#24272d` | defaults | | +| `--nldesign-component-form-select-focus-border-color` | `var(--nldesign-color-info)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23966bc9%22%2F%3E%3C%2Fsvg%3E) `#966bc9` | defaults | | +| `--nldesign-component-heading-1-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-heading-2-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-heading-3-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-heading-4-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-heading-5-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-heading-6-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-heading-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-link-color` | `var(--nldesign-color-link)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239b6ed1%22%2F%3E%3C%2Fsvg%3E) `#9b6ed1` | defaults | | +| `--nldesign-component-link-hover-color` | `var(--nldesign-color-link-hover)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b491df%22%2F%3E%3C%2Fsvg%3E) `#b491df` | defaults | | +| `--nldesign-component-link-visited-color` | `var(--nldesign-color-link-visited)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cea0eb%22%2F%3E%3C%2Fsvg%3E) `#cea0eb` | defaults | | +| `--nldesign-component-ordered-list-color` | `var( + --nldesign-color-text + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-paragraph-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-separator-border-color` | `var(--nldesign-color-border)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2324272d%22%2F%3E%3C%2Fsvg%3E) `#24272d` | defaults | | +| `--nldesign-component-table-border-color` | `var(--nldesign-color-border)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2324272d%22%2F%3E%3C%2Fsvg%3E) `#24272d` | defaults | | +| `--nldesign-component-table-header-background-color` | `var( + --nldesign-color-background-dark + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231d2026%22%2F%3E%3C%2Fsvg%3E) `#1d2026` | defaults | | +| `--nldesign-component-table-header-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-table-row-hover-background-color` | `var( + --nldesign-color-background-hover + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231d1f23%22%2F%3E%3C%2Fsvg%3E) `#1d1f23` | defaults | | +| `--nldesign-component-textbox-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | defaults | | +| `--nldesign-component-textbox-border-color` | `var(--nldesign-color-border)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235d6474%22%2F%3E%3C%2Fsvg%3E) `#5d6474` | defaults | | +| `--nldesign-component-textbox-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-textbox-disabled-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e5e5e5%22%2F%3E%3C%2Fsvg%3E) `#e5e5e5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232a2a2a%22%2F%3E%3C%2Fsvg%3E) `#2a2a2a` | defaults | | +| `--nldesign-component-textbox-disabled-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23696969%22%2F%3E%3C%2Fsvg%3E) `#696969` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | defaults | | +| `--nldesign-component-textbox-focus-border-color` | `var(--nldesign-color-info)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23966bc9%22%2F%3E%3C%2Fsvg%3E) `#966bc9` | defaults | | +| `--nldesign-component-textbox-hover-border-color` | `var( + --nldesign-color-border-dark + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23656c78%22%2F%3E%3C%2Fsvg%3E) `#656c78` | defaults | | +| `--nldesign-component-textbox-invalid-border-color` | `var(--nldesign-color-error)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f54949%22%2F%3E%3C%2Fsvg%3E) `#f54949` | defaults | | +| `--nldesign-component-unordered-list-color` | `var( + --nldesign-color-text + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | + +## Typography (Typografie) + +| Token | Value | Dark mode | Source | Paints | +|---|---|---|---|---| +| `--nldesign-component-badge-font-size` | `0.875rem` | | defaults | | +| `--nldesign-component-badge-font-weight` | `700` | | defaults | | +| `--nldesign-component-button-font-family` | `var(--nldesign-font-family)` | | defaults | | +| `--nldesign-component-button-font-size` | `1rem` | | defaults | | +| `--nldesign-component-button-font-weight` | `700` | | defaults | | +| `--nldesign-component-form-field-label-font-weight` | `700` | | defaults | | +| `--nldesign-component-heading-1-font-size` | `2.5rem` | | defaults | | +| `--nldesign-component-heading-1-font-weight` | `var( + --nldesign-component-heading-font-weight + )` | | defaults | | +| `--nldesign-component-heading-1-line-height` | `1.2` | | defaults | | +| `--nldesign-component-heading-2-font-size` | `2rem` | | defaults | | +| `--nldesign-component-heading-2-font-weight` | `var( + --nldesign-component-heading-font-weight + )` | | defaults | | +| `--nldesign-component-heading-2-line-height` | `1.25` | | defaults | | +| `--nldesign-component-heading-3-font-size` | `1.5rem` | | defaults | | +| `--nldesign-component-heading-3-font-weight` | `var( + --nldesign-component-heading-font-weight + )` | | defaults | | +| `--nldesign-component-heading-3-line-height` | `1.3` | | defaults | | +| `--nldesign-component-heading-4-font-size` | `1.25rem` | | defaults | | +| `--nldesign-component-heading-4-font-weight` | `var( + --nldesign-component-heading-font-weight + )` | | defaults | | +| `--nldesign-component-heading-4-line-height` | `1.35` | | defaults | | +| `--nldesign-component-heading-5-font-size` | `1.125rem` | | defaults | | +| `--nldesign-component-heading-5-font-weight` | `var( + --nldesign-component-heading-font-weight + )` | | defaults | | +| `--nldesign-component-heading-5-line-height` | `1.4` | | defaults | | +| `--nldesign-component-heading-6-font-size` | `1rem` | | defaults | | +| `--nldesign-component-heading-6-font-weight` | `var( + --nldesign-component-heading-font-weight + )` | | defaults | | +| `--nldesign-component-heading-6-line-height` | `1.5` | | defaults | | +| `--nldesign-component-heading-font-family` | `var(--nldesign-font-family)` | | defaults | | +| `--nldesign-component-heading-font-weight` | `var(--nldesign-font-weight-heading)` | | defaults | | +| `--nldesign-component-link-font-weight` | `var( + --nldesign-font-weight-default + )` | | defaults | | +| `--nldesign-component-link-text-decoration` | `underline` | | defaults | | +| `--nldesign-component-ordered-list-font-size` | `1rem` | | defaults | | +| `--nldesign-component-ordered-list-line-height` | `1.5` | | defaults | | +| `--nldesign-component-paragraph-font-family` | `var(--nldesign-font-family)` | | defaults | | +| `--nldesign-component-paragraph-font-size` | `1rem` | | defaults | | +| `--nldesign-component-paragraph-font-weight` | `var(--nldesign-font-weight-default)` | | defaults | | +| `--nldesign-component-paragraph-line-height` | `1.5` | | defaults | | +| `--nldesign-component-table-header-font-weight` | `700` | | defaults | | +| `--nldesign-component-textbox-font-family` | `var(--nldesign-font-family)` | | defaults | | +| `--nldesign-component-textbox-font-size` | `1rem` | | defaults | | +| `--nldesign-component-unordered-list-font-size` | `1rem` | | defaults | | +| `--nldesign-component-unordered-list-line-height` | `1.5` | | defaults | | +| `--nldesign-font-family` | `'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif` | | this set | Font family, `--nldesign-component-button-font-family`, `--nldesign-component-textbox-font-family` | +| `--nldesign-font-weight-default` | `400` | | defaults | Base font size | +| `--nldesign-font-weight-element` | `500` | | defaults | Control font weight | +| `--nldesign-font-weight-heading` | `700` | | defaults | Heading font weight | + +## Spacing and shape (Ruimte en vorm) + +| Token | Value | Dark mode | Source | Paints | +|---|---|---|---|---| +| `--nldesign-border-radius` | `8px` | | this set | Border radius element, Button corner, Input border width, Select corner, Text input corner | +| `--nldesign-border-radius-large` | `12px` | | this set | Container radius | +| `--nldesign-border-radius-pill` | `100px` | | this set | Badge shape, Border radius pill | +| `--nldesign-border-radius-rounded` | `28px` | | this set | Border radius rounded | +| `--nldesign-border-radius-small` | `4px` | | this set | Border radius small | +| `--nldesign-component-badge-border-radius` | `var( + --nldesign-border-radius-pill + )` | | defaults | | +| `--nldesign-component-badge-padding-block` | `0.125rem` | | defaults | | +| `--nldesign-component-badge-padding-inline` | `0.5rem` | | defaults | | +| `--nldesign-component-button-border-radius` | `var(--nldesign-border-radius)` | | defaults | | +| `--nldesign-component-button-border-width` | `1px` | | defaults | | +| `--nldesign-component-button-padding-block` | `0.5rem` | | defaults | | +| `--nldesign-component-button-padding-inline` | `1rem` | | defaults | | +| `--nldesign-component-form-fieldset-border-width` | `1px` | | defaults | | +| `--nldesign-component-form-select-border-radius` | `var(--nldesign-border-radius)` | | defaults | | +| `--nldesign-component-separator-border-width` | `1px` | | defaults | | +| `--nldesign-component-table-border-width` | `1px` | | defaults | | +| `--nldesign-component-table-cell-padding-block` | `0.5rem` | | defaults | | +| `--nldesign-component-table-cell-padding-inline` | `0.75rem` | | defaults | | +| `--nldesign-component-textbox-border-radius` | `var(--nldesign-border-radius)` | | defaults | | +| `--nldesign-component-textbox-border-width` | `1px` | | defaults | | +| `--nldesign-component-textbox-padding-block` | `0.5rem` | | defaults | | +| `--nldesign-component-textbox-padding-inline` | `0.75rem` | | defaults | | +| `--nldesign-header-border-bottom` | `1px solid rgba(138, 146, 158, 0.25)` | | this set | | +| `--nldesign-logo-height` | `auto` | | defaults | | +| `--nldesign-logo-width` | `127px` | | this set | | +| `--nldesign-size-lint` | `0px` | | defaults | | +| `--nldesign-size-lint-height` | `0px` | | defaults | | + +## Other tokens (Overige tokens) + +| Token | Value | Dark mode | Source | Paints | +|---|---|---|---|---| +| `--nldesign-animation-easing` | `ease` | | defaults | | +| `--nldesign-animation-quick` | `100ms` | | defaults | Header menu item height | +| `--nldesign-animation-slow` | `300ms` | | defaults | Animation slow | +| `--nldesign-header-icon-filter` | `invert(1) brightness(0) contrast(100)` | | defaults | | +| `--nldesign-logo-bottom` | `1px` | | defaults | | +| `--nldesign-logo-center` | `50%` | | defaults | | +| `--nldesign-logo-filter` | `none` | | defaults | | +| `--nldesign-logo-inset` | `12px` | | defaults | | +| `--nldesign-logo-top` | `1px` | | defaults | | + +## Tokens nothing reads (Tokens die niets leest) + +| Token | Value | Dark mode | Source | Paints | +|---|---|---|---|---| +| `--esdoornveen-color-accent` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23C2255C%22%2F%3E%3C%2Fsvg%3E) `#C2255C` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d14274%22%2F%3E%3C%2Fsvg%3E) `#d14274` | this set | | +| `--esdoornveen-color-accent-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23FBE9F0%22%2F%3E%3C%2Fsvg%3E) `#FBE9F0` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23330c1b%22%2F%3E%3C%2Fsvg%3E) `#330c1b` | this set | | +| `--esdoornveen-color-accent-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239C1C49%22%2F%3E%3C%2Fsvg%3E) `#9C1C49` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e36390%22%2F%3E%3C%2Fsvg%3E) `#e36390` | this set | | +| `--esdoornveen-color-ink` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231B1C1D%22%2F%3E%3C%2Fsvg%3E) `#1B1C1D` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d2d3d4%22%2F%3E%3C%2Fsvg%3E) `#d2d3d4` | this set | | +| `--esdoornveen-color-line` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E4E6EA%22%2F%3E%3C%2Fsvg%3E) `#E4E6EA` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2324272d%22%2F%3E%3C%2Fsvg%3E) `#24272d` | this set | | +| `--esdoornveen-color-main` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235B2E91%22%2F%3E%3C%2Fsvg%3E) `#5B2E91` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23966bc9%22%2F%3E%3C%2Fsvg%3E) `#966bc9` | this set | | +| `--esdoornveen-color-main-deep` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2343206E%22%2F%3E%3C%2Fsvg%3E) `#43206E` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ab87d7%22%2F%3E%3C%2Fsvg%3E) `#ab87d7` | this set | | +| `--esdoornveen-color-main-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23F0EAF7%22%2F%3E%3C%2Fsvg%3E) `#F0EAF7` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2320132e%22%2F%3E%3C%2Fsvg%3E) `#20132e` | this set | | +| `--esdoornveen-color-muted` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235E6168%22%2F%3E%3C%2Fsvg%3E) `#5E6168` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2393969c%22%2F%3E%3C%2Fsvg%3E) `#93969c` | this set | | +| `--esdoornveen-color-surface` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23F5F6F8%22%2F%3E%3C%2Fsvg%3E) `#F5F6F8` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23171a20%22%2F%3E%3C%2Fsvg%3E) `#171a20` | this set | | +| `--esdoornveen-font-family-code` | `'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace` | | this set | | +| `--nldesign-brand-stripe-color-1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235B2E91%22%2F%3E%3C%2Fsvg%3E) `#5B2E91` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23966bc9%22%2F%3E%3C%2Fsvg%3E) `#966bc9` | this set | | +| `--nldesign-brand-stripe-color-2` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23C2255C%22%2F%3E%3C%2Fsvg%3E) `#C2255C` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d14274%22%2F%3E%3C%2Fsvg%3E) `#d14274` | this set | | +| `--nldesign-brand-stripe-color-3` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235B2E91%22%2F%3E%3C%2Fsvg%3E) `#5B2E91` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23966bc9%22%2F%3E%3C%2Fsvg%3E) `#966bc9` | this set | | +| `--nldesign-brand-stripe-height` | `6px` | | this set | | +| `--nldesign-brand-stripe-image` | `linear-gradient(122deg, #5B2E91 0 28.73px, #C2255C 28.73px 110.13px, #5B2E91 110.13px)` | | this set | | +| `--nldesign-brand-stripe-image-inverse` | `linear-gradient(238deg, #5B2E91 0 28.73px, #C2255C 28.73px 110.13px, #5B2E91 110.13px)` | | this set | | +| `--nldesign-brand-stripe-ratio-1` | `1` | | this set | | +| `--nldesign-brand-stripe-ratio-2` | `3` | | this set | | +| `--nldesign-brand-stripe-ratio-3` | `10` | | this set | | +| `--nldesign-color-accent` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23C2255C%22%2F%3E%3C%2Fsvg%3E) `#C2255C` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d14274%22%2F%3E%3C%2Fsvg%3E) `#d14274` | this set | | +| `--nldesign-color-accent-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23FBE9F0%22%2F%3E%3C%2Fsvg%3E) `#FBE9F0` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23330c1b%22%2F%3E%3C%2Fsvg%3E) `#330c1b` | this set | | +| `--nldesign-color-accent-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239C1C49%22%2F%3E%3C%2Fsvg%3E) `#9C1C49` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e36390%22%2F%3E%3C%2Fsvg%3E) `#e36390` | this set | | +| `--nldesign-color-footer-background` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2343206E%22%2F%3E%3C%2Fsvg%3E) `#43206E` | | this set | | +| `--nldesign-color-footer-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | | this set | | +| `--nldesign-component-content-card-shadow-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22rgba%2827%2C%2028%2C%2029%2C%200.04%29%22%2F%3E%3C%2Fsvg%3E) `rgba(27, 28, 29, 0.04)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d2d3d40a%22%2F%3E%3C%2Fsvg%3E) `#d2d3d40a` | this set | | +| `--nldesign-component-content-surface-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23F5F6F8%22%2F%3E%3C%2Fsvg%3E) `#F5F6F8` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23171a20%22%2F%3E%3C%2Fsvg%3E) `#171a20` | this set | | +| `--nldesign-component-navigation-active-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23C2255C%22%2F%3E%3C%2Fsvg%3E) `#C2255C` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d14274%22%2F%3E%3C%2Fsvg%3E) `#d14274` | this set | | +| `--nldesign-component-navigation-active-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239C1C49%22%2F%3E%3C%2Fsvg%3E) `#9C1C49` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e36390%22%2F%3E%3C%2Fsvg%3E) `#e36390` | this set | | +| `--nldesign-component-navigation-badge-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23C2255C%22%2F%3E%3C%2Fsvg%3E) `#C2255C` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d14274%22%2F%3E%3C%2Fsvg%3E) `#d14274` | this set | | +| `--nldesign-component-navigation-badge-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23000000%22%2F%3E%3C%2Fsvg%3E) `#000000` | this set | | +| `--nldesign-component-status-badge-error-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23FCEDEC%22%2F%3E%3C%2Fsvg%3E) `#FCEDEC` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23310d0a%22%2F%3E%3C%2Fsvg%3E) `#310d0a` | this set | | +| `--nldesign-component-status-badge-error-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23A30000%22%2F%3E%3C%2Fsvg%3E) `#A30000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ff5c5c%22%2F%3E%3C%2Fsvg%3E) `#ff5c5c` | this set | | +| `--nldesign-component-status-badge-info-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23F0EAF7%22%2F%3E%3C%2Fsvg%3E) `#F0EAF7` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2320132e%22%2F%3E%3C%2Fsvg%3E) `#20132e` | this set | | +| `--nldesign-component-status-badge-info-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2343206E%22%2F%3E%3C%2Fsvg%3E) `#43206E` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b491df%22%2F%3E%3C%2Fsvg%3E) `#b491df` | this set | | +| `--nldesign-component-status-badge-success-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E7F3EA%22%2F%3E%3C%2Fsvg%3E) `#E7F3EA` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23192e1e%22%2F%3E%3C%2Fsvg%3E) `#192e1e` | this set | | +| `--nldesign-component-status-badge-success-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231E6B2A%22%2F%3E%3C%2Fsvg%3E) `#1E6B2A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2394e1a0%22%2F%3E%3C%2Fsvg%3E) `#94e1a0` | this set | | +| `--nldesign-component-status-badge-warning-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23FFF4DE%22%2F%3E%3C%2Fsvg%3E) `#FFF4DE` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23412d03%22%2F%3E%3C%2Fsvg%3E) `#412d03` | this set | | +| `--nldesign-component-status-badge-warning-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237A4F00%22%2F%3E%3C%2Fsvg%3E) `#7A4F00` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffd485%22%2F%3E%3C%2Fsvg%3E) `#ffd485` | this set | | +| `--nldesign-hero-action-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235B2E91%22%2F%3E%3C%2Fsvg%3E) `#5B2E91` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23966bc9%22%2F%3E%3C%2Fsvg%3E) `#966bc9` | this set | | +| `--nldesign-hero-action-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--nldesign-hero-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--nldesign-hero-body-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231B1C1D%22%2F%3E%3C%2Fsvg%3E) `#1B1C1D` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E) `#111111` | this set | | +| `--nldesign-hero-title-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231B1C1D%22%2F%3E%3C%2Fsvg%3E) `#1B1C1D` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E) `#111111` | this set | | +| `--nldesign-login-watermark-image` | `url('../../img/logos/esdoornveen-emblem-grey.svg')` | | this set | | +| `--nldesign-login-watermark-opacity` | `0.06` | | this set | | +| `--nldesign-logo-url` | `url('../../img/logos/esdoornveen.svg')` | `url('../../../img/logos/esdoornveen-dark.svg')` | this set | | +| `--nldesign-website-border-radius` | `4px` | | this set | | +| `--nldesign-website-border-radius-large` | `8px` | | this set | | +| `--nldesign-website-logo-height` | `50px` | | this set | | +| `--nldesign-website-logo-text-size` | `0` | | this set | | +| `--nldesign-website-logo-width` | `198px` | | this set | | diff --git a/docs/reference/token-sets/index.md b/docs/reference/token-sets/index.md index b108eb35f..5ccb01c5f 100644 --- a/docs/reference/token-sets/index.md +++ b/docs/reference/token-sets/index.md @@ -19,6 +19,7 @@ The tokens of every shipped token set: the value, the dark-mode value, whether i - [Gemeente Enkhuizen](./enkhuizen.md) `enkhuizen` - [Gemeente Enschede](./enschede.md) `enschede` - [Gemeente Epe](./epe.md) `epe` +- [Esdoornveen, mbo college](./esdoornveen.md) `esdoornveen` - [(EXAMPLE) Basisschool](./example-basisschool.md) `example-basisschool` - [(EXAMPLE) College](./example-college.md) `example-college` - [(EXAMPLE) Gemeente](./example-gemeente.md) `example-gemeente` @@ -54,10 +55,13 @@ The tokens of every shipped token set: the value, the dark-mode value, whether i - [Gemeente Tilburg](./tilburg.md) `tilburg` - [Gemeente Tubbergen](./tubbergen.md) `tubbergen` - [Gemeente Utrecht](./utrecht.md) `utrecht` +- [Vaartveld College](./vaartveld.md) `vaartveld` - [Gemeente Venray](./venray.md) `venray` - [VNG Vereniging Nederlandse Gemeenten](./vng.md) `vng` - [Gemeente Vught](./vught.md) `vught` +- [Warmtepompacademie](./warmtepompacademie.md) `warmtepompacademie` - [Gemeente Westervoort](./westervoort.md) `westervoort` +- [Basisschool De Wilgenboom](./wilgenboom.md) `wilgenboom` - [xxllnc](./xxllnc.md) `xxllnc` - [Gemeente Zaanstad](./zaanstad.md) `zaanstad` - [Gemeente Zevenaar](./zevenaar.md) `zevenaar` diff --git a/docs/reference/token-sets/vaartveld.md b/docs/reference/token-sets/vaartveld.md new file mode 100644 index 000000000..e53b90935 --- /dev/null +++ b/docs/reference/token-sets/vaartveld.md @@ -0,0 +1,316 @@ + + +# Vaartveld College + +Token set `vaartveld`: 94 declared by this set, 128 from the defaults layer. + +Contrast: primary text on primary 6.63:1, primary on background 6.13:1 (pass). + +## Colours (Kleuren) + +| Token | Value | Dark mode | Source | Paints | +|---|---|---|---|---| +| `--nldesign-color-background-dark` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23EDEFF2%22%2F%3E%3C%2Fsvg%3E) `#EDEFF2` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231d2026%22%2F%3E%3C%2Fsvg%3E) `#1d2026` | this set | Background dark, Table header background | +| `--nldesign-color-background-darker` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23D3D8DF%22%2F%3E%3C%2Fsvg%3E) `#D3D8DF` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232d333c%22%2F%3E%3C%2Fsvg%3E) `#2d333c` | this set | Background darker | +| `--nldesign-color-background-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23F0F1F3%22%2F%3E%3C%2Fsvg%3E) `#F0F1F3` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231d1f23%22%2F%3E%3C%2Fsvg%3E) `#1d1f23` | this set | Main background color | +| `--nldesign-color-border` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E4E6EA%22%2F%3E%3C%2Fsvg%3E) `#E4E6EA` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2324272d%22%2F%3E%3C%2Fsvg%3E) `#24272d` | this set | Border color, Select border, Table row rule, Text input border, `--nldesign-component-separator-border-color` | +| `--nldesign-color-border-dark` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238A929E%22%2F%3E%3C%2Fsvg%3E) `#8A929E` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23656c78%22%2F%3E%3C%2Fsvg%3E) `#656c78` | this set | Border dark, Border max contrast | +| `--nldesign-color-button-primary-background` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231F4FD8%22%2F%3E%3C%2Fsvg%3E) `#1F4FD8` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232f5bd7%22%2F%3E%3C%2Fsvg%3E) `#2f5bd7` | this set | | +| `--nldesign-color-button-primary-border` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231F4FD8%22%2F%3E%3C%2Fsvg%3E) `#1F4FD8` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232f5bd7%22%2F%3E%3C%2Fsvg%3E) `#2f5bd7` | this set | | +| `--nldesign-color-button-primary-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2314338F%22%2F%3E%3C%2Fsvg%3E) `#14338F` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%236a88e2%22%2F%3E%3C%2Fsvg%3E) `#6a88e2` | this set | | +| `--nldesign-color-button-primary-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23fefefe%22%2F%3E%3C%2Fsvg%3E) `#fefefe` | this set | | +| `--nldesign-color-error` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23B30000%22%2F%3E%3C%2Fsvg%3E) `#B30000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f54949%22%2F%3E%3C%2Fsvg%3E) `#f54949` | this set | Border error, Element error, Error color, Text error, Text input invalid | +| `--nldesign-color-error-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23A30000%22%2F%3E%3C%2Fsvg%3E) `#A30000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f65656%22%2F%3E%3C%2Fsvg%3E) `#f65656` | this set | Error hover | +| `--nldesign-color-error-rgb` | `179, 0, 0` | `245, 73, 73` | this set | Error text color | +| `--nldesign-color-favorite` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e17000%22%2F%3E%3C%2Fsvg%3E) `#e17000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f48c25%22%2F%3E%3C%2Fsvg%3E) `#f48c25` | defaults | Background blur filter | +| `--nldesign-color-focus` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22rgba%2831%2C%2079%2C%20216%2C%200.5%29%22%2F%3E%3C%2Fsvg%3E) `rgba(31, 79, 216, 0.5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232f5bd780%22%2F%3E%3C%2Fsvg%3E) `#2f5bd780` | this set | Button focus ring | +| `--nldesign-color-focus-rgb` | `31, 79, 216` | `47, 91, 215` | this set | | +| `--nldesign-color-header-background` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--nldesign-color-header-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231B1C1D%22%2F%3E%3C%2Fsvg%3E) `#1B1C1D` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | this set | | +| `--nldesign-color-info` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231F4FD8%22%2F%3E%3C%2Fsvg%3E) `#1F4FD8` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232f5bd7%22%2F%3E%3C%2Fsvg%3E) `#2f5bd7` | this set | Info color, Info hover color, Text input focus | +| `--nldesign-color-info-rgb` | `31, 79, 216` | `47, 91, 215` | this set | | +| `--nldesign-color-link` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231F4FD8%22%2F%3E%3C%2Fsvg%3E) `#1F4FD8` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239aafec%22%2F%3E%3C%2Fsvg%3E) `#9aafec` | this set | Link colour | +| `--nldesign-color-link-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2314338F%22%2F%3E%3C%2Fsvg%3E) `#14338F` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%236a88e2%22%2F%3E%3C%2Fsvg%3E) `#6a88e2` | this set | Link hover colour | +| `--nldesign-color-link-visited` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2342145f%22%2F%3E%3C%2Fsvg%3E) `#42145f` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23c392e3%22%2F%3E%3C%2Fsvg%3E) `#c392e3` | defaults | `--nldesign-component-link-visited-color` | +| `--nldesign-color-logo-background` | `transparent` | | defaults | | +| `--nldesign-color-nav-background` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--nldesign-color-placeholder-dark` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E) `#cccccc` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233f3f3f%22%2F%3E%3C%2Fsvg%3E) `#3f3f3f` | defaults | Placeholder dark | +| `--nldesign-color-placeholder-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e5e5e5%22%2F%3E%3C%2Fsvg%3E) `#e5e5e5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232a2a2a%22%2F%3E%3C%2Fsvg%3E) `#2a2a2a` | defaults | Placeholder light | +| `--nldesign-color-primary` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231F4FD8%22%2F%3E%3C%2Fsvg%3E) `#1F4FD8` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2389a3ee%22%2F%3E%3C%2Fsvg%3E) `#89a3ee` | this set | Badge background, Primary button background, Primary color, Primary element color, Primary element light text and 7 more | +| `--nldesign-color-primary-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2314338F%22%2F%3E%3C%2Fsvg%3E) `#14338F` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2314338f%22%2F%3E%3C%2Fsvg%3E) `#14338f` | this set | Primary button hover, Primary element hover, Primary hover color | +| `--nldesign-color-primary-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E8EEFC%22%2F%3E%3C%2Fsvg%3E) `#E8EEFC` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230a1735%22%2F%3E%3C%2Fsvg%3E) `#0a1735` | this set | Primary element light, Tertiary button hover, `--color-primary-element-text-dark` | +| `--nldesign-color-primary-light-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23DAE3F9%22%2F%3E%3C%2Fsvg%3E) `#DAE3F9` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230e1c3f%22%2F%3E%3C%2Fsvg%3E) `#0e1c3f` | this set | Primary element light hover, Primary light hover, Tertiary button pressed | +| `--nldesign-color-primary-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E) `#111111` | this set | Badge number, Primary button label, Primary element text, Primary text color | +| `--nldesign-color-success` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231E6B2A%22%2F%3E%3C%2Fsvg%3E) `#1E6B2A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238ad896%22%2F%3E%3C%2Fsvg%3E) `#8ad896` | this set | Border success, Element success, Success color, Text success | +| `--nldesign-color-success-rgb` | `30, 107, 42` | `138, 216, 150` | this set | Success hover color | +| `--nldesign-color-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231B1C1D%22%2F%3E%3C%2Fsvg%3E) `#1B1C1D` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | this set | Body text colour, Main text color, Table header label, `--nldesign-component-form-field-label-color`, `--nldesign-component-heading-1-color` and 8 more | +| `--nldesign-color-text-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | Muted text default color | +| `--nldesign-color-text-muted` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235E6168%22%2F%3E%3C%2Fsvg%3E) `#5E6168` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23999ca3%22%2F%3E%3C%2Fsvg%3E) `#999ca3` | this set | Text lighter, Text max contrast | +| `--nldesign-color-warning` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237A4F00%22%2F%3E%3C%2Fsvg%3E) `#7A4F00` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f8ca77%22%2F%3E%3C%2Fsvg%3E) `#f8ca77` | this set | Element warning, Text warning, Warning color | +| `--nldesign-color-warning-rgb` | `122, 79, 0` | `248, 202, 119` | this set | Warning hover color | +| `--nldesign-component-badge-background-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232f5bd7%22%2F%3E%3C%2Fsvg%3E) `#2f5bd7` | defaults | | +| `--nldesign-component-badge-color` | `var( + --nldesign-color-primary-text + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23fefefe%22%2F%3E%3C%2Fsvg%3E) `#fefefe` | defaults | | +| `--nldesign-component-button-active-background-color` | `var( + --nldesign-color-primary-light-hover + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230e1c3f%22%2F%3E%3C%2Fsvg%3E) `#0e1c3f` | defaults | | +| `--nldesign-component-button-active-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23567be7%22%2F%3E%3C%2Fsvg%3E) `#567be7` | defaults | | +| `--nldesign-component-button-background-color` | `transparent` | | defaults | | +| `--nldesign-component-button-border-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232f5bd7%22%2F%3E%3C%2Fsvg%3E) `#2f5bd7` | defaults | | +| `--nldesign-component-button-color` | `var(--nldesign-color-primary)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23567be7%22%2F%3E%3C%2Fsvg%3E) `#567be7` | defaults | | +| `--nldesign-component-button-disabled-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e5e5e5%22%2F%3E%3C%2Fsvg%3E) `#e5e5e5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232a2a2a%22%2F%3E%3C%2Fsvg%3E) `#2a2a2a` | defaults | | +| `--nldesign-component-button-disabled-border-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b4b4b4%22%2F%3E%3C%2Fsvg%3E) `#b4b4b4` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23535353%22%2F%3E%3C%2Fsvg%3E) `#535353` | defaults | | +| `--nldesign-component-button-disabled-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23696969%22%2F%3E%3C%2Fsvg%3E) `#696969` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | defaults | | +| `--nldesign-component-button-focus-border-color` | `var( + --nldesign-color-focus + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232f5bd780%22%2F%3E%3C%2Fsvg%3E) `#2f5bd780` | defaults | | +| `--nldesign-component-button-hover-background-color` | `var( + --nldesign-color-primary-light + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230a1735%22%2F%3E%3C%2Fsvg%3E) `#0a1735` | defaults | | +| `--nldesign-component-button-hover-border-color` | `var( + --nldesign-color-primary-hover + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%236a88e2%22%2F%3E%3C%2Fsvg%3E) `#6a88e2` | defaults | | +| `--nldesign-component-button-hover-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23567be7%22%2F%3E%3C%2Fsvg%3E) `#567be7` | defaults | | +| `--nldesign-component-button-primary-action-background-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232f5bd7%22%2F%3E%3C%2Fsvg%3E) `#2f5bd7` | defaults | | +| `--nldesign-component-button-primary-action-border-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232f5bd7%22%2F%3E%3C%2Fsvg%3E) `#2f5bd7` | defaults | | +| `--nldesign-component-button-primary-action-color` | `var( + --nldesign-color-primary-text + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23fefefe%22%2F%3E%3C%2Fsvg%3E) `#fefefe` | defaults | | +| `--nldesign-component-button-primary-action-hover-background-color` | `var( + --nldesign-color-primary-hover + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%236a88e2%22%2F%3E%3C%2Fsvg%3E) `#6a88e2` | defaults | | +| `--nldesign-component-button-primary-action-hover-color` | `var( + --nldesign-color-primary-text + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23222222%22%2F%3E%3C%2Fsvg%3E) `#222222` | defaults | | +| `--nldesign-component-button-secondary-action-background-color` | `transparent` | | defaults | | +| `--nldesign-component-button-secondary-action-border-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232f5bd7%22%2F%3E%3C%2Fsvg%3E) `#2f5bd7` | defaults | | +| `--nldesign-component-button-secondary-action-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23c6d2f7%22%2F%3E%3C%2Fsvg%3E) `#c6d2f7` | defaults | | +| `--nldesign-component-button-secondary-action-hover-background-color` | `var( + --nldesign-color-primary-light + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230a1735%22%2F%3E%3C%2Fsvg%3E) `#0a1735` | defaults | | +| `--nldesign-component-form-field-label-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-form-fieldset-border-color` | `var( + --nldesign-color-border + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2324272d%22%2F%3E%3C%2Fsvg%3E) `#24272d` | defaults | | +| `--nldesign-component-form-select-border-color` | `var(--nldesign-color-border)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2324272d%22%2F%3E%3C%2Fsvg%3E) `#24272d` | defaults | | +| `--nldesign-component-form-select-focus-border-color` | `var(--nldesign-color-info)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232f5bd7%22%2F%3E%3C%2Fsvg%3E) `#2f5bd7` | defaults | | +| `--nldesign-component-heading-1-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-heading-2-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-heading-3-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-heading-4-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-heading-5-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-heading-6-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-heading-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-link-color` | `var(--nldesign-color-link)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23c6d2f7%22%2F%3E%3C%2Fsvg%3E) `#c6d2f7` | defaults | | +| `--nldesign-component-link-hover-color` | `var(--nldesign-color-link-hover)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23708feb%22%2F%3E%3C%2Fsvg%3E) `#708feb` | defaults | | +| `--nldesign-component-link-visited-color` | `var(--nldesign-color-link-visited)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cea0eb%22%2F%3E%3C%2Fsvg%3E) `#cea0eb` | defaults | | +| `--nldesign-component-ordered-list-color` | `var( + --nldesign-color-text + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-paragraph-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-separator-border-color` | `var(--nldesign-color-border)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2324272d%22%2F%3E%3C%2Fsvg%3E) `#24272d` | defaults | | +| `--nldesign-component-table-border-color` | `var(--nldesign-color-border)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2324272d%22%2F%3E%3C%2Fsvg%3E) `#24272d` | defaults | | +| `--nldesign-component-table-header-background-color` | `var( + --nldesign-color-background-dark + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231d2026%22%2F%3E%3C%2Fsvg%3E) `#1d2026` | defaults | | +| `--nldesign-component-table-header-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-table-row-hover-background-color` | `var( + --nldesign-color-background-hover + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231d1f23%22%2F%3E%3C%2Fsvg%3E) `#1d1f23` | defaults | | +| `--nldesign-component-textbox-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | defaults | | +| `--nldesign-component-textbox-border-color` | `var(--nldesign-color-border)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235d6474%22%2F%3E%3C%2Fsvg%3E) `#5d6474` | defaults | | +| `--nldesign-component-textbox-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-textbox-disabled-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e5e5e5%22%2F%3E%3C%2Fsvg%3E) `#e5e5e5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232a2a2a%22%2F%3E%3C%2Fsvg%3E) `#2a2a2a` | defaults | | +| `--nldesign-component-textbox-disabled-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23696969%22%2F%3E%3C%2Fsvg%3E) `#696969` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | defaults | | +| `--nldesign-component-textbox-focus-border-color` | `var(--nldesign-color-info)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232f5bd7%22%2F%3E%3C%2Fsvg%3E) `#2f5bd7` | defaults | | +| `--nldesign-component-textbox-hover-border-color` | `var( + --nldesign-color-border-dark + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23656c78%22%2F%3E%3C%2Fsvg%3E) `#656c78` | defaults | | +| `--nldesign-component-textbox-invalid-border-color` | `var(--nldesign-color-error)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f54949%22%2F%3E%3C%2Fsvg%3E) `#f54949` | defaults | | +| `--nldesign-component-unordered-list-color` | `var( + --nldesign-color-text + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | + +## Typography (Typografie) + +| Token | Value | Dark mode | Source | Paints | +|---|---|---|---|---| +| `--nldesign-component-badge-font-size` | `0.875rem` | | defaults | | +| `--nldesign-component-badge-font-weight` | `700` | | defaults | | +| `--nldesign-component-button-font-family` | `var(--nldesign-font-family)` | | defaults | | +| `--nldesign-component-button-font-size` | `1rem` | | defaults | | +| `--nldesign-component-button-font-weight` | `700` | | defaults | | +| `--nldesign-component-form-field-label-font-weight` | `700` | | defaults | | +| `--nldesign-component-heading-1-font-size` | `2.5rem` | | defaults | | +| `--nldesign-component-heading-1-font-weight` | `var( + --nldesign-component-heading-font-weight + )` | | defaults | | +| `--nldesign-component-heading-1-line-height` | `1.2` | | defaults | | +| `--nldesign-component-heading-2-font-size` | `2rem` | | defaults | | +| `--nldesign-component-heading-2-font-weight` | `var( + --nldesign-component-heading-font-weight + )` | | defaults | | +| `--nldesign-component-heading-2-line-height` | `1.25` | | defaults | | +| `--nldesign-component-heading-3-font-size` | `1.5rem` | | defaults | | +| `--nldesign-component-heading-3-font-weight` | `var( + --nldesign-component-heading-font-weight + )` | | defaults | | +| `--nldesign-component-heading-3-line-height` | `1.3` | | defaults | | +| `--nldesign-component-heading-4-font-size` | `1.25rem` | | defaults | | +| `--nldesign-component-heading-4-font-weight` | `var( + --nldesign-component-heading-font-weight + )` | | defaults | | +| `--nldesign-component-heading-4-line-height` | `1.35` | | defaults | | +| `--nldesign-component-heading-5-font-size` | `1.125rem` | | defaults | | +| `--nldesign-component-heading-5-font-weight` | `var( + --nldesign-component-heading-font-weight + )` | | defaults | | +| `--nldesign-component-heading-5-line-height` | `1.4` | | defaults | | +| `--nldesign-component-heading-6-font-size` | `1rem` | | defaults | | +| `--nldesign-component-heading-6-font-weight` | `var( + --nldesign-component-heading-font-weight + )` | | defaults | | +| `--nldesign-component-heading-6-line-height` | `1.5` | | defaults | | +| `--nldesign-component-heading-font-family` | `'Red Hat Display', 'Red Hat Text', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif` | | this set | | +| `--nldesign-component-heading-font-weight` | `var(--nldesign-font-weight-heading)` | | defaults | | +| `--nldesign-component-link-font-weight` | `var( + --nldesign-font-weight-default + )` | | defaults | | +| `--nldesign-component-link-text-decoration` | `underline` | | defaults | | +| `--nldesign-component-ordered-list-font-size` | `1rem` | | defaults | | +| `--nldesign-component-ordered-list-line-height` | `1.5` | | defaults | | +| `--nldesign-component-paragraph-font-family` | `var(--nldesign-font-family)` | | defaults | | +| `--nldesign-component-paragraph-font-size` | `1rem` | | defaults | | +| `--nldesign-component-paragraph-font-weight` | `var(--nldesign-font-weight-default)` | | defaults | | +| `--nldesign-component-paragraph-line-height` | `1.5` | | defaults | | +| `--nldesign-component-table-header-font-weight` | `700` | | defaults | | +| `--nldesign-component-textbox-font-family` | `var(--nldesign-font-family)` | | defaults | | +| `--nldesign-component-textbox-font-size` | `1rem` | | defaults | | +| `--nldesign-component-unordered-list-font-size` | `1rem` | | defaults | | +| `--nldesign-component-unordered-list-line-height` | `1.5` | | defaults | | +| `--nldesign-font-family` | `'Red Hat Text', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif` | | this set | Font family, `--nldesign-component-button-font-family`, `--nldesign-component-textbox-font-family` | +| `--nldesign-font-weight-default` | `400` | | defaults | Base font size | +| `--nldesign-font-weight-element` | `500` | | defaults | Control font weight | +| `--nldesign-font-weight-heading` | `700` | | defaults | Heading font weight | + +## Spacing and shape (Ruimte en vorm) + +| Token | Value | Dark mode | Source | Paints | +|---|---|---|---|---| +| `--nldesign-border-radius` | `8px` | | this set | Border radius element, Button corner, Input border width, Select corner, Text input corner | +| `--nldesign-border-radius-large` | `12px` | | this set | Container radius | +| `--nldesign-border-radius-pill` | `100px` | | this set | Badge shape, Border radius pill | +| `--nldesign-border-radius-rounded` | `28px` | | this set | Border radius rounded | +| `--nldesign-border-radius-small` | `4px` | | this set | Border radius small | +| `--nldesign-component-badge-border-radius` | `var( + --nldesign-border-radius-pill + )` | | defaults | | +| `--nldesign-component-badge-padding-block` | `0.125rem` | | defaults | | +| `--nldesign-component-badge-padding-inline` | `0.5rem` | | defaults | | +| `--nldesign-component-button-border-radius` | `var(--nldesign-border-radius)` | | defaults | | +| `--nldesign-component-button-border-width` | `1px` | | defaults | | +| `--nldesign-component-button-padding-block` | `0.5rem` | | defaults | | +| `--nldesign-component-button-padding-inline` | `1rem` | | defaults | | +| `--nldesign-component-form-fieldset-border-width` | `1px` | | defaults | | +| `--nldesign-component-form-select-border-radius` | `var(--nldesign-border-radius)` | | defaults | | +| `--nldesign-component-separator-border-width` | `1px` | | defaults | | +| `--nldesign-component-table-border-width` | `1px` | | defaults | | +| `--nldesign-component-table-cell-padding-block` | `0.5rem` | | defaults | | +| `--nldesign-component-table-cell-padding-inline` | `0.75rem` | | defaults | | +| `--nldesign-component-textbox-border-radius` | `var(--nldesign-border-radius)` | | defaults | | +| `--nldesign-component-textbox-border-width` | `1px` | | defaults | | +| `--nldesign-component-textbox-padding-block` | `0.5rem` | | defaults | | +| `--nldesign-component-textbox-padding-inline` | `0.75rem` | | defaults | | +| `--nldesign-header-border-bottom` | `1px solid rgba(138, 146, 158, 0.25)` | | this set | | +| `--nldesign-logo-height` | `auto` | | defaults | | +| `--nldesign-logo-width` | `111px` | | this set | | +| `--nldesign-size-lint` | `0px` | | defaults | | +| `--nldesign-size-lint-height` | `0px` | | defaults | | + +## Other tokens (Overige tokens) + +| Token | Value | Dark mode | Source | Paints | +|---|---|---|---|---| +| `--nldesign-animation-easing` | `ease` | | defaults | | +| `--nldesign-animation-quick` | `100ms` | | defaults | Header menu item height | +| `--nldesign-animation-slow` | `300ms` | | defaults | Animation slow | +| `--nldesign-header-icon-filter` | `invert(1) brightness(0) contrast(100)` | | defaults | | +| `--nldesign-logo-bottom` | `1px` | | defaults | | +| `--nldesign-logo-center` | `50%` | | defaults | | +| `--nldesign-logo-filter` | `none` | | defaults | | +| `--nldesign-logo-inset` | `12px` | | defaults | | +| `--nldesign-logo-top` | `1px` | | defaults | | + +## Tokens nothing reads (Tokens die niets leest) + +| Token | Value | Dark mode | Source | Paints | +|---|---|---|---|---| +| `--nldesign-brand-stripe-color-1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231F4FD8%22%2F%3E%3C%2Fsvg%3E) `#1F4FD8` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232f5bd7%22%2F%3E%3C%2Fsvg%3E) `#2f5bd7` | this set | | +| `--nldesign-brand-stripe-color-2` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231FB5A8%22%2F%3E%3C%2Fsvg%3E) `#1FB5A8` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%234cd7cb%22%2F%3E%3C%2Fsvg%3E) `#4cd7cb` | this set | | +| `--nldesign-brand-stripe-color-3` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231F4FD8%22%2F%3E%3C%2Fsvg%3E) `#1F4FD8` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232f5bd7%22%2F%3E%3C%2Fsvg%3E) `#2f5bd7` | this set | | +| `--nldesign-brand-stripe-height` | `9px` | | this set | | +| `--nldesign-brand-stripe-image` | `linear-gradient(to bottom, #1F4FD8 0 4px, transparent 4px 7px, #1FB5A8 7px 9px)` | | this set | | +| `--nldesign-brand-stripe-image-inverse` | `linear-gradient(to bottom, #1F4FD8 0 4px, #ffffff 4px 7px, #1FB5A8 7px 9px)` | | this set | | +| `--nldesign-brand-stripe-ratio-1` | `4` | | this set | | +| `--nldesign-brand-stripe-ratio-2` | `2` | | this set | | +| `--nldesign-brand-stripe-ratio-3` | `4` | | this set | | +| `--nldesign-color-accent` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231FB5A8%22%2F%3E%3C%2Fsvg%3E) `#1FB5A8` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%234cd7cb%22%2F%3E%3C%2Fsvg%3E) `#4cd7cb` | this set | | +| `--nldesign-color-accent-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23DDF5F2%22%2F%3E%3C%2Fsvg%3E) `#DDF5F2` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23143a35%22%2F%3E%3C%2Fsvg%3E) `#143a35` | this set | | +| `--nldesign-color-accent-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230B6259%22%2F%3E%3C%2Fsvg%3E) `#0B6259` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239df4eb%22%2F%3E%3C%2Fsvg%3E) `#9df4eb` | this set | | +| `--nldesign-color-footer-background` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2314338F%22%2F%3E%3C%2Fsvg%3E) `#14338F` | | this set | | +| `--nldesign-color-footer-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | | this set | | +| `--nldesign-component-content-card-shadow-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22rgba%2827%2C%2028%2C%2029%2C%200.04%29%22%2F%3E%3C%2Fsvg%3E) `rgba(27, 28, 29, 0.04)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d2d3d40a%22%2F%3E%3C%2Fsvg%3E) `#d2d3d40a` | this set | | +| `--nldesign-component-content-surface-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23F5F6F8%22%2F%3E%3C%2Fsvg%3E) `#F5F6F8` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23171a20%22%2F%3E%3C%2Fsvg%3E) `#171a20` | this set | | +| `--nldesign-component-navigation-active-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231FB5A8%22%2F%3E%3C%2Fsvg%3E) `#1FB5A8` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%234cd7cb%22%2F%3E%3C%2Fsvg%3E) `#4cd7cb` | this set | | +| `--nldesign-component-navigation-active-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230B6259%22%2F%3E%3C%2Fsvg%3E) `#0B6259` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239df4eb%22%2F%3E%3C%2Fsvg%3E) `#9df4eb` | this set | | +| `--nldesign-component-navigation-badge-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231FB5A8%22%2F%3E%3C%2Fsvg%3E) `#1FB5A8` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%234cd7cb%22%2F%3E%3C%2Fsvg%3E) `#4cd7cb` | this set | | +| `--nldesign-component-navigation-badge-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231A1A1A%22%2F%3E%3C%2Fsvg%3E) `#1A1A1A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E) `#111111` | this set | | +| `--nldesign-component-status-badge-error-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23FCEDEC%22%2F%3E%3C%2Fsvg%3E) `#FCEDEC` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23310d0a%22%2F%3E%3C%2Fsvg%3E) `#310d0a` | this set | | +| `--nldesign-component-status-badge-error-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23A30000%22%2F%3E%3C%2Fsvg%3E) `#A30000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ff5c5c%22%2F%3E%3C%2Fsvg%3E) `#ff5c5c` | this set | | +| `--nldesign-component-status-badge-info-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E8EEFC%22%2F%3E%3C%2Fsvg%3E) `#E8EEFC` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230a1735%22%2F%3E%3C%2Fsvg%3E) `#0a1735` | this set | | +| `--nldesign-component-status-badge-info-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2314338F%22%2F%3E%3C%2Fsvg%3E) `#14338F` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23708feb%22%2F%3E%3C%2Fsvg%3E) `#708feb` | this set | | +| `--nldesign-component-status-badge-success-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E7F3EA%22%2F%3E%3C%2Fsvg%3E) `#E7F3EA` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23192e1e%22%2F%3E%3C%2Fsvg%3E) `#192e1e` | this set | | +| `--nldesign-component-status-badge-success-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231E6B2A%22%2F%3E%3C%2Fsvg%3E) `#1E6B2A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2394e1a0%22%2F%3E%3C%2Fsvg%3E) `#94e1a0` | this set | | +| `--nldesign-component-status-badge-warning-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23FFF4DE%22%2F%3E%3C%2Fsvg%3E) `#FFF4DE` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23412d03%22%2F%3E%3C%2Fsvg%3E) `#412d03` | this set | | +| `--nldesign-component-status-badge-warning-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237A4F00%22%2F%3E%3C%2Fsvg%3E) `#7A4F00` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffd485%22%2F%3E%3C%2Fsvg%3E) `#ffd485` | this set | | +| `--nldesign-hero-action-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231F4FD8%22%2F%3E%3C%2Fsvg%3E) `#1F4FD8` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232f5bd7%22%2F%3E%3C%2Fsvg%3E) `#2f5bd7` | this set | | +| `--nldesign-hero-action-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--nldesign-hero-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E8EEFC%22%2F%3E%3C%2Fsvg%3E) `#E8EEFC` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230a1735%22%2F%3E%3C%2Fsvg%3E) `#0a1735` | this set | | +| `--nldesign-hero-body-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231B1C1D%22%2F%3E%3C%2Fsvg%3E) `#1B1C1D` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E) `#111111` | this set | | +| `--nldesign-hero-decoration-image` | `var(--nldesign-emblem-url)` | | this set | | +| `--nldesign-hero-title-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231B1C1D%22%2F%3E%3C%2Fsvg%3E) `#1B1C1D` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E) `#111111` | this set | | +| `--nldesign-login-watermark-image` | `url('../../img/logos/vaartveld-emblem-grey.svg')` | | this set | | +| `--nldesign-login-watermark-opacity` | `0.08` | | this set | | +| `--nldesign-logo-url` | `url('../../img/logos/vaartveld.svg')` | `url('../../../img/logos/vaartveld-dark.svg')` | this set | | +| `--nldesign-website-border-radius` | `6px` | | this set | | +| `--nldesign-website-border-radius-large` | `10px` | | this set | | +| `--nldesign-website-logo-height` | `50px` | | this set | | +| `--nldesign-website-logo-text-size` | `0` | | this set | | +| `--nldesign-website-logo-width` | `173px` | | this set | | +| `--vaartveld-color-accent` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231FB5A8%22%2F%3E%3C%2Fsvg%3E) `#1FB5A8` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%234cd7cb%22%2F%3E%3C%2Fsvg%3E) `#4cd7cb` | this set | | +| `--vaartveld-color-accent-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23DDF5F2%22%2F%3E%3C%2Fsvg%3E) `#DDF5F2` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23143a35%22%2F%3E%3C%2Fsvg%3E) `#143a35` | this set | | +| `--vaartveld-color-accent-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230B6259%22%2F%3E%3C%2Fsvg%3E) `#0B6259` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239df4eb%22%2F%3E%3C%2Fsvg%3E) `#9df4eb` | this set | | +| `--vaartveld-color-ink` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231B1C1D%22%2F%3E%3C%2Fsvg%3E) `#1B1C1D` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d2d3d4%22%2F%3E%3C%2Fsvg%3E) `#d2d3d4` | this set | | +| `--vaartveld-color-line` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E4E6EA%22%2F%3E%3C%2Fsvg%3E) `#E4E6EA` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2324272d%22%2F%3E%3C%2Fsvg%3E) `#24272d` | this set | | +| `--vaartveld-color-main` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231F4FD8%22%2F%3E%3C%2Fsvg%3E) `#1F4FD8` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232f5bd7%22%2F%3E%3C%2Fsvg%3E) `#2f5bd7` | this set | | +| `--vaartveld-color-main-deep` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2314338F%22%2F%3E%3C%2Fsvg%3E) `#14338F` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%236a88e2%22%2F%3E%3C%2Fsvg%3E) `#6a88e2` | this set | | +| `--vaartveld-color-main-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E8EEFC%22%2F%3E%3C%2Fsvg%3E) `#E8EEFC` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230a1735%22%2F%3E%3C%2Fsvg%3E) `#0a1735` | this set | | +| `--vaartveld-color-muted` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235E6168%22%2F%3E%3C%2Fsvg%3E) `#5E6168` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2393969c%22%2F%3E%3C%2Fsvg%3E) `#93969c` | this set | | +| `--vaartveld-color-surface` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23F5F6F8%22%2F%3E%3C%2Fsvg%3E) `#F5F6F8` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23171a20%22%2F%3E%3C%2Fsvg%3E) `#171a20` | this set | | diff --git a/docs/reference/token-sets/warmtepompacademie.md b/docs/reference/token-sets/warmtepompacademie.md new file mode 100644 index 000000000..c158e62e8 --- /dev/null +++ b/docs/reference/token-sets/warmtepompacademie.md @@ -0,0 +1,314 @@ + + +# Warmtepompacademie + +Token set `warmtepompacademie`: 92 declared by this set, 128 from the defaults layer. + +Contrast: primary text on primary 5.96:1, primary on background 5.51:1 (pass). + +## Colours (Kleuren) + +| Token | Value | Dark mode | Source | Paints | +|---|---|---|---|---| +| `--nldesign-color-background-dark` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23EDEFF2%22%2F%3E%3C%2Fsvg%3E) `#EDEFF2` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231d2026%22%2F%3E%3C%2Fsvg%3E) `#1d2026` | this set | Background dark, Table header background | +| `--nldesign-color-background-darker` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23D3D8DF%22%2F%3E%3C%2Fsvg%3E) `#D3D8DF` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232d333c%22%2F%3E%3C%2Fsvg%3E) `#2d333c` | this set | Background darker | +| `--nldesign-color-background-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23F0F1F3%22%2F%3E%3C%2Fsvg%3E) `#F0F1F3` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231d1f23%22%2F%3E%3C%2Fsvg%3E) `#1d1f23` | this set | Main background color | +| `--nldesign-color-border` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E4E6EA%22%2F%3E%3C%2Fsvg%3E) `#E4E6EA` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2324272d%22%2F%3E%3C%2Fsvg%3E) `#24272d` | this set | Border color, Select border, Table row rule, Text input border, `--nldesign-component-separator-border-color` | +| `--nldesign-color-border-dark` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238A929E%22%2F%3E%3C%2Fsvg%3E) `#8A929E` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23656c78%22%2F%3E%3C%2Fsvg%3E) `#656c78` | this set | Border dark, Border max contrast | +| `--nldesign-color-button-primary-background` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230B6E7A%22%2F%3E%3C%2Fsvg%3E) `#0B6E7A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2379e0ec%22%2F%3E%3C%2Fsvg%3E) `#79e0ec` | this set | | +| `--nldesign-color-button-primary-border` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230B6E7A%22%2F%3E%3C%2Fsvg%3E) `#0B6E7A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2379e0ec%22%2F%3E%3C%2Fsvg%3E) `#79e0ec` | this set | | +| `--nldesign-color-button-primary-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23084F58%22%2F%3E%3C%2Fsvg%3E) `#084F58` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2395e6f0%22%2F%3E%3C%2Fsvg%3E) `#95e6f0` | this set | | +| `--nldesign-color-button-primary-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233e3e3e%22%2F%3E%3C%2Fsvg%3E) `#3e3e3e` | this set | | +| `--nldesign-color-error` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23B30000%22%2F%3E%3C%2Fsvg%3E) `#B30000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f54949%22%2F%3E%3C%2Fsvg%3E) `#f54949` | this set | Border error, Element error, Error color, Text error, Text input invalid | +| `--nldesign-color-error-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23A30000%22%2F%3E%3C%2Fsvg%3E) `#A30000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f65656%22%2F%3E%3C%2Fsvg%3E) `#f65656` | this set | Error hover | +| `--nldesign-color-error-rgb` | `179, 0, 0` | `245, 73, 73` | this set | Error text color | +| `--nldesign-color-favorite` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e17000%22%2F%3E%3C%2Fsvg%3E) `#e17000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f48c25%22%2F%3E%3C%2Fsvg%3E) `#f48c25` | defaults | Background blur filter | +| `--nldesign-color-focus` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22rgba%2811%2C%20110%2C%20122%2C%200.5%29%22%2F%3E%3C%2Fsvg%3E) `rgba(11, 110, 122, 0.5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2379e0ec80%22%2F%3E%3C%2Fsvg%3E) `#79e0ec80` | this set | Button focus ring | +| `--nldesign-color-focus-rgb` | `11, 110, 122` | `121, 224, 236` | this set | | +| `--nldesign-color-header-background` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--nldesign-color-header-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231B1C1D%22%2F%3E%3C%2Fsvg%3E) `#1B1C1D` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | this set | | +| `--nldesign-color-info` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230B6E7A%22%2F%3E%3C%2Fsvg%3E) `#0B6E7A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2379e0ec%22%2F%3E%3C%2Fsvg%3E) `#79e0ec` | this set | Info color, Info hover color, Text input focus | +| `--nldesign-color-info-rgb` | `11, 110, 122` | `121, 224, 236` | this set | | +| `--nldesign-color-link` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230B6E7A%22%2F%3E%3C%2Fsvg%3E) `#0B6E7A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2379e0ec%22%2F%3E%3C%2Fsvg%3E) `#79e0ec` | this set | Link colour | +| `--nldesign-color-link-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23084F58%22%2F%3E%3C%2Fsvg%3E) `#084F58` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2395e6f0%22%2F%3E%3C%2Fsvg%3E) `#95e6f0` | this set | Link hover colour | +| `--nldesign-color-link-visited` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2342145f%22%2F%3E%3C%2Fsvg%3E) `#42145f` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23c392e3%22%2F%3E%3C%2Fsvg%3E) `#c392e3` | defaults | `--nldesign-component-link-visited-color` | +| `--nldesign-color-logo-background` | `transparent` | | defaults | | +| `--nldesign-color-nav-background` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--nldesign-color-placeholder-dark` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E) `#cccccc` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233f3f3f%22%2F%3E%3C%2Fsvg%3E) `#3f3f3f` | defaults | Placeholder dark | +| `--nldesign-color-placeholder-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e5e5e5%22%2F%3E%3C%2Fsvg%3E) `#e5e5e5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232a2a2a%22%2F%3E%3C%2Fsvg%3E) `#2a2a2a` | defaults | Placeholder light | +| `--nldesign-color-primary` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230B6E7A%22%2F%3E%3C%2Fsvg%3E) `#0B6E7A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231ad4ea%22%2F%3E%3C%2Fsvg%3E) `#1ad4ea` | this set | Badge background, Primary button background, Primary color, Primary element color, Primary element light text and 7 more | +| `--nldesign-color-primary-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23084F58%22%2F%3E%3C%2Fsvg%3E) `#084F58` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23084f58%22%2F%3E%3C%2Fsvg%3E) `#084f58` | this set | Primary button hover, Primary element hover, Primary hover color | +| `--nldesign-color-primary-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E3F1F3%22%2F%3E%3C%2Fsvg%3E) `#E3F1F3` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23182f33%22%2F%3E%3C%2Fsvg%3E) `#182f33` | this set | Primary element light, Tertiary button hover, `--color-primary-element-text-dark` | +| `--nldesign-color-primary-light-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23D4E8EB%22%2F%3E%3C%2Fsvg%3E) `#D4E8EB` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f3a3e%22%2F%3E%3C%2Fsvg%3E) `#1f3a3e` | this set | Primary element light hover, Primary light hover, Tertiary button pressed | +| `--nldesign-color-primary-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E) `#111111` | this set | Badge number, Primary button label, Primary element text, Primary text color | +| `--nldesign-color-success` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231E6B2A%22%2F%3E%3C%2Fsvg%3E) `#1E6B2A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238ad896%22%2F%3E%3C%2Fsvg%3E) `#8ad896` | this set | Border success, Element success, Success color, Text success | +| `--nldesign-color-success-rgb` | `30, 107, 42` | `138, 216, 150` | this set | Success hover color | +| `--nldesign-color-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231B1C1D%22%2F%3E%3C%2Fsvg%3E) `#1B1C1D` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | this set | Body text colour, Main text color, Table header label, `--nldesign-component-form-field-label-color`, `--nldesign-component-heading-1-color` and 8 more | +| `--nldesign-color-text-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | Muted text default color | +| `--nldesign-color-text-muted` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235E6168%22%2F%3E%3C%2Fsvg%3E) `#5E6168` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23999ca3%22%2F%3E%3C%2Fsvg%3E) `#999ca3` | this set | Text lighter, Text max contrast | +| `--nldesign-color-warning` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237A4F00%22%2F%3E%3C%2Fsvg%3E) `#7A4F00` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f8ca77%22%2F%3E%3C%2Fsvg%3E) `#f8ca77` | this set | Element warning, Text warning, Warning color | +| `--nldesign-color-warning-rgb` | `122, 79, 0` | `248, 202, 119` | this set | Warning hover color | +| `--nldesign-component-badge-background-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2379e0ec%22%2F%3E%3C%2Fsvg%3E) `#79e0ec` | defaults | | +| `--nldesign-component-badge-color` | `var( + --nldesign-color-primary-text + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233e3e3e%22%2F%3E%3C%2Fsvg%3E) `#3e3e3e` | defaults | | +| `--nldesign-component-button-active-background-color` | `var( + --nldesign-color-primary-light-hover + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f3a3e%22%2F%3E%3C%2Fsvg%3E) `#1f3a3e` | defaults | | +| `--nldesign-component-button-active-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2385e8f4%22%2F%3E%3C%2Fsvg%3E) `#85e8f4` | defaults | | +| `--nldesign-component-button-background-color` | `transparent` | | defaults | | +| `--nldesign-component-button-border-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2379e0ec%22%2F%3E%3C%2Fsvg%3E) `#79e0ec` | defaults | | +| `--nldesign-component-button-color` | `var(--nldesign-color-primary)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2385e8f4%22%2F%3E%3C%2Fsvg%3E) `#85e8f4` | defaults | | +| `--nldesign-component-button-disabled-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e5e5e5%22%2F%3E%3C%2Fsvg%3E) `#e5e5e5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232a2a2a%22%2F%3E%3C%2Fsvg%3E) `#2a2a2a` | defaults | | +| `--nldesign-component-button-disabled-border-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b4b4b4%22%2F%3E%3C%2Fsvg%3E) `#b4b4b4` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23535353%22%2F%3E%3C%2Fsvg%3E) `#535353` | defaults | | +| `--nldesign-component-button-disabled-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23696969%22%2F%3E%3C%2Fsvg%3E) `#696969` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | defaults | | +| `--nldesign-component-button-focus-border-color` | `var( + --nldesign-color-focus + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2379e0ec80%22%2F%3E%3C%2Fsvg%3E) `#79e0ec80` | defaults | | +| `--nldesign-component-button-hover-background-color` | `var( + --nldesign-color-primary-light + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23182f33%22%2F%3E%3C%2Fsvg%3E) `#182f33` | defaults | | +| `--nldesign-component-button-hover-border-color` | `var( + --nldesign-color-primary-hover + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2395e6f0%22%2F%3E%3C%2Fsvg%3E) `#95e6f0` | defaults | | +| `--nldesign-component-button-hover-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2385e8f4%22%2F%3E%3C%2Fsvg%3E) `#85e8f4` | defaults | | +| `--nldesign-component-button-primary-action-background-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2379e0ec%22%2F%3E%3C%2Fsvg%3E) `#79e0ec` | defaults | | +| `--nldesign-component-button-primary-action-border-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2379e0ec%22%2F%3E%3C%2Fsvg%3E) `#79e0ec` | defaults | | +| `--nldesign-component-button-primary-action-color` | `var( + --nldesign-color-primary-text + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233e3e3e%22%2F%3E%3C%2Fsvg%3E) `#3e3e3e` | defaults | | +| `--nldesign-component-button-primary-action-hover-background-color` | `var( + --nldesign-color-primary-hover + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2395e6f0%22%2F%3E%3C%2Fsvg%3E) `#95e6f0` | defaults | | +| `--nldesign-component-button-primary-action-hover-color` | `var( + --nldesign-color-primary-text + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235e5e5e%22%2F%3E%3C%2Fsvg%3E) `#5e5e5e` | defaults | | +| `--nldesign-component-button-secondary-action-background-color` | `transparent` | | defaults | | +| `--nldesign-component-button-secondary-action-border-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2379e0ec%22%2F%3E%3C%2Fsvg%3E) `#79e0ec` | defaults | | +| `--nldesign-component-button-secondary-action-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2385e8f4%22%2F%3E%3C%2Fsvg%3E) `#85e8f4` | defaults | | +| `--nldesign-component-button-secondary-action-hover-background-color` | `var( + --nldesign-color-primary-light + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23182f33%22%2F%3E%3C%2Fsvg%3E) `#182f33` | defaults | | +| `--nldesign-component-form-field-label-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-form-fieldset-border-color` | `var( + --nldesign-color-border + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2324272d%22%2F%3E%3C%2Fsvg%3E) `#24272d` | defaults | | +| `--nldesign-component-form-select-border-color` | `var(--nldesign-color-border)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2324272d%22%2F%3E%3C%2Fsvg%3E) `#24272d` | defaults | | +| `--nldesign-component-form-select-focus-border-color` | `var(--nldesign-color-info)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2379e0ec%22%2F%3E%3C%2Fsvg%3E) `#79e0ec` | defaults | | +| `--nldesign-component-heading-1-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-heading-2-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-heading-3-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-heading-4-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-heading-5-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-heading-6-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-heading-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-link-color` | `var(--nldesign-color-link)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2385e8f4%22%2F%3E%3C%2Fsvg%3E) `#85e8f4` | defaults | | +| `--nldesign-component-link-hover-color` | `var(--nldesign-color-link-hover)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23a7eef7%22%2F%3E%3C%2Fsvg%3E) `#a7eef7` | defaults | | +| `--nldesign-component-link-visited-color` | `var(--nldesign-color-link-visited)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cea0eb%22%2F%3E%3C%2Fsvg%3E) `#cea0eb` | defaults | | +| `--nldesign-component-ordered-list-color` | `var( + --nldesign-color-text + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-paragraph-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-separator-border-color` | `var(--nldesign-color-border)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2324272d%22%2F%3E%3C%2Fsvg%3E) `#24272d` | defaults | | +| `--nldesign-component-table-border-color` | `var(--nldesign-color-border)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2324272d%22%2F%3E%3C%2Fsvg%3E) `#24272d` | defaults | | +| `--nldesign-component-table-header-background-color` | `var( + --nldesign-color-background-dark + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231d2026%22%2F%3E%3C%2Fsvg%3E) `#1d2026` | defaults | | +| `--nldesign-component-table-header-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-table-row-hover-background-color` | `var( + --nldesign-color-background-hover + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231d1f23%22%2F%3E%3C%2Fsvg%3E) `#1d1f23` | defaults | | +| `--nldesign-component-textbox-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | defaults | | +| `--nldesign-component-textbox-border-color` | `var(--nldesign-color-border)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235d6474%22%2F%3E%3C%2Fsvg%3E) `#5d6474` | defaults | | +| `--nldesign-component-textbox-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-textbox-disabled-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e5e5e5%22%2F%3E%3C%2Fsvg%3E) `#e5e5e5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232a2a2a%22%2F%3E%3C%2Fsvg%3E) `#2a2a2a` | defaults | | +| `--nldesign-component-textbox-disabled-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23696969%22%2F%3E%3C%2Fsvg%3E) `#696969` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | defaults | | +| `--nldesign-component-textbox-focus-border-color` | `var(--nldesign-color-info)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2379e0ec%22%2F%3E%3C%2Fsvg%3E) `#79e0ec` | defaults | | +| `--nldesign-component-textbox-hover-border-color` | `var( + --nldesign-color-border-dark + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23656c78%22%2F%3E%3C%2Fsvg%3E) `#656c78` | defaults | | +| `--nldesign-component-textbox-invalid-border-color` | `var(--nldesign-color-error)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f54949%22%2F%3E%3C%2Fsvg%3E) `#f54949` | defaults | | +| `--nldesign-component-unordered-list-color` | `var( + --nldesign-color-text + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | + +## Typography (Typografie) + +| Token | Value | Dark mode | Source | Paints | +|---|---|---|---|---| +| `--nldesign-component-badge-font-size` | `0.875rem` | | defaults | | +| `--nldesign-component-badge-font-weight` | `700` | | defaults | | +| `--nldesign-component-button-font-family` | `var(--nldesign-font-family)` | | defaults | | +| `--nldesign-component-button-font-size` | `1rem` | | defaults | | +| `--nldesign-component-button-font-weight` | `700` | | defaults | | +| `--nldesign-component-form-field-label-font-weight` | `700` | | defaults | | +| `--nldesign-component-heading-1-font-size` | `2.5rem` | | defaults | | +| `--nldesign-component-heading-1-font-weight` | `var( + --nldesign-component-heading-font-weight + )` | | defaults | | +| `--nldesign-component-heading-1-line-height` | `1.2` | | defaults | | +| `--nldesign-component-heading-2-font-size` | `2rem` | | defaults | | +| `--nldesign-component-heading-2-font-weight` | `var( + --nldesign-component-heading-font-weight + )` | | defaults | | +| `--nldesign-component-heading-2-line-height` | `1.25` | | defaults | | +| `--nldesign-component-heading-3-font-size` | `1.5rem` | | defaults | | +| `--nldesign-component-heading-3-font-weight` | `var( + --nldesign-component-heading-font-weight + )` | | defaults | | +| `--nldesign-component-heading-3-line-height` | `1.3` | | defaults | | +| `--nldesign-component-heading-4-font-size` | `1.25rem` | | defaults | | +| `--nldesign-component-heading-4-font-weight` | `var( + --nldesign-component-heading-font-weight + )` | | defaults | | +| `--nldesign-component-heading-4-line-height` | `1.35` | | defaults | | +| `--nldesign-component-heading-5-font-size` | `1.125rem` | | defaults | | +| `--nldesign-component-heading-5-font-weight` | `var( + --nldesign-component-heading-font-weight + )` | | defaults | | +| `--nldesign-component-heading-5-line-height` | `1.4` | | defaults | | +| `--nldesign-component-heading-6-font-size` | `1rem` | | defaults | | +| `--nldesign-component-heading-6-font-weight` | `var( + --nldesign-component-heading-font-weight + )` | | defaults | | +| `--nldesign-component-heading-6-line-height` | `1.5` | | defaults | | +| `--nldesign-component-heading-font-family` | `'Barlow Semi Condensed', 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif` | | this set | | +| `--nldesign-component-heading-font-weight` | `var(--nldesign-font-weight-heading)` | | defaults | | +| `--nldesign-component-link-font-weight` | `var( + --nldesign-font-weight-default + )` | | defaults | | +| `--nldesign-component-link-text-decoration` | `underline` | | defaults | | +| `--nldesign-component-ordered-list-font-size` | `1rem` | | defaults | | +| `--nldesign-component-ordered-list-line-height` | `1.5` | | defaults | | +| `--nldesign-component-paragraph-font-family` | `var(--nldesign-font-family)` | | defaults | | +| `--nldesign-component-paragraph-font-size` | `1rem` | | defaults | | +| `--nldesign-component-paragraph-font-weight` | `var(--nldesign-font-weight-default)` | | defaults | | +| `--nldesign-component-paragraph-line-height` | `1.5` | | defaults | | +| `--nldesign-component-table-header-font-weight` | `700` | | defaults | | +| `--nldesign-component-textbox-font-family` | `var(--nldesign-font-family)` | | defaults | | +| `--nldesign-component-textbox-font-size` | `1rem` | | defaults | | +| `--nldesign-component-unordered-list-font-size` | `1rem` | | defaults | | +| `--nldesign-component-unordered-list-line-height` | `1.5` | | defaults | | +| `--nldesign-font-family` | `'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif` | | this set | Font family, `--nldesign-component-button-font-family`, `--nldesign-component-textbox-font-family` | +| `--nldesign-font-weight-default` | `400` | | defaults | Base font size | +| `--nldesign-font-weight-element` | `500` | | defaults | Control font weight | +| `--nldesign-font-weight-heading` | `700` | | defaults | Heading font weight | + +## Spacing and shape (Ruimte en vorm) + +| Token | Value | Dark mode | Source | Paints | +|---|---|---|---|---| +| `--nldesign-border-radius` | `8px` | | this set | Border radius element, Button corner, Input border width, Select corner, Text input corner | +| `--nldesign-border-radius-large` | `12px` | | this set | Container radius | +| `--nldesign-border-radius-pill` | `100px` | | this set | Badge shape, Border radius pill | +| `--nldesign-border-radius-rounded` | `28px` | | this set | Border radius rounded | +| `--nldesign-border-radius-small` | `4px` | | this set | Border radius small | +| `--nldesign-component-badge-border-radius` | `var( + --nldesign-border-radius-pill + )` | | defaults | | +| `--nldesign-component-badge-padding-block` | `0.125rem` | | defaults | | +| `--nldesign-component-badge-padding-inline` | `0.5rem` | | defaults | | +| `--nldesign-component-button-border-radius` | `var(--nldesign-border-radius)` | | defaults | | +| `--nldesign-component-button-border-width` | `1px` | | defaults | | +| `--nldesign-component-button-padding-block` | `0.5rem` | | defaults | | +| `--nldesign-component-button-padding-inline` | `1rem` | | defaults | | +| `--nldesign-component-form-fieldset-border-width` | `1px` | | defaults | | +| `--nldesign-component-form-select-border-radius` | `var(--nldesign-border-radius)` | | defaults | | +| `--nldesign-component-separator-border-width` | `1px` | | defaults | | +| `--nldesign-component-table-border-width` | `1px` | | defaults | | +| `--nldesign-component-table-cell-padding-block` | `0.5rem` | | defaults | | +| `--nldesign-component-table-cell-padding-inline` | `0.75rem` | | defaults | | +| `--nldesign-component-textbox-border-radius` | `var(--nldesign-border-radius)` | | defaults | | +| `--nldesign-component-textbox-border-width` | `1px` | | defaults | | +| `--nldesign-component-textbox-padding-block` | `0.5rem` | | defaults | | +| `--nldesign-component-textbox-padding-inline` | `0.75rem` | | defaults | | +| `--nldesign-header-border-bottom` | `1px solid rgba(138, 146, 158, 0.25)` | | this set | | +| `--nldesign-logo-height` | `auto` | | defaults | | +| `--nldesign-logo-width` | `121px` | | this set | | +| `--nldesign-size-lint` | `0px` | | defaults | | +| `--nldesign-size-lint-height` | `0px` | | defaults | | + +## Other tokens (Overige tokens) + +| Token | Value | Dark mode | Source | Paints | +|---|---|---|---|---| +| `--nldesign-animation-easing` | `ease` | | defaults | | +| `--nldesign-animation-quick` | `100ms` | | defaults | Header menu item height | +| `--nldesign-animation-slow` | `300ms` | | defaults | Animation slow | +| `--nldesign-header-icon-filter` | `invert(1) brightness(0) contrast(100)` | | defaults | | +| `--nldesign-logo-bottom` | `1px` | | defaults | | +| `--nldesign-logo-center` | `50%` | | defaults | | +| `--nldesign-logo-filter` | `none` | | defaults | | +| `--nldesign-logo-inset` | `12px` | | defaults | | +| `--nldesign-logo-top` | `1px` | | defaults | | + +## Tokens nothing reads (Tokens die niets leest) + +| Token | Value | Dark mode | Source | Paints | +|---|---|---|---|---| +| `--nldesign-brand-stripe-color-1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230B6E7A%22%2F%3E%3C%2Fsvg%3E) `#0B6E7A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2379e0ec%22%2F%3E%3C%2Fsvg%3E) `#79e0ec` | this set | | +| `--nldesign-brand-stripe-color-2` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E4E6EA%22%2F%3E%3C%2Fsvg%3E) `#E4E6EA` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2324272d%22%2F%3E%3C%2Fsvg%3E) `#24272d` | this set | | +| `--nldesign-brand-stripe-color-3` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23D9480F%22%2F%3E%3C%2Fsvg%3E) `#D9480F` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e6612d%22%2F%3E%3C%2Fsvg%3E) `#e6612d` | this set | | +| `--nldesign-brand-stripe-height` | `5px` | | this set | | +| `--nldesign-brand-stripe-image` | `linear-gradient(to right, #0B6E7A 0 33.333%, #5FA3A8 33.333% 45.833%, #E4E6EA 45.833% 54.167%, #EFA06F 54.167% 66.667%, #D9480F 66.667%)` | | this set | | +| `--nldesign-brand-stripe-ratio-1` | `11` | | this set | | +| `--nldesign-brand-stripe-ratio-2` | `2` | | this set | | +| `--nldesign-brand-stripe-ratio-3` | `11` | | this set | | +| `--nldesign-color-accent` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23C2410C%22%2F%3E%3C%2Fsvg%3E) `#C2410C` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e9713f%22%2F%3E%3C%2Fsvg%3E) `#e9713f` | this set | | +| `--nldesign-color-accent-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23FCEBDD%22%2F%3E%3C%2Fsvg%3E) `#FCEBDD` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233f2109%22%2F%3E%3C%2Fsvg%3E) `#3f2109` | this set | | +| `--nldesign-color-accent-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239A3412%22%2F%3E%3C%2Fsvg%3E) `#9A3412` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed8765%22%2F%3E%3C%2Fsvg%3E) `#ed8765` | this set | | +| `--nldesign-color-footer-background` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23084F58%22%2F%3E%3C%2Fsvg%3E) `#084F58` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2395e6f0%22%2F%3E%3C%2Fsvg%3E) `#95e6f0` | this set | | +| `--nldesign-color-footer-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235e5e5e%22%2F%3E%3C%2Fsvg%3E) `#5e5e5e` | this set | | +| `--nldesign-component-content-card-shadow-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22rgba%2827%2C%2028%2C%2029%2C%200.04%29%22%2F%3E%3C%2Fsvg%3E) `rgba(27, 28, 29, 0.04)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d2d3d40a%22%2F%3E%3C%2Fsvg%3E) `#d2d3d40a` | this set | | +| `--nldesign-component-content-surface-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23F5F6F8%22%2F%3E%3C%2Fsvg%3E) `#F5F6F8` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23171a20%22%2F%3E%3C%2Fsvg%3E) `#171a20` | this set | | +| `--nldesign-component-navigation-active-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23C2410C%22%2F%3E%3C%2Fsvg%3E) `#C2410C` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e9713f%22%2F%3E%3C%2Fsvg%3E) `#e9713f` | this set | | +| `--nldesign-component-navigation-active-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239A3412%22%2F%3E%3C%2Fsvg%3E) `#9A3412` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed8765%22%2F%3E%3C%2Fsvg%3E) `#ed8765` | this set | | +| `--nldesign-component-navigation-badge-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23C2410C%22%2F%3E%3C%2Fsvg%3E) `#C2410C` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e9713f%22%2F%3E%3C%2Fsvg%3E) `#e9713f` | this set | | +| `--nldesign-component-navigation-badge-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E) `#111111` | this set | | +| `--nldesign-component-status-badge-error-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23FCEDEC%22%2F%3E%3C%2Fsvg%3E) `#FCEDEC` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23310d0a%22%2F%3E%3C%2Fsvg%3E) `#310d0a` | this set | | +| `--nldesign-component-status-badge-error-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23A30000%22%2F%3E%3C%2Fsvg%3E) `#A30000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ff5c5c%22%2F%3E%3C%2Fsvg%3E) `#ff5c5c` | this set | | +| `--nldesign-component-status-badge-info-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E3F1F3%22%2F%3E%3C%2Fsvg%3E) `#E3F1F3` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23182f33%22%2F%3E%3C%2Fsvg%3E) `#182f33` | this set | | +| `--nldesign-component-status-badge-info-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23084F58%22%2F%3E%3C%2Fsvg%3E) `#084F58` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23a7eef7%22%2F%3E%3C%2Fsvg%3E) `#a7eef7` | this set | | +| `--nldesign-component-status-badge-success-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E7F3EA%22%2F%3E%3C%2Fsvg%3E) `#E7F3EA` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23192e1e%22%2F%3E%3C%2Fsvg%3E) `#192e1e` | this set | | +| `--nldesign-component-status-badge-success-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231E6B2A%22%2F%3E%3C%2Fsvg%3E) `#1E6B2A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2394e1a0%22%2F%3E%3C%2Fsvg%3E) `#94e1a0` | this set | | +| `--nldesign-component-status-badge-warning-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23FFF4DE%22%2F%3E%3C%2Fsvg%3E) `#FFF4DE` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23412d03%22%2F%3E%3C%2Fsvg%3E) `#412d03` | this set | | +| `--nldesign-component-status-badge-warning-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237A4F00%22%2F%3E%3C%2Fsvg%3E) `#7A4F00` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffd485%22%2F%3E%3C%2Fsvg%3E) `#ffd485` | this set | | +| `--nldesign-hero-action-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230B6E7A%22%2F%3E%3C%2Fsvg%3E) `#0B6E7A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2379e0ec%22%2F%3E%3C%2Fsvg%3E) `#79e0ec` | this set | | +| `--nldesign-hero-action-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--nldesign-hero-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E3F1F3%22%2F%3E%3C%2Fsvg%3E) `#E3F1F3` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23182f33%22%2F%3E%3C%2Fsvg%3E) `#182f33` | this set | | +| `--nldesign-hero-body-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231B1C1D%22%2F%3E%3C%2Fsvg%3E) `#1B1C1D` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E) `#111111` | this set | | +| `--nldesign-hero-title-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231B1C1D%22%2F%3E%3C%2Fsvg%3E) `#1B1C1D` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E) `#111111` | this set | | +| `--nldesign-login-watermark-image` | `url('../../img/logos/warmtepompacademie-emblem-grey.svg')` | | this set | | +| `--nldesign-logo-url` | `url('../../img/logos/warmtepompacademie.svg')` | `url('../../../img/logos/warmtepompacademie-dark.svg')` | this set | | +| `--nldesign-website-border-radius` | `3px` | | this set | | +| `--nldesign-website-border-radius-large` | `6px` | | this set | | +| `--nldesign-website-logo-height` | `50px` | | this set | | +| `--nldesign-website-logo-text-size` | `0` | | this set | | +| `--nldesign-website-logo-width` | `189px` | | this set | | +| `--warmtepompacademie-color-accent` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23C2410C%22%2F%3E%3C%2Fsvg%3E) `#C2410C` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e9713f%22%2F%3E%3C%2Fsvg%3E) `#e9713f` | this set | | +| `--warmtepompacademie-color-accent-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23FCEBDD%22%2F%3E%3C%2Fsvg%3E) `#FCEBDD` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233f2109%22%2F%3E%3C%2Fsvg%3E) `#3f2109` | this set | | +| `--warmtepompacademie-color-accent-mark` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23D9480F%22%2F%3E%3C%2Fsvg%3E) `#D9480F` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e6612d%22%2F%3E%3C%2Fsvg%3E) `#e6612d` | this set | | +| `--warmtepompacademie-color-accent-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239A3412%22%2F%3E%3C%2Fsvg%3E) `#9A3412` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ed8765%22%2F%3E%3C%2Fsvg%3E) `#ed8765` | this set | | +| `--warmtepompacademie-color-ink` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231B1C1D%22%2F%3E%3C%2Fsvg%3E) `#1B1C1D` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d2d3d4%22%2F%3E%3C%2Fsvg%3E) `#d2d3d4` | this set | | +| `--warmtepompacademie-color-line` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E4E6EA%22%2F%3E%3C%2Fsvg%3E) `#E4E6EA` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2324272d%22%2F%3E%3C%2Fsvg%3E) `#24272d` | this set | | +| `--warmtepompacademie-color-main` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%230B6E7A%22%2F%3E%3C%2Fsvg%3E) `#0B6E7A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2379e0ec%22%2F%3E%3C%2Fsvg%3E) `#79e0ec` | this set | | +| `--warmtepompacademie-color-main-deep` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23084F58%22%2F%3E%3C%2Fsvg%3E) `#084F58` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2395e6f0%22%2F%3E%3C%2Fsvg%3E) `#95e6f0` | this set | | +| `--warmtepompacademie-color-main-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E3F1F3%22%2F%3E%3C%2Fsvg%3E) `#E3F1F3` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23182f33%22%2F%3E%3C%2Fsvg%3E) `#182f33` | this set | | +| `--warmtepompacademie-color-muted` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235E6168%22%2F%3E%3C%2Fsvg%3E) `#5E6168` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2393969c%22%2F%3E%3C%2Fsvg%3E) `#93969c` | this set | | +| `--warmtepompacademie-color-surface` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23F5F6F8%22%2F%3E%3C%2Fsvg%3E) `#F5F6F8` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23171a20%22%2F%3E%3C%2Fsvg%3E) `#171a20` | this set | | diff --git a/docs/reference/token-sets/wilgenboom.md b/docs/reference/token-sets/wilgenboom.md new file mode 100644 index 000000000..40059523a --- /dev/null +++ b/docs/reference/token-sets/wilgenboom.md @@ -0,0 +1,315 @@ + + +# Basisschool De Wilgenboom + +Token set `wilgenboom`: 92 declared by this set, 129 from the defaults layer. + +Contrast: primary text on primary 6.32:1, primary on background 5.84:1 (pass). + +## Colours (Kleuren) + +| Token | Value | Dark mode | Source | Paints | +|---|---|---|---|---| +| `--nldesign-color-background-dark` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23EDEFF2%22%2F%3E%3C%2Fsvg%3E) `#EDEFF2` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231d2026%22%2F%3E%3C%2Fsvg%3E) `#1d2026` | this set | Background dark, Table header background | +| `--nldesign-color-background-darker` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23D3D8DF%22%2F%3E%3C%2Fsvg%3E) `#D3D8DF` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232d333c%22%2F%3E%3C%2Fsvg%3E) `#2d333c` | this set | Background darker | +| `--nldesign-color-background-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23F0F1F3%22%2F%3E%3C%2Fsvg%3E) `#F0F1F3` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231d1f23%22%2F%3E%3C%2Fsvg%3E) `#1d1f23` | this set | Main background color | +| `--nldesign-color-border` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E4E6EA%22%2F%3E%3C%2Fsvg%3E) `#E4E6EA` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2324272d%22%2F%3E%3C%2Fsvg%3E) `#24272d` | this set | Border color, Select border, Table row rule, Text input border, `--nldesign-component-separator-border-color` | +| `--nldesign-color-border-dark` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238A929E%22%2F%3E%3C%2Fsvg%3E) `#8A929E` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23656c78%22%2F%3E%3C%2Fsvg%3E) `#656c78` | this set | Border dark, Border max contrast | +| `--nldesign-color-button-primary-background` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232F6B4A%22%2F%3E%3C%2Fsvg%3E) `#2F6B4A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238cc8a7%22%2F%3E%3C%2Fsvg%3E) `#8cc8a7` | this set | | +| `--nldesign-color-button-primary-border` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232F6B4A%22%2F%3E%3C%2Fsvg%3E) `#2F6B4A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238cc8a7%22%2F%3E%3C%2Fsvg%3E) `#8cc8a7` | this set | | +| `--nldesign-color-button-primary-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231F4A33%22%2F%3E%3C%2Fsvg%3E) `#1F4A33` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23a7d6bd%22%2F%3E%3C%2Fsvg%3E) `#a7d6bd` | this set | | +| `--nldesign-color-button-primary-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233e3e3e%22%2F%3E%3C%2Fsvg%3E) `#3e3e3e` | this set | | +| `--nldesign-color-error` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23B30000%22%2F%3E%3C%2Fsvg%3E) `#B30000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f54949%22%2F%3E%3C%2Fsvg%3E) `#f54949` | this set | Border error, Element error, Error color, Text error, Text input invalid | +| `--nldesign-color-error-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23A30000%22%2F%3E%3C%2Fsvg%3E) `#A30000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f65656%22%2F%3E%3C%2Fsvg%3E) `#f65656` | this set | Error hover | +| `--nldesign-color-error-rgb` | `179, 0, 0` | `245, 73, 73` | this set | Error text color | +| `--nldesign-color-favorite` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e17000%22%2F%3E%3C%2Fsvg%3E) `#e17000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f48c25%22%2F%3E%3C%2Fsvg%3E) `#f48c25` | defaults | Background blur filter | +| `--nldesign-color-focus` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22rgba%2847%2C%20107%2C%2074%2C%200.5%29%22%2F%3E%3C%2Fsvg%3E) `rgba(47, 107, 74, 0.5)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238cc8a780%22%2F%3E%3C%2Fsvg%3E) `#8cc8a780` | this set | Button focus ring | +| `--nldesign-color-focus-rgb` | `47, 107, 74` | `140, 200, 167` | this set | | +| `--nldesign-color-header-background` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--nldesign-color-header-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231B1C1D%22%2F%3E%3C%2Fsvg%3E) `#1B1C1D` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | this set | | +| `--nldesign-color-info` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232F6B4A%22%2F%3E%3C%2Fsvg%3E) `#2F6B4A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238cc8a7%22%2F%3E%3C%2Fsvg%3E) `#8cc8a7` | this set | Info color, Info hover color, Text input focus | +| `--nldesign-color-info-rgb` | `47, 107, 74` | `140, 200, 167` | this set | | +| `--nldesign-color-link` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232F6B4A%22%2F%3E%3C%2Fsvg%3E) `#2F6B4A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238cc8a7%22%2F%3E%3C%2Fsvg%3E) `#8cc8a7` | this set | Link colour | +| `--nldesign-color-link-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231F4A33%22%2F%3E%3C%2Fsvg%3E) `#1F4A33` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23a7d6bd%22%2F%3E%3C%2Fsvg%3E) `#a7d6bd` | this set | Link hover colour | +| `--nldesign-color-link-visited` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2342145f%22%2F%3E%3C%2Fsvg%3E) `#42145f` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23c392e3%22%2F%3E%3C%2Fsvg%3E) `#c392e3` | defaults | `--nldesign-component-link-visited-color` | +| `--nldesign-color-logo-background` | `transparent` | | defaults | | +| `--nldesign-color-nav-background` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--nldesign-color-placeholder-dark` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E) `#cccccc` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233f3f3f%22%2F%3E%3C%2Fsvg%3E) `#3f3f3f` | defaults | Placeholder dark | +| `--nldesign-color-placeholder-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e5e5e5%22%2F%3E%3C%2Fsvg%3E) `#e5e5e5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232a2a2a%22%2F%3E%3C%2Fsvg%3E) `#2a2a2a` | defaults | Placeholder light | +| `--nldesign-color-primary` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232F6B4A%22%2F%3E%3C%2Fsvg%3E) `#2F6B4A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2360b988%22%2F%3E%3C%2Fsvg%3E) `#60b988` | this set | Badge background, Primary button background, Primary color, Primary element color, Primary element light text and 7 more | +| `--nldesign-color-primary-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231F4A33%22%2F%3E%3C%2Fsvg%3E) `#1F4A33` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231f4a33%22%2F%3E%3C%2Fsvg%3E) `#1f4a33` | this set | Primary button hover, Primary element hover, Primary hover color | +| `--nldesign-color-primary-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E8F1EB%22%2F%3E%3C%2Fsvg%3E) `#E8F1EB` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231c2c21%22%2F%3E%3C%2Fsvg%3E) `#1c2c21` | this set | Primary element light, Tertiary button hover, `--color-primary-element-text-dark` | +| `--nldesign-color-primary-light-hover` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23DBE8E0%22%2F%3E%3C%2Fsvg%3E) `#DBE8E0` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2324362b%22%2F%3E%3C%2Fsvg%3E) `#24362b` | this set | Primary element light hover, Primary light hover, Tertiary button pressed | +| `--nldesign-color-primary-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E) `#111111` | this set | Badge number, Primary button label, Primary element text, Primary text color | +| `--nldesign-color-success` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231E6B2A%22%2F%3E%3C%2Fsvg%3E) `#1E6B2A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238ad896%22%2F%3E%3C%2Fsvg%3E) `#8ad896` | this set | Border success, Element success, Success color, Text success | +| `--nldesign-color-success-rgb` | `30, 107, 42` | `138, 216, 150` | this set | Success hover color | +| `--nldesign-color-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231B1C1D%22%2F%3E%3C%2Fsvg%3E) `#1B1C1D` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | this set | Body text colour, Main text color, Table header label, `--nldesign-component-form-field-label-color`, `--nldesign-component-heading-1-color` and 8 more | +| `--nldesign-color-text-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | Muted text default color | +| `--nldesign-color-text-muted` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235E6168%22%2F%3E%3C%2Fsvg%3E) `#5E6168` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23999ca3%22%2F%3E%3C%2Fsvg%3E) `#999ca3` | this set | Text lighter, Text max contrast | +| `--nldesign-color-warning` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237A4F00%22%2F%3E%3C%2Fsvg%3E) `#7A4F00` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f8ca77%22%2F%3E%3C%2Fsvg%3E) `#f8ca77` | this set | Element warning, Text warning, Warning color | +| `--nldesign-color-warning-rgb` | `122, 79, 0` | `248, 202, 119` | this set | Warning hover color | +| `--nldesign-component-badge-background-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238cc8a7%22%2F%3E%3C%2Fsvg%3E) `#8cc8a7` | defaults | | +| `--nldesign-component-badge-color` | `var( + --nldesign-color-primary-text + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233e3e3e%22%2F%3E%3C%2Fsvg%3E) `#3e3e3e` | defaults | | +| `--nldesign-component-button-active-background-color` | `var( + --nldesign-color-primary-light-hover + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2324362b%22%2F%3E%3C%2Fsvg%3E) `#24362b` | defaults | | +| `--nldesign-component-button-active-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2394d0af%22%2F%3E%3C%2Fsvg%3E) `#94d0af` | defaults | | +| `--nldesign-component-button-background-color` | `transparent` | | defaults | | +| `--nldesign-component-button-border-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238cc8a7%22%2F%3E%3C%2Fsvg%3E) `#8cc8a7` | defaults | | +| `--nldesign-component-button-color` | `var(--nldesign-color-primary)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2394d0af%22%2F%3E%3C%2Fsvg%3E) `#94d0af` | defaults | | +| `--nldesign-component-button-disabled-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e5e5e5%22%2F%3E%3C%2Fsvg%3E) `#e5e5e5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232a2a2a%22%2F%3E%3C%2Fsvg%3E) `#2a2a2a` | defaults | | +| `--nldesign-component-button-disabled-border-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b4b4b4%22%2F%3E%3C%2Fsvg%3E) `#b4b4b4` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23535353%22%2F%3E%3C%2Fsvg%3E) `#535353` | defaults | | +| `--nldesign-component-button-disabled-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23696969%22%2F%3E%3C%2Fsvg%3E) `#696969` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | defaults | | +| `--nldesign-component-button-focus-border-color` | `var( + --nldesign-color-focus + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238cc8a780%22%2F%3E%3C%2Fsvg%3E) `#8cc8a780` | defaults | | +| `--nldesign-component-button-hover-background-color` | `var( + --nldesign-color-primary-light + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231c2c21%22%2F%3E%3C%2Fsvg%3E) `#1c2c21` | defaults | | +| `--nldesign-component-button-hover-border-color` | `var( + --nldesign-color-primary-hover + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23a7d6bd%22%2F%3E%3C%2Fsvg%3E) `#a7d6bd` | defaults | | +| `--nldesign-component-button-hover-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2394d0af%22%2F%3E%3C%2Fsvg%3E) `#94d0af` | defaults | | +| `--nldesign-component-button-primary-action-background-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238cc8a7%22%2F%3E%3C%2Fsvg%3E) `#8cc8a7` | defaults | | +| `--nldesign-component-button-primary-action-border-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238cc8a7%22%2F%3E%3C%2Fsvg%3E) `#8cc8a7` | defaults | | +| `--nldesign-component-button-primary-action-color` | `var( + --nldesign-color-primary-text + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233e3e3e%22%2F%3E%3C%2Fsvg%3E) `#3e3e3e` | defaults | | +| `--nldesign-component-button-primary-action-hover-background-color` | `var( + --nldesign-color-primary-hover + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23a7d6bd%22%2F%3E%3C%2Fsvg%3E) `#a7d6bd` | defaults | | +| `--nldesign-component-button-primary-action-hover-color` | `var( + --nldesign-color-primary-text + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233e3e3e%22%2F%3E%3C%2Fsvg%3E) `#3e3e3e` | defaults | | +| `--nldesign-component-button-secondary-action-background-color` | `transparent` | | defaults | | +| `--nldesign-component-button-secondary-action-border-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238cc8a7%22%2F%3E%3C%2Fsvg%3E) `#8cc8a7` | defaults | | +| `--nldesign-component-button-secondary-action-color` | `var( + --nldesign-color-primary + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2394d0af%22%2F%3E%3C%2Fsvg%3E) `#94d0af` | defaults | | +| `--nldesign-component-button-secondary-action-hover-background-color` | `var( + --nldesign-color-primary-light + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231c2c21%22%2F%3E%3C%2Fsvg%3E) `#1c2c21` | defaults | | +| `--nldesign-component-form-field-label-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-form-fieldset-border-color` | `var( + --nldesign-color-border + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2324272d%22%2F%3E%3C%2Fsvg%3E) `#24272d` | defaults | | +| `--nldesign-component-form-select-border-color` | `var(--nldesign-color-border)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2324272d%22%2F%3E%3C%2Fsvg%3E) `#24272d` | defaults | | +| `--nldesign-component-form-select-focus-border-color` | `var(--nldesign-color-info)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238cc8a7%22%2F%3E%3C%2Fsvg%3E) `#8cc8a7` | defaults | | +| `--nldesign-component-heading-1-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-heading-2-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-heading-3-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-heading-4-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-heading-5-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-heading-6-color` | `var(--nldesign-component-heading-color)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-heading-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-link-color` | `var(--nldesign-color-link)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2394d0af%22%2F%3E%3C%2Fsvg%3E) `#94d0af` | defaults | | +| `--nldesign-component-link-hover-color` | `var(--nldesign-color-link-hover)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5e0c9%22%2F%3E%3C%2Fsvg%3E) `#b5e0c9` | defaults | | +| `--nldesign-component-link-visited-color` | `var(--nldesign-color-link-visited)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cea0eb%22%2F%3E%3C%2Fsvg%3E) `#cea0eb` | defaults | | +| `--nldesign-component-ordered-list-color` | `var( + --nldesign-color-text + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-paragraph-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-separator-border-color` | `var(--nldesign-color-border)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2324272d%22%2F%3E%3C%2Fsvg%3E) `#24272d` | defaults | | +| `--nldesign-component-table-border-color` | `var(--nldesign-color-border)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2324272d%22%2F%3E%3C%2Fsvg%3E) `#24272d` | defaults | | +| `--nldesign-component-table-header-background-color` | `var( + --nldesign-color-background-dark + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231d2026%22%2F%3E%3C%2Fsvg%3E) `#1d2026` | defaults | | +| `--nldesign-component-table-header-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-table-row-hover-background-color` | `var( + --nldesign-color-background-hover + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231d1f23%22%2F%3E%3C%2Fsvg%3E) `#1d1f23` | defaults | | +| `--nldesign-component-textbox-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | defaults | | +| `--nldesign-component-textbox-border-color` | `var(--nldesign-color-border)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235d6474%22%2F%3E%3C%2Fsvg%3E) `#5d6474` | defaults | | +| `--nldesign-component-textbox-color` | `var(--nldesign-color-text)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | +| `--nldesign-component-textbox-disabled-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e5e5e5%22%2F%3E%3C%2Fsvg%3E) `#e5e5e5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232a2a2a%22%2F%3E%3C%2Fsvg%3E) `#2a2a2a` | defaults | | +| `--nldesign-component-textbox-disabled-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23696969%22%2F%3E%3C%2Fsvg%3E) `#696969` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | defaults | | +| `--nldesign-component-textbox-focus-border-color` | `var(--nldesign-color-info)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238cc8a7%22%2F%3E%3C%2Fsvg%3E) `#8cc8a7` | defaults | | +| `--nldesign-component-textbox-hover-border-color` | `var( + --nldesign-color-border-dark + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23656c78%22%2F%3E%3C%2Fsvg%3E) `#656c78` | defaults | | +| `--nldesign-component-textbox-invalid-border-color` | `var(--nldesign-color-error)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f54949%22%2F%3E%3C%2Fsvg%3E) `#f54949` | defaults | | +| `--nldesign-component-unordered-list-color` | `var( + --nldesign-color-text + )` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e2e3e4%22%2F%3E%3C%2Fsvg%3E) `#e2e3e4` | defaults | | + +## Typography (Typografie) + +| Token | Value | Dark mode | Source | Paints | +|---|---|---|---|---| +| `--nldesign-component-badge-font-size` | `0.875rem` | | defaults | | +| `--nldesign-component-badge-font-weight` | `700` | | defaults | | +| `--nldesign-component-button-font-family` | `var(--nldesign-font-family)` | | defaults | | +| `--nldesign-component-button-font-size` | `1rem` | | defaults | | +| `--nldesign-component-button-font-weight` | `700` | | defaults | | +| `--nldesign-component-form-field-label-font-weight` | `700` | | defaults | | +| `--nldesign-component-heading-1-font-size` | `2.5rem` | | defaults | | +| `--nldesign-component-heading-1-font-weight` | `var( + --nldesign-component-heading-font-weight + )` | | defaults | | +| `--nldesign-component-heading-1-line-height` | `1.2` | | defaults | | +| `--nldesign-component-heading-2-font-size` | `2rem` | | defaults | | +| `--nldesign-component-heading-2-font-weight` | `var( + --nldesign-component-heading-font-weight + )` | | defaults | | +| `--nldesign-component-heading-2-line-height` | `1.25` | | defaults | | +| `--nldesign-component-heading-3-font-size` | `1.5rem` | | defaults | | +| `--nldesign-component-heading-3-font-weight` | `var( + --nldesign-component-heading-font-weight + )` | | defaults | | +| `--nldesign-component-heading-3-line-height` | `1.3` | | defaults | | +| `--nldesign-component-heading-4-font-size` | `1.25rem` | | defaults | | +| `--nldesign-component-heading-4-font-weight` | `var( + --nldesign-component-heading-font-weight + )` | | defaults | | +| `--nldesign-component-heading-4-line-height` | `1.35` | | defaults | | +| `--nldesign-component-heading-5-font-size` | `1.125rem` | | defaults | | +| `--nldesign-component-heading-5-font-weight` | `var( + --nldesign-component-heading-font-weight + )` | | defaults | | +| `--nldesign-component-heading-5-line-height` | `1.4` | | defaults | | +| `--nldesign-component-heading-6-font-size` | `1rem` | | defaults | | +| `--nldesign-component-heading-6-font-weight` | `var( + --nldesign-component-heading-font-weight + )` | | defaults | | +| `--nldesign-component-heading-6-line-height` | `1.5` | | defaults | | +| `--nldesign-component-heading-font-family` | `var(--nldesign-font-family)` | | defaults | | +| `--nldesign-component-heading-font-weight` | `var(--nldesign-font-weight-heading)` | | defaults | | +| `--nldesign-component-link-font-weight` | `var( + --nldesign-font-weight-default + )` | | defaults | | +| `--nldesign-component-link-text-decoration` | `underline` | | defaults | | +| `--nldesign-component-ordered-list-font-size` | `1rem` | | defaults | | +| `--nldesign-component-ordered-list-line-height` | `1.5` | | defaults | | +| `--nldesign-component-paragraph-font-family` | `var(--nldesign-font-family)` | | defaults | | +| `--nldesign-component-paragraph-font-size` | `1rem` | | defaults | | +| `--nldesign-component-paragraph-font-weight` | `var(--nldesign-font-weight-default)` | | defaults | | +| `--nldesign-component-paragraph-line-height` | `1.5` | | defaults | | +| `--nldesign-component-table-header-font-weight` | `700` | | defaults | | +| `--nldesign-component-textbox-font-family` | `var(--nldesign-font-family)` | | defaults | | +| `--nldesign-component-textbox-font-size` | `1rem` | | defaults | | +| `--nldesign-component-unordered-list-font-size` | `1rem` | | defaults | | +| `--nldesign-component-unordered-list-line-height` | `1.5` | | defaults | | +| `--nldesign-font-family` | `'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif` | | this set | Font family, `--nldesign-component-button-font-family`, `--nldesign-component-textbox-font-family` | +| `--nldesign-font-weight-default` | `400` | | defaults | Base font size | +| `--nldesign-font-weight-element` | `500` | | defaults | Control font weight | +| `--nldesign-font-weight-heading` | `700` | | defaults | Heading font weight | + +## Spacing and shape (Ruimte en vorm) + +| Token | Value | Dark mode | Source | Paints | +|---|---|---|---|---| +| `--nldesign-border-radius` | `8px` | | this set | Border radius element, Button corner, Input border width, Select corner, Text input corner | +| `--nldesign-border-radius-large` | `12px` | | this set | Container radius | +| `--nldesign-border-radius-pill` | `100px` | | this set | Badge shape, Border radius pill | +| `--nldesign-border-radius-rounded` | `28px` | | this set | Border radius rounded | +| `--nldesign-border-radius-small` | `4px` | | this set | Border radius small | +| `--nldesign-component-badge-border-radius` | `var( + --nldesign-border-radius-pill + )` | | defaults | | +| `--nldesign-component-badge-padding-block` | `0.125rem` | | defaults | | +| `--nldesign-component-badge-padding-inline` | `0.5rem` | | defaults | | +| `--nldesign-component-button-border-radius` | `var(--nldesign-border-radius)` | | defaults | | +| `--nldesign-component-button-border-width` | `1px` | | defaults | | +| `--nldesign-component-button-padding-block` | `0.5rem` | | defaults | | +| `--nldesign-component-button-padding-inline` | `1rem` | | defaults | | +| `--nldesign-component-form-fieldset-border-width` | `1px` | | defaults | | +| `--nldesign-component-form-select-border-radius` | `var(--nldesign-border-radius)` | | defaults | | +| `--nldesign-component-separator-border-width` | `1px` | | defaults | | +| `--nldesign-component-table-border-width` | `1px` | | defaults | | +| `--nldesign-component-table-cell-padding-block` | `0.5rem` | | defaults | | +| `--nldesign-component-table-cell-padding-inline` | `0.75rem` | | defaults | | +| `--nldesign-component-textbox-border-radius` | `var(--nldesign-border-radius)` | | defaults | | +| `--nldesign-component-textbox-border-width` | `1px` | | defaults | | +| `--nldesign-component-textbox-padding-block` | `0.5rem` | | defaults | | +| `--nldesign-component-textbox-padding-inline` | `0.75rem` | | defaults | | +| `--nldesign-header-border-bottom` | `1px solid rgba(138, 146, 158, 0.25)` | | this set | | +| `--nldesign-logo-height` | `auto` | | defaults | | +| `--nldesign-logo-width` | `153px` | | this set | | +| `--nldesign-size-lint` | `0px` | | defaults | | +| `--nldesign-size-lint-height` | `0px` | | defaults | | + +## Other tokens (Overige tokens) + +| Token | Value | Dark mode | Source | Paints | +|---|---|---|---|---| +| `--nldesign-animation-easing` | `ease` | | defaults | | +| `--nldesign-animation-quick` | `100ms` | | defaults | Header menu item height | +| `--nldesign-animation-slow` | `300ms` | | defaults | Animation slow | +| `--nldesign-header-icon-filter` | `invert(1) brightness(0) contrast(100)` | | defaults | | +| `--nldesign-logo-bottom` | `1px` | | defaults | | +| `--nldesign-logo-center` | `50%` | | defaults | | +| `--nldesign-logo-filter` | `none` | | defaults | | +| `--nldesign-logo-inset` | `12px` | | defaults | | +| `--nldesign-logo-top` | `1px` | | defaults | | + +## Tokens nothing reads (Tokens die niets leest) + +| Token | Value | Dark mode | Source | Paints | +|---|---|---|---|---| +| `--nldesign-brand-stripe-color-1` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232F6B4A%22%2F%3E%3C%2Fsvg%3E) `#2F6B4A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238cc8a7%22%2F%3E%3C%2Fsvg%3E) `#8cc8a7` | this set | | +| `--nldesign-brand-stripe-color-2` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23F5B82E%22%2F%3E%3C%2Fsvg%3E) `#F5B82E` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cc9414%22%2F%3E%3C%2Fsvg%3E) `#cc9414` | this set | | +| `--nldesign-brand-stripe-color-3` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232F6B4A%22%2F%3E%3C%2Fsvg%3E) `#2F6B4A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238cc8a7%22%2F%3E%3C%2Fsvg%3E) `#8cc8a7` | this set | | +| `--nldesign-brand-stripe-height` | `17px` | | this set | | +| `--nldesign-brand-stripe-image` | `url("data:image/svg+xml,")` | | this set | | +| `--nldesign-brand-stripe-image-inverse` | `url("data:image/svg+xml,")` | | this set | | +| `--nldesign-brand-stripe-ratio-1` | `3` | | this set | | +| `--nldesign-brand-stripe-ratio-2` | `1` | | this set | | +| `--nldesign-brand-stripe-ratio-3` | `3` | | this set | | +| `--nldesign-color-accent` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23F5B82E%22%2F%3E%3C%2Fsvg%3E) `#F5B82E` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cc9414%22%2F%3E%3C%2Fsvg%3E) `#cc9414` | this set | | +| `--nldesign-color-accent-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23FDF3D7%22%2F%3E%3C%2Fsvg%3E) `#FDF3D7` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23453507%22%2F%3E%3C%2Fsvg%3E) `#453507` | this set | | +| `--nldesign-color-accent-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%236B4A00%22%2F%3E%3C%2Fsvg%3E) `#6B4A00` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffde94%22%2F%3E%3C%2Fsvg%3E) `#ffde94` | this set | | +| `--nldesign-color-footer-background` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231F4A33%22%2F%3E%3C%2Fsvg%3E) `#1F4A33` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23a7d6bd%22%2F%3E%3C%2Fsvg%3E) `#a7d6bd` | this set | | +| `--nldesign-color-footer-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233e3e3e%22%2F%3E%3C%2Fsvg%3E) `#3e3e3e` | this set | | +| `--nldesign-component-content-card-shadow-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22rgba%2827%2C%2028%2C%2029%2C%200.04%29%22%2F%3E%3C%2Fsvg%3E) `rgba(27, 28, 29, 0.04)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d2d3d40a%22%2F%3E%3C%2Fsvg%3E) `#d2d3d40a` | this set | | +| `--nldesign-component-content-surface-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23F5F6F8%22%2F%3E%3C%2Fsvg%3E) `#F5F6F8` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23171a20%22%2F%3E%3C%2Fsvg%3E) `#171a20` | this set | | +| `--nldesign-component-navigation-active-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23F5B82E%22%2F%3E%3C%2Fsvg%3E) `#F5B82E` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cc9414%22%2F%3E%3C%2Fsvg%3E) `#cc9414` | this set | | +| `--nldesign-component-navigation-active-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%236B4A00%22%2F%3E%3C%2Fsvg%3E) `#6B4A00` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffde94%22%2F%3E%3C%2Fsvg%3E) `#ffde94` | this set | | +| `--nldesign-component-navigation-badge-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23F5B82E%22%2F%3E%3C%2Fsvg%3E) `#F5B82E` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cc9414%22%2F%3E%3C%2Fsvg%3E) `#cc9414` | this set | | +| `--nldesign-component-navigation-badge-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231A1A1A%22%2F%3E%3C%2Fsvg%3E) `#1A1A1A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E) `#111111` | this set | | +| `--nldesign-component-status-badge-error-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23FCEDEC%22%2F%3E%3C%2Fsvg%3E) `#FCEDEC` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23310d0a%22%2F%3E%3C%2Fsvg%3E) `#310d0a` | this set | | +| `--nldesign-component-status-badge-error-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23A30000%22%2F%3E%3C%2Fsvg%3E) `#A30000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ff5c5c%22%2F%3E%3C%2Fsvg%3E) `#ff5c5c` | this set | | +| `--nldesign-component-status-badge-info-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E8F1EB%22%2F%3E%3C%2Fsvg%3E) `#E8F1EB` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231c2c21%22%2F%3E%3C%2Fsvg%3E) `#1c2c21` | this set | | +| `--nldesign-component-status-badge-info-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231F4A33%22%2F%3E%3C%2Fsvg%3E) `#1F4A33` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5e0c9%22%2F%3E%3C%2Fsvg%3E) `#b5e0c9` | this set | | +| `--nldesign-component-status-badge-success-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E7F3EA%22%2F%3E%3C%2Fsvg%3E) `#E7F3EA` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23192e1e%22%2F%3E%3C%2Fsvg%3E) `#192e1e` | this set | | +| `--nldesign-component-status-badge-success-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231E6B2A%22%2F%3E%3C%2Fsvg%3E) `#1E6B2A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2394e1a0%22%2F%3E%3C%2Fsvg%3E) `#94e1a0` | this set | | +| `--nldesign-component-status-badge-warning-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23FFF4DE%22%2F%3E%3C%2Fsvg%3E) `#FFF4DE` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23412d03%22%2F%3E%3C%2Fsvg%3E) `#412d03` | this set | | +| `--nldesign-component-status-badge-warning-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237A4F00%22%2F%3E%3C%2Fsvg%3E) `#7A4F00` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffd485%22%2F%3E%3C%2Fsvg%3E) `#ffd485` | this set | | +| `--nldesign-hero-action-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232F6B4A%22%2F%3E%3C%2Fsvg%3E) `#2F6B4A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238cc8a7%22%2F%3E%3C%2Fsvg%3E) `#8cc8a7` | this set | | +| `--nldesign-hero-action-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--nldesign-hero-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E8F1EB%22%2F%3E%3C%2Fsvg%3E) `#E8F1EB` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231c2c21%22%2F%3E%3C%2Fsvg%3E) `#1c2c21` | this set | | +| `--nldesign-hero-body-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231B1C1D%22%2F%3E%3C%2Fsvg%3E) `#1B1C1D` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E) `#111111` | this set | | +| `--nldesign-hero-decoration-image` | `var(--nldesign-emblem-url)` | | this set | | +| `--nldesign-hero-title-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231F4A33%22%2F%3E%3C%2Fsvg%3E) `#1F4A33` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E) `#111111` | this set | | +| `--nldesign-login-watermark-image` | `url('../../img/logos/wilgenboom-emblem-grey.svg')` | | this set | | +| `--nldesign-logo-url` | `url('../../img/logos/wilgenboom.svg')` | `url('../../../img/logos/wilgenboom-dark.svg')` | this set | | +| `--nldesign-website-border-radius` | `10px` | | this set | | +| `--nldesign-website-border-radius-large` | `14px` | | this set | | +| `--nldesign-website-logo-height` | `50px` | | this set | | +| `--nldesign-website-logo-text-size` | `0` | | this set | | +| `--nldesign-website-logo-width` | `238px` | | this set | | +| `--wilgenboom-color-accent` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23F5B82E%22%2F%3E%3C%2Fsvg%3E) `#F5B82E` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23cc9414%22%2F%3E%3C%2Fsvg%3E) `#cc9414` | this set | | +| `--wilgenboom-color-accent-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23FDF3D7%22%2F%3E%3C%2Fsvg%3E) `#FDF3D7` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23453507%22%2F%3E%3C%2Fsvg%3E) `#453507` | this set | | +| `--wilgenboom-color-accent-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%236B4A00%22%2F%3E%3C%2Fsvg%3E) `#6B4A00` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffde94%22%2F%3E%3C%2Fsvg%3E) `#ffde94` | this set | | +| `--wilgenboom-color-ink` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231B1C1D%22%2F%3E%3C%2Fsvg%3E) `#1B1C1D` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d2d3d4%22%2F%3E%3C%2Fsvg%3E) `#d2d3d4` | this set | | +| `--wilgenboom-color-line` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E4E6EA%22%2F%3E%3C%2Fsvg%3E) `#E4E6EA` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2324272d%22%2F%3E%3C%2Fsvg%3E) `#24272d` | this set | | +| `--wilgenboom-color-main` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232F6B4A%22%2F%3E%3C%2Fsvg%3E) `#2F6B4A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238cc8a7%22%2F%3E%3C%2Fsvg%3E) `#8cc8a7` | this set | | +| `--wilgenboom-color-main-deep` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231F4A33%22%2F%3E%3C%2Fsvg%3E) `#1F4A33` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23a7d6bd%22%2F%3E%3C%2Fsvg%3E) `#a7d6bd` | this set | | +| `--wilgenboom-color-main-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E8F1EB%22%2F%3E%3C%2Fsvg%3E) `#E8F1EB` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231c2c21%22%2F%3E%3C%2Fsvg%3E) `#1c2c21` | this set | | +| `--wilgenboom-color-muted` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235E6168%22%2F%3E%3C%2Fsvg%3E) `#5E6168` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2393969c%22%2F%3E%3C%2Fsvg%3E) `#93969c` | this set | | +| `--wilgenboom-color-surface` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23F5F6F8%22%2F%3E%3C%2Fsvg%3E) `#F5F6F8` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23171a20%22%2F%3E%3C%2Fsvg%3E) `#171a20` | this set | | diff --git a/docs/reference/token-sets/zuiddrecht.md b/docs/reference/token-sets/zuiddrecht.md index 85429e169..dd0599a24 100644 --- a/docs/reference/token-sets/zuiddrecht.md +++ b/docs/reference/token-sets/zuiddrecht.md @@ -2,7 +2,7 @@ # Gemeente Zuiddrecht -Token set `zuiddrecht`: 74 declared by this set, 129 from the defaults layer. +Token set `zuiddrecht`: 122 declared by this set, 129 from the defaults layer. Contrast: primary text on primary 5.64:1, primary on background 5.22:1 (pass). @@ -269,6 +269,12 @@ Contrast: primary text on primary 5.64:1, primary on background 5.22:1 (pass). | `--nldesign-brand-stripe-ratio-1` | `6` | | this set | | | `--nldesign-brand-stripe-ratio-2` | `3` | | this set | | | `--nldesign-brand-stripe-ratio-3` | `1` | | this set | | +| `--nldesign-color-accent` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23CC0000%22%2F%3E%3C%2Fsvg%3E) `#CC0000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f43535%22%2F%3E%3C%2Fsvg%3E) `#f43535` | this set | | +| `--nldesign-color-accent-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23FCEDEC%22%2F%3E%3C%2Fsvg%3E) `#FCEDEC` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23310d0a%22%2F%3E%3C%2Fsvg%3E) `#310d0a` | this set | | +| `--nldesign-color-accent-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23A30000%22%2F%3E%3C%2Fsvg%3E) `#A30000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ff5c5c%22%2F%3E%3C%2Fsvg%3E) `#ff5c5c` | this set | | +| `--nldesign-color-footer-background` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23234A78%22%2F%3E%3C%2Fsvg%3E) `#234A78` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237fa6d4%22%2F%3E%3C%2Fsvg%3E) `#7fa6d4` | this set | | +| `--nldesign-color-footer-text` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%232e2e2e%22%2F%3E%3C%2Fsvg%3E) `#2e2e2e` | this set | | +| `--nldesign-color-surface` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23F4F6F9%22%2F%3E%3C%2Fsvg%3E) `#F4F6F9` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141a23%22%2F%3E%3C%2Fsvg%3E) `#141a23` | this set | | | `--nldesign-component-content-card-shadow-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22rgba%2827%2C%2028%2C%2029%2C%200.04%29%22%2F%3E%3C%2Fsvg%3E) `rgba(27, 28, 29, 0.04)` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23d2d3d40a%22%2F%3E%3C%2Fsvg%3E) `#d2d3d40a` | this set | | | `--nldesign-component-content-surface-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23F5F6F8%22%2F%3E%3C%2Fsvg%3E) `#F5F6F8` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23171a20%22%2F%3E%3C%2Fsvg%3E) `#171a20` | this set | | | `--nldesign-component-navigation-active-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23CC0000%22%2F%3E%3C%2Fsvg%3E) `#CC0000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23f43535%22%2F%3E%3C%2Fsvg%3E) `#f43535` | this set | | @@ -283,8 +289,50 @@ Contrast: primary text on primary 5.64:1, primary on background 5.22:1 (pass). | `--nldesign-component-status-badge-success-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231E6B2A%22%2F%3E%3C%2Fsvg%3E) `#1E6B2A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2394e1a0%22%2F%3E%3C%2Fsvg%3E) `#94e1a0` | this set | | | `--nldesign-component-status-badge-warning-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23FFF4DE%22%2F%3E%3C%2Fsvg%3E) `#FFF4DE` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23412d03%22%2F%3E%3C%2Fsvg%3E) `#412d03` | this set | | | `--nldesign-component-status-badge-warning-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237A4F00%22%2F%3E%3C%2Fsvg%3E) `#7A4F00` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffd485%22%2F%3E%3C%2Fsvg%3E) `#ffd485` | this set | | +| `--nldesign-hero-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23EAF0F7%22%2F%3E%3C%2Fsvg%3E) `#EAF0F7` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2313202e%22%2F%3E%3C%2Fsvg%3E) `#13202e` | this set | | +| `--nldesign-hero-body-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231B1C1D%22%2F%3E%3C%2Fsvg%3E) `#1B1C1D` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E) `#111111` | this set | | +| `--nldesign-hero-decoration-image` | `var(--nldesign-emblem-grey-url, var(--nldesign-emblem-url))` | | this set | | +| `--nldesign-hero-title-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231B1C1D%22%2F%3E%3C%2Fsvg%3E) `#1B1C1D` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E) `#111111` | this set | | | `--nldesign-login-watermark-image` | `url('../../img/logos/zuiddrecht-emblem-grey.svg')` | | this set | | | `--nldesign-logo-url` | `url('../../img/logos/zuiddrecht.svg')` | `url('../../../img/logos/zuiddrecht-dark.svg')` | this set | | +| `--nldesign-website-attention-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23FFF4DE%22%2F%3E%3C%2Fsvg%3E) `#FFF4DE` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23412d03%22%2F%3E%3C%2Fsvg%3E) `#412d03` | this set | | +| `--nldesign-website-attention-border-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E8C77D%22%2F%3E%3C%2Fsvg%3E) `#E8C77D` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238a691f%22%2F%3E%3C%2Fsvg%3E) `#8a691f` | this set | | +| `--nldesign-website-attention-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231A1A1A%22%2F%3E%3C%2Fsvg%3E) `#1A1A1A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e5e5e5%22%2F%3E%3C%2Fsvg%3E) `#e5e5e5` | this set | | +| `--nldesign-website-badge-border-radius` | `14px` | | this set | | +| `--nldesign-website-band-max-width` | `1280px` | | this set | | +| `--nldesign-website-border-radius` | `4px` | | this set | | +| `--nldesign-website-border-radius-large` | `6px` | | this set | | +| `--nldesign-website-button-font-weight` | `600` | | this set | | +| `--nldesign-website-color-text-muted` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%234A4A4A%22%2F%3E%3C%2Fsvg%3E) `#4A4A4A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23b5b5b5%22%2F%3E%3C%2Fsvg%3E) `#b5b5b5` | this set | | +| `--nldesign-website-content-font-size` | `17px` | | this set | | +| `--nldesign-website-control-border-width` | `2px` | | this set | | +| `--nldesign-website-header-gutter` | `0px` | | this set | | +| `--nldesign-website-header-max-width` | `1280px` | | this set | | +| `--nldesign-website-heading-1-font-size` | `44px` | | this set | | +| `--nldesign-website-heading-2-font-size` | `40px` | | this set | | +| `--nldesign-website-heading-3-font-size` | `26px` | | this set | | +| `--nldesign-website-lead-font-size` | `21px` | | this set | | +| `--nldesign-website-logo-height` | `50px` | | this set | | +| `--nldesign-website-logo-text-size` | `0` | | this set | | +| `--nldesign-website-logo-width` | `234px` | | this set | | +| `--nldesign-website-nav-current-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233669A5%22%2F%3E%3C%2Fsvg%3E) `#3669A5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%236d9acf%22%2F%3E%3C%2Fsvg%3E) `#6d9acf` | this set | | +| `--nldesign-website-nav-current-in-line` | `1` | | this set | | +| `--nldesign-website-notice-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23EAF0F7%22%2F%3E%3C%2Fsvg%3E) `#EAF0F7` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2313202e%22%2F%3E%3C%2Fsvg%3E) `#13202e` | this set | | +| `--nldesign-website-notice-border-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23B9CBE2%22%2F%3E%3C%2Fsvg%3E) `#B9CBE2` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23273b55%22%2F%3E%3C%2Fsvg%3E) `#273b55` | this set | | +| `--nldesign-website-notice-border-width` | `1px` | | this set | | +| `--nldesign-website-notice-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231A1A1A%22%2F%3E%3C%2Fsvg%3E) `#1A1A1A` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23e5e5e5%22%2F%3E%3C%2Fsvg%3E) `#e5e5e5` | this set | | +| `--nldesign-website-page-gutter` | `24px` | | this set | | +| `--nldesign-website-page-max-width` | `1328px` | | this set | | +| `--nldesign-website-page-title-line-height` | `1.15` | | this set | | +| `--nldesign-website-page-title-size` | `2.75rem` | | this set | | +| `--nldesign-website-placeholder-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23D9E3EF%22%2F%3E%3C%2Fsvg%3E) `#D9E3EF` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%231b2a3b%22%2F%3E%3C%2Fsvg%3E) `#1b2a3b` | this set | | +| `--nldesign-website-step-current-background-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fsvg%3E) `#141414` | this set | | +| `--nldesign-website-step-current-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23CC0000%22%2F%3E%3C%2Fsvg%3E) `#CC0000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ff3d3d%22%2F%3E%3C%2Fsvg%3E) `#ff3d3d` | this set | | +| `--nldesign-website-step-done-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233669A5%22%2F%3E%3C%2Fsvg%3E) `#3669A5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%236d9acf%22%2F%3E%3C%2Fsvg%3E) `#6d9acf` | this set | | +| `--nldesign-website-step-done-mark-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E) `#ffffff` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%239e9e9e%22%2F%3E%3C%2Fsvg%3E) `#9e9e9e` | this set | | +| `--nldesign-website-step-marker-size` | `36px` | | this set | | +| `--nldesign-website-tab-current-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23CC0000%22%2F%3E%3C%2Fsvg%3E) `#CC0000` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23ff3d3d%22%2F%3E%3C%2Fsvg%3E) `#ff3d3d` | this set | | +| `--nldesign-website-tab-line-color` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23D3D8DF%22%2F%3E%3C%2Fsvg%3E) `#D3D8DF` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%238f9cad%22%2F%3E%3C%2Fsvg%3E) `#8f9cad` | this set | | | `--zuiddrecht-color-blue` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%233669A5%22%2F%3E%3C%2Fsvg%3E) `#3669A5` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%235b8ac2%22%2F%3E%3C%2Fsvg%3E) `#5b8ac2` | this set | | | `--zuiddrecht-color-blue-dark` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23234A78%22%2F%3E%3C%2Fsvg%3E) `#234A78` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%237fa6d4%22%2F%3E%3C%2Fsvg%3E) `#7fa6d4` | this set | | | `--zuiddrecht-color-blue-light` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23EAF0F7%22%2F%3E%3C%2Fsvg%3E) `#EAF0F7` | ![](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%2313202e%22%2F%3E%3C%2Fsvg%3E) `#13202e` | this set | | diff --git a/eslint.config.mjs b/eslint.config.mjs index badfa1d89..70abee812 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -59,6 +59,16 @@ export default [ }, rules: relaxed, }, + { + // Bundled by webpack (webpack.code-editor.config.js), so modules. + files: ['src/**/*.js'], + languageOptions: { + ecmaVersion: 2022, + sourceType: 'module', + globals: globals.browser, + }, + rules: relaxed, + }, { files: ['tests/vitest/**/*.js'], languageOptions: { diff --git a/img/ICONS.md b/img/ICONS.md index 23523a060..9277e9e57 100644 --- a/img/ICONS.md +++ b/img/ICONS.md @@ -273,7 +273,7 @@ PHP/template and other non-Vue consumers. These URLs only resolve while the nldesign app is enabled. Consumers must ship a fallback icon or declare a dependency on `nldesign`. -## Logos (41 total) +## Logos (57 total) Available in: `img/logos/`. Static, checked-in huisstijl assets tied to token sets (`token-sets.json` `theming.logo` entries) — organisation marks displayed as that @@ -286,6 +286,10 @@ organisation's own identity on that organisation's own instance. **Not build out - drechterland - epe-dark - epe +- esdoornveen-dark +- esdoornveen-emblem-grey +- esdoornveen-emblem +- esdoornveen - example-basisschool - example-college - example-gemeente @@ -312,9 +316,21 @@ organisation's own identity on that organisation's own instance. **Not build out - tilburg - tubbergen - utrecht +- vaartveld-dark +- vaartveld-emblem-grey +- vaartveld-emblem +- vaartveld - vga-verzekeringen - vng-dark - vng +- warmtepompacademie-dark +- warmtepompacademie-emblem-grey +- warmtepompacademie-emblem +- warmtepompacademie +- wilgenboom-dark +- wilgenboom-emblem-grey +- wilgenboom-emblem +- wilgenboom - xxllnc-dark - xxllnc - zuiddrecht-dark diff --git a/img/logos/esdoornveen-dark.svg b/img/logos/esdoornveen-dark.svg new file mode 100644 index 000000000..78f631114 --- /dev/null +++ b/img/logos/esdoornveen-dark.svg @@ -0,0 +1,10 @@ +Esdoornveen, mbo college + + + + + + + + + diff --git a/img/logos/esdoornveen-emblem-grey.svg b/img/logos/esdoornveen-emblem-grey.svg new file mode 100644 index 000000000..cdefeb8ec --- /dev/null +++ b/img/logos/esdoornveen-emblem-grey.svg @@ -0,0 +1,8 @@ +Esdoornveen, mbo college + + + + + + + diff --git a/img/logos/esdoornveen-emblem.svg b/img/logos/esdoornveen-emblem.svg new file mode 100644 index 000000000..5ebee1bf3 --- /dev/null +++ b/img/logos/esdoornveen-emblem.svg @@ -0,0 +1,8 @@ +Esdoornveen, mbo college + + + + + + + diff --git a/img/logos/esdoornveen.svg b/img/logos/esdoornveen.svg new file mode 100644 index 000000000..a602d4098 --- /dev/null +++ b/img/logos/esdoornveen.svg @@ -0,0 +1,10 @@ +Esdoornveen, mbo college + + + + + + + + + diff --git a/img/logos/vaartveld-dark.svg b/img/logos/vaartveld-dark.svg new file mode 100644 index 000000000..27a0c4b4d --- /dev/null +++ b/img/logos/vaartveld-dark.svg @@ -0,0 +1,7 @@ +Vaartveld College + + + + + + diff --git a/img/logos/vaartveld-emblem-grey.svg b/img/logos/vaartveld-emblem-grey.svg new file mode 100644 index 000000000..7e01df33c --- /dev/null +++ b/img/logos/vaartveld-emblem-grey.svg @@ -0,0 +1,5 @@ +Vaartveld College + + + + diff --git a/img/logos/vaartveld-emblem.svg b/img/logos/vaartveld-emblem.svg new file mode 100644 index 000000000..6afe1b4b1 --- /dev/null +++ b/img/logos/vaartveld-emblem.svg @@ -0,0 +1,5 @@ +Vaartveld College + + + + diff --git a/img/logos/vaartveld.svg b/img/logos/vaartveld.svg new file mode 100644 index 000000000..ff2a37b94 --- /dev/null +++ b/img/logos/vaartveld.svg @@ -0,0 +1,7 @@ +Vaartveld College + + + + + + diff --git a/img/logos/warmtepompacademie-dark.svg b/img/logos/warmtepompacademie-dark.svg new file mode 100644 index 000000000..e22fdba81 --- /dev/null +++ b/img/logos/warmtepompacademie-dark.svg @@ -0,0 +1,7 @@ +Warmtepompacademie + + + + + + diff --git a/img/logos/warmtepompacademie-emblem-grey.svg b/img/logos/warmtepompacademie-emblem-grey.svg new file mode 100644 index 000000000..becf2d97d --- /dev/null +++ b/img/logos/warmtepompacademie-emblem-grey.svg @@ -0,0 +1,5 @@ +Warmtepompacademie + + + + diff --git a/img/logos/warmtepompacademie-emblem.svg b/img/logos/warmtepompacademie-emblem.svg new file mode 100644 index 000000000..95bfcb70e --- /dev/null +++ b/img/logos/warmtepompacademie-emblem.svg @@ -0,0 +1,5 @@ +Warmtepompacademie + + + + diff --git a/img/logos/warmtepompacademie.svg b/img/logos/warmtepompacademie.svg new file mode 100644 index 000000000..609f404fb --- /dev/null +++ b/img/logos/warmtepompacademie.svg @@ -0,0 +1,7 @@ +Warmtepompacademie + + + + + + diff --git a/img/logos/wilgenboom-dark.svg b/img/logos/wilgenboom-dark.svg new file mode 100644 index 000000000..4f4028ab8 --- /dev/null +++ b/img/logos/wilgenboom-dark.svg @@ -0,0 +1,11 @@ +Basisschool De Wilgenboom + + + + + + + + + + diff --git a/img/logos/wilgenboom-emblem-grey.svg b/img/logos/wilgenboom-emblem-grey.svg new file mode 100644 index 000000000..fb55e5ce8 --- /dev/null +++ b/img/logos/wilgenboom-emblem-grey.svg @@ -0,0 +1,9 @@ +Basisschool De Wilgenboom + + + + + + + + diff --git a/img/logos/wilgenboom-emblem.svg b/img/logos/wilgenboom-emblem.svg new file mode 100644 index 000000000..686925fa9 --- /dev/null +++ b/img/logos/wilgenboom-emblem.svg @@ -0,0 +1,9 @@ +Basisschool De Wilgenboom + + + + + + + + diff --git a/img/logos/wilgenboom.svg b/img/logos/wilgenboom.svg new file mode 100644 index 000000000..c65574ae7 --- /dev/null +++ b/img/logos/wilgenboom.svg @@ -0,0 +1,11 @@ +Basisschool De Wilgenboom + + + + + + + + + + diff --git a/js/admin-app-brands.js b/js/admin-app-brands.js index e46ebad79..37331635c 100644 --- a/js/admin-app-brands.js +++ b/js/admin-app-brands.js @@ -78,8 +78,12 @@ function logoInput(appId, size) { var id = 'nldesign-app-brands-' + appId + '-' + size + // Nextcloud's own button instead of the browser's file control, + // which draws in the browser's language and style. var wrap = document.createElement('span') + wrap.className = 'nldesign-file-pick' var label = document.createElement('label') + label.id = id + '-label' label.setAttribute('for', id) label.textContent = size === 'large' @@ -88,8 +92,25 @@ var input = document.createElement('input') input.type = 'file' input.id = id + input.hidden = true input.accept = 'image/png,image/jpeg,image/webp,image/svg+xml' + var pick = document.createElement('button') + pick.type = 'button' + pick.className = 'button' + pick.id = id + '-btn' + pick.setAttribute('aria-labelledby', label.id + ' ' + pick.id) + pick.textContent = t('thematiq', 'Choose image') + pick.addEventListener('click', function () { + input.click() + }) + var name = document.createElement('span') + name.className = 'nldesign-file-pick__name' + name.textContent = t('thematiq', 'No file chosen') input.addEventListener('change', function () { + name.textContent = + input.files && input.files[0] + ? input.files[0].name + : t('thematiq', 'No file chosen') if (!input.files || input.files.length === 0) { return } @@ -107,6 +128,8 @@ }) wrap.appendChild(label) wrap.appendChild(input) + wrap.appendChild(pick) + wrap.appendChild(name) return wrap } diff --git a/js/admin-documents.js b/js/admin-documents.js index 54b4a4bec..c467be032 100644 --- a/js/admin-documents.js +++ b/js/admin-documents.js @@ -127,8 +127,23 @@ var remove = document.getElementById( 'nldesign-documents-' + kind + '-remove', ) + var pick = document.getElementById('nldesign-documents-' + kind + '-btn') + var name = document.getElementById( + 'nldesign-documents-' + kind + '-name', + ) + if (input && pick) { + pick.addEventListener('click', function () { + input.click() + }) + } if (input) { input.addEventListener('change', function () { + if (name) { + name.textContent = + input.files && input.files[0] + ? input.files[0].name + : t('thematiq', 'No file chosen') + } if (!input.files || input.files.length === 0) { return } diff --git a/js/admin.js b/js/admin.js index d4c99cb2a..806d94c8e 100644 --- a/js/admin.js +++ b/js/admin.js @@ -461,11 +461,68 @@ if (layout === undefined || layout === null) { return } + var light = layout.workplaceLayout === 'light' + var stripe = layout.brandStripe === true + setConditionalLayer('workplace-layout', light) setConditionalLayer( - 'workplace-layout', - layout.workplaceLayout === 'light', + 'login-watermark-off', + light && layout.loginWatermark === false, ) - setConditionalLayer('brand-stripe', layout.brandStripe === true) + setConditionalLayer( + 'header-workplace', + light && layout.headerStyle === 'workplace', + ) + setConditionalLayer('brand-stripe', stripe) + setConditionalLayer( + 'brand-stripe-header-only', + stripe && layout.brandStripePlacement === 'header', + ) + setConditionalLayer( + 'brand-stripe-login-only', + stripe && layout.brandStripePlacement === 'login', + ) + var width = + typeof layout.navigationWidth === 'number' + ? layout.navigationWidth + : null + setConditionalLayer('navigation-width', width !== null) + setInlineLayer( + 'thematiq-navigation-width', + width === null + ? null + : ':root { --thematiq-navigation-width: ' + width + 'px; }', + ) + setConditionalLayer( + 'navigation-active-soft', + layout.navigationActiveStyle === 'soft', + ) + } + + /** + * Put an inline `/', @@ -210,7 +236,7 @@ describe('playground: your component', () => { }, ]) await boot() - chip('Your component').click() + openOwn() type(document.getElementById('nldesign-own-html'), '

Tekst

') const srcdoc = document @@ -233,25 +259,118 @@ describe('playground: your component', () => { it('lists exactly the tokens the code reads, read-only where the editor cannot write', async () => { await boot() - chip('Your component').click() + openOwn() type( document.getElementById('nldesign-own-css'), - '.a { color: var(--nldesign-color-primary); border-color: var(--nldesign-org-brand-accent) }', + '.a { color: var(--nldesign-color-primary); background: var(--nldesign-color-text); border-color: var(--nldesign-org-brand-accent, #e17000) }', ) const panel = document.querySelector('.nldesign-own-panel') const rows = [...panel.querySelectorAll('.nldesign-pg-row')] - expect(rows).toHaveLength(2) + expect(rows).toHaveLength(3) expect(rows[0].querySelector('[data-token]')).not.toBeNull() - expect(rows[1].textContent).toContain('--nldesign-org-brand-accent') + expect(rows[1].textContent).toContain('--nldesign-color-text') expect(rows[1].textContent).toContain( 'Read-only here: this comes from the token set', ) + expect(rows[2].textContent).toContain('--nldesign-org-brand-accent') + expect(rows[2].textContent).toContain('Starts as #e17000') + expect(rows[2].querySelector('button').textContent).toBe('Add as own token') + }) + + it('adds a token the code reads as an own token, starting at its fallback', async () => { + await boot() + openOwn() + type( + document.getElementById('nldesign-own-css'), + '.a { border-color: var(--nldesign-org-brand-accent, #e17000) }', + ) + const swatch = document.querySelector( + '.nldesign-own-org .nldesign-color-swatch-fill', + ) + expect(swatch.style.background).not.toBe('') + const add = document.querySelector('.nldesign-own-org button') + add.click() + expect(add.disabled).toBe(true) + expect(add.getAttribute('aria-busy')).toBe('true') + expect(add.textContent).toBe('Adding…') + expect(document.querySelector('.nldesign-own-org').textContent).toContain( + 'Adding --nldesign-org-brand-accent to your own tokens, starting as #e17000…', + ) + await flush() + + const post = requests.find( + (r) => + r.method === 'POST' && r.url.indexOf('/settings/tokens/own') !== -1, + ) + expect(JSON.parse(post.body)).toEqual({ + slug: 'brand-accent', + label: 'brand accent', + type: 'color', + value: '#e17000', + }) + expect( + document.querySelector('.nldesign-own-org .nldesign-color-text').value, + ).toBe('#e17000') + }) + + it('edits an own token live and stores it when the edit is done', async () => { + await boot({ + ownTokens: [ + { + name: '--nldesign-org-brand-accent', + label: 'Brand accent', + type: 'color', + value: '#e17000', + }, + ], + }) + openOwn() + type( + document.getElementById('nldesign-own-css'), + '.a { border-color: var(--nldesign-org-brand-accent, #000000) }', + ) + const text = document.querySelector('.nldesign-own-org .nldesign-color-text') + expect(text.value).toBe('#e17000') + + type(text, '#00aa00') + expect( + document + .getElementById('nldesign-preview') + .style.getPropertyValue('--nldesign-org-brand-accent'), + ).toBe('#00aa00') + text.dispatchEvent(new window.Event('change', { bubbles: true })) + await flush() + + const put = requests.find((r) => r.method === 'PUT') + expect(put.url).toBe( + '/apps/thematiq/settings/tokens/own/--nldesign-org-brand-accent', + ) + expect(JSON.parse(put.body)).toMatchObject({ + slug: 'brand-accent', + label: 'Brand accent', + type: 'color', + value: '#00aa00', + }) + + // Opacity and reset, as on every editor colour row. + const row = document.querySelector('.nldesign-own-org') + const percent = row.querySelector('.nldesign-color-alpha-number') + expect(row.querySelector('.nldesign-color-alpha')).not.toBeNull() + type(percent, '50') + expect(text.value).toBe('#00aa0080') + expect(row.querySelector('.nldesign-color-alpha').value).toBe('50') + + row.querySelector('.nldesign-reset-btn').click() + await flush() + expect(text.value).toBe('#000000') + const puts = requests.filter((r) => r.method === 'PUT') + expect(JSON.parse(puts[puts.length - 1].body).value).toBe('#000000') }) it('repaints the frame when a token is edited, without rebuilding it', async () => { await boot() - chip('Your component').click() + openOwn() type( document.getElementById('nldesign-own-css'), '.a { color: var(--nldesign-color-primary) }', @@ -280,7 +399,7 @@ describe('playground: your component', () => { it('switches the frame to the set dark values and says Nextcloud keeps its theme', async () => { await boot() - chip('Your component').click() + openOwn() type( document.getElementById('nldesign-own-css'), '.a { color: var(--nldesign-color-primary) }', @@ -298,18 +417,83 @@ describe('playground: your component', () => { }) it('reopens a saved card from its link, and ignores a slug that no longer exists', async () => { + await boot({ hash: '#preview=own/own-afvalkaart', saved: [SAVED] }) + expect(document.getElementById('nldesign-own-html').value).toBe(SAVED.html) + expect(window.location.hash).toBe('#preview=own/own-afvalkaart') + expect(chips()).toContain('Afvalkaart') + + // A link from before the tab existed opens it there too. await boot({ hash: '#preview=content/own-afvalkaart', saved: [SAVED] }) expect(document.getElementById('nldesign-own-html').value).toBe(SAVED.html) - expect(window.location.hash).toBe('#preview=content/own-afvalkaart') + expect(window.location.hash).toBe('#preview=own/own-afvalkaart') expect(chips()).toContain('Afvalkaart') await boot({ hash: '#preview=content/own-weg', saved: [SAVED] }) expect(document.getElementById('nldesign-own-html')).toBeNull() }) + it('shows a saved component as a component, with its code one Edit away', async () => { + await boot({ hash: '#preview=own/own-afvalkaart', saved: [SAVED] }) + const fields = document.getElementById('nldesign-own-fields') + const save = document.getElementById('nldesign-own-save') + const edit = document.querySelector('.nldesign-own-edit') + + expect(document.querySelector('.nldesign-pg-stage-title').textContent).toBe( + 'Afvalkaart · Your component', + ) + expect(document.querySelector('.nldesign-pg-stage iframe')).not.toBeNull() + expect(document.querySelector('.nldesign-own-panel')).not.toBeNull() + expect(fields.hidden).toBe(true) + expect(save.hidden).toBe(true) + expect(edit.getAttribute('aria-expanded')).toBe('false') + + edit.click() + expect(fields.hidden).toBe(false) + expect(save.hidden).toBe(false) + expect(edit.getAttribute('aria-expanded')).toBe('true') + }) + + it('puts the code editor over both fields when it is loaded, and takes it away again', async () => { + await boot() + const unmount = vi.fn() + window.NldesignCodeEditor = { mount: vi.fn(() => ({ unmount })) } + try { + openOwn() + expect( + window.NldesignCodeEditor.mount.mock.calls.map( + ([field, options]) => [ + field.id, + options.language, + options.labelledBy, + ], + ), + ).toEqual([ + ['nldesign-own-html', 'html', 'nldesign-own-html-label'], + ['nldesign-own-css', 'css', 'nldesign-own-css-label'], + ]) + expect(document.getElementById('nldesign-own-html-label')).not.toBeNull() + + document + .querySelector( + '.nldesign-pg-selector .nldesign-tab-btn[data-tab="content"]', + ) + .click() + expect(unmount).toHaveBeenCalledTimes(2) + } finally { + delete window.NldesignCodeEditor + } + }) + + it('opens a new component with its code fields and no Edit button', async () => { + await boot() + openOwn() + expect(document.getElementById('nldesign-own-fields').hidden).toBe(false) + expect(document.querySelector('.nldesign-own-edit')).toBeNull() + }) + it('shows the contrast of a text on its base, measured by the server', async () => { await boot() - chip('Your component').click() + openOwn() type( document.getElementById('nldesign-own-css'), '.a { background: var(--nldesign-color-primary); color: var(--nldesign-color-primary-text) }', @@ -330,7 +514,7 @@ describe('playground: your component', () => { it('saves the stage by name', async () => { await boot() - chip('Your component').click() + openOwn() document.getElementById('nldesign-own-name').value = 'Afvalkaart' type(document.getElementById('nldesign-own-html'), SAVED.html) ;[...document.querySelectorAll('.nldesign-own-save button')] @@ -348,18 +532,23 @@ describe('playground: your component', () => { html: SAVED.html, css: '', }) - expect(window.location.hash).toBe('#preview=content/own-afvalkaart') + expect(window.location.hash).toBe('#preview=own/own-afvalkaart') }) it('keeps the playground working when the stage cannot build', async () => { vi.spyOn(console, 'error').mockImplementation(() => {}) await boot({ withModules: false }) - chip('Your component').click() + openOwn() expect(document.querySelector('.nldesign-own-error').textContent).toBe( 'Your component could not be shown.', ) const shipped = inventory.components.find((c) => c.tab === 'content') + document + .querySelector( + '.nldesign-pg-selector .nldesign-tab-btn[data-tab="content"]', + ) + .click() chip(shipped.title).click() expect(document.querySelector('.nldesign-own-error')).toBeNull() expect( diff --git a/tests/vitest/portalReaders.spec.js b/tests/vitest/portalReaders.spec.js new file mode 100644 index 000000000..6cd4557d8 --- /dev/null +++ b/tests/vitest/portalReaders.spec.js @@ -0,0 +1,115 @@ +/** + * SPDX-FileCopyrightText: 2026 Conduction B.V. + * SPDX-License-Identifier: EUPL-1.2 + * + * The portal reads `--nldesign-*` names of its own (portaliq + * css/site-theme.css). TokenSetVocabularyTest only lets a set declare a + * name that something reads, and it looks inside this repository. A name + * only the portal read looked unread: #1105 took Zuiddrecht's two menu-mark + * tokens out for that reason, and the blue bar under the menu item on screen + * disappeared from the live site. This file holds that every name the portal + * reads is read here too (css/public-bridge.css carries a role for it), so a + * set may declare it. + * + * The fixture is measured from the portal; when the portal reads a new name, + * add it there and give it a role in the bridge. + */ + +import fs from 'fs' +import path from 'path' +import { describe, it, expect } from 'vitest' + +const ROOT = path.resolve(__dirname, '../..') +const FIXTURE = JSON.parse( + fs.readFileSync( + path.join(ROOT, 'tests/vitest/fixtures/portal-site-nldesign-readers.json'), + 'utf8', + ), +) + +/** + * Every CSS file under css/ that is not a token set: the layers whose reads + * make up the vocabulary. + * + * @return {string[]} The file contents, comments stripped. + */ +function readerLayers() { + const out = [] + const walk = (dir) => { + for (const entry of fs.readdirSync(dir, { withFileTypes: true })) { + const full = path.join(dir, entry.name) + if (entry.isDirectory()) { + if (full !== path.join(ROOT, 'css/tokens')) { + walk(full) + } + } else if (entry.name.endsWith('.css')) { + out.push( + fs.readFileSync(full, 'utf8').replace(/\/\*[\s\S]*?\*\//g, ''), + ) + } + } + } + walk(path.join(ROOT, 'css')) + return out +} + +describe('the names the portal reads', () => { + const css = readerLayers().join('\n') + + it('is a real list, measured from the portal', () => { + expect(FIXTURE.names.length).toBeGreaterThan(20) + expect(FIXTURE.names).toContain('--nldesign-website-nav-current-in-line') + expect(FIXTURE.names).toContain('--nldesign-website-nav-current-color') + }) + + it.each(FIXTURE.names)('%s is known to this repository too', (name) => { + // The vocabulary counts a name a layer reads or gives a default. + const read = new RegExp(`${name.replace(/-/g, '\\-')}(?![a-z0-9-])`) + expect(read.test(css)).toBe(true) + }) +}) + +describe("the website tokens are Zuiddrecht's alone (the control)", () => { + const NEW = [ + '--nldesign-website-page-max-width', + '--nldesign-website-band-max-width', + '--nldesign-website-page-gutter', + '--nldesign-website-header-max-width', + '--nldesign-website-header-gutter', + '--nldesign-website-content-font-size', + '--nldesign-website-nav-current-in-line', + '--nldesign-website-nav-current-color', + '--nldesign-website-button-font-weight', + '--nldesign-website-color-text-muted', + '--nldesign-website-placeholder-background-color', + ] + const sets = fs + .readdirSync(path.join(ROOT, 'css/tokens')) + .filter((f) => f.endsWith('.css') && f !== 'zuiddrecht.css') + + it('walks the shipped sets', () => { + expect(sets.length).toBeGreaterThan(50) + }) + + it.each(sets)('%s declares none of them', (file) => { + const text = fs.readFileSync(path.join(ROOT, 'css/tokens', file), 'utf8') + expect(NEW.filter((name) => text.includes(name + ':'))).toEqual([]) + }) + + it('the site grey reaches AA on white, the site surface and the photo ground', () => { + const lum = (hex) => { + const c = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255) + const l = c.map((v) => + v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4, + ) + return 0.2126 * l[0] + 0.7152 * l[1] + 0.0722 * l[2] + } + const ratio = (a, b) => { + const [x, y] = [lum(a), lum(b)].sort((p, q) => q - p) + return (x + 0.05) / (y + 0.05) + } + for (const ground of ['#FFFFFF', '#F4F6F9', '#D9E3EF']) { + expect(ratio('#4A4A4A', ground), ground).toBeGreaterThanOrEqual(4.5) + } + }) +}) diff --git a/tests/vitest/publicBridgeRoleLayer.spec.js b/tests/vitest/publicBridgeRoleLayer.spec.js new file mode 100644 index 000000000..f0cd2724e --- /dev/null +++ b/tests/vitest/publicBridgeRoleLayer.spec.js @@ -0,0 +1,421 @@ +/** + * SPDX-FileCopyrightText: 2026 Conduction B.V. + * SPDX-License-Identifier: EUPL-1.2 + * + * The public bridge carries the whole role layer the portal site reads, the + * accent and the brand stripe (openspec/changes/brand-motif-on-portals). + * + * Measured before this change: a portal on `wilgenboom` resolved 116 of the + * 489 component roles the site reads, against 489 on `example-basisschool`, + * so the header, the logo and the DigiD button drew in browser defaults. The + * tests below resolve a set the way a portal page does: the bridge first, + * then the set, `var()` followed to its end. + * + * @spec openspec/changes/brand-motif-on-portals/specs/brand-motif-on-portals/spec.md + */ + +import fs from 'node:fs' +import path from 'node:path' +import postcss from 'postcss' +import { describe, expect, it } from 'vitest' + +const ROOT = path.resolve(__dirname, '../..') +const read = (rel) => fs.readFileSync(path.join(ROOT, rel), 'utf8') +const SITE_ROLES = JSON.parse( + read('tests/vitest/fixtures/portal-site-roles.json'), +).roles +const SCHOOLS = ['wilgenboom', 'vaartveld', 'esdoornveen', 'warmtepompacademie'] + +/** + * Custom properties declared on a stylesheet's top-level `:root` rules. + * + * @param {string} css The stylesheet. + * @return {Record} Property to raw value. + */ +function rootTokens(css) { + const tokens = {} + postcss.parse(css).walkRules((rule) => { + if (rule.parent.type === 'root' && rule.selector.trim() === ':root') { + rule.walkDecls(/^--/, (d) => { + tokens[d.prop] = d.value.replace(/\s+/g, ' ').trim() + }) + } + }) + return tokens +} + +const BRIDGE = rootTokens(read('css/public-bridge.css')) + +/** + * The tokens a portal page ends up with: the bridge, then the set on top. + * + * @param {string} set The set id. + * @return {Record} The merged declarations. + */ +function pageTokens(set) { + return { ...BRIDGE, ...rootTokens(read(`css/tokens/${set}.css`)) } +} + +/** + * Follow `var()` to its end, the way a browser computes a custom property. + * An undeclared name without a fallback is the guaranteed-invalid value, + * returned as null. + * + * @param {Record} tokens The declarations. + * @param {string} value A raw value. + * @param {number} depth Recursion guard. + * @return {string|null} The resolved value, or null. + */ +function resolve(tokens, value, depth = 0) { + if (depth > 20) { + return null + } + const start = value.indexOf('var(') + if (start === -1) { + return value + } + let level = 0 + let end = start + 4 + for (; end < value.length; end++) { + if (value[end] === '(') level++ + if (value[end] === ')') { + if (level === 0) break + level-- + } + } + const inner = value.slice(start + 4, end) + const comma = inner.indexOf(',') + const name = (comma === -1 ? inner : inner.slice(0, comma)).trim() + const fallback = comma === -1 ? null : inner.slice(comma + 1).trim() + let replacement = null + if (tokens[name] !== undefined) { + replacement = resolve(tokens, tokens[name], depth + 1) + } + if (replacement === null && fallback !== null) { + replacement = resolve(tokens, fallback, depth + 1) + } + if (replacement === null) { + return null + } + return resolve( + tokens, + value.slice(0, start) + replacement + value.slice(end + 1), + depth + 1, + ) +} + +const token = (set, name) => { + const tokens = pageTokens(set) + return tokens[name] === undefined ? null : resolve(tokens, tokens[name]) +} + +describe('the bridge names every role the portal site reads', () => { + it('declares each of them, so a set with only --nldesign-* paints the whole site', () => { + const missing = SITE_ROLES.filter((role) => BRIDGE[role] === undefined) + expect(missing).toEqual([]) + }) + + it('holds at least the roles that were missing on 5 October (the control)', () => { + expect(SITE_ROLES.length).toBeGreaterThan(350) + for (const role of [ + '--conduction-logo-header-background-image', + '--tilburg-navigation-background-color', + '--utrecht-button-primary-action-border-color', + '--tilburg-space-row-elephant', + ]) { + expect(SITE_ROLES, role).toContain(role) + } + }) +}) + +describe.each([...SCHOOLS, 'zuiddrecht'])('%s on a portal', (set) => { + const primary = token(set, '--nldesign-color-primary') + + it('draws the primary button and the header account button in its primary', () => { + expect(token(set, '--utrecht-button-primary-action-background-color')).toBe( + primary, + ) + expect(token(set, '--tilburg-navigation-background-color')).toBe(primary) + }) + + it('shows its own logo in the header and a light one on the footer band', () => { + expect(token(set, '--conduction-logo-header-background-image')).toContain( + `img/logos/${set}.svg`, + ) + expect(token(set, '--conduction-logo-header-block-size')).toBe('50px') + // The portal names the light logo in --nldesign-logo-inverse-url; with it + // absent the footer falls back to the set's own logo. + expect(token(set, '--conduction-logo-footer-background-image')).toContain( + `img/logos/${set}.svg`, + ) + expect(token(set, '--thematiq-logo-text-font-size')).toBe('0') + }) + + it('reads its accent through the three vocabulary tokens', () => { + expect(token(set, '--thematiq-accent-color')).toBe( + token(set, '--nldesign-color-accent'), + ) + expect(token(set, '--thematiq-accent-light-color')).toBe( + token(set, '--nldesign-color-accent-light'), + ) + expect(token(set, '--thematiq-accent-text-color')).toBe( + token(set, '--nldesign-color-accent-text'), + ) + expect(token(set, '--nldesign-color-accent')).not.toBe(primary) + }) + + it('hands its brand stripe to the site under the library names', () => { + expect(token(set, '--cn-brand-stripe-height')).toBe( + token(set, '--nldesign-brand-stripe-height'), + ) + expect(token(set, '--cn-brand-stripe-color-1')).toBe( + token(set, '--nldesign-brand-stripe-color-1'), + ) + }) +}) + +describe.each(SCHOOLS)('%s accent agrees with its own palette', (set) => { + it('declares the palette entries as the vocabulary values', () => { + for (const step of ['', '-light', '-text']) { + expect(token(set, `--nldesign-color-accent${step}`)).toBe( + token(set, `--${set}-color-accent${step}`), + ) + } + }) +}) + +describe('the stripe and the motif', () => { + it('draws the motif image on the portal, and its inverse on a dark band', () => { + expect(token('wilgenboom', '--cn-brand-stripe-image')).toMatch( + /^url\("data:image\/svg\+xml,/, + ) + expect(token('wilgenboom', '--cn-brand-stripe-image-inverse')).toContain( + '%235F9A78', + ) + expect(token('esdoornveen', '--cn-brand-stripe-image-inverse')).toContain( + '238deg', + ) + // No inverse of its own: the one image again. + expect(token('warmtepompacademie', '--cn-brand-stripe-image-inverse')).toBe( + token('warmtepompacademie', '--cn-brand-stripe-image'), + ) + }) + + it('keeps zuiddrecht at three bands: red, blue, red, 6 : 3 : 1, 5px, no image', () => { + expect(token('zuiddrecht', '--cn-brand-stripe-image')).toBeNull() + expect( + [1, 2, 3].map((n) => + token('zuiddrecht', `--cn-brand-stripe-color-${n}`), + ), + ).toEqual(['#CC0000', '#3669A5', '#CC0000']) + expect( + [1, 2, 3].map((n) => + token('zuiddrecht', `--cn-brand-stripe-ratio-${n}`), + ), + ).toEqual(['6', '3', '1']) + expect(token('zuiddrecht', '--cn-brand-stripe-height')).toBe('5px') + }) + + it('draws nothing for a set that declares no stripe', () => { + expect(token('vng', '--cn-brand-stripe-height')).toBeNull() + expect(token('vng', '--cn-brand-stripe-image')).toBeNull() + }) +}) + +describe('the footer bottom band', () => { + it('is the footer ground a step darker for a set that names one, nothing otherwise', () => { + expect(token('wilgenboom', '--thematiq-footer-legal-background-color')).toBe( + 'color-mix( in srgb, #1F4A33 80%, #000 )', + ) + expect(token('vng', '--thematiq-footer-legal-background-color')).toBeNull() + }) +}) + +describe('the website type scale, controls and marks are vocabulary', () => { + it('zuiddrecht draws its boards: 44px titles, 2px controls, pill tags, blue and red steps, a light notice, red tabs', () => { + expect(token('zuiddrecht', '--utrecht-heading-1-font-size')).toBe('44px') + expect(token('zuiddrecht', '--utrecht-heading-2-font-size')).toBe('40px') + expect(token('zuiddrecht', '--utrecht-heading-3-font-size')).toBe('26px') + expect(token('zuiddrecht', '--utrecht-button-border-width')).toBe('2px') + expect(token('zuiddrecht', '--utrecht-textbox-border-width')).toBe('2px') + expect(token('zuiddrecht', '--utrecht-button-border-radius')).toBe('4px') + expect(token('zuiddrecht', '--utrecht-alert-border-radius')).toBe('6px') + expect(token('zuiddrecht', '--nl-data-badge-border-radius')).toBe('14px') + expect(token('zuiddrecht', '--denhaag-step-marker-size')).toBe('36px') + expect( + token('zuiddrecht', '--denhaag-step-marker-checked-background-color'), + ).toBe('#3669A5') + expect(token('zuiddrecht', '--denhaag-step-marker-checked-color')).toBe( + '#ffffff', + ) + expect( + token( + 'zuiddrecht', + '--denhaag-step-marker-connector-checked-outline-color', + ), + ).toBe('#3669A5') + expect( + token('zuiddrecht', '--denhaag-step-marker-current-border-color'), + ).toBe('#CC0000') + expect(token('zuiddrecht', '--denhaag-step-marker-current-color')).toBe( + '#CC0000', + ) + expect( + token('zuiddrecht', '--denhaag-step-marker-current-background-color'), + ).toBe('#ffffff') + expect(token('zuiddrecht', '--utrecht-alert-background-color')).toBe( + '#EAF0F7', + ) + expect(token('zuiddrecht', '--utrecht-alert-border-color')).toBe('#B9CBE2') + expect(token('zuiddrecht', '--utrecht-alert-border-width')).toBe('1px') + expect(token('zuiddrecht', '--thematiq-tab-line-color')).toBe('#D3D8DF') + expect(token('zuiddrecht', '--thematiq-tab-current-color')).toBe('#CC0000') + }) + + /** + * The public site's own pages (openspec/changes/zuiddrecht-site-page-title-notice-surface). + */ + it('zuiddrecht draws its site: a 44px content title on a 1.15 line, a 21px lead, ink on a notice, a cool grey surface', () => { + expect(token('zuiddrecht', '--thematiq-page-title-font-size')).toBe( + '2.75rem', + ) + expect(token('zuiddrecht', '--thematiq-page-title-line-height')).toBe('1.15') + expect(token('zuiddrecht', '--utrecht-paragraph-lead-font-size')).toBe( + '21px', + ) + expect(token('zuiddrecht', '--utrecht-alert-color')).toBe('#1A1A1A') + expect(token('zuiddrecht', '--thematiq-surface-color')).toBe('#F4F6F9') + // The set names them, so the portal can read them by name as well. + expect(token('zuiddrecht', '--nldesign-website-page-title-size')).toBe( + '2.75rem', + ) + expect( + token('zuiddrecht', '--nldesign-website-page-title-line-height'), + ).toBe('1.15') + expect(token('zuiddrecht', '--nldesign-website-notice-color')).toBe( + '#1A1A1A', + ) + expect(token('zuiddrecht', '--nldesign-color-surface')).toBe('#F4F6F9') + // The attention strip, apart from the blue plain notice. + expect(token('zuiddrecht', '--thematiq-attention-background-color')).toBe( + '#FFF4DE', + ) + expect(token('zuiddrecht', '--thematiq-attention-border-color')).toBe( + '#E8C77D', + ) + expect(token('zuiddrecht', '--thematiq-attention-color')).toBe('#1A1A1A') + expect(token('zuiddrecht', '--utrecht-alert-background-color')).toBe( + '#EAF0F7', + ) + }) + + it('zuiddrecht: semibold buttons, the menu mark in the red line, its columns, its own grey and the photo ground', () => { + for (const role of [ + '--utrecht-button-font-weight', + '--utrecht-button-primary-action-font-weight', + '--utrecht-button-secondary-action-font-weight', + '--utrecht-button-subtle-font-weight', + ]) { + expect(token('zuiddrecht', role), role).toBe('600') + } + expect(token('zuiddrecht', '--thematiq-website-nav-current-in-line')).toBe( + '1', + ) + expect(token('zuiddrecht', '--thematiq-website-nav-current-color')).toBe( + '#3669A5', + ) + expect(token('zuiddrecht', '--thematiq-website-page-max-width')).toBe( + '1328px', + ) + expect(token('zuiddrecht', '--thematiq-website-page-gutter')).toBe('24px') + expect(token('zuiddrecht', '--thematiq-website-band-max-width')).toBe( + '1280px', + ) + expect(token('zuiddrecht', '--thematiq-website-header-max-width')).toBe( + '1280px', + ) + expect(token('zuiddrecht', '--thematiq-website-header-gutter')).toBe('0px') + expect(token('zuiddrecht', '--thematiq-website-content-font-size')).toBe( + '17px', + ) + expect(token('zuiddrecht', '--thematiq-website-text-muted')).toBe('#4A4A4A') + expect(token('zuiddrecht', '--thematiq-placeholder-background-color')).toBe( + '#D9E3EF', + ) + // The workplace keeps its own grey. + expect(token('zuiddrecht', '--nldesign-color-text-muted')).toBe('#5E6168') + }) + + it.each([...SCHOOLS, 'vng'])( + '%s names none of it and keeps every value it had (the control)', + (set) => { + expect(token(set, '--utrecht-heading-1-font-size')).toBe('36px') + expect(token(set, '--utrecht-heading-2-font-size')).toBe('32px') + expect(token(set, '--utrecht-heading-3-font-size')).toBe('24px') + expect(token(set, '--utrecht-button-border-width')).toBe('1px') + expect(token(set, '--utrecht-alert-border-width')).toBe('2px') + expect(token(set, '--denhaag-step-marker-size')).toBe('32px') + if (SCHOOLS.includes(set)) { + // vng carries step marker roles of its own, which it keeps. + expect( + token(set, '--denhaag-step-marker-checked-background-color'), + ).toBe('#fff') + expect( + token(set, '--denhaag-step-marker-current-border-color'), + ).toBe(token(set, '--nldesign-color-primary')) + } + // No fallback on purpose: unset, the component's own value applies. + expect(token(set, '--utrecht-alert-background-color')).toBeNull() + expect(token(set, '--utrecht-alert-border-color')).toBeNull() + expect(token(set, '--thematiq-tab-line-color')).toBeNull() + expect(token(set, '--thematiq-tab-current-color')).toBeNull() + // The site roles: the lead keeps its 20px, the rest resolve to nothing. + expect(token(set, '--utrecht-paragraph-lead-font-size')).toBe('20px') + expect(token(set, '--utrecht-alert-color')).toBeNull() + expect(token(set, '--thematiq-page-title-font-size')).toBeNull() + expect(token(set, '--thematiq-page-title-line-height')).toBeNull() + expect(token(set, '--thematiq-surface-color')).toBeNull() + expect(token(set, '--thematiq-attention-background-color')).toBeNull() + expect(token(set, '--thematiq-attention-border-color')).toBeNull() + expect(token(set, '--thematiq-attention-color')).toBeNull() + // Buttons keep their 700, the portal's own names resolve to nothing, + // and the site's grey is the set's one grey. + for (const role of [ + '--utrecht-button-font-weight', + '--utrecht-button-primary-action-font-weight', + '--utrecht-button-secondary-action-font-weight', + '--utrecht-button-subtle-font-weight', + ]) { + expect(token(set, role), role).toBe('700') + } + for (const role of [ + '--thematiq-website-nav-current-in-line', + '--thematiq-website-nav-current-color', + '--thematiq-website-page-max-width', + '--thematiq-website-band-max-width', + '--thematiq-website-content-font-size', + '--thematiq-placeholder-background-color', + ]) { + expect(token(set, role), role).toBeNull() + } + expect(token(set, '--thematiq-website-text-muted')).toBe( + token(set, '--nldesign-color-text-muted'), + ) + }, + ) +}) + +describe('a set with a role layer of its own keeps it', () => { + it('example-basisschool still paints its primary button with its own value', () => { + const own = rootTokens(read('css/tokens/example-basisschool.css')) + const role = '--utrecht-button-primary-action-background-color' + expect(own[role]).toBeDefined() + expect(pageTokens('example-basisschool')[role]).toBe(own[role]) + }) + + it('a set without an accent still marks the current item, in its primary', () => { + expect(token('vng', '--thematiq-accent-color')).toBe( + token('vng', '--nldesign-color-primary'), + ) + }) +}) diff --git a/tests/vitest/schoolTokenSets.spec.js b/tests/vitest/schoolTokenSets.spec.js new file mode 100644 index 000000000..4a78b4caf --- /dev/null +++ b/tests/vitest/schoolTokenSets.spec.js @@ -0,0 +1,624 @@ +/** + * SPDX-FileCopyrightText: 2026 Conduction B.V. + * SPDX-License-Identifier: EUPL-1.2 + * + * The four school sets, read from the files a page loads. + * + * wilgenboom, vaartveld, esdoornveen and warmtepompacademie are built the way + * zuiddrecht is, and are measured the way tests/vitest/zuiddrechtTokenSet.spec.js + * measures it: every text pair is computed from css/tokens/.css for the + * light scheme, and for the dark scheme from the generated + * css/tokens/dark/.css with css/token-overrides/.css on top, in both + * dark scopes. The expected values are the designs' own + * (openspec/changes/school-token-sets). + * + * @spec openspec/changes/school-token-sets/specs/school-token-sets/spec.md + */ + +import fs from 'node:fs' +import path from 'node:path' +import postcss from 'postcss' +import { describe, expect, it } from 'vitest' + +const ROOT = path.resolve(__dirname, '../..') +const read = (rel) => fs.readFileSync(path.join(ROOT, rel), 'utf8') +const MANIFEST = JSON.parse(read('token-sets.json')) + +/** Nextcloud's own main background per scheme (core theming, not a set token). */ +const MAIN_BACKGROUND = { light: '#ffffff', dark: '#171717' } +const SURFACE = '--nldesign-component-content-surface-background-color' + +/** + * What each design fixes, per set. Colours, faces and website radii are the + * designs' (school-design//project/Main.dc.html and LqTokens.dc.html). + */ +const SETS = { + wilgenboom: { + name: 'Basisschool De Wilgenboom', + primary: '#2F6B4A', + hover: '#1F4A33', + light: '#E8F1EB', + accent: '#F5B82E', + accentText: '#6B4A00', + badge: '#1A1A1A', + family: 'Lexend', + weights: { Lexend: ['400', '500', '600', '700'] }, + heading: null, + website: ['10px', '14px'], + stripe: false, + stripeHeight: '17px', + legacyLabel: '#1A1A1A', + }, + vaartveld: { + name: 'Vaartveld College', + primary: '#1F4FD8', + hover: '#14338F', + light: '#E8EEFC', + accent: '#1FB5A8', + accentText: '#0B6259', + badge: '#1A1A1A', + family: 'Red Hat Text', + weights: { + 'Red Hat Text': ['400', '500', '600', '700'], + 'Red Hat Display': ['600', '700', '800'], + }, + heading: 'Red Hat Display', + website: ['6px', '10px'], + stripe: false, + stripeHeight: '9px', + legacyLabel: '#1A1A1A', + }, + esdoornveen: { + name: 'Esdoornveen, mbo college', + primary: '#5B2E91', + hover: '#43206E', + light: '#F0EAF7', + accent: '#C2255C', + accentText: '#9C1C49', + badge: '#ffffff', + family: 'IBM Plex Sans', + weights: { + 'IBM Plex Sans': ['400', '500', '600', '700'], + 'IBM Plex Mono': ['400', '500'], + }, + heading: null, + website: ['4px', '8px'], + stripe: true, + stripeHeight: '6px', + legacyLabel: null, + }, + warmtepompacademie: { + name: 'Warmtepompacademie', + primary: '#0B6E7A', + hover: '#084F58', + light: '#E3F1F3', + accent: '#C2410C', + accentText: '#9A3412', + badge: '#ffffff', + family: 'Barlow', + weights: { + Barlow: ['400', '500', '600', '700'], + 'Barlow Semi Condensed': ['600', '700'], + }, + heading: 'Barlow Semi Condensed', + website: ['3px', '6px'], + stripe: false, + stripeHeight: '5px', + legacyLabel: null, + }, +} + +/** + * Custom properties declared on a stylesheet's top-level `:root` rule. + * + * @param {string} css The stylesheet. + * @return {Record} Property to raw value. + */ +function rootTokens(css) { + const tokens = {} + postcss.parse(css).walkRules((rule) => { + if (rule.parent.type === 'root' && rule.selector.trim() === ':root') { + rule.walkDecls(/^--/, (d) => { + tokens[d.prop] = d.value.trim() + }) + } + }) + return tokens +} + +/** + * The custom properties of a dark stylesheet, per scope. + * + * @param {string} css A stylesheet that uses the two dark scopes. + * @return {{media: Record, explicit: Record}} Each scope's declarations. + */ +function darkScopes(css) { + const media = {} + const explicit = {} + postcss.parse(css).walkRules((rule) => { + const inMedia = + rule.parent.type === 'atrule' + && /prefers-color-scheme:\s*dark/.test(rule.parent.params) + const isExplicit = + rule.parent.type === 'root' && /data-themes\*=/.test(rule.selector) + if (!inMedia && !isExplicit) { + return + } + rule.walkDecls(/^--/, (d) => { + ;(inMedia ? media : explicit)[d.prop] = d.value + .replace(/\s*!important$/, '') + .trim() + }) + }) + return { media, explicit } +} + +/** + * A `#rrggbb` colour as three channels. + * + * @param {string} hex The colour. + * @return {Array} Red, green and blue, 0 to 255. + */ +function channels(hex) { + const match = /^#([0-9a-f]{6})$/i.exec(hex.trim()) + if (match === null) { + throw new Error('not a #rrggbb colour: ' + hex) + } + return [0, 2, 4].map((at) => parseInt(match[1].slice(at, at + 2), 16)) +} + +/** + * WCAG relative luminance. + * + * @param {string} hex The colour. + * @return {number} The luminance, 0 to 1. + */ +function luminance(hex) { + const [r, g, b] = channels(hex).map((value) => { + const c = value / 255 + return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4 + }) + return 0.2126 * r + 0.7152 * g + 0.0722 * b +} + +/** + * WCAG contrast ratio of two opaque colours. + * + * @param {string} first One colour. + * @param {string} second The other. + * @return {number} The ratio, 1 to 21. + */ +function ratio(first, second) { + const [hi, lo] = [luminance(first), luminance(second)].sort((a, b) => b - a) + return (hi + 0.05) / (lo + 0.05) +} + +/** + * `color-mix(in srgb, colour share, base)`: the selected navigation wash. + * + * @param {string} colour The colour mixed in. + * @param {string} base The surface under it. + * @param {number} share The share of `colour`, 0 to 1. + * @return {string} The resulting `#rrggbb`. + */ +function mix(colour, base, share) { + const top = channels(colour) + const under = channels(base) + return ( + '#' + + top + .map((value, index) => + Math.round(value * share + under[index] * (1 - share)) + .toString(16) + .padStart(2, '0'), + ) + .join('') + ) +} + +/** + * The legacy (solid) selected entry's label colour a set's overrides file + * sets, or null when it sets none. + * + * @param {string} css The overrides file. + * @return {string|null} The label colour. + */ +function legacyLabel(css) { + let found = null + postcss.parse(css).walkDecls('--color-primary-element-text', (d) => { + found = d.value.trim() + }) + return found +} + +/** + * The text pairs one scheme must carry: `[what, foreground, background, minimum]`. + * + * @param {Record} t The scheme's tokens. + * @param {string} main Nextcloud's main background in that scheme. + * @param {string} solidLabel The label on the solid selected entry. + * @return {Array<[string, string, string, number]>} The pairs. + */ +function pairs(t, main, solidLabel) { + const active = t['--nldesign-component-navigation-active-background-color'] + const text = [ + ['text', '--nldesign-color-text'], + ['muted text', '--nldesign-color-text-muted'], + ['link', '--nldesign-color-link'], + ['link hover', '--nldesign-color-link-hover'], + ['error text', '--nldesign-color-error'], + ['success text', '--nldesign-color-success'], + ['warning text', '--nldesign-color-warning'], + ['info text', '--nldesign-color-info'], + ] + + return [ + ...text.map(([what, token]) => [what + ' on a card', t[token], main, 4.5]), + ...text.map(([what, token]) => [ + what + ' on the workspace', + t[token], + t[SURFACE], + 4.5, + ]), + [ + 'primary button label', + t['--nldesign-color-button-primary-text'], + t['--nldesign-color-button-primary-background'], + 4.5, + ], + [ + 'primary text on the primary', + t['--nldesign-color-primary-text'], + t['--nldesign-color-primary'], + 4.5, + ], + [ + 'primary on the primary-light wash', + t['--nldesign-color-primary'], + t['--nldesign-color-primary-light'], + 4.5, + ], + [ + 'header text', + t['--nldesign-color-header-text'], + t['--nldesign-color-header-background'], + 4.5, + ], + [ + 'selected navigation label on its wash (Nextcloud 34+)', + t['--nldesign-component-navigation-active-color'], + mix(active, main, 0.16), + 4.5, + ], + [ + 'selected navigation label on its hovered wash (Nextcloud 34+)', + t['--nldesign-component-navigation-active-color'], + mix(active, main, 0.22), + 4.5, + ], + [ + 'label on the solid selected entry (settings, legacy, Nextcloud 32 and 33)', + solidLabel, + active, + 4.5, + ], + [ + 'navigation badge number', + t['--nldesign-component-navigation-badge-color'], + t['--nldesign-component-navigation-badge-background-color'], + 4.5, + ], + ...['info', 'success', 'warning', 'error'].map((kind) => [ + kind + ' pill label on its tint', + t['--nldesign-component-status-badge-' + kind + '-color'], + t['--nldesign-component-status-badge-' + kind + '-background-color'], + 4.5, + ]), + [ + 'control border against a card (3:1, WCAG 1.4.11)', + t['--nldesign-color-border-dark'], + main, + 3, + ], + ] +} + +for (const [id, want] of Object.entries(SETS)) { + const entry = MANIFEST.find((e) => e.id === id) + const LIGHT = rootTokens(read('css/tokens/' + id + '.css')) + const OVERRIDES_CSS = read('css/token-overrides/' + id + '.css') + const GENERATED = darkScopes(read('css/tokens/dark/' + id + '.css')) + const OVERRIDES = darkScopes(OVERRIDES_CSS) + const label = legacyLabel(OVERRIDES_CSS) + + const schemes = { + light: { tokens: LIGHT, main: MAIN_BACKGROUND.light }, + 'dark (system preference)': { + tokens: { ...LIGHT, ...GENERATED.media, ...OVERRIDES.media }, + main: MAIN_BACKGROUND.dark, + }, + 'dark (explicit theme)': { + tokens: { ...LIGHT, ...GENERATED.explicit, ...OVERRIDES.explicit }, + main: MAIN_BACKGROUND.dark, + }, + } + + describe(id + ': the manifest entry', () => { + it('is an nldesign set with the primary, the workspace colour and both logos', () => { + expect(entry.name).toBe(want.name) + expect(entry.design_system).toBe('nldesign') + expect(entry.theming.primary_color).toBe(want.primary) + expect(entry.theming.primary_color).toBe( + LIGHT['--nldesign-color-primary'], + ) + expect(entry.theming.background_color).toBe(LIGHT[SURFACE]) + expect(entry.theming.logo).toBe('img/logos/' + id + '.svg') + expect(entry.theming.logo_dark).toBe('img/logos/' + id + '-dark.svg') + }) + + it('ships its four logos, each a self-contained SVG', () => { + for (const name of ['', '-dark', '-emblem', '-emblem-grey']) { + const svg = read('img/logos/' + id + name + '.svg') + expect(svg.startsWith(' { + const layout = { workplace_layout: 'light' } + if (want.stripe === true) { + layout.brand_stripe = true + } + expect(entry.layout).toEqual(layout) + }) + }) + + describe(id + ': the palette', () => { + it('uses the main colour for actions and keeps the accent for marks', () => { + expect(LIGHT['--nldesign-color-primary']).toBe(want.primary) + expect(LIGHT['--nldesign-color-primary-hover']).toBe(want.hover) + expect(LIGHT['--nldesign-color-primary-light']).toBe(want.light) + expect(LIGHT['--nldesign-color-link']).toBe(want.primary) + expect(LIGHT['--nldesign-color-button-primary-background']).toBe( + want.primary, + ) + expect(LIGHT['--' + id + '-color-accent']).toBe(want.accent) + expect( + LIGHT['--nldesign-component-navigation-active-background-color'], + ).toBe(want.accent) + expect(LIGHT['--nldesign-component-navigation-active-color']).toBe( + want.accentText, + ) + expect( + LIGHT['--nldesign-component-navigation-badge-background-color'], + ).toBe(want.accent) + expect( + LIGHT['--nldesign-component-navigation-badge-color'].toLowerCase(), + ).toBe(want.badge.toLowerCase()) + }) + + it("keeps Nextcloud's radius scale in the workplace and names the website's own", () => { + expect(LIGHT['--nldesign-border-radius']).toBe('8px') + expect(LIGHT['--nldesign-border-radius-small']).toBe('4px') + expect(LIGHT['--nldesign-border-radius-large']).toBe('12px') + expect([ + LIGHT['--nldesign-website-border-radius'], + LIGHT['--nldesign-website-border-radius-large'], + ]).toEqual(want.website) + }) + + it('draws its motif as the stripe image, at the motif height', () => { + expect(LIGHT['--nldesign-brand-stripe-height']).toBe(want.stripeHeight) + const image = LIGHT['--nldesign-brand-stripe-image'] + expect(image).toMatch(/^(linear-gradient\(|url\("data:image\/svg\+xml,)/) + for (const n of [1, 2, 3]) { + expect(LIGHT['--nldesign-brand-stripe-color-' + n]).toMatch( + /^#[0-9A-F]{6}$/, + ) + } + }) + }) + + describe(id + ': every text pair reaches AA', () => { + for (const [scheme, { tokens, main }] of Object.entries(schemes)) { + it('in the ' + scheme + ' scheme', () => { + const solid = label ?? tokens['--nldesign-color-primary-text'] + const failing = pairs(tokens, main, solid) + .map(([what, fg, bg, minimum]) => ({ + what, + fg, + bg, + minimum, + measured: Math.floor(ratio(fg, bg) * 100) / 100, + })) + .filter((pair) => pair.measured < pair.minimum) + + expect(failing).toEqual([]) + }) + } + }) + + describe(id + ': the overrides', () => { + it('sets the dark page and surface in both dark scopes', () => { + for (const scope of [OVERRIDES.media, OVERRIDES.explicit]) { + expect(scope['--color-background-plain']).toBe('#121315') + expect(scope[SURFACE]).toBe('#121315') + expect(luminance(scope[SURFACE])).toBeLessThan( + luminance(MAIN_BACKGROUND.dark), + ) + } + }) + + it('gives the wordmark 200 by 44 pixels on the login card', () => { + const decls = {} + postcss.parse(OVERRIDES_CSS).walkRules((rule) => { + if ( + rule.selectors + .map((s) => s.trim()) + .includes('#body-login .guest-box.login-box::after') + ) { + rule.walkDecls((d) => { + decls[d.prop] = d.value + (d.important ? ' !important' : '') + }) + } + }) + expect(decls).toEqual({ + top: '28px !important', + width: '200px !important', + height: '44px !important', + }) + }) + + it('writes ink on the solid accent only where white would fail', () => { + expect(label?.toLowerCase() ?? null).toBe( + want.legacyLabel?.toLowerCase() ?? null, + ) + if (label === null) { + expect(ratio('#ffffff', want.accent)).toBeGreaterThanOrEqual(4.5) + } else { + expect(ratio('#ffffff', want.accent)).toBeLessThan(3) + } + }) + + it('names its grey emblem as the login watermark, and the file exists', () => { + expect(LIGHT['--nldesign-login-watermark-image']).toBe( + "url('../../img/logos/" + id + "-emblem-grey.svg')", + ) + expect( + fs.existsSync( + path.join(ROOT, 'img/logos/' + id + '-emblem-grey.svg'), + ), + ).toBe(true) + }) + }) + + describe(id + ': the typefaces', () => { + const FACE = /@font-face\s*\{[^}]*\}/g + + for (const sheet of ['css/fonts.css', 'css/systems/nldesign/fonts.css']) { + it( + sheet + + ' serves every weight the design uses, from files that exist', + () => { + const dir = path.dirname(sheet) + for (const [family, weights] of Object.entries(want.weights)) { + const served = new Set() + for (const face of read(sheet).match(FACE) || []) { + if (!face.includes("'" + family + "'")) { + continue + } + for (const url of face.matchAll(/url\('([^']+)'\)/g)) { + expect( + fs.existsSync(path.join(ROOT, dir, url[1])), + url[1], + ).toBe(true) + } + served.add(/font-weight:\s*(\d+)/.exec(face)[1]) + } + expect([...served].sort(), family).toEqual(weights) + } + }, + ) + } + + it('names its text face first, and its heading face where it has one', () => { + expect( + LIGHT['--nldesign-font-family'].startsWith("'" + want.family + "'"), + ).toBe(true) + const heading = LIGHT['--nldesign-component-heading-font-family'] + if (want.heading === null) { + expect(heading).toBeUndefined() + } else { + expect(heading.startsWith("'" + want.heading + "'")).toBe(true) + } + }) + }) +} + +describe('the school sets leave the example sets alone', () => { + it('keeps the four example education sets listed under their own ids', () => { + const ids = MANIFEST.map((e) => e.id) + for (const id of [ + 'example-basisschool', + 'example-voortgezet', + 'example-college', + 'example-opleider', + ]) { + expect(ids, id).toContain(id) + expect( + fs.existsSync(path.join(ROOT, 'css/tokens/' + id + '.css')), + id, + ).toBe(true) + } + }) +}) + +describe('the control: a pair that fails is reported, not skipped', () => { + it('measures white on the two light accents as failing', () => { + expect(ratio('#ffffff', '#F5B82E')).toBeLessThan(3) + expect(ratio('#ffffff', '#1FB5A8')).toBeLessThan(3) + expect(ratio('#ffffff', '#2F6B4A')).toBeGreaterThan(6.3) + }) +}) + +describe('the public bridge hands the website its own corners and heading face', () => { + const BRIDGE = rootTokens(read('css/public-bridge.css')) + const flat = (value) => value.replace(/\s+/g, ' ').trim() + + it('maps the control and card roles onto the two website radii, with no fallback', () => { + for (const role of [ + '--utrecht-button-border-radius', + '--utrecht-textbox-border-radius', + '--utrecht-textarea-border-radius', + '--utrecht-select-border-radius', + '--utrecht-form-control-border-radius', + ]) { + expect(flat(BRIDGE[role]), role).toBe( + 'var(--nldesign-website-border-radius)', + ) + } + for (const role of [ + '--utrecht-border-radius-md', + '--utrecht-alert-border-radius', + ]) { + expect(flat(BRIDGE[role]), role).toBe( + 'var(--nldesign-website-border-radius-large)', + ) + } + }) + + it('reads the website radii nowhere an instance page loads', () => { + const readers = [] + const walk = (dir) => { + for (const entry of fs.readdirSync(path.join(ROOT, dir), { + withFileTypes: true, + })) { + const rel = dir + '/' + entry.name + if (entry.isDirectory()) { + walk(rel) + } else if ( + rel.endsWith('.css') + && !rel.startsWith('css/tokens/') + && read(rel).includes('var(--nldesign-website-border-radius') + ) { + readers.push(rel) + } + } + } + walk('css') + expect(readers).toEqual(['css/public-bridge.css']) + }) + + it('gives every heading level the set heading face before its text face', () => { + for (const role of [ + '--utrecht-heading-font-family', + '--utrecht-heading-1-font-family', + '--utrecht-heading-2-font-family', + '--utrecht-heading-3-font-family', + ]) { + expect(flat(BRIDGE[role]), role).toBe( + 'var( --nldesign-component-heading-font-family, var(--nldesign-font-family, system-ui, sans-serif) )', + ) + } + }) +}) diff --git a/tests/vitest/selectedNavText.spec.js b/tests/vitest/selectedNavText.spec.js index 13c163296..33be3b3cb 100644 --- a/tests/vitest/selectedNavText.spec.js +++ b/tests/vitest/selectedNavText.spec.js @@ -101,7 +101,13 @@ function conditionsHold(node, env) { * @return {boolean} True when it matches. */ function reachesBody(selector, env) { - const s = selector.replace(/\s+/g, '').replace(/['"]/g, '') + // A set's overrides file puts `:root` in front of the dark scopes so it + // outranks the generated dark file (css/token-overrides/*.css); the + // element is still the body. + const s = selector + .replace(/\s+/g, '') + .replace(/['"]/g, '') + .replace(/^:root(?=body|\[)/, '') if (['html', ':root', 'body', 'body[data-themes]'].includes(s)) { return true } @@ -132,9 +138,14 @@ function cascade(files, env, matches) { const won = {} for (const file of files) { postcss.parse(read(file)).walkRules((rule) => { - if (!conditionsHold(rule, env) || !rule.selectors.some(matches)) { + const matched = rule.selectors.filter(matches) + if (!conditionsHold(rule, env) || matched.length === 0) { return } + // One step of specificity: a selector with `:root` in front of the + // body scope outranks the same scope without it, whatever the order + // (css/token-overrides/*.css loads before the generated dark file). + const rank = matched.some((sel) => /^\s*:root\s+\S/.test(sel)) ? 1 : 0 rule.each((d) => { if (d.type !== 'decl') { return @@ -143,7 +154,10 @@ function cascade(files, env, matches) { if (prior && prior.important && !d.important) { return } - won[d.prop] = { value: d.value.trim(), important: d.important } + if (prior && prior.important === d.important && prior.rank > rank) { + return + } + won[d.prop] = { value: d.value.trim(), important: d.important, rank } }) }) } diff --git a/tests/vitest/widgetPartsKeepTheirColour.spec.js b/tests/vitest/widgetPartsKeepTheirColour.spec.js new file mode 100644 index 000000000..b6bd8cd09 --- /dev/null +++ b/tests/vitest/widgetPartsKeepTheirColour.spec.js @@ -0,0 +1,271 @@ +/** + * SPDX-FileCopyrightText: 2026 Conduction B.V. + * SPDX-License-Identifier: EUPL-1.2 + * + * The nldesign solid-background rule paints a widget, not the parts inside it. + * + * `[class*='widget']` also matches a BEM element such as + * `.cn-stages-widget__bar`, and with the rule's ID-level specificity it + * painted the stages bars the page background on dossiq's case page, so the + * bars were drawn but invisible. This file reads the stylesheet and asks a + * real DOM which elements the rule's selectors match, so it runs without a + * server. + */ + +import fs from 'fs' +import path from 'path' +import { fileURLToPath } from 'url' +import postcss from 'postcss' +import { JSDOM } from 'jsdom' +import { describe, it, expect } from 'vitest' + +const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../..') +const FILE = 'css/systems/nldesign/element-overrides.css' + +/** + * The selectors of every rule in the sheet that sets a background colour. + * + * @return {string[]} The selectors. + */ +function backgroundSelectors() { + const css = postcss.parse(fs.readFileSync(path.join(root, FILE), 'utf8')) + const out = [] + css.walkRules((rule) => { + let paints = false + rule.walkDecls(/^background(-color)?$/, (d) => { + if (d.value.includes('--color-main-background')) { + paints = true + } + }) + if (paints) { + out.push(...rule.selectors.map((s) => s.trim())) + } + }) + return out +} + +const dom = new JSDOM(` + +
+
+
+
+
+
+
+`) +const doc = dom.window.document + +/** + * Whether any background selector of the sheet matches the element. + * + * @param {string} id The element id. + * @return {boolean} Matched. + */ +function painted(id) { + const el = doc.getElementById(id) + return backgroundSelectors().some((sel) => { + try { + return el.matches(sel) + } catch { + return false + } + }) +} + +describe('the nldesign solid-background rule', () => { + it('still paints a widget container and a panel', () => { + expect(painted('container')).toBe(true) + expect(painted('wrapper')).toBe(true) + expect(painted('panel')).toBe(true) + }) + + it('leaves a widget part, such as a stages bar, its own colour', () => { + expect(painted('bar')).toBe(false) + }) +}) + +/** + * The selectors of every rule that makes a ground transparent, with the + * position of the rule in the sheet. + * + * @return {Array<{selector: string, index: number}>} The selectors. + */ +function clearSelectors() { + const css = postcss.parse(fs.readFileSync(path.join(root, FILE), 'utf8')) + const out = [] + let index = 0 + css.walkRules((rule) => { + index++ + let clears = false + rule.walkDecls(/^background(-color)?$/, (d) => { + if (d.value === 'transparent') { + clears = true + } + }) + if (clears) { + out.push(...rule.selectors.map((s) => ({ selector: s.trim(), index }))) + } + }) + return out +} + +const grounds = new JSDOM(`
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`).window.document + +/** + * Whether a transparent rule matches the element. + * + * @param {string} id The element id. + * @return {boolean} Matched. + */ +function cleared(id) { + const el = grounds.getElementById(id) + return clearSelectors().some(({ selector }) => el.matches(selector)) +} + +describe('a widget that asks for no ground', () => { + it('draws a greeting on the page ground without a white box around it', () => { + for (const id of ['ground-wrapper', 'ground-content', 'greeting']) { + expect(cleared(id), id).toBe(true) + } + }) + + it('draws a borderless attention banner as its own card, with no second card under it', () => { + expect(cleared('banner-wrapper')).toBe(true) + expect(cleared('banner-content')).toBe(true) + // The banner keeps its own card. + expect(cleared('banner')).toBe(false) + }) + + it('draws any borderless widget on the page ground: its wrapper, content and the widget in it', () => { + for (const id of [ + 'tile-wrapper', + 'tile-content', + 'tile', + 'cal-wrapper', + 'cal-content', + ]) { + expect(cleared(id), id).toBe(true) + } + }) + + it('leaves a widget that draws its own card its card', () => { + for (const id of ['banner', 'cal', 'dash-tile']) { + expect(cleared(id), id).toBe(false) + } + }) + + it('leaves a widget in a bordered card the ground it has today', () => { + for (const id of ['card-wrapper', 'card-content', 'plain-greeting']) { + expect(cleared(id), id).toBe(false) + } + }) + + it('comes after the solid rule, which it must beat at the same weight', () => { + const css = postcss.parse(fs.readFileSync(path.join(root, FILE), 'utf8')) + let solid = 0 + let index = 0 + css.walkRules((rule) => { + index++ + if ( + rule.selectors.some((s) => s.startsWith("[class*='widget']:not(")) + && rule.toString().includes('--color-main-background') + ) { + solid = index + } + }) + expect(solid).toBeGreaterThan(0) + for (const { index: at } of clearSelectors().filter(({ selector }) => + selector.includes('cn-widget-wrapper--borderless'), + )) { + expect(at).toBeGreaterThan(solid) + } + }) +}) + +/** + * The specificity of one selector as [ids, classes, elements], with + * `:not()`, `:is()` and `:has()` counting their most specific argument. + * Enough for the selectors in this sheet; not a general parser. + * + * @param {string} selector The selector. + * @return {number[]} The three counts. + */ +function specificity(selector) { + let rest = selector + const total = [0, 0, 0] + const add = (t) => t.forEach((v, i) => (total[i] += v)) + const fn = /:(not|is|has)\(/ + let m + while ((m = fn.exec(rest)) !== null) { + let depth = 1 + let i = m.index + m[0].length + const begin = i + while (depth > 0) { + if (rest[i] === '(') depth++ + if (rest[i] === ')') depth-- + i++ + } + const args = rest.slice(begin, i - 1).split(/,(?![^(]*\))/) + const best = args + .map((a) => specificity(a.trim())) + .sort((a, b) => b[0] - a[0] || b[1] - a[1] || b[2] - a[2])[0] + add(best) + rest = rest.slice(0, m.index) + ' ' + rest.slice(i) + } + rest = rest.replace(/\[[^\]]*\]/g, () => { + total[1]++ + return ' ' + }) + total[0] += (rest.match(/#[\w-]+/g) || []).length + total[1] += (rest.match(/\.[\w-]+/g) || []).length + total[1] += (rest.match(/:(?!:)[\w-]+/g) || []).length + total[2] += ( + rest.replace(/[#.:][\w-]+/g, ' ').match(/(^|[\s>+~])[a-z][\w-]*/gi) || [] + ).length + return total +} + +describe('a transparent ground beats the solid rule', () => { + it('outweighs it wherever both match', () => { + const solid = specificity( + "[class*='widget']:not([class*='widget__']):not(#header *)", + ) + expect(solid).toEqual([1, 2, 0]) + for (const { selector } of clearSelectors().filter(({ selector }) => + selector.includes('cn-'), + )) { + const own = specificity(selector) + const beats = + own[0] > solid[0] || (own[0] === solid[0] && own[1] >= solid[1]) + expect(beats, `${selector} scores ${own}`).toBe(true) + } + }) +}) diff --git a/tests/vitest/workplaceLayout.spec.js b/tests/vitest/workplaceLayout.spec.js index 5cacfd484..0bdc1bf8a 100644 --- a/tests/vitest/workplaceLayout.spec.js +++ b/tests/vitest/workplaceLayout.spec.js @@ -89,8 +89,7 @@ function percentage(expression) { describe('workplace layout: the light top bar', () => { const rules = rulesOf('css/workplace-layout.css') - it('is one rule on the top bar, which leaves the login page alone, and one for the login watermark', () => { - expect(rules.length).toBe(2) + it('starts with the rule on the top bar, which leaves the login page alone, then the login watermark', () => { expect(rules[1].selectors).toEqual(['body#body-login::before']) for (const selector of rules[0].selectors) { expect(selector).toMatch( @@ -99,6 +98,19 @@ describe('workplace layout: the light top bar', () => { } }) + it('writes no colour literal anywhere in the sheet', () => { + // The sheet may be turned on for any set, in the light and in the dark, + // so every colour comes from the scheme or from a token. + for (const rule of rules) { + for (const [prop, value] of Object.entries(rule.decls)) { + expect( + /#[0-9a-f]{3,8}\b|rgba?\(|hsla?\(/i.test(value), + rule.selectors.join(', ') + ' { ' + prop + ': ' + value + ' }', + ).toBe(false) + } + } + }) + it("paints the bar with the scheme's main background and writes no colour of its own", () => { const decls = rules[0].decls expect(decls['background-color']).toBe( @@ -172,7 +184,7 @@ describe('workplace layout: the login watermark', () => { expect(watermark['pointer-events']).toBe('none') }) - it('is named by Zuiddrecht only among the shipped sets', () => { + it('is named by Zuiddrecht and its four demo schools only among the shipped sets', () => { const dir = path.join(ROOT, 'css/tokens') const namers = fs .readdirSync(dir) @@ -182,7 +194,13 @@ describe('workplace layout: the login watermark', () => { .readFileSync(path.join(dir, file), 'utf8') .includes('--nldesign-login-watermark-image'), ) - expect(namers).toEqual(['zuiddrecht.css']) + expect(namers.sort()).toEqual([ + 'esdoornveen.css', + 'vaartveld.css', + 'warmtepompacademie.css', + 'wilgenboom.css', + 'zuiddrecht.css', + ]) }) }) @@ -227,7 +245,7 @@ describe('brand stripe', () => { const LOGIN = "#body-login div[class*='login-box__wrapper']::before" it('is one shared rule for the top bar and the login card, plus where each one sits', () => { - expect(rules.length).toBe(3) + expect(rules.length).toBe(4) expect([...rules[0].selectors].sort()).toEqual([LOGIN, HEADER].sort()) expect(rules[1]).toEqual({ selectors: [HEADER], decls: { bottom: '0' } }) expect(rules[2]).toEqual({ selectors: [LOGIN], decls: { top: '0' } }) @@ -236,6 +254,33 @@ describe('brand stripe', () => { expect(stripe.height).toBe('var(--nldesign-brand-stripe-height, 4px)') }) + it('hands the same tokens to the component library, with the same fallbacks', () => { + // CnBrandStripe in nextcloud-vue reads `--cn-brand-stripe-*` and knows + // no theme. Without this rule a portal header drew one primary band + // next to a top bar in three. + expect(rules[3].selectors).toEqual([':root']) + const handed = rules[3].decls + for (const n of [1, 2, 3]) { + expect(handed['--cn-brand-stripe-ratio-' + n]).toBe( + 'var(--nldesign-brand-stripe-ratio-' + n + ', 1)', + ) + expect(handed['--cn-brand-stripe-color-' + n]).toContain( + '--nldesign-brand-stripe-color-' + n, + ) + } + expect(handed['--cn-brand-stripe-height']).toBe(stripe.height) + // The motif and its dark-band variant, with no fallback, so a set that + // names no image keeps the component's three bands + // (openspec/changes/brand-motif-on-portals). + expect(handed['--cn-brand-stripe-image']).toBe( + 'var(--nldesign-brand-stripe-image)', + ) + expect(handed['--cn-brand-stripe-image-inverse'].replace(/\s+/g, ' ')).toBe( + 'var( --nldesign-brand-stripe-image-inverse, var(--nldesign-brand-stripe-image) )', + ) + expect(Object.keys(handed).length).toBe(9) + }) + it('is really drawn: content and display are declared, and important', () => { // The defect this guards: the stripe once declared a plain // `content: ''`. The NL Design and La Suite sheets switch the header's @@ -354,21 +399,277 @@ describe('brand stripe', () => { }) }) +describe('the brand stripe: a motif of its own', () => { + /** + * @spec openspec/changes/school-token-sets/specs/school-token-sets/spec.md#requirement-a-set-may-draw-its-motif-in-the-brand-stripe + */ + it('draws a set image in place of the three bands, and the bands without one', () => { + const sheet = postcss.parse(read('css/brand-stripe.css')) + let image = null + sheet.walkDecls('background-image', (d) => { + image = d.value.replace(/\s+/g, ' ').trim() + }) + expect( + image.startsWith('var( --nldesign-brand-stripe-image, linear-gradient('), + ).toBe(true) + }) +}) + describe('the layout stylesheets are off unless asked for', () => { it('no design system lists them, so only the option loads them', () => { const systems = JSON.parse(read('design-systems.json')) const listed = systems.flatMap((system) => (system.stylesheets || []).filter((sheet) => - /workplace-layout|brand-stripe/.test(sheet), + /workplace-layout|brand-stripe|navigation-width|navigation-active-soft|login-watermark-off/.test( + sheet, + ), ), ) expect(listed).toEqual([]) }) - it('only Zuiddrecht carries layout defaults among the shipped sets', () => { + it('only Zuiddrecht and its four demo schools carry layout defaults among the shipped sets', () => { const carriers = JSON.parse(read('token-sets.json')) .filter((entry) => entry.layout !== undefined) .map((entry) => entry.id) - expect(carriers).toEqual(['zuiddrecht']) + expect(carriers).toEqual([ + 'zuiddrecht', + 'wilgenboom', + 'vaartveld', + 'esdoornveen', + 'warmtepompacademie', + ]) + }) +}) + +/** + * The rules of a sheet whose selector list contains `needle`. + * + * @param {Array<{selectors: Array, decls: Record}>} rules The sheet. + * @param {string} needle Part of a selector. + * @return {Array<{selectors: Array, decls: Record}>} The matches. + */ +function withSelector(rules, needle) { + // Prettier breaks a long selector over several lines; compare it flat. + return rules.filter((rule) => + rule.selectors.some((selector) => + selector.replace(/\s+/g, ' ').includes(needle), + ), + ) +} + +describe('workplace layout: the login page and the guest pages', () => { + // @spec openspec/changes/workplace-layout-core-pages/specs/workplace-layout/spec.md + const rules = rulesOf('css/workplace-layout.css') + + it("shows Nextcloud's own guest logo above the card, 56px high, with the set's logo in it", () => { + const [logo] = withSelector(rules, '#header.header-guest .logo') + expect(logo.decls.display).toBe('block !important') + expect(logo.decls.height).toBe('56px !important') + expect(logo.decls['background-image']).toBe( + 'var(--nldesign-logo-url, var(--image-logo)) !important', + ) + const [header] = withSelector(rules, 'body#body-login #header.header-guest') + expect(header.decls.display).toBe('block !important') + }) + + it('retires the in-card stamp and the room the NL Design sheet keeps for it', () => { + const [stamp] = withSelector(rules, '.guest-box.login-box::after') + expect(stamp.decls.display).toBe('none !important') + const [wrapper] = withSelector(rules, "div[class*='login-box__wrapper']") + expect(wrapper.decls['padding-top']).toBe( + 'var(--nldesign-brand-stripe-height, 0px) !important', + ) + }) + + it('draws the card 420px wide with a hairline, the container radius and the card shadow colour', () => { + const [card] = rules.filter( + (rule) => + rule.selectors.join() === 'body#body-login .guest-box.login-box', + ) + expect(card.decls.width).toBe('min(420px, 100%) !important') + expect(card.decls.border).toBe( + '1px solid var(--nldesign-component-login-box-border-color, var(--color-border)) !important', + ) + expect(card.decls['border-radius']).toBe( + 'var( --nldesign-component-login-box-border-radius, var(--border-radius-container-large) ) !important', + ) + expect(card.decls['box-shadow']).toBe( + '0 2px 12px var(--nldesign-component-content-card-shadow-color, transparent) !important', + ) + }) + + it('titles the card at 24px and sizes the controls at 44px with a 1px edge', () => { + const [title] = withSelector(rules, '.login-form__headline') + expect(title.decls['font-size']).toBe('24px !important') + const [body] = rules.filter( + (rule) => rule.selectors.join() === 'body#body-login', + ) + expect(body.decls['--default-clickable-area']).toBe('44px') + const [input] = withSelector(rules, '.input-field__input') + expect(input.decls['border-width']).toBe('1px !important') + }) + + it('paints the guest action button label with the login button label colour', () => { + // The NL Design link rule `a:not(#header a)…` scores (1,2,4); these + // selectors must outrank it or the label stays link-blue on blue. + const [action] = withSelector( + rules, + '.body-login-container a.button.primary', + ) + expect(action.decls.color).toBe( + 'var( --nldesign-component-login-button-color, var(--color-primary-element-text) ) !important', + ) + for (const selector of action.selectors) { + const [ids, classes] = specificity(selector) + expect(ids >= 1 && classes >= 3, selector).toBe(true) + } + }) + + it('paints the two text actions under the form in the link colour, through the on-surface opt-out', () => { + const [actions] = rules.filter( + (rule) => + rule.decls['--nldesign-color-on-surface'] !== undefined + && rule.selectors.some((s) => + s.includes('.button-vue--vue-tertiary'), + ), + ) + expect(actions.decls['--nldesign-color-on-surface']).toBe( + 'var( --nldesign-color-link, var(--color-primary-element) )', + ) + expect(actions.decls.color).toBe( + 'var(--nldesign-color-link, var(--color-primary-element)) !important', + ) + // The control: the NL Design text rule really reads the opt-out. + expect(read('css/systems/nldesign/element-overrides.css')).toContain( + 'var(--nldesign-color-on-surface, var(--nldesign-color-text)) !important', + ) + }) + + it('takes the plate from under the footer line and mutes it', () => { + const [footer] = withSelector(rules, 'body#body-login footer.guest-box') + expect(footer.decls.background).toBe('transparent !important') + const [line] = withSelector(rules, 'footer.guest-box p.info a.entity-name') + expect(line.decls.color).toBe('var(--color-text-maxcontrast) !important') + for (const selector of line.selectors.filter((s) => + s.endsWith(' a.entity-name'), + )) { + const [ids, classes] = specificity(selector) + expect(ids >= 1 && classes >= 3, selector).toBe(true) + } + }) +}) + +describe('workplace layout: the top bar', () => { + // @spec openspec/changes/workplace-layout-core-pages/specs/workplace-layout/spec.md + const rules = rulesOf('css/workplace-layout.css') + + it('is 68px high through the variable Nextcloud lays the page out from', () => { + const [body] = rules.filter( + (rule) => rule.selectors.join() === 'body:not(#body-login)', + ) + expect(body.decls['--header-height']).toBe('68px') + }) + + it('draws the app grid button as a 40px square on the workspace colour', () => { + const [waffle] = withSelector(rules, '.app-menu__waffle') + expect(waffle.decls['--button-size']).toBe('40px') + expect(waffle.decls.width).toBe('40px !important') + expect(waffle.decls.height).toBe('40px !important') + expect(waffle.decls['border-radius']).toBe( + 'var(--border-radius-element) !important', + ) + expect(waffle.decls['background-color']).toContain( + '--nldesign-component-content-surface-background-color', + ) + }) + + it('draws the search field as a 44px pill on the workspace colour with a muted regular label', () => { + const [search] = withSelector(rules, '.unified-search__button') + expect(search.decls.height).toBe('44px !important') + expect(search.decls['border-radius']).toBe('22px !important') + expect(search.decls.border).toBe('1px solid var(--color-border) !important') + expect(search.decls['font-weight']).toBe('400 !important') + expect(search.decls.color).toBe('var(--color-text-maxcontrast) !important') + }) + + it("keeps the dashboard's panel row transparent on the workspace", () => { + const [row] = withSelector(rules, '#content.app-dashboard .panels') + expect(row.decls.background).toBe('transparent !important') + }) +}) + +describe('workplace layout: the standard apps as cards on the surface', () => { + // @spec openspec/changes/workplace-layout-standard-apps/specs/workplace-layout/spec.md + const rules = rulesOf('css/workplace-layout.css') + + it("draws the dashboard's panels as cards with the card title size", () => { + const [panel] = rules.filter( + (rule) => + rule.selectors.join() + === ':where(body:not(#body-login)) #content.app-dashboard .panel', + ) + expect(panel.decls['border-radius']).toBe( + 'var(--border-radius-container-large) !important', + ) + expect(panel.decls.border).toBe('1px solid var(--color-border) !important') + expect(panel.decls['box-shadow']).toContain( + '--nldesign-component-content-card-shadow-color', + ) + const [title] = withSelector( + rules, + '#content.app-dashboard .panel > .panel--header > h2', + ) + expect(title.decls['font-size']).toBe( + 'var(--nldesign-component-heading-3-font-size) !important', + ) + }) + + it('draws the Files list as one card, its rows and README on the card, its header labels 14px muted', () => { + const [list] = rules.filter( + (rule) => + rule.selectors.join() + === ':where(body:not(#body-login)) #app-content-vue .files-list', + ) + expect(list.decls.background).toBe('var(--color-main-background) !important') + expect(list.decls.border).toBe('1px solid var(--color-border) !important') + expect(list.decls['border-radius']).toBe( + 'var(--border-radius-container-large) !important', + ) + const [rows] = withSelector(rules, '.files-list .files-list__thead') + const headRows = withSelector( + rules, + '#app-content-vue .files-list .files-list__tfoot', + ) + expect(headRows[0].decls['background-color']).toBe( + 'var(--color-main-background) !important', + ) + const [labels] = withSelector(rules, '.files-list .files-list__thead th') + expect(labels.decls['font-size']).toBe('14px !important') + expect(labels.decls.color).toBe('var(--color-text-maxcontrast) !important') + const [readme] = withSelector( + rules, + '.files-list #rich-workspace .text-editor__main', + ) + expect(readme.decls['background-color']).toBe( + 'var(--color-main-background) !important', + ) + expect(rows).toBeDefined() + }) + + it('draws the settings sections as cards and the theme picker select 44px high', () => { + const [section] = withSelector( + rules, + '#content.app-settings #app-content-vue .section', + ) + expect(section.decls.background).toBe( + 'var(--color-main-background) !important', + ) + expect(section.decls.border).toBe('1px solid var(--color-border) !important') + expect(section.decls['border-radius']).toBe( + 'var(--border-radius-container-large) !important', + ) + const [select] = withSelector(rules, '#nldesign-token-set-select') + expect(select.decls.height).toBe('44px !important') }) }) diff --git a/tests/vitest/zuiddrechtTokenSet.spec.js b/tests/vitest/zuiddrechtTokenSet.spec.js index 0ee2b4e77..ce214b17a 100644 --- a/tests/vitest/zuiddrechtTokenSet.spec.js +++ b/tests/vitest/zuiddrechtTokenSet.spec.js @@ -253,6 +253,32 @@ function pairs(t, main) { main, 3, ], + // The public site (openspec/changes/zuiddrecht-site-page-title-notice-surface): + // the ink on a plain notice, and what the grey band and a boxed + // table's header row carry: text, muted text and links. + [ + 'attention text on the attention ground', + t['--nldesign-website-attention-color'], + t['--nldesign-website-attention-background-color'], + 4.5, + ], + [ + 'notice text on the notice ground', + t['--nldesign-website-notice-color'], + t['--nldesign-website-notice-background-color'], + 4.5, + ], + ...[ + ['text', '--nldesign-color-text'], + ['muted text', '--nldesign-color-text-muted'], + ['link', '--nldesign-color-link'], + ['link hover', '--nldesign-color-link-hover'], + ].map(([what, token]) => [ + what + ' on the site surface', + t[token], + t['--nldesign-color-surface'], + 4.5, + ]), ] } @@ -281,10 +307,14 @@ describe('zuiddrecht: the manifest entry', () => { } }) - it('carries the light layout and the stripe as its layout defaults', () => { + it('carries the light layout, the stripe on the login card, a 264px navigation, the soft entry and the workplace bar as its layout defaults', () => { expect(ENTRY.layout).toEqual({ workplace_layout: 'light', brand_stripe: true, + navigation_width: 264, + navigation_active_style: 'soft', + brand_stripe_placement: 'login', + header_style: 'workplace', }) }) }) @@ -347,9 +377,11 @@ describe('zuiddrecht: every text pair reaches AA', () => { describe('zuiddrecht: the dark workspace', () => { it('sets the dark page and surface in both dark scopes, and no colour in the light', () => { - // The one rule outside the dark scopes is the login logo box, which - // is geometry and declares no custom property. - const outsideDark = [] + // Outside the dark scopes the file holds geometry and type only (the + // login logo box, the workplace boards' measures): every colour there + // goes through a token, so no colour literal of its own, and the + // generated dark variant keeps up on its own. + const literals = [] postcss .parse(read('css/token-overrides/zuiddrecht.css')) .walkRules((rule) => { @@ -357,10 +389,18 @@ describe('zuiddrecht: the dark workspace', () => { rule.parent.type === 'atrule' && /prefers-color-scheme:\s*dark/.test(rule.parent.params) if (!inMedia && !/data-theme/.test(rule.selector)) { - rule.walkDecls((d) => outsideDark.push(d.prop)) + rule.walkDecls((d) => { + // A literal as the last-resort fallback of a token is fine. + const own = d.value.replace(/,\s*#[0-9a-f]{3,8}\s*\)/gi, ')') + if (/#[0-9a-f]{3,8}\b|\brgba?\(|\bhsla?\(/i.test(own)) { + literals.push( + rule.selector + ' ' + d.prop + ': ' + d.value, + ) + } + }) } }) - expect(outsideDark.sort()).toEqual(['height', 'top', 'width']) + expect(literals).toEqual([]) for (const scope of [OVERRIDES.media, OVERRIDES.explicit]) { expect(Object.keys(scope).sort()).toEqual([ @@ -497,3 +537,44 @@ describe('zuiddrecht: the font', () => { expect(LIGHT['--nldesign-font-family'].startsWith("'Fira Sans'")).toBe(true) }) }) + +describe('zuiddrecht: what the layout options carry, and the day-close link', () => { + const override = read('css/token-overrides/zuiddrecht.css') + const declarations = [] + postcss.parse(override).walkDecls((d) => { + declarations.push({ + selector: d.parent.selector || '', + prop: d.prop, + value: d.value + (d.important ? ' !important' : ''), + }) + }) + + it('leaves the 264px navigation and the soft entry to the layout options', () => { + // The set's `layout` block names both, so with nothing stored the page + // loads navigation-width.css and navigation-active-soft.css + // (LayoutOptionsServiceTest::testZuiddrechtWearsTheNewerDefaults). A + // literal here would overrule an administrator who picks another. + expect(declarations.filter((d) => /\b264px\b/.test(d.value))).toEqual([]) + expect(declarations.filter((d) => /navigation-width/.test(d.prop))).toEqual( + [], + ) + expect( + declarations.filter((d) => + // An entry that is NOT selected (the hover wash) is not the selected style. + /app-navigation-entry[^,]*(? { + const rule = (prop) => + declarations.find( + (d) => + /#content #app-navigation-vue \.cn-app-nav__card-link$/.test( + d.selector.replace(/\s+/g, ' ').trim(), + ) && d.prop === prop, + )?.value + expect(rule('color')).toBe('var(--nldesign-color-link) !important') + expect(rule('text-decoration')).toBe('underline !important') + }) +}) diff --git a/token-sets.json b/token-sets.json index 8d436e7db..fcf0aa884 100644 --- a/token-sets.json +++ b/token-sets.json @@ -485,11 +485,19 @@ { "id": "denhaag", "name": "Gemeente Den Haag", - "description": "Design tokens for Gemeente Den Haag", + "description": "Gemeente Den Haag's own design tokens: green buttons, blue links, a white page header.", "theming": { - "primary_color": "#1a7a3e", + "primary_color": "#238541", "background_color": "#FFFFFF", "logo": "img/logos/denhaag.svg" + }, + "font": { + "family": "TheSans", + "selfHosted": false, + "licence": "proprietary", + "licenceHolder": "LucasFonts", + "action": "upload", + "note": "Den Haag's token CSS names TheSans, a LucasFonts retail face it licenses. No release of it allows redistribution in an app package, so an administrator uploads the licensed webfont under Thematiq's custom fonts. Until then this set renders in the self-hosted Fira Sans behind it in the stack." } }, { @@ -776,9 +784,74 @@ "logo": "img/logos/zuiddrecht.svg", "logo_dark": "img/logos/zuiddrecht-dark.svg" }, + "layout": { + "workplace_layout": "light", + "brand_stripe": true, + "navigation_width": 264, + "navigation_active_style": "soft", + "brand_stripe_placement": "login", + "header_style": "workplace" + } + }, + { + "id": "wilgenboom", + "name": "Basisschool De Wilgenboom", + "description": "A primary school in the demo town of Zuiddrecht, which does not exist. Willow green #2F6B4A for actions, sun yellow #F5B82E as the accent, Lexend. A light workplace; the hanging twigs are its brand stripe.", + "design_system": "nldesign", + "theming": { + "primary_color": "#2F6B4A", + "background_color": "#F5F6F8", + "logo": "img/logos/wilgenboom.svg", + "logo_dark": "img/logos/wilgenboom-dark.svg" + }, + "layout": { + "workplace_layout": "light" + } + }, + { + "id": "vaartveld", + "name": "Vaartveld College", + "description": "A secondary school (vmbo-t, havo, vwo) in the demo town of Zuiddrecht, which does not exist. Cobalt #1F4FD8 for actions, aqua #1FB5A8 as the accent, Red Hat Display over Red Hat Text. A light workplace.", + "design_system": "nldesign", + "theming": { + "primary_color": "#1F4FD8", + "background_color": "#F5F6F8", + "logo": "img/logos/vaartveld.svg", + "logo_dark": "img/logos/vaartveld-dark.svg" + }, + "layout": { + "workplace_layout": "light" + } + }, + { + "id": "esdoornveen", + "name": "Esdoornveen, mbo college", + "description": "A vocational college in the demo town of Zuiddrecht, which does not exist. Plum #5B2E91 for actions, maple rose #C2255C as the accent, IBM Plex Sans with IBM Plex Mono for codes. A light workplace with the slanted cut as its brand stripe, along the top bar and the login card.", + "design_system": "nldesign", + "theming": { + "primary_color": "#5B2E91", + "background_color": "#F5F6F8", + "logo": "img/logos/esdoornveen.svg", + "logo_dark": "img/logos/esdoornveen-dark.svg" + }, "layout": { "workplace_layout": "light", "brand_stripe": true } + }, + { + "id": "warmtepompacademie", + "name": "Warmtepompacademie", + "description": "A training agency for heat-pump installers in the demo town of Zuiddrecht, which does not exist. Petrol #0B6E7A for actions, ember #C2410C as the accent, Barlow Semi Condensed over Barlow. A light workplace.", + "design_system": "nldesign", + "theming": { + "primary_color": "#0B6E7A", + "background_color": "#F5F6F8", + "logo": "img/logos/warmtepompacademie.svg", + "logo_dark": "img/logos/warmtepompacademie-dark.svg" + }, + "layout": { + "workplace_layout": "light" + } } ] diff --git a/vitest.config.js b/vitest.config.js index ed8130907..11b54367d 100644 --- a/vitest.config.js +++ b/vitest.config.js @@ -23,6 +23,15 @@ module.exports = { globals: false, include: ['tests/vitest/**/*.spec.{js,ts}'], exclude: ['tests/e2e/**', 'tests/integration/**', 'node_modules/**'], + // The playground's code editor (src/codeEditor.js) imports + // @conduction/nextcloud-vue, whose components import their own .css + // files. Node cannot load those; processed by Vitest instead, the imports + // resolve, and a test can mock what the component imports in turn. + server: { + deps: { + inline: [/@conduction\/nextcloud-vue/], + }, + }, }, resolve: { alias: [{ find: '@', replacement: path.resolve(__dirname, 'js') }], diff --git a/webpack.code-editor.config.js b/webpack.code-editor.config.js new file mode 100644 index 000000000..70325ec5c --- /dev/null +++ b/webpack.code-editor.config.js @@ -0,0 +1,54 @@ +/** + * SPDX-License-Identifier: EUPL-1.2 + * SPDX-FileCopyrightText: 2026 Conduction B.V. + * + * Bundles src/codeEditor.js — the playground's code editor, CnJsonViewer from + * @conduction/nextcloud-vue — into one script, js/vendor/codeEditor.js, which the + * admin template loads when it is there. The rest of js/ is hand-written source + * served as it is; this is the only bundled file, and it is gitignored. + * + * Webpack, as the other Conduction apps build with: it is plain JavaScript, so + * `npm run build` works on every Node an `npm ci` here installs on. + * + * Run with `npm run build:code-editor`; `npm run build` runs it too. + */ + +const path = require('path') +const webpack = require('webpack') + +module.exports = { + mode: 'production', + entry: path.join(__dirname, 'src', 'codeEditor.js'), + output: { + path: path.join(__dirname, 'js', 'vendor'), + filename: 'codeEditor.js', + }, + resolve: { + alias: { + // CnJsonViewer needs NcButton only; the package index brings all of + // @nextcloud/vue. See src/nextcloudVue.js. + '@nextcloud/vue$': path.join(__dirname, 'src', 'nextcloudVue.js'), + }, + }, + module: { + rules: [ + { + // NcButton imports its stylesheet. CnJsonViewer draws NcButton + // only for JSON, which the playground never edits, so the + // stylesheet is carried as text and never put on the page. + test: /\.css$/, + type: 'asset/source', + }, + ], + }, + plugins: [ + new webpack.DefinePlugin({ + __VUE_OPTIONS_API__: 'true', + __VUE_PROD_DEVTOOLS__: 'false', + __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false', + }), + ], + performance: { + hints: false, + }, +}