docs: update theme

Author: mrholek

packages/docs/src/components/Sidebar.tsx

@@ -23,7 +23,7 @@ const Sidebar: FC<SidebarProps> = ({ ...props }) => {
     <AppContext.Consumer>
       {(context) => (
         <CSidebar
-          className="docs-sidebar border-end ps-xl-4 elevation-0"
+          className="docs-sidebar border-end px-xl-4 elevation-0"
           position="fixed"
           size="lg"
           visible={context.sidebarVisible}
@@ -48,8 +48,8 @@ const Sidebar: FC<SidebarProps> = ({ ...props }) => {
               </g>
             </svg>
           </CSidebarBrand>
-          <div className="text-body-secondary ms-3 me-5 mb-2 small fw-semibold">Framework:</div>
-          <CDropdown className="ms-3 me-5 mb-4">
+          <div className="text-body-secondary mx-3 mb-2 small fw-semibold">Framework:</div>
+          <CDropdown className="mx-3 mb-4">
             <CDropdownToggle color="primary" variant="outline">
               React.js
             </CDropdownToggle>

packages/docs/src/styles/_sidebar.scss

@@ -2,15 +2,31 @@
   --cui-sidebar-bg: var(--cui-tertiary-bg);
   --cui-sidebar-brand-bg: transparent;
   --cui-sidebar-brand-color: var(--cui-body-color);
-  --cui-sidebar-nav-link-color: var(--cui-body-color);
-  --cui-sidebar-nav-link-active-bg: transparent;
-  --cui-sidebar-nav-link-active-color: var(--cui-primary);
-  --cui-sidebar-nav-link-hover-bg: transparent;
-  --cui-sidebar-nav-link-hover-color: var(--cui-primary);
-  --cui-sidebar-nav-group-bg: transparent;
-  --cui-sidebar-nav-group-toggle-show-color: var(--cui-primary);
 
-  .nav-group-items {
+  .sidebar-nav {
     --cui-sidebar-nav-link-color: var(--cui-body-color);
+    --cui-sidebar-nav-link-active-bg: transparent;
+    --cui-sidebar-nav-link-active-color: var(--cui-primary);
+    --cui-sidebar-nav-link-hover-bg: transparent;
+    --cui-sidebar-nav-link-hover-color: var(--cui-primary);
+    --cui-sidebar-nav-link-icon-margin: 1rem;
+    --cui-sidebar-nav-group-bg: transparent;
+    --cui-sidebar-nav-group-toggle-show-color: var(--cui-primary);
+
+    .compact .nav-link {
+      --cui-sidebar-nav-link-padding-y: .375rem;
+    }
+
+    .nav-group-items {
+      --cui-sidebar-nav-link-color: var(--cui-body-color);
+    }
+  }
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .docs-sidebar {
+      --cui-sidebar-bg: var(--cui-body-bg);
+    }
   }
 }