refactor: font standardization - consolidate sans serif, create semantic variables/tokens

[lokesh]

Closes #8691

• No functional change.
• Refactors font variables. A step towards faster and more consistent design updates.

Technical

The bulk of the action is in static/css/less/font-families.less

Proposes separating out variables into a three tier system:

1. primitive tokens - The raw values. Think of this is the palette of options. The goal is to only use these to populate semantic and component tokens. e.g. color-gray-100 → #eee
2. semantic tokens - Convey how a token should be used. e.g. color-bg-primary → color-gray-100
3. component tokens - Tokens scoped to UI components. e.g. button-bg → color-bg-primary Note: I don't introduce any component tokens in this PR.

Stakeholders

@cdrini @mekarpeles

[Copilot]

Pull Request Overview

Refactors font variables by introducing design tokens and standardizing font-family usage across the codebase to simplify future design changes.

• Adds primitive and semantic font tokens (@family-*, @body-family, @CODE-FAMILY)
• Replaces legacy font variables (e.g., @lucida_sans_serif-*, @lucida_console_monospace, @monospace) with semantic tokens
• Removes legacy font variable definitions from font-families.less

Reviewed Changes

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

Show a summary per file

File	Description
static/css/page-user.less	Swap legacy font var to @body-family
static/css/page-plain.less	Swap legacy font vars to @body-family
static/css/page-edit.less	Standardize to @body-family and @CODE-FAMILY
static/css/page-book-widget.less	Swap legacy font vars to @body-family
static/css/page-admin.less	Swap legacy font vars to @body-family
static/css/less/font-families.less	Introduce primitive/semantic tokens; remove legacy variables
static/css/legacy.less	Standardize to @body-family/@CODE-FAMILY
static/css/legacy-tools.less	Standardize to @body-family
static/css/legacy-header.less	Standardize to @body-family
static/css/legacy-datatables.less	Standardize to @body-family
static/css/legacy-borrowTable-adminUser.less	Standardize to @body-family
static/css/components/wmd-prompt-dialog--js.less	Standardize to @body-family
static/css/components/ui-tabs.less	Standardize to @body-family
static/css/components/searchResultItemCta.less	Standardize to @body-family
static/css/components/search-result-item.less	Standardize to @body-family
static/css/components/page-history.less	Standardize to @body-family
static/css/components/page-heading-search-box.less	Standardize to @body-family
static/css/components/page-banner.less	Standardize to @body-family
static/css/components/mybooks-list.less	Standardize to @body-family
static/css/components/merge-request-table.less	Standardize to @body-family
static/css/components/merge-form.less	Standardize to @body-family/@CODE-FAMILY
static/css/components/list-entry.less	Standardize to @body-family
static/css/components/jquery.autocomplete.less	Standardize to @body-family/@CODE-FAMILY
static/css/components/illustration.less	Standardize to @body-family
static/css/components/home.less	Standardize to @body-family
static/css/components/fulltext-snippet.less	Standardize to @body-family
static/css/components/fulltext-search-suggestion.less	Standardize to @body-family
static/css/components/fulltext-search-suggestion-item.less	Standardize to @body-family
static/css/components/form.olform.less	Standardize to @body-family
static/css/components/footer.less	Standardize to @body-family
static/css/components/flash-messages.less	Standardize to @body-family
static/css/components/editions.less	Standardize to @body-family
static/css/components/edit-toolbar.less	Standardize to @body-family
static/css/components/diff.less	Standardize to @body-family/@CODE-FAMILY
static/css/components/chart.less	Standardize to @body-family
static/css/components/cbox.less	Standardize to @body-family
static/css/components/buttonsAndLinks.less	Standardize to @body-family
static/css/components/buttonLink.less	Standardize to @body-family
static/css/components/buttonCta.less	Standardize to @body-family
static/css/components/admin-table.less	Standardize to @body-family
static/css/base/helpers-misc.less	Standardize helper classes to @body-family
static/css/base/headings.less	Standardize headings to @body-family
static/css/base/common.less	Set global body/headings to @body-family

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

[nitpick] The primitive stack is duplicated in both @family-sans and @default-sans-serif, which can drift over time. To keep a single source of truth, alias @default-sans-serif to @family-sans (and optionally point @verdana/@Bahnschrift at @body-family) instead of repeating the literal stack.

[lokesh]

Some additional clean up of this file is needed and would be handled in a follow-up PR.

[lokesh]

@cdrini Any thoughts on the css variable organization?

I posted this PR with limited context, but happy to fill in gaps. Questions about design tokens architecture, how this would play out across rest of CSS, and what the advantages are of this approach and what it will unlock (e.g. possibility of dark mode).

[cdrini]

Niiiice! This looks great, thank you @lokesh ! Excited to see the slurry of lucida variables gone 😊

I put this up on testing.openlibrary.org and flipped around a bit and things look good.

In a future PR, we can likely replace the @default-sans-serif variable in favour of @body-family.

In terms of overall approach, I like your use of the more design-standard terminology for primitive/semantic/component design tokens! Open Library tends to run a bit flatter, so we currently mainly only have primitive tokens with a small handful of semantic tokens.