Skip to content

Commit 610e3c4

Browse files
committed
refactor(material/theming): normalize config in all typography mixins
1 parent 70ff528 commit 610e3c4

File tree

55 files changed

+117
-55
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+117
-55
lines changed

src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import '@material/menu-surface/mixins.import';
22
@import '@material/list/mixins.import';
33
@import '../mdc-helpers/mdc-helpers';
4+
@import '../../material/core/typography/typography';
45

56
@mixin mat-mdc-autocomplete-color($config-or-theme) {
67
$config: mat-get-color-config($config-or-theme);
@@ -11,7 +12,7 @@
1112
}
1213

1314
@mixin mat-mdc-autocomplete-typography($config-or-theme) {
14-
$config: mat-get-typography-config($config-or-theme);
15+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
1516
@include mat-using-mdc-typography($config) {
1617
@include mdc-menu-surface-core-styles($mat-typography-styles-query);
1718

src/material-experimental/mdc-button/_button-theme.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
@import '@material/icon-button/mixins.import';
66
@import '@material/theme/mixins.import';
77
@import '../../material/core/ripple/ripple';
8+
@import '../../material/core/typography/typography';
89
@import '../mdc-helpers/mdc-helpers';
910

1011
// Selector for the element that has a background color and opacity applied to its ::before and
@@ -167,7 +168,7 @@ $mat-button-state-target: '.mdc-button__ripple';
167168
}
168169

169170
@mixin mat-mdc-button-typography($config-or-theme) {
170-
$config: mat-get-typography-config($config-or-theme);
171+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
171172
@include mat-using-mdc-typography($config) {
172173
@include mdc-button-without-ripple($query: $mat-typography-styles-query);
173174
}
@@ -253,6 +254,7 @@ $mat-button-state-target: '.mdc-button__ripple';
253254
}
254255

255256
@mixin mat-mdc-fab-typography($config-or-theme) {
257+
$config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
256258
$config: mat-get-typography-config($config-or-theme);
257259
@include mat-using-mdc-typography($config) {
258260
@include mdc-fab-without-ripple($query: $mat-typography-styles-query);
@@ -326,6 +328,7 @@ $mat-button-state-target: '.mdc-button__ripple';
326328
}
327329

328330
@mixin mat-mdc-icon-button-typography($config-or-theme) {
331+
$config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
329332
$config: mat-get-typography-config($config-or-theme);
330333
@include mat-using-mdc-typography($config) {
331334
@include mdc-icon-button-without-ripple($query: $mat-typography-styles-query);

src/material-experimental/mdc-card/_card-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@import '@material/card/variables.import';
44
@import '@material/typography/mixins.import';
55
@import '../mdc-helpers/mdc-helpers';
6+
@import '../../material/core/typography/typography';
67

78
@mixin mat-mdc-card-color($config-or-theme) {
89
$config: mat-get-color-config($config-or-theme);
@@ -32,7 +33,7 @@
3233
}
3334

3435
@mixin mat-mdc-card-typography($config-or-theme) {
35-
$config: mat-get-typography-config($config-or-theme);
36+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
3637
@include mat-using-mdc-typography($config) {
3738
@include mdc-card-without-ripple($query: $mat-typography-styles-query);
3839

src/material-experimental/mdc-checkbox/_checkbox-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
@import '@material/ripple/variables.import';
99
@import '@material/theme/functions.import';
1010
@import '../mdc-helpers/mdc-helpers';
11+
@import '../../material/core/typography/typography';
1112

1213
// Mixin that includes the checkbox theme styles with a given palette.
1314
// By default, the MDC checkbox always uses the `secondary` palette.
@@ -110,7 +111,7 @@
110111
}
111112

112113
@mixin mat-mdc-checkbox-typography($config-or-theme) {
113-
$config: mat-get-typography-config($config-or-theme);
114+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
114115
@include mat-using-mdc-typography($config) {
115116
@include mdc-checkbox-without-ripple($query: $mat-typography-styles-query);
116117
@include mdc-form-field-core-styles($query: $mat-typography-styles-query);

src/material-experimental/mdc-chips/_chips-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import '@material/chips/mixins.import';
22
@import '../mdc-helpers/mdc-helpers';
33
@import '@material/theme/functions.import';
4+
@import '../../material/core/typography/typography';
45

56
@mixin _selected-color($color) {
67
@include mdc-chip-fill-color($color, $query: $mat-theme-styles-query);
@@ -70,7 +71,7 @@
7071
}
7172

7273
@mixin mat-mdc-chips-typography($config-or-theme) {
73-
$config: mat-get-typography-config($config-or-theme);
74+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
7475
@include mdc-chip-set-core-styles($query: $mat-typography-styles-query);
7576
@include mat-using-mdc-typography($config) {
7677
@include mdc-chip-without-ripple($query: $mat-typography-styles-query);

src/material-experimental/mdc-core/option/_optgroup-theme.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
@import '@material/theme/mixins.import';
55
@import '../../mdc-helpers/mdc-helpers';
66
@import '../../../material/core/theming/theming';
7+
@import '../../../material/core/typography/typography';
8+
79

810
@mixin mat-mdc-optgroup-color($config-or-theme) {
911
$config: mat-get-color-config($config-or-theme);
@@ -20,7 +22,7 @@
2022
}
2123

2224
@mixin mat-mdc-optgroup-typography($config-or-theme) {
23-
$config: mat-get-typography-config($config-or-theme);
25+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
2426
}
2527

2628
@mixin mat-mdc-optgroup-density($config-or-theme) {

src/material-experimental/mdc-core/option/_option-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
@import '@material/typography/mixins.import';
66
@import '../../mdc-helpers/mdc-helpers';
77
@import '../../../material/core/theming/theming';
8+
@import '../../../material/core/typography/typography';
89

910
@mixin mat-mdc-option-color($config-or-theme) {
1011
$config: mat-get-color-config($config-or-theme);
@@ -43,7 +44,7 @@
4344
}
4445

4546
@mixin mat-mdc-option-typography($config-or-theme) {
46-
$config: mat-get-typography-config($config-or-theme);
47+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
4748

4849
@include mat-using-mdc-typography($config) {
4950
// MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct

src/material-experimental/mdc-dialog/_dialog-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import '../mdc-helpers/mdc-helpers';
22
@import '@material/dialog/mixins.import';
3+
@import '../../material/core/typography/typography';
34

45
@mixin mat-mdc-dialog-color($config-or-theme) {
56
$config: mat-get-color-config($config-or-theme);
@@ -9,7 +10,7 @@
910
}
1011

1112
@mixin mat-mdc-dialog-typography($config-or-theme) {
12-
$config: mat-get-typography-config($config-or-theme);
13+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
1314
@include mat-using-mdc-typography($config) {
1415
@include mdc-dialog-core-styles($query: $mat-typography-styles-query);
1516
}

src/material-experimental/mdc-form-field/_form-field-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
@import '@material/textfield/variables.import';
77
@import '@material/typography/mixins.import';
88
@import '../mdc-helpers/mdc-helpers';
9+
@import '../../material/core/typography/typography';
910
@import 'form-field-density';
1011
@import 'form-field-subscript';
1112
@import 'form-field-focus-overlay';
@@ -60,7 +61,7 @@
6061
}
6162

6263
@mixin mat-mdc-form-field-typography($config-or-theme) {
63-
$config: mat-get-typography-config($config-or-theme);
64+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
6465
@include mat-using-mdc-typography($config) {
6566
@include mdc-text-field-without-ripple($query: $mat-typography-styles-query);
6667
@include mdc-floating-label-core-styles($query: $mat-typography-styles-query);

src/material-experimental/mdc-input/_input-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
@import '../mdc-helpers/mdc-helpers';
2+
@import '../../material/core/typography/typography';
23

34
@mixin mat-mdc-input-color($config-or-theme) {
45
$config: mat-get-color-config($config-or-theme);
56
@include mat-using-mdc-theme($config) {}
67
}
78

89
@mixin mat-mdc-input-typography($config-or-theme) {
9-
$config: mat-get-typography-config($config-or-theme);
10+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
1011
@include mat-using-mdc-typography($config) {}
1112
}
1213

src/material-experimental/mdc-list/_list-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
@import './interactive-list-theme';
66
@import './list-option-theme';
77
@import '../mdc-helpers/mdc-helpers';
8+
@import '../../material/core/typography/typography';
89

910

1011
// TODO: implement mat-list[dense] once density system is in master
@@ -52,7 +53,7 @@
5253
}
5354

5455
@mixin mat-mdc-list-typography($config-or-theme) {
55-
$config: mat-get-typography-config($config-or-theme);
56+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
5657
@include mat-using-mdc-typography($config) {
5758
@include mdc-list-without-ripple($query: $mat-typography-styles-query);
5859
@include mat-mdc-private-list-option-typography-styles();

src/material-experimental/mdc-menu/_menu-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
@import '@material/theme/mixins.import';
77
@import '@material/typography/mixins.import';
88
@import '../mdc-helpers/mdc-helpers';
9+
@import '../../material/core/typography/typography';
910

1011
@mixin mat-mdc-menu-color($config-or-theme) {
1112
$config: mat-get-color-config($config-or-theme);
@@ -44,7 +45,7 @@
4445
}
4546

4647
@mixin mat-mdc-menu-typography($config-or-theme) {
47-
$config: mat-get-typography-config($config-or-theme);
48+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
4849
@include mat-using-mdc-typography($config) {
4950
@include mdc-menu-surface-core-styles($mat-typography-styles-query);
5051

src/material-experimental/mdc-paginator/_paginator-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@import '@material/typography/mixins.import';
33
@import '../../material/core/theming/theming';
44
@import '../../material/core/density/private/compatibility';
5+
@import '../../material/core/typography/typography';
56
@import '../mdc-helpers/mdc-helpers';
67
@import './paginator-variables';
78

@@ -47,7 +48,7 @@
4748
}
4849

4950
@mixin mat-mdc-paginator-typography($config-or-theme) {
50-
$config: mat-get-typography-config($config-or-theme);
51+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
5152

5253
@include mat-using-mdc-typography($config) {
5354
.mat-mdc-paginator {

src/material-experimental/mdc-radio/_radio-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@import '@material/radio/mixins';
44
@import '@material/radio/variables';
55
@import '@material/theme/functions.import';
6+
@import '../../material/core/typography/typography';
67

78
@mixin mat-mdc-radio-color($config-or-theme) {
89
$config: mat-get-color-config($config-or-theme);
@@ -41,7 +42,7 @@
4142
}
4243

4344
@mixin mat-mdc-radio-typography($config-or-theme) {
44-
$config: mat-get-typography-config($config-or-theme);
45+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
4546
@include mat-using-mdc-typography($config) {
4647
@include mdc-radio-without-ripple($query: $mat-typography-styles-query);
4748
@include mdc-form-field-core-styles($query: $mat-typography-styles-query);

src/material-experimental/mdc-select/_select-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
@import '@material/select/variables.import';
55
@import '@material/typography/mixins.import';
66
@import '../mdc-helpers/mdc-helpers';
7+
@import '../../material/core/typography/typography';
78

89
// Gets the color to use for some text that is highlighted while a select has focus.
910
@function _get-mdc-focused-text-color($palette) {
@@ -81,7 +82,7 @@
8182
}
8283

8384
@mixin mat-mdc-select-typography($config-or-theme) {
84-
$config: mat-get-typography-config($config-or-theme);
85+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
8586
@include mat-using-mdc-typography($config) {
8687
@include mdc-menu-surface-core-styles($mat-typography-styles-query);
8788

src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
@import '@material/ripple/variables.import';
55
@import '@material/theme/functions.import';
66
@import '../mdc-helpers/mdc-helpers';
7+
@import '../../material/core/typography/typography';
8+
79

810
@mixin mat-mdc-slide-toggle-color($config-or-theme) {
911
$config: mat-get-color-config($config-or-theme);
@@ -79,7 +81,7 @@
7981
}
8082

8183
@mixin mat-mdc-slide-toggle-typography($config-or-theme) {
82-
$config: mat-get-typography-config($config-or-theme);
84+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
8385
@include mat-using-mdc-typography($config) {
8486
@include mdc-switch-without-ripple($query: $mat-typography-styles-query);
8587
@include mdc-form-field-core-styles($query: $mat-typography-styles-query);

src/material-experimental/mdc-slider/_slider-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// TODO: disabled until we implement the new MDC slider.
22
// @import '@material/slider/mixins.import';
33
@import '../mdc-helpers/mdc-helpers';
4+
@import '../../material/core/typography/typography';
45

56
@mixin mat-mdc-slider-color($config-or-theme) {
67
$config: mat-get-color-config($config-or-theme);
@@ -23,7 +24,7 @@
2324
}
2425

2526
@mixin mat-mdc-slider-typography($config-or-theme) {
26-
$config: mat-get-typography-config($config-or-theme);
27+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
2728
@include mat-using-mdc-typography($config) {
2829
// TODO: disabled until we implement the new MDC slider.
2930
// @include mdc-slider-core-styles($query: $mat-typography-styles-query);

src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@import '@material/theme/functions.import';
33
@import '@material/snackbar/variables.import';
44
@import '@material/snackbar/mixins.import';
5+
@import '../../material/core/typography/typography';
56

67
@mixin mat-mdc-snack-bar-color($config-or-theme) {
78
$config: mat-get-color-config($config-or-theme);
@@ -40,7 +41,7 @@
4041
}
4142

4243
@mixin mat-mdc-snack-bar-typography($config-or-theme) {
43-
$config: mat-get-typography-config($config-or-theme);
44+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
4445
@include mat-using-mdc-typography($config) {
4546
@include mdc-snackbar-core-styles($query: $mat-typography-styles-query);
4647
}

src/material-experimental/mdc-table/_table-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@import '@material/theme/functions.import';
33
@import '@material/data-table/variables.import';
44
@import '@material/data-table/mixins.import';
5+
@import '../../material/core/typography/typography';
56

67
@mixin mat-mdc-table-color($config-or-theme) {
78
$config: mat-get-color-config($config-or-theme);
@@ -43,7 +44,7 @@
4344
}
4445

4546
@mixin mat-mdc-table-typography($config-or-theme) {
46-
$config: mat-get-typography-config($config-or-theme);
47+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
4748
@include mat-using-mdc-typography($config) {
4849
@include mdc-data-table-core-styles($query: $mat-typography-styles-query);
4950
}

src/material-experimental/mdc-tabs/_tabs-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
@import '@material/tab/variables.import';
66
@import '@material/tab-bar/mixins.import';
77
@import '../mdc-helpers/mdc-helpers';
8+
@import '../../material/core/typography/typography';
89

910
@mixin mat-mdc-tabs-color($config-or-theme) {
1011
$config: mat-get-color-config($config-or-theme);
@@ -102,7 +103,7 @@
102103
}
103104

104105
@mixin mat-mdc-tabs-typography($config-or-theme) {
105-
$config: mat-get-typography-config($config-or-theme);
106+
$config: mat-private-typography-to-2018-config(mat-get-typography-config($config-or-theme));
106107
@include mat-using-mdc-typography($config) {
107108
@include mdc-tab-without-ripple($query: $mat-typography-styles-query);
108109
@include mdc-tab-indicator-core-styles($query: $mat-typography-styles-query);

src/material-experimental/popover-edit/_popover-edit.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@import '../../material/core/style/private';
44
@import '../../material/core/theming/palette';
55
@import '../../material/core/theming/theming';
6+
@import '../../material/core/typography/typography';
67
@import '../../material/core/typography/typography-utils';
78

89
@function mat-edit-hover-content-background($direction, $background-color) {
@@ -143,7 +144,7 @@
143144
}
144145

145146
@mixin mat-popover-edit-typography($config-or-theme) {
146-
$config: mat-get-typography-config($config-or-theme);
147+
$config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
147148
[mat-edit-title] {
148149
@include mat-typography-level-to-styles($config, title);
149150
}

src/material/badge/_badge-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
// no style sheet support for directives.
44
@import '../core/theming/palette';
55
@import '../core/theming/theming';
6+
@import '../core/typography/typography';
67
@import '../core/typography/typography-utils';
78
@import '../../cdk/a11y/a11y';
89

@@ -188,7 +189,7 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
188189
}
189190

190191
@mixin mat-badge-typography($config-or-theme) {
191-
$config: mat-get-typography-config($config-or-theme);
192+
$config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
192193
.mat-badge-content {
193194
font-weight: $mat-badge-font-weight;
194195
font-size: $mat-badge-font-size;

0 commit comments

Comments
 (0)