CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Adopt remaining typography token classes (CR-24)

Browse Source 
Map exact size/weight/line-height combos onto existing text-* utilities across cards, sections, navigation, modals, controls, and create-flow. Leave unmappable combos hardcoded for design review.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
adilallo
2026-08-17 11:40:10 -06:00
co-authored by Cursor
parent cb0adf2049
commit 2321a1e761
75 changed files with 229 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(dev)/components-preview/page.tsx
+13 -13
View File
@@ -45,7 +45,7 @@ export default function ComponentsPreview() {
<h1 className="font-bricolage-grotesque text-[48px] font-bold leading-[56px] text-[var(--color-content-default-primary)]">
Component Preview
</h1>
<p className="font-inter text-[18px] leading-[24px] text-[var(--color-content-default-secondary)]">
<p className="text-[18px] leading-[24px] text-[var(--color-content-default-secondary)]">
Navigation Link (Figma 21861:21428) and List (21863:45631 / 45493 /
4405) with ListEntry (21844:4118). Use Tab and hover to review
states.
@@ -53,12 +53,12 @@ export default function ComponentsPreview() {
</header>
<section className="space-y-[var(--spacing-scale-016)]">
<h2 className="font-bricolage-grotesque text-[32px] font-bold leading-[40px] text-[var(--color-content-default-primary)]">
<h2 className="font-bricolage-grotesque text-large-heading text-[var(--color-content-default-primary)]">
Link
</h2>
<div className="flex flex-col gap-8 rounded-[var(--radius-300,12px)] bg-[var(--color-surface-default-secondary)] p-[var(--spacing-scale-032)]">
<div>
<p className="mb-4 font-inter text-sm text-[var(--color-content-default-tertiary)]">
<p className="mb-4 text-small-paragraph text-[var(--color-content-default-tertiary)]">
Light surface
</p>
<div className="flex flex-col gap-4 rounded-lg bg-white p-6">
@@ -105,7 +105,7 @@ export default function ComponentsPreview() {
</div>
<div>
<p className="mb-4 font-inter text-sm text-[var(--color-content-default-tertiary)]">
<p className="mb-4 text-small-paragraph text-[var(--color-content-default-tertiary)]">
Dark surface
</p>
<div className="flex flex-col gap-4 rounded-lg bg-[var(--color-gray-800)] p-6">
@@ -154,22 +154,22 @@ export default function ComponentsPreview() {
</section>
<section className="space-y-[var(--spacing-scale-016)]">
<h2 className="font-bricolage-grotesque text-[32px] font-bold leading-[40px] text-[var(--color-content-default-primary)]">
<h2 className="font-bricolage-grotesque text-large-heading text-[var(--color-content-default-primary)]">
Divider
</h2>
<p className="font-inter text-sm text-[var(--color-content-default-tertiary)]">
<p className="text-small-paragraph text-[var(--color-content-default-tertiary)]">
Utility / Divider (450:1941). List rows use the Content line; Menu is
slightly higher-contrast.
</p>
<div className="max-w-md space-y-4">
<div>
<p className="mb-1 font-inter text-xs text-[var(--color-content-default-tertiary)]">
<p className="mb-1 text-x-small-paragraph text-[var(--color-content-default-tertiary)]">
Content
</p>
<Divider type="content" orientation="horizontal" />
</div>
<div>
<p className="mb-1 font-inter text-xs text-[var(--color-content-default-tertiary)]">
<p className="mb-1 text-x-small-paragraph text-[var(--color-content-default-tertiary)]">
Menu
</p>
<Divider type="menu" orientation="horizontal" />
@@ -178,16 +178,16 @@ export default function ComponentsPreview() {
</section>
<section className="space-y-[var(--spacing-scale-024)]">
<h2 className="font-bricolage-grotesque text-[32px] font-bold leading-[40px] text-[var(--color-content-default-primary)]">
<h2 className="font-bricolage-grotesque text-large-heading text-[var(--color-content-default-primary)]">
List
</h2>
<p className="font-inter text-sm text-[var(--color-content-default-tertiary)]">
<p className="text-small-paragraph text-[var(--color-content-default-tertiary)]">
List frame: S (21863:45631), M (21863:45493), L (21844:4405). Row:
ListEntry (21844:4118).
</p>
<div className="space-y-[var(--spacing-scale-024)]">
<div>
<h3 className="mb-2 font-inter text-sm font-medium text-[var(--color-content-default-secondary)]">
<h3 className="mb-2 text-sm font-medium text-[var(--color-content-default-secondary)]">
Small
</h3>
<div className="mx-auto max-w-[1044px]">
@@ -195,7 +195,7 @@ export default function ComponentsPreview() {
</div>
</div>
<div>
<h3 className="mb-2 font-inter text-sm font-medium text-[var(--color-content-default-secondary)]">
<h3 className="mb-2 text-sm font-medium text-[var(--color-content-default-secondary)]">
Medium
</h3>
<div className="mx-auto max-w-[1044px]">
@@ -203,7 +203,7 @@ export default function ComponentsPreview() {
</div>
</div>
<div>
<h3 className="mb-2 font-inter text-sm font-medium text-[var(--color-content-default-secondary)]">
<h3 className="mb-2 text-sm font-medium text-[var(--color-content-default-secondary)]">
Large
</h3>
<div className="mx-auto max-w-[1590px]">