backpack icon indicating copy to clipboard operation
backpack copied to clipboard

[DO NOT MERGE][BpkThemeProvider] Spike

Open gert-janvercauteren opened this issue 1 month ago • 4 comments

#BpkThemeProvider This pull request introduces theme customization support for button and chip components, allowing their appearance to be easily modified via theming. The changes include updates to SCSS mixins to use themeable properties, a new example demonstrating custom themes, and a corresponding story for documentation and testing.

Theming support for buttons and chips:

  • Updated packages/bpk-mixins/_buttons.scss to make the border-radius of buttons themeable using the bpk-themeable-property mixin and the --bpk-button-corner-radius CSS variable.
  • Updated packages/bpk-mixins/_chips.scss to make the border-radius and background-color of chips themeable, and to allow the default and hover border (via box-shadow) to be customized through theme variables. [1] [2]

Examples and documentation:

  • Added examples/bpk-component-themeprovider/examples.tsx with a DefaultExample that demonstrates custom theming for buttons and chips using BpkThemeProvider.
  • Added examples/bpk-component-themeprovider/stories.tsx to register the new example in Storybook, enabling interactive documentation and testing of theming capabilities.

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

gert-janvercauteren avatar Nov 26 '25 08:11 gert-janvercauteren