Skip to content

Commit 0f8565b

Browse files
committed
Add mixins to emit the theme based on tokens
1 parent e871730 commit 0f8565b

File tree

4 files changed

+23
-0
lines changed

4 files changed

+23
-0
lines changed

src/material/_index.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
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-*;
4041

4142
// Structural
4243
@forward './core/core' show core;

src/material/_token-theming.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@forward './card/card-theme' as card-* show card-theme-from-tokens;
2+
@forward './checkbox/checkbox-theme' as checkbox-* show checkbox-theme-from-tokens;

src/material/card/_card-theme.scss

Lines changed: 11 additions & 0 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/typography/typography';
34
@use '../core/tokens/token-utils';
@@ -76,3 +77,13 @@
7677
}
7778
}
7879
}
80+
81+
@mixin theme-from-tokens($tokens) {
82+
// Add values for card tokens.
83+
.mat-mdc-card {
84+
@include mdc-elevated-card-theme.theme(map.get($tokens, tokens-mdc-elevated-card.$prefix));
85+
@include mdc-outlined-card-theme.theme(map.get($tokens, tokens-mdc-outlined-card.$prefix));
86+
@include token-utils.create-token-values(
87+
tokens-mat-card.$prefix, map.get($tokens, tokens-mat-card.$prefix));
88+
}
89+
}

src/material/checkbox/_checkbox-theme.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,3 +82,12 @@
8282
}
8383
}
8484
}
85+
86+
@mixin theme-from-tokens($tokens) {
87+
// TODO(mmalerba): Some of the theme styles above are not represented in terms of tokens,
88+
// so this mixin is currently incomplete.
89+
90+
.mat-mdc-checkbox {
91+
@include mdc-checkbox-theme.theme(map.get($tokens, tokens-mdc-checkbox.$prefix));
92+
}
93+
}

0 commit comments

Comments
 (0)