chore: Update Angular Material style imports to @use

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/BUILD

@@ -6,5 +6,8 @@ licenses(["notice"])
 
 tf_sass_library(
     name = "style_lib",
-    srcs = ["_lib.scss"],
+    srcs = [
+        "_lib.scss",
+        "//tensorboard/webapp:angular_material_theming",
+    ],
 )

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/_lib.scss

@@ -12,9 +12,10 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+@use '@angular/material' as mat;
 
 @mixin debugger-op-type {
-  background-color: mat-color($mat-blue-grey, 50);
+  background-color: mat.get-color-from-palette(mat.$blue-grey-palette, 50);
   @include tb-theme-foreground-prop(border, border, 1px solid);
   border-radius: 4px;
   font-family: 'Roboto Mono', monospace;
@@ -25,13 +26,13 @@ limitations under the License.
   width: max-content;
 
   @include tb-dark-theme {
-    background-color: mat-color($mat-blue-grey, 700);
+    background-color: mat.get-color-from-palette(mat.$blue-grey-palette, 700);
   }
 }
 
 @mixin debugger-highlight-background {
   background-color: #fff099;
   @include tb-dark-theme {
-    background-color: mat-color($mat-orange, 900);
+    background-color: mat.get-color-from-palette(mat.$orange-palette, 900);
   }
 }

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/BUILD

@@ -7,6 +7,7 @@ licenses(["notice"])
 tf_sass_binary(
     name = "execution_data_styles",
     src = "execution_data_component.scss",
+    deps = ["//tensorboard/webapp:angular_material_theming"],
 )
 
 tf_ng_module(

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.scss

@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 .debug-tensor-values-table {
@@ -44,15 +45,15 @@ limitations under the License.
 }
 
 .focus-execution-container {
-  background-color: mat-color($mat-orange, 200);
+  background-color: mat.get-color-from-palette(mat.$orange-palette, 200);
   border-radius: 4px;
   font-size: 12px;
   height: 120px;
   padding: 5px;
   width: 360px;
 
   @include tb-dark-theme {
-    background-color: mat-color($mat-orange, 900);
+    background-color: mat.get-color-from-palette(mat.$orange-palette, 900);
   }
 }
 

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_op_component.scss

@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 @import '../common/lib';
 
@@ -31,7 +32,7 @@ limitations under the License.
   text-align: right;
   width: 200px;
   @include tb-dark-theme {
-    box-shadow: 1px 3px mat-color($mat-gray, 600);
+    box-shadow: 1px 3px mat.get-color-from-palette(mat.$gray-palette, 600);
   }
 }
 

tensorboard/webapp/BUILD

@@ -175,11 +175,11 @@ tf_js_binary(
     entry_point = "main_prod.ts",
     deps = [
         ":ng_main",
+        "//tensorboard/webapp:angular_material_theming",
         "//tensorboard/webapp/angular:expect_angular_material_tabs",
         "//tensorboard/webapp/angular:expect_angular_material_toolbar",
         "@npm//@angular/common",
         "@npm//@angular/core",
-        "@npm//@angular/material",
         "@npm//@angular/platform-browser",
         "@npm//@ngrx/store",
         "@npm//rxjs",

tensorboard/webapp/metrics/views/BUILD

@@ -12,6 +12,7 @@ tf_sass_library(
 tf_sass_binary(
     name = "metrics_container_styles",
     src = "metrics_container.scss",
+    deps = ["//tensorboard/webapp:angular_material_theming"],
 )
 
 tf_sass_binary(

tensorboard/webapp/metrics/views/card_renderer/BUILD

@@ -121,6 +121,7 @@ tf_sass_binary(
     name = "image_card_styles",
     src = "image_card_component.scss",
     deps = [
+        "//tensorboard/webapp:angular_material_theming",
         "//tensorboard/webapp/metrics/views:metrics_common_styles",
     ],
 )
@@ -190,6 +191,7 @@ tf_ng_module(
 tf_sass_binary(
     name = "vis_selected_time_clipped_styles",
     src = "vis_selected_time_clipped_component.scss",
+    deps = ["//tensorboard/webapp:angular_material_theming"],
 )
 
 tf_ng_module(

tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss

@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 @import '../common';
 
@@ -142,7 +143,7 @@ $_title-to-heading-gap: 12px;
 }
 
 :host ::ng-deep .mat-slider-min-value .mat-slider-thumb {
-  background-color: mat-color($tb-primary);
+  background-color: mat.get-color-from-palette($tb-primary);
 }
 
 .empty-message {

tensorboard/webapp/metrics/views/card_renderer/vis_selected_time_clipped_component.scss

@@ -12,16 +12,17 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 :host {
-  color: mat-color(map-get($tb-theme, warn), 700);
+  color: mat.get-color-from-palette(map-get($tb-theme, warn), 700);
   height: 1em;
   line-height: 0;
   width: 1em;
 
   @include tb-dark-theme {
-    color: mat-color(map-get($tb-dark-theme, warn), 700);
+    color: mat.get-color-from-palette(map-get($tb-dark-theme, warn), 700);
   }
 
   mat-icon {

tensorboard/webapp/metrics/views/main_view/BUILD

@@ -6,19 +6,22 @@ tf_sass_binary(
     name = "main_view_styles",
     src = "main_view_component.scss",
     deps = [
+        "//tensorboard/webapp:angular_material_theming",
         "//tensorboard/webapp/metrics/views:metrics_common_styles",
     ],
 )
 
 tf_sass_binary(
     name = "filter_input_component_styles",
     src = "filter_input_component.scss",
+    deps = ["//tensorboard/webapp:angular_material_theming"],
 )
 
 tf_sass_binary(
     name = "filtered_view_component_styles",
     src = "filtered_view_component.scss",
     deps = [
+        "//tensorboard/webapp:angular_material_theming",
         "//tensorboard/webapp/metrics/views:metrics_common_styles",
     ],
 )
@@ -27,6 +30,7 @@ tf_sass_binary(
     name = "pinned_view_component_styles",
     src = "pinned_view_component.scss",
     deps = [
+        "//tensorboard/webapp:angular_material_theming",
         "//tensorboard/webapp/metrics/views:metrics_common_styles",
     ],
 )

tensorboard/webapp/metrics/views/main_view/filter_input_component.scss

@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 .tag-filter {
@@ -27,7 +28,7 @@ tb-filter-input {
   @include tb-theme-foreground-prop(color, text);
 
   &:not(.valid) {
-    $_error-color: mat-color($tb-warn, 800);
+    $_error-color: mat.get-color-from-palette($tb-warn, 800);
 
     color: $_error-color;
 

tensorboard/webapp/metrics/views/main_view/main_view_component.scss

@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 @import '../common';
 
@@ -82,7 +83,7 @@ limitations under the License.
 }
 
 .main {
-  background-color: mat-color($tf-slate, 200);
+  background-color: mat.get-color-from-palette($tf-slate, 200);
   flex: 1 1;
   display: flex;
   flex-direction: column;
@@ -138,16 +139,16 @@ limitations under the License.
 
 /** TODO(psybuzz): consider making a tb-button instead. */
 :host .settings-button {
-  color: mat-color($tb-foreground, secondary-text);
+  color: mat.get-color-from-palette($tb-foreground, secondary-text);
   display: inline-flex;
 
   @include tb-dark-theme {
-    color: mat-color($tb-dark-foreground, secondary-text);
+    color: mat.get-color-from-palette($tb-dark-foreground, secondary-text);
   }
 
   &.checked {
     @include tb-theme-background-prop(background-color, selected-button);
-    border-color: mat-color($mat-gray, 300);
+    border-color: mat.get-color-from-palette(mat.$gray-palette, 300);
   }
 
   ::ng-deep .mat-button-wrapper {

tensorboard/webapp/metrics/views/main_view/pinned_view_component.scss

@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 @import '../common';
 
@@ -45,7 +46,7 @@ mat-icon {
 
 .new-card-pinned {
   animation: pinned-view-fade-out 3s linear;
-  background: mat-color($mat-red, 500);
+  background: mat.get-color-from-palette(mat.$red-palette, 500);
   border-radius: 5px;
   color: #fff;
   display: inline-block;

tensorboard/webapp/metrics/views/metrics_container.scss

@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 :host {
@@ -23,8 +24,11 @@ limitations under the License.
 }
 
 .notice {
-  background-color: rgba(mat-color($mat-yellow, 200), 0.85);
-  border-bottom: 1px solid mat-color($mat-yellow, 500);
+  background-color: rgba(
+    mat.get-color-from-palette(mat.$yellow-palette, 200),
+    0.85
+  );
+  border-bottom: 1px solid mat.get-color-from-palette(mat.$yellow-palette, 500);
   color: map-get($tb-foreground, text);
   display: block;
   flex: 0 0;
@@ -36,14 +40,14 @@ tb-dashboard-layout {
 }
 
 nav {
-  background-color: mat-color($tb-background, background);
-  border-right: 1px solid mat-color($tb-foreground, border);
+  background-color: mat.get-color-from-palette($tb-background, background);
+  border-right: 1px solid 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-color($tb-dark-foreground, border);
+    border-right-color: mat.get-color-from-palette($tb-dark-foreground, border);
   }
 }
 

tensorboard/webapp/metrics/views/right_pane/BUILD

@@ -5,6 +5,7 @@ package(default_visibility = ["//tensorboard:internal"])
 tf_sass_binary(
     name = "settings_view_styles",
     src = "settings_view_component.scss",
+    deps = ["//tensorboard/webapp:angular_material_theming"],
 )
 
 tf_ng_module(

tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss

@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 :host {
@@ -54,7 +55,7 @@ section .control-row:not(:last-child) {
 
   .slider-input {
     background-color: inherit;
-    border: 1px solid mat-color($tf-slate, 500);
+    border: 1px solid mat.get-color-from-palette($tf-slate, 500);
     border-radius: 2px;
     box-sizing: border-box;
     color: inherit;
@@ -63,7 +64,7 @@ section .control-row:not(:last-child) {
     padding: 0 4px;
 
     @include tb-dark-theme {
-      border-color: mat-color($tf-slate, 700);
+      border-color: mat.get-color-from-palette($tf-slate, 700);
     }
   }
 }

tensorboard/webapp/notification_center/_views/BUILD

@@ -7,6 +7,7 @@ licenses(["notice"])
 tf_sass_binary(
     name = "notification_center_styles",
     src = "notification_center_component.scss",
+    deps = ["//tensorboard/webapp:angular_material_theming"],
 )
 
 tf_ng_module(

tensorboard/webapp/notification_center/_views/notification_center_component.scss

@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+@use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 .notification-icon-button {
@@ -20,7 +21,7 @@ limitations under the License.
 
 .red-dot {
   $_dim: 10px;
-  background-color: mat-color($mat-red, 700);
+  background-color: mat.get-color-from-palette(mat.$red-palette, 700);
   border-radius: $_dim * 0.5;
   height: $_dim;
   position: absolute;
@@ -49,7 +50,7 @@ limitations under the License.
 }
 
 .category-icon {
-  color: mat-color($mat-blue, 700);
+  color: mat.get-color-from-palette(mat.$blue-palette, 700);
   height: 15px;
   margin-right: 6px;
   vertical-align: middle;

tensorboard/webapp/plugins/npmi/views/annotations_list/BUILD

@@ -7,6 +7,7 @@ licenses(["notice"])
 tf_sass_binary(
     name = "annotations_list_component_styles",
     src = "annotations_list_component.scss",
+    deps = ["//tensorboard/webapp:angular_material_theming"],
 )
 
 tf_ng_module(

tensorboard/webapp/plugins/npmi/views/annotations_list/annotation/BUILD

@@ -7,6 +7,7 @@ licenses(["notice"])
 tf_sass_binary(
     name = "annotation_component_styles",
     src = "annotation_component.scss",
+    deps = ["//tensorboard/webapp:angular_material_theming"],
 )
 
 tf_ng_module(