@djangocfg/ui-core 2.1.495 → 2.1.497

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.495",
+  "version": "2.1.497",
   "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.495",
+    "@djangocfg/i18n": "^2.1.497",
     "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.495",
-    "@djangocfg/typescript-config": "^2.1.495",
+    "@djangocfg/i18n": "^2.1.497",
+    "@djangocfg/typescript-config": "^2.1.497",
     "@types/node": "^24.13.3",
     "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",

package/src/styles/README.md

@@ -166,6 +166,19 @@ Typography variables are ordinary CSS values:
 - In light mode, `--muted` must be at least 2 HSL lightness points darker
   than `--background`. This keeps translucent muted fills visible on the
   canvas and is enforced by `check:contrast`.
+- An interactive surface must sit at least 4 HSL lightness points away from the
+  surface it lands on, **in both modes**: `--accent` vs `--background`, and
+  `--sidebar-accent` vs `--sidebar-background`. Direction is deliberately not
+  asserted (light darkens its hover, dark lightens it) — only the size of the
+  step, so both modes do comparable work for the same interaction. Enforced by
+  `check:contrast`.
+
+  This rule exists because the one above it was not enough. A sidebar hover
+  lands on `--sidebar-background`, which nothing checked, so presets shipped
+  one-point steps in light against eleven in dark — and one stepped the wrong
+  way, its hover lighter than the rail it highlighted. Every one passed the
+  `--muted`/`--background` gate. **Check the surface the user actually sees,
+  not a neighbouring one that happens to be nearby.**
 - Changes to a preset require checking both light and dark modes.
 - Product density overrides belong in the consuming app's CSS, not in a copied
   TypeScript map.

package/src/styles/css/presets/dense.css

@@ -24,7 +24,9 @@
   --divider: hsl(0 0% 46% / 0.18);
   --muted: hsl(0 0% 12%);
   --card: hsl(0 0% 10%);
-  --accent: hsl(0 0% 14%);
+  /* 20%, not 14%: --background is 14.5%, so this was HALF a point — the
+     hover was effectively invisible. */
+  --accent: hsl(0 0% 20%);
   --radius-xs: calc(0.25rem - 6px);
   --radius-sm: calc(0.25rem - 4px);
   --radius-md: calc(0.25rem - 2px);

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

@@ -24,7 +24,8 @@
 .dark {
   --primary: hsl(189 100% 50%);
   --primary-foreground: hsl(0 0% 9%);
-  --accent: hsl(189 40% 18%);
+  /* 20%, not 18%: --background is 14.5%, so this was 3.5 points. */
+  --accent: hsl(189 40% 20%);
   --accent-foreground: hsl(189 100% 78%);
   --ring: hsl(189 100% 50%);
   --sidebar-primary: hsl(189 100% 50%);

package/src/styles/css/presets/macos.css

@@ -14,7 +14,8 @@
   --muted: hsl(240 8% 91%);
   /* Readable even when muted text sits on the muted fill itself (4.63:1). */
   --muted-foreground: hsl(240 3% 41%);
-  --accent: hsl(211 50% 96%);
+  /* 91%, not 96%: --background is 97%, so this was a one-point step. */
+  --accent: hsl(211 50% 91%);
   --accent-foreground: hsl(211 100% 36%);
   /* Keep white destructive labels AA-readable in the light theme (5.69:1). */
   --destructive: hsl(2 80% 44%);
@@ -30,7 +31,14 @@
   --sidebar-foreground: hsl(0 0% 7%);
   --sidebar-primary: hsl(211 100% 44%);
   --sidebar-primary-foreground: hsl(0 0% 100%);
-  --sidebar-accent: hsl(211 50% 93%);
+  /* 88%, not 93% (2026-08-03). The sidebar sits on 94%, so a 93% hover was a
+     ONE-point step — invisible — while the dark pair (5% -> 16%) gets eleven.
+     Light mode was doing a quarter of the work of dark for the same
+     interaction. Measured against --sidebar-background, which is the surface a
+     rail hover actually lands on; the contrast rule below only ever compared
+     --muted with --background, so this pair passed every gate while looking
+     flat on screen. */
+  --sidebar-accent: hsl(211 50% 88%);
   --sidebar-accent-foreground: hsl(211 100% 36%);
   --sidebar-border: hsl(240 3% 82%);
   --sidebar-ring: hsl(211 100% 50%);

package/src/styles/css/presets/windows.css

@@ -12,7 +12,8 @@
   --secondary-foreground: hsl(0 0% 9%);
   --muted: hsl(0 0% 92%);
   --muted-foreground: hsl(0 0% 42%);
-  --accent: hsl(210 60% 94%);
+  /* 89%, not 94%: --background is 95%, so this was a one-point step. */
+  --accent: hsl(210 60% 89%);
   --accent-foreground: hsl(210 100% 28%);
   --destructive: hsl(0 90% 55%);
   --destructive-foreground: hsl(0 0% 100%);
@@ -26,7 +27,11 @@
   --sidebar-foreground: hsl(0 0% 9%);
   --sidebar-primary: hsl(210 100% 38%);
   --sidebar-primary-foreground: hsl(0 0% 100%);
-  --sidebar-accent: hsl(210 50% 93%);
+  /* 86%, not 93% (2026-08-03). The sidebar sits on 92%, so 93% was a ONE-point
+     step in the WRONG direction — the hover was lighter than the surface it sat
+     on, which reads as a smudge rather than a highlight. Dark gets eight
+     points; light now gets six. */
+  --sidebar-accent: hsl(210 50% 86%);
   --sidebar-accent-foreground: hsl(210 100% 28%);
   --sidebar-border: hsl(0 0% 86%);
   --sidebar-ring: hsl(210 100% 45%);

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

@@ -69,7 +69,10 @@
   --sidebar-foreground: hsl(0 0% 9%);
   --sidebar-primary: hsl(192 90% 35%);
   --sidebar-primary-foreground: hsl(0 0% 100%);
-  --sidebar-accent: hsl(0 0% 95%);
+  /* 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%);
   --sidebar-ring: hsl(217 91% 55%);