feat: re-design container colors (#1348)

web-infra-dev · Aug 22, 2024 · 05f0ebd · 05f0ebd
1 parent fd111ef
commit 05f0ebd
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 45 deletions.
diff --git a/packages/document/docs/en/guide/basic/use-mdx.mdx b/packages/document/docs/en/guide/basic/use-mdx.mdx
@@ -87,6 +87,10 @@ You can use the `:::` syntax to create custom containers and support custom titl
 **Input:**
 
 ```markdown
+:::note
+This is a `block` of type `note`
+:::
+
 :::tip
 This is a `block` of type `tip`
 :::
@@ -118,6 +122,10 @@ This is a `block` of `Custom Title`
 
 **Output:**
 
+:::note
+This is a `block` of type `note`
+:::
+
 :::tip
 This is a `block` of type `tip`
 :::

diff --git a/packages/document/docs/zh/guide/basic/use-mdx.mdx b/packages/document/docs/zh/guide/basic/use-mdx.mdx
@@ -87,6 +87,10 @@ title: Hello World
 **输入：**
 
 ```markdown
+:::note
+这是一个 `note` 类型的 `block`
+:::
+
 :::tip
 这是一个 `tip` 类型的 `block`
 :::
@@ -118,6 +122,10 @@ title: Hello World
 
 **输出：**
 
+:::note
+这是一个 `note` 类型的 `block`
+:::
+
 :::tip
 这是一个 `tip` 类型的 `block`
 :::

diff --git a/packages/plugin-container-syntax/container.css b/packages/plugin-container-syntax/container.css
@@ -2,31 +2,45 @@
   * Container Style
  */
 :root {
-  --rp-container-info-border: rgba(7, 156, 112, 0.3);
-  --rp-container-info-text: #399c70;
-  --rp-container-info-bg: rgba(7, 156, 112, 0.06);
-  --rp-container-info-code-bg: rgba(7, 156, 112, 0.1);
-
-  --rp-container-warning-border: rgba(255, 197, 23, 0.5);
-  --rp-container-warning-text: #ad850e;
+  --rp-container-note-border: var(--rp-c-divider-light);
+  --rp-container-note-text: var(--rp-c-text-1);
+  --rp-container-note-bg: var(--rp-c-bg-soft);
+  --rp-container-note-code-bg: rgba(128, 128, 128, 0.1);
+  --rp-container-note-link: var(--rp-c-link);
+
+  --rp-container-tip-border: rgba(7, 156, 112, 0.2);
+  --rp-container-tip-text: #278359;
+  --rp-container-tip-bg: rgba(7, 156, 112, 0.06);
+  --rp-container-tip-code-bg: rgba(7, 156, 112, 0.1);
+
+  --rp-container-info-border: rgba(0, 149, 255, 0.2);
+  --rp-container-info-text: #07f;
+  --rp-container-info-bg: rgba(0, 149, 255, 0.06);
+  --rp-container-info-code-bg: rgba(0, 149, 255, 0.1);
+
+  --rp-container-warning-border: rgba(255, 197, 23, 0.4);
+  --rp-container-warning-text: #887233;
   --rp-container-warning-bg: rgba(255, 197, 23, 0.1);
   --rp-container-warning-code-bg: rgba(255, 197, 23, 0.1);
 
-  --rp-container-danger-border: rgba(237, 60, 80, 0.3);
+  --rp-container-danger-border: rgba(237, 60, 80, 0.2);
   --rp-container-danger-text: #ab2131;
   --rp-container-danger-bg: rgba(237, 60, 80, 0.08);
   --rp-container-danger-code-bg: rgba(237, 60, 80, 0.1);
 
-  --rp-container-details-border: rgba(128, 128, 128, 0.3);
-  --rp-container-details-text: #666666;
-  --rp-container-details-bg: rgba(128, 128, 128, 0.1);
+  --rp-container-details-border: var(--rp-c-divider-light);
+  --rp-container-details-text: var(--rp-c-text-1);
+  --rp-container-details-bg: var(--rp-c-bg-soft);
   --rp-container-details-code-bg: rgba(128, 128, 128, 0.1);
-  --rp-container-details-link: rgb(0, 119, 255);
+  --rp-container-details-link: var(--rp-c-link);
 }
 
 .dark {
-  --rp-container-info-text: rgb(66, 215, 140);
-  --rp-container-info-bg: rgba(7, 156, 112, 0.1);
+  --rp-container-tip-text: #3ec480;
+  --rp-container-tip-bg: rgba(7, 156, 112, 0.1);
+
+  --rp-container-info-text: #66c2ff;
+  --rp-container-info-bg: rgba(0, 149, 255, 0.1);
 
   --rp-container-warning-text: rgb(251, 180, 81);
   --rp-container-warning-border: rgba(255, 197, 23, 0.25);
@@ -35,10 +49,6 @@
   --rp-container-danger-text: rgb(247, 110, 133);
   --rp-container-danger-border: rgba(237, 60, 80, 0.3);
   --rp-container-danger-bg: rgba(237, 60, 80, 0.12);
-
-  --rp-container-details-text: var(--rp-text-1);
-  --rp-container-details-bg: rgba(128, 128, 128, 0.16);
-  --rp-container-details-link: rgb(0, 119, 255);
 }
 
 .rspress-doc .rspress-directive {
@@ -80,40 +90,63 @@
 .rspress-doc .rspress-directive a {
   font-weight: 500;
   transition: color 0.25s;
+  border-bottom: 1px solid currentColor;
+}
+
+.rspress-doc .rspress-directive.note {
+  border-color: var(--rp-container-note-border);
+  background-color: var(--rp-container-note-bg);
+}
+
+.rspress-doc .rspress-directive.note .rspress-directive-title {
+  color: var(--rp-container-note-text);
+}
+
+.rspress-doc .rspress-directive.note code {
+  color: var(--rp-container-note-text);
+  background-color: var(--rp-container-note-code-bg);
+}
+
+.rspress-doc .rspress-directive.note a {
+  color: var(--rp-container-note-text);
+}
+
+.rspress-doc .rspress-directive.tip {
+  border-color: var(--rp-container-tip-border);
+  background-color: var(--rp-container-tip-bg);
+}
+
+.rspress-doc .rspress-directive.tip .rspress-directive-title {
+  color: var(--rp-container-tip-text);
+}
+
+.rspress-doc .rspress-directive.tip code {
+  color: var(--rp-container-tip-text);
+  background-color: var(--rp-container-tip-code-bg);
+}
+
+.rspress-doc .rspress-directive.tip a {
+  color: var(--rp-container-tip-text);
 }
 
-.rspress-doc .rspress-directive.tip,
-.rspress-doc .rspress-directive.note,
 .rspress-doc .rspress-directive.info {
   border-color: var(--rp-container-info-border);
   background-color: var(--rp-container-info-bg);
 }
 
-.rspress-doc .rspress-directive.tip .rspress-directive-title,
-.rspress-doc .rspress-directive.note .rspress-directive-title,
 .rspress-doc .rspress-directive.info .rspress-directive-title {
   color: var(--rp-container-info-text);
 }
 
-.rspress-doc .rspress-directive.tip code,
-.rspress-doc .rspress-directive.note code,
 .rspress-doc .rspress-directive.info code {
   color: var(--rp-container-info-text);
   background-color: var(--rp-container-info-code-bg);
 }
 
-.rspress-doc .rspress-directive.tip a,
-.rspress-doc .rspress-directive.note a,
 .rspress-doc .rspress-directive.info a {
   color: var(--rp-container-info-text);
 }
 
-.rspress-doc .rspress-directive.tip a:hover,
-.rspress-doc .rspress-directive.note a:hover,
-.rspress-doc .rspress-directive.info a:hover {
-  border-bottom: 1px solid var(--rp-container-info-text);
-}
-
 .rspress-doc .rspress-directive.warning {
   border-color: var(--rp-container-warning-border);
   background-color: var(--rp-container-warning-bg);
@@ -132,10 +165,6 @@
   color: var(--rp-container-warning-text);
 }
 
-.rspress-doc .rspress-directive.warning a:hover {
-  border-bottom: 1px solid var(--rp-container-warning-text);
-}
-
 .rspress-doc .rspress-directive.caution,
 .rspress-doc .rspress-directive.danger {
   border-color: var(--rp-container-danger-border);
@@ -158,11 +187,6 @@
   color: var(--rp-container-danger-text);
 }
 
-.rspress-doc .rspress-directive.caution a:hover,
-.rspress-doc .rspress-directive.danger a:hover {
-  border-bottom: 1px solid var(--rp-container-danger-text);
-}
-
 .rspress-doc .rspress-directive.details {
   border-color: var(--rp-container-details-border);
   background-color: var(--rp-container-details-bg);
@@ -180,7 +204,3 @@
 .rspress-doc .rspress-directive.details a {
   color: var(--rp-container-details-link);
 }
-
-.rspress-doc .rspress-directive.details a:hover {
-  border-bottom: 1px solid var(--rp-container-details-link);
-}