Skip to content

Commit ed01f15

Browse files
andrewseguinandrewseguin
committed
Add a prefix comment for M2 Sass APIs to allow transformations to occur internally
1 parent f5ab715 commit ed01f15

28 files changed

+109
-109
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ limitations under the License.
1515
@use '@angular/material' as mat;
1616

1717
@mixin debugger-op-type {
18-
background-color: mat.get-color-from-palette(mat.$blue-grey-palette, 50);
18+
background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$blue-grey-palette, 50);
1919
@include tb-theme-foreground-prop(border, border, 1px solid);
2020
border-radius: 4px;
2121
font-family: 'Roboto Mono', monospace;
@@ -26,13 +26,13 @@ limitations under the License.
2626
width: max-content;
2727

2828
@include tb-dark-theme {
29-
background-color: mat.get-color-from-palette(mat.$blue-grey-palette, 700);
29+
background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$blue-grey-palette, 700);
3030
}
3131
}
3232

3333
@mixin debugger-highlight-background {
3434
background-color: #fff099;
3535
@include tb-dark-theme {
36-
background-color: mat.get-color-from-palette(mat.$orange-palette, 900);
36+
background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 900);
3737
}
3838
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,15 +45,15 @@ limitations under the License.
4545
}
4646

4747
.focus-execution-container {
48-
background-color: mat.get-color-from-palette(mat.$orange-palette, 200);
48+
background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 200);
4949
border-radius: 4px;
5050
font-size: 12px;
5151
height: 120px;
5252
padding: 5px;
5353
width: 360px;
5454

5555
@include tb-dark-theme {
56-
background-color: mat.get-color-from-palette(mat.$orange-palette, 900);
56+
background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 900);
5757
}
5858
}
5959

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ limitations under the License.
3232
text-align: right;
3333
width: 200px;
3434
@include tb-dark-theme {
35-
box-shadow: 1px 3px mat.get-color-from-palette(mat.$gray-palette, 600);
35+
box-shadow: 1px 3px /*m2*/mat.get-color-from-palette(mat.$gray-palette, 600);
3636
}
3737
}
3838

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,13 @@ limitations under the License.
1717

1818
.message {
1919
.warning {
20-
color: mat.get-color-from-palette($tb-warn);
20+
color: /*m2*/mat.get-color-from-palette($tb-warn);
2121
}
2222
margin-bottom: 16px;
2323
}
2424

2525
.note-1 {
26-
color: mat.get-color-from-palette($tb-accent);
26+
color: /*m2*/mat.get-color-from-palette($tb-accent);
2727
}
2828

2929
.scrolling-page {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ $_title-to-heading-gap: 12px;
153153
}
154154

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

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

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -196,10 +196,10 @@ $_data_table_initial_height: 100px;
196196
align-items: center;
197197

198198
.expand-button {
199-
color: mat.get-color-from-palette($tb-foreground, secondary-text);
199+
color: /*m2*/mat.get-color-from-palette($tb-foreground, secondary-text);
200200

201201
@include tb-dark-theme {
202-
color: mat.get-color-from-palette($tb-dark-foreground, secondary-text);
202+
color: /*m2*/mat.get-color-from-palette($tb-dark-foreground, secondary-text);
203203
background-color: map-get($tb-dark-background, background);
204204
}
205205
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,17 @@ limitations under the License.
1616
@import 'tensorboard/webapp/theme/tb_theme';
1717

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

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

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ tb-filter-input {
2828
@include tb-theme-foreground-prop(color, text);
2929

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

3333
color: $_error-color;
3434

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ mat-button-toggle-group.filter-view {
8686
.main,
8787
.sidebar {
8888
contain: strict;
89-
background-color: mat.get-color-from-palette($tb-background, background);
89+
background-color: /*m2*/mat.get-color-from-palette($tb-background, background);
9090
overflow-x: hidden;
9191
overflow-y: auto;
9292
will-change: transform, scroll-position;
@@ -97,7 +97,7 @@ mat-button-toggle-group.filter-view {
9797
}
9898

9999
.main {
100-
background-color: mat.get-color-from-palette($tf-slate, 200);
100+
background-color: /*m2*/mat.get-color-from-palette($tf-slate, 200);
101101
flex: 1 1;
102102
display: flex;
103103
flex-direction: column;
@@ -153,16 +153,16 @@ mat-button-toggle-group.filter-view {
153153

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

159159
@include tb-dark-theme {
160-
color: mat.get-color-from-palette($tb-dark-foreground, secondary-text);
160+
color: /*m2*/mat.get-color-from-palette($tb-dark-foreground, secondary-text);
161161
}
162162

163163
&.checked {
164164
@include tb-theme-background-prop(background-color, selected-button);
165-
border-color: mat.get-color-from-palette(mat.$gray-palette, 300);
165+
border-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 300);
166166
}
167167

168168
::ng-deep .mat-button-wrapper {
@@ -176,7 +176,7 @@ mat-button-toggle-group.filter-view {
176176
}
177177

178178
.slide-out-menu {
179-
background-color: mat.get-color-from-palette($tb-background, background);
179+
background-color: /*m2*/mat.get-color-from-palette($tb-background, background);
180180
// Make the menu the full height minus the size of the toolbar.
181181
height: calc(100% - 49px);
182182
position: absolute;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ mat-icon {
6565

6666
.new-card-pinned {
6767
animation: pinned-view-fade-out 3s linear;
68-
background: mat.get-color-from-palette(mat.$red-palette, 500);
68+
background: /*m2*/mat.get-color-from-palette(mat.$red-palette, 500);
6969
border-radius: 5px;
7070
color: #fff;
7171
display: inline-block;

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,10 @@ limitations under the License.
2626

2727
.notice {
2828
background-color: rgba(
29-
mat.get-color-from-palette(mat.$yellow-palette, 200),
29+
/*m2*/mat.get-color-from-palette(mat.$yellow-palette, 200),
3030
0.85
3131
);
32-
border-bottom: 1px solid mat.get-color-from-palette(mat.$yellow-palette, 500);
32+
border-bottom: 1px solid /*m2*/mat.get-color-from-palette(mat.$yellow-palette, 500);
3333
color: map-get($tb-foreground, text);
3434
display: block;
3535
flex: 0 0;
@@ -41,14 +41,14 @@ tb-dashboard-layout {
4141
}
4242

4343
nav {
44-
background-color: mat.get-color-from-palette($tb-background, background);
45-
border-right: 1px solid mat.get-color-from-palette($tb-foreground, border);
44+
background-color: /*m2*/mat.get-color-from-palette($tb-background, background);
45+
border-right: 1px solid /*m2*/mat.get-color-from-palette($tb-foreground, border);
4646
flex: none;
4747
width: 340px;
4848

4949
@include tb-dark-theme {
5050
background-color: map-get($tb-dark-background, background);
51-
border-right-color: mat.get-color-from-palette($tb-dark-foreground, border);
51+
border-right-color: /*m2*/mat.get-color-from-palette($tb-dark-foreground, border);
5252
}
5353
}
5454

‎tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ limitations under the License.
1515
@use '@angular/material' as mat;
1616
@import 'tensorboard/webapp/theme/tb_theme';
1717

18-
$_accent: map-get(mat.get-color-config($tb-theme), accent);
18+
$_accent: map-get(/*m2*/mat.get-color-config($tb-theme), accent);
1919

2020
:host ::ng-deep .mat-tab-label {
2121
min-width: 0;
@@ -39,15 +39,15 @@ $_accent: map-get(mat.get-color-config($tb-theme), accent);
3939
}
4040

4141
.highlighted {
42-
background-color: mat.get-color-from-palette(mat.$gray-palette, 200);
42+
background-color: /*m2*/mat.get-color-from-palette(mat.$gray-palette, 200);
4343
}
4444

4545
.highlight-bottom {
46-
border-bottom: 2px solid mat.get-color-from-palette($_accent);
46+
border-bottom: 2px solid /*m2*/mat.get-color-from-palette($_accent);
4747
}
4848

4949
.highlight-top {
50-
border-top: 2px solid mat.get-color-from-palette($_accent);
50+
border-top: 2px solid /*m2*/mat.get-color-from-palette($_accent);
5151
}
5252

5353
.footer {
@@ -60,19 +60,19 @@ $_accent: map-get(mat.get-color-config($tb-theme), accent);
6060
align-items: center;
6161
justify-content: flex-end;
6262
padding: 4px;
63-
border-top: 1px solid mat.get-color-from-palette($tb-foreground, border);
63+
border-top: 1px solid /*m2*/mat.get-color-from-palette($tb-foreground, border);
6464

6565
@include tb-dark-theme {
66-
border-color: mat.get-color-from-palette($tb-dark-foreground, border);
66+
border-color: /*m2*/mat.get-color-from-palette($tb-dark-foreground, border);
6767
}
6868
}
6969

7070
.close-button {
71-
color: mat.get-color-from-palette($tb-foreground, secondary-text);
71+
color: /*m2*/mat.get-color-from-palette($tb-foreground, secondary-text);
7272
width: 84px;
7373

7474
@include tb-dark-theme {
75-
color: mat.get-color-from-palette($tb-dark-foreground, secondary-text);
75+
color: /*m2*/mat.get-color-from-palette($tb-dark-foreground, secondary-text);
7676
}
7777
}
7878

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ section .control-row:not(:has(+ .control-row > mat-checkbox)):not(:last-child) {
5858

5959
.slider-input {
6060
background-color: inherit;
61-
border: 1px solid mat.get-color-from-palette($tf-slate, 500);
61+
border: 1px solid /*m2*/mat.get-color-from-palette($tf-slate, 500);
6262
border-radius: 2px;
6363
box-sizing: border-box;
6464
color: inherit;
@@ -67,7 +67,7 @@ section .control-row:not(:has(+ .control-row > mat-checkbox)):not(:last-child) {
6767
padding: 0 4px;
6868

6969
@include tb-dark-theme {
70-
border-color: mat.get-color-from-palette($tf-slate, 700);
70+
border-color: /*m2*/mat.get-color-from-palette($tf-slate, 700);
7171
}
7272
}
7373
}
@@ -127,9 +127,9 @@ mat-slider {
127127
align-items: center;
128128
}
129129
&.toggle-opened {
130-
background-color: mat.get-color-from-palette(mat.$grey-palette, 200);
130+
background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$grey-palette, 200);
131131
@include tb-dark-theme {
132-
background-color: mat.get-color-from-palette(mat.$grey-palette, 800);
132+
background-color: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$grey-palette, 800);
133133
}
134134
}
135135
mat-icon {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ limitations under the License.
2121

2222
.red-dot {
2323
$_dim: 10px;
24-
background-color: mat.get-color-from-palette(mat.$red-palette, 700);
24+
background-color: /*m2*/mat.get-color-from-palette(mat.$red-palette, 700);
2525
border-radius: $_dim * 0.5;
2626
height: $_dim;
2727
position: absolute;
@@ -52,7 +52,7 @@ limitations under the License.
5252
}
5353

5454
.category-icon {
55-
color: mat.get-color-from-palette(mat.$blue-palette, 700);
55+
color: /*m2*/mat.get-color-from-palette(mat.$blue-palette, 700);
5656
height: 15px;
5757
margin-right: 6px;
5858
vertical-align: middle;

‎tensorboard/webapp/runs/views/runs_table/runs_data_table.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ $_circle-size: 20px;
2828

2929
.run-color-swatch {
3030
border-radius: 100%;
31-
border: 1px solid mat.get-color-from-palette($tb-foreground, border);
31+
border: 1px solid /*m2*/mat.get-color-from-palette($tb-foreground, border);
3232
height: $_circle-size;
3333
width: $_circle-size;
3434
outline: none;

‎tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ limitations under the License.
1919
font-size: 16px;
2020

2121
.label {
22-
color: mat.get-color-from-palette($tb-foreground, secondary-text);
22+
color: /*m2*/mat.get-color-from-palette($tb-foreground, secondary-text);
2323
font-size: 0.9em;
2424
margin: 10px 0;
2525
padding: 0 16px;

‎tensorboard/webapp/theme/_tb_palette.scss

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -43,15 +43,15 @@ $tf-slate: (
4343
several orange values, but only one of them (--tb-orange-strong) is used
4444
widely. */
4545
$tf-orange: (
46-
100: mat.get-color-from-palette(mat.$orange-palette, 100),
47-
200: mat.get-color-from-palette(mat.$orange-palette, 200),
48-
300: mat.get-color-from-palette(mat.$orange-palette, 300),
49-
400: mat.get-color-from-palette(mat.$orange-palette, 400),
50-
500: mat.get-color-from-palette(mat.$orange-palette, 500),
51-
600: mat.get-color-from-palette(mat.$orange-palette, 600),
52-
700: mat.get-color-from-palette(mat.$orange-palette, 700),
53-
800: mat.get-color-from-palette(mat.$orange-palette, 800),
54-
900: mat.get-color-from-palette(mat.$orange-palette, 900),
46+
100: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 100),
47+
200: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 200),
48+
300: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 300),
49+
400: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 400),
50+
500: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 500),
51+
600: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 600),
52+
700: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 700),
53+
800: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 800),
54+
900: /*m2*/mat.get-color-from-palette(/*m2$*/mat.$orange-palette, 900),
5555
contrast: (
5656
100: rgba(black, 0.87),
5757
200: rgba(black, 0.87),

0 commit comments

Comments
 (0)