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

Add v2 color theme with Radix 12-step scales

Browse Source 
Introduce a new v2 theme system in packages/ui/src/v2/ using
@radix-ui/colors for sand, gold, red, green, amber, and sky scales.
Colors are imported from the library (with P3 wide-gamut support),
mapped to Tailwind via @theme inline, and scoped under
[data-theme="v2"] for isolation from the existing v1 theme. Dark mode
activates via the .dark class on <html>.

Includes contributor docs (contrib/claude/v2-colors.md) and a Cursor
rule (.cursor/rules/v2-color-scale.mdc) for the color system.

Signed-off-by: Émile Ré <emile@probo.com>
This commit is contained in:
Émile Ré
2026-06-16 14:38:42 +02:00
parent 4535cd47fd
commit 5a5c853346
6 changed files with 445 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
.cursor/rules/v2-color-scale.mdc Normal file
View File

@@ -0,0 +1,19 @@
---
description: v2 UI color system — Radix numbered scale, no hardcoded colors, no manual dark mode
globs: "packages/ui/src/v2/**/*.{ts,tsx}"
alwaysApply: false
---
# v2 color scale
Use the Radix 12-step numbered scale for all colors in v2 components: `sand`, `gold`, `red`, `green`, `amber`, `sky` (steps 1–12).
## Rules
- Use scale classes (`bg-sand-3`, `text-red-11`, `border-gold-7`) — never v1 semantic names (`txt-primary`, `border-low`, `bg-primary`, etc.)
- Never hardcode hex/rgb/oklch values for colors that exist in the scale
- Never use the `dark:` variant prefix for v2 color overrides — dark mode is handled by the `.dark` class on `<html>` via Radix CSS imports
- Do not mix v1 and v2 color classes in the same component
- Respect step ranges: 1–2 backgrounds, 3–5 component bg, 6–8 borders, 9–10 solid bg, 11–12 text
Full guide: `contrib/claude/v2-colors.md`