Refactor: replace deprecated font-family aliases with design tokens#11970
Merged
lokesh merged 2 commits intointernetarchive:masterfrom Mar 23, 2026
Merged
Refactor: replace deprecated font-family aliases with design tokens#11970lokesh merged 2 commits intointernetarchive:masterfrom
lokesh merged 2 commits intointernetarchive:masterfrom
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Refactors the CSS layer to remove deprecated font-family alias variables and standardize on the official design tokens, ensuring consistent typography and eliminating legacy token debt.
Changes:
- Removed
--body-family/--code-familyaliases fromstatic/css/tokens/font-families.css. - Replaced all usages of the deprecated aliases with
--font-family-body/--font-family-codeacross component, page, and legacy stylesheets.
Reviewed changes
Copilot reviewed 43 out of 43 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| static/css/tokens/font-families.css | Removes deprecated alias tokens so only canonical font-family tokens remain. |
| static/css/page-user.css | Switches page-specific font usage to --font-family-body. |
| static/css/page-plain.css | Updates borrow-table heading fonts to use --font-family-body. |
| static/css/page-edit.css | Updates body/code font usage to --font-family-body / --font-family-code. |
| static/css/page-book-widget.css | Updates widget typography to use --font-family-body. |
| static/css/page-admin.css | Updates admin page typography to use --font-family-body. |
| static/css/legacy.css | Updates legacy typography (including code blocks) to use canonical tokens. |
| static/css/legacy-tools.css | Updates tools UI typography to --font-family-body. |
| static/css/legacy-header.css | Updates legacy header typography to --font-family-body. |
| static/css/legacy-datatables.css | Updates datatables typography to --font-family-body. |
| static/css/legacy-borrowTable-adminUser.css | Updates borrow-table typography to --font-family-body. |
| static/css/components/wmd-prompt-dialog--js.css | Updates prompt dialog typography to --font-family-body. |
| static/css/components/ui-tabs.css | Updates tabs typography to --font-family-body. |
| static/css/components/searchResultItemCta.css | Updates CTA typography to --font-family-body. |
| static/css/components/search-result-item.css | Updates search result typography to --font-family-body. |
| static/css/components/page-history.css | Updates history table typography to --font-family-body. |
| static/css/components/page-heading-search-box.css | Updates search box typography to --font-family-body. |
| static/css/components/page-banner.css | Updates banner typography to --font-family-body. |
| static/css/components/mybooks-list.css | Updates list typography to --font-family-body. |
| static/css/components/merge-request-table.css | Updates merge-request UI typography to --font-family-body. |
| static/css/components/merge-form.css | Updates merge form typography to canonical body/code tokens. |
| static/css/components/list-entry.css | Updates list entry typography to --font-family-body. |
| static/css/components/jquery.autocomplete.css | Updates autocomplete typography to canonical body/code tokens. |
| static/css/components/illustration.css | Updates illustration component typography to --font-family-body. |
| static/css/components/home.css | Updates home stats label typography to --font-family-body. |
| static/css/components/fulltext-snippet.css | Updates snippet typography to --font-family-body. |
| static/css/components/fulltext-search-suggestion.css | Updates suggestion typography to --font-family-body. |
| static/css/components/fulltext-search-suggestion-item.css | Updates suggestion item typography to --font-family-body. |
| static/css/components/form.olform.css | Updates form typography to --font-family-body. |
| static/css/components/footer.css | Updates footer typography to --font-family-body. |
| static/css/components/flash-messages.css | Updates flash message typography to --font-family-body. |
| static/css/components/editions.css | Updates editions table typography to --font-family-body. |
| static/css/components/edit-toolbar.css | Updates edit toolbar typography to --font-family-body. |
| static/css/components/diff.css | Updates diff table typography to canonical body/code tokens. |
| static/css/components/chart.css | Updates chart label typography to --font-family-body. |
| static/css/components/cbox.css | Updates cbox modal typography to --font-family-body. |
| static/css/components/buttonsAndLinks.css | Updates button/link typography to --font-family-body. |
| static/css/components/buttonLink.css | Updates button-link typography to --font-family-body. |
| static/css/components/buttonCta.css | Updates CTA button typography to --font-family-body. |
| static/css/components/admin-table.css | Updates admin-table typography to --font-family-body. |
| static/css/base/helpers-misc.css | Updates helper classes to use --font-family-body. |
| static/css/base/headings.css | Updates headings to use --font-family-body. |
| static/css/base/common.css | Updates global body/heading typography to --font-family-body. |
Contributor
Author
|
Hi @lokesh, Sir it's just a gentle ping on this PR whenever you have a moment. Let me know if you need me to make any adjustment to the CSS or if you are good to approvee the workflow run. Happy to help get this wrapped up. |
github-actions
Bot
added
the
Needs: Response
8 tasks
Collaborator
|
Can you look into resolving the conflicts this branch has. After that I'll work on getting it merged in to master. |
Contributor
Author
|
Hi @lokesh, just letting you know I've resolved the merge conflicts and the branch is fully up to date with master. Let me know if you need anything else from me before merging. |
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.
Closes # NA
Refactor: Replaces the deprecated --body-family and --code-family CSS aliases with the official design tokens (--font-family-body and --font-family-code) across all stylesheets.
Technical
Testing
Pull down this branch and compile the CSS: sudo docker compose exec -u root web make css
Open localhost:8080 and do a hard refresh.
Verify that the UI text and layout still render correctly without defaulting to browser fallback fonts.
Open Developer Tools (F12) and inspect the element or footer to confirm font-family: var(--font-family-body); is actively applied and reading from the :root variables.
Screenshot