[CLOV-CSS] Migrate bpk-component-page-indicator to CSS custom properties

[Gert-Jan Vercauteren (gert-janvercauteren)]

Summary

• Migrates bpk-component-page-indicator SCSS to CSS custom properties with SASS fallbacks
• Dot indicator colours now respond to light/dark theme via CSS vars
• Nav carousel button text colour also migrated to CSS var
• Adds OnDark Storybook story using BpkDarkExampleWrapper

Closes #4831

🤖 Generated with Claude Code

[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-page-indicator styling from pure SCSS tokens to CSS custom properties (with SASS fallbacks) to enable theme responsiveness, and adds a Storybook dark-mode example.

Changes:

• Updated page indicator dot and active dot colors to use CSS custom properties with token fallbacks.
• Migrated carousel nav button text color to a CSS custom property.
• Added an OnDark Storybook story wrapped in BpkDarkExampleWrapper.

Reviewed changes

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

File	Description
packages/backpack-web/src/bpk-component-page-indicator/src/BpkPageIndicator.stories.tsx	Adds dark-mode Storybook example and minor formatting cleanups.
packages/backpack-web/src/bpk-component-page-indicator/src/BpkPageIndicator.module.scss	Replaces hardcoded token colors with CSS custom properties + SASS fallbacks.

---

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[Vincent Liu (xiaogliu)]

Token value audit — CORRECTED (see note below)

⚠️ 4 of the 5 new CSS vars in this diff don't exist anywhere in the theme system. This was a false positive on my part — I ran the original search against a stale local checkout of token-sync/css/theme-backpack-light.css / theme-backpack-dark.css that predated commit 539f11ec8 ("Update Figma design tokens #4964", merged 2026-07-24), which added exactly the 4 vars I flagged as missing. My mistake — apologies for the noise.

Re-verified against the current origin/main:

CSS var	Old SASS fallback	Light value	Dark value	Match
--bpk-private-page-indicator-bg-default-unselected	$bpk-line-day	#c1c7cf	rgba(255,255,255,0.5)	✅
--bpk-private-page-indicator-bg-over-image-unselected	$bpk-line-on-dark-day	rgba(255,255,255,0.5)	rgba(255,255,255,0.5)	✅
--bpk-private-page-indicator-bg-default-selected	$bpk-text-secondary-day	#626971	#ffffff	✅
--bpk-private-page-indicator-bg-over-image-selected	$bpk-text-on-dark-day	#ffffff	#ffffff	✅
--bpk-text-primary	$bpk-text-primary-day	#161616	#ffffff	✅

All 5 CSS vars exist and all values match their SASS fallbacks exactly, light and dark. No mismatches found. This PR's token migration is clean — no blocking issues from this audit.

[Vincent Liu (xiaogliu)]

LGTM