@hopper-ui/tokens 4.0.2 → 4.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 (4) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/dark/tokens.css +237 -33
  3. package/dist/tokens.css +231 -27
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @hopper-ui/tokens
2
2
 
3
+ ## 4.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - d689dd8: Added new status tokens - updated some status tokens
8
+
3
9
  ## 4.0.2
4
10
 
5
11
  ### Patch Changes
package/dist/dark/tokens.css CHANGED
@@ -261,54 +261,258 @@
261
261
  --hop-information-surface-weak: var(--hop-coastal-800);
262
262
  --hop-information-text: var(--hop-coastal-900);
263
263
  --hop-information-text-weak: var(--hop-coastal-75);
264
- --hop-status-caution-icon: var(--hop-koi-900);
265
- --hop-status-caution-surface: var(--hop-koi-75);
264
+ --hop-status-caution-border: var(--hop-koi-400);
265
+ --hop-status-caution-border-disabled: var(--hop-koi-600);
266
+ --hop-status-caution-border-hover: var(--hop-koi-500);
267
+ --hop-status-caution-border-press: var(--hop-koi-400);
268
+ --hop-status-caution-border-selected: var(--hop-koi-75);
269
+ --hop-status-caution-icon: var(--hop-koi-800);
270
+ --hop-status-caution-icon-disabled: var(--hop-koi-500);
271
+ --hop-status-caution-icon-hover: var(--hop-koi-900);
272
+ --hop-status-caution-icon-press: var(--hop-koi-800);
273
+ --hop-status-caution-icon-selected: var(--hop-koi-75);
274
+ --hop-status-caution-surface: var(--hop-koi-100);
275
+ --hop-status-caution-surface-disabled: var(--hop-koi-800);
276
+ --hop-status-caution-surface-hover: var(--hop-koi-200);
277
+ --hop-status-caution-surface-press: var(--hop-koi-300);
278
+ --hop-status-caution-surface-selected: var(--hop-koi-800);
266
279
  --hop-status-caution-surface-strong: var(--hop-koi-200);
267
- --hop-status-caution-text: var(--hop-koi-900);
268
- --hop-status-inselected-icon: var(--hop-rock-800);
269
- --hop-status-inselected-surface: var(--hop-rock-75);
270
- --hop-status-inselected-surface-strong: var(--hop-rock-100);
271
- --hop-status-inselected-text: var(--hop-rock-900);
272
- --hop-status-negative-icon: var(--hop-amanita-900);
273
- --hop-status-negative-surface: var(--hop-amanita-75);
280
+ --hop-status-caution-text: var(--hop-koi-800);
281
+ --hop-status-caution-text-disabled: var(--hop-koi-500);
282
+ --hop-status-caution-text-hover: var(--hop-koi-900);
283
+ --hop-status-caution-text-press: var(--hop-koi-800);
284
+ --hop-status-caution-text-selected: var(--hop-koi-75);
285
+ --hop-status-inactive-border: var(--hop-rock-400);
286
+ --hop-status-inactive-border-disabled: var(--hop-rock-600);
287
+ --hop-status-inactive-border-hover: var(--hop-rock-500);
288
+ --hop-status-inactive-border-press: var(--hop-rock-400);
289
+ --hop-status-inactive-border-selected: var(--hop-rock-75);
290
+ --hop-status-inactive-icon: var(--hop-rock-800);
291
+ --hop-status-inactive-icon-disabled: var(--hop-rock-500);
292
+ --hop-status-inactive-icon-hover: var(--hop-rock-900);
293
+ --hop-status-inactive-icon-press: var(--hop-rock-800);
294
+ --hop-status-inactive-icon-selected: var(--hop-rock-75);
295
+ --hop-status-inactive-surface: var(--hop-rock-75);
296
+ --hop-status-inactive-surface-disabled: var(--hop-rock-800);
297
+ --hop-status-inactive-surface-hover: var(--hop-rock-200);
298
+ --hop-status-inactive-surface-press: var(--hop-rock-300);
299
+ --hop-status-inactive-surface-selected: var(--hop-rock-800);
300
+ --hop-status-inactive-surface-strong: var(--hop-rock-100);
301
+ --hop-status-inactive-text: var(--hop-rock-800);
302
+ --hop-status-inactive-text-disabled: var(--hop-rock-500);
303
+ --hop-status-inactive-text-hover: var(--hop-rock-900);
304
+ --hop-status-inactive-text-press: var(--hop-rock-800);
305
+ --hop-status-inactive-text-selected: var(--hop-rock-75);
306
+ --hop-status-negative-border: var(--hop-amanita-400);
307
+ --hop-status-negative-border-disabled: var(--hop-amanita-600);
308
+ --hop-status-negative-border-hover: var(--hop-amanita-500);
309
+ --hop-status-negative-border-press: var(--hop-amanita-400);
310
+ --hop-status-negative-border-selected: var(--hop-amanita-75);
311
+ --hop-status-negative-icon: var(--hop-amanita-800);
312
+ --hop-status-negative-icon-disabled: var(--hop-amanita-500);
313
+ --hop-status-negative-icon-hover: var(--hop-amanita-900);
314
+ --hop-status-negative-icon-press: var(--hop-amanita-800);
315
+ --hop-status-negative-icon-selected: var(--hop-amanita-75);
316
+ --hop-status-negative-surface: var(--hop-amanita-100);
317
+ --hop-status-negative-surface-disabled: var(--hop-amanita-800);
318
+ --hop-status-negative-surface-hover: var(--hop-amanita-200);
319
+ --hop-status-negative-surface-press: var(--hop-amanita-300);
320
+ --hop-status-negative-surface-selected: var(--hop-amanita-800);
274
321
  --hop-status-negative-surface-strong: var(--hop-amanita-200);
275
- --hop-status-negative-text: var(--hop-amanita-900);
322
+ --hop-status-negative-text: var(--hop-amanita-800);
323
+ --hop-status-negative-text-disabled: var(--hop-amanita-500);
324
+ --hop-status-negative-text-hover: var(--hop-amanita-900);
325
+ --hop-status-negative-text-press: var(--hop-amanita-800);
326
+ --hop-status-negative-text-selected: var(--hop-amanita-75);
327
+ --hop-status-neutral-border: var(--hop-rock-25);
328
+ --hop-status-neutral-border-disabled: var(--hop-rock-800);
329
+ --hop-status-neutral-border-hover: var(--hop-rock-50);
330
+ --hop-status-neutral-border-press: var(--hop-rock-25);
331
+ --hop-status-neutral-border-selected: var(--hop-rock-25);
276
332
  --hop-status-neutral-icon: var(--hop-rock-25);
333
+ --hop-status-neutral-icon-disabled: var(--hop-rock-500);
334
+ --hop-status-neutral-icon-hover: var(--hop-rock-50);
335
+ --hop-status-neutral-icon-press: var(--hop-rock-25);
336
+ --hop-status-neutral-icon-selected: var(--hop-rock-25);
277
337
  --hop-status-neutral-surface: var(--hop-abyss);
338
+ --hop-status-neutral-surface-disabled: var(--hop-rock-700);
339
+ --hop-status-neutral-surface-hover: var(--hop-rock-800);
340
+ --hop-status-neutral-surface-press: var(--hop-rock-700);
341
+ --hop-status-neutral-surface-selected: var(--hop-toad-25);
278
342
  --hop-status-neutral-surface-strong: var(--hop-rock-100);
279
343
  --hop-status-neutral-text: var(--hop-rock-25);
280
- --hop-status-option1-icon: var(--hop-coastal-900);
281
- --hop-status-option1-surface: var(--hop-coastal-200);
344
+ --hop-status-neutral-text-disabled: var(--hop-rock-500);
345
+ --hop-status-neutral-text-hover: var(--hop-rock-50);
346
+ --hop-status-neutral-text-press: var(--hop-rock-25);
347
+ --hop-status-neutral-text-selected: var(--hop-rock-900);
348
+ --hop-status-option1-border: var(--hop-coastal-400);
349
+ --hop-status-option1-border-disabled: var(--hop-coastal-600);
350
+ --hop-status-option1-border-hover: var(--hop-coastal-500);
351
+ --hop-status-option1-border-press: var(--hop-coastal-400);
352
+ --hop-status-option1-border-selected: var(--hop-coastal-75);
353
+ --hop-status-option1-icon: var(--hop-coastal-800);
354
+ --hop-status-option1-icon-disabled: var(--hop-coastal-500);
355
+ --hop-status-option1-icon-hover: var(--hop-coastal-900);
356
+ --hop-status-option1-icon-press: var(--hop-coastal-800);
357
+ --hop-status-option1-icon-selected: var(--hop-coastal-75);
358
+ --hop-status-option1-surface: var(--hop-coastal-100);
359
+ --hop-status-option1-surface-disabled: var(--hop-coastal-800);
360
+ --hop-status-option1-surface-hover: var(--hop-coastal-200);
361
+ --hop-status-option1-surface-press: var(--hop-coastal-300);
362
+ --hop-status-option1-surface-selected: var(--hop-coastal-800);
282
363
  --hop-status-option1-surface-strong: var(--hop-coastal-100);
283
- --hop-status-option1-text: var(--hop-coastal-900);
284
- --hop-status-option2-icon: var(--hop-orchid-bloom-900);
285
- --hop-status-option2-surface: var(--hop-orchid-bloom-200);
364
+ --hop-status-option1-text: var(--hop-coastal-800);
365
+ --hop-status-option1-text-disabled: var(--hop-coastal-500);
366
+ --hop-status-option1-text-hover: var(--hop-coastal-900);
367
+ --hop-status-option1-text-press: var(--hop-coastal-800);
368
+ --hop-status-option1-text-selected: var(--hop-coastal-75);
369
+ --hop-status-option2-border: var(--hop-orchid-bloom-300);
370
+ --hop-status-option2-border-disabled: var(--hop-orchid-bloom-600);
371
+ --hop-status-option2-border-hover: var(--hop-orchid-bloom-500);
372
+ --hop-status-option2-border-press: var(--hop-orchid-bloom-300);
373
+ --hop-status-option2-border-selected: var(--hop-orchid-bloom-800);
374
+ --hop-status-option2-icon: var(--hop-orchid-bloom-800);
375
+ --hop-status-option2-icon-disabled: var(--hop-orchid-bloom-500);
376
+ --hop-status-option2-icon-hover: var(--hop-orchid-bloom-900);
377
+ --hop-status-option2-icon-press: var(--hop-orchid-bloom-800);
378
+ --hop-status-option2-icon-selected: var(--hop-orchid-bloom-75);
379
+ --hop-status-option2-surface: var(--hop-orchid-bloom-100);
380
+ --hop-status-option2-surface-disabled: var(--hop-orchid-bloom-800);
381
+ --hop-status-option2-surface-hover: var(--hop-orchid-bloom-200);
382
+ --hop-status-option2-surface-press: var(--hop-orchid-bloom-300);
383
+ --hop-status-option2-surface-selected: var(--hop-orchid-bloom-800);
286
384
  --hop-status-option2-surface-strong: var(--hop-orchid-bloom-100);
287
- --hop-status-option2-text: var(--hop-orchid-bloom-900);
288
- --hop-status-option3-icon: var(--hop-quetzal-900);
289
- --hop-status-option3-surface: var(--hop-quetzal-200);
385
+ --hop-status-option2-text: var(--hop-orchid-bloom-800);
386
+ --hop-status-option2-text-disabled: var(--hop-orchid-bloom-500);
387
+ --hop-status-option2-text-hover: var(--hop-orchid-bloom-900);
388
+ --hop-status-option2-text-press: var(--hop-orchid-bloom-800);
389
+ --hop-status-option2-text-selected: var(--hop-orchid-bloom-75);
390
+ --hop-status-option3-border: var(--hop-quetzal-400);
391
+ --hop-status-option3-border-disabled: var(--hop-quetzal-600);
392
+ --hop-status-option3-border-hover: var(--hop-quetzal-500);
393
+ --hop-status-option3-border-press: var(--hop-quetzal-400);
394
+ --hop-status-option3-border-selected: var(--hop-quetzal-75);
395
+ --hop-status-option3-icon: var(--hop-quetzal-800);
396
+ --hop-status-option3-icon-disabled: var(--hop-quetzal-500);
397
+ --hop-status-option3-icon-hover: var(--hop-quetzal-900);
398
+ --hop-status-option3-icon-press: var(--hop-quetzal-800);
399
+ --hop-status-option3-icon-selected: var(--hop-quetzal-75);
400
+ --hop-status-option3-surface: var(--hop-quetzal-100);
401
+ --hop-status-option3-surface-disabled: var(--hop-quetzal-800);
402
+ --hop-status-option3-surface-hover: var(--hop-quetzal-200);
403
+ --hop-status-option3-surface-press: var(--hop-quetzal-300);
404
+ --hop-status-option3-surface-selected: var(--hop-quetzal-800);
290
405
  --hop-status-option3-surface-strong: var(--hop-quetzal-100);
291
- --hop-status-option3-text: var(--hop-quetzal-900);
292
- --hop-status-option4-icon: var(--hop-fog-900);
293
- --hop-status-option4-surface: var(--hop-fog-200);
406
+ --hop-status-option3-text: var(--hop-quetzal-800);
407
+ --hop-status-option3-text-disabled: var(--hop-quetzal-200);
408
+ --hop-status-option3-text-hover: var(--hop-quetzal-900);
409
+ --hop-status-option3-text-press: var(--hop-quetzal-800);
410
+ --hop-status-option3-text-selected: var(--hop-quetzal-75);
411
+ --hop-status-option4-border: var(--hop-fog-400);
412
+ --hop-status-option4-border-disabled: var(--hop-fog-600);
413
+ --hop-status-option4-border-hover: var(--hop-fog-500);
414
+ --hop-status-option4-border-press: var(--hop-fog-400);
415
+ --hop-status-option4-border-selected: var(--hop-fog-75);
416
+ --hop-status-option4-icon: var(--hop-fog-800);
417
+ --hop-status-option4-icon-disabled: var(--hop-fog-500);
418
+ --hop-status-option4-icon-hover: var(--hop-fog-900);
419
+ --hop-status-option4-icon-press: var(--hop-fog-800);
420
+ --hop-status-option4-icon-selected: var(--hop-fog-75);
421
+ --hop-status-option4-surface: var(--hop-fog-100);
422
+ --hop-status-option4-surface-disabled: var(--hop-fog-600);
423
+ --hop-status-option4-surface-hover: var(--hop-fog-200);
424
+ --hop-status-option4-surface-press: var(--hop-fog-300);
425
+ --hop-status-option4-surface-selected: var(--hop-fog-800);
294
426
  --hop-status-option4-surface-strong: var(--hop-fog-100);
295
- --hop-status-option4-text: var(--hop-fog-900);
296
- --hop-status-option5-icon: var(--hop-toad-900);
297
- --hop-status-option5-surface: var(--hop-toad-200);
427
+ --hop-status-option4-text: var(--hop-fog-800);
428
+ --hop-status-option4-text-disabled: var(--hop-fog-500);
429
+ --hop-status-option4-text-hover: var(--hop-fog-900);
430
+ --hop-status-option4-text-press: var(--hop-fog-900);
431
+ --hop-status-option4-text-selected: var(--hop-fog-75);
432
+ --hop-status-option5-border: var(--hop-toad-400);
433
+ --hop-status-option5-border-disabled: var(--hop-toad-600);
434
+ --hop-status-option5-border-hover: var(--hop-toad-500);
435
+ --hop-status-option5-border-press: var(--hop-toad-400);
436
+ --hop-status-option5-border-selected: var(--hop-toad-75);
437
+ --hop-status-option5-icon: var(--hop-toad-800);
438
+ --hop-status-option5-icon-disabled: var(--hop-toad-500);
439
+ --hop-status-option5-icon-hover: var(--hop-toad-900);
440
+ --hop-status-option5-icon-press: var(--hop-toad-800);
441
+ --hop-status-option5-icon-selected: var(--hop-toad-75);
442
+ --hop-status-option5-surface: var(--hop-toad-100);
443
+ --hop-status-option5-surface-disabled: var(--hop-toad-800);
444
+ --hop-status-option5-surface-hover: var(--hop-toad-200);
445
+ --hop-status-option5-surface-press: var(--hop-toad-300);
446
+ --hop-status-option5-surface-selected: var(--hop-toad-800);
298
447
  --hop-status-option5-surface-strong: var(--hop-toad-100);
299
- --hop-status-option5-text: var(--hop-toad-900);
300
- --hop-status-option6-icon: var(--hop-sunken-treasure-900);
301
- --hop-status-option6-surface: var(--hop-sunken-treasure-75);
448
+ --hop-status-option5-text: var(--hop-toad-800);
449
+ --hop-status-option5-text-disabled: var(--hop-toad-500);
450
+ --hop-status-option5-text-hover: var(--hop-toad-900);
451
+ --hop-status-option5-text-press: var(--hop-toad-800);
452
+ --hop-status-option5-text-selected: var(--hop-toad-75);
453
+ --hop-status-option6-border: var(--hop-sunken-treasure-400);
454
+ --hop-status-option6-border-disabled: var(--hop-sunken-treasure-600);
455
+ --hop-status-option6-border-hover: var(--hop-sunken-treasure-500);
456
+ --hop-status-option6-border-press: var(--hop-sunken-treasure-400);
457
+ --hop-status-option6-border-selected: var(--hop-sunken-treasure-75);
458
+ --hop-status-option6-icon: var(--hop-sunken-treasure-800);
459
+ --hop-status-option6-icon-disabled: var(--hop-sunken-treasure-500);
460
+ --hop-status-option6-icon-hover: var(--hop-sunken-treasure-900);
461
+ --hop-status-option6-icon-press: var(--hop-sunken-treasure-800);
462
+ --hop-status-option6-icon-selected: var(--hop-sunken-treasure-75);
463
+ --hop-status-option6-surface: var(--hop-sunken-treasure-100);
464
+ --hop-status-option6-surface-disabled: var(--hop-sunken-treasure-800);
465
+ --hop-status-option6-surface-hover: var(--hop-sunken-treasure-200);
466
+ --hop-status-option6-surface-press: var(--hop-sunken-treasure-300);
467
+ --hop-status-option6-surface-selected: var(--hop-sunken-treasure-800);
302
468
  --hop-status-option6-surface-strong: var(--hop-sunken-treasure-100);
303
- --hop-status-option6-text: var(--hop-sunken-treasure-900);
304
- --hop-status-positive-icon: var(--hop-moss-900);
305
- --hop-status-positive-surface: var(--hop-moss-75);
469
+ --hop-status-option6-text: var(--hop-sunken-treasure-800);
470
+ --hop-status-option6-text-disabled: var(--hop-sunken-treasure-500);
471
+ --hop-status-option6-text-hover: var(--hop-sunken-treasure-900);
472
+ --hop-status-option6-text-press: var(--hop-sunken-treasure-800);
473
+ --hop-status-option6-text-selected: var(--hop-sunken-treasure-75);
474
+ --hop-status-positive-border: var(--hop-moss-400);
475
+ --hop-status-positive-border-disabled: var(--hop-moss-800);
476
+ --hop-status-positive-border-hover: var(--hop-moss-500);
477
+ --hop-status-positive-border-press: var(--hop-moss-400);
478
+ --hop-status-positive-border-selected: var(--hop-moss-75);
479
+ --hop-status-positive-icon: var(--hop-moss-800);
480
+ --hop-status-positive-icon-disabled: var(--hop-moss-200);
481
+ --hop-status-positive-icon-hover: var(--hop-moss-900);
482
+ --hop-status-positive-icon-press: var(--hop-moss-800);
483
+ --hop-status-positive-icon-selected: var(--hop-moss-75);
484
+ --hop-status-positive-surface: var(--hop-moss-100);
485
+ --hop-status-positive-surface-disabled: var(--hop-moss-800);
486
+ --hop-status-positive-surface-hover: var(--hop-moss-200);
487
+ --hop-status-positive-surface-press: var(--hop-moss-300);
488
+ --hop-status-positive-surface-selected: var(--hop-moss-800);
306
489
  --hop-status-positive-surface-strong: var(--hop-moss-200);
307
- --hop-status-positive-text: var(--hop-moss-900);
308
- --hop-status-progress-icon: var(--hop-sapphire-900);
490
+ --hop-status-positive-text: var(--hop-moss-800);
491
+ --hop-status-positive-text-disabled: var(--hop-moss-500);
492
+ --hop-status-positive-text-hover: var(--hop-moss-900);
493
+ --hop-status-positive-text-press: var(--hop-moss-800);
494
+ --hop-status-positive-text-selected: var(--hop-moss-75);
495
+ --hop-status-progress-border: var(--hop-sapphire-400);
496
+ --hop-status-progress-border-disabled: var(--hop-sapphire-600);
497
+ --hop-status-progress-border-hover: var(--hop-sapphire-500);
498
+ --hop-status-progress-border-press: var(--hop-sapphire-400);
499
+ --hop-status-progress-border-selected: var(--hop-sapphire-75);
500
+ --hop-status-progress-icon: var(--hop-sapphire-800);
501
+ --hop-status-progress-icon-disabled: var(--hop-sapphire-500);
502
+ --hop-status-progress-icon-hover: var(--hop-sapphire-900);
503
+ --hop-status-progress-icon-press: var(--hop-sapphire-800);
504
+ --hop-status-progress-icon-selected: var(--hop-sapphire-75);
309
505
  --hop-status-progress-surface: var(--hop-sapphire-100);
506
+ --hop-status-progress-surface-disabled: var(--hop-sapphire-800);
507
+ --hop-status-progress-surface-hover: var(--hop-sapphire-200);
508
+ --hop-status-progress-surface-press: var(--hop-sapphire-300);
509
+ --hop-status-progress-surface-selected: var(--hop-sapphire-800);
310
510
  --hop-status-progress-surface-strong: var(--hop-sapphire-200);
311
- --hop-status-progress-text: var(--hop-sapphire-900);
511
+ --hop-status-progress-text: var(--hop-sapphire-800);
512
+ --hop-status-progress-text-disabled: var(--hop-sapphire-500);
513
+ --hop-status-progress-text-hover: var(--hop-sapphire-900);
514
+ --hop-status-progress-text-press: var(--hop-sapphire-800);
515
+ --hop-status-progress-text-selected: var(--hop-sapphire-75);
312
516
  --hop-success-border: var(--hop-moss-500);
313
517
  --hop-success-icon: var(--hop-moss-900);
314
518
  --hop-success-icon-weakest: var(--hop-moss-200);
package/dist/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 11 Jun 2024 17:25:31 GMT
3
+ * Generated on Fri, 05 Jul 2024 19:07:34 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -661,54 +661,258 @@
661
661
  --hop-success-icon-weakest: var(--hop-moss-100);
662
662
  --hop-success-icon: var(--hop-moss-700);
663
663
  --hop-success-border: var(--hop-moss-100);
664
- --hop-status-progress-icon: var(--hop-sapphire-600);
664
+ --hop-status-progress-text-selected: var(--hop-sapphire-500);
665
+ --hop-status-progress-text-press: var(--hop-sapphire-800);
666
+ --hop-status-progress-text-hover: var(--hop-sapphire-700);
667
+ --hop-status-progress-text-disabled: var(--hop-sapphire-200);
665
668
  --hop-status-progress-text: var(--hop-sapphire-600);
666
669
  --hop-status-progress-surface-strong: var(--hop-sapphire-200);
670
+ --hop-status-progress-surface-selected: var(--hop-sapphire-50);
671
+ --hop-status-progress-surface-press: var(--hop-sapphire-100);
672
+ --hop-status-progress-surface-hover: var(--hop-sapphire-75);
673
+ --hop-status-progress-surface-disabled: var(--hop-sapphire-25);
667
674
  --hop-status-progress-surface: var(--hop-sapphire-50);
668
- --hop-status-positive-text: var(--hop-moss-700);
669
- --hop-status-positive-surface: var(--hop-moss-50);
675
+ --hop-status-progress-icon-selected: var(--hop-sapphire-500);
676
+ --hop-status-progress-icon-press: var(--hop-sapphire-800);
677
+ --hop-status-progress-icon-hover: var(--hop-sapphire-700);
678
+ --hop-status-progress-icon-disabled: var(--hop-sapphire-200);
679
+ --hop-status-progress-icon: var(--hop-sapphire-600);
680
+ --hop-status-progress-border-selected: var(--hop-sapphire-400);
681
+ --hop-status-progress-border-press: var(--hop-sapphire-500);
682
+ --hop-status-progress-border-hover: var(--hop-sapphire-400);
683
+ --hop-status-progress-border-disabled: var(--hop-sapphire-50);
684
+ --hop-status-progress-border: var(--hop-sapphire-300);
685
+ --hop-status-positive-text-selected: var(--hop-moss-700);
686
+ --hop-status-positive-text-press: var(--hop-moss-800);
687
+ --hop-status-positive-text-hover: var(--hop-moss-700);
688
+ --hop-status-positive-text-disabled: var(--hop-moss-200);
689
+ --hop-status-positive-text: var(--hop-moss-600);
670
690
  --hop-status-positive-surface-strong: var(--hop-moss-200);
671
- --hop-status-positive-icon: var(--hop-moss-700);
672
- --hop-status-option6-icon: var(--hop-sunken-treasure-600);
691
+ --hop-status-positive-surface-selected: var(--hop-moss-50);
692
+ --hop-status-positive-surface-press: var(--hop-moss-100);
693
+ --hop-status-positive-surface-hover: var(--hop-moss-75);
694
+ --hop-status-positive-surface-disabled: var(--hop-moss-25);
695
+ --hop-status-positive-surface: var(--hop-moss-50);
696
+ --hop-status-positive-icon-selected: var(--hop-moss-700);
697
+ --hop-status-positive-icon-press: var(--hop-moss-800);
698
+ --hop-status-positive-icon-hover: var(--hop-moss-700);
699
+ --hop-status-positive-icon-disabled: var(--hop-moss-200);
700
+ --hop-status-positive-icon: var(--hop-moss-600);
701
+ --hop-status-positive-border-selected: var(--hop-moss-700);
702
+ --hop-status-positive-border-press: var(--hop-moss-500);
703
+ --hop-status-positive-border-hover: var(--hop-moss-400);
704
+ --hop-status-positive-border-disabled: var(--hop-moss-50);
705
+ --hop-status-positive-border: var(--hop-moss-300);
706
+ --hop-status-option6-text-selected: var(--hop-sunken-treasure-700);
707
+ --hop-status-option6-text-press: var(--hop-sunken-treasure-800);
708
+ --hop-status-option6-text-hover: var(--hop-sunken-treasure-700);
709
+ --hop-status-option6-text-disabled: var(--hop-sunken-treasure-200);
673
710
  --hop-status-option6-text: var(--hop-sunken-treasure-600);
674
711
  --hop-status-option6-surface-strong: var(--hop-sunken-treasure-200);
712
+ --hop-status-option6-surface-selected: var(--hop-sunken-treasure-50);
713
+ --hop-status-option6-surface-press: var(--hop-sunken-treasure-100);
714
+ --hop-status-option6-surface-hover: var(--hop-sunken-treasure-50);
715
+ --hop-status-option6-surface-disabled: var(--hop-sunken-treasure-25);
675
716
  --hop-status-option6-surface: var(--hop-sunken-treasure-25);
676
- --hop-status-option5-icon: var(--hop-toad-600);
717
+ --hop-status-option6-icon-selected: var(--hop-sunken-treasure-700);
718
+ --hop-status-option6-icon-press: var(--hop-sunken-treasure-800);
719
+ --hop-status-option6-icon-hover: var(--hop-sunken-treasure-700);
720
+ --hop-status-option6-icon-disabled: var(--hop-sunken-treasure-200);
721
+ --hop-status-option6-icon: var(--hop-sunken-treasure-600);
722
+ --hop-status-option6-border-selected: var(--hop-sunken-treasure-700);
723
+ --hop-status-option6-border-press: var(--hop-sunken-treasure-500);
724
+ --hop-status-option6-border-hover: var(--hop-sunken-treasure-400);
725
+ --hop-status-option6-border-disabled: var(--hop-sunken-treasure-50);
726
+ --hop-status-option6-border: var(--hop-sunken-treasure-300);
727
+ --hop-status-option5-text-selected: var(--hop-toad-700);
728
+ --hop-status-option5-text-press: var(--hop-toad-800);
729
+ --hop-status-option5-text-hover: var(--hop-toad-700);
730
+ --hop-status-option5-text-disabled: var(--hop-toad-200);
677
731
  --hop-status-option5-text: var(--hop-toad-600);
678
732
  --hop-status-option5-surface-strong: var(--hop-toad-200);
733
+ --hop-status-option5-surface-selected: var(--hop-toad-50);
734
+ --hop-status-option5-surface-press: var(--hop-toad-100);
735
+ --hop-status-option5-surface-hover: var(--hop-toad-75);
736
+ --hop-status-option5-surface-disabled: var(--hop-toad-25);
679
737
  --hop-status-option5-surface: var(--hop-toad-50);
680
- --hop-status-option4-text: var(--hop-fog-600);
738
+ --hop-status-option5-icon-selected: var(--hop-toad-700);
739
+ --hop-status-option5-icon-press: var(--hop-toad-800);
740
+ --hop-status-option5-icon-hover: var(--hop-toad-700);
741
+ --hop-status-option5-icon-disabled: var(--hop-toad-200);
742
+ --hop-status-option5-icon: var(--hop-toad-600);
743
+ --hop-status-option5-border-selected: var(--hop-toad-700);
744
+ --hop-status-option5-border-press: var(--hop-toad-500);
745
+ --hop-status-option5-border-hover: var(--hop-toad-400);
746
+ --hop-status-option5-border-disabled: var(--hop-toad-50);
747
+ --hop-status-option5-border: var(--hop-toad-300);
748
+ --hop-status-option4-text-selected: var(--hop-fog-700);
749
+ --hop-status-option4-text-press: var(--hop-fog-800);
750
+ --hop-status-option4-text-hover: var(--hop-fog-700);
751
+ --hop-status-option4-text-disabled: var(--hop-fog-700);
752
+ --hop-status-option4-text: var(--hop-fog-200);
753
+ --hop-status-option4-surface-strong: var(--hop-fog-200);
754
+ --hop-status-option4-surface-selected: var(--hop-fog-50);
755
+ --hop-status-option4-surface-press: var(--hop-fog-100);
756
+ --hop-status-option4-surface-hover: var(--hop-fog-75);
757
+ --hop-status-option4-surface-disabled: var(--hop-fog-25);
681
758
  --hop-status-option4-surface: var(--hop-fog-50);
759
+ --hop-status-option4-icon-selected: var(--hop-fog-700);
760
+ --hop-status-option4-icon-press: var(--hop-fog-800);
761
+ --hop-status-option4-icon-hover: var(--hop-fog-700);
762
+ --hop-status-option4-icon-disabled: var(--hop-fog-200);
682
763
  --hop-status-option4-icon: var(--hop-fog-600);
683
- --hop-status-option4-surface-strong: var(--hop-fog-200);
684
- --hop-status-option3-text: var(--hop-quetzal-700);
685
- --hop-status-option3-surface: var(--hop-quetzal-50);
686
- --hop-status-option3-icon: var(--hop-quetzal-700);
764
+ --hop-status-option4-border-selected: var(--hop-fog-700);
765
+ --hop-status-option4-border-press: var(--hop-fog-500);
766
+ --hop-status-option4-border-hover: var(--hop-fog-400);
767
+ --hop-status-option4-border-disabled: var(--hop-fog-50);
768
+ --hop-status-option4-border: var(--hop-fog-300);
769
+ --hop-status-option3-text-selected: var(--hop-quetzal-700);
770
+ --hop-status-option3-text-press: var(--hop-quetzal-800);
771
+ --hop-status-option3-text-hover: var(--hop-quetzal-700);
772
+ --hop-status-option3-text-disabled: var(--hop-quetzal-200);
773
+ --hop-status-option3-text: var(--hop-quetzal-600);
687
774
  --hop-status-option3-surface-strong: var(--hop-quetzal-200);
688
- --hop-status-option2-icon: var(--hop-orchid-bloom-700);
689
- --hop-status-option2-surface: var(--hop-orchid-bloom-50);
690
- --hop-status-option2-text: var(--hop-orchid-bloom-700);
775
+ --hop-status-option3-surface-selected: var(--hop-quetzal-700);
776
+ --hop-status-option3-surface-press: var(--hop-quetzal-100);
777
+ --hop-status-option3-surface-hover: var(--hop-quetzal-75);
778
+ --hop-status-option3-surface-disabled: var(--hop-quetzal-25);
779
+ --hop-status-option3-surface: var(--hop-quetzal-50);
780
+ --hop-status-option3-icon-selected: var(--hop-quetzal-700);
781
+ --hop-status-option3-icon-press: var(--hop-quetzal-800);
782
+ --hop-status-option3-icon-hover: var(--hop-quetzal-700);
783
+ --hop-status-option3-icon-disabled: var(--hop-quetzal-200);
784
+ --hop-status-option3-icon: var(--hop-quetzal-600);
785
+ --hop-status-option3-border-selected: var(--hop-quetzal-50);
786
+ --hop-status-option3-border-press: var(--hop-quetzal-500);
787
+ --hop-status-option3-border-hover: var(--hop-quetzal-400);
788
+ --hop-status-option3-border-disabled: var(--hop-quetzal-50);
789
+ --hop-status-option3-border: var(--hop-quetzal-300);
790
+ --hop-status-option2-text-selected: var(--hop-orchid-bloom-700);
791
+ --hop-status-option2-text-press: var(--hop-orchid-bloom-800);
792
+ --hop-status-option2-text-hover: var(--hop-orchid-bloom-700);
793
+ --hop-status-option2-text-disabled: var(--hop-orchid-bloom-200);
794
+ --hop-status-option2-text: var(--hop-orchid-bloom-600);
691
795
  --hop-status-option2-surface-strong: var(--hop-orchid-bloom-200);
692
- --hop-status-option1-text: var(--hop-coastal-700);
693
- --hop-status-option1-surface: var(--hop-coastal-50);
694
- --hop-status-option1-icon: var(--hop-coastal-700);
796
+ --hop-status-option2-surface-selected: var(--hop-orchid-bloom-50);
797
+ --hop-status-option2-surface-press: var(--hop-orchid-bloom-100);
798
+ --hop-status-option2-surface-hover: var(--hop-orchid-bloom-75);
799
+ --hop-status-option2-surface-disabled: var(--hop-orchid-bloom-25);
800
+ --hop-status-option2-surface: var(--hop-orchid-bloom-50);
801
+ --hop-status-option2-icon-selected: var(--hop-orchid-bloom-700);
802
+ --hop-status-option2-icon-press: var(--hop-orchid-bloom-800);
803
+ --hop-status-option2-icon-hover: var(--hop-orchid-bloom-700);
804
+ --hop-status-option2-icon-disabled: var(--hop-orchid-bloom-200);
805
+ --hop-status-option2-icon: var(--hop-orchid-bloom-600);
806
+ --hop-status-option2-border-selected: var(--hop-orchid-bloom-700);
807
+ --hop-status-option2-border-press: var(--hop-orchid-bloom-500);
808
+ --hop-status-option2-border-hover: var(--hop-orchid-bloom-400);
809
+ --hop-status-option2-border-disabled: var(--hop-orchid-bloom-50);
810
+ --hop-status-option2-border: var(--hop-orchid-bloom-300);
811
+ --hop-status-option1-text-selected: var(--hop-coastal-700);
812
+ --hop-status-option1-text-press: var(--hop-coastal-800);
813
+ --hop-status-option1-text-hover: var(--hop-coastal-700);
814
+ --hop-status-option1-text-disabled: var(--hop-coastal-200);
815
+ --hop-status-option1-text: var(--hop-coastal-600);
695
816
  --hop-status-option1-surface-strong: var(--hop-coastal-200);
817
+ --hop-status-option1-surface-selected: var(--hop-coastal-50);
818
+ --hop-status-option1-surface-press: var(--hop-coastal-100);
819
+ --hop-status-option1-surface-hover: var(--hop-coastal-75);
820
+ --hop-status-option1-surface-disabled: var(--hop-coastal-25);
821
+ --hop-status-option1-surface: var(--hop-coastal-50);
822
+ --hop-status-option1-icon-selected: var(--hop-coastal-700);
823
+ --hop-status-option1-icon-press: var(--hop-coastal-800);
824
+ --hop-status-option1-icon-hover: var(--hop-coastal-700);
825
+ --hop-status-option1-icon-disabled: var(--hop-coastal-200);
826
+ --hop-status-option1-icon: var(--hop-coastal-600);
827
+ --hop-status-option1-border-selected: var(--hop-coastal-700);
828
+ --hop-status-option1-border-press: var(--hop-coastal-500);
829
+ --hop-status-option1-border-hover: var(--hop-coastal-400);
830
+ --hop-status-option1-border-disabled: var(--hop-coastal-50);
831
+ --hop-status-option1-border: var(--hop-coastal-300);
832
+ --hop-status-neutral-text-selected: var(--hop-samoyed);
833
+ --hop-status-neutral-text-press: var(--hop-rock-900);
834
+ --hop-status-neutral-text-hover: var(--hop-rock-700);
835
+ --hop-status-neutral-text-disabled: var(--hop-rock-300);
696
836
  --hop-status-neutral-text: var(--hop-rock-800);
697
837
  --hop-status-neutral-surface-strong: var(--hop-rock-200);
838
+ --hop-status-neutral-surface-selected: var(--hop-rock-800);
839
+ --hop-status-neutral-surface-press: var(--hop-rock-50);
840
+ --hop-status-neutral-surface-hover: var(--hop-rock-25);
841
+ --hop-status-neutral-surface-disabled: var(--hop-rock-50);
698
842
  --hop-status-neutral-surface: var(--hop-samoyed);
843
+ --hop-status-neutral-icon-selected: var(--hop-samoyed);
844
+ --hop-status-neutral-icon-press: var(--hop-rock-900);
845
+ --hop-status-neutral-icon-hover: var(--hop-rock-700);
846
+ --hop-status-neutral-icon-disabled: var(--hop-rock-300);
699
847
  --hop-status-neutral-icon: var(--hop-rock-800);
700
- --hop-status-negative-text: var(--hop-amanita-700);
701
- --hop-status-negative-surface: var(--hop-amanita-50);
702
- --hop-status-negative-icon: var(--hop-amanita-700);
848
+ --hop-status-neutral-border-selected: var(--hop-rock-800);
849
+ --hop-status-neutral-border-press: var(--hop-rock-900);
850
+ --hop-status-neutral-border-hover: var(--hop-rock-700);
851
+ --hop-status-neutral-border-disabled: var(--hop-rock-50);
852
+ --hop-status-neutral-border: var(--hop-rock-800);
853
+ --hop-status-negative-text-selected: var(--hop-amanita-700);
854
+ --hop-status-negative-text-press: var(--hop-amanita-800);
855
+ --hop-status-negative-text-hover: var(--hop-amanita-700);
856
+ --hop-status-negative-text-disabled: var(--hop-amanita-200);
857
+ --hop-status-negative-text: var(--hop-amanita-600);
703
858
  --hop-status-negative-surface-strong: var(--hop-amanita-200);
704
- --hop-status-inactive-text: var(--hop-rock-700);
705
- --hop-status-inactive-surface: var(--hop-rock-50);
706
- --hop-status-inactive-icon: var(--hop-rock-500);
859
+ --hop-status-negative-surface-selected: var(--hop-amanita-50);
860
+ --hop-status-negative-surface-press: var(--hop-amanita-100);
861
+ --hop-status-negative-surface-hover: var(--hop-amanita-75);
862
+ --hop-status-negative-surface-disabled: var(--hop-amanita-25);
863
+ --hop-status-negative-surface: var(--hop-amanita-50);
864
+ --hop-status-negative-icon-selected: var(--hop-amanita-700);
865
+ --hop-status-negative-icon-press: var(--hop-amanita-800);
866
+ --hop-status-negative-icon-hover: var(--hop-amanita-700);
867
+ --hop-status-negative-icon-disabled: var(--hop-amanita-200);
868
+ --hop-status-negative-icon: var(--hop-amanita-600);
869
+ --hop-status-negative-border-selected: var(--hop-amanita-700);
870
+ --hop-status-negative-border-press: var(--hop-amanita-500);
871
+ --hop-status-negative-border-hover: var(--hop-amanita-400);
872
+ --hop-status-negative-border-disabled: var(--hop-amanita-50);
873
+ --hop-status-negative-border: var(--hop-amanita-300);
874
+ --hop-status-inactive-text-selected: var(--hop-rock-700);
875
+ --hop-status-inactive-text-press: var(--hop-rock-800);
876
+ --hop-status-inactive-text-hover: var(--hop-rock-700);
877
+ --hop-status-inactive-text-disabled: var(--hop-rock-200);
878
+ --hop-status-inactive-text: var(--hop-rock-600);
707
879
  --hop-status-inactive-surface-strong: var(--hop-rock-100);
708
- --hop-status-caution-text: var(--hop-koi-700);
709
- --hop-status-caution-surface: var(--hop-koi-50);
710
- --hop-status-caution-icon: var(--hop-koi-700);
880
+ --hop-status-inactive-surface-selected: var(--hop-rock-50);
881
+ --hop-status-inactive-surface-press: var(--hop-rock-100);
882
+ --hop-status-inactive-surface-hover: var(--hop-rock-75);
883
+ --hop-status-inactive-surface-disabled: var(--hop-rock-25);
884
+ --hop-status-inactive-surface: var(--hop-rock-50);
885
+ --hop-status-inactive-icon-selected: var(--hop-rock-700);
886
+ --hop-status-inactive-icon-press: var(--hop-rock-800);
887
+ --hop-status-inactive-icon-hover: var(--hop-rock-700);
888
+ --hop-status-inactive-icon-disabled: var(--hop-rock-200);
889
+ --hop-status-inactive-icon: var(--hop-rock-600);
890
+ --hop-status-inactive-border-selected: var(--hop-rock-700);
891
+ --hop-status-inactive-border-press: var(--hop-rock-500);
892
+ --hop-status-inactive-border-hover: var(--hop-rock-400);
893
+ --hop-status-inactive-border-disabled: var(--hop-rock-50);
894
+ --hop-status-inactive-border: var(--hop-rock-300);
895
+ --hop-status-caution-text-selected: var(--hop-koi-700);
896
+ --hop-status-caution-text-press: var(--hop-koi-800);
897
+ --hop-status-caution-text-hover: var(--hop-koi-700);
898
+ --hop-status-caution-text-disabled: var(--hop-koi-200);
899
+ --hop-status-caution-text: var(--hop-koi-600);
711
900
  --hop-status-caution-surface-strong: var(--hop-koi-200);
901
+ --hop-status-caution-surface-selected: var(--hop-koi-50);
902
+ --hop-status-caution-surface-press: var(--hop-koi-100);
903
+ --hop-status-caution-surface-hover: var(--hop-koi-75);
904
+ --hop-status-caution-surface-disabled: var(--hop-koi-25);
905
+ --hop-status-caution-surface: var(--hop-koi-50);
906
+ --hop-status-caution-icon-selected: var(--hop-koi-700);
907
+ --hop-status-caution-icon-press: var(--hop-koi-800);
908
+ --hop-status-caution-icon-hover: var(--hop-koi-700);
909
+ --hop-status-caution-icon-disabled: var(--hop-koi-200);
910
+ --hop-status-caution-icon: var(--hop-koi-600);
911
+ --hop-status-caution-border-selected: var(--hop-koi-700);
912
+ --hop-status-caution-border-press: var(--hop-koi-500);
913
+ --hop-status-caution-border-hover: var(--hop-koi-400);
914
+ --hop-status-caution-border-disabled: var(--hop-koi-50);
915
+ --hop-status-caution-border: var(--hop-koi-300);
712
916
  --hop-information-text-weak: var(--hop-coastal-300);
713
917
  --hop-information-text: var(--hop-coastal-800);
714
918
  --hop-information-surface-weak: var(--hop-coastal-50);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@hopper-ui/tokens",
3
3
  "author": "Workleap",
4
- "version": "4.0.2",
4
+ "version": "4.1.0",
5
5
  "description": "The tokens package.",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {