waybar: split out colors

2 files changed, 318 insertions, 38 deletions

diff --git a/.config/waybar/style.css b/.config/waybar/style.css
index 9c0cfc2..dec6cb8 100644
--- a/.config/waybar/style.css
+++ b/.config/waybar/style.css
@@ -1,28 +1,26 @@
 @define-color color00 #1c1c1c;
-@define-color color01 #e03c8a;
-@define-color color02 #90b44b;
-@define-color color03 #caad5f;
+@define-color color01 #db4d6d;
+@define-color color02 #5dac81;
+@define-color color03 #fad689;
 @define-color color04 #58b2dc;
-@define-color color05 #828282;
-@define-color color06 #e3916e;
+@define-color color05 #b28fce;
+@define-color color06 #78c2c4;
 @define-color color07 #bdc0ba;
-@define-color color08 #535953;
-@define-color color09 #86c166;
-@define-color color10 #ddd23b;
-@define-color color11 #b28fce;
-@define-color color12 #ffb11b;
-@define-color color13 #66bab7;
-@define-color color14 #77969a;
+@define-color color08 #0c0c0c;
+@define-color color09 #cb1b45;
+@define-color color10 #24936e;
+@define-color color11 #f7d94c;
+@define-color color12 #2ea9df;
+@define-color color13 #986db2;
+@define-color color14 #81c7d4;
 @define-color color15 #fffffb;
 
-@define-color accent #4e4371;
-@define-color accentdarker #3e355a;
+@define-color accent #8b81c3;
+@define-color accentdarker #70649a;
 
 @define-color foreground @color07;
-@define-color background rgba(15,15,15, 0.96);
-/* @define-color dimmed #777777; */
-/* @define-color dimmeddarker #302a29; */
-@define-color dimmed #434343; /*@color05;*/
+@define-color background rgba(12, 12, 12, 0.96);
+@define-color dimmed #404039; /*@color05;*/
 @define-color dimmeddarker @color00;
 @define-color urgent #9f353a;
 
@@ -65,19 +63,7 @@ window#waybar.hidden {
   /* border-top: 1px solid @dimmeddarker; */
   padding: 0 0.1rem;
   margin: 0 0.2rem;
-  color: @foreground;
-}
-
-#cpu,
-#memory,
-#disk,
-#temperature,
-#idle_inhibitor,
-#backlight,
-#custom-gammastep,
-#network.tailscale,
-#custom-covid {
-  color: #777777;
+  color: #828282;
 }
 
 #cpu:hover,
@@ -90,7 +76,6 @@ window#waybar.hidden {
 #custom-mpris:hover,
 #custom-gammastep:hover,
 #custom-todo:hover {
-  /* background: red; */
   color: @foreground;
   transition-property: background;
   transition-duration: 0.1s;
@@ -139,11 +124,9 @@ window#waybar.hidden {
 
 #clock {}
 #clock.local {
-  /* margin-right: 0; */
-  /* padding-right: 0; */
+  color: @foreground;
 }
 #clock.utc {
-  color: @dimmed;
 }
 
 #disk.root {}
@@ -155,7 +138,7 @@ window#waybar.hidden {
 #battery {}
 #battery.charging {
   color: @background;
-  background: @color09;
+  background: @color10;
 }
 @keyframes blink {
   to {
@@ -189,11 +172,16 @@ label:focus {
   color: @dimmed;
 }
 #network.tailscale.disabled,
-#network.tailscale.disconnected {
+#network.tailscale.disconnected,
+#network.mullvad.disabled,
+#network.mullvad.disconnected {
   border-top: 1px solid @dimmeddarker;
 }
+
 #network.tailscale.ethernet,
-#network.tailscale.linked {
+#network.tailscale.linked,
+#network.mullvad.ethernet,
+#network.mullvad.linked {
   color: @foreground;
   border-top: 1px solid @color14;
 }
diff --git a/.config/waybar/style.css.in b/.config/waybar/style.css.in
new file mode 100644
index 0000000..e4072bb
--- /dev/null
+++ b/.config/waybar/style.css.in
@@ -0,0 +1,292 @@
+@define-color color00 {{ hex .normal_black }};
+@define-color color01 {{ hex .normal_red }};
+@define-color color02 {{ hex .normal_green }};
+@define-color color03 {{ hex .normal_yellow }};
+@define-color color04 {{ hex .normal_blue }};
+@define-color color05 {{ hex .normal_magenta }};
+@define-color color06 {{ hex .normal_cyan }};
+@define-color color07 {{ hex .normal_white }};
+@define-color color08 {{ hex .bright_black }};
+@define-color color09 {{ hex .bright_red }};
+@define-color color10 {{ hex .bright_green }};
+@define-color color11 {{ hex .bright_yellow }};
+@define-color color12 {{ hex .bright_blue }};
+@define-color color13 {{ hex .bright_magenta }};
+@define-color color14 {{ hex .bright_cyan }};
+@define-color color15 {{ hex .bright_white }};
+
+@define-color accent {{ hex .fuji }};
+@define-color accentdarker {{ hex .futaai }};
+
+@define-color foreground @color07;
+@define-color background {{ rgba .bright_black 0.96 }};
+@define-color dimmed {{ hex (darker .dim_white 0.2) }}; /*@color05;*/
+@define-color dimmeddarker @color00;
+@define-color urgent {{ hex .enji }};
+
+* {
+  border: none;
+  border-radius: 0;
+  font-family: Iosevka SS08, Sarasa Fixed J, Material Design Icons, Font Awesome;
+  font-size: 10pt;
+}
+
+window#waybar {
+  background: @background;
+  color: @foreground;
+  /* padding: 0 0.3rem; */
+}
+window#waybar.hidden {
+  opacity: 0;
+}
+
+
+#window,
+#mode,
+#clock,
+#battery,
+#cpu,
+#memory,
+#disk,
+#temperature,
+#backlight,
+#idle_inhibitor,
+#network,
+#pulseaudio,
+#custom-toggl,
+#custom-gammastep,
+#custom-weather,
+#custom-mpris,
+#custom-todo,
+#custom-covid,
+#tray {
+  /* border-top: 1px solid @dimmeddarker; */
+  padding: 0 0.1rem;
+  margin: 0 0.2rem;
+  color: {{ hex .hai }};
+}
+
+#cpu:hover,
+#memory:hover,
+#backlight:hover,
+#idle_inhibitor:hover,
+#network:hover,
+#network.tailscale:hover,
+#pulseaudio:hover,
+#custom-mpris:hover,
+#custom-gammastep:hover,
+#custom-todo:hover {
+  color: @foreground;
+  transition-property: background;
+  transition-duration: 0.1s;
+}
+
+#workspaces button {
+  padding: 0 5px;
+  background: transparent;
+  color: @dimmed;
+  /* border-bottom: 3px solid transparent; */
+}
+#workspaces button.focused {
+  font-weight: bold;
+  color: @foreground;
+  background: @accentdarker;
+  transition-property: background;
+  transition-duration: 0.01s;
+}
+#workspaces button.urgent {
+  color: @background;
+  background: @urgent;
+}
+#workspaces button:hover,
+#workspaces button.focused:hover {
+  background: @accent;
+  color: @foreground;
+  transition-property: background, color;
+  transition-duration: 0.01s;
+
+  /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
+  box-shadow: inherit;
+  text-shadow: inherit;
+}
+#workspaces button.urgent:hover {
+  background: @foreground;
+  transition-property: background;
+  transition-duration: 0.01s;
+}
+
+#mode {
+  font-style: italic;
+  color: @background;
+  background: @color06;
+  border-top: none;
+}
+
+#clock {}
+#clock.local {
+  color: @foreground;
+}
+#clock.utc {
+}
+
+#disk.root {}
+#disk.home {
+  /* margin-left: 0; */
+  /* padding-left: 0; */
+}
+
+#battery {}
+#battery.charging {
+  color: @background;
+  background: @color10;
+}
+@keyframes blink {
+  to {
+    background: @foreground;
+    color: @background;
+  }
+}
+#battery.critical:not(.charging) {
+  color: @foreground;
+  background: @urgent;
+  animation-name: blink;
+  animation-duration: 0.5s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+label:focus {
+  background: @background;
+}
+
+#cpu {}
+#memory {}
+#backlight {}
+#backlight.off {
+  color: @dimmed;
+}
+#network {}
+#network.disconnected {
+  border-top: 1px solid @urgent;
+  color: @dimmed;
+}
+#network.tailscale.disabled,
+#network.tailscale.disconnected,
+#network.mullvad.disabled,
+#network.mullvad.disconnected {
+  border-top: 1px solid @dimmeddarker;
+}
+
+#network.tailscale.ethernet,
+#network.tailscale.linked,
+#network.mullvad.ethernet,
+#network.mullvad.linked {
+  color: @foreground;
+  border-top: 1px solid @color14;
+}
+#pulseaudio {}
+#pulseaudio.muted {
+  border-top: 1px solid @urgent;
+  color: @dimmed;
+}
+#pulseaudio.bluetooth {
+  border-top: 1px solid @color04;
+}
+
+#temperature {}
+#temperature.critical {
+  color: @foreground;
+  background: @urgent;
+  border-top: none;
+}
+
+#tray {}
+
+#idle_inhibitor {}
+#idle_inhibitor.activated {
+  color: @foreground;
+  border-top: 1px solid @color02;
+}
+
+#custom-mpris {
+  color: @foreground;
+}
+#custom-mpris.playing {
+  border-top: 1px solid @color04;
+}
+#custom-mpris.paused {
+  border-top: 1px solid @color04;
+  font-style: italic;
+}
+
+#custom-toggl {
+  color: @foreground;
+  border-top: 1px solid @urgent;
+}
+
+#custom-todo.off {
+  color: @dimmed;
+  border-top: 1px solid @dimmeddarker;
+  padding: 0 0 0 0.4rem;
+}
+#custom-todo.on {
+  color: @foreground;
+  border-top: 1px solid @urgent;
+  font-weight: bold;
+  padding: 0 0.6rem 0 0.4rem;
+}
+#custom-todo.work {
+  background: @urgent;
+}
+
+@keyframes flash {
+  50% {
+    background: rgba(255,174,66, 0.7);
+    color: @background;
+  }
+}
+#custom-gamma.night {
+  border-top: 1px solid @color12;
+  color: @foreground;
+  animation-name: flash;
+  animation-duration: 0.3s;
+  animation-timing-function: linear;
+  animation-iteration-count: 1;
+}
+#custom-gamma.day {
+  color: @dimmed;
+}
+#custom-gamma.off {
+  border-top: 1px solid @urgent;
+  color: @dimmed;
+}
+
+#custom-weather {
+  color: @dimmed;
+}
+
+#custom-covid.green {
+  /* border-top: 1px solid #00cc00; */
+  /* color: #00cc00; */
+}
+#custom-covid.yellow {
+  /* border-top: 1px solid #f7dd31; */
+  /* color: #f7dd31; */
+}
+#custom-covid.orange {
+  /* border-top: 1px solid #faa31b; */
+  /* color: #faa31b; */
+}
+#custom-covid.red {
+  /* border-top: 1px solid #f92206; */
+  /* color: #f92206; */
+}
+#custom-covid.darkred {
+  /* border-top: 1px solid #c01a00; */
+  /* color: #c01a00; */
+}
+#custom-covid.darkdarkred {
+  /* border-top: 1px solid #941100; */
+  /* color: #941100; */
+}