@hopper-ui/tokens 4.4.7 → 5.1.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 (6) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/sharegate/dark/tokens.css +544 -0
  3. package/dist/sharegate/tokens.css +1222 -0
  4. package/dist/{dark → workleap/dark}/tokens.css +4 -3
  5. package/dist/{tokens.css → workleap/tokens.css} +65 -25
  6. package/package.json +18 -11
package/CHANGELOG.md CHANGED
@@ -1,5 +1,32 @@
1
1
  # @hopper-ui/tokens
2
2
 
3
+ ## 5.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - e4f524a: Add ShareGate tokens and core token updates:
8
+ - Add new core color palettes: `persimmon`, `iris`, `limeburst`
9
+ - Update `rock` color palette values
10
+ - Add `inset-bevel` elevation token
11
+ - Add `rounded-2-5` (12px) border radius
12
+ - Update ShareGate semantic tokens: primary uses `iris`, upsell uses `limeburst`
13
+ - Add `primary.surface-weak-selected` token to Workleap and ShareGate themes
14
+ - Fix minor Workleap primary token values
15
+
16
+ ## 5.0.0
17
+
18
+ ### Major Changes
19
+
20
+ - cd95303: This update introduces a theming system in Hopper, allowing applications to customize the appearance of Hopper components to match different brands.
21
+ Workleap application's will need to import a new CSS file for the `workleap` theme to ensure proper styling, but no changes are expected to the visual appearance.
22
+ A Sharegate theme as been introduced, but will be updated in future updates, for now it's mostly identical to the `workleap` theme.
23
+
24
+ BREAKING
25
+ - The tokens files needs to be imported from the proper theme now.
26
+ - Before : `@hopper-ui/tokens/tokens.css` and `@hopper-ui/tokens/dark/tokens.css`
27
+ - Now : `@hopper-ui/tokens/workleap/tokens.css` and `@hopper-ui/tokens/workleap/dark/tokens.css`
28
+ - The `withCssVariable` property is no longer available on the `HopperProvider`. You need to manually import the tokens now.
29
+
3
30
  ## 4.4.7
4
31
 
5
32
  ### Patch Changes
package/dist/sharegate/dark/tokens.css ADDED
@@ -0,0 +1,544 @@
1
+ [data-mode="dark"] {
2
+ --hop-danger-border-active: var(--hop-amanita-300);
3
+ --hop-danger-icon-active: var(--hop-amanita-50);
4
+ --hop-danger-icon-weak-active: var(--hop-amanita-300);
5
+ --hop-danger-surface-active: var(--hop-amanita-600);
6
+ --hop-danger-surface-weak-active: var(--hop-amanita-600);
7
+ --hop-danger-text-active: var(--hop-amanita-50);
8
+ --hop-danger-text-weak-active: var(--hop-amanita-300);
9
+ --hop-danger-border: var(--hop-amanita-500);
10
+ --hop-danger-border-selected: var(--hop-amanita-100);
11
+ --hop-danger-border-press: var(--hop-amanita-400);
12
+ --hop-danger-border-strong: var(--hop-amanita-300);
13
+ --hop-danger-icon: var(--hop-amanita-900);
14
+ --hop-danger-icon-selected: var(--hop-amanita-100);
15
+ --hop-danger-icon-disabled: var(--hop-amanita-600);
16
+ --hop-danger-icon-hover: var(--hop-amanita-200);
17
+ --hop-danger-icon-press: var(--hop-amanita-50);
18
+ --hop-danger-icon-strong: var(--hop-samoyed);
19
+ --hop-danger-icon-strong-hover: var(--hop-samoyed);
20
+ --hop-danger-icon-weak: var(--hop-amanita-100);
21
+ --hop-danger-icon-weak-hover: var(--hop-amanita-200);
22
+ --hop-danger-icon-weak-press: var(--hop-amanita-300);
23
+ --hop-danger-icon-weakest: var(--hop-amanita-100);
24
+ --hop-danger-surface: var(--hop-amanita-200);
25
+ --hop-danger-surface-selected: var(--hop-amanita-800);
26
+ --hop-danger-surface-disabled: var(--hop-amanita-600);
27
+ --hop-danger-surface-hover: var(--hop-amanita-300);
28
+ --hop-danger-surface-press: var(--hop-amanita-600);
29
+ --hop-danger-surface-strong: var(--hop-amanita-400);
30
+ --hop-danger-surface-strong-hover: var(--hop-amanita-500);
31
+ --hop-danger-surface-weak: var(--hop-amanita-900);
32
+ --hop-danger-surface-weak-hover: var(--hop-amanita-700);
33
+ --hop-danger-surface-weak-press: var(--hop-amanita-600);
34
+ --hop-danger-text: var(--hop-amanita-900);
35
+ --hop-danger-text-selected: var(--hop-amanita-100);
36
+ --hop-danger-text-disabled: var(--hop-amanita-600);
37
+ --hop-danger-text-hover: var(--hop-amanita-200);
38
+ --hop-danger-text-press: var(--hop-amanita-50);
39
+ --hop-danger-text-strong: var(--hop-samoyed);
40
+ --hop-danger-text-strong-hover: var(--hop-samoyed);
41
+ --hop-danger-text-weak: var(--hop-amanita-100);
42
+ --hop-danger-text-weak-hover: var(--hop-amanita-200);
43
+ --hop-danger-text-weak-press: var(--hop-amanita-300);
44
+ --hop-neutral-border-active: var(--hop-rock-700);
45
+ --hop-neutral-icon-active: var(--hop-toad-25);
46
+ --hop-neutral-icon-weak-active: var(--hop-rock-50);
47
+ --hop-neutral-surface-active: var(--hop-rock-700);
48
+ --hop-neutral-surface-weak-active: var(--hop-rock-600);
49
+ --hop-neutral-text-active: var(--hop-toad-25);
50
+ --hop-neutral-text-weak-active: var(--hop-rock-50);
51
+ --hop-neutral-border: var(--hop-rock-500);
52
+ --hop-neutral-border-selected: var(--hop-toad-25);
53
+ --hop-neutral-border-disabled: var(--hop-rock-800);
54
+ --hop-neutral-border-hover: var(--hop-rock-300);
55
+ --hop-neutral-border-press: var(--hop-rock-200);
56
+ --hop-neutral-border-strong: var(--hop-samoyed);
57
+ --hop-neutral-border-strong-hover: var(--hop-samoyed);
58
+ --hop-neutral-border-weakest: var(--hop-rock-800);
59
+ --hop-neutral-border-weak: var(--hop-rock-800);
60
+ --hop-neutral-icon: var(--hop-rock-25);
61
+ --hop-neutral-icon-selected: var(--hop-rock-900);
62
+ --hop-neutral-icon-disabled: var(--hop-rock-500);
63
+ --hop-neutral-icon-hover: var(--hop-rock-50);
64
+ --hop-neutral-icon-press: var(--hop-toad-25);
65
+ --hop-neutral-icon-strong: var(--hop-rock-900);
66
+ --hop-neutral-icon-strong-hover: var(--hop-rock-900);
67
+ --hop-neutral-icon-weak: var(--hop-rock-200);
68
+ --hop-neutral-icon-weak-hover: var(--hop-rock-75);
69
+ --hop-neutral-icon-weak-press: var(--hop-rock-50);
70
+ --hop-neutral-icon-weak-selected: var(--hop-rock-75);
71
+ --hop-neutral-icon-weakest: var(--hop-rock-400);
72
+ --hop-neutral-surface: var(--hop-abyss);
73
+ --hop-neutral-surface-selected: var(--hop-toad-25);
74
+ --hop-neutral-surface-disabled: var(--hop-rock-700);
75
+ --hop-neutral-surface-hover: var(--hop-rock-800);
76
+ --hop-neutral-surface-press: var(--hop-rock-700);
77
+ --hop-neutral-surface-strong: var(--hop-toad-25);
78
+ --hop-neutral-surface-weakest: var(--hop-rock-900);
79
+ --hop-neutral-surface-weak: var(--hop-rock-800);
80
+ --hop-neutral-surface-weak-selected: var(--hop-rock-800);
81
+ --hop-neutral-surface-weak-hover: var(--hop-rock-700);
82
+ --hop-neutral-surface-weak-press: var(--hop-rock-600);
83
+ --hop-neutral-surface-weakest-selected: var(--hop-rock-800);
84
+ --hop-neutral-surface-weakest-hover: var(--hop-rock-800);
85
+ --hop-neutral-text: var(--hop-rock-25);
86
+ --hop-neutral-text-selected: var(--hop-rock-900);
87
+ --hop-neutral-text-disabled: var(--hop-rock-500);
88
+ --hop-neutral-text-hover: var(--hop-rock-50);
89
+ --hop-neutral-text-press: var(--hop-toad-25);
90
+ --hop-neutral-text-strong: var(--hop-rock-900);
91
+ --hop-neutral-text-weak: var(--hop-rock-200);
92
+ --hop-neutral-text-weak-hover: var(--hop-rock-75);
93
+ --hop-neutral-text-weak-press: var(--hop-rock-50);
94
+ --hop-neutral-text-weak-selected: var(--hop-rock-75);
95
+ --hop-neutral-text-weakest: var(--hop-rock-300);
96
+ --hop-primary-border-active: var(--hop-sapphire-500);
97
+ --hop-primary-icon-active: var(--hop-sapphire-75);
98
+ --hop-primary-surface-active: var(--hop-sapphire-500);
99
+ --hop-primary-surface-strong-active: var(--hop-sapphire-600);
100
+ --hop-primary-surface-weak-active: var(--hop-sapphire-600);
101
+ --hop-primary-text-active: var(--hop-sapphire-75);
102
+ --hop-primary-border: var(--hop-iris-300);
103
+ --hop-primary-border-selected: var(--hop-persimmon-300);
104
+ --hop-primary-border-focus: var(--hop-iris-200);
105
+ --hop-primary-border-press: var(--hop-iris-400);
106
+ --hop-primary-icon: var(--hop-iris-100);
107
+ --hop-primary-icon-selected: var(--hop-persimmon-200);
108
+ --hop-primary-icon-disabled: var(--hop-iris-700);
109
+ --hop-primary-icon-hover: var(--hop-iris-300);
110
+ --hop-primary-icon-press: var(--hop-iris-75);
111
+ --hop-primary-icon-strong: var(--hop-samoyed);
112
+ --hop-primary-icon-strong-hover: var(--hop-samoyed);
113
+ --hop-primary-surface: var(--hop-iris-200);
114
+ --hop-primary-surface-selected: var(--hop-persimmon-400);
115
+ --hop-primary-surface-disabled: var(--hop-iris-700);
116
+ --hop-primary-surface-focus: var(--hop-iris-900);
117
+ --hop-primary-surface-hover: var(--hop-iris-400);
118
+ --hop-primary-surface-press: var(--hop-iris-500);
119
+ --hop-primary-surface-strong: var(--hop-iris-400);
120
+ --hop-primary-surface-strong-selected: var(--hop-persimmon-800);
121
+ --hop-primary-surface-strong-hover: var(--hop-iris-500);
122
+ --hop-primary-surface-strong-press: var(--hop-iris-600);
123
+ --hop-primary-surface-weak: var(--hop-iris-800);
124
+ --hop-primary-surface-weak-selected: var(--hop-persimmon-500);
125
+ --hop-primary-surface-weak-hover: var(--hop-iris-700);
126
+ --hop-primary-surface-weak-press: var(--hop-iris-600);
127
+ --hop-primary-text: var(--hop-iris-100);
128
+ --hop-primary-text-hover: var(--hop-iris-200);
129
+ --hop-primary-text-press: var(--hop-iris-75);
130
+ --hop-primary-text-strong: var(--hop-samoyed);
131
+ --hop-primary-text-strong-hover: var(--hop-samoyed);
132
+ --hop-primary-text-selected: var(--hop-persimmon-200);
133
+ --hop-primary-text-disabled: var(--hop-iris-700);
134
+ --hop-upsell-border-active: var(--hop-sunken-treasure-400);
135
+ --hop-upsell-icon-active: var(--hop-sunken-treasure-900);
136
+ --hop-upsell-icon-weak-active: var(--hop-sunken-treasure-300);
137
+ --hop-upsell-surface-active: var(--hop-sunken-treasure-300);
138
+ --hop-upsell-surface-weak-active: var(--hop-sunken-treasure-600);
139
+ --hop-upsell-text-active: var(--hop-sunken-treasure-900);
140
+ --hop-upsell-text-weak-active: var(--hop-sunken-treasure-300);
141
+ --hop-upsell-border: var(--hop-limeburst-600);
142
+ --hop-upsell-border-selected: var(--hop-limeburst-600);
143
+ --hop-upsell-border-disabled: var(--hop-limeburst-700);
144
+ --hop-upsell-border-press: var(--hop-limeburst-400);
145
+ --hop-upsell-icon: var(--hop-limeburst-75);
146
+ --hop-upsell-icon-selected: var(--hop-limeburst-100);
147
+ --hop-upsell-icon-hover: var(--hop-limeburst-50);
148
+ --hop-upsell-icon-press: var(--hop-limeburst-25);
149
+ --hop-upsell-icon-weakest: var(--hop-limeburst-700);
150
+ --hop-upsell-icon-weak: var(--hop-limeburst-400);
151
+ --hop-upsell-icon-weak-hover: var(--hop-limeburst-200);
152
+ --hop-upsell-icon-weak-press: var(--hop-limeburst-100);
153
+ --hop-upsell-surface: var(--hop-limeburst-900);
154
+ --hop-upsell-surface-selected: var(--hop-limeburst-800);
155
+ --hop-upsell-surface-disabled: var(--hop-limeburst-900);
156
+ --hop-upsell-surface-hover: var(--hop-limeburst-800);
157
+ --hop-upsell-surface-press: var(--hop-limeburst-700);
158
+ --hop-upsell-surface-weak: var(--hop-limeburst-700);
159
+ --hop-upsell-surface-weak-hover: var(--hop-limeburst-600);
160
+ --hop-upsell-surface-weak-press: var(--hop-limeburst-500);
161
+ --hop-upsell-text: var(--hop-limeburst-75);
162
+ --hop-upsell-text-selected: var(--hop-limeburst-100);
163
+ --hop-upsell-text-disabled: var(--hop-limeburst-300);
164
+ --hop-upsell-text-hover: var(--hop-limeburst-50);
165
+ --hop-upsell-text-press: var(--hop-limeburst-25);
166
+ --hop-upsell-text-weak: var(--hop-limeburst-400);
167
+ --hop-upsell-text-weak-hover: var(--hop-limeburst-200);
168
+ --hop-upsell-text-weak-press: var(--hop-limeburst-100);
169
+ --hop-decorative-option1-border: var(--hop-sapphire-400);
170
+ --hop-decorative-option1-icon: var(--hop-sapphire-900);
171
+ --hop-decorative-option1-surface: var(--hop-sapphire-100);
172
+ --hop-decorative-option1-surface-hover: var(--hop-sapphire-200);
173
+ --hop-decorative-option1-surface-strong: var(--hop-sapphire-200);
174
+ --hop-decorative-option1-surface-weak: var(--hop-sapphire-50);
175
+ --hop-decorative-option1-surface-weak-hover: var(--hop-sapphire-75);
176
+ --hop-decorative-option1-surface-weakest: var(--hop-sapphire-25);
177
+ --hop-decorative-option1-text: var(--hop-sapphire-900);
178
+ --hop-decorative-option1-text-weak: var(--hop-sapphire-300);
179
+ --hop-decorative-option2-border: var(--hop-quetzal-400);
180
+ --hop-decorative-option2-icon: var(--hop-quetzal-900);
181
+ --hop-decorative-option2-surface: var(--hop-quetzal-100);
182
+ --hop-decorative-option2-surface-hover: var(--hop-quetzal-200);
183
+ --hop-decorative-option2-surface-strong: var(--hop-quetzal-200);
184
+ --hop-decorative-option2-surface-weak: var(--hop-quetzal-50);
185
+ --hop-decorative-option2-surface-weak-hover: var(--hop-quetzal-75);
186
+ --hop-decorative-option2-surface-weakest: var(--hop-quetzal-25);
187
+ --hop-decorative-option2-text: var(--hop-quetzal-900);
188
+ --hop-decorative-option2-text-weak: var(--hop-quetzal-300);
189
+ --hop-decorative-option3-border: var(--hop-koi-400);
190
+ --hop-decorative-option3-icon: var(--hop-koi-900);
191
+ --hop-decorative-option3-surface: var(--hop-koi-100);
192
+ --hop-decorative-option3-surface-hover: var(--hop-koi-200);
193
+ --hop-decorative-option3-surface-strong: var(--hop-koi-200);
194
+ --hop-decorative-option3-surface-weak: var(--hop-koi-50);
195
+ --hop-decorative-option3-surface-weak-hover: var(--hop-koi-75);
196
+ --hop-decorative-option3-surface-weakest: var(--hop-koi-25);
197
+ --hop-decorative-option3-text: var(--hop-koi-900);
198
+ --hop-decorative-option3-text-weak: var(--hop-koi-300);
199
+ --hop-decorative-option4-border: var(--hop-moss-400);
200
+ --hop-decorative-option4-icon: var(--hop-moss-900);
201
+ --hop-decorative-option4-surface: var(--hop-moss-75);
202
+ --hop-decorative-option4-surface-hover: var(--hop-moss-100);
203
+ --hop-decorative-option4-surface-strong: var(--hop-moss-100);
204
+ --hop-decorative-option4-surface-weak: var(--hop-moss-50);
205
+ --hop-decorative-option4-surface-weak-hover: var(--hop-moss-75);
206
+ --hop-decorative-option4-surface-weakest: var(--hop-moss-25);
207
+ --hop-decorative-option4-text: var(--hop-moss-900);
208
+ --hop-decorative-option4-text-weak: var(--hop-moss-400);
209
+ --hop-decorative-option5-border: var(--hop-coastal-400);
210
+ --hop-decorative-option5-icon: var(--hop-coastal-900);
211
+ --hop-decorative-option5-surface: var(--hop-coastal-75);
212
+ --hop-decorative-option5-surface-hover: var(--hop-coastal-100);
213
+ --hop-decorative-option5-surface-strong: var(--hop-coastal-100);
214
+ --hop-decorative-option5-surface-weak: var(--hop-coastal-50);
215
+ --hop-decorative-option5-surface-weak-hover: var(--hop-coastal-75);
216
+ --hop-decorative-option5-surface-weakest: var(--hop-coastal-25);
217
+ --hop-decorative-option5-text: var(--hop-coastal-900);
218
+ --hop-decorative-option5-text-weak: var(--hop-coastal-300);
219
+ --hop-decorative-option6-border: var(--hop-sunken-treasure-400);
220
+ --hop-decorative-option6-icon: var(--hop-sunken-treasure-900);
221
+ --hop-decorative-option6-surface: var(--hop-sunken-treasure-75);
222
+ --hop-decorative-option6-surface-hover: var(--hop-sunken-treasure-100);
223
+ --hop-decorative-option6-surface-strong: var(--hop-sunken-treasure-100);
224
+ --hop-decorative-option6-surface-weak: var(--hop-sunken-treasure-50);
225
+ --hop-decorative-option6-surface-weak-hover: var(--hop-sunken-treasure-75);
226
+ --hop-decorative-option6-surface-weakest: var(--hop-sunken-treasure-25);
227
+ --hop-decorative-option6-text: var(--hop-sunken-treasure-900);
228
+ --hop-decorative-option6-text-weak: var(--hop-sunken-treasure-200);
229
+ --hop-decorative-option7-border: var(--hop-toad-400);
230
+ --hop-decorative-option7-icon: var(--hop-toad-900);
231
+ --hop-decorative-option7-surface: var(--hop-toad-50);
232
+ --hop-decorative-option7-surface-hover: var(--hop-toad-100);
233
+ --hop-decorative-option7-surface-strong: var(--hop-toad-100);
234
+ --hop-decorative-option7-surface-weak: var(--hop-toad-50);
235
+ --hop-decorative-option7-surface-weak-hover: var(--hop-toad-75);
236
+ --hop-decorative-option7-surface-weakest: var(--hop-toad-25);
237
+ --hop-decorative-option7-text: var(--hop-toad-900);
238
+ --hop-decorative-option7-text-weak: var(--hop-toad-500);
239
+ --hop-decorative-option8-border: var(--hop-amanita-400);
240
+ --hop-decorative-option8-icon: var(--hop-amanita-900);
241
+ --hop-decorative-option8-surface: var(--hop-amanita-75);
242
+ --hop-decorative-option8-surface-hover: var(--hop-amanita-200);
243
+ --hop-decorative-option8-surface-strong: var(--hop-amanita-100);
244
+ --hop-decorative-option8-surface-weak: var(--hop-amanita-50);
245
+ --hop-decorative-option8-surface-weak-hover: var(--hop-amanita-75);
246
+ --hop-decorative-option8-surface-weakest: var(--hop-amanita-25);
247
+ --hop-decorative-option8-text: var(--hop-amanita-900);
248
+ --hop-decorative-option8-text-weak: var(--hop-amanita-300);
249
+ --hop-decorative-option9-border: var(--hop-rock-400);
250
+ --hop-decorative-option9-icon: var(--hop-samoyed);
251
+ --hop-decorative-option9-surface: var(--hop-rock-400);
252
+ --hop-decorative-option9-surface-hover: var(--hop-rock-500);
253
+ --hop-decorative-option9-surface-strong: var(--hop-rock-800);
254
+ --hop-decorative-option9-surface-weak: var(--hop-rock-300);
255
+ --hop-decorative-option9-surface-weak-hover: var(--hop-rock-400);
256
+ --hop-decorative-option9-surface-weakest: var(--hop-rock-200);
257
+ --hop-decorative-option9-text: var(--hop-samoyed);
258
+ --hop-decorative-option9-text-weak: var(--hop-rock-300);
259
+ --hop-information-border: var(--hop-coastal-400);
260
+ --hop-information-icon: var(--hop-coastal-900);
261
+ --hop-information-icon-weakest: var(--hop-coastal-200);
262
+ --hop-information-icon-weak: var(--hop-coastal-300);
263
+ --hop-information-surface: var(--hop-coastal-75);
264
+ --hop-information-surface-strong: var(--hop-coastal-300);
265
+ --hop-information-surface-weak: var(--hop-coastal-800);
266
+ --hop-information-text: var(--hop-coastal-900);
267
+ --hop-information-text-weak: var(--hop-coastal-75);
268
+ --hop-status-caution-border: var(--hop-koi-400);
269
+ --hop-status-caution-border-disabled: var(--hop-koi-600);
270
+ --hop-status-caution-border-hover: var(--hop-koi-500);
271
+ --hop-status-caution-border-press: var(--hop-koi-400);
272
+ --hop-status-caution-border-selected: var(--hop-koi-75);
273
+ --hop-status-caution-icon: var(--hop-koi-800);
274
+ --hop-status-caution-icon-disabled: var(--hop-koi-500);
275
+ --hop-status-caution-icon-hover: var(--hop-koi-900);
276
+ --hop-status-caution-icon-press: var(--hop-koi-800);
277
+ --hop-status-caution-icon-selected: var(--hop-koi-75);
278
+ --hop-status-caution-surface: var(--hop-koi-100);
279
+ --hop-status-caution-surface-disabled: var(--hop-koi-800);
280
+ --hop-status-caution-surface-hover: var(--hop-koi-200);
281
+ --hop-status-caution-surface-press: var(--hop-koi-300);
282
+ --hop-status-caution-surface-selected: var(--hop-koi-800);
283
+ --hop-status-caution-surface-strong: var(--hop-koi-200);
284
+ --hop-status-caution-text: var(--hop-koi-800);
285
+ --hop-status-caution-text-disabled: var(--hop-koi-500);
286
+ --hop-status-caution-text-hover: var(--hop-koi-900);
287
+ --hop-status-caution-text-press: var(--hop-koi-800);
288
+ --hop-status-caution-text-selected: var(--hop-koi-75);
289
+ --hop-status-inactive-border: var(--hop-rock-400);
290
+ --hop-status-inactive-border-disabled: var(--hop-rock-600);
291
+ --hop-status-inactive-border-hover: var(--hop-rock-500);
292
+ --hop-status-inactive-border-press: var(--hop-rock-400);
293
+ --hop-status-inactive-border-selected: var(--hop-rock-75);
294
+ --hop-status-inactive-icon: var(--hop-rock-800);
295
+ --hop-status-inactive-icon-disabled: var(--hop-rock-500);
296
+ --hop-status-inactive-icon-hover: var(--hop-rock-900);
297
+ --hop-status-inactive-icon-press: var(--hop-rock-800);
298
+ --hop-status-inactive-icon-selected: var(--hop-rock-75);
299
+ --hop-status-inactive-surface: var(--hop-rock-75);
300
+ --hop-status-inactive-surface-disabled: var(--hop-rock-800);
301
+ --hop-status-inactive-surface-hover: var(--hop-rock-200);
302
+ --hop-status-inactive-surface-press: var(--hop-rock-300);
303
+ --hop-status-inactive-surface-selected: var(--hop-rock-800);
304
+ --hop-status-inactive-surface-strong: var(--hop-rock-100);
305
+ --hop-status-inactive-text: var(--hop-rock-800);
306
+ --hop-status-inactive-text-disabled: var(--hop-rock-500);
307
+ --hop-status-inactive-text-hover: var(--hop-rock-900);
308
+ --hop-status-inactive-text-press: var(--hop-rock-800);
309
+ --hop-status-inactive-text-selected: var(--hop-rock-75);
310
+ --hop-status-negative-border: var(--hop-amanita-400);
311
+ --hop-status-negative-border-disabled: var(--hop-amanita-600);
312
+ --hop-status-negative-border-hover: var(--hop-amanita-500);
313
+ --hop-status-negative-border-press: var(--hop-amanita-400);
314
+ --hop-status-negative-border-selected: var(--hop-amanita-75);
315
+ --hop-status-negative-icon: var(--hop-amanita-800);
316
+ --hop-status-negative-icon-disabled: var(--hop-amanita-500);
317
+ --hop-status-negative-icon-hover: var(--hop-amanita-900);
318
+ --hop-status-negative-icon-press: var(--hop-amanita-800);
319
+ --hop-status-negative-icon-selected: var(--hop-amanita-75);
320
+ --hop-status-negative-surface: var(--hop-amanita-100);
321
+ --hop-status-negative-surface-disabled: var(--hop-amanita-800);
322
+ --hop-status-negative-surface-hover: var(--hop-amanita-200);
323
+ --hop-status-negative-surface-press: var(--hop-amanita-300);
324
+ --hop-status-negative-surface-selected: var(--hop-amanita-800);
325
+ --hop-status-negative-surface-strong: var(--hop-amanita-200);
326
+ --hop-status-negative-text: var(--hop-amanita-800);
327
+ --hop-status-negative-text-disabled: var(--hop-amanita-500);
328
+ --hop-status-negative-text-hover: var(--hop-amanita-900);
329
+ --hop-status-negative-text-press: var(--hop-amanita-800);
330
+ --hop-status-negative-text-selected: var(--hop-amanita-75);
331
+ --hop-status-neutral-border: var(--hop-rock-25);
332
+ --hop-status-neutral-border-disabled: var(--hop-rock-800);
333
+ --hop-status-neutral-border-hover: var(--hop-rock-50);
334
+ --hop-status-neutral-border-press: var(--hop-rock-25);
335
+ --hop-status-neutral-border-selected: var(--hop-rock-25);
336
+ --hop-status-neutral-icon: var(--hop-rock-25);
337
+ --hop-status-neutral-icon-disabled: var(--hop-rock-500);
338
+ --hop-status-neutral-icon-hover: var(--hop-rock-50);
339
+ --hop-status-neutral-icon-press: var(--hop-rock-25);
340
+ --hop-status-neutral-icon-selected: var(--hop-rock-25);
341
+ --hop-status-neutral-surface: var(--hop-abyss);
342
+ --hop-status-neutral-surface-disabled: var(--hop-rock-700);
343
+ --hop-status-neutral-surface-hover: var(--hop-rock-800);
344
+ --hop-status-neutral-surface-press: var(--hop-rock-700);
345
+ --hop-status-neutral-surface-selected: var(--hop-toad-25);
346
+ --hop-status-neutral-surface-strong: var(--hop-rock-100);
347
+ --hop-status-neutral-text: var(--hop-rock-25);
348
+ --hop-status-neutral-text-disabled: var(--hop-rock-500);
349
+ --hop-status-neutral-text-hover: var(--hop-rock-50);
350
+ --hop-status-neutral-text-press: var(--hop-rock-25);
351
+ --hop-status-neutral-text-selected: var(--hop-rock-900);
352
+ --hop-status-option1-border: var(--hop-coastal-400);
353
+ --hop-status-option1-border-disabled: var(--hop-coastal-600);
354
+ --hop-status-option1-border-hover: var(--hop-coastal-500);
355
+ --hop-status-option1-border-press: var(--hop-coastal-400);
356
+ --hop-status-option1-border-selected: var(--hop-coastal-75);
357
+ --hop-status-option1-icon: var(--hop-coastal-800);
358
+ --hop-status-option1-icon-disabled: var(--hop-coastal-500);
359
+ --hop-status-option1-icon-hover: var(--hop-coastal-900);
360
+ --hop-status-option1-icon-press: var(--hop-coastal-800);
361
+ --hop-status-option1-icon-selected: var(--hop-coastal-75);
362
+ --hop-status-option1-surface: var(--hop-coastal-100);
363
+ --hop-status-option1-surface-disabled: var(--hop-coastal-800);
364
+ --hop-status-option1-surface-hover: var(--hop-coastal-200);
365
+ --hop-status-option1-surface-press: var(--hop-coastal-300);
366
+ --hop-status-option1-surface-selected: var(--hop-coastal-800);
367
+ --hop-status-option1-surface-strong: var(--hop-coastal-100);
368
+ --hop-status-option1-text: var(--hop-coastal-800);
369
+ --hop-status-option1-text-disabled: var(--hop-coastal-500);
370
+ --hop-status-option1-text-hover: var(--hop-coastal-900);
371
+ --hop-status-option1-text-press: var(--hop-coastal-800);
372
+ --hop-status-option1-text-selected: var(--hop-coastal-75);
373
+ --hop-status-option2-border: var(--hop-orchid-bloom-300);
374
+ --hop-status-option2-border-disabled: var(--hop-orchid-bloom-600);
375
+ --hop-status-option2-border-hover: var(--hop-orchid-bloom-500);
376
+ --hop-status-option2-border-press: var(--hop-orchid-bloom-300);
377
+ --hop-status-option2-border-selected: var(--hop-orchid-bloom-800);
378
+ --hop-status-option2-icon: var(--hop-orchid-bloom-800);
379
+ --hop-status-option2-icon-disabled: var(--hop-orchid-bloom-500);
380
+ --hop-status-option2-icon-hover: var(--hop-orchid-bloom-900);
381
+ --hop-status-option2-icon-press: var(--hop-orchid-bloom-800);
382
+ --hop-status-option2-icon-selected: var(--hop-orchid-bloom-75);
383
+ --hop-status-option2-surface: var(--hop-orchid-bloom-100);
384
+ --hop-status-option2-surface-disabled: var(--hop-orchid-bloom-800);
385
+ --hop-status-option2-surface-hover: var(--hop-orchid-bloom-200);
386
+ --hop-status-option2-surface-press: var(--hop-orchid-bloom-300);
387
+ --hop-status-option2-surface-selected: var(--hop-orchid-bloom-800);
388
+ --hop-status-option2-surface-strong: var(--hop-orchid-bloom-100);
389
+ --hop-status-option2-text: var(--hop-orchid-bloom-800);
390
+ --hop-status-option2-text-disabled: var(--hop-orchid-bloom-500);
391
+ --hop-status-option2-text-hover: var(--hop-orchid-bloom-900);
392
+ --hop-status-option2-text-press: var(--hop-orchid-bloom-800);
393
+ --hop-status-option2-text-selected: var(--hop-orchid-bloom-75);
394
+ --hop-status-option3-border: var(--hop-quetzal-400);
395
+ --hop-status-option3-border-disabled: var(--hop-quetzal-600);
396
+ --hop-status-option3-border-hover: var(--hop-quetzal-500);
397
+ --hop-status-option3-border-press: var(--hop-quetzal-400);
398
+ --hop-status-option3-border-selected: var(--hop-quetzal-75);
399
+ --hop-status-option3-icon: var(--hop-quetzal-800);
400
+ --hop-status-option3-icon-disabled: var(--hop-quetzal-500);
401
+ --hop-status-option3-icon-hover: var(--hop-quetzal-900);
402
+ --hop-status-option3-icon-press: var(--hop-quetzal-800);
403
+ --hop-status-option3-icon-selected: var(--hop-quetzal-75);
404
+ --hop-status-option3-surface: var(--hop-quetzal-100);
405
+ --hop-status-option3-surface-disabled: var(--hop-quetzal-800);
406
+ --hop-status-option3-surface-hover: var(--hop-quetzal-200);
407
+ --hop-status-option3-surface-press: var(--hop-quetzal-300);
408
+ --hop-status-option3-surface-selected: var(--hop-quetzal-800);
409
+ --hop-status-option3-surface-strong: var(--hop-quetzal-100);
410
+ --hop-status-option3-text: var(--hop-quetzal-800);
411
+ --hop-status-option3-text-disabled: var(--hop-quetzal-200);
412
+ --hop-status-option3-text-hover: var(--hop-quetzal-900);
413
+ --hop-status-option3-text-press: var(--hop-quetzal-800);
414
+ --hop-status-option3-text-selected: var(--hop-quetzal-75);
415
+ --hop-status-option4-border: var(--hop-fog-400);
416
+ --hop-status-option4-border-disabled: var(--hop-fog-600);
417
+ --hop-status-option4-border-hover: var(--hop-fog-500);
418
+ --hop-status-option4-border-press: var(--hop-fog-400);
419
+ --hop-status-option4-border-selected: var(--hop-fog-75);
420
+ --hop-status-option4-icon: var(--hop-fog-800);
421
+ --hop-status-option4-icon-disabled: var(--hop-fog-500);
422
+ --hop-status-option4-icon-hover: var(--hop-fog-900);
423
+ --hop-status-option4-icon-press: var(--hop-fog-800);
424
+ --hop-status-option4-icon-selected: var(--hop-fog-75);
425
+ --hop-status-option4-surface: var(--hop-fog-100);
426
+ --hop-status-option4-surface-disabled: var(--hop-fog-600);
427
+ --hop-status-option4-surface-hover: var(--hop-fog-200);
428
+ --hop-status-option4-surface-press: var(--hop-fog-300);
429
+ --hop-status-option4-surface-selected: var(--hop-fog-800);
430
+ --hop-status-option4-surface-strong: var(--hop-fog-100);
431
+ --hop-status-option4-text: var(--hop-fog-800);
432
+ --hop-status-option4-text-disabled: var(--hop-fog-500);
433
+ --hop-status-option4-text-hover: var(--hop-fog-900);
434
+ --hop-status-option4-text-press: var(--hop-fog-900);
435
+ --hop-status-option4-text-selected: var(--hop-fog-75);
436
+ --hop-status-option5-border: var(--hop-toad-400);
437
+ --hop-status-option5-border-disabled: var(--hop-toad-600);
438
+ --hop-status-option5-border-hover: var(--hop-toad-500);
439
+ --hop-status-option5-border-press: var(--hop-toad-400);
440
+ --hop-status-option5-border-selected: var(--hop-toad-75);
441
+ --hop-status-option5-icon: var(--hop-toad-800);
442
+ --hop-status-option5-icon-disabled: var(--hop-toad-500);
443
+ --hop-status-option5-icon-hover: var(--hop-toad-900);
444
+ --hop-status-option5-icon-press: var(--hop-toad-800);
445
+ --hop-status-option5-icon-selected: var(--hop-toad-75);
446
+ --hop-status-option5-surface: var(--hop-toad-100);
447
+ --hop-status-option5-surface-disabled: var(--hop-toad-800);
448
+ --hop-status-option5-surface-hover: var(--hop-toad-200);
449
+ --hop-status-option5-surface-press: var(--hop-toad-300);
450
+ --hop-status-option5-surface-selected: var(--hop-toad-800);
451
+ --hop-status-option5-surface-strong: var(--hop-toad-100);
452
+ --hop-status-option5-text: var(--hop-toad-800);
453
+ --hop-status-option5-text-disabled: var(--hop-toad-500);
454
+ --hop-status-option5-text-hover: var(--hop-toad-900);
455
+ --hop-status-option5-text-press: var(--hop-toad-800);
456
+ --hop-status-option5-text-selected: var(--hop-toad-75);
457
+ --hop-status-option6-border: var(--hop-sunken-treasure-400);
458
+ --hop-status-option6-border-disabled: var(--hop-sunken-treasure-600);
459
+ --hop-status-option6-border-hover: var(--hop-sunken-treasure-500);
460
+ --hop-status-option6-border-press: var(--hop-sunken-treasure-400);
461
+ --hop-status-option6-border-selected: var(--hop-sunken-treasure-75);
462
+ --hop-status-option6-icon: var(--hop-sunken-treasure-800);
463
+ --hop-status-option6-icon-disabled: var(--hop-sunken-treasure-500);
464
+ --hop-status-option6-icon-hover: var(--hop-sunken-treasure-900);
465
+ --hop-status-option6-icon-press: var(--hop-sunken-treasure-800);
466
+ --hop-status-option6-icon-selected: var(--hop-sunken-treasure-75);
467
+ --hop-status-option6-surface: var(--hop-sunken-treasure-100);
468
+ --hop-status-option6-surface-disabled: var(--hop-sunken-treasure-800);
469
+ --hop-status-option6-surface-hover: var(--hop-sunken-treasure-200);
470
+ --hop-status-option6-surface-press: var(--hop-sunken-treasure-300);
471
+ --hop-status-option6-surface-selected: var(--hop-sunken-treasure-800);
472
+ --hop-status-option6-surface-strong: var(--hop-sunken-treasure-100);
473
+ --hop-status-option6-text: var(--hop-sunken-treasure-800);
474
+ --hop-status-option6-text-disabled: var(--hop-sunken-treasure-500);
475
+ --hop-status-option6-text-hover: var(--hop-sunken-treasure-900);
476
+ --hop-status-option6-text-press: var(--hop-sunken-treasure-800);
477
+ --hop-status-option6-text-selected: var(--hop-sunken-treasure-75);
478
+ --hop-status-positive-border: var(--hop-moss-400);
479
+ --hop-status-positive-border-disabled: var(--hop-moss-800);
480
+ --hop-status-positive-border-hover: var(--hop-moss-500);
481
+ --hop-status-positive-border-press: var(--hop-moss-400);
482
+ --hop-status-positive-border-selected: var(--hop-moss-75);
483
+ --hop-status-positive-icon: var(--hop-moss-800);
484
+ --hop-status-positive-icon-disabled: var(--hop-moss-500);
485
+ --hop-status-positive-icon-hover: var(--hop-moss-900);
486
+ --hop-status-positive-icon-press: var(--hop-moss-800);
487
+ --hop-status-positive-icon-selected: var(--hop-moss-75);
488
+ --hop-status-positive-surface: var(--hop-moss-100);
489
+ --hop-status-positive-surface-disabled: var(--hop-moss-800);
490
+ --hop-status-positive-surface-hover: var(--hop-moss-200);
491
+ --hop-status-positive-surface-press: var(--hop-moss-300);
492
+ --hop-status-positive-surface-selected: var(--hop-moss-800);
493
+ --hop-status-positive-surface-strong: var(--hop-moss-200);
494
+ --hop-status-positive-text: var(--hop-moss-800);
495
+ --hop-status-positive-text-disabled: var(--hop-moss-500);
496
+ --hop-status-positive-text-hover: var(--hop-moss-900);
497
+ --hop-status-positive-text-press: var(--hop-moss-800);
498
+ --hop-status-positive-text-selected: var(--hop-moss-75);
499
+ --hop-status-progress-border: var(--hop-sapphire-400);
500
+ --hop-status-progress-border-disabled: var(--hop-sapphire-600);
501
+ --hop-status-progress-border-hover: var(--hop-sapphire-500);
502
+ --hop-status-progress-border-press: var(--hop-sapphire-400);
503
+ --hop-status-progress-border-selected: var(--hop-sapphire-75);
504
+ --hop-status-progress-icon: var(--hop-sapphire-800);
505
+ --hop-status-progress-icon-disabled: var(--hop-sapphire-500);
506
+ --hop-status-progress-icon-hover: var(--hop-sapphire-900);
507
+ --hop-status-progress-icon-press: var(--hop-sapphire-800);
508
+ --hop-status-progress-icon-selected: var(--hop-sapphire-75);
509
+ --hop-status-progress-surface: var(--hop-sapphire-100);
510
+ --hop-status-progress-surface-disabled: var(--hop-sapphire-800);
511
+ --hop-status-progress-surface-hover: var(--hop-sapphire-200);
512
+ --hop-status-progress-surface-press: var(--hop-sapphire-300);
513
+ --hop-status-progress-surface-selected: var(--hop-sapphire-800);
514
+ --hop-status-progress-surface-strong: var(--hop-sapphire-200);
515
+ --hop-status-progress-text: var(--hop-sapphire-800);
516
+ --hop-status-progress-text-disabled: var(--hop-sapphire-500);
517
+ --hop-status-progress-text-hover: var(--hop-sapphire-900);
518
+ --hop-status-progress-text-press: var(--hop-sapphire-800);
519
+ --hop-status-progress-text-selected: var(--hop-sapphire-75);
520
+ --hop-success-border: var(--hop-moss-500);
521
+ --hop-success-icon: var(--hop-moss-900);
522
+ --hop-success-icon-weakest: var(--hop-moss-200);
523
+ --hop-success-icon-weak: var(--hop-moss-75);
524
+ --hop-success-surface: var(--hop-moss-75);
525
+ --hop-success-surface-strong: var(--hop-moss-300);
526
+ --hop-success-surface-weak: var(--hop-moss-800);
527
+ --hop-success-text: var(--hop-moss-900);
528
+ --hop-success-text-weak: var(--hop-moss-75);
529
+ --hop-success-text-hover: var(--hop-moss-700);
530
+ --hop-warning-border: var(--hop-koi-500);
531
+ --hop-warning-icon: var(--hop-koi-900);
532
+ --hop-warning-icon-weakest: var(--hop-koi-200);
533
+ --hop-warning-icon-weak: var(--hop-koi-75);
534
+ --hop-warning-surface: var(--hop-koi-75);
535
+ --hop-warning-surface-strong: var(--hop-koi-300);
536
+ --hop-warning-surface-weak: var(--hop-koi-800);
537
+ --hop-warning-text: var(--hop-koi-900);
538
+ --hop-warning-text-weak: var(--hop-koi-75);
539
+ --hop-dataviz-unavailable: var(--hop-rock-600);
540
+ --hop-dataviz-unavailable-weak: var(--hop-rock-400);
541
+ --hop-dataviz-unavailable-strong: var(--hop-rock-700);
542
+ --hop-dataviz-text-onlight: var(--hop-rock-800);
543
+ --hop-dataviz-text-ondark: var(--hop-samoyed);
544
+ }