[CLOV-CSS] Migrate bpk-component-switch to CSS custom properties#4941
Conversation
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-switch theming from SCSS token values / legacy themeable mixins to CSS custom properties with token fallbacks, and updates Storybook coverage for dark mode scenarios.
Changes:
- Removes
switchCheckedColoras a per-component theme attribute and updates the corresponding test. - Updates
BpkSwitchstyles to use semantic CSS custom properties with SASS token fallbacks. - Adds dark mode Storybook stories (and includes additional grid-toggle styling/story updates).
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-switch/src/themeAttributes.ts | Removes per-component theme attribute export (now empty). |
| packages/backpack-web/src/bpk-component-switch/src/themeAttributes-test.tsx | Updates expectations to match empty theme attributes. |
| packages/backpack-web/src/bpk-component-switch/src/BpkSwitch.stories.tsx | Adds dark mode visual test story wrapper. |
| packages/backpack-web/src/bpk-component-switch/src/BpkSwitch.module.scss | Replaces legacy themeable mixin usage with CSS custom properties + token fallbacks. |
| packages/backpack-web/src/bpk-component-grid-toggle/src/BpkGridToggle.stories.tsx | Adds a dark mode story wrapper. |
| packages/backpack-web/src/bpk-component-grid-toggle/src/BpkGridToggle.module.scss | Introduces CSS custom properties and color-mix() usage for gradient styling. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| */ | ||
|
|
||
| export default ['switchCheckedColor']; | ||
| export default []; |
There was a problem hiding this comment.
Outdated — themeAttributes.ts is no longer part of this PR's current diff (superseded by a later commit on this branch, which only touches BpkSwitch.module.scss now). No action needed.
| color-mix( | ||
| in srgb, | ||
| var(--bpk-status-danger-spot, tokens.$bpk-status-danger-spot-day) | ||
| 30%, | ||
| transparent | ||
| ) | ||
| 0, |
There was a problem hiding this comment.
Outdated — BpkGridToggle.module.scss is no longer part of this PR's current diff (superseded by a later commit on this branch, which only touches BpkSwitch.module.scss now). No action needed.
| export const DarkMode: Story = { | ||
| render: () => ( | ||
| <BpkDarkExampleWrapper> | ||
| <DefaultExample /> | ||
| </BpkDarkExampleWrapper> | ||
| ), | ||
| }; |
There was a problem hiding this comment.
Outdated — the grid-toggle files this comment refers to are no longer part of this PR's current diff (scope is now consistent with the title/description, only BpkSwitch.module.scss). No action needed.
|
Visit https://backpack.github.io/storybook-prs/4941 to see this build running in a browser. |
1adb1c8 to
5c54260
Compare
|
Visit https://backpack.github.io/storybook-prs/4941 to see this build running in a browser. |
Closes #4811 - Replace rgba() with color-mix() to support CSS var for status-danger-spot - Wrap bpk-spacing-sm() with var(--bpk-spacing-sm) for theme-responsive spacing - Add DarkMode story using BpkDarkExampleWrapper - bpk-one-pixel-rem kept as SASS token (no CSS var equivalent) Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
React19 TypeScript migration requires explicit suppression for untyped bpk-storybook-utils imports.
5c54260 to
722225a
Compare
|
Visit https://backpack.github.io/storybook-prs/4941 to see this build running in a browser. |
|
Visit https://backpack.github.io/storybook-prs/4941 to see this build running in a browser. |
|
Token value audit — verified every new CSS var against
All new/old values match — no visual regression risk from this migration. |
Closes #4827
Changes
Migrates
bpk-component-switchSCSS to CSS custom properties with SASS token fallbacks.SCSS (
BpkSwitch.module.scss)tokens.$bpk-core-accent-day→var(--bpk-core-accent, tokens.$bpk-core-accent-day)(checked track background)tokens.$bpk-text-disabled-day→var(--bpk-text-disabled, tokens.$bpk-text-disabled-day)(unchecked track background)tokens.$bpk-text-on-dark-day→var(--bpk-text-on-dark, tokens.$bpk-text-on-dark-day)(handle background)bpk-themeable-propertymixin callthemeAttributes.tsswitchCheckedColor—--bpk-core-accentis a global semantic var set at the theme level, not a per-component overrideBpkSwitch.stories.tsxVisualTestDarkModestory usingBpkDarkExampleWrapper