Skip to content

Commit 2a06b29

Browse files
asyncLizcopybara-github
asyncLiz
authored and
copybara-github
committed
chore(tokens): add card tokens
PiperOrigin-RevId: 576643924
1 parent c390291 commit 2a06b29

File tree

4 files changed

+198
-0
lines changed

4 files changed

+198
-0
lines changed

‎tokens/_index.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,12 @@
1111
@forward './md-comp-dialog' as md-comp-dialog-*;
1212
@forward './md-comp-divider' as md-comp-divider-*;
1313
@forward './md-comp-elevated-button' as md-comp-elevated-button-*;
14+
@forward './md-comp-elevated-card' as md-comp-elevated-card-*;
1415
@forward './md-comp-elevation' as md-comp-elevation-*;
1516
@forward './md-comp-fab' as md-comp-fab-*;
1617
@forward './md-comp-fab-branded' as md-comp-fab-branded-*;
1718
@forward './md-comp-filled-button' as md-comp-filled-button-*;
19+
@forward './md-comp-filled-card' as md-comp-filled-card-*;
1820
@forward './md-comp-filled-field' as md-comp-filled-field-*;
1921
@forward './md-comp-filled-icon-button' as md-comp-filled-icon-button-*;
2022
@forward './md-comp-filled-select' as md-comp-filled-select-*;
@@ -38,6 +40,7 @@
3840
@forward './md-comp-navigation-bar' as md-comp-navigation-bar-*;
3941
@forward './md-comp-navigation-drawer' as md-comp-navigation-drawer-*;
4042
@forward './md-comp-outlined-button' as md-comp-outlined-button-*;
43+
@forward './md-comp-outlined-card' as md-comp-outlined-card-*;
4144
@forward './md-comp-outlined-field' as md-comp-outlined-field-*;
4245
@forward './md-comp-outlined-icon-button' as md-comp-outlined-icon-button-*;
4346
@forward './md-comp-outlined-segmented-button' as

‎tokens/_md-comp-elevated-card.scss

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
//
2+
// Copyright 2023 Google LLC
3+
// SPDX-License-Identifier: Apache-2.0
4+
//
5+
6+
// go/keep-sorted start
7+
@use './md-sys-color';
8+
@use './md-sys-elevation';
9+
@use './md-sys-shape';
10+
@use './md-sys-state';
11+
@use './v0_192/md-comp-elevated-card';
12+
@use './values';
13+
// go/keep-sorted end
14+
15+
$supported-tokens: (
16+
// go/keep-sorted start
17+
'container-color',
18+
'container-elevation',
19+
'container-shadow-color',
20+
'container-shape',
21+
// go/keep-sorted end
22+
);
23+
24+
// TODO(b/307362112): Add interactive card tokens (hover, focus, pressed)
25+
// TODO(b/307361748): Add disabled cards tokens.
26+
$unsupported-tokens: (
27+
// go/keep-sorted start
28+
'disabled-container-color',
29+
'disabled-container-elevation',
30+
'disabled-container-opacity',
31+
'dragged-container-elevation',
32+
'dragged-state-layer-color',
33+
'dragged-state-layer-opacity',
34+
'focus-container-elevation',
35+
'focus-state-layer-color',
36+
'focus-state-layer-opacity',
37+
'hover-container-elevation',
38+
'hover-state-layer-color',
39+
'hover-state-layer-opacity',
40+
'icon-color',
41+
'icon-size',
42+
'pressed-container-elevation',
43+
'pressed-state-layer-color',
44+
'pressed-state-layer-opacity',
45+
// go/keep-sorted end
46+
);
47+
48+
$_default: (
49+
'md-sys-color': md-sys-color.values-light(),
50+
'md-sys-elevation': md-sys-elevation.values(),
51+
'md-sys-shape': md-sys-shape.values(),
52+
'md-sys-state': md-sys-state.values(),
53+
);
54+
55+
@function values($deps: $_default, $exclude-hardcoded-values: false) {
56+
$tokens: values.validate(
57+
md-comp-elevated-card.values($deps, $exclude-hardcoded-values),
58+
$supported-tokens: $supported-tokens,
59+
$unsupported-tokens: $unsupported-tokens
60+
);
61+
62+
@return $tokens;
63+
}

‎tokens/_md-comp-filled-card.scss

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
//
2+
// Copyright 2023 Google LLC
3+
// SPDX-License-Identifier: Apache-2.0
4+
//
5+
6+
// go/keep-sorted start
7+
@use './md-sys-color';
8+
@use './md-sys-elevation';
9+
@use './md-sys-shape';
10+
@use './md-sys-state';
11+
@use './v0_192/md-comp-filled-card';
12+
@use './values';
13+
// go/keep-sorted end
14+
15+
$supported-tokens: (
16+
// go/keep-sorted start
17+
'container-color',
18+
'container-elevation',
19+
'container-shadow-color',
20+
'container-shape',
21+
// go/keep-sorted end
22+
);
23+
24+
// TODO(b/307362112): Add interactive card tokens (hover, focus, pressed)
25+
// TODO(b/307361748): Add disabled cards tokens.
26+
$unsupported-tokens: (
27+
// go/keep-sorted start
28+
'disabled-container-color',
29+
'disabled-container-elevation',
30+
'disabled-container-opacity',
31+
'dragged-container-elevation',
32+
'dragged-state-layer-color',
33+
'dragged-state-layer-opacity',
34+
'focus-container-elevation',
35+
'focus-state-layer-color',
36+
'focus-state-layer-opacity',
37+
'hover-container-elevation',
38+
'hover-state-layer-color',
39+
'hover-state-layer-opacity',
40+
'icon-color',
41+
'icon-size',
42+
'pressed-container-elevation',
43+
'pressed-state-layer-color',
44+
'pressed-state-layer-opacity',
45+
// go/keep-sorted end
46+
);
47+
48+
$_default: (
49+
'md-sys-color': md-sys-color.values-light(),
50+
'md-sys-elevation': md-sys-elevation.values(),
51+
'md-sys-shape': md-sys-shape.values(),
52+
'md-sys-state': md-sys-state.values(),
53+
);
54+
55+
@function values($deps: $_default, $exclude-hardcoded-values: false) {
56+
$tokens: values.validate(
57+
md-comp-filled-card.values($deps, $exclude-hardcoded-values),
58+
$supported-tokens: $supported-tokens,
59+
$unsupported-tokens: $unsupported-tokens
60+
);
61+
62+
@return $tokens;
63+
}

‎tokens/_md-comp-outlined-card.scss

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
//
2+
// Copyright 2023 Google LLC
3+
// SPDX-License-Identifier: Apache-2.0
4+
//
5+
6+
// go/keep-sorted start
7+
@use './md-sys-color';
8+
@use './md-sys-elevation';
9+
@use './md-sys-shape';
10+
@use './md-sys-state';
11+
@use './v0_192/md-comp-outlined-card';
12+
@use './values';
13+
// go/keep-sorted end
14+
15+
$supported-tokens: (
16+
// go/keep-sorted start
17+
'container-color',
18+
'container-elevation',
19+
'container-shadow-color',
20+
'container-shape',
21+
'outline-color',
22+
'outline-width',
23+
// go/keep-sorted end
24+
);
25+
26+
// TODO(b/307362112): Add interactive card tokens (hover, focus, pressed)
27+
// TODO(b/307361748): Add disabled cards tokens.
28+
$unsupported-tokens: (
29+
// go/keep-sorted start
30+
'disabled-container-elevation',
31+
'disabled-outline-color',
32+
'disabled-outline-opacity',
33+
'dragged-container-elevation',
34+
'dragged-outline-color',
35+
'dragged-state-layer-color',
36+
'dragged-state-layer-opacity',
37+
'focus-container-elevation',
38+
'focus-outline-color',
39+
'focus-state-layer-color',
40+
'focus-state-layer-opacity',
41+
'hover-container-elevation',
42+
'hover-outline-color',
43+
'hover-state-layer-color',
44+
'hover-state-layer-opacity',
45+
'icon-color',
46+
'icon-size',
47+
'pressed-container-elevation',
48+
'pressed-outline-color',
49+
'pressed-state-layer-color',
50+
'pressed-state-layer-opacity',
51+
// go/keep-sorted end
52+
);
53+
54+
$_default: (
55+
'md-sys-color': md-sys-color.values-light(),
56+
'md-sys-elevation': md-sys-elevation.values(),
57+
'md-sys-shape': md-sys-shape.values(),
58+
'md-sys-state': md-sys-state.values(),
59+
);
60+
61+
@function values($deps: $_default, $exclude-hardcoded-values: false) {
62+
$tokens: values.validate(
63+
md-comp-outlined-card.values($deps, $exclude-hardcoded-values),
64+
$supported-tokens: $supported-tokens,
65+
$unsupported-tokens: $unsupported-tokens
66+
);
67+
68+
@return $tokens;
69+
}

0 commit comments

Comments
 (0)