From 05c7d20b5cb662f48ef09718cafc924c7c5c026d Mon Sep 17 00:00:00 2001
From: Ivan Malison <IvanMalison@gmail.com>
Date: Sat, 7 Feb 2026 16:02:18 -0800
Subject: [PATCH] taffybar: add theme.css and update CSS styling

Extract color variables into a dedicated theme.css and import it from
the main stylesheet.  Remove the bar gradient in favor of a flat
background, adjust workspace overlay-box margins, add SNI tray
double-padding fix, and clean up whitespace.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 dotfiles/config/taffybar/taffybar.css | 23 +++++++++++-------
 dotfiles/config/taffybar/theme.css    | 35 +++++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 9 deletions(-)
 create mode 100644 dotfiles/config/taffybar/theme.css

diff --git a/dotfiles/config/taffybar/taffybar.css b/dotfiles/config/taffybar/taffybar.css
index 32eacc15..6b0e12a2 100644
--- a/dotfiles/config/taffybar/taffybar.css
+++ b/dotfiles/config/taffybar/taffybar.css
@@ -2,6 +2,7 @@
  *
  * Colors live in `theme.css` (loaded via `palette.css`).
  */
+import theme.css
 
 .taffy-window * {
 	/* Most text should come from Iosevka Aile; icon glyphs (Font Awesome / Nerd
@@ -19,15 +20,12 @@
 
 .taffy-box {
 	border-width: 0px;
-
-
-
 	padding: 0px;
 	margin: 0px;
 	border-radius: 0px;
 	box-shadow: none;
 	background-color: @bar-background;
-	background-image: linear-gradient(to bottom, @bar-gradient-start, @bar-gradient-end);
+	background-image: none;
 }
 
 .outer-pad {
@@ -118,14 +116,16 @@
 	background-color: @transparent;
 }
 
-/* The workspace label is overlaid bottom-left over the workspace icon strip. */
+/* The workspace label is overlaid bottom-left over the workspace icon strip.
+   Positioning: halign=start (left), valign=end (bottom) set in Haskell code.
+   Margins offset from that anchor point. */
 .workspaces .overlay-box {
 	transition: background-color .2s, border-color .2s;
 
-	/* The workspace widget's outer-pad has margin; without this, the overlay
-	   sits in the margin area and looks "outside" the squircle. */
-	margin-left: 10px;
-	margin-bottom: 10px;
+	/* Offset from the bottom-left anchor into the pill area.
+	   Increase margin-left to push right, margin-bottom to push up. */
+	margin-left: 6px;
+	margin-top: 4px;
 
 	background-color: transparent;
 	border: none;
@@ -201,6 +201,11 @@
 	padding: 1px 4px;
 }
 
+/* If the SNI tray is wrapped in our standard widget box, avoid double-padding. */
+.sni-tray .sni-tray {
+	padding: 0px;
+}
+
 .window-icon-container.active {
 	background-color: rgba(255, 255, 255, 0.13);
 	border-color: rgba(255, 255, 255, 0.16);
diff --git a/dotfiles/config/taffybar/theme.css b/dotfiles/config/taffybar/theme.css
new file mode 100644
index 00000000..56d27739
--- /dev/null
+++ b/dotfiles/config/taffybar/theme.css
@@ -0,0 +1,35 @@
+/* Taffybar palette/theme variables.
+ *
+ * `palette.css` imports this file so host configs can keep referencing the
+ * historical filename while we iterate on a more structured theme.
+ */
+
+@define-color accent #f1b2b2;
+
+/* Bar chrome */
+@define-color bar-background rgba(0, 0, 0, 0.55);
+@define-color bar-gradient-start rgba(20, 26, 40, 0.68);
+@define-color bar-gradient-end rgba(12, 18, 30, 0.68);
+@define-color bar-border rgba(255, 255, 255, 0.06);
+
+/* The subtle translucent "sheet" behind all widgets. */
+@define-color bar-overlay rgba(0, 0, 0, .2);
+
+/* Widgets (pill/squircle containers) */
+@define-color pill-background rgba(48, 52, 69, 0.92);
+@define-color pill-border rgba(92, 95, 120, 0.85);
+@define-color pill-highlight rgba(255, 255, 255, 0.10);
+@define-color pill-shadow rgba(0, 0, 0, 0.28);
+
+/* Text */
+@define-color font-color #e7e4ee;
+@define-color font-muted #b8b1c6;
+
+/* Menus: keep high-contrast and readable while iterating. */
+@define-color menu-background-color #ffffff;
+@define-color menu-font-color #000000;
+@define-color menu-highlight rgba(0, 0, 0, 0.08);
+
+@define-color transparent rgba(0.0, 0.0, 0.0, 0.0);
+@define-color white #ffffff;
+@define-color black #000000;