diff --git a/docs/themes/default/markdown.md b/docs/themes/default/markdown.md
index 2bdcfc68d4..85aa187dd9 100644
--- 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
index 3100c8712d..bff45e1da0 100644
--- 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
index f2d3c2526f..d571f691de 100644
--- 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: '';
+$tip-icon: '';
// warning icon
-$warning-icon: '';
+$warning-icon: '';
// caution icon
-$caution-icon: '';
+$caution-icon: '';
// note-icon
-$note-icon: '';
+$note-icon: '';
// info icon
-$info-icon: '';
+$info-icon: '';
// important icon
-$important-icon: '';
+$important-icon: '';
// details icon
-$detail-icon: '';
-$detail-dark-icon: '';
+$detail-icon: '';
diff --git a/plugins/markdown/plugin-markdown-hint/src/client/styles/hint.scss b/plugins/markdown/plugin-markdown-hint/src/client/styles/hint.scss
index 2df602cecc..c80c734be5 100644
--- 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
index 1a3a9a2e10..d87a7d3c2c 100644
--- 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
index 2f58a01a46..0b6ef469ee 100644
--- 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;