greyson/playpen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add theme customizer.

Browse Source
This commit is contained in:
Greyson Parrelli
2026-08-13 15:55:23 -04:00
parent 2daeb6125f
commit 695417a601
12 changed files with 1661 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/style.css
+51 -5
View File
@@ -1,11 +1,12 @@
/* Zen-style vertical tabs: a sidebar column with the terminal inset to its
right.
Every colour here is a name defined in `palette-dark.css` or
`palette-light.css`; `appearance.zig` prepends one of them and loads the
pair as a single provider. Nothing below may hardcode a colour — a literal
hex would be a rule that looks right in one scheme and wrong in the other,
and it would look right in whichever one you happened to be testing in.
Every colour here is a name from `palette.zig`, which writes the matching
`@define-color` block for the scheme in force; `appearance.zig` prepends that
and loads the pair as a single provider. Nothing below may hardcode a colour —
a literal hex would be a rule that looks right in one scheme and wrong in the
other, it would look right in whichever one you happened to be testing in,
and the colour editor in the settings page could not reach it at all.
`alpha()` is used for every wash rather than a second named colour, so a
state's tint is always derived from the state's own colour and the two
@@ -565,6 +566,51 @@ button.playpen-header-button:hover,
border-color: @pp_accent_strong;
}
/* -------------------------------------------------------------------------
The colour editor
One row per colour in the palette, in sections. The rows are deliberately
plain: on a page where thirty-nine swatches are the point, the swatch should
be the only thing on a line carrying any colour, and a bordered card per
section would read as noise. The space between sections does that work
instead. */
.playpen-color-group {
margin-top: 2px;
}
.playpen-color-group-title {
font-size: 0.9em;
font-weight: bold;
color: @pp_text_dim;
}
/* The value beside the swatch, so a palette can be read off and copied out as
text rather than only poked at through a picker. */
.playpen-color-hex {
font-family: monospace;
font-size: 0.85em;
color: @pp_text_faint;
}
/* Adwaita gives a colour button the full button treatment: a gradient over the
colour, and a border in a grey belonging to neither palette. What is wanted
is a rectangle of the colour with this app's border around it, so the swatch
reads as the colour rather than as a button holding one. */
.playpen-color-group colorbutton > button {
padding: 0;
min-width: 0;
min-height: 0;
background-image: none;
box-shadow: none;
border: 1px solid @pp_border;
border-radius: 6px;
}
.playpen-color-group colorbutton > button:hover {
border-color: @pp_border_strong;
}
/* -------------------------------------------------------------------------
The startup list