jgamboa/miniSCP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Shade the window frame, panel headers and file rows apart

Browse Source 
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>
This commit is contained in:
jgamboa
2026-10-05 09:47:32 +02:00
co-authored by Claude
parent 99bfd3abc2
commit f3bec7aeaf
6 changed files with 85 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/architecture.md
+17 -10
View File
@@ -289,16 +289,23 @@ component; tokens → `ui/src/styles.css`.
mode) — every dark token change goes in BOTH. Light is the zinc family; the
dark neutrals are a **warm gray family (hue 107)** anchored on `#1a1a19`
(`--background`) — retoning one dark neutral means retoning them all, or warm
and cool surfaces clash. Surface elevation ramp, both themes: `--chrome`
(frame strips) sits *below* `--background` (content panes) < `--card`
(popovers/dialogs) < `--accent` (hover). Dark ramp `#151514` → `#1a1a19` →
`#20201f` → `#2e2e2d`. The "darker" tone is true-black AMOLED: `--chrome` AND
`--background` are both `#000` (the frame/content step collapses on purpose),
elevation survives only via `--card`/`--accent`, and `--border`/`--input` go to
16%/18% white because those lines then carry the whole layout.
`bg-chrome` is on the tab bar, status bar, transfer bar, the editor/manager
header+footer strips and the manager's connection sidebar; panel-internal
toolbars deliberately stay on `--background`. Accent tones: one
and cool surfaces clash. **Surface layers**, each its own shade: `--chrome`
(frame — tab/transfer/status bars, editor/manager header+footer strips, the
manager's connection sidebar), `--toolbar` (each file panel's header strip —
session strip, path bar, column headers — and the editor's search bar; the
ACTIVE panel's strip is `--toolbar-active`, a `color-mix` of `--primary` into
`--toolbar`, so it follows the accent), `--background` (file lists, editor
text, forms; `--row-alt` stripes odd file rows, skipped on the cursor/selected
row so two `bg-*` utilities never fight) and `--card` (popovers, dialogs,
toasts). Dark climbs frame 0.165 < list 0.218 < header 0.265 < card 0.285;
light steps greys out from white content: frame 0.935 < header 0.965 < list =
card 1. **`--accent` is translucent** (6% zinc-900 light, 9% white dark):
hover/selected states sit on every layer, and an opaque hover vanishes on a
surface of its own lightness. The "darker" tone is true-black AMOLED: chrome,
background, toolbar (+active) and row-alt are all `#000` (the layers collapse
on purpose), elevation survives only via `--card`/`--accent` (opaque there),
and `--border`/`--input` go to 16%/18% white because those lines then carry the
whole layout. Accent tones: one
`--tone-h/--tone-c` line per tone + three formula blocks derive `--primary`,
`--ring`, `--cursor-tint`; graphite = attribute removed = pristine zinc.
`@theme inline` maps tokens to Tailwind utilities (`bg-primary`,