@neuravision/construct 2.1.1 → 2.1.3

package/themes/README.md

@@ -0,0 +1,37 @@
+# Preset themes
+
+Preset themes are validated, ready-to-use theme inputs shipped with the package. Unlike the
+built-in themes (`light`, `dark`, `high-contrast`), presets are **not** compiled into
+`tokens/tokens.css` — they are brand skins rather than modes, have no system-preference
+mapping, and add no CSS payload for consumers that do not use them. A product opts in by
+compiling the preset through the `construct-theme` CLI:
+
+```bash
+npx construct-theme \
+  --theme node_modules/@neuravision/construct/themes/walnut.theme.json \
+  --out-dir ./src/generated/construct
+```
+
+Then activate it like any theme scope:
+
+```html
+<html data-theme="walnut"> … </html>
+```
+
+Products may also copy a preset as the starting point for their own theme and adjust
+individual tokens; the CLI re-validates every override, including the contrast gates.
+
+## Available presets
+
+| Preset | Extends | Character |
+|--------|---------|-----------|
+| `walnut` | `light` | Warm ivory surfaces, walnut-brown brand color, wood-toned accents. Body text meets WCAG AAA (≥ 7:1) on all surfaces, enforced by `contrast` gates in the theme file. |
+
+## Bar for adding a preset
+
+- Must validate against `schemas/theme.schema.json` and pass every default contrast pair
+  (`npm run themes:validate` wires this into `npm run check`).
+- Must declare its own `contrast` entries for any token the preset repurposes
+  (e.g. brand color used as text) and for stricter targets it claims (e.g. AAA body text).
+- Palette, radius, and shadow decisions only — no font-family or type-scale overrides, so
+  presets compose with any product typography.

package/themes/walnut.theme.json

@@ -0,0 +1,106 @@
+{
+  "$schema": "../schemas/theme.schema.json",
+  "name": "walnut",
+  "extends": "light",
+  "semantic": {
+    "color": {
+      "brand": {
+        "primary": "#6D4E33",
+        "primaryHover": "#5C4128",
+        "primaryActive": "#4C351F",
+        "accent": "#B0835E",
+        "accentHover": "#C2996F",
+        "accentActive": "#CBA57E",
+        "accentStrong": "#9F5210",
+        "onAccent": "#2A2014"
+      },
+      "text": {
+        "primary": "#2A2014",
+        "secondary": "#55432C",
+        "muted": "#6B573C",
+        "inverse": "#FFFFFF",
+        "onPrimary": "#FFFFFF"
+      },
+      "background": {
+        "canvas": "#FAF6ED",
+        "surface": "#F2EBDC",
+        "elevated": "#FFFFFF",
+        "muted": "#E9E0CC",
+        "subtle": "#F2EBDC"
+      },
+      "border": {
+        "subtle": "#E2D8C2",
+        "default": "#8A7256",
+        "strong": "#6D4E33",
+        "muted": "#E2D8C2"
+      },
+      "overlay": {
+        "scrim": "rgba(42, 32, 20, 0.55)"
+      },
+      "focus": {
+        "ring": "#9F5210"
+      }
+    },
+    "radius": {
+      "control": "7px",
+      "card": "10px",
+      "modal": "12px",
+      "pill": "999px"
+    },
+    "shadow": {
+      "card": "0 1px 2px rgba(58, 45, 26, 0.05), 0 2px 6px rgba(58, 45, 26, 0.06)",
+      "dropdown": "0 2px 6px rgba(58, 45, 26, 0.08), 0 8px 20px rgba(58, 45, 26, 0.12)",
+      "modal": "0 6px 16px rgba(58, 45, 26, 0.1), 0 24px 48px rgba(58, 45, 26, 0.18)"
+    }
+  },
+  "contrast": [
+    {
+      "name": "AAA: body text on canvas",
+      "foreground": "semantic.color.text.primary",
+      "background": "semantic.color.background.canvas",
+      "minRatio": 7
+    },
+    {
+      "name": "AAA: body text on surface",
+      "foreground": "semantic.color.text.primary",
+      "background": "semantic.color.background.surface",
+      "minRatio": 7
+    },
+    {
+      "name": "AAA: body text on elevated",
+      "foreground": "semantic.color.text.primary",
+      "background": "semantic.color.background.elevated",
+      "minRatio": 7
+    },
+    {
+      "name": "AAA: secondary text on canvas",
+      "foreground": "semantic.color.text.secondary",
+      "background": "semantic.color.background.canvas",
+      "minRatio": 7
+    },
+    {
+      "name": "brand primary used as text on canvas",
+      "foreground": "semantic.color.brand.primary",
+      "background": "semantic.color.background.canvas",
+      "minRatio": 4.5
+    },
+    {
+      "name": "brand primary used as text on surface",
+      "foreground": "semantic.color.brand.primary",
+      "background": "semantic.color.background.surface",
+      "minRatio": 4.5
+    },
+    {
+      "name": "brand primary used as text on elevated",
+      "foreground": "semantic.color.brand.primary",
+      "background": "semantic.color.background.elevated",
+      "minRatio": 4.5
+    },
+    {
+      "name": "accent used as boundary on canvas",
+      "foreground": "semantic.color.brand.accent",
+      "background": "semantic.color.background.canvas",
+      "minRatio": 3
+    }
+  ]
+}

package/tokens/README.md

@@ -95,7 +95,7 @@ console.log(tokens.metadata.themes);
 
 ## Built-in themes
 
-Construct ships `light`, `dark`, and `high-contrast` scopes:
+Construct ships `light`, `dark`, `high-contrast`, and `high-contrast-dark` scopes:
 
 ```html
 <html data-theme="dark">…</html>
@@ -103,7 +103,15 @@ Construct ships `light`, `dark`, and `high-contrast` scopes:
 
 Themes can also be nested on containers. Every explicit theme scope declares the complete semantic and component contract, so light inside dark, high-contrast inside light, and custom themes inside any parent do not leak inherited values.
 
-With no explicit `data-theme`, root-level `prefers-color-scheme: dark` and `prefers-contrast: more` preferences apply automatically.
+With no explicit `data-theme`, root-level `prefers-color-scheme: dark` and `prefers-contrast: more` preferences apply automatically — including the combination: dark-scheme users who request more contrast get `high-contrast-dark`, not a light UI. Note that pinning any `data-theme` on the root opts the page out of these automatic preference hookups; products that pin a theme should offer their own contrast/scheme switch (for example by pinning `high-contrast`/`high-contrast-dark` when the user asks for it).
+
+### Type scale units
+
+Font-size and line-height tokens are emitted in `rem` (authored in px, divided by 16) so user browser font-size preferences scale the entire system. Control heights, spacing, and the 44px coarse-pointer targets intentionally stay in px.
+
+### Accent roles
+
+`--color-brand-accent` is the decorative datum orange for edges and rules on canvas/surface. `--color-brand-accent-strong` is the validated fill orange — gated at ≥3:1 against `bg.canvas`, `bg.surface`, and `bg.muted` in every theme — for progress fills, meters, and any indicator drawn against the muted track color. Orange is never a text color; text uses the neutral `--color-text-*` roles.
 
 ## Custom product themes
 

package/tokens/components.json

@@ -50,5 +50,15 @@
     "height": "{space.3}",
     "radius": "{radius.pill}",
     "track": "{color.background.muted}"
+  },
+  "datum": {
+    "edgeWidth": "{border.width.thick}",
+    "tickWidth": "24px",
+    "tickHeight": "3px",
+    "originLength": "48px",
+    "markSize": "18px",
+    "scaleHeight": "9px",
+    "scaleMinorStep": "12px",
+    "scaleMajorStep": "60px"
   }
 }

package/tokens/semantic.dark.json

@@ -7,6 +7,7 @@
       "accent": "{color.orange.400}",
       "accentHover": "{color.orange.300}",
       "accentActive": "{color.orange.500}",
+      "accentStrong": "{color.orange.400}",
       "onAccent": "{color.stone.950}"
     },
     "text": {
@@ -23,9 +24,9 @@
       "muted": "{color.stone.900}"
     },
     "border": {
-      "subtle": "{color.stone.700}",
+      "subtle": "{color.stone.600}",
       "default": "{color.stone.400}",
-      "strong": "{color.stone.500}"
+      "strong": "{color.stone.300}"
     },
     "state": {
       "info": "{color.ocean.300}",
@@ -50,7 +51,7 @@
       "info": "{color.ocean.200}",
       "success": "{color.green.200}",
       "warning": "{color.amber.200}",
-      "danger": "{color.red.200}"
+      "danger": "{color.red.100}"
     },
     "overlay": {
       "scrim": "rgba(8, 6, 4, 0.72)"

package/tokens/semantic.high-contrast-dark.json

@@ -0,0 +1,94 @@
+{
+  "color": {
+    "brand": {
+      "primary": "{color.stone.0}",
+      "primaryHover": "{color.stone.100}",
+      "primaryActive": "{color.stone.200}",
+      "accent": "{color.orange.300}",
+      "accentHover": "{color.orange.200}",
+      "accentActive": "{color.orange.400}",
+      "accentStrong": "{color.orange.300}",
+      "onAccent": "{color.stone.950}"
+    },
+    "text": {
+      "primary": "{color.stone.0}",
+      "secondary": "{color.stone.100}",
+      "muted": "{color.stone.200}",
+      "inverse": "{color.stone.950}",
+      "onPrimary": "{color.stone.950}"
+    },
+    "background": {
+      "canvas": "{color.stone.950}",
+      "surface": "{color.stone.950}",
+      "elevated": "{color.stone.900}",
+      "muted": "{color.stone.800}"
+    },
+    "border": {
+      "subtle": "{color.stone.500}",
+      "default": "{color.stone.300}",
+      "strong": "{color.stone.0}"
+    },
+    "state": {
+      "info": "{color.ocean.200}",
+      "success": "{color.green.200}",
+      "warning": "{color.amber.200}",
+      "danger": "{color.red.200}",
+      "onSolid": "{color.stone.950}"
+    },
+    "stateSurface": {
+      "info": "{color.ocean.900}",
+      "success": "{color.green.900}",
+      "warning": "{color.amber.900}",
+      "danger": "{color.red.900}"
+    },
+    "stateBorder": {
+      "info": "{color.ocean.300}",
+      "success": "{color.green.300}",
+      "warning": "{color.amber.300}",
+      "danger": "{color.red.300}"
+    },
+    "stateText": {
+      "info": "{color.ocean.100}",
+      "success": "{color.green.100}",
+      "warning": "{color.amber.100}",
+      "danger": "{color.red.100}"
+    },
+    "overlay": {
+      "scrim": "rgba(0, 0, 0, 0.82)"
+    },
+    "focus": {
+      "ring": "{color.orange.300}"
+    },
+    "avatarSeed": {
+      "1Bg": "{color.ocean.900}",
+      "1Fg": "{color.ocean.100}",
+      "2Bg": "{color.teal.900}",
+      "2Fg": "{color.teal.100}",
+      "3Bg": "{color.amber.900}",
+      "3Fg": "{color.amber.100}",
+      "4Bg": "{color.red.900}",
+      "4Fg": "{color.red.100}",
+      "5Bg": "{color.green.900}",
+      "5Fg": "{color.green.100}",
+      "6Bg": "{color.purple.900}",
+      "6Fg": "{color.purple.100}",
+      "7Bg": "{color.pink.900}",
+      "7Fg": "{color.pink.100}",
+      "8Bg": "{color.stone.800}",
+      "8Fg": "{color.stone.100}"
+    },
+    "chartSeries": {
+      "1": "{color.ocean.200}",
+      "2": "{color.amber.200}",
+      "3": "{color.green.200}",
+      "4": "{color.purple.200}",
+      "5": "{color.pink.200}",
+      "6": "{color.teal.200}",
+      "7": "{color.red.200}",
+      "8": "{color.stone.200}"
+    }
+  },
+  "theme": {
+    "colorScheme": "dark"
+  }
+}

package/tokens/semantic.high-contrast.json

@@ -7,6 +7,7 @@
       "accent": "{color.orange.700}",
       "accentHover": "{color.orange.800}",
       "accentActive": "{color.orange.900}",
+      "accentStrong": "{color.orange.800}",
       "onAccent": "{color.stone.0}"
     },
     "text": {
@@ -20,10 +21,10 @@
       "canvas": "{color.stone.0}",
       "surface": "{color.stone.0}",
       "elevated": "{color.stone.0}",
-      "muted": "{color.stone.50}"
+      "muted": "{color.stone.200}"
     },
     "border": {
-      "subtle": "{color.stone.400}",
+      "subtle": "{color.stone.500}",
       "default": "{color.stone.700}",
       "strong": "{color.stone.950}"
     },

package/tokens/semantic.light.json

@@ -7,6 +7,7 @@
       "accent": "{color.orange.500}",
       "accentHover": "{color.orange.400}",
       "accentActive": "{color.orange.300}",
+      "accentStrong": "{color.orange.600}",
       "onAccent": "{color.stone.950}"
     },
     "text": {
@@ -26,7 +27,7 @@
     "border": {
       "subtle": "{color.stone.200}",
       "default": "{color.stone.500}",
-      "strong": "{color.stone.500}",
+      "strong": "{color.stone.600}",
       "muted": "{color.border.subtle}"
     },
     "state": {