From c2c8b86c6ca78e8b56b51f805430a89d4a7716dd Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Wed, 18 Dec 2024 03:58:49 +0800
Subject: [PATCH] feat: adjust color palette and glass effects

---
 src/components/Dock/Dock.vue           |  6 +++---
 src/contentScripts/views/Home/Home.vue | 17 +++++++++--------
 src/styles/variables.scss              | 14 +++++++-------
 3 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index a0906b53..a05a9713 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -383,9 +383,9 @@ function handleBackToTopOrRefresh() {
 }
 
 .dock-item {
-  --shadow-dark: 0 4px 30px 4px rgba(255, 255, 255, 0.6);
+  --shadow-dark: 0 4px 30px 4px var(--bew-theme-color-60);
   --shadow-active: 0 4px 30px var(--bew-theme-color-70);
-  --shadow-dark-active: 0 4px 20px rgba(255, 255, 255, 0.8);
+  --shadow-dark-active: 0 4px 20px var(--bew-theme-color-80);
   --shadow-active-active: 0 4px 20px var(--bew-theme-color-90);
 
   --uno: "relative transform active:important-scale-90 hover:scale-110";
@@ -418,7 +418,7 @@ function handleBackToTopOrRefresh() {
   }
 
   &.active {
-    --uno: "important-bg-$bew-theme-color-auto text-$bew-text-auto dark:text-$bew-theme-color";
+    --uno: "important-bg-$bew-theme-color-80 text-white";
     --uno: "shadow-$shadow-active dark:shadow-$shadow-dark";
     --uno: "active:shadow-$shadow-active-active dark-active:shadow-$shadow-dark-active";
   }
diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue
index f9f4e89a..ab8c1244 100644
--- a/src/contentScripts/views/Home/Home.vue
+++ b/src/contentScripts/views/Home/Home.vue
@@ -218,7 +218,7 @@ function toggleTabContentLoading(loading: boolean) {
               v-for="tab in currentTabs" :key="tab.page"
               :class="{ 'tab-activated': activatedPage === tab.page }"
               px-3 h-inherit
-              bg="transparent hover:$bew-fill-2" text="$bew-text-2" rounded-full
+              bg="transparent hover:$bew-fill-2" text="$bew-text-1" fw-bold rounded-full
               cursor-pointer duration-300
               flex="~ gap-2 items-center shrink-0" relative
               @click="handleChangeTab(tab)"
@@ -230,7 +230,7 @@ function toggleTabContentLoading(loading: boolean) {
                   v-show="activatedPage === tab.page && tabContentLoading"
                   i-svg-spinners:ring-resize
                   pos="absolute right-4px top-4px" duration-300
-                  text="8px $bew-text-2"
+                  text="8px white"
                 />
               </Transition>
             </button>
@@ -247,12 +247,9 @@ function toggleTabContentLoading(loading: boolean) {
         >
           <div
             v-for="icon in gridLayoutIcons" :key="icon.value"
-            :style="{
-              backgroundColor: gridLayout.home === icon.value ? 'var(--bew-fill-3)' : '',
-              color: gridLayout.home === icon.value ? 'var(--bew-text-1)' : 'var(--bew-text-2)',
-            }"
+            :class="{ 'grid-layout-item-activated': gridLayout.home === icon.value }"
             flex="~ justify-center items-center"
-            h-full aspect-square text="$bew-text-2"
+            h-full aspect-square text="$bew-text-1"
             rounded-full bg="hover:$bew-fill-2" duration-300
             cursor-pointer
             @click="gridLayout.home = icon.value"
@@ -317,6 +314,10 @@ function toggleTabContentLoading(loading: boolean) {
 }
 
 .tab-activated {
-  --uno: "bg-$bew-fill-3 text-$bew-text-1 fw-bold";
+  --uno: "bg-$bew-theme-color-auto text-$bew-text-auto";
+}
+
+.grid-layout-item-activated {
+  --uno: "bg-$bew-theme-color-auto text-$bew-text-auto";
 }
 </style>
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a1843126..82a886be 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -39,11 +39,11 @@
 
   // Use this to imitate the frosted glass edge effect in components with a frosted glass design (except dialogs)
   --bew-shadow-edge-glow-1: inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.2),
-    inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.12), inset 0 0 4px rgba(255, 255, 255, 0.4);
+    inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.12), inset 0 0 10px rgba(255, 255, 255, 0.6);
 
   // Use this for dialogs with the frosted glass effect
   --bew-shadow-edge-glow-2: inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.2),
-    inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.12), inset 0 0 8px rgba(255, 255, 255, 0.42);
+    inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.12), inset 0 0 14px rgba(255, 255, 255, 0.62);
 
   // #endregion
 
@@ -52,8 +52,8 @@
 
   --bew-logo-color: var(--bew-theme-color);
 
-  // In light mode use the theme color; in dark mode use white
-  --bew-theme-color-auto: var(--bew-theme-color);
+  // In light mode use the black; in dark mode use white
+  --bew-theme-color-auto: var(--bew-text-1);
 
   --bew-theme-color: hsl(195 100% 42%);
   --bew-theme-color-10: color-mix(in oklab, var(--bew-theme-color), transparent 90%);
@@ -203,14 +203,14 @@
     0 30px 40px -8px rgb(0 0 0 / 0.22);
 
   --bew-shadow-edge-glow-1: inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.12),
-    inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.04), inset 0 0 4px rgba(255, 255, 255, 0.06);
+    inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.04), inset 0 0 10px rgba(255, 255, 255, 0.04);
   --bew-shadow-edge-glow-2: inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.12),
-    inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.04), inset 0 0 8px rgba(255, 255, 255, 0.08);
+    inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.04), inset 0 0 14px rgba(255, 255, 255, 0.06);
   // #endregion
 
   --bew-logo-color: var(--bew-text-1);
 
-  --bew-theme-color-auto: white;
+  --bew-theme-color-auto: var(--bew-text-1);
 
   --bew-text-auto: black;
   --bew-text-1: hsl(215 19% 98%);