From 5c57eb9550b8bb249cea05be6b3013f60dd8ae48 Mon Sep 17 00:00:00 2001
From: satotake <doublequotation@gmail.com>
Date: Sun, 2 Jan 2022 19:58:02 +0900
Subject: [PATCH] =?UTF-8?q?docs:=20=F0=9F=92=84fix=20color=20contrast=20of?=
 =?UTF-8?q?=20admonitions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Color contrast of in adomonitions is so low:

* [Light mode] : `<code>`
* [Dark modr] : `<div class="admonition-content">`

This happens because custom style for `<code>` overrides original colors.
Fix this.

Signed-off-by: satotake <doublequotation@gmail.com>
---
 website/src/css/custom.scss | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/website/src/css/custom.scss b/website/src/css/custom.scss
index f35991a7..98916c97 100644
--- a/website/src/css/custom.scss
+++ b/website/src/css/custom.scss
@@ -103,6 +103,9 @@ h2 {
 code {
   margin: 0 1px;
   color: var(--ifm-code-color);
+  .alert & {
+    color: var(--ifm-alert-foreground-color);
+  }
 }
 
 .markdown {
@@ -618,7 +621,7 @@ img[alt="github-contribute"] {
     .admonition-#{$name} .admonition-icon::before {
       mask: url($path);
       content: "";
-      background-color: var(--ifm-color-primary-dark);
+      background-color: var(--ifm-alert-foreground-color);
       display: block;
       width: 22px;
       height: 22px;
@@ -636,14 +639,3 @@ img[alt="github-contribute"] {
 
 $alert: secondary, success, info, warning, danger;
 
-@each $name in $alert {
-  $color: if(
-    $name==danger,
-    var(--ifm-color-primary-light),
-    var(--ifm-color-primary-dark)
-  );
-
-  .admonition.alert--#{$name} {
-    color: $color;
-  }
-}