[CLOV-CSS] Migrate bpk-component-radio to CSS custom properties by gert-janvercauteren · Pull Request #4935 · Skyscanner/backpack

Gert-Jan Vercauteren (gert-janvercauteren) · 2026-07-22T08:00:42Z

Closes #4816

Summary

Replaced bpk-themeable-property mixin with plain var() for the circle background
Replaced bare SASS color tokens with CSS vars + SASS fallbacks:
- tokens.$bpk-text-disabled-on-dark-day → var(--bpk-text-disabled-on-dark, ...)
- tokens.$bpk-text-disabled-day → var(--bpk-text-disabled, ...)
- tokens.$bpk-text-link-day → var(--bpk-text-deprecated-link, ...)
Added comment for $bpk-one-pixel-rem (no CSS var equivalent — gap token)
Created themeAttributes.tsx with allRadioThemeAttributes exposing all --bpk-private-radio-* vars as camelCase keys, plus deprecated radioCheckedColor key
Created themeAttributes-test.tsx asserting both exports
Removed old themeAttributes.ts and themeAttributes-test.ts
Added DarkMode Storybook story using BpkDarkExampleWrapper

Test plan

All 14 existing tests pass unchanged
themeAttributes-test.tsx asserts both themeAttributes (legacy) and allRadioThemeAttributes
stylelint and eslint pass on all modified files
$bpk-one-pixel-rem left as bare SASS token with comment per spec

🤖 Generated with Claude Code

Copilot

Pull request overview

Note

Copilot couldn't run its full agentic review because it didn't start before the timeout. Make sure your repository has a runner available, or add a copilot-code-review.yml file specifying one with the runs-on attribute. See the docs for more details.

Migrates bpk-component-radio theming away from SCSS-only theming helpers toward CSS custom properties, while adding Storybook coverage for dark mode and documenting a gap token.

Changes:

Replaced radio SCSS theme mixin usage with var(--*, fallback) usage for theming.
Introduced allRadioThemeAttributes export (and updated tests) to expose private radio CSS var keys while keeping the legacy radioCheckedColor export.
Added dark mode Storybook coverage and documented $bpk-one-pixel-rem as a gap token with no CSS var equivalent.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/backpack-web/src/bpk-component-select/src/BpkSelect.stories.tsx	Adds a dark mode visual test story using `BpkDarkExampleWrapper`.
packages/backpack-web/src/bpk-component-select/src/BpkSelect.module.scss	Documents `$bpk-one-pixel-rem` as a gap token without a CSS var equivalent.
packages/backpack-web/src/bpk-component-radio/src/themeAttributes.tsx	Adds `allRadioThemeAttributes` and keeps the deprecated legacy `themeAttributes` default export.
packages/backpack-web/src/bpk-component-radio/src/themeAttributes.ts	Removes the old default export in favor of the new TSX module.
packages/backpack-web/src/bpk-component-radio/src/themeAttributes-test.ts	Extends tests to assert both legacy and new theme attribute exports.
packages/backpack-web/src/bpk-component-radio/src/BpkRadio.stories.tsx	Adds a dark mode Storybook story using `BpkDarkExampleWrapper`.
packages/backpack-web/src/bpk-component-radio/src/BpkRadio.module.scss	Switches radio styles to CSS custom properties with SCSS fallbacks.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Vincent Liu (xiaogliu) · 2026-07-24T09:32:32Z

+export const allRadioThemeAttributes = [
+  'privateRadioBgDefaultDisabled',
+  'privateRadioBgDefaultOn',
+  'privateRadioBgOnContrastOff',
+  'privateRadioBgOnContrastOn',
+  'privateRadioBorder',
+  'privateRadioBorderDefaultOff',
+];
+
+/**
+ * @deprecated Use allRadioThemeAttributes instead.
+ * This key pre-dates the CSS custom property migration and mapped to
+ * --bpk-radio-checked-color which is no longer used in the SCSS.
+ * Will be removed in the next major release.
+ */
+const themeAttributes = ['radioCheckedColor'];
+
+export default themeAttributes;


Outdated — themeAttributes.tsx is no longer part of this PR's current diff (superseded by a later commit, which only touches BpkRadio.module.scss now). No action needed.

Vincent Liu (xiaogliu) · 2026-07-24T09:32:33Z

+/**
+ * Combined deduplicated array of all radio private theme attributes.
+ * Only exposes component-scoped (private) radio tokens — global semantic vars
+ * (text, deprecated-link) can be overridden at the theme level independently.
+ *
+ * Camelcase conversion: strip `--bpk-`, convert kebab to camelCase.
+ * e.g. --bpk-private-radio-bg-default-on -> privateRadioBgDefaultOn
+ */


Outdated — themeAttributes.tsx is no longer part of this PR's current diff. No action needed.

Vincent Liu (xiaogliu) · 2026-07-24T09:32:35Z

+export const DarkMode = {
+  render: () => <DarkExample />,
+};


Outdated — BpkRadio.stories.tsx is no longer part of this PR's current diff (scope is now consistent with the title/description, only BpkRadio.module.scss). No action needed.

skyscanner-backpack-bot · 2026-07-22T10:00:49Z

Visit https://backpack.github.io/storybook-prs/4935 to see this build running in a browser.

Closes #4816 - Replace bpk-themeable-property mixin with plain var() in __circle bg - Replace bare SASS color tokens with CSS vars + SASS fallbacks: - tokens.\$bpk-text-disabled-on-dark-day => var(--bpk-text-disabled-on-dark, ...) - tokens.\$bpk-text-disabled-day => var(--bpk-text-disabled, ...) - tokens.\$bpk-text-link-day => var(--bpk-text-deprecated-link, ...) - Add comment for \$bpk-one-pixel-rem (no CSS var equivalent) - Create themeAttributes.tsx with allRadioThemeAttributes for all --bpk-private-radio-* vars and deprecated radioCheckedColor key - Create themeAttributes-test.tsx asserting both exports - Remove old themeAttributes.ts and themeAttributes-test.ts - Add DarkMode story using BpkDarkExampleWrapper Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-07-22T10:14:28Z

Visit https://backpack.github.io/storybook-prs/4935 to see this build running in a browser.

skyscanner-backpack-bot · 2026-07-22T10:56:49Z

Visit https://backpack.github.io/storybook-prs/4935 to see this build running in a browser.

skyscanner-backpack-bot · 2026-07-22T12:54:05Z

Visit https://backpack.github.io/storybook-prs/4935 to see this build running in a browser.

Vincent Liu (xiaogliu) · 2026-07-24T09:31:28Z

Token value audit — verified every new CSS var against token-sync/css/theme-backpack-light.css / theme-backpack-dark.css and base.default.scss:

CSS var	Old SASS fallback	Light value	Dark value	Match
`--bpk-text-disabled-on-dark`	`$bpk-text-disabled-on-dark-day`	`rgba(255,255,255,0.5)`	`rgba(255,255,255,0.5)`	✅
`--bpk-text-disabled`	`$bpk-text-disabled-day`	`rgba(0,0,0,0.2)`	`rgba(255,255,255,0.2)`	✅
`--bpk-text-deprecated-link`	`$bpk-text-link-day`	`#0062e3`	`#84e9ff`	✅

All new/old values match — no visual regression risk from this migration.

Vincent Liu (xiaogliu)

LGTM

Copilot AI review requested due to automatic review settings July 22, 2026 08:00

Gert-Jan Vercauteren (gert-janvercauteren) added minor Non breaking change css-custom-properties labels Jul 22, 2026

Copilot AI reviewed Jul 22, 2026

View reviewed changes

Gert-Jan Vercauteren (gert-janvercauteren) force-pushed the migrate/css-vars-radio-4816 branch from 51be041 to a047532 Compare July 22, 2026 09:57

Gert-Jan Vercauteren (gert-janvercauteren) force-pushed the migrate/css-vars-radio-4816 branch from a047532 to dc8069f Compare July 22, 2026 10:10

chore: reset non-CSS files to main

a21286b

Gert-Jan Vercauteren (gert-janvercauteren) added 2 commits July 22, 2026 18:57

chore: reset non-CSS files to main

958fee7

[CLOV-CSS] Remove gap comments from SCSS

d9893c3

Vincent Liu (xiaogliu) approved these changes Jul 24, 2026

View reviewed changes

Vincent Liu (xiaogliu) merged commit 0ede9d5 into main Jul 24, 2026
20 of 21 checks passed

Vincent Liu (xiaogliu) deleted the migrate/css-vars-radio-4816 branch July 24, 2026 09:46

This comment was marked as abuse.

Sign in to view

Navigation Menu

Uh oh!

[CLOV-CSS] Migrate bpk-component-radio to CSS custom properties - #4935

[CLOV-CSS] Migrate bpk-component-radio to CSS custom properties#4935
Vincent Liu (xiaogliu) merged 4 commits into
mainfrom
migrate/css-vars-radio-4816

Gert-Jan Vercauteren (gert-janvercauteren) commented Jul 22, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Vincent Liu (xiaogliu) Jul 24, 2026

Uh oh!

Vincent Liu (xiaogliu) Jul 24, 2026

Uh oh!

Vincent Liu (xiaogliu) Jul 24, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jul 22, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jul 22, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jul 22, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jul 22, 2026

Uh oh!

Vincent Liu (xiaogliu) commented Jul 24, 2026

Uh oh!

Vincent Liu (xiaogliu) left a comment

Uh oh!

Uh oh!

This comment was marked as abuse.

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

Gert-Jan Vercauteren (gert-janvercauteren) commented Jul 22, 2026

Summary

Test plan

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Vincent Liu (xiaogliu) Jul 24, 2026

Choose a reason for hiding this comment

Uh oh!

Vincent Liu (xiaogliu) Jul 24, 2026

Choose a reason for hiding this comment

Uh oh!

Vincent Liu (xiaogliu) Jul 24, 2026

Choose a reason for hiding this comment

Uh oh!

skyscanner-backpack-bot Bot commented Jul 22, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jul 22, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jul 22, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jul 22, 2026

Uh oh!

Vincent Liu (xiaogliu) commented Jul 24, 2026

Uh oh!

Vincent Liu (xiaogliu) left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

This comment was marked as abuse.

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants