@j3m-quantum/ui 0.9.0 → 1.0.0

package/README.md

@@ -114,14 +114,49 @@ Combine with dark mode:
 
 ## Design Tokens
 
-| Token | Light | Dark |
-|-------|-------|------|
-| `--primary` | #F58446 | #F58446 |
-| `--background` | #FFFFFF | #333333 |
-| `--foreground` | #333333 | #FFFFFF |
-| `--muted` | #E8E8E8 | #4A4A4A |
-| `--destructive` | #FB3748 | #D00416 |
-| `--radius` | 12px | 12px |
+### Color System: Radix 12-Step Scale
+
+Colors use HSL format for easy theming and opacity manipulation:
+
+```css
+/* Change accent color once, updates everywhere */
+:root {
+  --primary: 24 91% 62%;  /* Your brand orange */
+}
+
+/* Usage with opacity */
+background: hsl(var(--primary));         /* Solid */
+background: hsl(var(--primary) / 0.3);   /* 30% opacity */
+```
+
+### Color Scales
+
+| Scale | Steps | Purpose |
+|-------|-------|---------|
+| `--j3m-orange-1` to `--j3m-orange-12` | 12 | Primary/accent colors |
+| `--j3m-gray-1` to `--j3m-gray-12` | 12 | Neutral colors |
+
+### Scale Step Usage
+
+| Step | Purpose | Example |
+|------|---------|---------|
+| 1-2 | Backgrounds | Page bg, subtle areas |
+| 3-5 | Interactive | Button bg, hover states |
+| 6-8 | Borders | Input borders, dividers |
+| 9-10 | Solid colors | Primary buttons |
+| 11-12 | Text | Body text, headings |
+
+### Semantic Tokens
+
+| Token | Description |
+|-------|-------------|
+| `--primary` | Brand accent (orange-9) |
+| `--background` | Page background |
+| `--foreground` | Main text |
+| `--muted` | Subtle backgrounds |
+| `--border` | Default borders |
+| `--ring` | Focus rings |
+| `--radius` | Global border radius (12px) |
 
 ## Included Dependencies
 
@@ -150,20 +185,22 @@ import '@j3m-quantum/ui/styles'
 
 ## Customization
 
-Override CSS variables after the import:
+Override CSS variables after the import using HSL format:
 
 ```css
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "@j3m-quantum/ui/styles";
 
-/* Custom overrides */
+/* Custom overrides - use HSL values */
 :root {
-  --primary: #your-color;
+  --primary: 210 100% 50%;  /* Blue accent instead of orange */
   --radius: 8px;
 }
 ```
 
+The HSL format allows automatic opacity variations throughout the UI.
+
 ## Troubleshooting
 
 ### Animations not working (Dialog, Sheet, Select, etc.)

package/dist/index.cjs

@@ -990,7 +990,7 @@ function PlayerCanvasPlayButton({
         className
       ),
       style: {
-        backgroundColor: "var(--j3m-primary-250)",
+        backgroundColor: "hsl(var(--primary))",
         ...style
       },
       ...props,
@@ -1130,7 +1130,7 @@ function PlayerCanvasProgress({
           className: "absolute inset-y-0 left-0 rounded-full transition-all duration-200",
           style: {
             width: `${percentage}%`,
-            backgroundColor: "var(--j3m-primary-250)"
+            backgroundColor: "hsl(var(--primary))"
           }
         }
       )