Sidebar contrast issues

PT-1078

Author: AugustMiller

docs/.vuepress/theme/components/RightBar.vue

@@ -58,10 +58,6 @@ export default {
     @apply fixed mt-24 w-64 pt-1 overflow-hidden;
   }
 
-  .sidebar-group:not(.collapsable) .sidebar-heading:not(.clickable) {
-    color: #a0aec0;
-  }
-
   .sidebar-links {
     --sidebar-link-color: var(--text-color-muted);
     @apply ml-0 pl-0 pb-4 overflow-y-auto;

docs/.vuepress/theme/components/SidebarGroup.vue

@@ -33,17 +33,17 @@
         :class="{ open }"
         @click="$emit('toggle')"
       >
-        <span>{{ fixedHeading || item.title }}</span>
+        {{ fixedHeading || item.title }}
         <span class="arrow" :class="open ? 'down' : 'right'" />
       </button>
 
-      <p
+      <span
         v-else
         class="sidebar-heading"
         :class="{ open }"
       >
-        <span>{{ fixedHeading || item.title }}</span>
-      </p>
+        {{ fixedHeading || item.title }}
+      </span>
     </component>
 
     <DropdownTransition>

docs/.vuepress/theme/styles/base.pcss

@@ -78,25 +78,25 @@ img {
   &.up {
     border-left: 4px solid transparent;
     border-right: 4px solid transparent;
-    border-bottom: 6px solid #ccc;
+    border-bottom: 6px solid currentColor;
   }
 
   &.down {
     border-left: 4px solid transparent;
     border-right: 4px solid transparent;
-    border-top: 6px solid #ccc;
+    border-top: 6px solid currentColor;
   }
 
   &.right {
     border-top: 4px solid transparent;
     border-bottom: 4px solid transparent;
-    border-left: 6px solid #ccc;
+    border-left: 6px solid currentColor;
   }
 
   &.left {
     border-top: 4px solid transparent;
     border-bottom: 4px solid transparent;
-    border-right: 6px solid #ccc;
+    border-right: 6px solid currentColor;
   }
 }