Skip to content

Commit 4f3640e

Browse files
crisbetocrisbeto
authored
refactor(material/core): remove MDC theme patches (#28324)
Now that we're completely switched over to tokens, we don't need the code that was patching MDC's theming API with our own values.
1 parent 72525c8 commit 4f3640e

File tree

3 files changed

+21
-208
lines changed

3 files changed

+21
-208
lines changed

‎src/material/_index.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -143,11 +143,11 @@
143143
tree-base;
144144

145145
// MDC Helpers
146-
@forward './core/mdc-helpers/mdc-helpers' as private-* show private-using-mdc-theme,
147-
private-using-mdc-typography, private-disable-mdc-fallback-declarations,
148-
private-typography-config-level-from-mdc, private-if-touch-targets-unsupported,
149-
$private-mdc-base-styles-query, $private-mdc-base-styles-without-animation-query,
150-
$private-mdc-theme-styles-query, $private-mdc-typography-styles-query;
146+
@forward './core/mdc-helpers/mdc-helpers' as private-* show
147+
private-disable-mdc-fallback-declarations, private-typography-config-level-from-mdc,
148+
private-if-touch-targets-unsupported, $private-mdc-base-styles-query,
149+
$private-mdc-base-styles-without-animation-query, $private-mdc-theme-styles-query,
150+
$private-mdc-typography-styles-query;
151151

152152
// New theming APIs:
153153
@forward './core/theming/inspection' show get-theme-version, get-theme-type, get-theme-color,

‎src/material/core/mdc-helpers/_mdc-helpers.scss

Lines changed: 0 additions & 184 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
// TODO(mmalerba): this file should be split into separate cohesive partials for things like
22
// "theming", "typography", "core".
3-
@use '../theming/inspection';
43
@use '../typography/typography';
54
@use '@material/feature-targeting' as mdc-feature-targeting;
65
@use '@material/typography' as mdc-typography;
76
@use '@material/theme/theme-color' as mdc-theme-color;
87
@use '@material/theme/css' as mdc-theme-css;
9-
@use 'sass:map';
108
@use 'sass:meta';
119

1210
// A set of standard queries to use with MDC's queryable mixins.
@@ -16,71 +14,6 @@ $mdc-base-styles-without-animation-query:
1614
$mdc-theme-styles-query: color;
1715
$mdc-typography-styles-query: typography;
1816

19-
// Mappings from Angular Material's typography levels to MDC's typography levels.
20-
$mat-typography-mdc-level-mappings: (
21-
headline-1: headline1,
22-
headline-2: headline2,
23-
headline-3: headline3,
24-
headline-4: headline4,
25-
headline-5: headline5,
26-
headline-6: headline6,
27-
subtitle-1: subtitle1,
28-
subtitle-2: subtitle2,
29-
body-1: body1,
30-
body-2: body2,
31-
caption: caption,
32-
button: button,
33-
overline: overline
34-
);
35-
36-
// Converts an Angular Material typography level config to an MDC one.
37-
@function typography-level-config-to-mdc($theme, $mat-level) {
38-
$mdc-level: map.get($mat-typography-mdc-level-mappings, $mat-level);
39-
40-
$result-with-nulls: map.merge(
41-
if($mdc-level,
42-
map.get(mdc-typography.$styles, $mdc-level),
43-
(
44-
text-decoration: none,
45-
-moz-osx-font-smoothing: grayscale,
46-
-webkit-font-smoothing: antialiased
47-
)),
48-
if($mat-level,
49-
(
50-
font-size: inspection.get-theme-typography($theme, $mat-level, font-size),
51-
line-height: inspection.get-theme-typography($theme, $mat-level, line-height),
52-
font-weight: inspection.get-theme-typography($theme, $mat-level, font-weight),
53-
letter-spacing: inspection.get-theme-typography($theme, $mat-level, letter-spacing),
54-
font-family: inspection.get-theme-typography($theme, $mat-level, font-family),
55-
// Angular Material doesn't use text-transform, so disable it.
56-
text-transform: none,
57-
),
58-
()));
59-
60-
// We need to strip out any keys with a null value. Leaving them in will cause MDC to emit CSS
61-
// variables with no fallback value, which breaks some builds.
62-
$result: ();
63-
@each $property, $value in $result-with-nulls {
64-
@if $value != null {
65-
$result: map.merge($result, ($property: $value));
66-
}
67-
}
68-
@return $result;
69-
}
70-
71-
// Converts an Angular Material typography config to an MDC one.
72-
@function typography-config-to-mdc($theme) {
73-
$mdc-config: ();
74-
75-
@each $mat-level, $mdc-level in $mat-typography-mdc-level-mappings {
76-
$mdc-config: map.merge(
77-
$mdc-config,
78-
($mdc-level: typography-level-config-to-mdc($theme, $mat-level)));
79-
}
80-
81-
@return $mdc-config;
82-
}
83-
8417
// MDC logs a warning if the `contrast-tone` function is called with a CSS variable.
8518
// This function falls back to determining the tone based on whether the theme is light or dark.
8619
@function variable-safe-contrast-tone($value, $is-dark) {
@@ -91,123 +24,6 @@ $mat-typography-mdc-level-mappings: (
9124
@return if($is-dark, 'light', 'dark');
9225
}
9326

94-
@function _variable-safe-ink-color-for-fill($text-style, $fill-color, $is-dark) {
95-
$contrast-tone: variable-safe-contrast-tone($fill-color, $is-dark);
96-
@return map.get(map.get(mdc-theme-color.$text-colors, $contrast-tone), $text-style);
97-
}
98-
99-
// Configures MDC's global variables to reflect the given theme, applies the given styles,
100-
// then resets the global variables to prevent unintended side effects.
101-
@mixin using-mdc-theme($theme) {
102-
$primary: inspection.get-theme-color($theme, primary);
103-
$accent: inspection.get-theme-color($theme, accent);
104-
$warn: inspection.get-theme-color($theme, warn);
105-
$is-dark: inspection.get-theme-type($theme) == dark;
106-
107-
// Save the original values.
108-
$orig-primary: mdc-theme-color.$primary;
109-
$orig-on-primary: mdc-theme-color.$on-primary;
110-
$orig-secondary: mdc-theme-color.$secondary;
111-
$orig-on-secondary: mdc-theme-color.$on-secondary;
112-
$orig-background: mdc-theme-color.$background;
113-
$orig-surface: mdc-theme-color.$surface;
114-
$orig-on-surface: mdc-theme-color.$on-surface;
115-
$orig-error: mdc-theme-color.$error;
116-
$orig-on-error: mdc-theme-color.$on-error;
117-
$orig-property-values: mdc-theme-color.$property-values;
118-
119-
// Set new values based on the given Angular Material theme.
120-
mdc-theme-color.$primary: $primary;
121-
mdc-theme-color.$on-primary:
122-
if(variable-safe-contrast-tone(mdc-theme-color.$primary, $is-dark) == 'dark', #000, #fff);
123-
mdc-theme-color.$secondary: $accent;
124-
mdc-theme-color.$on-secondary:
125-
if(variable-safe-contrast-tone(mdc-theme-color.$secondary, $is-dark) == 'dark', #000, #fff);
126-
mdc-theme-color.$background: inspection.get-theme-color($theme, background, background);
127-
mdc-theme-color.$surface: inspection.get-theme-color($theme, background, card);
128-
mdc-theme-color.$on-surface:
129-
if(variable-safe-contrast-tone(mdc-theme-color.$surface, $is-dark) == 'dark', #000, #fff);
130-
mdc-theme-color.$error: $warn;
131-
mdc-theme-color.$on-error:
132-
if(variable-safe-contrast-tone(mdc-theme-color.$error, $is-dark) == 'dark', #000, #fff);
133-
mdc-theme-color.$property-values: (
134-
// Primary
135-
primary: mdc-theme-color.$primary,
136-
// Secondary
137-
secondary: mdc-theme-color.$secondary,
138-
// Background
139-
background: mdc-theme-color.$background,
140-
// Surface
141-
surface: mdc-theme-color.$surface,
142-
// Error
143-
error: mdc-theme-color.$error,
144-
on-primary: mdc-theme-color.$on-primary,
145-
on-secondary: mdc-theme-color.$on-secondary,
146-
on-surface: mdc-theme-color.$on-surface,
147-
on-error: mdc-theme-color.$on-error,
148-
// Text-primary on "background" background
149-
text-primary-on-background:
150-
_variable-safe-ink-color-for-fill(primary, mdc-theme-color.$background, $is-dark),
151-
text-secondary-on-background:
152-
_variable-safe-ink-color-for-fill(secondary, mdc-theme-color.$background, $is-dark),
153-
text-hint-on-background:
154-
_variable-safe-ink-color-for-fill(hint, mdc-theme-color.$background, $is-dark),
155-
text-disabled-on-background:
156-
_variable-safe-ink-color-for-fill(disabled, mdc-theme-color.$background, $is-dark),
157-
text-icon-on-background:
158-
_variable-safe-ink-color-for-fill(icon, mdc-theme-color.$background, $is-dark),
159-
// Text-primary on "light" background
160-
text-primary-on-light: _variable-safe-ink-color-for-fill(primary, light, $is-dark),
161-
text-secondary-on-light: _variable-safe-ink-color-for-fill(secondary, light, $is-dark),
162-
text-hint-on-light: _variable-safe-ink-color-for-fill(hint, light, $is-dark),
163-
text-disabled-on-light: _variable-safe-ink-color-for-fill(disabled, light, $is-dark),
164-
text-icon-on-light: _variable-safe-ink-color-for-fill(icon, light, $is-dark),
165-
// Text-primary on "dark" background
166-
text-primary-on-dark: _variable-safe-ink-color-for-fill(primary, dark, $is-dark),
167-
text-secondary-on-dark: _variable-safe-ink-color-for-fill(secondary, dark, $is-dark),
168-
text-hint-on-dark: _variable-safe-ink-color-for-fill(hint, dark, $is-dark),
169-
text-disabled-on-dark: _variable-safe-ink-color-for-fill(disabled, dark, $is-dark),
170-
text-icon-on-dark: _variable-safe-ink-color-for-fill(icon, dark, $is-dark)
171-
);
172-
173-
// Apply given rules.
174-
@include disable-mdc-fallback-declarations {
175-
@content;
176-
}
177-
178-
// Reset the original values.
179-
mdc-theme-color.$primary: $orig-primary;
180-
mdc-theme-color.$on-primary: $orig-on-primary;
181-
mdc-theme-color.$secondary: $orig-secondary;
182-
mdc-theme-color.$on-secondary: $orig-on-secondary;
183-
mdc-theme-color.$background: $orig-background;
184-
mdc-theme-color.$surface: $orig-surface;
185-
mdc-theme-color.$on-surface: $orig-on-surface;
186-
mdc-theme-color.$error: $orig-error;
187-
mdc-theme-color.$on-error: $orig-on-error;
188-
mdc-theme-color.$property-values: $orig-property-values;
189-
}
190-
191-
// Configures MDC's global variables to reflect the given typography config,
192-
// applies the given styles, then resets the global variables to prevent unintended side effects.
193-
@mixin using-mdc-typography($theme) {
194-
// Save the original values.
195-
$orig-mdc-typography-styles: mdc-typography.$styles;
196-
197-
// Set new values based on the given Angular Material typography configuration.
198-
@if inspection.theme-has($theme, typography) {
199-
mdc-typography.$styles: typography-config-to-mdc($theme);
200-
}
201-
202-
// Apply given rules.
203-
@include disable-mdc-fallback-declarations {
204-
@content;
205-
}
206-
207-
// Reset the original values.
208-
mdc-typography.$styles: $orig-mdc-typography-styles;
209-
}
210-
21127
// Function to create an Angular Material typography config from MDC's predefined typography levels.
21228
// This is used for components where we accidentally ended up supporting null typography configs
21329
// that were silently falling back to MDC's typography. At the moment of writing this includes

‎src/material/slide-toggle/_slide-toggle-theme.scss

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
@use '@material/form-field/form-field-theme' as mdc-form-field-theme;
44
@use '../core/theming/theming';
55
@use '../core/theming/inspection';
6-
@use '../core/mdc-helpers/mdc-helpers';
76
@use '../core/typography/typography';
87
@use '../core/tokens/m2/mdc/form-field' as tokens-mdc-form-field;
98
@use '../core/tokens/m2/mdc/switch' as tokens-mdc-switch;
@@ -29,27 +28,25 @@
2928
$is-dark: inspection.get-theme-type($theme) == dark;
3029
$mdc-switch-color-tokens: tokens-mdc-switch.get-color-tokens($theme);
3130

32-
@include mdc-helpers.using-mdc-theme($theme) {
33-
// Add values for MDC slide toggles tokens
34-
.mat-mdc-slide-toggle {
35-
@include mdc-switch-theme.theme($mdc-switch-color-tokens);
36-
@include mdc-form-field-theme.theme(tokens-mdc-form-field.get-color-tokens($theme));
31+
// Add values for MDC slide toggles tokens
32+
.mat-mdc-slide-toggle {
33+
@include mdc-switch-theme.theme($mdc-switch-color-tokens);
34+
@include mdc-form-field-theme.theme(tokens-mdc-form-field.get-color-tokens($theme));
3735

38-
// MDC should set the disabled color on the label, but doesn't, so we do it here instead.
39-
.mdc-switch--disabled + label {
40-
color: inspection.get-theme-color($theme, foreground, disabled-text);
41-
}
36+
// MDC should set the disabled color on the label, but doesn't, so we do it here instead.
37+
.mdc-switch--disabled + label {
38+
color: inspection.get-theme-color($theme, foreground, disabled-text);
39+
}
4240

43-
// Change the color palette related tokens to accent or warn if applicable
44-
&.mat-accent {
45-
@include mdc-switch-theme.theme(
46-
tokens-mdc-switch.private-get-color-palette-color-tokens($theme, accent));
47-
}
41+
// Change the color palette related tokens to accent or warn if applicable
42+
&.mat-accent {
43+
@include mdc-switch-theme.theme(
44+
tokens-mdc-switch.private-get-color-palette-color-tokens($theme, accent));
45+
}
4846

49-
&.mat-warn {
50-
@include mdc-switch-theme.theme(
51-
tokens-mdc-switch.private-get-color-palette-color-tokens($theme, warn));
52-
}
47+
&.mat-warn {
48+
@include mdc-switch-theme.theme(
49+
tokens-mdc-switch.private-get-color-palette-color-tokens($theme, warn));
5350
}
5451
}
5552
}

0 commit comments

Comments
 (0)