Skip to content

Commit 6d0eb36

Browse files
rileyajonesrileyajones
committed
change strategy for differentiating material 2 styles
1 parent edc76b9 commit 6d0eb36

30 files changed

+191
-219
lines changed

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

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,12 @@ See the License for the specific language governing permissions and
1313
limitations under the License.
1414
==============================================================================*/
1515
@use '@angular/material' as mat;
16+
@use '@angular/material' as matm2;
17+
@use '@angular/material' as matm2var;
1618

1719
@mixin debugger-op-type {
18-
background-color: /*m2*/ mat.get-color-from-palette(
19-
/*m2$*/ mat.$blue-grey-palette,
20+
background-color: matm2.get-color-from-palette(
21+
matm2var.$blue-grey-palette,
2022
50
2123
);
2224
@include tb-theme-foreground-prop(border, border, 1px solid);
@@ -29,18 +31,19 @@ limitations under the License.
2931
width: max-content;
3032

3133
@include tb-dark-theme {
32-
background-color: /*m2*/ mat.get-color-from-palette(
33-
/*m2$*/ mat.$blue-grey-palette,
34+
background-color: matm2.get-color-from-palette(
35+
matm2var.$blue-grey-palette,
3436
700
3537
);
3638
}
3739
}
3840

3941
@mixin debugger-highlight-background {
4042
background-color: #fff099;
43+
4144
@include tb-dark-theme {
42-
background-color: /*m2*/ mat.get-color-from-palette(
43-
/*m2$*/ mat.$orange-palette,
45+
background-color: matm2.get-color-from-palette(
46+
matm2var.$orange-palette,
4447
900
4548
);
4649
}

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ See the License for the specific language governing permissions and
1313
limitations under the License.
1414
==============================================================================*/
1515
@use '@angular/material' as mat;
16+
@use '@angular/material' as matm2;
17+
@use '@angular/material' as matm2var;
1618
@import 'tensorboard/webapp/theme/tb_theme';
1719

1820
.debug-tensor-values-table {
@@ -45,19 +47,16 @@ limitations under the License.
4547
}
4648

4749
.focus-execution-container {
48-
background-color: /*m2*/ mat.get-color-from-palette(
49-
/*m2$*/ mat.$orange-palette,
50-
200
51-
);
50+
background-color: matm2.get-color-from-palette(matm2var.$orange-palette, 200);
5251
border-radius: 4px;
5352
font-size: 12px;
5453
height: 120px;
5554
padding: 5px;
5655
width: 360px;
5756

5857
@include tb-dark-theme {
59-
background-color: /*m2*/ mat.get-color-from-palette(
60-
/*m2$*/ mat.$orange-palette,
58+
background-color: matm2.get-color-from-palette(
59+
matm2var.$orange-palette,
6160
900
6261
);
6362
}

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ See the License for the specific language governing permissions and
1313
limitations under the License.
1414
==============================================================================*/
1515
@use '@angular/material' as mat;
16+
@use '@angular/material' as matm2;
17+
@use '@angular/material' as matm2var;
1618
@import 'tensorboard/webapp/theme/tb_theme';
1719
@import '../common/lib';
1820

@@ -31,7 +33,8 @@ limitations under the License.
3133
padding: 2px 6px;
3234
text-align: right;
3335
width: 200px;
34-
$grey-600: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$grey-palette, 600);
36+
$grey-600: matm2.get-color-from-palette(matm2var.$grey-palette, 600);
37+
3538
@include tb-dark-theme {
3639
box-shadow: 1px 3px $grey-600;
3740
}

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,20 @@ See the License for the specific language governing permissions and
1313
limitations under the License.
1414
==============================================================================*/
1515
@use '@angular/material' as mat;
16+
@use '@angular/material' as matm2;
17+
@use '@angular/material' as matm2var;
1618
@import 'tensorboard/webapp/theme/tb_theme';
1719

1820
.message {
1921
.warning {
20-
color: /*m2*/ mat.get-color-from-palette($tb-warn);
22+
color: matm2.get-color-from-palette($tb-warn);
2123
}
24+
2225
margin-bottom: 16px;
2326
}
2427

2528
.note-1 {
26-
color: /*m2*/ mat.get-color-from-palette($tb-accent);
29+
color: matm2.get-color-from-palette($tb-accent);
2730
}
2831

2932
.scrolling-page {

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ See the License for the specific language governing permissions and
1313
limitations under the License.
1414
==============================================================================*/
1515
@use '@angular/material' as mat;
16+
@use '@angular/material' as matm2;
17+
@use '@angular/material' as matm2var;
1618
@import 'tensorboard/webapp/theme/tb_theme';
1719
@import '../common';
1820

@@ -153,7 +155,7 @@ $_title-to-heading-gap: 12px;
153155
}
154156

155157
:host ::ng-deep .mat-slider-min-value .mat-slider-thumb {
156-
background-color: /*m2*/ mat.get-color-from-palette($tb-primary);
158+
background-color: matm2.get-color-from-palette($tb-primary);
157159
}
158160

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

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ See the License for the specific language governing permissions and
1313
limitations under the License.
1414
==============================================================================*/
1515
@use '@angular/material' as mat;
16+
@use '@angular/material' as matm2;
17+
@use '@angular/material' as matm2var;
1618
@import 'tensorboard/webapp/theme/tb_theme';
1719
@import '../common';
1820

@@ -42,6 +44,7 @@ $_data_table_initial_height: 100px;
4244
.always-visible {
4345
display: flex;
4446
flex-direction: column;
47+
4548
&:not(:has(.expand-button)) {
4649
flex-grow: 1;
4750
}
@@ -196,13 +199,10 @@ $_data_table_initial_height: 100px;
196199
align-items: center;
197200

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

201204
@include tb-dark-theme {
202-
color: /*m2*/ mat.get-color-from-palette(
203-
$tb-dark-foreground,
204-
secondary-text
205-
);
205+
color: matm2.get-color-from-palette($tb-dark-foreground, secondary-text);
206206
background-color: map-get($tb-dark-background, background);
207207
}
208208
}

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,22 @@ See the License for the specific language governing permissions and
1313
limitations under the License.
1414
==============================================================================*/
1515
@use '@angular/material' as mat;
16+
@use '@angular/material' as matm2;
17+
@use '@angular/material' as matm2var;
1618
@import 'tensorboard/webapp/theme/tb_theme';
1719

1820
:host {
19-
color: /*m2*/ mat.get-color-from-palette(
20-
map-get(/*m2*/ mat.get-color-config($tb-theme), warn),
21+
color: matm2.get-color-from-palette(
22+
map-get(matm2.get-color-config($tb-theme), warn),
2123
700
2224
);
2325
height: 1em;
2426
line-height: 0;
2527
display: inline-flex;
2628

2729
@include tb-dark-theme {
28-
color: /*m2*/ mat.get-color-from-palette(
29-
map-get(/*m2*/ mat.get-color-config($tb-dark-theme), warn),
30+
color: matm2.get-color-from-palette(
31+
map-get(matm2.get-color-config($tb-dark-theme), warn),
3032
700
3133
);
3234
}

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ See the License for the specific language governing permissions and
1313
limitations under the License.
1414
==============================================================================*/
1515
@use '@angular/material' as mat;
16+
@use '@angular/material' as matm2;
17+
@use '@angular/material' as matm2var;
1618
@import 'tensorboard/webapp/theme/tb_theme';
1719

1820
.tag-filter {
@@ -28,7 +30,7 @@ tb-filter-input {
2830
@include tb-theme-foreground-prop(color, text);
2931

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

3335
color: $_error-color;
3436

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

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ See the License for the specific language governing permissions and
1313
limitations under the License.
1414
==============================================================================*/
1515
@use '@angular/material' as mat;
16+
@use '@angular/material' as matm2;
17+
@use '@angular/material' as matm2var;
1618
@import 'tensorboard/webapp/theme/tb_theme';
1719
@import '../common';
1820

@@ -86,10 +88,7 @@ mat-button-toggle-group.filter-view {
8688
.main,
8789
.sidebar {
8890
contain: strict;
89-
background-color: /*m2*/ mat.get-color-from-palette(
90-
$tb-background,
91-
background
92-
);
91+
background-color: matm2.get-color-from-palette($tb-background, background);
9392
overflow-x: hidden;
9493
overflow-y: auto;
9594
will-change: transform, scroll-position;
@@ -100,7 +99,7 @@ mat-button-toggle-group.filter-view {
10099
}
101100

102101
.main {
103-
background-color: /*m2*/ mat.get-color-from-palette($tf-slate, 200);
102+
background-color: matm2.get-color-from-palette($tf-slate, 200);
104103
flex: 1 1;
105104
display: flex;
106105
flex-direction: column;
@@ -156,22 +155,16 @@ mat-button-toggle-group.filter-view {
156155

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

162161
@include tb-dark-theme {
163-
color: /*m2*/ mat.get-color-from-palette(
164-
$tb-dark-foreground,
165-
secondary-text
166-
);
162+
color: matm2.get-color-from-palette($tb-dark-foreground, secondary-text);
167163
}
168164

169165
&.checked {
170166
@include tb-theme-background-prop(background-color, selected-button);
171-
border-color: /*m2*/ mat.get-color-from-palette(
172-
/*m2$*/ mat.$grey-palette,
173-
300
174-
);
167+
border-color: matm2.get-color-from-palette(matm2var.$grey-palette, 300);
175168
}
176169

177170
::ng-deep .mat-button-wrapper {
@@ -185,10 +178,7 @@ mat-button-toggle-group.filter-view {
185178
}
186179

187180
.slide-out-menu {
188-
background-color: /*m2*/ mat.get-color-from-palette(
189-
$tb-background,
190-
background
191-
);
181+
background-color: matm2.get-color-from-palette($tb-background, background);
192182
// Make the menu the full height minus the size of the toolbar.
193183
height: calc(100% - 49px);
194184
position: absolute;

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ See the License for the specific language governing permissions and
1313
limitations under the License.
1414
==============================================================================*/
1515
@use '@angular/material' as mat;
16+
@use '@angular/material' as matm2;
17+
@use '@angular/material' as matm2var;
1618
@import 'tensorboard/webapp/theme/tb_theme';
1719
@import '../common';
1820

@@ -65,7 +67,7 @@ mat-icon {
6567

6668
.new-card-pinned {
6769
animation: pinned-view-fade-out 3s linear;
68-
background: /*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$red-palette, 500);
70+
background: matm2.get-color-from-palette(matm2var.$red-palette, 500);
6971
border-radius: 5px;
7072
color: #fff;
7173
display: inline-block;

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

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ See the License for the specific language governing permissions and
1313
limitations under the License.
1414
==============================================================================*/
1515
@use '@angular/material' as mat;
16+
@use '@angular/material' as matm2;
17+
@use '@angular/material' as matm2var;
1618
@import 'tensorboard/webapp/theme/tb_theme';
1719

1820
:host {
@@ -26,13 +28,10 @@ limitations under the License.
2628

2729
.notice {
2830
background-color: rgba(
29-
/*m2*/ mat.get-color-from-palette(/*m2$*/ mat.$yellow-palette, 200),
31+
matm2.get-color-from-palette(matm2var.$yellow-palette, 200),
3032
0.85
3133
);
32-
$yellow-500: /*m2*/ mat.get-color-from-palette(
33-
/*m2$*/ mat.$yellow-palette,
34-
500
35-
);
34+
$yellow-500: matm2.get-color-from-palette(matm2var.$yellow-palette, 500);
3635
border-bottom: 1px solid $yellow-500;
3736
color: map-get($tb-foreground, text);
3837
display: block;
@@ -45,18 +44,15 @@ tb-dashboard-layout {
4544
}
4645

4746
nav {
48-
background-color: /*m2*/ mat.get-color-from-palette(
49-
$tb-background,
50-
background
51-
);
52-
$border: /*m2*/ mat.get-color-from-palette($tb-foreground, border);
47+
background-color: matm2.get-color-from-palette($tb-background, background);
48+
$border: matm2.get-color-from-palette($tb-foreground, border);
5349
border-right: 1px solid $border;
5450
flex: none;
5551
width: 340px;
5652

5753
@include tb-dark-theme {
5854
background-color: map-get($tb-dark-background, background);
59-
border-right-color: /*m2*/ mat.get-color-from-palette(
55+
border-right-color: matm2.get-color-from-palette(
6056
$tb-dark-foreground,
6157
border
6258
);

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ See the License for the specific language governing permissions and
1313
limitations under the License.
1414
==============================================================================*/
1515
@use '@angular/material' as mat;
16+
@use '@angular/material' as matm2;
17+
@use '@angular/material' as matm2var;
1618
@import 'tensorboard/webapp/theme/tb_theme';
1719

1820
:host {

0 commit comments

Comments
 (0)