From ef50a7f7fbb5cbd71dd6b565e8631e1d5b4342ab Mon Sep 17 00:00:00 2001
From: Ju4tCode <42488585+yanyongyu@users.noreply.github.com>
Date: Mon, 25 Sep 2023 09:00:03 +0000
Subject: [PATCH] :lipstick: Add color transition to components

---
 packages/theme-nonepress/src/theme/CodeBlock/styles.css | 4 +++-
 packages/theme-nonepress/src/theme/Sidebar/styles.css   | 2 +-
 packages/theme-nonepress/src/theme/TOC/styles.css       | 2 +-
 packages/theme-nonepress/src/theme/Tabs/styles.css      | 2 ++
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/theme-nonepress/src/theme/CodeBlock/styles.css b/packages/theme-nonepress/src/theme/CodeBlock/styles.css
index 6c09191..e9b01c2 100644
--- a/packages/theme-nonepress/src/theme/CodeBlock/styles.css
+++ b/packages/theme-nonepress/src/theme/CodeBlock/styles.css
@@ -5,6 +5,7 @@
 
     @apply relative w-full max-w-full h-auto overflow-hidden;
     @apply rounded-box leading-6;
+    @apply transition-[color,background-color] duration-500;
   }
 
   &-title {
@@ -70,7 +71,8 @@
 
     &-number {
       overflow-wrap: normal;
-      background-color: var(--prism-background-color);
+
+      /* background-color: var(--prism-background-color); */
 
       @apply table-cell sticky left-0 text-right px-4 select-none w-[1%];
 
diff --git a/packages/theme-nonepress/src/theme/Sidebar/styles.css b/packages/theme-nonepress/src/theme/Sidebar/styles.css
index dc7e9b4..d2ff7b5 100644
--- a/packages/theme-nonepress/src/theme/Sidebar/styles.css
+++ b/packages/theme-nonepress/src/theme/Sidebar/styles.css
@@ -23,7 +23,7 @@
 
   &-curtain {
     @apply sticky bottom-0 w-full h-8 z-10;
-    @apply bg-gradient-to-t from-base-100/80;
+    @apply bg-base-100 [mask-image:linear-gradient(transparent,#000000)];
     @apply transition-[background-color] duration-500;
   }
 }
diff --git a/packages/theme-nonepress/src/theme/TOC/styles.css b/packages/theme-nonepress/src/theme/TOC/styles.css
index 93a2c03..f1ebc1c 100644
--- a/packages/theme-nonepress/src/theme/TOC/styles.css
+++ b/packages/theme-nonepress/src/theme/TOC/styles.css
@@ -11,7 +11,7 @@
 
   &-curtain {
     @apply sticky bottom-0 w-full h-8 z-10;
-    @apply bg-gradient-to-t from-base-100/80;
+    @apply bg-base-100 [mask-image:linear-gradient(transparent,#000000)];
     @apply transition-[background-color] duration-500;
   }
 
diff --git a/packages/theme-nonepress/src/theme/Tabs/styles.css b/packages/theme-nonepress/src/theme/Tabs/styles.css
index 617b643..d40ab87 100644
--- a/packages/theme-nonepress/src/theme/Tabs/styles.css
+++ b/packages/theme-nonepress/src/theme/Tabs/styles.css
@@ -14,6 +14,8 @@
   &-item {
     --tab-border-color: transparent;
 
+    @apply transition-[color,background-color] duration-500;
+
     &-active {
       --tab-border-color: hsl(var(--bc) / 10%);
     }