@hopper-ui/tokens 5.2.2 → 5.3.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/CHANGELOG.md +30 -0
- package/dist/sharegate/dark/tokens.css +247 -246
- package/dist/sharegate/tokens.css +307 -220
- package/dist/workleap/dark/tokens.css +1 -0
- package/dist/workleap/tokens.css +100 -13
- package/package.json +1 -1
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
--hop-danger-surface-weak: var(--hop-amanita-900);
|
|
32
32
|
--hop-danger-surface-weak-hover: var(--hop-amanita-700);
|
|
33
33
|
--hop-danger-surface-weak-press: var(--hop-amanita-600);
|
|
34
|
+
--hop-danger-surface-weak-selected: var(--hop-amanita-600);
|
|
34
35
|
--hop-danger-text: var(--hop-amanita-900);
|
|
35
36
|
--hop-danger-text-selected: var(--hop-amanita-100);
|
|
36
37
|
--hop-danger-text-disabled: var(--hop-amanita-600);
|
package/dist/workleap/tokens.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on Thu,
|
|
3
|
+
* Generated on Thu, 21 May 2026 20:09:12 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -11,6 +11,10 @@
|
|
|
11
11
|
--hop-comp-tile-border-color-selected: transparent;
|
|
12
12
|
--hop-comp-tile-border-color-focus: transparent;
|
|
13
13
|
--hop-comp-tile-box-shadow: none;
|
|
14
|
+
--hop-comp-tag-text-font-letterspacing-lg: normal;
|
|
15
|
+
--hop-comp-tag-text-font-letterspacing-md: normal;
|
|
16
|
+
--hop-comp-tag-text-font-letterspacing-sm: normal;
|
|
17
|
+
--hop-comp-tag-text-transform: none;
|
|
14
18
|
--hop-comp-popover-backdrop-filter: none;
|
|
15
19
|
--hop-comp-modal-backdrop-filter: none;
|
|
16
20
|
--hop-comp-modal-border: none;
|
|
@@ -48,6 +52,10 @@
|
|
|
48
52
|
--hop-comp-button-upsell-border-color-loading: transparent;
|
|
49
53
|
--hop-comp-button-primary-border-color: transparent;
|
|
50
54
|
--hop-comp-button-primary-border-color-loading: transparent;
|
|
55
|
+
--hop-comp-button-text-font-letterspacing-xs: normal;
|
|
56
|
+
--hop-comp-button-text-font-letterspacing-sm: normal;
|
|
57
|
+
--hop-comp-button-text-font-letterspacing-md: normal;
|
|
58
|
+
--hop-comp-button-text-transform: none;
|
|
51
59
|
--hop-overline-bottom-offset: -0.25rem;
|
|
52
60
|
--hop-overline-top-offset: -0.25rem;
|
|
53
61
|
--hop-heading-xs-medium-bottom-offset: -0.25rem;
|
|
@@ -356,11 +364,23 @@
|
|
|
356
364
|
--hop-easing-duration-3: 300ms;
|
|
357
365
|
--hop-easing-duration-2: 200ms;
|
|
358
366
|
--hop-easing-duration-1: 100ms;
|
|
367
|
+
--hop-letter-spacing-wide-30: 0.1875rem;
|
|
368
|
+
--hop-letter-spacing-wide-25: 0.15625rem;
|
|
369
|
+
--hop-letter-spacing-wide-20: 0.125rem;
|
|
370
|
+
--hop-letter-spacing-wide-15: 0.09375rem;
|
|
371
|
+
--hop-letter-spacing-wide-10: 0.0625rem;
|
|
372
|
+
--hop-letter-spacing-wide-5: 0.03125rem;
|
|
373
|
+
--hop-letter-spacing-dense-5: -0.03125rem;
|
|
374
|
+
--hop-letter-spacing-dense-10: -0.0625rem;
|
|
375
|
+
--hop-letter-spacing-0: 0;
|
|
359
376
|
--hop-line-height-1-50: 1.5;
|
|
360
377
|
--hop-line-height-1-4285: 1.4285714;
|
|
378
|
+
--hop-line-height-1-40: 1.4;
|
|
361
379
|
--hop-line-height-1-33: 1.3333333;
|
|
380
|
+
--hop-line-height-1-2857: 1.2857142;
|
|
362
381
|
--hop-line-height-1-25: 1.25;
|
|
363
382
|
--hop-line-height-1-20: 1.2;
|
|
383
|
+
--hop-line-height-1-1666: 1.1666666;
|
|
364
384
|
--hop-line-height-1-14: 1.1428571;
|
|
365
385
|
--hop-line-height-1-125: 1.125;
|
|
366
386
|
--hop-font-weight-690: 690;
|
|
@@ -380,6 +400,7 @@
|
|
|
380
400
|
--hop-font-size-160: 1rem;
|
|
381
401
|
--hop-font-size-140: 0.875rem;
|
|
382
402
|
--hop-font-size-120: 0.75rem;
|
|
403
|
+
--hop-font-size-100: 0.625rem;
|
|
383
404
|
--hop-font-family-tertiary: 'ABC Favorit Mono', Consolas, 'SF Mono', monospace;
|
|
384
405
|
--hop-font-family-secondary: 'Inter', Helvetica, Arial, sans-serif;
|
|
385
406
|
--hop-font-family-primary: 'ABC Favorit', Helvetica, Arial, sans-serif;
|
|
@@ -423,18 +444,18 @@
|
|
|
423
444
|
--hop-amber-75: #ffe39a;
|
|
424
445
|
--hop-amber-50: #fff1cc;
|
|
425
446
|
--hop-amber-25: #fff6e0;
|
|
426
|
-
--hop-rose-900: #
|
|
427
|
-
--hop-rose-800: #
|
|
428
|
-
--hop-rose-700: #
|
|
429
|
-
--hop-rose-600: #
|
|
430
|
-
--hop-rose-500: #
|
|
431
|
-
--hop-rose-400: #
|
|
432
|
-
--hop-rose-300: #
|
|
433
|
-
--hop-rose-200: #
|
|
434
|
-
--hop-rose-100: #
|
|
435
|
-
--hop-rose-75: #
|
|
436
|
-
--hop-rose-50: #
|
|
437
|
-
--hop-rose-25: #
|
|
447
|
+
--hop-rose-900: #341417;
|
|
448
|
+
--hop-rose-800: #50161c;
|
|
449
|
+
--hop-rose-700: #711822;
|
|
450
|
+
--hop-rose-600: #951b2a;
|
|
451
|
+
--hop-rose-500: #ba1f34;
|
|
452
|
+
--hop-rose-400: #de2840;
|
|
453
|
+
--hop-rose-300: #f5425d;
|
|
454
|
+
--hop-rose-200: #f76d83;
|
|
455
|
+
--hop-rose-100: #fa9ba9;
|
|
456
|
+
--hop-rose-75: #fcbcc5;
|
|
457
|
+
--hop-rose-50: #fdd3d8;
|
|
458
|
+
--hop-rose-25: #feeaec;
|
|
438
459
|
--hop-samoyed: #ffffff;
|
|
439
460
|
--hop-rock-900: #232426;
|
|
440
461
|
--hop-rock-800: #313335;
|
|
@@ -606,6 +627,10 @@
|
|
|
606
627
|
--hop-coastal-75: #bae6ff;
|
|
607
628
|
--hop-coastal-50: #d9efff;
|
|
608
629
|
--hop-coastal-25: #f0f8ff;
|
|
630
|
+
--hop-comp-tag-text-font-lineheight-lg: var(--hop-line-height-1-4285);
|
|
631
|
+
--hop-comp-tag-text-font-lineheight-md: var(--hop-line-height-1-33);
|
|
632
|
+
--hop-comp-tag-text-font-lineheight-sm: var(--hop-line-height-1-33);
|
|
633
|
+
--hop-comp-tag-text-font-weight: var(--hop-font-weight-410);
|
|
609
634
|
--hop-comp-tabs-tab-list-border-block-end: var(--hop-space-10) solid var(--hop-neutral-border-weak);
|
|
610
635
|
--hop-comp-tabs-tab-list-border: var(--hop-space-10) solid var(--hop-neutral-border-weak);
|
|
611
636
|
--hop-comp-popover-border: var(--hop-space-10) solid var(--hop-neutral-border-weak);
|
|
@@ -631,15 +656,43 @@
|
|
|
631
656
|
--hop-comp-button-secondary-box-shadow: var(--hop-shadow-none);
|
|
632
657
|
--hop-comp-button-primary-box-shadow-loading: var(--hop-shadow-none);
|
|
633
658
|
--hop-comp-button-primary-box-shadow: var(--hop-shadow-none);
|
|
659
|
+
--hop-comp-button-text-font-lineheight-xs: var(--hop-line-height-1-33);
|
|
660
|
+
--hop-comp-button-text-font-lineheight-sm: var(--hop-line-height-1-4285);
|
|
661
|
+
--hop-comp-button-text-font-lineheight-md: var(--hop-line-height-1-50);
|
|
662
|
+
--hop-comp-button-text-font-weight: var(--hop-font-weight-505);
|
|
634
663
|
--hop-shape-rounded-sm: var(--hop-border-radius-1);
|
|
635
664
|
--hop-shape-rounded-md: var(--hop-border-radius-2);
|
|
636
665
|
--hop-shape-rounded-lg: var(--hop-border-radius-3);
|
|
637
666
|
--hop-shape-pill: var(--hop-border-radius-4);
|
|
638
667
|
--hop-shape-circle: var(--hop-border-radius-9999);
|
|
668
|
+
--hop-caption-sm-line-height: var(--hop-line-height-1-33);
|
|
669
|
+
--hop-caption-sm-font-weight: var(--hop-font-weight-410);
|
|
670
|
+
--hop-caption-sm-font-size: var(--hop-font-size-100);
|
|
671
|
+
--hop-caption-sm-font-family: var(--hop-font-family-secondary);
|
|
672
|
+
--hop-caption-md-line-height: var(--hop-line-height-1-33);
|
|
673
|
+
--hop-caption-md-font-weight: var(--hop-font-weight-410);
|
|
674
|
+
--hop-caption-md-font-size: var(--hop-font-size-120);
|
|
675
|
+
--hop-caption-md-font-family: var(--hop-font-family-secondary);
|
|
676
|
+
--hop-caption-lg-line-height: var(--hop-line-height-1-4285);
|
|
677
|
+
--hop-caption-lg-font-weight: var(--hop-font-weight-410);
|
|
678
|
+
--hop-caption-lg-font-size: var(--hop-font-size-140);
|
|
679
|
+
--hop-caption-lg-font-family: var(--hop-font-family-secondary);
|
|
680
|
+
--hop-caption-xl-line-height: var(--hop-line-height-1-50);
|
|
681
|
+
--hop-caption-xl-font-weight: var(--hop-font-weight-410);
|
|
682
|
+
--hop-caption-xl-font-size: var(--hop-font-size-160);
|
|
683
|
+
--hop-caption-xl-font-family: var(--hop-font-family-secondary);
|
|
684
|
+
--hop-accent-xs-line-height: var(--hop-line-height-1-4285);
|
|
685
|
+
--hop-accent-xs-font-weight: var(--hop-font-weight-580);
|
|
686
|
+
--hop-accent-xs-font-size: var(--hop-font-size-140);
|
|
687
|
+
--hop-accent-xs-font-family: var(--hop-font-family-primary);
|
|
639
688
|
--hop-accent-sm-line-height: var(--hop-line-height-1-33);
|
|
640
689
|
--hop-accent-sm-font-weight: var(--hop-font-weight-580);
|
|
641
690
|
--hop-accent-sm-font-size: var(--hop-font-size-180);
|
|
642
691
|
--hop-accent-sm-font-family: var(--hop-font-family-primary);
|
|
692
|
+
--hop-accent-md-line-height: var(--hop-line-height-1-14);
|
|
693
|
+
--hop-accent-md-font-weight: var(--hop-font-weight-580);
|
|
694
|
+
--hop-accent-md-font-size: var(--hop-font-size-280);
|
|
695
|
+
--hop-accent-md-font-family: var(--hop-font-family-primary);
|
|
643
696
|
--hop-accent-lg-line-height: var(--hop-line-height-1-125);
|
|
644
697
|
--hop-accent-lg-font-weight: var(--hop-font-weight-580);
|
|
645
698
|
--hop-accent-lg-font-size: var(--hop-font-size-480);
|
|
@@ -1323,6 +1376,7 @@
|
|
|
1323
1376
|
--hop-danger-text-disabled: var(--hop-amanita-100);
|
|
1324
1377
|
--hop-danger-text-selected: var(--hop-amanita-400);
|
|
1325
1378
|
--hop-danger-text: var(--hop-amanita-700);
|
|
1379
|
+
--hop-danger-surface-weak-selected: var(--hop-amanita-100);
|
|
1326
1380
|
--hop-danger-surface-weak-press: var(--hop-amanita-100);
|
|
1327
1381
|
--hop-danger-surface-weak-hover: var(--hop-amanita-75);
|
|
1328
1382
|
--hop-danger-surface-weak: var(--hop-amanita-50);
|
|
@@ -1401,6 +1455,35 @@
|
|
|
1401
1455
|
--hop-comp-tile-background-color-press: var(--hop-neutral-surface-press);
|
|
1402
1456
|
--hop-comp-tile-background-color-hover: var(--hop-neutral-surface-hover);
|
|
1403
1457
|
--hop-comp-tile-background-color: var(--hop-neutral-surface);
|
|
1458
|
+
--hop-comp-tag-text-font-size-lg: var(--hop-body-sm-font-size);
|
|
1459
|
+
--hop-comp-tag-text-font-size-md: var(--hop-body-xs-font-size);
|
|
1460
|
+
--hop-comp-tag-text-font-size-sm: var(--hop-body-xs-font-size);
|
|
1461
|
+
--hop-comp-tag-text-font: var(--hop-caption-md-font-family);
|
|
1462
|
+
--hop-comp-tag-icon-color-error: var(--hop-danger-icon-weak);
|
|
1463
|
+
--hop-comp-tag-icon-color-disabled: var(--hop-neutral-icon-disabled);
|
|
1464
|
+
--hop-comp-tag-icon-color-selected: var(--hop-neutral-icon-selected);
|
|
1465
|
+
--hop-comp-tag-icon-color-press: var(--hop-neutral-icon-press);
|
|
1466
|
+
--hop-comp-tag-icon-color-hover: var(--hop-neutral-icon-hover);
|
|
1467
|
+
--hop-comp-tag-icon-color: var(--hop-neutral-icon);
|
|
1468
|
+
--hop-comp-tag-text-color-error: var(--hop-neutral-text);
|
|
1469
|
+
--hop-comp-tag-text-color-disabled: var(--hop-neutral-text-disabled);
|
|
1470
|
+
--hop-comp-tag-text-color-selected: var(--hop-neutral-text-selected);
|
|
1471
|
+
--hop-comp-tag-text-color-press: var(--hop-neutral-text-press);
|
|
1472
|
+
--hop-comp-tag-text-color-hover: var(--hop-neutral-text-hover);
|
|
1473
|
+
--hop-comp-tag-text-color: var(--hop-neutral-text);
|
|
1474
|
+
--hop-comp-tag-border-color-focus: var(--hop-primary-border-focus);
|
|
1475
|
+
--hop-comp-tag-border-color-error: var(--hop-danger-border-strong);
|
|
1476
|
+
--hop-comp-tag-border-color-disabled: var(--hop-neutral-border-weak);
|
|
1477
|
+
--hop-comp-tag-border-color-selected: var(--hop-neutral-border-selected);
|
|
1478
|
+
--hop-comp-tag-border-color-press: var(--hop-neutral-border-press);
|
|
1479
|
+
--hop-comp-tag-border-color-hover: var(--hop-neutral-border-hover);
|
|
1480
|
+
--hop-comp-tag-border-color: var(--hop-neutral-border);
|
|
1481
|
+
--hop-comp-tag-background-color-disabled: var(--hop-neutral-surface-disabled);
|
|
1482
|
+
--hop-comp-tag-background-color-selected: var(--hop-neutral-surface-selected);
|
|
1483
|
+
--hop-comp-tag-background-color-press: var(--hop-neutral-surface-press);
|
|
1484
|
+
--hop-comp-tag-background-color-hover: var(--hop-neutral-surface-hover);
|
|
1485
|
+
--hop-comp-tag-background-color: var(--hop-neutral-surface);
|
|
1486
|
+
--hop-comp-tag-border-radius: var(--hop-shape-pill);
|
|
1404
1487
|
--hop-comp-tabs-tab-panel-border-color-focus: var(--hop-primary-border-focus);
|
|
1405
1488
|
--hop-comp-tabs-tab-list-border-radius: var(--hop-shape-rounded-md);
|
|
1406
1489
|
--hop-comp-tabs-tab-list-background-color: var(--hop-neutral-surface-weakest);
|
|
@@ -1656,6 +1739,10 @@
|
|
|
1656
1739
|
--hop-comp-button-primary-text-color-pressed: var(--hop-primary-text-strong);
|
|
1657
1740
|
--hop-comp-button-primary-text-color-hover: var(--hop-primary-text-strong-hover);
|
|
1658
1741
|
--hop-comp-button-primary-text-color: var(--hop-primary-text-strong);
|
|
1742
|
+
--hop-comp-button-text-font-size-xs: var(--hop-body-xs-font-size);
|
|
1743
|
+
--hop-comp-button-text-font-size-sm: var(--hop-body-sm-font-size);
|
|
1744
|
+
--hop-comp-button-text-font-size-md: var(--hop-body-md-font-size);
|
|
1745
|
+
--hop-comp-button-text-font: var(--hop-caption-md-font-family);
|
|
1659
1746
|
--hop-comp-button-icon-color-disabled: var(--hop-neutral-icon-disabled);
|
|
1660
1747
|
--hop-comp-button-text-color-disabled: var(--hop-neutral-text-disabled);
|
|
1661
1748
|
--hop-comp-button-border-color-focus: var(--hop-primary-border-focus);
|