fix(twoslash): improve css variables definition

Author: antfu

packages/shikiji-twoslash/style-rich.css

@@ -1,12 +1,15 @@
 /* ===== Basic ===== */
 :root {
   --twoslash-border-color: #8888;
-  --twoslash-docs-color: #888;
   --twoslash-underline-color: currentColor;
   --twoslash-highlighted-border: #c37d0d50;
   --twoslash-highlighted-bg: #c37d0d20;
   --twoslash-popup-bg: #f8f8f8;
-  --twoslash-popup-shadow: rgba(0, 0, 0, 0.08) 0px 1px 4px;
+  --twoslash-popup-color: inherit;
+  --twoslash-popup-shadow: rgba(0, 0, 0.08) 0px 1px 4px;
+  --twoslash-docs-color: #888;
+  --twoslash-docs-font: sans-serif;
+  --twoslach-code-font: inherit;
   --twoslash-matched-color: inherit;
   --twoslash-unmatched-color: #888;
   --twoslash-cursor-color: #8888;
@@ -46,6 +49,7 @@
   flex-direction: column;
   transform: translateY(1.1em);
   background: var(--twoslash-popup-bg);
+  color: var(--twoslash-popup-color);
   border: 1px solid var(--twoslash-border-color);
   transition: opacity 0.3s;
   border-radius: 4px;
@@ -89,23 +93,32 @@
   padding: 6px 8px !important;
 }
 
+.twoslash .twoslash-popup-code {
+  font-family: var(--twoslach-code-font);
+}
+
 .twoslash .twoslash-popup-docs {
   color: var(--twoslash-docs-color);
-  font-family: sans-serif;
+  font-family: var(--twoslash-docs-font);
   font-size: 0.8em;
   border-top: 1px solid var(--twoslash-border-color);
 }
 
 .twoslash .twoslash-popup-docs-tags {
   display: flex;
   flex-direction: column;
+  font-family: var(--twoslash-docs-font);
 }
 
 .twoslash .twoslash-popup-docs-tags,
 .twoslash .twoslash-popup-docs-tag-name {
   margin-right: 0.5em;
 }
 
+.twoslash .twoslash-popup-docs-tag-name {
+  font-family: var(--twoslach-code-font);
+}
+
 /* ===== Error Line ===== */
 .twoslash .twoslash-error-line {
   position: relative;
@@ -126,6 +139,7 @@
 .twoslash .twoslash-completion-cursor {
   position: relative;
 }
+
 .twoslash .twoslash-completion-cursor .twoslash-completion-list {
   user-select: none;
   position: absolute;
@@ -139,6 +153,7 @@
   background: var(--twoslash-popup-bg);
   border: 1px solid var(--twoslash-border-color);
 }
+
 .twoslash-completion-list {
   width: 240px;
   font-size: 0.8rem;
@@ -147,9 +162,11 @@
   flex-direction: column;
   gap: 4px;
 }
+
 .twoslash-completion-list:hover {
   user-select: auto;
 }
+
 .twoslash-completion-list::before {
   background-color: var(--twoslash-cursor-color);
   width: 2px;
@@ -159,23 +176,28 @@
   left: -1px;
   content: ' ';
 }
+
 .twoslash-completion-list li {
   overflow: hidden;
   display: flex;
   align-items: center;
   gap: 0.25em;
   line-height: 1em;
 }
+
 .twoslash-completion-list li span.twoslash-completions-unmatched {
   color: var(--twoslash-unmatched-color);
 }
+
 .twoslash-completion-list .deprecated {
   text-decoration: line-through;
   opacity: 0.5;
 }
+
 .twoslash-completion-list li span.twoslash-completions-matched {
   color: var(--twoslash-matched-color);
 }
+
 /* Highlights */
 .twoslash-highlighted {
   background-color: var(--twoslash-highlighted-bg);
@@ -184,12 +206,14 @@
   margin: -1px -3px;
   border-radius: 4px;
 }
+
 /* Icons */
 .twoslash-completion-list .twoslash-completions-icon {
   color: var(--twoslash-unmatched-color);
   width: 1em;
   flex: none;
 }
+
 /* Custom Tags */
 .twoslash .twoslash-tag-line {
   position: relative;
@@ -202,20 +226,24 @@
   align-items: center;
   gap: 0.3em;
 }
+
 .twoslash .twoslash-tag-line .twoslash-tag-icon {
   width: 1.1em;
   color: inherit;
 }
+
 .twoslash .twoslash-tag-line.twoslash-tag-error-line {
   background-color: var(--twoslash-error-bg);
   border-left: 3px solid var(--twoslash-error-color);
   color: var(--twoslash-error-color);
 }
+
 .twoslash .twoslash-tag-line.twoslash-tag-warn-line {
   background-color: var(--twoslash-tag-warn-bg);
   border-left: 3px solid var(--twoslash-tag-warn-color);
   color: var(--twoslash-tag-warn-color);
 }
+
 .twoslash .twoslash-tag-line.twoslash-tag-annotate-line {
   background-color: var(--twoslash-tag-annotate-bg);
   border-left: 3px solid var(--twoslash-tag-annotate-color);

packages/vitepress-plugin-twoslash/src/style.css

@@ -1,25 +1,31 @@
-.twoslash {
+:root {
   --twoslash-popup-bg: var(--vp-c-bg, inherit);
+  --twoslash-popup-color: var(--vp-c-text-1);
+  --twoslash-docs-color: var(--vp-c-text-1);
+  --twoslash-docs-font: var(--vp-font-family-base);
+  --twoslash-code-font: var(--vp-font-family-mono);
   --twoslash-underline-color: #8888;
-  --twoslash-border-color: #8884;
+  --twoslash-border-color: var(--vp-c-border);
+  --twoslash-cursor-color: var(--vp-c-brand);
+  --twoslash-matched-color: var(--vp-c-brand);
 }
 
 .v-popper--theme-twoslash {
   z-index: calc(var(--vp-z-index-local-nav) - 1);
 }
 
 .v-popper--theme-twoslash .v-popper__inner {
-  background: var(--vp-c-bg);
-  color: var(--vp-c-text-1);
-  border-color: var(--vp-c-border);
+  background: var(--twoslash-popup-bg);
+  color: var(--twoslash-popup-color);
+  border-color: var(--twoslash-border-color);
 }
 
 .v-popper--theme-twoslash .v-popper__arrow-outer {
-  border-color: var(--vp-c-border);
+  border-color: var(--twoslash-border-color);
 }
 
 .v-popper--theme-twoslash .v-popper__arrow-inner {
-  border-color: var(--vp-c-bg, inherit);
+  border-color: var(--twoslash-popup-bg);
 }
 
 .twoslash-popup-container {
@@ -52,10 +58,10 @@
 }
 
 .floating-vue-twoslash .twoslash-popup-docs {
-  border-top: 1px solid var(--vp-c-border);
-  color: var(--vp-c-text-1);
+  border-top: 1px solid var(--twoslash-border-color);
+  color: var(--twoslash-docs-color);
   padding: 0px 12px 0px 12px !important;
-  font-family: var(--vp-font-family-base);
+  font-family: var(--twoslash-docs-font);
   font-size: 0.9em;
   max-height: 500px;
   max-width: 700px;
@@ -85,7 +91,7 @@
 }
 
 .floating-vue-twoslash .twoslash-popup-docs-tags .twoslash-popup-docs-tag-name {
-  font-family: var(--vp-font-family-mono);
+  font-family: var(--twoslash-code-font);
   color: var(--vp-c-text-2);
   margin-right: 0.5em;
 }
@@ -94,15 +100,11 @@
   height: 1.2em;
   width: 2px;
   margin-bottom: -0.2em;
-  background: var(--vp-c-brand);
+  background: var(--twoslash-cursor-color);
   display: inline-block;
   user-select: none;
 }
 
-.floating-vue-twoslash-compeltion {
-  --twoslash-matched-color: var(--vp-c-brand);
-}
-
 .floating-vue-twoslash-compeltion .v-popper__arrow-container {
   display: none;
 }