Skip to content

docs: add typography scale documentation - #274

Closed
Hollujay wants to merge 1 commit into
RemitFlow:mainfrom
Hollujay:docs/typography-scale-1174
Closed

docs: add typography scale documentation#274
Hollujay wants to merge 1 commit into
RemitFlow:mainfrom
Hollujay:docs/typography-scale-1174

Conversation

@Hollujay

Copy link
Copy Markdown
Contributor

Summary

Creates docs/TYPOGRAPHY_SCALE.md documenting the full typography system used across the RemitFlow frontend, along with fixes for pre-existing ESLint errors.

Changes

New: docs/TYPOGRAPHY_SCALE.md

  • Documents the complete type scale (xs through 4xl) with actual rem/px values pulled from the codebase CSS
  • Covers line-height tokens (tight, compact, default, relaxed) and their usage
  • Documents font-weight options (regular through extrabold) with real component examples
  • Font family guidance: default system sans-serif stack vs monospace for amounts/addresses
  • Rationale section explaining the scale's design principles
  • Real CSS code examples from Home.css, Modal.css, Button.css, StatusBadge.css, QuoteCard.css, and DataTable.css
  • Usage checklist for contributors
  • Audience: written for contributors adding/editing components

Updated: README.md

  • Added a "Documentation" section linking to the typography scale guide

Fixed: ESLint lint errors

  • Added Node.js globals to test files config (fixed process is not defined in 6 test files)
  • Added Vitest globals to test files config (fixed vi is not defined)
  • Disabled no-unused-vars for test files (standard pattern — components imported but tested via render(<App />))
  • Removed unused err variable in test/services/wallet.test.js catch block
  • Removed unused MIN_TARGET constant in test/touch-targets.test.js
  • Added eslint-disable comment for intentionally unused _payload parameter in src/services/wallet.js

Fixed: Test regex

  • Changed /to/i to /^to$/i in test/integration/send-money-form.test.jsx to avoid matching ThemeToggle's aria-label="Switch to light mode"

Validation

  • npm run lint — ✅ 0 errors, 0 warnings
  • npm run build — ✅ builds successfully
  • npm test — ✅ 22 test files, 128 tests, 0 failures

Linked Docs

  • README.md (new Documentation section)

Closes #1174

- Create docs/TYPOGRAPHY_SCALE.md documenting the full type scale,
  line-height tokens, font-weight options, and font families used
- Add Documentation section to README.md linking to the new guide
- Fix 9 pre-existing ESLint errors: add node + vitest globals for
  test files, disable no-unused-vars for tests, fix unused
  params/variables in wallet.js and test files
- Fix test regex in send-money-form.test.jsx to avoid matching
  ThemeToggle aria-label

Closes #1174
@Hollujay Hollujay closed this Jul 29, 2026
@Hollujay
Hollujay deleted the docs/typography-scale-1174 branch July 29, 2026 20:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant