fixes (#454)

nuxtjs.org/components/HeaderNavigation.vue

@@ -11,7 +11,8 @@
         <NuxtLink
           :to="`/${link.slug}/${link.children[0].slug || ''}`"
           :class="{
-            'text-primary': currentSlug === link.slug
+            'text-primary': currentSlug === link.slug,
+            'hover:d-primary-text-hover': currentSlug !== link.slug
           }"
         >
           {{ link.title }}

nuxtjs.org/components/MFooterLink.vue

@@ -13,7 +13,7 @@
             :href="subLink.href"
             :to="subLink.to"
             :aria-label="subLink.title"
-            class="light:text-gray-500 dark:text-white"
+            class="light:text-gray-500 dark:text-white hover:d-primary-text-hover"
             >{{ subLink.title }}</ALink
           >
         </li>

nuxtjs.org/docus.config.ts

@@ -37,7 +37,8 @@ export default {
       'd-active-aside-navigation-item-text': 'text-primary-500 dark:text-primary-400 ',
       'd-code-group-header-bg': 'bg-gray-100 dark:bg-secondary-darker',
       'd-code-group-tab': 'bg-gray-200 dark:bg-secondary-dark',
-      'd-prose-code-filename-bg': 'bg-gray-100 dark:bg-secondary-darker'
+      'd-prose-code-filename-bg': 'bg-gray-100 dark:bg-secondary-darker',
+      'd-prose-code-filename-text': 'text-gray-600 dark:text-secondary-surface'
     }
   }
 }

src/defaultTheme/components/atoms/CodeGroup.vue

@@ -6,7 +6,7 @@
         ref="tabs"
         :key="`${counter}${label}`"
         class="relative px-3 py-1.5 xs:py-3 my-1.5 xs:my-0 text-sm font-mono font-medium tracking-tight"
-        :class="[activeTabIndex === i ? 'active text-gray-800 dark:text-white' : 'text-gray-600 dark:text-gray-300']"
+        :class="[activeTabIndex === i ? 'active text-gray-800 dark:text-white' : 'd-prose-code-filename-text']"
         @click="updateTabs(i)"
       >
         {{ label }}

src/defaultTheme/components/atoms/CopyButton.vue

@@ -10,18 +10,12 @@
       px-2
       py-2
       m-1
-      text-gray-600
-      d-prose-code-filename-bg
+      d-prose-code-filename-text d-prose-code-filename-bg
       text-xs
       leading-none
       rounded-lg
       font-mono font-semibold
-      dark:text-gray-400
-      hover:bg-gray-200 hover:dark:bg-gray-700
     "
-    :class="{
-      'bg-gray-200 dark:bg-gray-700 opacity-100': state === 'copied'
-    }"
   >
     <IconCheck v-if="state === 'copied'" class="w-4 h-4" />
     <IconCopy v-else class="w-4 h-4" />

src/defaultTheme/components/atoms/prose/ProseCode.vue

@@ -47,7 +47,7 @@ pre code {
 
   /* Style filename span added by @nuxt/content */
   & > .filename {
-    @apply group-hover:opacity-0 transition-opacity duration-300 absolute top-0 right-0 z-0 m-1 py-1.5 px-2 d-prose-code-filename-bg rounded-md font-mono font-medium text-xs leading-none tracking-tight text-gray-600 dark:text-gray-400;
+    @apply group-hover:opacity-0 transition-opacity duration-300 absolute top-0 right-0 z-0 m-1 py-1.5 px-2 d-prose-code-filename-bg d-prose-code-filename-text rounded-md font-mono font-medium text-xs leading-none tracking-tight;
   }
 }
 

src/defaultTheme/components/molecules/AsideNavigationItem.vue

@@ -4,7 +4,7 @@
       v-if="title"
       class="py-2 text-base font-semibold text-gray-900 cursor-pointer dark:text-gray-100"
       :class="[isActive ? '' : 'hover:d-primary-text-hover']"
-      @click="collapse"
+      @click="toggle"
     >
       {{ title }}
     </h5>

src/defaultTheme/components/organisms/PageContent.vue

@@ -39,10 +39,7 @@
         <ProseParagraph v-else id="lead">{{ page.description }}</ProseParagraph>
       </template>
 
-      <hr
-        v-if="$scopedSlots['mobile-toc'] || page.description"
-        class="mt-4 border-gray-100 dark:border-gray-800 dark:border-opacity-50"
-      />
+      <hr v-if="$scopedSlots['mobile-toc'] || page.description" class="mt-4 d-border" />
     </section>
 
     <slot name="mobile-toc" />
@@ -85,6 +82,6 @@ export default defineComponent({
   @apply m-0 flex-1 text-4xl font-semibold tracking-tight text-gray-900 dark:text-gray-100;
 }
 #lead {
-  @apply mt-4 mb-0 text-lg font-medium text-gray-500 dark:text-gray-400;
+  @apply mt-4 mb-0 text-lg font-medium d-secondary-text;
 }
 </style>

src/defaultTheme/components/organisms/page/PagePrevNext.vue

@@ -28,7 +28,7 @@
 
           <span class="flex items-center w-full leading-tight">
             <IconArrowLeft class="flex-shrink-0 w-4 h-4 mr-2" />
-            <span class="truncate d-text-primary">{{ prev.title }}</span>
+            <span class="truncate">{{ prev.title }}</span>
           </span>
         </span>
       </NuxtLink>
@@ -53,19 +53,15 @@
           rounded-xl
           group
           xs:mb-0 xs:w-auto
-          dark:text-gray-400 dark:border-gray-800
           hover:d-text-primary hover:border-primary-200
-          dark:hover:border-gray-700 dark:border-opacity-50
         "
       >
         <span class="relative flex flex-col items-start truncate">
-          <span class="mb-1 text-xs leading-tight d-secondary-text">
-            {{ directory(next.to) }}
-          </span>
+          <span class="mb-1 text-xs leading-tight d-secondary-text"> {{ directory(next.to) }} </span>
 
           <span class="flex items-center w-full leading-tight">
-            <span class="truncate d-text-primary">{{ next.title }}</span>
-            <IconArrowRight class="flex-shrink-0 w-4 h-4 ml-2 d-text-primary" />
+            <span class="truncate">{{ next.title }}</span>
+            <IconArrowRight class="flex-shrink-0 w-4 h-4 ml-2" />
           </span>
         </span>
       </NuxtLink>

src/defaultTheme/settings.ts

@@ -53,6 +53,7 @@ const defaultThemeSettings = {
     'd-code-group-header-bg': 'bg-gray-100 dark:bg-gray-800',
     'd-code-group-tab': 'bg-gray-200 dark:bg-gray-700',
     'd-prose-code-filename-bg': 'bg-gray-100 dark:bg-gray-800',
+    'd-prose-code-filename-text': 'text-gray-600 dark:text-gray-400',
     // Icons
     'd-text-icon': 'd-secondary-text hover:d-secondary-text-hover',
     'd-icon': 'd-text-icon focus:outline-none',