From 25cf1201278f80922028a9d60df4d9edcdea8b2e Mon Sep 17 00:00:00 2001
From: anurag629 <akvermaav629@gmail.com>
Date: Sat, 31 Oct 2026 19:25:15 +0530
Subject: [PATCH] feat(widget): the surface-raised theme token, and room in the
 single-file budget

---
 .changeset/theme-token-surface-raised.md    | 5 +++++
 .size-limit.json                            | 2 +-
 CONTRIBUTING.md                             | 2 +-
 api/widget.api.md                           | 1 +
 packages/widget/src/theme.ts                | 1 +
 website/src/content/docs/widget/theming.mdx | 1 +
 6 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/theme-token-surface-raised.md

diff --git a/.changeset/theme-token-surface-raised.md b/.changeset/theme-token-surface-raised.md
new file mode 100644
index 00000000..31d3717c
--- /dev/null
+++ b/.changeset/theme-token-surface-raised.md
@@ -0,0 +1,5 @@
+---
+'@chatcops/widget': patch
+---
+
+`theme.tokens` takes `surface-raised`, the background of the header menu.
diff --git a/.size-limit.json b/.size-limit.json
index 4485dea1..087214b7 100644
--- a/.size-limit.json
+++ b/.size-limit.json
@@ -26,7 +26,7 @@
   {
     "name": "widget, single file (chatcops.full.min.js)",
     "path": "packages/widget/dist/chatcops.full.min.js",
-    "limit": "22 KB",
+    "limit": "23 KB",
     "gzip": true
   },
   {
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 61363fba..1316ff12 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -210,7 +210,7 @@ ANTHROPIC_API_KEY=sk-... npx tsx src/examples/express-server.ts
 
 `npx` downloads `tsx` the first time.
 
-The widget has a size budget, gzipped: 5 kB for the script tag loader (`dist/chatcops.min.js`), 19 kB for the chat panel it loads when the chat opens (`dist/chatcops.panel.js`), 2 kB for the pre-chat form chunk, 22 kB for the single-file build (`dist/chatcops.full.min.js`) and 32 kB for the unminified ESM build. CI checks them with `pnpm size` after a build (limits in `.size-limit.json`). To save bytes, the minifier renames the private class members listed in `packages/widget/mangle.ts`. A name can go on that list only if the code touches it through `this` and nowhere else, which `tests/mangle.test.ts` checks. A config field, a request body key or a DOM property renamed there would break only the CDN build.
+The widget has a size budget, gzipped: 5 kB for the script tag loader (`dist/chatcops.min.js`), 19 kB for the chat panel it loads when the chat opens (`dist/chatcops.panel.js`), 2 kB for the pre-chat form chunk, 23 kB for the single-file build (`dist/chatcops.full.min.js`) and 32 kB for the unminified ESM build. CI checks them with `pnpm size` after a build (limits in `.size-limit.json`). To save bytes, the minifier renames the private class members listed in `packages/widget/mangle.ts`. A name can go on that list only if the code touches it through `this` and nowhere else, which `tests/mangle.test.ts` checks. A config field, a request body key or a DOM property renamed there would break only the CDN build.
 
 ### Browser tests
 
diff --git a/api/widget.api.md b/api/widget.api.md
index c45de799..5cd97472 100644
--- a/api/widget.api.md
+++ b/api/widget.api.md
@@ -257,6 +257,7 @@ declare const TOKEN_NAMES: readonly [
     "text",
     "bg",
     "bg-surface",
+    "surface-raised",
     "bg-input",
     "border",
     "text-secondary",
diff --git a/packages/widget/src/theme.ts b/packages/widget/src/theme.ts
index 8a1b80ff..59327b86 100644
--- a/packages/widget/src/theme.ts
+++ b/packages/widget/src/theme.ts
@@ -8,6 +8,7 @@ const TOKEN_NAMES = [
   'text',
   'bg',
   'bg-surface',
+  'surface-raised',
   'bg-input',
   'border',
   'text-secondary',
diff --git a/website/src/content/docs/widget/theming.mdx b/website/src/content/docs/widget/theming.mdx
index bd90592e..d1610271 100644
--- a/website/src/content/docs/widget/theming.mdx
+++ b/website/src/content/docs/widget/theming.mdx
@@ -56,6 +56,7 @@ Use `theme.tokens` to set any widget CSS token from JavaScript. Token names omit
 | `text-secondary` | Secondary and subdued text | `#5b616e` | `#a0a0a0` |
 | `bg` | Main widget background | `#ffffff` | `#0a0a0a` |
 | `bg-surface` | Raised surfaces, such as bot messages and header | `#f4f5f7` | `#1a1a1a` |
+| `surface-raised` | Menus above the panel, such as the header menu | `#ffffff` | `#1e1e1e` |
 | `bg-input` | Input backgrounds | `#ffffff` | `#2a2a2a` |
 | `border` | Widget and input borders | `#d9dce1` | `#333333` |
 | `danger` | Error and destructive states | `#c62828` | `#ef4444` |