From 056c6da1cf50d361939b3a3c87dd4360741f6f4f Mon Sep 17 00:00:00 2001
From: Han Sol Jin <hansol@hansol.ca>
Date: Tue, 24 Sep 2024 17:12:43 -0700
Subject: [PATCH] feat(theme): containers: add the success custom block

This adds a custom block with the `success` keyword, which is a green
container.

The colours for this container already exist in vars.css
(--vp-c-success*), which, before this commit, is completely unused
outside of generating a diff.

For example, this can be used for messages such as:
```
::: success

You have completed the walkthrough!

:::
```
---
 docs/en/guide/markdown.md                     |  9 +++++++++
 .../styles/components/custom-block.css        | 20 +++++++++++++++++++
 src/client/theme-default/styles/vars.css      |  5 +++++
 src/node/markdown/plugins/containers.ts       |  8 ++++++++
 4 files changed, 42 insertions(+)

diff --git a/docs/en/guide/markdown.md b/docs/en/guide/markdown.md
index 9eb4c0e791f3..c6f6753027b1 100644
--- a/docs/en/guide/markdown.md
+++ b/docs/en/guide/markdown.md
@@ -149,6 +149,10 @@ This is a warning.
 This is a dangerous warning.
 :::
 
+::: success
+This is a success notice.
+:::
+
 ::: details
 This is a details block.
 :::
@@ -172,6 +176,10 @@ This is a warning.
 This is a dangerous warning.
 :::
 
+::: success
+This is a success notice.
+:::
+
 ::: details
 This is a details block.
 :::
@@ -218,6 +226,7 @@ export default defineConfig({
       warningLabel: '警告',
       dangerLabel: '危险',
       infoLabel: '信息',
+      successLabel: '成功',
       detailsLabel: '详细信息'
     }
   }
diff --git a/src/client/theme-default/styles/components/custom-block.css b/src/client/theme-default/styles/components/custom-block.css
index a960381c695c..bc90c155b3f5 100644
--- a/src/client/theme-default/styles/components/custom-block.css
+++ b/src/client/theme-default/styles/components/custom-block.css
@@ -166,6 +166,26 @@
   background-color: var(--vp-custom-block-details-code-bg);
 }
 
+.custom-block.success {
+  border-color: var(--vp-custom-block-success-border);
+  color: var(--vp-custom-block-success-text);
+  background-color: var(--vp-custom-block-success-bg);
+}
+
+.custom-block.success a,
+.custom-block.success code {
+  color: var(--vp-c-brand-1);
+}
+
+.custom-block.success a:hover,
+.custom-block.success a:hover > code {
+  color: var(--vp-c-brand-2);
+}
+
+.custom-block.success code {
+  background-color: var(--vp-custom-block-success-code-bg);
+}
+
 .custom-block-title {
   font-weight: 600;
 }
diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css
index 8d75d59b9db9..0624fa9ade89 100644
--- a/src/client/theme-default/styles/vars.css
+++ b/src/client/theme-default/styles/vars.css
@@ -446,6 +446,11 @@
   --vp-custom-block-caution-bg: var(--vp-c-caution-soft);
   --vp-custom-block-caution-code-bg: var(--vp-c-caution-soft);
 
+  --vp-custom-block-success-border: transparent;
+  --vp-custom-block-success-text: var(--vp-c-text-1);
+  --vp-custom-block-success-bg: var(--vp-c-success-soft);
+  --vp-custom-block-success-code-bg: var(--vp-c-success-soft);
+
   --vp-custom-block-details-border: var(--vp-custom-block-info-border);
   --vp-custom-block-details-text: var(--vp-custom-block-info-text);
   --vp-custom-block-details-bg: var(--vp-custom-block-info-bg);
diff --git a/src/node/markdown/plugins/containers.ts b/src/node/markdown/plugins/containers.ts
index bbed26ae85a7..bb113e706d91 100644
--- a/src/node/markdown/plugins/containers.ts
+++ b/src/node/markdown/plugins/containers.ts
@@ -32,6 +32,13 @@ export const containerPlugin = (
         md
       )
     )
+    .use(
+      ...createContainer(
+        'success',
+        containerOptions?.successLabel || 'SUCCESS',
+        md
+      )
+    )
     .use(
       ...createContainer(
         'details',
@@ -138,4 +145,5 @@ export interface ContainerOptions {
   detailsLabel?: string
   importantLabel?: string
   cautionLabel?: string
+  successLabel?: string
 }