@rookcom/monarch-tokens 0.2.3 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @rookcom/monarch-tokens
 
+## 0.4.0
+
+### Minor Changes
+
+- 220a201: The categorical data palette (`--mn-color-data-1` … `-5`) is now chosen per theme and contrast-checked: every slot meets 3:1 on every chart background (4.5:1 in high contrast), and neighbouring slots stay distinguishable under normal vision, protanopia and deuteranopia. Dark-theme values are deeper and high-contrast themes get their own values. Adds `dataPalette(theme)` and `DATA_PALETTE_ORDER`.
+
+## 0.3.0
+
+### Minor Changes
+
+- 02ded2b: Marketing layer. Tokens: fluid display scale, lead size, section rhythm, content widths, derived gradients (`--mn-gradient-wash`, `--mn-gradient-accent`, `--mn-gradient-inverse`), inverse-surface roles (`text-inverse-muted`, `border-inverse`) and the `strong-inverse` intent role, all contrast-tested for every product. React: SiteHeader, MarketingHero, MarketingSection, MarketingSectionHeader, FeatureGrid, ProductFrame, StatStrip, CTABand, FAQ and SiteFooter from the new `@rookcom/monarch-react/marketing` entry; Accordion from the root entry.
+
+  Fix: a product's light-theme accent now wins over the light theme regardless of CSS load order (the light theme selector uses `:where()`).
+
+- 31753b0: Brand theme engine: `deriveTheme(hex)` derives a full accent token set (every intent role plus `--mn-color-text-link` and `--mn-color-focus-ring`) for the light, dark and both high-contrast themes from one brand colour, with the same contrast guarantees as product accents (4.5:1, 7:1 in high contrast). Pure, no DOM. `brandThemeCss(theme, { selector })` renders it as CSS that follows the Monarch theme selectors, `parseHexColor()` validates input, and invalid colours fall back instead of throwing. `compat: true` adds the legacy `--primary` variables.
+
 ## 0.2.3
 
 ### Patch Changes

package/dist/brand.d.ts

@@ -0,0 +1,95 @@
+/**
+ * Brand theme engine: one brand colour in, a complete accent token set out.
+ *
+ * Products that let a customer pick a colour (booking pages, support portals,
+ * community sites, careers and status pages) previously each carried their own
+ * contrast maths. `deriveTheme` replaces those copies: it runs the same
+ * `deriveIntent` that builds every Monarch product accent, for all four
+ * themes, so a tenant colour gets exactly the guarantees a Rook product
+ * colour gets (ADR 0003):
+ *
+ * - `on-solid` on `solid`, `solid-hover` and `solid-active`: ≥ 4.5:1 (7:1 in
+ *   the high-contrast themes);
+ * - `strong` (links, icons, focus rings) on canvas, surface, subtle, muted and
+ *   the accent's own subtle tints: ≥ 4.5:1 (7:1 high contrast);
+ * - the fill stays distinguishable from the canvas (≥ 1.5:1, 4.5:1 high contrast).
+ *
+ * Everything here is a pure function of its arguments: no DOM, no globals, no
+ * caching. It runs the same on the server, in a worker or in the browser.
+ */
+import { type Hsl } from './color.js';
+import { type IntentReport, type IntentScale, type ThemeId } from './themes.js';
+/** CSS custom properties, ready for a `style` object or a stylesheet block. */
+export type BrandThemeVars = Readonly<Record<`--${string}`, string>>;
+export interface BrandThemeMode {
+    /** The derived accent roles for this theme (HSL). */
+    readonly accent: IntentScale;
+    /** What `deriveIntent` changed to meet contrast, in plain language, and the measured ratios. */
+    readonly report: IntentReport;
+    /** `--mn-color-accent-*`, `--mn-color-text-link` and `--mn-color-focus-ring` for this theme. */
+    readonly vars: BrandThemeVars;
+}
+export interface BrandTheme {
+    /** The value that was passed in, unchanged. */
+    readonly input: string;
+    /** The colour the theme was derived from, as lowercase `#rrggbb`. */
+    readonly brand: string;
+    /** False when `input` was not a hex colour and the fallback was used instead. */
+    readonly valid: boolean;
+    /** One accent set per Monarch theme. */
+    readonly modes: Readonly<Record<ThemeId, BrandThemeMode>>;
+}
+export interface DeriveThemeOptions {
+    /**
+     * Used when the brand colour is missing or not a hex colour, so a bad value
+     * saved by a customer never breaks the page. Default: the Monarch default
+     * accent (Rook Red).
+     */
+    readonly fallback?: string;
+    /**
+     * Also emit the legacy shadcn-style variables (`--primary`,
+     * `--primary-foreground`, `--ring`, `--sidebar-primary*`) for apps still on
+     * the compat bridge. Default false.
+     */
+    readonly compat?: boolean;
+}
+/**
+ * Parses `#rgb`, `#rrggbb`, `rgb` or `rrggbb` (any case, surrounding spaces
+ * allowed). Returns null for anything else, including named colours and
+ * `#rrggbbaa`: a brand colour must be opaque for contrast to mean anything.
+ */
+export declare function parseHexColor(input: string | null | undefined): Hsl | null;
+/**
+ * Derives a full accent token set from one brand colour, for the light, dark
+ * and both high-contrast themes. Pure: the same input always gives the same
+ * output, and nothing touches the DOM.
+ *
+ * ```ts
+ * const theme = deriveTheme(workspace.brandColor);
+ * // Inline, for a page that is always light:
+ * <div style={theme.modes.light.vars}>…</div>
+ * // Or a stylesheet that follows the user's theme:
+ * <style>{brandThemeCss(theme, { selector: '.booking-page' })}</style>
+ * ```
+ */
+export declare function deriveTheme(brand: string, options?: DeriveThemeOptions): BrandTheme;
+export interface BrandThemeCssOptions {
+    /**
+     * The element the theme applies to. Default `:root` (the whole page). Use a
+     * class or attribute to theme one region, such as a booking widget.
+     */
+    readonly selector?: string;
+    /**
+     * Wrap the rules in `@layer monarch.tokens` so they sit with the other
+     * Monarch tokens and any unlayered app rule still wins. Default true.
+     */
+    readonly layer?: boolean;
+}
+/**
+ * The theme as CSS text: one block per theme, keyed to the same selectors as
+ * the Monarch stylesheets (`.dark` / `data-mn-theme="dark"` and
+ * `data-mn-contrast="more"` on an ancestor or on the element itself), so it
+ * follows the user's theme with no script. Pure string output.
+ */
+export declare function brandThemeCss(theme: BrandTheme, options?: BrandThemeCssOptions): string;
+//# sourceMappingURL=brand.d.ts.map

package/dist/brand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand.d.ts","sourceRoot":"","sources":["../src/brand.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAqC,KAAK,GAAG,EAAE,MAAM,YAAY,CAAC;AAGzE,OAAO,EAKL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,OAAO,EACb,MAAM,aAAa,CAAC;AAErB,+EAA+E;AAC/E,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC;AAErE,MAAM,WAAW,cAAc;IAC7B,qDAAqD;IACrD,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;IAC7B,gGAAgG;IAChG,QAAQ,CAAC,MAAM,EAAE,YAAY,CAAC;IAC9B,gGAAgG;IAChG,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAC;CAC/B;AAED,MAAM,WAAW,UAAU;IACzB,+CAA+C;IAC/C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,qEAAqE;IACrE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;IACxB,wCAAwC;IACxC,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC;CAC3D;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,GAAG,GAAG,IAAI,CAM1E;AA4BD;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,GAAE,kBAAuB,GAAG,UAAU,CAWvF;AAED,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,UAAU,EAAE,OAAO,GAAE,oBAAyB,GAAG,MAAM,CAiB3F"}

package/dist/brand.js

@@ -0,0 +1,107 @@
+/**
+ * Brand theme engine: one brand colour in, a complete accent token set out.
+ *
+ * Products that let a customer pick a colour (booking pages, support portals,
+ * community sites, careers and status pages) previously each carried their own
+ * contrast maths. `deriveTheme` replaces those copies: it runs the same
+ * `deriveIntent` that builds every Monarch product accent, for all four
+ * themes, so a tenant colour gets exactly the guarantees a Rook product
+ * colour gets (ADR 0003):
+ *
+ * - `on-solid` on `solid`, `solid-hover` and `solid-active`: ≥ 4.5:1 (7:1 in
+ *   the high-contrast themes);
+ * - `strong` (links, icons, focus rings) on canvas, surface, subtle, muted and
+ *   the accent's own subtle tints: ≥ 4.5:1 (7:1 high contrast);
+ * - the fill stays distinguishable from the canvas (≥ 1.5:1, 4.5:1 high contrast).
+ *
+ * Everything here is a pure function of its arguments: no DOM, no globals, no
+ * caching. It runs the same on the server, in a worker or in the browser.
+ */
+import { fromHex, toChannels, toCss, toHex } from './color.js';
+import { compatPrimary, INTENT_ROLES, themeSelectors, LAYER } from './css.js';
+import { defaultAccent } from './primitives.js';
+import { THEME_IDS, deriveIntent, resolveTheme, themes, } from './themes.js';
+/**
+ * Parses `#rgb`, `#rrggbb`, `rgb` or `rrggbb` (any case, surrounding spaces
+ * allowed). Returns null for anything else, including named colours and
+ * `#rrggbbaa`: a brand colour must be opaque for contrast to mean anything.
+ */
+export function parseHexColor(input) {
+    if (typeof input !== 'string')
+        return null;
+    const v = input.trim().replace(/^#/, '');
+    const six = /^[0-9a-f]{3}$/i.test(v) ? v.replace(/./g, (c) => c + c) : v;
+    if (!/^[0-9a-f]{6}$/i.test(six))
+        return null;
+    return fromHex(six);
+}
+function accentVars(theme, base, accent, compat) {
+    const vars = {};
+    for (const role of INTENT_ROLES)
+        vars[`--mn-color-accent-${role}`] = toCss(accent[role]);
+    // These two are declared on :root as var(--mn-color-accent-strong). A custom
+    // property's var() is resolved where it is declared, so re-theming a region
+    // must restate them, or links and focus rings keep the page accent.
+    vars['--mn-color-text-link'] = toCss(accent.strong);
+    vars['--mn-color-focus-ring'] =
+        themes[theme].contrast === 'more' ? 'var(--mn-color-text-default)' : toCss(accent.strong);
+    if (compat) {
+        const p = compatPrimary(resolveTheme(themes[theme], base));
+        vars['--primary'] = toChannels(p.fill);
+        vars['--primary-foreground'] = toChannels(p.on);
+        vars['--ring'] = toChannels(accent.strong);
+        vars['--sidebar-primary'] = toChannels(p.fill);
+        vars['--sidebar-primary-foreground'] = toChannels(p.on);
+        vars['--sidebar-ring'] = toChannels(accent.strong);
+    }
+    return vars;
+}
+/**
+ * Derives a full accent token set from one brand colour, for the light, dark
+ * and both high-contrast themes. Pure: the same input always gives the same
+ * output, and nothing touches the DOM.
+ *
+ * ```ts
+ * const theme = deriveTheme(workspace.brandColor);
+ * // Inline, for a page that is always light:
+ * <div style={theme.modes.light.vars}>…</div>
+ * // Or a stylesheet that follows the user's theme:
+ * <style>{brandThemeCss(theme, { selector: '.booking-page' })}</style>
+ * ```
+ */
+export function deriveTheme(brand, options = {}) {
+    const parsed = parseHexColor(brand);
+    const fallback = parseHexColor(options.fallback) ?? defaultAccent;
+    const base = parsed ?? fallback;
+    const compat = options.compat ?? false;
+    const modes = {};
+    for (const id of THEME_IDS) {
+        const { scale, report } = deriveIntent(base, themes[id]);
+        modes[id] = { accent: scale, report, vars: accentVars(id, base, scale, compat) };
+    }
+    return { input: brand, brand: toHex(base), valid: parsed !== null, modes };
+}
+/**
+ * The theme as CSS text: one block per theme, keyed to the same selectors as
+ * the Monarch stylesheets (`.dark` / `data-mn-theme="dark"` and
+ * `data-mn-contrast="more"` on an ancestor or on the element itself), so it
+ * follows the user's theme with no script. Pure string output.
+ */
+export function brandThemeCss(theme, options = {}) {
+    const target = options.selector?.trim() || ':root';
+    const selectorsFor = (id) => id === 'light'
+        ? [target]
+        : themeSelectors(id).flatMap((q) => [`${q}${target}`, `${q} ${target}`]);
+    const indent = options.layer === false ? '' : '  ';
+    const blocks = THEME_IDS.map((id) => {
+        const body = Object.entries(theme.modes[id].vars)
+            .map(([k, v]) => `${indent}  ${k}: ${v};`)
+            .join('\n');
+        return `${indent}${selectorsFor(id).join(`,\n${indent}`)} {\n${body}\n${indent}}`;
+    });
+    const comment = `/* Monarch brand theme ${theme.brand}${theme.valid ? '' : ' (fallback)'} */`;
+    return options.layer === false
+        ? `${comment}\n${blocks.join('\n\n')}\n`
+        : `${comment}\n@layer ${LAYER} {\n${blocks.join('\n\n')}\n}\n`;
+}
+//# sourceMappingURL=brand.js.map

package/dist/brand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand.js","sourceRoot":"","sources":["../src/brand.ts"],"names":[],"mappings":"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"}

package/dist/color.d.ts

@@ -39,4 +39,6 @@ export declare function bestForeground(bg: Hsl, candidates: readonly Hsl[]): {
     color: Hsl;
     ratio: number;
 };
+/** sRGB mix of `a` into `b` by `p` (0–1); same as CSS `color-mix(in srgb, a p%, b)`. */
+export declare function mixSrgb(a: Hsl, b: Hsl, p: number): Hsl;
 //# sourceMappingURL=color.d.ts.map

package/dist/color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../src/color.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,GAAG;IAClB,kBAAkB;IAClB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,CAExD;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAErE;AAOD,kFAAkF;AAClF,wBAAgB,UAAU,CAAC,CAAC,EAAE,GAAG,GAAG,MAAM,CAEzC;AAED,0BAA0B;AAC1B,wBAAgB,KAAK,CAAC,CAAC,EAAE,GAAG,GAAG,MAAM,CAEpC;AAED,mBAAmB;AACnB,wBAAgB,KAAK,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAOtD;AAED,wBAAgB,KAAK,CAAC,CAAC,EAAE,GAAG,GAAG,MAAM,CAWpC;AAED,4EAA4E;AAC5E,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAoBxC;AAWD,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,GAAG,GAAG,MAAM,CAShD;AAED,iCAAiC;AACjC,wBAAgB,QAAQ,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,GAAG,MAAM,CAK/C;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,GAAG,EACV,OAAO,EAAE,SAAS,GAAG,EAAE,EACvB,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,QAAQ,GAAG,SAAS,GAC9B,GAAG,CAYL;AAED,4EAA4E;AAC5E,wBAAgB,cAAc,CAAC,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,GAAG,EAAE,GAAG;IAAE,KAAK,EAAE,GAAG,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAQjG"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../src/color.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,GAAG;IAClB,kBAAkB;IAClB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,CAExD;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAErE;AAOD,kFAAkF;AAClF,wBAAgB,UAAU,CAAC,CAAC,EAAE,GAAG,GAAG,MAAM,CAEzC;AAED,0BAA0B;AAC1B,wBAAgB,KAAK,CAAC,CAAC,EAAE,GAAG,GAAG,MAAM,CAEpC;AAED,mBAAmB;AACnB,wBAAgB,KAAK,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAOtD;AAED,wBAAgB,KAAK,CAAC,CAAC,EAAE,GAAG,GAAG,MAAM,CAWpC;AAED,4EAA4E;AAC5E,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAoBxC;AAWD,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,GAAG,GAAG,MAAM,CAShD;AAED,iCAAiC;AACjC,wBAAgB,QAAQ,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,GAAG,MAAM,CAK/C;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,GAAG,EACV,OAAO,EAAE,SAAS,GAAG,EAAE,EACvB,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,QAAQ,GAAG,SAAS,GAC9B,GAAG,CAYL;AAED,4EAA4E;AAC5E,wBAAgB,cAAc,CAAC,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,GAAG,EAAE,GAAG;IAAE,KAAK,EAAE,GAAG,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAQjG;AAED,wFAAwF;AACxF,wBAAgB,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,CAQtD"}

package/dist/color.js

@@ -118,4 +118,13 @@ export function bestForeground(bg, candidates) {
         throw new Error('bestForeground needs at least one candidate');
     return best;
 }
+/** sRGB mix of `a` into `b` by `p` (0–1); same as CSS `color-mix(in srgb, a p%, b)`. */
+export function mixSrgb(a, b, p) {
+    const [ar, ag, ab] = toRgb(a);
+    const [br, bg, bb] = toRgb(b);
+    const m = (x, y) => Math.round((x * p + y * (1 - p)) * 255)
+        .toString(16)
+        .padStart(2, '0');
+    return fromHex(`#${m(ar, br)}${m(ag, bg)}${m(ab, bb)}`);
+}
 //# sourceMappingURL=color.js.map

package/dist/color.js.map

@@ -1 +1 @@
-{"version":3,"file":"color.js","sourceRoot":"","sources":["../src/color.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"color.js","sourceRoot":"","sources":["../src/color.ts"],"names":[],"mappings":"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"}

package/dist/css/compat.css

@@ -3,8 +3,7 @@
 
 @layer monarch.tokens {
 
-  :root,
-  [data-mn-theme="light"] {
+  :where(:root, [data-mn-theme="light"]) {
     --background: 220 20% 99%;
     --foreground: 222 16% 13.5%;
     --card: 0 0% 100%;

package/dist/css/monarch.css

@@ -89,16 +89,43 @@
     --mn-layout-reading-max: 42rem;
     --mn-layout-gutter: 1rem;
     --mn-layout-gutter-lg: 1.5rem;
+    --mn-display-xl: clamp(2.625rem, 1.85rem + 3.2vw, 4.5rem);
+    --mn-display-xl-leading: 1.04;
+    --mn-display-xl-tracking: -0.035em;
+    --mn-display-xl-weight: 600;
+    --mn-display-lg: clamp(2.125rem, 1.6rem + 2.2vw, 3.5rem);
+    --mn-display-lg-leading: 1.08;
+    --mn-display-lg-tracking: -0.03em;
+    --mn-display-lg-weight: 600;
+    --mn-display-md: clamp(1.75rem, 1.45rem + 1.25vw, 2.5rem);
+    --mn-display-md-leading: 1.14;
+    --mn-display-md-tracking: -0.025em;
+    --mn-display-md-weight: 600;
+    --mn-display-sm: clamp(1.375rem, 1.25rem + 0.55vw, 1.75rem);
+    --mn-display-sm-leading: 1.25;
+    --mn-display-sm-tracking: -0.02em;
+    --mn-display-sm-weight: 600;
+    --mn-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
+    --mn-lead-leading: 1.6;
+    --mn-section-sm: clamp(3rem, 2.25rem + 3vw, 4.5rem);
+    --mn-section-md: clamp(4rem, 2.75rem + 5vw, 7rem);
+    --mn-section-lg: clamp(5rem, 3.25rem + 7vw, 9rem);
+    --mn-width-narrow: 44rem;
+    --mn-width-content: 72rem;
+    --mn-width-wide: 80rem;
+    --mn-width-gutter: clamp(1.25rem, 0.75rem + 2vw, 2rem);
     --mn-color-spectrum-blue: hsl(214 90% 58%);
     --mn-color-spectrum-violet: hsl(256 82% 58%);
     --mn-color-spectrum-purple: hsl(280 68% 58%);
     --mn-color-spectrum-pink: hsl(330 78% 58%);
     --mn-color-spectrum-orange: hsl(24 94% 58%);
+    --mn-gradient-wash: radial-gradient(120% 70% at 50% 0%, var(--mn-color-accent-subtle) 0%, var(--mn-color-bg-canvas) 72%);
+    --mn-gradient-accent: linear-gradient(135deg, var(--mn-color-accent-solid) 0%, var(--mn-color-accent-solid-active) 100%);
+    --mn-gradient-inverse: radial-gradient(55% 80% at 100% 0%, color-mix(in srgb, var(--mn-color-accent-solid) 12%, var(--mn-color-bg-inverse)) 0%, var(--mn-color-bg-inverse) 100%);
     --mn-gradient-spectrum: linear-gradient(120deg, hsl(214 90% 58%), hsl(256 82% 58%) 30%, hsl(280 68% 58%) 55%, hsl(330 78% 58%) 78%, hsl(24 94% 58%));
   }
 
-  :root,
-  [data-mn-theme="light"] {
+  :where(:root, [data-mn-theme="light"]) {
     color-scheme: light;
     --mn-color-bg-canvas: hsl(220 20% 99%);
     --mn-color-bg-surface: hsl(0 0% 100%);
@@ -112,10 +139,12 @@
     --mn-color-text-subtle: hsl(220 9% 43.5%);
     --mn-color-text-disabled: hsl(220 9% 64%);
     --mn-color-text-inverse: hsl(0 0% 100%);
+    --mn-color-text-inverse-muted: hsl(220 11% 80%);
     --mn-color-border-subtle: hsl(220 13% 92.5%);
     --mn-color-border-default: hsl(220 13% 89%);
     --mn-color-border-strong: hsl(220 11% 80%);
     --mn-color-border-input: hsl(220 9% 56%);
+    --mn-color-border-inverse: hsl(220 13% 27%);
     --mn-color-accent-solid: hsl(354.5 71.3% 52.2%);
     --mn-color-accent-solid-hover: hsl(354.5 71.3% 47.2%);
     --mn-color-accent-solid-active: hsl(354.5 71.3% 43.2%);
@@ -125,6 +154,7 @@
     --mn-color-accent-strong: hsl(354.5 71.3% 46.2%);
     --mn-color-accent-on-strong: hsl(0 0% 100%);
     --mn-color-accent-border: hsl(354.5 42.8% 84%);
+    --mn-color-accent-strong-inverse: hsl(354.5 71.3% 66.7%);
     --mn-color-danger-solid: hsl(354.5 71.3% 52.2%);
     --mn-color-danger-solid-hover: hsl(354.5 71.3% 47.2%);
     --mn-color-danger-solid-active: hsl(354.5 71.3% 43.2%);
@@ -134,6 +164,7 @@
     --mn-color-danger-strong: hsl(354.5 71.3% 46.2%);
     --mn-color-danger-on-strong: hsl(0 0% 100%);
     --mn-color-danger-border: hsl(354.5 42.8% 84%);
+    --mn-color-danger-strong-inverse: hsl(354.5 71.3% 66.7%);
     --mn-color-success-solid: hsl(136 62.8% 32.7%);
     --mn-color-success-solid-hover: hsl(136 62.8% 27.7%);
     --mn-color-success-solid-active: hsl(136 62.8% 23.7%);
@@ -143,6 +174,7 @@
     --mn-color-success-strong: hsl(136 62.8% 30.7%);
     --mn-color-success-on-strong: hsl(0 0% 100%);
     --mn-color-success-border: hsl(136 37.7% 84%);
+    --mn-color-success-strong-inverse: hsl(136 62.8% 42.2%);
     --mn-color-warning-solid: hsl(44.3 100% 47.8%);
     --mn-color-warning-solid-hover: hsl(44.3 100% 52.8%);
     --mn-color-warning-solid-active: hsl(44.3 100% 56.8%);
@@ -152,6 +184,7 @@
     --mn-color-warning-strong: hsl(44.3 100% 27.8%);
     --mn-color-warning-on-strong: hsl(0 0% 100%);
     --mn-color-warning-border: hsl(44.3 60% 84%);
+    --mn-color-warning-strong-inverse: hsl(44.3 100% 47.8%);
     --mn-color-info-solid: hsl(197.5 100% 34.6%);
     --mn-color-info-solid-hover: hsl(197.5 100% 29.6%);
     --mn-color-info-solid-active: hsl(197.5 100% 25.6%);
@@ -161,6 +194,7 @@
     --mn-color-info-strong: hsl(197.5 100% 32.1%);
     --mn-color-info-on-strong: hsl(0 0% 100%);
     --mn-color-info-border: hsl(197.5 60% 84%);
+    --mn-color-info-strong-inverse: hsl(197.5 100% 43.6%);
     --mn-color-text-link: var(--mn-color-accent-strong);
     --mn-color-focus-ring: var(--mn-color-accent-strong);
     --mn-focus-ring-width: 2px;
@@ -171,7 +205,7 @@
     --mn-shadow-lg: 0 12px 32px -8px hsl(222 30% 10% / 0.14), 0 4px 8px -4px hsl(222 30% 10% / 0.06);
     --mn-shadow-xl: 0 24px 64px -16px hsl(222 30% 10% / 0.22), 0 8px 16px -8px hsl(222 30% 10% / 0.08);
     --mn-color-data-1: hsl(214 90% 49%);
-    --mn-color-data-2: hsl(24 94% 49%);
+    --mn-color-data-2: hsl(24 94% 48.5%);
     --mn-color-data-3: hsl(256 82% 49%);
     --mn-color-data-4: hsl(330 78% 49%);
     --mn-color-data-5: hsl(280 68% 49%);
@@ -192,10 +226,12 @@
     --mn-color-text-subtle: hsl(220 9% 64%);
     --mn-color-text-disabled: hsl(220 10% 37%);
     --mn-color-text-inverse: hsl(222 18% 10%);
+    --mn-color-text-inverse-muted: hsl(220 10% 37%);
     --mn-color-border-subtle: hsl(222 16% 13.5%);
     --mn-color-border-default: hsl(221 15% 18%);
     --mn-color-border-strong: hsl(220 13% 27%);
     --mn-color-border-input: hsl(220 9% 45%);
+    --mn-color-border-inverse: hsl(220 13% 89%);
     --mn-color-accent-solid: hsl(354.5 71.3% 52.2%);
     --mn-color-accent-solid-hover: hsl(354.5 71.3% 47.2%);
     --mn-color-accent-solid-active: hsl(354.5 71.3% 43.2%);
@@ -205,6 +241,7 @@
     --mn-color-accent-strong: hsl(354.5 71.3% 66.2%);
     --mn-color-accent-on-strong: hsl(224 22% 6.5%);
     --mn-color-accent-border: hsl(354.5 32.1% 32%);
+    --mn-color-accent-strong-inverse: hsl(354.5 71.3% 45.2%);
     --mn-color-danger-solid: hsl(354.5 71.3% 52.2%);
     --mn-color-danger-solid-hover: hsl(354.5 71.3% 47.2%);
     --mn-color-danger-solid-active: hsl(354.5 71.3% 43.2%);
@@ -214,6 +251,7 @@
     --mn-color-danger-strong: hsl(354.5 71.3% 66.2%);
     --mn-color-danger-on-strong: hsl(224 22% 6.5%);
     --mn-color-danger-border: hsl(354.5 32.1% 32%);
+    --mn-color-danger-strong-inverse: hsl(354.5 71.3% 45.2%);
     --mn-color-success-solid: hsl(136 62.8% 32.7%);
     --mn-color-success-solid-hover: hsl(136 62.8% 27.7%);
     --mn-color-success-solid-active: hsl(136 62.8% 23.7%);
@@ -223,6 +261,7 @@
     --mn-color-success-strong: hsl(136 62.8% 43.2%);
     --mn-color-success-on-strong: hsl(224 22% 6.5%);
     --mn-color-success-border: hsl(136 28.3% 32%);
+    --mn-color-success-strong-inverse: hsl(136 62.8% 28.2%);
     --mn-color-warning-solid: hsl(44.3 100% 47.8%);
     --mn-color-warning-solid-hover: hsl(44.3 100% 52.8%);
     --mn-color-warning-solid-active: hsl(44.3 100% 56.8%);
@@ -232,6 +271,7 @@
     --mn-color-warning-strong: hsl(44.3 100% 47.8%);
     --mn-color-warning-on-strong: hsl(224 22% 6.5%);
     --mn-color-warning-border: hsl(44.3 45% 32%);
+    --mn-color-warning-strong-inverse: hsl(44.3 100% 25.3%);
     --mn-color-info-solid: hsl(197.5 100% 34.6%);
     --mn-color-info-solid-hover: hsl(197.5 100% 29.6%);
     --mn-color-info-solid-active: hsl(197.5 100% 25.6%);
@@ -241,6 +281,7 @@
     --mn-color-info-strong: hsl(197.5 100% 45.6%);
     --mn-color-info-on-strong: hsl(224 22% 6.5%);
     --mn-color-info-border: hsl(197.5 45% 32%);
+    --mn-color-info-strong-inverse: hsl(197.5 100% 30.1%);
     --mn-color-text-link: var(--mn-color-accent-strong);
     --mn-color-focus-ring: var(--mn-color-accent-strong);
     --mn-focus-ring-width: 2px;
@@ -250,11 +291,11 @@
     --mn-shadow-md: 0 4px 12px -2px hsl(0 0% 0% / 0.5), 0 2px 4px -2px hsl(0 0% 0% / 0.35);
     --mn-shadow-lg: 0 12px 32px -8px hsl(0 0% 0% / 0.6), 0 4px 8px -4px hsl(0 0% 0% / 0.4);
     --mn-shadow-xl: 0 24px 64px -16px hsl(0 0% 0% / 0.7), 0 8px 16px -8px hsl(0 0% 0% / 0.45);
-    --mn-color-data-1: hsl(214 90% 68%);
-    --mn-color-data-2: hsl(24 94% 68%);
+    --mn-color-data-1: hsl(214 90% 58%);
+    --mn-color-data-2: hsl(24 94% 41%);
     --mn-color-data-3: hsl(256 82% 68%);
-    --mn-color-data-4: hsl(330 78% 68%);
-    --mn-color-data-5: hsl(280 68% 68%);
+    --mn-color-data-4: hsl(330 78% 58%);
+    --mn-color-data-5: hsl(280 68% 58%);
   }
 
   [data-mn-contrast="more"] {
@@ -271,10 +312,12 @@
     --mn-color-text-subtle: hsl(220 13% 27%);
     --mn-color-text-disabled: hsl(220 9% 43.5%);
     --mn-color-text-inverse: hsl(0 0% 100%);
+    --mn-color-text-inverse-muted: hsl(220 13% 92.5%);
     --mn-color-border-subtle: hsl(220 9% 43.5%);
     --mn-color-border-default: hsl(220 10% 37%);
     --mn-color-border-strong: hsl(221 15% 18%);
     --mn-color-border-input: hsl(220 13% 27%);
+    --mn-color-border-inverse: hsl(220 9% 43.5%);
     --mn-color-accent-solid: hsl(354.5 71.3% 39.7%);
     --mn-color-accent-solid-hover: hsl(354.5 71.3% 34.7%);
     --mn-color-accent-solid-active: hsl(354.5 71.3% 30.7%);
@@ -284,6 +327,7 @@
     --mn-color-accent-strong: hsl(354.5 71.3% 34.7%);
     --mn-color-accent-on-strong: hsl(0 0% 100%);
     --mn-color-accent-border: hsl(354.5 71.3% 34.7%);
+    --mn-color-accent-strong-inverse: hsl(354.5 71.3% 72.2%);
     --mn-color-danger-solid: hsl(354.5 71.3% 39.7%);
     --mn-color-danger-solid-hover: hsl(354.5 71.3% 34.7%);
     --mn-color-danger-solid-active: hsl(354.5 71.3% 30.7%);
@@ -293,6 +337,7 @@
     --mn-color-danger-strong: hsl(354.5 71.3% 34.7%);
     --mn-color-danger-on-strong: hsl(0 0% 100%);
     --mn-color-danger-border: hsl(354.5 71.3% 34.7%);
+    --mn-color-danger-strong-inverse: hsl(354.5 71.3% 72.2%);
     --mn-color-success-solid: hsl(136 62.8% 24.7%);
     --mn-color-success-solid-hover: hsl(136 62.8% 19.7%);
     --mn-color-success-solid-active: hsl(136 62.8% 15.7%);
@@ -302,6 +347,7 @@
     --mn-color-success-strong: hsl(136 62.8% 22.7%);
     --mn-color-success-on-strong: hsl(0 0% 100%);
     --mn-color-success-border: hsl(136 62.8% 22.7%);
+    --mn-color-success-strong-inverse: hsl(136 62.8% 45.2%);
     --mn-color-warning-solid: hsl(44.3 100% 22.3%);
     --mn-color-warning-solid-hover: hsl(44.3 100% 17.3%);
     --mn-color-warning-solid-active: hsl(44.3 100% 13.3%);
@@ -311,6 +357,7 @@
     --mn-color-warning-strong: hsl(44.3 100% 20.3%);
     --mn-color-warning-on-strong: hsl(0 0% 100%);
     --mn-color-warning-border: hsl(44.3 100% 20.3%);
+    --mn-color-warning-strong-inverse: hsl(44.3 100% 47.8%);
     --mn-color-info-solid: hsl(197.5 100% 26.1%);
     --mn-color-info-solid-hover: hsl(197.5 100% 21.1%);
     --mn-color-info-solid-active: hsl(197.5 100% 17.1%);
@@ -320,6 +367,7 @@
     --mn-color-info-strong: hsl(197.5 100% 24.1%);
     --mn-color-info-on-strong: hsl(0 0% 100%);
     --mn-color-info-border: hsl(197.5 100% 24.1%);
+    --mn-color-info-strong-inverse: hsl(197.5 100% 48.1%);
     --mn-color-text-link: var(--mn-color-accent-strong);
     --mn-color-focus-ring: var(--mn-color-text-default);
     --mn-focus-ring-width: 3px;
@@ -329,10 +377,10 @@
     --mn-shadow-md: 0 0 0 1px hsl(0 0% 0%);
     --mn-shadow-lg: 0 0 0 2px hsl(0 0% 0%);
     --mn-shadow-xl: 0 0 0 2px hsl(0 0% 0%);
-    --mn-color-data-1: hsl(214 90% 49%);
-    --mn-color-data-2: hsl(24 94% 49%);
+    --mn-color-data-1: hsl(214 90% 48%);
+    --mn-color-data-2: hsl(24 94% 38.5%);
     --mn-color-data-3: hsl(256 82% 49%);
-    --mn-color-data-4: hsl(330 78% 49%);
+    --mn-color-data-4: hsl(330 78% 47.5%);
     --mn-color-data-5: hsl(280 68% 49%);
   }
 
@@ -351,10 +399,12 @@
     --mn-color-text-subtle: hsl(220 13% 89%);
     --mn-color-text-disabled: hsl(220 9% 64%);
     --mn-color-text-inverse: hsl(0 0% 0%);
+    --mn-color-text-inverse-muted: hsl(221 15% 18%);
     --mn-color-border-subtle: hsl(220 9% 43.5%);
     --mn-color-border-default: hsl(220 9% 64%);
     --mn-color-border-strong: hsl(220 13% 89%);
     --mn-color-border-input: hsl(220 11% 80%);
+    --mn-color-border-inverse: hsl(220 9% 43.5%);
     --mn-color-accent-solid: hsl(354.5 71.3% 70.2%);
     --mn-color-accent-solid-hover: hsl(354.5 71.3% 75.2%);
     --mn-color-accent-solid-active: hsl(354.5 71.3% 79.2%);
@@ -364,6 +414,7 @@
     --mn-color-accent-strong: hsl(354.5 71.3% 74.7%);
     --mn-color-accent-on-strong: hsl(224 22% 6.5%);
     --mn-color-accent-border: hsl(354.5 71.3% 74.7%);
+    --mn-color-accent-strong-inverse: hsl(354.5 71.3% 34.2%);
     --mn-color-danger-solid: hsl(354.5 71.3% 70.2%);
     --mn-color-danger-solid-hover: hsl(354.5 71.3% 75.2%);
     --mn-color-danger-solid-active: hsl(354.5 71.3% 79.2%);
@@ -373,6 +424,7 @@
     --mn-color-danger-strong: hsl(354.5 71.3% 74.7%);
     --mn-color-danger-on-strong: hsl(224 22% 6.5%);
     --mn-color-danger-border: hsl(354.5 71.3% 74.7%);
+    --mn-color-danger-strong-inverse: hsl(354.5 71.3% 34.2%);
     --mn-color-success-solid: hsl(136 62.8% 43.7%);
     --mn-color-success-solid-hover: hsl(136 62.8% 48.7%);
     --mn-color-success-solid-active: hsl(136 62.8% 52.7%);
@@ -382,6 +434,7 @@
     --mn-color-success-strong: hsl(136 62.8% 50.2%);
     --mn-color-success-on-strong: hsl(224 22% 6.5%);
     --mn-color-success-border: hsl(136 62.8% 50.2%);
+    --mn-color-success-strong-inverse: hsl(136 62.8% 20.7%);
     --mn-color-warning-solid: hsl(44.3 100% 47.8%);
     --mn-color-warning-solid-hover: hsl(44.3 100% 52.8%);
     --mn-color-warning-solid-active: hsl(44.3 100% 56.8%);
@@ -391,6 +444,7 @@
     --mn-color-warning-strong: hsl(44.3 100% 47.8%);
     --mn-color-warning-on-strong: hsl(224 22% 6.5%);
     --mn-color-warning-border: hsl(44.3 100% 47.8%);
+    --mn-color-warning-strong-inverse: hsl(44.3 100% 18.8%);
     --mn-color-info-solid: hsl(197.5 100% 46.6%);
     --mn-color-info-solid-hover: hsl(197.5 100% 51.6%);
     --mn-color-info-solid-active: hsl(197.5 100% 55.6%);
@@ -400,6 +454,7 @@
     --mn-color-info-strong: hsl(197.5 100% 56.6%);
     --mn-color-info-on-strong: hsl(224 22% 6.5%);
     --mn-color-info-border: hsl(197.5 100% 56.6%);
+    --mn-color-info-strong-inverse: hsl(197.5 100% 22.6%);
     --mn-color-text-link: var(--mn-color-accent-strong);
     --mn-color-focus-ring: var(--mn-color-text-default);
     --mn-focus-ring-width: 3px;
@@ -409,11 +464,11 @@
     --mn-shadow-md: 0 0 0 1px hsl(0 0% 100%);
     --mn-shadow-lg: 0 0 0 2px hsl(0 0% 100%);
     --mn-shadow-xl: 0 0 0 2px hsl(0 0% 100%);
-    --mn-color-data-1: hsl(214 90% 68%);
-    --mn-color-data-2: hsl(24 94% 68%);
+    --mn-color-data-1: hsl(214 90% 58%);
+    --mn-color-data-2: hsl(24 94% 42%);
     --mn-color-data-3: hsl(256 82% 68%);
-    --mn-color-data-4: hsl(330 78% 68%);
-    --mn-color-data-5: hsl(280 68% 68%);
+    --mn-color-data-4: hsl(330 78% 58%);
+    --mn-color-data-5: hsl(280 68% 59%);
   }
 
   @media (prefers-reduced-motion: reduce) {

package/dist/css/products/app.css

@@ -13,6 +13,7 @@
     --mn-color-accent-strong: hsl(354 70% 46.5%);
     --mn-color-accent-on-strong: hsl(0 0% 100%);
     --mn-color-accent-border: hsl(354 42% 84%);
+    --mn-color-accent-strong-inverse: hsl(354 70% 66.5%);
     --primary: 354 70% 46.5%;
     --primary-foreground: 0 0% 100%;
     --ring: 354 70% 46.5%;
@@ -34,6 +35,7 @@
     --mn-color-accent-strong: hsl(354 70% 66%);
     --mn-color-accent-on-strong: hsl(224 22% 6.5%);
     --mn-color-accent-border: hsl(354 31.5% 32%);
+    --mn-color-accent-strong-inverse: hsl(354 70% 45.5%);
     --primary: 354 70% 52%;
     --primary-foreground: 0 0% 100%;
     --ring: 354 70% 66%;
@@ -53,6 +55,7 @@
     --mn-color-accent-strong: hsl(354 70% 34.5%);
     --mn-color-accent-on-strong: hsl(0 0% 100%);
     --mn-color-accent-border: hsl(354 70% 34.5%);
+    --mn-color-accent-strong-inverse: hsl(354 70% 72%);
     --primary: 354 70% 34.5%;
     --primary-foreground: 0 0% 100%;
     --ring: 354 70% 34.5%;
@@ -74,6 +77,7 @@
     --mn-color-accent-strong: hsl(354 70% 74.5%);
     --mn-color-accent-on-strong: hsl(224 22% 6.5%);
     --mn-color-accent-border: hsl(354 70% 74.5%);
+    --mn-color-accent-strong-inverse: hsl(354 70% 34%);
     --primary: 354 70% 74.5%;
     --primary-foreground: 224 22% 6.5%;
     --ring: 354 70% 74.5%;