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! ::: ``` Signed-off-by: Han Sol Jin <[email protected]>
vuejs · Sep 25, 2024 · 34de3cc · 34de3cc
1 parent 68150a6
commit 34de3cc
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
 }