Split v2 theme into per-layer files
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é
@@ -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
|
* colors.css Radix color scales (solid + sand alpha) + palette reset
|
||||||
* ────── ──────────────────────────────────────
|
* typography.css Inter font + type scale (text-1…9) + font weights
|
||||||
* 1 App background
|
* radius.css radius scale (rounded-1…6)
|
||||||
* 2 Subtle background
|
* shadows.css elevation scale (shadow-1…6)
|
||||||
* 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.
|
|
||||||
*
|
*
|
||||||
|
* Spacing intentionally stays on Tailwind's native scale (not tokenized).
|
||||||
* See contrib/claude/v2-colors.md for the full usage guide.
|
* See contrib/claude/v2-colors.md for the full usage guide.
|
||||||
*/
|
*/
|
||||||
|
@import "./theme/colors.css";
|
||||||
/* ---------------------------------------------------------------------------
|
@import "./theme/typography.css";
|
||||||
* Radix color imports (light → :root, dark → .dark)
|
@import "./theme/radius.css";
|
||||||
*
|
@import "./theme/shadows.css";
|
||||||
* 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);
|
|
||||||
}
|
|
||||||
|
|||||||
196
packages/ui/src/v2/theme/colors.css
Normal file
196
packages/ui/src/v2/theme/colors.css
Normal 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
46
packages/ui/src/v2/theme/radius.css
Normal 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
64
packages/ui/src/v2/theme/shadows.css
Normal 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
96
packages/ui/src/v2/theme/typography.css
Normal 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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user