From cb220e41be63c7316151d0b3ae4d523ca940ee28 Mon Sep 17 00:00:00 2001
From: Franek <me@sador.me>
Date: Sat, 15 Feb 2025 17:59:27 +0100
Subject: [PATCH] adapt colors to pywal theming

---
 styles/colors/index.scss               | 40 +++++++++++++-------------
 styles/components/_bar.scss            |  8 +++---
 styles/components/_launcher.scss       | 23 +++++++++------
 styles/components/_quick_settings.scss | 22 +++++++-------
 styles/style.scss                      |  8 ++++++
 5 files changed, 59 insertions(+), 42 deletions(-)

diff --git a/styles/colors/index.scss b/styles/colors/index.scss
index a612c59..8ae007f 100644
--- a/styles/colors/index.scss
+++ b/styles/colors/index.scss
@@ -1,29 +1,29 @@
 // SCSS Variables
 // Generated by 'wal'
-$wallpaper: "/home/sadorowo/images/wallpapers/youtube_Sheri_144.jpg";
+$wallpaper: "/home/sadorowo/images/wallpapers/youtube_Sheri_217.jpg";
 
 // Special
-$background: #fdf8f5;
-$foreground: #151511;
-$cursor: #151511;
+$background: #0C1325;
+$foreground: #e1e7e9;
+$cursor: #e1e7e9;
 
 // Colors
-$color0: #fdf8f5;
-$color1: #BC766C;
-$color2: #C89175;
-$color3: #787085;
-$color4: #A1778A;
-$color5: #C57D82;
-$color6: #A49296;
-$color7: #151511;
-$color8: #927f73;
-$color9: #BC766C;
-$color10: #C89175;
-$color11: #787085;
-$color12: #A1778A;
-$color13: #C57D82;
-$color14: #A49296;
-$color15: #151511;
+$color0: #0C1325;
+$color1: #6C8FAD;
+$color2: #76A6C7;
+$color3: #9CA3AF;
+$color4: #CCBFB5;
+$color5: #95B7CB;
+$color6: #AFCDDC;
+$color7: #e1e7e9;
+$color8: #9da1a3;
+$color9: #6C8FAD;
+$color10: #76A6C7;
+$color11: #9CA3AF;
+$color12: #CCBFB5;
+$color13: #95B7CB;
+$color14: #AFCDDC;
+$color15: #e1e7e9;
 $primary: lighten($color4, 20%);
 $onPrimary: darken($color2, 20%);
 $primaryContainer: darken($color2, 10%);
diff --git a/styles/components/_bar.scss b/styles/components/_bar.scss
index 5f473ab..4156b8a 100644
--- a/styles/components/_bar.scss
+++ b/styles/components/_bar.scss
@@ -1,7 +1,7 @@
 @use '../colors' as *;
 
 window.bar {
-    color: $foreground;
+    color: $onPrimary;
     font-weight: bold;
 
     >box {
@@ -11,17 +11,17 @@ window.bar {
     >.inner {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
-        background: $background;
+        background: $primary;
         padding: 0.25rem 1rem;
         margin: 0;
 
-        * { color: $foreground; }
+        * { color: $onPrimary; }
     }
 
     .tray .item {
         padding: 0;
         margin: 0;
-        background: $background;
+        background: $primary;
 
         image {
             padding: 0;
diff --git a/styles/components/_launcher.scss b/styles/components/_launcher.scss
index eb5c5a2..c397815 100644
--- a/styles/components/_launcher.scss
+++ b/styles/components/_launcher.scss
@@ -2,26 +2,30 @@
 
 .launcher {
     entry {
-        background: $background;
-        color: $foreground;
+        background: $primary;
+        color: $onPrimary;
         padding: 8px 12px;
         border: none;
 
         margin-bottom: 6px;
         
         &:focus {
-            outline: 2px solid $background;
+            outline: 2px solid $onPrimary;
         }
     }
 
     .application {
         padding: 10px;
-        background: $background;
+        background: $primary;
         border-radius: 8px;
         transition: background 0.2s ease;
 
         &:hover {
-            background: $background;
+            background: $onPrimary;
+        
+            box>.name, box>.description {
+                color: $primary;
+            }
         }
 
         image {
@@ -30,21 +34,24 @@
 
         box {
             .name {
-                color: $foreground;
+                color: $onPrimary;
                 font-size: 14px;
                 font-weight: 600;
             }
 
             .description {
-                color: $foreground;
+                color: $onPrimary;
                 font-size: 12px;
             }
         }
     }
 
     .not-found {
-        color: $foreground;
+        background: $primary;
+        color: $onPrimary;
         font-size: 14px;
+        padding: 10px;
+        border-radius: 8px;
 
         image {
             margin-bottom: 8px;
diff --git a/styles/components/_quick_settings.scss b/styles/components/_quick_settings.scss
index c15d34a..f29e091 100644
--- a/styles/components/_quick_settings.scss
+++ b/styles/components/_quick_settings.scss
@@ -11,11 +11,14 @@ window.quick_settings {
     >.inner {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
-        background: $background;
+        background: $primary;
         padding: 0.75rem 3rem;
         margin: 0;
 
-        * { color: $foreground; }
+        * { 
+            transition: all 0.2s ease-in-out;
+            color: $onPrimary;
+        }
     }
 
     button {
@@ -25,11 +28,11 @@ window.quick_settings {
 
 window.qs_bluetooth {
     >.inner {
-        background: $background;
+        background: $primary;
         padding: 0.75rem 3rem;
         border-radius: 10px;
     
-        * { color: $foreground; }
+        * { color: $onPrimary; }
     }
 
     .device {
@@ -42,26 +45,25 @@ window.qs_bluetooth {
 }
 
 window.quick_settings button, window.qs_bluetooth button {
-    background: $background;
+    transition: all 0.2s ease-in-out;
+    background: $onPrimaryContainer;
     border: 2px solid $foreground;
     margin: 5px;
 
-    transition: 400ms cubic-bezier(0.05, 0.7, 0.1, 1);
-
     &:hover {
         background: $foreground;
 
         * {
-            color: $background;
+            color: $onPrimary;
         }
     }
 
     &.active {
         background: $foreground;
-        border: 0.5px solid $background;
+        border: 0.5px solid $onPrimary;
 
         * {
-            color: $background;
+            color: $onPrimary;
         }
     }
 }
diff --git a/styles/style.scss b/styles/style.scss
index 2ae630a..4d78b92 100644
--- a/styles/style.scss
+++ b/styles/style.scss
@@ -8,6 +8,14 @@
     font-family: $font-family;
 }
 
+popover>contents, calendar {
+    background: $onPrimaryContainer;
+}
+
+button:hover {
+    background: $primary;
+}
+
 image {
     padding: 0 0.25rem;
 }