@hopper-ui/tokens 5.2.2 → 5.3.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 +30 -0
  2. package/dist/sharegate/dark/tokens.css +247 -246
  3. package/dist/sharegate/tokens.css +307 -220
  4. package/dist/workleap/dark/tokens.css +1 -0
  5. package/dist/workleap/tokens.css +100 -13
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,35 @@
1
1
  # @hopper-ui/tokens
2
2
 
3
+ ## 5.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 62a9ea1: - Added theme-able typography support for the `Button` component via new `comp-button-text-*` tokens (font, font-weight, text-transform, and per-size font-size / line-height / letter-spacing)
8
+ - Added a new `caption` semantic typography scale (`xl`, `lg`, `md`, `sm`) for both Workleap and ShareGate (light and dark)
9
+ - Added `md` and `xs` sizes for `accent` semantic typography scale (Workleap and ShareGate)
10
+ - Added `accent.md` and `accent.xs` semantic typography sizes (Workleap and ShareGate)
11
+ - Added new core `font.size` tokens: `100` (10px)
12
+ - Added new core `line-height` tokens: `1-1666`, `1-40`
13
+ - Added a new core `letter-spacing` token category with `dense-10`, `dense-5`, `0`, `wide-5`, `wide-10`, `wide-15`, `wide-20`, `wide-25`, `wide-30`
14
+ - Added `letterSpacing` styled-system prop support backed by the new `letter-spacing` core scale, plus a matching `UNSAFE_letterSpacing` escape hatch
15
+ - **BREAKING**: the `letterSpacing` styled-system prop is now restricted to values from the new `letter-spacing` core scale. Consumers passing raw CSS values (e.g. `"2px"`, `"3.5px"`) must migrate to `UNSAFE_letterSpacing` or use a token from the scale.
16
+ - 6980cd4: - Added `comp-tag` branding tokens for Workleap and ShareGate (color, border-radius, typography, text-transform)
17
+ - Wired `Tag` component CSS to the new `comp-tag` tokens (neutral variant, selected, focus, invalid/error states, icon colors, and typography)
18
+
19
+ ### Patch Changes
20
+
21
+ - 6980cd4: Add Tag branding tokens
22
+
23
+ ## 5.2.3
24
+
25
+ ### Patch Changes
26
+
27
+ - a773289: - Updated "rose" core color tokens
28
+ - Added `danger-surface-weak-selected` semantic token (Workleap and ShareGate, light and dark)
29
+ - Updated ShareGate Danger semantic tokens to use the Rose palette
30
+ - Updated ShareGate Status semantic tokens (Neutral, Progress, Positive, Caution, Inactive, Option1–6)
31
+ - Updated ShareGate Button Danger component tokens: background now uses a Rose gradient (`rose.300` → `rose.600`) and the same inset box-shadow as the Primary variant; hover/pressed/selected states converted to single-stop gradients for smooth transitions
32
+
3
33
  ## 5.2.2
4
34
 
5
35
  ### Patch Changes
package/dist/sharegate/dark/tokens.css CHANGED
@@ -6,41 +6,42 @@
6
6
  --hop-danger-surface-weak-active: var(--hop-amanita-600);
7
7
  --hop-danger-text-active: var(--hop-amanita-50);
8
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);
9
+ --hop-danger-border: var(--hop-rose-600);
10
+ --hop-danger-border-selected: var(--hop-rose-300);
11
+ --hop-danger-border-press: var(--hop-rose-400);
12
+ --hop-danger-border-strong: var(--hop-rose-400);
13
+ --hop-danger-icon: var(--hop-rose-75);
14
+ --hop-danger-icon-selected: var(--hop-rose-300);
15
+ --hop-danger-icon-disabled: var(--hop-rose-500);
16
+ --hop-danger-icon-hover: var(--hop-rose-200);
17
+ --hop-danger-icon-press: var(--hop-rose-50);
18
18
  --hop-danger-icon-strong: var(--hop-samoyed);
19
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);
20
+ --hop-danger-icon-weak: var(--hop-rose-300);
21
+ --hop-danger-icon-weak-hover: var(--hop-rose-200);
22
+ --hop-danger-icon-weak-press: var(--hop-rose-100);
23
+ --hop-danger-icon-weakest: var(--hop-rose-700);
24
+ --hop-danger-surface: var(--hop-rose-900);
25
+ --hop-danger-surface-selected: var(--hop-rose-800);
26
+ --hop-danger-surface-disabled: var(--hop-rose-600);
27
+ --hop-danger-surface-hover: var(--hop-rose-200);
28
+ --hop-danger-surface-press: var(--hop-rose-100);
29
+ --hop-danger-surface-strong: var(--hop-rose-300);
30
+ --hop-danger-surface-strong-hover: var(--hop-rose-200);
31
+ --hop-danger-surface-weak: var(--hop-rose-800);
32
+ --hop-danger-surface-weak-hover: var(--hop-rose-700);
33
+ --hop-danger-surface-weak-press: var(--hop-rose-600);
34
+ --hop-danger-surface-weak-selected: var(--hop-rose-600);
35
+ --hop-danger-text: var(--hop-rose-75);
36
+ --hop-danger-text-selected: var(--hop-rose-300);
37
+ --hop-danger-text-disabled: var(--hop-rose-600);
38
+ --hop-danger-text-hover: var(--hop-rose-200);
39
+ --hop-danger-text-press: var(--hop-rose-50);
39
40
  --hop-danger-text-strong: var(--hop-samoyed);
40
41
  --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);
42
+ --hop-danger-text-weak: var(--hop-rose-300);
43
+ --hop-danger-text-weak-hover: var(--hop-rose-200);
44
+ --hop-danger-text-weak-press: var(--hop-rose-100);
44
45
  --hop-neutral-border-active: var(--hop-rock-700);
45
46
  --hop-neutral-icon-active: var(--hop-toad-25);
46
47
  --hop-neutral-icon-weak-active: var(--hop-rock-50);
@@ -308,47 +309,47 @@
308
309
  --hop-secondary-icon-disabled: var(--hop-persimmon-700);
309
310
  --hop-secondary-icon-strong: var(--hop-samoyed);
310
311
  --hop-secondary-icon-strong-hover: var(--hop-samoyed);
311
- --hop-status-caution-border: var(--hop-koi-400);
312
- --hop-status-caution-border-disabled: var(--hop-koi-600);
313
- --hop-status-caution-border-hover: var(--hop-koi-500);
314
- --hop-status-caution-border-press: var(--hop-koi-400);
315
- --hop-status-caution-border-selected: var(--hop-koi-75);
316
- --hop-status-caution-icon: var(--hop-koi-800);
317
- --hop-status-caution-icon-disabled: var(--hop-koi-500);
318
- --hop-status-caution-icon-hover: var(--hop-koi-900);
319
- --hop-status-caution-icon-press: var(--hop-koi-800);
320
- --hop-status-caution-icon-selected: var(--hop-koi-75);
321
- --hop-status-caution-surface: var(--hop-koi-100);
322
- --hop-status-caution-surface-disabled: var(--hop-koi-800);
323
- --hop-status-caution-surface-hover: var(--hop-koi-200);
324
- --hop-status-caution-surface-press: var(--hop-koi-300);
325
- --hop-status-caution-surface-selected: var(--hop-koi-800);
326
- --hop-status-caution-surface-strong: var(--hop-koi-200);
327
- --hop-status-caution-text: var(--hop-koi-800);
328
- --hop-status-caution-text-disabled: var(--hop-koi-500);
329
- --hop-status-caution-text-hover: var(--hop-koi-900);
330
- --hop-status-caution-text-press: var(--hop-koi-800);
331
- --hop-status-caution-text-selected: var(--hop-koi-75);
312
+ --hop-status-caution-border: var(--hop-amber-400);
313
+ --hop-status-caution-border-disabled: var(--hop-amber-800);
314
+ --hop-status-caution-border-hover: var(--hop-amber-300);
315
+ --hop-status-caution-border-press: var(--hop-amber-200);
316
+ --hop-status-caution-border-selected: var(--hop-amber-75);
317
+ --hop-status-caution-icon: var(--hop-amber-100);
318
+ --hop-status-caution-icon-disabled: var(--hop-amber-500);
319
+ --hop-status-caution-icon-hover: var(--hop-amber-75);
320
+ --hop-status-caution-icon-press: var(--hop-amber-50);
321
+ --hop-status-caution-icon-selected: var(--hop-amber-75);
322
+ --hop-status-caution-surface: var(--hop-amber-800);
323
+ --hop-status-caution-surface-disabled: var(--hop-amber-900);
324
+ --hop-status-caution-surface-hover: var(--hop-amber-700);
325
+ --hop-status-caution-surface-press: var(--hop-amber-600);
326
+ --hop-status-caution-surface-selected: var(--hop-amber-800);
327
+ --hop-status-caution-surface-strong: var(--hop-amber-500);
328
+ --hop-status-caution-text: var(--hop-amber-100);
329
+ --hop-status-caution-text-disabled: var(--hop-amber-500);
330
+ --hop-status-caution-text-hover: var(--hop-amber-75);
331
+ --hop-status-caution-text-press: var(--hop-amber-50);
332
+ --hop-status-caution-text-selected: var(--hop-amber-75);
332
333
  --hop-status-inactive-border: var(--hop-rock-400);
333
- --hop-status-inactive-border-disabled: var(--hop-rock-600);
334
- --hop-status-inactive-border-hover: var(--hop-rock-500);
335
- --hop-status-inactive-border-press: var(--hop-rock-400);
334
+ --hop-status-inactive-border-disabled: var(--hop-rock-800);
335
+ --hop-status-inactive-border-hover: var(--hop-rock-300);
336
+ --hop-status-inactive-border-press: var(--hop-rock-200);
336
337
  --hop-status-inactive-border-selected: var(--hop-rock-75);
337
- --hop-status-inactive-icon: var(--hop-rock-800);
338
+ --hop-status-inactive-icon: var(--hop-rock-100);
338
339
  --hop-status-inactive-icon-disabled: var(--hop-rock-500);
339
- --hop-status-inactive-icon-hover: var(--hop-rock-900);
340
- --hop-status-inactive-icon-press: var(--hop-rock-800);
340
+ --hop-status-inactive-icon-hover: var(--hop-rock-75);
341
+ --hop-status-inactive-icon-press: var(--hop-rock-50);
341
342
  --hop-status-inactive-icon-selected: var(--hop-rock-75);
342
- --hop-status-inactive-surface: var(--hop-rock-75);
343
- --hop-status-inactive-surface-disabled: var(--hop-rock-800);
344
- --hop-status-inactive-surface-hover: var(--hop-rock-200);
345
- --hop-status-inactive-surface-press: var(--hop-rock-300);
343
+ --hop-status-inactive-surface: var(--hop-rock-800);
344
+ --hop-status-inactive-surface-disabled: var(--hop-rock-900);
345
+ --hop-status-inactive-surface-hover: var(--hop-rock-700);
346
+ --hop-status-inactive-surface-press: var(--hop-rock-600);
346
347
  --hop-status-inactive-surface-selected: var(--hop-rock-800);
347
- --hop-status-inactive-surface-strong: var(--hop-rock-100);
348
- --hop-status-inactive-text: var(--hop-rock-800);
348
+ --hop-status-inactive-surface-strong: var(--hop-rock-500);
349
+ --hop-status-inactive-text: var(--hop-rock-100);
349
350
  --hop-status-inactive-text-disabled: var(--hop-rock-500);
350
- --hop-status-inactive-text-hover: var(--hop-rock-900);
351
- --hop-status-inactive-text-press: var(--hop-rock-800);
351
+ --hop-status-inactive-text-hover: var(--hop-rock-75);
352
+ --hop-status-inactive-text-press: var(--hop-rock-50);
352
353
  --hop-status-inactive-text-selected: var(--hop-rock-75);
353
354
  --hop-status-negative-border: var(--hop-amanita-400);
354
355
  --hop-status-negative-border-disabled: var(--hop-amanita-600);
@@ -374,211 +375,211 @@
374
375
  --hop-status-neutral-border: var(--hop-rock-25);
375
376
  --hop-status-neutral-border-disabled: var(--hop-rock-800);
376
377
  --hop-status-neutral-border-hover: var(--hop-rock-50);
377
- --hop-status-neutral-border-press: var(--hop-rock-25);
378
+ --hop-status-neutral-border-press: var(--hop-rock-20);
378
379
  --hop-status-neutral-border-selected: var(--hop-rock-25);
379
380
  --hop-status-neutral-icon: var(--hop-rock-25);
380
381
  --hop-status-neutral-icon-disabled: var(--hop-rock-500);
381
382
  --hop-status-neutral-icon-hover: var(--hop-rock-50);
382
- --hop-status-neutral-icon-press: var(--hop-rock-25);
383
- --hop-status-neutral-icon-selected: var(--hop-rock-25);
383
+ --hop-status-neutral-icon-press: var(--hop-rock-20);
384
+ --hop-status-neutral-icon-selected: var(--hop-rock-900);
384
385
  --hop-status-neutral-surface: var(--hop-abyss);
385
386
  --hop-status-neutral-surface-disabled: var(--hop-rock-700);
386
387
  --hop-status-neutral-surface-hover: var(--hop-rock-800);
387
388
  --hop-status-neutral-surface-press: var(--hop-rock-700);
388
- --hop-status-neutral-surface-selected: var(--hop-toad-25);
389
- --hop-status-neutral-surface-strong: var(--hop-rock-100);
389
+ --hop-status-neutral-surface-selected: var(--hop-rock-25);
390
+ --hop-status-neutral-surface-strong: var(--hop-rock-500);
390
391
  --hop-status-neutral-text: var(--hop-rock-25);
391
- --hop-status-neutral-text-disabled: var(--hop-rock-500);
392
+ --hop-status-neutral-text-disabled: var(--hop-rock-300);
392
393
  --hop-status-neutral-text-hover: var(--hop-rock-50);
393
- --hop-status-neutral-text-press: var(--hop-rock-25);
394
+ --hop-status-neutral-text-press: var(--hop-rock-20);
394
395
  --hop-status-neutral-text-selected: var(--hop-rock-900);
395
- --hop-status-option1-border: var(--hop-coastal-400);
396
- --hop-status-option1-border-disabled: var(--hop-coastal-600);
397
- --hop-status-option1-border-hover: var(--hop-coastal-500);
398
- --hop-status-option1-border-press: var(--hop-coastal-400);
399
- --hop-status-option1-border-selected: var(--hop-coastal-75);
400
- --hop-status-option1-icon: var(--hop-coastal-800);
401
- --hop-status-option1-icon-disabled: var(--hop-coastal-500);
402
- --hop-status-option1-icon-hover: var(--hop-coastal-900);
403
- --hop-status-option1-icon-press: var(--hop-coastal-800);
404
- --hop-status-option1-icon-selected: var(--hop-coastal-75);
405
- --hop-status-option1-surface: var(--hop-coastal-100);
406
- --hop-status-option1-surface-disabled: var(--hop-coastal-800);
407
- --hop-status-option1-surface-hover: var(--hop-coastal-200);
408
- --hop-status-option1-surface-press: var(--hop-coastal-300);
409
- --hop-status-option1-surface-selected: var(--hop-coastal-800);
410
- --hop-status-option1-surface-strong: var(--hop-coastal-100);
411
- --hop-status-option1-text: var(--hop-coastal-800);
412
- --hop-status-option1-text-disabled: var(--hop-coastal-500);
413
- --hop-status-option1-text-hover: var(--hop-coastal-900);
414
- --hop-status-option1-text-press: var(--hop-coastal-800);
415
- --hop-status-option1-text-selected: var(--hop-coastal-75);
416
- --hop-status-option2-border: var(--hop-orchid-bloom-300);
417
- --hop-status-option2-border-disabled: var(--hop-orchid-bloom-600);
418
- --hop-status-option2-border-hover: var(--hop-orchid-bloom-500);
419
- --hop-status-option2-border-press: var(--hop-orchid-bloom-300);
420
- --hop-status-option2-border-selected: var(--hop-orchid-bloom-800);
421
- --hop-status-option2-icon: var(--hop-orchid-bloom-800);
422
- --hop-status-option2-icon-disabled: var(--hop-orchid-bloom-500);
423
- --hop-status-option2-icon-hover: var(--hop-orchid-bloom-900);
424
- --hop-status-option2-icon-press: var(--hop-orchid-bloom-800);
425
- --hop-status-option2-icon-selected: var(--hop-orchid-bloom-75);
426
- --hop-status-option2-surface: var(--hop-orchid-bloom-100);
427
- --hop-status-option2-surface-disabled: var(--hop-orchid-bloom-800);
428
- --hop-status-option2-surface-hover: var(--hop-orchid-bloom-200);
429
- --hop-status-option2-surface-press: var(--hop-orchid-bloom-300);
430
- --hop-status-option2-surface-selected: var(--hop-orchid-bloom-800);
431
- --hop-status-option2-surface-strong: var(--hop-orchid-bloom-100);
432
- --hop-status-option2-text: var(--hop-orchid-bloom-800);
433
- --hop-status-option2-text-disabled: var(--hop-orchid-bloom-500);
434
- --hop-status-option2-text-hover: var(--hop-orchid-bloom-900);
435
- --hop-status-option2-text-press: var(--hop-orchid-bloom-800);
436
- --hop-status-option2-text-selected: var(--hop-orchid-bloom-75);
437
- --hop-status-option3-border: var(--hop-quetzal-400);
438
- --hop-status-option3-border-disabled: var(--hop-quetzal-600);
439
- --hop-status-option3-border-hover: var(--hop-quetzal-500);
440
- --hop-status-option3-border-press: var(--hop-quetzal-400);
441
- --hop-status-option3-border-selected: var(--hop-quetzal-75);
442
- --hop-status-option3-icon: var(--hop-quetzal-800);
443
- --hop-status-option3-icon-disabled: var(--hop-quetzal-500);
444
- --hop-status-option3-icon-hover: var(--hop-quetzal-900);
445
- --hop-status-option3-icon-press: var(--hop-quetzal-800);
446
- --hop-status-option3-icon-selected: var(--hop-quetzal-75);
447
- --hop-status-option3-surface: var(--hop-quetzal-100);
448
- --hop-status-option3-surface-disabled: var(--hop-quetzal-800);
449
- --hop-status-option3-surface-hover: var(--hop-quetzal-200);
450
- --hop-status-option3-surface-press: var(--hop-quetzal-300);
451
- --hop-status-option3-surface-selected: var(--hop-quetzal-800);
452
- --hop-status-option3-surface-strong: var(--hop-quetzal-100);
453
- --hop-status-option3-text: var(--hop-quetzal-800);
454
- --hop-status-option3-text-disabled: var(--hop-quetzal-200);
455
- --hop-status-option3-text-hover: var(--hop-quetzal-900);
456
- --hop-status-option3-text-press: var(--hop-quetzal-800);
457
- --hop-status-option3-text-selected: var(--hop-quetzal-75);
396
+ --hop-status-option1-border: var(--hop-iris-400);
397
+ --hop-status-option1-border-disabled: var(--hop-iris-800);
398
+ --hop-status-option1-border-hover: var(--hop-iris-300);
399
+ --hop-status-option1-border-press: var(--hop-iris-200);
400
+ --hop-status-option1-border-selected: var(--hop-iris-75);
401
+ --hop-status-option1-icon: var(--hop-iris-100);
402
+ --hop-status-option1-icon-disabled: var(--hop-iris-500);
403
+ --hop-status-option1-icon-hover: var(--hop-iris-75);
404
+ --hop-status-option1-icon-press: var(--hop-iris-50);
405
+ --hop-status-option1-icon-selected: var(--hop-iris-75);
406
+ --hop-status-option1-surface: var(--hop-iris-800);
407
+ --hop-status-option1-surface-disabled: var(--hop-iris-900);
408
+ --hop-status-option1-surface-hover: var(--hop-iris-700);
409
+ --hop-status-option1-surface-press: var(--hop-iris-600);
410
+ --hop-status-option1-surface-selected: var(--hop-iris-800);
411
+ --hop-status-option1-surface-strong: var(--hop-iris-500);
412
+ --hop-status-option1-text: var(--hop-iris-100);
413
+ --hop-status-option1-text-disabled: var(--hop-iris-500);
414
+ --hop-status-option1-text-hover: var(--hop-iris-75);
415
+ --hop-status-option1-text-press: var(--hop-iris-50);
416
+ --hop-status-option1-text-selected: var(--hop-iris-75);
417
+ --hop-status-option2-border: var(--hop-persimmon-400);
418
+ --hop-status-option2-border-disabled: var(--hop-persimmon-800);
419
+ --hop-status-option2-border-hover: var(--hop-persimmon-300);
420
+ --hop-status-option2-border-press: var(--hop-persimmon-200);
421
+ --hop-status-option2-border-selected: var(--hop-persimmon-75);
422
+ --hop-status-option2-icon: var(--hop-persimmon-100);
423
+ --hop-status-option2-icon-disabled: var(--hop-persimmon-500);
424
+ --hop-status-option2-icon-hover: var(--hop-persimmon-75);
425
+ --hop-status-option2-icon-press: var(--hop-persimmon-50);
426
+ --hop-status-option2-icon-selected: var(--hop-persimmon-75);
427
+ --hop-status-option2-surface: var(--hop-persimmon-800);
428
+ --hop-status-option2-surface-disabled: var(--hop-persimmon-900);
429
+ --hop-status-option2-surface-hover: var(--hop-persimmon-700);
430
+ --hop-status-option2-surface-press: var(--hop-persimmon-600);
431
+ --hop-status-option2-surface-selected: var(--hop-persimmon-800);
432
+ --hop-status-option2-surface-strong: var(--hop-persimmon-500);
433
+ --hop-status-option2-text: var(--hop-persimmon-100);
434
+ --hop-status-option2-text-disabled: var(--hop-persimmon-500);
435
+ --hop-status-option2-text-hover: var(--hop-persimmon-75);
436
+ --hop-status-option2-text-press: var(--hop-persimmon-50);
437
+ --hop-status-option2-text-selected: var(--hop-persimmon-75);
438
+ --hop-status-option3-border: var(--hop-moss-400);
439
+ --hop-status-option3-border-disabled: var(--hop-moss-800);
440
+ --hop-status-option3-border-hover: var(--hop-moss-300);
441
+ --hop-status-option3-border-press: var(--hop-moss-200);
442
+ --hop-status-option3-border-selected: var(--hop-moss-75);
443
+ --hop-status-option3-icon: var(--hop-moss-100);
444
+ --hop-status-option3-icon-disabled: var(--hop-moss-500);
445
+ --hop-status-option3-icon-hover: var(--hop-moss-75);
446
+ --hop-status-option3-icon-press: var(--hop-moss-50);
447
+ --hop-status-option3-icon-selected: var(--hop-moss-75);
448
+ --hop-status-option3-surface: var(--hop-moss-800);
449
+ --hop-status-option3-surface-disabled: var(--hop-moss-900);
450
+ --hop-status-option3-surface-hover: var(--hop-moss-700);
451
+ --hop-status-option3-surface-press: var(--hop-moss-600);
452
+ --hop-status-option3-surface-selected: var(--hop-moss-800);
453
+ --hop-status-option3-surface-strong: var(--hop-moss-500);
454
+ --hop-status-option3-text: var(--hop-moss-100);
455
+ --hop-status-option3-text-disabled: var(--hop-moss-500);
456
+ --hop-status-option3-text-hover: var(--hop-moss-75);
457
+ --hop-status-option3-text-press: var(--hop-moss-50);
458
+ --hop-status-option3-text-selected: var(--hop-moss-75);
458
459
  --hop-status-option4-border: var(--hop-fog-400);
459
- --hop-status-option4-border-disabled: var(--hop-fog-600);
460
- --hop-status-option4-border-hover: var(--hop-fog-500);
461
- --hop-status-option4-border-press: var(--hop-fog-400);
460
+ --hop-status-option4-border-disabled: var(--hop-fog-800);
461
+ --hop-status-option4-border-hover: var(--hop-fog-300);
462
+ --hop-status-option4-border-press: var(--hop-fog-200);
462
463
  --hop-status-option4-border-selected: var(--hop-fog-75);
463
- --hop-status-option4-icon: var(--hop-fog-800);
464
+ --hop-status-option4-icon: var(--hop-fog-100);
464
465
  --hop-status-option4-icon-disabled: var(--hop-fog-500);
465
- --hop-status-option4-icon-hover: var(--hop-fog-900);
466
- --hop-status-option4-icon-press: var(--hop-fog-800);
466
+ --hop-status-option4-icon-hover: var(--hop-fog-75);
467
+ --hop-status-option4-icon-press: var(--hop-fog-50);
467
468
  --hop-status-option4-icon-selected: var(--hop-fog-75);
468
- --hop-status-option4-surface: var(--hop-fog-100);
469
- --hop-status-option4-surface-disabled: var(--hop-fog-600);
470
- --hop-status-option4-surface-hover: var(--hop-fog-200);
471
- --hop-status-option4-surface-press: var(--hop-fog-300);
469
+ --hop-status-option4-surface: var(--hop-fog-800);
470
+ --hop-status-option4-surface-disabled: var(--hop-fog-900);
471
+ --hop-status-option4-surface-hover: var(--hop-fog-700);
472
+ --hop-status-option4-surface-press: var(--hop-fog-600);
472
473
  --hop-status-option4-surface-selected: var(--hop-fog-800);
473
- --hop-status-option4-surface-strong: var(--hop-fog-100);
474
- --hop-status-option4-text: var(--hop-fog-800);
474
+ --hop-status-option4-surface-strong: var(--hop-fog-500);
475
+ --hop-status-option4-text: var(--hop-fog-100);
475
476
  --hop-status-option4-text-disabled: var(--hop-fog-500);
476
- --hop-status-option4-text-hover: var(--hop-fog-900);
477
- --hop-status-option4-text-press: var(--hop-fog-900);
477
+ --hop-status-option4-text-hover: var(--hop-fog-75);
478
+ --hop-status-option4-text-press: var(--hop-fog-50);
478
479
  --hop-status-option4-text-selected: var(--hop-fog-75);
479
480
  --hop-status-option5-border: var(--hop-toad-400);
480
- --hop-status-option5-border-disabled: var(--hop-toad-600);
481
- --hop-status-option5-border-hover: var(--hop-toad-500);
482
- --hop-status-option5-border-press: var(--hop-toad-400);
481
+ --hop-status-option5-border-disabled: var(--hop-toad-800);
482
+ --hop-status-option5-border-hover: var(--hop-toad-300);
483
+ --hop-status-option5-border-press: var(--hop-toad-200);
483
484
  --hop-status-option5-border-selected: var(--hop-toad-75);
484
- --hop-status-option5-icon: var(--hop-toad-800);
485
+ --hop-status-option5-icon: var(--hop-toad-100);
485
486
  --hop-status-option5-icon-disabled: var(--hop-toad-500);
486
- --hop-status-option5-icon-hover: var(--hop-toad-900);
487
- --hop-status-option5-icon-press: var(--hop-toad-800);
487
+ --hop-status-option5-icon-hover: var(--hop-toad-75);
488
+ --hop-status-option5-icon-press: var(--hop-toad-50);
488
489
  --hop-status-option5-icon-selected: var(--hop-toad-75);
489
- --hop-status-option5-surface: var(--hop-toad-100);
490
- --hop-status-option5-surface-disabled: var(--hop-toad-800);
491
- --hop-status-option5-surface-hover: var(--hop-toad-200);
492
- --hop-status-option5-surface-press: var(--hop-toad-300);
490
+ --hop-status-option5-surface: var(--hop-toad-800);
491
+ --hop-status-option5-surface-disabled: var(--hop-toad-900);
492
+ --hop-status-option5-surface-hover: var(--hop-toad-700);
493
+ --hop-status-option5-surface-press: var(--hop-toad-600);
493
494
  --hop-status-option5-surface-selected: var(--hop-toad-800);
494
- --hop-status-option5-surface-strong: var(--hop-toad-100);
495
- --hop-status-option5-text: var(--hop-toad-800);
495
+ --hop-status-option5-surface-strong: var(--hop-toad-500);
496
+ --hop-status-option5-text: var(--hop-toad-100);
496
497
  --hop-status-option5-text-disabled: var(--hop-toad-500);
497
- --hop-status-option5-text-hover: var(--hop-toad-900);
498
- --hop-status-option5-text-press: var(--hop-toad-800);
498
+ --hop-status-option5-text-hover: var(--hop-toad-75);
499
+ --hop-status-option5-text-press: var(--hop-toad-50);
499
500
  --hop-status-option5-text-selected: var(--hop-toad-75);
500
- --hop-status-option6-border: var(--hop-sunken-treasure-400);
501
- --hop-status-option6-border-disabled: var(--hop-sunken-treasure-600);
502
- --hop-status-option6-border-hover: var(--hop-sunken-treasure-500);
503
- --hop-status-option6-border-press: var(--hop-sunken-treasure-400);
504
- --hop-status-option6-border-selected: var(--hop-sunken-treasure-75);
505
- --hop-status-option6-icon: var(--hop-sunken-treasure-800);
506
- --hop-status-option6-icon-disabled: var(--hop-sunken-treasure-500);
507
- --hop-status-option6-icon-hover: var(--hop-sunken-treasure-900);
508
- --hop-status-option6-icon-press: var(--hop-sunken-treasure-800);
509
- --hop-status-option6-icon-selected: var(--hop-sunken-treasure-75);
510
- --hop-status-option6-surface: var(--hop-sunken-treasure-100);
511
- --hop-status-option6-surface-disabled: var(--hop-sunken-treasure-800);
512
- --hop-status-option6-surface-hover: var(--hop-sunken-treasure-200);
513
- --hop-status-option6-surface-press: var(--hop-sunken-treasure-300);
514
- --hop-status-option6-surface-selected: var(--hop-sunken-treasure-800);
515
- --hop-status-option6-surface-strong: var(--hop-sunken-treasure-100);
516
- --hop-status-option6-text: var(--hop-sunken-treasure-800);
517
- --hop-status-option6-text-disabled: var(--hop-sunken-treasure-500);
518
- --hop-status-option6-text-hover: var(--hop-sunken-treasure-900);
519
- --hop-status-option6-text-press: var(--hop-sunken-treasure-800);
520
- --hop-status-option6-text-selected: var(--hop-sunken-treasure-75);
521
- --hop-status-positive-border: var(--hop-moss-400);
522
- --hop-status-positive-border-disabled: var(--hop-moss-800);
523
- --hop-status-positive-border-hover: var(--hop-moss-500);
524
- --hop-status-positive-border-press: var(--hop-moss-400);
525
- --hop-status-positive-border-selected: var(--hop-moss-75);
526
- --hop-status-positive-icon: var(--hop-moss-800);
527
- --hop-status-positive-icon-disabled: var(--hop-moss-500);
528
- --hop-status-positive-icon-hover: var(--hop-moss-900);
529
- --hop-status-positive-icon-press: var(--hop-moss-800);
530
- --hop-status-positive-icon-selected: var(--hop-moss-75);
531
- --hop-status-positive-surface: var(--hop-moss-100);
532
- --hop-status-positive-surface-disabled: var(--hop-moss-800);
533
- --hop-status-positive-surface-hover: var(--hop-moss-200);
534
- --hop-status-positive-surface-press: var(--hop-moss-300);
535
- --hop-status-positive-surface-selected: var(--hop-moss-800);
536
- --hop-status-positive-surface-strong: var(--hop-moss-200);
537
- --hop-status-positive-text: var(--hop-moss-800);
538
- --hop-status-positive-text-disabled: var(--hop-moss-500);
539
- --hop-status-positive-text-hover: var(--hop-moss-900);
540
- --hop-status-positive-text-press: var(--hop-moss-800);
541
- --hop-status-positive-text-selected: var(--hop-moss-75);
542
- --hop-status-progress-border: var(--hop-sapphire-400);
543
- --hop-status-progress-border-disabled: var(--hop-sapphire-600);
544
- --hop-status-progress-border-hover: var(--hop-sapphire-500);
545
- --hop-status-progress-border-press: var(--hop-sapphire-400);
546
- --hop-status-progress-border-selected: var(--hop-sapphire-75);
547
- --hop-status-progress-icon: var(--hop-sapphire-800);
548
- --hop-status-progress-icon-disabled: var(--hop-sapphire-500);
549
- --hop-status-progress-icon-hover: var(--hop-sapphire-900);
550
- --hop-status-progress-icon-press: var(--hop-sapphire-800);
551
- --hop-status-progress-icon-selected: var(--hop-sapphire-75);
552
- --hop-status-progress-surface: var(--hop-sapphire-100);
553
- --hop-status-progress-surface-disabled: var(--hop-sapphire-800);
554
- --hop-status-progress-surface-hover: var(--hop-sapphire-200);
555
- --hop-status-progress-surface-press: var(--hop-sapphire-300);
556
- --hop-status-progress-surface-selected: var(--hop-sapphire-800);
557
- --hop-status-progress-surface-strong: var(--hop-sapphire-200);
558
- --hop-status-progress-text: var(--hop-sapphire-800);
559
- --hop-status-progress-text-disabled: var(--hop-sapphire-500);
560
- --hop-status-progress-text-hover: var(--hop-sapphire-900);
561
- --hop-status-progress-text-press: var(--hop-sapphire-800);
562
- --hop-status-progress-text-selected: var(--hop-sapphire-75);
563
- --hop-success-border: var(--hop-moss-600);
564
- --hop-success-icon: var(--hop-moss-75);
565
- --hop-success-icon-weakest: var(--hop-moss-600);
566
- --hop-success-icon-weak: var(--hop-moss-400);
567
- --hop-success-surface: var(--hop-moss-900);
568
- --hop-success-surface-strong: var(--hop-moss-600);
569
- --hop-success-surface-weak: var(--hop-moss-800);
570
- --hop-success-text: var(--hop-moss-75);
571
- --hop-success-text-weak: var(--hop-moss-400);
572
- --hop-success-text-hover: var(--hop-moss-50);
573
- --hop-warning-border: var(--hop-koi-600);
574
- --hop-warning-icon: var(--hop-koi-75);
575
- --hop-warning-icon-weakest: var(--hop-koi-600);
576
- --hop-warning-icon-weak: var(--hop-koi-400);
577
- --hop-warning-surface: var(--hop-koi-900);
578
- --hop-warning-surface-strong: var(--hop-koi-600);
579
- --hop-warning-surface-weak: var(--hop-koi-800);
580
- --hop-warning-text: var(--hop-koi-75);
581
- --hop-warning-text-weak: var(--hop-koi-400);
501
+ --hop-status-option6-border: var(--hop-limeburst-400);
502
+ --hop-status-option6-border-disabled: var(--hop-limeburst-800);
503
+ --hop-status-option6-border-hover: var(--hop-limeburst-300);
504
+ --hop-status-option6-border-press: var(--hop-limeburst-200);
505
+ --hop-status-option6-border-selected: var(--hop-limeburst-75);
506
+ --hop-status-option6-icon: var(--hop-limeburst-100);
507
+ --hop-status-option6-icon-disabled: var(--hop-limeburst-500);
508
+ --hop-status-option6-icon-hover: var(--hop-limeburst-75);
509
+ --hop-status-option6-icon-press: var(--hop-limeburst-50);
510
+ --hop-status-option6-icon-selected: var(--hop-limeburst-75);
511
+ --hop-status-option6-surface: var(--hop-limeburst-800);
512
+ --hop-status-option6-surface-disabled: var(--hop-limeburst-900);
513
+ --hop-status-option6-surface-hover: var(--hop-limeburst-700);
514
+ --hop-status-option6-surface-press: var(--hop-limeburst-600);
515
+ --hop-status-option6-surface-selected: var(--hop-limeburst-800);
516
+ --hop-status-option6-surface-strong: var(--hop-limeburst-500);
517
+ --hop-status-option6-text: var(--hop-limeburst-100);
518
+ --hop-status-option6-text-disabled: var(--hop-limeburst-500);
519
+ --hop-status-option6-text-hover: var(--hop-limeburst-75);
520
+ --hop-status-option6-text-press: var(--hop-limeburst-50);
521
+ --hop-status-option6-text-selected: var(--hop-limeburst-75);
522
+ --hop-status-positive-border: var(--hop-mint-400);
523
+ --hop-status-positive-border-disabled: var(--hop-mint-800);
524
+ --hop-status-positive-border-hover: var(--hop-mint-300);
525
+ --hop-status-positive-border-press: var(--hop-mint-200);
526
+ --hop-status-positive-border-selected: var(--hop-mint-75);
527
+ --hop-status-positive-icon: var(--hop-mint-100);
528
+ --hop-status-positive-icon-disabled: var(--hop-mint-500);
529
+ --hop-status-positive-icon-hover: var(--hop-mint-75);
530
+ --hop-status-positive-icon-press: var(--hop-mint-50);
531
+ --hop-status-positive-icon-selected: var(--hop-mint-75);
532
+ --hop-status-positive-surface: var(--hop-mint-800);
533
+ --hop-status-positive-surface-disabled: var(--hop-mint-900);
534
+ --hop-status-positive-surface-hover: var(--hop-mint-700);
535
+ --hop-status-positive-surface-press: var(--hop-mint-600);
536
+ --hop-status-positive-surface-selected: var(--hop-mint-800);
537
+ --hop-status-positive-surface-strong: var(--hop-mint-500);
538
+ --hop-status-positive-text: var(--hop-mint-100);
539
+ --hop-status-positive-text-disabled: var(--hop-mint-500);
540
+ --hop-status-positive-text-hover: var(--hop-mint-75);
541
+ --hop-status-positive-text-press: var(--hop-mint-50);
542
+ --hop-status-positive-text-selected: var(--hop-mint-75);
543
+ --hop-status-progress-border: var(--hop-cobalt-400);
544
+ --hop-status-progress-border-disabled: var(--hop-cobalt-800);
545
+ --hop-status-progress-border-hover: var(--hop-cobalt-300);
546
+ --hop-status-progress-border-press: var(--hop-cobalt-200);
547
+ --hop-status-progress-border-selected: var(--hop-cobalt-75);
548
+ --hop-status-progress-icon: var(--hop-cobalt-100);
549
+ --hop-status-progress-icon-disabled: var(--hop-cobalt-500);
550
+ --hop-status-progress-icon-hover: var(--hop-cobalt-75);
551
+ --hop-status-progress-icon-press: var(--hop-cobalt-50);
552
+ --hop-status-progress-icon-selected: var(--hop-cobalt-75);
553
+ --hop-status-progress-surface: var(--hop-cobalt-800);
554
+ --hop-status-progress-surface-disabled: var(--hop-cobalt-900);
555
+ --hop-status-progress-surface-hover: var(--hop-cobalt-700);
556
+ --hop-status-progress-surface-press: var(--hop-cobalt-600);
557
+ --hop-status-progress-surface-selected: var(--hop-cobalt-800);
558
+ --hop-status-progress-surface-strong: var(--hop-cobalt-500);
559
+ --hop-status-progress-text: var(--hop-cobalt-100);
560
+ --hop-status-progress-text-disabled: var(--hop-cobalt-500);
561
+ --hop-status-progress-text-hover: var(--hop-cobalt-75);
562
+ --hop-status-progress-text-press: var(--hop-cobalt-50);
563
+ --hop-status-progress-text-selected: var(--hop-cobalt-75);
564
+ --hop-success-border: var(--hop-mint-600);
565
+ --hop-success-icon: var(--hop-mint-75);
566
+ --hop-success-icon-weakest: var(--hop-mint-600);
567
+ --hop-success-icon-weak: var(--hop-mint-400);
568
+ --hop-success-surface: var(--hop-mint-900);
569
+ --hop-success-surface-strong: var(--hop-mint-600);
570
+ --hop-success-surface-weak: var(--hop-mint-800);
571
+ --hop-success-text: var(--hop-mint-75);
572
+ --hop-success-text-weak: var(--hop-mint-400);
573
+ --hop-success-text-hover: var(--hop-mint-50);
574
+ --hop-warning-border: var(--hop-amber-600);
575
+ --hop-warning-icon: var(--hop-amber-75);
576
+ --hop-warning-icon-weakest: var(--hop-amber-600);
577
+ --hop-warning-icon-weak: var(--hop-amber-400);
578
+ --hop-warning-surface: var(--hop-amber-900);
579
+ --hop-warning-surface-strong: var(--hop-amber-600);
580
+ --hop-warning-surface-weak: var(--hop-amber-800);
581
+ --hop-warning-text: var(--hop-amber-75);
582
+ --hop-warning-text-weak: var(--hop-amber-400);
582
583
  --hop-dataviz-unavailable: var(--hop-rock-600);
583
584
  --hop-dataviz-unavailable-weak: var(--hop-rock-400);
584
585
  --hop-dataviz-unavailable-strong: var(--hop-rock-700);