Skip to content

Commit 481da02

Browse files
mmalerbammalerba
committed
add custom tokens for Angular Material only features
1 parent 3c9a542 commit 481da02

File tree

4 files changed

+123
-40
lines changed

4 files changed

+123
-40
lines changed

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

Lines changed: 19 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
1-
@use 'sass:map';
2-
@use '../core/mdc-helpers/mdc-helpers';
31
@use '../core/theming/theming';
42
@use '../core/style/private';
53
@use '../core/typography/typography';
6-
@use '../core/tokens/m2/mdc/elevated-card' as m2-mdc-elevated-card;
7-
@use '../core/tokens/m2/mdc/outlined-card' as m2-mdc-outlined-card;
4+
@use '../core/tokens/token-utils';
5+
@use '../core/tokens/m2/mat/card' as tokens-mat-card;
6+
@use '../core/tokens/m2/mdc/elevated-card' as tokens-mdc-elevated-card;
7+
@use '../core/tokens/m2/mdc/outlined-card' as tokens-mdc-outlined-card;
88
@use '@material/card/elevated-card-theme' as mdc-elevated-card-theme;
99
@use '@material/card/outlined-card-theme' as mdc-outlined-card-theme;
10-
@use '@material/typography' as mdc-typography;
1110

1211
@mixin color($config-or-theme) {
1312
$config: theming.get-color-config($config-or-theme);
14-
$mdc-elevated-card-color-tokens: m2-mdc-elevated-card.get-color-tokens($config);
15-
$mdc-outlined-card-color-tokens: m2-mdc-outlined-card.get-color-tokens($config);
13+
$mdc-elevated-card-color-tokens: tokens-mdc-elevated-card.get-color-tokens($config);
14+
$mdc-outlined-card-color-tokens: tokens-mdc-outlined-card.get-color-tokens($config);
15+
$mat-card-color-tokens: tokens-mat-card.get-color-tokens($config);
1616

17-
// Add values for MDC card tokens.
17+
// Add values for card tokens.
1818
.mat-mdc-card {
1919
@include mdc-elevated-card-theme.theme($mdc-elevated-card-color-tokens);
2020
@include mdc-outlined-card-theme.theme($mdc-outlined-card-color-tokens);
21+
@include token-utils.create-token-values(tokens-mat-card.$prefix, $mat-card-color-tokens);
2122

2223
// TODO(mmalerba): This should be based on tokens, but the elevation tokens don't seem to be
2324
// working currently. They wind up setting values like `box-shadow: var(--e); --e: 1`
@@ -29,50 +30,34 @@
2930
// working currently. They wind up setting values like `box-shadow: var(--e); --e: 1`
3031
@include private.private-theme-elevation(0, $config);
3132
}
32-
33-
// Card subtitles are an Angular Material construct (not part of MDC),
34-
// so we add their color styles here.
35-
// TODO(mmalerba): Add custom tokens for this.
36-
.mat-mdc-card-subtitle {
37-
color: theming.get-color-from-palette(map.get($config, foreground), secondary-text);
38-
}
3933
}
4034

4135
@mixin typography($config-or-theme) {
4236
$config: typography.private-typography-to-2018-config(
4337
theming.get-typography-config($config-or-theme));
44-
$mdc-elevated-card-typography-tokens: m2-mdc-elevated-card.get-typography-tokens($config);
45-
$mdc-outlined-card-typography-tokens: m2-mdc-outlined-card.get-typography-tokens($config);
38+
$mdc-elevated-card-typography-tokens: tokens-mdc-elevated-card.get-typography-tokens($config);
39+
$mdc-outlined-card-typography-tokens: tokens-mdc-outlined-card.get-typography-tokens($config);
40+
$mat-card-typography-tokens: tokens-mat-card.get-typography-tokens($config);
4641

47-
// Add values for MDC card tokens.
42+
// Add values for card tokens.
4843
.mat-mdc-card {
4944
@include mdc-elevated-card-theme.theme($mdc-elevated-card-typography-tokens);
5045
@include mdc-outlined-card-theme.theme($mdc-outlined-card-typography-tokens);
51-
52-
// Card subtitles and titles are an Angular Material construct (not part of MDC),
53-
// so we explicitly set their typographic styles here.
54-
// TODO(mmalerba): Add custom tokens for this.
55-
@include mdc-helpers.using-mdc-typography($config) {
56-
.mat-mdc-card-title {
57-
@include mdc-typography.typography(headline6);
58-
}
59-
60-
.mat-mdc-card-subtitle {
61-
@include mdc-typography.typography(subtitle2);
62-
}
63-
}
46+
@include token-utils.create-token-values(tokens-mat-card.$prefix, $mat-card-typography-tokens);
6447
}
6548
}
6649

6750
@mixin density($config-or-theme) {
6851
$density-scale: theming.get-density-config($config-or-theme);
69-
$mdc-elevated-card-density-tokens: m2-mdc-elevated-card.get-density-tokens($density-scale);
70-
$mdc-outlined-card-density-tokens: m2-mdc-outlined-card.get-density-tokens($density-scale);
52+
$mdc-elevated-card-density-tokens: tokens-mdc-elevated-card.get-density-tokens($density-scale);
53+
$mdc-outlined-card-density-tokens: tokens-mdc-outlined-card.get-density-tokens($density-scale);
54+
$mat-card-density-tokens: tokens-mat-card.get-density-tokens($density-scale);
7155

72-
// Add values for MDC card tokens.
56+
// Add values for card tokens.
7357
.mat-mdc-card {
7458
@include mdc-elevated-card-theme.theme($mdc-elevated-card-density-tokens);
7559
@include mdc-outlined-card-theme.theme($mdc-outlined-card-density-tokens);
60+
@include token-utils.create-token-values(tokens-mat-card.$prefix, $mat-card-density-tokens);
7661
}
7762
}
7863

‎src/material/card/card.scss

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@
22
@use '@material/card/elevated-card-theme' as mdc-elevated-card-theme;
33
@use '@material/card/outlined-card-theme' as mdc-outlined-card-theme;
44
@use '@material/theme/custom-properties' as mdc-custom-properties;
5-
@use '../core/tokens/m2/mdc/elevated-card' as m2-mdc-elevated-card;
6-
@use '../core/tokens/m2/mdc/outlined-card' as m2-mdc-outlined-card;
5+
@use '../core/tokens/token-utils';
6+
@use '../core/tokens/m2/mat/card' as tokens-mat-card;
7+
@use '../core/tokens/m2/mdc/elevated-card' as tokens-mdc-elevated-card;
8+
@use '../core/tokens/m2/mdc/outlined-card' as tokens-mdc-outlined-card;
79

810
// TODO(jelbourn): move header and title-group styles to their own files.
911
@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
10-
$mdc-elevated-card-token-slots: m2-mdc-elevated-card.get-token-slots();
11-
$mdc-outlined-card-token-slots: m2-mdc-outlined-card.get-token-slots();
12+
$mdc-elevated-card-token-slots: tokens-mdc-elevated-card.get-token-slots();
13+
$mdc-outlined-card-token-slots: tokens-mdc-outlined-card.get-token-slots();
1214

1315
// Add the MDC card static styles.
1416
@include mdc-card.static-styles();
@@ -18,14 +20,36 @@
1820
@include mdc-elevated-card-theme.theme-styles($mdc-elevated-card-token-slots);
1921

2022
// Add default values for MDC card tokens that aren't outputted by the theming API.
21-
@include mdc-elevated-card-theme.theme(m2-mdc-elevated-card.get-unthemable-tokens());
22-
@include mdc-outlined-card-theme.theme(m2-mdc-outlined-card.get-unthemable-tokens());
23+
@include mdc-elevated-card-theme.theme(tokens-mdc-elevated-card.get-unthemable-tokens());
24+
@include mdc-outlined-card-theme.theme(tokens-mdc-outlined-card.get-unthemable-tokens());
25+
@include token-utils.create-token-values(
26+
tokens-mat-card.$prefix, tokens-mat-card.get-unthemable-tokens());
2327
}
2428

2529
.mat-mdc-card-outlined {
2630
// Add the official slots for the MDC outlined-card.
2731
@include mdc-outlined-card-theme.theme-styles($mdc-outlined-card-token-slots);
2832
}
33+
34+
// Add slots for custom Angular Material card tokens.
35+
@include token-utils.use-tokens(tokens-mat-card.$prefix, tokens-mat-card.get-token-slots()) {
36+
.mat-mdc-card-title {
37+
@include token-utils.create-token-slot(font-family, title-text-font);
38+
@include token-utils.create-token-slot(line-height, title-text-line-height);
39+
@include token-utils.create-token-slot(font-size, title-text-size);
40+
@include token-utils.create-token-slot(letter-spacing, title-text-tracking);
41+
@include token-utils.create-token-slot(font-weight, title-text-weight);
42+
}
43+
44+
.mat-mdc-card-subtitle {
45+
@include token-utils.create-token-slot(color, subtitle-text-color);
46+
@include token-utils.create-token-slot(font-family, subtitle-text-font);
47+
@include token-utils.create-token-slot(line-height, subtitle-text-line-height);
48+
@include token-utils.create-token-slot(font-size, subtitle-text-size);
49+
@include token-utils.create-token-slot(letter-spacing, subtitle-text-tracking);
50+
@include token-utils.create-token-slot(font-weight, subtitle-text-weight);
51+
}
52+
}
2953
}
3054

3155
// Size of the `mat-card-header` region custom to Angular Material.

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use 'sass:map';
22
@use '@material/theme/custom-properties' as mdc-custom-properties;
33
@use '@material/theme/theme' as mdc-theme;
4+
@use '@material/theme/keys' as mdc-keys;
45
@use '../mdc-helpers/mdc-helpers';
56
@use '../theming/palette';
67
@use '../theming/theming';
@@ -79,6 +80,12 @@ $_component-prefix: null;
7980
}
8081
}
8182

83+
@mixin create-token-values($prefix, $tokens) {
84+
@include _configure-token-prefix($prefix...) {
85+
@include mdc-keys.declare-custom-properties($tokens, $_component-prefix);
86+
}
87+
}
88+
8289
// Merges together a list of maps into a single map.
8390
@function merge-all($maps...) {
8491
$result: ();

‎src/material/core/tokens/m2/mat/_card.scss

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
@use 'sass:map';
2+
@use '../../token-utils';
3+
@use '../../../theming/theming';
4+
@use '../../../typography/typography-utils';
5+
6+
// The prefix used to generate the fully qualified name for tokens in this file.
7+
$prefix: (mat, card);
8+
9+
// Tokens that can't be configured through Angular Material's current theming API,
10+
// but may be in a future version of the theming API.
11+
@function get-unthemable-tokens() {
12+
@return ();
13+
}
14+
15+
// Tokens that can be configured through Angular Material's color theming API.
16+
@function get-color-tokens($config) {
17+
$foreground: map.get($config, foreground);
18+
19+
@return (
20+
// Text color of the card's subtitle.
21+
subtitle-text-color: theming.get-color-from-palette($foreground, secondary-text),
22+
);
23+
}
24+
25+
// Tokens that can be configured through Angular Material's typography theming API.
26+
@function get-typography-tokens($config) {
27+
@return (
28+
// Font family of the card's title.
29+
title-text-font: typography-utils.font-family($config, headline-6)
30+
or typography-utils.font-family($config),
31+
// Line height of the card's title.
32+
title-text-line-height: typography-utils.line-height($config, headline-6),
33+
// Font size of the card's title.
34+
title-text-size: typography-utils.font-size($config, headline-6),
35+
// Letter spacing of the card's title.
36+
title-text-tracking: typography-utils.letter-spacing($config, headline-6),
37+
// Font weight of the card's title.
38+
title-text-weight: typography-utils.font-weight($config, headline-6),
39+
// Font family of the card's subtitle.
40+
subtitle-text-font: typography-utils.font-family($config, subtitle-2)
41+
or typography-utils.font-family($config),
42+
// Line height of the card's subtitle.
43+
subtitle-text-line-height: typography-utils.line-height($config, subtitle-2),
44+
// Font size of the card's subtitle.
45+
subtitle-text-size: typography-utils.font-size($config, subtitle-2),
46+
// Letter spacing of the card's subtitle.
47+
subtitle-text-tracking: typography-utils.letter-spacing($config, subtitle-2),
48+
// Font weight of the card's subtitle.
49+
subtitle-text-weight: typography-utils.font-weight($config, subtitle-2),
50+
);
51+
}
52+
53+
// Tokens that can be configured through Angular Material's density theming API.
54+
@function get-density-tokens($config) {
55+
@return ();
56+
}
57+
58+
// Combines the tokens generated by the above functions into a single map with placeholder values.
59+
// This is used to create token slots.
60+
@function get-token-slots() {
61+
@return token-utils.merge-all(
62+
get-unthemable-tokens(),
63+
get-color-tokens(token-utils.$placeholder-color-config),
64+
get-typography-tokens(token-utils.$placeholder-typography-config),
65+
get-density-tokens(token-utils.$placeholder-density-config)
66+
);
67+
}

0 commit comments

Comments
 (0)