Skip to content

Commit 2e46aa5

Browse files
andrewseguinandrewseguin
committed
fix(material/card): move tokens to component directory
1 parent d69de97 commit 2e46aa5

19 files changed

+361
-603
lines changed

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

Lines changed: 55 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,65 @@
11
@use 'sass:map';
2+
@use 'sass:string';
23
@use '../core/style/sass-utils';
34
@use '../core/theming/theming';
45
@use '../core/theming/inspection';
56
@use '../core/theming/validation';
67
@use '../core/typography/typography';
78
@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;
9+
@use 'm2-tokens' as m2-tokens;
10+
@use 'm3-tokens' as m3-tokens;
1111

1212
@mixin base($theme) {
1313
@if inspection.get-theme-version($theme) == 1 {
14-
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
14+
@include token-utils.define-token-values(
15+
m3-tokens.get-unthemable-tokens($theme)
16+
);
1517
} @else {
1618
@include sass-utils.current-selector-or-root() {
17-
@include token-utils.create-token-values-mixed(
18-
tokens-mdc-elevated-card.$prefix,
19-
tokens-mdc-elevated-card.get-unthemable-tokens()
20-
);
21-
@include token-utils.create-token-values-mixed(
22-
tokens-mdc-outlined-card.$prefix,
23-
tokens-mdc-outlined-card.get-unthemable-tokens()
24-
);
25-
@include token-utils.create-token-values-mixed(
26-
tokens-mat-card.$prefix,
27-
tokens-mat-card.get-unthemable-tokens()
19+
@include token-utils.define-token-values-mixed(
20+
m2-tokens.get-unthemable-tokens()
2821
);
2922
}
3023
}
3124
}
3225

3326
@mixin color($theme) {
3427
@if inspection.get-theme-version($theme) == 1 {
35-
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
28+
@include token-utils.define-token-values(
29+
m3-tokens.get-color-tokens($theme)
30+
);
3631
} @else {
3732
@include sass-utils.current-selector-or-root() {
38-
@include token-utils.create-token-values-mixed(
39-
tokens-mdc-elevated-card.$prefix,
40-
tokens-mdc-elevated-card.get-color-tokens($theme)
41-
);
42-
@include token-utils.create-token-values-mixed(
43-
tokens-mdc-outlined-card.$prefix,
44-
tokens-mdc-outlined-card.get-color-tokens($theme)
45-
);
46-
@include token-utils.create-token-values-mixed(
47-
tokens-mat-card.$prefix,
48-
tokens-mat-card.get-color-tokens($theme)
33+
@include token-utils.define-token-values-mixed(
34+
m2-tokens.get-color-tokens($theme)
4935
);
5036
}
5137
}
5238
}
5339

5440
@mixin typography($theme) {
5541
@if inspection.get-theme-version($theme) == 1 {
56-
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
42+
@include token-utils.define-token-values(
43+
m3-tokens.get-typography-tokens($theme)
44+
);
5745
} @else {
5846
@include sass-utils.current-selector-or-root() {
59-
@include token-utils.create-token-values-mixed(
60-
tokens-mdc-elevated-card.$prefix,
61-
tokens-mdc-elevated-card.get-typography-tokens($theme)
62-
);
63-
@include token-utils.create-token-values-mixed(
64-
tokens-mdc-outlined-card.$prefix,
65-
tokens-mdc-outlined-card.get-typography-tokens($theme)
66-
);
67-
@include token-utils.create-token-values-mixed(
68-
tokens-mat-card.$prefix,
69-
tokens-mat-card.get-typography-tokens($theme)
47+
@include token-utils.define-token-values-mixed(
48+
m2-tokens.get-typography-tokens($theme)
7049
);
7150
}
7251
}
7352
}
7453

7554
@mixin density($theme) {
7655
@if inspection.get-theme-version($theme) == 1 {
77-
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
56+
@include token-utils.define-token-values(
57+
m3-tokens.get-density-tokens($theme)
58+
);
7859
} @else {
7960
@include sass-utils.current-selector-or-root() {
80-
@include token-utils.create-token-values-mixed(
81-
tokens-mdc-elevated-card.$prefix,
82-
tokens-mdc-elevated-card.get-density-tokens($theme)
83-
);
84-
@include token-utils.create-token-values-mixed(
85-
tokens-mdc-outlined-card.$prefix,
86-
tokens-mdc-outlined-card.get-density-tokens($theme)
87-
);
88-
@include token-utils.create-token-values-mixed(
89-
tokens-mat-card.$prefix,
90-
tokens-mat-card.get-density-tokens($theme)
61+
@include token-utils.define-token-values-mixed(
62+
m2-tokens.get-density-tokens($theme)
9163
);
9264
}
9365
}
@@ -97,61 +69,47 @@
9769
@function _define-overrides() {
9870
@return (
9971
(
100-
namespace: tokens-mat-card.$prefix,
101-
tokens: tokens-mat-card.get-token-slots(),
102-
),
103-
(
104-
namespace: tokens-mdc-elevated-card.$prefix,
105-
tokens: tokens-mdc-elevated-card.get-token-slots(),
106-
prefix: 'elevated-',
107-
),
108-
(
109-
namespace: tokens-mdc-outlined-card.$prefix,
110-
tokens: tokens-mdc-outlined-card.get-token-slots(),
111-
prefix: 'outlined-',
72+
component: card,
73+
namespace: (mat),
74+
tokens: m3-tokens.get-system-fallbacks(),
75+
overrideTransforms: $overrideTransforms,
11276
),
11377
);
11478
}
11579

80+
/// Map of override keys that should be transformed to their corresponding token name
81+
$overrideTransforms: (
82+
elevated-container-shape: elevated-card-container-shape,
83+
outlined-container-shape: outlined-card-container-shape,
84+
outlined-outline-width: outlined-card-outline-width,
85+
elevated-container-color: elevated-card-container-color,
86+
elevated-container-elevation: elevated-card-container-elevation,
87+
outlined-container-color: outlined-card-container-color,
88+
outlined-outline-color: outlined-card-outline-color,
89+
outlined-container-elevation: outlined-card-container-elevation
90+
);
91+
11692
@mixin overrides($tokens: ()) {
117-
@include token-utils.batch-create-token-values($tokens, _define-overrides()...);
93+
$override-tokens: ();
94+
@each $key, $value in $tokens {
95+
$token: map.get($overrideTransforms, $key) or $key;
96+
$override-tokens: map.set($override-tokens, $token, $value);
97+
}
98+
99+
@include token-utils.batch-create-token-values($override-tokens, _define-overrides()...);
118100
}
119101

120102
@mixin theme($theme) {
121103
@include theming.private-check-duplicate-theme-styles($theme, 'mat-card') {
122-
@if inspection.get-theme-version($theme) == 1 {
123-
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
124-
} @else {
125-
@include base($theme);
126-
@if inspection.theme-has($theme, color) {
127-
@include color($theme);
128-
}
129-
@if inspection.theme-has($theme, density) {
130-
@include density($theme);
131-
}
132-
@if inspection.theme-has($theme, typography) {
133-
@include typography($theme);
134-
}
104+
@include base($theme);
105+
@if inspection.theme-has($theme, color) {
106+
@include color($theme);
107+
}
108+
@if inspection.theme-has($theme, density) {
109+
@include density($theme);
110+
}
111+
@if inspection.theme-has($theme, typography) {
112+
@include typography($theme);
135113
}
136-
}
137-
}
138-
139-
@mixin _theme-from-tokens($tokens) {
140-
@include validation.selector-defined(
141-
'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
142-
);
143-
@if ($tokens != ()) {
144-
@include token-utils.create-token-values(
145-
tokens-mdc-elevated-card.$prefix,
146-
map.get($tokens, tokens-mdc-elevated-card.$prefix)
147-
);
148-
@include token-utils.create-token-values(
149-
tokens-mdc-outlined-card.$prefix,
150-
map.get($tokens, tokens-mdc-outlined-card.$prefix)
151-
);
152-
@include token-utils.create-token-values(
153-
tokens-mat-card.$prefix,
154-
map.get($tokens, tokens-mat-card.$prefix)
155-
);
156114
}
157115
}

‎src/material/card/_m2-tokens.scss‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
@use '../core/theming/inspection';
2+
@use '../core/tokens/token-definition';
3+
@use '../core/style/elevation';
4+
5+
// Tokens that can't be configured through Angular Material's current theming API,
6+
// but may be in a future version of the theming API.
7+
@function get-unthemable-tokens() {
8+
@return (
9+
elevated-card-container-shape: 4px,
10+
outlined-card-container-shape: 4px,
11+
outlined-card-outline-width: 1px,
12+
);
13+
}
14+
15+
// Tokens that can be configured through Angular Material's color theming API.
16+
@function get-color-tokens($theme) {
17+
@return (
18+
card-subtitle-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
19+
elevated-card-container-color: inspection.get-theme-color($theme, background, card),
20+
elevated-card-container-elevation: elevation.get-box-shadow(1),
21+
outlined-card-container-color: inspection.get-theme-color($theme, background, card),
22+
outlined-card-outline-color: rgba(inspection.get-theme-color($theme, foreground, base), 0.12),
23+
outlined-card-container-elevation: elevation.get-box-shadow(0),
24+
);
25+
}
26+
27+
// Tokens that can be configured through Angular Material's typography theming API.
28+
@function get-typography-tokens($theme) {
29+
@return (
30+
card-title-text-font: inspection.get-theme-typography($theme, headline-6, font-family),
31+
card-title-text-line-height: inspection.get-theme-typography($theme, headline-6, line-height),
32+
card-title-text-size: inspection.get-theme-typography($theme, headline-6, font-size),
33+
card-title-text-tracking: inspection.get-theme-typography($theme, headline-6, letter-spacing),
34+
card-title-text-weight: inspection.get-theme-typography($theme, headline-6, font-weight),
35+
card-subtitle-text-font: inspection.get-theme-typography($theme, subtitle-2, font-family),
36+
card-subtitle-text-line-height: inspection.get-theme-typography($theme, subtitle-2, line-height),
37+
card-subtitle-text-size: inspection.get-theme-typography($theme, subtitle-2, font-size),
38+
card-subtitle-text-tracking: inspection.get-theme-typography($theme, subtitle-2, letter-spacing),
39+
card-subtitle-text-weight: inspection.get-theme-typography($theme, subtitle-2, font-weight),
40+
);
41+
}
42+
43+
// Tokens that can be configured through Angular Material's density theming API.
44+
@function get-density-tokens($theme) {
45+
@return ();
46+
}

‎src/material/card/_m3-tokens.scss‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
@use 'sass:map';
2+
@use '../core/style/sass-utils';
3+
@use '../core/tokens/token-definition';
4+
@use '../core/tokens/m3-system';
5+
@use '../core/style/elevation';
6+
7+
// Tokens that can't be configured through Angular Material's current theming API,
8+
// but may be in a future version of the theming API.
9+
@function get-unthemable-tokens($theme) {
10+
$systems: map.get($theme, _mat-theming-internals-do-not-access, system);
11+
@return (
12+
elevated-card-container-shape: map.get($systems, md-sys-shape, corner-medium),
13+
outlined-card-container-shape: map.get($systems, md-sys-shape, corner-medium),
14+
outlined-card-outline-width: 1px,
15+
);
16+
}
17+
18+
// Tokens that can be configured through Angular Material's color theming API.
19+
@function get-color-tokens($theme) {
20+
$systems: map.get($theme, _mat-theming-internals-do-not-access, system);
21+
$tokens: (
22+
card-subtitle-text-color: map.get($systems, md-sys-color, on-surface),
23+
elevated-card-container-color: map.get($systems, md-sys-color, surface-container-low),
24+
elevated-card-container-elevation: map.get($systems, md-sys-elevation, level1),
25+
outlined-card-container-color: map.get($systems, md-sys-color, surface),
26+
outlined-card-outline-color: map.get($systems, md-sys-color, outline-variant),
27+
outlined-card-container-elevation: map.get($systems, md-sys-elevation, level0),
28+
);
29+
30+
$elevation: map.get($tokens, elevated-card-container-elevation);
31+
32+
@if ($elevation != null) {
33+
$tokens: map.set($tokens, elevated-card-container-elevation, elevation.get-box-shadow($elevation));
34+
}
35+
36+
@return $tokens;
37+
}
38+
39+
// Tokens that can be configured through Angular Material's typography theming API.
40+
@function get-typography-tokens($theme) {
41+
$systems: map.get($theme, _mat-theming-internals-do-not-access, system);
42+
@return sass-utils.merge-all(
43+
token-definition.generate-typography-tokens($systems, card-title-text, title-large),
44+
token-definition.generate-typography-tokens($systems, card-subtitle-text, title-medium),
45+
);
46+
}
47+
48+
// Tokens that can be configured through Angular Material's density theming API.
49+
@function get-density-tokens($theme) {
50+
@return ();
51+
}
52+
53+
// Combines the tokens generated by the above functions into a single map with M3 system fallbacks.
54+
// This is used to create token slots.
55+
@function get-system-fallbacks() {
56+
@return sass-utils.deep-merge-all(
57+
get-unthemable-tokens(m3-system.$system-var-theme),
58+
get-color-tokens(m3-system.$system-var-theme),
59+
get-typography-tokens(m3-system.$system-var-theme),
60+
get-density-tokens(m3-system.$system-var-theme)
61+
);
62+
}

0 commit comments

Comments
 (0)