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

Gert-Jan Vercauteren (gert-janvercauteren) · 2026-07-22T08:43:20Z

Summary

Migrated BpkInfoBanner.module.scss to use CSS custom properties (CSS vars) with SASS token fallbacks
Added themeAttributes.tsx exposing privateInfoBannerDefault and privateInfoBannerOnContrast as themeable keys
Added themeAttributes-test.tsx with test assertions
Updated index.ts to export themeAttributes and allInfoBannerThemeAttributes
Added dark mode VisualTestDark story

Tokens migrated

SASS token	CSS var
`$bpk-private-info-banner-default-day`	`--bpk-private-info-banner-default`
`$bpk-private-info-banner-on-contrast-day`	`--bpk-private-info-banner-on-contrast`
`$bpk-text-primary-day`	`--bpk-text-primary`
`$bpk-text-secondary-day`	`--bpk-text-secondary`
`$bpk-text-primary-inverse-day`	`--bpk-text-inverse`

Gaps (no CSS var equivalent — left unchanged)

$bpk-private-info-banner-error-day
$bpk-private-info-banner-success-day
$bpk-private-info-banner-warning-day
$bpk-duration-sm

🤖 Generated with Claude Code

- Replace static SASS tokens with CSS var() wrappers in BpkInfoBanner.module.scss - Migrated: --bpk-private-info-banner-default, --bpk-private-info-banner-on-contrast, --bpk-text-primary, --bpk-text-secondary, --bpk-text-inverse - Left as-is (no CSS var equivalent): bpk-private-info-banner-error/success/warning-day, bpk-duration-sm - Add themeAttributes.tsx for private info-banner vars - Add themeAttributes-test.tsx with assertions - Export themeAttributes from index.ts - Add dark mode VisualTestDark story Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

skyscanner-backpack-bot · 2026-07-22T08:46:42Z

Visit https://backpack.github.io/storybook-prs/4950 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-info-banner styling to use CSS custom properties with SASS token fallbacks, and exposes theme attribute keys (including tests) while adding a dark-mode visual test story.

Changes:

Updated BpkInfoBanner.module.scss to use CSS variables with token fallbacks for key colors.
Added themeAttributes.tsx + tests to expose new allInfoBannerThemeAttributes and keep the legacy deprecated themeAttributes.
Exported theme attributes from the package entrypoint and added a dark-mode Storybook visual test.

Reviewed changes

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

Show a summary per file

File	Description
packages/backpack-web/src/bpk-component-info-banner/src/themeAttributes.tsx	Adds new exported theme attribute key list and keeps deprecated legacy list.
packages/backpack-web/src/bpk-component-info-banner/src/themeAttributes-test.tsx	Adds assertions for the legacy and new theme attribute exports.
packages/backpack-web/src/bpk-component-info-banner/src/BpkInfoBanner.stories.js	Adds a `VisualTestDark` story configuration.
packages/backpack-web/src/bpk-component-info-banner/src/BpkInfoBanner.module.scss	Switches selected tokens to CSS custom properties with SASS fallbacks.
packages/backpack-web/src/bpk-component-info-banner/index.ts	Re-exports theme attribute lists from package entrypoint.

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

+ */
+
+/**
+ * Combined deduplicated array of all info-banner private theme attributes.


+export const allInfoBannerThemeAttributes = [
+  'privateInfoBannerDefault',
+  'privateInfoBannerOnContrast',
+];


+export const allInfoBannerThemeAttributes = [
+  'privateInfoBannerDefault',
+  'privateInfoBannerOnContrast',
+];


+ * Use allInfoBannerThemeAttributes for the complete list.
+ * Will be removed in the next major release.
+ */
+const themeAttributes = ['infoBannerBackgroundColor'];


+import themeAttributes, { allInfoBannerThemeAttributes } from '../index';
+
+describe('info-banner component themeAttributes', () => {


skyscanner-backpack-bot · 2026-07-22T13:02:49Z

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

Vincent Liu (xiaogliu) · 2026-07-27T06:36:12Z

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-private-info-banner-default`	`$bpk-private-info-banner-default-day`	`#eff3f8`	`#131d2b`	✅
`--bpk-private-info-banner-on-contrast`	`$bpk-private-info-banner-on-contrast-day`	`#ffffff`	`#131d2b`	✅
`--bpk-text-secondary` (x2)	`$bpk-text-secondary-day`	`#626971`	`#bdc4cb`	✅
`--bpk-text-inverse` (x4)	`$bpk-text-primary-inverse-day`	`#ffffff`	`#010913`	✅
`--bpk-text-primary`	`$bpk-text-primary-day`	`#161616`	`#ffffff`	✅

All migrated declarations check out — 7 vars, values match exactly.

⚠️ One line was NOT migrated, and it's the same rule block as a migrated sibling:

&--critical {
  background-color: tokens.$bpk-private-info-banner-error-day;   // ← still a bare SASS token
  color: var(--bpk-text-inverse, tokens.$bpk-text-primary-inverse-day);  // ← migrated
}

No CSS var currently exists for $bpk-private-info-banner-error-day (confirmed — searched both theme CSS files, no --bpk-private-info-banner-error or similar). So this background-color genuinely can't respond to dark mode today, unlike its sibling color declaration in the same rule.

For reference: $bpk-private-info-banner-error-day = rgb(231,8,102) = #e70866, which happens to equal the light value of the existing global var --bpk-status-danger-spot — but --bpk-status-danger-spot's dark value (#ff649c) is different from this component's dark SASS token (need to check -error-night if one exists), so this isn't a safe drop-in substitution without design confirmation on whether info-banner's critical background should track the global danger-spot colour or needs its own dedicated var added to the theme files.

I'm confirming with contributor, I think we can replace tokens.$bpk-private-info-banner-error-day with --bpk-status-danger-spot. https://github.com/Skyscanner/backpack/pull/4950/changes#r3654951177

Updated in 0ff7de6, PR LGTM.

…oBanner.module.scss Co-authored-by: Vincent Liu <xiaogliu@outlook.com>

skyscanner-backpack-bot · 2026-07-27T06:56:47Z

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

Was failing prettier/prettier lint rule (line exceeded 80 chars).

skyscanner-backpack-bot · 2026-07-27T07:07:11Z

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

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

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

chore: reset non-CSS files to main

b7eff15

Vincent Liu (xiaogliu) reviewed Jul 27, 2026

View reviewed changes

Comment thread packages/backpack-web/src/bpk-component-info-banner/src/BpkInfoBanner.module.scss Outdated

Update packages/backpack-web/src/bpk-component-info-banner/src/BpkInf…

0ff7de6

…oBanner.module.scss Co-authored-by: Vincent Liu <xiaogliu@outlook.com>

Vincent Liu (xiaogliu) previously approved these changes Jul 27, 2026

View reviewed changes

fix: wrap long var() declaration to match prettier formatting

9cd0486

Was failing prettier/prettier lint rule (line exceeded 80 chars).

Vincent Liu (xiaogliu) dismissed their stale review via 9cd0486 July 27, 2026 07:03

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

View reviewed changes

Vincent Liu (xiaogliu) merged commit fbb1b51 into main Jul 27, 2026
15 checks passed

Vincent Liu (xiaogliu) deleted the migrate/css-vars-info-banner-4828 branch July 27, 2026 07:23

Navigation Menu

[CLOV-CSS] Migrate bpk-component-info-banner to CSS custom properties - #4950

[CLOV-CSS] Migrate bpk-component-info-banner to CSS custom properties#4950
Vincent Liu (xiaogliu) merged 4 commits into
mainfrom
migrate/css-vars-info-banner-4828

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!

skyscanner-backpack-bot Bot commented Jul 22, 2026

Uh oh!

Vincent Liu (xiaogliu) commented Jul 27, 2026 •

edited

Loading

Uh oh!

Uh oh!

skyscanner-backpack-bot Bot commented Jul 27, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jul 27, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		import themeAttributes, { allInfoBannerThemeAttributes } from '../index';

		describe('info-banner component themeAttributes', () => {

Conversation

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

Summary

Tokens migrated

Gaps (no CSS var equivalent — left unchanged)

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!

skyscanner-backpack-bot Bot commented Jul 22, 2026

Uh oh!

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

Uh oh!

Uh oh!

Uh oh!

skyscanner-backpack-bot Bot commented Jul 27, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jul 27, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Vincent Liu (xiaogliu) commented Jul 27, 2026 •

edited

Loading