Skip to content

feat: migration to okhst - #1229

Open
tenphi wants to merge 2 commits into
mainfrom
feat-migration-to-okhsl
Open

feat: migration to okhst#1229
tenphi wants to merge 2 commits into
mainfrom
feat-migration-to-okhsl

Conversation

@tenphi

@tenphi tenphi commented Jul 9, 2026

Copy link
Copy Markdown
Member

Note

Medium Risk
Wide visual token shifts across light/dark/HC affect the whole kit, but contrast semantics and syntax token names/paths are preserved by design.

Overview
Visual palette redesign: defaultTheme and specialTheme now use Glaze’s pastel: true recipe with SEED_SATURATION raised from 80 to 100, so perceived chroma is more consistent across hues. This is a breaking visual change for almost every UI token (surfaces shift modestly; accents move the most).

Syntax colors unchanged: Prism/#code-* tokens are removed from the default theme and moved into a dedicated codeTheme (saturation 80, no pastel), registered on the palette with the existing code- prefix. Consumers like GlobalStyles still reference --code-keyword-color etc.; values should match the pre-redesign palette.

Reviewed by Cursor Bugbot for commit 296fa2b. Bugbot is set up for automated code reviews on this repo. Configure here.

@vercel

vercel Bot commented Jul 9, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
cube-ui-kit Ready Ready Preview Jul 31, 2026 9:54am

Request Review

@changeset-bot

changeset-bot Bot commented Jul 9, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 296fa2b

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

This PR includes changesets to release 1 package
Name Type
@cube-dev/ui-kit 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

@github-actions

github-actions Bot commented Jul 9, 2026

Copy link
Copy Markdown
Contributor

🧪 Storybook is successfully deployed!

@github-actions

github-actions Bot commented Jul 9, 2026

Copy link
Copy Markdown
Contributor

🏋️ Size limit report

Name Size Passed?
All 441.32 KB (+0.01% 🔺) Yes 🎉
Tree shaking (just a Button) 114.88 KB (0% 🟰) Yes 🎉

Click here if you want to find out what is changed in this build

Comment thread src/tokens/colors.ts Outdated
@github-actions

github-actions Bot commented Jul 9, 2026

Copy link
Copy Markdown
Contributor

📦 NPM canary release

Deployed canary version 0.0.0-canary-fa426f6.

Comment thread src/tokens/palette.ts Outdated
Comment thread src/tokens/palette.ts Outdated
Comment thread src/tokens/palette.ts Outdated
Comment thread src/components/content/PrismCode/PrismCode.tsx

@cursor cursor Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Cursor Bugbot has reviewed your changes using default effort and found 2 potential issues.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 19d6918. Configure here.

Comment thread src/components/overlays/Dialog/DialogTrigger.tsx Outdated
Comment thread src/components/fields/FilterPicker/FilterPicker.tsx
tenphi added 2 commits July 31, 2026 11:51
Rebuilds the redesign branch on top of main now that the non-visual half has
landed (#1267, #1268, released as 0.150.0).

The branch's previous 22 commits were the OKHST/tone migration plus the fixes
riding on it — all now IN main via #1267. Replaying them would have meant
resolving `palette.ts` against itself 15 times for a 3-line end state, so the
branch is reconstructed on main rather than rebased commit-by-commit.

The whole change is now:

- `SEED_SATURATION` 80 -> 100 with `{ pastel: true }` on the default and special
  theme seeds. The two are coupled: raising the seed without pastel
  over-saturates, enabling pastel without raising it washes the palette out.

This IS a visual change and every token moves. Per-channel RGB delta vs main,
all 156 tokens x 4 scheme variants: core surfaces/text mean ~5 (max 43), accent
mean ~28 (max 60), accent-disabled mean ~8 (max 17). Accent carries the bulk,
which is the intent — that is where the per-hue chroma inconsistency showed.

Verified: build clean, 997 tests pass, oxlint + prettier clean, size-limit
passes (451.35 kB / 460 kB).
The pastel migration desaturated the PrismCode `#code-*` tokens, which is wrong
for them specifically: syntax colour is an *encoding*, not decoration — `keyword`
vs `string` vs `number` has to be tellable apart at a glance in a wall of
monospace — so chroma there is doing semantic work.

Measured, light and dark, okhsl saturation before -> after pastel:

  comment       8.0% ->  5.0%
  punctuation  32.0% -> 19.0%
  keyword      80.0% -> 42.9%
  string       80.0% -> 45.0%
  number       72.0% -> 58.7%
  function     80.0% -> 42.9%
  attribute    80.1% -> 100.0%   (clipped the other way)

So the three carrying most of the signal lost roughly half their chroma and the
highlighting reads flat, while the cyan `attribute` saturated to the ceiling.

The seven colours move out of `defaultTheme` into a standalone `code` theme
seeded at `CODE_SEED_SATURATION = 80` with no `pastel`, i.e. the pre-redesign
config, and keep their definitions verbatim. Exported through the palette with a
`code-` prefix so the public names are unchanged (`#code-keyword`, …); the
colours themselves drop the now-redundant `code-` in their keys and the
`inherit: false` flags, which were only meaningful while they lived on a theme
other themes extend.

Verified: all seven `#code-*` tokens now resolve **byte-identically** to the
previous release in every scheme variant, and the change is surgical — of 156
tokens, exactly 7 moved and **zero non-code tokens** changed. One token is added,
`#code-surface`, the theme's contrast anchor (namespace residue, documented as
not-for-consumption).

Build clean, 997 tests pass, oxlint + prettier clean, size-limit passes
(451.37 kB / 460 kB).
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