From fded7e807a87f7e7082255c8b77dfcfb99beb6cd Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sun, 23 Feb 2025 02:00:43 +0800
Subject: [PATCH] feat(theme): add type support for `mark` (#480)

---
 theme/src/client/styles/content.css | 35 ---------------
 theme/src/client/styles/index.css   |  1 +
 theme/src/client/styles/mark.css    | 69 +++++++++++++++++++++++++++++
 theme/src/client/styles/vars.css    | 19 +++++---
 4 files changed, 82 insertions(+), 42 deletions(-)
 create mode 100644 theme/src/client/styles/mark.css

diff --git a/theme/src/client/styles/content.css b/theme/src/client/styles/content.css
index aee2c42d..7a70721c 100644
--- a/theme/src/client/styles/content.css
+++ b/theme/src/client/styles/content.css
@@ -290,41 +290,6 @@
   color: var(--vp-code-link-hover-color);
 }
 
-.vp-doc mark {
-  padding: 2px;
-  color: currentcolor;
-  background-color: transparent;
-  background-image:
-    linear-gradient(
-      to bottom,
-      transparent 25%,
-      var(--vp-mark-color-soft) 30%,
-      var(--vp-mark-color-soft) 50%,
-      var(--vp-mark-color) 75%,
-      var(--vp-mark-color) 90%,
-      var(--vp-mark-color-soft) 100%
-    );
-  background-repeat: no-repeat;
-  background-position: 0 1em;
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-  animation: mark-highlight 1.5s 0.5s forwards;
-}
-
-.vp-doc :not(h1,h2,h3,h4,h5,h6) mark {
-  font-weight: bold;
-}
-
-@keyframes mark-highlight {
-  0% {
-    background-position: 0 1em;
-  }
-
-  100% {
-    background-position: 0 0;
-  }
-}
-
 /**
  * External links
  * -------------------------------------------------------------------------- */
diff --git a/theme/src/client/styles/index.css b/theme/src/client/styles/index.css
index d23cfc3a..1830226c 100644
--- a/theme/src/client/styles/index.css
+++ b/theme/src/client/styles/index.css
@@ -7,6 +7,7 @@
 @import url("./compat.css");
 @import url("./utils.css");
 @import url("./content.css");
+@import url("./mark.css");
 @import url("./code.css");
 @import url("./hint-container.css");
 @import url("./twoslash.css");
diff --git a/theme/src/client/styles/mark.css b/theme/src/client/styles/mark.css
new file mode 100644
index 00000000..4d297be3
--- /dev/null
+++ b/theme/src/client/styles/mark.css
@@ -0,0 +1,69 @@
+/**
+ * Mark
+ * -------------------------------------------------------------------------- */
+mark {
+  padding: 2px;
+  color: var(--vp-mark-text);
+  background-color: var(--vp-mark-bg, mark);
+  background-image: var(--vp-mark-bg-image);
+}
+
+mark:where([class]) {
+  --vp-mark-bg: mark;
+  --vp-mark-bg-image: none;
+
+  border-radius: 3px;
+}
+
+mark:where(:not([class])) {
+  --vp-mark-text: currentcolor;
+
+  background-repeat: no-repeat;
+  background-position: 0 1em;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+  animation: mark-highlight 1.5s 0.5s forwards;
+}
+
+mark:where(.note, .tip, .info, .warning, .danger, .caution, .important) {
+  --vp-mark-text: marktext;
+  --vp-mark-bg-image: none;
+}
+
+mark:where(.note) {
+  --vp-mark-bg: mark;
+}
+
+mark:where(.info) {
+  --vp-mark-bg: var(--vp-c-default-1);
+}
+
+mark:where(.tip) {
+  --vp-mark-bg: #3c3;
+}
+
+mark:where(.warning) {
+  --vp-mark-bg: #fc0;
+}
+
+mark:where(.caution, .danger) {
+  --vp-mark-bg: #f99;
+}
+
+mark:where(.important) {
+  --vp-mark-bg: #ccf;
+}
+
+:not(h1,h2,h3,h4,h5,h6) mark:where(:not([class])) {
+  font-weight: bold;
+}
+
+@keyframes mark-highlight {
+  0% {
+    background-position: 0 1em;
+  }
+
+  100% {
+    background-position: 0 0;
+  }
+}
diff --git a/theme/src/client/styles/vars.css b/theme/src/client/styles/vars.css
index 808b4c67..451eef4c 100644
--- a/theme/src/client/styles/vars.css
+++ b/theme/src/client/styles/vars.css
@@ -678,13 +678,18 @@
  * mark
  * -------------------------------------------------------------------------- */
 :root {
-  --vp-mark-color: var(--vp-c-brand-3);
-  --vp-mark-color-soft: var(--vp-c-brand-soft);
-}
-
-[data-theme="dark"] {
-  --vp-mark-color: var(--vp-c-brand-3);
-  --vp-mark-color-soft: var(--vp-c-brand-soft);
+  --vp-mark-text: marktext;
+  --vp-mark-bg: "";
+  --vp-mark-bg-image:
+    linear-gradient(
+      to bottom,
+      transparent 25%,
+      var(--vp-c-brand-soft) 30%,
+      var(--vp-c-brand-soft) 50%,
+      var(--vp-c-brand-3) 75%,
+      var(--vp-c-brand-3) 90%,
+      var(--vp-c-brand-soft) 100%
+    );
 }
 
 /**