styles for context sidebar components

demo/sections/components/ContextSidebar.vue

@@ -0,0 +1,22 @@
+<template>
+  <ComponentPage title="Context Sidebar" :demos="[{ title: 'Context Sidebar' }]">
+    <template #context-sidebar>
+      <PContextSidebar>
+        <template #header>
+          Header
+        </template>
+        <PContextNavItem to="#0" title="Context Nav Item" icon="Agent" />
+        <PContextNavItem to="/" title="Context Nav Item" />
+        <PContextNavItem to="/" title="Context Nav Item" />
+        <PContextNavItem to="/" title="Context Nav Item" />
+        <template #footer>
+          Footer
+        </template>
+      </PContextSidebar>
+    </template>
+  </ComponentPage>
+</template>
+
+<script lang="ts" setup>
+  import ComponentPage from '@/demo/components/ComponentPage.vue'
+</script>

demo/sections/components/index.ts

@@ -13,6 +13,7 @@ export const components: Section = {
   codeHighlight: () => import('./CodeHighlight.vue'),
   codeInput: () => import('./CodeInput.vue'),
   combobox: () => import('./Combobox.vue'),
+  contextSidebar: () => import('./ContextSidebar.vue'),
   dateInput: () => import('./DateInput.vue'),
   dateRangeInput: () => import('./DateRangeInput.vue'),
   divider: () => import('./Divider.vue'),

src/components/ContextAccordionItem/PContextAccordionItem.vue

@@ -99,13 +99,13 @@
   font-medium
   w-full
   text-left
-  hover:text-primary
-  active:text-primary-600
+  hover:bg-selectable-hover
+  active:bg-selected
 }
 
 .p-context-accordion-item__header--highlighted { @apply
-  hover:text-primary
-  active:text-primary-600
+  hover:bg-selectable-hover
+  active:bg-selected
 }
 
 .p-context-accordion-item__icon { @apply
@@ -136,12 +136,13 @@
   select-none
   font-medium
   cursor-pointer
-  hover:text-primary
-  active:text-primary-600
+  hover:bg-selectable-hover
+  active:bg-selected
 }
 
 .p-context-accordion-item__content-child--active { @apply
-  text-primary
+  bg-selected
+  hover:bg-selected
 }
 
 .p-context-accordion-item__indicator { @apply

src/components/ContextDivider/PContextDivider.vue

@@ -5,8 +5,7 @@
 <style>
 .p-context-sidebar-divider { @apply
   border-t-2
-  border-slate-600
-  -mx-3
+  border-divider
   my-2
 }
 </style>

src/components/ContextNavItem/PContextNavItem.vue

@@ -26,28 +26,30 @@
 <style>
 .p-context-nav-item { @apply
   flex
-  py-2.5
-  px-3
+  py-2
+  px-2
   rounded-md
   items-center
   transition
   duration-200
   ease-linear
-  gap-3
+  gap-2
   text-sm
   leading-5
   select-none
   font-medium
-  hover:text-primary
-  active:text-primary-600
+  hover:bg-selectable-hover
+  active:bg-selected
 }
 
 .p-context-nav-item__icon { @apply
-  h-6
-  w-6
+  h-5
+  w-5
 }
 
 .p-context-nav-item--active { @apply
-  text-prefect-400
+  font-semibold
+  bg-selected
+  hover:bg-selected
 }
 </style>

src/components/ContextSidebar/PContextSidebar.vue

@@ -18,8 +18,6 @@
 
 <style>
 .p-context-sidebar { @apply
-  bg-slate-800
-  text-slate-300
   fixed
   lg:sticky
   top-16
@@ -40,13 +38,14 @@
 .p-context-sidebar__header,
 .p-context-sidebar__body,
 .p-context-sidebar__footer { @apply
-  p-3
+  py-4
+  px-4
   overflow-y-auto
 }
 
 .p-context-sidebar__header { @apply
-  border-b-2
-  border-slate-600
+  border-b
+  border-divider
   flex-shrink-0
 }
 
@@ -58,8 +57,8 @@
 
 .p-context-sidebar__footer { @apply
   mt-auto
-  border-t-2
+  border-t
   flex-shrink-0
-  border-slate-600
+  border-divider
 }
 </style>

src/styles/index.css

@@ -149,7 +149,7 @@
     --p-color-text-selection: rgba(69, 156, 255, 0.4);
 
     --p-color-selected: #1F647A;
-    --p-color-selectable-hover: var(--p-color-bg-2);
+    --p-color-selectable-hover: #415258;
     --p-color-focus-ring: #276EE7;
     --p-color-focus-ring-offset: var(--p-color-bg-0);
 
@@ -340,7 +340,7 @@
     --p-color-text-selection: rgba(69, 156, 255, 0.4);
 
     --p-color-selected: #9DDDF1;
-    --p-color-selectable-hover: #DDDDDD;
+    --p-color-selectable-hover: #DDE2E3;
     --p-color-focus: #1470EF;
     --p-color-focus-halo: rgba(23, 92, 211, 0.4);