Skip to content

Commit 04e0258

Browse files
mmalerbammalerba
committed
Aliased token names
1 parent 1222cce commit 04e0258

File tree

6 files changed

+138
-21
lines changed

6 files changed

+138
-21
lines changed

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

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -46,24 +46,18 @@ $dark-theme: mat.define-dark-theme((
4646

4747
@include material-experimental.theme($tokens: mat.m2-tokens-from-theme($light-theme), $components: (
4848
material-experimental.card(),
49-
material-experimental.checkbox(),
49+
material-experimental.checkbox((
50+
fill-palette: mat.define-palette(mat.$purple-palette)
51+
)),
5052
));
5153

5254
// Set up dark theme.
5355

5456
.demo-unicorn-dark-theme {
5557
@include material-experimental.theme($tokens: mat.m2-tokens-from-theme($dark-theme), $components: (
5658
material-experimental.checkbox((
57-
// This feels really clunky, but some of the components will depend on tokens from a few
58-
// namespaces, so we can't just use the short names. I like this as a potential alternative:
59-
// mat.checkbox((
60-
// 'mdc.checkbox.selected-checkmark-color': red
61-
// ))
62-
mdc: (
63-
checkbox: (
64-
selected-checkmark-color: red,
65-
)
66-
)
59+
fill-palette: mat.define-palette(mat.$purple-palette),
60+
checkmark-color: red,
6761
)),
6862
));
6963
}

‎src/material-experimental/_index.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
popover-edit-typography, popover-edit-density, popover-edit-theme;
66

77
// Token-based theming API
8+
@forward './theming/checkbox' show checkbox;
89
@forward './theming/theming' show theme, card, checkbox;
910

1011
// Additional public APIs for individual components

‎src/material-experimental/theming/_checkbox.scss

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
@use 'sass:map';
2+
@use 'sass:meta';
3+
@use 'sass:color';
4+
@use '@angular/material' as mat;
5+
@use '@material/theme/theme-color' as mdc-theme-color;
6+
@use './theming';
7+
8+
// MDC logs a warning if the `contrast-tone` function is called with a CSS variable.
9+
// This function falls back to determining the tone based on whether the theme is light or dark.
10+
@function _contrast-tone($value, $light-color: '#fff', $dark-color: '#000') {
11+
@if ($value == 'dark' or $value == 'light' or type-of($value) == 'color') {
12+
@return if(mdc-theme-color.contrast-tone($value) == 'dark', $dark-color, $light-color);
13+
}
14+
@return false
15+
}
16+
17+
@function _get-tokens-for-fill-palette($palette) {
18+
$accent-default: mat.get-color-from-palette($palette, default);
19+
$selected-color: mat.get-color-from-palette($palette);
20+
$checkmark-color: _contrast-tone($selected-color);
21+
22+
@return (
23+
selected-checkmark-color: $checkmark-color,
24+
selected-focus-icon-color: $selected-color,
25+
selected-hover-icon-color: $selected-color,
26+
selected-icon-color: $selected-color,
27+
selected-pressed-icon-color: $selected-color,
28+
selected-focus-state-layer-color: $accent-default,
29+
selected-hover-state-layer-color: $accent-default,
30+
selected-pressed-state-layer-color: $accent-default,
31+
);
32+
}
33+
34+
@function _get-tokens-for-box-theme($theme) {
35+
$is-dark: $theme == dark;
36+
$foreground: if($id-dark, white, black);
37+
$disabled-color: color.adjust($foreground, $alpha: 0.38);
38+
$border-color: color.adjust($foreground, $alpha: 0.54);
39+
$active-border-color: mat.get-color-from-palette(mat.$gray-palette, if($is-dark, 200, 900));
40+
41+
@return (
42+
disabled-selected-icon-color: $disabled-color,
43+
disabled-unselected-icon-color: $disabled-color,
44+
unselected-focus-icon-color: $active-border-color,
45+
unselected-hover-icon-color: $active-border-color,
46+
unselected-icon-color: $border-color,
47+
unselected-pressed-icon-color: $border-color,
48+
unselected-focus-state-layer-color: $foreground,
49+
unselected-hover-state-layer-color: $foreground,
50+
unselected-pressed-state-layer-color: $foreground,
51+
);
52+
}
53+
54+
$_customization-defs: map.merge(
55+
theming.rename-tokens((
56+
checkmark-color: selected-checkmark-color,
57+
disabled-checkmark-color: disabled-selected-checkmark-color,
58+
selected-focus-ring-opacity: selected-focus-state-layer-opacity,
59+
selected-hover-ring-opacity: selected-hover-state-layer-opacity,
60+
selected-pressed-ring-opacity: selected-pressed-state-layer-opacity,
61+
unselected-focus-ring-opacity: unselected-focus-state-layer-opacity,
62+
unselected-hover-ring-opacity: unselected-hover-state-layer-opacity,
63+
unselected-pressed-ring-opacity: unselected-pressed-state-layer-opacity,
64+
disabled-selected-box-color: disabled-selected-icon-color,
65+
disabled-unselected-box-color: disabled-unselected-icon-color,
66+
selected-focus-box-color: selected-focus-icon-color,
67+
selected-hover-box-color: selected-hover-icon-color,
68+
selected-icon-color: selected-box-color,
69+
selected-pressed-box-color: selected-pressed-icon-color,
70+
unselected-focus-box-color: unselected-focus-icon-color,
71+
unselected-hover-box-color: unselected-hover-icon-color,
72+
unselected-box-color: unselected-icon-color,
73+
unselected-pressed-box-color: unselected-pressed-icon-color,
74+
selected-focus-ring-color: selected-focus-state-layer-color,
75+
selected-hover-ring-color: selected-hover-state-layer-color,
76+
selected-pressed-ring-color: selected-pressed-state-layer-color,
77+
unselected-focus-ring-color: unselected-focus-state-layer-color,
78+
unselected-hover-ring-color: unselected-hover-state-layer-color,
79+
unselected-pressed-ring-color: unselected-pressed-state-layer-color,
80+
ripple-size: state-layer-size,
81+
), (mdc, checkbox)),
82+
(
83+
fill-palette: meta.get-function(_get-tokens-for-fill-palette),
84+
box-theme: meta.get-function(_get-tokens-for-box-theme),
85+
));
86+
87+
// Configure the mat-checkbox's theme.
88+
@function checkbox($customizations: ()) {
89+
@return (
90+
id: 'mat.checkbox',
91+
customizations:
92+
theming.get-customized-tokens('mat.checkbox', $_customization-defs, $customizations),
93+
deps: (),
94+
);
95+
}

‎src/material-experimental/theming/_theming.scss

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -84,11 +84,39 @@ $_error-on-missing-dep: false;
8484
);
8585
}
8686

87-
// Configure the mat-checkbox's theme.
88-
@function checkbox($customizations: ()) {
89-
@return (
90-
id: 'mat.checkbox',
91-
customizations: $customizations,
92-
deps: (),
93-
);
87+
@function forward-tokens($tokens, $namespace) {
88+
$result: ();
89+
@each $token in $tokens {
90+
$result: map.set($result, $token, list.append($namespace, $token));
91+
}
92+
@return $tokens;
93+
}
94+
95+
@function rename-tokens($tokens, $namespace) {
96+
$result: ();
97+
@each $from, $to in $tokens {
98+
$result: map.set($result, $from, list.append($namespace, $to));
99+
}
100+
@return $result;
101+
}
102+
103+
@function get-customized-tokens($component-id, $customization-defs, $customizations) {
104+
$result: ();
105+
106+
@each $customization, $value in $customizations {
107+
$def: map.get($customization-defs, $customization);
108+
@if not $def {
109+
@error 'Unrecognized customization #{$customization} for #{$component-id}';
110+
}
111+
112+
$def-type: meta.type-of($def);
113+
@if $def-type == 'list' {
114+
$token-and-value: list.append($def, $value);
115+
$result: map.set($result, $token-and-value...);
116+
} @else if $def-type == 'function' {
117+
$result: map.deep-merge($result, meta.call($def, $value))
118+
}
119+
}
120+
121+
@return $result;
94122
}

‎src/material/_index.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,9 @@
3737
@forward './core/style/button-common' as private-button-common-*;
3838
// The form field density mixin needs to be exposed, because the paginator depends on it.
3939
@forward './form-field/form-field-theme' as private-form-field-* show private-form-field-density;
40-
@forward './token-theming' as private-apply-*;
4140
@forward './core/style/sass-util' as private-*;
41+
@forward './core/tokens/m2/mdc/checkbox' as private-mdc-checkbox-* show
42+
private-mdc-checkbox-get-color-tokens, private-mdc-checkbox-get-density-tokens;
4243

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

‎src/material/_token-theming.scss

Lines changed: 0 additions & 2 deletions
This file was deleted.

0 commit comments

Comments
 (0)