Skip to content

fix(type-scale): tokenize mode-home hero sizes so check:type-scale --strict passes#512

Merged
BigSimmo merged 1 commit into
mainfrom
claude/type-scale-mode-home-tokens
Jul 12, 2026
Merged

fix(type-scale): tokenize mode-home hero sizes so check:type-scale --strict passes#512
BigSimmo merged 1 commit into
mainfrom
claude/type-scale-mode-home-tokens

Conversation

@BigSimmo

Copy link
Copy Markdown
Owner

What & why

On main, npm run verify:cheap is red at the check:type-scale step (node scripts/check-type-scale.mjs --strict): src/components/mode-home-template.tsx carries 8 arbitrary text-[…rem] font-size utilities (the compact mode-home hero + action-card scale) that bypass the design type scale.

This tokenizes them into size-only named @theme steps in src/app/globals.css at the exact rem values and swaps the utilities to the named steps.

arbitrary named step px
text-[0.8rem] text-xs-plus 12.8
text-[0.95rem] ×2 text-sm-plus 15.2
text-[0.98rem] text-base-sub 15.7
text-[1.45rem] text-2xl-sub 23.2
text-[1.85rem] text-3xl-sub 29.6
text-[1.9rem] text-3xl-plus 30.4
text-[2.15rem] text-4xl-minus 34.4

Pixel parity: each named step equals the rem value it replaces and stays size-only (no baked line-height, matching the existing --text-*-minus block), so the rendered hero is byte-for-byte unchanged. This is a token-hygiene refactor, not a visual change.

Naming follows the existing -minus/-plus convention (just below/above the nearest Tailwind anchor); -sub denotes a second "just under <anchor>" step where that anchor's -minus is already taken at a different size.

Result

  • check:type-scale --strict0 hits / 0 files (was 8 hits / 1 file); verify:cheap green at that step.
  • Refreshes the type-scale ratchet note in docs/process-hardening.md (the recorded 20/9 baseline was stale).

Verification

  • node scripts/check-type-scale.mjs --strict → 0 hits, exit 0.
  • prettier --check clean on all three files.
  • No text-[<n>rem] remain in src.
  • TSX change is className string-literals only (type-inert); Tailwind utility generation uses the identical @theme --text-* path as the existing text-*-minus steps and is validated by CI's build/UI gates.

Clinical governance preflight

N/A — no ingestion, answer generation, retrieval/ranking, source rendering, document access, privacy, production env, or clinical-output surface is touched. UI type-scale tokens only.

🤖 Generated with Claude Code

…strict passes

The compact mode-home hero + action-card scale in mode-home-template.tsx used
8 arbitrary text-[…rem] font-size utilities, which fail
scripts/check-type-scale.mjs --strict — the gate wired into verify:cheap. So
verify:cheap was red on main at the check:type-scale step.

Add size-only named @theme steps in globals.css (--text-xs-plus …
--text-4xl-minus) at the exact rem values, and swap the arbitrary utilities for
them. Pixel parity: the rendered hero is byte-for-byte unchanged.

Also refresh the type-scale ratchet note in docs/process-hardening.md (now
0 hits / 0 files; strict gate already live in verify:cheap).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@supabase

supabase Bot commented Jul 12, 2026

Copy link
Copy Markdown

This pull request has been ignored for the connected project sjrfecxgysukkwxsowpy because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.


Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

@coderabbitai

coderabbitai Bot commented Jul 12, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Walkthrough

Updated the type-scale documentation and strict verification status, added named typography tokens in the theme, and applied the new responsive tokens to mode-home hero and action text.

Changes

Type-scale enforcement and mode-home typography

Layer / File(s) Summary
Type-scale tokens and strict verification
src/app/globals.css, docs/process-hardening.md
Documented mode-home type-scale steps, added seven named @theme font-size tokens, and recorded strict type-scale enforcement through verify:cheap.
Mode-home responsive typography
src/components/mode-home-template.tsx
Updated hero, action title, and action description classes to use the new responsive typography tokens while preserving compact behavior.

Estimated code review effort: 2 (Simple) | ~10 minutes


Caution

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

  • Ignore

❌ Failed checks (1 error)

Check name Status Explanation Resolution
Verification Claims ❌ Error PR notes include vague verification claims (“validated by CI’s build/UI gates”, “No text-[rem] remain in src”) without a named command/result. Rewrite every pass claim as Ran <exact command>: <result> or Not run: <reason>, and avoid generic CI/validation wording.
✅ Passed checks (10 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly states the main change: tokenizing mode-home hero sizes to satisfy the strict type-scale check.
Description check ✅ Passed The description covers the change rationale, results, and verification, though it doesn't follow the template's exact Summary/Notes checklist format.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Generated And Sensitive Files ✅ Passed Only docs, CSS, and TSX were changed; scans found no secrets, .env files, build outputs, caches, or node_modules artifacts.
Risky Git Or Deployment Actions ✅ Passed Patch only tokenizes type-scale utilities and updates a ratchet note; it adds no force-push/reset/clean/delete/rebase/deploy guidance.
Supabase Project And Schema Safety ✅ Passed Only docs/CSS/TSX changed; no Supabase config, migrations, schema, RLS, or env example files were touched.
Runtime And Package Manager Integrity ✅ Passed PASS: Diff only touches docs/CSS/TSX; no package.json/lockfile/.npmrc changes. Repo still pins npm@11.17.0, Node 24.x, and engine-strict=true.
Api Route Failure Handling ✅ Passed Only docs/CSS/TSX typography tokenization changed; no API routes, server actions, RAG/search/ingestion, or provider integrations were touched.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch claude/type-scale-mode-home-tokens
✨ Simplify code
  • Create PR with simplified code
  • Commit simplified code in branch claude/type-scale-mode-home-tokens

Comment @coderabbitai help to get the list of available commands.

@BigSimmo
BigSimmo enabled auto-merge (squash) July 12, 2026 15:25
@BigSimmo
BigSimmo merged commit 9da527c into main Jul 12, 2026
15 checks passed
BigSimmo added a commit that referenced this pull request Jul 12, 2026
* refactor(type-scale): drop dead mode-home tokens superseded by --text-hero

PR #517's hybrid-fluid mode-home hero (fluid `--text-hero` clamp + `-minus` card
tokens) replaced the only consumer of the stepped named-token set that #512 added
for the same off-scale values. Those 7 tokens (--text-xs-plus, -sm-plus, -base-sub,
-2xl-sub, -3xl-sub, -3xl-plus, -4xl-minus) are now unused everywhere in src, so
remove them and their orphaned scale comment — reconciling the two parallel token
sets left after the #517/#512 merge.

Verify: prettier, check:type-scale --strict, check:icon-scale, lint, typecheck, and
the globals.css merge-artifact guard test all green; the removed tokens have zero
references in src (git grep).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* docs: reconcile retired mode-home tokens

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
@BigSimmo
BigSimmo deleted the claude/type-scale-mode-home-tokens branch July 13, 2026 16:33
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