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..3cde8ddc4d 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,7 +31,7 @@ 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: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$grey-palette, 600);
   @include tb-dark-theme {
     box-shadow: 1px 3px $grey-600;
   }
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..0fc2c7fb8a 100644
--- a/tensorboard/webapp/metrics/views/main_view/main_view_component.scss
+++ b/tensorboard/webapp/metrics/views/main_view/main_view_component.scss
@@ -168,7 +168,7 @@ mat-button-toggle-group.filter-view {
 
   &.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(/*m2$*/ mat.$grey-palette, 300);
   }
 
   ::ng-deep .mat-button-wrapper {
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..76605bcf0d 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(/*m2$*/ 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 870ce00ffe..28498c2a1b 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(
-    /*m2*/ mat.get-color-from-palette(mat.$yellow-palette, 200),
+    /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$yellow-palette, 200),
     0.85
   );
-  $yellow-500: /*m2*/ mat.get-color-from-palette(mat.$yellow-palette, 500);
+  $yellow-500: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$yellow-palette, 500);
   border-bottom: 1px solid $yellow-500;
   color: map-get($tb-foreground, text);
   display: block;
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..4ba099c05f 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
@@ -39,7 +39,7 @@ $_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(/*m2$*/ mat.$grey-palette, 200);
 }
 
 .highlight-bottom {
diff --git a/tensorboard/webapp/notification_center/_views/notification_center_component.scss b/tensorboard/webapp/notification_center/_views/notification_center_component.scss
index 13e61b1e8e..ab09c63b08 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(/*m2$*/ 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(/*m2$*/ mat.$blue-palette, 700);
   height: 15px;
   margin-right: 6px;
   vertical-align: middle;
diff --git a/tensorboard/webapp/theme/_tb_theme.template.scss b/tensorboard/webapp/theme/_tb_theme.template.scss
index 9bef0a5674..2ea13a3e45 100644
--- a/tensorboard/webapp/theme/_tb_theme.template.scss
+++ b/tensorboard/webapp/theme/_tb_theme.template.scss
@@ -54,12 +54,12 @@ $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(/*m2$*/ mat.$grey-palette, 900),
+    secondary-text: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$grey-palette, 700),
+    disabled-text: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$grey-palette, 600),
     // TB specific variable.
     border: #ebebeb,
-    link: /*m2*/ mat.get-color-from-palette(mat.$blue-palette, 700),
+    link: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$blue-palette, 700),
     link-visited: /*m2*/ mat.get-color-from-palette(mat.$purple-palette, 700),
   )
 );
@@ -109,8 +109,8 @@ $tb-dark-foreground: map_merge(
   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),
+    disabled-text: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$grey-palette, 700),
+    link: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$blue-palette, 400),
     link-visited: /*m2*/ mat.get-color-from-palette(mat.$purple-palette, 300),
   )
 );
diff --git a/tensorboard/webapp/theme/_variable.scss b/tensorboard/webapp/theme/_variable.scss
index 5e91f8af4e..ab201bd653 100644
--- a/tensorboard/webapp/theme/_variable.scss
+++ b/tensorboard/webapp/theme/_variable.scss
@@ -18,7 +18,7 @@ limitations under the License.
 
 $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-warn: /*m2*/ mat.define-palette(/*m2$*/ mat.$red-palette);
 
 $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 60c56ecab4..0974de0f05 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(/*m2$*/ mat.$grey-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(/*m2$*/ mat.$grey-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(/*m2$*/ mat.$grey-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(/*m2$*/ mat.$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: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$grey-palette, 500);
+  color: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$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: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$grey-palette, 700);
+    color: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$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..263f44aee3 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
@@ -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(/*m2$*/ mat.$grey-palette, 400);
 
     &:hover {
-      border-color: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 600);
+      border-color: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$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..6b19fdcbef 100644
--- a/tensorboard/webapp/widgets/data_table/column_selector_component.scss
+++ b/tensorboard/webapp/widgets/data_table/column_selector_component.scss
@@ -87,13 +87,13 @@ limitations under the License.
 
     &.selected {
       background-color: /*m2*/ mat.get-color-from-palette(
-        mat.$gray-palette,
+        mat.$grey-palette,
         200
       );
 
       @include tb-dark-theme {
         background-color: /*m2*/ mat.get-color-from-palette(
-          mat.$gray-palette,
+          mat.$grey-palette,
           400
         );
       }
diff --git a/tensorboard/webapp/widgets/data_table/header_cell_component.scss b/tensorboard/webapp/widgets/data_table/header_cell_component.scss
index e80118d7a7..9feaed9578 100644
--- a/tensorboard/webapp/widgets/data_table/header_cell_component.scss
+++ b/tensorboard/webapp/widgets/data_table/header_cell_component.scss
@@ -79,7 +79,7 @@ $_icon_padding: 4px;
 }
 
 .highlight {
-  background-color: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 200);
+  background-color: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$grey-palette, 200);
 }
 
 .highlight-border-right {
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..1551c057c7 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: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 500);
+$border: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$grey-palette, 500);
 $_border-style: 1px solid $border;
 
 .x-axis .major-label {