waybar: center widgets above bottom line

dotfiles/config/waybar/scripts/render-config

@@ -0,0 +1,76 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+config_dir="${XDG_CONFIG_HOME:-$HOME/.config}/waybar"
+template="${config_dir}/config.jsonc"
+style_template="${config_dir}/style.css"
+vars_file="${config_dir}/vars.env"
+
+icon_size_default=24
+height_default=42
+line_size_default=5
+
+if [[ -f "$vars_file" ]]; then
+  # shellcheck disable=SC1090
+  source "$vars_file"
+fi
+
+icon_size="${WAYBAR_ICON_SIZE:-$icon_size_default}"
+bar_height="${WAYBAR_HEIGHT:-$height_default}"
+line_size="${WAYBAR_LINE_SIZE:-$line_size_default}"
+inner_gap_default=1
+inner_gap="${WAYBAR_INNER_GAP:-$inner_gap_default}"
+
+if [[ ! "$icon_size" =~ ^[0-9]+$ ]]; then
+  printf 'Invalid WAYBAR_ICON_SIZE: %s\n' "$icon_size" >&2
+  exit 1
+fi
+if [[ ! "$bar_height" =~ ^[0-9]+$ ]]; then
+  printf 'Invalid WAYBAR_HEIGHT: %s\n' "$bar_height" >&2
+  exit 1
+fi
+if [[ ! "$line_size" =~ ^[0-9]+$ ]]; then
+  printf 'Invalid WAYBAR_LINE_SIZE: %s\n' "$line_size" >&2
+  exit 1
+fi
+if [[ ! "$inner_gap" =~ ^[0-9]+$ ]]; then
+  printf 'Invalid WAYBAR_INNER_GAP: %s\n' "$inner_gap" >&2
+  exit 1
+fi
+top_margin=$inner_gap
+bottom_margin=$((inner_gap + line_size))
+content_height=$((bar_height - top_margin - bottom_margin))
+if (( content_height <= 0 )); then
+  printf 'WAYBAR_HEIGHT (%s) must be greater than WAYBAR_LINE_SIZE (%s) + 2 * WAYBAR_INNER_GAP (%s)\n' \
+    "$bar_height" "$line_size" "$inner_gap" >&2
+  exit 1
+fi
+
+runtime_dir="${XDG_RUNTIME_DIR:-/run/user/$(id -u)}"
+out_dir="${runtime_dir}/waybar"
+out_file="${out_dir}/config.jsonc"
+style_out_file="${out_dir}/style.css"
+
+if [[ ! -f "$template" ]]; then
+  printf 'Waybar config template not found: %s\n' "$template" >&2
+  exit 1
+fi
+if [[ ! -f "$style_template" ]]; then
+  printf 'Waybar style template not found: %s\n' "$style_template" >&2
+  exit 1
+fi
+
+mkdir -p "$out_dir"
+
+sed -E \
+  -e "s/(\"icon-size\"[[:space:]]*:[[:space:]]*)[0-9]+/\\1${icon_size}/g" \
+  -e "s/(\"height\"[[:space:]]*:[[:space:]]*)[0-9]+/\\1${bar_height}/g" \
+  "$template" > "$out_file"
+
+sed -E \
+  -e "s/(border-bottom:[[:space:]]*)[0-9]+px/\\1${line_size}px/g" \
+  -e "s/(box-shadow:[[:space:]]*inset[[:space:]]+0[[:space:]]+)-[0-9]+px/\\1-${line_size}px/g" \
+  -e "s/(margin-top:[[:space:]]*)[0-9]+px/\\1${top_margin}px/g" \
+  -e "s/(margin-bottom:[[:space:]]*)[0-9]+px/\\1${bottom_margin}px/g" \
+  -e "s/(min-height:[[:space:]]*)[0-9]+px/\\1${content_height}px/g" \
+  "$style_template" > "$style_out_file"

dotfiles/config/waybar/style.css

@@ -6,7 +6,7 @@
 
 window#waybar {
     background-color: rgba(43, 48, 59, 0.5);
-    border-bottom: 3px solid rgba(100, 114, 125, 0.5);
+    border-bottom: 5px solid rgba(100, 114, 125, 0.7);
     color: #ffffff;
     transition-property: background-color;
     transition-duration: .5s;
@@ -36,7 +36,7 @@ window#waybar.chromium {
 
 button {
     /* Use box-shadow instead of border so the text isn't offset */
-    box-shadow: inset 0 -3px transparent;
+    box-shadow: inset 0 -5px transparent;
     /* Avoid rounded borders under each button name */
     border: none;
     border-radius: 0;
@@ -45,7 +45,7 @@ button {
 /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
 button:hover {
     background: inherit;
-    box-shadow: inset 0 -3px #ffffff;
+    box-shadow: inset 0 -5px #ffffff;
 }
 
 /* you can set a style on hover for any module like this */
@@ -56,6 +56,7 @@ button:hover {
 #workspaces button,
 #taskbar button {
     padding: 0 3px;
+    min-height: 42px;
     background-color: transparent;
     color: #ffffff;
 }
@@ -69,7 +70,7 @@ button:hover {
 #taskbar button.active,
 #taskbar button.focused {
     background-color: #64727D;
-    box-shadow: inset 0 -3px #ffffff;
+    box-shadow: inset 0 -5px #ffffff;
 }
 
 #workspaces button.urgent,
@@ -87,7 +88,7 @@ button:hover {
 
 #workspaces .taskbar-window.active {
     background-color: #64727D;
-    box-shadow: inset 0 -3px #ffffff;
+    box-shadow: inset 0 -5px #ffffff;
 }
 
 #workspaces .taskbar-window label {
@@ -100,7 +101,7 @@ button:hover {
 
 #mode {
     background-color: #64727D;
-    box-shadow: inset 0 -3px #ffffff;
+    box-shadow: inset 0 -5px #ffffff;
 }
 
 #clock,
@@ -109,6 +110,7 @@ button:hover {
 #memory,
 #disk,
 #custom-diskfree,
+#custom-nowplaying,
 #temperature,
 #backlight,
 #network,
@@ -122,6 +124,9 @@ button:hover {
 #power-profiles-daemon,
 #mpd {
     padding: 0 8px;
+    min-height: 42px;
+    margin-top: 5px;
+    margin-bottom: 5px;
     color: #ffffff;
 }
 
@@ -129,6 +134,8 @@ button:hover {
 #workspaces,
 #taskbar {
     margin: 0 4px;
+    margin-top: 5px;
+    margin-bottom: 5px;
 }
 
 /* If workspaces is the leftmost module, omit left margin */
@@ -252,6 +259,22 @@ label:focus {
     min-width: 100px;
 }
 
+#custom-nowplaying {
+    background-color: #3d4a5c;
+    color: #ffffff;
+    min-width: 100px;
+}
+
+#custom-nowplaying.playing {
+    background-color: #1db954;
+    color: #000000;
+}
+
+#custom-nowplaying.paused {
+    background-color: #90b1b1;
+    color: #000000;
+}
+
 #custom-media.custom-spotify {
     background-color: #66cc99;
 }

dotfiles/config/waybar/vars.env

@@ -0,0 +1,5 @@
+# Single source of truth for Waybar sizing.
+WAYBAR_ICON_SIZE=24
+WAYBAR_HEIGHT=42
+WAYBAR_LINE_SIZE=5
+WAYBAR_INNER_GAP=1