Skip to content

Commit 9f429ac

Browse files
mmalerbammalerba
committed
refactor(multiple): convert components to theme inspection API
Converts: button, icon-button, fab, paginator.
1 parent f1a51f9 commit 9f429ac

File tree

10 files changed

+120
-165
lines changed

10 files changed

+120
-165
lines changed

‎src/material/button/_button-base.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -90,9 +90,9 @@
9090
}
9191
}
9292

93-
// Changes a button theme to exclude the ripple styles.
94-
@function mat-private-button-remove-ripple($theme) {
95-
@return map.merge($theme, (
93+
// Changes a button token set to exclude the ripple styles.
94+
@function mat-private-button-remove-ripple($tokens) {
95+
@return map.merge($tokens, (
9696
focus-state-layer-color: null,
9797
focus-state-layer-opacity: null,
9898
hover-state-layer-color: null,

‎src/material/button/_button-theme-private.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,15 @@
33
@use '@material/theme/theme-color' as mdc-theme-color;
44

55
@use '../core/mdc-helpers/mdc-helpers';
6+
@use '../core/theming/inspection';
67

78
@mixin _ripple-color($color) {
89
--mat-mdc-button-persistent-ripple-color: #{$color};
910
--mat-mdc-button-ripple-color: #{rgba($color, 0.1)};
1011
}
1112

12-
@mixin ripple-theme-styles($config, $is-filled) {
13-
$opacities: if(map.get($config, is-dark),
13+
@mixin ripple-theme-styles($theme, $is-filled) {
14+
$opacities: if(inspection.get-theme-type($theme) == dark,
1415
mdc-ripple-theme.$light-ink-opacities, mdc-ripple-theme.$dark-ink-opacities);
1516

1617
// Ideally these styles would be structural, but MDC bases some of the opacities on the theme.

‎src/material/button/_button-theme.scss‎

Lines changed: 18 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
@use './button-theme-private';
1111
@use '../core/mdc-helpers/mdc-helpers';
1212
@use '../core/theming/theming';
13+
@use '../core/theming/inspection';
1314
@use '../core/typography/typography';
1415

1516
@mixin _button-variant($color) {
@@ -38,10 +39,9 @@
3839
));
3940
}
4041

41-
@mixin color($config-or-theme) {
42-
$config: theming.get-color-config($config-or-theme);
43-
@include mdc-helpers.using-mdc-theme($config) {
44-
$is-dark: map.get($config, is-dark);
42+
@mixin color($theme) {
43+
@include mdc-helpers.using-mdc-theme($theme) {
44+
$is-dark: inspection.get-theme-type($theme) == dark;
4545
$on-surface: mdc-theme-color.prop-value(on-surface);
4646
$surface: mdc-theme-color.prop-value(surface);
4747
$disabled-ink-color: rgba($on-surface, if($is-dark, 0.5, 0.38));
@@ -174,25 +174,24 @@
174174

175175
// Ripple colors
176176
.mat-mdc-button, .mat-mdc-outlined-button {
177-
@include button-theme-private.ripple-theme-styles($config, false);
177+
@include button-theme-private.ripple-theme-styles($theme, false);
178178
}
179179

180180
.mat-mdc-raised-button, .mat-mdc-unelevated-button {
181-
@include button-theme-private.ripple-theme-styles($config, true);
181+
@include button-theme-private.ripple-theme-styles($theme, true);
182182
}
183183
}
184184
}
185185

186-
@mixin typography($config-or-theme) {
187-
$config: typography.private-typography-to-2018-config(
188-
theming.get-typography-config($config-or-theme));
189-
@include mdc-helpers.using-mdc-typography($config) {
186+
@mixin typography($theme) {
187+
@include mdc-helpers.using-mdc-typography($theme) {
190188
@include mdc-button.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
191189
}
192190
}
193191

194-
@mixin density($config-or-theme) {
195-
$density-scale: theming.get-density-config($config-or-theme);
192+
@mixin density($theme) {
193+
$density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
194+
196195
.mat-mdc-button,
197196
.mat-mdc-raised-button,
198197
.mat-mdc-unelevated-button,
@@ -205,21 +204,16 @@
205204
}
206205
}
207206

208-
@mixin theme($theme-or-color-config) {
209-
$theme: theming.private-legacy-get-theme($theme-or-color-config);
207+
@mixin theme($theme) {
210208
@include theming.private-check-duplicate-theme-styles($theme, 'mat-button') {
211-
$color: theming.get-color-config($theme);
212-
$density: theming.get-density-config($theme);
213-
$typography: theming.get-typography-config($theme);
214-
215-
@if $color != null {
216-
@include color($color);
209+
@if inspection.theme-has($theme, color) {
210+
@include color($theme);
217211
}
218-
@if $density != null {
219-
@include density($density);
212+
@if inspection.theme-has($theme, density) {
213+
@include density($theme);
220214
}
221-
@if $typography != null {
222-
@include typography($typography);
215+
@if inspection.theme-has($theme, typography) {
216+
@include typography($theme);
223217
}
224218
}
225219
}

‎src/material/button/_fab-theme.scss‎

Lines changed: 31 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@
77
@use '../core/mdc-helpers/mdc-helpers';
88
@use '../core/style/sass-utils';
99
@use '../core/theming/theming';
10+
@use '../core/theming/inspection';
1011
@use '../core/tokens/m2/mdc/fab' as tokens-mdc-fab;
1112
@use '../core/tokens/m2/mdc/extended-fab' as tokens-mdc-extended-fab;
1213
@use '../core/typography/typography';
1314

14-
@mixin base($config-or-theme) {
15+
@mixin base($theme) {
1516
// Add default values for tokens not related to color, typography, or density.
1617
@include sass-utils.current-selector-or-root() {
1718
@include mdc-fab-theme.theme(tokens-mdc-fab.get-unthemable-tokens());
@@ -21,17 +22,11 @@
2122
}
2223
}
2324

24-
@mixin _fab-variant($config, $foreground, $background) {
25-
$color-config: map.merge(
26-
$config,
27-
(
28-
primary: (
29-
default: $background,
30-
default-contrast: $foreground,
31-
),
32-
)
25+
@mixin _fab-variant($foreground, $background) {
26+
$color-tokens: (
27+
container-color: $background,
28+
icon-color: $foreground
3329
);
34-
$color-tokens: tokens-mdc-fab.get-color-tokens($color-config);
3530
@include mdc-fab-theme.theme($color-tokens);
3631

3732
--mat-mdc-fab-color: #{$foreground};
@@ -41,90 +36,78 @@
4136
@return if(mdc-helpers.variable-safe-contrast-tone($color, $is-dark) == 'dark', #000, #fff);
4237
}
4338

44-
@mixin color($config-or-theme) {
45-
$config: theming.get-color-config($config-or-theme);
39+
@mixin color($theme) {
40+
$is-dark: inspection.get-theme-type($theme) == dark;
4641

47-
$is-dark: map.get($config, is-dark);
48-
$background: map.get($config, background);
49-
50-
$surface: theming.get-color-from-palette($background, card);
51-
$primary: theming.get-color-from-palette(map.get($config, primary));
52-
$accent: theming.get-color-from-palette(map.get($config, accent));
53-
$warn: theming.get-color-from-palette(map.get($config, warn));
42+
$surface: inspection.get-theme-color($theme, background, card);
43+
$primary: inspection.get-theme-color($theme, primary);
44+
$accent: inspection.get-theme-color($theme, accent);
45+
$warn: inspection.get-theme-color($theme, warn);
5446

5547
$on-surface: white-or-black($surface, $is-dark);
5648
$on-primary: white-or-black($primary, $is-dark);
5749
$on-accent: white-or-black($accent, $is-dark);
5850
$on-warn: white-or-black($warn, $is-dark);
5951

6052
$disabled: rgba($on-surface, 0.12);
61-
$on-disabled: rgba($on-surface, if(map.get($config, is-dark), 0.5, 0.38));
53+
$on-disabled: rgba($on-surface, if($is-dark, 0.5, 0.38));
6254

6355
.mat-mdc-fab,
6456
.mat-mdc-mini-fab {
6557
// TODO(wagnermaciel): The ripple-theme-styles mixin depends heavily on
6658
// being wrapped by using-mdc-theme. This workaround needs to be
6759
// revisited w/ a more holistic solution.
68-
@include mdc-helpers.using-mdc-theme($config) {
69-
@include button-theme-private.ripple-theme-styles($config, true);
60+
@include mdc-helpers.using-mdc-theme($theme) {
61+
@include button-theme-private.ripple-theme-styles($theme, true);
7062
}
7163

7264
@include button-theme-private.apply-disabled-style() {
73-
@include _fab-variant($config, $on-disabled, $disabled);
65+
@include _fab-variant($on-disabled, $disabled);
7466
}
7567

7668
&.mat-unthemed {
77-
@include _fab-variant($config, $on-surface, $surface);
69+
@include _fab-variant($on-surface, $surface);
7870
}
7971

8072
&.mat-primary {
81-
@include _fab-variant($config, $on-primary, $primary);
73+
@include _fab-variant($on-primary, $primary);
8274
}
8375

8476
&.mat-accent {
85-
@include _fab-variant($config, $on-accent, $accent);
77+
@include _fab-variant($on-accent, $accent);
8678
}
8779

8880
&.mat-warn {
89-
@include _fab-variant($config, $on-warn, $warn);
81+
@include _fab-variant($on-warn, $warn);
9082
}
9183
}
9284
}
9385

94-
@mixin typography($config-or-theme) {
95-
$config: typography.private-typography-to-2018-config(
96-
theming.get-typography-config($config-or-theme)
97-
);
98-
99-
@include mdc-helpers.using-mdc-typography($config) {
86+
@mixin typography($theme) {
87+
@include mdc-helpers.using-mdc-typography($theme) {
10088
@include mdc-fab.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
10189
}
10290

103-
$typography-tokens: tokens-mdc-extended-fab.get-typography-tokens($config);
91+
$typography-tokens: tokens-mdc-extended-fab.get-typography-tokens($theme);
10492
.mat-mdc-extended-fab {
10593
@include mdc-extended-fab-theme.theme($typography-tokens);
10694
}
10795
}
10896

109-
@mixin density($config-or-theme) {
97+
@mixin density($theme) {
11098
}
11199

112-
@mixin theme($theme-or-color-config) {
113-
$theme: theming.private-legacy-get-theme($theme-or-color-config);
100+
@mixin theme($theme) {
114101
@include theming.private-check-duplicate-theme-styles($theme, 'mat-fab') {
115-
$color: theming.get-color-config($theme);
116-
$density: theming.get-density-config($theme);
117-
$typography: theming.get-typography-config($theme);
118-
119102
@include base($theme);
120-
@if $color != null {
121-
@include color($color);
103+
@if inspection.theme-has($theme, color) {
104+
@include color($theme);
122105
}
123-
@if $density != null {
124-
@include density($density);
106+
@if inspection.theme-has($theme, density) {
107+
@include density($theme);
125108
}
126-
@if $typography != null {
127-
@include typography($typography);
109+
@if inspection.theme-has($theme, typography) {
110+
@include typography($theme);
128111
}
129112
}
130113
}

‎src/material/button/_icon-button-theme.scss‎

Lines changed: 19 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77

88
@use './button-theme-private';
99
@use '../core/theming/theming';
10+
@use '../core/theming/inspection';
1011

1112
$_icon-size: 24px;
1213

@@ -23,33 +24,31 @@ $_icon-size: 24px;
2324
@return if($is-dark, 'light', 'dark');
2425
}
2526

26-
@mixin color($config-or-theme) {
27-
$config: theming.get-color-config($config-or-theme);
28-
$color-tokens: tokens-mdc-icon-button.get-color-tokens($config);
29-
$background-palette: map.get($config, background);
30-
$surface: theming.get-color-from-palette($background-palette, card);
31-
$is-dark: map.get($config, is-dark);
27+
@mixin color($theme) {
28+
$color-tokens: tokens-mdc-icon-button.get-color-tokens($theme);
29+
$surface: inspection.get-theme-color($theme, background, card);
30+
$is-dark: inspection.get-theme-type($theme) == dark;
3231
$on-surface: if(_variable-safe-contrast-tone($surface, $is-dark) == 'dark', #000, #fff);
3332

3433
.mat-mdc-icon-button {
35-
@include button-theme-private.ripple-theme-styles($config, false);
34+
@include button-theme-private.ripple-theme-styles($theme, false);
3635
@include mdc-icon-button-theme.theme($color-tokens);
3736
@include _ripple-color($on-surface);
3837

3938
&.mat-primary {
40-
$color: theming.get-color-from-palette(map.get($config, primary));
39+
$color: inspection.get-theme-color($theme, primary);
4140
@include mdc-icon-button-theme.theme((icon-color: $color));
4241
@include _ripple-color($color);
4342
}
4443

4544
&.mat-accent {
46-
$color: theming.get-color-from-palette(map.get($config, accent));
45+
$color: inspection.get-theme-color($theme, accent);
4746
@include mdc-icon-button-theme.theme((icon-color: $color));
4847
@include _ripple-color($color);
4948
}
5049

5150
&.mat-warn {
52-
$color: theming.get-color-from-palette(map.get($config, warn));
51+
$color: inspection.get-theme-color($theme, warn);
5352
@include mdc-icon-button-theme.theme((icon-color: $color));
5453
@include _ripple-color($color);
5554
}
@@ -64,11 +63,11 @@ $_icon-size: 24px;
6463
}
6564
}
6665

67-
@mixin typography($config-or-theme) {
66+
@mixin typography($theme) {
6867
}
6968

70-
@mixin density($config-or-theme) {
71-
$density-scale: theming.get-density-config($config-or-theme);
69+
@mixin density($theme) {
70+
$density-scale: inspection.get-theme-density($theme);
7271
// Manually apply the expected density theming, and include the padding
7372
// as it was applied before
7473
$calculated-size: mdc-density-functions.prop-value(
@@ -104,21 +103,16 @@ $_icon-size: 24px;
104103
}
105104
}
106105

107-
@mixin theme($theme-or-color-config) {
108-
$theme: theming.private-legacy-get-theme($theme-or-color-config);
106+
@mixin theme($theme) {
109107
@include theming.private-check-duplicate-theme-styles($theme, 'mat-icon-button') {
110-
$color: theming.get-color-config($theme);
111-
$density: theming.get-density-config($theme);
112-
$typography: theming.get-typography-config($theme);
113-
114-
@if $color != null {
115-
@include color($color);
108+
@if inspection.theme-has($theme, color) {
109+
@include color($theme);
116110
}
117-
@if $density != null {
118-
@include density($density);
111+
@if inspection.theme-has($theme, density) {
112+
@include density($theme);
119113
}
120-
@if $typography != null {
121-
@include typography($typography);
114+
@if inspection.theme-has($theme, typography) {
115+
@include typography($theme);
122116
}
123117
}
124118
}

0 commit comments

Comments
 (0)