Skip to content

refactor: merge m3 mdc and mat tokens #30755

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Apr 1, 2025
Merged

refactor: merge m3 mdc and mat tokens #30755

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
085e51d
refactor: merge m3 mdc and mat tokens
Mar 31, 2025
88229e4
refactor: missing tokens
Apr 1, 2025
e80ff41
refactor: missing token
Apr 1, 2025
ccf8fa5
refactor: lint
Apr 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 0 additions & 36 deletions src/material/core/tokens/_token-definition.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
@use '../m2/palette' as m2-palette;
@use '../m2/theming' as m2-theming;
@use '../m2/typography' as m2-typography;
@use '../style/sass-utils';

// Indicates whether we're building internally. Used for backwards compatibility.
$private-is-internal-build: false;
Expand Down Expand Up @@ -136,41 +135,6 @@ $_system-fallbacks: null;
@return $result;
}

/// At the time of writing, some color tokens (e.g. disabled state) are defined as a solid color
/// token and a separate opacity token. This function applies the opacity to the color and drops the
/// opacity key from the map. Can be removed once b/213331407 is resolved.
/// @param {Map} $tokens The map of tokens currently being generated
/// @param {Map} $all-tokens A map of all tokens, including hardcoded values
/// @param {List} $pairs Pairs of color token names and their opacities. Should be in the shape of
/// `((color: 'color-key', opacity: 'opacity-key'))`.
/// @return {Map} The initial tokens with the combined color values.
@function combine-color-tokens($tokens, $opacity-lookup, $pairs) {
$result: $tokens;

@each $pair in $pairs {
$color-key: map.get($pair, color);
$opacity-key: map.get($pair, opacity);
$color: map.get($tokens, $color-key);

@if (sass-utils.is-css-var-name($color)) {
$color: var(#{$color});
}

$opacity: map.get($opacity-lookup, $opacity-key);

@if(meta.type-of($color) == 'color') {
$result: map.remove($result, $opacity-key);
$result: map.set($result, $color-key, rgba($color, $opacity));
} @else if($color != null) {
$result: map.remove($result, $opacity-key);
$combined-color: #{color-mix(in srgb, #{$color} #{($opacity * 100) + '%'}, transparent)};
$result: map.set($result, $color-key, $combined-color);
}
}

@return $result;
}

/// Inherited function from MDC that computes which contrast tone to use on top of a color.
/// This is used only in a narrow set of use cases when generating M2 button tokens to maintain
/// backwards compatibility.
Expand Down
267 changes: 114 additions & 153 deletions src/material/core/tokens/m3/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,165 +1,126 @@
@use 'sass:meta';
@use 'sass:map';
@use './mat/app' as tokens-mat-app;
@use './mat/autocomplete' as tokens-mat-autocomplete;
@use './mat/badge' as tokens-mat-badge;
@use './mat/text-button' as tokens-mat-text-button;
@use './mat/protected-button' as tokens-mat-protected-button;
@use './mat/filled-button' as tokens-mat-filled-button;
@use './mat/outlined-button' as tokens-mat-outlined-button;
@use './mat/dialog' as tokens-mat-dialog;
@use './mat/bottom-sheet' as tokens-mat-bottom-sheet;
@use './mat/card' as tokens-mat-card;
@use './mat/chip' as tokens-mat-chip;
@use './mat/datepicker' as tokens-mat-datepicker;
@use './mat/divider' as tokens-mat-divider;
@use './mat/expansion' as tokens-mat-expansion;
@use './mat/fab' as tokens-mat-fab;
@use './mat/fab-small' as tokens-mat-fab-small;
@use './mat/form-field' as tokens-mat-form-field;
@use './mat/grid-list' as tokens-mat-grid-list;
@use './mat/icon' as tokens-mat-icon;
@use './mat/icon-button' as tokens-mat-icon-button;
@use './mat/list' as tokens-mat-list;
@use './mat/menu' as tokens-mat-menu;
@use './mat/option' as tokens-mat-option;
@use './mat/optgroup' as tokens-mat-optgroup;
@use './mat/paginator' as tokens-mat-paginator;
@use './mat/checkbox' as tokens-mat-checkbox;
@use './mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox;
@use './mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox;
@use './mat/radio' as tokens-mat-radio;
@use './mat/ripple' as tokens-mat-ripple;
@use './mat/select' as tokens-mat-select;
@use './mat/sidenav' as tokens-mat-sidenav;
@use './mat/slider' as tokens-mat-slider;
@use './mat/switch' as tokens-mat-switch;
@use './mat/snack-bar' as tokens-mat-snack-bar;
@use './mat/sort' as tokens-mat-sort;
@use './mat/standard-button-toggle' as tokens-mat-button-toggle;
@use './mat/stepper' as tokens-mat-stepper;
@use './mat/tab-header' as tokens-mat-tab-header;
@use './mat/table' as tokens-mat-table;
@use './mat/toolbar' as tokens-mat-toolbar;
@use './mat/tree' as tokens-mat-tree;
@use './mat/timepicker' as tokens-mat-timepicker;
@use './mat/tonal-button' as tokens-mat-tonal-button;
@use './mdc/checkbox' as tokens-mdc-checkbox;
@use './mdc/text-button' as tokens-mdc-text-button;
@use './mdc/protected-button' as tokens-mdc-protected-button;
@use './mdc/filled-button' as tokens-mdc-filled-button;
@use './mdc/outlined-button' as tokens-mdc-outlined-button;
@use './mdc/chip' as tokens-mdc-chip;
@use './mdc/circular-progress' as tokens-mdc-circular-progress;
@use './mdc/dialog' as tokens-mdc-dialog;
@use './mdc/elevated-card' as tokens-mdc-elevated-card;
@use './mdc/extended-fab' as tokens-mdc-extended-fab;
@use './mdc/fab' as tokens-mdc-fab;
@use './mdc/fab-small' as tokens-mdc-fab-small;
@use './mdc/filled-text-field' as tokens-mdc-filled-text-field;
@use './mdc/icon-button' as tokens-mdc-icon-button;
@use './mdc/linear-progress' as tokens-mdc-linear-progress;
@use './mdc/list' as tokens-mdc-list;
@use './mdc/outlined-card' as tokens-mdc-outlined-card;
@use './mdc/outlined-text-field' as tokens-mdc-outlined-text-field;
@use './mdc/plain-tooltip' as tokens-mdc-plain-tooltip;
@use './mdc/radio' as tokens-mdc-radio;
@use './mdc/slider' as tokens-mdc-slider;
@use './mdc/snack-bar' as tokens-mdc-snack-bar;
@use './mdc/switch' as tokens-mdc-switch;
@use './mdc/secondary-navigation-tab' as tokens-mdc-secondary-navigation-tab;
@use './mdc/tab-indicator' as tokens-mdc-tab-indicator;

$_module-names: (
// Custom tokens
tokens-mat-app,
tokens-mat-autocomplete,
tokens-mat-badge,
tokens-mat-bottom-sheet,
tokens-mat-button-toggle,
tokens-mat-card,
tokens-mat-chip,
tokens-mat-datepicker,
tokens-mat-dialog,
tokens-mat-divider,
tokens-mat-expansion,
tokens-mat-fab,
tokens-mat-fab-small,
tokens-mat-filled-button,
tokens-mat-tonal-button,
tokens-mat-form-field,
tokens-mat-grid-list,
tokens-mat-icon-button,
tokens-mat-icon,
tokens-mat-menu,
tokens-mat-optgroup,
tokens-mat-option,
tokens-mat-outlined-button,
tokens-mat-paginator,
tokens-mat-checkbox,
tokens-mat-full-pseudo-checkbox,
tokens-mat-list,
tokens-mat-minimal-pseudo-checkbox,
tokens-mat-protected-button,
tokens-mat-radio,
tokens-mat-ripple,
tokens-mat-select,
tokens-mat-sidenav,
tokens-mat-slider,
tokens-mat-switch,
tokens-mat-snack-bar,
tokens-mat-sort,
tokens-mat-stepper,
tokens-mat-tab-header,
tokens-mat-table,
tokens-mat-text-button,
tokens-mat-toolbar,
tokens-mat-tree,
tokens-mat-timepicker,
// MDC tokens
tokens-mdc-checkbox,
tokens-mdc-chip,
tokens-mdc-text-button,
tokens-mdc-protected-button,
tokens-mdc-filled-button,
tokens-mdc-outlined-button,
tokens-mdc-chip,
tokens-mdc-circular-progress,
tokens-mdc-dialog,
tokens-mdc-elevated-card,
tokens-mdc-extended-fab,
tokens-mdc-fab,
tokens-mdc-fab-small,
tokens-mdc-filled-text-field,
tokens-mdc-icon-button,
tokens-mdc-linear-progress,
tokens-mdc-list,
tokens-mdc-outlined-card,
tokens-mdc-outlined-text-field,
tokens-mdc-plain-tooltip,
tokens-mdc-radio,
tokens-mdc-slider,
tokens-mdc-snack-bar,
tokens-mdc-switch,
tokens-mdc-secondary-navigation-tab,
tokens-mdc-tab-indicator
);
@use './mat/app';
@use './mat/autocomplete';
@use './mat/badge';
@use './mat/bottom-sheet';
@use './mat/card';
@use './mat/checkbox';
@use './mat/chip';
@use './mat/circular-progress';
@use './mat/datepicker';
@use './mat/dialog';
@use './mat/divider';
@use './mat/elevated-card';
@use './mat/expansion';
@use './mat/extended-fab';
@use './mat/fab';
@use './mat/fab-small';
@use './mat/filled-button';
@use './mat/filled-text-field';
@use './mat/form-field';
@use './mat/full-pseudo-checkbox';
@use './mat/grid-list';
@use './mat/icon';
@use './mat/icon-button';
@use './mat/linear-progress';
@use './mat/list';
@use './mat/menu';
@use './mat/minimal-pseudo-checkbox';
@use './mat/optgroup';
@use './mat/option';
@use './mat/outlined-button';
@use './mat/outlined-card';
@use './mat/outlined-text-field';
@use './mat/paginator';
@use './mat/plain-tooltip';
@use './mat/protected-button';
@use './mat/radio';
@use './mat/ripple';
@use './mat/secondary-navigation-tab';
@use './mat/select';
@use './mat/sidenav';
@use './mat/slider';
@use './mat/snack-bar';
@use './mat/sort';
@use './mat/standard-button-toggle';
@use './mat/stepper';
@use './mat/switch';
@use './mat/tab-header';
@use './mat/tab-indicator';
@use './mat/table';
@use './mat/text-button';
@use './mat/timepicker';
@use './mat/tonal-button';
@use './mat/toolbar';
@use './mat/tree';

/// Gets the full set of M3 tokens for the given theme object.
/// @param {Map} $systems The MDC system tokens
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
/// @param {Map} $token-slots Possible token slots
/// @return {Map} Full set of M3 tokens
@function get-m3-tokens($systems, $exclude-hardcoded, $token-slots) {
$tokens: ();
$tokens-list: (
app.get-tokens($systems, $exclude-hardcoded, $token-slots),
autocomplete.get-tokens($systems, $exclude-hardcoded, $token-slots),
badge.get-tokens($systems, $exclude-hardcoded, $token-slots),
bottom-sheet.get-tokens($systems, $exclude-hardcoded, $token-slots),
card.get-tokens($systems, $exclude-hardcoded, $token-slots),
checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots),
chip.get-tokens($systems, $exclude-hardcoded, $token-slots),
circular-progress.get-tokens($systems, $exclude-hardcoded, $token-slots),
datepicker.get-tokens($systems, $exclude-hardcoded, $token-slots),
dialog.get-tokens($systems, $exclude-hardcoded, $token-slots),
divider.get-tokens($systems, $exclude-hardcoded, $token-slots),
elevated-card.get-tokens($systems, $exclude-hardcoded, $token-slots),
expansion.get-tokens($systems, $exclude-hardcoded, $token-slots),
extended-fab.get-tokens($systems, $exclude-hardcoded, $token-slots),
fab.get-tokens($systems, $exclude-hardcoded, $token-slots),
fab-small.get-tokens($systems, $exclude-hardcoded, $token-slots),
filled-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
filled-text-field.get-tokens($systems, $exclude-hardcoded, $token-slots),
form-field.get-tokens($systems, $exclude-hardcoded, $token-slots),
full-pseudo-checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots),
grid-list.get-tokens($systems, $exclude-hardcoded, $token-slots),
icon.get-tokens($systems, $exclude-hardcoded, $token-slots),
icon-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
linear-progress.get-tokens($systems, $exclude-hardcoded, $token-slots),
list.get-tokens($systems, $exclude-hardcoded, $token-slots),
menu.get-tokens($systems, $exclude-hardcoded, $token-slots),
minimal-pseudo-checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots),
optgroup.get-tokens($systems, $exclude-hardcoded, $token-slots),
option.get-tokens($systems, $exclude-hardcoded, $token-slots),
outlined-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
outlined-card.get-tokens($systems, $exclude-hardcoded, $token-slots),
outlined-text-field.get-tokens($systems, $exclude-hardcoded, $token-slots),
paginator.get-tokens($systems, $exclude-hardcoded, $token-slots),
plain-tooltip.get-tokens($systems, $exclude-hardcoded, $token-slots),
protected-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
radio.get-tokens($systems, $exclude-hardcoded, $token-slots),
ripple.get-tokens($systems, $exclude-hardcoded, $token-slots),
secondary-navigation-tab.get-tokens($systems, $exclude-hardcoded, $token-slots),
select.get-tokens($systems, $exclude-hardcoded, $token-slots),
sidenav.get-tokens($systems, $exclude-hardcoded, $token-slots),
slider.get-tokens($systems, $exclude-hardcoded, $token-slots),
snack-bar.get-tokens($systems, $exclude-hardcoded, $token-slots),
sort.get-tokens($systems, $exclude-hardcoded, $token-slots),
standard-button-toggle.get-tokens($systems, $exclude-hardcoded, $token-slots),
stepper.get-tokens($systems, $exclude-hardcoded, $token-slots),
switch.get-tokens($systems, $exclude-hardcoded, $token-slots),
tab-header.get-tokens($systems, $exclude-hardcoded, $token-slots),
tab-indicator.get-tokens($systems, $exclude-hardcoded, $token-slots),
table.get-tokens($systems, $exclude-hardcoded, $token-slots),
text-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
timepicker.get-tokens($systems, $exclude-hardcoded, $token-slots),
tonal-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
toolbar.get-tokens($systems, $exclude-hardcoded, $token-slots),
tree.get-tokens($systems, $exclude-hardcoded, $token-slots),
);

@each $module-name in $_module-names {
$fn: meta.get-function(
$name: 'get-tokens',
$module: $module-name,
);
$tokens: map.deep-merge($tokens, meta.call($fn, $systems, $exclude-hardcoded, $token-slots));
$merged-tokens: ();
@each $tokens in $tokens-list {
$merged-tokens: map.deep-merge($merged-tokens, $tokens);
}

@return $tokens;
@return $merged-tokens;
}
2 changes: 1 addition & 1 deletion src/material/core/tokens/m3/mat/_app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ $prefix: (mat, app);
/// @param {Map} $token-slots Possible token slots
/// @return {Map} A set of custom tokens for the app
@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
$shadow-color: map.get($systems, md-sys-color, shadow);
$tokens: (
background-color: map.get($systems, md-sys-color, background),
text-color: map.get($systems, md-sys-color, on-background),
);

// If the shadow-color is an actual color, convert it to a box-shadow value. Otherwise
// use the token value as itself (e,g. as a CSS var name).
$shadow-color: map.get($systems, md-sys-color, shadow);
@if (meta.type-of($shadow-color) == color) {
@for $zValue from 0 through 24 {
$shadow: elevation.get-box-shadow($zValue, $shadow-color);
Expand Down
13 changes: 7 additions & 6 deletions src/material/core/tokens/m3/mat/_badge.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,12 @@ $prefix: (mat, badge);
/// @param {Map} $token-slots Possible token slots
/// @return {Map} A set of custom tokens for the mat-badge
@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
$tokens: ((
$tokens: (
background-color: map.get($systems, md-sys-color, error),
text-color: map.get($systems, md-sys-color, on-error),
disabled-state-background-color: sass-utils.safe-color-change(
map.get($systems, md-sys-color, error),
$alpha: 0.38,
),
$alpha: 0.38),
disabled-state-text-color: map.get($systems, md-sys-color, on-error),
text-font: map.get($systems, md-sys-typescale, label-small-font),
text-size: map.get($systems, md-sys-typescale, label-small-size),
Expand Down Expand Up @@ -45,7 +44,9 @@ $prefix: (mat, badge);
large-size-text-size: map.get($systems, md-sys-typescale, label-small-size),
large-size-container-padding: token-definition.hardcode(0 4px, $exclude-hardcoded),
legacy-large-size-container-size: token-definition.hardcode(unset, $exclude-hardcoded),
), (
);

$variant-tokens: (
primary: (
background-color: map.get($systems, md-sys-color, primary),
text-color: map.get($systems, md-sys-color, on-primary),
Expand Down Expand Up @@ -74,7 +75,7 @@ $prefix: (mat, badge);
disabled-state-text-color: map.get($systems, md-sys-color, on-tertiary),
),
error: () // Default, no overrides needed
));
);

@return token-definition.namespace-tokens($prefix, $tokens, $token-slots);
@return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots);
}
Loading
Loading