feat(plugin-markdown-hint): rebuild styles

vuepress · Sep 20, 2024 · 3b08611 · 3b08611
1 parent 0e833ee
commit 3b08611
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 106 deletions.
diff --git a/docs/themes/default/markdown.md b/docs/themes/default/markdown.md
@@ -21,6 +21,10 @@ This is a warning
 This is a dangerous warning
 :::
 
+::: info
+This is an information.
+:::
+
 ::: important
 This is an important message
 :::
@@ -48,6 +52,10 @@ This is a warning
 This is a dangerous warning
 :::
 
+::: info
+This is an information.
+:::
+
 ::: important
 This is an important message
 :::

diff --git a/docs/zh/themes/default/markdown.md b/docs/zh/themes/default/markdown.md
@@ -21,6 +21,10 @@
 这是一个危险警告
 :::
 
+::: info
+这是一个信息
+:::
+
 ::: important
 这是一个重要信息
 :::
@@ -48,6 +52,10 @@
 这是一个危险警告
 :::
 
+::: info
+这是一个信息
+:::
+
 ::: important
 这是一个重要信息
 :::

diff --git a/plugins/markdown/plugin-markdown-hint/src/client/styles/_icons.scss b/plugins/markdown/plugin-markdown-hint/src/client/styles/_icons.scss
@@ -1,21 +1,20 @@
 // tip icon
-$tip-icon: '<svg viewBox="0 0 24 24"><path fill="#009400" d="M7.941 18c-.297-1.273-1.637-2.314-2.187-3a8 8 0 1 1 12.49.002c-.55.685-1.888 1.726-2.185 2.998H7.94zM16 20v1a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-1h8zm-3-9.995V6l-4.5 6.005H11v4l4.5-6H13z"/></svg>';
+$tip-icon: '<svg viewBox="0 0 24 24"><path d="M7.941 18c-.297-1.273-1.637-2.314-2.187-3a8 8 0 1 1 12.49.002c-.55.685-1.888 1.726-2.185 2.998H7.94zM16 20v1a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-1h8zm-3-9.995V6l-4.5 6.005H11v4l4.5-6H13z"/></svg>';
 
 // warning icon
-$warning-icon: '<svg viewBox="0 0 1024 1024"><path d="M576.286 752.57v-95.425q0-7.031-4.771-11.802t-11.3-4.772h-96.43q-6.528 0-11.3 4.772t-4.77 11.802v95.424q0 7.031 4.77 11.803t11.3 4.77h96.43q6.528 0 11.3-4.77t4.77-11.803zm-1.005-187.836 9.04-230.524q0-6.027-5.022-9.543-6.529-5.524-12.053-5.524H456.754q-5.524 0-12.053 5.524-5.022 3.516-5.022 10.547l8.538 229.52q0 5.023 5.022 8.287t12.053 3.265h92.913q7.032 0 11.803-3.265t5.273-8.287zM568.25 95.65l385.714 707.142q17.578 31.641-1.004 63.282-8.538 14.564-23.354 23.102t-31.892 8.538H126.286q-17.076 0-31.892-8.538T71.04 866.074q-18.582-31.641-1.004-63.282L455.75 95.65q8.538-15.57 23.605-24.61T512 62t32.645 9.04 23.605 24.61z" fill="#e6a700"/></svg>';
+$warning-icon: '<svg viewBox="0 0 1024 1024"><path d="M576.286 752.57v-95.425q0-7.031-4.771-11.802t-11.3-4.772h-96.43q-6.528 0-11.3 4.772t-4.77 11.802v95.424q0 7.031 4.77 11.803t11.3 4.77h96.43q6.528 0 11.3-4.77t4.77-11.803zm-1.005-187.836 9.04-230.524q0-6.027-5.022-9.543-6.529-5.524-12.053-5.524H456.754q-5.524 0-12.053 5.524-5.022 3.516-5.022 10.547l8.538 229.52q0 5.023 5.022 8.287t12.053 3.265h92.913q7.032 0 11.803-3.265t5.273-8.287zM568.25 95.65l385.714 707.142q17.578 31.641-1.004 63.282-8.538 14.564-23.354 23.102t-31.892 8.538H126.286q-17.076 0-31.892-8.538T71.04 866.074q-18.582-31.641-1.004-63.282L455.75 95.65q8.538-15.57 23.605-24.61T512 62t32.645 9.04 23.605 24.61z"/></svg>';
 
 // caution icon
-$caution-icon: '<svg viewBox="0 0 24 24"><path d="M12 2c5.523 0 10 4.477 10 10v3.764a2 2 0 0 1-1.106 1.789L18 19v1a3 3 0 0 1-2.824 2.995L14.95 23a2.5 2.5 0 0 0 .044-.33L15 22.5V22a2 2 0 0 0-1.85-1.995L13 20h-2a2 2 0 0 0-1.995 1.85L9 22v.5c0 .171.017.339.05.5H9a3 3 0 0 1-3-3v-1l-2.894-1.447A2 2 0 0 1 2 15.763V12C2 6.477 6.477 2 12 2zm-4 9a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" fill="#e13238"/></svg>';
+$caution-icon: '<svg viewBox="0 0 24 24"><path d="M12 2c5.523 0 10 4.477 10 10v3.764a2 2 0 0 1-1.106 1.789L18 19v1a3 3 0 0 1-2.824 2.995L14.95 23a2.5 2.5 0 0 0 .044-.33L15 22.5V22a2 2 0 0 0-1.85-1.995L13 20h-2a2 2 0 0 0-1.995 1.85L9 22v.5c0 .171.017.339.05.5H9a3 3 0 0 1-3-3v-1l-2.894-1.447A2 2 0 0 1 2 15.763V12C2 6.477 6.477 2 12 2zm-4 9a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>';
 
 // note-icon
-$note-icon: '<svg viewBox="0 0 24 24"><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z" fill="#ccc"/></svg>';
+$note-icon: '<svg viewBox="0 0 24 24"><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z"/></svg>';
 
 // info icon
-$info-icon: '<svg viewBox="0 0 24 24"><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z" fill="#4cb3d4"/></svg>';
+$info-icon: '<svg viewBox="0 0 24 24"><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z"/></svg>';
 
 // important icon
-$important-icon: '<svg viewBox="0 0 1024 1024"><path d="M512 981.333a84.992 84.992 0 0 1-84.907-84.906h169.814A84.992 84.992 0 0 1 512 981.333zm384-128H128v-42.666l85.333-85.334v-256A298.325 298.325 0 0 1 448 177.92V128a64 64 0 0 1 128 0v49.92a298.325 298.325 0 0 1 234.667 291.413v256L896 810.667v42.666zm-426.667-256v85.334h85.334v-85.334h-85.334zm0-256V512h85.334V341.333h-85.334z" fill="#a371f7"/></svg>';
+$important-icon: '<svg viewBox="0 0 1024 1024"><path d="M512 981.333a84.992 84.992 0 0 1-84.907-84.906h169.814A84.992 84.992 0 0 1 512 981.333zm384-128H128v-42.666l85.333-85.334v-256A298.325 298.325 0 0 1 448 177.92V128a64 64 0 0 1 128 0v49.92a298.325 298.325 0 0 1 234.667 291.413v256L896 810.667v42.666zm-426.667-256v85.334h85.334v-85.334h-85.334zm0-256V512h85.334V341.333h-85.334z"/></svg>';
 
 // details icon
-$detail-icon: '<svg viewBox="0 0 24 24"><path fill="rgb(0,0,0,0.5)" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>';
-$detail-dark-icon: '<svg viewBox="0 0 24 24"><path fill="rgb(255,255,255,0.5)" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>';
+$detail-icon: '<svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>';
diff --git a/plugins/markdown/plugin-markdown-hint/src/client/styles/hint.scss b/plugins/markdown/plugin-markdown-hint/src/client/styles/hint.scss
@@ -5,7 +5,7 @@
 .hint-container {
   position: relative;
   border-color: var(--hint-c-accent);
-  background: var(--hint-c-bg);
+  background: var(--hint-c-soft);
   transition:
     background var(--vp-t-color),
     border-color var(--vp-t-color),
@@ -20,7 +20,7 @@
   }
 
   :not(pre) > code {
-    background: var(--note-c-soft);
+    background: var(--hint-c-soft);
   }
 
   .hint-container-title {
@@ -65,8 +65,10 @@
         width: 1.25em;
         height: 1.25em;
 
-        background-position: left;
-        background-repeat: no-repeat;
+        font-size: 1.25em;
+
+        mask-position: left;
+        mask-repeat: no-repeat;
 
         @media print {
           display: none;
@@ -85,104 +87,65 @@
 
   &.important {
     --hint-c-accent: var(--important-c-accent);
-    --hint-c-bg: var(--important-c-light);
-    --hint-c-title: var(--important-c-dark);
+    --hint-c-title: var(--important-c-text);
     --hint-c-soft: var(--important-c-soft);
 
-    [data-theme='dark'] & {
-      --hint-c-bg: var(--important-c-dark);
-      --hint-c-title: var(--important-c-light);
-    }
-
     > .hint-container-title::before {
-      @include svg.background-svg(icons.$important-icon);
+      @include svg.mask-svg(icons.$important-icon);
     }
   }
 
   &.info {
     --hint-c-accent: var(--info-c-accent);
-    --hint-c-bg: var(--info-c-light);
-    --hint-c-title: var(--info-c-dark);
+    --hint-c-title: var(--info-c-text);
     --hint-c-soft: var(--info-c-soft);
 
-    [data-theme='dark'] & {
-      --hint-c-bg: var(--info-c-dark);
-      --hint-c-title: var(--info-c-light);
-    }
-
     > .hint-container-title::before {
-      @include svg.background-svg(icons.$info-icon);
+      @include svg.mask-svg(icons.$info-icon);
     }
   }
 
   &.note {
     --hint-c-accent: var(--note-c-accent);
-    --hint-c-bg: var(--note-c-light);
-    --hint-c-title: var(--note-c-dark);
+    --hint-c-title: var(--note-c-text);
     --hint-c-soft: var(--note-c-soft);
 
-    [data-theme='dark'] & {
-      --hint-c-bg: var(--note-c-dark);
-      --hint-c-title: var(--note-c-light);
-    }
-
     > .hint-container-title::before {
-      @include svg.background-svg(icons.$note-icon);
+      @include svg.mask-svg(icons.$note-icon);
     }
   }
 
   &.tip {
     --hint-c-accent: var(--tip-c-accent);
-    --hint-c-bg: var(--tip-c-light);
-    --hint-c-title: var(--tip-c-dark);
+    --hint-c-title: var(--tip-c-text);
     --hint-c-soft: var(--tip-c-soft);
 
-    [data-theme='dark'] & {
-      --hint-c-bg: var(--tip-c-dark);
-      --hint-c-title: var(--tip-c-light);
-    }
-
     > .hint-container-title::before {
-      @include svg.background-svg(icons.$tip-icon);
+      @include svg.mask-svg(icons.$tip-icon);
     }
   }
 
   &.warning {
     --hint-c-accent: var(--warning-c-accent);
-    --hint-c-bg: var(--warning-c-light);
-    --hint-c-title: var(--warning-c-dark);
+    --hint-c-title: var(--warning-c-text);
     --hint-c-soft: var(--warning-c-soft);
 
-    [data-theme='dark'] & {
-      --hint-c-bg: var(--warning-c-dark);
-      --hint-c-title: var(--warning-c-light);
-    }
-
     > .hint-container-title::before {
-      @include svg.background-svg(icons.$warning-icon);
+      @include svg.mask-svg(icons.$warning-icon);
     }
   }
 
   &.caution {
     --hint-c-accent: var(--caution-c-accent);
-    --hint-c-bg: var(--caution-c-light);
-    --hint-c-title: var(--caution-c-dark);
+    --hint-c-title: var(--caution-c-text);
     --hint-c-soft: var(--caution-c-soft);
 
-    [data-theme='dark'] & {
-      --hint-c-bg: var(--caution-c-dark);
-      --hint-c-title: var(--caution-c-light);
-    }
-
     > .hint-container-title::before {
-      @include svg.background-svg(icons.$caution-icon);
+      @include svg.mask-svg(icons.$caution-icon);
     }
   }
 
   &.details {
-    --detail-c-bg: var(--detail-c-light);
-    --detail-c-icon: var(--detail-c-icon-light);
-
     position: relative;
 
     display: block;
@@ -201,11 +164,6 @@
       margin-inline: -0.75rem;
     }
 
-    [data-theme='dark'] & {
-      --detail-c-bg: var(--detail-c-dark);
-      --detail-c-icon: var(--detail-c-icon-dark);
-    }
-
     h4 {
       margin-top: 0;
     }
@@ -257,6 +215,8 @@
 
         width: 1.5rem;
         height: 1.5rem;
+
+        font-size: 1.5rem;
       }
 
       &::before {
@@ -268,15 +228,10 @@
       }
 
       &::after {
-        @include svg.background-svg(icons.$detail-icon);
+        @include svg.mask-svg(icons.$detail-icon);
         line-height: normal;
         transition: transform var(--vp-t-transform);
         transform: rotate(90deg);
-
-        /* stylelint-disable-next-line max-nesting-depth */
-        [data-theme='dark'] & {
-          @include svg.background-svg(icons.$detail-dark-icon);
-        }
       }
     }
 

diff --git a/plugins/markdown/plugin-markdown-hint/src/client/styles/vars.css b/plugins/markdown/plugin-markdown-hint/src/client/styles/vars.css
@@ -1,44 +1,36 @@
 :root {
   /* important */
-  --important-c-accent: #a371f7;
-  --important-c-light: #f4eefe;
-  --important-c-dark: #230555;
-  --important-c-soft: rgb(163 113 247 / 10%);
+  --important-c-accent: var(--vp-c-purple-bg);
+  --important-c-text: var(--vp-c-purple-text);
+  --important-c-soft: var(--vp-c-purple-soft);
 
   /* info */
-  --info-c-accent: #4cb3d4;
-  --info-c-light: #eef9fd;
-  --info-c-dark: #193c47;
-  --info-c-soft: rgb(76 179 212 / 10%);
+  --info-c-accent: var(--vp-c-blue-bg);
+  --info-c-text: var(--vp-c-blue-text);
+  --info-c-soft: var(--vp-c-blue-soft);
 
   /* note */
-  --note-c-accent: #ccc;
-  --note-c-light: #fdfdfe;
-  --note-c-dark: #474748;
-  --note-c-soft: rgb(212 213 216 / 20%);
+  --note-c-accent: var(--vp-c-grey-bg);
+  --note-c-text: var(--vp-c-grey-text);
+  --note-c-soft: var(--vp-c-grey-soft);
 
   /* tip */
-  --tip-c-accent: #009400;
-  --tip-c-light: #e6f6e6;
-  --tip-c-dark: #003100;
-  --tip-c-soft: rgb(0 148 0 / 15%);
+  --tip-c-accent: var(--vp-c-green-bg);
+  --tip-c-text: var(--vp-c-green-text);
+  --tip-c-soft: var(--vp-c-green-soft);
 
   /* warning */
-  --warning-c-accent: #e6a700;
-  --warning-c-light: #fff8e6;
-  --warning-c-dark: #4d3800;
-  --warning-c-soft: rgb(230 167 0 / 15%);
+  --warning-c-accent: var(--vp-c-yellow-bg);
+  --warning-c-text: var(--vp-c-yellow-text);
+  --warning-c-soft: var(--vp-c-yellow-soft);
 
   /* caution */
-  --caution-c-accent: #e13238;
-  --caution-c-light: #ffebec;
-  --caution-c-dark: #4b1113;
-  --caution-c-soft: rgb(225 50 56 / 15%);
+  --caution-c-accent: var(--vp-c-red-bg);
+  --caution-c-text: var(--vp-c-red-text);
+  --caution-c-soft: var(--vp-c-red-soft);
 
   /* detail */
-  --detail-c-light: #eee;
-  --detail-c-dark: #333;
-  --detail-c-icon-light: #ccc;
-  --detail-c-icon-dark: #555;
-  --detail-c-soft: rgb(127 127 127 / 15%);
+  --detail-c-bg: var(--vp-c-control);
+  --detail-c-icon: var(--vp-c-border);
+  --detail-c-soft: var(--vp-c-grey-soft);
 }
diff --git a/tools/helper/src/client/styles/colors.scss b/tools/helper/src/client/styles/colors.scss
@@ -25,7 +25,7 @@
   --vp-c-blue-text: #2888a7;
   --vp-c-blue-hover: #2d98ba;
   --vp-c-blue-bg: #2fa1c5;
-  --vp-c-blue-soft: rgb(40 136 167 / 14%);
+  --vp-c-blue-soft: rgb(27 178 229 / 14%);
 
   // green
   --vp-c-green-text: #18794e;
@@ -36,7 +36,7 @@
   // yellow
   --vp-c-yellow-text: #915930;
   --vp-c-yellow-hover: #946300;
-  --vp-c-yellow-bg: #9f6a00;
+  --vp-c-yellow-bg: #c28100;
   --vp-c-yellow-soft: rgb(234 179 8 / 14%);
 
   // red
@@ -66,7 +66,7 @@
   --vp-c-blue-text: #c9e8f2;
   --vp-c-blue-hover: #a6d9ea;
   --vp-c-blue-bg: #2785a3;
-  --vp-c-blue-soft: rgb(40 136 167 / 16%);
+  --vp-c-blue-soft: rgb(27 178 229 / 16%);
 
   // purple
   --vp-c-purple-text: #c8abfa;