@loomhq/lens 10.20.0 → 10.22.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.
- package/dist/colors.d.ts +53 -461
- package/dist/colors.js +72 -48
- package/dist/components/arrange/arrange.d.ts +4 -2
- package/dist/components/arrange/arrange.js +7 -3
- package/dist/components/icon/icon.js +2 -2
- package/dist/components/icon-button/icon-button.d.ts +3 -3
- package/dist/components/icon-button/icon-button.js +4 -4
- package/dist/components/index.d.ts +1 -1
- package/dist/components/index.js +1 -0
- package/dist/components/split/split.d.ts +2 -1
- package/dist/components/split/split.js +7 -4
- package/dist/css-variables/index.d.ts +15 -66
- package/dist/css-variables/index.js +12 -18
- package/package.json +2 -1
package/dist/colors.d.ts
CHANGED
|
@@ -1,461 +1,53 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
export { h_5 as h };
|
|
55
|
-
const s_5: number;
|
|
56
|
-
export { s_5 as s };
|
|
57
|
-
const l_5: number;
|
|
58
|
-
export { l_5 as l };
|
|
59
|
-
const a_5: number;
|
|
60
|
-
export { a_5 as a };
|
|
61
|
-
}
|
|
62
|
-
namespace blueLight {
|
|
63
|
-
const h_6: number;
|
|
64
|
-
export { h_6 as h };
|
|
65
|
-
const s_6: number;
|
|
66
|
-
export { s_6 as s };
|
|
67
|
-
const l_6: number;
|
|
68
|
-
export { l_6 as l };
|
|
69
|
-
const a_6: number;
|
|
70
|
-
export { a_6 as a };
|
|
71
|
-
}
|
|
72
|
-
namespace blue {
|
|
73
|
-
const h_7: number;
|
|
74
|
-
export { h_7 as h };
|
|
75
|
-
const s_7: number;
|
|
76
|
-
export { s_7 as s };
|
|
77
|
-
const l_7: number;
|
|
78
|
-
export { l_7 as l };
|
|
79
|
-
const a_7: number;
|
|
80
|
-
export { a_7 as a };
|
|
81
|
-
}
|
|
82
|
-
namespace blueDark {
|
|
83
|
-
const h_8: number;
|
|
84
|
-
export { h_8 as h };
|
|
85
|
-
const s_8: number;
|
|
86
|
-
export { s_8 as s };
|
|
87
|
-
const l_8: number;
|
|
88
|
-
export { l_8 as l };
|
|
89
|
-
const a_8: number;
|
|
90
|
-
export { a_8 as a };
|
|
91
|
-
}
|
|
92
|
-
namespace orangeLight {
|
|
93
|
-
const h_9: number;
|
|
94
|
-
export { h_9 as h };
|
|
95
|
-
const s_9: number;
|
|
96
|
-
export { s_9 as s };
|
|
97
|
-
const l_9: number;
|
|
98
|
-
export { l_9 as l };
|
|
99
|
-
const a_9: number;
|
|
100
|
-
export { a_9 as a };
|
|
101
|
-
}
|
|
102
|
-
namespace orange {
|
|
103
|
-
const h_10: number;
|
|
104
|
-
export { h_10 as h };
|
|
105
|
-
const s_10: number;
|
|
106
|
-
export { s_10 as s };
|
|
107
|
-
const l_10: number;
|
|
108
|
-
export { l_10 as l };
|
|
109
|
-
const a_10: number;
|
|
110
|
-
export { a_10 as a };
|
|
111
|
-
}
|
|
112
|
-
namespace orangeDark {
|
|
113
|
-
const h_11: number;
|
|
114
|
-
export { h_11 as h };
|
|
115
|
-
const s_11: number;
|
|
116
|
-
export { s_11 as s };
|
|
117
|
-
const l_11: number;
|
|
118
|
-
export { l_11 as l };
|
|
119
|
-
const a_11: number;
|
|
120
|
-
export { a_11 as a };
|
|
121
|
-
}
|
|
122
|
-
namespace tealLight {
|
|
123
|
-
const h_12: number;
|
|
124
|
-
export { h_12 as h };
|
|
125
|
-
const s_12: number;
|
|
126
|
-
export { s_12 as s };
|
|
127
|
-
const l_12: number;
|
|
128
|
-
export { l_12 as l };
|
|
129
|
-
const a_12: number;
|
|
130
|
-
export { a_12 as a };
|
|
131
|
-
}
|
|
132
|
-
namespace teal {
|
|
133
|
-
const h_13: number;
|
|
134
|
-
export { h_13 as h };
|
|
135
|
-
const s_13: number;
|
|
136
|
-
export { s_13 as s };
|
|
137
|
-
const l_13: number;
|
|
138
|
-
export { l_13 as l };
|
|
139
|
-
const a_13: number;
|
|
140
|
-
export { a_13 as a };
|
|
141
|
-
}
|
|
142
|
-
namespace tealDark {
|
|
143
|
-
const h_14: number;
|
|
144
|
-
export { h_14 as h };
|
|
145
|
-
const s_14: number;
|
|
146
|
-
export { s_14 as s };
|
|
147
|
-
const l_14: number;
|
|
148
|
-
export { l_14 as l };
|
|
149
|
-
const a_14: number;
|
|
150
|
-
export { a_14 as a };
|
|
151
|
-
}
|
|
152
|
-
namespace yellowLight {
|
|
153
|
-
const h_15: number;
|
|
154
|
-
export { h_15 as h };
|
|
155
|
-
const s_15: number;
|
|
156
|
-
export { s_15 as s };
|
|
157
|
-
const l_15: number;
|
|
158
|
-
export { l_15 as l };
|
|
159
|
-
const a_15: number;
|
|
160
|
-
export { a_15 as a };
|
|
161
|
-
}
|
|
162
|
-
namespace yellow {
|
|
163
|
-
const h_16: number;
|
|
164
|
-
export { h_16 as h };
|
|
165
|
-
const s_16: number;
|
|
166
|
-
export { s_16 as s };
|
|
167
|
-
const l_16: number;
|
|
168
|
-
export { l_16 as l };
|
|
169
|
-
const a_16: number;
|
|
170
|
-
export { a_16 as a };
|
|
171
|
-
}
|
|
172
|
-
namespace yellowDark {
|
|
173
|
-
const h_17: number;
|
|
174
|
-
export { h_17 as h };
|
|
175
|
-
const s_17: number;
|
|
176
|
-
export { s_17 as s };
|
|
177
|
-
const l_17: number;
|
|
178
|
-
export { l_17 as l };
|
|
179
|
-
const a_17: number;
|
|
180
|
-
export { a_17 as a };
|
|
181
|
-
}
|
|
182
|
-
}
|
|
183
|
-
export namespace hslaGreys {
|
|
184
|
-
namespace grey8 {
|
|
185
|
-
const h_18: number;
|
|
186
|
-
export { h_18 as h };
|
|
187
|
-
const s_18: number;
|
|
188
|
-
export { s_18 as s };
|
|
189
|
-
const l_18: number;
|
|
190
|
-
export { l_18 as l };
|
|
191
|
-
const a_18: number;
|
|
192
|
-
export { a_18 as a };
|
|
193
|
-
}
|
|
194
|
-
namespace grey7 {
|
|
195
|
-
const h_19: number;
|
|
196
|
-
export { h_19 as h };
|
|
197
|
-
const s_19: number;
|
|
198
|
-
export { s_19 as s };
|
|
199
|
-
const l_19: number;
|
|
200
|
-
export { l_19 as l };
|
|
201
|
-
const a_19: number;
|
|
202
|
-
export { a_19 as a };
|
|
203
|
-
}
|
|
204
|
-
namespace grey6 {
|
|
205
|
-
const h_20: number;
|
|
206
|
-
export { h_20 as h };
|
|
207
|
-
const s_20: number;
|
|
208
|
-
export { s_20 as s };
|
|
209
|
-
const l_20: number;
|
|
210
|
-
export { l_20 as l };
|
|
211
|
-
const a_20: number;
|
|
212
|
-
export { a_20 as a };
|
|
213
|
-
}
|
|
214
|
-
namespace grey5 {
|
|
215
|
-
const h_21: number;
|
|
216
|
-
export { h_21 as h };
|
|
217
|
-
const s_21: number;
|
|
218
|
-
export { s_21 as s };
|
|
219
|
-
const l_21: number;
|
|
220
|
-
export { l_21 as l };
|
|
221
|
-
const a_21: number;
|
|
222
|
-
export { a_21 as a };
|
|
223
|
-
}
|
|
224
|
-
namespace grey4 {
|
|
225
|
-
const h_22: number;
|
|
226
|
-
export { h_22 as h };
|
|
227
|
-
const s_22: number;
|
|
228
|
-
export { s_22 as s };
|
|
229
|
-
const l_22: number;
|
|
230
|
-
export { l_22 as l };
|
|
231
|
-
const a_22: number;
|
|
232
|
-
export { a_22 as a };
|
|
233
|
-
}
|
|
234
|
-
namespace grey3 {
|
|
235
|
-
const h_23: number;
|
|
236
|
-
export { h_23 as h };
|
|
237
|
-
const s_23: number;
|
|
238
|
-
export { s_23 as s };
|
|
239
|
-
const l_23: number;
|
|
240
|
-
export { l_23 as l };
|
|
241
|
-
const a_23: number;
|
|
242
|
-
export { a_23 as a };
|
|
243
|
-
}
|
|
244
|
-
namespace grey2 {
|
|
245
|
-
const h_24: number;
|
|
246
|
-
export { h_24 as h };
|
|
247
|
-
const s_24: number;
|
|
248
|
-
export { s_24 as s };
|
|
249
|
-
const l_24: number;
|
|
250
|
-
export { l_24 as l };
|
|
251
|
-
const a_24: number;
|
|
252
|
-
export { a_24 as a };
|
|
253
|
-
}
|
|
254
|
-
namespace grey1 {
|
|
255
|
-
const h_25: number;
|
|
256
|
-
export { h_25 as h };
|
|
257
|
-
const s_25: number;
|
|
258
|
-
export { s_25 as s };
|
|
259
|
-
const l_25: number;
|
|
260
|
-
export { l_25 as l };
|
|
261
|
-
const a_25: number;
|
|
262
|
-
export { a_25 as a };
|
|
263
|
-
}
|
|
264
|
-
namespace white {
|
|
265
|
-
const h_26: number;
|
|
266
|
-
export { h_26 as h };
|
|
267
|
-
const s_26: number;
|
|
268
|
-
export { s_26 as s };
|
|
269
|
-
const l_26: number;
|
|
270
|
-
export { l_26 as l };
|
|
271
|
-
const a_26: number;
|
|
272
|
-
export { a_26 as a };
|
|
273
|
-
}
|
|
274
|
-
}
|
|
275
|
-
export namespace themeColors {
|
|
276
|
-
namespace light {
|
|
277
|
-
import disabledBackground = hslaGreys.grey2;
|
|
278
|
-
export { disabledBackground };
|
|
279
|
-
import formFieldBorder = hslaGreys.grey3;
|
|
280
|
-
export { formFieldBorder };
|
|
281
|
-
import formFieldBackground = hslaGreys.white;
|
|
282
|
-
export { formFieldBackground };
|
|
283
|
-
export const buttonBorder: any;
|
|
284
|
-
export namespace upgrade {
|
|
285
|
-
const h_27: number;
|
|
286
|
-
export { h_27 as h };
|
|
287
|
-
const s_27: number;
|
|
288
|
-
export { s_27 as s };
|
|
289
|
-
const l_27: number;
|
|
290
|
-
export { l_27 as l };
|
|
291
|
-
const a_27: number;
|
|
292
|
-
export { a_27 as a };
|
|
293
|
-
}
|
|
294
|
-
export const upgradeHover: any;
|
|
295
|
-
export const upgradeActive: any;
|
|
296
|
-
export const tabBackground: any;
|
|
297
|
-
export namespace discoveryBackground {
|
|
298
|
-
const h_28: number;
|
|
299
|
-
export { h_28 as h };
|
|
300
|
-
const s_28: number;
|
|
301
|
-
export { s_28 as s };
|
|
302
|
-
const l_28: number;
|
|
303
|
-
export { l_28 as l };
|
|
304
|
-
const a_28: number;
|
|
305
|
-
export { a_28 as a };
|
|
306
|
-
}
|
|
307
|
-
export namespace discoveryLightBackground {
|
|
308
|
-
const h_29: number;
|
|
309
|
-
export { h_29 as h };
|
|
310
|
-
const s_29: number;
|
|
311
|
-
export { s_29 as s };
|
|
312
|
-
const l_29: number;
|
|
313
|
-
export { l_29 as l };
|
|
314
|
-
const a_29: number;
|
|
315
|
-
export { a_29 as a };
|
|
316
|
-
}
|
|
317
|
-
import discoveryTitle = hslaGreys.grey8;
|
|
318
|
-
export { discoveryTitle };
|
|
319
|
-
export namespace discoveryHighlight {
|
|
320
|
-
const h_30: number;
|
|
321
|
-
export { h_30 as h };
|
|
322
|
-
const s_30: number;
|
|
323
|
-
export { s_30 as s };
|
|
324
|
-
const l_30: number;
|
|
325
|
-
export { l_30 as l };
|
|
326
|
-
const a_30: number;
|
|
327
|
-
export { a_30 as a };
|
|
328
|
-
}
|
|
329
|
-
import primary = hslaBaseColors.blurple;
|
|
330
|
-
export { primary };
|
|
331
|
-
export const primaryHover: any;
|
|
332
|
-
export const primaryActive: any;
|
|
333
|
-
export const focusRing: any;
|
|
334
|
-
import record = hslaBaseColors.orange;
|
|
335
|
-
export { record };
|
|
336
|
-
export const recordHover: any;
|
|
337
|
-
export const recordActive: any;
|
|
338
|
-
import success = hslaBaseColors.teal;
|
|
339
|
-
export { success };
|
|
340
|
-
import danger = hslaBaseColors.red;
|
|
341
|
-
export { danger };
|
|
342
|
-
export const dangerHover: any;
|
|
343
|
-
export const dangerActive: any;
|
|
344
|
-
export const backdrop: any;
|
|
345
|
-
import disabledContent = hslaGreys.grey5;
|
|
346
|
-
export { disabledContent };
|
|
347
|
-
export namespace highlight {
|
|
348
|
-
import h_31 = h;
|
|
349
|
-
export { h_31 as h };
|
|
350
|
-
import s_31 = s;
|
|
351
|
-
export { s_31 as s };
|
|
352
|
-
const l_31: number;
|
|
353
|
-
export { l_31 as l };
|
|
354
|
-
const a_31: number;
|
|
355
|
-
export { a_31 as a };
|
|
356
|
-
}
|
|
357
|
-
import body = hslaGreys.grey8;
|
|
358
|
-
export { body };
|
|
359
|
-
export const bodyDimmed: any;
|
|
360
|
-
import background = hslaGreys.white;
|
|
361
|
-
export { background };
|
|
362
|
-
export const backgroundHover: any;
|
|
363
|
-
export const backgroundActive: any;
|
|
364
|
-
export const backgroundSecondary: any;
|
|
365
|
-
export namespace backgroundSecondary2 {
|
|
366
|
-
const h_32: number;
|
|
367
|
-
export { h_32 as h };
|
|
368
|
-
const s_32: number;
|
|
369
|
-
export { s_32 as s };
|
|
370
|
-
const l_32: number;
|
|
371
|
-
export { l_32 as l };
|
|
372
|
-
const a_32: number;
|
|
373
|
-
export { a_32 as a };
|
|
374
|
-
}
|
|
375
|
-
import overlay = hslaGreys.white;
|
|
376
|
-
export { overlay };
|
|
377
|
-
export const border: any;
|
|
378
|
-
}
|
|
379
|
-
namespace dark {
|
|
380
|
-
const disabledBackground_1: any;
|
|
381
|
-
export { disabledBackground_1 as disabledBackground };
|
|
382
|
-
import formFieldBorder_1 = hslaGreys.grey6;
|
|
383
|
-
export { formFieldBorder_1 as formFieldBorder };
|
|
384
|
-
import formFieldBackground_1 = hslaGreys.grey8;
|
|
385
|
-
export { formFieldBackground_1 as formFieldBackground };
|
|
386
|
-
const buttonBorder_1: any;
|
|
387
|
-
export { buttonBorder_1 as buttonBorder };
|
|
388
|
-
export namespace upgrade_1 {
|
|
389
|
-
const h_33: number;
|
|
390
|
-
export { h_33 as h };
|
|
391
|
-
const s_33: number;
|
|
392
|
-
export { s_33 as s };
|
|
393
|
-
const l_33: number;
|
|
394
|
-
export { l_33 as l };
|
|
395
|
-
const a_33: number;
|
|
396
|
-
export { a_33 as a };
|
|
397
|
-
}
|
|
398
|
-
export { upgrade_1 as upgrade };
|
|
399
|
-
const upgradeHover_1: any;
|
|
400
|
-
export { upgradeHover_1 as upgradeHover };
|
|
401
|
-
const upgradeActive_1: any;
|
|
402
|
-
export { upgradeActive_1 as upgradeActive };
|
|
403
|
-
const tabBackground_1: any;
|
|
404
|
-
export { tabBackground_1 as tabBackground };
|
|
405
|
-
export namespace discoveryBackground_1 {
|
|
406
|
-
const h_34: number;
|
|
407
|
-
export { h_34 as h };
|
|
408
|
-
const s_34: number;
|
|
409
|
-
export { s_34 as s };
|
|
410
|
-
const l_34: number;
|
|
411
|
-
export { l_34 as l };
|
|
412
|
-
const a_34: number;
|
|
413
|
-
export { a_34 as a };
|
|
414
|
-
}
|
|
415
|
-
export { discoveryBackground_1 as discoveryBackground };
|
|
416
|
-
import discoveryLightBackground_1 = hslaGreys.grey8;
|
|
417
|
-
export { discoveryLightBackground_1 as discoveryLightBackground };
|
|
418
|
-
import discoveryTitle_1 = hslaBaseColors.blue;
|
|
419
|
-
export { discoveryTitle_1 as discoveryTitle };
|
|
420
|
-
export namespace discoveryHighlight_1 {
|
|
421
|
-
const h_35: number;
|
|
422
|
-
export { h_35 as h };
|
|
423
|
-
const s_35: number;
|
|
424
|
-
export { s_35 as s };
|
|
425
|
-
const l_35: number;
|
|
426
|
-
export { l_35 as l };
|
|
427
|
-
const a_35: number;
|
|
428
|
-
export { a_35 as a };
|
|
429
|
-
}
|
|
430
|
-
export { discoveryHighlight_1 as discoveryHighlight };
|
|
431
|
-
import body_1 = hslaGreys.grey1;
|
|
432
|
-
export { body_1 as body };
|
|
433
|
-
const bodyDimmed_1: any;
|
|
434
|
-
export { bodyDimmed_1 as bodyDimmed };
|
|
435
|
-
import background_1 = hslaGreys.grey8;
|
|
436
|
-
export { background_1 as background };
|
|
437
|
-
const backgroundHover_1: any;
|
|
438
|
-
export { backgroundHover_1 as backgroundHover };
|
|
439
|
-
const backgroundActive_1: any;
|
|
440
|
-
export { backgroundActive_1 as backgroundActive };
|
|
441
|
-
const backgroundSecondary_1: any;
|
|
442
|
-
export { backgroundSecondary_1 as backgroundSecondary };
|
|
443
|
-
export namespace backgroundSecondary2_1 {
|
|
444
|
-
const h_36: number;
|
|
445
|
-
export { h_36 as h };
|
|
446
|
-
const s_36: number;
|
|
447
|
-
export { s_36 as s };
|
|
448
|
-
const l_36: number;
|
|
449
|
-
export { l_36 as l };
|
|
450
|
-
const a_36: number;
|
|
451
|
-
export { a_36 as a };
|
|
452
|
-
}
|
|
453
|
-
export { backgroundSecondary2_1 as backgroundSecondary2 };
|
|
454
|
-
const overlay_1: any;
|
|
455
|
-
export { overlay_1 as overlay };
|
|
456
|
-
const border_1: any;
|
|
457
|
-
export { border_1 as border };
|
|
458
|
-
}
|
|
459
|
-
}
|
|
460
|
-
export namespace hslaColors { }
|
|
461
|
-
export const colorsNames: string[];
|
|
1
|
+
declare type HslaColor = {
|
|
2
|
+
h: number;
|
|
3
|
+
s: number;
|
|
4
|
+
l: number;
|
|
5
|
+
a: number;
|
|
6
|
+
};
|
|
7
|
+
declare const BaseColors: readonly ["red", "blurpleLight", "blurpleMedium", "blurple", "blurpleDark", "offWhite", "blueLight", "blue", "blueDark", "orangeLight", "orange", "orangeDark", "tealLight", "teal", "tealDark", "yellowLight", "yellow", "yellowDark"];
|
|
8
|
+
declare const GreyColors: readonly ["grey8", "grey7", "grey6", "grey5", "grey4", "grey3", "grey2", "grey1", "white"];
|
|
9
|
+
declare const SharedColors: readonly ["primary", "primaryHover", "primaryActive", "focusRing", "record", "recordHover", "recordActive", "success", "danger", "dangerHover", "dangerActive", "backdrop", "disabledContent", "highlight"];
|
|
10
|
+
declare const SemanticColors: readonly ["body", "bodyDimmed", "background", "backgroundHover", "backgroundActive", "backgroundSecondary", "backgroundSecondary2", "overlay", "border", "disabledBackground", "formFieldBorder", "formFieldBackground", "buttonBorder", "upgrade", "upgradeHover", "upgradeActive", "tabBackground", "discoveryBackground", "discoveryLightBackground", "discoveryTitle", "discoveryHighlight"];
|
|
11
|
+
declare type ThemesColorVariant = Record<typeof SharedColors[number] | typeof SemanticColors[number], HslaColor>;
|
|
12
|
+
declare type ThemesColors = {
|
|
13
|
+
light: ThemesColorVariant;
|
|
14
|
+
dark: ThemesColorVariant;
|
|
15
|
+
};
|
|
16
|
+
export declare const darken: (color: HslaColor, percentage: number) => HslaColor;
|
|
17
|
+
export declare const lighten: (color: HslaColor, percentage: number) => HslaColor;
|
|
18
|
+
export declare const saturate: (color: HslaColor, percentage: number) => HslaColor;
|
|
19
|
+
export declare const alpha: (color: HslaColor, alpha: number) => HslaColor;
|
|
20
|
+
export declare const hslaBaseColors: Record<typeof BaseColors[number], HslaColor>;
|
|
21
|
+
export declare const hslaGreys: Record<typeof GreyColors[number], HslaColor>;
|
|
22
|
+
export declare const themeColors: ThemesColors;
|
|
23
|
+
export declare const hslaColors: {
|
|
24
|
+
grey8: HslaColor;
|
|
25
|
+
grey7: HslaColor;
|
|
26
|
+
grey6: HslaColor;
|
|
27
|
+
grey5: HslaColor;
|
|
28
|
+
grey4: HslaColor;
|
|
29
|
+
grey3: HslaColor;
|
|
30
|
+
grey2: HslaColor;
|
|
31
|
+
grey1: HslaColor;
|
|
32
|
+
white: HslaColor;
|
|
33
|
+
red: HslaColor;
|
|
34
|
+
blurpleLight: HslaColor;
|
|
35
|
+
blurpleMedium: HslaColor;
|
|
36
|
+
blurple: HslaColor;
|
|
37
|
+
blurpleDark: HslaColor;
|
|
38
|
+
offWhite: HslaColor;
|
|
39
|
+
blueLight: HslaColor;
|
|
40
|
+
blue: HslaColor;
|
|
41
|
+
blueDark: HslaColor;
|
|
42
|
+
orangeLight: HslaColor;
|
|
43
|
+
orange: HslaColor;
|
|
44
|
+
orangeDark: HslaColor;
|
|
45
|
+
tealLight: HslaColor;
|
|
46
|
+
teal: HslaColor;
|
|
47
|
+
tealDark: HslaColor;
|
|
48
|
+
yellowLight: HslaColor;
|
|
49
|
+
yellow: HslaColor;
|
|
50
|
+
yellowDark: HslaColor;
|
|
51
|
+
};
|
|
52
|
+
export declare const colorsNames: string[];
|
|
53
|
+
export {};
|
package/dist/colors.js
CHANGED
|
@@ -1,3 +1,73 @@
|
|
|
1
|
+
const BaseColors = [
|
|
2
|
+
'red',
|
|
3
|
+
'blurpleLight',
|
|
4
|
+
'blurpleMedium',
|
|
5
|
+
'blurple',
|
|
6
|
+
'blurpleDark',
|
|
7
|
+
'offWhite',
|
|
8
|
+
'blueLight',
|
|
9
|
+
'blue',
|
|
10
|
+
'blueDark',
|
|
11
|
+
'orangeLight',
|
|
12
|
+
'orange',
|
|
13
|
+
'orangeDark',
|
|
14
|
+
'tealLight',
|
|
15
|
+
'teal',
|
|
16
|
+
'tealDark',
|
|
17
|
+
'yellowLight',
|
|
18
|
+
'yellow',
|
|
19
|
+
'yellowDark',
|
|
20
|
+
];
|
|
21
|
+
const GreyColors = [
|
|
22
|
+
'grey8',
|
|
23
|
+
'grey7',
|
|
24
|
+
'grey6',
|
|
25
|
+
'grey5',
|
|
26
|
+
'grey4',
|
|
27
|
+
'grey3',
|
|
28
|
+
'grey2',
|
|
29
|
+
'grey1',
|
|
30
|
+
'white',
|
|
31
|
+
];
|
|
32
|
+
const SharedColors = [
|
|
33
|
+
'primary',
|
|
34
|
+
'primaryHover',
|
|
35
|
+
'primaryActive',
|
|
36
|
+
'focusRing',
|
|
37
|
+
'record',
|
|
38
|
+
'recordHover',
|
|
39
|
+
'recordActive',
|
|
40
|
+
'success',
|
|
41
|
+
'danger',
|
|
42
|
+
'dangerHover',
|
|
43
|
+
'dangerActive',
|
|
44
|
+
'backdrop',
|
|
45
|
+
'disabledContent',
|
|
46
|
+
'highlight',
|
|
47
|
+
];
|
|
48
|
+
const SemanticColors = [
|
|
49
|
+
'body',
|
|
50
|
+
'bodyDimmed',
|
|
51
|
+
'background',
|
|
52
|
+
'backgroundHover',
|
|
53
|
+
'backgroundActive',
|
|
54
|
+
'backgroundSecondary',
|
|
55
|
+
'backgroundSecondary2',
|
|
56
|
+
'overlay',
|
|
57
|
+
'border',
|
|
58
|
+
'disabledBackground',
|
|
59
|
+
'formFieldBorder',
|
|
60
|
+
'formFieldBackground',
|
|
61
|
+
'buttonBorder',
|
|
62
|
+
'upgrade',
|
|
63
|
+
'upgradeHover',
|
|
64
|
+
'upgradeActive',
|
|
65
|
+
'tabBackground',
|
|
66
|
+
'discoveryBackground',
|
|
67
|
+
'discoveryLightBackground',
|
|
68
|
+
'discoveryTitle',
|
|
69
|
+
'discoveryHighlight',
|
|
70
|
+
];
|
|
1
71
|
const percent = (number, percentage) => Math.round((number * percentage) / 100);
|
|
2
72
|
export const darken = (color, percentage) => (Object.assign(Object.assign({}, color), { l: color.l - percent(color.l, percentage) }));
|
|
3
73
|
export const lighten = (color, percentage) => (Object.assign(Object.assign({}, color), { l: color.l + percent(color.l, percentage) }));
|
|
@@ -65,54 +135,8 @@ const themeSharedColors = {
|
|
|
65
135
|
};
|
|
66
136
|
// This object has a specific spread order for documentation purposes
|
|
67
137
|
export const themeColors = {
|
|
68
|
-
light: Object.assign(Object.assign({
|
|
69
|
-
|
|
70
|
-
bodyDimmed: alpha(saturate(hslaGreys.grey8, 264), bodyDimmedAlpha),
|
|
71
|
-
background: hslaGreys.white,
|
|
72
|
-
backgroundHover: alpha(hslaGreys.grey7, 0.1),
|
|
73
|
-
backgroundActive: alpha(hslaGreys.grey7, 0.3),
|
|
74
|
-
backgroundSecondary: alpha(hslaGreys.grey7, 0.04),
|
|
75
|
-
backgroundSecondary2: { h: 45, s: 34, l: 78, a: 0.2 },
|
|
76
|
-
overlay: hslaGreys.white,
|
|
77
|
-
border: alpha(hslaGreys.grey6, borderAlpha),
|
|
78
|
-
}, themeSharedColors), {
|
|
79
|
-
disabledBackground: hslaGreys.grey2,
|
|
80
|
-
formFieldBorder: hslaGreys.grey3,
|
|
81
|
-
formFieldBackground: hslaGreys.white,
|
|
82
|
-
buttonBorder: alpha(hslaGreys.grey6, buttonBorderAlpha),
|
|
83
|
-
upgrade: { h: 206, s: 100, l: 93, a: 1 },
|
|
84
|
-
upgradeHover: darken({ h: 206, s: 100, l: 93, a: 1 }, 9),
|
|
85
|
-
upgradeActive: darken({ h: 206, s: 100, l: 93, a: 1 }, 17),
|
|
86
|
-
tabBackground: alpha(hslaGreys.grey6, tabBackgroundAlpha),
|
|
87
|
-
discoveryBackground: { h: 206, s: 100, l: 93, a: 1 },
|
|
88
|
-
discoveryLightBackground: { h: 206, s: 100, l: 97, a: 1 },
|
|
89
|
-
discoveryTitle: hslaGreys.grey8,
|
|
90
|
-
discoveryHighlight: { h: 206, s: 100, l: 77, a: 0.3 },
|
|
91
|
-
}),
|
|
92
|
-
dark: Object.assign(Object.assign({
|
|
93
|
-
body: hslaGreys.grey1,
|
|
94
|
-
bodyDimmed: alpha(saturate(hslaGreys.grey1, 472), bodyDimmedAlpha),
|
|
95
|
-
background: hslaGreys.grey8,
|
|
96
|
-
backgroundHover: alpha(hslaGreys.white, 0.1),
|
|
97
|
-
backgroundActive: alpha(darken(hslaGreys.grey6, 100), 0.2),
|
|
98
|
-
backgroundSecondary: alpha(hslaGreys.white, 0.04),
|
|
99
|
-
backgroundSecondary2: { h: 45, s: 13, l: 44, a: 0.2 },
|
|
100
|
-
overlay: lighten(hslaGreys.grey8, 50),
|
|
101
|
-
border: alpha(hslaGreys.grey4, borderAlpha),
|
|
102
|
-
}, themeSharedColors), {
|
|
103
|
-
disabledBackground: darken(hslaGreys.grey6, 50),
|
|
104
|
-
formFieldBorder: hslaGreys.grey6,
|
|
105
|
-
formFieldBackground: hslaGreys.grey8,
|
|
106
|
-
buttonBorder: alpha(hslaGreys.white, buttonBorderAlpha),
|
|
107
|
-
upgrade: { h: 206, s: 92, l: 81, a: 1 },
|
|
108
|
-
upgradeHover: darken({ h: 206, s: 92, l: 81, a: 1 }, 9),
|
|
109
|
-
upgradeActive: darken({ h: 206, s: 92, l: 81, a: 1 }, 17),
|
|
110
|
-
tabBackground: alpha(hslaGreys.white, tabBackgroundAlpha),
|
|
111
|
-
discoveryBackground: { h: 206, s: 92, l: 81, a: 1 },
|
|
112
|
-
discoveryLightBackground: hslaGreys.grey8,
|
|
113
|
-
discoveryTitle: hslaBaseColors.blue,
|
|
114
|
-
discoveryHighlight: { h: 206, s: 100, l: 77, a: 0.3 },
|
|
115
|
-
}),
|
|
138
|
+
light: Object.assign(Object.assign({ body: hslaGreys.grey8, bodyDimmed: alpha(saturate(hslaGreys.grey8, 264), bodyDimmedAlpha), background: hslaGreys.white, backgroundHover: alpha(hslaGreys.grey7, 0.1), backgroundActive: alpha(hslaGreys.grey7, 0.3), backgroundSecondary: alpha(hslaGreys.grey7, 0.04), backgroundSecondary2: { h: 45, s: 34, l: 78, a: 0.2 }, overlay: hslaGreys.white, border: alpha(hslaGreys.grey6, borderAlpha) }, themeSharedColors), { disabledBackground: hslaGreys.grey2, formFieldBorder: hslaGreys.grey3, formFieldBackground: hslaGreys.white, buttonBorder: alpha(hslaGreys.grey6, buttonBorderAlpha), upgrade: { h: 206, s: 100, l: 93, a: 1 }, upgradeHover: darken({ h: 206, s: 100, l: 93, a: 1 }, 9), upgradeActive: darken({ h: 206, s: 100, l: 93, a: 1 }, 17), tabBackground: alpha(hslaGreys.grey6, tabBackgroundAlpha), discoveryBackground: { h: 206, s: 100, l: 93, a: 1 }, discoveryLightBackground: { h: 206, s: 100, l: 97, a: 1 }, discoveryTitle: hslaGreys.grey8, discoveryHighlight: { h: 206, s: 100, l: 77, a: 0.3 } }),
|
|
139
|
+
dark: Object.assign(Object.assign({ body: hslaGreys.grey1, bodyDimmed: alpha(saturate(hslaGreys.grey1, 472), bodyDimmedAlpha), background: hslaGreys.grey8, backgroundHover: alpha(hslaGreys.white, 0.1), backgroundActive: alpha(darken(hslaGreys.grey6, 100), 0.2), backgroundSecondary: alpha(hslaGreys.white, 0.04), backgroundSecondary2: { h: 45, s: 13, l: 44, a: 0.2 }, overlay: lighten(hslaGreys.grey8, 50), border: alpha(hslaGreys.grey4, borderAlpha) }, themeSharedColors), { disabledBackground: darken(hslaGreys.grey6, 50), formFieldBorder: hslaGreys.grey6, formFieldBackground: hslaGreys.grey8, buttonBorder: alpha(hslaGreys.white, buttonBorderAlpha), upgrade: { h: 206, s: 92, l: 81, a: 1 }, upgradeHover: darken({ h: 206, s: 92, l: 81, a: 1 }, 9), upgradeActive: darken({ h: 206, s: 92, l: 81, a: 1 }, 17), tabBackground: alpha(hslaGreys.white, tabBackgroundAlpha), discoveryBackground: { h: 206, s: 92, l: 81, a: 1 }, discoveryLightBackground: hslaGreys.grey8, discoveryTitle: hslaBaseColors.blue, discoveryHighlight: { h: 206, s: 100, l: 77, a: 0.3 } }),
|
|
116
140
|
};
|
|
117
141
|
export const hslaColors = Object.assign(Object.assign({}, hslaBaseColors), hslaGreys);
|
|
118
142
|
export const colorsNames = [
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { ResponsiveGridSections, ResponsiveType } from '../../types';
|
|
1
2
|
import React from 'react';
|
|
2
|
-
import { ResponsiveType, ResponsiveGridSections } from '../../types';
|
|
3
3
|
declare const ArrangeWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ArrangeProps, object>;
|
|
4
4
|
declare type ArrangeProps = {
|
|
5
5
|
children?: React.ReactNode;
|
|
@@ -11,6 +11,8 @@ declare type ArrangeProps = {
|
|
|
11
11
|
maxHeight?: ResponsiveType<string | number>;
|
|
12
12
|
gap?: ResponsiveType<string | number>;
|
|
13
13
|
alignItems?: ResponsiveType<'start' | 'end' | 'center' | 'stretch'>;
|
|
14
|
+
justifyItems?: ResponsiveType<'start' | 'end' | 'center' | 'stretch'>;
|
|
15
|
+
alignContent?: ResponsiveType<'start' | 'end' | 'center' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly'>;
|
|
14
16
|
justifyContent?: ResponsiveType<'start' | 'end' | 'center' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly'>;
|
|
15
17
|
autoFlow?: ResponsiveType<'column' | 'row'>;
|
|
16
18
|
columns?: ResponsiveGridSections;
|
|
@@ -18,5 +20,5 @@ declare type ArrangeProps = {
|
|
|
18
20
|
className?: never;
|
|
19
21
|
style?: never;
|
|
20
22
|
};
|
|
21
|
-
declare const Arrange: ({ children, width, height, minWidth, minHeight, maxWidth, maxHeight, gap, columns, rows, alignItems, justifyContent, autoFlow, className, style, ...props }: ArrangeProps & React.ComponentProps<typeof ArrangeWrapper>) => JSX.Element;
|
|
23
|
+
declare const Arrange: ({ children, width, height, minWidth, minHeight, maxWidth, maxHeight, gap, columns, rows, alignItems, justifyContent, justifyItems, alignContent, autoFlow, className, style, ...props }: ArrangeProps & React.ComponentProps<typeof ArrangeWrapper>) => JSX.Element;
|
|
22
24
|
export default Arrange;
|
|
@@ -11,13 +11,17 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
11
11
|
};
|
|
12
12
|
import { getResponsiveOneOf, getSize } from '../../utilities';
|
|
13
13
|
import React from 'react';
|
|
14
|
+
import { customStylesWarning } from '../../console-messages';
|
|
14
15
|
import { getResponsiveGridSections } from '../../utilities/responsive';
|
|
15
16
|
import styled from '@emotion/styled';
|
|
16
|
-
import { customStylesWarning } from '../../console-messages';
|
|
17
17
|
const ArrangeWrapper = styled.div `
|
|
18
18
|
display: grid;
|
|
19
19
|
${props => getResponsiveOneOf('align-items', props.alignItems)};
|
|
20
20
|
${props => getResponsiveOneOf('justify-content', props.justifyContent)};
|
|
21
|
+
${props => props.justifyItems &&
|
|
22
|
+
getResponsiveOneOf('justify-items', props.justifyItems)};
|
|
23
|
+
${props => props.alignContent &&
|
|
24
|
+
getResponsiveOneOf('align-content', props.alignContent)};
|
|
21
25
|
${props => !props.columns &&
|
|
22
26
|
!props.rows &&
|
|
23
27
|
!props.autoFlow &&
|
|
@@ -38,10 +42,10 @@ const ArrangeWrapper = styled.div `
|
|
|
38
42
|
getResponsiveOneOf('grid-auto-flow', props.autoFlow)};
|
|
39
43
|
`;
|
|
40
44
|
const Arrange = (_a) => {
|
|
41
|
-
var { children, width, height, minWidth, minHeight, maxWidth, maxHeight, gap, columns, rows, alignItems = 'center', justifyContent = 'start', autoFlow, className, style } = _a, props = __rest(_a, ["children", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "gap", "columns", "rows", "alignItems", "justifyContent", "autoFlow", "className", "style"]);
|
|
45
|
+
var { children, width, height, minWidth, minHeight, maxWidth, maxHeight, gap, columns, rows, alignItems = 'center', justifyContent = 'start', justifyItems, alignContent, autoFlow, className, style } = _a, props = __rest(_a, ["children", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "gap", "columns", "rows", "alignItems", "justifyContent", "justifyItems", "alignContent", "autoFlow", "className", "style"]);
|
|
42
46
|
if (className || style) {
|
|
43
47
|
console.warn(customStylesWarning);
|
|
44
48
|
}
|
|
45
|
-
return (React.createElement(ArrangeWrapper, Object.assign({ alignItems: alignItems, justifyContent: justifyContent, gap: gap, columns: columns, rows: rows, width: width, height: height, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight, autoFlow: autoFlow }, props), children));
|
|
49
|
+
return (React.createElement(ArrangeWrapper, Object.assign({ alignItems: alignItems, justifyContent: justifyContent, justifyItems: justifyItems, alignContent: alignContent, gap: gap, columns: columns, rows: rows, width: width, height: height, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight, autoFlow: autoFlow }, props), children));
|
|
46
50
|
};
|
|
47
51
|
export default Arrange;
|
|
@@ -29,13 +29,13 @@ const Icon = (_a) => {
|
|
|
29
29
|
var { altText, icon, color = 'body', size = defaultIconSize, hasWidthOffset } = _a, props = __rest(_a, ["altText", "icon", "color", "size", "hasWidthOffset"]);
|
|
30
30
|
const ref = React.useRef(null);
|
|
31
31
|
const defaultIconSizePx = defaultIconSize * unit;
|
|
32
|
-
React.
|
|
32
|
+
React.useEffect(() => {
|
|
33
33
|
if (!hasWidthOffset) {
|
|
34
34
|
return;
|
|
35
35
|
}
|
|
36
36
|
const svg = ref.current.querySelector('svg');
|
|
37
37
|
const bBox = svg.getBBox();
|
|
38
|
-
svg.setAttribute('viewBox', `${bBox.x} 0 ${bBox.width} ${defaultIconSizePx}`);
|
|
38
|
+
svg.setAttribute('viewBox', `${bBox.x} 0 ${bBox.width || defaultIconSizePx} ${defaultIconSizePx}`);
|
|
39
39
|
}, []);
|
|
40
40
|
return (React.createElement(IconWrapper, Object.assign({ ref: ref, "aria-label": altText, color: color, size: size, hasWidthOffset: hasWidthOffset }, props), icon));
|
|
41
41
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
declare const
|
|
3
|
-
declare const IconButton: ({ altText, icon, onClick, iconColor, isDisabled, size, ...props }: IconButtonProps & React.ComponentProps<typeof
|
|
2
|
+
export declare const IconButtonBox: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, IconButtonBoxProps, object>;
|
|
3
|
+
declare const IconButton: ({ altText, icon, onClick, iconColor, isDisabled, size, ...props }: IconButtonProps & React.ComponentProps<typeof IconButtonBox>) => JSX.Element;
|
|
4
4
|
declare type IconButtonProps = {
|
|
5
5
|
altText: string;
|
|
6
6
|
icon?: React.ReactNode;
|
|
@@ -9,7 +9,7 @@ declare type IconButtonProps = {
|
|
|
9
9
|
isDisabled?: boolean;
|
|
10
10
|
size?: 'small' | 'medium';
|
|
11
11
|
};
|
|
12
|
-
declare type
|
|
12
|
+
declare type IconButtonBoxProps = {
|
|
13
13
|
size?: 'small' | 'medium';
|
|
14
14
|
};
|
|
15
15
|
export default IconButton;
|
|
@@ -9,10 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
+
import { getColorValue, getFocusRing, getRadius, u } from '../../utilities';
|
|
13
|
+
import Icon from '../icon/icon';
|
|
12
14
|
import React from 'react';
|
|
13
15
|
import styled from '@emotion/styled';
|
|
14
|
-
import { u, getFocusRing, getRadius, getColorValue } from '../../utilities';
|
|
15
|
-
import Icon from '../icon/icon';
|
|
16
16
|
const sizeStyles = {
|
|
17
17
|
small: {
|
|
18
18
|
size: u(3),
|
|
@@ -23,7 +23,7 @@ const sizeStyles = {
|
|
|
23
23
|
iconSize: 3,
|
|
24
24
|
},
|
|
25
25
|
};
|
|
26
|
-
const
|
|
26
|
+
export const IconButtonBox = styled.button `
|
|
27
27
|
background-color: transparent;
|
|
28
28
|
border: none;
|
|
29
29
|
appearance: none;
|
|
@@ -75,7 +75,7 @@ const IconButtonWrapper = styled.button `
|
|
|
75
75
|
`;
|
|
76
76
|
const IconButton = (_a) => {
|
|
77
77
|
var { altText, icon, onClick, iconColor = 'body', isDisabled, size = 'medium' } = _a, props = __rest(_a, ["altText", "icon", "onClick", "iconColor", "isDisabled", "size"]);
|
|
78
|
-
return (React.createElement(
|
|
78
|
+
return (React.createElement(IconButtonBox, Object.assign({ "aria-label": altText, onClick: onClick, disabled: isDisabled, size: size }, props),
|
|
79
79
|
React.createElement(Icon, { icon: icon, size: sizeStyles[size].iconSize, color: isDisabled ? 'disabledContent' : iconColor })));
|
|
80
80
|
};
|
|
81
81
|
export default IconButton;
|
|
@@ -7,7 +7,6 @@ export { default as TextInput } from "./text-input/text-input";
|
|
|
7
7
|
export { default as Distribute } from "./distribute/distribute";
|
|
8
8
|
export { default as Container } from "./container/container";
|
|
9
9
|
export { default as Layout } from "./layout/layout";
|
|
10
|
-
export { default as IconButton } from "./icon-button/icon-button";
|
|
11
10
|
export { default as Loader } from "./loader/loader";
|
|
12
11
|
export { default as Checkbox } from "./checkbox/checkbox";
|
|
13
12
|
export { default as TextButton } from "./text-button/text-button";
|
|
@@ -28,6 +27,7 @@ export { default as Arrange } from "./arrange/arrange";
|
|
|
28
27
|
export { default as ColorPicker } from "./color-picker/color-picker";
|
|
29
28
|
export * from "./icon/available-icons";
|
|
30
29
|
export { default as BaseStyles, buildGlobalStylesheet } from "./base-styles/base-styles";
|
|
30
|
+
export { default as IconButton, IconButtonBox } from "./icon-button/icon-button";
|
|
31
31
|
export { default as Menu, MenuItem } from "./menu/menu";
|
|
32
32
|
export { default as Modal, ModalCard } from "./modal/modal";
|
|
33
33
|
export { default as Tooltip, TooltipBox } from "./tooltip/tooltip";
|
package/dist/components/index.js
CHANGED
|
@@ -9,6 +9,7 @@ export { default as Distribute } from './distribute/distribute';
|
|
|
9
9
|
export { default as Container } from './container/container';
|
|
10
10
|
export { default as Layout } from './layout/layout';
|
|
11
11
|
export { default as IconButton } from './icon-button/icon-button';
|
|
12
|
+
export { IconButtonBox } from './icon-button/icon-button';
|
|
12
13
|
export { default as Loader } from './loader/loader';
|
|
13
14
|
export { default as Checkbox } from './checkbox/checkbox';
|
|
14
15
|
export { default as TextButton } from './text-button/text-button';
|
|
@@ -3,7 +3,7 @@ import { ResponsiveType } from '../../types';
|
|
|
3
3
|
declare const SplitWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SplitProps, object>;
|
|
4
4
|
declare const SplitSectionWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SplitSectionProps, object>;
|
|
5
5
|
export declare const SplitSection: ({ children, grow, shrink, basis, width, height, minWidth, minHeight, maxWidth, maxHeight, className, style, ...props }: SplitSectionProps & React.ComponentProps<typeof SplitSectionWrapper>) => JSX.Element;
|
|
6
|
-
declare const Split: ({ children, gap, alignItems, justifyContent, wrap, width, height, minWidth, minHeight, maxWidth, maxHeight, className, style, ...props }: SplitProps & React.ComponentProps<typeof SplitWrapper>) => JSX.Element;
|
|
6
|
+
declare const Split: ({ children, gap, alignItems, justifyContent, alignContent, wrap, width, height, minWidth, minHeight, maxWidth, maxHeight, className, style, ...props }: SplitProps & React.ComponentProps<typeof SplitWrapper>) => JSX.Element;
|
|
7
7
|
interface SharedProps {
|
|
8
8
|
width?: ResponsiveType<number | string>;
|
|
9
9
|
height?: ResponsiveType<number | string>;
|
|
@@ -16,6 +16,7 @@ interface SharedProps {
|
|
|
16
16
|
interface SplitProps extends SharedProps {
|
|
17
17
|
alignItems?: ResponsiveType<'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline'>;
|
|
18
18
|
justifyContent?: ResponsiveType<'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'>;
|
|
19
|
+
alignContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'start' | 'end' | 'baseline';
|
|
19
20
|
wrap?: ResponsiveType<'nowrap' | 'wrap' | 'wrap-reverse'>;
|
|
20
21
|
gap?: ResponsiveType<number | string>;
|
|
21
22
|
direction?: ResponsiveType<'column' | 'row'>;
|
|
@@ -25,9 +25,12 @@ const getSizeStyles = props => css `
|
|
|
25
25
|
const SplitWrapper = styled.div `
|
|
26
26
|
display: flex;
|
|
27
27
|
${props => getResponsiveOneOf('align-items', props.alignItems)};
|
|
28
|
-
${props =>
|
|
28
|
+
${props => props.justifyContent &&
|
|
29
|
+
getResponsiveOneOf('justify-content', props.justifyContent)};
|
|
30
|
+
${props => props.alignContent &&
|
|
31
|
+
getResponsiveOneOf('align-content', props.alignContent)};
|
|
29
32
|
${props => getResponsiveOneOf('flex-wrap', props.wrap)};
|
|
30
|
-
${props => getResponsiveOneOf('flex-direction', props.direction)};
|
|
33
|
+
${props => props.direction && getResponsiveOneOf('flex-direction', props.direction)};
|
|
31
34
|
${props => props.gap && getSize('--gap', props.gap)};
|
|
32
35
|
margin-right: calc(-1 * var(--gap));
|
|
33
36
|
margin-bottom: calc(-1 * var(--gap));
|
|
@@ -49,7 +52,7 @@ export const SplitSection = (_a) => {
|
|
|
49
52
|
return (React.createElement(SplitSectionWrapper, Object.assign({ grow: grow, shrink: shrink, basis: basis, width: width, height: height, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight }, props), children));
|
|
50
53
|
};
|
|
51
54
|
const Split = (_a) => {
|
|
52
|
-
var { children, gap = 'initial', alignItems = 'center', justifyContent, wrap = 'wrap', width, height, minWidth, minHeight, maxWidth, maxHeight, className, style } = _a, props = __rest(_a, ["children", "gap", "alignItems", "justifyContent", "wrap", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "className", "style"]);
|
|
55
|
+
var { children, gap = 'initial', alignItems = 'center', justifyContent, alignContent, wrap = 'wrap', width, height, minWidth, minHeight, maxWidth, maxHeight, className, style } = _a, props = __rest(_a, ["children", "gap", "alignItems", "justifyContent", "alignContent", "wrap", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "className", "style"]);
|
|
53
56
|
React.Children.forEach(children, child => {
|
|
54
57
|
if ((child && !React.isValidElement(child)) ||
|
|
55
58
|
(React.isValidElement(child) && child.type !== SplitSection)) {
|
|
@@ -59,6 +62,6 @@ const Split = (_a) => {
|
|
|
59
62
|
if (className || style) {
|
|
60
63
|
console.warn(customStylesWarning);
|
|
61
64
|
}
|
|
62
|
-
return (React.createElement(SplitWrapper, Object.assign({ gap: gap, alignItems: alignItems, justifyContent: justifyContent, wrap: wrap, width: width, height: height, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight }, props), children));
|
|
65
|
+
return (React.createElement(SplitWrapper, Object.assign({ gap: gap, alignItems: alignItems, justifyContent: justifyContent, alignContent: alignContent, wrap: wrap, width: width, height: height, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight }, props), children));
|
|
63
66
|
};
|
|
64
67
|
export default Split;
|
|
@@ -1,66 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
export const
|
|
3
|
-
export const
|
|
4
|
-
export const
|
|
5
|
-
export const
|
|
6
|
-
export const
|
|
7
|
-
export const
|
|
8
|
-
export const
|
|
9
|
-
export
|
|
10
|
-
export
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
push(...items: any[]): number;
|
|
17
|
-
concat(...items: ConcatArray<any>[]): any[];
|
|
18
|
-
concat(...items: any[]): any[];
|
|
19
|
-
join(separator?: string): string;
|
|
20
|
-
reverse(): any[];
|
|
21
|
-
shift(): any;
|
|
22
|
-
slice(start?: number, end?: number): any[];
|
|
23
|
-
sort(compareFn?: (a: any, b: any) => number): any[];
|
|
24
|
-
splice(start: number, deleteCount?: number): any[];
|
|
25
|
-
splice(start: number, deleteCount: number, ...items: any[]): any[];
|
|
26
|
-
unshift(...items: any[]): number;
|
|
27
|
-
indexOf(searchElement: any, fromIndex?: number): number;
|
|
28
|
-
lastIndexOf(searchElement: any, fromIndex?: number): number;
|
|
29
|
-
every<S extends any>(predicate: (value: any, index: number, array: any[]) => value is S, thisArg?: any): this is S[];
|
|
30
|
-
every(predicate: (value: any, index: number, array: any[]) => unknown, thisArg?: any): boolean;
|
|
31
|
-
some(predicate: (value: any, index: number, array: any[]) => unknown, thisArg?: any): boolean;
|
|
32
|
-
forEach(callbackfn: (value: any, index: number, array: any[]) => void, thisArg?: any): void;
|
|
33
|
-
map<U>(callbackfn: (value: any, index: number, array: any[]) => U, thisArg?: any): U[];
|
|
34
|
-
filter<S_1 extends any>(predicate: (value: any, index: number, array: any[]) => value is S_1, thisArg?: any): S_1[];
|
|
35
|
-
filter(predicate: (value: any, index: number, array: any[]) => unknown, thisArg?: any): any[];
|
|
36
|
-
reduce(callbackfn: (previousValue: any, currentValue: any, currentIndex: number, array: any[]) => any): any;
|
|
37
|
-
reduce(callbackfn: (previousValue: any, currentValue: any, currentIndex: number, array: any[]) => any, initialValue: any): any;
|
|
38
|
-
reduce<U_1>(callbackfn: (previousValue: U_1, currentValue: any, currentIndex: number, array: any[]) => U_1, initialValue: U_1): U_1;
|
|
39
|
-
reduceRight(callbackfn: (previousValue: any, currentValue: any, currentIndex: number, array: any[]) => any): any;
|
|
40
|
-
reduceRight(callbackfn: (previousValue: any, currentValue: any, currentIndex: number, array: any[]) => any, initialValue: any): any;
|
|
41
|
-
reduceRight<U_2>(callbackfn: (previousValue: U_2, currentValue: any, currentIndex: number, array: any[]) => U_2, initialValue: U_2): U_2;
|
|
42
|
-
find<S_2 extends any>(predicate: (this: void, value: any, index: number, obj: any[]) => value is S_2, thisArg?: any): S_2;
|
|
43
|
-
find(predicate: (value: any, index: number, obj: any[]) => unknown, thisArg?: any): any;
|
|
44
|
-
findIndex(predicate: (value: any, index: number, obj: any[]) => unknown, thisArg?: any): number;
|
|
45
|
-
fill(value: any, start?: number, end?: number): any[];
|
|
46
|
-
copyWithin(target: number, start: number, end?: number): any[];
|
|
47
|
-
[Symbol.iterator](): IterableIterator<any>;
|
|
48
|
-
entries(): IterableIterator<[number, any]>;
|
|
49
|
-
keys(): IterableIterator<number>;
|
|
50
|
-
values(): IterableIterator<any>;
|
|
51
|
-
[Symbol.unscopables](): {
|
|
52
|
-
copyWithin: boolean;
|
|
53
|
-
entries: boolean;
|
|
54
|
-
fill: boolean;
|
|
55
|
-
find: boolean;
|
|
56
|
-
findIndex: boolean;
|
|
57
|
-
keys: boolean;
|
|
58
|
-
values: boolean;
|
|
59
|
-
};
|
|
60
|
-
includes(searchElement: any, fromIndex?: number): boolean;
|
|
61
|
-
flatMap<U_3, This = undefined>(callback: (this: This, value: any, index: number, array: any[]) => U_3 | readonly U_3[], thisArg?: This): U_3[];
|
|
62
|
-
flat<A, D extends number = 1>(this: A, depth?: D): FlatArray<A, D>[];
|
|
63
|
-
};
|
|
64
|
-
export function getThemeStylesString(customRootElement: any): string;
|
|
65
|
-
export function getThemeStyles(): void;
|
|
66
|
-
export function getAllCssVarsString(customRootElement: any): string;
|
|
1
|
+
declare type VarsObject = Record<string, string | number>;
|
|
2
|
+
export declare const getCssVarsFromObject: (prefix: string, varsObject: VarsObject) => VarsObject;
|
|
3
|
+
export declare const unitVariables: VarsObject;
|
|
4
|
+
export declare const fontWeightVariables: VarsObject;
|
|
5
|
+
export declare const textSizeVariables: VarsObject;
|
|
6
|
+
export declare const radiusVariables: VarsObject;
|
|
7
|
+
export declare const shadowVariables: VarsObject;
|
|
8
|
+
export declare const spaceVariables: VarsObject;
|
|
9
|
+
export declare const formFieldVariables: VarsObject;
|
|
10
|
+
export declare const getVariablesCssVarsObject: () => VarsObject;
|
|
11
|
+
export declare const getColorsCssVarsObject: () => VarsObject;
|
|
12
|
+
export declare const getThemeStylesString: (customRootElement?: string) => string;
|
|
13
|
+
export declare const getThemeStyles: () => void;
|
|
14
|
+
export declare const getAllCssVarsString: (customRootElement: any) => string;
|
|
15
|
+
export {};
|
|
@@ -1,20 +1,18 @@
|
|
|
1
|
+
import { fontWeights, radii, shadows, spaces, textSizes, unit, } from '../variables';
|
|
1
2
|
import { hslaBaseColors, hslaColors, hslaGreys, themeColors } from '../colors';
|
|
2
3
|
import { u } from '../utilities';
|
|
3
|
-
import { fontWeights, radii, shadows, spaces, textSizes, unit, } from '../variables';
|
|
4
4
|
export const getCssVarsFromObject = (prefix, varsObject) => {
|
|
5
|
-
const resultObj =
|
|
6
|
-
Object.entries(varsObject).
|
|
7
|
-
const obj = {};
|
|
5
|
+
const resultObj = {};
|
|
6
|
+
Object.entries(varsObject).forEach(([varName, varValue]) => {
|
|
8
7
|
const namePrefix = prefix ? `${prefix}-` : '';
|
|
9
8
|
const value = `--lns-${namePrefix + varName}`;
|
|
10
|
-
|
|
11
|
-
Object.assign(resultObj, obj);
|
|
9
|
+
resultObj[value] = varValue;
|
|
12
10
|
});
|
|
13
11
|
return resultObj;
|
|
14
12
|
};
|
|
15
13
|
const getTextSizesObject = () => {
|
|
16
14
|
const resultObj = {};
|
|
17
|
-
Object.entries(textSizes).
|
|
15
|
+
Object.entries(textSizes).forEach(([textSizeKey, textSizeValue]) => {
|
|
18
16
|
const fontSizesObj = {};
|
|
19
17
|
const lineHeightsObj = {};
|
|
20
18
|
const fontSizeValue = `fontSize-${textSizeKey}`;
|
|
@@ -26,22 +24,18 @@ const getTextSizesObject = () => {
|
|
|
26
24
|
return resultObj;
|
|
27
25
|
};
|
|
28
26
|
const getSpacesObject = () => {
|
|
29
|
-
const resultObj =
|
|
30
|
-
Object.entries(spaces).
|
|
31
|
-
const obj = {};
|
|
27
|
+
const resultObj = {};
|
|
28
|
+
Object.entries(spaces).forEach(([spaceName, spaceValue]) => {
|
|
32
29
|
const value = `space-${spaceName}`;
|
|
33
|
-
|
|
34
|
-
Object.assign(resultObj, obj);
|
|
30
|
+
resultObj[value] = u(spaceValue);
|
|
35
31
|
});
|
|
36
32
|
return resultObj;
|
|
37
33
|
};
|
|
38
34
|
const getColorsObject = () => {
|
|
39
|
-
const colorsObject =
|
|
40
|
-
Object.keys(Object.assign(Object.assign({}, hslaBaseColors), hslaGreys)).
|
|
41
|
-
const obj = {};
|
|
35
|
+
const colorsObject = {};
|
|
36
|
+
Object.keys(Object.assign(Object.assign({}, hslaBaseColors), hslaGreys)).forEach(name => {
|
|
42
37
|
const value = name;
|
|
43
|
-
|
|
44
|
-
Object.assign(colorsObject, obj);
|
|
38
|
+
colorsObject[value] = `hsla(${hslaColors[name].h},${hslaColors[name].s}%,${hslaColors[name].l}%,${hslaColors[name].a})`;
|
|
45
39
|
});
|
|
46
40
|
return colorsObject;
|
|
47
41
|
};
|
|
@@ -92,7 +86,7 @@ const assignLightThemeColors = () => {
|
|
|
92
86
|
const assignDarkThemeColors = () => {
|
|
93
87
|
return Object.keys(themeColors.dark).map(color => `--lns-color-${color}: var(--lns-themeDark-color-${color});`);
|
|
94
88
|
};
|
|
95
|
-
export const getThemeStylesString = customRootElement => {
|
|
89
|
+
export const getThemeStylesString = (customRootElement = ':root') => {
|
|
96
90
|
const rootElement = customRootElement || ':root';
|
|
97
91
|
return `
|
|
98
92
|
${rootElement},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@loomhq/lens",
|
|
3
|
-
"version": "10.
|
|
3
|
+
"version": "10.22.0",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "next",
|
|
6
6
|
"build:next": "next build",
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
"build:ts": "rm -rf dist && tsc -p tsconfig.build.json",
|
|
11
11
|
"deploy": "next export -o docs && touch docs/.nojekyll && cp ./CNAME docs/",
|
|
12
12
|
"lint": "eslint src",
|
|
13
|
+
"lint:ts": "tsc -p tsconfig.build.json --noEmit",
|
|
13
14
|
"test": "echo \"no tests\"",
|
|
14
15
|
"semantic-release": "semantic-release"
|
|
15
16
|
},
|