From 834f8dd208393e41ef3265287c43a9c976371b5e Mon Sep 17 00:00:00 2001
From: end-4 <97237370+end-4@users.noreply.github.com>
Date: Tue, 19 Mar 2024 18:24:46 +0700
Subject: [PATCH] update styles

---
 .config/ags/modules/sideleft/apis/waifu.js |  1 +
 .config/ags/scss/_bar.scss                 |  2 -
 .config/ags/scss/_colors.scss              | 22 ++----
 .config/ags/scss/_dock.scss                |  6 +-
 .config/ags/scss/_lib_classes.scss         |  3 -
 .config/ags/scss/_lib_mixins.scss          | 33 +-------
 .config/ags/scss/_material.scss            | 92 +++++++++++-----------
 .config/ags/scss/_music.scss               |  8 +-
 .config/ags/scss/_notifications.scss       | 10 +--
 .config/ags/scss/_overview.scss            |  2 +-
 .config/ags/scss/_sidebars.scss            | 58 ++++++--------
 11 files changed, 92 insertions(+), 145 deletions(-)

diff --git a/.config/ags/modules/sideleft/apis/waifu.js b/.config/ags/modules/sideleft/apis/waifu.js
index bca0415be..2dece7ebf 100644
--- a/.config/ags/modules/sideleft/apis/waifu.js
+++ b/.config/ags/modules/sideleft/apis/waifu.js
@@ -251,6 +251,7 @@ const WaifuImage = (taglist) => {
                 else Utils.execAsync(['bash', '-c', `wget -O '${thisBlock.attribute.imagePath}' '${url}'`])
                     .then(showImage)
                     .catch(print);
+                console.log(`background-color: mix(${darkMode ? 'black' : 'white'}, ${dominant_color}, 0.97);`);
                 thisBlock.css = `background-color: mix(${darkMode ? 'black' : 'white'}, ${dominant_color}, 0.97);`;
             },
         },
diff --git a/.config/ags/scss/_bar.scss b/.config/ags/scss/_bar.scss
index e204c508a..dd33a3f96 100644
--- a/.config/ags/scss/_bar.scss
+++ b/.config/ags/scss/_bar.scss
@@ -388,10 +388,8 @@ $bar_ws_width_focus_active: 2.045rem;
 
 .bar-bluetooth-device {
     @include full-rounding;
-    @include element_decel;
     min-height: 1.032rem;
     min-width: 1.032rem;
     font-size: 1.032rem;
-    //color: $barspacerightOnLayer0;
     padding: 0.205rem 0.341rem;
 }
diff --git a/.config/ags/scss/_colors.scss b/.config/ags/scss/_colors.scss
index 77210262f..16fd24354 100644
--- a/.config/ags/scss/_colors.scss
+++ b/.config/ags/scss/_colors.scss
@@ -17,9 +17,7 @@ $onSuccessContainer: #0c1f13;
 }
 
 // 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);
@@ -42,18 +40,6 @@ $actiontext: mix($onBackground, $background, 85%);
 $black: black;
 $white: white;
 
-// Terminal colors
-$termbg: $surfaceContainerHigh;
-$termfg: $onSurfaceVariant;
-$term0: $background;
-$term1: $error;
-$term2: $inversePrimary;
-$term3: $onPrimaryContainer;
-$term4: $onPrimaryContainer;
-$term5: $onSecondaryContainer;
-$term6: $primary;
-$term7: $onSurfaceVariant;
-
 /// Color mappings for more chaotic, dynamic colors like the average rice ///
 // General
 $layer0: $background;
@@ -62,12 +48,14 @@ $layer0Hover: mix($layer0, $onLayer0, 85%);
 $layer0Active: $primary;
 $onLayer0Active: $onPrimary;
 $onLayer0Inactive: mix($onLayer0, $layer0, 70%);
-$layer1: $surfaceContainer;
+$layer1: $surfaceContainerLow;
 $onLayer1: $onSurface;
 $onLayer1Inactive: mix($onLayer1, $layer1, 45%);
 $onLayer1: $onSurfaceVariant;
-$layer2: $secondaryContainer;
-$onLayer2: $onSecondaryContainer;
+$layer2: mix($surfaceContainer, $surfaceContainerHigh, 55%);
+$onLayer2: $onSurface;
+$layer3: $surfaceContainerHigh;
+$onLayer3: $onSurface;
 $layer1Hover: mix($layer1, $onLayer1, 85%);
 $layer1Active: mix($layer1, $onLayer1, 70%);
 $layer2Hover: mix($layer2, $onLayer2, 90%);
diff --git a/.config/ags/scss/_dock.scss b/.config/ags/scss/_dock.scss
index 19779f5b2..c6768553a 100644
--- a/.config/ags/scss/_dock.scss
+++ b/.config/ags/scss/_dock.scss
@@ -1,7 +1,7 @@
 .dock-bg {
     @include large-rounding;
     @include elevation2;
-    background-color: $t_background;
+    background-color: $layer0;
     padding: 0.682rem;
 }
 
@@ -12,11 +12,11 @@
 
 .dock-app-btn:hover,
 .dock-app-btn:focus {
-    background-color: mix($t_surface, $onSurface, 95%);
+    background-color: mix($surface, $onSurface, 90%);
 }
 
 .dock-app-btn:active {
-    background-color: mix($t_surface, $onSurface, 85%);
+    background-color: mix($surface, $onSurface, 85%);
 }
 
 .dock-app-icon {
diff --git a/.config/ags/scss/_lib_classes.scss b/.config/ags/scss/_lib_classes.scss
index 69262e7a8..7fb5a6512 100644
--- a/.config/ags/scss/_lib_classes.scss
+++ b/.config/ags/scss/_lib_classes.scss
@@ -523,6 +523,3 @@
 .element-accel {
     @include element_accel;
 }
-.page-move {
-    @include page_move;
-}
diff --git a/.config/ags/scss/_lib_mixins.scss b/.config/ags/scss/_lib_mixins.scss
index d2a750c27..ae13c6815 100644
--- a/.config/ags/scss/_lib_mixins.scss
+++ b/.config/ags/scss/_lib_mixins.scss
@@ -174,26 +174,12 @@ $elevation_margin: 0.476rem;
 @mixin element_easeInOut {
     transition: 300ms cubic-bezier(0.85, 0, 0.15, 1);
 }
-@mixin page_move {
-    transition: 500ms cubic-bezier(0.85, 0, 0.15, 1);
-}
-
-@function tint($color, $percentage) {
-    @return mix(rgb(245, 250, 255), $color, $percentage);
-}
-
-@function shade($color, $percentage) {
-    @return mix(rgb(0, 0, 0), $color, $percentage);
-}
-
-$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_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%);
+    border-top: 1px solid mix($surface, $onSurface, 86%);
+    border-left: 1px solid mix($surface, $onSurface, 86%);
+    border-right: 1px solid mix($surface, $onSurface, 90%);
+    border-bottom: 1px solid mix($surface, $onSurface, 90%);
 }
 
 @mixin elevation-border {
@@ -203,17 +189,6 @@ $overlay2: mix($onSurface, rgba(0, 0, 0, 0), 40%);
     border-bottom: 1px solid $surfaceContainer;
 }
 
-@mixin elevation-border-heavier {
-    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 {
-    border-top: 1px solid transparent;
-}
-
 @mixin button-minsize {
     min-width: 2.727rem;
     min-height: 2.727rem;
diff --git a/.config/ags/scss/_material.scss b/.config/ags/scss/_material.scss
index ddb659b09..d7b7717dc 100644
--- a/.config/ags/scss/_material.scss
+++ b/.config/ags/scss/_material.scss
@@ -1,56 +1,56 @@
 $darkmode: True;
 $transparent: False;
-$primary_paletteKeyColor: #A76837;
-$secondary_paletteKeyColor: #8F715C;
-$tertiary_paletteKeyColor: #777A4B;
-$neutral_paletteKeyColor: #81756D;
-$neutral_variant_paletteKeyColor: #84746A;
-$background: #19120D;
-$onBackground: #F0DFD6;
-$surface: #19120D;
-$surfaceDim: #19120D;
-$surfaceBright: #413731;
+$primary_paletteKeyColor: #A504FF;
+$secondary_paletteKeyColor: #8B6D8D;
+$tertiary_paletteKeyColor: #9A678C;
+$neutral_paletteKeyColor: #7D7480;
+$neutral_variant_paletteKeyColor: #7E7382;
+$background: #17111B;
+$onBackground: #EBDFED;
+$surface: #17111B;
+$surfaceDim: #17111B;
+$surfaceBright: #3E3741;
 $surfaceContainerLowest: #FFFFFF;
-$surfaceContainerLow: #221A15;
-$surfaceContainer: #261E18;
-$surfaceContainerHigh: #312822;
-$surfaceContainerHighest: #3C332D;
-$onSurface: #F0DFD6;
-$surfaceVariant: #52443B;
-$onSurfaceVariant: #D6C3B7;
-$inverseSurface: #F0DFD6;
-$inverseOnSurface: #382F29;
-$outline: #9F8D83;
-$outlineVariant: #52443B;
+$surfaceContainerLow: #1F1923;
+$surfaceContainer: #241D27;
+$surfaceContainerHigh: #2E2832;
+$surfaceContainerHighest: #39323D;
+$onSurface: #EBDFED;
+$surfaceVariant: #4D4351;
+$onSurfaceVariant: #CFC2D3;
+$inverseSurface: #EBDFED;
+$inverseOnSurface: #352E38;
+$outline: #988D9D;
+$outlineVariant: #4D4351;
 $shadow: #000000;
 $scrim: #000000;
-$surfaceTint: #FFB783;
-$primary: #FFB783;
-$onPrimary: #4F2500;
-$primaryContainer: #6D390B;
-$onPrimaryContainer: #FFDCC5;
-$inversePrimary: #8A5021;
-$secondary: #E4BFA7;
-$onSecondary: #422B1B;
-$secondaryContainer: #5B412F;
-$onSecondaryContainer: #FFDCC5;
-$tertiary: #C8CA94;
-$onTertiary: #30330B;
-$tertiaryContainer: #919463;
+$surfaceTint: #E2B6FF;
+$primary: #E2B6FF;
+$onPrimary: #4D007B;
+$primaryContainer: #6D00AC;
+$onPrimaryContainer: #F3DAFF;
+$inversePrimary: #9000DF;
+$secondary: #DEBCDF;
+$onSecondary: #402843;
+$secondaryContainer: #5A405D;
+$onSecondaryContainer: #FDD9FD;
+$tertiary: #F0B5DE;
+$onTertiary: #4B2142;
+$tertiaryContainer: #B680A7;
 $onTertiaryContainer: #000000;
 $error: #FFB4AB;
 $onError: #690005;
 $errorContainer: #93000A;
 $onErrorContainer: #FFDAD6;
-$primaryFixed: #FFDCC5;
-$primaryFixedDim: #FFB783;
-$onPrimaryFixed: #301400;
-$onPrimaryFixedVariant: #6D390B;
-$secondaryFixed: #FFDCC5;
-$secondaryFixedDim: #E4BFA7;
-$onSecondaryFixed: #2A1708;
-$onSecondaryFixedVariant: #5B412F;
-$tertiaryFixed: #E4E6AE;
-$tertiaryFixedDim: #C8CA94;
-$onTertiaryFixed: #1B1D00;
-$onTertiaryFixedVariant: #474920;
+$primaryFixed: #F3DAFF;
+$primaryFixedDim: #E2B6FF;
+$onPrimaryFixed: #2E004D;
+$onPrimaryFixedVariant: #6D00AC;
+$secondaryFixed: #FCD7FB;
+$secondaryFixedDim: #DEBCDF;
+$onSecondaryFixed: #29132D;
+$onSecondaryFixedVariant: #583E5B;
+$tertiaryFixed: #FFD7F1;
+$tertiaryFixedDim: #F0B5DE;
+$onTertiaryFixed: #320C2C;
+$onTertiaryFixedVariant: #64385A;
diff --git a/.config/ags/scss/_music.scss b/.config/ags/scss/_music.scss
index 8fcbdfea5..2d552ddb4 100644
--- a/.config/ags/scss/_music.scss
+++ b/.config/ags/scss/_music.scss
@@ -6,7 +6,7 @@
 @import './lib_mixins';
 $music_gradient1: mix($color1, $background, 50%);
 
-// @if $darkmode ==true {
+// @if $darkmode == True {
 //     $music_gradient1: mix($color1, $background, 30%);
 // }
 
@@ -17,7 +17,7 @@ $music_extra_transparentize: 0.15;
 
 $secondaryContainer: transparentize(mix(mix($background, $color2, 50%), $color6, 80%), 0.5);
 $onSecondaryContainer: mix($color7, $color2, 90%);
-@if $darkmode ==false {
+@if $darkmode == False {
     $onSecondaryContainer: mix($onSecondaryContainer, black, 50%);
 }
 
@@ -28,7 +28,7 @@ $onSecondaryContainer: mix($color7, $color2, 90%);
     @include normal-rounding;
     // min-height: 7.159rem;
     min-width: 29.659rem;
-    background-color: $t_background;
+    background-color: $layer0;
     padding: 0rem 1.023rem;
     background: // Inspired by Amberol
         linear-gradient(127deg, transparentize($music_gradient1, $music_colorstart_transparentize), transparentize($music_gradient1, $music_colorstart_transparentize - $transparentize_amount + $music_extra_transparentize) 70.71%),
@@ -46,7 +46,7 @@ $onSecondaryContainer: mix($color7, $color2, 90%);
     // margin: 1.023rem;
     min-width: 7.5rem;
     min-height: 7.5rem;
-    background-color: $t_surface;
+    background-color: $layer1;
     color: $onSecondaryContainer;
 }
 
diff --git a/.config/ags/scss/_notifications.scss b/.config/ags/scss/_notifications.scss
index 234072be3..53e87bee0 100644
--- a/.config/ags/scss/_notifications.scss
+++ b/.config/ags/scss/_notifications.scss
@@ -1,12 +1,10 @@
-$notif_surface: $surfaceContainer;
-
 @mixin notif-rounding {
     @include normal-rounding;
 }
 
 .notif-low {
     @include notif-rounding;
-    background-color: $surfaceContainerHigh;
+    background-color: $layer2;
     color: $onSurfaceVariant;
     padding: $rounding_small;
     padding-right: $rounding_small + 0.545rem;
@@ -14,7 +12,7 @@ $notif_surface: $surfaceContainer;
 
 .notif-normal {
     @include notif-rounding;
-    background-color: $surfaceContainerHigh;
+    background-color: $layer2;
     color: $onSurfaceVariant;
     padding: $rounding_small;
     padding-right: $rounding_small + 0.545rem;
@@ -44,7 +42,7 @@ $notif_surface: $surfaceContainer;
 .popup-notif-low {
     @include notif-rounding;
     min-width: 30.682rem;
-    background-color: $notif_surface;
+    background-color: $layer2;
     border: 0.034rem solid $outlineVariant;
     color: $onSurfaceVariant;
     padding: $rounding_small;
@@ -54,7 +52,7 @@ $notif_surface: $surfaceContainer;
 .popup-notif-normal {
     @include notif-rounding;
     min-width: 30.682rem;
-    background-color: $notif_surface;
+    background-color: $layer2;
     border: 0.034rem solid $outlineVariant;
     color: $onSurfaceVariant;
     padding: $rounding_small;
diff --git a/.config/ags/scss/_overview.scss b/.config/ags/scss/_overview.scss
index 137317abc..a0a3b48ad 100644
--- a/.config/ags/scss/_overview.scss
+++ b/.config/ags/scss/_overview.scss
@@ -118,7 +118,7 @@
     @include menu_decel;
     background-color: $surfaceContainerHigh;
     color: $onSurface;
-    border: 0.068rem solid $outlineVariant;
+    border: 0.068rem solid $surfaceContainerHighest;
 }
 
 .overview-tasks-window:hover,
diff --git a/.config/ags/scss/_sidebars.scss b/.config/ags/scss/_sidebars.scss
index ebb615dd4..fc25c3fb8 100644
--- a/.config/ags/scss/_sidebars.scss
+++ b/.config/ags/scss/_sidebars.scss
@@ -1,7 +1,4 @@
 $sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%);
-$textboxColor: $surfaceContainerHigh;
-$system: $secondary;
-$onSystem: $onSecondary;
 
 @mixin group-padding {
     padding: 0.341rem;
@@ -52,12 +49,12 @@ $onSystem: $onSecondary;
 .sidebar-group {
     @include normal-rounding;
     @include group-padding;
-    background-color: $surfaceContainer;
+    background-color: $layer1;
 }
 
 .sidebar-group-nopad {
     @include normal-rounding;
-    background-color: $surfaceContainer;
+    background-color: $layer1;
 }
 
 .sidebar-group-invisible {
@@ -71,7 +68,7 @@ $onSystem: $onSecondary;
 .sidebar-togglesbox {
     @include full-rounding;
     @include group-padding;
-    background-color: $surfaceContainer;
+    background-color: $layer1;
 }
 
 .sidebar-iconbutton {
@@ -263,8 +260,8 @@ $onSystem: $onSecondary;
     @include full-rounding;
     @include element_decel;
     padding: 0rem 0.682rem;
-    background-color: $surfaceContainer;
-    color: $outline;
+    background-color: $surfaceContainerHigh;
+    color: $onSurface;
 }
 
 .sidebar-calendar-monthyear-btn:hover,
@@ -281,7 +278,7 @@ $onSystem: $onSecondary;
     @include element_decel;
     min-width: 2.045rem;
     min-height: 2.045rem;
-    background-color: $surfaceContainer;
+    background-color: $surfaceContainerHigh;
     color: $outline;
 }
 
@@ -329,7 +326,7 @@ $onSystem: $onSecondary;
 .sidebar-todo-new {
     @include full-rounding;
     @include element_decel;
-    background-color: $textboxColor;
+    background-color: $surfaceContainerHigh;
     color: $onSurfaceVariant;
     margin: 0.341rem;
     padding: 0.205rem 0.545rem;
@@ -403,7 +400,7 @@ $onSystem: $onSecondary;
 .sidebar-module {
     @include normal-rounding;
     @include group-padding;
-    background-color: $surfaceContainer;
+    background-color: $layer1;
     padding: 0.682rem;
 }
 
@@ -422,7 +419,7 @@ $onSystem: $onSecondary;
 .sidebar-module-scripts-button {
     @include full-rounding;
     @include icon-material;
-    background-color: $surfaceContainer;
+    background-color: $layer1;
     min-width: 1.705rem;
     min-height: 1.705rem;
 
@@ -498,7 +495,7 @@ $colorpicker_rounding: 0.341rem;
 .sidebar-chat-apiswitcher {
     @include full-rounding;
     @include group-padding;
-    background-color: $surfaceContainer;
+    background-color: $layer1;
 }
 
 .sidebar-chat-apiswitcher-icon {
@@ -518,7 +515,7 @@ $colorpicker_rounding: 0.341rem;
 .sidebar-chat-providerswitcher {
     @include small-rounding;
     padding: 0.477rem 0.682rem;
-    background-color: $textboxColor;
+    background-color: $surfaceContainerHigh;
     color: $onSurfaceVariant;
 }
 
@@ -534,7 +531,7 @@ $colorpicker_rounding: 0.341rem;
 
 .sidebar-chat-textarea {
     @include normal-rounding;
-    background-color: $textboxColor;
+    background-color: $surfaceContainerHigh;
     color: $onSurfaceVariant;
     padding: 0.682rem;
 }
@@ -644,33 +641,26 @@ $colorpicker_rounding: 0.341rem;
     margin: 0rem 0.682rem;
     padding: 0.682rem;
 
-    @if $darkmode ==true {
-        background-color: white;
+    @if $darkmode == True {
+        background-color: #e6e6e6;
     }
-
     color: $onBackground;
-    // background-color: $termbg;
 }
 
 .sidebar-chat-codeblock {
     @include normal-rounding;
     // @include elevation2;
-    background-color: $termbg;
-    color: $termfg;
+    background-color: $layer2;
+    color: $onLayer2;
     margin: 0rem 0.682rem;
-    border: 0.068rem solid $outlineVariant;
 }
 
 .sidebar-chat-codeblock-topbar {
     @include mainfont;
-    margin: 0.273rem;
-    margin-bottom: 0rem;
-    background-color: $secondaryContainer;
-    color: $onSecondaryContainer;
-    border-radius: $rounding_medium - 0.273rem;
-    border: 0.068rem solid $outlineVariant;
-    border-top-left-radius: $rounding_small + 0.068rem;
-    border-top-right-radius: $rounding_small + 0.068rem;
+    background-color: $layer3;
+    color: $onLayer3;
+    border-top-left-radius: $rounding_small;
+    border-top-right-radius: $rounding_small;
     padding: 0.341rem 0.477rem;
 }
 
@@ -687,11 +677,11 @@ $colorpicker_rounding: 0.341rem;
 
 .sidebar-chat-codeblock-topbar-btn:hover,
 .sidebar-chat-codeblock-topbar-btn:focus {
-    background-color: mix($secondaryContainer, $onSecondaryContainer, 90%);
+    background-color: $surfaceBright;
 }
 
 .sidebar-chat-codeblock-topbar-btn:active {
-    background-color: mix($secondaryContainer, $onSecondaryContainer, 80%);
+    background-color: $surfaceVariant;
 }
 
 .sidebar-chat-codeblock-code {
@@ -737,7 +727,7 @@ $colorpicker_rounding: 0.341rem;
 
 .sidebar-chat-chip-action {
     @include element_decel;
-    background-color: $textboxColor;
+    background-color: $surfaceContainerHigh;
     color: $onSurfaceVariant;
 }
 
@@ -759,7 +749,7 @@ $colorpicker_rounding: 0.341rem;
     @include element_decel;
     @include small-rounding;
     padding: 0.341rem 0.477rem;
-    background-color: $textboxColor;
+    background-color: $surfaceContainerHigh;
     color: $onSurfaceVariant;
 }