@hopper-ui/styled-system 3.1.6 → 3.1.8

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 (34) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/StyledSystemProvider.css +34 -34
  3. package/dist/StyledSystemProvider.js +9 -9
  4. package/dist/{chunk-ARLR6SPF.js → chunk-36CMNQCR.js} +1 -1
  5. package/dist/{chunk-ZHLFJ264.js → chunk-5GFAOBD3.js} +2 -2
  6. package/dist/{chunk-KS6NX6VA.js → chunk-CPFBX4I7.js} +3 -3
  7. package/dist/{chunk-VLNFJ4SY.js → chunk-FL7RZ2FI.js} +1 -1
  8. package/dist/{chunk-FHCYOO57.js → chunk-JCDXNN3N.js} +1 -1
  9. package/dist/{chunk-JVFXQ3OW.js → chunk-MJGZAFTL.js} +4 -3
  10. package/dist/{chunk-DZ5AGIIM.js → chunk-QTC3OPPR.js} +1 -1
  11. package/dist/{chunk-J7KRNWQE.js → chunk-RCDHX7IY.js} +92 -2
  12. package/dist/{chunk-XZ4SLHFY.js → chunk-V7AWRYZY.js} +2 -2
  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/styledSystemRootCssClass.js +2 -2
  22. package/dist/theme/generated/sharegate/dark.css +96 -7
  23. package/dist/theme/generated/sharegate/light.css +96 -7
  24. package/dist/theme/generated/workleap/dark.css +90 -1
  25. package/dist/theme/generated/workleap/light.css +90 -1
  26. package/dist/tokens/generated/styledSystemConstants.d.ts +1 -1
  27. package/dist/tokens/generated/styledSystemConstants.js +1 -1
  28. package/dist/tokens/generated/styledSystemToTokenMappings.d.ts +92 -2
  29. package/dist/tokens/generated/styledSystemToTokenMappings.js +1 -1
  30. package/dist/tokens/tokenMappings.d.ts +288 -2
  31. package/dist/tokens/tokenMappings.js +3 -3
  32. package/dist/useStyledSystem.css +31 -31
  33. package/dist/useStyledSystem.js +4 -4
  34. package/package.json +2 -2
package/dist/theme/generated/sharegate/dark.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-1-6-sharegate-dark {
5
+ .hop-5-1-8-sharegate-dark {
6
6
  --hop-space-1280: 8rem;
7
7
  --hop-space-960: 6rem;
8
8
  --hop-space-800: 5rem;
@@ -66,6 +66,54 @@
66
66
  --hop-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08);
67
67
  --hop-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.10);
68
68
  --hop-shadow-none: none;
69
+ --hop-cobalt-900: #001a4d;
70
+ --hop-cobalt-800: #002766;
71
+ --hop-cobalt-700: #003b99;
72
+ --hop-cobalt-600: #004fcc;
73
+ --hop-cobalt-500: #0165fc;
74
+ --hop-cobalt-400: #3a82ff;
75
+ --hop-cobalt-300: #6aa3ff;
76
+ --hop-cobalt-200: #99c2ff;
77
+ --hop-cobalt-100: #c2daff;
78
+ --hop-cobalt-75: #d6e7ff;
79
+ --hop-cobalt-50: #e6f0ff;
80
+ --hop-cobalt-25: #f2f7ff;
81
+ --hop-mint-900: #063527;
82
+ --hop-mint-800: #084a34;
83
+ --hop-mint-700: #0a6042;
84
+ --hop-mint-600: #0b6f4c;
85
+ --hop-mint-500: #0d8058;
86
+ --hop-mint-400: #10a96f;
87
+ --hop-mint-300: #12cb80;
88
+ --hop-mint-200: #0be57d;
89
+ --hop-mint-100: #66ecae;
90
+ --hop-mint-75: #97f2c8;
91
+ --hop-mint-50: #d7faea;
92
+ --hop-mint-25: #eafdf3;
93
+ --hop-amber-900: #3d3200;
94
+ --hop-amber-800: #574500;
95
+ --hop-amber-700: #705900;
96
+ --hop-amber-600: #8a6c00;
97
+ --hop-amber-500: #a68000;
98
+ --hop-amber-400: #cfa000;
99
+ --hop-amber-300: #ffb700;
100
+ --hop-amber-200: #ffc94a;
101
+ --hop-amber-100: #ffd873;
102
+ --hop-amber-75: #ffe39a;
103
+ --hop-amber-50: #fff1cc;
104
+ --hop-amber-25: #fff6e0;
105
+ --hop-rose-900: #2b1e23;
106
+ --hop-rose-800: #3d2630;
107
+ --hop-rose-700: #542f3e;
108
+ --hop-rose-600: #6a394c;
109
+ --hop-rose-500: #80435a;
110
+ --hop-rose-400: #995068;
111
+ --hop-rose-300: #fc5992;
112
+ --hop-rose-200: #f47c9e;
113
+ --hop-rose-100: #f7a3ba;
114
+ --hop-rose-75: #f9c1cf;
115
+ --hop-rose-50: #fbd6df;
116
+ --hop-rose-25: #fdecef;
69
117
  --hop-samoyed: #ffffff;
70
118
  --hop-rock-900: #232426;
71
119
  --hop-rock-800: #313335;
@@ -513,6 +561,38 @@
513
561
  --hop-status-caution-border-hover: var(--hop-koi-500);
514
562
  --hop-status-caution-border-disabled: var(--hop-koi-600);
515
563
  --hop-status-caution-border: var(--hop-koi-400);
564
+ --hop-secondary-icon-strong-hover: var(--hop-samoyed);
565
+ --hop-secondary-icon-strong: var(--hop-samoyed);
566
+ --hop-secondary-icon-disabled: var(--hop-persimmon-700);
567
+ --hop-secondary-icon-selected: var(--hop-persimmon-200);
568
+ --hop-secondary-icon-press: var(--hop-persimmon-75);
569
+ --hop-secondary-icon-hover: var(--hop-persimmon-200);
570
+ --hop-secondary-icon: var(--hop-persimmon-100);
571
+ --hop-secondary-border-focus: var(--hop-persimmon-300);
572
+ --hop-secondary-border-selected: var(--hop-persimmon-100);
573
+ --hop-secondary-border-press: var(--hop-persimmon-200);
574
+ --hop-secondary-border: var(--hop-persimmon-300);
575
+ --hop-secondary-surface-strong-selected: var(--hop-persimmon-800);
576
+ --hop-secondary-surface-strong-press: var(--hop-persimmon-75);
577
+ --hop-secondary-surface-strong-hover: var(--hop-persimmon-100);
578
+ --hop-secondary-surface-strong: var(--hop-persimmon-300);
579
+ --hop-secondary-surface-weak-selected: var(--hop-persimmon-600);
580
+ --hop-secondary-surface-weak-press: var(--hop-persimmon-700);
581
+ --hop-secondary-surface-weak-hover: var(--hop-persimmon-800);
582
+ --hop-secondary-surface-weak: var(--hop-persimmon-900);
583
+ --hop-secondary-surface-disabled: var(--hop-persimmon-700);
584
+ --hop-secondary-surface-focus: var(--hop-persimmon-900);
585
+ --hop-secondary-surface-selected: var(--hop-persimmon-800);
586
+ --hop-secondary-surface-press: var(--hop-persimmon-500);
587
+ --hop-secondary-surface-hover: var(--hop-persimmon-400);
588
+ --hop-secondary-surface: var(--hop-persimmon-200);
589
+ --hop-secondary-text-strong-hover: var(--hop-samoyed);
590
+ --hop-secondary-text-strong: var(--hop-samoyed);
591
+ --hop-secondary-text-disabled: var(--hop-persimmon-700);
592
+ --hop-secondary-text-selected: var(--hop-persimmon-200);
593
+ --hop-secondary-text-press: var(--hop-persimmon-75);
594
+ --hop-secondary-text-hover: var(--hop-persimmon-200);
595
+ --hop-secondary-text: var(--hop-persimmon-100);
516
596
  --hop-information-text-weak: var(--hop-coastal-75);
517
597
  --hop-information-text: var(--hop-coastal-900);
518
598
  --hop-information-surface-weak: var(--hop-coastal-800);
@@ -648,7 +728,7 @@
648
728
  --hop-upsell-icon-active: var(--hop-sunken-treasure-900);
649
729
  --hop-upsell-border-active: var(--hop-sunken-treasure-400);
650
730
  --hop-primary-text-disabled: var(--hop-iris-700);
651
- --hop-primary-text-selected: var(--hop-persimmon-200);
731
+ --hop-primary-text-selected: var(--hop-iris-200);
652
732
  --hop-primary-text-strong-hover: var(--hop-samoyed);
653
733
  --hop-primary-text-strong: var(--hop-samoyed);
654
734
  --hop-primary-text-press: var(--hop-iris-75);
@@ -656,28 +736,28 @@
656
736
  --hop-primary-text: var(--hop-iris-100);
657
737
  --hop-primary-surface-weak-press: var(--hop-iris-600);
658
738
  --hop-primary-surface-weak-hover: var(--hop-iris-700);
659
- --hop-primary-surface-weak-selected: var(--hop-persimmon-500);
739
+ --hop-primary-surface-weak-selected: var(--hop-iris-500);
660
740
  --hop-primary-surface-weak: var(--hop-iris-800);
661
741
  --hop-primary-surface-strong-press: var(--hop-iris-600);
662
742
  --hop-primary-surface-strong-hover: var(--hop-iris-500);
663
- --hop-primary-surface-strong-selected: var(--hop-persimmon-800);
743
+ --hop-primary-surface-strong-selected: var(--hop-iris-800);
664
744
  --hop-primary-surface-strong: var(--hop-iris-400);
665
745
  --hop-primary-surface-press: var(--hop-iris-500);
666
746
  --hop-primary-surface-hover: var(--hop-iris-400);
667
747
  --hop-primary-surface-focus: var(--hop-iris-900);
668
748
  --hop-primary-surface-disabled: var(--hop-iris-700);
669
- --hop-primary-surface-selected: var(--hop-persimmon-400);
749
+ --hop-primary-surface-selected: var(--hop-iris-300);
670
750
  --hop-primary-surface: var(--hop-iris-200);
671
751
  --hop-primary-icon-strong-hover: var(--hop-samoyed);
672
752
  --hop-primary-icon-strong: var(--hop-samoyed);
673
753
  --hop-primary-icon-press: var(--hop-iris-75);
674
754
  --hop-primary-icon-hover: var(--hop-iris-300);
675
755
  --hop-primary-icon-disabled: var(--hop-iris-700);
676
- --hop-primary-icon-selected: var(--hop-persimmon-200);
756
+ --hop-primary-icon-selected: var(--hop-iris-200);
677
757
  --hop-primary-icon: var(--hop-iris-100);
678
758
  --hop-primary-border-press: var(--hop-iris-400);
679
759
  --hop-primary-border-focus: var(--hop-iris-200);
680
- --hop-primary-border-selected: var(--hop-persimmon-300);
760
+ --hop-primary-border-selected: var(--hop-iris-300);
681
761
  --hop-primary-border: var(--hop-iris-300);
682
762
  --hop-primary-text-active: var(--hop-sapphire-75);
683
763
  --hop-primary-surface-weak-active: var(--hop-sapphire-600);
@@ -685,6 +765,9 @@
685
765
  --hop-primary-surface-active: var(--hop-sapphire-500);
686
766
  --hop-primary-icon-active: var(--hop-sapphire-75);
687
767
  --hop-primary-border-active: var(--hop-sapphire-500);
768
+ --hop-neutral-text-always-dark: var(--hop-rock-900);
769
+ --hop-neutral-text-always-light: var(--hop-samoyed);
770
+ --hop-neutral-text-inverse: var(--hop-samoyed);
688
771
  --hop-neutral-text-weakest: var(--hop-rock-300);
689
772
  --hop-neutral-text-weak-selected: var(--hop-rock-75);
690
773
  --hop-neutral-text-weak-press: var(--hop-rock-50);
@@ -696,6 +779,9 @@
696
779
  --hop-neutral-text-disabled: var(--hop-rock-500);
697
780
  --hop-neutral-text-selected: var(--hop-rock-900);
698
781
  --hop-neutral-text: var(--hop-rock-25);
782
+ --hop-neutral-surface-always-dark: var(--hop-rock-900);
783
+ --hop-neutral-surface-always-light: var(--hop-samoyed);
784
+ --hop-neutral-surface-inverse: var(--hop-samoyed);
699
785
  --hop-neutral-surface-weakest-hover: var(--hop-rock-800);
700
786
  --hop-neutral-surface-weakest-selected: var(--hop-rock-800);
701
787
  --hop-neutral-surface-weak-press: var(--hop-rock-600);
@@ -709,6 +795,9 @@
709
795
  --hop-neutral-surface-disabled: var(--hop-rock-700);
710
796
  --hop-neutral-surface-selected: var(--hop-toad-25);
711
797
  --hop-neutral-surface: var(--hop-abyss);
798
+ --hop-neutral-icon-always-dark: var(--hop-rock-900);
799
+ --hop-neutral-icon-always-light: var(--hop-samoyed);
800
+ --hop-neutral-icon-inverse: var(--hop-samoyed);
712
801
  --hop-neutral-icon-weakest: var(--hop-rock-400);
713
802
  --hop-neutral-icon-weak-selected: var(--hop-rock-75);
714
803
  --hop-neutral-icon-weak-press: var(--hop-rock-50);
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-1-6-sharegate {
5
+ .hop-5-1-8-sharegate {
6
6
  --hop-comp-switch-thumb-filter-selected: none;
7
7
  --hop-comp-switch-thumb-filter: drop-shadow(2.5px 2.5px 5px rgb(0 0 0 / 5%)) drop-shadow(-2.5px -2.5px 5px rgb(255 255 255 / 50%));
8
8
  --hop-comp-switch-track-box-shadow: 0.5px 1.5px 5px 0 rgb(0 0 0 / 10%) inset, -2.5px 2.5px 5px 0 rgb(255 255 255 / 50%) inset;
@@ -363,6 +363,54 @@
363
363
  --hop-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08);
364
364
  --hop-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.10);
365
365
  --hop-shadow-none: none;
366
+ --hop-cobalt-900: #001a4d;
367
+ --hop-cobalt-800: #002766;
368
+ --hop-cobalt-700: #003b99;
369
+ --hop-cobalt-600: #004fcc;
370
+ --hop-cobalt-500: #0165fc;
371
+ --hop-cobalt-400: #3a82ff;
372
+ --hop-cobalt-300: #6aa3ff;
373
+ --hop-cobalt-200: #99c2ff;
374
+ --hop-cobalt-100: #c2daff;
375
+ --hop-cobalt-75: #d6e7ff;
376
+ --hop-cobalt-50: #e6f0ff;
377
+ --hop-cobalt-25: #f2f7ff;
378
+ --hop-mint-900: #063527;
379
+ --hop-mint-800: #084a34;
380
+ --hop-mint-700: #0a6042;
381
+ --hop-mint-600: #0b6f4c;
382
+ --hop-mint-500: #0d8058;
383
+ --hop-mint-400: #10a96f;
384
+ --hop-mint-300: #12cb80;
385
+ --hop-mint-200: #0be57d;
386
+ --hop-mint-100: #66ecae;
387
+ --hop-mint-75: #97f2c8;
388
+ --hop-mint-50: #d7faea;
389
+ --hop-mint-25: #eafdf3;
390
+ --hop-amber-900: #3d3200;
391
+ --hop-amber-800: #574500;
392
+ --hop-amber-700: #705900;
393
+ --hop-amber-600: #8a6c00;
394
+ --hop-amber-500: #a68000;
395
+ --hop-amber-400: #cfa000;
396
+ --hop-amber-300: #ffb700;
397
+ --hop-amber-200: #ffc94a;
398
+ --hop-amber-100: #ffd873;
399
+ --hop-amber-75: #ffe39a;
400
+ --hop-amber-50: #fff1cc;
401
+ --hop-amber-25: #fff6e0;
402
+ --hop-rose-900: #2b1e23;
403
+ --hop-rose-800: #3d2630;
404
+ --hop-rose-700: #542f3e;
405
+ --hop-rose-600: #6a394c;
406
+ --hop-rose-500: #80435a;
407
+ --hop-rose-400: #995068;
408
+ --hop-rose-300: #fc5992;
409
+ --hop-rose-200: #f47c9e;
410
+ --hop-rose-100: #f7a3ba;
411
+ --hop-rose-75: #f9c1cf;
412
+ --hop-rose-50: #fbd6df;
413
+ --hop-rose-25: #fdecef;
366
414
  --hop-samoyed: #ffffff;
367
415
  --hop-rock-900: #232426;
368
416
  --hop-rock-800: #313335;
@@ -960,6 +1008,38 @@
960
1008
  --hop-status-caution-border-hover: var(--hop-koi-400);
961
1009
  --hop-status-caution-border-disabled: var(--hop-koi-50);
962
1010
  --hop-status-caution-border: var(--hop-koi-300);
1011
+ --hop-secondary-icon-strong-hover: var(--hop-samoyed);
1012
+ --hop-secondary-icon-strong: var(--hop-samoyed);
1013
+ --hop-secondary-icon-disabled: var(--hop-persimmon-200);
1014
+ --hop-secondary-icon-selected: var(--hop-persimmon-500);
1015
+ --hop-secondary-icon-press: var(--hop-persimmon-700);
1016
+ --hop-secondary-icon-hover: var(--hop-persimmon-600);
1017
+ --hop-secondary-icon: var(--hop-persimmon-500);
1018
+ --hop-secondary-border-focus: var(--hop-persimmon-300);
1019
+ --hop-secondary-border-selected: var(--hop-persimmon-500);
1020
+ --hop-secondary-border-press: var(--hop-persimmon-400);
1021
+ --hop-secondary-border: var(--hop-persimmon-300);
1022
+ --hop-secondary-surface-strong-selected: var(--hop-persimmon-50);
1023
+ --hop-secondary-surface-strong-press: var(--hop-persimmon-600);
1024
+ --hop-secondary-surface-strong-hover: var(--hop-persimmon-500);
1025
+ --hop-secondary-surface-strong: var(--hop-persimmon-300);
1026
+ --hop-secondary-surface-weak-selected: var(--hop-persimmon-100);
1027
+ --hop-secondary-surface-weak-press: var(--hop-persimmon-75);
1028
+ --hop-secondary-surface-weak-hover: var(--hop-persimmon-50);
1029
+ --hop-secondary-surface-weak: var(--hop-persimmon-25);
1030
+ --hop-secondary-surface-disabled: var(--hop-persimmon-200);
1031
+ --hop-secondary-surface-focus: var(--hop-persimmon-25);
1032
+ --hop-secondary-surface-selected: var(--hop-persimmon-50);
1033
+ --hop-secondary-surface-press: var(--hop-persimmon-300);
1034
+ --hop-secondary-surface-hover: var(--hop-persimmon-200);
1035
+ --hop-secondary-surface: var(--hop-persimmon-50);
1036
+ --hop-secondary-text-strong-hover: var(--hop-samoyed);
1037
+ --hop-secondary-text-strong: var(--hop-samoyed);
1038
+ --hop-secondary-text-disabled: var(--hop-persimmon-200);
1039
+ --hop-secondary-text-selected: var(--hop-persimmon-500);
1040
+ --hop-secondary-text-press: var(--hop-persimmon-700);
1041
+ --hop-secondary-text-hover: var(--hop-persimmon-600);
1042
+ --hop-secondary-text: var(--hop-persimmon-500);
963
1043
  --hop-information-text-weak: var(--hop-coastal-300);
964
1044
  --hop-information-text: var(--hop-coastal-800);
965
1045
  --hop-information-surface-weak: var(--hop-coastal-50);
@@ -1099,32 +1179,32 @@
1099
1179
  --hop-primary-text-press: var(--hop-iris-700);
1100
1180
  --hop-primary-text-hover: var(--hop-iris-600);
1101
1181
  --hop-primary-text-disabled: var(--hop-iris-200);
1102
- --hop-primary-text-selected: var(--hop-persimmon-500);
1182
+ --hop-primary-text-selected: var(--hop-iris-500);
1103
1183
  --hop-primary-text: var(--hop-iris-500);
1104
1184
  --hop-primary-surface-weak-press: var(--hop-iris-75);
1105
1185
  --hop-primary-surface-weak-hover: var(--hop-iris-50);
1106
- --hop-primary-surface-weak-selected: var(--hop-persimmon-200);
1186
+ --hop-primary-surface-weak-selected: var(--hop-iris-100);
1107
1187
  --hop-primary-surface-weak: var(--hop-iris-25);
1108
1188
  --hop-primary-surface-strong-press: var(--hop-iris-700);
1109
1189
  --hop-primary-surface-strong-hover: var(--hop-iris-600);
1110
- --hop-primary-surface-strong-selected: var(--hop-persimmon-50);
1190
+ --hop-primary-surface-strong-selected: var(--hop-iris-50);
1111
1191
  --hop-primary-surface-strong: var(--hop-iris-400);
1112
1192
  --hop-primary-surface-press: var(--hop-iris-300);
1113
1193
  --hop-primary-surface-hover: var(--hop-iris-200);
1114
1194
  --hop-primary-surface-focus: var(--hop-iris-25);
1115
1195
  --hop-primary-surface-disabled: var(--hop-iris-200);
1116
- --hop-primary-surface-selected: var(--hop-persimmon-300);
1196
+ --hop-primary-surface-selected: var(--hop-iris-400);
1117
1197
  --hop-primary-surface: var(--hop-iris-50);
1118
1198
  --hop-primary-icon-strong-hover: var(--hop-samoyed);
1119
1199
  --hop-primary-icon-strong: var(--hop-samoyed);
1120
1200
  --hop-primary-icon-press: var(--hop-iris-700);
1121
1201
  --hop-primary-icon-hover: var(--hop-iris-600);
1122
1202
  --hop-primary-icon-disabled: var(--hop-iris-200);
1123
- --hop-primary-icon-selected: var(--hop-persimmon-500);
1203
+ --hop-primary-icon-selected: var(--hop-iris-500);
1124
1204
  --hop-primary-icon: var(--hop-iris-500);
1125
1205
  --hop-primary-border-press: var(--hop-iris-500);
1126
1206
  --hop-primary-border-focus: var(--hop-iris-500);
1127
- --hop-primary-border-selected: var(--hop-persimmon-400);
1207
+ --hop-primary-border-selected: var(--hop-iris-400);
1128
1208
  --hop-primary-border: var(--hop-iris-400);
1129
1209
  --hop-primary-text-active: var(--hop-sapphire-700);
1130
1210
  --hop-primary-surface-weak-active: var(--hop-sapphire-75);
@@ -1132,6 +1212,9 @@
1132
1212
  --hop-primary-surface-active: var(--hop-sapphire-300);
1133
1213
  --hop-primary-icon-active: var(--hop-sapphire-700);
1134
1214
  --hop-primary-border-active: var(--hop-sapphire-300);
1215
+ --hop-neutral-text-always-dark: var(--hop-rock-900);
1216
+ --hop-neutral-text-always-light: var(--hop-samoyed);
1217
+ --hop-neutral-text-inverse: var(--hop-rock-900);
1135
1218
  --hop-neutral-text-weakest: var(--hop-rock-300);
1136
1219
  --hop-neutral-text-weak-selected: var(--hop-rock-600);
1137
1220
  --hop-neutral-text-weak-press: var(--hop-rock-700);
@@ -1143,6 +1226,9 @@
1143
1226
  --hop-neutral-text-disabled: var(--hop-rock-300);
1144
1227
  --hop-neutral-text-selected: var(--hop-samoyed);
1145
1228
  --hop-neutral-text: var(--hop-rock-800);
1229
+ --hop-neutral-surface-always-dark: var(--hop-rock-900);
1230
+ --hop-neutral-surface-always-light: var(--hop-samoyed);
1231
+ --hop-neutral-surface-inverse: var(--hop-rock-900);
1146
1232
  --hop-neutral-surface-weakest-hover: var(--hop-rock-50);
1147
1233
  --hop-neutral-surface-weakest-selected: var(--hop-rock-50);
1148
1234
  --hop-neutral-surface-weakest: var(--hop-rock-25);
@@ -1156,6 +1242,9 @@
1156
1242
  --hop-neutral-surface-disabled: var(--hop-rock-50);
1157
1243
  --hop-neutral-surface-selected: var(--hop-rock-800);
1158
1244
  --hop-neutral-surface: var(--hop-samoyed);
1245
+ --hop-neutral-icon-always-dark: var(--hop-rock-900);
1246
+ --hop-neutral-icon-always-light: var(--hop-samoyed);
1247
+ --hop-neutral-icon-inverse: var(--hop-rock-900);
1159
1248
  --hop-neutral-icon-weakest: var(--hop-rock-200);
1160
1249
  --hop-neutral-icon-weak-selected: var(--hop-rock-600);
1161
1250
  --hop-neutral-icon-weak-press: var(--hop-rock-700);
package/dist/theme/generated/workleap/dark.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-1-6-workleap-dark {
5
+ .hop-5-1-8-workleap-dark {
6
6
  --hop-space-1280: 8rem;
7
7
  --hop-space-960: 6rem;
8
8
  --hop-space-800: 5rem;
@@ -66,6 +66,54 @@
66
66
  --hop-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08);
67
67
  --hop-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.10);
68
68
  --hop-shadow-none: none;
69
+ --hop-cobalt-900: #001a4d;
70
+ --hop-cobalt-800: #002766;
71
+ --hop-cobalt-700: #003b99;
72
+ --hop-cobalt-600: #004fcc;
73
+ --hop-cobalt-500: #0165fc;
74
+ --hop-cobalt-400: #3a82ff;
75
+ --hop-cobalt-300: #6aa3ff;
76
+ --hop-cobalt-200: #99c2ff;
77
+ --hop-cobalt-100: #c2daff;
78
+ --hop-cobalt-75: #d6e7ff;
79
+ --hop-cobalt-50: #e6f0ff;
80
+ --hop-cobalt-25: #f2f7ff;
81
+ --hop-mint-900: #063527;
82
+ --hop-mint-800: #084a34;
83
+ --hop-mint-700: #0a6042;
84
+ --hop-mint-600: #0b6f4c;
85
+ --hop-mint-500: #0d8058;
86
+ --hop-mint-400: #10a96f;
87
+ --hop-mint-300: #12cb80;
88
+ --hop-mint-200: #0be57d;
89
+ --hop-mint-100: #66ecae;
90
+ --hop-mint-75: #97f2c8;
91
+ --hop-mint-50: #d7faea;
92
+ --hop-mint-25: #eafdf3;
93
+ --hop-amber-900: #3d3200;
94
+ --hop-amber-800: #574500;
95
+ --hop-amber-700: #705900;
96
+ --hop-amber-600: #8a6c00;
97
+ --hop-amber-500: #a68000;
98
+ --hop-amber-400: #cfa000;
99
+ --hop-amber-300: #ffb700;
100
+ --hop-amber-200: #ffc94a;
101
+ --hop-amber-100: #ffd873;
102
+ --hop-amber-75: #ffe39a;
103
+ --hop-amber-50: #fff1cc;
104
+ --hop-amber-25: #fff6e0;
105
+ --hop-rose-900: #2b1e23;
106
+ --hop-rose-800: #3d2630;
107
+ --hop-rose-700: #542f3e;
108
+ --hop-rose-600: #6a394c;
109
+ --hop-rose-500: #80435a;
110
+ --hop-rose-400: #995068;
111
+ --hop-rose-300: #fc5992;
112
+ --hop-rose-200: #f47c9e;
113
+ --hop-rose-100: #f7a3ba;
114
+ --hop-rose-75: #f9c1cf;
115
+ --hop-rose-50: #fbd6df;
116
+ --hop-rose-25: #fdecef;
69
117
  --hop-samoyed: #ffffff;
70
118
  --hop-rock-900: #232426;
71
119
  --hop-rock-800: #313335;
@@ -513,6 +561,38 @@
513
561
  --hop-status-caution-border-hover: var(--hop-koi-500);
514
562
  --hop-status-caution-border-disabled: var(--hop-koi-600);
515
563
  --hop-status-caution-border: var(--hop-koi-400);
564
+ --hop-secondary-icon-strong-hover: var(--hop-samoyed);
565
+ --hop-secondary-icon-strong: var(--hop-samoyed);
566
+ --hop-secondary-icon-disabled: var(--hop-koi-700);
567
+ --hop-secondary-icon-selected: var(--hop-koi-200);
568
+ --hop-secondary-icon-press: var(--hop-koi-75);
569
+ --hop-secondary-icon-hover: var(--hop-koi-200);
570
+ --hop-secondary-icon: var(--hop-koi-100);
571
+ --hop-secondary-border-focus: var(--hop-koi-300);
572
+ --hop-secondary-border-selected: var(--hop-koi-100);
573
+ --hop-secondary-border-press: var(--hop-koi-200);
574
+ --hop-secondary-border: var(--hop-koi-300);
575
+ --hop-secondary-surface-strong-selected: var(--hop-koi-800);
576
+ --hop-secondary-surface-strong-press: var(--hop-koi-75);
577
+ --hop-secondary-surface-strong-hover: var(--hop-koi-100);
578
+ --hop-secondary-surface-strong: var(--hop-koi-300);
579
+ --hop-secondary-surface-weak-selected: var(--hop-koi-600);
580
+ --hop-secondary-surface-weak-press: var(--hop-koi-700);
581
+ --hop-secondary-surface-weak-hover: var(--hop-koi-800);
582
+ --hop-secondary-surface-weak: var(--hop-koi-900);
583
+ --hop-secondary-surface-disabled: var(--hop-koi-700);
584
+ --hop-secondary-surface-focus: var(--hop-koi-900);
585
+ --hop-secondary-surface-selected: var(--hop-koi-800);
586
+ --hop-secondary-surface-press: var(--hop-koi-500);
587
+ --hop-secondary-surface-hover: var(--hop-koi-400);
588
+ --hop-secondary-surface: var(--hop-koi-200);
589
+ --hop-secondary-text-strong-hover: var(--hop-samoyed);
590
+ --hop-secondary-text-strong: var(--hop-samoyed);
591
+ --hop-secondary-text-disabled: var(--hop-koi-700);
592
+ --hop-secondary-text-selected: var(--hop-koi-200);
593
+ --hop-secondary-text-press: var(--hop-koi-75);
594
+ --hop-secondary-text-hover: var(--hop-koi-200);
595
+ --hop-secondary-text: var(--hop-koi-100);
516
596
  --hop-information-text-weak: var(--hop-coastal-75);
517
597
  --hop-information-text: var(--hop-coastal-900);
518
598
  --hop-information-surface-weak: var(--hop-coastal-800);
@@ -685,6 +765,9 @@
685
765
  --hop-primary-surface-active: var(--hop-sapphire-500);
686
766
  --hop-primary-icon-active: var(--hop-sapphire-75);
687
767
  --hop-primary-border-active: var(--hop-sapphire-500);
768
+ --hop-neutral-text-always-dark: var(--hop-rock-900);
769
+ --hop-neutral-text-always-light: var(--hop-samoyed);
770
+ --hop-neutral-text-inverse: var(--hop-samoyed);
688
771
  --hop-neutral-text-weakest: var(--hop-rock-300);
689
772
  --hop-neutral-text-weak-selected: var(--hop-rock-75);
690
773
  --hop-neutral-text-weak-press: var(--hop-rock-50);
@@ -696,6 +779,9 @@
696
779
  --hop-neutral-text-disabled: var(--hop-rock-500);
697
780
  --hop-neutral-text-selected: var(--hop-rock-900);
698
781
  --hop-neutral-text: var(--hop-rock-25);
782
+ --hop-neutral-surface-always-dark: var(--hop-rock-900);
783
+ --hop-neutral-surface-always-light: var(--hop-samoyed);
784
+ --hop-neutral-surface-inverse: var(--hop-samoyed);
699
785
  --hop-neutral-surface-weakest-hover: var(--hop-rock-800);
700
786
  --hop-neutral-surface-weakest-selected: var(--hop-rock-800);
701
787
  --hop-neutral-surface-weak-press: var(--hop-rock-600);
@@ -709,6 +795,9 @@
709
795
  --hop-neutral-surface-disabled: var(--hop-rock-700);
710
796
  --hop-neutral-surface-selected: var(--hop-toad-25);
711
797
  --hop-neutral-surface: var(--hop-abyss);
798
+ --hop-neutral-icon-always-dark: var(--hop-rock-900);
799
+ --hop-neutral-icon-always-light: var(--hop-samoyed);
800
+ --hop-neutral-icon-inverse: var(--hop-samoyed);
712
801
  --hop-neutral-icon-weakest: var(--hop-rock-400);
713
802
  --hop-neutral-icon-weak-selected: var(--hop-rock-75);
714
803
  --hop-neutral-icon-weak-press: var(--hop-rock-50);
package/dist/theme/generated/workleap/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-1-6-workleap {
5
+ .hop-5-1-8-workleap {
6
6
  --hop-comp-switch-thumb-filter-selected: none;
7
7
  --hop-comp-switch-thumb-filter: none;
8
8
  --hop-comp-switch-track-box-shadow: none;
@@ -359,6 +359,54 @@
359
359
  --hop-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08);
360
360
  --hop-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.10);
361
361
  --hop-shadow-none: none;
362
+ --hop-cobalt-900: #001a4d;
363
+ --hop-cobalt-800: #002766;
364
+ --hop-cobalt-700: #003b99;
365
+ --hop-cobalt-600: #004fcc;
366
+ --hop-cobalt-500: #0165fc;
367
+ --hop-cobalt-400: #3a82ff;
368
+ --hop-cobalt-300: #6aa3ff;
369
+ --hop-cobalt-200: #99c2ff;
370
+ --hop-cobalt-100: #c2daff;
371
+ --hop-cobalt-75: #d6e7ff;
372
+ --hop-cobalt-50: #e6f0ff;
373
+ --hop-cobalt-25: #f2f7ff;
374
+ --hop-mint-900: #063527;
375
+ --hop-mint-800: #084a34;
376
+ --hop-mint-700: #0a6042;
377
+ --hop-mint-600: #0b6f4c;
378
+ --hop-mint-500: #0d8058;
379
+ --hop-mint-400: #10a96f;
380
+ --hop-mint-300: #12cb80;
381
+ --hop-mint-200: #0be57d;
382
+ --hop-mint-100: #66ecae;
383
+ --hop-mint-75: #97f2c8;
384
+ --hop-mint-50: #d7faea;
385
+ --hop-mint-25: #eafdf3;
386
+ --hop-amber-900: #3d3200;
387
+ --hop-amber-800: #574500;
388
+ --hop-amber-700: #705900;
389
+ --hop-amber-600: #8a6c00;
390
+ --hop-amber-500: #a68000;
391
+ --hop-amber-400: #cfa000;
392
+ --hop-amber-300: #ffb700;
393
+ --hop-amber-200: #ffc94a;
394
+ --hop-amber-100: #ffd873;
395
+ --hop-amber-75: #ffe39a;
396
+ --hop-amber-50: #fff1cc;
397
+ --hop-amber-25: #fff6e0;
398
+ --hop-rose-900: #2b1e23;
399
+ --hop-rose-800: #3d2630;
400
+ --hop-rose-700: #542f3e;
401
+ --hop-rose-600: #6a394c;
402
+ --hop-rose-500: #80435a;
403
+ --hop-rose-400: #995068;
404
+ --hop-rose-300: #fc5992;
405
+ --hop-rose-200: #f47c9e;
406
+ --hop-rose-100: #f7a3ba;
407
+ --hop-rose-75: #f9c1cf;
408
+ --hop-rose-50: #fbd6df;
409
+ --hop-rose-25: #fdecef;
362
410
  --hop-samoyed: #ffffff;
363
411
  --hop-rock-900: #232426;
364
412
  --hop-rock-800: #313335;
@@ -958,6 +1006,38 @@
958
1006
  --hop-status-caution-border-hover: var(--hop-koi-400);
959
1007
  --hop-status-caution-border-disabled: var(--hop-koi-50);
960
1008
  --hop-status-caution-border: var(--hop-koi-300);
1009
+ --hop-secondary-icon-strong-hover: var(--hop-samoyed);
1010
+ --hop-secondary-icon-strong: var(--hop-samoyed);
1011
+ --hop-secondary-icon-disabled: var(--hop-koi-200);
1012
+ --hop-secondary-icon-selected: var(--hop-koi-500);
1013
+ --hop-secondary-icon-press: var(--hop-koi-700);
1014
+ --hop-secondary-icon-hover: var(--hop-koi-600);
1015
+ --hop-secondary-icon: var(--hop-koi-500);
1016
+ --hop-secondary-border-focus: var(--hop-koi-300);
1017
+ --hop-secondary-border-selected: var(--hop-koi-500);
1018
+ --hop-secondary-border-press: var(--hop-koi-400);
1019
+ --hop-secondary-border: var(--hop-koi-300);
1020
+ --hop-secondary-surface-strong-selected: var(--hop-koi-50);
1021
+ --hop-secondary-surface-strong-press: var(--hop-koi-600);
1022
+ --hop-secondary-surface-strong-hover: var(--hop-koi-500);
1023
+ --hop-secondary-surface-strong: var(--hop-koi-300);
1024
+ --hop-secondary-surface-weak-selected: var(--hop-koi-100);
1025
+ --hop-secondary-surface-weak-press: var(--hop-koi-75);
1026
+ --hop-secondary-surface-weak-hover: var(--hop-koi-50);
1027
+ --hop-secondary-surface-weak: var(--hop-koi-25);
1028
+ --hop-secondary-surface-disabled: var(--hop-koi-200);
1029
+ --hop-secondary-surface-focus: var(--hop-koi-25);
1030
+ --hop-secondary-surface-selected: var(--hop-koi-50);
1031
+ --hop-secondary-surface-press: var(--hop-koi-300);
1032
+ --hop-secondary-surface-hover: var(--hop-koi-200);
1033
+ --hop-secondary-surface: var(--hop-koi-50);
1034
+ --hop-secondary-text-strong-hover: var(--hop-samoyed);
1035
+ --hop-secondary-text-strong: var(--hop-samoyed);
1036
+ --hop-secondary-text-disabled: var(--hop-koi-200);
1037
+ --hop-secondary-text-selected: var(--hop-koi-500);
1038
+ --hop-secondary-text-press: var(--hop-koi-700);
1039
+ --hop-secondary-text-hover: var(--hop-koi-600);
1040
+ --hop-secondary-text: var(--hop-koi-500);
961
1041
  --hop-information-text-weak: var(--hop-coastal-300);
962
1042
  --hop-information-text: var(--hop-coastal-800);
963
1043
  --hop-information-surface-weak: var(--hop-coastal-50);
@@ -1130,6 +1210,9 @@
1130
1210
  --hop-primary-surface-active: var(--hop-sapphire-300);
1131
1211
  --hop-primary-icon-active: var(--hop-sapphire-700);
1132
1212
  --hop-primary-border-active: var(--hop-sapphire-300);
1213
+ --hop-neutral-text-always-dark: var(--hop-rock-900);
1214
+ --hop-neutral-text-always-light: var(--hop-samoyed);
1215
+ --hop-neutral-text-inverse: var(--hop-rock-900);
1133
1216
  --hop-neutral-text-weakest: var(--hop-rock-300);
1134
1217
  --hop-neutral-text-weak-selected: var(--hop-rock-600);
1135
1218
  --hop-neutral-text-weak-press: var(--hop-rock-700);
@@ -1141,6 +1224,9 @@
1141
1224
  --hop-neutral-text-disabled: var(--hop-rock-300);
1142
1225
  --hop-neutral-text-selected: var(--hop-samoyed);
1143
1226
  --hop-neutral-text: var(--hop-rock-800);
1227
+ --hop-neutral-surface-always-dark: var(--hop-rock-900);
1228
+ --hop-neutral-surface-always-light: var(--hop-samoyed);
1229
+ --hop-neutral-surface-inverse: var(--hop-rock-900);
1144
1230
  --hop-neutral-surface-weakest-hover: var(--hop-rock-50);
1145
1231
  --hop-neutral-surface-weakest-selected: var(--hop-rock-50);
1146
1232
  --hop-neutral-surface-weakest: var(--hop-rock-25);
@@ -1154,6 +1240,9 @@
1154
1240
  --hop-neutral-surface-disabled: var(--hop-rock-50);
1155
1241
  --hop-neutral-surface-selected: var(--hop-rock-800);
1156
1242
  --hop-neutral-surface: var(--hop-samoyed);
1243
+ --hop-neutral-icon-always-dark: var(--hop-rock-900);
1244
+ --hop-neutral-icon-always-light: var(--hop-samoyed);
1245
+ --hop-neutral-icon-inverse: var(--hop-rock-900);
1157
1246
  --hop-neutral-icon-weakest: var(--hop-rock-200);
1158
1247
  --hop-neutral-icon-weak-selected: var(--hop-rock-600);
1159
1248
  --hop-neutral-icon-weak-press: var(--hop-rock-700);
package/dist/tokens/generated/styledSystemConstants.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  declare const HopperRootCssClass = "hop";
2
- declare const StyledSystemRootCssClass = "hop-5-1-6";
2
+ declare const StyledSystemRootCssClass = "hop-5-1-8";
3
3
  declare const HopperVariablePrefix = "--hop";
4
4
  type Theme = "sharegate" | "workleap";
5
5
 
package/dist/tokens/generated/styledSystemConstants.js CHANGED
@@ -1,2 +1,2 @@
1
- export { HopperRootCssClass, HopperVariablePrefix, StyledSystemRootCssClass } from '../../chunk-DZ5AGIIM.js';
1
+ export { HopperRootCssClass, HopperVariablePrefix, StyledSystemRootCssClass } from '../../chunk-QTC3OPPR.js';
2
2
  import '../../chunk-AQ5VUG5P.js';