use mat.theme

Author: andrewseguin

src/_app-theme.scss

@@ -24,6 +24,15 @@
   }
 }
 
+.docs-component-category-list-summary a {
+  color: var(--mat-sys-primary);
+}
+
+.docs-component-category-list-card-title,
+.docs-component-category-list-card-summary  {
+  color: var(--mat-sys-on-surface-variant);
+}
+
 .docs-component-category-list {
   display: flex;
   flex-wrap: wrap;
@@ -53,10 +62,17 @@
 .docs-component-category-list-card {
   overflow: hidden;
   transition: background 0.3s ease;
+  border: 1px solid var(--mat-sys-outline-variant);
+  border-radius: 12px;
+
+  &:hover {
+    background: var(--mat-sys-surface-dim);
+  }
 }
 
 .docs-component-category-list-card-image-wrapper {
   height: 156px;
+  border-bottom: 1px solid var(--mat-sys-outline-variant);
 }
 
 .docs-component-category-list-card-summary {

src/app/pages/component-category-list/_component-category-list-theme.scss

@@ -5,6 +5,7 @@
   justify-content: center;
   align-items: center;
   min-height: 60px;
+  background: var(--mat-sys-primary-container);
 
   @media (max-width: constants.$small-breakpoint-width) {
     display: flex;

src/app/pages/component-category-list/component-category-list.scss

@@ -3,8 +3,9 @@
     <div class="docs-component-viewer-nav-content">
         <mat-nav-list>
           @for (component of docItems.getItems(section); track component) {
-            <a mat-list-item
+            <a mat-list-item #link="routerLinkActive"
                [routerLink]="'/' + section+ '/' + component.id"
+               [activated]="link.isActive"
                routerLinkActive="docs-component-viewer-sidenav-item-selected"
                [attr.aria-current]="currentItemId === component.id ? 'page': 'false'">
               {{component.name}}

src/app/pages/component-page-header/_component-page-header-theme.scss

@@ -36,6 +36,7 @@ app-component-sidenav {
   top: 0;
 
   .docs-component-viewer-nav-content {
+    border-right: 1px solid var(--mat-sys-outline-variant);
     width: constants.$sidenav-width;
     padding: 16px 8px;
     height: calc(100vh - 75px);
@@ -47,6 +48,10 @@ app-component-sidenav {
       width: 4px;
     }
 
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, .26);
+    }
+
     ul {
       list-style-type: none;
       margin: 0 0 5px 0;

src/app/pages/component-page-header/component-page-header.scss

@@ -1,5 +1,10 @@
 @use '../../../styles/constants';
 
+guide-viewer,
+app-component-viewer {
+  color: var(--mat-sys-on-surface);
+}
+
 app-component-viewer {
   font-weight: 400;
   width: calc(100% - #{constants.$sidenav-width + 1} - #{constants.$content-padding-sidenav * 2});