style: introduce modular typographic scale tokens and replace literal font sizes - #90
Open
harryjupiter148 wants to merge 5 commits into
Open
style: introduce modular typographic scale tokens and replace literal font sizes#90harryjupiter148 wants to merge 5 commits into
harryjupiter148 wants to merge 5 commits into
Conversation
…and RSS feed" This reverts commit dbab9d0.
Contributor
|
@harryjupiter148 , please fix failing ci |
5 tasks
axe-core fails CI on any route with no <h1>. All seven inner pages were using <h2> as their top-level heading. Promoting each to <h1> clears the WCAG page-has-heading-one rule. globals.css updated to cover .section h1 alongside the existing h2 rule so styling is unchanged.
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
2 participants
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.
What this changes
Introduces a 9-step modular typographic scale (
--text-2xsthrough--text-3xl) defined as CSS custom properties with paired line-heights (--lh-*) and default font weights (--fw-*) in globals.css. Replaces all one-off font size literals across globals.css and charts.module.css, unifies hero display typography under fluidclamp(), introduces a--measuretoken (65ch) with a.proseutility for long-form reading layouts, and documents the scale and contributor usage guidelines directly in:root.Why
Font sizes were scattered across stylesheets as ad-hoc, uncoordinated literals (
0.92rem,0.78rem,1.05rem, multiple inconsistentclamp()rules), resulting in a gradual loss of vertical rhythm and typography hierarchy. Establishing fixed steps for body/UI and fluid tokens for display ensures visual consistency and maintainability before upcoming dense dashboard components land.How it was verified
font-sizedeclarations remain (font-size: \s*([\d.]+rem|[\d.]+px|clamp\([^)]+\))returns 0 matches).Risk
Low. This is a purely visual CSS refactoring touching only presentation layers (global layout, typography tokens, and chart styling). No authentication, contract logic, wallet interaction, or state management code was modified. Minor sub-pixel text metric shifts (≤1px) may occur on chart SVG labels and table elements due to scale normalization.
Related Issues
Closes #69