[analyze-2788] switch to IBM Plex Sans#2810
Merged
Merged
Conversation
theme.ts referenced GT-America but never loaded it (no @font-face), so it always fell back to system fonts — inconsistent on Linux. Now imports the self-hosted IBM Plex Sans webfont and routes both themes through a single FONT_FAMILY token. Refs #2788
Wizards declared no font and inherited the host/browser default, rendering inconsistently (notably on Linux). Load the self-hosted IBM Plex Sans webfont via App.tsx (covers both the standalone and single-spa entries) and scope the family to the wizard shell root so it never leaks into the portal shell. Refs #2788
Stop shipping GT-America (delete the self-hosted .woff files and their @font-face blocks — the licensing fix) and load self-hosted IBM Plex Sans via the root App.vue instead. Route the SCSS $font-family-sans-serif, a new --app-font-family CSS token (for scoped component styles), and the Plotly chart FONT_FAMILY through the shared stack. GT-America remains first by name only. Refs #2788
… khairul-syazwan/analyze-2788
Completes the dependency addition now that the workspace resolves. Refs #2788
khairul-syazwan
requested review from
LSriragavan,
SantanM,
brandantck,
hengxian-jiang,
jerome-ng,
maggie-li-yd,
p-hoffmann and
suwarnoong
as code owners
Contributor
There was a problem hiding this comment.
Pull request overview
Updates the UI font setup in several Analyze-related apps by stopping GT-America webfont shipping in vue-mri-ui-lib and introducing IBM Plex Sans Variable via @fontsource-variable/ibm-plex-sans, while refactoring font-family definitions toward reusable constants/CSS tokens.
Changes:
- Add
@fontsource-variable/ibm-plex-sansdependencies and lockfile entries for relevant UI apps. - Introduce IBM Plex Sans Variable loading (CSS/JS imports) and apply font-family via CSS variables / shared constants.
- Remove GT-America
@font-facedeclarations fromvue-mri-ui-liband update component styles to use a shared--app-font-familytoken / PlotlyFONT_FAMILYstring.
Reviewed changes
Copilot reviewed 15 out of 22 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| plugins/ui/bun.lock | Locks the new @fontsource-variable/ibm-plex-sans dependency. |
| plugins/ui/apps/wizards/src/global.css | Adds IBM Plex Sans import and defines --wizard-font-family stack. |
| plugins/ui/apps/wizards/src/components/WizardShell.module.css | Applies wizard font family to the app shell container. |
| plugins/ui/apps/wizards/src/App.tsx | Loads wizard global font CSS at app entry. |
| plugins/ui/apps/wizards/package.json | Adds IBM Plex Sans Variable dependency. |
| plugins/ui/apps/vue-mri-ui-lib/src/utils/Constants.ts | Adds Plotly FONT_FAMILY constant and uses it in Plotly config. |
| plugins/ui/apps/vue-mri-ui-lib/src/styles/style.scss | Adds --app-font-family CSS custom property derived from SCSS stack. |
| plugins/ui/apps/vue-mri-ui-lib/src/styles/fonts.scss | Removes GT-America @font-face declarations. |
| plugins/ui/apps/vue-mri-ui-lib/src/styles/_mri-bootstrap-variables.scss | Updates Bootstrap font stack to include IBM Plex Sans Variable. |
| plugins/ui/apps/vue-mri-ui-lib/src/components/StackBarChartLegend.vue | Switches legend font usage to var(--app-font-family). |
| plugins/ui/apps/vue-mri-ui-lib/src/components/ShinyViewer/SaveCohortModal.vue | Switches modal font token to var(--app-font-family). |
| plugins/ui/apps/vue-mri-ui-lib/src/components/ShinyViewer/DashboardSelectionModal.vue | Switches modal typography to var(--app-font-family). |
| plugins/ui/apps/vue-mri-ui-lib/src/App.vue | Imports IBM Plex Sans Variable so it loads in all Vue entry contexts. |
| plugins/ui/apps/vue-mri-ui-lib/package.json | Adds IBM Plex Sans Variable dependency. |
| plugins/ui/apps/concept-sets/src/theme/theme.ts | Imports IBM Plex Sans Variable and centralizes MUI FONT_FAMILY. |
| plugins/ui/apps/concept-sets/package.json | Adds IBM Plex Sans Variable dependency. |
maggie-li-yd
approved these changes
Jun 30, 2026
khairul-syazwan
changed the title
suwarnoong
approved these changes
Jul 1, 2026
github-merge-queue
Bot
removed this pull request from the merge queue due to failed status checks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Resolves #2788
Merge Checklist
Please cross check this list if additions / modifications needs to be done on top of your core changes and tick them off. Reviewer can as well glance through and help the developer if something is missed out.
developbranch)