Skip to content

Commit 90b5a87

Browse files
andrewseguinandrewseguin
authored
chore: Update Angular Material style imports to @use (#5421)
Updates the stylesheet imports of Angular Material to use the non-deprecated import paths Ambient symbols like `mat-color` is now deprecated and it requires more explicit import with `use` statement.
1 parent 9802bfe commit 90b5a87

File tree

64 files changed

+184
-106
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+184
-106
lines changed

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,8 @@ licenses(["notice"])
66

77
tf_sass_library(
88
name = "style_lib",
9-
srcs = ["_lib.scss"],
9+
srcs = [
10+
"_lib.scss",
11+
"//tensorboard/webapp:angular_material_theming",
12+
],
1013
)

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,10 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1212
See the License for the specific language governing permissions and
1313
limitations under the License.
1414
==============================================================================*/
15+
@use '@angular/material' as mat;
1516

1617
@mixin debugger-op-type {
17-
background-color: mat-color($mat-blue-grey, 50);
18+
background-color: mat.get-color-from-palette(mat.$blue-grey-palette, 50);
1819
@include tb-theme-foreground-prop(border, border, 1px solid);
1920
border-radius: 4px;
2021
font-family: 'Roboto Mono', monospace;
@@ -25,13 +26,13 @@ limitations under the License.
2526
width: max-content;
2627

2728
@include tb-dark-theme {
28-
background-color: mat-color($mat-blue-grey, 700);
29+
background-color: mat.get-color-from-palette(mat.$blue-grey-palette, 700);
2930
}
3031
}
3132

3233
@mixin debugger-highlight-background {
3334
background-color: #fff099;
3435
@include tb-dark-theme {
35-
background-color: mat-color($mat-orange, 900);
36+
background-color: mat.get-color-from-palette(mat.$orange-palette, 900);
3637
}
3738
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ licenses(["notice"])
77
tf_sass_binary(
88
name = "execution_data_styles",
99
src = "execution_data_component.scss",
10+
deps = ["//tensorboard/webapp:angular_material_theming"],
1011
)
1112

1213
tf_ng_module(

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1212
See the License for the specific language governing permissions and
1313
limitations under the License.
1414
==============================================================================*/
15+
@use '@angular/material' as mat;
1516
@import 'tensorboard/webapp/theme/tb_theme';
1617

1718
.debug-tensor-values-table {
@@ -44,15 +45,15 @@ limitations under the License.
4445
}
4546

4647
.focus-execution-container {
47-
background-color: mat-color($mat-orange, 200);
48+
background-color: mat.get-color-from-palette(mat.$orange-palette, 200);
4849
border-radius: 4px;
4950
font-size: 12px;
5051
height: 120px;
5152
padding: 5px;
5253
width: 360px;
5354

5455
@include tb-dark-theme {
55-
background-color: mat-color($mat-orange, 900);
56+
background-color: mat.get-color-from-palette(mat.$orange-palette, 900);
5657
}
5758
}
5859

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1212
See the License for the specific language governing permissions and
1313
limitations under the License.
1414
==============================================================================*/
15+
@use '@angular/material' as mat;
1516
@import 'tensorboard/webapp/theme/tb_theme';
1617
@import '../common/lib';
1718

@@ -31,7 +32,7 @@ limitations under the License.
3132
text-align: right;
3233
width: 200px;
3334
@include tb-dark-theme {
34-
box-shadow: 1px 3px mat-color($mat-gray, 600);
35+
box-shadow: 1px 3px mat.get-color-from-palette(mat.$gray-palette, 600);
3536
}
3637
}
3738

‎tensorboard/webapp/BUILD

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,11 +175,11 @@ tf_js_binary(
175175
entry_point = "main_prod.ts",
176176
deps = [
177177
":ng_main",
178+
"//tensorboard/webapp:angular_material_theming",
178179
"//tensorboard/webapp/angular:expect_angular_material_tabs",
179180
"//tensorboard/webapp/angular:expect_angular_material_toolbar",
180181
"@npm//@angular/common",
181182
"@npm//@angular/core",
182-
"@npm//@angular/material",
183183
"@npm//@angular/platform-browser",
184184
"@npm//@ngrx/store",
185185
"@npm//rxjs",

‎tensorboard/webapp/metrics/views/BUILD

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ tf_sass_library(
1212
tf_sass_binary(
1313
name = "metrics_container_styles",
1414
src = "metrics_container.scss",
15+
deps = ["//tensorboard/webapp:angular_material_theming"],
1516
)
1617

1718
tf_sass_binary(

‎tensorboard/webapp/metrics/views/card_renderer/BUILD

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,7 @@ tf_sass_binary(
121121
name = "image_card_styles",
122122
src = "image_card_component.scss",
123123
deps = [
124+
"//tensorboard/webapp:angular_material_theming",
124125
"//tensorboard/webapp/metrics/views:metrics_common_styles",
125126
],
126127
)
@@ -190,6 +191,7 @@ tf_ng_module(
190191
tf_sass_binary(
191192
name = "vis_selected_time_clipped_styles",
192193
src = "vis_selected_time_clipped_component.scss",
194+
deps = ["//tensorboard/webapp:angular_material_theming"],
193195
)
194196

195197
tf_ng_module(

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1212
See the License for the specific language governing permissions and
1313
limitations under the License.
1414
==============================================================================*/
15+
@use '@angular/material' as mat;
1516
@import 'tensorboard/webapp/theme/tb_theme';
1617
@import '../common';
1718

@@ -142,7 +143,7 @@ $_title-to-heading-gap: 12px;
142143
}
143144

144145
:host ::ng-deep .mat-slider-min-value .mat-slider-thumb {
145-
background-color: mat-color($tb-primary);
146+
background-color: mat.get-color-from-palette($tb-primary);
146147
}
147148

148149
.empty-message {

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,17 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1212
See the License for the specific language governing permissions and
1313
limitations under the License.
1414
==============================================================================*/
15+
@use '@angular/material' as mat;
1516
@import 'tensorboard/webapp/theme/tb_theme';
1617

1718
:host {
18-
color: mat-color(map-get($tb-theme, warn), 700);
19+
color: mat.get-color-from-palette(map-get($tb-theme, warn), 700);
1920
height: 1em;
2021
line-height: 0;
2122
width: 1em;
2223

2324
@include tb-dark-theme {
24-
color: mat-color(map-get($tb-dark-theme, warn), 700);
25+
color: mat.get-color-from-palette(map-get($tb-dark-theme, warn), 700);
2526
}
2627

2728
mat-icon {

‎tensorboard/webapp/metrics/views/main_view/BUILD

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,22 @@ tf_sass_binary(
66
name = "main_view_styles",
77
src = "main_view_component.scss",
88
deps = [
9+
"//tensorboard/webapp:angular_material_theming",
910
"//tensorboard/webapp/metrics/views:metrics_common_styles",
1011
],
1112
)
1213

1314
tf_sass_binary(
1415
name = "filter_input_component_styles",
1516
src = "filter_input_component.scss",
17+
deps = ["//tensorboard/webapp:angular_material_theming"],
1618
)
1719

1820
tf_sass_binary(
1921
name = "filtered_view_component_styles",
2022
src = "filtered_view_component.scss",
2123
deps = [
24+
"//tensorboard/webapp:angular_material_theming",
2225
"//tensorboard/webapp/metrics/views:metrics_common_styles",
2326
],
2427
)
@@ -27,6 +30,7 @@ tf_sass_binary(
2730
name = "pinned_view_component_styles",
2831
src = "pinned_view_component.scss",
2932
deps = [
33+
"//tensorboard/webapp:angular_material_theming",
3034
"//tensorboard/webapp/metrics/views:metrics_common_styles",
3135
],
3236
)

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1212
See the License for the specific language governing permissions and
1313
limitations under the License.
1414
==============================================================================*/
15+
@use '@angular/material' as mat;
1516
@import 'tensorboard/webapp/theme/tb_theme';
1617

1718
.tag-filter {
@@ -27,7 +28,7 @@ tb-filter-input {
2728
@include tb-theme-foreground-prop(color, text);
2829

2930
&:not(.valid) {
30-
$_error-color: mat-color($tb-warn, 800);
31+
$_error-color: mat.get-color-from-palette($tb-warn, 800);
3132

3233
color: $_error-color;
3334

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1212
See the License for the specific language governing permissions and
1313
limitations under the License.
1414
==============================================================================*/
15+
@use '@angular/material' as mat;
1516
@import 'tensorboard/webapp/theme/tb_theme';
1617
@import '../common';
1718

@@ -82,7 +83,7 @@ limitations under the License.
8283
}
8384

8485
.main {
85-
background-color: mat-color($tf-slate, 200);
86+
background-color: mat.get-color-from-palette($tf-slate, 200);
8687
flex: 1 1;
8788
display: flex;
8889
flex-direction: column;
@@ -138,16 +139,16 @@ limitations under the License.
138139

139140
/** TODO(psybuzz): consider making a tb-button instead. */
140141
:host .settings-button {
141-
color: mat-color($tb-foreground, secondary-text);
142+
color: mat.get-color-from-palette($tb-foreground, secondary-text);
142143
display: inline-flex;
143144

144145
@include tb-dark-theme {
145-
color: mat-color($tb-dark-foreground, secondary-text);
146+
color: mat.get-color-from-palette($tb-dark-foreground, secondary-text);
146147
}
147148

148149
&.checked {
149150
@include tb-theme-background-prop(background-color, selected-button);
150-
border-color: mat-color($mat-gray, 300);
151+
border-color: mat.get-color-from-palette(mat.$gray-palette, 300);
151152
}
152153

153154
::ng-deep .mat-button-wrapper {

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1212
See the License for the specific language governing permissions and
1313
limitations under the License.
1414
==============================================================================*/
15+
@use '@angular/material' as mat;
1516
@import 'tensorboard/webapp/theme/tb_theme';
1617
@import '../common';
1718

@@ -45,7 +46,7 @@ mat-icon {
4546

4647
.new-card-pinned {
4748
animation: pinned-view-fade-out 3s linear;
48-
background: mat-color($mat-red, 500);
49+
background: mat.get-color-from-palette(mat.$red-palette, 500);
4950
border-radius: 5px;
5051
color: #fff;
5152
display: inline-block;

‎tensorboard/webapp/metrics/views/metrics_container.scss

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1212
See the License for the specific language governing permissions and
1313
limitations under the License.
1414
==============================================================================*/
15+
@use '@angular/material' as mat;
1516
@import 'tensorboard/webapp/theme/tb_theme';
1617

1718
:host {
@@ -23,8 +24,11 @@ limitations under the License.
2324
}
2425

2526
.notice {
26-
background-color: rgba(mat-color($mat-yellow, 200), 0.85);
27-
border-bottom: 1px solid mat-color($mat-yellow, 500);
27+
background-color: rgba(
28+
mat.get-color-from-palette(mat.$yellow-palette, 200),
29+
0.85
30+
);
31+
border-bottom: 1px solid mat.get-color-from-palette(mat.$yellow-palette, 500);
2832
color: map-get($tb-foreground, text);
2933
display: block;
3034
flex: 0 0;
@@ -36,14 +40,14 @@ tb-dashboard-layout {
3640
}
3741

3842
nav {
39-
background-color: mat-color($tb-background, background);
40-
border-right: 1px solid mat-color($tb-foreground, border);
43+
background-color: mat.get-color-from-palette($tb-background, background);
44+
border-right: 1px solid mat.get-color-from-palette($tb-foreground, border);
4145
flex: none;
4246
width: 340px;
4347

4448
@include tb-dark-theme {
4549
background-color: map-get($tb-dark-background, background);
46-
border-right-color: mat-color($tb-dark-foreground, border);
50+
border-right-color: mat.get-color-from-palette($tb-dark-foreground, border);
4751
}
4852
}
4953

‎tensorboard/webapp/metrics/views/right_pane/BUILD

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ package(default_visibility = ["//tensorboard:internal"])
55
tf_sass_binary(
66
name = "settings_view_styles",
77
src = "settings_view_component.scss",
8+
deps = ["//tensorboard/webapp:angular_material_theming"],
89
)
910

1011
tf_ng_module(

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1212
See the License for the specific language governing permissions and
1313
limitations under the License.
1414
==============================================================================*/
15+
@use '@angular/material' as mat;
1516
@import 'tensorboard/webapp/theme/tb_theme';
1617

1718
:host {
@@ -54,7 +55,7 @@ section .control-row:not(:last-child) {
5455

5556
.slider-input {
5657
background-color: inherit;
57-
border: 1px solid mat-color($tf-slate, 500);
58+
border: 1px solid mat.get-color-from-palette($tf-slate, 500);
5859
border-radius: 2px;
5960
box-sizing: border-box;
6061
color: inherit;
@@ -63,7 +64,7 @@ section .control-row:not(:last-child) {
6364
padding: 0 4px;
6465

6566
@include tb-dark-theme {
66-
border-color: mat-color($tf-slate, 700);
67+
border-color: mat.get-color-from-palette($tf-slate, 700);
6768
}
6869
}
6970
}

‎tensorboard/webapp/notification_center/_views/BUILD

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ licenses(["notice"])
77
tf_sass_binary(
88
name = "notification_center_styles",
99
src = "notification_center_component.scss",
10+
deps = ["//tensorboard/webapp:angular_material_theming"],
1011
)
1112

1213
tf_ng_module(

‎tensorboard/webapp/notification_center/_views/notification_center_component.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1212
See the License for the specific language governing permissions and
1313
limitations under the License.
1414
==============================================================================*/
15+
@use '@angular/material' as mat;
1516
@import 'tensorboard/webapp/theme/tb_theme';
1617

1718
.notification-icon-button {
@@ -20,7 +21,7 @@ limitations under the License.
2021

2122
.red-dot {
2223
$_dim: 10px;
23-
background-color: mat-color($mat-red, 700);
24+
background-color: mat.get-color-from-palette(mat.$red-palette, 700);
2425
border-radius: $_dim * 0.5;
2526
height: $_dim;
2627
position: absolute;
@@ -49,7 +50,7 @@ limitations under the License.
4950
}
5051

5152
.category-icon {
52-
color: mat-color($mat-blue, 700);
53+
color: mat.get-color-from-palette(mat.$blue-palette, 700);
5354
height: 15px;
5455
margin-right: 6px;
5556
vertical-align: middle;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ licenses(["notice"])
77
tf_sass_binary(
88
name = "annotations_list_component_styles",
99
src = "annotations_list_component.scss",
10+
deps = ["//tensorboard/webapp:angular_material_theming"],
1011
)
1112

1213
tf_ng_module(

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ licenses(["notice"])
77
tf_sass_binary(
88
name = "annotation_component_styles",
99
src = "annotation_component.scss",
10+
deps = ["//tensorboard/webapp:angular_material_theming"],
1011
)
1112

1213
tf_ng_module(

0 commit comments

Comments
 (0)