✨ feat(swaync): dynamic colors with pywal

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;
-    font-weight: 500;
+    color: @text;
+    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,