#327 for indicators

.config/ags/modules/indicators/colorscheme.js

@@ -34,8 +34,8 @@ const ColorschemeContent = () => Box({
                 ColorBox({ name: 'S', className: 'osd-color osd-color-secondary' }),
                 ColorBox({ name: 'S-c', className: 'osd-color osd-color-secondaryContainer' }),
                 ColorBox({ name: 'Sf-v', className: 'osd-color osd-color-surfaceVariant' }),
-                ColorBox({ name: 'Sf', className: 'osd-color osd-color-surface' }),
-                ColorBox({ name: 'Bg', className: 'osd-color osd-color-background' }),
+                ColorBox({ name: 'L1', className: 'osd-color osd-color-layer1' }),
+                ColorBox({ name: 'L0', className: 'osd-color osd-color-layer0' }),
             ]
         })
     ]

.config/ags/modules/indicators/indicatorvalues.js

@@ -6,7 +6,11 @@ import { MarginRevealer } from '../.widgethacks/advancedrevealers.js';
 import Brightness from '../../services/brightness.js';
 import Indicator from '../../services/indicator.js';
 
-const OsdValue = ({ name, nameSetup = undefined, labelSetup, progressSetup, ...rest }) => {
+const OsdValue = ({
+    name, nameSetup = undefined, labelSetup, progressSetup,
+    extraClassName = '', extraProgressClassName = '',
+    ...rest
+}) => {
     const valueName = Label({
         xalign: 0, yalign: 0, hexpand: true,
         className: 'osd-label',
@@ -20,7 +24,7 @@ const OsdValue = ({ name, nameSetup = undefined, labelSetup, progressSetup, ...r
     return Box({ // Volume
         vertical: true,
         hexpand: true,
-        className: 'osd-bg osd-value',
+        className: `osd-bg osd-value ${extraClassName}`,
         attribute: {
             'disable': () => {
                 valueNumber.label = '󰖭';
@@ -35,7 +39,7 @@ const OsdValue = ({ name, nameSetup = undefined, labelSetup, progressSetup, ...r
                 ]
             }),
             ProgressBar({
-                className: 'osd-progress',
+                className: `osd-progress ${extraProgressClassName}`,
                 hexpand: true,
                 vertical: false,
                 setup: progressSetup,
@@ -48,6 +52,8 @@ const OsdValue = ({ name, nameSetup = undefined, labelSetup, progressSetup, ...r
 export default () => {
     const brightnessIndicator = OsdValue({
         name: 'Brightness',
+        extraClassName: 'osd-brightness',
+        extraProgressClassName: 'osd-brightness-progress',
         labelSetup: (self) => self.hook(Brightness, self => {
             self.label = `${Math.round(Brightness.screen_value * 100)}`;
         }, 'notify::screen-value'),
@@ -59,9 +65,9 @@ export default () => {
 
     const volumeIndicator = OsdValue({
         name: 'Volume',
-        attribute: {
-            headphones: undefined,
-        },
+        extraClassName: 'osd-volume',
+        extraProgressClassName: 'osd-volume-progress',
+        attribute: { headphones: undefined },
         nameSetup: (self) => Utils.timeout(1, () => {
             const updateAudioDevice = (self) => {
                 const usingHeadphones = (Audio.speaker?.stream?.port)?.toLowerCase().includes('headphone');

.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 {