xertica-ui 2.1.2 → 2.1.4

package/styles/xertica/tokens.css

@@ -40,8 +40,8 @@
   --success-foreground: rgba(250, 250, 250, 1);
   --info: rgba(29, 78, 216, 1);
   --info-foreground: rgba(250, 250, 250, 1);
-  --warning: rgba(180, 83, 9, 1);
-  --warning-foreground: rgba(250, 250, 250, 1);
+  --warning: rgba(234, 179, 8, 1);
+  --warning-foreground: rgba(28, 25, 23, 1);
 
   --border: rgba(228, 228, 231, 1);
   --input: rgba(244, 244, 245, 0.5);
@@ -58,12 +58,23 @@
   --sidebar-border: rgba(65, 61, 107, 1);
   --sidebar-ring: rgba(161, 161, 170, 1);
 
-  /* Charts */
-  --chart-1: rgba(44, 39, 91, 1);
-  --chart-2: rgba(4, 120, 87, 1);
-  --chart-3: rgba(180, 83, 9, 1);
-  --chart-4: rgba(29, 78, 216, 1);
-  --chart-5: rgba(185, 28, 28, 1);
+  /* Charts — vibrant, accessible, harmonious palette */
+  --chart-1: rgba(99, 91, 255, 1);
+  /* indigo-violet — brand-adjacent */
+  --chart-2: rgba(16, 185, 129, 1);
+  /* emerald — success-adjacent */
+  --chart-3: rgba(245, 158, 11, 1);
+  /* amber — warm accent */
+  --chart-4: rgba(59, 130, 246, 1);
+  /* blue — info-adjacent */
+  --chart-5: rgba(239, 68, 68, 1);
+  /* red — destructive-adjacent */
+  --chart-6: rgba(168, 85, 247, 1);
+  /* purple — extended palette */
+  --chart-7: rgba(20, 184, 166, 1);
+  /* teal — extended palette */
+  --chart-8: rgba(251, 113, 133, 1);
+  /* rose — extended palette */
 
   /* Gradients */
   --gradient-diagonal: linear-gradient(135deg, #FDB0F2 0%, #72CDFD 100%);
@@ -116,9 +127,9 @@
   --toast-success-border: rgba(5, 150, 105, 1);
   --toast-success-icon: rgba(5, 150, 105, 1);
   /* Toast - Warning */
-  --toast-warning-bg: rgba(254, 243, 199, 1);
-  --toast-warning-border: rgba(180, 83, 9, 1);
-  --toast-warning-icon: rgba(180, 83, 9, 1);
+  --toast-warning-bg: rgba(254, 249, 195, 1);
+  --toast-warning-border: rgba(161, 98, 7, 1);
+  --toast-warning-icon: rgba(161, 98, 7, 1);
   /* Toast - Info */
   --toast-info-bg: rgba(219, 234, 254, 1);
   --toast-info-border: rgba(37, 99, 235, 1);
@@ -176,6 +187,24 @@
 
   --elevation-sm: 0px 0px 48px 0px rgba(0, 0, 0, 0.3);
 
+  /* Charts — dark mode: slightly lighter/more saturated for contrast on dark bg */
+  --chart-1: rgba(129, 122, 255, 1);
+  /* indigo-violet lighter */
+  --chart-2: rgba(52, 211, 153, 1);
+  /* emerald lighter */
+  --chart-3: rgba(251, 191, 36, 1);
+  /* amber lighter */
+  --chart-4: rgba(96, 165, 250, 1);
+  /* blue lighter */
+  --chart-5: rgba(248, 113, 113, 1);
+  /* red lighter */
+  --chart-6: rgba(196, 132, 252, 1);
+  /* purple lighter */
+  --chart-7: rgba(45, 212, 191, 1);
+  /* teal lighter */
+  --chart-8: rgba(253, 164, 175, 1);
+  /* rose lighter */
+
   /* Sidebar */
   --sidebar-foreground: rgba(250, 250, 250, 1);
   --sidebar-primary: rgba(255, 255, 255, 1);
@@ -204,4 +233,4 @@
   --toast-error-bg: rgba(127, 29, 29, 1);
   --toast-error-border: rgba(248, 113, 113, 1);
   --toast-error-icon: rgba(248, 113, 113, 1);
-}
+}

package/templates/CLAUDE.md

@@ -44,12 +44,21 @@ import { Home, Settings, Plus, Trash2, ChevronRight } from 'lucide-react';
 | `<div class="card ...">` | `<Card>` from `xertica-ui/ui` |
 | custom scrollbar div | `<ScrollArea>` from `xertica-ui/ui` |
 
-### Colors — never use raw values
-| ❌ Never | ✅ Always |
+### Colors — context-dependent rules
+
+| ❌ Never (any context) | Reason |
 |---|---|
-| `bg-blue-500`, `text-gray-700` | `bg-primary`, `text-muted-foreground` |
-| `#3b82f6`, `rgb(...)` | `var(--primary)` |
-| `rounded-lg`, `rounded-xl` | `rounded-[var(--radius)]` |
+| `#3b82f6`, `rgb(59,130,246)`, `hsl(...)` | Raw values — non-themeable |
+| `style={{ color: '#...' }}` for theming | Non-themeable inline style |
+
+| ❌ Wrong for semantic/status contexts | ✅ Required instead |
+|---|---|
+| `bg-red-500` for error states | `bg-destructive` |
+| `text-red-500` for error text | `text-destructive` |
+| `bg-green-500` for success states | `bg-success` |
+| `bg-yellow-500` for warnings | `bg-warning` |
+
+> For **layout, spacing, and general non-semantic UI** (custom components, decorative elements, Storybook stories where no semantic token applies), standard Tailwind color utilities like `bg-blue-500` or `text-gray-700` are acceptable.
 
 Semantic token reference:
 ```
@@ -57,7 +66,8 @@ bg-background / text-foreground       → page background and primary text
 bg-card / text-card-foreground        → card surfaces
 bg-muted / text-muted-foreground      → subdued areas and secondary text
 bg-primary / text-primary-foreground  → primary actions
-bg-destructive                        → danger states
+bg-destructive                        → danger / error states
+bg-success / bg-warning / bg-info     → semantic status states
 bg-accent                             → hover states
 border-border                         → standard borders
 border-input                          → form field borders

package/templates/guidelines/Guidelines.md

@@ -181,12 +181,23 @@ import { Home, Settings, Plus, Trash2, ChevronRight } from 'lucide-react';
 | `<div class="card ...">` | `<Card>` from `xertica-ui/ui` |
 | custom scrollable div | `<ScrollArea>` from `xertica-ui/ui` |
 
-### Colors — never use raw values
+### Colors — context-dependent rules
+
+| ❌ Never (any context) | Reason |
+|---|---|
+| `#3b82f6`, `rgb(59, 130, 246)`, `hsl(...)` | Raw values — non-themeable |
+| `style={{ color: '#...' }}` for theming | Non-themeable inline style |
+
+| ❌ Wrong for semantic/status contexts | ✅ Required instead |
+|---|---|
+| `bg-red-500` / `text-red-500` for errors | `bg-destructive` / `text-destructive` |
+| `bg-green-500` for success states | `bg-success` |
+| `bg-yellow-500` for warnings | `bg-warning` |
+
+> For **layout, spacing, and general non-semantic UI** (custom components, decorative elements where no semantic token applies), standard Tailwind color utilities like `bg-blue-500` or `text-gray-700` are acceptable.
 
 | ❌ Never | ✅ Always |
 |---|---|
-| `bg-blue-500`, `text-gray-700` | `bg-primary`, `text-muted-foreground` |
-| `#3b82f6`, `rgb(59, 130, 246)` | `var(--primary)` |
 | `rounded-lg`, `rounded-xl` | `rounded-[var(--radius)]` |
 
 ### Layout state — never hardcode
@@ -305,7 +316,8 @@ Before completing any feature:
 - [ ] Route registered in `src/app/components/AuthGuard.tsx`
 - [ ] Home navigation card added (if primary module)
 - [ ] Only `xertica-ui` components used — no raw HTML elements
-- [ ] Only semantic tokens — no raw colors or hardcoded radii
+- [ ] No raw hex/rgb values — semantic tokens for semantic/status contexts; Tailwind utilities acceptable for non-semantic layout
+- [ ] No hardcoded radii — use `rounded-[var(--radius)]`
 - [ ] Icons from `lucide-react` only
 - [ ] Destructive actions wrapped in `<AlertDialog>`
 - [ ] Layout state from `useLayout()` — no hardcoded widths

package/templates/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xertica-ui-template",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "private": true,
   "type": "module",
   "scripts": {
@@ -17,7 +17,7 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.1.3",
     "sonner": "^1.7.3",
-    "xertica-ui": "^2.1.2"
+    "xertica-ui": "^2.1.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.18.0",
@@ -57,4 +57,4 @@
       "vite": "6.3.5"
     }
   }
-}
+}

package/templates/src/styles/xertica/tokens.css

@@ -40,8 +40,8 @@
   --success-foreground: rgba(250, 250, 250, 1);
   --info: rgba(37, 99, 235, 1);
   --info-foreground: rgba(250, 250, 250, 1);
-  --warning: rgba(245, 158, 11, 1);
-  --warning-foreground: rgba(24, 24, 27, 1);
+  --warning: rgba(234, 179, 8, 1);
+  --warning-foreground: rgba(28, 25, 23, 1);
 
   --border: rgba(228, 228, 231, 1);
   --input: rgba(244, 244, 245, 0.5);
@@ -58,12 +58,23 @@
   --sidebar-border: rgba(65, 61, 107, 1);
   --sidebar-ring: rgba(161, 161, 170, 1);
 
-  /* Charts */
-  --chart-1: rgba(44, 39, 91, 1);
-  --chart-2: rgba(5, 150, 105, 1);
+  /* Charts — vibrant, accessible, harmonious palette */
+  --chart-1: rgba(99, 91, 255, 1);
+  /* indigo-violet — brand-adjacent */
+  --chart-2: rgba(16, 185, 129, 1);
+  /* emerald — success-adjacent */
   --chart-3: rgba(245, 158, 11, 1);
-  --chart-4: rgba(37, 99, 235, 1);
+  /* amber — warm accent */
+  --chart-4: rgba(59, 130, 246, 1);
+  /* blue — info-adjacent */
   --chart-5: rgba(239, 68, 68, 1);
+  /* red — destructive-adjacent */
+  --chart-6: rgba(168, 85, 247, 1);
+  /* purple — extended palette */
+  --chart-7: rgba(20, 184, 166, 1);
+  /* teal — extended palette */
+  --chart-8: rgba(251, 113, 133, 1);
+  /* rose — extended palette */
 
   /* Gradients */
   --gradient-diagonal: linear-gradient(135deg, #FDB0F2 0%, #72CDFD 100%);
@@ -116,9 +127,9 @@
   --toast-success-border: rgba(5, 150, 105, 1);
   --toast-success-icon: rgba(5, 150, 105, 1);
   /* Toast - Warning */
-  --toast-warning-bg: rgba(254, 243, 199, 1);
-  --toast-warning-border: rgba(245, 158, 11, 1);
-  --toast-warning-icon: rgba(245, 158, 11, 1);
+  --toast-warning-bg: rgba(254, 249, 195, 1);
+  --toast-warning-border: rgba(161, 98, 7, 1);
+  --toast-warning-icon: rgba(161, 98, 7, 1);
   /* Toast - Info */
   --toast-info-bg: rgba(219, 234, 254, 1);
   --toast-info-border: rgba(37, 99, 235, 1);
@@ -176,6 +187,24 @@
 
   --elevation-sm: 0px 0px 48px 0px rgba(0, 0, 0, 0.3);
 
+  /* Charts — dark mode: slightly lighter/more saturated for contrast on dark bg */
+  --chart-1: rgba(129, 122, 255, 1);
+  /* indigo-violet lighter */
+  --chart-2: rgba(52, 211, 153, 1);
+  /* emerald lighter */
+  --chart-3: rgba(251, 191, 36, 1);
+  /* amber lighter */
+  --chart-4: rgba(96, 165, 250, 1);
+  /* blue lighter */
+  --chart-5: rgba(248, 113, 113, 1);
+  /* red lighter */
+  --chart-6: rgba(196, 132, 252, 1);
+  /* purple lighter */
+  --chart-7: rgba(45, 212, 191, 1);
+  /* teal lighter */
+  --chart-8: rgba(253, 164, 175, 1);
+  /* rose lighter */
+
   /* Sidebar */
   --sidebar-foreground: rgba(250, 250, 250, 1);
   --sidebar-primary: rgba(255, 255, 255, 1);
@@ -204,4 +233,4 @@
   --toast-error-bg: rgba(127, 29, 29, 1);
   --toast-error-border: rgba(248, 113, 113, 1);
   --toast-error-icon: rgba(248, 113, 113, 1);
-}
+}

package/utils/color-utils.ts

@@ -0,0 +1,72 @@
+/**
+ * Color utility functions shared across the project.
+ * Extracted from BrandColorsContext to allow reuse and isolated testing.
+ */
+
+/**
+ * Converts a hex color string to its RGB components.
+ * @param hex - Hex color string (with or without leading `#`)
+ * @returns Object with `r`, `g`, `b` values (0–255), or `null` if invalid
+ *
+ * @example
+ * hexToRgb('#3b82f6') // { r: 59, g: 130, b: 246 }
+ * hexToRgb('3b82f6')  // { r: 59, g: 130, b: 246 }
+ * hexToRgb('invalid') // null
+ */
+export function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+        }
+        : null;
+}
+
+/**
+ * Converts RGB components to an `rgba()` CSS string.
+ * @param r - Red (0–255)
+ * @param g - Green (0–255)
+ * @param b - Blue (0–255)
+ * @param alpha - Alpha (0–1), defaults to 1
+ *
+ * @example
+ * rgbToRgba(59, 130, 246, 0.5) // 'rgba(59, 130, 246, 0.5)'
+ */
+export function rgbToRgba(r: number, g: number, b: number, alpha = 1): string {
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+/**
+ * Converts a hex color to an `rgba()` CSS string.
+ * Returns `null` if the hex is invalid.
+ *
+ * @example
+ * hexToRgba('#3b82f6', 0.15) // 'rgba(59, 130, 246, 0.15)'
+ */
+export function hexToRgba(hex: string, alpha = 1): string | null {
+    const rgb = hexToRgb(hex);
+    if (!rgb) return null;
+    return rgbToRgba(rgb.r, rgb.g, rgb.b, alpha);
+}
+
+/**
+ * Determines whether a hex color is considered "light" based on its luminance.
+ * Uses the W3C relative luminance formula.
+ *
+ * @param hex - Hex color string
+ * @returns `true` if the color is light, `false` if dark
+ *
+ * @example
+ * isLightColor('#ffffff') // true
+ * isLightColor('#000000') // false
+ * isLightColor('#3b82f6') // false
+ */
+export function isLightColor(hex: string): boolean {
+    const rgb = hexToRgb(hex);
+    if (!rgb) return true;
+    // W3C relative luminance
+    const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
+    return luminance > 0.5;
+}