docs: new CSS variable/token preview tables

[mimarz]

resolves #4387
resolves #4362

After meeting on 27 jan we decided to hide the variables tab until we can dedicated more resources on designing it how we want in themebuilder. Still want to merge changes for future work

• Changed default tab to be colorsystem
• Renamed overview tab to be examples
• Added new table for display tokens variables to @internal/components
  • These use preview tokens and have a toggle for preview visualisation of variable.
• New tables are used in both www and themebuilder
• Cleaned up a lot of code in themebuilder to make it more descriptive what components are used for and added missing layout for themebuilder page.
• Removed "tokens" from www, all this code now live in @internal/components
• Changed fallback port to 3001 on themebuilder so its possible to run both themebuilder an www at the same time locally. ( can move this to different PR if desirable)

Know bug/limitation:

• border-radius variables does not update according to selected borde-radius-base in preview in themebuilder. Didn't get this to work properly, needs to be looked at closer in a different PR

[changeset-bot]

🦋 Changeset detected

Latest commit: 2358ad9

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

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

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

[github-actions]

Preview deployments for this pull request:

storybook - 3. Feb 2026 - 17:16

themebuilder - 3. Feb 2026 - 17:16

www - 3. Feb 2026 - 17:22

[Barsnes]

Is there a reason why neutral and severity colors are not in the preview?

[mimarz]

Is there a reason why neutral and severity colors are not in the preview?

Forgot to add them. Fixed now :)

[Barsnes]

changing color in the select does not update the value in the select, so you can never select the first color anymore.

20260127-1223-32.2253565.mp4

[Barsnes]

changing color in the select does not update the value in the select, so you can never select the first color anymore.

It seems like token overrides is not respected either

[mimarz]

changing color in the select does not update the value in the select, so you can never select the first color anymore.

20260127-1223-32.2253565.mp4

Fixed this even though we decided to hide this tab for now :)

[Barsnes]

if a user goes to a url that has this in query: tab=overview, it needs to be chanegd to examples, otherwise we break thousands of URLs:

[mimarz]

if a user goes to a url that has this in query: tab=overview, it needs to be chanegd to examples, otherwise we break thousands of URLs:

Good catch! I'll look into a fix.

[mimarz]

Should be fixed now @Barsnes , added a redirect if tab is overview to new default so that users get updated url when they keep sharing/saving it.

[Barsnes]

overview used to be the same tab as examples, so if a user comes with that tab, it should redirect to examples