From 0fdadb7a2ffeca8de6610f968d323d0c1c197ba6 Mon Sep 17 00:00:00 2001
From: end-4 <97237370+end-4@users.noreply.github.com>
Date: Thu, 21 Mar 2024 19:20:09 +0700
Subject: [PATCH] update styles (#327)

---
 .config/ags/scss/_common.scss            | 37 +++++++++---------------
 .config/ags/scss/_desktopbackground.scss | 18 +++++-------
 .config/ags/scss/_dock.scss              |  6 ++--
 .config/ags/scss/_notifications.scss     | 22 +++++++-------
 .config/ags/scss/_osd.scss               |  2 +-
 5 files changed, 37 insertions(+), 48 deletions(-)

diff --git a/.config/ags/scss/_common.scss b/.config/ags/scss/_common.scss
index b63b381e4..aa5da6cb1 100644
--- a/.config/ags/scss/_common.scss
+++ b/.config/ags/scss/_common.scss
@@ -2,11 +2,6 @@
 //     border: 1px solid $onSurfaceVariant; // Debugging
 // }
 
-// *:focus {
-//     outline: 1px solid mix($onSurface, $surface, 40%);
-//     -gtk-outline-radius: $rounding_small;
-// }
-
 * {
     selection {
         background-color: $secondary;
@@ -89,9 +84,8 @@ tooltip {
     animation-timing-function: ease-out;
     animation-iteration-count: 1;
     @include normal-rounding;
-    background-color: $surfaceVariant;
-    color: $onSurfaceVariant;
-    border: 1px solid $onSurfaceVariant;
+    background-color: $inverseSurface;
+    color: $inverseOnSurface;
 }
 
 /////////////////////////////////////////
@@ -107,8 +101,8 @@ tooltip {
 popover {
     @include elevation-border-softer;
     padding: 0.681rem;
-    background: $surfaceVariant;
-    color: $onSurfaceVariant;
+    background: $surfaceContainerHigh;
+    color: $onSurface;
     border-radius: 1.159rem;
     -gtk-outline-radius: 1.159rem;
 
@@ -123,17 +117,11 @@ popover {
 
 .configtoggle-box {
     padding: 0.205rem 0.341rem;
-    border: 0.136rem solid transparent;
-}
-
-.configtoggle-box:focus {
-    border: 0.136rem solid mix($onSurface, $surface, 40%);
 }
 
 .switch-bg {
     @include element_decel;
     @include full-rounding;
-    background-color: mix($surface, $background, 50%);
     border: 0.136rem solid $onSurface;
     min-width: 2.864rem;
     min-height: 1.637rem;
@@ -148,7 +136,7 @@ popover {
     @include full-rounding;
     @include menu_decel;
     background-color: $onSurface;
-    color: $surface;
+    color: $layer1;
     min-width: 0.819rem;
     min-height: 0.819rem;
     margin-left: 0.477rem;
@@ -195,7 +183,7 @@ popover {
 
 .segment-btn:focus,
 .segment-btn:hover {
-    background-color: $hovercolor;
+    background-color: $layer0Hover;
 }
 
 .segment-btn-enabled {
@@ -215,13 +203,13 @@ popover {
 .multipleselection-btn {
     @include small-rounding;
     padding: 0rem 0.341rem;
-    border: 0.034rem solid $outlineVariant;
+    border: 0.034rem solid $outline;
     color: $onSurface;
 }
 
 .multipleselection-btn:focus,
 .multipleselection-btn:hover {
-    background-color: $hovercolor;
+    background-color: $layer0Hover;
     color: $onSurface;
 }
 
@@ -264,12 +252,15 @@ popover {
     @include small-rounding;
     @include element_decel;
     min-height: 2.5rem;
-    color: $onSurface;
+    color: $onLayer0;
+}
+
+.tab-btn:hover {
+    background-color: $layer0Hover;
 }
 
-.tab-btn:hover,
 .tab-btn:focus {
-    background-color: $hovercolor;
+    background-color: $surfaceContainerLow;
 }
 
 .tab-btn-active>box>label {
diff --git a/.config/ags/scss/_desktopbackground.scss b/.config/ags/scss/_desktopbackground.scss
index 64d40a030..2dda9a12d 100644
--- a/.config/ags/scss/_desktopbackground.scss
+++ b/.config/ags/scss/_desktopbackground.scss
@@ -17,14 +17,14 @@
     @include titlefont;
     @include bg-textshadow;
     font-size: 5.795rem;
-    color: $onBackground;
+    color: $onLayer0;
 }
 
 .bg-time-date {
     @include titlefont;
     @include bg-textshadow;
     font-size: 2.591rem;
-    color: $onBackground;
+    color: $onLayer0;
 }
 
 .bg-distro-box {
@@ -37,7 +37,7 @@
     @include titlefont;
     @include bg-textshadow;
     font-size: 1.432rem;
-    color: $onBackground;
+    color: $onLayer0;
 }
 
 .bg-distro-name {
@@ -61,9 +61,8 @@
 .bg-quicklaunch-btn {
     @include mainfont;
     @include full-rounding;
-    background-color: $surfaceVariant;
-    color: $onSurfaceVariant;
-    border: 0.068rem solid $subtext;
+    background-color: $layer2;
+    color: $onLayer2;
     min-width: 4.432rem;
     min-height: 2.045rem;
     padding: 0.273rem 0.682rem;
@@ -71,11 +70,11 @@
 
 .bg-quicklaunch-btn:hover,
 .bg-quicklaunch-btn:focus {
-    background-color: mix($surfaceVariant, $onSurfaceVariant, 95%);
+    background-color: $layer2Hover;
 }
 
 .bg-quicklaunch-btn:active {
-    background-color: mix($surfaceVariant, $onSurfaceVariant, 90%);
+    background-color: $layer2Active;
 }
 
 .bg-system-bg {
@@ -85,10 +84,9 @@
 
 .bg-system-circprog {
     @include fluent_decel_long;
-    // margin-left: 0.273rem;
     min-width: 0.205rem; // Trough stroke width
     min-height: 4.091rem; // Diameter
     font-size: 0px;
     padding: 0rem;
-    background-color: $surfaceVariant;
+    background-color: $layer2;
 }
\ No newline at end of file
diff --git a/.config/ags/scss/_dock.scss b/.config/ags/scss/_dock.scss
index c6768553a..45d3d892c 100644
--- a/.config/ags/scss/_dock.scss
+++ b/.config/ags/scss/_dock.scss
@@ -12,11 +12,11 @@
 
 .dock-app-btn:hover,
 .dock-app-btn:focus {
-    background-color: mix($surface, $onSurface, 90%);
+    background-color: $layer0Hover;
 }
 
 .dock-app-btn:active {
-    background-color: mix($surface, $onSurface, 85%);
+    background-color: $layer0Active;
 }
 
 .dock-app-icon {
@@ -27,5 +27,5 @@
 
 .dock-separator {
     min-width: 0.068rem;
-    background-color: $surfaceVariant;
+    background-color: $outline;
 }
diff --git a/.config/ags/scss/_notifications.scss b/.config/ags/scss/_notifications.scss
index 53e87bee0..786a156eb 100644
--- a/.config/ags/scss/_notifications.scss
+++ b/.config/ags/scss/_notifications.scss
@@ -5,7 +5,7 @@
 .notif-low {
     @include notif-rounding;
     background-color: $layer2;
-    color: $onSurfaceVariant;
+    color: $onLayer2;
     padding: $rounding_small;
     padding-right: $rounding_small + 0.545rem;
 }
@@ -13,7 +13,7 @@
 .notif-normal {
     @include notif-rounding;
     background-color: $layer2;
-    color: $onSurfaceVariant;
+    color: $onLayer2;
     padding: $rounding_small;
     padding-right: $rounding_small + 0.545rem;
 }
@@ -44,7 +44,7 @@
     min-width: 30.682rem;
     background-color: $layer2;
     border: 0.034rem solid $outlineVariant;
-    color: $onSurfaceVariant;
+    color: $onLayer2;
     padding: $rounding_small;
     padding-right: $rounding_small + 0.545rem;
 }
@@ -54,7 +54,7 @@
     min-width: 30.682rem;
     background-color: $layer2;
     border: 0.034rem solid $outlineVariant;
-    color: $onSurfaceVariant;
+    color: $onLayer2;
     padding: $rounding_small;
     padding-right: $rounding_small + 0.545rem;
 }
@@ -129,11 +129,11 @@
 
 .notif-expand-btn:hover,
 .notif-expand-btn:focus {
-    background: $hovercolor;
+    background: $layer2Hover;
 }
 
 .notif-expand-btn:active {
-    background: $activecolor;
+    background: $layer2Active;
 }
 
 .notif-listaction-btn {
@@ -143,11 +143,11 @@
 
 .notif-listaction-btn:hover,
 .notif-listaction-btn:focus {
-    background-color: $hovercolor;
+    background-color: $layer2Hover;
 }
 
 .notif-listaction-btn:active {
-    background-color: $activecolor;
+    background-color: $layer2Active;
 }
 
 .notif-listaction-btn-enabled {
@@ -166,7 +166,7 @@
 
 .osd-notif {
     @include notif-rounding;
-    background-color: $background;
+    background-color: $layer0;
     min-width: 30.682rem;
 }
 
@@ -204,7 +204,7 @@
 
 .notif-action-low {
     background-color: $surfaceContainerHighest;
-    color: $onSurfaceVariant;
+    color: $onLayer2;
 }
 
 .notif-action-low:focus,
@@ -218,7 +218,7 @@
 
 .notif-action-normal {
     background-color: $surfaceContainerHighest;
-    color: $onSurfaceVariant;
+    color: $onSurface;
 }
 
 .notif-action-normal:focus,
diff --git a/.config/ags/scss/_osd.scss b/.config/ags/scss/_osd.scss
index 16f495724..a3d284796 100644
--- a/.config/ags/scss/_osd.scss
+++ b/.config/ags/scss/_osd.scss
@@ -83,7 +83,7 @@
 }
 
 .osd-colorscheme-settings {
-    background-color: $background;
+    background-color: $layer0;
     padding: 0.313rem 0.626rem;
     @include small-rounding;
 }