@hopper-ui/tokens 5.1.7 → 5.1.9

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 +14 -0
  2. package/dist/sharegate/dark/tokens.css +47 -6
  3. package/dist/sharegate/tokens.css +109 -21
  4. package/dist/workleap/dark/tokens.css +41 -0
  5. package/dist/workleap/tokens.css +92 -4
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @hopper-ui/tokens
2
2
 
3
+ ## 5.1.9
4
+
5
+ ### Patch Changes
6
+
7
+ - 171a611: - Updated Input and Card tokens for ShareGate theme
8
+ - Removed border-radius.2-5 from core tokens
9
+ - Removed tactility-card shadow from core tokens
10
+
11
+ ## 5.1.8
12
+
13
+ ### Patch Changes
14
+
15
+ - 5cb9d07: Add new colors, `secondary`, `*-inverse`, `*-always-light`, `*-always-dark`, and update some primary colors for ShareGate theme.
16
+
3
17
  ## 5.1.7
4
18
 
5
19
  ### Patch Changes
package/dist/sharegate/dark/tokens.css CHANGED
@@ -69,6 +69,9 @@
69
69
  --hop-neutral-icon-weak-press: var(--hop-rock-50);
70
70
  --hop-neutral-icon-weak-selected: var(--hop-rock-75);
71
71
  --hop-neutral-icon-weakest: var(--hop-rock-400);
72
+ --hop-neutral-icon-inverse: var(--hop-samoyed);
73
+ --hop-neutral-icon-always-light: var(--hop-samoyed);
74
+ --hop-neutral-icon-always-dark: var(--hop-rock-900);
72
75
  --hop-neutral-surface: var(--hop-abyss);
73
76
  --hop-neutral-surface-selected: var(--hop-toad-25);
74
77
  --hop-neutral-surface-disabled: var(--hop-rock-700);
@@ -82,6 +85,9 @@
82
85
  --hop-neutral-surface-weak-press: var(--hop-rock-600);
83
86
  --hop-neutral-surface-weakest-selected: var(--hop-rock-800);
84
87
  --hop-neutral-surface-weakest-hover: var(--hop-rock-800);
88
+ --hop-neutral-surface-inverse: var(--hop-samoyed);
89
+ --hop-neutral-surface-always-light: var(--hop-samoyed);
90
+ --hop-neutral-surface-always-dark: var(--hop-rock-900);
85
91
  --hop-neutral-text: var(--hop-rock-25);
86
92
  --hop-neutral-text-selected: var(--hop-rock-900);
87
93
  --hop-neutral-text-disabled: var(--hop-rock-500);
@@ -93,6 +99,9 @@
93
99
  --hop-neutral-text-weak-press: var(--hop-rock-50);
94
100
  --hop-neutral-text-weak-selected: var(--hop-rock-75);
95
101
  --hop-neutral-text-weakest: var(--hop-rock-300);
102
+ --hop-neutral-text-inverse: var(--hop-samoyed);
103
+ --hop-neutral-text-always-light: var(--hop-samoyed);
104
+ --hop-neutral-text-always-dark: var(--hop-rock-900);
96
105
  --hop-primary-border-active: var(--hop-sapphire-500);
97
106
  --hop-primary-icon-active: var(--hop-sapphire-75);
98
107
  --hop-primary-surface-active: var(--hop-sapphire-500);
@@ -100,28 +109,28 @@
100
109
  --hop-primary-surface-weak-active: var(--hop-sapphire-600);
101
110
  --hop-primary-text-active: var(--hop-sapphire-75);
102
111
  --hop-primary-border: var(--hop-iris-300);
103
- --hop-primary-border-selected: var(--hop-persimmon-300);
112
+ --hop-primary-border-selected: var(--hop-iris-300);
104
113
  --hop-primary-border-focus: var(--hop-iris-200);
105
114
  --hop-primary-border-press: var(--hop-iris-400);
106
115
  --hop-primary-icon: var(--hop-iris-100);
107
- --hop-primary-icon-selected: var(--hop-persimmon-200);
116
+ --hop-primary-icon-selected: var(--hop-iris-200);
108
117
  --hop-primary-icon-disabled: var(--hop-iris-700);
109
118
  --hop-primary-icon-hover: var(--hop-iris-300);
110
119
  --hop-primary-icon-press: var(--hop-iris-75);
111
120
  --hop-primary-icon-strong: var(--hop-samoyed);
112
121
  --hop-primary-icon-strong-hover: var(--hop-samoyed);
113
122
  --hop-primary-surface: var(--hop-iris-200);
114
- --hop-primary-surface-selected: var(--hop-persimmon-400);
123
+ --hop-primary-surface-selected: var(--hop-iris-300);
115
124
  --hop-primary-surface-disabled: var(--hop-iris-700);
116
125
  --hop-primary-surface-focus: var(--hop-iris-900);
117
126
  --hop-primary-surface-hover: var(--hop-iris-400);
118
127
  --hop-primary-surface-press: var(--hop-iris-500);
119
128
  --hop-primary-surface-strong: var(--hop-iris-400);
120
- --hop-primary-surface-strong-selected: var(--hop-persimmon-800);
129
+ --hop-primary-surface-strong-selected: var(--hop-iris-800);
121
130
  --hop-primary-surface-strong-hover: var(--hop-iris-500);
122
131
  --hop-primary-surface-strong-press: var(--hop-iris-600);
123
132
  --hop-primary-surface-weak: var(--hop-iris-800);
124
- --hop-primary-surface-weak-selected: var(--hop-persimmon-500);
133
+ --hop-primary-surface-weak-selected: var(--hop-iris-500);
125
134
  --hop-primary-surface-weak-hover: var(--hop-iris-700);
126
135
  --hop-primary-surface-weak-press: var(--hop-iris-600);
127
136
  --hop-primary-text: var(--hop-iris-100);
@@ -129,7 +138,7 @@
129
138
  --hop-primary-text-press: var(--hop-iris-75);
130
139
  --hop-primary-text-strong: var(--hop-samoyed);
131
140
  --hop-primary-text-strong-hover: var(--hop-samoyed);
132
- --hop-primary-text-selected: var(--hop-persimmon-200);
141
+ --hop-primary-text-selected: var(--hop-iris-200);
133
142
  --hop-primary-text-disabled: var(--hop-iris-700);
134
143
  --hop-upsell-border-active: var(--hop-sunken-treasure-400);
135
144
  --hop-upsell-icon-active: var(--hop-sunken-treasure-900);
@@ -265,6 +274,38 @@
265
274
  --hop-information-surface-weak: var(--hop-coastal-800);
266
275
  --hop-information-text: var(--hop-coastal-900);
267
276
  --hop-information-text-weak: var(--hop-coastal-75);
277
+ --hop-secondary-text: var(--hop-persimmon-100);
278
+ --hop-secondary-text-hover: var(--hop-persimmon-200);
279
+ --hop-secondary-text-press: var(--hop-persimmon-75);
280
+ --hop-secondary-text-selected: var(--hop-persimmon-200);
281
+ --hop-secondary-text-disabled: var(--hop-persimmon-700);
282
+ --hop-secondary-text-strong: var(--hop-samoyed);
283
+ --hop-secondary-text-strong-hover: var(--hop-samoyed);
284
+ --hop-secondary-surface: var(--hop-persimmon-200);
285
+ --hop-secondary-surface-hover: var(--hop-persimmon-400);
286
+ --hop-secondary-surface-press: var(--hop-persimmon-500);
287
+ --hop-secondary-surface-selected: var(--hop-persimmon-800);
288
+ --hop-secondary-surface-focus: var(--hop-persimmon-900);
289
+ --hop-secondary-surface-disabled: var(--hop-persimmon-700);
290
+ --hop-secondary-surface-weak: var(--hop-persimmon-900);
291
+ --hop-secondary-surface-weak-hover: var(--hop-persimmon-800);
292
+ --hop-secondary-surface-weak-press: var(--hop-persimmon-700);
293
+ --hop-secondary-surface-weak-selected: var(--hop-persimmon-600);
294
+ --hop-secondary-surface-strong: var(--hop-persimmon-300);
295
+ --hop-secondary-surface-strong-hover: var(--hop-persimmon-100);
296
+ --hop-secondary-surface-strong-press: var(--hop-persimmon-75);
297
+ --hop-secondary-surface-strong-selected: var(--hop-persimmon-800);
298
+ --hop-secondary-border: var(--hop-persimmon-300);
299
+ --hop-secondary-border-press: var(--hop-persimmon-200);
300
+ --hop-secondary-border-selected: var(--hop-persimmon-100);
301
+ --hop-secondary-border-focus: var(--hop-persimmon-300);
302
+ --hop-secondary-icon: var(--hop-persimmon-100);
303
+ --hop-secondary-icon-hover: var(--hop-persimmon-200);
304
+ --hop-secondary-icon-press: var(--hop-persimmon-75);
305
+ --hop-secondary-icon-selected: var(--hop-persimmon-200);
306
+ --hop-secondary-icon-disabled: var(--hop-persimmon-700);
307
+ --hop-secondary-icon-strong: var(--hop-samoyed);
308
+ --hop-secondary-icon-strong-hover: var(--hop-samoyed);
268
309
  --hop-status-caution-border: var(--hop-koi-400);
269
310
  --hop-status-caution-border-disabled: var(--hop-koi-600);
270
311
  --hop-status-caution-border-hover: var(--hop-koi-500);
package/dist/sharegate/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 07 Apr 2026 21:19:59 GMT
3
+ * Generated on Wed, 15 Apr 2026 18:41:52 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -11,6 +11,8 @@
11
11
  --hop-comp-segmented-control-item-box-shadow-disabled: none;
12
12
  --hop-comp-segmented-control-item-box-shadow-selected: -2.5px -2.5px 5px 0 rgb(255 255 255 / 50%), 2.5px 2.5px 5px 0 rgb(0 0 0 / 5%);
13
13
  --hop-comp-segmented-control-box-shadow: 1.5px 1.5px 1.5px 0 rgb(0 0 0 / 3%), 0.5px 1.5px 5px 0 rgb(0 0 0 / 10%) inset, -2.5px 2.5px 5px 0 rgb(255 255 255 / 50%) inset;
14
+ --hop-comp-card-second-level-box-shadow: 0 1px 0 1px rgba(255, 255, 255, 0.10), 0 -1px 3px 0 rgba(0, 0, 0, 0.12) inset;
15
+ --hop-comp-card-main-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.10), 0 1px 0 0 rgba(255, 255, 255, 0.40) inset, 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset;
14
16
  --hop-comp-button-ghost-disabled-border-color: transparent;
15
17
  --hop-comp-button-ghost-disabled-background-color: transparent;
16
18
  --hop-comp-button-ghost-danger-border-color: transparent;
@@ -315,7 +317,6 @@
315
317
  --hop-space-20: 0.125rem;
316
318
  --hop-space-10: 0.0625rem;
317
319
  --hop-space-0: 0;
318
- --hop-border-radius-2-5: 0.75rem;
319
320
  --hop-border-radius-9999: 624.9375rem;
320
321
  --hop-border-radius-4: 1.5rem;
321
322
  --hop-border-radius-3: 1rem;
@@ -358,12 +359,59 @@
358
359
  --hop-font-family-secondary: 'Inter', Helvetica, Arial, sans-serif;
359
360
  --hop-font-family-primary: 'ABC Favorit', Helvetica, Arial, sans-serif;
360
361
  --hop-shadow-tactility-control: 1.5px 1.5px 1.5px 0 rgba(0, 0, 0, 0.03), -5px -5px 20px 0 rgba(255, 255, 255, 0.2), 0.5px 1.5px 5px 0 rgba(0, 0, 0, 0.1) inset, -2.5px 2.5px 5px 0 rgba(255, 255, 255, 0.5) inset;
361
- --hop-shadow-tactility-card: 0 12px 12px 0 rgba(0, 0, 0, 0.05);
362
362
  --hop-shadow-tactility-button: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 2px 0 rgba(0, 0, 0, 0.25) inset;
363
363
  --hop-shadow-lg: 0 10px 18px 8px rgba(60, 60, 60, 0.08);
364
364
  --hop-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08);
365
365
  --hop-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.10);
366
366
  --hop-shadow-none: none;
367
+ --hop-cobalt-900: #001a4d;
368
+ --hop-cobalt-800: #002766;
369
+ --hop-cobalt-700: #003b99;
370
+ --hop-cobalt-600: #004fcc;
371
+ --hop-cobalt-500: #0165fc;
372
+ --hop-cobalt-400: #3a82ff;
373
+ --hop-cobalt-300: #6aa3ff;
374
+ --hop-cobalt-200: #99c2ff;
375
+ --hop-cobalt-100: #c2daff;
376
+ --hop-cobalt-75: #d6e7ff;
377
+ --hop-cobalt-50: #e6f0ff;
378
+ --hop-cobalt-25: #f2f7ff;
379
+ --hop-mint-900: #063527;
380
+ --hop-mint-800: #084a34;
381
+ --hop-mint-700: #0a6042;
382
+ --hop-mint-600: #0b6f4c;
383
+ --hop-mint-500: #0d8058;
384
+ --hop-mint-400: #10a96f;
385
+ --hop-mint-300: #12cb80;
386
+ --hop-mint-200: #0be57d;
387
+ --hop-mint-100: #66ecae;
388
+ --hop-mint-75: #97f2c8;
389
+ --hop-mint-50: #d7faea;
390
+ --hop-mint-25: #eafdf3;
391
+ --hop-amber-900: #3d3200;
392
+ --hop-amber-800: #574500;
393
+ --hop-amber-700: #705900;
394
+ --hop-amber-600: #8a6c00;
395
+ --hop-amber-500: #a68000;
396
+ --hop-amber-400: #cfa000;
397
+ --hop-amber-300: #ffb700;
398
+ --hop-amber-200: #ffc94a;
399
+ --hop-amber-100: #ffd873;
400
+ --hop-amber-75: #ffe39a;
401
+ --hop-amber-50: #fff1cc;
402
+ --hop-amber-25: #fff6e0;
403
+ --hop-rose-900: #2b1e23;
404
+ --hop-rose-800: #3d2630;
405
+ --hop-rose-700: #542f3e;
406
+ --hop-rose-600: #6a394c;
407
+ --hop-rose-500: #80435a;
408
+ --hop-rose-400: #995068;
409
+ --hop-rose-300: #fc5992;
410
+ --hop-rose-200: #f47c9e;
411
+ --hop-rose-100: #f7a3ba;
412
+ --hop-rose-75: #f9c1cf;
413
+ --hop-rose-50: #fbd6df;
414
+ --hop-rose-25: #fdecef;
367
415
  --hop-samoyed: #ffffff;
368
416
  --hop-rock-900: #232426;
369
417
  --hop-rock-800: #313335;
@@ -537,9 +585,6 @@
537
585
  --hop-coastal-25: #f0f8ff;
538
586
  --hop-comp-radio-box-shadow: var(--hop-shadow-tactility-control);
539
587
  --hop-comp-checkbox-box-shadow: var(--hop-shadow-tactility-control);
540
- --hop-comp-field-border-radius: var(--hop-border-radius-2-5);
541
- --hop-comp-card-second-level-box-shadow: var(--hop-shadow-tactility-card);
542
- --hop-comp-card-main-box-shadow: var(--hop-shadow-none);
543
588
  --hop-comp-button-danger-box-shadow: var(--hop-shadow-tactility-button);
544
589
  --hop-comp-button-upsell-box-shadow: var(--hop-shadow-tactility-button);
545
590
  --hop-comp-button-secondary-box-shadow: var(--hop-shadow-tactility-button);
@@ -961,6 +1006,38 @@
961
1006
  --hop-status-caution-border-hover: var(--hop-koi-400);
962
1007
  --hop-status-caution-border-disabled: var(--hop-koi-50);
963
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-persimmon-200);
1012
+ --hop-secondary-icon-selected: var(--hop-persimmon-500);
1013
+ --hop-secondary-icon-press: var(--hop-persimmon-700);
1014
+ --hop-secondary-icon-hover: var(--hop-persimmon-600);
1015
+ --hop-secondary-icon: var(--hop-persimmon-500);
1016
+ --hop-secondary-border-focus: var(--hop-persimmon-300);
1017
+ --hop-secondary-border-selected: var(--hop-persimmon-500);
1018
+ --hop-secondary-border-press: var(--hop-persimmon-400);
1019
+ --hop-secondary-border: var(--hop-persimmon-300);
1020
+ --hop-secondary-surface-strong-selected: var(--hop-persimmon-50);
1021
+ --hop-secondary-surface-strong-press: var(--hop-persimmon-600);
1022
+ --hop-secondary-surface-strong-hover: var(--hop-persimmon-500);
1023
+ --hop-secondary-surface-strong: var(--hop-persimmon-300);
1024
+ --hop-secondary-surface-weak-selected: var(--hop-persimmon-100);
1025
+ --hop-secondary-surface-weak-press: var(--hop-persimmon-75);
1026
+ --hop-secondary-surface-weak-hover: var(--hop-persimmon-50);
1027
+ --hop-secondary-surface-weak: var(--hop-persimmon-25);
1028
+ --hop-secondary-surface-disabled: var(--hop-persimmon-200);
1029
+ --hop-secondary-surface-focus: var(--hop-persimmon-25);
1030
+ --hop-secondary-surface-selected: var(--hop-persimmon-50);
1031
+ --hop-secondary-surface-press: var(--hop-persimmon-300);
1032
+ --hop-secondary-surface-hover: var(--hop-persimmon-200);
1033
+ --hop-secondary-surface: var(--hop-persimmon-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-persimmon-200);
1037
+ --hop-secondary-text-selected: var(--hop-persimmon-500);
1038
+ --hop-secondary-text-press: var(--hop-persimmon-700);
1039
+ --hop-secondary-text-hover: var(--hop-persimmon-600);
1040
+ --hop-secondary-text: var(--hop-persimmon-500);
964
1041
  --hop-information-text-weak: var(--hop-coastal-300);
965
1042
  --hop-information-text: var(--hop-coastal-800);
966
1043
  --hop-information-surface-weak: var(--hop-coastal-50);
@@ -1100,32 +1177,32 @@
1100
1177
  --hop-primary-text-press: var(--hop-iris-700);
1101
1178
  --hop-primary-text-hover: var(--hop-iris-600);
1102
1179
  --hop-primary-text-disabled: var(--hop-iris-200);
1103
- --hop-primary-text-selected: var(--hop-persimmon-500);
1180
+ --hop-primary-text-selected: var(--hop-iris-500);
1104
1181
  --hop-primary-text: var(--hop-iris-500);
1105
1182
  --hop-primary-surface-weak-press: var(--hop-iris-75);
1106
1183
  --hop-primary-surface-weak-hover: var(--hop-iris-50);
1107
- --hop-primary-surface-weak-selected: var(--hop-persimmon-200);
1184
+ --hop-primary-surface-weak-selected: var(--hop-iris-100);
1108
1185
  --hop-primary-surface-weak: var(--hop-iris-25);
1109
1186
  --hop-primary-surface-strong-press: var(--hop-iris-700);
1110
1187
  --hop-primary-surface-strong-hover: var(--hop-iris-600);
1111
- --hop-primary-surface-strong-selected: var(--hop-persimmon-50);
1188
+ --hop-primary-surface-strong-selected: var(--hop-iris-50);
1112
1189
  --hop-primary-surface-strong: var(--hop-iris-400);
1113
1190
  --hop-primary-surface-press: var(--hop-iris-300);
1114
1191
  --hop-primary-surface-hover: var(--hop-iris-200);
1115
1192
  --hop-primary-surface-focus: var(--hop-iris-25);
1116
1193
  --hop-primary-surface-disabled: var(--hop-iris-200);
1117
- --hop-primary-surface-selected: var(--hop-persimmon-300);
1194
+ --hop-primary-surface-selected: var(--hop-iris-400);
1118
1195
  --hop-primary-surface: var(--hop-iris-50);
1119
1196
  --hop-primary-icon-strong-hover: var(--hop-samoyed);
1120
1197
  --hop-primary-icon-strong: var(--hop-samoyed);
1121
1198
  --hop-primary-icon-press: var(--hop-iris-700);
1122
1199
  --hop-primary-icon-hover: var(--hop-iris-600);
1123
1200
  --hop-primary-icon-disabled: var(--hop-iris-200);
1124
- --hop-primary-icon-selected: var(--hop-persimmon-500);
1201
+ --hop-primary-icon-selected: var(--hop-iris-500);
1125
1202
  --hop-primary-icon: var(--hop-iris-500);
1126
1203
  --hop-primary-border-press: var(--hop-iris-500);
1127
1204
  --hop-primary-border-focus: var(--hop-iris-500);
1128
- --hop-primary-border-selected: var(--hop-persimmon-400);
1205
+ --hop-primary-border-selected: var(--hop-iris-400);
1129
1206
  --hop-primary-border: var(--hop-iris-400);
1130
1207
  --hop-primary-text-active: var(--hop-sapphire-700);
1131
1208
  --hop-primary-surface-weak-active: var(--hop-sapphire-75);
@@ -1133,6 +1210,9 @@
1133
1210
  --hop-primary-surface-active: var(--hop-sapphire-300);
1134
1211
  --hop-primary-icon-active: var(--hop-sapphire-700);
1135
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);
1136
1216
  --hop-neutral-text-weakest: var(--hop-rock-300);
1137
1217
  --hop-neutral-text-weak-selected: var(--hop-rock-600);
1138
1218
  --hop-neutral-text-weak-press: var(--hop-rock-700);
@@ -1144,6 +1224,9 @@
1144
1224
  --hop-neutral-text-disabled: var(--hop-rock-300);
1145
1225
  --hop-neutral-text-selected: var(--hop-samoyed);
1146
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);
1147
1230
  --hop-neutral-surface-weakest-hover: var(--hop-rock-50);
1148
1231
  --hop-neutral-surface-weakest-selected: var(--hop-rock-50);
1149
1232
  --hop-neutral-surface-weakest: var(--hop-rock-25);
@@ -1157,6 +1240,9 @@
1157
1240
  --hop-neutral-surface-disabled: var(--hop-rock-50);
1158
1241
  --hop-neutral-surface-selected: var(--hop-rock-800);
1159
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);
1160
1246
  --hop-neutral-icon-weakest: var(--hop-rock-200);
1161
1247
  --hop-neutral-icon-weak-selected: var(--hop-rock-600);
1162
1248
  --hop-neutral-icon-weak-press: var(--hop-rock-700);
@@ -1303,12 +1389,13 @@
1303
1389
  --hop-comp-field-border-color-focus: var(--hop-primary-border-focus);
1304
1390
  --hop-comp-field-border-color-hover: var(--hop-neutral-border-hover);
1305
1391
  --hop-comp-field-border-color: var(--hop-neutral-border-weak);
1306
- --hop-comp-field-background-color-disabled: var(--hop-neutral-surface);
1307
- --hop-comp-field-background-color-hover: var(--hop-neutral-surface-weak-hover);
1308
- --hop-comp-field-background-color: var(--hop-neutral-surface-weak);
1309
- --hop-comp-select-text-color-hover: var(--hop-neutral-text-press);
1392
+ --hop-comp-field-background-color-disabled: var(--hop-neutral-surface-disabled);
1393
+ --hop-comp-field-background-color-hover: var(--hop-neutral-surface-hover);
1394
+ --hop-comp-field-background-color: var(--hop-neutral-surface);
1395
+ --hop-comp-field-border-radius: var(--hop-shape-rounded-md);
1396
+ --hop-comp-select-text-color-hover: var(--hop-neutral-text-hover);
1310
1397
  --hop-comp-select-border-color-active: var(--hop-primary-border);
1311
- --hop-comp-select-background-color-active: var(--hop-neutral-surface-weak-selected);
1398
+ --hop-comp-select-background-color-active: var(--hop-neutral-surface);
1312
1399
  --hop-comp-control-border-color-error: var(--hop-danger-border-strong);
1313
1400
  --hop-comp-control-border-color-disabled: var(--hop-neutral-border-disabled);
1314
1401
  --hop-comp-control-border-color-focus: var(--hop-primary-border-focus);
@@ -1336,10 +1423,11 @@
1336
1423
  --hop-comp-segmented-control-text-color: var(--hop-neutral-text-weakest);
1337
1424
  --hop-comp-segmented-control-border-radius: var(--hop-shape-rounded-md);
1338
1425
  --hop-comp-card-second-level-border-color: var(--hop-neutral-border-weakest);
1339
- --hop-comp-card-second-level-background-color: var(--hop-neutral-surface);
1340
- --hop-comp-card-main-border-color: var(--hop-neutral-surface-weakest);
1341
- --hop-comp-card-main-background-color: var(--hop-neutral-surface-weakest);
1342
- --hop-comp-card-border-radius: var(--hop-shape-rounded-lg);
1426
+ --hop-comp-card-second-level-background-color: var(--hop-neutral-surface-weakest);
1427
+ --hop-comp-card-second-level-border-radius: var(--hop-shape-rounded-lg);
1428
+ --hop-comp-card-main-border-color: var(--hop-neutral-border-weakest);
1429
+ --hop-comp-card-main-background-color: var(--hop-neutral-surface);
1430
+ --hop-comp-card-main-border-radius: var(--hop-shape-rounded-lg);
1343
1431
  --hop-comp-button-ghost-disabled-text-color: var(--hop-neutral-text-disabled);
1344
1432
  --hop-comp-button-disabled-border-color: var(--hop-neutral-surface-disabled);
1345
1433
  --hop-comp-button-disabled-background-color: var(--hop-neutral-surface-disabled);
package/dist/workleap/dark/tokens.css CHANGED
@@ -69,6 +69,9 @@
69
69
  --hop-neutral-icon-weak-press: var(--hop-rock-50);
70
70
  --hop-neutral-icon-weak-selected: var(--hop-rock-75);
71
71
  --hop-neutral-icon-weakest: var(--hop-rock-400);
72
+ --hop-neutral-icon-inverse: var(--hop-samoyed);
73
+ --hop-neutral-icon-always-light: var(--hop-samoyed);
74
+ --hop-neutral-icon-always-dark: var(--hop-rock-900);
72
75
  --hop-neutral-surface: var(--hop-abyss);
73
76
  --hop-neutral-surface-selected: var(--hop-toad-25);
74
77
  --hop-neutral-surface-disabled: var(--hop-rock-700);
@@ -82,6 +85,9 @@
82
85
  --hop-neutral-surface-weak-press: var(--hop-rock-600);
83
86
  --hop-neutral-surface-weakest-selected: var(--hop-rock-800);
84
87
  --hop-neutral-surface-weakest-hover: var(--hop-rock-800);
88
+ --hop-neutral-surface-inverse: var(--hop-samoyed);
89
+ --hop-neutral-surface-always-light: var(--hop-samoyed);
90
+ --hop-neutral-surface-always-dark: var(--hop-rock-900);
85
91
  --hop-neutral-text: var(--hop-rock-25);
86
92
  --hop-neutral-text-selected: var(--hop-rock-900);
87
93
  --hop-neutral-text-disabled: var(--hop-rock-500);
@@ -93,6 +99,9 @@
93
99
  --hop-neutral-text-weak-press: var(--hop-rock-50);
94
100
  --hop-neutral-text-weak-selected: var(--hop-rock-75);
95
101
  --hop-neutral-text-weakest: var(--hop-rock-300);
102
+ --hop-neutral-text-inverse: var(--hop-samoyed);
103
+ --hop-neutral-text-always-light: var(--hop-samoyed);
104
+ --hop-neutral-text-always-dark: var(--hop-rock-900);
96
105
  --hop-primary-border-active: var(--hop-sapphire-500);
97
106
  --hop-primary-icon-active: var(--hop-sapphire-75);
98
107
  --hop-primary-surface-active: var(--hop-sapphire-500);
@@ -265,6 +274,38 @@
265
274
  --hop-information-surface-weak: var(--hop-coastal-800);
266
275
  --hop-information-text: var(--hop-coastal-900);
267
276
  --hop-information-text-weak: var(--hop-coastal-75);
277
+ --hop-secondary-text: var(--hop-koi-100);
278
+ --hop-secondary-text-hover: var(--hop-koi-200);
279
+ --hop-secondary-text-press: var(--hop-koi-75);
280
+ --hop-secondary-text-selected: var(--hop-koi-200);
281
+ --hop-secondary-text-disabled: var(--hop-koi-700);
282
+ --hop-secondary-text-strong: var(--hop-samoyed);
283
+ --hop-secondary-text-strong-hover: var(--hop-samoyed);
284
+ --hop-secondary-surface: var(--hop-koi-200);
285
+ --hop-secondary-surface-hover: var(--hop-koi-400);
286
+ --hop-secondary-surface-press: var(--hop-koi-500);
287
+ --hop-secondary-surface-selected: var(--hop-koi-800);
288
+ --hop-secondary-surface-focus: var(--hop-koi-900);
289
+ --hop-secondary-surface-disabled: var(--hop-koi-700);
290
+ --hop-secondary-surface-weak: var(--hop-koi-900);
291
+ --hop-secondary-surface-weak-hover: var(--hop-koi-800);
292
+ --hop-secondary-surface-weak-press: var(--hop-koi-700);
293
+ --hop-secondary-surface-weak-selected: var(--hop-koi-600);
294
+ --hop-secondary-surface-strong: var(--hop-koi-300);
295
+ --hop-secondary-surface-strong-hover: var(--hop-koi-100);
296
+ --hop-secondary-surface-strong-press: var(--hop-koi-75);
297
+ --hop-secondary-surface-strong-selected: var(--hop-koi-800);
298
+ --hop-secondary-border: var(--hop-koi-300);
299
+ --hop-secondary-border-press: var(--hop-koi-200);
300
+ --hop-secondary-border-selected: var(--hop-koi-100);
301
+ --hop-secondary-border-focus: var(--hop-koi-300);
302
+ --hop-secondary-icon: var(--hop-koi-100);
303
+ --hop-secondary-icon-hover: var(--hop-koi-200);
304
+ --hop-secondary-icon-press: var(--hop-koi-75);
305
+ --hop-secondary-icon-selected: var(--hop-koi-200);
306
+ --hop-secondary-icon-disabled: var(--hop-koi-700);
307
+ --hop-secondary-icon-strong: var(--hop-samoyed);
308
+ --hop-secondary-icon-strong-hover: var(--hop-samoyed);
268
309
  --hop-status-caution-border: var(--hop-koi-400);
269
310
  --hop-status-caution-border-disabled: var(--hop-koi-600);
270
311
  --hop-status-caution-border-hover: var(--hop-koi-500);
package/dist/workleap/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 07 Apr 2026 21:19:59 GMT
3
+ * Generated on Wed, 15 Apr 2026 18:41:53 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -311,7 +311,6 @@
311
311
  --hop-space-20: 0.125rem;
312
312
  --hop-space-10: 0.0625rem;
313
313
  --hop-space-0: 0;
314
- --hop-border-radius-2-5: 0.75rem;
315
314
  --hop-border-radius-9999: 624.9375rem;
316
315
  --hop-border-radius-4: 1.5rem;
317
316
  --hop-border-radius-3: 1rem;
@@ -354,12 +353,59 @@
354
353
  --hop-font-family-secondary: 'Inter', Helvetica, Arial, sans-serif;
355
354
  --hop-font-family-primary: 'ABC Favorit', Helvetica, Arial, sans-serif;
356
355
  --hop-shadow-tactility-control: 1.5px 1.5px 1.5px 0 rgba(0, 0, 0, 0.03), -5px -5px 20px 0 rgba(255, 255, 255, 0.2), 0.5px 1.5px 5px 0 rgba(0, 0, 0, 0.1) inset, -2.5px 2.5px 5px 0 rgba(255, 255, 255, 0.5) inset;
357
- --hop-shadow-tactility-card: 0 12px 12px 0 rgba(0, 0, 0, 0.05);
358
356
  --hop-shadow-tactility-button: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 2px 0 rgba(0, 0, 0, 0.25) inset;
359
357
  --hop-shadow-lg: 0 10px 18px 8px rgba(60, 60, 60, 0.08);
360
358
  --hop-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08);
361
359
  --hop-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.10);
362
360
  --hop-shadow-none: none;
361
+ --hop-cobalt-900: #001a4d;
362
+ --hop-cobalt-800: #002766;
363
+ --hop-cobalt-700: #003b99;
364
+ --hop-cobalt-600: #004fcc;
365
+ --hop-cobalt-500: #0165fc;
366
+ --hop-cobalt-400: #3a82ff;
367
+ --hop-cobalt-300: #6aa3ff;
368
+ --hop-cobalt-200: #99c2ff;
369
+ --hop-cobalt-100: #c2daff;
370
+ --hop-cobalt-75: #d6e7ff;
371
+ --hop-cobalt-50: #e6f0ff;
372
+ --hop-cobalt-25: #f2f7ff;
373
+ --hop-mint-900: #063527;
374
+ --hop-mint-800: #084a34;
375
+ --hop-mint-700: #0a6042;
376
+ --hop-mint-600: #0b6f4c;
377
+ --hop-mint-500: #0d8058;
378
+ --hop-mint-400: #10a96f;
379
+ --hop-mint-300: #12cb80;
380
+ --hop-mint-200: #0be57d;
381
+ --hop-mint-100: #66ecae;
382
+ --hop-mint-75: #97f2c8;
383
+ --hop-mint-50: #d7faea;
384
+ --hop-mint-25: #eafdf3;
385
+ --hop-amber-900: #3d3200;
386
+ --hop-amber-800: #574500;
387
+ --hop-amber-700: #705900;
388
+ --hop-amber-600: #8a6c00;
389
+ --hop-amber-500: #a68000;
390
+ --hop-amber-400: #cfa000;
391
+ --hop-amber-300: #ffb700;
392
+ --hop-amber-200: #ffc94a;
393
+ --hop-amber-100: #ffd873;
394
+ --hop-amber-75: #ffe39a;
395
+ --hop-amber-50: #fff1cc;
396
+ --hop-amber-25: #fff6e0;
397
+ --hop-rose-900: #2b1e23;
398
+ --hop-rose-800: #3d2630;
399
+ --hop-rose-700: #542f3e;
400
+ --hop-rose-600: #6a394c;
401
+ --hop-rose-500: #80435a;
402
+ --hop-rose-400: #995068;
403
+ --hop-rose-300: #fc5992;
404
+ --hop-rose-200: #f47c9e;
405
+ --hop-rose-100: #f7a3ba;
406
+ --hop-rose-75: #f9c1cf;
407
+ --hop-rose-50: #fbd6df;
408
+ --hop-rose-25: #fdecef;
363
409
  --hop-samoyed: #ffffff;
364
410
  --hop-rock-900: #232426;
365
411
  --hop-rock-800: #313335;
@@ -959,6 +1005,38 @@
959
1005
  --hop-status-caution-border-hover: var(--hop-koi-400);
960
1006
  --hop-status-caution-border-disabled: var(--hop-koi-50);
961
1007
  --hop-status-caution-border: var(--hop-koi-300);
1008
+ --hop-secondary-icon-strong-hover: var(--hop-samoyed);
1009
+ --hop-secondary-icon-strong: var(--hop-samoyed);
1010
+ --hop-secondary-icon-disabled: var(--hop-koi-200);
1011
+ --hop-secondary-icon-selected: var(--hop-koi-500);
1012
+ --hop-secondary-icon-press: var(--hop-koi-700);
1013
+ --hop-secondary-icon-hover: var(--hop-koi-600);
1014
+ --hop-secondary-icon: var(--hop-koi-500);
1015
+ --hop-secondary-border-focus: var(--hop-koi-300);
1016
+ --hop-secondary-border-selected: var(--hop-koi-500);
1017
+ --hop-secondary-border-press: var(--hop-koi-400);
1018
+ --hop-secondary-border: var(--hop-koi-300);
1019
+ --hop-secondary-surface-strong-selected: var(--hop-koi-50);
1020
+ --hop-secondary-surface-strong-press: var(--hop-koi-600);
1021
+ --hop-secondary-surface-strong-hover: var(--hop-koi-500);
1022
+ --hop-secondary-surface-strong: var(--hop-koi-300);
1023
+ --hop-secondary-surface-weak-selected: var(--hop-koi-100);
1024
+ --hop-secondary-surface-weak-press: var(--hop-koi-75);
1025
+ --hop-secondary-surface-weak-hover: var(--hop-koi-50);
1026
+ --hop-secondary-surface-weak: var(--hop-koi-25);
1027
+ --hop-secondary-surface-disabled: var(--hop-koi-200);
1028
+ --hop-secondary-surface-focus: var(--hop-koi-25);
1029
+ --hop-secondary-surface-selected: var(--hop-koi-50);
1030
+ --hop-secondary-surface-press: var(--hop-koi-300);
1031
+ --hop-secondary-surface-hover: var(--hop-koi-200);
1032
+ --hop-secondary-surface: var(--hop-koi-50);
1033
+ --hop-secondary-text-strong-hover: var(--hop-samoyed);
1034
+ --hop-secondary-text-strong: var(--hop-samoyed);
1035
+ --hop-secondary-text-disabled: var(--hop-koi-200);
1036
+ --hop-secondary-text-selected: var(--hop-koi-500);
1037
+ --hop-secondary-text-press: var(--hop-koi-700);
1038
+ --hop-secondary-text-hover: var(--hop-koi-600);
1039
+ --hop-secondary-text: var(--hop-koi-500);
962
1040
  --hop-information-text-weak: var(--hop-coastal-300);
963
1041
  --hop-information-text: var(--hop-coastal-800);
964
1042
  --hop-information-surface-weak: var(--hop-coastal-50);
@@ -1131,6 +1209,9 @@
1131
1209
  --hop-primary-surface-active: var(--hop-sapphire-300);
1132
1210
  --hop-primary-icon-active: var(--hop-sapphire-700);
1133
1211
  --hop-primary-border-active: var(--hop-sapphire-300);
1212
+ --hop-neutral-text-always-dark: var(--hop-rock-900);
1213
+ --hop-neutral-text-always-light: var(--hop-samoyed);
1214
+ --hop-neutral-text-inverse: var(--hop-rock-900);
1134
1215
  --hop-neutral-text-weakest: var(--hop-rock-300);
1135
1216
  --hop-neutral-text-weak-selected: var(--hop-rock-600);
1136
1217
  --hop-neutral-text-weak-press: var(--hop-rock-700);
@@ -1142,6 +1223,9 @@
1142
1223
  --hop-neutral-text-disabled: var(--hop-rock-300);
1143
1224
  --hop-neutral-text-selected: var(--hop-samoyed);
1144
1225
  --hop-neutral-text: var(--hop-rock-800);
1226
+ --hop-neutral-surface-always-dark: var(--hop-rock-900);
1227
+ --hop-neutral-surface-always-light: var(--hop-samoyed);
1228
+ --hop-neutral-surface-inverse: var(--hop-rock-900);
1145
1229
  --hop-neutral-surface-weakest-hover: var(--hop-rock-50);
1146
1230
  --hop-neutral-surface-weakest-selected: var(--hop-rock-50);
1147
1231
  --hop-neutral-surface-weakest: var(--hop-rock-25);
@@ -1155,6 +1239,9 @@
1155
1239
  --hop-neutral-surface-disabled: var(--hop-rock-50);
1156
1240
  --hop-neutral-surface-selected: var(--hop-rock-800);
1157
1241
  --hop-neutral-surface: var(--hop-samoyed);
1242
+ --hop-neutral-icon-always-dark: var(--hop-rock-900);
1243
+ --hop-neutral-icon-always-light: var(--hop-samoyed);
1244
+ --hop-neutral-icon-inverse: var(--hop-rock-900);
1158
1245
  --hop-neutral-icon-weakest: var(--hop-rock-200);
1159
1246
  --hop-neutral-icon-weak-selected: var(--hop-rock-600);
1160
1247
  --hop-neutral-icon-weak-press: var(--hop-rock-700);
@@ -1336,9 +1423,10 @@
1336
1423
  --hop-comp-segmented-control-border-radius: var(--hop-shape-rounded-md);
1337
1424
  --hop-comp-card-second-level-border-color: var(--hop-neutral-surface-weakest);
1338
1425
  --hop-comp-card-second-level-background-color: var(--hop-neutral-surface-weakest);
1426
+ --hop-comp-card-second-level-border-radius: var(--hop-shape-rounded-md);
1339
1427
  --hop-comp-card-main-border-color: var(--hop-neutral-border-weak);
1340
1428
  --hop-comp-card-main-background-color: var(--hop-neutral-surface);
1341
- --hop-comp-card-border-radius: var(--hop-shape-rounded-md);
1429
+ --hop-comp-card-main-border-radius: var(--hop-shape-rounded-md);
1342
1430
  --hop-comp-button-ghost-disabled-text-color: var(--hop-neutral-text-disabled);
1343
1431
  --hop-comp-button-disabled-border-color: var(--hop-neutral-surface-disabled);
1344
1432
  --hop-comp-button-disabled-background-color: var(--hop-neutral-surface-disabled);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@hopper-ui/tokens",
3
3
  "author": "Workleap",
4
- "version": "5.1.7",
4
+ "version": "5.1.9",
5
5
  "description": "The tokens package.",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {