@hopper-ui/styled-system 2.5.13 → 3.0.0

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 (61) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/StyledSystemProvider.css +35 -35
  3. package/dist/StyledSystemProvider.d.ts +6 -6
  4. package/dist/StyledSystemProvider.js +15 -17
  5. package/dist/{chunk-54RO57YA.js → chunk-3PUBJ5LJ.js} +25 -13
  6. package/dist/chunk-6ZFFJVAW.js +17 -0
  7. package/dist/{chunk-V7X6ANEM.js → chunk-7PR2BAOL.js} +0 -1
  8. package/dist/{chunk-MSH55T2T.js → chunk-A54ZRFEM.js} +31 -2
  9. package/dist/{chunk-ILG53YIO.js → chunk-FGXNB7F6.js} +34 -9
  10. package/dist/{chunk-7TNCJ3OQ.js → chunk-JJKYIWIT.js} +13 -3
  11. package/dist/{chunk-A54ZF3UN.js → chunk-QZ7W6U3E.js} +2 -2
  12. package/dist/{chunk-GQ3J3RTR.js → chunk-SVHEHWY4.js} +3 -3
  13. package/dist/chunk-TKWJ3X2I.js +13 -0
  14. package/dist/{chunk-JVNXXRWE.js → chunk-VIIWNAIQ.js} +1 -1
  15. package/dist/{chunk-X5OXC6DN.js → chunk-XG7R6QGE.js} +1 -1
  16. package/dist/chunk-YQ665QH5.js +6 -0
  17. package/dist/color-scheme/ColorSchemeContext.js +1 -1
  18. package/dist/color-scheme/useColorSchemeValue.js +2 -2
  19. package/dist/global-styles/BodyStyleProvider.js +5 -5
  20. package/dist/html-wrappers/html.css +35 -35
  21. package/dist/html-wrappers/html.js +8 -7
  22. package/dist/html-wrappers/htmlElement.css +35 -35
  23. package/dist/html-wrappers/htmlElement.js +7 -6
  24. package/dist/index.css +35 -35
  25. package/dist/index.d.ts +4 -6
  26. package/dist/index.js +16 -18
  27. package/dist/responsive/useResponsiveValue.js +2 -2
  28. package/dist/styledSystemProps.d.ts +21 -5
  29. package/dist/styledSystemRootCssClass.d.ts +2 -4
  30. package/dist/styledSystemRootCssClass.js +2 -1
  31. package/dist/theme/ThemeContext.d.ts +11 -0
  32. package/dist/theme/ThemeContext.js +2 -0
  33. package/dist/theme/generated/sharegate/dark.css +742 -0
  34. package/dist/theme/generated/sharegate/light.css +1182 -0
  35. package/dist/theme/generated/sharegate.css +4 -0
  36. package/dist/theme/generated/workleap/dark.css +742 -0
  37. package/dist/theme/generated/workleap/light.css +1182 -0
  38. package/dist/theme/generated/workleap.css +4 -0
  39. package/dist/tokens/generated/styledSystemConstants.d.ts +6 -0
  40. package/dist/tokens/generated/styledSystemConstants.js +2 -0
  41. package/dist/tokens/generated/styledSystemToTokenMappings.d.ts +1182 -1151
  42. package/dist/tokens/generated/styledSystemToTokenMappings.js +1 -1
  43. package/dist/tokens/tokenMappings.d.ts +540 -37
  44. package/dist/tokens/tokenMappings.js +5 -4
  45. package/dist/useStyledSystem.css +32 -32
  46. package/dist/useStyledSystem.js +6 -5
  47. package/package.json +13 -9
  48. package/dist/chunk-43MQD25Q.js +0 -17
  49. package/dist/chunk-K5JIMNDM.js +0 -1182
  50. package/dist/chunk-P6FMQKUS.js +0 -546
  51. package/dist/chunk-RAWVBWQ4.js +0 -11
  52. package/dist/chunk-S3G5NPHF.js +0 -32
  53. package/dist/tokens/TokenProvider.d.ts +0 -20
  54. package/dist/tokens/TokenProvider.js +0 -9
  55. package/dist/tokens/generated/darkSemanticTokens.d.ts +0 -548
  56. package/dist/tokens/generated/darkSemanticTokens.js +0 -2
  57. package/dist/tokens/generated/lightSemanticTokens.d.ts +0 -1184
  58. package/dist/tokens/generated/lightSemanticTokens.js +0 -2
  59. package/dist/tokens/tokens.d.ts +0 -1731
  60. package/dist/tokens/tokens.js +0 -4
  61. package/dist/{chunk-SFOVKOPG.js → chunk-FTYK7Z7Q.js} +1 -1
@@ -0,0 +1,742 @@
1
+ /**
2
+ * This file is generated by Style Dictionary. Do not edit directly.
3
+ */
4
+
5
+ .hop-5-0-0-sharegate-dark {
6
+ --hop-space-1280: 8rem;
7
+ --hop-space-960: 6rem;
8
+ --hop-space-800: 5rem;
9
+ --hop-space-640: 4rem;
10
+ --hop-space-480: 3rem;
11
+ --hop-space-400: 2.5rem;
12
+ --hop-space-320: 2rem;
13
+ --hop-space-240: 1.5rem;
14
+ --hop-space-160: 1rem;
15
+ --hop-space-80: 0.5rem;
16
+ --hop-space-40: 0.25rem;
17
+ --hop-space-20: 0.125rem;
18
+ --hop-space-10: 0.0625rem;
19
+ --hop-space-0: 0;
20
+ --hop-border-radius-9999: 624.9375rem;
21
+ --hop-border-radius-4: 1.5rem;
22
+ --hop-border-radius-3: 1rem;
23
+ --hop-border-radius-2: 0.5rem;
24
+ --hop-border-radius-1: 0.25rem;
25
+ --hop-border-radius-0: 0;
26
+ --hop-easing-expressive: cubic-bezier(0.72, -0.66, 0.15, 1.5);
27
+ --hop-easing-focus: cubic-bezier(0.46, 0.03, 0.52, 0.96);
28
+ --hop-easing-productive: cubic-bezier(0.22, 0.61, 0.36, 1);
29
+ --hop-easing-duration-5: 800ms;
30
+ --hop-easing-duration-4: 500ms;
31
+ --hop-easing-duration-3: 300ms;
32
+ --hop-easing-duration-2: 200ms;
33
+ --hop-easing-duration-1: 100ms;
34
+ --hop-line-height-1-50: 1.5;
35
+ --hop-line-height-1-4285: 1.4285714;
36
+ --hop-line-height-1-33: 1.3333333;
37
+ --hop-line-height-1-25: 1.25;
38
+ --hop-line-height-1-20: 1.2;
39
+ --hop-line-height-1-14: 1.1428571;
40
+ --hop-line-height-1-125: 1.125;
41
+ --hop-font-weight-690: 690;
42
+ --hop-font-weight-680: 680;
43
+ --hop-font-weight-590: 590;
44
+ --hop-font-weight-580: 580;
45
+ --hop-font-weight-505: 505;
46
+ --hop-font-weight-410: 410;
47
+ --hop-font-weight-400: 400;
48
+ --hop-font-size-480: 3rem;
49
+ --hop-font-size-360: 2.25rem;
50
+ --hop-font-size-320: 2rem;
51
+ --hop-font-size-280: 1.75rem;
52
+ --hop-font-size-240: 1.5rem;
53
+ --hop-font-size-200: 1.25rem;
54
+ --hop-font-size-180: 1.125rem;
55
+ --hop-font-size-160: 1rem;
56
+ --hop-font-size-140: 0.875rem;
57
+ --hop-font-size-120: 0.75rem;
58
+ --hop-font-family-tertiary: 'ABC Favorit Mono', Consolas, 'SF Mono', monospace;
59
+ --hop-font-family-secondary: 'Inter', Helvetica, Arial, sans-serif;
60
+ --hop-font-family-primary: 'ABC Favorit', Helvetica, Arial, sans-serif;
61
+ --hop-shadow-lg: 0 10px 18px 8px rgba(60, 60, 60, 0.08);
62
+ --hop-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08);
63
+ --hop-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.10);
64
+ --hop-shadow-none: none;
65
+ --hop-samoyed: #ffffff;
66
+ --hop-rock-900: #292929;
67
+ --hop-rock-800: #3c3c3c;
68
+ --hop-rock-700: #505050;
69
+ --hop-rock-600: #636362;
70
+ --hop-rock-500: #6c6c6b;
71
+ --hop-rock-400: #777775;
72
+ --hop-rock-300: #959593;
73
+ --hop-rock-200: #b3b3b1;
74
+ --hop-rock-100: #ccccca;
75
+ --hop-rock-75: #e0dfdd;
76
+ --hop-rock-50: #ecebe8;
77
+ --hop-rock-25: #f8f6f3;
78
+ --hop-rock-20: #fcfbfb;
79
+ --hop-abyss: #1d1d1c;
80
+ --hop-moss-900: #132a27;
81
+ --hop-moss-800: #16433d;
82
+ --hop-moss-700: #115a52;
83
+ --hop-moss-600: #0a6f64;
84
+ --hop-moss-500: #0c796b;
85
+ --hop-moss-400: #188a71;
86
+ --hop-moss-300: #47a584;
87
+ --hop-moss-200: #7dc291;
88
+ --hop-moss-100: #aad89d;
89
+ --hop-moss-75: #cde8ac;
90
+ --hop-moss-50: #e3f3b9;
91
+ --hop-moss-25: #f4f9e9;
92
+ --hop-amanita-900: #431a17;
93
+ --hop-amanita-800: #6c2320;
94
+ --hop-amanita-700: #952927;
95
+ --hop-amanita-600: #ba2d2d;
96
+ --hop-amanita-500: #cb2e31;
97
+ --hop-amanita-400: #df3236;
98
+ --hop-amanita-300: #fa4d59;
99
+ --hop-amanita-200: #ff8e8e;
100
+ --hop-amanita-100: #ffbcb7;
101
+ --hop-amanita-75: #ffd6d3;
102
+ --hop-amanita-50: #fde6e5;
103
+ --hop-amanita-25: #fdf6f6;
104
+ --hop-koi-900: #451a02;
105
+ --hop-koi-800: #692803;
106
+ --hop-koi-700: #8c3504;
107
+ --hop-koi-600: #ab4104;
108
+ --hop-koi-500: #ba4705;
109
+ --hop-koi-400: #c95109;
110
+ --hop-koi-300: #e57723;
111
+ --hop-koi-200: #ff9b3f;
112
+ --hop-koi-100: #ffbf92;
113
+ --hop-koi-75: #ffd8be;
114
+ --hop-koi-50: #ffe8d3;
115
+ --hop-koi-25: #fff5e9;
116
+ --hop-sunken-treasure-900: #2f250d;
117
+ --hop-sunken-treasure-800: #4b390f;
118
+ --hop-sunken-treasure-700: #654c0d;
119
+ --hop-sunken-treasure-600: #7e5e0a;
120
+ --hop-sunken-treasure-500: #8b6609;
121
+ --hop-sunken-treasure-400: #996f08;
122
+ --hop-sunken-treasure-300: #c28b12;
123
+ --hop-sunken-treasure-200: #e2a934;
124
+ --hop-sunken-treasure-100: #eac96d;
125
+ --hop-sunken-treasure-75: #f7e694;
126
+ --hop-sunken-treasure-50: #fff2b8;
127
+ --hop-sunken-treasure-25: #fff8d6;
128
+ --hop-toad-900: #2a2620;
129
+ --hop-toad-800: #433b31;
130
+ --hop-toad-700: #594f41;
131
+ --hop-toad-600: #6e6151;
132
+ --hop-toad-500: #776a59;
133
+ --hop-toad-400: #837463;
134
+ --hop-toad-300: #a19382;
135
+ --hop-toad-200: #bdb1a3;
136
+ --hop-toad-100: #d4cbc0;
137
+ --hop-toad-75: #e5ded6;
138
+ --hop-toad-50: #f0eae3;
139
+ --hop-toad-25: #fef6ef;
140
+ --hop-fog-900: #20282a;
141
+ --hop-fog-800: #313e43;
142
+ --hop-fog-700: #40535a;
143
+ --hop-fog-600: #4e6770;
144
+ --hop-fog-500: #557079;
145
+ --hop-fog-400: #5e7b84;
146
+ --hop-fog-300: #7c9aa3;
147
+ --hop-fog-200: #9cb7be;
148
+ --hop-fog-100: #bad0d5;
149
+ --hop-fog-75: #d2e3e7;
150
+ --hop-fog-50: #e1eef1;
151
+ --hop-fog-25: #f2f8fa;
152
+ --hop-sapphire-900: #152450;
153
+ --hop-sapphire-800: #1b3587;
154
+ --hop-sapphire-700: #2040c7;
155
+ --hop-sapphire-600: #2a43e8;
156
+ --hop-sapphire-500: #3b57ff;
157
+ --hop-sapphire-400: #4767fe;
158
+ --hop-sapphire-300: #6c8ffd;
159
+ --hop-sapphire-200: #95b1ff;
160
+ --hop-sapphire-100: #b9cbff;
161
+ --hop-sapphire-75: #d6e0ff;
162
+ --hop-sapphire-50: #e6ebff;
163
+ --hop-sapphire-25: #f5f6ff;
164
+ --hop-orchid-bloom-900: #1e1c5d;
165
+ --hop-orchid-bloom-800: #322b8d;
166
+ --hop-orchid-bloom-700: #433fac;
167
+ --hop-orchid-bloom-600: #5454be;
168
+ --hop-orchid-bloom-500: #5f61c5;
169
+ --hop-orchid-bloom-400: #6b6ecc;
170
+ --hop-orchid-bloom-300: #8d91dc;
171
+ --hop-orchid-bloom-200: #aeb3e8;
172
+ --hop-orchid-bloom-100: #c8caf0;
173
+ --hop-orchid-bloom-75: #ddddf7;
174
+ --hop-orchid-bloom-50: #eae9fb;
175
+ --hop-orchid-bloom-25: #f6f5ff;
176
+ --hop-quetzal-900: #002d1c;
177
+ --hop-quetzal-800: #00452d;
178
+ --hop-quetzal-700: #055c41;
179
+ --hop-quetzal-600: #206f54;
180
+ --hop-quetzal-500: #2b795e;
181
+ --hop-quetzal-400: #38836a;
182
+ --hop-quetzal-300: #5da18c;
183
+ --hop-quetzal-200: #83beaf;
184
+ --hop-quetzal-100: #a3d6cb;
185
+ --hop-quetzal-75: #bde8e1;
186
+ --hop-quetzal-50: #cff4ef;
187
+ --hop-quetzal-25: #ddfdf9;
188
+ --hop-coastal-900: #00274b;
189
+ --hop-coastal-800: #003d70;
190
+ --hop-coastal-700: #0a538b;
191
+ --hop-coastal-600: #23669f;
192
+ --hop-coastal-500: #2e70a8;
193
+ --hop-coastal-400: #3a7bb2;
194
+ --hop-coastal-300: #5d9acd;
195
+ --hop-coastal-200: #81b9e4;
196
+ --hop-coastal-100: #9fd2f7;
197
+ --hop-coastal-75: #bae6ff;
198
+ --hop-coastal-50: #d9efff;
199
+ --hop-coastal-25: #f0f8ff;
200
+ --hop-comp-button-border-color: var(--hop-amanita-100);
201
+ --hop-dataviz-text-ondark: var(--hop-samoyed);
202
+ --hop-dataviz-text-onlight: var(--hop-rock-800);
203
+ --hop-dataviz-unavailable-strong: var(--hop-rock-700);
204
+ --hop-dataviz-unavailable-weak: var(--hop-rock-400);
205
+ --hop-dataviz-unavailable: var(--hop-rock-600);
206
+ --hop-warning-text-weak: var(--hop-koi-75);
207
+ --hop-warning-text: var(--hop-koi-900);
208
+ --hop-warning-surface-weak: var(--hop-koi-800);
209
+ --hop-warning-surface-strong: var(--hop-koi-300);
210
+ --hop-warning-surface: var(--hop-koi-75);
211
+ --hop-warning-icon-weak: var(--hop-koi-75);
212
+ --hop-warning-icon-weakest: var(--hop-koi-200);
213
+ --hop-warning-icon: var(--hop-koi-900);
214
+ --hop-warning-border: var(--hop-koi-500);
215
+ --hop-success-text-hover: var(--hop-moss-700);
216
+ --hop-success-text-weak: var(--hop-moss-75);
217
+ --hop-success-text: var(--hop-moss-900);
218
+ --hop-success-surface-weak: var(--hop-moss-800);
219
+ --hop-success-surface-strong: var(--hop-moss-300);
220
+ --hop-success-surface: var(--hop-moss-75);
221
+ --hop-success-icon-weak: var(--hop-moss-75);
222
+ --hop-success-icon-weakest: var(--hop-moss-200);
223
+ --hop-success-icon: var(--hop-moss-900);
224
+ --hop-success-border: var(--hop-moss-500);
225
+ --hop-status-progress-text-selected: var(--hop-sapphire-75);
226
+ --hop-status-progress-text-press: var(--hop-sapphire-800);
227
+ --hop-status-progress-text-hover: var(--hop-sapphire-900);
228
+ --hop-status-progress-text-disabled: var(--hop-sapphire-500);
229
+ --hop-status-progress-text: var(--hop-sapphire-800);
230
+ --hop-status-progress-surface-strong: var(--hop-sapphire-200);
231
+ --hop-status-progress-surface-selected: var(--hop-sapphire-800);
232
+ --hop-status-progress-surface-press: var(--hop-sapphire-300);
233
+ --hop-status-progress-surface-hover: var(--hop-sapphire-200);
234
+ --hop-status-progress-surface-disabled: var(--hop-sapphire-800);
235
+ --hop-status-progress-surface: var(--hop-sapphire-100);
236
+ --hop-status-progress-icon-selected: var(--hop-sapphire-75);
237
+ --hop-status-progress-icon-press: var(--hop-sapphire-800);
238
+ --hop-status-progress-icon-hover: var(--hop-sapphire-900);
239
+ --hop-status-progress-icon-disabled: var(--hop-sapphire-500);
240
+ --hop-status-progress-icon: var(--hop-sapphire-800);
241
+ --hop-status-progress-border-selected: var(--hop-sapphire-75);
242
+ --hop-status-progress-border-press: var(--hop-sapphire-400);
243
+ --hop-status-progress-border-hover: var(--hop-sapphire-500);
244
+ --hop-status-progress-border-disabled: var(--hop-sapphire-600);
245
+ --hop-status-progress-border: var(--hop-sapphire-400);
246
+ --hop-status-positive-text-selected: var(--hop-moss-75);
247
+ --hop-status-positive-text-press: var(--hop-moss-800);
248
+ --hop-status-positive-text-hover: var(--hop-moss-900);
249
+ --hop-status-positive-text-disabled: var(--hop-moss-500);
250
+ --hop-status-positive-text: var(--hop-moss-800);
251
+ --hop-status-positive-surface-strong: var(--hop-moss-200);
252
+ --hop-status-positive-surface-selected: var(--hop-moss-800);
253
+ --hop-status-positive-surface-press: var(--hop-moss-300);
254
+ --hop-status-positive-surface-hover: var(--hop-moss-200);
255
+ --hop-status-positive-surface-disabled: var(--hop-moss-800);
256
+ --hop-status-positive-surface: var(--hop-moss-100);
257
+ --hop-status-positive-icon-selected: var(--hop-moss-75);
258
+ --hop-status-positive-icon-press: var(--hop-moss-800);
259
+ --hop-status-positive-icon-hover: var(--hop-moss-900);
260
+ --hop-status-positive-icon-disabled: var(--hop-moss-500);
261
+ --hop-status-positive-icon: var(--hop-moss-800);
262
+ --hop-status-positive-border-selected: var(--hop-moss-75);
263
+ --hop-status-positive-border-press: var(--hop-moss-400);
264
+ --hop-status-positive-border-hover: var(--hop-moss-500);
265
+ --hop-status-positive-border-disabled: var(--hop-moss-800);
266
+ --hop-status-positive-border: var(--hop-moss-400);
267
+ --hop-status-option6-text-selected: var(--hop-sunken-treasure-75);
268
+ --hop-status-option6-text-press: var(--hop-sunken-treasure-800);
269
+ --hop-status-option6-text-hover: var(--hop-sunken-treasure-900);
270
+ --hop-status-option6-text-disabled: var(--hop-sunken-treasure-500);
271
+ --hop-status-option6-text: var(--hop-sunken-treasure-800);
272
+ --hop-status-option6-surface-strong: var(--hop-sunken-treasure-100);
273
+ --hop-status-option6-surface-selected: var(--hop-sunken-treasure-800);
274
+ --hop-status-option6-surface-press: var(--hop-sunken-treasure-300);
275
+ --hop-status-option6-surface-hover: var(--hop-sunken-treasure-200);
276
+ --hop-status-option6-surface-disabled: var(--hop-sunken-treasure-800);
277
+ --hop-status-option6-surface: var(--hop-sunken-treasure-100);
278
+ --hop-status-option6-icon-selected: var(--hop-sunken-treasure-75);
279
+ --hop-status-option6-icon-press: var(--hop-sunken-treasure-800);
280
+ --hop-status-option6-icon-hover: var(--hop-sunken-treasure-900);
281
+ --hop-status-option6-icon-disabled: var(--hop-sunken-treasure-500);
282
+ --hop-status-option6-icon: var(--hop-sunken-treasure-800);
283
+ --hop-status-option6-border-selected: var(--hop-sunken-treasure-75);
284
+ --hop-status-option6-border-press: var(--hop-sunken-treasure-400);
285
+ --hop-status-option6-border-hover: var(--hop-sunken-treasure-500);
286
+ --hop-status-option6-border-disabled: var(--hop-sunken-treasure-600);
287
+ --hop-status-option6-border: var(--hop-sunken-treasure-400);
288
+ --hop-status-option5-text-selected: var(--hop-toad-75);
289
+ --hop-status-option5-text-press: var(--hop-toad-800);
290
+ --hop-status-option5-text-hover: var(--hop-toad-900);
291
+ --hop-status-option5-text-disabled: var(--hop-toad-500);
292
+ --hop-status-option5-text: var(--hop-toad-800);
293
+ --hop-status-option5-surface-strong: var(--hop-toad-100);
294
+ --hop-status-option5-surface-selected: var(--hop-toad-800);
295
+ --hop-status-option5-surface-press: var(--hop-toad-300);
296
+ --hop-status-option5-surface-hover: var(--hop-toad-200);
297
+ --hop-status-option5-surface-disabled: var(--hop-toad-800);
298
+ --hop-status-option5-surface: var(--hop-toad-100);
299
+ --hop-status-option5-icon-selected: var(--hop-toad-75);
300
+ --hop-status-option5-icon-press: var(--hop-toad-800);
301
+ --hop-status-option5-icon-hover: var(--hop-toad-900);
302
+ --hop-status-option5-icon-disabled: var(--hop-toad-500);
303
+ --hop-status-option5-icon: var(--hop-toad-800);
304
+ --hop-status-option5-border-selected: var(--hop-toad-75);
305
+ --hop-status-option5-border-press: var(--hop-toad-400);
306
+ --hop-status-option5-border-hover: var(--hop-toad-500);
307
+ --hop-status-option5-border-disabled: var(--hop-toad-600);
308
+ --hop-status-option5-border: var(--hop-toad-400);
309
+ --hop-status-option4-text-selected: var(--hop-fog-75);
310
+ --hop-status-option4-text-press: var(--hop-fog-900);
311
+ --hop-status-option4-text-hover: var(--hop-fog-900);
312
+ --hop-status-option4-text-disabled: var(--hop-fog-500);
313
+ --hop-status-option4-text: var(--hop-fog-800);
314
+ --hop-status-option4-surface-strong: var(--hop-fog-100);
315
+ --hop-status-option4-surface-selected: var(--hop-fog-800);
316
+ --hop-status-option4-surface-press: var(--hop-fog-300);
317
+ --hop-status-option4-surface-hover: var(--hop-fog-200);
318
+ --hop-status-option4-surface-disabled: var(--hop-fog-600);
319
+ --hop-status-option4-surface: var(--hop-fog-100);
320
+ --hop-status-option4-icon-selected: var(--hop-fog-75);
321
+ --hop-status-option4-icon-press: var(--hop-fog-800);
322
+ --hop-status-option4-icon-hover: var(--hop-fog-900);
323
+ --hop-status-option4-icon-disabled: var(--hop-fog-500);
324
+ --hop-status-option4-icon: var(--hop-fog-800);
325
+ --hop-status-option4-border-selected: var(--hop-fog-75);
326
+ --hop-status-option4-border-press: var(--hop-fog-400);
327
+ --hop-status-option4-border-hover: var(--hop-fog-500);
328
+ --hop-status-option4-border-disabled: var(--hop-fog-600);
329
+ --hop-status-option4-border: var(--hop-fog-400);
330
+ --hop-status-option3-text-selected: var(--hop-quetzal-75);
331
+ --hop-status-option3-text-press: var(--hop-quetzal-800);
332
+ --hop-status-option3-text-hover: var(--hop-quetzal-900);
333
+ --hop-status-option3-text-disabled: var(--hop-quetzal-200);
334
+ --hop-status-option3-text: var(--hop-quetzal-800);
335
+ --hop-status-option3-surface-strong: var(--hop-quetzal-100);
336
+ --hop-status-option3-surface-selected: var(--hop-quetzal-800);
337
+ --hop-status-option3-surface-press: var(--hop-quetzal-300);
338
+ --hop-status-option3-surface-hover: var(--hop-quetzal-200);
339
+ --hop-status-option3-surface-disabled: var(--hop-quetzal-800);
340
+ --hop-status-option3-surface: var(--hop-quetzal-100);
341
+ --hop-status-option3-icon-selected: var(--hop-quetzal-75);
342
+ --hop-status-option3-icon-press: var(--hop-quetzal-800);
343
+ --hop-status-option3-icon-hover: var(--hop-quetzal-900);
344
+ --hop-status-option3-icon-disabled: var(--hop-quetzal-500);
345
+ --hop-status-option3-icon: var(--hop-quetzal-800);
346
+ --hop-status-option3-border-selected: var(--hop-quetzal-75);
347
+ --hop-status-option3-border-press: var(--hop-quetzal-400);
348
+ --hop-status-option3-border-hover: var(--hop-quetzal-500);
349
+ --hop-status-option3-border-disabled: var(--hop-quetzal-600);
350
+ --hop-status-option3-border: var(--hop-quetzal-400);
351
+ --hop-status-option2-text-selected: var(--hop-orchid-bloom-75);
352
+ --hop-status-option2-text-press: var(--hop-orchid-bloom-800);
353
+ --hop-status-option2-text-hover: var(--hop-orchid-bloom-900);
354
+ --hop-status-option2-text-disabled: var(--hop-orchid-bloom-500);
355
+ --hop-status-option2-text: var(--hop-orchid-bloom-800);
356
+ --hop-status-option2-surface-strong: var(--hop-orchid-bloom-100);
357
+ --hop-status-option2-surface-selected: var(--hop-orchid-bloom-800);
358
+ --hop-status-option2-surface-press: var(--hop-orchid-bloom-300);
359
+ --hop-status-option2-surface-hover: var(--hop-orchid-bloom-200);
360
+ --hop-status-option2-surface-disabled: var(--hop-orchid-bloom-800);
361
+ --hop-status-option2-surface: var(--hop-orchid-bloom-100);
362
+ --hop-status-option2-icon-selected: var(--hop-orchid-bloom-75);
363
+ --hop-status-option2-icon-press: var(--hop-orchid-bloom-800);
364
+ --hop-status-option2-icon-hover: var(--hop-orchid-bloom-900);
365
+ --hop-status-option2-icon-disabled: var(--hop-orchid-bloom-500);
366
+ --hop-status-option2-icon: var(--hop-orchid-bloom-800);
367
+ --hop-status-option2-border-selected: var(--hop-orchid-bloom-800);
368
+ --hop-status-option2-border-press: var(--hop-orchid-bloom-300);
369
+ --hop-status-option2-border-hover: var(--hop-orchid-bloom-500);
370
+ --hop-status-option2-border-disabled: var(--hop-orchid-bloom-600);
371
+ --hop-status-option2-border: var(--hop-orchid-bloom-300);
372
+ --hop-status-option1-text-selected: var(--hop-coastal-75);
373
+ --hop-status-option1-text-press: var(--hop-coastal-800);
374
+ --hop-status-option1-text-hover: var(--hop-coastal-900);
375
+ --hop-status-option1-text-disabled: var(--hop-coastal-500);
376
+ --hop-status-option1-text: var(--hop-coastal-800);
377
+ --hop-status-option1-surface-strong: var(--hop-coastal-100);
378
+ --hop-status-option1-surface-selected: var(--hop-coastal-800);
379
+ --hop-status-option1-surface-press: var(--hop-coastal-300);
380
+ --hop-status-option1-surface-hover: var(--hop-coastal-200);
381
+ --hop-status-option1-surface-disabled: var(--hop-coastal-800);
382
+ --hop-status-option1-surface: var(--hop-coastal-100);
383
+ --hop-status-option1-icon-selected: var(--hop-coastal-75);
384
+ --hop-status-option1-icon-press: var(--hop-coastal-800);
385
+ --hop-status-option1-icon-hover: var(--hop-coastal-900);
386
+ --hop-status-option1-icon-disabled: var(--hop-coastal-500);
387
+ --hop-status-option1-icon: var(--hop-coastal-800);
388
+ --hop-status-option1-border-selected: var(--hop-coastal-75);
389
+ --hop-status-option1-border-press: var(--hop-coastal-400);
390
+ --hop-status-option1-border-hover: var(--hop-coastal-500);
391
+ --hop-status-option1-border-disabled: var(--hop-coastal-600);
392
+ --hop-status-option1-border: var(--hop-coastal-400);
393
+ --hop-status-neutral-text-selected: var(--hop-rock-900);
394
+ --hop-status-neutral-text-press: var(--hop-rock-25);
395
+ --hop-status-neutral-text-hover: var(--hop-rock-50);
396
+ --hop-status-neutral-text-disabled: var(--hop-rock-500);
397
+ --hop-status-neutral-text: var(--hop-rock-25);
398
+ --hop-status-neutral-surface-strong: var(--hop-rock-100);
399
+ --hop-status-neutral-surface-selected: var(--hop-toad-25);
400
+ --hop-status-neutral-surface-press: var(--hop-rock-700);
401
+ --hop-status-neutral-surface-hover: var(--hop-rock-800);
402
+ --hop-status-neutral-surface-disabled: var(--hop-rock-700);
403
+ --hop-status-neutral-surface: var(--hop-abyss);
404
+ --hop-status-neutral-icon-selected: var(--hop-rock-25);
405
+ --hop-status-neutral-icon-press: var(--hop-rock-25);
406
+ --hop-status-neutral-icon-hover: var(--hop-rock-50);
407
+ --hop-status-neutral-icon-disabled: var(--hop-rock-500);
408
+ --hop-status-neutral-icon: var(--hop-rock-25);
409
+ --hop-status-neutral-border-selected: var(--hop-rock-25);
410
+ --hop-status-neutral-border-press: var(--hop-rock-25);
411
+ --hop-status-neutral-border-hover: var(--hop-rock-50);
412
+ --hop-status-neutral-border-disabled: var(--hop-rock-800);
413
+ --hop-status-neutral-border: var(--hop-rock-25);
414
+ --hop-status-negative-text-selected: var(--hop-amanita-75);
415
+ --hop-status-negative-text-press: var(--hop-amanita-800);
416
+ --hop-status-negative-text-hover: var(--hop-amanita-900);
417
+ --hop-status-negative-text-disabled: var(--hop-amanita-500);
418
+ --hop-status-negative-text: var(--hop-amanita-800);
419
+ --hop-status-negative-surface-strong: var(--hop-amanita-200);
420
+ --hop-status-negative-surface-selected: var(--hop-amanita-800);
421
+ --hop-status-negative-surface-press: var(--hop-amanita-300);
422
+ --hop-status-negative-surface-hover: var(--hop-amanita-200);
423
+ --hop-status-negative-surface-disabled: var(--hop-amanita-800);
424
+ --hop-status-negative-surface: var(--hop-amanita-100);
425
+ --hop-status-negative-icon-selected: var(--hop-amanita-75);
426
+ --hop-status-negative-icon-press: var(--hop-amanita-800);
427
+ --hop-status-negative-icon-hover: var(--hop-amanita-900);
428
+ --hop-status-negative-icon-disabled: var(--hop-amanita-500);
429
+ --hop-status-negative-icon: var(--hop-amanita-800);
430
+ --hop-status-negative-border-selected: var(--hop-amanita-75);
431
+ --hop-status-negative-border-press: var(--hop-amanita-400);
432
+ --hop-status-negative-border-hover: var(--hop-amanita-500);
433
+ --hop-status-negative-border-disabled: var(--hop-amanita-600);
434
+ --hop-status-negative-border: var(--hop-amanita-400);
435
+ --hop-status-inactive-text-selected: var(--hop-rock-75);
436
+ --hop-status-inactive-text-press: var(--hop-rock-800);
437
+ --hop-status-inactive-text-hover: var(--hop-rock-900);
438
+ --hop-status-inactive-text-disabled: var(--hop-rock-500);
439
+ --hop-status-inactive-text: var(--hop-rock-800);
440
+ --hop-status-inactive-surface-strong: var(--hop-rock-100);
441
+ --hop-status-inactive-surface-selected: var(--hop-rock-800);
442
+ --hop-status-inactive-surface-press: var(--hop-rock-300);
443
+ --hop-status-inactive-surface-hover: var(--hop-rock-200);
444
+ --hop-status-inactive-surface-disabled: var(--hop-rock-800);
445
+ --hop-status-inactive-surface: var(--hop-rock-75);
446
+ --hop-status-inactive-icon-selected: var(--hop-rock-75);
447
+ --hop-status-inactive-icon-press: var(--hop-rock-800);
448
+ --hop-status-inactive-icon-hover: var(--hop-rock-900);
449
+ --hop-status-inactive-icon-disabled: var(--hop-rock-500);
450
+ --hop-status-inactive-icon: var(--hop-rock-800);
451
+ --hop-status-inactive-border-selected: var(--hop-rock-75);
452
+ --hop-status-inactive-border-press: var(--hop-rock-400);
453
+ --hop-status-inactive-border-hover: var(--hop-rock-500);
454
+ --hop-status-inactive-border-disabled: var(--hop-rock-600);
455
+ --hop-status-inactive-border: var(--hop-rock-400);
456
+ --hop-status-caution-text-selected: var(--hop-koi-75);
457
+ --hop-status-caution-text-press: var(--hop-koi-800);
458
+ --hop-status-caution-text-hover: var(--hop-koi-900);
459
+ --hop-status-caution-text-disabled: var(--hop-koi-500);
460
+ --hop-status-caution-text: var(--hop-koi-800);
461
+ --hop-status-caution-surface-strong: var(--hop-koi-200);
462
+ --hop-status-caution-surface-selected: var(--hop-koi-800);
463
+ --hop-status-caution-surface-press: var(--hop-koi-300);
464
+ --hop-status-caution-surface-hover: var(--hop-koi-200);
465
+ --hop-status-caution-surface-disabled: var(--hop-koi-800);
466
+ --hop-status-caution-surface: var(--hop-koi-100);
467
+ --hop-status-caution-icon-selected: var(--hop-koi-75);
468
+ --hop-status-caution-icon-press: var(--hop-koi-800);
469
+ --hop-status-caution-icon-hover: var(--hop-koi-900);
470
+ --hop-status-caution-icon-disabled: var(--hop-koi-500);
471
+ --hop-status-caution-icon: var(--hop-koi-800);
472
+ --hop-status-caution-border-selected: var(--hop-koi-75);
473
+ --hop-status-caution-border-press: var(--hop-koi-400);
474
+ --hop-status-caution-border-hover: var(--hop-koi-500);
475
+ --hop-status-caution-border-disabled: var(--hop-koi-600);
476
+ --hop-status-caution-border: var(--hop-koi-400);
477
+ --hop-information-text-weak: var(--hop-coastal-75);
478
+ --hop-information-text: var(--hop-coastal-900);
479
+ --hop-information-surface-weak: var(--hop-coastal-800);
480
+ --hop-information-surface-strong: var(--hop-coastal-300);
481
+ --hop-information-surface: var(--hop-coastal-75);
482
+ --hop-information-icon-weak: var(--hop-coastal-300);
483
+ --hop-information-icon-weakest: var(--hop-coastal-200);
484
+ --hop-information-icon: var(--hop-coastal-900);
485
+ --hop-information-border: var(--hop-coastal-400);
486
+ --hop-decorative-option9-text-weak: var(--hop-rock-300);
487
+ --hop-decorative-option9-text: var(--hop-samoyed);
488
+ --hop-decorative-option9-surface-weakest: var(--hop-rock-200);
489
+ --hop-decorative-option9-surface-weak-hover: var(--hop-rock-400);
490
+ --hop-decorative-option9-surface-weak: var(--hop-rock-300);
491
+ --hop-decorative-option9-surface-strong: var(--hop-rock-800);
492
+ --hop-decorative-option9-surface-hover: var(--hop-rock-500);
493
+ --hop-decorative-option9-surface: var(--hop-rock-400);
494
+ --hop-decorative-option9-icon: var(--hop-samoyed);
495
+ --hop-decorative-option9-border: var(--hop-rock-400);
496
+ --hop-decorative-option8-text-weak: var(--hop-amanita-300);
497
+ --hop-decorative-option8-text: var(--hop-amanita-900);
498
+ --hop-decorative-option8-surface-weakest: var(--hop-amanita-25);
499
+ --hop-decorative-option8-surface-weak-hover: var(--hop-amanita-75);
500
+ --hop-decorative-option8-surface-weak: var(--hop-amanita-50);
501
+ --hop-decorative-option8-surface-strong: var(--hop-amanita-100);
502
+ --hop-decorative-option8-surface-hover: var(--hop-amanita-200);
503
+ --hop-decorative-option8-surface: var(--hop-amanita-75);
504
+ --hop-decorative-option8-icon: var(--hop-amanita-900);
505
+ --hop-decorative-option8-border: var(--hop-amanita-400);
506
+ --hop-decorative-option7-text-weak: var(--hop-toad-500);
507
+ --hop-decorative-option7-text: var(--hop-toad-900);
508
+ --hop-decorative-option7-surface-weakest: var(--hop-toad-25);
509
+ --hop-decorative-option7-surface-weak-hover: var(--hop-toad-75);
510
+ --hop-decorative-option7-surface-weak: var(--hop-toad-50);
511
+ --hop-decorative-option7-surface-strong: var(--hop-toad-100);
512
+ --hop-decorative-option7-surface-hover: var(--hop-toad-100);
513
+ --hop-decorative-option7-surface: var(--hop-toad-50);
514
+ --hop-decorative-option7-icon: var(--hop-toad-900);
515
+ --hop-decorative-option7-border: var(--hop-toad-400);
516
+ --hop-decorative-option6-text-weak: var(--hop-sunken-treasure-200);
517
+ --hop-decorative-option6-text: var(--hop-sunken-treasure-900);
518
+ --hop-decorative-option6-surface-weakest: var(--hop-sunken-treasure-25);
519
+ --hop-decorative-option6-surface-weak-hover: var(--hop-sunken-treasure-75);
520
+ --hop-decorative-option6-surface-weak: var(--hop-sunken-treasure-50);
521
+ --hop-decorative-option6-surface-strong: var(--hop-sunken-treasure-100);
522
+ --hop-decorative-option6-surface-hover: var(--hop-sunken-treasure-100);
523
+ --hop-decorative-option6-surface: var(--hop-sunken-treasure-75);
524
+ --hop-decorative-option6-icon: var(--hop-sunken-treasure-900);
525
+ --hop-decorative-option6-border: var(--hop-sunken-treasure-400);
526
+ --hop-decorative-option5-text-weak: var(--hop-coastal-300);
527
+ --hop-decorative-option5-text: var(--hop-coastal-900);
528
+ --hop-decorative-option5-surface-weakest: var(--hop-coastal-25);
529
+ --hop-decorative-option5-surface-weak-hover: var(--hop-coastal-75);
530
+ --hop-decorative-option5-surface-weak: var(--hop-coastal-50);
531
+ --hop-decorative-option5-surface-strong: var(--hop-coastal-100);
532
+ --hop-decorative-option5-surface-hover: var(--hop-coastal-100);
533
+ --hop-decorative-option5-surface: var(--hop-coastal-75);
534
+ --hop-decorative-option5-icon: var(--hop-coastal-900);
535
+ --hop-decorative-option5-border: var(--hop-coastal-400);
536
+ --hop-decorative-option4-text-weak: var(--hop-moss-400);
537
+ --hop-decorative-option4-text: var(--hop-moss-900);
538
+ --hop-decorative-option4-surface-weakest: var(--hop-moss-25);
539
+ --hop-decorative-option4-surface-weak-hover: var(--hop-moss-75);
540
+ --hop-decorative-option4-surface-weak: var(--hop-moss-50);
541
+ --hop-decorative-option4-surface-strong: var(--hop-moss-100);
542
+ --hop-decorative-option4-surface-hover: var(--hop-moss-100);
543
+ --hop-decorative-option4-surface: var(--hop-moss-75);
544
+ --hop-decorative-option4-icon: var(--hop-moss-900);
545
+ --hop-decorative-option4-border: var(--hop-moss-400);
546
+ --hop-decorative-option3-text-weak: var(--hop-koi-300);
547
+ --hop-decorative-option3-text: var(--hop-koi-900);
548
+ --hop-decorative-option3-surface-weakest: var(--hop-koi-25);
549
+ --hop-decorative-option3-surface-weak-hover: var(--hop-koi-75);
550
+ --hop-decorative-option3-surface-weak: var(--hop-koi-50);
551
+ --hop-decorative-option3-surface-strong: var(--hop-koi-200);
552
+ --hop-decorative-option3-surface-hover: var(--hop-koi-200);
553
+ --hop-decorative-option3-surface: var(--hop-koi-100);
554
+ --hop-decorative-option3-icon: var(--hop-koi-900);
555
+ --hop-decorative-option3-border: var(--hop-koi-400);
556
+ --hop-decorative-option2-text-weak: var(--hop-quetzal-300);
557
+ --hop-decorative-option2-text: var(--hop-quetzal-900);
558
+ --hop-decorative-option2-surface-weakest: var(--hop-quetzal-25);
559
+ --hop-decorative-option2-surface-weak-hover: var(--hop-quetzal-75);
560
+ --hop-decorative-option2-surface-weak: var(--hop-quetzal-50);
561
+ --hop-decorative-option2-surface-strong: var(--hop-quetzal-200);
562
+ --hop-decorative-option2-surface-hover: var(--hop-quetzal-200);
563
+ --hop-decorative-option2-surface: var(--hop-quetzal-100);
564
+ --hop-decorative-option2-icon: var(--hop-quetzal-900);
565
+ --hop-decorative-option2-border: var(--hop-quetzal-400);
566
+ --hop-decorative-option1-text-weak: var(--hop-sapphire-300);
567
+ --hop-decorative-option1-text: var(--hop-sapphire-900);
568
+ --hop-decorative-option1-surface-weakest: var(--hop-sapphire-25);
569
+ --hop-decorative-option1-surface-weak-hover: var(--hop-sapphire-75);
570
+ --hop-decorative-option1-surface-weak: var(--hop-sapphire-50);
571
+ --hop-decorative-option1-surface-strong: var(--hop-sapphire-200);
572
+ --hop-decorative-option1-surface-hover: var(--hop-sapphire-200);
573
+ --hop-decorative-option1-surface: var(--hop-sapphire-100);
574
+ --hop-decorative-option1-icon: var(--hop-sapphire-900);
575
+ --hop-decorative-option1-border: var(--hop-sapphire-400);
576
+ --hop-upsell-text-weak-press: var(--hop-sunken-treasure-300);
577
+ --hop-upsell-text-weak-hover: var(--hop-sunken-treasure-200);
578
+ --hop-upsell-text-weak: var(--hop-sunken-treasure-100);
579
+ --hop-upsell-text-press: var(--hop-sunken-treasure-900);
580
+ --hop-upsell-text-hover: var(--hop-sunken-treasure-800);
581
+ --hop-upsell-text-disabled: var(--hop-sunken-treasure-300);
582
+ --hop-upsell-text-selected: var(--hop-sunken-treasure-100);
583
+ --hop-upsell-text: var(--hop-sunken-treasure-700);
584
+ --hop-upsell-surface-weak-press: var(--hop-sunken-treasure-600);
585
+ --hop-upsell-surface-weak-hover: var(--hop-sunken-treasure-700);
586
+ --hop-upsell-surface-weak: var(--hop-sunken-treasure-800);
587
+ --hop-upsell-surface-press: var(--hop-sunken-treasure-200);
588
+ --hop-upsell-surface-hover: var(--hop-sunken-treasure-100);
589
+ --hop-upsell-surface-disabled: var(--hop-sunken-treasure-700);
590
+ --hop-upsell-surface-selected: var(--hop-sunken-treasure-800);
591
+ --hop-upsell-surface: var(--hop-sunken-treasure-75);
592
+ --hop-upsell-icon-weak-press: var(--hop-sunken-treasure-300);
593
+ --hop-upsell-icon-weak-hover: var(--hop-sunken-treasure-200);
594
+ --hop-upsell-icon-weak: var(--hop-sunken-treasure-100);
595
+ --hop-upsell-icon-weakest: var(--hop-sunken-treasure-100);
596
+ --hop-upsell-icon-press: var(--hop-sunken-treasure-900);
597
+ --hop-upsell-icon-hover: var(--hop-sunken-treasure-800);
598
+ --hop-upsell-icon-selected: var(--hop-sunken-treasure-100);
599
+ --hop-upsell-icon: var(--hop-sunken-treasure-700);
600
+ --hop-upsell-border-press: var(--hop-sunken-treasure-400);
601
+ --hop-upsell-border-disabled: var(--hop-sunken-treasure-700);
602
+ --hop-upsell-border-selected: var(--hop-sunken-treasure-100);
603
+ --hop-upsell-border: var(--hop-sunken-treasure-200);
604
+ --hop-upsell-text-weak-active: var(--hop-sunken-treasure-300);
605
+ --hop-upsell-text-active: var(--hop-sunken-treasure-900);
606
+ --hop-upsell-surface-weak-active: var(--hop-sunken-treasure-600);
607
+ --hop-upsell-surface-active: var(--hop-sunken-treasure-300);
608
+ --hop-upsell-icon-weak-active: var(--hop-sunken-treasure-300);
609
+ --hop-upsell-icon-active: var(--hop-sunken-treasure-900);
610
+ --hop-upsell-border-active: var(--hop-sunken-treasure-400);
611
+ --hop-primary-text-disabled: var(--hop-sapphire-700);
612
+ --hop-primary-text-selected: var(--hop-sapphire-200);
613
+ --hop-primary-text-strong-hover: var(--hop-samoyed);
614
+ --hop-primary-text-strong: var(--hop-samoyed);
615
+ --hop-primary-text-press: var(--hop-sapphire-75);
616
+ --hop-primary-text-hover: var(--hop-sapphire-200);
617
+ --hop-primary-text: var(--hop-sapphire-100);
618
+ --hop-primary-surface-weak-press: var(--hop-sapphire-600);
619
+ --hop-primary-surface-weak-hover: var(--hop-sapphire-700);
620
+ --hop-primary-surface-weak: var(--hop-sapphire-800);
621
+ --hop-primary-surface-strong-press: var(--hop-sapphire-600);
622
+ --hop-primary-surface-strong-hover: var(--hop-sapphire-500);
623
+ --hop-primary-surface-strong-selected: var(--hop-sapphire-800);
624
+ --hop-primary-surface-strong: var(--hop-sapphire-400);
625
+ --hop-primary-surface-press: var(--hop-sapphire-500);
626
+ --hop-primary-surface-hover: var(--hop-sapphire-400);
627
+ --hop-primary-surface-focus: var(--hop-sapphire-900);
628
+ --hop-primary-surface-disabled: var(--hop-sapphire-700);
629
+ --hop-primary-surface-selected: var(--hop-sapphire-800);
630
+ --hop-primary-surface: var(--hop-sapphire-200);
631
+ --hop-primary-icon-strong-hover: var(--hop-sapphire-300);
632
+ --hop-primary-icon-strong: var(--hop-samoyed);
633
+ --hop-primary-icon-press: var(--hop-sapphire-75);
634
+ --hop-primary-icon-hover: var(--hop-sapphire-300);
635
+ --hop-primary-icon-disabled: var(--hop-sapphire-700);
636
+ --hop-primary-icon-selected: var(--hop-sapphire-200);
637
+ --hop-primary-icon: var(--hop-sapphire-200);
638
+ --hop-primary-border-press: var(--hop-sapphire-500);
639
+ --hop-primary-border-focus: var(--hop-sapphire-200);
640
+ --hop-primary-border-selected: var(--hop-sapphire-300);
641
+ --hop-primary-border: var(--hop-sapphire-300);
642
+ --hop-primary-text-active: var(--hop-sapphire-75);
643
+ --hop-primary-surface-weak-active: var(--hop-sapphire-600);
644
+ --hop-primary-surface-strong-active: var(--hop-sapphire-600);
645
+ --hop-primary-surface-active: var(--hop-sapphire-500);
646
+ --hop-primary-icon-active: var(--hop-sapphire-75);
647
+ --hop-primary-border-active: var(--hop-sapphire-500);
648
+ --hop-neutral-text-weakest: var(--hop-rock-300);
649
+ --hop-neutral-text-weak-selected: var(--hop-rock-75);
650
+ --hop-neutral-text-weak-press: var(--hop-rock-50);
651
+ --hop-neutral-text-weak-hover: var(--hop-rock-75);
652
+ --hop-neutral-text-weak: var(--hop-rock-200);
653
+ --hop-neutral-text-strong: var(--hop-rock-900);
654
+ --hop-neutral-text-press: var(--hop-toad-25);
655
+ --hop-neutral-text-hover: var(--hop-rock-50);
656
+ --hop-neutral-text-disabled: var(--hop-rock-500);
657
+ --hop-neutral-text-selected: var(--hop-rock-900);
658
+ --hop-neutral-text: var(--hop-rock-25);
659
+ --hop-neutral-surface-weakest-hover: var(--hop-rock-800);
660
+ --hop-neutral-surface-weakest-selected: var(--hop-rock-800);
661
+ --hop-neutral-surface-weak-press: var(--hop-rock-600);
662
+ --hop-neutral-surface-weak-hover: var(--hop-rock-700);
663
+ --hop-neutral-surface-weak-selected: var(--hop-rock-800);
664
+ --hop-neutral-surface-weak: var(--hop-rock-800);
665
+ --hop-neutral-surface-weakest: var(--hop-rock-900);
666
+ --hop-neutral-surface-strong: var(--hop-toad-25);
667
+ --hop-neutral-surface-press: var(--hop-rock-700);
668
+ --hop-neutral-surface-hover: var(--hop-rock-800);
669
+ --hop-neutral-surface-disabled: var(--hop-rock-700);
670
+ --hop-neutral-surface-selected: var(--hop-toad-25);
671
+ --hop-neutral-surface: var(--hop-abyss);
672
+ --hop-neutral-icon-weakest: var(--hop-rock-400);
673
+ --hop-neutral-icon-weak-selected: var(--hop-rock-75);
674
+ --hop-neutral-icon-weak-press: var(--hop-rock-50);
675
+ --hop-neutral-icon-weak-hover: var(--hop-rock-75);
676
+ --hop-neutral-icon-weak: var(--hop-rock-200);
677
+ --hop-neutral-icon-strong-hover: var(--hop-rock-900);
678
+ --hop-neutral-icon-strong: var(--hop-rock-900);
679
+ --hop-neutral-icon-press: var(--hop-toad-25);
680
+ --hop-neutral-icon-hover: var(--hop-rock-50);
681
+ --hop-neutral-icon-disabled: var(--hop-rock-500);
682
+ --hop-neutral-icon-selected: var(--hop-rock-900);
683
+ --hop-neutral-icon: var(--hop-rock-25);
684
+ --hop-neutral-border-weak: var(--hop-rock-800);
685
+ --hop-neutral-border-weakest: var(--hop-rock-800);
686
+ --hop-neutral-border-strong-hover: var(--hop-samoyed);
687
+ --hop-neutral-border-strong: var(--hop-samoyed);
688
+ --hop-neutral-border-press: var(--hop-rock-200);
689
+ --hop-neutral-border-hover: var(--hop-rock-300);
690
+ --hop-neutral-border-disabled: var(--hop-rock-800);
691
+ --hop-neutral-border-selected: var(--hop-toad-25);
692
+ --hop-neutral-border: var(--hop-rock-500);
693
+ --hop-neutral-text-weak-active: var(--hop-rock-50);
694
+ --hop-neutral-text-active: var(--hop-toad-25);
695
+ --hop-neutral-surface-weak-active: var(--hop-rock-600);
696
+ --hop-neutral-surface-active: var(--hop-rock-700);
697
+ --hop-neutral-icon-weak-active: var(--hop-rock-50);
698
+ --hop-neutral-icon-active: var(--hop-toad-25);
699
+ --hop-neutral-border-active: var(--hop-rock-700);
700
+ --hop-danger-text-weak-press: var(--hop-amanita-300);
701
+ --hop-danger-text-weak-hover: var(--hop-amanita-200);
702
+ --hop-danger-text-weak: var(--hop-amanita-100);
703
+ --hop-danger-text-strong-hover: var(--hop-samoyed);
704
+ --hop-danger-text-strong: var(--hop-samoyed);
705
+ --hop-danger-text-press: var(--hop-amanita-50);
706
+ --hop-danger-text-hover: var(--hop-amanita-200);
707
+ --hop-danger-text-disabled: var(--hop-amanita-600);
708
+ --hop-danger-text-selected: var(--hop-amanita-100);
709
+ --hop-danger-text: var(--hop-amanita-900);
710
+ --hop-danger-surface-weak-press: var(--hop-amanita-600);
711
+ --hop-danger-surface-weak-hover: var(--hop-amanita-700);
712
+ --hop-danger-surface-weak: var(--hop-amanita-900);
713
+ --hop-danger-surface-strong-hover: var(--hop-amanita-500);
714
+ --hop-danger-surface-strong: var(--hop-amanita-400);
715
+ --hop-danger-surface-press: var(--hop-amanita-600);
716
+ --hop-danger-surface-hover: var(--hop-amanita-300);
717
+ --hop-danger-surface-disabled: var(--hop-amanita-600);
718
+ --hop-danger-surface-selected: var(--hop-amanita-800);
719
+ --hop-danger-surface: var(--hop-amanita-200);
720
+ --hop-danger-icon-weakest: var(--hop-amanita-100);
721
+ --hop-danger-icon-weak-press: var(--hop-amanita-300);
722
+ --hop-danger-icon-weak-hover: var(--hop-amanita-200);
723
+ --hop-danger-icon-weak: var(--hop-amanita-100);
724
+ --hop-danger-icon-strong-hover: var(--hop-samoyed);
725
+ --hop-danger-icon-strong: var(--hop-samoyed);
726
+ --hop-danger-icon-press: var(--hop-amanita-50);
727
+ --hop-danger-icon-hover: var(--hop-amanita-200);
728
+ --hop-danger-icon-disabled: var(--hop-amanita-600);
729
+ --hop-danger-icon-selected: var(--hop-amanita-100);
730
+ --hop-danger-icon: var(--hop-amanita-900);
731
+ --hop-danger-border-strong: var(--hop-amanita-300);
732
+ --hop-danger-border-press: var(--hop-amanita-400);
733
+ --hop-danger-border-selected: var(--hop-amanita-100);
734
+ --hop-danger-border: var(--hop-amanita-500);
735
+ --hop-danger-text-weak-active: var(--hop-amanita-300);
736
+ --hop-danger-text-active: var(--hop-amanita-50);
737
+ --hop-danger-surface-weak-active: var(--hop-amanita-600);
738
+ --hop-danger-surface-active: var(--hop-amanita-600);
739
+ --hop-danger-icon-weak-active: var(--hop-amanita-300);
740
+ --hop-danger-icon-active: var(--hop-amanita-50);
741
+ --hop-danger-border-active: var(--hop-amanita-300);
742
+ }