From ed01f155062da2203c7ada4f36a359425bf6f0ae Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewjs@google.com>
Date: Fri, 2 May 2025 09:22:57 -0600
Subject: [PATCH 1/2] Add a prefix comment for M2 Sass APIs to allow
 transformations to occur internally

---
 .../views/common/_lib.scss                    |  6 ++---
 .../execution_data_component.scss             |  4 +--
 .../views/graph/graph_op_component.scss       |  2 +-
 .../views/feature_flag_dialog_component.scss  |  4 +--
 .../card_renderer/image_card_component.scss   |  2 +-
 .../card_renderer/scalar_card_component.scss  |  4 +--
 ...nked_time_selection_warning_component.scss |  8 +++---
 .../main_view/filter_input_component.scss     |  2 +-
 .../views/main_view/main_view_component.scss  | 12 ++++-----
 .../main_view/pinned_view_component.scss      |  2 +-
 .../metrics/views/metrics_container.scss      | 10 +++----
 .../scalar_column_editor_component.scss       | 16 ++++++------
 .../right_pane/settings_view_component.scss   |  8 +++---
 .../_views/notification_center_component.scss |  4 +--
 .../views/runs_table/runs_data_table.scss     |  2 +-
 .../runs_group_menu_button_component.scss     |  2 +-
 tensorboard/webapp/theme/_tb_palette.scss     | 18 ++++++-------
 .../webapp/theme/_tb_theme.template.scss      | 26 +++++++++----------
 tensorboard/webapp/theme/_variable.scss       |  8 +++---
 .../widgets/card_fob/card_fob_component.scss  | 16 ++++++------
 .../content_wrapping_input_component.scss     |  8 +++---
 .../data_table/column_selector_component.scss | 16 ++++++------
 .../data_table/context_menu_component.scss    |  8 +++---
 .../data_table/data_table_component.scss      |  6 ++---
 .../data_table/filter_dialog_component.scss   | 12 ++++-----
 .../data_table/header_cell_component.scss     |  8 +++---
 .../widgets/dropdown/dropdown_component.scss  |  2 +-
 .../sub_view/line_chart_axis_view.scss        |  2 +-
 28 files changed, 109 insertions(+), 109 deletions(-)

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 108b326cb0..6ecfb8e40c 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
@@ -15,7 +15,7 @@ limitations under the License.
 @use '@angular/material' as mat;
 
 @mixin debugger-op-type {
-  background-color: mat.get-color-from-palette(mat.$blue-grey-palette, 50);
+  background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$blue-grey-palette, 50);
   @include tb-theme-foreground-prop(border, border, 1px solid);
   border-radius: 4px;
   font-family: 'Roboto Mono', monospace;
@@ -26,13 +26,13 @@ limitations under the License.
   width: max-content;
 
   @include tb-dark-theme {
-    background-color: mat.get-color-from-palette(mat.$blue-grey-palette, 700);
+    background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$blue-grey-palette, 700);
   }
 }
 
 @mixin debugger-highlight-background {
   background-color: #fff099;
   @include tb-dark-theme {
-    background-color: mat.get-color-from-palette(mat.$orange-palette, 900);
+    background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$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 9b4b2e10fa..ff6c81caa7 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
@@ -45,7 +45,7 @@ limitations under the License.
 }
 
 .focus-execution-container {
-  background-color: mat.get-color-from-palette(mat.$orange-palette, 200);
+  background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 200);
   border-radius: 4px;
   font-size: 12px;
   height: 120px;
@@ -53,7 +53,7 @@ limitations under the License.
   width: 360px;
 
   @include tb-dark-theme {
-    background-color: mat.get-color-from-palette(mat.$orange-palette, 900);
+    background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$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 4b59cfa8f8..8505efe769 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
@@ -32,7 +32,7 @@ limitations under the License.
   text-align: right;
   width: 200px;
   @include tb-dark-theme {
-    box-shadow: 1px 3px mat.get-color-from-palette(mat.$gray-palette, 600);
+    box-shadow: 1px 3px /*m2*/mat.get-color-from-palette(mat.$gray-palette, 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 8db2fefbd4..2635726fde 100644
--- a/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.scss
+++ b/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.scss
@@ -17,13 +17,13 @@ limitations under the License.
 
 .message {
   .warning {
-    color: mat.get-color-from-palette($tb-warn);
+    color: /*m2*/mat.get-color-from-palette($tb-warn);
   }
   margin-bottom: 16px;
 }
 
 .note-1 {
-  color: mat.get-color-from-palette($tb-accent);
+  color: /*m2*/mat.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 c0699e95da..9fc1e279bf 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss
@@ -153,7 +153,7 @@ $_title-to-heading-gap: 12px;
 }
 
 :host ::ng-deep .mat-slider-min-value .mat-slider-thumb {
-  background-color: mat.get-color-from-palette($tb-primary);
+  background-color: /*m2*/mat.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 93213ec306..060cfc7922 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
@@ -196,10 +196,10 @@ $_data_table_initial_height: 100px;
   align-items: center;
 
   .expand-button {
-    color: mat.get-color-from-palette($tb-foreground, secondary-text);
+    color: /*m2*/mat.get-color-from-palette($tb-foreground, secondary-text);
 
     @include tb-dark-theme {
-      color: mat.get-color-from-palette($tb-dark-foreground, secondary-text);
+      color: /*m2*/mat.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 8a1a52505b..dc96a795c9 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
@@ -16,8 +16,8 @@ limitations under the License.
 @import 'tensorboard/webapp/theme/tb_theme';
 
 :host {
-  color: mat.get-color-from-palette(
-    map-get(mat.get-color-config($tb-theme), warn),
+  color: /*m2*/mat.get-color-from-palette(
+    map-get(/*m2*/mat.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: mat.get-color-from-palette(
-      map-get(mat.get-color-config($tb-dark-theme), warn),
+    color: /*m2*/mat.get-color-from-palette(
+      map-get(/*m2*/mat.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 63e50f38c9..beab36761b 100644
--- a/tensorboard/webapp/metrics/views/main_view/filter_input_component.scss
+++ b/tensorboard/webapp/metrics/views/main_view/filter_input_component.scss
@@ -28,7 +28,7 @@ tb-filter-input {
   @include tb-theme-foreground-prop(color, text);
 
   &:not(.valid) {
-    $_error-color: mat.get-color-from-palette($tb-warn, 800);
+    $_error-color: /*m2*/mat.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 c425c589a7..ff4d98cae9 100644
--- a/tensorboard/webapp/metrics/views/main_view/main_view_component.scss
+++ b/tensorboard/webapp/metrics/views/main_view/main_view_component.scss
@@ -86,7 +86,7 @@ mat-button-toggle-group.filter-view {
 .main,
 .sidebar {
   contain: strict;
-  background-color: mat.get-color-from-palette($tb-background, background);
+  background-color: /*m2*/mat.get-color-from-palette($tb-background, background);
   overflow-x: hidden;
   overflow-y: auto;
   will-change: transform, scroll-position;
@@ -97,7 +97,7 @@ mat-button-toggle-group.filter-view {
 }
 
 .main {
-  background-color: mat.get-color-from-palette($tf-slate, 200);
+  background-color: /*m2*/mat.get-color-from-palette($tf-slate, 200);
   flex: 1 1;
   display: flex;
   flex-direction: column;
@@ -153,16 +153,16 @@ mat-button-toggle-group.filter-view {
 
 /** TODO(psybuzz): consider making a tb-button instead. */
 :host .settings-button {
-  color: mat.get-color-from-palette($tb-foreground, secondary-text);
+  color: /*m2*/mat.get-color-from-palette($tb-foreground, secondary-text);
   display: inline-flex;
 
   @include tb-dark-theme {
-    color: mat.get-color-from-palette($tb-dark-foreground, secondary-text);
+    color: /*m2*/mat.get-color-from-palette($tb-dark-foreground, secondary-text);
   }
 
   &.checked {
     @include tb-theme-background-prop(background-color, selected-button);
-    border-color: mat.get-color-from-palette(mat.$gray-palette, 300);
+    border-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 300);
   }
 
   ::ng-deep .mat-button-wrapper {
@@ -176,7 +176,7 @@ mat-button-toggle-group.filter-view {
 }
 
 .slide-out-menu {
-  background-color: mat.get-color-from-palette($tb-background, background);
+  background-color: /*m2*/mat.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 8f8df63b88..989c0b8ff4 100644
--- a/tensorboard/webapp/metrics/views/main_view/pinned_view_component.scss
+++ b/tensorboard/webapp/metrics/views/main_view/pinned_view_component.scss
@@ -65,7 +65,7 @@ mat-icon {
 
 .new-card-pinned {
   animation: pinned-view-fade-out 3s linear;
-  background: mat.get-color-from-palette(mat.$red-palette, 500);
+  background: /*m2*/mat.get-color-from-palette(mat.$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 9b37197239..838ac55e7e 100644
--- a/tensorboard/webapp/metrics/views/metrics_container.scss
+++ b/tensorboard/webapp/metrics/views/metrics_container.scss
@@ -26,10 +26,10 @@ limitations under the License.
 
 .notice {
   background-color: rgba(
-    mat.get-color-from-palette(mat.$yellow-palette, 200),
+    /*m2*/mat.get-color-from-palette(mat.$yellow-palette, 200),
     0.85
   );
-  border-bottom: 1px solid mat.get-color-from-palette(mat.$yellow-palette, 500);
+  border-bottom: 1px solid /*m2*/mat.get-color-from-palette(mat.$yellow-palette, 500);
   color: map-get($tb-foreground, text);
   display: block;
   flex: 0 0;
@@ -41,14 +41,14 @@ tb-dashboard-layout {
 }
 
 nav {
-  background-color: mat.get-color-from-palette($tb-background, background);
-  border-right: 1px solid mat.get-color-from-palette($tb-foreground, border);
+  background-color: /*m2*/mat.get-color-from-palette($tb-background, background);
+  border-right: 1px solid /*m2*/mat.get-color-from-palette($tb-foreground, border);
   flex: none;
   width: 340px;
 
   @include tb-dark-theme {
     background-color: map-get($tb-dark-background, background);
-    border-right-color: mat.get-color-from-palette($tb-dark-foreground, border);
+    border-right-color: /*m2*/mat.get-color-from-palette($tb-dark-foreground, border);
   }
 }
 
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 2a3f3c0464..67a213b13b 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
@@ -15,7 +15,7 @@ limitations under the License.
 @use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
-$_accent: map-get(mat.get-color-config($tb-theme), accent);
+$_accent: map-get(/*m2*/mat.get-color-config($tb-theme), accent);
 
 :host ::ng-deep .mat-tab-label {
   min-width: 0;
@@ -39,15 +39,15 @@ $_accent: map-get(mat.get-color-config($tb-theme), accent);
 }
 
 .highlighted {
-  background-color: mat.get-color-from-palette(mat.$gray-palette, 200);
+  background-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 200);
 }
 
 .highlight-bottom {
-  border-bottom: 2px solid mat.get-color-from-palette($_accent);
+  border-bottom: 2px solid /*m2*/mat.get-color-from-palette($_accent);
 }
 
 .highlight-top {
-  border-top: 2px solid mat.get-color-from-palette($_accent);
+  border-top: 2px solid /*m2*/mat.get-color-from-palette($_accent);
 }
 
 .footer {
@@ -60,19 +60,19 @@ $_accent: map-get(mat.get-color-config($tb-theme), accent);
   align-items: center;
   justify-content: flex-end;
   padding: 4px;
-  border-top: 1px solid mat.get-color-from-palette($tb-foreground, border);
+  border-top: 1px solid /*m2*/mat.get-color-from-palette($tb-foreground, border);
 
   @include tb-dark-theme {
-    border-color: mat.get-color-from-palette($tb-dark-foreground, border);
+    border-color: /*m2*/mat.get-color-from-palette($tb-dark-foreground, border);
   }
 }
 
 .close-button {
-  color: mat.get-color-from-palette($tb-foreground, secondary-text);
+  color: /*m2*/mat.get-color-from-palette($tb-foreground, secondary-text);
   width: 84px;
 
   @include tb-dark-theme {
-    color: mat.get-color-from-palette($tb-dark-foreground, secondary-text);
+    color: /*m2*/mat.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 5bdf2b2d53..d02ea2f0b5 100644
--- a/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss
+++ b/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss
@@ -58,7 +58,7 @@ section .control-row:not(:has(+ .control-row > mat-checkbox)):not(:last-child) {
 
   .slider-input {
     background-color: inherit;
-    border: 1px solid mat.get-color-from-palette($tf-slate, 500);
+    border: 1px solid /*m2*/mat.get-color-from-palette($tf-slate, 500);
     border-radius: 2px;
     box-sizing: border-box;
     color: inherit;
@@ -67,7 +67,7 @@ section .control-row:not(:has(+ .control-row > mat-checkbox)):not(:last-child) {
     padding: 0 4px;
 
     @include tb-dark-theme {
-      border-color: mat.get-color-from-palette($tf-slate, 700);
+      border-color: /*m2*/mat.get-color-from-palette($tf-slate, 700);
     }
   }
 }
@@ -127,9 +127,9 @@ mat-slider {
     align-items: center;
   }
   &.toggle-opened {
-    background-color: mat.get-color-from-palette(mat.$grey-palette, 200);
+    background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$grey-palette, 200);
     @include tb-dark-theme {
-      background-color: mat.get-color-from-palette(mat.$grey-palette, 800);
+      background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$grey-palette, 800);
     }
   }
   mat-icon {
diff --git a/tensorboard/webapp/notification_center/_views/notification_center_component.scss b/tensorboard/webapp/notification_center/_views/notification_center_component.scss
index 93a3d64fb7..04eb42555d 100644
--- a/tensorboard/webapp/notification_center/_views/notification_center_component.scss
+++ b/tensorboard/webapp/notification_center/_views/notification_center_component.scss
@@ -21,7 +21,7 @@ limitations under the License.
 
 .red-dot {
   $_dim: 10px;
-  background-color: mat.get-color-from-palette(mat.$red-palette, 700);
+  background-color: /*m2*/mat.get-color-from-palette(mat.$red-palette, 700);
   border-radius: $_dim * 0.5;
   height: $_dim;
   position: absolute;
@@ -52,7 +52,7 @@ limitations under the License.
 }
 
 .category-icon {
-  color: mat.get-color-from-palette(mat.$blue-palette, 700);
+  color: /*m2*/mat.get-color-from-palette(mat.$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 31534ca835..379dc396d4 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss
+++ b/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss
@@ -28,7 +28,7 @@ $_circle-size: 20px;
 
 .run-color-swatch {
   border-radius: 100%;
-  border: 1px solid mat.get-color-from-palette($tb-foreground, border);
+  border: 1px solid /*m2*/mat.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 ab3ff19361..208e1032a9 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
@@ -19,7 +19,7 @@ limitations under the License.
   font-size: 16px;
 
   .label {
-    color: mat.get-color-from-palette($tb-foreground, secondary-text);
+    color: /*m2*/mat.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 8f3aeeb352..77c65d5527 100644
--- a/tensorboard/webapp/theme/_tb_palette.scss
+++ b/tensorboard/webapp/theme/_tb_palette.scss
@@ -43,15 +43,15 @@ $tf-slate: (
    several orange values, but only one of them (--tb-orange-strong) is used
    widely. */
 $tf-orange: (
-  100: mat.get-color-from-palette(mat.$orange-palette, 100),
-  200: mat.get-color-from-palette(mat.$orange-palette, 200),
-  300: mat.get-color-from-palette(mat.$orange-palette, 300),
-  400: mat.get-color-from-palette(mat.$orange-palette, 400),
-  500: mat.get-color-from-palette(mat.$orange-palette, 500),
-  600: mat.get-color-from-palette(mat.$orange-palette, 600),
-  700: mat.get-color-from-palette(mat.$orange-palette, 700),
-  800: mat.get-color-from-palette(mat.$orange-palette, 800),
-  900: mat.get-color-from-palette(mat.$orange-palette, 900),
+  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),
   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 46a748a128..5905c3379f 100644
--- a/tensorboard/webapp/theme/_tb_theme.template.scss
+++ b/tensorboard/webapp/theme/_tb_theme.template.scss
@@ -23,19 +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: mat.get-color-from-palette($tb-primary, default) !default;
+$tb-app-bar-color: /*m2*/mat.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: mat.get-color-from-palette(
+$tb-dark-app-bar-color: /*m2*/mat.get-color-from-palette(
   $tb-dark-primary,
   default
 ) !default;
 
-$tb-theme: mat.define-light-theme(
+$tb-theme: /*m2*/mat.define-light-theme(
   (
     color: (
       primary: $tb-primary,
@@ -51,13 +51,13 @@ $tb-theme: mat.define-light-theme(
 $tb-foreground: map_merge(
   mat.$light-theme-foreground-palette,
   (
-    text: mat.get-color-from-palette(mat.$gray-palette, 900),
-    secondary-text: mat.get-color-from-palette(mat.$gray-palette, 700),
-    disabled-text: mat.get-color-from-palette(mat.$gray-palette, 600),
+    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),
     // TB specific variable.
     border: #ebebeb,
-    link: mat.get-color-from-palette(mat.$blue-palette, 700),
-    link-visited: mat.get-color-from-palette(mat.$purple-palette, 700),
+    link: /*m2*/mat.get-color-from-palette(mat.$blue-palette, 700),
+    link-visited: /*m2*/mat.get-color-from-palette(mat.$purple-palette, 700),
   )
 );
 $tb-background: map_merge(
@@ -103,16 +103,16 @@ $tb-dark-theme: mat.define-dark-theme(
   )
 );
 $tb-dark-foreground: map_merge(
-  map-get(mat.get-color-config($tb-dark-theme), foreground),
+  map-get(/*m2*/mat.get-color-config($tb-dark-theme), foreground),
   (
     border: #555,
-    disabled-text: mat.get-color-from-palette(mat.$gray-palette, 700),
-    link: mat.get-color-from-palette(mat.$blue-palette, 400),
-    link-visited: mat.get-color-from-palette(mat.$purple-palette, 300),
+    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),
   )
 );
 $tb-dark-background: map_merge(
-  map-get(mat.get-color-config($tb-dark-theme), background),
+  map-get(/*m2*/mat.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 e7b0e84c49..4bc0ffb478 100644
--- a/tensorboard/webapp/theme/_variable.scss
+++ b/tensorboard/webapp/theme/_variable.scss
@@ -16,9 +16,9 @@ limitations under the License.
 @use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_palette';
 
-$tb-primary: mat.define-palette($tf-orange, 700, 400, 800);
-$tb-accent: mat.define-palette($tf-orange);
-$tb-warn: mat.define-palette(mat.$red-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-dark-primary: mat.define-palette($tf-orange, 800, 600, 900);
+$tb-dark-primary: /*m2*/mat.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 4134e679e1..99ac27a36a 100644
--- a/tensorboard/webapp/widgets/card_fob/card_fob_component.scss
+++ b/tensorboard/webapp/widgets/card_fob/card_fob_component.scss
@@ -21,7 +21,7 @@ limitations under the License.
 
 .fob {
   display: inline-flex;
-  background-color: mat.get-color-from-palette(mat.$gray-palette, 300);
+  background-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 300);
   border-radius: 25px;
   padding: 2px 2px 2px 4px;
   font-size: 11px;
@@ -50,7 +50,7 @@ limitations under the License.
   &.prospective {
     align-items: center;
     box-sizing: border-box;
-    border: 1px dashed mat.get-color-from-palette(mat.$gray-palette, 500);
+    border: 1px dashed /*m2*/mat.get-color-from-palette(mat.$gray-palette, 500);
     font-weight: bold;
     height: 17px;
   }
@@ -61,7 +61,7 @@ span {
   display: inline-block;
 
   @include tb-dark-theme {
-    color: mat.get-color-from-palette(mat.$gray-palette, 700);
+    color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 700);
   }
 }
 
@@ -84,17 +84,17 @@ button {
   }
 
   @include tb-dark-theme {
-    color: mat.get-color-from-palette(mat.$gray-palette, 700);
+    color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 700);
   }
 }
 
 button:hover {
-  background-color: mat.get-color-from-palette(mat.$gray-palette, 500);
-  color: mat.get-color-from-palette(mat.$gray-palette, 200);
+  background-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 500);
+  color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 200);
   cursor: pointer;
 
   @include tb-dark-theme {
-    background-color: mat.get-color-from-palette(mat.$gray-palette, 700);
-    color: mat.get-color-from-palette(mat.$gray-palette, 300);
+    background-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 700);
+    color: /*m2*/mat.get-color-from-palette(mat.$gray-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 03448a47c0..7eca3e9397 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
@@ -21,7 +21,7 @@ limitations under the License.
   width: max-content;
 
   &:focus-within .container {
-    border-color: mat.get-color-from-palette($tb-primary, 700);
+    border-color: /*m2*/mat.get-color-from-palette($tb-primary, 700);
   }
 
   &.default {
@@ -32,7 +32,7 @@ limitations under the License.
 
   &.error .container,
   .container:not(.is-valid) {
-    $_error-color: mat.get-color-from-palette($tb-warn, 200);
+    $_error-color: /*m2*/mat.get-color-from-palette($tb-warn, 200);
     border-color: $_error-color;
 
     &:hover,
@@ -42,10 +42,10 @@ limitations under the License.
   }
 
   &.high-contrast .container {
-    border-color: mat.get-color-from-palette(mat.$gray-palette, 400);
+    border-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 400);
 
     &:hover {
-      border-color: mat.get-color-from-palette(mat.$gray-palette, 600);
+      border-color: /*m2*/mat.get-color-from-palette(mat.$gray-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 1ea5dcafd0..af415885a6 100644
--- a/tensorboard/webapp/widgets/data_table/column_selector_component.scss
+++ b/tensorboard/webapp/widgets/data_table/column_selector_component.scss
@@ -25,12 +25,12 @@ limitations under the License.
   border: 1px solid;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 
-  border-color: mat.get-color-from-palette($tb-foreground, border);
-  background-color: mat.get-color-from-palette($tb-background, background);
+  border-color: /*m2*/mat.get-color-from-palette($tb-foreground, border);
+  background-color: /*m2*/mat.get-color-from-palette($tb-background, background);
 
   @include tb-dark-theme {
-    border-color: mat.get-color-from-palette($tb-dark-foreground, border);
-    background-color: mat.get-color-from-palette(
+    border-color: /*m2*/mat.get-color-from-palette($tb-dark-foreground, border);
+    background-color: /*m2*/mat.get-color-from-palette(
       $tb-dark-background,
       'background'
     );
@@ -49,7 +49,7 @@ limitations under the License.
   }
 
   .load-more-columns {
-    color: mat.get-color-from-palette($tb-warn, 600);
+    color: /*m2*/mat.get-color-from-palette($tb-warn, 600);
     display: flex;
     flex-direction: column;
     margin-top: 6px;
@@ -80,16 +80,16 @@ limitations under the License.
     width: 100%;
 
     &.selected {
-      background-color: mat.get-color-from-palette(mat.$gray-palette, 200);
+      background-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 200);
 
       @include tb-dark-theme {
-        background-color: mat.get-color-from-palette(mat.$gray-palette, 400);
+        background-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 400);
       }
     }
   }
 
   .tag {
-    background-color: mat.get-color-from-palette($tb-primary, 500);
+    background-color: /*m2*/mat.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 51137a7739..9903975255 100644
--- a/tensorboard/webapp/widgets/data_table/context_menu_component.scss
+++ b/tensorboard/webapp/widgets/data_table/context_menu_component.scss
@@ -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: mat.get-color-from-palette($tb-foreground, border);
-  background-color: mat.get-color-from-palette($tb-background, background);
+  border-color: /*m2*/mat.get-color-from-palette($tb-foreground, border);
+  background-color: /*m2*/mat.get-color-from-palette($tb-background, background);
 
   @include tb-dark-theme {
-    border-color: mat.get-color-from-palette($tb-dark-foreground, border);
-    background-color: mat.get-color-from-palette(
+    border-color: /*m2*/mat.get-color-from-palette($tb-dark-foreground, border);
+    background-color: /*m2*/mat.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 4413c69100..ff2c46e0cb 100644
--- a/tensorboard/webapp/widgets/data_table/data_table_component.scss
+++ b/tensorboard/webapp/widgets/data_table/data_table_component.scss
@@ -15,7 +15,7 @@ limitations under the License.
 @use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
-$_accent: map-get(mat.get-color-config($tb-theme), accent);
+$_accent: map-get(/*m2*/mat.get-color-config($tb-theme), accent);
 
 .data-table-wrapper {
   display: flex;
@@ -38,7 +38,7 @@ $_accent: map-get(mat.get-color-config($tb-theme), accent);
   width: 100%;
 
   .header {
-    background-color: mat.get-color-from-palette($tb-background, background);
+    background-color: /*m2*/mat.get-color-from-palette($tb-background, background);
     display: table-row;
     font-weight: bold;
     position: sticky;
@@ -72,7 +72,7 @@ $_accent: map-get(mat.get-color-config($tb-theme), accent);
 }
 
 .right-section {
-  background-color: mat.get-color-from-palette($tb-background, background);
+  background-color: /*m2*/mat.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 4908463381..950a47694d 100644
--- a/tensorboard/webapp/widgets/data_table/filter_dialog_component.scss
+++ b/tensorboard/webapp/widgets/data_table/filter_dialog_component.scss
@@ -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: mat.get-color-from-palette($tb-foreground, border);
-  background-color: mat.get-color-from-palette($tb-background, background);
+  border-color: /*m2*/mat.get-color-from-palette($tb-foreground, border);
+  background-color: /*m2*/mat.get-color-from-palette($tb-background, background);
 
   @include tb-dark-theme {
-    border-color: mat.get-color-from-palette($tb-dark-foreground, border);
-    background-color: mat.get-color-from-palette(
+    border-color: /*m2*/mat.get-color-from-palette($tb-dark-foreground, border);
+    background-color: /*m2*/mat.get-color-from-palette(
       $tb-dark-background,
       'background'
     );
@@ -50,10 +50,10 @@ limitations under the License.
 .filter-container {
   padding-bottom: 8px;
   margin-bottom: 8px;
-  border-bottom: 1px solid mat.get-color-from-palette($tb-foreground, border);
+  border-bottom: 1px solid /*m2*/mat.get-color-from-palette($tb-foreground, border);
 
   @include tb-dark-theme {
-    border-bottom-color: mat.get-color-from-palette(
+    border-bottom-color: /*m2*/mat.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 573251dad3..7a199d9cee 100644
--- a/tensorboard/webapp/widgets/data_table/header_cell_component.scss
+++ b/tensorboard/webapp/widgets/data_table/header_cell_component.scss
@@ -16,7 +16,7 @@ limitations under the License.
 @use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
-$_accent: map-get(mat.get-color-config($tb-theme), accent);
+$_accent: map-get(/*m2*/mat.get-color-config($tb-theme), accent);
 $_icon_size: 12px;
 $_icon_padding: 4px;
 
@@ -79,13 +79,13 @@ $_icon_padding: 4px;
 }
 
 .highlight {
-  background-color: mat.get-color-from-palette(mat.$gray-palette, 200);
+  background-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 200);
 }
 
 .highlight-border-right {
-  border-right: 2px solid mat.get-color-from-palette($_accent);
+  border-right: 2px solid /*m2*/mat.get-color-from-palette($_accent);
 }
 
 .highlight-border-left {
-  border-left: 2px solid mat.get-color-from-palette($_accent);
+  border-left: 2px solid /*m2*/mat.get-color-from-palette($_accent);
 }
diff --git a/tensorboard/webapp/widgets/dropdown/dropdown_component.scss b/tensorboard/webapp/widgets/dropdown/dropdown_component.scss
index 69042a8b06..fe9c987a33 100644
--- a/tensorboard/webapp/widgets/dropdown/dropdown_component.scss
+++ b/tensorboard/webapp/widgets/dropdown/dropdown_component.scss
@@ -16,7 +16,7 @@ limitations under the License.
 @import 'tensorboard/webapp/theme/tb_theme';
 
 mat-select {
-  border: 1px solid mat.get-color-from-palette($tf-slate, 500);
+  border: 1px solid /*m2*/mat.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 d609fb8d39..fa4b0b9eed 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
@@ -183,7 +183,7 @@ text {
   }
 }
 
-$_border-style: 1px solid mat.get-color-from-palette(mat.$gray-palette, 500);
+$_border-style: 1px solid /*m2*/mat.get-color-from-palette(mat.$gray-palette, 500);
 
 .x-axis .major-label {
   border-left: $_border-style;

From 65360f442ca63df10d3a7a7ade6f6f76f4a7b622 Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewjs@google.com>
Date: Mon, 5 May 2025 13:45:46 -0600
Subject: [PATCH 2/2] adjust for lint

---
 .../views/common/_lib.scss                    | 15 ++++++++--
 .../execution_data_component.scss             | 10 +++++--
 .../views/graph/graph_op_component.scss       |  3 +-
 .../views/feature_flag_dialog_component.scss  |  4 +--
 .../card_renderer/image_card_component.scss   |  2 +-
 .../card_renderer/scalar_card_component.scss  |  7 +++--
 ...nked_time_selection_warning_component.scss |  8 ++---
 .../main_view/filter_input_component.scss     |  2 +-
 .../views/main_view/main_view_component.scss  | 21 ++++++++++----
 .../main_view/pinned_view_component.scss      |  2 +-
 .../metrics/views/metrics_container.scss      | 18 ++++++++----
 .../scalar_column_editor_component.scss       | 23 ++++++++++-----
 .../right_pane/settings_view_component.scss   | 14 ++++++---
 .../_views/notification_center_component.scss |  4 +--
 .../views/runs_table/runs_data_table.scss     |  2 +-
 .../runs_group_menu_button_component.scss     |  2 +-
 tensorboard/webapp/theme/_tb_palette.scss     | 18 ++++++------
 .../webapp/theme/_tb_theme.template.scss      | 29 ++++++++++---------
 tensorboard/webapp/theme/_variable.scss       |  8 ++---
 .../widgets/card_fob/card_fob_component.scss  | 16 +++++-----
 .../content_wrapping_input_component.scss     |  8 ++---
 .../data_table/column_selector_component.scss | 28 +++++++++++++-----
 .../data_table/context_menu_component.scss    | 14 ++++++---
 .../data_table/data_table_component.scss      | 12 ++++++--
 .../data_table/filter_dialog_component.scss   | 19 ++++++++----
 .../data_table/header_cell_component.scss     |  8 ++---
 .../widgets/dropdown/dropdown_component.scss  |  2 +-
 .../sub_view/line_chart_axis_view.scss        |  3 +-
 28 files changed, 193 insertions(+), 109 deletions(-)

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 6ecfb8e40c..0dbb8c2f78 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
@@ -15,7 +15,10 @@ limitations under the License.
 @use '@angular/material' as mat;
 
 @mixin debugger-op-type {
-  background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$blue-grey-palette, 50);
+  background-color: /*m2*/ mat.get-color-from-palette(
+    /*m2$*/ mat.$blue-grey-palette,
+    50
+  );
   @include tb-theme-foreground-prop(border, border, 1px solid);
   border-radius: 4px;
   font-family: 'Roboto Mono', monospace;
@@ -26,13 +29,19 @@ limitations under the License.
   width: max-content;
 
   @include tb-dark-theme {
-    background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$blue-grey-palette, 700);
+    background-color: /*m2*/ mat.get-color-from-palette(
+      /*m2$*/ mat.$blue-grey-palette,
+      700
+    );
   }
 }
 
 @mixin debugger-highlight-background {
   background-color: #fff099;
   @include tb-dark-theme {
-    background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 900);
+    background-color: /*m2*/ mat.get-color-from-palette(
+      /*m2$*/ mat.$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 ff6c81caa7..04ef73e0d8 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
@@ -45,7 +45,10 @@ limitations under the License.
 }
 
 .focus-execution-container {
-  background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 200);
+  background-color: /*m2*/ mat.get-color-from-palette(
+    /*m2$*/ mat.$orange-palette,
+    200
+  );
   border-radius: 4px;
   font-size: 12px;
   height: 120px;
@@ -53,7 +56,10 @@ limitations under the License.
   width: 360px;
 
   @include tb-dark-theme {
-    background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 900);
+    background-color: /*m2*/ mat.get-color-from-palette(
+      /*m2$*/ mat.$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 8505efe769..49dd1a607d 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
@@ -31,8 +31,9 @@ limitations under the License.
   padding: 2px 6px;
   text-align: right;
   width: 200px;
+  $grey-600: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 600);
   @include tb-dark-theme {
-    box-shadow: 1px 3px /*m2*/mat.get-color-from-palette(mat.$gray-palette, 600);
+    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 2635726fde..b22e5f4a56 100644
--- a/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.scss
+++ b/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.scss
@@ -17,13 +17,13 @@ limitations under the License.
 
 .message {
   .warning {
-    color: /*m2*/mat.get-color-from-palette($tb-warn);
+    color: /*m2*/ mat.get-color-from-palette($tb-warn);
   }
   margin-bottom: 16px;
 }
 
 .note-1 {
-  color: /*m2*/mat.get-color-from-palette($tb-accent);
+  color: /*m2*/ mat.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 9fc1e279bf..442570d952 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss
@@ -153,7 +153,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: /*m2*/ mat.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 060cfc7922..2ec44dea9f 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
@@ -196,10 +196,13 @@ $_data_table_initial_height: 100px;
   align-items: center;
 
   .expand-button {
-    color: /*m2*/mat.get-color-from-palette($tb-foreground, secondary-text);
+    color: /*m2*/ mat.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: /*m2*/ mat.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 dc96a795c9..1a9b8eb4ed 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
@@ -16,8 +16,8 @@ limitations under the License.
 @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: /*m2*/ mat.get-color-from-palette(
+    map-get(/*m2*/ mat.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: /*m2*/mat.get-color-from-palette(
-      map-get(/*m2*/mat.get-color-config($tb-dark-theme), warn),
+    color: /*m2*/ mat.get-color-from-palette(
+      map-get(/*m2*/ mat.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 beab36761b..6cf97269b3 100644
--- a/tensorboard/webapp/metrics/views/main_view/filter_input_component.scss
+++ b/tensorboard/webapp/metrics/views/main_view/filter_input_component.scss
@@ -28,7 +28,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: /*m2*/ mat.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 ff4d98cae9..32e568e5d9 100644
--- a/tensorboard/webapp/metrics/views/main_view/main_view_component.scss
+++ b/tensorboard/webapp/metrics/views/main_view/main_view_component.scss
@@ -86,7 +86,10 @@ mat-button-toggle-group.filter-view {
 .main,
 .sidebar {
   contain: strict;
-  background-color: /*m2*/mat.get-color-from-palette($tb-background, background);
+  background-color: /*m2*/ mat.get-color-from-palette(
+    $tb-background,
+    background
+  );
   overflow-x: hidden;
   overflow-y: auto;
   will-change: transform, scroll-position;
@@ -97,7 +100,7 @@ mat-button-toggle-group.filter-view {
 }
 
 .main {
-  background-color: /*m2*/mat.get-color-from-palette($tf-slate, 200);
+  background-color: /*m2*/ mat.get-color-from-palette($tf-slate, 200);
   flex: 1 1;
   display: flex;
   flex-direction: column;
@@ -153,16 +156,19 @@ 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: /*m2*/ mat.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: /*m2*/ mat.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: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 300);
   }
 
   ::ng-deep .mat-button-wrapper {
@@ -176,7 +182,10 @@ mat-button-toggle-group.filter-view {
 }
 
 .slide-out-menu {
-  background-color: /*m2*/mat.get-color-from-palette($tb-background, background);
+  background-color: /*m2*/ mat.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 989c0b8ff4..813474ee54 100644
--- a/tensorboard/webapp/metrics/views/main_view/pinned_view_component.scss
+++ b/tensorboard/webapp/metrics/views/main_view/pinned_view_component.scss
@@ -65,7 +65,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: /*m2*/ mat.get-color-from-palette(mat.$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 838ac55e7e..870ce00ffe 100644
--- a/tensorboard/webapp/metrics/views/metrics_container.scss
+++ b/tensorboard/webapp/metrics/views/metrics_container.scss
@@ -26,10 +26,11 @@ limitations under the License.
 
 .notice {
   background-color: rgba(
-    /*m2*/mat.get-color-from-palette(mat.$yellow-palette, 200),
+    /*m2*/ mat.get-color-from-palette(mat.$yellow-palette, 200),
     0.85
   );
-  border-bottom: 1px solid /*m2*/mat.get-color-from-palette(mat.$yellow-palette, 500);
+  $yellow-500: /*m2*/ mat.get-color-from-palette(mat.$yellow-palette, 500);
+  border-bottom: 1px solid $yellow-500;
   color: map-get($tb-foreground, text);
   display: block;
   flex: 0 0;
@@ -41,14 +42,21 @@ tb-dashboard-layout {
 }
 
 nav {
-  background-color: /*m2*/mat.get-color-from-palette($tb-background, background);
-  border-right: 1px solid /*m2*/mat.get-color-from-palette($tb-foreground, border);
+  background-color: /*m2*/ mat.get-color-from-palette(
+    $tb-background,
+    background
+  );
+  $border: /*m2*/ mat.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($tb-dark-foreground, border);
+    border-right-color: /*m2*/ mat.get-color-from-palette(
+      $tb-dark-foreground,
+      border
+    );
   }
 }
 
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 67a213b13b..c5fe55a33c 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
@@ -15,7 +15,7 @@ limitations under the License.
 @use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
-$_accent: map-get(/*m2*/mat.get-color-config($tb-theme), accent);
+$_accent: map-get(/*m2*/ mat.get-color-config($tb-theme), accent);
 
 :host ::ng-deep .mat-tab-label {
   min-width: 0;
@@ -39,15 +39,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: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 200);
 }
 
 .highlight-bottom {
-  border-bottom: 2px solid /*m2*/mat.get-color-from-palette($_accent);
+  border-bottom: 2px solid /*m2*/ mat.get-color-from-palette($_accent);
 }
 
 .highlight-top {
-  border-top: 2px solid /*m2*/mat.get-color-from-palette($_accent);
+  border-top: 2px solid /*m2*/ mat.get-color-from-palette($_accent);
 }
 
 .footer {
@@ -60,19 +60,26 @@ $_accent: map-get(/*m2*/mat.get-color-config($tb-theme), accent);
   align-items: center;
   justify-content: flex-end;
   padding: 4px;
-  border-top: 1px solid /*m2*/mat.get-color-from-palette($tb-foreground, border);
+  $border: /*m2*/ mat.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: /*m2*/ mat.get-color-from-palette(
+      $tb-dark-foreground,
+      border
+    );
   }
 }
 
 .close-button {
-  color: /*m2*/mat.get-color-from-palette($tb-foreground, secondary-text);
+  color: /*m2*/ mat.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: /*m2*/ mat.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 d02ea2f0b5..6e8430a638 100644
--- a/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss
+++ b/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss
@@ -58,7 +58,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 /*m2*/ mat.get-color-from-palette($tf-slate, 500);
     border-radius: 2px;
     box-sizing: border-box;
     color: inherit;
@@ -67,7 +67,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: /*m2*/ mat.get-color-from-palette($tf-slate, 700);
     }
   }
 }
@@ -127,9 +127,15 @@ mat-slider {
     align-items: center;
   }
   &.toggle-opened {
-    background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$grey-palette, 200);
+    background-color: /*m2*/ mat.get-color-from-palette(
+      /*m2$*/ mat.$grey-palette,
+      200
+    );
     @include tb-dark-theme {
-      background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$grey-palette, 800);
+      background-color: /*m2*/ mat.get-color-from-palette(
+        /*m2$*/ mat.$grey-palette,
+        800
+      );
     }
   }
   mat-icon {
diff --git a/tensorboard/webapp/notification_center/_views/notification_center_component.scss b/tensorboard/webapp/notification_center/_views/notification_center_component.scss
index 04eb42555d..13e61b1e8e 100644
--- a/tensorboard/webapp/notification_center/_views/notification_center_component.scss
+++ b/tensorboard/webapp/notification_center/_views/notification_center_component.scss
@@ -21,7 +21,7 @@ limitations under the License.
 
 .red-dot {
   $_dim: 10px;
-  background-color: /*m2*/mat.get-color-from-palette(mat.$red-palette, 700);
+  background-color: /*m2*/ mat.get-color-from-palette(mat.$red-palette, 700);
   border-radius: $_dim * 0.5;
   height: $_dim;
   position: absolute;
@@ -52,7 +52,7 @@ limitations under the License.
 }
 
 .category-icon {
-  color: /*m2*/mat.get-color-from-palette(mat.$blue-palette, 700);
+  color: /*m2*/ mat.get-color-from-palette(mat.$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 379dc396d4..ae73114556 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss
+++ b/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss
@@ -28,7 +28,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 /*m2*/ mat.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 208e1032a9..7ae4bf7e55 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
@@ -19,7 +19,7 @@ limitations under the License.
   font-size: 16px;
 
   .label {
-    color: /*m2*/mat.get-color-from-palette($tb-foreground, secondary-text);
+    color: /*m2*/ mat.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 77c65d5527..193e766627 100644
--- a/tensorboard/webapp/theme/_tb_palette.scss
+++ b/tensorboard/webapp/theme/_tb_palette.scss
@@ -43,15 +43,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: /*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),
   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 5905c3379f..9bef0a5674 100644
--- a/tensorboard/webapp/theme/_tb_theme.template.scss
+++ b/tensorboard/webapp/theme/_tb_theme.template.scss
@@ -23,19 +23,22 @@ 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: /*m2*/ mat.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: /*m2*/ mat.get-color-from-palette(
   $tb-dark-primary,
   default
 ) !default;
 
-$tb-theme: /*m2*/mat.define-light-theme(
+$tb-theme: /*m2*/ mat.define-light-theme(
   (
     color: (
       primary: $tb-primary,
@@ -51,13 +54,13 @@ $tb-theme: /*m2*/mat.define-light-theme(
 $tb-foreground: map_merge(
   mat.$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: /*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),
     // 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: /*m2*/ mat.get-color-from-palette(mat.$blue-palette, 700),
+    link-visited: /*m2*/ mat.get-color-from-palette(mat.$purple-palette, 700),
   )
 );
 $tb-background: map_merge(
@@ -103,16 +106,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(/*m2*/ mat.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: /*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),
   )
 );
 $tb-dark-background: map_merge(
-  map-get(/*m2*/mat.get-color-config($tb-dark-theme), background),
+  map-get(/*m2*/ mat.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 4bc0ffb478..5e91f8af4e 100644
--- a/tensorboard/webapp/theme/_variable.scss
+++ b/tensorboard/webapp/theme/_variable.scss
@@ -16,9 +16,9 @@ limitations under the License.
 @use '@angular/material' as mat;
 @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: /*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-dark-primary: /*m2*/mat.define-palette($tf-orange, 800, 600, 900);
+$tb-dark-primary: /*m2*/ mat.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 99ac27a36a..60c56ecab4 100644
--- a/tensorboard/webapp/widgets/card_fob/card_fob_component.scss
+++ b/tensorboard/webapp/widgets/card_fob/card_fob_component.scss
@@ -21,7 +21,7 @@ limitations under the License.
 
 .fob {
   display: inline-flex;
-  background-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 300);
+  background-color: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 300);
   border-radius: 25px;
   padding: 2px 2px 2px 4px;
   font-size: 11px;
@@ -50,7 +50,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 /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 500);
     font-weight: bold;
     height: 17px;
   }
@@ -61,7 +61,7 @@ span {
   display: inline-block;
 
   @include tb-dark-theme {
-    color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 700);
+    color: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 700);
   }
 }
 
@@ -84,17 +84,17 @@ button {
   }
 
   @include tb-dark-theme {
-    color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 700);
+    color: /*m2*/ mat.get-color-from-palette(mat.$gray-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: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 500);
+  color: /*m2*/ mat.get-color-from-palette(mat.$gray-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: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 700);
+    color: /*m2*/ mat.get-color-from-palette(mat.$gray-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 7eca3e9397..df8cf9ecf3 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
@@ -21,7 +21,7 @@ limitations under the License.
   width: max-content;
 
   &:focus-within .container {
-    border-color: /*m2*/mat.get-color-from-palette($tb-primary, 700);
+    border-color: /*m2*/ mat.get-color-from-palette($tb-primary, 700);
   }
 
   &.default {
@@ -32,7 +32,7 @@ limitations under the License.
 
   &.error .container,
   .container:not(.is-valid) {
-    $_error-color: /*m2*/mat.get-color-from-palette($tb-warn, 200);
+    $_error-color: /*m2*/ mat.get-color-from-palette($tb-warn, 200);
     border-color: $_error-color;
 
     &:hover,
@@ -42,10 +42,10 @@ limitations under the License.
   }
 
   &.high-contrast .container {
-    border-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 400);
+    border-color: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 400);
 
     &:hover {
-      border-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 600);
+      border-color: /*m2*/ mat.get-color-from-palette(mat.$gray-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 af415885a6..e82eab11fa 100644
--- a/tensorboard/webapp/widgets/data_table/column_selector_component.scss
+++ b/tensorboard/webapp/widgets/data_table/column_selector_component.scss
@@ -25,12 +25,18 @@ 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: /*m2*/ mat.get-color-from-palette($tb-foreground, border);
+  background-color: /*m2*/ mat.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: /*m2*/ mat.get-color-from-palette(
+      $tb-dark-foreground,
+      border
+    );
+    background-color: /*m2*/ mat.get-color-from-palette(
       $tb-dark-background,
       'background'
     );
@@ -49,7 +55,7 @@ limitations under the License.
   }
 
   .load-more-columns {
-    color: /*m2*/mat.get-color-from-palette($tb-warn, 600);
+    color: /*m2*/ mat.get-color-from-palette($tb-warn, 600);
     display: flex;
     flex-direction: column;
     margin-top: 6px;
@@ -80,16 +86,22 @@ limitations under the License.
     width: 100%;
 
     &.selected {
-      background-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 200);
+      background-color: /*m2*/ mat.get-color-from-palette(
+        mat.$gray-palette,
+        200
+      );
 
       @include tb-dark-theme {
-        background-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 400);
+        background-color: /*m2*/ mat.get-color-from-palette(
+          mat.$gray-palette,
+          400
+        );
       }
     }
   }
 
   .tag {
-    background-color: /*m2*/mat.get-color-from-palette($tb-primary, 500);
+    background-color: /*m2*/ mat.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 9903975255..d7e7557d06 100644
--- a/tensorboard/webapp/widgets/data_table/context_menu_component.scss
+++ b/tensorboard/webapp/widgets/data_table/context_menu_component.scss
@@ -22,12 +22,18 @@ 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: /*m2*/ mat.get-color-from-palette($tb-foreground, border);
+  background-color: /*m2*/ mat.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: /*m2*/ mat.get-color-from-palette(
+      $tb-dark-foreground,
+      border
+    );
+    background-color: /*m2*/ mat.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 ff2c46e0cb..a27b69273c 100644
--- a/tensorboard/webapp/widgets/data_table/data_table_component.scss
+++ b/tensorboard/webapp/widgets/data_table/data_table_component.scss
@@ -15,7 +15,7 @@ limitations under the License.
 @use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
-$_accent: map-get(/*m2*/mat.get-color-config($tb-theme), accent);
+$_accent: map-get(/*m2*/ mat.get-color-config($tb-theme), accent);
 
 .data-table-wrapper {
   display: flex;
@@ -38,7 +38,10 @@ $_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: /*m2*/ mat.get-color-from-palette(
+      $tb-background,
+      background
+    );
     display: table-row;
     font-weight: bold;
     position: sticky;
@@ -72,7 +75,10 @@ $_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: /*m2*/ mat.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 950a47694d..90d40974ab 100644
--- a/tensorboard/webapp/widgets/data_table/filter_dialog_component.scss
+++ b/tensorboard/webapp/widgets/data_table/filter_dialog_component.scss
@@ -20,12 +20,18 @@ 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: /*m2*/ mat.get-color-from-palette($tb-foreground, border);
+  background-color: /*m2*/ mat.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: /*m2*/ mat.get-color-from-palette(
+      $tb-dark-foreground,
+      border
+    );
+    background-color: /*m2*/ mat.get-color-from-palette(
       $tb-dark-background,
       'background'
     );
@@ -50,10 +56,11 @@ limitations under the License.
 .filter-container {
   padding-bottom: 8px;
   margin-bottom: 8px;
-  border-bottom: 1px solid /*m2*/mat.get-color-from-palette($tb-foreground, border);
+  $border: /*m2*/ mat.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: /*m2*/ mat.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 7a199d9cee..e80118d7a7 100644
--- a/tensorboard/webapp/widgets/data_table/header_cell_component.scss
+++ b/tensorboard/webapp/widgets/data_table/header_cell_component.scss
@@ -16,7 +16,7 @@ limitations under the License.
 @use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
-$_accent: map-get(/*m2*/mat.get-color-config($tb-theme), accent);
+$_accent: map-get(/*m2*/ mat.get-color-config($tb-theme), accent);
 $_icon_size: 12px;
 $_icon_padding: 4px;
 
@@ -79,13 +79,13 @@ $_icon_padding: 4px;
 }
 
 .highlight {
-  background-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 200);
+  background-color: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 200);
 }
 
 .highlight-border-right {
-  border-right: 2px solid /*m2*/mat.get-color-from-palette($_accent);
+  border-right: 2px solid /*m2*/ mat.get-color-from-palette($_accent);
 }
 
 .highlight-border-left {
-  border-left: 2px solid /*m2*/mat.get-color-from-palette($_accent);
+  border-left: 2px solid /*m2*/ mat.get-color-from-palette($_accent);
 }
diff --git a/tensorboard/webapp/widgets/dropdown/dropdown_component.scss b/tensorboard/webapp/widgets/dropdown/dropdown_component.scss
index fe9c987a33..0cc30ae78c 100644
--- a/tensorboard/webapp/widgets/dropdown/dropdown_component.scss
+++ b/tensorboard/webapp/widgets/dropdown/dropdown_component.scss
@@ -16,7 +16,7 @@ limitations under the License.
 @import 'tensorboard/webapp/theme/tb_theme';
 
 mat-select {
-  border: 1px solid /*m2*/mat.get-color-from-palette($tf-slate, 500);
+  border: 1px solid /*m2*/ mat.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 fa4b0b9eed..61a929f95b 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
@@ -183,7 +183,8 @@ text {
   }
 }
 
-$_border-style: 1px solid /*m2*/mat.get-color-from-palette(mat.$gray-palette, 500);
+$border: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 500);
+$_border-style: 1px solid $border;
 
 .x-axis .major-label {
   border-left: $_border-style;