@bcc-code/design-tokens 3.0.12 → 3.0.16

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.
@@ -0,0 +1,345 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+
6
+ export default {
7
+ "anchor": {
8
+ "gutter": "{space.25}"
9
+ },
10
+ "app": {
11
+ "font": {
12
+ "size": "14px"
13
+ },
14
+ "card": {
15
+ "background": "{content.background}"
16
+ },
17
+ "sm": {
18
+ "font": {
19
+ "size": "0.875rem"
20
+ },
21
+ "line": {
22
+ "height": "1.25rem"
23
+ }
24
+ },
25
+ "lg": {
26
+ "font": {
27
+ "size": "1.125rem"
28
+ },
29
+ "line": {
30
+ "height": "1.75rem"
31
+ }
32
+ }
33
+ },
34
+ "content": {
35
+ "border": {
36
+ "radius": "{border.radius.md}",
37
+ "color": "{surface.700}"
38
+ },
39
+ "background": "{surface.900}",
40
+ "hover": {
41
+ "background": "{surface.800}",
42
+ "color": "{text.hover.color}"
43
+ },
44
+ "color": "{text.color}"
45
+ },
46
+ "disabled": {
47
+ "opacity": "0.6"
48
+ },
49
+ "focus": {
50
+ "ring": {
51
+ "width": "{border-width.1}",
52
+ "color": "{surface.700}",
53
+ "offset": "{border-width.2}",
54
+ "shadow": "0 0 0 0 rgba(0, 0, 0, 0)",
55
+ "stroke": "3px solid #454f59",
56
+ "style": "solid"
57
+ }
58
+ },
59
+ "form": {
60
+ "field": {
61
+ "padding": {
62
+ "x": "{space.150}",
63
+ "y": "{space.50}"
64
+ },
65
+ "border": {
66
+ "radius": "{border.radius.md}",
67
+ "color": "{surface.600}"
68
+ },
69
+ "focus": {
70
+ "ring": {
71
+ "width": "{border-width.0}",
72
+ "style": "none",
73
+ "color": "{color.transparent}",
74
+ "offset": "{border-width.0}",
75
+ "shadow": "0 0 0 0 rgba(0, 0, 0, 0)"
76
+ },
77
+ "border": {
78
+ "color": "{slate.300}"
79
+ }
80
+ },
81
+ "sm": {
82
+ "font": {
83
+ "size": "{font-size.sm}"
84
+ },
85
+ "padding": {
86
+ "x": "{space.150}",
87
+ "y": "{space.50}"
88
+ }
89
+ },
90
+ "lg": {
91
+ "font": {
92
+ "size": "{font-size.md}"
93
+ },
94
+ "padding": {
95
+ "x": "{space.150}",
96
+ "y": "{space.100}"
97
+ }
98
+ },
99
+ "transition": {
100
+ "duration": "{transition.duration}"
101
+ },
102
+ "background": "{surface.950}",
103
+ "disabled": {
104
+ "background": "{surface.700}",
105
+ "color": "{surface.400}"
106
+ },
107
+ "filled": {
108
+ "background": "{surface.800}",
109
+ "focus": {
110
+ "background": "{surface.800}"
111
+ },
112
+ "hover": {
113
+ "background": "{surface.800}"
114
+ }
115
+ },
116
+ "hover": {
117
+ "border": {
118
+ "color": "{surface.500}"
119
+ }
120
+ },
121
+ "invalid": {
122
+ "border": {
123
+ "color": "{red.300}"
124
+ },
125
+ "placeholder": {
126
+ "color": "{red.400}"
127
+ }
128
+ },
129
+ "placeholder": {
130
+ "color": "{surface.400}"
131
+ },
132
+ "float": {
133
+ "label": {
134
+ "color": "{surface.400}",
135
+ "focus": {
136
+ "color": "{surface.400}"
137
+ },
138
+ "invalid": {
139
+ "color": "{form.field.invalid.placeholder.color}"
140
+ },
141
+ "active": {
142
+ "color": "{surface.400}"
143
+ }
144
+ }
145
+ },
146
+ "icon": {
147
+ "color": "{surface.400}"
148
+ },
149
+ "shadow": "0 1px 2px 0 rgba(18, 18, 23, 0.05)",
150
+ "color": "{surface.0}"
151
+ }
152
+ },
153
+ "highlight": {
154
+ "background": "{primary.400}",
155
+ "focus": {
156
+ "background": "{primary.400}",
157
+ "color": "rgba(255, 255, 255, 0.87)"
158
+ },
159
+ "color": "rgba(255, 255, 255, 0.87)"
160
+ },
161
+ "icon": {
162
+ "size": "{space.200}"
163
+ },
164
+ "list": {
165
+ "padding": "{space.100}",
166
+ "gap": "{space.25}",
167
+ "header": {
168
+ "padding": "{space.100}"
169
+ },
170
+ "option": {
171
+ "padding": "{space.150} {space.100}",
172
+ "border": {
173
+ "radius": "{border.radius.sm}"
174
+ },
175
+ "group": {
176
+ "padding": "{space.100} {space.150}",
177
+ "font": {
178
+ "weight": "{font-weight.medium}"
179
+ },
180
+ "background": "rgba(0, 0, 0, 0)",
181
+ "color": "{text.muted.color}"
182
+ },
183
+ "focus": {
184
+ "background": "{surface.800}",
185
+ "color": "{text.hover.color}"
186
+ },
187
+ "selected": {
188
+ "background": "{highlight.background}",
189
+ "focus": {
190
+ "background": "{highlight.focus.background}",
191
+ "color": "{highlight.focus.color}"
192
+ },
193
+ "color": "{highlight.color}"
194
+ },
195
+ "color": "{text.color}",
196
+ "icon": {
197
+ "color": "{surface.500}",
198
+ "focus": {
199
+ "color": "{surface.400}"
200
+ }
201
+ }
202
+ }
203
+ },
204
+ "mask": {
205
+ "background": "rgba(0, 0, 0, 0.6)",
206
+ "color": "{surface.200}"
207
+ },
208
+ "navigation": {
209
+ "list": {
210
+ "padding": "{space.50} {space.50}",
211
+ "gap": "{space.25}"
212
+ },
213
+ "item": {
214
+ "padding": "{space.100} {space.150}",
215
+ "border": {
216
+ "radius": "{border.radius.sm}"
217
+ },
218
+ "gap": "{space.100}",
219
+ "focus": {
220
+ "background": "{surface.800}",
221
+ "color": "{text.hover.color}"
222
+ },
223
+ "active": {
224
+ "background": "{surface.800}",
225
+ "color": "{text.hover.color}"
226
+ },
227
+ "color": "{text.color}",
228
+ "icon": {
229
+ "color": "{surface.500}",
230
+ "focus": {
231
+ "color": "{surface.400}"
232
+ },
233
+ "active": {
234
+ "color": "{surface.400}"
235
+ }
236
+ }
237
+ },
238
+ "submenu": {
239
+ "label": {
240
+ "padding": "{space.100} {space.150}",
241
+ "font": {
242
+ "weight": "{font-weight.medium}"
243
+ },
244
+ "background": "rgba(0, 0, 0, 0)",
245
+ "color": "{text.muted.color}"
246
+ },
247
+ "icon": {
248
+ "size": "{space.150}",
249
+ "color": "{surface.500}",
250
+ "focus": {
251
+ "color": "{surface.400}"
252
+ },
253
+ "active": {
254
+ "color": "{surface.400}"
255
+ }
256
+ }
257
+ }
258
+ },
259
+ "overlay": {
260
+ "select": {
261
+ "border": {
262
+ "radius": "{border.radius.md}",
263
+ "color": "{surface.700}"
264
+ },
265
+ "shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
266
+ "background": "{surface.900}",
267
+ "color": "{text.color}"
268
+ },
269
+ "popover": {
270
+ "border": {
271
+ "radius": "{border.radius.md}",
272
+ "color": "{surface.700}"
273
+ },
274
+ "padding": "{space.200} {space.150}",
275
+ "shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
276
+ "background": "{surface.900}",
277
+ "color": "{text.color}"
278
+ },
279
+ "modal": {
280
+ "border": {
281
+ "radius": "{border.radius.xl}",
282
+ "color": "{surface.700}"
283
+ },
284
+ "padding": "{space.200}",
285
+ "shadow": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
286
+ "background": "{surface.900}",
287
+ "color": "{text.color}"
288
+ },
289
+ "navigation": {
290
+ "shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)"
291
+ }
292
+ },
293
+ "primary": {
294
+ "50": "{emerald.50}",
295
+ "100": "{emerald.100}",
296
+ "200": "{emerald.200}",
297
+ "300": "{emerald.300}",
298
+ "400": "{emerald.400}",
299
+ "500": "{emerald.500}",
300
+ "600": "{emerald.600}",
301
+ "700": "{emerald.700}",
302
+ "800": "{emerald.800}",
303
+ "900": "{emerald.900}",
304
+ "950": "{emerald.950}",
305
+ "color": "{primary.400}",
306
+ "contrast": {
307
+ "color": "{surface.900}"
308
+ },
309
+ "hover": {
310
+ "color": "{primary.300}"
311
+ },
312
+ "active": {
313
+ "color": "{primary.200}"
314
+ }
315
+ },
316
+ "surface": {
317
+ "0": "#ffffff",
318
+ "50": "{zinc.50}",
319
+ "100": "{zinc.100}",
320
+ "200": "{zinc.200}",
321
+ "300": "{zinc.300}",
322
+ "400": "{zinc.400}",
323
+ "500": "{zinc.500}",
324
+ "600": "{zinc.600}",
325
+ "700": "{zinc.700}",
326
+ "800": "{zinc.800}",
327
+ "900": "{zinc.900}",
328
+ "950": "{zinc.950}"
329
+ },
330
+ "text": {
331
+ "color": "{surface.0}",
332
+ "hover": {
333
+ "color": "{surface.0}",
334
+ "muted": {
335
+ "color": "{surface.300}"
336
+ }
337
+ },
338
+ "muted": {
339
+ "color": "{surface.400}"
340
+ }
341
+ },
342
+ "transition": {
343
+ "duration": "0.2s"
344
+ }
345
+ };
@@ -0,0 +1,345 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+
6
+ export default {
7
+ "anchor": {
8
+ "gutter": "{space.25}"
9
+ },
10
+ "app": {
11
+ "font": {
12
+ "size": "14px"
13
+ },
14
+ "card": {
15
+ "background": "{content.background}"
16
+ },
17
+ "sm": {
18
+ "font": {
19
+ "size": "0.875rem"
20
+ },
21
+ "line": {
22
+ "height": "1.25rem"
23
+ }
24
+ },
25
+ "lg": {
26
+ "font": {
27
+ "size": "1.125rem"
28
+ },
29
+ "line": {
30
+ "height": "1.75rem"
31
+ }
32
+ }
33
+ },
34
+ "content": {
35
+ "border": {
36
+ "radius": "{border.radius.md}",
37
+ "color": "{surface.200}"
38
+ },
39
+ "background": "{surface.0}",
40
+ "hover": {
41
+ "background": "{surface.100}",
42
+ "color": "{text.hover.color}"
43
+ },
44
+ "color": "{text.color}"
45
+ },
46
+ "disabled": {
47
+ "opacity": "0.6"
48
+ },
49
+ "focus": {
50
+ "ring": {
51
+ "width": "{border-width.1}",
52
+ "color": "{surface.700}",
53
+ "offset": "{border-width.2}",
54
+ "shadow": "0 0 0 0 rgba(0, 0, 0, 0)",
55
+ "stroke": "3px solid #44546f",
56
+ "style": "solid"
57
+ }
58
+ },
59
+ "form": {
60
+ "field": {
61
+ "padding": {
62
+ "x": "{space.150}",
63
+ "y": "{space.50}"
64
+ },
65
+ "border": {
66
+ "radius": "{border.radius.md}",
67
+ "color": "{surface.300}"
68
+ },
69
+ "focus": {
70
+ "ring": {
71
+ "width": "{border-width.0}",
72
+ "style": "none",
73
+ "color": "{color.transparent}",
74
+ "offset": "{border-width.0}",
75
+ "shadow": "0 0 0 0 rgba(0, 0, 0, 0)"
76
+ },
77
+ "border": {
78
+ "color": "{slate.700}"
79
+ }
80
+ },
81
+ "sm": {
82
+ "font": {
83
+ "size": "{font-size.sm}"
84
+ },
85
+ "padding": {
86
+ "x": "{space.150}",
87
+ "y": "{space.50}"
88
+ }
89
+ },
90
+ "lg": {
91
+ "font": {
92
+ "size": "{font-size.md}"
93
+ },
94
+ "padding": {
95
+ "x": "{space.150}",
96
+ "y": "{space.100}"
97
+ }
98
+ },
99
+ "transition": {
100
+ "duration": "{transition.duration}"
101
+ },
102
+ "background": "{surface.0}",
103
+ "disabled": {
104
+ "background": "{surface.200}",
105
+ "color": "{surface.500}"
106
+ },
107
+ "filled": {
108
+ "background": "{surface.50}",
109
+ "focus": {
110
+ "background": "{surface.50}"
111
+ },
112
+ "hover": {
113
+ "background": "{surface.50}"
114
+ }
115
+ },
116
+ "hover": {
117
+ "border": {
118
+ "color": "{surface.400}"
119
+ }
120
+ },
121
+ "invalid": {
122
+ "border": {
123
+ "color": "{red.400}"
124
+ },
125
+ "placeholder": {
126
+ "color": "{red.600}"
127
+ }
128
+ },
129
+ "placeholder": {
130
+ "color": "{surface.500}"
131
+ },
132
+ "float": {
133
+ "label": {
134
+ "color": "{surface.500}",
135
+ "focus": {
136
+ "color": "{surface.500}"
137
+ },
138
+ "invalid": {
139
+ "color": "{form.field.invalid.placeholder.color}"
140
+ },
141
+ "active": {
142
+ "color": "{surface.500}"
143
+ }
144
+ }
145
+ },
146
+ "icon": {
147
+ "color": "{surface.400}"
148
+ },
149
+ "shadow": "0 1px 2px 0 rgba(18, 18, 23, 0.05)",
150
+ "color": "{surface.700}"
151
+ }
152
+ },
153
+ "highlight": {
154
+ "background": "{primary.50}",
155
+ "focus": {
156
+ "background": "{primary.100}",
157
+ "color": "{primary.800}"
158
+ },
159
+ "color": "{primary.700}"
160
+ },
161
+ "icon": {
162
+ "size": "{space.200}"
163
+ },
164
+ "list": {
165
+ "padding": "{space.100}",
166
+ "gap": "{space.25}",
167
+ "header": {
168
+ "padding": "{space.100}"
169
+ },
170
+ "option": {
171
+ "padding": "{space.150} {space.100}",
172
+ "border": {
173
+ "radius": "{border.radius.sm}"
174
+ },
175
+ "group": {
176
+ "padding": "{space.100} {space.150}",
177
+ "font": {
178
+ "weight": "{font-weight.medium}"
179
+ },
180
+ "background": "rgba(0, 0, 0, 0)",
181
+ "color": "{text.muted.color}"
182
+ },
183
+ "focus": {
184
+ "background": "{surface.100}",
185
+ "color": "{text.hover.color}"
186
+ },
187
+ "selected": {
188
+ "background": "{highlight.background}",
189
+ "focus": {
190
+ "background": "{highlight.focus.background}",
191
+ "color": "{highlight.focus.color}"
192
+ },
193
+ "color": "{highlight.color}"
194
+ },
195
+ "color": "{text.color}",
196
+ "icon": {
197
+ "color": "{surface.400}",
198
+ "focus": {
199
+ "color": "{surface.500}"
200
+ }
201
+ }
202
+ }
203
+ },
204
+ "mask": {
205
+ "background": "rgba(0, 0, 0, 0.4)",
206
+ "color": "{surface.200}"
207
+ },
208
+ "navigation": {
209
+ "list": {
210
+ "padding": "{space.50} {space.50}",
211
+ "gap": "{space.25}"
212
+ },
213
+ "item": {
214
+ "padding": "{space.100} {space.150}",
215
+ "border": {
216
+ "radius": "{border.radius.sm}"
217
+ },
218
+ "gap": "{space.100}",
219
+ "focus": {
220
+ "background": "{surface.100}",
221
+ "color": "{text.hover.color}"
222
+ },
223
+ "active": {
224
+ "background": "{surface.100}",
225
+ "color": "{text.hover.color}"
226
+ },
227
+ "color": "{text.color}",
228
+ "icon": {
229
+ "color": "{surface.400}",
230
+ "focus": {
231
+ "color": "{surface.500}"
232
+ },
233
+ "active": {
234
+ "color": "{surface.500}"
235
+ }
236
+ }
237
+ },
238
+ "submenu": {
239
+ "label": {
240
+ "padding": "{space.100} {space.150}",
241
+ "font": {
242
+ "weight": "{font-weight.medium}"
243
+ },
244
+ "background": "rgba(0, 0, 0, 0)",
245
+ "color": "{text.muted.color}"
246
+ },
247
+ "icon": {
248
+ "size": "{space.150}",
249
+ "color": "{surface.400}",
250
+ "focus": {
251
+ "color": "{surface.500}"
252
+ },
253
+ "active": {
254
+ "color": "{surface.500}"
255
+ }
256
+ }
257
+ }
258
+ },
259
+ "overlay": {
260
+ "select": {
261
+ "border": {
262
+ "radius": "{border.radius.md}",
263
+ "color": "{surface.200}"
264
+ },
265
+ "shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
266
+ "background": "{surface.0}",
267
+ "color": "{text.color}"
268
+ },
269
+ "popover": {
270
+ "border": {
271
+ "radius": "{border.radius.md}",
272
+ "color": "{surface.200}"
273
+ },
274
+ "padding": "{space.200} {space.150}",
275
+ "shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
276
+ "background": "{surface.0}",
277
+ "color": "{text.color}"
278
+ },
279
+ "modal": {
280
+ "border": {
281
+ "radius": "{border.radius.xl}",
282
+ "color": "{surface.200}"
283
+ },
284
+ "padding": "{space.200}",
285
+ "shadow": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
286
+ "background": "{surface.0}",
287
+ "color": "{text.color}"
288
+ },
289
+ "navigation": {
290
+ "shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)"
291
+ }
292
+ },
293
+ "primary": {
294
+ "50": "{emerald.50}",
295
+ "100": "{emerald.100}",
296
+ "200": "{emerald.200}",
297
+ "300": "{emerald.300}",
298
+ "400": "{emerald.400}",
299
+ "500": "{emerald.500}",
300
+ "600": "{emerald.600}",
301
+ "700": "{emerald.700}",
302
+ "800": "{emerald.800}",
303
+ "900": "{emerald.900}",
304
+ "950": "{emerald.950}",
305
+ "color": "{primary.500}",
306
+ "contrast": {
307
+ "color": "{surface.0}"
308
+ },
309
+ "hover": {
310
+ "color": "{primary.600}"
311
+ },
312
+ "active": {
313
+ "color": "{primary.700}"
314
+ }
315
+ },
316
+ "surface": {
317
+ "0": "#ffffff",
318
+ "50": "{slate.50}",
319
+ "100": "{slate.100}",
320
+ "200": "{slate.200}",
321
+ "300": "{slate.300}",
322
+ "400": "{slate.400}",
323
+ "500": "{slate.500}",
324
+ "600": "{slate.600}",
325
+ "700": "{slate.700}",
326
+ "800": "{slate.800}",
327
+ "900": "{slate.900}",
328
+ "950": "{slate.950}"
329
+ },
330
+ "text": {
331
+ "color": "{surface.900}",
332
+ "hover": {
333
+ "color": "{surface.800}",
334
+ "muted": {
335
+ "color": "{surface.600}"
336
+ }
337
+ },
338
+ "muted": {
339
+ "color": "{surface.500}"
340
+ }
341
+ },
342
+ "transition": {
343
+ "duration": "0.2s"
344
+ }
345
+ };