Skip to content

feat(tokens): updated greyscale tokens#306

Closed
najlaskr wants to merge 8 commits intocloudflare:mainfrom
najlaskr:surface-tokens
Closed

feat(tokens): updated greyscale tokens#306
najlaskr wants to merge 8 commits intocloudflare:mainfrom
najlaskr:surface-tokens

Conversation

@najlaskr
Copy link
Copy Markdown
Contributor

This PR continues the semantic token migration by moving surface/background usage to the new base-scale model and applying those tokens across docs + components.

It includes:

  • Surface token definitions + theme output updates
  • Component-level token replacements for consistency

Why

The old semantic names (surface/recessed/tint/elevated/interact) were less explicit about relative elevation. This PR standardizes usage around the base-scale model (canvas, base-neg-*, base, base-*, overlay) so component backgrounds are easier to reason about and more consistent across themes.

This migration keeps kumo-base as the canonical default surface, since base remains the most commonly used surface token in stratus today. Legacy surface aliases are also preserved to avoid breaking existing stratus styles while we incrementally migrate usage to the new base-scale token model.

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Mar 26, 2026

npm i https://pkg.pr.new/@cloudflare/kumo@306

commit: 4a9acb8

@github-actions
Copy link
Copy Markdown
Contributor

Docs Preview

View docs preview

Commit: 4a9acb8

@github-actions
Copy link
Copy Markdown
Contributor

Visual Regression Report

16 screenshot(s) with visual changes:

Button / Variants

30,752 px (0.69%) changed

Before After Diff
Before After Diff

Button / Sizes

1 px (0%) changed

Before After Diff
Before After Diff

Button / With Icon

6 px (0%) changed

Before After Diff
Before After Diff

Button / Icon Only

10 px (0%) changed

Before After Diff
Before After Diff

Button / Loading State

5 px (0%) changed

Before After Diff
Before After Diff

Button / Disabled State

57,729 px (1.3%) changed

Before After Diff
Before After Diff

Dialog / Basic Dialog

195,744 px (2.17%) changed

Before After Diff
Before After Diff

Dialog / Alert Dialog (role=“alertdialog”)

0 px (0%) changed

Before After Diff
Before After Diff

Dialog / Confirmation Dialog (with

disablePointerDismissal)
4,131 px (0.05%) changed

Before After Diff
Before After Diff

Dialog / With Actions

0 px (0%) changed

Before After Diff
Before After Diff

Dialog / With Select

195,744 px (2.17%) changed

Before After Diff
Before After Diff

Dialog / With Combobox

0 px (0%) changed

Before After Diff
Before After Diff

Dialog / With Dropdown

201,064 px (2.23%) changed

Before After Diff
Before After Diff

Dialog (Open)

19,699,570 px (97.74%) changed

Before After Diff
Before After Diff

Select / Basic

0 px (0%) changed

Before After Diff
Before After Diff

Select (Open)

0 px (0%) changed

Before After Diff
Before After Diff

Generated by Kumo Visual Regression

@najlaskr
Copy link
Copy Markdown
Contributor Author

closing this one with updated #326

@najlaskr najlaskr closed this Mar 27, 2026
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.

1 participant