[CLOV-1327][BpkButton] Make corner radius themeable via CSS custom property

[Faye (Faye-Xiao)]

Summary

Exposes border-radius as a runtime-configurable CSS custom property (--bpk-button-border-radius) using the same utils.bpk-themeable-property mechanism already used for button colours. No change to default appearance — tokens.$bpk-button-border-radius remains the fallback.

Changes

• packages/bpk-mixins/_buttons.scss — replaced static border-radius declaration in the bpk-button base mixin with @include utils.bpk-themeable-property(border-radius, --bpk-button-border-radius, tokens.$bpk-button-border-radius); removed duplicate static declarations from bpk-button--icon-only and bpk-button--large-icon-only mixins (which would otherwise override the CSS variable)
• packages/bpk-component-button/src/BpkButtonV2/BpkButton.module.scss — removed duplicate static border-radius declarations from &--icon-only and &--large-icon-only selectors for the same reason
• packages/bpk-component-button/src/themeAttributes.ts — added 'buttonBorderRadius' to buttonThemeAttributes so consumers can apply it via bpk-theming
• Test updates: converted all toMatchSnapshot() calls in BpkButton-test.tsx to explicit expect assertions; removed obsolete snapshot file; updated themeAttributes-test.ts to reflect new attribute

Checklist

• 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 — no README change needed (no new props or variants)
• Tests
• Accessibility tests
  • The following checks were performed:
    • Ability to navigate using a keyboard only — border-radius is a visual-only change; keyboard behaviour unchanged
    • 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
    • Ability to navigate using a screen reader only — no ARIA or semantic HTML changes
• Storybook examples created/updated — no new variants introduced; existing stories remain valid
• No breaking changes — default appearance preserved via token fallback; buttonBorderRadius is a new opt-in theme attribute

[Copilot]

Pull request overview

This PR makes BpkButton corner radius runtime-themeable by switching border-radius to the existing utils.bpk-themeable-property pattern (token fallback + CSS custom property override) and registering a new buttonBorderRadius theming attribute.

Changes:

• Make border-radius themeable via --bpk-button-border-radius in the base button mixin and remove icon-only overrides that would block runtime theming.
• Register buttonBorderRadius in buttonThemeAttributes and update the corresponding unit test.
• Replace Jest snapshots in BpkButton-test.tsx with explicit assertions and remove the obsolete snapshot file.

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
packages/bpk-mixins/_buttons.scss	Uses bpk-themeable-property for border-radius and removes icon-only border-radius overrides.
packages/bpk-component-button/src/BpkButtonV2/BpkButton.module.scss	Removes icon-only border-radius declarations so the CSS variable can take effect.
packages/bpk-component-button/src/themeAttributes.ts	Adds buttonBorderRadius to buttonThemeAttributes.
packages/bpk-component-button/src/themeAttributes-test.ts	Updates expectations for the new general theme attribute.
packages/bpk-component-button/src/BpkButtonV2/BpkButton-test.tsx	Replaces snapshots with explicit DOM/class assertions (but currently has a critical type-iteration issue).
packages/bpk-component-button/src/BpkButtonV2/__snapshots__/BpkButton-test.tsx.snap	Removes the obsolete snapshot file.
specs/001-bpkbutton-baseline/spec.md	Adds baseline/spec documentation for the change (currently contains incorrect CSS modifier names).
specs/001-bpkbutton-baseline/styling-guide.md	Adds styling guide documentation (currently inconsistent with actual PR scope/testing approach).
specs/001-bpkbutton-baseline/research.md	Adds research notes for the change.
specs/001-bpkbutton-baseline/plan.md	Adds implementation plan (currently includes a leaked local path artifact and outdated testing notes).
specs/001-bpkbutton-baseline/api-design.md	Documents the theme attribute addition and consumer usage.
specs/001-bpkbutton-baseline/checklists/requirements.md	Adds a spec quality checklist document.

---

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

[skyscanner-backpack-bot]

Visit https://backpack.github.io/storybook-prs/4265 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 170097b

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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