@uncinq/design-tokens 0.4.0 → 1.0.0

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.
Files changed (68) hide show
  1. package/README.md +122 -53
  2. package/dist/css/primitive/blur.css +14 -0
  3. package/{tokens → dist/css}/primitive/color.css +53 -96
  4. package/dist/css/primitive/font.css +29 -0
  5. package/dist/css/primitive/shadow.css +16 -0
  6. package/{tokens → dist/css}/primitive/size.css +14 -17
  7. package/{tokens → dist/css}/primitive.css +0 -1
  8. package/{tokens → dist/css}/semantic/blur.css +4 -0
  9. package/dist/css/semantic/border.css +14 -0
  10. package/dist/css/semantic/color.css +99 -0
  11. package/dist/css/semantic/focus.css +13 -0
  12. package/dist/css/semantic/form.css +109 -0
  13. package/dist/css/semantic/grid.css +15 -0
  14. package/dist/css/semantic/icon.css +21 -0
  15. package/dist/css/semantic/motion.css +28 -0
  16. package/dist/css/semantic/opacity.css +15 -0
  17. package/dist/css/semantic/radius.css +20 -0
  18. package/dist/css/semantic/ratio.css +18 -0
  19. package/dist/css/semantic/shadow.css +12 -0
  20. package/dist/css/semantic/size.css +14 -0
  21. package/dist/css/semantic/spacing.css +30 -0
  22. package/dist/css/semantic/typography.css +48 -0
  23. package/dist/css/semantic/z-index.css +18 -0
  24. package/{tokens → dist/css}/semantic.css +0 -2
  25. package/package.json +22 -11
  26. package/tokens/primitive/blur.json +24 -0
  27. package/tokens/primitive/color.json +259 -0
  28. package/tokens/primitive/font.json +93 -0
  29. package/tokens/primitive/shadow.json +113 -0
  30. package/tokens/primitive/size.json +196 -0
  31. package/tokens/semantic/blur.json +8 -0
  32. package/tokens/semantic/border.json +28 -0
  33. package/tokens/semantic/color.json +343 -0
  34. package/tokens/semantic/focus.json +22 -0
  35. package/tokens/semantic/form.json +550 -0
  36. package/tokens/semantic/grid.json +28 -0
  37. package/tokens/semantic/icon.json +52 -0
  38. package/tokens/semantic/motion.json +86 -0
  39. package/tokens/semantic/opacity.json +28 -0
  40. package/tokens/semantic/radius.json +48 -0
  41. package/tokens/semantic/ratio.json +40 -0
  42. package/tokens/semantic/shadow.json +18 -0
  43. package/tokens/semantic/size.json +24 -0
  44. package/tokens/semantic/spacing.json +90 -0
  45. package/tokens/semantic/typography.json +174 -0
  46. package/tokens/semantic/z-index.json +40 -0
  47. package/tokens/primitive/blur.css +0 -10
  48. package/tokens/primitive/font.css +0 -32
  49. package/tokens/primitive/opacity.css +0 -12
  50. package/tokens/primitive/shadow.css +0 -16
  51. package/tokens/semantic/border.css +0 -15
  52. package/tokens/semantic/color.css +0 -119
  53. package/tokens/semantic/dark.css +0 -48
  54. package/tokens/semantic/focus.css +0 -10
  55. package/tokens/semantic/form.css +0 -107
  56. package/tokens/semantic/grid.css +0 -39
  57. package/tokens/semantic/icon.css +0 -19
  58. package/tokens/semantic/motion.css +0 -46
  59. package/tokens/semantic/opacity.css +0 -10
  60. package/tokens/semantic/radius.css +0 -19
  61. package/tokens/semantic/ratio.css +0 -23
  62. package/tokens/semantic/shadow.css +0 -14
  63. package/tokens/semantic/size.css +0 -20
  64. package/tokens/semantic/spacing.css +0 -42
  65. package/tokens/semantic/typography.css +0 -78
  66. package/tokens/semantic/z-index.css +0 -14
  67. /package/{tokens → dist/css}/index.css +0 -0
  68. /package/{tokens → dist/css}/semantic/mediaqueries.css +0 -0
package/tokens/semantic/blur.json ADDED
@@ -0,0 +1,8 @@
1
+ {
2
+ "blur": {
3
+ "backdrop": {
4
+ "$value": "{blur.sm}",
5
+ "$type": "dimension"
6
+ }
7
+ }
8
+ }
package/tokens/semantic/border.json ADDED
@@ -0,0 +1,28 @@
1
+ {
2
+ "border": {
3
+ "style": {
4
+ "normal": {
5
+ "$value": "solid",
6
+ "$type": "string"
7
+ }
8
+ },
9
+ "width": {
10
+ "none": {
11
+ "$value": "0px",
12
+ "$type": "dimension"
13
+ },
14
+ "sm": {
15
+ "$value": "1px",
16
+ "$type": "dimension"
17
+ },
18
+ "md": {
19
+ "$value": "2px",
20
+ "$type": "dimension"
21
+ },
22
+ "lg": {
23
+ "$value": "4px",
24
+ "$type": "dimension"
25
+ }
26
+ }
27
+ }
28
+ }
package/tokens/semantic/color.json ADDED
@@ -0,0 +1,343 @@
1
+ {
2
+ "color": {
3
+ "accent": {
4
+ "default": {
5
+ "$value": "{color.sienna.600}",
6
+ "$type": "color"
7
+ },
8
+ "hover": {
9
+ "$value": "{color.sienna.700}",
10
+ "$type": "color"
11
+ },
12
+ "muted": {
13
+ "$value": "{color.sienna.100}",
14
+ "$type": "color"
15
+ },
16
+ "strong": {
17
+ "$value": "{color.sienna.900}",
18
+ "$type": "color"
19
+ }
20
+ },
21
+ "active": {
22
+ "$value": "{color.accent.default}",
23
+ "$type": "color"
24
+ },
25
+ "backdrop": {
26
+ "$value": "oklch(from {color.black} l c h / {opacity.backdrop})",
27
+ "$type": "color"
28
+ },
29
+ "background": {
30
+ "default": {
31
+ "$value": "{color.white}",
32
+ "$type": "color",
33
+ "$mods": { "dark": "{color.gray.950}" }
34
+ },
35
+ "accent": {
36
+ "$value": "{color.accent.default}",
37
+ "$type": "color"
38
+ },
39
+ "disabled": {
40
+ "$value": "{color.gray.100}",
41
+ "$type": "color"
42
+ },
43
+ "media": {
44
+ "$value": "{color.gray.200}",
45
+ "$type": "color",
46
+ "$mods": { "dark": "{color.gray.800}" }
47
+ },
48
+ "muted": {
49
+ "default": {
50
+ "$value": "{color.gray.100}",
51
+ "$type": "color",
52
+ "$mods": { "dark": "{color.gray.900}" }
53
+ },
54
+ "hover": {
55
+ "$value": "{color.gray.200}",
56
+ "$type": "color",
57
+ "$mods": { "dark": "{color.gray.800}" }
58
+ }
59
+ },
60
+ "surface": {
61
+ "$value": "{color.background.default}",
62
+ "$type": "color"
63
+ }
64
+ },
65
+ "border": {
66
+ "default": {
67
+ "$value": "{color.gray.200}",
68
+ "$type": "color",
69
+ "$mods": { "dark": "{color.gray.800}" }
70
+ },
71
+ "hover": {
72
+ "$value": "{color.gray.500}",
73
+ "$type": "color"
74
+ }
75
+ },
76
+ "brand": {
77
+ "default": {
78
+ "$value": "{color.sienna.600}",
79
+ "$type": "color"
80
+ },
81
+ "hover": {
82
+ "$value": "{color.sienna.700}",
83
+ "$type": "color"
84
+ },
85
+ "muted": {
86
+ "$value": "{color.sienna.100}",
87
+ "$type": "color"
88
+ },
89
+ "strong": {
90
+ "$value": "{color.sienna.900}",
91
+ "$type": "color"
92
+ }
93
+ },
94
+ "credit": {
95
+ "$value": "{color.text.muted}",
96
+ "$type": "color"
97
+ },
98
+ "danger": {
99
+ "default": {
100
+ "$value": "{color.red.600}",
101
+ "$type": "color"
102
+ },
103
+ "hover": {
104
+ "$value": "{color.red.700}",
105
+ "$type": "color"
106
+ },
107
+ "muted": {
108
+ "$value": "{color.red.100}",
109
+ "$type": "color"
110
+ },
111
+ "strong": {
112
+ "$value": "{color.red.800}",
113
+ "$type": "color"
114
+ }
115
+ },
116
+ "dark": {
117
+ "default": {
118
+ "$value": "{color.gray.900}",
119
+ "$type": "color"
120
+ },
121
+ "hover": {
122
+ "$value": "{color.black}",
123
+ "$type": "color"
124
+ },
125
+ "muted": {
126
+ "$value": "{color.gray.100}",
127
+ "$type": "color"
128
+ },
129
+ "strong": {
130
+ "$value": "{color.black}",
131
+ "$type": "color"
132
+ }
133
+ },
134
+ "focus": {
135
+ "$value": "{color.text.default}",
136
+ "$type": "color"
137
+ },
138
+ "heading": {
139
+ "$value": "{color.black}",
140
+ "$type": "color",
141
+ "$mods": { "dark": "{color.white}" }
142
+ },
143
+ "info": {
144
+ "default": {
145
+ "$value": "{color.blue.600}",
146
+ "$type": "color"
147
+ },
148
+ "hover": {
149
+ "$value": "{color.blue.700}",
150
+ "$type": "color"
151
+ },
152
+ "muted": {
153
+ "$value": "{color.blue.100}",
154
+ "$type": "color"
155
+ },
156
+ "strong": {
157
+ "$value": "{color.blue.800}",
158
+ "$type": "color"
159
+ }
160
+ },
161
+ "light": {
162
+ "default": {
163
+ "$value": "{color.gray.200}",
164
+ "$type": "color"
165
+ },
166
+ "hover": {
167
+ "$value": "{color.gray.300}",
168
+ "$type": "color"
169
+ },
170
+ "muted": {
171
+ "$value": "{color.gray.100}",
172
+ "$type": "color"
173
+ },
174
+ "strong": {
175
+ "$value": "{color.gray.700}",
176
+ "$type": "color"
177
+ }
178
+ },
179
+ "link": {
180
+ "default": {
181
+ "$value": "{color.text.default}",
182
+ "$type": "color"
183
+ },
184
+ "active": {
185
+ "$value": "{color.active}",
186
+ "$type": "color"
187
+ },
188
+ "hover": {
189
+ "$value": "{color.accent.default}",
190
+ "$type": "color"
191
+ }
192
+ },
193
+ "primary": {
194
+ "default": {
195
+ "$value": "{color.brand.default}",
196
+ "$type": "color"
197
+ },
198
+ "hover": {
199
+ "$value": "{color.brand.hover}",
200
+ "$type": "color"
201
+ },
202
+ "muted": {
203
+ "$value": "{color.brand.muted}",
204
+ "$type": "color"
205
+ },
206
+ "strong": {
207
+ "$value": "{color.brand.strong}",
208
+ "$type": "color"
209
+ }
210
+ },
211
+ "secondary": {
212
+ "default": {
213
+ "$value": "{color.gray.600}",
214
+ "$type": "color"
215
+ },
216
+ "hover": {
217
+ "$value": "{color.gray.700}",
218
+ "$type": "color"
219
+ },
220
+ "muted": {
221
+ "$value": "{color.gray.100}",
222
+ "$type": "color"
223
+ },
224
+ "strong": {
225
+ "$value": "{color.gray.800}",
226
+ "$type": "color"
227
+ }
228
+ },
229
+ "shadow": {
230
+ "default": {
231
+ "$value": "{color.black}",
232
+ "$type": "color",
233
+ "$mods": { "dark": "{color.white}" }
234
+ },
235
+ "normal": {
236
+ "$value": "oklch(from {color.shadow.default} l c h / {opacity.shadow})",
237
+ "$type": "color"
238
+ }
239
+ },
240
+ "success": {
241
+ "default": {
242
+ "$value": "{color.green.600}",
243
+ "$type": "color"
244
+ },
245
+ "hover": {
246
+ "$value": "{color.green.700}",
247
+ "$type": "color"
248
+ },
249
+ "muted": {
250
+ "$value": "{color.green.100}",
251
+ "$type": "color"
252
+ },
253
+ "strong": {
254
+ "$value": "{color.green.800}",
255
+ "$type": "color"
256
+ }
257
+ },
258
+ "text": {
259
+ "default": {
260
+ "$value": "{color.gray.900}",
261
+ "$type": "color",
262
+ "$mods": { "dark": "{color.gray.200}" }
263
+ },
264
+ "disabled": {
265
+ "$value": "{color.gray.300}",
266
+ "$type": "color",
267
+ "$mods": { "dark": "{color.gray.600}" }
268
+ },
269
+ "hover": {
270
+ "$value": "{color.gray.700}",
271
+ "$type": "color",
272
+ "$mods": { "dark": "{color.gray.300}" }
273
+ },
274
+ "muted": {
275
+ "$value": "{color.gray.500}",
276
+ "$type": "color",
277
+ "$mods": { "dark": "{color.gray.400}" }
278
+ },
279
+ "onAccent": {
280
+ "$value": "{color.white}",
281
+ "$type": "color"
282
+ },
283
+ "onBrand": {
284
+ "$value": "{color.white}",
285
+ "$type": "color"
286
+ },
287
+ "onDanger": {
288
+ "$value": "{color.white}",
289
+ "$type": "color"
290
+ },
291
+ "onDark": {
292
+ "$value": "{color.white}",
293
+ "$type": "color"
294
+ },
295
+ "onInfo": {
296
+ "$value": "{color.white}",
297
+ "$type": "color"
298
+ },
299
+ "onLight": {
300
+ "$value": "{color.gray.900}",
301
+ "$type": "color"
302
+ },
303
+ "onPrimary": {
304
+ "$value": "{color.white}",
305
+ "$type": "color"
306
+ },
307
+ "onSecondary": {
308
+ "$value": "{color.white}",
309
+ "$type": "color"
310
+ },
311
+ "onSuccess": {
312
+ "$value": "{color.white}",
313
+ "$type": "color"
314
+ },
315
+ "onSurface": {
316
+ "$value": "{color.text.default}",
317
+ "$type": "color"
318
+ },
319
+ "onWarning": {
320
+ "$value": "{color.gray.900}",
321
+ "$type": "color"
322
+ }
323
+ },
324
+ "warning": {
325
+ "default": {
326
+ "$value": "{color.amber.500}",
327
+ "$type": "color"
328
+ },
329
+ "hover": {
330
+ "$value": "{color.amber.600}",
331
+ "$type": "color"
332
+ },
333
+ "muted": {
334
+ "$value": "{color.amber.100}",
335
+ "$type": "color"
336
+ },
337
+ "strong": {
338
+ "$value": "{color.amber.700}",
339
+ "$type": "color"
340
+ }
341
+ }
342
+ }
343
+ }
package/tokens/semantic/focus.json ADDED
@@ -0,0 +1,22 @@
1
+ {
2
+ "focus": {
3
+ "color": {
4
+ "$value": "{color.focus}",
5
+ "$type": "color"
6
+ },
7
+ "outline": {
8
+ "offset": {
9
+ "$value": "2px",
10
+ "$type": "dimension"
11
+ },
12
+ "style": {
13
+ "$value": "solid",
14
+ "$type": "string"
15
+ },
16
+ "width": {
17
+ "$value": "1px",
18
+ "$type": "dimension"
19
+ }
20
+ }
21
+ }
22
+ }