✨ feat(swaync): dynamic colors with pywal

swaync/_colors.css

@@ -1,34 +1,10 @@
-@define-color rosewater #f5e0dc;
-@define-color flamingo #f2cdcd;
-@define-color pink #f5c2e7;
-@define-color mauve #cba6f7;
-@define-color red #f38ba8;
-@define-color maroon #eba0ac;
-@define-color peach #fab387;
-@define-color yellow #f9e2af;
-@define-color green #a6e3a1;
-@define-color teal #94e2d5;
-@define-color sky #89dceb;
-@define-color sapphire #74c7ec;
-@define-color blue #89b4fa;
-@define-color lavender #b4befe;
-@define-color text #cdd6f4;
-@define-color subtext1 #bac2de;
-@define-color subtext0 #a6adc8;
-@define-color overlay2 #9399b2;
-@define-color overlay1 #7f849c;
-@define-color overlay0 #6c7086;
-@define-color surface2 #585b70;
-@define-color surface1 #45475a;
-@define-color surface0 #313244;
-@define-color base #1e1e2e;
-@define-color mantle #181825;
-@define-color crust #11111b;
 
-@define-color background shade(@yellow, .2);
+@import "../../.cache/wal/colors-swaync.css";
-@define-color background-alt shade(@yellow, .3);
+
-@define-color highlight shade(@yellow, .9);
+@define-color highlight @color1;
-@define-color button-bg shade(@yellow, .72);
+@define-color bg-slider shade(@highlight, .2);
-@define-color hover shade(@yellow, .6);
+@define-color bg-button shade(@highlight, .72);
-@define-color active shade(@yellow, .55);
+@define-color background-alt shade(@highlight, .6);
-@define-color text-dark @crust;
+@define-color hover shade(@highlight, .6);
+@define-color active shade(@highlight, .58);
+@define-color text rgb(255, 255, 255);

swaync/style.css

@@ -1,7 +1,6 @@
 
 @import "_colors.css";
 
-
 * {
     all: unset;
     font-size: 14px;
@@ -47,11 +46,11 @@ tooltip {
 }
 
 .notification-row .notification-background .notification .notification-content .time {
-  color: @subtext1;
+  color: @foreground;
 }
 
 .notification-row .notification-background .notification .notification-content .body {
-  color: @text;
+  color: @foreground;
 }
 
 .notification-row .notification-background .notification > *:last-child > * {
@@ -60,7 +59,7 @@ tooltip {
 
 .notification-row .notification .notification-action {
   border-radius: 16px;
-  color: @text-dark;
+  color: @text;
   background-color: @button-bg;
   border: .6px solid @background;
   margin: 5px;
@@ -147,7 +146,7 @@ tooltip {
   border-radius: 12.6px;
   margin: 18px;
   background: @background;
-  color: #cdd6f4;
+  color: @text;
   padding: 1.5rem;
 }
 
@@ -234,7 +233,8 @@ tooltip {
 }
 
 .widget-mpris .widget-mpris-title {
-    font-family: "0xProto Nerd Font";
+    font-family: "Cantarell";
+    font-weight: 700;
     font-size: 1.2rem;
     text-shadow: 1px 1px 2px black;
 }
@@ -272,7 +272,7 @@ tooltip {
 }
 
 .widget-buttons-grid button {
-    background: @button-bg;
+    background: @bg-button;
     padding: 12px;
     border-radius: 16px;
     margin: 2px;
@@ -292,8 +292,8 @@ tooltip {
 
 .widget-buttons-grid button label {
     font-size: 0.95rem;
-    color: black;
+    color: @text;
-    font-weight: 500;
+    font-weight: 600;
 }
 
 .widget-volume trough,
@@ -302,7 +302,8 @@ tooltip {
     background-color: @background-alt;
     min-height: 8px;
     min-width: 70px;
-    border-radius: 8px;
+    border-radius: 10px;
+    padding: 2px;
 }
 
 .widget-volume trough:hover, 
@@ -314,14 +315,15 @@ tooltip {
 }
 .widget-volume trough slider,
 .widget-backlight trough slider { /* slider's dot indicator */
-    background: shade(@yellow, .72);
+    background: shade(@text, .9);
     border-radius: 50%;
     padding: 8px;
     box-shadow: inset 0 0 1px .5px @background-alt;
 }
 .widget-volume trough slider:active,
 .widget-backlight trough slider:active {
-    background: @active;
+    padding: 10px;
+    background: shade(@text, .75);
 }
 
 .widget-volume trough highlight,