Skip to content

Commit bcbdf91

Browse files
authored
fix(material/button-toggle): move unthemable tokens to theme mixin (#27883)
Though these tokens are not currently affected by the theme, in the future they will be affected by the design system used for theming (M2 or M3) BREAKING CHANGE: There are new styles emitted by mat.button-toggle-theme that are not emitted by any of: mat.button-toggle-color, mat.button-toggle-typography, mat.button-toggle-density. If you rely on the partial mixins only and don't call mat.button-toggle-theme, you can add mat.button-toggle-base to get the missing styles.
1 parent 5935172 commit bcbdf91

File tree

3 files changed

+15
-16
lines changed

3 files changed

+15
-16
lines changed

src/material/_index.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
@forward './button/icon-button-theme' as icon-button-* show icon-button-color,
7878
icon-button-typography, icon-button-density, icon-button-theme;
7979
@forward './button-toggle/button-toggle-theme' as button-toggle-* show button-toggle-theme,
80-
button-toggle-color, button-toggle-typography, button-toggle-density;
80+
button-toggle-color, button-toggle-typography, button-toggle-density, button-toggle-base;
8181
@forward './card/card-theme' as card-* show card-theme, card-color, card-typography, card-density,
8282
card-base;
8383
@forward './checkbox/checkbox-theme' as checkbox-* show checkbox-theme, checkbox-color,

src/material/button-toggle/_button-toggle-theme.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,19 @@
66
@use '../core/tokens/token-utils';
77
@use '../core/style/sass-utils';
88

9+
@mixin base($theme) {
10+
@include sass-utils.current-selector-or-root() {
11+
@include token-utils.create-token-values(
12+
tokens-mat-legacy-button-toggle.$prefix,
13+
tokens-mat-legacy-button-toggle.get-unthemable-tokens()
14+
);
15+
@include token-utils.create-token-values(
16+
tokens-mat-standard-button-toggle.$prefix,
17+
tokens-mat-standard-button-toggle.get-unthemable-tokens()
18+
);
19+
}
20+
}
21+
922
@mixin color($theme) {
1023
@include sass-utils.current-selector-or-root() {
1124
@include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
@@ -35,6 +48,7 @@
3548

3649
@mixin theme($theme) {
3750
@include theming.private-check-duplicate-theme-styles($theme, 'mat-button-toggle') {
51+
@include base($theme);
3852
@if inspection.theme-has($theme, color) {
3953
@include color($theme);
4054
}

src/material/button-toggle/button-toggle.scss

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,6 @@ $_standard-tokens: (
2727

2828
.mat-button-toggle-standalone,
2929
.mat-button-toggle-group {
30-
@include token-utils.create-token-values(
31-
tokens-mat-legacy-button-toggle.$prefix,
32-
tokens-mat-legacy-button-toggle.get-unthemable-tokens()
33-
);
34-
3530
@include elevation.overridable-elevation(2);
3631
position: relative;
3732
display: inline-flex;
@@ -54,11 +49,6 @@ $_standard-tokens: (
5449

5550
.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
5651
.mat-button-toggle-group-appearance-standard {
57-
@include token-utils.create-token-values(
58-
tokens-mat-standard-button-toggle.$prefix,
59-
tokens-mat-standard-button-toggle.get-unthemable-tokens()
60-
);
61-
6252
@include token-utils.use-tokens($_standard-tokens...) {
6353
@include token-utils.create-token-slot(border-radius, shape);
6454
border: solid 1px var(#{token-utils.get-token-variable(divider-color)});
@@ -122,11 +112,6 @@ $_standard-tokens: (
122112
}
123113

124114
.mat-button-toggle-appearance-standard {
125-
@include token-utils.create-token-values(
126-
tokens-mat-standard-button-toggle.$prefix,
127-
tokens-mat-standard-button-toggle.get-unthemable-tokens()
128-
);
129-
130115
@include token-utils.use-tokens($_standard-tokens...) {
131116
$divider-color: var(#{token-utils.get-token-variable(divider-color)});
132117
@include token-utils.create-token-slot(color, text-color);

0 commit comments

Comments
 (0)