From e5fc522f6107fb321554ee7a2844af6f51757396 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= Date: Wed, 17 Jun 2026 17:29:53 +0200 Subject: [PATCH] Split v2 theme into per-layer files MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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é --- packages/ui/src/v2/theme.css | 350 +----------------------- packages/ui/src/v2/theme/colors.css | 196 +++++++++++++ packages/ui/src/v2/theme/radius.css | 46 ++++ packages/ui/src/v2/theme/shadows.css | 64 +++++ packages/ui/src/v2/theme/typography.css | 96 +++++++ 5 files changed, 415 insertions(+), 337 deletions(-) create mode 100644 packages/ui/src/v2/theme/colors.css create mode 100644 packages/ui/src/v2/theme/radius.css create mode 100644 packages/ui/src/v2/theme/shadows.css create mode 100644 packages/ui/src/v2/theme/typography.css diff --git a/packages/ui/src/v2/theme.css b/packages/ui/src/v2/theme.css index cc8d22fba..aac8ea2bd 100644 --- a/packages/ui/src/v2/theme.css +++ b/packages/ui/src/v2/theme.css @@ -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 . 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"; diff --git a/packages/ui/src/v2/theme/colors.css b/packages/ui/src/v2/theme/colors.css new file mode 100644 index 000000000..7e3396c57 --- /dev/null +++ b/packages/ui/src/v2/theme/colors.css @@ -0,0 +1,196 @@ +/* Copyright (c) 2026 Probo Inc . + * + * 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 . 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); +} diff --git a/packages/ui/src/v2/theme/radius.css b/packages/ui/src/v2/theme/radius.css new file mode 100644 index 000000000..2dfa37038 --- /dev/null +++ b/packages/ui/src/v2/theme/radius.css @@ -0,0 +1,46 @@ +/* Copyright (c) 2026 Probo Inc . + * + * 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; +} diff --git a/packages/ui/src/v2/theme/shadows.css b/packages/ui/src/v2/theme/shadows.css new file mode 100644 index 000000000..05857f5de --- /dev/null +++ b/packages/ui/src/v2/theme/shadows.css @@ -0,0 +1,64 @@ +/* Copyright (c) 2026 Probo Inc . + * + * 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); +} diff --git a/packages/ui/src/v2/theme/typography.css b/packages/ui/src/v2/theme/typography.css new file mode 100644 index 000000000..231fd494e --- /dev/null +++ b/packages/ui/src/v2/theme/typography.css @@ -0,0 +1,96 @@ +/* Copyright (c) 2026 Probo Inc . + * + * 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; +}