feat: a waybar bar for DP-3, themed by udt and drawn with icons

Builds the bar from scratch as a consumer of unified-desktop-theme: the
palette comes from there, the layout and the modules live here.

No font glyphs anywhere. Every symbol is a real icon from the icon theme
GTK already uses, which needs all three of waybar's mechanisms because no
single one covers everything: the icon-theme config key for the taskbar
and tray, `image` modules driving wb-icon/wb-lang for volume, microphone,
presentation mode and the keyboard flag, and CSS background-image for the
workspaces, the clock pair and the launcher.

The workspace icons have to be CSS because format-icons takes text rather
than paths, and faking the strip with eight custom modules would have cost
click-to-switch and the active and urgent states. The language flag goes
the other way: hyprland/language styles as #language with no per-language
class, so the flag could not be selected, and it is an image module.

Icons keep their own colours: 2466 of the theme's 5169 panel icons carry a
hardcoded gradient and are not recolourable, which is the intended look
here. The two icons the theme lacks are shipped instead, and the monochrome
Slackware mark takes the udt accent at install time.

vms_dots.sh and privacy_dots.sh lived only in ~/bin, in no repository at
all. They are versioned here now, symlinked back, and their hardcoded
state colours read from the palette.

Installs alongside the existing bar rather than over it, so DP-1 keeps
working while this one is tried on DP-3.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

5 files changed, 351 insertions, 0 deletions

diff --git a/styles/fonts.css b/styles/fonts.css
new file mode 100644
index 0000000..8cd59ce
--- /dev/null
+++ b/styles/fonts.css
@@ -0,0 +1,19 @@
+/* Fonts.
+ *
+ * Only three modules show text at all on this bar: the clock pair and the
+ * tooltips. Everything else is an icon, which is the point of the theme.
+ *
+ * Inconsolata is the desktop's monospace face, and monospace is deliberate
+ * for a clock: proportional digits jitter as the minute changes.
+ */
+
+* {
+	font-family: "Inconsolata Nerd Font Mono", monospace;
+	font-weight: bold;
+	font-size: 16px;
+}
+
+tooltip label {
+	font-weight: normal;
+	font-size: 14px;
+}
diff --git a/styles/global.css b/styles/global.css
new file mode 100644
index 0000000..9886761
--- /dev/null
+++ b/styles/global.css
@@ -0,0 +1,31 @@
+/* The bar itself, and the chrome that is not a pill.
+ *
+ * The bar is transparent: the pills are the only thing that draws, which is
+ * what makes them read as separate capsules over the wallpaper.
+ */
+
+window#waybar {
+	background: transparent;
+	color: @main-fg;
+}
+
+/* GTK draws a button background by default, and it shows through the pill's
+ * own rounded corners as square shoulders. */
+button {
+	background: transparent;
+	border: none;
+	box-shadow: none;
+	text-shadow: none;
+	min-height: 0;
+}
+
+tooltip {
+	background: @main-bg;
+	border: 1px solid @outline;
+	border-radius: 8px;
+}
+
+tooltip label {
+	color: @main-fg;
+	padding: 2px;
+}
diff --git a/styles/modules.css b/styles/modules.css
new file mode 100644
index 0000000..647465f
--- /dev/null
+++ b/styles/modules.css
@@ -0,0 +1,180 @@
+/* What is different about each module.
+ *
+ * The icons for the workspaces, the clock pair, the launcher and the language
+ * live here rather than in the config, because waybar's format-icons takes
+ * text and not paths. @ICONS@ is substituted by install.sh with the icon
+ * theme's absolute path, so the theme can move without editing this file.
+ */
+
+/* ------------------------------------------------------------------ *
+ * Launcher: the one always-coloured pill, and the desktop's identity. *
+ * ------------------------------------------------------------------ */
+
+#custom-launcher {
+	background: @accent;
+	background-image: url("@CONFIG@/slackware.svg");
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: 18px 18px;
+	min-width: 22px;
+	padding: 2px 10px;
+}
+
+/* The accent pill inverts on hover rather than lightening: it is already the
+ * brightest thing on the bar. */
+#custom-launcher:hover {
+	background-color: @main-bg;
+}
+
+/* ---------------------------------------------- *
+ * Clock: the only text, each with a leading icon. *
+ * ---------------------------------------------- */
+
+#clock.date,
+#clock.time {
+	background-repeat: no-repeat;
+	background-position: 10px center;
+	background-size: 16px 16px;
+	padding-left: 32px;
+}
+
+#clock.date {
+	background-image: url("@ICONS@/mimetypes/22/x-office-calendar.svg");
+}
+
+#clock.time {
+	background-image: url("@ICONS@/categories/22/clock.svg");
+}
+
+/* ------------------------------------------------------------- *
+ * Workspaces: eight themed icons, one per button, set by CSS.    *
+ *                                                               *
+ * The module's labels are empty (see the module config), so each *
+ * button is an icon-sized box and nothing else.                  *
+ * ------------------------------------------------------------- */
+
+#workspaces button {
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: 18px 18px;
+	min-width: 26px;
+	min-height: 26px;
+	margin: 0 1px;
+	border-radius: 10px;
+	/* Dim by default; the active workspace is the one at full strength. */
+	opacity: 0.45;
+	transition: opacity 0.3s ease, background-color 0.3s ease;
+}
+
+#workspaces button:hover {
+	background-color: @hover-bg;
+	opacity: 0.8;
+}
+
+#workspaces button.active,
+#workspaces button.focused {
+	background-color: @hover-bg;
+	opacity: 1;
+}
+
+#workspaces button.urgent {
+	background-color: @critical;
+	opacity: 1;
+}
+
+/* The eight. Generic names, so the bar does not lie when the application on a
+ * workspace changes. */
+#workspaces button:nth-child(1) { background-image: url("@ICONS@/categories/22/web-browser.svg"); }
+#workspaces button:nth-child(2) { background-image: url("@ICONS@/categories/22/utilities-terminal.svg"); }
+#workspaces button:nth-child(3) { background-image: url("@ICONS@/categories/22/text-editor.svg"); }
+#workspaces button:nth-child(4) { background-image: url("@ICONS@/devices/22/network-server.svg"); }
+#workspaces button:nth-child(5) { background-image: url("@ICONS@/actions/22/document-edit.svg"); }
+#workspaces button:nth-child(6) { background-image: url("@ICONS@/categories/22/applications-graphics.svg"); }
+#workspaces button:nth-child(7) { background-image: url("@ICONS@/categories/22/internet-chat.svg"); }
+#workspaces button:nth-child(8) { background-image: url("@ICONS@/devices/22/input-gaming.svg"); }
+
+/* ------------------------------------------------ *
+ * Language: a flag, shipped by this repo.           *
+ *                                                   *
+ * An image module, not hyprland/language: that one   *
+ * has no per-language CSS class, so the flag could   *
+ * not be selected. wb-lang picks the file instead.   *
+ * ------------------------------------------------ */
+
+#image.lang {
+	padding: 2px 10px;
+	min-width: 22px;
+}
+
+/* ------------------------------------------- *
+ * Dots: coloured by their scripts, not by CSS. *
+ * ------------------------------------------- */
+
+/* The privacy pill only exists while something is capturing: an empty label
+ * would otherwise leave a bare capsule sitting on the bar. */
+#custom-privacy_dots {
+	padding: 2px 10px;
+}
+
+#custom-privacy_dots.mic-off.cam-off.loc-off.scr-off {
+	padding: 0;
+	margin: 0;
+	opacity: 0;
+}
+
+#custom-vmdot {
+	padding: 2px 10px;
+}
+
+/* ---------------------------------------- *
+ * Volume: a drawer, the microphone hidden.  *
+ * ---------------------------------------- */
+
+#volume {
+	padding: 2px 8px;
+}
+
+#volume image {
+	padding: 0 4px;
+}
+
+/* --------------------------------------------------------- *
+ * Taskbar: application icons, with the idea2 underline.      *
+ * --------------------------------------------------------- */
+
+#taskbar button {
+	background: transparent;
+	padding: 0 8px;
+	margin: 0 1px;
+	border-bottom: 3px solid transparent;
+	transition: border-bottom-color 0.3s ease-out, background-color 0.3s ease;
+}
+
+#taskbar button:hover {
+	background: @hover-bg;
+	border-bottom-color: @accent;
+}
+
+#taskbar button.active {
+	border-bottom-color: @accent;
+}
+
+/* --------------------------- *
+ * Tray and presentation mode.  *
+ * --------------------------- */
+
+#tray {
+	padding: 2px 10px;
+}
+
+#tray menu {
+	background: @main-bg;
+	color: @main-fg;
+	border: 1px solid @outline;
+	border-radius: 8px;
+}
+
+#image.idle {
+	padding: 2px 10px;
+	min-width: 22px;
+}
diff --git a/styles/pills.css b/styles/pills.css
new file mode 100644
index 0000000..83e5d36
--- /dev/null
+++ b/styles/pills.css
@@ -0,0 +1,102 @@
+/* The pills, and the way they move.
+ *
+ * Geometry from idea1: modules are rounded capsules grouped into clusters,
+ * with gaps between clusters and none inside one, so the bar reads as a few
+ * objects rather than a continuous strip.
+ *
+ * Motion from idea2: background and colour cross-fade on hover over 0.3s.
+ * That is the whole effect. No keyframes anywhere, because GTK's CSS engine
+ * supports transitions on these properties directly and an animation would
+ * run forever whether or not anyone is looking at it.
+ */
+
+/* Every pill. Shared geometry lives here exactly once; modules.css only says
+ * what is different about each one. */
+#custom-launcher,
+#clock.date,
+#clock.time,
+#workspaces,
+#custom-vmdot,
+#taskbar,
+#custom-privacy_dots,
+#volume,
+#tray,
+#image.idle,
+#image.lang {
+	background: @main-bg;
+	color: @main-fg;
+	border-radius: 14px;
+	padding: 2px 12px;
+	margin: 4px 0;
+	transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* Hover. The one rule that makes the bar feel alive, and the reason every
+ * pill declares a transition above. */
+#custom-launcher:hover,
+#clock.date:hover,
+#clock.time:hover,
+#custom-vmdot:hover,
+#custom-privacy_dots:hover,
+#volume:hover,
+#tray:hover,
+#image.idle:hover,
+#image.lang:hover {
+	background: @hover-bg;
+	color: @hover-fg;
+}
+
+/* Clusters.
+ *
+ * Neighbours inside a cluster sit flush and share one outline; only the ends
+ * of a cluster round off. The gap between clusters is a margin on the last
+ * pill of each, so adding a module to a cluster means editing one rule.
+ */
+
+/* Left: launcher | date time | workspaces | vm dots */
+#custom-launcher {
+	margin-left: 6px;
+	margin-right: 6px;
+}
+
+#clock.date {
+	border-radius: 14px 0 0 14px;
+	padding-right: 8px;
+}
+
+#clock.time {
+	border-radius: 0 14px 14px 0;
+	padding-left: 8px;
+	margin-right: 6px;
+}
+
+#workspaces {
+	padding: 2px 6px;
+	margin-right: 6px;
+}
+
+/* Right: privacy | volume | tray | presentation | language */
+#custom-privacy_dots {
+	margin-right: 6px;
+}
+
+#volume {
+	margin-right: 6px;
+}
+
+#tray {
+	margin-right: 6px;
+}
+
+#image.idle {
+	margin-right: 6px;
+}
+
+#image.lang {
+	margin-right: 6px;
+}
+
+/* Center: the taskbar is one pill holding a row of buttons. */
+#taskbar {
+	padding: 2px 6px;
+}
diff --git a/styles/style.css b/styles/style.css
new file mode 100644
index 0000000..d25e5fc
--- /dev/null
+++ b/styles/style.css
@@ -0,0 +1,19 @@
+/* waybar-theme-udt: stylesheet entry point.
+ * Copyright (C) 2026 Danilo M. <danix@danix.xyz>
+ * Licensed under the GNU General Public License v2 only.
+ *
+ * Load order matters: theme.css defines the colours every later file names,
+ * and modules.css overrides the shared pill geometry per module.
+ */
+
+/* Ignore the GTK theme: waybar inherits it otherwise, and it fights the
+ * pills for padding and background. */
+* {
+	all: initial;
+}
+
+@import "theme.css";   /* generated by udt-palette, gitignored */
+@import "fonts.css";
+@import "global.css";
+@import "pills.css";
+@import "modules.css";