[CLOV-1341][BpkChip]Theming support to BpkChip

[kerrie-wu]

Summary

Adds full theming support to BpkChip via CSS custom properties, enabling consumers to override colours, borders, and border-radius through BpkThemeProvider.

What changed

packages/bpk-mixins/_chips.scss

• Replaced hard-coded colour and border values with bpk-themeable-property calls across all three chip variants (default, on-dark, on-image) — covering background, text, hover, active, and selected states.
• Added a private bpk-chip-themeable-border helper mixin to work around the limitation that bpk-border-sm (which uses box-shadow shorthand) cannot accept a CSS variable directly. The two-line fallback pattern (box-shadow with literal fallback + box-shadow with var()) is applied instead.
• Made border-radius themeable via --bpk-chip-border-radius.

packages/bpk-component-chip/src/themeAttributes.ts

• Default export is unchanged (backward compatible — existing consumers relying on the original 8 selected-state attributes are unaffected).
• Added four new named exports:
  • chipBorderRadiusThemeAttributes — ['chipBorderRadius']
  • chipDefaultThemeAttributes — 10 attributes covering all default variant states
  • chipOnDarkThemeAttributes — 9 attributes covering all on-dark variant states
  • chipOnImageThemeAttributes — 8 attributes covering all on-image variant states

packages/bpk-component-chip/index.ts

• Re-exports the four new named exports so consumers can import them directly from the package.

packages/bpk-component-chip/src/themeAttributes-test.ts

• Extended test coverage for all new named exports.

examples/bpk-component-chip/examples.tsx

• Added ThemedExample Storybook story demonstrating a custom theme override using BpkThemeProvider with chipDefaultBorderColor, chipDefaultSelectedBackgroundColor, chipBorderRadius, and related attributes.

Non-breaking

• Default CSS fallback values exactly match the previous hard-coded token values — no visual change when no theme is applied.
• Default themeAttributes export is preserved as-is.

Remember to include the following changes:

• Ensure the PR title includes the name of the component you are changing so it's clear in the release notes for consumers of the changes in the version e.g [Clover-123][BpkButton] Updating the colour
• README.md (If you have created a new component)
• Component README.md
• Tests
• Accessibility tests
  • The following checks were performed:
    • Ability to navigate using a keyboard only
    • Zoom functionality (Deque University explanation):
      • The page SHOULD be functional AND readable when only the text is magnified to 200% of its initial size
      • Pages must reflow as zoom increases up to 400% so that content continues to be presented in only one column i.e. Content MUST NOT require scrolling in two directions (both vertically and horizontally)
    • Ability to navigate using a screen reader only
• Storybook examples created/updated
• For breaking changes or deprecating components/properties, migration guides added to the description of the PR. If the guide has large changes, consider creating a new Markdown page inside the component's docs folder and link it here

[Copilot]

Pull request overview

Adds broader theming support for BpkChip by switching more chip styles to CSS-variable-backed mixins, exposing new theme attribute groupings for consumers, and providing a Storybook example demonstrating overrides.

Changes:

• Updated chip SCSS mixin to make border-radius, colors, and borders themeable via CSS variable fallbacks.
• Expanded bpk-component-chip theme attribute exports (while preserving the original default export for backward compatibility) and added tests.
• Added a new Storybook “Themed” example demonstrating chip theme overrides via BpkThemeProvider.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/bpk-mixins/_chips.scss	Applies bpk-themeable-property/CSS var fallbacks across chip variants and introduces a helper for themeable borders.
packages/bpk-component-chip/src/themeAttributes.ts	Keeps the legacy default export intact and adds new grouped theme attribute exports.
packages/bpk-component-chip/src/themeAttributes-test.ts	Verifies backward compatibility and coverage for newly exported theme attribute groups.
packages/bpk-component-chip/index.ts	Re-exports new theme attribute groupings from the package entry point.
examples/bpk-component-chip/stories.tsx	Adds a new “Themed” story entry.
examples/bpk-component-chip/examples.tsx	Implements the new ThemedExample using BpkThemeProvider.

---

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

	Warnings
⚠️	Package source files (e.g. packages/package-name/src/Component.js) were updated, but snapshots weren't. Have you checked that the tests still pass?

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against 1d0615a

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[Gert-Jan Vercauteren (gert-janvercauteren)]

LGTM

[Ezreal Yang (Supremeyh)]

can we use borderRadiusLg for chipBorderRadius

[Ezreal Yang (Supremeyh)]

it can use $bpk-border-radius-sm instead

[skyscanner-backpack-bot]

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