[WIP-07-A] [Project Solar / Phase 1 / Dry-run] Include IBM Plex fonts as part of the @hashicorp/design-system-components package

[didoo]

Note

🚧 This is still a work-in-progress 🚧

📌 Summary

We want to understand if it’s possible to include directly the IBM Plex fonts as part of the @hashicorp/design-system-components package, so that consumers don’t have to do anything on their side (apart from importing a pre-compiled CSS file containing the correct @font-face declarations.

This PR is built on top of #3332

🛠️ Detailed description

TODO

🚧 TODOs

• One thing to consider too, is to have a new SCSS file at packages/components level that includes the design-system-common.scss file and the design-system-plex-fonts.scss file, and that generates a new CSS file (via Rollup) so that consumers have to import only one CSS file, not two.

🔗 External links

Jira ticket: https://hashicorp.atlassian.net/browse/HDS-5688

---

👀 Component checklist

• Percy was checked for any visual regression
• A changelog entry was added via Changesets if needed (see templates here)

💬 Please consider using conventional comments when reviewing this PR.

📋 PCI review checklist

• If applicable, I've documented a plan to revert these changes if they require more than reverting the pull request.
• If applicable, I've worked with GRC to document the impact of any changes to security controls.
  Examples of changes to controls include access controls, encryption, logging, etc.
• If applicable, I've worked with GRC to ensure compliance due to a significant change to the in-scope PCI environment.
  Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
hds-showcase	Ready	Preview	Nov 28, 2025 2:42pm
hds-website	Ready	Preview	Nov 28, 2025 2:42pm

[didoo]

TBD if they should be devDependencies or normal dependencies

[Copilot]

Pull request overview

This PR implements the inclusion of IBM Plex fonts directly within the @hashicorp/design-system-components package as part of Project Solar Phase 1. The changes enable consumers to use IBM Plex fonts by simply importing a pre-compiled CSS file, eliminating the need for external font hosting or manual font setup.

Key changes include:

• Addition of IBM Plex font packages (@ibm/plex-sans and @ibm/plex-mono) as dependencies
• Creation of a new SCSS file and build process to compile font declarations
• Integration of font files into the package's public assets for distribution
• Addition of extensive design tokens for button and badge components with Carbon Design System theming support

Reviewed changes

Copilot reviewed 25 out of 61 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
showcase/public/assets/styles/@hashicorp/design-system-plex-fonts.css	Generated CSS file containing @font-face declarations for IBM Plex fonts
showcase/app/index.html	Added link to import the new Plex fonts CSS and commented out external Carbon font reference
packages/tokens/src/products/shared/typography.json	Restructured typography tokens to support both default and Carbon themes with new combined font stacks
packages/tokens/src/products/shared/button.json	Added comprehensive button design tokens with multi-theme support
packages/tokens/src/products/shared/badge.json	Added comprehensive badge design tokens with multi-theme support
packages/tokens/src/products/shared/badge-count.json	Added badge-count specific design tokens
packages/tokens/src/global/color/*.json	Added $modes configuration for Carbon theme support across color tokens
packages/tokens/package.json	Added postbuild script to copy themed token CSS files to showcase
packages/components/src/styles/@hashicorp/design-system-plex-fonts.scss	New SCSS file that imports and configures IBM Plex fonts
packages/components/rollup.config.mjs	Updated build configuration to compile Plex fonts SCSS and copy font files to distribution
packages/components/package.json	Added IBM Plex dependencies, postbuild script, and public-assets exports
packages/components/src/styles/mixins/_button.scss	Refactored to use button design tokens instead of hardcoded values
packages/components/src/styles/mixins/_interactive-dark-theme.scss	Updated to use button border-radius token
packages/components/src/styles/components/*.scss	Updated various component styles to use new design tokens

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported