use mat.theme (#1279)

* use mat.theme

* update deps

* update deps

---------

Co-authored-by: Andrew Seguin <[email protected]>

Author: andrewseguin

pnpm-lock.yaml

@@ -1,20 +1,14 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@include mat.core();
-
-$theme: mat.define-theme((
-  color: (
-    theme-type: light,
-    primary: mat.$red-palette,
-  ),
-  typography: (
-    brand-family: 'Roboto',
-  ),
-));
-
 html {
   font-family: 'Roboto';
-  @include mat.all-component-themes($theme);
-  @include mat.icon-color($theme, $color-variant: primary);
+  @include mat.theme((
+    color: (
+      theme-type: light,
+      primary: mat.$red-palette,
+    ),
+    typography: Roboto,
+    density: 0,
+  ));
 }

scenes/src/styles.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-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-theme.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-category-list/component-category-list.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;