@eturnity/eturnity_reusable_components 9.22.1 → 9.22.2-EPDM-19724.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/index.es3.js +265 -153
- package/package.json +1 -1
- package/src/assets/theme.js +199 -87
- package/src/components/banner/actionBanner/index.vue +4 -2
- package/src/components/banner/infoBanner/index.vue +4 -2
- package/src/components/buttons/buttonIcon/index.vue +216 -80
- package/src/components/buttons/collection/index.vue +1 -3
- package/src/components/buttons/mainButton/index.vue +98 -44
- package/src/components/card/index.vue +1 -1
- package/src/components/filter/filterSettings.vue +1 -1
- package/src/components/inputs/inputText/index.vue +17 -17
- package/src/components/inputs/select/index.vue +1 -1
- package/src/components/inputs/switchField/index.vue +1 -1
- package/src/components/inputs/textAreaInput/index.vue +1 -1
- package/src/components/label/index.vue +3 -3
- package/src/components/modals/actionModal/index.vue +1 -1
- package/src/components/modals/infoModal/index.vue +1 -10
- package/src/components/modals/modalButtonContainer/index.vue +44 -0
- package/src/components/modals/modalButtonContainer/modalButtonContainer.stories.js +59 -0
- package/src/components/modals/modalContent/index.vue +125 -0
- package/src/components/modals/modalTitle/index.vue +34 -0
- package/src/components/tabsHeader/index.vue +14 -1
package/dist/index.es3.js
CHANGED
|
@@ -78,6 +78,7 @@ const theme = (() => {
|
|
|
78
78
|
transparentBlack1: "#162228e6",
|
|
79
79
|
transparentBlack2: "#263238e5",
|
|
80
80
|
transparentBlue1: "#20a4cae6",
|
|
81
|
+
transparentTeal900: "#151B1EFA",
|
|
81
82
|
blueElectric: "#66dffa",
|
|
82
83
|
eturnityGrey: "#263238",
|
|
83
84
|
teal: "#018b7d",
|
|
@@ -123,6 +124,7 @@ const theme = (() => {
|
|
|
123
124
|
900: "#2C2D2F"
|
|
124
125
|
},
|
|
125
126
|
teal: {
|
|
127
|
+
25: "#F4F8FA",
|
|
126
128
|
50: "#F0F3F5",
|
|
127
129
|
100: "#E1E7EA",
|
|
128
130
|
200: "#D1DBE0",
|
|
@@ -171,6 +173,7 @@ const theme = (() => {
|
|
|
171
173
|
900: "#332900"
|
|
172
174
|
},
|
|
173
175
|
red: {
|
|
176
|
+
25: "#FFF9F9",
|
|
174
177
|
50: "#FFEBEB",
|
|
175
178
|
100: "#FFDDDD",
|
|
176
179
|
200: "#FFBBBB",
|
|
@@ -183,6 +186,7 @@ const theme = (() => {
|
|
|
183
186
|
900: "#331111"
|
|
184
187
|
},
|
|
185
188
|
transparentWhite: {
|
|
189
|
+
50: "#ffffff16",
|
|
186
190
|
100: "#ffffff24",
|
|
187
191
|
200: "#ffffff48",
|
|
188
192
|
300: "#ffffff64",
|
|
@@ -205,6 +209,7 @@ const theme = (() => {
|
|
|
205
209
|
900: "#000000fa"
|
|
206
210
|
},
|
|
207
211
|
transparentTeal: {
|
|
212
|
+
50: "#6E8E9E16",
|
|
208
213
|
100: "#6E8E9E24",
|
|
209
214
|
200: "#6E8E9E48",
|
|
210
215
|
300: "#6E8E9E64",
|
|
@@ -214,6 +219,29 @@ const theme = (() => {
|
|
|
214
219
|
700: "#6E8E9Ed4",
|
|
215
220
|
800: "#6E8E9Ee6",
|
|
216
221
|
900: "#6E8E9Efa"
|
|
222
|
+
},
|
|
223
|
+
transparentRed: {
|
|
224
|
+
100: "#cc454524",
|
|
225
|
+
200: "#cc454548",
|
|
226
|
+
300: "#cc454564",
|
|
227
|
+
400: "#cc454580",
|
|
228
|
+
500: "#cc454596",
|
|
229
|
+
600: "#cc4545b4",
|
|
230
|
+
700: "#cc4545d4",
|
|
231
|
+
800: "#cc4545e6",
|
|
232
|
+
900: "#cc4545fa"
|
|
233
|
+
},
|
|
234
|
+
// Figma: white/000-10%, purple/400-08%, teal/400-10%, etc.
|
|
235
|
+
buttonIcon: {
|
|
236
|
+
overlayWhite10: "#ffffff1a",
|
|
237
|
+
overlayWhite20: "#ffffff33",
|
|
238
|
+
overlayBlack10: "#1622281a",
|
|
239
|
+
overlayBlack20: "#16222833",
|
|
240
|
+
overlayPurple8: "#b17bfa14",
|
|
241
|
+
overlayTeal10: "#8ca6b31a",
|
|
242
|
+
overlayTeal20: "#8ca6b333",
|
|
243
|
+
overlayRed8: "#ff656514",
|
|
244
|
+
none: "transparent"
|
|
217
245
|
}
|
|
218
246
|
};
|
|
219
247
|
return {
|
|
@@ -259,22 +287,26 @@ const theme = (() => {
|
|
|
259
287
|
default: {
|
|
260
288
|
backgroundColor: semanticColors.purple[500],
|
|
261
289
|
textColor: colors.white,
|
|
262
|
-
borderColor: ""
|
|
290
|
+
borderColor: "",
|
|
291
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10
|
|
263
292
|
},
|
|
264
293
|
hover: {
|
|
265
|
-
backgroundColor: semanticColors.purple[
|
|
294
|
+
backgroundColor: semanticColors.purple[600],
|
|
266
295
|
textColor: colors.white,
|
|
267
|
-
borderColor: ""
|
|
296
|
+
borderColor: "",
|
|
297
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20
|
|
268
298
|
},
|
|
269
299
|
active: {
|
|
270
|
-
backgroundColor: semanticColors.purple[
|
|
300
|
+
backgroundColor: semanticColors.purple[700],
|
|
271
301
|
textColor: colors.white,
|
|
272
|
-
borderColor: ""
|
|
302
|
+
borderColor: "",
|
|
303
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20
|
|
273
304
|
},
|
|
274
305
|
disabled: {
|
|
275
306
|
textColor: colors.white,
|
|
276
307
|
backgroundColor: semanticColors.grey[500],
|
|
277
|
-
borderColor: ""
|
|
308
|
+
borderColor: "",
|
|
309
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20
|
|
278
310
|
}
|
|
279
311
|
},
|
|
280
312
|
cancel: {
|
|
@@ -282,22 +314,26 @@ const theme = (() => {
|
|
|
282
314
|
default: {
|
|
283
315
|
backgroundColor: semanticColors.red[600],
|
|
284
316
|
textColor: colors.white,
|
|
285
|
-
borderColor: ""
|
|
317
|
+
borderColor: "",
|
|
318
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10
|
|
286
319
|
},
|
|
287
320
|
hover: {
|
|
288
|
-
backgroundColor: semanticColors.red[
|
|
321
|
+
backgroundColor: semanticColors.red[700],
|
|
289
322
|
textColor: colors.white,
|
|
290
|
-
borderColor: ""
|
|
323
|
+
borderColor: "",
|
|
324
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20
|
|
291
325
|
},
|
|
292
326
|
active: {
|
|
293
|
-
backgroundColor: semanticColors.red[
|
|
327
|
+
backgroundColor: semanticColors.red[800],
|
|
294
328
|
textColor: colors.white,
|
|
295
|
-
borderColor: ""
|
|
329
|
+
borderColor: "",
|
|
330
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20
|
|
296
331
|
},
|
|
297
332
|
disabled: {
|
|
298
333
|
textColor: colors.white,
|
|
299
|
-
backgroundColor: semanticColors.
|
|
300
|
-
borderColor: ""
|
|
334
|
+
backgroundColor: semanticColors.transparentRed[300],
|
|
335
|
+
borderColor: "",
|
|
336
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
301
337
|
}
|
|
302
338
|
}
|
|
303
339
|
},
|
|
@@ -308,22 +344,26 @@ const theme = (() => {
|
|
|
308
344
|
default: {
|
|
309
345
|
backgroundColor: semanticColors.purple[50],
|
|
310
346
|
textColor: semanticColors.purple[500],
|
|
311
|
-
borderColor: ""
|
|
347
|
+
borderColor: "",
|
|
348
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayPurple8
|
|
312
349
|
},
|
|
313
350
|
hover: {
|
|
314
351
|
backgroundColor: semanticColors.purple[100],
|
|
315
|
-
textColor: semanticColors.purple[
|
|
316
|
-
borderColor: ""
|
|
352
|
+
textColor: semanticColors.purple[500],
|
|
353
|
+
borderColor: "",
|
|
354
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayPurple8
|
|
317
355
|
},
|
|
318
356
|
active: {
|
|
319
|
-
backgroundColor: semanticColors.purple[
|
|
320
|
-
textColor: semanticColors.purple[
|
|
321
|
-
borderColor: ""
|
|
357
|
+
backgroundColor: semanticColors.purple[200],
|
|
358
|
+
textColor: semanticColors.purple[500],
|
|
359
|
+
borderColor: "",
|
|
360
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayPurple8
|
|
322
361
|
},
|
|
323
362
|
disabled: {
|
|
324
363
|
textColor: semanticColors.grey[600],
|
|
325
364
|
backgroundColor: semanticColors.grey[300],
|
|
326
|
-
borderColor: ""
|
|
365
|
+
borderColor: "",
|
|
366
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayPurple8
|
|
327
367
|
}
|
|
328
368
|
},
|
|
329
369
|
cancel: {
|
|
@@ -331,22 +371,26 @@ const theme = (() => {
|
|
|
331
371
|
default: {
|
|
332
372
|
backgroundColor: semanticColors.red[50],
|
|
333
373
|
textColor: semanticColors.red[600],
|
|
334
|
-
borderColor: ""
|
|
374
|
+
borderColor: "",
|
|
375
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayRed8
|
|
335
376
|
},
|
|
336
377
|
hover: {
|
|
337
378
|
backgroundColor: semanticColors.red[100],
|
|
338
379
|
textColor: semanticColors.red[700],
|
|
339
|
-
borderColor: ""
|
|
380
|
+
borderColor: "",
|
|
381
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayRed8
|
|
340
382
|
},
|
|
341
383
|
active: {
|
|
342
384
|
backgroundColor: semanticColors.red[200],
|
|
343
385
|
textColor: semanticColors.red[800],
|
|
344
|
-
borderColor: ""
|
|
386
|
+
borderColor: "",
|
|
387
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayRed8
|
|
345
388
|
},
|
|
346
389
|
disabled: {
|
|
347
|
-
textColor: semanticColors.
|
|
348
|
-
backgroundColor: semanticColors.
|
|
349
|
-
borderColor: ""
|
|
390
|
+
textColor: semanticColors.red[200],
|
|
391
|
+
backgroundColor: semanticColors.red[25],
|
|
392
|
+
borderColor: "",
|
|
393
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
350
394
|
}
|
|
351
395
|
}
|
|
352
396
|
},
|
|
@@ -357,22 +401,26 @@ const theme = (() => {
|
|
|
357
401
|
default: {
|
|
358
402
|
backgroundColor: colors.white,
|
|
359
403
|
textColor: semanticColors.purple[500],
|
|
360
|
-
borderColor: semanticColors.
|
|
404
|
+
borderColor: semanticColors.teal[200],
|
|
405
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
361
406
|
},
|
|
362
407
|
hover: {
|
|
363
|
-
backgroundColor:
|
|
364
|
-
textColor: semanticColors.purple[
|
|
365
|
-
borderColor: semanticColors.
|
|
408
|
+
backgroundColor: colors.white,
|
|
409
|
+
textColor: semanticColors.purple[500],
|
|
410
|
+
borderColor: semanticColors.purple[300],
|
|
411
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
366
412
|
},
|
|
367
413
|
active: {
|
|
368
|
-
backgroundColor:
|
|
369
|
-
textColor: semanticColors.purple[
|
|
370
|
-
borderColor: semanticColors.
|
|
414
|
+
backgroundColor: colors.white,
|
|
415
|
+
textColor: semanticColors.purple[500],
|
|
416
|
+
borderColor: semanticColors.purple[400],
|
|
417
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
371
418
|
},
|
|
372
419
|
disabled: {
|
|
373
420
|
textColor: semanticColors.grey[600],
|
|
374
|
-
backgroundColor:
|
|
375
|
-
borderColor: semanticColors.grey[
|
|
421
|
+
backgroundColor: colors.white,
|
|
422
|
+
borderColor: semanticColors.grey[500],
|
|
423
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
376
424
|
}
|
|
377
425
|
},
|
|
378
426
|
cancel: {
|
|
@@ -380,22 +428,26 @@ const theme = (() => {
|
|
|
380
428
|
default: {
|
|
381
429
|
backgroundColor: colors.white,
|
|
382
430
|
textColor: semanticColors.red[600],
|
|
383
|
-
borderColor: semanticColors.
|
|
431
|
+
borderColor: semanticColors.teal[200],
|
|
432
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
384
433
|
},
|
|
385
434
|
hover: {
|
|
386
|
-
backgroundColor:
|
|
435
|
+
backgroundColor: colors.white,
|
|
387
436
|
textColor: semanticColors.red[700],
|
|
388
|
-
borderColor: semanticColors.
|
|
437
|
+
borderColor: semanticColors.red[700],
|
|
438
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
389
439
|
},
|
|
390
440
|
active: {
|
|
391
|
-
backgroundColor:
|
|
441
|
+
backgroundColor: colors.white,
|
|
392
442
|
textColor: semanticColors.red[800],
|
|
393
|
-
borderColor: semanticColors.
|
|
443
|
+
borderColor: semanticColors.red[800],
|
|
444
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
394
445
|
},
|
|
395
446
|
disabled: {
|
|
396
|
-
textColor: semanticColors.
|
|
397
|
-
backgroundColor:
|
|
398
|
-
borderColor: semanticColors.
|
|
447
|
+
textColor: semanticColors.red[200],
|
|
448
|
+
backgroundColor: colors.white,
|
|
449
|
+
borderColor: semanticColors.teal[100],
|
|
450
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
399
451
|
}
|
|
400
452
|
}
|
|
401
453
|
},
|
|
@@ -406,22 +458,26 @@ const theme = (() => {
|
|
|
406
458
|
default: {
|
|
407
459
|
backgroundColor: colors.white,
|
|
408
460
|
textColor: semanticColors.purple[500],
|
|
409
|
-
borderColor: ""
|
|
461
|
+
borderColor: "",
|
|
462
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
410
463
|
},
|
|
411
464
|
hover: {
|
|
412
|
-
backgroundColor: semanticColors.purple[
|
|
413
|
-
textColor: semanticColors.purple[
|
|
414
|
-
borderColor: ""
|
|
465
|
+
backgroundColor: semanticColors.purple[100],
|
|
466
|
+
textColor: semanticColors.purple[500],
|
|
467
|
+
borderColor: "",
|
|
468
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20
|
|
415
469
|
},
|
|
416
470
|
active: {
|
|
417
|
-
backgroundColor: semanticColors.purple[
|
|
418
|
-
textColor: semanticColors.purple[
|
|
419
|
-
borderColor: ""
|
|
471
|
+
backgroundColor: semanticColors.purple[200],
|
|
472
|
+
textColor: semanticColors.purple[500],
|
|
473
|
+
borderColor: "",
|
|
474
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20
|
|
420
475
|
},
|
|
421
476
|
disabled: {
|
|
422
477
|
textColor: semanticColors.grey[600],
|
|
423
|
-
backgroundColor:
|
|
424
|
-
borderColor: ""
|
|
478
|
+
backgroundColor: colors.white,
|
|
479
|
+
borderColor: "",
|
|
480
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
425
481
|
}
|
|
426
482
|
},
|
|
427
483
|
cancel: {
|
|
@@ -429,44 +485,52 @@ const theme = (() => {
|
|
|
429
485
|
default: {
|
|
430
486
|
backgroundColor: colors.white,
|
|
431
487
|
textColor: semanticColors.red[600],
|
|
432
|
-
borderColor: ""
|
|
488
|
+
borderColor: "",
|
|
489
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
433
490
|
},
|
|
434
491
|
hover: {
|
|
435
492
|
backgroundColor: semanticColors.red[100],
|
|
436
493
|
textColor: semanticColors.red[700],
|
|
437
|
-
borderColor: ""
|
|
494
|
+
borderColor: "",
|
|
495
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayRed8
|
|
438
496
|
},
|
|
439
497
|
active: {
|
|
440
498
|
backgroundColor: semanticColors.red[200],
|
|
441
499
|
textColor: semanticColors.red[800],
|
|
442
|
-
borderColor: ""
|
|
500
|
+
borderColor: "",
|
|
501
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayRed8
|
|
443
502
|
},
|
|
444
503
|
disabled: {
|
|
445
|
-
textColor: semanticColors.
|
|
446
|
-
backgroundColor:
|
|
447
|
-
borderColor: ""
|
|
504
|
+
textColor: semanticColors.red[200],
|
|
505
|
+
backgroundColor: colors.white,
|
|
506
|
+
borderColor: "",
|
|
507
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
448
508
|
}
|
|
449
509
|
},
|
|
450
510
|
tertiary: {
|
|
451
511
|
default: {
|
|
452
512
|
backgroundColor: "transparent",
|
|
453
513
|
textColor: semanticColors.teal[800],
|
|
454
|
-
borderColor: semanticColors.teal[100]
|
|
514
|
+
borderColor: semanticColors.teal[100],
|
|
515
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10
|
|
455
516
|
},
|
|
456
517
|
hover: {
|
|
457
518
|
backgroundColor: semanticColors.grey[200],
|
|
458
519
|
textColor: semanticColors.teal[800],
|
|
459
|
-
borderColor: semanticColors.teal[100]
|
|
520
|
+
borderColor: semanticColors.teal[100],
|
|
521
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20
|
|
460
522
|
},
|
|
461
523
|
active: {
|
|
462
524
|
backgroundColor: semanticColors.grey[400],
|
|
463
525
|
textColor: semanticColors.teal[800],
|
|
464
|
-
borderColor: semanticColors.teal[100]
|
|
526
|
+
borderColor: semanticColors.teal[100],
|
|
527
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20
|
|
465
528
|
},
|
|
466
529
|
disabled: {
|
|
467
530
|
textColor: semanticColors.grey[600],
|
|
468
531
|
backgroundColor: semanticColors.grey[500],
|
|
469
|
-
borderColor: semanticColors.grey[
|
|
532
|
+
borderColor: semanticColors.grey[500],
|
|
533
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
470
534
|
}
|
|
471
535
|
}
|
|
472
536
|
},
|
|
@@ -475,22 +539,26 @@ const theme = (() => {
|
|
|
475
539
|
default: {
|
|
476
540
|
backgroundColor: colors.white,
|
|
477
541
|
textColor: semanticColors.teal[800],
|
|
478
|
-
borderColor: semanticColors.teal[100]
|
|
542
|
+
borderColor: semanticColors.teal[100],
|
|
543
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10
|
|
479
544
|
},
|
|
480
545
|
hover: {
|
|
481
546
|
backgroundColor: semanticColors.teal[50],
|
|
482
547
|
textColor: semanticColors.teal[800],
|
|
483
|
-
borderColor: semanticColors.teal[100]
|
|
548
|
+
borderColor: semanticColors.teal[100],
|
|
549
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20
|
|
484
550
|
},
|
|
485
551
|
active: {
|
|
486
552
|
backgroundColor: semanticColors.teal[100],
|
|
487
553
|
textColor: semanticColors.teal[800],
|
|
488
|
-
borderColor: semanticColors.teal[100]
|
|
554
|
+
borderColor: semanticColors.teal[100],
|
|
555
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20
|
|
489
556
|
},
|
|
490
557
|
disabled: {
|
|
491
558
|
textColor: semanticColors.grey[600],
|
|
492
559
|
backgroundColor: semanticColors.grey[300],
|
|
493
|
-
borderColor:
|
|
560
|
+
borderColor: semanticColors.grey[500],
|
|
561
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
494
562
|
}
|
|
495
563
|
}
|
|
496
564
|
},
|
|
@@ -499,22 +567,26 @@ const theme = (() => {
|
|
|
499
567
|
default: {
|
|
500
568
|
backgroundColor: semanticColors.yellow[200],
|
|
501
569
|
textColor: semanticColors.teal[800],
|
|
502
|
-
borderColor: ""
|
|
570
|
+
borderColor: "",
|
|
571
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10
|
|
503
572
|
},
|
|
504
573
|
hover: {
|
|
505
574
|
backgroundColor: semanticColors.yellow[200],
|
|
506
575
|
textColor: semanticColors.teal[800],
|
|
507
|
-
borderColor: ""
|
|
576
|
+
borderColor: "",
|
|
577
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10
|
|
508
578
|
},
|
|
509
579
|
active: {
|
|
510
580
|
backgroundColor: semanticColors.yellow[200],
|
|
511
581
|
textColor: semanticColors.teal[800],
|
|
512
|
-
borderColor: ""
|
|
582
|
+
borderColor: "",
|
|
583
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10
|
|
513
584
|
},
|
|
514
585
|
disabled: {
|
|
515
586
|
backgroundColor: semanticColors.yellow[200],
|
|
516
587
|
textColor: semanticColors.teal[400],
|
|
517
|
-
borderColor: ""
|
|
588
|
+
borderColor: "",
|
|
589
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
518
590
|
}
|
|
519
591
|
}
|
|
520
592
|
},
|
|
@@ -523,22 +595,26 @@ const theme = (() => {
|
|
|
523
595
|
default: {
|
|
524
596
|
backgroundColor: semanticColors.blue[200],
|
|
525
597
|
textColor: semanticColors.teal[800],
|
|
526
|
-
borderColor: ""
|
|
598
|
+
borderColor: "",
|
|
599
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10
|
|
527
600
|
},
|
|
528
601
|
hover: {
|
|
529
602
|
backgroundColor: semanticColors.blue[200],
|
|
530
603
|
textColor: semanticColors.teal[800],
|
|
531
|
-
borderColor: ""
|
|
604
|
+
borderColor: "",
|
|
605
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10
|
|
532
606
|
},
|
|
533
607
|
active: {
|
|
534
608
|
backgroundColor: semanticColors.blue[200],
|
|
535
609
|
textColor: semanticColors.teal[800],
|
|
536
|
-
borderColor: ""
|
|
610
|
+
borderColor: "",
|
|
611
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10
|
|
537
612
|
},
|
|
538
613
|
disabled: {
|
|
539
614
|
backgroundColor: semanticColors.blue[200],
|
|
540
615
|
textColor: semanticColors.teal[400],
|
|
541
|
-
borderColor: ""
|
|
616
|
+
borderColor: "",
|
|
617
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
542
618
|
}
|
|
543
619
|
}
|
|
544
620
|
}
|
|
@@ -550,47 +626,55 @@ const theme = (() => {
|
|
|
550
626
|
main: {
|
|
551
627
|
// variant: this is the default variant
|
|
552
628
|
default: {
|
|
553
|
-
backgroundColor:
|
|
629
|
+
backgroundColor: semanticColors.teal[25],
|
|
554
630
|
textColor: semanticColors.teal[800],
|
|
555
|
-
borderColor: ""
|
|
631
|
+
borderColor: "",
|
|
632
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10
|
|
556
633
|
},
|
|
557
634
|
hover: {
|
|
558
|
-
backgroundColor: semanticColors.
|
|
635
|
+
backgroundColor: semanticColors.teal[100],
|
|
559
636
|
textColor: semanticColors.teal[800],
|
|
560
|
-
borderColor: ""
|
|
637
|
+
borderColor: "",
|
|
638
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20
|
|
561
639
|
},
|
|
562
640
|
active: {
|
|
563
|
-
backgroundColor: semanticColors.
|
|
641
|
+
backgroundColor: semanticColors.teal[200],
|
|
564
642
|
textColor: semanticColors.teal[800],
|
|
565
|
-
borderColor: ""
|
|
643
|
+
borderColor: "",
|
|
644
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20
|
|
566
645
|
},
|
|
567
646
|
disabled: {
|
|
568
|
-
textColor: semanticColors.
|
|
569
|
-
backgroundColor: semanticColors.
|
|
570
|
-
borderColor: ""
|
|
647
|
+
textColor: semanticColors.teal[800],
|
|
648
|
+
backgroundColor: semanticColors.transparentWhite[300],
|
|
649
|
+
borderColor: "",
|
|
650
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayBlack10
|
|
571
651
|
}
|
|
572
652
|
},
|
|
573
653
|
cancel: {
|
|
574
654
|
// variant
|
|
575
655
|
default: {
|
|
576
|
-
backgroundColor: semanticColors.red[
|
|
577
|
-
textColor:
|
|
578
|
-
borderColor: ""
|
|
656
|
+
backgroundColor: semanticColors.red[600],
|
|
657
|
+
textColor: colors.white,
|
|
658
|
+
borderColor: "",
|
|
659
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
579
660
|
},
|
|
580
661
|
hover: {
|
|
581
|
-
backgroundColor: semanticColors.red[
|
|
582
|
-
textColor:
|
|
583
|
-
borderColor: ""
|
|
662
|
+
backgroundColor: semanticColors.red[700],
|
|
663
|
+
textColor: colors.white,
|
|
664
|
+
borderColor: "",
|
|
665
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
584
666
|
},
|
|
585
667
|
active: {
|
|
586
|
-
backgroundColor: semanticColors.red[
|
|
587
|
-
textColor:
|
|
588
|
-
borderColor: ""
|
|
668
|
+
backgroundColor: semanticColors.red[800],
|
|
669
|
+
textColor: colors.white,
|
|
670
|
+
borderColor: "",
|
|
671
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
589
672
|
},
|
|
590
673
|
disabled: {
|
|
591
|
-
backgroundColor: semanticColors.
|
|
592
|
-
textColor: semanticColors.
|
|
593
|
-
borderColor: ""
|
|
674
|
+
backgroundColor: semanticColors.transparentRed[200],
|
|
675
|
+
textColor: semanticColors.transparentWhite[400],
|
|
676
|
+
borderColor: "",
|
|
677
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
594
678
|
}
|
|
595
679
|
}
|
|
596
680
|
},
|
|
@@ -601,22 +685,26 @@ const theme = (() => {
|
|
|
601
685
|
default: {
|
|
602
686
|
backgroundColor: semanticColors.teal[800],
|
|
603
687
|
textColor: semanticColors.purple[50],
|
|
604
|
-
borderColor: ""
|
|
688
|
+
borderColor: "",
|
|
689
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10
|
|
605
690
|
},
|
|
606
691
|
hover: {
|
|
607
|
-
backgroundColor: semanticColors.
|
|
692
|
+
backgroundColor: semanticColors.transparentTeal[400],
|
|
608
693
|
textColor: semanticColors.purple[50],
|
|
609
|
-
borderColor: ""
|
|
694
|
+
borderColor: "",
|
|
695
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20
|
|
610
696
|
},
|
|
611
697
|
active: {
|
|
612
|
-
backgroundColor: semanticColors.
|
|
698
|
+
backgroundColor: semanticColors.transparentTeal[600],
|
|
613
699
|
textColor: semanticColors.purple[50],
|
|
614
|
-
borderColor: ""
|
|
700
|
+
borderColor: "",
|
|
701
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayWhite20
|
|
615
702
|
},
|
|
616
703
|
disabled: {
|
|
617
|
-
textColor: semanticColors.grey[
|
|
618
|
-
backgroundColor: semanticColors.
|
|
619
|
-
borderColor: ""
|
|
704
|
+
textColor: semanticColors.grey[800],
|
|
705
|
+
backgroundColor: semanticColors.transparentTeal[200],
|
|
706
|
+
borderColor: "",
|
|
707
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10
|
|
620
708
|
}
|
|
621
709
|
},
|
|
622
710
|
cancel: {
|
|
@@ -624,22 +712,26 @@ const theme = (() => {
|
|
|
624
712
|
default: {
|
|
625
713
|
backgroundColor: semanticColors.red[800],
|
|
626
714
|
textColor: semanticColors.red[400],
|
|
627
|
-
borderColor: ""
|
|
715
|
+
borderColor: "",
|
|
716
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayRed8
|
|
628
717
|
},
|
|
629
718
|
hover: {
|
|
630
719
|
backgroundColor: semanticColors.red[700],
|
|
631
720
|
textColor: semanticColors.red[300],
|
|
632
|
-
borderColor: ""
|
|
721
|
+
borderColor: "",
|
|
722
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayRed8
|
|
633
723
|
},
|
|
634
724
|
active: {
|
|
635
725
|
backgroundColor: semanticColors.red[600],
|
|
636
726
|
textColor: semanticColors.red[200],
|
|
637
|
-
borderColor: ""
|
|
727
|
+
borderColor: "",
|
|
728
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayRed8
|
|
638
729
|
},
|
|
639
730
|
disabled: {
|
|
640
|
-
textColor: semanticColors.
|
|
641
|
-
backgroundColor: semanticColors.
|
|
642
|
-
borderColor: ""
|
|
731
|
+
textColor: semanticColors.transparentWhite[200],
|
|
732
|
+
backgroundColor: semanticColors.transparentRed[100],
|
|
733
|
+
borderColor: "",
|
|
734
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
643
735
|
}
|
|
644
736
|
}
|
|
645
737
|
},
|
|
@@ -650,45 +742,53 @@ const theme = (() => {
|
|
|
650
742
|
default: {
|
|
651
743
|
backgroundColor: "transparent",
|
|
652
744
|
textColor: semanticColors.purple[50],
|
|
653
|
-
borderColor: semanticColors.teal[
|
|
745
|
+
borderColor: semanticColors.teal[600],
|
|
746
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10
|
|
654
747
|
},
|
|
655
748
|
hover: {
|
|
656
|
-
backgroundColor: semanticColors.
|
|
749
|
+
backgroundColor: semanticColors.transparentTeal[400],
|
|
657
750
|
textColor: semanticColors.purple[50],
|
|
658
|
-
borderColor: semanticColors.teal[
|
|
751
|
+
borderColor: semanticColors.teal[500],
|
|
752
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10
|
|
659
753
|
},
|
|
660
754
|
active: {
|
|
661
|
-
backgroundColor: semanticColors.
|
|
755
|
+
backgroundColor: semanticColors.transparentTeal[600],
|
|
662
756
|
textColor: semanticColors.purple[50],
|
|
663
|
-
borderColor: semanticColors.teal[
|
|
757
|
+
borderColor: semanticColors.teal[400],
|
|
758
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10
|
|
664
759
|
},
|
|
665
760
|
disabled: {
|
|
666
|
-
textColor: semanticColors.grey[
|
|
667
|
-
backgroundColor: semanticColors.
|
|
668
|
-
borderColor: semanticColors.grey[
|
|
761
|
+
textColor: semanticColors.grey[800],
|
|
762
|
+
backgroundColor: semanticColors.transparentTeal[100],
|
|
763
|
+
borderColor: semanticColors.grey[900],
|
|
764
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10
|
|
669
765
|
}
|
|
670
766
|
},
|
|
671
767
|
cancel: {
|
|
672
768
|
// variant
|
|
673
769
|
default: {
|
|
674
|
-
backgroundColor:
|
|
675
|
-
textColor: semanticColors.red[
|
|
676
|
-
borderColor: semanticColors.
|
|
770
|
+
backgroundColor: "transparent",
|
|
771
|
+
textColor: semanticColors.red[500],
|
|
772
|
+
borderColor: semanticColors.transparentTeal[500],
|
|
773
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
677
774
|
},
|
|
678
775
|
hover: {
|
|
679
|
-
backgroundColor: semanticColors.
|
|
680
|
-
textColor: semanticColors.red[
|
|
681
|
-
borderColor: semanticColors.
|
|
776
|
+
backgroundColor: semanticColors.transparentTeal[200],
|
|
777
|
+
textColor: semanticColors.red[500],
|
|
778
|
+
borderColor: semanticColors.transparentTeal[400],
|
|
779
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
682
780
|
},
|
|
683
781
|
active: {
|
|
684
|
-
backgroundColor: semanticColors.
|
|
685
|
-
textColor: semanticColors.red[
|
|
686
|
-
borderColor: semanticColors.
|
|
782
|
+
backgroundColor: semanticColors.transparentTeal[300],
|
|
783
|
+
textColor: semanticColors.red[500],
|
|
784
|
+
borderColor: semanticColors.transparentTeal[300],
|
|
785
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
687
786
|
},
|
|
688
787
|
disabled: {
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
borderColor: semanticColors.
|
|
788
|
+
backgroundColor: "transparent",
|
|
789
|
+
textColor: semanticColors.transparentRed[500],
|
|
790
|
+
borderColor: semanticColors.transparentTeal[300],
|
|
791
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
692
792
|
}
|
|
693
793
|
}
|
|
694
794
|
},
|
|
@@ -699,45 +799,53 @@ const theme = (() => {
|
|
|
699
799
|
default: {
|
|
700
800
|
backgroundColor: "transparent",
|
|
701
801
|
textColor: semanticColors.purple[50],
|
|
702
|
-
borderColor: ""
|
|
802
|
+
borderColor: "",
|
|
803
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10
|
|
703
804
|
},
|
|
704
805
|
hover: {
|
|
705
|
-
backgroundColor: semanticColors.
|
|
806
|
+
backgroundColor: semanticColors.transparentTeal[400],
|
|
706
807
|
textColor: semanticColors.purple[50],
|
|
707
|
-
borderColor: ""
|
|
808
|
+
borderColor: "",
|
|
809
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10
|
|
708
810
|
},
|
|
709
811
|
active: {
|
|
710
|
-
backgroundColor: semanticColors.
|
|
812
|
+
backgroundColor: semanticColors.transparentTeal[600],
|
|
711
813
|
textColor: semanticColors.purple[50],
|
|
712
|
-
borderColor: ""
|
|
814
|
+
borderColor: "",
|
|
815
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayWhite10
|
|
713
816
|
},
|
|
714
817
|
disabled: {
|
|
715
|
-
textColor: semanticColors.grey[
|
|
716
|
-
backgroundColor: semanticColors.
|
|
717
|
-
borderColor: ""
|
|
818
|
+
textColor: semanticColors.grey[800],
|
|
819
|
+
backgroundColor: semanticColors.transparentTeal[100],
|
|
820
|
+
borderColor: "",
|
|
821
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
718
822
|
}
|
|
719
823
|
},
|
|
720
824
|
cancel: {
|
|
721
825
|
// variant
|
|
722
826
|
default: {
|
|
723
|
-
backgroundColor:
|
|
724
|
-
textColor: semanticColors.red[
|
|
725
|
-
borderColor: ""
|
|
827
|
+
backgroundColor: "transparent",
|
|
828
|
+
textColor: semanticColors.red[500],
|
|
829
|
+
borderColor: "",
|
|
830
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
726
831
|
},
|
|
727
832
|
hover: {
|
|
728
|
-
backgroundColor: semanticColors.
|
|
729
|
-
textColor: semanticColors.red[
|
|
730
|
-
borderColor: ""
|
|
833
|
+
backgroundColor: semanticColors.transparentTeal[200],
|
|
834
|
+
textColor: semanticColors.red[500],
|
|
835
|
+
borderColor: "",
|
|
836
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
731
837
|
},
|
|
732
838
|
active: {
|
|
733
|
-
backgroundColor: semanticColors.
|
|
734
|
-
textColor: semanticColors.red[
|
|
735
|
-
borderColor: ""
|
|
839
|
+
backgroundColor: semanticColors.transparentTeal[300],
|
|
840
|
+
textColor: semanticColors.red[500],
|
|
841
|
+
borderColor: "",
|
|
842
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
736
843
|
},
|
|
737
844
|
disabled: {
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
borderColor: ""
|
|
845
|
+
backgroundColor: "transparent",
|
|
846
|
+
textColor: semanticColors.transparentRed[500],
|
|
847
|
+
borderColor: "",
|
|
848
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
741
849
|
}
|
|
742
850
|
}
|
|
743
851
|
},
|
|
@@ -746,22 +854,26 @@ const theme = (() => {
|
|
|
746
854
|
default: {
|
|
747
855
|
backgroundColor: colors.white,
|
|
748
856
|
textColor: semanticColors.teal[800],
|
|
749
|
-
borderColor: semanticColors.teal[100]
|
|
857
|
+
borderColor: semanticColors.teal[100],
|
|
858
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayTeal10
|
|
750
859
|
},
|
|
751
860
|
hover: {
|
|
752
861
|
backgroundColor: semanticColors.teal[100],
|
|
753
862
|
textColor: semanticColors.teal[800],
|
|
754
|
-
borderColor: semanticColors.teal[100]
|
|
863
|
+
borderColor: semanticColors.teal[100],
|
|
864
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20
|
|
755
865
|
},
|
|
756
866
|
active: {
|
|
757
867
|
backgroundColor: semanticColors.teal[100],
|
|
758
868
|
textColor: semanticColors.teal[800],
|
|
759
|
-
borderColor: semanticColors.teal[100]
|
|
869
|
+
borderColor: semanticColors.teal[100],
|
|
870
|
+
iconBackgroundColor: semanticColors.buttonIcon.overlayTeal20
|
|
760
871
|
},
|
|
761
872
|
disabled: {
|
|
762
873
|
textColor: semanticColors.grey[600],
|
|
763
874
|
backgroundColor: semanticColors.grey[300],
|
|
764
|
-
borderColor: ""
|
|
875
|
+
borderColor: "",
|
|
876
|
+
iconBackgroundColor: semanticColors.buttonIcon.none
|
|
765
877
|
}
|
|
766
878
|
}
|
|
767
879
|
}
|