@chai-ui/tokens 0.1.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -0
- package/dist/css/tokens.css +12 -0
- package/dist/figma/tokens.figma.json +51 -1
- package/dist/js/index.js +32 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<a href="https://chai-ui.com"><img src="https://chai-ui.com/chai-wordmark.svg" alt="Chai UI" width="220" /></a>
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
<p align="center">
|
|
6
|
+
<a href="https://www.npmjs.com/package/@chai-ui/tokens"><img src="https://img.shields.io/npm/v/@chai-ui/tokens?label=npm&color=009747" alt="npm version" /></a>
|
|
7
|
+
<a href="https://github.com/kazarazat/chai-ui/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-009747" alt="MIT license" /></a>
|
|
8
|
+
<a href="https://github.com/kazarazat/chai-ui/actions/workflows/ci.yml"><img src="https://github.com/kazarazat/chai-ui/actions/workflows/ci.yml/badge.svg" alt="CI" /></a>
|
|
9
|
+
<a href="https://codecov.io/gh/kazarazat/chai-ui"><img src="https://codecov.io/gh/kazarazat/chai-ui/graph/badge.svg" alt="Coverage" /></a>
|
|
10
|
+
<a href="https://chai-ui.com/docs/"><img src="https://img.shields.io/badge/docs-chai--ui.com-009747" alt="Docs" /></a>
|
|
11
|
+
</p>
|
|
12
|
+
|
|
1
13
|
# @chai-ui/tokens
|
|
2
14
|
|
|
3
15
|
The single source of truth for color, space, radius, type, and motion values
|
package/dist/css/tokens.css
CHANGED
|
@@ -23,6 +23,11 @@
|
|
|
23
23
|
--chai-color-root-red-40: #a13c33;
|
|
24
24
|
--chai-color-root-red-50: #c14e42;
|
|
25
25
|
--chai-color-root-red-80: #f0c2bc;
|
|
26
|
+
--chai-color-root-cyan-40: #007c89;
|
|
27
|
+
--chai-color-root-magenta-40: #a21caf;
|
|
28
|
+
--chai-color-root-orange-40: #b45309;
|
|
29
|
+
--chai-color-root-blue-40: #1565c0;
|
|
30
|
+
--chai-color-root-violet-40: #6d28d9;
|
|
26
31
|
--chai-color-semantic-text-on-accent: #ffffff;
|
|
27
32
|
--chai-color-semantic-accent: #009747;
|
|
28
33
|
--chai-color-semantic-accent-hover: #006d32;
|
|
@@ -46,8 +51,15 @@
|
|
|
46
51
|
--chai-color-semantic-control-text-muted: #666666;
|
|
47
52
|
--chai-color-semantic-overlay: rgba(0, 0, 0, 0.5);
|
|
48
53
|
--chai-color-semantic-on-overlay: #ffffff;
|
|
54
|
+
--chai-color-semantic-overlay-light: rgba(255, 255, 255, 0.5);
|
|
49
55
|
--chai-color-semantic-scrim: rgba(0, 0, 0, 0.6);
|
|
50
56
|
--chai-color-semantic-media-backdrop: #000000;
|
|
57
|
+
--chai-color-semantic-region-1: #007c89;
|
|
58
|
+
--chai-color-semantic-region-2: #a21caf;
|
|
59
|
+
--chai-color-semantic-region-3: #b45309;
|
|
60
|
+
--chai-color-semantic-region-4: #1565c0;
|
|
61
|
+
--chai-color-semantic-region-5: #6d28d9;
|
|
62
|
+
--chai-color-semantic-region-6: #a13c33;
|
|
51
63
|
--chai-space-0: 0px;
|
|
52
64
|
--chai-space-1: 4px;
|
|
53
65
|
--chai-space-2: 8px;
|
|
@@ -94,6 +94,26 @@
|
|
|
94
94
|
"red-80": {
|
|
95
95
|
"value": "#f0c2bc",
|
|
96
96
|
"type": "color"
|
|
97
|
+
},
|
|
98
|
+
"cyan-40": {
|
|
99
|
+
"value": "#007c89",
|
|
100
|
+
"type": "color"
|
|
101
|
+
},
|
|
102
|
+
"magenta-40": {
|
|
103
|
+
"value": "#a21caf",
|
|
104
|
+
"type": "color"
|
|
105
|
+
},
|
|
106
|
+
"orange-40": {
|
|
107
|
+
"value": "#b45309",
|
|
108
|
+
"type": "color"
|
|
109
|
+
},
|
|
110
|
+
"blue-40": {
|
|
111
|
+
"value": "#1565c0",
|
|
112
|
+
"type": "color"
|
|
113
|
+
},
|
|
114
|
+
"violet-40": {
|
|
115
|
+
"value": "#6d28d9",
|
|
116
|
+
"type": "color"
|
|
97
117
|
}
|
|
98
118
|
},
|
|
99
119
|
"semantic": {
|
|
@@ -153,7 +173,7 @@
|
|
|
153
173
|
"control-surface-raised": {
|
|
154
174
|
"value": "#ffffff",
|
|
155
175
|
"type": "color",
|
|
156
|
-
"description": "Menus, the result card
|
|
176
|
+
"description": "Menus, the result card info side, and the hover fill of controls floating on media"
|
|
157
177
|
},
|
|
158
178
|
"control-track": {
|
|
159
179
|
"value": "#e0e0e0",
|
|
@@ -204,6 +224,11 @@
|
|
|
204
224
|
"type": "color",
|
|
205
225
|
"description": "Icons on overlay buttons"
|
|
206
226
|
},
|
|
227
|
+
"overlay-light": {
|
|
228
|
+
"value": "rgba(255, 255, 255, 0.5)",
|
|
229
|
+
"type": "color",
|
|
230
|
+
"description": "Light buttons sitting on top of media, with dark text: the edit card's region chips"
|
|
231
|
+
},
|
|
207
232
|
"scrim": {
|
|
208
233
|
"value": "rgba(0, 0, 0, 0.6)",
|
|
209
234
|
"type": "color",
|
|
@@ -213,6 +238,31 @@
|
|
|
213
238
|
"value": "#000000",
|
|
214
239
|
"type": "color",
|
|
215
240
|
"description": "Letterboxing behind video"
|
|
241
|
+
},
|
|
242
|
+
"region-1": {
|
|
243
|
+
"value": "#007c89",
|
|
244
|
+
"type": "color",
|
|
245
|
+
"description": "Region colors, in order: the box, badge and Composer chip of each marked area in an image edit. White text on each is at least 4.7:1."
|
|
246
|
+
},
|
|
247
|
+
"region-2": {
|
|
248
|
+
"value": "#a21caf",
|
|
249
|
+
"type": "color"
|
|
250
|
+
},
|
|
251
|
+
"region-3": {
|
|
252
|
+
"value": "#b45309",
|
|
253
|
+
"type": "color"
|
|
254
|
+
},
|
|
255
|
+
"region-4": {
|
|
256
|
+
"value": "#1565c0",
|
|
257
|
+
"type": "color"
|
|
258
|
+
},
|
|
259
|
+
"region-5": {
|
|
260
|
+
"value": "#6d28d9",
|
|
261
|
+
"type": "color"
|
|
262
|
+
},
|
|
263
|
+
"region-6": {
|
|
264
|
+
"value": "#a13c33",
|
|
265
|
+
"type": "color"
|
|
216
266
|
}
|
|
217
267
|
},
|
|
218
268
|
"material": {
|
package/dist/js/index.js
CHANGED
|
@@ -24,7 +24,12 @@ export const tokens = {
|
|
|
24
24
|
"amber-80": "#f0d3a4",
|
|
25
25
|
"red-40": "#a13c33",
|
|
26
26
|
"red-50": "#c14e42",
|
|
27
|
-
"red-80": "#f0c2bc"
|
|
27
|
+
"red-80": "#f0c2bc",
|
|
28
|
+
"cyan-40": "#007c89",
|
|
29
|
+
"magenta-40": "#a21caf",
|
|
30
|
+
"orange-40": "#b45309",
|
|
31
|
+
"blue-40": "#1565c0",
|
|
32
|
+
"violet-40": "#6d28d9"
|
|
28
33
|
},
|
|
29
34
|
"semantic": {
|
|
30
35
|
"text-on-accent": "#ffffff",
|
|
@@ -50,8 +55,15 @@ export const tokens = {
|
|
|
50
55
|
"control-text-muted": "#666666",
|
|
51
56
|
"overlay": "rgba(0, 0, 0, 0.5)",
|
|
52
57
|
"on-overlay": "#ffffff",
|
|
58
|
+
"overlay-light": "rgba(255, 255, 255, 0.5)",
|
|
53
59
|
"scrim": "rgba(0, 0, 0, 0.6)",
|
|
54
|
-
"media-backdrop": "#000000"
|
|
60
|
+
"media-backdrop": "#000000",
|
|
61
|
+
"region-1": "#007c89",
|
|
62
|
+
"region-2": "#a21caf",
|
|
63
|
+
"region-3": "#b45309",
|
|
64
|
+
"region-4": "#1565c0",
|
|
65
|
+
"region-5": "#6d28d9",
|
|
66
|
+
"region-6": "#a13c33"
|
|
55
67
|
},
|
|
56
68
|
"material": {
|
|
57
69
|
"primary": "#009747",
|
|
@@ -184,6 +196,11 @@ export const flatTokens = {
|
|
|
184
196
|
"color.root.red-40": "#a13c33",
|
|
185
197
|
"color.root.red-50": "#c14e42",
|
|
186
198
|
"color.root.red-80": "#f0c2bc",
|
|
199
|
+
"color.root.cyan-40": "#007c89",
|
|
200
|
+
"color.root.magenta-40": "#a21caf",
|
|
201
|
+
"color.root.orange-40": "#b45309",
|
|
202
|
+
"color.root.blue-40": "#1565c0",
|
|
203
|
+
"color.root.violet-40": "#6d28d9",
|
|
187
204
|
"color.semantic.text-on-accent": "#ffffff",
|
|
188
205
|
"color.semantic.accent": "#009747",
|
|
189
206
|
"color.semantic.accent-hover": "#006d32",
|
|
@@ -207,8 +224,15 @@ export const flatTokens = {
|
|
|
207
224
|
"color.semantic.control-text-muted": "#666666",
|
|
208
225
|
"color.semantic.overlay": "rgba(0, 0, 0, 0.5)",
|
|
209
226
|
"color.semantic.on-overlay": "#ffffff",
|
|
227
|
+
"color.semantic.overlay-light": "rgba(255, 255, 255, 0.5)",
|
|
210
228
|
"color.semantic.scrim": "rgba(0, 0, 0, 0.6)",
|
|
211
229
|
"color.semantic.media-backdrop": "#000000",
|
|
230
|
+
"color.semantic.region-1": "#007c89",
|
|
231
|
+
"color.semantic.region-2": "#a21caf",
|
|
232
|
+
"color.semantic.region-3": "#b45309",
|
|
233
|
+
"color.semantic.region-4": "#1565c0",
|
|
234
|
+
"color.semantic.region-5": "#6d28d9",
|
|
235
|
+
"color.semantic.region-6": "#a13c33",
|
|
212
236
|
"color.material.primary": "#009747",
|
|
213
237
|
"color.material.on-primary": "#ffffff",
|
|
214
238
|
"color.material.primary-container": "#96f6c5",
|
|
@@ -311,6 +335,12 @@ export const tokenRefs = {
|
|
|
311
335
|
"color.semantic.control-text-muted": "color.root.gray-40",
|
|
312
336
|
"color.semantic.on-overlay": "color.root.gray-100",
|
|
313
337
|
"color.semantic.media-backdrop": "color.root.gray-0",
|
|
338
|
+
"color.semantic.region-1": "color.root.cyan-40",
|
|
339
|
+
"color.semantic.region-2": "color.root.magenta-40",
|
|
340
|
+
"color.semantic.region-3": "color.root.orange-40",
|
|
341
|
+
"color.semantic.region-4": "color.root.blue-40",
|
|
342
|
+
"color.semantic.region-5": "color.root.violet-40",
|
|
343
|
+
"color.semantic.region-6": "color.root.red-40",
|
|
314
344
|
"color.material.primary": "color.semantic.accent",
|
|
315
345
|
"color.material.on-primary": "color.semantic.control-surface-raised",
|
|
316
346
|
"color.material.primary-container": "color.semantic.accent-soft",
|
package/package.json
CHANGED