Nomarchy/themes/executive-slate/waybar.css

/*
 * Executive Slate — 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 solid, non-transparent, edge-to-edge status strip — no
 * floating island, sharp corners, tight modules, and a single accent
 * underline marking the active workspace. Companion: waybar.jsonc.
 */

@define-color base      #191C24;
@define-color mantle    #111319;
@define-color surface   #2A3040;
@define-color overlay   #3E4759;
@define-color text      #D7DDEA;
@define-color subtext   #9AA5BB;
@define-color muted     #5C6578;
@define-color accent    #5A8AE6;
@define-color accentAlt #86A9F2;
@define-color good      #6FAE72;
@define-color warn      #DBA85A;
@define-color bad       #D06B71;

* {
  font-family: "Inter", "Symbols Nerd Font", "JetBrainsMono Nerd Font", sans-serif;
  font-size: 13px;
  font-weight: 500;
  border: none;
  border-radius: 0;
  min-height: 0;
}

/* Solid bar, crisp edge against the content below. */
window#waybar {
  background: @base;
  border-bottom: 1px solid @overlay;
  color: @text;
}

.modules-left,
.modules-center,
.modules-right {
  margin: 0;
  padding: 0;
}

/* Uniform module rhythm; groups get a wider breath below. */
#custom-nomarchy,
#clock,
#custom-recording,
#idle_inhibitor,
#custom-nightlight,
#language,
#custom-updates,
#pulseaudio,
#custom-powerprofile,
#battery,
#custom-vpn,
#custom-doctor,
#custom-notification,
#tray,
#custom-powermenu {
  color: @text;
  padding: 0 11px;
  margin: 0;
}

/* Group heads — a wider gap before each functional cluster of the
   right side (media/toggles · stats · status). Self-hiding heads
   (e.g. no battery on a desktop) degrade to the uniform spacing. */
#pulseaudio,
#battery,
#custom-vpn { margin-left: 6px; }

/* ── Menu launcher — the branded Nomarchy mark ───────────────────────
   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: 16px;
  padding: 0 14px;
}
#custom-nomarchy:hover {
  background: @surface;
  color: @accentAlt;
}

/* ── Workspaces — flat cells, active carries an accent underline ──── */
#workspaces { padding: 0; margin: 0; }

#workspaces button {
  color: @subtext;
  padding: 0 11px;
  margin: 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease-in-out, background 0.15s ease-in-out;
}

#workspaces button:hover {
  background: @surface;
  color: @text;
  border-bottom: 2px solid @overlay;
}

#workspaces button.active {
  color: @text;
  background: @surface;
  border-bottom: 2px solid @accent;
}

#workspaces button.urgent {
  color: @bad;
  border-bottom: 2px solid @bad;
}

/* ── Clock — time (center) and date (left) share the #clock id ───── */
#clock {
  color: @text;
  font-weight: 600;
}

/* ── Status cluster: neutral by default, semantic on state ───────── */
#custom-recording.recording { color: @bad; }

#idle_inhibitor.activated   { color: @warn; }

#custom-nightlight.on        { color: @warn; }

#custom-updates.available    { color: @accent; }

/* 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 smaller than their
   neighbours. */
#custom-recording,
#custom-nightlight,
#custom-updates,
#custom-vpn,
#custom-doctor,
#custom-notification { font-size: 17px; }
/* Speedometer + caffeine cup render small in their em box — a touch more. */
#custom-powerprofile,
#idle_inhibitor { font-size: 18px; }

#pulseaudio.muted { color: @muted; }

#battery.charging { color: @good; }
#battery.warning:not(.charging)  { color: @warn; }
#battery.critical:not(.charging) {
  color: @bad;
  border-bottom: 2px solid @bad;
}

#custom-vpn.on { color: @good; }

/* Doctor is only rendered when something is ✖, so always the alert. */
#custom-doctor { color: @bad; }

#custom-notification.notification { color: @accent; }
#custom-notification.dnd-none,
#custom-notification.dnd-notification,
#custom-notification.inhibited-none,
#custom-notification.inhibited-notification { color: @muted; }

#tray { color: @text; }

#custom-powermenu { color: @subtext; }
#custom-powermenu:hover {
  background: @surface;
  color: @bad;
}

/* ── Tooltips ─────────────────────────────────────────────────────── */
tooltip {
  background: @surface;
  border: 1px solid @overlay;
  border-radius: 4px;
}
tooltip label {
  color: @text;
}