@agorapulse/ui-theme 16.0.2 → 16.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/agorapulse-ui-theme-16.1.0.tgz +0 -0
  2. package/assets/desktop_variables.css +264 -2
  3. package/assets/mobile_variables.css +264 -2
  4. package/package.json +1 -1
  5. package/src/tokens/components/badge.json +53 -0
  6. package/src/tokens/components/counter.json +108 -0
  7. package/src/tokens/components/input.json +294 -0
  8. package/src/tokens/components/label.json +56 -0
  9. package/src/tokens/components/select.json +279 -0
  10. package/src/tokens/components/status-card.json +187 -0
  11. package/src/tokens/components/status.json +120 -0
  12. package/src/tokens/components/tag.json +181 -0
  13. package/src/tokens/reference/color.json +1 -1
  14. package/src/tokens/system/color.json +1 -1
  15. package/agorapulse-ui-theme-16.0.2.tgz +0 -0
package/agorapulse-ui-theme-16.1.0.tgz ADDED
Binary file
package/assets/desktop_variables.css CHANGED
@@ -28,7 +28,7 @@
28
28
  --ref-color-soft-blue-40: #C0DBF4;
29
29
  --ref-color-soft-blue-60: #A0C8EF;
30
30
  --ref-color-soft-blue-80: #78B1E8;
31
- --ref-color-soft-blue-100: #2873BA;
31
+ --ref-color-soft-blue-100: #61A4E4;
32
32
  --ref-color-soft-blue-150: #2873BA;
33
33
  --ref-color-grey-10: #EAECEF;
34
34
  --ref-color-grey-20: #D6DAE0;
@@ -136,7 +136,7 @@
136
136
  --sys-border-radius-sm: 4px;
137
137
  --sys-border-radius-md: 4px;
138
138
  --sys-border-radius-lg: 8px;
139
- --sys-color-main-default-bg: #FF6726;
139
+ --sys-color-main-default-bg-default: #FF6726;
140
140
  --sys-color-main-default-bg-hover: #FF7E46;
141
141
  --sys-color-main-default-bg-clicked: #FFA47D;
142
142
  --sys-color-main-default-bg-disabled: #FFE1D4;
@@ -238,6 +238,17 @@
238
238
  --sys-icon-button-padding: 10px;
239
239
  --sys-icon-button-width: 36px;
240
240
  --sys-icon-button-height: 36px;
241
+ --comp-badge-text-style-font-family: Averta;
242
+ --comp-badge-text-style-size: 12px;
243
+ --comp-badge-text-style-font-weight: 700;
244
+ --comp-badge-text-style-line-height: 16px;
245
+ --comp-badge-height: 16px;
246
+ --comp-badge-padding-left: 2px;
247
+ --comp-badge-padding-right: 2px;
248
+ --comp-badge-orange-color: #FFFFFF;
249
+ --comp-badge-orange-background-color: #FF6726;
250
+ --comp-badge-blue-color: #0E72D6;
251
+ --comp-badge-blue-background-color: #E8F4FF;
241
252
  --comp-button-text-size: 14px;
242
253
  --comp-button-text-font-family: Averta;
243
254
  --comp-button-text-weight: 700;
@@ -247,6 +258,28 @@
247
258
  --comp-button-height: 36px;
248
259
  --comp-button-border-radius: 4px;
249
260
  --comp-button-spacing: 8px;
261
+ --comp-counter-text-style-font-family: Averta;
262
+ --comp-counter-text-style-size: 12px;
263
+ --comp-counter-text-style-font-weight: 700;
264
+ --comp-counter-text-style-line-height: 16px;
265
+ --comp-counter-big-text-style-font-family: Averta;
266
+ --comp-counter-big-text-style-size: 14px;
267
+ --comp-counter-big-text-style-font-weight: 700;
268
+ --comp-counter-big-text-style-line-height: 18px;
269
+ --comp-counter-big-height: 18px;
270
+ --comp-counter-height: 16px;
271
+ --comp-counter-border-radius: 2px;
272
+ --comp-counter-notif-border-radius: 16px;
273
+ --comp-counter-notif-min-width: 16px;
274
+ --comp-counter-notif-color: #FFFFFF;
275
+ --comp-counter-notif-background-color: #FF6726;
276
+ --comp-counter-orange-color: #FF6726;
277
+ --comp-counter-orange-with-background-color: #FFFFFF;
278
+ --comp-counter-orange-with-background-background-color: #FF6726;
279
+ --comp-counter-blue-color: #0E72D6;
280
+ --comp-counter-blue-with-background-background-color: #E8F4FF;
281
+ --comp-counter-grey-color: #344563;
282
+ --comp-counter-grey-with-background-background-color: #EAECEF;
250
283
  --comp-icon-button-padding: 10px;
251
284
  --comp-icon-button-width: 36px;
252
285
  --comp-icon-button-height: 36px;
@@ -280,6 +313,82 @@
280
313
  --comp-infobox-success-background-color: #DAF1DD;
281
314
  --comp-infobox-success-border-left-color: #0F821D;
282
315
  --comp-infobox-success-icon-color: #0F821D;
316
+ --comp-input-width-default: 256px;
317
+ --comp-input-height: 36px;
318
+ --comp-input-padding-horizontal: 12px;
319
+ --comp-input-spacing-horizontal: 8px;
320
+ --comp-input-border-radius: 4px;
321
+ --comp-input-border-default-color: #858FA1;
322
+ --comp-input-border-hover-color: #5D6A82;
323
+ --comp-input-border-focused-color: #178DFE;
324
+ --comp-input-border-error-color: #E81313;
325
+ --comp-input-border-success-color: #45B854;
326
+ --comp-input-border-disabled-color: #D6DAE0;
327
+ --comp-input-fill-color: #FFFFFF;
328
+ --comp-input-fill-disabled-color: #D6DAE0;
329
+ --comp-input-icon-size: 16px;
330
+ --comp-input-icon-color: #858FA1;
331
+ --comp-input-text-font-family: Averta;
332
+ --comp-input-text-size: 14px;
333
+ --comp-input-text-font-weight: 400;
334
+ --comp-input-text-line-height: 18px;
335
+ --comp-input-text-default-color: #344563;
336
+ --comp-input-text-placeholder-color: #858FA1;
337
+ --comp-forms-label-font-family: Averta;
338
+ --comp-forms-label-size: 14px;
339
+ --comp-forms-label-font-weight: 400;
340
+ --comp-forms-label-line-height: 18px;
341
+ --comp-forms-label-text-color: #344563;
342
+ --comp-forms-label-description-text-font-family: Averta;
343
+ --comp-forms-label-description-text-size: 12px;
344
+ --comp-forms-label-description-text-font-weight: 400;
345
+ --comp-forms-label-description-text-line-height: 16px;
346
+ --comp-forms-label-description-text-color: #5D6A82;
347
+ --comp-forms-label-spacing-vertical: 4px;
348
+ --comp-forms-label-padding-bottom: 8px;
349
+ --comp-forms-status-icon-size: 16px;
350
+ --comp-forms-status-icon-error-color: #E81313;
351
+ --comp-forms-status-icon-success-color: #45B854;
352
+ --comp-forms-status-spacing-vertical: 4px;
353
+ --comp-forms-status-text-font-family: Averta;
354
+ --comp-forms-status-text-size: 14px;
355
+ --comp-forms-status-text-font-weight: 400;
356
+ --comp-forms-status-text-line-height: 18px;
357
+ --comp-forms-status-text-error-color: #E81313;
358
+ --comp-forms-status-text-success-color: #0F821D;
359
+ --comp-text-area-width-default: 256px;
360
+ --comp-text-area-height: 80px;
361
+ --comp-text-area-padding-horizontal: 12px;
362
+ --comp-text-area-spacing-horizontal: 8px;
363
+ --comp-text-area-border-radius: 4px;
364
+ --comp-text-area-border-default-color: #858FA1;
365
+ --comp-text-area-border-hover-color: #5D6A82;
366
+ --comp-text-area-border-focused-color: #178DFE;
367
+ --comp-text-area-border-error-color: #E81313;
368
+ --comp-text-area-border-success-color: #45B854;
369
+ --comp-text-area-border-disabled-color: #D6DAE0;
370
+ --comp-text-area-fill-color: #FFFFFF;
371
+ --comp-text-area-fill-disabled-color: #D6DAE0;
372
+ --comp-text-area-icon-size: 16px;
373
+ --comp-text-area-icon-color: #858FA1;
374
+ --comp-text-area-text-font-family: Averta;
375
+ --comp-text-area-text-size: 14px;
376
+ --comp-text-area-text-font-weight: 400;
377
+ --comp-text-area-text-line-height: 18px;
378
+ --comp-text-area-text-default-color: #344563;
379
+ --comp-text-area-text-placeholder-color: #858FA1;
380
+ --comp-label-text-style-font-family: Averta;
381
+ --comp-label-text-style-size: 14px;
382
+ --comp-label-text-style-font-weight: 400;
383
+ --comp-label-text-style-line-height: 18px;
384
+ --comp-label-text-color: #344563;
385
+ --comp-label-border-radius: 24px;
386
+ --comp-label-background-color: #D1E8FF;
387
+ --comp-label-height: 24px;
388
+ --comp-label-padding-left: 8px;
389
+ --comp-label-padding-right: 8px;
390
+ --comp-label-closable-spacing: 4px;
391
+ --comp-label-closable-padding-right: 2px;
283
392
  --comp-link-text-font-family: Averta;
284
393
  --comp-link-text-size: 14px;
285
394
  --comp-link-text-font-weight: 400;
@@ -308,6 +417,68 @@
308
417
  --comp-link-spacing: 4px;
309
418
  --comp-link-icon-size: 16px;
310
419
  --comp-radio-transition-duration: 250ms;
420
+ --comp-select-icon-focused-color: #178DFE;
421
+ --comp-select-inline-label-text-font-family: Averta;
422
+ --comp-select-inline-label-text-size: 14px;
423
+ --comp-select-inline-label-text-font-weight: 400;
424
+ --comp-select-inline-label-text-line-height: 18px;
425
+ --comp-select-inline-label-text-color: #5D6A82;
426
+ --comp-select-inline-separator-color: #AEB5C1;
427
+ --comp-select-one-line-height: 40px;
428
+ --comp-select-one-line-spacing: 8px;
429
+ --comp-select-one-line-padding-horizontal: 16px;
430
+ --comp-select-one-line-background-color: #FFFFFF;
431
+ --comp-select-one-line-text-font-family: Averta;
432
+ --comp-select-one-line-text-size: 14px;
433
+ --comp-select-one-line-text-font-weight: 400;
434
+ --comp-select-one-line-text-line-height: 18px;
435
+ --comp-select-one-line-text-color: #344563;
436
+ --comp-select-one-line-selected-text-font-family: Averta;
437
+ --comp-select-one-line-selected-text-size: 14px;
438
+ --comp-select-one-line-selected-text-font-weight: 700;
439
+ --comp-select-one-line-selected-text-line-height: 18px;
440
+ --comp-select-one-line-selectable-selected-text-font-family: Averta;
441
+ --comp-select-one-line-selectable-selected-text-size: 14px;
442
+ --comp-select-one-line-selectable-selected-text-font-weight: 700;
443
+ --comp-select-one-line-selectable-selected-text-line-height: 18px;
444
+ --comp-select-two-line-height: unset;
445
+ --comp-select-two-line-padding-vertical: 8px;
446
+ --comp-select-two-line-title-text-font-family: Averta;
447
+ --comp-select-two-line-title-text-size: 14px;
448
+ --comp-select-two-line-title-text-font-weight: 700;
449
+ --comp-select-two-line-title-text-line-height: 18px;
450
+ --comp-select-two-line-title-text-color: #344563;
451
+ --comp-select-two-line-title-spacing: 8px;
452
+ --comp-select-two-line-caption-text-font-family: Averta;
453
+ --comp-select-two-line-caption-text-size: 12px;
454
+ --comp-select-two-line-caption-text-font-weight: 400;
455
+ --comp-select-two-line-caption-text-line-height: 16px;
456
+ --comp-select-two-line-caption-text-color: #5D6A82;
457
+ --comp-select-group-padding-horizontal: 16px;
458
+ --comp-select-group-padding-vertical: 8px;
459
+ --comp-select-group-border-top-color: #EAECEF;
460
+ --comp-select-group-background-color: #F9F9FA;
461
+ --comp-select-group-selected-gap: 8px;
462
+ --comp-select-group-text-font-family: Averta;
463
+ --comp-select-group-text-size: 12px;
464
+ --comp-select-group-text-font-weight: 700;
465
+ --comp-select-group-text-line-height: 16px;
466
+ --comp-select-group-text-color: #344563;
467
+ --comp-select-separator-padding-horizontal: 8px;
468
+ --comp-select-separator-padding-vertical: 8px;
469
+ --comp-select-separator-color: #EAECEF;
470
+ --comp-select-padding-vertical: 8px;
471
+ --comp-select-background-color: #FFFFFF;
472
+ --comp-select-shadow: 0px 4px 6px -2px rgba(52, 69, 99, 0.15), 0px 4px 25px -2px rgba(52, 69, 99, 0.15);
473
+ --comp-select-search-bar-padding-horizontal: 8px;
474
+ --comp-select-search-bar-padding-bottom: 8px;
475
+ --comp-select-search-bar-margin-bottom: 8px;
476
+ --comp-select-search-bar-border-bottom-color: #EAECEF;
477
+ --comp-select-search-bar-bottom-link-margin-top: 12px;
478
+ --comp-select-search-bar-bottom-link-padding-horizontal: 16px;
479
+ --comp-select-search-bar-bottom-link-padding-top: 12px;
480
+ --comp-select-search-bar-bottom-link-padding-bottom: 4px;
481
+ --comp-select-search-bar-bottom-link-border-top-color: #EAECEF;
311
482
  --comp-split-button-text-size: 14px;
312
483
  --comp-split-button-text-font-family: Averta;
313
484
  --comp-split-button-text-weight: 700;
@@ -316,6 +487,97 @@
316
487
  --comp-split-button-padding-vertical: 16px;
317
488
  --comp-split-button-border-radius: 4px;
318
489
  --comp-split-button-spacing: 8px;
490
+ --comp-status-card-text-style-font-family: Averta;
491
+ --comp-status-card-text-style-size: 12px;
492
+ --comp-status-card-text-style-font-weight: 400;
493
+ --comp-status-card-text-style-line-height: 16px;
494
+ --comp-status-card-text-color: #344563;
495
+ --comp-status-card-user-text-style-font-family: Averta;
496
+ --comp-status-card-user-text-style-size: 12px;
497
+ --comp-status-card-user-text-style-font-weight: 700;
498
+ --comp-status-card-user-text-style-line-height: 16px;
499
+ --comp-status-card-caption-text-style-font-family: Averta;
500
+ --comp-status-card-caption-text-style-size: 12px;
501
+ --comp-status-card-caption-text-style-font-weight: 700;
502
+ --comp-status-card-caption-text-style-line-height: 16px;
503
+ --comp-status-card-caption-text-color: #5D6A82;
504
+ --comp-status-card-spacing-vertical: 8px;
505
+ --comp-status-card-spacing-horizontal: 8px;
506
+ --comp-status-card-content-spacing: 4px;
507
+ --comp-status-card-padding-vertical: 12px;
508
+ --comp-status-card-padding-horizontal: 8px;
509
+ --comp-status-card-green-icon-color: #45B854;
510
+ --comp-status-card-green-background-color: #ECF7ED;
511
+ --comp-status-card-green-border-color: #DAF1DD;
512
+ --comp-status-card-tag-orange-icon-color: #FBB500;
513
+ --comp-status-card-tag-orange-background-color: #FFF8E6;
514
+ --comp-status-card-tag-orange-border-color: #FEF0CC;
515
+ --comp-status-card-blue-icon-color: #178DFE;
516
+ --comp-status-card-blue-background-color: #E8F4FF;
517
+ --comp-status-card-blue-border-color: #D1E8FF;
518
+ --comp-status-card-red-icon-color: #E81313;
519
+ --comp-status-card-red-background-color: #FDE7E7;
520
+ --comp-status-card-red-border-color: #FAD0D0;
521
+ --comp-status-card-orange-icon-color: #FF6726;
522
+ --comp-status-card-orange-background-color: #FFEFE9;
523
+ --comp-status-card-orange-border-color: #FFE1D4;
524
+ --comp-status-card-grey-icon-color: #344563;
525
+ --comp-status-card-grey-background-color: #EAECEF;
526
+ --comp-status-card-grey-border-color: #D6DAE0;
527
+ --comp-status-text-style-font-family: Averta;
528
+ --comp-status-text-style-size: 12px;
529
+ --comp-status-text-style-font-weight: 400;
530
+ --comp-status-text-style-line-height: 16px;
531
+ --comp-status-padding-horizontal: 8px;
532
+ --comp-status-height: 24px;
533
+ --comp-status-spacing: 4px;
534
+ --comp-status-color: #344563;
535
+ --comp-status-green-background-color: #ECF7ED;
536
+ --comp-status-green-dot-background-color: #45B854;
537
+ --comp-status-tag-orange-background-color: #FFF8E6;
538
+ --comp-status-tag-orange-dot-background-color: #A66200;
539
+ --comp-status-red-background-color: #FDE7E7;
540
+ --comp-status-red-dot-background-color: #E81313;
541
+ --comp-status-blue-background-color: #E8F4FF;
542
+ --comp-status-blue-dot-background-color: #178DFE;
543
+ --comp-status-orange-background-color: #FFEFE9;
544
+ --comp-status-orange-dot-background-color: #FF6726;
545
+ --comp-status-grey-background-color: #EAECEF;
546
+ --comp-status-grey-dot-background-color: #344563;
547
+ --comp-tag-text-style-font-family: Averta;
548
+ --comp-tag-text-style-size: 14px;
549
+ --comp-tag-text-style-font-weight: 400;
550
+ --comp-tag-text-style-line-height: 18px;
551
+ --comp-tag-border-radius: 4px;
552
+ --comp-tag-spacing: 4px;
553
+ --comp-tag-height: 24px;
554
+ --comp-tag-padding-left: 4px;
555
+ --comp-tag-padding-right: 4px;
556
+ --comp-tag-closable-padding-right: 2px;
557
+ --comp-tag-blue-text-color: #0E72D6;
558
+ --comp-tag-blue-background-color: #E8F4FF;
559
+ --comp-tag-blue-border-color: #D1E8FF;
560
+ --comp-tag-blue-icon-color: #0E72D6;
561
+ --comp-tag-tag-orange-text-color: #A66200;
562
+ --comp-tag-tag-orange-background-color: #FFF8E6;
563
+ --comp-tag-tag-orange-border-color: #FEF0CC;
564
+ --comp-tag-tag-orange-icon-color: #A66200;
565
+ --comp-tag-menthol-text-color: #057E7A;
566
+ --comp-tag-menthol-background-color: #F1F9F8;
567
+ --comp-tag-menthol-border-color: #CFECEA;
568
+ --comp-tag-menthol-icon-color: #057E7A;
569
+ --comp-tag-grey-text-color: #344563;
570
+ --comp-tag-grey-background-color: #EAECEF;
571
+ --comp-tag-grey-border-color: #D6DAE0;
572
+ --comp-tag-grey-icon-color: #212E44;
573
+ --comp-tag-green-text-color: #0F821D;
574
+ --comp-tag-green-background-color: #ECF7ED;
575
+ --comp-tag-green-border-color: #DAF1DD;
576
+ --comp-tag-green-icon-color: #0F821D;
577
+ --comp-tag-red-text-color: #D80505;
578
+ --comp-tag-red-background-color: #FDE7E7;
579
+ --comp-tag-red-border-color: #FAD0D0;
580
+ --comp-tag-red-icon-color: #D80505;
319
581
  --comp-tooltip-text-style-font-family: Averta;
320
582
  --comp-tooltip-text-style-size: 14px;
321
583
  --comp-tooltip-text-style-weight: 400;
package/assets/mobile_variables.css CHANGED
@@ -28,7 +28,7 @@
28
28
  --ref-color-soft-blue-40: #C0DBF4;
29
29
  --ref-color-soft-blue-60: #A0C8EF;
30
30
  --ref-color-soft-blue-80: #78B1E8;
31
- --ref-color-soft-blue-100: #2873BA;
31
+ --ref-color-soft-blue-100: #61A4E4;
32
32
  --ref-color-soft-blue-150: #2873BA;
33
33
  --ref-color-grey-10: #EAECEF;
34
34
  --ref-color-grey-20: #D6DAE0;
@@ -136,7 +136,7 @@
136
136
  --sys-border-radius-sm: 4px;
137
137
  --sys-border-radius-md: 4px;
138
138
  --sys-border-radius-lg: 8px;
139
- --sys-color-main-default-bg: #FF6726;
139
+ --sys-color-main-default-bg-default: #FF6726;
140
140
  --sys-color-main-default-bg-hover: #FF7E46;
141
141
  --sys-color-main-default-bg-clicked: #FFA47D;
142
142
  --sys-color-main-default-bg-disabled: #FFE1D4;
@@ -238,6 +238,17 @@
238
238
  --sys-icon-button-padding: 8px;
239
239
  --sys-icon-button-width: 36px;
240
240
  --sys-icon-button-height: 36px;
241
+ --comp-badge-text-style-font-family: Averta;
242
+ --comp-badge-text-style-size: 12px;
243
+ --comp-badge-text-style-font-weight: 700;
244
+ --comp-badge-text-style-line-height: 16px;
245
+ --comp-badge-height: 16px;
246
+ --comp-badge-padding-left: 2px;
247
+ --comp-badge-padding-right: 2px;
248
+ --comp-badge-orange-color: #FFFFFF;
249
+ --comp-badge-orange-background-color: #FF6726;
250
+ --comp-badge-blue-color: #0E72D6;
251
+ --comp-badge-blue-background-color: #E8F4FF;
241
252
  --comp-button-text-size: 14px;
242
253
  --comp-button-text-font-family: Averta;
243
254
  --comp-button-text-weight: 700;
@@ -247,6 +258,28 @@
247
258
  --comp-button-height: 40px;
248
259
  --comp-button-border-radius: 4px;
249
260
  --comp-button-spacing: 8px;
261
+ --comp-counter-text-style-font-family: Averta;
262
+ --comp-counter-text-style-size: 12px;
263
+ --comp-counter-text-style-font-weight: 700;
264
+ --comp-counter-text-style-line-height: 16px;
265
+ --comp-counter-big-text-style-font-family: Averta;
266
+ --comp-counter-big-text-style-size: 14px;
267
+ --comp-counter-big-text-style-font-weight: 700;
268
+ --comp-counter-big-text-style-line-height: 18px;
269
+ --comp-counter-big-height: 18px;
270
+ --comp-counter-height: 16px;
271
+ --comp-counter-border-radius: 2px;
272
+ --comp-counter-notif-border-radius: 16px;
273
+ --comp-counter-notif-min-width: 16px;
274
+ --comp-counter-notif-color: #FFFFFF;
275
+ --comp-counter-notif-background-color: #FF6726;
276
+ --comp-counter-orange-color: #FF6726;
277
+ --comp-counter-orange-with-background-color: #FFFFFF;
278
+ --comp-counter-orange-with-background-background-color: #FF6726;
279
+ --comp-counter-blue-color: #0E72D6;
280
+ --comp-counter-blue-with-background-background-color: #E8F4FF;
281
+ --comp-counter-grey-color: #344563;
282
+ --comp-counter-grey-with-background-background-color: #EAECEF;
250
283
  --comp-icon-button-padding: 8px;
251
284
  --comp-icon-button-width: 36px;
252
285
  --comp-icon-button-height: 36px;
@@ -280,6 +313,82 @@
280
313
  --comp-infobox-success-background-color: #DAF1DD;
281
314
  --comp-infobox-success-border-left-color: #0F821D;
282
315
  --comp-infobox-success-icon-color: #0F821D;
316
+ --comp-input-width-default: 256px;
317
+ --comp-input-height: 36px;
318
+ --comp-input-padding-horizontal: 12px;
319
+ --comp-input-spacing-horizontal: 8px;
320
+ --comp-input-border-radius: 4px;
321
+ --comp-input-border-default-color: #858FA1;
322
+ --comp-input-border-hover-color: #5D6A82;
323
+ --comp-input-border-focused-color: #178DFE;
324
+ --comp-input-border-error-color: #E81313;
325
+ --comp-input-border-success-color: #45B854;
326
+ --comp-input-border-disabled-color: #D6DAE0;
327
+ --comp-input-fill-color: #FFFFFF;
328
+ --comp-input-fill-disabled-color: #D6DAE0;
329
+ --comp-input-icon-size: 16px;
330
+ --comp-input-icon-color: #858FA1;
331
+ --comp-input-text-font-family: Averta;
332
+ --comp-input-text-size: 14px;
333
+ --comp-input-text-font-weight: 400;
334
+ --comp-input-text-line-height: 18px;
335
+ --comp-input-text-default-color: #344563;
336
+ --comp-input-text-placeholder-color: #858FA1;
337
+ --comp-forms-label-font-family: Averta;
338
+ --comp-forms-label-size: 14px;
339
+ --comp-forms-label-font-weight: 400;
340
+ --comp-forms-label-line-height: 18px;
341
+ --comp-forms-label-text-color: #344563;
342
+ --comp-forms-label-description-text-font-family: Averta;
343
+ --comp-forms-label-description-text-size: 12px;
344
+ --comp-forms-label-description-text-font-weight: 400;
345
+ --comp-forms-label-description-text-line-height: 16px;
346
+ --comp-forms-label-description-text-color: #5D6A82;
347
+ --comp-forms-label-spacing-vertical: 4px;
348
+ --comp-forms-label-padding-bottom: 8px;
349
+ --comp-forms-status-icon-size: 16px;
350
+ --comp-forms-status-icon-error-color: #E81313;
351
+ --comp-forms-status-icon-success-color: #45B854;
352
+ --comp-forms-status-spacing-vertical: 4px;
353
+ --comp-forms-status-text-font-family: Averta;
354
+ --comp-forms-status-text-size: 14px;
355
+ --comp-forms-status-text-font-weight: 400;
356
+ --comp-forms-status-text-line-height: 18px;
357
+ --comp-forms-status-text-error-color: #E81313;
358
+ --comp-forms-status-text-success-color: #0F821D;
359
+ --comp-text-area-width-default: 256px;
360
+ --comp-text-area-height: 80px;
361
+ --comp-text-area-padding-horizontal: 12px;
362
+ --comp-text-area-spacing-horizontal: 8px;
363
+ --comp-text-area-border-radius: 4px;
364
+ --comp-text-area-border-default-color: #858FA1;
365
+ --comp-text-area-border-hover-color: #5D6A82;
366
+ --comp-text-area-border-focused-color: #178DFE;
367
+ --comp-text-area-border-error-color: #E81313;
368
+ --comp-text-area-border-success-color: #45B854;
369
+ --comp-text-area-border-disabled-color: #D6DAE0;
370
+ --comp-text-area-fill-color: #FFFFFF;
371
+ --comp-text-area-fill-disabled-color: #D6DAE0;
372
+ --comp-text-area-icon-size: 16px;
373
+ --comp-text-area-icon-color: #858FA1;
374
+ --comp-text-area-text-font-family: Averta;
375
+ --comp-text-area-text-size: 14px;
376
+ --comp-text-area-text-font-weight: 400;
377
+ --comp-text-area-text-line-height: 18px;
378
+ --comp-text-area-text-default-color: #344563;
379
+ --comp-text-area-text-placeholder-color: #858FA1;
380
+ --comp-label-text-style-font-family: Averta;
381
+ --comp-label-text-style-size: 14px;
382
+ --comp-label-text-style-font-weight: 400;
383
+ --comp-label-text-style-line-height: 18px;
384
+ --comp-label-text-color: #344563;
385
+ --comp-label-border-radius: 24px;
386
+ --comp-label-background-color: #D1E8FF;
387
+ --comp-label-height: 24px;
388
+ --comp-label-padding-left: 8px;
389
+ --comp-label-padding-right: 8px;
390
+ --comp-label-closable-spacing: 4px;
391
+ --comp-label-closable-padding-right: 2px;
283
392
  --comp-link-text-font-family: Averta;
284
393
  --comp-link-text-size: 14px;
285
394
  --comp-link-text-font-weight: 400;
@@ -308,6 +417,68 @@
308
417
  --comp-link-spacing: 4px;
309
418
  --comp-link-icon-size: 16px;
310
419
  --comp-radio-transition-duration: 250ms;
420
+ --comp-select-icon-focused-color: #178DFE;
421
+ --comp-select-inline-label-text-font-family: Averta;
422
+ --comp-select-inline-label-text-size: 14px;
423
+ --comp-select-inline-label-text-font-weight: 400;
424
+ --comp-select-inline-label-text-line-height: 18px;
425
+ --comp-select-inline-label-text-color: #5D6A82;
426
+ --comp-select-inline-separator-color: #AEB5C1;
427
+ --comp-select-one-line-height: 40px;
428
+ --comp-select-one-line-spacing: 8px;
429
+ --comp-select-one-line-padding-horizontal: 16px;
430
+ --comp-select-one-line-background-color: #FFFFFF;
431
+ --comp-select-one-line-text-font-family: Averta;
432
+ --comp-select-one-line-text-size: 14px;
433
+ --comp-select-one-line-text-font-weight: 400;
434
+ --comp-select-one-line-text-line-height: 18px;
435
+ --comp-select-one-line-text-color: #344563;
436
+ --comp-select-one-line-selected-text-font-family: Averta;
437
+ --comp-select-one-line-selected-text-size: 14px;
438
+ --comp-select-one-line-selected-text-font-weight: 700;
439
+ --comp-select-one-line-selected-text-line-height: 18px;
440
+ --comp-select-one-line-selectable-selected-text-font-family: Averta;
441
+ --comp-select-one-line-selectable-selected-text-size: 14px;
442
+ --comp-select-one-line-selectable-selected-text-font-weight: 700;
443
+ --comp-select-one-line-selectable-selected-text-line-height: 18px;
444
+ --comp-select-two-line-height: unset;
445
+ --comp-select-two-line-padding-vertical: 8px;
446
+ --comp-select-two-line-title-text-font-family: Averta;
447
+ --comp-select-two-line-title-text-size: 14px;
448
+ --comp-select-two-line-title-text-font-weight: 700;
449
+ --comp-select-two-line-title-text-line-height: 18px;
450
+ --comp-select-two-line-title-text-color: #344563;
451
+ --comp-select-two-line-title-spacing: 8px;
452
+ --comp-select-two-line-caption-text-font-family: Averta;
453
+ --comp-select-two-line-caption-text-size: 12px;
454
+ --comp-select-two-line-caption-text-font-weight: 400;
455
+ --comp-select-two-line-caption-text-line-height: 16px;
456
+ --comp-select-two-line-caption-text-color: #5D6A82;
457
+ --comp-select-group-padding-horizontal: 16px;
458
+ --comp-select-group-padding-vertical: 8px;
459
+ --comp-select-group-border-top-color: #EAECEF;
460
+ --comp-select-group-background-color: #F9F9FA;
461
+ --comp-select-group-selected-gap: 8px;
462
+ --comp-select-group-text-font-family: Averta;
463
+ --comp-select-group-text-size: 12px;
464
+ --comp-select-group-text-font-weight: 700;
465
+ --comp-select-group-text-line-height: 16px;
466
+ --comp-select-group-text-color: #344563;
467
+ --comp-select-separator-padding-horizontal: 8px;
468
+ --comp-select-separator-padding-vertical: 8px;
469
+ --comp-select-separator-color: #EAECEF;
470
+ --comp-select-padding-vertical: 8px;
471
+ --comp-select-background-color: #FFFFFF;
472
+ --comp-select-shadow: 0px 4px 6px -2px rgba(52, 69, 99, 0.15), 0px 4px 25px -2px rgba(52, 69, 99, 0.15);
473
+ --comp-select-search-bar-padding-horizontal: 8px;
474
+ --comp-select-search-bar-padding-bottom: 8px;
475
+ --comp-select-search-bar-margin-bottom: 8px;
476
+ --comp-select-search-bar-border-bottom-color: #EAECEF;
477
+ --comp-select-search-bar-bottom-link-margin-top: 12px;
478
+ --comp-select-search-bar-bottom-link-padding-horizontal: 16px;
479
+ --comp-select-search-bar-bottom-link-padding-top: 12px;
480
+ --comp-select-search-bar-bottom-link-padding-bottom: 4px;
481
+ --comp-select-search-bar-bottom-link-border-top-color: #EAECEF;
311
482
  --comp-split-button-text-size: 14px;
312
483
  --comp-split-button-text-font-family: Averta;
313
484
  --comp-split-button-text-weight: 700;
@@ -316,6 +487,97 @@
316
487
  --comp-split-button-padding-vertical: 16px;
317
488
  --comp-split-button-border-radius: 4px;
318
489
  --comp-split-button-spacing: 8px;
490
+ --comp-status-card-text-style-font-family: Averta;
491
+ --comp-status-card-text-style-size: 12px;
492
+ --comp-status-card-text-style-font-weight: 400;
493
+ --comp-status-card-text-style-line-height: 16px;
494
+ --comp-status-card-text-color: #344563;
495
+ --comp-status-card-user-text-style-font-family: Averta;
496
+ --comp-status-card-user-text-style-size: 12px;
497
+ --comp-status-card-user-text-style-font-weight: 700;
498
+ --comp-status-card-user-text-style-line-height: 16px;
499
+ --comp-status-card-caption-text-style-font-family: Averta;
500
+ --comp-status-card-caption-text-style-size: 12px;
501
+ --comp-status-card-caption-text-style-font-weight: 700;
502
+ --comp-status-card-caption-text-style-line-height: 16px;
503
+ --comp-status-card-caption-text-color: #5D6A82;
504
+ --comp-status-card-spacing-vertical: 8px;
505
+ --comp-status-card-spacing-horizontal: 8px;
506
+ --comp-status-card-content-spacing: 4px;
507
+ --comp-status-card-padding-vertical: 12px;
508
+ --comp-status-card-padding-horizontal: 8px;
509
+ --comp-status-card-green-icon-color: #45B854;
510
+ --comp-status-card-green-background-color: #ECF7ED;
511
+ --comp-status-card-green-border-color: #DAF1DD;
512
+ --comp-status-card-tag-orange-icon-color: #FBB500;
513
+ --comp-status-card-tag-orange-background-color: #FFF8E6;
514
+ --comp-status-card-tag-orange-border-color: #FEF0CC;
515
+ --comp-status-card-blue-icon-color: #178DFE;
516
+ --comp-status-card-blue-background-color: #E8F4FF;
517
+ --comp-status-card-blue-border-color: #D1E8FF;
518
+ --comp-status-card-red-icon-color: #E81313;
519
+ --comp-status-card-red-background-color: #FDE7E7;
520
+ --comp-status-card-red-border-color: #FAD0D0;
521
+ --comp-status-card-orange-icon-color: #FF6726;
522
+ --comp-status-card-orange-background-color: #FFEFE9;
523
+ --comp-status-card-orange-border-color: #FFE1D4;
524
+ --comp-status-card-grey-icon-color: #344563;
525
+ --comp-status-card-grey-background-color: #EAECEF;
526
+ --comp-status-card-grey-border-color: #D6DAE0;
527
+ --comp-status-text-style-font-family: Averta;
528
+ --comp-status-text-style-size: 12px;
529
+ --comp-status-text-style-font-weight: 400;
530
+ --comp-status-text-style-line-height: 16px;
531
+ --comp-status-padding-horizontal: 8px;
532
+ --comp-status-height: 24px;
533
+ --comp-status-spacing: 4px;
534
+ --comp-status-color: #344563;
535
+ --comp-status-green-background-color: #ECF7ED;
536
+ --comp-status-green-dot-background-color: #45B854;
537
+ --comp-status-tag-orange-background-color: #FFF8E6;
538
+ --comp-status-tag-orange-dot-background-color: #A66200;
539
+ --comp-status-red-background-color: #FDE7E7;
540
+ --comp-status-red-dot-background-color: #E81313;
541
+ --comp-status-blue-background-color: #E8F4FF;
542
+ --comp-status-blue-dot-background-color: #178DFE;
543
+ --comp-status-orange-background-color: #FFEFE9;
544
+ --comp-status-orange-dot-background-color: #FF6726;
545
+ --comp-status-grey-background-color: #EAECEF;
546
+ --comp-status-grey-dot-background-color: #344563;
547
+ --comp-tag-text-style-font-family: Averta;
548
+ --comp-tag-text-style-size: 14px;
549
+ --comp-tag-text-style-font-weight: 400;
550
+ --comp-tag-text-style-line-height: 18px;
551
+ --comp-tag-border-radius: 4px;
552
+ --comp-tag-spacing: 4px;
553
+ --comp-tag-height: 24px;
554
+ --comp-tag-padding-left: 4px;
555
+ --comp-tag-padding-right: 4px;
556
+ --comp-tag-closable-padding-right: 2px;
557
+ --comp-tag-blue-text-color: #0E72D6;
558
+ --comp-tag-blue-background-color: #E8F4FF;
559
+ --comp-tag-blue-border-color: #D1E8FF;
560
+ --comp-tag-blue-icon-color: #0E72D6;
561
+ --comp-tag-tag-orange-text-color: #A66200;
562
+ --comp-tag-tag-orange-background-color: #FFF8E6;
563
+ --comp-tag-tag-orange-border-color: #FEF0CC;
564
+ --comp-tag-tag-orange-icon-color: #A66200;
565
+ --comp-tag-menthol-text-color: #057E7A;
566
+ --comp-tag-menthol-background-color: #F1F9F8;
567
+ --comp-tag-menthol-border-color: #CFECEA;
568
+ --comp-tag-menthol-icon-color: #057E7A;
569
+ --comp-tag-grey-text-color: #344563;
570
+ --comp-tag-grey-background-color: #EAECEF;
571
+ --comp-tag-grey-border-color: #D6DAE0;
572
+ --comp-tag-grey-icon-color: #212E44;
573
+ --comp-tag-green-text-color: #0F821D;
574
+ --comp-tag-green-background-color: #ECF7ED;
575
+ --comp-tag-green-border-color: #DAF1DD;
576
+ --comp-tag-green-icon-color: #0F821D;
577
+ --comp-tag-red-text-color: #D80505;
578
+ --comp-tag-red-background-color: #FDE7E7;
579
+ --comp-tag-red-border-color: #FAD0D0;
580
+ --comp-tag-red-icon-color: #D80505;
319
581
  --comp-tooltip-text-style-font-family: Averta;
320
582
  --comp-tooltip-text-style-size: 14px;
321
583
  --comp-tooltip-text-style-weight: 400;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@agorapulse/ui-theme",
3
- "version": "16.0.2",
3
+ "version": "16.1.0",
4
4
  "description": "Agorapulse UI Theme Library",
5
5
  "repository": {
6
6
  "type": "git",
package/src/tokens/components/badge.json ADDED
@@ -0,0 +1,53 @@
1
+ {
2
+ "comp": {
3
+ "badge": {
4
+ "text": {
5
+ "style": {
6
+ "font-family": {
7
+ "value": "{sys.text.style.captionBold.font-family}"
8
+ },
9
+ "size": {
10
+ "value": "{sys.text.style.captionBold.size}"
11
+ },
12
+ "font-weight": {
13
+ "value": "{sys.text.style.captionBold.weight}"
14
+ },
15
+ "line-height": {
16
+ "value": "{sys.text.style.captionBold.line-height}"
17
+ }
18
+ }
19
+ },
20
+ "height": {
21
+ "value": "{ref.font.lineHeight.xs}"
22
+ },
23
+ "padding": {
24
+ "left": {
25
+ "value": "2px"
26
+ },
27
+ "right": {
28
+ "value": "2px"
29
+ }
30
+ },
31
+ "orange": {
32
+ "color": {
33
+ "value": "{ref.color.white}"
34
+ },
35
+ "background": {
36
+ "color": {
37
+ "value": "{sys.color.main.default.bg.default}"
38
+ }
39
+ }
40
+ },
41
+ "blue": {
42
+ "color": {
43
+ "value": "{sys.color.accent.light.text}"
44
+ },
45
+ "background": {
46
+ "color": {
47
+ "value": "{ref.color.electricBlue.10}"
48
+ }
49
+ }
50
+ }
51
+ }
52
+ }
53
+ }