From 70c5568b17516082b539b9ae5e4c92aea34abceb Mon Sep 17 00:00:00 2001
From: ADNY <66500121+ErKeLost@users.noreply.github.com>
Date: Mon, 22 Jan 2024 14:32:28 +0800
Subject: [PATCH] chore: update global css (#54)

---
 src/css/_admonition.scss | 110 +++++++++++++++++++++++----------------
 src/css/custom.scss      |   3 +-
 src/css/token.css        |  15 +++++-
 3 files changed, 79 insertions(+), 49 deletions(-)

diff --git a/src/css/_admonition.scss b/src/css/_admonition.scss
index 365671537..dd2cdd972 100644
--- a/src/css/_admonition.scss
+++ b/src/css/_admonition.scss
@@ -1,32 +1,37 @@
 html[data-theme="light"] {
   --note-color: #241800;
 
-  --admonition-note-c-bg: linear-gradient(to bottom,
-      var(--ifm-alert-note-background-color),
-      transparent 40%);
-  ;
-  --admonition-info-c-bg: linear-gradient(to bottom,
-      var(--ifm-alert-info-background-color),
-      transparent 40%);
-  ;
-  --admonition-tip-c-bg: linear-gradient(to bottom,
-      var(--ifm-alert-tip-background-color),
-      transparent 40%);
-  ;
-  --admonition-warning-c-bg: linear-gradient(to bottom,
-      var(--ifm-alert-warning-background-color),
-      transparent 40%);
-  ;
-  --admonition-caution-c-bg: linear-gradient(to bottom,
-      var(--ifm-alert-caution-background-color),
-      transparent 40%);
-  ;
-  --admonition-danger-c-bg: linear-gradient(to bottom,
-      var(--ifm-alert-danger-background-color),
-      transparent 40%);
-  ;
-
-  --admonition-note-c-color: inherit;
+  --admonition-note-c-bg: linear-gradient(
+    to bottom,
+    var(--ifm-alert-note-background-color),
+    transparent 40%
+  );
+  --admonition-info-c-bg: linear-gradient(
+    to bottom,
+    var(--ifm-alert-info-background-color),
+    transparent 40%
+  );
+  --admonition-tip-c-bg: linear-gradient(
+    to bottom,
+    var(--ifm-alert-tip-background-color),
+    transparent 40%
+  );
+  --admonition-warning-c-bg: linear-gradient(
+    to bottom,
+    var(--ifm-alert-warning-background-color),
+    transparent 40%
+  );
+  --admonition-caution-c-bg: linear-gradient(
+    to bottom,
+    var(--ifm-alert-caution-background-color),
+    transparent 40%
+  );
+  --admonition-danger-c-bg: linear-gradient(
+    to bottom,
+    var(--ifm-alert-danger-background-color),
+    transparent 40%
+  );
+  --admonition-note-c-color: #ff9ff3;
   --admonition-info-c-color: inherit;
   --admonition-tip-c-color: inherit;
   --admonition-warning-c-color: inherit;
@@ -137,18 +142,22 @@ html[data-theme="dark"] {
     --admonition-bar-c-bg: var(--admonition-bar-note-c-bg);
     --admonition-code-c-bg: var(--admonition-code-note-c-bg);
     --admonition-link-c: var(--admonition-link-note-c);
-    border: 2px solid var(--c-yellow-220);
-    background: var(--admonition-warning-c-bg);
-    color: var(--admonition-warning-c-color);
+    border: 2px solid var(--c-yellow-90-a);
+    // background: var(--admonition-warning-c-bg);
+    // color: var(--admonition-warning-c-color);
+    background: transparent;
+    color: var(--c-yellow-90);
   }
 
   &-note {
     --admonition-bar-c-bg: var(--admonition-bar-note-c-bg);
     --admonition-code-c-bg: var(--admonition-code-note-c-bg);
     --admonition-link-c: var(--admonition-link-note-c);
-    border: 2px solid var(--ifm-menu-color-background-active);
-    background: var(--admonition-note-c-bg);
-    color: var(--admonition-note-c-color);
+    border: 2px solid var(--c-brand-a);
+    // background: var(--admonition-note-c-bg);
+    // color: var(--admonition-note-c-color);
+    background: transparent;
+    color: var(--c-brand);
   }
 
   &-info {
@@ -156,18 +165,22 @@ html[data-theme="dark"] {
     --admonition-bar-c-bg: var(--admonition-bar-info-c-bg);
     --admonition-code-c-bg: var(--admonition-code-info-c-bg);
     --admonition-link-c: var(--admonition-link-info-c);
-    border: 2px solid var(--c-teal-210);
-    background: var(--admonition-info-c-bg);
-    color: var(--admonition-info-c-color);
+    border: 2px solid var(--c-teal-60-a);
+    // background: var(--admonition-info-c-bg);
+    // color: var(--admonition-info-c-color);
+    background: transparent;
+    color: var(--c-teal-60);
   }
 
   &-tip {
     --admonition-bar-c-bg: var(--admonition-bar-tip-c-bg);
     --admonition-code-c-bg: var(--admonition-code-tip-c-bg);
     --admonition-link-c: var(--admonition-link-tip-c);
-    border: 2px solid var(--admonition-tip-border);
-    background: var(--admonition-tip-c-bg);
-    color: var(--admonition-tip-c-color);
+    border: 2px solid var(--c-green-50-a);
+    // background: var(--admonition-tip-c-bg);
+    // color: var(--admonition-tip-c-color);
+    background: transparent;
+    color: var(--c-green-50);
   }
 
   &-caution {
@@ -175,8 +188,9 @@ html[data-theme="dark"] {
     --admonition-bar-c-bg: var(--admonition-bar-caution-c-bg);
     --admonition-code-c-bg: var(--admonition-code-caution-c-bg);
     --admonition-link-c: var(--admonition-link-caution-c);
-    background: var(--admonition-caution-c-bg);
-    color: var(--admonition-caution-c-color);
+    // background: var(--admonition-caution-c-bg);
+    // color: var(--admonition-caution-c-color);
+    background: transparent;
   }
 
   &-danger {
@@ -184,9 +198,11 @@ html[data-theme="dark"] {
     --admonition-bar-c-bg: var(--admonition-bar-danger-c-bg);
     --admonition-code-c-bg: var(--admonition-code-danger-c-bg);
     --admonition-link-c: var(--admonition-link-danger-c);
-    border: 2px solid var(--c-red-210);
-    background: var(--admonition-danger-c-bg);
-    color: var(--admonition-danger-c-color);
+    border: 2px solid var(--c-red-50-a);
+    // background: var(--admonition-danger-c-bg);
+    // color: var(--admonition-danger-c-color);
+    background: transparent;
+    color: var(--c-red-50);
   }
 
   &-important {
@@ -195,9 +211,11 @@ html[data-theme="dark"] {
     --admonition-code-c-bg: var(--admonition-code-danger-c-bg);
     --admonition-link-c: var(--admonition-link-danger-c);
     border: 2px solid var(--c-lavender-220);
-    background: linear-gradient(to bottom,
-        var(--ifm-alert-background-color),
-        transparent);
+    background: linear-gradient(
+      to bottom,
+      var(--ifm-alert-background-color),
+      transparent
+    );
   }
 }
 
diff --git a/src/css/custom.scss b/src/css/custom.scss
index f9550eb9b..c42aa0f87 100644
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@@ -61,6 +61,7 @@
   --z-backdrop: 1100;
   --ifm-menu-color-background-active: #ff9ff330;
   --ifm-menu-color-background: #ff9ff310;
+  --docusaurus-highlighted-code-line-bg: #ff9ff310;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -172,7 +173,7 @@ div[class^="announcementBar_"] {
 }
 
 .code-block-highlight-line {
-  background-color: #666;
+  background-color: var(--docusaurus-highlighted-code-line-bg);
   display: block;
   margin: 0 calc(-1 * var(--ifm-pre-padding));
   padding: 0 var(--ifm-pre-padding);
diff --git a/src/css/token.css b/src/css/token.css
index 47b998e18..c84605bb1 100644
--- a/src/css/token.css
+++ b/src/css/token.css
@@ -61,7 +61,7 @@
   --c-green-30: #a7f1bb;
   --c-green-40: #80e89d;
   --c-green-50: #62e085;
-  --c-green-50-a: #62e08570;
+  --c-green-50-a: #62e08560;
   --c-green-60: #4ada71;
   --c-green-70: #2dd55b;
   --c-green-80: #17c948;
@@ -142,6 +142,8 @@
   --c-purple-180: #0d0038;
   --c-purple-190: #0b0030;
   --c-purple-200: #080022;
+  --c-brand: #8f1a7f;
+  --c-brand-a: #8f1a7f60;
   --c-pink-0: #ffeff5;
   --c-pink-10: #ffe3ed;
   --c-pink-20: #ffd8e5;
@@ -169,6 +171,7 @@
   --c-red-30: #feb7bc;
   --c-red-40: #fc9aa2;
   --c-red-50: #f9838c;
+  --c-red-50-a: #f9838c60;
   --c-red-60: #f56570;
   --c-red-70: #f24c58;
   --c-red-80: #ef3442;
@@ -213,13 +216,14 @@
   --c-yellow-30: #ffefbd;
   --c-yellow-30-a: #fcd28550;
   --c-yellow-40: #ffe9a3;
-  --c-yellow-50: #ffe080;
+  --c-yellow-50: #ffcb2d;
   --c-yellow-50-a: #ffd75a60;
   --c-yellow-60: #ffd75a;
   --c-yellow-60-a: #ffd75a30;
   --c-yellow-70: #ffce31;
   --c-yellow-80: #ffc409;
   --c-yellow-90: #f4b100;
+  --c-yellow-90-a: #f4b10060;
   --c-yellow-100: #eaa100;
   --c-yellow-110: #dd9800;
   --c-yellow-120: #cc8d00;
@@ -261,6 +265,7 @@
   --c-teal-40: #a2fcff;
   --c-teal-50: #8bfbff;
   --c-teal-60: #73f6fb;
+  --c-teal-60-a: #73f6fb60;
   --c-teal-70: #55ecf2;
   --c-teal-80: #35e2e9;
   --c-teal-90: #1bd2d9;
@@ -299,3 +304,9 @@
   --c-cyan-190: #011e33;
   --c-cyan-200: #01121e;
 }
+
+html[data-theme="dark"] {
+  --c-brand: #ff9ff3;
+  --c-yellow-50: #f9d76f;
+  --c-yellow-50-a: #ffd75a60;
+}