@hopper-ui/styled-system 3.1.7 → 3.1.9

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 (33) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/StyledSystemProvider.css +34 -34
  3. package/dist/StyledSystemProvider.js +9 -9
  4. package/dist/{chunk-OYMXN25G.js → chunk-DEKDHYZJ.js} +3 -3
  5. package/dist/{chunk-BMWCINBT.js → chunk-I62UJW4C.js} +2 -2
  6. package/dist/{chunk-5LDV47AF.js → chunk-MEXLJKBG.js} +2 -2
  7. package/dist/{chunk-SSOKJANQ.js → chunk-OLP75FK3.js} +2 -2
  8. package/dist/{chunk-ZHO2NVMU.js → chunk-QKSGYCZX.js} +90 -3
  9. package/dist/{chunk-XBK5RW6T.js → chunk-QQCLCFNV.js} +1 -1
  10. package/dist/{chunk-3S5NKTSW.js → chunk-R7W7UO6F.js} +1 -1
  11. package/dist/{chunk-2MD232MR.js → chunk-ZOBRNQ6K.js} +1 -1
  12. package/dist/{chunk-ETLUMUKM.js → chunk-ZZXXGPRK.js} +1 -1
  13. package/dist/global-styles/BodyStyleProvider.js +2 -2
  14. package/dist/html-wrappers/html.css +34 -34
  15. package/dist/html-wrappers/html.js +6 -6
  16. package/dist/html-wrappers/htmlElement.css +34 -34
  17. package/dist/html-wrappers/htmlElement.js +5 -5
  18. package/dist/index.css +34 -34
  19. package/dist/index.js +9 -9
  20. package/dist/styledSystemRootCssClass.js +2 -2
  21. package/dist/theme/generated/sharegate/dark.css +96 -9
  22. package/dist/theme/generated/sharegate/light.css +109 -21
  23. package/dist/theme/generated/workleap/dark.css +90 -3
  24. package/dist/theme/generated/workleap/light.css +92 -4
  25. package/dist/tokens/generated/styledSystemConstants.d.ts +1 -1
  26. package/dist/tokens/generated/styledSystemConstants.js +1 -1
  27. package/dist/tokens/generated/styledSystemToTokenMappings.d.ts +89 -2
  28. package/dist/tokens/generated/styledSystemToTokenMappings.js +1 -1
  29. package/dist/tokens/tokenMappings.d.ts +288 -3
  30. package/dist/tokens/tokenMappings.js +3 -3
  31. package/dist/useStyledSystem.css +31 -31
  32. package/dist/useStyledSystem.js +4 -4
  33. package/package.json +2 -2
package/dist/theme/generated/sharegate/dark.css CHANGED
@@ -2,7 +2,7 @@
2
2
  * This file is generated by Style Dictionary. Do not edit directly.
3
3
  */
4
4
 
5
- .hop-5-1-7-sharegate-dark {
5
+ .hop-5-1-9-sharegate-dark {
6
6
  --hop-space-1280: 8rem;
7
7
  --hop-space-960: 6rem;
8
8
  --hop-space-800: 5rem;
@@ -17,7 +17,6 @@
17
17
  --hop-space-20: 0.125rem;
18
18
  --hop-space-10: 0.0625rem;
19
19
  --hop-space-0: 0;
20
- --hop-border-radius-2-5: 0.75rem;
21
20
  --hop-border-radius-9999: 624.9375rem;
22
21
  --hop-border-radius-4: 1.5rem;
23
22
  --hop-border-radius-3: 1rem;
@@ -60,12 +59,59 @@
60
59
  --hop-font-family-secondary: 'Inter', Helvetica, Arial, sans-serif;
61
60
  --hop-font-family-primary: 'ABC Favorit', Helvetica, Arial, sans-serif;
62
61
  --hop-shadow-tactility-control: 1.5px 1.5px 1.5px 0 rgba(0, 0, 0, 0.03), -5px -5px 20px 0 rgba(255, 255, 255, 0.2), 0.5px 1.5px 5px 0 rgba(0, 0, 0, 0.1) inset, -2.5px 2.5px 5px 0 rgba(255, 255, 255, 0.5) inset;
63
- --hop-shadow-tactility-card: 0 12px 12px 0 rgba(0, 0, 0, 0.05);
64
62
  --hop-shadow-tactility-button: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 2px 0 rgba(0, 0, 0, 0.25) inset;
65
63
  --hop-shadow-lg: 0 10px 18px 8px rgba(60, 60, 60, 0.08);
66
64
  --hop-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08);
67
65
  --hop-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.10);
68
66
  --hop-shadow-none: none;
67
+ --hop-cobalt-900: #001a4d;
68
+ --hop-cobalt-800: #002766;
69
+ --hop-cobalt-700: #003b99;
70
+ --hop-cobalt-600: #004fcc;
71
+ --hop-cobalt-500: #0165fc;
72
+ --hop-cobalt-400: #3a82ff;
73
+ --hop-cobalt-300: #6aa3ff;
74
+ --hop-cobalt-200: #99c2ff;
75
+ --hop-cobalt-100: #c2daff;
76
+ --hop-cobalt-75: #d6e7ff;
77
+ --hop-cobalt-50: #e6f0ff;
78
+ --hop-cobalt-25: #f2f7ff;
79
+ --hop-mint-900: #063527;
80
+ --hop-mint-800: #084a34;
81
+ --hop-mint-700: #0a6042;
82
+ --hop-mint-600: #0b6f4c;
83
+ --hop-mint-500: #0d8058;
84
+ --hop-mint-400: #10a96f;
85
+ --hop-mint-300: #12cb80;
86
+ --hop-mint-200: #0be57d;
87
+ --hop-mint-100: #66ecae;
88
+ --hop-mint-75: #97f2c8;
89
+ --hop-mint-50: #d7faea;
90
+ --hop-mint-25: #eafdf3;
91
+ --hop-amber-900: #3d3200;
92
+ --hop-amber-800: #574500;
93
+ --hop-amber-700: #705900;
94
+ --hop-amber-600: #8a6c00;
95
+ --hop-amber-500: #a68000;
96
+ --hop-amber-400: #cfa000;
97
+ --hop-amber-300: #ffb700;
98
+ --hop-amber-200: #ffc94a;
99
+ --hop-amber-100: #ffd873;
100
+ --hop-amber-75: #ffe39a;
101
+ --hop-amber-50: #fff1cc;
102
+ --hop-amber-25: #fff6e0;
103
+ --hop-rose-900: #2b1e23;
104
+ --hop-rose-800: #3d2630;
105
+ --hop-rose-700: #542f3e;
106
+ --hop-rose-600: #6a394c;
107
+ --hop-rose-500: #80435a;
108
+ --hop-rose-400: #995068;
109
+ --hop-rose-300: #fc5992;
110
+ --hop-rose-200: #f47c9e;
111
+ --hop-rose-100: #f7a3ba;
112
+ --hop-rose-75: #f9c1cf;
113
+ --hop-rose-50: #fbd6df;
114
+ --hop-rose-25: #fdecef;
69
115
  --hop-samoyed: #ffffff;
70
116
  --hop-rock-900: #232426;
71
117
  --hop-rock-800: #313335;
@@ -513,6 +559,38 @@
513
559
  --hop-status-caution-border-hover: var(--hop-koi-500);
514
560
  --hop-status-caution-border-disabled: var(--hop-koi-600);
515
561
  --hop-status-caution-border: var(--hop-koi-400);
562
+ --hop-secondary-icon-strong-hover: var(--hop-samoyed);
563
+ --hop-secondary-icon-strong: var(--hop-samoyed);
564
+ --hop-secondary-icon-disabled: var(--hop-persimmon-700);
565
+ --hop-secondary-icon-selected: var(--hop-persimmon-200);
566
+ --hop-secondary-icon-press: var(--hop-persimmon-75);
567
+ --hop-secondary-icon-hover: var(--hop-persimmon-200);
568
+ --hop-secondary-icon: var(--hop-persimmon-100);
569
+ --hop-secondary-border-focus: var(--hop-persimmon-300);
570
+ --hop-secondary-border-selected: var(--hop-persimmon-100);
571
+ --hop-secondary-border-press: var(--hop-persimmon-200);
572
+ --hop-secondary-border: var(--hop-persimmon-300);
573
+ --hop-secondary-surface-strong-selected: var(--hop-persimmon-800);
574
+ --hop-secondary-surface-strong-press: var(--hop-persimmon-75);
575
+ --hop-secondary-surface-strong-hover: var(--hop-persimmon-100);
576
+ --hop-secondary-surface-strong: var(--hop-persimmon-300);
577
+ --hop-secondary-surface-weak-selected: var(--hop-persimmon-600);
578
+ --hop-secondary-surface-weak-press: var(--hop-persimmon-700);
579
+ --hop-secondary-surface-weak-hover: var(--hop-persimmon-800);
580
+ --hop-secondary-surface-weak: var(--hop-persimmon-900);
581
+ --hop-secondary-surface-disabled: var(--hop-persimmon-700);
582
+ --hop-secondary-surface-focus: var(--hop-persimmon-900);
583
+ --hop-secondary-surface-selected: var(--hop-persimmon-800);
584
+ --hop-secondary-surface-press: var(--hop-persimmon-500);
585
+ --hop-secondary-surface-hover: var(--hop-persimmon-400);
586
+ --hop-secondary-surface: var(--hop-persimmon-200);
587
+ --hop-secondary-text-strong-hover: var(--hop-samoyed);
588
+ --hop-secondary-text-strong: var(--hop-samoyed);
589
+ --hop-secondary-text-disabled: var(--hop-persimmon-700);
590
+ --hop-secondary-text-selected: var(--hop-persimmon-200);
591
+ --hop-secondary-text-press: var(--hop-persimmon-75);
592
+ --hop-secondary-text-hover: var(--hop-persimmon-200);
593
+ --hop-secondary-text: var(--hop-persimmon-100);
516
594
  --hop-information-text-weak: var(--hop-coastal-75);
517
595
  --hop-information-text: var(--hop-coastal-900);
518
596
  --hop-information-surface-weak: var(--hop-coastal-800);
@@ -648,7 +726,7 @@
648
726
  --hop-upsell-icon-active: var(--hop-sunken-treasure-900);
649
727
  --hop-upsell-border-active: var(--hop-sunken-treasure-400);
650
728
  --hop-primary-text-disabled: var(--hop-iris-700);
651
- --hop-primary-text-selected: var(--hop-persimmon-200);
729
+ --hop-primary-text-selected: var(--hop-iris-200);
652
730
  --hop-primary-text-strong-hover: var(--hop-samoyed);
653
731
  --hop-primary-text-strong: var(--hop-samoyed);
654
732
  --hop-primary-text-press: var(--hop-iris-75);
@@ -656,28 +734,28 @@
656
734
  --hop-primary-text: var(--hop-iris-100);
657
735
  --hop-primary-surface-weak-press: var(--hop-iris-600);
658
736
  --hop-primary-surface-weak-hover: var(--hop-iris-700);
659
- --hop-primary-surface-weak-selected: var(--hop-persimmon-500);
737
+ --hop-primary-surface-weak-selected: var(--hop-iris-500);
660
738
  --hop-primary-surface-weak: var(--hop-iris-800);
661
739
  --hop-primary-surface-strong-press: var(--hop-iris-600);
662
740
  --hop-primary-surface-strong-hover: var(--hop-iris-500);
663
- --hop-primary-surface-strong-selected: var(--hop-persimmon-800);
741
+ --hop-primary-surface-strong-selected: var(--hop-iris-800);
664
742
  --hop-primary-surface-strong: var(--hop-iris-400);
665
743
  --hop-primary-surface-press: var(--hop-iris-500);
666
744
  --hop-primary-surface-hover: var(--hop-iris-400);
667
745
  --hop-primary-surface-focus: var(--hop-iris-900);
668
746
  --hop-primary-surface-disabled: var(--hop-iris-700);
669
- --hop-primary-surface-selected: var(--hop-persimmon-400);
747
+ --hop-primary-surface-selected: var(--hop-iris-300);
670
748
  --hop-primary-surface: var(--hop-iris-200);
671
749
  --hop-primary-icon-strong-hover: var(--hop-samoyed);
672
750
  --hop-primary-icon-strong: var(--hop-samoyed);
673
751
  --hop-primary-icon-press: var(--hop-iris-75);
674
752
  --hop-primary-icon-hover: var(--hop-iris-300);
675
753
  --hop-primary-icon-disabled: var(--hop-iris-700);
676
- --hop-primary-icon-selected: var(--hop-persimmon-200);
754
+ --hop-primary-icon-selected: var(--hop-iris-200);
677
755
  --hop-primary-icon: var(--hop-iris-100);
678
756
  --hop-primary-border-press: var(--hop-iris-400);
679
757
  --hop-primary-border-focus: var(--hop-iris-200);
680
- --hop-primary-border-selected: var(--hop-persimmon-300);
758
+ --hop-primary-border-selected: var(--hop-iris-300);
681
759
  --hop-primary-border: var(--hop-iris-300);
682
760
  --hop-primary-text-active: var(--hop-sapphire-75);
683
761
  --hop-primary-surface-weak-active: var(--hop-sapphire-600);
@@ -685,6 +763,9 @@
685
763
  --hop-primary-surface-active: var(--hop-sapphire-500);
686
764
  --hop-primary-icon-active: var(--hop-sapphire-75);
687
765
  --hop-primary-border-active: var(--hop-sapphire-500);
766
+ --hop-neutral-text-always-dark: var(--hop-rock-900);
767
+ --hop-neutral-text-always-light: var(--hop-samoyed);
768
+ --hop-neutral-text-inverse: var(--hop-samoyed);
688
769
  --hop-neutral-text-weakest: var(--hop-rock-300);
689
770
  --hop-neutral-text-weak-selected: var(--hop-rock-75);
690
771
  --hop-neutral-text-weak-press: var(--hop-rock-50);
@@ -696,6 +777,9 @@
696
777
  --hop-neutral-text-disabled: var(--hop-rock-500);
697
778
  --hop-neutral-text-selected: var(--hop-rock-900);
698
779
  --hop-neutral-text: var(--hop-rock-25);
780
+ --hop-neutral-surface-always-dark: var(--hop-rock-900);
781
+ --hop-neutral-surface-always-light: var(--hop-samoyed);
782
+ --hop-neutral-surface-inverse: var(--hop-samoyed);
699
783
  --hop-neutral-surface-weakest-hover: var(--hop-rock-800);
700
784
  --hop-neutral-surface-weakest-selected: var(--hop-rock-800);
701
785
  --hop-neutral-surface-weak-press: var(--hop-rock-600);
@@ -709,6 +793,9 @@
709
793
  --hop-neutral-surface-disabled: var(--hop-rock-700);
710
794
  --hop-neutral-surface-selected: var(--hop-toad-25);
711
795
  --hop-neutral-surface: var(--hop-abyss);
796
+ --hop-neutral-icon-always-dark: var(--hop-rock-900);
797
+ --hop-neutral-icon-always-light: var(--hop-samoyed);
798
+ --hop-neutral-icon-inverse: var(--hop-samoyed);
712
799
  --hop-neutral-icon-weakest: var(--hop-rock-400);
713
800
  --hop-neutral-icon-weak-selected: var(--hop-rock-75);
714
801
  --hop-neutral-icon-weak-press: var(--hop-rock-50);
package/dist/theme/generated/sharegate/light.css CHANGED
@@ -2,7 +2,7 @@
2
2
  * This file is generated by Style Dictionary. Do not edit directly.
3
3
  */
4
4
 
5
- .hop-5-1-7-sharegate {
5
+ .hop-5-1-9-sharegate {
6
6
  --hop-comp-switch-thumb-filter-selected: none;
7
7
  --hop-comp-switch-thumb-filter: drop-shadow(2.5px 2.5px 5px rgb(0 0 0 / 5%)) drop-shadow(-2.5px -2.5px 5px rgb(255 255 255 / 50%));
8
8
  --hop-comp-switch-track-box-shadow: 0.5px 1.5px 5px 0 rgb(0 0 0 / 10%) inset, -2.5px 2.5px 5px 0 rgb(255 255 255 / 50%) inset;
@@ -10,6 +10,8 @@
10
10
  --hop-comp-segmented-control-item-box-shadow-disabled: none;
11
11
  --hop-comp-segmented-control-item-box-shadow-selected: -2.5px -2.5px 5px 0 rgb(255 255 255 / 50%), 2.5px 2.5px 5px 0 rgb(0 0 0 / 5%);
12
12
  --hop-comp-segmented-control-box-shadow: 1.5px 1.5px 1.5px 0 rgb(0 0 0 / 3%), 0.5px 1.5px 5px 0 rgb(0 0 0 / 10%) inset, -2.5px 2.5px 5px 0 rgb(255 255 255 / 50%) inset;
13
+ --hop-comp-card-second-level-box-shadow: 0 1px 0 1px rgba(255, 255, 255, 0.10), 0 -1px 3px 0 rgba(0, 0, 0, 0.12) inset;
14
+ --hop-comp-card-main-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.10), 0 1px 0 0 rgba(255, 255, 255, 0.40) inset, 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset;
13
15
  --hop-comp-button-ghost-disabled-border-color: transparent;
14
16
  --hop-comp-button-ghost-disabled-background-color: transparent;
15
17
  --hop-comp-button-ghost-danger-border-color: transparent;
@@ -314,7 +316,6 @@
314
316
  --hop-space-20: 0.125rem;
315
317
  --hop-space-10: 0.0625rem;
316
318
  --hop-space-0: 0;
317
- --hop-border-radius-2-5: 0.75rem;
318
319
  --hop-border-radius-9999: 624.9375rem;
319
320
  --hop-border-radius-4: 1.5rem;
320
321
  --hop-border-radius-3: 1rem;
@@ -357,12 +358,59 @@
357
358
  --hop-font-family-secondary: 'Inter', Helvetica, Arial, sans-serif;
358
359
  --hop-font-family-primary: 'ABC Favorit', Helvetica, Arial, sans-serif;
359
360
  --hop-shadow-tactility-control: 1.5px 1.5px 1.5px 0 rgba(0, 0, 0, 0.03), -5px -5px 20px 0 rgba(255, 255, 255, 0.2), 0.5px 1.5px 5px 0 rgba(0, 0, 0, 0.1) inset, -2.5px 2.5px 5px 0 rgba(255, 255, 255, 0.5) inset;
360
- --hop-shadow-tactility-card: 0 12px 12px 0 rgba(0, 0, 0, 0.05);
361
361
  --hop-shadow-tactility-button: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 2px 0 rgba(0, 0, 0, 0.25) inset;
362
362
  --hop-shadow-lg: 0 10px 18px 8px rgba(60, 60, 60, 0.08);
363
363
  --hop-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08);
364
364
  --hop-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.10);
365
365
  --hop-shadow-none: none;
366
+ --hop-cobalt-900: #001a4d;
367
+ --hop-cobalt-800: #002766;
368
+ --hop-cobalt-700: #003b99;
369
+ --hop-cobalt-600: #004fcc;
370
+ --hop-cobalt-500: #0165fc;
371
+ --hop-cobalt-400: #3a82ff;
372
+ --hop-cobalt-300: #6aa3ff;
373
+ --hop-cobalt-200: #99c2ff;
374
+ --hop-cobalt-100: #c2daff;
375
+ --hop-cobalt-75: #d6e7ff;
376
+ --hop-cobalt-50: #e6f0ff;
377
+ --hop-cobalt-25: #f2f7ff;
378
+ --hop-mint-900: #063527;
379
+ --hop-mint-800: #084a34;
380
+ --hop-mint-700: #0a6042;
381
+ --hop-mint-600: #0b6f4c;
382
+ --hop-mint-500: #0d8058;
383
+ --hop-mint-400: #10a96f;
384
+ --hop-mint-300: #12cb80;
385
+ --hop-mint-200: #0be57d;
386
+ --hop-mint-100: #66ecae;
387
+ --hop-mint-75: #97f2c8;
388
+ --hop-mint-50: #d7faea;
389
+ --hop-mint-25: #eafdf3;
390
+ --hop-amber-900: #3d3200;
391
+ --hop-amber-800: #574500;
392
+ --hop-amber-700: #705900;
393
+ --hop-amber-600: #8a6c00;
394
+ --hop-amber-500: #a68000;
395
+ --hop-amber-400: #cfa000;
396
+ --hop-amber-300: #ffb700;
397
+ --hop-amber-200: #ffc94a;
398
+ --hop-amber-100: #ffd873;
399
+ --hop-amber-75: #ffe39a;
400
+ --hop-amber-50: #fff1cc;
401
+ --hop-amber-25: #fff6e0;
402
+ --hop-rose-900: #2b1e23;
403
+ --hop-rose-800: #3d2630;
404
+ --hop-rose-700: #542f3e;
405
+ --hop-rose-600: #6a394c;
406
+ --hop-rose-500: #80435a;
407
+ --hop-rose-400: #995068;
408
+ --hop-rose-300: #fc5992;
409
+ --hop-rose-200: #f47c9e;
410
+ --hop-rose-100: #f7a3ba;
411
+ --hop-rose-75: #f9c1cf;
412
+ --hop-rose-50: #fbd6df;
413
+ --hop-rose-25: #fdecef;
366
414
  --hop-samoyed: #ffffff;
367
415
  --hop-rock-900: #232426;
368
416
  --hop-rock-800: #313335;
@@ -536,9 +584,6 @@
536
584
  --hop-coastal-25: #f0f8ff;
537
585
  --hop-comp-radio-box-shadow: var(--hop-shadow-tactility-control);
538
586
  --hop-comp-checkbox-box-shadow: var(--hop-shadow-tactility-control);
539
- --hop-comp-field-border-radius: var(--hop-border-radius-2-5);
540
- --hop-comp-card-second-level-box-shadow: var(--hop-shadow-tactility-card);
541
- --hop-comp-card-main-box-shadow: var(--hop-shadow-none);
542
587
  --hop-comp-button-danger-box-shadow: var(--hop-shadow-tactility-button);
543
588
  --hop-comp-button-upsell-box-shadow: var(--hop-shadow-tactility-button);
544
589
  --hop-comp-button-secondary-box-shadow: var(--hop-shadow-tactility-button);
@@ -960,6 +1005,38 @@
960
1005
  --hop-status-caution-border-hover: var(--hop-koi-400);
961
1006
  --hop-status-caution-border-disabled: var(--hop-koi-50);
962
1007
  --hop-status-caution-border: var(--hop-koi-300);
1008
+ --hop-secondary-icon-strong-hover: var(--hop-samoyed);
1009
+ --hop-secondary-icon-strong: var(--hop-samoyed);
1010
+ --hop-secondary-icon-disabled: var(--hop-persimmon-200);
1011
+ --hop-secondary-icon-selected: var(--hop-persimmon-500);
1012
+ --hop-secondary-icon-press: var(--hop-persimmon-700);
1013
+ --hop-secondary-icon-hover: var(--hop-persimmon-600);
1014
+ --hop-secondary-icon: var(--hop-persimmon-500);
1015
+ --hop-secondary-border-focus: var(--hop-persimmon-300);
1016
+ --hop-secondary-border-selected: var(--hop-persimmon-500);
1017
+ --hop-secondary-border-press: var(--hop-persimmon-400);
1018
+ --hop-secondary-border: var(--hop-persimmon-300);
1019
+ --hop-secondary-surface-strong-selected: var(--hop-persimmon-50);
1020
+ --hop-secondary-surface-strong-press: var(--hop-persimmon-600);
1021
+ --hop-secondary-surface-strong-hover: var(--hop-persimmon-500);
1022
+ --hop-secondary-surface-strong: var(--hop-persimmon-300);
1023
+ --hop-secondary-surface-weak-selected: var(--hop-persimmon-100);
1024
+ --hop-secondary-surface-weak-press: var(--hop-persimmon-75);
1025
+ --hop-secondary-surface-weak-hover: var(--hop-persimmon-50);
1026
+ --hop-secondary-surface-weak: var(--hop-persimmon-25);
1027
+ --hop-secondary-surface-disabled: var(--hop-persimmon-200);
1028
+ --hop-secondary-surface-focus: var(--hop-persimmon-25);
1029
+ --hop-secondary-surface-selected: var(--hop-persimmon-50);
1030
+ --hop-secondary-surface-press: var(--hop-persimmon-300);
1031
+ --hop-secondary-surface-hover: var(--hop-persimmon-200);
1032
+ --hop-secondary-surface: var(--hop-persimmon-50);
1033
+ --hop-secondary-text-strong-hover: var(--hop-samoyed);
1034
+ --hop-secondary-text-strong: var(--hop-samoyed);
1035
+ --hop-secondary-text-disabled: var(--hop-persimmon-200);
1036
+ --hop-secondary-text-selected: var(--hop-persimmon-500);
1037
+ --hop-secondary-text-press: var(--hop-persimmon-700);
1038
+ --hop-secondary-text-hover: var(--hop-persimmon-600);
1039
+ --hop-secondary-text: var(--hop-persimmon-500);
963
1040
  --hop-information-text-weak: var(--hop-coastal-300);
964
1041
  --hop-information-text: var(--hop-coastal-800);
965
1042
  --hop-information-surface-weak: var(--hop-coastal-50);
@@ -1099,32 +1176,32 @@
1099
1176
  --hop-primary-text-press: var(--hop-iris-700);
1100
1177
  --hop-primary-text-hover: var(--hop-iris-600);
1101
1178
  --hop-primary-text-disabled: var(--hop-iris-200);
1102
- --hop-primary-text-selected: var(--hop-persimmon-500);
1179
+ --hop-primary-text-selected: var(--hop-iris-500);
1103
1180
  --hop-primary-text: var(--hop-iris-500);
1104
1181
  --hop-primary-surface-weak-press: var(--hop-iris-75);
1105
1182
  --hop-primary-surface-weak-hover: var(--hop-iris-50);
1106
- --hop-primary-surface-weak-selected: var(--hop-persimmon-200);
1183
+ --hop-primary-surface-weak-selected: var(--hop-iris-100);
1107
1184
  --hop-primary-surface-weak: var(--hop-iris-25);
1108
1185
  --hop-primary-surface-strong-press: var(--hop-iris-700);
1109
1186
  --hop-primary-surface-strong-hover: var(--hop-iris-600);
1110
- --hop-primary-surface-strong-selected: var(--hop-persimmon-50);
1187
+ --hop-primary-surface-strong-selected: var(--hop-iris-50);
1111
1188
  --hop-primary-surface-strong: var(--hop-iris-400);
1112
1189
  --hop-primary-surface-press: var(--hop-iris-300);
1113
1190
  --hop-primary-surface-hover: var(--hop-iris-200);
1114
1191
  --hop-primary-surface-focus: var(--hop-iris-25);
1115
1192
  --hop-primary-surface-disabled: var(--hop-iris-200);
1116
- --hop-primary-surface-selected: var(--hop-persimmon-300);
1193
+ --hop-primary-surface-selected: var(--hop-iris-400);
1117
1194
  --hop-primary-surface: var(--hop-iris-50);
1118
1195
  --hop-primary-icon-strong-hover: var(--hop-samoyed);
1119
1196
  --hop-primary-icon-strong: var(--hop-samoyed);
1120
1197
  --hop-primary-icon-press: var(--hop-iris-700);
1121
1198
  --hop-primary-icon-hover: var(--hop-iris-600);
1122
1199
  --hop-primary-icon-disabled: var(--hop-iris-200);
1123
- --hop-primary-icon-selected: var(--hop-persimmon-500);
1200
+ --hop-primary-icon-selected: var(--hop-iris-500);
1124
1201
  --hop-primary-icon: var(--hop-iris-500);
1125
1202
  --hop-primary-border-press: var(--hop-iris-500);
1126
1203
  --hop-primary-border-focus: var(--hop-iris-500);
1127
- --hop-primary-border-selected: var(--hop-persimmon-400);
1204
+ --hop-primary-border-selected: var(--hop-iris-400);
1128
1205
  --hop-primary-border: var(--hop-iris-400);
1129
1206
  --hop-primary-text-active: var(--hop-sapphire-700);
1130
1207
  --hop-primary-surface-weak-active: var(--hop-sapphire-75);
@@ -1132,6 +1209,9 @@
1132
1209
  --hop-primary-surface-active: var(--hop-sapphire-300);
1133
1210
  --hop-primary-icon-active: var(--hop-sapphire-700);
1134
1211
  --hop-primary-border-active: var(--hop-sapphire-300);
1212
+ --hop-neutral-text-always-dark: var(--hop-rock-900);
1213
+ --hop-neutral-text-always-light: var(--hop-samoyed);
1214
+ --hop-neutral-text-inverse: var(--hop-rock-900);
1135
1215
  --hop-neutral-text-weakest: var(--hop-rock-300);
1136
1216
  --hop-neutral-text-weak-selected: var(--hop-rock-600);
1137
1217
  --hop-neutral-text-weak-press: var(--hop-rock-700);
@@ -1143,6 +1223,9 @@
1143
1223
  --hop-neutral-text-disabled: var(--hop-rock-300);
1144
1224
  --hop-neutral-text-selected: var(--hop-samoyed);
1145
1225
  --hop-neutral-text: var(--hop-rock-800);
1226
+ --hop-neutral-surface-always-dark: var(--hop-rock-900);
1227
+ --hop-neutral-surface-always-light: var(--hop-samoyed);
1228
+ --hop-neutral-surface-inverse: var(--hop-rock-900);
1146
1229
  --hop-neutral-surface-weakest-hover: var(--hop-rock-50);
1147
1230
  --hop-neutral-surface-weakest-selected: var(--hop-rock-50);
1148
1231
  --hop-neutral-surface-weakest: var(--hop-rock-25);
@@ -1156,6 +1239,9 @@
1156
1239
  --hop-neutral-surface-disabled: var(--hop-rock-50);
1157
1240
  --hop-neutral-surface-selected: var(--hop-rock-800);
1158
1241
  --hop-neutral-surface: var(--hop-samoyed);
1242
+ --hop-neutral-icon-always-dark: var(--hop-rock-900);
1243
+ --hop-neutral-icon-always-light: var(--hop-samoyed);
1244
+ --hop-neutral-icon-inverse: var(--hop-rock-900);
1159
1245
  --hop-neutral-icon-weakest: var(--hop-rock-200);
1160
1246
  --hop-neutral-icon-weak-selected: var(--hop-rock-600);
1161
1247
  --hop-neutral-icon-weak-press: var(--hop-rock-700);
@@ -1302,12 +1388,13 @@
1302
1388
  --hop-comp-field-border-color-focus: var(--hop-primary-border-focus);
1303
1389
  --hop-comp-field-border-color-hover: var(--hop-neutral-border-hover);
1304
1390
  --hop-comp-field-border-color: var(--hop-neutral-border-weak);
1305
- --hop-comp-field-background-color-disabled: var(--hop-neutral-surface);
1306
- --hop-comp-field-background-color-hover: var(--hop-neutral-surface-weak-hover);
1307
- --hop-comp-field-background-color: var(--hop-neutral-surface-weak);
1308
- --hop-comp-select-text-color-hover: var(--hop-neutral-text-press);
1391
+ --hop-comp-field-background-color-disabled: var(--hop-neutral-surface-disabled);
1392
+ --hop-comp-field-background-color-hover: var(--hop-neutral-surface-hover);
1393
+ --hop-comp-field-background-color: var(--hop-neutral-surface);
1394
+ --hop-comp-field-border-radius: var(--hop-shape-rounded-md);
1395
+ --hop-comp-select-text-color-hover: var(--hop-neutral-text-hover);
1309
1396
  --hop-comp-select-border-color-active: var(--hop-primary-border);
1310
- --hop-comp-select-background-color-active: var(--hop-neutral-surface-weak-selected);
1397
+ --hop-comp-select-background-color-active: var(--hop-neutral-surface);
1311
1398
  --hop-comp-control-border-color-error: var(--hop-danger-border-strong);
1312
1399
  --hop-comp-control-border-color-disabled: var(--hop-neutral-border-disabled);
1313
1400
  --hop-comp-control-border-color-focus: var(--hop-primary-border-focus);
@@ -1335,10 +1422,11 @@
1335
1422
  --hop-comp-segmented-control-text-color: var(--hop-neutral-text-weakest);
1336
1423
  --hop-comp-segmented-control-border-radius: var(--hop-shape-rounded-md);
1337
1424
  --hop-comp-card-second-level-border-color: var(--hop-neutral-border-weakest);
1338
- --hop-comp-card-second-level-background-color: var(--hop-neutral-surface);
1339
- --hop-comp-card-main-border-color: var(--hop-neutral-surface-weakest);
1340
- --hop-comp-card-main-background-color: var(--hop-neutral-surface-weakest);
1341
- --hop-comp-card-border-radius: var(--hop-shape-rounded-lg);
1425
+ --hop-comp-card-second-level-background-color: var(--hop-neutral-surface-weakest);
1426
+ --hop-comp-card-second-level-border-radius: var(--hop-shape-rounded-lg);
1427
+ --hop-comp-card-main-border-color: var(--hop-neutral-border-weakest);
1428
+ --hop-comp-card-main-background-color: var(--hop-neutral-surface);
1429
+ --hop-comp-card-main-border-radius: var(--hop-shape-rounded-lg);
1342
1430
  --hop-comp-button-ghost-disabled-text-color: var(--hop-neutral-text-disabled);
1343
1431
  --hop-comp-button-disabled-border-color: var(--hop-neutral-surface-disabled);
1344
1432
  --hop-comp-button-disabled-background-color: var(--hop-neutral-surface-disabled);
package/dist/theme/generated/workleap/dark.css CHANGED
@@ -2,7 +2,7 @@
2
2
  * This file is generated by Style Dictionary. Do not edit directly.
3
3
  */
4
4
 
5
- .hop-5-1-7-workleap-dark {
5
+ .hop-5-1-9-workleap-dark {
6
6
  --hop-space-1280: 8rem;
7
7
  --hop-space-960: 6rem;
8
8
  --hop-space-800: 5rem;
@@ -17,7 +17,6 @@
17
17
  --hop-space-20: 0.125rem;
18
18
  --hop-space-10: 0.0625rem;
19
19
  --hop-space-0: 0;
20
- --hop-border-radius-2-5: 0.75rem;
21
20
  --hop-border-radius-9999: 624.9375rem;
22
21
  --hop-border-radius-4: 1.5rem;
23
22
  --hop-border-radius-3: 1rem;
@@ -60,12 +59,59 @@
60
59
  --hop-font-family-secondary: 'Inter', Helvetica, Arial, sans-serif;
61
60
  --hop-font-family-primary: 'ABC Favorit', Helvetica, Arial, sans-serif;
62
61
  --hop-shadow-tactility-control: 1.5px 1.5px 1.5px 0 rgba(0, 0, 0, 0.03), -5px -5px 20px 0 rgba(255, 255, 255, 0.2), 0.5px 1.5px 5px 0 rgba(0, 0, 0, 0.1) inset, -2.5px 2.5px 5px 0 rgba(255, 255, 255, 0.5) inset;
63
- --hop-shadow-tactility-card: 0 12px 12px 0 rgba(0, 0, 0, 0.05);
64
62
  --hop-shadow-tactility-button: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 2px 0 rgba(0, 0, 0, 0.25) inset;
65
63
  --hop-shadow-lg: 0 10px 18px 8px rgba(60, 60, 60, 0.08);
66
64
  --hop-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08);
67
65
  --hop-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.10);
68
66
  --hop-shadow-none: none;
67
+ --hop-cobalt-900: #001a4d;
68
+ --hop-cobalt-800: #002766;
69
+ --hop-cobalt-700: #003b99;
70
+ --hop-cobalt-600: #004fcc;
71
+ --hop-cobalt-500: #0165fc;
72
+ --hop-cobalt-400: #3a82ff;
73
+ --hop-cobalt-300: #6aa3ff;
74
+ --hop-cobalt-200: #99c2ff;
75
+ --hop-cobalt-100: #c2daff;
76
+ --hop-cobalt-75: #d6e7ff;
77
+ --hop-cobalt-50: #e6f0ff;
78
+ --hop-cobalt-25: #f2f7ff;
79
+ --hop-mint-900: #063527;
80
+ --hop-mint-800: #084a34;
81
+ --hop-mint-700: #0a6042;
82
+ --hop-mint-600: #0b6f4c;
83
+ --hop-mint-500: #0d8058;
84
+ --hop-mint-400: #10a96f;
85
+ --hop-mint-300: #12cb80;
86
+ --hop-mint-200: #0be57d;
87
+ --hop-mint-100: #66ecae;
88
+ --hop-mint-75: #97f2c8;
89
+ --hop-mint-50: #d7faea;
90
+ --hop-mint-25: #eafdf3;
91
+ --hop-amber-900: #3d3200;
92
+ --hop-amber-800: #574500;
93
+ --hop-amber-700: #705900;
94
+ --hop-amber-600: #8a6c00;
95
+ --hop-amber-500: #a68000;
96
+ --hop-amber-400: #cfa000;
97
+ --hop-amber-300: #ffb700;
98
+ --hop-amber-200: #ffc94a;
99
+ --hop-amber-100: #ffd873;
100
+ --hop-amber-75: #ffe39a;
101
+ --hop-amber-50: #fff1cc;
102
+ --hop-amber-25: #fff6e0;
103
+ --hop-rose-900: #2b1e23;
104
+ --hop-rose-800: #3d2630;
105
+ --hop-rose-700: #542f3e;
106
+ --hop-rose-600: #6a394c;
107
+ --hop-rose-500: #80435a;
108
+ --hop-rose-400: #995068;
109
+ --hop-rose-300: #fc5992;
110
+ --hop-rose-200: #f47c9e;
111
+ --hop-rose-100: #f7a3ba;
112
+ --hop-rose-75: #f9c1cf;
113
+ --hop-rose-50: #fbd6df;
114
+ --hop-rose-25: #fdecef;
69
115
  --hop-samoyed: #ffffff;
70
116
  --hop-rock-900: #232426;
71
117
  --hop-rock-800: #313335;
@@ -513,6 +559,38 @@
513
559
  --hop-status-caution-border-hover: var(--hop-koi-500);
514
560
  --hop-status-caution-border-disabled: var(--hop-koi-600);
515
561
  --hop-status-caution-border: var(--hop-koi-400);
562
+ --hop-secondary-icon-strong-hover: var(--hop-samoyed);
563
+ --hop-secondary-icon-strong: var(--hop-samoyed);
564
+ --hop-secondary-icon-disabled: var(--hop-koi-700);
565
+ --hop-secondary-icon-selected: var(--hop-koi-200);
566
+ --hop-secondary-icon-press: var(--hop-koi-75);
567
+ --hop-secondary-icon-hover: var(--hop-koi-200);
568
+ --hop-secondary-icon: var(--hop-koi-100);
569
+ --hop-secondary-border-focus: var(--hop-koi-300);
570
+ --hop-secondary-border-selected: var(--hop-koi-100);
571
+ --hop-secondary-border-press: var(--hop-koi-200);
572
+ --hop-secondary-border: var(--hop-koi-300);
573
+ --hop-secondary-surface-strong-selected: var(--hop-koi-800);
574
+ --hop-secondary-surface-strong-press: var(--hop-koi-75);
575
+ --hop-secondary-surface-strong-hover: var(--hop-koi-100);
576
+ --hop-secondary-surface-strong: var(--hop-koi-300);
577
+ --hop-secondary-surface-weak-selected: var(--hop-koi-600);
578
+ --hop-secondary-surface-weak-press: var(--hop-koi-700);
579
+ --hop-secondary-surface-weak-hover: var(--hop-koi-800);
580
+ --hop-secondary-surface-weak: var(--hop-koi-900);
581
+ --hop-secondary-surface-disabled: var(--hop-koi-700);
582
+ --hop-secondary-surface-focus: var(--hop-koi-900);
583
+ --hop-secondary-surface-selected: var(--hop-koi-800);
584
+ --hop-secondary-surface-press: var(--hop-koi-500);
585
+ --hop-secondary-surface-hover: var(--hop-koi-400);
586
+ --hop-secondary-surface: var(--hop-koi-200);
587
+ --hop-secondary-text-strong-hover: var(--hop-samoyed);
588
+ --hop-secondary-text-strong: var(--hop-samoyed);
589
+ --hop-secondary-text-disabled: var(--hop-koi-700);
590
+ --hop-secondary-text-selected: var(--hop-koi-200);
591
+ --hop-secondary-text-press: var(--hop-koi-75);
592
+ --hop-secondary-text-hover: var(--hop-koi-200);
593
+ --hop-secondary-text: var(--hop-koi-100);
516
594
  --hop-information-text-weak: var(--hop-coastal-75);
517
595
  --hop-information-text: var(--hop-coastal-900);
518
596
  --hop-information-surface-weak: var(--hop-coastal-800);
@@ -685,6 +763,9 @@
685
763
  --hop-primary-surface-active: var(--hop-sapphire-500);
686
764
  --hop-primary-icon-active: var(--hop-sapphire-75);
687
765
  --hop-primary-border-active: var(--hop-sapphire-500);
766
+ --hop-neutral-text-always-dark: var(--hop-rock-900);
767
+ --hop-neutral-text-always-light: var(--hop-samoyed);
768
+ --hop-neutral-text-inverse: var(--hop-samoyed);
688
769
  --hop-neutral-text-weakest: var(--hop-rock-300);
689
770
  --hop-neutral-text-weak-selected: var(--hop-rock-75);
690
771
  --hop-neutral-text-weak-press: var(--hop-rock-50);
@@ -696,6 +777,9 @@
696
777
  --hop-neutral-text-disabled: var(--hop-rock-500);
697
778
  --hop-neutral-text-selected: var(--hop-rock-900);
698
779
  --hop-neutral-text: var(--hop-rock-25);
780
+ --hop-neutral-surface-always-dark: var(--hop-rock-900);
781
+ --hop-neutral-surface-always-light: var(--hop-samoyed);
782
+ --hop-neutral-surface-inverse: var(--hop-samoyed);
699
783
  --hop-neutral-surface-weakest-hover: var(--hop-rock-800);
700
784
  --hop-neutral-surface-weakest-selected: var(--hop-rock-800);
701
785
  --hop-neutral-surface-weak-press: var(--hop-rock-600);
@@ -709,6 +793,9 @@
709
793
  --hop-neutral-surface-disabled: var(--hop-rock-700);
710
794
  --hop-neutral-surface-selected: var(--hop-toad-25);
711
795
  --hop-neutral-surface: var(--hop-abyss);
796
+ --hop-neutral-icon-always-dark: var(--hop-rock-900);
797
+ --hop-neutral-icon-always-light: var(--hop-samoyed);
798
+ --hop-neutral-icon-inverse: var(--hop-samoyed);
712
799
  --hop-neutral-icon-weakest: var(--hop-rock-400);
713
800
  --hop-neutral-icon-weak-selected: var(--hop-rock-75);
714
801
  --hop-neutral-icon-weak-press: var(--hop-rock-50);