From 36e706be01297c4ff3eef453c27f3345281edb06 Mon Sep 17 00:00:00 2001
From: midn8hustlr <4visekh@gmail.com>
Date: Fri, 8 Mar 2024 22:08:34 +0530
Subject: [PATCH] Add materialyoucolor-python, simplify scss

---
 .../ags/scripts/color_generation/colorgen.sh  |   2 +
 .../generate_colors_material.py               | 162 +++++++++++-------
 .config/ags/scss/_bar.scss                    |  43 +++--
 .config/ags/scss/_colors.scss                 | 100 +++++------
 .config/ags/scss/_lib_mixins.scss             |   4 +-
 .config/ags/scss/_notifications.scss          |  60 ++++---
 .config/ags/scss/_overview.scss               |  28 +--
 .config/ags/scss/_sidebars.scss               |  87 +++++-----
 8 files changed, 265 insertions(+), 221 deletions(-)

diff --git a/.config/ags/scripts/color_generation/colorgen.sh b/.config/ags/scripts/color_generation/colorgen.sh
index 1748ffb9d..15f81adb4 100755
--- a/.config/ags/scripts/color_generation/colorgen.sh
+++ b/.config/ags/scripts/color_generation/colorgen.sh
@@ -1,5 +1,7 @@
 #!/usr/bin/env bash
 
+source ${HOME}/virtualenvs/my_project_venv/bin/activate
+
 # check if no arguments
 if [ $# -eq 0 ]; then
     echo "Usage: colorgen.sh /path/to/image (--apply)"
diff --git a/.config/ags/scripts/color_generation/generate_colors_material.py b/.config/ags/scripts/color_generation/generate_colors_material.py
index deb34bf83..9edd06ac4 100755
--- a/.config/ags/scripts/color_generation/generate_colors_material.py
+++ b/.config/ags/scripts/color_generation/generate_colors_material.py
@@ -4,6 +4,21 @@ from pathlib import Path
 import sys
 import subprocess
 
+# Color in hue, chroma, tone form
+from materialyoucolor.hct import Hct
+from materialyoucolor.dynamiccolor.material_dynamic_colors import MaterialDynamicColors
+# There are 9 different variants of scheme.
+from materialyoucolor.scheme.scheme_tonal_spot import SchemeTonalSpot as Scheme
+#from materialyoucolor.scheme.scheme_fruit_salad import SchemeFruitSalad as Scheme
+#from materialyoucolor.scheme.scheme_expressive import SchemeExpressive as Scheme
+#from materialyoucolor.scheme.scheme_monochrome import SchemeMonochrome as Scheme
+#from materialyoucolor.scheme.scheme_rainbow import SchemeRainbow as Scheme
+#from materialyoucolor.scheme.scheme_vibrant import SchemeVibrant as Scheme
+#from materialyoucolor.scheme.scheme_neutral import SchemeNeutral as Scheme
+#from materialyoucolor.scheme.scheme_fidelity import SchemeFidelity as Scheme
+#from materialyoucolor.scheme.scheme_content import SchemeContent as Scheme
+# Others you can import: SchemeExpressive, SchemeFruitSalad, SchemeMonochrome, SchemeRainbow, SchemeVibrant, SchemeNeutral, SchemeFidelity and SchemeContent
+
 def darken(hex_color, factor=0.7):
     if not (hex_color.startswith('#') and len(hex_color) in (4, 7)):
         raise ValueError("Invalid hex color format")
@@ -23,6 +38,10 @@ if len(sys.argv) > 1 and sys.argv[1] == '--path':
     hsize = int((float(img.size[1])*float(wpercent)))
     img = img.resize((basewidth,hsize),Image.Resampling.LANCZOS)
     newtheme = themeFromImage(img)
+    argb = sourceColorFromImage(img)
+
+    scheme = Scheme(Hct.from_int(argb), True, 0.0)
+
     # except FileNotFoundError:
     #     print('[generate_colors_material.py] File not found', file=sys.stderr);
     #     exit()
@@ -36,7 +55,7 @@ else:
     # try:
     # imagePath = subprocess.check_output("ags run-js 'wallpaper.get(0)'", shell=True)
     imagePath = subprocess.check_output("swww query | awk -F 'image: ' '{print $2}'", shell=True)
-    imagePath = imagePath[:-1].decode("utf-8") 
+    imagePath = imagePath[:-1].decode("utf-8")
     img = Image.open(imagePath)
     basewidth = 64
     wpercent = (basewidth/float(img.size[0]))
@@ -60,63 +79,90 @@ else:
     colorscheme = newtheme.get('schemes').get('dark')
     print('$darkmode: true;')
 
-primary = hexFromArgb(colorscheme.get_primary())
-onPrimary = hexFromArgb(colorscheme.get_onPrimary())
-primaryContainer = hexFromArgb(colorscheme.get_primaryContainer())
-onPrimaryContainer = hexFromArgb(colorscheme.get_onPrimaryContainer())
-secondary = hexFromArgb(colorscheme.get_secondary())
-onSecondary = hexFromArgb(colorscheme.get_onSecondary())
-secondaryContainer = hexFromArgb(colorscheme.get_secondaryContainer())
-onSecondaryContainer = hexFromArgb(colorscheme.get_onSecondaryContainer())
-tertiary = hexFromArgb(colorscheme.get_tertiary())
-onTertiary = hexFromArgb(colorscheme.get_onTertiary())
-tertiaryContainer = hexFromArgb(colorscheme.get_tertiaryContainer())
-onTertiaryContainer = hexFromArgb(colorscheme.get_onTertiaryContainer())
-error = hexFromArgb(colorscheme.get_error())
-onError = hexFromArgb(colorscheme.get_onError())
-errorContainer = hexFromArgb(colorscheme.get_errorContainer())
-onErrorContainer = hexFromArgb(colorscheme.get_onErrorContainer())
-background = hexFromArgb(colorscheme.get_background())
-onBackground = hexFromArgb(colorscheme.get_onBackground())
-surface = hexFromArgb(colorscheme.get_surface())
-onSurface = hexFromArgb(colorscheme.get_onSurface())
-surfaceVariant = hexFromArgb(colorscheme.get_surfaceVariant())
-onSurfaceVariant = hexFromArgb(colorscheme.get_onSurfaceVariant())
-outline = hexFromArgb(colorscheme.get_outline())
-shadow = hexFromArgb(colorscheme.get_shadow())
-inverseSurface = hexFromArgb(colorscheme.get_inverseSurface())
-inverseOnSurface = hexFromArgb(colorscheme.get_inverseOnSurface())
-inversePrimary = hexFromArgb(colorscheme.get_inversePrimary())
+#primary = hexFromArgb(colorscheme.get_primary())
+#onPrimary = hexFromArgb(colorscheme.get_onPrimary())
+#primaryContainer = hexFromArgb(colorscheme.get_primaryContainer())
+#onPrimaryContainer = hexFromArgb(colorscheme.get_onPrimaryContainer())
+#secondary = hexFromArgb(colorscheme.get_secondary())
+#onSecondary = hexFromArgb(colorscheme.get_onSecondary())
+#secondaryContainer = hexFromArgb(colorscheme.get_secondaryContainer())
+#onSecondaryContainer = hexFromArgb(colorscheme.get_onSecondaryContainer())
+#tertiary = hexFromArgb(colorscheme.get_tertiary())
+#onTertiary = hexFromArgb(colorscheme.get_onTertiary())
+#tertiaryContainer = hexFromArgb(colorscheme.get_tertiaryContainer())
+#onTertiaryContainer = hexFromArgb(colorscheme.get_onTertiaryContainer())
+#error = hexFromArgb(colorscheme.get_error())
+#onError = hexFromArgb(colorscheme.get_onError())
+#errorContainer = hexFromArgb(colorscheme.get_errorContainer())
+#onErrorContainer = hexFromArgb(colorscheme.get_onErrorContainer())
+#background = hexFromArgb(colorscheme.get_background())
+#onBackground = hexFromArgb(colorscheme.get_onBackground())
+#surface = hexFromArgb(colorscheme.get_surface())
+#onSurface = hexFromArgb(colorscheme.get_onSurface())
+#surfaceVariant = hexFromArgb(colorscheme.get_surfaceVariant())
+#onSurfaceVariant = hexFromArgb(colorscheme.get_onSurfaceVariant())
+#outline = hexFromArgb(colorscheme.get_outline())
+#shadow = hexFromArgb(colorscheme.get_shadow())
+#inverseSurface = hexFromArgb(colorscheme.get_inverseSurface())
+#inverseOnSurface = hexFromArgb(colorscheme.get_inverseOnSurface())
+#inversePrimary = hexFromArgb(colorscheme.get_inversePrimary())
+
 
 # make material less boring
-if darkmode:
-    background = darken(background, 0.6)
+#if darkmode:
+#    background = darken(background, 0.6)
 
-print('$primary: ' + primary + ';')
-print('$onPrimary: ' + onPrimary + ';')
-print('$primaryContainer: ' + primaryContainer + ';')
-print('$onPrimaryContainer: ' + onPrimaryContainer + ';')
-print('$secondary: ' + secondary + ';')
-print('$onSecondary: ' + onSecondary + ';')
-print('$secondaryContainer: ' + secondaryContainer + ';')
-print('$onSecondaryContainer: ' + onSecondaryContainer + ';')
-print('$tertiary: ' + tertiary + ';')
-print('$onTertiary: ' + onTertiary + ';')
-print('$tertiaryContainer: ' + tertiaryContainer + ';')
-print('$onTertiaryContainer: ' + onTertiaryContainer + ';')
-print('$error: ' + error + ';')
-print('$onError: ' + onError + ';')
-print('$errorContainer: ' + errorContainer + ';')
-print('$onErrorContainer: ' + onErrorContainer + ';')
-print('$colorbarbg: ' + background + ';')
-print('$background: ' + background + ';')
-print('$onBackground: ' + onBackground + ';')
-print('$surface: ' + surface + ';')
-print('$onSurface: ' + onSurface + ';')
-print('$surfaceVariant: ' + surfaceVariant + ';')
-print('$onSurfaceVariant: ' + onSurfaceVariant + ';')
-print('$outline: ' + outline + ';')
-print('$shadow: ' + shadow + ';')
-print('$inverseSurface: ' + inverseSurface + ';')
-print('$inverseOnSurface: ' + inverseOnSurface + ';')
-print('$inversePrimary: ' + inversePrimary + ';')
\ No newline at end of file
+#print('$primary: ' + primary + ';')
+#print('$onPrimary: ' + onPrimary + ';')
+#print('$primaryContainer: ' + primaryContainer + ';')
+#print('$onPrimaryContainer: ' + onPrimaryContainer + ';')
+#print('$secondary: ' + secondary + ';')
+#print('$onSecondary: ' + onSecondary + ';')
+#print('$secondaryContainer: ' + secondaryContainer + ';')
+#print('$onSecondaryContainer: ' + onSecondaryContainer + ';')
+#print('$tertiary: ' + tertiary + ';')
+#print('$onTertiary: ' + onTertiary + ';')
+#print('$tertiaryContainer: ' + tertiaryContainer + ';')
+#print('$onTertiaryContainer: ' + onTertiaryContainer + ';')
+#print('$error: ' + error + ';')
+#print('$onError: ' + onError + ';')
+#print('$errorContainer: ' + errorContainer + ';')
+#print('$onErrorContainer: ' + onErrorContainer + ';')
+#print('$colorbarbg: ' + background + ';')
+#print('$background: ' + background + ';')
+#print('$onBackground: ' + onBackground + ';')
+#print('$surface: ' + surface + ';')
+#print('$onSurface: ' + onSurface + ';')
+#print('$surfaceVariant: ' + surfaceVariant + ';')
+#print('$onSurfaceVariant: ' + onSurfaceVariant + ';')
+#print('$outline: ' + outline + ';')
+#print('$shadow: ' + shadow + ';')
+#print('$inverseSurface: ' + inverseSurface + ';')
+#print('$inverseOnSurface: ' + inverseOnSurface + ';')
+#print('$inversePrimary: ' + inversePrimary + ';')
+#print('$indsddsdversePrimary: ' + inversePrimary + ';')
+
+
+
+if len(sys.argv) > 4:
+    if sys.argv[4] == '--debug':
+        for color in vars(MaterialDynamicColors).keys():
+            color_name = getattr(MaterialDynamicColors, color)
+            if hasattr(color_name, "get_hct"):
+                rgba = color_name.get_hct(scheme).to_rgba()
+                r, g, b, a = rgba
+                hex_color = f"#{r:02X}{g:02X}{b:02X}"
+                print(color.ljust(32), "\x1B[38;2;{};{};{}m{}\x1B[0m".format(rgba[0], rgba[1], rgba[2], "\x1b[7m   \x1b[7m"), hex_color)
+
+        print('\nHey :\n')
+
+
+for color in vars(MaterialDynamicColors).keys():
+    color_name = getattr(MaterialDynamicColors, color)
+    if hasattr(color_name, "get_hct"):
+        rgba = color_name.get_hct(scheme).to_rgba()
+        r, g, b, a = rgba
+        hex_color = f"#{r:02X}{g:02X}{b:02X}"
+        print('$' + color + ': ' + hex_color + ';')
+
+print('$colorbarbg: ' + '#000000' + ';')
diff --git a/.config/ags/scss/_bar.scss b/.config/ags/scss/_bar.scss
index f83566092..5ae2501ae 100644
--- a/.config/ags/scss/_bar.scss
+++ b/.config/ags/scss/_bar.scss
@@ -15,7 +15,7 @@ $bar_subgroup_bg: $surfaceVariant;
 }
 
 .bar-bg {
-    background-color: $t_background;
+    background-color: $background;
     min-height: 2.727rem;
 }
 
@@ -28,7 +28,7 @@ $bar_subgroup_bg: $surfaceVariant;
 }
 
 .bar-group {
-    background-color: $l_l_t_surfaceVariant;
+    background-color: $surfaceContainer;
 }
 
 .bar-group-pad {
@@ -83,27 +83,23 @@ $bar_subgroup_bg: $surfaceVariant;
 
 .bar-ws {
     min-width: $bar_ws_width;
-    color: mix($onBackground, $background, 40%);
-    @if $darkmode ==true {
-        color: mix($onBackground, $background, 45%);
-    }
+    color: $outlineVariant;
 }
 
 .bar-ws-active {
-    background-color: $secondaryContainer;
-    color: $onSecondaryContainer;
+    background-color: $primary;
+    color: $onPrimary;
 }
 
 .bar-ws-occupied {
-    background-color: $bar_subgroup_bg;
-    color: $onSurfaceVariant;
+    background-color: $secondaryContainer;
+    color: $onSecondaryContainer;
 }
 
 .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;
 }
 
@@ -119,7 +115,7 @@ $bar_subgroup_bg: $surfaceVariant;
 .bar-date {
     @include titlefont;
     font-size: 1rem;
-    color: $onBackground;
+    //color: #AA0000;//$outlineVariant;
 }
 
 .bar-batt {
@@ -187,8 +183,8 @@ $bar_subgroup_bg: $surfaceVariant;
     min-height: 1.77rem;
     min-width: 1.77rem;
     border-radius: 10rem;
-    background-color: $secondaryContainer;
-    color: $onSecondaryContainer;
+    background-color: $primaryContainer;
+    color: $onPrimaryContainer;
 }
 
 .bar-music-playstate-txt {
@@ -231,7 +227,7 @@ $bar_subgroup_bg: $surfaceVariant;
 }
 
 .corner {
-    background-color: $t_background;
+    background-color: $background;
     @include large-rounding;
 }
 
@@ -243,7 +239,7 @@ $bar_subgroup_bg: $surfaceVariant;
 .bar-topdesc {
     margin-top: -0.136rem;
     margin-bottom: -0.341rem;
-    color: $subtext;
+    color: $outline;
 }
 
 .bar-space-button {
@@ -296,11 +292,12 @@ $bar_subgroup_bg: $surfaceVariant;
 }
 
 .bar-statusicons-hover {
-    background-color: mix($t_background, $t_onBackground, 90%);
+    background-color: $surfaceContainerHighest;
 }
 
 .bar-statusicons-active {
-    background-color: mix($t_background, $t_onBackground, 80%);
+    background-color: $primary;
+    color: $onPrimary;
 }
 
 .bar-util-btn {
@@ -308,14 +305,16 @@ $bar_subgroup_bg: $surfaceVariant;
     @include element_decel;
     min-height: 1.77rem;
     min-width: 1.77rem;
-    background-color: $bar_subgroup_bg;
+    background-color: $secondaryContainer;
+    color: $onSecondaryContainer;
 }
 
 .bar-util-btn:hover,
 .bar-util-btn:focus {
-    background-color: mix($bar_subgroup_bg, $onSurfaceVariant, 90%);
+    background-color: $primaryContainer;
 }
 
 .bar-util-btn:active {
-    background-color: mix($bar_subgroup_bg, $onSurfaceVariant, 80%);
-}
\ No newline at end of file
+    background-color: $primary;
+    color: $onPrimary;
+}
diff --git a/.config/ags/scss/_colors.scss b/.config/ags/scss/_colors.scss
index 2cc6ef45b..b74d52b95 100644
--- a/.config/ags/scss/_colors.scss
+++ b/.config/ags/scss/_colors.scss
@@ -3,38 +3,38 @@
 // This is an attempt to improve that.
 $transparency_enabled: false;
 
-@if $transparency_enabled ==false {
-    @if $darkmode ==true {
-        $primary: mix($primary, white, 70%);
-        $primaryContainer: mix($primaryContainer, white, 90%);
-        $background: mix(mix($background, $primary, 94%), #000000, 50%);
-        $surface: mix($surface, $primaryContainer, 98%);
-        $surfaceVariant: mix($surfaceVariant, #000000, 75%);
-        // $secondaryContainer: mix($secondaryContainer, $primaryContainer, 90%);
-    }
-
-    @if $darkmode ==false {
-        $background: mix($background, $primary, 87%);
-        $surface: mix($surface, $primary, 93%);
-        $surfaceVariant: mix($surfaceVariant, #ffffff, 25%);
-    }
-}
-
-@if $transparency_enabled ==true {
-    @if $darkmode ==true {
-        $background: mix(mix($background, $primary, 94%), #000000, 50%);
-        $surface: mix($surface, $primaryContainer, 98%);
-        $surfaceVariant: mix($surfaceVariant, #000000, 55%);
-    }
-
-    @if $darkmode ==false {
-        $background: mix($background, $primary, 94%);
-        $surface: mix($surface, $primary, 93%);
-        $surfaceVariant: mix($surfaceVariant, #ffffff, 55%);
-    }
-}
-
-// Amounts
+//@if $transparency_enabled ==false {
+//    @if $darkmode ==true {
+//        $primary: mix($primary, white, 70%);
+//        $primaryContainer: mix($primaryContainer, white, 90%);
+//        $background: mix(mix($background, $primary, 94%), #000000, 50%);
+//        $surface: mix($surface, $primaryContainer, 98%);
+//        $surfaceVariant: mix($surfaceVariant, #000000, 75%);
+//        // $secondaryContainer: mix($secondaryContainer, $primaryContainer, 90%);
+//    }
+//
+//    @if $darkmode ==false {
+//        $background: mix($background, $primary, 87%);
+//        $surface: mix($surface, $primary, 93%);
+//        $surfaceVariant: mix($surfaceVariant, #ffffff, 25%);
+//    }
+//}
+//
+//@if $transparency_enabled ==true {
+//    @if $darkmode ==true {
+//        $background: mix(mix($background, $primary, 94%), #000000, 50%);
+//        $surface: mix($surface, $primaryContainer, 98%);
+//        $surfaceVariant: mix($surfaceVariant, #000000, 55%);
+//    }
+//
+//    @if $darkmode ==false {
+//        $background: mix($background, $primary, 94%);
+//        $surface: mix($surface, $primary, 93%);
+//        $surfaceVariant: mix($surfaceVariant, #ffffff, 55%);
+//    }
+//}
+//
+//// Amounts
 $transparentize_amount: 0.3;
 $transparentize_surface_amount_less: 0.6;
 $transparentize_surface_amount_less_less: 0.55;
@@ -42,19 +42,19 @@ $transparentize_surface_amount: 0.7;
 $transparentize_surface_amount_more: 0.8;
 $transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount;
 
-@if $darkmode ==true {
-    // Less transparency
-    $transparentize_amount: 0.15;
-    $transparentize_surface_amount_less: 0.5;
-    $transparentize_surface_amount_less_less: 0.55;
-    $transparentize_surface_amount: 0.69;
-    $transparentize_surface_amount_more: 0.9;
-    $transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount;
-}
-
-@if $transparency_enabled ==false {
-    $transparentize_amount: 0;
-}
+//@if $darkmode ==true {
+//    // Less transparency
+//    $transparentize_amount: 0.15;
+//    $transparentize_surface_amount_less: 0.5;
+//    $transparentize_surface_amount_less_less: 0.55;
+//    $transparentize_surface_amount: 0.69;
+//    $transparentize_surface_amount_more: 0.9;
+//    $transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount;
+//}
+//
+//@if $transparency_enabled ==false {
+//    $transparentize_amount: 0;
+//}
 
 // Extended material
 $success: #4f6354;
@@ -114,13 +114,13 @@ $t_onSuccessContainer: transparentize($onErrorContainer,
         $transparentize_amount);
 
 // Others
-$hovercolor: mix($t_surface, $t_onSurface, 50%);
-$activecolor: mix($t_surface, $t_onSurface, 30%);
-$subtext: mix($onBackground, $background, 70%);
+//$hovercolor: #AA0000;//$surfaceContainerHigh;
+//$activecolor: mix($t_surface, $t_onSurface, 30%);
+$subtext: $outline;
 $actiontext: mix($onBackground, $background, 85%);
 
 // Terminal colors
-$termbg: mix($t_surfaceVariant, $t_onSurfaceVariant, 80%);
+$termbg: $surfaceContainerHigh;
 $termfg: $onSurfaceVariant;
 $term0: $t_background;
 $term1: $error;
@@ -129,4 +129,4 @@ $term3: $onPrimaryContainer;
 $term4: $onPrimaryContainer;
 $term5: $onSecondaryContainer;
 $term6: $primary;
-$term7: $onSurfaceVariant;
\ No newline at end of file
+$term7: $onSurfaceVariant;
diff --git a/.config/ags/scss/_lib_mixins.scss b/.config/ags/scss/_lib_mixins.scss
index ba5babffc..88f1cda4d 100644
--- a/.config/ags/scss/_lib_mixins.scss
+++ b/.config/ags/scss/_lib_mixins.scss
@@ -1,6 +1,6 @@
 // Common colors
-$hovercolor: rgba(128, 128, 128, 0.3);
-$activecolor: rgba(128, 128, 128, 0.7);
+$hovercolor: $surfaceContainerHigh;
+$activecolor: $surfaceContainerHighest;
 $rounding_small: 0.818rem;
 $rounding_mediumsmall: 0.955rem;
 $rounding_medium: 1.159rem;
diff --git a/.config/ags/scss/_notifications.scss b/.config/ags/scss/_notifications.scss
index fa3a4ff05..234072be3 100644
--- a/.config/ags/scss/_notifications.scss
+++ b/.config/ags/scss/_notifications.scss
@@ -1,4 +1,4 @@
-$notif_surface: $t_background;
+$notif_surface: $surfaceContainer;
 
 @mixin notif-rounding {
     @include normal-rounding;
@@ -6,7 +6,7 @@ $notif_surface: $t_background;
 
 .notif-low {
     @include notif-rounding;
-    background-color: $l_l_t_surfaceVariant;
+    background-color: $surfaceContainerHigh;
     color: $onSurfaceVariant;
     padding: $rounding_small;
     padding-right: $rounding_small + 0.545rem;
@@ -14,7 +14,7 @@ $notif_surface: $t_background;
 
 .notif-normal {
     @include notif-rounding;
-    background-color: $l_l_t_surfaceVariant;
+    background-color: $surfaceContainerHigh;
     color: $onSurfaceVariant;
     padding: $rounding_small;
     padding-right: $rounding_small + 0.545rem;
@@ -29,21 +29,23 @@ $notif_surface: $t_background;
 }
 
 .notif-clicked-low {
-    background-color: mix($l_l_t_surfaceVariant, $t_onSurfaceVariant, 85%);
+    background-color: $surfaceContainerLow;
 }
 
 .notif-clicked-normal {
-    background-color: mix($l_l_t_surfaceVariant, $t_onSurfaceVariant, 85%);
+    background-color: $surfaceContainerLow;
 }
 
 .notif-clicked-critical {
-    background-color: mix($secondaryContainer, $onSecondaryContainer, 95%);
+    background-color: $onSecondary;
+    color: $onSecondaryContainer;
 }
 
 .popup-notif-low {
     @include notif-rounding;
     min-width: 30.682rem;
     background-color: $notif_surface;
+    border: 0.034rem solid $outlineVariant;
     color: $onSurfaceVariant;
     padding: $rounding_small;
     padding-right: $rounding_small + 0.545rem;
@@ -53,6 +55,7 @@ $notif_surface: $t_background;
     @include notif-rounding;
     min-width: 30.682rem;
     background-color: $notif_surface;
+    border: 0.034rem solid $outlineVariant;
     color: $onSurfaceVariant;
     padding: $rounding_small;
     padding-right: $rounding_small + 0.545rem;
@@ -62,29 +65,31 @@ $notif_surface: $t_background;
     @include notif-rounding;
     min-width: 30.682rem;
     background-color: $secondaryContainer;
+    border: 0.034rem solid $onSecondaryContainer;
     color: $onSecondaryContainer;
     padding: $rounding_small;
     padding-right: $rounding_small + 0.545rem;
 }
 
 .popup-notif-clicked-low {
-    background-color: mix($notif_surface, $onBackground, 94%);
+    background-color: $surfaceContainerLow;
 }
 
 .popup-notif-clicked-normal {
-    background-color: mix($notif_surface, $onBackground, 94%);
+    background-color: $surfaceContainerLow;
 }
 
 .popup-notif-clicked-critical {
-    background-color: mix($secondaryContainer, $onSecondaryContainer, 96%);
+    background-color: $onSecondary;
+    color: $onSecondaryContainer;
 }
 
 .notif-body-low {
-    color: mix($onSurfaceVariant, $surfaceVariant, 67%);
+    color: $outline;
 }
 
 .notif-body-normal {
-    color: mix($onSurfaceVariant, $surfaceVariant, 67%);
+    color: $outline;
 }
 
 .notif-body-critical {
@@ -99,23 +104,23 @@ $notif_surface: $t_background;
 }
 
 .notif-icon-material {
-    background-color: $t_secondaryContainer;
+    background-color: $secondaryContainer;
     color: $onSecondaryContainer;
 }
 
 .notif-icon-material-low {
-    background-color: $t_secondaryContainer;
+    background-color: $secondaryContainer;
     color: $onSecondaryContainer;
 }
 
 .notif-icon-material-normal {
-    background-color: $t_secondaryContainer;
+    background-color: $secondaryContainer;
     color: $onSecondaryContainer;
 }
 
 .notif-icon-material-critical {
-    background-color: $t_onSecondaryContainer;
-    color: $secondaryContainer;
+    background-color: $secondary;
+    color: $onSecondary;
 }
 
 .notif-expand-btn {
@@ -163,8 +168,7 @@ $notif_surface: $t_background;
 
 .osd-notif {
     @include notif-rounding;
-    background-color: transparentize($background,
-            $transparentize_surface_amount_subtract_surface );
+    background-color: $background;
     min-width: 30.682rem;
 }
 
@@ -201,43 +205,43 @@ $notif_surface: $t_background;
 }
 
 .notif-action-low {
-    background-color: mix($t_onSurfaceVariant, $t_surface, 10%);
+    background-color: $surfaceContainerHighest;
     color: $onSurfaceVariant;
 }
 
 .notif-action-low:focus,
 .notif-action-low:hover {
-    background-color: $hovercolor;
+    border: 0.040rem solid $outlineVariant;
 }
 
 .notif-action-low:active {
-    background-color: $activecolor;
+    background-color: $surfaceBright;
 }
 
 .notif-action-normal {
-    background-color: mix($t_onSurfaceVariant, $t_surface, 10%);
+    background-color: $surfaceContainerHighest;
     color: $onSurfaceVariant;
 }
 
 .notif-action-normal:focus,
 .notif-action-normal:hover {
-    background-color: $hovercolor;
+    border: 0.040rem solid $outlineVariant;
 }
 
 .notif-action-normal:active {
-    background-color: $activecolor;
+    background-color: $surfaceBright;
 }
 
 .notif-action-critical {
-    background-color: mix($t_onSecondaryContainer, $t_secondaryContainer, 10%);
+    background-color: mix($secondary, $onSecondary, 30%);
     color: $onSurfaceVariant;
 }
 
 .notif-action-critical:focus,
 .notif-action-critical:hover {
-    background-color: mix($t_onSecondaryContainer, $t_secondaryContainer, 18%);
+    border: 0.040rem solid $outline;
 }
 
 .notif-action-critical:active {
-    background-color: mix($t_onSecondaryContainer, $t_secondaryContainer, 23%);
-}
\ No newline at end of file
+    background-color: mix($secondary, $onSecondary, 40%);
+}
diff --git a/.config/ags/scss/_overview.scss b/.config/ags/scss/_overview.scss
index 8afa43b81..137317abc 100644
--- a/.config/ags/scss/_overview.scss
+++ b/.config/ags/scss/_overview.scss
@@ -11,7 +11,7 @@
     min-height: 3.409rem;
     padding: 0rem 1.364rem;
     padding-right: 2.864rem;
-    background-color: $t_background;
+    background-color: $background;
     color: $onBackground;
 
     selection {
@@ -53,8 +53,8 @@
     @include elevation2;
     min-width: 28.773rem;
     padding: 0.682rem;
-    background-color: $t_background;
-    color: $onBackground;
+    background-color: $surfaceContainerLow;
+    color: $onSurface;
 }
 
 .overview-search-results-icon {
@@ -97,7 +97,7 @@
     @include elevation-border;
     @include elevation2;
     padding: 0.341rem;
-    background-color: $t_background;
+    background-color: $background;
     color: $onBackground;
 }
 
@@ -105,35 +105,37 @@
     @include normal-rounding;
     // @include elevation-border;
     margin: 0.341rem;
-    background-color: mix($t_t_surface, $t_onSurface, 93%);
+    background-color: $surfaceContainerLow;
 }
 
 .overview-tasks-workspace-number {
     @include mainfont;
-    color: mix($t_onSurface, $t_surface, 93%);
+    color: $onSurfaceVariant;
 }
 
 .overview-tasks-window {
     @include normal-rounding;
     @include menu_decel;
-    background-color: $t_surfaceVariant;
-    color: $onSecondaryContainer;
-    border: 0.068rem solid $t_t_t_onSecondaryContainer;
+    background-color: $surfaceContainerHigh;
+    color: $onSurface;
+    border: 0.068rem solid $outlineVariant;
 }
 
 .overview-tasks-window:hover,
 .overview-tasks-window:focus {
-    background-color: mix($l_t_secondaryContainer, $primary, 95%);
+    background-color: $secondaryContainer;
 }
 
 .overview-tasks-window:active {
-    background-color: mix($l_t_secondaryContainer, $primary, 90%);
+    background-color: $tertiaryContainer;
+    background-color: mix($secondaryContainer, $hovercolor, 70%);
 }
 
 .overview-tasks-window-selected {
-    background-color: mix($l_t_secondaryContainer, $primary, 90%);
+    background-color: $tertiaryContainer;
+    background-color: mix($secondaryContainer, $hovercolor, 70%);
 }
 
 .overview-tasks-window-dragging {
     opacity: 0.2;
-}
\ No newline at end of file
+}
diff --git a/.config/ags/scss/_sidebars.scss b/.config/ags/scss/_sidebars.scss
index 1989c9cb8..218946e0a 100644
--- a/.config/ags/scss/_sidebars.scss
+++ b/.config/ags/scss/_sidebars.scss
@@ -1,5 +1,5 @@
 $sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%);
-$textboxColor: mix($surface, $surfaceVariant, 80%);
+$textboxColor: $surfaceContainerHigh;
 $system: $secondary;
 $onSystem: $onSecondary;
 $chatgpt: $primary;
@@ -16,7 +16,7 @@ $onChatgpt: $onPrimary;
     border-radius: $rounding_large - $elevation_margin + 0.068rem;
     min-width: 27.818rem; // COMMENT THIS LATER IF TEXT WRAP IS USED
     // min-height: 29.591rem;
-    background-color: $t_background;
+    background-color: $background;
     padding: 1.023rem;
 }
 
@@ -37,7 +37,7 @@ $onChatgpt: $onPrimary;
     border-radius: $rounding_large - $elevation_margin + 0.068rem;
     min-width: 27.818rem; // COMMENT THIS LATER IF TEXT WRAP IS USED
     // min-height: 29.591rem;
-    background-color: $t_background;
+    background-color: $background;
     padding: 1.023rem;
 }
 
@@ -54,12 +54,12 @@ $onChatgpt: $onPrimary;
 .sidebar-group {
     @include normal-rounding;
     @include group-padding;
-    background-color: $t_surface;
+    background-color: $surfaceContainer;
 }
 
 .sidebar-group-nopad {
     @include normal-rounding;
-    background-color: $t_surface;
+    background-color: $surfaceContainer;
 }
 
 .sidebar-group-invisible {
@@ -73,7 +73,7 @@ $onChatgpt: $onPrimary;
 .sidebar-togglesbox {
     @include full-rounding;
     @include group-padding;
-    background-color: $t_surface;
+    background-color: $surfaceContainer;
 }
 
 .sidebar-iconbutton {
@@ -96,8 +96,6 @@ $onChatgpt: $onPrimary;
 .sidebar-button {
     @include element_decel;
     padding: 0rem $rounding_small;
-    background-color: $t_secondaryContainer;
-    color: $onSecondaryContainer;
 }
 
 .sidebar-button:hover,
@@ -206,16 +204,16 @@ $onChatgpt: $onPrimary;
         @include element_decel;
         min-width: 0.273rem;
         min-height: 2.045rem;
-        background-color: $t_onSurfaceVariant;
+        background-color: transparentize($onSurfaceVariant, 0.7);
     }
 
     slider:hover,
     slider:focus {
-        background-color: mix($t_onSurfaceVariant, $onSurfaceVariant, 80%);
+        background-color: transparentize($onSurfaceVariant, 0.6);
     }
 
     slider:active {
-        background-color: mix($onSurfaceVariant, $surfaceVariant, 50%);
+        background-color: transparentize($onSurface, 0.5);
     }
 }
 
@@ -256,7 +254,7 @@ $onChatgpt: $onPrimary;
 }
 
 .sidebar-calendar-btn-othermonth {
-    color: mix($onSurface, $surface, 50%);
+    color: $outline;
 }
 
 .sidebar-calendar-header {
@@ -267,19 +265,17 @@ $onChatgpt: $onPrimary;
     @include full-rounding;
     @include element_decel;
     padding: 0rem 0.682rem;
-    background-color: $t_surfaceVariant;
-    color: $onSurfaceVariant;
+    background-color: $surfaceContainer;
+    color: $outline;
 }
 
 .sidebar-calendar-monthyear-btn:hover,
 .sidebar-calendar-monthyear-btn:focus {
     background-color: $hovercolor;
-    color: mix($onSurfaceVariant, $surfaceVariant, 95%);
 }
 
 .sidebar-calendar-monthyear-btn:active {
     background-color: $activecolor;
-    color: mix($onSurfaceVariant, $surfaceVariant, 85%);
 }
 
 .sidebar-calendar-monthshift-btn {
@@ -287,18 +283,16 @@ $onChatgpt: $onPrimary;
     @include element_decel;
     min-width: 2.045rem;
     min-height: 2.045rem;
-    background-color: $t_surfaceVariant;
-    color: $onSurfaceVariant;
+    background-color: $surfaceContainer;
+    color: $outline;
 }
 
 .sidebar-calendar-monthshift-btn:hover {
     background-color: $hovercolor;
-    color: mix($onSurfaceVariant, $surfaceVariant, 95%);
 }
 
 .sidebar-calendar-monthshift-btn:active {
     background-color: $activecolor;
-    color: mix($onSurfaceVariant, $surfaceVariant, 85%);
 }
 
 .sidebar-selector-tab {
@@ -337,10 +331,6 @@ $onChatgpt: $onPrimary;
     padding-right: 0.545rem;
 }
 
-.sidebar-todo-item-even {
-    background-color: $t_t_surfaceVariant;
-}
-
 .sidebar-todo-item-action {
     @include element_decel;
     border-radius: 9999px;
@@ -373,7 +363,6 @@ $onChatgpt: $onPrimary;
 .sidebar-todo-new {
     @include full-rounding;
     @include element_decel;
-    color: $onSecondaryContainer;
     margin: 0.341rem;
     padding: 0.205rem 0.545rem;
     border: 0.068rem solid $onSurface;
@@ -381,11 +370,13 @@ $onChatgpt: $onPrimary;
 
 .sidebar-todo-new,
 .sidebar-todo-new:focus {
-    background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 97%);
+    color: $onSecondaryContainer;
+    background-color: $secondaryContainer;
 }
 
 .sidebar-todo-new:active {
-    background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
+    color: $onPrimaryContainer;
+    background-color: $primaryContainer;
 }
 
 .sidebar-todo-add {
@@ -399,11 +390,11 @@ $onChatgpt: $onPrimary;
 
 .sidebar-todo-add:hover,
 .sidebar-todo-add:focus {
-    background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 97%);
+    background-color: $surfaceContainerHigh;
 }
 
 .sidebar-todo-add:active {
-    background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
+    background-color: $surfaceContainerHighest;
 }
 
 .sidebar-todo-add-available {
@@ -418,11 +409,11 @@ $onChatgpt: $onPrimary;
 
 .sidebar-todo-add-available:hover,
 .sidebar-todo-add-available:focus {
-    background-color: mix($primary, $onPrimary, 97%);
+    background-color: mix($primary, $hovercolor, 70%);
 }
 
 .sidebar-todo-add-available:active {
-    background-color: mix($primary, $onPrimary, 80%);
+    background-color: mix($primary, $hovercolor, 40%);
 }
 
 .sidebar-todo-entry {
@@ -435,24 +426,24 @@ $onChatgpt: $onPrimary;
     min-height: 1.773rem;
     min-width: 0rem;
     padding: 0.205rem 0.682rem;
-    border: 0.068rem solid mix($onSurfaceVariant, $surfaceVariant, 50%);
+    border: 0.068rem solid $outline;
 }
 
 .sidebar-todo-entry:focus {
-    border: 0.068rem solid mix($onSurfaceVariant, $surfaceVariant, 90%);
+    border: 0.068rem solid $onSurfaceVariant;
 }
 
 .sidebar-module {
     @include normal-rounding;
     @include group-padding;
-    background-color: $l_l_t_surfaceVariant;
+    background-color: $surfaceContainer;
     padding: 0.682rem;
 }
 
 .sidebar-module-btn-arrow {
     @include full-rounding;
     @include icon-material;
-    background-color: $l_l_t_surfaceVariant;
+    background-color: $surfaceContainerHigh;
     min-width: 1.705rem;
     min-height: 1.705rem;
 
@@ -464,7 +455,7 @@ $onChatgpt: $onPrimary;
 .sidebar-module-scripts-button {
     @include full-rounding;
     @include icon-material;
-    background-color: $l_l_t_surfaceVariant;
+    background-color: $surfaceContainer;
     min-width: 1.705rem;
     min-height: 1.705rem;
 
@@ -540,7 +531,7 @@ $colorpicker_rounding: 0.341rem;
 .sidebar-chat-apiswitcher {
     @include full-rounding;
     @include group-padding;
-    background-color: $t_surface;
+    background-color: $surfaceContainer;
 }
 
 .sidebar-chat-apiswitcher-icon {
@@ -605,11 +596,11 @@ $colorpicker_rounding: 0.341rem;
 
 .sidebar-chat-send:hover,
 .sidebar-chat-send:focus {
-    background-color: $surfaceVariant;
+    background-color: $surfaceBright;
 }
 
 .sidebar-chat-send:active {
-    background-color: mix($surfaceVariant, $onBackground, 80%);
+    background-color: $surfaceVariant;
 }
 
 .sidebar-chat-send-available {
@@ -619,11 +610,11 @@ $colorpicker_rounding: 0.341rem;
 
 .sidebar-chat-send-available:hover,
 .sidebar-chat-send-available:focus {
-    background-color: mix($primary, $onPrimary, 97%);
+    background-color: mix($primary, $hovercolor, 70%);
 }
 
 .sidebar-chat-send-available:active {
-    background-color: mix($primary, $onPrimary, 80%);
+    background-color: mix($primary, $hovercolor, 40%);
 }
 
 .sidebar-chat-message {
@@ -683,17 +674,17 @@ $colorpicker_rounding: 0.341rem;
     background-color: $termbg;
     color: $termfg;
     margin: 0rem 0.682rem;
-    border: 0.068rem solid $t_t_t_onSecondaryContainer;
+    border: 0.068rem solid $outlineVariant;
 }
 
 .sidebar-chat-codeblock-topbar {
     @include mainfont;
     margin: 0.273rem;
     margin-bottom: 0rem;
-    background-color: mix($t_secondaryContainer, $t_onSurfaceVariant, 30%);
+    background-color: $secondaryContainer;
     color: $onSecondaryContainer;
     border-radius: $rounding_medium - 0.273rem;
-    border: 0.068rem solid mix($secondaryContainer, $onSecondaryContainer, 90%);
+    border: 0.068rem solid $outlineVariant;
     border-top-left-radius: $rounding_small + 0.068rem;
     border-top-right-radius: $rounding_small + 0.068rem;
     padding: 0.341rem 0.477rem;
@@ -712,11 +703,11 @@ $colorpicker_rounding: 0.341rem;
 
 .sidebar-chat-codeblock-topbar-btn:hover,
 .sidebar-chat-codeblock-topbar-btn:focus {
-    background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
+    background-color: mix($secondaryContainer, $onSecondaryContainer, 90%);
 }
 
 .sidebar-chat-codeblock-topbar-btn:active {
-    background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%);
+    background-color: mix($secondaryContainer, $onSecondaryContainer, 80%);
 }
 
 .sidebar-chat-codeblock-code {
@@ -824,11 +815,11 @@ $colorpicker_rounding: 0.341rem;
 
 .sidebar-pin-enabled:hover,
 .sidebar-pin-enabled:focus {
-    background-color: mix($primary, $onPrimary, 90%);
+    background-color: mix($primary, $hovercolor, 70%);
 }
 
 .sidebar-pin-enabled:active {
-    background-color: mix($primary, $onPrimary, 80%);
+    background-color: mix($primary, $hovercolor, 40%);
 }
 
 .sidebar-waifu-heading {