@hopper-ui/styled-system 3.1.7 → 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 (33) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/StyledSystemProvider.css +34 -34
  3. package/dist/StyledSystemProvider.js +10 -10
  4. package/dist/{chunk-ETLUMUKM.js → chunk-36CMNQCR.js} +1 -1
  5. package/dist/{chunk-SSOKJANQ.js → chunk-5GFAOBD3.js} +2 -2
  6. package/dist/{chunk-OYMXN25G.js → chunk-CPFBX4I7.js} +4 -4
  7. package/dist/{chunk-3S5NKTSW.js → chunk-FL7RZ2FI.js} +1 -1
  8. package/dist/{chunk-2MD232MR.js → chunk-JCDXNN3N.js} +1 -1
  9. package/dist/{chunk-BMWCINBT.js → chunk-MJGZAFTL.js} +2 -2
  10. package/dist/{chunk-XBK5RW6T.js → chunk-QTC3OPPR.js} +1 -1
  11. package/dist/{chunk-ZHO2NVMU.js → chunk-RCDHX7IY.js} +90 -1
  12. package/dist/{chunk-5LDV47AF.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.js +10 -10
  20. package/dist/styledSystemRootCssClass.js +2 -2
  21. package/dist/theme/generated/sharegate/dark.css +96 -7
  22. package/dist/theme/generated/sharegate/light.css +96 -7
  23. package/dist/theme/generated/workleap/dark.css +90 -1
  24. package/dist/theme/generated/workleap/light.css +90 -1
  25. package/dist/tokens/generated/styledSystemConstants.d.ts +1 -1
  26. package/dist/tokens/generated/styledSystemConstants.js +1 -1
  27. package/dist/tokens/generated/styledSystemToTokenMappings.d.ts +89 -0
  28. package/dist/tokens/generated/styledSystemToTokenMappings.js +1 -1
  29. package/dist/tokens/tokenMappings.d.ts +286 -1
  30. package/dist/tokens/tokenMappings.js +3 -3
  31. package/dist/useStyledSystem.css +31 -31
  32. package/dist/useStyledSystem.js +4 -4
  33. 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-1-7-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-7-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-7-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-7";
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-XBK5RW6T.js';
1
+ export { HopperRootCssClass, HopperVariablePrefix, StyledSystemRootCssClass } from '../../chunk-QTC3OPPR.js';
2
2
  import '../../chunk-AQ5VUG5P.js';
package/dist/tokens/generated/styledSystemToTokenMappings.d.ts CHANGED
@@ -173,6 +173,54 @@ declare const HopperColors: {
173
173
  readonly "core_rock-800": "rock-800";
174
174
  readonly "core_rock-900": "rock-900";
175
175
  readonly core_samoyed: "samoyed";
176
+ readonly "core_rose-25": "rose-25";
177
+ readonly "core_rose-50": "rose-50";
178
+ readonly "core_rose-75": "rose-75";
179
+ readonly "core_rose-100": "rose-100";
180
+ readonly "core_rose-200": "rose-200";
181
+ readonly "core_rose-300": "rose-300";
182
+ readonly "core_rose-400": "rose-400";
183
+ readonly "core_rose-500": "rose-500";
184
+ readonly "core_rose-600": "rose-600";
185
+ readonly "core_rose-700": "rose-700";
186
+ readonly "core_rose-800": "rose-800";
187
+ readonly "core_rose-900": "rose-900";
188
+ readonly "core_amber-25": "amber-25";
189
+ readonly "core_amber-50": "amber-50";
190
+ readonly "core_amber-75": "amber-75";
191
+ readonly "core_amber-100": "amber-100";
192
+ readonly "core_amber-200": "amber-200";
193
+ readonly "core_amber-300": "amber-300";
194
+ readonly "core_amber-400": "amber-400";
195
+ readonly "core_amber-500": "amber-500";
196
+ readonly "core_amber-600": "amber-600";
197
+ readonly "core_amber-700": "amber-700";
198
+ readonly "core_amber-800": "amber-800";
199
+ readonly "core_amber-900": "amber-900";
200
+ readonly "core_mint-25": "mint-25";
201
+ readonly "core_mint-50": "mint-50";
202
+ readonly "core_mint-75": "mint-75";
203
+ readonly "core_mint-100": "mint-100";
204
+ readonly "core_mint-200": "mint-200";
205
+ readonly "core_mint-300": "mint-300";
206
+ readonly "core_mint-400": "mint-400";
207
+ readonly "core_mint-500": "mint-500";
208
+ readonly "core_mint-600": "mint-600";
209
+ readonly "core_mint-700": "mint-700";
210
+ readonly "core_mint-800": "mint-800";
211
+ readonly "core_mint-900": "mint-900";
212
+ readonly "core_cobalt-25": "cobalt-25";
213
+ readonly "core_cobalt-50": "cobalt-50";
214
+ readonly "core_cobalt-75": "cobalt-75";
215
+ readonly "core_cobalt-100": "cobalt-100";
216
+ readonly "core_cobalt-200": "cobalt-200";
217
+ readonly "core_cobalt-300": "cobalt-300";
218
+ readonly "core_cobalt-400": "cobalt-400";
219
+ readonly "core_cobalt-500": "cobalt-500";
220
+ readonly "core_cobalt-600": "cobalt-600";
221
+ readonly "core_cobalt-700": "cobalt-700";
222
+ readonly "core_cobalt-800": "cobalt-800";
223
+ readonly "core_cobalt-900": "cobalt-900";
176
224
  };
177
225
  declare const BackgroundColors: {
178
226
  readonly "danger-active": "danger-surface-active";
@@ -202,6 +250,9 @@ declare const BackgroundColors: {
202
250
  readonly "neutral-weakest": "neutral-surface-weakest";
203
251
  readonly "neutral-weakest-selected": "neutral-surface-weakest-selected";
204
252
  readonly "neutral-weakest-hover": "neutral-surface-weakest-hover";
253
+ readonly "neutral-inverse": "neutral-surface-inverse";
254
+ readonly "neutral-always-light": "neutral-surface-always-light";
255
+ readonly "neutral-always-dark": "neutral-surface-always-dark";
205
256
  readonly "primary-active": "primary-surface-active";
206
257
  readonly "primary-strong-active": "primary-surface-strong-active";
207
258
  readonly "primary-weak-active": "primary-surface-weak-active";
@@ -286,6 +337,20 @@ declare const BackgroundColors: {
286
337
  readonly information: "information-surface";
287
338
  readonly "information-strong": "information-surface-strong";
288
339
  readonly "information-weak": "information-surface-weak";
340
+ readonly secondary: "secondary-surface";
341
+ readonly "secondary-hover": "secondary-surface-hover";
342
+ readonly "secondary-press": "secondary-surface-press";
343
+ readonly "secondary-selected": "secondary-surface-selected";
344
+ readonly "secondary-focus": "secondary-surface-focus";
345
+ readonly "secondary-disabled": "secondary-surface-disabled";
346
+ readonly "secondary-weak": "secondary-surface-weak";
347
+ readonly "secondary-weak-hover": "secondary-surface-weak-hover";
348
+ readonly "secondary-weak-press": "secondary-surface-weak-press";
349
+ readonly "secondary-weak-selected": "secondary-surface-weak-selected";
350
+ readonly "secondary-strong": "secondary-surface-strong";
351
+ readonly "secondary-strong-hover": "secondary-surface-strong-hover";
352
+ readonly "secondary-strong-press": "secondary-surface-strong-press";
353
+ readonly "secondary-strong-selected": "secondary-surface-strong-selected";
289
354
  readonly "status-caution": "status-caution-surface";
290
355
  readonly "status-caution-disabled": "status-caution-surface-disabled";
291
356
  readonly "status-caution-hover": "status-caution-surface-hover";
@@ -391,6 +456,9 @@ declare const TextColors: {
391
456
  readonly "neutral-weak-press": "neutral-text-weak-press";
392
457
  readonly "neutral-weak-selected": "neutral-text-weak-selected";
393
458
  readonly "neutral-weakest": "neutral-text-weakest";
459
+ readonly "neutral-inverse": "neutral-text-inverse";
460
+ readonly "neutral-always-light": "neutral-text-always-light";
461
+ readonly "neutral-always-dark": "neutral-text-always-dark";
394
462
  readonly "primary-active": "primary-text-active";
395
463
  readonly primary: "primary-text";
396
464
  readonly "primary-selected": "primary-text-selected";
@@ -429,6 +497,13 @@ declare const TextColors: {
429
497
  readonly "decorative-option1-weak": "decorative-option1-text-weak";
430
498
  readonly information: "information-text";
431
499
  readonly "information-weak": "information-text-weak";
500
+ readonly secondary: "secondary-text";
501
+ readonly "secondary-hover": "secondary-text-hover";
502
+ readonly "secondary-press": "secondary-text-press";
503
+ readonly "secondary-selected": "secondary-text-selected";
504
+ readonly "secondary-disabled": "secondary-text-disabled";
505
+ readonly "secondary-strong": "secondary-text-strong";
506
+ readonly "secondary-strong-hover": "secondary-text-strong-hover";
432
507
  readonly "status-caution": "status-caution-text";
433
508
  readonly "status-caution-disabled": "status-caution-text-disabled";
434
509
  readonly "status-caution-hover": "status-caution-text-hover";
@@ -523,6 +598,9 @@ declare const IconColors: {
523
598
  readonly "neutral-weak-press": "neutral-icon-weak-press";
524
599
  readonly "neutral-weak-selected": "neutral-icon-weak-selected";
525
600
  readonly "neutral-weakest": "neutral-icon-weakest";
601
+ readonly "neutral-inverse": "neutral-icon-inverse";
602
+ readonly "neutral-always-light": "neutral-icon-always-light";
603
+ readonly "neutral-always-dark": "neutral-icon-always-dark";
526
604
  readonly "primary-active": "primary-icon-active";
527
605
  readonly primary: "primary-icon";
528
606
  readonly "primary-selected": "primary-icon-selected";
@@ -553,6 +631,13 @@ declare const IconColors: {
553
631
  readonly information: "information-icon";
554
632
  readonly "information-weakest": "information-icon-weakest";
555
633
  readonly "information-weak": "information-icon-weak";
634
+ readonly secondary: "secondary-icon";
635
+ readonly "secondary-hover": "secondary-icon-hover";
636
+ readonly "secondary-press": "secondary-icon-press";
637
+ readonly "secondary-selected": "secondary-icon-selected";
638
+ readonly "secondary-disabled": "secondary-icon-disabled";
639
+ readonly "secondary-strong": "secondary-icon-strong";
640
+ readonly "secondary-strong-hover": "secondary-icon-strong-hover";
556
641
  readonly "status-caution": "status-caution-icon";
557
642
  readonly "status-caution-disabled": "status-caution-icon-disabled";
558
643
  readonly "status-caution-hover": "status-caution-icon-hover";
@@ -656,6 +741,10 @@ declare const BorderColors: {
656
741
  readonly "decorative-option2": "decorative-option2-border";
657
742
  readonly "decorative-option1": "decorative-option1-border";
658
743
  readonly information: "information-border";
744
+ readonly secondary: "secondary-border";
745
+ readonly "secondary-press": "secondary-border-press";
746
+ readonly "secondary-selected": "secondary-border-selected";
747
+ readonly "secondary-focus": "secondary-border-focus";
659
748
  readonly "status-caution": "status-caution-border";
660
749
  readonly "status-caution-disabled": "status-caution-border-disabled";
661
750
  readonly "status-caution-hover": "status-caution-border-hover";
package/dist/tokens/generated/styledSystemToTokenMappings.js CHANGED
@@ -1,2 +1,2 @@
1
- export { BackgroundColors, BorderColors, CoreSpace, DataVizColors, Elevation, FontFamily, FontOffset, FontSize, FontWeight, GradientColors, HopperColors, IconColors, LineHeight, Motions, SemanticComplexMarginSpace, SemanticComplexPaddingSpace, SemanticSimpleMarginSpace, SemanticSimplePaddingSpace, Shape, TextColors } from '../../chunk-ZHO2NVMU.js';
1
+ export { BackgroundColors, BorderColors, CoreSpace, DataVizColors, Elevation, FontFamily, FontOffset, FontSize, FontWeight, GradientColors, HopperColors, IconColors, LineHeight, Motions, SemanticComplexMarginSpace, SemanticComplexPaddingSpace, SemanticSimpleMarginSpace, SemanticSimplePaddingSpace, Shape, TextColors } from '../../chunk-RCDHX7IY.js';
2
2
  import '../../chunk-AQ5VUG5P.js';