Skip to content

Angular Materials 18 - Remove redundancy #7127

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cdavalos7 merged 8 commits into from
Jun 17, 2026
Merged

Angular Materials 18 - Remove redundancy #7127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e84b463
Angular upgrade 18 changes. Returned files to original state before r…
cdavalos7 Jun 11, 2026
619752c
Remove unused @angular/material aliases from SCSS files
cdavalos7 Jun 11, 2026
80da25b
Fixed linter and returned needed variable
cdavalos7 Jun 11, 2026
ff8edb7
Updated Angular material prefixes to match internal version and avoid…
cdavalos7 Jun 16, 2026
36b1741
Merge branch 'master' into feature/upgrade17-18
cdavalos7 Jun 16, 2026
24a0129
Clarify comment about imports in scss file
cdavalos7 Jun 17, 2026
d508c35
Removed unnecessary dependency for angular material
cdavalos7 Jun 17, 2026
3594d38
Removed unused dependency in component. Angular materials is not call…
cdavalos7 Jun 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 7 additions & 8 deletions tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/_lib.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,11 @@ 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 matm2;
@use '@angular/material' as matm2var;
@use '@angular/material' as mat;

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

@include tb-dark-theme {
background-color: matm2.m2-get-color-from-palette(
matm2var.$m2-blue-grey-palette,
background-color: mat.m2-get-color-from-palette(
mat.$m2-blue-grey-palette,
700
);
}
Expand All @@ -41,8 +40,8 @@ limitations under the License.
background-color: #fff099;

@include tb-dark-theme {
background-color: matm2.m2-get-color-from-palette(
matm2var.$m2-orange-palette,
background-color: mat.m2-get-color-from-palette(
mat.$m2-orange-palette,
900
);
}
Expand Down
12 changes: 4 additions & 8 deletions ...gins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +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 matm2;
@use '@angular/material' as matm2var;
@use '@angular/material' as mat;
@import 'tensorboard/webapp/theme/tb_theme';

.debug-tensor-values-table {
Expand Down Expand Up @@ -46,19 +45,16 @@ limitations under the License.
}

.focus-execution-container {
background-color: matm2.m2-get-color-from-palette(
matm2var.$m2-orange-palette,
200
);
background-color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, 200);
border-radius: 4px;
font-size: 12px;
height: 120px;
padding: 5px;
width: 360px;

@include tb-dark-theme {
background-color: matm2.m2-get-color-from-palette(
matm2var.$m2-orange-palette,
background-color: mat.m2-get-color-from-palette(
mat.$m2-orange-palette,
900
);
}
Expand Down
5 changes: 2 additions & 3 deletions tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_op_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +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 matm2;
@use '@angular/material' as matm2var;
@use '@angular/material' as mat;
@import 'tensorboard/webapp/theme/tb_theme';
@import '../common/lib';

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

@include tb-dark-theme {
box-shadow: 1px 3px $grey-600;
Expand Down
6 changes: 3 additions & 3 deletions tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,19 @@ 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 matm2;
@use '@angular/material' as mat;
@import 'tensorboard/webapp/theme/tb_theme';

.message {
.warning {
color: matm2.m2-get-color-from-palette($tb-warn);
color: mat.m2-get-color-from-palette($tb-warn);
}

margin-bottom: 16px;
}

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

.scrolling-page {
Expand Down
4 changes: 2 additions & 2 deletions tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +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 matm2;
@use '@angular/material' as mat;
@import 'tensorboard/webapp/theme/tb_theme';
@import '../common';

Expand Down Expand Up @@ -153,7 +153,7 @@ $_title-to-heading-gap: 12px;
}

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

:host ::ng-deep .hide-slider.mat-slider-horizontal .mat-slider-track-wrapper {
Expand Down
9 changes: 3 additions & 6 deletions tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +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 matm2;
@use '@angular/material' as mat;
@import 'tensorboard/webapp/theme/tb_theme';
@import '../common';

Expand Down Expand Up @@ -205,13 +205,10 @@ $_data_table_initial_height: 100px;
align-items: center;

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

@include tb-dark-theme {
color: matm2.m2-get-color-from-palette(
$tb-dark-foreground,
secondary-text
);
color: mat.m2-get-color-from-palette($tb-dark-foreground, secondary-text);
background-color: map-get($tb-dark-background, background);
}
}
Expand Down
10 changes: 5 additions & 5 deletions ...board/webapp/metrics/views/card_renderer/vis_linked_time_selection_warning_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,21 @@ 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 matm2;
@use '@angular/material' as mat;
@import 'tensorboard/webapp/theme/tb_theme';

:host {
color: matm2.m2-get-color-from-palette(
map-get(matm2.m2-get-color-config($tb-theme), warn),
color: mat.m2-get-color-from-palette(
map-get(mat.m2-get-color-config($tb-theme), warn),
700
);
height: 1em;
line-height: 0;
display: inline-flex;

@include tb-dark-theme {
color: matm2.m2-get-color-from-palette(
map-get(matm2.m2-get-color-config($tb-dark-theme), warn),
color: mat.m2-get-color-from-palette(
map-get(mat.m2-get-color-config($tb-dark-theme), warn),
700
);
}
Expand Down
4 changes: 2 additions & 2 deletions tensorboard/webapp/metrics/views/main_view/filter_input_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +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 matm2;
@use '@angular/material' as mat;
@import 'tensorboard/webapp/theme/tb_theme';

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

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

color: $_error-color;

Expand Down
18 changes: 7 additions & 11 deletions tensorboard/webapp/metrics/views/main_view/main_view_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +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 matm2;
@use '@angular/material' as matm2var;
@use '@angular/material' as mat;
@import 'tensorboard/webapp/theme/tb_theme';
@import '../common';

Expand Down Expand Up @@ -87,7 +86,7 @@ mat-button-toggle-group.filter-view {
.main,
.sidebar {
contain: strict;
background-color: matm2.m2-get-color-from-palette($tb-background, background);
background-color: mat.m2-get-color-from-palette($tb-background, background);
overflow-x: hidden;
overflow-y: auto;
will-change: transform, scroll-position;
Expand All @@ -98,7 +97,7 @@ mat-button-toggle-group.filter-view {
}

.main {
background-color: matm2.m2-get-color-from-palette($tf-slate, 200);
background-color: mat.m2-get-color-from-palette($tf-slate, 200);
flex: 1 1;
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -154,19 +153,16 @@ mat-button-toggle-group.filter-view {

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

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

&.checked {
@include tb-theme-background-prop(background-color, selected-button);
border-color: matm2.m2-get-color-from-palette(
matm2var.$m2-grey-palette,
300
);
border-color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 300);
}

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

.slide-out-menu {
background-color: matm2.m2-get-color-from-palette($tb-background, background);
background-color: mat.m2-get-color-from-palette($tb-background, background);
// Make the menu the full height minus the size of the toolbar.
height: calc(100% - 49px);
position: absolute;
Expand Down
5 changes: 2 additions & 3 deletions tensorboard/webapp/metrics/views/main_view/pinned_view_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +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 matm2;
@use '@angular/material' as matm2var;
@use '@angular/material' as mat;
@import 'tensorboard/webapp/theme/tb_theme';
@import '../common';

Expand Down Expand Up @@ -66,7 +65,7 @@ mat-icon {

.new-card-pinned {
animation: pinned-view-fade-out 3s linear;
background: matm2.m2-get-color-from-palette(matm2var.$m2-red-palette, 500);
background: mat.m2-get-color-from-palette(mat.$m2-red-palette, 500);
border-radius: 5px;
color: #fff;
display: inline-block;
Expand Down
16 changes: 6 additions & 10 deletions tensorboard/webapp/metrics/views/metrics_container.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +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 matm2;
@use '@angular/material' as matm2var;
@use '@angular/material' as mat;
@import 'tensorboard/webapp/theme/tb_theme';

:host {
Expand All @@ -27,13 +26,10 @@ limitations under the License.

.notice {
background-color: rgba(
matm2.m2-get-color-from-palette(matm2var.$m2-yellow-palette, 200),
mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 200),
0.85
);
$yellow-500: matm2.m2-get-color-from-palette(
matm2var.$m2-yellow-palette,
500
);
$yellow-500: mat.m2-get-color-from-palette(mat.$m2-yellow-palette, 500);
border-bottom: 1px solid $yellow-500;
color: map-get($tb-foreground, text);
display: block;
Expand All @@ -46,15 +42,15 @@ tb-dashboard-layout {
}

nav {
background-color: matm2.m2-get-color-from-palette($tb-background, background);
$border: matm2.m2-get-color-from-palette($tb-foreground, border);
background-color: mat.m2-get-color-from-palette($tb-background, background);
$border: mat.m2-get-color-from-palette($tb-foreground, border);
border-right: 1px solid $border;
flex: none;
width: 340px;

@include tb-dark-theme {
background-color: map-get($tb-dark-background, background);
border-right-color: matm2.m2-get-color-from-palette(
border-right-color: mat.m2-get-color-from-palette(
$tb-dark-foreground,
border
);
Expand Down
1 change: 0 additions & 1 deletion tensorboard/webapp/metrics/views/right_pane/BUILD
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ sass_binary(
src = "saving_pins_checkbox_component.scss",
include_paths = ["external/npm/node_modules"],
deps = [
"//tensorboard/webapp/angular_components:material_sass",
"//tensorboard/webapp/theme",
],
)
Expand Down
22 changes: 9 additions & 13 deletions .../webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +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 matm2;
@use '@angular/material' as matm2var;
@use '@angular/material' as mat;
@import 'tensorboard/webapp/theme/tb_theme';

$_accent: map-get(matm2.m2-get-color-config($tb-theme), accent);
$_accent: map-get(mat.m2-get-color-config($tb-theme), accent);

:host ::ng-deep .mat-tab-label {
min-width: 0;
Expand All @@ -42,18 +41,15 @@ $_accent: map-get(matm2.m2-get-color-config($tb-theme), accent);
}

.highlighted {
background-color: matm2.m2-get-color-from-palette(
matm2var.$m2-grey-palette,
200
);
background-color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 200);
}

.highlight-bottom {
border-bottom: 2px solid matm2.m2-get-color-from-palette($_accent);
border-bottom: 2px solid mat.m2-get-color-from-palette($_accent);
}

.highlight-top {
border-top: 2px solid matm2.m2-get-color-from-palette($_accent);
border-top: 2px solid mat.m2-get-color-from-palette($_accent);
}

.footer {
Expand All @@ -66,20 +62,20 @@ $_accent: map-get(matm2.m2-get-color-config($tb-theme), accent);
align-items: center;
justify-content: flex-end;
padding: 4px;
$border: matm2.m2-get-color-from-palette($tb-foreground, border);
$border: mat.m2-get-color-from-palette($tb-foreground, border);
border-top: 1px solid $border;

@include tb-dark-theme {
border-color: matm2.m2-get-color-from-palette($tb-dark-foreground, border);
border-color: mat.m2-get-color-from-palette($tb-dark-foreground, border);
}
}

.close-button {
color: matm2.m2-get-color-from-palette($tb-foreground, secondary-text);
color: mat.m2-get-color-from-palette($tb-foreground, secondary-text);
width: 84px;

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

Expand Down
Loading
Loading