@djangocfg/ui-core 2.1.466 → 2.1.468

package/package.json

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

package/src/styles/README.md

@@ -56,7 +56,8 @@ not depend on the physical path. The preset defines both `:root` (light) and
 For a product-specific adjustment, add a small override after the preset:
 
 ```css
-:root, .dark {
+:root,
+.dark {
   --font-size-base: 0.9375rem;
   --font-size-sm: 0.875rem;
 }
@@ -133,8 +134,12 @@ CSS rather than duplicating a pixel value in React.
 Color variables are complete CSS colors, never bare HSL triplets:
 
 ```css
-:root { --background: hsl(240 17% 97%); }
-.dark  { --background: hsl(240 5% 8%); }
+:root {
+  --background: hsl(240 17% 97%);
+}
+.dark {
+  --background: hsl(240 5% 8%);
+}
 ```
 
 Tailwind maps semantic utilities to these variables through `@theme inline`.
@@ -144,7 +149,8 @@ Use `var(--background)` or `bg-background`; do not write
 Typography variables are ordinary CSS values:
 
 ```css
-:root, .dark {
+:root,
+.dark {
   --font-size-base: 0.8125rem;
   --font-size-sm: 0.75rem;
 }
@@ -157,6 +163,9 @@ Typography variables are ordinary CSS values:
   CSS color values.
 - Keep light and dark pairs together in the same file.
 - A preset may omit tokens that intentionally inherit from `theme.css`.
+- 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`.
 - 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.
@@ -168,11 +177,12 @@ pnpm check:contrast
 pnpm check
 ```
 
-`check:contrast` validates the macOS preset's compact-text semantic pairs at
-WCAG AA 4.5:1 in both modes. It includes primary, destructive, sidebar,
-status-surface, and muted text against every common surface. When tuning a
-token, change the semantic pair together rather than overriding text in a
-consumer component.
+`check:contrast` merges every static preset over the base theme and validates
+the light-mode background/muted surface hierarchy. It also keeps the complete
+macOS compact-text audit: semantic pairs must reach WCAG AA 4.5:1 in both
+modes, including primary, destructive, sidebar, status-surface, on-fill, and
+muted text against every common surface. When tuning a token, change the
+semantic pair together rather than overriding text in a consumer component.
 
 At the consumer, build the app that imports the preset and verify both modes.
 The important invariant is that changing a preset requires editing one CSS

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

@@ -19,6 +19,7 @@
   /* Keep white destructive labels AA-readable in the light theme (5.69:1). */
   --destructive: hsl(2 80% 44%);
   --destructive-foreground: hsl(0 0% 100%);
+  --on-destructive: hsl(0 0% 100%);
   --border: hsl(240 3% 78%);
   --input: hsl(240 8% 93%);
   --divider: hsl(240 4% 83%);

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

@@ -10,8 +10,10 @@
  */
 
 :root {
-  /* Base colors - Clean white with neutral grays */
-  --background: hsl(0 0% 94%);
+  /* 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%);
   --card: hsl(0 0% 100%);
   --card-foreground: hsl(0 0% 9%);
@@ -22,7 +24,7 @@
   --primary-foreground: hsl(0 0% 100%);
   --secondary: hsl(0 0% 9%);
   --secondary-foreground: hsl(0 0% 98%);
-  --muted: hsl(0 0% 96%);
+  --muted: hsl(0 0% 94%);
   --muted-foreground: hsl(0 0% 45%);
   /* Neutral interaction surface: a quiet step below the current light canvas.
    * It deliberately keys off --background, not white --card, so hover remains