Skip to content

refactor: use values API for creating tokens #31362

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.

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 1 commit into from
Jun 18, 2025
Merged
Changes from all commits
Commits
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
10 changes: 0 additions & 10 deletions src/material/button/_icon-button-theme.scss
Original file line number Diff line number Diff line change
@@ -16,16 +16,6 @@
@include token-utils.values($tokens);
}

@mixin _m2-icon-button-variant($theme, $palette) {
$mat-tokens: if(
$palette,
m2-icon-button.private-get-color-palette-color-tokens($theme, $palette),
m2-icon-button.get-color-tokens($theme)
);

@include token-utils.create-token-values-mixed($mat-tokens);
}

/// Outputs color theme styles for the mat-icon-button.
/// @param {Map} $theme The theme to generate color styles for.
/// @param {String} $color-variant: The color variant to use for the
10 changes: 4 additions & 6 deletions src/material/checkbox/_checkbox-theme.scss
Original file line number Diff line number Diff line change
@@ -32,16 +32,14 @@
@if inspection.get-theme-version($theme) != 1 {
.mat-mdc-checkbox {
&.mat-primary {
@include token-utils.create-token-values-mixed(
m2-checkbox.get-color-tokens($theme, primary,
$exclude: (checkbox-disabled-label-color, checkbox-label-text-color))
@include token-utils.values(m2-checkbox.get-color-tokens($theme, primary,
$exclude: (checkbox-disabled-label-color, checkbox-label-text-color))
);
}

&.mat-warn {
@include token-utils.create-token-values-mixed(
m2-checkbox.get-color-tokens($theme, error,
$exclude: (checkbox-disabled-label-color, checkbox-label-text-color))
@include token-utils.values(m2-checkbox.get-color-tokens($theme, error,
$exclude: (checkbox-disabled-label-color, checkbox-label-text-color))
);
}
}
40 changes: 17 additions & 23 deletions src/material/chips/_chips-theme.scss
Original file line number Diff line number Diff line change
@@ -11,41 +11,37 @@
/// for the mat-chips.
/// @param {Map} $theme The theme to generate base styles for.
@mixin base($theme) {
$tokens: m2-chip.get-unthemable-tokens($theme);
@if inspection.get-theme-version($theme) == 1 {
@include token-utils.create-token-values(map.get(m3-chip.get-tokens($theme), base));
} @else {
.mat-mdc-standard-chip {
@include token-utils.create-token-values-mixed(m2-chip.get-unthemable-tokens($theme));
}
$tokens: map.get(m3-chip.get-tokens($theme), base);
}

@include token-utils.values($tokens);
}

/// Outputs color theme styles for the mat-chips.
/// @param {Map} $theme The theme to generate color styles for.
/// @param {String} $color-variant The color variant to use for the component (M3 only)
@mixin color($theme, $color-variant: null) {
@if inspection.get-theme-version($theme) == 1 {
@include token-utils.create-token-values(
@include token-utils.values(
map.get(m3-chip.get-tokens($theme, $color-variant), color));
} @else {
.mat-mdc-standard-chip {
@include token-utils.create-token-values-mixed(m2-chip.get-color-tokens($theme));
@include token-utils.values(m2-chip.get-color-tokens($theme));

&.mat-mdc-chip-selected,
&.mat-mdc-chip-highlighted {
&.mat-primary {
@include token-utils.create-token-values-mixed(
m2-chip.get-color-tokens($theme, primary));
@include token-utils.values(m2-chip.get-color-tokens($theme, primary));
}

&.mat-accent {
@include token-utils.create-token-values-mixed(
m2-chip.get-color-tokens($theme, secondary));
@include token-utils.values(m2-chip.get-color-tokens($theme, secondary));
}

&.mat-warn {
@include token-utils.create-token-values-mixed(
m2-chip.get-color-tokens($theme, error));
@include token-utils.values(m2-chip.get-color-tokens($theme, error));
}
}
}
@@ -55,25 +51,23 @@
/// Outputs typography theme styles for the mat-chips.
/// @param {Map} $theme The theme to generate typography styles for.
@mixin typography($theme) {
$tokens: m2-chip.get-typography-tokens($theme);
@if inspection.get-theme-version($theme) == 1 {
@include token-utils.create-token-values(map.get(m3-chip.get-tokens($theme), typography));
} @else {
.mat-mdc-standard-chip {
@include token-utils.create-token-values-mixed(m2-chip.get-typography-tokens($theme));
}
$tokens: map.get(m3-chip.get-tokens($theme), typography);
}

@include token-utils.values($tokens);
}

/// Outputs density theme styles for the mat-chips.
/// @param {Map} $theme The theme to generate density styles for.
@mixin density($theme) {
$tokens: m2-chip.get-density-tokens($theme);
@if inspection.get-theme-version($theme) == 1 {
@include token-utils.create-token-values(map.get(m3-chip.get-tokens($theme), density));
} @else {
.mat-mdc-chip.mat-mdc-standard-chip {
@include token-utils.create-token-values-mixed(m2-chip.get-density-tokens($theme));
}
$tokens: map.get(m3-chip.get-tokens($theme), density);
}

@include token-utils.values($tokens);
}

/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
33 changes: 1 addition & 32 deletions src/material/core/tokens/_token-utils.scss
Original file line number Diff line number Diff line change
@@ -80,37 +80,6 @@
}
}

// Outputs a map of tokens.
@mixin create-token-values($tokens) {
@include _create-token-values-internal($tokens, false);
}

// Outputs a map of tokens under a specific prefix in scenarios where tokens may be mixed with
// other declarations (e.g. M2 themes). Used to avoid https://sass-lang.com/documentation/breaking-changes/mixed-decls/
@mixin create-token-values-mixed($tokens) {
@include _create-token-values-internal($tokens, true);
}

@mixin _create-token-values-internal($tokens, $in-place) {
@if ($tokens != null) {
@if ($in-place) {
& {
@each $key, $value in $tokens {
@if $value != null {
--mat-#{$key}: #{$value};
}
}
}
} @else {
@each $key, $value in $tokens {
@if $value != null {
--mat-#{$key}: #{$value};
}
}
}
}
}

/// Emits new token values for the given token overrides.
/// Verifies that the overrides passed in are valid tokens.
/// New token values are emitted under the current selector or root.
@@ -136,7 +105,7 @@
$namespace: list.nth($data, 1);
$name: list.nth($data, 2);
$prefixed-name: $namespace + '-' + $name;
@include create-token-values(($prefixed-name: $value));
@include values(($prefixed-name: $value));
} @else {
@error #{'Invalid token name `'}#{$name}#{'`. '}#{'Valid tokens are: '}#{$all-names};
}
18 changes: 8 additions & 10 deletions src/material/icon/_icon-theme.scss
Original file line number Diff line number Diff line change
@@ -5,12 +5,6 @@
@use './m3-icon';
@use 'sass:map';

@mixin _palette-colors($theme, $palette-name) {
$color: inspection.get-theme-color($theme, $palette-name, text);
$tokens: m2-icon.private-get-icon-color-tokens($color);
@include token-utils.create-token-values-mixed($tokens);
}

@mixin base($theme) {
$tokens: m2-icon.get-unthemable-tokens();
@if inspection.get-theme-version($theme) == 1 {
@@ -57,19 +51,23 @@
/// Outputs typography theme styles for the mat-icon.
/// @param {Map} $theme The theme to generate typography styles for.
@mixin typography($theme) {
$tokens: m2-icon.get-typography-tokens($theme);
@if inspection.get-theme-version($theme) == 1 {
@include token-utils.create-token-values(map.get(m3-icon.get-tokens($theme), typography));
} @else {
$tokens: map.get(m3-icon.get-tokens($theme), typography);
}

@include token-utils.values($tokens);
}

/// Outputs density theme styles for the mat-icon.
/// @param {Map} $theme The theme to generate density styles for.
@mixin density($theme) {
$tokens: m2-icon.get-density-tokens($theme);
@if inspection.get-theme-version($theme) == 1 {
@include token-utils.create-token-values(map.get(m3-icon.get-tokens($theme), density));
} @else {
$tokens: map.get(m3-icon.get-tokens($theme), density);
}

@include token-utils.values($tokens);
}

/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
2 changes: 1 addition & 1 deletion src/material/snack-bar/snack-bar-container.scss
Original file line number Diff line number Diff line change
@@ -142,7 +142,7 @@ $fallbacks: m3-snack-bar.get-tokens();
}

// Darken the ripples in the button so they're visible against the dark background.
@include token-utils.create-token-values-mixed((
@include token-utils.values((
button-text-state-layer-color: currentColor,
button-text-ripple-color: currentColor,
));
8 changes: 4 additions & 4 deletions src/material/stepper/_stepper-theme.scss
Original file line number Diff line number Diff line change
@@ -31,13 +31,13 @@

@if inspection.get-theme-version($theme) != 1 {
.mat-step-header.mat-accent {
@include token-utils.create-token-values-mixed(
m2-stepper.private-get-color-palette-color-tokens($theme, secondary));
$tokens: m2-stepper.private-get-color-palette-color-tokens($theme, secondary);
@include token-utils.values($tokens);
}

.mat-step-header.mat-warn {
@include token-utils.create-token-values-mixed(
m2-stepper.private-get-color-palette-color-tokens($theme, error));
$tokens: m2-stepper.private-get-color-palette-color-tokens($theme, error);
@include token-utils.values($tokens);
}
}
}
Loading
Oops, something went wrong.