Skip to content

feat(ui): warm-tone three-tier sidebar separation + contrast bump (dark/light) #847

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Astro-Han merged 7 commits into from
May 23, 2026
Merged

feat(ui): warm-tone three-tier sidebar separation + contrast bump (dark/light) #847

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1cb6c36
feat(ui): warm-tone three-tier dark surface + light sidebar lift
Astro-Han May 23, 2026
8df5c0b
refactor(ui): lift popover / picker / textfield wrappers to raised
Astro-Han May 23, 2026
3e37a05
fix(ui): address review feedback on popover selected and textfield guard
Astro-Han May 23, 2026
a27d182
refactor(ui): drop dark composer dock lift, fall back to bg-base
Astro-Han May 23, 2026
ab7c431
refactor(ui): use --surface-dock alias for cross-mode dock fill
Astro-Han May 23, 2026
6866b9f
refactor(ui): collapse dock to surface-raised, ease light sidebar to …
Astro-Han May 23, 2026
9c6f716
fix(ui): align popover stories with raised content surface
Astro-Han May 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions packages/ui/src/components/dock-card.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
[data-dock="card"] {
background-color: var(--bg-base);
background-color: var(--surface-raised);
border-radius: var(--radius-lg);
box-shadow: 0 0 0 1px var(--border-weak), var(--shadow-raised);
overflow: hidden;
Expand All @@ -8,7 +8,6 @@
}

:root[data-color-scheme="dark"] [data-dock="card"] {
background-color: var(--surface-raised);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/picker.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
}

[data-picker-content] {
background-color: var(--surface-base);
background-color: var(--surface-raised);
border-radius: var(--radius-md);
padding: 4px;
box-shadow: var(--ring-base), var(--shadow-floating);
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/components/picker.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,11 @@ describe("picker.css: trigger contract", () => {
})

describe("picker.css: content contract", () => {
test("content uses --surface-base background", () => {
test("content uses --surface-raised background", () => {
const contentIdx = css.indexOf("[data-picker-content] {")
expect(contentIdx).toBeGreaterThan(-1)
const block = css.slice(contentIdx, contentIdx + 300)
expect(block).toContain("--surface-base")
expect(block).toContain("--surface-raised")
})

test("content uses --radius-md", () => {
Expand Down
11 changes: 6 additions & 5 deletions packages/ui/src/components/popover.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
[data-component="popover-content"] {
z-index: 50;
border-radius: var(--radius-md);
background-color: var(--surface-base);
background-color: var(--surface-raised);
background-clip: padding-box;
box-shadow: var(--ring-base), var(--shadow-floating);

Expand Down Expand Up @@ -113,24 +113,25 @@

&:hover,
&[data-force-state="hover"] {
background: var(--bg-cream);
background: var(--row-hover-overlay);
}

&[data-active],
&[data-force-state="active"] {
background: var(--bg-cream);
background: var(--surface-interactive-base);
opacity: 0.8;
}

&:focus-visible,
&[data-force-state="focus-visible"] {
outline: none;
background: var(--bg-cream);
background: var(--row-hover-overlay);
}

&[data-selected],
&[data-force-state="selected"] {
background: var(--bg-cream);
background: var(--surface-interactive-base);
font-weight: var(--font-weight-emphasis);
}
Comment thread
Astro-Han marked this conversation as resolved.

&[data-disabled],
Expand Down
6 changes: 3 additions & 3 deletions packages/ui/src/components/popover.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export const MenuMatrix = {
{/* Light */}
<div
style={{
background: "var(--surface-base)",
background: "var(--surface-raised)",
"border-radius": "var(--radius-md)",
"box-shadow": "var(--ring-base), var(--shadow-floating)",
padding: "4px",
Expand Down Expand Up @@ -101,7 +101,7 @@ export const MenuMatrix = {
<div
data-color-scheme="dark"
style={{
background: "var(--surface-base)",
background: "var(--surface-raised)",
"border-radius": "var(--radius-md)",
"box-shadow": "var(--ring-base), var(--shadow-floating)",
padding: "4px",
Expand Down Expand Up @@ -135,7 +135,7 @@ export const WithSearch = {
render: () => (
<div
style={{
background: "var(--surface-base)",
background: "var(--surface-raised)",
"border-radius": "var(--radius-md)",
"box-shadow": "var(--ring-base), var(--shadow-floating)",
"min-width": "184px",
Expand Down
20 changes: 20 additions & 0 deletions packages/ui/src/components/text-field.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,3 +222,23 @@
}
}
}

/* Dark normal-variant wrapper lifts to raised (`#2d2a27`) so the input
* separates from thread / sidebar canvas (per DESIGN.md L353). The
* `:not([data-disabled]):not([data-readonly])` guard keeps the existing
* disabled / readonly path on `--bg-cream` (= canvas in dark, the spec
* sunken-back-to-thread reading). Specificity (0,5,0) sits above the
* `[data-disabled]` block (0,4,0); the :not() guard is what lets the
* disabled rule still take over. */
:root[data-color-scheme="dark"]
[data-component="input"][data-variant="normal"]:not([data-disabled]):not([data-readonly])
[data-slot="input-wrapper"] {
background: var(--surface-raised);
}
@media (prefers-color-scheme: dark) {
:root:not([data-color-scheme="light"])
[data-component="input"][data-variant="normal"]:not([data-disabled]):not([data-readonly])
[data-slot="input-wrapper"] {
background: var(--surface-raised);
}
Comment thread
coderabbitai[bot] marked this conversation as resolved.
}
50 changes: 26 additions & 24 deletions packages/ui/src/styles/theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@
--surface-raised: #ffffff;
--surface-sunken: #faf9f7; /* light alias → bg-cream; no third neutral tier (L9) */
--code-surface: rgba(0, 0, 0, 0.04); /* #642: alpha overlay for inline code + code-block */
--sidebar: #f9f9f9; /* neutral pale grey, decoupled from bg-cream per ui_kits mock */
--sidebar: #f8f6f3; /* chrome 独立 surface（暖灰，-9 sRGB 比 thread 暗） */
Comment thread
coderabbitai[bot] marked this conversation as resolved.
--surface-base-active: rgba(0, 0, 0, 0.051);

/* ────────── Light ink · 2-tier collapse (strong + weak); base/weaker pairs merge.
Expand Down Expand Up @@ -278,24 +278,26 @@
* aligned with that runtime path; it is not the runtime source of truth.
* ────────────────────────────────────────────────────────────────────────── */
:root[data-color-scheme="dark"] {
/* Dark surface · 2-tier collapse (canvas + raised), R-B=3 warm coffee.
* The legacy 6-tier ladder collapses into 2 visible tones:
* canvas #1a1917 — chrome floor: bg / sidebar / popover / textfield / sunken alias
* raised #262523 — anchored: dialog / composer / msg-user / list-hover / command palette
/* Dark surface · 3-tier (canvas + sidebar + raised), R-B=3 warm coffee.
* The legacy 6-tier ladder collapses into 3 visible tones:
* canvas #1a1917 — chrome floor: bg / sunken alias / cream alias / surface-base alias
* sidebar #232120 — chrome middle: 左栏独立 surface (+9 sRGB 比 canvas 亮)
* raised #2d2a27 — anchored: dialog / composer dock / msg-user / list-hover / popover / textfield / picker (+9 sRGB 比 sidebar 亮)
* 三档步长均匀 +9 sRGB，跟浅色 sidebar -9 形成对称。
* Token names survive for light-mode parity and callsite stability. */
--bg-base: #1a1917;
--bg-cream: #1a1917; /* dark collapse → canvas (no separate cream tier) */
--surface-base: #1a1917; /* dark collapse → canvas (popover / textfield share chrome) */
--surface-raised: #262523;
--surface-base: #1a1917; /* dark collapse → canvas (secondary button / inline controls) */
--surface-raised: #2d2a27;
--surface-sunken: #1a1917; /* dark collapse → canvas (no sunken tier) */
--code-surface: rgba(255, 255, 255, 0.06); /* #642: alpha overlay for inline code + code-block */
--sidebar: #1a1917; /* dark collapse → canvas (three columns share one surface) */
--sidebar: #232120; /* sidebar chrome 中间一档 */

/* Dark ink · 2-tier collapse (fg + fg-weak); strong/base and weak/weaker pairs merge */
--fg-strong: #ebe7e0;
--fg-base: #ebe7e0; /* dark collapse → fg */
--fg-weak: #7e7872;
--fg-weaker: #7e7872; /* dark collapse → fg-weak */
--fg-strong: #f4efe7;
--fg-base: #f4efe7; /* dark collapse → fg */
--fg-weak: #928c82;
--fg-weaker: #928c82; /* dark collapse → fg-weak */

/* Dark border · 1-tier collapse to a single hairline alpha; container outlines
* keep the `--ring-base` 1px white-18% halo for elevation pickup.
Expand All @@ -307,9 +309,9 @@
--border-weaker: rgba(255, 255, 255, 0.08);

/* Icon mirrors collapsed dark ink */
--icon-base: #7e7872;
--icon-strong: #ebe7e0;
--icon-weak: #7e7872;
--icon-base: #928c82;
--icon-strong: #f4efe7;
--icon-weak: #928c82;

/* Brand hover lifted in dark for legibility on warm coffee surface */
--brand-primary-hover: #ff7a3a;
Expand Down Expand Up @@ -435,23 +437,23 @@
--bg-base: #1a1917;
--bg-cream: #1a1917;
--surface-base: #1a1917;
--surface-raised: #262523;
--surface-raised: #2d2a27;
--surface-sunken: #1a1917;
--code-surface: rgba(255, 255, 255, 0.06); /* #642: alpha overlay for inline code + code-block */
--sidebar: #1a1917;
--sidebar: #232120;

--fg-strong: #ebe7e0;
--fg-base: #ebe7e0;
--fg-weak: #7e7872;
--fg-weaker: #7e7872;
--fg-strong: #f4efe7;
--fg-base: #f4efe7;
--fg-weak: #928c82;
--fg-weaker: #928c82;

--border-base: rgba(255, 255, 255, 0.08);
--border-weak: rgba(255, 255, 255, 0.08);
--border-weaker: rgba(255, 255, 255, 0.08);

--icon-base: #7e7872;
--icon-strong: #ebe7e0;
--icon-weak: #7e7872;
--icon-base: #928c82;
--icon-strong: #f4efe7;
--icon-weak: #928c82;

--brand-primary-hover: #ff7a3a;

Expand Down
20 changes: 10 additions & 10 deletions packages/ui/src/theme/themes/pawwork.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
"letter-spacing-display": "-0.32px",
"letter-spacing-h1": "-0.16px",
"letter-spacing-cjk": "0",
"sidebar": "#f9f9f9",
"sidebar": "#f8f6f3",
"surface-interactive-base": "#fdf6f0",
"surface-interactive-hover": "#fbece0",
"surface-base-active": "rgba(0, 0, 0, 0.051)",
Expand Down Expand Up @@ -103,7 +103,7 @@
"bg-base": "#1a1917",
"bg-cream": "#1a1917",
"surface-base": "#1a1917",
"surface-raised": "#262523",
"surface-raised": "#2d2a27",
"surface-sunken": "#1a1917",
"code-surface": "rgba(255, 255, 255, 0.06)",
"font-size-display": "28px",
Expand Down Expand Up @@ -137,21 +137,21 @@
"letter-spacing-display": "-0.32px",
"letter-spacing-h1": "-0.16px",
"letter-spacing-cjk": "0",
"sidebar": "#1a1917",
"sidebar": "#232120",
"surface-interactive-base": "rgba(255, 89, 16, 0.14)",
"surface-interactive-hover": "rgba(255, 89, 16, 0.20)",
"surface-base-active": "rgba(255, 255, 255, 0.059)",
"fg-strong": "#ebe7e0",
"fg-base": "#ebe7e0",
"fg-weak": "#7e7872",
"fg-weaker": "#7e7872",
"fg-strong": "#f4efe7",
"fg-base": "#f4efe7",
"fg-weak": "#928c82",
"fg-weaker": "#928c82",
"border-base": "rgba(255, 255, 255, 0.08)",
"border-weak": "rgba(255, 255, 255, 0.08)",
"border-weaker": "rgba(255, 255, 255, 0.08)",
"icon-base": "#7e7872",
"icon-base": "#928c82",
"icon-disabled": "#4a4542",
"icon-strong": "#ebe7e0",
"icon-weak": "#7e7872",
"icon-strong": "#f4efe7",
"icon-weak": "#928c82",
"diff-add": "rgba(58, 176, 107, 0.15)",
"diff-del": "rgba(230, 92, 74, 0.15)",
"error": "#e65c4a",
Expand Down