Skip to content

Commit 2ed82bc

Browse files
andrewseguinandrewseguin
committed
refactor: directly use palettes instead of a ref
1 parent cb9b53e commit 2ed82bc

File tree

5 files changed

+170
-315
lines changed

5 files changed

+170
-315
lines changed

‎src/material/core/theming/_definition.scss‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -53,21 +53,15 @@ $theme-version: 1;
5353
$system-variables-prefix: map.get($config, system-variables-prefix) or $system-level-prefix;
5454
sass-utils.$use-system-color-variables: map.get($config, use-system-variables) or false;
5555

56+
$palettes: map.set($primary, tertiary, map.remove($tertiary, neutral, neutral-variant, secondary, error));
57+
5658
@return (
5759
$internals: (
5860
theme-version: $theme-version,
5961
theme-type: $type,
60-
palettes: (
61-
primary: map.remove($primary, neutral, neutral-variant, secondary),
62-
secondary: map.get($primary, secondary),
63-
tertiary: map.remove($tertiary, neutral, neutral-variant, secondary),
64-
neutral: map.get($primary, neutral),
65-
neutral-variant: map.get($primary, neutral-variant),
66-
error: map.get($primary, error),
67-
),
62+
palettes: $palettes,
6863
color-system-variables-prefix: $system-variables-prefix,
69-
color-tokens: m3-tokens.generate-color-tokens(
70-
$type, $primary, $tertiary, map.get($primary, error), $system-variables-prefix)
64+
color-tokens: m3-tokens.generate-color-tokens($type, $palettes, $system-variables-prefix)
7165
)
7266
);
7367
}

‎src/material/core/tokens/_m3-system.scss‎

Lines changed: 9 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
@use '../style/sass-utils';
2020
@use '../theming/config-validation';
2121
@use '../theming/definition';
22+
@use '../theming/palettes';
2223
@use './m3';
2324
@use './m3-tokens';
2425
@use 'sass:list';
@@ -130,7 +131,7 @@
130131
/// change the primary color to red, use `mat.theme-overrides((primary: red));`
131132
@mixin theme-overrides($overrides, $prefix: definition.$system-fallback-prefix) {
132133
$sys-names: map-merge-all(
133-
m3.md-sys-color-values-light(),
134+
m3.md-sys-color-values-light(palettes.$blue-palette),
134135
m3.md-sys-typescale-values(),
135136
m3.md-sys-elevation-values(),
136137
m3.md-sys-shape-values(),
@@ -147,35 +148,20 @@
147148

148149
@mixin system-level-colors($theme, $overrides: (), $prefix: null) {
149150
$palettes: map.get($theme, _mat-theming-internals-do-not-access, palettes);
150-
$base-palettes: (
151-
neutral: map.get($palettes, neutral),
152-
neutral-variant: map.get($palettes, neutral-variant),
153-
secondary: map.get($palettes, secondary),
154-
error: map.get($palettes, error),
155-
);
156-
157151
$type: map.get($theme, _mat-theming-internals-do-not-access, theme-type);
158-
$primary: map.merge(map.get($palettes, primary), $base-palettes);
159-
$tertiary: map.merge(map.get($palettes, tertiary), $base-palettes);
160-
$error: map.get($palettes, error);
161152

162153
@if (not $prefix) {
163154
$prefix: map.get($theme, _mat-theming-internals-do-not-access,
164155
color-system-variables-prefix) or definition.$system-level-prefix;
165156
}
166157

167-
$ref: (
168-
md-ref-palette: m3-tokens.generate-ref-palette-tokens($primary, $tertiary, $error)
169-
);
170158

171-
$sys-colors: _generate-sys-colors($ref, $type);
159+
$sys-colors: _generate-sys-colors($palettes, $type);
172160

173161
// Manually insert a subset of palette values that are used directly by components
174162
// instead of system variables.
175-
$sys-colors: map.set($sys-colors,
176-
'neutral-variant20', map.get($ref, md-ref-palette, neutral-variant20));
177-
$sys-colors: map.set($sys-colors,
178-
'neutral10', map.get($ref, md-ref-palette, neutral10));
163+
$sys-colors: map.set($sys-colors, neutral-variant20, map.get($palettes, neutral-variant, 20));
164+
$sys-colors: map.set($sys-colors, neutral10, map.get($palettes, neutral, 10));
179165

180166
& {
181167
@each $name, $value in $sys-colors {
@@ -184,13 +170,13 @@
184170
}
185171
}
186172

187-
@function _generate-sys-colors($ref, $type) {
188-
$light-sys-colors: m3.md-sys-color-values-light($ref);
173+
@function _generate-sys-colors($palettes, $type) {
174+
$light-sys-colors: m3.md-sys-color-values-light($palettes);
189175
@if ($type == light) {
190176
@return $light-sys-colors;
191177
}
192178

193-
$dark-sys-colors: m3.md-sys-color-values-dark($ref);
179+
$dark-sys-colors: m3.md-sys-color-values-dark($palettes);
194180
@if ($type == dark) {
195181
@return $dark-sys-colors;
196182
}
@@ -277,7 +263,7 @@
277263
@function create-system-fallbacks() {
278264
$app-vars: (
279265
'md-sys-color':
280-
_create-system-app-vars-map(m3.md-sys-color-values-light()),
266+
_create-system-app-vars-map(m3.md-sys-color-values-light(palettes.$blue-palette)),
281267
'md-sys-typescale':
282268
_create-system-app-vars-map(m3.md-sys-typescale-values()),
283269
'md-sys-elevation':

‎src/material/core/tokens/_m3-tokens.scss‎

Lines changed: 23 additions & 166 deletions
Original file line numberDiff line numberDiff line change
@@ -138,9 +138,6 @@ $_cached-token-slots: null;
138138
), $systems);
139139
$exclude-hardcoded: not $include-non-systemized;
140140

141-
// DO NOT REMOVE
142-
// This function is used internally.
143-
$systems: format-tokens.private-format-tokens($systems);
144141
$token-slots: _get-token-slots();
145142

146143
// TODO(mmalerba): Fill in remaining tokens.
@@ -164,170 +161,34 @@ $_cached-token-slots: null;
164161
@return $result;
165162
}
166163

167-
@function _get-sys-color($type, $ref, $prefix) {
168-
$mdc-sys-color: if($type == dark,
169-
m3.md-sys-color-values-dark($ref),
170-
m3.md-sys-color-values-light($ref));
164+
@function _get-sys-color($type, $palettes, $prefix) {
165+
$sys-color: if($type == dark,
166+
m3.md-sys-color-values-dark($palettes),
167+
m3.md-sys-color-values-light($palettes));
171168

172169
@if (sass-utils.$use-system-color-variables) {
173-
$keys: (
174-
'background',
175-
'error',
176-
'error-container',
177-
'inverse-on-surface',
178-
'inverse-primary',
179-
'inverse-surface',
180-
'on-background',
181-
'on-error',
182-
'on-error-container',
183-
'on-primary',
184-
'on-primary-container',
185-
'on-primary-fixed',
186-
'on-primary-fixed-variant',
187-
'on-secondary',
188-
'on-secondary-container',
189-
'on-secondary-fixed',
190-
'on-secondary-fixed-variant',
191-
'on-surface',
192-
'on-surface-variant',
193-
'on-tertiary',
194-
'on-tertiary-container',
195-
'on-tertiary-fixed',
196-
'on-tertiary-fixed-variant',
197-
'outline',
198-
'outline-variant',
199-
'primary',
200-
'primary-container',
201-
'primary-fixed',
202-
'primary-fixed-dim',
203-
'scrim',
204-
'secondary',
205-
'secondary-container',
206-
'secondary-fixed',
207-
'secondary-fixed-dim',
208-
'surface',
209-
'surface-bright',
210-
'surface-container',
211-
'surface-container-high',
212-
'surface-container-highest',
213-
'surface-container-low',
214-
'surface-container-lowest',
215-
'surface-dim',
216-
'surface-tint',
217-
'surface-variant',
218-
'tertiary',
219-
'tertiary-container',
220-
'tertiary-fixed',
221-
'tertiary-fixed-dim'
222-
);
223-
@return map.merge(create-map($keys, $prefix), (
224-
shadow: map.get($mdc-sys-color, shadow)
225-
));
170+
$var-values: ();
171+
@each $key in map.keys($sys-color) {
172+
$var-values: map.set($var-values, $key, var(--#{$prefix}-#{$key}));
173+
}
174+
$var-values: map.set($var-values, shadow, map.get($sys-color, shadow));
175+
@return $var-values;
226176
}
227177

228-
@return $mdc-sys-color;
178+
@return $sys-color;
229179
}
230180

231181
@function _get-sys-typeface($ref, $prefix) {
182+
$sys-typography: m3.md-sys-typescale-values($ref);
232183
@if (sass-utils.$use-system-typography-variables) {
233-
$keys: (
234-
'body-large',
235-
'body-large-font',
236-
'body-large-line-height',
237-
'body-large-size',
238-
'body-large-tracking',
239-
'body-large-weight',
240-
'body-medium',
241-
'body-medium-font',
242-
'body-medium-line-height',
243-
'body-medium-size',
244-
'body-medium-tracking',
245-
'body-medium-weight',
246-
'body-small',
247-
'body-small-font',
248-
'body-small-line-height',
249-
'body-small-size',
250-
'body-small-tracking',
251-
'body-small-weight',
252-
'display-large',
253-
'display-large-font',
254-
'display-large-line-height',
255-
'display-large-size',
256-
'display-large-tracking',
257-
'display-large-weight',
258-
'display-medium',
259-
'display-medium-font',
260-
'display-medium-line-height',
261-
'display-medium-size',
262-
'display-medium-tracking',
263-
'display-medium-weight',
264-
'display-small',
265-
'display-small-font',
266-
'display-small-line-height',
267-
'display-small-size',
268-
'display-small-tracking',
269-
'display-small-weight',
270-
'headline-large',
271-
'headline-large-font',
272-
'headline-large-line-height',
273-
'headline-large-size',
274-
'headline-large-tracking',
275-
'headline-large-weight',
276-
'headline-medium',
277-
'headline-medium-font',
278-
'headline-medium-line-height',
279-
'headline-medium-size',
280-
'headline-medium-tracking',
281-
'headline-medium-weight',
282-
'headline-small',
283-
'headline-small-font',
284-
'headline-small-line-height',
285-
'headline-small-size',
286-
'headline-small-tracking',
287-
'headline-small-weight',
288-
'label-large',
289-
'label-large-font',
290-
'label-large-line-height',
291-
'label-large-size',
292-
'label-large-tracking',
293-
'label-large-weight',
294-
'label-large-weight-prominent',
295-
'label-medium',
296-
'label-medium-font',
297-
'label-medium-line-height',
298-
'label-medium-size',
299-
'label-medium-tracking',
300-
'label-medium-weight',
301-
'label-medium-weight-prominent',
302-
'label-small',
303-
'label-small-font',
304-
'label-small-line-height',
305-
'label-small-size',
306-
'label-small-tracking',
307-
'label-small-weight',
308-
'title-large',
309-
'title-large-font',
310-
'title-large-line-height',
311-
'title-large-size',
312-
'title-large-tracking',
313-
'title-large-weight',
314-
'title-medium',
315-
'title-medium-font',
316-
'title-medium-line-height',
317-
'title-medium-size',
318-
'title-medium-tracking',
319-
'title-medium-weight',
320-
'title-small',
321-
'title-small-font',
322-
'title-small-line-height',
323-
'title-small-size',
324-
'title-small-tracking',
325-
'title-small-weight'
326-
);
327-
328-
@return create-map($keys, $prefix);
184+
$var-values: ();
185+
@each $key in map.keys($sys-typography) {
186+
$var-values: map.set($var-values, $key, var(--#{$prefix}-#{$key}));
187+
}
188+
@return $var-values;
329189
}
330-
@return m3.md-sys-typescale-values($ref);
190+
191+
@return $sys-typography;
331192
}
332193

333194
/// Generates a set of namespaced color tokens for all components.
@@ -337,14 +198,10 @@ $_cached-token-slots: null;
337198
/// @param {Map} $error The error palette
338199
/// @param {String} $system-variables-prefix The prefix of system tokens
339200
/// @return {Map} A map of namespaced color tokens
340-
@function generate-color-tokens($type, $primary, $tertiary, $error, $system-variables-prefix) {
341-
$ref: (
342-
md-ref-palette: generate-ref-palette-tokens($primary, $tertiary, $error)
343-
);
201+
@function generate-color-tokens($type, $palettes, $system-variables-prefix) {
202+
$sys-color: _get-sys-color($type, $palettes, $system-variables-prefix);
344203

345-
$sys-color: _get-sys-color($type, $ref, $system-variables-prefix);
346-
347-
@return generate-tokens(map.merge($ref, (
204+
@return generate-tokens((
348205
md-sys-color: $sys-color,
349206
// Because the elevation values are always combined with color values to create the box shadow,
350207
// elevation needs to be part of the color dimension.
@@ -354,7 +211,7 @@ $_cached-token-slots: null;
354211
// TODO(mmalerba): If at some point we remove the need for these combined values, we can move
355212
// state to the base dimension.
356213
md-sys-state: m3.md-sys-state-values(),
357-
)));
214+
));
358215
}
359216

360217
/// Generates a set of namespaced color tokens for all components.

0 commit comments

Comments
 (0)