rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Split v2 theme into per-layer files

Browse Source 
Move each token layer of the v2 theme into its own file under
packages/ui/src/v2/theme (colors, typography, radius, shadows) and
reduce theme.css to an entry that imports them. The public import
path (@probo/ui/src/v2/theme.css) is unchanged, so adopters and the
docs keep working; this only improves navigability as the theme
grows. No token values change.

Signed-off-by: Émile Ré <emile@probo.com>
This commit is contained in:
Émile Ré
2026-06-17 17:29:53 +02:00
parent 48ff1b6ea7
commit e5fc522f61
5 changed files with 415 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

350
packages/ui/src/v2/theme.css
View File

@@ -14,345 +14,21 @@
*/
/*
* v2 color system — Radix 12-step scale
* v2 theme entry
*
* Each hue has 12 steps designed for specific use cases:
* Standalone Tailwind v4 theme for the v2 UI kit. An app opts in by importing
* this file instead of the v1 theme.css. Each token layer lives in its own
* file under ./theme; this entry just aggregates them.
*
* Step Use case
* ────── ──────────────────────────────────────
* 1 App background
* 2 Subtle background
* 3 UI element background
* 4 Hovered UI element background
* 5 Active / selected UI element background
* 6 Subtle borders and separators
* 7 UI element border and focus rings
* 8 Hovered UI element border
* 9 Solid backgrounds
* 10 Hovered solid backgrounds
* 11 Low-contrast text
* 12 High-contrast text
*
* Scales:
* sand — neutral (primary UI chrome)
* gold — warm accent neutral
* red — destructive / error
* green — success / positive
* amber — warning
* sky — informational
*
* Dark mode: toggle .dark on <html>. Radix dark imports handle the rest.
* P3 wide gamut: included automatically via @radix-ui/colors @supports blocks.
* colors.css Radix color scales (solid + sand alpha) + palette reset
* typography.css Inter font + type scale (text-1…9) + font weights
* radius.css radius scale (rounded-1…6)
* shadows.css elevation scale (shadow-1…6)
*
* Spacing intentionally stays on Tailwind's native scale (not tokenized).
* See contrib/claude/v2-colors.md for the full usage guide.
*/
/* ---------------------------------------------------------------------------
* Radix color imports (light → :root, dark → .dark)
*
* These define --sand-1 … --sand-12, --gold-1 … etc. as raw CSS variables.
* P3 wide-gamut overrides are included via @supports in each file.
* ------------------------------------------------------------------------- */
/* Inter — self-hosted variable font (family name: "Inter Variable") */
@import "@fontsource-variable/inter/index.css";
@import "@radix-ui/colors/sand.css";
@import "@radix-ui/colors/sand-dark.css";
@import "@radix-ui/colors/gold.css";
@import "@radix-ui/colors/gold-dark.css";
@import "@radix-ui/colors/red.css";
@import "@radix-ui/colors/red-dark.css";
@import "@radix-ui/colors/green.css";
@import "@radix-ui/colors/green-dark.css";
@import "@radix-ui/colors/amber.css";
@import "@radix-ui/colors/amber-dark.css";
@import "@radix-ui/colors/sky.css";
@import "@radix-ui/colors/sky-dark.css";
/* Alpha scales + black alpha — required by the Radix shadow definitions */
@import "@radix-ui/colors/sand-alpha.css";
@import "@radix-ui/colors/sand-dark-alpha.css";
@import "@radix-ui/colors/black-alpha.css";
/* ---------------------------------------------------------------------------
* Reset the default Tailwind palette
*
* v2 is a standalone theme: an app opts in by importing this file instead of
* the v1 theme.css. Wiping --color-* removes Tailwind's default palette so the
* only colors available are the v2 Radix scales below, plus the three base
* colors kept here. This must precede the @theme inline block so it does not
* wipe the scales registered after it.
* ------------------------------------------------------------------------- */
@theme {
--color-*: initial;
--color-transparent: transparent;
--color-black: #000000;
--color-white: #ffffff;
}
/* ---------------------------------------------------------------------------
* Register v2 color names with Tailwind (generates utility classes)
*
* Maps --sand-1 → --color-sand-1 so Tailwind generates bg-sand-1, text-sand-1,
* border-sand-1, etc. The `inline` keyword makes utilities reference
* var(--sand-1) directly, so light/dark switching at the Radix level
* propagates automatically.
* ------------------------------------------------------------------------- */
@theme inline {
/* sand */
--color-sand-1: var(--sand-1);
--color-sand-2: var(--sand-2);
--color-sand-3: var(--sand-3);
--color-sand-4: var(--sand-4);
--color-sand-5: var(--sand-5);
--color-sand-6: var(--sand-6);
--color-sand-7: var(--sand-7);
--color-sand-8: var(--sand-8);
--color-sand-9: var(--sand-9);
--color-sand-10: var(--sand-10);
--color-sand-11: var(--sand-11);
--color-sand-12: var(--sand-12);
/* sand alpha — translucent neutral (overlays, scrims, layered tints) */
--color-sand-a1: var(--sand-a1);
--color-sand-a2: var(--sand-a2);
--color-sand-a3: var(--sand-a3);
--color-sand-a4: var(--sand-a4);
--color-sand-a5: var(--sand-a5);
--color-sand-a6: var(--sand-a6);
--color-sand-a7: var(--sand-a7);
--color-sand-a8: var(--sand-a8);
--color-sand-a9: var(--sand-a9);
--color-sand-a10: var(--sand-a10);
--color-sand-a11: var(--sand-a11);
--color-sand-a12: var(--sand-a12);
/* gold */
--color-gold-1: var(--gold-1);
--color-gold-2: var(--gold-2);
--color-gold-3: var(--gold-3);
--color-gold-4: var(--gold-4);
--color-gold-5: var(--gold-5);
--color-gold-6: var(--gold-6);
--color-gold-7: var(--gold-7);
--color-gold-8: var(--gold-8);
--color-gold-9: var(--gold-9);
--color-gold-10: var(--gold-10);
--color-gold-11: var(--gold-11);
--color-gold-12: var(--gold-12);
/* red */
--color-red-1: var(--red-1);
--color-red-2: var(--red-2);
--color-red-3: var(--red-3);
--color-red-4: var(--red-4);
--color-red-5: var(--red-5);
--color-red-6: var(--red-6);
--color-red-7: var(--red-7);
--color-red-8: var(--red-8);
--color-red-9: var(--red-9);
--color-red-10: var(--red-10);
--color-red-11: var(--red-11);
--color-red-12: var(--red-12);
/* green */
--color-green-1: var(--green-1);
--color-green-2: var(--green-2);
--color-green-3: var(--green-3);
--color-green-4: var(--green-4);
--color-green-5: var(--green-5);
--color-green-6: var(--green-6);
--color-green-7: var(--green-7);
--color-green-8: var(--green-8);
--color-green-9: var(--green-9);
--color-green-10: var(--green-10);
--color-green-11: var(--green-11);
--color-green-12: var(--green-12);
/* amber */
--color-amber-1: var(--amber-1);
--color-amber-2: var(--amber-2);
--color-amber-3: var(--amber-3);
--color-amber-4: var(--amber-4);
--color-amber-5: var(--amber-5);
--color-amber-6: var(--amber-6);
--color-amber-7: var(--amber-7);
--color-amber-8: var(--amber-8);
--color-amber-9: var(--amber-9);
--color-amber-10: var(--amber-10);
--color-amber-11: var(--amber-11);
--color-amber-12: var(--amber-12);
/* sky */
--color-sky-1: var(--sky-1);
--color-sky-2: var(--sky-2);
--color-sky-3: var(--sky-3);
--color-sky-4: var(--sky-4);
--color-sky-5: var(--sky-5);
--color-sky-6: var(--sky-6);
--color-sky-7: var(--sky-7);
--color-sky-8: var(--sky-8);
--color-sky-9: var(--sky-9);
--color-sky-10: var(--sky-10);
--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 Variable", ui-sans-serif, system-ui, sans-serif;
/* Code/mono — Radix-style system stack. The design specifies Menlo, an
* Apple system font that is not self-hostable, so fall back per OS. */
--font-mono: "Menlo", "Consolas", "Liberation Mono", "Monaco", monospace;
--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;
}
/* ---------------------------------------------------------------------------
* Radius — Radix Themes radius scale (steps 1–6)
*
* Sourced from the "Probo Radix UI" Figma file, which defaults to the
* Radix "Medium" radius set. Exposed as rounded-1 … rounded-6, matching the
* numbered convention used for color and type.
*
* Step value rem
* ───── ────────────── ─────────
* 1 3px 0.1875rem
* 2 4px 0.25rem
* 3 6px 0.375rem
* 4 8px 0.5rem
* 5 12px 0.75rem
* 6 16px 1rem
*
* --radius-* is reset to initial so the v2 build exposes only the numeric
* Radix scale (the static rounded-none / rounded-full utilities are
* unaffected, as they are not theme-driven), mirroring the color and type
* resets above.
* ------------------------------------------------------------------------- */
@theme {
--radius-*: initial;
--radius-1: 0.1875rem;
--radius-2: 0.25rem;
--radius-3: 0.375rem;
--radius-4: 0.5rem;
--radius-5: 0.75rem;
--radius-6: 1rem;
}
/* ---------------------------------------------------------------------------
* Shadows — Radix Themes shadow scale (steps 1–6)
*
* Values taken from @radix-ui/themes (tokens/shadow.css), mapping Radix's
* neutral `gray` to the v2 neutral `sand`. Registered the same way as the
* color scale: `inline` so each utility keeps the var() references, and
* because every layer is built from alpha tokens (--sand-a*, --black-a*)
* that already flip light↔dark, shadow-1 … shadow-6 adapt to dark mode
* automatically from a single definition — no .dark overrides needed.
*
* --shadow-* is reset to initial first so the v2 build exposes only this
* numeric scale (not Tailwind's shadow-sm/md/lg).
* ------------------------------------------------------------------------- */
@theme {
--shadow-*: initial;
}
@theme inline {
--shadow-1:
inset 0 0 0 1px var(--sand-a5),
inset 0 1.5px 2px 0 var(--sand-a2),
inset 0 1.5px 2px 0 var(--black-a2);
--shadow-2:
0 0 0 1px var(--sand-a3),
0 0 0 0.5px var(--black-a1),
0 1px 1px 0 var(--sand-a2),
0 2px 1px -1px var(--black-a1),
0 1px 3px 0 var(--black-a1);
--shadow-3:
0 0 0 1px var(--sand-a3),
0 2px 3px -2px var(--sand-a3),
0 3px 12px -4px var(--black-a2),
0 4px 16px -8px var(--black-a2);
--shadow-4:
0 0 0 1px var(--sand-a3),
0 8px 40px var(--black-a1),
0 12px 32px -16px var(--sand-a3);
--shadow-5:
0 0 0 1px var(--sand-a3),
0 12px 60px var(--black-a3),
0 12px 32px -16px var(--sand-a5);
--shadow-6:
0 0 0 1px var(--sand-a3),
0 12px 60px var(--black-a3),
0 16px 64px var(--sand-a2),
0 16px 36px -20px var(--sand-a7);
}
@import "./theme/colors.css";
@import "./theme/typography.css";
@import "./theme/radius.css";
@import "./theme/shadows.css";

196
packages/ui/src/v2/theme/colors.css Normal file
View File

@@ -0,0 +1,196 @@
/* Copyright (c) 2026 Probo Inc <hello@probo.com>.
*
* Permission to use, copy, modify, and/or distribute this software for any
* purpose with or without fee is hereby granted, provided that the above
* copyright notice and this permission notice appear in all copies.
*
* THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
* REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
* AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
* INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
* LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
* OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
* PERFORMANCE OF THIS SOFTWARE.
*/
/*
* v2 color system — Radix 12-step scale
*
* Each hue has 12 steps designed for specific use cases:
*
* Step Use case
* ────── ──────────────────────────────────────
* 1 App background
* 2 Subtle background
* 3 UI element background
* 4 Hovered UI element background
* 5 Active / selected UI element background
* 6 Subtle borders and separators
* 7 UI element border and focus rings
* 8 Hovered UI element border
* 9 Solid backgrounds
* 10 Hovered solid backgrounds
* 11 Low-contrast text
* 12 High-contrast text
*
* Scales:
* sand — neutral (primary UI chrome)
* gold — warm accent neutral
* red — destructive / error
* green — success / positive
* amber — warning
* sky — informational
*
* Dark mode: toggle .dark on <html>. Radix dark imports handle the rest.
* P3 wide gamut: included automatically via @radix-ui/colors @supports blocks.
*
* See contrib/claude/v2-colors.md for the full usage guide.
*/
/* ---------------------------------------------------------------------------
* Radix color imports (light → :root, dark → .dark)
*
* These define --sand-1 … --sand-12, --gold-1 … etc. as raw CSS variables.
* P3 wide-gamut overrides are included via @supports in each file.
* ------------------------------------------------------------------------- */
@import "@radix-ui/colors/sand.css";
@import "@radix-ui/colors/sand-dark.css";
@import "@radix-ui/colors/gold.css";
@import "@radix-ui/colors/gold-dark.css";
@import "@radix-ui/colors/red.css";
@import "@radix-ui/colors/red-dark.css";
@import "@radix-ui/colors/green.css";
@import "@radix-ui/colors/green-dark.css";
@import "@radix-ui/colors/amber.css";
@import "@radix-ui/colors/amber-dark.css";
@import "@radix-ui/colors/sky.css";
@import "@radix-ui/colors/sky-dark.css";
/* Alpha scales + black alpha — power the sand-a* utilities and the shadows. */
@import "@radix-ui/colors/sand-alpha.css";
@import "@radix-ui/colors/sand-dark-alpha.css";
@import "@radix-ui/colors/black-alpha.css";
/* ---------------------------------------------------------------------------
* Reset the default Tailwind palette
*
* v2 is a standalone theme: an app opts in by importing the v2 theme instead
* of the v1 theme.css. Wiping --color-* removes Tailwind's default palette so
* the only colors available are the v2 Radix scales below, plus the three base
* colors kept here. This must precede the @theme inline block so it does not
* wipe the scales registered after it.
* ------------------------------------------------------------------------- */
@theme {
--color-*: initial;
--color-transparent: transparent;
--color-black: #000000;
--color-white: #ffffff;
}
/* ---------------------------------------------------------------------------
* Register v2 color names with Tailwind (generates utility classes)
*
* Maps --sand-1 → --color-sand-1 so Tailwind generates bg-sand-1, text-sand-1,
* border-sand-1, etc. The `inline` keyword makes utilities reference
* var(--sand-1) directly, so light/dark switching at the Radix level
* propagates automatically.
* ------------------------------------------------------------------------- */
@theme inline {
/* sand */
--color-sand-1: var(--sand-1);
--color-sand-2: var(--sand-2);
--color-sand-3: var(--sand-3);
--color-sand-4: var(--sand-4);
--color-sand-5: var(--sand-5);
--color-sand-6: var(--sand-6);
--color-sand-7: var(--sand-7);
--color-sand-8: var(--sand-8);
--color-sand-9: var(--sand-9);
--color-sand-10: var(--sand-10);
--color-sand-11: var(--sand-11);
--color-sand-12: var(--sand-12);
/* sand alpha — translucent neutral (overlays, scrims, layered tints) */
--color-sand-a1: var(--sand-a1);
--color-sand-a2: var(--sand-a2);
--color-sand-a3: var(--sand-a3);
--color-sand-a4: var(--sand-a4);
--color-sand-a5: var(--sand-a5);
--color-sand-a6: var(--sand-a6);
--color-sand-a7: var(--sand-a7);
--color-sand-a8: var(--sand-a8);
--color-sand-a9: var(--sand-a9);
--color-sand-a10: var(--sand-a10);
--color-sand-a11: var(--sand-a11);
--color-sand-a12: var(--sand-a12);
/* gold */
--color-gold-1: var(--gold-1);
--color-gold-2: var(--gold-2);
--color-gold-3: var(--gold-3);
--color-gold-4: var(--gold-4);
--color-gold-5: var(--gold-5);
--color-gold-6: var(--gold-6);
--color-gold-7: var(--gold-7);
--color-gold-8: var(--gold-8);
--color-gold-9: var(--gold-9);
--color-gold-10: var(--gold-10);
--color-gold-11: var(--gold-11);
--color-gold-12: var(--gold-12);
/* red */
--color-red-1: var(--red-1);
--color-red-2: var(--red-2);
--color-red-3: var(--red-3);
--color-red-4: var(--red-4);
--color-red-5: var(--red-5);
--color-red-6: var(--red-6);
--color-red-7: var(--red-7);
--color-red-8: var(--red-8);
--color-red-9: var(--red-9);
--color-red-10: var(--red-10);
--color-red-11: var(--red-11);
--color-red-12: var(--red-12);
/* green */
--color-green-1: var(--green-1);
--color-green-2: var(--green-2);
--color-green-3: var(--green-3);
--color-green-4: var(--green-4);
--color-green-5: var(--green-5);
--color-green-6: var(--green-6);
--color-green-7: var(--green-7);
--color-green-8: var(--green-8);
--color-green-9: var(--green-9);
--color-green-10: var(--green-10);
--color-green-11: var(--green-11);
--color-green-12: var(--green-12);
/* amber */
--color-amber-1: var(--amber-1);
--color-amber-2: var(--amber-2);
--color-amber-3: var(--amber-3);
--color-amber-4: var(--amber-4);
--color-amber-5: var(--amber-5);
--color-amber-6: var(--amber-6);
--color-amber-7: var(--amber-7);
--color-amber-8: var(--amber-8);
--color-amber-9: var(--amber-9);
--color-amber-10: var(--amber-10);
--color-amber-11: var(--amber-11);
--color-amber-12: var(--amber-12);
/* sky */
--color-sky-1: var(--sky-1);
--color-sky-2: var(--sky-2);
--color-sky-3: var(--sky-3);
--color-sky-4: var(--sky-4);
--color-sky-5: var(--sky-5);
--color-sky-6: var(--sky-6);
--color-sky-7: var(--sky-7);
--color-sky-8: var(--sky-8);
--color-sky-9: var(--sky-9);
--color-sky-10: var(--sky-10);
--color-sky-11: var(--sky-11);
--color-sky-12: var(--sky-12);
}

46
packages/ui/src/v2/theme/radius.css Normal file
View File

@@ -0,0 +1,46 @@
/* Copyright (c) 2026 Probo Inc <hello@probo.com>.
*
* Permission to use, copy, modify, and/or distribute this software for any
* purpose with or without fee is hereby granted, provided that the above
* copyright notice and this permission notice appear in all copies.
*
* THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
* REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
* AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
* INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
* LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
* OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
* PERFORMANCE OF THIS SOFTWARE.
*/
/* ---------------------------------------------------------------------------
* Radius — Radix Themes radius scale (steps 1–6)
*
* Sourced from the "Probo Radix UI" Figma file, which defaults to the
* Radix "Medium" radius set. Exposed as rounded-1 … rounded-6, matching the
* numbered convention used for color and type.
*
* Step value rem
* ───── ────────────── ─────────
* 1 3px 0.1875rem
* 2 4px 0.25rem
* 3 6px 0.375rem
* 4 8px 0.5rem
* 5 12px 0.75rem
* 6 16px 1rem
*
* --radius-* is reset to initial so the v2 build exposes only the numeric
* Radix scale (the static rounded-none / rounded-full utilities are
* unaffected, as they are not theme-driven), mirroring the color and type
* resets in the other layers.
* ------------------------------------------------------------------------- */
@theme {
--radius-*: initial;
--radius-1: 0.1875rem;
--radius-2: 0.25rem;
--radius-3: 0.375rem;
--radius-4: 0.5rem;
--radius-5: 0.75rem;
--radius-6: 1rem;
}

64
packages/ui/src/v2/theme/shadows.css Normal file
View File

@@ -0,0 +1,64 @@
/* Copyright (c) 2026 Probo Inc <hello@probo.com>.
*
* Permission to use, copy, modify, and/or distribute this software for any
* purpose with or without fee is hereby granted, provided that the above
* copyright notice and this permission notice appear in all copies.
*
* THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
* REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
* AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
* INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
* LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
* OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
* PERFORMANCE OF THIS SOFTWARE.
*/
/* ---------------------------------------------------------------------------
* Shadows — Radix Themes shadow scale (steps 1–6)
*
* Values taken from @radix-ui/themes (tokens/shadow.css), mapping Radix's
* neutral `gray` to the v2 neutral `sand`. Registered the same way as the
* color scale: `inline` so each utility keeps the var() references, and
* because every layer is built from alpha tokens (--sand-a*, --black-a*)
* that already flip light↔dark, shadow-1 … shadow-6 adapt to dark mode
* automatically from a single definition — no .dark overrides needed.
*
* The alpha tokens these reference are imported in colors.css.
*
* --shadow-* is reset to initial first so the v2 build exposes only this
* numeric scale (not Tailwind's shadow-sm/md/lg).
* ------------------------------------------------------------------------- */
@theme {
--shadow-*: initial;
}
@theme inline {
--shadow-1:
inset 0 0 0 1px var(--sand-a5),
inset 0 1.5px 2px 0 var(--sand-a2),
inset 0 1.5px 2px 0 var(--black-a2);
--shadow-2:
0 0 0 1px var(--sand-a3),
0 0 0 0.5px var(--black-a1),
0 1px 1px 0 var(--sand-a2),
0 2px 1px -1px var(--black-a1),
0 1px 3px 0 var(--black-a1);
--shadow-3:
0 0 0 1px var(--sand-a3),
0 2px 3px -2px var(--sand-a3),
0 3px 12px -4px var(--black-a2),
0 4px 16px -8px var(--black-a2);
--shadow-4:
0 0 0 1px var(--sand-a3),
0 8px 40px var(--black-a1),
0 12px 32px -16px var(--sand-a3);
--shadow-5:
0 0 0 1px var(--sand-a3),
0 12px 60px var(--black-a3),
0 12px 32px -16px var(--sand-a5);
--shadow-6:
0 0 0 1px var(--sand-a3),
0 12px 60px var(--black-a3),
0 16px 64px var(--sand-a2),
0 16px 36px -20px var(--sand-a7);
}

96
packages/ui/src/v2/theme/typography.css Normal file
View File

@@ -0,0 +1,96 @@
/* Copyright (c) 2026 Probo Inc <hello@probo.com>.
*
* Permission to use, copy, modify, and/or distribute this software for any
* purpose with or without fee is hereby granted, provided that the above
* copyright notice and this permission notice appear in all copies.
*
* THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
* REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
* AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
* INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
* LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
* OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
* PERFORMANCE OF THIS SOFTWARE.
*/
/* Inter — self-hosted variable font (family name: "Inter Variable") */
@import "@fontsource-variable/inter/index.css";
/* ---------------------------------------------------------------------------
* 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 in colors.css.
* ------------------------------------------------------------------------- */
@theme {
--font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
/* Code/mono — Radix-style system stack. The design specifies Menlo, an
* Apple system font that is not self-hostable, so fall back per OS. */
--font-mono: "Menlo", "Consolas", "Liberation Mono", "Monaco", monospace;
--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;
}