colonelpanic/dotfiles
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

taffybar: add distinct colored squircle backgrounds per widget

Browse Source 
Fix CSS import syntax (bare `import` -> `@import url()`) so
@define-color variables from theme.css are available. Define
per-widget background/foreground/border colors and add CSS rules
for clock, disk-usage, sni-tray, battery, and backlight widgets.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ivan Malison
2026-02-07 19:23:45 -08:00
committed by Kat Huang
parent 87b03b51f9
commit 59af32457b
2 changed files with 81 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
dotfiles/config/taffybar/taffybar.css
View File

@@ -2,7 +2,7 @@
* *
* Colors live in `theme.css` (loaded via `palette.css`). * Colors live in `theme.css` (loaded via `palette.css`).
*/ */
import theme.css @import url("theme.css");
.taffy-window * { .taffy-window * {
/* Most text should come from Iosevka Aile; icon glyphs (Font Awesome / Nerd /* Most text should come from Iosevka Aile; icon glyphs (Font Awesome / Nerd
@@ -89,6 +89,53 @@ import theme.css
color: @widget-mpris-fg; color: @widget-mpris-fg;
} }
.outer-pad.clock {
background-color: @widget-clock-bg;
border-color: @widget-clock-border;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
}
.outer-pad.clock * {
color: @widget-clock-fg;
}
.outer-pad.disk-usage {
background-color: @widget-disk-bg;
border-color: @widget-disk-border;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
}
.outer-pad.disk-usage * {
color: @widget-disk-fg;
}
.outer-pad.sni-tray {
background-color: @widget-tray-bg;
border-color: @widget-tray-border;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
}
.outer-pad.sni-tray * {
color: @widget-tray-fg;
}
.outer-pad.battery-icon,
.outer-pad.battery-text {
background-color: @widget-battery-bg;
border-color: @widget-battery-border;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
}
.outer-pad.battery-icon *,
.outer-pad.battery-text * {
color: @widget-battery-fg;
}
.outer-pad.backlight {
background-color: @widget-backlight-bg;
border-color: @widget-backlight-border;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
}
.outer-pad.backlight * {
color: @widget-backlight-fg;
}
/* Workspaces styling */ /* Workspaces styling */
.workspaces .inner-pad { .workspaces .inner-pad {

33
dotfiles/config/taffybar/theme.css
View File

@@ -21,6 +21,39 @@
@define-color pill-highlight rgba(255, 255, 255, 0.10); @define-color pill-highlight rgba(255, 255, 255, 0.10);
@define-color pill-shadow rgba(0, 0, 0, 0.28); @define-color pill-shadow rgba(0, 0, 0, 0.28);
/* Per-widget backgrounds — distinct tinted squircles */
@define-color widget-audio-bg rgba(110, 45, 160, 0.92);
@define-color widget-audio-fg #e8d5f8;
@define-color widget-audio-border rgba(155, 85, 210, 0.60);
@define-color widget-network-bg rgba(20, 120, 140, 0.92);
@define-color widget-network-fg #d0f2f8;
@define-color widget-network-border rgba(50, 175, 200, 0.60);
@define-color widget-mpris-bg rgba(160, 40, 70, 0.92);
@define-color widget-mpris-fg #f8d5e0;
@define-color widget-mpris-border rgba(210, 80, 115, 0.60);
@define-color widget-clock-bg rgba(50, 60, 160, 0.92);
@define-color widget-clock-fg #d5d8f8;
@define-color widget-clock-border rgba(90, 100, 210, 0.60);
@define-color widget-disk-bg rgba(25, 130, 75, 0.92);
@define-color widget-disk-fg #c8f5e0;
@define-color widget-disk-border rgba(55, 190, 115, 0.60);
@define-color widget-tray-bg rgba(65, 70, 100, 0.92);
@define-color widget-tray-fg #d8dae8;
@define-color widget-tray-border rgba(110, 115, 160, 0.60);
@define-color widget-battery-bg rgba(160, 115, 20, 0.92);
@define-color widget-battery-fg #f8ecc5;
@define-color widget-battery-border rgba(210, 165, 50, 0.60);
@define-color widget-backlight-bg rgba(170, 120, 15, 0.92);
@define-color widget-backlight-fg #f8efc5;
@define-color widget-backlight-border rgba(220, 170, 45, 0.60);
/* Text */ /* Text */
@define-color font-color #e7e4ee; @define-color font-color #e7e4ee;
@define-color font-muted #b8b1c6; @define-color font-muted #b8b1c6;