Add Radix typography scale to v2 theme
Define the v2 typography tokens sourced from the Probo Radix UI Figma file: font sizes 1-9 with paired line-height and letter-spacing, the Inter sans family, and the light/regular/ medium/bold weights, exposed as text-1 ... text-9 utilities. Reset Tailwind's default t-shirt type scale (--text-*: initial) so a v2 build exposes only the numeric Radix scale, mirroring how the color block wipes --color-*. Letter-spacing is kept in em so tracking scales with font size, per the Radix specification. Signed-off-by: Émile Ré <emile@probo.com>
This commit is contained in:
@@ -175,3 +175,78 @@
|
||||
--color-sky-11: var(--sky-11);
|
||||
--color-sky-12: var(--sky-12);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
* Typography — Radix Themes type scale (sizes 1–9)
|
||||
*
|
||||
* Sourced from the "Probo Radix UI" Figma file (Text component). Like the
|
||||
* color system, v2 uses Radix's numbered scale rather than named t-shirt
|
||||
* sizes: utilities are text-1 … text-9 (paired with their line-height and
|
||||
* letter-spacing), mirroring how sand-1 … sand-12 work for color.
|
||||
*
|
||||
* Step font-size line-height letter-spacing
|
||||
* ───── ───────────── ──────────── ──────────────
|
||||
* 1 0.75rem 12px 1rem 16px 0.0025em
|
||||
* 2 0.875rem 14px 1.25rem 20px 0
|
||||
* 3 1rem 16px 1.5rem 24px 0
|
||||
* 4 1.125rem 18px 1.625rem 26px -0.0025em
|
||||
* 5 1.25rem 20px 1.75rem 28px -0.005em
|
||||
* 6 1.5rem 24px 1.875rem 30px -0.00625em
|
||||
* 7 1.75rem 28px 2.25rem 36px -0.0075em
|
||||
* 8 2.1875rem 35px 2.5rem 40px -0.01em
|
||||
* 9 3.75rem 60px 3.75rem 60px -0.025em
|
||||
*
|
||||
* Letter-spacing is kept in em so tracking scales with the font size, per
|
||||
* the Radix specification (Figma stores the same values resolved at 16px,
|
||||
* e.g. -0.005em → -0.08px).
|
||||
*
|
||||
* --text-* is reset to initial so the only type scale available in a v2
|
||||
* build is the Radix one, the same way --color-* is wiped above.
|
||||
* ------------------------------------------------------------------------- */
|
||||
@theme {
|
||||
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
||||
|
||||
--text-*: initial;
|
||||
|
||||
--text-1: 0.75rem;
|
||||
--text-1--line-height: 1rem;
|
||||
--text-1--letter-spacing: 0.0025em;
|
||||
|
||||
--text-2: 0.875rem;
|
||||
--text-2--line-height: 1.25rem;
|
||||
--text-2--letter-spacing: 0em;
|
||||
|
||||
--text-3: 1rem;
|
||||
--text-3--line-height: 1.5rem;
|
||||
--text-3--letter-spacing: 0em;
|
||||
|
||||
--text-4: 1.125rem;
|
||||
--text-4--line-height: 1.625rem;
|
||||
--text-4--letter-spacing: -0.0025em;
|
||||
|
||||
--text-5: 1.25rem;
|
||||
--text-5--line-height: 1.75rem;
|
||||
--text-5--letter-spacing: -0.005em;
|
||||
|
||||
--text-6: 1.5rem;
|
||||
--text-6--line-height: 1.875rem;
|
||||
--text-6--letter-spacing: -0.00625em;
|
||||
|
||||
--text-7: 1.75rem;
|
||||
--text-7--line-height: 2.25rem;
|
||||
--text-7--letter-spacing: -0.0075em;
|
||||
|
||||
--text-8: 2.1875rem;
|
||||
--text-8--line-height: 2.5rem;
|
||||
--text-8--letter-spacing: -0.01em;
|
||||
|
||||
--text-9: 3.75rem;
|
||||
--text-9--line-height: 3.75rem;
|
||||
--text-9--letter-spacing: -0.025em;
|
||||
|
||||
/* Font weights — Radix "text" styles (light / regular / medium / bold) */
|
||||
--font-weight-light: 300;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-bold: 700;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user