@hopper-ui/tokens 5.1.0 → 5.1.2

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @hopper-ui/tokens
2
2
 
3
+ ## 5.1.2
4
+
5
+ ### Patch Changes
6
+
7
+ - 8dc9376: Add Input component tokens for themeable branding:
8
+ - Add `-comp-field` tokens for background, border, text, icon, placeholder, and prefill colors across all states (default, hover, focus, disabled, error)
9
+ - Migrate Input, InputGroup, TextArea, TextField, SearchField, NumberField, and RemainingCharacterCount CSS from hardcoded semantic values to `--hop-comp-field-*` tokens.
10
+
11
+ ## 5.1.1
12
+
13
+ ### Patch Changes
14
+
15
+ - d55064b: Add Button component tokens for themeable branding:
16
+ - Add `comp-button` tokens for all variants: primary, secondary, upsell, danger, ghost-primary, ghost-secondary, ghost-danger, and disabled states
17
+ - Migrate Button and ToggleButton CSS from hardcoded semantic values to `--hop-comp-button-*` tokens.
18
+
3
19
  ## 5.1.0
4
20
 
5
21
  ### Minor Changes
@@ -1,241 +1,21 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 06 Feb 2026 18:24:05 GMT
3
+ * Generated on Wed, 11 Feb 2026 16:01:41 GMT
4
4
  */
5
5
 
6
6
  :root {
7
- --hop-border-radius-2-5: 0.75rem;
8
- --hop-border-radius-9999: 624.9375rem;
9
- --hop-border-radius-4: 1.5rem;
10
- --hop-border-radius-3: 1rem;
11
- --hop-border-radius-2: 0.5rem;
12
- --hop-border-radius-1: 0.25rem;
13
- --hop-border-radius-0: 0;
14
- --hop-easing-expressive: cubic-bezier(0.72, -0.66, 0.15, 1.5);
15
- --hop-easing-focus: cubic-bezier(0.46, 0.03, 0.52, 0.96);
16
- --hop-easing-productive: cubic-bezier(0.22, 0.61, 0.36, 1);
17
- --hop-easing-duration-5: 800ms;
18
- --hop-easing-duration-4: 500ms;
19
- --hop-easing-duration-3: 300ms;
20
- --hop-easing-duration-2: 200ms;
21
- --hop-easing-duration-1: 100ms;
22
- --hop-line-height-1-50: 1.5;
23
- --hop-line-height-1-4285: 1.4285714;
24
- --hop-line-height-1-33: 1.3333333;
25
- --hop-line-height-1-25: 1.25;
26
- --hop-line-height-1-20: 1.2;
27
- --hop-line-height-1-14: 1.1428571;
28
- --hop-line-height-1-125: 1.125;
29
- --hop-font-weight-690: 690;
30
- --hop-font-weight-680: 680;
31
- --hop-font-weight-590: 590;
32
- --hop-font-weight-580: 580;
33
- --hop-font-weight-505: 505;
34
- --hop-font-weight-410: 410;
35
- --hop-font-weight-400: 400;
36
- --hop-font-size-480: 3rem;
37
- --hop-font-size-360: 2.25rem;
38
- --hop-font-size-320: 2rem;
39
- --hop-font-size-280: 1.75rem;
40
- --hop-font-size-240: 1.5rem;
41
- --hop-font-size-200: 1.25rem;
42
- --hop-font-size-180: 1.125rem;
43
- --hop-font-size-160: 1rem;
44
- --hop-font-size-140: 0.875rem;
45
- --hop-font-size-120: 0.75rem;
46
- --hop-font-family-tertiary: 'ABC Favorit Mono', Consolas, 'SF Mono', monospace;
47
- --hop-font-family-secondary: 'Inter', Helvetica, Arial, sans-serif;
48
- --hop-font-family-primary: 'ABC Favorit', Helvetica, Arial, sans-serif;
49
- --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;
50
- --hop-shadow-lg: 0 10px 18px 8px rgba(60, 60, 60, 0.08);
51
- --hop-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08);
52
- --hop-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.10);
53
- --hop-shadow-none: none;
54
- --hop-samoyed: #ffffff;
55
- --hop-rock-900: #232426;
56
- --hop-rock-800: #313335;
57
- --hop-rock-700: #484a4d;
58
- --hop-rock-600: #5e6064;
59
- --hop-rock-500: #6c6e72;
60
- --hop-rock-400: #787a7e;
61
- --hop-rock-300: #96989d;
62
- --hop-rock-200: #b3b5ba;
63
- --hop-rock-100: #cbcdd2;
64
- --hop-rock-75: #e1e3e7;
65
- --hop-rock-50: #eef0f2;
66
- --hop-rock-25: #f8f9fa;
67
- --hop-rock-20: #fafbfc;
68
- --hop-abyss: #1d1d1c;
69
- --hop-moss-900: #132a27;
70
- --hop-moss-800: #16433d;
71
- --hop-moss-700: #115a52;
72
- --hop-moss-600: #0a6f64;
73
- --hop-moss-500: #0c796b;
74
- --hop-moss-400: #188a71;
75
- --hop-moss-300: #47a584;
76
- --hop-moss-200: #7dc291;
77
- --hop-moss-100: #aad89d;
78
- --hop-moss-75: #cde8ac;
79
- --hop-moss-50: #e3f3b9;
80
- --hop-moss-25: #f4f9e9;
81
- --hop-amanita-900: #431a17;
82
- --hop-amanita-800: #6c2320;
83
- --hop-amanita-700: #952927;
84
- --hop-amanita-600: #ba2d2d;
85
- --hop-amanita-500: #cb2e31;
86
- --hop-amanita-400: #df3236;
87
- --hop-amanita-300: #fa4d59;
88
- --hop-amanita-200: #ff8e8e;
89
- --hop-amanita-100: #ffbcb7;
90
- --hop-amanita-75: #ffd6d3;
91
- --hop-amanita-50: #fde6e5;
92
- --hop-amanita-25: #fdf6f6;
93
- --hop-limeburst-900: #1f2b00;
94
- --hop-limeburst-800: #304200;
95
- --hop-limeburst-700: #415800;
96
- --hop-limeburst-600: #4f6c00;
97
- --hop-limeburst-500: #577600;
98
- --hop-limeburst-400: #5f8100;
99
- --hop-limeburst-300: #77a300;
100
- --hop-limeburst-200: #8fc300;
101
- --hop-limeburst-100: #a3df00;
102
- --hop-limeburst-75: #b3f400;
103
- --hop-limeburst-50: #ccff42;
104
- --hop-limeburst-25: #edffbc;
105
- --hop-koi-900: #451a02;
106
- --hop-koi-800: #692803;
107
- --hop-koi-700: #8c3504;
108
- --hop-koi-600: #ab4104;
109
- --hop-koi-500: #ba4705;
110
- --hop-koi-400: #c95109;
111
- --hop-koi-300: #e57723;
112
- --hop-koi-200: #ff9b3f;
113
- --hop-koi-100: #ffbf92;
114
- --hop-koi-75: #ffd8be;
115
- --hop-koi-50: #ffe8d3;
116
- --hop-koi-25: #fff5e9;
117
- --hop-sunken-treasure-900: #2f250d;
118
- --hop-sunken-treasure-800: #4b390f;
119
- --hop-sunken-treasure-700: #654c0d;
120
- --hop-sunken-treasure-600: #7e5e0a;
121
- --hop-sunken-treasure-500: #8b6609;
122
- --hop-sunken-treasure-400: #996f08;
123
- --hop-sunken-treasure-300: #c28b12;
124
- --hop-sunken-treasure-200: #e2a934;
125
- --hop-sunken-treasure-100: #eac96d;
126
- --hop-sunken-treasure-75: #f7e694;
127
- --hop-sunken-treasure-50: #fff2b8;
128
- --hop-sunken-treasure-25: #fff8d6;
129
- --hop-toad-900: #2a2620;
130
- --hop-toad-800: #433b31;
131
- --hop-toad-700: #594f41;
132
- --hop-toad-600: #6e6151;
133
- --hop-toad-500: #776a59;
134
- --hop-toad-400: #837463;
135
- --hop-toad-300: #a19382;
136
- --hop-toad-200: #bdb1a3;
137
- --hop-toad-100: #d4cbc0;
138
- --hop-toad-75: #e5ded6;
139
- --hop-toad-50: #f0eae3;
140
- --hop-toad-25: #fef6ef;
141
- --hop-iris-900: #292362;
142
- --hop-iris-800: #3b356c;
143
- --hop-iris-700: #4d468f;
144
- --hop-iris-600: #6057b3;
145
- --hop-iris-500: #685dc9;
146
- --hop-iris-400: #736ad2;
147
- --hop-iris-300: #8e85ec;
148
- --hop-iris-200: #b4abff;
149
- --hop-iris-100: #c3bcff;
150
- --hop-iris-75: #deddff;
151
- --hop-iris-50: #eceaff;
152
- --hop-iris-25: #f6f6ff;
153
- --hop-fog-900: #20282a;
154
- --hop-fog-800: #313e43;
155
- --hop-fog-700: #40535a;
156
- --hop-fog-600: #4e6770;
157
- --hop-fog-500: #557079;
158
- --hop-fog-400: #5e7b84;
159
- --hop-fog-300: #7c9aa3;
160
- --hop-fog-200: #9cb7be;
161
- --hop-fog-100: #bad0d5;
162
- --hop-fog-75: #d2e3e7;
163
- --hop-fog-50: #e1eef1;
164
- --hop-fog-25: #f2f8fa;
165
- --hop-sapphire-900: #152450;
166
- --hop-sapphire-800: #1b3587;
167
- --hop-sapphire-700: #2040c7;
168
- --hop-sapphire-600: #2a43e8;
169
- --hop-sapphire-500: #3b57ff;
170
- --hop-sapphire-400: #4767fe;
171
- --hop-sapphire-300: #6c8ffd;
172
- --hop-sapphire-200: #95b1ff;
173
- --hop-sapphire-100: #b9cbff;
174
- --hop-sapphire-75: #d6e0ff;
175
- --hop-sapphire-50: #e6ebff;
176
- --hop-sapphire-25: #f5f6ff;
177
- --hop-persimmon-900: #4c1300;
178
- --hop-persimmon-800: #731e00;
179
- --hop-persimmon-700: #982700;
180
- --hop-persimmon-600: #ba3000;
181
- --hop-persimmon-500: #ca3400;
182
- --hop-persimmon-400: #dd3900;
183
- --hop-persimmon-300: #ff5b22;
184
- --hop-persimmon-200: #ff9874;
185
- --hop-persimmon-100: #ffbda7;
186
- --hop-persimmon-75: #ffd8ca;
187
- --hop-persimmon-50: #ffe7df;
188
- --hop-persimmon-25: #fff5f2;
189
- --hop-orchid-bloom-900: #1e1c5d;
190
- --hop-orchid-bloom-800: #322b8d;
191
- --hop-orchid-bloom-700: #433fac;
192
- --hop-orchid-bloom-600: #5454be;
193
- --hop-orchid-bloom-500: #5f61c5;
194
- --hop-orchid-bloom-400: #6b6ecc;
195
- --hop-orchid-bloom-300: #8d91dc;
196
- --hop-orchid-bloom-200: #aeb3e8;
197
- --hop-orchid-bloom-100: #c8caf0;
198
- --hop-orchid-bloom-75: #ddddf7;
199
- --hop-orchid-bloom-50: #eae9fb;
200
- --hop-orchid-bloom-25: #f6f5ff;
201
- --hop-quetzal-900: #002d1c;
202
- --hop-quetzal-800: #00452d;
203
- --hop-quetzal-700: #055c41;
204
- --hop-quetzal-600: #206f54;
205
- --hop-quetzal-500: #2b795e;
206
- --hop-quetzal-400: #38836a;
207
- --hop-quetzal-300: #5da18c;
208
- --hop-quetzal-200: #83beaf;
209
- --hop-quetzal-100: #a3d6cb;
210
- --hop-quetzal-75: #bde8e1;
211
- --hop-quetzal-50: #cff4ef;
212
- --hop-quetzal-25: #ddfdf9;
213
- --hop-coastal-900: #00274b;
214
- --hop-coastal-800: #003d70;
215
- --hop-coastal-700: #0a538b;
216
- --hop-coastal-600: #23669f;
217
- --hop-coastal-500: #2e70a8;
218
- --hop-coastal-400: #3a7bb2;
219
- --hop-coastal-300: #5d9acd;
220
- --hop-coastal-200: #81b9e4;
221
- --hop-coastal-100: #9fd2f7;
222
- --hop-coastal-75: #bae6ff;
223
- --hop-coastal-50: #d9efff;
224
- --hop-coastal-25: #f0f8ff;
225
- --hop-space-1280: 8rem;
226
- --hop-space-960: 6rem;
227
- --hop-space-800: 5rem;
228
- --hop-space-640: 4rem;
229
- --hop-space-480: 3rem;
230
- --hop-space-400: 2.5rem;
231
- --hop-space-320: 2rem;
232
- --hop-space-240: 1.5rem;
233
- --hop-space-160: 1rem;
234
- --hop-space-80: 0.5rem;
235
- --hop-space-40: 0.25rem;
236
- --hop-space-20: 0.125rem;
237
- --hop-space-10: 0.0625rem;
238
- --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;
239
19
  --hop-overline-bottom-offset: -0.25rem;
240
20
  --hop-overline-top-offset: -0.25rem;
241
21
  --hop-heading-xs-medium-bottom-offset: -0.25rem;
@@ -514,28 +294,243 @@
514
294
  --hop-dataviz-monochromatic-primary-75: #d6e0ff;
515
295
  --hop-dataviz-monochromatic-primary-50: #e6ebff;
516
296
  --hop-dataviz-monochromatic-primary-25: #f5f6ff;
517
- --hop-comp-button-border-color: var(--hop-amanita-100);
518
- --hop-space-inset-stretch-lg: var(--hop-space-480) var(--hop-space-240);
519
- --hop-space-inset-stretch-md: var(--hop-space-240) var(--hop-space-160);
520
- --hop-space-inset-stretch-sm: var(--hop-space-160) var(--hop-space-80);
521
- --hop-space-inset-squish-lg: var(--hop-space-160) var(--hop-space-320);
522
- --hop-space-inset-squish-md: var(--hop-space-80) var(--hop-space-160);
523
- --hop-space-inset-squish-sm: var(--hop-space-40) var(--hop-space-80);
524
- --hop-space-inset-xl: var(--hop-space-320);
525
- --hop-space-inset-lg: var(--hop-space-240);
526
- --hop-space-inset-md: var(--hop-space-160);
527
- --hop-space-inset-sm: var(--hop-space-80);
528
- --hop-space-inset-xs: var(--hop-space-40);
529
- --hop-space-inline-xl: var(--hop-space-320);
530
- --hop-space-inline-lg: var(--hop-space-240);
531
- --hop-space-inline-md: var(--hop-space-160);
532
- --hop-space-inline-sm: var(--hop-space-80);
533
- --hop-space-inline-xs: var(--hop-space-40);
534
- --hop-space-stack-xl: var(--hop-space-320);
535
- --hop-space-stack-lg: var(--hop-space-240);
536
- --hop-space-stack-md: var(--hop-space-160);
537
- --hop-space-stack-sm: var(--hop-space-80);
538
- --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-field-border-radius: var(--hop-border-radius-2-5);
530
+ --hop-comp-button-danger-box-shadow: var(--hop-shadow-inset-bevel);
531
+ --hop-comp-button-upsell-box-shadow: var(--hop-shadow-inset-bevel);
532
+ --hop-comp-button-secondary-box-shadow: var(--hop-shadow-inset-bevel);
533
+ --hop-comp-button-primary-box-shadow: var(--hop-shadow-inset-bevel);
539
534
  --hop-shape-rounded-sm: var(--hop-border-radius-1);
540
535
  --hop-shape-rounded-md: var(--hop-border-radius-2);
541
536
  --hop-shape-rounded-lg: var(--hop-border-radius-3);
@@ -1219,4 +1214,125 @@
1219
1214
  --hop-danger-icon-weak-active: var(--hop-amanita-600);
1220
1215
  --hop-danger-icon-active: var(--hop-amanita-800);
1221
1216
  --hop-danger-border-active: var(--hop-amanita-600);
1217
+ --hop-space-inset-stretch-lg: var(--hop-space-480) var(--hop-space-240);
1218
+ --hop-space-inset-stretch-md: var(--hop-space-240) var(--hop-space-160);
1219
+ --hop-space-inset-stretch-sm: var(--hop-space-160) var(--hop-space-80);
1220
+ --hop-space-inset-squish-lg: var(--hop-space-160) var(--hop-space-320);
1221
+ --hop-space-inset-squish-md: var(--hop-space-80) var(--hop-space-160);
1222
+ --hop-space-inset-squish-sm: var(--hop-space-40) var(--hop-space-80);
1223
+ --hop-space-inset-xl: var(--hop-space-320);
1224
+ --hop-space-inset-lg: var(--hop-space-240);
1225
+ --hop-space-inset-md: var(--hop-space-160);
1226
+ --hop-space-inset-sm: var(--hop-space-80);
1227
+ --hop-space-inset-xs: var(--hop-space-40);
1228
+ --hop-space-inline-xl: var(--hop-space-320);
1229
+ --hop-space-inline-lg: var(--hop-space-240);
1230
+ --hop-space-inline-md: var(--hop-space-160);
1231
+ --hop-space-inline-sm: var(--hop-space-80);
1232
+ --hop-space-inline-xs: var(--hop-space-40);
1233
+ --hop-space-stack-xl: var(--hop-space-320);
1234
+ --hop-space-stack-lg: var(--hop-space-240);
1235
+ --hop-space-stack-md: var(--hop-space-160);
1236
+ --hop-space-stack-sm: var(--hop-space-80);
1237
+ --hop-space-stack-xs: var(--hop-space-40);
1238
+ --hop-comp-field-prefill-color: var(--hop-neutral-text-weak);
1239
+ --hop-comp-field-placeholder-color: var(--hop-neutral-text-weakest);
1240
+ --hop-comp-field-icon-color-disabled: var(--hop-neutral-icon-disabled);
1241
+ --hop-comp-field-icon-color-press: var(--hop-neutral-icon-press);
1242
+ --hop-comp-field-icon-color-hover: var(--hop-neutral-icon-hover);
1243
+ --hop-comp-field-icon-color: var(--hop-neutral-icon);
1244
+ --hop-comp-field-text-color-error: var(--hop-danger-text-weak);
1245
+ --hop-comp-field-text-color-disabled: var(--hop-neutral-text-disabled);
1246
+ --hop-comp-field-text-color: var(--hop-neutral-text);
1247
+ --hop-comp-field-border-color-disabled: var(--hop-neutral-border-disabled);
1248
+ --hop-comp-field-border-color-error: var(--hop-danger-border-strong);
1249
+ --hop-comp-field-border-color-focus: var(--hop-primary-border-focus);
1250
+ --hop-comp-field-border-color-hover: var(--hop-neutral-border-hover);
1251
+ --hop-comp-field-border-color: var(--hop-neutral-border-weak);
1252
+ --hop-comp-field-background-color-disabled: var(--hop-neutral-surface);
1253
+ --hop-comp-field-background-color-focus: var(--hop-neutral-surface-weak);
1254
+ --hop-comp-field-background-color-hover: var(--hop-neutral-surface-weak-hover);
1255
+ --hop-comp-field-background-color: var(--hop-neutral-surface-weak);
1256
+ --hop-comp-button-ghost-disabled-text-color: var(--hop-neutral-text-disabled);
1257
+ --hop-comp-button-disabled-border-color: var(--hop-neutral-surface-disabled);
1258
+ --hop-comp-button-disabled-background-color: var(--hop-neutral-surface-disabled);
1259
+ --hop-comp-button-disabled-text-color: var(--hop-neutral-text-disabled);
1260
+ --hop-comp-button-ghost-danger-border-color-selected: var(--hop-danger-surface-weak-press);
1261
+ --hop-comp-button-ghost-danger-border-color-pressed: var(--hop-danger-surface-weak-press);
1262
+ --hop-comp-button-ghost-danger-border-color-hover: var(--hop-neutral-surface-hover);
1263
+ --hop-comp-button-ghost-danger-background-color-selected: var(--hop-danger-surface-weak-press);
1264
+ --hop-comp-button-ghost-danger-background-color-pressed: var(--hop-danger-surface-weak-press);
1265
+ --hop-comp-button-ghost-danger-background-color-hover: var(--hop-neutral-surface-hover);
1266
+ --hop-comp-button-ghost-danger-text-color-selected: var(--hop-danger-text-press);
1267
+ --hop-comp-button-ghost-danger-text-color-pressed: var(--hop-danger-text-press);
1268
+ --hop-comp-button-ghost-danger-text-color-hover: var(--hop-danger-text-hover);
1269
+ --hop-comp-button-ghost-danger-text-color: var(--hop-danger-text-weak);
1270
+ --hop-comp-button-ghost-secondary-border-color-selected: var(--hop-neutral-surface-press);
1271
+ --hop-comp-button-ghost-secondary-border-color-pressed: var(--hop-neutral-surface-press);
1272
+ --hop-comp-button-ghost-secondary-border-color-hover: var(--hop-neutral-surface-hover);
1273
+ --hop-comp-button-ghost-secondary-background-color-selected: var(--hop-neutral-surface-press);
1274
+ --hop-comp-button-ghost-secondary-background-color-pressed: var(--hop-neutral-surface-press);
1275
+ --hop-comp-button-ghost-secondary-background-color-hover: var(--hop-neutral-surface-hover);
1276
+ --hop-comp-button-ghost-secondary-text-color-selected: var(--hop-neutral-text-weak-press);
1277
+ --hop-comp-button-ghost-secondary-text-color-pressed: var(--hop-neutral-text-weak-press);
1278
+ --hop-comp-button-ghost-secondary-text-color-hover: var(--hop-neutral-text-weak-hover);
1279
+ --hop-comp-button-ghost-secondary-text-color: var(--hop-neutral-text-weak);
1280
+ --hop-comp-button-ghost-primary-border-color-selected: var(--hop-primary-surface-weak-selected);
1281
+ --hop-comp-button-ghost-primary-border-color-pressed: var(--hop-primary-surface-weak-press);
1282
+ --hop-comp-button-ghost-primary-border-color-hover: var(--hop-neutral-surface-hover);
1283
+ --hop-comp-button-ghost-primary-background-color-selected: var(--hop-primary-surface-weak-selected);
1284
+ --hop-comp-button-ghost-primary-background-color-pressed: var(--hop-primary-surface-weak-press);
1285
+ --hop-comp-button-ghost-primary-background-color-hover: var(--hop-neutral-surface-hover);
1286
+ --hop-comp-button-ghost-primary-text-color-selected: var(--hop-primary-text-press);
1287
+ --hop-comp-button-ghost-primary-text-color-pressed: var(--hop-primary-text-press);
1288
+ --hop-comp-button-ghost-primary-text-color-hover: var(--hop-primary-text-hover);
1289
+ --hop-comp-button-ghost-primary-text-color: var(--hop-primary-text);
1290
+ --hop-comp-button-danger-border-color-selected: var(--hop-danger-border-selected);
1291
+ --hop-comp-button-danger-border-color-pressed: var(--hop-danger-surface-press);
1292
+ --hop-comp-button-danger-border-color-hover: var(--hop-danger-surface-strong-hover);
1293
+ --hop-comp-button-danger-border-color: var(--hop-danger-surface-strong);
1294
+ --hop-comp-button-danger-background-color-selected: var(--hop-danger-surface-selected);
1295
+ --hop-comp-button-danger-background-color-pressed: var(--hop-danger-surface-press);
1296
+ --hop-comp-button-danger-background-color-hover: var(--hop-danger-surface-strong-hover);
1297
+ --hop-comp-button-danger-background-color: var(--hop-danger-surface-strong);
1298
+ --hop-comp-button-danger-text-color-selected: var(--hop-danger-text-selected);
1299
+ --hop-comp-button-danger-text-color-pressed: var(--hop-danger-text-strong-hover);
1300
+ --hop-comp-button-danger-text-color-hover: var(--hop-danger-text-strong-hover);
1301
+ --hop-comp-button-danger-text-color: var(--hop-danger-text-strong);
1302
+ --hop-comp-button-upsell-border-color-selected: var(--hop-upsell-border-selected);
1303
+ --hop-comp-button-upsell-border-color-pressed: var(--hop-neutral-border-weakest);
1304
+ --hop-comp-button-upsell-border-color-hover: var(--hop-neutral-border-weakest);
1305
+ --hop-comp-button-upsell-border-color: var(--hop-neutral-border-weakest);
1306
+ --hop-comp-button-upsell-background-color-selected: var(--hop-upsell-surface-selected);
1307
+ --hop-comp-button-upsell-background-color-pressed: var(--hop-upsell-surface-weak-press);
1308
+ --hop-comp-button-upsell-background-color-hover: var(--hop-upsell-surface-weak-hover);
1309
+ --hop-comp-button-upsell-background-color: var(--hop-upsell-surface-weak);
1310
+ --hop-comp-button-upsell-text-color-selected: var(--hop-upsell-text-selected);
1311
+ --hop-comp-button-upsell-text-color-pressed: var(--hop-upsell-text-press);
1312
+ --hop-comp-button-upsell-text-color-hover: var(--hop-upsell-text-hover);
1313
+ --hop-comp-button-upsell-text-color: var(--hop-upsell-text);
1314
+ --hop-comp-button-secondary-border-color-pressed: var(--hop-neutral-border-weakest);
1315
+ --hop-comp-button-secondary-border-color-hover: var(--hop-neutral-border-weakest);
1316
+ --hop-comp-button-secondary-border-color: var(--hop-neutral-border-weakest);
1317
+ --hop-comp-button-secondary-background-color-selected: var(--hop-primary-surface-weak-selected);
1318
+ --hop-comp-button-secondary-background-color-pressed: var(--hop-neutral-surface-press);
1319
+ --hop-comp-button-secondary-background-color-hover: var(--hop-neutral-surface-hover);
1320
+ --hop-comp-button-secondary-background-color: var(--hop-neutral-surface);
1321
+ --hop-comp-button-secondary-text-color-selected: var(--hop-neutral-text);
1322
+ --hop-comp-button-secondary-text-color-pressed: var(--hop-neutral-text-press);
1323
+ --hop-comp-button-secondary-text-color-hover: var(--hop-neutral-text-hover);
1324
+ --hop-comp-button-secondary-text-color: var(--hop-neutral-text);
1325
+ --hop-comp-button-primary-border-color-selected: var(--hop-neutral-border-weakest);
1326
+ --hop-comp-button-primary-border-color-pressed: var(--hop-neutral-border-weakest);
1327
+ --hop-comp-button-primary-border-color-hover: var(--hop-neutral-border-weakest);
1328
+ --hop-comp-button-primary-border-color: var(--hop-neutral-border-weakest);
1329
+ --hop-comp-button-primary-background-color-selected: var(--hop-primary-surface-selected);
1330
+ --hop-comp-button-primary-background-color-pressed: var(--hop-primary-surface-strong-press);
1331
+ --hop-comp-button-primary-background-color-hover: var(--hop-primary-surface-strong-hover);
1332
+ --hop-comp-button-primary-background-color: var(--hop-primary-surface-strong);
1333
+ --hop-comp-button-primary-text-color-selected: var(--hop-neutral-text-strong);
1334
+ --hop-comp-button-primary-text-color-pressed: var(--hop-primary-text-strong);
1335
+ --hop-comp-button-primary-text-color-hover: var(--hop-primary-text-strong-hover);
1336
+ --hop-comp-button-primary-text-color: var(--hop-primary-text-strong);
1337
+ --hop-comp-button-border-radius: var(--hop-shape-rounded-md);
1222
1338
  }
@@ -1,241 +1,17 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 06 Feb 2026 18:24:05 GMT
3
+ * Generated on Wed, 11 Feb 2026 16:01:42 GMT
4
4
  */
5
5
 
6
6
  :root {
7
- --hop-border-radius-2-5: 0.75rem;
8
- --hop-border-radius-9999: 624.9375rem;
9
- --hop-border-radius-4: 1.5rem;
10
- --hop-border-radius-3: 1rem;
11
- --hop-border-radius-2: 0.5rem;
12
- --hop-border-radius-1: 0.25rem;
13
- --hop-border-radius-0: 0;
14
- --hop-easing-expressive: cubic-bezier(0.72, -0.66, 0.15, 1.5);
15
- --hop-easing-focus: cubic-bezier(0.46, 0.03, 0.52, 0.96);
16
- --hop-easing-productive: cubic-bezier(0.22, 0.61, 0.36, 1);
17
- --hop-easing-duration-5: 800ms;
18
- --hop-easing-duration-4: 500ms;
19
- --hop-easing-duration-3: 300ms;
20
- --hop-easing-duration-2: 200ms;
21
- --hop-easing-duration-1: 100ms;
22
- --hop-line-height-1-50: 1.5;
23
- --hop-line-height-1-4285: 1.4285714;
24
- --hop-line-height-1-33: 1.3333333;
25
- --hop-line-height-1-25: 1.25;
26
- --hop-line-height-1-20: 1.2;
27
- --hop-line-height-1-14: 1.1428571;
28
- --hop-line-height-1-125: 1.125;
29
- --hop-font-weight-690: 690;
30
- --hop-font-weight-680: 680;
31
- --hop-font-weight-590: 590;
32
- --hop-font-weight-580: 580;
33
- --hop-font-weight-505: 505;
34
- --hop-font-weight-410: 410;
35
- --hop-font-weight-400: 400;
36
- --hop-font-size-480: 3rem;
37
- --hop-font-size-360: 2.25rem;
38
- --hop-font-size-320: 2rem;
39
- --hop-font-size-280: 1.75rem;
40
- --hop-font-size-240: 1.5rem;
41
- --hop-font-size-200: 1.25rem;
42
- --hop-font-size-180: 1.125rem;
43
- --hop-font-size-160: 1rem;
44
- --hop-font-size-140: 0.875rem;
45
- --hop-font-size-120: 0.75rem;
46
- --hop-font-family-tertiary: 'ABC Favorit Mono', Consolas, 'SF Mono', monospace;
47
- --hop-font-family-secondary: 'Inter', Helvetica, Arial, sans-serif;
48
- --hop-font-family-primary: 'ABC Favorit', Helvetica, Arial, sans-serif;
49
- --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;
50
- --hop-shadow-lg: 0 10px 18px 8px rgba(60, 60, 60, 0.08);
51
- --hop-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08);
52
- --hop-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.10);
53
- --hop-shadow-none: none;
54
- --hop-samoyed: #ffffff;
55
- --hop-rock-900: #232426;
56
- --hop-rock-800: #313335;
57
- --hop-rock-700: #484a4d;
58
- --hop-rock-600: #5e6064;
59
- --hop-rock-500: #6c6e72;
60
- --hop-rock-400: #787a7e;
61
- --hop-rock-300: #96989d;
62
- --hop-rock-200: #b3b5ba;
63
- --hop-rock-100: #cbcdd2;
64
- --hop-rock-75: #e1e3e7;
65
- --hop-rock-50: #eef0f2;
66
- --hop-rock-25: #f8f9fa;
67
- --hop-rock-20: #fafbfc;
68
- --hop-abyss: #1d1d1c;
69
- --hop-moss-900: #132a27;
70
- --hop-moss-800: #16433d;
71
- --hop-moss-700: #115a52;
72
- --hop-moss-600: #0a6f64;
73
- --hop-moss-500: #0c796b;
74
- --hop-moss-400: #188a71;
75
- --hop-moss-300: #47a584;
76
- --hop-moss-200: #7dc291;
77
- --hop-moss-100: #aad89d;
78
- --hop-moss-75: #cde8ac;
79
- --hop-moss-50: #e3f3b9;
80
- --hop-moss-25: #f4f9e9;
81
- --hop-amanita-900: #431a17;
82
- --hop-amanita-800: #6c2320;
83
- --hop-amanita-700: #952927;
84
- --hop-amanita-600: #ba2d2d;
85
- --hop-amanita-500: #cb2e31;
86
- --hop-amanita-400: #df3236;
87
- --hop-amanita-300: #fa4d59;
88
- --hop-amanita-200: #ff8e8e;
89
- --hop-amanita-100: #ffbcb7;
90
- --hop-amanita-75: #ffd6d3;
91
- --hop-amanita-50: #fde6e5;
92
- --hop-amanita-25: #fdf6f6;
93
- --hop-limeburst-900: #1f2b00;
94
- --hop-limeburst-800: #304200;
95
- --hop-limeburst-700: #415800;
96
- --hop-limeburst-600: #4f6c00;
97
- --hop-limeburst-500: #577600;
98
- --hop-limeburst-400: #5f8100;
99
- --hop-limeburst-300: #77a300;
100
- --hop-limeburst-200: #8fc300;
101
- --hop-limeburst-100: #a3df00;
102
- --hop-limeburst-75: #b3f400;
103
- --hop-limeburst-50: #ccff42;
104
- --hop-limeburst-25: #edffbc;
105
- --hop-koi-900: #451a02;
106
- --hop-koi-800: #692803;
107
- --hop-koi-700: #8c3504;
108
- --hop-koi-600: #ab4104;
109
- --hop-koi-500: #ba4705;
110
- --hop-koi-400: #c95109;
111
- --hop-koi-300: #e57723;
112
- --hop-koi-200: #ff9b3f;
113
- --hop-koi-100: #ffbf92;
114
- --hop-koi-75: #ffd8be;
115
- --hop-koi-50: #ffe8d3;
116
- --hop-koi-25: #fff5e9;
117
- --hop-sunken-treasure-900: #2f250d;
118
- --hop-sunken-treasure-800: #4b390f;
119
- --hop-sunken-treasure-700: #654c0d;
120
- --hop-sunken-treasure-600: #7e5e0a;
121
- --hop-sunken-treasure-500: #8b6609;
122
- --hop-sunken-treasure-400: #996f08;
123
- --hop-sunken-treasure-300: #c28b12;
124
- --hop-sunken-treasure-200: #e2a934;
125
- --hop-sunken-treasure-100: #eac96d;
126
- --hop-sunken-treasure-75: #f7e694;
127
- --hop-sunken-treasure-50: #fff2b8;
128
- --hop-sunken-treasure-25: #fff8d6;
129
- --hop-toad-900: #2a2620;
130
- --hop-toad-800: #433b31;
131
- --hop-toad-700: #594f41;
132
- --hop-toad-600: #6e6151;
133
- --hop-toad-500: #776a59;
134
- --hop-toad-400: #837463;
135
- --hop-toad-300: #a19382;
136
- --hop-toad-200: #bdb1a3;
137
- --hop-toad-100: #d4cbc0;
138
- --hop-toad-75: #e5ded6;
139
- --hop-toad-50: #f0eae3;
140
- --hop-toad-25: #fef6ef;
141
- --hop-iris-900: #292362;
142
- --hop-iris-800: #3b356c;
143
- --hop-iris-700: #4d468f;
144
- --hop-iris-600: #6057b3;
145
- --hop-iris-500: #685dc9;
146
- --hop-iris-400: #736ad2;
147
- --hop-iris-300: #8e85ec;
148
- --hop-iris-200: #b4abff;
149
- --hop-iris-100: #c3bcff;
150
- --hop-iris-75: #deddff;
151
- --hop-iris-50: #eceaff;
152
- --hop-iris-25: #f6f6ff;
153
- --hop-fog-900: #20282a;
154
- --hop-fog-800: #313e43;
155
- --hop-fog-700: #40535a;
156
- --hop-fog-600: #4e6770;
157
- --hop-fog-500: #557079;
158
- --hop-fog-400: #5e7b84;
159
- --hop-fog-300: #7c9aa3;
160
- --hop-fog-200: #9cb7be;
161
- --hop-fog-100: #bad0d5;
162
- --hop-fog-75: #d2e3e7;
163
- --hop-fog-50: #e1eef1;
164
- --hop-fog-25: #f2f8fa;
165
- --hop-sapphire-900: #152450;
166
- --hop-sapphire-800: #1b3587;
167
- --hop-sapphire-700: #2040c7;
168
- --hop-sapphire-600: #2a43e8;
169
- --hop-sapphire-500: #3b57ff;
170
- --hop-sapphire-400: #4767fe;
171
- --hop-sapphire-300: #6c8ffd;
172
- --hop-sapphire-200: #95b1ff;
173
- --hop-sapphire-100: #b9cbff;
174
- --hop-sapphire-75: #d6e0ff;
175
- --hop-sapphire-50: #e6ebff;
176
- --hop-sapphire-25: #f5f6ff;
177
- --hop-persimmon-900: #4c1300;
178
- --hop-persimmon-800: #731e00;
179
- --hop-persimmon-700: #982700;
180
- --hop-persimmon-600: #ba3000;
181
- --hop-persimmon-500: #ca3400;
182
- --hop-persimmon-400: #dd3900;
183
- --hop-persimmon-300: #ff5b22;
184
- --hop-persimmon-200: #ff9874;
185
- --hop-persimmon-100: #ffbda7;
186
- --hop-persimmon-75: #ffd8ca;
187
- --hop-persimmon-50: #ffe7df;
188
- --hop-persimmon-25: #fff5f2;
189
- --hop-orchid-bloom-900: #1e1c5d;
190
- --hop-orchid-bloom-800: #322b8d;
191
- --hop-orchid-bloom-700: #433fac;
192
- --hop-orchid-bloom-600: #5454be;
193
- --hop-orchid-bloom-500: #5f61c5;
194
- --hop-orchid-bloom-400: #6b6ecc;
195
- --hop-orchid-bloom-300: #8d91dc;
196
- --hop-orchid-bloom-200: #aeb3e8;
197
- --hop-orchid-bloom-100: #c8caf0;
198
- --hop-orchid-bloom-75: #ddddf7;
199
- --hop-orchid-bloom-50: #eae9fb;
200
- --hop-orchid-bloom-25: #f6f5ff;
201
- --hop-quetzal-900: #002d1c;
202
- --hop-quetzal-800: #00452d;
203
- --hop-quetzal-700: #055c41;
204
- --hop-quetzal-600: #206f54;
205
- --hop-quetzal-500: #2b795e;
206
- --hop-quetzal-400: #38836a;
207
- --hop-quetzal-300: #5da18c;
208
- --hop-quetzal-200: #83beaf;
209
- --hop-quetzal-100: #a3d6cb;
210
- --hop-quetzal-75: #bde8e1;
211
- --hop-quetzal-50: #cff4ef;
212
- --hop-quetzal-25: #ddfdf9;
213
- --hop-coastal-900: #00274b;
214
- --hop-coastal-800: #003d70;
215
- --hop-coastal-700: #0a538b;
216
- --hop-coastal-600: #23669f;
217
- --hop-coastal-500: #2e70a8;
218
- --hop-coastal-400: #3a7bb2;
219
- --hop-coastal-300: #5d9acd;
220
- --hop-coastal-200: #81b9e4;
221
- --hop-coastal-100: #9fd2f7;
222
- --hop-coastal-75: #bae6ff;
223
- --hop-coastal-50: #d9efff;
224
- --hop-coastal-25: #f0f8ff;
225
- --hop-space-1280: 8rem;
226
- --hop-space-960: 6rem;
227
- --hop-space-800: 5rem;
228
- --hop-space-640: 4rem;
229
- --hop-space-480: 3rem;
230
- --hop-space-400: 2.5rem;
231
- --hop-space-320: 2rem;
232
- --hop-space-240: 1.5rem;
233
- --hop-space-160: 1rem;
234
- --hop-space-80: 0.5rem;
235
- --hop-space-40: 0.25rem;
236
- --hop-space-20: 0.125rem;
237
- --hop-space-10: 0.0625rem;
238
- --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-secondary-border-color: transparent;
12
+ --hop-comp-button-ghost-secondary-background-color: transparent;
13
+ --hop-comp-button-ghost-primary-border-color: transparent;
14
+ --hop-comp-button-ghost-primary-background-color: transparent;
239
15
  --hop-overline-bottom-offset: -0.25rem;
240
16
  --hop-overline-top-offset: -0.25rem;
241
17
  --hop-heading-xs-medium-bottom-offset: -0.25rem;
@@ -514,28 +290,245 @@
514
290
  --hop-dataviz-monochromatic-primary-75: #d6e0ff;
515
291
  --hop-dataviz-monochromatic-primary-50: #e6ebff;
516
292
  --hop-dataviz-monochromatic-primary-25: #f5f6ff;
517
- --hop-comp-button-border-color: var(--hop-amanita-500);
518
- --hop-space-inset-stretch-lg: var(--hop-space-480) var(--hop-space-240);
519
- --hop-space-inset-stretch-md: var(--hop-space-240) var(--hop-space-160);
520
- --hop-space-inset-stretch-sm: var(--hop-space-160) var(--hop-space-80);
521
- --hop-space-inset-squish-lg: var(--hop-space-160) var(--hop-space-320);
522
- --hop-space-inset-squish-md: var(--hop-space-80) var(--hop-space-160);
523
- --hop-space-inset-squish-sm: var(--hop-space-40) var(--hop-space-80);
524
- --hop-space-inset-xl: var(--hop-space-320);
525
- --hop-space-inset-lg: var(--hop-space-240);
526
- --hop-space-inset-md: var(--hop-space-160);
527
- --hop-space-inset-sm: var(--hop-space-80);
528
- --hop-space-inset-xs: var(--hop-space-40);
529
- --hop-space-inline-xl: var(--hop-space-320);
530
- --hop-space-inline-lg: var(--hop-space-240);
531
- --hop-space-inline-md: var(--hop-space-160);
532
- --hop-space-inline-sm: var(--hop-space-80);
533
- --hop-space-inline-xs: var(--hop-space-40);
534
- --hop-space-stack-xl: var(--hop-space-320);
535
- --hop-space-stack-lg: var(--hop-space-240);
536
- --hop-space-stack-md: var(--hop-space-160);
537
- --hop-space-stack-sm: var(--hop-space-80);
538
- --hop-space-stack-xs: var(--hop-space-40);
293
+ --hop-space-1280: 8rem;
294
+ --hop-space-960: 6rem;
295
+ --hop-space-800: 5rem;
296
+ --hop-space-640: 4rem;
297
+ --hop-space-480: 3rem;
298
+ --hop-space-400: 2.5rem;
299
+ --hop-space-320: 2rem;
300
+ --hop-space-240: 1.5rem;
301
+ --hop-space-160: 1rem;
302
+ --hop-space-80: 0.5rem;
303
+ --hop-space-40: 0.25rem;
304
+ --hop-space-20: 0.125rem;
305
+ --hop-space-10: 0.0625rem;
306
+ --hop-space-0: 0;
307
+ --hop-border-radius-2-5: 0.75rem;
308
+ --hop-border-radius-9999: 624.9375rem;
309
+ --hop-border-radius-4: 1.5rem;
310
+ --hop-border-radius-3: 1rem;
311
+ --hop-border-radius-2: 0.5rem;
312
+ --hop-border-radius-1: 0.25rem;
313
+ --hop-border-radius-0: 0;
314
+ --hop-easing-expressive: cubic-bezier(0.72, -0.66, 0.15, 1.5);
315
+ --hop-easing-focus: cubic-bezier(0.46, 0.03, 0.52, 0.96);
316
+ --hop-easing-productive: cubic-bezier(0.22, 0.61, 0.36, 1);
317
+ --hop-easing-duration-5: 800ms;
318
+ --hop-easing-duration-4: 500ms;
319
+ --hop-easing-duration-3: 300ms;
320
+ --hop-easing-duration-2: 200ms;
321
+ --hop-easing-duration-1: 100ms;
322
+ --hop-line-height-1-50: 1.5;
323
+ --hop-line-height-1-4285: 1.4285714;
324
+ --hop-line-height-1-33: 1.3333333;
325
+ --hop-line-height-1-25: 1.25;
326
+ --hop-line-height-1-20: 1.2;
327
+ --hop-line-height-1-14: 1.1428571;
328
+ --hop-line-height-1-125: 1.125;
329
+ --hop-font-weight-690: 690;
330
+ --hop-font-weight-680: 680;
331
+ --hop-font-weight-590: 590;
332
+ --hop-font-weight-580: 580;
333
+ --hop-font-weight-505: 505;
334
+ --hop-font-weight-410: 410;
335
+ --hop-font-weight-400: 400;
336
+ --hop-font-size-480: 3rem;
337
+ --hop-font-size-360: 2.25rem;
338
+ --hop-font-size-320: 2rem;
339
+ --hop-font-size-280: 1.75rem;
340
+ --hop-font-size-240: 1.5rem;
341
+ --hop-font-size-200: 1.25rem;
342
+ --hop-font-size-180: 1.125rem;
343
+ --hop-font-size-160: 1rem;
344
+ --hop-font-size-140: 0.875rem;
345
+ --hop-font-size-120: 0.75rem;
346
+ --hop-font-family-tertiary: 'ABC Favorit Mono', Consolas, 'SF Mono', monospace;
347
+ --hop-font-family-secondary: 'Inter', Helvetica, Arial, sans-serif;
348
+ --hop-font-family-primary: 'ABC Favorit', Helvetica, Arial, sans-serif;
349
+ --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;
350
+ --hop-shadow-lg: 0 10px 18px 8px rgba(60, 60, 60, 0.08);
351
+ --hop-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08);
352
+ --hop-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.10);
353
+ --hop-shadow-none: none;
354
+ --hop-samoyed: #ffffff;
355
+ --hop-rock-900: #232426;
356
+ --hop-rock-800: #313335;
357
+ --hop-rock-700: #484a4d;
358
+ --hop-rock-600: #5e6064;
359
+ --hop-rock-500: #6c6e72;
360
+ --hop-rock-400: #787a7e;
361
+ --hop-rock-300: #96989d;
362
+ --hop-rock-200: #b3b5ba;
363
+ --hop-rock-100: #cbcdd2;
364
+ --hop-rock-75: #e1e3e7;
365
+ --hop-rock-50: #eef0f2;
366
+ --hop-rock-25: #f8f9fa;
367
+ --hop-rock-20: #fafbfc;
368
+ --hop-abyss: #1d1d1c;
369
+ --hop-moss-900: #132a27;
370
+ --hop-moss-800: #16433d;
371
+ --hop-moss-700: #115a52;
372
+ --hop-moss-600: #0a6f64;
373
+ --hop-moss-500: #0c796b;
374
+ --hop-moss-400: #188a71;
375
+ --hop-moss-300: #47a584;
376
+ --hop-moss-200: #7dc291;
377
+ --hop-moss-100: #aad89d;
378
+ --hop-moss-75: #cde8ac;
379
+ --hop-moss-50: #e3f3b9;
380
+ --hop-moss-25: #f4f9e9;
381
+ --hop-amanita-900: #431a17;
382
+ --hop-amanita-800: #6c2320;
383
+ --hop-amanita-700: #952927;
384
+ --hop-amanita-600: #ba2d2d;
385
+ --hop-amanita-500: #cb2e31;
386
+ --hop-amanita-400: #df3236;
387
+ --hop-amanita-300: #fa4d59;
388
+ --hop-amanita-200: #ff8e8e;
389
+ --hop-amanita-100: #ffbcb7;
390
+ --hop-amanita-75: #ffd6d3;
391
+ --hop-amanita-50: #fde6e5;
392
+ --hop-amanita-25: #fdf6f6;
393
+ --hop-limeburst-900: #1f2b00;
394
+ --hop-limeburst-800: #304200;
395
+ --hop-limeburst-700: #415800;
396
+ --hop-limeburst-600: #4f6c00;
397
+ --hop-limeburst-500: #577600;
398
+ --hop-limeburst-400: #5f8100;
399
+ --hop-limeburst-300: #77a300;
400
+ --hop-limeburst-200: #8fc300;
401
+ --hop-limeburst-100: #a3df00;
402
+ --hop-limeburst-75: #b3f400;
403
+ --hop-limeburst-50: #ccff42;
404
+ --hop-limeburst-25: #edffbc;
405
+ --hop-koi-900: #451a02;
406
+ --hop-koi-800: #692803;
407
+ --hop-koi-700: #8c3504;
408
+ --hop-koi-600: #ab4104;
409
+ --hop-koi-500: #ba4705;
410
+ --hop-koi-400: #c95109;
411
+ --hop-koi-300: #e57723;
412
+ --hop-koi-200: #ff9b3f;
413
+ --hop-koi-100: #ffbf92;
414
+ --hop-koi-75: #ffd8be;
415
+ --hop-koi-50: #ffe8d3;
416
+ --hop-koi-25: #fff5e9;
417
+ --hop-sunken-treasure-900: #2f250d;
418
+ --hop-sunken-treasure-800: #4b390f;
419
+ --hop-sunken-treasure-700: #654c0d;
420
+ --hop-sunken-treasure-600: #7e5e0a;
421
+ --hop-sunken-treasure-500: #8b6609;
422
+ --hop-sunken-treasure-400: #996f08;
423
+ --hop-sunken-treasure-300: #c28b12;
424
+ --hop-sunken-treasure-200: #e2a934;
425
+ --hop-sunken-treasure-100: #eac96d;
426
+ --hop-sunken-treasure-75: #f7e694;
427
+ --hop-sunken-treasure-50: #fff2b8;
428
+ --hop-sunken-treasure-25: #fff8d6;
429
+ --hop-toad-900: #2a2620;
430
+ --hop-toad-800: #433b31;
431
+ --hop-toad-700: #594f41;
432
+ --hop-toad-600: #6e6151;
433
+ --hop-toad-500: #776a59;
434
+ --hop-toad-400: #837463;
435
+ --hop-toad-300: #a19382;
436
+ --hop-toad-200: #bdb1a3;
437
+ --hop-toad-100: #d4cbc0;
438
+ --hop-toad-75: #e5ded6;
439
+ --hop-toad-50: #f0eae3;
440
+ --hop-toad-25: #fef6ef;
441
+ --hop-iris-900: #292362;
442
+ --hop-iris-800: #3b356c;
443
+ --hop-iris-700: #4d468f;
444
+ --hop-iris-600: #6057b3;
445
+ --hop-iris-500: #685dc9;
446
+ --hop-iris-400: #736ad2;
447
+ --hop-iris-300: #8e85ec;
448
+ --hop-iris-200: #b4abff;
449
+ --hop-iris-100: #c3bcff;
450
+ --hop-iris-75: #deddff;
451
+ --hop-iris-50: #eceaff;
452
+ --hop-iris-25: #f6f6ff;
453
+ --hop-fog-900: #20282a;
454
+ --hop-fog-800: #313e43;
455
+ --hop-fog-700: #40535a;
456
+ --hop-fog-600: #4e6770;
457
+ --hop-fog-500: #557079;
458
+ --hop-fog-400: #5e7b84;
459
+ --hop-fog-300: #7c9aa3;
460
+ --hop-fog-200: #9cb7be;
461
+ --hop-fog-100: #bad0d5;
462
+ --hop-fog-75: #d2e3e7;
463
+ --hop-fog-50: #e1eef1;
464
+ --hop-fog-25: #f2f8fa;
465
+ --hop-sapphire-900: #152450;
466
+ --hop-sapphire-800: #1b3587;
467
+ --hop-sapphire-700: #2040c7;
468
+ --hop-sapphire-600: #2a43e8;
469
+ --hop-sapphire-500: #3b57ff;
470
+ --hop-sapphire-400: #4767fe;
471
+ --hop-sapphire-300: #6c8ffd;
472
+ --hop-sapphire-200: #95b1ff;
473
+ --hop-sapphire-100: #b9cbff;
474
+ --hop-sapphire-75: #d6e0ff;
475
+ --hop-sapphire-50: #e6ebff;
476
+ --hop-sapphire-25: #f5f6ff;
477
+ --hop-persimmon-900: #4c1300;
478
+ --hop-persimmon-800: #731e00;
479
+ --hop-persimmon-700: #982700;
480
+ --hop-persimmon-600: #ba3000;
481
+ --hop-persimmon-500: #ca3400;
482
+ --hop-persimmon-400: #dd3900;
483
+ --hop-persimmon-300: #ff5b22;
484
+ --hop-persimmon-200: #ff9874;
485
+ --hop-persimmon-100: #ffbda7;
486
+ --hop-persimmon-75: #ffd8ca;
487
+ --hop-persimmon-50: #ffe7df;
488
+ --hop-persimmon-25: #fff5f2;
489
+ --hop-orchid-bloom-900: #1e1c5d;
490
+ --hop-orchid-bloom-800: #322b8d;
491
+ --hop-orchid-bloom-700: #433fac;
492
+ --hop-orchid-bloom-600: #5454be;
493
+ --hop-orchid-bloom-500: #5f61c5;
494
+ --hop-orchid-bloom-400: #6b6ecc;
495
+ --hop-orchid-bloom-300: #8d91dc;
496
+ --hop-orchid-bloom-200: #aeb3e8;
497
+ --hop-orchid-bloom-100: #c8caf0;
498
+ --hop-orchid-bloom-75: #ddddf7;
499
+ --hop-orchid-bloom-50: #eae9fb;
500
+ --hop-orchid-bloom-25: #f6f5ff;
501
+ --hop-quetzal-900: #002d1c;
502
+ --hop-quetzal-800: #00452d;
503
+ --hop-quetzal-700: #055c41;
504
+ --hop-quetzal-600: #206f54;
505
+ --hop-quetzal-500: #2b795e;
506
+ --hop-quetzal-400: #38836a;
507
+ --hop-quetzal-300: #5da18c;
508
+ --hop-quetzal-200: #83beaf;
509
+ --hop-quetzal-100: #a3d6cb;
510
+ --hop-quetzal-75: #bde8e1;
511
+ --hop-quetzal-50: #cff4ef;
512
+ --hop-quetzal-25: #ddfdf9;
513
+ --hop-coastal-900: #00274b;
514
+ --hop-coastal-800: #003d70;
515
+ --hop-coastal-700: #0a538b;
516
+ --hop-coastal-600: #23669f;
517
+ --hop-coastal-500: #2e70a8;
518
+ --hop-coastal-400: #3a7bb2;
519
+ --hop-coastal-300: #5d9acd;
520
+ --hop-coastal-200: #81b9e4;
521
+ --hop-coastal-100: #9fd2f7;
522
+ --hop-coastal-75: #bae6ff;
523
+ --hop-coastal-50: #d9efff;
524
+ --hop-coastal-25: #f0f8ff;
525
+ --hop-comp-button-ghost-danger-box-shadow: var(--hop-shadow-none);
526
+ --hop-comp-button-ghost-secondary-box-shadow: var(--hop-shadow-none);
527
+ --hop-comp-button-ghost-primary-box-shadow: var(--hop-shadow-none);
528
+ --hop-comp-button-danger-box-shadow: var(--hop-shadow-none);
529
+ --hop-comp-button-upsell-box-shadow: var(--hop-shadow-none);
530
+ --hop-comp-button-secondary-box-shadow: var(--hop-shadow-none);
531
+ --hop-comp-button-primary-box-shadow: var(--hop-shadow-none);
539
532
  --hop-shape-rounded-sm: var(--hop-border-radius-1);
540
533
  --hop-shape-rounded-md: var(--hop-border-radius-2);
541
534
  --hop-shape-rounded-lg: var(--hop-border-radius-3);
@@ -1219,4 +1212,127 @@
1219
1212
  --hop-danger-icon-weak-active: var(--hop-amanita-600);
1220
1213
  --hop-danger-icon-active: var(--hop-amanita-800);
1221
1214
  --hop-danger-border-active: var(--hop-amanita-600);
1215
+ --hop-space-inset-stretch-lg: var(--hop-space-480) var(--hop-space-240);
1216
+ --hop-space-inset-stretch-md: var(--hop-space-240) var(--hop-space-160);
1217
+ --hop-space-inset-stretch-sm: var(--hop-space-160) var(--hop-space-80);
1218
+ --hop-space-inset-squish-lg: var(--hop-space-160) var(--hop-space-320);
1219
+ --hop-space-inset-squish-md: var(--hop-space-80) var(--hop-space-160);
1220
+ --hop-space-inset-squish-sm: var(--hop-space-40) var(--hop-space-80);
1221
+ --hop-space-inset-xl: var(--hop-space-320);
1222
+ --hop-space-inset-lg: var(--hop-space-240);
1223
+ --hop-space-inset-md: var(--hop-space-160);
1224
+ --hop-space-inset-sm: var(--hop-space-80);
1225
+ --hop-space-inset-xs: var(--hop-space-40);
1226
+ --hop-space-inline-xl: var(--hop-space-320);
1227
+ --hop-space-inline-lg: var(--hop-space-240);
1228
+ --hop-space-inline-md: var(--hop-space-160);
1229
+ --hop-space-inline-sm: var(--hop-space-80);
1230
+ --hop-space-inline-xs: var(--hop-space-40);
1231
+ --hop-space-stack-xl: var(--hop-space-320);
1232
+ --hop-space-stack-lg: var(--hop-space-240);
1233
+ --hop-space-stack-md: var(--hop-space-160);
1234
+ --hop-space-stack-sm: var(--hop-space-80);
1235
+ --hop-space-stack-xs: var(--hop-space-40);
1236
+ --hop-comp-field-prefill-color: var(--hop-neutral-text-weak);
1237
+ --hop-comp-field-placeholder-color: var(--hop-neutral-text-weakest);
1238
+ --hop-comp-field-icon-color-disabled: var(--hop-neutral-icon-disabled);
1239
+ --hop-comp-field-icon-color-press: var(--hop-neutral-icon-press);
1240
+ --hop-comp-field-icon-color-hover: var(--hop-neutral-icon-hover);
1241
+ --hop-comp-field-icon-color: var(--hop-neutral-icon);
1242
+ --hop-comp-field-text-color-error: var(--hop-danger-text-weak);
1243
+ --hop-comp-field-text-color-disabled: var(--hop-neutral-text-disabled);
1244
+ --hop-comp-field-text-color: var(--hop-neutral-text);
1245
+ --hop-comp-field-border-color-disabled: var(--hop-neutral-border-disabled);
1246
+ --hop-comp-field-border-color-error: var(--hop-danger-border-strong);
1247
+ --hop-comp-field-border-color-focus: var(--hop-primary-border-focus);
1248
+ --hop-comp-field-border-color-hover: var(--hop-neutral-border-hover);
1249
+ --hop-comp-field-border-color: var(--hop-neutral-border);
1250
+ --hop-comp-field-background-color-disabled: var(--hop-neutral-surface-disabled);
1251
+ --hop-comp-field-background-color-focus: var(--hop-neutral-surface);
1252
+ --hop-comp-field-background-color-hover: var(--hop-neutral-surface-hover);
1253
+ --hop-comp-field-background-color: var(--hop-neutral-surface);
1254
+ --hop-comp-field-border-radius: var(--hop-shape-rounded-md);
1255
+ --hop-comp-button-ghost-disabled-text-color: var(--hop-neutral-text-disabled);
1256
+ --hop-comp-button-disabled-border-color: var(--hop-neutral-surface-disabled);
1257
+ --hop-comp-button-disabled-background-color: var(--hop-neutral-surface-disabled);
1258
+ --hop-comp-button-disabled-text-color: var(--hop-neutral-text-disabled);
1259
+ --hop-comp-button-ghost-danger-border-color-selected: var(--hop-danger-surface-weak-press);
1260
+ --hop-comp-button-ghost-danger-border-color-pressed: var(--hop-danger-surface-weak-press);
1261
+ --hop-comp-button-ghost-danger-border-color-hover: var(--hop-neutral-surface-hover);
1262
+ --hop-comp-button-ghost-danger-background-color-selected: var(--hop-danger-surface-weak-press);
1263
+ --hop-comp-button-ghost-danger-background-color-pressed: var(--hop-danger-surface-weak-press);
1264
+ --hop-comp-button-ghost-danger-background-color-hover: var(--hop-neutral-surface-hover);
1265
+ --hop-comp-button-ghost-danger-text-color-selected: var(--hop-danger-text-press);
1266
+ --hop-comp-button-ghost-danger-text-color-pressed: var(--hop-danger-text-press);
1267
+ --hop-comp-button-ghost-danger-text-color-hover: var(--hop-danger-text-hover);
1268
+ --hop-comp-button-ghost-danger-text-color: var(--hop-danger-text-weak);
1269
+ --hop-comp-button-ghost-secondary-border-color-selected: var(--hop-neutral-surface-press);
1270
+ --hop-comp-button-ghost-secondary-border-color-pressed: var(--hop-neutral-surface-press);
1271
+ --hop-comp-button-ghost-secondary-border-color-hover: var(--hop-neutral-surface-hover);
1272
+ --hop-comp-button-ghost-secondary-background-color-selected: var(--hop-neutral-surface-press);
1273
+ --hop-comp-button-ghost-secondary-background-color-pressed: var(--hop-neutral-surface-press);
1274
+ --hop-comp-button-ghost-secondary-background-color-hover: var(--hop-neutral-surface-hover);
1275
+ --hop-comp-button-ghost-secondary-text-color-selected: var(--hop-neutral-text-weak-press);
1276
+ --hop-comp-button-ghost-secondary-text-color-pressed: var(--hop-neutral-text-weak-press);
1277
+ --hop-comp-button-ghost-secondary-text-color-hover: var(--hop-neutral-text-weak-hover);
1278
+ --hop-comp-button-ghost-secondary-text-color: var(--hop-neutral-text-weak);
1279
+ --hop-comp-button-ghost-primary-border-color-selected: var(--hop-primary-surface-weak-press);
1280
+ --hop-comp-button-ghost-primary-border-color-pressed: var(--hop-primary-surface-weak-press);
1281
+ --hop-comp-button-ghost-primary-border-color-hover: var(--hop-neutral-surface-hover);
1282
+ --hop-comp-button-ghost-primary-background-color-selected: var(--hop-primary-surface-weak-press);
1283
+ --hop-comp-button-ghost-primary-background-color-pressed: var(--hop-primary-surface-weak-press);
1284
+ --hop-comp-button-ghost-primary-background-color-hover: var(--hop-neutral-surface-hover);
1285
+ --hop-comp-button-ghost-primary-text-color-selected: var(--hop-primary-text-press);
1286
+ --hop-comp-button-ghost-primary-text-color-pressed: var(--hop-primary-text-press);
1287
+ --hop-comp-button-ghost-primary-text-color-hover: var(--hop-primary-text-hover);
1288
+ --hop-comp-button-ghost-primary-text-color: var(--hop-primary-text);
1289
+ --hop-comp-button-danger-border-color-selected: var(--hop-danger-border-selected);
1290
+ --hop-comp-button-danger-border-color-pressed: var(--hop-danger-surface-press);
1291
+ --hop-comp-button-danger-border-color-hover: var(--hop-danger-surface-strong-hover);
1292
+ --hop-comp-button-danger-border-color: var(--hop-danger-surface-strong);
1293
+ --hop-comp-button-danger-background-color-selected: var(--hop-danger-surface-selected);
1294
+ --hop-comp-button-danger-background-color-pressed: var(--hop-danger-surface-press);
1295
+ --hop-comp-button-danger-background-color-hover: var(--hop-danger-surface-strong-hover);
1296
+ --hop-comp-button-danger-background-color: var(--hop-danger-surface-strong);
1297
+ --hop-comp-button-danger-text-color-selected: var(--hop-danger-text-selected);
1298
+ --hop-comp-button-danger-text-color-pressed: var(--hop-danger-text-strong-hover);
1299
+ --hop-comp-button-danger-text-color-hover: var(--hop-danger-text-strong-hover);
1300
+ --hop-comp-button-danger-text-color: var(--hop-danger-text-strong);
1301
+ --hop-comp-button-upsell-border-color-selected: var(--hop-upsell-border-selected);
1302
+ --hop-comp-button-upsell-border-color-pressed: var(--hop-upsell-surface-weak-press);
1303
+ --hop-comp-button-upsell-border-color-hover: var(--hop-upsell-surface-weak-hover);
1304
+ --hop-comp-button-upsell-border-color: var(--hop-upsell-surface-weak);
1305
+ --hop-comp-button-upsell-background-color-selected: var(--hop-upsell-surface-selected);
1306
+ --hop-comp-button-upsell-background-color-pressed: var(--hop-upsell-surface-weak-press);
1307
+ --hop-comp-button-upsell-background-color-hover: var(--hop-upsell-surface-weak-hover);
1308
+ --hop-comp-button-upsell-background-color: var(--hop-upsell-surface-weak);
1309
+ --hop-comp-button-upsell-text-color-selected: var(--hop-upsell-text-selected);
1310
+ --hop-comp-button-upsell-text-color-pressed: var(--hop-upsell-text-press);
1311
+ --hop-comp-button-upsell-text-color-hover: var(--hop-upsell-text-hover);
1312
+ --hop-comp-button-upsell-text-color: var(--hop-upsell-text);
1313
+ --hop-comp-button-secondary-border-color-selected: var(--hop-neutral-border-selected);
1314
+ --hop-comp-button-secondary-border-color-pressed: var(--hop-neutral-border-strong);
1315
+ --hop-comp-button-secondary-border-color-hover: var(--hop-neutral-border-strong-hover);
1316
+ --hop-comp-button-secondary-border-color: var(--hop-neutral-border-strong);
1317
+ --hop-comp-button-secondary-background-color-selected: var(--hop-neutral-surface-selected);
1318
+ --hop-comp-button-secondary-background-color-pressed: var(--hop-neutral-surface-press);
1319
+ --hop-comp-button-secondary-background-color-hover: var(--hop-neutral-surface-hover);
1320
+ --hop-comp-button-secondary-background-color: var(--hop-neutral-surface);
1321
+ --hop-comp-button-secondary-text-color-selected: var(--hop-neutral-text-selected);
1322
+ --hop-comp-button-secondary-text-color-pressed: var(--hop-neutral-text-press);
1323
+ --hop-comp-button-secondary-text-color-hover: var(--hop-neutral-text-hover);
1324
+ --hop-comp-button-secondary-text-color: var(--hop-neutral-text);
1325
+ --hop-comp-button-primary-border-color-selected: var(--hop-primary-border-selected);
1326
+ --hop-comp-button-primary-border-color-pressed: var(--hop-primary-surface-strong-press);
1327
+ --hop-comp-button-primary-border-color-hover: var(--hop-primary-surface-strong-hover);
1328
+ --hop-comp-button-primary-border-color: var(--hop-primary-surface-strong);
1329
+ --hop-comp-button-primary-background-color-selected: var(--hop-primary-surface-selected);
1330
+ --hop-comp-button-primary-background-color-pressed: var(--hop-primary-surface-strong-press);
1331
+ --hop-comp-button-primary-background-color-hover: var(--hop-primary-surface-strong-hover);
1332
+ --hop-comp-button-primary-background-color: var(--hop-primary-surface-strong);
1333
+ --hop-comp-button-primary-text-color-selected: var(--hop-primary-text-selected);
1334
+ --hop-comp-button-primary-text-color-pressed: var(--hop-primary-text-strong);
1335
+ --hop-comp-button-primary-text-color-hover: var(--hop-primary-text-strong-hover);
1336
+ --hop-comp-button-primary-text-color: var(--hop-primary-text-strong);
1337
+ --hop-comp-button-border-radius: var(--hop-shape-rounded-md);
1222
1338
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@hopper-ui/tokens",
3
3
  "author": "Workleap",
4
- "version": "5.1.0",
4
+ "version": "5.1.2",
5
5
  "description": "The tokens package.",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {