@hopper-ui/styled-system 3.2.2 → 4.0.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 (35) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/dist/StyledSystemProvider.css +34 -34
  3. package/dist/StyledSystemProvider.js +9 -9
  4. package/dist/{chunk-ASSKAO2A.js → chunk-2BMH444W.js} +45 -5
  5. package/dist/{chunk-VYSHJ4BC.js → chunk-3W57BWQT.js} +3 -3
  6. package/dist/{chunk-UR27V3AY.js → chunk-BLSIMXE7.js} +3 -3
  7. package/dist/{chunk-ODDLVJ3T.js → chunk-G37OO232.js} +1 -1
  8. package/dist/{chunk-WMA6YQHA.js → chunk-LLGTCJEP.js} +2 -2
  9. package/dist/{chunk-46R7LA5R.js → chunk-QAUUAHRK.js} +1 -1
  10. package/dist/{chunk-2B3FQDBI.js → chunk-RIOM7ASY.js} +1 -1
  11. package/dist/{chunk-F5DBKR5B.js → chunk-TSN5DPDB.js} +1 -1
  12. package/dist/{chunk-YFZ3HPSH.js → chunk-TZCNHN3Q.js} +4 -3
  13. package/dist/global-styles/BodyStyleProvider.js +2 -2
  14. package/dist/html-wrappers/html.css +34 -34
  15. package/dist/html-wrappers/html.js +6 -6
  16. package/dist/html-wrappers/htmlElement.css +34 -34
  17. package/dist/html-wrappers/htmlElement.js +5 -5
  18. package/dist/index.css +34 -34
  19. package/dist/index.d.ts +1 -1
  20. package/dist/index.js +9 -9
  21. package/dist/styledSystemProps.d.ts +13 -5
  22. package/dist/styledSystemRootCssClass.js +2 -2
  23. package/dist/theme/generated/sharegate/dark.css +273 -259
  24. package/dist/theme/generated/sharegate/light.css +307 -220
  25. package/dist/theme/generated/workleap/dark.css +27 -13
  26. package/dist/theme/generated/workleap/light.css +100 -13
  27. package/dist/tokens/generated/styledSystemConstants.d.ts +1 -1
  28. package/dist/tokens/generated/styledSystemConstants.js +1 -1
  29. package/dist/tokens/generated/styledSystemToTokenMappings.d.ts +42 -2
  30. package/dist/tokens/generated/styledSystemToTokenMappings.js +1 -1
  31. package/dist/tokens/tokenMappings.d.ts +42 -38
  32. package/dist/tokens/tokenMappings.js +3 -3
  33. package/dist/useStyledSystem.css +31 -31
  34. package/dist/useStyledSystem.js +4 -4
  35. package/package.json +2 -2
package/dist/theme/generated/sharegate/light.css CHANGED
@@ -2,7 +2,7 @@
2
2
  * This file is generated by Style Dictionary. Do not edit directly.
3
3
  */
4
4
 
5
- .hop-5-2-2-sharegate {
5
+ .hop-5-3-0-sharegate {
6
6
  --hop-comp-tooltip-box-shadow: 0 4px 10px 4px rgba(0, 0, 0, 0.08), 0 8px 24px 0 rgba(0, 0, 0, 0.12);
7
7
  --hop-comp-tooltip-backdrop-filter: blur(10px);
8
8
  --hop-comp-tile-icon-color: transparent;
@@ -15,6 +15,10 @@
15
15
  --hop-comp-tile-border-color-press: transparent;
16
16
  --hop-comp-tile-border-color-hover: transparent;
17
17
  --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);
18
+ --hop-comp-tag-text-transform: uppercase;
19
+ --hop-comp-tag-border-color-selected: transparent;
20
+ --hop-comp-tag-border-color-press: transparent;
21
+ --hop-comp-tag-border-color-hover: transparent;
18
22
  --hop-comp-tabs-tab-list-border-radius: NaNrem;
19
23
  --hop-comp-tabs-tab-list-border: none;
20
24
  --hop-comp-tabs-tab-list-background-color: transparent;
@@ -61,8 +65,8 @@
61
65
  --hop-comp-button-ghost-primary-background-loading: transparent;
62
66
  --hop-comp-button-ghost-primary-background: transparent;
63
67
  --hop-comp-button-ghost-primary-box-shadow: none;
64
- --hop-comp-button-danger-box-shadow-loading: none;
65
- --hop-comp-button-danger-box-shadow: none;
68
+ --hop-comp-button-danger-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;
69
+ --hop-comp-button-danger-box-shadow: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 4px 0 rgba(0, 0, 0, 0.10) inset;
66
70
  --hop-comp-button-upsell-border-color-disabled: transparent;
67
71
  --hop-comp-button-upsell-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;
68
72
  --hop-comp-button-upsell-box-shadow: none;
@@ -72,6 +76,7 @@
72
76
  --hop-comp-button-primary-border-color-disabled: transparent;
73
77
  --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;
74
78
  --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;
79
+ --hop-comp-button-text-transform: uppercase;
75
80
  --hop-overline-bottom-offset: -0.25rem;
76
81
  --hop-overline-top-offset: -0.25rem;
77
82
  --hop-heading-xs-medium-bottom-offset: -0.25rem;
@@ -380,11 +385,23 @@
380
385
  --hop-easing-duration-3: 300ms;
381
386
  --hop-easing-duration-2: 200ms;
382
387
  --hop-easing-duration-1: 100ms;
388
+ --hop-letter-spacing-wide-30: 0.1875rem;
389
+ --hop-letter-spacing-wide-25: 0.15625rem;
390
+ --hop-letter-spacing-wide-20: 0.125rem;
391
+ --hop-letter-spacing-wide-15: 0.09375rem;
392
+ --hop-letter-spacing-wide-10: 0.0625rem;
393
+ --hop-letter-spacing-wide-5: 0.03125rem;
394
+ --hop-letter-spacing-dense-5: -0.03125rem;
395
+ --hop-letter-spacing-dense-10: -0.0625rem;
396
+ --hop-letter-spacing-0: 0;
383
397
  --hop-line-height-1-50: 1.5;
384
398
  --hop-line-height-1-4285: 1.4285714;
399
+ --hop-line-height-1-40: 1.4;
385
400
  --hop-line-height-1-33: 1.3333333;
401
+ --hop-line-height-1-2857: 1.2857142;
386
402
  --hop-line-height-1-25: 1.25;
387
403
  --hop-line-height-1-20: 1.2;
404
+ --hop-line-height-1-1666: 1.1666666;
388
405
  --hop-line-height-1-14: 1.1428571;
389
406
  --hop-line-height-1-125: 1.125;
390
407
  --hop-font-weight-690: 690;
@@ -404,6 +421,7 @@
404
421
  --hop-font-size-160: 1rem;
405
422
  --hop-font-size-140: 0.875rem;
406
423
  --hop-font-size-120: 0.75rem;
424
+ --hop-font-size-100: 0.625rem;
407
425
  --hop-font-family-tertiary: 'ABC Favorit Mono', Consolas, 'SF Mono', monospace;
408
426
  --hop-font-family-secondary: 'Inter', Helvetica, Arial, sans-serif;
409
427
  --hop-font-family-primary: 'ABC Favorit', Helvetica, Arial, sans-serif;
@@ -447,18 +465,18 @@
447
465
  --hop-amber-75: #ffe39a;
448
466
  --hop-amber-50: #fff1cc;
449
467
  --hop-amber-25: #fff6e0;
450
- --hop-rose-900: #2b1e23;
451
- --hop-rose-800: #3d2630;
452
- --hop-rose-700: #542f3e;
453
- --hop-rose-600: #6a394c;
454
- --hop-rose-500: #80435a;
455
- --hop-rose-400: #995068;
456
- --hop-rose-300: #fc5992;
457
- --hop-rose-200: #f47c9e;
458
- --hop-rose-100: #f7a3ba;
459
- --hop-rose-75: #f9c1cf;
460
- --hop-rose-50: #fbd6df;
461
- --hop-rose-25: #fdecef;
468
+ --hop-rose-900: #341417;
469
+ --hop-rose-800: #50161c;
470
+ --hop-rose-700: #711822;
471
+ --hop-rose-600: #951b2a;
472
+ --hop-rose-500: #ba1f34;
473
+ --hop-rose-400: #de2840;
474
+ --hop-rose-300: #f5425d;
475
+ --hop-rose-200: #f76d83;
476
+ --hop-rose-100: #fa9ba9;
477
+ --hop-rose-75: #fcbcc5;
478
+ --hop-rose-50: #fdd3d8;
479
+ --hop-rose-25: #feeaec;
462
480
  --hop-samoyed: #ffffff;
463
481
  --hop-rock-900: #232426;
464
482
  --hop-rock-800: #313335;
@@ -631,6 +649,13 @@
631
649
  --hop-coastal-50: #d9efff;
632
650
  --hop-coastal-25: #f0f8ff;
633
651
  --hop-comp-tooltip-background: var(--hop-neutral-surface-weak-transparent-always-dark);
652
+ --hop-comp-tag-text-font-letterspacing-lg: var(--hop-letter-spacing-wide-30);
653
+ --hop-comp-tag-text-font-lineheight-lg: var(--hop-line-height-1-2857);
654
+ --hop-comp-tag-text-font-letterspacing-md: var(--hop-letter-spacing-wide-20);
655
+ --hop-comp-tag-text-font-lineheight-md: var(--hop-line-height-1-33);
656
+ --hop-comp-tag-text-font-letterspacing-sm: var(--hop-letter-spacing-wide-20);
657
+ --hop-comp-tag-text-font-lineheight-sm: var(--hop-line-height-1-33);
658
+ --hop-comp-tag-text-font-weight: var(--hop-font-weight-410);
634
659
  --hop-comp-tabs-tab-list-border-block-end: var(--hop-space-10) solid var(--hop-neutral-border-weak);
635
660
  --hop-comp-popover-border: var(--hop-space-10) solid var(--hop-neutral-border-weak);
636
661
  --hop-comp-popover-background: var(--hop-neutral-surface-transparent);
@@ -640,23 +665,56 @@
640
665
  --hop-comp-callout-warning-icon-fill-color: var(--hop-samoyed);
641
666
  --hop-comp-callout-success-icon-fill-color: var(--hop-samoyed);
642
667
  --hop-comp-callout-information-icon-fill-color: var(--hop-samoyed);
668
+ --hop-comp-button-danger-background-loading: linear-gradient(var(--hop-rose-300), var(--hop-rose-600) 100%);
669
+ --hop-comp-button-danger-background: linear-gradient(var(--hop-rose-300), var(--hop-rose-600) 100%);
643
670
  --hop-comp-button-upsell-background-loading: linear-gradient(var(--hop-limeburst-50), var(--hop-persimmon-300) 151%);
644
671
  --hop-comp-button-upsell-background: linear-gradient(var(--hop-limeburst-50), var(--hop-persimmon-300) 151%);
645
672
  --hop-comp-button-primary-background-loading: linear-gradient(var(--hop-iris-300), var(--hop-iris-600) 100%);
646
673
  --hop-comp-button-primary-background: linear-gradient(var(--hop-iris-300), var(--hop-iris-600) 100%);
674
+ --hop-comp-button-text-font-letterspacing-xs: var(--hop-letter-spacing-wide-15);
675
+ --hop-comp-button-text-font-lineheight-xs: var(--hop-line-height-1-33);
676
+ --hop-comp-button-text-font-letterspacing-sm: var(--hop-letter-spacing-wide-20);
677
+ --hop-comp-button-text-font-lineheight-sm: var(--hop-line-height-1-4285);
678
+ --hop-comp-button-text-font-letterspacing-md: var(--hop-letter-spacing-wide-25);
679
+ --hop-comp-button-text-font-lineheight-md: var(--hop-line-height-1-50);
680
+ --hop-comp-button-text-font-weight: var(--hop-font-weight-410);
647
681
  --hop-shape-rounded-sm: var(--hop-border-radius-1);
648
682
  --hop-shape-rounded-md: var(--hop-border-radius-2);
649
683
  --hop-shape-rounded-lg: var(--hop-border-radius-3);
650
684
  --hop-shape-pill: var(--hop-border-radius-4);
651
685
  --hop-shape-circle: var(--hop-border-radius-9999);
686
+ --hop-caption-sm-line-height: var(--hop-line-height-1-40);
687
+ --hop-caption-sm-font-weight: var(--hop-font-weight-410);
688
+ --hop-caption-sm-font-size: var(--hop-font-size-100);
689
+ --hop-caption-sm-font-family: var(--hop-font-family-tertiary);
690
+ --hop-caption-md-line-height: var(--hop-line-height-1-33);
691
+ --hop-caption-md-font-weight: var(--hop-font-weight-410);
692
+ --hop-caption-md-font-size: var(--hop-font-size-120);
693
+ --hop-caption-md-font-family: var(--hop-font-family-tertiary);
694
+ --hop-caption-lg-line-height: var(--hop-line-height-1-4285);
695
+ --hop-caption-lg-font-weight: var(--hop-font-weight-410);
696
+ --hop-caption-lg-font-size: var(--hop-font-size-140);
697
+ --hop-caption-lg-font-family: var(--hop-font-family-tertiary);
698
+ --hop-caption-xl-line-height: var(--hop-line-height-1-50);
699
+ --hop-caption-xl-font-weight: var(--hop-font-weight-410);
700
+ --hop-caption-xl-font-size: var(--hop-font-size-160);
701
+ --hop-caption-xl-font-family: var(--hop-font-family-tertiary);
702
+ --hop-accent-xs-line-height: var(--hop-line-height-1-4285);
703
+ --hop-accent-xs-font-weight: var(--hop-font-weight-580);
704
+ --hop-accent-xs-font-size: var(--hop-font-size-140);
705
+ --hop-accent-xs-font-family: var(--hop-font-family-tertiary);
652
706
  --hop-accent-sm-line-height: var(--hop-line-height-1-33);
653
707
  --hop-accent-sm-font-weight: var(--hop-font-weight-580);
654
708
  --hop-accent-sm-font-size: var(--hop-font-size-180);
655
- --hop-accent-sm-font-family: var(--hop-font-family-primary);
656
- --hop-accent-lg-line-height: var(--hop-line-height-1-125);
709
+ --hop-accent-sm-font-family: var(--hop-font-family-tertiary);
710
+ --hop-accent-md-line-height: var(--hop-line-height-1-14);
711
+ --hop-accent-md-font-weight: var(--hop-font-weight-580);
712
+ --hop-accent-md-font-size: var(--hop-font-size-280);
713
+ --hop-accent-md-font-family: var(--hop-font-family-tertiary);
714
+ --hop-accent-lg-line-height: var(--hop-line-height-1-1666);
657
715
  --hop-accent-lg-font-weight: var(--hop-font-weight-580);
658
716
  --hop-accent-lg-font-size: var(--hop-font-size-480);
659
- --hop-accent-lg-font-family: var(--hop-font-family-primary);
717
+ --hop-accent-lg-font-family: var(--hop-font-family-tertiary);
660
718
  --hop-body-xs-underline-line-height: var(--hop-line-height-1-33);
661
719
  --hop-body-xs-underline-font-weight: var(--hop-font-weight-505);
662
720
  --hop-body-xs-underline-font-size: var(--hop-font-size-120);
@@ -790,88 +848,88 @@
790
848
  --hop-dataviz-unavailable-strong: var(--hop-rock-100);
791
849
  --hop-dataviz-unavailable-weak: var(--hop-rock-50);
792
850
  --hop-dataviz-unavailable: var(--hop-rock-75);
793
- --hop-warning-text-weak: var(--hop-koi-300);
794
- --hop-warning-text: var(--hop-koi-700);
795
- --hop-warning-surface-weak: var(--hop-koi-50);
796
- --hop-warning-surface-strong: var(--hop-koi-100);
797
- --hop-warning-surface: var(--hop-koi-25);
798
- --hop-warning-icon-weak: var(--hop-koi-300);
799
- --hop-warning-icon-weakest: var(--hop-koi-100);
800
- --hop-warning-icon: var(--hop-koi-700);
801
- --hop-warning-border: var(--hop-koi-100);
802
- --hop-success-text-weak: var(--hop-moss-300);
803
- --hop-success-text-hover: var(--hop-moss-800);
804
- --hop-success-text: var(--hop-moss-700);
805
- --hop-success-surface-weak: var(--hop-moss-50);
806
- --hop-success-surface-strong: var(--hop-moss-100);
807
- --hop-success-surface: var(--hop-moss-25);
808
- --hop-success-icon-weak: var(--hop-moss-300);
809
- --hop-success-icon-weakest: var(--hop-moss-100);
810
- --hop-success-icon: var(--hop-moss-700);
811
- --hop-success-border: var(--hop-moss-100);
812
- --hop-status-progress-text-selected: var(--hop-sapphire-500);
813
- --hop-status-progress-text-press: var(--hop-sapphire-800);
814
- --hop-status-progress-text-hover: var(--hop-sapphire-700);
815
- --hop-status-progress-text-disabled: var(--hop-sapphire-200);
816
- --hop-status-progress-text: var(--hop-sapphire-600);
817
- --hop-status-progress-surface-strong: var(--hop-sapphire-200);
818
- --hop-status-progress-surface-selected: var(--hop-sapphire-50);
819
- --hop-status-progress-surface-press: var(--hop-sapphire-100);
820
- --hop-status-progress-surface-hover: var(--hop-sapphire-75);
821
- --hop-status-progress-surface-disabled: var(--hop-sapphire-25);
822
- --hop-status-progress-surface: var(--hop-sapphire-50);
823
- --hop-status-progress-icon-selected: var(--hop-sapphire-500);
824
- --hop-status-progress-icon-press: var(--hop-sapphire-800);
825
- --hop-status-progress-icon-hover: var(--hop-sapphire-700);
826
- --hop-status-progress-icon-disabled: var(--hop-sapphire-200);
827
- --hop-status-progress-icon: var(--hop-sapphire-600);
828
- --hop-status-progress-border-selected: var(--hop-sapphire-400);
829
- --hop-status-progress-border-press: var(--hop-sapphire-500);
830
- --hop-status-progress-border-hover: var(--hop-sapphire-400);
831
- --hop-status-progress-border-disabled: var(--hop-sapphire-50);
832
- --hop-status-progress-border: var(--hop-sapphire-300);
833
- --hop-status-positive-text-selected: var(--hop-moss-700);
834
- --hop-status-positive-text-press: var(--hop-moss-800);
835
- --hop-status-positive-text-hover: var(--hop-moss-700);
836
- --hop-status-positive-text-disabled: var(--hop-moss-200);
837
- --hop-status-positive-text: var(--hop-moss-600);
838
- --hop-status-positive-surface-strong: var(--hop-moss-200);
839
- --hop-status-positive-surface-selected: var(--hop-moss-50);
840
- --hop-status-positive-surface-press: var(--hop-moss-100);
841
- --hop-status-positive-surface-hover: var(--hop-moss-75);
842
- --hop-status-positive-surface-disabled: var(--hop-moss-25);
843
- --hop-status-positive-surface: var(--hop-moss-50);
844
- --hop-status-positive-icon-selected: var(--hop-moss-700);
845
- --hop-status-positive-icon-press: var(--hop-moss-800);
846
- --hop-status-positive-icon-hover: var(--hop-moss-700);
847
- --hop-status-positive-icon-disabled: var(--hop-moss-200);
848
- --hop-status-positive-icon: var(--hop-moss-600);
849
- --hop-status-positive-border-selected: var(--hop-moss-700);
850
- --hop-status-positive-border-press: var(--hop-moss-500);
851
- --hop-status-positive-border-hover: var(--hop-moss-400);
852
- --hop-status-positive-border-disabled: var(--hop-moss-50);
853
- --hop-status-positive-border: var(--hop-moss-300);
854
- --hop-status-option6-text-selected: var(--hop-sunken-treasure-700);
855
- --hop-status-option6-text-press: var(--hop-sunken-treasure-800);
856
- --hop-status-option6-text-hover: var(--hop-sunken-treasure-700);
857
- --hop-status-option6-text-disabled: var(--hop-sunken-treasure-200);
858
- --hop-status-option6-text: var(--hop-sunken-treasure-600);
859
- --hop-status-option6-surface-strong: var(--hop-sunken-treasure-200);
860
- --hop-status-option6-surface-selected: var(--hop-sunken-treasure-50);
861
- --hop-status-option6-surface-press: var(--hop-sunken-treasure-100);
862
- --hop-status-option6-surface-hover: var(--hop-sunken-treasure-50);
863
- --hop-status-option6-surface-disabled: var(--hop-sunken-treasure-25);
864
- --hop-status-option6-surface: var(--hop-sunken-treasure-25);
865
- --hop-status-option6-icon-selected: var(--hop-sunken-treasure-700);
866
- --hop-status-option6-icon-press: var(--hop-sunken-treasure-800);
867
- --hop-status-option6-icon-hover: var(--hop-sunken-treasure-700);
868
- --hop-status-option6-icon-disabled: var(--hop-sunken-treasure-200);
869
- --hop-status-option6-icon: var(--hop-sunken-treasure-600);
870
- --hop-status-option6-border-selected: var(--hop-sunken-treasure-700);
871
- --hop-status-option6-border-press: var(--hop-sunken-treasure-500);
872
- --hop-status-option6-border-hover: var(--hop-sunken-treasure-400);
873
- --hop-status-option6-border-disabled: var(--hop-sunken-treasure-50);
874
- --hop-status-option6-border: var(--hop-sunken-treasure-300);
851
+ --hop-warning-text-weak: var(--hop-amber-300);
852
+ --hop-warning-text: var(--hop-amber-700);
853
+ --hop-warning-surface-weak: var(--hop-amber-50);
854
+ --hop-warning-surface-strong: var(--hop-amber-100);
855
+ --hop-warning-surface: var(--hop-amber-25);
856
+ --hop-warning-icon-weak: var(--hop-amber-300);
857
+ --hop-warning-icon-weakest: var(--hop-amber-100);
858
+ --hop-warning-icon: var(--hop-amber-700);
859
+ --hop-warning-border: var(--hop-amber-100);
860
+ --hop-success-text-weak: var(--hop-mint-300);
861
+ --hop-success-text-hover: var(--hop-mint-800);
862
+ --hop-success-text: var(--hop-mint-700);
863
+ --hop-success-surface-weak: var(--hop-mint-50);
864
+ --hop-success-surface-strong: var(--hop-mint-100);
865
+ --hop-success-surface: var(--hop-mint-25);
866
+ --hop-success-icon-weak: var(--hop-mint-300);
867
+ --hop-success-icon-weakest: var(--hop-mint-100);
868
+ --hop-success-icon: var(--hop-mint-700);
869
+ --hop-success-border: var(--hop-mint-100);
870
+ --hop-status-progress-text-selected: var(--hop-cobalt-700);
871
+ --hop-status-progress-text-press: var(--hop-cobalt-800);
872
+ --hop-status-progress-text-hover: var(--hop-cobalt-700);
873
+ --hop-status-progress-text-disabled: var(--hop-cobalt-200);
874
+ --hop-status-progress-text: var(--hop-cobalt-600);
875
+ --hop-status-progress-surface-strong: var(--hop-cobalt-200);
876
+ --hop-status-progress-surface-selected: var(--hop-cobalt-50);
877
+ --hop-status-progress-surface-press: var(--hop-cobalt-100);
878
+ --hop-status-progress-surface-hover: var(--hop-cobalt-75);
879
+ --hop-status-progress-surface-disabled: var(--hop-cobalt-25);
880
+ --hop-status-progress-surface: var(--hop-cobalt-50);
881
+ --hop-status-progress-icon-selected: var(--hop-cobalt-700);
882
+ --hop-status-progress-icon-press: var(--hop-cobalt-800);
883
+ --hop-status-progress-icon-hover: var(--hop-cobalt-700);
884
+ --hop-status-progress-icon-disabled: var(--hop-cobalt-200);
885
+ --hop-status-progress-icon: var(--hop-cobalt-600);
886
+ --hop-status-progress-border-selected: var(--hop-cobalt-700);
887
+ --hop-status-progress-border-press: var(--hop-cobalt-500);
888
+ --hop-status-progress-border-hover: var(--hop-cobalt-400);
889
+ --hop-status-progress-border-disabled: var(--hop-cobalt-50);
890
+ --hop-status-progress-border: var(--hop-cobalt-300);
891
+ --hop-status-positive-text-selected: var(--hop-mint-700);
892
+ --hop-status-positive-text-press: var(--hop-mint-800);
893
+ --hop-status-positive-text-hover: var(--hop-mint-700);
894
+ --hop-status-positive-text-disabled: var(--hop-mint-200);
895
+ --hop-status-positive-text: var(--hop-mint-600);
896
+ --hop-status-positive-surface-strong: var(--hop-mint-200);
897
+ --hop-status-positive-surface-selected: var(--hop-mint-50);
898
+ --hop-status-positive-surface-press: var(--hop-mint-100);
899
+ --hop-status-positive-surface-hover: var(--hop-mint-75);
900
+ --hop-status-positive-surface-disabled: var(--hop-mint-25);
901
+ --hop-status-positive-surface: var(--hop-mint-50);
902
+ --hop-status-positive-icon-selected: var(--hop-mint-700);
903
+ --hop-status-positive-icon-press: var(--hop-mint-800);
904
+ --hop-status-positive-icon-hover: var(--hop-mint-700);
905
+ --hop-status-positive-icon-disabled: var(--hop-mint-200);
906
+ --hop-status-positive-icon: var(--hop-mint-600);
907
+ --hop-status-positive-border-selected: var(--hop-mint-700);
908
+ --hop-status-positive-border-press: var(--hop-mint-500);
909
+ --hop-status-positive-border-hover: var(--hop-mint-400);
910
+ --hop-status-positive-border-disabled: var(--hop-mint-50);
911
+ --hop-status-positive-border: var(--hop-mint-300);
912
+ --hop-status-option6-text-selected: var(--hop-limeburst-700);
913
+ --hop-status-option6-text-press: var(--hop-limeburst-800);
914
+ --hop-status-option6-text-hover: var(--hop-limeburst-700);
915
+ --hop-status-option6-text-disabled: var(--hop-limeburst-200);
916
+ --hop-status-option6-text: var(--hop-limeburst-600);
917
+ --hop-status-option6-surface-strong: var(--hop-limeburst-200);
918
+ --hop-status-option6-surface-selected: var(--hop-limeburst-50);
919
+ --hop-status-option6-surface-press: var(--hop-limeburst-100);
920
+ --hop-status-option6-surface-hover: var(--hop-limeburst-75);
921
+ --hop-status-option6-surface-disabled: var(--hop-limeburst-25);
922
+ --hop-status-option6-surface: var(--hop-limeburst-50);
923
+ --hop-status-option6-icon-selected: var(--hop-limeburst-700);
924
+ --hop-status-option6-icon-press: var(--hop-limeburst-800);
925
+ --hop-status-option6-icon-hover: var(--hop-limeburst-700);
926
+ --hop-status-option6-icon-disabled: var(--hop-limeburst-200);
927
+ --hop-status-option6-icon: var(--hop-limeburst-600);
928
+ --hop-status-option6-border-selected: var(--hop-limeburst-700);
929
+ --hop-status-option6-border-press: var(--hop-limeburst-500);
930
+ --hop-status-option6-border-hover: var(--hop-limeburst-400);
931
+ --hop-status-option6-border-disabled: var(--hop-limeburst-50);
932
+ --hop-status-option6-border: var(--hop-limeburst-300);
875
933
  --hop-status-option5-text-selected: var(--hop-toad-700);
876
934
  --hop-status-option5-text-press: var(--hop-toad-800);
877
935
  --hop-status-option5-text-hover: var(--hop-toad-700);
@@ -914,69 +972,69 @@
914
972
  --hop-status-option4-border-hover: var(--hop-fog-400);
915
973
  --hop-status-option4-border-disabled: var(--hop-fog-50);
916
974
  --hop-status-option4-border: var(--hop-fog-300);
917
- --hop-status-option3-text-selected: var(--hop-quetzal-700);
918
- --hop-status-option3-text-press: var(--hop-quetzal-800);
919
- --hop-status-option3-text-hover: var(--hop-quetzal-700);
920
- --hop-status-option3-text-disabled: var(--hop-quetzal-200);
921
- --hop-status-option3-text: var(--hop-quetzal-600);
922
- --hop-status-option3-surface-strong: var(--hop-quetzal-200);
923
- --hop-status-option3-surface-selected: var(--hop-quetzal-700);
924
- --hop-status-option3-surface-press: var(--hop-quetzal-100);
925
- --hop-status-option3-surface-hover: var(--hop-quetzal-75);
926
- --hop-status-option3-surface-disabled: var(--hop-quetzal-25);
927
- --hop-status-option3-surface: var(--hop-quetzal-50);
928
- --hop-status-option3-icon-selected: var(--hop-quetzal-700);
929
- --hop-status-option3-icon-press: var(--hop-quetzal-800);
930
- --hop-status-option3-icon-hover: var(--hop-quetzal-700);
931
- --hop-status-option3-icon-disabled: var(--hop-quetzal-200);
932
- --hop-status-option3-icon: var(--hop-quetzal-600);
933
- --hop-status-option3-border-selected: var(--hop-quetzal-50);
934
- --hop-status-option3-border-press: var(--hop-quetzal-500);
935
- --hop-status-option3-border-hover: var(--hop-quetzal-400);
936
- --hop-status-option3-border-disabled: var(--hop-quetzal-50);
937
- --hop-status-option3-border: var(--hop-quetzal-300);
938
- --hop-status-option2-text-selected: var(--hop-orchid-bloom-700);
939
- --hop-status-option2-text-press: var(--hop-orchid-bloom-800);
940
- --hop-status-option2-text-hover: var(--hop-orchid-bloom-700);
941
- --hop-status-option2-text-disabled: var(--hop-orchid-bloom-200);
942
- --hop-status-option2-text: var(--hop-orchid-bloom-600);
943
- --hop-status-option2-surface-strong: var(--hop-orchid-bloom-200);
944
- --hop-status-option2-surface-selected: var(--hop-orchid-bloom-50);
945
- --hop-status-option2-surface-press: var(--hop-orchid-bloom-100);
946
- --hop-status-option2-surface-hover: var(--hop-orchid-bloom-75);
947
- --hop-status-option2-surface-disabled: var(--hop-orchid-bloom-25);
948
- --hop-status-option2-surface: var(--hop-orchid-bloom-50);
949
- --hop-status-option2-icon-selected: var(--hop-orchid-bloom-700);
950
- --hop-status-option2-icon-press: var(--hop-orchid-bloom-800);
951
- --hop-status-option2-icon-hover: var(--hop-orchid-bloom-700);
952
- --hop-status-option2-icon-disabled: var(--hop-orchid-bloom-200);
953
- --hop-status-option2-icon: var(--hop-orchid-bloom-600);
954
- --hop-status-option2-border-selected: var(--hop-orchid-bloom-700);
955
- --hop-status-option2-border-press: var(--hop-orchid-bloom-500);
956
- --hop-status-option2-border-hover: var(--hop-orchid-bloom-400);
957
- --hop-status-option2-border-disabled: var(--hop-orchid-bloom-50);
958
- --hop-status-option2-border: var(--hop-orchid-bloom-300);
959
- --hop-status-option1-text-selected: var(--hop-coastal-700);
960
- --hop-status-option1-text-press: var(--hop-coastal-800);
961
- --hop-status-option1-text-hover: var(--hop-coastal-700);
962
- --hop-status-option1-text-disabled: var(--hop-coastal-200);
963
- --hop-status-option1-text: var(--hop-coastal-600);
964
- --hop-status-option1-surface-strong: var(--hop-coastal-200);
965
- --hop-status-option1-surface-selected: var(--hop-coastal-50);
966
- --hop-status-option1-surface-press: var(--hop-coastal-100);
967
- --hop-status-option1-surface-hover: var(--hop-coastal-75);
968
- --hop-status-option1-surface-disabled: var(--hop-coastal-25);
969
- --hop-status-option1-surface: var(--hop-coastal-50);
970
- --hop-status-option1-icon-selected: var(--hop-coastal-700);
971
- --hop-status-option1-icon-press: var(--hop-coastal-800);
972
- --hop-status-option1-icon-hover: var(--hop-coastal-700);
973
- --hop-status-option1-icon-disabled: var(--hop-coastal-200);
974
- --hop-status-option1-icon: var(--hop-coastal-600);
975
- --hop-status-option1-border-selected: var(--hop-coastal-700);
976
- --hop-status-option1-border-press: var(--hop-coastal-500);
977
- --hop-status-option1-border-hover: var(--hop-coastal-400);
978
- --hop-status-option1-border-disabled: var(--hop-coastal-50);
979
- --hop-status-option1-border: var(--hop-coastal-300);
975
+ --hop-status-option3-text-selected: var(--hop-moss-700);
976
+ --hop-status-option3-text-press: var(--hop-moss-800);
977
+ --hop-status-option3-text-hover: var(--hop-moss-700);
978
+ --hop-status-option3-text-disabled: var(--hop-moss-200);
979
+ --hop-status-option3-text: var(--hop-moss-600);
980
+ --hop-status-option3-surface-strong: var(--hop-moss-200);
981
+ --hop-status-option3-surface-selected: var(--hop-moss-50);
982
+ --hop-status-option3-surface-press: var(--hop-moss-100);
983
+ --hop-status-option3-surface-hover: var(--hop-moss-75);
984
+ --hop-status-option3-surface-disabled: var(--hop-moss-25);
985
+ --hop-status-option3-surface: var(--hop-moss-50);
986
+ --hop-status-option3-icon-selected: var(--hop-moss-700);
987
+ --hop-status-option3-icon-press: var(--hop-moss-800);
988
+ --hop-status-option3-icon-hover: var(--hop-moss-700);
989
+ --hop-status-option3-icon-disabled: var(--hop-moss-200);
990
+ --hop-status-option3-icon: var(--hop-moss-600);
991
+ --hop-status-option3-border-selected: var(--hop-moss-700);
992
+ --hop-status-option3-border-press: var(--hop-moss-500);
993
+ --hop-status-option3-border-hover: var(--hop-moss-400);
994
+ --hop-status-option3-border-disabled: var(--hop-moss-50);
995
+ --hop-status-option3-border: var(--hop-moss-300);
996
+ --hop-status-option2-text-selected: var(--hop-persimmon-700);
997
+ --hop-status-option2-text-press: var(--hop-persimmon-800);
998
+ --hop-status-option2-text-hover: var(--hop-persimmon-700);
999
+ --hop-status-option2-text-disabled: var(--hop-persimmon-200);
1000
+ --hop-status-option2-text: var(--hop-persimmon-600);
1001
+ --hop-status-option2-surface-strong: var(--hop-persimmon-200);
1002
+ --hop-status-option2-surface-selected: var(--hop-persimmon-50);
1003
+ --hop-status-option2-surface-press: var(--hop-persimmon-100);
1004
+ --hop-status-option2-surface-hover: var(--hop-persimmon-75);
1005
+ --hop-status-option2-surface-disabled: var(--hop-persimmon-25);
1006
+ --hop-status-option2-surface: var(--hop-persimmon-50);
1007
+ --hop-status-option2-icon-selected: var(--hop-persimmon-700);
1008
+ --hop-status-option2-icon-press: var(--hop-persimmon-800);
1009
+ --hop-status-option2-icon-hover: var(--hop-persimmon-700);
1010
+ --hop-status-option2-icon-disabled: var(--hop-persimmon-200);
1011
+ --hop-status-option2-icon: var(--hop-persimmon-600);
1012
+ --hop-status-option2-border-selected: var(--hop-persimmon-700);
1013
+ --hop-status-option2-border-press: var(--hop-persimmon-500);
1014
+ --hop-status-option2-border-hover: var(--hop-persimmon-400);
1015
+ --hop-status-option2-border-disabled: var(--hop-persimmon-50);
1016
+ --hop-status-option2-border: var(--hop-persimmon-300);
1017
+ --hop-status-option1-text-selected: var(--hop-iris-700);
1018
+ --hop-status-option1-text-press: var(--hop-iris-800);
1019
+ --hop-status-option1-text-hover: var(--hop-iris-700);
1020
+ --hop-status-option1-text-disabled: var(--hop-iris-200);
1021
+ --hop-status-option1-text: var(--hop-iris-600);
1022
+ --hop-status-option1-surface-strong: var(--hop-iris-200);
1023
+ --hop-status-option1-surface-selected: var(--hop-iris-50);
1024
+ --hop-status-option1-surface-press: var(--hop-iris-100);
1025
+ --hop-status-option1-surface-hover: var(--hop-iris-75);
1026
+ --hop-status-option1-surface-disabled: var(--hop-iris-25);
1027
+ --hop-status-option1-surface: var(--hop-iris-50);
1028
+ --hop-status-option1-icon-selected: var(--hop-iris-700);
1029
+ --hop-status-option1-icon-press: var(--hop-iris-800);
1030
+ --hop-status-option1-icon-hover: var(--hop-iris-700);
1031
+ --hop-status-option1-icon-disabled: var(--hop-iris-200);
1032
+ --hop-status-option1-icon: var(--hop-iris-600);
1033
+ --hop-status-option1-border-selected: var(--hop-iris-700);
1034
+ --hop-status-option1-border-press: var(--hop-iris-500);
1035
+ --hop-status-option1-border-hover: var(--hop-iris-400);
1036
+ --hop-status-option1-border-disabled: var(--hop-iris-50);
1037
+ --hop-status-option1-border: var(--hop-iris-300);
980
1038
  --hop-status-neutral-text-selected: var(--hop-samoyed);
981
1039
  --hop-status-neutral-text-press: var(--hop-rock-900);
982
1040
  --hop-status-neutral-text-hover: var(--hop-rock-700);
@@ -1040,27 +1098,27 @@
1040
1098
  --hop-status-inactive-border-hover: var(--hop-rock-400);
1041
1099
  --hop-status-inactive-border-disabled: var(--hop-rock-50);
1042
1100
  --hop-status-inactive-border: var(--hop-rock-300);
1043
- --hop-status-caution-text-selected: var(--hop-koi-700);
1044
- --hop-status-caution-text-press: var(--hop-koi-800);
1045
- --hop-status-caution-text-hover: var(--hop-koi-700);
1046
- --hop-status-caution-text-disabled: var(--hop-koi-200);
1047
- --hop-status-caution-text: var(--hop-koi-600);
1048
- --hop-status-caution-surface-strong: var(--hop-koi-200);
1049
- --hop-status-caution-surface-selected: var(--hop-koi-50);
1050
- --hop-status-caution-surface-press: var(--hop-koi-100);
1051
- --hop-status-caution-surface-hover: var(--hop-koi-75);
1052
- --hop-status-caution-surface-disabled: var(--hop-koi-25);
1053
- --hop-status-caution-surface: var(--hop-koi-50);
1054
- --hop-status-caution-icon-selected: var(--hop-koi-700);
1055
- --hop-status-caution-icon-press: var(--hop-koi-800);
1056
- --hop-status-caution-icon-hover: var(--hop-koi-700);
1057
- --hop-status-caution-icon-disabled: var(--hop-koi-200);
1058
- --hop-status-caution-icon: var(--hop-koi-600);
1059
- --hop-status-caution-border-selected: var(--hop-koi-700);
1060
- --hop-status-caution-border-press: var(--hop-koi-500);
1061
- --hop-status-caution-border-hover: var(--hop-koi-400);
1062
- --hop-status-caution-border-disabled: var(--hop-koi-50);
1063
- --hop-status-caution-border: var(--hop-koi-300);
1101
+ --hop-status-caution-text-selected: var(--hop-amber-700);
1102
+ --hop-status-caution-text-press: var(--hop-amber-800);
1103
+ --hop-status-caution-text-hover: var(--hop-amber-700);
1104
+ --hop-status-caution-text-disabled: var(--hop-amber-200);
1105
+ --hop-status-caution-text: var(--hop-amber-600);
1106
+ --hop-status-caution-surface-strong: var(--hop-amber-200);
1107
+ --hop-status-caution-surface-selected: var(--hop-amber-50);
1108
+ --hop-status-caution-surface-press: var(--hop-amber-100);
1109
+ --hop-status-caution-surface-hover: var(--hop-amber-75);
1110
+ --hop-status-caution-surface-disabled: var(--hop-amber-25);
1111
+ --hop-status-caution-surface: var(--hop-amber-50);
1112
+ --hop-status-caution-icon-selected: var(--hop-amber-700);
1113
+ --hop-status-caution-icon-press: var(--hop-amber-800);
1114
+ --hop-status-caution-icon-hover: var(--hop-amber-700);
1115
+ --hop-status-caution-icon-disabled: var(--hop-amber-200);
1116
+ --hop-status-caution-icon: var(--hop-amber-600);
1117
+ --hop-status-caution-border-selected: var(--hop-amber-700);
1118
+ --hop-status-caution-border-press: var(--hop-amber-500);
1119
+ --hop-status-caution-border-hover: var(--hop-amber-400);
1120
+ --hop-status-caution-border-disabled: var(--hop-amber-50);
1121
+ --hop-status-caution-border: var(--hop-amber-300);
1064
1122
  --hop-secondary-icon-strong-hover: var(--hop-samoyed);
1065
1123
  --hop-secondary-icon-strong: var(--hop-samoyed);
1066
1124
  --hop-secondary-icon-disabled: var(--hop-persimmon-200);
@@ -1326,41 +1384,42 @@
1326
1384
  --hop-neutral-icon-weak-active: var(--hop-rock-700);
1327
1385
  --hop-neutral-icon-active: var(--hop-rock-900);
1328
1386
  --hop-neutral-border-active: var(--hop-rock-400);
1329
- --hop-danger-text-weak-press: var(--hop-amanita-600);
1330
- --hop-danger-text-weak-hover: var(--hop-amanita-500);
1331
- --hop-danger-text-weak: var(--hop-amanita-400);
1387
+ --hop-danger-text-weak-press: var(--hop-rose-600);
1388
+ --hop-danger-text-weak-hover: var(--hop-rose-500);
1389
+ --hop-danger-text-weak: var(--hop-rose-400);
1332
1390
  --hop-danger-text-strong-hover: var(--hop-samoyed);
1333
1391
  --hop-danger-text-strong: var(--hop-samoyed);
1334
- --hop-danger-text-press: var(--hop-amanita-800);
1335
- --hop-danger-text-hover: var(--hop-amanita-500);
1336
- --hop-danger-text-disabled: var(--hop-amanita-100);
1337
- --hop-danger-text-selected: var(--hop-amanita-400);
1338
- --hop-danger-text: var(--hop-amanita-700);
1339
- --hop-danger-surface-weak-press: var(--hop-amanita-100);
1340
- --hop-danger-surface-weak-hover: var(--hop-amanita-75);
1341
- --hop-danger-surface-weak: var(--hop-amanita-50);
1342
- --hop-danger-surface-strong-hover: var(--hop-amanita-500);
1343
- --hop-danger-surface-strong: var(--hop-amanita-400);
1344
- --hop-danger-surface-press: var(--hop-amanita-600);
1345
- --hop-danger-surface-hover: var(--hop-amanita-500);
1346
- --hop-danger-surface-disabled: var(--hop-amanita-100);
1347
- --hop-danger-surface-selected: var(--hop-amanita-50);
1348
- --hop-danger-surface: var(--hop-amanita-25);
1349
- --hop-danger-icon-weakest: var(--hop-amanita-75);
1350
- --hop-danger-icon-weak-press: var(--hop-amanita-600);
1351
- --hop-danger-icon-weak-hover: var(--hop-amanita-500);
1352
- --hop-danger-icon-weak: var(--hop-amanita-400);
1392
+ --hop-danger-text-press: var(--hop-rose-800);
1393
+ --hop-danger-text-hover: var(--hop-rose-500);
1394
+ --hop-danger-text-disabled: var(--hop-rose-100);
1395
+ --hop-danger-text-selected: var(--hop-rose-400);
1396
+ --hop-danger-text: var(--hop-rose-700);
1397
+ --hop-danger-surface-weak-selected: var(--hop-rose-100);
1398
+ --hop-danger-surface-weak-press: var(--hop-rose-100);
1399
+ --hop-danger-surface-weak-hover: var(--hop-rose-75);
1400
+ --hop-danger-surface-weak: var(--hop-rose-50);
1401
+ --hop-danger-surface-strong-hover: var(--hop-rose-500);
1402
+ --hop-danger-surface-strong: var(--hop-rose-400);
1403
+ --hop-danger-surface-press: var(--hop-rose-600);
1404
+ --hop-danger-surface-hover: var(--hop-rose-500);
1405
+ --hop-danger-surface-disabled: var(--hop-rose-100);
1406
+ --hop-danger-surface-selected: var(--hop-rose-50);
1407
+ --hop-danger-surface: var(--hop-rose-25);
1408
+ --hop-danger-icon-weakest: var(--hop-rose-75);
1409
+ --hop-danger-icon-weak-press: var(--hop-rose-600);
1410
+ --hop-danger-icon-weak-hover: var(--hop-rose-500);
1411
+ --hop-danger-icon-weak: var(--hop-rose-400);
1353
1412
  --hop-danger-icon-strong-hover: var(--hop-samoyed);
1354
1413
  --hop-danger-icon-strong: var(--hop-samoyed);
1355
- --hop-danger-icon-press: var(--hop-amanita-800);
1356
- --hop-danger-icon-hover: var(--hop-amanita-500);
1357
- --hop-danger-icon-disabled: var(--hop-amanita-100);
1358
- --hop-danger-icon-selected: var(--hop-amanita-400);
1359
- --hop-danger-icon: var(--hop-amanita-700);
1360
- --hop-danger-border-press: var(--hop-amanita-300);
1361
- --hop-danger-border-strong: var(--hop-amanita-300);
1362
- --hop-danger-border-selected: var(--hop-amanita-400);
1363
- --hop-danger-border: var(--hop-amanita-100);
1414
+ --hop-danger-icon-press: var(--hop-rose-800);
1415
+ --hop-danger-icon-hover: var(--hop-rose-500);
1416
+ --hop-danger-icon-disabled: var(--hop-rose-100);
1417
+ --hop-danger-icon-selected: var(--hop-rose-400);
1418
+ --hop-danger-icon: var(--hop-rose-700);
1419
+ --hop-danger-border-press: var(--hop-rose-300);
1420
+ --hop-danger-border-strong: var(--hop-rose-300);
1421
+ --hop-danger-border-selected: var(--hop-rose-400);
1422
+ --hop-danger-border: var(--hop-rose-100);
1364
1423
  --hop-danger-text-weak-active: var(--hop-amanita-600);
1365
1424
  --hop-danger-text-active: var(--hop-amanita-800);
1366
1425
  --hop-danger-surface-weak-active: var(--hop-amanita-100);
@@ -1408,6 +1467,32 @@
1408
1467
  --hop-comp-tile-background-color-press: var(--hop-neutral-surface-weak-press);
1409
1468
  --hop-comp-tile-background-color-hover: var(--hop-neutral-surface-weak-hover);
1410
1469
  --hop-comp-tile-background-color: var(--hop-neutral-surface);
1470
+ --hop-comp-tag-text-font-size-lg: var(--hop-caption-lg-font-size);
1471
+ --hop-comp-tag-text-font-size-md: var(--hop-caption-md-font-size);
1472
+ --hop-comp-tag-text-font-size-sm: var(--hop-caption-md-font-size);
1473
+ --hop-comp-tag-text-font: var(--hop-caption-md-font-family);
1474
+ --hop-comp-tag-icon-color-error: var(--hop-danger-icon-weak);
1475
+ --hop-comp-tag-icon-color-disabled: var(--hop-neutral-icon-disabled);
1476
+ --hop-comp-tag-icon-color-selected: var(--hop-neutral-icon-always-light);
1477
+ --hop-comp-tag-icon-color-press: var(--hop-neutral-icon-press);
1478
+ --hop-comp-tag-icon-color-hover: var(--hop-neutral-icon-hover);
1479
+ --hop-comp-tag-icon-color: var(--hop-neutral-icon);
1480
+ --hop-comp-tag-text-color-error: var(--hop-danger-text-weak);
1481
+ --hop-comp-tag-text-color-disabled: var(--hop-neutral-text-disabled);
1482
+ --hop-comp-tag-text-color-selected: var(--hop-neutral-text-always-light);
1483
+ --hop-comp-tag-text-color-press: var(--hop-neutral-text-press);
1484
+ --hop-comp-tag-text-color-hover: var(--hop-neutral-text-hover);
1485
+ --hop-comp-tag-text-color: var(--hop-neutral-text);
1486
+ --hop-comp-tag-border-color-focus: var(--hop-primary-border-focus);
1487
+ --hop-comp-tag-border-color-error: var(--hop-danger-border-strong);
1488
+ --hop-comp-tag-border-color-disabled: var(--hop-neutral-border-weak);
1489
+ --hop-comp-tag-border-color: var(--hop-neutral-border-weak);
1490
+ --hop-comp-tag-background-color-disabled: var(--hop-neutral-surface-disabled);
1491
+ --hop-comp-tag-background-color-selected: var(--hop-primary-surface-strong);
1492
+ --hop-comp-tag-background-color-press: var(--hop-primary-surface-weak-press);
1493
+ --hop-comp-tag-background-color-hover: var(--hop-primary-surface-weak-hover);
1494
+ --hop-comp-tag-background-color: var(--hop-neutral-surface);
1495
+ --hop-comp-tag-border-radius: var(--hop-shape-rounded-sm);
1411
1496
  --hop-comp-tabs-tab-panel-border-color-focus: var(--hop-primary-border-focus);
1412
1497
  --hop-comp-tabs-tab-border-radius: var(--hop-shape-rounded-sm);
1413
1498
  --hop-comp-tabs-tab-border-color-disabled: var(--hop-neutral-border-disabled);
@@ -1591,13 +1676,11 @@
1591
1676
  --hop-comp-button-danger-border-color-selected: var(--hop-danger-border-selected);
1592
1677
  --hop-comp-button-danger-border-color: var(--hop-neutral-border-weakest);
1593
1678
  --hop-comp-button-danger-background-disabled: var(--hop-neutral-surface-disabled);
1594
- --hop-comp-button-danger-background-selected: var(--hop-danger-surface-selected);
1595
- --hop-comp-button-danger-background-pressed: var(--hop-danger-surface-press);
1596
- --hop-comp-button-danger-background-hover: var(--hop-danger-surface-strong-hover);
1679
+ --hop-comp-button-danger-background-selected: linear-gradient(var(--hop-danger-surface-selected), var(--hop-danger-surface-selected) 100%); /* Single-stop gradient to allow smooth CSS transition from the multi-stop gradient default background. */
1680
+ --hop-comp-button-danger-background-pressed: linear-gradient(var(--hop-danger-surface-press), var(--hop-danger-surface-press) 100%); /* Single-stop gradient to allow smooth CSS transition from the multi-stop gradient default background. */
1681
+ --hop-comp-button-danger-background-hover: linear-gradient(var(--hop-danger-surface-strong-hover), var(--hop-danger-surface-strong-hover) 100%); /* Single-stop gradient to allow smooth CSS transition from the multi-stop gradient default background. */
1597
1682
  --hop-comp-button-danger-border-color-loading: var(--hop-neutral-border-weakest);
1598
1683
  --hop-comp-button-danger-color-loading: var(--hop-primary-icon-strong);
1599
- --hop-comp-button-danger-background-loading: var(--hop-danger-surface-strong);
1600
- --hop-comp-button-danger-background: var(--hop-danger-surface-strong);
1601
1684
  --hop-comp-button-danger-icon-color-selected: var(--hop-danger-icon-selected);
1602
1685
  --hop-comp-button-danger-icon-color-press: var(--hop-danger-icon-strong-hover);
1603
1686
  --hop-comp-button-danger-icon-color-hover: var(--hop-danger-icon-strong-hover);
@@ -1656,6 +1739,10 @@
1656
1739
  --hop-comp-button-primary-text-color-pressed: var(--hop-neutral-text-always-light);
1657
1740
  --hop-comp-button-primary-text-color-hover: var(--hop-neutral-text-always-light);
1658
1741
  --hop-comp-button-primary-text-color: var(--hop-neutral-text-always-light);
1742
+ --hop-comp-button-text-font-size-xs: var(--hop-caption-md-font-size);
1743
+ --hop-comp-button-text-font-size-sm: var(--hop-caption-lg-font-size);
1744
+ --hop-comp-button-text-font-size-md: var(--hop-caption-xl-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);