Skip to content

Commit 651fc4f

Browse files
cdavalos7cdavalos7
authored
Angular Materials 18 - Remove redundancy (#7127)
## Motivation for features / changes - Match the internal/upstream source. File bodies become identical to the internal version. - Follow the Angular Material 18 recommendation a single @use '@angular/material' as mat; with mat.m2-* calls is the canonical way to keep an M2-based theme. - Remove dead redundancy, three aliases pointing at one module is noise that makes the theme harder to read. ## Technical description of changes - Replaced @use '@angular/material' as matm2; and @use '@angular/material' as matm2var; with one @use '@angular/material' as mat; per file. - Updated all symbol uses to match: matm2.* → mat.* and matm2var.* → mat.*. The m2- prefix on each symbol stays the same. Because all three old names already pointed to the same module, the compiled CSS does not change at all — this is only a namespace/readability cleanup, with no change in behavior or look.
1 parent 84dce3a commit 651fc4f

30 files changed

Lines changed: 153 additions & 221 deletions

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,11 @@ 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 matm2;
16-
@use '@angular/material' as matm2var;
15+
@use '@angular/material' as mat;
1716

1817
@mixin debugger-op-type {
19-
background-color: matm2.m2-get-color-from-palette(
20-
matm2var.$m2-blue-grey-palette,
18+
background-color: mat.m2-get-color-from-palette(
19+
mat.$m2-blue-grey-palette,
2120
50
2221
);
2322
@include tb-theme-foreground-prop(border, border, 1px solid);
@@ -30,8 +29,8 @@ limitations under the License.
3029
width: max-content;
3130

3231
@include tb-dark-theme {
33-
background-color: matm2.m2-get-color-from-palette(
34-
matm2var.$m2-blue-grey-palette,
32+
background-color: mat.m2-get-color-from-palette(
33+
mat.$m2-blue-grey-palette,
3534
700
3635
);
3736
}
@@ -41,8 +40,8 @@ limitations under the License.
4140
background-color: #fff099;
4241

4342
@include tb-dark-theme {
44-
background-color: matm2.m2-get-color-from-palette(
45-
matm2var.$m2-orange-palette,
43+
background-color: mat.m2-get-color-from-palette(
44+
mat.$m2-orange-palette,
4645
900
4746
);
4847
}

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

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +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 matm2;
16-
@use '@angular/material' as matm2var;
15+
@use '@angular/material' as mat;
1716
@import 'tensorboard/webapp/theme/tb_theme';
1817

1918
.debug-tensor-values-table {
@@ -46,19 +45,16 @@ limitations under the License.
4645
}
4746

4847
.focus-execution-container {
49-
background-color: matm2.m2-get-color-from-palette(
50-
matm2var.$m2-orange-palette,
51-
200
52-
);
48+
background-color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 200);
5349
border-radius: 4px;
5450
font-size: 12px;
5551
height: 120px;
5652
padding: 5px;
5753
width: 360px;
5854

5955
@include tb-dark-theme {
60-
background-color: matm2.m2-get-color-from-palette(
61-
matm2var.$m2-orange-palette,
56+
background-color: mat.m2-get-color-from-palette(
57+
mat.$m2-orange-palette,
6258
900
6359
);
6460
}

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +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 matm2;
16-
@use '@angular/material' as matm2var;
15+
@use '@angular/material' as mat;
1716
@import 'tensorboard/webapp/theme/tb_theme';
1817
@import '../common/lib';
1918

@@ -32,7 +31,7 @@ limitations under the License.
3231
padding: 2px 6px;
3332
text-align: right;
3433
width: 200px;
35-
$grey-600: matm2.m2-get-color-from-palette(matm2var.$m2-grey-palette, 600);
34+
$grey-600: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 600);
3635

3736
@include tb-dark-theme {
3837
box-shadow: 1px 3px $grey-600;

‎tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,19 @@ 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 matm2;
15+
@use '@angular/material' as mat;
1616
@import 'tensorboard/webapp/theme/tb_theme';
1717

1818
.message {
1919
.warning {
20-
color: matm2.m2-get-color-from-palette($tb-warn);
20+
color: mat.m2-get-color-from-palette($tb-warn);
2121
}
2222

2323
margin-bottom: 16px;
2424
}
2525

2626
.note-1 {
27-
color: matm2.m2-get-color-from-palette($tb-accent);
27+
color: mat.m2-get-color-from-palette($tb-accent);
2828
}
2929

3030
.scrolling-page {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +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 matm2;
15+
@use '@angular/material' as mat;
1616
@import 'tensorboard/webapp/theme/tb_theme';
1717
@import '../common';
1818

@@ -153,7 +153,7 @@ $_title-to-heading-gap: 12px;
153153
}
154154

155155
:host ::ng-deep .mat-slider-min-value .mat-slider-thumb {
156-
background-color: matm2.m2-get-color-from-palette($tb-primary);
156+
background-color: mat.m2-get-color-from-palette($tb-primary);
157157
}
158158

159159
:host ::ng-deep .hide-slider.mat-slider-horizontal .mat-slider-track-wrapper {

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

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +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 matm2;
15+
@use '@angular/material' as mat;
1616
@import 'tensorboard/webapp/theme/tb_theme';
1717
@import '../common';
1818

@@ -205,13 +205,10 @@ $_data_table_initial_height: 100px;
205205
align-items: center;
206206

207207
.expand-button {
208-
color: matm2.m2-get-color-from-palette($tb-foreground, secondary-text);
208+
color: mat.m2-get-color-from-palette($tb-foreground, secondary-text);
209209

210210
@include tb-dark-theme {
211-
color: matm2.m2-get-color-from-palette(
212-
$tb-dark-foreground,
213-
secondary-text
214-
);
211+
color: mat.m2-get-color-from-palette($tb-dark-foreground, secondary-text);
215212
background-color: map-get($tb-dark-background, background);
216213
}
217214
}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,21 @@ 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 matm2;
15+
@use '@angular/material' as mat;
1616
@import 'tensorboard/webapp/theme/tb_theme';
1717

1818
:host {
19-
color: matm2.m2-get-color-from-palette(
20-
map-get(matm2.m2-get-color-config($tb-theme), warn),
19+
color: mat.m2-get-color-from-palette(
20+
map-get(mat.m2-get-color-config($tb-theme), warn),
2121
700
2222
);
2323
height: 1em;
2424
line-height: 0;
2525
display: inline-flex;
2626

2727
@include tb-dark-theme {
28-
color: matm2.m2-get-color-from-palette(
29-
map-get(matm2.m2-get-color-config($tb-dark-theme), warn),
28+
color: mat.m2-get-color-from-palette(
29+
map-get(mat.m2-get-color-config($tb-dark-theme), warn),
3030
700
3131
);
3232
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +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 matm2;
15+
@use '@angular/material' as mat;
1616
@import 'tensorboard/webapp/theme/tb_theme';
1717

1818
.tag-filter {
@@ -28,7 +28,7 @@ tb-filter-input {
2828
@include tb-theme-foreground-prop(color, text);
2929

3030
&:not(.valid) {
31-
$_error-color: matm2.m2-get-color-from-palette($tb-warn, 800);
31+
$_error-color: mat.m2-get-color-from-palette($tb-warn, 800);
3232

3333
color: $_error-color;
3434

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

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +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 matm2;
16-
@use '@angular/material' as matm2var;
15+
@use '@angular/material' as mat;
1716
@import 'tensorboard/webapp/theme/tb_theme';
1817
@import '../common';
1918

@@ -87,7 +86,7 @@ mat-button-toggle-group.filter-view {
8786
.main,
8887
.sidebar {
8988
contain: strict;
90-
background-color: matm2.m2-get-color-from-palette($tb-background, background);
89+
background-color: mat.m2-get-color-from-palette($tb-background, background);
9190
overflow-x: hidden;
9291
overflow-y: auto;
9392
will-change: transform, scroll-position;
@@ -98,7 +97,7 @@ mat-button-toggle-group.filter-view {
9897
}
9998

10099
.main {
101-
background-color: matm2.m2-get-color-from-palette($tf-slate, 200);
100+
background-color: mat.m2-get-color-from-palette($tf-slate, 200);
102101
flex: 1 1;
103102
display: flex;
104103
flex-direction: column;
@@ -154,19 +153,16 @@ mat-button-toggle-group.filter-view {
154153

155154
/** TODO(psybuzz): consider making a tb-button instead. */
156155
:host .settings-button {
157-
color: matm2.m2-get-color-from-palette($tb-foreground, secondary-text);
156+
color: mat.m2-get-color-from-palette($tb-foreground, secondary-text);
158157
display: inline-flex;
159158

160159
@include tb-dark-theme {
161-
color: matm2.m2-get-color-from-palette($tb-dark-foreground, secondary-text);
160+
color: mat.m2-get-color-from-palette($tb-dark-foreground, secondary-text);
162161
}
163162

164163
&.checked {
165164
@include tb-theme-background-prop(background-color, selected-button);
166-
border-color: matm2.m2-get-color-from-palette(
167-
matm2var.$m2-grey-palette,
168-
300
169-
);
165+
border-color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 300);
170166
}
171167

172168
::ng-deep .mat-button-wrapper {
@@ -180,7 +176,7 @@ mat-button-toggle-group.filter-view {
180176
}
181177

182178
.slide-out-menu {
183-
background-color: matm2.m2-get-color-from-palette($tb-background, background);
179+
background-color: mat.m2-get-color-from-palette($tb-background, background);
184180
// Make the menu the full height minus the size of the toolbar.
185181
height: calc(100% - 49px);
186182
position: absolute;

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +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 matm2;
16-
@use '@angular/material' as matm2var;
15+
@use '@angular/material' as mat;
1716
@import 'tensorboard/webapp/theme/tb_theme';
1817
@import '../common';
1918

@@ -66,7 +65,7 @@ mat-icon {
6665

6766
.new-card-pinned {
6867
animation: pinned-view-fade-out 3s linear;
69-
background: matm2.m2-get-color-from-palette(matm2var.$m2-red-palette, 500);
68+
background: mat.m2-get-color-from-palette(mat.$m2-red-palette, 500);
7069
border-radius: 5px;
7170
color: #fff;
7271
display: inline-block;

0 commit comments

Comments
 (0)