Skip to content

Migrate to the Sass module system #7142

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

Open
jathak wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Migrate to the Sass module system #7142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
185caf9
Migrate to the Sass module system
jathak Jul 10, 2026
6abfda5
Add a couple of missing implicit dependencies
jathak Jul 10, 2026
72ad972
Run formatter
jathak Jul 10, 2026
33e9977
Forward palette from theme
jathak Jul 10, 2026
dbcfa8c
Format build file
jathak Jul 10, 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
8 changes: 4 additions & 4 deletions tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/debugger_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +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.
==============================================================================*/
@import 'tensorboard/webapp/theme/tb_theme';
@use 'tensorboard/webapp/theme/tb_theme';

.bottom-section {
box-sizing: border-box;
@include tb-theme-foreground-prop(border-top, border, 1px solid);
@include tb_theme.tb-theme-foreground-prop(border-top, border, 1px solid);
display: flex;
flex-grow: 1;
height: 34%;
Expand All @@ -38,7 +38,7 @@ limitations under the License.
}

tf-debugger-v2-alerts {
@include tb-theme-foreground-prop(border-right, border, 1px solid);
@include tb_theme.tb-theme-foreground-prop(border-right, border, 1px solid);
display: inline-block;
margin-right: 10px;
min-width: 160px;
Expand Down Expand Up @@ -77,7 +77,7 @@ tf-debugger-v2-timeline {
}

tf-debugger-v2-graph {
@include tb-theme-foreground-prop(border-top, border, 1px solid);
@include tb_theme.tb-theme-foreground-prop(border-top, border, 1px solid);
display: block;
margin-top: 5px;
}
5 changes: 4 additions & 1 deletion tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/BUILD
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,8 @@ licenses(["notice"])
sass_library(
name = "style_lib",
srcs = ["_lib.scss"],
deps = ["//tensorboard/webapp/angular_components:material_sass"],
deps = [
"//tensorboard/webapp/angular_components:material_sass",
"//tensorboard/webapp/theme",
],
)
5 changes: 3 additions & 2 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 @@ -13,13 +13,14 @@ See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/
@use '@angular/material' as mat;
@use 'tensorboard/webapp/theme/tb_theme';

@mixin debugger-op-type {
background-color: mat.m2-get-color-from-palette(
mat.$m2-blue-grey-palette,
50
);
@include tb-theme-foreground-prop(border, border, 1px solid);
@include tb_theme.tb-theme-foreground-prop(border, border, 1px solid);
border-radius: 4px;
font-family: 'Roboto Mono', monospace;
font-size: 10px;
Expand All @@ -28,7 +29,7 @@ limitations under the License.
padding: 1px 3px;
width: max-content;

@include tb-dark-theme {
@include tb_theme.tb-dark-theme {
background-color: mat.m2-get-color-from-palette(
mat.$m2-blue-grey-palette,
700
Expand Down
6 changes: 3 additions & 3 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 @@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/
@use '@angular/material' as mat;
@import 'tensorboard/webapp/theme/tb_theme';
@use 'tensorboard/webapp/theme/tb_theme';

.debug-tensor-values-table {
width: 100%;
Expand Down Expand Up @@ -52,7 +52,7 @@ limitations under the License.
padding: 5px;
width: 360px;

@include tb-dark-theme {
@include tb_theme.tb-dark-theme {
background-color: mat.m2-get-color-from-palette(
mat.$m2-orange-palette,
900
Expand All @@ -67,7 +67,7 @@ limitations under the License.
}

.output-slot-container {
@include tb-theme-foreground-prop(border-top, border, 1px solid);
@include tb_theme.tb-theme-foreground-prop(border-top, border, 1px solid);
margin-top: 5px;
padding: 2px 0;
vertical-align: top;
Expand Down
6 changes: 3 additions & 3 deletions tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ 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.
==============================================================================*/
@import 'tensorboard/webapp/theme/tb_theme';
@import '../common/lib';
@use 'tensorboard/webapp/theme/tb_theme';
@use '../common/lib';

:host {
overflow-y: auto;
Expand Down Expand Up @@ -52,7 +52,7 @@ limitations under the License.
}

.input-slot-header {
@include debugger-highlight-background;
@include lib.debugger-highlight-background;

margin-bottom: 5px;
}
Expand Down
12 changes: 6 additions & 6 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 @@ -13,8 +13,8 @@ See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/
@use '@angular/material' as mat;
@import 'tensorboard/webapp/theme/tb_theme';
@import '../common/lib';
@use 'tensorboard/webapp/theme/tb_theme';
@use '../common/lib';

.op-container,
.op-name {
Expand All @@ -23,7 +23,7 @@ limitations under the License.
}

.op-container {
@include tb-theme-foreground-prop(border, border, 2px solid);
@include tb_theme.tb-theme-foreground-prop(border, border, 2px solid);
border-radius: 4px;
box-shadow: 1px 3px #eee;
cursor: pointer;
Expand All @@ -33,7 +33,7 @@ limitations under the License.
width: 200px;
$grey-600: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 600);

@include tb-dark-theme {
@include tb_theme.tb-dark-theme {
box-shadow: 1px 3px $grey-600;
}
}
Expand Down Expand Up @@ -66,7 +66,7 @@ limitations under the License.
}

.op-type {
@include debugger-op-type;
@include lib.debugger-op-type;
display: inline-block;
margin-top: 3px;
}
Expand All @@ -77,5 +77,5 @@ limitations under the License.
}

.slot {
@include tb-theme-foreground-prop(color, secondary-text);
@include tb_theme.tb-theme-foreground-prop(color, secondary-text);
}
14 changes: 7 additions & 7 deletions .../debugger_v2/tf_debugger_v2_plugin/views/graph_executions/graph_executions_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +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.
==============================================================================*/
@import 'tensorboard/webapp/theme/tb_theme';
@import '../common/lib';
@use 'tensorboard/webapp/theme/tb_theme';
@use '../common/lib';

.graph-executions-container {
@include tb-theme-foreground-prop(border-left, border, 1px solid);
@include tb_theme.tb-theme-foreground-prop(border-left, border, 1px solid);
display: flex;
flex-direction: column;
height: 100%;
Expand All @@ -29,7 +29,7 @@ limitations under the License.
}

.graph-execution-index {
@include tb-theme-foreground-prop(color, secondary-text);
@include tb_theme.tb-theme-foreground-prop(color, secondary-text);
display: inline-block;
padding-right: 4px;
text-align: right;
Expand All @@ -49,15 +49,15 @@ limitations under the License.
}

.input-of-focus {
@include debugger-highlight-background;
@include lib.debugger-highlight-background;
}

.loading-spinner {
display: inline-block;
}

.op-type {
@include debugger-op-type;
@include lib.debugger-op-type;
direction: rtl;
display: block;
}
Expand All @@ -67,7 +67,7 @@ limitations under the License.
}

.tensor-item {
@include tb-theme-foreground-prop(border-bottom, border, 1px solid);
@include tb_theme.tb-theme-foreground-prop(border-bottom, border, 1px solid);
display: flex;
flex-wrap: nowrap;
height: 38px;
Expand Down
4 changes: 2 additions & 2 deletions .../plugins/debugger_v2/tf_debugger_v2_plugin/views/source_files/source_files_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +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.
==============================================================================*/
@import 'tensorboard/webapp/theme/tb_theme';
@use 'tensorboard/webapp/theme/tb_theme';

.header-section {
@include tb-theme-foreground-prop(border-bottom, border, 1px solid);
@include tb_theme.tb-theme-foreground-prop(border-bottom, border, 1px solid);
display: flex;
height: 24px;
padding-bottom: 6px;
Expand Down
8 changes: 4 additions & 4 deletions ...rd/plugins/debugger_v2/tf_debugger_v2_plugin/views/stack_trace/stack_trace_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ 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.
==============================================================================*/
@import 'tensorboard/webapp/theme/tb_theme';
@import '../common/lib';
@use 'tensorboard/webapp/theme/tb_theme';
@use '../common/lib';

.focused-file {
font-weight: bold;
Expand All @@ -32,7 +32,7 @@ limitations under the License.
}

.op-type {
@include debugger-op-type;
@include lib.debugger-op-type;
}

.stack-frame-array {
Expand Down Expand Up @@ -81,7 +81,7 @@ limitations under the License.
}

.stack-trace-container {
@include tb-theme-foreground-prop(border-left, border, 1px solid);
@include tb_theme.tb-theme-foreground-prop(border-left, border, 1px solid);
box-sizing: border-box;
display: flex;
flex-flow: column;
Expand Down
4 changes: 2 additions & 2 deletions tensorboard/webapp/app_container.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.
==============================================================================*/
@import 'tensorboard/webapp/theme/tb_theme';
@use 'tensorboard/webapp/theme/tb_theme';

html,
body {
Expand All @@ -34,7 +34,7 @@ app-header {
flex: 0 0;
z-index: 1; /* The box shadow needs to extend out of the app-header. */

@include tb-dark-theme {
@include tb_theme.tb-dark-theme {
box-shadow: 0 1px 3px 3px rgba(#fff, 0.1);
}
}
Expand Down
6 changes: 3 additions & 3 deletions tensorboard/webapp/core/views/layout_container.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.
==============================================================================*/
@import 'tensorboard/webapp/theme/tb_theme';
@use 'tensorboard/webapp/theme/tb_theme';

:host {
display: flex;
Expand All @@ -29,7 +29,7 @@ limitations under the License.

.resizer,
.expand-collapsed-sidebar {
@include tb-theme-foreground-prop(border-color, border);
@include tb_theme.tb-theme-foreground-prop(border-color, border);
box-sizing: border-box;
flex: 0 0;
justify-self: stretch;
Expand Down Expand Up @@ -72,7 +72,7 @@ limitations under the License.
outline: 3px solid #ccc;
z-index: 1;

@include tb-dark-theme {
@include tb_theme.tb-dark-theme {
outline-color: #777;
border-color: #777;
}
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 @@ -13,18 +13,18 @@ See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/
@use '@angular/material' as mat;
@import 'tensorboard/webapp/theme/tb_theme';
@use 'tensorboard/webapp/theme/tb_theme';

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

margin-bottom: 16px;
}

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

.scrolling-page {
Expand Down
2 changes: 1 addition & 1 deletion tensorboard/webapp/header/header_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.
==============================================================================*/
@import 'tensorboard/webapp/theme/tb_theme';
@use 'tensorboard/webapp/theme/tb_theme';

mat-toolbar {
align-items: center;
Expand Down
6 changes: 3 additions & 3 deletions tensorboard/webapp/header/plugin_selector_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.
==============================================================================*/
@import 'tensorboard/webapp/theme/tb_theme';
@use 'tensorboard/webapp/theme/tb_theme';

:host {
align-items: center;
Expand All @@ -33,7 +33,7 @@ limitations under the License.
width: 144px;

.mdc-text-field {
@include tb-theme-background-prop(background-color, app-bar);
@include tb_theme.tb-theme-background-prop(background-color, app-bar);
// Default padding is "0 16px".
padding: 0 4px;
}
Expand Down Expand Up @@ -172,7 +172,7 @@ mat-option {
}

.mat-mdc-tab-header-pagination {
@include tb-theme-background-prop(background-color, app-bar);
@include tb_theme.tb-theme-background-prop(background-color, app-bar);
}
}
}
Expand Down
3 changes: 3 additions & 0 deletions tensorboard/webapp/metrics/views/BUILD
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ sass_library(
srcs = [
"_common.scss",
],
deps = [
"//tensorboard/webapp/theme",
],
)

sass_binary(
Expand Down
Loading
Loading