@mohasinac/appkit 4.53.1 → 4.54.0-next.0

package/dist/tokens/themes/index.d.ts

@@ -2,8 +2,10 @@ import { DEFAULT_DARK_THEME } from "./default-dark";
 import { DEFAULT_LIGHT_THEME } from "./default-light";
 import { COBALT_NIGHT_THEME } from "./cobalt-night";
 import { SUNSET_THEME } from "./sunset";
+import { TECHNICAL_DARK_THEME } from "./technical-dark";
+import { TECHNICAL_LIGHT_THEME } from "./technical-light";
 import type { ThemeMode, ThemeRecord } from "./types";
-export { DEFAULT_LIGHT_THEME, DEFAULT_DARK_THEME, COBALT_NIGHT_THEME, SUNSET_THEME };
+export { DEFAULT_LIGHT_THEME, DEFAULT_DARK_THEME, COBALT_NIGHT_THEME, SUNSET_THEME, TECHNICAL_DARK_THEME, TECHNICAL_LIGHT_THEME, };
 export { REQUIRED_GRADIENT_KEYS, REQUIRED_THEME_TOKENS } from "./required";
 export type { RequiredThemeToken } from "./required";
 export type { GradientKey, ThemeMode, ThemeRecord } from "./types";

package/dist/tokens/themes/index.js

@@ -2,7 +2,9 @@ import { DEFAULT_DARK_THEME } from "./default-dark.js";
 import { DEFAULT_LIGHT_THEME } from "./default-light.js";
 import { COBALT_NIGHT_THEME } from "./cobalt-night.js";
 import { SUNSET_THEME } from "./sunset.js";
-export { DEFAULT_LIGHT_THEME, DEFAULT_DARK_THEME, COBALT_NIGHT_THEME, SUNSET_THEME };
+import { TECHNICAL_DARK_THEME } from "./technical-dark.js";
+import { TECHNICAL_LIGHT_THEME } from "./technical-light.js";
+export { DEFAULT_LIGHT_THEME, DEFAULT_DARK_THEME, COBALT_NIGHT_THEME, SUNSET_THEME, TECHNICAL_DARK_THEME, TECHNICAL_LIGHT_THEME, };
 export { REQUIRED_GRADIENT_KEYS, REQUIRED_THEME_TOKENS } from "./required.js";
 /** Built-in themes that ship with appkit; admin cannot delete these. */
 export const BUILT_IN_THEMES = [
@@ -17,6 +19,14 @@ export const BUILT_IN_THEMES = [
 export const THEME_TEMPLATES = [
     COBALT_NIGHT_THEME,
     SUNSET_THEME,
+    /*
+     * Technical Dark / Light — a developer-tool identity: graphite surfaces,
+     * hairline borders, a mono-forward type stack and syntax-palette accents
+     * reused semantically (difficulty badges, submission verdicts, status chips).
+     * Shipped as a matched PAIR so switching mode does not change identity.
+     */
+    TECHNICAL_DARK_THEME,
+    TECHNICAL_LIGHT_THEME,
 ];
 /**
  * Find the default built-in theme for a given mode.

package/dist/tokens/themes/technical-dark.d.ts

@@ -0,0 +1,30 @@
+import type { ThemeRecord } from "./types";
+/**
+ * Theme template — Technical Dark.
+ *
+ * A developer-tool identity rather than a marketing one: a near-black graphite
+ * base, ONE elevation step, hairline borders, and accents drawn from a syntax
+ * palette (keyword violet, string green, number amber, error red) reused
+ * semantically for difficulty badges, submission verdicts and status chips.
+ *
+ * Deliberately different from `default-dark` (crimson + cyan on navy): there is
+ * no brand gradient wash, surfaces sit close together in luminance, and the
+ * type stack is mono-forward — `display`/`sans` are monospace for headings,
+ * labels, IDs and tables, while `editorial` carries a real reading face so
+ * 2,000-word lessons stay comfortable. That three-slot split is why no separate
+ * "prose font" token was needed.
+ *
+ * Not a built-in (`builtIn: false`) — seeded as a selectable template that an
+ * admin can assign as the default dark theme or clone from `ThemeManagerView`.
+ * Only overrides the tokens the matching CSS block overrides; everything else
+ * (spacing, font sizes, unredefined gradients) falls back to
+ * `DEFAULT_DARK_THEME`, the same way the CSS block cascades from `:root`.
+ *
+ * Contrast against `appkit-color-bg` (#0b0d10), measured not estimated:
+ * text 15.82:1, muted 7.72:1, faint 4.68:1, primary 6.53:1, and every status
+ * colour ≥ 4.5:1 (lowest: error 7.01:1). Nothing here is AA-large-only.
+ *
+ * Mirrors the `[data-theme="technical-dark"]` block in
+ * `appkit/src/tokens/tokens.css`; the two must stay byte-identical.
+ */
+export declare const TECHNICAL_DARK_THEME: ThemeRecord;

package/dist/tokens/themes/technical-dark.js

@@ -0,0 +1,103 @@
+import { DEFAULT_DARK_THEME } from "./default-dark.js";
+/**
+ * Theme template — Technical Dark.
+ *
+ * A developer-tool identity rather than a marketing one: a near-black graphite
+ * base, ONE elevation step, hairline borders, and accents drawn from a syntax
+ * palette (keyword violet, string green, number amber, error red) reused
+ * semantically for difficulty badges, submission verdicts and status chips.
+ *
+ * Deliberately different from `default-dark` (crimson + cyan on navy): there is
+ * no brand gradient wash, surfaces sit close together in luminance, and the
+ * type stack is mono-forward — `display`/`sans` are monospace for headings,
+ * labels, IDs and tables, while `editorial` carries a real reading face so
+ * 2,000-word lessons stay comfortable. That three-slot split is why no separate
+ * "prose font" token was needed.
+ *
+ * Not a built-in (`builtIn: false`) — seeded as a selectable template that an
+ * admin can assign as the default dark theme or clone from `ThemeManagerView`.
+ * Only overrides the tokens the matching CSS block overrides; everything else
+ * (spacing, font sizes, unredefined gradients) falls back to
+ * `DEFAULT_DARK_THEME`, the same way the CSS block cascades from `:root`.
+ *
+ * Contrast against `appkit-color-bg` (#0b0d10), measured not estimated:
+ * text 15.82:1, muted 7.72:1, faint 4.68:1, primary 6.53:1, and every status
+ * colour ≥ 4.5:1 (lowest: error 7.01:1). Nothing here is AA-large-only.
+ *
+ * Mirrors the `[data-theme="technical-dark"]` block in
+ * `appkit/src/tokens/tokens.css`; the two must stay byte-identical.
+ */
+export const TECHNICAL_DARK_THEME = {
+    id: "technical-dark",
+    name: "Technical Dark",
+    mode: "dark",
+    builtIn: false,
+    tokens: {
+        // Brand — keyword violet. Chosen because it reads as "syntax", not
+        // "product", and sits far from every status hue below.
+        "appkit-color-primary": "#7c8cff",
+        "appkit-color-primary-50": "#eef0ff",
+        "appkit-color-primary-100": "#e0e4ff",
+        "appkit-color-primary-200": "#c7cdff",
+        "appkit-color-primary-300": "#a5aeff",
+        "appkit-color-primary-400": "#8e99ff",
+        "appkit-color-primary-500": "#7c8cff",
+        "appkit-color-primary-600": "#5a68e8",
+        "appkit-color-primary-700": "#4650c4",
+        "appkit-color-primary-800": "#373f9c",
+        "appkit-color-primary-900": "#2b317a",
+        "appkit-color-primary-950": "#171a45",
+        // Secondary — string green.
+        "appkit-color-secondary": "#56d39a",
+        "appkit-color-secondary-50": "#ecfdf5",
+        "appkit-color-secondary-100": "#d1fae5",
+        "appkit-color-secondary-200": "#a7f3d0",
+        "appkit-color-secondary-300": "#7ee7b8",
+        "appkit-color-secondary-400": "#56d39a",
+        "appkit-color-secondary-500": "#34b87d",
+        "appkit-color-secondary-600": "#1f9664",
+        "appkit-color-secondary-700": "#187752",
+        "appkit-color-secondary-800": "#155e42",
+        "appkit-color-secondary-900": "#124b36",
+        "appkit-color-secondary-950": "#062a1d",
+        // Surfaces — one elevation step, hairline borders. Editor chrome.
+        "appkit-color-bg": "#0b0d10",
+        "appkit-color-surface": "#13161b",
+        "appkit-color-surface-elevated": "rgba(19, 22, 27, 0.92)",
+        "appkit-color-surface-input": "rgba(27, 31, 38, 0.7)",
+        "appkit-color-surface-hover": "rgba(148, 163, 184, 0.1)",
+        "appkit-color-surface-raised": "rgba(27, 31, 38, 0.8)",
+        "appkit-color-primary-surface": "rgba(124, 140, 255, 0.16)",
+        "appkit-color-border": "#242a33",
+        "appkit-color-border-subtle": "rgba(36, 42, 51, 0.6)",
+        "appkit-color-text": "#e4e8ee",
+        "appkit-color-text-muted": "#9aa4b2",
+        // 4.68:1 — clears AA at body size, so faint metadata is still readable
+        // rather than merely decorative.
+        "appkit-color-text-faint": "#747d8c",
+        // Dark ink on the violet fill: 6.53:1, where white measures only 2.98:1
+        // and would fail. This is why primary is not simply paired with white.
+        "appkit-color-text-on-primary": "#0b0d10",
+        "appkit-color-success": "#4ade80",
+        "appkit-color-success-surface": "rgba(22, 101, 68, 0.22)",
+        "appkit-color-warning": "#f2b544",
+        "appkit-color-warning-surface": "rgba(120, 78, 10, 0.22)",
+        "appkit-color-error": "#ff6b6b",
+        "appkit-color-error-surface": "rgba(140, 30, 30, 0.22)",
+        "appkit-color-info": "#58b4ff",
+        "appkit-color-info-surface": "rgba(12, 74, 110, 0.22)",
+        // Amber, deliberately NOT any status or brand hue: a focus ring that
+        // doubles as an error colour is unreadable on an invalid field.
+        "appkit-color-focus-ring": "#ffb86b",
+        // Flatter than the default theme's glow — editor chrome, not neon.
+        "appkit-shadow-glow": "0 0 0 1px rgba(124,140,255,0.14), 0 4px 16px -6px rgba(124,140,255,0.2)",
+        "appkit-shadow-glow-pink": "0 0 0 1px rgba(86,211,154,0.14), 0 4px 18px -6px rgba(86,211,154,0.22)",
+        // Mono-forward: headings, labels, IDs, nav and tables are monospace;
+        // `editorial` is the reading face for lessons and blog prose.
+        "appkit-font-display": "var(--font-mono), \"JetBrains Mono\", \"IBM Plex Mono\", ui-monospace, \"SFMono-Regular\", Consolas, monospace",
+        "appkit-font-sans": "var(--font-mono), \"JetBrains Mono\", \"IBM Plex Mono\", ui-monospace, \"SFMono-Regular\", Consolas, monospace",
+        "appkit-font-editorial": "var(--font-body), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
+        "appkit-font-mono": "var(--font-mono), \"JetBrains Mono\", \"IBM Plex Mono\", ui-monospace, \"SFMono-Regular\", Consolas, monospace",
+    },
+    gradients: { ...DEFAULT_DARK_THEME.gradients },
+};

package/dist/tokens/themes/technical-light.d.ts

@@ -0,0 +1,22 @@
+import type { ThemeRecord } from "./types";
+/**
+ * Theme template — Technical Light.
+ *
+ * A true counterpart to `technical-dark`, not an afterthought: same geometry,
+ * same mono-forward type stack, same syntax-derived accent *roles* — but every
+ * accent is re-darkened for a paper-white ground rather than reused from the
+ * dark preset. Reusing them would have been the easy mistake: #7c8cff on
+ * #fbfbfa measures 2.88:1, which fails AA outright, so primary drops to
+ * #4b5bd6 (5.38:1) and each status hue is darkened to match.
+ *
+ * Not a built-in (`builtIn: false`). Only overrides the tokens the matching CSS
+ * block overrides; everything else falls back to `DEFAULT_LIGHT_THEME`.
+ *
+ * Contrast against `appkit-color-bg` (#fbfbfa), measured not estimated:
+ * text 17.15:1, muted 5.84:1, faint 4.67:1, primary 5.38:1, white-on-primary
+ * 5.58:1, and every status colour ≥ 4.5:1 (lowest: success 4.80:1).
+ *
+ * Mirrors the `[data-theme="technical-light"]` block in
+ * `appkit/src/tokens/tokens.css`; the two must stay byte-identical.
+ */
+export declare const TECHNICAL_LIGHT_THEME: ThemeRecord;

package/dist/tokens/themes/technical-light.js

@@ -0,0 +1,89 @@
+import { DEFAULT_LIGHT_THEME } from "./default-light.js";
+/**
+ * Theme template — Technical Light.
+ *
+ * A true counterpart to `technical-dark`, not an afterthought: same geometry,
+ * same mono-forward type stack, same syntax-derived accent *roles* — but every
+ * accent is re-darkened for a paper-white ground rather than reused from the
+ * dark preset. Reusing them would have been the easy mistake: #7c8cff on
+ * #fbfbfa measures 2.88:1, which fails AA outright, so primary drops to
+ * #4b5bd6 (5.38:1) and each status hue is darkened to match.
+ *
+ * Not a built-in (`builtIn: false`). Only overrides the tokens the matching CSS
+ * block overrides; everything else falls back to `DEFAULT_LIGHT_THEME`.
+ *
+ * Contrast against `appkit-color-bg` (#fbfbfa), measured not estimated:
+ * text 17.15:1, muted 5.84:1, faint 4.67:1, primary 5.38:1, white-on-primary
+ * 5.58:1, and every status colour ≥ 4.5:1 (lowest: success 4.80:1).
+ *
+ * Mirrors the `[data-theme="technical-light"]` block in
+ * `appkit/src/tokens/tokens.css`; the two must stay byte-identical.
+ */
+export const TECHNICAL_LIGHT_THEME = {
+    id: "technical-light",
+    name: "Technical Light",
+    mode: "light",
+    builtIn: false,
+    tokens: {
+        // Same violet ROLE as the dark preset, re-darkened for white.
+        "appkit-color-primary": "#4b5bd6",
+        "appkit-color-primary-50": "#eef0ff",
+        "appkit-color-primary-100": "#e0e4ff",
+        "appkit-color-primary-200": "#c7cdff",
+        "appkit-color-primary-300": "#a5aeff",
+        "appkit-color-primary-400": "#7c8cff",
+        "appkit-color-primary-500": "#5a68e8",
+        "appkit-color-primary-600": "#4b5bd6",
+        "appkit-color-primary-700": "#3b45ad",
+        "appkit-color-primary-800": "#2f3789",
+        "appkit-color-primary-900": "#262c6d",
+        "appkit-color-primary-950": "#151840",
+        "appkit-color-secondary": "#0f8f5f",
+        "appkit-color-secondary-50": "#ecfdf5",
+        "appkit-color-secondary-100": "#d1fae5",
+        "appkit-color-secondary-200": "#a7f3d0",
+        "appkit-color-secondary-300": "#6ee7b7",
+        "appkit-color-secondary-400": "#34b87d",
+        "appkit-color-secondary-500": "#0f8f5f",
+        "appkit-color-secondary-600": "#0c744d",
+        "appkit-color-secondary-700": "#0a5c3d",
+        "appkit-color-secondary-800": "#084830",
+        "appkit-color-secondary-900": "#063a27",
+        "appkit-color-secondary-950": "#032016",
+        // Paper white, not pure #fff — pure white against a mono type stack
+        // glares at the sizes this UI uses.
+        "appkit-color-bg": "#fbfbfa",
+        "appkit-color-surface": "#ffffff",
+        "appkit-color-surface-elevated": "rgba(255, 255, 255, 0.96)",
+        "appkit-color-surface-input": "rgba(244, 244, 242, 0.8)",
+        "appkit-color-surface-hover": "rgba(22, 24, 29, 0.05)",
+        "appkit-color-surface-raised": "rgba(244, 244, 242, 0.9)",
+        "appkit-color-primary-surface": "rgba(75, 91, 214, 0.1)",
+        "appkit-color-border": "#e2e2df",
+        "appkit-color-border-subtle": "rgba(226, 226, 223, 0.7)",
+        "appkit-color-text": "#16181d",
+        "appkit-color-text-muted": "#5c6370",
+        // #767d89 measured 4.00:1 here — AA for large text only. Darkened so even
+        // faint metadata clears AA at body size.
+        "appkit-color-text-faint": "#6b7280",
+        "appkit-color-text-on-primary": "#ffffff",
+        "appkit-color-success": "#13804f",
+        "appkit-color-success-surface": "rgba(19, 128, 79, 0.1)",
+        "appkit-color-warning": "#9a6400",
+        "appkit-color-warning-surface": "rgba(154, 100, 0, 0.1)",
+        "appkit-color-error": "#c62828",
+        "appkit-color-error-surface": "rgba(198, 40, 40, 0.1)",
+        "appkit-color-info": "#0a69b5",
+        "appkit-color-info-surface": "rgba(10, 105, 181, 0.1)",
+        // Darkened amber. The dark preset's #ffb86b measures 1.65:1 here —
+        // effectively an invisible focus ring, which is a keyboard trap.
+        "appkit-color-focus-ring": "#b45a00",
+        "appkit-shadow-glow": "0 0 0 1px rgba(75,91,214,0.14), 0 4px 16px -6px rgba(75,91,214,0.18)",
+        "appkit-shadow-glow-pink": "0 0 0 1px rgba(15,143,95,0.14), 0 4px 18px -6px rgba(15,143,95,0.2)",
+        "appkit-font-display": "var(--font-mono), \"JetBrains Mono\", \"IBM Plex Mono\", ui-monospace, \"SFMono-Regular\", Consolas, monospace",
+        "appkit-font-sans": "var(--font-mono), \"JetBrains Mono\", \"IBM Plex Mono\", ui-monospace, \"SFMono-Regular\", Consolas, monospace",
+        "appkit-font-editorial": "var(--font-body), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
+        "appkit-font-mono": "var(--font-mono), \"JetBrains Mono\", \"IBM Plex Mono\", ui-monospace, \"SFMono-Regular\", Consolas, monospace",
+    },
+    gradients: { ...DEFAULT_LIGHT_THEME.gradients },
+};

package/dist/tokens/tokens.css

@@ -628,6 +628,161 @@
   --appkit-shadow-glow-pink:       0 0 0 1px rgba(244,63,94,0.18), 0 4px 20px -4px rgba(244,63,94,0.30);
 }
 
+/* --- Theme — Technical Dark ([data-theme="technical-dark"]) --------------- */
+/* Developer-tool identity: graphite surfaces, hairline borders, a mono-forward
+   type stack, and accents from a syntax palette (keyword violet, string green,
+   number amber, error red) reused semantically for difficulty badges,
+   submission verdicts and status chips.
+
+   Mirrors src/tokens/themes/technical-dark.ts — values must stay identical or
+   the first paint disagrees with the hydrated theme.
+
+   Contrast on --appkit-color-bg (#0b0d10), measured: text 15.82:1,
+   muted 7.72:1, faint 4.68:1, primary 6.53:1, lowest status 7.01:1. */
+[data-theme="technical-dark"] {
+  --appkit-color-primary:          #7c8cff;
+  --appkit-color-primary-50:       #eef0ff;
+  --appkit-color-primary-100:      #e0e4ff;
+  --appkit-color-primary-200:      #c7cdff;
+  --appkit-color-primary-300:      #a5aeff;
+  --appkit-color-primary-400:      #8e99ff;
+  --appkit-color-primary-500:      #7c8cff;
+  --appkit-color-primary-600:      #5a68e8;
+  --appkit-color-primary-700:      #4650c4;
+  --appkit-color-primary-800:      #373f9c;
+  --appkit-color-primary-900:      #2b317a;
+  --appkit-color-primary-950:      #171a45;
+
+  --appkit-color-secondary:        #56d39a;
+  --appkit-color-secondary-50:     #ecfdf5;
+  --appkit-color-secondary-100:    #d1fae5;
+  --appkit-color-secondary-200:    #a7f3d0;
+  --appkit-color-secondary-300:    #7ee7b8;
+  --appkit-color-secondary-400:    #56d39a;
+  --appkit-color-secondary-500:    #34b87d;
+  --appkit-color-secondary-600:    #1f9664;
+  --appkit-color-secondary-700:    #187752;
+  --appkit-color-secondary-800:    #155e42;
+  --appkit-color-secondary-900:    #124b36;
+  --appkit-color-secondary-950:    #062a1d;
+
+  --appkit-color-bg:               #0b0d10;
+  --appkit-color-surface:          #13161b;
+  --appkit-color-surface-elevated: rgba(19, 22, 27, 0.92);
+  --appkit-color-surface-input:    rgba(27, 31, 38, 0.7);
+
+  --appkit-color-surface-hover:    rgba(148, 163, 184, 0.1);
+  --appkit-color-surface-raised:   rgba(27, 31, 38, 0.8);
+  --appkit-color-primary-surface:  rgba(124, 140, 255, 0.16);
+
+  --appkit-color-border:           #242a33;
+  --appkit-color-border-subtle:    rgba(36, 42, 51, 0.6);
+
+  --appkit-color-text:             #e4e8ee;
+  --appkit-color-text-muted:       #9aa4b2;
+  --appkit-color-text-faint:       #747d8c;
+  /* Dark ink on the violet fill: 6.53:1, where white measures 2.98:1 and
+     fails. Declared here AND in the TS record or first paint disagrees. */
+  --appkit-color-text-on-primary:  #0b0d10;
+
+  --appkit-color-success:          #4ade80;
+  --appkit-color-success-surface:  rgba(22, 101, 68, 0.22);
+  --appkit-color-warning:          #f2b544;
+  --appkit-color-warning-surface:  rgba(120, 78, 10, 0.22);
+  --appkit-color-error:            #ff6b6b;
+  --appkit-color-error-surface:    rgba(140, 30, 30, 0.22);
+  --appkit-color-info:             #58b4ff;
+  --appkit-color-info-surface:     rgba(12, 74, 110, 0.22);
+
+  /* Amber, deliberately not a status or brand hue — a focus ring that doubles
+     as an error colour is unreadable on an invalid field. */
+  --appkit-color-focus-ring:       #ffb86b;
+  --appkit-shadow-glow:            0 0 0 1px rgba(124,140,255,0.14), 0 4px 16px -6px rgba(124,140,255,0.2);
+  --appkit-shadow-glow-pink:       0 0 0 1px rgba(86,211,154,0.14), 0 4px 18px -6px rgba(86,211,154,0.22);
+
+  /* Mono-forward: display/sans are monospace for headings, labels, IDs and
+     tables; editorial carries the reading face for long lesson prose. */
+  --appkit-font-display:           var(--font-mono), "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
+  --appkit-font-sans:              var(--font-mono), "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
+  --appkit-font-editorial:         var(--font-body), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --appkit-font-mono:              var(--font-mono), "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
+}
+
+/* --- Theme — Technical Light ([data-theme="technical-light"]) ------------- */
+/* The matched light counterpart. Every accent is RE-DARKENED rather than
+   reused: the dark preset's #7c8cff measures 2.88:1 on this ground and fails
+   AA, and its #ffb86b focus ring measures 1.65:1 — an invisible focus ring is
+   a keyboard trap.
+
+   Mirrors src/tokens/themes/technical-light.ts.
+
+   Contrast on --appkit-color-bg (#fbfbfa), measured: text 17.15:1,
+   muted 5.84:1, faint 4.67:1, primary 5.38:1, lowest status 4.80:1. */
+[data-theme="technical-light"] {
+  --appkit-color-primary:          #4b5bd6;
+  --appkit-color-primary-50:       #eef0ff;
+  --appkit-color-primary-100:      #e0e4ff;
+  --appkit-color-primary-200:      #c7cdff;
+  --appkit-color-primary-300:      #a5aeff;
+  --appkit-color-primary-400:      #7c8cff;
+  --appkit-color-primary-500:      #5a68e8;
+  --appkit-color-primary-600:      #4b5bd6;
+  --appkit-color-primary-700:      #3b45ad;
+  --appkit-color-primary-800:      #2f3789;
+  --appkit-color-primary-900:      #262c6d;
+  --appkit-color-primary-950:      #151840;
+
+  --appkit-color-secondary:        #0f8f5f;
+  --appkit-color-secondary-50:     #ecfdf5;
+  --appkit-color-secondary-100:    #d1fae5;
+  --appkit-color-secondary-200:    #a7f3d0;
+  --appkit-color-secondary-300:    #6ee7b7;
+  --appkit-color-secondary-400:    #34b87d;
+  --appkit-color-secondary-500:    #0f8f5f;
+  --appkit-color-secondary-600:    #0c744d;
+  --appkit-color-secondary-700:    #0a5c3d;
+  --appkit-color-secondary-800:    #084830;
+  --appkit-color-secondary-900:    #063a27;
+  --appkit-color-secondary-950:    #032016;
+
+  --appkit-color-bg:               #fbfbfa;
+  --appkit-color-surface:          #ffffff;
+  --appkit-color-surface-elevated: rgba(255, 255, 255, 0.96);
+  --appkit-color-surface-input:    rgba(244, 244, 242, 0.8);
+
+  --appkit-color-surface-hover:    rgba(22, 24, 29, 0.05);
+  --appkit-color-surface-raised:   rgba(244, 244, 242, 0.9);
+  --appkit-color-primary-surface:  rgba(75, 91, 214, 0.1);
+
+  --appkit-color-border:           #e2e2df;
+  --appkit-color-border-subtle:    rgba(226, 226, 223, 0.7);
+
+  --appkit-color-text:             #16181d;
+  --appkit-color-text-muted:       #5c6370;
+  /* #767d89 measured 4.00:1 — AA for large text only. Darkened to clear AA
+     at body size. */
+  --appkit-color-text-faint:       #6b7280;
+  --appkit-color-text-on-primary:  #ffffff;
+
+  --appkit-color-success:          #13804f;
+  --appkit-color-success-surface:  rgba(19, 128, 79, 0.1);
+  --appkit-color-warning:          #9a6400;
+  --appkit-color-warning-surface:  rgba(154, 100, 0, 0.1);
+  --appkit-color-error:            #c62828;
+  --appkit-color-error-surface:    rgba(198, 40, 40, 0.1);
+  --appkit-color-info:             #0a69b5;
+  --appkit-color-info-surface:     rgba(10, 105, 181, 0.1);
+
+  --appkit-color-focus-ring:       #b45a00;
+  --appkit-shadow-glow:            0 0 0 1px rgba(75,91,214,0.14), 0 4px 16px -6px rgba(75,91,214,0.18);
+  --appkit-shadow-glow-pink:       0 0 0 1px rgba(15,143,95,0.14), 0 4px 18px -6px rgba(15,143,95,0.2);
+
+  --appkit-font-display:           var(--font-mono), "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
+  --appkit-font-sans:              var(--font-mono), "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
+  --appkit-font-editorial:         var(--font-body), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --appkit-font-mono:              var(--font-mono), "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
+}
+
 /* --- Typography ----------------------------------------------------------- */
 :root {
   --appkit-font-sans:      var(--font-body), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

package/dist/ui/components/GatedPrice.js

@@ -1,8 +1,11 @@
 "use client";
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
 import { Span } from "./Typography.js";
 import { Row } from "./Layout.js";
-import { ROUTES } from "../../next/routing/route-map.js";
+import { Icon } from "./Icon.js";
+import { IconButton, ICON_BUTTON_ICON_SIZE } from "./IconButton.js";
+import { LoginRequiredModal } from "./LoginRequiredModal.js";
 import { getDefaultCurrency } from "../../core/baseline-resolver.js";
 import { formatCurrency, formatPercentage } from "../../utils/number.formatter.js";
 import { useCanSeePrices } from "../../react/hooks/useCanSeePrices.js";
@@ -24,6 +27,30 @@ import { useCanSeePrices } from "../../react/hooks/useCanSeePrices.js";
 // audit-dead-css-ok: selector target for the paywall JSON-LD, never styled
 export const GATED_PRICE_CLASS = "appkit-gated-price";
 const DEFAULT_LABEL = "Sign in to see price";
+/**
+ * The signed-out state: a closed eye you can press, not a line of refusal copy.
+ *
+ * 🛑 WHY AN ICON AND NOT THE SENTENCE. The prompt used to be a full
+ * "🔒 Sign in to see price" link in `--appkit-color-primary`, repeated once per
+ * card. On a 24-card grid that is 24 lines of brand-coloured refusal, each
+ * wider than the price it stands in for — so the grid's loudest element became
+ * the thing the visitor cannot have, and the rows it sat in changed width with
+ * the copy. An eye occupies roughly a price's worth of space, reads as "there
+ * is something here", and says it once per card without shouting.
+ *
+ * 🛑 THE ASK IS ON THE CLICK, NOT ON THE PAGE. Pressing it opens the shared
+ * sign-in modal rather than navigating away: a visitor who taps a price on a
+ * listing page wants the price, not to lose their place in the catalogue. The
+ * modal is rendered only while open, so a grid of 24 gated prices mounts 24
+ * buttons and zero modals.
+ *
+ * The accessible name is still the full sentence — the icon is the visual
+ * economy, not an information loss.
+ */
+function GatedPriceReveal({ label }) {
+    const [asking, setAsking] = React.useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { size: "sm", variant: "outline", rounded: "lg", "aria-label": label, title: label, onClick: () => setAsking(true), icon: _jsx(Icon, { name: "hide", size: ICON_BUTTON_ICON_SIZE.sm }) }), asking && (_jsx(LoginRequiredModal, { isOpen: true, onClose: () => setAsking(false), message: `${label}. Sign in or create an account to see prices across the site.` }))] }));
+}
 /**
  * Renders its children only when the viewer may see prices; renders NOTHING
  * otherwise — no prompt, no placeholder.
@@ -65,7 +92,7 @@ export function GatedPrice({ amount, currency = getDefaultCurrency(), originalAm
         return (_jsx(Span, { className: `${rootClass} appkit-gated-price__pending`, "aria-hidden": "true" }));
     }
     if (!canSeePrices) {
-        return (_jsx("a", { href: String(ROUTES.AUTH.LOGIN), className: `${rootClass} appkit-gated-price__prompt`, children: label }));
+        return (_jsx(Span, { className: `${rootClass} appkit-gated-price__prompt`, children: _jsx(GatedPriceReveal, { label: label }) }));
     }
     if (children !== undefined) {
         return _jsx(Span, { className: rootClass, children: children });

package/dist/ui/components/GatedPrice.style.css

@@ -11,30 +11,33 @@
   min-width: 5rem;
   height: 1.25rem;
   border-radius: 0.25rem;
-  background: var(--appkit-color-surface-muted);
+  /* 🛑 `--appkit-color-surface-muted` is NOT a token — 15 uses, 0 definitions,
+     and `audit-undefined-css-vars` ratchets it down. An undefined custom
+     property with no fallback makes the whole declaration invalid, so this
+     placeholder had no background at all and the grid still reflowed on
+     resolve, which is the one job it has. */
+  background: var(--appkit-color-surface-input);
 }
 
 .appkit-gated-price__prompt {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
-  font-size: 0.8125rem;
-  font-weight: 600;
+  /*
+   * The eye is a 2rem IconButton while `__pending` above is a 1.25rem price
+   * line, so a GUEST's row grows by 0.75rem once the session resolves. That is
+   * deliberate and is the lesser of the two: the alternative is making
+   * `__pending` 2rem, which shifts the row for SIGNED-IN users — the ones who
+   * end up looking at real content. The guest shift happens once per load and
+   * applies to every card identically, so the grid moves as one rather than
+   * going ragged.
+   */
   line-height: 1.25rem;
-  color: var(--appkit-color-primary);
-  text-decoration: none;
-  cursor: pointer;
 }
 
-.appkit-gated-price__prompt:hover {
-  text-decoration: underline;
-}
-
-/* A lock glyph via ::before rather than an icon component: this renders inside
-   card grids, where 24 extra SVG trees per page is real weight for decoration
-   that carries no meaning the label doesn't already state. */
-.appkit-gated-price__prompt::before {
-  content: "\1F512";
-  font-size: 0.75rem;
-  line-height: 1;
-}
+/*
+ * 🛑 The eye itself has NO rules here, on purpose. It is an `<IconButton
+ * size="sm" variant="outline">`, so its box, ink, hover and focus ring all
+ * come from the design system — a second, private set of button styles for
+ * one control is exactly how a UI ends up with two kinds of icon button that
+ * drift apart. This wrapper only has to keep the row's height stable.
+ */