diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/_lib.scss b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/_lib.scss
index 58d43c9057..d621513661 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/_lib.scss
+++ b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/_lib.scss
@@ -12,12 +12,11 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as matm2;
-@use '@angular/material' as matm2var;
+@use '@angular/material' as mat;
 
 @mixin debugger-op-type {
-  background-color: matm2.m2-get-color-from-palette(
-    matm2var.$m2-blue-grey-palette,
+  background-color: mat.m2-get-color-from-palette(
+    mat.$m2-blue-grey-palette,
     50
   );
   @include tb-theme-foreground-prop(border, border, 1px solid);
@@ -30,8 +29,8 @@ limitations under the License.
   width: max-content;
 
   @include tb-dark-theme {
-    background-color: matm2.m2-get-color-from-palette(
-      matm2var.$m2-blue-grey-palette,
+    background-color: mat.m2-get-color-from-palette(
+      mat.$m2-blue-grey-palette,
       700
     );
   }
@@ -41,8 +40,8 @@ limitations under the License.
   background-color: #fff099;
 
   @include tb-dark-theme {
-    background-color: matm2.m2-get-color-from-palette(
-      matm2var.$m2-orange-palette,
+    background-color: mat.m2-get-color-from-palette(
+      mat.$m2-orange-palette,
       900
     );
   }
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.scss b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.scss
index 8315725c62..d8c9105eeb 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.scss
+++ b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.scss
@@ -12,8 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as matm2;
-@use '@angular/material' as matm2var;
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 .debug-tensor-values-table {
@@ -46,10 +45,7 @@ limitations under the License.
 }
 
 .focus-execution-container {
-  background-color: matm2.m2-get-color-from-palette(
-    matm2var.$m2-orange-palette,
-    200
-  );
+  background-color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 200);
   border-radius: 4px;
   font-size: 12px;
   height: 120px;
@@ -57,8 +53,8 @@ limitations under the License.
   width: 360px;
 
   @include tb-dark-theme {
-    background-color: matm2.m2-get-color-from-palette(
-      matm2var.$m2-orange-palette,
+    background-color: mat.m2-get-color-from-palette(
+      mat.$m2-orange-palette,
       900
     );
   }
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_op_component.scss b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_op_component.scss
index 8cafc30ad7..627752f722 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_op_component.scss
+++ b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_op_component.scss
@@ -12,8 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as matm2;
-@use '@angular/material' as matm2var;
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 @import '../common/lib';
 
@@ -32,7 +31,7 @@ limitations under the License.
   padding: 2px 6px;
   text-align: right;
   width: 200px;
-  $grey-600: matm2.m2-get-color-from-palette(matm2var.$m2-grey-palette, 600);
+  $grey-600: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 600);
 
   @include tb-dark-theme {
     box-shadow: 1px 3px $grey-600;
diff --git a/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.scss b/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.scss
index c52087078a..b9e631fb5e 100644
--- a/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.scss
+++ b/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.scss
@@ -12,19 +12,19 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as matm2;
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 .message {
   .warning {
-    color: matm2.m2-get-color-from-palette($tb-warn);
+    color: mat.m2-get-color-from-palette($tb-warn);
   }
 
   margin-bottom: 16px;
 }
 
 .note-1 {
-  color: matm2.m2-get-color-from-palette($tb-accent);
+  color: mat.m2-get-color-from-palette($tb-accent);
 }
 
 .scrolling-page {
diff --git a/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss b/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss
index 2729c349cf..d7aebed24d 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss
@@ -12,7 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as matm2;
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 @import '../common';
 
@@ -153,7 +153,7 @@ $_title-to-heading-gap: 12px;
 }
 
 :host ::ng-deep .mat-slider-min-value .mat-slider-thumb {
-  background-color: matm2.m2-get-color-from-palette($tb-primary);
+  background-color: mat.m2-get-color-from-palette($tb-primary);
 }
 
 :host ::ng-deep .hide-slider.mat-slider-horizontal .mat-slider-track-wrapper {
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
index 921795e2cd..6d350db4b8 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
@@ -12,7 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as matm2;
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 @import '../common';
 
@@ -205,13 +205,10 @@ $_data_table_initial_height: 100px;
   align-items: center;
 
   .expand-button {
-    color: matm2.m2-get-color-from-palette($tb-foreground, secondary-text);
+    color: mat.m2-get-color-from-palette($tb-foreground, secondary-text);
 
     @include tb-dark-theme {
-      color: matm2.m2-get-color-from-palette(
-        $tb-dark-foreground,
-        secondary-text
-      );
+      color: mat.m2-get-color-from-palette($tb-dark-foreground, secondary-text);
       background-color: map-get($tb-dark-background, background);
     }
   }
diff --git a/tensorboard/webapp/metrics/views/card_renderer/vis_linked_time_selection_warning_component.scss b/tensorboard/webapp/metrics/views/card_renderer/vis_linked_time_selection_warning_component.scss
index 6654f6a9cf..567ca65965 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/vis_linked_time_selection_warning_component.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/vis_linked_time_selection_warning_component.scss
@@ -12,12 +12,12 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as matm2;
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 :host {
-  color: matm2.m2-get-color-from-palette(
-    map-get(matm2.m2-get-color-config($tb-theme), warn),
+  color: mat.m2-get-color-from-palette(
+    map-get(mat.m2-get-color-config($tb-theme), warn),
     700
   );
   height: 1em;
@@ -25,8 +25,8 @@ limitations under the License.
   display: inline-flex;
 
   @include tb-dark-theme {
-    color: matm2.m2-get-color-from-palette(
-      map-get(matm2.m2-get-color-config($tb-dark-theme), warn),
+    color: mat.m2-get-color-from-palette(
+      map-get(mat.m2-get-color-config($tb-dark-theme), warn),
       700
     );
   }
diff --git a/tensorboard/webapp/metrics/views/main_view/filter_input_component.scss b/tensorboard/webapp/metrics/views/main_view/filter_input_component.scss
index 4ac9e94259..e55ad820ba 100644
--- a/tensorboard/webapp/metrics/views/main_view/filter_input_component.scss
+++ b/tensorboard/webapp/metrics/views/main_view/filter_input_component.scss
@@ -12,7 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as matm2;
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 .tag-filter {
@@ -28,7 +28,7 @@ tb-filter-input {
   @include tb-theme-foreground-prop(color, text);
 
   &:not(.valid) {
-    $_error-color: matm2.m2-get-color-from-palette($tb-warn, 800);
+    $_error-color: mat.m2-get-color-from-palette($tb-warn, 800);
 
     color: $_error-color;
 
diff --git a/tensorboard/webapp/metrics/views/main_view/main_view_component.scss b/tensorboard/webapp/metrics/views/main_view/main_view_component.scss
index 327efab380..7d44f260c5 100644
--- a/tensorboard/webapp/metrics/views/main_view/main_view_component.scss
+++ b/tensorboard/webapp/metrics/views/main_view/main_view_component.scss
@@ -12,8 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as matm2;
-@use '@angular/material' as matm2var;
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 @import '../common';
 
@@ -87,7 +86,7 @@ mat-button-toggle-group.filter-view {
 .main,
 .sidebar {
   contain: strict;
-  background-color: matm2.m2-get-color-from-palette($tb-background, background);
+  background-color: mat.m2-get-color-from-palette($tb-background, background);
   overflow-x: hidden;
   overflow-y: auto;
   will-change: transform, scroll-position;
@@ -98,7 +97,7 @@ mat-button-toggle-group.filter-view {
 }
 
 .main {
-  background-color: matm2.m2-get-color-from-palette($tf-slate, 200);
+  background-color: mat.m2-get-color-from-palette($tf-slate, 200);
   flex: 1 1;
   display: flex;
   flex-direction: column;
@@ -154,19 +153,16 @@ mat-button-toggle-group.filter-view {
 
 /** TODO(psybuzz): consider making a tb-button instead. */
 :host .settings-button {
-  color: matm2.m2-get-color-from-palette($tb-foreground, secondary-text);
+  color: mat.m2-get-color-from-palette($tb-foreground, secondary-text);
   display: inline-flex;
 
   @include tb-dark-theme {
-    color: matm2.m2-get-color-from-palette($tb-dark-foreground, secondary-text);
+    color: mat.m2-get-color-from-palette($tb-dark-foreground, secondary-text);
   }
 
   &.checked {
     @include tb-theme-background-prop(background-color, selected-button);
-    border-color: matm2.m2-get-color-from-palette(
-      matm2var.$m2-grey-palette,
-      300
-    );
+    border-color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 300);
   }
 
   ::ng-deep .mat-button-wrapper {
@@ -180,7 +176,7 @@ mat-button-toggle-group.filter-view {
 }
 
 .slide-out-menu {
-  background-color: matm2.m2-get-color-from-palette($tb-background, background);
+  background-color: mat.m2-get-color-from-palette($tb-background, background);
   // Make the menu the full height minus the size of the toolbar.
   height: calc(100% - 49px);
   position: absolute;
diff --git a/tensorboard/webapp/metrics/views/main_view/pinned_view_component.scss b/tensorboard/webapp/metrics/views/main_view/pinned_view_component.scss
index 6b42226e10..bc4fcd4a45 100644
--- a/tensorboard/webapp/metrics/views/main_view/pinned_view_component.scss
+++ b/tensorboard/webapp/metrics/views/main_view/pinned_view_component.scss
@@ -12,8 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as matm2;
-@use '@angular/material' as matm2var;
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 @import '../common';
 
@@ -66,7 +65,7 @@ mat-icon {
 
 .new-card-pinned {
   animation: pinned-view-fade-out 3s linear;
-  background: matm2.m2-get-color-from-palette(matm2var.$m2-red-palette, 500);
+  background: mat.m2-get-color-from-palette(mat.$m2-red-palette, 500);
   border-radius: 5px;
   color: #fff;
   display: inline-block;
diff --git a/tensorboard/webapp/metrics/views/metrics_container.scss b/tensorboard/webapp/metrics/views/metrics_container.scss
index 1df22f08af..146980a394 100644
--- a/tensorboard/webapp/metrics/views/metrics_container.scss
+++ b/tensorboard/webapp/metrics/views/metrics_container.scss
@@ -12,8 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as matm2;
-@use '@angular/material' as matm2var;
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 :host {
@@ -27,13 +26,10 @@ limitations under the License.
 
 .notice {
   background-color: rgba(
-    matm2.m2-get-color-from-palette(matm2var.$m2-yellow-palette, 200),
+    mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 200),
     0.85
   );
-  $yellow-500: matm2.m2-get-color-from-palette(
-    matm2var.$m2-yellow-palette,
-    500
-  );
+  $yellow-500: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 500);
   border-bottom: 1px solid $yellow-500;
   color: map-get($tb-foreground, text);
   display: block;
@@ -46,15 +42,15 @@ tb-dashboard-layout {
 }
 
 nav {
-  background-color: matm2.m2-get-color-from-palette($tb-background, background);
-  $border: matm2.m2-get-color-from-palette($tb-foreground, border);
+  background-color: mat.m2-get-color-from-palette($tb-background, background);
+  $border: mat.m2-get-color-from-palette($tb-foreground, border);
   border-right: 1px solid $border;
   flex: none;
   width: 340px;
 
   @include tb-dark-theme {
     background-color: map-get($tb-dark-background, background);
-    border-right-color: matm2.m2-get-color-from-palette(
+    border-right-color: mat.m2-get-color-from-palette(
       $tb-dark-foreground,
       border
     );
diff --git a/tensorboard/webapp/metrics/views/right_pane/BUILD b/tensorboard/webapp/metrics/views/right_pane/BUILD
index 82fc761be1..e72ac2fd86 100644
--- a/tensorboard/webapp/metrics/views/right_pane/BUILD
+++ b/tensorboard/webapp/metrics/views/right_pane/BUILD
@@ -18,7 +18,6 @@ sass_binary(
     src = "saving_pins_checkbox_component.scss",
     include_paths = ["external/npm/node_modules"],
     deps = [
-        "//tensorboard/webapp/angular_components:material_sass",
         "//tensorboard/webapp/theme",
     ],
 )
diff --git a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.scss b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.scss
index 55a26d6529..1e26434754 100644
--- a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.scss
+++ b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.scss
@@ -12,11 +12,10 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as matm2;
-@use '@angular/material' as matm2var;
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
-$_accent: map-get(matm2.m2-get-color-config($tb-theme), accent);
+$_accent: map-get(mat.m2-get-color-config($tb-theme), accent);
 
 :host ::ng-deep .mat-tab-label {
   min-width: 0;
@@ -42,18 +41,15 @@ $_accent: map-get(matm2.m2-get-color-config($tb-theme), accent);
 }
 
 .highlighted {
-  background-color: matm2.m2-get-color-from-palette(
-    matm2var.$m2-grey-palette,
-    200
-  );
+  background-color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 200);
 }
 
 .highlight-bottom {
-  border-bottom: 2px solid matm2.m2-get-color-from-palette($_accent);
+  border-bottom: 2px solid mat.m2-get-color-from-palette($_accent);
 }
 
 .highlight-top {
-  border-top: 2px solid matm2.m2-get-color-from-palette($_accent);
+  border-top: 2px solid mat.m2-get-color-from-palette($_accent);
 }
 
 .footer {
@@ -66,20 +62,20 @@ $_accent: map-get(matm2.m2-get-color-config($tb-theme), accent);
   align-items: center;
   justify-content: flex-end;
   padding: 4px;
-  $border: matm2.m2-get-color-from-palette($tb-foreground, border);
+  $border: mat.m2-get-color-from-palette($tb-foreground, border);
   border-top: 1px solid $border;
 
   @include tb-dark-theme {
-    border-color: matm2.m2-get-color-from-palette($tb-dark-foreground, border);
+    border-color: mat.m2-get-color-from-palette($tb-dark-foreground, border);
   }
 }
 
 .close-button {
-  color: matm2.m2-get-color-from-palette($tb-foreground, secondary-text);
+  color: mat.m2-get-color-from-palette($tb-foreground, secondary-text);
   width: 84px;
 
   @include tb-dark-theme {
-    color: matm2.m2-get-color-from-palette($tb-dark-foreground, secondary-text);
+    color: mat.m2-get-color-from-palette($tb-dark-foreground, secondary-text);
   }
 }
 
diff --git a/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss b/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss
index bdff0572ab..a7f22f64e6 100644
--- a/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss
+++ b/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss
@@ -12,8 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as matm2;
-@use '@angular/material' as matm2var;
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 :host {
@@ -59,7 +58,7 @@ section .control-row:not(:has(+ .control-row > mat-checkbox)):not(:last-child) {
 
   .slider-input {
     background-color: inherit;
-    border: 1px solid matm2.m2-get-color-from-palette($tf-slate, 500);
+    border: 1px solid mat.m2-get-color-from-palette($tf-slate, 500);
     border-radius: 2px;
     box-sizing: border-box;
     color: inherit;
@@ -68,7 +67,7 @@ section .control-row:not(:has(+ .control-row > mat-checkbox)):not(:last-child) {
     padding: 0 4px;
 
     @include tb-dark-theme {
-      border-color: matm2.m2-get-color-from-palette($tf-slate, 700);
+      border-color: mat.m2-get-color-from-palette($tf-slate, 700);
     }
   }
 }
@@ -130,14 +129,11 @@ mat-slider {
   }
 
   &.toggle-opened {
-    background-color: matm2.m2-get-color-from-palette(
-      matm2var.$m2-grey-palette,
-      200
-    );
+    background-color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 200);
 
     @include tb-dark-theme {
-      background-color: matm2.m2-get-color-from-palette(
-        matm2var.$m2-grey-palette,
+      background-color: mat.m2-get-color-from-palette(
+        mat.$m2-grey-palette,
         800
       );
     }
diff --git a/tensorboard/webapp/notification_center/_views/notification_center_component.scss b/tensorboard/webapp/notification_center/_views/notification_center_component.scss
index 4a929a3fb8..2c3eaa0c41 100644
--- a/tensorboard/webapp/notification_center/_views/notification_center_component.scss
+++ b/tensorboard/webapp/notification_center/_views/notification_center_component.scss
@@ -12,8 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as matm2;
-@use '@angular/material' as matm2var;
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 .notification-icon-button {
@@ -22,10 +21,7 @@ limitations under the License.
 
 .red-dot {
   $_dim: 10px;
-  background-color: matm2.m2-get-color-from-palette(
-    matm2var.$m2-red-palette,
-    700
-  );
+  background-color: mat.m2-get-color-from-palette(mat.$m2-red-palette, 700);
   border-radius: $_dim * 0.5;
   height: $_dim;
   position: absolute;
@@ -56,7 +52,7 @@ limitations under the License.
 }
 
 .category-icon {
-  color: matm2.m2-get-color-from-palette(matm2var.$m2-blue-palette, 700);
+  color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 700);
   height: 15px;
   margin-right: 6px;
   vertical-align: middle;
diff --git a/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss b/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss
index 05371ac723..bea12ccd70 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss
+++ b/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss
@@ -12,7 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as matm2;
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 $_circle-size: 20px;
 
@@ -28,7 +28,7 @@ $_circle-size: 20px;
 
 .run-color-swatch {
   border-radius: 100%;
-  border: 1px solid matm2.m2-get-color-from-palette($tb-foreground, border);
+  border: 1px solid mat.m2-get-color-from-palette($tb-foreground, border);
   height: $_circle-size;
   width: $_circle-size;
   outline: none;
diff --git a/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.scss b/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.scss
index a97a2865e6..efc7ec0e9c 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.scss
+++ b/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.scss
@@ -12,14 +12,14 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as matm2;
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 ::ng-deep .run-table-color-group-by {
   font-size: 16px;
 
   .label {
-    color: matm2.m2-get-color-from-palette($tb-foreground, secondary-text);
+    color: mat.m2-get-color-from-palette($tb-foreground, secondary-text);
     font-size: 0.9em;
     margin: 10px 0;
     padding: 0 16px;
diff --git a/tensorboard/webapp/theme/_tb_palette.scss b/tensorboard/webapp/theme/_tb_palette.scss
index 52d3aee1d9..1c5d987415 100644
--- a/tensorboard/webapp/theme/_tb_palette.scss
+++ b/tensorboard/webapp/theme/_tb_palette.scss
@@ -12,8 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as matm2;
-@use '@angular/material' as matm2var;
+@use '@angular/material' as mat;
 
 $tf-slate: (
   100: #f5f6f7,
@@ -44,15 +43,15 @@ $tf-slate: (
    several orange values, but only one of them (--tb-orange-strong) is used
    widely. */
 $tf-orange: (
-  100: matm2.m2-get-color-from-palette(matm2var.$m2-orange-palette, 100),
-  200: matm2.m2-get-color-from-palette(matm2var.$m2-orange-palette, 200),
-  300: matm2.m2-get-color-from-palette(matm2var.$m2-orange-palette, 300),
-  400: matm2.m2-get-color-from-palette(matm2var.$m2-orange-palette, 400),
-  500: matm2.m2-get-color-from-palette(matm2var.$m2-orange-palette, 500),
-  600: matm2.m2-get-color-from-palette(matm2var.$m2-orange-palette, 600),
-  700: matm2.m2-get-color-from-palette(matm2var.$m2-orange-palette, 700),
-  800: matm2.m2-get-color-from-palette(matm2var.$m2-orange-palette, 800),
-  900: matm2.m2-get-color-from-palette(matm2var.$m2-orange-palette, 900),
+  100: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 100),
+  200: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 200),
+  300: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 300),
+  400: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 400),
+  500: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 500),
+  600: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 600),
+  700: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 700),
+  800: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 800),
+  900: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 900),
   contrast: (
     100: rgba(black, 0.87),
     200: rgba(black, 0.87),
diff --git a/tensorboard/webapp/theme/_tb_theme.template.scss b/tensorboard/webapp/theme/_tb_theme.template.scss
index df1cbcf65a..8f49384728 100644
--- a/tensorboard/webapp/theme/_tb_theme.template.scss
+++ b/tensorboard/webapp/theme/_tb_theme.template.scss
@@ -17,28 +17,28 @@ limitations under the License.
  * VARIABLE FILE IS INLINED WITH GENRULE. DO NOT IMPORT IT.
  * Variable file declares values for $tb-primary, $tb-accent
  * and $tb-warn
+ * The inline_palette genrule (tensorboard/webapp/theme/BUILD) produces:
+ * _tb_theme.scss = _variable.scss + _tb_theme.template.scss in that order
+ *  "_variable.scss",          # has `@use '@angular/material' as mat;`
  **********************************************************/
 
 // Angular Material theme definition.
 
 // Value for `app-bar` property in $tb-background. Can specify an override in
 // _variable.scss to specifically customize this value.
-$tb-app-bar-color: matm2.m2-get-color-from-palette(
-  $tb-primary,
-  default
-) !default;
+$tb-app-bar-color: mat.m2-get-color-from-palette($tb-primary, default) !default;
 
 $tb-dark-primary: $tb-primary !default;
 $tb-dark-accent: $tb-accent !default;
 $tb-dark-warn: $tb-warn !default;
 // Value for `app-bar` property in $tb-dark-background. Can specify an override
 // in _variable.scss to specifically customize this value.
-$tb-dark-app-bar-color: matm2.m2-get-color-from-palette(
+$tb-dark-app-bar-color: mat.m2-get-color-from-palette(
   $tb-dark-primary,
   default
 ) !default;
 
-$tb-theme: matm2.m2-define-light-theme(
+$tb-theme: mat.m2-define-light-theme(
   (
     color: (
       primary: $tb-primary,
@@ -52,22 +52,19 @@ $tb-theme: matm2.m2-define-light-theme(
 
 // Overriding mat-light-theme-foreground variables.
 $tb-foreground: map_merge(
-  matm2var.$m2-light-theme-foreground-palette,
+  mat.$m2-light-theme-foreground-palette,
   (
-    text: matm2.m2-get-color-from-palette(matm2var.$m2-gray-palette, 900),
-    secondary-text:
-      matm2.m2-get-color-from-palette(matm2var.$m2-gray-palette, 700),
-    disabled-text:
-      matm2.m2-get-color-from-palette(matm2var.$m2-gray-palette, 600),
+    text: mat.m2-get-color-from-palette(mat.$m2-gray-palette, 900),
+    secondary-text: mat.m2-get-color-from-palette(mat.$m2-gray-palette, 700),
+    disabled-text: mat.m2-get-color-from-palette(mat.$m2-gray-palette, 600),
     // TB specific variable.
     border: #ebebeb,
-    link: matm2.m2-get-color-from-palette(matm2var.$m2-blue-palette, 700),
-    link-visited:
-      matm2.m2-get-color-from-palette(matm2var.$m2-purple-palette, 700),
+    link: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 700),
+    link-visited: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 700),
   )
 );
 $tb-background: map_merge(
-  matm2var.$m2-light-theme-background-palette,
+  mat.$m2-light-theme-background-palette,
   (
     app-bar: $tb-app-bar-color,
     // Default is `map.get($grey-palette, 50)`.
@@ -101,11 +98,11 @@ $tb-theme: map_merge(
   color,
   system,
   (
-    on-surface: matm2.m2-get-color-from-palette(matm2var.$m2-gray-palette, 900),
+    on-surface: mat.m2-get-color-from-palette(mat.$m2-gray-palette, 900),
   )
 );
 
-$tb-dark-theme: matm2.m2-define-dark-theme(
+$tb-dark-theme: mat.m2-define-dark-theme(
   (
     color: (
       primary: $tb-dark-primary,
@@ -117,18 +114,16 @@ $tb-dark-theme: matm2.m2-define-dark-theme(
   )
 );
 $tb-dark-foreground: map_merge(
-  map-get(matm2.m2-get-color-config($tb-dark-theme), foreground),
+  map-get(mat.m2-get-color-config($tb-dark-theme), foreground),
   (
     border: #555,
-    disabled-text:
-      matm2.m2-get-color-from-palette(matm2var.$m2-gray-palette, 700),
-    link: matm2.m2-get-color-from-palette(matm2var.$m2-blue-palette, 400),
-    link-visited:
-      matm2.m2-get-color-from-palette(matm2var.$m2-purple-palette, 300),
+    disabled-text: mat.m2-get-color-from-palette(mat.$m2-gray-palette, 700),
+    link: mat.m2-get-color-from-palette(mat.$m2-blue-palette, 400),
+    link-visited: mat.m2-get-color-from-palette(mat.$m2-purple-palette, 300),
   )
 );
 $tb-dark-background: map_merge(
-  map-get(matm2.m2-get-color-config($tb-dark-theme), background),
+  map-get(mat.m2-get-color-config($tb-dark-theme), background),
   (
     app-bar: $tb-dark-app-bar-color,
   )
diff --git a/tensorboard/webapp/theme/_variable.scss b/tensorboard/webapp/theme/_variable.scss
index 9b1f4038bc..f569fcc1d2 100644
--- a/tensorboard/webapp/theme/_variable.scss
+++ b/tensorboard/webapp/theme/_variable.scss
@@ -12,19 +12,16 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-// INTERNAL-ONLY: Import of deprecated legacy Angular Material styles
-// Note: `mat` is unused inside this file, but `_variable.scss` is concatenated
-// into `_tb_theme.scss` by the //tensorboard/webapp/theme:inline_palette
-// genrule, where `_tb_theme.template.scss` calls `mat.core()` (and other
-// `mat.*` symbols). Removing this line breaks `_tb_theme.scss` compilation.
+// Note: `_variable.scss` is concatenated into `_tb_theme.scss` by the
+// //tensorboard/webapp/theme:inline_palette genrule, where
+// `_tb_theme.template.scss` also calls `mat.*` symbols. Keep this `@use` so
+// the concatenated `_tb_theme.scss` compiles.
 @use '@angular/material' as mat;
-@use '@angular/material' as matm2;
-@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_palette';
 
-$tb-primary: matm2.m2-define-palette($tf-orange, 700, 400, 800);
-$tb-accent: matm2.m2-define-palette($tf-orange);
-$tb-warn: matm2.m2-define-palette(matm2var.$m2-red-palette);
+$tb-primary: mat.m2-define-palette($tf-orange, 700, 400, 800);
+$tb-accent: mat.m2-define-palette($tf-orange);
+$tb-warn: mat.m2-define-palette(mat.$m2-red-palette);
 
-$tb-dark-primary: matm2.m2-define-palette($tf-orange, 800, 600, 900);
+$tb-dark-primary: mat.m2-define-palette($tf-orange, 800, 600, 900);
 $tb-dark-accent: $tb-dark-primary;
diff --git a/tensorboard/webapp/widgets/card_fob/card_fob_component.scss b/tensorboard/webapp/widgets/card_fob/card_fob_component.scss
index 8e71e4767b..f6a4004ff9 100644
--- a/tensorboard/webapp/widgets/card_fob/card_fob_component.scss
+++ b/tensorboard/webapp/widgets/card_fob/card_fob_component.scss
@@ -12,8 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as matm2;
-@use '@angular/material' as matm2var;
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 :host {
@@ -22,10 +21,7 @@ limitations under the License.
 
 .fob {
   display: inline-flex;
-  background-color: matm2.m2-get-color-from-palette(
-    matm2var.$m2-grey-palette,
-    300
-  );
+  background-color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 300);
   border-radius: 25px;
   padding: 2px 2px 2px 4px;
   font-size: 11px;
@@ -55,8 +51,7 @@ limitations under the License.
   &.prospective {
     align-items: center;
     box-sizing: border-box;
-    border: 1px dashed
-      matm2.m2-get-color-from-palette(matm2var.$m2-grey-palette, 500);
+    border: 1px dashed mat.m2-get-color-from-palette(mat.$m2-grey-palette, 500);
     font-weight: bold;
     height: 17px;
   }
@@ -67,7 +62,7 @@ span {
   display: inline-block;
 
   @include tb-dark-theme {
-    color: matm2.m2-get-color-from-palette(matm2var.$m2-grey-palette, 700);
+    color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 700);
   }
 }
 
@@ -91,23 +86,17 @@ button {
   }
 
   @include tb-dark-theme {
-    color: matm2.m2-get-color-from-palette(matm2var.$m2-grey-palette, 700);
+    color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 700);
   }
 }
 
 button:hover {
-  background-color: matm2.m2-get-color-from-palette(
-    matm2var.$m2-grey-palette,
-    500
-  );
-  color: matm2.m2-get-color-from-palette(matm2var.$m2-grey-palette, 200);
+  background-color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 500);
+  color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 200);
   cursor: pointer;
 
   @include tb-dark-theme {
-    background-color: matm2.m2-get-color-from-palette(
-      matm2var.$m2-grey-palette,
-      700
-    );
-    color: matm2.m2-get-color-from-palette(matm2var.$m2-grey-palette, 300);
+    background-color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 700);
+    color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 300);
   }
 }
diff --git a/tensorboard/webapp/widgets/content_wrapping_input/content_wrapping_input_component.scss b/tensorboard/webapp/widgets/content_wrapping_input/content_wrapping_input_component.scss
index 3a5cd022a7..6dcd97e11d 100644
--- a/tensorboard/webapp/widgets/content_wrapping_input/content_wrapping_input_component.scss
+++ b/tensorboard/webapp/widgets/content_wrapping_input/content_wrapping_input_component.scss
@@ -13,8 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
-@use '@angular/material' as matm2;
-@use '@angular/material' as matm2var;
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 :host {
@@ -22,7 +21,7 @@ limitations under the License.
   width: max-content;
 
   &:focus-within .container {
-    border-color: matm2.m2-get-color-from-palette($tb-primary, 700);
+    border-color: mat.m2-get-color-from-palette($tb-primary, 700);
   }
 
   &.default {
@@ -33,7 +32,7 @@ limitations under the License.
 
   &.error .container,
   .container:not(.is-valid) {
-    $_error-color: matm2.m2-get-color-from-palette($tb-warn, 200);
+    $_error-color: mat.m2-get-color-from-palette($tb-warn, 200);
     border-color: $_error-color;
 
     &:hover,
@@ -43,16 +42,10 @@ limitations under the License.
   }
 
   &.high-contrast .container {
-    border-color: matm2.m2-get-color-from-palette(
-      matm2var.$m2-grey-palette,
-      400
-    );
+    border-color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 400);
 
     &:hover {
-      border-color: matm2.m2-get-color-from-palette(
-        matm2var.$m2-grey-palette,
-        600
-      );
+      border-color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 600);
     }
   }
 }
diff --git a/tensorboard/webapp/widgets/data_table/column_selector_component.scss b/tensorboard/webapp/widgets/data_table/column_selector_component.scss
index aaf9da16db..14fc39d334 100644
--- a/tensorboard/webapp/widgets/data_table/column_selector_component.scss
+++ b/tensorboard/webapp/widgets/data_table/column_selector_component.scss
@@ -12,8 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as matm2;
-@use '@angular/material' as matm2var;
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 .contents {
@@ -26,12 +25,12 @@ limitations under the License.
   border: 1px solid;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 
-  border-color: matm2.m2-get-color-from-palette($tb-foreground, border);
-  background-color: matm2.m2-get-color-from-palette($tb-background, background);
+  border-color: mat.m2-get-color-from-palette($tb-foreground, border);
+  background-color: mat.m2-get-color-from-palette($tb-background, background);
 
   @include tb-dark-theme {
-    border-color: matm2.m2-get-color-from-palette($tb-dark-foreground, border);
-    background-color: matm2.m2-get-color-from-palette(
+    border-color: mat.m2-get-color-from-palette($tb-dark-foreground, border);
+    background-color: mat.m2-get-color-from-palette(
       $tb-dark-background,
       'background'
     );
@@ -50,7 +49,7 @@ limitations under the License.
   }
 
   .load-more-columns {
-    color: matm2.m2-get-color-from-palette($tb-warn, 600);
+    color: mat.m2-get-color-from-palette($tb-warn, 600);
     display: flex;
     flex-direction: column;
     margin-top: 6px;
@@ -81,14 +80,14 @@ limitations under the License.
     width: 100%;
 
     &.selected {
-      background-color: matm2.m2-get-color-from-palette(
-        matm2var.$m2-grey-palette,
+      background-color: mat.m2-get-color-from-palette(
+        mat.$m2-grey-palette,
         200
       );
 
       @include tb-dark-theme {
-        background-color: matm2.m2-get-color-from-palette(
-          matm2var.$m2-grey-palette,
+        background-color: mat.m2-get-color-from-palette(
+          mat.$m2-grey-palette,
           400
         );
       }
@@ -96,7 +95,7 @@ limitations under the License.
   }
 
   .tag {
-    background-color: matm2.m2-get-color-from-palette($tb-primary, 500);
+    background-color: mat.m2-get-color-from-palette($tb-primary, 500);
     border-radius: 8px;
     font-size: 12px;
     font-style: italic;
diff --git a/tensorboard/webapp/widgets/data_table/context_menu_component.scss b/tensorboard/webapp/widgets/data_table/context_menu_component.scss
index 63b8b4495a..66103932de 100644
--- a/tensorboard/webapp/widgets/data_table/context_menu_component.scss
+++ b/tensorboard/webapp/widgets/data_table/context_menu_component.scss
@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
-@use '@angular/material' as matm2;
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 .context-menu {
@@ -22,12 +22,12 @@ limitations under the License.
   border-radius: 4px;
   border: 1px solid;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  border-color: matm2.m2-get-color-from-palette($tb-foreground, border);
-  background-color: matm2.m2-get-color-from-palette($tb-background, background);
+  border-color: mat.m2-get-color-from-palette($tb-foreground, border);
+  background-color: mat.m2-get-color-from-palette($tb-background, background);
 
   @include tb-dark-theme {
-    border-color: matm2.m2-get-color-from-palette($tb-dark-foreground, border);
-    background-color: matm2.m2-get-color-from-palette(
+    border-color: mat.m2-get-color-from-palette($tb-dark-foreground, border);
+    background-color: mat.m2-get-color-from-palette(
       $tb-dark-background,
       'background'
     );
diff --git a/tensorboard/webapp/widgets/data_table/data_table_component.scss b/tensorboard/webapp/widgets/data_table/data_table_component.scss
index 4161401f0b..d156c48351 100644
--- a/tensorboard/webapp/widgets/data_table/data_table_component.scss
+++ b/tensorboard/webapp/widgets/data_table/data_table_component.scss
@@ -12,10 +12,10 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as matm2;
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
-$_accent: map-get(matm2.m2-get-color-config($tb-theme), accent);
+$_accent: map-get(mat.m2-get-color-config($tb-theme), accent);
 
 .data-table-wrapper {
   display: flex;
@@ -38,10 +38,7 @@ $_accent: map-get(matm2.m2-get-color-config($tb-theme), accent);
   width: 100%;
 
   .header {
-    background-color: matm2.m2-get-color-from-palette(
-      $tb-background,
-      background
-    );
+    background-color: mat.m2-get-color-from-palette($tb-background, background);
     display: table-row;
     font-weight: bold;
     position: sticky;
@@ -75,7 +72,7 @@ $_accent: map-get(matm2.m2-get-color-config($tb-theme), accent);
 }
 
 .right-section {
-  background-color: matm2.m2-get-color-from-palette($tb-background, background);
+  background-color: mat.m2-get-color-from-palette($tb-background, background);
   position: sticky;
   right: -1px; // Prevent fractional width from creating a gap.
   z-index: 1;
diff --git a/tensorboard/webapp/widgets/data_table/filter_dialog_component.scss b/tensorboard/webapp/widgets/data_table/filter_dialog_component.scss
index 5ff68e9c11..a6c76cb2fd 100644
--- a/tensorboard/webapp/widgets/data_table/filter_dialog_component.scss
+++ b/tensorboard/webapp/widgets/data_table/filter_dialog_component.scss
@@ -12,7 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as matm2;
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 .filter-dialog {
@@ -20,12 +20,12 @@ limitations under the License.
   border-radius: 4px;
   border: 1px solid;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  border-color: matm2.m2-get-color-from-palette($tb-foreground, border);
-  background-color: matm2.m2-get-color-from-palette($tb-background, background);
+  border-color: mat.m2-get-color-from-palette($tb-foreground, border);
+  background-color: mat.m2-get-color-from-palette($tb-background, background);
 
   @include tb-dark-theme {
-    border-color: matm2.m2-get-color-from-palette($tb-dark-foreground, border);
-    background-color: matm2.m2-get-color-from-palette(
+    border-color: mat.m2-get-color-from-palette($tb-dark-foreground, border);
+    background-color: mat.m2-get-color-from-palette(
       $tb-dark-background,
       'background'
     );
@@ -50,11 +50,11 @@ limitations under the License.
 .filter-container {
   padding-bottom: 8px;
   margin-bottom: 8px;
-  $border: matm2.m2-get-color-from-palette($tb-foreground, border);
+  $border: mat.m2-get-color-from-palette($tb-foreground, border);
   border-bottom: 1px solid $border;
 
   @include tb-dark-theme {
-    border-bottom-color: matm2.m2-get-color-from-palette(
+    border-bottom-color: mat.m2-get-color-from-palette(
       $tb-dark-foreground,
       border
     );
diff --git a/tensorboard/webapp/widgets/data_table/header_cell_component.scss b/tensorboard/webapp/widgets/data_table/header_cell_component.scss
index dcb487df34..13814adc71 100644
--- a/tensorboard/webapp/widgets/data_table/header_cell_component.scss
+++ b/tensorboard/webapp/widgets/data_table/header_cell_component.scss
@@ -13,11 +13,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
-@use '@angular/material' as matm2;
-@use '@angular/material' as matm2var;
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
-$_accent: map-get(matm2.m2-get-color-config($tb-theme), accent);
+$_accent: map-get(mat.m2-get-color-config($tb-theme), accent);
 $_icon_size: 12px;
 $_icon_padding: 4px;
 
@@ -81,16 +80,13 @@ $_icon_padding: 4px;
 }
 
 .highlight {
-  background-color: matm2.m2-get-color-from-palette(
-    matm2var.$m2-grey-palette,
-    200
-  );
+  background-color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 200);
 }
 
 .highlight-border-right {
-  border-right: 2px solid matm2.m2-get-color-from-palette($_accent);
+  border-right: 2px solid mat.m2-get-color-from-palette($_accent);
 }
 
 .highlight-border-left {
-  border-left: 2px solid matm2.m2-get-color-from-palette($_accent);
+  border-left: 2px solid mat.m2-get-color-from-palette($_accent);
 }
diff --git a/tensorboard/webapp/widgets/dropdown/dropdown_component.scss b/tensorboard/webapp/widgets/dropdown/dropdown_component.scss
index 4f9f26da48..6438358ad6 100644
--- a/tensorboard/webapp/widgets/dropdown/dropdown_component.scss
+++ b/tensorboard/webapp/widgets/dropdown/dropdown_component.scss
@@ -12,11 +12,11 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as matm2;
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 mat-select {
-  border: 1px solid matm2.m2-get-color-from-palette($tf-slate, 500);
+  border: 1px solid mat.m2-get-color-from-palette($tf-slate, 500);
   border-radius: 3px;
   box-sizing: border-box;
   padding: 6px;
diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss
index f7d15fee52..5c28d83d8e 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss
+++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss
@@ -12,8 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as matm2;
-@use '@angular/material' as matm2var;
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 :host {
@@ -184,7 +183,7 @@ text {
   }
 }
 
-$border: matm2.m2-get-color-from-palette(matm2var.$m2-grey-palette, 500);
+$border: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 500);
 $_border-style: 1px solid $border;
 
 .x-axis .major-label {
diff --git a/tensorboard/webapp/widgets/range_input/BUILD b/tensorboard/webapp/widgets/range_input/BUILD
index 11db874593..04562e0ead 100644
--- a/tensorboard/webapp/widgets/range_input/BUILD
+++ b/tensorboard/webapp/widgets/range_input/BUILD
@@ -8,7 +8,6 @@ sass_binary(
     src = "range_input_component.scss",
     include_paths = ["external/npm/node_modules"],
     deps = [
-        "//tensorboard/webapp/angular_components:material_sass",
         "//tensorboard/webapp/theme",
     ],
 )