diff --git a/src/material/_index.scss b/src/material/_index.scss index 6bdc6b6f6daf..d5ba704d2437 100644 --- a/src/material/_index.scss +++ b/src/material/_index.scss @@ -37,6 +37,7 @@ @forward './core/style/button-common' as private-button-common-*; // The form field density mixin needs to be exposed, because the paginator depends on it. @forward './form-field/form-field-theme' as private-form-field-* show private-form-field-density; +@forward './token-theming' as private-apply-*; // Structural @forward './core/core' show core; diff --git a/src/material/_token-theming.scss b/src/material/_token-theming.scss new file mode 100644 index 000000000000..0783e8e5bb06 --- /dev/null +++ b/src/material/_token-theming.scss @@ -0,0 +1,2 @@ +@forward './card/card-theme' as card-* show card-theme-from-tokens; +@forward './checkbox/checkbox-theme' as checkbox-* show checkbox-theme-from-tokens; diff --git a/src/material/card/_card-theme.scss b/src/material/card/_card-theme.scss index 4d54b95b74f3..2f3eb3cbb71a 100644 --- a/src/material/card/_card-theme.scss +++ b/src/material/card/_card-theme.scss @@ -1,3 +1,4 @@ +@use 'sass:map'; @use '../core/theming/theming'; @use '../core/typography/typography'; @use '../core/tokens/token-utils'; @@ -76,3 +77,13 @@ } } } + +@mixin theme-from-tokens($tokens) { + // Add values for card tokens. + .mat-mdc-card { + @include mdc-elevated-card-theme.theme(map.get($tokens, tokens-mdc-elevated-card.$prefix)); + @include mdc-outlined-card-theme.theme(map.get($tokens, tokens-mdc-outlined-card.$prefix)); + @include token-utils.create-token-values( + tokens-mat-card.$prefix, map.get($tokens, tokens-mat-card.$prefix)); + } +} diff --git a/src/material/checkbox/_checkbox-theme.scss b/src/material/checkbox/_checkbox-theme.scss index fff80b03e940..f22078ec5752 100644 --- a/src/material/checkbox/_checkbox-theme.scss +++ b/src/material/checkbox/_checkbox-theme.scss @@ -82,3 +82,12 @@ } } } + +@mixin theme-from-tokens($tokens) { + // TODO(mmalerba): Some of the theme styles above are not represented in terms of tokens, + // so this mixin is currently incomplete. + + .mat-mdc-checkbox { + @include mdc-checkbox-theme.theme(map.get($tokens, tokens-mdc-checkbox.$prefix)); + } +}