From eaa66c4a95f44024c6c58306bc7147ada69129b1 Mon Sep 17 00:00:00 2001
From: midn8hustlr <4visekh@gmail.com>
Date: Sun, 17 Mar 2024 05:38:55 +0530
Subject: [PATCH] Simplify scss more, remove transparent colors for better
 support for transparent mode

---
 .../modules/.commonwidgets/configwidgets.js   |   1 -
 .config/ags/scss/_bar.scss                    |   3 +-
 .config/ags/scss/_colors.scss                 | 180 ++----------------
 .config/ags/scss/_common.scss                 |   2 +
 .config/ags/scss/_dock.scss                   |   6 +-
 .config/ags/scss/_lib_mixins.scss             |  24 +--
 .config/ags/scss/_material.scss               |  92 ++++-----
 .config/ags/scss/_osd.scss                    |   1 +
 .config/ags/scss/_osk.scss                    |   4 +-
 .config/ags/scss/_session.scss                |   2 +-
 .config/ags/scss/_sidebars.scss               |   2 +-
 11 files changed, 86 insertions(+), 231 deletions(-)

diff --git a/.config/ags/modules/.commonwidgets/configwidgets.js b/.config/ags/modules/.commonwidgets/configwidgets.js
index 243d7bf9..c314e508 100644
--- a/.config/ags/modules/.commonwidgets/configwidgets.js
+++ b/.config/ags/modules/.commonwidgets/configwidgets.js
@@ -135,7 +135,6 @@ export const ConfigMulipleSelection = ({
     const widget = Box({
         tooltipText: desc,
         className: 'multipleselection-container spacing-v-3',
-        //homogeneous: true,
         vertical: true,
         children: optionsArr.map((options, grp) => {
           return Box({
diff --git a/.config/ags/scss/_bar.scss b/.config/ags/scss/_bar.scss
index 7e95b701..e204c508 100644
--- a/.config/ags/scss/_bar.scss
+++ b/.config/ags/scss/_bar.scss
@@ -361,6 +361,7 @@ $bar_ws_width_focus_active: 2.045rem;
 
 .bar-statusicons-active {
     background-color: $layer0Active;
+    color: $onLayer0Active;
 }
 
 .bar-util-btn {
@@ -391,6 +392,6 @@ $bar_ws_width_focus_active: 2.045rem;
     min-height: 1.032rem;
     min-width: 1.032rem;
     font-size: 1.032rem;
-    color: $barspacerightOnLayer0;
+    //color: $barspacerightOnLayer0;
     padding: 0.205rem 0.341rem;
 }
diff --git a/.config/ags/scss/_colors.scss b/.config/ags/scss/_colors.scss
index 52a4ca36..e46632b5 100644
--- a/.config/ags/scss/_colors.scss
+++ b/.config/ags/scss/_colors.scss
@@ -1,61 +1,6 @@
-///////////// COLOR MODIFICATIONS /////////////
-// Material colors provide excellent readability, but can be uninteresting.
-// 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
-$transparency: 0.7;
+$transparency: 0.5;
 $transparentize_amount: 0.3;
-$transparentize_surface_amount_less: 0.6;
-$transparentize_surface_amount_less_less: 0.55;
 $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;
-//}
 
 // Extended material
 $success: #4f6354;
@@ -71,8 +16,12 @@ $onSuccessContainer: #0c1f13;
     $onSuccessContainer: #d1e9d6;
 }
 
-@if $transparent == True {
+// Transparent versions
+$t_background: transparentize($background, $transparentize_amount);
+$t_surface: transparentize($surface, $transparentize_surface_amount);
+$t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount);
 
+@if $transparent == True {
   $background: transparentize($background, $transparency);
   $surface: transparentize($surface, $transparency);
   $surfaceDim: transparentize($surfaceDim, $transparency);
@@ -87,52 +36,7 @@ $onSuccessContainer: #0c1f13;
   $surfaceTint: transparentize($surfaceTint, $transparency);
 }
 
-// Transparent versions
-$t_primary: transparentize($primary, $transparentize_amount);
-$t_onPrimary: transparentize($onPrimary, $transparentize_amount);
-$t_primaryContainer: transparentize($primaryContainer, $transparentize_amount);
-$t_onPrimaryContainer: transparentize($onPrimaryContainer, $transparentize_amount);
-$t_secondary: transparentize($secondary, $transparentize_amount);
-$t_onSecondary: transparentize($onSecondary, $transparentize_amount);
-$t_secondaryContainer: transparentize($secondaryContainer, $transparentize_amount);
-$l_t_secondaryContainer: transparentize($secondaryContainer, $transparentize_surface_amount_less);
-$t_onSecondaryContainer: transparentize($onSecondaryContainer, $transparentize_amount);
-$t_t_t_onSecondaryContainer: transparentize($onSecondaryContainer, 0.93);
-$t_tertiary: transparentize($tertiary, $transparentize_amount);
-$t_onTertiary: transparentize($onTertiary, $transparentize_amount);
-$t_tertiaryContainer: transparentize($tertiaryContainer, $transparentize_amount);
-$t_onTertiaryContainer: transparentize($onTertiaryContainer, $transparentize_amount);
-$t_error: transparentize($error, $transparentize_amount);
-$t_onError: transparentize($onError, $transparentize_amount);
-$t_errorContainer: transparentize($errorContainer, $transparentize_amount);
-$t_onErrorContainer: transparentize($onErrorContainer, $transparentize_amount);
-//$t_colorbarbg: transparentize($colorbarbg, $transparentize_amount);
-$t_background: transparentize($background, $transparentize_amount);
-$t_t_background: transparentize($background, $transparentize_surface_amount_more);
-$t_onBackground: transparentize($onBackground, $transparentize_amount);
-$t_surface: transparentize($surface, $transparentize_surface_amount);
-$t_t_surface: transparentize($surface, $transparentize_surface_amount_more);
-$t_onSurface: transparentize($onSurface, $transparentize_surface_amount);
-$t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount);
-$t_onSurfaceVariant: transparentize($onSurfaceVariant, $transparentize_surface_amount);
-$t_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_more);
-$l_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_less);
-$l_l_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_less_less);
-$t_outline: transparentize($outline, $transparentize_amount);
-$t_shadow: transparentize($shadow, $transparentize_amount);
-$t_inverseSurface: transparentize($inverseSurface, $transparentize_amount);
-$t_inverseOnSurface: transparentize($inverseOnSurface, $transparentize_amount);
-$t_inversePrimary: transparentize($inversePrimary, $transparentize_amount);
-// Transparent material (extended)
-$t_success: transparentize($error, $transparentize_amount);
-$t_onSuccess: transparentize($onError, $transparentize_amount);
-$t_successContainer: transparentize($errorContainer, $transparentize_amount);
-$t_onSuccessContainer: transparentize($onErrorContainer,
-        $transparentize_amount);
-
 // Others
-//$hovercolor: #AA0000;//$surfaceContainerHigh;
-//$activecolor: mix($t_surface, $t_onSurface, 30%);
 $subtext: $outline;
 $actiontext: mix($onBackground, $background, 85%);
 $black: black;
@@ -141,7 +45,7 @@ $white: white;
 // Terminal colors
 $termbg: $surfaceContainerHigh;
 $termfg: $onSurfaceVariant;
-$term0: $t_background;
+$term0: $background;
 $term1: $error;
 $term2: $inversePrimary;
 $term3: $onPrimaryContainer;
@@ -152,17 +56,18 @@ $term7: $onSurfaceVariant;
 
 /// Color mappings for more chaotic, dynamic colors like the average rice ///
 // General
-$layer0: $t_background;
+$layer0: $background;
 $onLayer0: $onBackground;
 $layer0Hover: mix($layer0, $onLayer0, 85%);
-$layer0Active: mix($layer0, $onLayer0, 70%);
+$layer0Active: $primary;
+$onLayer0Active: $onPrimary;
 $onLayer0Inactive: mix($onLayer0, $layer0, 70%);
-$layer1: $surface;
+$layer1: $surfaceContainer;
 $onLayer1: $onSurface;
 $onLayer1Inactive: mix($onLayer1, $layer1, 45%);
 $onLayer1: $onSurfaceVariant;
-$layer2: $surfaceVariant;
-$onLayer2: $onSurfaceVariant;
+$layer2: $secondaryContainer;
+$onLayer2: $onSecondaryContainer;
 $layer2Hover: mix($layer2, $onSurfaceVariant, 90%);
 $layer2Active: mix($layer2, $onSurfaceVariant, 80%);
 // Elements
@@ -189,9 +94,9 @@ $battOnLayer1: $onLayer1;
 $battLayer2: $secondaryContainer;
 $battOnLayer2: $onSecondaryContainer;
 $workspaceOnLayer1Inactive: $onLayer1Inactive;
-$workspaceLayer3: $secondaryContainer;
-$workspaceOnLayer3: $onSecondaryContainer;
-$workspaceOnLayer2: $onSurfaceVariant;
+$workspaceLayer3: $primary;
+$workspaceOnLayer3: $onPrimary;
+$workspaceOnLayer2: $onSecondaryContainer;
 $trayOnLayer0: $onLayer0;
 $cheatsheetTitle: $onSecondaryContainer;
 $cheatsheetColors: (
@@ -205,56 +110,3 @@ $cheatsheetColors: (
     $onSecondaryContainer
 );
 
-///////////////////// test theme: amarena (kind of) /////////////////////////
-// $layer0: #0e1116;
-// $onLayer0: #FFFFFF;
-// $layer0Hover: mix($layer0, $onLayer0, 85%);
-// $layer0Active: mix($layer0, $onLayer0, 70%);
-// $layer1: #171c22;
-// $onLayer1Inactive: mix($onLayer1, $layer1, 45%);
-// $onLayer1: $onSurfaceVariant;
-// $layer2: #252c35;
-// $onLayer2: $onSurfaceVariant;
-// $layer2Hover: mix($layer2, $onSurfaceVariant, 90%);
-// $layer2Active: mix($layer2, $onSurfaceVariant, 80%);
-// $layer3: #1C232A;
-// // Bar
-// $windowtitleOnLayer0Inactive: #70afa4;
-// $windowtitleOnLayer0: #7FE3D1;
-// $barspacerightOnLayer0: #7FE3D1;
-// $timeOnLayer1: #cc7691;
-// $dateOnLayer1: #cc7691;
-// $ramOnLayer1: #6DC0D5;
-// $ramLayer2: $layer2;
-// $ramOnLayer2: #6DC0D5;
-// $swapOnLayer1: #CC83C7;
-// $swapLayer2: $layer2;
-// $swapOnLayer2: #CC83C7;
-// $cpuOnLayer1: #FA6295;
-// $cpuLayer2: $layer2;
-// $cpuOnLayer2: #FA6295;
-// $musicOnLayer1: #94CF95;
-// $musicLayer2: $layer2;
-// $musicOnLayer2: #94CF95;
-// $utilsLayer2: $layer2;
-// $utilsOnLayer2: #CC83C7;
-// $battOnLayer1: #94CF95;
-// $battLayer2: $layer2;
-// $battOnLayer2: #94CF95;
-// $workspaceOnLayer1Inactive: $onLayer1Inactive;
-// $workspaceLayer3: #33554f;
-// $workspaceOnLayer3: #7FE3D1;
-// $workspaceOnLayer2: #7FE3D1;
-// $trayOnLayer0: #6DC0D5;
-// // Cheatsheet
-// $cheatsheetTitle: #6DC0D4;
-// $cheatsheetColors: (
-//     #F692B2,
-//     #6EC1D6,
-//     #CD84C8,
-//     #7FE4D2,
-//     #94CF95,
-//     #CD84C8,
-//     #FB6396,
-//     #6EC1D6
-// );
diff --git a/.config/ags/scss/_common.scss b/.config/ags/scss/_common.scss
index 8717b135..c4ee86c5 100644
--- a/.config/ags/scss/_common.scss
+++ b/.config/ags/scss/_common.scss
@@ -216,11 +216,13 @@ popover {
     @include small-rounding;
     padding: 0rem 0.341rem;
     border: 0.034rem solid $outlineVariant;
+    color: $onSurface;
 }
 
 .multipleselection-btn:focus,
 .multipleselection-btn:hover {
     background-color: $hovercolor;
+    color: $onSurface;
 }
 
 .multipleselection-btn-enabled {
diff --git a/.config/ags/scss/_dock.scss b/.config/ags/scss/_dock.scss
index 2965726a..19779f5b 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($t_surface, $t_onSurface, 95%);
+    background-color: mix($t_surface, $onSurface, 95%);
 }
 
 .dock-app-btn:active {
-    background-color: mix($t_surface, $t_onSurface, 85%);
+    background-color: mix($t_surface, $onSurface, 85%);
 }
 
 .dock-app-icon {
@@ -28,4 +28,4 @@
 .dock-separator {
     min-width: 0.068rem;
     background-color: $surfaceVariant;
-}
\ No newline at end of file
+}
diff --git a/.config/ags/scss/_lib_mixins.scss b/.config/ags/scss/_lib_mixins.scss
index b0c9576e..b6e7b8bd 100644
--- a/.config/ags/scss/_lib_mixins.scss
+++ b/.config/ags/scss/_lib_mixins.scss
@@ -190,24 +190,24 @@ $overlay1: mix($onSurface, rgba(0, 0, 0, 0), 25%);
 $overlay2: mix($onSurface, rgba(0, 0, 0, 0), 40%);
 
 @mixin elevation-border-softer {
-    border-top: 1px solid mix($t_t_surface, $t_onSurface, 90%);
-    border-left: 1px solid mix($t_t_surface, $t_onSurface, 90%);
-    border-right: 1px solid mix($t_t_surface, $t_onSurface, 95%);
-    border-bottom: 1px solid mix($t_t_surface, $t_onSurface, 95%);
+    border-top: 1px solid mix($t_surface, $onSurface, 90%);
+    border-left: 1px solid mix($t_surface, $onSurface, 90%);
+    border-right: 1px solid mix($t_surface, $onSurface, 95%);
+    border-bottom: 1px solid mix($t_surface, $onSurface, 95%);
 }
 
 @mixin elevation-border {
-    border-top: 1px solid mix($t_t_surface, $onSurface, 90%);
-    border-left: 1px solid mix($t_t_surface, $onSurface, 90%);
-    border-right: 1px solid mix($t_t_surface, $onSurface, 95%);
-    border-bottom: 1px solid mix($t_t_surface, $onSurface, 95%);
+    border-top: 1px solid mix($t_surface, $onSurface, 80%);
+    border-left: 1px solid mix($t_surface, $onSurface, 80%);
+    border-right: 1px solid mix($t_surface, $onSurface, 85%);
+    border-bottom: 1px solid mix($t_surface, $onSurface, 85%);
 }
 
 @mixin elevation-border-heavier {
-    border-top: 1px solid mix($t_t_surface, $onSurface, 80%);
-    border-left: 1px solid mix($t_t_surface, $onSurface, 80%);
-    border-right: 1px solid mix($t_t_surface, $onSurface, 85%);
-    border-bottom: 1px solid mix($t_t_surface, $onSurface, 85%);
+    border-top: 1px solid mix($t_surface, $onSurface, 70%);
+    border-left: 1px solid mix($t_surface, $onSurface, 70%);
+    border-right: 1px solid mix($t_surface, $onSurface, 75%);
+    border-bottom: 1px solid mix($t_surface, $onSurface, 75%);
 }
 
 @mixin elevation-border-transparent {
diff --git a/.config/ags/scss/_material.scss b/.config/ags/scss/_material.scss
index 766ee832..9f9a981f 100644
--- a/.config/ags/scss/_material.scss
+++ b/.config/ags/scss/_material.scss
@@ -1,56 +1,56 @@
 $darkmode: True;
 $transparent: False;
-$primary_paletteKeyColor: #727C35;
-$secondary_paletteKeyColor: #76795C;
-$tertiary_paletteKeyColor: #537F73;
-$neutral_paletteKeyColor: #78786D;
-$neutral_variant_paletteKeyColor: #77786A;
-$background: #13140D;
-$onBackground: #E4E3D6;
-$surface: #13140D;
-$surfaceDim: #13140D;
-$surfaceBright: #393A31;
+$primary_paletteKeyColor: #427DA3;
+$secondary_paletteKeyColor: #687987;
+$tertiary_paletteKeyColor: #7D7195;
+$neutral_paletteKeyColor: #73777B;
+$neutral_variant_paletteKeyColor: #71787E;
+$background: #101417;
+$onBackground: #DFE3E8;
+$surface: #101417;
+$surfaceDim: #101417;
+$surfaceBright: #353A3E;
 $surfaceContainerLowest: #FFFFFF;
-$surfaceContainerLow: #1B1C14;
-$surfaceContainer: #1F2018;
-$surfaceContainerHigh: #2A2B22;
-$surfaceContainerHighest: #35352D;
-$onSurface: #E4E3D6;
-$surfaceVariant: #47483B;
-$onSurfaceVariant: #C8C7B7;
-$inverseSurface: #E4E3D6;
-$inverseOnSurface: #303129;
-$outline: #919283;
-$outlineVariant: #47483B;
+$surfaceContainerLow: #181C20;
+$surfaceContainer: #1C2024;
+$surfaceContainerHigh: #262A2E;
+$surfaceContainerHighest: #313539;
+$onSurface: #DFE3E8;
+$surfaceVariant: #41484D;
+$onSurfaceVariant: #C1C7CE;
+$inverseSurface: #DFE3E8;
+$inverseOnSurface: #2D3135;
+$outline: #8B9198;
+$outlineVariant: #41484D;
 $shadow: #000000;
 $scrim: #000000;
-$surfaceTint: #C2CD7C;
-$primary: #C2CD7C;
-$onPrimary: #2D3400;
-$primaryContainer: #434B06;
-$onPrimaryContainer: #DEE995;
-$inversePrimary: #5A631F;
-$secondary: #C6C9A7;
-$onSecondary: #2F321A;
-$secondaryContainer: #484B31;
-$onSecondaryContainer: #E4E7C3;
-$tertiary: #A2D0C2;
-$onTertiary: #06372E;
-$tertiaryContainer: #6D9A8D;
+$surfaceTint: #94CDF7;
+$primary: #94CDF7;
+$onPrimary: #00344D;
+$primaryContainer: #004C6D;
+$onPrimaryContainer: #C8E6FF;
+$inversePrimary: #246488;
+$secondary: #B7C9D8;
+$onSecondary: #21323F;
+$secondaryContainer: #384956;
+$onSecondaryContainer: #D3E5F5;
+$tertiary: #CEC0E8;
+$onTertiary: #352B4B;
+$tertiaryContainer: #978BB0;
 $onTertiaryContainer: #000000;
 $error: #FFB4AB;
 $onError: #690005;
 $errorContainer: #93000A;
 $onErrorContainer: #FFDAD6;
-$primaryFixed: #DEE995;
-$primaryFixedDim: #C2CD7C;
-$onPrimaryFixed: #191E00;
-$onPrimaryFixedVariant: #434B06;
-$secondaryFixed: #E2E5C2;
-$secondaryFixedDim: #C6C9A7;
-$onSecondaryFixed: #1A1D07;
-$onSecondaryFixedVariant: #46492F;
-$tertiaryFixed: #BDECDE;
-$tertiaryFixedDim: #A2D0C2;
-$onTertiaryFixed: #00201A;
-$onTertiaryFixedVariant: #224E44;
+$primaryFixed: #C8E6FF;
+$primaryFixedDim: #94CDF7;
+$onPrimaryFixed: #001E2E;
+$onPrimaryFixedVariant: #004C6D;
+$secondaryFixed: #D3E5F5;
+$secondaryFixedDim: #B7C9D8;
+$onSecondaryFixed: #0B1D29;
+$onSecondaryFixedVariant: #384956;
+$tertiaryFixed: #E9DDFF;
+$tertiaryFixedDim: #CEC0E8;
+$onTertiaryFixed: #1F1635;
+$onTertiaryFixedVariant: #4B4163;
diff --git a/.config/ags/scss/_osd.scss b/.config/ags/scss/_osd.scss
index 99a279b4..6a9d8b8f 100644
--- a/.config/ags/scss/_osd.scss
+++ b/.config/ags/scss/_osd.scss
@@ -169,6 +169,7 @@
     @include icon-material;
     min-width: 1.705rem;
     min-height: 1.705rem;
+    color: $onSurface;
 
     &:hover {
         background-color: $surfaceContainerHigh;
diff --git a/.config/ags/scss/_osk.scss b/.config/ags/scss/_osk.scss
index d5e62fff..fc22cfe6 100644
--- a/.config/ags/scss/_osk.scss
+++ b/.config/ags/scss/_osk.scss
@@ -104,11 +104,11 @@ $osk_key_fontsize: 1.091rem;
 
 .osk-control-button:hover,
 .osk-control-button:focus {
-    background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 90%);
+    background-color: mix($t_surfaceVariant, $onSurfaceVariant, 90%);
 }
 
 .osk-control-button:active {
-    background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 70%);
+    background-color: mix($t_surfaceVariant, $onSurfaceVariant, 70%);
     font-size: $osk_key_fontsize;
 }
 
diff --git a/.config/ags/scss/_session.scss b/.config/ags/scss/_session.scss
index aa8f51a1..cfa56206 100644
--- a/.config/ags/scss/_session.scss
+++ b/.config/ags/scss/_session.scss
@@ -1,5 +1,5 @@
 .session-bg {
-    background-color: mix($t_t_background, $background, 40%);
+    background-color: $t_surface;
 }
 
 .session-button {
diff --git a/.config/ags/scss/_sidebars.scss b/.config/ags/scss/_sidebars.scss
index 1e6c9480..9cca76bd 100644
--- a/.config/ags/scss/_sidebars.scss
+++ b/.config/ags/scss/_sidebars.scss
@@ -128,7 +128,7 @@ $onChatgpt: $onPrimary;
 }
 
 .sidebar-navrail {
-    // background-color: $t_surface;
+    // background-color: $surface;
     padding: 0rem $rounding_medium;
 }