@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.
Files changed (6) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/dist/sharegate/dark/tokens.css +247 -246
  3. package/dist/sharegate/tokens.css +307 -220
  4. package/dist/workleap/dark/tokens.css +1 -0
  5. package/dist/workleap/tokens.css +100 -13
  6. package/package.json +1 -1
package/dist/sharegate/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 23 Apr 2026 23:43:38 GMT
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;
@@ -62,8 +66,8 @@
62
66
  --hop-comp-button-ghost-primary-background-loading: transparent;
63
67
  --hop-comp-button-ghost-primary-background: transparent;
64
68
  --hop-comp-button-ghost-primary-box-shadow: none;
65
- --hop-comp-button-danger-box-shadow-loading: none;
66
- --hop-comp-button-danger-box-shadow: none;
69
+ --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;
70
+ --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;
67
71
  --hop-comp-button-upsell-border-color-disabled: transparent;
68
72
  --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;
69
73
  --hop-comp-button-upsell-box-shadow: none;
@@ -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;
@@ -448,18 +466,18 @@
448
466
  --hop-amber-75: #ffe39a;
449
467
  --hop-amber-50: #fff1cc;
450
468
  --hop-amber-25: #fff6e0;
451
- --hop-rose-900: #2b1e23;
452
- --hop-rose-800: #3d2630;
453
- --hop-rose-700: #542f3e;
454
- --hop-rose-600: #6a394c;
455
- --hop-rose-500: #80435a;
456
- --hop-rose-400: #995068;
457
- --hop-rose-300: #fc5992;
458
- --hop-rose-200: #f47c9e;
459
- --hop-rose-100: #f7a3ba;
460
- --hop-rose-75: #f9c1cf;
461
- --hop-rose-50: #fbd6df;
462
- --hop-rose-25: #fdecef;
469
+ --hop-rose-900: #341417;
470
+ --hop-rose-800: #50161c;
471
+ --hop-rose-700: #711822;
472
+ --hop-rose-600: #951b2a;
473
+ --hop-rose-500: #ba1f34;
474
+ --hop-rose-400: #de2840;
475
+ --hop-rose-300: #f5425d;
476
+ --hop-rose-200: #f76d83;
477
+ --hop-rose-100: #fa9ba9;
478
+ --hop-rose-75: #fcbcc5;
479
+ --hop-rose-50: #fdd3d8;
480
+ --hop-rose-25: #feeaec;
463
481
  --hop-samoyed: #ffffff;
464
482
  --hop-rock-900: #232426;
465
483
  --hop-rock-800: #313335;
@@ -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);
@@ -641,23 +666,56 @@
641
666
  --hop-comp-callout-warning-icon-fill-color: var(--hop-samoyed);
642
667
  --hop-comp-callout-success-icon-fill-color: var(--hop-samoyed);
643
668
  --hop-comp-callout-information-icon-fill-color: var(--hop-samoyed);
669
+ --hop-comp-button-danger-background-loading: linear-gradient(var(--hop-rose-300), var(--hop-rose-600) 100%);
670
+ --hop-comp-button-danger-background: linear-gradient(var(--hop-rose-300), var(--hop-rose-600) 100%);
644
671
  --hop-comp-button-upsell-background-loading: linear-gradient(var(--hop-limeburst-50), var(--hop-persimmon-300) 151%);
645
672
  --hop-comp-button-upsell-background: linear-gradient(var(--hop-limeburst-50), var(--hop-persimmon-300) 151%);
646
673
  --hop-comp-button-primary-background-loading: linear-gradient(var(--hop-iris-300), var(--hop-iris-600) 100%);
647
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);
648
682
  --hop-shape-rounded-sm: var(--hop-border-radius-1);
649
683
  --hop-shape-rounded-md: var(--hop-border-radius-2);
650
684
  --hop-shape-rounded-lg: var(--hop-border-radius-3);
651
685
  --hop-shape-pill: var(--hop-border-radius-4);
652
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);
653
707
  --hop-accent-sm-line-height: var(--hop-line-height-1-33);
654
708
  --hop-accent-sm-font-weight: var(--hop-font-weight-580);
655
709
  --hop-accent-sm-font-size: var(--hop-font-size-180);
656
- --hop-accent-sm-font-family: var(--hop-font-family-primary);
657
- --hop-accent-lg-line-height: var(--hop-line-height-1-125);
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);
658
716
  --hop-accent-lg-font-weight: var(--hop-font-weight-580);
659
717
  --hop-accent-lg-font-size: var(--hop-font-size-480);
660
- --hop-accent-lg-font-family: var(--hop-font-family-primary);
718
+ --hop-accent-lg-font-family: var(--hop-font-family-tertiary);
661
719
  --hop-body-xs-underline-line-height: var(--hop-line-height-1-33);
662
720
  --hop-body-xs-underline-font-weight: var(--hop-font-weight-505);
663
721
  --hop-body-xs-underline-font-size: var(--hop-font-size-120);
@@ -791,88 +849,88 @@
791
849
  --hop-dataviz-unavailable-strong: var(--hop-rock-100);
792
850
  --hop-dataviz-unavailable-weak: var(--hop-rock-50);
793
851
  --hop-dataviz-unavailable: var(--hop-rock-75);
794
- --hop-warning-text-weak: var(--hop-koi-300);
795
- --hop-warning-text: var(--hop-koi-700);
796
- --hop-warning-surface-weak: var(--hop-koi-50);
797
- --hop-warning-surface-strong: var(--hop-koi-100);
798
- --hop-warning-surface: var(--hop-koi-25);
799
- --hop-warning-icon-weak: var(--hop-koi-300);
800
- --hop-warning-icon-weakest: var(--hop-koi-100);
801
- --hop-warning-icon: var(--hop-koi-700);
802
- --hop-warning-border: var(--hop-koi-100);
803
- --hop-success-text-weak: var(--hop-moss-300);
804
- --hop-success-text-hover: var(--hop-moss-800);
805
- --hop-success-text: var(--hop-moss-700);
806
- --hop-success-surface-weak: var(--hop-moss-50);
807
- --hop-success-surface-strong: var(--hop-moss-100);
808
- --hop-success-surface: var(--hop-moss-25);
809
- --hop-success-icon-weak: var(--hop-moss-300);
810
- --hop-success-icon-weakest: var(--hop-moss-100);
811
- --hop-success-icon: var(--hop-moss-700);
812
- --hop-success-border: var(--hop-moss-100);
813
- --hop-status-progress-text-selected: var(--hop-sapphire-500);
814
- --hop-status-progress-text-press: var(--hop-sapphire-800);
815
- --hop-status-progress-text-hover: var(--hop-sapphire-700);
816
- --hop-status-progress-text-disabled: var(--hop-sapphire-200);
817
- --hop-status-progress-text: var(--hop-sapphire-600);
818
- --hop-status-progress-surface-strong: var(--hop-sapphire-200);
819
- --hop-status-progress-surface-selected: var(--hop-sapphire-50);
820
- --hop-status-progress-surface-press: var(--hop-sapphire-100);
821
- --hop-status-progress-surface-hover: var(--hop-sapphire-75);
822
- --hop-status-progress-surface-disabled: var(--hop-sapphire-25);
823
- --hop-status-progress-surface: var(--hop-sapphire-50);
824
- --hop-status-progress-icon-selected: var(--hop-sapphire-500);
825
- --hop-status-progress-icon-press: var(--hop-sapphire-800);
826
- --hop-status-progress-icon-hover: var(--hop-sapphire-700);
827
- --hop-status-progress-icon-disabled: var(--hop-sapphire-200);
828
- --hop-status-progress-icon: var(--hop-sapphire-600);
829
- --hop-status-progress-border-selected: var(--hop-sapphire-400);
830
- --hop-status-progress-border-press: var(--hop-sapphire-500);
831
- --hop-status-progress-border-hover: var(--hop-sapphire-400);
832
- --hop-status-progress-border-disabled: var(--hop-sapphire-50);
833
- --hop-status-progress-border: var(--hop-sapphire-300);
834
- --hop-status-positive-text-selected: var(--hop-moss-700);
835
- --hop-status-positive-text-press: var(--hop-moss-800);
836
- --hop-status-positive-text-hover: var(--hop-moss-700);
837
- --hop-status-positive-text-disabled: var(--hop-moss-200);
838
- --hop-status-positive-text: var(--hop-moss-600);
839
- --hop-status-positive-surface-strong: var(--hop-moss-200);
840
- --hop-status-positive-surface-selected: var(--hop-moss-50);
841
- --hop-status-positive-surface-press: var(--hop-moss-100);
842
- --hop-status-positive-surface-hover: var(--hop-moss-75);
843
- --hop-status-positive-surface-disabled: var(--hop-moss-25);
844
- --hop-status-positive-surface: var(--hop-moss-50);
845
- --hop-status-positive-icon-selected: var(--hop-moss-700);
846
- --hop-status-positive-icon-press: var(--hop-moss-800);
847
- --hop-status-positive-icon-hover: var(--hop-moss-700);
848
- --hop-status-positive-icon-disabled: var(--hop-moss-200);
849
- --hop-status-positive-icon: var(--hop-moss-600);
850
- --hop-status-positive-border-selected: var(--hop-moss-700);
851
- --hop-status-positive-border-press: var(--hop-moss-500);
852
- --hop-status-positive-border-hover: var(--hop-moss-400);
853
- --hop-status-positive-border-disabled: var(--hop-moss-50);
854
- --hop-status-positive-border: var(--hop-moss-300);
855
- --hop-status-option6-text-selected: var(--hop-sunken-treasure-700);
856
- --hop-status-option6-text-press: var(--hop-sunken-treasure-800);
857
- --hop-status-option6-text-hover: var(--hop-sunken-treasure-700);
858
- --hop-status-option6-text-disabled: var(--hop-sunken-treasure-200);
859
- --hop-status-option6-text: var(--hop-sunken-treasure-600);
860
- --hop-status-option6-surface-strong: var(--hop-sunken-treasure-200);
861
- --hop-status-option6-surface-selected: var(--hop-sunken-treasure-50);
862
- --hop-status-option6-surface-press: var(--hop-sunken-treasure-100);
863
- --hop-status-option6-surface-hover: var(--hop-sunken-treasure-50);
864
- --hop-status-option6-surface-disabled: var(--hop-sunken-treasure-25);
865
- --hop-status-option6-surface: var(--hop-sunken-treasure-25);
866
- --hop-status-option6-icon-selected: var(--hop-sunken-treasure-700);
867
- --hop-status-option6-icon-press: var(--hop-sunken-treasure-800);
868
- --hop-status-option6-icon-hover: var(--hop-sunken-treasure-700);
869
- --hop-status-option6-icon-disabled: var(--hop-sunken-treasure-200);
870
- --hop-status-option6-icon: var(--hop-sunken-treasure-600);
871
- --hop-status-option6-border-selected: var(--hop-sunken-treasure-700);
872
- --hop-status-option6-border-press: var(--hop-sunken-treasure-500);
873
- --hop-status-option6-border-hover: var(--hop-sunken-treasure-400);
874
- --hop-status-option6-border-disabled: var(--hop-sunken-treasure-50);
875
- --hop-status-option6-border: var(--hop-sunken-treasure-300);
852
+ --hop-warning-text-weak: var(--hop-amber-300);
853
+ --hop-warning-text: var(--hop-amber-700);
854
+ --hop-warning-surface-weak: var(--hop-amber-50);
855
+ --hop-warning-surface-strong: var(--hop-amber-100);
856
+ --hop-warning-surface: var(--hop-amber-25);
857
+ --hop-warning-icon-weak: var(--hop-amber-300);
858
+ --hop-warning-icon-weakest: var(--hop-amber-100);
859
+ --hop-warning-icon: var(--hop-amber-700);
860
+ --hop-warning-border: var(--hop-amber-100);
861
+ --hop-success-text-weak: var(--hop-mint-300);
862
+ --hop-success-text-hover: var(--hop-mint-800);
863
+ --hop-success-text: var(--hop-mint-700);
864
+ --hop-success-surface-weak: var(--hop-mint-50);
865
+ --hop-success-surface-strong: var(--hop-mint-100);
866
+ --hop-success-surface: var(--hop-mint-25);
867
+ --hop-success-icon-weak: var(--hop-mint-300);
868
+ --hop-success-icon-weakest: var(--hop-mint-100);
869
+ --hop-success-icon: var(--hop-mint-700);
870
+ --hop-success-border: var(--hop-mint-100);
871
+ --hop-status-progress-text-selected: var(--hop-cobalt-700);
872
+ --hop-status-progress-text-press: var(--hop-cobalt-800);
873
+ --hop-status-progress-text-hover: var(--hop-cobalt-700);
874
+ --hop-status-progress-text-disabled: var(--hop-cobalt-200);
875
+ --hop-status-progress-text: var(--hop-cobalt-600);
876
+ --hop-status-progress-surface-strong: var(--hop-cobalt-200);
877
+ --hop-status-progress-surface-selected: var(--hop-cobalt-50);
878
+ --hop-status-progress-surface-press: var(--hop-cobalt-100);
879
+ --hop-status-progress-surface-hover: var(--hop-cobalt-75);
880
+ --hop-status-progress-surface-disabled: var(--hop-cobalt-25);
881
+ --hop-status-progress-surface: var(--hop-cobalt-50);
882
+ --hop-status-progress-icon-selected: var(--hop-cobalt-700);
883
+ --hop-status-progress-icon-press: var(--hop-cobalt-800);
884
+ --hop-status-progress-icon-hover: var(--hop-cobalt-700);
885
+ --hop-status-progress-icon-disabled: var(--hop-cobalt-200);
886
+ --hop-status-progress-icon: var(--hop-cobalt-600);
887
+ --hop-status-progress-border-selected: var(--hop-cobalt-700);
888
+ --hop-status-progress-border-press: var(--hop-cobalt-500);
889
+ --hop-status-progress-border-hover: var(--hop-cobalt-400);
890
+ --hop-status-progress-border-disabled: var(--hop-cobalt-50);
891
+ --hop-status-progress-border: var(--hop-cobalt-300);
892
+ --hop-status-positive-text-selected: var(--hop-mint-700);
893
+ --hop-status-positive-text-press: var(--hop-mint-800);
894
+ --hop-status-positive-text-hover: var(--hop-mint-700);
895
+ --hop-status-positive-text-disabled: var(--hop-mint-200);
896
+ --hop-status-positive-text: var(--hop-mint-600);
897
+ --hop-status-positive-surface-strong: var(--hop-mint-200);
898
+ --hop-status-positive-surface-selected: var(--hop-mint-50);
899
+ --hop-status-positive-surface-press: var(--hop-mint-100);
900
+ --hop-status-positive-surface-hover: var(--hop-mint-75);
901
+ --hop-status-positive-surface-disabled: var(--hop-mint-25);
902
+ --hop-status-positive-surface: var(--hop-mint-50);
903
+ --hop-status-positive-icon-selected: var(--hop-mint-700);
904
+ --hop-status-positive-icon-press: var(--hop-mint-800);
905
+ --hop-status-positive-icon-hover: var(--hop-mint-700);
906
+ --hop-status-positive-icon-disabled: var(--hop-mint-200);
907
+ --hop-status-positive-icon: var(--hop-mint-600);
908
+ --hop-status-positive-border-selected: var(--hop-mint-700);
909
+ --hop-status-positive-border-press: var(--hop-mint-500);
910
+ --hop-status-positive-border-hover: var(--hop-mint-400);
911
+ --hop-status-positive-border-disabled: var(--hop-mint-50);
912
+ --hop-status-positive-border: var(--hop-mint-300);
913
+ --hop-status-option6-text-selected: var(--hop-limeburst-700);
914
+ --hop-status-option6-text-press: var(--hop-limeburst-800);
915
+ --hop-status-option6-text-hover: var(--hop-limeburst-700);
916
+ --hop-status-option6-text-disabled: var(--hop-limeburst-200);
917
+ --hop-status-option6-text: var(--hop-limeburst-600);
918
+ --hop-status-option6-surface-strong: var(--hop-limeburst-200);
919
+ --hop-status-option6-surface-selected: var(--hop-limeburst-50);
920
+ --hop-status-option6-surface-press: var(--hop-limeburst-100);
921
+ --hop-status-option6-surface-hover: var(--hop-limeburst-75);
922
+ --hop-status-option6-surface-disabled: var(--hop-limeburst-25);
923
+ --hop-status-option6-surface: var(--hop-limeburst-50);
924
+ --hop-status-option6-icon-selected: var(--hop-limeburst-700);
925
+ --hop-status-option6-icon-press: var(--hop-limeburst-800);
926
+ --hop-status-option6-icon-hover: var(--hop-limeburst-700);
927
+ --hop-status-option6-icon-disabled: var(--hop-limeburst-200);
928
+ --hop-status-option6-icon: var(--hop-limeburst-600);
929
+ --hop-status-option6-border-selected: var(--hop-limeburst-700);
930
+ --hop-status-option6-border-press: var(--hop-limeburst-500);
931
+ --hop-status-option6-border-hover: var(--hop-limeburst-400);
932
+ --hop-status-option6-border-disabled: var(--hop-limeburst-50);
933
+ --hop-status-option6-border: var(--hop-limeburst-300);
876
934
  --hop-status-option5-text-selected: var(--hop-toad-700);
877
935
  --hop-status-option5-text-press: var(--hop-toad-800);
878
936
  --hop-status-option5-text-hover: var(--hop-toad-700);
@@ -915,69 +973,69 @@
915
973
  --hop-status-option4-border-hover: var(--hop-fog-400);
916
974
  --hop-status-option4-border-disabled: var(--hop-fog-50);
917
975
  --hop-status-option4-border: var(--hop-fog-300);
918
- --hop-status-option3-text-selected: var(--hop-quetzal-700);
919
- --hop-status-option3-text-press: var(--hop-quetzal-800);
920
- --hop-status-option3-text-hover: var(--hop-quetzal-700);
921
- --hop-status-option3-text-disabled: var(--hop-quetzal-200);
922
- --hop-status-option3-text: var(--hop-quetzal-600);
923
- --hop-status-option3-surface-strong: var(--hop-quetzal-200);
924
- --hop-status-option3-surface-selected: var(--hop-quetzal-700);
925
- --hop-status-option3-surface-press: var(--hop-quetzal-100);
926
- --hop-status-option3-surface-hover: var(--hop-quetzal-75);
927
- --hop-status-option3-surface-disabled: var(--hop-quetzal-25);
928
- --hop-status-option3-surface: var(--hop-quetzal-50);
929
- --hop-status-option3-icon-selected: var(--hop-quetzal-700);
930
- --hop-status-option3-icon-press: var(--hop-quetzal-800);
931
- --hop-status-option3-icon-hover: var(--hop-quetzal-700);
932
- --hop-status-option3-icon-disabled: var(--hop-quetzal-200);
933
- --hop-status-option3-icon: var(--hop-quetzal-600);
934
- --hop-status-option3-border-selected: var(--hop-quetzal-50);
935
- --hop-status-option3-border-press: var(--hop-quetzal-500);
936
- --hop-status-option3-border-hover: var(--hop-quetzal-400);
937
- --hop-status-option3-border-disabled: var(--hop-quetzal-50);
938
- --hop-status-option3-border: var(--hop-quetzal-300);
939
- --hop-status-option2-text-selected: var(--hop-orchid-bloom-700);
940
- --hop-status-option2-text-press: var(--hop-orchid-bloom-800);
941
- --hop-status-option2-text-hover: var(--hop-orchid-bloom-700);
942
- --hop-status-option2-text-disabled: var(--hop-orchid-bloom-200);
943
- --hop-status-option2-text: var(--hop-orchid-bloom-600);
944
- --hop-status-option2-surface-strong: var(--hop-orchid-bloom-200);
945
- --hop-status-option2-surface-selected: var(--hop-orchid-bloom-50);
946
- --hop-status-option2-surface-press: var(--hop-orchid-bloom-100);
947
- --hop-status-option2-surface-hover: var(--hop-orchid-bloom-75);
948
- --hop-status-option2-surface-disabled: var(--hop-orchid-bloom-25);
949
- --hop-status-option2-surface: var(--hop-orchid-bloom-50);
950
- --hop-status-option2-icon-selected: var(--hop-orchid-bloom-700);
951
- --hop-status-option2-icon-press: var(--hop-orchid-bloom-800);
952
- --hop-status-option2-icon-hover: var(--hop-orchid-bloom-700);
953
- --hop-status-option2-icon-disabled: var(--hop-orchid-bloom-200);
954
- --hop-status-option2-icon: var(--hop-orchid-bloom-600);
955
- --hop-status-option2-border-selected: var(--hop-orchid-bloom-700);
956
- --hop-status-option2-border-press: var(--hop-orchid-bloom-500);
957
- --hop-status-option2-border-hover: var(--hop-orchid-bloom-400);
958
- --hop-status-option2-border-disabled: var(--hop-orchid-bloom-50);
959
- --hop-status-option2-border: var(--hop-orchid-bloom-300);
960
- --hop-status-option1-text-selected: var(--hop-coastal-700);
961
- --hop-status-option1-text-press: var(--hop-coastal-800);
962
- --hop-status-option1-text-hover: var(--hop-coastal-700);
963
- --hop-status-option1-text-disabled: var(--hop-coastal-200);
964
- --hop-status-option1-text: var(--hop-coastal-600);
965
- --hop-status-option1-surface-strong: var(--hop-coastal-200);
966
- --hop-status-option1-surface-selected: var(--hop-coastal-50);
967
- --hop-status-option1-surface-press: var(--hop-coastal-100);
968
- --hop-status-option1-surface-hover: var(--hop-coastal-75);
969
- --hop-status-option1-surface-disabled: var(--hop-coastal-25);
970
- --hop-status-option1-surface: var(--hop-coastal-50);
971
- --hop-status-option1-icon-selected: var(--hop-coastal-700);
972
- --hop-status-option1-icon-press: var(--hop-coastal-800);
973
- --hop-status-option1-icon-hover: var(--hop-coastal-700);
974
- --hop-status-option1-icon-disabled: var(--hop-coastal-200);
975
- --hop-status-option1-icon: var(--hop-coastal-600);
976
- --hop-status-option1-border-selected: var(--hop-coastal-700);
977
- --hop-status-option1-border-press: var(--hop-coastal-500);
978
- --hop-status-option1-border-hover: var(--hop-coastal-400);
979
- --hop-status-option1-border-disabled: var(--hop-coastal-50);
980
- --hop-status-option1-border: var(--hop-coastal-300);
976
+ --hop-status-option3-text-selected: var(--hop-moss-700);
977
+ --hop-status-option3-text-press: var(--hop-moss-800);
978
+ --hop-status-option3-text-hover: var(--hop-moss-700);
979
+ --hop-status-option3-text-disabled: var(--hop-moss-200);
980
+ --hop-status-option3-text: var(--hop-moss-600);
981
+ --hop-status-option3-surface-strong: var(--hop-moss-200);
982
+ --hop-status-option3-surface-selected: var(--hop-moss-50);
983
+ --hop-status-option3-surface-press: var(--hop-moss-100);
984
+ --hop-status-option3-surface-hover: var(--hop-moss-75);
985
+ --hop-status-option3-surface-disabled: var(--hop-moss-25);
986
+ --hop-status-option3-surface: var(--hop-moss-50);
987
+ --hop-status-option3-icon-selected: var(--hop-moss-700);
988
+ --hop-status-option3-icon-press: var(--hop-moss-800);
989
+ --hop-status-option3-icon-hover: var(--hop-moss-700);
990
+ --hop-status-option3-icon-disabled: var(--hop-moss-200);
991
+ --hop-status-option3-icon: var(--hop-moss-600);
992
+ --hop-status-option3-border-selected: var(--hop-moss-700);
993
+ --hop-status-option3-border-press: var(--hop-moss-500);
994
+ --hop-status-option3-border-hover: var(--hop-moss-400);
995
+ --hop-status-option3-border-disabled: var(--hop-moss-50);
996
+ --hop-status-option3-border: var(--hop-moss-300);
997
+ --hop-status-option2-text-selected: var(--hop-persimmon-700);
998
+ --hop-status-option2-text-press: var(--hop-persimmon-800);
999
+ --hop-status-option2-text-hover: var(--hop-persimmon-700);
1000
+ --hop-status-option2-text-disabled: var(--hop-persimmon-200);
1001
+ --hop-status-option2-text: var(--hop-persimmon-600);
1002
+ --hop-status-option2-surface-strong: var(--hop-persimmon-200);
1003
+ --hop-status-option2-surface-selected: var(--hop-persimmon-50);
1004
+ --hop-status-option2-surface-press: var(--hop-persimmon-100);
1005
+ --hop-status-option2-surface-hover: var(--hop-persimmon-75);
1006
+ --hop-status-option2-surface-disabled: var(--hop-persimmon-25);
1007
+ --hop-status-option2-surface: var(--hop-persimmon-50);
1008
+ --hop-status-option2-icon-selected: var(--hop-persimmon-700);
1009
+ --hop-status-option2-icon-press: var(--hop-persimmon-800);
1010
+ --hop-status-option2-icon-hover: var(--hop-persimmon-700);
1011
+ --hop-status-option2-icon-disabled: var(--hop-persimmon-200);
1012
+ --hop-status-option2-icon: var(--hop-persimmon-600);
1013
+ --hop-status-option2-border-selected: var(--hop-persimmon-700);
1014
+ --hop-status-option2-border-press: var(--hop-persimmon-500);
1015
+ --hop-status-option2-border-hover: var(--hop-persimmon-400);
1016
+ --hop-status-option2-border-disabled: var(--hop-persimmon-50);
1017
+ --hop-status-option2-border: var(--hop-persimmon-300);
1018
+ --hop-status-option1-text-selected: var(--hop-iris-700);
1019
+ --hop-status-option1-text-press: var(--hop-iris-800);
1020
+ --hop-status-option1-text-hover: var(--hop-iris-700);
1021
+ --hop-status-option1-text-disabled: var(--hop-iris-200);
1022
+ --hop-status-option1-text: var(--hop-iris-600);
1023
+ --hop-status-option1-surface-strong: var(--hop-iris-200);
1024
+ --hop-status-option1-surface-selected: var(--hop-iris-50);
1025
+ --hop-status-option1-surface-press: var(--hop-iris-100);
1026
+ --hop-status-option1-surface-hover: var(--hop-iris-75);
1027
+ --hop-status-option1-surface-disabled: var(--hop-iris-25);
1028
+ --hop-status-option1-surface: var(--hop-iris-50);
1029
+ --hop-status-option1-icon-selected: var(--hop-iris-700);
1030
+ --hop-status-option1-icon-press: var(--hop-iris-800);
1031
+ --hop-status-option1-icon-hover: var(--hop-iris-700);
1032
+ --hop-status-option1-icon-disabled: var(--hop-iris-200);
1033
+ --hop-status-option1-icon: var(--hop-iris-600);
1034
+ --hop-status-option1-border-selected: var(--hop-iris-700);
1035
+ --hop-status-option1-border-press: var(--hop-iris-500);
1036
+ --hop-status-option1-border-hover: var(--hop-iris-400);
1037
+ --hop-status-option1-border-disabled: var(--hop-iris-50);
1038
+ --hop-status-option1-border: var(--hop-iris-300);
981
1039
  --hop-status-neutral-text-selected: var(--hop-samoyed);
982
1040
  --hop-status-neutral-text-press: var(--hop-rock-900);
983
1041
  --hop-status-neutral-text-hover: var(--hop-rock-700);
@@ -1041,27 +1099,27 @@
1041
1099
  --hop-status-inactive-border-hover: var(--hop-rock-400);
1042
1100
  --hop-status-inactive-border-disabled: var(--hop-rock-50);
1043
1101
  --hop-status-inactive-border: var(--hop-rock-300);
1044
- --hop-status-caution-text-selected: var(--hop-koi-700);
1045
- --hop-status-caution-text-press: var(--hop-koi-800);
1046
- --hop-status-caution-text-hover: var(--hop-koi-700);
1047
- --hop-status-caution-text-disabled: var(--hop-koi-200);
1048
- --hop-status-caution-text: var(--hop-koi-600);
1049
- --hop-status-caution-surface-strong: var(--hop-koi-200);
1050
- --hop-status-caution-surface-selected: var(--hop-koi-50);
1051
- --hop-status-caution-surface-press: var(--hop-koi-100);
1052
- --hop-status-caution-surface-hover: var(--hop-koi-75);
1053
- --hop-status-caution-surface-disabled: var(--hop-koi-25);
1054
- --hop-status-caution-surface: var(--hop-koi-50);
1055
- --hop-status-caution-icon-selected: var(--hop-koi-700);
1056
- --hop-status-caution-icon-press: var(--hop-koi-800);
1057
- --hop-status-caution-icon-hover: var(--hop-koi-700);
1058
- --hop-status-caution-icon-disabled: var(--hop-koi-200);
1059
- --hop-status-caution-icon: var(--hop-koi-600);
1060
- --hop-status-caution-border-selected: var(--hop-koi-700);
1061
- --hop-status-caution-border-press: var(--hop-koi-500);
1062
- --hop-status-caution-border-hover: var(--hop-koi-400);
1063
- --hop-status-caution-border-disabled: var(--hop-koi-50);
1064
- --hop-status-caution-border: var(--hop-koi-300);
1102
+ --hop-status-caution-text-selected: var(--hop-amber-700);
1103
+ --hop-status-caution-text-press: var(--hop-amber-800);
1104
+ --hop-status-caution-text-hover: var(--hop-amber-700);
1105
+ --hop-status-caution-text-disabled: var(--hop-amber-200);
1106
+ --hop-status-caution-text: var(--hop-amber-600);
1107
+ --hop-status-caution-surface-strong: var(--hop-amber-200);
1108
+ --hop-status-caution-surface-selected: var(--hop-amber-50);
1109
+ --hop-status-caution-surface-press: var(--hop-amber-100);
1110
+ --hop-status-caution-surface-hover: var(--hop-amber-75);
1111
+ --hop-status-caution-surface-disabled: var(--hop-amber-25);
1112
+ --hop-status-caution-surface: var(--hop-amber-50);
1113
+ --hop-status-caution-icon-selected: var(--hop-amber-700);
1114
+ --hop-status-caution-icon-press: var(--hop-amber-800);
1115
+ --hop-status-caution-icon-hover: var(--hop-amber-700);
1116
+ --hop-status-caution-icon-disabled: var(--hop-amber-200);
1117
+ --hop-status-caution-icon: var(--hop-amber-600);
1118
+ --hop-status-caution-border-selected: var(--hop-amber-700);
1119
+ --hop-status-caution-border-press: var(--hop-amber-500);
1120
+ --hop-status-caution-border-hover: var(--hop-amber-400);
1121
+ --hop-status-caution-border-disabled: var(--hop-amber-50);
1122
+ --hop-status-caution-border: var(--hop-amber-300);
1065
1123
  --hop-secondary-icon-strong-hover: var(--hop-samoyed);
1066
1124
  --hop-secondary-icon-strong: var(--hop-samoyed);
1067
1125
  --hop-secondary-icon-disabled: var(--hop-persimmon-200);
@@ -1327,41 +1385,42 @@
1327
1385
  --hop-neutral-icon-weak-active: var(--hop-rock-700);
1328
1386
  --hop-neutral-icon-active: var(--hop-rock-900);
1329
1387
  --hop-neutral-border-active: var(--hop-rock-400);
1330
- --hop-danger-text-weak-press: var(--hop-amanita-600);
1331
- --hop-danger-text-weak-hover: var(--hop-amanita-500);
1332
- --hop-danger-text-weak: var(--hop-amanita-400);
1388
+ --hop-danger-text-weak-press: var(--hop-rose-600);
1389
+ --hop-danger-text-weak-hover: var(--hop-rose-500);
1390
+ --hop-danger-text-weak: var(--hop-rose-400);
1333
1391
  --hop-danger-text-strong-hover: var(--hop-samoyed);
1334
1392
  --hop-danger-text-strong: var(--hop-samoyed);
1335
- --hop-danger-text-press: var(--hop-amanita-800);
1336
- --hop-danger-text-hover: var(--hop-amanita-500);
1337
- --hop-danger-text-disabled: var(--hop-amanita-100);
1338
- --hop-danger-text-selected: var(--hop-amanita-400);
1339
- --hop-danger-text: var(--hop-amanita-700);
1340
- --hop-danger-surface-weak-press: var(--hop-amanita-100);
1341
- --hop-danger-surface-weak-hover: var(--hop-amanita-75);
1342
- --hop-danger-surface-weak: var(--hop-amanita-50);
1343
- --hop-danger-surface-strong-hover: var(--hop-amanita-500);
1344
- --hop-danger-surface-strong: var(--hop-amanita-400);
1345
- --hop-danger-surface-press: var(--hop-amanita-600);
1346
- --hop-danger-surface-hover: var(--hop-amanita-500);
1347
- --hop-danger-surface-disabled: var(--hop-amanita-100);
1348
- --hop-danger-surface-selected: var(--hop-amanita-50);
1349
- --hop-danger-surface: var(--hop-amanita-25);
1350
- --hop-danger-icon-weakest: var(--hop-amanita-75);
1351
- --hop-danger-icon-weak-press: var(--hop-amanita-600);
1352
- --hop-danger-icon-weak-hover: var(--hop-amanita-500);
1353
- --hop-danger-icon-weak: var(--hop-amanita-400);
1393
+ --hop-danger-text-press: var(--hop-rose-800);
1394
+ --hop-danger-text-hover: var(--hop-rose-500);
1395
+ --hop-danger-text-disabled: var(--hop-rose-100);
1396
+ --hop-danger-text-selected: var(--hop-rose-400);
1397
+ --hop-danger-text: var(--hop-rose-700);
1398
+ --hop-danger-surface-weak-selected: var(--hop-rose-100);
1399
+ --hop-danger-surface-weak-press: var(--hop-rose-100);
1400
+ --hop-danger-surface-weak-hover: var(--hop-rose-75);
1401
+ --hop-danger-surface-weak: var(--hop-rose-50);
1402
+ --hop-danger-surface-strong-hover: var(--hop-rose-500);
1403
+ --hop-danger-surface-strong: var(--hop-rose-400);
1404
+ --hop-danger-surface-press: var(--hop-rose-600);
1405
+ --hop-danger-surface-hover: var(--hop-rose-500);
1406
+ --hop-danger-surface-disabled: var(--hop-rose-100);
1407
+ --hop-danger-surface-selected: var(--hop-rose-50);
1408
+ --hop-danger-surface: var(--hop-rose-25);
1409
+ --hop-danger-icon-weakest: var(--hop-rose-75);
1410
+ --hop-danger-icon-weak-press: var(--hop-rose-600);
1411
+ --hop-danger-icon-weak-hover: var(--hop-rose-500);
1412
+ --hop-danger-icon-weak: var(--hop-rose-400);
1354
1413
  --hop-danger-icon-strong-hover: var(--hop-samoyed);
1355
1414
  --hop-danger-icon-strong: var(--hop-samoyed);
1356
- --hop-danger-icon-press: var(--hop-amanita-800);
1357
- --hop-danger-icon-hover: var(--hop-amanita-500);
1358
- --hop-danger-icon-disabled: var(--hop-amanita-100);
1359
- --hop-danger-icon-selected: var(--hop-amanita-400);
1360
- --hop-danger-icon: var(--hop-amanita-700);
1361
- --hop-danger-border-press: var(--hop-amanita-300);
1362
- --hop-danger-border-strong: var(--hop-amanita-300);
1363
- --hop-danger-border-selected: var(--hop-amanita-400);
1364
- --hop-danger-border: var(--hop-amanita-100);
1415
+ --hop-danger-icon-press: var(--hop-rose-800);
1416
+ --hop-danger-icon-hover: var(--hop-rose-500);
1417
+ --hop-danger-icon-disabled: var(--hop-rose-100);
1418
+ --hop-danger-icon-selected: var(--hop-rose-400);
1419
+ --hop-danger-icon: var(--hop-rose-700);
1420
+ --hop-danger-border-press: var(--hop-rose-300);
1421
+ --hop-danger-border-strong: var(--hop-rose-300);
1422
+ --hop-danger-border-selected: var(--hop-rose-400);
1423
+ --hop-danger-border: var(--hop-rose-100);
1365
1424
  --hop-danger-text-weak-active: var(--hop-amanita-600);
1366
1425
  --hop-danger-text-active: var(--hop-amanita-800);
1367
1426
  --hop-danger-surface-weak-active: var(--hop-amanita-100);
@@ -1409,6 +1468,32 @@
1409
1468
  --hop-comp-tile-background-color-press: var(--hop-neutral-surface-weak-press);
1410
1469
  --hop-comp-tile-background-color-hover: var(--hop-neutral-surface-weak-hover);
1411
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);
1412
1497
  --hop-comp-tabs-tab-panel-border-color-focus: var(--hop-primary-border-focus);
1413
1498
  --hop-comp-tabs-tab-border-radius: var(--hop-shape-rounded-sm);
1414
1499
  --hop-comp-tabs-tab-border-color-disabled: var(--hop-neutral-border-disabled);
@@ -1592,13 +1677,11 @@
1592
1677
  --hop-comp-button-danger-border-color-selected: var(--hop-danger-border-selected);
1593
1678
  --hop-comp-button-danger-border-color: var(--hop-neutral-border-weakest);
1594
1679
  --hop-comp-button-danger-background-disabled: var(--hop-neutral-surface-disabled);
1595
- --hop-comp-button-danger-background-selected: var(--hop-danger-surface-selected);
1596
- --hop-comp-button-danger-background-pressed: var(--hop-danger-surface-press);
1597
- --hop-comp-button-danger-background-hover: var(--hop-danger-surface-strong-hover);
1680
+ --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. */
1681
+ --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. */
1682
+ --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. */
1598
1683
  --hop-comp-button-danger-border-color-loading: var(--hop-neutral-border-weakest);
1599
1684
  --hop-comp-button-danger-color-loading: var(--hop-primary-icon-strong);
1600
- --hop-comp-button-danger-background-loading: var(--hop-danger-surface-strong);
1601
- --hop-comp-button-danger-background: var(--hop-danger-surface-strong);
1602
1685
  --hop-comp-button-danger-icon-color-selected: var(--hop-danger-icon-selected);
1603
1686
  --hop-comp-button-danger-icon-color-press: var(--hop-danger-icon-strong-hover);
1604
1687
  --hop-comp-button-danger-icon-color-hover: var(--hop-danger-icon-strong-hover);
@@ -1657,6 +1740,10 @@
1657
1740
  --hop-comp-button-primary-text-color-pressed: var(--hop-neutral-text-always-light);
1658
1741
  --hop-comp-button-primary-text-color-hover: var(--hop-neutral-text-always-light);
1659
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);
1660
1747
  --hop-comp-button-icon-color-disabled: var(--hop-neutral-icon-disabled);
1661
1748
  --hop-comp-button-text-color-disabled: var(--hop-neutral-text-disabled);
1662
1749
  --hop-comp-button-border-color-focus: var(--hop-primary-border-focus);