fix(web): unify themed scrollbar tokens

Author: pallyoung

packages/web/src/styles/base.css

@@ -171,9 +171,13 @@ a:hover {
 ::-webkit-scrollbar {
   width: var(--scrollbar-width);
   height: var(--scrollbar-width);
+  background: var(--scrollbar-track);
 }
 
-::-webkit-scrollbar-track {
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-track-piece,
+::-webkit-scrollbar-button,
+::-webkit-scrollbar-corner {
   background: var(--scrollbar-track);
 }
 

packages/web/src/styles/base.theme.test.ts

@@ -85,6 +85,29 @@ describe("base.css theme-sensitive shells", () => {
     );
   });
 
+  it("defines a single token-driven native scrollbar contract for themed surfaces", () => {
+    const scrollbar = getRuleBlock("::-webkit-scrollbar");
+    const track = getRuleBlock("::-webkit-scrollbar-track");
+    const trackPiece = getRuleBlock("::-webkit-scrollbar-track-piece");
+    const thumb = getRuleBlock("::-webkit-scrollbar-thumb");
+    const thumbHover = getRuleBlock("::-webkit-scrollbar-thumb:hover");
+    const button = getRuleBlock("::-webkit-scrollbar-button");
+    const corner = getRuleBlock("::-webkit-scrollbar-corner");
+    const firefox = getRuleBlock("*");
+
+    expect(scrollbar).toContain("width: var(--scrollbar-width)");
+    expect(scrollbar).toContain("height: var(--scrollbar-width)");
+    expect(track).toContain("background: var(--scrollbar-track)");
+    expect(trackPiece).toContain("background: var(--scrollbar-track)");
+    expect(thumb).toContain("background: var(--scrollbar-thumb)");
+    expect(thumb).toContain("border-radius: var(--radius-full)");
+    expect(thumbHover).toContain("background: var(--border-focus)");
+    expect(button).toContain("background: var(--scrollbar-track)");
+    expect(corner).toContain("background: var(--scrollbar-track)");
+    expect(firefox).toContain("scrollbar-width: thin");
+    expect(firefox).toContain("scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track)");
+  });
+
   it("defines app-shell background variables and shared background dim hooks", () => {
     const app = getRuleBlock(".app");
     const appBefore = getRuleBlock(".app::before");

packages/web/src/styles/components.theme.test.ts

@@ -1613,6 +1613,30 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(monacoSliderHover).toContain("var(--border-focus)");
   });
 
+  it("limits component scrollbar overrides to hidden affordances or shared-token bridges", () => {
+    const mobileTerminalKeys = getLastRuleBlock(".mobile-terminal-input-bar__keys");
+    const mobileTerminalKeysScrollbar = getLastRuleBlock(
+      ".mobile-terminal-input-bar__keys::-webkit-scrollbar"
+    );
+    const tabsScroller = getLastRuleBlockFrom(
+      tabsStyles,
+      '.tabList[data-orientation="horizontal"]'
+    );
+    const tabsScrollbar = getLastRuleBlockFrom(
+      tabsStyles,
+      '.tabList[data-orientation="horizontal"]::-webkit-scrollbar'
+    );
+
+    expect(mobileTerminalKeys).toContain("scrollbar-width: none");
+    expect(mobileTerminalKeysScrollbar).toContain("display: none");
+    expect(tabsScroller).toContain("scrollbar-width: none");
+    expect(tabsScrollbar).toContain("display: none");
+
+    expect(stylesheet).not.toContain("::-webkit-scrollbar-thumb");
+    expect(stylesheet).not.toContain("::-webkit-scrollbar-track");
+    expect(stylesheet).not.toContain("scrollbar-color:");
+  });
+
   it("keeps xterm viewport touch-scrollable on mobile browsers", () => {
     const xtermViewport = getLastRuleBlock(".xterm-host .xterm-viewport");
 

packages/web/src/styles/tokens-touch.test.ts

@@ -277,6 +277,44 @@ describe("tokens.css touch tokens", () => {
     expect(root).toContain("--diff-removed-border: var(--status-danger-border)");
   });
 
+  it("derives the shared native scrollbar palette from semantic surface tokens", () => {
+    const root = getRuleBlock(":root");
+
+    expect(getCustomProperty(root, "--scrollbar-width")).toBe("8px");
+    expect(getCustomProperty(root, "--scrollbar-track")).toBe(
+      "color-mix(in srgb, var(--surface-panel) 86%, var(--border-default) 14%)"
+    );
+    expect(getCustomProperty(root, "--scrollbar-thumb")).toBe(
+      "color-mix(in srgb, var(--border-default) 74%, var(--status-info-fg) 26%)"
+    );
+  });
+
+  it("limits explicit scrollbar thumb overrides to the high-contrast themes", () => {
+    const inheritedThemes = [
+      "mint-light",
+      "graphite-dark",
+      "graphite-light",
+      "nord-dark",
+      "nord-light",
+    ] as const;
+
+    for (const theme of inheritedThemes) {
+      const themeSpecificBlock = getRuleBlocks(`[data-theme="${theme}"]`).at(-1) ?? "";
+
+      expect(
+        getCustomProperty(themeSpecificBlock, "--scrollbar-thumb"),
+        `${theme} should inherit the shared scrollbar thumb palette`
+      ).toBeNull();
+    }
+
+    expect(
+      getCustomProperty(getRuleBlocks('[data-theme="hc-dark"]').at(-1) ?? "", "--scrollbar-thumb")
+    ).toBe("#ffffff");
+    expect(
+      getCustomProperty(getRuleBlocks('[data-theme="hc-light"]').at(-1) ?? "", "--scrollbar-thumb")
+    ).toBe("#5c5c5c");
+  });
+
   it("defines the shared foundation tokens on :root without changing code font-size plumbing", () => {
     const root = getRuleBlock(":root");
 

packages/web/src/styles/tokens.css

@@ -358,7 +358,8 @@
 
   /* Scrollbar */
   --scrollbar-width: 8px;
-  --scrollbar-track: transparent;
+  --scrollbar-track: color-mix(in srgb, var(--surface-panel) 86%, var(--border-default) 14%);
+  --scrollbar-thumb: color-mix(in srgb, var(--border-default) 74%, var(--status-info-fg) 26%);
 
   /* ========== Touch / Pointer (Mobile-Friendly Phase 0) ========== */
   /* Desktop defaults - overridden below for narrow viewport or coarse pointer. */
@@ -2017,7 +2018,6 @@
   --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
   --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15);
   --shadow-glow: 0 0 12px rgba(21, 143, 119, 0.18);
-  --scrollbar-thumb: #d0d7de;
 
   --accent-purple: #8250df;
 }
@@ -2058,7 +2058,6 @@
   --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.64);
   --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.74);
   --shadow-glow: 0 0 12px rgba(122, 162, 247, 0.24);
-  --scrollbar-thumb: #353c46;
 
   --accent-purple: #c099ff;
 }
@@ -2123,7 +2122,6 @@
   --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.12);
   --shadow-xl: 0 16px 48px rgba(15, 23, 42, 0.16);
   --shadow-glow: 0 0 12px rgba(49, 95, 221, 0.16);
-  --scrollbar-thumb: #c7d0da;
 
   --accent-purple: #7c3aed;
 }
@@ -2166,7 +2164,6 @@
   --shadow-lg: 0 8px 32px rgba(17, 24, 39, 0.58);
   --shadow-xl: 0 16px 48px rgba(17, 24, 39, 0.68);
   --shadow-glow: 0 0 12px rgba(136, 192, 208, 0.26);
-  --scrollbar-thumb: #4c566a;
 
   --accent-purple: #b48ead;
 }
@@ -2231,7 +2228,6 @@
   --shadow-lg: 0 8px 32px rgba(46, 52, 64, 0.12);
   --shadow-xl: 0 16px 48px rgba(46, 52, 64, 0.15);
   --shadow-glow: 0 0 12px rgba(91, 127, 168, 0.18);
-  --scrollbar-thumb: #c6ceda;
 
   --accent-purple: #8f5b9c;
 }