Improve styling.

This commit is contained in:
Greyson Parrelli
2026-08-12 21:15:07 -04:00
parent 4e0e400372
commit e16b147e16
13 changed files with 1104 additions and 119 deletions
+47
View File
@@ -0,0 +1,47 @@
/* Dark palette: the colour half of the stylesheet.
*
* `appearance.zig` prepends exactly one of `palette-dark.css` or
* `palette-light.css` to `style.css` and loads the pair as a single provider,
* so every named colour below has a counterpart in the other file. Adding one
* here means adding it there too — a name defined in only one palette is a
* rule that silently stops applying in the other scheme.
*
* Deep navy rather than neutral grey, lifted a little at each step so the
* three surfaces (window, sidebar, pane) separate without any of them
* reading as light. `pp_surface` is duplicated in `theme.zig` as the terminal
* renderer's default background; the two have to stay equal or the frame
* around a terminal stops matching its contents. */
/* Surfaces, darkest first. The window colour shows through as the gutter
between panes, so it sits below the panes rather than beside them. */
@define-color pp_bg #070c15;
@define-color pp_sidebar #0b1320;
@define-color pp_surface #0e1624;
@define-color pp_surface_raised #131f30;
@define-color pp_surface_raised_active #182740;
@define-color pp_border #1d2b3f;
@define-color pp_border_strong #2a3c55;
/* Text, brightest first. `faint` is for things that are labelled rather than
read — pane titles of panes you aren't in, dialog hints. */
@define-color pp_text #dde6f4;
@define-color pp_text_dim #9aabc2;
@define-color pp_text_faint #6a7c93;
@define-color pp_row_hover #162233;
@define-color pp_row_selected #1c2c45;
/* Signal's ultramarine. `strong` is the variant that has to stay legible as a
small mark on a surface — icons, dots, the state bar down a row's edge —
which is why it gets brighter here and darker in the light palette. */
@define-color pp_accent #3a76f0;
@define-color pp_accent_strong #6191f3;
@define-color pp_accent_muted #2f5296;
/* The three states that are news. Kept away from the accent on purpose: the
accent means "here" and these mean "something happened", and a sidebar
where those are the same colour answers neither question. */
@define-color pp_ok #3ecf8e;
@define-color pp_warn #f0b849;
@define-color pp_err #f2717b;