[CLOV-CSS] Migrate bpk-component-overlay to CSS custom properties - #4927
[CLOV-CSS] Migrate bpk-component-overlay to CSS custom properties#4927Gert-Jan Vercauteren (gert-janvercauteren) wants to merge 3 commits into
Conversation
Replaces rgba(tokens.\$bpk-text-primary-day, N) with color-mix(in srgb, var(--bpk-text-primary, tokens.\$bpk-text-primary-day) N%, transparent) so overlays adapt automatically between light and dark themes. Gap token \$bpk-color-sky-blue-shade-03 (tint variant) kept as bare SASS with a comment — no semantic CSS var mapping exists. Adds a DarkMode story using BpkDarkExampleWrapper. Closes #4843 Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Gert-Jan Vercauteren (gert-janvercauteren)
added
minor
There was a problem hiding this comment.
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-overlay styling from SCSS rgba() usage to CSS custom properties via color-mix(), and adds a Storybook example to validate rendering in dark mode.
Changes:
- Replaced overlay
rgba(tokens.$bpk-text-primary-day, …)values withcolor-mix(in srgb, var(--bpk-text-primary, …) …%, transparent)variants. - Added a Dark Mode Storybook story using
BpkDarkExampleWrapper.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| packages/backpack-web/src/bpk-component-overlay/src/BpkOverlay.module.scss | Switches overlay colors/gradients/vignette to use themeable CSS custom properties via color-mix(). |
| packages/backpack-web/src/bpk-component-overlay/src/BpkOverlay.stories.tsx | Adds a dark-mode Storybook story and imports the dark wrapper utility. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // @ts-expect-error Untyped import | ||
| import { BpkDarkExampleWrapper } from 'bpk-storybook-utils'; |
There was a problem hiding this comment.
Outdated — this comment refers to a @ts-expect-error suppression that's no longer present in the current diff (superseded by a later commit on this branch). No action needed.
| background: color-mix( | ||
| in srgb, | ||
| var(--bpk-text-primary, tokens.$bpk-text-primary-day) 15%, | ||
| transparent | ||
| ); |
| background: linear-gradient( | ||
| 180deg, | ||
| rgba(tokens.$bpk-text-primary-day, 0.15) 0%, | ||
| rgba(tokens.$bpk-text-primary-day, 0) 100% | ||
| color-mix( | ||
| in srgb, | ||
| var(--bpk-text-primary, tokens.$bpk-text-primary-day) 15%, | ||
| transparent | ||
| ) | ||
| 0%, | ||
| transparent 100% | ||
| ); |
|
Visit https://backpack.github.io/storybook-prs/4927 to see this build running in a browser. |
Vincent Liu (xiaogliu)
left a comment
Vincent Liu (xiaogliu)
left a comment
There was a problem hiding this comment.
Reviewed ✅ — no issues found.
--bpk-text-primary(light #161616 / dark #ffffff) confirmed to match$bpk-text-primary-dayexactly.- Using
color-mix(in srgb, var(--bpk-text-primary, ...) X%, transparent)in place ofrgba(tokens.$bpk-text-primary-day, X)is the right approach here —rgba()can't accept a CSS custom property as its color argument, socolor-mix()is necessary to let the opacity overlay respond to the color var. All opacity percentages carried over correctly (15/30/40/45/12/90% etc. all match their pre-migrationrgba()alpha values). - Percy shows zero visual diff, which cross-confirms the
color-mix()math renders identically to the originalrgba()at every opacity level used.
Solid migration of a trickier case (color mixed with alpha, not a flat property value).
Closes #4843
What
Migrates
bpk-component-overlaySCSS to use CSS custom properties with SASS fallbacks.Changes
BpkOverlay.module.scss: Replaces allrgba(tokens.$bpk-text-primary-day, N)calls withcolor-mix(in srgb, var(--bpk-text-primary, tokens.$bpk-text-primary-day) N%, transparent). This is required because CSSrgba()cannot accept custom properties as the colour argument, butcolor-mixcan.BpkOverlay.stories.tsx: Adds aDarkModestory usingBpkDarkExampleWrapperto demonstrate theme-aware overlay rendering.Token mapping
$bpk-text-primary-day--bpk-text-primary$bpk-color-sky-blue-shade-03Test
All 24 existing tests pass unchanged.