Skip to content

Commit c3744aa

Browse files
andrewseguinandrewseguin
committed
fix(material/card): move tokens to component directory
1 parent 149fe61 commit c3744aa

24 files changed

+505
-617
lines changed

‎src/material/_index.scss‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@
2323
system-level-motion, system-level-state, theme, theme-overrides;
2424

2525
// Private/Internal
26-
@forward './core/density/private/all-density' show all-component-densities;
2726
@forward './core/theming/theming' show private-check-duplicate-theme-styles,
2827
private-legacy-get-theme, private-is-theme-object;
2928
@forward './core/style/private' show private-theme-elevation;
@@ -42,9 +41,9 @@
4241
@forward './core/style/elevation' show elevation, overridable-elevation, elevation-transition;
4342

4443
// Theme bundles
45-
@forward './core/theming/all-theme' show all-component-themes, all-component-bases;
46-
@forward './core/color/all-color' show all-component-colors;
47-
@forward './core/typography/all-typography' show all-component-typographies;
44+
@forward './core/theming/all-theme' show
45+
all-component-themes, all-component-bases, all-component-colors,
46+
all-component-typographies, all-component-densities;
4847

4948
// Component themes
5049
@forward './core/core-theme' as core-* show core-color, core-theme, core-typography, core-density,

‎src/material/card/BUILD.bazel‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,22 @@ sass_library(
3333
],
3434
)
3535

36+
sass_library(
37+
name = "tokens_scss_lib",
38+
srcs = [
39+
"_m2-tokens.scss",
40+
"_m3-tokens.scss",
41+
],
42+
deps = [
43+
"//src/material/core:core_scss_lib",
44+
],
45+
)
46+
3647
sass_binary(
3748
name = "card_scss",
3849
src = "card.scss",
3950
deps = [
51+
":tokens_scss_lib",
4052
"//src/material/core:core_scss_lib",
4153
],
4254
)

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

Lines changed: 54 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -2,92 +2,62 @@
22
@use '../core/style/sass-utils';
33
@use '../core/theming/theming';
44
@use '../core/theming/inspection';
5-
@use '../core/theming/validation';
65
@use '../core/typography/typography';
76
@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;
7+
@use 'm2-tokens' as m2-tokens;
8+
@use 'm3-tokens' as m3-tokens;
119

1210
@mixin base($theme) {
1311
@if inspection.get-theme-version($theme) == 1 {
14-
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
12+
@include token-utils.define-token-values(
13+
m3-tokens.get-unthemable-tokens($theme)
14+
);
1515
} @else {
1616
@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()
17+
@include token-utils.define-token-values-mixed(
18+
m2-tokens.get-unthemable-tokens()
2819
);
2920
}
3021
}
3122
}
3223

3324
@mixin color($theme) {
3425
@if inspection.get-theme-version($theme) == 1 {
35-
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
26+
@include token-utils.define-token-values(
27+
m3-tokens.get-color-tokens($theme)
28+
);
3629
} @else {
3730
@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)
31+
@include token-utils.define-token-values-mixed(
32+
m2-tokens.get-color-tokens($theme)
4933
);
5034
}
5135
}
5236
}
5337

5438
@mixin typography($theme) {
5539
@if inspection.get-theme-version($theme) == 1 {
56-
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
40+
@include token-utils.define-token-values(
41+
m3-tokens.get-typography-tokens($theme)
42+
);
5743
} @else {
5844
@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)
45+
@include token-utils.define-token-values-mixed(
46+
m2-tokens.get-typography-tokens($theme)
7047
);
7148
}
7249
}
7350
}
7451

7552
@mixin density($theme) {
7653
@if inspection.get-theme-version($theme) == 1 {
77-
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
54+
@include token-utils.define-token-values(
55+
m3-tokens.get-density-tokens($theme)
56+
);
7857
} @else {
7958
@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)
59+
@include token-utils.define-token-values-mixed(
60+
m2-tokens.get-density-tokens($theme)
9161
);
9262
}
9363
}
@@ -97,61 +67,47 @@
9767
@function _define-overrides() {
9868
@return (
9969
(
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-',
70+
component: card,
71+
namespace: (mat),
72+
tokens: m3-tokens.get-system-fallbacks(),
73+
overrideTransforms: $overrideTransforms,
11274
),
11375
);
11476
}
11577

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

120100
@mixin theme($theme) {
121101
@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-
}
102+
@include base($theme);
103+
@if inspection.theme-has($theme, color) {
104+
@include color($theme);
105+
}
106+
@if inspection.theme-has($theme, density) {
107+
@include density($theme);
108+
}
109+
@if inspection.theme-has($theme, typography) {
110+
@include typography($theme);
135111
}
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-
);
156112
}
157113
}

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

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

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
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(
34+
$tokens, elevated-card-container-elevation, elevation.get-box-shadow($elevation));
35+
}
36+
37+
@return $tokens;
38+
}
39+
40+
// Tokens that can be configured through Angular Material's typography theming API.
41+
@function get-typography-tokens($theme) {
42+
$systems: map.get($theme, _mat-theming-internals-do-not-access, system);
43+
@return sass-utils.merge-all(
44+
token-definition.generate-typography-tokens($systems, card-title-text, title-large),
45+
token-definition.generate-typography-tokens($systems, card-subtitle-text, title-medium),
46+
);
47+
}
48+
49+
// Tokens that can be configured through Angular Material's density theming API.
50+
@function get-density-tokens($theme) {
51+
@return ();
52+
}
53+
54+
// Combines the tokens generated by the above functions into a single map with M3 system fallbacks.
55+
// This is used to create token slots.
56+
@function get-system-fallbacks() {
57+
@return sass-utils.deep-merge-all(
58+
get-unthemable-tokens(m3-system.$system-var-theme),
59+
get-color-tokens(m3-system.$system-var-theme),
60+
get-typography-tokens(m3-system.$system-var-theme),
61+
get-density-tokens(m3-system.$system-var-theme)
62+
);
63+
}

0 commit comments

Comments
 (0)