[CLOV-CSS] Migrate bpk-component-modal to CSS custom properties

[Gert-Jan Vercauteren (gert-janvercauteren)]

Closes #4838

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

Changes

• Replace static SASS tokens with var(--css-var, sass-fallback) pattern in 5 SCSS files
• Tokens with no CSS var equivalent kept as bare SASS tokens (duration, z-index, component-specific tokens)
• Add dark mode story (VisualTestDark) to BpkModalV3 stories

[skyscanner-backpack-bot]

Visit https://backpack.github.io/storybook-prs/4955 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-modal styling to CSS custom properties (with SASS fallbacks) to support light/dark theming, and adds a dark-mode Storybook visual test for Modal V3.

Changes:

• Replaced several SCSS token usages with var(--css-var, sass-fallback) across modal V2/V3 styles.
• Updated modal borders/radii/backgrounds to use themeable CSS custom properties where available.
• Added a VisualTestDark Storybook story for BpkModalV3.

Reviewed changes

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

Show a summary per file

File	Description
packages/backpack-web/src/bpk-component-modal/src/BpkModalV3/BpkModalV3Scrim/BpkModalV3Scrim.module.scss	Theme scrim background via CSS custom property with SASS fallback.
packages/backpack-web/src/bpk-component-modal/src/BpkModalV3/BpkModalV3Content/BpkModalV3Content.module.scss	Theme content surfaces and radii via CSS vars (with fallbacks).
packages/backpack-web/src/bpk-component-modal/src/BpkModalV3/BpkModalV3CloseTrigger/BpkModalV3CloseTrigger.module.scss	Theme close trigger colors/radius via CSS vars (with fallbacks).
packages/backpack-web/src/bpk-component-modal/src/bpkModalV3/BpkModalV3.stories.tsx	Adds dark-mode visual test story and wrapper import.
packages/backpack-web/src/bpk-component-modal/src/BpkModalV2/BpKModal.module.scss	Theme V2 scrim/surface/radius tokens via CSS vars (with fallbacks).
packages/backpack-web/src/bpk-component-modal/src/BpkModalInner.module.scss	Theme surface contrast and header border color via CSS vars (with fallbacks).

---

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

[Vincent Liu (xiaogliu)]

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

[Vincent Liu (xiaogliu)]

Outdated — same as above, stories.tsx is no longer part of this PR's current diff. No action needed.

[Vincent Liu (xiaogliu)]

Pre-existing pattern, not introduced by this PR — repeated $bpk-border-radius-lg already existed on main before this migration (top-left/top-right corner radius pair). This PR migrated each occurrence to var() in place; extracting a shared local variable would be a good follow-up but is out of scope for this token-value migration. Separately: see the token-value audit comment I posted on this PR — there's a real fallback-value mismatch on --bpk-other-line-on-contrast in BpkModalV3CloseTrigger.module.scss (50% vs 20% opacity) worth fixing.

[skyscanner-backpack-bot]

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

[Vincent Liu (xiaogliu)]

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-surface-contrast	$bpk-surface-contrast-day	#05203c	#010913	✅
--bpk-other-line-default	$bpk-line-day	#c1c7cf	rgba(255,255,255,0.2)	✅
--bpk-other-scrim	$bpk-scrim-day	rgba(0,0,0,0.7)	rgba(0,0,0,0.7)	✅
--bpk-radius-md	$bpk-border-radius-md	0.75rem	(theme-agnostic)	✅
--bpk-other-line-on-contrast	$bpk-line-on-dark-day	#ffffff @ 20% opacity	rgba(255,255,255,0.2)	⚠️ See note below
--bpk-text-primary	$bpk-text-primary-day	#161616	#ffffff	✅
--bpk-surface-elevated	$bpk-surface-elevated-day	#ffffff	#243346	✅
--bpk-radius-lg	$bpk-border-radius-lg	1.5rem	(theme-agnostic)	✅
--bpk-canvas-contrast	$bpk-canvas-contrast-day	#eff3f8	#010913	✅

⚠️ 1. One real mismatch (BpkModalV3CloseTrigger.module.scss): the fallback token $bpk-line-on-dark-day = rgba(255,255,255,0.5) (50% opacity), but the CSS var --bpk-other-line-on-contrast it's paired with actually resolves to rgba(255,255,255,0.2) (20% opacity) in both light and dark theme. This means when CSS vars are unsupported, the close-trigger background renders noticeably more opaque/visible than the var-driven default. Worth swapping the fallback to match, or confirming this discrepancy is intentional.

2. Also flagging (not a value bug, a sibling-omission): in BpkModalInner.module.scss / BpKModal.module.scss, the &--surface-contrast blocks migrate background-color to var(--bpk-surface-contrast, ...) but leave the adjacent color: tokens.$bpk-text-primary-dark-color; as a bare SASS token in 4 separate spots — no CSS var wrapper at all. $bpk-text-primary-dark-color = rgb(255,255,255) = #ffffff, which happens to equal both --bpk-text-inverse and --bpk-text-on-dark, so there's no dark-mode value gap today — but it means this specific text color won't respond to future theme overrides the way the background does in the same rule.

---

Confirmed:

1. is expected;
2. is also expected that removing typography from the CSS Custom properties list for now.

[Vincent Liu (xiaogliu)]

LGTM