Skip to content

Commit 027b171

Browse files
mmalerbammalerba
committed
refactor(multiple): Implement M3 theme support for checkbox & card
M3 themes are only available in material-experimental. This PR prepares the checkbox and card components to support them once they are available.
1 parent 60aa52c commit 027b171

File tree

7 files changed

+242
-136
lines changed

7 files changed

+242
-136
lines changed

‎src/dev-app/theme-token-api.scss

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,16 @@ dev-app {
2323

2424
@include mat.core();
2525

26-
$m3-theme: matx.define-theme();
26+
$m3-theme: matx.define-theme((
27+
color: (
28+
primary: matx.$m3-green-palette
29+
),
30+
typography: (
31+
brand-family: 'monospace'
32+
)
33+
));
2734

28-
@debug $m3-theme;
29-
30-
// @include mat.checkbox-theme($m3-theme);
31-
// @include mat.card-theme($m3-theme);
35+
html {
36+
@include mat.checkbox-theme($m3-theme);
37+
@include mat.card-theme($m3-theme);
38+
}

‎src/material-experimental/theming/_config-validation.scss

Lines changed: 12 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,17 @@
11
@use 'sass:list';
22
@use 'sass:map';
33
@use 'sass:meta';
4-
5-
/// Validates that the object's type matches any of the expected types.
6-
/// @param {any} $obj The object to test
7-
/// @param {List} $types The expected types
8-
/// @return {String} null if no error, else the unexpected type.
9-
@function validate-type($obj, $types...) {
10-
$result: meta.type-of($obj);
11-
// A zero-length list is the same as a zero-length map.
12-
@if ($result == list and list.index($types, map) and list.length($obj) == 0) {
13-
@return null;
14-
}
15-
@return if(list.index($types, $result), null, $result);
16-
}
17-
18-
/// Validates that a map's keys contains only keys from the allowed keys list.
19-
/// @param {Map} $map The map to test
20-
/// @param {List} $keys The allowed map keys
21-
/// @return {List} null if no error, else the list of unexpected keys.
22-
@function validate-only-keys($map, $keys...) {
23-
@each $key in $keys {
24-
$map: map.remove($map, $key);
25-
}
26-
$invalid: map.keys($map);
27-
@return if(list.length($invalid) > 0, $invalid, null);
28-
}
4+
@use '@angular/material' as mat;
295

306
/// Validates a theme config.
317
/// @param {Map} $config The config to test.
328
/// @return {List} null if no error, else the error message
339
@function validate-theme-config($config) {
34-
$err: validate-type($config, 'map', 'null');
10+
$err: mat.private-validate-type($config, 'map', 'null');
3511
@if $err {
3612
@return (#{'$config'} #{'should be a color configuraiton object. Got:'} $config);
3713
}
38-
$err: validate-only-keys($config or (), color, typography, density);
14+
$err: mat.private-validate-allowed-values(map.keys($config or ()), color, typography, density);
3915
@if $err {
4016
@return (#{'$config'} #{'has unexpected properties:'} $err);
4117
}
@@ -58,11 +34,12 @@
5834
/// @param {Map} $config The config to test.
5935
/// @return {List} null if no error, else the error message
6036
@function validate-color-config($config) {
61-
$err: validate-type($config, 'map', 'null');
37+
$err: mat.private-validate-type($config, 'map', 'null');
6238
@if $err {
6339
@return (#{'$config'} #{'should be a color configuraiton object. Got:'} $config);
6440
}
65-
$err: validate-only-keys($config or (), theme-type, primary, secondary, tertiary);
41+
$err: mat.private-validate-allowed-values(
42+
map.keys($config or ()), theme-type, primary, secondary, tertiary);
6643
@if $err {
6744
@return (#{'$config'} #{'has unexpected properties:'} $err);
6845
}
@@ -73,12 +50,13 @@
7350
/// @param {Map} $config The config to test.
7451
/// @return {List} null if no error, else the error message
7552
@function validate-typography-config($config) {
76-
$err: validate-type($config, 'map', 'null');
53+
$err: mat.private-validate-type($config, 'map', 'null');
7754
@if $err {
7855
@return (#{'$config'} #{'should be a typography configuraiton object. Got:'} $config);
7956
}
80-
$err: validate-only-keys($config or (),
81-
brand-family, plain-family, bold-weight, medium-weight, regular-weight);
57+
$err: mat.private-validate-allowed-values(
58+
map.keys($config or ()), brand-family, plain-family, bold-weight, medium-weight,
59+
regular-weight);
8260
@if $err {
8361
@return (#{'$config'} #{'has unexpected properties:'} $err);
8462
}
@@ -89,11 +67,11 @@
8967
/// @param {Map} $config The config to test.
9068
/// @return {List} null if no error, else the error message
9169
@function validate-density-config($config) {
92-
$err: validate-type($config, 'map', 'null');
70+
$err: mat.private-validate-type($config, 'map', 'null');
9371
@if $err {
9472
@return (#{'$config'} #{'should be a density configuraiton object. Got:'} $config);
9573
}
96-
$err: validate-only-keys($config or (), scale);
74+
$err: mat.private-validate-allowed-values(map.keys($config or ()), scale);
9775
@if $err {
9876
@return (#{'$config'} #{'has unexpected properties:'} $err);
9977
}

‎src/material/_index.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
// The form field density mixin needs to be exposed, because the paginator depends on it.
4040
@forward './form-field/form-field-theme' as private-form-field-* show private-form-field-density;
4141
@forward './core/style/sass-utils' as private-*;
42+
@forward './core/style/validation' as private-*;
4243

4344
// Structural
4445
@forward './core/core' show core;

‎src/material/card/_card-theme.scss

Lines changed: 81 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use 'sass:map';
22
@use '../core/style/sass-utils';
33
@use '../core/theming/theming';
4+
@use '../core/theming/inspection';
45
@use '../core/typography/typography';
56
@use '../core/tokens/token-utils';
67
@use '../core/tokens/m2/mat/card' as tokens-mat-card;
@@ -10,81 +11,111 @@
1011
@use '@material/card/outlined-card-theme' as mdc-outlined-card-theme;
1112

1213
@mixin base($config-or-theme) {
13-
@include sass-utils.current-selector-or-root() {
14-
@include mdc-elevated-card-theme.theme(tokens-mdc-elevated-card.get-unthemable-tokens());
15-
@include mdc-outlined-card-theme.theme(tokens-mdc-outlined-card.get-unthemable-tokens());
16-
@include token-utils.create-token-values(
17-
tokens-mat-card.$prefix, tokens-mat-card.get-unthemable-tokens());
14+
@if inspection.get-theme-version($config-or-theme) == 1 {
15+
@include _theme-from-tokens(inspection.get-theme-tokens($config-or-theme, base));
16+
}
17+
@else {
18+
@include sass-utils.current-selector-or-root() {
19+
@include mdc-elevated-card-theme.theme(tokens-mdc-elevated-card.get-unthemable-tokens());
20+
@include mdc-outlined-card-theme.theme(tokens-mdc-outlined-card.get-unthemable-tokens());
21+
@include token-utils.create-token-values(
22+
tokens-mat-card.$prefix, tokens-mat-card.get-unthemable-tokens());
23+
}
1824
}
1925
}
2026

2127
@mixin color($config-or-theme) {
2228
$config: theming.get-color-config($config-or-theme);
23-
$mdc-elevated-card-color-tokens: token-utils.resolve-elevation(
24-
tokens-mdc-elevated-card.get-color-tokens($config),
25-
container-elevation,
26-
container-shadow-color
27-
);
28-
$mdc-outlined-card-color-tokens: token-utils.resolve-elevation(
29-
tokens-mdc-outlined-card.get-color-tokens($config),
30-
container-elevation,
31-
container-shadow-color,
32-
);
33-
$mat-card-color-tokens: tokens-mat-card.get-color-tokens($config);
3429

35-
// Add values for card tokens.
36-
@include sass-utils.current-selector-or-root() {
37-
@include mdc-elevated-card-theme.theme($mdc-elevated-card-color-tokens);
38-
@include mdc-outlined-card-theme.theme($mdc-outlined-card-color-tokens);
39-
@include token-utils.create-token-values(tokens-mat-card.$prefix, $mat-card-color-tokens);
30+
@if inspection.get-theme-version($config-or-theme) == 1 {
31+
@include _theme-from-tokens(inspection.get-theme-tokens($config-or-theme, color));
32+
}
33+
@else {
34+
$mdc-elevated-card-color-tokens: token-utils.resolve-elevation(
35+
tokens-mdc-elevated-card.get-color-tokens($config),
36+
container-elevation,
37+
container-shadow-color
38+
);
39+
$mdc-outlined-card-color-tokens: token-utils.resolve-elevation(
40+
tokens-mdc-outlined-card.get-color-tokens($config),
41+
container-elevation,
42+
container-shadow-color,
43+
);
44+
$mat-card-color-tokens: tokens-mat-card.get-color-tokens($config);
45+
46+
// Add values for card tokens.
47+
@include sass-utils.current-selector-or-root() {
48+
@include mdc-elevated-card-theme.theme($mdc-elevated-card-color-tokens);
49+
@include mdc-outlined-card-theme.theme($mdc-outlined-card-color-tokens);
50+
@include token-utils.create-token-values(tokens-mat-card.$prefix, $mat-card-color-tokens);
51+
}
4052
}
4153
}
4254

4355
@mixin typography($config-or-theme) {
4456
$config: typography.private-typography-to-2018-config(
4557
theming.get-typography-config($config-or-theme));
46-
$mdc-elevated-card-typography-tokens: tokens-mdc-elevated-card.get-typography-tokens($config);
47-
$mdc-outlined-card-typography-tokens: tokens-mdc-outlined-card.get-typography-tokens($config);
48-
$mat-card-typography-tokens: tokens-mat-card.get-typography-tokens($config);
4958

50-
// Add values for card tokens.
51-
@include sass-utils.current-selector-or-root() {
52-
@include mdc-elevated-card-theme.theme($mdc-elevated-card-typography-tokens);
53-
@include mdc-outlined-card-theme.theme($mdc-outlined-card-typography-tokens);
54-
@include token-utils.create-token-values(tokens-mat-card.$prefix, $mat-card-typography-tokens);
59+
@if inspection.get-theme-version($config-or-theme) == 1 {
60+
@include _theme-from-tokens(inspection.get-theme-tokens($config-or-theme, typography));
61+
}
62+
@else {
63+
$mdc-elevated-card-typography-tokens: tokens-mdc-elevated-card.get-typography-tokens($config);
64+
$mdc-outlined-card-typography-tokens: tokens-mdc-outlined-card.get-typography-tokens($config);
65+
$mat-card-typography-tokens: tokens-mat-card.get-typography-tokens($config);
66+
67+
// Add values for card tokens.
68+
@include sass-utils.current-selector-or-root() {
69+
@include mdc-elevated-card-theme.theme($mdc-elevated-card-typography-tokens);
70+
@include mdc-outlined-card-theme.theme($mdc-outlined-card-typography-tokens);
71+
@include token-utils.create-token-values(
72+
tokens-mat-card.$prefix, $mat-card-typography-tokens);
73+
}
5574
}
5675
}
5776

5877
@mixin density($config-or-theme) {
5978
$density-scale: theming.get-density-config($config-or-theme);
60-
$mdc-elevated-card-density-tokens: tokens-mdc-elevated-card.get-density-tokens($density-scale);
61-
$mdc-outlined-card-density-tokens: tokens-mdc-outlined-card.get-density-tokens($density-scale);
62-
$mat-card-density-tokens: tokens-mat-card.get-density-tokens($density-scale);
6379

64-
// Add values for card tokens.
65-
@include sass-utils.current-selector-or-root() {
66-
@include mdc-elevated-card-theme.theme($mdc-elevated-card-density-tokens);
67-
@include mdc-outlined-card-theme.theme($mdc-outlined-card-density-tokens);
68-
@include token-utils.create-token-values(tokens-mat-card.$prefix, $mat-card-density-tokens);
80+
@if inspection.get-theme-version($config-or-theme) == 1 {
81+
@include _theme-from-tokens(inspection.get-theme-tokens($config-or-theme, density));
82+
}
83+
@else {
84+
$mdc-elevated-card-density-tokens: tokens-mdc-elevated-card.get-density-tokens($density-scale);
85+
$mdc-outlined-card-density-tokens: tokens-mdc-outlined-card.get-density-tokens($density-scale);
86+
$mat-card-density-tokens: tokens-mat-card.get-density-tokens($density-scale);
87+
88+
// Add values for card tokens.
89+
@include sass-utils.current-selector-or-root() {
90+
@include mdc-elevated-card-theme.theme($mdc-elevated-card-density-tokens);
91+
@include mdc-outlined-card-theme.theme($mdc-outlined-card-density-tokens);
92+
@include token-utils.create-token-values(tokens-mat-card.$prefix, $mat-card-density-tokens);
93+
}
6994
}
7095
}
7196

7297
@mixin theme($theme-or-color-config) {
7398
$theme: theming.private-legacy-get-theme($theme-or-color-config);
74-
@include theming.private-check-duplicate-theme-styles($theme, 'mat-card') {
75-
$color: theming.get-color-config($theme);
76-
$density: theming.get-density-config($theme);
77-
$typography: theming.get-typography-config($theme);
7899

79-
@include base($theme);
80-
@if $color != null {
81-
@include color($color);
82-
}
83-
@if $density != null {
84-
@include density($density);
85-
}
86-
@if $typography != null {
87-
@include typography($typography);
100+
@if inspection.get-theme-version($theme-or-color-config) == 1 {
101+
@include _theme-from-tokens(inspection.get-theme-tokens($theme-or-color-config));
102+
}
103+
@else {
104+
@include theming.private-check-duplicate-theme-styles($theme, 'mat-card') {
105+
$color: theming.get-color-config($theme);
106+
$density: theming.get-density-config($theme);
107+
$typography: theming.get-typography-config($theme);
108+
109+
@include base($theme);
110+
@if $color != null {
111+
@include color($color);
112+
}
113+
@if $density != null {
114+
@include density($density);
115+
}
116+
@if $typography != null {
117+
@include typography($typography);
118+
}
88119
}
89120
}
90121
}

0 commit comments

Comments
 (0)