Shade the window frame, panel headers and file rows apart

Every surface was one flat shade. The window now reads in layers: a darker
frame (tab, transfer and status bars), a lighter header strip per file panel
(session strip, path bar, column headers), the file list, and popovers above
them all. The active panel's header carries a tint of the accent, and odd file
rows get a faint zebra stripe (per row, so it stays aligned at any interface
scale; the cursor and selection replace it).

Hover and selected states become a translucent overlay: an opaque hover
vanished on a surface of its own lightness (light's header strip). Dark cards
and badges step up so popovers never read darker than the strip they cover.
AMOLED is unchanged: every new layer collapses to black there.

Co-Authored-By: Claude <noreply@anthropic.com>

ui/src/app/skins/shadlike/editor-window/editor-window.html

@@ -46,7 +46,7 @@
     </header>
 
     @if (findOpen()) {
-      <div class="flex shrink-0 items-center gap-2 border-b border-border bg-chrome px-3 py-1.5">
+      <div class="flex shrink-0 items-center gap-2 border-b border-border bg-toolbar px-3 py-1.5">
         <ng-icon name="tdesignSearch" size="0.85rem" class="shrink-0 text-muted-foreground" />
         <input
           #findBox

ui/src/app/skins/shadlike/file-panel/file-panel.html

@@ -1,5 +1,5 @@
 <!-- session strip -->
-<div class="relative flex items-center gap-1.5 border-b border-border px-2 py-1">
+<div class="relative flex items-center gap-1.5 border-b border-border px-2 py-1" [class]="headerSurface()">
   <button
     (click)="toggleMenu()"
     class="flex min-w-0 items-center gap-1.5 rounded-md px-2 py-1 text-(length:--path-font) font-medium hover:bg-accent"
@@ -158,7 +158,7 @@
 </div>
 
 <!-- path bar -->
-<div class="flex items-center gap-1 border-b border-border px-2 py-1.5">
+<div class="flex items-center gap-1 border-b border-border px-2 py-1.5" [class]="headerSurface()">
   <button
     (click)="panel().up()"
     [disabled]="blocked()"
@@ -196,6 +196,7 @@
   (contextmenu)="headerContextMenu($event)"
   [style.grid-template-columns]="gridTemplate()"
   class="grid border-b border-border text-[0.6875rem] font-medium text-muted-foreground"
+  [class]="headerSurface()"
 >
   <button class="px-2 py-1 text-left hover:text-foreground" (click)="panel().toggleSort('name')">
     {{ i18n.t('columns.name') }} {{ sortIndicator('name') }}
@@ -264,6 +265,7 @@
       (contextmenu)="rowContextMenu($event, i)"
       [style.grid-template-columns]="gridTemplate()"
       class="grid h-(--row-h) items-center text-(length:--list-font)"
+      [class.bg-row-alt]="i % 2 === 1 && i !== panel().cursor() && !isSelected(entry)"
       [class.bg-cursor-tint]="i === panel().cursor() && !isSelected(entry)"
       [class.bg-primary/15]="isSelected(entry)"
       [class.ring-1]="i === panel().cursor() && isActive()"

ui/src/app/skins/shadlike/file-panel/file-panel.ts

@@ -55,6 +55,9 @@ export class FilePanel {
   private readonly rpc = inject(RpcService);
   readonly panel = computed(() => this.panels.get(this.side()));
   readonly isActive = computed(() => this.panels.activeSide() === this.side());
+  /** The header strip's surface (session strip, path bar, column headers):
+   *  the active panel's carries the accent tint. */
+  readonly headerSurface = computed(() => (this.isActive() ? 'bg-toolbar-active' : 'bg-toolbar'));
   readonly isRemote = computed(() => this.panel().sessionId() !== 'local');
   /** Input is ignored while the panel is connecting or a listing is in flight. */
   readonly blocked = computed(() => this.panel().busy());

ui/src/styles.css

@@ -4,14 +4,24 @@
    warm gray family (hue ~107) anchored on #1a1a19 — see the dark blocks below.
    The app follows the OS light/dark preference automatically.
 
-   Surface elevation ramp (both themes): --chrome (frame strips: tab/transfer/status
-   bars, window toolbars) sits BELOW --background (content panes), which sits below
-   --card (popovers, dialogs), which sits below --accent (hover). */
+   Surface layers, each its own shade so the window reads as parts: --chrome
+   (frame strips: tab/transfer/status bars, window header/footer strips),
+   --toolbar (the file-panel header strip — toolbar, path bar, column header —
+   and secondary toolbars), --background (content: file lists, editor text,
+   forms; --row-alt stripes every other file row) and --card (popovers,
+   dialogs). Dark climbs frame < list < header < card; light steps greys out
+   from white content: frame < header < list = card. --accent is a translucent
+   overlay, not a surface: hover/selected states must read on every layer, and
+   an opaque hover vanishes on a surface of its own lightness. */
 :root {
   /* Native UI (scrollbars, form controls) follows the OS unless a theme is forced. */
   color-scheme: light dark;
   --background: oklch(1 0 0);
-  --chrome: oklch(0.977 0.001 286.375);
+  --chrome: oklch(0.935 0.002 286.375);
+  --toolbar: oklch(0.965 0.001 286.375);
+  /* the active panel's header strip: a whisper of the accent (graphite: neutral) */
+  --toolbar-active: color-mix(in oklab, var(--primary) 8%, var(--toolbar));
+  --row-alt: oklch(0.978 0.001 286.375);
   --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.141 0.005 285.823);
@@ -21,7 +31,7 @@
   --secondary-foreground: oklch(0.21 0.006 285.885);
   --muted: oklch(0.967 0.001 286.375);
   --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
+  --accent: oklch(0.21 0.006 285.885 / 6%);
   --accent-foreground: oklch(0.21 0.006 285.885);
   --destructive: oklch(0.577 0.245 27.325);
   --destructive-foreground: oklch(0.985 0 0);
@@ -48,17 +58,21 @@
 :root[data-theme='dark'] {
   color-scheme: dark;
   --background: oklch(0.2178 0.002 107);
-  --chrome: oklch(0.1953 0.002 107);
+  --chrome: oklch(0.165 0.002 107);
+  --toolbar: oklch(0.265 0.002 107);
+  --toolbar-active: color-mix(in oklab, var(--primary) 10%, var(--toolbar));
+  --row-alt: oklch(0.232 0.002 107);
   --foreground: oklch(0.982 0.003 107);
-  --card: oklch(0.245 0.002 107);
+  /* above --toolbar, so a popover never reads darker than the strip it covers */
+  --card: oklch(0.285 0.002 107);
   --card-foreground: oklch(0.982 0.003 107);
   --primary: oklch(0.92 0.004 107);
   --primary-foreground: oklch(0.21 0.002 107);
   --secondary: oklch(0.302 0.003 107);
   --secondary-foreground: oklch(0.982 0.003 107);
-  --muted: oklch(0.302 0.003 107);
+  --muted: oklch(0.335 0.003 107);
   --muted-foreground: oklch(0.715 0.012 107);
-  --accent: oklch(0.302 0.003 107);
+  --accent: oklch(1 0 0 / 9%);
   --accent-foreground: oklch(0.982 0.003 107);
   --destructive: oklch(0.704 0.191 22.216);
   --destructive-foreground: oklch(0.982 0.003 107);
@@ -77,17 +91,20 @@
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme='light']) {
     --background: oklch(0.2178 0.002 107);
-    --chrome: oklch(0.1953 0.002 107);
+    --chrome: oklch(0.165 0.002 107);
+    --toolbar: oklch(0.265 0.002 107);
+    --toolbar-active: color-mix(in oklab, var(--primary) 10%, var(--toolbar));
+    --row-alt: oklch(0.232 0.002 107);
     --foreground: oklch(0.982 0.003 107);
-    --card: oklch(0.245 0.002 107);
+    --card: oklch(0.285 0.002 107);
     --card-foreground: oklch(0.982 0.003 107);
     --primary: oklch(0.92 0.004 107);
     --primary-foreground: oklch(0.21 0.002 107);
     --secondary: oklch(0.302 0.003 107);
     --secondary-foreground: oklch(0.982 0.003 107);
-    --muted: oklch(0.302 0.003 107);
+    --muted: oklch(0.335 0.003 107);
     --muted-foreground: oklch(0.715 0.012 107);
-    --accent: oklch(0.302 0.003 107);
+    --accent: oklch(1 0 0 / 9%);
     --accent-foreground: oklch(0.982 0.003 107);
     --destructive: oklch(0.704 0.191 22.216);
     --destructive-foreground: oklch(0.982 0.003 107);
@@ -109,12 +126,18 @@
    the frame/content step of the default tone disappears and every large surface is
    #000 (OLED pixels actually off). Elevation survives only through --card and
    --accent; --border/--input are raised to 16%/18% because on pure black those
-   lines are the only thing defining panes, bars and rows. Duplicated for
-   forced-dark and system-dark like the token blocks above — the extra attribute
-   outranks them. */
+   lines are the only thing defining panes, bars and rows. The surface layers
+   (--toolbar, its active tint, --row-alt) collapse to black too: AMOLED stays
+   one flat black on purpose, so every NEW surface token needs a line here.
+   Duplicated for forced-dark and system-dark like the token blocks above — the
+   extra attribute outranks them. Never declare a token both here and in the
+   accent dark formula blocks below: same (0,3,0) specificity, the later wins. */
 :root[data-theme='dark'][data-dark-tone='darker'] {
   --background: oklch(0 0 0);
   --chrome: oklch(0 0 0);
+  --toolbar: oklch(0 0 0);
+  --toolbar-active: oklch(0 0 0);
+  --row-alt: oklch(0 0 0);
   --card: oklch(0.21 0.002 107);
   --secondary: oklch(0.274 0.003 107);
   --muted: oklch(0.274 0.003 107);
@@ -127,6 +150,9 @@
   :root:not([data-theme='light'])[data-dark-tone='darker'] {
     --background: oklch(0 0 0);
     --chrome: oklch(0 0 0);
+    --toolbar: oklch(0 0 0);
+    --toolbar-active: oklch(0 0 0);
+    --row-alt: oklch(0 0 0);
     --card: oklch(0.21 0.002 107);
     --secondary: oklch(0.274 0.003 107);
     --muted: oklch(0.274 0.003 107);
@@ -140,6 +166,9 @@
 @theme inline {
   --color-background: var(--background);
   --color-chrome: var(--chrome);
+  --color-toolbar: var(--toolbar);
+  --color-toolbar-active: var(--toolbar-active);
+  --color-row-alt: var(--row-alt);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);