feat(theme): add type support for mark (#480)

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
  * -------------------------------------------------------------------------- */

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");

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;
+  }
+}

theme/src/client/styles/vars.css

@@ -678,13 +678,18 @@
  * mark
  * -------------------------------------------------------------------------- */
 :root {
-  --vp-mark-color: var(--vp-c-brand-3);
+  --vp-mark-text: marktext;
-  --vp-mark-color-soft: var(--vp-c-brand-soft);
+  --vp-mark-bg: "";
-}
+  --vp-mark-bg-image:
-
+    linear-gradient(
-[data-theme="dark"] {
+      to bottom,
-  --vp-mark-color: var(--vp-c-brand-3);
+      transparent 25%,
-  --vp-mark-color-soft: var(--vp-c-brand-soft);
+      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%
+    );
 }
 
 /**