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

Gert-Jan Vercauteren (gert-janvercauteren) · 2026-07-22T07:55:40Z

What changed

Migrates bpk-component-progress SCSS to CSS custom properties with SASS token fallbacks for light/dark mode support.

Token mappings applied

Old SASS token	New CSS var	SASS fallback
`$bpk-border-radius-md`	`--bpk-radius-md`	`tokens.$bpk-border-radius-md`
`$bpk-border-radius-sm`	`--bpk-radius-sm`	`tokens.$bpk-border-radius-sm`
`$bpk-border-radius-xs`	`--bpk-radius-xs`	`tokens.$bpk-border-radius-xs`
`$bpk-canvas-day`	`--bpk-surface-default`	`tokens.$bpk-canvas-day`
`$bpk-core-accent-day`	`--bpk-core-accent`	`tokens.$bpk-core-accent-day`
`$bpk-surface-highlight-day`	`--bpk-surface-highlight`	`tokens.$bpk-surface-highlight-day`
`$bpk-duration-base`	— (gap: animation duration)	kept bare
`$bpk-one-pixel-rem`	— (gap: hairline border utility)	kept bare

Other changes

Removed @use 'bpk-mixins/utils' import (no longer needed after dropping bpk-themeable-property)
Replaced bpk-themeable-property mixin with plain var() for the fill colour
Cleared themeAttributes export (was ['progressBarFillColor'] — now empty since --bpk-core-accent is a global semantic var)
Added VisualTestDark story using BpkDarkExampleWrapper

skyscanner-backpack-bot · 2026-07-22T07:59:30Z

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

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-progress styling from SCSS tokens to CSS custom properties (with token fallbacks) and adds dark-mode Storybook coverage.

Changes:

Switched bpk-component-progress SCSS from token values / bpk-themeable-property to var(--bpk-*, tokenFallback) patterns.
Updated themeAttributes (and tests) to remove progressBarFillColor.
Added dark-mode Storybook stories/wrappers and applied similar CSS custom property migrations to inset banner styles.

Reviewed changes

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

Show a summary per file

File	Description
packages/backpack-web/src/bpk-component-progress/src/themeAttributes.ts	Removes `progressBarFillColor` from the themeable attributes list.
packages/backpack-web/src/bpk-component-progress/src/themeAttributes-test.ts	Updates expectation for the new (empty) theme attributes export.
packages/backpack-web/src/bpk-component-progress/src/BpkProgress.stories.tsx	Adds a dark-mode visual test story using `BpkDarkExampleWrapper`.
packages/backpack-web/src/bpk-component-progress/src/BpkProgress.module.scss	Migrates progress styles to CSS custom properties with token fallbacks.
packages/backpack-web/src/bpk-component-inset-banner/src/BpkInsetBannerV3/BpkInsetBannerV3.module.scss	Migrates radii/text colors to CSS custom properties with fallbacks.
packages/backpack-web/src/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.module.scss	Migrates radii/text colors to CSS custom properties with fallbacks; documents “gap” tokens.
packages/backpack-web/src/bpk-component-inset-banner/src/BpkInsetBanner.stories.tsx	Adds a dark-mode example wrapped in `BpkDarkExampleWrapper`.
packages/backpack-web/src/bpk-component-inset-banner/src/BpkInsetBanner.module.scss	Migrates radii/colors to CSS custom properties with fallbacks; documents “gap” tokens.

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

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

 */

-export default ['progressBarFillColor'];
+export default [];


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

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

+// @ts-expect-error Untyped import. See .
+import { BpkDarkExampleWrapper } from 'bpk-storybook-utils';


Outdated — the stories.tsx file with the ts-expect-error comment is no longer part of this PR's current diff. No action needed.

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


 .bpk-inset-banner-v3 {
-  border-radius: tokens.$bpk-border-radius-sm;
+  border-radius: var(--bpk-radius-sm, tokens.$bpk-border-radius-sm);


Outdated — the inset-banner files this comment refers to are no longer part of this PR's current diff (scope is now consistent with the title/description, only BpkProgress.module.scss). No action needed.

@use

Replaces bare SASS tokens with CSS var() declarations backed by SASS fallbacks, enabling light/dark mode theming. Drops the legacy --bpk-progress-bar-fill-color themeable hook in favour of the global --bpk-core-accent semantic var. Removes unused @use of bpk-mixins/utils. Adds VisualTestDark story using BpkDarkExampleWrapper. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-07-22T09:55:21Z

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

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

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

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

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

CSS var	Old SASS fallback	Light value	Dark value	Match
`--bpk-radius-md`	`$bpk-border-radius-md`	`0.75rem`	(theme-agnostic)	✅
`--bpk-radius-xs`	`$bpk-border-radius-xs`	`0.25rem`	(theme-agnostic)	✅
`--bpk-radius-sm`	`$bpk-border-radius-sm`	`0.5rem`	(theme-agnostic)	✅
`--bpk-surface-highlight`	`$bpk-surface-highlight-day`	`#e0e4e9`	`#243346`	✅
`--bpk-core-accent`	`$bpk-core-accent-day`	`#0062e3`	`#84e9ff`	✅
`--bpk-surface-default`	`$bpk-canvas-day`	`#ffffff`	`#131d2b`	✅ (`$bpk-canvas-day` = `rgb(255,255,255)` = `#ffffff`, same value as `$bpk-surface-default-day`)

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 07:55

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-progress-4817 branch from 5bd04b4 to 241e4f6 Compare July 22, 2026 08:20

Gert-Jan Vercauteren (gert-janvercauteren) force-pushed the migrate/css-vars-progress-4817 branch from 241e4f6 to 24440a3 Compare July 22, 2026 09:51

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

chore: reset non-CSS files to main

7aae70c

[CLOV-CSS] Remove gap comments from SCSS

c18858d

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

View reviewed changes

Vincent Liu (xiaogliu) merged commit c3acbf3 into main Jul 24, 2026
15 checks passed

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[CLOV-CSS] Migrate bpk-component-progress to CSS custom properties - #4930

[CLOV-CSS] Migrate bpk-component-progress to CSS custom properties#4930
Vincent Liu (xiaogliu) merged 3 commits into
mainfrom
migrate/css-vars-progress-4817

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

Uh oh!

skyscanner-backpack-bot Bot 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!

Vincent Liu (xiaogliu) commented Jul 24, 2026

Uh oh!

Vincent Liu (xiaogliu) left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		// @ts-expect-error Untyped import. See .
		import { BpkDarkExampleWrapper } from 'bpk-storybook-utils';

Uh oh!

Conversation

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

What changed

Token mappings applied

Other changes

Uh oh!

skyscanner-backpack-bot Bot 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!

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!

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants