prefix material 2 palette colors with a comment for transforms

andrewseguin · andrewseguin · commit 389ebc3d617b · 2025-05-19T10:29:36.000-06:00
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 {

Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ limitations under the License.`
`31`	`31`	`padding: 2px 6px;`
`32`	`32`	`text-align: right;`
`33`	`33`	`width: 200px;`
`34`		`- $grey-600: /m2/ mat.get-color-from-palette(mat.$gray-palette, 600);`
	`34`	`+ $grey-600: /m2/ mat.get-color-from-palette(/m2$/ mat.$grey-palette, 600);`
`35`	`35`	`@include tb-dark-theme {`
`36`	`36`	`box-shadow: 1px 3px $grey-600;`
`37`	`37`	`}`
Original file line number	Diff line number	Diff line change
`@@ -168,7 +168,7 @@ mat-button-toggle-group.filter-view {`
`168`	`168`
`169`	`169`	`&.checked {`
`170`	`170`	`@include tb-theme-background-prop(background-color, selected-button);`
`171`		`- border-color: /m2/ mat.get-color-from-palette(mat.$gray-palette, 300);`
	`171`	`+ border-color: /m2/ mat.get-color-from-palette(/m2$/ mat.$grey-palette, 300);`
`172`	`172`	`}`
`173`	`173`
`174`	`174`	`::ng-deep .mat-button-wrapper {`
Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@ $_accent: map-get(/m2/ mat.get-color-config($tb-theme), accent);`
`39`	`39`	`}`
`40`	`40`
`41`	`41`	`.highlighted {`
`42`		`- background-color: /m2/ mat.get-color-from-palette(mat.$gray-palette, 200);`
	`42`	`+ background-color: /m2/ mat.get-color-from-palette(/m2$/ mat.$grey-palette, 200);`
`43`	`43`	`}`
`44`	`44`
`45`	`45`	`.highlight-bottom {`
Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@ limitations under the License.`
`21`	`21`
`22`	`22`	`.fob {`
`23`	`23`	`display: inline-flex;`
`24`		`- background-color: /m2/ mat.get-color-from-palette(mat.$gray-palette, 300);`
	`24`	`+ background-color: /m2/ mat.get-color-from-palette(/m2$/ mat.$grey-palette, 300);`
`25`	`25`	`border-radius: 25px;`
`26`	`26`	`padding: 2px 2px 2px 4px;`
`27`	`27`	`font-size: 11px;`
`@@ -50,7 +50,7 @@ limitations under the License.`
`50`	`50`	`&.prospective {`
`51`	`51`	`align-items: center;`
`52`	`52`	`box-sizing: border-box;`
`53`		`- border: 1px dashed /m2/ mat.get-color-from-palette(mat.$gray-palette, 500);`
	`53`	`+ border: 1px dashed /m2/ mat.get-color-from-palette(/m2$/ mat.$grey-palette, 500);`
`54`	`54`	`font-weight: bold;`
`55`	`55`	`height: 17px;`
`56`	`56`	`}`
`@@ -61,7 +61,7 @@ span {`
`61`	`61`	`display: inline-block;`
`62`	`62`
`63`	`63`	`@include tb-dark-theme {`
`64`		`- color: /m2/ mat.get-color-from-palette(mat.$gray-palette, 700);`
	`64`	`+ color: /m2/ mat.get-color-from-palette(/m2$/ mat.$grey-palette, 700);`
`65`	`65`	`}`
`66`	`66`	`}`
`67`	`67`
`@@ -84,17 +84,17 @@ button {`
`84`	`84`	`}`
`85`	`85`
`86`	`86`	`@include tb-dark-theme {`
`87`		`- color: /m2/ mat.get-color-from-palette(mat.$gray-palette, 700);`
	`87`	`+ color: /m2/ mat.get-color-from-palette(/m2$/ mat.$grey-palette, 700);`
`88`	`88`	`}`
`89`	`89`	`}`
`90`	`90`
`91`	`91`	`button:hover {`
`92`		`- background-color: /m2/ mat.get-color-from-palette(mat.$gray-palette, 500);`
`93`		`- color: /m2/ mat.get-color-from-palette(mat.$gray-palette, 200);`
	`92`	`+ background-color: /m2/ mat.get-color-from-palette(/m2$/ mat.$grey-palette, 500);`
	`93`	`+ color: /m2/ mat.get-color-from-palette(/m2$/ mat.$grey-palette, 200);`
`94`	`94`	`cursor: pointer;`
`95`	`95`
`96`	`96`	`@include tb-dark-theme {`
`97`		`- background-color: /m2/ mat.get-color-from-palette(mat.$gray-palette, 700);`
`98`		`- color: /m2/ mat.get-color-from-palette(mat.$gray-palette, 300);`
	`97`	`+ background-color: /m2/ mat.get-color-from-palette(/m2$/ mat.$grey-palette, 700);`
	`98`	`+ color: /m2/ mat.get-color-from-palette(/m2$/ mat.$grey-palette, 300);`
`99`	`99`	`}`
`100`	`100`	`}`
Original file line number	Diff line number	Diff line change
`@@ -42,10 +42,10 @@ limitations under the License.`
`42`	`42`	`}`
`43`	`43`
`44`	`44`	`&.high-contrast .container {`
`45`		`- border-color: /m2/ mat.get-color-from-palette(mat.$gray-palette, 400);`
	`45`	`+ border-color: /m2/ mat.get-color-from-palette(/m2$/ mat.$grey-palette, 400);`
`46`	`46`
`47`	`47`	`&:hover {`
`48`		`- border-color: /m2/ mat.get-color-from-palette(mat.$gray-palette, 600);`
	`48`	`+ border-color: /m2/ mat.get-color-from-palette(/m2$/ mat.$grey-palette, 600);`
`49`	`49`	`}`
`50`	`50`	`}`
`51`	`51`	`}`
Original file line number	Diff line number	Diff line change
`@@ -87,13 +87,13 @@ limitations under the License.`
`87`	`87`
`88`	`88`	`&.selected {`
`89`	`89`	`background-color: /m2/ mat.get-color-from-palette(`
`90`		`- mat.$gray-palette,`
	`90`	`+ mat.$grey-palette,`
`91`	`91`	`200`
`92`	`92`	`);`
`93`	`93`
`94`	`94`	`@include tb-dark-theme {`
`95`	`95`	`background-color: /m2/ mat.get-color-from-palette(`
`96`		`- mat.$gray-palette,`
	`96`	`+ mat.$grey-palette,`
`97`	`97`	`400`
`98`	`98`	`);`
`99`	`99`	`}`
Original file line number	Diff line number	Diff line change
`@@ -79,7 +79,7 @@ $_icon_padding: 4px;`
`79`	`79`	`}`
`80`	`80`
`81`	`81`	`.highlight {`
`82`		`- background-color: /m2/ mat.get-color-from-palette(mat.$gray-palette, 200);`
	`82`	`+ background-color: /m2/ mat.get-color-from-palette(/m2$/ mat.$grey-palette, 200);`
`83`	`83`	`}`
`84`	`84`
`85`	`85`	`.highlight-border-right {`
Original file line number	Diff line number	Diff line change
`@@ -183,7 +183,7 @@ text {`
`183`	`183`	`}`
`184`	`184`	`}`
`185`	`185`
`186`		`-$border: /m2/ mat.get-color-from-palette(mat.$gray-palette, 500);`
	`186`	`+$border: /m2/ mat.get-color-from-palette(/m2$/ mat.$grey-palette, 500);`
`187`	`187`	`$_border-style: 1px solid $border;`
`188`	`188`
`189`	`189`	`.x-axis .major-label {`