Skip to content

Commit bbdd374

Browse files
andrewseguinandrewseguin
committed
fix(material/card): move tokens to componenet directory
1 parent 209ba7a commit bbdd374

File tree

15 files changed

+215
-381
lines changed

15 files changed

+215
-381
lines changed

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

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,26 @@
55
@use '../core/theming/validation';
66
@use '../core/typography/typography';
77
@use '../core/tokens/token-utils';
8-
@use '../core/tokens/m2/mat/card' as tokens-mat-card;
9-
@use '../core/tokens/m2/mdc/elevated-card' as tokens-mdc-elevated-card;
10-
@use '../core/tokens/m2/mdc/outlined-card' as tokens-mdc-outlined-card;
8+
@use 'tokens/m2/card' as card-tokens;
9+
@use 'tokens/m2/elevated-card' as elevated-card-tokens;
10+
@use 'tokens/m2/outlined-card' as outlined-card-tokens;
1111

1212
@mixin base($theme) {
1313
@if inspection.get-theme-version($theme) == 1 {
1414
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
1515
} @else {
1616
@include sass-utils.current-selector-or-root() {
1717
@include token-utils.create-token-values-mixed(
18-
tokens-mdc-elevated-card.$prefix,
19-
tokens-mdc-elevated-card.get-unthemable-tokens()
18+
elevated-card-tokens.$prefix,
19+
elevated-card-tokens.get-unthemable-tokens()
2020
);
2121
@include token-utils.create-token-values-mixed(
22-
tokens-mdc-outlined-card.$prefix,
23-
tokens-mdc-outlined-card.get-unthemable-tokens()
22+
outlined-card-tokens.$prefix,
23+
outlined-card-tokens.get-unthemable-tokens()
2424
);
2525
@include token-utils.create-token-values-mixed(
26-
tokens-mat-card.$prefix,
27-
tokens-mat-card.get-unthemable-tokens()
26+
card-tokens.$prefix,
27+
card-tokens.get-unthemable-tokens()
2828
);
2929
}
3030
}
@@ -36,16 +36,16 @@
3636
} @else {
3737
@include sass-utils.current-selector-or-root() {
3838
@include token-utils.create-token-values-mixed(
39-
tokens-mdc-elevated-card.$prefix,
40-
tokens-mdc-elevated-card.get-color-tokens($theme)
39+
elevated-card-tokens.$prefix,
40+
elevated-card-tokens.get-color-tokens($theme)
4141
);
4242
@include token-utils.create-token-values-mixed(
43-
tokens-mdc-outlined-card.$prefix,
44-
tokens-mdc-outlined-card.get-color-tokens($theme)
43+
outlined-card-tokens.$prefix,
44+
outlined-card-tokens.get-color-tokens($theme)
4545
);
4646
@include token-utils.create-token-values-mixed(
47-
tokens-mat-card.$prefix,
48-
tokens-mat-card.get-color-tokens($theme)
47+
card-tokens.$prefix,
48+
card-tokens.get-color-tokens($theme)
4949
);
5050
}
5151
}
@@ -57,16 +57,16 @@
5757
} @else {
5858
@include sass-utils.current-selector-or-root() {
5959
@include token-utils.create-token-values-mixed(
60-
tokens-mdc-elevated-card.$prefix,
61-
tokens-mdc-elevated-card.get-typography-tokens($theme)
60+
elevated-card-tokens.$prefix,
61+
elevated-card-tokens.get-typography-tokens($theme)
6262
);
6363
@include token-utils.create-token-values-mixed(
64-
tokens-mdc-outlined-card.$prefix,
65-
tokens-mdc-outlined-card.get-typography-tokens($theme)
64+
outlined-card-tokens.$prefix,
65+
outlined-card-tokens.get-typography-tokens($theme)
6666
);
6767
@include token-utils.create-token-values-mixed(
68-
tokens-mat-card.$prefix,
69-
tokens-mat-card.get-typography-tokens($theme)
68+
card-tokens.$prefix,
69+
card-tokens.get-typography-tokens($theme)
7070
);
7171
}
7272
}
@@ -78,16 +78,16 @@
7878
} @else {
7979
@include sass-utils.current-selector-or-root() {
8080
@include token-utils.create-token-values-mixed(
81-
tokens-mdc-elevated-card.$prefix,
82-
tokens-mdc-elevated-card.get-density-tokens($theme)
81+
elevated-card-tokens.$prefix,
82+
elevated-card-tokens.get-density-tokens($theme)
8383
);
8484
@include token-utils.create-token-values-mixed(
85-
tokens-mdc-outlined-card.$prefix,
86-
tokens-mdc-outlined-card.get-density-tokens($theme)
85+
outlined-card-tokens.$prefix,
86+
outlined-card-tokens.get-density-tokens($theme)
8787
);
8888
@include token-utils.create-token-values-mixed(
89-
tokens-mat-card.$prefix,
90-
tokens-mat-card.get-density-tokens($theme)
89+
card-tokens.$prefix,
90+
card-tokens.get-density-tokens($theme)
9191
);
9292
}
9393
}
@@ -97,17 +97,17 @@
9797
@function _define-overrides() {
9898
@return (
9999
(
100-
namespace: tokens-mat-card.$prefix,
101-
tokens: tokens-mat-card.get-token-slots(),
100+
namespace: card-tokens.$prefix,
101+
tokens: card-tokens.get-token-slots(),
102102
),
103103
(
104-
namespace: tokens-mdc-elevated-card.$prefix,
105-
tokens: tokens-mdc-elevated-card.get-token-slots(),
104+
namespace: elevated-card-tokens.$prefix,
105+
tokens: elevated-card-tokens.get-token-slots(),
106106
prefix: 'elevated-',
107107
),
108108
(
109-
namespace: tokens-mdc-outlined-card.$prefix,
110-
tokens: tokens-mdc-outlined-card.get-token-slots(),
109+
namespace: outlined-card-tokens.$prefix,
110+
tokens: outlined-card-tokens.get-token-slots(),
111111
prefix: 'outlined-',
112112
),
113113
);
@@ -142,16 +142,16 @@
142142
);
143143
@if ($tokens != ()) {
144144
@include token-utils.create-token-values(
145-
tokens-mdc-elevated-card.$prefix,
146-
map.get($tokens, tokens-mdc-elevated-card.$prefix)
145+
elevated-card-tokens.$prefix,
146+
map.get($tokens, elevated-card-tokens.$prefix)
147147
);
148148
@include token-utils.create-token-values(
149-
tokens-mdc-outlined-card.$prefix,
150-
map.get($tokens, tokens-mdc-outlined-card.$prefix)
149+
outlined-card-tokens.$prefix,
150+
map.get($tokens, outlined-card-tokens.$prefix)
151151
);
152152
@include token-utils.create-token-values(
153-
tokens-mat-card.$prefix,
154-
map.get($tokens, tokens-mat-card.$prefix)
153+
card-tokens.$prefix,
154+
map.get($tokens, card-tokens.$prefix)
155155
);
156156
}
157157
}

‎src/material/card/card.scss‎

Lines changed: 37 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,34 @@
1-
@use '../core/tokens/token-utils';
2-
@use '../core/tokens/m2/mat/card' as tokens-mat-card;
3-
@use '../core/tokens/m2/mdc/elevated-card' as tokens-mdc-elevated-card;
4-
@use '../core/tokens/m2/mdc/outlined-card' as tokens-mdc-outlined-card;
1+
@use '../core/tokens/token-utils' as token;
2+
@use 'tokens/m2/card' as card-tokens;
3+
@use 'tokens/m2/elevated-card' as elevated-tokens;
4+
@use 'tokens/m2/outlined-card' as outlined-tokens;
55

66
// Size of the `mat-card-header` region custom to Angular Material.
77
$mat-card-header-size: 40px !default;
88

99
// Default padding for text content within a card.
1010
$mat-card-default-padding: 16px !default;
1111

12+
$_card-prefix: card-tokens.$prefix;
13+
$_card-tokens: card-tokens.get-token-slots();
14+
15+
$_elevated-prefix: elevated-tokens.$prefix;
16+
$_elevated-tokens: elevated-tokens.get-token-slots();
17+
18+
$_outlined-prefix: outlined-tokens.$prefix;
19+
$_outlined-tokens: outlined-tokens.get-token-slots();
20+
1221
.mat-mdc-card {
1322
display: flex;
1423
flex-direction: column;
1524
box-sizing: border-box;
1625
position: relative;
1726
border-style: solid;
1827
border-width: 0;
19-
20-
@include token-utils.use-tokens(
21-
tokens-mdc-elevated-card.$prefix,
22-
tokens-mdc-elevated-card.get-token-slots()
23-
) {
24-
@include token-utils.create-token-slot(background-color, container-color);
25-
@include token-utils.create-token-slot(border-color, container-color);
26-
@include token-utils.create-token-slot(border-radius, container-shape);
27-
@include token-utils.create-token-slot(box-shadow, container-elevation);
28-
}
28+
background-color: token.slot($_elevated-prefix, $_elevated-tokens, container-color);
29+
border-color: token.slot($_elevated-prefix, $_elevated-tokens, container-color);
30+
border-radius: token.slot($_elevated-prefix, $_elevated-tokens, container-shape);
31+
box-shadow: token.slot($_elevated-prefix, $_elevated-tokens, container-elevation);
2932

3033
// Transparent card border for high-contrast mode.
3134
&::after {
@@ -39,27 +42,16 @@ $mat-card-default-padding: 16px !default;
3942
display: block;
4043
pointer-events: none;
4144
box-sizing: border-box;
42-
43-
@include token-utils.use-tokens(
44-
tokens-mdc-elevated-card.$prefix,
45-
tokens-mdc-elevated-card.get-token-slots()
46-
) {
47-
@include token-utils.create-token-slot(border-radius, container-shape);
48-
}
45+
border-radius: token.slot($_elevated-prefix, $_elevated-tokens, container-shape);
4946
}
5047
}
5148

5249
.mat-mdc-card-outlined {
53-
@include token-utils.use-tokens(
54-
tokens-mdc-outlined-card.$prefix,
55-
tokens-mdc-outlined-card.get-token-slots()
56-
) {
57-
@include token-utils.create-token-slot(background-color, container-color);
58-
@include token-utils.create-token-slot(border-radius, container-shape);
59-
@include token-utils.create-token-slot(border-width, outline-width);
60-
@include token-utils.create-token-slot(border-color, outline-color);
61-
@include token-utils.create-token-slot(box-shadow, container-elevation);
62-
}
50+
background-color: token.slot($_outlined-prefix, $_outlined-tokens, container-color);
51+
border-radius: token.slot($_outlined-prefix, $_outlined-tokens, container-shape);
52+
border-width: token.slot($_outlined-prefix, $_outlined-tokens, outline-width);
53+
border-color: token.slot($_outlined-prefix, $_outlined-tokens, outline-color);
54+
box-shadow: token.slot($_outlined-prefix, $_outlined-tokens, container-elevation);
6355

6456
// Outlined card already displays border in high-contrast mode.
6557
// Overwriting styles set above to remove a duplicate border.
@@ -101,23 +93,21 @@ $mat-card-default-padding: 16px !default;
10193
}
10294

10395
// Add slots for custom Angular Material card tokens.
104-
@include token-utils.use-tokens(tokens-mat-card.$prefix, tokens-mat-card.get-token-slots()) {
105-
.mat-mdc-card-title {
106-
@include token-utils.create-token-slot(font-family, title-text-font);
107-
@include token-utils.create-token-slot(line-height, title-text-line-height);
108-
@include token-utils.create-token-slot(font-size, title-text-size);
109-
@include token-utils.create-token-slot(letter-spacing, title-text-tracking);
110-
@include token-utils.create-token-slot(font-weight, title-text-weight);
111-
}
96+
.mat-mdc-card-title {
97+
font-family: token.slot($_card-prefix, $_card-tokens, title-text-font);
98+
line-height: token.slot($_card-prefix, $_card-tokens, title-text-line-height);
99+
font-size: token.slot($_card-prefix, $_card-tokens, title-text-size);
100+
letter-spacing: token.slot($_card-prefix, $_card-tokens, title-text-tracking);
101+
font-weight: token.slot($_card-prefix, $_card-tokens, title-text-weight);
102+
}
112103

113-
.mat-mdc-card-subtitle {
114-
@include token-utils.create-token-slot(color, subtitle-text-color);
115-
@include token-utils.create-token-slot(font-family, subtitle-text-font);
116-
@include token-utils.create-token-slot(line-height, subtitle-text-line-height);
117-
@include token-utils.create-token-slot(font-size, subtitle-text-size);
118-
@include token-utils.create-token-slot(letter-spacing, subtitle-text-tracking);
119-
@include token-utils.create-token-slot(font-weight, subtitle-text-weight);
120-
}
104+
.mat-mdc-card-subtitle {
105+
color: token.slot($_card-prefix, $_card-tokens, subtitle-text-color);
106+
font-family: token.slot($_card-prefix, $_card-tokens, subtitle-text-font);
107+
line-height: token.slot($_card-prefix, $_card-tokens, subtitle-text-line-height);
108+
font-size: token.slot($_card-prefix, $_card-tokens, subtitle-text-size);
109+
letter-spacing: token.slot($_card-prefix, $_card-tokens, subtitle-text-tracking);
110+
font-weight: token.slot($_card-prefix, $_card-tokens, subtitle-text-weight);
121111
}
122112

123113
// Title text and subtitles text within a card. MDC doesn't have pre-made title sections for cards.

‎src/material/core/tokens/m2/mat/_card.scss‎ renamed to ‎src/material/card/tokens/m2/_card.scss‎

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
@use '../../token-definition';
2-
@use '../../../theming/inspection';
3-
@use '../../../style/sass-utils';
1+
@use '../../../core/theming/inspection';
2+
@use '../../../core/style/sass-utils';
3+
@use '../../../core/tokens/token-definition';
44

55
// The prefix used to generate the fully qualified name for tokens in this file.
66
$prefix: (mat, card);
@@ -14,33 +14,22 @@ $prefix: (mat, card);
1414
// Tokens that can be configured through Angular Material's color theming API.
1515
@function get-color-tokens($theme) {
1616
@return (
17-
// Text color of the card's subtitle.
1817
subtitle-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
1918
);
2019
}
2120

2221
// Tokens that can be configured through Angular Material's typography theming API.
2322
@function get-typography-tokens($theme) {
2423
@return (
25-
// Font family of the card's title.
2624
title-text-font: inspection.get-theme-typography($theme, headline-6, font-family),
27-
// Line height of the card's title.
2825
title-text-line-height: inspection.get-theme-typography($theme, headline-6, line-height),
29-
// Font size of the card's title.
3026
title-text-size: inspection.get-theme-typography($theme, headline-6, font-size),
31-
// Letter spacing of the card's title.
3227
title-text-tracking: inspection.get-theme-typography($theme, headline-6, letter-spacing),
33-
// Font weight of the card's title.
3428
title-text-weight: inspection.get-theme-typography($theme, headline-6, font-weight),
35-
// Font family of the card's subtitle.
3629
subtitle-text-font: inspection.get-theme-typography($theme, subtitle-2, font-family),
37-
// Line height of the card's subtitle.
3830
subtitle-text-line-height: inspection.get-theme-typography($theme, subtitle-2, line-height),
39-
// Font size of the card's subtitle.
4031
subtitle-text-size: inspection.get-theme-typography($theme, subtitle-2, font-size),
41-
// Letter spacing of the card's subtitle.
4232
subtitle-text-tracking: inspection.get-theme-typography($theme, subtitle-2, letter-spacing),
43-
// Font weight of the card's subtitle.
4433
subtitle-text-weight: inspection.get-theme-typography($theme, subtitle-2, font-weight),
4534
);
4635
}

‎src/material/card/tokens/m2/_elevated-card.scss‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
@use '../../../core/theming/inspection';
2+
@use '../../../core/style/elevation';
3+
@use '../../../core/style/sass-utils';
4+
@use '../../../core/tokens/token-definition';
5+
6+
// The prefix used to generate the fully qualified name for tokens in this file.
7+
$prefix: (mdc, elevated-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+
container-shape: 4px,
14+
);
15+
}
16+
17+
// Tokens that can be configured through Angular Material's color theming API.
18+
@function get-color-tokens($theme) {
19+
@return (
20+
container-color: inspection.get-theme-color($theme, background, card),
21+
container-elevation: elevation.get-box-shadow(1),
22+
);
23+
}
24+
25+
// Tokens that can be configured through Angular Material's typography theming API.
26+
@function get-typography-tokens($theme) {
27+
@return ();
28+
}
29+
30+
// Tokens that can be configured through Angular Material's density theming API.
31+
@function get-density-tokens($theme) {
32+
@return ();
33+
}
34+
35+
// Combines the tokens generated by the above functions into a single map with placeholder values.
36+
// This is used to create token slots.
37+
@function get-token-slots() {
38+
@return sass-utils.deep-merge-all(
39+
get-unthemable-tokens(),
40+
get-color-tokens(token-definition.$placeholder-color-config),
41+
get-typography-tokens(token-definition.$placeholder-typography-config),
42+
get-density-tokens(token-definition.$placeholder-density-config)
43+
);
44+
}

0 commit comments

Comments
 (0)