Skip to content

chore: migrate the repository to @koobiq/design-tokens v4 (#DS-5598) - #2072

Draft
NikGurev wants to merge 4 commits into
mainfrom
chore/DS-3002-design-tokens-v4
Draft

NikGurev wants to merge 4 commits into
mainfrom
chore/DS-3002-design-tokens-v4

Conversation

@NikGurev

Copy link
Copy Markdown
Contributor

Summary

Wait for @koobiq/design-tokens@4.0.0 release

NikGurev and others added 3 commits September 18, 2026 15:41
The OKLch track moved from `web/new/` to `web/`, so the docs site, the dev apps and the e2e app
follow it. Component tokens are opt-in in v4, which means skeleton takes its values from
`component-tokens*.css` instead of the removed `web/deprecated/` tree.

`_palette.scss` is gone — it only held the legacy HSL palette, and nothing here read the
`$palette` map.

`TooltipSizeArrowSize` went with the rest of the deprecated component tokens. It aliased
`{size.m}`, which is exactly what its own deprecation notice told consumers to use, so `SizeM`
replaces it — the same 12px, leaving ARROW_BOTTOM_MARGIN_AND_HALF_HEIGHT unchanged.

NOTE: depends on @koobiq/design-tokens v4, which is not published yet, so `yarn.lock` still
resolves ^3.20.0 and an immutable install will not reconcile the two until it is.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…3002)

@koobiq/design-tokens v4 dropped the `component-tokens*.css` aggregates and moved each
component's tokens under `web/css/components/`. The docs site now forwards the three files it
actually renders — code-block, scrollbars, skeleton — instead of the removed aggregate, and
naming them individually is the point: it is visible where those base values come from.

code-block and scrollbar carried their own copies of tokens the package ships, so the values
existed in two places and could drift. The copies are gone.

The popover and tooltip dev apps follow the `--kbq-error-default` → `--kbq-background-error`
rename.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…#DS-3002)

`--kbq-background-overlay-theme` is gone in @koobiq/design-tokens v4, replaced by
an opaque base plus `--kbq-opacity-overlay`. The documented way to compose the two
is an `opacity` declaration, which this element cannot use: it already animates its
own appearance with `opacity: 0 -> 1`, and opacity would fade the dashed border and
the empty state along with the background.

Mix the alpha into the colour instead, matching the idiom already used by
list-tokens.scss and _loader-overlay-theme.scss.

`in srgb` rather than `in oklch` for consistency with those two; both were measured
to give identical output here, since the base colour is inside the sRGB gamut and
mixing with `transparent` only applies alpha.

The tint is paler than v3: over white, #9cc2fe -> #c4dfff, and in the dark theme
#1442a1 -> #182b66. That follows from the token swap itself, not from the mixing,
and is the same shift every consumer of the old token gets. Worth a designer's eyes.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@NikGurev NikGurev self-assigned this Sep 18, 2026
@github-actions

Copy link
Copy Markdown

🚨 E2E tests failed

Review the report for details.


💡 Comment /approve-snapshots to approve snapshot changes.

@github-actions

Copy link
Copy Markdown

🚨 E2E tests failed

Review the report for details.


💡 Comment /approve-snapshots to approve snapshot changes.

@NikGurev NikGurev changed the title chore: migrate the repository to @koobiq/design-tokens v4 (#DS-3002) chore: migrate the repository to @koobiq/design-tokens v4 (#DS-5598) Sep 25, 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