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 0dbb8c2f78..a44e2a99f9 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
@@ -13,10 +13,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 
 @mixin debugger-op-type {
-  background-color: /*m2*/ mat.get-color-from-palette(
-    /*m2$*/ mat.$blue-grey-palette,
+  background-color: matm2.get-color-from-palette(
+    matm2var.$blue-grey-palette,
     50
   );
   @include tb-theme-foreground-prop(border, border, 1px solid);
@@ -29,8 +31,8 @@ limitations under the License.
   width: max-content;
 
   @include tb-dark-theme {
-    background-color: /*m2*/ mat.get-color-from-palette(
-      /*m2$*/ mat.$blue-grey-palette,
+    background-color: matm2.get-color-from-palette(
+      matm2var.$blue-grey-palette,
       700
     );
   }
@@ -38,9 +40,10 @@ limitations under the License.
 
 @mixin debugger-highlight-background {
   background-color: #fff099;
+
   @include tb-dark-theme {
-    background-color: /*m2*/ mat.get-color-from-palette(
-      /*m2$*/ mat.$orange-palette,
+    background-color: matm2.get-color-from-palette(
+      matm2var.$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 04ef73e0d8..56fadcbfee 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
@@ -13,6 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 .debug-tensor-values-table {
@@ -45,10 +47,7 @@ limitations under the License.
 }
 
 .focus-execution-container {
-  background-color: /*m2*/ mat.get-color-from-palette(
-    /*m2$*/ mat.$orange-palette,
-    200
-  );
+  background-color: matm2.get-color-from-palette(matm2var.$orange-palette, 200);
   border-radius: 4px;
   font-size: 12px;
   height: 120px;
@@ -56,8 +55,8 @@ limitations under the License.
   width: 360px;
 
   @include tb-dark-theme {
-    background-color: /*m2*/ mat.get-color-from-palette(
-      /*m2$*/ mat.$orange-palette,
+    background-color: matm2.get-color-from-palette(
+      matm2var.$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 49dd1a607d..9596452d5d 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
@@ -13,6 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 @import '../common/lib';
 
@@ -31,7 +33,8 @@ limitations under the License.
   padding: 2px 6px;
   text-align: right;
   width: 200px;
-  $grey-600: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 600);
+  $grey-600: matm2.get-color-from-palette(matm2var.$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 b22e5f4a56..76c5753898 100644
--- a/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.scss
+++ b/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.scss
@@ -13,17 +13,20 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 .message {
   .warning {
-    color: /*m2*/ mat.get-color-from-palette($tb-warn);
+    color: matm2.get-color-from-palette($tb-warn);
   }
+
   margin-bottom: 16px;
 }
 
 .note-1 {
-  color: /*m2*/ mat.get-color-from-palette($tb-accent);
+  color: matm2.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 442570d952..5ed8f2268c 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss
@@ -13,6 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 @import '../common';
 
@@ -153,7 +155,7 @@ $_title-to-heading-gap: 12px;
 }
 
 :host ::ng-deep .mat-slider-min-value .mat-slider-thumb {
-  background-color: /*m2*/ mat.get-color-from-palette($tb-primary);
+  background-color: matm2.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 2ec44dea9f..d27a4f00b6 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
@@ -13,6 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 @import '../common';
 
@@ -42,6 +44,7 @@ $_data_table_initial_height: 100px;
 .always-visible {
   display: flex;
   flex-direction: column;
+
   &:not(:has(.expand-button)) {
     flex-grow: 1;
   }
@@ -196,13 +199,10 @@ $_data_table_initial_height: 100px;
   align-items: center;
 
   .expand-button {
-    color: /*m2*/ mat.get-color-from-palette($tb-foreground, secondary-text);
+    color: matm2.get-color-from-palette($tb-foreground, secondary-text);
 
     @include tb-dark-theme {
-      color: /*m2*/ mat.get-color-from-palette(
-        $tb-dark-foreground,
-        secondary-text
-      );
+      color: matm2.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 1a9b8eb4ed..74b5b59680 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
@@ -13,11 +13,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 :host {
-  color: /*m2*/ mat.get-color-from-palette(
-    map-get(/*m2*/ mat.get-color-config($tb-theme), warn),
+  color: matm2.get-color-from-palette(
+    map-get(matm2.get-color-config($tb-theme), warn),
     700
   );
   height: 1em;
@@ -25,8 +27,8 @@ limitations under the License.
   display: inline-flex;
 
   @include tb-dark-theme {
-    color: /*m2*/ mat.get-color-from-palette(
-      map-get(/*m2*/ mat.get-color-config($tb-dark-theme), warn),
+    color: matm2.get-color-from-palette(
+      map-get(matm2.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 6cf97269b3..0165ff10de 100644
--- a/tensorboard/webapp/metrics/views/main_view/filter_input_component.scss
+++ b/tensorboard/webapp/metrics/views/main_view/filter_input_component.scss
@@ -13,6 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 .tag-filter {
@@ -28,7 +30,7 @@ tb-filter-input {
   @include tb-theme-foreground-prop(color, text);
 
   &:not(.valid) {
-    $_error-color: /*m2*/ mat.get-color-from-palette($tb-warn, 800);
+    $_error-color: matm2.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 32e568e5d9..63935fcb3b 100644
--- a/tensorboard/webapp/metrics/views/main_view/main_view_component.scss
+++ b/tensorboard/webapp/metrics/views/main_view/main_view_component.scss
@@ -13,6 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 @import '../common';
 
@@ -86,10 +88,7 @@ mat-button-toggle-group.filter-view {
 .main,
 .sidebar {
   contain: strict;
-  background-color: /*m2*/ mat.get-color-from-palette(
-    $tb-background,
-    background
-  );
+  background-color: matm2.get-color-from-palette($tb-background, background);
   overflow-x: hidden;
   overflow-y: auto;
   will-change: transform, scroll-position;
@@ -100,7 +99,7 @@ mat-button-toggle-group.filter-view {
 }
 
 .main {
-  background-color: /*m2*/ mat.get-color-from-palette($tf-slate, 200);
+  background-color: matm2.get-color-from-palette($tf-slate, 200);
   flex: 1 1;
   display: flex;
   flex-direction: column;
@@ -156,19 +155,16 @@ mat-button-toggle-group.filter-view {
 
 /** TODO(psybuzz): consider making a tb-button instead. */
 :host .settings-button {
-  color: /*m2*/ mat.get-color-from-palette($tb-foreground, secondary-text);
+  color: matm2.get-color-from-palette($tb-foreground, secondary-text);
   display: inline-flex;
 
   @include tb-dark-theme {
-    color: /*m2*/ mat.get-color-from-palette(
-      $tb-dark-foreground,
-      secondary-text
-    );
+    color: matm2.get-color-from-palette($tb-dark-foreground, secondary-text);
   }
 
   &.checked {
     @include tb-theme-background-prop(background-color, selected-button);
-    border-color: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 300);
+    border-color: matm2.get-color-from-palette(matm2var.$grey-palette, 300);
   }
 
   ::ng-deep .mat-button-wrapper {
@@ -182,10 +178,7 @@ mat-button-toggle-group.filter-view {
 }
 
 .slide-out-menu {
-  background-color: /*m2*/ mat.get-color-from-palette(
-    $tb-background,
-    background
-  );
+  background-color: matm2.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 813474ee54..59b456d63d 100644
--- a/tensorboard/webapp/metrics/views/main_view/pinned_view_component.scss
+++ b/tensorboard/webapp/metrics/views/main_view/pinned_view_component.scss
@@ -13,6 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 @import '../common';
 
@@ -65,7 +67,7 @@ mat-icon {
 
 .new-card-pinned {
   animation: pinned-view-fade-out 3s linear;
-  background: /*m2*/ mat.get-color-from-palette(mat.$red-palette, 500);
+  background: matm2.get-color-from-palette(matm2var.$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 870ce00ffe..6156aacc70 100644
--- a/tensorboard/webapp/metrics/views/metrics_container.scss
+++ b/tensorboard/webapp/metrics/views/metrics_container.scss
@@ -13,6 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 :host {
@@ -26,10 +28,10 @@ limitations under the License.
 
 .notice {
   background-color: rgba(
-    /*m2*/ mat.get-color-from-palette(mat.$yellow-palette, 200),
+    matm2.get-color-from-palette(matm2var.$yellow-palette, 200),
     0.85
   );
-  $yellow-500: /*m2*/ mat.get-color-from-palette(mat.$yellow-palette, 500);
+  $yellow-500: matm2.get-color-from-palette(matm2var.$yellow-palette, 500);
   border-bottom: 1px solid $yellow-500;
   color: map-get($tb-foreground, text);
   display: block;
@@ -42,18 +44,15 @@ tb-dashboard-layout {
 }
 
 nav {
-  background-color: /*m2*/ mat.get-color-from-palette(
-    $tb-background,
-    background
-  );
-  $border: /*m2*/ mat.get-color-from-palette($tb-foreground, border);
+  background-color: matm2.get-color-from-palette($tb-background, background);
+  $border: matm2.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: /*m2*/ mat.get-color-from-palette(
+    border-right-color: matm2.get-color-from-palette(
       $tb-dark-foreground,
       border
     );
diff --git a/tensorboard/webapp/metrics/views/right_pane/saving_pins_checkbox_component.scss b/tensorboard/webapp/metrics/views/right_pane/saving_pins_checkbox_component.scss
index e67a7a6094..ac7566775a 100644
--- a/tensorboard/webapp/metrics/views/right_pane/saving_pins_checkbox_component.scss
+++ b/tensorboard/webapp/metrics/views/right_pane/saving_pins_checkbox_component.scss
@@ -13,6 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 :host {
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 c5fe55a33c..d0cf54a009 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
@@ -13,18 +13,22 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 
-$_accent: map-get(/*m2*/ mat.get-color-config($tb-theme), accent);
+$_accent: map-get(matm2.get-color-config($tb-theme), accent);
 
 :host ::ng-deep .mat-tab-label {
   min-width: 0;
   padding: 0 30px;
 }
+
 .editor-controls {
   // controls should fill the full height except for the height of the footer.
   height: calc(100% - 45px);
 }
+
 .tab-group {
   // Override static position so this object is not seen in front of the
   // settings panel.
@@ -39,15 +43,15 @@ $_accent: map-get(/*m2*/ mat.get-color-config($tb-theme), accent);
 }
 
 .highlighted {
-  background-color: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 200);
+  background-color: matm2.get-color-from-palette(matm2var.$grey-palette, 200);
 }
 
 .highlight-bottom {
-  border-bottom: 2px solid /*m2*/ mat.get-color-from-palette($_accent);
+  border-bottom: 2px solid matm2.get-color-from-palette($_accent);
 }
 
 .highlight-top {
-  border-top: 2px solid /*m2*/ mat.get-color-from-palette($_accent);
+  border-top: 2px solid matm2.get-color-from-palette($_accent);
 }
 
 .footer {
@@ -60,26 +64,20 @@ $_accent: map-get(/*m2*/ mat.get-color-config($tb-theme), accent);
   align-items: center;
   justify-content: flex-end;
   padding: 4px;
-  $border: /*m2*/ mat.get-color-from-palette($tb-foreground, border);
+  $border: matm2.get-color-from-palette($tb-foreground, border);
   border-top: 1px solid $border;
 
   @include tb-dark-theme {
-    border-color: /*m2*/ mat.get-color-from-palette(
-      $tb-dark-foreground,
-      border
-    );
+    border-color: matm2.get-color-from-palette($tb-dark-foreground, border);
   }
 }
 
 .close-button {
-  color: /*m2*/ mat.get-color-from-palette($tb-foreground, secondary-text);
+  color: matm2.get-color-from-palette($tb-foreground, secondary-text);
   width: 84px;
 
   @include tb-dark-theme {
-    color: /*m2*/ mat.get-color-from-palette(
-      $tb-dark-foreground,
-      secondary-text
-    );
+    color: matm2.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 6e8430a638..bbffc24b30 100644
--- a/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss
+++ b/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss
@@ -13,6 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 :host {
@@ -58,7 +60,7 @@ section .control-row:not(:has(+ .control-row > mat-checkbox)):not(:last-child) {
 
   .slider-input {
     background-color: inherit;
-    border: 1px solid /*m2*/ mat.get-color-from-palette($tf-slate, 500);
+    border: 1px solid matm2.get-color-from-palette($tf-slate, 500);
     border-radius: 2px;
     box-sizing: border-box;
     color: inherit;
@@ -67,7 +69,7 @@ section .control-row:not(:has(+ .control-row > mat-checkbox)):not(:last-child) {
     padding: 0 4px;
 
     @include tb-dark-theme {
-      border-color: /*m2*/ mat.get-color-from-palette($tf-slate, 700);
+      border-color: matm2.get-color-from-palette($tf-slate, 700);
     }
   }
 }
@@ -122,22 +124,23 @@ mat-slider {
   height: 28px;
   padding-left: 5px;
   padding-right: 12px;
+
   &.mat-button-wrapper {
     display: inline-flex;
     align-items: center;
   }
+
   &.toggle-opened {
-    background-color: /*m2*/ mat.get-color-from-palette(
-      /*m2$*/ mat.$grey-palette,
-      200
-    );
+    background-color: matm2.get-color-from-palette(matm2var.$grey-palette, 200);
+
     @include tb-dark-theme {
-      background-color: /*m2*/ mat.get-color-from-palette(
-        /*m2$*/ mat.$grey-palette,
+      background-color: matm2.get-color-from-palette(
+        matm2var.$grey-palette,
         800
       );
     }
   }
+
   mat-icon {
     margin-right: 6px;
   }
diff --git a/tensorboard/webapp/notification_center/_views/notification_center_component.scss b/tensorboard/webapp/notification_center/_views/notification_center_component.scss
index 13e61b1e8e..a61fceda34 100644
--- a/tensorboard/webapp/notification_center/_views/notification_center_component.scss
+++ b/tensorboard/webapp/notification_center/_views/notification_center_component.scss
@@ -13,6 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 .notification-icon-button {
@@ -21,7 +23,7 @@ limitations under the License.
 
 .red-dot {
   $_dim: 10px;
-  background-color: /*m2*/ mat.get-color-from-palette(mat.$red-palette, 700);
+  background-color: matm2.get-color-from-palette(matm2var.$red-palette, 700);
   border-radius: $_dim * 0.5;
   height: $_dim;
   position: absolute;
@@ -52,7 +54,7 @@ limitations under the License.
 }
 
 .category-icon {
-  color: /*m2*/ mat.get-color-from-palette(mat.$blue-palette, 700);
+  color: matm2.get-color-from-palette(matm2var.$blue-palette, 700);
   height: 15px;
   margin-right: 6px;
   vertical-align: middle;
@@ -81,6 +83,7 @@ limitations under the License.
   font-size: 13px;
   font-weight: 700;
   margin: 10px 0 20px;
+
   a {
     text-decoration: inherit;
     color: inherit;
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 ae73114556..72237c37a4 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss
+++ b/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss
@@ -13,6 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 $_circle-size: 20px;
 
@@ -28,7 +30,7 @@ $_circle-size: 20px;
 
 .run-color-swatch {
   border-radius: 100%;
-  border: 1px solid /*m2*/ mat.get-color-from-palette($tb-foreground, border);
+  border: 1px solid matm2.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 7ae4bf7e55..e947e3a3e9 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
@@ -13,13 +13,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 ::ng-deep .run-table-color-group-by {
   font-size: 16px;
 
   .label {
-    color: /*m2*/ mat.get-color-from-palette($tb-foreground, secondary-text);
+    color: matm2.get-color-from-palette($tb-foreground, secondary-text);
     font-size: 0.9em;
     margin: 10px 0;
     padding: 0 16px;
@@ -32,6 +34,7 @@ limitations under the License.
 
   .display-regex-string {
     padding-left: 40px;
+
     .none-set-string {
       @include tb-theme-foreground-prop(color, secondary-text);
     }
diff --git a/tensorboard/webapp/theme/_tb_palette.scss b/tensorboard/webapp/theme/_tb_palette.scss
index 193e766627..d26497bcf9 100644
--- a/tensorboard/webapp/theme/_tb_palette.scss
+++ b/tensorboard/webapp/theme/_tb_palette.scss
@@ -13,6 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 
 $tf-slate: (
   100: #f5f6f7,
@@ -43,15 +45,15 @@ $tf-slate: (
    several orange values, but only one of them (--tb-orange-strong) is used
    widely. */
 $tf-orange: (
-  100: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$orange-palette, 100),
-  200: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$orange-palette, 200),
-  300: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$orange-palette, 300),
-  400: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$orange-palette, 400),
-  500: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$orange-palette, 500),
-  600: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$orange-palette, 600),
-  700: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$orange-palette, 700),
-  800: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$orange-palette, 800),
-  900: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$orange-palette, 900),
+  100: matm2.get-color-from-palette(matm2var.$orange-palette, 100),
+  200: matm2.get-color-from-palette(matm2var.$orange-palette, 200),
+  300: matm2.get-color-from-palette(matm2var.$orange-palette, 300),
+  400: matm2.get-color-from-palette(matm2var.$orange-palette, 400),
+  500: matm2.get-color-from-palette(matm2var.$orange-palette, 500),
+  600: matm2.get-color-from-palette(matm2var.$orange-palette, 600),
+  700: matm2.get-color-from-palette(matm2var.$orange-palette, 700),
+  800: matm2.get-color-from-palette(matm2var.$orange-palette, 800),
+  900: matm2.get-color-from-palette(matm2var.$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 9bef0a5674..2e4f820e54 100644
--- a/tensorboard/webapp/theme/_tb_theme.template.scss
+++ b/tensorboard/webapp/theme/_tb_theme.template.scss
@@ -23,22 +23,19 @@ limitations under the License.
 
 // Value for `app-bar` property in $tb-background. Can specify an override in
 // _variable.scss to specifically customize this value.
-$tb-app-bar-color: /*m2*/ mat.get-color-from-palette(
-  $tb-primary,
-  default
-) !default;
+$tb-app-bar-color: matm2.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: /*m2*/ mat.get-color-from-palette(
+$tb-dark-app-bar-color: matm2.get-color-from-palette(
   $tb-dark-primary,
   default
 ) !default;
 
-$tb-theme: /*m2*/ mat.define-light-theme(
+$tb-theme: matm2.define-light-theme(
   (
     color: (
       primary: $tb-primary,
@@ -52,19 +49,19 @@ $tb-theme: /*m2*/ mat.define-light-theme(
 
 // Overriding mat-light-theme-foreground variables.
 $tb-foreground: map_merge(
-  mat.$light-theme-foreground-palette,
+  matm2var.$light-theme-foreground-palette,
   (
-    text: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 900),
-    secondary-text: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 700),
-    disabled-text: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 600),
+    text: matm2.get-color-from-palette(matm2var.$gray-palette, 900),
+    secondary-text: matm2.get-color-from-palette(matm2var.$gray-palette, 700),
+    disabled-text: matm2.get-color-from-palette(matm2var.$gray-palette, 600),
     // TB specific variable.
     border: #ebebeb,
-    link: /*m2*/ mat.get-color-from-palette(mat.$blue-palette, 700),
-    link-visited: /*m2*/ mat.get-color-from-palette(mat.$purple-palette, 700),
+    link: matm2.get-color-from-palette(matm2var.$blue-palette, 700),
+    link-visited: matm2.get-color-from-palette(matm2var.$purple-palette, 700),
   )
 );
 $tb-background: map_merge(
-  mat.$light-theme-background-palette,
+  matm2.$light-theme-background-palette,
   (
     app-bar: $tb-app-bar-color,
     // Default is `map.get($grey-palette, 50)`.
@@ -93,8 +90,16 @@ $tb-theme: map_merge(
     color: $color,
   )
 );
+$tb-theme: map_merge(
+  $tb-theme,
+  color,
+  system,
+  (
+    on-surface: matm2.get-color-from-palette(matm2var.$gray-palette, 900),
+  )
+);
 
-$tb-dark-theme: mat.define-dark-theme(
+$tb-dark-theme: matm2.define-dark-theme(
   (
     color: (
       primary: $tb-dark-primary,
@@ -106,16 +111,16 @@ $tb-dark-theme: mat.define-dark-theme(
   )
 );
 $tb-dark-foreground: map_merge(
-  map-get(/*m2*/ mat.get-color-config($tb-dark-theme), foreground),
+  map-get(matm2.get-color-config($tb-dark-theme), foreground),
   (
     border: #555,
-    disabled-text: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 700),
-    link: /*m2*/ mat.get-color-from-palette(mat.$blue-palette, 400),
-    link-visited: /*m2*/ mat.get-color-from-palette(mat.$purple-palette, 300),
+    disabled-text: matm2.get-color-from-palette(matm2var.$gray-palette, 700),
+    link: matm2.get-color-from-palette(matm2var.$blue-palette, 400),
+    link-visited: matm2.get-color-from-palette(matm2var.$purple-palette, 300),
   )
 );
 $tb-dark-background: map_merge(
-  map-get(/*m2*/ mat.get-color-config($tb-dark-theme), background),
+  map-get(matm2.get-color-config($tb-dark-theme), background),
   (
     app-bar: $tb-dark-app-bar-color,
   )
@@ -182,6 +187,7 @@ $tb-dark-theme: map_merge(
   @if (not $light-color) {
     @error "Name '#{$dict-name}' is not found in light #{$object-name}.";
   }
+
   @if (not $dark-color) {
     @error "Name '#{$dict-name}' is not found in dark #{$object-name}.";
   }
@@ -286,6 +292,7 @@ $tb-dark-theme: map_merge(
     // Prevent color-picker from briefly showing scrollbar when calculating its
     // position.
     contain: strict;
+
     // The old dialog had a default 24px padding. When migrating to the
     // new dialog this padding was added to avoid adding it to them all
     // individually.
diff --git a/tensorboard/webapp/theme/_variable.scss b/tensorboard/webapp/theme/_variable.scss
index 5e91f8af4e..4b76d34eb1 100644
--- a/tensorboard/webapp/theme/_variable.scss
+++ b/tensorboard/webapp/theme/_variable.scss
@@ -14,11 +14,13 @@ limitations under the License.
 ==============================================================================*/
 // INTERNAL-ONLY: Import of deprecated legacy Angular Material styles
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_palette';
 
-$tb-primary: /*m2*/ mat.define-palette($tf-orange, 700, 400, 800);
-$tb-accent: /*m2*/ mat.define-palette($tf-orange);
-$tb-warn: /*m2*/ mat.define-palette(mat.$red-palette);
+$tb-primary: matm2.define-palette($tf-orange, 700, 400, 800);
+$tb-accent: matm2.define-palette($tf-orange);
+$tb-warn: matm2.define-palette(matm2var.$red-palette);
 
-$tb-dark-primary: /*m2*/ mat.define-palette($tf-orange, 800, 600, 900);
+$tb-dark-primary: matm2.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 60c56ecab4..60e02251c0 100644
--- a/tensorboard/webapp/widgets/card_fob/card_fob_component.scss
+++ b/tensorboard/webapp/widgets/card_fob/card_fob_component.scss
@@ -13,6 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 :host {
@@ -21,7 +23,7 @@ limitations under the License.
 
 .fob {
   display: inline-flex;
-  background-color: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 300);
+  background-color: matm2.get-color-from-palette(matm2var.$grey-palette, 300);
   border-radius: 25px;
   padding: 2px 2px 2px 4px;
   font-size: 11px;
@@ -39,6 +41,7 @@ limitations under the License.
       cursor: pointer;
     }
   }
+
   &:active {
     cursor: grabbing;
   }
@@ -50,7 +53,7 @@ limitations under the License.
   &.prospective {
     align-items: center;
     box-sizing: border-box;
-    border: 1px dashed /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 500);
+    border: 1px dashed matm2.get-color-from-palette(matm2var.$grey-palette, 500);
     font-weight: bold;
     height: 17px;
   }
@@ -61,7 +64,7 @@ span {
   display: inline-block;
 
   @include tb-dark-theme {
-    color: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 700);
+    color: matm2.get-color-from-palette(matm2var.$grey-palette, 700);
   }
 }
 
@@ -75,6 +78,7 @@ button {
   height: 11px;
   background-color: inherit;
   color: inherit;
+
   .mat-icon {
     width: 100%;
     // The close icon is not a proportioned to fit nicely inside a circle.
@@ -84,17 +88,17 @@ button {
   }
 
   @include tb-dark-theme {
-    color: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 700);
+    color: matm2.get-color-from-palette(matm2var.$grey-palette, 700);
   }
 }
 
 button:hover {
-  background-color: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 500);
-  color: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 200);
+  background-color: matm2.get-color-from-palette(matm2var.$grey-palette, 500);
+  color: matm2.get-color-from-palette(matm2var.$grey-palette, 200);
   cursor: pointer;
 
   @include tb-dark-theme {
-    background-color: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 700);
-    color: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 300);
+    background-color: matm2.get-color-from-palette(matm2var.$grey-palette, 700);
+    color: matm2.get-color-from-palette(matm2var.$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 df8cf9ecf3..e640df1dd4 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
@@ -14,6 +14,8 @@ limitations under the License.
 ==============================================================================*/
 
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 :host {
@@ -21,7 +23,7 @@ limitations under the License.
   width: max-content;
 
   &:focus-within .container {
-    border-color: /*m2*/ mat.get-color-from-palette($tb-primary, 700);
+    border-color: matm2.get-color-from-palette($tb-primary, 700);
   }
 
   &.default {
@@ -32,7 +34,7 @@ limitations under the License.
 
   &.error .container,
   .container:not(.is-valid) {
-    $_error-color: /*m2*/ mat.get-color-from-palette($tb-warn, 200);
+    $_error-color: matm2.get-color-from-palette($tb-warn, 200);
     border-color: $_error-color;
 
     &:hover,
@@ -42,10 +44,10 @@ limitations under the License.
   }
 
   &.high-contrast .container {
-    border-color: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 400);
+    border-color: matm2.get-color-from-palette(matm2var.$grey-palette, 400);
 
     &:hover {
-      border-color: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 600);
+      border-color: matm2.get-color-from-palette(matm2var.$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 e82eab11fa..1e82a25b31 100644
--- a/tensorboard/webapp/widgets/data_table/column_selector_component.scss
+++ b/tensorboard/webapp/widgets/data_table/column_selector_component.scss
@@ -13,6 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 .contents {
@@ -25,18 +27,12 @@ limitations under the License.
   border: 1px solid;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 
-  border-color: /*m2*/ mat.get-color-from-palette($tb-foreground, border);
-  background-color: /*m2*/ mat.get-color-from-palette(
-    $tb-background,
-    background
-  );
+  border-color: matm2.get-color-from-palette($tb-foreground, border);
+  background-color: matm2.get-color-from-palette($tb-background, background);
 
   @include tb-dark-theme {
-    border-color: /*m2*/ mat.get-color-from-palette(
-      $tb-dark-foreground,
-      border
-    );
-    background-color: /*m2*/ mat.get-color-from-palette(
+    border-color: matm2.get-color-from-palette($tb-dark-foreground, border);
+    background-color: matm2.get-color-from-palette(
       $tb-dark-background,
       'background'
     );
@@ -55,7 +51,7 @@ limitations under the License.
   }
 
   .load-more-columns {
-    color: /*m2*/ mat.get-color-from-palette($tb-warn, 600);
+    color: matm2.get-color-from-palette($tb-warn, 600);
     display: flex;
     flex-direction: column;
     margin-top: 6px;
@@ -86,22 +82,16 @@ limitations under the License.
     width: 100%;
 
     &.selected {
-      background-color: /*m2*/ mat.get-color-from-palette(
-        mat.$gray-palette,
-        200
-      );
+      background-color: matm2.get-color-from-palette(mat.$grey-palette, 200);
 
       @include tb-dark-theme {
-        background-color: /*m2*/ mat.get-color-from-palette(
-          mat.$gray-palette,
-          400
-        );
+        background-color: matm2.get-color-from-palette(mat.$grey-palette, 400);
       }
     }
   }
 
   .tag {
-    background-color: /*m2*/ mat.get-color-from-palette($tb-primary, 500);
+    background-color: matm2.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 d7e7557d06..a8d306061b 100644
--- a/tensorboard/webapp/widgets/data_table/context_menu_component.scss
+++ b/tensorboard/webapp/widgets/data_table/context_menu_component.scss
@@ -14,6 +14,8 @@ limitations under the License.
 ==============================================================================*/
 
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 .context-menu {
@@ -22,18 +24,12 @@ limitations under the License.
   border-radius: 4px;
   border: 1px solid;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  border-color: /*m2*/ mat.get-color-from-palette($tb-foreground, border);
-  background-color: /*m2*/ mat.get-color-from-palette(
-    $tb-background,
-    background
-  );
+  border-color: matm2.get-color-from-palette($tb-foreground, border);
+  background-color: matm2.get-color-from-palette($tb-background, background);
 
   @include tb-dark-theme {
-    border-color: /*m2*/ mat.get-color-from-palette(
-      $tb-dark-foreground,
-      border
-    );
-    background-color: /*m2*/ mat.get-color-from-palette(
+    border-color: matm2.get-color-from-palette($tb-dark-foreground, border);
+    background-color: matm2.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 a27b69273c..a76a0ded06 100644
--- a/tensorboard/webapp/widgets/data_table/data_table_component.scss
+++ b/tensorboard/webapp/widgets/data_table/data_table_component.scss
@@ -13,9 +13,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 
-$_accent: map-get(/*m2*/ mat.get-color-config($tb-theme), accent);
+$_accent: map-get(matm2.get-color-config($tb-theme), accent);
 
 .data-table-wrapper {
   display: flex;
@@ -38,10 +40,7 @@ $_accent: map-get(/*m2*/ mat.get-color-config($tb-theme), accent);
   width: 100%;
 
   .header {
-    background-color: /*m2*/ mat.get-color-from-palette(
-      $tb-background,
-      background
-    );
+    background-color: matm2.get-color-from-palette($tb-background, background);
     display: table-row;
     font-weight: bold;
     position: sticky;
@@ -75,10 +74,7 @@ $_accent: map-get(/*m2*/ mat.get-color-config($tb-theme), accent);
 }
 
 .right-section {
-  background-color: /*m2*/ mat.get-color-from-palette(
-    $tb-background,
-    background
-  );
+  background-color: matm2.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 90d40974ab..187f78074e 100644
--- a/tensorboard/webapp/widgets/data_table/filter_dialog_component.scss
+++ b/tensorboard/webapp/widgets/data_table/filter_dialog_component.scss
@@ -13,6 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 .filter-dialog {
@@ -20,18 +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: /*m2*/ mat.get-color-from-palette($tb-foreground, border);
-  background-color: /*m2*/ mat.get-color-from-palette(
-    $tb-background,
-    background
-  );
+  border-color: matm2.get-color-from-palette($tb-foreground, border);
+  background-color: matm2.get-color-from-palette($tb-background, background);
 
   @include tb-dark-theme {
-    border-color: /*m2*/ mat.get-color-from-palette(
-      $tb-dark-foreground,
-      border
-    );
-    background-color: /*m2*/ mat.get-color-from-palette(
+    border-color: matm2.get-color-from-palette($tb-dark-foreground, border);
+    background-color: matm2.get-color-from-palette(
       $tb-dark-background,
       'background'
     );
@@ -56,11 +52,11 @@ limitations under the License.
 .filter-container {
   padding-bottom: 8px;
   margin-bottom: 8px;
-  $border: /*m2*/ mat.get-color-from-palette($tb-foreground, border);
+  $border: matm2.get-color-from-palette($tb-foreground, border);
   border-bottom: 1px solid $border;
 
   @include tb-dark-theme {
-    border-bottom-color: /*m2*/ mat.get-color-from-palette(
+    border-bottom-color: matm2.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 e80118d7a7..484402f268 100644
--- a/tensorboard/webapp/widgets/data_table/header_cell_component.scss
+++ b/tensorboard/webapp/widgets/data_table/header_cell_component.scss
@@ -14,9 +14,11 @@ limitations under the License.
 ==============================================================================*/
 
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 
-$_accent: map-get(/*m2*/ mat.get-color-config($tb-theme), accent);
+$_accent: map-get(matm2.get-color-config($tb-theme), accent);
 $_icon_size: 12px;
 $_icon_padding: 4px;
 
@@ -34,6 +36,7 @@ $_icon_padding: 4px;
     &:hover {
       opacity: 1;
     }
+
     &:focus {
       opacity: 1;
     }
@@ -79,13 +82,13 @@ $_icon_padding: 4px;
 }
 
 .highlight {
-  background-color: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 200);
+  background-color: matm2.get-color-from-palette(matm2var.$grey-palette, 200);
 }
 
 .highlight-border-right {
-  border-right: 2px solid /*m2*/ mat.get-color-from-palette($_accent);
+  border-right: 2px solid matm2.get-color-from-palette($_accent);
 }
 
 .highlight-border-left {
-  border-left: 2px solid /*m2*/ mat.get-color-from-palette($_accent);
+  border-left: 2px solid matm2.get-color-from-palette($_accent);
 }
diff --git a/tensorboard/webapp/widgets/dropdown/dropdown_component.scss b/tensorboard/webapp/widgets/dropdown/dropdown_component.scss
index 0cc30ae78c..c8f710c9e7 100644
--- a/tensorboard/webapp/widgets/dropdown/dropdown_component.scss
+++ b/tensorboard/webapp/widgets/dropdown/dropdown_component.scss
@@ -13,10 +13,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 mat-select {
-  border: 1px solid /*m2*/ mat.get-color-from-palette($tf-slate, 500);
+  border: 1px solid matm2.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 61a929f95b..2c1480ac0d 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
@@ -13,6 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 :host {
@@ -183,7 +185,7 @@ text {
   }
 }
 
-$border: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 500);
+$border: matm2.get-color-from-palette(matm2var.$grey-palette, 500);
 $_border-style: 1px solid $border;
 
 .x-axis .major-label {
diff --git a/tensorboard/webapp/widgets/range_input/range_input_component.scss b/tensorboard/webapp/widgets/range_input/range_input_component.scss
index 9b1a150af9..45356a7ed8 100644
--- a/tensorboard/webapp/widgets/range_input/range_input_component.scss
+++ b/tensorboard/webapp/widgets/range_input/range_input_component.scss
@@ -13,6 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 @use '@angular/material' as mat;
+@use '@angular/material' as matm2;
+@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 :host {