From 4fe4c927337861544205d4babdcb8eb736b507b9 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Thu, 27 Jun 2024 01:06:46 +0800
Subject: [PATCH] refactor: unify elevated elements color

---
 src/components/BackToTopOrRefreshButton.vue   |  4 +--
 src/components/Dialog.vue                     |  4 +--
 src/components/Dock/Dock.vue                  |  4 +--
 .../RightSideButtons/RightSideButtons.vue     |  4 +--
 src/components/SearchBar/SearchBar.vue        |  4 +--
 src/components/Select.vue                     |  2 +-
 src/components/Settings/Settings.vue          |  8 ++---
 .../components/ChildSettingsDialog.vue        |  4 +--
 src/components/TopBar/TopBar.vue              |  6 ++--
 .../TopBar/components/ChannelsPop.vue         |  2 +-
 .../TopBar/components/FavoritesPop.vue        |  2 +-
 .../TopBar/components/HistoryPop.vue          |  4 +--
 .../TopBar/components/MomentsPop.vue          |  4 +--
 src/components/TopBar/components/MorePop.vue  |  2 +-
 .../TopBar/components/NotificationsPop.vue    |  2 +-
 .../TopBar/components/UploadPop.vue           |  2 +-
 .../TopBar/components/UserPanelPop.vue        |  2 +-
 .../TopBar/components/WatchLaterPop.vue       |  4 +--
 src/components/VideoCard/VideoCard.vue        |  2 +-
 .../views/Favorites/Favorites.vue             |  2 +-
 src/contentScripts/views/Home/Home.vue        |  4 +--
 .../views/Home/components/ForYou.vue          |  2 +-
 src/styles/adaptedStyles/articlesPage.scss    |  6 ++--
 src/styles/adaptedStyles/common.scss          |  2 +-
 src/styles/adaptedStyles/homePage.scss        |  2 +-
 src/styles/adaptedStyles/loginDialog.scss     |  2 +-
 src/styles/adaptedStyles/modal.scss           |  2 +-
 .../adaptedStyles/notificationsPage.scss      |  2 +-
 src/styles/adaptedStyles/userCard.scss        |  2 +-
 src/styles/adaptedStyles/userSpacePage.scss   |  2 +-
 src/styles/adaptedStyles/videoPage.scss       |  6 ++--
 src/styles/adaptedStyles/watchLaterPage.scss  |  2 +-
 src/styles/main.scss                          |  2 +-
 src/styles/variables.scss                     | 34 ++++++++-----------
 34 files changed, 67 insertions(+), 71 deletions(-)

diff --git a/src/components/BackToTopOrRefreshButton.vue b/src/components/BackToTopOrRefreshButton.vue
index 600cf731..64d44df6 100644
--- a/src/components/BackToTopOrRefreshButton.vue
+++ b/src/components/BackToTopOrRefreshButton.vue
@@ -21,8 +21,8 @@ const { reachTop } = useBewlyApp()
         --b-button-width: 45px;
         --b-button-height: 45px;
         --b-button-border-width: 1px;
-        --b-button-color: var(--bew-elevated-1);
-        --b-button-color-hover: var(--bew-elevated-1-hover);
+        --b-button-color: var(--bew-elevated);
+        --b-button-color-hover: var(--bew-elevated-hover);
         --b-button-shadow: var(--bew-shadow-1), var(--bew-shadow-edge-glow-1);
         --b-button-shadow-hover: var(--bew-shadow-2), var(--bew-shadow-edge-glow-1);
         --b-button-shadow-active: var(--bew-shadow-1), var(--bew-shadow-edge-glow-1);
diff --git a/src/components/Dialog.vue b/src/components/Dialog.vue
index aff167db..28d479e2 100644
--- a/src/components/Dialog.vue
+++ b/src/components/Dialog.vue
@@ -109,7 +109,7 @@ function handleConfirm() {
             width: dialogWidth,
             maxWidth: dialogMaxWidth,
             backdropFilter: frostedGlass ? 'var(--bew-filter-glass-2)' : 'none',
-            backgroundColor: frostedGlass ? 'var(--bew-elevated-1)' : 'var(--bew-elevated-solid-1)',
+            backgroundColor: frostedGlass ? 'var(--bew-elevated)' : 'var(--bew-elevated-solid)',
           }"
           pos="absolute top-1/2 left-1/2" rounded="$bew-radius" border="1 $bew-border-color"
           transform="translate--1/2" z-2 overflow="x-hidden y-overlay"
@@ -128,7 +128,7 @@ function handleConfirm() {
 
           <header
             style="
-              text-shadow: 0 0 15px var(--bew-elevated-solid-1), 0 0 20px var(--bew-elevated-solid-1)
+              text-shadow: 0 0 15px var(--bew-elevated-solid), 0 0 20px var(--bew-elevated-solid)
             "
             pos="sticky top-0 left-0" w-full h-70px px-8 flex
             items-center justify-between
diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index 32afd9b6..e5aa433a 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -256,7 +256,7 @@ function handleBackToTopOrRefresh() {
 
   .dock-content-inner {
     --uno: "duration-300 ease-in-out transform-gpu";
-    --uno: "p-2 m-2 bg-$bew-content-2 dark:bg-$bew-elevated-1";
+    --uno: "p-2 m-2 bg-$bew-content-2 dark:bg-$bew-elevated";
     --uno: "flex flex-col gap-2 shrink-0";
     --uno: "rounded-full border-1 border-$bew-border-color";
     box-shadow: var(--bew-shadow-edge-glow-1), var(--bew-shadow-2);
@@ -273,7 +273,7 @@ function handleBackToTopOrRefresh() {
     --uno: "md:w-45px w-35px md:h-45px h-35px";
     --uno: "grid place-items-center";
     --uno: "filter-$bew-filter-glass-1";
-    --uno: "bg-$bew-elevated-1 hover:bg-$bew-content-1-hover";
+    --uno: "bg-$bew-elevated hover:bg-$bew-content-1-hover";
     --uno: "rounded-full shadow-$bew-shadow-2 border-1 border-$bew-border-color";
 
     backdrop-filter: var(--bew-filter-glass-1);
diff --git a/src/components/RightSideButtons/RightSideButtons.vue b/src/components/RightSideButtons/RightSideButtons.vue
index 0eebb2bb..0004964b 100644
--- a/src/components/RightSideButtons/RightSideButtons.vue
+++ b/src/components/RightSideButtons/RightSideButtons.vue
@@ -69,8 +69,8 @@ const hoveringDockItem = reactive<HoveringDockItem>({
   --b-button-width: 40px;
   --b-button-height: 40px;
   --b-button-border-width: 1px;
-  --b-button-color: var(--bew-elevated-1);
-  --b-button-color-hover: var(--bew-elevated-1-hover);
+  --b-button-color: var(--bew-elevated);
+  --b-button-color-hover: var(--bew-elevated-hover);
   --b-button-shadow: var(--bew-shadow-1);
   --b-button-shadow-hover: var(--bew-shadow-2);
   --b-button-shadow-active: var(--bew-shadow-1);
diff --git a/src/components/SearchBar/SearchBar.vue b/src/components/SearchBar/SearchBar.vue
index b26e035c..f96c9f29 100644
--- a/src/components/SearchBar/SearchBar.vue
+++ b/src/components/SearchBar/SearchBar.vue
@@ -382,7 +382,7 @@ async function handleClearSearchHistory() {
 
   #search-history {
     @include search-content;
-    --uno: "bg-$bew-elevated-1";
+    --uno: "bg-$bew-elevated";
 
     .history-list {
       .title {
@@ -400,7 +400,7 @@ async function handleClearSearchHistory() {
 
   #search-suggestion {
     @include search-content;
-    --uno: "bg-$bew-elevated-1";
+    --uno: "bg-$bew-elevated";
 
     .suggestion-item {
       @include search-content-item;
diff --git a/src/components/Select.vue b/src/components/Select.vue
index e74ece86..8f0e723f 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -87,7 +87,7 @@ function onMouseEnter() {
       <div
         v-if="showOptions"
         style="backdrop-filter: var(--bew-filter-glass-1)"
-        pos="absolute" bg="$bew-elevated-2" shadow="$bew-shadow-2" p="2"
+        pos="absolute" bg="$bew-elevated" shadow="$bew-shadow-2" p="2"
         m="t-2"
         rounded="$bew-radius" z="1" flex="~ col gap-1"
         w="full" max-h-300px overflow-y-overlay will-change-transform transform-gpu
diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue
index 4d1b6ae6..50f74127 100644
--- a/src/components/Settings/Settings.vue
+++ b/src/components/Settings/Settings.vue
@@ -137,7 +137,7 @@ function setCurrentTitle() {
             backdrop-filter: var(--bew-filter-glass-2);
           "
           flex="~ gap-2 col" rounded="30px hover:25px" p-2 shadow
-          bg="$bew-content-2 hover:$bew-elevated-1 dark:$bew-elevated-1 dark-hover:$bew-elevated-2"
+          bg="$bew-content-2 hover:$bew-elevated dark:$bew-elevated dark-hover:$bew-elevated"
           scale="group-hover:105" duration-300 overflow-hidden antialiased transform-gpu
           border="1 $bew-border-color"
         >
@@ -174,7 +174,7 @@ function setCurrentTitle() {
           --un-shadow: var(--bew-shadow-4), var(--bew-shadow-edge-glow-2);
           backdrop-filter: var(--bew-filter-glass-2);
         "
-        relative overflow="x-hidde" w-full h-full bg="$bew-content-2 dark:$bew-elevated-1"
+        relative overflow="x-hidde" w-full h-full bg="$bew-content-2 dark:$bew-elevated"
         shadow rounded="$bew-radius" border="1 $bew-border-color" transform-gpu
       >
         <header
@@ -182,7 +182,7 @@ function setCurrentTitle() {
           pos="fixed top-0 left-0" p="x-11"
           z-1 rounded="t-$bew-radius"
           style="
-            text-shadow: 0 0 10px var(--bew-elevated-solid-1), 0 0 15px var(--bew-elevated-solid-1)
+            text-shadow: 0 0 10px var(--bew-elevated-solid), 0 0 15px var(--bew-elevated-solid)
           "
         >
           <!-- Mask -->
@@ -205,7 +205,7 @@ function setCurrentTitle() {
             "
             text="!16px hover:$bew-theme-color" w="32px" h="32px"
             flex="~ items-center justify-center shrink-0"
-            bg="$bew-elevated-2 dark:$bew-fill-1 hover:$bew-theme-color-30"
+            bg="$bew-elevated dark:$bew-fill-1 hover:$bew-theme-color-30"
             rounded-8 cursor="pointer" border="1 $bew-border-color" box-border
             duration-300
             @click="handleClose"
diff --git a/src/components/Settings/components/ChildSettingsDialog.vue b/src/components/Settings/components/ChildSettingsDialog.vue
index 2a629369..1a0f12fc 100644
--- a/src/components/Settings/components/ChildSettingsDialog.vue
+++ b/src/components/Settings/components/ChildSettingsDialog.vue
@@ -24,13 +24,13 @@ function handleClose() {
         --un-shadow: var(--bew-shadow-3) var(--bew-shadow-edge-glow-2);
         backdrop-filter: var(--bew-filter-glass-2);
       "
-      pos="fixed top-1/2 left-1/2" bg="$bew-content-2 dark:$bew-elevated-1" rounded="$bew-radius"
+      pos="fixed top-1/2 left-1/2" bg="$bew-content-2 dark:$bew-elevated" rounded="$bew-radius"
       transform="translate--1/2 translate-z-0 gpu" z-2 shadow overflow="x-hidden y-overlay" w="$b-dialog-width"
       h="$b-dialog-height" antialiased
     >
       <header
         style="
-          text-shadow: 0 0 15px var(--bew-elevated-solid-1), 0 0 20px var(--bew-elevated-solid-1)
+          text-shadow: 0 0 15px var(--bew-elevated-solid), 0 0 20px var(--bew-elevated-solid)
         "
         pos="sticky top-0 left-0" w-full h-80px px-8 flex
         items-center justify-between
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 1d89d73a..3d412041 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -462,8 +462,8 @@ defineExpose({
           <SearchBar
             v-if="props.showSearchBar"
             style="
-              --b-search-bar-color: var(--bew-elevated-1);
-              --b-search-bar-hover: var(--bew-elevated-1-hover);
+              --b-search-bar-color: var(--bew-elevated);
+              --b-search-bar-hover: var(--bew-elevated-hover);
             "
           />
         </Transition>
@@ -479,7 +479,7 @@ defineExpose({
             backdrop-filter: var(--bew-filter-glass-1);
             box-shadow: var(--bew-shadow-edge-glow-1), var(--bew-shadow-2);
           "
-          ml-auto flex h-55px p-2 bg="$bew-elevated-1"
+          ml-auto flex h-55px p-2 bg="$bew-elevated"
           text="$bew-text-1" border="1 $bew-border-color" rounded-full
           transform-gpu
         >
diff --git a/src/components/TopBar/components/ChannelsPop.vue b/src/components/TopBar/components/ChannelsPop.vue
index d6950bb6..df589a5b 100644
--- a/src/components/TopBar/components/ChannelsPop.vue
+++ b/src/components/TopBar/components/ChannelsPop.vue
@@ -49,7 +49,7 @@ const genres = computed(() => [
     shadow="$bew-shadow-3"
     flex="~"
     p="4"
-    bg="$bew-elevated-1"
+    bg="$bew-elevated"
     rounded="$bew-radius"
   >
     <ul
diff --git a/src/components/TopBar/components/FavoritesPop.vue b/src/components/TopBar/components/FavoritesPop.vue
index 563051b8..476fb7b1 100644
--- a/src/components/TopBar/components/FavoritesPop.vue
+++ b/src/components/TopBar/components/FavoritesPop.vue
@@ -137,7 +137,7 @@ defineExpose({
 
 <template>
   <div
-    bg="$bew-elevated-solid-1"
+    bg="$bew-elevated-solid"
     w="500px"
     h="430px"
     rounded="$bew-radius"
diff --git a/src/components/TopBar/components/HistoryPop.vue b/src/components/TopBar/components/HistoryPop.vue
index 7d453ea7..99d8f64d 100644
--- a/src/components/TopBar/components/HistoryPop.vue
+++ b/src/components/TopBar/components/HistoryPop.vue
@@ -167,7 +167,7 @@ function getHistoryList(type: Business, view_at = 0 as number) {
 
 <template>
   <div
-    bg="$bew-elevated-solid-1"
+    bg="$bew-elevated-solid"
     w="380px"
     rounded="$bew-radius"
     pos="relative"
@@ -181,7 +181,7 @@ function getHistoryList(type: Business, view_at = 0 as number) {
       p="y-4 x-6"
       pos="fixed top-0 left-0"
       w="full"
-      bg="$bew-elevated-1"
+      bg="$bew-elevated"
       z="2"
       border="!rounded-t-$bew-radius"
     >
diff --git a/src/components/TopBar/components/MomentsPop.vue b/src/components/TopBar/components/MomentsPop.vue
index b7d390ed..29507313 100644
--- a/src/components/TopBar/components/MomentsPop.vue
+++ b/src/components/TopBar/components/MomentsPop.vue
@@ -276,7 +276,7 @@ defineExpose({
 
 <template>
   <div
-    bg="$bew-elevated-solid-1"
+    bg="$bew-elevated-solid"
     w="380px"
     rounded="$bew-radius"
     pos="relative"
@@ -291,7 +291,7 @@ defineExpose({
       p="y-4 x-6"
       pos="fixed top-0 left-0"
       w="full"
-      bg="$bew-elevated-1"
+      bg="$bew-elevated"
       z="1"
       border="!rounded-t-$bew-radius"
     >
diff --git a/src/components/TopBar/components/MorePop.vue b/src/components/TopBar/components/MorePop.vue
index 23887307..ae411ded 100644
--- a/src/components/TopBar/components/MorePop.vue
+++ b/src/components/TopBar/components/MorePop.vue
@@ -18,7 +18,7 @@ const list = computed((): { name: string, url: string, icon: string }[] => [
 <template>
   <div
     style="box-shadow: var(--bew-shadow-3)"
-    bg="$bew-elevated-solid-1"
+    bg="$bew-elevated-solid"
     w="180px"
     p="4"
     rounded="$bew-radius"
diff --git a/src/components/TopBar/components/NotificationsPop.vue b/src/components/TopBar/components/NotificationsPop.vue
index f6af3c2c..accd5222 100644
--- a/src/components/TopBar/components/NotificationsPop.vue
+++ b/src/components/TopBar/components/NotificationsPop.vue
@@ -73,7 +73,7 @@ function getUnreadMessageCount() {
 
 <template>
   <div
-    bg="$bew-elevated-solid-1"
+    bg="$bew-elevated-solid"
     w="170px"
     p="4"
     rounded="$bew-radius"
diff --git a/src/components/TopBar/components/UploadPop.vue b/src/components/TopBar/components/UploadPop.vue
index 5cc24087..96ec5059 100644
--- a/src/components/TopBar/components/UploadPop.vue
+++ b/src/components/TopBar/components/UploadPop.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     flex="~ col"
-    bg="$bew-elevated-solid-1"
+    bg="$bew-elevated-solid"
     rounded="$bew-radius"
     shadow="$bew-shadow-3"
     p="4"
diff --git a/src/components/TopBar/components/UserPanelPop.vue b/src/components/TopBar/components/UserPanelPop.vue
index 3971f1c7..a393fd24 100644
--- a/src/components/TopBar/components/UserPanelPop.vue
+++ b/src/components/TopBar/components/UserPanelPop.vue
@@ -133,7 +133,7 @@ async function logout() {
 
 <style lang="scss" scoped>
 #user-info-panel {
-  --uno: "p-4 rounded-$bew-radius w-300px -z-1 bg-$bew-elevated-solid-1 shadow-$bew-shadow-3";
+  --uno: "p-4 rounded-$bew-radius w-300px -z-1 bg-$bew-elevated-solid shadow-$bew-shadow-3";
 }
 
 #base-info {
diff --git a/src/components/TopBar/components/WatchLaterPop.vue b/src/components/TopBar/components/WatchLaterPop.vue
index 73ba5fda..922558ab 100644
--- a/src/components/TopBar/components/WatchLaterPop.vue
+++ b/src/components/TopBar/components/WatchLaterPop.vue
@@ -53,7 +53,7 @@ function getAllWatchLaterList() {
   <div
     w="380px"
     shadow="$bew-shadow-2"
-    bg="$bew-elevated-solid-1"
+    bg="$bew-elevated-solid"
     rounded="$bew-radius"
     pos="relative"
     of="hidden"
@@ -66,7 +66,7 @@ function getAllWatchLaterList() {
       p="y-4 x-6"
       pos="fixed top-0 left-0"
       w="full"
-      bg="$bew-elevated-1"
+      bg="$bew-elevated"
       z="2"
       border="!rounded-t-$bew-radius"
     >
diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index d0df1bde..9dbaaa1b 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -310,7 +310,7 @@ function handleUndo() {
               </div>
               <div
                 v-else
-                bg="$bew-elevated-solid-1" text-center lh-30px h-30px w-30px
+                bg="$bew-elevated-solid" text-center lh-30px h-30px w-30px
                 rounded="1/2" shadow="$bew-shadow-1"
                 border="1 $bew-border-color"
               >
diff --git a/src/contentScripts/views/Favorites/Favorites.vue b/src/contentScripts/views/Favorites/Favorites.vue
index 11ad3769..3b9d109e 100644
--- a/src/contentScripts/views/Favorites/Favorites.vue
+++ b/src/contentScripts/views/Favorites/Favorites.vue
@@ -193,7 +193,7 @@ function isMusic(item: FavoriteResource) {
       <div
         fixed z-10 absolute p-2 flex="~ gap-2"
         items-center
-        bg="$bew-elevated-solid-1" rounded="$bew-radius" shadow="$bew-shadow-2" mt--2 transition="all 300 ease-in-out"
+        bg="$bew-elevated-solid" rounded="$bew-radius" shadow="$bew-shadow-2" mt--2 transition="all 300 ease-in-out"
         :class="{ hide: shouldMoveCtrlBarUp }"
       >
         <Select v-model="selectedCategory" w-150px :options="categoryOptions" @change="(val) => changeCategory(val.value)" />
diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue
index 66434565..84b16be0 100644
--- a/src/contentScripts/views/Home/Home.vue
+++ b/src/contentScripts/views/Home/Home.vue
@@ -200,7 +200,7 @@ function toggleTabContentLoading(loading: boolean) {
             v-for="tab in currentTabs" :key="tab.page"
             :class="{ 'tab-activated': activatedPage === tab.page }"
             style="backdrop-filter: var(--bew-filter-glass-1)"
-            px-4 lh-35px h-35px bg="$bew-elevated-1 hover:$bew-elevated-1-hover" rounded="$bew-radius"
+            px-4 lh-35px h-35px bg="$bew-elevated hover:$bew-elevated-hover" rounded="$bew-radius"
             cursor-pointer shadow="$bew-shadow-1" box-border border="1 $bew-border-color" duration-300
             flex="~ gap-2 items-center" relative
             @click="handleChangeTab(tab)"
@@ -221,7 +221,7 @@ function toggleTabContentLoading(loading: boolean) {
         <div
           v-if="settings.enableGridLayoutSwitcher"
           style="backdrop-filter: var(--bew-filter-glass-1)"
-          flex="~ gap-1 shrink-0" p-1 h-35px bg="$bew-elevated-1" transform-gpu
+          flex="~ gap-1 shrink-0" p-1 h-35px bg="$bew-elevated" transform-gpu
           ml-auto rounded="$bew-radius" shadow="$bew-shadow-1" box-border border="1 $bew-border-color"
         >
           <div
diff --git a/src/contentScripts/views/Home/components/ForYou.vue b/src/contentScripts/views/Home/components/ForYou.vue
index 355dff09..24f150f0 100644
--- a/src/contentScripts/views/Home/components/ForYou.vue
+++ b/src/contentScripts/views/Home/components/ForYou.vue
@@ -434,7 +434,7 @@ defineExpose({ initData })
       <div
         style="backdrop-filter: var(--bew-filter-glass-1);"
         :style="{ transform: `translate(${videoOptionsPosition.left}, ${videoOptionsPosition.top})` }"
-        p-2 bg="$bew-elevated-1" rounded="$bew-radius" pos="absolute top-0 left-0"
+        p-2 bg="$bew-elevated" rounded="$bew-radius" pos="absolute top-0 left-0"
         w-150px m="t-4 l-[calc(-150px+1rem)]"
         shadow="$bew-shadow-1" z-10
       >
diff --git a/src/styles/adaptedStyles/articlesPage.scss b/src/styles/adaptedStyles/articlesPage.scss
index 803dcf17..99b701b6 100644
--- a/src/styles/adaptedStyles/articlesPage.scss
+++ b/src/styles/adaptedStyles/articlesPage.scss
@@ -324,12 +324,12 @@
     .bili-dialog-bomb .appeal-box,
     .modalBox,
     .article-up-info .nameplate-ctnr {
-      background-color: var(--bew-elevated-solid-1);
+      background-color: var(--bew-elevated-solid);
     }
 
     .fixed-top-header,
     .modal-box-holder .modal-box {
-      background-color: var(--bew-elevated-solid-2);
+      background-color: var(--bew-elevated-solid);
     }
 
     .page-content .right-side .rank-module .rank-list .item .rank-index,
@@ -396,7 +396,7 @@
 
     .to-top,
     .share-success-dialog {
-      border-color: var(--bew-elevated-solid-1);
+      border-color: var(--bew-elevated-solid);
     }
 
     .rql-editor .ql-editor blockquote {
diff --git a/src/styles/adaptedStyles/common.scss b/src/styles/adaptedStyles/common.scss
index f397c3d5..e6088ec7 100644
--- a/src/styles/adaptedStyles/common.scss
+++ b/src/styles/adaptedStyles/common.scss
@@ -30,7 +30,7 @@
   &.dark {
     .card-loaded,
     .van-popover {
-      background-color: var(--bew-elevated-solid-1);
+      background-color: var(--bew-elevated-solid);
     }
   }
   // #endregion
diff --git a/src/styles/adaptedStyles/homePage.scss b/src/styles/adaptedStyles/homePage.scss
index 26f1ff50..cc7f4ee3 100644
--- a/src/styles/adaptedStyles/homePage.scss
+++ b/src/styles/adaptedStyles/homePage.scss
@@ -12,7 +12,7 @@
   .header-channel {
     background-color: transparent;
     backdrop-filter: var(--bew-filter-glass-1);
-    background: var(--bew-elevated-1);
+    background: var(--bew-elevated);
     border-radius: var(--bew-radius);
     margin: 10px 20px;
     width: calc(100% - 40px);
diff --git a/src/styles/adaptedStyles/loginDialog.scss b/src/styles/adaptedStyles/loginDialog.scss
index 6a04abde..5491a877 100644
--- a/src/styles/adaptedStyles/loginDialog.scss
+++ b/src/styles/adaptedStyles/loginDialog.scss
@@ -100,7 +100,7 @@
 
       &.el-popper,  // & -> .el-select-dropdown
       .area-code-select {
-        background-color: var(--bew-elevated-solid-1);
+        background-color: var(--bew-elevated-solid);
       }
 
       .bili-mini-login-register-wrapper .register-btn,
diff --git a/src/styles/adaptedStyles/modal.scss b/src/styles/adaptedStyles/modal.scss
index ef271519..a53fa2ac 100644
--- a/src/styles/adaptedStyles/modal.scss
+++ b/src/styles/adaptedStyles/modal.scss
@@ -1,6 +1,6 @@
 .bewly-design.dark {
   .modal-wrapper {
-    background-color: var(--bew-elevated-solid-1);
+    background-color: var(--bew-elevated-solid);
   }
 
   .modal-wrapper .modal-title {
diff --git a/src/styles/adaptedStyles/notificationsPage.scss b/src/styles/adaptedStyles/notificationsPage.scss
index 3f295b4b..d77d5b3e 100644
--- a/src/styles/adaptedStyles/notificationsPage.scss
+++ b/src/styles/adaptedStyles/notificationsPage.scss
@@ -357,7 +357,7 @@
     .tab-list .tab-item.active::before,
     .group-helper-msg-list::after,
     .cs-actions-wrap {
-      background-color: var(--bew-elevated-solid-1);
+      background-color: var(--bew-elevated-solid);
     }
 
     .cs-q-tab-area.shadow:after {
diff --git a/src/styles/adaptedStyles/userCard.scss b/src/styles/adaptedStyles/userCard.scss
index 41aed238..1922cf99 100644
--- a/src/styles/adaptedStyles/userCard.scss
+++ b/src/styles/adaptedStyles/userCard.scss
@@ -16,7 +16,7 @@
   // #region old user card styles
   &.dark {
     #id-card {
-      background-color: var(--bew-elevated-solid-1);
+      background-color: var(--bew-elevated-solid);
 
       .idc-uname[style*="color"],
       .idc-uname:hover {
diff --git a/src/styles/adaptedStyles/userSpacePage.scss b/src/styles/adaptedStyles/userSpacePage.scss
index 37c43e99..f35ec845 100644
--- a/src/styles/adaptedStyles/userSpacePage.scss
+++ b/src/styles/adaptedStyles/userSpacePage.scss
@@ -621,7 +621,7 @@
     .follow-dialog-wrap .follow-dialog-window .title,
     .follow-dialog-wrap .follow-dialog-window .content,
     .bili-at-popup__user--selected {
-      background-color: var(--bew-elevated-solid-1);
+      background-color: var(--bew-elevated-solid);
     }
 
     .series-item .split-line,
diff --git a/src/styles/adaptedStyles/videoPage.scss b/src/styles/adaptedStyles/videoPage.scss
index 1c43f16f..4b7dda3d 100644
--- a/src/styles/adaptedStyles/videoPage.scss
+++ b/src/styles/adaptedStyles/videoPage.scss
@@ -279,16 +279,16 @@
 
     .note-pc .note-container,
     .note-detail {
-      background-color: var(--bew-elevated-solid-1);
+      background-color: var(--bew-elevated-solid);
     }
 
     .note-pc .note-container .note-header {
-      background-color: var(--bew-elevated-solid-1) !important;
+      background-color: var(--bew-elevated-solid) !important;
     }
 
     .note-detail .note-operation .sanlian-box,
     .ql-snow .ql-picker-options {
-      background-color: var(--bew-elevated-solid-2);
+      background-color: var(--bew-elevated-solid);
     }
 
     .resizable-component .editor-innter {
diff --git a/src/styles/adaptedStyles/watchLaterPage.scss b/src/styles/adaptedStyles/watchLaterPage.scss
index fe5a4fb3..c984e28e 100644
--- a/src/styles/adaptedStyles/watchLaterPage.scss
+++ b/src/styles/adaptedStyles/watchLaterPage.scss
@@ -63,7 +63,7 @@
     }
 
     .bili-dialog .con {
-      background-color: var(--bew-elevated-solid-1);
+      background-color: var(--bew-elevated-solid);
     }
   }
   // #endregion
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 882c9acf..3f65f3bf 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -122,7 +122,7 @@ img {
 // Adapt the colors of the two Bilibili Evolved's buttons on the left side to BewlyBewly theme
 .bewly-design {
   .be-settings > .sidebar > * {
-    background-color: var(--bew-elevated-solid-1) !important;
+    background-color: var(--bew-elevated-solid) !important;
     opacity: 0.4;
 
     &:hover {
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 3dbd7d00..7910afd0 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -153,15 +153,15 @@
 
   // `--bew-elevated-*` for popup, dialog and difference layers with difference elevation levels
   // #region `--bew-elevated-*` background colors
-  --bew-elevated-1: hsl(0 0% 100% / var(--bew-content-opacity));
-  --bew-elevated-1-hover: hsl(0 0% 85% / var(--bew-content-opacity));
-  --bew-elevated-2: hsl(0 0% 100% / var(--bew-content-opacity));
-  --bew-elevated-2-hover: hsl(0 0% 85% / var(--bew-content-opacity));
+  --bew-elevated: hsl(0 0% 100% / var(--bew-content-opacity));
+  --bew-elevated-hover: hsl(0 0% 85% / var(--bew-content-opacity));
+  --bew-elevated: hsl(0 0% 100% / var(--bew-content-opacity));
+  --bew-elevated-hover: hsl(0 0% 85% / var(--bew-content-opacity));
 
-  --bew-elevated-solid-1: hsl(0 0% 100%);
-  --bew-elevated-solid-1-hover: hsl(0 0% 85%);
-  --bew-elevated-solid-2: hsl(0 0% 100%);
-  --bew-elevated-solid-2-hover: hsl(0 0% 85%);
+  --bew-elevated-solid: hsl(0 0% 100%);
+  --bew-elevated-solid-hover: hsl(0 0% 85%);
+  --bew-elevated-solid: hsl(0 0% 100%);
+  --bew-elevated-solid-hover: hsl(0 0% 85%);
   // #endregion
   // #endregion
 
@@ -222,15 +222,11 @@
   --bew-content-solid-2: hsl(240 14% 15%);
   --bew-content-solid-2-hover: hsl(240 14% 31%);
 
-  --bew-elevated-1: hsl(230 12% 15% / var(--bew-content-opacity));
-  --bew-elevated-1-hover: hsl(230 12% 31% / var(--bew-content-opacity));
-  --bew-elevated-2: hsl(230 12% 18% / var(--bew-content-opacity));
-  --bew-elevated-2-hover: hsl(230 12% 34% / var(--bew-content-opacity));
+  --bew-elevated: hsl(230 12% 16% / var(--bew-content-opacity));
+  --bew-elevated-hover: hsl(230 12% 32% / var(--bew-content-opacity));
 
-  --bew-elevated-solid-1: hsl(230 12% 15%);
-  --bew-elevated-solid-1-hover: hsl(230 12% 31%);
-  --bew-elevated-solid-2: hsl(230 12% 18%);
-  --bew-elevated-solid-2-hover: hsl(230 12% 34%);
+  --bew-elevated-solid: hsl(230 12% 16%);
+  --bew-elevated-solid-hover: hsl(230 12% 32%);
 
   --bew-fill-1: rgb(131 131 145 / 14%);
   --bew-fill-2: rgb(131 131 145 / 24%);
@@ -296,8 +292,8 @@
   --bg1: var(--bew-bg);
   --bg2: var(--bew-content-solid-2);
   --bg3: var(--bew-content-solid-2);
-  --bg1_float: var(--bew-elevated-solid-1);
-  --bg2_float: var(--bew-elevated-solid-2);
+  --bg1_float: var(--bew-elevated-solid);
+  --bg2_float: var(--bew-elevated-solid);
   --text_white: var(--Wh0_u);
   --text1: var(--bew-text-1);
   --text2: var(--bew-text-2);
@@ -311,7 +307,7 @@
   --graph_white: var(--bew-content-solid-1);
   --graph_bg_thin: var(--bew-content-solid-1);
   --graph_bg_regular: var(--bew-content-solid-1);
-  --graph_bg_thick: var(--bew-elevated-solid-2);
+  --graph_bg_thick: var(--bew-elevated-solid);
   --graph_weak: var(--Ga3);
   --graph_medium: var(--Ga5);
   --graph_icon: var(--Ga7);