From 7aaaac3af83020e00a9e520b62e5f1eeaccef9ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= Date: Wed, 17 Jun 2026 17:54:45 +0200 Subject: [PATCH] Split v2 shadows into drop and inset scales MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Make shadow-1 a subtle drop shadow instead of Radix's inset one, so shadow-1 ... shadow-6 form a single composable drop-elevation ramp in Tailwind's --tw-shadow slot. Steps 2-6 remain the Radix shadows (gray mapped to sand). Add a numeric inset-shadow-1 ... inset-shadow-3 ramp in the separate inset-shadow-* slot, mirroring the depth of Tailwind's 2xs/xs/sm defaults but sand-tinted so it adapts to dark mode. Reset both --shadow-* and --inset-shadow-* so only the v2 scales are exposed; inset-shadow-none stays available as a static utility. Signed-off-by: Émile Ré --- packages/ui/src/v2/theme/shadows.css | 40 +++++++++++++++++++--------- 1 file changed, 28 insertions(+), 12 deletions(-) diff --git a/packages/ui/src/v2/theme/shadows.css b/packages/ui/src/v2/theme/shadows.css index 05857f5de..aafe47ee1 100644 --- a/packages/ui/src/v2/theme/shadows.css +++ b/packages/ui/src/v2/theme/shadows.css @@ -14,29 +14,40 @@ */ /* --------------------------------------------------------------------------- - * Shadows — Radix Themes shadow scale (steps 1–6) + * Shadows — drop-shadow elevation 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. + * Steps 2–6 are Radix Themes' shadows (tokens/shadow.css) with Radix's + * neutral `gray` mapped to the v2 neutral `sand`. Step 1 deliberately + * diverges from Radix: Radix's shadow-1 is a fully *inset* shadow, which + * belongs in Tailwind's separate inset-shadow-* slot, not the drop-shadow + * shadow-* slot. To keep shadow-1 … shadow-6 a single, composable drop + * elevation ramp, shadow-1 is our own subtle drop shadow one notch below + * shadow-2. If a recessed/inset treatment is ever needed, add it under the + * --inset-shadow-* namespace instead. * + * Inset shadows live in Tailwind's separate inset-shadow-* slot. We expose a + * numeric inset-shadow-1 … inset-shadow-3 ramp that mirrors the depth of + * Tailwind's default 2xs/xs/sm but is sand-tinted, so (unlike the flat-black + * defaults) it adapts to dark mode. inset-shadow-none stays a static utility. + * + * Registered with `inline` so each utility keeps its var() references; every + * layer is built from alpha tokens (--sand-a*, --black-a*) that already flip + * light↔dark, so the scales adapt to dark mode from a single definition. * 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). + * --shadow-* and --inset-shadow-* are reset to initial first so the v2 build + * exposes only these numeric scales (not Tailwind's shadow-sm/md/lg or the + * 2xs/xs/sm inset defaults). * ------------------------------------------------------------------------- */ @theme { --shadow-*: initial; + --inset-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); + 0 0 0 1px var(--sand-a3), + 0 1px 2px 0 var(--black-a1); --shadow-2: 0 0 0 1px var(--sand-a3), 0 0 0 0.5px var(--black-a1), @@ -61,4 +72,9 @@ 0 12px 60px var(--black-a3), 0 16px 64px var(--sand-a2), 0 16px 36px -20px var(--sand-a7); + + /* Inset elevation — mirrors the depth of Tailwind's 2xs/xs/sm defaults. */ + --inset-shadow-1: inset 0 1px var(--sand-a3); + --inset-shadow-2: inset 0 1px 1px var(--sand-a3); + --inset-shadow-3: inset 0 2px 4px var(--sand-a3); }