Skip to content

Commit 739858a

Browse files
mmalerbammalerba
committed
feat(material-experimental/theming): add M3 button-toggle support
1 parent 0943eca commit 739858a

File tree

6 files changed

+108
-32
lines changed

6 files changed

+108
-32
lines changed

‎src/dev-app/theme-m3.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ $dark-theme: matx.define-theme(map.set($m3-base-config, color, theme-type, dark)
3838

3939
// Emit default theme styles.
4040
html {
41+
@include mat.button-toggle-theme($light-theme);
4142
@include mat.card-theme($light-theme);
4243
@include mat.checkbox-theme($light-theme);
4344
@include mat.datepicker-theme($light-theme);
@@ -79,6 +80,7 @@ html {
7980
background: black;
8081
color: white;
8182

83+
@include mat.button-toggle-color($dark-theme);
8284
@include mat.card-color($dark-theme);
8385
@include mat.checkbox-color($dark-theme);
8486
@include mat.datepicker-color($dark-theme);
@@ -119,6 +121,7 @@ html {
119121
$scale-theme: matx.define-theme(map.set($m3-base-config, density, scale, $scale));
120122

121123
.demo-density-#{$scale} {
124+
@include mat.button-toggle-density($scale-theme);
122125
@include mat.card-density($scale-theme);
123126
@include mat.checkbox-density($scale-theme);
124127
@include mat.datepicker-density($scale-theme);

‎src/material-experimental/theming/_custom-tokens.scss

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,35 @@
2121
@return $result;
2222
}
2323

24+
/// Generates custom tokens for the mat-button-toggle.
25+
/// @param {Map} $systems The MDC system tokens
26+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
27+
/// @return {Map} A set of custom tokens for the mat-button-toggle
28+
@function button-toggle($systems, $exclude-hardcoded) {
29+
@return (
30+
shape: _hardcode(9999px, $exclude-hardcoded),
31+
hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
32+
focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
33+
text-color: map.get($systems, md-sys-color, on-surface),
34+
background-color: _hardcode(transparent, $exclude-hardcoded),
35+
state-layer-color: map.get($systems, md-sys-color, on-surface),
36+
selected-state-background-color: map.get($systems, md-sys-color, secondary-container),
37+
selected-state-text-color: map.get($systems, md-sys-color, on-secondary-container),
38+
disabled-state-text-color: mat.private-safe-color-change(
39+
map.get($systems, md-sys-color, on-surface),
40+
$alpha: 0.38,
41+
),
42+
disabled-state-background-color: _hardcode(transparent, $exclude-hardcoded),
43+
disabled-selected-state-text-color: mat.private-safe-color-change(
44+
map.get($systems, md-sys-color, on-surface),
45+
$alpha: 0.38,
46+
),
47+
disabled-selected-state-background-color: map.get($systems, md-sys-color, surface-container),
48+
divider-color: map.get($systems, md-sys-color, outline),
49+
text-font: map.get($systems, md-sys-typescale, label-large-font),
50+
);
51+
}
52+
2453
/// Generates custom tokens for the mat-card.
2554
/// @param {Map} $systems The MDC system tokens
2655
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values

‎src/material-experimental/theming/_m3-density.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,9 @@ $_density-tokens: (
7575
(mat, slider): (),
7676
(mat, snack-bar): (),
7777
(mat, sort): (),
78+
(mat, standard-button-toggle): (
79+
height: (40px, 40px, 40px, 36px, 24px),
80+
),
7881
(mat, stepper): (
7982
header-height: (72px, 68px, 64px, 60px, 42px),
8083
),

‎src/material-experimental/theming/_m3-tokens.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -375,6 +375,11 @@
375375
custom-tokens.sort($systems, $exclude-hardcoded),
376376
$token-slots
377377
),
378+
_namespace-tokens(
379+
(mat, standard-button-toggle),
380+
custom-tokens.button-toggle($systems, $exclude-hardcoded),
381+
$token-slots
382+
),
378383
_namespace-tokens(
379384
(mat, stepper),
380385
custom-tokens.stepper($systems, $exclude-hardcoded),

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

Lines changed: 66 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use 'sass:map';
12
@use '../core/theming/theming';
23
@use '../core/theming/inspection';
34
@use '../core/typography/typography';
@@ -7,56 +8,89 @@
78
@use '../core/style/sass-utils';
89

910
@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-
);
11+
@if inspection.get-theme-version($theme) == 1 {
12+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
13+
}
14+
@else {
15+
@include sass-utils.current-selector-or-root() {
16+
@include token-utils.create-token-values(
17+
tokens-mat-legacy-button-toggle.$prefix,
18+
tokens-mat-legacy-button-toggle.get-unthemable-tokens()
19+
);
20+
@include token-utils.create-token-values(
21+
tokens-mat-standard-button-toggle.$prefix,
22+
tokens-mat-standard-button-toggle.get-unthemable-tokens()
23+
);
24+
}
1925
}
2026
}
2127

2228
@mixin color($theme) {
23-
@include sass-utils.current-selector-or-root() {
24-
@include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
25-
tokens-mat-legacy-button-toggle.get-color-tokens($theme));
26-
@include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
27-
tokens-mat-standard-button-toggle.get-color-tokens($theme));
29+
@if inspection.get-theme-version($theme) == 1 {
30+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
31+
}
32+
@else {
33+
@include sass-utils.current-selector-or-root() {
34+
@include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
35+
tokens-mat-legacy-button-toggle.get-color-tokens($theme));
36+
@include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
37+
tokens-mat-standard-button-toggle.get-color-tokens($theme));
38+
}
2839
}
2940
}
3041

3142
@mixin typography($theme) {
32-
@include sass-utils.current-selector-or-root() {
33-
@include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
34-
tokens-mat-legacy-button-toggle.get-typography-tokens($theme));
35-
@include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
36-
tokens-mat-standard-button-toggle.get-typography-tokens($theme));
43+
@if inspection.get-theme-version($theme) == 1 {
44+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
45+
}
46+
@else {
47+
@include sass-utils.current-selector-or-root() {
48+
@include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
49+
tokens-mat-legacy-button-toggle.get-typography-tokens($theme));
50+
@include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
51+
tokens-mat-standard-button-toggle.get-typography-tokens($theme));
52+
}
3753
}
3854
}
3955

4056
@mixin density($theme) {
41-
@include sass-utils.current-selector-or-root() {
42-
@include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
43-
tokens-mat-legacy-button-toggle.get-density-tokens($theme));
44-
@include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
45-
tokens-mat-standard-button-toggle.get-density-tokens($theme));
57+
@if inspection.get-theme-version($theme) == 1 {
58+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
59+
}
60+
@else {
61+
@include sass-utils.current-selector-or-root() {
62+
@include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
63+
tokens-mat-legacy-button-toggle.get-density-tokens($theme));
64+
@include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
65+
tokens-mat-standard-button-toggle.get-density-tokens($theme));
66+
}
4667
}
4768
}
4869

4970
@mixin theme($theme) {
5071
@include theming.private-check-duplicate-theme-styles($theme, 'mat-button-toggle') {
51-
@include base($theme);
52-
@if inspection.theme-has($theme, color) {
53-
@include color($theme);
72+
@if inspection.get-theme-version($theme) == 1 {
73+
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
5474
}
55-
@if inspection.theme-has($theme, density) {
56-
@include density($theme);
57-
}
58-
@if inspection.theme-has($theme, typography) {
59-
@include typography($theme);
75+
@else {
76+
@include base($theme);
77+
@if inspection.theme-has($theme, color) {
78+
@include color($theme);
79+
}
80+
@if inspection.theme-has($theme, density) {
81+
@include density($theme);
82+
}
83+
@if inspection.theme-has($theme, typography) {
84+
@include typography($theme);
85+
}
6086
}
6187
}
6288
}
89+
90+
@mixin _theme-from-tokens($tokens) {
91+
@if ($tokens != ()) {
92+
@include token-utils.create-token-values(
93+
tokens-mat-standard-button-toggle.$prefix,
94+
map.get($tokens, tokens-mat-standard-button-toggle.$prefix));
95+
}
96+
}

‎src/material/core/tokens/m2/_index.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use 'sass:map';
22
@use 'sass:meta';
33
@use '../../style/sass-utils';
4+
@use './mat/standard-button-toggle' as tokens-mat-button-toggle;
45
@use './mat/card' as tokens-mat-card;
56
@use './mat/datepicker' as tokens-mat-datepicker;
67
@use './mat/divider' as tokens-mat-divider;
@@ -91,6 +92,7 @@
9192
/// )
9293
@function m2-tokens-from-theme($theme) {
9394
@return sass-utils.deep-merge-all(
95+
_get-tokens-for-module($theme, tokens-mat-button-toggle),
9496
_get-tokens-for-module($theme, tokens-mat-card),
9597
_get-tokens-for-module($theme, tokens-mat-datepicker),
9698
_get-tokens-for-module($theme, tokens-mat-divider),

0 commit comments

Comments
 (0)