@hopper-ui/tokens 5.2.3 → 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 +20 -0
- package/dist/sharegate/tokens.css +90 -4
- package/dist/workleap/tokens.css +87 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# @hopper-ui/tokens
|
|
2
2
|
|
|
3
|
+
## 5.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 62a9ea1: - Added theme-able typography support for the `Button` component via new `comp-button-text-*` tokens (font, font-weight, text-transform, and per-size font-size / line-height / letter-spacing)
|
|
8
|
+
- Added a new `caption` semantic typography scale (`xl`, `lg`, `md`, `sm`) for both Workleap and ShareGate (light and dark)
|
|
9
|
+
- Added `md` and `xs` sizes for `accent` semantic typography scale (Workleap and ShareGate)
|
|
10
|
+
- Added `accent.md` and `accent.xs` semantic typography sizes (Workleap and ShareGate)
|
|
11
|
+
- Added new core `font.size` tokens: `100` (10px)
|
|
12
|
+
- Added new core `line-height` tokens: `1-1666`, `1-40`
|
|
13
|
+
- Added a new core `letter-spacing` token category with `dense-10`, `dense-5`, `0`, `wide-5`, `wide-10`, `wide-15`, `wide-20`, `wide-25`, `wide-30`
|
|
14
|
+
- Added `letterSpacing` styled-system prop support backed by the new `letter-spacing` core scale, plus a matching `UNSAFE_letterSpacing` escape hatch
|
|
15
|
+
- **BREAKING**: the `letterSpacing` styled-system prop is now restricted to values from the new `letter-spacing` core scale. Consumers passing raw CSS values (e.g. `"2px"`, `"3.5px"`) must migrate to `UNSAFE_letterSpacing` or use a token from the scale.
|
|
16
|
+
- 6980cd4: - Added `comp-tag` branding tokens for Workleap and ShareGate (color, border-radius, typography, text-transform)
|
|
17
|
+
- Wired `Tag` component CSS to the new `comp-tag` tokens (neutral variant, selected, focus, invalid/error states, icon colors, and typography)
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- 6980cd4: Add Tag branding tokens
|
|
22
|
+
|
|
3
23
|
## 5.2.3
|
|
4
24
|
|
|
5
25
|
### Patch Changes
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Thu, 21 May 2026 20:09:11 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -16,6 +16,10 @@
|
|
|
16
16
|
--hop-comp-tile-border-color-press: transparent;
|
|
17
17
|
--hop-comp-tile-border-color-hover: transparent;
|
|
18
18
|
--hop-comp-tile-box-shadow: 0 -1px 3px 0 rgb(0 0 0 / 0.12) inset, 0 1px 0 1px rgb(255 255 255 / 0.1);
|
|
19
|
+
--hop-comp-tag-text-transform: uppercase;
|
|
20
|
+
--hop-comp-tag-border-color-selected: transparent;
|
|
21
|
+
--hop-comp-tag-border-color-press: transparent;
|
|
22
|
+
--hop-comp-tag-border-color-hover: transparent;
|
|
19
23
|
--hop-comp-tabs-tab-list-border-radius: NaNrem;
|
|
20
24
|
--hop-comp-tabs-tab-list-border: none;
|
|
21
25
|
--hop-comp-tabs-tab-list-background-color: transparent;
|
|
@@ -73,6 +77,7 @@
|
|
|
73
77
|
--hop-comp-button-primary-border-color-disabled: transparent;
|
|
74
78
|
--hop-comp-button-primary-box-shadow-loading: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 4px 0 rgba(0, 0, 0, 0.10) inset;
|
|
75
79
|
--hop-comp-button-primary-box-shadow: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 4px 0 rgba(0, 0, 0, 0.10) inset;
|
|
80
|
+
--hop-comp-button-text-transform: uppercase;
|
|
76
81
|
--hop-overline-bottom-offset: -0.25rem;
|
|
77
82
|
--hop-overline-top-offset: -0.25rem;
|
|
78
83
|
--hop-heading-xs-medium-bottom-offset: -0.25rem;
|
|
@@ -381,11 +386,23 @@
|
|
|
381
386
|
--hop-easing-duration-3: 300ms;
|
|
382
387
|
--hop-easing-duration-2: 200ms;
|
|
383
388
|
--hop-easing-duration-1: 100ms;
|
|
389
|
+
--hop-letter-spacing-wide-30: 0.1875rem;
|
|
390
|
+
--hop-letter-spacing-wide-25: 0.15625rem;
|
|
391
|
+
--hop-letter-spacing-wide-20: 0.125rem;
|
|
392
|
+
--hop-letter-spacing-wide-15: 0.09375rem;
|
|
393
|
+
--hop-letter-spacing-wide-10: 0.0625rem;
|
|
394
|
+
--hop-letter-spacing-wide-5: 0.03125rem;
|
|
395
|
+
--hop-letter-spacing-dense-5: -0.03125rem;
|
|
396
|
+
--hop-letter-spacing-dense-10: -0.0625rem;
|
|
397
|
+
--hop-letter-spacing-0: 0;
|
|
384
398
|
--hop-line-height-1-50: 1.5;
|
|
385
399
|
--hop-line-height-1-4285: 1.4285714;
|
|
400
|
+
--hop-line-height-1-40: 1.4;
|
|
386
401
|
--hop-line-height-1-33: 1.3333333;
|
|
402
|
+
--hop-line-height-1-2857: 1.2857142;
|
|
387
403
|
--hop-line-height-1-25: 1.25;
|
|
388
404
|
--hop-line-height-1-20: 1.2;
|
|
405
|
+
--hop-line-height-1-1666: 1.1666666;
|
|
389
406
|
--hop-line-height-1-14: 1.1428571;
|
|
390
407
|
--hop-line-height-1-125: 1.125;
|
|
391
408
|
--hop-font-weight-690: 690;
|
|
@@ -405,6 +422,7 @@
|
|
|
405
422
|
--hop-font-size-160: 1rem;
|
|
406
423
|
--hop-font-size-140: 0.875rem;
|
|
407
424
|
--hop-font-size-120: 0.75rem;
|
|
425
|
+
--hop-font-size-100: 0.625rem;
|
|
408
426
|
--hop-font-family-tertiary: 'ABC Favorit Mono', Consolas, 'SF Mono', monospace;
|
|
409
427
|
--hop-font-family-secondary: 'Inter', Helvetica, Arial, sans-serif;
|
|
410
428
|
--hop-font-family-primary: 'ABC Favorit', Helvetica, Arial, sans-serif;
|
|
@@ -632,6 +650,13 @@
|
|
|
632
650
|
--hop-coastal-50: #d9efff;
|
|
633
651
|
--hop-coastal-25: #f0f8ff;
|
|
634
652
|
--hop-comp-tooltip-background: var(--hop-neutral-surface-weak-transparent-always-dark);
|
|
653
|
+
--hop-comp-tag-text-font-letterspacing-lg: var(--hop-letter-spacing-wide-30);
|
|
654
|
+
--hop-comp-tag-text-font-lineheight-lg: var(--hop-line-height-1-2857);
|
|
655
|
+
--hop-comp-tag-text-font-letterspacing-md: var(--hop-letter-spacing-wide-20);
|
|
656
|
+
--hop-comp-tag-text-font-lineheight-md: var(--hop-line-height-1-33);
|
|
657
|
+
--hop-comp-tag-text-font-letterspacing-sm: var(--hop-letter-spacing-wide-20);
|
|
658
|
+
--hop-comp-tag-text-font-lineheight-sm: var(--hop-line-height-1-33);
|
|
659
|
+
--hop-comp-tag-text-font-weight: var(--hop-font-weight-410);
|
|
635
660
|
--hop-comp-tabs-tab-list-border-block-end: var(--hop-space-10) solid var(--hop-neutral-border-weak);
|
|
636
661
|
--hop-comp-popover-border: var(--hop-space-10) solid var(--hop-neutral-border-weak);
|
|
637
662
|
--hop-comp-popover-background: var(--hop-neutral-surface-transparent);
|
|
@@ -647,19 +672,50 @@
|
|
|
647
672
|
--hop-comp-button-upsell-background: linear-gradient(var(--hop-limeburst-50), var(--hop-persimmon-300) 151%);
|
|
648
673
|
--hop-comp-button-primary-background-loading: linear-gradient(var(--hop-iris-300), var(--hop-iris-600) 100%);
|
|
649
674
|
--hop-comp-button-primary-background: linear-gradient(var(--hop-iris-300), var(--hop-iris-600) 100%);
|
|
675
|
+
--hop-comp-button-text-font-letterspacing-xs: var(--hop-letter-spacing-wide-15);
|
|
676
|
+
--hop-comp-button-text-font-lineheight-xs: var(--hop-line-height-1-33);
|
|
677
|
+
--hop-comp-button-text-font-letterspacing-sm: var(--hop-letter-spacing-wide-20);
|
|
678
|
+
--hop-comp-button-text-font-lineheight-sm: var(--hop-line-height-1-4285);
|
|
679
|
+
--hop-comp-button-text-font-letterspacing-md: var(--hop-letter-spacing-wide-25);
|
|
680
|
+
--hop-comp-button-text-font-lineheight-md: var(--hop-line-height-1-50);
|
|
681
|
+
--hop-comp-button-text-font-weight: var(--hop-font-weight-410);
|
|
650
682
|
--hop-shape-rounded-sm: var(--hop-border-radius-1);
|
|
651
683
|
--hop-shape-rounded-md: var(--hop-border-radius-2);
|
|
652
684
|
--hop-shape-rounded-lg: var(--hop-border-radius-3);
|
|
653
685
|
--hop-shape-pill: var(--hop-border-radius-4);
|
|
654
686
|
--hop-shape-circle: var(--hop-border-radius-9999);
|
|
687
|
+
--hop-caption-sm-line-height: var(--hop-line-height-1-40);
|
|
688
|
+
--hop-caption-sm-font-weight: var(--hop-font-weight-410);
|
|
689
|
+
--hop-caption-sm-font-size: var(--hop-font-size-100);
|
|
690
|
+
--hop-caption-sm-font-family: var(--hop-font-family-tertiary);
|
|
691
|
+
--hop-caption-md-line-height: var(--hop-line-height-1-33);
|
|
692
|
+
--hop-caption-md-font-weight: var(--hop-font-weight-410);
|
|
693
|
+
--hop-caption-md-font-size: var(--hop-font-size-120);
|
|
694
|
+
--hop-caption-md-font-family: var(--hop-font-family-tertiary);
|
|
695
|
+
--hop-caption-lg-line-height: var(--hop-line-height-1-4285);
|
|
696
|
+
--hop-caption-lg-font-weight: var(--hop-font-weight-410);
|
|
697
|
+
--hop-caption-lg-font-size: var(--hop-font-size-140);
|
|
698
|
+
--hop-caption-lg-font-family: var(--hop-font-family-tertiary);
|
|
699
|
+
--hop-caption-xl-line-height: var(--hop-line-height-1-50);
|
|
700
|
+
--hop-caption-xl-font-weight: var(--hop-font-weight-410);
|
|
701
|
+
--hop-caption-xl-font-size: var(--hop-font-size-160);
|
|
702
|
+
--hop-caption-xl-font-family: var(--hop-font-family-tertiary);
|
|
703
|
+
--hop-accent-xs-line-height: var(--hop-line-height-1-4285);
|
|
704
|
+
--hop-accent-xs-font-weight: var(--hop-font-weight-580);
|
|
705
|
+
--hop-accent-xs-font-size: var(--hop-font-size-140);
|
|
706
|
+
--hop-accent-xs-font-family: var(--hop-font-family-tertiary);
|
|
655
707
|
--hop-accent-sm-line-height: var(--hop-line-height-1-33);
|
|
656
708
|
--hop-accent-sm-font-weight: var(--hop-font-weight-580);
|
|
657
709
|
--hop-accent-sm-font-size: var(--hop-font-size-180);
|
|
658
|
-
--hop-accent-sm-font-family: var(--hop-font-family-
|
|
659
|
-
--hop-accent-
|
|
710
|
+
--hop-accent-sm-font-family: var(--hop-font-family-tertiary);
|
|
711
|
+
--hop-accent-md-line-height: var(--hop-line-height-1-14);
|
|
712
|
+
--hop-accent-md-font-weight: var(--hop-font-weight-580);
|
|
713
|
+
--hop-accent-md-font-size: var(--hop-font-size-280);
|
|
714
|
+
--hop-accent-md-font-family: var(--hop-font-family-tertiary);
|
|
715
|
+
--hop-accent-lg-line-height: var(--hop-line-height-1-1666);
|
|
660
716
|
--hop-accent-lg-font-weight: var(--hop-font-weight-580);
|
|
661
717
|
--hop-accent-lg-font-size: var(--hop-font-size-480);
|
|
662
|
-
--hop-accent-lg-font-family: var(--hop-font-family-
|
|
718
|
+
--hop-accent-lg-font-family: var(--hop-font-family-tertiary);
|
|
663
719
|
--hop-body-xs-underline-line-height: var(--hop-line-height-1-33);
|
|
664
720
|
--hop-body-xs-underline-font-weight: var(--hop-font-weight-505);
|
|
665
721
|
--hop-body-xs-underline-font-size: var(--hop-font-size-120);
|
|
@@ -1412,6 +1468,32 @@
|
|
|
1412
1468
|
--hop-comp-tile-background-color-press: var(--hop-neutral-surface-weak-press);
|
|
1413
1469
|
--hop-comp-tile-background-color-hover: var(--hop-neutral-surface-weak-hover);
|
|
1414
1470
|
--hop-comp-tile-background-color: var(--hop-neutral-surface);
|
|
1471
|
+
--hop-comp-tag-text-font-size-lg: var(--hop-caption-lg-font-size);
|
|
1472
|
+
--hop-comp-tag-text-font-size-md: var(--hop-caption-md-font-size);
|
|
1473
|
+
--hop-comp-tag-text-font-size-sm: var(--hop-caption-md-font-size);
|
|
1474
|
+
--hop-comp-tag-text-font: var(--hop-caption-md-font-family);
|
|
1475
|
+
--hop-comp-tag-icon-color-error: var(--hop-danger-icon-weak);
|
|
1476
|
+
--hop-comp-tag-icon-color-disabled: var(--hop-neutral-icon-disabled);
|
|
1477
|
+
--hop-comp-tag-icon-color-selected: var(--hop-neutral-icon-always-light);
|
|
1478
|
+
--hop-comp-tag-icon-color-press: var(--hop-neutral-icon-press);
|
|
1479
|
+
--hop-comp-tag-icon-color-hover: var(--hop-neutral-icon-hover);
|
|
1480
|
+
--hop-comp-tag-icon-color: var(--hop-neutral-icon);
|
|
1481
|
+
--hop-comp-tag-text-color-error: var(--hop-danger-text-weak);
|
|
1482
|
+
--hop-comp-tag-text-color-disabled: var(--hop-neutral-text-disabled);
|
|
1483
|
+
--hop-comp-tag-text-color-selected: var(--hop-neutral-text-always-light);
|
|
1484
|
+
--hop-comp-tag-text-color-press: var(--hop-neutral-text-press);
|
|
1485
|
+
--hop-comp-tag-text-color-hover: var(--hop-neutral-text-hover);
|
|
1486
|
+
--hop-comp-tag-text-color: var(--hop-neutral-text);
|
|
1487
|
+
--hop-comp-tag-border-color-focus: var(--hop-primary-border-focus);
|
|
1488
|
+
--hop-comp-tag-border-color-error: var(--hop-danger-border-strong);
|
|
1489
|
+
--hop-comp-tag-border-color-disabled: var(--hop-neutral-border-weak);
|
|
1490
|
+
--hop-comp-tag-border-color: var(--hop-neutral-border-weak);
|
|
1491
|
+
--hop-comp-tag-background-color-disabled: var(--hop-neutral-surface-disabled);
|
|
1492
|
+
--hop-comp-tag-background-color-selected: var(--hop-primary-surface-strong);
|
|
1493
|
+
--hop-comp-tag-background-color-press: var(--hop-primary-surface-weak-press);
|
|
1494
|
+
--hop-comp-tag-background-color-hover: var(--hop-primary-surface-weak-hover);
|
|
1495
|
+
--hop-comp-tag-background-color: var(--hop-neutral-surface);
|
|
1496
|
+
--hop-comp-tag-border-radius: var(--hop-shape-rounded-sm);
|
|
1415
1497
|
--hop-comp-tabs-tab-panel-border-color-focus: var(--hop-primary-border-focus);
|
|
1416
1498
|
--hop-comp-tabs-tab-border-radius: var(--hop-shape-rounded-sm);
|
|
1417
1499
|
--hop-comp-tabs-tab-border-color-disabled: var(--hop-neutral-border-disabled);
|
|
@@ -1658,6 +1740,10 @@
|
|
|
1658
1740
|
--hop-comp-button-primary-text-color-pressed: var(--hop-neutral-text-always-light);
|
|
1659
1741
|
--hop-comp-button-primary-text-color-hover: var(--hop-neutral-text-always-light);
|
|
1660
1742
|
--hop-comp-button-primary-text-color: var(--hop-neutral-text-always-light);
|
|
1743
|
+
--hop-comp-button-text-font-size-xs: var(--hop-caption-md-font-size);
|
|
1744
|
+
--hop-comp-button-text-font-size-sm: var(--hop-caption-lg-font-size);
|
|
1745
|
+
--hop-comp-button-text-font-size-md: var(--hop-caption-xl-font-size);
|
|
1746
|
+
--hop-comp-button-text-font: var(--hop-caption-md-font-family);
|
|
1661
1747
|
--hop-comp-button-icon-color-disabled: var(--hop-neutral-icon-disabled);
|
|
1662
1748
|
--hop-comp-button-text-color-disabled: var(--hop-neutral-text-disabled);
|
|
1663
1749
|
--hop-comp-button-border-color-focus: var(--hop-primary-border-focus);
|
package/dist/workleap/tokens.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
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;
|
|
@@ -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);
|
|
@@ -1402,6 +1455,35 @@
|
|
|
1402
1455
|
--hop-comp-tile-background-color-press: var(--hop-neutral-surface-press);
|
|
1403
1456
|
--hop-comp-tile-background-color-hover: var(--hop-neutral-surface-hover);
|
|
1404
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);
|
|
1405
1487
|
--hop-comp-tabs-tab-panel-border-color-focus: var(--hop-primary-border-focus);
|
|
1406
1488
|
--hop-comp-tabs-tab-list-border-radius: var(--hop-shape-rounded-md);
|
|
1407
1489
|
--hop-comp-tabs-tab-list-background-color: var(--hop-neutral-surface-weakest);
|
|
@@ -1657,6 +1739,10 @@
|
|
|
1657
1739
|
--hop-comp-button-primary-text-color-pressed: var(--hop-primary-text-strong);
|
|
1658
1740
|
--hop-comp-button-primary-text-color-hover: var(--hop-primary-text-strong-hover);
|
|
1659
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);
|
|
1660
1746
|
--hop-comp-button-icon-color-disabled: var(--hop-neutral-icon-disabled);
|
|
1661
1747
|
--hop-comp-button-text-color-disabled: var(--hop-neutral-text-disabled);
|
|
1662
1748
|
--hop-comp-button-border-color-focus: var(--hop-primary-border-focus);
|