@neuravision/construct 2.0.3 → 2.1.2

package/scripts/construct-theme.mjs

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+
+import path from 'node:path';
+import process from 'node:process';
+
+import { buildTokens, parseArgs } from './build-tokens.mjs';
+
+const help = [
+  'Usage: construct-theme --theme <file> [options]',
+  '',
+  'Builds Construct token outputs with one or more validated product themes.',
+  '',
+  'Options:',
+  '  --theme <file>          custom theme input; repeat to include more themes',
+  '  --out-dir <directory>   output directory (default: ./construct-theme)',
+  '  --check                 fail when the output directory is not up to date',
+  '  --validate-only         validate without writing output',
+  '  --report-contrast       print every measured contrast ratio',
+  '  -h, --help              show this help',
+].join('\n');
+
+const hasOption = (args, name) =>
+  args.includes(name) || args.some((argument) => argument.startsWith(`${name}=`));
+
+try {
+  const args = process.argv.slice(2);
+  const options = parseArgs(args);
+
+  if (options.help) {
+    console.log(help);
+  } else {
+    if (!options.themes.length) {
+      throw new Error('construct-theme requires at least one --theme <file> input.');
+    }
+    if (!hasOption(args, '--out-dir')) {
+      options.outDir = path.resolve(process.cwd(), 'construct-theme');
+    }
+    buildTokens(options);
+  }
+} catch (error) {
+  console.error(error.message);
+  process.exitCode = 1;
+}

package/scripts/validate-tokens.mjs

@@ -0,0 +1,25 @@
+import process from 'node:process';
+import { buildTokens, parseArgs } from './build-tokens.mjs';
+
+try {
+  const forwardedArgs = process.argv.slice(2);
+  if (forwardedArgs.includes('--check')) {
+    throw new Error('validate-tokens.mjs does not accept --check; use build-tokens.mjs --check.');
+  }
+  const options = parseArgs(['--validate-only', ...forwardedArgs]);
+  if (options.help) {
+    console.log(
+      [
+        'Usage: node scripts/validate-tokens.mjs [--theme <file>] [--report-contrast]',
+        '',
+        'Validates token schemas, layer references, theme completeness, unknown',
+        'overrides, and WCAG contrast pairs without writing generated files.',
+      ].join('\n')
+    );
+  } else {
+    buildTokens(options);
+  }
+} catch (error) {
+  console.error(error.message);
+  process.exitCode = 1;
+}

package/standalone/accordion.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/accordion.css';

package/standalone/alert.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/alert.css';

package/standalone/app-shell-v2.css

@@ -0,0 +1,4 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/app-shell-v2.css';
+@import '../components/_shell-shared.css';

package/standalone/app-shell.css

@@ -0,0 +1,4 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/app-shell.css';
+@import '../components/_shell-shared.css';

package/standalone/avatar.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/avatar.css';

package/standalone/badge.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/badge.css';

package/standalone/banner.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/banner.css';

package/standalone/breadcrumbs.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/breadcrumbs.css';

package/standalone/button.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/button.css';

package/standalone/card.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/card.css';

package/standalone/chart.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/chart.css';

package/standalone/checkbox.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/checkbox.css';

package/standalone/chip.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/chip.css';

package/standalone/combobox.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/combobox.css';

package/standalone/core.css

@@ -0,0 +1,4 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import '../tokens/tokens.css';
+@import '../components/_shared.css';
+@import '../components/_keyframes.css';

package/standalone/data-table.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/data-table.css';

package/standalone/datepicker.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/datepicker.css';

package/standalone/datum.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/datum.css';

package/standalone/divider.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/divider.css';

package/standalone/drawer.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/drawer.css';

package/standalone/dropdown.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/dropdown.css';

package/standalone/empty-state.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/empty-state.css';

package/standalone/field.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/field.css';

package/standalone/file-upload.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/file-upload.css';

package/standalone/icon.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/icon.css';

package/standalone/input.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/input.css';

package/standalone/list.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/list.css';

package/standalone/meter.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/meter.css';

package/standalone/modal.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/modal.css';

package/standalone/navbar.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/navbar.css';

package/standalone/pagination.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/pagination.css';

package/standalone/popover.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/popover.css';

package/standalone/progress-bar.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/progress-bar.css';

package/standalone/select-menu.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/select-menu.css';

package/standalone/select.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/select.css';

package/standalone/sidebar.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/sidebar.css';

package/standalone/skeleton.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/skeleton.css';

package/standalone/skip-link.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/skip-link.css';

package/standalone/slider.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/slider.css';

package/standalone/spinner.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/spinner.css';

package/standalone/status.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/status.css';

package/standalone/switch.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/switch.css';

package/standalone/table.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/table.css';

package/standalone/tabs.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/tabs.css';

package/standalone/textarea.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/textarea.css';

package/standalone/toast.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/toast.css';

package/standalone/toggle-group.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/toggle-group.css';

package/standalone/toolbar.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/toolbar.css';

package/standalone/tooltip.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/tooltip.css';

package/standalone/tree.css

@@ -0,0 +1,3 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/tree.css';

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
+    }
+  ]
+}