#327 for indicators

.config/ags/scss/_colors.scss

@@ -142,10 +142,12 @@ $layer1: $surface;
 $onLayer1: $onSurface;
 $onLayer1Inactive: mix($onLayer1, $layer1, 45%);
 $onLayer1: $onSurfaceVariant;
+$layer1Hover: mix($layer1, $onLayer1, 85%);
+$layer1Active: mix($layer1, $onLayer1, 70%);
 $layer2: $surfaceVariant;
 $onLayer2: $onSurfaceVariant;
-$layer2Hover: mix($layer2, $onSurfaceVariant, 90%);
-$layer2Active: mix($layer2, $onSurfaceVariant, 80%);
+$layer2Hover: mix($layer2, $onLayer2, 90%);
+$layer2Active: mix($layer2, $onLayer2, 80%);
 // Elements
 $windowtitleOnLayer0Inactive: $onLayer0Inactive;
 $windowtitleOnLayer0: $onLayer0;
@@ -185,6 +187,17 @@ $cheatsheetColors: (
     $onSecondaryContainer,
     $onSecondaryContainer
 );
+$sessionColors: (
+    $onLayer1,
+    $onLayer1,
+    $onLayer1,
+    $onLayer1,
+    $onLayer1,
+    $onLayer1,
+    $onLayer1
+);
+$brightnessOnLayer0: $onLayer0;
+$volumeOnLayer0: $onLayer0;
 
 ///////////////////// test theme: amarena (kind of) /////////////////////////
 // $layer0: #0e1116;
@@ -194,10 +207,12 @@ $cheatsheetColors: (
 // $layer1: #171c22;
 // $onLayer1Inactive: mix($onLayer1, $layer1, 45%);
 // $onLayer1: $onSurfaceVariant;
+// $layer1Hover: mix($layer1, $onLayer1, 85%);
+// $layer1Active: mix($layer1, $onLayer1, 70%);
 // $layer2: #252c35;
 // $onLayer2: $onSurfaceVariant;
-// $layer2Hover: mix($layer2, $onSurfaceVariant, 90%);
-// $layer2Active: mix($layer2, $onSurfaceVariant, 80%);
+// $layer2Hover: mix($layer2, $onLayer2, 90%);
+// $layer2Active: mix($layer2, $onLayer2, 80%);
 // $layer3: #1C232A;
 // // Bar
 // $windowtitleOnLayer0Inactive: #70afa4;
@@ -239,3 +254,16 @@ $cheatsheetColors: (
 //     #FB6396,
 //     #6EC1D6
 // );
+// $sessionColors: (
+//     #F692B2,
+//     #6EC1D6,
+//     #CD84C8,
+//     #7FE4D2,
+//     #94CF95,
+//     #CD84C8,
+//     #FB6396
+// );
+// // Osd
+// $brightnessOnLayer0: #F692B2;
+// $volumeOnLayer0: #94CF95;
+

.config/ags/scss/_common.scss

@@ -13,7 +13,7 @@
         color: $onSecondary;
     }
 
-    caret-color: $primary;
+    caret-color: $onLayer2;
 }
 
 @keyframes appear {
@@ -50,18 +50,18 @@ menubar>menuitem {
 menu>menuitem {
     padding: 0.4em 1.5rem;
     background: transparent;
-    transition: 0.2s ease background;
+    transition: 0.2s ease background-color;
     border-radius: 0.545rem;
     -gtk-outline-radius: 0.545rem;
 }
 
 menu>menuitem:hover,
 menu>menuitem:focus {
-    background-color: mix($surfaceVariant, $onSurfaceVariant, 90%);
+    background-color: $layer2Hover;
 }
 
 menu>menuitem:active {
-    background-color: mix($surfaceVariant, $onSurfaceVariant, 80%);
+    background-color: $layer2Active;
 }
 
 radio {

.config/ags/scss/_osd.scss

@@ -10,7 +10,7 @@
 .osd-value {
     @include elevation-border;
     @include elevation2;
-    background-color: $t_background;
+    background-color: $layer0;
     border-radius: 1.023rem;
     padding: 0.625rem 1.023rem;
     padding-top: 0.313rem;
@@ -27,7 +27,7 @@
         min-height: 0.954rem;
         min-width: 0.068rem;
         border-radius: 10rem;
-        background-color: $secondaryContainer;
+        background-color: $layer2;
         // border: 0.068rem solid $onSecondaryContainer;
     }
 
@@ -37,18 +37,13 @@
         min-width: 0.680rem;
         margin: 0rem 0.137rem;
         border-radius: 10rem;
-        background-color: $onSecondaryContainer;
+        background-color: $onLayer2;
     }
 }
 
-.osd-icon {
-    color: $onPrimaryContainer;
-}
-
 .osd-label {
     font-size: 1.023rem;
     font-weight: 500;
-    color: $onBackground;
     margin-top: 0.341rem;
 }
 
@@ -56,7 +51,24 @@
     @include titlefont;
     font-size: 1.688rem;
     font-weight: 500;
-    color: $onBackground;
+    color: $onLayer0;
+}
+
+.osd-brightness {
+    color: $brightnessOnLayer0;
+}
+.osd-brightness-progress {
+    progress {
+        background-color: $brightnessOnLayer0;
+    }
+}
+.osd-volume {
+    color: $volumeOnLayer0;
+}
+.osd-volume-progress {
+    progress {
+        background-color: $volumeOnLayer0;
+    }
 }
 
 .osd-notifs {
@@ -65,7 +77,7 @@
 
 .osd-colorscheme {
     border-radius: 1.023rem;
-    background-color: $t_background;
+    background-color: $layer0;
     padding: 1.023rem;
     @include elevation2;
 }
@@ -108,15 +120,15 @@
     color: $onSurfaceVariant;
     box { background-color: $onSurfaceVariant; }
 }
-.osd-color-surface {
-    background-color: $surface;
-    color: $onSurface;
-    box { background-color: $onSurface; }
+.osd-color-L1 {
+    background-color: $layer1;
+    color: $onLayer1;
+    box { background-color: $onLayer1; }
 }
-.osd-color-background {
-    background-color: $background;
-    color: $onBackground;
-    box { background-color: $onBackground; }
+.osd-color-layer0 {
+    background-color: $layer0;
+    color: $onLayer0;
+    box { background-color: $onLayer0; }
 }
 
 .osd-show {