First of three Nomarchy-exclusive dark/light pairs for v1 (with executive-ivory and kiln/kiln-clay in the next commits), built for settings.autoTheme: same identity in two lights, so the sunrise flip feels like the same room brightening. Boreal Dawn is the boreal forest six hours later — the aurora faded into a cold clear dawn. Frost-paper base (#EDF2F6), deep-slate text (10.9:1 AAA), the aurora violet deepened to text-grade (#7458C8, 4.69:1), spruce teal accentAlt (#22766E), GeistMono + the same 6/14/3/12 geometry as boreal so the pair swaps shape-invariant. Assets: whole-swap waybar (the same three frosted pills, light glass), rofi + 4x3 launcher grid, btop theme, dawn-treeline wallpaper mirroring aurora-boreal's composition (same spiky silhouette, dawn gradient, fading stars). flake.lock: nomarchy-wallpapers 803b48d -> a716cf6 — the single-input bump carrying backgrounds for all four new slugs (this task is the lock bump). Preview is a real render: theme-shot VM desktop at 480x270. Verification: V2. nix flake check --no-build green; checks theme-contrast (28x7+chips), theme-wholeswap, waybar-language, waybar-swap-env, rofi-text-width, state-sync-validate, auto-theme (VM day/night engine) all green. Visual protocol: theme-shot VM renders viewed for desktop + menu (frosted pills, wash selection, legibility — screenshots in /nix/store/l26kfdcf...theme-shot-boreal-dawn). audit findings at/below the boreal baseline (CVD-only + the same accent-pair Δhue as boreal). V3 pending: real-GL blur, btop visual, launcher grid on hardware (HARDWARE-QUEUE, this batch's entry). Design by Fable (palette lab + wallpaper SVGs); asset port by a Sonnet subagent from the boreal sources; reviewed file-by-file on Fable. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
194 lines
6.4 KiB
CSS
194 lines
6.4 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 {
|
|
color: @muted;
|
|
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; }
|