Bernardo Magri
8e8a142465
All checks were successful
Check / eval (push) Successful in 4m9s
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>
196 lines
6.6 KiB
CSS
196 lines
6.6 KiB
CSS
/*
|
|
* Boreal Dawn — Waybar whole-swap (themes/<slug>/waybar.css).
|
|
*
|
|
* A theme waybar.css replaces the ENTIRE generated stylesheet and is read
|
|
* raw (no palette is prepended), so this file MUST define its own colors.
|
|
* Identity: a floating "frost dawn" bar — three frosted-glass pills
|
|
* (launcher+clock · workspaces · status) over the wallpaper's blur. The
|
|
* whole right side is ONE continuous pill: the system tray shares its
|
|
* glass with the status modules, no separators, no boxes. Companion:
|
|
* waybar.jsonc.
|
|
*/
|
|
|
|
@define-color base #EDF2F6;
|
|
@define-color mantle #CBD6DF;
|
|
@define-color surface #DFE7EE;
|
|
@define-color overlay #A9B8C6;
|
|
@define-color text #333E4E;
|
|
@define-color subtext #51617A;
|
|
@define-color muted #7C8B9D;
|
|
@define-color accent #7458C8;
|
|
@define-color accentAlt #22766E;
|
|
@define-color good #48752C;
|
|
@define-color warn #8F5E0A;
|
|
@define-color bad #B03A47;
|
|
|
|
/* NB: this `*` reset reaches the SNI tray menus Waybar hosts too (its
|
|
stylesheet applies process-wide, at a priority user gtk.css cannot
|
|
out-rank). The menu block right below undoes the damage — keep the two
|
|
in sync. Do NOT scope `*` to window#waybar instead: the id's
|
|
specificity would beat the class rules below (pills) and wreck the
|
|
bar. */
|
|
* {
|
|
/* Mono Nerd face for status glyphs (tight right bearings on the
|
|
proportional Symbols face make icon+percentage collide). */
|
|
font-family: "GeistMono Nerd Font", "Symbols Nerd Font Mono";
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
border: none;
|
|
border-radius: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* ── Tray menus (nm-applet & co live in Waybar's process) ─────────────
|
|
Undo the `*` reset for them: same stylesheet, higher specificity.
|
|
Arrows/checks are CSS-sized nodes — min-height 0 makes them invisible;
|
|
separators die the same way; the bar's mono face reads wrong in text
|
|
menus. */
|
|
menu, menu * { font-family: "Inter", sans-serif; }
|
|
menu menuitem arrow { min-width: 16px; min-height: 16px; }
|
|
menu check, menu radio { min-width: 14px; min-height: 14px; }
|
|
menu separator {
|
|
min-height: 1px;
|
|
margin: 5px 0;
|
|
background: alpha(@text, 0.2);
|
|
}
|
|
|
|
/* The bar itself is invisible — the pills float over the wallpaper. */
|
|
window#waybar {
|
|
background: transparent;
|
|
color: @text;
|
|
}
|
|
|
|
/* ── The three frosted-glass pills ────────────────────────────────────
|
|
Global blur turns the translucent @base into frosted glass; a faint
|
|
frost edge lifts each pill off the wallpaper. Light frost needs more
|
|
alpha than the dark theme's to stay visible on pale wallpapers. */
|
|
.modules-left,
|
|
.modules-center,
|
|
.modules-right {
|
|
background: alpha(@base, 0.78);
|
|
border: 1px solid alpha(@accentAlt, 0.35);
|
|
border-radius: 14px;
|
|
padding: 0 6px;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Every module sits ON its pill: transparent, so nothing boxes the tray
|
|
off from the status icons — the seamless-cluster requirement. */
|
|
#custom-nomarchy,
|
|
#clock,
|
|
#custom-recording,
|
|
#custom-updates,
|
|
#custom-doctor,
|
|
#idle_inhibitor,
|
|
#custom-nightlight,
|
|
#custom-airplane,
|
|
#language,
|
|
#custom-vpn,
|
|
#pulseaudio,
|
|
#battery,
|
|
#custom-powerprofile,
|
|
#tray,
|
|
#custom-notification,
|
|
#custom-powermenu {
|
|
background: transparent;
|
|
color: alpha(@text, 0.95);
|
|
padding: 0 8px;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ── Launcher — the aurora-violet Nomarchy mark opens the pill ────────
|
|
The mark lives at U+F000 in the dedicated "Nomarchy" font; pin the
|
|
family or the Nerd Font's glass glyph at the same codepoint wins. */
|
|
#custom-nomarchy {
|
|
color: @accent;
|
|
font-family: Nomarchy;
|
|
font-size: 18px;
|
|
padding: 0 12px 0 14px;
|
|
}
|
|
#custom-nomarchy:hover { color: @accentAlt; }
|
|
|
|
/* ── Clock — unified time · date ─────────────────────────────────────*/
|
|
#clock {
|
|
color: @text;
|
|
font-weight: 600;
|
|
padding-left: 4px;
|
|
}
|
|
|
|
/* ── Workspaces — dots that bloom to an aurora pill when active ───────*/
|
|
#workspaces { padding: 0 2px; }
|
|
|
|
#workspaces button {
|
|
/* @subtext, not @muted: on a light pill the 2.0-floor grey washes out
|
|
at number size — inactive workspaces must stay readable (6.4:1). */
|
|
color: @subtext;
|
|
padding: 0 9px;
|
|
margin: 3px 1px;
|
|
border-radius: 9px;
|
|
transition: color 0.2s ease, background 0.2s ease;
|
|
}
|
|
#workspaces button:hover {
|
|
color: @text;
|
|
background: alpha(@overlay, 0.5);
|
|
}
|
|
#workspaces button.active {
|
|
color: @base;
|
|
background: @accent;
|
|
}
|
|
#workspaces button.urgent {
|
|
color: @base;
|
|
background: @bad;
|
|
}
|
|
|
|
/* ── Status semantics (neutral until a state fires) ──────────────────*/
|
|
#custom-recording.recording { color: @bad; }
|
|
#custom-updates.available { color: @accent; }
|
|
#custom-doctor { color: @bad; }
|
|
#idle_inhibitor.activated { color: @warn; }
|
|
#custom-nightlight.on { color: @warn; }
|
|
#custom-airplane.on { color: @warn; }
|
|
#custom-vpn.on { color: @good; }
|
|
#pulseaudio.muted { color: @muted; }
|
|
|
|
#battery.charging { color: @good; }
|
|
#battery.warning:not(.charging) { color: @warn; }
|
|
#battery.critical:not(.charging) { color: @bad; }
|
|
|
|
/* Icon-only status modules carry no text, so they don't get the 13pt
|
|
Pango icon span the icon+text modules (volume/battery/language) use —
|
|
bump their font-size to match, or these glyphs read noticeably smaller
|
|
than their neighbours. */
|
|
#custom-recording,
|
|
#custom-updates,
|
|
#custom-doctor,
|
|
#custom-nightlight,
|
|
#custom-airplane,
|
|
#custom-vpn,
|
|
#custom-notification { font-size: 17px; }
|
|
/* Speedometer + caffeine cup render small in their em box — a touch more. */
|
|
#custom-powerprofile,
|
|
#idle_inhibitor { font-size: 18px; }
|
|
|
|
#custom-notification.notification { color: @accent; }
|
|
#custom-notification.dnd-none,
|
|
#custom-notification.dnd-notification,
|
|
#custom-notification.inhibited-none,
|
|
#custom-notification.inhibited-notification { color: @muted; }
|
|
|
|
/* Tray shares the pill's glass — same transparent background, its own
|
|
modest padding so nm-applet & friends breathe with the status icons. */
|
|
#tray { padding: 0 6px; }
|
|
#tray > .passive { -gtk-icon-effect: dim; }
|
|
#tray > .needs-attention { -gtk-icon-effect: highlight; }
|
|
|
|
/* Power button closes the pill on the right; warms to alert on hover. */
|
|
#custom-powermenu { color: @subtext; padding: 0 12px 0 8px; }
|
|
#custom-powermenu:hover { color: @bad; }
|
|
|
|
/* ── Tooltips — frosted, frost edge ───────────────────────────────────*/
|
|
tooltip {
|
|
background: alpha(@base, 0.97);
|
|
border: 1px solid alpha(@accentAlt, 0.45);
|
|
border-radius: 10px;
|
|
}
|
|
tooltip label { color: @text; }
|