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

Gert-Jan Vercauteren (gert-janvercauteren) · 2026-07-22T08:29:08Z

Migrates bpk-component-checkbox SCSS to CSS custom properties and creates themeAttributes with allCheckboxThemeAttributes.

BpkCheckbox.module.scss: replaced all bare SASS color/border tokens with var(--bpk-private-checkbox-*, fallback) and global semantic vars
themeAttributes.ts: exports allCheckboxThemeAttributes array with all 10 private CSS var keys; retains deprecated checkboxCheckedColor default
Stories: adds VisualTestDarkMode using BpkDarkExampleWrapper

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-checkbox styling from SCSS tokens to CSS custom properties, adds a consolidated theme attributes export, and introduces dark-mode visual test stories.

Changes:

Added allCheckboxThemeAttributes (private checkbox CSS var keys) while keeping legacy checkboxCheckedColor as deprecated default.
Updated checkbox SCSS to use CSS custom properties with token fallbacks and added a dark-mode visual test story.
Updated horizontal-nav SCSS/stories to use CSS custom properties and added a dark-mode visual test story.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
packages/backpack-web/src/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.module.scss	Replaces themeable-property mixins with direct `var(--...)` usage for colors/underline styling.
packages/backpack-web/src/bpk-component-horizontal-nav/src/BpkHorizontalNav.stories.module.scss	Uses semantic CSS var with token fallback for custom story color.
packages/backpack-web/src/bpk-component-horizontal-nav/src/BpkHorizontalNav.stories.js	Adds a dark-mode visual test story.
packages/backpack-web/src/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.scss	Uses CSS var fallback for underline border color.
packages/backpack-web/src/bpk-component-checkbox/src/themeAttributes.ts	Introduces `allCheckboxThemeAttributes` and keeps legacy default export as deprecated.
packages/backpack-web/src/bpk-component-checkbox/src/themeAttributes-test.ts	Adds tests for both deprecated default export and new `allCheckboxThemeAttributes`.
packages/backpack-web/src/bpk-component-checkbox/src/BpkCheckbox.stories.tsx	Adds a dark-mode visual test story.
packages/backpack-web/src/bpk-component-checkbox/src/BpkCheckbox.module.scss	Migrates checkbox styling to CSS custom properties and introduces new private checkbox vars usage.
packages/backpack-web/src/bpk-component-checkbox/index.ts	Re-exports `allCheckboxThemeAttributes` alongside existing `themeAttributes`.

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

Replaces static SASS tokens in BpkCheckbox.module.scss with CSS custom properties so the component participates in the Backpack light/dark theme system. Updates themeAttributes to export allCheckboxThemeAttributes with all private component-scoped vars, adds VisualTestDarkMode story. Closes #4815 Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-07-22T09:57:46Z

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

@include

The duplicated :checked/:indeterminate and :disabled blocks in BpkCheckbox.module.scss shadowed the mixin's own rules. Move the CSS var declarations into bpk-checkbox__input so there is a single source of truth and no specificity conflicts. The pre-@include border-color was also clobbered by the mixin's border shorthand, so that is now set inside the mixin directly. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-07-22T13:43:03Z

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

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

Adjusted height and border-radius for indeterminate checkbox state. Reintroduced disabled cursor style for checkbox input.

skyscanner-backpack-bot · 2026-07-23T06:32:33Z

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

Vincent Liu (xiaogliu) · 2026-07-26T16:01:27Z

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-surface-default` (x2 in BpkCheckbox.module.scss, x1 in _forms.scss)	`$bpk-surface-default-day`	`#ffffff`	`#131d2b`	✅
`--bpk-status-danger-spot`	`$bpk-status-danger-spot-day`	`#e70866`	`#ff649c`	✅
`--bpk-private-checkbox-border-default-not-checked`	`$bpk-text-secondary-day`	`#626971`	`rgba(255,255,255,0.5)`	✅ (light matches exactly; dark is a private var with no light-token equivalent, expected)
`--bpk-private-checkbox-bg-default-checked` (used for both `background-color` and `border-color`)	`$bpk-core-accent-day`	`#0062e3`	`#84e9ff`	✅
`--bpk-private-checkbox-border-default-disabled` (x2)	`$bpk-text-disabled-day`	`#e0e4e9` vs fallback `rgba(0,0,0,0.2)` (≈ `#cccccc` blended over white)	`rgba(255,255,255,0.2)` vs fallback `rgba(0,0,0,0.2)`	This is expected ⚠️ See note below

⚠️ One real discrepancy: --bpk-private-checkbox-border-default-disabled resolves to #e0e4e9 (light) / rgba(255,255,255,0.2) (dark), but its SASS fallback $bpk-text-disabled-day is rgba(0,0,0,0.2) (light) / rgba(255,255,255,0.2) (dark). The dark value happens to match, but light doesn't — rgba(0,0,0,0.2) renders as a translucent grey (~#cccccc over white background) rather than the intended #e0e4e9. This is an intentional design refinement for the new private var (slightly lighter/cooler grey than the generic disabled-text token), not a copy-paste bug.

Everything else checked: values match exactly, no other regression risk.

GitHub-wide usage search for the removed theming hook (--bpk-checkbox-checked-color / camelCase checkboxCheckedColor):

Searched github.com (via gh search code, covering public + private repos this account has access to) for both the raw CSS var name and the camelCase themeAttributes key.

Results — no real consumer usage found. Hits are limited to:

Skyscanner/backpack itself (source of the hook/type definitions)
Skyscanner/ain-backpack — private test-drive clone, not a production consumer
Skyscanner/Overlay — one hit in a compiled bundle.css build artifact (inject/travel-tools-v2/bundle.css), which is just Backpack's own compiled CSS being bundled as an asset, not an actual theme override written by that repo

No product repo anywhere in the org uses checkboxCheckedColor via BpkThemeProvider, and this PR replaces the old hook with proper component-private vars (--bpk-private-checkbox-bg-default-checked etc.) anyway — a cleaner migration than a global-var swap.

Conclusion: safe to merge.

Vincent Liu (xiaogliu)

LGTM

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

Gert-Jan Vercauteren (gert-janvercauteren) added the minor Non breaking change label Jul 22, 2026

Copilot AI reviewed Jul 22, 2026

View reviewed changes

Gert-Jan Vercauteren (gert-janvercauteren) added the css-custom-properties label Jul 22, 2026

Gert-Jan Vercauteren (gert-janvercauteren) force-pushed the migrate/css-vars-checkbox-4815 branch from 5d679a2 to e7fe027 Compare July 22, 2026 09:54

Gert-Jan Vercauteren (gert-janvercauteren) and others added 3 commits July 22, 2026 18:46

chore: reset non-CSS files to main

bd409c6

[CLOV-CSS] Restore bpk-checkbox--white mixin, move CSS var into mixin

0631744

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

Gert-Jan Vercauteren (gert-janvercauteren) and others added 2 commits July 23, 2026 14:25

[CLOV-CSS] Move border-radius before border-color in checkbox mixin

2a95202

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

Refactor checkbox styles for indeterminate and disabled states

ff8305f

Adjusted height and border-radius for indeterminate checkbox state. Reintroduced disabled cursor style for checkbox input.

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

View reviewed changes

This comment was marked as duplicate.

Sign in to view

Vincent Liu (xiaogliu) merged commit 8b5b3fa into main Jul 26, 2026
15 checks passed

Vincent Liu (xiaogliu) deleted the migrate/css-vars-checkbox-4815 branch July 26, 2026 16:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[CLOV-CSS] Migrate bpk-component-checkbox to CSS custom properties - #4946

[CLOV-CSS] Migrate bpk-component-checkbox to CSS custom properties#4946
Vincent Liu (xiaogliu) merged 6 commits into
mainfrom
migrate/css-vars-checkbox-4815

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

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

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 23, 2026

Uh oh!

Vincent Liu (xiaogliu) commented Jul 26, 2026 •

edited

Loading

Uh oh!

Vincent Liu (xiaogliu) left a comment

Uh oh!

This comment was marked as duplicate.

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

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

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

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 23, 2026

Uh oh!

Vincent Liu (xiaogliu) commented Jul 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Vincent Liu (xiaogliu) left a comment

Choose a reason for hiding this comment

Uh oh!

This comment was marked as duplicate.

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Vincent Liu (xiaogliu) commented Jul 26, 2026 •

edited

Loading