@neuravision/construct 2.3.2 → 2.4.0

package/scripts/build-tokens.mjs

@@ -22,8 +22,17 @@ const schemaPaths = {
   semantic: path.join(schemasDir, 'semantic.schema.json'),
   components: path.join(schemasDir, 'components.schema.json'),
   theme: path.join(schemasDir, 'theme.schema.json'),
+  grammar: path.join(schemasDir, 'grammar.schema.json'),
 };
 
+/** Grammar sources (`tokens/grammar.<name>.json`) re-map semantic tokens inside a data-grammar scope. */
+const listGrammarSources = () =>
+  fs
+    .readdirSync(tokensDir)
+    .filter((file) => /^grammar\.[a-z][a-z0-9-]*\.json$/.test(file))
+    .sort()
+    .map((file) => path.join(tokensDir, file));
+
 const builtInThemeNames = new Set(['light', 'dark', 'high-contrast', 'high-contrast-dark']);
 
 const defaultContrastPairs = [
@@ -1252,6 +1261,67 @@ const buildTokens = (options) => {
     });
   }
 
+  /*
+   * Grammars (e.g. Aperture as app grammar): every value must reference an existing token so that
+   * one generated block follows all themes – including nested [data-theme] scopes. Each grammar is
+   * resolved against every built-in theme and must pass the same contrast gates as the themes.
+   */
+  const grammars = listGrammarSources().map((grammarPath) => {
+    const grammar = readJson(grammarPath);
+    const relativeGrammarPath = path.relative(designDir, grammarPath);
+    validateSchema(grammar, schemas.grammar, relativeGrammarPath);
+    assertSafeOverrideValues(grammar.semantic, `${relativeGrammarPath}.semantic`);
+    assertKnownOverride(grammar.semantic, semanticLightRaw, relativeGrammarPath);
+    const overrides = flatten(grammar.semantic);
+    for (const entry of overrides) {
+      if (parseReference(entry.value) === null) {
+        throw new Error(
+          `${relativeGrammarPath}: semantic.${entry.pathKey} must reference a token so the grammar follows every theme.`
+        );
+      }
+    }
+    const results = Object.values(builtInThemes).map((theme) => {
+      const semanticRaw = mergeDeep(theme.semanticRaw, grammar.semantic);
+      validateSchema(semanticRaw, schemas.semantic, `${relativeGrammarPath} on theme ${theme.name}`);
+      const layers = buildThemeLayers(`${theme.name} + ${grammar.name}`, semanticRaw, theme.componentRaw);
+      validateResolvedThemeValues({ name: `${theme.name} + ${grammar.name}`, ...layers });
+      return {
+        theme: theme.name,
+        layers,
+        contrastResults: validateContrast({
+          themeName: `${theme.name} + ${grammar.name} grammar`,
+          primitiveLayer,
+          semanticLayer: layers.semanticLayer,
+          componentLayer: layers.componentLayer,
+          pairs: defaultContrastPairs,
+          report: options.reportContrast,
+        }),
+      };
+    });
+    const overriddenNames = new Set(overrides.map((entry) => semanticVarName(entry.path)));
+    const entries = results[0].layers.semanticLayer.cssEntries.filter((entry) =>
+      overriddenNames.has(entry.name)
+    );
+    return { name: grammar.name, selector: grammar.selector, source: relativeGrammarPath, entries, results };
+  });
+
+  /*
+   * :root[...] outranks the system-preference blocks (:root:not([data-theme])); the descendant
+   * [data-theme] selector re-applies the re-map below nested theme scopes, which otherwise reset
+   * the semantic tokens to the default grammar.
+   */
+  const grammarBlocks = grammars.flatMap((grammar) => {
+    if (!grammar.entries.length) return [];
+    const selectors = [`:root${grammar.selector}`, grammar.selector, `${grammar.selector} [data-theme]`];
+    return [
+      `/* Grammar: ${grammar.name} (${grammar.source}) */`,
+      `${selectors.join(',\n')} {`,
+      ...section(`Semantic (${grammar.name} grammar)`, grammar.entries),
+      '}',
+      '',
+    ];
+  });
+
   const lightTheme = builtInThemes.light;
   const darkSemanticDiff = cssDiffEntries(lightTheme.semanticLayer, builtInThemes.dark.semanticLayer);
   const darkSemanticEntries = builtInThemes.dark.semanticLayer.cssEntries;
@@ -1403,6 +1473,8 @@ const buildTokens = (options) => {
       highContrastDarkSemanticEntries,
       highContrastDarkComponentEntries
     ),
+    /* Grammars come last so their re-map wins over theme and system-preference blocks. */
+    ...grammarBlocks,
   ];
 
   const semanticThemes = {};
@@ -1418,6 +1490,7 @@ const buildTokens = (options) => {
     formatVersion: 1,
     layers: ['primitives', 'semantic', 'components'],
     themes: allThemes.map((theme) => theme.name),
+    grammars: grammars.map((grammar) => ({ name: grammar.name, selector: grammar.selector })),
   };
   const cssVars = {
     primitives: primitiveLayer.cssVars,

package/standalone/aperture-app.css

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

package/standalone/bottom-nav.css

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

package/standalone/stepper.css

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

package/tokens/grammar.aperture.json

@@ -0,0 +1,53 @@
+{
+  "$schema": "../schemas/grammar.schema.json",
+  "name": "aperture",
+  "description": "Aperture als App-Grammatik: Paper und Ink, Kobalt als einziger Akzent, 4-px-Radien, Grotesk. Alle Werte verweisen auf themenabhängige Aperture-Rollen, damit ein Block alle Themes abdeckt.",
+  "selector": "[data-grammar=\"aperture\"]",
+  "semantic": {
+    "color": {
+      "brand": {
+        "primary": "{color.aperture.accent}",
+        "primaryHover": "{color.aperture.accentHover}",
+        "primaryActive": "{color.aperture.accentActive}",
+        "accent": "{color.aperture.accent}",
+        "accentHover": "{color.aperture.accentHover}",
+        "accentActive": "{color.aperture.accentActive}",
+        "accentStrong": "{color.aperture.accentActive}",
+        "onAccent": "{color.aperture.onAccent}"
+      },
+      "text": {
+        "primary": "{color.aperture.ink}",
+        "secondary": "{color.aperture.muted}",
+        "muted": "{color.aperture.muted}",
+        "onPrimary": "{color.aperture.onAccent}"
+      },
+      "background": {
+        "canvas": "{color.aperture.paper}",
+        "surface": "{color.aperture.paper}",
+        "elevated": "{color.aperture.elevated}",
+        "muted": "{color.aperture.surface}",
+        "subtle": "{color.aperture.surface}"
+      },
+      "border": {
+        "subtle": "{color.aperture.borderSubtle}",
+        "default": "{color.aperture.muted}",
+        "strong": "{color.aperture.ink}",
+        "muted": "{color.aperture.borderSubtle}"
+      },
+      "focus": {
+        "ring": "{color.aperture.accent}"
+      }
+    },
+    "font": {
+      "family": {
+        "heading": "{font.family.aperture}",
+        "body": "{font.family.aperture}"
+      }
+    },
+    "radius": {
+      "control": "{radius.sm}",
+      "card": "{radius.sm}",
+      "modal": "{radius.sm}"
+    }
+  }
+}

package/tokens/primitives.json

@@ -1,16 +1,25 @@
 {
   "color": {
     "cobalt": {
+      "100": "#DCE2FF",
       "200": "#A5B4FF",
+      "300": "#7D90FF",
       "500": "#2448FF",
-      "700": "#1834CE"
+      "600": "#1E3EE6",
+      "700": "#1834CE",
+      "800": "#132AA6",
+      "900": "#0D1D6E"
     },
     "graphite": {
       "50": "#F5F5F0",
       "100": "#E7E8E2",
+      "200": "#D2D4CC",
+      "300": "#B4B6AE",
       "400": "#95978F",
       "600": "#585B55",
+      "700": "#3E413C",
       "800": "#282B28",
+      "900": "#1B1E1B",
       "950": "#111411"
     },
     "stone": {

package/tokens/semantic.dark.json

@@ -7,7 +7,11 @@
       "muted": "{color.graphite.400}",
       "accent": "{color.cobalt.200}",
       "onAccent": "{color.graphite.950}",
-      "border": "{color.graphite.600}"
+      "border": "{color.graphite.600}",
+      "elevated": "{color.graphite.900}",
+      "accentHover": "{color.cobalt.100}",
+      "accentActive": "{color.cobalt.300}",
+      "borderSubtle": "{color.graphite.700}"
     },
     "brand": {
       "primary": "{color.stone.100}",

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

@@ -7,7 +7,11 @@
       "muted": "{color.stone.0}",
       "accent": "{color.cobalt.200}",
       "onAccent": "{color.graphite.950}",
-      "border": "{color.stone.0}"
+      "border": "{color.stone.0}",
+      "elevated": "{color.graphite.950}",
+      "accentHover": "{color.cobalt.100}",
+      "accentActive": "{color.cobalt.300}",
+      "borderSubtle": "{color.stone.0}"
     },
     "brand": {
       "primary": "{color.stone.0}",

package/tokens/semantic.high-contrast.json

@@ -7,7 +7,11 @@
       "muted": "{color.graphite.950}",
       "accent": "{color.cobalt.700}",
       "onAccent": "{color.stone.0}",
-      "border": "{color.graphite.950}"
+      "border": "{color.graphite.950}",
+      "elevated": "{color.stone.0}",
+      "accentHover": "{color.cobalt.800}",
+      "accentActive": "{color.cobalt.900}",
+      "borderSubtle": "{color.graphite.950}"
     },
     "brand": {
       "primary": "{color.stone.950}",

package/tokens/semantic.light.json

@@ -7,7 +7,11 @@
       "muted": "{color.graphite.600}",
       "accent": "{color.cobalt.500}",
       "onAccent": "{color.stone.0}",
-      "border": "{color.graphite.400}"
+      "border": "{color.graphite.400}",
+      "elevated": "{color.stone.0}",
+      "accentHover": "{color.cobalt.600}",
+      "accentActive": "{color.cobalt.700}",
+      "borderSubtle": "{color.graphite.200}"
     },
     "brand": {
       "primary": "{color.stone.950}",

package/tokens/tokens.css

@@ -1,14 +1,23 @@
 /* Generated by scripts/build-tokens.mjs. Do not edit directly. */
 :root {
   /* Primitive: colors */
+  --color-cobalt-100: #DCE2FF;
   --color-cobalt-200: #A5B4FF;
+  --color-cobalt-300: #7D90FF;
   --color-cobalt-500: #2448FF;
+  --color-cobalt-600: #1E3EE6;
   --color-cobalt-700: #1834CE;
+  --color-cobalt-800: #132AA6;
+  --color-cobalt-900: #0D1D6E;
   --color-graphite-50: #F5F5F0;
   --color-graphite-100: #E7E8E2;
+  --color-graphite-200: #D2D4CC;
+  --color-graphite-300: #B4B6AE;
   --color-graphite-400: #95978F;
   --color-graphite-600: #585B55;
+  --color-graphite-700: #3E413C;
   --color-graphite-800: #282B28;
+  --color-graphite-900: #1B1E1B;
   --color-graphite-950: #111411;
   --color-stone-0: #FFFFFF;
   --color-stone-50: #FAFAF8;
@@ -272,6 +281,10 @@
   --color-aperture-accent: var(--color-cobalt-500);
   --color-aperture-on-accent: var(--color-stone-0);
   --color-aperture-border: var(--color-graphite-400);
+  --color-aperture-elevated: var(--color-stone-0);
+  --color-aperture-accent-hover: var(--color-cobalt-600);
+  --color-aperture-accent-active: var(--color-cobalt-700);
+  --color-aperture-border-subtle: var(--color-graphite-200);
   --color-brand-primary: var(--color-stone-950);
   --color-brand-primary-hover: var(--color-stone-800);
   --color-brand-primary-active: var(--color-stone-900);
@@ -425,6 +438,10 @@
   --color-aperture-accent: var(--color-cobalt-500);
   --color-aperture-on-accent: var(--color-stone-0);
   --color-aperture-border: var(--color-graphite-400);
+  --color-aperture-elevated: var(--color-stone-0);
+  --color-aperture-accent-hover: var(--color-cobalt-600);
+  --color-aperture-accent-active: var(--color-cobalt-700);
+  --color-aperture-border-subtle: var(--color-graphite-200);
   --color-brand-primary: var(--color-stone-950);
   --color-brand-primary-hover: var(--color-stone-800);
   --color-brand-primary-active: var(--color-stone-900);
@@ -623,6 +640,10 @@
   --color-aperture-accent: var(--color-cobalt-200);
   --color-aperture-on-accent: var(--color-graphite-950);
   --color-aperture-border: var(--color-graphite-600);
+  --color-aperture-elevated: var(--color-graphite-900);
+  --color-aperture-accent-hover: var(--color-cobalt-100);
+  --color-aperture-accent-active: var(--color-cobalt-300);
+  --color-aperture-border-subtle: var(--color-graphite-700);
   --color-brand-primary: var(--color-stone-100);
   --color-brand-primary-hover: var(--color-stone-0);
   --color-brand-primary-active: var(--color-stone-200);
@@ -821,6 +842,10 @@
   --color-aperture-accent: var(--color-cobalt-700);
   --color-aperture-on-accent: var(--color-stone-0);
   --color-aperture-border: var(--color-graphite-950);
+  --color-aperture-elevated: var(--color-stone-0);
+  --color-aperture-accent-hover: var(--color-cobalt-800);
+  --color-aperture-accent-active: var(--color-cobalt-900);
+  --color-aperture-border-subtle: var(--color-graphite-950);
   --color-brand-primary: var(--color-stone-950);
   --color-brand-primary-hover: var(--color-stone-900);
   --color-brand-primary-active: var(--color-stone-800);
@@ -1019,6 +1044,10 @@
   --color-aperture-accent: var(--color-cobalt-200);
   --color-aperture-on-accent: var(--color-graphite-950);
   --color-aperture-border: var(--color-stone-0);
+  --color-aperture-elevated: var(--color-graphite-950);
+  --color-aperture-accent-hover: var(--color-cobalt-100);
+  --color-aperture-accent-active: var(--color-cobalt-300);
+  --color-aperture-border-subtle: var(--color-stone-0);
   --color-brand-primary: var(--color-stone-0);
   --color-brand-primary-hover: var(--color-stone-100);
   --color-brand-primary-active: var(--color-stone-200);
@@ -1217,6 +1246,10 @@
     --color-aperture-accent: var(--color-cobalt-200);
     --color-aperture-on-accent: var(--color-graphite-950);
     --color-aperture-border: var(--color-graphite-600);
+    --color-aperture-elevated: var(--color-graphite-900);
+    --color-aperture-accent-hover: var(--color-cobalt-100);
+    --color-aperture-accent-active: var(--color-cobalt-300);
+    --color-aperture-border-subtle: var(--color-graphite-700);
     --color-brand-primary: var(--color-stone-100);
     --color-brand-primary-hover: var(--color-stone-0);
     --color-brand-primary-active: var(--color-stone-200);
@@ -1292,6 +1325,10 @@
     --color-aperture-accent: var(--color-cobalt-700);
     --color-aperture-on-accent: var(--color-stone-0);
     --color-aperture-border: var(--color-graphite-950);
+    --color-aperture-elevated: var(--color-stone-0);
+    --color-aperture-accent-hover: var(--color-cobalt-800);
+    --color-aperture-accent-active: var(--color-cobalt-900);
+    --color-aperture-border-subtle: var(--color-graphite-950);
     --color-brand-primary: var(--color-stone-950);
     --color-brand-primary-hover: var(--color-stone-900);
     --color-brand-primary-active: var(--color-stone-800);
@@ -1491,6 +1528,10 @@
     --color-aperture-accent: var(--color-cobalt-200);
     --color-aperture-on-accent: var(--color-graphite-950);
     --color-aperture-border: var(--color-stone-0);
+    --color-aperture-elevated: var(--color-graphite-950);
+    --color-aperture-accent-hover: var(--color-cobalt-100);
+    --color-aperture-accent-active: var(--color-cobalt-300);
+    --color-aperture-border-subtle: var(--color-stone-0);
     --color-brand-primary: var(--color-stone-0);
     --color-brand-primary-hover: var(--color-stone-100);
     --color-brand-primary-active: var(--color-stone-200);
@@ -1679,3 +1720,37 @@
     --component-datum-scale-major-step: 60px;
   }
 }
+
+/* Grammar: aperture (tokens/grammar.aperture.json) */
+:root[data-grammar="aperture"],
+[data-grammar="aperture"],
+[data-grammar="aperture"] [data-theme] {
+  /* Semantic (aperture grammar) */
+  --color-brand-primary: var(--color-aperture-accent);
+  --color-brand-primary-hover: var(--color-aperture-accent-hover);
+  --color-brand-primary-active: var(--color-aperture-accent-active);
+  --color-brand-accent: var(--color-aperture-accent);
+  --color-brand-accent-hover: var(--color-aperture-accent-hover);
+  --color-brand-accent-active: var(--color-aperture-accent-active);
+  --color-brand-accent-strong: var(--color-aperture-accent-active);
+  --color-brand-on-accent: var(--color-aperture-on-accent);
+  --color-text-primary: var(--color-aperture-ink);
+  --color-text-secondary: var(--color-aperture-muted);
+  --color-text-muted: var(--color-aperture-muted);
+  --color-text-on-primary: var(--color-aperture-on-accent);
+  --color-bg-canvas: var(--color-aperture-paper);
+  --color-bg-surface: var(--color-aperture-paper);
+  --color-bg-elevated: var(--color-aperture-elevated);
+  --color-bg-muted: var(--color-aperture-surface);
+  --color-bg-subtle: var(--color-aperture-surface);
+  --color-border-subtle: var(--color-aperture-border-subtle);
+  --color-border-default: var(--color-aperture-muted);
+  --color-border-strong: var(--color-aperture-ink);
+  --color-border-muted: var(--color-aperture-border-subtle);
+  --color-focus-ring: var(--color-aperture-accent);
+  --font-family-heading: var(--font-family-aperture);
+  --font-family-body: var(--font-family-aperture);
+  --radius-control: var(--radius-sm);
+  --radius-card: var(--radius-sm);
+  --radius-modal: var(--radius-sm);
+}

package/tokens/tokens.js

@@ -12,22 +12,37 @@ export const tokenMetadata = {
     "dark",
     "high-contrast",
     "high-contrast-dark"
+  ],
+  "grammars": [
+    {
+      "name": "aperture",
+      "selector": "[data-grammar=\"aperture\"]"
+    }
   ]
 };
 
 export const primitives = {
   "color": {
     "cobalt": {
+      "100": "#DCE2FF",
       "200": "#A5B4FF",
+      "300": "#7D90FF",
       "500": "#2448FF",
-      "700": "#1834CE"
+      "600": "#1E3EE6",
+      "700": "#1834CE",
+      "800": "#132AA6",
+      "900": "#0D1D6E"
     },
     "graphite": {
       "50": "#F5F5F0",
       "100": "#E7E8E2",
+      "200": "#D2D4CC",
+      "300": "#B4B6AE",
       "400": "#95978F",
       "600": "#585B55",
+      "700": "#3E413C",
       "800": "#282B28",
+      "900": "#1B1E1B",
       "950": "#111411"
     },
     "stone": {
@@ -307,7 +322,11 @@ export const semantic = {
       "muted": "#585B55",
       "accent": "#2448FF",
       "onAccent": "#FFFFFF",
-      "border": "#95978F"
+      "border": "#95978F",
+      "elevated": "#FFFFFF",
+      "accentHover": "#1E3EE6",
+      "accentActive": "#1834CE",
+      "borderSubtle": "#D2D4CC"
     },
     "brand": {
       "primary": "#16130F",
@@ -582,7 +601,11 @@ export const semanticThemes = {
         "muted": "#585B55",
         "accent": "#2448FF",
         "onAccent": "#FFFFFF",
-        "border": "#95978F"
+        "border": "#95978F",
+        "elevated": "#FFFFFF",
+        "accentHover": "#1E3EE6",
+        "accentActive": "#1834CE",
+        "borderSubtle": "#D2D4CC"
       },
       "brand": {
         "primary": "#16130F",
@@ -771,7 +794,11 @@ export const semanticThemes = {
         "muted": "#95978F",
         "accent": "#A5B4FF",
         "onAccent": "#111411",
-        "border": "#585B55"
+        "border": "#585B55",
+        "elevated": "#1B1E1B",
+        "accentHover": "#DCE2FF",
+        "accentActive": "#7D90FF",
+        "borderSubtle": "#3E413C"
       },
       "brand": {
         "primary": "#F1F0EB",
@@ -960,7 +987,11 @@ export const semanticThemes = {
         "muted": "#111411",
         "accent": "#1834CE",
         "onAccent": "#FFFFFF",
-        "border": "#111411"
+        "border": "#111411",
+        "elevated": "#FFFFFF",
+        "accentHover": "#132AA6",
+        "accentActive": "#0D1D6E",
+        "borderSubtle": "#111411"
       },
       "brand": {
         "primary": "#16130F",
@@ -1149,7 +1180,11 @@ export const semanticThemes = {
         "muted": "#FFFFFF",
         "accent": "#A5B4FF",
         "onAccent": "#111411",
-        "border": "#FFFFFF"
+        "border": "#FFFFFF",
+        "elevated": "#111411",
+        "accentHover": "#DCE2FF",
+        "accentActive": "#7D90FF",
+        "borderSubtle": "#FFFFFF"
       },
       "brand": {
         "primary": "#FFFFFF",
@@ -1670,16 +1705,25 @@ export const cssVars = {
   "primitives": {
     "color": {
       "cobalt": {
+        "100": "var(--color-cobalt-100)",
         "200": "var(--color-cobalt-200)",
+        "300": "var(--color-cobalt-300)",
         "500": "var(--color-cobalt-500)",
-        "700": "var(--color-cobalt-700)"
+        "600": "var(--color-cobalt-600)",
+        "700": "var(--color-cobalt-700)",
+        "800": "var(--color-cobalt-800)",
+        "900": "var(--color-cobalt-900)"
       },
       "graphite": {
         "50": "var(--color-graphite-50)",
         "100": "var(--color-graphite-100)",
+        "200": "var(--color-graphite-200)",
+        "300": "var(--color-graphite-300)",
         "400": "var(--color-graphite-400)",
         "600": "var(--color-graphite-600)",
+        "700": "var(--color-graphite-700)",
         "800": "var(--color-graphite-800)",
+        "900": "var(--color-graphite-900)",
         "950": "var(--color-graphite-950)"
       },
       "stone": {
@@ -1958,7 +2002,11 @@ export const cssVars = {
         "muted": "var(--color-aperture-muted)",
         "accent": "var(--color-aperture-accent)",
         "onAccent": "var(--color-aperture-on-accent)",
-        "border": "var(--color-aperture-border)"
+        "border": "var(--color-aperture-border)",
+        "elevated": "var(--color-aperture-elevated)",
+        "accentHover": "var(--color-aperture-accent-hover)",
+        "accentActive": "var(--color-aperture-accent-active)",
+        "borderSubtle": "var(--color-aperture-border-subtle)"
       },
       "brand": {
         "primary": "var(--color-brand-primary)",