@evolve.ui/theme-system 1.0.1 → 1.2.0

package/src/themes/BasketballTraining.ts

@@ -0,0 +1,166 @@
+import {
+    colorCritical400,
+    colorCritical50,
+    colorCritical500,
+    colorInfo400,
+    colorInfo50,
+    colorInfo600,
+    colorInfo700,
+    colorPrimary500,
+    colorPrimary700,
+    colorPrimary900,
+    colorSecondary50,
+    colorSuccess300,
+    colorSuccess50,
+    colorSuccess700,
+    colorSuccess900,
+    colorSurface100,
+    colorSurface200,
+    colorSurface300,
+    colorSurface50,
+    colorSurface500,
+    colorSurface900,
+    colorTertiary50,
+    colorWarning300,
+    colorWarning50,
+    colorWarning500,
+    colorWarning600,
+    colorWarning800,
+} from '../tailwind/cssVars';
+import { colorStepArrayToObject, generateNormalColorSteps, generateSurfaceColorSteps } from '../utils/color';
+import { wrapOpacity, wrapVar } from '../utils/wrapVar';
+import { ColorAliasesObject, NonColorCSSVariables } from './generateCSSVars';
+
+// "Court Heat" palette (DS-83, approved 2026-07-12): burnt court-orange hero, midnight-navy
+// secondary, hardwood-teal accent, warm leather-undertoned neutrals. Key names are stable API
+// (buildTheme exposes them) so they keep their original hue names; comments give the actual hue.
+export const coreColors = {
+    amber: colorStepArrayToObject(generateNormalColorSteps('#B45309')), // burnt amber
+    blue: colorStepArrayToObject(generateNormalColorSteps('#0369A1')), // sky blue
+    green: colorStepArrayToObject(generateNormalColorSteps('#15803D')), // court green
+    neutral: colorStepArrayToObject(generateSurfaceColorSteps('#5D564F', true)), // warm gray
+    orange: colorStepArrayToObject(generateNormalColorSteps('#C2410C')), // burnt court orange
+    red: colorStepArrayToObject(generateNormalColorSteps('#CC2B20')), // warm signal red
+    teal: colorStepArrayToObject(generateNormalColorSteps('#1E3A5F')), // midnight navy (was teal)
+    violet: colorStepArrayToObject(generateNormalColorSteps('#0F766E')), // hardwood teal (was violet)
+};
+
+export const colorAliases = {
+    critical: coreColors.red,
+    info: coreColors.blue,
+    primary: coreColors.orange,
+    secondary: coreColors.teal,
+    success: coreColors.green,
+    surface: coreColors.neutral,
+    tertiary: coreColors.violet,
+    warning: coreColors.amber,
+} satisfies ColorAliasesObject;
+
+export const nonColorVariables = {
+    '--box-shadow-01': `0px 4px 4px ${wrapOpacity(wrapVar(colorSurface200), 50)}`,
+    '--box-shadow-02': `0px 1px 4px ${wrapOpacity(wrapVar(colorSurface300), 50)}, 0px 1px 8px ${wrapOpacity(wrapVar(colorSurface200), 50)}`,
+    '--box-shadow-03': `0px 2px 8px ${wrapOpacity(wrapVar(colorSurface300), 50)}, 0px 4px 16px ${wrapOpacity(wrapVar(colorSurface200), 50)}`,
+    '--box-shadow-04': `0px 3px 12px ${wrapOpacity(wrapVar(colorSurface500), 50)}, 0px 6px 24px ${wrapOpacity(wrapVar(colorSurface300), 50)}`,
+    '--box-shadow-05': `0px -4px 4px ${wrapOpacity(wrapVar(colorSurface200), 50)}`,
+    '--button-border-radius': '8px',
+    '--checkbox-border-radius': '4px',
+    '--color-background-critical-dark': wrapVar(colorCritical500),
+    '--color-background-critical-light': wrapVar(colorCritical50),
+    '--color-background-disabled': wrapVar(colorSurface200),
+    '--color-background-hover': wrapVar(colorSurface900),
+    '--color-background-hover-inverse': wrapVar(colorSurface50),
+    '--color-background-info-dark': wrapVar(colorInfo600),
+    '--color-background-info-light': wrapVar(colorInfo50),
+    '--color-background-inverse': wrapVar(colorPrimary900),
+    '--color-background-overlay': wrapVar(colorSurface900),
+    '--color-background-pressed': wrapVar(colorSurface900),
+    '--color-background-pressed-inverse': wrapVar(colorSurface50),
+    '--color-background-primary': wrapVar(colorSurface50),
+    '--color-background-secondary': wrapVar(colorSecondary50),
+    '--color-background-subdued': wrapVar(colorSurface100),
+    '--color-background-success-dark': wrapVar(colorSuccess900),
+    '--color-background-success-light': wrapVar(colorSuccess50),
+    '--color-background-tertiary': wrapVar(colorTertiary50),
+    '--color-background-warning-dark': wrapVar(colorWarning500),
+    '--color-background-warning-light': wrapVar(colorWarning50),
+    '--color-border-black': wrapVar(colorSurface900),
+    '--color-border-critical': wrapVar(colorCritical400),
+    '--color-border-disabled': wrapVar(colorSurface300),
+    '--color-border-hover': wrapVar(colorPrimary700),
+    '--color-border-info': wrapVar(colorInfo400),
+    '--color-border-inverse': wrapVar(colorSurface50),
+    '--color-border-primary': wrapVar(colorSurface300),
+    '--color-border-secondary': wrapVar(colorSurface200),
+    '--color-border-selected': wrapVar(colorPrimary500),
+    '--color-border-success': wrapVar(colorSuccess300),
+    '--color-border-tertiary': wrapVar(colorSurface100),
+    '--color-border-warning': wrapVar(colorWarning300),
+    '--color-focus-inverse': wrapVar(colorSurface50),
+    '--color-focus-primary': wrapVar(colorPrimary500),
+    '--color-icon-critical': wrapVar(colorCritical400),
+    '--color-icon-disabled': wrapVar(colorSurface300),
+    '--color-icon-info': wrapVar(colorInfo400),
+    '--color-icon-inverse': wrapVar(colorSurface50),
+    '--color-icon-primary': wrapVar(colorSurface500),
+    '--color-icon-secondary': wrapVar(colorPrimary500),
+    '--color-icon-success': wrapVar(colorSuccess700),
+    '--color-icon-warning': wrapVar(colorWarning600),
+    '--color-link-disabled': wrapVar(colorSurface300),
+    '--color-link-hover': wrapVar(colorPrimary700),
+    '--color-link-inverse': wrapVar(colorSurface50),
+    '--color-link-inverse-disabled': wrapVar(colorSurface300),
+    '--color-link-inverse-hover': wrapVar(colorSurface100),
+    '--color-link-inverse-pressed': wrapVar(colorSurface200),
+    '--color-link-monochrome': wrapVar(colorSurface900),
+    '--color-link-pressed': wrapVar(colorPrimary900),
+    '--color-link-primary': wrapVar(colorPrimary500),
+    '--color-link-secondary': wrapVar(colorSurface500),
+    '--color-text-critical': wrapVar(colorCritical500),
+    '--color-text-disabled': wrapVar(colorSurface300),
+    '--color-text-inactive': wrapVar(colorSurface300),
+    '--color-text-info': wrapVar(colorInfo700),
+    '--color-text-inverse': wrapVar(colorSurface50),
+    '--color-text-primary': wrapVar(colorSurface900),
+    '--color-text-secondary': wrapVar(colorSurface500),
+    '--color-text-success': wrapVar(colorSuccess900),
+    '--color-text-warning': wrapVar(colorWarning800),
+    '--container-border-radius': '12px',
+    '--font-family-primary': "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    '--font-family-secondary': "'Georgia', serif",
+    '--font-size-button-100': '14px',
+    '--font-size-button-200': '12px',
+    '--font-weight-body-primary': '400',
+    '--font-weight-body-secondary': '400',
+    '--font-weight-button': '600',
+    '--font-weight-caption': '400',
+    '--font-weight-h1': '400',
+    '--font-weight-h2': '400',
+    '--font-weight-h3': '400',
+    '--font-weight-h4': '400',
+    '--font-weight-h5': '600',
+    '--font-weight-h6': '600',
+    '--font-weight-label-mini': '400',
+    '--font-weight-label-strong': '600',
+    '--input-border-radius': '6px',
+    '--letter-spacing-body-primary': '0.2px',
+    '--letter-spacing-body-secondary': '0.2px',
+    '--letter-spacing-button': '1px',
+    '--letter-spacing-caption': '0.2px',
+    '--letter-spacing-h1': '0.2px',
+    '--letter-spacing-h1-mobile': '0.2px',
+    '--letter-spacing-h2': '0.2px',
+    '--letter-spacing-h2-mobile': '0.2px',
+    '--letter-spacing-h3': '0.2px',
+    '--letter-spacing-h3-mobile': '0.2px',
+    '--letter-spacing-h4': '0.2px',
+    '--letter-spacing-h5': '0.2px',
+    '--letter-spacing-h6': '1px',
+    '--letter-spacing-label-mini': '1px',
+    '--letter-spacing-label-strong': '0.2px',
+    '--search-input-border-radius': '24px',
+    '--text-transform-button': 'uppercase',
+    '--text-transform-h6': 'uppercase',
+    '--text-transform-label-mini': 'uppercase',
+    '--width-dense': '1200px',
+    '--width-page': '1644px',
+} satisfies Record<NonColorCSSVariables, string>;

package/src/themes/Default.ts

@@ -0,0 +1,165 @@
+import {
+    colorCritical400,
+    colorCritical50,
+    colorCritical500,
+    colorInfo400,
+    colorInfo50,
+    colorInfo600,
+    colorInfo700,
+    colorPrimary500,
+    colorPrimary700,
+    colorPrimary900,
+    colorSecondary50,
+    colorSuccess300,
+    colorSuccess50,
+    colorSuccess700,
+    colorSuccess900,
+    colorSurface100,
+    colorSurface200,
+    colorSurface300,
+    colorSurface50,
+    colorSurface500,
+    colorSurface900,
+    colorTertiary50,
+    colorWarning300,
+    colorWarning50,
+    colorWarning500,
+    colorWarning600,
+    colorWarning800,
+} from '../tailwind/cssVars';
+import { colorStepArrayToObject, generateNormalColorSteps, generateSurfaceColorSteps } from '../utils/color';
+import { wrapOpacity, wrapVar } from '../utils/wrapVar';
+import { ColorAliasesObject, NonColorCSSVariables } from './generateCSSVars';
+
+// "Graphite & Ink" palette (DS-83, approved 2026-07-12): deep ink-blue primary over cool graphite
+// neutrals. Key names are stable API (buildTheme exposes them); comments give the actual hue.
+export const coreColors = {
+    amber: colorStepArrayToObject(generateNormalColorSteps('#D97706')), // burnt amber
+    blue: colorStepArrayToObject(generateNormalColorSteps('#2563EB')), // royal blue
+    gray: colorStepArrayToObject(generateNormalColorSteps('#33415C')), // ink blue
+    green: colorStepArrayToObject(generateNormalColorSteps('#16A34A')), // emerald
+    neutral: colorStepArrayToObject(generateSurfaceColorSteps('#555E6B', true)), // cool graphite
+    red: colorStepArrayToObject(generateNormalColorSteps('#D92525')), // signal red
+    stone: colorStepArrayToObject(generateNormalColorSteps('#6E6259')), // warm stone
+    zinc: colorStepArrayToObject(generateNormalColorSteps('#5C6470')), // cool zinc
+};
+
+export const colorAliases = {
+    critical: coreColors.red,
+    info: coreColors.blue,
+    primary: coreColors.gray,
+    secondary: coreColors.zinc,
+    success: coreColors.green,
+    surface: coreColors.neutral,
+    tertiary: coreColors.stone,
+    warning: coreColors.amber,
+} satisfies ColorAliasesObject;
+
+export const nonColorVariables = {
+    '--box-shadow-01': `0px 4px 4px ${wrapOpacity(wrapVar(colorSurface200), 50)}`,
+    '--box-shadow-02': `0px 1px 4px ${wrapOpacity(wrapVar(colorSurface300), 50)}, 0px 1px 8px ${wrapOpacity(wrapVar(colorSurface200), 50)}`,
+    '--box-shadow-03': `0px 2px 8px ${wrapOpacity(wrapVar(colorSurface300), 50)}, 0px 4px 16px ${wrapOpacity(wrapVar(colorSurface200), 50)}`,
+    '--box-shadow-04': `0px 3px 12px ${wrapOpacity(wrapVar(colorSurface500), 50)}, 0px 6px 24px ${wrapOpacity(wrapVar(colorSurface300), 50)}`,
+    '--box-shadow-05': `0px -4px 4px ${wrapOpacity(wrapVar(colorSurface200), 50)}`,
+    '--button-border-radius': '8px',
+    '--checkbox-border-radius': '4px',
+    '--color-background-critical-dark': wrapVar(colorCritical500),
+    '--color-background-critical-light': wrapVar(colorCritical50),
+    '--color-background-disabled': wrapVar(colorSurface200),
+    '--color-background-hover': wrapVar(colorSurface900),
+    '--color-background-hover-inverse': wrapVar(colorSurface50),
+    '--color-background-info-dark': wrapVar(colorInfo600),
+    '--color-background-info-light': wrapVar(colorInfo50),
+    '--color-background-inverse': wrapVar(colorPrimary900),
+    '--color-background-overlay': wrapVar(colorSurface900),
+    '--color-background-pressed': wrapVar(colorSurface900),
+    '--color-background-pressed-inverse': wrapVar(colorSurface50),
+    '--color-background-primary': wrapVar(colorSurface50),
+    '--color-background-secondary': wrapVar(colorSecondary50),
+    '--color-background-subdued': wrapVar(colorSurface100),
+    '--color-background-success-dark': wrapVar(colorSuccess900),
+    '--color-background-success-light': wrapVar(colorSuccess50),
+    '--color-background-tertiary': wrapVar(colorTertiary50),
+    '--color-background-warning-dark': wrapVar(colorWarning500),
+    '--color-background-warning-light': wrapVar(colorWarning50),
+    '--color-border-black': wrapVar(colorSurface900),
+    '--color-border-critical': wrapVar(colorCritical400),
+    '--color-border-disabled': wrapVar(colorSurface300),
+    '--color-border-hover': wrapVar(colorPrimary700),
+    '--color-border-info': wrapVar(colorInfo400),
+    '--color-border-inverse': wrapVar(colorSurface50),
+    '--color-border-primary': wrapVar(colorSurface300),
+    '--color-border-secondary': wrapVar(colorSurface200),
+    '--color-border-selected': wrapVar(colorPrimary500),
+    '--color-border-success': wrapVar(colorSuccess300),
+    '--color-border-tertiary': wrapVar(colorSurface100),
+    '--color-border-warning': wrapVar(colorWarning300),
+    '--color-focus-inverse': wrapVar(colorSurface50),
+    '--color-focus-primary': wrapVar(colorPrimary500),
+    '--color-icon-critical': wrapVar(colorCritical400),
+    '--color-icon-disabled': wrapVar(colorSurface300),
+    '--color-icon-info': wrapVar(colorInfo400),
+    '--color-icon-inverse': wrapVar(colorSurface50),
+    '--color-icon-primary': wrapVar(colorSurface500),
+    '--color-icon-secondary': wrapVar(colorPrimary500),
+    '--color-icon-success': wrapVar(colorSuccess700),
+    '--color-icon-warning': wrapVar(colorWarning600),
+    '--color-link-disabled': wrapVar(colorSurface300),
+    '--color-link-hover': wrapVar(colorPrimary700),
+    '--color-link-inverse': wrapVar(colorSurface50),
+    '--color-link-inverse-disabled': wrapVar(colorSurface300),
+    '--color-link-inverse-hover': wrapVar(colorSurface100),
+    '--color-link-inverse-pressed': wrapVar(colorSurface200),
+    '--color-link-monochrome': wrapVar(colorSurface900),
+    '--color-link-pressed': wrapVar(colorPrimary900),
+    '--color-link-primary': wrapVar(colorPrimary500),
+    '--color-link-secondary': wrapVar(colorSurface500),
+    '--color-text-critical': wrapVar(colorCritical500),
+    '--color-text-disabled': wrapVar(colorSurface300),
+    '--color-text-inactive': wrapVar(colorSurface300),
+    '--color-text-info': wrapVar(colorInfo700),
+    '--color-text-inverse': wrapVar(colorSurface50),
+    '--color-text-primary': wrapVar(colorSurface900),
+    '--color-text-secondary': wrapVar(colorSurface500),
+    '--color-text-success': wrapVar(colorSuccess900),
+    '--color-text-warning': wrapVar(colorWarning800),
+    '--container-border-radius': '8px',
+    '--font-family-primary': "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    '--font-family-secondary': "'Georgia', serif",
+    '--font-size-button-100': '14px',
+    '--font-size-button-200': '12px',
+    '--font-weight-body-primary': '400',
+    '--font-weight-body-secondary': '400',
+    '--font-weight-button': '600',
+    '--font-weight-caption': '400',
+    '--font-weight-h1': '400',
+    '--font-weight-h2': '400',
+    '--font-weight-h3': '400',
+    '--font-weight-h4': '400',
+    '--font-weight-h5': '600',
+    '--font-weight-h6': '600',
+    '--font-weight-label-mini': '400',
+    '--font-weight-label-strong': '600',
+    '--input-border-radius': '6px',
+    '--letter-spacing-body-primary': '0.2px',
+    '--letter-spacing-body-secondary': '0.2px',
+    '--letter-spacing-button': '1px',
+    '--letter-spacing-caption': '0.2px',
+    '--letter-spacing-h1': '0.2px',
+    '--letter-spacing-h1-mobile': '0.2px',
+    '--letter-spacing-h2': '0.2px',
+    '--letter-spacing-h2-mobile': '0.2px',
+    '--letter-spacing-h3': '0.2px',
+    '--letter-spacing-h3-mobile': '0.2px',
+    '--letter-spacing-h4': '0.2px',
+    '--letter-spacing-h5': '0.2px',
+    '--letter-spacing-h6': '1px',
+    '--letter-spacing-label-mini': '1px',
+    '--letter-spacing-label-strong': '0.2px',
+    '--search-input-border-radius': '24px',
+    '--text-transform-button': 'uppercase',
+    '--text-transform-h6': 'uppercase',
+    '--text-transform-label-mini': 'uppercase',
+    '--width-dense': '1200px',
+    '--width-page': '1644px',
+} satisfies Record<NonColorCSSVariables, string>;

package/src/themes/EverydayHarbor.ts

@@ -0,0 +1,147 @@
+import type { ColorAliasesObject, NonColorCSSVariables } from './generateCSSVars';
+
+/**
+ * "Harbor Ink" palette (brief of 2026-10-07), solid tokens only. The effect layer comes later.
+ *
+ * Ink-first: every ramp is reversed (inkRamps.ts) so the shared semantic map keeps working on a navy
+ * canvas. The brand differs from Default's map ONLY in `inkOverrides` and `inkShape`;
+ * EverydayHarbor.spec pins that the diff is exactly those keys.
+ *
+ * Where the approved hexes land (exact, asserted by EverydayHarbor.spec):
+ *   surface-50  #0B1626 canvas (background-primary, text-inverse)   surface-100 #12223A card
+ *   surface-200 #1A2E4A raised                                     surface-300 #56708F border / ring track
+ *   surface-500 #A9B6C6 muted text (solid)                          surface-600 #B9C5D3 muted text (glass)
+ *   surface-900 #EEF2F6 text-primary
+ *   primary-400 #2E6BA6 harbor blue (seed)    primary-500 #70B2EE the on-ink action step (see `harbor`)
+ *   info-400    #8EC5E8 links / info (seed)   info-500    #A5D1ED ring arc (icon-secondary, ring option B)
+ *   tertiary-400 #E3B341 gold focus ring (seed)
+ *   success-400 #A3B04E olive (seed)          warning-400 #D9963E (seed, CTA gradient end)
+ *   critical-400 #E5534B (seed, NOT in the brief: proposed, Dave to confirm)
+ *
+ * Surface ramp: seven steps are approved anchors (50, 100, 200, 300, 500, 600, 900). The other three
+ * are filled monotonically by per-channel sRGB interpolation, rounded to nearest:
+ *   400 = midpoint of 300 and 500;  700 and 800 = one third and two thirds of the way from 600 to 900.
+ * EverydayHarbor.spec recomputes them, so the rule is pinned rather than prose.
+ */
+import {
+    colorInfo400,
+    colorInfo500,
+    colorInfo600,
+    colorSuccess400,
+    colorSurface100,
+    colorSurface50,
+    colorTertiary400,
+    colorWarning100,
+    colorWarning400,
+    colorWarning500,
+} from '../tailwind/cssVars';
+import { wrapVar } from '../utils/wrapVar';
+import { nonColorVariables as sharedSemanticMap } from './Default';
+import { anchoredSteps, inkNormalSteps } from './inkRamps';
+import { hexToChannels } from './wcag';
+
+const harborGenerated = inkNormalSteps('#2E6BA6');
+
+/**
+ * Harbor primary ramp. 50-400 are the generated ink steps (seed #2E6BA6 stays on 400). Two steps are
+ * pinned by hand because the generated 500 (#4489CB) is too dark for the pairs core hard-codes
+ * around it:
+ *  - 500 #70B2EE is "the on-ink action step": navy text-inverse on it (filled button) 8.1:1, it as text
+ *    on the canvas / card / raised panel (outlined, transparent, filledInverse) 8.1 / 7.1 / 6.1:1, and
+ *    as text on the dark status tints (transparent Callout actions) >= 4.9:1 on the tightest, info-light.
+ *    The reference orb blue #5B9BD8 was tried first and only reaches 3.7:1 on info-light.
+ *  - 600 #95C3ED is the midpoint of 500 and the generated 700, so the ramp stays strictly lighter.
+ * 700-900 (hover / active text) are the generated steps.
+ */
+const harbor = {
+    ...harborGenerated,
+    '500': hexToChannels('#70B2EE'),
+    '600': hexToChannels('#95C3ED'),
+};
+
+export const coreColors = {
+    amber: inkNormalSteps('#D9963E'), // CTA gradient end
+    coral: inkNormalSteps('#E5534B'), // proposed critical
+    gold: inkNormalSteps('#E3B341'),
+    harbor,
+    ink: anchoredSteps({
+        '50': '#0B1626',
+        '100': '#12223A',
+        '200': '#1A2E4A',
+        '300': '#56708F',
+        '400': '#8093AB', // interpolated: midpoint of 300 and 500
+        '500': '#A9B6C6',
+        '600': '#B9C5D3',
+        '700': '#CBD4DF', // interpolated: 1/3 from 600 to 900
+        '800': '#DCE3EA', // interpolated: 2/3 from 600 to 900
+        '900': '#EEF2F6',
+    }),
+    olive: inkNormalSteps('#A3B04E'),
+    sky: inkNormalSteps('#8EC5E8'),
+    slate: inkNormalSteps('#56708F'),
+};
+
+export const colorAliases = {
+    critical: coreColors.coral,
+    info: coreColors.sky,
+    primary: coreColors.harbor,
+    secondary: coreColors.slate,
+    success: coreColors.olive,
+    surface: coreColors.ink,
+    tertiary: coreColors.gold,
+    warning: coreColors.amber,
+} satisfies ColorAliasesObject;
+
+const BLACK_SHADOW = (y: number, blur: number, alpha: number) => `0px ${y}px ${blur}px rgb(0 0 0 / ${alpha}%)`;
+
+/**
+ * The only colour bindings that differ from the shared map. Reasons:
+ *  - overlay: the shared map scrims with surface-900, which is now the palest step; use the navy.
+ *  - background-secondary: the card colour (#12223A), not slate-50.
+ *  - status text/icons/strong fills: the shared map picks far-from-canvas steps (700-900) to darken
+ *    on white; on reversed ramps those are near-white and lose hue, so bind the seed (400) or 500.
+ *  - warning-dark: bold Badge / BannerNotification warning put text-primary (pale) and icon-primary on it
+ *    (Badge.tsx 'text-text-primary', BannerIcon color='primary'), so it needs a DEEP amber (warning-100
+ *    #754C17: 6.7:1 text, 3.6:1 icon). critical-dark / info-dark / success-dark carry text-inverse
+ *    (navy) and keep the shared light bindings.
+ *  - focus-primary: gold ring (brief).  link-*: light blue links (brief).
+ *  - icon-secondary: ring arc #A5D1ED (option B). icon-disabled is NOT overridden: the shared
+ *    surface-300 binding already resolves to the ring track colour #56708F.
+ */
+const inkOverrides = {
+    '--color-background-overlay': wrapVar(colorSurface50),
+    '--color-background-secondary': wrapVar(colorSurface100),
+    '--color-background-success-dark': wrapVar(colorSuccess400),
+    '--color-background-warning-dark': wrapVar(colorWarning100),
+    '--color-focus-primary': wrapVar(colorTertiary400),
+    '--color-icon-secondary': wrapVar(colorInfo500),
+    '--color-icon-success': wrapVar(colorSuccess400),
+    '--color-icon-warning': wrapVar(colorWarning400),
+    '--color-link-hover': wrapVar(colorInfo500),
+    '--color-link-pressed': wrapVar(colorInfo600),
+    '--color-link-primary': wrapVar(colorInfo400),
+    '--color-text-info': wrapVar(colorInfo400),
+    '--color-text-success': wrapVar(colorSuccess400),
+    '--color-text-warning': wrapVar(colorWarning500),
+} as const satisfies Partial<Record<NonColorCSSVariables, string>>;
+
+/** Shape tokens: Inter for every heading (h1-h4 read --font-family-secondary), black drop shadows. */
+const inkShape = {
+    '--box-shadow-01': BLACK_SHADOW(4, 4, 45),
+    '--box-shadow-02': `${BLACK_SHADOW(1, 4, 45)}, ${BLACK_SHADOW(1, 8, 35)}`,
+    '--box-shadow-03': `${BLACK_SHADOW(2, 8, 45)}, ${BLACK_SHADOW(4, 16, 35)}`,
+    '--box-shadow-04': `${BLACK_SHADOW(3, 12, 50)}, ${BLACK_SHADOW(6, 24, 40)}`,
+    '--box-shadow-05': BLACK_SHADOW(-4, 4, 45),
+    '--container-border-radius': '12px',
+    '--font-family-secondary': "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    // --text-transform-button stays 'uppercase' (inherited). OPEN for Dave: the brief is silent.
+} as const satisfies Partial<Record<NonColorCSSVariables, string>>;
+
+export const nonColorVariables = {
+    ...sharedSemanticMap,
+    ...inkOverrides,
+    ...inkShape,
+} satisfies Record<NonColorCSSVariables, string>;
+
+/** Exported for EverydayHarbor.spec ("differs from the shared map exactly here"). */
+export const everydayHarborOverrides = { ...inkOverrides, ...inkShape };

package/src/themes/ProfessionalBrand.ts

@@ -0,0 +1,166 @@
+import {
+    colorCritical400,
+    colorCritical50,
+    colorCritical500,
+    colorInfo400,
+    colorInfo50,
+    colorInfo600,
+    colorInfo700,
+    colorPrimary500,
+    colorPrimary700,
+    colorPrimary900,
+    colorSecondary50,
+    colorSuccess300,
+    colorSuccess50,
+    colorSuccess700,
+    colorSuccess900,
+    colorSurface100,
+    colorSurface200,
+    colorSurface300,
+    colorSurface50,
+    colorSurface500,
+    colorSurface900,
+    colorTertiary50,
+    colorWarning300,
+    colorWarning50,
+    colorWarning500,
+    colorWarning600,
+    colorWarning800,
+} from '../tailwind/cssVars';
+import { colorStepArrayToObject, generateNormalColorSteps, generateSurfaceColorSteps } from '../utils/color';
+import { wrapOpacity, wrapVar } from '../utils/wrapVar';
+import { ColorAliasesObject, NonColorCSSVariables } from './generateCSSVars';
+
+// "Boardroom Blue" palette (DS-83, approved 2026-07-12): deep corporate-blue primary that is no
+// longer identical to the info status — info moves to its own cyan family (additive key). Key
+// names are stable API (buildTheme exposes them); comments give the actual hue.
+export const coreColors = {
+    amber: colorStepArrayToObject(generateNormalColorSteps('#B45309')), // burnt amber
+    blue: colorStepArrayToObject(generateNormalColorSteps('#1D4ED8')), // corporate blue
+    cyan: colorStepArrayToObject(generateNormalColorSteps('#0C6478')), // info cyan
+    green: colorStepArrayToObject(generateNormalColorSteps('#047857')), // deep green
+    indigo: colorStepArrayToObject(generateNormalColorSteps('#4F46E5')), // refined indigo
+    neutral: colorStepArrayToObject(generateSurfaceColorSteps('#525B6E', true)), // cool slate-gray
+    red: colorStepArrayToObject(generateNormalColorSteps('#D42424')), // signal red
+    slate: colorStepArrayToObject(generateNormalColorSteps('#475569')), // slate
+};
+
+export const colorAliases = {
+    critical: coreColors.red,
+    info: coreColors.cyan,
+    primary: coreColors.blue,
+    secondary: coreColors.slate,
+    success: coreColors.green,
+    surface: coreColors.neutral,
+    tertiary: coreColors.indigo,
+    warning: coreColors.amber,
+} satisfies ColorAliasesObject;
+
+export const nonColorVariables = {
+    '--box-shadow-01': `0px 4px 4px ${wrapOpacity(wrapVar(colorSurface200), 50)}`,
+    '--box-shadow-02': `0px 1px 4px ${wrapOpacity(wrapVar(colorSurface300), 50)}, 0px 1px 8px ${wrapOpacity(wrapVar(colorSurface200), 50)}`,
+    '--box-shadow-03': `0px 2px 8px ${wrapOpacity(wrapVar(colorSurface300), 50)}, 0px 4px 16px ${wrapOpacity(wrapVar(colorSurface200), 50)}`,
+    '--box-shadow-04': `0px 3px 12px ${wrapOpacity(wrapVar(colorSurface500), 50)}, 0px 6px 24px ${wrapOpacity(wrapVar(colorSurface300), 50)}`,
+    '--box-shadow-05': `0px -4px 4px ${wrapOpacity(wrapVar(colorSurface200), 50)}`,
+    '--button-border-radius': '8px',
+    '--checkbox-border-radius': '4px',
+    '--color-background-critical-dark': wrapVar(colorCritical500),
+    '--color-background-critical-light': wrapVar(colorCritical50),
+    '--color-background-disabled': wrapVar(colorSurface200),
+    '--color-background-hover': wrapVar(colorSurface900),
+    '--color-background-hover-inverse': wrapVar(colorSurface50),
+    '--color-background-info-dark': wrapVar(colorInfo600),
+    '--color-background-info-light': wrapVar(colorInfo50),
+    '--color-background-inverse': wrapVar(colorPrimary900),
+    '--color-background-overlay': wrapVar(colorSurface900),
+    '--color-background-pressed': wrapVar(colorSurface900),
+    '--color-background-pressed-inverse': wrapVar(colorSurface50),
+    '--color-background-primary': wrapVar(colorSurface50),
+    '--color-background-secondary': wrapVar(colorSecondary50),
+    '--color-background-subdued': wrapVar(colorSurface100),
+    '--color-background-success-dark': wrapVar(colorSuccess900),
+    '--color-background-success-light': wrapVar(colorSuccess50),
+    '--color-background-tertiary': wrapVar(colorTertiary50),
+    '--color-background-warning-dark': wrapVar(colorWarning500),
+    '--color-background-warning-light': wrapVar(colorWarning50),
+    '--color-border-black': wrapVar(colorSurface900),
+    '--color-border-critical': wrapVar(colorCritical400),
+    '--color-border-disabled': wrapVar(colorSurface300),
+    '--color-border-hover': wrapVar(colorPrimary700),
+    '--color-border-info': wrapVar(colorInfo400),
+    '--color-border-inverse': wrapVar(colorSurface50),
+    '--color-border-primary': wrapVar(colorSurface300),
+    '--color-border-secondary': wrapVar(colorSurface200),
+    '--color-border-selected': wrapVar(colorPrimary500),
+    '--color-border-success': wrapVar(colorSuccess300),
+    '--color-border-tertiary': wrapVar(colorSurface100),
+    '--color-border-warning': wrapVar(colorWarning300),
+    '--color-focus-inverse': wrapVar(colorSurface50),
+    '--color-focus-primary': wrapVar(colorPrimary500),
+    '--color-icon-critical': wrapVar(colorCritical400),
+    '--color-icon-disabled': wrapVar(colorSurface300),
+    '--color-icon-info': wrapVar(colorInfo400),
+    '--color-icon-inverse': wrapVar(colorSurface50),
+    '--color-icon-primary': wrapVar(colorSurface500),
+    '--color-icon-secondary': wrapVar(colorPrimary500),
+    '--color-icon-success': wrapVar(colorSuccess700),
+    '--color-icon-warning': wrapVar(colorWarning600),
+    '--color-link-disabled': wrapVar(colorSurface300),
+    '--color-link-hover': wrapVar(colorPrimary700),
+    '--color-link-inverse': wrapVar(colorSurface50),
+    '--color-link-inverse-disabled': wrapVar(colorSurface300),
+    '--color-link-inverse-hover': wrapVar(colorSurface100),
+    '--color-link-inverse-pressed': wrapVar(colorSurface200),
+    '--color-link-monochrome': wrapVar(colorSurface900),
+    '--color-link-pressed': wrapVar(colorPrimary900),
+    '--color-link-primary': wrapVar(colorPrimary500),
+    '--color-link-secondary': wrapVar(colorSurface500),
+    '--color-text-critical': wrapVar(colorCritical500),
+    '--color-text-disabled': wrapVar(colorSurface300),
+    '--color-text-inactive': wrapVar(colorSurface300),
+    '--color-text-info': wrapVar(colorInfo700),
+    '--color-text-inverse': wrapVar(colorSurface50),
+    '--color-text-primary': wrapVar(colorSurface900),
+    '--color-text-secondary': wrapVar(colorSurface500),
+    '--color-text-success': wrapVar(colorSuccess900),
+    '--color-text-warning': wrapVar(colorWarning800),
+    '--container-border-radius': '12px',
+    '--font-family-primary': "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    '--font-family-secondary': "'Georgia', serif",
+    '--font-size-button-100': '14px',
+    '--font-size-button-200': '12px',
+    '--font-weight-body-primary': '400',
+    '--font-weight-body-secondary': '400',
+    '--font-weight-button': '600',
+    '--font-weight-caption': '400',
+    '--font-weight-h1': '400',
+    '--font-weight-h2': '400',
+    '--font-weight-h3': '400',
+    '--font-weight-h4': '400',
+    '--font-weight-h5': '600',
+    '--font-weight-h6': '600',
+    '--font-weight-label-mini': '400',
+    '--font-weight-label-strong': '600',
+    '--input-border-radius': '6px',
+    '--letter-spacing-body-primary': '0.2px',
+    '--letter-spacing-body-secondary': '0.2px',
+    '--letter-spacing-button': '1px',
+    '--letter-spacing-caption': '0.2px',
+    '--letter-spacing-h1': '0.2px',
+    '--letter-spacing-h1-mobile': '0.2px',
+    '--letter-spacing-h2': '0.2px',
+    '--letter-spacing-h2-mobile': '0.2px',
+    '--letter-spacing-h3': '0.2px',
+    '--letter-spacing-h3-mobile': '0.2px',
+    '--letter-spacing-h4': '0.2px',
+    '--letter-spacing-h5': '0.2px',
+    '--letter-spacing-h6': '1px',
+    '--letter-spacing-label-mini': '1px',
+    '--letter-spacing-label-strong': '0.2px',
+    '--search-input-border-radius': '24px',
+    '--text-transform-button': 'uppercase',
+    '--text-transform-h6': 'uppercase',
+    '--text-transform-label-mini': 'uppercase',
+    '--width-dense': '1200px',
+    '--width-page': '1644px',
+} satisfies Record<NonColorCSSVariables, string>;

package/src/themes/allThemes.ts

@@ -0,0 +1,14 @@
+import type { Brands } from './brands';
+import type { CleanTheme } from './themeType';
+
+import { basketballTrainingTheme } from './runtime/basketballTraining';
+import { defaultTheme } from './runtime/default';
+import { everydayHarborTheme } from './runtime/everydayHarbor';
+import { professionalBrandTheme } from './runtime/professionalBrand';
+
+export const allThemes = {
+    BasketballTraining: basketballTrainingTheme,
+    Default: defaultTheme,
+    EverydayHarbor: everydayHarborTheme,
+    ProfessionalBrand: professionalBrandTheme,
+} as const satisfies Record<Brands, CleanTheme>;