separate scss color vars for bar elements (1) (#327)

.config/ags/modules/bar/normal/music.js

@@ -36,9 +36,9 @@ const BarGroup = ({ child }) => Box({
     ]
 });
 
-const BarResource = (name, icon, command) => {
+const BarResource = (name, icon, command, circprogClassName = 'bar-batt-circprog', textClassName = 'txt-onSurfaceVariant', iconClassName = 'bar-batt') => {
     const resourceCircProg = AnimatedCircProg({
-        className: 'bar-batt-circprog',
+        className: `${circprogClassName}`,
         vpack: 'center',
         hpack: 'center',
     });
@@ -47,7 +47,7 @@ const BarResource = (name, icon, command) => {
         children: [Overlay({
             child: Box({
                 vpack: 'center',
-                className: 'bar-batt',
+                className: `${iconClassName}`,
                 homogeneous: true,
                 children: [
                     MaterialIcon(icon, 'small'),
@@ -57,10 +57,10 @@ const BarResource = (name, icon, command) => {
         })]
     });
     const resourceLabel = Label({
-        className: 'txt-smallie txt-onSurfaceVariant',
+        className: `txt-smallie ${textClassName}`,
     });
     const widget = Box({
-        className: 'spacing-h-4 txt-onSurfaceVariant',
+        className: `spacing-h-4 ${textClassName}`,
         children: [
             resourceProgress,
             resourceLabel,
@@ -135,7 +135,7 @@ export default () => {
     });
     const trackTitle = Label({
         hexpand: true,
-        className: 'txt-smallie txt-onSurfaceVariant',
+        className: 'txt-smallie bar-music-txt',
         truncate: 'end',
         maxWidthChars: 10, // Doesn't matter, just needs to be non negative
         setup: (self) => self.hook(Mpris, label => {
@@ -178,31 +178,32 @@ export default () => {
                     onScrollDown: () => execAsync(CUSTOM_MODULE_SCROLLDOWN_SCRIPT).catch(print),
                 })
             });
-        } else {
+        } else return BarGroup({
-            return BarGroup({
+            child: Box({
-                child: Box({
+                children: [
-                    children: [
+                    BarResource('RAM Usage', 'memory', `LANG=C free | awk '/^Mem/ {printf("%.2f\\n", ($3/$2) * 100)}'`,
-                        BarResource('RAM Usage', 'memory', `LANG=C free | awk '/^Mem/ {printf("%.2f\\n", ($3/$2) * 100)}'`),
+                        'bar-ram-circprog', 'bar-ram-txt', 'bar-ram-icon'),
-                        Revealer({
+                    Revealer({
-                            revealChild: true,
+                        revealChild: true,
-                            transition: 'slide_left',
+                        transition: 'slide_left',
-                            transitionDuration: userOptions.animations.durationLarge,
+                        transitionDuration: userOptions.animations.durationLarge,
-                            child: Box({
+                        child: Box({
-                                className: 'spacing-h-10 margin-left-10',
+                            className: 'spacing-h-10 margin-left-10',
-                                children: [
+                            children: [
-                                    BarResource('Swap Usage', 'swap_horiz', `LANG=C free | awk '/^Swap/ {if ($2 > 0) printf("%.2f\\n", ($3/$2) * 100); else print "0";}'`),
+                                BarResource('Swap Usage', 'swap_horiz', `LANG=C free | awk '/^Swap/ {if ($2 > 0) printf("%.2f\\n", ($3/$2) * 100); else print "0";}'`,
-                                    BarResource('CPU Usage', 'settings_motion_mode', `LANG=C top -bn1 | grep Cpu | sed 's/\\,/\\./g' | awk '{print $2}'`),
+                                    'bar-swap-circprog', 'bar-swap-txt', 'bar-swap-icon'),
-                                ]
+                                BarResource('CPU Usage', 'settings_motion_mode', `LANG=C top -bn1 | grep Cpu | sed 's/\\,/\\./g' | awk '{print $2}'`,
-                            }),
+                                    'bar-cpu-circprog', 'bar-cpu-txt', 'bar-cpu-icon'),
-                            setup: (self) => self.hook(Mpris, label => {
+                            ]
-                                const mpris = Mpris.getPlayer('');
+                        }),
-                                self.revealChild = (!mpris);
+                        setup: (self) => self.hook(Mpris, label => {
-                            }),
+                            const mpris = Mpris.getPlayer('');
-                        })
+                            self.revealChild = (!mpris);
-                    ],
+                        }),
-                })
+                    })
-            });
+                ],
-        }
+            })
+        });
     }
     return EventBox({
         onScrollUp: (self) => switchToRelativeWorkspace(self, -1),

.config/ags/modules/bar/normal/system.js

@@ -30,21 +30,21 @@ const BatBatteryProgress = () => {
 
 const BarClock = () => Widget.Box({
     vpack: 'center',
-    className: 'spacing-h-4 txt-onSurfaceVariant bar-clock-box',
+    className: 'spacing-h-4 bar-clock-box',
     children: [
         Widget.Label({
-            className: 'bar-clock',
+            className: 'bar-time',
             label: GLib.DateTime.new_now_local().format(userOptions.time.format),
             setup: (self) => self.poll(userOptions.time.interval, label => {
                 label.label = GLib.DateTime.new_now_local().format(userOptions.time.format);
             }),
         }),
         Widget.Label({
-            className: 'txt-norm',
+            className: 'txt-norm txt-onLayer1',
             label: '•',
         }),
         Widget.Label({
-            className: 'txt-smallie',
+            className: 'txt-smallie bar-date',
             label: GLib.DateTime.new_now_local().format(userOptions.time.dateFormatLong),
             setup: (self) => self.poll(userOptions.time.dateInterval, (label) => {
                 label.label = GLib.DateTime.new_now_local().format(userOptions.time.dateFormatLong);

.config/ags/scss/_bar.scss

@@ -1,12 +1,8 @@
 // Made to be pixel-perfect with 11pt font size
 // 1rem = 11pt = 14.6666666667px
-
-$black: black;
-$white: white;
 $bar_ws_width: 1.774rem;
 $bar_ws_width_focus: 0.614rem;
 $bar_ws_width_focus_active: 2.045rem;
-$bar_subgroup_bg: $surfaceVariant;
 
 @mixin bar-group-rounding {
     @include small-rounding;
@@ -17,12 +13,12 @@ $bar_subgroup_bg: $surfaceVariant;
 }
 
 .bar-bg {
-    background-color: $t_background;
+    background-color: $layer0;
     min-height: 2.727rem;
 }
 
 .bar-bg-focus {
-    background-color: $t_background;
+    background-color: $layer0;
     min-height: 1.364rem;
 }
 
@@ -39,7 +35,7 @@ $bar_subgroup_bg: $surfaceVariant;
 }
 
 .bar-group {
-    background-color: $l_l_t_surfaceVariant;
+    background-color: $layer1;
 }
 
 .bar-group-pad {
@@ -88,70 +84,57 @@ $bar_subgroup_bg: $surfaceVariant;
     border-bottom-right-radius: 1.364rem;
 }
 
+.bar-sidemodule {
+    min-width: 26rem;
+}
+
 .bar-ws-width {
     min-width: 18.341rem;
 }
 
 .bar-ws {
     min-width: $bar_ws_width;
-    color: mix($onBackground, $background, 40%);
+    color: $workspaceOnLayer1Inactive;
-
-    @if $darkmode ==true {
-        color: mix($onBackground, $background, 45%);
-    }
 }
 
 .bar-ws-active {
-    background-color: $secondaryContainer;
+    background-color: $workspaceSecondaryContainer;
-    color: $onSecondaryContainer;
+    color: $workspaceOnSecondaryContainer;
 }
 
 .bar-ws-occupied {
-    background-color: $bar_subgroup_bg;
+    background-color: $layer2;
-    color: $onSurfaceVariant;
+    color: $workspaceOnSurfaceVariant;
 }
 
 // Focus is the bar mode name, not the workspace state!
 
 .bar-ws-focus {
-    background-color: $bar_subgroup_bg;
+    background-color: $layer2;
     min-width: $bar_ws_width_focus;
 }
 
 .bar-ws-focus-active {
     min-width: $bar_ws_width_focus_active;
-    background-color: $onBackground;
+    background-color: $layer2;
 }
 
 .bar-ws-focus-occupied {
-    background-color: mix($onBackground, $background, 40%);
+    background-color: $layer2;
-
-    @if $darkmode ==true {
-        background-color: mix($onBackground, $background, 45%);
-    }
-}
-
-.bar-separator {
-    @include full-rounding;
-    min-width: 0.341rem;
-    min-height: 0.341rem;
-    background-color: mix($t_surface, $t_onSurface, 90%);
-    margin: 0rem 0.341rem;
 }
 
 .bar-clock-box {
     margin: 0rem 0.682rem;
 }
 
-.bar-clock {
+.bar-time {
     @include titlefont;
     font-size: 1.2727rem;
+    color: $timeOnLayer1;
 }
 
 .bar-date {
-    @include titlefont;
+    color: $dateOnLayer1;
-    font-size: 1rem;
-    color: $onBackground;
 }
 
 .bar-batt {
@@ -164,20 +147,6 @@ $bar_subgroup_bg: $surfaceVariant;
     color: $onSecondaryContainer;
 }
 
-.bar-sidemodule {
-    min-width: 26rem;
-}
-
-.bar-batt-low {
-    background-color: $error;
-    color: $errorContainer;
-}
-
-.bar-batt-full {
-    // background-color: $successContainer;
-    // color: $onSuccessContainer;
-}
-
 .bar-batt-circprog {
     @include fluent_decel_long;
     min-width: 0.068rem; // line width
@@ -192,9 +161,79 @@ $bar_subgroup_bg: $surfaceVariant;
     color: $errorContainer;
 }
 
-.bar-batt-circprog-full {
+
-    // background-color: $successContainer;
+.bar-batt-low {
-    // color: $onSuccessContainer;
+    background-color: $error;
+    color: $errorContainer;
+}
+
+.bar-ram-icon {
+    @include full-rounding;
+    @include element_decel;
+    min-height: 1.77rem;
+    min-width: 1.77rem;
+    border-radius: 10rem;
+    background-color: $ramSecondaryContainer;
+    color: $ramOnSecondaryContainer;
+}
+
+.bar-ram-circprog {
+    @include fluent_decel_long;
+    min-width: 0.068rem; // line width
+    min-height: 1.636rem;
+    padding: 0rem;
+    background-color: $ramSecondaryContainer;
+    color: $ramOnSecondaryContainer;
+}
+
+.bar-ram-txt {
+    color: $ramOnLayer1;
+}
+
+.bar-swap-icon {
+    @include full-rounding;
+    @include element_decel;
+    min-height: 1.77rem;
+    min-width: 1.77rem;
+    border-radius: 10rem;
+    background-color: $swapSecondaryContainer;
+    color: $swapOnSecondaryContainer;
+}
+
+.bar-swap-circprog {
+    @include fluent_decel_long;
+    min-width: 0.068rem; // line width
+    min-height: 1.636rem;
+    padding: 0rem;
+    background-color: $swapSecondaryContainer;
+    color: $swapOnSecondaryContainer;
+}
+
+.bar-swap-txt {
+    color: $swapOnLayer1;
+}
+
+.bar-cpu-icon {
+    @include full-rounding;
+    @include element_decel;
+    min-height: 1.77rem;
+    min-width: 1.77rem;
+    border-radius: 10rem;
+    background-color: $cpuSecondaryContainer;
+    color: $cpuOnSecondaryContainer;
+}
+
+.bar-cpu-circprog {
+    @include fluent_decel_long;
+    min-width: 0.068rem; // line width
+    min-height: 1.636rem;
+    padding: 0rem;
+    background-color: $cpuSecondaryContainer;
+    color: $cpuOnSecondaryContainer;
+}
+
+.bar-cpu-txt {
+    color: $cpuOnLayer1;
 }
 
 .bar-music-playstate {
@@ -202,8 +241,8 @@ $bar_subgroup_bg: $surfaceVariant;
     min-height: 1.77rem;
     min-width: 1.77rem;
     border-radius: 10rem;
-    background-color: $secondaryContainer;
+    background-color: $musicSecondaryContainer;
-    color: $onSecondaryContainer;
+    color: $musicOnSecondaryContainer;
 }
 
 .bar-music-circprog {
@@ -211,16 +250,16 @@ $bar_subgroup_bg: $surfaceVariant;
     min-width: 0.068rem; // line width
     min-height: 1.636rem;
     padding: 0rem;
-    background-color: $secondaryContainer;
+    background-color: $musicSecondaryContainer;
-    color: $onSecondaryContainer;
+    color: $musicOnSecondaryContainer;
 }
 
 .bar-music-playstate-playing {
     min-height: 1.77rem;
     min-width: 1.77rem;
     border-radius: 10rem;
-    background-color: $secondaryContainer;
+    background-color: $musicSecondaryContainer;
-    color: $onSecondaryContainer;
+    color: $musicOnSecondaryContainer;
 }
 
 .bar-music-playstate-txt {
@@ -228,6 +267,10 @@ $bar_subgroup_bg: $surfaceVariant;
     @include icon-material;
 }
 
+.bar-music-txt {
+    color: $musicOnLayer1;
+}
+
 .bar-music-cover {
     background-position: center;
     background-repeat: no-repeat;
@@ -240,11 +283,6 @@ $bar_subgroup_bg: $surfaceVariant;
     min-width: 34.091rem;
 }
 
-.bar-music-extended-ctl-bg {
-    border-radius: 1.364rem;
-    background-color: rgba(30, 30, 30, 0.6);
-}
-
 .bar-music-hide-false {
     @include menu_decel;
     transition-duration: 100ms;
@@ -263,7 +301,7 @@ $bar_subgroup_bg: $surfaceVariant;
 }
 
 .corner {
-    background-color: $t_background;
+    background-color: $layer0;
     @include large-rounding;
 }
 
@@ -275,7 +313,7 @@ $bar_subgroup_bg: $surfaceVariant;
 .bar-topdesc {
     margin-top: -0.136rem;
     margin-bottom: -0.341rem;
-    color: $subtext;
+    color: $windowtitleOnLayer1Inactive;
 }
 
 .bar-space-button {
@@ -287,15 +325,6 @@ $bar_subgroup_bg: $surfaceVariant;
     padding: 0rem 0.682rem;
 }
 
-.bar-space-button:hover>box:first-child,
-.bar-space-button:focus>box:first-child {
-    background-color: $hovercolor;
-}
-
-.bar-space-button:active>box:first-child {
-    background-color: $activecolor;
-}
-
 .bar-space-button-leftmost {
     box {
         margin: 0rem 0.682rem;
@@ -327,12 +356,8 @@ $bar_subgroup_bg: $surfaceVariant;
     padding: 0rem 0.614rem;
 }
 
-.bar-statusicons-hover {
-    background-color: mix($t_background, $t_onBackground, 90%);
-}
-
 .bar-statusicons-active {
-    background-color: mix($t_background, $t_onBackground, 80%);
+    background-color: $layer0Active;
 }
 
 .bar-util-btn {
@@ -340,16 +365,17 @@ $bar_subgroup_bg: $surfaceVariant;
     @include element_decel;
     min-height: 1.77rem;
     min-width: 1.77rem;
-    background-color: $bar_subgroup_bg;
+    background-color: $layer2;
+    color: $onLayer2;
 }
 
 .bar-util-btn:hover,
 .bar-util-btn:focus {
-    background-color: mix($bar_subgroup_bg, $onSurfaceVariant, 90%);
+    background-color: $layer2Hover;
 }
 
 .bar-util-btn:active {
-    background-color: mix($bar_subgroup_bg, $onSurfaceVariant, 80%);
+    background-color: $layer2Active;
 }
 
 .bar-bluetooth-device {
@@ -358,7 +384,6 @@ $bar_subgroup_bg: $surfaceVariant;
     min-height: 1.032rem;
     min-width: 1.032rem;
     font-size: 1.032rem;
-    background-color: $surface;
+    color: $onLayer0;
-    color: $onSurface;
     padding: 0.205rem 0.341rem;
 }

.config/ags/scss/_colors.scss

@@ -116,6 +116,8 @@ $hovercolor: mix($t_surface, $t_onSurface, 50%);
 $activecolor: mix($t_surface, $t_onSurface, 30%);
 $subtext: mix($onBackground, $background, 70%);
 $actiontext: mix($onBackground, $background, 85%);
+$black: black;
+$white: white;
 
 // Terminal colors
 $termbg: mix($t_surfaceVariant, $t_onSurfaceVariant, 80%);
@@ -128,3 +130,39 @@ $term4: $onPrimaryContainer;
 $term5: $onSecondaryContainer;
 $term6: $primary;
 $term7: $onSurfaceVariant;
+
+/// Color mappings for more chaotic, dynamic colors like the average rice ///
+// General
+$layer0: $t_background;
+$onLayer0: $onBackground;
+$layer0Active: mix($t_background, $t_onBackground, 80%);
+$layer1: $surface;
+$onLayer1Inactive: mix($onBackground, $background, 45%);
+$onLayer1: $onSurfaceVariant;
+$layer2: $surfaceVariant;
+$onLayer2: $onSurfaceVariant;
+$layer2Hover: mix($layer2, $onSurfaceVariant, 90%);
+$layer2Active: mix($layer2, $onSurfaceVariant, 80%);
+// Elements
+// For now they just use Material colors. I'll make a proper theme later
+$windowtitleOnLayer1Inactive: $onLayer1;
+$timeOnLayer1: $onLayer1;
+$dateOnLayer1: $onLayer1;
+$ramOnLayer1: $onLayer1;
+$ramSecondaryContainer: $secondaryContainer;
+$ramOnSecondaryContainer: $onSecondaryContainer;
+$swapOnLayer1: $onLayer1;
+$swapSecondaryContainer: $secondaryContainer;
+$swapOnSecondaryContainer: $onSecondaryContainer;
+$cpuOnLayer1: $onLayer1;
+$cpuSecondaryContainer: $secondaryContainer;
+$cpuOnSecondaryContainer: $onSecondaryContainer;
+$musicOnLayer1: $onLayer1;
+$musicSecondaryContainer: $secondaryContainer;
+$musicOnSecondaryContainer: $onSecondaryContainer;
+
+$workspaceOnLayer1Inactive: $onLayer1Inactive;
+$workspaceSecondaryContainer: $secondaryContainer;
+$workspaceOnSecondaryContainer: $onSecondaryContainer;
+$workspaceOnSurfaceVariant: $onSurfaceVariant;
+

.config/ags/scss/_lib_classes.scss

@@ -50,6 +50,10 @@
     color: $onSurfaceVariant;
 }
 
+.txt-onLayer1 {
+    color: $onLayer1;
+}
+
 .txt-shadow {
     text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.69);
     margin: 10px;