@hopper-ui/tokens 5.1.6 → 5.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 (6) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/sharegate/dark/tokens.css +47 -6
  3. package/dist/sharegate/tokens.css +96 -7
  4. package/dist/workleap/dark/tokens.css +41 -0
  5. package/dist/workleap/tokens.css +90 -1
  6. package/package.json +2 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @hopper-ui/tokens
2
2
 
3
+ ## 5.1.8
4
+
5
+ ### Patch Changes
6
+
7
+ - 5cb9d07: Add new colors, `secondary`, `*-inverse`, `*-always-light`, `*-always-dark`, and update some primary colors for ShareGate theme.
8
+
9
+ ## 5.1.7
10
+
11
+ ### Patch Changes
12
+
13
+ - 8d43263: - Add support for gradient color tokens: https://www.npmjs.com/package/style-dictionary-utils#gradientcss
14
+ - Add support for shadow tokens: https://www.npmjs.com/package/style-dictionary-utils#shadowcss
15
+
3
16
  ## 5.1.6
4
17
 
5
18
  ### 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 Fri, 06 Mar 2026 21:57:27 GMT
3
+ * Generated on Thu, 09 Apr 2026 16:44:07 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -364,6 +364,54 @@
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;
@@ -961,6 +1009,38 @@
961
1009
  --hop-status-caution-border-hover: var(--hop-koi-400);
962
1010
  --hop-status-caution-border-disabled: var(--hop-koi-50);
963
1011
  --hop-status-caution-border: var(--hop-koi-300);
1012
+ --hop-secondary-icon-strong-hover: var(--hop-samoyed);
1013
+ --hop-secondary-icon-strong: var(--hop-samoyed);
1014
+ --hop-secondary-icon-disabled: var(--hop-persimmon-200);
1015
+ --hop-secondary-icon-selected: var(--hop-persimmon-500);
1016
+ --hop-secondary-icon-press: var(--hop-persimmon-700);
1017
+ --hop-secondary-icon-hover: var(--hop-persimmon-600);
1018
+ --hop-secondary-icon: var(--hop-persimmon-500);
1019
+ --hop-secondary-border-focus: var(--hop-persimmon-300);
1020
+ --hop-secondary-border-selected: var(--hop-persimmon-500);
1021
+ --hop-secondary-border-press: var(--hop-persimmon-400);
1022
+ --hop-secondary-border: var(--hop-persimmon-300);
1023
+ --hop-secondary-surface-strong-selected: var(--hop-persimmon-50);
1024
+ --hop-secondary-surface-strong-press: var(--hop-persimmon-600);
1025
+ --hop-secondary-surface-strong-hover: var(--hop-persimmon-500);
1026
+ --hop-secondary-surface-strong: var(--hop-persimmon-300);
1027
+ --hop-secondary-surface-weak-selected: var(--hop-persimmon-100);
1028
+ --hop-secondary-surface-weak-press: var(--hop-persimmon-75);
1029
+ --hop-secondary-surface-weak-hover: var(--hop-persimmon-50);
1030
+ --hop-secondary-surface-weak: var(--hop-persimmon-25);
1031
+ --hop-secondary-surface-disabled: var(--hop-persimmon-200);
1032
+ --hop-secondary-surface-focus: var(--hop-persimmon-25);
1033
+ --hop-secondary-surface-selected: var(--hop-persimmon-50);
1034
+ --hop-secondary-surface-press: var(--hop-persimmon-300);
1035
+ --hop-secondary-surface-hover: var(--hop-persimmon-200);
1036
+ --hop-secondary-surface: var(--hop-persimmon-50);
1037
+ --hop-secondary-text-strong-hover: var(--hop-samoyed);
1038
+ --hop-secondary-text-strong: var(--hop-samoyed);
1039
+ --hop-secondary-text-disabled: var(--hop-persimmon-200);
1040
+ --hop-secondary-text-selected: var(--hop-persimmon-500);
1041
+ --hop-secondary-text-press: var(--hop-persimmon-700);
1042
+ --hop-secondary-text-hover: var(--hop-persimmon-600);
1043
+ --hop-secondary-text: var(--hop-persimmon-500);
964
1044
  --hop-information-text-weak: var(--hop-coastal-300);
965
1045
  --hop-information-text: var(--hop-coastal-800);
966
1046
  --hop-information-surface-weak: var(--hop-coastal-50);
@@ -1100,32 +1180,32 @@
1100
1180
  --hop-primary-text-press: var(--hop-iris-700);
1101
1181
  --hop-primary-text-hover: var(--hop-iris-600);
1102
1182
  --hop-primary-text-disabled: var(--hop-iris-200);
1103
- --hop-primary-text-selected: var(--hop-persimmon-500);
1183
+ --hop-primary-text-selected: var(--hop-iris-500);
1104
1184
  --hop-primary-text: var(--hop-iris-500);
1105
1185
  --hop-primary-surface-weak-press: var(--hop-iris-75);
1106
1186
  --hop-primary-surface-weak-hover: var(--hop-iris-50);
1107
- --hop-primary-surface-weak-selected: var(--hop-persimmon-200);
1187
+ --hop-primary-surface-weak-selected: var(--hop-iris-100);
1108
1188
  --hop-primary-surface-weak: var(--hop-iris-25);
1109
1189
  --hop-primary-surface-strong-press: var(--hop-iris-700);
1110
1190
  --hop-primary-surface-strong-hover: var(--hop-iris-600);
1111
- --hop-primary-surface-strong-selected: var(--hop-persimmon-50);
1191
+ --hop-primary-surface-strong-selected: var(--hop-iris-50);
1112
1192
  --hop-primary-surface-strong: var(--hop-iris-400);
1113
1193
  --hop-primary-surface-press: var(--hop-iris-300);
1114
1194
  --hop-primary-surface-hover: var(--hop-iris-200);
1115
1195
  --hop-primary-surface-focus: var(--hop-iris-25);
1116
1196
  --hop-primary-surface-disabled: var(--hop-iris-200);
1117
- --hop-primary-surface-selected: var(--hop-persimmon-300);
1197
+ --hop-primary-surface-selected: var(--hop-iris-400);
1118
1198
  --hop-primary-surface: var(--hop-iris-50);
1119
1199
  --hop-primary-icon-strong-hover: var(--hop-samoyed);
1120
1200
  --hop-primary-icon-strong: var(--hop-samoyed);
1121
1201
  --hop-primary-icon-press: var(--hop-iris-700);
1122
1202
  --hop-primary-icon-hover: var(--hop-iris-600);
1123
1203
  --hop-primary-icon-disabled: var(--hop-iris-200);
1124
- --hop-primary-icon-selected: var(--hop-persimmon-500);
1204
+ --hop-primary-icon-selected: var(--hop-iris-500);
1125
1205
  --hop-primary-icon: var(--hop-iris-500);
1126
1206
  --hop-primary-border-press: var(--hop-iris-500);
1127
1207
  --hop-primary-border-focus: var(--hop-iris-500);
1128
- --hop-primary-border-selected: var(--hop-persimmon-400);
1208
+ --hop-primary-border-selected: var(--hop-iris-400);
1129
1209
  --hop-primary-border: var(--hop-iris-400);
1130
1210
  --hop-primary-text-active: var(--hop-sapphire-700);
1131
1211
  --hop-primary-surface-weak-active: var(--hop-sapphire-75);
@@ -1133,6 +1213,9 @@
1133
1213
  --hop-primary-surface-active: var(--hop-sapphire-300);
1134
1214
  --hop-primary-icon-active: var(--hop-sapphire-700);
1135
1215
  --hop-primary-border-active: var(--hop-sapphire-300);
1216
+ --hop-neutral-text-always-dark: var(--hop-rock-900);
1217
+ --hop-neutral-text-always-light: var(--hop-samoyed);
1218
+ --hop-neutral-text-inverse: var(--hop-rock-900);
1136
1219
  --hop-neutral-text-weakest: var(--hop-rock-300);
1137
1220
  --hop-neutral-text-weak-selected: var(--hop-rock-600);
1138
1221
  --hop-neutral-text-weak-press: var(--hop-rock-700);
@@ -1144,6 +1227,9 @@
1144
1227
  --hop-neutral-text-disabled: var(--hop-rock-300);
1145
1228
  --hop-neutral-text-selected: var(--hop-samoyed);
1146
1229
  --hop-neutral-text: var(--hop-rock-800);
1230
+ --hop-neutral-surface-always-dark: var(--hop-rock-900);
1231
+ --hop-neutral-surface-always-light: var(--hop-samoyed);
1232
+ --hop-neutral-surface-inverse: var(--hop-rock-900);
1147
1233
  --hop-neutral-surface-weakest-hover: var(--hop-rock-50);
1148
1234
  --hop-neutral-surface-weakest-selected: var(--hop-rock-50);
1149
1235
  --hop-neutral-surface-weakest: var(--hop-rock-25);
@@ -1157,6 +1243,9 @@
1157
1243
  --hop-neutral-surface-disabled: var(--hop-rock-50);
1158
1244
  --hop-neutral-surface-selected: var(--hop-rock-800);
1159
1245
  --hop-neutral-surface: var(--hop-samoyed);
1246
+ --hop-neutral-icon-always-dark: var(--hop-rock-900);
1247
+ --hop-neutral-icon-always-light: var(--hop-samoyed);
1248
+ --hop-neutral-icon-inverse: var(--hop-rock-900);
1160
1249
  --hop-neutral-icon-weakest: var(--hop-rock-200);
1161
1250
  --hop-neutral-icon-weak-selected: var(--hop-rock-600);
1162
1251
  --hop-neutral-icon-weak-press: var(--hop-rock-700);
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 Fri, 06 Mar 2026 21:57:28 GMT
3
+ * Generated on Thu, 09 Apr 2026 16:44:07 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -360,6 +360,54 @@
360
360
  --hop-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08);
361
361
  --hop-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.10);
362
362
  --hop-shadow-none: none;
363
+ --hop-cobalt-900: #001a4d;
364
+ --hop-cobalt-800: #002766;
365
+ --hop-cobalt-700: #003b99;
366
+ --hop-cobalt-600: #004fcc;
367
+ --hop-cobalt-500: #0165fc;
368
+ --hop-cobalt-400: #3a82ff;
369
+ --hop-cobalt-300: #6aa3ff;
370
+ --hop-cobalt-200: #99c2ff;
371
+ --hop-cobalt-100: #c2daff;
372
+ --hop-cobalt-75: #d6e7ff;
373
+ --hop-cobalt-50: #e6f0ff;
374
+ --hop-cobalt-25: #f2f7ff;
375
+ --hop-mint-900: #063527;
376
+ --hop-mint-800: #084a34;
377
+ --hop-mint-700: #0a6042;
378
+ --hop-mint-600: #0b6f4c;
379
+ --hop-mint-500: #0d8058;
380
+ --hop-mint-400: #10a96f;
381
+ --hop-mint-300: #12cb80;
382
+ --hop-mint-200: #0be57d;
383
+ --hop-mint-100: #66ecae;
384
+ --hop-mint-75: #97f2c8;
385
+ --hop-mint-50: #d7faea;
386
+ --hop-mint-25: #eafdf3;
387
+ --hop-amber-900: #3d3200;
388
+ --hop-amber-800: #574500;
389
+ --hop-amber-700: #705900;
390
+ --hop-amber-600: #8a6c00;
391
+ --hop-amber-500: #a68000;
392
+ --hop-amber-400: #cfa000;
393
+ --hop-amber-300: #ffb700;
394
+ --hop-amber-200: #ffc94a;
395
+ --hop-amber-100: #ffd873;
396
+ --hop-amber-75: #ffe39a;
397
+ --hop-amber-50: #fff1cc;
398
+ --hop-amber-25: #fff6e0;
399
+ --hop-rose-900: #2b1e23;
400
+ --hop-rose-800: #3d2630;
401
+ --hop-rose-700: #542f3e;
402
+ --hop-rose-600: #6a394c;
403
+ --hop-rose-500: #80435a;
404
+ --hop-rose-400: #995068;
405
+ --hop-rose-300: #fc5992;
406
+ --hop-rose-200: #f47c9e;
407
+ --hop-rose-100: #f7a3ba;
408
+ --hop-rose-75: #f9c1cf;
409
+ --hop-rose-50: #fbd6df;
410
+ --hop-rose-25: #fdecef;
363
411
  --hop-samoyed: #ffffff;
364
412
  --hop-rock-900: #232426;
365
413
  --hop-rock-800: #313335;
@@ -959,6 +1007,38 @@
959
1007
  --hop-status-caution-border-hover: var(--hop-koi-400);
960
1008
  --hop-status-caution-border-disabled: var(--hop-koi-50);
961
1009
  --hop-status-caution-border: var(--hop-koi-300);
1010
+ --hop-secondary-icon-strong-hover: var(--hop-samoyed);
1011
+ --hop-secondary-icon-strong: var(--hop-samoyed);
1012
+ --hop-secondary-icon-disabled: var(--hop-koi-200);
1013
+ --hop-secondary-icon-selected: var(--hop-koi-500);
1014
+ --hop-secondary-icon-press: var(--hop-koi-700);
1015
+ --hop-secondary-icon-hover: var(--hop-koi-600);
1016
+ --hop-secondary-icon: var(--hop-koi-500);
1017
+ --hop-secondary-border-focus: var(--hop-koi-300);
1018
+ --hop-secondary-border-selected: var(--hop-koi-500);
1019
+ --hop-secondary-border-press: var(--hop-koi-400);
1020
+ --hop-secondary-border: var(--hop-koi-300);
1021
+ --hop-secondary-surface-strong-selected: var(--hop-koi-50);
1022
+ --hop-secondary-surface-strong-press: var(--hop-koi-600);
1023
+ --hop-secondary-surface-strong-hover: var(--hop-koi-500);
1024
+ --hop-secondary-surface-strong: var(--hop-koi-300);
1025
+ --hop-secondary-surface-weak-selected: var(--hop-koi-100);
1026
+ --hop-secondary-surface-weak-press: var(--hop-koi-75);
1027
+ --hop-secondary-surface-weak-hover: var(--hop-koi-50);
1028
+ --hop-secondary-surface-weak: var(--hop-koi-25);
1029
+ --hop-secondary-surface-disabled: var(--hop-koi-200);
1030
+ --hop-secondary-surface-focus: var(--hop-koi-25);
1031
+ --hop-secondary-surface-selected: var(--hop-koi-50);
1032
+ --hop-secondary-surface-press: var(--hop-koi-300);
1033
+ --hop-secondary-surface-hover: var(--hop-koi-200);
1034
+ --hop-secondary-surface: var(--hop-koi-50);
1035
+ --hop-secondary-text-strong-hover: var(--hop-samoyed);
1036
+ --hop-secondary-text-strong: var(--hop-samoyed);
1037
+ --hop-secondary-text-disabled: var(--hop-koi-200);
1038
+ --hop-secondary-text-selected: var(--hop-koi-500);
1039
+ --hop-secondary-text-press: var(--hop-koi-700);
1040
+ --hop-secondary-text-hover: var(--hop-koi-600);
1041
+ --hop-secondary-text: var(--hop-koi-500);
962
1042
  --hop-information-text-weak: var(--hop-coastal-300);
963
1043
  --hop-information-text: var(--hop-coastal-800);
964
1044
  --hop-information-surface-weak: var(--hop-coastal-50);
@@ -1131,6 +1211,9 @@
1131
1211
  --hop-primary-surface-active: var(--hop-sapphire-300);
1132
1212
  --hop-primary-icon-active: var(--hop-sapphire-700);
1133
1213
  --hop-primary-border-active: var(--hop-sapphire-300);
1214
+ --hop-neutral-text-always-dark: var(--hop-rock-900);
1215
+ --hop-neutral-text-always-light: var(--hop-samoyed);
1216
+ --hop-neutral-text-inverse: var(--hop-rock-900);
1134
1217
  --hop-neutral-text-weakest: var(--hop-rock-300);
1135
1218
  --hop-neutral-text-weak-selected: var(--hop-rock-600);
1136
1219
  --hop-neutral-text-weak-press: var(--hop-rock-700);
@@ -1142,6 +1225,9 @@
1142
1225
  --hop-neutral-text-disabled: var(--hop-rock-300);
1143
1226
  --hop-neutral-text-selected: var(--hop-samoyed);
1144
1227
  --hop-neutral-text: var(--hop-rock-800);
1228
+ --hop-neutral-surface-always-dark: var(--hop-rock-900);
1229
+ --hop-neutral-surface-always-light: var(--hop-samoyed);
1230
+ --hop-neutral-surface-inverse: var(--hop-rock-900);
1145
1231
  --hop-neutral-surface-weakest-hover: var(--hop-rock-50);
1146
1232
  --hop-neutral-surface-weakest-selected: var(--hop-rock-50);
1147
1233
  --hop-neutral-surface-weakest: var(--hop-rock-25);
@@ -1155,6 +1241,9 @@
1155
1241
  --hop-neutral-surface-disabled: var(--hop-rock-50);
1156
1242
  --hop-neutral-surface-selected: var(--hop-rock-800);
1157
1243
  --hop-neutral-surface: var(--hop-samoyed);
1244
+ --hop-neutral-icon-always-dark: var(--hop-rock-900);
1245
+ --hop-neutral-icon-always-light: var(--hop-samoyed);
1246
+ --hop-neutral-icon-inverse: var(--hop-rock-900);
1158
1247
  --hop-neutral-icon-weakest: var(--hop-rock-200);
1159
1248
  --hop-neutral-icon-weak-selected: var(--hop-rock-600);
1160
1249
  --hop-neutral-icon-weak-press: var(--hop-rock-700);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@hopper-ui/tokens",
3
3
  "author": "Workleap",
4
- "version": "5.1.6",
4
+ "version": "5.1.8",
5
5
  "description": "The tokens package.",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
@@ -42,6 +42,7 @@
42
42
  "eslint-plugin-import": "2.32.0",
43
43
  "jest": "29.7.0",
44
44
  "style-dictionary": "3.9.2",
45
+ "style-dictionary-utils": "2.4.1",
45
46
  "tsx": "4.20.6",
46
47
  "typescript": "5.5.4",
47
48
  "typescript-eslint": "8.46.2"