Design Tokens: add new color and font-family CSS Custom Properties by RasmusKjeldgaard · Pull Request #4749 · kirbydesign/designsystem

RasmusKjeldgaard · 2026-09-29T20:17:29Z

Which issue does this PR close?

This PR adds token output from #4745

What is the new behavior?

New set of Design tokens for the re-branding are added to :root element via the core package's global styles, and made available under specific surface selectors in preparation for using the tokens in all designsystem and extension components.

This initial addition is mostly about color and font family, alongside the well-defined spacings etc. Any variables that are not yet fully refined are ignored for now, to be rolled out incrementally when needed.

Does this PR introduce a breaking change?

Yes
No

Are there any additional context?

Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Reminders

Make sure you have implemented tests following the guidelines in: "The good: Test".
Make sure you have updated the cookbook with examples and showcases (for bug fixes, enhancements & new components).

Review

Determine if your changes are a fix, feature or breaking-change, and add the matching label to your PR. If it is tooling, dependency updates or similar, add ignore-for-release.
Do a self-review.
Request that the changes are code-reviewed
Request that the changes are UX reviewed (only necessary if your PR introduces visual changes)

When the pull request has been approved it will be merged to develop by Team Kirby.

_{Stack created with GitHub Stacks CLI • Give Feedback 💬}

Loujuu

Nice with Figma generate files. I do think they need a closer look. Seems like there is currently many doublications and some improvements to the structure.

Loujuu · 2026-10-07T12:43:30Z

+ */
+
+:root {
+  --kirby-system-color-light-grey-25: #ffffff;


This naming is a bit misleading. #ffffff is white. kirby-system-color-light-grey-25. I do also wonder how a greyscale can represent a pure white?

I think it is not uncommon to have a palette that includes black/white on opposite ends.

https://m3.material.io/styles/color/system/how-the-system-works

But the naming and increments could possibly be improved, we'll have to discuss with designers.

Loujuu · 2026-10-07T12:55:41Z

+ */
+
+:root {
+  --kirby-system-color-light-grey-25: #ffffff;


Could it be confusing to use light-grey and dark-grey. light-grey-975 will not be light. And dark-grey-25 will not be dark. I wonder if we actually need 25 shades?

Loujuu · 2026-10-08T06:19:32Z

+  --kirby-color-fill-danger-quiet-hover: var(--kirby-system-color-red-100);
+  --kirby-color-fill-danger-quiet-active: var(--kirby-system-color-red-50);
+  --kirby-color-content-base-loud: var(--kirby-system-color-dark-grey-975);
+  --kirby-color-content-base-loud-hover: var(--kirby-system-color-dark-grey-975);


Is it intentional that var(--kirby-system-color-dark-grey-975); is used for different states: default/hover/active?

Loujuu · 2026-10-08T06:34:21Z

+  --kirby-color-content-base-hover: var(--kirby-system-color-dark-grey-975);
+  --kirby-color-content-base-active: var(--kirby-system-color-dark-grey-975);
+  --kirby-color-content-base-quiet: var(--kirby-system-color-dark-grey-500);
+  --kirby-color-content-base-quiet-hover: var(--kirby-system-color-dark-grey-500);


Same issue: var(--kirby-system-color-dark-grey-500); used for different states default/hover/active.

Loujuu · 2026-10-08T06:49:11Z

+  --kirby-color-content-raised-loud: var(--kirby-system-color-dark-grey-975);
+  --kirby-color-content-raised-loud-hover: var(--kirby-system-color-dark-grey-975);
+  --kirby-color-content-raised-loud-active: var(--kirby-system-color-dark-grey-975);
+  --kirby-color-content-raised: var(--kirby-system-color-dark-grey-975);


Same issue regarding using same color for all states for --kirby-color-content-raised.

Loujuu · 2026-10-08T12:07:43Z

+  --kirby-toggle-color-fill-engaged: var(--kirby-system-color-green-600);
+  --kirby-toggle-color-fill-engaged-hover: var(--kirby-system-color-green-700);
+  --kirby-toggle-color-fill-engaged-active: var(--kirby-system-color-green-800);
+  --kirby-toggle-color-content: var(--kirby-system-color-white-00);


default/hover/active have same: (--kirby-system-color-white-00). If no states needed delete hover and active

Loujuu · 2026-10-08T12:09:17Z

+  --kirby-toggle-color-fill-engaged: var(--kirby-system-color-green-400);
+  --kirby-toggle-color-fill-engaged-hover: var(--kirby-system-color-green-300);
+  --kirby-toggle-color-fill-engaged-active: var(--kirby-system-color-green-200);
+  --kirby-toggle-color-content: var(--kirby-system-color-dark-grey-975);


default/hover/active have same color. If no states needed delete hover and active

Loujuu · 2026-10-08T12:12:07Z

+  --kirby-color-content-danger-loud-hover: var(--kirby-system-color-white-00);
+  --kirby-color-content-danger-loud-active: var(--kirby-system-color-white-00);
+  --kirby-color-content-danger: var(--kirby-system-color-dark-grey-975);
+  --kirby-color-content-danger-hover: var(--kirby-system-color-dark-grey-975);


In genrel, check if state colors are needed or delete. default/hover/active have same. If no states needed delete hover and active

Loujuu · 2026-10-08T12:23:41Z

+  --kirby-color-border-raised-quiet: var(--kirby-system-color-light-grey-700);
+  --kirby-color-border-raised-quiet-hover: var(--kirby-system-color-light-grey-700);
+  --kirby-color-border-raised-quiet-active: var(--kirby-system-color-light-grey-700);
+  --kirby-color-border-raised-silent: var(--kirby-system-color-light-grey-600);


The same token three times and with different values. Seems to be a bug?
Please go though the tokens to see if this is a single mistake.
Also states with same value.

I will not go though every token :-)

(137-139)
--kirby-color-border-raised-silent: var(--kirby-system-color-light-grey-600);
--kirby-color-border-raised-silent-hover: var(--kirby-system-color-light-grey-600);
--kirby-color-border-raised-silent-active: var(--kirby-system-color-light-grey-600);

(314-316)
--kirby-color-border-raised-silent: var(--kirby-system-color-light-grey-600);
--kirby-color-border-raised-silent-hover: var(--kirby-system-color-light-grey-600);
--kirby-color-border-raised-silent-active: var(--kirby-system-color-light-grey-600);

(491-493)
--kirby-color-border-raised-silent: var(--kirby-brand-color-dark-blue-700);
--kirby-color-border-raised-silent-hover: var(--kirby-brand-color-dark-blue-600);
--kirby-color-border-raised-silent-active: var(--kirby-brand-color-dark-blue-500);

Loujuu · 2026-10-08T12:25:49Z

@@ -1,4 +1,9 @@
 @use 'utils';
+
+@use 'themes/primitives';


Could we discuss the theming to better understand this concept of dividing the tokens.

This is the output from running the new Design Token pipeline on the current figma exports. Final details still missing around naming and existing specs (spacing, font-weight etc) in figma, so the files are not yet exported or used.

Ignore unused or not-ready-for-dev variables

RasmusKjeldgaard added this pull request to stack #4748 September 29, 2026 20:17

RasmusKjeldgaard force-pushed the enhancement/design-token-pipeline-css-output branch from 5433339 to 18bfb9c Compare September 30, 2026 06:42

RasmusKjeldgaard marked this pull request as draft September 30, 2026 06:43

github-actions Bot deployed to pr-design-token-pipeline-css-output September 30, 2026 06:45 View deployment

RasmusKjeldgaard changed the title ~~enhancement/design token pipeline css output~~ Design Tokens: add @repo/design-tokens output Sep 30, 2026

RasmusKjeldgaard changed the title ~~Design Tokens: add @repo/design-tokens output~~ Design Tokens: add all new CSS Custom Properties Sep 30, 2026

RasmusKjeldgaard force-pushed the enhancement/design-token-pipeline-css-output branch from 18bfb9c to eed4efd Compare September 30, 2026 08:24

github-actions Bot deployed to pr-design-token-pipeline-css-output September 30, 2026 08:26 View deployment

RasmusKjeldgaard force-pushed the enhancement/design-token-pipeline-css-output branch 2 times, most recently from ef0ccb3 to edfa3d2 Compare October 1, 2026 10:20

github-actions Bot deployed to pr-design-token-pipeline-css-output October 1, 2026 10:24 View deployment

RasmusKjeldgaard force-pushed the enhancement/design-token-pipeline-css-output branch from edfa3d2 to da6b5bf Compare October 1, 2026 12:17

github-actions Bot deployed to pr-design-token-pipeline-css-output October 1, 2026 12:19 View deployment

RasmusKjeldgaard mentioned this pull request Oct 1, 2026

Design Tokens: add design token pipeline (@repo/design-tokens) #4745

Open

7 of 8 tasks

RasmusKjeldgaard force-pushed the enhancement/design-token-pipeline-css-output branch from da6b5bf to 3518963 Compare October 1, 2026 14:09

github-actions Bot deployed to pr-design-token-pipeline-css-output October 1, 2026 14:11 View deployment

RasmusKjeldgaard force-pushed the enhancement/design-token-pipeline-css-output branch 2 times, most recently from cfed8bc to 53e5408 Compare October 1, 2026 17:23

github-actions Bot deployed to pr-design-token-pipeline-css-output October 1, 2026 17:25 View deployment

github-actions Bot deployed to pr-design-token-pipeline-css-output October 2, 2026 08:48 View deployment

RasmusKjeldgaard force-pushed the enhancement/design-token-pipeline-css-output branch from ae874b3 to 918c4e5 Compare October 5, 2026 13:59

github-actions Bot deployed to pr-design-token-pipeline-css-output October 5, 2026 14:03 View deployment

RasmusKjeldgaard force-pushed the enhancement/design-token-pipeline-css-output branch from 918c4e5 to 8890e0b Compare October 5, 2026 14:08

github-actions Bot deployed to pr-design-token-pipeline-css-output October 5, 2026 14:10 View deployment

RasmusKjeldgaard force-pushed the enhancement/design-token-pipeline-css-output branch from 8890e0b to 93ad535 Compare October 6, 2026 13:39

RasmusKjeldgaard force-pushed the enhancement/design-token-pipeline-css-output branch from 93ad535 to f37156c Compare October 6, 2026 13:42

RasmusKjeldgaard added the ignore-for-release Housekeeping, tooling etc. that have no relevance for consumers of Kirby label Oct 6, 2026

github-actions Bot deployed to pr-design-token-pipeline-css-output October 6, 2026 17:21 View deployment

RasmusKjeldgaard force-pushed the enhancement/design-token-pipeline-css-output branch from 3a113b9 to 60fdf73 Compare October 6, 2026 18:35

github-actions Bot deployed to pr-design-token-pipeline-css-output October 6, 2026 18:37 View deployment

RasmusKjeldgaard marked this pull request as ready for review October 6, 2026 18:46

RasmusKjeldgaard requested a review from jkaltoft as a code owner October 6, 2026 18:46

RasmusKjeldgaard changed the title ~~Design Tokens: add all new CSS Custom Properties~~ Design Tokens: add new color and font-family CSS Custom Properties Oct 6, 2026

github-actions Bot deployed to pr-design-token-pipeline-css-output October 6, 2026 18:59 View deployment

github-actions Bot deployed to pr-design-token-pipeline-css-output October 7, 2026 14:17 View deployment

Loujuu reviewed Oct 8, 2026

View reviewed changes

RasmusKjeldgaard force-pushed the enhancement/design-token-pipeline-css-output branch from b1ba96c to e463f41 Compare October 8, 2026 13:25

github-actions Bot deployed to pr-design-token-pipeline-css-output October 8, 2026 13:27 View deployment

RasmusKjeldgaard force-pushed the enhancement/design-token-pipeline-css-output branch from e463f41 to 4a03669 Compare October 8, 2026 14:32

github-actions Bot deployed to pr-design-token-pipeline-css-output October 8, 2026 14:34 View deployment

RasmusKjeldgaard force-pushed the enhancement/design-token-pipeline-css-output branch from 4a03669 to 61183f2 Compare October 9, 2026 07:45

github-actions Bot deployed to pr-design-token-pipeline-css-output October 9, 2026 07:47 View deployment

RasmusKjeldgaard added 8 commits October 9, 2026 11:00

Design Tokens: add @repo/design-tokens output

3a40245

This is the output from running the new Design Token pipeline on the current figma exports. Final details still missing around naming and existing specs (spacing, font-weight etc) in figma, so the files are not yet exported or used.

Add new figma updates

0db2016

Sync tokens file and update colors

76a1468

Update naming

76a82c0

Tweak outputted files

390e2a4

Ignore unused or not-ready-for-dev variables

Fully remove font-family mixin

5fa53dc

Update tests with own config

b837702

Update font family

b32e850

RasmusKjeldgaard force-pushed the enhancement/design-token-pipeline-css-output branch from 61183f2 to b32e850 Compare October 9, 2026 09:00

github-actions Bot had a problem deploying to pr-design-token-pipeline-css-output October 9, 2026 09:02 Failure

Navigation Menu

Repository navigation

Design Tokens: add new color and font-family CSS Custom Properties - #4749

Design Tokens: add new color and font-family CSS Custom Properties#4749
RasmusKjeldgaard wants to merge 8 commits into
enhancement/design-token-pipeline-generatorfrom
enhancement/design-token-pipeline-css-output

RasmusKjeldgaard commented Sep 29, 2026 •

edited

Loading

Uh oh!

Loujuu left a comment

Uh oh!

Loujuu Oct 7, 2026

Uh oh!

RasmusKjeldgaard Oct 9, 2026

Uh oh!

Loujuu Oct 7, 2026

Uh oh!

Loujuu Oct 8, 2026

Uh oh!

Loujuu Oct 8, 2026

Uh oh!

Loujuu Oct 8, 2026

Uh oh!

Loujuu Oct 8, 2026

Uh oh!

Loujuu Oct 8, 2026

Uh oh!

Loujuu Oct 8, 2026

Uh oh!

Loujuu Oct 8, 2026

Uh oh!

Loujuu Oct 8, 2026

Uh oh!

This branch had an error being deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

RasmusKjeldgaard commented Sep 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Which issue does this PR close?

What is the new behavior?

Does this PR introduce a breaking change?

Are there any additional context?

Checklist:

Reminders

Review

Uh oh!

Loujuu left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This branch had an error being deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

RasmusKjeldgaard commented Sep 29, 2026 •

edited

Loading