Change BpkBadge font style from footnote to caption

[fourcolourblack]

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

Updates the bpk-badge Sass mixin typography to use the “caption” text style instead of “footnote”, aligning badge styling with the intended design token typography.

Changes:

• Switches the badge typography mixin from bpk-footnote to bpk-caption in bpk-badge.

Comments suppressed due to low confidence (1)

packages/bpk-mixins/_badges.scss:63

• bpk-badge now includes typography.bpk-caption, but the mixin still sets font-size/line-height fallbacks to the sm tokens via bpk-themeable-property. Since those declarations come after the caption include, the compiled output will still default to the previous (footnote/sm) sizing, so this change likely won’t actually switch the badge typography to caption.

To make the badge truly use caption sizing, align the themeable fallbacks with caption (e.g., tokens.$bpk-font-size-xs and tokens.$bpk-line-height-xs) and/or remove the redundant typography include so there’s a single source of truth for these values.

  @include typography.bpk-text;
  @include typography.bpk-caption;
  @include utils.bpk-themeable-property(
    font-size,
    --bpk-badge-font-size,
    tokens.$bpk-font-size-sm
  );
  @include utils.bpk-themeable-property(
    font-weight,
    --bpk-badge-font-weight,
    tokens.$bpk-font-weight-book
  );
  @include utils.bpk-themeable-property(
    line-height,
    --bpk-badge-line-height,
    tokens.$bpk-line-height-sm
  );

---

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

[skyscanner-backpack-bot]

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

[fourcolourblack]

Typography has changed from BpkFootnote (14px) to BpkCaption (12px)