Files
Nomarchy/themes/summer-day/waybar.css
Bernardo Magri 8e8a142465
All checks were successful
Check / eval (push) Successful in 4m9s
fix(themes): light themes — readable inactive workspaces + notification hover
Two hardware-reported contrast bugs, both the same family: surfaces
that fell back to something designed on dark.

1. Inactive workspace numbers unreadable on every light theme.
   - Generated bar: the @muted dim role is floor-gated at only 2.0:1 —
     fine as "dim" on dark, washed out at number size on light. Light
     mode now promotes inactive buttons to @subtext (3.0 floor,
     typically 4-7:1); dark themes keep @muted.
   - boreal-dawn + kiln-clay whole-swaps: same @muted -> @subtext
     (6.4:1 / 6.6:1).
   - summer-day whole-swap: had NO button color rule at all — the
     container's @fg does not inherit into GTK buttons, so the numbers
     took the GTK default over the cream chip. Explicit @fg_dim
     (= the palette's subtext, 4.0:1) added.
   - executive-ivory already used @subtext; untouched.

2. Notification popup unreadable on hover (bg turns dark, text stays
   dark). Root cause found by probing, not guessing: the popup body is
   one big GTK button (.notification-default-action) and swaync's
   DEFAULT stylesheet — still loaded under our style.css — hovers it to
   rgb(56,56,56). Our sheet never overrode that node (only the
   control-center row), so the default bled through; on light themes
   dark @text sat on it. Now the body + action buttons + close button
   are re-pinned to the palette's alpha(@text) tint construction —
   mode-proof by construction. The first fix attempt (row-level hover)
   was probed, SHOWN insufficient, and replaced.

Verification: V2. nix flake check --no-build, theme-wholeswap,
theme-contrast green. §3 evidence viewed: a purpose-built VM hover
probe under summer-day (notify-send -u critical, cursor parked ON the
popup, screenshot) — before: dark card, drowned text (reproduces the
report exactly, /nix/store/q1qf67fl...notify-shot-summer-day); after:
cream card + faint tint, fully readable (shot-notify2). Bar renders
verified under catppuccin-latte (generated light path incl. the mode
branch) and summer-day (edited whole-swap). An inactive-number visual
needs two live workspaces — VM shows one — so the on-hardware
confirmation is queued (HARDWARE-QUEUE light-theme refits entry);
the ratio change itself is machine-checked.

Bookkeeping riding along: BACKLOG #152 deleted (shipped in d79ad35).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-18 13:27:43 +01:00

174 lines
4.2 KiB
CSS
Executable File

/* Everforest light names; hexes track themes/summer-day.json roles
(JSON is SoT for Stylix/swaync + these tokens). */
@define-color bg_dim #efebd4;
@define-color bg0 #fdf6e3; /* base */
@define-color bg1 #f4f0d9;
@define-color bg2 #efebd4; /* surface-ish */
@define-color bg3 #e6e2cc;
@define-color bg4 #e0dcc7;
@define-color bg5 #bdc3af;
@define-color fg #5c6a72; /* text */
@define-color red #f85552; /* bad */
@define-color orange #f57d26;
@define-color yellow #ca9210; /* warn */
@define-color green #8da101; /* good */
@define-color aqua #35a77c;
@define-color blue #3a94c5; /* accent */
@define-color purple #d863b4; /* accentAlt */
@define-color grey0 #a6b0a0;
@define-color grey1 #939f91; /* overlay */
@define-color grey2 #829181; /* muted */
@define-color fg_dim #6e828a; /* subtext */
/* margin: top right bottom left */
/* Spacing outside the element */
/* padding: top right bottom left */
/* Spacing inside the element */
* {
font-family: JetBrainsMono Nerd Font, FontAwesome;
font-size: 13px; /* paired with summer-night */
font-weight: bold;
}
window#waybar {
background-color: @fg;
color: @bg0;
transition-property: background-color;
transition-duration: 0.5s;
border-radius: 0px 0px 15px 15px;
transition-duration: .5s;
border-bottom-width: 5px;
border-bottom-color: #3d4a52;
border-bottom-style: solid;
}
#custom-launcher,
#custom-recording,
#idle_inhibitor,
#clock,
#workspaces,
#pulseaudio,
#custom-powerprofile,
#custom-nightlight,
#custom-airplane,
#language,
#custom-updates,
#battery,
#tray,
#custom-vpn,
#custom-doctor,
#custom-notification,
#custom-powermenu {
background-color: @bg0;
color: @fg;
padding-left: 10px;
padding-right: 10px;
margin-top: 7px;
margin-bottom: 12px;
border-radius: 10px;
border-bottom-width: 5px;
border-bottom-color: @bg5;
border-bottom-style: solid;
}
#workspaces {
padding: 0px;
}
/* Inactive workspace numbers: without an explicit rule the GTK default
button color leaks in (the container's @fg does NOT inherit into
buttons) and the numbers vanish on the cream chip. @fg_dim = the
palette's subtext (4.0:1) — dim but readable. */
#workspaces button {
color: @fg_dim;
}
/* The power-profile speedometer glyph renders small in its em box. */
#custom-powerprofile {
font-size: 20px;
}
#workspaces button.active {
background-color: @blue;
color: @bg0;
border-radius: 10px;
margin-bottom: -5px;
border-bottom-width: 5px;
border-bottom-color: #1e6791;
border-bottom-style: solid;
}
#custom-launcher {
background-color: @green;
color: @bg0;
border-bottom-color: #5d6b00;
margin-left: 15px;
padding-left: 20px;
padding-right: 21px;
/* The Nomarchy mark lives at U+F000 in the dedicated "Nomarchy" font;
pin the family or the Nerd Font's glass icon at U+F000 wins. */
font-family: Nomarchy;
font-size: 18px;
}
#custom-powermenu {
background-color: @red;
color: @bg0;
border-bottom-color: #b32f2c;
margin-right: 15px;
padding-left: 20px;
padding-right: 23px;
}
#idle_inhibitor {
padding-left: 10px;
padding-right: 10px;
font-size: 20px;
}
/* Status semantics — parity with boreal/generated (BACKLOG summer polish). */
#custom-recording.recording { color: @red; }
#custom-updates.available { color: @blue; }
#custom-doctor { color: @red; }
#idle_inhibitor.activated { color: @yellow; }
#custom-nightlight.on { color: @yellow; }
#custom-airplane.on { color: @yellow; }
#custom-vpn.on { color: @green; }
#pulseaudio.muted { color: @grey2; }
#battery.charging { color: @green; }
#battery.warning:not(.charging) { color: @yellow; }
#battery.critical:not(.charging) { color: @red; }
#custom-notification.notification { color: @blue; }
#custom-notification.dnd-none,
#custom-notification.dnd-notification,
#custom-notification.inhibited-none,
#custom-notification.inhibited-notification { color: @grey2; }
/* Icon-only status modules — match glyph scale of neighbours. */
#custom-recording,
#custom-updates,
#custom-doctor,
#custom-nightlight,
#custom-airplane,
#custom-vpn,
#custom-notification { font-size: 17px; }
tooltip {
background: @bg0;
border: 1px solid @grey1;
border-radius: 8px;
}
tooltip label { color: @fg; }