@nl-design-system-unstable/[email protected]

Patch Changes

• f41e917: Include correct fonts in package (tokens were updated to use Noto Sans/Serif/Sans Mono instead of Fira/Source Sans)

@nl-design-system-community/[email protected]

Major Changes

• cc387c8: Synchronisatie van tokens.json met NL Design System versie 4.1.1, wat heeft geresulteerd in de onderstaande updates.

  De volgende tokens zijn toegevoegd aan Card as Link component:

  • ams.card.outline-offset
  • ams.card.heading.margin-block-end
  • ams.card.heading-group.gap
  • ams.card.heading-group.margin-block-end
  • ams.card.image.margin-block-end
  • ams.card.link.color
  • ams.card.link.text-decoration-line
  • ams.card.link.text-decoration-thickness
  • ams.card.link.text-underline-offset
  • ams.card.link.hover.color
  • ams.card.link.hover.text-decoration-line

  De volgende tokens zijn hernoemd in Side Navigation component:

  • denhaag.sidenav.min-width naar denhaag.side-navigation.min-width
  • denhaag.sidenav.row-gap naar denhaag.side-navigation.row-gap
  • denhaag.sidenav.item.font-family naar denhaag.side-navigation.item.font-family
  • denhaag.sidenav.item.font-size naar denhaag.side-navigation.item.font-size
  • denhaag.sidenav.item.font-weight naar denhaag.side-navigation.item.font-weight
  • denhaag.sidenav.item.line-height naar denhaag.side-navigation.item.line-height
  • denhaag.sidenav.item.margin-block-end naar denhaag.side-navigation.item.margin-block-end
  • denhaag.sidenav.item.margin-block-start naar denhaag.side-navigation.item.margin-block-start
  • denhaag.sidenav.item.margin-inline-end naar denhaag.side-navigation.item.margin-inline-end
  • denhaag.sidenav.item.margin-inline-start naar denhaag.side-navigation.item.margin-inline-start
  • denhaag.sidenav.link.color naar denhaag.side-navigation.link.color
  • denhaag.sidenav.link.column-gap naar denhaag.side-navigation.link.column-gap
  • denhaag.sidenav.link.padding-block-end naar denhaag.side-navigation.link.padding-block-end
  • denhaag.sidenav.link.padding-block-start naar denhaag.side-navigation.link.padding-block-start
  • denhaag.sidenav.link.active.color naar denhaag.side-navigation.link.active.color
  • denhaag.sidenav.link.active.font-weight naar denhaag.side-navigation.link.active.font-weight
  • denhaag.sidenav.link.current.color naar denhaag.side-navigation.link.current.color
  • denhaag.sidenav.link.current.font-weight naar denhaag.side-navigation.link.current.font-weight
  • denhaag.sidenav.link.hover.color naar denhaag.side-navigation.link.hover.color
  • denhaag.sidenav.list.padding-block-end naar denhaag.side-navigation.list.padding-block-end
  • denhaag.sidenav.list.padding-block-start naar denhaag.side-navigation.list.padding-block-start
  • denhaag.sidenav.list.padding-inline-start naar denhaag.side-navigation.list.padding-inline-start
  • todo.sidenav.link.hover.text-decoration naar todo.side-navigation.link.hover.text-decoration
  • todo.sidenav.link.icon.size naar todo.side-navigation.link.icon.size

  De volgende tokens zijn toegevoegd aan Data Summary component:

  • denhaag.description-list.border-color
  • denhaag.description-list.color
  • denhaag.description-list.font-family
  • denhaag.description-list.font-size
  • denhaag.description-list.font-weight
  • denhaag.description-list.line-height
  • denhaag.description-list.margin-block-end
  • denhaag.description-list.margin-block-start
  • denhaag.description-list.padding-inline-end
  • denhaag.description-list.padding-inline-start
  • denhaag.description-list.caption.color
  • denhaag.description-list.caption.line-height
  • denhaag.description-list.caption.font-family
  • denhaag.description-list.caption.font-size
  • denhaag.description-list.caption.font-weight
  • denhaag.description-list.caption.margin-block-end
  • denhaag.description-list.detail.padding-block-end
  • denhaag.description-list.detail.padding-block-start
  • denhaag.description-list.title.color
  • denhaag.description-list.title.font-weight
  • denhaag.description-list.title.padding-block-end
  • denhaag.description-list.title.padding-block-start
  • denhaag.description-list.lg.padding-inline-end
  • denhaag.description-list.lg.padding-inline-start
  • denhaag.description-list.lg.detail.padding-block-end
  • denhaag.description-list.lg.detail.padding-block-start
  • denhaag.description-list.lg.title.padding-block-end
  • denhaag.description-list.lg.title.padding-block-start

  De volgende tokens zijn toegevoegd aan Action Group component:

  • utrecht.action-group.margin-block-end
  • utrecht.action-group.margin-block-start

  De volgende tokens zijn toegevoegd aan Alert component:

  • utrecht.alert.margin-block-end
  • utrecht.alert.margin-block-start

  De volgende tokens zijn toegevoegd aan Blockquote component:

  • utrecht.blockquote.margin-block-end
  • utrecht.blockquote.margin-block-start
  • utrecht.blockquote.margin-inline-end
  • utrecht.blockquote.margin-inline-start

  De volgende tokens zijn toegevoegd aan Code Block component:

  • utrecht.code-block.margin-block-end
  • utrecht.code-block.margin-block-start
  • utrecht.code-block.margin-inline-end
  • utrecht.code-block.margin-inline-start

  De volgende tokens zijn toegevoegd aan Figure component:

  • utrecht.figure.margin-block-end
  • utrecht.figure.margin-block-start

  De volgende tokens zijn toegevoegd aan Form Field component:

  • utrecht.form-field.margin-block-end
  • utrecht.form-field.margin-block-start

  De volgende tokens zijn toegevoegd aan Form Field Discription component:

  • utrecht.form-field-description.margin-block-end
  • utrecht.form-field-description.margin-block-start

  De volgende tokens zijn toegevoegd aan Form Field Error Message component:

  • utrecht.form-field-error-message.margin-block-end
  • utrecht.form-field-error-message.margin-block-start

  De volgende tokens zijn toegevoegd aan Headings 1 t/m 6:

  • utrecht.heading-1.margin-block-end
  • utrecht.heading-1.margin-block-start
  • utrecht.heading-2.margin-block-end
  • utrecht.heading-2.margin-block-start
  • utrecht.heading-3.margin-block-end
  • utrecht.heading-3.margin-block-start
  • utrecht.heading-4.margin-block-end
  • utrecht.heading-4.margin-block-start
  • utrecht.heading-5.margin-block-end
  • utrecht.heading-5.margin-block-start
  • utrecht.heading-6.margin-block-end
  • utrecht.heading-6.margin-block-start

  De volgende tokens zijn toegevoegd aan Page Number Navigation component:

  • utrecht.pagination.margin-block-end
  • utrecht.pagination.margin-block-start

  De volgende tokens zijn toegevoegd aan Pre Heading component:

  • utrecht.pre-heading.margin-block-end
  • utrecht.pre-heading.margin-block-start

  De volgende tokens zijn toegevoegd aan Radio Button component:

  • utrecht.radio-button.margin-block-end
  • utrecht.radio-button.margin-block-start

  De volgende tokens zijn toegevoegd aan Separator component:

  • utrecht.separator.margin-block-end
  • utrecht.separator.margin-block-start

  De volgende tokens zijn toegevoegd aan Separator component:

  • denhaag.sidenav.item.margin-block-end
  • denhaag.sidenav.item.margin-block-start
  • denhaag.sidenav.item.margin-inline-end
  • denhaag.sidenav.item.margin-inline-start

  De volgende tokens zijn toegevoegd aan Table component:

  • utrecht.table.margin-block-end
  • utrecht.table.margin-block-start

  De description van de volgende tokens zijn gewijzigd:

  • nl.link.color description [code-only] verwijderd.
  • nl.link.text-decoration-color description [code-only] toegevoegd.

  De waarde van de volgende tokens zijn gewijzigd:

  • utrecht.spotlight-section.border-width naar 0px.
  • utrecht.spotlight-section.info.border-width naar component token utrecht.spotlight-section.border-width.
  • utrecht.spotlight-section.error.border-width naar component token utrecht.spotlight-section.border-width.
  • utrecht.spotlight-section.ok.border-width naar component token utrecht.spotlight-section.border-width.
  • utrecht.spotlight-section.warning.border-width naar component token utrecht.spotlight-section.border-width.

  Token ams.image.aspect-ratio is toegevoegd aan Image component.

  De volgende tokens zijn hernoemd in Action Group component:

  • utrecht.button-group.background-color naar utrecht.action-group.background-color
  • utrecht.button-group.column-gap naar utrecht.action-group.column-gap
  • utrecht.button-group.padding-block-end naar utrecht.action-group.padding-block-end
  • utrecht.button-group.padding-block-start naar utrecht.action-group.padding-block-start
  • utrecht.button-group.row-gap naar utrecht.action-group.row-gap

  Token utrecht.link-list.font-weight is hernoemd naar utrecht.link-list.link.font-weight in Link List component.

  De waarde van de volgende tokens zijn gewijzigd:

  • basis.focus.outline-color naar ma.color.black
  • basis.focus.inverse.outline-color naar ma.color.white

  De volgende tokens zijn toegevoegd aan (community) Icon component:

  • utrecht.icon.color
  • utrecht.icon.inset-block-start
  • utrecht.icon.baseline.inset-block-start

  De volgende tokens zijn toegevoegd aan Button component:

  • utrecht.button.pressed.background-color
  • utrecht.button.pressed.border-color
  • utrecht.button.pressed.color
  • utrecht.button.primary-action.pressed.background-color
    ...

@nl-design-system-unstable/[email protected]

Minor Changes

• d38c74b: De volgende tokens zijn toegevoegd aan (candidate) Button component:

  • nl.button.border-radius
  • nl.button.column-gap
  • nl.button.font-family
  • nl.button.min-block-size
  • nl.button.min-inline-size
  • nl.button.outline-offset
  • nl.button.padding-block-end
  • nl.button.padding-block-start
  • nl.button.padding-inline-end
  • nl.button.padding-inline-start
  • nl.button.focus.background-color
  • nl.button.focus.border-color
  • nl.button.focus.color
  • nl.button.icon.size
  • nl.button.default.background-color
  • nl.button.default.border-color
  • nl.button.default.border-width
  • nl.button.default.color
  • nl.button.default.font-size
  • nl.button.default.font-weight
  • nl.button.default.line-height
  • nl.button.default.active.background-color
  • nl.button.default.active.border-color
  • nl.button.default.active.color
  • nl.button.default.disabled.background-color
  • nl.button.default.disabled.border-color
  • nl.button.default.disabled.color
  • nl.button.default.hover.background-color
  • nl.button.default.hover.border-color
  • nl.button.default.hover.color
  • nl.button.default.pressed.background-color
  • nl.button.default.pressed.border-color
  • nl.button.default.pressed.color
  • nl.button.primary.background-color
  • nl.button.primary.border-color
  • nl.button.primary.border-width
  • nl.button.primary.color
  • nl.button.primary.font-size
  • nl.button.primary.font-weight
  • nl.button.primary.line-height
  • nl.button.primary.active.background-color
  • nl.button.primary.active.border-color
  • nl.button.primary.active.color
  • nl.button.primary.disabled.background-color
  • nl.button.primary.disabled.border-color
  • nl.button.primary.disabled.color
  • nl.button.primary.hover.background-color
  • nl.button.primary.hover.border-color
  • nl.button.primary.hover.color
  • nl.button.primary.pressed.background-color
  • nl.button.primary.pressed.border-color
  • nl.button.primary.pressed.color
  • nl.button.primary.positive.background-color
  • nl.button.primary.positive.border-color
  • nl.button.primary.positive.color
  • nl.button.primary.positive.active.background-color
  • nl.button.primary.positive.active.border-color
  • nl.button.primary.positive.active.color
  • nl.button.primary.positive.hover.background-color
  • nl.button.primary.positive.hover.border-color
  • nl.button.primary.positive.hover.color
  • nl.button.primary.positive.pressed.background-color
  • nl.button.primary.positive.pressed.border-color
  • nl.button.primary.positive.pressed.color
  • nl.button.primary.negative.background-color
  • nl.button.primary.negative.border-color
  • nl.button.primary.negative.color
  • nl.button.primary.negative.active.background-color
  • nl.button.primary.negative.active.border-color
  • nl.button.primary.negative.active.color
  • nl.button.primary.negative.hover.background-color
  • nl.button.primary.negative.hover.border-color
  • nl.button.primary.negative.hover.color
  • nl.button.primary.negative.pressed.background-color
  • nl.button.primary.negative.pressed.border-color
  • nl.button.primary.negative.pressed.color
  • nl.button.secondary.background-color
  • nl.button.secondary.border-color
  • nl.button.secondary.border-width
  • nl.button.secondary.color
  • nl.button.secondary.font-size
  • nl.button.secondary.font-weight
  • nl.button.secondary.line-height
  • nl.button.secondary.active.background-color
  • nl.button.secondary.active.border-color
  • nl.button.secondary.active.color
  • nl.button.secondary.disabled.background-color
  • nl.button.secondary.disabled.border-color
  • nl.button.secondary.disabled.color
  • nl.button.secondary.hover.background-color
  • nl.button.secondary.hover.border-color
  • nl.button.secondary.hover.color
  • nl.button.secondary.pressed.background-color
  • nl.button.secondary.pressed.border-color
  • nl.button.secondary.pressed.color
  • nl.button.secondary.positive.background-color
  • nl.button.secondary.positive.border-color
  • nl.button.secondary.positive.color
  • nl.button.secondary.positive.active.background-color
  • nl.button.secondary.positive.active.border-color
  • nl.button.secondary.positive.active.color
  • nl.button.secondary.positive.hover.background-color
  • nl.button.secondary.positive.hover.border-color
  • nl.button.secondary.positive.hover.color
  • nl.button.secondary.positive.pressed.background-color
  • nl.button.secondary.positive.pressed.border-color
  • nl.button.secondary.positive.pressed.color
  • nl.button.secondary.negative.background-color
  • nl.button.secondary.negative.border-color
  • nl.button.secondary.negative.color
  • nl.button.secondary.negative.active.background-color
  • nl.button.secondary.negative.active.border-color
  • nl.button.secondary.negative.active.color
  • nl.button.secondary.negative.hover.background-color
  • nl.button.secondary.negative.hover.border-color
  • nl.button.secondary.negative.hover.color
  • nl.button.secondary.negative.pressed.background-color
  • nl.button.secondary.negative.pressed.border-color
  • nl.button.secondary.negative.pressed.color
  • nl.button.subtle.background-color
  • nl.button.subtle.border-color
  • nl.button.subtle.border-width
  • nl.button.subtle.color
  • nl.button.subtle.font-size
  • nl.button.subtle.font-weight
  • nl.button.subtle.line-height
  • nl.button.subtle.active.background-color
  • nl.button.subtle.active.border-color
  • nl.button.subtle.active.color
  • nl.button.subtle.disabled.background-color
  • nl.button.subtle.disabled.border-color
  • nl.button.subtle.disabled.color
  • nl.button.subtle.hover.background-color
  • nl.button.subtle.hover.border-color
  • nl.button.subtle.hover.color
  • nl.button.subtle.pressed.background-color
  • nl.button.subtle.pressed.border-color
  • nl.button.subtle.pressed.color
  • nl.button.subtle.positive.background-color
  • nl.button.subtle.positive.border-color
  • nl.button.subtle.positive.color
  • nl.button.subtle.positive.active.background-color
  • nl.button.subtle.positive.active.border-color
  • nl.button.subtle.positive.active.color
  • nl.button.subtle.positive.hover.background-color
  • nl.button.subtle.positive.hover.border-color
  • nl.button.subtle.positive.hover.color
  • nl.button.subtle.positive.pressed.background-color
  • nl.button.subtle.positive.pressed.border-color
  • nl.button.subtle.positive.pressed.color
  • nl.button.subtle.negative.background-color
  • nl.button.subtle.negative.border-color
  • nl.button.subtle.negative.color
  • nl.button.subtle.negative.active.background-color
  • nl.button.subtle.negative.active.border-color
  • nl.button.subtle.negative.active.color
  • nl.button.subtle.negative.hover.background-color
  • nl.button.subtle.negative.hover.border-color
  • nl.button.subtle.negative.hover.color
  • nl.button.subtle.negative.pressed.background-color
  • nl.button.subtle.negative.pressed.border-color
  • nl.button.subtle.negative.pressed.color

@nl-design-system-unstable/[email protected]

Minor Changes

• be1c3f7: De volgende tokens zijn toegevoegd aan (candidate) Button component:

  • nl.button.border-radius
  • nl.button.column-gap
  • nl.button.font-family
  • nl.button.min-block-size
  • nl.button.min-inline-size
  • nl.button.outline-offset
  • nl.button.padding-block-end
  • nl.button.padding-block-start
  • nl.button.padding-inline-end
  • nl.button.padding-inline-start
  • nl.button.focus.background-color
  • nl.button.focus.border-color
  • nl.button.focus.color
  • nl.button.icon.size
  • nl.button.default.background-color
  • nl.button.default.border-color
  • nl.button.default.border-width
  • nl.button.default.color
  • nl.button.default.font-size
  • nl.button.default.font-weight
  • nl.button.default.line-height
  • nl.button.default.active.background-color
  • nl.button.default.active.border-color
  • nl.button.default.active.color
  • nl.button.default.disabled.background-color
  • nl.button.default.disabled.border-color
  • nl.button.default.disabled.color
  • nl.button.default.hover.background-color
  • nl.button.default.hover.border-color
  • nl.button.default.hover.color
  • nl.button.default.pressed.background-color
  • nl.button.default.pressed.border-color
  • nl.button.default.pressed.color
  • nl.button.primary.background-color
  • nl.button.primary.border-color
  • nl.button.primary.border-width
  • nl.button.primary.color
  • nl.button.primary.font-size
  • nl.button.primary.font-weight
  • nl.button.primary.line-height
  • nl.button.primary.active.background-color
  • nl.button.primary.active.border-color
  • nl.button.primary.active.color
  • nl.button.primary.disabled.background-color
  • nl.button.primary.disabled.border-color
  • nl.button.primary.disabled.color
  • nl.button.primary.hover.background-color
  • nl.button.primary.hover.border-color
  • nl.button.primary.hover.color
  • nl.button.primary.pressed.background-color
  • nl.button.primary.pressed.border-color
  • nl.button.primary.pressed.color
  • nl.button.primary.positive.background-color
  • nl.button.primary.positive.border-color
  • nl.button.primary.positive.color
  • nl.button.primary.positive.active.background-color
  • nl.button.primary.positive.active.border-color
  • nl.button.primary.positive.active.color
  • nl.button.primary.positive.hover.background-color
  • nl.button.primary.positive.hover.border-color
  • nl.button.primary.positive.hover.color
  • nl.button.primary.positive.pressed.background-color
  • nl.button.primary.positive.pressed.border-color
  • nl.button.primary.positive.pressed.color
  • nl.button.primary.negative.background-color
  • nl.button.primary.negative.border-color
  • nl.button.primary.negative.color
  • nl.button.primary.negative.active.background-color
  • nl.button.primary.negative.active.border-color
  • nl.button.primary.negative.active.color
  • nl.button.primary.negative.hover.background-color
  • nl.button.primary.negative.hover.border-color
  • nl.button.primary.negative.hover.color
  • nl.button.primary.negative.pressed.background-color
  • nl.button.primary.negative.pressed.border-color
  • nl.button.primary.negative.pressed.color
  • nl.button.secondary.background-color
  • nl.button.secondary.border-color
  • nl.button.secondary.border-width
  • nl.button.secondary.color
  • nl.button.secondary.font-size
  • nl.button.secondary.font-weight
  • nl.button.secondary.line-height
  • nl.button.secondary.active.background-color
  • nl.button.secondary.active.border-color
  • nl.button.secondary.active.color
  • nl.button.secondary.disabled.background-color
  • nl.button.secondary.disabled.border-color
  • nl.button.secondary.disabled.color
  • nl.button.secondary.hover.background-color
  • nl.button.secondary.hover.border-color
  • nl.button.secondary.hover.color
  • nl.button.secondary.pressed.background-color
  • nl.button.secondary.pressed.border-color
  • nl.button.secondary.pressed.color
  • nl.button.secondary.positive.background-color
  • nl.button.secondary.positive.border-color
  • nl.button.secondary.positive.color
  • nl.button.secondary.positive.active.background-color
  • nl.button.secondary.positive.active.border-color
  • nl.button.secondary.positive.active.color
  • nl.button.secondary.positive.hover.background-color
  • nl.button.secondary.positive.hover.border-color
  • nl.button.secondary.positive.hover.color
  • nl.button.secondary.positive.pressed.background-color
  • nl.button.secondary.positive.pressed.border-color
  • nl.button.secondary.positive.pressed.color
  • nl.button.secondary.negative.background-color
  • nl.button.secondary.negative.border-color
  • nl.button.secondary.negative.color
  • nl.button.secondary.negative.active.background-color
  • nl.button.secondary.negative.active.border-color
  • nl.button.secondary.negative.active.color
  • nl.button.secondary.negative.hover.background-color
  • nl.button.secondary.negative.hover.border-color
  • nl.button.secondary.negative.hover.color
  • nl.button.secondary.negative.pressed.background-color
  • nl.button.secondary.negative.pressed.border-color
  • nl.button.secondary.negative.pressed.color
  • nl.button.subtle.background-color
  • nl.button.subtle.border-color
  • nl.button.subtle.border-width
  • nl.button.subtle.color
  • nl.button.subtle.font-size
  • nl.button.subtle.font-weight
  • nl.button.subtle.line-height
  • nl.button.subtle.active.background-color
  • nl.button.subtle.active.border-color
  • nl.button.subtle.active.color
  • nl.button.subtle.disabled.background-color
  • nl.button.subtle.disabled.border-color
  • nl.button.subtle.disabled.color
  • nl.button.subtle.hover.background-color
  • nl.button.subtle.hover.border-color
  • nl.button.subtle.hover.color
  • nl.button.subtle.pressed.background-color
  • nl.button.subtle.pressed.border-color
  • nl.button.subtle.pressed.color
  • nl.button.subtle.positive.background-color
  • nl.button.subtle.positive.border-color
  • nl.button.subtle.positive.color
  • nl.button.subtle.positive.active.background-color
  • nl.button.subtle.positive.active.border-color
  • nl.button.subtle.positive.active.color
  • nl.button.subtle.positive.hover.background-color
  • nl.button.subtle.positive.hover.border-color
  • nl.button.subtle.positive.hover.color
  • nl.button.subtle.positive.pressed.background-color
  • nl.button.subtle.positive.pressed.border-color
  • nl.button.subtle.positive.pressed.color
  • nl.button.subtle.negative.background-color
  • nl.button.subtle.negative.border-color
  • nl.button.subtle.negative.color
  • nl.button.subtle.negative.active.background-color
  • nl.button.subtle.negative.active.border-color
  • nl.button.subtle.negative.active.color
  • nl.button.subtle.negative.hover.background-color
  • nl.button.subtle.negative.hover.border-color
  • nl.button.subtle.negative.hover.color
  • nl.button.subtle.negative.pressed.background-color
  • nl.button.subtle.negative.pressed.border-color
  • nl.button.subtle.negative.pressed.color

@nl-design-system-unstable/[email protected]

Minor Changes

• e86ddce: De volgende tokens zijn toegevoegd aan Card as Link component:

  • ams.card.outline-offset
  • ams.card.heading.margin-block-end
  • ams.card.heading-group.gap
  • ams.card.heading-group.margin-block-end
  • ams.card.image.margin-block-end
  • ams.card.link.color
  • ams.card.link.text-decoration-line
  • ams.card.link.text-decoration-thickness
  • ams.card.link.text-underline-offset
  • ams.card.link.hover.color
  • ams.card.link.hover.text-decoration-line

@nl-design-system-unstable/[email protected]

Minor Changes

• 33932a0: De volgende tokens zijn toegevoegd aan Card as Link component:

  • ams.card.outline-offset
  • ams.card.heading.margin-block-end
  • ams.card.heading-group.gap
  • ams.card.heading-group.margin-block-end
  • ams.card.image.margin-block-end
  • ams.card.link.color
  • ams.card.link.text-decoration-line
  • ams.card.link.text-decoration-thickness
  • ams.card.link.text-underline-offset
  • ams.card.link.hover.color
  • ams.card.link.hover.text-decoration-line

@nl-design-system-community/[email protected]

Minor Changes

• b498ebf: De volgende tokens zijn toegevoegd aan Data Summary component:

  • denhaag.description-list.border-color
  • denhaag.description-list.color
  • denhaag.description-list.font-family
  • denhaag.description-list.font-size
  • denhaag.description-list.font-weight
  • denhaag.description-list.line-height
  • denhaag.description-list.margin-block-end
  • denhaag.description-list.margin-block-start
  • denhaag.description-list.padding-inline-end
  • denhaag.description-list.padding-inline-start
  • denhaag.description-list.caption.color
  • denhaag.description-list.caption.line-height
  • denhaag.description-list.caption.font-family
  • denhaag.description-list.caption.font-size
  • denhaag.description-list.caption.font-weight
  • denhaag.description-list.caption.margin-block-end
  • denhaag.description-list.detail.padding-block-end
  • denhaag.description-list.detail.padding-block-start
  • denhaag.description-list.title.color
  • denhaag.description-list.title.font-weight
  • denhaag.description-list.title.padding-block-end
  • denhaag.description-list.title.padding-block-start
  • denhaag.description-list.lg.padding-inline-end
  • denhaag.description-list.lg.padding-inline-start
  • denhaag.description-list.lg.detail.padding-block-end
  • denhaag.description-list.lg.detail.padding-block-start
  • denhaag.description-list.lg.title.padding-block-end
  • denhaag.description-list.lg.title.padding-block-start

@nl-design-system-unstable/[email protected]

Major Changes

• f7c727c: De volgende tokens zijn hernoemd in Side Navigation component:

  • denhaag.sidenav.min-width naar denhaag.side-navigation.min-width
  • denhaag.sidenav.row-gap naar denhaag.side-navigation.row-gap
  • denhaag.sidenav.item.font-family naar denhaag.side-navigation.item.font-family
  • denhaag.sidenav.item.font-size naar denhaag.side-navigation.item.font-size
  • denhaag.sidenav.item.font-weight naar denhaag.side-navigation.item.font-weight
  • denhaag.sidenav.item.line-height naar denhaag.side-navigation.item.line-height
  • denhaag.sidenav.item.margin-block-end naar denhaag.side-navigation.item.margin-block-end
  • denhaag.sidenav.item.margin-block-start naar denhaag.side-navigation.item.margin-block-start
  • denhaag.sidenav.item.margin-inline-end naar denhaag.side-navigation.item.margin-inline-end
  • denhaag.sidenav.item.margin-inline-start naar denhaag.side-navigation.item.margin-inline-start
  • denhaag.sidenav.link.color naar denhaag.side-navigation.link.color
  • denhaag.sidenav.link.column-gap naar denhaag.side-navigation.link.column-gap
  • denhaag.sidenav.link.padding-block-end naar denhaag.side-navigation.link.padding-block-end
  • denhaag.sidenav.link.padding-block-start naar denhaag.side-navigation.link.padding-block-start
  • denhaag.sidenav.link.active.color naar denhaag.side-navigation.link.active.color
  • denhaag.sidenav.link.active.font-weight naar denhaag.side-navigation.link.active.font-weight
  • denhaag.sidenav.link.current.color naar denhaag.side-navigation.link.current.color
  • denhaag.sidenav.link.current.font-weight naar denhaag.side-navigation.link.current.font-weight
  • denhaag.sidenav.link.hover.color naar denhaag.side-navigation.link.hover.color
  • denhaag.sidenav.list.padding-block-end naar denhaag.side-navigation.list.padding-block-end
  • denhaag.sidenav.list.padding-block-start naar denhaag.side-navigation.list.padding-block-start
  • denhaag.sidenav.list.padding-inline-start naar denhaag.side-navigation.list.padding-inline-start
  • todo.sidenav.link.hover.text-decoration naar todo.side-navigation.link.hover.text-decoration
  • todo.sidenav.link.icon.size naar todo.side-navigation.link.icon.size

Minor Changes

• 85132d1: De volgende tokens zijn hernoemd in Action Group component:

  • utrecht.button-group.background-color naar utrecht.action-group.background-color
  • utrecht.button-group.column-gap naar utrecht.action-group.column-gap
  • utrecht.button-group.padding-block-end naar utrecht.action-group.padding-block-end
  • utrecht.button-group.padding-block-start naar utrecht.action-group.padding-block-start
  • utrecht.button-group.row-gap naar utrecht.action-group.row-gap

• 74e6902: De volgende tokens zijn toegevoegd aan Data Summary component:

  • denhaag.description-list.border-color
  • denhaag.description-list.color
  • denhaag.description-list.font-family
  • denhaag.description-list.font-size
  • denhaag.description-list.font-weight
  • denhaag.description-list.line-height
  • denhaag.description-list.margin-block-end
  • denhaag.description-list.margin-block-start
  • denhaag.description-list.padding-inline-end
  • denhaag.description-list.padding-inline-start
  • denhaag.description-list.caption.color
  • denhaag.description-list.caption.line-height
  • denhaag.description-list.caption.font-family
  • denhaag.description-list.caption.font-size
  • denhaag.description-list.caption.font-weight
  • denhaag.description-list.caption.margin-block-end
  • denhaag.description-list.detail.padding-block-end
  • denhaag.description-list.detail.padding-block-start
  • denhaag.description-list.title.color
  • denhaag.description-list.title.font-weight
  • denhaag.description-list.title.padding-block-end
  • denhaag.description-list.title.padding-block-start
  • denhaag.description-list.lg.padding-inline-end
  • denhaag.description-list.lg.padding-inline-start
  • denhaag.description-list.lg.detail.padding-block-end
  • denhaag.description-list.lg.detail.padding-block-start
  • denhaag.description-list.lg.title.padding-block-end
  • denhaag.description-list.lg.title.padding-block-start

• 7a1df20: De description van de volgende tokens zijn gewijzigd:

  • nl.link.color description [code-only] verwijderd.
  • nl.link.text-decoration-color description [code-only] toegevoegd.

• 7911fd5: Token ams.image.aspect-ratio is toegevoegd aan Image component.

• 02e1d0d: De volgende tokens zijn toegevoegd aan Action Group component:

  • utrecht.action-group.margin-block-end
  • utrecht.action-group.margin-block-start

  De volgende tokens zijn toegevoegd aan Alert component:

  • utrecht.alert.margin-block-end
  • utrecht.alert.margin-block-start

  De volgende tokens zijn toegevoegd aan Blockquote component:

  • utrecht.blockquote.margin-block-end
  • utrecht.blockquote.margin-block-start
  • utrecht.blockquote.margin-inline-end
  • utrecht.blockquote.margin-inline-start

  De volgende tokens zijn toegevoegd aan Code Block component:

  • utrecht.code-block.margin-block-end
  • utrecht.code-block.margin-block-start
  • utrecht.code-block.margin-inline-end
  • utrecht.code-block.margin-inline-start

  De volgende tokens zijn toegevoegd aan Figure component:

  • utrecht.figure.margin-block-end
  • utrecht.figure.margin-block-start

  De volgende tokens zijn toegevoegd aan Form Field component:

  • utrecht.form-field.margin-block-end
  • utrecht.form-field.margin-block-start

  De volgende tokens zijn toegevoegd aan Form Field Discription component:

  • utrecht.form-field-description.margin-block-end
  • utrecht.form-field-description.margin-block-start

  De volgende tokens zijn toegevoegd aan Form Field Error Message component:

  • utrecht.form-field-error-message.margin-block-end
  • utrecht.form-field-error-message.margin-block-start

  De volgende tokens zijn toegevoegd aan Headings 1 t/m 6:

  • utrecht.heading-1.margin-block-end
  • utrecht.heading-1.margin-block-start
  • utrecht.heading-2.margin-block-end
  • utrecht.heading-2.margin-block-start
  • utrecht.heading-3.margin-block-end
  • utrecht.heading-3.margin-block-start
  • utrecht.heading-4.margin-block-end
  • utrecht.heading-4.margin-block-start
  • utrecht.heading-5.margin-block-end
  • utrecht.heading-5.margin-block-start
  • utrecht.heading-6.margin-block-end
  • utrecht.heading-6.margin-block-start

  De volgende tokens zijn toegevoegd aan Page Number Navigation component:

  • utrecht.pagination.margin-block-end
  • utrecht.pagination.margin-block-start

  De volgende tokens zijn toegevoegd aan Pre Heading component:

  • utrecht.pre-heading.margin-block-end
  • utrecht.pre-heading.margin-block-start

  De volgende tokens zijn toegevoegd aan Radio Button component:

  • utrecht.radio-button.margin-block-end
  • utrecht.radio-button.margin-block-start

  De volgende tokens zijn toegevoegd aan Separator component:

  • utrecht.separator.margin-block-end
  • utrecht.separator.margin-block-start

  De volgende tokens zijn toegevoegd aan Separator component:

  • denhaag.sidenav.item.margin-block-end
  • denhaag.sidenav.item.margin-block-start
  • denhaag.sidenav.item.margin-inline-end
  • denhaag.sidenav.item.margin-inline-start

  De volgende tokens zijn toegevoegd aan Table component:

  • utrecht.table.margin-block-end
  • utrecht.table.margin-block-start

• b5e113b: De waarde van de volgende tokens zijn gewijzigd:

  • utrecht.spotlight-section.border-width naar 0px.
  • utrecht.spotlight-section.info.border-width naar component token utrecht.spotlight-section.border-width.
  • utrecht.spotlight-section.error.border-width naar component token utrecht.spotlight-section.border-width.
  • utrecht.spotlight-section.ok.border-width naar component token utrecht.spotlight-section.border-width.
  • utrecht.spotlight-section.warning.border-width naar component token utrecht.spotlight-section.border-width.

@nl-design-system-community/[email protected]

Minor Changes

• 4ca9b50: Tokens van Navigation Drawer component van MA zijn toegevoegd aan de JSON.

Patch Changes

• c522530: Token todo.spotlight-section.row-gap is verwijderd uit Note component.

  De waarde van de volgende tokens zijn gewijzigd:

  • utrecht.spotlight-section.background-color naar common token basis.color.accent-1.bg-subtle
  • utrecht.spotlight-section.border-color naar common token basis.color.accent-1.border-subtle
  • utrecht.spotlight-section.border-width naar 0px
  • utrecht.spotlight-section.info.border-width naar component token utrecht.spotlight-section.border-width
  • utrecht.spotlight-section.error.border-width naar component token utrecht.spotlight-section.border-width
  • utrecht.spotlight-section.ok.border-width naar component token utrecht.spotlight-section.border-width
  • utrecht.spotlight-section.warning.border-width naar component token utrecht.spotlight-section.border-width
  • utrecht.spotlight-section.warning.background-color naar component token basis.color.warning.bg-subtle

@nl-design-system-unstable/[email protected]

Minor Changes

• a453207: De volgende tokens zijn toegevoegd aan Button component:

  • utrecht.button.pressed.background-color
  • utrecht.button.pressed.border-color
  • utrecht.button.pressed.color
  • utrecht.button.primary-action.pressed.background-color
  • utrecht.button.primary-action.pressed.border-color
  • utrecht.button.primary-action.pressed.color
  • utrecht.button.secondary-action.pressed.background-color
  • utrecht.button.secondary-action.pressed.border-color
  • utrecht.button.secondary-action.pressed.color
  • utrecht.button.subtle.pressed.background-color
  • utrecht.button.subtle.pressed.border-color
  • utrecht.button.subtle.pressed.color

• d4003e8: De waarde van de volgende tokens zijn gewijzigd:

  • basis.focus.outline-color naar #0b0c0c
  • basis.focus.inverse.outline-color naar #ffffff

• ad7c354: De volgende tokens zijn toegevoegd aan (community) Icon component:

  • utrecht.icon.color
  • utrecht.icon.inset-block-start
  • utrecht.icon.baseline.inset-block-start

• 07ea949: Token utrecht.link-list.font-weight is hernoemd naar utrecht.link-list.link.font-weight in Link List component.

• bf05284: De volgende tokens zijn toegevoegd aan Page Footer component:

  • ams.page-footer.spotlight.background-color
  • ams.page-footer.menu-link.color
  • ams.page-footer.menu-link.hover.color
  • ams.page-footer.menu-link.hover.text-decoration-line
  • ams.page-footer.menu-link.font-family
  • ams.page-footer.menu-link.font-size
  • ams.page-footer.menu-link.font-weight
  • ams.page-footer.menu-link.line-height
  • ams.page-footer.menu-link.outline-offset
  • ams.page-footer.menu-link.text-decoration-line
  • ams.page-footer.menu-link.text-underline-offset
  • ams.page-footer.menu-link.text-decoration-thickness
  • ams.page-footer.menu.column-gap
  • ams.page-footer.menu.padding-block
  • ams.page-footer.menu.padding-inline
  • ams.page-footer.menu.row-gap
  • ams.page-footer.menu.medium.padding-inline
  • ams.page-footer.menu.wide.padding-inline

• f0c56c9: De volgende tokens zijn toegevoegd aan Page Header component:

  • ams.page-header.font-family
  • ams.page-header.padding-inline
  • ams.page-header.padding-block
  • ams.page-header.medium.padding-inline
  • ams.page-header.wide.padding-inline
  • ams.page-header.logo-link.column-gap
  • ams.page-header.logo-link.outline-offset
  • ams.page-header.brand-name.color
  • ams.page-header.brand-name.font-size
  • ams.page-header.brand-name.font-weight
  • ams.page-header.brand-name.text-wrap
  • ams.page-header.navigation.column-gap
  • ams.page-header.navigation.row-gap
  • ams.page-header.menu.column-gap
  • ams.page-header.menu.row-gap
  • ams.page-header.menu-item.color
  • ams.page-header.menu-item.line-height
  • ams.page-header.menu-item.font-size
  • ams.page-header.menu-item.font-weight
  • ams.page-header.menu-item.outline-offset
  • ams.page-header.menu-item.padding-block
  • ams.page-header.menu-item.hover.color
  • ams.page-header.menu-item.column-gap
  • ams.page-header.menu-link.text-decoration-line
  • ams.page-header.menu-link.text-underline-offset
  • ams.page-header.menu-link.hover.text-decoration-line
  • ams.page-header.menu-link.text-decoration-thickness
  • ams.page-header.mega-menu-button.cursor
  • ams.page-header.mega-menu-button.label.open.font-weight