@hopper-ui/tokens 5.0.0 → 5.1.1

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 +21 -0
  2. package/dist/sharegate/dark/tokens.css +57 -56
  3. package/dist/sharegate/tokens.css +408 -272
  4. package/dist/workleap/dark/tokens.css +4 -3
  5. package/dist/workleap/tokens.css +354 -218
  6. package/package.json +1 -1
package/dist/sharegate/tokens.css CHANGED
@@ -1,203 +1,21 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 23 Jan 2026 21:07:24 GMT
3
+ * Generated on Tue, 10 Feb 2026 16:37:35 GMT
4
4
  */
5
5
 
6
6
  :root {
7
- --hop-border-radius-9999: 624.9375rem;
8
- --hop-border-radius-4: 1.5rem;
9
- --hop-border-radius-3: 1rem;
10
- --hop-border-radius-2: 0.5rem;
11
- --hop-border-radius-1: 0.25rem;
12
- --hop-border-radius-0: 0;
13
- --hop-easing-expressive: cubic-bezier(0.72, -0.66, 0.15, 1.5);
14
- --hop-easing-focus: cubic-bezier(0.46, 0.03, 0.52, 0.96);
15
- --hop-easing-productive: cubic-bezier(0.22, 0.61, 0.36, 1);
16
- --hop-easing-duration-5: 800ms;
17
- --hop-easing-duration-4: 500ms;
18
- --hop-easing-duration-3: 300ms;
19
- --hop-easing-duration-2: 200ms;
20
- --hop-easing-duration-1: 100ms;
21
- --hop-line-height-1-50: 1.5;
22
- --hop-line-height-1-4285: 1.4285714;
23
- --hop-line-height-1-33: 1.3333333;
24
- --hop-line-height-1-25: 1.25;
25
- --hop-line-height-1-20: 1.2;
26
- --hop-line-height-1-14: 1.1428571;
27
- --hop-line-height-1-125: 1.125;
28
- --hop-font-weight-690: 690;
29
- --hop-font-weight-680: 680;
30
- --hop-font-weight-590: 590;
31
- --hop-font-weight-580: 580;
32
- --hop-font-weight-505: 505;
33
- --hop-font-weight-410: 410;
34
- --hop-font-weight-400: 400;
35
- --hop-font-size-480: 3rem;
36
- --hop-font-size-360: 2.25rem;
37
- --hop-font-size-320: 2rem;
38
- --hop-font-size-280: 1.75rem;
39
- --hop-font-size-240: 1.5rem;
40
- --hop-font-size-200: 1.25rem;
41
- --hop-font-size-180: 1.125rem;
42
- --hop-font-size-160: 1rem;
43
- --hop-font-size-140: 0.875rem;
44
- --hop-font-size-120: 0.75rem;
45
- --hop-font-family-tertiary: 'ABC Favorit Mono', Consolas, 'SF Mono', monospace;
46
- --hop-font-family-secondary: 'Inter', Helvetica, Arial, sans-serif;
47
- --hop-font-family-primary: 'ABC Favorit', Helvetica, Arial, sans-serif;
48
- --hop-shadow-lg: 0 10px 18px 8px rgba(60, 60, 60, 0.08);
49
- --hop-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08);
50
- --hop-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.10);
51
- --hop-shadow-none: none;
52
- --hop-samoyed: #ffffff;
53
- --hop-rock-900: #292929;
54
- --hop-rock-800: #3c3c3c;
55
- --hop-rock-700: #505050;
56
- --hop-rock-600: #636362;
57
- --hop-rock-500: #6c6c6b;
58
- --hop-rock-400: #777775;
59
- --hop-rock-300: #959593;
60
- --hop-rock-200: #b3b3b1;
61
- --hop-rock-100: #ccccca;
62
- --hop-rock-75: #e0dfdd;
63
- --hop-rock-50: #ecebe8;
64
- --hop-rock-25: #f8f6f3;
65
- --hop-rock-20: #fcfbfb;
66
- --hop-abyss: #1d1d1c;
67
- --hop-moss-900: #132a27;
68
- --hop-moss-800: #16433d;
69
- --hop-moss-700: #115a52;
70
- --hop-moss-600: #0a6f64;
71
- --hop-moss-500: #0c796b;
72
- --hop-moss-400: #188a71;
73
- --hop-moss-300: #47a584;
74
- --hop-moss-200: #7dc291;
75
- --hop-moss-100: #aad89d;
76
- --hop-moss-75: #cde8ac;
77
- --hop-moss-50: #e3f3b9;
78
- --hop-moss-25: #f4f9e9;
79
- --hop-amanita-900: #431a17;
80
- --hop-amanita-800: #6c2320;
81
- --hop-amanita-700: #952927;
82
- --hop-amanita-600: #ba2d2d;
83
- --hop-amanita-500: #cb2e31;
84
- --hop-amanita-400: #df3236;
85
- --hop-amanita-300: #fa4d59;
86
- --hop-amanita-200: #ff8e8e;
87
- --hop-amanita-100: #ffbcb7;
88
- --hop-amanita-75: #ffd6d3;
89
- --hop-amanita-50: #fde6e5;
90
- --hop-amanita-25: #fdf6f6;
91
- --hop-koi-900: #451a02;
92
- --hop-koi-800: #692803;
93
- --hop-koi-700: #8c3504;
94
- --hop-koi-600: #ab4104;
95
- --hop-koi-500: #ba4705;
96
- --hop-koi-400: #c95109;
97
- --hop-koi-300: #e57723;
98
- --hop-koi-200: #ff9b3f;
99
- --hop-koi-100: #ffbf92;
100
- --hop-koi-75: #ffd8be;
101
- --hop-koi-50: #ffe8d3;
102
- --hop-koi-25: #fff5e9;
103
- --hop-sunken-treasure-900: #2f250d;
104
- --hop-sunken-treasure-800: #4b390f;
105
- --hop-sunken-treasure-700: #654c0d;
106
- --hop-sunken-treasure-600: #7e5e0a;
107
- --hop-sunken-treasure-500: #8b6609;
108
- --hop-sunken-treasure-400: #996f08;
109
- --hop-sunken-treasure-300: #c28b12;
110
- --hop-sunken-treasure-200: #e2a934;
111
- --hop-sunken-treasure-100: #eac96d;
112
- --hop-sunken-treasure-75: #f7e694;
113
- --hop-sunken-treasure-50: #fff2b8;
114
- --hop-sunken-treasure-25: #fff8d6;
115
- --hop-toad-900: #2a2620;
116
- --hop-toad-800: #433b31;
117
- --hop-toad-700: #594f41;
118
- --hop-toad-600: #6e6151;
119
- --hop-toad-500: #776a59;
120
- --hop-toad-400: #837463;
121
- --hop-toad-300: #a19382;
122
- --hop-toad-200: #bdb1a3;
123
- --hop-toad-100: #d4cbc0;
124
- --hop-toad-75: #e5ded6;
125
- --hop-toad-50: #f0eae3;
126
- --hop-toad-25: #fef6ef;
127
- --hop-fog-900: #20282a;
128
- --hop-fog-800: #313e43;
129
- --hop-fog-700: #40535a;
130
- --hop-fog-600: #4e6770;
131
- --hop-fog-500: #557079;
132
- --hop-fog-400: #5e7b84;
133
- --hop-fog-300: #7c9aa3;
134
- --hop-fog-200: #9cb7be;
135
- --hop-fog-100: #bad0d5;
136
- --hop-fog-75: #d2e3e7;
137
- --hop-fog-50: #e1eef1;
138
- --hop-fog-25: #f2f8fa;
139
- --hop-sapphire-900: #152450;
140
- --hop-sapphire-800: #1b3587;
141
- --hop-sapphire-700: #2040c7;
142
- --hop-sapphire-600: #2a43e8;
143
- --hop-sapphire-500: #3b57ff;
144
- --hop-sapphire-400: #4767fe;
145
- --hop-sapphire-300: #6c8ffd;
146
- --hop-sapphire-200: #95b1ff;
147
- --hop-sapphire-100: #b9cbff;
148
- --hop-sapphire-75: #d6e0ff;
149
- --hop-sapphire-50: #e6ebff;
150
- --hop-sapphire-25: #f5f6ff;
151
- --hop-orchid-bloom-900: #1e1c5d;
152
- --hop-orchid-bloom-800: #322b8d;
153
- --hop-orchid-bloom-700: #433fac;
154
- --hop-orchid-bloom-600: #5454be;
155
- --hop-orchid-bloom-500: #5f61c5;
156
- --hop-orchid-bloom-400: #6b6ecc;
157
- --hop-orchid-bloom-300: #8d91dc;
158
- --hop-orchid-bloom-200: #aeb3e8;
159
- --hop-orchid-bloom-100: #c8caf0;
160
- --hop-orchid-bloom-75: #ddddf7;
161
- --hop-orchid-bloom-50: #eae9fb;
162
- --hop-orchid-bloom-25: #f6f5ff;
163
- --hop-quetzal-900: #002d1c;
164
- --hop-quetzal-800: #00452d;
165
- --hop-quetzal-700: #055c41;
166
- --hop-quetzal-600: #206f54;
167
- --hop-quetzal-500: #2b795e;
168
- --hop-quetzal-400: #38836a;
169
- --hop-quetzal-300: #5da18c;
170
- --hop-quetzal-200: #83beaf;
171
- --hop-quetzal-100: #a3d6cb;
172
- --hop-quetzal-75: #bde8e1;
173
- --hop-quetzal-50: #cff4ef;
174
- --hop-quetzal-25: #ddfdf9;
175
- --hop-coastal-900: #00274b;
176
- --hop-coastal-800: #003d70;
177
- --hop-coastal-700: #0a538b;
178
- --hop-coastal-600: #23669f;
179
- --hop-coastal-500: #2e70a8;
180
- --hop-coastal-400: #3a7bb2;
181
- --hop-coastal-300: #5d9acd;
182
- --hop-coastal-200: #81b9e4;
183
- --hop-coastal-100: #9fd2f7;
184
- --hop-coastal-75: #bae6ff;
185
- --hop-coastal-50: #d9efff;
186
- --hop-coastal-25: #f0f8ff;
187
- --hop-space-1280: 8rem;
188
- --hop-space-960: 6rem;
189
- --hop-space-800: 5rem;
190
- --hop-space-640: 4rem;
191
- --hop-space-480: 3rem;
192
- --hop-space-400: 2.5rem;
193
- --hop-space-320: 2rem;
194
- --hop-space-240: 1.5rem;
195
- --hop-space-160: 1rem;
196
- --hop-space-80: 0.5rem;
197
- --hop-space-40: 0.25rem;
198
- --hop-space-20: 0.125rem;
199
- --hop-space-10: 0.0625rem;
200
- --hop-space-0: 0;
7
+ --hop-comp-button-ghost-disabled-border-color: transparent;
8
+ --hop-comp-button-ghost-disabled-background-color: transparent;
9
+ --hop-comp-button-ghost-danger-border-color: transparent;
10
+ --hop-comp-button-ghost-danger-background-color: transparent;
11
+ --hop-comp-button-ghost-danger-box-shadow: none;
12
+ --hop-comp-button-ghost-secondary-border-color: transparent;
13
+ --hop-comp-button-ghost-secondary-background-color: transparent;
14
+ --hop-comp-button-ghost-secondary-box-shadow: none;
15
+ --hop-comp-button-ghost-primary-border-color: transparent;
16
+ --hop-comp-button-ghost-primary-background-color: transparent;
17
+ --hop-comp-button-ghost-primary-box-shadow: none;
18
+ --hop-comp-button-secondary-border-color-selected: transparent;
201
19
  --hop-overline-bottom-offset: -0.25rem;
202
20
  --hop-overline-top-offset: -0.25rem;
203
21
  --hop-heading-xs-medium-bottom-offset: -0.25rem;
@@ -476,28 +294,242 @@
476
294
  --hop-dataviz-monochromatic-primary-75: #d6e0ff;
477
295
  --hop-dataviz-monochromatic-primary-50: #e6ebff;
478
296
  --hop-dataviz-monochromatic-primary-25: #f5f6ff;
479
- --hop-comp-button-border-color: var(--hop-amanita-100);
480
- --hop-space-inset-stretch-lg: var(--hop-space-480) var(--hop-space-240);
481
- --hop-space-inset-stretch-md: var(--hop-space-240) var(--hop-space-160);
482
- --hop-space-inset-stretch-sm: var(--hop-space-160) var(--hop-space-80);
483
- --hop-space-inset-squish-lg: var(--hop-space-160) var(--hop-space-320);
484
- --hop-space-inset-squish-md: var(--hop-space-80) var(--hop-space-160);
485
- --hop-space-inset-squish-sm: var(--hop-space-40) var(--hop-space-80);
486
- --hop-space-inset-xl: var(--hop-space-320);
487
- --hop-space-inset-lg: var(--hop-space-240);
488
- --hop-space-inset-md: var(--hop-space-160);
489
- --hop-space-inset-sm: var(--hop-space-80);
490
- --hop-space-inset-xs: var(--hop-space-40);
491
- --hop-space-inline-xl: var(--hop-space-320);
492
- --hop-space-inline-lg: var(--hop-space-240);
493
- --hop-space-inline-md: var(--hop-space-160);
494
- --hop-space-inline-sm: var(--hop-space-80);
495
- --hop-space-inline-xs: var(--hop-space-40);
496
- --hop-space-stack-xl: var(--hop-space-320);
497
- --hop-space-stack-lg: var(--hop-space-240);
498
- --hop-space-stack-md: var(--hop-space-160);
499
- --hop-space-stack-sm: var(--hop-space-80);
500
- --hop-space-stack-xs: var(--hop-space-40);
297
+ --hop-space-1280: 8rem;
298
+ --hop-space-960: 6rem;
299
+ --hop-space-800: 5rem;
300
+ --hop-space-640: 4rem;
301
+ --hop-space-480: 3rem;
302
+ --hop-space-400: 2.5rem;
303
+ --hop-space-320: 2rem;
304
+ --hop-space-240: 1.5rem;
305
+ --hop-space-160: 1rem;
306
+ --hop-space-80: 0.5rem;
307
+ --hop-space-40: 0.25rem;
308
+ --hop-space-20: 0.125rem;
309
+ --hop-space-10: 0.0625rem;
310
+ --hop-space-0: 0;
311
+ --hop-border-radius-2-5: 0.75rem;
312
+ --hop-border-radius-9999: 624.9375rem;
313
+ --hop-border-radius-4: 1.5rem;
314
+ --hop-border-radius-3: 1rem;
315
+ --hop-border-radius-2: 0.5rem;
316
+ --hop-border-radius-1: 0.25rem;
317
+ --hop-border-radius-0: 0;
318
+ --hop-easing-expressive: cubic-bezier(0.72, -0.66, 0.15, 1.5);
319
+ --hop-easing-focus: cubic-bezier(0.46, 0.03, 0.52, 0.96);
320
+ --hop-easing-productive: cubic-bezier(0.22, 0.61, 0.36, 1);
321
+ --hop-easing-duration-5: 800ms;
322
+ --hop-easing-duration-4: 500ms;
323
+ --hop-easing-duration-3: 300ms;
324
+ --hop-easing-duration-2: 200ms;
325
+ --hop-easing-duration-1: 100ms;
326
+ --hop-line-height-1-50: 1.5;
327
+ --hop-line-height-1-4285: 1.4285714;
328
+ --hop-line-height-1-33: 1.3333333;
329
+ --hop-line-height-1-25: 1.25;
330
+ --hop-line-height-1-20: 1.2;
331
+ --hop-line-height-1-14: 1.1428571;
332
+ --hop-line-height-1-125: 1.125;
333
+ --hop-font-weight-690: 690;
334
+ --hop-font-weight-680: 680;
335
+ --hop-font-weight-590: 590;
336
+ --hop-font-weight-580: 580;
337
+ --hop-font-weight-505: 505;
338
+ --hop-font-weight-410: 410;
339
+ --hop-font-weight-400: 400;
340
+ --hop-font-size-480: 3rem;
341
+ --hop-font-size-360: 2.25rem;
342
+ --hop-font-size-320: 2rem;
343
+ --hop-font-size-280: 1.75rem;
344
+ --hop-font-size-240: 1.5rem;
345
+ --hop-font-size-200: 1.25rem;
346
+ --hop-font-size-180: 1.125rem;
347
+ --hop-font-size-160: 1rem;
348
+ --hop-font-size-140: 0.875rem;
349
+ --hop-font-size-120: 0.75rem;
350
+ --hop-font-family-tertiary: 'ABC Favorit Mono', Consolas, 'SF Mono', monospace;
351
+ --hop-font-family-secondary: 'Inter', Helvetica, Arial, sans-serif;
352
+ --hop-font-family-primary: 'ABC Favorit', Helvetica, Arial, sans-serif;
353
+ --hop-shadow-inset-bevel: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 2px 0 rgba(0, 0, 0, 0.25) inset;
354
+ --hop-shadow-lg: 0 10px 18px 8px rgba(60, 60, 60, 0.08);
355
+ --hop-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08);
356
+ --hop-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.10);
357
+ --hop-shadow-none: none;
358
+ --hop-samoyed: #ffffff;
359
+ --hop-rock-900: #232426;
360
+ --hop-rock-800: #313335;
361
+ --hop-rock-700: #484a4d;
362
+ --hop-rock-600: #5e6064;
363
+ --hop-rock-500: #6c6e72;
364
+ --hop-rock-400: #787a7e;
365
+ --hop-rock-300: #96989d;
366
+ --hop-rock-200: #b3b5ba;
367
+ --hop-rock-100: #cbcdd2;
368
+ --hop-rock-75: #e1e3e7;
369
+ --hop-rock-50: #eef0f2;
370
+ --hop-rock-25: #f8f9fa;
371
+ --hop-rock-20: #fafbfc;
372
+ --hop-abyss: #1d1d1c;
373
+ --hop-moss-900: #132a27;
374
+ --hop-moss-800: #16433d;
375
+ --hop-moss-700: #115a52;
376
+ --hop-moss-600: #0a6f64;
377
+ --hop-moss-500: #0c796b;
378
+ --hop-moss-400: #188a71;
379
+ --hop-moss-300: #47a584;
380
+ --hop-moss-200: #7dc291;
381
+ --hop-moss-100: #aad89d;
382
+ --hop-moss-75: #cde8ac;
383
+ --hop-moss-50: #e3f3b9;
384
+ --hop-moss-25: #f4f9e9;
385
+ --hop-amanita-900: #431a17;
386
+ --hop-amanita-800: #6c2320;
387
+ --hop-amanita-700: #952927;
388
+ --hop-amanita-600: #ba2d2d;
389
+ --hop-amanita-500: #cb2e31;
390
+ --hop-amanita-400: #df3236;
391
+ --hop-amanita-300: #fa4d59;
392
+ --hop-amanita-200: #ff8e8e;
393
+ --hop-amanita-100: #ffbcb7;
394
+ --hop-amanita-75: #ffd6d3;
395
+ --hop-amanita-50: #fde6e5;
396
+ --hop-amanita-25: #fdf6f6;
397
+ --hop-limeburst-900: #1f2b00;
398
+ --hop-limeburst-800: #304200;
399
+ --hop-limeburst-700: #415800;
400
+ --hop-limeburst-600: #4f6c00;
401
+ --hop-limeburst-500: #577600;
402
+ --hop-limeburst-400: #5f8100;
403
+ --hop-limeburst-300: #77a300;
404
+ --hop-limeburst-200: #8fc300;
405
+ --hop-limeburst-100: #a3df00;
406
+ --hop-limeburst-75: #b3f400;
407
+ --hop-limeburst-50: #ccff42;
408
+ --hop-limeburst-25: #edffbc;
409
+ --hop-koi-900: #451a02;
410
+ --hop-koi-800: #692803;
411
+ --hop-koi-700: #8c3504;
412
+ --hop-koi-600: #ab4104;
413
+ --hop-koi-500: #ba4705;
414
+ --hop-koi-400: #c95109;
415
+ --hop-koi-300: #e57723;
416
+ --hop-koi-200: #ff9b3f;
417
+ --hop-koi-100: #ffbf92;
418
+ --hop-koi-75: #ffd8be;
419
+ --hop-koi-50: #ffe8d3;
420
+ --hop-koi-25: #fff5e9;
421
+ --hop-sunken-treasure-900: #2f250d;
422
+ --hop-sunken-treasure-800: #4b390f;
423
+ --hop-sunken-treasure-700: #654c0d;
424
+ --hop-sunken-treasure-600: #7e5e0a;
425
+ --hop-sunken-treasure-500: #8b6609;
426
+ --hop-sunken-treasure-400: #996f08;
427
+ --hop-sunken-treasure-300: #c28b12;
428
+ --hop-sunken-treasure-200: #e2a934;
429
+ --hop-sunken-treasure-100: #eac96d;
430
+ --hop-sunken-treasure-75: #f7e694;
431
+ --hop-sunken-treasure-50: #fff2b8;
432
+ --hop-sunken-treasure-25: #fff8d6;
433
+ --hop-toad-900: #2a2620;
434
+ --hop-toad-800: #433b31;
435
+ --hop-toad-700: #594f41;
436
+ --hop-toad-600: #6e6151;
437
+ --hop-toad-500: #776a59;
438
+ --hop-toad-400: #837463;
439
+ --hop-toad-300: #a19382;
440
+ --hop-toad-200: #bdb1a3;
441
+ --hop-toad-100: #d4cbc0;
442
+ --hop-toad-75: #e5ded6;
443
+ --hop-toad-50: #f0eae3;
444
+ --hop-toad-25: #fef6ef;
445
+ --hop-iris-900: #292362;
446
+ --hop-iris-800: #3b356c;
447
+ --hop-iris-700: #4d468f;
448
+ --hop-iris-600: #6057b3;
449
+ --hop-iris-500: #685dc9;
450
+ --hop-iris-400: #736ad2;
451
+ --hop-iris-300: #8e85ec;
452
+ --hop-iris-200: #b4abff;
453
+ --hop-iris-100: #c3bcff;
454
+ --hop-iris-75: #deddff;
455
+ --hop-iris-50: #eceaff;
456
+ --hop-iris-25: #f6f6ff;
457
+ --hop-fog-900: #20282a;
458
+ --hop-fog-800: #313e43;
459
+ --hop-fog-700: #40535a;
460
+ --hop-fog-600: #4e6770;
461
+ --hop-fog-500: #557079;
462
+ --hop-fog-400: #5e7b84;
463
+ --hop-fog-300: #7c9aa3;
464
+ --hop-fog-200: #9cb7be;
465
+ --hop-fog-100: #bad0d5;
466
+ --hop-fog-75: #d2e3e7;
467
+ --hop-fog-50: #e1eef1;
468
+ --hop-fog-25: #f2f8fa;
469
+ --hop-sapphire-900: #152450;
470
+ --hop-sapphire-800: #1b3587;
471
+ --hop-sapphire-700: #2040c7;
472
+ --hop-sapphire-600: #2a43e8;
473
+ --hop-sapphire-500: #3b57ff;
474
+ --hop-sapphire-400: #4767fe;
475
+ --hop-sapphire-300: #6c8ffd;
476
+ --hop-sapphire-200: #95b1ff;
477
+ --hop-sapphire-100: #b9cbff;
478
+ --hop-sapphire-75: #d6e0ff;
479
+ --hop-sapphire-50: #e6ebff;
480
+ --hop-sapphire-25: #f5f6ff;
481
+ --hop-persimmon-900: #4c1300;
482
+ --hop-persimmon-800: #731e00;
483
+ --hop-persimmon-700: #982700;
484
+ --hop-persimmon-600: #ba3000;
485
+ --hop-persimmon-500: #ca3400;
486
+ --hop-persimmon-400: #dd3900;
487
+ --hop-persimmon-300: #ff5b22;
488
+ --hop-persimmon-200: #ff9874;
489
+ --hop-persimmon-100: #ffbda7;
490
+ --hop-persimmon-75: #ffd8ca;
491
+ --hop-persimmon-50: #ffe7df;
492
+ --hop-persimmon-25: #fff5f2;
493
+ --hop-orchid-bloom-900: #1e1c5d;
494
+ --hop-orchid-bloom-800: #322b8d;
495
+ --hop-orchid-bloom-700: #433fac;
496
+ --hop-orchid-bloom-600: #5454be;
497
+ --hop-orchid-bloom-500: #5f61c5;
498
+ --hop-orchid-bloom-400: #6b6ecc;
499
+ --hop-orchid-bloom-300: #8d91dc;
500
+ --hop-orchid-bloom-200: #aeb3e8;
501
+ --hop-orchid-bloom-100: #c8caf0;
502
+ --hop-orchid-bloom-75: #ddddf7;
503
+ --hop-orchid-bloom-50: #eae9fb;
504
+ --hop-orchid-bloom-25: #f6f5ff;
505
+ --hop-quetzal-900: #002d1c;
506
+ --hop-quetzal-800: #00452d;
507
+ --hop-quetzal-700: #055c41;
508
+ --hop-quetzal-600: #206f54;
509
+ --hop-quetzal-500: #2b795e;
510
+ --hop-quetzal-400: #38836a;
511
+ --hop-quetzal-300: #5da18c;
512
+ --hop-quetzal-200: #83beaf;
513
+ --hop-quetzal-100: #a3d6cb;
514
+ --hop-quetzal-75: #bde8e1;
515
+ --hop-quetzal-50: #cff4ef;
516
+ --hop-quetzal-25: #ddfdf9;
517
+ --hop-coastal-900: #00274b;
518
+ --hop-coastal-800: #003d70;
519
+ --hop-coastal-700: #0a538b;
520
+ --hop-coastal-600: #23669f;
521
+ --hop-coastal-500: #2e70a8;
522
+ --hop-coastal-400: #3a7bb2;
523
+ --hop-coastal-300: #5d9acd;
524
+ --hop-coastal-200: #81b9e4;
525
+ --hop-coastal-100: #9fd2f7;
526
+ --hop-coastal-75: #bae6ff;
527
+ --hop-coastal-50: #d9efff;
528
+ --hop-coastal-25: #f0f8ff;
529
+ --hop-comp-button-danger-box-shadow: var(--hop-shadow-inset-bevel);
530
+ --hop-comp-button-upsell-box-shadow: var(--hop-shadow-inset-bevel);
531
+ --hop-comp-button-secondary-box-shadow: var(--hop-shadow-inset-bevel);
532
+ --hop-comp-button-primary-box-shadow: var(--hop-shadow-inset-bevel);
501
533
  --hop-shape-rounded-sm: var(--hop-border-radius-1);
502
534
  --hop-shape-rounded-md: var(--hop-border-radius-2);
503
535
  --hop-shape-rounded-lg: var(--hop-border-radius-3);
@@ -1014,34 +1046,34 @@
1014
1046
  --hop-decorative-option9-surface: var(--hop-rock-400);
1015
1047
  --hop-decorative-option9-icon: var(--hop-samoyed);
1016
1048
  --hop-decorative-option9-border: var(--hop-rock-100);
1017
- --hop-upsell-text-weak-press: var(--hop-sunken-treasure-600);
1018
- --hop-upsell-text-weak-hover: var(--hop-sunken-treasure-500);
1019
- --hop-upsell-text-weak: var(--hop-sunken-treasure-300);
1020
- --hop-upsell-text-press: var(--hop-sunken-treasure-900);
1021
- --hop-upsell-text-hover: var(--hop-sunken-treasure-800);
1022
- --hop-upsell-text-disabled: var(--hop-sunken-treasure-400);
1023
- --hop-upsell-text-selected: var(--hop-sunken-treasure-400);
1024
- --hop-upsell-text: var(--hop-sunken-treasure-700);
1025
- --hop-upsell-surface-weak-press: var(--hop-sunken-treasure-200);
1026
- --hop-upsell-surface-weak-hover: var(--hop-sunken-treasure-100);
1027
- --hop-upsell-surface-weak: var(--hop-sunken-treasure-75);
1028
- --hop-upsell-surface-press: var(--hop-sunken-treasure-75);
1029
- --hop-upsell-surface-hover: var(--hop-sunken-treasure-50);
1030
- --hop-upsell-surface-disabled: var(--hop-sunken-treasure-25);
1031
- --hop-upsell-surface-selected: var(--hop-sunken-treasure-50);
1032
- --hop-upsell-surface: var(--hop-sunken-treasure-25);
1033
- --hop-upsell-icon-weak-press: var(--hop-sunken-treasure-600);
1034
- --hop-upsell-icon-weak-hover: var(--hop-sunken-treasure-500);
1035
- --hop-upsell-icon-weak: var(--hop-sunken-treasure-300);
1036
- --hop-upsell-icon-weakest: var(--hop-sunken-treasure-75);
1037
- --hop-upsell-icon-press: var(--hop-sunken-treasure-900);
1038
- --hop-upsell-icon-hover: var(--hop-sunken-treasure-800);
1039
- --hop-upsell-icon-selected: var(--hop-sunken-treasure-400);
1040
- --hop-upsell-icon: var(--hop-sunken-treasure-700);
1041
- --hop-upsell-border-press: var(--hop-sunken-treasure-300);
1042
- --hop-upsell-border-disabled: var(--hop-sunken-treasure-75);
1043
- --hop-upsell-border-selected: var(--hop-sunken-treasure-400);
1044
- --hop-upsell-border: var(--hop-sunken-treasure-100);
1049
+ --hop-upsell-text-weak-press: var(--hop-limeburst-600);
1050
+ --hop-upsell-text-weak-hover: var(--hop-limeburst-500);
1051
+ --hop-upsell-text-weak: var(--hop-limeburst-300);
1052
+ --hop-upsell-text-press: var(--hop-limeburst-900);
1053
+ --hop-upsell-text-hover: var(--hop-limeburst-800);
1054
+ --hop-upsell-text-disabled: var(--hop-limeburst-400);
1055
+ --hop-upsell-text-selected: var(--hop-limeburst-600);
1056
+ --hop-upsell-text: var(--hop-limeburst-700);
1057
+ --hop-upsell-surface-weak-press: var(--hop-limeburst-200);
1058
+ --hop-upsell-surface-weak-hover: var(--hop-limeburst-100);
1059
+ --hop-upsell-surface-weak: var(--hop-limeburst-75);
1060
+ --hop-upsell-surface-press: var(--hop-limeburst-75);
1061
+ --hop-upsell-surface-hover: var(--hop-limeburst-50);
1062
+ --hop-upsell-surface-disabled: var(--hop-limeburst-25);
1063
+ --hop-upsell-surface-selected: var(--hop-limeburst-50);
1064
+ --hop-upsell-surface: var(--hop-limeburst-25);
1065
+ --hop-upsell-icon-weak-press: var(--hop-limeburst-600);
1066
+ --hop-upsell-icon-weak-hover: var(--hop-limeburst-500);
1067
+ --hop-upsell-icon-weak: var(--hop-limeburst-300);
1068
+ --hop-upsell-icon-weakest: var(--hop-limeburst-75);
1069
+ --hop-upsell-icon-press: var(--hop-limeburst-900);
1070
+ --hop-upsell-icon-hover: var(--hop-limeburst-800);
1071
+ --hop-upsell-icon-selected: var(--hop-limeburst-600);
1072
+ --hop-upsell-icon: var(--hop-limeburst-700);
1073
+ --hop-upsell-border-press: var(--hop-limeburst-300);
1074
+ --hop-upsell-border-disabled: var(--hop-limeburst-75);
1075
+ --hop-upsell-border-selected: var(--hop-limeburst-400);
1076
+ --hop-upsell-border: var(--hop-limeburst-100);
1045
1077
  --hop-upsell-text-weak-active: var(--hop-sunken-treasure-600);
1046
1078
  --hop-upsell-text-active: var(--hop-sunken-treasure-900);
1047
1079
  --hop-upsell-surface-weak-active: var(--hop-sunken-treasure-75);
@@ -1051,35 +1083,36 @@
1051
1083
  --hop-upsell-border-active: var(--hop-sunken-treasure-200);
1052
1084
  --hop-primary-text-strong-hover: var(--hop-samoyed);
1053
1085
  --hop-primary-text-strong: var(--hop-samoyed);
1054
- --hop-primary-text-press: var(--hop-sapphire-700);
1055
- --hop-primary-text-hover: var(--hop-sapphire-600);
1056
- --hop-primary-text-disabled: var(--hop-sapphire-200);
1057
- --hop-primary-text-selected: var(--hop-sapphire-500);
1058
- --hop-primary-text: var(--hop-sapphire-500);
1059
- --hop-primary-surface-weak-press: var(--hop-sapphire-75);
1060
- --hop-primary-surface-weak-hover: var(--hop-sapphire-50);
1061
- --hop-primary-surface-weak: var(--hop-sapphire-25);
1062
- --hop-primary-surface-strong-press: var(--hop-sapphire-700);
1063
- --hop-primary-surface-strong-hover: var(--hop-sapphire-600);
1064
- --hop-primary-surface-strong-selected: var(--hop-sapphire-50);
1065
- --hop-primary-surface-strong: var(--hop-sapphire-400);
1066
- --hop-primary-surface-press: var(--hop-sapphire-300);
1067
- --hop-primary-surface-hover: var(--hop-sapphire-200);
1068
- --hop-primary-surface-focus: var(--hop-sapphire-25);
1069
- --hop-primary-surface-disabled: var(--hop-sapphire-200);
1070
- --hop-primary-surface-selected: var(--hop-sapphire-50);
1071
- --hop-primary-surface: var(--hop-sapphire-50);
1086
+ --hop-primary-text-press: var(--hop-iris-700);
1087
+ --hop-primary-text-hover: var(--hop-iris-600);
1088
+ --hop-primary-text-disabled: var(--hop-iris-200);
1089
+ --hop-primary-text-selected: var(--hop-persimmon-500);
1090
+ --hop-primary-text: var(--hop-iris-500);
1091
+ --hop-primary-surface-weak-press: var(--hop-iris-75);
1092
+ --hop-primary-surface-weak-hover: var(--hop-iris-50);
1093
+ --hop-primary-surface-weak-selected: var(--hop-persimmon-200);
1094
+ --hop-primary-surface-weak: var(--hop-iris-25);
1095
+ --hop-primary-surface-strong-press: var(--hop-iris-700);
1096
+ --hop-primary-surface-strong-hover: var(--hop-iris-600);
1097
+ --hop-primary-surface-strong-selected: var(--hop-persimmon-50);
1098
+ --hop-primary-surface-strong: var(--hop-iris-400);
1099
+ --hop-primary-surface-press: var(--hop-iris-300);
1100
+ --hop-primary-surface-hover: var(--hop-iris-200);
1101
+ --hop-primary-surface-focus: var(--hop-iris-25);
1102
+ --hop-primary-surface-disabled: var(--hop-iris-200);
1103
+ --hop-primary-surface-selected: var(--hop-persimmon-300);
1104
+ --hop-primary-surface: var(--hop-iris-50);
1072
1105
  --hop-primary-icon-strong-hover: var(--hop-samoyed);
1073
1106
  --hop-primary-icon-strong: var(--hop-samoyed);
1074
- --hop-primary-icon-press: var(--hop-sapphire-700);
1075
- --hop-primary-icon-hover: var(--hop-sapphire-600);
1076
- --hop-primary-icon-disabled: var(--hop-sapphire-200);
1077
- --hop-primary-icon-selected: var(--hop-sapphire-500);
1078
- --hop-primary-icon: var(--hop-sapphire-500);
1079
- --hop-primary-border-press: var(--hop-sapphire-300);
1080
- --hop-primary-border-focus: var(--hop-sapphire-500);
1081
- --hop-primary-border-selected: var(--hop-sapphire-400);
1082
- --hop-primary-border: var(--hop-sapphire-400);
1107
+ --hop-primary-icon-press: var(--hop-iris-700);
1108
+ --hop-primary-icon-hover: var(--hop-iris-600);
1109
+ --hop-primary-icon-disabled: var(--hop-iris-200);
1110
+ --hop-primary-icon-selected: var(--hop-persimmon-500);
1111
+ --hop-primary-icon: var(--hop-iris-500);
1112
+ --hop-primary-border-press: var(--hop-iris-500);
1113
+ --hop-primary-border-focus: var(--hop-iris-500);
1114
+ --hop-primary-border-selected: var(--hop-persimmon-400);
1115
+ --hop-primary-border: var(--hop-iris-400);
1083
1116
  --hop-primary-text-active: var(--hop-sapphire-700);
1084
1117
  --hop-primary-surface-weak-active: var(--hop-sapphire-75);
1085
1118
  --hop-primary-surface-strong-active: var(--hop-sapphire-700);
@@ -1180,4 +1213,107 @@
1180
1213
  --hop-danger-icon-weak-active: var(--hop-amanita-600);
1181
1214
  --hop-danger-icon-active: var(--hop-amanita-800);
1182
1215
  --hop-danger-border-active: var(--hop-amanita-600);
1216
+ --hop-space-inset-stretch-lg: var(--hop-space-480) var(--hop-space-240);
1217
+ --hop-space-inset-stretch-md: var(--hop-space-240) var(--hop-space-160);
1218
+ --hop-space-inset-stretch-sm: var(--hop-space-160) var(--hop-space-80);
1219
+ --hop-space-inset-squish-lg: var(--hop-space-160) var(--hop-space-320);
1220
+ --hop-space-inset-squish-md: var(--hop-space-80) var(--hop-space-160);
1221
+ --hop-space-inset-squish-sm: var(--hop-space-40) var(--hop-space-80);
1222
+ --hop-space-inset-xl: var(--hop-space-320);
1223
+ --hop-space-inset-lg: var(--hop-space-240);
1224
+ --hop-space-inset-md: var(--hop-space-160);
1225
+ --hop-space-inset-sm: var(--hop-space-80);
1226
+ --hop-space-inset-xs: var(--hop-space-40);
1227
+ --hop-space-inline-xl: var(--hop-space-320);
1228
+ --hop-space-inline-lg: var(--hop-space-240);
1229
+ --hop-space-inline-md: var(--hop-space-160);
1230
+ --hop-space-inline-sm: var(--hop-space-80);
1231
+ --hop-space-inline-xs: var(--hop-space-40);
1232
+ --hop-space-stack-xl: var(--hop-space-320);
1233
+ --hop-space-stack-lg: var(--hop-space-240);
1234
+ --hop-space-stack-md: var(--hop-space-160);
1235
+ --hop-space-stack-sm: var(--hop-space-80);
1236
+ --hop-space-stack-xs: var(--hop-space-40);
1237
+ --hop-comp-button-ghost-disabled-text-color: var(--hop-neutral-text-disabled);
1238
+ --hop-comp-button-disabled-border-color: var(--hop-neutral-surface-disabled);
1239
+ --hop-comp-button-disabled-background-color: var(--hop-neutral-surface-disabled);
1240
+ --hop-comp-button-disabled-text-color: var(--hop-neutral-text-disabled);
1241
+ --hop-comp-button-ghost-danger-border-color-selected: var(--hop-danger-surface-weak-press);
1242
+ --hop-comp-button-ghost-danger-border-color-pressed: var(--hop-danger-surface-weak-press);
1243
+ --hop-comp-button-ghost-danger-border-color-hover: var(--hop-neutral-surface-hover);
1244
+ --hop-comp-button-ghost-danger-background-color-selected: var(--hop-danger-surface-weak-press);
1245
+ --hop-comp-button-ghost-danger-background-color-pressed: var(--hop-danger-surface-weak-press);
1246
+ --hop-comp-button-ghost-danger-background-color-hover: var(--hop-neutral-surface-hover);
1247
+ --hop-comp-button-ghost-danger-text-color-selected: var(--hop-danger-text-press);
1248
+ --hop-comp-button-ghost-danger-text-color-pressed: var(--hop-danger-text-press);
1249
+ --hop-comp-button-ghost-danger-text-color-hover: var(--hop-danger-text-hover);
1250
+ --hop-comp-button-ghost-danger-text-color: var(--hop-danger-text-weak);
1251
+ --hop-comp-button-ghost-secondary-border-color-selected: var(--hop-neutral-surface-press);
1252
+ --hop-comp-button-ghost-secondary-border-color-pressed: var(--hop-neutral-surface-press);
1253
+ --hop-comp-button-ghost-secondary-border-color-hover: var(--hop-neutral-surface-hover);
1254
+ --hop-comp-button-ghost-secondary-background-color-selected: var(--hop-neutral-surface-press);
1255
+ --hop-comp-button-ghost-secondary-background-color-pressed: var(--hop-neutral-surface-press);
1256
+ --hop-comp-button-ghost-secondary-background-color-hover: var(--hop-neutral-surface-hover);
1257
+ --hop-comp-button-ghost-secondary-text-color-selected: var(--hop-neutral-text-weak-press);
1258
+ --hop-comp-button-ghost-secondary-text-color-pressed: var(--hop-neutral-text-weak-press);
1259
+ --hop-comp-button-ghost-secondary-text-color-hover: var(--hop-neutral-text-weak-hover);
1260
+ --hop-comp-button-ghost-secondary-text-color: var(--hop-neutral-text-weak);
1261
+ --hop-comp-button-ghost-primary-border-color-selected: var(--hop-primary-surface-weak-selected);
1262
+ --hop-comp-button-ghost-primary-border-color-pressed: var(--hop-primary-surface-weak-press);
1263
+ --hop-comp-button-ghost-primary-border-color-hover: var(--hop-neutral-surface-hover);
1264
+ --hop-comp-button-ghost-primary-background-color-selected: var(--hop-primary-surface-weak-selected);
1265
+ --hop-comp-button-ghost-primary-background-color-pressed: var(--hop-primary-surface-weak-press);
1266
+ --hop-comp-button-ghost-primary-background-color-hover: var(--hop-neutral-surface-hover);
1267
+ --hop-comp-button-ghost-primary-text-color-selected: var(--hop-primary-text-press);
1268
+ --hop-comp-button-ghost-primary-text-color-pressed: var(--hop-primary-text-press);
1269
+ --hop-comp-button-ghost-primary-text-color-hover: var(--hop-primary-text-hover);
1270
+ --hop-comp-button-ghost-primary-text-color: var(--hop-primary-text);
1271
+ --hop-comp-button-danger-border-color-selected: var(--hop-danger-border-selected);
1272
+ --hop-comp-button-danger-border-color-pressed: var(--hop-danger-surface-press);
1273
+ --hop-comp-button-danger-border-color-hover: var(--hop-danger-surface-strong-hover);
1274
+ --hop-comp-button-danger-border-color: var(--hop-danger-surface-strong);
1275
+ --hop-comp-button-danger-background-color-selected: var(--hop-danger-surface-selected);
1276
+ --hop-comp-button-danger-background-color-pressed: var(--hop-danger-surface-press);
1277
+ --hop-comp-button-danger-background-color-hover: var(--hop-danger-surface-strong-hover);
1278
+ --hop-comp-button-danger-background-color: var(--hop-danger-surface-strong);
1279
+ --hop-comp-button-danger-text-color-selected: var(--hop-danger-text-selected);
1280
+ --hop-comp-button-danger-text-color-pressed: var(--hop-danger-text-strong-hover);
1281
+ --hop-comp-button-danger-text-color-hover: var(--hop-danger-text-strong-hover);
1282
+ --hop-comp-button-danger-text-color: var(--hop-danger-text-strong);
1283
+ --hop-comp-button-upsell-border-color-selected: var(--hop-upsell-border-selected);
1284
+ --hop-comp-button-upsell-border-color-pressed: var(--hop-neutral-border-weakest);
1285
+ --hop-comp-button-upsell-border-color-hover: var(--hop-neutral-border-weakest);
1286
+ --hop-comp-button-upsell-border-color: var(--hop-neutral-border-weakest);
1287
+ --hop-comp-button-upsell-background-color-selected: var(--hop-upsell-surface-selected);
1288
+ --hop-comp-button-upsell-background-color-pressed: var(--hop-upsell-surface-weak-press);
1289
+ --hop-comp-button-upsell-background-color-hover: var(--hop-upsell-surface-weak-hover);
1290
+ --hop-comp-button-upsell-background-color: var(--hop-upsell-surface-weak);
1291
+ --hop-comp-button-upsell-text-color-selected: var(--hop-upsell-text-selected);
1292
+ --hop-comp-button-upsell-text-color-pressed: var(--hop-upsell-text-press);
1293
+ --hop-comp-button-upsell-text-color-hover: var(--hop-upsell-text-hover);
1294
+ --hop-comp-button-upsell-text-color: var(--hop-upsell-text);
1295
+ --hop-comp-button-secondary-border-color-pressed: var(--hop-neutral-border-weakest);
1296
+ --hop-comp-button-secondary-border-color-hover: var(--hop-neutral-border-weakest);
1297
+ --hop-comp-button-secondary-border-color: var(--hop-neutral-border-weakest);
1298
+ --hop-comp-button-secondary-background-color-selected: var(--hop-primary-surface-weak-selected);
1299
+ --hop-comp-button-secondary-background-color-pressed: var(--hop-neutral-surface-press);
1300
+ --hop-comp-button-secondary-background-color-hover: var(--hop-neutral-surface-hover);
1301
+ --hop-comp-button-secondary-background-color: var(--hop-neutral-surface);
1302
+ --hop-comp-button-secondary-text-color-selected: var(--hop-neutral-text);
1303
+ --hop-comp-button-secondary-text-color-pressed: var(--hop-neutral-text-press);
1304
+ --hop-comp-button-secondary-text-color-hover: var(--hop-neutral-text-hover);
1305
+ --hop-comp-button-secondary-text-color: var(--hop-neutral-text);
1306
+ --hop-comp-button-primary-border-color-selected: var(--hop-neutral-border-weakest);
1307
+ --hop-comp-button-primary-border-color-pressed: var(--hop-neutral-border-weakest);
1308
+ --hop-comp-button-primary-border-color-hover: var(--hop-neutral-border-weakest);
1309
+ --hop-comp-button-primary-border-color: var(--hop-neutral-border-weakest);
1310
+ --hop-comp-button-primary-background-color-selected: var(--hop-primary-surface-selected);
1311
+ --hop-comp-button-primary-background-color-pressed: var(--hop-primary-surface-strong-press);
1312
+ --hop-comp-button-primary-background-color-hover: var(--hop-primary-surface-strong-hover);
1313
+ --hop-comp-button-primary-background-color: var(--hop-primary-surface-strong);
1314
+ --hop-comp-button-primary-text-color-selected: var(--hop-neutral-text-strong);
1315
+ --hop-comp-button-primary-text-color-pressed: var(--hop-primary-text-strong);
1316
+ --hop-comp-button-primary-text-color-hover: var(--hop-primary-text-strong-hover);
1317
+ --hop-comp-button-primary-text-color: var(--hop-primary-text-strong);
1318
+ --hop-comp-button-border-radius: var(--hop-shape-rounded-md);
1183
1319
  }