From 84bea55e6174649fa865d788c65541d551f5f4f6 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Thu, 5 Jun 2025 09:11:33 +0200
Subject: [PATCH] fix(material/core): output tokens from theme under same
selector
Fixes that the tokens generated by the `theme` mixins were being separated out into different selectors, rather than being combined.
---
src/material/core/tokens/_m3-system.scss | 20 +++++++++++---------
1 file changed, 11 insertions(+), 9 deletions(-)
diff --git a/src/material/core/tokens/_m3-system.scss b/src/material/core/tokens/_m3-system.scss
index b1d09c9e4f53..ed6c040a5a7e 100644
--- a/src/material/core/tokens/_m3-system.scss
+++ b/src/material/core/tokens/_m3-system.scss
@@ -19,6 +19,7 @@
@use '../theming/config-validation';
@use '../theming/definition';
@use '../theming/palettes';
+@use '../style/sass-utils';
@use './m3';
@use 'sass:map';
@use 'sass:meta';
@@ -196,7 +197,7 @@
m3.md-sys-shape-values(),
m3.md-sys-state-values());
- & {
+ @include sass-utils.current-selector-or-root {
@each $name, $value in $overrides {
@if (map.has-key($sys-names, $name)) {
--#{$prefix}-#{$name}: #{map.get($overrides, $name)};
@@ -222,7 +223,7 @@
$sys-colors: map.set($sys-colors, neutral-variant20, map.get($palettes, neutral-variant, 20));
$sys-colors: map.set($sys-colors, neutral10, map.get($palettes, neutral, 10));
- & {
+ @include sass-utils.current-selector-or-root {
@each $name, $value in $sys-colors {
--#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
}
@@ -261,7 +262,7 @@
typography-system-variables-prefix) or definition.$system-level-prefix;
}
- & {
+ @include sass-utils.current-selector-or-root {
@each $name, $value in m3.md-sys-typescale-values($font-definition) {
--#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
}
@@ -272,17 +273,18 @@
$shadow-color: map.get(
$theme, definition.$internals, palettes, neutral, 0);
- @each $name, $value in m3.md-sys-elevation-values() {
- $level: map.get($overrides, $name) or $value;
- $value: elevation.get-box-shadow($level, $shadow-color);
- & {
+
+ @include sass-utils.current-selector-or-root {
+ @each $name, $value in m3.md-sys-elevation-values() {
+ $level: map.get($overrides, $name) or $value;
+ $value: elevation.get-box-shadow($level, $shadow-color);
--#{$prefix}-#{$name}: #{$value};
}
}
}
@mixin system-level-shape($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
- & {
+ @include sass-utils.current-selector-or-root {
@each $name, $value in m3.md-sys-shape-values() {
--#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
}
@@ -290,7 +292,7 @@
}
@mixin system-level-state($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
- & {
+ @include sass-utils.current-selector-or-root {
@each $name, $value in m3.md-sys-state-values() {
--#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
}