@voidzero-dev/vitepress-theme 3.3.0 → 4.0.0

package/README.md

@@ -45,9 +45,33 @@ In your `.vitepress/theme/index.ts`:
 ```ts
 import type { Theme } from 'vitepress'
 import Theme from '@voidzero-dev/vitepress-theme'
+import './styles.css'
 
 export default {
     extends: BaseTheme as unknown as Theme,
     Layout
 } satisfies Theme
 ```
+
+In the CSS, import the CSS from theme (which imports tailwind):
+
+```css
+/* styles.css */
+@import "@voidzero-dev/vitepress-theme/src/styles/index.css";
+
+@source "./**/*.vue";
+
+/* Project specific branding colors */
+:root[data-variant="vite"] {
+  --color-brand: #6B1EB9;
+}
+
+:root.dark:not([data-theme])[data-variant="vite"],
+:root[data-theme="dark"][data-variant="vite"] {
+  --color-brand: var(--color-vite);
+}
+
+:root[data-theme="light"][data-variant="vite"] {
+  --color-brand: #6B1EB9;
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voidzero-dev/vitepress-theme",
-  "version": "3.3.0",
+  "version": "4.0.0",
   "description": "Shared VitePress theme for VoidZero projects",
   "type": "module",
   "license": "UNLICENSED",

package/src/components/vitepress-default/VPMenuLink.vue

@@ -25,6 +25,13 @@ defineOptions({ inheritAttrs: false })
     <VPLink
       v-bind="$attrs"
       class="flex items-center justify-between rounded-md px-3 py-2 text-sm font-heading text-primary dark:text-white text-left whitespace-nowrap hover:opacity-70 transition-opacity"
+      :class="{
+        active: isActive(
+          page.relativePath,
+          item.activeMatch || href,
+          !!item.activeMatch
+        )
+      }"
       :href
       :target="item.target"
       :rel="item.rel"
@@ -42,4 +49,13 @@ defineOptions({ inheritAttrs: false })
   border-top: 1px solid var(--vp-c-divider);
   padding: 12px 12px 0;
 }
+
+.link:hover {
+  color: var(--vp-c-brand-1);
+  background-color: var(--vp-c-default-soft);
+}
+
+.link.active {
+  color: var(--vp-c-brand-1);
+}
 </style>

package/src/components/vitepress-default/VPNavBarMenuLink.vue

@@ -20,13 +20,25 @@ const href = computed(() =>
 
 <template>
   <VPLink
-    class="flex items-center px-3 py-2 text-base font-heading text-primary dark:text-white hover:opacity-70 transition-opacity whitespace-nowrap overflow-hidden text-ellipsis"
-    :href
-    :target="item.target"
-    :rel="item.rel"
-    :no-icon="item.noIcon"
-    tabindex="0"
-  >
+    class="flex items-center px-3 py-2 text-base font-heading text-primary
+     dark:text-white hover:opacity-85 transition-opacity whitespace-nowrap overflow-hidden text-ellipsis"
+    :class="{
+      active: isActive(
+        page.relativePath,
+        item.activeMatch || href,
+        !!item.activeMatch
+      )
+    }" :href :target="item.target" :rel="item.rel" :no-icon="item.noIcon" tabindex="0">
     <span v-html="item.text"></span>
   </VPLink>
 </template>
+
+<style scoped>
+.link.active {
+  color: var(--vp-c-brand-1);
+}
+
+.link:hover {
+  color: var(--vp-c-brand-1);
+}
+</style>

package/src/index.ts

@@ -15,8 +15,6 @@
 
 // Unified design system - single import
 // Contains: tokens → base → docs → marketing (in that order)
-import "./styles/index.css";
-
 import type { Theme } from "vitepress";
 import { watch } from "vue";
 

package/src/styles/index.css

@@ -49,35 +49,6 @@
   --color-brand: var(--color-electric);
 }
 
-/* Vite */
-:root[data-variant="vite"] {
-  --color-brand: #6B1EB9;
-}
-
-:root.dark:not([data-theme])[data-variant="vite"],
-:root[data-theme="dark"][data-variant="vite"] {
-  --color-brand: var(--color-vite);
-}
-
-/* Forced light mode brand for Vite */
-:root[data-theme="light"][data-variant="vite"] {
-  --color-brand: #6B1EB9;
-}
-
-/* Vitest */
-:root[data-variant="vitest"] {
-  --color-brand: #008039;
-}
-
-:root.dark:not([data-theme])[data-variant="vitest"],
-:root[data-theme="dark"][data-variant="vitest"] {
-  --color-brand: var(--color-zest);
-}
-
-:root[data-theme="light"][data-variant="vitest"] {
-  --color-brand: #008039;
-}
-
 /* Rolldown */
 :root[data-variant="rolldown"] {
   --color-brand: #D44803;
@@ -91,17 +62,3 @@
 :root[data-theme="light"][data-variant="rolldown"] {
   --color-brand: #D44803;
 }
-
-/* OXC */
-:root[data-variant="oxc"] {
-  --color-brand: #0D6A73;
-}
-
-:root.dark:not([data-theme])[data-variant="oxc"],
-:root[data-theme="dark"][data-variant="oxc"] {
-  --color-brand: var(--color-aqua);
-}
-
-:root[data-theme="light"][data-variant="oxc"] {
-  --color-brand: #0D6A73;
-}