Skip to content

Commit 8bb50e7

Browse files
svc-instuisvc-instui
committed
add card component tokens
1 parent 770f057 commit 8bb50e7

3 files changed

Lines changed: 210 additions & 0 deletions

File tree

‎tokensStudio/$metadata.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"canvas/component/Billboard",
1414
"canvas/component/Breadcrumb",
1515
"canvas/component/Byline",
16+
"canvas/component/Card",
1617
"canvas/component/Calendar",
1718
"canvas/component/Chart",
1819
"canvas/component/Checkbox",
@@ -80,6 +81,7 @@
8081
"rebrand/component/Billboard",
8182
"rebrand/component/Breadcrumb",
8283
"rebrand/component/Byline",
84+
"rebrand/component/Card",
8385
"rebrand/component/Calendar",
8486
"rebrand/component/Chart",
8587
"rebrand/component/Checkbox",

‎tokensStudio/canvas/component/Card.json‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
{
2+
"card": {
3+
"borderRadius": {
4+
"base": {
5+
"sm": {
6+
"value": "0.75rem",
7+
"type": "borderRadius"
8+
},
9+
"md": {
10+
"value": "{semantic.borderRadius.container.md}",
11+
"type": "borderRadius"
12+
},
13+
"lg": {
14+
"value": "{semantic.borderRadius.container.md}",
15+
"type": "borderRadius"
16+
}
17+
},
18+
"nested": {
19+
"sm": {
20+
"value": "{semantic.borderRadius.sm}",
21+
"type": "borderRadius"
22+
},
23+
"md": {
24+
"value": "{semantic.borderRadius.sm}",
25+
"type": "borderRadius"
26+
},
27+
"lg": {
28+
"value": "{semantic.borderRadius.md}",
29+
"type": "borderRadius"
30+
}
31+
}
32+
},
33+
"padding": {
34+
"base": {
35+
"sm": {
36+
"value": "{semantic.spacing.padding.container.sm}",
37+
"type": "spacing"
38+
},
39+
"md": {
40+
"value": "{semantic.spacing.padding.container.md}",
41+
"type": "spacing"
42+
},
43+
"lg": {
44+
"value": "{semantic.spacing.padding.container.lg}",
45+
"type": "spacing"
46+
}
47+
},
48+
"nested": {
49+
"sm": {
50+
"value": "{semantic.spacing.padding.container.xxs}",
51+
"type": "spacing"
52+
},
53+
"md": {
54+
"value": "{semantic.spacing.padding.container.xs}",
55+
"type": "spacing"
56+
},
57+
"lg": {
58+
"value": "{semantic.spacing.padding.container.sm}",
59+
"type": "spacing"
60+
}
61+
}
62+
},
63+
"boxShadow": {
64+
"value": [
65+
{
66+
"x": "{semantic.dropShadow.x.elevation1.dropshadow1}",
67+
"y": "{semantic.dropShadow.y.elevation1.dropshadow1}",
68+
"blur": "{semantic.dropShadow.blur.elevation1.dropshadow1}",
69+
"spread": "{semantic.dropShadow.spread.elevation1.dropshadow1}",
70+
"color": "{semantic.color.dropShadow.shadowColor1}",
71+
"type": "dropShadow"
72+
},
73+
{
74+
"x": "{semantic.dropShadow.x.elevation1.dropshadow1}",
75+
"y": "{semantic.dropShadow.y.elevation1.dropshadow2}",
76+
"blur": "{semantic.dropShadow.blur.elevation1.dropshadow2}",
77+
"spread": "{semantic.dropShadow.spread.elevation1.dropshadow2}",
78+
"color": "{semantic.color.dropShadow.shadowColor2}",
79+
"type": "dropShadow"
80+
}
81+
],
82+
"type": "boxShadow",
83+
"description": "Elevated base surfaces: Persistent UI and everyday interactive surfaces like navigation, cards, inputs, and buttons."
84+
},
85+
"backgroundColor": {
86+
"value": "{semantic.color.background.container}",
87+
"type": "color"
88+
},
89+
"nestedBorderColor": {
90+
"value": "{semantic.color.stroke.muted}",
91+
"type": "color"
92+
},
93+
"breakpoint": {
94+
"md": {
95+
"value": "20rem",
96+
"type": "sizing"
97+
},
98+
"lg": {
99+
"value": "40rem",
100+
"type": "sizing"
101+
}
102+
}
103+
}
104+
}

‎tokensStudio/rebrand/component/Card.json‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
{
2+
"card": {
3+
"borderRadius": {
4+
"base": {
5+
"sm": {
6+
"value": "0.75rem",
7+
"type": "borderRadius"
8+
},
9+
"md": {
10+
"value": "{semantic.borderRadius.container.md}",
11+
"type": "borderRadius"
12+
},
13+
"lg": {
14+
"value": "{semantic.borderRadius.container.md}",
15+
"type": "borderRadius"
16+
}
17+
},
18+
"nested": {
19+
"sm": {
20+
"value": "{semantic.borderRadius.md}",
21+
"type": "borderRadius"
22+
},
23+
"md": {
24+
"value": "{semantic.borderRadius.md}",
25+
"type": "borderRadius"
26+
},
27+
"lg": {
28+
"value": "{semantic.borderRadius.lg}",
29+
"type": "borderRadius"
30+
}
31+
}
32+
},
33+
"padding": {
34+
"base": {
35+
"sm": {
36+
"value": "{semantic.spacing.padding.container.sm}",
37+
"type": "spacing"
38+
},
39+
"md": {
40+
"value": "{semantic.spacing.padding.container.md}",
41+
"type": "spacing"
42+
},
43+
"lg": {
44+
"value": "{semantic.spacing.padding.container.lg}",
45+
"type": "spacing"
46+
}
47+
},
48+
"nested": {
49+
"sm": {
50+
"value": "{semantic.spacing.padding.container.xxs}",
51+
"type": "spacing"
52+
},
53+
"md": {
54+
"value": "{semantic.spacing.padding.container.xs}",
55+
"type": "spacing"
56+
},
57+
"lg": {
58+
"value": "{semantic.spacing.padding.container.sm}",
59+
"type": "spacing"
60+
}
61+
}
62+
},
63+
"boxShadow": {
64+
"value": [
65+
{
66+
"x": "{semantic.dropShadow.x.elevation1.dropshadow1}",
67+
"y": "{semantic.dropShadow.y.elevation1.dropshadow1}",
68+
"blur": "{semantic.dropShadow.blur.elevation1.dropshadow1}",
69+
"spread": "{semantic.dropShadow.spread.elevation1.dropshadow1}",
70+
"color": "{semantic.color.dropShadow.shadowColor1}",
71+
"type": "dropShadow"
72+
},
73+
{
74+
"x": "{semantic.dropShadow.x.elevation1.dropshadow1}",
75+
"y": "{semantic.dropShadow.y.elevation1.dropshadow2}",
76+
"blur": "{semantic.dropShadow.blur.elevation1.dropshadow2}",
77+
"spread": "{semantic.dropShadow.spread.elevation1.dropshadow2}",
78+
"color": "{semantic.color.dropShadow.shadowColor2}",
79+
"type": "dropShadow"
80+
}
81+
],
82+
"type": "boxShadow",
83+
"description": "Elevated base surfaces: Persistent UI and everyday interactive surfaces like navigation, cards, inputs, and buttons."
84+
},
85+
"backgroundColor": {
86+
"value": "{semantic.color.background.container}",
87+
"type": "color"
88+
},
89+
"nestedBorderColor": {
90+
"value": "{semantic.color.stroke.muted}",
91+
"type": "color"
92+
},
93+
"breakpoint": {
94+
"md": {
95+
"value": "20rem",
96+
"type": "sizing"
97+
},
98+
"lg": {
99+
"value": "40rem",
100+
"type": "sizing"
101+
}
102+
}
103+
}
104+
}

0 commit comments

Comments
 (0)