From ed01f155062da2203c7ada4f36a359425bf6f0ae Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Fri, 2 May 2025 09:22:57 -0600 Subject: [PATCH 1/2] Add a prefix comment for M2 Sass APIs to allow transformations to occur internally --- .../views/common/_lib.scss | 6 ++--- .../execution_data_component.scss | 4 +-- .../views/graph/graph_op_component.scss | 2 +- .../views/feature_flag_dialog_component.scss | 4 +-- .../card_renderer/image_card_component.scss | 2 +- .../card_renderer/scalar_card_component.scss | 4 +-- ...nked_time_selection_warning_component.scss | 8 +++--- .../main_view/filter_input_component.scss | 2 +- .../views/main_view/main_view_component.scss | 12 ++++----- .../main_view/pinned_view_component.scss | 2 +- .../metrics/views/metrics_container.scss | 10 +++---- .../scalar_column_editor_component.scss | 16 ++++++------ .../right_pane/settings_view_component.scss | 8 +++--- .../_views/notification_center_component.scss | 4 +-- .../views/runs_table/runs_data_table.scss | 2 +- .../runs_group_menu_button_component.scss | 2 +- tensorboard/webapp/theme/_tb_palette.scss | 18 ++++++------- .../webapp/theme/_tb_theme.template.scss | 26 +++++++++---------- tensorboard/webapp/theme/_variable.scss | 8 +++--- .../widgets/card_fob/card_fob_component.scss | 16 ++++++------ .../content_wrapping_input_component.scss | 8 +++--- .../data_table/column_selector_component.scss | 16 ++++++------ .../data_table/context_menu_component.scss | 8 +++--- .../data_table/data_table_component.scss | 6 ++--- .../data_table/filter_dialog_component.scss | 12 ++++----- .../data_table/header_cell_component.scss | 8 +++--- .../widgets/dropdown/dropdown_component.scss | 2 +- .../sub_view/line_chart_axis_view.scss | 2 +- 28 files changed, 109 insertions(+), 109 deletions(-) diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/_lib.scss b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/_lib.scss index 108b326cb0..6ecfb8e40c 100644 --- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/_lib.scss +++ b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/_lib.scss @@ -15,7 +15,7 @@ limitations under the License. @use '@angular/material' as mat; @mixin debugger-op-type { - background-color: mat.get-color-from-palette(mat.$blue-grey-palette, 50); + background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$blue-grey-palette, 50); @include tb-theme-foreground-prop(border, border, 1px solid); border-radius: 4px; font-family: 'Roboto Mono', monospace; @@ -26,13 +26,13 @@ limitations under the License. width: max-content; @include tb-dark-theme { - background-color: mat.get-color-from-palette(mat.$blue-grey-palette, 700); + background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$blue-grey-palette, 700); } } @mixin debugger-highlight-background { background-color: #fff099; @include tb-dark-theme { - background-color: mat.get-color-from-palette(mat.$orange-palette, 900); + background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 900); } } diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.scss b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.scss index 9b4b2e10fa..ff6c81caa7 100644 --- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.scss +++ b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.scss @@ -45,7 +45,7 @@ limitations under the License. } .focus-execution-container { - background-color: mat.get-color-from-palette(mat.$orange-palette, 200); + background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 200); border-radius: 4px; font-size: 12px; height: 120px; @@ -53,7 +53,7 @@ limitations under the License. width: 360px; @include tb-dark-theme { - background-color: mat.get-color-from-palette(mat.$orange-palette, 900); + background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 900); } } 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 index 4b59cfa8f8..8505efe769 100644 --- 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 @@ -32,7 +32,7 @@ limitations under the License. text-align: right; width: 200px; @include tb-dark-theme { - box-shadow: 1px 3px mat.get-color-from-palette(mat.$gray-palette, 600); + box-shadow: 1px 3px /*m2*/mat.get-color-from-palette(mat.$gray-palette, 600); } } diff --git a/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.scss b/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.scss index 8db2fefbd4..2635726fde 100644 --- a/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.scss +++ b/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.scss @@ -17,13 +17,13 @@ limitations under the License. .message { .warning { - color: mat.get-color-from-palette($tb-warn); + color: /*m2*/mat.get-color-from-palette($tb-warn); } margin-bottom: 16px; } .note-1 { - color: mat.get-color-from-palette($tb-accent); + color: /*m2*/mat.get-color-from-palette($tb-accent); } .scrolling-page { diff --git a/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss b/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss index c0699e95da..9fc1e279bf 100644 --- a/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss +++ b/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss @@ -153,7 +153,7 @@ $_title-to-heading-gap: 12px; } :host ::ng-deep .mat-slider-min-value .mat-slider-thumb { - background-color: mat.get-color-from-palette($tb-primary); + background-color: /*m2*/mat.get-color-from-palette($tb-primary); } :host ::ng-deep .hide-slider.mat-slider-horizontal .mat-slider-track-wrapper { diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss index 93213ec306..060cfc7922 100644 --- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss +++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss @@ -196,10 +196,10 @@ $_data_table_initial_height: 100px; align-items: center; .expand-button { - color: mat.get-color-from-palette($tb-foreground, secondary-text); + color: /*m2*/mat.get-color-from-palette($tb-foreground, secondary-text); @include tb-dark-theme { - color: mat.get-color-from-palette($tb-dark-foreground, secondary-text); + color: /*m2*/mat.get-color-from-palette($tb-dark-foreground, secondary-text); background-color: map-get($tb-dark-background, background); } } diff --git a/tensorboard/webapp/metrics/views/card_renderer/vis_linked_time_selection_warning_component.scss b/tensorboard/webapp/metrics/views/card_renderer/vis_linked_time_selection_warning_component.scss index 8a1a52505b..dc96a795c9 100644 --- a/tensorboard/webapp/metrics/views/card_renderer/vis_linked_time_selection_warning_component.scss +++ b/tensorboard/webapp/metrics/views/card_renderer/vis_linked_time_selection_warning_component.scss @@ -16,8 +16,8 @@ limitations under the License. @import 'tensorboard/webapp/theme/tb_theme'; :host { - color: mat.get-color-from-palette( - map-get(mat.get-color-config($tb-theme), warn), + color: /*m2*/mat.get-color-from-palette( + map-get(/*m2*/mat.get-color-config($tb-theme), warn), 700 ); height: 1em; @@ -25,8 +25,8 @@ limitations under the License. display: inline-flex; @include tb-dark-theme { - color: mat.get-color-from-palette( - map-get(mat.get-color-config($tb-dark-theme), warn), + color: /*m2*/mat.get-color-from-palette( + map-get(/*m2*/mat.get-color-config($tb-dark-theme), warn), 700 ); } diff --git a/tensorboard/webapp/metrics/views/main_view/filter_input_component.scss b/tensorboard/webapp/metrics/views/main_view/filter_input_component.scss index 63e50f38c9..beab36761b 100644 --- a/tensorboard/webapp/metrics/views/main_view/filter_input_component.scss +++ b/tensorboard/webapp/metrics/views/main_view/filter_input_component.scss @@ -28,7 +28,7 @@ tb-filter-input { @include tb-theme-foreground-prop(color, text); &:not(.valid) { - $_error-color: mat.get-color-from-palette($tb-warn, 800); + $_error-color: /*m2*/mat.get-color-from-palette($tb-warn, 800); color: $_error-color; diff --git a/tensorboard/webapp/metrics/views/main_view/main_view_component.scss b/tensorboard/webapp/metrics/views/main_view/main_view_component.scss index c425c589a7..ff4d98cae9 100644 --- a/tensorboard/webapp/metrics/views/main_view/main_view_component.scss +++ b/tensorboard/webapp/metrics/views/main_view/main_view_component.scss @@ -86,7 +86,7 @@ mat-button-toggle-group.filter-view { .main, .sidebar { contain: strict; - background-color: mat.get-color-from-palette($tb-background, background); + background-color: /*m2*/mat.get-color-from-palette($tb-background, background); overflow-x: hidden; overflow-y: auto; will-change: transform, scroll-position; @@ -97,7 +97,7 @@ mat-button-toggle-group.filter-view { } .main { - background-color: mat.get-color-from-palette($tf-slate, 200); + background-color: /*m2*/mat.get-color-from-palette($tf-slate, 200); flex: 1 1; display: flex; flex-direction: column; @@ -153,16 +153,16 @@ mat-button-toggle-group.filter-view { /** TODO(psybuzz): consider making a tb-button instead. */ :host .settings-button { - color: mat.get-color-from-palette($tb-foreground, secondary-text); + color: /*m2*/mat.get-color-from-palette($tb-foreground, secondary-text); display: inline-flex; @include tb-dark-theme { - color: mat.get-color-from-palette($tb-dark-foreground, secondary-text); + color: /*m2*/mat.get-color-from-palette($tb-dark-foreground, secondary-text); } &.checked { @include tb-theme-background-prop(background-color, selected-button); - border-color: mat.get-color-from-palette(mat.$gray-palette, 300); + border-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 300); } ::ng-deep .mat-button-wrapper { @@ -176,7 +176,7 @@ mat-button-toggle-group.filter-view { } .slide-out-menu { - background-color: mat.get-color-from-palette($tb-background, background); + background-color: /*m2*/mat.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; diff --git a/tensorboard/webapp/metrics/views/main_view/pinned_view_component.scss b/tensorboard/webapp/metrics/views/main_view/pinned_view_component.scss index 8f8df63b88..989c0b8ff4 100644 --- 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: mat.get-color-from-palette(mat.$red-palette, 500); + background: /*m2*/mat.get-color-from-palette(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 index 9b37197239..838ac55e7e 100644 --- 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( - mat.get-color-from-palette(mat.$yellow-palette, 200), + /*m2*/mat.get-color-from-palette(mat.$yellow-palette, 200), 0.85 ); - border-bottom: 1px solid mat.get-color-from-palette(mat.$yellow-palette, 500); + border-bottom: 1px solid /*m2*/mat.get-color-from-palette(mat.$yellow-palette, 500); color: map-get($tb-foreground, text); display: block; flex: 0 0; @@ -41,14 +41,14 @@ tb-dashboard-layout { } nav { - background-color: mat.get-color-from-palette($tb-background, background); - border-right: 1px solid mat.get-color-from-palette($tb-foreground, border); + background-color: /*m2*/mat.get-color-from-palette($tb-background, background); + border-right: 1px solid /*m2*/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.get-color-from-palette($tb-dark-foreground, border); + border-right-color: /*m2*/mat.get-color-from-palette($tb-dark-foreground, border); } } 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 index 2a3f3c0464..67a213b13b 100644 --- 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 @@ -15,7 +15,7 @@ limitations under the License. @use '@angular/material' as mat; @import 'tensorboard/webapp/theme/tb_theme'; -$_accent: map-get(mat.get-color-config($tb-theme), accent); +$_accent: map-get(/*m2*/mat.get-color-config($tb-theme), accent); :host ::ng-deep .mat-tab-label { min-width: 0; @@ -39,15 +39,15 @@ $_accent: map-get(mat.get-color-config($tb-theme), accent); } .highlighted { - background-color: mat.get-color-from-palette(mat.$gray-palette, 200); + background-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 200); } .highlight-bottom { - border-bottom: 2px solid mat.get-color-from-palette($_accent); + border-bottom: 2px solid /*m2*/mat.get-color-from-palette($_accent); } .highlight-top { - border-top: 2px solid mat.get-color-from-palette($_accent); + border-top: 2px solid /*m2*/mat.get-color-from-palette($_accent); } .footer { @@ -60,19 +60,19 @@ $_accent: map-get(mat.get-color-config($tb-theme), accent); align-items: center; justify-content: flex-end; padding: 4px; - border-top: 1px solid mat.get-color-from-palette($tb-foreground, border); + border-top: 1px solid /*m2*/mat.get-color-from-palette($tb-foreground, border); @include tb-dark-theme { - border-color: mat.get-color-from-palette($tb-dark-foreground, border); + border-color: /*m2*/mat.get-color-from-palette($tb-dark-foreground, border); } } .close-button { - color: mat.get-color-from-palette($tb-foreground, secondary-text); + color: /*m2*/mat.get-color-from-palette($tb-foreground, secondary-text); width: 84px; @include tb-dark-theme { - color: mat.get-color-from-palette($tb-dark-foreground, secondary-text); + color: /*m2*/mat.get-color-from-palette($tb-dark-foreground, secondary-text); } } diff --git a/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss b/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss index 5bdf2b2d53..d02ea2f0b5 100644 --- a/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss +++ b/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss @@ -58,7 +58,7 @@ section .control-row:not(:has(+ .control-row > mat-checkbox)):not(:last-child) { .slider-input { background-color: inherit; - border: 1px solid mat.get-color-from-palette($tf-slate, 500); + border: 1px solid /*m2*/mat.get-color-from-palette($tf-slate, 500); border-radius: 2px; box-sizing: border-box; color: inherit; @@ -67,7 +67,7 @@ section .control-row:not(:has(+ .control-row > mat-checkbox)):not(:last-child) { padding: 0 4px; @include tb-dark-theme { - border-color: mat.get-color-from-palette($tf-slate, 700); + border-color: /*m2*/mat.get-color-from-palette($tf-slate, 700); } } } @@ -127,9 +127,9 @@ mat-slider { align-items: center; } &.toggle-opened { - background-color: mat.get-color-from-palette(mat.$grey-palette, 200); + background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$grey-palette, 200); @include tb-dark-theme { - background-color: mat.get-color-from-palette(mat.$grey-palette, 800); + background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$grey-palette, 800); } } mat-icon { diff --git a/tensorboard/webapp/notification_center/_views/notification_center_component.scss b/tensorboard/webapp/notification_center/_views/notification_center_component.scss index 93a3d64fb7..04eb42555d 100644 --- 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: mat.get-color-from-palette(mat.$red-palette, 700); + background-color: /*m2*/mat.get-color-from-palette(mat.$red-palette, 700); border-radius: $_dim * 0.5; height: $_dim; position: absolute; @@ -52,7 +52,7 @@ limitations under the License. } .category-icon { - color: mat.get-color-from-palette(mat.$blue-palette, 700); + color: /*m2*/mat.get-color-from-palette(mat.$blue-palette, 700); height: 15px; margin-right: 6px; vertical-align: middle; diff --git a/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss b/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss index 31534ca835..379dc396d4 100644 --- a/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss +++ b/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss @@ -28,7 +28,7 @@ $_circle-size: 20px; .run-color-swatch { border-radius: 100%; - border: 1px solid mat.get-color-from-palette($tb-foreground, border); + border: 1px solid /*m2*/mat.get-color-from-palette($tb-foreground, border); height: $_circle-size; width: $_circle-size; outline: none; diff --git a/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.scss b/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.scss index ab3ff19361..208e1032a9 100644 --- a/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.scss +++ b/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.scss @@ -19,7 +19,7 @@ limitations under the License. font-size: 16px; .label { - color: mat.get-color-from-palette($tb-foreground, secondary-text); + color: /*m2*/mat.get-color-from-palette($tb-foreground, secondary-text); font-size: 0.9em; margin: 10px 0; padding: 0 16px; diff --git a/tensorboard/webapp/theme/_tb_palette.scss b/tensorboard/webapp/theme/_tb_palette.scss index 8f3aeeb352..77c65d5527 100644 --- a/tensorboard/webapp/theme/_tb_palette.scss +++ b/tensorboard/webapp/theme/_tb_palette.scss @@ -43,15 +43,15 @@ $tf-slate: ( several orange values, but only one of them (--tb-orange-strong) is used widely. */ $tf-orange: ( - 100: mat.get-color-from-palette(mat.$orange-palette, 100), - 200: mat.get-color-from-palette(mat.$orange-palette, 200), - 300: mat.get-color-from-palette(mat.$orange-palette, 300), - 400: mat.get-color-from-palette(mat.$orange-palette, 400), - 500: mat.get-color-from-palette(mat.$orange-palette, 500), - 600: mat.get-color-from-palette(mat.$orange-palette, 600), - 700: mat.get-color-from-palette(mat.$orange-palette, 700), - 800: mat.get-color-from-palette(mat.$orange-palette, 800), - 900: mat.get-color-from-palette(mat.$orange-palette, 900), + 100: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 100), + 200: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 200), + 300: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 300), + 400: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 400), + 500: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 500), + 600: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 600), + 700: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 700), + 800: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 800), + 900: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 900), contrast: ( 100: rgba(black, 0.87), 200: rgba(black, 0.87), diff --git a/tensorboard/webapp/theme/_tb_theme.template.scss b/tensorboard/webapp/theme/_tb_theme.template.scss index 46a748a128..5905c3379f 100644 --- a/tensorboard/webapp/theme/_tb_theme.template.scss +++ b/tensorboard/webapp/theme/_tb_theme.template.scss @@ -23,19 +23,19 @@ limitations under the License. // Value for `app-bar` property in $tb-background. Can specify an override in // _variable.scss to specifically customize this value. -$tb-app-bar-color: mat.get-color-from-palette($tb-primary, default) !default; +$tb-app-bar-color: /*m2*/mat.get-color-from-palette($tb-primary, default) !default; $tb-dark-primary: $tb-primary !default; $tb-dark-accent: $tb-accent !default; $tb-dark-warn: $tb-warn !default; // Value for `app-bar` property in $tb-dark-background. Can specify an override // in _variable.scss to specifically customize this value. -$tb-dark-app-bar-color: mat.get-color-from-palette( +$tb-dark-app-bar-color: /*m2*/mat.get-color-from-palette( $tb-dark-primary, default ) !default; -$tb-theme: mat.define-light-theme( +$tb-theme: /*m2*/mat.define-light-theme( ( color: ( primary: $tb-primary, @@ -51,13 +51,13 @@ $tb-theme: mat.define-light-theme( $tb-foreground: map_merge( mat.$light-theme-foreground-palette, ( - text: mat.get-color-from-palette(mat.$gray-palette, 900), - secondary-text: mat.get-color-from-palette(mat.$gray-palette, 700), - disabled-text: mat.get-color-from-palette(mat.$gray-palette, 600), + 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), // TB specific variable. border: #ebebeb, - link: mat.get-color-from-palette(mat.$blue-palette, 700), - link-visited: mat.get-color-from-palette(mat.$purple-palette, 700), + link: /*m2*/mat.get-color-from-palette(mat.$blue-palette, 700), + link-visited: /*m2*/mat.get-color-from-palette(mat.$purple-palette, 700), ) ); $tb-background: map_merge( @@ -103,16 +103,16 @@ $tb-dark-theme: mat.define-dark-theme( ) ); $tb-dark-foreground: map_merge( - map-get(mat.get-color-config($tb-dark-theme), foreground), + map-get(/*m2*/mat.get-color-config($tb-dark-theme), foreground), ( border: #555, - disabled-text: mat.get-color-from-palette(mat.$gray-palette, 700), - link: mat.get-color-from-palette(mat.$blue-palette, 400), - link-visited: mat.get-color-from-palette(mat.$purple-palette, 300), + disabled-text: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 700), + link: /*m2*/mat.get-color-from-palette(mat.$blue-palette, 400), + link-visited: /*m2*/mat.get-color-from-palette(mat.$purple-palette, 300), ) ); $tb-dark-background: map_merge( - map-get(mat.get-color-config($tb-dark-theme), background), + map-get(/*m2*/mat.get-color-config($tb-dark-theme), background), ( app-bar: $tb-dark-app-bar-color, ) diff --git a/tensorboard/webapp/theme/_variable.scss b/tensorboard/webapp/theme/_variable.scss index e7b0e84c49..4bc0ffb478 100644 --- a/tensorboard/webapp/theme/_variable.scss +++ b/tensorboard/webapp/theme/_variable.scss @@ -16,9 +16,9 @@ limitations under the License. @use '@angular/material' as mat; @import 'tensorboard/webapp/theme/tb_palette'; -$tb-primary: mat.define-palette($tf-orange, 700, 400, 800); -$tb-accent: mat.define-palette($tf-orange); -$tb-warn: mat.define-palette(mat.$red-palette); +$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-dark-primary: mat.define-palette($tf-orange, 800, 600, 900); +$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 index 4134e679e1..99ac27a36a 100644 --- 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: mat.get-color-from-palette(mat.$gray-palette, 300); + background-color: /*m2*/mat.get-color-from-palette(mat.$gray-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 mat.get-color-from-palette(mat.$gray-palette, 500); + border: 1px dashed /*m2*/mat.get-color-from-palette(mat.$gray-palette, 500); font-weight: bold; height: 17px; } @@ -61,7 +61,7 @@ span { display: inline-block; @include tb-dark-theme { - color: mat.get-color-from-palette(mat.$gray-palette, 700); + color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 700); } } @@ -84,17 +84,17 @@ button { } @include tb-dark-theme { - color: mat.get-color-from-palette(mat.$gray-palette, 700); + color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 700); } } button:hover { - background-color: mat.get-color-from-palette(mat.$gray-palette, 500); - color: mat.get-color-from-palette(mat.$gray-palette, 200); + background-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 500); + color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 200); cursor: pointer; @include tb-dark-theme { - background-color: mat.get-color-from-palette(mat.$gray-palette, 700); - color: mat.get-color-from-palette(mat.$gray-palette, 300); + background-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 700); + color: /*m2*/mat.get-color-from-palette(mat.$gray-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 index 03448a47c0..7eca3e9397 100644 --- a/tensorboard/webapp/widgets/content_wrapping_input/content_wrapping_input_component.scss +++ b/tensorboard/webapp/widgets/content_wrapping_input/content_wrapping_input_component.scss @@ -21,7 +21,7 @@ limitations under the License. width: max-content; &:focus-within .container { - border-color: mat.get-color-from-palette($tb-primary, 700); + border-color: /*m2*/mat.get-color-from-palette($tb-primary, 700); } &.default { @@ -32,7 +32,7 @@ limitations under the License. &.error .container, .container:not(.is-valid) { - $_error-color: mat.get-color-from-palette($tb-warn, 200); + $_error-color: /*m2*/mat.get-color-from-palette($tb-warn, 200); border-color: $_error-color; &:hover, @@ -42,10 +42,10 @@ limitations under the License. } &.high-contrast .container { - border-color: mat.get-color-from-palette(mat.$gray-palette, 400); + border-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 400); &:hover { - border-color: mat.get-color-from-palette(mat.$gray-palette, 600); + border-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 600); } } } diff --git a/tensorboard/webapp/widgets/data_table/column_selector_component.scss b/tensorboard/webapp/widgets/data_table/column_selector_component.scss index 1ea5dcafd0..af415885a6 100644 --- a/tensorboard/webapp/widgets/data_table/column_selector_component.scss +++ b/tensorboard/webapp/widgets/data_table/column_selector_component.scss @@ -25,12 +25,12 @@ limitations under the License. border: 1px solid; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - border-color: mat.get-color-from-palette($tb-foreground, border); - background-color: mat.get-color-from-palette($tb-background, background); + border-color: /*m2*/mat.get-color-from-palette($tb-foreground, border); + background-color: /*m2*/mat.get-color-from-palette($tb-background, background); @include tb-dark-theme { - border-color: mat.get-color-from-palette($tb-dark-foreground, border); - background-color: mat.get-color-from-palette( + border-color: /*m2*/mat.get-color-from-palette($tb-dark-foreground, border); + background-color: /*m2*/mat.get-color-from-palette( $tb-dark-background, 'background' ); @@ -49,7 +49,7 @@ limitations under the License. } .load-more-columns { - color: mat.get-color-from-palette($tb-warn, 600); + color: /*m2*/mat.get-color-from-palette($tb-warn, 600); display: flex; flex-direction: column; margin-top: 6px; @@ -80,16 +80,16 @@ limitations under the License. width: 100%; &.selected { - background-color: mat.get-color-from-palette(mat.$gray-palette, 200); + background-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 200); @include tb-dark-theme { - background-color: mat.get-color-from-palette(mat.$gray-palette, 400); + background-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 400); } } } .tag { - background-color: mat.get-color-from-palette($tb-primary, 500); + background-color: /*m2*/mat.get-color-from-palette($tb-primary, 500); border-radius: 8px; font-size: 12px; font-style: italic; diff --git a/tensorboard/webapp/widgets/data_table/context_menu_component.scss b/tensorboard/webapp/widgets/data_table/context_menu_component.scss index 51137a7739..9903975255 100644 --- a/tensorboard/webapp/widgets/data_table/context_menu_component.scss +++ b/tensorboard/webapp/widgets/data_table/context_menu_component.scss @@ -22,12 +22,12 @@ limitations under the License. border-radius: 4px; border: 1px solid; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - border-color: mat.get-color-from-palette($tb-foreground, border); - background-color: mat.get-color-from-palette($tb-background, background); + border-color: /*m2*/mat.get-color-from-palette($tb-foreground, border); + background-color: /*m2*/mat.get-color-from-palette($tb-background, background); @include tb-dark-theme { - border-color: mat.get-color-from-palette($tb-dark-foreground, border); - background-color: mat.get-color-from-palette( + border-color: /*m2*/mat.get-color-from-palette($tb-dark-foreground, border); + background-color: /*m2*/mat.get-color-from-palette( $tb-dark-background, 'background' ); diff --git a/tensorboard/webapp/widgets/data_table/data_table_component.scss b/tensorboard/webapp/widgets/data_table/data_table_component.scss index 4413c69100..ff2c46e0cb 100644 --- a/tensorboard/webapp/widgets/data_table/data_table_component.scss +++ b/tensorboard/webapp/widgets/data_table/data_table_component.scss @@ -15,7 +15,7 @@ limitations under the License. @use '@angular/material' as mat; @import 'tensorboard/webapp/theme/tb_theme'; -$_accent: map-get(mat.get-color-config($tb-theme), accent); +$_accent: map-get(/*m2*/mat.get-color-config($tb-theme), accent); .data-table-wrapper { display: flex; @@ -38,7 +38,7 @@ $_accent: map-get(mat.get-color-config($tb-theme), accent); width: 100%; .header { - background-color: mat.get-color-from-palette($tb-background, background); + background-color: /*m2*/mat.get-color-from-palette($tb-background, background); display: table-row; font-weight: bold; position: sticky; @@ -72,7 +72,7 @@ $_accent: map-get(mat.get-color-config($tb-theme), accent); } .right-section { - background-color: mat.get-color-from-palette($tb-background, background); + background-color: /*m2*/mat.get-color-from-palette($tb-background, background); position: sticky; right: -1px; // Prevent fractional width from creating a gap. z-index: 1; diff --git a/tensorboard/webapp/widgets/data_table/filter_dialog_component.scss b/tensorboard/webapp/widgets/data_table/filter_dialog_component.scss index 4908463381..950a47694d 100644 --- a/tensorboard/webapp/widgets/data_table/filter_dialog_component.scss +++ b/tensorboard/webapp/widgets/data_table/filter_dialog_component.scss @@ -20,12 +20,12 @@ limitations under the License. border-radius: 4px; border: 1px solid; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - border-color: mat.get-color-from-palette($tb-foreground, border); - background-color: mat.get-color-from-palette($tb-background, background); + border-color: /*m2*/mat.get-color-from-palette($tb-foreground, border); + background-color: /*m2*/mat.get-color-from-palette($tb-background, background); @include tb-dark-theme { - border-color: mat.get-color-from-palette($tb-dark-foreground, border); - background-color: mat.get-color-from-palette( + border-color: /*m2*/mat.get-color-from-palette($tb-dark-foreground, border); + background-color: /*m2*/mat.get-color-from-palette( $tb-dark-background, 'background' ); @@ -50,10 +50,10 @@ limitations under the License. .filter-container { padding-bottom: 8px; margin-bottom: 8px; - border-bottom: 1px solid mat.get-color-from-palette($tb-foreground, border); + border-bottom: 1px solid /*m2*/mat.get-color-from-palette($tb-foreground, border); @include tb-dark-theme { - border-bottom-color: mat.get-color-from-palette( + border-bottom-color: /*m2*/mat.get-color-from-palette( $tb-dark-foreground, border ); diff --git a/tensorboard/webapp/widgets/data_table/header_cell_component.scss b/tensorboard/webapp/widgets/data_table/header_cell_component.scss index 573251dad3..7a199d9cee 100644 --- a/tensorboard/webapp/widgets/data_table/header_cell_component.scss +++ b/tensorboard/webapp/widgets/data_table/header_cell_component.scss @@ -16,7 +16,7 @@ limitations under the License. @use '@angular/material' as mat; @import 'tensorboard/webapp/theme/tb_theme'; -$_accent: map-get(mat.get-color-config($tb-theme), accent); +$_accent: map-get(/*m2*/mat.get-color-config($tb-theme), accent); $_icon_size: 12px; $_icon_padding: 4px; @@ -79,13 +79,13 @@ $_icon_padding: 4px; } .highlight { - background-color: mat.get-color-from-palette(mat.$gray-palette, 200); + background-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 200); } .highlight-border-right { - border-right: 2px solid mat.get-color-from-palette($_accent); + border-right: 2px solid /*m2*/mat.get-color-from-palette($_accent); } .highlight-border-left { - border-left: 2px solid mat.get-color-from-palette($_accent); + border-left: 2px solid /*m2*/mat.get-color-from-palette($_accent); } diff --git a/tensorboard/webapp/widgets/dropdown/dropdown_component.scss b/tensorboard/webapp/widgets/dropdown/dropdown_component.scss index 69042a8b06..fe9c987a33 100644 --- a/tensorboard/webapp/widgets/dropdown/dropdown_component.scss +++ b/tensorboard/webapp/widgets/dropdown/dropdown_component.scss @@ -16,7 +16,7 @@ limitations under the License. @import 'tensorboard/webapp/theme/tb_theme'; mat-select { - border: 1px solid mat.get-color-from-palette($tf-slate, 500); + border: 1px solid /*m2*/mat.get-color-from-palette($tf-slate, 500); border-radius: 3px; box-sizing: border-box; padding: 6px; 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 index d609fb8d39..fa4b0b9eed 100644 --- 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-style: 1px solid mat.get-color-from-palette(mat.$gray-palette, 500); +$_border-style: 1px solid /*m2*/mat.get-color-from-palette(mat.$gray-palette, 500); .x-axis .major-label { border-left: $_border-style; From 65360f442ca63df10d3a7a7ade6f6f76f4a7b622 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Mon, 5 May 2025 13:45:46 -0600 Subject: [PATCH 2/2] adjust for lint --- .../views/common/_lib.scss | 15 ++++++++-- .../execution_data_component.scss | 10 +++++-- .../views/graph/graph_op_component.scss | 3 +- .../views/feature_flag_dialog_component.scss | 4 +-- .../card_renderer/image_card_component.scss | 2 +- .../card_renderer/scalar_card_component.scss | 7 +++-- ...nked_time_selection_warning_component.scss | 8 ++--- .../main_view/filter_input_component.scss | 2 +- .../views/main_view/main_view_component.scss | 21 ++++++++++---- .../main_view/pinned_view_component.scss | 2 +- .../metrics/views/metrics_container.scss | 18 ++++++++---- .../scalar_column_editor_component.scss | 23 ++++++++++----- .../right_pane/settings_view_component.scss | 14 ++++++--- .../_views/notification_center_component.scss | 4 +-- .../views/runs_table/runs_data_table.scss | 2 +- .../runs_group_menu_button_component.scss | 2 +- tensorboard/webapp/theme/_tb_palette.scss | 18 ++++++------ .../webapp/theme/_tb_theme.template.scss | 29 ++++++++++--------- tensorboard/webapp/theme/_variable.scss | 8 ++--- .../widgets/card_fob/card_fob_component.scss | 16 +++++----- .../content_wrapping_input_component.scss | 8 ++--- .../data_table/column_selector_component.scss | 28 +++++++++++++----- .../data_table/context_menu_component.scss | 14 ++++++--- .../data_table/data_table_component.scss | 12 ++++++-- .../data_table/filter_dialog_component.scss | 19 ++++++++---- .../data_table/header_cell_component.scss | 8 ++--- .../widgets/dropdown/dropdown_component.scss | 2 +- .../sub_view/line_chart_axis_view.scss | 3 +- 28 files changed, 193 insertions(+), 109 deletions(-) diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/_lib.scss b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/_lib.scss index 6ecfb8e40c..0dbb8c2f78 100644 --- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/_lib.scss +++ b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/_lib.scss @@ -15,7 +15,10 @@ limitations under the License. @use '@angular/material' as mat; @mixin debugger-op-type { - background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$blue-grey-palette, 50); + background-color: /*m2*/ mat.get-color-from-palette( + /*m2$*/ mat.$blue-grey-palette, + 50 + ); @include tb-theme-foreground-prop(border, border, 1px solid); border-radius: 4px; font-family: 'Roboto Mono', monospace; @@ -26,13 +29,19 @@ limitations under the License. width: max-content; @include tb-dark-theme { - background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$blue-grey-palette, 700); + background-color: /*m2*/ mat.get-color-from-palette( + /*m2$*/ mat.$blue-grey-palette, + 700 + ); } } @mixin debugger-highlight-background { background-color: #fff099; @include tb-dark-theme { - background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 900); + background-color: /*m2*/ mat.get-color-from-palette( + /*m2$*/ mat.$orange-palette, + 900 + ); } } diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.scss b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.scss index ff6c81caa7..04ef73e0d8 100644 --- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.scss +++ b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.scss @@ -45,7 +45,10 @@ limitations under the License. } .focus-execution-container { - background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 200); + background-color: /*m2*/ mat.get-color-from-palette( + /*m2$*/ mat.$orange-palette, + 200 + ); border-radius: 4px; font-size: 12px; height: 120px; @@ -53,7 +56,10 @@ limitations under the License. width: 360px; @include tb-dark-theme { - background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 900); + background-color: /*m2*/ mat.get-color-from-palette( + /*m2$*/ mat.$orange-palette, + 900 + ); } } 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 index 8505efe769..49dd1a607d 100644 --- 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,8 +31,9 @@ limitations under the License. padding: 2px 6px; text-align: right; width: 200px; + $grey-600: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 600); @include tb-dark-theme { - box-shadow: 1px 3px /*m2*/mat.get-color-from-palette(mat.$gray-palette, 600); + box-shadow: 1px 3px $grey-600; } } diff --git a/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.scss b/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.scss index 2635726fde..b22e5f4a56 100644 --- a/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.scss +++ b/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.scss @@ -17,13 +17,13 @@ limitations under the License. .message { .warning { - color: /*m2*/mat.get-color-from-palette($tb-warn); + color: /*m2*/ mat.get-color-from-palette($tb-warn); } margin-bottom: 16px; } .note-1 { - color: /*m2*/mat.get-color-from-palette($tb-accent); + color: /*m2*/ mat.get-color-from-palette($tb-accent); } .scrolling-page { diff --git a/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss b/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss index 9fc1e279bf..442570d952 100644 --- a/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss +++ b/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss @@ -153,7 +153,7 @@ $_title-to-heading-gap: 12px; } :host ::ng-deep .mat-slider-min-value .mat-slider-thumb { - background-color: /*m2*/mat.get-color-from-palette($tb-primary); + background-color: /*m2*/ mat.get-color-from-palette($tb-primary); } :host ::ng-deep .hide-slider.mat-slider-horizontal .mat-slider-track-wrapper { diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss index 060cfc7922..2ec44dea9f 100644 --- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss +++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss @@ -196,10 +196,13 @@ $_data_table_initial_height: 100px; align-items: center; .expand-button { - color: /*m2*/mat.get-color-from-palette($tb-foreground, secondary-text); + color: /*m2*/ mat.get-color-from-palette($tb-foreground, secondary-text); @include tb-dark-theme { - color: /*m2*/mat.get-color-from-palette($tb-dark-foreground, secondary-text); + color: /*m2*/ mat.get-color-from-palette( + $tb-dark-foreground, + secondary-text + ); background-color: map-get($tb-dark-background, background); } } diff --git a/tensorboard/webapp/metrics/views/card_renderer/vis_linked_time_selection_warning_component.scss b/tensorboard/webapp/metrics/views/card_renderer/vis_linked_time_selection_warning_component.scss index dc96a795c9..1a9b8eb4ed 100644 --- a/tensorboard/webapp/metrics/views/card_renderer/vis_linked_time_selection_warning_component.scss +++ b/tensorboard/webapp/metrics/views/card_renderer/vis_linked_time_selection_warning_component.scss @@ -16,8 +16,8 @@ limitations under the License. @import 'tensorboard/webapp/theme/tb_theme'; :host { - color: /*m2*/mat.get-color-from-palette( - map-get(/*m2*/mat.get-color-config($tb-theme), warn), + color: /*m2*/ mat.get-color-from-palette( + map-get(/*m2*/ mat.get-color-config($tb-theme), warn), 700 ); height: 1em; @@ -25,8 +25,8 @@ limitations under the License. display: inline-flex; @include tb-dark-theme { - color: /*m2*/mat.get-color-from-palette( - map-get(/*m2*/mat.get-color-config($tb-dark-theme), warn), + color: /*m2*/ mat.get-color-from-palette( + map-get(/*m2*/ mat.get-color-config($tb-dark-theme), warn), 700 ); } diff --git a/tensorboard/webapp/metrics/views/main_view/filter_input_component.scss b/tensorboard/webapp/metrics/views/main_view/filter_input_component.scss index beab36761b..6cf97269b3 100644 --- a/tensorboard/webapp/metrics/views/main_view/filter_input_component.scss +++ b/tensorboard/webapp/metrics/views/main_view/filter_input_component.scss @@ -28,7 +28,7 @@ tb-filter-input { @include tb-theme-foreground-prop(color, text); &:not(.valid) { - $_error-color: /*m2*/mat.get-color-from-palette($tb-warn, 800); + $_error-color: /*m2*/ mat.get-color-from-palette($tb-warn, 800); color: $_error-color; diff --git a/tensorboard/webapp/metrics/views/main_view/main_view_component.scss b/tensorboard/webapp/metrics/views/main_view/main_view_component.scss index ff4d98cae9..32e568e5d9 100644 --- a/tensorboard/webapp/metrics/views/main_view/main_view_component.scss +++ b/tensorboard/webapp/metrics/views/main_view/main_view_component.scss @@ -86,7 +86,10 @@ mat-button-toggle-group.filter-view { .main, .sidebar { contain: strict; - background-color: /*m2*/mat.get-color-from-palette($tb-background, background); + background-color: /*m2*/ mat.get-color-from-palette( + $tb-background, + background + ); overflow-x: hidden; overflow-y: auto; will-change: transform, scroll-position; @@ -97,7 +100,7 @@ mat-button-toggle-group.filter-view { } .main { - background-color: /*m2*/mat.get-color-from-palette($tf-slate, 200); + background-color: /*m2*/ mat.get-color-from-palette($tf-slate, 200); flex: 1 1; display: flex; flex-direction: column; @@ -153,16 +156,19 @@ mat-button-toggle-group.filter-view { /** TODO(psybuzz): consider making a tb-button instead. */ :host .settings-button { - color: /*m2*/mat.get-color-from-palette($tb-foreground, secondary-text); + color: /*m2*/ mat.get-color-from-palette($tb-foreground, secondary-text); display: inline-flex; @include tb-dark-theme { - color: /*m2*/mat.get-color-from-palette($tb-dark-foreground, secondary-text); + color: /*m2*/ mat.get-color-from-palette( + $tb-dark-foreground, + secondary-text + ); } &.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(mat.$gray-palette, 300); } ::ng-deep .mat-button-wrapper { @@ -176,7 +182,10 @@ mat-button-toggle-group.filter-view { } .slide-out-menu { - background-color: /*m2*/mat.get-color-from-palette($tb-background, background); + background-color: /*m2*/ mat.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; diff --git a/tensorboard/webapp/metrics/views/main_view/pinned_view_component.scss b/tensorboard/webapp/metrics/views/main_view/pinned_view_component.scss index 989c0b8ff4..813474ee54 100644 --- 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(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 index 838ac55e7e..870ce00ffe 100644 --- a/tensorboard/webapp/metrics/views/metrics_container.scss +++ b/tensorboard/webapp/metrics/views/metrics_container.scss @@ -26,10 +26,11 @@ limitations under the License. .notice { background-color: rgba( - /*m2*/mat.get-color-from-palette(mat.$yellow-palette, 200), + /*m2*/ mat.get-color-from-palette(mat.$yellow-palette, 200), 0.85 ); - border-bottom: 1px solid /*m2*/mat.get-color-from-palette(mat.$yellow-palette, 500); + $yellow-500: /*m2*/ mat.get-color-from-palette(mat.$yellow-palette, 500); + border-bottom: 1px solid $yellow-500; color: map-get($tb-foreground, text); display: block; flex: 0 0; @@ -41,14 +42,21 @@ tb-dashboard-layout { } nav { - background-color: /*m2*/mat.get-color-from-palette($tb-background, background); - border-right: 1px solid /*m2*/mat.get-color-from-palette($tb-foreground, border); + background-color: /*m2*/ mat.get-color-from-palette( + $tb-background, + background + ); + $border: /*m2*/ mat.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: /*m2*/mat.get-color-from-palette($tb-dark-foreground, border); + border-right-color: /*m2*/ mat.get-color-from-palette( + $tb-dark-foreground, + border + ); } } 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 index 67a213b13b..c5fe55a33c 100644 --- 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 @@ -15,7 +15,7 @@ limitations under the License. @use '@angular/material' as mat; @import 'tensorboard/webapp/theme/tb_theme'; -$_accent: map-get(/*m2*/mat.get-color-config($tb-theme), accent); +$_accent: map-get(/*m2*/ mat.get-color-config($tb-theme), accent); :host ::ng-deep .mat-tab-label { min-width: 0; @@ -39,15 +39,15 @@ $_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(mat.$gray-palette, 200); } .highlight-bottom { - border-bottom: 2px solid /*m2*/mat.get-color-from-palette($_accent); + border-bottom: 2px solid /*m2*/ mat.get-color-from-palette($_accent); } .highlight-top { - border-top: 2px solid /*m2*/mat.get-color-from-palette($_accent); + border-top: 2px solid /*m2*/ mat.get-color-from-palette($_accent); } .footer { @@ -60,19 +60,26 @@ $_accent: map-get(/*m2*/mat.get-color-config($tb-theme), accent); align-items: center; justify-content: flex-end; padding: 4px; - border-top: 1px solid /*m2*/mat.get-color-from-palette($tb-foreground, border); + $border: /*m2*/ mat.get-color-from-palette($tb-foreground, border); + border-top: 1px solid $border; @include tb-dark-theme { - border-color: /*m2*/mat.get-color-from-palette($tb-dark-foreground, border); + border-color: /*m2*/ mat.get-color-from-palette( + $tb-dark-foreground, + border + ); } } .close-button { - color: /*m2*/mat.get-color-from-palette($tb-foreground, secondary-text); + color: /*m2*/ mat.get-color-from-palette($tb-foreground, secondary-text); width: 84px; @include tb-dark-theme { - color: /*m2*/mat.get-color-from-palette($tb-dark-foreground, secondary-text); + color: /*m2*/ mat.get-color-from-palette( + $tb-dark-foreground, + secondary-text + ); } } diff --git a/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss b/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss index d02ea2f0b5..6e8430a638 100644 --- a/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss +++ b/tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss @@ -58,7 +58,7 @@ section .control-row:not(:has(+ .control-row > mat-checkbox)):not(:last-child) { .slider-input { background-color: inherit; - border: 1px solid /*m2*/mat.get-color-from-palette($tf-slate, 500); + border: 1px solid /*m2*/ mat.get-color-from-palette($tf-slate, 500); border-radius: 2px; box-sizing: border-box; color: inherit; @@ -67,7 +67,7 @@ section .control-row:not(:has(+ .control-row > mat-checkbox)):not(:last-child) { padding: 0 4px; @include tb-dark-theme { - border-color: /*m2*/mat.get-color-from-palette($tf-slate, 700); + border-color: /*m2*/ mat.get-color-from-palette($tf-slate, 700); } } } @@ -127,9 +127,15 @@ mat-slider { align-items: center; } &.toggle-opened { - background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$grey-palette, 200); + background-color: /*m2*/ mat.get-color-from-palette( + /*m2$*/ mat.$grey-palette, + 200 + ); @include tb-dark-theme { - background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$grey-palette, 800); + background-color: /*m2*/ mat.get-color-from-palette( + /*m2$*/ mat.$grey-palette, + 800 + ); } } mat-icon { diff --git a/tensorboard/webapp/notification_center/_views/notification_center_component.scss b/tensorboard/webapp/notification_center/_views/notification_center_component.scss index 04eb42555d..13e61b1e8e 100644 --- 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(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(mat.$blue-palette, 700); height: 15px; margin-right: 6px; vertical-align: middle; diff --git a/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss b/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss index 379dc396d4..ae73114556 100644 --- a/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss +++ b/tensorboard/webapp/runs/views/runs_table/runs_data_table.scss @@ -28,7 +28,7 @@ $_circle-size: 20px; .run-color-swatch { border-radius: 100%; - border: 1px solid /*m2*/mat.get-color-from-palette($tb-foreground, border); + border: 1px solid /*m2*/ mat.get-color-from-palette($tb-foreground, border); height: $_circle-size; width: $_circle-size; outline: none; diff --git a/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.scss b/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.scss index 208e1032a9..7ae4bf7e55 100644 --- a/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.scss +++ b/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.scss @@ -19,7 +19,7 @@ limitations under the License. font-size: 16px; .label { - color: /*m2*/mat.get-color-from-palette($tb-foreground, secondary-text); + color: /*m2*/ mat.get-color-from-palette($tb-foreground, secondary-text); font-size: 0.9em; margin: 10px 0; padding: 0 16px; diff --git a/tensorboard/webapp/theme/_tb_palette.scss b/tensorboard/webapp/theme/_tb_palette.scss index 77c65d5527..193e766627 100644 --- a/tensorboard/webapp/theme/_tb_palette.scss +++ b/tensorboard/webapp/theme/_tb_palette.scss @@ -43,15 +43,15 @@ $tf-slate: ( several orange values, but only one of them (--tb-orange-strong) is used widely. */ $tf-orange: ( - 100: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 100), - 200: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 200), - 300: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 300), - 400: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 400), - 500: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 500), - 600: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 600), - 700: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 700), - 800: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 800), - 900: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 900), + 100: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$orange-palette, 100), + 200: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$orange-palette, 200), + 300: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$orange-palette, 300), + 400: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$orange-palette, 400), + 500: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$orange-palette, 500), + 600: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$orange-palette, 600), + 700: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$orange-palette, 700), + 800: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$orange-palette, 800), + 900: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$orange-palette, 900), contrast: ( 100: rgba(black, 0.87), 200: rgba(black, 0.87), diff --git a/tensorboard/webapp/theme/_tb_theme.template.scss b/tensorboard/webapp/theme/_tb_theme.template.scss index 5905c3379f..9bef0a5674 100644 --- a/tensorboard/webapp/theme/_tb_theme.template.scss +++ b/tensorboard/webapp/theme/_tb_theme.template.scss @@ -23,19 +23,22 @@ limitations under the License. // Value for `app-bar` property in $tb-background. Can specify an override in // _variable.scss to specifically customize this value. -$tb-app-bar-color: /*m2*/mat.get-color-from-palette($tb-primary, default) !default; +$tb-app-bar-color: /*m2*/ mat.get-color-from-palette( + $tb-primary, + default +) !default; $tb-dark-primary: $tb-primary !default; $tb-dark-accent: $tb-accent !default; $tb-dark-warn: $tb-warn !default; // Value for `app-bar` property in $tb-dark-background. Can specify an override // in _variable.scss to specifically customize this value. -$tb-dark-app-bar-color: /*m2*/mat.get-color-from-palette( +$tb-dark-app-bar-color: /*m2*/ mat.get-color-from-palette( $tb-dark-primary, default ) !default; -$tb-theme: /*m2*/mat.define-light-theme( +$tb-theme: /*m2*/ mat.define-light-theme( ( color: ( primary: $tb-primary, @@ -51,13 +54,13 @@ $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(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), // TB specific variable. border: #ebebeb, - link: /*m2*/mat.get-color-from-palette(mat.$blue-palette, 700), - link-visited: /*m2*/mat.get-color-from-palette(mat.$purple-palette, 700), + link: /*m2*/ mat.get-color-from-palette(mat.$blue-palette, 700), + link-visited: /*m2*/ mat.get-color-from-palette(mat.$purple-palette, 700), ) ); $tb-background: map_merge( @@ -103,16 +106,16 @@ $tb-dark-theme: mat.define-dark-theme( ) ); $tb-dark-foreground: map_merge( - map-get(/*m2*/mat.get-color-config($tb-dark-theme), foreground), + 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), - link-visited: /*m2*/mat.get-color-from-palette(mat.$purple-palette, 300), + disabled-text: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 700), + link: /*m2*/ mat.get-color-from-palette(mat.$blue-palette, 400), + link-visited: /*m2*/ mat.get-color-from-palette(mat.$purple-palette, 300), ) ); $tb-dark-background: map_merge( - map-get(/*m2*/mat.get-color-config($tb-dark-theme), background), + map-get(/*m2*/ mat.get-color-config($tb-dark-theme), background), ( app-bar: $tb-dark-app-bar-color, ) diff --git a/tensorboard/webapp/theme/_variable.scss b/tensorboard/webapp/theme/_variable.scss index 4bc0ffb478..5e91f8af4e 100644 --- a/tensorboard/webapp/theme/_variable.scss +++ b/tensorboard/webapp/theme/_variable.scss @@ -16,9 +16,9 @@ limitations under the License. @use '@angular/material' as mat; @import 'tensorboard/webapp/theme/tb_palette'; -$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-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-dark-primary: /*m2*/mat.define-palette($tf-orange, 800, 600, 900); +$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 index 99ac27a36a..60c56ecab4 100644 --- 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(mat.$gray-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(mat.$gray-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(mat.$gray-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(mat.$gray-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(mat.$gray-palette, 500); + color: /*m2*/ mat.get-color-from-palette(mat.$gray-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(mat.$gray-palette, 700); + color: /*m2*/ mat.get-color-from-palette(mat.$gray-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 index 7eca3e9397..df8cf9ecf3 100644 --- a/tensorboard/webapp/widgets/content_wrapping_input/content_wrapping_input_component.scss +++ b/tensorboard/webapp/widgets/content_wrapping_input/content_wrapping_input_component.scss @@ -21,7 +21,7 @@ limitations under the License. width: max-content; &:focus-within .container { - border-color: /*m2*/mat.get-color-from-palette($tb-primary, 700); + border-color: /*m2*/ mat.get-color-from-palette($tb-primary, 700); } &.default { @@ -32,7 +32,7 @@ limitations under the License. &.error .container, .container:not(.is-valid) { - $_error-color: /*m2*/mat.get-color-from-palette($tb-warn, 200); + $_error-color: /*m2*/ mat.get-color-from-palette($tb-warn, 200); border-color: $_error-color; &:hover, @@ -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(mat.$gray-palette, 400); &:hover { - border-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 600); + border-color: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 600); } } } diff --git a/tensorboard/webapp/widgets/data_table/column_selector_component.scss b/tensorboard/webapp/widgets/data_table/column_selector_component.scss index af415885a6..e82eab11fa 100644 --- a/tensorboard/webapp/widgets/data_table/column_selector_component.scss +++ b/tensorboard/webapp/widgets/data_table/column_selector_component.scss @@ -25,12 +25,18 @@ limitations under the License. border: 1px solid; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - border-color: /*m2*/mat.get-color-from-palette($tb-foreground, border); - background-color: /*m2*/mat.get-color-from-palette($tb-background, background); + border-color: /*m2*/ mat.get-color-from-palette($tb-foreground, border); + background-color: /*m2*/ mat.get-color-from-palette( + $tb-background, + background + ); @include tb-dark-theme { - border-color: /*m2*/mat.get-color-from-palette($tb-dark-foreground, border); - background-color: /*m2*/mat.get-color-from-palette( + border-color: /*m2*/ mat.get-color-from-palette( + $tb-dark-foreground, + border + ); + background-color: /*m2*/ mat.get-color-from-palette( $tb-dark-background, 'background' ); @@ -49,7 +55,7 @@ limitations under the License. } .load-more-columns { - color: /*m2*/mat.get-color-from-palette($tb-warn, 600); + color: /*m2*/ mat.get-color-from-palette($tb-warn, 600); display: flex; flex-direction: column; margin-top: 6px; @@ -80,16 +86,22 @@ limitations under the License. width: 100%; &.selected { - background-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 200); + background-color: /*m2*/ mat.get-color-from-palette( + mat.$gray-palette, + 200 + ); @include tb-dark-theme { - background-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 400); + background-color: /*m2*/ mat.get-color-from-palette( + mat.$gray-palette, + 400 + ); } } } .tag { - background-color: /*m2*/mat.get-color-from-palette($tb-primary, 500); + background-color: /*m2*/ mat.get-color-from-palette($tb-primary, 500); border-radius: 8px; font-size: 12px; font-style: italic; diff --git a/tensorboard/webapp/widgets/data_table/context_menu_component.scss b/tensorboard/webapp/widgets/data_table/context_menu_component.scss index 9903975255..d7e7557d06 100644 --- a/tensorboard/webapp/widgets/data_table/context_menu_component.scss +++ b/tensorboard/webapp/widgets/data_table/context_menu_component.scss @@ -22,12 +22,18 @@ limitations under the License. border-radius: 4px; border: 1px solid; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - border-color: /*m2*/mat.get-color-from-palette($tb-foreground, border); - background-color: /*m2*/mat.get-color-from-palette($tb-background, background); + border-color: /*m2*/ mat.get-color-from-palette($tb-foreground, border); + background-color: /*m2*/ mat.get-color-from-palette( + $tb-background, + background + ); @include tb-dark-theme { - border-color: /*m2*/mat.get-color-from-palette($tb-dark-foreground, border); - background-color: /*m2*/mat.get-color-from-palette( + border-color: /*m2*/ mat.get-color-from-palette( + $tb-dark-foreground, + border + ); + background-color: /*m2*/ mat.get-color-from-palette( $tb-dark-background, 'background' ); diff --git a/tensorboard/webapp/widgets/data_table/data_table_component.scss b/tensorboard/webapp/widgets/data_table/data_table_component.scss index ff2c46e0cb..a27b69273c 100644 --- a/tensorboard/webapp/widgets/data_table/data_table_component.scss +++ b/tensorboard/webapp/widgets/data_table/data_table_component.scss @@ -15,7 +15,7 @@ limitations under the License. @use '@angular/material' as mat; @import 'tensorboard/webapp/theme/tb_theme'; -$_accent: map-get(/*m2*/mat.get-color-config($tb-theme), accent); +$_accent: map-get(/*m2*/ mat.get-color-config($tb-theme), accent); .data-table-wrapper { display: flex; @@ -38,7 +38,10 @@ $_accent: map-get(/*m2*/mat.get-color-config($tb-theme), accent); width: 100%; .header { - background-color: /*m2*/mat.get-color-from-palette($tb-background, background); + background-color: /*m2*/ mat.get-color-from-palette( + $tb-background, + background + ); display: table-row; font-weight: bold; position: sticky; @@ -72,7 +75,10 @@ $_accent: map-get(/*m2*/mat.get-color-config($tb-theme), accent); } .right-section { - background-color: /*m2*/mat.get-color-from-palette($tb-background, background); + background-color: /*m2*/ mat.get-color-from-palette( + $tb-background, + background + ); position: sticky; right: -1px; // Prevent fractional width from creating a gap. z-index: 1; diff --git a/tensorboard/webapp/widgets/data_table/filter_dialog_component.scss b/tensorboard/webapp/widgets/data_table/filter_dialog_component.scss index 950a47694d..90d40974ab 100644 --- a/tensorboard/webapp/widgets/data_table/filter_dialog_component.scss +++ b/tensorboard/webapp/widgets/data_table/filter_dialog_component.scss @@ -20,12 +20,18 @@ limitations under the License. border-radius: 4px; border: 1px solid; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - border-color: /*m2*/mat.get-color-from-palette($tb-foreground, border); - background-color: /*m2*/mat.get-color-from-palette($tb-background, background); + border-color: /*m2*/ mat.get-color-from-palette($tb-foreground, border); + background-color: /*m2*/ mat.get-color-from-palette( + $tb-background, + background + ); @include tb-dark-theme { - border-color: /*m2*/mat.get-color-from-palette($tb-dark-foreground, border); - background-color: /*m2*/mat.get-color-from-palette( + border-color: /*m2*/ mat.get-color-from-palette( + $tb-dark-foreground, + border + ); + background-color: /*m2*/ mat.get-color-from-palette( $tb-dark-background, 'background' ); @@ -50,10 +56,11 @@ limitations under the License. .filter-container { padding-bottom: 8px; margin-bottom: 8px; - border-bottom: 1px solid /*m2*/mat.get-color-from-palette($tb-foreground, border); + $border: /*m2*/ mat.get-color-from-palette($tb-foreground, border); + border-bottom: 1px solid $border; @include tb-dark-theme { - border-bottom-color: /*m2*/mat.get-color-from-palette( + border-bottom-color: /*m2*/ mat.get-color-from-palette( $tb-dark-foreground, border ); diff --git a/tensorboard/webapp/widgets/data_table/header_cell_component.scss b/tensorboard/webapp/widgets/data_table/header_cell_component.scss index 7a199d9cee..e80118d7a7 100644 --- a/tensorboard/webapp/widgets/data_table/header_cell_component.scss +++ b/tensorboard/webapp/widgets/data_table/header_cell_component.scss @@ -16,7 +16,7 @@ limitations under the License. @use '@angular/material' as mat; @import 'tensorboard/webapp/theme/tb_theme'; -$_accent: map-get(/*m2*/mat.get-color-config($tb-theme), accent); +$_accent: map-get(/*m2*/ mat.get-color-config($tb-theme), accent); $_icon_size: 12px; $_icon_padding: 4px; @@ -79,13 +79,13 @@ $_icon_padding: 4px; } .highlight { - background-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 200); + background-color: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 200); } .highlight-border-right { - border-right: 2px solid /*m2*/mat.get-color-from-palette($_accent); + border-right: 2px solid /*m2*/ mat.get-color-from-palette($_accent); } .highlight-border-left { - border-left: 2px solid /*m2*/mat.get-color-from-palette($_accent); + border-left: 2px solid /*m2*/ mat.get-color-from-palette($_accent); } diff --git a/tensorboard/webapp/widgets/dropdown/dropdown_component.scss b/tensorboard/webapp/widgets/dropdown/dropdown_component.scss index fe9c987a33..0cc30ae78c 100644 --- a/tensorboard/webapp/widgets/dropdown/dropdown_component.scss +++ b/tensorboard/webapp/widgets/dropdown/dropdown_component.scss @@ -16,7 +16,7 @@ limitations under the License. @import 'tensorboard/webapp/theme/tb_theme'; mat-select { - border: 1px solid /*m2*/mat.get-color-from-palette($tf-slate, 500); + border: 1px solid /*m2*/ mat.get-color-from-palette($tf-slate, 500); border-radius: 3px; box-sizing: border-box; padding: 6px; 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 index fa4b0b9eed..61a929f95b 100644 --- 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,8 @@ text { } } -$_border-style: 1px solid /*m2*/mat.get-color-from-palette(mat.$gray-palette, 500); +$border: /*m2*/ mat.get-color-from-palette(mat.$gray-palette, 500); +$_border-style: 1px solid $border; .x-axis .major-label { border-left: $_border-style;