Skip to content

Commit bf72005

Browse files
committed
feat(material-experimental/theming): add mixin for customizing checkbox tokens
1 parent dba9e24 commit bf72005

File tree

2 files changed

+68
-0
lines changed

2 files changed

+68
-0
lines changed

src/material/checkbox/_checkbox-theme.scss

+12
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,18 @@
9292
}
9393
}
9494

95+
/// Outputs the CSS variable values for the given tokens.
96+
/// @param {Map} $tokens The token values to emit.
97+
@mixin customizations($tokens: ()) {
98+
@include token-utils.batch-create-token-values(
99+
$tokens,
100+
$mat-prefix: tokens-mat-checkbox.$prefix,
101+
$mdc-prefix: tokens-mdc-checkbox.$prefix,
102+
$mat-tokens: tokens-mat-checkbox.get-token-slots(),
103+
$mdc-tokens: tokens-mdc-checkbox.get-token-slots(),
104+
);
105+
}
106+
95107
/// Outputs all (base, color, typography, and density) theme styles for the mat-checkbox.
96108
/// @param {Map} $theme The theme to generate styles for.
97109
/// @param {ArgList} Additional optional arguments (only supported for M3 themes):

src/material/core/tokens/_token-utils.scss

+56
Original file line numberDiff line numberDiff line change
@@ -206,3 +206,59 @@ $_component-prefix: null;
206206
}
207207
@return map.merge($values, $overrides);
208208
}
209+
210+
/// Emits new token values for the given tokens.
211+
/// Verifies that the tokens passed in are valid tokens.
212+
/// New token values are emitted under the current selector or root.
213+
@mixin batch-create-token-values(
214+
$tokens: (),
215+
$mat-prefix: '',
216+
$mdc-prefix: '',
217+
$mat-tokens: (),
218+
$mdc-tokens: ()
219+
) {
220+
$custom-mat-tokens: ();
221+
$custom-mdc-tokens: ();
222+
223+
$mat-token-names: map.keys($mat-tokens);
224+
$mdc-token-names: map.keys($mdc-tokens);
225+
$valid-token-names: _get-valid-token-names($mat-tokens, $mdc-tokens);
226+
227+
@each $name, $value in $tokens {
228+
$is-mat-token: list.index($mat-token-names, $name) != null;
229+
$is-mdc-token: list.index($mdc-token-names, $name) != null;
230+
231+
@if ($is-mat-token) {
232+
$custom-mat-tokens: map.set($custom-mat-tokens, $name, $value);
233+
}
234+
235+
@if ($is-mdc-token) {
236+
$custom-mdc-tokens: map.set($custom-mdc-tokens, $name, $value);
237+
}
238+
239+
@if (list.index($valid-token-names, $name) == null) {
240+
@error (
241+
'Invalid token: "' + $name + '"'
242+
'Valid tokens include: ' $valid-token-names
243+
);
244+
}
245+
}
246+
247+
@include sass-utils.current-selector-or-root() {
248+
@include create-token-values($mat-prefix, $custom-mat-tokens);
249+
@include create-token-values($mdc-prefix, $custom-mdc-tokens);
250+
}
251+
}
252+
253+
/// Returns the union of token names whose values are not null.
254+
@function _get-valid-token-names($mat-tokens, $mdc-tokens) {
255+
$mat-and-mdc-tokens: map.merge($mat-tokens, $mdc-tokens);
256+
257+
@each $name, $value in $mat-and-mdc-tokens {
258+
@if ($value == null) {
259+
$mat-and-mdc-tokens: map.remove($mat-and-mdc-tokens, $name);
260+
}
261+
}
262+
263+
@return map.keys($mat-and-mdc-tokens);
264+
}

0 commit comments

Comments
 (0)