diff --git a/aio/src/styles/0-base/_typography-theme.scss b/aio/src/styles/0-base/_typography-theme.scss
index dcf00d515b..5bb3d22fee 100644
--- a/aio/src/styles/0-base/_typography-theme.scss
+++ b/aio/src/styles/0-base/_typography-theme.scss
@@ -1,7 +1,8 @@
+@use 'sass:map';
 @use '../constants';
 
 @mixin theme($theme) {
-  $is-dark-theme: map-get($theme, is-dark);
+  $is-dark-theme: map.get($theme, is-dark);
 
   body {
     color: if($is-dark-theme, constants.$offwhite, constants.$darkgray);
diff --git a/aio/src/styles/1-layouts/footer/_footer-theme.scss b/aio/src/styles/1-layouts/footer/_footer-theme.scss
index 0e8c2b1279..28afaf8e54 100644
--- a/aio/src/styles/1-layouts/footer/_footer-theme.scss
+++ b/aio/src/styles/1-layouts/footer/_footer-theme.scss
@@ -1,13 +1,14 @@
+@use 'sass:map';
 @use '../../constants';
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 @mixin theme($theme) {
-  $primary: map-get($theme, primary);
-  $is-dark-theme: map-get($theme, is-dark);
+  $primary: map.get($theme, primary);
+  $is-dark-theme: map.get($theme, is-dark);
 
   footer {
     // Because the footer background is always the same color in both light and dark mode, there is no need to specify a foreground color
-    background-color: mat-color($primary, if($is-dark-theme, 900, 700));
+    background-color: mat.get-color-from-palette($primary, if($is-dark-theme, 900, 700));
 
     aio-footer {
       & > * {
diff --git a/aio/src/styles/1-layouts/layout-global/_layout-global-theme.scss b/aio/src/styles/1-layouts/layout-global/_layout-global-theme.scss
index ceb5b03848..c73c5c0066 100644
--- a/aio/src/styles/1-layouts/layout-global/_layout-global-theme.scss
+++ b/aio/src/styles/1-layouts/layout-global/_layout-global-theme.scss
@@ -1,13 +1,14 @@
+@use 'sass:map';
 @use '../../constants' ;
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 @mixin theme($theme) {
-  $background: map-get($theme, background);
-  $is-dark-theme: map-get($theme, is-dark);
+  $background: map.get($theme, background);
+  $is-dark-theme: map.get($theme, is-dark);
 
   html,
   body,
   .content {
-    background: if($is-dark-theme, mat-color($background, background), constants.$white);
+    background: if($is-dark-theme, mat.get-color-from-palette($background, background), constants.$white);
   }
 }
diff --git a/aio/src/styles/1-layouts/marketing-layout/_marketing-layout-theme.scss b/aio/src/styles/1-layouts/marketing-layout/_marketing-layout-theme.scss
index 2450cad07a..dbdbf00226 100644
--- a/aio/src/styles/1-layouts/marketing-layout/_marketing-layout-theme.scss
+++ b/aio/src/styles/1-layouts/marketing-layout/_marketing-layout-theme.scss
@@ -1,14 +1,15 @@
+@use 'sass:map';
 @use '../../constants';
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 @mixin theme($theme) {
-  $primary: map-get($theme, primary);
-  $foreground: map-get($theme, foreground);
-  $is-dark-theme: map-get($theme, is-dark);
+  $primary: map.get($theme, primary);
+  $foreground: map.get($theme, foreground);
+  $is-dark-theme: map.get($theme, is-dark);
 
   .background-sky {
-    background: linear-gradient(145deg, mat-color($primary, 900), if($is-dark-theme, mat-color($primary, 700), #42a5f5));
-    color: mat-color($foreground, text);
+    background: linear-gradient(145deg, mat.get-color-from-palette($primary, 900), if($is-dark-theme, mat.get-color-from-palette($primary, 700), #42a5f5));
+    color: mat.get-color-from-palette($foreground, text);
   }
 
   section#intro {
@@ -59,7 +60,7 @@
   }
 
   .marketing-banner {
-    background-color: if($is-dark-theme, mat-color($primary, 800), mat-color($primary, 600));
+    background-color: if($is-dark-theme, mat.get-color-from-palette($primary, 800), mat.get-color-from-palette($primary, 600));
 
     .banner-headline {
       color: constants.$white;
diff --git a/aio/src/styles/1-layouts/not-found/_not-found-theme.scss b/aio/src/styles/1-layouts/not-found/_not-found-theme.scss
index e9818b12f0..5c8e00e6f1 100644
--- a/aio/src/styles/1-layouts/not-found/_not-found-theme.scss
+++ b/aio/src/styles/1-layouts/not-found/_not-found-theme.scss
@@ -1,8 +1,8 @@
+@use 'sass:map';
 @use '../../constants';
-@import '~@angular/material/theming';
 
 @mixin theme($theme) {
-  $is-dark-theme: map-get($theme, is-dark);
+  $is-dark-theme: map.get($theme, is-dark);
 
   .nf-response {
     h1 {
diff --git a/aio/src/styles/1-layouts/sidenav/_sidenav-theme.scss b/aio/src/styles/1-layouts/sidenav/_sidenav-theme.scss
index c4eb5587d1..a2286bdfb5 100644
--- a/aio/src/styles/1-layouts/sidenav/_sidenav-theme.scss
+++ b/aio/src/styles/1-layouts/sidenav/_sidenav-theme.scss
@@ -1,12 +1,13 @@
+@use 'sass:map';
 @use '../../constants';
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 @mixin theme($theme) {
-  $background: map-get($theme, background);
-  $is-dark-theme: map-get($theme, is-dark);
+  $background: map.get($theme, background);
+  $is-dark-theme: map.get($theme, is-dark);
 
   mat-sidenav-container.sidenav-container {
-    background-color: if($is-dark-theme, mat-color($background, background), constants.$white);
+    background-color: if($is-dark-theme, mat.get-color-from-palette($background, background), constants.$white);
 
     mat-sidenav.sidenav {
       background-color: if($is-dark-theme, constants.$deepgray, constants.$superlightgray);
diff --git a/aio/src/styles/1-layouts/top-menu/_top-menu-theme.scss b/aio/src/styles/1-layouts/top-menu/_top-menu-theme.scss
index 5ae4714496..da9810c767 100644
--- a/aio/src/styles/1-layouts/top-menu/_top-menu-theme.scss
+++ b/aio/src/styles/1-layouts/top-menu/_top-menu-theme.scss
@@ -1,21 +1,22 @@
+@use 'sass:map';
 @use '../../constants';
 @use '../../mixins';
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 @mixin theme($theme) {
-  $primary: map-get($theme, primary);
-  $is-dark-theme: map-get($theme, is-dark);
+  $primary: map.get($theme, primary);
+  $is-dark-theme: map.get($theme, is-dark);
 
   mat-toolbar.app-toolbar {
     @if $is-dark-theme {
       &.mat-primary {
-        background: mat-color($primary, darker)
+        background: mat.get-color-from-palette($primary, darker)
       }
     }
 
     // HOME PAGE OVERRIDE: TOPNAV TOOLBAR
     .page-home & {
-      background: if($is-dark-theme, mat-color($primary, darker), constants.$blue);
+      background: if($is-dark-theme, mat.get-color-from-palette($primary, darker), constants.$blue);
     }
 
     mat-icon {
diff --git a/aio/src/styles/2-modules/_code.scss b/aio/src/styles/2-modules/_code.scss
index 1383f3b1c5..62ba6f7c1f 100644
--- a/aio/src/styles/2-modules/_code.scss
+++ b/aio/src/styles/2-modules/_code.scss
@@ -1,5 +1,6 @@
-@use '../constants' as *;
-@use '../mixins' as *;
+@use 'sass:color';
+@use '../constants';
+@use '../mixins';
 
 code-example,
 code-tabs {
@@ -52,7 +53,7 @@ code-example {
     background-color: $accentblue;
     border-radius: 5px 5px 0 0;
     color: $offwhite;
-    @include font-size(16);
+    @include mixins.font-size(16);
     padding: 8px 16px;
   }
 }
@@ -110,21 +111,21 @@ aio-code {
       }
 
       span {
-        @include line-height(24);
+        @include mixins.line-height(24);
       }
 
       ol.linenums {
         margin: 0;
-        color: lighten($mediumgray, 25%);
+        color: color.adjust($mediumgray, $lightness: 25%);
 
         li {
           margin: 0;
           font-family: $code-font;
           font-size: 90%;
-          @include line-height(24);
+          @include mixins.line-height(24);
 
           &::marker {
-            color: lighten($mediumgray, 25%);
+            color: color.adjust($mediumgray, $lightness: 25%);
           }
         }
       }
diff --git a/aio/src/styles/2-modules/alert/_alert-theme.scss b/aio/src/styles/2-modules/alert/_alert-theme.scss
index c2d7161e69..9ab26a8c63 100644
--- a/aio/src/styles/2-modules/alert/_alert-theme.scss
+++ b/aio/src/styles/2-modules/alert/_alert-theme.scss
@@ -1,8 +1,8 @@
+@use 'sass:map';
 @use '../../constants';
-@import '~@angular/material/theming';
 
 @mixin theme($theme) {
-  $is-dark-theme: map-get($theme, is-dark);
+  $is-dark-theme: map.get($theme, is-dark);
 
   .alert {
     color: if($is-dark-theme, constants.$offwhite, constants.$darkgray);
diff --git a/aio/src/styles/2-modules/api-list/_api-list-theme.scss b/aio/src/styles/2-modules/api-list/_api-list-theme.scss
index a7ad62fb29..9a3792a669 100644
--- a/aio/src/styles/2-modules/api-list/_api-list-theme.scss
+++ b/aio/src/styles/2-modules/api-list/_api-list-theme.scss
@@ -1,9 +1,9 @@
+@use 'sass:map';
 @use '../../constants';
 @use '../../mixins';
-@import '~@angular/material/theming';
 
 @mixin theme($theme) {
-  $is-dark-theme: map-get($theme, is-dark);
+  $is-dark-theme: map.get($theme, is-dark);
 
   aio-api-list {
     .api-filter {
diff --git a/aio/src/styles/2-modules/api-pages/_api-pages-theme.scss b/aio/src/styles/2-modules/api-pages/_api-pages-theme.scss
index 0cf480666c..1a1e808bfc 100644
--- a/aio/src/styles/2-modules/api-pages/_api-pages-theme.scss
+++ b/aio/src/styles/2-modules/api-pages/_api-pages-theme.scss
@@ -1,5 +1,4 @@
 @use '../../constants';
-@import '~@angular/material/theming';
 
 @mixin api-pages-theme($theme) {
   .api-body {
diff --git a/aio/src/styles/2-modules/api-symbols/_api-symbols-theme.scss b/aio/src/styles/2-modules/api-symbols/_api-symbols-theme.scss
index 1bdd52a6a0..b530ed3292 100644
--- a/aio/src/styles/2-modules/api-symbols/_api-symbols-theme.scss
+++ b/aio/src/styles/2-modules/api-symbols/_api-symbols-theme.scss
@@ -1,5 +1,5 @@
+@use 'sass:map';
 @use '../../constants';
-@import '~@angular/material/theming';
 
 @mixin theme($theme) {
   .symbol {
@@ -10,10 +10,10 @@
     // Symbol mapping variables in *constants*
     @each $name, $symbol in constants.$api-symbols {
       &.#{$name} {
-        background: map-get($symbol, background);
+        background: map.get($symbol, background);
 
         &:before {
-          content: map-get($symbol, content);
+          content: map.get($symbol, content);
         }
       }
     }
diff --git a/aio/src/styles/2-modules/buttons/_buttons-theme.scss b/aio/src/styles/2-modules/buttons/_buttons-theme.scss
index c4f0ff1e7e..d47360964a 100644
--- a/aio/src/styles/2-modules/buttons/_buttons-theme.scss
+++ b/aio/src/styles/2-modules/buttons/_buttons-theme.scss
@@ -1,5 +1,5 @@
+@use 'sass:color';
 @use '../../constants';
-@import '~@angular/material/theming';
 
 @mixin theme($theme) {
   // This rule overrides some Angular Material styles defined for `.mat-button`
@@ -20,7 +20,7 @@
 
     &.button-subtle {
       background: constants.$mediumgray;
-      color: darken(constants.$offwhite, 10%);
+      color: color.adjust(constants.$offwhite, $lightness: -10%);
 
       &:hover {
         color: rgba(constants.$white, 0.7);
diff --git a/aio/src/styles/2-modules/callout/_callout-theme.scss b/aio/src/styles/2-modules/callout/_callout-theme.scss
index 02f3bc53c1..c3550288f8 100644
--- a/aio/src/styles/2-modules/callout/_callout-theme.scss
+++ b/aio/src/styles/2-modules/callout/_callout-theme.scss
@@ -1,40 +1,39 @@
+@use 'sass:map';
 @use '../../constants';
-@import '~@angular/material/theming';
 
 @mixin theme($theme) {
-    $is-dark-theme: map-get($theme, is-dark);
+  $is-dark-theme: map.get($theme, is-dark);
 
+  .callout {
+    header {
+      color: constants.$white;
+    }
 
-    .callout {      
-        header {
-          color: constants.$white;
-        }
-      
-        &.is-critical {
-          border-color: constants.$brightred;
-          background: rgba(constants.$brightred, if($is-dark-theme, 0.1, 0.05));
-      
-          header {
-            background: constants.$brightred;
-          }
-        }
-      
-        &.is-important {
-          border-color: constants.$orange;
-          background: rgba(constants.$orange,if($is-dark-theme, 0.1, 0.05));
-      
-          header {
-            background: constants.$amber-700;
-          }
-        }
-      
-        &.is-helpful {
-          border-color: constants.$blue;
-          background: rgba(constants.$blue, if($is-dark-theme, 0.1, 0.05));
-      
-          header {
-            background: constants.$blue;
-          }
-        }
+    &.is-critical {
+      border-color: constants.$brightred;
+      background: rgba(constants.$brightred, if($is-dark-theme, 0.1, 0.05));
+
+      header {
+        background: constants.$brightred;
       }
+    }
+
+    &.is-important {
+      border-color: constants.$orange;
+      background: rgba(constants.$orange,if($is-dark-theme, 0.1, 0.05));
+
+      header {
+        background: constants.$amber-700;
+      }
+    }
+
+    &.is-helpful {
+      border-color: constants.$blue;
+      background: rgba(constants.$blue, if($is-dark-theme, 0.1, 0.05));
+
+      header {
+        background: constants.$blue;
+      }
+    }
+  }
 }
diff --git a/aio/src/styles/2-modules/card/_card-theme.scss b/aio/src/styles/2-modules/card/_card-theme.scss
index 40f8b2aed2..30f5902cef 100644
--- a/aio/src/styles/2-modules/card/_card-theme.scss
+++ b/aio/src/styles/2-modules/card/_card-theme.scss
@@ -1,8 +1,8 @@
+@use 'sass:map';
 @use '../../constants';
-@import '~@angular/material/theming';
 
-@mixin theme($theme) { 
-  $is-dark-theme: map-get($theme, is-dark);
+@mixin theme($theme) {
+  $is-dark-theme: map.get($theme, is-dark);
 
   .card-container {
     .docs-card {
diff --git a/aio/src/styles/2-modules/code/_code-theme.scss b/aio/src/styles/2-modules/code/_code-theme.scss
index 8dca7dcd3e..68d1959ae4 100644
--- a/aio/src/styles/2-modules/code/_code-theme.scss
+++ b/aio/src/styles/2-modules/code/_code-theme.scss
@@ -1,8 +1,9 @@
+@use 'sass:color';
+@use 'sass:map';
 @use '../../constants';
-@import "~@angular/material/theming";
 
 @mixin theme($theme) {
-  $is-dark-theme: map-get($theme, is-dark);
+  $is-dark-theme: map.get($theme, is-dark);
 
   code-example {
     &:not(.no-box) {
@@ -51,11 +52,11 @@
     pre.prettyprint {
       code {
         ol.linenums {
-          color: lighten(constants.$mediumgray, 25%);
+          color: color.adjust(constants.$mediumgray, $lightness: 25%);
 
           li {
             &::marker {
-              color: lighten(constants.$mediumgray, 25%);
+              color: color.adjust(constants.$mediumgray, $lightness: 25%);
             }
           }
         }
diff --git a/aio/src/styles/2-modules/contributor/_contributor-theme.scss b/aio/src/styles/2-modules/contributor/_contributor-theme.scss
index 4bb278f5e3..cd4fcd0aea 100644
--- a/aio/src/styles/2-modules/contributor/_contributor-theme.scss
+++ b/aio/src/styles/2-modules/contributor/_contributor-theme.scss
@@ -1,11 +1,12 @@
+@use 'sass:map';
 @use '../../constants';
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 @mixin theme($theme) {
-  $background: map-get($theme, background);
+  $background: map.get($theme, background);
 
   aio-contributor {
-    background: mat-color($background, background);
+    background: mat.get-color-from-palette($background, background);
 
     .contributor-info {
       background: rgba(constants.$darkgray, 0.5);
diff --git a/aio/src/styles/2-modules/deploy-theme/_deploy-theme.scss b/aio/src/styles/2-modules/deploy-theme/_deploy-theme.scss
index 9e9817a8f8..20002ca3f1 100644
--- a/aio/src/styles/2-modules/deploy-theme/_deploy-theme.scss
+++ b/aio/src/styles/2-modules/deploy-theme/_deploy-theme.scss
@@ -1,18 +1,19 @@
+@use 'sass:map';
 @use '../../constants';
 @use '../../mixins';
 
 @mixin theme($theme) {
-  $is-dark-theme: map-get($theme, is-dark);
+  $is-dark-theme: map.get($theme, is-dark);
 
   aio-shell.mode-archive {
     @include mixins.deploy-theme(constants.$blue-grey-900, constants.$blue-grey-400, if($is-dark-theme, constants.$powderblue, constants.$blue-grey-900));
   }
-  
+
   aio-shell.mode-next {
     @include mixins.deploy-theme(constants.$brightred, constants.$darkred, if($is-dark-theme, constants.$powderblue, constants.$brightred));
   }
-  
+
   aio-shell.mode-rc {
     @include mixins.deploy-theme(constants.$tangerine, constants.$darkgoldenrod, if($is-dark-theme, constants.$powderblue, constants.$tangerine));
   }
-}
\ No newline at end of file
+}
diff --git a/aio/src/styles/2-modules/details/_details-theme.scss b/aio/src/styles/2-modules/details/_details-theme.scss
index a093dd1db2..fd0fc697b9 100644
--- a/aio/src/styles/2-modules/details/_details-theme.scss
+++ b/aio/src/styles/2-modules/details/_details-theme.scss
@@ -1,5 +1,4 @@
 @use '../../constants';
-@import '~@angular/material/theming';
 
 @mixin theme($theme) {
   details {
diff --git a/aio/src/styles/2-modules/details/_details.scss b/aio/src/styles/2-modules/details/_details.scss
index c035267b9d..4e533ae8c3 100644
--- a/aio/src/styles/2-modules/details/_details.scss
+++ b/aio/src/styles/2-modules/details/_details.scss
@@ -1,3 +1,4 @@
+@use 'sass:selector';
 @use '../../constants';
 @use '../../mixins';
 
@@ -33,7 +34,7 @@ details {
     i.material-icons.expand {
       @include mixins.rotate(0deg);
 
-      @at-root #{selector-replace(&, 'details', 'details[open]')} {
+      @at-root #{selector.replace(&, 'details', 'details[open]')} {
         @include mixins.rotate(180deg);
       }
     }
diff --git a/aio/src/styles/2-modules/errors/_errors-theme.scss b/aio/src/styles/2-modules/errors/_errors-theme.scss
index 735472ebe3..02e2634406 100644
--- a/aio/src/styles/2-modules/errors/_errors-theme.scss
+++ b/aio/src/styles/2-modules/errors/_errors-theme.scss
@@ -1,5 +1,4 @@
 @use '../../constants';
-@import "~@angular/material/theming";
 
 @mixin theme($theme) {
   .error-list {
diff --git a/aio/src/styles/2-modules/filetree/_filetree-theme.scss b/aio/src/styles/2-modules/filetree/_filetree-theme.scss
index 8cc165f8d5..aa0dd23e6f 100644
--- a/aio/src/styles/2-modules/filetree/_filetree-theme.scss
+++ b/aio/src/styles/2-modules/filetree/_filetree-theme.scss
@@ -1,5 +1,4 @@
 @use '../../constants';
-@import '~@angular/material/theming';
 
 @mixin theme($theme) {
   .filetree {
diff --git a/aio/src/styles/2-modules/guides/_guides-theme.scss b/aio/src/styles/2-modules/guides/_guides-theme.scss
index e56b23feec..0cb860ffe5 100644
--- a/aio/src/styles/2-modules/guides/_guides-theme.scss
+++ b/aio/src/styles/2-modules/guides/_guides-theme.scss
@@ -1,10 +1,11 @@
+@use 'sass:color';
+@use 'sass:map';
 @use '../../constants';
-@import '~@angular/material/theming';
 
 @mixin theme($theme) {
-    $is-dark-theme: map-get($theme, is-dark);
+  $is-dark-theme: map.get($theme, is-dark);
 
-    .reviewed {
-        color: if($is-dark-theme, constants.$offwhite, lighten(constants.$darkgray, 10));
-      }
+  .reviewed {
+    color: if($is-dark-theme, constants.$offwhite, color.adjust(constants.$darkgray, $lightness: 10%));
+  }
 }
diff --git a/aio/src/styles/2-modules/heading-anchors/_heading-anchors-theme.scss b/aio/src/styles/2-modules/heading-anchors/_heading-anchors-theme.scss
index 0821d91485..0523679b80 100644
--- a/aio/src/styles/2-modules/heading-anchors/_heading-anchors-theme.scss
+++ b/aio/src/styles/2-modules/heading-anchors/_heading-anchors-theme.scss
@@ -1,5 +1,4 @@
 @use '../../constants';
-@import '~@angular/material/theming';
 
 @mixin theme($theme) {
   .sidenav-content {
diff --git a/aio/src/styles/2-modules/hr/_hr-theme.scss b/aio/src/styles/2-modules/hr/_hr-theme.scss
index 801ff1c0bf..a01a62b494 100644
--- a/aio/src/styles/2-modules/hr/_hr-theme.scss
+++ b/aio/src/styles/2-modules/hr/_hr-theme.scss
@@ -1,8 +1,8 @@
+@use 'sass:map';
 @use '../../constants';
-@import '~@angular/material/theming';
 
 @mixin theme($theme) {
-  $is-dark-theme: map-get($theme, is-dark);
+  $is-dark-theme: map.get($theme, is-dark);
 
   hr {
     background: if($is-dark-theme, constants.$mediumgray, constants.$lightgray);
diff --git a/aio/src/styles/2-modules/images/_images-theme.scss b/aio/src/styles/2-modules/images/_images-theme.scss
index 0a7fb9cce1..4b7acae656 100644
--- a/aio/src/styles/2-modules/images/_images-theme.scss
+++ b/aio/src/styles/2-modules/images/_images-theme.scss
@@ -1,8 +1,8 @@
+@use 'sass:map';
 @use '../../constants';
-@import '~@angular/material/theming';
 
 @mixin theme($theme) {
-  $is-dark-theme: map-get($theme, is-dark);
+  $is-dark-theme: map.get($theme, is-dark);
 
   .content {
     .lightbox {
diff --git a/aio/src/styles/2-modules/label/_label-theme.scss b/aio/src/styles/2-modules/label/_label-theme.scss
index a4e300f0c6..1b26c97f42 100644
--- a/aio/src/styles/2-modules/label/_label-theme.scss
+++ b/aio/src/styles/2-modules/label/_label-theme.scss
@@ -1,36 +1,36 @@
+@use 'sass:map';
 @use '../../constants';
-@import '~@angular/material/theming';
 
 @mixin theme($theme) {
-    .api-header label {
-        color: constants.$white;
+  .api-header label {
+    color: constants.$white;
 
-        &.api-status-label {
-          background-color: constants.$mediumgray;
-      
-          &.deprecated, &.security, &.impure-pipe {
-            background-color: constants.$brightred;
-          }
-        }
-      
-        &.api-type-label {
-          background-color: constants.$accentblue;
-      
-          @each $name, $symbol in constants.$api-symbols {
-            &.#{$name} {
-              background: map-get($symbol, background);
-            }
-          }
-        }
-      
-        &.page-label {
-          background-color: constants.$mist;
-          color: constants.$mediumgray;
-        }
-      
-        &.property-type-label {
-          background-color: constants.$darkgray;
-          color: constants.$white;
+    &.api-status-label {
+      background-color: constants.$mediumgray;
+
+      &.deprecated, &.security, &.impure-pipe {
+        background-color: constants.$brightred;
+      }
+    }
+
+    &.api-type-label {
+      background-color: constants.$accentblue;
+
+      @each $name, $symbol in constants.$api-symbols {
+        &.#{$name} {
+          background: map.get($symbol, background);
         }
       }
+    }
+
+    &.page-label {
+      background-color: constants.$mist;
+      color: constants.$mediumgray;
+    }
+
+    &.property-type-label {
+      background-color: constants.$darkgray;
+      color: constants.$white;
+    }
+  }
 }
diff --git a/aio/src/styles/2-modules/notification/_notification-theme.scss b/aio/src/styles/2-modules/notification/_notification-theme.scss
index 79d82d6be8..793008c5c9 100644
--- a/aio/src/styles/2-modules/notification/_notification-theme.scss
+++ b/aio/src/styles/2-modules/notification/_notification-theme.scss
@@ -1,5 +1,4 @@
 @use '../../constants';
-@import '~@angular/material/theming';
 
 @mixin theme($theme) {
   aio-notification {
diff --git a/aio/src/styles/2-modules/presskit/_presskit-theme.scss b/aio/src/styles/2-modules/presskit/_presskit-theme.scss
index fcf50d14b4..325beb5a25 100644
--- a/aio/src/styles/2-modules/presskit/_presskit-theme.scss
+++ b/aio/src/styles/2-modules/presskit/_presskit-theme.scss
@@ -1,9 +1,10 @@
+@use 'sass:map';
 @use '../../constants';
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 @mixin theme($theme) {
-  $background: map-get($theme, background);
-  $is-dark-theme: map-get($theme, is-dark);
+  $background: map.get($theme, background);
+  $is-dark-theme: map.get($theme, is-dark);
 
   .presskit-container {
     .presskit-section {
@@ -18,7 +19,7 @@
               background-color: constants.$white;
 
               &-inverse {
-                background-color: if($is-dark-theme, mat-color($background, background), constants.$deepgray);
+                background-color: if($is-dark-theme, mat.get-color-from-palette($background, background), constants.$deepgray);
               }
             }
           }
diff --git a/aio/src/styles/2-modules/resources/_resources-theme.scss b/aio/src/styles/2-modules/resources/_resources-theme.scss
index e9adadf7eb..87d3140d3e 100644
--- a/aio/src/styles/2-modules/resources/_resources-theme.scss
+++ b/aio/src/styles/2-modules/resources/_resources-theme.scss
@@ -1,8 +1,8 @@
+@use 'sass:map';
 @use '../../constants';
-@import '~@angular/material/theming';
 
 @mixin theme($theme) {
-  $is-dark-theme: map-get($theme, is-dark);
+  $is-dark-theme: map.get($theme, is-dark);
 
   aio-resource-list {
     .subcategory-title {
diff --git a/aio/src/styles/2-modules/search-results/_search-results-theme.scss b/aio/src/styles/2-modules/search-results/_search-results-theme.scss
index 39007ab9bd..06c858e243 100644
--- a/aio/src/styles/2-modules/search-results/_search-results-theme.scss
+++ b/aio/src/styles/2-modules/search-results/_search-results-theme.scss
@@ -1,9 +1,11 @@
+@use 'sass:color';
+@use 'sass:map';
 @use '../../constants';
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 @mixin theme($theme) {
-  $foreground: map-get($theme, foreground);
-  $is-dark-theme: map-get($theme, is-dark);
+  $foreground: map.get($theme, foreground);
+  $is-dark-theme: map.get($theme, is-dark);
 
   aio-search-results {
     .search-results {
@@ -17,7 +19,7 @@
 
         ul {
           .search-result-item {
-            color: if($is-dark-theme, constants.$offwhite , constants.$lightgray);
+            color: if($is-dark-theme, constants.$offwhite, constants.$lightgray);
 
             &:hover {
               color: constants.$white;
@@ -27,11 +29,11 @@
       }
 
       .no-results {
-        color: mat-color($foreground, text);
+        color: mat.get-color-from-palette($foreground, text);
       }
 
       a {
-        color: mat-color($foreground, text);
+        color: mat.get-color-from-palette($foreground, text);
       }
     }
 
@@ -43,7 +45,7 @@
           }
 
           .search-result-item {
-            color: if($is-dark-theme, constants.$offwhite ,lighten(constants.$darkgray, 10));
+            color: if($is-dark-theme, constants.$offwhite, color.adjust(constants.$darkgray, $lightness: 10%));
 
             &:hover {
               color: constants.$accentblue;
@@ -52,7 +54,7 @@
         }
 
         .no-results {
-          color: mat-color($foreground, text);
+          color: mat.get-color-from-palette($foreground, text);
         }
 
         a {
diff --git a/aio/src/styles/2-modules/select-menu/_select-menu-theme.scss b/aio/src/styles/2-modules/select-menu/_select-menu-theme.scss
index 34397da0e9..ae9f5148ad 100644
--- a/aio/src/styles/2-modules/select-menu/_select-menu-theme.scss
+++ b/aio/src/styles/2-modules/select-menu/_select-menu-theme.scss
@@ -1,9 +1,10 @@
+@use 'sass:map';
 @use '../../constants';
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 @mixin theme($theme) {
-  $background: map-get($theme, background);
-  $is-dark-theme: map-get($theme, is-dark);
+  $background: map.get($theme, background);
+  $is-dark-theme: map.get($theme, is-dark);
 
   aio-select {
     .form-select-button {
@@ -23,7 +24,7 @@
     }
 
     .form-select-dropdown {
-      background: mat-color($background, background);
+      background: mat.get-color-from-palette($background, background);
       box-shadow: 0 16px 16px rgba(constants.$black, 0.24), 0 0 16px rgba(constants.$black, 0.12);
 
       li {
diff --git a/aio/src/styles/2-modules/table/_table-theme.scss b/aio/src/styles/2-modules/table/_table-theme.scss
index 2273fc0c14..dd7e506a24 100644
--- a/aio/src/styles/2-modules/table/_table-theme.scss
+++ b/aio/src/styles/2-modules/table/_table-theme.scss
@@ -1,13 +1,14 @@
+@use 'sass:map';
 @use '../../constants';
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 @mixin theme($theme) {
-  $background: map-get($theme, background);
-  $is-dark-theme: map-get($theme, is-dark);
+  $background: map.get($theme, background);
+  $is-dark-theme: map.get($theme, is-dark);
 
   table {
     box-shadow: 0 2px 2px rgba(constants.$mediumgray, 0.24), 0 0 2px rgba(if($is-dark-theme, constants.$white, constants.$black), 0.12);
-    background-color: if($is-dark-theme, mat-color($background, background), constants.$white);
+    background-color: if($is-dark-theme, mat.get-color-from-palette($background, background), constants.$white);
 
     thead > {
       tr > th {
diff --git a/aio/src/styles/2-modules/toc/_toc-theme.scss b/aio/src/styles/2-modules/toc/_toc-theme.scss
index 25d20a95cd..4cd8bfa854 100644
--- a/aio/src/styles/2-modules/toc/_toc-theme.scss
+++ b/aio/src/styles/2-modules/toc/_toc-theme.scss
@@ -1,9 +1,11 @@
+@use 'sass:color';
+@use 'sass:map';
 @use '../../constants';
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 @mixin theme($theme) {
-  $foreground: map-get($theme, foreground);
-  $is-dark-theme: map-get($theme, is-dark);
+  $foreground: map.get($theme, foreground);
+  $is-dark-theme: map.get($theme, is-dark);
 
   aio-toc {
     .toc-inner {
@@ -46,7 +48,7 @@
           }
 
           a {
-            color: if($is-dark-theme, constants.$white, lighten(constants.$darkgray, 10));
+            color: if($is-dark-theme, constants.$white, color.adjust(constants.$darkgray, $lightness: 10%));
           }
 
           &:hover {
@@ -84,7 +86,7 @@
       .toc-inner {
         .toc-heading {
           &.secondary {
-            color: mat-color($foreground, text);
+            color: mat.get-color-from-palette($foreground, text);
           }
         }
       }
diff --git a/aio/src/styles/_mixins.scss b/aio/src/styles/_mixins.scss
index baa4c69ac5..81f6fd9073 100644
--- a/aio/src/styles/_mixins.scss
+++ b/aio/src/styles/_mixins.scss
@@ -1,3 +1,5 @@
+@use 'sass:list';
+@use 'sass:selector';
 @use './constants';
 
 // REM Font Adjustments
@@ -127,7 +129,7 @@
   );
 
   @if $nestParentSelector and & {
-    @at-root #{selector-nest(#{$selectors}, &)} {
+    @at-root #{selector.nest(#{$selectors}, &)} {
       @content;
     }
   } @else {
@@ -179,10 +181,10 @@
     '.page-presskit',
     '.page-resources',
   );
-  $selectors: join($marketingPagesSelectors, $extraSelectors, $separator: comma);
+  $selectors: list.join($marketingPagesSelectors, $extraSelectors, $separator: comma);
 
   @if $nestParentSelector and & {
-    @at-root #{selector-nest(#{$selectors}, &)} {
+    @at-root #{selector.nest(#{$selectors}, &)} {
       @content;
     }
   } @else {
diff --git a/aio/src/styles/custom-themes/dark-theme.scss b/aio/src/styles/custom-themes/dark-theme.scss
index 962a388d62..f8a96b3505 100644
--- a/aio/src/styles/custom-themes/dark-theme.scss
+++ b/aio/src/styles/custom-themes/dark-theme.scss
@@ -1,10 +1,10 @@
 @use '../app-theme';
-@import "~@angular/material/theming";
+@use '~@angular/material' as mat;
 
-$ng-io-primary: mat-palette($mat-blue, 700, 600, 900);
-$ng-io-accent: mat-palette($mat-red, 700, 600, 800);
-$ng-io-warn: mat-palette($mat-red);
-$ng-io-theme: mat-dark-theme($ng-io-primary, $ng-io-accent, $ng-io-warn);
+$ng-io-primary: mat.define-palette(mat.$blue-palette, 700, 600, 900);
+$ng-io-accent: mat.define-palette(mat.$red-palette, 700, 600, 800);
+$ng-io-warn: mat.define-palette(mat.$red-palette);
+$ng-io-theme: mat.define-dark-theme($ng-io-primary, $ng-io-accent, $ng-io-warn);
 
-@include angular-material-theme($ng-io-theme);
+@include mat.all-component-themes($ng-io-theme);
 @include app-theme.theme($ng-io-theme);
diff --git a/aio/src/styles/custom-themes/light-theme.scss b/aio/src/styles/custom-themes/light-theme.scss
index 6bc59970a3..9fc77d0e34 100644
--- a/aio/src/styles/custom-themes/light-theme.scss
+++ b/aio/src/styles/custom-themes/light-theme.scss
@@ -1,10 +1,10 @@
 @use '../app-theme';
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
-$ng-io-primary: mat-palette($mat-blue, 700, 600, 800);
-$ng-io-accent: mat-palette($mat-red, 700, 600, 800);
-$ng-io-warn: mat-palette($mat-red);
-$ng-io-theme: mat-light-theme($ng-io-primary, $ng-io-accent, $ng-io-warn);
+$ng-io-primary: mat.define-palette(mat.$blue-palette, 700, 600, 800);
+$ng-io-accent: mat.define-palette(mat.$red-palette, 700, 600, 800);
+$ng-io-warn: mat.define-palette(mat.$red-palette);
+$ng-io-theme: mat.define-light-theme($ng-io-primary, $ng-io-accent, $ng-io-warn);
 
-@include angular-material-theme($ng-io-theme);
+@include mat.all-component-themes($ng-io-theme);
 @include app-theme.theme($ng-io-theme);
diff --git a/aio/src/styles/main.scss b/aio/src/styles/main.scss
index 420fd414c6..b7c36d0692 100755
--- a/aio/src/styles/main.scss
+++ b/aio/src/styles/main.scss
@@ -6,8 +6,8 @@
 // import print styles
 @use './print';
 
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 // Include the base styles for Angular Material core. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
-@include mat-core();
+@include mat.core();