From 115b091e2d479702f9fdb8de1946610cbdc86e45 Mon Sep 17 00:00:00 2001
From: Sheng Kun Chang <nothingchang@mirrorstack.ai>
Date: Fri, 19 Jun 2026 04:06:07 +0800
Subject: [PATCH] feat(theme): warm the dark-mode neutral palette to the
 #1a1a18 family
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The dark theme's neutral tokens were cool near-black (background #000,
surface #101417, blue-grey surface-variant/outline). Shift the neutral
surface/ink ramp to a warm #1a1a18 charcoal on a #14110f base, with warm
off-white ink and warm muted/outline tones.

Only the neutral ramp changes — every brand and semantic accent (primary,
secondary, tertiary, error, success, warning, inverse-primary) is left as-is,
so all contrast pairs hold. Light mode is untouched. Apps inherit the warmth
through bg-background / bg-surface / text-on-surface with no local overrides.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md  | 11 +++++++++++
 package.json  |  2 +-
 src/theme.css | 34 +++++++++++++++++-----------------
 3 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 549e1f0ab..fc432fd2e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,17 @@
 Notable API additions and breaking changes. For the full commit log, see
 [GitHub Releases](https://github.com/mirrorstack-ai/web-ui-kit/releases).
 
+## 0.5.10
+
+- **Warm dark theme.** The dark-mode neutral tokens shift from cool near-black
+  (`background #000`, `surface #101417`, blue-grey `surface-variant`/`outline`)
+  to a warm `#1a1a18` charcoal family on a `#14110f` base, with warm off-white
+  ink (`on-surface #e8e2d7`) and warm muted/outline tones. Only the neutral
+  surface/ink ramp changes — every brand and semantic accent (primary,
+  secondary, tertiary, error, success, warning) is untouched, so contrast pairs
+  hold. Light mode is unchanged. Every app inherits the warmth via
+  `bg-background` / `bg-surface` / `text-on-surface`; no app-level overrides.
+
 ## 0.5.9
 
 - Agent sidebar reload **clobber fix**: a mount-time mutation (the host bridge's
diff --git a/package.json b/package.json
index d2aeba8cf..344230f7d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@mirrorstack-ai/web-ui-kit",
   "packageManager": "pnpm@10.29.3",
-  "version": "0.5.9",
+  "version": "0.5.10",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
diff --git a/src/theme.css b/src/theme.css
index f9e4c8d5e..9ebda96b3 100644
--- a/src/theme.css
+++ b/src/theme.css
@@ -113,28 +113,28 @@
   --color-warning-container: #5e4200;
   --color-on-warning-container: #ffdea6;
 
-  --color-background: #000000;
-  --color-on-background: #ffffff;
+  --color-background: #14110f;
+  --color-on-background: #f1ece2;
 
-  --color-surface: #101417;
-  --color-on-surface: #dfe3e7;
-  --color-surface-variant: #3c494b;
-  --color-on-surface-variant: #bbc9cb;
+  --color-surface: #1a1815;
+  --color-on-surface: #e8e2d7;
+  --color-surface-variant: #3a342c;
+  --color-on-surface-variant: #b7ab99;
 
-  --color-outline: #869395;
-  --color-outline-variant: #3c494b;
+  --color-outline: #968a78;
+  --color-outline-variant: #3a342c;
 
-  --color-surface-dim: #101417;
-  --color-surface-bright: #343a3b;
-  --color-surface-container-lowest: #090f10;
-  --color-surface-container-low: #171d1e;
-  --color-surface-container: #1b2122;
-  --color-surface-container-high: #252b2c;
-  --color-surface-container-highest: #303637;
+  --color-surface-dim: #14110f;
+  --color-surface-bright: #3a342d;
+  --color-surface-container-lowest: #0e0c0a;
+  --color-surface-container-low: #1c1915;
+  --color-surface-container: #211d18;
+  --color-surface-container-high: #2a251f;
+  --color-surface-container-highest: #332d26;
 
   --color-inverse-primary: #006973;
-  --color-inverse-surface: #dee3e4;
-  --color-inverse-on-surface: #101417;
+  --color-inverse-surface: #e8e2d7;
+  --color-inverse-on-surface: #1a1815;
 }
 
 /* Base */