Gemeente Dinkelland
Token set dinkelland: 253 declared by this set, 160 from the defaults layer.
Contrast: primary text on primary 10.20:1, primary on background 10.20:1 (pass).
Colours (Kleuren)
| Token | Value | Dark mode | Source | Paints |
|---|---|---|---|---|
--nldesign-color-background-dark |  #e0e1e2 |  #2c2e2f | defaults | Background dark, Table header background |
--nldesign-color-background-darker |  #d0d1d2 |  #3a3b3c | defaults | Background darker |
--nldesign-color-background-hover |  #e8e9ea |  #252728 | defaults | --color-main-background |
--nldesign-color-border |  #b4b4b4 |  #535353 | defaults | Border color, Select border, Table row rule, Text input border, --nldesign-component-separator-border-color |
--nldesign-color-border-dark |  #696969 |  #929292 | defaults | Border dark, Border max contrast |
--nldesign-color-button-primary-background |  #154273 |  #81afe2 | defaults | |
--nldesign-color-button-primary-border | #154273 | #81afe2 | defaults | |
--nldesign-color-button-primary-hover |  #1d5499 |  #6397da | defaults | |
--nldesign-color-button-primary-text |  #ffffff |  #9e9e9e | defaults | |
--nldesign-color-error |  #dc3545 |  #c42c3a | this set | Border error, Element error, Error color, Text error, Text input invalid |
--nldesign-color-error-hover |  #8b1a15 |  #e2726d | defaults | Error hover |
--nldesign-color-error-rgb | 213, 43, 30 | 196, 44, 58 | defaults | --color-error-text |
--nldesign-color-favorite |  #e17000 |  #f48c25 | defaults | --filter-background-blur |
--nldesign-color-focus |  rgba(0, 123, 199, 0.5) |  #39adf580 | defaults | Button focus ring |
--nldesign-color-focus-rgb | 0, 123, 199 | 57, 173, 245 | defaults | |
--nldesign-color-header-background | #ffffff |  #141414 | defaults | |
--nldesign-color-header-text |  #333333 |  #cccccc | defaults | |
--nldesign-color-info |  #007bc7 |  #39adf5 | defaults | Info color, Text input focus, --color-info-hover |
--nldesign-color-info-rgb | 0, 123, 199 | 57, 173, 245 | defaults | |
--nldesign-color-link | #154273 | #81afe2 | defaults | Link colour |
--nldesign-color-link-hover | #007bc7 | #39adf5 | defaults | Link hover colour |
--nldesign-color-link-visited |  #42145f |  #c392e3 | defaults | --nldesign-component-link-visited-color |
--nldesign-color-logo-background | transparent | defaults | ||
--nldesign-color-nav-background | #ffffff | #141414 | defaults | |
--nldesign-color-placeholder-dark | #cccccc |  #3f3f3f | defaults | Placeholder dark |
--nldesign-color-placeholder-light |  #e5e5e5 |  #2a2a2a | defaults | Placeholder light |
--nldesign-color-primary | #154273 |  #2f80d9 | defaults | Badge background, Primary button background, Primary color, Primary element color, Primary element light text and 7 more |
--nldesign-color-primary-hover | #1d5499 | #1d5499 | defaults | Primary button hover, Primary element hover, Primary hover color |
--nldesign-color-primary-light |  #e8f0f8 |  #112131 | defaults | Primary element light, Tertiary button hover, --color-primary-element-text-dark |
--nldesign-color-primary-light-hover |  #d4e4f2 |  #172d41 | defaults | Primary element light hover, Primary light hover, Tertiary button pressed |
--nldesign-color-primary-text | #ffffff |  #111111 | defaults | Badge number, Primary button label, Primary element text, Primary text color |
--nldesign-color-success |  #39870c |  #9ceb6f | defaults | Border success, Element success, Success color, Text success |
--nldesign-color-success-rgb | 57, 135, 12 | 156, 235, 111 | defaults | --color-success-hover |
--nldesign-color-text | #333333 | #cccccc | defaults | Body text colour, Main text color, Table header label, --nldesign-component-form-field-label-color, --nldesign-component-heading-1-color and 8 more |
--nldesign-color-text-light | #ffffff | #9e9e9e | defaults | --color-text-maxcontrast-default |
--nldesign-color-text-muted | #696969 | #9e9e9e | defaults | Text lighter, Text max contrast |
--nldesign-color-warning |  #ffc107 |  #edb50c | this set | Element warning, Text warning, Warning color |
--nldesign-color-warning-rgb | 225, 112, 0 | 237, 181, 12 | defaults | --color-warning-hover |
--nldesign-component-badge-background-color | `var( | |||
| --nldesign-color-primary | ||||
| )` | #81afe2 | defaults | ||
--nldesign-component-badge-color | `var( | |||
| --nldesign-color-primary-text | ||||
| )` | #9e9e9e | defaults | ||
--nldesign-component-button-active-background-color | `var( | |||
| --nldesign-color-primary-light-hover | ||||
| )` | #172d41 | defaults | ||
--nldesign-component-button-active-color | `var( | |||
| --nldesign-color-primary | ||||
| )` |  #8cb9ea | defaults | ||
--nldesign-component-button-background-color | transparent | defaults | ||
--nldesign-component-button-border-color | `var( | |||
| --nldesign-color-primary | ||||
| )` | #81afe2 | defaults | ||
--nldesign-component-button-color | var(--nldesign-color-primary) | #8cb9ea | defaults | |
--nldesign-component-button-disabled-background-color | #e5e5e5 | #2a2a2a | defaults | |
--nldesign-component-button-disabled-border-color | #b4b4b4 | #535353 | defaults | |
--nldesign-component-button-disabled-color | #696969 | #9e9e9e | defaults | |
--nldesign-component-button-focus-border-color | `var( | |||
| --nldesign-color-focus | ||||
| )` | #39adf580 | defaults | ||
--nldesign-component-button-hover-background-color | `var( | |||
| --nldesign-color-primary-light | ||||
| )` | #112131 | defaults | ||
--nldesign-component-button-hover-border-color | `var( | |||
| --nldesign-color-primary-hover | ||||
| )` | #6397da | defaults | ||
--nldesign-component-button-hover-color | `var( | |||
| --nldesign-color-primary | ||||
| )` | #8cb9ea | defaults | ||
--nldesign-component-button-primary-action-background-color | `var( | |||
| --nldesign-color-primary | ||||
| )` | #81afe2 | defaults | ||
--nldesign-component-button-primary-action-border-color | `var( | |||
| --nldesign-color-primary | ||||
| )` | #81afe2 | defaults | ||
--nldesign-component-button-primary-action-color | `var( | |||
| --nldesign-color-primary-text | ||||
| )` | #9e9e9e | defaults | ||
--nldesign-component-button-primary-action-hover-background-color | `var( | |||
| --nldesign-color-primary-hover | ||||
| )` | #6397da | defaults | ||
--nldesign-component-button-primary-action-hover-color | `var( | |||
| --nldesign-color-primary-text | ||||
| )` | #9e9e9e | defaults | ||
--nldesign-component-button-secondary-action-background-color | transparent | defaults | ||
--nldesign-component-button-secondary-action-border-color | `var( | |||
| --nldesign-color-primary | ||||
| )` | #81afe2 | defaults | ||
--nldesign-component-button-secondary-action-color | `var( | |||
| --nldesign-color-primary | ||||
| )` | #8cb9ea | defaults | ||
--nldesign-component-button-secondary-action-hover-background-color | `var( | |||
| --nldesign-color-primary-light | ||||
| )` | #112131 | defaults | ||
--nldesign-component-form-field-label-color | var(--nldesign-color-text) | #cccccc | defaults | |
--nldesign-component-form-fieldset-border-color | `var( | |||
| --nldesign-color-border | ||||
| )` | #535353 | defaults | ||
--nldesign-component-form-select-border-color | var(--nldesign-color-border) | #535353 | defaults | |
--nldesign-component-form-select-focus-border-color | var(--nldesign-color-info) | #39adf5 | defaults | |
--nldesign-component-heading-1-color | var(--nldesign-component-heading-color) | #cccccc | defaults | |
--nldesign-component-heading-2-color | var(--nldesign-component-heading-color) | #cccccc | defaults | |
--nldesign-component-heading-3-color | var(--nldesign-component-heading-color) | #cccccc | defaults | |
--nldesign-component-heading-4-color | var(--nldesign-component-heading-color) | #cccccc | defaults | |
--nldesign-component-heading-5-color | var(--nldesign-component-heading-color) | #cccccc | defaults | |
--nldesign-component-heading-6-color | var(--nldesign-component-heading-color) | #cccccc | defaults | |
--nldesign-component-heading-color | var(--nldesign-color-text) | #cccccc | defaults | |
--nldesign-component-link-color | var(--nldesign-color-link) | #8cb9ea | defaults | |
--nldesign-component-link-hover-color | var(--nldesign-color-link-hover) |  #3db5ff | defaults | |
--nldesign-component-link-visited-color | var(--nldesign-color-link-visited) |  #cea0eb | defaults | |
--nldesign-component-ordered-list-color | `var( | |||
| --nldesign-color-text | ||||
| )` | #cccccc | defaults | ||
--nldesign-component-paragraph-color | var(--nldesign-color-text) | #cccccc | defaults | |
--nldesign-component-separator-border-color | var(--nldesign-color-border) | #535353 | defaults | |
--nldesign-component-table-border-color | var(--nldesign-color-border) | #535353 | defaults | |
--nldesign-component-table-header-background-color | `var( | |||
| --nldesign-color-background-dark | ||||
| )` | #2c2e2f | defaults | ||
--nldesign-component-table-header-color | var(--nldesign-color-text) | #cccccc | defaults | |
--nldesign-component-table-row-hover-background-color | `var( | |||
| --nldesign-color-background-hover | ||||
| )` | #252728 | defaults | ||
--nldesign-component-textbox-background-color | #ffffff | #9e9e9e | defaults | |
--nldesign-component-textbox-border-color | var(--nldesign-color-border) | #9e9e9e | defaults | |
--nldesign-component-textbox-color | var(--nldesign-color-text) | #cccccc | defaults | |
--nldesign-component-textbox-disabled-background-color | #e5e5e5 | #9e9e9e | defaults | |
--nldesign-component-textbox-disabled-color | #696969 | #9e9e9e | defaults | |
--nldesign-component-textbox-focus-border-color | var(--nldesign-color-info) | #3db5ff | defaults | |
--nldesign-component-textbox-hover-border-color | `var( | |||
| --nldesign-color-border-dark | ||||
| )` | #9e9e9e | defaults | ||
--nldesign-component-textbox-invalid-border-color | var(--nldesign-color-error) |  #e25a67 | defaults | |
--nldesign-component-unordered-list-color | `var( | |||
| --nldesign-color-text | ||||
| )` | #cccccc | defaults |
Typography (Typografie)
| Token | Value | Dark mode | Source | Paints |
|---|---|---|---|---|
--nldesign-component-badge-font-size | 0.875rem | defaults | ||
--nldesign-component-badge-font-weight | 700 | defaults | ||
--nldesign-component-button-font-family | var(--nldesign-font-family) | defaults | ||
--nldesign-component-button-font-size | inherit | this set | ||
--nldesign-component-button-font-weight | inherit | this set | ||
--nldesign-component-form-field-label-font-weight | 700 | defaults | ||
--nldesign-component-heading-1-font-size | 2.5rem | defaults | ||
--nldesign-component-heading-1-font-weight | `var( | |||
| --nldesign-component-heading-font-weight | ||||
| )` | defaults | |||
--nldesign-component-heading-1-line-height | 1.2 | defaults | ||
--nldesign-component-heading-2-font-size | 2rem | defaults | ||
--nldesign-component-heading-2-font-weight | `var( | |||
| --nldesign-component-heading-font-weight | ||||
| )` | defaults | |||
--nldesign-component-heading-2-line-height | 1.25 | defaults | ||
--nldesign-component-heading-3-font-size | 1.5rem | defaults | ||
--nldesign-component-heading-3-font-weight | `var( | |||
| --nldesign-component-heading-font-weight | ||||
| )` | defaults | |||
--nldesign-component-heading-3-line-height | 1.3 | defaults | ||
--nldesign-component-heading-4-font-size | 1.25rem | defaults | ||
--nldesign-component-heading-4-font-weight | `var( | |||
| --nldesign-component-heading-font-weight | ||||
| )` | defaults | |||
--nldesign-component-heading-4-line-height | 1.35 | defaults | ||
--nldesign-component-heading-5-font-size | 1.125rem | defaults | ||
--nldesign-component-heading-5-font-weight | `var( | |||
| --nldesign-component-heading-font-weight | ||||
| )` | defaults | |||
--nldesign-component-heading-5-line-height | 1.4 | defaults | ||
--nldesign-component-heading-6-font-size | 1rem | defaults | ||
--nldesign-component-heading-6-font-weight | `var( | |||
| --nldesign-component-heading-font-weight | ||||
| )` | defaults | |||
--nldesign-component-heading-6-line-height | 1.5 | defaults | ||
--nldesign-component-heading-font-family | var(--nldesign-font-family) | defaults | ||
--nldesign-component-heading-font-weight | var(--nldesign-font-weight-heading) | defaults | ||
--nldesign-component-link-font-weight | `var( | |||
| --nldesign-font-weight-default | ||||
| )` | defaults | |||
--nldesign-component-link-text-decoration | none | this set | ||
--nldesign-component-ordered-list-font-size | 1rem | defaults | ||
--nldesign-component-ordered-list-line-height | 1.5 | defaults | ||
--nldesign-component-paragraph-font-family | var(--nldesign-font-family) | defaults | ||
--nldesign-component-paragraph-font-size | 1rem | defaults | ||
--nldesign-component-paragraph-font-weight | var(--nldesign-font-weight-default) | defaults | ||
--nldesign-component-paragraph-line-height | 1.5em | this set | ||
--nldesign-component-table-header-font-weight | 700 | defaults | ||
--nldesign-component-textbox-font-family | var(--nldesign-font-family) | defaults | ||
--nldesign-component-textbox-font-size | 15px | this set | ||
--nldesign-component-unordered-list-font-size | 1rem | defaults | ||
--nldesign-component-unordered-list-line-height | 1.5 | defaults | ||
--nldesign-font-family | `'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, | |||
| Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif` | defaults | Font family, --nldesign-component-button-font-family, --nldesign-component-textbox-font-family | ||
--nldesign-font-weight-default | 400 | defaults | --default-font-size | |
--nldesign-font-weight-element | 500 | defaults | Control font weight | |
--nldesign-font-weight-heading | 700 | defaults | Heading font weight |
Spacing and shape (Ruimte en vorm)
| Token | Value | Dark mode | Source | Paints |
|---|---|---|---|---|
--nldesign-border-radius | 0 | defaults | Border radius element, Button corner, Select corner, Text input corner, --border-width-input | |
--nldesign-border-radius-large | 4px | defaults | --border-radius-container | |
--nldesign-border-radius-pill | 100px | defaults | Badge shape, Border radius pill | |
--nldesign-border-radius-rounded | 0 | defaults | Border radius rounded | |
--nldesign-border-radius-small | 0 | defaults | Border radius small | |
--nldesign-component-badge-border-radius | 0 | this set | ||
--nldesign-component-badge-padding-block | 0.125rem | defaults | ||
--nldesign-component-badge-padding-inline | 0.5rem | defaults | ||
--nldesign-component-button-border-radius | var(--nldesign-border-radius) | defaults | ||
--nldesign-component-button-border-width | 1px | defaults | ||
--nldesign-component-button-padding-block | 0.5rem | defaults | ||
--nldesign-component-button-padding-inline | 1rem | defaults | ||
--nldesign-component-form-fieldset-border-width | 1px | defaults | ||
--nldesign-component-form-select-border-radius | var(--nldesign-border-radius) | defaults | ||
--nldesign-component-separator-border-width | 1px | defaults | ||
--nldesign-component-table-border-width | 1px | defaults | ||
--nldesign-component-table-cell-padding-block | 0.5rem | defaults | ||
--nldesign-component-table-cell-padding-inline | 0.75rem | defaults | ||
--nldesign-component-textbox-border-radius | 0px | this set | ||
--nldesign-component-textbox-border-width | 1px | defaults | ||
--nldesign-component-textbox-padding-block | 0.5rem | defaults | ||
--nldesign-component-textbox-padding-inline | 0.75rem | defaults | ||
--nldesign-header-border-bottom | 0 | defaults | ||
--nldesign-logo-height | auto | defaults | ||
--nldesign-logo-width | 62px | defaults | ||
--nldesign-size-lint | 0px | defaults | ||
--nldesign-size-lint-height | 0px | defaults |
Other tokens (Overige tokens)
| Token | Value | Dark mode | Source | Paints |
|---|---|---|---|---|
--nldesign-animation-quick | 100ms | defaults | --header-menu-item-height | |
--nldesign-animation-slow | 300ms | defaults | Animation slow | |
--nldesign-header-icon-filter | invert(1) brightness(0) contrast(100) | defaults | ||
--nldesign-logo-bottom | 1px | defaults | ||
--nldesign-logo-center | 50% | defaults | ||
--nldesign-logo-filter | none | defaults | ||
--nldesign-logo-inset | 12px | defaults | ||
--nldesign-logo-top | 1px | defaults |
Tokens nothing reads (Tokens die niets leest)
| Token | Value | Dark mode | Source | Paints |
|---|---|---|---|---|
--dinkelland-color-alert-error-background |  #f8d7da |  #420f13 | this set | |
--dinkelland-color-alert-succes-background |  #d4edda |  #1d3f25 | this set | |
--dinkelland-color-alert-warning-background |  #fff3cd |  #4f3d04 | this set | |
--dinkelland-color-black-0 |  #000000 |  #ebebeb | this set | |
--dinkelland-color-black-13 |  #222222 |  #cecece | this set | |
--dinkelland-color-black-20 | #333333 |  #c0c0c0 | this set | |
--dinkelland-color-black-33 |  #555555 |  #a3a3a3 | this set | |
--dinkelland-color-blue-26 |  #004e86 |  #6dbef7 | this set | |
--dinkelland-color-blue-31 |  #005da0 |  #59b4f6 | this set | |
--dinkelland-color-blue-36 |  #006cb9 |  #45acf5 | this set | |
--dinkelland-color-blue-48 |  #2e79c6 |  #3f83c9 | this set | |
--dinkelland-color-blue-91 |  #deebf4 |  #152a38 | this set | |
--dinkelland-color-blue-94 |  #e5f0f8 |  #112534 | this set | |
--dinkelland-color-blue-96 |  #f2f4f7 |  #171c23 | this set | |
--dinkelland-color-error | #dc3545 | #c42c3a | this set | |
--dinkelland-color-green-24 |  #007a4d |  #77f8c8 | this set | |
--dinkelland-color-grey-31 |  #4f4f4f |  #a8a8a8 | this set | |
--dinkelland-color-grey-38 |  #5c6066 |  #94989e | this set | |
--dinkelland-color-grey-42 |  #6b6b6b |  #919191 | this set | |
--dinkelland-color-grey-46 |  #767676 |  #878787 | this set | |
--dinkelland-color-grey-64 |  #9aa1ab |  #5a616a | this set | |
--dinkelland-color-grey-72 |  #AEB6C2 |  #464e5a | this set | |
--dinkelland-color-grey-82 |  #d1d1d1 |  #3b3b3b | this set | |
--dinkelland-color-grey-94 |  #edeff2 |  #1d2026 | this set | |
--dinkelland-color-grey-97 |  #f7f7f7 |  #1b1b1b | this set | |
--dinkelland-color-lightgrey-89 |  #e4e4e4 |  #2b2b2b | this set | |
--dinkelland-color-lightgrey-96 |  #f5f5f5 |  #1d1d1d | this set | |
--dinkelland-color-succes |  #28a745 |  #58cf73 | this set | |
--dinkelland-color-warning | #ffc107 | #edb50c | this set | |
--dinkelland-color-white-100 | #ffffff | #141414 | this set | |
--dinkelland-color-white-98 |  #fafafa |  #191919 | this set | |
--dinkelland-font-size-2xl | 32px | this set | ||
--dinkelland-font-size-2xs | 10px | this set | ||
--dinkelland-font-size-3xl | 48px | this set | ||
--dinkelland-font-size-3xs | 8px | this set | ||
--dinkelland-font-size-4xl | 58px | this set | ||
--dinkelland-font-size-4xs | 5px | this set | ||
--dinkelland-font-size-lg | 18px | this set | ||
--dinkelland-font-size-md | 16px | this set | ||
--dinkelland-font-size-sm | 14px | this set | ||
--dinkelland-font-size-xl | 24px | this set | ||
--dinkelland-font-size-xs | 12px | this set | ||
--dinkelland-size-2xl | 48px | this set | ||
--dinkelland-size-2xs | 4px | this set | ||
--dinkelland-size-3xl | 72px | this set | ||
--dinkelland-size-3xs | 2px | this set | ||
--dinkelland-size-4xl | 96px | this set | ||
--dinkelland-size-4xs | 1px | this set | ||
--dinkelland-size-lg | 24px | this set | ||
--dinkelland-size-md | 18px | this set | ||
--dinkelland-size-sm | 14px | this set | ||
--dinkelland-size-xl | 32px | this set | ||
--dinkelland-size-xs | 8px | this set | ||
--dinkelland-typography-font-weight-bold | 700 | this set | ||
--dinkelland-typography-font-weight-light | 100 | this set | ||
--dinkelland-typography-font-weight-normal | 400 | this set | ||
--dinkelland-typography-lato-font-family | "Lato", Arial, sans-serif | this set | ||
--dinkelland-typography-monospace-font-family | Monospace, "Lucida Console" | this set | ||
--dinkelland-typography-montserrat-font-family | "Montserrat", Arial, sans-serif | this set | ||
--nldesign-action-busy-cursor | wait | this set | ||
--nldesign-action-disabled-cursor | not-allowed | this set | ||
--nldesign-action-submit-cursor | pointer | this set | ||
--nldesign-color-alert-error-background | #f8d7da | #420f13 | this set | |
--nldesign-color-alert-succes-background | #d4edda | #1d3f25 | this set | |
--nldesign-color-alert-warning-background | #fff3cd | #4f3d04 | this set | |
--nldesign-color-black-0 | #000000 | #ebebeb | this set | |
--nldesign-color-black-13 | #222222 | #cecece | this set | |
--nldesign-color-black-20 | #333333 | #c0c0c0 | this set | |
--nldesign-color-black-33 | #555555 | #a3a3a3 | this set | |
--nldesign-color-blue-26 | #004e86 | #6dbef7 | this set | |
--nldesign-color-blue-31 | #005da0 | #59b4f6 | this set | |
--nldesign-color-blue-36 | #006cb9 | #45acf5 | this set | |
--nldesign-color-blue-48 | #2e79c6 | #3f83c9 | this set | |
--nldesign-color-blue-91 | #deebf4 | #152a38 | this set | |
--nldesign-color-blue-94 | #e5f0f8 | #112534 | this set | |
--nldesign-color-blue-96 | #f2f4f7 | #171c23 | this set | |
--nldesign-color-green-24 | #007a4d | #77f8c8 | this set | |
--nldesign-color-grey-31 | #4f4f4f | #a8a8a8 | this set | |
--nldesign-color-grey-38 | #5c6066 | #94989e | this set | |
--nldesign-color-grey-42 | #6b6b6b | #919191 | this set | |
--nldesign-color-grey-46 | #767676 | #878787 | this set | |
--nldesign-color-grey-64 | #9aa1ab | #5a616a | this set | |
--nldesign-color-grey-72 | #AEB6C2 | #464e5a | this set | |
--nldesign-color-grey-82 | #d1d1d1 | #3b3b3b | this set | |
--nldesign-color-grey-94 | #edeff2 | #1d2026 | this set | |
--nldesign-color-grey-97 | #f7f7f7 | #1b1b1b | this set | |
--nldesign-color-lightgrey-89 | #e4e4e4 | #2b2b2b | this set | |
--nldesign-color-lightgrey-96 | #f5f5f5 | #1d1d1d | this set | |
--nldesign-color-succes | #28a745 | #58cf73 | this set | |
--nldesign-color-white-100 | #ffffff | #141414 | this set | |
--nldesign-color-white-98 | #fafafa | #191919 | this set | |
--nldesign-component-badge-counter-border-radius | 50% | this set | ||
--nldesign-component-badge-counter-text-decoration | none | this set | ||
--nldesign-component-breadcrumb-nav-padding-block-end | 15px | this set | ||
--nldesign-component-breadcrumb-nav-padding-block-start | 15px | this set | ||
--nldesign-component-breadcrumb-nav-padding-inline-end | 7.5px | this set | ||
--nldesign-component-breadcrumb-nav-padding-inline-start | 7.5px | this set | ||
--nldesign-component-button-primary-action-font-weight | inherit | this set | ||
--nldesign-component-code-font-size | inherit | this set | ||
--nldesign-component-form-input-border-radius | 0px | this set | ||
--nldesign-component-form-input-font-size | 15px | this set | ||
--nldesign-component-link-hover-text-decoration | underline | this set | ||
--nldesign-component-link-text-decoration-color | unset | this set | ||
--nldesign-component-ordered-list-item-padding-inline-start | 1ch | this set | ||
--nldesign-component-page-footer-background-color | unset | this set | ||
--nldesign-component-page-footer-background-image | unset | this set | ||
--nldesign-component-page-footer-background-size | cover | this set | ||
--nldesign-component-page-footer-link-hover-text-decoration | underline | this set | ||
--nldesign-component-page-footer-link-text-decoration | none | this set | ||
--nldesign-component-page-footer-link-text-decoration-color | unset | this set | ||
--nldesign-component-page-footer-logo-max-height | 100px | this set | ||
--nldesign-component-page-footer-logo-max-width | 250px | this set | ||
--nldesign-component-page-footer-min-height | 300px | this set | ||
--nldesign-component-page-footer-mobile-background-position | bottom | this set | ||
--nldesign-component-page-header-logo-max-width | 150px | this set | ||
--nldesign-component-page-max-inline-size | 1140px | this set | ||
--nldesign-component-radio-button-icon-size | 5px | this set | ||
--nldesign-component-radio-button-min-block-size | 16px | this set | ||
--nldesign-component-radio-button-min-inline-size | 16px | this set | ||
--nldesign-component-separator-margin-block-end | 0px | this set | ||
--nldesign-component-separator-margin-block-start | 0px | this set | ||
--nldesign-component-table-border-collapse | collapse | this set | ||
--nldesign-component-table-header-cell-text-transform | unset | this set | ||
--nldesign-component-table-header-text-transform | unset | this set | ||
--nldesign-component-unordered-list-item-padding-inline-start | 1ch | this set | ||
--nldesign-component-unordered-list-padding-inline-start | 2ch | this set | ||
--nldesign-conduction-card-wrapper-border-radius | 0px | this set | ||
--nldesign-conduction-card-wrapper-border-width | unset | this set | ||
--nldesign-conduction-download-card-border-radius | 0px | this set | ||
--nldesign-conduction-download-card-border-style | solid | this set | ||
--nldesign-conduction-input-checkbox-border-radius | 3px | this set | ||
--nldesign-conduction-input-checkbox-border-style | solid | this set | ||
--nldesign-conduction-input-checkbox-checked-border-radius | 3px | this set | ||
--nldesign-conduction-input-checkbox-checked-border-style | solid | this set | ||
--nldesign-conduction-input-checkbox-checked-hover-border-radius | 3px | this set | ||
--nldesign-conduction-input-checkbox-checked-hover-border-style | solid | this set | ||
--nldesign-conduction-input-checkbox-disabled-border-radius | 3px | this set | ||
--nldesign-conduction-input-checkbox-disabled-border-style | solid | this set | ||
--nldesign-conduction-input-checkbox-disabled-hover-border-radius | 3px | this set | ||
--nldesign-conduction-input-checkbox-disabled-hover-border-style | solid | this set | ||
--nldesign-conduction-input-checkbox-focus-outline-offset | 2px | this set | ||
--nldesign-conduction-input-checkbox-focus-outline-style | solid | this set | ||
--nldesign-conduction-input-checkbox-focus-outline-width | 2px | this set | ||
--nldesign-conduction-input-checkbox-hover-border-radius | 3px | this set | ||
--nldesign-conduction-input-checkbox-hover-border-style | solid | this set | ||
--nldesign-conduction-input-checkbox-label-container-margin | 3px | this set | ||
--nldesign-conduction-input-checkbox-label-container-padding | 3px | this set | ||
--nldesign-conduction-input-select-border-focus | unset | this set | ||
--nldesign-conduction-input-select-list-option-selected-background-color | var(--rotterdam-color-green-tint-01) | this set | ||
--nldesign-conduction-input-select-list-option-selected-color | var(--rotterdam-color-base-white) | this set | ||
--nldesign-conduction-logo-header-background-image | url('../../../img/logos/dinkelland.svg') | this set | ||
--nldesign-conduction-logo-header-block-size | 30px | this set | ||
--nldesign-conduction-logo-header-inline-size | 150px | this set | ||
--nldesign-conduction-logo-navbar-background-image | url('../../../img/logos/dinkelland.svg') | this set | ||
--nldesign-conduction-logo-navbar-block-size | 40px | this set | ||
--nldesign-conduction-logo-navbar-inline-size | 150px | this set | ||
--nldesign-conduction-pagination-container-background-color | unset | this set | ||
--nldesign-conduction-pagination-container-padding-block-end | 0px | this set | ||
--nldesign-conduction-pagination-container-padding-block-start | 0px | this set | ||
--nldesign-conduction-pagination-container-padding-inline-end | 0px | this set | ||
--nldesign-conduction-pagination-container-padding-inline-start | 0px | this set | ||
--nldesign-conduction-pagination-current-page-text-decoration | unset | this set | ||
--nldesign-conduction-pagination-item-border-radius | 0px | this set | ||
--nldesign-conduction-pagination-item-font-size | 17.6px | this set | ||
--nldesign-conduction-pagination-item-padding-block-end | 7.5px | this set | ||
--nldesign-conduction-pagination-item-padding-block-start | 7.5px | this set | ||
--nldesign-conduction-pagination-item-padding-inline-end | 15px | this set | ||
--nldesign-conduction-pagination-item-padding-inline-start | 15px | this set | ||
--nldesign-conduction-pagination-navigation-button-border-width | 0px | this set | ||
--nldesign-conduction-pagination-navigation-button-disabled-background-color | transparent | this set | ||
--nldesign-conduction-pagination-navigation-button-disabled-border-width | 0px | this set | ||
--nldesign-conduction-pagination-navigation-button-hover-border-width | 0px | this set | ||
--nldesign-conduction-pagination-navigation-button-padding-block-end | 0px | this set | ||
--nldesign-conduction-pagination-navigation-button-padding-block-start | 0px | this set | ||
--nldesign-conduction-pagination-page-hover-text-decoration | unset | this set | ||
--nldesign-conduction-pagination-page-hover-text-decoration-thickness | 0px | this set | ||
--nldesign-conduction-primary-top-nav-current-background-color | unset | this set | ||
--nldesign-conduction-primary-top-nav-item-padding | 18px | this set | ||
--nldesign-conduction-primary-top-nav-padding-block-end | 16px | this set | ||
--nldesign-conduction-primary-top-nav-padding-block-start | 16px | this set | ||
--nldesign-conduction-primary-top-nav-padding-inline-end | 16px | this set | ||
--nldesign-conduction-primary-top-nav-padding-inline-start | 16px | this set | ||
--nldesign-conduction-secondary-top-nav-background-color | transparent | this set | ||
--nldesign-conduction-secondary-top-nav-current-background-color | unset | this set | ||
--nldesign-conduction-secondary-top-nav-font-weight | 400 | this set | ||
--nldesign-conduction-secondary-top-nav-item-padding | 18px | this set | ||
--nldesign-conduction-secondary-top-nav-padding-block-end | 16px | this set | ||
--nldesign-conduction-secondary-top-nav-padding-block-start | 16px | this set | ||
--nldesign-conduction-secondary-top-nav-padding-inline-end | 16px | this set | ||
--nldesign-conduction-secondary-top-nav-padding-inline-start | 16px | this set | ||
--nldesign-conduction-tabs-scroll-button-border-style | solid | this set | ||
--nldesign-conduction-tabs-tab-border-bottom | 0 | this set | ||
--nldesign-conduction-tabs-tab-border-style | solid | this set | ||
--nldesign-conduction-tabs-tab-bottom | 0px | this set | ||
--nldesign-conduction-tabs-tab-hover-text-decoration | underline | this set | ||
--nldesign-conduction-tabs-tab-list-border-bottom-style | solid | this set | ||
--nldesign-conduction-tabs-tab-list-border-bottom-width | 1px | this set | ||
--nldesign-conduction-tabs-tab-list-margin-block-end | 0px | this set | ||
--nldesign-conduction-tabs-tab-max-width | unset | this set | ||
--nldesign-conduction-tabs-tab-min-height | 61px | this set | ||
--nldesign-conduction-tabs-tab-min-width | 160px | this set | ||
--nldesign-conduction-tabs-tab-panel-border-style | solid | this set | ||
--nldesign-conduction-tabs-tab-panel-border-top | 0 | this set | ||
--nldesign-conduction-tabs-tab-selected-background-color | transparent | this set | ||
--nldesign-conduction-tabs-tab-selected-border-bottom | 0 | this set | ||
--nldesign-conduction-tabs-tab-selected-border-bottom-color | unset | this set | ||
--nldesign-conduction-tabs-tab-selected-border-bottom-style | unset | this set | ||
--nldesign-conduction-tabs-tab-selected-border-bottom-width | 0px | this set | ||
--nldesign-conduction-tabs-tab-selected-border-style | solid | this set | ||
--nldesign-conduction-tabs-tab-selected-hover-background-color | transparent | this set | ||
--nldesign-conduction-tabs-tab-selected-hover-text-decoration | underline | this set | ||
--nldesign-conduction-tooltip-border-color | unset | this set | ||
--nldesign-conduction-tooltip-border-radius | 0px | this set | ||
--nldesign-conduction-tooltip-border-style | unset | this set | ||
--nldesign-conduction-tooltip-border-width | 0px | this set | ||
--nldesign-conduction-tooltip-z-index | 9999 | this set | ||
--nldesign-font-size-2xl | 32px | this set | ||
--nldesign-font-size-2xs | 10px | this set | ||
--nldesign-font-size-3xl | 48px | this set | ||
--nldesign-font-size-3xs | 8px | this set | ||
--nldesign-font-size-4xl | 58px | this set | ||
--nldesign-font-size-4xs | 5px | this set | ||
--nldesign-font-size-lg | 18px | this set | ||
--nldesign-font-size-md | 16px | this set | ||
--nldesign-font-size-sm | 14px | this set | ||
--nldesign-font-size-xl | 24px | this set | ||
--nldesign-font-size-xs | 12px | this set | ||
--nldesign-size-2xl | 48px | this set | ||
--nldesign-size-2xs | 4px | this set | ||
--nldesign-size-3xl | 72px | this set | ||
--nldesign-size-3xs | 2px | this set | ||
--nldesign-size-4xl | 96px | this set | ||
--nldesign-size-4xs | 1px | this set | ||
--nldesign-size-lg | 24px | this set | ||
--nldesign-size-md | 18px | this set | ||
--nldesign-size-sm | 14px | this set | ||
--nldesign-size-xl | 32px | this set | ||
--nldesign-size-xs | 8px | this set | ||
--nldesign-typography-font-weight-bold | 700 | this set | ||
--nldesign-typography-font-weight-light | 100 | this set | ||
--nldesign-typography-font-weight-normal | 400 | this set | ||
--nldesign-typography-lato-font-family | "Lato", Arial, sans-serif | this set | ||
--nldesign-typography-monospace-font-family | Monospace, "Lucida Console" | this set | ||
--nldesign-typography-montserrat-font-family | "Montserrat", Arial, sans-serif | this set |