use mat.theme (#1279)

* use mat.theme

* update deps

* update deps

---------

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

Author: andrewseguin

material.angular.io/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,
+  ));
 }

material.angular.io/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 {

material.angular.io/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;

material.angular.io/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}}

material.angular.io/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;

material.angular.io/src/app/pages/component-page-header/_component-page-header-theme.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});

material.angular.io/src/app/pages/component-page-header/component-page-header.scss

@@ -15,9 +15,19 @@
 }
 
 .docs-guide-item {
+  color: var(--mat-sys-on-surface-variant);
   text-decoration: none;
   display: flex;
   margin: 16px;
+
+  &:focus,
+  &:hover {
+    outline: none;
+
+    .docs-guide-card {
+      background: var(--mat-sys-surface-dim);
+    }
+  }
 }
 
 .docs-guide-card.mat-mdc-card {

material.angular.io/src/app/pages/component-sidenav/_component-sidenav-theme.scss

@@ -6,6 +6,7 @@ $margin-promotion-sections-small: 15px;
   overflow: hidden;
   position: relative;
   height: 420px;
+  background: var(--mat-sys-primary-container);
 }
 
 .docs-homepage-logo {
@@ -30,7 +31,17 @@ $margin-promotion-sections-small: 15px;
   transform: translate(-50%, -50%);
 }
 
+.docs-homepage-row,
+.docs-homepage-carousel-row h2,
+a.docs-featured-components-carousel-item,
+.docs-homepage-guides-card,
+a.docs-link:hover {
+  color: var(--mat-sys-on-surface-variant);
+}
+
 .docs-header-headline {
+  color: var(--mat-sys-on-primary-container);
+
   h1 {
     font-size: 56px;
     font-weight: 500;
@@ -241,3 +252,12 @@ $margin-promotion-sections-small: 15px;
     margin: $margin-promotion-sections-small 0;
   }
 }
+
+[carousel-item]:hover,
+[carousel-item]:focus {
+  outline: none;
+
+  .docs-homepage-guides-card {
+    background: var(--mat-sys-surface-dim);
+  }
+}

material.angular.io/src/app/pages/component-sidenav/component-nav.html

@@ -1,6 +1,10 @@
 $vertical-spacing: 64px;
 $horizontal-spacing: 32px;
 
+:host {
+  color: var(--mat-sys-on-primary-container);
+}
+
 main {
   min-height: 100vh;
   font-size: 1.25rem;

material.angular.io/src/app/pages/component-sidenav/component-sidenav.scss

@@ -1,11 +1,12 @@
 @use 'sass:math';
 @use '@angular/cdk' as cdk;
-@use '@angular/material' as mat;
 
 $_inner-spacing: 16px;
 
 .popup {
-  @include mat.elevation(2);
+  box-shadow: var(--mat-app-elevation-shadow-level-2);
+  color: var(--mat-sys-on-surface);
+  background: var(--mat-sys-surface);
   position: fixed;
   bottom: 0;
   left: 0;