Skip to content

feat: introduce basis tokens in figma.tokens.json - #2889

Draft
bartveneman wants to merge 27 commits into
mainfrom
feat/introduce-basis-tokens
Draft

bartveneman wants to merge 27 commits into
mainfrom
feat/introduce-basis-tokens

Conversation

@bartveneman

@bartveneman bartveneman commented Oct 23, 2026 •

Copy link
Copy Markdown
Contributor
  • Adds common.basis object in figma.tokens.json with all the basis tokens from the Start-theme (commit #1)
  • Fixes an upcoming breaking change in Start thema: replace all references in color.action-2 from accent-1 to action-1 (commit #2)
  • Does NOT make any changes to the existing theme configuration yet. That will happen in upcoming PR's to make reviewing and spotting regressions easy.

closes #2888
blocked by #2890

@vercel

vercel Bot commented Oct 23, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
rijkshuisstijl-community Ready Ready Preview Oct 26, 2026 12:43pm UTC
rijkshuisstijl-community-storybook-angular Ready Ready Preview Oct 26, 2026 12:43pm UTC
rijkshuisstijl-community-templates Ready Ready Preview Oct 26, 2026 12:43pm UTC

Request Review

@changeset-bot

changeset-bot Bot commented Oct 23, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 3023243

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@rijkshuisstijl-community/design-tokens Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

'@rijkshuisstijl-community/design-tokens': minor
---

feat: introduce Basis tokens (without making actual theme changes yet)

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

todo: nog updaten voordat de PR ready4review is

bartveneman and others added 2 commits October 26, 2026 11:44
Where it started:

```
• rhc.focus.outline-offset: Invalid token reference: $type "other" of "{"$type":"other","$value":"{rhc.space.xs}"}" at "rhc.focus.outline-offset" does not match the $type on reference {rhc.space.xs}. Types "other" and "dimension" do not match.
• rhc.logo.subtitle.letter-spacing: Invalid token reference: $type "letterSpacing" of "{"$type":"letterSpacing","$value":"{rhc.text.letter-spacing.tight}"}" at "rhc.logo.subtitle.letter-spacing" does not match the $type on reference {rhc.text.letter-spacing.tight}. Types "letterSpacing" and "dimension" do not match.
• rhc.logo.title.letter-spacing: Invalid token reference: $type "letterSpacing" of "{"$type":"letterSpacing","$value":"{rhc.text.letter-spacing.normal}"}" at "rhc.logo.title.letter-spacing" does not match the $type on reference {rhc.text.letter-spacing.normal}. Types "letterSpacing" and "dimension" do not match.
• rhc.message-list.item.label.font-family: Invalid token reference: $type "font-family" of "{"$type":"font-family","$value":"{rhc.text.font-family.default}"}" at "rhc.message-list.item.label.font-family" does not match the $type on reference {rhc.text.font-family.default}. Types "font-family" and "fontFamily" do not match.
• rhc.message-list.item.label.font-size: Invalid token reference: $type "font-size" of "{"$type":"font-size","$value":"{rhc.text.font-size.md}"}" at "rhc.message-list.item.label.font-size" does not match the $type on reference {rhc.text.font-size.md}. Types "font-size" and "dimension" do not match.
• rhc.message-list.item.label.font-weight: Invalid token reference: $type "font-weight" of "{"$type":"font-weight","$value":"{rhc.text.font-weight.strong}"}" at "rhc.message-list.item.label.font-weight" does not match the $type on reference {rhc.text.font-weight.strong}. Types "font-weight" and "number" do not match.
• rhc.message-list.item.label.line-height: Invalid token reference: $type "line-height" of "{"$type":"line-height","$value":"{rhc.text.line-height.md}"}" at "rhc.message-list.item.label.line-height" does not match the $type on reference {rhc.text.line-height.md}. Types "line-height" and "number" do not match.
• utrecht.focus.outline-offset: Invalid token reference: $type "dimension" of "{"$type":"dimension","$value":"{rhc.focus.outline-offset}"}" at "utrecht.focus.outline-offset" does not match the $type on reference {rhc.focus.outline-offset}. Types "dimension" and "other" do not match.
• utrecht.link.text-underline-offset: Invalid token reference: $type "other" of "{"$type":"other","$value":"{rhc.space.xs}","$description":"[code-only]"}" at "utrecht.link.text-underline-offset" does not match the $type on reference {rhc.space.xs}. Types "other" and "dimension" do not match.
• utrecht.listbox.font-weight: Invalid token reference: $type "dimension" of "{"$type":"dimension","$value":"{rhc.text.font-weight.regular}"}" at "utrecht.listbox.font-weight" does not match the $type on reference {rhc.text.font-weight.regular}. Types "dimension" and "number" do not match.
• todo.accordion.button.line-height: Invalid token reference: $type "lineHeight" of "{"$type":"lineHeight","$value":"{utrecht.button.subtle.line-height}","$extensions":{"nl.nldesignsystem.token-subtype":"line-height"}}" at "todo.accordion.button.line-height" does not match the $type on reference {utrecht.button.subtle.line-height}. Types "lineHeight" and "dimension" do not match.
• nl.link.text-underline-offset: Invalid token reference: $type "other" of "{"$type":"other","$value":"{rhc.space.xs}","$description":"[code-only]"}" at "nl.link.text-underline-offset" does not match the $type on reference {rhc.space.xs}. Types "other" and "dimension" do not match.
• ams.pagination.link.text-underline-offset: Invalid token reference: $type "other" of "{"$type":"other","$value":"{rhc.space.xs}","$description":"[code-only]"}" at "ams.pagination.link.text-underline-offset" does not match the $type on reference {rhc.space.xs}. Types "other" and "dimension" do not match.
• basis.color.default.border-default.$value: Insufficient contrast
• basis.color.default.bg-default.$value: Insufficient contrast
• basis.color.highlight.color-default.$value: Insufficient contrast
• basis.color.highlight.bg-default.$value: Insufficient contrast
• rhc.logo.title.min.font-size.$value: Font-size should be 14px or 0.875rem minimum (got: "0.75rem")
• utrecht.button.primary-action.line-height.$value: Line-height should be a unitless number (got: {"unit":"rem","value":1.875})
• utrecht.button.secondary-action.line-height.$value: Line-height should be a unitless number (got: {"unit":"rem","value":1.875})
• utrecht.button.subtle.line-height.$value: Line-height should be a unitless number (got: {"unit":"rem","value":1.875})
• utrecht.form-field-error-message.line-height.$value: Line-height should be a unitless number (got: {"unit":"normal","value":0})
```

Where it's at:

```
• basis.color.default.border-default.$value: Insufficient contrast
• basis.color.default.bg-default.$value: Insufficient contrast
• basis.color.highlight.color-default.$value: Insufficient contrast
• basis.color.highlight.bg-default.$value: Insufficient contrast
• rhc.logo.title.min.font-size.$value: Font-size should be 14px or 0.875rem minimum (got: "0.75rem")
```
@sonarqubecloud

Copy link
Copy Markdown

This branch was successfully deployed

3 active deployments
Preview – rijkshuisstijl-community-storybook-angular — 3023243f Deployed Oct 26, 2026 by vercel[bot]
Preview – rijkshuisstijl-community — 3023243f Deployed Oct 26, 2026 by vercel[bot]
Preview – rijkshuisstijl-community-templates — 3023243f Deployed Oct 26, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

De basis-tokens worden toegevoegd aan de Common laag van de Rijkshuisstijl bibliotheek

2 participants