fix: update unicode ranges for IBM plex by janhassel · Pull Request #21748 · carbon-design-system/carbon

janhassel · 2026-03-11T17:58:43Z

Currently, the advertised unicode ranges for IBM Plex in the @carbon/styles package are outdated. In addition, the same ranges are used across sans, serif and mono fonts even though the respective fonts differ in support.

The concrete issue I ran into was that the unicode border glyphs weren't properly rendering using Plex Mono as the respective range U+2500-259F wasn't advertised in the @font-face. Only U+25CA was listed, as this is the only one supported by sans.

I split up the unicode range constants per type (sans, serif, mono) and updated the lists based on their current state in ibm/plex:

Changelog

Changed

Split up unicode range definitions in /packages/styles/scss/fonts/unicode into separate files:
- _sans.scss
- _serif.scss
- _mono.scss
- Each of these expose the same API as before (get-range($name))
Updated the respective unicode ranges based on the links shared above
Updated @ibm/plex package from an outdated pre-release (6.0.0-next.6) to the latest 6.x version.

Testing / Reviewing

While on main, build the styles package and inspect the generated /packages/styles/css/styles.css.
- Search for U+2500. It should yield no matches.
Switch to this PR and rebuild the styles packaged. Inspect the generated CSS again.
- Searching for U+2500 should yield results for all mono "-Pi" fonts, but not for sans and serif. Expected range: U+2500-259F
Build all packages and run the react storybook
Navigate to the "Code snippet → Multiline" story and paste the following into the <code>…</code> element via the browser dev tools:

┌───────────────────────────┐
│   Carbon Design System    │
└───────────────────────────┘

On main (or on the deployed storybook), it should look broken:

On the PR storybook, it should be rendered correctly:

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

Reviewed every line of the diff
~~Updated documentation and storybook examples~~
~~Wrote passing tests that cover this change~~
~~Addressed any impact on accessibility (a11y)~~
Tested for cross-browser consistency
Validated that this code is ready for review and status checks should pass

More details can be found in the pull request guide

netlify · 2026-03-11T18:03:40Z

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	`d87d48a`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/69b1ad57459f6d0008c47056
😎 Deploy Preview	https://deploy-preview-21748--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2026-03-11T18:03:42Z

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`d87d48a`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/69b1ad57219ac800088682e6
😎 Deploy Preview	https://deploy-preview-21748--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

codecov · 2026-03-11T18:06:23Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.90%. Comparing base (7988f34) to head (356fc50).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #21748   +/-   ##
=======================================
  Coverage   94.90%   94.90%           
=======================================
  Files         541      541           
  Lines       45250    45250           
  Branches     6331     6386   +55     
=======================================
  Hits        42946    42946           
  Misses       2172     2172           
  Partials      132      132

Flag	Coverage Δ
main-packages	`89.16% <ø> (ø)`
web-components	`97.70% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

netlify · 2026-03-11T18:08:28Z

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`356fc50`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/69d74e5751254d0008742380
😎 Deploy Preview	https://deploy-preview-21748--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2026-03-11T18:08:29Z

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	`356fc50`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/69d74e5725c1cc0008c151ce
😎 Deploy Preview	https://deploy-preview-21748--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

emyarod

looks good to me!

adamalston

Could coverage be added for these changes in https://github.com/carbon-design-system/carbon/blob/f044bf02a661c0e2d2af07716541dbd3b8091887/packages/styles/scss/fonts/__tests__/fonts-test.js or is it not possible? It appears that the current font tests only assert src, font-style, and font-weight.

carbon/packages/styles/scss/fonts/__tests__/fonts-test.js

Lines 62 to 74 in f044bf0

    
           for (const declaration of rule.declarations) { 
        
             if (declaration.property === 'font-weight') { 
        
               entry.weights.add(declaration.value); 
        
             } 
        
             if (declaration.property === 'font-style') { 
        
               entry.styles.add(declaration.value); 
        
             } 
        
             if (declaration.property === 'src') { 
        
               entry.src.add(declaration.value); 
        
             } 
        
           }

…de-ranges

janhassel · 2026-04-10T07:00:38Z

@adamalston @emyarod Let me know if there's anything still needed before merging!

adamalston · 2026-04-10T15:40:09Z

I re-scanned the changes and didn't see anything.

tay1orjones · 2026-04-10T18:34:00Z

It's super cool to see that chromatic caught the glyph changes 🔥

* fix: update unicode ranges for IBM plex * chore: update @ibm/plex * chore: run dedupe * fix(fonts/unicode): correct sass parameter type * fix(fonts/unicode): ensure backwards compatibility * fix: fix * chore(fonts/unicode): fix copyright headers * docs(fonts/unicode): clarify deprecation date * fix(fonts/unicode): update serif ranges * test(styles): add unicode-range to fonts snapshot * chore: run dedupe * chore: revert unintended dependency changes * chore: run dedupe * chore: fix copyright header --------- Co-authored-by: emyarod <emyarod@users.noreply.github.com>

janhassel added 2 commits March 11, 2026 18:23

fix: update unicode ranges for IBM plex

d87d48a

chore: update @ibm/plex

01870a3

janhassel requested a review from a team as a code owner March 11, 2026 17:58

janhassel requested review from emyarod and tay1orjones March 11, 2026 17:58

janhassel deployed to @carbon/react storybook preview March 11, 2026 18:11 — with GitHub Actions View deployment

janhassel added 2 commits March 12, 2026 08:56

chore: run dedupe

8d4a580

fix(fonts/unicode): correct sass parameter type

d62e70a

janhassel deployed to @carbon/react storybook preview March 12, 2026 08:11 — with GitHub Actions View deployment

Merge branch 'main' into plex-outdated-unicode-ranges

9b40790

janhassel deployed to @carbon/react storybook preview March 16, 2026 15:45 — with GitHub Actions View deployment

Merge branch 'main' into plex-outdated-unicode-ranges

331ab71

emyarod approved these changes Mar 17, 2026

View reviewed changes

emyarod deployed to @carbon/react storybook preview March 17, 2026 14:43 — with GitHub Actions View deployment

adamalston reviewed Mar 18, 2026

View reviewed changes

Comment thread packages/styles/scss/fonts/unicode/_index.scss Outdated

Comment thread packages/styles/scss/fonts/unicode/_index.scss Outdated

janhassel added 2 commits March 18, 2026 17:10

fix(fonts/unicode): ensure backwards compatibility

1469918

fix: fix

f044bf0

janhassel deployed to @carbon/react storybook preview March 18, 2026 16:33 — with GitHub Actions View deployment

adamalston reviewed Mar 18, 2026

View reviewed changes

janhassel added 3 commits March 19, 2026 09:08

chore(fonts/unicode): fix copyright headers

ed173ad

docs(fonts/unicode): clarify deprecation date

7ae5342

fix(fonts/unicode): update serif ranges

b833fae

janhassel deployed to @carbon/react storybook preview March 19, 2026 09:29 — with GitHub Actions View deployment

test(styles): add unicode-range to fonts snapshot

8800142

janhassel requested a review from adamalston March 19, 2026 09:36

janhassel deployed to @carbon/react storybook preview March 19, 2026 09:46 — with GitHub Actions View deployment

adamalston reviewed Mar 23, 2026

View reviewed changes

Comment thread packages/styles/scss/fonts/unicode/_index.scss

janhassel added 2 commits April 1, 2026 13:15

Merge remote-tracking branch 'upstream/main' into plex-outdated-unico…

1e24dc1

…de-ranges

chore: run dedupe

0567e17

janhassel requested a review from adamalston April 1, 2026 11:30

janhassel deployed to @carbon/react storybook preview April 1, 2026 11:39 — with GitHub Actions View deployment

janhassel added 2 commits April 1, 2026 15:14

chore: revert unintended dependency changes

3b11ad8

chore: run dedupe

08ab7a2

janhassel deployed to @carbon/react storybook preview April 1, 2026 13:29 — with GitHub Actions View deployment

adamalston approved these changes Apr 1, 2026

View reviewed changes

janhassel added 2 commits April 9, 2026 08:57

Merge remote-tracking branch 'upstream/main' into plex-outdated-unico…

8560551

…de-ranges

chore: fix copyright header

356fc50

janhassel deployed to @carbon/react storybook preview April 9, 2026 07:14 — with GitHub Actions View deployment

tay1orjones approved these changes Apr 10, 2026

View reviewed changes

tay1orjones enabled auto-merge April 10, 2026 18:32

tay1orjones added this pull request to the merge queue Apr 10, 2026

tay1orjones added the status: ready to merge 🎉 label Apr 10, 2026

Merged via the queue into carbon-design-system:main with commit 597001a Apr 10, 2026
38 of 39 checks passed

janhassel deleted the plex-outdated-unicode-ranges branch April 13, 2026 07:00

	for (const declaration of rule.declarations) {
	if (declaration.property === 'font-weight') {
	entry.weights.add(declaration.value);
	}

	if (declaration.property === 'font-style') {
	entry.styles.add(declaration.value);
	}

	if (declaration.property === 'src') {
	entry.src.add(declaration.value);
	}
	}

Conversation

janhassel commented Mar 11, 2026

Changelog

Testing / Reviewing

PR Checklist

Uh oh!

netlify Bot commented Mar 11, 2026

✅ Deploy Preview for v11-carbon-web-components ready!

Uh oh!

netlify Bot commented Mar 11, 2026

✅ Deploy Preview for v11-carbon-react ready!

Uh oh!

codecov Bot commented Mar 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

netlify Bot commented Mar 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for v11-carbon-react ready!

Uh oh!

netlify Bot commented Mar 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for v11-carbon-web-components ready!

Uh oh!

emyarod left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

adamalston left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

janhassel commented Apr 10, 2026

Uh oh!

adamalston commented Apr 10, 2026

Uh oh!

tay1orjones commented Apr 10, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

codecov Bot commented Mar 11, 2026 •

edited

Loading

netlify Bot commented Mar 11, 2026 •

edited

Loading

netlify Bot commented Mar 11, 2026 •

edited

Loading