From fc36f8b66de7ebe2c190a4a69bdb5eb167da875d Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Thu, 27 Jan 2022 04:41:19 +0800
Subject: [PATCH] Improve the color of prompts

---
 _sass/addon/commons.scss           | 49 ++++++++++++++----------------
 _sass/addon/module.scss            |  1 -
 _sass/addon/syntax.scss            | 37 +++++++++++-----------
 _sass/colors/dark-syntax.scss      |  4 ---
 _sass/colors/dark-typography.scss  |  2 +-
 _sass/colors/light-syntax.scss     |  7 +++--
 _sass/colors/light-typography.scss | 12 +++++---
 7 files changed, 53 insertions(+), 59 deletions(-)

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index e78a44a..033865e 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -3,35 +3,29 @@
 */
 @import url('https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;900&display=swap');
 
-@mixin mode-toggle($dark-mode: false) {
-  @if $dark-mode {
-    @include dark-scheme;
-  } @else {
-    @include light-scheme;
-  }
-}
+html {
+  @media (prefers-color-scheme: light) {
+    &:not([data-mode]),
+    [data-mode=light] {
+      @include light-scheme;
+    }
 
-html:not([data-mode]),
-html[data-mode=light] {
-  @include mode-toggle();
-}
-
-html[data-mode=dark] {
-  @include mode-toggle(true);
-}
-
-@media (prefers-color-scheme: dark) {
-  html:not([data-mode]),
-  html[data-mode=dark] {
-    @include mode-toggle(true);
+    &[data-mode=dark] {
+      @include dark-scheme;
+    }
   }
 
-  html[data-mode=light] {
-    @include mode-toggle();
-  }
-}
+  @media (prefers-color-scheme: dark) {
+    &:not([data-mode]),
+    &[data-mode=dark] {
+      @include dark-scheme;
+    }
+
+    &[data-mode=light] {
+      @include light-scheme;
+    }
+  }
 
-:root {
   font-size: 16px;
 }
 
@@ -109,10 +103,11 @@ blockquote {
     display: flex;
     border-left: 0;
     border-radius: 6px;
-    padding: 0.75rem 1rem;
+    padding: 0.75rem 1.2rem;
+    color: var(--prompt-text-color);
 
     &::before {
-      margin-right: 0.8rem;
+      margin-right: 1rem;
       font-family: "Font Awesome 5 Free";
       text-align: center;
       width: 1.25rem;
diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss
index b7f775a..3cd8223 100644
--- a/_sass/addon/module.scss
+++ b/_sass/addon/module.scss
@@ -146,7 +146,6 @@
 @mixin prompt($type, $fw-icon, $icon-weight: 900) {
   &.prompt-#{$type} {
     background-color: var(--prompt-#{$type}-bg);
-    color: var(--prompt-text-color);
 
     &::before {
       content: $fw-icon;
diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss
index dd7a000..ff8795f 100644
--- a/_sass/addon/syntax.scss
+++ b/_sass/addon/syntax.scss
@@ -5,23 +5,27 @@
 @import "colors/light-syntax";
 @import "colors/dark-syntax";
 
-html:not([data-mode]),
-html[data-mode=light] {
-  @include light-syntax;
-}
+html {
+  @media (prefers-color-scheme: light) {
+    &:not([data-mode]),
+    [data-mode=light] {
+      @include light-syntax;
+    }
 
-html[data-mode=dark] {
-  @include dark-syntax;
-}
-
-@media (prefers-color-scheme: dark) {
-  html:not([data-mode]),
-  html[data-mode=dark] {
-    @include dark-syntax;
+    &[data-mode=dark] {
+      @include dark-syntax;
+    }
   }
 
-  html[data-mode=light] {
-    @include light-syntax;
+  @media (prefers-color-scheme: dark) {
+    &:not([data-mode]),
+    &[data-mode=dark] {
+      @include dark-syntax;
+    }
+
+    &[data-mode=light] {
+      @include light-syntax;
+    }
   }
 }
 
@@ -110,11 +114,6 @@ code {
     background-color: var(--inline-code-bg);
   }
 
-  [class^="prompt-"] & {
-    background-color: var(--prompt-code-bg);
-    color: var(--prompt-code-text-color);
-  }
-
   &.filepath {
     background-color: inherit;
     color: var(--filepath-text-color);
diff --git a/_sass/colors/dark-syntax.scss b/_sass/colors/dark-syntax.scss
index d988ed5..8030487 100644
--- a/_sass/colors/dark-syntax.scss
+++ b/_sass/colors/dark-syntax.scss
@@ -80,10 +80,6 @@
   --clipboard-checked-color: #2bcc2b;
   --filepath-text-color: #bdbdbd;
 
-  /* the code of prompts */
-  --prompt-code-bg: rgb(38 38 38 / 47%);
-  --prompt-code-text-color: var(--highlighter-rouge-color);
-
   .highlight {
     .gp { color: #818c96; }
   }
diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss
index e7d6e2a..f4eb5f2 100644
--- a/_sass/colors/dark-typography.scss
+++ b/_sass/colors/dark-typography.scss
@@ -75,7 +75,7 @@
   --prompt-warning-bg: rgb(90 69 3 / 95%);
   --prompt-warning-icon-color: rgb(255 165 0 / 80%);
   --prompt-danger-bg: rgb(86 28 8 / 80%);
-  --prompt-danger-icon-color: rgb(255 0 0 / 60%);
+  --prompt-danger-icon-color: #cd0202;
 
   /* tags */
   --tag-border: rgb(59, 79, 88);
diff --git a/_sass/colors/light-syntax.scss b/_sass/colors/light-syntax.scss
index df5b24d..236e568 100644
--- a/_sass/colors/light-syntax.scss
+++ b/_sass/colors/light-syntax.scss
@@ -76,8 +76,9 @@
   --code-header-icon-color: #d1d1d1;
   --clipboard-checked-color: #43c743;
 
-  /* the code of prompts */
-  --prompt-code-bg: rgb(219 217 217 / 35%);
-  --prompt-code-text-color: rgb(78 78 84);
+  [class^=prompt-] {
+    --inline-code-bg: #fbfafa;
+    --highlighter-rouge-color: rgb(82 82 82);
+  }
 
 } /* light-syntax */
diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss
index 1031ab5..8475368 100644
--- a/_sass/colors/light-typography.scss
+++ b/_sass/colors/light-typography.scss
@@ -68,13 +68,17 @@
   --kbd-wrap-color: #bdbdbd;
   --kbd-text-color: var(--text-color);
   --kbd-bg-color: white;
-  --prompt-text-color: rgb(70 70 70 / 90%);
+  --prompt-text-color: rgb(46 46 46 / 77%);
   --prompt-note-bg: rgb(123 247 144 / 20%);
-  --prompt-note-icon-color: green;
+  --prompt-note-icon-color: #03b303;
   --prompt-warning-bg: rgb(255 243 205);
-  --prompt-warning-icon-color: rgb(215 138 24);
+  --prompt-warning-icon-color: #ef9c03;
   --prompt-danger-bg: rgb(248 215 218 / 56%);
-  --prompt-danger-icon-color: #b31d1d;
+  --prompt-danger-icon-color: #df3c30;
+
+  [class^=prompt-] {
+    --link-underline-color: rgb(219 216 216);
+  }
 
   /* Categories */
   --categories-hover-bg: var(--btn-border-color);