Skip to content

Commit 67222c5

Browse files
tayseataysea
committed
Small refinements, add primary color
1 parent cd01a3f commit 67222c5

File tree

11 files changed

+548
-320
lines changed

11 files changed

+548
-320
lines changed

‎design-tokens/tokens/color.dark.json

Lines changed: 57 additions & 135 deletions
Large diffs are not rendered by default.

‎design-tokens/tokens/color.light.json

Lines changed: 57 additions & 135 deletions
Large diffs are not rendered by default.

‎design-tokens/tones/color.warm-light.json

Lines changed: 348 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,348 @@
1+
{
2+
"primary": {
3+
"$type": "color",
4+
"$value": "{color.purple.20}",
5+
"$description": "",
6+
"$extensions": {
7+
"com.figma": {
8+
"hiddenFromPublishing": false,
9+
"scopes": ["ALL_SCOPES"],
10+
"codeSyntax": {}
11+
}
12+
}
13+
},
14+
"background": {
15+
"default": {
16+
"$type": "color",
17+
"$value": "{color.white.100}",
18+
"$description": "",
19+
"$extensions": {
20+
"com.figma": {
21+
"hiddenFromPublishing": false,
22+
"scopes": ["ALL_SCOPES"],
23+
"codeSyntax": {}
24+
}
25+
}
26+
},
27+
"front": {
28+
"$type": "color",
29+
"$value": "{color.white.100}",
30+
"$description": "Background color applied on top of background-back.",
31+
"$extensions": {
32+
"com.figma": {
33+
"hiddenFromPublishing": false,
34+
"scopes": ["ALL_SCOPES"],
35+
"codeSyntax": {}
36+
}
37+
}
38+
},
39+
"back": {
40+
"$type": "color",
41+
"$value": "{color.tan.10}",
42+
"$description": "Background color applied to the base layer of the application.",
43+
"$extensions": {
44+
"com.figma": {
45+
"hiddenFromPublishing": false,
46+
"scopes": ["ALL_SCOPES"],
47+
"codeSyntax": {}
48+
}
49+
}
50+
},
51+
"contrast": {
52+
"$type": "color",
53+
"$value": "{color.black.4}",
54+
"$description": "abc",
55+
"$extensions": {
56+
"com.figma": {
57+
"hiddenFromPublishing": false,
58+
"scopes": ["ALL_SCOPES"],
59+
"codeSyntax": {}
60+
}
61+
}
62+
},
63+
"active": {
64+
"$type": "color",
65+
"$value": "{color.background.contrast}",
66+
"$description": "abc",
67+
"$extensions": {
68+
"com.figma": {
69+
"hiddenFromPublishing": false,
70+
"scopes": ["ALL_SCOPES"],
71+
"codeSyntax": {}
72+
}
73+
}
74+
},
75+
"selected": {
76+
"$type": "color",
77+
"$value": "{color.brand}",
78+
"$description": "",
79+
"$extensions": {
80+
"com.figma": {
81+
"hiddenFromPublishing": false,
82+
"scopes": ["ALL_SCOPES"],
83+
"codeSyntax": {}
84+
}
85+
}
86+
},
87+
"status": {
88+
"critical": {
89+
"$type": "color",
90+
"$value": "{color.red.20-12pc}",
91+
"$description": "",
92+
"$extensions": {
93+
"com.figma": {
94+
"hiddenFromPublishing": false,
95+
"scopes": ["ALL_SCOPES"],
96+
"codeSyntax": {}
97+
}
98+
}
99+
},
100+
"ok": {
101+
"$type": "color",
102+
"$value": "{color.green.10-12pc}",
103+
"$description": "",
104+
"$extensions": {
105+
"com.figma": {
106+
"hiddenFromPublishing": false,
107+
"scopes": ["ALL_SCOPES"],
108+
"codeSyntax": {}
109+
}
110+
}
111+
},
112+
"warning": {
113+
"$type": "color",
114+
"$value": "{color.yellow.10-12pc}",
115+
"$description": "",
116+
"$extensions": {
117+
"com.figma": {
118+
"hiddenFromPublishing": false,
119+
"scopes": ["ALL_SCOPES"],
120+
"codeSyntax": {}
121+
}
122+
}
123+
},
124+
"info": {
125+
"$type": "color",
126+
"$value": "{color.blue.10-12pc}",
127+
"$description": "",
128+
"$extensions": {
129+
"com.figma": {
130+
"hiddenFromPublishing": false,
131+
"scopes": ["ALL_SCOPES"],
132+
"codeSyntax": {}
133+
}
134+
}
135+
}
136+
},
137+
"validation": {
138+
"critical": {
139+
"$type": "color",
140+
"$value": "{color.red.20-24pc}",
141+
"$description": "abc",
142+
"$extensions": {
143+
"com.figma": {
144+
"hiddenFromPublishing": false,
145+
"scopes": ["ALL_SCOPES"],
146+
"codeSyntax": {}
147+
}
148+
}
149+
},
150+
"warning": {
151+
"$type": "color",
152+
"$value": "{color.yellow.10-24pc}",
153+
"$description": "abc",
154+
"$extensions": {
155+
"com.figma": {
156+
"hiddenFromPublishing": false,
157+
"scopes": ["ALL_SCOPES"],
158+
"codeSyntax": {}
159+
}
160+
}
161+
},
162+
"ok": {
163+
"$type": "color",
164+
"$value": "{color.green.10-24pc}",
165+
"$description": "abc",
166+
"$extensions": {
167+
"com.figma": {
168+
"hiddenFromPublishing": false,
169+
"scopes": ["ALL_SCOPES"],
170+
"codeSyntax": {}
171+
}
172+
}
173+
}
174+
}
175+
},
176+
"chart": {
177+
"qualitative": {
178+
"10": {
179+
"$type": "color",
180+
"$value": "{color.blue.20}",
181+
"$description": "",
182+
"$extensions": {
183+
"com.figma": {
184+
"hiddenFromPublishing": false,
185+
"scopes": ["ALL_SCOPES"],
186+
"codeSyntax": {}
187+
}
188+
}
189+
},
190+
"20": {
191+
"$type": "color",
192+
"$value": "{color.orange.20}",
193+
"$description": "",
194+
"$extensions": {
195+
"com.figma": {
196+
"hiddenFromPublishing": false,
197+
"scopes": ["ALL_SCOPES"],
198+
"codeSyntax": {}
199+
}
200+
}
201+
},
202+
"30": {
203+
"$type": "color",
204+
"$value": "{color.purple.20}",
205+
"$description": "",
206+
"$extensions": {
207+
"com.figma": {
208+
"hiddenFromPublishing": false,
209+
"scopes": ["ALL_SCOPES"],
210+
"codeSyntax": {}
211+
}
212+
}
213+
},
214+
"40": {
215+
"$type": "color",
216+
"$value": "{color.teal.10}",
217+
"$description": "",
218+
"$extensions": {
219+
"com.figma": {
220+
"hiddenFromPublishing": false,
221+
"scopes": ["ALL_SCOPES"],
222+
"codeSyntax": {}
223+
}
224+
}
225+
},
226+
"50": {
227+
"$type": "color",
228+
"$value": "{color.yellow.30}",
229+
"$description": "",
230+
"$extensions": {
231+
"com.figma": {
232+
"hiddenFromPublishing": false,
233+
"scopes": ["ALL_SCOPES"],
234+
"codeSyntax": {}
235+
}
236+
}
237+
},
238+
"60": {
239+
"$type": "color",
240+
"$value": "{color.purple.10}",
241+
"$description": "",
242+
"$extensions": {
243+
"com.figma": {
244+
"hiddenFromPublishing": false,
245+
"scopes": ["ALL_SCOPES"],
246+
"codeSyntax": {}
247+
}
248+
}
249+
},
250+
"70": {
251+
"$type": "color",
252+
"$value": "{color.blue.10}",
253+
"$description": "",
254+
"$extensions": {
255+
"com.figma": {
256+
"hiddenFromPublishing": false,
257+
"scopes": ["ALL_SCOPES"],
258+
"codeSyntax": {}
259+
}
260+
}
261+
},
262+
"10-secondary": {
263+
"$type": "color",
264+
"$value": "{color.blue.20-12pc}",
265+
"$description": "",
266+
"$extensions": {
267+
"com.figma": {
268+
"hiddenFromPublishing": false,
269+
"scopes": ["ALL_SCOPES"],
270+
"codeSyntax": {}
271+
}
272+
}
273+
},
274+
"20-secondary": {
275+
"$type": "color",
276+
"$value": "{color.orange.20-12pc}",
277+
"$description": "",
278+
"$extensions": {
279+
"com.figma": {
280+
"hiddenFromPublishing": false,
281+
"scopes": ["ALL_SCOPES"],
282+
"codeSyntax": {}
283+
}
284+
}
285+
},
286+
"30-secondary": {
287+
"$type": "color",
288+
"$value": "{color.purple.20 -12pc}",
289+
"$description": "",
290+
"$extensions": {
291+
"com.figma": {
292+
"hiddenFromPublishing": false,
293+
"scopes": ["ALL_SCOPES"],
294+
"codeSyntax": {}
295+
}
296+
}
297+
},
298+
"40-secondary": {
299+
"$type": "color",
300+
"$value": "{color.teal.10-12pc}",
301+
"$description": "",
302+
"$extensions": {
303+
"com.figma": {
304+
"hiddenFromPublishing": false,
305+
"scopes": ["ALL_SCOPES"],
306+
"codeSyntax": {}
307+
}
308+
}
309+
},
310+
"50-secondary": {
311+
"$type": "color",
312+
"$value": "{color.yellow.30-12pc}",
313+
"$description": "",
314+
"$extensions": {
315+
"com.figma": {
316+
"hiddenFromPublishing": false,
317+
"scopes": ["ALL_SCOPES"],
318+
"codeSyntax": {}
319+
}
320+
}
321+
},
322+
"60-secondary": {
323+
"$type": "color",
324+
"$value": "{color.purple.10-12pc}",
325+
"$description": "",
326+
"$extensions": {
327+
"com.figma": {
328+
"hiddenFromPublishing": false,
329+
"scopes": ["ALL_SCOPES"],
330+
"codeSyntax": {}
331+
}
332+
}
333+
},
334+
"70-secondary": {
335+
"$type": "color",
336+
"$value": "{color.blue.10-12pc}",
337+
"$description": "",
338+
"$extensions": {
339+
"com.figma": {
340+
"hiddenFromPublishing": false,
341+
"scopes": ["ALL_SCOPES"],
342+
"codeSyntax": {}
343+
}
344+
}
345+
}
346+
}
347+
}
348+
}

‎sandbox/grommet-app/src/components/DashboardCard/DashboardCard.jsx

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { LinkNext, ShareRounded } from 'grommet-icons';
1515
export const DashboardCard = ({
1616
icon,
1717
external,
18+
hideCta,
1819
level,
1920
title,
2021
subtitle,
@@ -54,13 +55,15 @@ export const DashboardCard = ({
5455
<Text size="small">{subtitle}</Text>
5556
</Box>
5657
</Box>
57-
<Box flex={false}>
58-
{external ? (
59-
<ShareRounded a11yTitle={`Go to ${title}`} color="brand" />
60-
) : (
61-
<LinkNext a11yTitle={`Go to ${title}`} color="brand" />
62-
)}
63-
</Box>
58+
{!hideCta ? (
59+
<Box flex={false}>
60+
{external ? (
61+
<ShareRounded a11yTitle={`Go to ${title}`} color="primary" />
62+
) : (
63+
<LinkNext a11yTitle={`Go to ${title}`} color="primary" />
64+
)}
65+
</Box>
66+
) : undefined}
6467
</CardHeader>
6568
{children && (
6669
<CardBody
@@ -83,6 +86,7 @@ export const DashboardCard = ({
8386
};
8487

8588
DashboardCard.propTypes = {
89+
hideCta: PropTypes.bool,
8690
icon: PropTypes.element,
8791
external: PropTypes.bool,
8892
level: PropTypes.number,

‎sandbox/grommet-app/src/pages/FeaturedServices.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const TabContent = ({ data, ...rest }) => (
1313
title={service.name}
1414
subtitle={service.category}
1515
description={service.description || 'hi'}
16-
actions={<LinkNext color="brand" />}
16+
actions={<LinkNext color="primary" />}
1717
level={3}
1818
/>
1919
))}

0 commit comments

Comments
 (0)