fix(theme): tokenize the remaining chrome surfaces and make the exemptions explicit

apps/desktop/src/styles/chat-shell.css

@@ -627,10 +627,6 @@
   text-align: center;
 }
 
-:root[data-theme="light"] .empty-hero h1 {
-  color: #1a1c1f;
-}
-
 .empty-hero .home-project-switcher {
   display: inline-block;
   max-width: 100%;

apps/desktop/src/styles/composer-menus.css

@@ -15,9 +15,9 @@
 
 :root[data-theme="dark"] .composer-input::placeholder,
 :root[data-theme="dark"] .composer-placeholder {
-  /* Codex dark placeholder ~42% white */
-  color: color-mix(in oklab, var(--gray-0) 42%, transparent);
-  -webkit-text-fill-color: color-mix(in oklab, var(--gray-0) 42%, transparent);
+  /* Codex dark placeholder ink (--ds-placeholder-ink). */
+  color: var(--ds-placeholder-ink);
+  -webkit-text-fill-color: var(--ds-placeholder-ink);
   opacity: 1;
 }
 

apps/desktop/src/styles/composer.css

@@ -479,19 +479,20 @@
 
 .send-btn:disabled {
   opacity: 1;
-  background: color-mix(in oklab, var(--ds-text-primary) 18%, transparent);
-  color: color-mix(in oklab, var(--ds-bg-primary) 92%, transparent);
+  background: var(--ds-send-disabled-bg);
+  color: var(--ds-send-disabled-fg);
 }
 
+/*
+  `.send-btn:disabled` scores (0,2,0), but light paints the *enabled* chip from
+  a `:root[data-theme="light"] .send-btn` rule at (0,3,0), which would strand the
+  disabled state on the near-black enabled fill. The disabled state therefore
+  keeps a light-qualified companion — it reads the same tokens, so a contributed
+  theme can still move the chip, and the built-in paint is unchanged.
+*/
 :root[data-theme="light"] .send-btn:disabled {
-  /* Gold empty-home disabled send ~#8e8e90 solid chip + white arrow */
-  background: #8e8e90;
-  color: #ffffff;
-}
-
-:root[data-theme="dark"] .send-btn:disabled {
-  background: color-mix(in oklab, var(--gray-0) 18%, transparent);
-  color: color-mix(in oklab, var(--gray-900) 70%, transparent);
+  background: var(--ds-send-disabled-bg);
+  color: var(--ds-send-disabled-fg);
 }
 
 .stop-btn {

apps/desktop/src/styles/messages.css

@@ -2923,7 +2923,7 @@
   margin: 0;
   overflow: auto;
   border-radius: var(--radius-md);
-  background: var(--ds-tile);
+  background: var(--ds-tool-row-bg);
   padding: 10px 12px;
   color: var(--ds-text-secondary);
   font-family: var(--font-mono);

apps/desktop/src/styles/overlays.css

@@ -7,6 +7,12 @@
 /*
   Global search (Codex-style ⌘K spotlight): top-anchored dialog over a dimmed
   scrim. Same floating-surface family as .dialog; rows reuse the menu idiom.
+
+  The ⌘K spotlight keeps one veil in both palettes. §8.4/D148 give the light
+  theme ~28% ink so white dialogs do not sit under a heavy veil; tokenizing this
+  value would either change built-in light paint or record a value the design
+  system does not own, so it stays a literal and is listed as an explicit
+  exemption in scripts/style-surface-tokens.mjs (issue #341).
 */
 .search-overlay {
   position: fixed;

apps/desktop/src/styles/plugins.css

@@ -1742,14 +1742,10 @@
   align-items: center;
   justify-content: center;
   padding: 24px;
-  background: color-mix(in oklab, var(--ds-bg-primary) 78%, transparent);
+  background: var(--ds-modal-veil);
   animation: plugins-fade-in var(--motion-duration-fast) var(--motion-ease-out) both;
 }
 
-:root[data-theme="light"] .plugins-modal-backdrop {
-  background: color-mix(in oklab, #1a1c1f 32%, transparent);
-}
-
 .plugins-modal {
   display: flex;
   flex-direction: column;

apps/desktop/src/styles/prose.css

@@ -109,7 +109,7 @@
 
 :root[data-theme="light"] .prose-chat h5,
 :root[data-theme="light"] .prose-chat h6 {
-  color: color-mix(in oklab, #1a1c1f 62%, transparent);
+  color: color-mix(in oklab, var(--ds-text-primary) 62%, transparent);
 }
 
 .prose-chat h3 {
@@ -174,7 +174,7 @@
 }
 
 :root[data-theme="light"] .prose-chat li::marker {
-  color: color-mix(in oklab, #1a1c1f 40%, transparent);
+  color: color-mix(in oklab, var(--ds-text-primary) 40%, transparent);
 }
 
 .prose-chat li > p {
@@ -227,7 +227,7 @@
 }
 
 :root[data-theme="light"] .prose-chat blockquote {
-  color: color-mix(in oklab, #1a1c1f 72%, transparent);
+  color: color-mix(in oklab, var(--ds-text-primary) 72%, transparent);
 }
 
 .prose-chat blockquote > :first-child {
@@ -271,13 +271,14 @@
   border-radius: var(--radius-3xs);
 }
 
+/* Light only softens the permanent underline; the base rule already paints the
+   `--ds-text-primary` ink, so the colour line is not duplicated here. */
 :root[data-theme="light"] .prose-chat a {
-  color: var(--ds-text-primary);
-  text-decoration-color: color-mix(in oklab, #1a1c1f 30%, transparent);
+  text-decoration-color: color-mix(in oklab, var(--ds-text-primary) 30%, transparent);
 }
 
 :root[data-theme="light"] .prose-chat a:hover {
-  text-decoration-color: color-mix(in oklab, #1a1c1f 80%, transparent);
+  text-decoration-color: color-mix(in oklab, var(--ds-text-primary) 80%, transparent);
 }
 
 .prose-chat img,
@@ -297,14 +298,10 @@
   line-height: var(--leading-normal);
   border-radius: var(--radius-3xs);
   background: var(--ds-tile-deep);
-  color: var(--ds-text-secondary);
+  color: var(--ds-prose-kbd-fg);
   white-space: nowrap;
 }
 
-:root[data-theme="light"] .prose-chat kbd {
-  color: #303030;
-}
-
 /* Inline code: borderless soft chip — the hairline frame used to add noise
    around every token in dense technical answers. */
 .prose-chat code {
@@ -318,8 +315,8 @@
 }
 
 :root[data-theme="light"] .prose-chat code {
-  background: color-mix(in oklab, #1a1c1f 6%, transparent);
-  color: #1a1c1f;
+  background: color-mix(in oklab, var(--ds-text-primary) 6%, transparent);
+  color: var(--ds-text-primary);
 }
 
 /* Fallback for a bare <pre> that bypassed the code-block chrome */
@@ -336,6 +333,8 @@
   color: #abb2bf;
 }
 
+/* Shiki one-light plate + ink. The Shiki theme owns this pair
+   (apps/desktop/src/lib/shiki.ts); see the guard header. */
 :root[data-theme="light"] .prose-chat pre {
   background: #fafafa;
   box-shadow: none;
@@ -361,10 +360,6 @@
   border-radius: var(--radius-md-plus);
 }
 
-:root[data-theme="light"] .prose-chat th {
-  color: #1a1c1f;
-}
-
 .prose-chat .table-wrap table {
   margin: 0;
   width: 100%;
@@ -435,6 +430,7 @@
   color: #abb2bf;
 }
 
+/* Shiki one-light plate + ink, the same pair as the bare `pre` fallback. */
 :root[data-theme="light"] .code-block {
   --code-block-bg: #fafafa; /* one-light editor background */
   color: #383a42;
@@ -448,13 +444,10 @@
   min-height: 32px;
   padding: 3px 6px 3px 14px;
   /* The head is a slightly lighter band on the editor surface; no rule. */
-  background: color-mix(in oklab, #fff 4%, transparent);
-}
-
-:root[data-theme="light"] .code-block-head {
-  background: color-mix(in oklab, #1a1c1f 3.5%, transparent);
+  background: var(--ds-code-head-bg);
 }
 
+/* Shiki one-light token ink for the language rail and the copy button. */
 :root[data-theme="light"] .code-block-lang {
   color: color-mix(in oklab, #383a42 62%, transparent);
 }
@@ -464,9 +457,9 @@
   opacity: 0.9;
 }
 
+/* The hover fill is ours (--ds-code-hover-bg); the ink is the Shiki token. */
 :root[data-theme="light"] .code-block .code-copy-btn:hover {
   color: #383a42;
-  background: color-mix(in oklab, #1a1c1f 6%, transparent);
 }
 
 .code-block-lang {
@@ -500,7 +493,7 @@
 
 .code-block .code-copy-btn:hover {
   color: #d7dae0;
-  background: color-mix(in oklab, #fff 8%, transparent);
+  background: var(--ds-code-hover-bg);
 }
 
 .code-block .code-copy-btn.copied {
@@ -609,11 +602,7 @@
 
 .mermaid-block-body {
   min-width: 0;
-  background: color-mix(in oklab, var(--ds-bg-primary) 94%, var(--ds-text-primary));
-}
-
-:root[data-theme="light"] .mermaid-block-body {
-  background: #ffffff;
+  background: var(--ds-mermaid-canvas);
 }
 
 .mermaid-svg {
@@ -706,6 +695,7 @@
   box-shadow: none;
 }
 
+/* Shiki one-light plate + ink, the same pair as the code card above. */
 :root[data-theme="light"] .prose-chat .mermaid-source {
   background: #fafafa;
   color: #383a42;
@@ -732,12 +722,11 @@
 }
 
 :root[data-theme="light"] .thinking-prose {
-  color: color-mix(in oklab, #1a1c1f 58%, transparent);
+  color: color-mix(in oklab, var(--ds-text-primary) 58%, transparent);
 }
 
 :root[data-theme="light"] .thinking-prose code {
-  background: #f0f0f0;
-  color: color-mix(in oklab, #1a1c1f 68%, transparent);
+  color: color-mix(in oklab, var(--ds-text-primary) 68%, transparent);
 }
 
 .thinking-prose h1,
@@ -760,7 +749,7 @@
 }
 
 .thinking-prose code {
-  background: color-mix(in oklab, var(--ds-text-primary) 4.5%, transparent);
+  background: var(--ds-thinking-code-bg);
   color: var(--ds-text-secondary);
 }
 

apps/desktop/src/styles/theme-overrides.css

@@ -66,19 +66,28 @@
  * identical in both conversation states. */
 :root[data-theme="light"] .composer-toolbar .icon-btn,
 :root[data-theme="light"] .mode-chip {
-  color: color-mix(in oklab, #1a1c1f 84%, transparent) !important;
+  color: color-mix(in oklab, var(--ds-text-primary) 84%, transparent) !important;
 }
 
 :root[data-theme="light"] .composer-input::placeholder,
 :root[data-theme="light"] .composer-placeholder {
-  /* Gold empty-home placeholder ink ~#525355–#58595b */
-  color: #4a4c4f;
-  -webkit-text-fill-color: #4a4c4f;
+  /* Gold empty-home placeholder ink (--ds-placeholder-ink). */
+  color: var(--ds-placeholder-ink);
+  -webkit-text-fill-color: var(--ds-placeholder-ink);
   opacity: 1;
 }
 
+/*
+  This rule looks redundant next to the tokenized base rule, but it keeps the
+  cascade the light theme already had: at (0,3,0) it out-specifies
+  `.tool-row-content.is-error` (0,2,0) and ties with
+  `.tool-block.is-plain .tool-row-content` (0,3,0) by winning on import order.
+  Dropping it would tint error output and give plain tool blocks a fill in light
+  only. Reading the token keeps the built-in paint identical while letting a
+  contributed theme move the light tile (issue #341).
+*/
 :root[data-theme="light"] .tool-row-content {
-  background: color-mix(in oklab, #1a1c1f 2%, transparent);
+  background: var(--ds-tool-row-bg);
 }
 
 .footer-notification {

apps/desktop/src/styles/tokens.css

@@ -120,6 +120,25 @@
   --ds-switch-ring-off: color-mix(in oklab, var(--gray-0) 22%, transparent);
   --ds-switch-knob-off: var(--gray-300);
   --ds-switch-knob-on: var(--gray-900);
+  /*
+    Prose ink, code-card chrome, scrims, and transcript fills tokenized in
+    issue #341. Every default is the literal (or literal mix) the sheet painted
+    before, so the built-in appearance is unchanged; what changes is that a
+    contributed theme can now reach them. The Shiki syntax plate and its ink
+    stay with the Shiki theme (see scripts/style-surface-tokens.mjs).
+  */
+  --ds-prose-kbd-fg: var(--ds-text-secondary);
+  --ds-thinking-code-bg: color-mix(in oklab, var(--ds-text-primary) 4.5%, transparent);
+  --ds-mermaid-canvas: color-mix(in oklab, var(--ds-bg-primary) 94%, var(--ds-text-primary));
+  --ds-code-head-bg: color-mix(in oklab, #fff 4%, transparent);
+  --ds-code-hover-bg: color-mix(in oklab, #fff 8%, transparent);
+  /* D148: dark keeps the ~45% black veil. */
+  --ds-scrim: color-mix(in oklab, #000 45%, transparent);
+  --ds-modal-veil: color-mix(in oklab, var(--ds-bg-primary) 78%, transparent);
+  --ds-tool-row-bg: var(--ds-tile);
+  --ds-send-disabled-bg: color-mix(in oklab, var(--ds-text-primary) 18%, transparent);
+  --ds-send-disabled-fg: color-mix(in oklab, var(--gray-900) 70%, transparent);
+  --ds-placeholder-ink: color-mix(in oklab, var(--gray-0) 42%, transparent);
   --ds-success: #40c977;
   --ds-warning: #ff8549;
   --ds-error: #ff6764;
@@ -203,6 +222,19 @@
   --ds-settings-field-bg: #ffffff;
   --ds-settings-nav-active: color-mix(in oklab, #1a1c1f 12%, #ffffff);
   --ds-field-inset-bg: #f3f3f3;
+  /* Issue #341: the light values these fills used to hardcode in overrides. */
+  --ds-prose-kbd-fg: #303030;
+  --ds-thinking-code-bg: #f0f0f0;
+  --ds-mermaid-canvas: #ffffff;
+  --ds-code-head-bg: color-mix(in oklab, #1a1c1f 3.5%, transparent);
+  --ds-code-hover-bg: color-mix(in oklab, #1a1c1f 6%, transparent);
+  /* D148: light drops the scrim to ~28% ink so white dialogs stay readable. */
+  --ds-scrim: color-mix(in oklab, #1a1c1f 28%, transparent);
+  --ds-modal-veil: color-mix(in oklab, #1a1c1f 32%, transparent);
+  --ds-tool-row-bg: color-mix(in oklab, #1a1c1f 2%, transparent);
+  --ds-send-disabled-bg: #8e8e90; /* gold disabled send chip */
+  --ds-send-disabled-fg: #ffffff;
+  --ds-placeholder-ink: #4a4c4f;
   --ds-field-inset-focus-bg: #ffffff;
   /* Off knob stays white on the pale track; on knob keeps white on near-black. */
   --ds-switch-track-off: color-mix(in oklab, #1a1c1f 10%, transparent);

apps/desktop/src/styles/ui-kit.css

@@ -137,16 +137,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: color-mix(in oklab, #000 45%, transparent);
+  background: var(--ds-scrim);
   padding: 24px;
   animation: overlay-in var(--motion-duration-normal) var(--motion-ease-out) both;
 }
 
-:root[data-theme="light"] .overlay {
-  /* Lighter scrim keeps elevated white dialogs readable without a heavy veil. */
-  background: color-mix(in oklab, #1a1c1f 28%, transparent);
-}
-
 .dialog {
   width: min(100%, 440px);
   /* Overlay is a flex box; auto min-width would let wide content overflow it. */