@neuravision/construct 2.2.1 → 2.3.2

package/tokens/tokens.css

@@ -1,6 +1,15 @@
 /* Generated by scripts/build-tokens.mjs. Do not edit directly. */
 :root {
   /* Primitive: colors */
+  --color-cobalt-200: #A5B4FF;
+  --color-cobalt-500: #2448FF;
+  --color-cobalt-700: #1834CE;
+  --color-graphite-50: #F5F5F0;
+  --color-graphite-100: #E7E8E2;
+  --color-graphite-400: #95978F;
+  --color-graphite-600: #585B55;
+  --color-graphite-800: #282B28;
+  --color-graphite-950: #111411;
   --color-stone-0: #FFFFFF;
   --color-stone-50: #FAFAF8;
   --color-stone-100: #F1F0EB;
@@ -94,6 +103,7 @@
   --color-pink-800: #461020;
   --color-pink-900: #29080F;
   /* Primitive: typography */
+  --font-family-grotesk: Arial, Helvetica, sans-serif;
   --font-family-brand: "Lato", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
   --font-family-text: "Lato", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
   --font-family-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
@@ -255,6 +265,13 @@
   --bp-lg: 1200px;
   --bp-xl: 1536px;
   /* Semantic: light */
+  --color-aperture-paper: var(--color-graphite-50);
+  --color-aperture-surface: var(--color-graphite-100);
+  --color-aperture-ink: var(--color-graphite-950);
+  --color-aperture-muted: var(--color-graphite-600);
+  --color-aperture-accent: var(--color-cobalt-500);
+  --color-aperture-on-accent: var(--color-stone-0);
+  --color-aperture-border: var(--color-graphite-400);
   --color-brand-primary: var(--color-stone-950);
   --color-brand-primary-hover: var(--color-stone-800);
   --color-brand-primary-active: var(--color-stone-900);
@@ -321,6 +338,7 @@
   --color-chart-series-7: var(--color-red-500);
   --color-chart-series-8: var(--color-stone-600);
   --theme-color-scheme: light;
+  --font-family-aperture: var(--font-family-grotesk);
   --font-family-heading: var(--font-family-brand);
   --font-family-body: var(--font-family-text);
   --font-family-code: var(--font-family-mono);
@@ -332,6 +350,17 @@
   --shadow-dropdown: var(--shadow-md);
   --shadow-modal: var(--shadow-lg);
   /* Component: defaults */
+  --component-aperture-paper: var(--color-aperture-paper);
+  --component-aperture-surface: var(--color-aperture-surface);
+  --component-aperture-ink: var(--color-aperture-ink);
+  --component-aperture-muted: var(--color-aperture-muted);
+  --component-aperture-accent: var(--color-aperture-accent);
+  --component-aperture-on-accent: var(--color-aperture-on-accent);
+  --component-aperture-border: var(--color-aperture-border);
+  --component-aperture-font-family: var(--font-family-aperture);
+  --component-aperture-mark-size: 32px;
+  --component-aperture-action-height: 48px;
+  --component-aperture-panel-radius: var(--radius-sm);
   --component-button-background: var(--color-brand-primary);
   --component-button-background-hover: var(--color-brand-primary-hover);
   --component-button-background-active: var(--color-brand-primary-active);
@@ -389,6 +418,13 @@
 [data-theme="light"] {
   color-scheme: var(--theme-color-scheme);
   /* Semantic (light) */
+  --color-aperture-paper: var(--color-graphite-50);
+  --color-aperture-surface: var(--color-graphite-100);
+  --color-aperture-ink: var(--color-graphite-950);
+  --color-aperture-muted: var(--color-graphite-600);
+  --color-aperture-accent: var(--color-cobalt-500);
+  --color-aperture-on-accent: var(--color-stone-0);
+  --color-aperture-border: var(--color-graphite-400);
   --color-brand-primary: var(--color-stone-950);
   --color-brand-primary-hover: var(--color-stone-800);
   --color-brand-primary-active: var(--color-stone-900);
@@ -455,6 +491,7 @@
   --color-chart-series-7: var(--color-red-500);
   --color-chart-series-8: var(--color-stone-600);
   --theme-color-scheme: light;
+  --font-family-aperture: var(--font-family-grotesk);
   --font-family-heading: var(--font-family-brand);
   --font-family-body: var(--font-family-text);
   --font-family-code: var(--font-family-mono);
@@ -511,6 +548,17 @@
   --shadow-dropdown: var(--shadow-md);
   --shadow-modal: var(--shadow-lg);
   /* Component (light) */
+  --component-aperture-paper: var(--color-aperture-paper);
+  --component-aperture-surface: var(--color-aperture-surface);
+  --component-aperture-ink: var(--color-aperture-ink);
+  --component-aperture-muted: var(--color-aperture-muted);
+  --component-aperture-accent: var(--color-aperture-accent);
+  --component-aperture-on-accent: var(--color-aperture-on-accent);
+  --component-aperture-border: var(--color-aperture-border);
+  --component-aperture-font-family: var(--font-family-aperture);
+  --component-aperture-mark-size: 32px;
+  --component-aperture-action-height: 48px;
+  --component-aperture-panel-radius: var(--radius-sm);
   --component-button-background: var(--color-brand-primary);
   --component-button-background-hover: var(--color-brand-primary-hover);
   --component-button-background-active: var(--color-brand-primary-active);
@@ -568,6 +616,13 @@
 [data-theme="dark"] {
   color-scheme: var(--theme-color-scheme);
   /* Semantic (dark) */
+  --color-aperture-paper: var(--color-graphite-950);
+  --color-aperture-surface: var(--color-graphite-800);
+  --color-aperture-ink: var(--color-graphite-50);
+  --color-aperture-muted: var(--color-graphite-400);
+  --color-aperture-accent: var(--color-cobalt-200);
+  --color-aperture-on-accent: var(--color-graphite-950);
+  --color-aperture-border: var(--color-graphite-600);
   --color-brand-primary: var(--color-stone-100);
   --color-brand-primary-hover: var(--color-stone-0);
   --color-brand-primary-active: var(--color-stone-200);
@@ -634,6 +689,7 @@
   --color-chart-series-7: var(--color-red-300);
   --color-chart-series-8: var(--color-stone-300);
   --theme-color-scheme: dark;
+  --font-family-aperture: var(--font-family-grotesk);
   --font-family-heading: var(--font-family-brand);
   --font-family-body: var(--font-family-text);
   --font-family-code: var(--font-family-mono);
@@ -690,6 +746,17 @@
   --shadow-dropdown: var(--shadow-md);
   --shadow-modal: var(--shadow-lg);
   /* Component (dark) */
+  --component-aperture-paper: var(--color-aperture-paper);
+  --component-aperture-surface: var(--color-aperture-surface);
+  --component-aperture-ink: var(--color-aperture-ink);
+  --component-aperture-muted: var(--color-aperture-muted);
+  --component-aperture-accent: var(--color-aperture-accent);
+  --component-aperture-on-accent: var(--color-aperture-on-accent);
+  --component-aperture-border: var(--color-aperture-border);
+  --component-aperture-font-family: var(--font-family-aperture);
+  --component-aperture-mark-size: 32px;
+  --component-aperture-action-height: 48px;
+  --component-aperture-panel-radius: var(--radius-sm);
   --component-button-background: var(--color-brand-primary);
   --component-button-background-hover: var(--color-brand-primary-hover);
   --component-button-background-active: var(--color-brand-primary-active);
@@ -747,6 +814,13 @@
 [data-theme="high-contrast"] {
   color-scheme: var(--theme-color-scheme);
   /* Semantic (high-contrast) */
+  --color-aperture-paper: var(--color-stone-0);
+  --color-aperture-surface: var(--color-stone-0);
+  --color-aperture-ink: var(--color-graphite-950);
+  --color-aperture-muted: var(--color-graphite-950);
+  --color-aperture-accent: var(--color-cobalt-700);
+  --color-aperture-on-accent: var(--color-stone-0);
+  --color-aperture-border: 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);
@@ -813,6 +887,7 @@
   --color-chart-series-7: var(--color-red-700);
   --color-chart-series-8: var(--color-stone-800);
   --theme-color-scheme: light;
+  --font-family-aperture: var(--font-family-grotesk);
   --font-family-heading: var(--font-family-brand);
   --font-family-body: var(--font-family-text);
   --font-family-code: var(--font-family-mono);
@@ -869,6 +944,17 @@
   --shadow-dropdown: var(--shadow-md);
   --shadow-modal: var(--shadow-lg);
   /* Component (high-contrast) */
+  --component-aperture-paper: var(--color-aperture-paper);
+  --component-aperture-surface: var(--color-aperture-surface);
+  --component-aperture-ink: var(--color-aperture-ink);
+  --component-aperture-muted: var(--color-aperture-muted);
+  --component-aperture-accent: var(--color-aperture-accent);
+  --component-aperture-on-accent: var(--color-aperture-on-accent);
+  --component-aperture-border: var(--color-aperture-border);
+  --component-aperture-font-family: var(--font-family-aperture);
+  --component-aperture-mark-size: 32px;
+  --component-aperture-action-height: 48px;
+  --component-aperture-panel-radius: var(--radius-sm);
   --component-button-background: var(--color-brand-primary);
   --component-button-background-hover: var(--color-brand-primary-hover);
   --component-button-background-active: var(--color-brand-primary-active);
@@ -926,6 +1012,13 @@
 [data-theme="high-contrast-dark"] {
   color-scheme: var(--theme-color-scheme);
   /* Semantic (high-contrast-dark) */
+  --color-aperture-paper: var(--color-graphite-950);
+  --color-aperture-surface: var(--color-graphite-950);
+  --color-aperture-ink: var(--color-stone-0);
+  --color-aperture-muted: var(--color-stone-0);
+  --color-aperture-accent: var(--color-cobalt-200);
+  --color-aperture-on-accent: var(--color-graphite-950);
+  --color-aperture-border: 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);
@@ -992,6 +1085,7 @@
   --color-chart-series-7: var(--color-red-200);
   --color-chart-series-8: var(--color-stone-200);
   --theme-color-scheme: dark;
+  --font-family-aperture: var(--font-family-grotesk);
   --font-family-heading: var(--font-family-brand);
   --font-family-body: var(--font-family-text);
   --font-family-code: var(--font-family-mono);
@@ -1048,6 +1142,17 @@
   --shadow-dropdown: var(--shadow-md);
   --shadow-modal: var(--shadow-lg);
   /* Component (high-contrast-dark) */
+  --component-aperture-paper: var(--color-aperture-paper);
+  --component-aperture-surface: var(--color-aperture-surface);
+  --component-aperture-ink: var(--color-aperture-ink);
+  --component-aperture-muted: var(--color-aperture-muted);
+  --component-aperture-accent: var(--color-aperture-accent);
+  --component-aperture-on-accent: var(--color-aperture-on-accent);
+  --component-aperture-border: var(--color-aperture-border);
+  --component-aperture-font-family: var(--font-family-aperture);
+  --component-aperture-mark-size: 32px;
+  --component-aperture-action-height: 48px;
+  --component-aperture-panel-radius: var(--radius-sm);
   --component-button-background: var(--color-brand-primary);
   --component-button-background-hover: var(--color-brand-primary-hover);
   --component-button-background-active: var(--color-brand-primary-active);
@@ -1105,6 +1210,13 @@
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
     /* Semantic (dark (system)) */
+    --color-aperture-paper: var(--color-graphite-950);
+    --color-aperture-surface: var(--color-graphite-800);
+    --color-aperture-ink: var(--color-graphite-50);
+    --color-aperture-muted: var(--color-graphite-400);
+    --color-aperture-accent: var(--color-cobalt-200);
+    --color-aperture-on-accent: var(--color-graphite-950);
+    --color-aperture-border: var(--color-graphite-600);
     --color-brand-primary: var(--color-stone-100);
     --color-brand-primary-hover: var(--color-stone-0);
     --color-brand-primary-active: var(--color-stone-200);
@@ -1173,6 +1285,13 @@
 @media (prefers-contrast: more) {
   :root:not([data-theme]) {
     /* Semantic (high-contrast (system)) */
+    --color-aperture-paper: var(--color-stone-0);
+    --color-aperture-surface: var(--color-stone-0);
+    --color-aperture-ink: var(--color-graphite-950);
+    --color-aperture-muted: var(--color-graphite-950);
+    --color-aperture-accent: var(--color-cobalt-700);
+    --color-aperture-on-accent: var(--color-stone-0);
+    --color-aperture-border: 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);
@@ -1239,6 +1358,7 @@
     --color-chart-series-7: var(--color-red-700);
     --color-chart-series-8: var(--color-stone-800);
     --theme-color-scheme: light;
+    --font-family-aperture: var(--font-family-grotesk);
     --font-family-heading: var(--font-family-brand);
     --font-family-body: var(--font-family-text);
     --font-family-code: var(--font-family-mono);
@@ -1295,6 +1415,17 @@
     --shadow-dropdown: var(--shadow-md);
     --shadow-modal: var(--shadow-lg);
     /* Component (high-contrast (system)) */
+    --component-aperture-paper: var(--color-aperture-paper);
+    --component-aperture-surface: var(--color-aperture-surface);
+    --component-aperture-ink: var(--color-aperture-ink);
+    --component-aperture-muted: var(--color-aperture-muted);
+    --component-aperture-accent: var(--color-aperture-accent);
+    --component-aperture-on-accent: var(--color-aperture-on-accent);
+    --component-aperture-border: var(--color-aperture-border);
+    --component-aperture-font-family: var(--font-family-aperture);
+    --component-aperture-mark-size: 32px;
+    --component-aperture-action-height: 48px;
+    --component-aperture-panel-radius: var(--radius-sm);
     --component-button-background: var(--color-brand-primary);
     --component-button-background-hover: var(--color-brand-primary-hover);
     --component-button-background-active: var(--color-brand-primary-active);
@@ -1353,6 +1484,13 @@
 @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
     /* Semantic (high-contrast-dark (system)) */
+    --color-aperture-paper: var(--color-graphite-950);
+    --color-aperture-surface: var(--color-graphite-950);
+    --color-aperture-ink: var(--color-stone-0);
+    --color-aperture-muted: var(--color-stone-0);
+    --color-aperture-accent: var(--color-cobalt-200);
+    --color-aperture-on-accent: var(--color-graphite-950);
+    --color-aperture-border: 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);
@@ -1419,6 +1557,7 @@
     --color-chart-series-7: var(--color-red-200);
     --color-chart-series-8: var(--color-stone-200);
     --theme-color-scheme: dark;
+    --font-family-aperture: var(--font-family-grotesk);
     --font-family-heading: var(--font-family-brand);
     --font-family-body: var(--font-family-text);
     --font-family-code: var(--font-family-mono);
@@ -1475,6 +1614,17 @@
     --shadow-dropdown: var(--shadow-md);
     --shadow-modal: var(--shadow-lg);
     /* Component (high-contrast-dark (system)) */
+    --component-aperture-paper: var(--color-aperture-paper);
+    --component-aperture-surface: var(--color-aperture-surface);
+    --component-aperture-ink: var(--color-aperture-ink);
+    --component-aperture-muted: var(--color-aperture-muted);
+    --component-aperture-accent: var(--color-aperture-accent);
+    --component-aperture-on-accent: var(--color-aperture-on-accent);
+    --component-aperture-border: var(--color-aperture-border);
+    --component-aperture-font-family: var(--font-family-aperture);
+    --component-aperture-mark-size: 32px;
+    --component-aperture-action-height: 48px;
+    --component-aperture-panel-radius: var(--radius-sm);
     --component-button-background: var(--color-brand-primary);
     --component-button-background-hover: var(--color-brand-primary-hover);
     --component-button-background-active: var(--color-brand-primary-active);

package/tokens/tokens.js

@@ -17,6 +17,19 @@ export const tokenMetadata = {
 
 export const primitives = {
   "color": {
+    "cobalt": {
+      "200": "#A5B4FF",
+      "500": "#2448FF",
+      "700": "#1834CE"
+    },
+    "graphite": {
+      "50": "#F5F5F0",
+      "100": "#E7E8E2",
+      "400": "#95978F",
+      "600": "#585B55",
+      "800": "#282B28",
+      "950": "#111411"
+    },
     "stone": {
       "0": "#FFFFFF",
       "50": "#FAFAF8",
@@ -130,6 +143,7 @@ export const primitives = {
   },
   "font": {
     "family": {
+      "grotesk": "Arial, Helvetica, sans-serif",
       "brand": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
       "text": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
       "mono": "\"JetBrains Mono\", \"SFMono-Regular\", Menlo, monospace"
@@ -286,6 +300,15 @@ export const primitives = {
 
 export const semantic = {
   "color": {
+    "aperture": {
+      "paper": "#F5F5F0",
+      "surface": "#E7E8E2",
+      "ink": "#111411",
+      "muted": "#585B55",
+      "accent": "#2448FF",
+      "onAccent": "#FFFFFF",
+      "border": "#95978F"
+    },
     "brand": {
       "primary": "#16130F",
       "primaryHover": "#353128",
@@ -381,6 +404,7 @@ export const semantic = {
   },
   "font": {
     "family": {
+      "aperture": "Arial, Helvetica, sans-serif",
       "heading": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
       "body": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
       "code": "\"JetBrains Mono\", \"SFMono-Regular\", Menlo, monospace"
@@ -465,6 +489,19 @@ export const semantic = {
 };
 
 export const components = {
+  "aperture": {
+    "paper": "#F5F5F0",
+    "surface": "#E7E8E2",
+    "ink": "#111411",
+    "muted": "#585B55",
+    "accent": "#2448FF",
+    "onAccent": "#FFFFFF",
+    "border": "#95978F",
+    "fontFamily": "Arial, Helvetica, sans-serif",
+    "markSize": "32px",
+    "actionHeight": "48px",
+    "panelRadius": "4px"
+  },
   "button": {
     "background": "#16130F",
     "backgroundHover": "#353128",
@@ -538,6 +575,15 @@ export const components = {
 export const semanticThemes = {
   "light": {
     "color": {
+      "aperture": {
+        "paper": "#F5F5F0",
+        "surface": "#E7E8E2",
+        "ink": "#111411",
+        "muted": "#585B55",
+        "accent": "#2448FF",
+        "onAccent": "#FFFFFF",
+        "border": "#95978F"
+      },
       "brand": {
         "primary": "#16130F",
         "primaryHover": "#353128",
@@ -633,6 +679,7 @@ export const semanticThemes = {
     },
     "font": {
       "family": {
+        "aperture": "Arial, Helvetica, sans-serif",
         "heading": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
         "body": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
         "code": "\"JetBrains Mono\", \"SFMono-Regular\", Menlo, monospace"
@@ -717,6 +764,15 @@ export const semanticThemes = {
   },
   "dark": {
     "color": {
+      "aperture": {
+        "paper": "#111411",
+        "surface": "#282B28",
+        "ink": "#F5F5F0",
+        "muted": "#95978F",
+        "accent": "#A5B4FF",
+        "onAccent": "#111411",
+        "border": "#585B55"
+      },
       "brand": {
         "primary": "#F1F0EB",
         "primaryHover": "#FFFFFF",
@@ -812,6 +868,7 @@ export const semanticThemes = {
     },
     "font": {
       "family": {
+        "aperture": "Arial, Helvetica, sans-serif",
         "heading": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
         "body": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
         "code": "\"JetBrains Mono\", \"SFMono-Regular\", Menlo, monospace"
@@ -896,6 +953,15 @@ export const semanticThemes = {
   },
   "highContrast": {
     "color": {
+      "aperture": {
+        "paper": "#FFFFFF",
+        "surface": "#FFFFFF",
+        "ink": "#111411",
+        "muted": "#111411",
+        "accent": "#1834CE",
+        "onAccent": "#FFFFFF",
+        "border": "#111411"
+      },
       "brand": {
         "primary": "#16130F",
         "primaryHover": "#211E18",
@@ -991,6 +1057,7 @@ export const semanticThemes = {
     },
     "font": {
       "family": {
+        "aperture": "Arial, Helvetica, sans-serif",
         "heading": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
         "body": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
         "code": "\"JetBrains Mono\", \"SFMono-Regular\", Menlo, monospace"
@@ -1075,6 +1142,15 @@ export const semanticThemes = {
   },
   "highContrastDark": {
     "color": {
+      "aperture": {
+        "paper": "#111411",
+        "surface": "#111411",
+        "ink": "#FFFFFF",
+        "muted": "#FFFFFF",
+        "accent": "#A5B4FF",
+        "onAccent": "#111411",
+        "border": "#FFFFFF"
+      },
       "brand": {
         "primary": "#FFFFFF",
         "primaryHover": "#F1F0EB",
@@ -1170,6 +1246,7 @@ export const semanticThemes = {
     },
     "font": {
       "family": {
+        "aperture": "Arial, Helvetica, sans-serif",
         "heading": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
         "body": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
         "code": "\"JetBrains Mono\", \"SFMono-Regular\", Menlo, monospace"
@@ -1256,6 +1333,19 @@ export const semanticThemes = {
 
 export const componentThemes = {
   "light": {
+    "aperture": {
+      "paper": "#F5F5F0",
+      "surface": "#E7E8E2",
+      "ink": "#111411",
+      "muted": "#585B55",
+      "accent": "#2448FF",
+      "onAccent": "#FFFFFF",
+      "border": "#95978F",
+      "fontFamily": "Arial, Helvetica, sans-serif",
+      "markSize": "32px",
+      "actionHeight": "48px",
+      "panelRadius": "4px"
+    },
     "button": {
       "background": "#16130F",
       "backgroundHover": "#353128",
@@ -1326,6 +1416,19 @@ export const componentThemes = {
     }
   },
   "dark": {
+    "aperture": {
+      "paper": "#111411",
+      "surface": "#282B28",
+      "ink": "#F5F5F0",
+      "muted": "#95978F",
+      "accent": "#A5B4FF",
+      "onAccent": "#111411",
+      "border": "#585B55",
+      "fontFamily": "Arial, Helvetica, sans-serif",
+      "markSize": "32px",
+      "actionHeight": "48px",
+      "panelRadius": "4px"
+    },
     "button": {
       "background": "#F1F0EB",
       "backgroundHover": "#FFFFFF",
@@ -1396,6 +1499,19 @@ export const componentThemes = {
     }
   },
   "highContrast": {
+    "aperture": {
+      "paper": "#FFFFFF",
+      "surface": "#FFFFFF",
+      "ink": "#111411",
+      "muted": "#111411",
+      "accent": "#1834CE",
+      "onAccent": "#FFFFFF",
+      "border": "#111411",
+      "fontFamily": "Arial, Helvetica, sans-serif",
+      "markSize": "32px",
+      "actionHeight": "48px",
+      "panelRadius": "4px"
+    },
     "button": {
       "background": "#16130F",
       "backgroundHover": "#211E18",
@@ -1466,6 +1582,19 @@ export const componentThemes = {
     }
   },
   "highContrastDark": {
+    "aperture": {
+      "paper": "#111411",
+      "surface": "#111411",
+      "ink": "#FFFFFF",
+      "muted": "#FFFFFF",
+      "accent": "#A5B4FF",
+      "onAccent": "#111411",
+      "border": "#FFFFFF",
+      "fontFamily": "Arial, Helvetica, sans-serif",
+      "markSize": "32px",
+      "actionHeight": "48px",
+      "panelRadius": "4px"
+    },
     "button": {
       "background": "#FFFFFF",
       "backgroundHover": "#F1F0EB",
@@ -1540,6 +1669,19 @@ export const componentThemes = {
 export const cssVars = {
   "primitives": {
     "color": {
+      "cobalt": {
+        "200": "var(--color-cobalt-200)",
+        "500": "var(--color-cobalt-500)",
+        "700": "var(--color-cobalt-700)"
+      },
+      "graphite": {
+        "50": "var(--color-graphite-50)",
+        "100": "var(--color-graphite-100)",
+        "400": "var(--color-graphite-400)",
+        "600": "var(--color-graphite-600)",
+        "800": "var(--color-graphite-800)",
+        "950": "var(--color-graphite-950)"
+      },
       "stone": {
         "0": "var(--color-stone-0)",
         "50": "var(--color-stone-50)",
@@ -1653,6 +1795,7 @@ export const cssVars = {
     },
     "font": {
       "family": {
+        "grotesk": "var(--font-family-grotesk)",
         "brand": "var(--font-family-brand)",
         "text": "var(--font-family-text)",
         "mono": "var(--font-family-mono)"
@@ -1808,6 +1951,15 @@ export const cssVars = {
   },
   "semantic": {
     "color": {
+      "aperture": {
+        "paper": "var(--color-aperture-paper)",
+        "surface": "var(--color-aperture-surface)",
+        "ink": "var(--color-aperture-ink)",
+        "muted": "var(--color-aperture-muted)",
+        "accent": "var(--color-aperture-accent)",
+        "onAccent": "var(--color-aperture-on-accent)",
+        "border": "var(--color-aperture-border)"
+      },
       "brand": {
         "primary": "var(--color-brand-primary)",
         "primaryHover": "var(--color-brand-primary-hover)",
@@ -1903,6 +2055,7 @@ export const cssVars = {
     },
     "font": {
       "family": {
+        "aperture": "var(--font-family-aperture)",
         "heading": "var(--font-family-heading)",
         "body": "var(--font-family-body)",
         "code": "var(--font-family-code)"
@@ -1986,6 +2139,19 @@ export const cssVars = {
     }
   },
   "components": {
+    "aperture": {
+      "paper": "var(--component-aperture-paper)",
+      "surface": "var(--component-aperture-surface)",
+      "ink": "var(--component-aperture-ink)",
+      "muted": "var(--component-aperture-muted)",
+      "accent": "var(--component-aperture-accent)",
+      "onAccent": "var(--component-aperture-on-accent)",
+      "border": "var(--component-aperture-border)",
+      "fontFamily": "var(--component-aperture-font-family)",
+      "markSize": "var(--component-aperture-mark-size)",
+      "actionHeight": "var(--component-aperture-action-height)",
+      "panelRadius": "var(--component-aperture-panel-radius)"
+    },
     "button": {
       "background": "var(--component-button-background)",
       "backgroundHover": "var(--component-button-background-hover)",