Skip to content

feat(material/core): add an m2-theme API to define system vars #31616

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 1 commit into from
Jul 30, 2025
Merged

feat(material/core): add an m2-theme API to define system vars #31616

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions src/material/BUILD.bazel
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ sass_library(
"//src/material/core/theming:_inspection",
"//src/material/core/theming:_palettes",
"//src/material/core/theming:core_all_theme",
"//src/material/core/tokens:m3_system",
"//src/material/core/tokens:system",
"//src/material/core/typography",
"//src/material/core/typography:all_typography",
"//src/material/core/typography:utils",
Expand Down Expand Up @@ -140,7 +140,7 @@ ng_package(
"//src/material/core/theming:_inspection",
"//src/material/core/theming:_palettes",
"//src/material/core/theming:core_all_theme",
"//src/material/core/tokens:m3_system",
"//src/material/core/tokens:system",
"//src/material/core/typography",
"//src/material/core/typography:all_typography",
"//src/material/core/typography:utils",
Expand Down
4 changes: 2 additions & 2 deletions src/material/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@
@forward './core/theming/theming' as private-* show private-clamp-density;
@forward './core/typography/typography' show typography-hierarchy;
@forward './core/typography/typography-utils' show font-shorthand;
@forward './core/tokens/m3-system' show system-level-colors,
@forward 'core/tokens/system' show system-level-colors,
system-level-typography, system-level-elevation, system-level-shape,
system-level-motion, system-level-state, theme, theme-overrides;
system-level-motion, system-level-state, theme, theme-overrides, m2-theme;

// Private/Internal
@forward './core/density/private/all-density' show all-component-densities;
Expand Down
12 changes: 6 additions & 6 deletions src/material/core/theming/_m2-inspection.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ $_typography-keys: (
$_typography-properties: (font, font-family, line-height, font-size, letter-spacing, font-weight);

/// Gets the m2-config from the theme.
@function _get-m2-config($theme) {
@function get-m2-config($theme) {
// It is possible for a user to pass a "density theme" that is just a number.
@if meta.type-of($theme) != 'map' {
@return $theme;
Expand Down Expand Up @@ -89,7 +89,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
/// @param {Map} $theme The theme
/// @return {String} The type of theme (either `light` or `dark`).
@function get-theme-type($theme) {
$theme: _get-m2-config($theme);
$theme: get-m2-config($theme);
@if not theme-has($theme, color) {
@error 'Color information is not available on this theme.';
}
Expand All @@ -112,7 +112,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
/// @param {Number} $opacity The alpha channel value for the color.
/// @return {Color} The requested theme color.
@function get-theme-color($theme, $palette-name, $args...) {
$theme: _get-m2-config($theme);
$theme: get-m2-config($theme);
@if not theme-has($theme, color) {
@error 'Color information is not available on this theme.';
}
Expand All @@ -137,7 +137,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
/// (font, font-family, font-size, font-weight, line-height, or letter-spacing).
/// @return {*} The value of the requested font property.
@function get-theme-typography($theme, $typescale, $property) {
$theme: _get-m2-config($theme);
$theme: get-m2-config($theme);
@if not theme-has($theme, typography) {
@error 'Typography information is not available on this theme.';
}
Expand Down Expand Up @@ -175,7 +175,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
/// @param {Map} $theme The theme
/// @return {Number} The density scale.
@function get-theme-density($theme) {
$theme: _get-m2-config($theme);
$theme: get-m2-config($theme);
@if not theme-has($theme, density) {
@error 'Density information is not available on this theme.';
}
Expand All @@ -188,7 +188,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
/// @param {String} $system The system to check
/// @param {Boolean} Whether the theme has information about the system.
@function theme-has($theme, $system) {
$theme: _get-m2-config($theme);
$theme: get-m2-config($theme);
@if $system == base {
@return true;
}
Expand Down
8 changes: 4 additions & 4 deletions src/material/core/theming/prebuilt/BUILD.bazel
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ sass_binary(
src = "rose-red.scss",
deps = [
"//src/material/core/theming:_palettes",
"//src/material/core/tokens:m3_system",
"//src/material/core/tokens:system",
],
)

Expand All @@ -60,7 +60,7 @@ sass_binary(
src = "azure-blue.scss",
deps = [
"//src/material/core/theming:_palettes",
"//src/material/core/tokens:m3_system",
"//src/material/core/tokens:system",
],
)

Expand All @@ -69,7 +69,7 @@ sass_binary(
src = "cyan-orange.scss",
deps = [
"//src/material/core/theming:_palettes",
"//src/material/core/tokens:m3_system",
"//src/material/core/tokens:system",
],
)

Expand All @@ -78,6 +78,6 @@ sass_binary(
src = "magenta-violet.scss",
deps = [
"//src/material/core/theming:_palettes",
"//src/material/core/tokens:m3_system",
"//src/material/core/tokens:system",
],
)
4 changes: 2 additions & 2 deletions src/material/core/theming/prebuilt/azure-blue.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@use '../../theming/palettes';
@use '../../../core/tokens/m3-system';
@use '../../tokens/system';

html {
@include m3-system.theme((
@include system.theme((
color: (
theme-type: light,
primary: palettes.$azure-palette,
Expand Down
4 changes: 2 additions & 2 deletions src/material/core/theming/prebuilt/cyan-orange.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@use '../../theming/palettes';
@use '../../../core/tokens/m3-system';
@use '../../tokens/system';

html {
@include m3-system.theme((
@include system.theme((
color: (
theme-type: dark,
primary: palettes.$cyan-palette,
Expand Down
4 changes: 2 additions & 2 deletions src/material/core/theming/prebuilt/magenta-violet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@use '../../theming/palettes';
@use '../../../core/tokens/m3-system';
@use '../../tokens/system';

html {
@include m3-system.theme((
@include system.theme((
color: (
theme-type: dark,
primary: palettes.$magenta-palette,
Expand Down
4 changes: 2 additions & 2 deletions src/material/core/theming/prebuilt/rose-red.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@use '../../theming/palettes';
@use '../../../core/tokens/m3-system';
@use '../../tokens/system';

html {
@include m3-system.theme((
@include system.theme((
color: (
theme-type: light,
primary: palettes.$rose-palette,
Expand Down
6 changes: 3 additions & 3 deletions src/material/core/tokens/BUILD.bazel
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@ sass_library(
"_token-utils.scss",
],
deps = [
":m3_system",
":system",
"//src/material/core/style:elevation",
"//src/material/core/style:sass_utils",
],
)

sass_library(
name = "m3_system",
srcs = ["_m3-system.scss"],
name = "system",
srcs = ["_system.scss"],
deps = [
":m3_tokens",
"//src/material/core/style:elevation",
Expand Down
54 changes: 53 additions & 1 deletion src/material/core/tokens/_m3-system.scss → src/material/core/tokens/_system.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,10 @@
@use '../style/elevation';
@use '../theming/config-validation';
@use '../theming/definition';
@use '../theming/m2-inspection';
@use '../theming/palettes';
@use '../style/sass-utils';
@use './m2';
@use './m3';
@use 'sass:map';
@use 'sass:meta';
Expand Down Expand Up @@ -273,7 +275,6 @@
$shadow-color: map.get(
$theme, definition.$internals, palettes, neutral, 0);


@include sass-utils.current-selector-or-root {
@each $name, $value in m3.md-sys-elevation-values() {
$level: map.get($overrides, $name) or $value;
Expand Down Expand Up @@ -307,3 +308,54 @@
}
@return $result;
}

// Defines Angular Material system variables using M2 values provided by
// an M2 theme config created with `mat.m2-define-light-theme` or `mat.m2-define-dark-theme`.
//
// This enables applications to style custom components with system-level CSS
// variables instead of creating a separate component theme mixin that relies on
// the theme config.
//
// For example, use `var(--mat-sys-primary)` to get a theme's primary color instead of
// pulling it from the theme with `m2-get-color-from-palette($primary-palette, default)`.
//
// Unlike M3's `mat.theme()`, this mixin does not replace the need to call
// individual component theme mixins for Angular Material components.
@mixin m2-theme($theme-config, $overrides: ()) {
$config: m2-inspection.get-m2-config($theme-config);

$color: map.get($config, color);
@if (m2-inspection.theme-has($theme-config, color)) {
$system-colors: if(map.get($color, is-dark),
m2.md-sys-color-values-dark($color),
m2.md-sys-color-values-light($color),
);
@include _define-m2-system-vars($system-colors, $overrides);

$shadow: map.get($theme-config, _mat-system, shadow);
$system-elevations: ();
@each $name, $value in m2.md-sys-elevation-values() {
$level: map.get($overrides, $name) or $value;
$value: elevation.get-box-shadow($level, $shadow);
$system-elevations: map.set($system-elevations, $name, $value);
}
@include _define-m2-system-vars($system-elevations, $overrides);
}

$typography: map.get($config, typography);
@if ($typography) {
$system-typography: m2.md-sys-typescale-values($typography);
@include _define-m2-system-vars($system-typography, $overrides);
}

@include _define-m2-system-vars(m2.md-sys-shape-values(), $overrides);
@include _define-m2-system-vars(m2.md-sys-state-values(), $overrides);
}

@mixin _define-m2-system-vars($vars, $overrides) {
@include sass-utils.current-selector-or-root {
@each $name, $value in $vars {
--#{definition.$system-level-prefix}-#{$name}: #{map.get($overrides, $name) or $value};
}
}
}
2 changes: 1 addition & 1 deletion tools/extract-tokens/extract-tokens.mts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,7 @@ function getTokenExtractionCode(
@use 'sass:math' as ${math};
@use 'sass:string' as ${str};
@use '${join(corePath, 'tokens/m3-tokens')}' as ${m3Tokens};
@use '${join(corePath, 'tokens/m3-system')}' as ${m3System};
@use '${join(corePath, 'tokens/system')}' as ${m3System};
@use '${join(corePath, 'theming/palettes')}' as ${palettes};
@use '${join(corePath, 'style/sass-utils')}' as ${sassUtils};

Expand Down
Loading