@djangocfg/ui-core 2.1.500 → 2.1.502

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.500",
+  "version": "2.1.502",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -128,7 +128,7 @@
     "check:contrast": "node scripts/check-preset-contrast.mjs"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.500",
+    "@djangocfg/i18n": "^2.1.502",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -206,8 +206,8 @@
     "@chenglou/pretext": "^0.0.8"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.500",
-    "@djangocfg/typescript-config": "^2.1.500",
+    "@djangocfg/i18n": "^2.1.502",
+    "@djangocfg/typescript-config": "^2.1.502",
     "@types/node": "^24.13.3",
     "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",

package/src/components/data/avatar/index.tsx

@@ -27,7 +27,7 @@ const AvatarImage = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Image
     ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
+    className={cn("aspect-square h-full w-full object-cover", className)}
     {...props}
   />
 ))

package/src/styles/css/presets/django-cfg.css

@@ -2,12 +2,15 @@
 :root {
   --primary: hsl(192 90% 35%);
   --primary-foreground: hsl(0 0% 100%);
-  --accent: hsl(192 60% 94%);
+  /* 92%, not 94%: the base --background warmed to 97%, so 94% was a 3-point step
+     (the gate wants ≥4). Deepened to keep the tinted hover visible on the page. */
+  --accent: hsl(192 60% 92%);
   --accent-foreground: hsl(192 90% 22%);
   --ring: hsl(192 90% 40%);
   --sidebar-primary: hsl(192 90% 35%);
   --sidebar-primary-foreground: hsl(0 0% 100%);
-  --sidebar-accent: hsl(192 55% 93%);
+  /* 91%, not 93%: base --sidebar-background is 96%; keep a ≥4-point step. */
+  --sidebar-accent: hsl(192 55% 91%);
   --sidebar-accent-foreground: hsl(192 90% 22%);
   --sidebar-ring: hsl(192 90% 40%);
   --info: hsl(192 90% 35%);

package/src/styles/css/theme/dark.css

@@ -1,11 +1,12 @@
 /**
  * Dark Theme Colors
  *
- * Same brand as light: #00d9ff → `189 100% 50%`.
+ * Brand: Claude "clay" #d97757 → `hsl(15 63% 60%)`. The full-brightness swatch is used on dark chrome
+ * (it's bright enough there), while light mode carries a deeper clay for white-on-fill contrast.
  *
  * Semantic pairs (do not split ad hoc in components):
- * - --primary / --primary-foreground — filled CTAs. On dark UI the brand #00d9ff is bright enough
- *   that **dark ink** (same as light :root --foreground) reads better than white (WCAG + legibility).
+ * - --primary / --primary-foreground — filled CTAs. On dark UI the clay swatch is bright enough that
+ *   **dark ink** (same as light :root --foreground) reads better than white (clay-on-dark-ink 5.8:1).
  * - --secondary / --secondary-foreground — neutral filled controls on dark chrome (elevated gray +
  *   light text), not a light-theme secondary pasted onto .dark.
  *
@@ -24,9 +25,9 @@
   --card-foreground: hsl(48 33% 97%);
   --popover: hsl(48 2.5% 21%);
   --popover-foreground: hsl(48 33% 97%);
-  /* Exact brand: #00d9ff (same HSL as :root light primary) */
-  --primary: hsl(189 100% 50%);
-  /* Dark label on bright cyan — stronger contrast than white on #00d9ff */
+  /* Brand clay #d97757 (Claude). Bright enough on dark chrome to carry the full swatch. */
+  --primary: hsl(15 63% 60%);
+  /* Dark label on clay — 5.8:1, stronger than white-on-clay (3.1:1) */
   --primary-foreground: hsl(0 0% 9%);
   /* Secondary: elevated warm-gray control surface + light label */
   --secondary: hsl(60 2.1% 18.4%);
@@ -73,7 +74,7 @@
    * subtle separation, not a hard black slab. */
   --sidebar-background: hsl(30 3% 11.8%);
   --sidebar-foreground: hsl(48 33% 97%);
-  --sidebar-primary: hsl(189 100% 50%);
+  --sidebar-primary: hsl(15 63% 60%);
   --sidebar-primary-foreground: hsl(0 0% 9%);
   --sidebar-accent: hsl(48 3% 24%);
   --sidebar-accent-foreground: hsl(48 33% 97%);
@@ -126,7 +127,7 @@
   /* Chart colors — chart-1 aligned with brand.
    * Fully-wrapped hsl() like every other token (consume via `bg-chart-N` or
    * `var(--chart-N)`, never `hsl(var(--chart-N))`). */
-  --chart-1: hsl(189 100% 50%);
+  --chart-1: hsl(15 63% 60%);
   --chart-2: hsl(142 76% 36%);
   --chart-3: hsl(262 83% 58%);
   --chart-4: hsl(26 90% 57%);

package/src/styles/css/theme/light.css

@@ -1,47 +1,53 @@
 /**
  * Light Theme Colors
  *
- * Marketing / dark UI can use bright cyan `#00d9ff`. On **white** backgrounds, that neon with white
- * label fails contrast and looks harsh—so `:root` `--primary` is a **deeper blue-cyan** (same family,
- * lower L + slightly bluer hue) for buttons, links, and `text-primary`. Dark theme keeps the bright
- * swatch via `.dark`.
+ * Brand: Claude "clay" #d97757 (hsl 14.77 63% 60%). On **white** the 60% swatch with a white label
+ * fails contrast, so `:root` `--primary` uses a deeper clay (`hsl 15 55% 45%`, white-on-fill 5.0:1 AA)
+ * for buttons, links, and `text-primary`. The full-brightness clay is reserved for brand marks / dark
+ * UI; the dark theme carries the brighter swatch via `.dark`.
+ *
+ * Neutrals follow Claude's current theme: a faintly WARM off-white canvas (hue ~60, not pure gray) so
+ * cards and chips read against the page the way they do on claude.ai.
  *
  * Pairs `--primary` / `--primary-foreground` are tuned together. Prefer editing tokens over ad hoc classes.
  */
 
 :root {
-  /* Base colors - an off-white canvas with darker neutral fills and a white
-   * raised card. Keep `muted` below `background` in light mode so chips,
-   * message bubbles, and secondary controls never dissolve into the page. */
-  --background: hsl(0 0% 98%);
-  --foreground: hsl(0 0% 9%);
+  /* Base colors — a warm off-white canvas (Claude bg-100) with darker neutral
+   * fills and a white raised card. Keep `muted` below `background` in light mode
+   * so chips, message bubbles, and secondary controls never dissolve into the
+   * page. */
+  --background: hsl(60 14% 97%);
+  --foreground: hsl(0 0% 7.5%);
   --card: hsl(0 0% 100%);
-  --card-foreground: hsl(0 0% 9%);
+  --card-foreground: hsl(0 0% 7.5%);
   --popover: hsl(0 0% 100%);
-  --popover-foreground: hsl(0 0% 9%);
-  /* Interactive primary on white (~#0989aa): readable white-on-fill + calmer than neon */
-  --primary: hsl(192 90% 35%);
+  --popover-foreground: hsl(0 0% 7.5%);
+  /* Interactive primary on white — deep clay (~#b6543a): readable white-on-fill (5.0:1) + calmer than the brand swatch */
+  --primary: hsl(15 55% 45%);
   --primary-foreground: hsl(0 0% 100%);
-  --secondary: hsl(0 0% 9%);
-  --secondary-foreground: hsl(0 0% 98%);
-  --muted: hsl(0 0% 94%);
-  --muted-foreground: hsl(0 0% 45%);
+  --secondary: hsl(0 0% 7.5%);
+  --secondary-foreground: hsl(60 14% 97%);
+  --muted: hsl(52 12% 93%);
+  --muted-foreground: hsl(48 3% 46%);
   /* Neutral interaction surface: a quiet step below the current light canvas.
    * It deliberately keys off --background, not white --card, so hover remains
    * visible on translucent menus and on plain pages alike. */
   --surface-hover: color-mix(in oklab, var(--background) 96%, var(--foreground));
-  /* Neutral hover/active surface — quiet gray lift, no hue tint
-   * (Claude/macOS settings convention). */
-  --accent: hsl(0 0% 94%);
-  --accent-foreground: hsl(0 0% 9%);
-  --destructive: hsl(0 84% 60%);
+  /* Neutral hover/active surface — quiet warm-gray lift (Claude bg-200), a
+   * clear step (≥4L) below the 97% canvas. */
+  --accent: hsl(60 11% 92%);
+  --accent-foreground: hsl(0 0% 7.5%);
+  /* Destructive — Claude danger-100 hsl(0 61% 52%). Slightly deeper for a solid
+   * white-on-fill AA pass. */
+  --destructive: hsl(0 61% 50%);
   --destructive-foreground: hsl(0 0% 98%);
-  --border: hsl(0 0% 87%);
-  /* Input surface — faint gray fill so fields are visible on white cards. */
-  --input: hsl(0 0% 97%);
+  --border: hsl(50 10% 86%);
+  /* Input surface — faint warm fill so fields are visible on white cards. */
+  --input: hsl(60 14% 97%);
   /* Divider — hairline between rows; slightly darker than --border so it reads
    * on white cards. */
-  --divider: hsl(0 0% 88%);
+  --divider: hsl(50 9% 87%);
   /* Overlay — modal scrim / backdrop behind dialogs, drawers, sheets. A scrim
    * is black in both themes; the token owns the opacity. */
   --overlay: hsl(0 0% 0% / 0.6);
@@ -64,17 +70,17 @@
   --code-border: hsl(0 0% 88%);
   --code-inline: hsl(0 0% 93%);
   --code-inline-foreground: hsl(0 0% 14%);
-  /* Sidebar Light Theme - Subtle gray background */
-  --sidebar-background: hsl(0 0% 97%);
-  --sidebar-foreground: hsl(0 0% 9%);
-  --sidebar-primary: hsl(192 90% 35%);
+  /* Sidebar Light Theme — warm off-white, same family as the page (Claude keeps
+   * rail and page in one tone). */
+  --sidebar-background: hsl(60 14% 96%);
+  --sidebar-foreground: hsl(0 0% 7.5%);
+  --sidebar-primary: hsl(15 55% 45%);
   --sidebar-primary-foreground: hsl(0 0% 100%);
-  /* 91%, not 95% (2026-08-03). The sidebar sits on 97%, so 95% was a two-point
-     step while the dark pair (11.8% -> 24%) gets twelve. Every preset that
-     inherits this token inherited an invisible hover with it. */
-  --sidebar-accent: hsl(0 0% 91%);
-  --sidebar-accent-foreground: hsl(0 0% 9%);
-  --sidebar-border: hsl(0 0% 90%);
+  /* 90%, a clear (≥4L) step below the 96% rail — hover stays visible. See the
+     2026-08-03 note: the dark pair steps ~12 points, so light must step too. */
+  --sidebar-accent: hsl(52 12% 90%);
+  --sidebar-accent-foreground: hsl(0 0% 7.5%);
+  --sidebar-border: hsl(50 10% 89%);
   --sidebar-ring: hsl(217 91% 55%);
   /* ── Status surfaces ─────────────────────────────────────────────
    * Each status has 4 tokens: icon/accent color, page background,
@@ -125,7 +131,7 @@
   /* Chart colors — chart-1 aligned with brand hue.
    * Fully-wrapped hsl() like every other token (consume via `bg-chart-N` or
    * `var(--chart-N)`, never `hsl(var(--chart-N))`). */
-  --chart-1: hsl(192 90% 35%);
+  --chart-1: hsl(15 55% 45%);
   --chart-2: hsl(142 76% 36%);
   --chart-3: hsl(262 83% 58%);
   --chart-4: hsl(26 90% 57%);

package/src/styles/palette/utils.ts

@@ -67,8 +67,8 @@ function rgbToHex(r: number, g: number, b: number): string {
 
 /**
  * Convert CSS HSL variable value to hex
- * Input: "192 90% 35%" (from CSS --primary in light theme)
- * Output: "#0989aa"
+ * Input: "15 55% 45%" (from CSS --primary in light theme)
+ * Output: "#b25334"
  */
 export function hslToHex(hslString: string): string {
   const parsed = parseHslString(hslString);