fix(ui): make monospace text follow custom font family - #5727
Open
rtomas wants to merge 1 commit into
Open
Conversation
Setting --apkt-font-family (or legacy --w3m-font-family) left every monospace piece of UI text unstyled: the WalletConnect "Copy link" button, wallet addresses, and amount inputs fell back to the browser default font. The mono font was hardcoded to KHTekaMono with no corresponding CSS variable, so it could not be themed. Since the bundled @font-face blocks are skipped when a custom font is set, font-family: KHTekaMono then pointed at a family that was never loaded, with no generic fallback. Mono now resolves to --apkt-font-family-mono ?? --apkt-font-family ?? --w3m-font-family ?? KHTekaMono so a single custom font keeps mono text styled, and the new --apkt-font-family-mono variable allows overriding monospace on its own. The bundled KHTekaMono face is only injected when it is the effective mono font. Default behavior is unchanged. Closes #5681 Co-Authored-By: Claude <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
9 Skipped Deployments
|
🦋 Changeset detectedLatest commit: 5150558 The changes in this PR will be included in the next version bump. This PR includes changesets to release 26 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
Visual Regression Test Results ✅ PassedChromatic Build: https://www.chromatic.com/build?appId=6493191bf4b10fed8ca7353f&number=990 👉 Please review the visual changes in Chromatic and accept or reject them. |
Contributor
📦 Bundle Size Check✅ All bundles are within size limits 📊 View detailed bundle sizes> @reown/appkit-monorepo@1.7.1 size /home/runner/work/appkit/appkit > size-limit |
Contributor
Coverage Report
File Coverage
|
||||||||||||||||||||||||||||||||||||||||||||||||||
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
1 participant
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.
Description
Setting a custom base font via
--apkt-font-family(or the legacy--w3m-font-family) left every monospace piece of UI text unstyled — the WalletConnect "Copy link" button, wallet addresses, and amount inputs rendered in the browser default (serif) font while all regular text correctly switched to the custom font.Root cause. The regular font is themeable through
--apkt-fontFamily-regular, whichThemeHelperUtiloverrides with the custom font. The mono font, however, was hardcoded toKHTekaMono(ThemeConstantsUtil→fontFamily.mono) with no corresponding CSS variable, so it could not be themed. On top of that the bundled@font-faceblocks are skipped when a custom font is set, sofont-family: KHTekaMonopointed at a family that was never loaded — with no generic fallback, the browser dropped to its default serif.Fix. Mono now resolves to:
so the common single-custom-font case keeps mono text styled, while the new
--apkt-font-family-monotheme variable still allows explicit monospace control:The bundled
KHTekaMono@font-faceis now gated on whether it is actually the effective mono font, mirroring how the regular faces are already gated. Default behavior with no custom font is unchanged.Type of change
Associated Issues
closes #5681
Showcase (Optional)
Before
After
Checklist