@kontourai/survey 8.0.0 → 8.1.1

package/dist/src/review-workbench/review-workbench.css

@@ -20,12 +20,23 @@
   /* text */
   --k-text: #eef3f8;
   --k-text-muted: #aebccb;
-  --k-text-faint: #72869b;
+  --k-text-faint: #75889d;
 
-  /* brand */
+  /* brand — the product identity slot (eyebrows, accents, the progress sweep).
+     A product theme or a white-label deployment may override it; nothing
+     interactive reads it, so a brand that fails contrast cannot break a
+     button or a focus ring. */
   --k-brand: #5ce0c6;
   --k-brand-contrast: #06080b;
 
+  /* interaction roles — primary actions and keyboard focus. They hold their
+     own values instead of var(--k-brand): an alias would make every brand
+     override repaint buttons whether or not the new color can carry text.
+     Each theme and mode sets its action and focus beside its brand. */
+  --k-action: #5ce0c6;
+  --k-action-contrast: #06080b;
+  --k-focus: #5ce0c6;
+
   /* semantic status scale */
   --k-positive: #34d399;
   --k-caution: #f3b14b;
@@ -36,6 +47,51 @@
   --k-caution-soft: color-mix(in oklab, var(--k-caution) 14%, transparent);
   --k-negative-soft: color-mix(in oklab, var(--k-negative) 14%, transparent);
   --k-active-soft: color-mix(in oklab, var(--k-active) 14%, transparent);
+  /* Text on a filled status tone (tone badges, status-toned buttons). Its own
+     role so a white-label --k-brand-contrast cannot recolor status text. */
+  --k-status-contrast: #06080b;
+
+  /* trust states — Surface's claim statuses (TRUST_STATUSES, in Surface's
+     order), shown as presentation states: separate from the five status
+     tones and from the product accents. Each state has its own ink (label,
+     glyph, border), fill (the chip's own background, so its text pair does
+     not depend on the container) and line style (the non-color cue borders
+     and chart strokes reuse). Values are literal, never aliases: an alias
+     declared here resolves here, so a light or themed scope would inherit
+     this scope's hue (ui#78). */
+  --k-trust-unknown: #a2acb7;
+  --k-trust-unknown-fill: #252d39;
+  --k-trust-unknown-line: dotted;
+  --k-trust-proposed: #87b1fd;
+  --k-trust-proposed-fill: #222d42;
+  --k-trust-proposed-line: dashed;
+  --k-trust-assumed: #c4a4fe;
+  --k-trust-assumed-fill: #2a2c43;
+  --k-trust-assumed-line: dashed;
+  --k-trust-verified: #50d492;
+  --k-trust-verified-fill: #1a3233;
+  --k-trust-verified-line: solid;
+  --k-trust-stale: #f6b84d;
+  --k-trust-stale-fill: #312e2a;
+  --k-trust-stale-line: dotted;
+  --k-trust-disputed: #ec81c0;
+  --k-trust-disputed-fill: #30273a;
+  --k-trust-disputed-line: double;
+  --k-trust-superseded: #6bc8d3;
+  --k-trust-superseded-fill: #1e313d;
+  --k-trust-superseded-line: dotted;
+  --k-trust-rejected: #f66d67;
+  --k-trust-rejected-fill: #31242d;
+  --k-trust-rejected-line: solid;
+  --k-trust-revoked: #fdc2a2;
+  --k-trust-revoked-fill: #323036;
+  --k-trust-revoked-line: dotted;
+
+  /* trust basis — the line after a trust-state chip. Caveat facets
+     (Model-derived, not evaluated, cited only, contradicts, failed) are
+     underlined with a dashed line in the text's own color: a line-style cue,
+     never a hue. Names no color, so it inherits the rated muted text. */
+  --k-basis-caveat-decoration: underline dashed 1px;
 
   /* spacing */
   --k-space-1: 4px;
@@ -86,8 +142,11 @@
   --k-tracking-wide: 0.08em;
 
   /* focus — one ring contract so every interactive primitive (controls,
-     buttons, links) shows the same keyboard-focus affordance. */
-  --k-focus-ring: var(--k-brand);
+     buttons, links) shows the same keyboard-focus affordance. The ring color
+     is the --k-focus role; --k-focus-ring is kept as a compatibility alias for
+     consumer styles. Primitives read --k-focus directly, so an override of
+     --k-focus on any element reaches them. */
+  --k-focus-ring: var(--k-focus);
   --k-focus-ring-width: 2px;
   --k-focus-ring-offset: 2px;
 
@@ -103,6 +162,63 @@
   --k-z-toast: 1400;
 }
 
+/* The dark contract again, for a data-theme="dark" element below a light
+   element (ui#80). It sets exactly the tokens the light block sets, with the
+   :root values; check:contrast fails if either drifts. Mode-independent
+   tokens (spacing, type, radii, fonts) are not reset, so a theme's own values
+   for them survive a mode switch. With no light ancestor there is nothing to
+   reset, so it does not match and a dark element simply inherits. */
+.survey-workbench-embed[data-theme="dark"]:where([data-theme="light"] *){
+  color-scheme: dark;
+  --k-bg: #0a0e13;
+  --k-panel: #111824;
+  --k-panel-raised: #16202d;
+  --k-line: rgba(150, 180, 210, 0.12);
+  --k-line-strong: rgba(150, 180, 210, 0.22);
+  --k-shadow: 0 26px 60px -42px rgba(0, 0, 0, 0.95);
+  --k-elevation-overlay:
+    0 1px 2px rgba(0, 0, 0, 0.35),
+    0 12px 32px rgba(0, 0, 0, 0.45),
+    0 24px 56px rgba(0, 0, 0, 0.4);
+  --k-text: #eef3f8;
+  --k-text-muted: #aebccb;
+  --k-text-faint: #75889d;
+  --k-brand: #5ce0c6;
+  --k-brand-contrast: #06080b;
+  --k-action: #5ce0c6;
+  --k-action-contrast: #06080b;
+  --k-focus: #5ce0c6;
+  --k-positive: #34d399;
+  --k-caution: #f3b14b;
+  --k-negative: #ff6f6f;
+  --k-neutral: #6f8095;
+  --k-active: #7aa2ff;
+  --k-status-contrast: #06080b;
+  --k-trust-unknown: #a2acb7;
+  --k-trust-unknown-fill: #252d39;
+  --k-trust-proposed: #87b1fd;
+  --k-trust-proposed-fill: #222d42;
+  --k-trust-assumed: #c4a4fe;
+  --k-trust-assumed-fill: #2a2c43;
+  --k-trust-verified: #50d492;
+  --k-trust-verified-fill: #1a3233;
+  --k-trust-stale: #f6b84d;
+  --k-trust-stale-fill: #312e2a;
+  --k-trust-disputed: #ec81c0;
+  --k-trust-disputed-fill: #30273a;
+  --k-trust-superseded: #6bc8d3;
+  --k-trust-superseded-fill: #1e313d;
+  --k-trust-rejected: #f66d67;
+  --k-trust-rejected-fill: #31242d;
+  --k-trust-revoked: #fdc2a2;
+  --k-trust-revoked-fill: #323036;
+  --k-focus-ring: var(--k-focus);
+  --k-positive-soft: color-mix(in oklab, var(--k-positive) 14%, transparent);
+  --k-caution-soft: color-mix(in oklab, var(--k-caution) 14%, transparent);
+  --k-negative-soft: color-mix(in oklab, var(--k-negative) 14%, transparent);
+  --k-active-soft: color-mix(in oklab, var(--k-active) 14%, transparent);
+}
+
 .survey-workbench-embed[data-theme="light"]{
   color-scheme: light;
   --k-bg: #f5f4ef;
@@ -117,25 +233,92 @@
     0 18px 48px rgba(0, 0, 0, 0.08);
   --k-text: #202124;
   --k-text-muted: #5b626b;
-  --k-text-faint: #707782;
+  --k-text-faint: #6a707b;
   /* The dark-mode brand (#5ce0c6) is too light to carry white text or read as
      text on the light canvas (~1.6:1). Darken it for light mode: #0e7c64 holds
      the teal hue while clearing WCAG AA both as a button fill (white text,
      5.1:1) and as text on --k-bg (4.7:1). */
   --k-brand: #0e7c64;
   --k-brand-contrast: #ffffff;
+  --k-action: #0e7c64;
+  --k-action-contrast: #ffffff;
+  --k-focus: #0e7c64;
   --k-positive: #168257;
   --k-caution: #8a5a00;
   --k-negative: #c83b3b;
   --k-neutral: #5f6975;
   --k-active: #3f6fd6;
+  --k-status-contrast: #ffffff;
+
+  /* Light trust inks are dark enough that each label clears AA on its own
+     tinted fill; check:contrast rates every pair. */
+  --k-trust-unknown: #535c66;
+  --k-trust-unknown-fill: #eeeff0;
+  --k-trust-proposed: #2855ad;
+  --k-trust-proposed-fill: #eaeef7;
+  --k-trust-assumed: #6938a7;
+  --k-trust-assumed-fill: #f0ebf6;
+  --k-trust-verified: #006d42;
+  --k-trust-verified-fill: #e6f0ec;
+  --k-trust-stale: #855a00;
+  --k-trust-stale-fill: #f3efe6;
+  --k-trust-disputed: #94296f;
+  --k-trust-disputed-fill: #f4eaf1;
+  --k-trust-superseded: #016770;
+  --k-trust-superseded-fill: #e6f0f1;
+  --k-trust-rejected: #a12628;
+  --k-trust-rejected-fill: #f6e9ea;
+  --k-trust-revoked: #713408;
+  --k-trust-revoked-fill: #f1ebe6;
+
+  /* Tokens derived with var() resolve on the element that declares them and
+     are inherited as computed values, so each scope that changes an input
+     redeclares them. Without this, data-theme on a descendant of <html> would
+     keep the dark default's ring and soft fills. */
+  --k-focus-ring: var(--k-focus);
+  --k-positive-soft: color-mix(in oklab, var(--k-positive) 14%, transparent);
+  --k-caution-soft: color-mix(in oklab, var(--k-caution) 14%, transparent);
+  --k-negative-soft: color-mix(in oklab, var(--k-negative) 14%, transparent);
+  --k-active-soft: color-mix(in oklab, var(--k-active) 14%, transparent);
 }
 
 
+/* Product themes. Each theme sets its brand (identity) and, beside it, the
+   action and focus roles. The roles hold their own values rather than aliasing
+   the brand, so a later brand override cannot break primary actions or focus.
+   Every scope that sets --k-action also sets --k-action-contrast: a theme
+   nested under another theme's scope would otherwise inherit that scope's text
+   color onto its own fill.
+
+   Every scope that sets --k-focus also redeclares --k-focus-ring, and every
+   scope that sets a status hue redeclares its soft fill: a var()-derived token
+   resolves where it is declared, so without this a scope below the root would
+   inherit the root's value (issue 78). check:tokens enforces both.
+
+   Each light block matches three placements of the theme class and
+   data-theme="light": on one element, the theme class below the light
+   attribute, and the light attribute below the theme class. The last is
+   wrapped in :where() so it weighs the same as the bare [data-theme="light"]
+   block in tokens.css (which it follows, so it wins there) and less than a
+   theme class sitting on the light element itself: a nested theme keeps its
+   own identity.
+
+   Scoping rule (ui#80, ui#84; DESIGN.md "Theme and mode scoping"): the
+   nearest data-theme picks the mode and the nearest theme class picks the
+   product. The :where(:not(...)) tails enforce "nearest" without changing a
+   selector's weight: the class-below-attribute form stops at a nearer
+   data-theme="dark", and the attribute-below-class form stops at a nearer
+   (or its own) other theme class. Weights are unchanged, so an override
+   declared later with these selectors still wins. */
+
 .survey-workbench-embed.theme-survey{
   --k-bg: #06080b;
   --k-brand: #5ce0c6;
-  --k-text-faint: #6f8095;
+  --k-action: #5ce0c6;
+  --k-action-contrast: #06080b;
+  --k-focus: #5ce0c6;
+  --k-text-faint: #78889b;
+  --k-focus-ring: var(--k-focus);
 }
 
 .survey-workbench-embed.theme-console{
@@ -147,6 +330,9 @@
   --k-radius-overlay: 0;
   --k-brand: #c9ff4a;
   --k-brand-contrast: #11120f;
+  --k-action: #c9ff4a;
+  --k-action-contrast: #11120f;
+  --k-focus: #c9ff4a;
   --k-bg: #11120f;
   --k-panel: #191b16;
   --k-panel-raised: #20231e;
@@ -154,30 +340,81 @@
   --k-line-strong: #8ea36e;
   --k-text: #f2f0e8;
   --k-text-muted: #a6ab9c;
-  --k-text-faint: #747a6c;
+  --k-text-faint: #858b7e;
   --k-positive: #a6d37b;
   --k-caution: #e8c15f;
   --k-negative: #ee776f;
   --k-active: #84d8c8;
+  --k-status-contrast: #11120f;
+  --k-focus-ring: var(--k-focus);
+  --k-positive-soft: color-mix(in oklab, var(--k-positive) 14%, transparent);
+  --k-caution-soft: color-mix(in oklab, var(--k-caution) 14%, transparent);
+  --k-negative-soft: color-mix(in oklab, var(--k-negative) 14%, transparent);
+  --k-active-soft: color-mix(in oklab, var(--k-active) 14%, transparent);
 }
 
+/* Flow dark: the brand is the accent lightened (OKLCH hue within 0.3°, same chroma)
+   just enough to read as text at 4.5:1 on bg, panel and raised panel; the
+   action and focus keep the accent, which clears their 3:1 and dark-text
+   pairs. */
 .survey-workbench-embed.theme-flow{
-  --k-brand: #2f88a6;
+  --k-brand: #3890ae;
+  --k-action: #2f88a6;
+  --k-action-contrast: #06080b;
+  --k-focus: #2f88a6;
+  --k-focus-ring: var(--k-focus);
 }
 
 .survey-workbench-embed.theme-surface{
   --k-brand: #14a37a;
-}
-
+  --k-action: #14a37a;
+  --k-action-contrast: #06080b;
+  --k-focus: #14a37a;
+  --k-focus-ring: var(--k-focus);
+}
+
+/* Station: the draft accent, adjusted per mode only where WCAG AA needs it.
+   Dark: the accent carries white text as a fill but is too dark to read as
+   text on the dark panel, so the focus ring is the accent lightened to clear
+   contrast, and the brand is lightened a little further (OKLCH hue within 0.1°) to
+   read as text at 4.5:1 on bg, panel and raised panel; the action keeps the
+   draft accent. */
+.survey-workbench-embed.theme-station{
+  --k-brand: #966aff;
+  --k-action: #7c3aed;
+  --k-action-contrast: #ffffff;
+  --k-focus: #9364ff;
+  --k-focus-ring: var(--k-focus);
+}
+
+/* Survey light: the brand is the accent darkened (same OKLCH hue and chroma) just enough
+   to read as text at 4.5:1 on the light canvas; the action and focus keep the
+   accent. */
 .survey-workbench-embed[data-theme="light"].theme-survey,
-.survey-workbench-embed[data-theme="light"] .theme-survey{
-  --k-brand: #16806f;
-}
-
+.survey-workbench-embed[data-theme="light"] .theme-survey:where(:not([data-theme="dark"], [data-theme="light"] [data-theme="dark"] *)),
+.survey-workbench-embed :where(.theme-survey) [data-theme="light"]:where(:not(.theme-console, .theme-flow, .theme-surface, .theme-station, .theme-survey :is(.theme-console, .theme-flow, .theme-surface, .theme-station) *)){
+  --k-bg: #f5f4ef;
+  --k-text-faint: #6a707b;
+  --k-brand: #107e6d;
+  --k-action: #16806f;
+  --k-action-contrast: #ffffff;
+  --k-focus: #16806f;
+  --k-focus-ring: var(--k-focus);
+}
+
+/* Console light: the brand is the lime darkened (OKLCH hue within 0.1°) just enough
+   to read as text at 4.5:1 on bg, panel and raised panel, and it keeps white
+   brand-contrast text (5.1:1; dark text would be 3.7:1). The action and focus
+   keep the brighter lime with dark text. */
 .survey-workbench-embed[data-theme="light"].theme-console,
-.survey-workbench-embed[data-theme="light"] .theme-console{
-  --k-brand: #6c9400;
+.survey-workbench-embed[data-theme="light"] .theme-console:where(:not([data-theme="dark"], [data-theme="light"] [data-theme="dark"] *)),
+.survey-workbench-embed :where(.theme-console) [data-theme="light"]:where(:not(.theme-survey, .theme-flow, .theme-surface, .theme-station, .theme-console :is(.theme-survey, .theme-flow, .theme-surface, .theme-station) *)){
+  --k-brand: #577800;
   --k-brand-contrast: #ffffff;
+  --k-action: #6c9400;
+  --k-action-contrast: #11120f;
+  --k-focus: #6c9400;
+  --k-focus-ring: var(--k-focus);
   --k-bg: #f3f5eb;
   --k-panel: #fbfcf7;
   --k-panel-raised: #eef2e6;
@@ -185,21 +422,114 @@
   --k-line-strong: #8fa36f;
   --k-text: #1e2319;
   --k-text-muted: #596250;
-  --k-text-faint: #77816d;
+  --k-text-faint: #68705f;
   --k-positive: #2f7d32;
   --k-caution: #8a6500;
   --k-negative: #b93a36;
   --k-active: #247f75;
+  --k-status-contrast: #ffffff;
+  --k-positive-soft: color-mix(in oklab, var(--k-positive) 14%, transparent);
+  --k-caution-soft: color-mix(in oklab, var(--k-caution) 14%, transparent);
+  --k-negative-soft: color-mix(in oklab, var(--k-negative) 14%, transparent);
+  --k-active-soft: color-mix(in oklab, var(--k-active) 14%, transparent);
 }
 
 .survey-workbench-embed[data-theme="light"].theme-flow,
-.survey-workbench-embed[data-theme="light"] .theme-flow{
+.survey-workbench-embed[data-theme="light"] .theme-flow:where(:not([data-theme="dark"], [data-theme="light"] [data-theme="dark"] *)),
+.survey-workbench-embed :where(.theme-flow) [data-theme="light"]:where(:not(.theme-survey, .theme-console, .theme-surface, .theme-station, .theme-flow :is(.theme-survey, .theme-console, .theme-surface, .theme-station) *)){
   --k-brand: #1f6f88;
+  --k-action: #1f6f88;
+  --k-action-contrast: #ffffff;
+  --k-focus: #1f6f88;
+  --k-focus-ring: var(--k-focus);
 }
 
 .survey-workbench-embed[data-theme="light"].theme-surface,
-.survey-workbench-embed[data-theme="light"] .theme-surface{
+.survey-workbench-embed[data-theme="light"] .theme-surface:where(:not([data-theme="dark"], [data-theme="light"] [data-theme="dark"] *)),
+.survey-workbench-embed :where(.theme-surface) [data-theme="light"]:where(:not(.theme-survey, .theme-console, .theme-flow, .theme-station, .theme-surface :is(.theme-survey, .theme-console, .theme-flow, .theme-station) *)){
   --k-brand: #0f6b52;
+  --k-action: #0f6b52;
+  --k-action-contrast: #ffffff;
+  --k-focus: #0f6b52;
+  --k-focus-ring: var(--k-focus);
+}
+
+.survey-workbench-embed[data-theme="light"].theme-station,
+.survey-workbench-embed[data-theme="light"] .theme-station:where(:not([data-theme="dark"], [data-theme="light"] [data-theme="dark"] *)),
+.survey-workbench-embed :where(.theme-station) [data-theme="light"]:where(:not(.theme-survey, .theme-console, .theme-flow, .theme-surface, .theme-station :is(.theme-survey, .theme-console, .theme-flow, .theme-surface) *)){
+  --k-brand: #7c3aed;
+  --k-action: #7c3aed;
+  --k-action-contrast: #ffffff;
+  --k-focus: #7c3aed;
+  --k-focus-ring: var(--k-focus);
+}
+
+
+/* Dark islands (ui#80): a data-theme="dark" element below a light element
+   takes its nearest theme's dark values. tokens.css resets it to the default
+   dark contract first; each block below repeats its theme's mode-dependent
+   base values (check:contrast fails if one drifts) and, like the light
+   blocks, yields to a nearer theme class. Without a light ancestor nothing
+   needs resetting, so these blocks do not match and the element inherits. */
+
+.survey-workbench-embed[data-theme="dark"]:where(.theme-survey *):where([data-theme="light"] *):where(:not(.theme-console, .theme-flow, .theme-surface, .theme-station, .theme-survey :is(.theme-console, .theme-flow, .theme-surface, .theme-station) *)){
+  --k-bg: #06080b;
+  --k-brand: #5ce0c6;
+  --k-action: #5ce0c6;
+  --k-action-contrast: #06080b;
+  --k-focus: #5ce0c6;
+  --k-text-faint: #78889b;
+  --k-focus-ring: var(--k-focus);
+}
+
+.survey-workbench-embed[data-theme="dark"]:where(.theme-console *):where([data-theme="light"] *):where(:not(.theme-survey, .theme-flow, .theme-surface, .theme-station, .theme-console :is(.theme-survey, .theme-flow, .theme-surface, .theme-station) *)){
+  --k-brand: #c9ff4a;
+  --k-brand-contrast: #11120f;
+  --k-action: #c9ff4a;
+  --k-action-contrast: #11120f;
+  --k-focus: #c9ff4a;
+  --k-bg: #11120f;
+  --k-panel: #191b16;
+  --k-panel-raised: #20231e;
+  --k-line: #3a4035;
+  --k-line-strong: #8ea36e;
+  --k-text: #f2f0e8;
+  --k-text-muted: #a6ab9c;
+  --k-text-faint: #858b7e;
+  --k-positive: #a6d37b;
+  --k-caution: #e8c15f;
+  --k-negative: #ee776f;
+  --k-active: #84d8c8;
+  --k-status-contrast: #11120f;
+  --k-focus-ring: var(--k-focus);
+  --k-positive-soft: color-mix(in oklab, var(--k-positive) 14%, transparent);
+  --k-caution-soft: color-mix(in oklab, var(--k-caution) 14%, transparent);
+  --k-negative-soft: color-mix(in oklab, var(--k-negative) 14%, transparent);
+  --k-active-soft: color-mix(in oklab, var(--k-active) 14%, transparent);
+}
+
+.survey-workbench-embed[data-theme="dark"]:where(.theme-flow *):where([data-theme="light"] *):where(:not(.theme-survey, .theme-console, .theme-surface, .theme-station, .theme-flow :is(.theme-survey, .theme-console, .theme-surface, .theme-station) *)){
+  --k-brand: #3890ae;
+  --k-action: #2f88a6;
+  --k-action-contrast: #06080b;
+  --k-focus: #2f88a6;
+  --k-focus-ring: var(--k-focus);
+}
+
+.survey-workbench-embed[data-theme="dark"]:where(.theme-surface *):where([data-theme="light"] *):where(:not(.theme-survey, .theme-console, .theme-flow, .theme-station, .theme-surface :is(.theme-survey, .theme-console, .theme-flow, .theme-station) *)){
+  --k-brand: #14a37a;
+  --k-action: #14a37a;
+  --k-action-contrast: #06080b;
+  --k-focus: #14a37a;
+  --k-focus-ring: var(--k-focus);
+}
+
+.survey-workbench-embed[data-theme="dark"]:where(.theme-station *):where([data-theme="light"] *):where(:not(.theme-survey, .theme-console, .theme-flow, .theme-surface, .theme-station :is(.theme-survey, .theme-console, .theme-flow, .theme-surface) *)){
+  --k-brand: #966aff;
+  --k-action: #7c3aed;
+  --k-action-contrast: #ffffff;
+  --k-focus: #9364ff;
+  --k-focus-ring: var(--k-focus);
 }
 
 
@@ -296,31 +626,13 @@
 .survey-workbench-embed .queue-result-count{ margin-left: auto; color: var(--k-muted); }
 .survey-workbench-embed .queue-empty{ padding: 2rem; color: var(--k-muted); text-align: center; }
 
-/* Re-assert the base structural tokens for light mode. themes.css's `.theme-*`
-   preset classes hardcode a dark --k-bg/--k-panel/etc (so the preset "just
-   works" without requiring [data-theme] to be set), and a bare class selector
-   ties with the `[data-theme="light"]` selector in tokens.css on specificity —
-   so source order decides, and themes.css loads after tokens.css. Re-declaring
-   the light values here (loaded after themes.css) wins that tie-break. Presets
-   still control --k-brand (and theme-console's fuller palette) via their own,
-   more specific `[data-theme="light"].theme-*` rules in themes.css. */
+/* Light-mode token values come from @kontourai/ui (tokens.css plus each
+   theme's light block, which since 1.17 re-sets every mode-dependent value
+   its dark preset sets). Only color-scheme is re-asserted here: the :root rule
+   above sets it to dark and would otherwise win the source-order tie with
+   tokens.css's [data-theme="light"], leaving native controls dark. */
 .survey-workbench-embed[data-theme="light"]{
   color-scheme: light;
-  --k-bg: #f5f4ef;
-  --k-panel: #ffffff;
-  --k-panel-raised: #fbfaf7;
-  --k-line: rgba(36, 40, 46, 0.12);
-  --k-line-strong: rgba(36, 40, 46, 0.20);
-  --k-shadow: 0 18px 50px -30px rgba(0, 0, 0, 0.25);
-  --k-text: #202124;
-  --k-text-muted: #5b626b;
-  --k-text-faint: #707782;
-  --k-brand-contrast: #ffffff;
-  --k-positive: #168257;
-  --k-caution: #8a5a00;
-  --k-negative: #c83b3b;
-  --k-neutral: #5f6975;
-  --k-active: #3f6fd6;
 }
 
 .survey-workbench-embed *{

package/dist/src/review-workbench/review-workbench.standalone.css

@@ -91,31 +91,13 @@
 .queue-result-count { margin-left: auto; color: var(--k-muted); }
 .queue-empty { padding: 2rem; color: var(--k-muted); text-align: center; }
 
-/* Re-assert the base structural tokens for light mode. themes.css's `.theme-*`
-   preset classes hardcode a dark --k-bg/--k-panel/etc (so the preset "just
-   works" without requiring [data-theme] to be set), and a bare class selector
-   ties with the `[data-theme="light"]` selector in tokens.css on specificity —
-   so source order decides, and themes.css loads after tokens.css. Re-declaring
-   the light values here (loaded after themes.css) wins that tie-break. Presets
-   still control --k-brand (and theme-console's fuller palette) via their own,
-   more specific `[data-theme="light"].theme-*` rules in themes.css. */
+/* Light-mode token values come from @kontourai/ui (tokens.css plus each
+   theme's light block, which since 1.17 re-sets every mode-dependent value
+   its dark preset sets). Only color-scheme is re-asserted here: the :root rule
+   above sets it to dark and would otherwise win the source-order tie with
+   tokens.css's [data-theme="light"], leaving native controls dark. */
 [data-theme="light"] {
   color-scheme: light;
-  --k-bg: #f5f4ef;
-  --k-panel: #ffffff;
-  --k-panel-raised: #fbfaf7;
-  --k-line: rgba(36, 40, 46, 0.12);
-  --k-line-strong: rgba(36, 40, 46, 0.20);
-  --k-shadow: 0 18px 50px -30px rgba(0, 0, 0, 0.25);
-  --k-text: #202124;
-  --k-text-muted: #5b626b;
-  --k-text-faint: #707782;
-  --k-brand-contrast: #ffffff;
-  --k-positive: #168257;
-  --k-caution: #8a5a00;
-  --k-negative: #c83b3b;
-  --k-neutral: #5f6975;
-  --k-active: #3f6fd6;
 }
 
 * {