@quo-systems/ui 0.1.0

package/css/theme-default.css

@@ -0,0 +1,152 @@
+/*
+ * The kit's own face: one neutral palette, light and dark, so a page renders
+ * with no design at all. This is what the dock's screen wears, and what a
+ * mock wears before its design exists.
+ *
+ * Layered, so a design's unlayered tokens.css replaces it slot for slot with
+ * no specificity trick. Three declarations and each is needed: the light
+ * palette at the bare root, the dark one under the system preference for a
+ * page that has chosen nothing, and the dark one again under an explicit
+ * data-theme so a chosen theme wins in both directions.
+ *
+ * Every pairing here clears 4.5:1 for body text and 3:1 for a focus ring
+ * against both of its neighbours. --nv-color-fg-subtle is the one exception
+ * by design: it is for rules, disabled glyphs and decoration, never for text
+ * a reader must read.
+ */
+
+@layer nv.tokens {
+  :root {
+    color-scheme: light;
+
+    --nv-color-bg: #ffffff;
+    --nv-color-bg-raised: #f7f7f8;
+    --nv-color-bg-raised-hover: #f0f0f2;
+    --nv-color-bg-raised-strong: #e8e8ec;
+    --nv-color-bg-sunken: #f2f2f4;
+    --nv-color-bg-overlay: rgb(20 20 24 / 45%);
+
+    --nv-color-fg: #16161a;
+    --nv-color-fg-body: #3a3a42;
+    --nv-color-fg-muted: #5f5f6a;
+    --nv-color-fg-subtle: #8a8a94;
+    --nv-color-fg-on-accent: #ffffff;
+
+    --nv-color-border: #e2e2e6;
+    --nv-color-border-strong: #c9c9d0;
+    --nv-color-border-focus: #2559c8;
+
+    --nv-color-accent: #2559c8;
+    --nv-color-accent-hover: #1d47a3;
+    --nv-color-accent-active: #163a86;
+    --nv-color-accent-subtle: rgb(37 89 200 / 10%);
+
+    --nv-color-success: #0f7052;
+    --nv-color-success-subtle: rgb(15 112 82 / 12%);
+    --nv-color-warning: #8a5200;
+    --nv-color-warning-subtle: rgb(138 82 0 / 12%);
+    --nv-color-danger: #b32020;
+    --nv-color-danger-subtle: rgb(179 32 32 / 12%);
+    --nv-color-info: #4a4a55;
+    --nv-color-info-subtle: rgb(74 74 85 / 10%);
+
+    --nv-color-scroll-thumb: #c9c9d0;
+    --nv-color-scroll-thumb-hover: #a5a5b0;
+
+    --nv-shadow-sm: 0 1px 2px rgb(16 16 20 / 8%);
+    --nv-shadow-md: 0 4px 10px rgb(16 16 20 / 10%);
+    --nv-shadow-lg: 0 10px 24px rgb(16 16 20 / 12%);
+    --nv-shadow-xl: 0 24px 48px rgb(16 16 20 / 16%);
+    --nv-shadow-focus: 0 0 0 3px rgb(37 89 200 / 28%);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+      color-scheme: dark;
+
+      --nv-color-bg: #131317;
+      --nv-color-bg-raised: #1b1b21;
+      --nv-color-bg-raised-hover: #212129;
+      --nv-color-bg-raised-strong: #292932;
+      --nv-color-bg-sunken: #0e0e11;
+      --nv-color-bg-overlay: rgb(8 8 10 / 65%);
+
+      --nv-color-fg: #f2f2f5;
+      --nv-color-fg-body: #c9c9d2;
+      --nv-color-fg-muted: #9a9aa6;
+      --nv-color-fg-subtle: #6c6c78;
+      --nv-color-fg-on-accent: #0e0e11;
+
+      --nv-color-border: #2c2c35;
+      --nv-color-border-strong: #3d3d48;
+      --nv-color-border-focus: #8ab0ff;
+
+      --nv-color-accent: #8ab0ff;
+      --nv-color-accent-hover: #a6c3ff;
+      --nv-color-accent-active: #6d97ea;
+      --nv-color-accent-subtle: rgb(138 176 255 / 14%);
+
+      --nv-color-success: #55c496;
+      --nv-color-success-subtle: rgb(85 196 150 / 14%);
+      --nv-color-warning: #e0a33c;
+      --nv-color-warning-subtle: rgb(224 163 60 / 14%);
+      --nv-color-danger: #ff7b7b;
+      --nv-color-danger-subtle: rgb(255 123 123 / 14%);
+      --nv-color-info: #a8a8b4;
+      --nv-color-info-subtle: rgb(168 168 180 / 12%);
+
+      --nv-color-scroll-thumb: #3d3d48;
+      --nv-color-scroll-thumb-hover: #5a5a68;
+
+      --nv-shadow-sm: 0 1px 2px rgb(0 0 0 / 50%);
+      --nv-shadow-md: 0 4px 10px rgb(0 0 0 / 55%);
+      --nv-shadow-lg: 0 10px 24px rgb(0 0 0 / 60%);
+      --nv-shadow-xl: 0 24px 48px rgb(0 0 0 / 70%);
+      --nv-shadow-focus: 0 0 0 3px rgb(138 176 255 / 32%);
+    }
+  }
+
+  :root[data-theme='dark'] {
+    color-scheme: dark;
+
+    --nv-color-bg: #131317;
+    --nv-color-bg-raised: #1b1b21;
+    --nv-color-bg-raised-hover: #212129;
+    --nv-color-bg-raised-strong: #292932;
+    --nv-color-bg-sunken: #0e0e11;
+    --nv-color-bg-overlay: rgb(8 8 10 / 65%);
+
+    --nv-color-fg: #f2f2f5;
+    --nv-color-fg-body: #c9c9d2;
+    --nv-color-fg-muted: #9a9aa6;
+    --nv-color-fg-subtle: #6c6c78;
+    --nv-color-fg-on-accent: #0e0e11;
+
+    --nv-color-border: #2c2c35;
+    --nv-color-border-strong: #3d3d48;
+    --nv-color-border-focus: #8ab0ff;
+
+    --nv-color-accent: #8ab0ff;
+    --nv-color-accent-hover: #a6c3ff;
+    --nv-color-accent-active: #6d97ea;
+    --nv-color-accent-subtle: rgb(138 176 255 / 14%);
+
+    --nv-color-success: #55c496;
+    --nv-color-success-subtle: rgb(85 196 150 / 14%);
+    --nv-color-warning: #e0a33c;
+    --nv-color-warning-subtle: rgb(224 163 60 / 14%);
+    --nv-color-danger: #ff7b7b;
+    --nv-color-danger-subtle: rgb(255 123 123 / 14%);
+    --nv-color-info: #a8a8b4;
+    --nv-color-info-subtle: rgb(168 168 180 / 12%);
+
+    --nv-color-scroll-thumb: #3d3d48;
+    --nv-color-scroll-thumb-hover: #5a5a68;
+
+    --nv-shadow-sm: 0 1px 2px rgb(0 0 0 / 50%);
+    --nv-shadow-md: 0 4px 10px rgb(0 0 0 / 55%);
+    --nv-shadow-lg: 0 10px 24px rgb(0 0 0 / 60%);
+    --nv-shadow-xl: 0 24px 48px rgb(0 0 0 / 70%);
+    --nv-shadow-focus: 0 0 0 3px rgb(138 176 255 / 32%);
+  }
+}

package/css/tokens.css

@@ -0,0 +1,182 @@
+/*
+ * The token contract: every structural scale, declared once at the root.
+ *
+ * Two halves, and the split is the law. The kit owns structure, the space,
+ * radius, type, motion and z scales below, and a design may never redefine
+ * one; `tokens/manifest.ts` is that list, and conformance reads it. A design
+ * owns colour and shadow, the manifest's theme slots, and declares them
+ * unlayered so they win over anything layered here without a specificity
+ * trick. Structure is immutable; only the face is a design's.
+ *
+ * This file declares no colour. `theme-default.css` is the kit's own face, so
+ * a page renders with no design at all, and a design replaces it.
+ *
+ * Responsive CSS keys on :root[data-tier]. A width media query is illegal
+ * everywhere; the only width source is BREAKPOINTS in the manifest. The one
+ * prefers-reduced-motion block in the kit is here: --nv-motion scales every
+ * decorative duration to zero under reduce.
+ */
+
+@layer nv.tokens, nv.reset, nv.base, nv.components;
+
+@layer nv.tokens {
+  :root {
+    /* Spacing, raw ramp */
+    --nv-space-0: 0;
+    --nv-space-05: 0.125rem;
+    --nv-space-1: 0.25rem;
+    --nv-space-2: 0.5rem;
+    --nv-space-3: 0.75rem;
+    --nv-space-4: 1rem;
+    --nv-space-5: 1.5rem;
+    --nv-space-6: 2rem;
+    --nv-space-7: 3rem;
+    --nv-space-8: 4rem;
+
+    /* Spacing, semantic. Density and tier remap these in one place. */
+    --nv-page-gutter: 1rem;
+    --nv-section-gap: 2rem;
+    --nv-stack-gap: 1rem;
+    --nv-card-pad: 1rem;
+    --nv-form-gap: 0.75rem;
+
+    /* Radii */
+    --nv-radius-sm: 4px;
+    --nv-radius-md: 8px;
+    --nv-radius-lg: 12px;
+    --nv-radius-xl: 16px;
+    --nv-radius-full: 9999px;
+
+    /* Font slots. A design points these at its own faces and ships the
+       files; the kit itself carries no webfont and falls back to the
+       system stacks below. */
+    --nv-font-sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
+    --nv-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --nv-font-display: var(--nv-font-sans);
+
+    /* Type ramp, rem, with fluid display steps */
+    --nv-text-2xs: 0.6875rem;
+    --nv-text-xs: 0.75rem;
+    --nv-text-sm: 0.875rem;
+    --nv-text-base: 1rem;
+    --nv-text-lg: 1.125rem;
+    --nv-text-xl: 1.25rem;
+    --nv-text-2xl: 1.5rem;
+    --nv-text-3xl: clamp(1.75rem, 1.35rem + 1.6vw, 2rem);
+    --nv-text-4xl: clamp(2rem, 1.55rem + 2vw, 2.625rem);
+
+    /* Controls only, and never density-remapped: under 16px effective, iOS
+       zooms the page when the field takes focus. */
+    --nv-text-input: 1rem;
+
+    --nv-leading-tight: 1.2;
+    --nv-leading-normal: 1.5;
+
+    --nv-weight-normal: 400;
+    --nv-weight-medium: 500;
+    --nv-weight-semi: 600;
+    --nv-weight-bold: 700;
+
+    /* Controls, touch floor, icons. A control is sized
+       max(var(--nv-control-*), var(--nv-tap-target)), never one alone. */
+    --nv-control-sm: 2rem;
+    --nv-control-md: 2.5rem;
+    --nv-control-lg: 2.75rem;
+    --nv-tap-target: 0px;
+    --nv-icon-sm: 1rem;
+    --nv-icon-md: 1.25rem;
+    --nv-icon-lg: 1.5rem;
+
+    /* Shell geometry */
+    --nv-header-h: 3.5rem;
+    --nv-tabbar-h: 3.5rem;
+    --nv-sidebar-w: 17.5rem;
+    --nv-rail-w: 4.5rem;
+    --nv-aside-w: 20rem;
+
+    /* The width table. No other file mints a width. */
+    --nv-page-w-xs: 27.5rem;
+    --nv-page-w-sm: 30rem;
+    --nv-page-w-md: 36rem;
+    --nv-page-w-lg: 75rem;
+
+    /* Motion. Every decorative duration scales through --nv-motion; a
+       spinner stays on --nv-duration-spin, because essential motion keeps
+       its meaning under reduce. No logic keys on a decorative
+       transitionend: at --nv-motion 0 a transition fires no event. */
+    --nv-motion: 1;
+    --nv-duration-fast: calc(150ms * var(--nv-motion));
+    --nv-duration-normal: calc(250ms * var(--nv-motion));
+    --nv-duration-slow: calc(400ms * var(--nv-motion));
+    --nv-duration-ambient: calc(2s * var(--nv-motion));
+    --nv-duration-spin: 750ms;
+
+    --nv-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+    --nv-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* The z ladder. A literal z-index of 2 or more is banned everywhere. */
+    --nv-z-sticky: 10;
+    --nv-z-chrome: 50;
+    --nv-z-overlay: 100;
+    --nv-z-dialog: 200;
+    --nv-z-popover: 300;
+    --nv-z-toast: 400;
+    --nv-z-tooltip: 500;
+
+    /* Insets. A native wrap may override these inline, which beats every
+       layer. --nv-inset-bottom is the bottom pad for every docked surface,
+       a max() and never a sum: on iOS the keyboard covers the home
+       indicator, so adding the two pads twice. */
+    --nv-safe-top: env(safe-area-inset-top, 0px);
+    --nv-safe-right: env(safe-area-inset-right, 0px);
+    --nv-safe-bottom: env(safe-area-inset-bottom, 0px);
+    --nv-safe-left: env(safe-area-inset-left, 0px);
+    --nv-kb-inset: 0px;
+    --nv-inset-bottom: max(var(--nv-safe-bottom), var(--nv-kb-inset));
+
+    /* Optional slots, defaulted from the required ones so a design that
+       says nothing about them still paints. */
+    --nv-color-link: var(--nv-color-accent);
+    --nv-color-link-hover: var(--nv-color-accent-hover);
+    --nv-color-border-subtle: var(--nv-color-border);
+    --nv-color-danger-hover: var(--nv-color-danger);
+    --nv-color-fg-on-danger: var(--nv-color-fg-on-accent);
+    --nv-brand-healthy: var(--nv-color-success);
+    --nv-brand-reconnecting: var(--nv-color-warning);
+    --nv-brand-offline: var(--nv-color-danger);
+    --nv-brand-logo-size: 2rem;
+  }
+
+  :root[data-tier='tablet'],
+  :root[data-tier='desktop'] {
+    --nv-page-gutter: 1.5rem;
+  }
+
+  @media (pointer: coarse) {
+    :root {
+      --nv-tap-target: 44px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --nv-motion: 0;
+    }
+  }
+
+  /* Density: one mode, unpinned, so any subtree hosts it and a dense region
+     such as a table scopes it to itself. --nv-text-input and --nv-tap-target
+     stay out: a field never falls under 16px, and the coarse floor still
+     wins through max(). */
+  [data-density='compact'] {
+    --nv-text-sm: 0.8125rem;
+    --nv-text-base: 0.9375rem;
+    --nv-text-lg: 1.0625rem;
+    --nv-control-sm: 1.75rem;
+    --nv-control-md: 2.25rem;
+    --nv-card-pad: 0.75rem;
+    --nv-stack-gap: 0.75rem;
+    --nv-form-gap: 0.5rem;
+    --nv-section-gap: 1.5rem;
+  }
+}

package/dist/css.d.ts

@@ -0,0 +1,5 @@
+export declare const TOKENS: string;
+export declare const THEME_DEFAULT: string;
+export declare const BASE: string;
+export declare const COMPONENTS: string;
+export declare const CSS: string;

package/dist/css.js

@@ -0,0 +1,6 @@
+// Generated from the files beside them. Never edit: run npm run build.
+export const TOKENS = "@layer nv.tokens, nv.reset, nv.base, nv.components;\n@layer nv.tokens {\n  :root {\n    \n    --nv-space-0: 0;\n    --nv-space-05: 0.125rem;\n    --nv-space-1: 0.25rem;\n    --nv-space-2: 0.5rem;\n    --nv-space-3: 0.75rem;\n    --nv-space-4: 1rem;\n    --nv-space-5: 1.5rem;\n    --nv-space-6: 2rem;\n    --nv-space-7: 3rem;\n    --nv-space-8: 4rem;\n    \n    --nv-page-gutter: 1rem;\n    --nv-section-gap: 2rem;\n    --nv-stack-gap: 1rem;\n    --nv-card-pad: 1rem;\n    --nv-form-gap: 0.75rem;\n    \n    --nv-radius-sm: 4px;\n    --nv-radius-md: 8px;\n    --nv-radius-lg: 12px;\n    --nv-radius-xl: 16px;\n    --nv-radius-full: 9999px;\n    \n    --nv-font-sans: system-ui, -apple-system, 'Segoe UI', sans-serif;\n    --nv-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n    --nv-font-display: var(--nv-font-sans);\n    \n    --nv-text-2xs: 0.6875rem;\n    --nv-text-xs: 0.75rem;\n    --nv-text-sm: 0.875rem;\n    --nv-text-base: 1rem;\n    --nv-text-lg: 1.125rem;\n    --nv-text-xl: 1.25rem;\n    --nv-text-2xl: 1.5rem;\n    --nv-text-3xl: clamp(1.75rem, 1.35rem + 1.6vw, 2rem);\n    --nv-text-4xl: clamp(2rem, 1.55rem + 2vw, 2.625rem);\n    \n    --nv-text-input: 1rem;\n    --nv-leading-tight: 1.2;\n    --nv-leading-normal: 1.5;\n    --nv-weight-normal: 400;\n    --nv-weight-medium: 500;\n    --nv-weight-semi: 600;\n    --nv-weight-bold: 700;\n    \n    --nv-control-sm: 2rem;\n    --nv-control-md: 2.5rem;\n    --nv-control-lg: 2.75rem;\n    --nv-tap-target: 0px;\n    --nv-icon-sm: 1rem;\n    --nv-icon-md: 1.25rem;\n    --nv-icon-lg: 1.5rem;\n    \n    --nv-header-h: 3.5rem;\n    --nv-tabbar-h: 3.5rem;\n    --nv-sidebar-w: 17.5rem;\n    --nv-rail-w: 4.5rem;\n    --nv-aside-w: 20rem;\n    \n    --nv-page-w-xs: 27.5rem;\n    --nv-page-w-sm: 30rem;\n    --nv-page-w-md: 36rem;\n    --nv-page-w-lg: 75rem;\n    \n    --nv-motion: 1;\n    --nv-duration-fast: calc(150ms * var(--nv-motion));\n    --nv-duration-normal: calc(250ms * var(--nv-motion));\n    --nv-duration-slow: calc(400ms * var(--nv-motion));\n    --nv-duration-ambient: calc(2s * var(--nv-motion));\n    --nv-duration-spin: 750ms;\n    --nv-ease-out: cubic-bezier(0.16, 1, 0.3, 1);\n    --nv-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n    \n    --nv-z-sticky: 10;\n    --nv-z-chrome: 50;\n    --nv-z-overlay: 100;\n    --nv-z-dialog: 200;\n    --nv-z-popover: 300;\n    --nv-z-toast: 400;\n    --nv-z-tooltip: 500;\n    \n    --nv-safe-top: env(safe-area-inset-top, 0px);\n    --nv-safe-right: env(safe-area-inset-right, 0px);\n    --nv-safe-bottom: env(safe-area-inset-bottom, 0px);\n    --nv-safe-left: env(safe-area-inset-left, 0px);\n    --nv-kb-inset: 0px;\n    --nv-inset-bottom: max(var(--nv-safe-bottom), var(--nv-kb-inset));\n    \n    --nv-color-link: var(--nv-color-accent);\n    --nv-color-link-hover: var(--nv-color-accent-hover);\n    --nv-color-border-subtle: var(--nv-color-border);\n    --nv-color-danger-hover: var(--nv-color-danger);\n    --nv-color-fg-on-danger: var(--nv-color-fg-on-accent);\n    --nv-brand-healthy: var(--nv-color-success);\n    --nv-brand-reconnecting: var(--nv-color-warning);\n    --nv-brand-offline: var(--nv-color-danger);\n    --nv-brand-logo-size: 2rem;\n  }\n  :root[data-tier='tablet'],\n  :root[data-tier='desktop'] {\n    --nv-page-gutter: 1.5rem;\n  }\n  @media (pointer: coarse) {\n    :root {\n      --nv-tap-target: 44px;\n    }\n  }\n  @media (prefers-reduced-motion: reduce) {\n    :root {\n      --nv-motion: 0;\n    }\n  }\n  \n  [data-density='compact'] {\n    --nv-text-sm: 0.8125rem;\n    --nv-text-base: 0.9375rem;\n    --nv-text-lg: 1.0625rem;\n    --nv-control-sm: 1.75rem;\n    --nv-control-md: 2.25rem;\n    --nv-card-pad: 0.75rem;\n    --nv-stack-gap: 0.75rem;\n    --nv-form-gap: 0.5rem;\n    --nv-section-gap: 1.5rem;\n  }\n}";
+export const THEME_DEFAULT = "@layer nv.tokens {\n  :root {\n    color-scheme: light;\n    --nv-color-bg: #ffffff;\n    --nv-color-bg-raised: #f7f7f8;\n    --nv-color-bg-raised-hover: #f0f0f2;\n    --nv-color-bg-raised-strong: #e8e8ec;\n    --nv-color-bg-sunken: #f2f2f4;\n    --nv-color-bg-overlay: rgb(20 20 24 / 45%);\n    --nv-color-fg: #16161a;\n    --nv-color-fg-body: #3a3a42;\n    --nv-color-fg-muted: #5f5f6a;\n    --nv-color-fg-subtle: #8a8a94;\n    --nv-color-fg-on-accent: #ffffff;\n    --nv-color-border: #e2e2e6;\n    --nv-color-border-strong: #c9c9d0;\n    --nv-color-border-focus: #2559c8;\n    --nv-color-accent: #2559c8;\n    --nv-color-accent-hover: #1d47a3;\n    --nv-color-accent-active: #163a86;\n    --nv-color-accent-subtle: rgb(37 89 200 / 10%);\n    --nv-color-success: #0f7052;\n    --nv-color-success-subtle: rgb(15 112 82 / 12%);\n    --nv-color-warning: #8a5200;\n    --nv-color-warning-subtle: rgb(138 82 0 / 12%);\n    --nv-color-danger: #b32020;\n    --nv-color-danger-subtle: rgb(179 32 32 / 12%);\n    --nv-color-info: #4a4a55;\n    --nv-color-info-subtle: rgb(74 74 85 / 10%);\n    --nv-color-scroll-thumb: #c9c9d0;\n    --nv-color-scroll-thumb-hover: #a5a5b0;\n    --nv-shadow-sm: 0 1px 2px rgb(16 16 20 / 8%);\n    --nv-shadow-md: 0 4px 10px rgb(16 16 20 / 10%);\n    --nv-shadow-lg: 0 10px 24px rgb(16 16 20 / 12%);\n    --nv-shadow-xl: 0 24px 48px rgb(16 16 20 / 16%);\n    --nv-shadow-focus: 0 0 0 3px rgb(37 89 200 / 28%);\n  }\n  @media (prefers-color-scheme: dark) {\n    :root:not([data-theme='light']) {\n      color-scheme: dark;\n      --nv-color-bg: #131317;\n      --nv-color-bg-raised: #1b1b21;\n      --nv-color-bg-raised-hover: #212129;\n      --nv-color-bg-raised-strong: #292932;\n      --nv-color-bg-sunken: #0e0e11;\n      --nv-color-bg-overlay: rgb(8 8 10 / 65%);\n      --nv-color-fg: #f2f2f5;\n      --nv-color-fg-body: #c9c9d2;\n      --nv-color-fg-muted: #9a9aa6;\n      --nv-color-fg-subtle: #6c6c78;\n      --nv-color-fg-on-accent: #0e0e11;\n      --nv-color-border: #2c2c35;\n      --nv-color-border-strong: #3d3d48;\n      --nv-color-border-focus: #8ab0ff;\n      --nv-color-accent: #8ab0ff;\n      --nv-color-accent-hover: #a6c3ff;\n      --nv-color-accent-active: #6d97ea;\n      --nv-color-accent-subtle: rgb(138 176 255 / 14%);\n      --nv-color-success: #55c496;\n      --nv-color-success-subtle: rgb(85 196 150 / 14%);\n      --nv-color-warning: #e0a33c;\n      --nv-color-warning-subtle: rgb(224 163 60 / 14%);\n      --nv-color-danger: #ff7b7b;\n      --nv-color-danger-subtle: rgb(255 123 123 / 14%);\n      --nv-color-info: #a8a8b4;\n      --nv-color-info-subtle: rgb(168 168 180 / 12%);\n      --nv-color-scroll-thumb: #3d3d48;\n      --nv-color-scroll-thumb-hover: #5a5a68;\n      --nv-shadow-sm: 0 1px 2px rgb(0 0 0 / 50%);\n      --nv-shadow-md: 0 4px 10px rgb(0 0 0 / 55%);\n      --nv-shadow-lg: 0 10px 24px rgb(0 0 0 / 60%);\n      --nv-shadow-xl: 0 24px 48px rgb(0 0 0 / 70%);\n      --nv-shadow-focus: 0 0 0 3px rgb(138 176 255 / 32%);\n    }\n  }\n  :root[data-theme='dark'] {\n    color-scheme: dark;\n    --nv-color-bg: #131317;\n    --nv-color-bg-raised: #1b1b21;\n    --nv-color-bg-raised-hover: #212129;\n    --nv-color-bg-raised-strong: #292932;\n    --nv-color-bg-sunken: #0e0e11;\n    --nv-color-bg-overlay: rgb(8 8 10 / 65%);\n    --nv-color-fg: #f2f2f5;\n    --nv-color-fg-body: #c9c9d2;\n    --nv-color-fg-muted: #9a9aa6;\n    --nv-color-fg-subtle: #6c6c78;\n    --nv-color-fg-on-accent: #0e0e11;\n    --nv-color-border: #2c2c35;\n    --nv-color-border-strong: #3d3d48;\n    --nv-color-border-focus: #8ab0ff;\n    --nv-color-accent: #8ab0ff;\n    --nv-color-accent-hover: #a6c3ff;\n    --nv-color-accent-active: #6d97ea;\n    --nv-color-accent-subtle: rgb(138 176 255 / 14%);\n    --nv-color-success: #55c496;\n    --nv-color-success-subtle: rgb(85 196 150 / 14%);\n    --nv-color-warning: #e0a33c;\n    --nv-color-warning-subtle: rgb(224 163 60 / 14%);\n    --nv-color-danger: #ff7b7b;\n    --nv-color-danger-subtle: rgb(255 123 123 / 14%);\n    --nv-color-info: #a8a8b4;\n    --nv-color-info-subtle: rgb(168 168 180 / 12%);\n    --nv-color-scroll-thumb: #3d3d48;\n    --nv-color-scroll-thumb-hover: #5a5a68;\n    --nv-shadow-sm: 0 1px 2px rgb(0 0 0 / 50%);\n    --nv-shadow-md: 0 4px 10px rgb(0 0 0 / 55%);\n    --nv-shadow-lg: 0 10px 24px rgb(0 0 0 / 60%);\n    --nv-shadow-xl: 0 24px 48px rgb(0 0 0 / 70%);\n    --nv-shadow-focus: 0 0 0 3px rgb(138 176 255 / 32%);\n  }\n}";
+export const BASE = "@layer nv.reset {\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n  :where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {\n    margin: 0;\n  }\n  :where(ul, ol)[role='list'] {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n  :where(img, picture, video, canvas, svg) {\n    display: block;\n    max-width: 100%;\n  }\n  :where(input, button, textarea, select) {\n    font: inherit;\n    color: inherit;\n  }\n  :where(p, h1, h2, h3, h4, h5, h6) {\n    overflow-wrap: break-word;\n  }\n}\n@layer nv.base {\n  :root {\n    scrollbar-width: thin;\n    scrollbar-color: var(--nv-color-scroll-thumb) transparent;\n  }\n  *::-webkit-scrollbar {\n    width: 5px;\n    height: 5px;\n    background: transparent;\n  }\n  *::-webkit-scrollbar-track {\n    background: transparent;\n  }\n  *::-webkit-scrollbar-thumb {\n    background: var(--nv-color-scroll-thumb);\n    border-radius: 3px;\n  }\n  *::-webkit-scrollbar-thumb:hover {\n    background: var(--nv-color-scroll-thumb-hover);\n  }\n  *::-webkit-scrollbar-corner {\n    background: transparent;\n  }\n  \n  :where(body) {\n    background: var(--nv-color-bg);\n    color: var(--nv-color-fg-body);\n    font-family: var(--nv-font-sans);\n    font-size: var(--nv-text-base);\n    line-height: var(--nv-leading-normal);\n    -webkit-text-size-adjust: 100%;\n  }\n  :where(h1, h2, h3, h4, h5, h6) {\n    color: var(--nv-color-fg);\n    font-family: var(--nv-font-display);\n    font-weight: var(--nv-weight-semi);\n    line-height: var(--nv-leading-tight);\n    text-wrap: balance;\n  }\n  :where(h1) {\n    font-size: var(--nv-text-4xl);\n    letter-spacing: -0.02em;\n  }\n  :where(h2) {\n    font-size: var(--nv-text-3xl);\n    letter-spacing: -0.015em;\n  }\n  :where(h3) {\n    font-size: var(--nv-text-2xl);\n  }\n  :where(h4) {\n    font-size: var(--nv-text-xl);\n  }\n  :where(h5) {\n    font-size: var(--nv-text-lg);\n  }\n  :where(h6) {\n    font-size: var(--nv-text-base);\n  }\n  :where(a) {\n    color: var(--nv-color-link);\n    text-underline-offset: 0.15em;\n  }\n  :where(a:hover) {\n    color: var(--nv-color-link-hover);\n  }\n  :where(code, kbd, samp, pre) {\n    font-family: var(--nv-font-mono);\n    font-size: 0.9em;\n  }\n  :where(hr) {\n    height: 1px;\n    border: 0;\n    background: var(--nv-color-border);\n  }\n  :focus-visible {\n    outline: 2px solid var(--nv-color-border-focus);\n    outline-offset: 2px;\n  }\n  .nv-sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n}";
+export const COMPONENTS = "@layer nv.components {\n  \n  .nv-stack {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nv-stack-gap);\n  }\n  .nv-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--nv-space-2) var(--nv-space-4);\n    align-items: baseline;\n  }\n  .nv-row[data-align='center'] {\n    align-items: center;\n  }\n  .nv-page {\n    width: 100%;\n    max-width: var(--nv-page-w-md);\n    margin-inline: auto;\n    padding-inline: var(--nv-page-gutter);\n  }\n  .nv-page[data-width='sm'] {\n    max-width: var(--nv-page-w-sm);\n  }\n  .nv-page[data-width='lg'] {\n    max-width: var(--nv-page-w-lg);\n  }\n  .nv-section {\n    padding-block: var(--nv-section-gap);\n  }\n  \n  .nv-t-title {\n    color: var(--nv-color-fg);\n    font-family: var(--nv-font-display);\n    font-size: var(--nv-text-3xl);\n    font-weight: var(--nv-weight-semi);\n    line-height: var(--nv-leading-tight);\n    letter-spacing: -0.02em;\n  }\n  .nv-t-lead {\n    color: var(--nv-color-fg);\n    font-size: var(--nv-text-xl);\n    line-height: var(--nv-leading-normal);\n  }\n  .nv-t-body {\n    color: var(--nv-color-fg-body);\n    font-size: var(--nv-text-base);\n  }\n  .nv-t-quiet {\n    color: var(--nv-color-fg-muted);\n    font-size: var(--nv-text-sm);\n  }\n  .nv-t-label {\n    color: var(--nv-color-fg-muted);\n    font-size: var(--nv-text-xs);\n    font-weight: var(--nv-weight-medium);\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n  }\n  \n  .nv-button {\n    display: inline-flex;\n    gap: var(--nv-space-2);\n    align-items: center;\n    justify-content: center;\n    min-height: max(var(--nv-control-md), var(--nv-tap-target));\n    padding-inline: var(--nv-space-4);\n    font-size: var(--nv-text-sm);\n    font-weight: var(--nv-weight-medium);\n    color: var(--nv-color-fg-on-accent);\n    text-decoration: none;\n    cursor: pointer;\n    background: var(--nv-color-accent);\n    border: 1px solid transparent;\n    border-radius: var(--nv-radius-md);\n    transition: background var(--nv-duration-fast) var(--nv-ease-out);\n  }\n  .nv-button:hover {\n    background: var(--nv-color-accent-hover);\n  }\n  .nv-button:active {\n    background: var(--nv-color-accent-active);\n  }\n  .nv-button[disabled],\n  .nv-button[aria-disabled='true'] {\n    cursor: not-allowed;\n    opacity: 0.55;\n  }\n  .nv-button[data-variant='quiet'] {\n    color: var(--nv-color-fg);\n    background: transparent;\n    border-color: var(--nv-color-border-strong);\n  }\n  .nv-button[data-variant='quiet']:hover {\n    background: var(--nv-color-bg-raised-hover);\n  }\n  .nv-button[data-variant='bare'] {\n    min-height: max(var(--nv-control-sm), var(--nv-tap-target));\n    padding-inline: var(--nv-space-2);\n    color: var(--nv-color-fg-muted);\n    background: transparent;\n  }\n  .nv-button[data-variant='bare']:hover {\n    color: var(--nv-color-fg);\n    background: var(--nv-color-bg-raised-hover);\n  }\n  .nv-button[data-variant='danger'] {\n    color: var(--nv-color-fg-on-danger);\n    background: var(--nv-color-danger);\n  }\n  .nv-button[data-variant='danger']:hover {\n    background: var(--nv-color-danger-hover);\n  }\n  \n  :where(input:not([type='checkbox'], [type='radio']), select, textarea) {\n    width: 100%;\n    min-height: max(var(--nv-control-md), var(--nv-tap-target));\n    padding: var(--nv-space-2) var(--nv-space-3);\n    font-size: var(--nv-text-input);\n    color: var(--nv-color-fg);\n    background: var(--nv-color-bg-raised);\n    border: 1px solid var(--nv-color-border-strong);\n    border-radius: var(--nv-radius-md);\n  }\n  :where(textarea) {\n    min-height: calc(var(--nv-control-md) * 2);\n    resize: vertical;\n  }\n  :where(input, select, textarea):disabled {\n    cursor: not-allowed;\n    opacity: 0.55;\n  }\n  :where(input, select, textarea)[aria-invalid='true'] {\n    border-color: var(--nv-color-danger);\n  }\n  :where(input[type='checkbox'], input[type='radio']) {\n    width: var(--nv-icon-md);\n    height: var(--nv-icon-md);\n    accent-color: var(--nv-color-accent);\n  }\n  .nv-field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nv-space-1);\n  }\n  .nv-field > label {\n    color: var(--nv-color-fg);\n    font-size: var(--nv-text-sm);\n    font-weight: var(--nv-weight-medium);\n  }\n  .nv-field > .nv-hint {\n    color: var(--nv-color-fg-muted);\n    font-size: var(--nv-text-xs);\n  }\n  .nv-field > .nv-error {\n    color: var(--nv-color-danger);\n    font-size: var(--nv-text-xs);\n  }\n  .nv-field[data-inline] {\n    flex-direction: row;\n    gap: var(--nv-space-2);\n    align-items: center;\n  }\n  :where(fieldset) {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nv-form-gap);\n    padding: var(--nv-card-pad);\n    margin: 0;\n    border: 1px solid var(--nv-color-border);\n    border-radius: var(--nv-radius-md);\n  }\n  :where(legend) {\n    padding-inline: var(--nv-space-2);\n    color: var(--nv-color-fg);\n    font-size: var(--nv-text-sm);\n    font-weight: var(--nv-weight-medium);\n  }\n  \n  .nv-card {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nv-space-2);\n    padding: var(--nv-card-pad);\n    background: var(--nv-color-bg-raised);\n    border: 1px solid var(--nv-color-border);\n    border-radius: var(--nv-radius-lg);\n  }\n  .nv-cards {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));\n    gap: var(--nv-space-4);\n  }\n  .nv-notice {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nv-space-1);\n    padding: var(--nv-space-3) var(--nv-space-4);\n    color: var(--nv-color-fg);\n    background: var(--nv-color-info-subtle);\n    border-inline-start: 3px solid var(--nv-color-info);\n    border-radius: var(--nv-radius-sm);\n  }\n  .nv-notice[data-tone='success'] {\n    background: var(--nv-color-success-subtle);\n    border-inline-start-color: var(--nv-color-success);\n  }\n  .nv-notice[data-tone='warning'] {\n    background: var(--nv-color-warning-subtle);\n    border-inline-start-color: var(--nv-color-warning);\n  }\n  .nv-notice[data-tone='danger'] {\n    background: var(--nv-color-danger-subtle);\n    border-inline-start-color: var(--nv-color-danger);\n  }\n  \n  .nv-table-scroll {\n    overflow-x: auto;\n  }\n  :where(table) {\n    width: 100%;\n    border-collapse: collapse;\n  }\n  :where(th, td) {\n    padding: var(--nv-space-2) var(--nv-space-3);\n    text-align: start;\n    border-bottom: 1px solid var(--nv-color-border);\n  }\n  :where(th) {\n    color: var(--nv-color-fg);\n    font-size: var(--nv-text-sm);\n    font-weight: var(--nv-weight-semi);\n  }\n  \n  nv-theme {\n    display: inline-flex;\n    gap: var(--nv-space-05);\n    padding: var(--nv-space-05);\n    background: var(--nv-color-bg-raised);\n    border: 1px solid var(--nv-color-border);\n    border-radius: var(--nv-radius-full);\n  }\n  nv-theme button[aria-pressed='true'] {\n    color: var(--nv-color-fg);\n    background: var(--nv-color-bg-raised-strong);\n  }\n}";
+export const CSS = [TOKENS, THEME_DEFAULT, BASE, COMPONENTS].join('\n');

package/dist/elements/theme.d.ts

@@ -0,0 +1,9 @@
+export declare const THEME_KEY = "nv.theme";
+export declare const prepaint: string;
+export declare function applyTheme(value: string, root: HTMLElement): void;
+export declare class NvTheme extends HTMLElement {
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleEvent(event: Event): void;
+    private mark;
+}

package/dist/elements/theme.js

@@ -0,0 +1,75 @@
+// SPDX-License-Identifier: Apache-2.0
+// <nv-theme>: the theme choice, and nothing else.
+//
+// The buttons are the page's, server-rendered, one per theme the surface
+// offers plus `auto` where it offers both. This element only wires them up:
+// it reads the stored choice, writes data-theme on the document, and marks
+// which button is pressed. With no script the buttons are still there and
+// still labelled, and the page still paints, because `auto` is the state a
+// document in no theme is already in.
+//
+// The store is one key, so the app, the screen and a website all read the
+// same choice on the same origin.
+export const THEME_KEY = 'nv.theme';
+// Inline this in <head>, before any stylesheet, or the first paint is the
+// wrong theme and the second one is a flash. It is the only script the kit
+// asks a page to inline, and it is this short on purpose.
+export const prepaint = `try{var t=localStorage.getItem(${JSON.stringify(THEME_KEY)});` +
+    `if(t&&t!=='auto')document.documentElement.dataset.theme=t}catch(e){}`;
+// Storage is gone in a private window, cleared by a browser that blocks site
+// data, and throws outright in some embeddings. A theme control is a
+// convenience, so every read and write fails quietly and the surface stays
+// on `auto`.
+function stored() {
+    try {
+        return localStorage.getItem(THEME_KEY);
+    }
+    catch {
+        return null;
+    }
+}
+function store(value) {
+    try {
+        if (value === 'auto')
+            localStorage.removeItem(THEME_KEY);
+        else
+            localStorage.setItem(THEME_KEY, value);
+    }
+    catch {
+        /* a choice that cannot be remembered still applies to this page */
+    }
+}
+export function applyTheme(value, root) {
+    if (value === 'auto')
+        delete root.dataset.theme;
+    else
+        root.dataset.theme = value;
+}
+export class NvTheme extends HTMLElement {
+    connectedCallback() {
+        this.addEventListener('click', this);
+        this.mark(stored() ?? 'auto');
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this);
+    }
+    handleEvent(event) {
+        const button = event.target?.closest('[data-theme]');
+        if (!button || !this.contains(button))
+            return;
+        const chosen = button.dataset.theme ?? 'auto';
+        store(chosen);
+        this.mark(chosen);
+    }
+    // The document and the buttons say the same thing, always, and the element
+    // is the only writer of either.
+    mark(chosen) {
+        applyTheme(chosen, this.ownerDocument.documentElement);
+        for (const button of this.querySelectorAll('[data-theme]')) {
+            button.setAttribute('aria-pressed', String(button.dataset.theme === chosen));
+        }
+    }
+}
+if (typeof customElements !== 'undefined' && !customElements.get('nv-theme')) {
+    customElements.define('nv-theme', NvTheme);
+}

package/dist/tokens/livery-cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/tokens/livery-cli.js

@@ -0,0 +1,29 @@
+#!/usr/bin/env node
+// SPDX-License-Identifier: Apache-2.0
+// `nv-livery [dir]` compiles the design in a folder: it reads `livery.json`
+// and writes `tokens.css` beside it. A design holds no build script of its
+// own, so there is one compiler in the tree and every design calls it.
+import { readFileSync, writeFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { renderTokensCss } from './livery.js';
+const dir = resolve(process.argv[2] ?? '.');
+const from = resolve(dir, 'livery.json');
+const to = resolve(dir, 'tokens.css');
+let livery;
+try {
+    livery = JSON.parse(readFileSync(from, 'utf8'));
+}
+catch (err) {
+    process.stderr.write(`nv-livery: ${err.message}\n`);
+    process.exit(1);
+}
+let css;
+try {
+    css = renderTokensCss(livery);
+}
+catch (err) {
+    process.stderr.write(`nv-livery: ${err.message}\n`);
+    process.exit(1);
+}
+writeFileSync(to, css);
+process.stdout.write(`nv-livery: ${Object.keys(livery.themes).length} themes from the ${livery.name} design\n`);

package/dist/tokens/livery.d.ts

@@ -0,0 +1,11 @@
+export type Theme = {
+    colorScheme: 'light' | 'dark';
+    slots: Record<string, string>;
+};
+export type Livery = {
+    name: string;
+    themes: Record<string, Theme>;
+};
+export declare function missingSlots(slots: Record<string, string>): string[];
+export declare function forbiddenSlots(slots: Record<string, string>): string[];
+export declare function renderTokensCss(livery: Livery): string;

package/dist/tokens/livery.js

@@ -0,0 +1,39 @@
+// SPDX-License-Identifier: Apache-2.0
+// The livery compiler. A design is one document, `livery.json`, and this
+// turns it into the CSS that document means. The compiler is the kit's
+// because it is the same for every design; the palette is the design's
+// because it is nobody else's.
+import { THEME_SLOTS_REQUIRED, designMaySet } from './manifest.js';
+export function missingSlots(slots) {
+    return THEME_SLOTS_REQUIRED.filter((slot) => slots[slot] === undefined);
+}
+// A design that reaches for structure is refused by name, so the message says
+// which property and not merely that something was wrong.
+export function forbiddenSlots(slots) {
+    return Object.keys(slots).filter((slot) => !designMaySet(slot));
+}
+// Throws on the first theme that leaves a required slot undefined or sets one
+// that belongs to the kit. A design either paints a whole face or it does not
+// compile.
+export function renderTokensCss(livery) {
+    const blocks = [];
+    for (const [theme, { colorScheme, slots }] of Object.entries(livery.themes)) {
+        const missing = missingSlots(slots);
+        if (missing.length > 0) {
+            throw new Error(`${theme}: livery.json declares no value for:\n  ${missing.join('\n  ')}`);
+        }
+        const forbidden = forbiddenSlots(slots);
+        if (forbidden.length > 0) {
+            throw new Error(`${theme}: structure belongs to the kit, and livery.json sets:\n  ${forbidden.join('\n  ')}`);
+        }
+        const declared = Object.entries(slots)
+            .map(([slot, value]) => `  ${slot}: ${value};`)
+            .join('\n');
+        blocks.push(`:root[data-theme='${theme}'] {\n  color-scheme: ${colorScheme};\n\n${declared}\n}`);
+    }
+    return (`/*\n * Generated from livery.json. Never edit: run nv-livery.\n *\n` +
+        ` * The ${livery.name} palette, colour and shadow only, worn by whichever\n` +
+        ` * estate wears the ${livery.name} design. Declared unlayered, so it wins\n` +
+        ` * over the kit's layered defaults without a specificity trick.\n */\n\n` +
+        `${blocks.join('\n\n')}\n`);
+}

package/dist/tokens/manifest.d.ts

@@ -0,0 +1,10 @@
+export declare const BREAKPOINTS: Readonly<{
+    tablet: 768;
+    desktop: 1280;
+}>;
+export declare const STRUCTURAL_PREFIXES: readonly string[];
+export declare const ROLE_COLOR_PREFIX = "--nv-color-role-";
+export declare const THEME_SLOTS_REQUIRED: readonly string[];
+export declare const THEME_SLOTS_OPTIONAL: readonly string[];
+export declare const FONT_SLOTS: readonly string[];
+export declare function designMaySet(property: string): boolean;

package/dist/tokens/manifest.js

@@ -0,0 +1,105 @@
+// SPDX-License-Identifier: Apache-2.0
+// The contract, as data. Every rule about what a design may set and what it
+// may not is one of these lists, so a validator and a reviewer read the same
+// thing. `css/tokens.css` declares the structural side; a design declares the
+// slots.
+// The only width constants there are. Everything else derives from these or
+// from data-tier, and a raw width media query in a component is illegal.
+export const BREAKPOINTS = Object.freeze({ tablet: 768, desktop: 1280 });
+// Root-only, immutable. A design that defines a property under any of these
+// prefixes fails conformance.
+export const STRUCTURAL_PREFIXES = Object.freeze([
+    '--nv-space-',
+    '--nv-radius-',
+    '--nv-text-',
+    '--nv-leading-',
+    '--nv-weight-',
+    '--nv-duration-',
+    '--nv-ease-',
+    '--nv-motion',
+    '--nv-z-',
+    '--nv-control-',
+    '--nv-icon-',
+    '--nv-tap-target',
+    '--nv-safe-',
+    '--nv-kb-inset',
+    '--nv-inset-bottom',
+    '--nv-page-',
+    '--nv-stack-gap',
+    '--nv-card-pad',
+    '--nv-form-gap',
+    '--nv-section-gap',
+    '--nv-header-h',
+    '--nv-tabbar-h',
+    '--nv-sidebar-w',
+    '--nv-rail-w',
+    '--nv-aside-w',
+]);
+// A design may mint a colour under this prefix for a role of its own. Every
+// read of one carries a muted fallback, so an unminted role paints quiet
+// rather than nothing.
+export const ROLE_COLOR_PREFIX = '--nv-color-role-';
+// The slots a design owns, and every one of them is required in every theme
+// it declares. A palette with a hole in it is a palette that paints a
+// surprise on the one screen nobody opened.
+export const THEME_SLOTS_REQUIRED = Object.freeze([
+    '--nv-color-bg',
+    '--nv-color-bg-raised',
+    '--nv-color-bg-raised-hover',
+    '--nv-color-bg-raised-strong',
+    '--nv-color-bg-sunken',
+    '--nv-color-bg-overlay',
+    '--nv-color-fg',
+    '--nv-color-fg-body',
+    '--nv-color-fg-muted',
+    '--nv-color-fg-subtle',
+    '--nv-color-fg-on-accent',
+    '--nv-color-border',
+    '--nv-color-border-strong',
+    '--nv-color-border-focus',
+    '--nv-color-accent',
+    '--nv-color-accent-hover',
+    '--nv-color-accent-active',
+    '--nv-color-accent-subtle',
+    '--nv-color-success',
+    '--nv-color-success-subtle',
+    '--nv-color-warning',
+    '--nv-color-warning-subtle',
+    '--nv-color-danger',
+    '--nv-color-danger-subtle',
+    '--nv-color-info',
+    '--nv-color-info-subtle',
+    '--nv-color-scroll-thumb',
+    '--nv-color-scroll-thumb-hover',
+    '--nv-shadow-sm',
+    '--nv-shadow-md',
+    '--nv-shadow-lg',
+    '--nv-shadow-xl',
+    '--nv-shadow-focus',
+]);
+// Overridable, and defaulted at the root from the required ones, so a design
+// that says nothing about them still paints.
+export const THEME_SLOTS_OPTIONAL = Object.freeze([
+    '--nv-color-link',
+    '--nv-color-link-hover',
+    '--nv-color-border-subtle',
+    '--nv-color-danger-hover',
+    '--nv-color-fg-on-danger',
+    '--nv-brand-healthy',
+    '--nv-brand-reconnecting',
+    '--nv-brand-offline',
+    '--nv-brand-logo-size',
+]);
+// A design may point these at its own faces. It ships the files itself.
+export const FONT_SLOTS = Object.freeze(['--nv-font-sans', '--nv-font-mono', '--nv-font-display']);
+// True when a design may set this property. Every other `--nv-` name is
+// structure and belongs to the kit.
+export function designMaySet(property) {
+    if (STRUCTURAL_PREFIXES.some((prefix) => property.startsWith(prefix)))
+        return false;
+    if (property.startsWith(ROLE_COLOR_PREFIX))
+        return true;
+    if (FONT_SLOTS.includes(property))
+        return true;
+    return THEME_SLOTS_REQUIRED.includes(property) || THEME_SLOTS_OPTIONAL.includes(property);
+}