diff --git a/README.md b/README.md index 0c2f90218..a83887dfb 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ Apply Dutch government design tokens (NL Design System) to your Nextcloud instan ## Features -- **46 token sets**: Choose from Dutch government design systems, including: +- **47 token sets**: Choose from Dutch government design systems, including: - Rijkshuisstijl (Dutch national government) - Gemeente Utrecht - Gemeente Amsterdam @@ -31,7 +31,7 @@ Apply Dutch government design tokens (NL Design System) to your Nextcloud instan ## Icons -The app includes **2526 icons** across four government icon sets and **24 logos**: +The app includes **2526 icons** across four government icon sets and **25 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` diff --git a/css/tokens/dark/opencatalogi.css b/css/tokens/dark/opencatalogi.css new file mode 100644 index 000000000..0c863e36d --- /dev/null +++ b/css/tokens/dark/opencatalogi.css @@ -0,0 +1,1514 @@ +/* GENERATED by nldesign DarkPaletteService v2 from tokens/opencatalogi.css (sha256:1ca4db8202d355066d55f24bc8decc32ed696ecbf62901dfae14020fd8fb92bc) — 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]) { + --ams-date-input-background-color: #141414; + --ams-date-input-border-color: #717f83; + --ams-date-input-color: #b0bbbf; + --ams-pagination-button-active-color: #77bbff; + --ams-pagination-button-color: #77bbff; + --ams-pagination-button-current-background-color: #191e22; + --ams-pagination-button-current-color: #cccccc; + --ams-pagination-button-focus-background-color: #45b9f5; + --ams-pagination-button-focus-color: #77bbff; + --ams-pagination-button-hover-color: #77bbff; + --ams-pagination-color: #77bbff; + --ams-pagination-description-color: #cccccc; + --ams-pagination-ellipses-color: #8a9ab2; + --ams-pagination-relative-link-active-color: #77bbff; + --ams-pagination-relative-link-color: #77bbff; + --ams-pagination-relative-link-disabled-color: #8e9cae; + --ams-pagination-relative-link-focus-background-color: #45b9f5; + --ams-pagination-relative-link-focus-color: #77bbff; + --ams-pagination-relative-link-hover-color: #77bbff; + --conduction-card-header-color: #b0bbbf; + --conduction-card-header-date-color: #b0bbbf; + --conduction-card-header-title-color: #7eff9d; + --conduction-card-wrapper-background-color: #141414; + --conduction-card-wrapper-border-bottom-color: #313f44; + --conduction-card-wrapper-color: #b0bbbf; + --conduction-card-wrapper-hover-border-bottom-color: #71f892; + --conduction-download-card-border-color: #313f44; + --conduction-download-card-title-color: #b0bbbf; + --conduction-input-checkbox-border-color: #717f83; + --conduction-input-checkbox-checked-border-color: #71f892; + --conduction-input-checkbox-checked-color: #7eff9d; + --conduction-input-checkbox-checked-hover-border-color: #ebebeb; + --conduction-input-checkbox-checked-hover-color: #ebebeb; + --conduction-input-checkbox-color: #9e9e9e; + --conduction-input-checkbox-disabled-border-color: #717f83; + --conduction-input-checkbox-disabled-color: #96a2a6; + --conduction-input-checkbox-disabled-hover-border-color: #717f83; + --conduction-input-checkbox-disabled-hover-color: #96a2a6; + --conduction-input-checkbox-focus-outline-color: #ebebeb; + --conduction-input-checkbox-hover-border-color: #71f892; + --conduction-input-checkbox-hover-color: #9e9e9e; + --conduction-input-checkbox-label-color: #b0bbbf; + --conduction-input-select-background-color: #141414; + --conduction-input-select-invalid-border-color: #df0d0d; + --conduction-input-select-list-option-background-color: #141414; + --conduction-input-select-list-option-focus-background-color: #141414; + --conduction-input-select-list-option-focus-color: #ebebeb; + --conduction-input-select-list-option-hover-background-color: #71f892; + --conduction-input-select-list-option-hover-color: #9e9e9e; + --conduction-input-select-list-option-selected-background-color: #71f892; + --conduction-input-select-list-option-selected-color: #9e9e9e; + --conduction-input-select-placeholder-color: #95a2a8; + --conduction-pagination-current-page-background-color: #1d331e; + --conduction-pagination-current-page-border-color: #8cf9c0; + --conduction-pagination-current-page-color: #9fffcd; + --conduction-pagination-item-background-color: #141414; + --conduction-pagination-item-border-color: #141414; + --conduction-pagination-item-color: #b0bbbf; + --conduction-pagination-navigation-button-color: #b0bbbf; + --conduction-pagination-navigation-button-disabled-color: #93a2a9; + --conduction-pagination-navigation-button-hover-color: #7eff9d; + --conduction-pagination-page-hover-background-color: #141414; + --conduction-pagination-page-hover-border-color: #71f892; + --conduction-pagination-page-hover-color: #7eff9d; + --conduction-primary-top-nav-background-color: #141414; + --conduction-primary-top-nav-color: #b0bbbf; + --conduction-primary-top-nav-current-background-color: #3cb8f5; + --conduction-primary-top-nav-current-color: #b0bbbf; + --conduction-primary-top-nav-dropdown-background-color: #71f892; + --conduction-primary-top-nav-dropdown-color: #9e9e9e; + --conduction-primary-top-nav-dropdown-current-background-color: #ebebeb; + --conduction-primary-top-nav-dropdown-current-color: #9e9e9e; + --conduction-primary-top-nav-dropdown-hover-background-color: #ebebeb; + --conduction-primary-top-nav-dropdown-hover-color: #9e9e9e; + --conduction-primary-top-nav-hover-background-color: #141414; + --conduction-primary-top-nav-hover-color: #7eff9d; + --conduction-secondary-top-nav-color: #b0bbbf; + --conduction-secondary-top-nav-current-color: #b0bbbf; + --conduction-secondary-top-nav-hover-background-color: #71f892; + --conduction-secondary-top-nav-hover-color: #9e9e9e; + --conduction-table-wrapper-scroll-button-background-color: #141414; + --conduction-table-wrapper-scroll-button-color: #b0bbbf; + --conduction-table-wrapper-scroll-button-hover-background-color: #141414; + --conduction-table-wrapper-scroll-button-hover-color: #7eff9d; + --conduction-tabs-scroll-button-background-color: #141414; + --conduction-tabs-scroll-button-color: #b0bbbf; + --conduction-tabs-scroll-button-hover-background-color: #141414; + --conduction-tabs-scroll-button-hover-color: #7eff9d; + --conduction-tabs-tab-color: #b0bbbf; + --conduction-tabs-tab-hover-color: #7eff9d; + --conduction-tabs-tab-list-border-bottom-color: #172227; + --conduction-tabs-tab-selected-border-bottom-color: #71f892; + --conduction-tabs-tab-selected-color: #b0bbbf; + --conduction-tabs-tab-selected-hover-color: #9ad2ff; + --conduction-tooltip-background-color: #ebebeb; + --conduction-tooltip-color: #9e9e9e; + --denhaag-process-steps-step-content-color: #89a0c0; + --denhaag-process-steps-step-heading-color: #b0bbbf; + --denhaag-process-steps-step-heading-current-color: #6eb0fc; + --denhaag-process-steps-step-heading-error-color: #ea5a52; + --denhaag-process-steps-step-heading-warning-color: #fa9442; + --denhaag-sidenav-link-active-color: #77bbff; + --denhaag-sidenav-link-color: #b0bbbf; + --denhaag-sidenav-link-hover-color: #77bbff; + --denhaag-step-marker-background-color: #141414; + --denhaag-step-marker-checked-background-color: #192f1e; + --denhaag-step-marker-checked-border-color: #7cf7db; + --denhaag-step-marker-checked-color: #71f892; + --denhaag-step-marker-color: #ebebeb; + --denhaag-step-marker-connector-checked-outline-color: #7cf7db; + --denhaag-step-marker-connector-default-outline-color: #22262e; + --denhaag-step-marker-connector-error-outline-color: #cc2c24; + --denhaag-step-marker-connector-not-checked-outline-color: #22262e; + --denhaag-step-marker-connector-warning-outline-color: #ed7719; + --denhaag-step-marker-current-background-color: #0c2534; + --denhaag-step-marker-current-border-color: #65a7f4; + --denhaag-step-marker-current-color: #32a1de; + --denhaag-step-marker-current-nested-color: #65a7f4; + --denhaag-step-marker-default-background-color: #22262e; + --denhaag-step-marker-default-border-color: #22262e; + --denhaag-step-marker-default-color: #141414; + --denhaag-step-marker-default-nested-color: #22262e; + --denhaag-step-marker-disabled-background-color: #191e22; + --denhaag-step-marker-disabled-border-color: #191e22; + --denhaag-step-marker-disabled-color: #505b6d; + --denhaag-step-marker-error-background-color: #310e08; + --denhaag-step-marker-error-border-color: #cc2c24; + --denhaag-step-marker-error-color: #df0d0d; + --denhaag-step-marker-not-checked-background-color: #141414; + --denhaag-step-marker-not-checked-border-color: #22262e; + --denhaag-step-marker-not-checked-color: #ebebeb; + --denhaag-step-marker-warning-background-color: #392c05; + --denhaag-step-marker-warning-border-color: #ed7719; + --denhaag-step-marker-warning-color: #c1b10c; + --denhaag-step-marker-warning-nested-background-color: #141414; + --denhaag-step-marker-warning-nested-border-color: #ed7719; + --nldesign-color-background: #141414; + --nldesign-color-background-dark: #1b2b30; + --nldesign-color-background-darker: #223337; + --nldesign-color-background-hover: #172227; + --nldesign-color-border: #313f44; + --nldesign-color-border-dark: #717f83; + --nldesign-color-button-primary-background: #c23d76; + --nldesign-color-button-primary-border: #c23d76; + --nldesign-color-button-primary-hover: #cc5e8d; + --nldesign-color-button-primary-text: #9e9e9e; + --nldesign-color-error: #e72e2e; + --nldesign-color-error-hover: #e76060; + --nldesign-color-error-rgb: 231, 46, 46; + --nldesign-color-favorite: #f38b1a; + --nldesign-color-focus: #45b9f5; + --nldesign-color-focus-rgb: 69, 185, 245; + --nldesign-color-header-background: #141414; + --nldesign-color-header-text: #b0bbbf; + --nldesign-color-info: #45b9f5; + --nldesign-color-info-rgb: 69, 185, 245; + --nldesign-color-link: #71f892; + --nldesign-color-link-hover: #80f8b7; + --nldesign-color-link-visited: #e084b5; + --nldesign-color-nav-background: #141414; + --nldesign-color-placeholder-dark: #313f44; + --nldesign-color-placeholder-light: #1b2b30; + --nldesign-color-primary: #00811f; + --nldesign-color-primary-hover: #006e32; + --nldesign-color-primary-light: #1d331e; + --nldesign-color-primary-light-hover: #3b6e42; + --nldesign-color-primary-text: #fefefe; + --nldesign-color-success: #71f892; + --nldesign-color-success-rgb: 113, 248, 146; + --nldesign-color-text: #b0bbbf; + --nldesign-color-text-light: #9e9e9e; + --nldesign-color-text-muted: #95a2a8; + --nldesign-color-warning: #ee7c2a; + --nldesign-color-warning-rgb: 238, 124, 42; + --nldesign-component-badge-background-color: #71f892; + --nldesign-component-badge-color: #9e9e9e; + --nldesign-component-button-active-background-color: #3b6e42; + --nldesign-component-button-active-color: #7eff9d; + --nldesign-component-button-border-color: #71f892; + --nldesign-component-button-color: #7eff9d; + --nldesign-component-button-disabled-background-color: #2a2a2a; + --nldesign-component-button-disabled-border-color: #535353; + --nldesign-component-button-disabled-color: #9e9e9e; + --nldesign-component-button-focus-border-color: #45b9f5; + --nldesign-component-button-hover-background-color: #1d331e; + --nldesign-component-button-hover-border-color: #80f8b7; + --nldesign-component-button-hover-color: #7eff9d; + --nldesign-component-button-primary-action-background-color: #71f892; + --nldesign-component-button-primary-action-border-color: #71f892; + --nldesign-component-button-primary-action-color: #9e9e9e; + --nldesign-component-button-primary-action-hover-background-color: #80f8b7; + --nldesign-component-button-primary-action-hover-color: #9e9e9e; + --nldesign-component-button-secondary-action-border-color: #71f892; + --nldesign-component-button-secondary-action-color: #7eff9d; + --nldesign-component-button-secondary-action-hover-background-color: #1d331e; + --nldesign-component-form-field-label-color: #b0bbbf; + --nldesign-component-form-fieldset-border-color: #313f44; + --nldesign-component-form-select-border-color: #313f44; + --nldesign-component-form-select-focus-border-color: #45b9f5; + --nldesign-component-heading-1-color: #b0bbbf; + --nldesign-component-heading-2-color: #b0bbbf; + --nldesign-component-heading-3-color: #b0bbbf; + --nldesign-component-heading-4-color: #b0bbbf; + --nldesign-component-heading-5-color: #b0bbbf; + --nldesign-component-heading-6-color: #b0bbbf; + --nldesign-component-link-color: #7eff9d; + --nldesign-component-link-hover-color: #91ffc3; + --nldesign-component-link-visited-color: #e88fbf; + --nldesign-component-ordered-list-color: #b0bbbf; + --nldesign-component-paragraph-color: #b0bbbf; + --nldesign-component-separator-border-color: #313f44; + --nldesign-component-table-border-color: #313f44; + --nldesign-component-table-header-background-color: #1b2b30; + --nldesign-component-table-header-color: #b0bbbf; + --nldesign-component-table-row-hover-background-color: #172227; + --nldesign-component-textbox-background-color: #9e9e9e; + --nldesign-component-textbox-border-color: #8da7af; + --nldesign-component-textbox-color: #b0bbbf; + --nldesign-component-textbox-disabled-background-color: #9e9e9e; + --nldesign-component-textbox-disabled-color: #9e9e9e; + --nldesign-component-textbox-focus-border-color: #47c0ff; + --nldesign-component-textbox-hover-border-color: #96a2a6; + --nldesign-component-textbox-invalid-border-color: #f44848; + --nldesign-component-unordered-list-color: #b0bbbf; + --opencatalogi-color-base-black: #ebebeb; + --opencatalogi-color-base-gray: #172227; + --opencatalogi-color-base-green: #71f892; + --opencatalogi-color-base-magenta: #c23d76; + --opencatalogi-color-base-white: #141414; + --opencatalogi-color-blue-tint-01: #32a1de; + --opencatalogi-color-blue-tint-02: #3cb8f5; + --opencatalogi-color-blue-tint-03: #45b9f5; + --opencatalogi-color-bright-orange-tint-01: #f38b1a; + --opencatalogi-color-bright-orange-tint-02: #f18522; + --opencatalogi-color-bright-orange-tint-03: #ee7c2a; + --opencatalogi-color-brown-tint-01: #9c7558; + --opencatalogi-color-brown-tint-02: #a57f68; + --opencatalogi-color-brown-tint-03: #ad8973; + --opencatalogi-color-dark-blue-tint-01: #66bbf7; + --opencatalogi-color-dark-blue-tint-02: #7ab6ef; + --opencatalogi-color-dark-blue-tint-03: #88bdf0; + --opencatalogi-color-dark-brown-tint-01: #c1998d; + --opencatalogi-color-dark-brown-tint-02: #caa197; + --opencatalogi-color-dark-brown-tint-03: #d1a69e; + --opencatalogi-color-dark-green-tint-01: #9cfad8; + --opencatalogi-color-dark-green-tint-02: #b3f1ce; + --opencatalogi-color-dark-green-tint-03: #c4fccf; + --opencatalogi-color-dark-yellow-tint-01: #f3c01b; + --opencatalogi-color-dark-yellow-tint-02: #f4bb25; + --opencatalogi-color-dark-yellow-tint-03: #f4b62b; + --opencatalogi-color-gray-tint-01: #172227; + --opencatalogi-color-gray-tint-02: #1b2b30; + --opencatalogi-color-gray-tint-03: #223337; + --opencatalogi-color-gray-tint-04: #313f44; + --opencatalogi-color-gray-tint-05: #414f54; + --opencatalogi-color-gray-tint-06: #506268; + --opencatalogi-color-gray-tint-07: #606f75; + --opencatalogi-color-gray-tint-08: #717f83; + --opencatalogi-color-gray-tint-09: #829197; + --opencatalogi-color-gray-tint-10: #95a2a6; + --opencatalogi-color-gray-tint-11: #a7b2b6; + --opencatalogi-color-green-blue-tint-01: #63edd4; + --opencatalogi-color-green-blue-tint-02: #6ff7e0; + --opencatalogi-color-green-blue-tint-03: #7bf8e1; + --opencatalogi-color-green-light-tint-01: #59a954; + --opencatalogi-color-green-light-tint-02: #5be587; + --opencatalogi-color-green-light-tint-03: #5be587; + --opencatalogi-color-green-tint-01: #71f892; + --opencatalogi-color-green-tint-02: #80f8b7; + --opencatalogi-color-green-tint-03: #8cf9c0; + --opencatalogi-color-light-blue-tint-01: #115a69; + --opencatalogi-color-light-blue-tint-02: #266577; + --opencatalogi-color-light-blue-tint-03: #347c8d; + --opencatalogi-color-lime-green-tint-01: #a0e63a; + --opencatalogi-color-lime-green-tint-02: #95ce50; + --opencatalogi-color-lime-green-tint-03: #8ccc59; + --opencatalogi-color-magenta-tint-01: #c23d76; + --opencatalogi-color-magenta-tint-02: #cc5e8d; + --opencatalogi-color-magenta-tint-03: #d77ea4; + --opencatalogi-color-orange-tint-01: #b13825; + --opencatalogi-color-orange-tint-02: #b7402f; + --opencatalogi-color-orange-tint-03: #be4839; + --opencatalogi-color-pink-tint-01: #f32194; + --opencatalogi-color-pink-tint-02: #f434a1; + --opencatalogi-color-pink-tint-03: #e44da6; + --opencatalogi-color-purple-tint-01: #e084b5; + --opencatalogi-color-purple-tint-02: #e99cc7; + --opencatalogi-color-purple-tint-03: #eba9d4; + --opencatalogi-color-red-tint-01: #df0d0d; + --opencatalogi-color-red-tint-02: #e72e2e; + --opencatalogi-color-red-tint-03: #e76060; + --opencatalogi-color-soft-green-tint-01: #1d331e; + --opencatalogi-color-soft-green-tint-02: #284324; + --opencatalogi-color-soft-green-tint-03: #3b6e42; + --opencatalogi-color-yellow-tint-01: #c1b10c; + --opencatalogi-color-yellow-tint-02: #d2c41c; + --opencatalogi-color-yellow-tint-03: #f4e925; + --tilburg-color-black: #ebebeb; + --tilburg-color-black-txt: #c0c0c0; + --tilburg-color-blue-100: #03273b; + --tilburg-color-blue-200: #093f5d; + --tilburg-color-blue-300: #2abbf4; + --tilburg-color-blue-400: #61c4f5; + --tilburg-color-blue-500: #88c6f9; + --tilburg-color-code-background-color: #172227; + --tilburg-color-extra-limegreen: #85ba40; + --tilburg-color-extra-purple: #8c6cc7; + --tilburg-color-extra-yellow: #d3b70f; + --tilburg-color-gray-100: #191e22; + --tilburg-color-gray-200: #22262e; + --tilburg-color-gray-300: #2e363f; + --tilburg-color-gray-400: #505b6d; + --tilburg-color-gray-50: #17171b; + --tilburg-color-gray-500: #637186; + --tilburg-color-gray-600: #7586a0; + --tilburg-color-gray-700: #849ab9; + --tilburg-color-gray-800: #90aacf; + --tilburg-color-gray-900: #9cbeee; + --tilburg-color-gray-950: #accdfb; + --tilburg-color-green-100: #154d40; + --tilburg-color-green-200: #3d7e70; + --tilburg-color-green-300: #69f7d9; + --tilburg-color-green-400: #7cf7db; + --tilburg-color-orange-100: #492204; + --tilburg-color-orange-200: #92470c; + --tilburg-color-orange-300: #ed7719; + --tilburg-color-orange-400: #f3862f; + --tilburg-color-pink-100: #390322; + --tilburg-color-pink-200: #5f113b; + --tilburg-color-pink-300: #f5399e; + --tilburg-color-pink-400: #f655ac; + --tilburg-color-red-100: #3f0503; + --tilburg-color-red-200: #66140f; + --tilburg-color-red-300: #cc2c24; + --tilburg-color-red-400: #e34a42; + --tilburg-color-white: #141414; + --tilburg-document-background-color: #141414; + --tilburg-document-color: #cccccc; + --tilburg-document-inverse-background-color: #accdfb; + --tilburg-document-inverse-color: #9e9e9e; + --tilburg-document-subtle-color: #8a9ab2; + --tilburg-feedback-informative-background-color: #03273b; + --tilburg-feedback-informative-border-color: #61c4f5; + --tilburg-feedback-informative-color: #69ccfd; + --tilburg-feedback-negative-background-color: #3f0503; + --tilburg-feedback-negative-border-color: #cc2c24; + --tilburg-feedback-negative-color: #ea5a52; + --tilburg-feedback-positive-background-color: #154d40; + --tilburg-feedback-positive-border-color: #69f7d9; + --tilburg-feedback-positive-color: #74ffe1; + --tilburg-feedback-warning-background-color: #492204; + --tilburg-feedback-warning-border-color: #92470c; + --tilburg-feedback-warning-color: #fa9442; + --tilburg-focus-background-color: #45b9f5; + --tilburg-focus-color: #77bbff; + --tilburg-focus-inverse-outline-color: #141414; + --tilburg-focus-outline-color: #8c6cc7; + --tilburg-footer-background-color: #71f892; + --tilburg-footer-color: #9e9e9e; + --tilburg-form-control-accent-color: #6cb1f7; + --tilburg-form-control-active-accent-color: #6cb1f7; + --tilburg-form-control-active-background-color: #191e22; + --tilburg-form-control-active-border-color: #637186; + --tilburg-form-control-active-color: #c8dfff; + --tilburg-form-control-background-color: #141414; + --tilburg-form-control-border-color: #637186; + --tilburg-form-control-color: #c8dfff; + --tilburg-form-control-disabled-accent-color: #637186; + --tilburg-form-control-disabled-background-color: #17171b; + --tilburg-form-control-disabled-border-color: #637186; + --tilburg-form-control-disabled-color: #8e9cae; + --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: #6cb1f7; + --tilburg-form-control-hover-background-color: #17171b; + --tilburg-form-control-hover-border-color: #637186; + --tilburg-form-control-hover-color: #c8dfff; + --tilburg-form-control-invalid-background-color: #141414; + --tilburg-form-control-invalid-border-color: #cc2c24; + --tilburg-form-control-invalid-color: #ea5a52; + --tilburg-form-control-placeholder-color: #8a9ab2; + --tilburg-form-control-read-only-background-color: #17171b; + --tilburg-form-control-read-only-border-color: #637186; + --tilburg-form-control-read-only-color: #c8dfff; + --tilburg-header-background-color: #141414; + --tilburg-heading-color: #ebebeb; + --tilburg-interaction-active-color: #77bbff; + --tilburg-interaction-color: #77bbff; + --tilburg-interaction-hover-color: #77bbff; + --tilburg-line-border-color: #828289; + --tilburg-logo-color: #b0bbbf; + --tilburg-navigation-background-color: #141414; + --tilburg-navigation-color: #b0bbbf; + --tilburg-navigation-hover-background-color: #141414; + --tilburg-navigation-hover-color: #7eff9d; + --tilburg-navigation-mobile-background-color: #61c4f5; + --tilburg-navigation-mobile-item-border-bottom-color: #2abbf4; + --tilburg-search-card-border-color: #22262e; + --tilburg-search-card-hover-border-color: #71f892; + --tilburg-status-badge-background-color: #390322; + --tilburg-status-badge-color: #cccccc; + --tilburg-status-badge-informative-background-color: #03273b; + --tilburg-status-badge-informative-color: #69ccfd; + --tilburg-status-badge-negative-background-color: #3f0503; + --tilburg-status-badge-negative-color: #ea5a52; + --tilburg-status-badge-positive-background-color: #154d40; + --tilburg-status-badge-positive-color: #74ffe1; + --tilburg-status-badge-warning-background-color: #492204; + --tilburg-status-badge-warning-color: #fa9442; + --utrecht-accordion-button-active-background-color: #22262e; + --utrecht-accordion-button-active-color: #77bbff; + --utrecht-accordion-button-background-color: #17171b; + --utrecht-accordion-button-color: #77bbff; + --utrecht-accordion-button-expanded-background-color: #17171b; + --utrecht-accordion-button-expanded-color: #77bbff; + --utrecht-accordion-button-focus-background-color: #45b9f5; + --utrecht-accordion-button-focus-color: #77bbff; + --utrecht-accordion-button-hover-background-color: #191e22; + --utrecht-accordion-button-hover-color: #77bbff; + --utrecht-accordion-section-border-color: #828289; + --utrecht-alert-background-color: #0c2534; + --utrecht-alert-border-color: #16445d; + --utrecht-alert-color: #b0bbbf; + --utrecht-alert-error-background-color: #310e08; + --utrecht-alert-error-border-color: #51180f; + --utrecht-alert-error-color: #b0bbbf; + --utrecht-alert-icon-color: #61c9ff; + --utrecht-alert-icon-error-color: #f44848; + --utrecht-alert-icon-info-color: #9ad2ff; + --utrecht-alert-icon-informative-color: #69ccfd; + --utrecht-alert-icon-negative-color: #ea5a52; + --utrecht-alert-icon-ok-color: #7eff9d; + --utrecht-alert-icon-positive-color: #74ffe1; + --utrecht-alert-icon-warning-color: #ffaf59; + --utrecht-alert-info-background-color: #03273b; + --utrecht-alert-info-border-color: #2abbf4; + --utrecht-alert-info-color: #9ad2ff; + --utrecht-alert-informative-background-color: #03273b; + --utrecht-alert-informative-border-color: #61c4f5; + --utrecht-alert-informative-color: #cccccc; + --utrecht-alert-negative-background-color: #3f0503; + --utrecht-alert-negative-border-color: #cc2c24; + --utrecht-alert-negative-color: #cccccc; + --utrecht-alert-ok-background-color: #192f1e; + --utrecht-alert-ok-border-color: #325f3e; + --utrecht-alert-ok-color: #b0bbbf; + --utrecht-alert-positive-background-color: #154d40; + --utrecht-alert-positive-border-color: #69f7d9; + --utrecht-alert-positive-color: #cccccc; + --utrecht-alert-warning-background-color: #392c05; + --utrecht-alert-warning-border-color: #67520d; + --utrecht-alert-warning-color: #b0bbbf; + --utrecht-badge-background-color: #ebebeb; + --utrecht-badge-color: #9e9e9e; + --utrecht-badge-counter-background-color: #ebebeb; + --utrecht-badge-counter-color: #9e9e9e; + --utrecht-breadcrumb-nav-divider-color: #7586a0; + --utrecht-breadcrumb-nav-link-active-color: #77bbff; + --utrecht-breadcrumb-nav-link-color: #7eff9d; + --utrecht-breadcrumb-nav-link-current-color: #95a2a8; + --utrecht-breadcrumb-nav-link-disabled-color: #95a2a8; + --utrecht-breadcrumb-nav-link-focus-background-color: #45b9f5; + --utrecht-breadcrumb-nav-link-focus-color: #77bbff; + --utrecht-breadcrumb-nav-link-hover-color: #7eff9d; + --utrecht-breadcrumb-nav-separator-color: #71f892; + --utrecht-button-active-background-color: #191e22; + --utrecht-button-active-border-color: #6cb1f7; + --utrecht-button-active-color: #77bbff; + --utrecht-button-background-color: #71f892; + --utrecht-button-border-color: #9cbeee; + --utrecht-button-color: #9e9e9e; + --utrecht-button-disabled-background-color: #313f44; + --utrecht-button-disabled-color: #95a2a8; + --utrecht-button-focus-background-color: #45b9f5; + --utrecht-button-focus-border-color: #ebebeb; + --utrecht-button-focus-color: #77bbff; + --utrecht-button-hover-background-color: #80f8b7; + --utrecht-button-hover-border-color: #6cb1f7; + --utrecht-button-hover-color: #77bbff; + --utrecht-button-primary-action-active-background-color: #6cb1f7; + --utrecht-button-primary-action-active-color: #9e9e9e; + --utrecht-button-primary-action-background-color: #c23d76; + --utrecht-button-primary-action-color: #9e9e9e; + --utrecht-button-primary-action-disabled-background-color: #17171b; + --utrecht-button-primary-action-disabled-color: #8e9cae; + --utrecht-button-primary-action-focus-background-color: #45b9f5; + --utrecht-button-primary-action-focus-color: #77bbff; + --utrecht-button-primary-action-hover-background-color: #cc5e8d; + --utrecht-button-primary-action-hover-color: #9e9e9e; + --utrecht-button-secondary-action-active-background-color: #191e22; + --utrecht-button-secondary-action-active-border-color: #6cb1f7; + --utrecht-button-secondary-action-active-color: #77bbff; + --utrecht-button-secondary-action-background-color: #ebebeb; + --utrecht-button-secondary-action-border-color: #6cb1f7; + --utrecht-button-secondary-action-color: #9e9e9e; + --utrecht-button-secondary-action-disabled-background-color: #17171b; + --utrecht-button-secondary-action-disabled-color: #8e9cae; + --utrecht-button-secondary-action-focus-background-color: #45b9f5; + --utrecht-button-secondary-action-focus-color: #77bbff; + --utrecht-button-secondary-action-hover-background-color: #a7b2b6; + --utrecht-button-secondary-action-hover-color: #77bbff; + --utrecht-button-subtle-active-color: #77bbff; + --utrecht-button-subtle-background-color: #141414; + --utrecht-button-subtle-color: #7eff9d; + --utrecht-button-subtle-disabled-background-color: #313f44; + --utrecht-button-subtle-disabled-color: #95a2a8; + --utrecht-button-subtle-focus-background-color: #45b9f5; + --utrecht-button-subtle-focus-color: #77bbff; + --utrecht-button-subtle-hover-color: #9fffcd; + --utrecht-calendar-navigation-color: #7eff9d; + --utrecht-calendar-navigation-label-color: #ebebeb; + --utrecht-calendar-table-days-item-day-color: #ebebeb; + --utrecht-calendar-table-days-item-day-hover-border-color: #ebebeb; + --utrecht-calendar-table-days-item-day-hover-color: #7eff9d; + --utrecht-calendar-table-days-item-day-is-today-background-color: #033b0e; + --utrecht-calendar-table-days-item-day-is-today-border-color: #71f892; + --utrecht-calendar-table-days-item-day-is-today-color: #7eff9d; + --utrecht-calendar-table-days-item-day-out-of-the-month-color: #8da7af; + --utrecht-calendar-table-days-item-day-selected-background-color: #c23d76; + --utrecht-calendar-table-days-item-day-selected-color: #9e9e9e; + --utrecht-card-background-color: #141414; + --utrecht-card-color: #b0bbbf; + --utrecht-card-heading-color: #ebebeb; + --utrecht-checkbox-active-background-color: #191e22; + --utrecht-checkbox-active-border-color: #637186; + --utrecht-checkbox-background-color: #141414; + --utrecht-checkbox-border-color: #717f83; + --utrecht-checkbox-checked-active-background-color: #6cb1f7; + --utrecht-checkbox-checked-active-color: #9e9e9e; + --utrecht-checkbox-checked-background-color: #71f892; + --utrecht-checkbox-checked-border-color: #71f892; + --utrecht-checkbox-checked-color: #7eff9d; + --utrecht-checkbox-checked-disabled-background-color: #637186; + --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: #6cb1f7; + --utrecht-checkbox-checked-hover-color: #9e9e9e; + --utrecht-checkbox-color: #9e9e9e; + --utrecht-checkbox-disabled-background-color: #717f83; + --utrecht-checkbox-disabled-border-color: #717f83; + --utrecht-checkbox-disabled-color: #96a2a6; + --utrecht-checkbox-focus-background-color: #141414; + --utrecht-checkbox-focus-border-color: #ebebeb; + --utrecht-checkbox-hover-background-color: #17171b; + --utrecht-checkbox-hover-border-color: #71f892; + --utrecht-checkbox-hover-color: #9e9e9e; + --utrecht-checkbox-indeterminate-active-background-color: #6cb1f7; + --utrecht-checkbox-indeterminate-active-color: #9e9e9e; + --utrecht-checkbox-indeterminate-background-color: #6cb1f7; + --utrecht-checkbox-indeterminate-color: #9e9e9e; + --utrecht-checkbox-indeterminate-disabled-background-color: #637186; + --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: #6cb1f7; + --utrecht-checkbox-indeterminate-hover-color: #9e9e9e; + --utrecht-checkbox-invalid-background-color: #141414; + --utrecht-checkbox-invalid-border-color: #cc2c24; + --utrecht-code-background-color: #172227; + --utrecht-code-block-background-color: #172227; + --utrecht-code-block-color: #b0bbbf; + --utrecht-code-color: #b0bbbf; + --utrecht-data-list-item-border-color: #828289; + --utrecht-data-list-item-color: #cccccc; + --utrecht-document-background-color: #141414; + --utrecht-document-color: #b0bbbf; + --utrecht-document-inverse-background-color: #accdfb; + --utrecht-document-inverse-color: #9e9e9e; + --utrecht-document-subtle-color: #8a9ab2; + --utrecht-feedback-danger-fill-background-color: #3f0503; + --utrecht-feedback-danger-fill-border-color: #cc2c24; + --utrecht-feedback-danger-fill-color: #cc2c24; + --utrecht-feedback-neutral-fill-background-color: #191e22; + --utrecht-feedback-neutral-fill-border-color: #505b6d; + --utrecht-feedback-neutral-fill-color: #9cbeee; + --utrecht-feedback-success-fill-background-color: #154d40; + --utrecht-feedback-success-fill-border-color: #69f7d9; + --utrecht-feedback-success-fill-color: #69f7d9; + --utrecht-feedback-warning-fill-background-color: #492204; + --utrecht-feedback-warning-fill-border-color: #ed7719; + --utrecht-feedback-warning-fill-color: #ed7719; + --utrecht-figure-caption-color: #7fafbd; + --utrecht-focus-outline-color: #ebebeb; + --utrecht-form-control-background-color: #141414; + --utrecht-form-control-border-color: #717f83; + --utrecht-form-control-color: #b0bbbf; + --utrecht-form-control-disabled-background-color: #172227; + --utrecht-form-control-disabled-color: #95a2a8; + --utrecht-form-control-placeholder-color: #95a2a8; + --utrecht-form-field-description-color: #8a9ab2; + --utrecht-form-field-description-invalid-color: #e06b5c; + --utrecht-form-field-description-valid-color: #91ffc3; + --utrecht-form-field-description-warning-color: #f8cb45; + --utrecht-form-field-error-message-color: #ea5a52; + --utrecht-form-field-invalid-border-inline-start-color: #df0d0d; + --utrecht-form-fieldset-legend-color: #b0bbbf; + --utrecht-form-label-color: #b0bbbf; + --utrecht-form-select-background-color: #141414; + --utrecht-form-select-color: #b0bbbf; + --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-link-active-color: #9fffcd; + --utrecht-link-color: #7eff9d; + --utrecht-link-focus-color: #9fffcd; + --utrecht-link-hover-color: #9fffcd; + --utrecht-link-text-decoration-color: #77bbff; + --utrecht-link-visited-color: #77bbff; + --utrecht-ordered-list-color: #cccccc; + --utrecht-page-footer-background-color: #71f892; + --utrecht-page-footer-color: #9e9e9e; + --utrecht-page-header-background-color: #141414; + --utrecht-page-header-color: #b0bbbf; + --utrecht-paragraph-color: #cccccc; + --utrecht-paragraph-lead-color: #cccccc; + --utrecht-paragraph-small-color: #cccccc; + --utrecht-radio-button-background-color: #141414; + --utrecht-radio-button-border-color: #717f83; + --utrecht-radio-button-checked-active-background-color: #141414; + --utrecht-radio-button-checked-active-border-color: #71f892; + --utrecht-radio-button-checked-active-color: #9e9e9e; + --utrecht-radio-button-checked-background-color: #141414; + --utrecht-radio-button-checked-border-color: #71f892; + --utrecht-radio-button-checked-color: #9e9e9e; + --utrecht-radio-button-checked-disabled-background-color: #717f83; + --utrecht-radio-button-checked-disabled-border-color: #717f83; + --utrecht-radio-button-checked-disabled-color: #96a2a6; + --utrecht-radio-button-checked-focus-background-color: #141414; + --utrecht-radio-button-checked-focus-border-color: #71f892; + --utrecht-radio-button-checked-focus-color: #9e9e9e; + --utrecht-radio-button-checked-hover-background-color: #141414; + --utrecht-radio-button-checked-hover-border-color: #ebebeb; + --utrecht-radio-button-checked-hover-color: #9e9e9e; + --utrecht-radio-button-disabled-background-color: #172227; + --utrecht-radio-button-disabled-border-color: #717f83; + --utrecht-radio-button-disabled-color: #96a2a6; + --utrecht-radio-button-focus-background-color: #141414; + --utrecht-radio-button-focus-border-color: #71f892; + --utrecht-radio-button-focus-color: #9e9e9e; + --utrecht-radio-button-hover-background-color: #141414; + --utrecht-radio-button-hover-border-color: #71f892; + --utrecht-radio-button-invalid-background-color: #141414; + --utrecht-radio-button-invalid-border-color: #df0d0d; + --utrecht-radio-button-invalid-color: #fe3e3e; + --utrecht-select-background-color: #141414; + --utrecht-select-border-color: #637186; + --utrecht-select-color: #c8dfff; + --utrecht-select-disabled-background-color: #272727; + --utrecht-select-disabled-border-color: #637186; + --utrecht-select-disabled-color: #8e9cae; + --utrecht-select-focus-background-color: #141414; + --utrecht-select-focus-border-color: #ebebeb; + --utrecht-select-focus-color: #ebebeb; + --utrecht-select-hover-background-color: #17171b; + --utrecht-select-hover-border-color: #637186; + --utrecht-select-hover-color: #c8dfff; + --utrecht-select-invalid-background-color: #141414; + --utrecht-select-invalid-border-color: #cc2c24; + --utrecht-select-invalid-color: #c8dfff; + --utrecht-separator-color: #172227; + --utrecht-skip-link-background-color: #71f892; + --utrecht-skip-link-color: #9e9e9e; + --utrecht-skip-link-focus-background-color: #45b9f5; + --utrecht-skip-link-focus-color: #77bbff; + --utrecht-spotlight-section-background-color: #0c2534; + --utrecht-spotlight-section-border-color: #16445d; + --utrecht-spotlight-section-color: #b0bbbf; + --utrecht-spotlight-section-info-background-color: #0c2534; + --utrecht-spotlight-section-info-color: #b0bbbf; + --utrecht-spotlight-section-warning-background-color: #392c05; + --utrecht-spotlight-section-warning-color: #b0bbbf; + --utrecht-table-background-color: #141414; + --utrecht-table-caption-color: #ebebeb; + --utrecht-table-data-cell-color: #cccccc; + --utrecht-table-footer-border-block-end-color: #828289; + --utrecht-table-footer-cell-color: #cccccc; + --utrecht-table-header-border-block-end-color: #a7b2b6; + --utrecht-table-header-cell-color: #b0bbbf; + --utrecht-table-header-color: #b0bbbf; + --utrecht-table-row-border-block-end-color: #313f44; + --utrecht-table-row-hover-background-color: #172227; + --utrecht-textarea-background-color: #9e9e9e; + --utrecht-textarea-border-color: #8e9cae; + --utrecht-textarea-color: #c8dfff; + --utrecht-textarea-placeholder-color: #95a2a8; + --utrecht-textbox-background-color: #9e9e9e; + --utrecht-textbox-border-color: #96a2a6; + --utrecht-textbox-color: #b0bbbf; + --utrecht-textbox-disabled-background-color: #83aab9; + --utrecht-textbox-disabled-border-color: #8e9cae; + --utrecht-textbox-disabled-color: #8e9cae; + --utrecht-textbox-focus-background-color: #9e9e9e; + --utrecht-textbox-focus-border-color: #ebebeb; + --utrecht-textbox-focus-color: #ebebeb; + --utrecht-textbox-hover-background-color: #9595a7; + --utrecht-textbox-hover-border-color: #8e9cae; + --utrecht-textbox-hover-color: #c8dfff; + --utrecht-textbox-invalid-background-color: #9e9e9e; + --utrecht-textbox-invalid-border-bottom-color: #fe3e3e; + --utrecht-textbox-invalid-border-color: #ea5a52; + --utrecht-textbox-invalid-color: #c8dfff; + --utrecht-textbox-placeholder-color: #95a2a8; + --utrecht-textbox-read-only-background-color: #9595a7; + --utrecht-textbox-read-only-border-color: #8e9cae; + --utrecht-textbox-read-only-color: #c8dfff; + --utrecht-unordered-list-color: #cccccc; + --utrecht-unordered-list-marker-border-color: #c0c0c0; + --utrecht-unordered-list-marker-color: #71f892; + --vng-color-black: #ebebeb; + --vng-color-black-txt: #a7b2b6; + --vng-color-blue-100: #03273b; + --vng-color-blue-200: #115a69; + --vng-color-blue-300: #32a1de; + --vng-color-blue-400: #45b9f5; + --vng-color-blue-500: #88c6f9; + --vng-color-extra-limegreen: #a0e63a; + --vng-color-extra-purple: #e084b5; + --vng-color-extra-yellow: #c1b10c; + --vng-color-gray-100: #1b2b30; + --vng-color-gray-200: #223337; + --vng-color-gray-300: #313f44; + --vng-color-gray-400: #414f54; + --vng-color-gray-50: #172227; + --vng-color-gray-500: #606f75; + --vng-color-gray-600: #829197; + --vng-color-gray-700: #95a2a6; + --vng-color-gray-800: #a7b2b6; + --vng-color-gray-900: #bcc5c8; + --vng-color-gray-950: #cdd4d7; + --vng-color-green-100: #1d331e; + --vng-color-green-200: #3b6e42; + --vng-color-green-300: #71f892; + --vng-color-green-400: #80f8b7; + --vng-color-orange-100: #392c05; + --vng-color-orange-200: #67520d; + --vng-color-orange-300: #f38b1a; + --vng-color-orange-400: #ee7c2a; + --vng-color-pink-100: #351222; + --vng-color-pink-200: #591f39; + --vng-color-pink-300: #c23d76; + --vng-color-pink-400: #cc5e8d; + --vng-color-red-100: #310e08; + --vng-color-red-200: #51180f; + --vng-color-red-300: #df0d0d; + --vng-color-red-400: #e72e2e; + --vng-color-white: #141414; + } +} +body[data-theme-dark], +body[data-themes*=dark] { + --ams-date-input-background-color: #141414; + --ams-date-input-border-color: #717f83; + --ams-date-input-color: #b0bbbf; + --ams-pagination-button-active-color: #77bbff; + --ams-pagination-button-color: #77bbff; + --ams-pagination-button-current-background-color: #191e22; + --ams-pagination-button-current-color: #cccccc; + --ams-pagination-button-focus-background-color: #45b9f5; + --ams-pagination-button-focus-color: #77bbff; + --ams-pagination-button-hover-color: #77bbff; + --ams-pagination-color: #77bbff; + --ams-pagination-description-color: #cccccc; + --ams-pagination-ellipses-color: #8a9ab2; + --ams-pagination-relative-link-active-color: #77bbff; + --ams-pagination-relative-link-color: #77bbff; + --ams-pagination-relative-link-disabled-color: #8e9cae; + --ams-pagination-relative-link-focus-background-color: #45b9f5; + --ams-pagination-relative-link-focus-color: #77bbff; + --ams-pagination-relative-link-hover-color: #77bbff; + --conduction-card-header-color: #b0bbbf; + --conduction-card-header-date-color: #b0bbbf; + --conduction-card-header-title-color: #7eff9d; + --conduction-card-wrapper-background-color: #141414; + --conduction-card-wrapper-border-bottom-color: #313f44; + --conduction-card-wrapper-color: #b0bbbf; + --conduction-card-wrapper-hover-border-bottom-color: #71f892; + --conduction-download-card-border-color: #313f44; + --conduction-download-card-title-color: #b0bbbf; + --conduction-input-checkbox-border-color: #717f83; + --conduction-input-checkbox-checked-border-color: #71f892; + --conduction-input-checkbox-checked-color: #7eff9d; + --conduction-input-checkbox-checked-hover-border-color: #ebebeb; + --conduction-input-checkbox-checked-hover-color: #ebebeb; + --conduction-input-checkbox-color: #9e9e9e; + --conduction-input-checkbox-disabled-border-color: #717f83; + --conduction-input-checkbox-disabled-color: #96a2a6; + --conduction-input-checkbox-disabled-hover-border-color: #717f83; + --conduction-input-checkbox-disabled-hover-color: #96a2a6; + --conduction-input-checkbox-focus-outline-color: #ebebeb; + --conduction-input-checkbox-hover-border-color: #71f892; + --conduction-input-checkbox-hover-color: #9e9e9e; + --conduction-input-checkbox-label-color: #b0bbbf; + --conduction-input-select-background-color: #141414; + --conduction-input-select-invalid-border-color: #df0d0d; + --conduction-input-select-list-option-background-color: #141414; + --conduction-input-select-list-option-focus-background-color: #141414; + --conduction-input-select-list-option-focus-color: #ebebeb; + --conduction-input-select-list-option-hover-background-color: #71f892; + --conduction-input-select-list-option-hover-color: #9e9e9e; + --conduction-input-select-list-option-selected-background-color: #71f892; + --conduction-input-select-list-option-selected-color: #9e9e9e; + --conduction-input-select-placeholder-color: #95a2a8; + --conduction-pagination-current-page-background-color: #1d331e; + --conduction-pagination-current-page-border-color: #8cf9c0; + --conduction-pagination-current-page-color: #9fffcd; + --conduction-pagination-item-background-color: #141414; + --conduction-pagination-item-border-color: #141414; + --conduction-pagination-item-color: #b0bbbf; + --conduction-pagination-navigation-button-color: #b0bbbf; + --conduction-pagination-navigation-button-disabled-color: #93a2a9; + --conduction-pagination-navigation-button-hover-color: #7eff9d; + --conduction-pagination-page-hover-background-color: #141414; + --conduction-pagination-page-hover-border-color: #71f892; + --conduction-pagination-page-hover-color: #7eff9d; + --conduction-primary-top-nav-background-color: #141414; + --conduction-primary-top-nav-color: #b0bbbf; + --conduction-primary-top-nav-current-background-color: #3cb8f5; + --conduction-primary-top-nav-current-color: #b0bbbf; + --conduction-primary-top-nav-dropdown-background-color: #71f892; + --conduction-primary-top-nav-dropdown-color: #9e9e9e; + --conduction-primary-top-nav-dropdown-current-background-color: #ebebeb; + --conduction-primary-top-nav-dropdown-current-color: #9e9e9e; + --conduction-primary-top-nav-dropdown-hover-background-color: #ebebeb; + --conduction-primary-top-nav-dropdown-hover-color: #9e9e9e; + --conduction-primary-top-nav-hover-background-color: #141414; + --conduction-primary-top-nav-hover-color: #7eff9d; + --conduction-secondary-top-nav-color: #b0bbbf; + --conduction-secondary-top-nav-current-color: #b0bbbf; + --conduction-secondary-top-nav-hover-background-color: #71f892; + --conduction-secondary-top-nav-hover-color: #9e9e9e; + --conduction-table-wrapper-scroll-button-background-color: #141414; + --conduction-table-wrapper-scroll-button-color: #b0bbbf; + --conduction-table-wrapper-scroll-button-hover-background-color: #141414; + --conduction-table-wrapper-scroll-button-hover-color: #7eff9d; + --conduction-tabs-scroll-button-background-color: #141414; + --conduction-tabs-scroll-button-color: #b0bbbf; + --conduction-tabs-scroll-button-hover-background-color: #141414; + --conduction-tabs-scroll-button-hover-color: #7eff9d; + --conduction-tabs-tab-color: #b0bbbf; + --conduction-tabs-tab-hover-color: #7eff9d; + --conduction-tabs-tab-list-border-bottom-color: #172227; + --conduction-tabs-tab-selected-border-bottom-color: #71f892; + --conduction-tabs-tab-selected-color: #b0bbbf; + --conduction-tabs-tab-selected-hover-color: #9ad2ff; + --conduction-tooltip-background-color: #ebebeb; + --conduction-tooltip-color: #9e9e9e; + --denhaag-process-steps-step-content-color: #89a0c0; + --denhaag-process-steps-step-heading-color: #b0bbbf; + --denhaag-process-steps-step-heading-current-color: #6eb0fc; + --denhaag-process-steps-step-heading-error-color: #ea5a52; + --denhaag-process-steps-step-heading-warning-color: #fa9442; + --denhaag-sidenav-link-active-color: #77bbff; + --denhaag-sidenav-link-color: #b0bbbf; + --denhaag-sidenav-link-hover-color: #77bbff; + --denhaag-step-marker-background-color: #141414; + --denhaag-step-marker-checked-background-color: #192f1e; + --denhaag-step-marker-checked-border-color: #7cf7db; + --denhaag-step-marker-checked-color: #71f892; + --denhaag-step-marker-color: #ebebeb; + --denhaag-step-marker-connector-checked-outline-color: #7cf7db; + --denhaag-step-marker-connector-default-outline-color: #22262e; + --denhaag-step-marker-connector-error-outline-color: #cc2c24; + --denhaag-step-marker-connector-not-checked-outline-color: #22262e; + --denhaag-step-marker-connector-warning-outline-color: #ed7719; + --denhaag-step-marker-current-background-color: #0c2534; + --denhaag-step-marker-current-border-color: #65a7f4; + --denhaag-step-marker-current-color: #32a1de; + --denhaag-step-marker-current-nested-color: #65a7f4; + --denhaag-step-marker-default-background-color: #22262e; + --denhaag-step-marker-default-border-color: #22262e; + --denhaag-step-marker-default-color: #141414; + --denhaag-step-marker-default-nested-color: #22262e; + --denhaag-step-marker-disabled-background-color: #191e22; + --denhaag-step-marker-disabled-border-color: #191e22; + --denhaag-step-marker-disabled-color: #505b6d; + --denhaag-step-marker-error-background-color: #310e08; + --denhaag-step-marker-error-border-color: #cc2c24; + --denhaag-step-marker-error-color: #df0d0d; + --denhaag-step-marker-not-checked-background-color: #141414; + --denhaag-step-marker-not-checked-border-color: #22262e; + --denhaag-step-marker-not-checked-color: #ebebeb; + --denhaag-step-marker-warning-background-color: #392c05; + --denhaag-step-marker-warning-border-color: #ed7719; + --denhaag-step-marker-warning-color: #c1b10c; + --denhaag-step-marker-warning-nested-background-color: #141414; + --denhaag-step-marker-warning-nested-border-color: #ed7719; + --nldesign-color-background: #141414; + --nldesign-color-background-dark: #1b2b30; + --nldesign-color-background-darker: #223337; + --nldesign-color-background-hover: #172227; + --nldesign-color-border: #313f44; + --nldesign-color-border-dark: #717f83; + --nldesign-color-button-primary-background: #c23d76; + --nldesign-color-button-primary-border: #c23d76; + --nldesign-color-button-primary-hover: #cc5e8d; + --nldesign-color-button-primary-text: #9e9e9e; + --nldesign-color-error: #e72e2e; + --nldesign-color-error-hover: #e76060; + --nldesign-color-error-rgb: 231, 46, 46; + --nldesign-color-favorite: #f38b1a; + --nldesign-color-focus: #45b9f5; + --nldesign-color-focus-rgb: 69, 185, 245; + --nldesign-color-header-background: #141414; + --nldesign-color-header-text: #b0bbbf; + --nldesign-color-info: #45b9f5; + --nldesign-color-info-rgb: 69, 185, 245; + --nldesign-color-link: #71f892; + --nldesign-color-link-hover: #80f8b7; + --nldesign-color-link-visited: #e084b5; + --nldesign-color-nav-background: #141414; + --nldesign-color-placeholder-dark: #313f44; + --nldesign-color-placeholder-light: #1b2b30; + --nldesign-color-primary: #00811f; + --nldesign-color-primary-hover: #006e32; + --nldesign-color-primary-light: #1d331e; + --nldesign-color-primary-light-hover: #3b6e42; + --nldesign-color-primary-text: #fefefe; + --nldesign-color-success: #71f892; + --nldesign-color-success-rgb: 113, 248, 146; + --nldesign-color-text: #b0bbbf; + --nldesign-color-text-light: #9e9e9e; + --nldesign-color-text-muted: #95a2a8; + --nldesign-color-warning: #ee7c2a; + --nldesign-color-warning-rgb: 238, 124, 42; + --nldesign-component-badge-background-color: #71f892; + --nldesign-component-badge-color: #9e9e9e; + --nldesign-component-button-active-background-color: #3b6e42; + --nldesign-component-button-active-color: #7eff9d; + --nldesign-component-button-border-color: #71f892; + --nldesign-component-button-color: #7eff9d; + --nldesign-component-button-disabled-background-color: #2a2a2a; + --nldesign-component-button-disabled-border-color: #535353; + --nldesign-component-button-disabled-color: #9e9e9e; + --nldesign-component-button-focus-border-color: #45b9f5; + --nldesign-component-button-hover-background-color: #1d331e; + --nldesign-component-button-hover-border-color: #80f8b7; + --nldesign-component-button-hover-color: #7eff9d; + --nldesign-component-button-primary-action-background-color: #71f892; + --nldesign-component-button-primary-action-border-color: #71f892; + --nldesign-component-button-primary-action-color: #9e9e9e; + --nldesign-component-button-primary-action-hover-background-color: #80f8b7; + --nldesign-component-button-primary-action-hover-color: #9e9e9e; + --nldesign-component-button-secondary-action-border-color: #71f892; + --nldesign-component-button-secondary-action-color: #7eff9d; + --nldesign-component-button-secondary-action-hover-background-color: #1d331e; + --nldesign-component-form-field-label-color: #b0bbbf; + --nldesign-component-form-fieldset-border-color: #313f44; + --nldesign-component-form-select-border-color: #313f44; + --nldesign-component-form-select-focus-border-color: #45b9f5; + --nldesign-component-heading-1-color: #b0bbbf; + --nldesign-component-heading-2-color: #b0bbbf; + --nldesign-component-heading-3-color: #b0bbbf; + --nldesign-component-heading-4-color: #b0bbbf; + --nldesign-component-heading-5-color: #b0bbbf; + --nldesign-component-heading-6-color: #b0bbbf; + --nldesign-component-link-color: #7eff9d; + --nldesign-component-link-hover-color: #91ffc3; + --nldesign-component-link-visited-color: #e88fbf; + --nldesign-component-ordered-list-color: #b0bbbf; + --nldesign-component-paragraph-color: #b0bbbf; + --nldesign-component-separator-border-color: #313f44; + --nldesign-component-table-border-color: #313f44; + --nldesign-component-table-header-background-color: #1b2b30; + --nldesign-component-table-header-color: #b0bbbf; + --nldesign-component-table-row-hover-background-color: #172227; + --nldesign-component-textbox-background-color: #9e9e9e; + --nldesign-component-textbox-border-color: #8da7af; + --nldesign-component-textbox-color: #b0bbbf; + --nldesign-component-textbox-disabled-background-color: #9e9e9e; + --nldesign-component-textbox-disabled-color: #9e9e9e; + --nldesign-component-textbox-focus-border-color: #47c0ff; + --nldesign-component-textbox-hover-border-color: #96a2a6; + --nldesign-component-textbox-invalid-border-color: #f44848; + --nldesign-component-unordered-list-color: #b0bbbf; + --opencatalogi-color-base-black: #ebebeb; + --opencatalogi-color-base-gray: #172227; + --opencatalogi-color-base-green: #71f892; + --opencatalogi-color-base-magenta: #c23d76; + --opencatalogi-color-base-white: #141414; + --opencatalogi-color-blue-tint-01: #32a1de; + --opencatalogi-color-blue-tint-02: #3cb8f5; + --opencatalogi-color-blue-tint-03: #45b9f5; + --opencatalogi-color-bright-orange-tint-01: #f38b1a; + --opencatalogi-color-bright-orange-tint-02: #f18522; + --opencatalogi-color-bright-orange-tint-03: #ee7c2a; + --opencatalogi-color-brown-tint-01: #9c7558; + --opencatalogi-color-brown-tint-02: #a57f68; + --opencatalogi-color-brown-tint-03: #ad8973; + --opencatalogi-color-dark-blue-tint-01: #66bbf7; + --opencatalogi-color-dark-blue-tint-02: #7ab6ef; + --opencatalogi-color-dark-blue-tint-03: #88bdf0; + --opencatalogi-color-dark-brown-tint-01: #c1998d; + --opencatalogi-color-dark-brown-tint-02: #caa197; + --opencatalogi-color-dark-brown-tint-03: #d1a69e; + --opencatalogi-color-dark-green-tint-01: #9cfad8; + --opencatalogi-color-dark-green-tint-02: #b3f1ce; + --opencatalogi-color-dark-green-tint-03: #c4fccf; + --opencatalogi-color-dark-yellow-tint-01: #f3c01b; + --opencatalogi-color-dark-yellow-tint-02: #f4bb25; + --opencatalogi-color-dark-yellow-tint-03: #f4b62b; + --opencatalogi-color-gray-tint-01: #172227; + --opencatalogi-color-gray-tint-02: #1b2b30; + --opencatalogi-color-gray-tint-03: #223337; + --opencatalogi-color-gray-tint-04: #313f44; + --opencatalogi-color-gray-tint-05: #414f54; + --opencatalogi-color-gray-tint-06: #506268; + --opencatalogi-color-gray-tint-07: #606f75; + --opencatalogi-color-gray-tint-08: #717f83; + --opencatalogi-color-gray-tint-09: #829197; + --opencatalogi-color-gray-tint-10: #95a2a6; + --opencatalogi-color-gray-tint-11: #a7b2b6; + --opencatalogi-color-green-blue-tint-01: #63edd4; + --opencatalogi-color-green-blue-tint-02: #6ff7e0; + --opencatalogi-color-green-blue-tint-03: #7bf8e1; + --opencatalogi-color-green-light-tint-01: #59a954; + --opencatalogi-color-green-light-tint-02: #5be587; + --opencatalogi-color-green-light-tint-03: #5be587; + --opencatalogi-color-green-tint-01: #71f892; + --opencatalogi-color-green-tint-02: #80f8b7; + --opencatalogi-color-green-tint-03: #8cf9c0; + --opencatalogi-color-light-blue-tint-01: #115a69; + --opencatalogi-color-light-blue-tint-02: #266577; + --opencatalogi-color-light-blue-tint-03: #347c8d; + --opencatalogi-color-lime-green-tint-01: #a0e63a; + --opencatalogi-color-lime-green-tint-02: #95ce50; + --opencatalogi-color-lime-green-tint-03: #8ccc59; + --opencatalogi-color-magenta-tint-01: #c23d76; + --opencatalogi-color-magenta-tint-02: #cc5e8d; + --opencatalogi-color-magenta-tint-03: #d77ea4; + --opencatalogi-color-orange-tint-01: #b13825; + --opencatalogi-color-orange-tint-02: #b7402f; + --opencatalogi-color-orange-tint-03: #be4839; + --opencatalogi-color-pink-tint-01: #f32194; + --opencatalogi-color-pink-tint-02: #f434a1; + --opencatalogi-color-pink-tint-03: #e44da6; + --opencatalogi-color-purple-tint-01: #e084b5; + --opencatalogi-color-purple-tint-02: #e99cc7; + --opencatalogi-color-purple-tint-03: #eba9d4; + --opencatalogi-color-red-tint-01: #df0d0d; + --opencatalogi-color-red-tint-02: #e72e2e; + --opencatalogi-color-red-tint-03: #e76060; + --opencatalogi-color-soft-green-tint-01: #1d331e; + --opencatalogi-color-soft-green-tint-02: #284324; + --opencatalogi-color-soft-green-tint-03: #3b6e42; + --opencatalogi-color-yellow-tint-01: #c1b10c; + --opencatalogi-color-yellow-tint-02: #d2c41c; + --opencatalogi-color-yellow-tint-03: #f4e925; + --tilburg-color-black: #ebebeb; + --tilburg-color-black-txt: #c0c0c0; + --tilburg-color-blue-100: #03273b; + --tilburg-color-blue-200: #093f5d; + --tilburg-color-blue-300: #2abbf4; + --tilburg-color-blue-400: #61c4f5; + --tilburg-color-blue-500: #88c6f9; + --tilburg-color-code-background-color: #172227; + --tilburg-color-extra-limegreen: #85ba40; + --tilburg-color-extra-purple: #8c6cc7; + --tilburg-color-extra-yellow: #d3b70f; + --tilburg-color-gray-100: #191e22; + --tilburg-color-gray-200: #22262e; + --tilburg-color-gray-300: #2e363f; + --tilburg-color-gray-400: #505b6d; + --tilburg-color-gray-50: #17171b; + --tilburg-color-gray-500: #637186; + --tilburg-color-gray-600: #7586a0; + --tilburg-color-gray-700: #849ab9; + --tilburg-color-gray-800: #90aacf; + --tilburg-color-gray-900: #9cbeee; + --tilburg-color-gray-950: #accdfb; + --tilburg-color-green-100: #154d40; + --tilburg-color-green-200: #3d7e70; + --tilburg-color-green-300: #69f7d9; + --tilburg-color-green-400: #7cf7db; + --tilburg-color-orange-100: #492204; + --tilburg-color-orange-200: #92470c; + --tilburg-color-orange-300: #ed7719; + --tilburg-color-orange-400: #f3862f; + --tilburg-color-pink-100: #390322; + --tilburg-color-pink-200: #5f113b; + --tilburg-color-pink-300: #f5399e; + --tilburg-color-pink-400: #f655ac; + --tilburg-color-red-100: #3f0503; + --tilburg-color-red-200: #66140f; + --tilburg-color-red-300: #cc2c24; + --tilburg-color-red-400: #e34a42; + --tilburg-color-white: #141414; + --tilburg-document-background-color: #141414; + --tilburg-document-color: #cccccc; + --tilburg-document-inverse-background-color: #accdfb; + --tilburg-document-inverse-color: #9e9e9e; + --tilburg-document-subtle-color: #8a9ab2; + --tilburg-feedback-informative-background-color: #03273b; + --tilburg-feedback-informative-border-color: #61c4f5; + --tilburg-feedback-informative-color: #69ccfd; + --tilburg-feedback-negative-background-color: #3f0503; + --tilburg-feedback-negative-border-color: #cc2c24; + --tilburg-feedback-negative-color: #ea5a52; + --tilburg-feedback-positive-background-color: #154d40; + --tilburg-feedback-positive-border-color: #69f7d9; + --tilburg-feedback-positive-color: #74ffe1; + --tilburg-feedback-warning-background-color: #492204; + --tilburg-feedback-warning-border-color: #92470c; + --tilburg-feedback-warning-color: #fa9442; + --tilburg-focus-background-color: #45b9f5; + --tilburg-focus-color: #77bbff; + --tilburg-focus-inverse-outline-color: #141414; + --tilburg-focus-outline-color: #8c6cc7; + --tilburg-footer-background-color: #71f892; + --tilburg-footer-color: #9e9e9e; + --tilburg-form-control-accent-color: #6cb1f7; + --tilburg-form-control-active-accent-color: #6cb1f7; + --tilburg-form-control-active-background-color: #191e22; + --tilburg-form-control-active-border-color: #637186; + --tilburg-form-control-active-color: #c8dfff; + --tilburg-form-control-background-color: #141414; + --tilburg-form-control-border-color: #637186; + --tilburg-form-control-color: #c8dfff; + --tilburg-form-control-disabled-accent-color: #637186; + --tilburg-form-control-disabled-background-color: #17171b; + --tilburg-form-control-disabled-border-color: #637186; + --tilburg-form-control-disabled-color: #8e9cae; + --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: #6cb1f7; + --tilburg-form-control-hover-background-color: #17171b; + --tilburg-form-control-hover-border-color: #637186; + --tilburg-form-control-hover-color: #c8dfff; + --tilburg-form-control-invalid-background-color: #141414; + --tilburg-form-control-invalid-border-color: #cc2c24; + --tilburg-form-control-invalid-color: #ea5a52; + --tilburg-form-control-placeholder-color: #8a9ab2; + --tilburg-form-control-read-only-background-color: #17171b; + --tilburg-form-control-read-only-border-color: #637186; + --tilburg-form-control-read-only-color: #c8dfff; + --tilburg-header-background-color: #141414; + --tilburg-heading-color: #ebebeb; + --tilburg-interaction-active-color: #77bbff; + --tilburg-interaction-color: #77bbff; + --tilburg-interaction-hover-color: #77bbff; + --tilburg-line-border-color: #828289; + --tilburg-logo-color: #b0bbbf; + --tilburg-navigation-background-color: #141414; + --tilburg-navigation-color: #b0bbbf; + --tilburg-navigation-hover-background-color: #141414; + --tilburg-navigation-hover-color: #7eff9d; + --tilburg-navigation-mobile-background-color: #61c4f5; + --tilburg-navigation-mobile-item-border-bottom-color: #2abbf4; + --tilburg-search-card-border-color: #22262e; + --tilburg-search-card-hover-border-color: #71f892; + --tilburg-status-badge-background-color: #390322; + --tilburg-status-badge-color: #cccccc; + --tilburg-status-badge-informative-background-color: #03273b; + --tilburg-status-badge-informative-color: #69ccfd; + --tilburg-status-badge-negative-background-color: #3f0503; + --tilburg-status-badge-negative-color: #ea5a52; + --tilburg-status-badge-positive-background-color: #154d40; + --tilburg-status-badge-positive-color: #74ffe1; + --tilburg-status-badge-warning-background-color: #492204; + --tilburg-status-badge-warning-color: #fa9442; + --utrecht-accordion-button-active-background-color: #22262e; + --utrecht-accordion-button-active-color: #77bbff; + --utrecht-accordion-button-background-color: #17171b; + --utrecht-accordion-button-color: #77bbff; + --utrecht-accordion-button-expanded-background-color: #17171b; + --utrecht-accordion-button-expanded-color: #77bbff; + --utrecht-accordion-button-focus-background-color: #45b9f5; + --utrecht-accordion-button-focus-color: #77bbff; + --utrecht-accordion-button-hover-background-color: #191e22; + --utrecht-accordion-button-hover-color: #77bbff; + --utrecht-accordion-section-border-color: #828289; + --utrecht-alert-background-color: #0c2534; + --utrecht-alert-border-color: #16445d; + --utrecht-alert-color: #b0bbbf; + --utrecht-alert-error-background-color: #310e08; + --utrecht-alert-error-border-color: #51180f; + --utrecht-alert-error-color: #b0bbbf; + --utrecht-alert-icon-color: #61c9ff; + --utrecht-alert-icon-error-color: #f44848; + --utrecht-alert-icon-info-color: #9ad2ff; + --utrecht-alert-icon-informative-color: #69ccfd; + --utrecht-alert-icon-negative-color: #ea5a52; + --utrecht-alert-icon-ok-color: #7eff9d; + --utrecht-alert-icon-positive-color: #74ffe1; + --utrecht-alert-icon-warning-color: #ffaf59; + --utrecht-alert-info-background-color: #03273b; + --utrecht-alert-info-border-color: #2abbf4; + --utrecht-alert-info-color: #9ad2ff; + --utrecht-alert-informative-background-color: #03273b; + --utrecht-alert-informative-border-color: #61c4f5; + --utrecht-alert-informative-color: #cccccc; + --utrecht-alert-negative-background-color: #3f0503; + --utrecht-alert-negative-border-color: #cc2c24; + --utrecht-alert-negative-color: #cccccc; + --utrecht-alert-ok-background-color: #192f1e; + --utrecht-alert-ok-border-color: #325f3e; + --utrecht-alert-ok-color: #b0bbbf; + --utrecht-alert-positive-background-color: #154d40; + --utrecht-alert-positive-border-color: #69f7d9; + --utrecht-alert-positive-color: #cccccc; + --utrecht-alert-warning-background-color: #392c05; + --utrecht-alert-warning-border-color: #67520d; + --utrecht-alert-warning-color: #b0bbbf; + --utrecht-badge-background-color: #ebebeb; + --utrecht-badge-color: #9e9e9e; + --utrecht-badge-counter-background-color: #ebebeb; + --utrecht-badge-counter-color: #9e9e9e; + --utrecht-breadcrumb-nav-divider-color: #7586a0; + --utrecht-breadcrumb-nav-link-active-color: #77bbff; + --utrecht-breadcrumb-nav-link-color: #7eff9d; + --utrecht-breadcrumb-nav-link-current-color: #95a2a8; + --utrecht-breadcrumb-nav-link-disabled-color: #95a2a8; + --utrecht-breadcrumb-nav-link-focus-background-color: #45b9f5; + --utrecht-breadcrumb-nav-link-focus-color: #77bbff; + --utrecht-breadcrumb-nav-link-hover-color: #7eff9d; + --utrecht-breadcrumb-nav-separator-color: #71f892; + --utrecht-button-active-background-color: #191e22; + --utrecht-button-active-border-color: #6cb1f7; + --utrecht-button-active-color: #77bbff; + --utrecht-button-background-color: #71f892; + --utrecht-button-border-color: #9cbeee; + --utrecht-button-color: #9e9e9e; + --utrecht-button-disabled-background-color: #313f44; + --utrecht-button-disabled-color: #95a2a8; + --utrecht-button-focus-background-color: #45b9f5; + --utrecht-button-focus-border-color: #ebebeb; + --utrecht-button-focus-color: #77bbff; + --utrecht-button-hover-background-color: #80f8b7; + --utrecht-button-hover-border-color: #6cb1f7; + --utrecht-button-hover-color: #77bbff; + --utrecht-button-primary-action-active-background-color: #6cb1f7; + --utrecht-button-primary-action-active-color: #9e9e9e; + --utrecht-button-primary-action-background-color: #c23d76; + --utrecht-button-primary-action-color: #9e9e9e; + --utrecht-button-primary-action-disabled-background-color: #17171b; + --utrecht-button-primary-action-disabled-color: #8e9cae; + --utrecht-button-primary-action-focus-background-color: #45b9f5; + --utrecht-button-primary-action-focus-color: #77bbff; + --utrecht-button-primary-action-hover-background-color: #cc5e8d; + --utrecht-button-primary-action-hover-color: #9e9e9e; + --utrecht-button-secondary-action-active-background-color: #191e22; + --utrecht-button-secondary-action-active-border-color: #6cb1f7; + --utrecht-button-secondary-action-active-color: #77bbff; + --utrecht-button-secondary-action-background-color: #ebebeb; + --utrecht-button-secondary-action-border-color: #6cb1f7; + --utrecht-button-secondary-action-color: #9e9e9e; + --utrecht-button-secondary-action-disabled-background-color: #17171b; + --utrecht-button-secondary-action-disabled-color: #8e9cae; + --utrecht-button-secondary-action-focus-background-color: #45b9f5; + --utrecht-button-secondary-action-focus-color: #77bbff; + --utrecht-button-secondary-action-hover-background-color: #a7b2b6; + --utrecht-button-secondary-action-hover-color: #77bbff; + --utrecht-button-subtle-active-color: #77bbff; + --utrecht-button-subtle-background-color: #141414; + --utrecht-button-subtle-color: #7eff9d; + --utrecht-button-subtle-disabled-background-color: #313f44; + --utrecht-button-subtle-disabled-color: #95a2a8; + --utrecht-button-subtle-focus-background-color: #45b9f5; + --utrecht-button-subtle-focus-color: #77bbff; + --utrecht-button-subtle-hover-color: #9fffcd; + --utrecht-calendar-navigation-color: #7eff9d; + --utrecht-calendar-navigation-label-color: #ebebeb; + --utrecht-calendar-table-days-item-day-color: #ebebeb; + --utrecht-calendar-table-days-item-day-hover-border-color: #ebebeb; + --utrecht-calendar-table-days-item-day-hover-color: #7eff9d; + --utrecht-calendar-table-days-item-day-is-today-background-color: #033b0e; + --utrecht-calendar-table-days-item-day-is-today-border-color: #71f892; + --utrecht-calendar-table-days-item-day-is-today-color: #7eff9d; + --utrecht-calendar-table-days-item-day-out-of-the-month-color: #8da7af; + --utrecht-calendar-table-days-item-day-selected-background-color: #c23d76; + --utrecht-calendar-table-days-item-day-selected-color: #9e9e9e; + --utrecht-card-background-color: #141414; + --utrecht-card-color: #b0bbbf; + --utrecht-card-heading-color: #ebebeb; + --utrecht-checkbox-active-background-color: #191e22; + --utrecht-checkbox-active-border-color: #637186; + --utrecht-checkbox-background-color: #141414; + --utrecht-checkbox-border-color: #717f83; + --utrecht-checkbox-checked-active-background-color: #6cb1f7; + --utrecht-checkbox-checked-active-color: #9e9e9e; + --utrecht-checkbox-checked-background-color: #71f892; + --utrecht-checkbox-checked-border-color: #71f892; + --utrecht-checkbox-checked-color: #7eff9d; + --utrecht-checkbox-checked-disabled-background-color: #637186; + --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: #6cb1f7; + --utrecht-checkbox-checked-hover-color: #9e9e9e; + --utrecht-checkbox-color: #9e9e9e; + --utrecht-checkbox-disabled-background-color: #717f83; + --utrecht-checkbox-disabled-border-color: #717f83; + --utrecht-checkbox-disabled-color: #96a2a6; + --utrecht-checkbox-focus-background-color: #141414; + --utrecht-checkbox-focus-border-color: #ebebeb; + --utrecht-checkbox-hover-background-color: #17171b; + --utrecht-checkbox-hover-border-color: #71f892; + --utrecht-checkbox-hover-color: #9e9e9e; + --utrecht-checkbox-indeterminate-active-background-color: #6cb1f7; + --utrecht-checkbox-indeterminate-active-color: #9e9e9e; + --utrecht-checkbox-indeterminate-background-color: #6cb1f7; + --utrecht-checkbox-indeterminate-color: #9e9e9e; + --utrecht-checkbox-indeterminate-disabled-background-color: #637186; + --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: #6cb1f7; + --utrecht-checkbox-indeterminate-hover-color: #9e9e9e; + --utrecht-checkbox-invalid-background-color: #141414; + --utrecht-checkbox-invalid-border-color: #cc2c24; + --utrecht-code-background-color: #172227; + --utrecht-code-block-background-color: #172227; + --utrecht-code-block-color: #b0bbbf; + --utrecht-code-color: #b0bbbf; + --utrecht-data-list-item-border-color: #828289; + --utrecht-data-list-item-color: #cccccc; + --utrecht-document-background-color: #141414; + --utrecht-document-color: #b0bbbf; + --utrecht-document-inverse-background-color: #accdfb; + --utrecht-document-inverse-color: #9e9e9e; + --utrecht-document-subtle-color: #8a9ab2; + --utrecht-feedback-danger-fill-background-color: #3f0503; + --utrecht-feedback-danger-fill-border-color: #cc2c24; + --utrecht-feedback-danger-fill-color: #cc2c24; + --utrecht-feedback-neutral-fill-background-color: #191e22; + --utrecht-feedback-neutral-fill-border-color: #505b6d; + --utrecht-feedback-neutral-fill-color: #9cbeee; + --utrecht-feedback-success-fill-background-color: #154d40; + --utrecht-feedback-success-fill-border-color: #69f7d9; + --utrecht-feedback-success-fill-color: #69f7d9; + --utrecht-feedback-warning-fill-background-color: #492204; + --utrecht-feedback-warning-fill-border-color: #ed7719; + --utrecht-feedback-warning-fill-color: #ed7719; + --utrecht-figure-caption-color: #7fafbd; + --utrecht-focus-outline-color: #ebebeb; + --utrecht-form-control-background-color: #141414; + --utrecht-form-control-border-color: #717f83; + --utrecht-form-control-color: #b0bbbf; + --utrecht-form-control-disabled-background-color: #172227; + --utrecht-form-control-disabled-color: #95a2a8; + --utrecht-form-control-placeholder-color: #95a2a8; + --utrecht-form-field-description-color: #8a9ab2; + --utrecht-form-field-description-invalid-color: #e06b5c; + --utrecht-form-field-description-valid-color: #91ffc3; + --utrecht-form-field-description-warning-color: #f8cb45; + --utrecht-form-field-error-message-color: #ea5a52; + --utrecht-form-field-invalid-border-inline-start-color: #df0d0d; + --utrecht-form-fieldset-legend-color: #b0bbbf; + --utrecht-form-label-color: #b0bbbf; + --utrecht-form-select-background-color: #141414; + --utrecht-form-select-color: #b0bbbf; + --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-link-active-color: #9fffcd; + --utrecht-link-color: #7eff9d; + --utrecht-link-focus-color: #9fffcd; + --utrecht-link-hover-color: #9fffcd; + --utrecht-link-text-decoration-color: #77bbff; + --utrecht-link-visited-color: #77bbff; + --utrecht-ordered-list-color: #cccccc; + --utrecht-page-footer-background-color: #71f892; + --utrecht-page-footer-color: #9e9e9e; + --utrecht-page-header-background-color: #141414; + --utrecht-page-header-color: #b0bbbf; + --utrecht-paragraph-color: #cccccc; + --utrecht-paragraph-lead-color: #cccccc; + --utrecht-paragraph-small-color: #cccccc; + --utrecht-radio-button-background-color: #141414; + --utrecht-radio-button-border-color: #717f83; + --utrecht-radio-button-checked-active-background-color: #141414; + --utrecht-radio-button-checked-active-border-color: #71f892; + --utrecht-radio-button-checked-active-color: #9e9e9e; + --utrecht-radio-button-checked-background-color: #141414; + --utrecht-radio-button-checked-border-color: #71f892; + --utrecht-radio-button-checked-color: #9e9e9e; + --utrecht-radio-button-checked-disabled-background-color: #717f83; + --utrecht-radio-button-checked-disabled-border-color: #717f83; + --utrecht-radio-button-checked-disabled-color: #96a2a6; + --utrecht-radio-button-checked-focus-background-color: #141414; + --utrecht-radio-button-checked-focus-border-color: #71f892; + --utrecht-radio-button-checked-focus-color: #9e9e9e; + --utrecht-radio-button-checked-hover-background-color: #141414; + --utrecht-radio-button-checked-hover-border-color: #ebebeb; + --utrecht-radio-button-checked-hover-color: #9e9e9e; + --utrecht-radio-button-disabled-background-color: #172227; + --utrecht-radio-button-disabled-border-color: #717f83; + --utrecht-radio-button-disabled-color: #96a2a6; + --utrecht-radio-button-focus-background-color: #141414; + --utrecht-radio-button-focus-border-color: #71f892; + --utrecht-radio-button-focus-color: #9e9e9e; + --utrecht-radio-button-hover-background-color: #141414; + --utrecht-radio-button-hover-border-color: #71f892; + --utrecht-radio-button-invalid-background-color: #141414; + --utrecht-radio-button-invalid-border-color: #df0d0d; + --utrecht-radio-button-invalid-color: #fe3e3e; + --utrecht-select-background-color: #141414; + --utrecht-select-border-color: #637186; + --utrecht-select-color: #c8dfff; + --utrecht-select-disabled-background-color: #272727; + --utrecht-select-disabled-border-color: #637186; + --utrecht-select-disabled-color: #8e9cae; + --utrecht-select-focus-background-color: #141414; + --utrecht-select-focus-border-color: #ebebeb; + --utrecht-select-focus-color: #ebebeb; + --utrecht-select-hover-background-color: #17171b; + --utrecht-select-hover-border-color: #637186; + --utrecht-select-hover-color: #c8dfff; + --utrecht-select-invalid-background-color: #141414; + --utrecht-select-invalid-border-color: #cc2c24; + --utrecht-select-invalid-color: #c8dfff; + --utrecht-separator-color: #172227; + --utrecht-skip-link-background-color: #71f892; + --utrecht-skip-link-color: #9e9e9e; + --utrecht-skip-link-focus-background-color: #45b9f5; + --utrecht-skip-link-focus-color: #77bbff; + --utrecht-spotlight-section-background-color: #0c2534; + --utrecht-spotlight-section-border-color: #16445d; + --utrecht-spotlight-section-color: #b0bbbf; + --utrecht-spotlight-section-info-background-color: #0c2534; + --utrecht-spotlight-section-info-color: #b0bbbf; + --utrecht-spotlight-section-warning-background-color: #392c05; + --utrecht-spotlight-section-warning-color: #b0bbbf; + --utrecht-table-background-color: #141414; + --utrecht-table-caption-color: #ebebeb; + --utrecht-table-data-cell-color: #cccccc; + --utrecht-table-footer-border-block-end-color: #828289; + --utrecht-table-footer-cell-color: #cccccc; + --utrecht-table-header-border-block-end-color: #a7b2b6; + --utrecht-table-header-cell-color: #b0bbbf; + --utrecht-table-header-color: #b0bbbf; + --utrecht-table-row-border-block-end-color: #313f44; + --utrecht-table-row-hover-background-color: #172227; + --utrecht-textarea-background-color: #9e9e9e; + --utrecht-textarea-border-color: #8e9cae; + --utrecht-textarea-color: #c8dfff; + --utrecht-textarea-placeholder-color: #95a2a8; + --utrecht-textbox-background-color: #9e9e9e; + --utrecht-textbox-border-color: #96a2a6; + --utrecht-textbox-color: #b0bbbf; + --utrecht-textbox-disabled-background-color: #83aab9; + --utrecht-textbox-disabled-border-color: #8e9cae; + --utrecht-textbox-disabled-color: #8e9cae; + --utrecht-textbox-focus-background-color: #9e9e9e; + --utrecht-textbox-focus-border-color: #ebebeb; + --utrecht-textbox-focus-color: #ebebeb; + --utrecht-textbox-hover-background-color: #9595a7; + --utrecht-textbox-hover-border-color: #8e9cae; + --utrecht-textbox-hover-color: #c8dfff; + --utrecht-textbox-invalid-background-color: #9e9e9e; + --utrecht-textbox-invalid-border-bottom-color: #fe3e3e; + --utrecht-textbox-invalid-border-color: #ea5a52; + --utrecht-textbox-invalid-color: #c8dfff; + --utrecht-textbox-placeholder-color: #95a2a8; + --utrecht-textbox-read-only-background-color: #9595a7; + --utrecht-textbox-read-only-border-color: #8e9cae; + --utrecht-textbox-read-only-color: #c8dfff; + --utrecht-unordered-list-color: #cccccc; + --utrecht-unordered-list-marker-border-color: #c0c0c0; + --utrecht-unordered-list-marker-color: #71f892; + --vng-color-black: #ebebeb; + --vng-color-black-txt: #a7b2b6; + --vng-color-blue-100: #03273b; + --vng-color-blue-200: #115a69; + --vng-color-blue-300: #32a1de; + --vng-color-blue-400: #45b9f5; + --vng-color-blue-500: #88c6f9; + --vng-color-extra-limegreen: #a0e63a; + --vng-color-extra-purple: #e084b5; + --vng-color-extra-yellow: #c1b10c; + --vng-color-gray-100: #1b2b30; + --vng-color-gray-200: #223337; + --vng-color-gray-300: #313f44; + --vng-color-gray-400: #414f54; + --vng-color-gray-50: #172227; + --vng-color-gray-500: #606f75; + --vng-color-gray-600: #829197; + --vng-color-gray-700: #95a2a6; + --vng-color-gray-800: #a7b2b6; + --vng-color-gray-900: #bcc5c8; + --vng-color-gray-950: #cdd4d7; + --vng-color-green-100: #1d331e; + --vng-color-green-200: #3b6e42; + --vng-color-green-300: #71f892; + --vng-color-green-400: #80f8b7; + --vng-color-orange-100: #392c05; + --vng-color-orange-200: #67520d; + --vng-color-orange-300: #f38b1a; + --vng-color-orange-400: #ee7c2a; + --vng-color-pink-100: #351222; + --vng-color-pink-200: #591f39; + --vng-color-pink-300: #c23d76; + --vng-color-pink-400: #cc5e8d; + --vng-color-red-100: #310e08; + --vng-color-red-200: #51180f; + --vng-color-red-300: #df0d0d; + --vng-color-red-400: #e72e2e; + --vng-color-white: #141414; +} diff --git a/css/tokens/opencatalogi.css b/css/tokens/opencatalogi.css new file mode 100644 index 000000000..3f970472a --- /dev/null +++ b/css/tokens/opencatalogi.css @@ -0,0 +1,1757 @@ +/** + * OpenCatalogi Design Tokens + * + * GENERATED by scripts/generate-brand-set.mjs from the custom properties served by opencatalogi.nl (read 2026-08-20) + * plus the shared role layer (css/tokens/vng.css). Do not edit by hand — + * re-run the generator against scripts/brands/opencatalogi.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 { + /* --- A. OpenCatalogi palette (the custom properties served by opencatalogi.nl (read 2026-08-20)) --- */ + --opencatalogi-color-base-black: #000000; + --opencatalogi-color-base-white: #ffffff; + --opencatalogi-color-base-gray: var(--opencatalogi-color-gray-tint-01); + --opencatalogi-color-base-green: var(--opencatalogi-color-green-tint-01); + --opencatalogi-color-base-magenta: var(--opencatalogi-color-magenta-tint-01); + --opencatalogi-color-gray-tint-01: #eff4f6; + --opencatalogi-color-gray-tint-02: #e4eef1; + --opencatalogi-color-gray-tint-03: #dbe7ea; + --opencatalogi-color-gray-tint-04: #cad6da; + --opencatalogi-color-gray-tint-05: #b6c4c8; + --opencatalogi-color-gray-tint-06: #9dafb6; + --opencatalogi-color-gray-tint-07: #8d9da4; + --opencatalogi-color-gray-tint-08: #7c8b90; + --opencatalogi-color-gray-tint-09: #65757b; + --opencatalogi-color-gray-tint-10: #536165; + --opencatalogi-color-gray-tint-11: #404b4f; + --opencatalogi-color-green-tint-01: #00811f; + --opencatalogi-color-green-tint-02: #006e32; + --opencatalogi-color-green-tint-03: #00602e; + --opencatalogi-color-green-light-tint-01: #57b051; + --opencatalogi-color-green-light-tint-02: #11a03e; + --opencatalogi-color-green-light-tint-03: #11a03e; + --opencatalogi-color-dark-green-tint-01: #004c31; + --opencatalogi-color-dark-green-tint-02: #07341b; + --opencatalogi-color-dark-green-tint-03: #001905; + --opencatalogi-color-soft-green-tint-01: #e1efe2; + --opencatalogi-color-soft-green-tint-02: #d1e6ce; + --opencatalogi-color-soft-green-tint-03: #99cca0; + --opencatalogi-color-green-blue-tint-01: #09957b; + --opencatalogi-color-green-blue-tint-02: #00846d; + --opencatalogi-color-green-blue-tint-03: #00755f; + --opencatalogi-color-lime-green-tint-01: #7dc90f; + --opencatalogi-color-lime-green-tint-02: #73b129; + --opencatalogi-color-lime-green-tint-03: #62a72b; + --opencatalogi-color-blue-tint-01: #1791d4; + --opencatalogi-color-blue-tint-02: #0084c4; + --opencatalogi-color-blue-tint-03: #0079b8; + --opencatalogi-color-dark-blue-tint-01: #00548f; + --opencatalogi-color-dark-blue-tint-02: #084279; + --opencatalogi-color-dark-blue-tint-03: #083968; + --opencatalogi-color-light-blue-tint-01: #a8e8f5; + --opencatalogi-color-light-blue-tint-02: #92cfe1; + --opencatalogi-color-light-blue-tint-03: #76c1d3; + --opencatalogi-color-magenta-tint-01: #c93675; + --opencatalogi-color-magenta-tint-02: #a12b5e; + --opencatalogi-color-magenta-tint-03: #792046; + --opencatalogi-color-pink-tint-01: #e6007e; + --opencatalogi-color-pink-tint-02: #ce0075; + --opencatalogi-color-pink-tint-03: #b21271; + --opencatalogi-color-purple-tint-01: #701747; + --opencatalogi-color-purple-tint-02: #510e33; + --opencatalogi-color-purple-tint-03: #420c2f; + --opencatalogi-color-red-tint-01: #fe1818; + --opencatalogi-color-red-tint-02: #d70d0d; + --opencatalogi-color-red-tint-03: #9a0f0f; + --opencatalogi-color-orange-tint-01: #e3614d; + --opencatalogi-color-orange-tint-02: #d85644; + --opencatalogi-color-orange-tint-03: #ce4c3b; + --opencatalogi-color-bright-orange-tint-01: #ef7d00; + --opencatalogi-color-bright-orange-tint-02: #e56e02; + --opencatalogi-color-bright-orange-tint-03: #db5f06; + --opencatalogi-color-yellow-tint-01: #fdec3d; + --opencatalogi-color-yellow-tint-02: #edde26; + --opencatalogi-color-yellow-tint-03: #e1d600; + --opencatalogi-color-dark-yellow-tint-01: #edb500; + --opencatalogi-color-dark-yellow-tint-02: #e0a200; + --opencatalogi-color-dark-yellow-tint-03: #d99600; + --opencatalogi-color-brown-tint-01: #ab8061; + --opencatalogi-color-brown-tint-02: #997056; + --opencatalogi-color-brown-tint-03: #8b644c; + --opencatalogi-color-dark-brown-tint-01: #6b4236; + --opencatalogi-color-dark-brown-tint-02: #5e362c; + --opencatalogi-color-dark-brown-tint-03: #552d25; + --opencatalogi-typography-sans-serif-font-family: Bolder, ArialforRotterdam, Arial, sans-serif; + --opencatalogi-typography-weight-scale-normal-font-weight: 400; + --opencatalogi-typography-weight-scale-bold-font-weight: 700; + --opencatalogi-typography-scale-sm-font-size: 0.75rem; + --opencatalogi-typography-scale-sm-line-height: 20px; + --opencatalogi-typography-scale-md-font-size: 1rem; + --opencatalogi-typography-scale-md-line-height: 24px; + --opencatalogi-typography-scale-lg-font-size: 1.125rem; + --opencatalogi-typography-scale-lg-line-height: 28px; + --opencatalogi-typography-scale-xl-font-size: 1.25rem; + --opencatalogi-typography-scale-xl-line-height: 32px; + --opencatalogi-typography-scale-2xl-font-size: 1.5rem; + --opencatalogi-typography-scale-2xl-line-height: 36px; + --opencatalogi-typography-scale-3xl-font-size: 1.75rem; + --opencatalogi-typography-scale-3xl-line-height: 40px; + --opencatalogi-typography-scale-4xl-font-size: 2rem; + --opencatalogi-typography-scale-4xl-line-height: 48px; + --opencatalogi-typography-scale-5xl-font-size: 2.5rem; + --opencatalogi-typography-scale-5xl-line-height: 56px; + --opencatalogi-typography-scale-6xl-font-size: 3rem; + --opencatalogi-typography-scale-6xl-line-height: 72px; + + /* --- B. OpenCatalogi's own NL Design System component mapping --- */ + --ams-date-input-border-color: #7c8b90; + --ams-date-input-border-style: solid; + --ams-date-input-border-width: 1px; + --ams-date-input-box-shadow: ""; + --ams-date-input-color: #404b4f; + --ams-date-input-font-family: Bolder,ArialforRotterdam,Arial,sans-serif; + --ams-date-input-font-size: 1rem; + --ams-date-input-line-height: 24px; + --ams-date-input-padding-block: 10px; + --ams-date-input-padding-inline: 16px; + --ams-pagination-button-active-background-color: #0000; + --ams-pagination-button-active-border-color: #0000; + --ams-pagination-button-active-color: #048; + --ams-pagination-button-active-text-decoration: underline; + --ams-pagination-button-background-color: #0000; + --ams-pagination-button-border-color: #0000; + --ams-pagination-button-border-radius: 0px; + --ams-pagination-button-border-width: 1px; + --ams-pagination-button-color: #048; + --ams-pagination-button-current-background-color: #f2f4f6; + --ams-pagination-button-current-border-color: #0000; + --ams-pagination-button-current-text-decoration: none; + --ams-pagination-button-focus-text-decoration: none; + --ams-pagination-button-hover-background-color: #0000; + --ams-pagination-button-hover-border-color: #0000; + --ams-pagination-button-hover-color: #048; + --ams-pagination-button-hover-text-decoration: underline; + --ams-pagination-button-min-block-size: 48px; + --ams-pagination-button-min-inline-size: 48px; + --ams-pagination-button-padding-block-end: 12px; + --ams-pagination-button-padding-block-start: 12px; + --ams-pagination-button-padding-inline: 12px; + --ams-pagination-button-padding-inline-end: 12px; + --ams-pagination-button-padding-inline-start: 12px; + --ams-pagination-button-text-decoration: none; + --ams-pagination-color: #048; + --ams-pagination-ellipses-padding-block-end: 12px; + --ams-pagination-ellipses-padding-block-start: 12px; + --ams-pagination-ellipses-padding-inline-end: 4px; + --ams-pagination-ellipses-padding-inline-start: 4px; + --ams-pagination-relative-link-active-background-color: #0000; + --ams-pagination-relative-link-active-border-color: #0000; + --ams-pagination-relative-link-active-color: #048; + --ams-pagination-relative-link-active-text-decoration: underline; + --ams-pagination-relative-link-background-color: #0000; + --ams-pagination-relative-link-border-color: #0000; + --ams-pagination-relative-link-border-radius: 0px; + --ams-pagination-relative-link-border-width: 1px; + --ams-pagination-relative-link-color: #048; + --ams-pagination-relative-link-disabled-background-color: #0000; + --ams-pagination-relative-link-disabled-border-color: #0000; + --ams-pagination-relative-link-disabled-color: #7a8aa0; + --ams-pagination-relative-link-focus-text-decoration: none; + --ams-pagination-relative-link-hover-background-color: #0000; + --ams-pagination-relative-link-hover-border-color: #0000; + --ams-pagination-relative-link-hover-color: #048; + --ams-pagination-relative-link-hover-text-decoration: underline; + --ams-pagination-relative-link-icon-margin-inline: 4px; + --ams-pagination-relative-link-icon-size: 24px; + --ams-pagination-relative-link-min-block-size: 48px; + --ams-pagination-relative-link-min-inline-size: 48px; + --ams-pagination-relative-link-padding-block-end: 12px; + --ams-pagination-relative-link-padding-block-start: 12px; + --ams-pagination-relative-link-padding-inline-end: 0px; + --ams-pagination-relative-link-padding-inline-start: 0px; + --ams-pagination-relative-link-text-decoration: none; + --conduction-card-header-color: #404b4f; + --conduction-card-header-date-color: #404b4f; + --conduction-card-header-date-font-size: 16px; + --conduction-card-header-date-font-weight: 400; + --conduction-card-header-date-margin-block-end: 8px; + --conduction-card-header-title-color: #00811f; + --conduction-card-wrapper-background-color: #fff; + --conduction-card-wrapper-border-bottom-color: #cad6da; + --conduction-card-wrapper-border-bottom-style: solid; + --conduction-card-wrapper-border-bottom-width: 4px; + --conduction-card-wrapper-border-radius: 0px; + --conduction-card-wrapper-color: #404b4f; + --conduction-card-wrapper-hover-border-bottom-color: #00811f; + --conduction-card-wrapper-hover-border-bottom-style: solid; + --conduction-card-wrapper-hover-border-bottom-width: 4px; + --conduction-card-wrapper-padding-block-end: 16px; + --conduction-card-wrapper-padding-block-start: 16px; + --conduction-card-wrapper-padding-inline-end: 16px; + --conduction-card-wrapper-padding-inline-start: 16px; + --conduction-download-card-border-color: #cad6da; + --conduction-download-card-border-radius: 0px; + --conduction-download-card-border-style: solid; + --conduction-download-card-border-width: 1px; + --conduction-download-card-icon-gap: 14px; + --conduction-download-card-padding-block-end: 18px; + --conduction-download-card-padding-block-start: 18px; + --conduction-download-card-padding-inline-end: 18px; + --conduction-download-card-padding-inline-start: 18px; + --conduction-download-card-title-color: #404b4f; + --conduction-download-card-title-font-family: Bolder,ArialforRotterdam,Arial,sans-serif; + --conduction-download-card-title-font-size: 20px; + --conduction-download-card-title-font-weight: 700; + --conduction-download-card-title-margin-inline-end: 14px; + --conduction-horizontal-overflow-wrapper-buttons-top: 12px; + --conduction-horizontal-overflow-wrapper-margin-block-end: 8px; + --conduction-horizontal-overflow-wrapper-margin-block-start: 8px; + --conduction-horizontal-overflow-wrapper-margin-inline-end: 8px; + --conduction-horizontal-overflow-wrapper-margin-inline-start: 8px; + --conduction-horizontal-overflow-wrapper-width: 100%; + --conduction-horizontal-overflow-wrapper-z-index: 1; + --conduction-input-checkbox-border-color: #7c8b90; + --conduction-input-checkbox-border-radius: 0px; + --conduction-input-checkbox-border-style: solid; + --conduction-input-checkbox-border-width: 1px; + --conduction-input-checkbox-checked-border-color: #00811f; + --conduction-input-checkbox-checked-border-radius: 0px; + --conduction-input-checkbox-checked-border-style: solid; + --conduction-input-checkbox-checked-border-width: 1px; + --conduction-input-checkbox-checked-color: #00811f; + --conduction-input-checkbox-checked-hover-border-color: #000; + --conduction-input-checkbox-checked-hover-border-radius: 0px; + --conduction-input-checkbox-checked-hover-border-style: solid; + --conduction-input-checkbox-checked-hover-border-width: 1px; + --conduction-input-checkbox-checked-hover-color: #000; + --conduction-input-checkbox-color: #fff; + --conduction-input-checkbox-disabled-border-color: #7c8b90; + --conduction-input-checkbox-disabled-border-radius: 0px; + --conduction-input-checkbox-disabled-border-style: solid; + --conduction-input-checkbox-disabled-border-width: 1px; + --conduction-input-checkbox-disabled-color: #7c8b90; + --conduction-input-checkbox-disabled-hover-border-color: #7c8b90; + --conduction-input-checkbox-disabled-hover-border-radius: 0px; + --conduction-input-checkbox-disabled-hover-border-style: solid; + --conduction-input-checkbox-disabled-hover-border-width: 1px; + --conduction-input-checkbox-disabled-hover-color: #7c8b90; + --conduction-input-checkbox-focus-outline-color: #000; + --conduction-input-checkbox-focus-outline-offset: 2px; + --conduction-input-checkbox-focus-outline-style: solid; + --conduction-input-checkbox-focus-outline-width: 1px; + --conduction-input-checkbox-hover-border-color: #00811f; + --conduction-input-checkbox-hover-border-radius: 0px; + --conduction-input-checkbox-hover-border-style: solid; + --conduction-input-checkbox-hover-border-width: 2px; + --conduction-input-checkbox-hover-color: #fff; + --conduction-input-checkbox-label-color: #404b4f; + --conduction-input-checkbox-label-container-margin: 3px; + --conduction-input-checkbox-label-container-padding: 3px; + --conduction-input-checkbox-label-font-family: Bolder,ArialforRotterdam,Arial,sans-serif; + --conduction-input-checkbox-label-font-size: 1rem; + --conduction-input-select-background-color: #fff; + --conduction-input-select-border: 1px solid #7c8b90; + --conduction-input-select-border-radius: 0; + --conduction-input-select-invalid-border-color: #fe1818; + --conduction-input-select-list-option-background-color: #fff; + --conduction-input-select-list-option-focus-background-color: #fff; + --conduction-input-select-list-option-focus-color: #000; + --conduction-input-select-list-option-font-family: Bolder,ArialforRotterdam,Arial,sans-serif; + --conduction-input-select-list-option-hover-background-color: #00811f; + --conduction-input-select-list-option-hover-color: #fff; + --conduction-input-select-list-option-hover-font-family: Bolder,ArialforRotterdam,Arial,sans-serif; + --conduction-input-select-list-option-selected-background-color: #00811f; + --conduction-input-select-list-option-selected-color: #fff; + --conduction-input-select-padding-block-end: 0; + --conduction-input-select-padding-block-start: 0; + --conduction-input-select-placeholder-color: #65757b; + --conduction-input-select-placeholder-font-family: Bolder,ArialforRotterdam,Arial,sans-serif; + --conduction-logo-footer-block-size: 46px; + --conduction-logo-footer-inline-size: 46px; + --conduction-logo-header-block-size: 46px; + --conduction-logo-header-inline-size: 46px; + --conduction-logo-navbar-block-size: 46px; + --conduction-logo-navbar-inline-size: 46px; + --conduction-pagination-container-padding-block-end: 0px; + --conduction-pagination-container-padding-block-start: 0px; + --conduction-pagination-container-padding-inline-end: 0px; + --conduction-pagination-container-padding-inline-start: 0px; + --conduction-pagination-current-page-background-color: #e1efe2; + --conduction-pagination-current-page-border-color: #00602e; + --conduction-pagination-current-page-border-style: solid; + --conduction-pagination-current-page-border-width: 1px; + --conduction-pagination-current-page-color: #00602e; + --conduction-pagination-current-page-font-weight: 700; + --conduction-pagination-item-background-color: #fff; + --conduction-pagination-item-border-color: #fff; + --conduction-pagination-item-border-radius: 0px; + --conduction-pagination-item-border-style: solid; + --conduction-pagination-item-border-width: 1px; + --conduction-pagination-item-color: #404b4f; + --conduction-pagination-item-font-family: Bolder,ArialforRotterdam,Arial,sans-serif; + --conduction-pagination-item-font-size: 1rem; + --conduction-pagination-item-font-weight: 400; + --conduction-pagination-item-gap: 8px; + --conduction-pagination-item-padding-block-end: 8px; + --conduction-pagination-item-padding-block-start: 8px; + --conduction-pagination-item-padding-inline-end: 14px; + --conduction-pagination-item-padding-inline-start: 14px; + --conduction-pagination-navigation-button-background-color: #0000; + --conduction-pagination-navigation-button-color: #404b4f; + --conduction-pagination-navigation-button-disabled-background-color: #0000; + --conduction-pagination-navigation-button-disabled-color: #8d9da4; + --conduction-pagination-navigation-button-hover-background-color: #0000; + --conduction-pagination-navigation-button-hover-color: #00811f; + --conduction-pagination-navigation-button-padding-block-end: 8px; + --conduction-pagination-navigation-button-padding-block-start: 8px; + --conduction-pagination-navigation-button-padding-inline-end: 8px; + --conduction-pagination-navigation-button-padding-inline-start: 8px; + --conduction-pagination-page-hover-background-color: #fff; + --conduction-pagination-page-hover-border-color: #00811f; + --conduction-pagination-page-hover-border-style: solid; + --conduction-pagination-page-hover-border-width: 1px; + --conduction-pagination-page-hover-color: #00811f; + --conduction-pagination-page-hover-text-decoration-thickness: 0px; + --conduction-primary-top-nav-background-color: #fff; + --conduction-primary-top-nav-color: #404b4f; + --conduction-primary-top-nav-current-box-shadow: inset 0 -4px #00811f; + --conduction-primary-top-nav-current-color: #404b4f; + --conduction-primary-top-nav-current-mobile-box-shadow: inset 4px 0 #00811f; + --conduction-primary-top-nav-dropdown-background-color: #00811f; + --conduction-primary-top-nav-dropdown-color: #fff; + --conduction-primary-top-nav-dropdown-current-background-color: #000; + --conduction-primary-top-nav-dropdown-current-box-shadow: inset 0 -4px #000; + --conduction-primary-top-nav-dropdown-current-color: #fff; + --conduction-primary-top-nav-dropdown-current-mobile-box-shadow: inset 4px 0 #000; + --conduction-primary-top-nav-dropdown-hover-background-color: #000; + --conduction-primary-top-nav-dropdown-hover-color: #fff; + --conduction-primary-top-nav-hover-background-color: #fff; + --conduction-primary-top-nav-hover-color: #00811f; + --conduction-primary-top-nav-item-padding: 18px; + --conduction-primary-top-nav-mobile-logo-padding: 18px; + --conduction-primary-top-nav-padding-block-end: 16px; + --conduction-primary-top-nav-padding-block-start: 16px; + --conduction-primary-top-nav-padding-inline-end: 16px; + --conduction-primary-top-nav-padding-inline-start: 16px; + --conduction-primary-top-nav-toggle-icon-size: 24px; + --conduction-secondary-top-nav-background-color: #0000; + --conduction-secondary-top-nav-color: #404b4f; + --conduction-secondary-top-nav-current-box-shadow: inset 0 -4px #00811f; + --conduction-secondary-top-nav-current-color: #404b4f; + --conduction-secondary-top-nav-font-size: 16px; + --conduction-secondary-top-nav-font-weight: 400; + --conduction-secondary-top-nav-hover-background-color: #00811f; + --conduction-secondary-top-nav-hover-color: #fff; + --conduction-secondary-top-nav-item-padding: 18px; + --conduction-secondary-top-nav-padding-block-end: 16px; + --conduction-secondary-top-nav-padding-block-start: 16px; + --conduction-secondary-top-nav-padding-inline-end: 16px; + --conduction-secondary-top-nav-padding-inline-start: 16px; + --conduction-table-wrapper-scroll-button-background-color: #fff; + --conduction-table-wrapper-scroll-button-color: #404b4f; + --conduction-table-wrapper-scroll-button-hover-background-color: #fff; + --conduction-table-wrapper-scroll-button-hover-color: #00811f; + --conduction-table-wrapper-scroll-button-padding-inline-end: 14px; + --conduction-table-wrapper-scroll-button-padding-inline-start: 14px; + --conduction-tabs-scroll-button-background-color: #fff; + --conduction-tabs-scroll-button-color: #404b4f; + --conduction-tabs-scroll-button-hover-background-color: #fff; + --conduction-tabs-scroll-button-hover-color: #00811f; + --conduction-tabs-tab-background-color: #0000; + --conduction-tabs-tab-bottom: -4px; + --conduction-tabs-tab-color: #404b4f; + --conduction-tabs-tab-font-family: Bolder,ArialforRotterdam,Arial,sans-serif; + --conduction-tabs-tab-font-size: 14px; + --conduction-tabs-tab-font-weight: 400; + --conduction-tabs-tab-hover-background-color: #0000; + --conduction-tabs-tab-hover-color: #00811f; + --conduction-tabs-tab-letter-spacing: 0.02857em; + --conduction-tabs-tab-list-border-bottom-color: #eff4f6; + --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-start: 0px; + --conduction-tabs-tab-min-height: 48px; + --conduction-tabs-tab-min-width: 160px; + --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-background-color: #0000; + --conduction-tabs-tab-selected-border-bottom-color: #00811f; + --conduction-tabs-tab-selected-border-bottom-style: solid; + --conduction-tabs-tab-selected-border-bottom-width: 0.3rem; + --conduction-tabs-tab-selected-color: #404b4f; + --conduction-tabs-tab-selected-font-weight: 700; + --conduction-tooltip-background-color: #000; + --conduction-tooltip-border-radius: 0px; + --conduction-tooltip-border-width: 0px; + --conduction-tooltip-color: #fff; + --conduction-tooltip-padding-block-end: 8px; + --conduction-tooltip-padding-block-start: 8px; + --conduction-tooltip-padding-inline-end: 14px; + --conduction-tooltip-padding-inline-start: 14px; + --conduction-tooltip-z-index: 9999; + --denhaag-process-steps-font-family: Bolder,ArialforRotterdam,Arial,sans-serif; + --denhaag-process-steps-font-size: 1rem; + --denhaag-process-steps-step-distance: 10px; + --denhaag-process-steps-step-heading-color: #404b4f; + --denhaag-process-steps-step-heading-font-size: 1.125rem; + --denhaag-process-steps-step-heading-font-weight: 700; + --denhaag-step-marker-background-color: #fff; + --denhaag-step-marker-checked-background-color: #e6f3e9; + --denhaag-step-marker-checked-border-width: 3px; + --denhaag-step-marker-checked-color: #00811f; + --denhaag-step-marker-color: #000; + --denhaag-step-marker-current-background-color: #e8f4fb; + --denhaag-step-marker-current-border-width: 5px; + --denhaag-step-marker-current-color: #1791d4; + --denhaag-step-marker-error-background-color: #fdf0ee; + --denhaag-step-marker-error-border-width: 1px; + --denhaag-step-marker-error-color: #fe1818; + --denhaag-step-marker-not-checked-background-color: #fff; + --denhaag-step-marker-not-checked-border-width: 3px; + --denhaag-step-marker-not-checked-color: #000; + --denhaag-step-marker-size: 30px; + --denhaag-step-marker-warning-background-color: #fef8e6; + --denhaag-step-marker-warning-border-width: 1px; + --denhaag-step-marker-warning-color: #fdec3d; + --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-box-shadow-lg: 0 1ratpx #0000001a; + --tilburg-box-shadow-md: 0 4px 12px #0000001a; + --tilburg-box-shadow-sm: [object Object]; + --tilburg-color-black: #000; + --tilburg-color-black-txt: #333; + --tilburg-color-blue-100: #e6f6ff; + --tilburg-color-blue-200: #b9e4fc; + --tilburg-color-blue-300: #009dda; + --tilburg-color-blue-400: #026596; + --tilburg-color-blue-500: #003865; + --tilburg-color-dark-alpha-100: #0000001a; + --tilburg-color-dark-alpha-50: #0000000d; + --tilburg-color-extra-limegreen: #8bc63f; + --tilburg-color-extra-purple: #513090; + --tilburg-color-extra-yellow: #fbdd27; + --tilburg-color-gray-100: #f2f4f6; + --tilburg-color-gray-200: #e4e7ec; + --tilburg-color-gray-300: #cfd5dd; + --tilburg-color-gray-400: #98a4b6; + --tilburg-color-gray-50: #f9f9fa; + --tilburg-color-gray-500: #7a8aa0; + --tilburg-color-gray-600: #5b6e8a; + --tilburg-color-gray-700: #3f5676; + --tilburg-color-gray-800: #274065; + --tilburg-color-gray-900: #0a2750; + --tilburg-color-gray-950: #001737; + --tilburg-color-green-100: #c8f3e9; + --tilburg-color-green-200: #86cabb; + --tilburg-color-green-300: #008b6d; + --tilburg-color-green-400: #01745a; + --tilburg-color-light-alpha-100: #ffffff1a; + --tilburg-color-light-alpha-50: #ffffff0d; + --tilburg-color-orange-100: #ffe7d4; + --tilburg-color-orange-200: #fbb278; + --tilburg-color-orange-300: #f16e06; + --tilburg-color-orange-400: #d45f01; + --tilburg-color-pink-100: #ffe8f5; + --tilburg-color-pink-200: #f5b4d7; + --tilburg-color-pink-300: #c8006c; + --tilburg-color-pink-400: #a40058; + --tilburg-color-red-100: #ffe1e0; + --tilburg-color-red-200: #f7b0ac; + --tilburg-color-red-300: #e5352c; + --tilburg-color-red-400: #bf1a12; + --tilburg-color-white: #fff; + --tilburg-erm-font-size: 16px; + --tilburg-focus-outline-offset: 0; + --tilburg-focus-outline-style: dotted; + --tilburg-footer-background-color: #00811f; + --tilburg-footer-color: #fff; + --tilburg-form-control-active-background-color: #f2f4f6; + --tilburg-form-control-active-border-color: #7a8aa0; + --tilburg-form-control-active-border-width: 2px; + --tilburg-form-control-active-color: #001737; + --tilburg-form-control-background-color: #fff; + --tilburg-form-control-border-color: #7a8aa0; + --tilburg-form-control-border-width: 1px; + --tilburg-form-control-color: #001737; + --tilburg-form-control-disabled-accent-color: #7a8aa0; + --tilburg-form-control-disabled-background-color: #f9f9fa; + --tilburg-form-control-disabled-border-color: #7a8aa0; + --tilburg-form-control-disabled-color: #7a8aa0; + --tilburg-form-control-focus-background-color: #fff; + --tilburg-form-control-focus-border-color: #000; + --tilburg-form-control-focus-border-width: 2px; + --tilburg-form-control-focus-color: #000; + --tilburg-form-control-hover-background-color: #f9f9fa; + --tilburg-form-control-hover-border-color: #7a8aa0; + --tilburg-form-control-hover-border-width: 2px; + --tilburg-form-control-hover-color: #001737; + --tilburg-form-control-invalid-background-color: #fff; + --tilburg-form-control-invalid-border-color: #e5352c; + --tilburg-form-control-invalid-border-width: 2px; + --tilburg-form-control-invalid-color: #e5352c; + --tilburg-form-control-placeholder-color: #5b6e8a; + --tilburg-form-control-read-only-background-color: #f9f9fa; + --tilburg-form-control-read-only-border-color: #7a8aa0; + --tilburg-form-control-read-only-color: #001737; + --tilburg-header-background-color: #fff; + --tilburg-icon-functional-size: 24px; + --tilburg-icon-toptask-size: 48px; + --tilburg-interaction-active-color: #048; + --tilburg-interaction-color: #048; + --tilburg-interaction-hover-color: #048; + --tilburg-line-border-color: #75757c; + --tilburg-line-border-width: 1px; + --tilburg-logo-color: #404b4f; + --tilburg-navigation-background-color: #fff; + --tilburg-navigation-color: #404b4f; + --tilburg-navigation-font-weight: 400; + --tilburg-navigation-hover-background-color: #fff; + --tilburg-navigation-hover-color: #00811f; + --tilburg-navigation-hover-font-family: Bolder,ArialforRotterdam,Arial,sans-serif; + --tilburg-navigation-hover-font-weight: 400; + --tilburg-pointer-target-min-size: 48px; + --tilburg-search-card-border-color: #e4e7ec; + --tilburg-search-card-hover-border-color: #00811f; + --tilburg-size-2xl: 160px; + --tilburg-size-2xs: 16px; + --tilburg-size-3xs: 8px; + --tilburg-size-4xs: 4px; + --tilburg-size-5xs: 2px; + --tilburg-size-icon-2xl: 32px; + --tilburg-size-icon-3xl: 40px; + --tilburg-size-icon-4xl: 48px; + --tilburg-size-icon-lg: 24px; + --tilburg-size-icon-md: 24px; + --tilburg-size-icon-sm: 16px; + --tilburg-size-icon-xl: 24px; + --tilburg-size-lg: 64px; + --tilburg-size-md: 48px; + --tilburg-size-sm: 32px; + --tilburg-size-xl: 96px; + --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-flea: 1px; + --tilburg-space-column-giraffe: 160px; + --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-cat: 28px; + --tilburg-space-inline-dog: 32px; + --tilburg-space-inline-flea: 2px; + --tilburg-space-inline-mouse: 16px; + --tilburg-space-inline-pig: 48px; + --tilburg-space-inline-rabbit: 24px; + --tilburg-space-inline-rat: 20px; + --tilburg-space-inline-snail: 12px; + --tilburg-space-row-ant: 2px; + --tilburg-space-row-beetle: 4px; + --tilburg-space-row-cat: 24px; + --tilburg-space-row-dog: 28px; + --tilburg-space-row-elephant: 96px; + --tilburg-space-row-flea: 1px; + --tilburg-space-row-giraffe: 160px; + --tilburg-space-row-horse: 64px; + --tilburg-space-row-mouse: 12px; + --tilburg-space-row-pig: 32px; + --tilburg-space-row-rabbit: 20px; + --tilburg-space-row-rat: 16px; + --tilburg-space-row-snail: 8px; + --tilburg-space-row-tiger: 48px; + --tilburg-space-text-ant: 2px; + --tilburg-space-text-beetle: 4px; + --tilburg-space-text-cat: 16px; + --tilburg-space-text-dog: 24px; + --tilburg-space-text-flea: 1px; + --tilburg-space-text-mouse: 8px; + --tilburg-space-text-rabbit: 14px; + --tilburg-space-text-rat: 12px; + --tilburg-space-text-snail: 6px; + --tilburg-status-badge-background-color: #ffe8f5; + --tilburg-status-badge-border-radius: 4px; + --tilburg-status-badge-border-width: 1px; + --tilburg-status-badge-font-size: 14px; + --tilburg-status-badge-padding-block: 2px; + --tilburg-status-badge-padding-inline: 4px; + --tilburg-typography-font-family-primary: TradeGothicCondensed18, Bolder, ArialforRotterdam, 'Arial Narrow', Arial, sans-serif; + --tilburg-typography-font-family-secondary: "Roboto",sans-serif; + --tilburg-typography-font-size-2xl: 32px; + --tilburg-typography-font-size-3xl: 40px; + --tilburg-typography-font-size-4xl: 48px; + --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-lg: 200%; + --tilburg-typography-line-height-md: 150%; + --tilburg-typography-line-height-sm: 125%; + --tilburg-typography-line-height-xs: 100%; + --utrecht-action-busy-cursor: wait; + --utrecht-action-disabled-cursor: not-allowed; + --utrecht-action-submit-cursor: pointer; + --utrecht-alert-background-color: #e8f4fb; + --utrecht-alert-border-color: #b4dbf1; + --utrecht-alert-border-width: 1px; + --utrecht-alert-color: #404b4f; + --utrecht-alert-error-background-color: #fdf0ee; + --utrecht-alert-error-border-color: #f7ccc5; + --utrecht-alert-error-border-width: 1px; + --utrecht-alert-error-color: #404b4f; + --utrecht-alert-icon-color: #00689e; + --utrecht-alert-icon-error-color: #d70d0d; + --utrecht-alert-icon-gap: 8px; + --utrecht-alert-icon-ok-color: #00811f; + --utrecht-alert-icon-warning-color: #a65600; + --utrecht-alert-ok-background-color: #e6f3e9; + --utrecht-alert-ok-border-color: #acd6b7; + --utrecht-alert-ok-border-width: 1px; + --utrecht-alert-ok-color: #404b4f; + --utrecht-alert-padding-block-end: 24px; + --utrecht-alert-padding-block-start: 24px; + --utrecht-alert-padding-inline-end: 24px; + --utrecht-alert-padding-inline-start: 24px; + --utrecht-alert-warning-background-color: #fef8e6; + --utrecht-alert-warning-border-color: #f9e7ac; + --utrecht-alert-warning-border-width: 1px; + --utrecht-alert-warning-color: #404b4f; + --utrecht-badge-background-color: #000; + --utrecht-badge-border-radius: 0; + --utrecht-badge-color: #fff; + --utrecht-badge-counter-background-color: #000; + --utrecht-badge-counter-border-radius: 50%; + --utrecht-badge-counter-color: #fff; + --utrecht-badge-counter-font-family: Bolder,ArialforRotterdam,Arial,sans-serif; + --utrecht-badge-counter-font-size: 1rem; + --utrecht-badge-counter-padding-block: 5px; + --utrecht-badge-counter-padding-inline: 5px; + --utrecht-badge-counter-text-decoration: none; + --utrecht-badge-font-size: 14px; + --utrecht-badge-font-weight: 400; + --utrecht-badge-padding-block: 8px; + --utrecht-badge-padding-inline: 8px; + --utrecht-breadcrumb-nav-font-family: Bolder,ArialforRotterdam,Arial,sans-serif; + --utrecht-breadcrumb-nav-link-color: #00811f; + --utrecht-breadcrumb-nav-link-current-color: #65757b; + --utrecht-breadcrumb-nav-link-disabled-color: #65757b; + --utrecht-breadcrumb-nav-link-hover-color: #00811f; + --utrecht-breadcrumb-nav-separator-color: #00811f; + --utrecht-breadcrumb-nav-separator-icon-size: 16px; + --utrecht-button-background-color: #00811f; + --utrecht-button-border-width: 0; + --utrecht-button-color: #fff; + --utrecht-button-disabled-background-color: #cad6da; + --utrecht-button-disabled-color: #65757b; + --utrecht-button-focus-border-color: #000; + --utrecht-button-font-family: Bolder,ArialforRotterdam,Arial,sans-serif; + --utrecht-button-font-size: 1rem; + --utrecht-button-font-weight: 700; + --utrecht-button-hover-background-color: #006e32; + --utrecht-button-icon-gap: 8px; + --utrecht-button-padding-block-end: 13px; + --utrecht-button-padding-block-start: 11px; + --utrecht-button-padding-inline-end: 16px; + --utrecht-button-padding-inline-start: 16px; + --utrecht-button-primary-action-background-color: #c93675; + --utrecht-button-primary-action-color: #fff; + --utrecht-button-primary-action-hover-background-color: #a12b5e; + --utrecht-button-secondary-action-background-color: #000; + --utrecht-button-secondary-action-color: #fff; + --utrecht-button-secondary-action-hover-background-color: #404b4f; + --utrecht-button-secondary-action-hover-border-color: none; + --utrecht-button-subtle-background-color: #fff; + --utrecht-button-subtle-color: #00811f; + --utrecht-button-subtle-disabled-background-color: #cad6da; + --utrecht-button-subtle-disabled-color: #65757b; + --utrecht-button-subtle-hover-color: #00602e; + --utrecht-calendar-icon-size: 24px; + --utrecht-calendar-navigation-color: #00811f; + --utrecht-calendar-navigation-label-color: #000; + --utrecht-calendar-navigation-label-min-inline-size: 200px; + --utrecht-calendar-navigation-padding-block-end: 2px; + --utrecht-calendar-navigation-padding-block-start: 2px; + --utrecht-calendar-table-days-item-day-active-border-color: #0000; + --utrecht-calendar-table-days-item-day-border-color: #0000; + --utrecht-calendar-table-days-item-day-border-width: 2px; + --utrecht-calendar-table-days-item-day-color: #000; + --utrecht-calendar-table-days-item-day-emphasis-border-color: #0000; + --utrecht-calendar-table-days-item-day-focus-border-color: #0000; + --utrecht-calendar-table-days-item-day-hover-border-color: #000; + --utrecht-calendar-table-days-item-day-hover-color: #00811f; + --utrecht-calendar-table-days-item-day-is-today-background-color: #e6ffeb; + --utrecht-calendar-table-days-item-day-is-today-border-color: #00811f; + --utrecht-calendar-table-days-item-day-is-today-color: #00811f; + --utrecht-calendar-table-days-item-day-is-today-font-weight: 700; + --utrecht-calendar-table-days-item-day-out-of-the-month-border-color: #0000; + --utrecht-calendar-table-days-item-day-out-of-the-month-color: #cad6da; + --utrecht-calendar-table-days-item-day-selected-background-color: #c93675; + --utrecht-calendar-table-days-item-day-selected-color: #fff; + --utrecht-calendar-table-days-item-day-selected-font-weight: 700; + --utrecht-calendar-table-days-item-day-size: 44px; + --utrecht-calendar-table-weeks-item-line-height: 24px; + --utrecht-calendar-table-weeks-item-padding-block-end: 10px; + --utrecht-calendar-table-weeks-item-padding-block-start: 4px; + --utrecht-calendar-table-weeks-item-width: 44px; + --utrecht-checkbox-border-color: #7c8b90; + --utrecht-checkbox-border-radius: 0px; + --utrecht-checkbox-border-width: 1px; + --utrecht-checkbox-checked-background-color: #00811f; + --utrecht-checkbox-checked-border-color: #00811f; + --utrecht-checkbox-checked-border-width: 1px; + --utrecht-checkbox-checked-color: #00811f; + --utrecht-checkbox-color: #fff; + --utrecht-checkbox-disabled-background-color: #7c8b90; + --utrecht-checkbox-disabled-border-color: #7c8b90; + --utrecht-checkbox-disabled-border-width: 1px; + --utrecht-checkbox-disabled-color: #7c8b90; + --utrecht-checkbox-hover-border-color: #00811f; + --utrecht-checkbox-hover-border-width: 2px; + --utrecht-checkbox-hover-color: #fff; + --utrecht-checkbox-size: 24px; + --utrecht-code-background-color: #eff4f6; + --utrecht-code-block-background-color: #eff4f6; + --utrecht-code-block-color: #404b4f; + --utrecht-code-block-font-size: 1rem; + --utrecht-code-block-margin-block-end: 24px; + --utrecht-code-block-margin-block-start: 24px; + --utrecht-code-block-padding-block-end: 24px; + --utrecht-code-block-padding-block-start: 24px; + --utrecht-code-block-padding-inline-start: 24px; + --utrecht-code-color: #404b4f; + --utrecht-data-list-item-key-font-weight: 700; + --utrecht-data-list-margin-block-end: 16px; + --utrecht-data-list-margin-block-start: 16px; + --utrecht-data-list-rows-item-margin-block-start: 16px; + --utrecht-data-list-rows-item-value-margin-block-start: 8px; + --utrecht-document-background-color: #fff; + --utrecht-document-color: #404b4f; + --utrecht-document-font-family: Bolder,ArialforRotterdam,Arial,sans-serif; + --utrecht-document-font-size: 1rem; + --utrecht-figure-caption-color: #e4eef1; + --utrecht-figure-caption-font-size: 1rem; + --utrecht-figure-caption-line-height: 28px; + --utrecht-focus-outline-color: #000; + --utrecht-focus-outline-offset: 1px; + --utrecht-focus-outline-style: solid; + --utrecht-focus-outline-width: 1px; + --utrecht-form-control-background-color: #fff; + --utrecht-form-control-block-size: 46px; + --utrecht-form-control-border-color: #7c8b90; + --utrecht-form-control-border-radius: 0; + --utrecht-form-control-border-width: 1px; + --utrecht-form-control-color: #404b4f; + --utrecht-form-control-disabled-background-color: #eff4f6; + --utrecht-form-control-disabled-color: #65757b; + --utrecht-form-control-font-family: Bolder,ArialforRotterdam,Arial,sans-serif; + --utrecht-form-control-font-size: 1rem; + --utrecht-form-control-line-height: 24px; + --utrecht-form-control-max-inline-size: 320px; + --utrecht-form-control-padding-block-end: 12px; + --utrecht-form-control-padding-block-start: 12px; + --utrecht-form-control-padding-inline-end: 16px; + --utrecht-form-control-padding-inline-start: 16px; + --utrecht-form-control-placeholder-color: #65757b; + --utrecht-form-field-description-font-size: 0.75rem; + --utrecht-form-field-description-invalid-color: #b53322; + --utrecht-form-field-description-margin-block-end: 12px; + --utrecht-form-field-description-margin-block-start: 12px; + --utrecht-form-field-description-valid-color: #006e32; + --utrecht-form-field-description-warning-color: #fef8e6; + --utrecht-form-field-invalid-border-inline-start-color: #fe1818; + --utrecht-form-field-invalid-border-inline-start-width: 3px; + --utrecht-form-field-invalid-padding-inline-start: 12px; + --utrecht-form-field-margin-block-end: 4px; + --utrecht-form-field-margin-block-start: 13px; + --utrecht-form-fieldset-legend-color: #404b4f; + --utrecht-form-fieldset-legend-font-size: 1.25rem; + --utrecht-form-fieldset-legend-font-weight: 700; + --utrecht-form-fieldset-legend-line-height: 32px; + --utrecht-form-fieldset-margin-block-start: 40px; + --utrecht-form-label-checkbox-font-weight: 400; + --utrecht-form-label-color: #404b4f; + --utrecht-form-label-font-size: 1rem; + --utrecht-form-label-font-weight: 700; + --utrecht-form-label-radio-font-weight: 400; + --utrecht-form-select-background-color: #fff; + --utrecht-form-select-border-width: 1px; + --utrecht-form-select-color: #404b4f; + --utrecht-form-select-max-inline-size: 100%; + --utrecht-heading-1-font-size: 3rem; + --utrecht-heading-1-line-height: 72px; + --utrecht-heading-2-font-size: 2.5rem; + --utrecht-heading-2-line-height: 56px; + --utrecht-heading-3-font-size: 2rem; + --utrecht-heading-3-line-height: 48px; + --utrecht-heading-font-weight: 700; + --utrecht-icon-gap: 8px; + --utrecht-icon-inset-block-start: 0.1em; + --utrecht-link-active-color: #00602e; + --utrecht-link-color: #00811f; + --utrecht-link-focus-color: #00602e; + --utrecht-link-focus-text-decoration-thickness: auto; + --utrecht-link-hover-color: #00602e; + --utrecht-link-hover-text-decoration-thickness: auto; + --utrecht-link-icon-margin-inline: 4px; + --utrecht-link-text-decoration: underline; + --utrecht-link-text-decoration-thickness: auto; + --utrecht-link-text-underline-offset: auto; + --utrecht-ordered-list-font-size: 1rem; + --utrecht-ordered-list-item-margin-block-end: 4px; + --utrecht-ordered-list-item-margin-block-start: 4px; + --utrecht-ordered-list-item-padding-inline-start: 1ch; + --utrecht-ordered-list-margin-block-end: 14px; + --utrecht-ordered-list-margin-block-start: 14px; + --utrecht-ordered-list-padding-inline-start: 32px; + --utrecht-page-footer-background-color: #00811f; + --utrecht-page-footer-color: #fff; + --utrecht-page-footer-link-hover-text-decoration: underline; + --utrecht-page-footer-link-hover-text-decoration-thickness: 1; + --utrecht-page-footer-link-text-decoration: underline; + --utrecht-page-footer-link-text-decoration-thickness: 1; + --utrecht-page-footer-logo-max-height: 48px; + --utrecht-page-footer-logo-max-width: 240px; + --utrecht-page-footer-padding-block-end: 64px; + --utrecht-page-footer-padding-block-start: 40px; + --utrecht-page-footer-padding-inline-end: 72px; + --utrecht-page-footer-padding-inline-start: 72px; + --utrecht-page-header-background-color: #fff; + --utrecht-page-header-color: #404b4f; + --utrecht-page-header-logo-max-width: 222px; + --utrecht-page-header-padding-block-end: 14px; + --utrecht-page-header-padding-block-start: 14px; + --utrecht-page-margin-inline-end: 24px; + --utrecht-page-margin-inline-start: 24px; + --utrecht-page-max-inline-size: 1140px; + --utrecht-paragraph-font-family: Bolder,ArialforRotterdam,Arial,sans-serif; + --utrecht-paragraph-font-size: 1rem; + --utrecht-paragraph-font-weight: 400; + --utrecht-paragraph-lead-font-size: 1.75rem; + --utrecht-paragraph-lead-font-weight: 400; + --utrecht-paragraph-lead-line-height: 36px; + --utrecht-paragraph-line-height: 28px; + --utrecht-paragraph-small-font-size: 0.75rem; + --utrecht-paragraph-small-line-height: 20px; + --utrecht-radio-button-background-color: #fff; + --utrecht-radio-button-border-color: #7c8b90; + --utrecht-radio-button-border-width: 1px; + --utrecht-radio-button-checked-active-background-color: #fff; + --utrecht-radio-button-checked-active-border-color: #00811f; + --utrecht-radio-button-checked-active-border-width: 1px; + --utrecht-radio-button-checked-active-color: #fff; + --utrecht-radio-button-checked-background-color: #fff; + --utrecht-radio-button-checked-border-color: #00811f; + --utrecht-radio-button-checked-border-width: 5px; + --utrecht-radio-button-checked-color: #fff; + --utrecht-radio-button-checked-disabled-background-color: #7c8b90; + --utrecht-radio-button-checked-disabled-border-color: #7c8b90; + --utrecht-radio-button-checked-disabled-border-width: 1px; + --utrecht-radio-button-checked-disabled-color: #7c8b90; + --utrecht-radio-button-checked-focus-background-color: #fff; + --utrecht-radio-button-checked-focus-border-color: #00811f; + --utrecht-radio-button-checked-focus-border-width: 1px; + --utrecht-radio-button-checked-focus-color: #fff; + --utrecht-radio-button-checked-hover-background-color: #fff; + --utrecht-radio-button-checked-hover-border-color: #000; + --utrecht-radio-button-checked-hover-border-width: 5px; + --utrecht-radio-button-checked-hover-color: #fff; + --utrecht-radio-button-disabled-background-color: #eff4f6; + --utrecht-radio-button-disabled-border-color: #7c8b90; + --utrecht-radio-button-disabled-border-width: 1px; + --utrecht-radio-button-disabled-color: #7c8b90; + --utrecht-radio-button-focus-background-color: #fff; + --utrecht-radio-button-focus-border-color: #00811f; + --utrecht-radio-button-focus-border-width: 5px; + --utrecht-radio-button-focus-color: #fff; + --utrecht-radio-button-hover-background-color: #fff; + --utrecht-radio-button-hover-border-color: #00811f; + --utrecht-radio-button-hover-border-width: 2px; + --utrecht-radio-button-invalid-background-color: #fff; + --utrecht-radio-button-invalid-border-color: #fe1818; + --utrecht-radio-button-invalid-border-width: 1px; + --utrecht-radio-button-invalid-color: #fe1818; + --utrecht-radio-button-min-block-size: 16px; + --utrecht-radio-button-min-inline-size: 16px; + --utrecht-select-border-bottom-width: auto; + --utrecht-select-max-inline-size: 400px; + --utrecht-separator-block-size: 2px; + --utrecht-separator-color: #eff4f6; + --utrecht-separator-margin-block-end: 0px; + --utrecht-separator-margin-block-start: 0px; + --utrecht-skip-link-background-color: #00811f; + --utrecht-skip-link-border-color: #0000; + --utrecht-skip-link-border-radius: 3px; + --utrecht-skip-link-color: #fff; + --utrecht-skip-link-focus-border-color: #0000; + --utrecht-skip-link-focus-text-decoration: underline; + --utrecht-skip-link-min-block-size: 20px; + --utrecht-skip-link-min-inline-size: 20px; + --utrecht-skip-link-padding-block-end: 10px; + --utrecht-skip-link-padding-block-start: 10px; + --utrecht-skip-link-padding-inline-end: 20px; + --utrecht-skip-link-padding-inline-start: 20px; + --utrecht-skip-link-text-decoration: underline; + --utrecht-skip-link-z-index: 100000; + --utrecht-space-block-2xl: 28px; + --utrecht-space-block-2xs: 4px; + --utrecht-space-block-3xl: 32px; + --utrecht-space-block-3xs: 0; + --utrecht-space-block-4xl: 36px; + --utrecht-space-block-5xl: 40px; + --utrecht-space-block-lg: 20px; + --utrecht-space-block-md: 16px; + --utrecht-space-block-sm: 12px; + --utrecht-space-block-xl: 24px; + --utrecht-space-block-xs: 8px; + --utrecht-space-column-2xl: 28px; + --utrecht-space-column-2xs: 4px; + --utrecht-space-column-3xl: 32px; + --utrecht-space-column-3xs: 0; + --utrecht-space-column-4xl: 36px; + --utrecht-space-column-5xl: 40px; + --utrecht-space-column-lg: 20px; + --utrecht-space-column-md: 16px; + --utrecht-space-column-sm: 12px; + --utrecht-space-column-xl: 24px; + --utrecht-space-column-xs: 8px; + --utrecht-space-inline-2xl: 2ch; + --utrecht-space-inline-2xs: 0.25ch; + --utrecht-space-inline-3xl: 3ch; + --utrecht-space-inline-3xs: 0.125ch; + --utrecht-space-inline-lg: 1.5ch; + --utrecht-space-inline-md: 1ch; + --utrecht-space-inline-sm: 0.75ch; + --utrecht-space-inline-xl: 1.75ch; + --utrecht-space-inline-xs: 0.5ch; + --utrecht-space-row-2xl: 28px; + --utrecht-space-row-2xs: 4px; + --utrecht-space-row-3xl: 32px; + --utrecht-space-row-3xs: 0; + --utrecht-space-row-4xl: 36px; + --utrecht-space-row-5xl: 40px; + --utrecht-space-row-lg: 20px; + --utrecht-space-row-md: 16px; + --utrecht-space-row-sm: 12px; + --utrecht-space-row-xl: 24px; + --utrecht-space-row-xs: 8px; + --utrecht-spotlight-section-background-color: #e8f4fb; + --utrecht-spotlight-section-border-color: #b4dbf1; + --utrecht-spotlight-section-color: #404b4f; + --utrecht-spotlight-section-info-background-color: #e8f4fb; + --utrecht-spotlight-section-info-color: #404b4f; + --utrecht-spotlight-section-margin-block-start: 24px; + --utrecht-spotlight-section-padding-block-end: 24px; + --utrecht-spotlight-section-padding-block-start: 24px; + --utrecht-spotlight-section-padding-inline-end: 24px; + --utrecht-spotlight-section-padding-inline-start: 24px; + --utrecht-spotlight-section-warning-background-color: #fef8e6; + --utrecht-spotlight-section-warning-color: #404b4f; + --utrecht-table-background-color: #fff; + --utrecht-table-border-collapse: collapse; + --utrecht-table-cell-padding-block-end: 16px; + --utrecht-table-cell-padding-block-start: 16px; + --utrecht-table-cell-padding-inline-end: 12px; + --utrecht-table-cell-padding-inline-start: 12px; + --utrecht-table-font-family: Bolder,ArialforRotterdam,Arial,sans-serif; + --utrecht-table-font-size: 1rem; + --utrecht-table-header-border-block-end-color: #404b4f; + --utrecht-table-header-border-block-end-width: 0.2rem; + --utrecht-table-header-cell-color: #404b4f; + --utrecht-table-header-cell-font-size: 1rem; + --utrecht-table-header-cell-font-weight: 700; + --utrecht-table-header-color: #404b4f; + --utrecht-table-header-font-weight: 400; + --utrecht-table-margin-block-end: 0; + --utrecht-table-margin-block-start: 18px; + --utrecht-table-row-border-block-end-color: #cad6da; + --utrecht-table-row-border-block-end-width: 1px; + --utrecht-table-row-hover-background-color: #eff4f6; + --utrecht-textarea-min-block-size: 200px; + --utrecht-textarea-padding-block-end: 8px; + --utrecht-textarea-padding-block-start: 8px; + --utrecht-textarea-placeholder-color: #65757b; + --utrecht-textbox-border-block-end-width: auto; + --utrecht-textbox-border-color: #7c8b90; + --utrecht-textbox-border-width: 1px; + --utrecht-textbox-color: #404b4f; + --utrecht-textbox-disabled-background-color: #eff4f6; + --utrecht-textbox-font-family: Bolder,ArialforRotterdam,Arial,sans-serif; + --utrecht-textbox-font-size: 1rem; + --utrecht-textbox-invalid-border-bottom-color: #fe1818; + --utrecht-textbox-invalid-border-bottom-width: 2px; + --utrecht-textbox-line-height: 24px; + --utrecht-textbox-max-inline-size: 400px; + --utrecht-textbox-padding-block-end: 12px; + --utrecht-textbox-padding-block-start: 10px; + --utrecht-textbox-padding-inline-end: 16px; + --utrecht-textbox-padding-inline-start: 16px; + --utrecht-textbox-placeholder-color: #65757b; + --utrecht-unordered-list-font-size: 1rem; + --utrecht-unordered-list-item-margin-block-end: 8px; + --utrecht-unordered-list-item-margin-block-start: 8px; + --utrecht-unordered-list-item-padding-inline-start: 1ch; + --utrecht-unordered-list-margin-block-end: 0; + --utrecht-unordered-list-margin-block-start: 18px; + --utrecht-unordered-list-marker-color: #00811f; + --utrecht-unordered-list-padding-inline-start: 2ch; + + /* --- C. shared role layer, ramp re-pointed (fills only what B omits) --- */ + --vng-color-blue-500: #003865; + --vng-color-blue-400: #0079b8; + --vng-color-blue-300: #1791d4; + --vng-color-blue-200: #a8e8f5; + --vng-color-blue-100: #e6f6ff; + --vng-color-red-400: #d70d0d; + --vng-color-red-300: #fe1818; + --vng-color-red-200: #f7ccc5; + --vng-color-red-100: #fdf0ee; + --vng-color-green-400: #006e32; + --vng-color-green-300: #00811f; + --vng-color-green-200: #99cca0; + --vng-color-green-100: #e1efe2; + --vng-color-orange-400: #db5f06; + --vng-color-orange-300: #ef7d00; + --vng-color-orange-200: #f9e7ac; + --vng-color-orange-100: #fef8e6; + --vng-color-pink-400: #a12b5e; + --vng-color-pink-300: #c93675; + --vng-color-pink-200: #e9b6cd; + --vng-color-pink-100: #f7e3ec; + --vng-color-gray-950: #1a1f21; + --vng-color-gray-900: #2b3336; + --vng-color-gray-800: #404b4f; + --vng-color-gray-700: #536165; + --vng-color-gray-600: #65757b; + --vng-color-gray-500: #8d9da4; + --vng-color-gray-400: #b6c4c8; + --vng-color-gray-300: #cad6da; + --vng-color-gray-200: #dbe7ea; + --vng-color-gray-100: #e4eef1; + --vng-color-gray-50: #eff4f6; + --vng-color-black-txt: #404b4f; + --vng-color-black: #000000; + --vng-color-white: #ffffff; + --vng-color-extra-limegreen: #7dc90f; + --vng-color-extra-purple: #701747; + --vng-color-extra-yellow: #fdec3d; + --utrecht-textarea-background-color: var(--tilburg-form-control-background-color); + --utrecht-textarea-border-color: var(--tilburg-form-control-border-color); + --utrecht-textarea-border-width: var(--tilburg-form-control-border-width); + --utrecht-textarea-color: var(--tilburg-form-control-color); + --utrecht-textarea-font-family: var(--tilburg-document-font-family); + --utrecht-textarea-font-size: var(--tilburg-document-font-size); + --utrecht-textarea-font-weight: var(--tilburg-document-font-weight); + --utrecht-textarea-padding-inline-end: var(--tilburg-space-inline-snail); + --utrecht-textarea-padding-inline-start: var(--tilburg-space-inline-snail); + --utrecht-textarea-border-radius: var(--tilburg-border-radius-md); + --utrecht-textarea-max-inline-size: 400px; + --utrecht-textarea-border-block-end-width: var(--utrecht-textarea-border-width); + --utrecht-table-row-background-color: transparent; + --utrecht-table-footer-background-color: transparent; + --utrecht-table-header-background-color: transparent; + --utrecht-link-hover-text-decoration: none; + --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-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-hover-border-color: transparent; + --utrecht-button-secondary-action-focus-border-color: transparent; + --utrecht-button-secondary-action-disabled-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-hover-text-decoration: none; + --utrecht-breadcrumb-nav-link-focus-text-decoration: none; + --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-color-code-background-color: #eff4f6; + --utrecht-textbox-border-radius: var(--tilburg-border-radius-md); + --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-table-caption-font-size: var(--tilburg-typography-font-size-xl); + --utrecht-table-caption-margin-block-end: var(--tilburg-space-block-rabbit); + --utrecht-skip-link-box-block-end-shadow: var(--tilburg-box-shadow-lg); + --utrecht-skip-link-border-width: var(--tilburg-border-width-sm); + --utrecht-select-background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L7 5.58579L12.2929 0.292893C12.6834 -0.0976311 13.3166 -0.0976311 13.7071 0.292893C14.0976 0.683417 14.0976 1.31658 13.7071 1.70711L7.70711 7.70711C7.31658 8.09763 6.68342 8.09763 6.29289 7.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z' fill='%23001737'/%3E%3C/svg%3E"); + --utrecht-select-border-radius: var(--tilburg-border-radius-md); + --utrecht-select-padding-inline-start: var(--tilburg-space-inline-snail); + --utrecht-select-padding-inline-end: var(--tilburg-space-inline-snail); + --utrecht-select-padding-block-start: var(--tilburg-space-block-snail); + --utrecht-select-padding-block-end: var(--tilburg-space-block-snail); + --utrecht-heading-6-font-size: var(--tilburg-typography-font-size-sm); + --utrecht-heading-6-line-height: var(--tilburg-typography-line-height-md); + --utrecht-heading-5-font-size: var(--tilburg-typography-font-size-md); + --utrecht-heading-5-line-height: var(--tilburg-typography-line-height-md); + --utrecht-heading-4-font-size: var(--tilburg-typography-font-size-lg); + --utrecht-heading-4-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-hover-background-color: var(--tilburg-color-dark-alpha-50); + --utrecht-button-border-radius: var(--tilburg-border-radius-md); + --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-color: var(--tilburg-color-gray-500); + --utrecht-button-secondary-action-disabled-background-color: var( --tilburg-color-gray-50 ); + --utrecht-button-primary-action-active-color: var(--tilburg-color-white); + --utrecht-button-primary-action-disabled-color: var(--tilburg-color-gray-500); + --utrecht-button-primary-action-disabled-background-color: var( --tilburg-color-gray-50 ); + --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-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-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-color: var(--tilburg-color-orange-300); + --utrecht-feedback-warning-fill-border-color: var(--tilburg-color-orange-300); + --utrecht-feedback-warning-fill-background-color: var(--tilburg-color-orange-100); + --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-color: var(--tilburg-color-red-300); + --utrecht-feedback-danger-fill-border-color: var(--tilburg-color-red-300); + --utrecht-feedback-danger-fill-background-color: var(--tilburg-color-red-100); + --utrecht-feedback-neutral-fill-color: var(--tilburg-color-gray-900); + --utrecht-feedback-neutral-fill-border-color: var(--tilburg-color-gray-400); + --utrecht-feedback-neutral-fill-background-color: var(--tilburg-color-gray-100); + --utrecht-document-line-height: var(--tilburg-typography-line-height-md); + --utrecht-document-strong-font-weight: var(--tilburg-typography-font-weight-bold); + --utrecht-document-font-weight: var(--tilburg-typography-font-weight-normal); + --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-focus-outline-width: var(--tilburg-border-width-md); + --tilburg-focus-inverse-outline-color: var(--tilburg-color-white); + --tilburg-focus-outline-color: var(--tilburg-color-extra-purple); + --tilburg-focus-color: #004488; + --tilburg-focus-background-color: #0079b8; + --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-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-font-weight: var(--tilburg-document-font-weight); + --ams-pagination-relative-link-focus-color: var(--tilburg-focus-color); + --ams-pagination-relative-link-focus-background-color: var( --tilburg-focus-background-color ); + --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-focus-color: var(--tilburg-form-control-focus-color); + --utrecht-textbox-focus-border-color: var( --tilburg-form-control-focus-border-color ); + --utrecht-textbox-focus-background-color: var( --tilburg-form-control-focus-background-color ); + --utrecht-textbox-focus-border-width: var( --tilburg-form-control-focus-border-width ); + --utrecht-textbox-invalid-border-width: var( --tilburg-form-control-invalid-border-width ); + --utrecht-textbox-invalid-color: var(--tilburg-form-control-color); + --utrecht-textbox-invalid-border-color: var( --tilburg-form-control-invalid-border-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-caption-font-weight: var(--tilburg-heading-font-weight); + --utrecht-table-caption-font-family: var(--tilburg-heading-font-family); + --utrecht-table-caption-color: var(--tilburg-heading-color); + --utrecht-table-header-cell-font-family: var(--tilburg-document-font-family); + --utrecht-skip-link-focus-color: var(--tilburg-focus-color); + --utrecht-skip-link-focus-background-color: var(--tilburg-focus-background-color); + --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-size: var(--tilburg-document-font-size); + --utrecht-select-font-weight: var(--tilburg-document-font-weight); + --utrecht-select-font-family: var(--tilburg-document-font-family); + --utrecht-select-border-width: var(--tilburg-form-control-border-width); + --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-disabled-color: var(--tilburg-form-control-disabled-color); + --utrecht-select-disabled-border-color: var( --tilburg-form-control-disabled-border-color ); + --utrecht-select-disabled-background-color: #e9e9e9; + --utrecht-select-focus-border-width: var( --tilburg-form-control-focus-border-width ); + --utrecht-select-focus-color: var(--tilburg-form-control-focus-color); + --utrecht-select-focus-border-color: var( --tilburg-form-control-focus-border-color ); + --utrecht-select-focus-background-color: var( --tilburg-form-control-focus-background-color ); + --utrecht-select-invalid-border-width: var( --tilburg-form-control-invalid-border-width ); + --utrecht-select-invalid-color: var(--tilburg-form-control-color); + --utrecht-select-invalid-border-color: var( --tilburg-form-control-invalid-border-color ); + --utrecht-select-invalid-background-color: var( --tilburg-form-control-invalid-background-color ); + --utrecht-select-color: var(--tilburg-form-control-color); + --utrecht-select-border-color: var(--tilburg-form-control-border-color); + --utrecht-select-background-color: var(--tilburg-form-control-background-color); + --utrecht-select-icon-size: var(--tilburg-icon-functional-size); + --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-family: var(--tilburg-document-font-family); + --utrecht-paragraph-lead-color: var(--tilburg-document-color); + --utrecht-paragraph-color: var(--tilburg-document-color); + --utrecht-ordered-list-line-height: var(--tilburg-document-line-height); + --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-visited-color: var(--tilburg-interaction-color); + --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-font-family: var(--tilburg-heading-font-family); + --utrecht-heading-5-color: var(--tilburg-heading-color); + --utrecht-heading-4-font-weight: var(--tilburg-heading-font-weight); + --utrecht-heading-4-font-family: var(--tilburg-heading-font-family); + --utrecht-heading-4-color: var(--tilburg-heading-color); + --utrecht-heading-3-font-weight: var(--tilburg-heading-font-weight); + --utrecht-heading-3-font-family: var(--tilburg-heading-font-family); + --utrecht-heading-3-color: var(--tilburg-heading-color); + --utrecht-heading-2-font-weight: var(--tilburg-heading-font-weight); + --utrecht-heading-2-font-family: var(--tilburg-heading-font-family); + --utrecht-heading-2-color: var(--tilburg-heading-color); + --utrecht-heading-1-font-weight: var(--tilburg-heading-font-weight); + --utrecht-heading-1-font-family: var(--tilburg-heading-font-family); + --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-font-weight: var( --tilburg-document-font-weight ); + --utrecht-form-field-error-message-font-size: var(--tilburg-document-font-size); + --utrecht-form-field-error-message-font-family: var( --tilburg-document-font-family ); + --utrecht-form-field-error-message-color: var(--tilburg-feedback-negative-color); + --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-form-field-description-font-family: var(--tilburg-document-font-family); + --utrecht-form-field-description-color: var(--tilburg-document-subtle-color); + --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-active-border-color: var( --tilburg-form-control-active-border-color ); + --utrecht-checkbox-active-background-color: var( --tilburg-form-control-active-background-color ); + --utrecht-checkbox-active-border-width: var( --tilburg-form-control-active-border-width ); + --utrecht-checkbox-hover-background-color: var( --tilburg-form-control-hover-background-color ); + --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-checkbox-focus-border-width: var( --tilburg-form-control-focus-border-width ); + --utrecht-checkbox-focus-border-color: var( --tilburg-form-control-focus-border-color ); + --utrecht-checkbox-focus-background-color: var( --tilburg-form-control-focus-background-color ); + --utrecht-checkbox-invalid-border-width: var( --tilburg-form-control-invalid-border-width ); + --utrecht-checkbox-invalid-border-color: var( --tilburg-form-control-invalid-border-color ); + --utrecht-checkbox-invalid-background-color: var( --tilburg-form-control-invalid-background-color ); + --utrecht-checkbox-background-color: var(--tilburg-form-control-background-color); + --utrecht-checkbox-icon-size: var(--tilburg-icon-functional-size); + --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-focus-background-color: var(--tilburg-focus-background-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-font-weight: var(--tilburg-document-strong-font-weight); + --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-color: var(--tilburg-focus-color); + --utrecht-button-secondary-action-focus-background-color: var( --tilburg-focus-background-color ); + --utrecht-button-secondary-action-border-color: var(--tilburg-interaction-color); + --utrecht-button-secondary-action-hover-color: var( --tilburg-interaction-hover-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-button-primary-action-focus-background-color: var( --tilburg-focus-background-color ); + --utrecht-breadcrumb-nav-font-weight: var(--tilburg-document-font-weight); + --utrecht-breadcrumb-nav-divider-color: var(--tilburg-document-subtle-color); + --utrecht-breadcrumb-nav-link-focus-color: var(--tilburg-focus-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-font-size: var(--tilburg-document-font-size); + --utrecht-breadcrumb-nav-line-height: var(--tilburg-document-line-height); + --utrecht-badge-counter-font-weight: var(--tilburg-document-strong-font-weight); + --utrecht-badge-counter-line-height: var(--tilburg-document-line-height); + --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-icon-size: 5px; + --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); + --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 ); + --utrecht-table-cell-line-height: var(--tilburg-typography-line-height-md); + --tilburg-footer-link-text-decoration: none; + --tilburg-footer-link-hover-text-decoration: underline; + --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-font-weight: var(--utrecht-textbox-font-weight); + --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-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-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: #404b4f; + --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-font-size: inherit; + --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-margin-inline-end: unset; + --conduction-tabs-tab-max-width: unset; + --conduction-tabs-tab-text-transform: unset; + --conduction-tabs-tab-button-bottom: 0px; + --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-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-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-text-decoration: unset; + --conduction-tabs-tab-hover-font-weight: 700; + --conduction-tabs-tab-list-padding-inline-end: 2px; + --conduction-tabs-tab-panel-background-color: unset; + --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-background-image: var(--nldesign-logo-url); + --conduction-logo-footer-background-image: var(--nldesign-logo-url); + --conduction-logo-navbar-background-image: var(--nldesign-logo-url); + --conduction-primary-top-nav-current-background-color: #0084c4; + --conduction-primary-top-nav-dropdown-hover-text-decoration: underline; + --conduction-primary-top-nav-dropdown-text-decoration: none; + --conduction-tooltip-border-color: unset; + --conduction-tooltip-border-style: unset; + --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-step-marker-border-width: 2px; + --denhaag-step-marker-font-weight: 400; + --denhaag-step-marker-margin: 0; + --denhaag-step-marker-padding: 12px; + --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-process-steps-step-heading-line-height: var( --tilburg-document-line-height ); + --denhaag-process-steps-step-heading-checked-font-size: var( --tilburg-document-font-size ); + --denhaag-process-steps-step-heading-checked-font-weight: var( --tilburg-typography-font-weight-bold ); + --denhaag-process-steps-step-heading-checked-line-height: var( --tilburg-document-line-height ); + --denhaag-process-steps-step-heading-current-color: #034591; + --denhaag-process-steps-step-heading-current-font-size: var( --tilburg-document-font-size ); + --denhaag-process-steps-step-heading-current-font-weight: var( --tilburg-typography-font-weight-bold ); + --denhaag-process-steps-step-heading-current-line-height: var( --tilburg-document-line-height ); + --denhaag-process-steps-step-heading-warning-color: var( --tilburg-color-orange-300 ); + --denhaag-process-steps-step-heading-error-color: var(--tilburg-color-red-300); + --denhaag-process-steps-step-content-color: var(--tilburg-color-gray-700); + --denhaag-step-marker-font-family: var(--tilburg-typography-font-family-primary); + --denhaag-step-marker-font-size: var(--tilburg-typography-font-size-sm); + --denhaag-step-marker-checked-border-color: var(--tilburg-color-green-400); + --denhaag-step-marker-current-border-color: #034591; + --denhaag-step-marker-current-nested-color: #034591; + --denhaag-step-marker-default-background-color: var(--tilburg-color-gray-200); + --denhaag-step-marker-default-border-color: var(--tilburg-color-gray-200); + --denhaag-step-marker-default-color: var(--tilburg-color-white); + --denhaag-step-marker-default-nested-color: var(--tilburg-color-gray-200); + --denhaag-step-marker-disabled-background-color: var(--tilburg-color-gray-100); + --denhaag-step-marker-disabled-border-color: var(--tilburg-color-gray-100); + --denhaag-step-marker-disabled-color: var(--tilburg-color-gray-400); + --denhaag-step-marker-not-checked-border-color: var(--tilburg-color-gray-200); + --denhaag-step-marker-warning-border-color: var(--tilburg-color-orange-300); + --denhaag-step-marker-warning-nested-background-color: var(--tilburg-color-white); + --denhaag-step-marker-warning-nested-border-color: var(--tilburg-color-orange-300); + --denhaag-step-marker-error-border-color: var(--tilburg-color-red-300); + --denhaag-step-marker-connector-not-checked-outline-color: var( --tilburg-color-gray-200 ); + --denhaag-step-marker-connector-checked-outline-color: var( --tilburg-color-green-400 ); + --denhaag-step-marker-connector-warning-outline-color: var( --tilburg-color-orange-300 ); + --denhaag-step-marker-connector-error-outline-color: var(--tilburg-color-red-300); + --denhaag-step-marker-connector-default-outline-color: var( --tilburg-color-gray-200 ); + + /* --- E. component tokens neither A/B nor C defines --- */ + --utrecht-card-background-color: var(--opencatalogi-color-base-white); + --utrecht-card-color: var(--opencatalogi-color-gray-tint-11); + --utrecht-card-heading-color: var(--opencatalogi-color-base-black); + --utrecht-card-border-radius: 0; + --utrecht-card-box-shadow: none; + --utrecht-card-row-gap: 8px; + --utrecht-card-content-row-gap: 8px; + --utrecht-card-content-padding-block-start: 24px; + --utrecht-card-content-padding-block-end: 24px; + --utrecht-card-body-padding-inline-start: 24px; + --utrecht-card-body-padding-inline-end: 24px; + --utrecht-card-heading-padding-inline-start: 24px; + --utrecht-card-heading-padding-inline-end: 24px; + --utrecht-card-max-inline-size: 100%; + --utrecht-card-link-hover-text-decoration-thickness: 2px; + + /* --- D. --nldesign-* semantic layer --- */ + --nldesign-color-primary: #00811f; + --nldesign-color-primary-hover: #006e32; + --nldesign-color-primary-text: #ffffff; + --nldesign-color-primary-light: #e1efe2; + --nldesign-color-primary-light-hover: #99cca0; + --nldesign-color-text: #404b4f; + --nldesign-color-text-muted: #65757b; + --nldesign-color-text-light: #ffffff; + --nldesign-color-link: #00811f; + --nldesign-color-link-hover: #006e32; + --nldesign-color-link-visited: #701747; + --nldesign-color-border: #cad6da; + --nldesign-color-border-dark: #7c8b90; + --nldesign-color-background-hover: #eff4f6; + --nldesign-color-background-dark: #e4eef1; + --nldesign-color-background-darker: #dbe7ea; + --nldesign-color-placeholder-light: #e4eef1; + --nldesign-color-placeholder-dark: #cad6da; + --nldesign-color-header-background: #ffffff; + --nldesign-color-header-text: #404b4f; + --nldesign-color-nav-background: #ffffff; + --nldesign-color-button-primary-background: #c93675; + --nldesign-color-button-primary-border: #c93675; + --nldesign-color-button-primary-hover: #a12b5e; + --nldesign-color-button-primary-text: #ffffff; + --nldesign-color-error: #d70d0d; + --nldesign-color-error-hover: #9a0f0f; + --nldesign-color-warning: #db5f06; + --nldesign-color-success: #00811f; + --nldesign-color-info: #0079b8; + --nldesign-color-favorite: #ef7d00; + --nldesign-color-focus: #0079b8; + --nldesign-logo-url: url('../../img/logos/opencatalogi.svg'); + --nldesign-font-family: Bolder, ArialforRotterdam, Arial, Helvetica, sans-serif; + --nldesign-font-weight-normal: 400; + --nldesign-font-weight-bold: 700; + --nldesign-font-size-sm: 0.75rem; + --nldesign-line-height-sm: 20px; + --nldesign-font-size-md: 1rem; + --nldesign-line-height-md: 24px; + --nldesign-font-size-lg: 1.125rem; + --nldesign-line-height-lg: 28px; + --nldesign-font-size-xl: 1.25rem; + --nldesign-line-height-xl: 32px; + --nldesign-font-size-2xl: 1.5rem; + --nldesign-line-height-2xl: 36px; + --nldesign-font-size-3xl: 1.75rem; + --nldesign-line-height-3xl: 40px; + --nldesign-font-size-4xl: 2rem; + --nldesign-line-height-4xl: 48px; + --nldesign-font-size-5xl: 2.5rem; + --nldesign-line-height-5xl: 56px; + --nldesign-font-size-6xl: 3rem; + --nldesign-line-height-6xl: 72px; + --nldesign-space-0: 0; + --nldesign-space-1: 4px; + --nldesign-space-2: 8px; + --nldesign-space-3: 16px; + --nldesign-space-4: 24px; + --nldesign-space-5: 32px; + --nldesign-space-6: 64px; + --nldesign-space-7: 128px; + --nldesign-border-radius: 0; + --nldesign-border-radius-small: 0; + --nldesign-border-radius-large: 0; + --nldesign-border-radius-rounded: 0; + --nldesign-border-radius-pill: 100px; +} diff --git a/docs/reference/contrast-report.md b/docs/reference/contrast-report.md index 20843abca..9ee04ca5c 100644 --- a/docs/reference/contrast-report.md +++ b/docs/reference/contrast-report.md @@ -41,6 +41,7 @@ system reads `--nldesign-*` tokens, computed by `ContrastService` over | noaberkracht | 4.01:1 | 4.5:1 | 4.01:1 | 3.0:1 | fail | | noordoostpolder | 10.20:1 | 4.5:1 | 10.20:1 | 3.0:1 | pass | | noordwijk | 10.20:1 | 4.5:1 | 10.20:1 | 3.0:1 | pass | +| opencatalogi | 5.05:1 | 4.5:1 | 5.05:1 | 3.0:1 | pass | | provincie-zuid-holland | 10.20:1 | 4.5:1 | 10.20:1 | 3.0:1 | pass | | riddeliemers | 10.20:1 | 4.5:1 | 10.20:1 | 3.0:1 | pass | | ridderkerk | 10.20:1 | 4.5:1 | 10.20:1 | 3.0:1 | pass | diff --git a/img/ICONS.md b/img/ICONS.md index fb24fa154..db89e1328 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 (24 total) +## Logos (25 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 @@ -285,6 +285,7 @@ organisation's own identity on that organisation's own instance. **Not build out - dinkelland - drechterland - epe +- frankendesk - ggd-amsterdam - hoorn - leiden @@ -292,6 +293,7 @@ organisation's own identity on that organisation's own instance. **Not build out - nijmegen - noaberkracht - noordwijk +- opencatalogi - provincie-zuid-holland - rijkshuisstijl - rotterdam diff --git a/img/logos/opencatalogi.svg b/img/logos/opencatalogi.svg new file mode 100644 index 000000000..2263b6a5e --- /dev/null +++ b/img/logos/opencatalogi.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/project.md b/project.md index 651a793f2..0a00f1c2b 100644 --- a/project.md +++ b/project.md @@ -2,7 +2,7 @@ ## Overview -NL Design is a Nextcloud theming app that applies Dutch government design standards (NL Design System) to the Nextcloud interface. It provides 46 token sets covering national government (Rijkshuisstijl), municipalities, organizations, and the European sovereign-workplace La Suite numérique (Cunningham) design system, plus its published blue base as an optional sibling. Admins select a token set via a settings panel, and the app injects a design-system-driven CSS architecture that overrides Nextcloud's default styling with the selected organization's brand identity. +NL Design is a Nextcloud theming app that applies Dutch government design standards (NL Design System) to the Nextcloud interface. It provides 47 token sets covering national government (Rijkshuisstijl), municipalities, organizations, and the European sovereign-workplace La Suite numérique (Cunningham) design system, plus its published blue base as an optional sibling. Admins select a token set via a settings panel, and the app injects a design-system-driven CSS architecture that overrides Nextcloud's default styling with the selected organization's brand identity. ## Architecture @@ -34,7 +34,7 @@ NL Design is a Nextcloud theming app that applies Dutch government design standa | 6 | `css/overrides.css` | Maps Nextcloud `--color-*` vars to `--nldesign-*` | | 7 | `css/element-overrides.css` | Low-level element styling (fonts, containers) | -## Token Sets (46) +## Token Sets (47) - **National**: Rijkshuisstijl (default) - **Major cities**: Amsterdam, Utrecht, Rotterdam, Den Haag diff --git a/scripts/brands/opencatalogi.components.json b/scripts/brands/opencatalogi.components.json new file mode 100644 index 000000000..bd89066c3 --- /dev/null +++ b/scripts/brands/opencatalogi.components.json @@ -0,0 +1,953 @@ +{ + "_comment": [ + "CAPTURED, NOT AUTHORED. Every value here is a COMPUTED custom property read", + "off https://opencatalogi.nl/zoeken on 2026-08-20 — the reference portal's own", + "NL Design System component mapping, the same role RODS' dist/theme.css plays", + "for the rotterdam set.", + "", + "Computed rather than declared, so every var() chain is already resolved and", + "this file needs nothing from the reference's own palette to make sense.", + "", + "READ FROM `.ac-app-container`, WHICH HOISTS ANY DELIBERATELY-SCOPED TOKEN.", + "Almost every --utrecht-* here is declared on that container rather than on", + "`html`, which is why the capture reads from it — but a token the site scopes", + "deeper ON PURPOSE then lands in this file as if it were a root value.", + "", + "That cost a real defect: --tilburg-erm-font-size is undefined at `html` on the", + "reference and 12px inside the container, so `body, html {font-size: var(...)}`", + "finds nothing there and the root stays 16px. Hoisted to :root it resolved, and", + "every rem on our page shrank 25%. It is corrected in opencatalogi.json's", + "upstreamOverrides.", + "", + "So: after a re-capture, check anything consumed at `html` or `body` scope.", + "A VALUE THAT IS STILL A `{token.path}` PLACEHOLDER IS DROPPED. The reference ships --denhaag-process-steps-step-heading-font-family as the literal string `{utrecht.heading-1.font-family}` — a Style Dictionary reference that never got resolved. It is not valid CSS on that site either; carried into a token set it puts a stray `{` in the flat :root block and breaks the file for every token after it.", + "", + "Re-capture with the snippet in the commit that added this file rather than", + "editing by hand — a value edited here is a claim about a site nobody checked." + ], + "capturedFrom": "https://opencatalogi.nl/zoeken?_page=1", + "capturedOn": "2026-08-20", + "tokens": { + "--ams-date-input-border-color": "#7c8b90", + "--ams-date-input-border-style": "solid", + "--ams-date-input-border-width": "1px", + "--ams-date-input-box-shadow": "\"\"", + "--ams-date-input-color": "#404b4f", + "--ams-date-input-font-family": "Bolder,ArialforRotterdam,Arial,sans-serif", + "--ams-date-input-font-size": "1rem", + "--ams-date-input-line-height": "24px", + "--ams-date-input-padding-block": "10px", + "--ams-date-input-padding-inline": "16px", + "--ams-pagination-button-active-background-color": "#0000", + "--ams-pagination-button-active-border-color": "#0000", + "--ams-pagination-button-active-color": "#048", + "--ams-pagination-button-active-text-decoration": "underline", + "--ams-pagination-button-background-color": "#0000", + "--ams-pagination-button-border-color": "#0000", + "--ams-pagination-button-border-radius": "0px", + "--ams-pagination-button-border-width": "1px", + "--ams-pagination-button-color": "#048", + "--ams-pagination-button-current-background-color": "#f2f4f6", + "--ams-pagination-button-current-border-color": "#0000", + "--ams-pagination-button-current-text-decoration": "none", + "--ams-pagination-button-focus-text-decoration": "none", + "--ams-pagination-button-hover-background-color": "#0000", + "--ams-pagination-button-hover-border-color": "#0000", + "--ams-pagination-button-hover-color": "#048", + "--ams-pagination-button-hover-text-decoration": "underline", + "--ams-pagination-button-min-block-size": "48px", + "--ams-pagination-button-min-inline-size": "48px", + "--ams-pagination-button-padding-block-end": "12px", + "--ams-pagination-button-padding-block-start": "12px", + "--ams-pagination-button-padding-inline": "12px", + "--ams-pagination-button-padding-inline-end": "12px", + "--ams-pagination-button-padding-inline-start": "12px", + "--ams-pagination-button-text-decoration": "none", + "--ams-pagination-color": "#048", + "--ams-pagination-ellipses-padding-block-end": "12px", + "--ams-pagination-ellipses-padding-block-start": "12px", + "--ams-pagination-ellipses-padding-inline-end": "4px", + "--ams-pagination-ellipses-padding-inline-start": "4px", + "--ams-pagination-relative-link-active-background-color": "#0000", + "--ams-pagination-relative-link-active-border-color": "#0000", + "--ams-pagination-relative-link-active-color": "#048", + "--ams-pagination-relative-link-active-text-decoration": "underline", + "--ams-pagination-relative-link-background-color": "#0000", + "--ams-pagination-relative-link-border-color": "#0000", + "--ams-pagination-relative-link-border-radius": "0px", + "--ams-pagination-relative-link-border-width": "1px", + "--ams-pagination-relative-link-color": "#048", + "--ams-pagination-relative-link-disabled-background-color": "#0000", + "--ams-pagination-relative-link-disabled-border-color": "#0000", + "--ams-pagination-relative-link-disabled-color": "#7a8aa0", + "--ams-pagination-relative-link-focus-text-decoration": "none", + "--ams-pagination-relative-link-hover-background-color": "#0000", + "--ams-pagination-relative-link-hover-border-color": "#0000", + "--ams-pagination-relative-link-hover-color": "#048", + "--ams-pagination-relative-link-hover-text-decoration": "underline", + "--ams-pagination-relative-link-icon-margin-inline": "4px", + "--ams-pagination-relative-link-icon-size": "24px", + "--ams-pagination-relative-link-min-block-size": "48px", + "--ams-pagination-relative-link-min-inline-size": "48px", + "--ams-pagination-relative-link-padding-block-end": "12px", + "--ams-pagination-relative-link-padding-block-start": "12px", + "--ams-pagination-relative-link-padding-inline-end": "0px", + "--ams-pagination-relative-link-padding-inline-start": "0px", + "--ams-pagination-relative-link-text-decoration": "none", + "--conduction-card-header-color": "#404b4f", + "--conduction-card-header-date-color": "#404b4f", + "--conduction-card-header-date-font-size": "16px", + "--conduction-card-header-date-font-weight": "400", + "--conduction-card-header-date-margin-block-end": "8px", + "--conduction-card-header-title-color": "#00811f", + "--conduction-card-wrapper-background-color": "#fff", + "--conduction-card-wrapper-border-bottom-color": "#cad6da", + "--conduction-card-wrapper-border-bottom-style": "solid", + "--conduction-card-wrapper-border-bottom-width": "4px", + "--conduction-card-wrapper-border-radius": "0px", + "--conduction-card-wrapper-color": "#404b4f", + "--conduction-card-wrapper-hover-border-bottom-color": "#00811f", + "--conduction-card-wrapper-hover-border-bottom-style": "solid", + "--conduction-card-wrapper-hover-border-bottom-width": "4px", + "--conduction-card-wrapper-padding-block-end": "16px", + "--conduction-card-wrapper-padding-block-start": "16px", + "--conduction-card-wrapper-padding-inline-end": "16px", + "--conduction-card-wrapper-padding-inline-start": "16px", + "--conduction-download-card-border-color": "#cad6da", + "--conduction-download-card-border-radius": "0px", + "--conduction-download-card-border-style": "solid", + "--conduction-download-card-border-width": "1px", + "--conduction-download-card-icon-gap": "14px", + "--conduction-download-card-padding-block-end": "18px", + "--conduction-download-card-padding-block-start": "18px", + "--conduction-download-card-padding-inline-end": "18px", + "--conduction-download-card-padding-inline-start": "18px", + "--conduction-download-card-title-color": "#404b4f", + "--conduction-download-card-title-font-family": "Bolder,ArialforRotterdam,Arial,sans-serif", + "--conduction-download-card-title-font-size": "20px", + "--conduction-download-card-title-font-weight": "700", + "--conduction-download-card-title-margin-inline-end": "14px", + "--conduction-horizontal-overflow-wrapper-buttons-top": "12px", + "--conduction-horizontal-overflow-wrapper-margin-block-end": "8px", + "--conduction-horizontal-overflow-wrapper-margin-block-start": "8px", + "--conduction-horizontal-overflow-wrapper-margin-inline-end": "8px", + "--conduction-horizontal-overflow-wrapper-margin-inline-start": "8px", + "--conduction-horizontal-overflow-wrapper-width": "100%", + "--conduction-horizontal-overflow-wrapper-z-index": "1", + "--conduction-input-checkbox-border-color": "#7c8b90", + "--conduction-input-checkbox-border-radius": "0px", + "--conduction-input-checkbox-border-style": "solid", + "--conduction-input-checkbox-border-width": "1px", + "--conduction-input-checkbox-checked-border-color": "#00811f", + "--conduction-input-checkbox-checked-border-radius": "0px", + "--conduction-input-checkbox-checked-border-style": "solid", + "--conduction-input-checkbox-checked-border-width": "1px", + "--conduction-input-checkbox-checked-color": "#00811f", + "--conduction-input-checkbox-checked-hover-border-color": "#000", + "--conduction-input-checkbox-checked-hover-border-radius": "0px", + "--conduction-input-checkbox-checked-hover-border-style": "solid", + "--conduction-input-checkbox-checked-hover-border-width": "1px", + "--conduction-input-checkbox-checked-hover-color": "#000", + "--conduction-input-checkbox-color": "#fff", + "--conduction-input-checkbox-disabled-border-color": "#7c8b90", + "--conduction-input-checkbox-disabled-border-radius": "0px", + "--conduction-input-checkbox-disabled-border-style": "solid", + "--conduction-input-checkbox-disabled-border-width": "1px", + "--conduction-input-checkbox-disabled-color": "#7c8b90", + "--conduction-input-checkbox-disabled-hover-border-color": "#7c8b90", + "--conduction-input-checkbox-disabled-hover-border-radius": "0px", + "--conduction-input-checkbox-disabled-hover-border-style": "solid", + "--conduction-input-checkbox-disabled-hover-border-width": "1px", + "--conduction-input-checkbox-disabled-hover-color": "#7c8b90", + "--conduction-input-checkbox-focus-outline-color": "#000", + "--conduction-input-checkbox-focus-outline-offset": "2px", + "--conduction-input-checkbox-focus-outline-style": "solid", + "--conduction-input-checkbox-focus-outline-width": "1px", + "--conduction-input-checkbox-hover-border-color": "#00811f", + "--conduction-input-checkbox-hover-border-radius": "0px", + "--conduction-input-checkbox-hover-border-style": "solid", + "--conduction-input-checkbox-hover-border-width": "2px", + "--conduction-input-checkbox-hover-color": "#fff", + "--conduction-input-checkbox-label-color": "#404b4f", + "--conduction-input-checkbox-label-container-margin": "3px", + "--conduction-input-checkbox-label-container-padding": "3px", + "--conduction-input-checkbox-label-font-family": "Bolder,ArialforRotterdam,Arial,sans-serif", + "--conduction-input-checkbox-label-font-size": "1rem", + "--conduction-input-select-background-color": "#fff", + "--conduction-input-select-border": "1px solid #7c8b90", + "--conduction-input-select-border-radius": "0", + "--conduction-input-select-invalid-border-color": "#fe1818", + "--conduction-input-select-list-option-background-color": "#fff", + "--conduction-input-select-list-option-focus-background-color": "#fff", + "--conduction-input-select-list-option-focus-color": "#000", + "--conduction-input-select-list-option-font-family": "Bolder,ArialforRotterdam,Arial,sans-serif", + "--conduction-input-select-list-option-hover-background-color": "#00811f", + "--conduction-input-select-list-option-hover-color": "#fff", + "--conduction-input-select-list-option-hover-font-family": "Bolder,ArialforRotterdam,Arial,sans-serif", + "--conduction-input-select-list-option-selected-background-color": "#00811f", + "--conduction-input-select-list-option-selected-color": "#fff", + "--conduction-input-select-padding-block-end": "0", + "--conduction-input-select-padding-block-start": "0", + "--conduction-input-select-placeholder-color": "#65757b", + "--conduction-input-select-placeholder-font-family": "Bolder,ArialforRotterdam,Arial,sans-serif", + "--conduction-logo-footer-block-size": "46px", + "--conduction-logo-footer-inline-size": "46px", + "--conduction-logo-header-block-size": "46px", + "--conduction-logo-header-inline-size": "46px", + "--conduction-logo-navbar-block-size": "46px", + "--conduction-logo-navbar-inline-size": "46px", + "--conduction-pagination-container-padding-block-end": "0px", + "--conduction-pagination-container-padding-block-start": "0px", + "--conduction-pagination-container-padding-inline-end": "0px", + "--conduction-pagination-container-padding-inline-start": "0px", + "--conduction-pagination-current-page-background-color": "#e1efe2", + "--conduction-pagination-current-page-border-color": "#00602e", + "--conduction-pagination-current-page-border-style": "solid", + "--conduction-pagination-current-page-border-width": "1px", + "--conduction-pagination-current-page-color": "#00602e", + "--conduction-pagination-current-page-font-weight": "700", + "--conduction-pagination-item-background-color": "#fff", + "--conduction-pagination-item-border-color": "#fff", + "--conduction-pagination-item-border-radius": "0px", + "--conduction-pagination-item-border-style": "solid", + "--conduction-pagination-item-border-width": "1px", + "--conduction-pagination-item-color": "#404b4f", + "--conduction-pagination-item-font-family": "Bolder,ArialforRotterdam,Arial,sans-serif", + "--conduction-pagination-item-font-size": "1rem", + "--conduction-pagination-item-font-weight": "400", + "--conduction-pagination-item-gap": "8px", + "--conduction-pagination-item-padding-block-end": "8px", + "--conduction-pagination-item-padding-block-start": "8px", + "--conduction-pagination-item-padding-inline-end": "14px", + "--conduction-pagination-item-padding-inline-start": "14px", + "--conduction-pagination-navigation-button-background-color": "#0000", + "--conduction-pagination-navigation-button-color": "#404b4f", + "--conduction-pagination-navigation-button-disabled-background-color": "#0000", + "--conduction-pagination-navigation-button-disabled-color": "#8d9da4", + "--conduction-pagination-navigation-button-hover-background-color": "#0000", + "--conduction-pagination-navigation-button-hover-color": "#00811f", + "--conduction-pagination-navigation-button-padding-block-end": "8px", + "--conduction-pagination-navigation-button-padding-block-start": "8px", + "--conduction-pagination-navigation-button-padding-inline-end": "8px", + "--conduction-pagination-navigation-button-padding-inline-start": "8px", + "--conduction-pagination-page-hover-background-color": "#fff", + "--conduction-pagination-page-hover-border-color": "#00811f", + "--conduction-pagination-page-hover-border-style": "solid", + "--conduction-pagination-page-hover-border-width": "1px", + "--conduction-pagination-page-hover-color": "#00811f", + "--conduction-pagination-page-hover-text-decoration-thickness": "0px", + "--conduction-primary-top-nav-background-color": "#fff", + "--conduction-primary-top-nav-color": "#404b4f", + "--conduction-primary-top-nav-current-box-shadow": "inset 0 -4px #00811f", + "--conduction-primary-top-nav-current-color": "#404b4f", + "--conduction-primary-top-nav-current-mobile-box-shadow": "inset 4px 0 #00811f", + "--conduction-primary-top-nav-dropdown-background-color": "#00811f", + "--conduction-primary-top-nav-dropdown-color": "#fff", + "--conduction-primary-top-nav-dropdown-current-background-color": "#000", + "--conduction-primary-top-nav-dropdown-current-box-shadow": "inset 0 -4px #000", + "--conduction-primary-top-nav-dropdown-current-color": "#fff", + "--conduction-primary-top-nav-dropdown-current-mobile-box-shadow": "inset 4px 0 #000", + "--conduction-primary-top-nav-dropdown-hover-background-color": "#000", + "--conduction-primary-top-nav-dropdown-hover-color": "#fff", + "--conduction-primary-top-nav-hover-background-color": "#fff", + "--conduction-primary-top-nav-hover-color": "#00811f", + "--conduction-primary-top-nav-item-padding": "18px", + "--conduction-primary-top-nav-mobile-logo-padding": "18px", + "--conduction-primary-top-nav-padding-block-end": "16px", + "--conduction-primary-top-nav-padding-block-start": "16px", + "--conduction-primary-top-nav-padding-inline-end": "16px", + "--conduction-primary-top-nav-padding-inline-start": "16px", + "--conduction-primary-top-nav-toggle-icon-size": "24px", + "--conduction-secondary-top-nav-background-color": "#0000", + "--conduction-secondary-top-nav-color": "#404b4f", + "--conduction-secondary-top-nav-current-box-shadow": "inset 0 -4px #00811f", + "--conduction-secondary-top-nav-current-color": "#404b4f", + "--conduction-secondary-top-nav-font-size": "16px", + "--conduction-secondary-top-nav-font-weight": "400", + "--conduction-secondary-top-nav-hover-background-color": "#00811f", + "--conduction-secondary-top-nav-hover-color": "#fff", + "--conduction-secondary-top-nav-item-padding": "18px", + "--conduction-secondary-top-nav-padding-block-end": "16px", + "--conduction-secondary-top-nav-padding-block-start": "16px", + "--conduction-secondary-top-nav-padding-inline-end": "16px", + "--conduction-secondary-top-nav-padding-inline-start": "16px", + "--conduction-table-wrapper-scroll-button-background-color": "#fff", + "--conduction-table-wrapper-scroll-button-color": "#404b4f", + "--conduction-table-wrapper-scroll-button-hover-background-color": "#fff", + "--conduction-table-wrapper-scroll-button-hover-color": "#00811f", + "--conduction-table-wrapper-scroll-button-padding-inline-end": "14px", + "--conduction-table-wrapper-scroll-button-padding-inline-start": "14px", + "--conduction-tabs-scroll-button-background-color": "#fff", + "--conduction-tabs-scroll-button-color": "#404b4f", + "--conduction-tabs-scroll-button-hover-background-color": "#fff", + "--conduction-tabs-scroll-button-hover-color": "#00811f", + "--conduction-tabs-tab-background-color": "#0000", + "--conduction-tabs-tab-bottom": "-4px", + "--conduction-tabs-tab-color": "#404b4f", + "--conduction-tabs-tab-font-family": "Bolder,ArialforRotterdam,Arial,sans-serif", + "--conduction-tabs-tab-font-size": "14px", + "--conduction-tabs-tab-font-weight": "400", + "--conduction-tabs-tab-hover-background-color": "#0000", + "--conduction-tabs-tab-hover-color": "#00811f", + "--conduction-tabs-tab-letter-spacing": "0.02857em", + "--conduction-tabs-tab-list-border-bottom-color": "#eff4f6", + "--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-start": "0px", + "--conduction-tabs-tab-min-height": "48px", + "--conduction-tabs-tab-min-width": "160px", + "--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-background-color": "#0000", + "--conduction-tabs-tab-selected-border-bottom-color": "#00811f", + "--conduction-tabs-tab-selected-border-bottom-style": "solid", + "--conduction-tabs-tab-selected-border-bottom-width": "0.3rem", + "--conduction-tabs-tab-selected-color": "#404b4f", + "--conduction-tabs-tab-selected-font-weight": "700", + "--conduction-tooltip-background-color": "#000", + "--conduction-tooltip-border-radius": "0px", + "--conduction-tooltip-border-width": "0px", + "--conduction-tooltip-color": "#fff", + "--conduction-tooltip-padding-block-end": "8px", + "--conduction-tooltip-padding-block-start": "8px", + "--conduction-tooltip-padding-inline-end": "14px", + "--conduction-tooltip-padding-inline-start": "14px", + "--conduction-tooltip-z-index": "9999", + "--denhaag-process-steps-font-family": "Bolder,ArialforRotterdam,Arial,sans-serif", + "--denhaag-process-steps-font-size": "1rem", + "--denhaag-process-steps-step-distance": "10px", + "--denhaag-process-steps-step-heading-color": "#404b4f", + "--denhaag-process-steps-step-heading-font-size": "1.125rem", + "--denhaag-process-steps-step-heading-font-weight": "700", + "--denhaag-step-marker-background-color": "#fff", + "--denhaag-step-marker-checked-background-color": "#e6f3e9", + "--denhaag-step-marker-checked-border-width": "3px", + "--denhaag-step-marker-checked-color": "#00811f", + "--denhaag-step-marker-color": "#000", + "--denhaag-step-marker-current-background-color": "#e8f4fb", + "--denhaag-step-marker-current-border-width": "5px", + "--denhaag-step-marker-current-color": "#1791d4", + "--denhaag-step-marker-error-background-color": "#fdf0ee", + "--denhaag-step-marker-error-border-width": "1px", + "--denhaag-step-marker-error-color": "#fe1818", + "--denhaag-step-marker-not-checked-background-color": "#fff", + "--denhaag-step-marker-not-checked-border-width": "3px", + "--denhaag-step-marker-not-checked-color": "#000", + "--denhaag-step-marker-size": "30px", + "--denhaag-step-marker-warning-background-color": "#fef8e6", + "--denhaag-step-marker-warning-border-width": "1px", + "--denhaag-step-marker-warning-color": "#fdec3d", + "--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-box-shadow-lg": "0 1ratpx #0000001a", + "--tilburg-box-shadow-md": "0 4px 12px #0000001a", + "--tilburg-box-shadow-sm": "[object Object]", + "--tilburg-color-black": "#000", + "--tilburg-color-black-txt": "#333", + "--tilburg-color-blue-100": "#e6f6ff", + "--tilburg-color-blue-200": "#b9e4fc", + "--tilburg-color-blue-300": "#009dda", + "--tilburg-color-blue-400": "#026596", + "--tilburg-color-blue-500": "#003865", + "--tilburg-color-dark-alpha-100": "#0000001a", + "--tilburg-color-dark-alpha-50": "#0000000d", + "--tilburg-color-extra-limegreen": "#8bc63f", + "--tilburg-color-extra-purple": "#513090", + "--tilburg-color-extra-yellow": "#fbdd27", + "--tilburg-color-gray-100": "#f2f4f6", + "--tilburg-color-gray-200": "#e4e7ec", + "--tilburg-color-gray-300": "#cfd5dd", + "--tilburg-color-gray-400": "#98a4b6", + "--tilburg-color-gray-50": "#f9f9fa", + "--tilburg-color-gray-500": "#7a8aa0", + "--tilburg-color-gray-600": "#5b6e8a", + "--tilburg-color-gray-700": "#3f5676", + "--tilburg-color-gray-800": "#274065", + "--tilburg-color-gray-900": "#0a2750", + "--tilburg-color-gray-950": "#001737", + "--tilburg-color-green-100": "#c8f3e9", + "--tilburg-color-green-200": "#86cabb", + "--tilburg-color-green-300": "#008b6d", + "--tilburg-color-green-400": "#01745a", + "--tilburg-color-light-alpha-100": "#ffffff1a", + "--tilburg-color-light-alpha-50": "#ffffff0d", + "--tilburg-color-orange-100": "#ffe7d4", + "--tilburg-color-orange-200": "#fbb278", + "--tilburg-color-orange-300": "#f16e06", + "--tilburg-color-orange-400": "#d45f01", + "--tilburg-color-pink-100": "#ffe8f5", + "--tilburg-color-pink-200": "#f5b4d7", + "--tilburg-color-pink-300": "#c8006c", + "--tilburg-color-pink-400": "#a40058", + "--tilburg-color-red-100": "#ffe1e0", + "--tilburg-color-red-200": "#f7b0ac", + "--tilburg-color-red-300": "#e5352c", + "--tilburg-color-red-400": "#bf1a12", + "--tilburg-color-white": "#fff", + "--tilburg-erm-font-size": "12px", + "--tilburg-focus-outline-offset": "0", + "--tilburg-focus-outline-style": "dotted", + "--tilburg-footer-background-color": "#00811f", + "--tilburg-footer-color": "#fff", + "--tilburg-form-control-active-background-color": "#f2f4f6", + "--tilburg-form-control-active-border-color": "#7a8aa0", + "--tilburg-form-control-active-border-width": "2px", + "--tilburg-form-control-active-color": "#001737", + "--tilburg-form-control-background-color": "#fff", + "--tilburg-form-control-border-color": "#7a8aa0", + "--tilburg-form-control-border-width": "1px", + "--tilburg-form-control-color": "#001737", + "--tilburg-form-control-disabled-accent-color": "#7a8aa0", + "--tilburg-form-control-disabled-background-color": "#f9f9fa", + "--tilburg-form-control-disabled-border-color": "#7a8aa0", + "--tilburg-form-control-disabled-color": "#7a8aa0", + "--tilburg-form-control-focus-background-color": "#fff", + "--tilburg-form-control-focus-border-color": "#000", + "--tilburg-form-control-focus-border-width": "2px", + "--tilburg-form-control-focus-color": "#000", + "--tilburg-form-control-hover-background-color": "#f9f9fa", + "--tilburg-form-control-hover-border-color": "#7a8aa0", + "--tilburg-form-control-hover-border-width": "2px", + "--tilburg-form-control-hover-color": "#001737", + "--tilburg-form-control-invalid-background-color": "#fff", + "--tilburg-form-control-invalid-border-color": "#e5352c", + "--tilburg-form-control-invalid-border-width": "2px", + "--tilburg-form-control-invalid-color": "#e5352c", + "--tilburg-form-control-placeholder-color": "#5b6e8a", + "--tilburg-form-control-read-only-background-color": "#f9f9fa", + "--tilburg-form-control-read-only-border-color": "#7a8aa0", + "--tilburg-form-control-read-only-color": "#001737", + "--tilburg-header-background-color": "#fff", + "--tilburg-icon-functional-size": "24px", + "--tilburg-icon-toptask-size": "48px", + "--tilburg-interaction-active-color": "#048", + "--tilburg-interaction-color": "#048", + "--tilburg-interaction-hover-color": "#048", + "--tilburg-line-border-color": "#75757c", + "--tilburg-line-border-width": "1px", + "--tilburg-logo-color": "#404b4f", + "--tilburg-navigation-background-color": "#fff", + "--tilburg-navigation-color": "#404b4f", + "--tilburg-navigation-font-weight": "400", + "--tilburg-navigation-hover-background-color": "#fff", + "--tilburg-navigation-hover-color": "#00811f", + "--tilburg-navigation-hover-font-family": "Bolder,ArialforRotterdam,Arial,sans-serif", + "--tilburg-navigation-hover-font-weight": "400", + "--tilburg-pointer-target-min-size": "48px", + "--tilburg-search-card-border-color": "#e4e7ec", + "--tilburg-search-card-hover-border-color": "#00811f", + "--tilburg-size-2xl": "160px", + "--tilburg-size-2xs": "16px", + "--tilburg-size-3xs": "8px", + "--tilburg-size-4xs": "4px", + "--tilburg-size-5xs": "2px", + "--tilburg-size-icon-2xl": "32px", + "--tilburg-size-icon-3xl": "40px", + "--tilburg-size-icon-4xl": "48px", + "--tilburg-size-icon-lg": "24px", + "--tilburg-size-icon-md": "24px", + "--tilburg-size-icon-sm": "16px", + "--tilburg-size-icon-xl": "24px", + "--tilburg-size-lg": "64px", + "--tilburg-size-md": "48px", + "--tilburg-size-sm": "32px", + "--tilburg-size-xl": "96px", + "--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-flea": "1px", + "--tilburg-space-column-giraffe": "160px", + "--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-cat": "28px", + "--tilburg-space-inline-dog": "32px", + "--tilburg-space-inline-flea": "2px", + "--tilburg-space-inline-mouse": "16px", + "--tilburg-space-inline-pig": "48px", + "--tilburg-space-inline-rabbit": "24px", + "--tilburg-space-inline-rat": "20px", + "--tilburg-space-inline-snail": "12px", + "--tilburg-space-row-ant": "2px", + "--tilburg-space-row-beetle": "4px", + "--tilburg-space-row-cat": "24px", + "--tilburg-space-row-dog": "28px", + "--tilburg-space-row-elephant": "96px", + "--tilburg-space-row-flea": "1px", + "--tilburg-space-row-giraffe": "160px", + "--tilburg-space-row-horse": "64px", + "--tilburg-space-row-mouse": "12px", + "--tilburg-space-row-pig": "32px", + "--tilburg-space-row-rabbit": "20px", + "--tilburg-space-row-rat": "16px", + "--tilburg-space-row-snail": "8px", + "--tilburg-space-row-tiger": "48px", + "--tilburg-space-text-ant": "2px", + "--tilburg-space-text-beetle": "4px", + "--tilburg-space-text-cat": "16px", + "--tilburg-space-text-dog": "24px", + "--tilburg-space-text-flea": "1px", + "--tilburg-space-text-mouse": "8px", + "--tilburg-space-text-rabbit": "14px", + "--tilburg-space-text-rat": "12px", + "--tilburg-space-text-snail": "6px", + "--tilburg-status-badge-background-color": "#ffe8f5", + "--tilburg-status-badge-border-radius": "4px", + "--tilburg-status-badge-border-width": "1px", + "--tilburg-status-badge-font-size": "14px", + "--tilburg-status-badge-padding-block": "2px", + "--tilburg-status-badge-padding-inline": "4px", + "--tilburg-typography-font-family-primary": "TradeGothicCondensed18", + "--tilburg-typography-font-family-secondary": "\"Roboto\",sans-serif", + "--tilburg-typography-font-size-2xl": "32px", + "--tilburg-typography-font-size-3xl": "40px", + "--tilburg-typography-font-size-4xl": "48px", + "--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-lg": "200%", + "--tilburg-typography-line-height-md": "150%", + "--tilburg-typography-line-height-sm": "125%", + "--tilburg-typography-line-height-xs": "100%", + "--utrecht-action-busy-cursor": "wait", + "--utrecht-action-disabled-cursor": "not-allowed", + "--utrecht-action-submit-cursor": "pointer", + "--utrecht-alert-background-color": "#e8f4fb", + "--utrecht-alert-border-color": "#b4dbf1", + "--utrecht-alert-border-width": "1px", + "--utrecht-alert-color": "#404b4f", + "--utrecht-alert-error-background-color": "#fdf0ee", + "--utrecht-alert-error-border-color": "#f7ccc5", + "--utrecht-alert-error-border-width": "1px", + "--utrecht-alert-error-color": "#404b4f", + "--utrecht-alert-icon-color": "#00689e", + "--utrecht-alert-icon-error-color": "#d70d0d", + "--utrecht-alert-icon-gap": "8px", + "--utrecht-alert-icon-ok-color": "#00811f", + "--utrecht-alert-icon-warning-color": "#a65600", + "--utrecht-alert-ok-background-color": "#e6f3e9", + "--utrecht-alert-ok-border-color": "#acd6b7", + "--utrecht-alert-ok-border-width": "1px", + "--utrecht-alert-ok-color": "#404b4f", + "--utrecht-alert-padding-block-end": "24px", + "--utrecht-alert-padding-block-start": "24px", + "--utrecht-alert-padding-inline-end": "24px", + "--utrecht-alert-padding-inline-start": "24px", + "--utrecht-alert-warning-background-color": "#fef8e6", + "--utrecht-alert-warning-border-color": "#f9e7ac", + "--utrecht-alert-warning-border-width": "1px", + "--utrecht-alert-warning-color": "#404b4f", + "--utrecht-badge-background-color": "#000", + "--utrecht-badge-border-radius": "0", + "--utrecht-badge-color": "#fff", + "--utrecht-badge-counter-background-color": "#000", + "--utrecht-badge-counter-border-radius": "50%", + "--utrecht-badge-counter-color": "#fff", + "--utrecht-badge-counter-font-family": "Bolder,ArialforRotterdam,Arial,sans-serif", + "--utrecht-badge-counter-font-size": "1rem", + "--utrecht-badge-counter-padding-block": "5px", + "--utrecht-badge-counter-padding-inline": "5px", + "--utrecht-badge-counter-text-decoration": "none", + "--utrecht-badge-font-size": "14px", + "--utrecht-badge-font-weight": "400", + "--utrecht-badge-padding-block": "8px", + "--utrecht-badge-padding-inline": "8px", + "--utrecht-breadcrumb-nav-font-family": "Bolder,ArialforRotterdam,Arial,sans-serif", + "--utrecht-breadcrumb-nav-link-color": "#00811f", + "--utrecht-breadcrumb-nav-link-current-color": "#65757b", + "--utrecht-breadcrumb-nav-link-disabled-color": "#65757b", + "--utrecht-breadcrumb-nav-link-hover-color": "#00811f", + "--utrecht-breadcrumb-nav-separator-color": "#00811f", + "--utrecht-breadcrumb-nav-separator-icon-size": "16px", + "--utrecht-button-background-color": "#00811f", + "--utrecht-button-border-width": "0", + "--utrecht-button-color": "#fff", + "--utrecht-button-disabled-background-color": "#cad6da", + "--utrecht-button-disabled-color": "#65757b", + "--utrecht-button-focus-border-color": "#000", + "--utrecht-button-font-family": "Bolder,ArialforRotterdam,Arial,sans-serif", + "--utrecht-button-font-size": "1rem", + "--utrecht-button-font-weight": "700", + "--utrecht-button-hover-background-color": "#006e32", + "--utrecht-button-icon-gap": "8px", + "--utrecht-button-padding-block-end": "13px", + "--utrecht-button-padding-block-start": "11px", + "--utrecht-button-padding-inline-end": "16px", + "--utrecht-button-padding-inline-start": "16px", + "--utrecht-button-primary-action-background-color": "#c93675", + "--utrecht-button-primary-action-color": "#fff", + "--utrecht-button-primary-action-hover-background-color": "#a12b5e", + "--utrecht-button-secondary-action-background-color": "#000", + "--utrecht-button-secondary-action-color": "#fff", + "--utrecht-button-secondary-action-hover-background-color": "#404b4f", + "--utrecht-button-secondary-action-hover-border-color": "none", + "--utrecht-button-subtle-background-color": "#fff", + "--utrecht-button-subtle-color": "#00811f", + "--utrecht-button-subtle-disabled-background-color": "#cad6da", + "--utrecht-button-subtle-disabled-color": "#65757b", + "--utrecht-button-subtle-hover-color": "#00602e", + "--utrecht-calendar-icon-size": "24px", + "--utrecht-calendar-navigation-color": "#00811f", + "--utrecht-calendar-navigation-label-color": "#000", + "--utrecht-calendar-navigation-label-min-inline-size": "200px", + "--utrecht-calendar-navigation-padding-block-end": "2px", + "--utrecht-calendar-navigation-padding-block-start": "2px", + "--utrecht-calendar-table-days-item-day-active-border-color": "#0000", + "--utrecht-calendar-table-days-item-day-border-color": "#0000", + "--utrecht-calendar-table-days-item-day-border-width": "2px", + "--utrecht-calendar-table-days-item-day-color": "#000", + "--utrecht-calendar-table-days-item-day-emphasis-border-color": "#0000", + "--utrecht-calendar-table-days-item-day-focus-border-color": "#0000", + "--utrecht-calendar-table-days-item-day-hover-border-color": "#000", + "--utrecht-calendar-table-days-item-day-hover-color": "#00811f", + "--utrecht-calendar-table-days-item-day-is-today-background-color": "#e6ffeb", + "--utrecht-calendar-table-days-item-day-is-today-border-color": "#00811f", + "--utrecht-calendar-table-days-item-day-is-today-color": "#00811f", + "--utrecht-calendar-table-days-item-day-is-today-font-weight": "700", + "--utrecht-calendar-table-days-item-day-out-of-the-month-border-color": "#0000", + "--utrecht-calendar-table-days-item-day-out-of-the-month-color": "#cad6da", + "--utrecht-calendar-table-days-item-day-selected-background-color": "#c93675", + "--utrecht-calendar-table-days-item-day-selected-color": "#fff", + "--utrecht-calendar-table-days-item-day-selected-font-weight": "700", + "--utrecht-calendar-table-days-item-day-size": "44px", + "--utrecht-calendar-table-weeks-item-line-height": "24px", + "--utrecht-calendar-table-weeks-item-padding-block-end": "10px", + "--utrecht-calendar-table-weeks-item-padding-block-start": "4px", + "--utrecht-calendar-table-weeks-item-width": "44px", + "--utrecht-checkbox-border-color": "#7c8b90", + "--utrecht-checkbox-border-radius": "0px", + "--utrecht-checkbox-border-width": "1px", + "--utrecht-checkbox-checked-background-color": "#00811f", + "--utrecht-checkbox-checked-border-color": "#00811f", + "--utrecht-checkbox-checked-border-width": "1px", + "--utrecht-checkbox-checked-color": "#00811f", + "--utrecht-checkbox-color": "#fff", + "--utrecht-checkbox-disabled-background-color": "#7c8b90", + "--utrecht-checkbox-disabled-border-color": "#7c8b90", + "--utrecht-checkbox-disabled-border-width": "1px", + "--utrecht-checkbox-disabled-color": "#7c8b90", + "--utrecht-checkbox-hover-border-color": "#00811f", + "--utrecht-checkbox-hover-border-width": "2px", + "--utrecht-checkbox-hover-color": "#fff", + "--utrecht-checkbox-size": "24px", + "--utrecht-code-background-color": "#eff4f6", + "--utrecht-code-block-background-color": "#eff4f6", + "--utrecht-code-block-color": "#404b4f", + "--utrecht-code-block-font-size": "1rem", + "--utrecht-code-block-margin-block-end": "24px", + "--utrecht-code-block-margin-block-start": "24px", + "--utrecht-code-block-padding-block-end": "24px", + "--utrecht-code-block-padding-block-start": "24px", + "--utrecht-code-block-padding-inline-start": "24px", + "--utrecht-code-color": "#404b4f", + "--utrecht-data-list-item-key-font-weight": "700", + "--utrecht-data-list-margin-block-end": "16px", + "--utrecht-data-list-margin-block-start": "16px", + "--utrecht-data-list-rows-item-margin-block-start": "16px", + "--utrecht-data-list-rows-item-value-margin-block-start": "8px", + "--utrecht-document-background-color": "#fff", + "--utrecht-document-color": "#404b4f", + "--utrecht-document-font-family": "Bolder,ArialforRotterdam,Arial,sans-serif", + "--utrecht-document-font-size": "1rem", + "--utrecht-figure-caption-color": "#e4eef1", + "--utrecht-figure-caption-font-size": "1rem", + "--utrecht-figure-caption-line-height": "28px", + "--utrecht-focus-outline-color": "#000", + "--utrecht-focus-outline-offset": "1px", + "--utrecht-focus-outline-style": "solid", + "--utrecht-focus-outline-width": "1px", + "--utrecht-form-control-background-color": "#fff", + "--utrecht-form-control-block-size": "46px", + "--utrecht-form-control-border-color": "#7c8b90", + "--utrecht-form-control-border-radius": "0", + "--utrecht-form-control-border-width": "1px", + "--utrecht-form-control-color": "#404b4f", + "--utrecht-form-control-disabled-background-color": "#eff4f6", + "--utrecht-form-control-disabled-color": "#65757b", + "--utrecht-form-control-font-family": "Bolder,ArialforRotterdam,Arial,sans-serif", + "--utrecht-form-control-font-size": "1rem", + "--utrecht-form-control-line-height": "24px", + "--utrecht-form-control-max-inline-size": "320px", + "--utrecht-form-control-padding-block-end": "12px", + "--utrecht-form-control-padding-block-start": "12px", + "--utrecht-form-control-padding-inline-end": "16px", + "--utrecht-form-control-padding-inline-start": "16px", + "--utrecht-form-control-placeholder-color": "#65757b", + "--utrecht-form-field-description-font-size": "0.75rem", + "--utrecht-form-field-description-invalid-color": "#b53322", + "--utrecht-form-field-description-margin-block-end": "12px", + "--utrecht-form-field-description-margin-block-start": "12px", + "--utrecht-form-field-description-valid-color": "#006e32", + "--utrecht-form-field-description-warning-color": "#fef8e6", + "--utrecht-form-field-invalid-border-inline-start-color": "#fe1818", + "--utrecht-form-field-invalid-border-inline-start-width": "3px", + "--utrecht-form-field-invalid-padding-inline-start": "12px", + "--utrecht-form-field-margin-block-end": "4px", + "--utrecht-form-field-margin-block-start": "13px", + "--utrecht-form-fieldset-legend-color": "#404b4f", + "--utrecht-form-fieldset-legend-font-size": "1.25rem", + "--utrecht-form-fieldset-legend-font-weight": "700", + "--utrecht-form-fieldset-legend-line-height": "32px", + "--utrecht-form-fieldset-margin-block-start": "40px", + "--utrecht-form-label-checkbox-font-weight": "400", + "--utrecht-form-label-color": "#404b4f", + "--utrecht-form-label-font-size": "1rem", + "--utrecht-form-label-font-weight": "700", + "--utrecht-form-label-radio-font-weight": "400", + "--utrecht-form-select-background-color": "#fff", + "--utrecht-form-select-border-width": "1px", + "--utrecht-form-select-color": "#404b4f", + "--utrecht-form-select-max-inline-size": "100%", + "--utrecht-heading-1-font-size": "3rem", + "--utrecht-heading-1-line-height": "72px", + "--utrecht-heading-2-font-size": "2.5rem", + "--utrecht-heading-2-line-height": "56px", + "--utrecht-heading-3-font-size": "2rem", + "--utrecht-heading-3-line-height": "48px", + "--utrecht-heading-font-weight": "700", + "--utrecht-icon-gap": "8px", + "--utrecht-icon-inset-block-start": "0.1em", + "--utrecht-link-active-color": "#00602e", + "--utrecht-link-color": "#00811f", + "--utrecht-link-focus-color": "#00602e", + "--utrecht-link-focus-text-decoration-thickness": "auto", + "--utrecht-link-hover-color": "#00602e", + "--utrecht-link-hover-text-decoration-thickness": "auto", + "--utrecht-link-icon-margin-inline": "4px", + "--utrecht-link-text-decoration": "underline", + "--utrecht-link-text-decoration-thickness": "auto", + "--utrecht-link-text-underline-offset": "auto", + "--utrecht-ordered-list-font-size": "1rem", + "--utrecht-ordered-list-item-margin-block-end": "4px", + "--utrecht-ordered-list-item-margin-block-start": "4px", + "--utrecht-ordered-list-item-padding-inline-start": "1ch", + "--utrecht-ordered-list-margin-block-end": "14px", + "--utrecht-ordered-list-margin-block-start": "14px", + "--utrecht-ordered-list-padding-inline-start": "32px", + "--utrecht-page-footer-background-color": "#00811f", + "--utrecht-page-footer-color": "#fff", + "--utrecht-page-footer-link-hover-text-decoration": "underline", + "--utrecht-page-footer-link-hover-text-decoration-thickness": "1", + "--utrecht-page-footer-link-text-decoration": "underline", + "--utrecht-page-footer-link-text-decoration-thickness": "1", + "--utrecht-page-footer-logo-max-height": "48px", + "--utrecht-page-footer-logo-max-width": "240px", + "--utrecht-page-footer-padding-block-end": "64px", + "--utrecht-page-footer-padding-block-start": "40px", + "--utrecht-page-footer-padding-inline-end": "72px", + "--utrecht-page-footer-padding-inline-start": "72px", + "--utrecht-page-header-background-color": "#fff", + "--utrecht-page-header-color": "#404b4f", + "--utrecht-page-header-logo-max-width": "222px", + "--utrecht-page-header-padding-block-end": "14px", + "--utrecht-page-header-padding-block-start": "14px", + "--utrecht-page-margin-inline-end": "24px", + "--utrecht-page-margin-inline-start": "24px", + "--utrecht-page-max-inline-size": "1140px", + "--utrecht-paragraph-font-family": "Bolder,ArialforRotterdam,Arial,sans-serif", + "--utrecht-paragraph-font-size": "1rem", + "--utrecht-paragraph-font-weight": "400", + "--utrecht-paragraph-lead-font-size": "1.75rem", + "--utrecht-paragraph-lead-font-weight": "400", + "--utrecht-paragraph-lead-line-height": "36px", + "--utrecht-paragraph-line-height": "28px", + "--utrecht-paragraph-small-font-size": "0.75rem", + "--utrecht-paragraph-small-line-height": "20px", + "--utrecht-radio-button-background-color": "#fff", + "--utrecht-radio-button-border-color": "#7c8b90", + "--utrecht-radio-button-border-width": "1px", + "--utrecht-radio-button-checked-active-background-color": "#fff", + "--utrecht-radio-button-checked-active-border-color": "#00811f", + "--utrecht-radio-button-checked-active-border-width": "1px", + "--utrecht-radio-button-checked-active-color": "#fff", + "--utrecht-radio-button-checked-background-color": "#fff", + "--utrecht-radio-button-checked-border-color": "#00811f", + "--utrecht-radio-button-checked-border-width": "5px", + "--utrecht-radio-button-checked-color": "#fff", + "--utrecht-radio-button-checked-disabled-background-color": "#7c8b90", + "--utrecht-radio-button-checked-disabled-border-color": "#7c8b90", + "--utrecht-radio-button-checked-disabled-border-width": "1px", + "--utrecht-radio-button-checked-disabled-color": "#7c8b90", + "--utrecht-radio-button-checked-focus-background-color": "#fff", + "--utrecht-radio-button-checked-focus-border-color": "#00811f", + "--utrecht-radio-button-checked-focus-border-width": "1px", + "--utrecht-radio-button-checked-focus-color": "#fff", + "--utrecht-radio-button-checked-hover-background-color": "#fff", + "--utrecht-radio-button-checked-hover-border-color": "#000", + "--utrecht-radio-button-checked-hover-border-width": "5px", + "--utrecht-radio-button-checked-hover-color": "#fff", + "--utrecht-radio-button-disabled-background-color": "#eff4f6", + "--utrecht-radio-button-disabled-border-color": "#7c8b90", + "--utrecht-radio-button-disabled-border-width": "1px", + "--utrecht-radio-button-disabled-color": "#7c8b90", + "--utrecht-radio-button-focus-background-color": "#fff", + "--utrecht-radio-button-focus-border-color": "#00811f", + "--utrecht-radio-button-focus-border-width": "5px", + "--utrecht-radio-button-focus-color": "#fff", + "--utrecht-radio-button-hover-background-color": "#fff", + "--utrecht-radio-button-hover-border-color": "#00811f", + "--utrecht-radio-button-hover-border-width": "2px", + "--utrecht-radio-button-invalid-background-color": "#fff", + "--utrecht-radio-button-invalid-border-color": "#fe1818", + "--utrecht-radio-button-invalid-border-width": "1px", + "--utrecht-radio-button-invalid-color": "#fe1818", + "--utrecht-radio-button-min-block-size": "16px", + "--utrecht-radio-button-min-inline-size": "16px", + "--utrecht-select-border-bottom-width": "auto", + "--utrecht-select-max-inline-size": "400px", + "--utrecht-separator-block-size": "2px", + "--utrecht-separator-color": "#eff4f6", + "--utrecht-separator-margin-block-end": "0px", + "--utrecht-separator-margin-block-start": "0px", + "--utrecht-skip-link-background-color": "#00811f", + "--utrecht-skip-link-border-color": "#0000", + "--utrecht-skip-link-border-radius": "3px", + "--utrecht-skip-link-color": "#fff", + "--utrecht-skip-link-focus-border-color": "#0000", + "--utrecht-skip-link-focus-text-decoration": "underline", + "--utrecht-skip-link-min-block-size": "20px", + "--utrecht-skip-link-min-inline-size": "20px", + "--utrecht-skip-link-padding-block-end": "10px", + "--utrecht-skip-link-padding-block-start": "10px", + "--utrecht-skip-link-padding-inline-end": "20px", + "--utrecht-skip-link-padding-inline-start": "20px", + "--utrecht-skip-link-text-decoration": "underline", + "--utrecht-skip-link-z-index": "100000", + "--utrecht-space-block-2xl": "28px", + "--utrecht-space-block-2xs": "4px", + "--utrecht-space-block-3xl": "32px", + "--utrecht-space-block-3xs": "0", + "--utrecht-space-block-4xl": "36px", + "--utrecht-space-block-5xl": "40px", + "--utrecht-space-block-lg": "20px", + "--utrecht-space-block-md": "16px", + "--utrecht-space-block-sm": "12px", + "--utrecht-space-block-xl": "24px", + "--utrecht-space-block-xs": "8px", + "--utrecht-space-column-2xl": "28px", + "--utrecht-space-column-2xs": "4px", + "--utrecht-space-column-3xl": "32px", + "--utrecht-space-column-3xs": "0", + "--utrecht-space-column-4xl": "36px", + "--utrecht-space-column-5xl": "40px", + "--utrecht-space-column-lg": "20px", + "--utrecht-space-column-md": "16px", + "--utrecht-space-column-sm": "12px", + "--utrecht-space-column-xl": "24px", + "--utrecht-space-column-xs": "8px", + "--utrecht-space-inline-2xl": "2ch", + "--utrecht-space-inline-2xs": "0.25ch", + "--utrecht-space-inline-3xl": "3ch", + "--utrecht-space-inline-3xs": "0.125ch", + "--utrecht-space-inline-lg": "1.5ch", + "--utrecht-space-inline-md": "1ch", + "--utrecht-space-inline-sm": "0.75ch", + "--utrecht-space-inline-xl": "1.75ch", + "--utrecht-space-inline-xs": "0.5ch", + "--utrecht-space-row-2xl": "28px", + "--utrecht-space-row-2xs": "4px", + "--utrecht-space-row-3xl": "32px", + "--utrecht-space-row-3xs": "0", + "--utrecht-space-row-4xl": "36px", + "--utrecht-space-row-5xl": "40px", + "--utrecht-space-row-lg": "20px", + "--utrecht-space-row-md": "16px", + "--utrecht-space-row-sm": "12px", + "--utrecht-space-row-xl": "24px", + "--utrecht-space-row-xs": "8px", + "--utrecht-spotlight-section-background-color": "#e8f4fb", + "--utrecht-spotlight-section-border-color": "#b4dbf1", + "--utrecht-spotlight-section-color": "#404b4f", + "--utrecht-spotlight-section-info-background-color": "#e8f4fb", + "--utrecht-spotlight-section-info-color": "#404b4f", + "--utrecht-spotlight-section-margin-block-start": "24px", + "--utrecht-spotlight-section-padding-block-end": "24px", + "--utrecht-spotlight-section-padding-block-start": "24px", + "--utrecht-spotlight-section-padding-inline-end": "24px", + "--utrecht-spotlight-section-padding-inline-start": "24px", + "--utrecht-spotlight-section-warning-background-color": "#fef8e6", + "--utrecht-spotlight-section-warning-color": "#404b4f", + "--utrecht-table-background-color": "#fff", + "--utrecht-table-border-collapse": "collapse", + "--utrecht-table-cell-padding-block-end": "16px", + "--utrecht-table-cell-padding-block-start": "16px", + "--utrecht-table-cell-padding-inline-end": "12px", + "--utrecht-table-cell-padding-inline-start": "12px", + "--utrecht-table-font-family": "Bolder,ArialforRotterdam,Arial,sans-serif", + "--utrecht-table-font-size": "1rem", + "--utrecht-table-header-border-block-end-color": "#404b4f", + "--utrecht-table-header-border-block-end-width": "0.2rem", + "--utrecht-table-header-cell-color": "#404b4f", + "--utrecht-table-header-cell-font-size": "1rem", + "--utrecht-table-header-cell-font-weight": "700", + "--utrecht-table-header-color": "#404b4f", + "--utrecht-table-header-font-weight": "400", + "--utrecht-table-margin-block-end": "0", + "--utrecht-table-margin-block-start": "18px", + "--utrecht-table-row-border-block-end-color": "#cad6da", + "--utrecht-table-row-border-block-end-width": "1px", + "--utrecht-table-row-hover-background-color": "#eff4f6", + "--utrecht-textarea-min-block-size": "200px", + "--utrecht-textarea-padding-block-end": "8px", + "--utrecht-textarea-padding-block-start": "8px", + "--utrecht-textarea-placeholder-color": "#65757b", + "--utrecht-textbox-border-block-end-width": "auto", + "--utrecht-textbox-border-color": "#7c8b90", + "--utrecht-textbox-border-width": "1px", + "--utrecht-textbox-color": "#404b4f", + "--utrecht-textbox-disabled-background-color": "#eff4f6", + "--utrecht-textbox-font-family": "Bolder,ArialforRotterdam,Arial,sans-serif", + "--utrecht-textbox-font-size": "1rem", + "--utrecht-textbox-invalid-border-bottom-color": "#fe1818", + "--utrecht-textbox-invalid-border-bottom-width": "2px", + "--utrecht-textbox-line-height": "24px", + "--utrecht-textbox-max-inline-size": "400px", + "--utrecht-textbox-padding-block-end": "12px", + "--utrecht-textbox-padding-block-start": "10px", + "--utrecht-textbox-padding-inline-end": "16px", + "--utrecht-textbox-padding-inline-start": "16px", + "--utrecht-textbox-placeholder-color": "#65757b", + "--utrecht-unordered-list-font-size": "1rem", + "--utrecht-unordered-list-item-margin-block-end": "8px", + "--utrecht-unordered-list-item-margin-block-start": "8px", + "--utrecht-unordered-list-item-padding-inline-start": "1ch", + "--utrecht-unordered-list-margin-block-end": "0", + "--utrecht-unordered-list-margin-block-start": "18px", + "--utrecht-unordered-list-marker-color": "#00811f", + "--utrecht-unordered-list-padding-inline-start": "2ch" + } +} diff --git a/scripts/brands/opencatalogi.json b/scripts/brands/opencatalogi.json new file mode 100644 index 000000000..eb5516e5c --- /dev/null +++ b/scripts/brands/opencatalogi.json @@ -0,0 +1,404 @@ +{ + "id": "opencatalogi", + "name": "OpenCatalogi", + "description": "Design tokens for OpenCatalogi, transcribed from the tokens opencatalogi.nl ships", + + "provenance": "the custom properties served by opencatalogi.nl (read 2026-08-20)", + + "componentsFile": "opencatalogi.components.json", + + "_comment_source": [ + "There is no npm package for this design system, so the palette was read", + "off the running site: 94 --opencatalogi-* custom properties, extracted", + "from the stylesheets opencatalogi.nl serves on 2026-08-20.", + "", + "THE VALUES ARE TRANSCRIBED IN FULL, not aliased to another set. The gray,", + "green, magenta, blue, red, purple and yellow ramps happen to be identical", + "to the Rotterdam Design System's today, and the font stack is literally", + "RODS' — OpenCatalogi's system is RODS-derived. Writing those as", + "`var(--rods-...)` would turn a fact about today into a dependency, and", + "the day RODS moves, this set would move with it without anyone deciding", + "that it should.", + "", + "The families below that RODS does NOT have — pink, lime-green,", + "soft-green, dark-blue, dark-green, dark-yellow, light-blue, brown,", + "dark-brown, bright-orange — are the ones that make this its own set." + ], + + "palette": { + "--opencatalogi-color-base-black": "#000000", + "--opencatalogi-color-base-white": "#ffffff", + "--opencatalogi-color-base-gray": "var(--opencatalogi-color-gray-tint-01)", + "--opencatalogi-color-base-green": "var(--opencatalogi-color-green-tint-01)", + "--opencatalogi-color-base-magenta": "var(--opencatalogi-color-magenta-tint-01)", + + "--opencatalogi-color-gray-tint-01": "#eff4f6", + "--opencatalogi-color-gray-tint-02": "#e4eef1", + "--opencatalogi-color-gray-tint-03": "#dbe7ea", + "--opencatalogi-color-gray-tint-04": "#cad6da", + "--opencatalogi-color-gray-tint-05": "#b6c4c8", + "--opencatalogi-color-gray-tint-06": "#9dafb6", + "--opencatalogi-color-gray-tint-07": "#8d9da4", + "--opencatalogi-color-gray-tint-08": "#7c8b90", + "--opencatalogi-color-gray-tint-09": "#65757b", + "--opencatalogi-color-gray-tint-10": "#536165", + "--opencatalogi-color-gray-tint-11": "#404b4f", + + "--opencatalogi-color-green-tint-01": "#00811f", + "--opencatalogi-color-green-tint-02": "#006e32", + "--opencatalogi-color-green-tint-03": "#00602e", + "--opencatalogi-color-green-light-tint-01": "#57b051", + "--opencatalogi-color-green-light-tint-02": "#11a03e", + "--opencatalogi-color-green-light-tint-03": "#11a03e", + "--opencatalogi-color-dark-green-tint-01": "#004c31", + "--opencatalogi-color-dark-green-tint-02": "#07341b", + "--opencatalogi-color-dark-green-tint-03": "#001905", + "--opencatalogi-color-soft-green-tint-01": "#e1efe2", + "--opencatalogi-color-soft-green-tint-02": "#d1e6ce", + "--opencatalogi-color-soft-green-tint-03": "#99cca0", + "--opencatalogi-color-green-blue-tint-01": "#09957b", + "--opencatalogi-color-green-blue-tint-02": "#00846d", + "--opencatalogi-color-green-blue-tint-03": "#00755f", + "--opencatalogi-color-lime-green-tint-01": "#7dc90f", + "--opencatalogi-color-lime-green-tint-02": "#73b129", + "--opencatalogi-color-lime-green-tint-03": "#62a72b", + + "--opencatalogi-color-blue-tint-01": "#1791d4", + "--opencatalogi-color-blue-tint-02": "#0084c4", + "--opencatalogi-color-blue-tint-03": "#0079b8", + "--opencatalogi-color-dark-blue-tint-01": "#00548f", + "--opencatalogi-color-dark-blue-tint-02": "#084279", + "--opencatalogi-color-dark-blue-tint-03": "#083968", + "--opencatalogi-color-light-blue-tint-01": "#a8e8f5", + "--opencatalogi-color-light-blue-tint-02": "#92cfe1", + "--opencatalogi-color-light-blue-tint-03": "#76c1d3", + + "--opencatalogi-color-magenta-tint-01": "#c93675", + "--opencatalogi-color-magenta-tint-02": "#a12b5e", + "--opencatalogi-color-magenta-tint-03": "#792046", + "--opencatalogi-color-pink-tint-01": "#e6007e", + "--opencatalogi-color-pink-tint-02": "#ce0075", + "--opencatalogi-color-pink-tint-03": "#b21271", + "--opencatalogi-color-purple-tint-01": "#701747", + "--opencatalogi-color-purple-tint-02": "#510e33", + "--opencatalogi-color-purple-tint-03": "#420c2f", + + "--opencatalogi-color-red-tint-01": "#fe1818", + "--opencatalogi-color-red-tint-02": "#d70d0d", + "--opencatalogi-color-red-tint-03": "#9a0f0f", + "--opencatalogi-color-orange-tint-01": "#e3614d", + "--opencatalogi-color-orange-tint-02": "#d85644", + "--opencatalogi-color-orange-tint-03": "#ce4c3b", + "--opencatalogi-color-bright-orange-tint-01": "#ef7d00", + "--opencatalogi-color-bright-orange-tint-02": "#e56e02", + "--opencatalogi-color-bright-orange-tint-03": "#db5f06", + + "--opencatalogi-color-yellow-tint-01": "#fdec3d", + "--opencatalogi-color-yellow-tint-02": "#edde26", + "--opencatalogi-color-yellow-tint-03": "#e1d600", + "--opencatalogi-color-dark-yellow-tint-01": "#edb500", + "--opencatalogi-color-dark-yellow-tint-02": "#e0a200", + "--opencatalogi-color-dark-yellow-tint-03": "#d99600", + + "--opencatalogi-color-brown-tint-01": "#ab8061", + "--opencatalogi-color-brown-tint-02": "#997056", + "--opencatalogi-color-brown-tint-03": "#8b644c", + "--opencatalogi-color-dark-brown-tint-01": "#6b4236", + "--opencatalogi-color-dark-brown-tint-02": "#5e362c", + "--opencatalogi-color-dark-brown-tint-03": "#552d25", + + "--opencatalogi-typography-sans-serif-font-family": "Bolder, ArialforRotterdam, Arial, sans-serif", + "--opencatalogi-typography-weight-scale-normal-font-weight": "400", + "--opencatalogi-typography-weight-scale-bold-font-weight": "700", + "--opencatalogi-typography-scale-sm-font-size": "0.75rem", + "--opencatalogi-typography-scale-sm-line-height": "20px", + "--opencatalogi-typography-scale-md-font-size": "1rem", + "--opencatalogi-typography-scale-md-line-height": "24px", + "--opencatalogi-typography-scale-lg-font-size": "1.125rem", + "--opencatalogi-typography-scale-lg-line-height": "28px", + "--opencatalogi-typography-scale-xl-font-size": "1.25rem", + "--opencatalogi-typography-scale-xl-line-height": "32px", + "--opencatalogi-typography-scale-2xl-font-size": "1.5rem", + "--opencatalogi-typography-scale-2xl-line-height": "36px", + "--opencatalogi-typography-scale-3xl-font-size": "1.75rem", + "--opencatalogi-typography-scale-3xl-line-height": "40px", + "--opencatalogi-typography-scale-4xl-font-size": "2rem", + "--opencatalogi-typography-scale-4xl-line-height": "48px", + "--opencatalogi-typography-scale-5xl-font-size": "2.5rem", + "--opencatalogi-typography-scale-5xl-line-height": "56px", + "--opencatalogi-typography-scale-6xl-font-size": "3rem", + "--opencatalogi-typography-scale-6xl-line-height": "72px" + }, + + "_comment_ramp": [ + "The role layer addresses colour through --vng-color-* / --tilburg-color-*", + "names. Those are the role layer's INTERNAL vocabulary; substituting them", + "re-brands all 707 var()-derived component declarations at once.", + "", + "Values are the palette above, restated. `from` names the palette token so", + "a reader can check the mapping without holding both files open." + ], + + "ramp": { + "white": { "value": "#ffffff", "from": "base-white" }, + "black": { "value": "#000000", "from": "base-black" }, + "black-txt": { "value": "#404b4f", "from": "gray-tint-11" }, + + "gray-50": { "value": "#eff4f6", "from": "gray-tint-01" }, + "gray-100": { "value": "#e4eef1", "from": "gray-tint-02" }, + "gray-200": { "value": "#dbe7ea", "from": "gray-tint-03" }, + "gray-300": { "value": "#cad6da", "from": "gray-tint-04" }, + "gray-400": { "value": "#b6c4c8", "from": "gray-tint-05" }, + "gray-500": { "value": "#8d9da4", "from": "gray-tint-07" }, + "gray-600": { "value": "#65757b", "from": "gray-tint-09 (>=4.5:1 on white — carries text-muted)" }, + "gray-700": { "value": "#536165", "from": "gray-tint-10" }, + "gray-800": { "value": "#404b4f", "from": "gray-tint-11" }, + "gray-900": { "value": "#2b3336", "from": "DERIVED — gray-tint-11 darkened; the ramp ends at tint-11" }, + "gray-950": { "value": "#1a1f21", "from": "DERIVED — gray-tint-11 darkened; the ramp ends at tint-11" }, + + "blue-100": { "value": "#e6f6ff", "from": "MEASURED — the search band background on opencatalogi.nl" }, + "blue-200": { "value": "#a8e8f5", "from": "light-blue-tint-01" }, + "blue-300": { "value": "#1791d4", "from": "blue-tint-01" }, + "blue-400": { "value": "#0079b8", "from": "blue-tint-03" }, + "blue-500": { "value": "#003865", "from": "MEASURED — the sub-footer band and card metadata colour" }, + + "green-100": { "value": "#e1efe2", "from": "soft-green-tint-01" }, + "green-200": { "value": "#99cca0", "from": "soft-green-tint-03" }, + "green-300": { "value": "#00811f", "from": "green-tint-01 — the brand green" }, + "green-400": { "value": "#006e32", "from": "green-tint-02" }, + + "red-100": { "value": "#fdf0ee", "from": "DERIVED — red-tint-01 lightened; no notification tints in this set" }, + "red-200": { "value": "#f7ccc5", "from": "DERIVED — red-tint-01 lightened; no notification tints in this set" }, + "red-300": { "value": "#fe1818", "from": "red-tint-01" }, + "red-400": { "value": "#d70d0d", "from": "red-tint-02" }, + + "orange-100": { "value": "#fef8e6", "from": "DERIVED — dark-yellow-tint-01 lightened" }, + "orange-200": { "value": "#f9e7ac", "from": "DERIVED — dark-yellow-tint-01 lightened" }, + "orange-300": { "value": "#ef7d00", "from": "bright-orange-tint-01" }, + "orange-400": { "value": "#db5f06", "from": "bright-orange-tint-03" }, + + "pink-100": { "value": "#f7e3ec", "from": "DERIVED — magenta-tint-01 lightened" }, + "pink-200": { "value": "#e9b6cd", "from": "DERIVED — magenta-tint-01 lightened" }, + "pink-300": { "value": "#c93675", "from": "magenta-tint-01" }, + "pink-400": { "value": "#a12b5e", "from": "magenta-tint-02" }, + + "extra-purple": { "value": "#701747", "from": "purple-tint-01" }, + "extra-yellow": { "value": "#fdec3d", "from": "yellow-tint-01" }, + "extra-limegreen": { "value": "#7dc90f", "from": "lime-green-tint-01" }, + + "code-background-color": { "value": "#eff4f6", "from": "gray-tint-01" }, + "dark-alpha-50": { "value": "#0000000d", "from": "role-layer geometry — unbranded" }, + "dark-alpha-100": { "value": "#0000001a", "from": "role-layer geometry — unbranded" }, + "light-alpha-50": { "value": "#ffffff0d", "from": "role-layer geometry — unbranded" }, + "light-alpha-100": { "value": "#ffffff1a", "from": "role-layer geometry — unbranded" } + }, + + "_comment_literal_overrides": [ + "Colours the role layer hard-codes inside component declarations rather", + "than aliasing the ramp, so they have no ramp NAME to substitute on.", + "#004488 is deliberately KEPT: measured on opencatalogi.nl, the pagination", + "buttons render rgb(0, 68, 136) — the role layer's own blue, which that", + "site does not override either. Matching it means changing nothing." + ], + + "literalOverrides": { + "#0277bd": { "value": "#0079b8", "from": "blue-tint-03" }, + "#0078c8": { "value": "#0084c4", "from": "blue-tint-02" }, + "#dbebfc": { "value": "#e6f6ff", "from": "MEASURED — search band background" }, + "#75757c": { "value": "#65757b", "from": "gray-tint-09" }, + "#c9c9d2": { "value": "#cad6da", "from": "gray-tint-04" } + }, + + "_comment_upstream_overrides": [ + "THE LOGO IS A TOKEN, and until this was set it was not a themeable one.", + "", + "`nlds-app.css` paints `.con-logo-container` from", + "--conduction-logo-*-background-image, and the shared role layer ships a VNG", + "mark baked into that token as a data URI. The capture from opencatalogi.nl", + "deliberately skips data URIs — one of them is roughly a megabyte of base64", + "— so the token fell through to the role layer's default and an OpenCatalogi", + "portal wore the VNG logo in its header AND its footer.", + "", + "These are overrides rather than gap-fillers precisely because something", + "already defines them; the generator drops a gap-filler that shadows, which", + "is how the distinction earned its keep here.", + "", + "Pointing them at --nldesign-logo-url makes the logo follow the token set", + "for EVERY brand, which is what a portal switching themes has to mean." + ], + + "upstreamOverrides": { + "--tilburg-erm-font-size": { + "value": "16px", + "reason": "THE CAPTURE HOISTED A DELIBERATELY-SCOPED TOKEN. On opencatalogi.nl this is undefined at `html` and 12px only inside `.ac-app-container`, so the `body, html {font-size: var(--tilburg-erm-font-size)}` rule finds nothing and the root stays 16px. Read from the container and written to `:root`, that rule DID find it and every rem on the page shrank 25% — heading-3 rendered 24px against the reference's 32px, small text 9px against 12px" + }, + "--tilburg-typography-font-family-primary": { + "value": "TradeGothicCondensed18, Bolder, ArialforRotterdam, 'Arial Narrow', Arial, sans-serif", + "reason": "captured verbatim as `TradeGothicCondensed18` with NO fallback — a licensed face this app does not serve, so every heading fell back to the browser's default SERIF" + }, + "--conduction-logo-header-background-image": { + "value": "var(--nldesign-logo-url)", + "reason": "the role layer bakes in a VNG mark; the logo must follow the token set" + }, + "--conduction-logo-footer-background-image": { + "value": "var(--nldesign-logo-url)", + "reason": "same VNG mark in the footer band" + }, + "--conduction-logo-navbar-background-image": { + "value": "var(--nldesign-logo-url)", + "reason": "same VNG mark in the navbar" + } + }, + + "_comment_keep_literals": [ + "Role-layer colours this set does NOT re-brand, because opencatalogi.nl", + "does not re-brand them either — it loads the same shared layer and lets", + "these through. Matching the reference here means changing nothing, so", + "each is listed with what it is rather than left in the generator's", + "'unmapped' warning, where ten permanent entries would train a reader to", + "skip the one that matters." + ], + + "keepLiterals": { + "#004488": "pagination button text — MEASURED rgb(0, 68, 136) on opencatalogi.nl", + "#004589": "near-duplicate of #004488 in the role layer", + "#034591": "role-layer link blue, not overridden by the reference", + "#000000": "base black", + "#ffb612": "role-layer focus/attention yellow", + "#e11919": "role-layer invalid-state red", + "#e9e9e9": "role-layer disabled surface", + "#fffefa": "role-layer warning surface", + "#ffe6e6": "role-layer error surface", + "#e7f9f4": "role-layer success surface" + }, + + "_comment_semantic": [ + "MEASURED ON opencatalogi.nl AT 1280px, 2026-08-20 — every value below is", + "a computed style read off the running page, not a guess:", + "", + " breadcrumb + 'Lees meer' link rgb(0, 129, 31) green, underlined", + " search submit button rgb(201, 54, 117) magenta, radius 0", + " textbox border rgb(124, 139, 144)", + " heading colour rgb(64, 75, 79)", + " card metadata (date, type) rgb(0, 56, 101) 12px/700", + " footer band rgb(0, 129, 31)", + " sub-footer band rgb(0, 56, 101)", + " search band rgb(230, 246, 255)", + "", + "LINKS ARE GREEN AND UNDERLINED here, where Rotterdam's are black. That is", + "the clearest visible difference between the two sets and the reason this", + "is a set of its own rather than an alias of rotterdam." + ], + + "semantic": { + "primary": "#00811f", + "primary-hover": "#006e32", + "primary-text": "#ffffff", + "primary-light": "#e1efe2", + "primary-light-hover": "#99cca0", + + "text": "#404b4f", + "text-muted": "#65757b", + "text-light": "#ffffff", + + "link": "#00811f", + "link-hover": "#006e32", + "link-visited": "#701747", + + "border": "#cad6da", + "border-dark": "#7c8b90", + + "background-hover": "#eff4f6", + "background-dark": "#e4eef1", + "background-darker": "#dbe7ea", + + "placeholder-light": "#e4eef1", + "placeholder-dark": "#cad6da", + + "header-background": "#ffffff", + "header-text": "#404b4f", + "nav-background": "#ffffff", + + "button-primary-background": "#c93675", + "button-primary-border": "#c93675", + "button-primary-hover": "#a12b5e", + "button-primary-text": "#ffffff", + + "error": "#d70d0d", + "error-hover": "#9a0f0f", + "warning": "#db5f06", + "success": "#00811f", + "info": "#0079b8", + "favorite": "#ef7d00", + + "focus": "#0079b8" + }, + + "_comment_component_overrides": [ + "The card family, as on rotterdam — consumed by the bundled CSS and", + "defined by almost no set in this repo.", + "", + "The chrome bands are here too because they are what a pixel comparison", + "against opencatalogi.nl actually turns on, and none of them has a", + "--nldesign-* name to carry it." + ], + + "componentOverrides": { + "--utrecht-card-background-color": "var(--opencatalogi-color-base-white)", + "--utrecht-card-color": "var(--opencatalogi-color-gray-tint-11)", + "--utrecht-card-heading-color": "var(--opencatalogi-color-base-black)", + "--utrecht-card-border-radius": "0", + "--utrecht-card-box-shadow": "none", + "--utrecht-card-row-gap": "8px", + "--utrecht-card-content-row-gap": "8px", + "--utrecht-card-content-padding-block-start": "24px", + "--utrecht-card-content-padding-block-end": "24px", + "--utrecht-card-body-padding-inline-start": "24px", + "--utrecht-card-body-padding-inline-end": "24px", + "--utrecht-card-heading-padding-inline-start": "24px", + "--utrecht-card-heading-padding-inline-end": "24px", + "--utrecht-card-max-inline-size": "100%", + "--utrecht-card-link-hover-text-decoration-thickness": "2px" + }, + + "logo": "img/logos/opencatalogi.svg", + + "typography": { + "fontFamily": "Bolder, ArialforRotterdam, Arial, Helvetica, sans-serif", + "from": "opencatalogi-typography-sans-serif-font-family", + "_comment": "opencatalogi.nl sets its site title in TradeGothicCondensed18, which is licensed and not redistributed here. Everything else on the page uses the stack below, and the title falls through to it.", + "weightNormal": "400", + "weightBold": "700", + "scale": { + "sm": { "fontSize": "0.75rem", "lineHeight": "20px" }, + "md": { "fontSize": "1rem", "lineHeight": "24px" }, + "lg": { "fontSize": "1.125rem", "lineHeight": "28px" }, + "xl": { "fontSize": "1.25rem", "lineHeight": "32px" }, + "2xl": { "fontSize": "1.5rem", "lineHeight": "36px" }, + "3xl": { "fontSize": "1.75rem", "lineHeight": "40px" }, + "4xl": { "fontSize": "2rem", "lineHeight": "48px" }, + "5xl": { "fontSize": "2.5rem", "lineHeight": "56px" }, + "6xl": { "fontSize": "3rem", "lineHeight": "72px" } + } + }, + + "space": { + "0": "0", + "1": "4px", + "2": "8px", + "3": "16px", + "4": "24px", + "5": "32px", + "6": "64px", + "7": "128px" + }, + + "borderRadius": { + "default": "0", + "small": "0", + "large": "0", + "rounded": "0", + "pill": "100px", + "_comment": "Square-cornered throughout — measured 0px on the textbox, the submit button, the sort select and the pagination buttons." + } +} diff --git a/scripts/generate-brand-set.mjs b/scripts/generate-brand-set.mjs index 7882c2338..ecc0dd98a 100644 --- a/scripts/generate-brand-set.mjs +++ b/scripts/generate-brand-set.mjs @@ -185,9 +185,11 @@ function declaration(name, value) { function main() { const [brandId, upstreamPath, upstreamVersion] = process.argv.slice(2) - if (!brandId || !upstreamPath) { + // The upstream path is required only by brands that declare one; a brand + // with an inline palette is generated with the id alone. + if (!brandId) { console.error( - 'Usage: node scripts/generate-brand-set.mjs [upstreamVersion]', + 'Usage: node scripts/generate-brand-set.mjs [pathToUpstreamPackage] [upstreamVersion]', ) process.exit(1) } @@ -200,41 +202,97 @@ function main() { const brand = JSON.parse(readFileSync(brandPath, 'utf8')) - // ---- A. the brand's own palette ------------------------------------- - const palettePath = join(upstreamPath, brand.upstream.paletteFile) - const themePath = join(upstreamPath, brand.upstream.themeFile) - - for (const required of [palettePath, themePath]) { - if (existsSync(required) === false) { - console.error(`Upstream file missing: ${required}`) - process.exit(1) + // ---- A + B. the brand's own palette and component mapping ------------ + // + // TWO WAYS IN, because not every design system publishes an npm package. + // + // `upstream` — read the brand's palette and its own NL Design System + // mapping out of a published package (RODS does this). + // `palette` — the brand states its palette inline, and contributes NO + // component mapping of its own; section C then fills the + // whole component vocabulary from the shared role layer. + // + // The inline form exists for a set whose tokens were READ OFF A RUNNING + // SITE rather than installed. Those values are transcribed here in full + // rather than aliased to whichever other set they happen to match today — + // two design systems agreeing on a colour is a fact about now, not a + // dependency, and expressing it as one makes the wrong set move when the + // other one changes. + const palette = new Map() + let brandComponents = new Map() + + if (brand.upstream !== undefined) { + const palettePath = join(upstreamPath, brand.upstream.paletteFile) + const themePath = join(upstreamPath, brand.upstream.themeFile) + + for (const required of [palettePath, themePath]) { + if (existsSync(required) === false) { + console.error(`Upstream file missing: ${required}`) + process.exit(1) + } } - } - const prefix = brand.upstream.palettePrefix - const palette = effective( - readDeclarations(readFileSync(palettePath, 'utf8')).filter((d) => - d.name.startsWith(prefix), - ), - ) + const prefix = brand.upstream.palettePrefix + for (const [name, value] of effective( + readDeclarations(readFileSync(palettePath, 'utf8')).filter((d) => + d.name.startsWith(prefix), + ), + )) { + palette.set(name, value) + } - // ---- B. the brand's own component mapping --------------------------- - // Everything that is NOT the brand's private palette prefix: these are the - // NL Design System component tokens the brand itself decided on. - const brandComponents = effective( - readDeclarations(readFileSync(themePath, 'utf8')).filter( - (d) => d.name.startsWith(prefix) === false, - ), - ) + // Everything that is NOT the brand's private palette prefix: these are + // the NL Design System component tokens the brand itself decided on. + brandComponents = effective( + readDeclarations(readFileSync(themePath, 'utf8')).filter( + (d) => d.name.startsWith(prefix) === false, + ), + ) - // The theme file also restates palette entries; fold them in so every - // var() reference in B resolves without reaching outside this file. - for (const { name, value } of readDeclarations( - readFileSync(themePath, 'utf8'), - )) { - if (name.startsWith(prefix) === true) { + // The theme file also restates palette entries; fold them in so every + // var() reference in B resolves without reaching outside this file. + for (const { name, value } of readDeclarations( + readFileSync(themePath, 'utf8'), + )) { + if (name.startsWith(prefix) === true) { + palette.set(name, value) + } + } + } else { + for (const [name, value] of Object.entries(brand.palette ?? {})) { + if (name.startsWith('_') === true) { + continue + } palette.set(name, value) } + + if (palette.size === 0) { + console.error( + `Brand '${brandId}' declares neither an \`upstream\` package nor an inline \`palette\`.`, + ) + process.exit(1) + } + + // A brand whose component mapping was CAPTURED rather than installed. + // Same role as `upstream.themeFile`: these are the brand's own + // decisions about NL Design System components, and section C fills only + // what they leave out. + // + // Held in a separate file because it is machine-captured and roughly + // 900 entries; mixing it into the hand-authored brand file would bury + // the decisions a reader needs in a wall of measurements. + if (brand.componentsFile !== undefined) { + const componentsPath = join(BRANDS_DIR, brand.componentsFile) + if (existsSync(componentsPath) === false) { + console.error(`Captured components file missing: ${componentsPath}`) + process.exit(1) + } + + const captured = JSON.parse(readFileSync(componentsPath, 'utf8')) + for (const [name, value] of Object.entries(captured.tokens ?? {})) { + brandComponents.set(name, value) + } + } } // ---- Deliberate overrides of the brand's own upstream mapping -------- @@ -250,18 +308,20 @@ function main() { const upstreamOverrides = Object.entries(brand.upstreamOverrides ?? {}).filter( ([name]) => name.startsWith('_') === false, ) - const missedOverrides = [] + + // Applied to A and B here; section C is built below and takes its pass + // there, because it does not exist yet at this point. An override that + // matches nothing in ANY of the three is reported after C is assembled. + const overrideTargets = new Set(upstreamOverrides.map(([name]) => name)) + const overrideApplied = new Set() for (const [name, entry] of upstreamOverrides) { if (brandComponents.has(name) === true) { brandComponents.set(name, entry.value) + overrideApplied.add(name) } else if (palette.has(name) === true) { palette.set(name, entry.value) - } else { - // Not an override of anything. Reported rather than silently - // promoted to a new token: the intent was to correct an upstream - // value, and if that value is gone the reason no longer applies. - missedOverrides.push(name) + overrideApplied.add(name) } } @@ -331,6 +391,16 @@ function main() { continue } + // The role layer's own pass at the deliberate overrides. The logo + // tokens live HERE rather than in A or B — the role layer bakes a VNG + // mark into them — so without this an override of one matches nothing + // and is reported as stale while the wrong logo still ships. + if (overrideTargets.has(name) === true) { + const entry = brand.upstreamOverrides[name] + value = entry.value + overrideApplied.add(name) + } + roleFill.push({ name, value }) if ( name.startsWith('--vng-color-') === false @@ -393,9 +463,12 @@ function main() { } // ---- emit ----------------------------------------------------------- - const provenance = upstreamVersion - ? `${brand.upstream.package}@${upstreamVersion}` - : brand.upstream.package + let provenance = brand.provenance ?? 'an inline palette' + if (brand.upstream !== undefined) { + provenance = upstreamVersion + ? `${brand.upstream.package}@${upstreamVersion}` + : brand.upstream.package + } const lines = [] lines.push('/**') @@ -502,9 +575,11 @@ function main() { if (entry !== undefined) { entry.name = brand.name entry.description = brand.description - entry.upstreamPackage = brand.upstream.package - if (upstreamVersion) { - entry.upstreamVersion = upstreamVersion + if (brand.upstream !== undefined) { + entry.upstreamPackage = brand.upstream.package + if (upstreamVersion) { + entry.upstreamVersion = upstreamVersion + } } entry.theming = { primary_color: brand.semantic.primary, @@ -551,6 +626,10 @@ function main() { } } + const missedOverrides = upstreamOverrides + .map(([name]) => name) + .filter((name) => (overrideApplied.has(name) === false)) + if (missedOverrides.length > 0) { console.log(`\n ⚠ ${missedOverrides.length} upstreamOverrides entry/entries matched NOTHING upstream`) console.log(' and were dropped. They were written to correct a value that no longer') @@ -574,9 +653,28 @@ function main() { } } + // Literals the brand KEEPS on purpose. Separated from the warning below so + // that warning keeps meaning something: a list that always prints ten + // entries on a correct set is one nobody reads, and the eleventh — the real + // drift — arrives into an audience that has learned to skip it. + const keptLiterals = Object.entries(brand.keepLiterals ?? {}).filter( + ([hex]) => hex.startsWith('_') === false, + ) + + for (const [hex] of keptLiterals) { + unsubstituted.delete(normaliseHex(hex)) + } + + if (keptLiterals.length > 0) { + console.log(`\n Role-layer literals KEPT deliberately (${keptLiterals.length}):`) + for (const [hex, reason] of keptLiterals) { + console.log(` ${hex} ${reason}`) + } + } + if (unsubstituted.size === 0) { console.log( - '\n Ramp coverage: complete — no role-layer literal survived unmapped.', + '\n Ramp coverage: complete — every remaining role-layer literal is accounted for.', ) } else { const total = [...unsubstituted.values()].reduce((a, b) => a + b, 0) diff --git a/token-sets.json b/token-sets.json index 4538ee40b..5d6f4d129 100644 --- a/token-sets.json +++ b/token-sets.json @@ -360,6 +360,16 @@ "upstreamPackage": "@gemeente-rotterdam/design-tokens", "upstreamVersion": "1.1.0" }, + { + "id": "opencatalogi", + "name": "OpenCatalogi", + "description": "Design tokens for OpenCatalogi, transcribed from the tokens opencatalogi.nl ships", + "theming": { + "primary_color": "#00811f", + "background_color": "#FFFFFF", + "logo": "img/logos/opencatalogi.svg" + } + }, { "id": "xxllnc", "name": "xxllnc",