Nextcloud (Base)

Token set nextcloud: 52 declared by this set, 118 from the defaults layer.

Contrast: primary text on primary 6.12:1, primary on background 6.12:1 (pass).

Colours (Kleuren)

Token	Value	Dark mode	Source	Paints
--nldesign-color-background-dark	#ededed		this set	Background dark, Table header background
--nldesign-color-background-darker	#dbdbdb		this set	Background darker
--nldesign-color-background-hover	#f5f5f5		this set	--color-main-background
--nldesign-color-border	#d9d9d9		this set	Border color, Select border, Table row rule, Text input border, --nldesign-component-separator-border-color
--nldesign-color-border-dark	#767676		this set	Border dark, Border max contrast
--nldesign-color-button-primary-background	#00679e		this set
--nldesign-color-button-primary-border	#00679e		this set
--nldesign-color-button-primary-hover	#00507a		this set
--nldesign-color-button-primary-text	#ffffff		this set
--nldesign-color-error	#d32f2f		this set	Border error, Element error, Error color, Text error, Text input invalid
--nldesign-color-error-hover	#c12c27		this set	Error hover
--nldesign-color-error-rgb	211, 47, 47		this set	--color-error-text
--nldesign-color-favorite	#f9cf00		this set	--filter-background-blur
--nldesign-color-focus	rgba(0, 130, 201, 0.5)		this set	Button focus ring
--nldesign-color-focus-rgb	0, 130, 201		this set
--nldesign-color-header-background	#00679e		this set
--nldesign-color-header-text	#ffffff		this set
--nldesign-color-info	#00598a		this set	Info color, Text input focus, --color-info-hover
--nldesign-color-info-rgb	0, 89, 138		this set
--nldesign-color-link	#00679e		this set	Link colour
--nldesign-color-link-hover	#00507a		this set	Link hover colour
--nldesign-color-link-visited	#00679e		this set	--nldesign-component-link-visited-color
--nldesign-color-logo-background	transparent		this set
--nldesign-color-nav-background	#ffffff		this set
--nldesign-color-placeholder-dark	#b3b3b3		this set	Placeholder dark
--nldesign-color-placeholder-light	#e5e5e5		this set	Placeholder light
--nldesign-color-primary	#00679e		this set	Badge background, Primary button background, Primary color, Primary element color, Primary element light text and 7 more
--nldesign-color-primary-hover	#3285b1		this set	Primary button hover, Primary element hover, Primary hover color
--nldesign-color-primary-light	#e5eff5		this set	Primary element light, Tertiary button hover, --color-primary-element-text-dark
--nldesign-color-primary-light-hover	#cfe0ec		this set	Primary element light hover, Primary light hover, Tertiary button pressed
--nldesign-color-primary-text	#ffffff		this set	Badge number, Primary button label, Primary element text, Primary text color
--nldesign-color-success	#46ba61		this set	Border success, Element success, Success color, Text success
--nldesign-color-success-rgb	70, 186, 97		this set	--color-success-hover
--nldesign-color-text	#222222		this set	Body text colour, Main text color, Table header label, --nldesign-component-form-field-label-color, --nldesign-component-heading-1-color and 8 more
--nldesign-color-text-light	#ffffff		this set	--color-text-maxcontrast-default
--nldesign-color-text-muted	#767676		this set	Text lighter, Text max contrast
--nldesign-color-warning	#eca700		this set	Element warning, Text warning, Warning color
--nldesign-color-warning-rgb	236, 167, 0		this set	--color-warning-hover
--nldesign-component-badge-background-color	`var(
--nldesign-color-primary
)`		defaults
--nldesign-component-badge-color	`var(
--nldesign-color-primary-text
)`		defaults
--nldesign-component-button-active-background-color	`var(
--nldesign-color-primary-light-hover
)`		defaults
--nldesign-component-button-active-color	`var(
--nldesign-color-primary
)`		defaults
--nldesign-component-button-background-color	transparent		defaults
--nldesign-component-button-border-color	`var(
--nldesign-color-primary
)`		defaults
--nldesign-component-button-color	var(--nldesign-color-primary)		defaults
--nldesign-component-button-disabled-background-color	#e5e5e5		defaults
--nldesign-component-button-disabled-border-color	#b4b4b4		defaults
--nldesign-component-button-disabled-color	#696969		defaults
--nldesign-component-button-focus-border-color	`var(
--nldesign-color-focus
)`		defaults
--nldesign-component-button-hover-background-color	`var(
--nldesign-color-primary-light
)`		defaults
--nldesign-component-button-hover-border-color	`var(
--nldesign-color-primary-hover
)`		defaults
--nldesign-component-button-hover-color	`var(
--nldesign-color-primary
)`		defaults
--nldesign-component-button-primary-action-background-color	`var(
--nldesign-color-primary
)`		defaults
--nldesign-component-button-primary-action-border-color	`var(
--nldesign-color-primary
)`		defaults
--nldesign-component-button-primary-action-color	`var(
--nldesign-color-primary-text
)`		defaults
--nldesign-component-button-primary-action-hover-background-color	`var(
--nldesign-color-primary-hover
)`		defaults
--nldesign-component-button-primary-action-hover-color	`var(
--nldesign-color-primary-text
)`		defaults
--nldesign-component-button-secondary-action-background-color	transparent		defaults
--nldesign-component-button-secondary-action-border-color	`var(
--nldesign-color-primary
)`		defaults
--nldesign-component-button-secondary-action-color	`var(
--nldesign-color-primary
)`		defaults
--nldesign-component-button-secondary-action-hover-background-color	`var(
--nldesign-color-primary-light
)`		defaults
--nldesign-component-form-field-label-color	var(--nldesign-color-text)		defaults
--nldesign-component-form-fieldset-border-color	`var(
--nldesign-color-border
)`		defaults
--nldesign-component-form-select-border-color	var(--nldesign-color-border)		defaults
--nldesign-component-form-select-focus-border-color	var(--nldesign-color-info)		defaults
--nldesign-component-heading-1-color	var(--nldesign-component-heading-color)		defaults
--nldesign-component-heading-2-color	var(--nldesign-component-heading-color)		defaults
--nldesign-component-heading-3-color	var(--nldesign-component-heading-color)		defaults
--nldesign-component-heading-4-color	var(--nldesign-component-heading-color)		defaults
--nldesign-component-heading-5-color	var(--nldesign-component-heading-color)		defaults
--nldesign-component-heading-6-color	var(--nldesign-component-heading-color)		defaults
--nldesign-component-heading-color	var(--nldesign-color-text)		defaults
--nldesign-component-link-color	var(--nldesign-color-link)		defaults
--nldesign-component-link-hover-color	var(--nldesign-color-link-hover)		defaults
--nldesign-component-link-visited-color	var(--nldesign-color-link-visited)		defaults
--nldesign-component-ordered-list-color	`var(
--nldesign-color-text
)`		defaults
--nldesign-component-paragraph-color	var(--nldesign-color-text)		defaults
--nldesign-component-separator-border-color	var(--nldesign-color-border)		defaults
--nldesign-component-table-border-color	var(--nldesign-color-border)		defaults
--nldesign-component-table-header-background-color	`var(
--nldesign-color-background-dark
)`		defaults
--nldesign-component-table-header-color	var(--nldesign-color-text)		defaults
--nldesign-component-table-row-hover-background-color	`var(
--nldesign-color-background-hover
)`		defaults
--nldesign-component-textbox-background-color	#ffffff		defaults
--nldesign-component-textbox-border-color	var(--nldesign-color-border)		defaults
--nldesign-component-textbox-color	var(--nldesign-color-text)		defaults
--nldesign-component-textbox-disabled-background-color	#e5e5e5		defaults
--nldesign-component-textbox-disabled-color	#696969		defaults
--nldesign-component-textbox-focus-border-color	var(--nldesign-color-info)		defaults
--nldesign-component-textbox-hover-border-color	`var(
--nldesign-color-border-dark
)`		defaults
--nldesign-component-textbox-invalid-border-color	var(--nldesign-color-error)		defaults
--nldesign-component-unordered-list-color	`var(
--nldesign-color-text
)`		defaults

Typography (Typografie)

Token	Value	Dark mode	Source	Paints
--nldesign-component-badge-font-size	0.875rem		defaults
--nldesign-component-badge-font-weight	700		defaults
--nldesign-component-button-font-family	var(--nldesign-font-family)		defaults
--nldesign-component-button-font-size	1rem		defaults
--nldesign-component-button-font-weight	700		defaults
--nldesign-component-form-field-label-font-weight	700		defaults
--nldesign-component-heading-1-font-size	2.5rem		defaults
--nldesign-component-heading-1-font-weight	`var(
--nldesign-component-heading-font-weight
)`		defaults
--nldesign-component-heading-1-line-height	1.2		defaults
--nldesign-component-heading-2-font-size	2rem		defaults
--nldesign-component-heading-2-font-weight	`var(
--nldesign-component-heading-font-weight
)`		defaults
--nldesign-component-heading-2-line-height	1.25		defaults
--nldesign-component-heading-3-font-size	1.5rem		defaults
--nldesign-component-heading-3-font-weight	`var(
--nldesign-component-heading-font-weight
)`		defaults
--nldesign-component-heading-3-line-height	1.3		defaults
--nldesign-component-heading-4-font-size	1.25rem		defaults
--nldesign-component-heading-4-font-weight	`var(
--nldesign-component-heading-font-weight
)`		defaults
--nldesign-component-heading-4-line-height	1.35		defaults
--nldesign-component-heading-5-font-size	1.125rem		defaults
--nldesign-component-heading-5-font-weight	`var(
--nldesign-component-heading-font-weight
)`		defaults
--nldesign-component-heading-5-line-height	1.4		defaults
--nldesign-component-heading-6-font-size	1rem		defaults
--nldesign-component-heading-6-font-weight	`var(
--nldesign-component-heading-font-weight
)`		defaults
--nldesign-component-heading-6-line-height	1.5		defaults
--nldesign-component-heading-font-family	var(--nldesign-font-family)		defaults
--nldesign-component-heading-font-weight	var(--nldesign-font-weight-heading)		defaults
--nldesign-component-link-font-weight	`var(
--nldesign-font-weight-default
)`		defaults
--nldesign-component-link-text-decoration	underline		defaults
--nldesign-component-ordered-list-font-size	1rem		defaults
--nldesign-component-ordered-list-line-height	1.5		defaults
--nldesign-component-paragraph-font-family	var(--nldesign-font-family)		defaults
--nldesign-component-paragraph-font-size	1rem		defaults
--nldesign-component-paragraph-font-weight	var(--nldesign-font-weight-default)		defaults
--nldesign-component-paragraph-line-height	1.5		defaults
--nldesign-component-table-header-font-weight	700		defaults
--nldesign-component-textbox-font-family	var(--nldesign-font-family)		defaults
--nldesign-component-textbox-font-size	1rem		defaults
--nldesign-component-unordered-list-font-size	1rem		defaults
--nldesign-component-unordered-list-line-height	1.5		defaults
--nldesign-font-family	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif		this set	Font family, --nldesign-component-button-font-family, --nldesign-component-textbox-font-family
--nldesign-font-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	8px		this set	Border radius element, Button corner, Select corner, Text input corner, --border-width-input
--nldesign-border-radius-large	8px		this set	--border-radius-container
--nldesign-border-radius-pill	100px		this set	Badge shape, Border radius pill
--nldesign-border-radius-rounded	28px		this set	Border radius rounded
--nldesign-border-radius-small	4px		this set	Border radius small
--nldesign-component-badge-border-radius	`var(
--nldesign-border-radius-pill
)`		defaults
--nldesign-component-badge-padding-block	0.125rem		defaults
--nldesign-component-badge-padding-inline	0.5rem		defaults
--nldesign-component-button-border-radius	var(--nldesign-border-radius)		defaults
--nldesign-component-button-border-width	1px		defaults
--nldesign-component-button-padding-block	0.5rem		defaults
--nldesign-component-button-padding-inline	1rem		defaults
--nldesign-component-form-fieldset-border-width	1px		defaults
--nldesign-component-form-select-border-radius	var(--nldesign-border-radius)		defaults
--nldesign-component-separator-border-width	1px		defaults
--nldesign-component-table-border-width	1px		defaults
--nldesign-component-table-cell-padding-block	0.5rem		defaults
--nldesign-component-table-cell-padding-inline	0.75rem		defaults
--nldesign-component-textbox-border-radius	var(--nldesign-border-radius)		defaults
--nldesign-component-textbox-border-width	1px		defaults
--nldesign-component-textbox-padding-block	0.5rem		defaults
--nldesign-component-textbox-padding-inline	0.75rem		defaults
--nldesign-header-border-bottom	0		this set
--nldesign-logo-height	auto		defaults
--nldesign-logo-width	62px		defaults
--nldesign-size-lint	0px		this set
--nldesign-size-lint-height	0px		this set

Other tokens (Overige tokens)

Token	Value	Dark mode	Source	Paints
--nldesign-animation-quick	100ms		this set	--header-menu-item-height
--nldesign-animation-slow	300ms		this set	Animation slow
--nldesign-header-icon-filter	invert(1) brightness(0) contrast(100)		defaults
--nldesign-logo-bottom	1px		defaults
--nldesign-logo-center	50%		this set
--nldesign-logo-filter	none		this set
--nldesign-logo-inset	12px		defaults
--nldesign-logo-top	1px		defaults

Tokens nothing reads (Tokens die niets leest)

Token	Value	Dark mode	Source	Paints
--nldesign-logo-url	none		this set