refactor(ui): collapse light surface system, drop shell gradient

packages/app/src/index.css

@@ -27,33 +27,30 @@
     }
   }
 
+  /* The desktop shell intentionally paints no background of its own. The
+   * Electron BrowserWindow's native backgroundColor is set from
+   * --background-base (see packages/desktop-electron/src/renderer/index.tsx),
+   * and the inner panels (sidebar, thread, right pane, composer) each paint
+   * their own opaque surface. Adding any background here bleeds through
+   * transparent regions and pulls the canvas off-spec. */
   [data-component="desktop-shell"][data-shell="desktop"] {
     --shell-titlebar-height: 44px;
     --shell-frame-margin: 12px;
     --shell-frame-radius: 12px;
-    --shell-background-base: #FFFFFF;
-    --shell-background-weak: #F9F9F9;
     --shell-surface-base: #F9F9F9;
     --shell-surface-raised: #F9F9F9;
     --shell-surface-strong: #FFFFFF;
     --shell-border-base: #D6D2CA;
     --shell-border-weak: #E3DED6;
-    --shell-highlight-overlay: radial-gradient(circle at top, rgb(255 255 255 / 0.72), transparent 52%);
     --shell-frame-border: color-mix(in srgb, var(--shell-border-base) 78%, #c4b5a8 22%);
     --shell-frame-shadow:
       0 24px 64px -36px rgb(33 26 22 / 0.34),
       0 10px 28px -20px rgb(33 26 22 / 0.2);
     --shell-frame-surface: linear-gradient(180deg, var(--shell-surface-strong) 0%, var(--shell-surface-base) 100%);
     --shell-titlebar-border: color-mix(in srgb, var(--shell-border-weak) 72%, var(--shell-border-base) 28%);
-
-    background:
-      var(--shell-highlight-overlay),
-      linear-gradient(180deg, var(--shell-background-base), var(--shell-background-weak));
   }
 
   :root[data-color-scheme="dark"] [data-component="desktop-shell"][data-shell="desktop"] {
-    --shell-background-base: #1a1917;
-    --shell-background-weak: #1a1917;
     --shell-surface-base: #1a1917;
     --shell-surface-raised: #1a1917;
     --shell-surface-strong: #1a1917;
@@ -64,7 +61,6 @@
      * frame depth that distinguishes native window edge from interior. */
     --shell-border-base: #282725;
     --shell-border-weak: #1f1d1c;
-    --shell-highlight-overlay: radial-gradient(circle at top, rgb(255 255 255 / 0.04), transparent 52%);
     --shell-frame-border: color-mix(in srgb, var(--shell-border-base) 78%, #5a5e68 22%);
     --shell-frame-shadow:
       0 24px 64px -36px rgb(0 0 0 / 0.6),

packages/ui/script/colors.txt

@@ -9,21 +9,20 @@
 --sidebar: #f9f9f9;
 --surface-interactive-base: #fdf6f0;
 --surface-interactive-hover: #fbece0;
---surface-list-hover: #f4f0ec;
 --row-hover-overlay: rgba(0, 0, 0, 0.04);
 --row-active-overlay: rgba(0, 0, 0, 0.06);
 --surface-base-active: rgba(0, 0, 0, 0.051);
 --fg-strong: #1a1613;
---fg-base: #4a4138;
+--fg-base: #1a1613;
 --fg-weak: #8c817a;
---fg-weaker: #b6ada7;
+--fg-weaker: #8c817a;
 --fg-on-brand: #ffffff;
---border-base: rgba(0, 0, 0, 0.162);
---border-weak: #ece6df;
---border-weaker: #f3ede6;
+--border-base: rgba(0, 0, 0, 0.08);
+--border-weak: rgba(0, 0, 0, 0.08);
+--border-weaker: rgba(0, 0, 0, 0.08);
 --icon-base: #8c817a;
 --icon-strong: #1a1613;
---icon-weak: #b6ada7;
+--icon-weak: #8c817a;
 --icon-disabled: #c7c7c7;
 --success: #2d9d5a;
 --success-bg: #dbfed7;

packages/ui/src/styles/tailwind/colors.css

@@ -14,7 +14,6 @@
   --color-sidebar: var(--sidebar);
   --color-surface-interactive-base: var(--surface-interactive-base);
   --color-surface-interactive-hover: var(--surface-interactive-hover);
-  --color-surface-list-hover: var(--surface-list-hover);
   --color-row-hover-overlay: var(--row-hover-overlay);
   --color-row-active-overlay: var(--row-active-overlay);
   --color-surface-base-active: var(--surface-base-active);

packages/ui/src/styles/theme.css

@@ -90,22 +90,28 @@
   --sidebar:        #f9f9f9; /* neutral pale grey, decoupled from bg-cream per ui_kits mock */
   --surface-base-active: rgba(0, 0, 0, 0.051);
 
-  /* ────────── Light ink · STANDARDS L11 (4 tiers) ────────── */
+  /* ────────── Light ink · 2-tier collapse (strong + weak); base/weaker pairs merge.
+   * Mirrors dark's 2-tier collapse. Token names survive for callsite stability:
+   *   --fg-base   → --fg-strong (#1a1613)
+   *   --fg-weaker → --fg-weak   (#8c817a) */
   --fg-strong:   #1a1613;
-  --fg-base:     #4a4138;
+  --fg-base:     #1a1613;
   --fg-weak:     #8c817a;
-  --fg-weaker:   #b6ada7;
+  --fg-weaker:   #8c817a;
   --fg-on-brand: #ffffff;
 
-  /* ────────── Light border · STANDARDS L12 (3 tiers) ────────── */
-  --border-base:    rgba(0, 0, 0, 0.162);
-  --border-weak:    #ece6df;
-  --border-weaker:  #f3ede6;
+  /* ────────── Light border · 1-tier collapse to a single hairline alpha; mirrors
+   * dark's collapse. The previous mix of opaque (#ece6df / #f3ede6) and high-alpha
+   * (rgba 0.162) tiers read inconsistently; one alpha tier reads calmly across
+   * any surface. Token names survive as aliases. */
+  --border-base:    rgba(0, 0, 0, 0.08);
+  --border-weak:    rgba(0, 0, 0, 0.08);
+  --border-weaker:  rgba(0, 0, 0, 0.08);
 
-  /* ────────── Icon · derived from ink ────────── */
+  /* ────────── Icon · derived from collapsed ink ────────── */
   --icon-base:     #8c817a;
   --icon-strong:   #1a1613;
-  --icon-weak:     #b6ada7;
+  --icon-weak:     #8c817a;
   --icon-disabled: #c7c7c7;
 
   /* ────────── Semantic · STANDARDS L13 (3 tiers, info NOT allocated) ────────── */
@@ -144,16 +150,6 @@
   /* Warm cream surface (cream-bottom iconbtn): 6% for perceptual parity */
   --hover-overlay-warm: rgba(0, 0, 0, 0.06);
 
-  /* List/menu/row hover · cross-product token for selectable surfaces.
-   * Direction is "row stands out from container":
-   *   light → surface depressed one tier toward neutral cream (#f4f0ec)
-   *   dark  → surface raised one tier toward warm coffee (#262523)
-   * Pairs with selected `--surface-interactive-base` (warm orange-cream) for
-   * a two-tone hierarchy: hover is neutral cream, selected is warm cream;
-   * the hue difference makes the two states visually independent without
-   * extra weight or icon decoration. */
-  --surface-list-hover: #f4f0ec;
-
   /* Row hover/active overlays · alpha-on-container, hue-following.
    * Per ui_kits/desktop mock sidebar recipe (`pw-flat-session.active`):
    *   hover  = neutral 4% black (light) / 4% white (dark)
@@ -326,10 +322,6 @@
   --hover-overlay:      rgba(255, 255, 255, 0.05);
   --hover-overlay-warm: rgba(255, 255, 255, 0.07);
 
-  /* Dark list-hover collapses to `--surface-raised` so the hover layer matches
-   * the dialog/composer/bubble anchor; one tier above canvas. */
-  --surface-list-hover: #262523;
-
   /* Row overlays · dark mirror (white alpha to lift warm-coffee surfaces). */
   --row-hover-overlay:  rgba(255, 255, 255, 0.04);
   --row-active-overlay: rgba(255, 255, 255, 0.06);
@@ -467,8 +459,6 @@
     --hover-overlay:      rgba(255, 255, 255, 0.05);
     --hover-overlay-warm: rgba(255, 255, 255, 0.07);
 
-    --surface-list-hover: #262523;
-
     --row-hover-overlay:  rgba(255, 255, 255, 0.04);
     --row-active-overlay: rgba(255, 255, 255, 0.06);
 

packages/ui/src/theme/themes/pawwork.json

@@ -57,19 +57,18 @@
       "sidebar": "#f9f9f9",
       "surface-interactive-base": "#fdf6f0",
       "surface-interactive-hover": "#fbece0",
-      "surface-list-hover": "#f4f0ec",
       "surface-base-active": "rgba(0, 0, 0, 0.051)",
       "fg-strong": "#1a1613",
-      "fg-base": "#4a4138",
+      "fg-base": "#1a1613",
       "fg-weak": "#8c817a",
-      "fg-weaker": "#b6ada7",
+      "fg-weaker": "#8c817a",
       "fg-on-brand": "#ffffff",
-      "border-base": "rgba(0, 0, 0, 0.162)",
-      "border-weak": "#ece6df",
-      "border-weaker": "#f3ede6",
+      "border-base": "rgba(0, 0, 0, 0.08)",
+      "border-weak": "rgba(0, 0, 0, 0.08)",
+      "border-weaker": "rgba(0, 0, 0, 0.08)",
       "icon-base": "#8c817a",
       "icon-strong": "#1a1613",
-      "icon-weak": "#b6ada7",
+      "icon-weak": "#8c817a",
       "icon-disabled": "#c7c7c7",
       "success": "#2d9d5a",
       "success-bg": "#dbfed7",
@@ -141,7 +140,6 @@
       "sidebar": "#1a1917",
       "surface-interactive-base": "rgba(255, 89, 16, 0.14)",
       "surface-interactive-hover": "rgba(255, 89, 16, 0.20)",
-      "surface-list-hover": "#262523",
       "surface-base-active": "rgba(255, 255, 255, 0.059)",
       "fg-strong": "#ebe7e0",
       "fg-base": "#ebe7e0",