@common-origin/design-system 3.0.0 → 3.2.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 (126) hide show
  1. package/dist/client.js +2622 -830
  2. package/dist/client.js.map +1 -1
  3. package/dist/components/atoms/Badge/Badge.d.mts +2 -2
  4. package/dist/components/atoms/Badge/Badge.d.ts +2 -2
  5. package/dist/components/atoms/Badge/Badge.mjs +15 -9
  6. package/dist/components/atoms/Box/Box.d.mts +3 -2
  7. package/dist/components/atoms/Box/Box.d.ts +3 -2
  8. package/dist/components/atoms/Button/Button.mjs +1 -1
  9. package/dist/components/atoms/Chip/shared/ChipBase.mjs +1 -1
  10. package/dist/components/atoms/IconButton/IconButton.mjs +1 -1
  11. package/dist/components/atoms/ProgressBar/ProgressBar.d.mts +1 -1
  12. package/dist/components/atoms/ProgressBar/ProgressBar.d.ts +1 -1
  13. package/dist/components/atoms/Tag/Tag.d.mts +1 -1
  14. package/dist/components/atoms/Tag/Tag.d.ts +1 -1
  15. package/dist/components/atoms/Tooltip/Tooltip.d.mts +47 -0
  16. package/dist/components/atoms/Tooltip/Tooltip.d.ts +47 -0
  17. package/dist/components/atoms/Tooltip/Tooltip.mjs +214 -0
  18. package/dist/components/atoms/Tooltip/Tooltip.mjs.map +1 -0
  19. package/dist/components/atoms/Tooltip/index.d.mts +2 -0
  20. package/dist/components/atoms/Tooltip/index.d.ts +2 -0
  21. package/dist/components/atoms/index.d.mts +1 -0
  22. package/dist/components/atoms/index.d.ts +1 -0
  23. package/dist/components/index.d.mts +1 -0
  24. package/dist/components/index.d.ts +1 -0
  25. package/dist/components/molecules/ActionSheet/ActionSheet.mjs +3 -2
  26. package/dist/components/molecules/Alert/Alert.mjs +2 -2
  27. package/dist/components/molecules/Checkbox/SelectableInputBase.mjs +1 -1
  28. package/dist/components/molecules/ChipGroup/ChipGroup.mjs +1 -0
  29. package/dist/components/molecules/Dropdown/Dropdown.mjs +1 -1
  30. package/dist/components/molecules/List/List.d.mts +2 -0
  31. package/dist/components/molecules/List/List.d.ts +2 -0
  32. package/dist/components/molecules/List/ListItem.d.mts +2 -0
  33. package/dist/components/molecules/List/ListItem.d.ts +2 -0
  34. package/dist/components/molecules/List/ListItem.mjs +7 -7
  35. package/dist/components/molecules/Menu/Menu.d.mts +124 -0
  36. package/dist/components/molecules/Menu/Menu.d.ts +124 -0
  37. package/dist/components/molecules/Menu/Menu.mjs +476 -0
  38. package/dist/components/molecules/Menu/Menu.mjs.map +1 -0
  39. package/dist/components/molecules/Menu/index.d.mts +2 -0
  40. package/dist/components/molecules/Menu/index.d.ts +2 -0
  41. package/dist/components/molecules/Modal/Modal.mjs +1 -1
  42. package/dist/components/molecules/NumberInput/NumberInput.mjs +2 -1
  43. package/dist/components/molecules/PasswordField/PasswordField.mjs +3 -2
  44. package/dist/components/molecules/SearchField/SearchField.mjs +5 -3
  45. package/dist/components/molecules/Sheet/Sheet.mjs +3 -3
  46. package/dist/components/molecules/SidebarNavItem/SidebarNavContext.d.mts +13 -0
  47. package/dist/components/molecules/SidebarNavItem/SidebarNavContext.d.ts +13 -0
  48. package/dist/components/molecules/SidebarNavItem/SidebarNavContext.mjs +13 -0
  49. package/dist/components/molecules/SidebarNavItem/SidebarNavContext.mjs.map +1 -0
  50. package/dist/components/molecules/SidebarNavItem/SidebarNavItem.d.mts +44 -0
  51. package/dist/components/molecules/SidebarNavItem/SidebarNavItem.d.ts +44 -0
  52. package/dist/components/molecules/SidebarNavItem/SidebarNavItem.mjs +235 -0
  53. package/dist/components/molecules/SidebarNavItem/SidebarNavItem.mjs.map +1 -0
  54. package/dist/components/molecules/SidebarNavItem/index.d.mts +2 -0
  55. package/dist/components/molecules/SidebarNavItem/index.d.ts +2 -0
  56. package/dist/components/molecules/SidebarNavItem/sidebarNavMotion.d.mts +30 -0
  57. package/dist/components/molecules/SidebarNavItem/sidebarNavMotion.d.ts +30 -0
  58. package/dist/components/molecules/SidebarNavItem/sidebarNavMotion.mjs +69 -0
  59. package/dist/components/molecules/SidebarNavItem/sidebarNavMotion.mjs.map +1 -0
  60. package/dist/components/molecules/SidebarNavSection/SidebarNavSection.d.mts +36 -0
  61. package/dist/components/molecules/SidebarNavSection/SidebarNavSection.d.ts +36 -0
  62. package/dist/components/molecules/SidebarNavSection/SidebarNavSection.mjs +202 -0
  63. package/dist/components/molecules/SidebarNavSection/SidebarNavSection.mjs.map +1 -0
  64. package/dist/components/molecules/SidebarNavSection/index.d.mts +2 -0
  65. package/dist/components/molecules/SidebarNavSection/index.d.ts +2 -0
  66. package/dist/components/molecules/TabBar/TabBar.mjs +3 -3
  67. package/dist/components/molecules/TransactionListItem/TransactionListItem.mjs +1 -1
  68. package/dist/components/molecules/WorkspaceSwitcher/WorkspaceSwitcher.d.mts +39 -0
  69. package/dist/components/molecules/WorkspaceSwitcher/WorkspaceSwitcher.d.ts +39 -0
  70. package/dist/components/molecules/WorkspaceSwitcher/WorkspaceSwitcher.mjs +133 -0
  71. package/dist/components/molecules/WorkspaceSwitcher/WorkspaceSwitcher.mjs.map +1 -0
  72. package/dist/components/molecules/WorkspaceSwitcher/index.d.mts +2 -0
  73. package/dist/components/molecules/WorkspaceSwitcher/index.d.ts +2 -0
  74. package/dist/components/molecules/index.d.mts +4 -0
  75. package/dist/components/molecules/index.d.ts +4 -0
  76. package/dist/components/organisms/SidebarNav/SidebarNav.d.mts +52 -0
  77. package/dist/components/organisms/SidebarNav/SidebarNav.d.ts +52 -0
  78. package/dist/components/organisms/SidebarNav/SidebarNav.mjs +346 -0
  79. package/dist/components/organisms/SidebarNav/SidebarNav.mjs.map +1 -0
  80. package/dist/components/organisms/SidebarNav/index.d.mts +2 -0
  81. package/dist/components/organisms/SidebarNav/index.d.ts +2 -0
  82. package/dist/components/organisms/index.d.mts +1 -0
  83. package/dist/components/organisms/index.d.ts +1 -0
  84. package/dist/data.js +155 -68
  85. package/dist/data.js.map +1 -1
  86. package/dist/index.js +11 -0
  87. package/dist/index.js.map +1 -1
  88. package/dist/index.mjs +6 -0
  89. package/dist/index.mjs.map +1 -1
  90. package/dist/lib/floatingPosition.d.mts +43 -0
  91. package/dist/lib/floatingPosition.d.ts +43 -0
  92. package/dist/lib/floatingPosition.mjs +86 -0
  93. package/dist/lib/floatingPosition.mjs.map +1 -0
  94. package/dist/lib/keyboardFocus.d.mts +6 -0
  95. package/dist/lib/keyboardFocus.d.ts +6 -0
  96. package/dist/lib/keyboardFocus.mjs +17 -0
  97. package/dist/lib/keyboardFocus.mjs.map +1 -0
  98. package/dist/lib/styleUtils.d.mts +4 -0
  99. package/dist/lib/styleUtils.d.ts +4 -0
  100. package/dist/lib/styleUtils.mjs +5 -1
  101. package/dist/lib/styleUtils.mjs.map +1 -1
  102. package/dist/lib/tokenAliases.mjs +1 -0
  103. package/dist/lib/tokenAliases.mjs.map +1 -1
  104. package/dist/lib/useFloatingLayer.d.mts +32 -0
  105. package/dist/lib/useFloatingLayer.d.ts +32 -0
  106. package/dist/lib/useFloatingLayer.mjs +95 -0
  107. package/dist/lib/useFloatingLayer.mjs.map +1 -0
  108. package/dist/styles/icons.json +30 -1
  109. package/dist/styles/icons.json.mjs +34 -3
  110. package/dist/styles/icons.json.mjs.map +1 -1
  111. package/dist/styles/tokens.d.mts +139 -32
  112. package/dist/styles/tokens.d.ts +139 -32
  113. package/dist/styles/tokens.json +122 -66
  114. package/dist/styles/tokens.json.mjs +122 -66
  115. package/dist/styles/tokens.json.mjs.map +1 -1
  116. package/dist/tokens/index.js +122 -66
  117. package/dist/tokens/index.js.map +1 -1
  118. package/dist/tokens/index.mjs +122 -66
  119. package/dist/tokens/index.mjs.map +1 -1
  120. package/dist/tokens/styles/tokens.d.mts +139 -32
  121. package/dist/tokens/styles/tokens.d.ts +139 -32
  122. package/dist/tokens.css +1137 -86
  123. package/dist/types/icons.d.mts +1 -1
  124. package/dist/types/icons.d.ts +1 -1
  125. package/dist/types/icons.mjs.map +1 -1
  126. package/package.json +4 -2
@@ -37,7 +37,8 @@ var base = {
37
37
  "4": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
38
38
  "5": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
39
39
  "6": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
40
- none: "none"
40
+ none: "none",
41
+ inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"
41
42
  },
42
43
  zIndex: {
43
44
  "0": "0",
@@ -67,7 +68,8 @@ var base = {
67
68
  "80": "0.8",
68
69
  "90": "0.9",
69
70
  "95": "0.95",
70
- "100": "1"
71
+ "100": "1",
72
+ scrim: "0.5"
71
73
  },
72
74
  dimension: {
73
75
  "0": "0",
@@ -116,6 +118,15 @@ var base = {
116
118
  color: {
117
119
  transparent: "transparent",
118
120
  white: "#ffffff",
121
+ surface: {
122
+ page: "#fcfcfc",
123
+ raised: "#ffffff",
124
+ overlay: "#ffffff"
125
+ },
126
+ ink: {
127
+ light: "#fcfcfc",
128
+ dark: "#222222"
129
+ },
119
130
  gray: {
120
131
  "100": "#fcfcfc",
121
132
  "200": "#f9f9f9",
@@ -144,6 +155,20 @@ var base = {
144
155
  "1100": "rgba(34, 34, 34, 0.706)",
145
156
  "1200": "rgba(34, 34, 34, 1)"
146
157
  },
158
+ "gray-alpha-inverse": {
159
+ "100": "rgba(252, 252, 252, 0.014)",
160
+ "200": "rgba(252, 252, 252, 0.027)",
161
+ "300": "rgba(252, 252, 252, 0.059)",
162
+ "400": "rgba(252, 252, 252, 0.09)",
163
+ "500": "rgba(252, 252, 252, 0.122)",
164
+ "600": "rgba(252, 252, 252, 0.158)",
165
+ "700": "rgba(252, 252, 252, 0.208)",
166
+ "800": "rgba(252, 252, 252, 0.502)",
167
+ "900": "rgba(252, 252, 252, 0.557)",
168
+ "1000": "rgba(252, 252, 252, 0.606)",
169
+ "1100": "rgba(252, 252, 252, 0.706)",
170
+ "1200": "rgba(252, 252, 252, 1)"
171
+ },
147
172
  accent: {
148
173
  "100": "#fbfcfd",
149
174
  "200": "#f7f9fc",
@@ -156,7 +181,8 @@ var base = {
156
181
  "900": "#0082fc",
157
182
  "1000": "#0278e7",
158
183
  "1100": "#0162bf",
159
- "1200": "#0f2339"
184
+ "1200": "#0f2339",
185
+ solid: "#0162bf"
160
186
  },
161
187
  "accent-alpha": {
162
188
  "100": "rgba(5, 68, 130, 0.016)",
@@ -184,7 +210,8 @@ var base = {
184
210
  "900": "#009762",
185
211
  "1000": "#018b5a",
186
212
  "1100": "#017249",
187
- "1200": "#12261b"
213
+ "1200": "#12261b",
214
+ solid: "#017249"
188
215
  },
189
216
  "success-alpha": {
190
217
  "100": "rgba(5, 172, 47, 0.024)",
@@ -212,7 +239,8 @@ var base = {
212
239
  "900": "#ad7b00",
213
240
  "1000": "#9f7102",
214
241
  "1100": "#835c00",
215
- "1200": "#292111"
242
+ "1200": "#292111",
243
+ solid: "#835c00"
216
244
  },
217
245
  "warning-alpha": {
218
246
  "100": "rgba(155, 105, 5, 0.02)",
@@ -240,7 +268,8 @@ var base = {
240
268
  "900": "#da5f00",
241
269
  "1000": "#c85701",
242
270
  "1100": "#a54703",
243
- "1200": "#341c10"
271
+ "1200": "#341c10",
272
+ solid: "#a54703"
244
273
  },
245
274
  "serious-alpha": {
246
275
  "100": "rgba(193, 68, 5, 0.016)",
@@ -268,7 +297,8 @@ var base = {
268
297
  "900": "#ff2b21",
269
298
  "1000": "#f30004",
270
299
  "1100": "#c90002",
271
- "1200": "#3d1611"
300
+ "1200": "#3d1611",
301
+ solid: "#c90002"
272
302
  },
273
303
  "danger-alpha": {
274
304
  "100": "rgba(172, 5, 5, 0.012)",
@@ -511,7 +541,7 @@ var component = {
511
541
  primary: {
512
542
  backgroundColor: "#222222",
513
543
  textColor: "#fcfcfc",
514
- borderRadius: "0.25rem",
544
+ borderRadius: "0.5rem",
515
545
  font: "500 1rem/1.5rem 'Inter', sans-serif"
516
546
  },
517
547
  hover: {
@@ -524,21 +554,21 @@ var component = {
524
554
  outline: "0.125rem solid #222222"
525
555
  },
526
556
  disabled: {
527
- backgroundColor: "#f2f2f2",
557
+ backgroundColor: "rgba(34, 34, 34, 0.059)",
528
558
  textColor: "rgba(34, 34, 34, 0.208)"
529
559
  },
530
560
  variants: {
531
561
  secondary: {
532
- backgroundColor: "#f2f2f2",
562
+ backgroundColor: "rgba(34, 34, 34, 0.059)",
533
563
  textColor: "#222222",
534
564
  hover: {
535
- backgroundColor: "#ebebeb"
565
+ backgroundColor: "rgba(34, 34, 34, 0.09)"
536
566
  },
537
567
  active: {
538
- backgroundColor: "#e4e4e4"
568
+ backgroundColor: "rgba(34, 34, 34, 0.122)"
539
569
  },
540
570
  disabled: {
541
- backgroundColor: "#f2f2f2",
571
+ backgroundColor: "rgba(34, 34, 34, 0.059)",
542
572
  textColor: "rgba(34, 34, 34, 0.208)"
543
573
  }
544
574
  },
@@ -546,10 +576,10 @@ var component = {
546
576
  backgroundColor: "transparent",
547
577
  textColor: "#222222",
548
578
  hover: {
549
- backgroundColor: "#f2f2f2"
579
+ backgroundColor: "rgba(34, 34, 34, 0.059)"
550
580
  },
551
581
  active: {
552
- backgroundColor: "#ebebeb"
582
+ backgroundColor: "rgba(34, 34, 34, 0.09)"
553
583
  },
554
584
  disabled: {
555
585
  backgroundColor: "transparent",
@@ -566,7 +596,7 @@ var component = {
566
596
  backgroundColor: "color-mix(in srgb, #0162bf, #fcfcfc calc(0.12 * 100%))"
567
597
  },
568
598
  disabled: {
569
- backgroundColor: "#f2f2f2",
599
+ backgroundColor: "rgba(34, 34, 34, 0.059)",
570
600
  textColor: "rgba(34, 34, 34, 0.208)"
571
601
  }
572
602
  },
@@ -580,7 +610,7 @@ var component = {
580
610
  backgroundColor: "color-mix(in srgb, #c90002, #fcfcfc calc(0.12 * 100%))"
581
611
  },
582
612
  disabled: {
583
- backgroundColor: "#f2f2f2",
613
+ backgroundColor: "rgba(34, 34, 34, 0.059)",
584
614
  textColor: "rgba(34, 34, 34, 0.208)"
585
615
  }
586
616
  }
@@ -603,16 +633,16 @@ var component = {
603
633
  size: "1.25rem"
604
634
  },
605
635
  "default": {
606
- backgroundColor: "#f2f2f2",
636
+ backgroundColor: "rgba(34, 34, 34, 0.059)",
607
637
  textColor: "#222222",
608
- borderRadius: "0.75rem",
638
+ borderRadius: "10rem",
609
639
  font: "400 1rem/1.5rem 'Inter', sans-serif"
610
640
  },
611
641
  focus: {
612
642
  outline: "0.125rem solid #222222"
613
643
  },
614
644
  disabled: {
615
- backgroundColor: "#f2f2f2",
645
+ backgroundColor: "rgba(34, 34, 34, 0.059)",
616
646
  textColor: "rgba(34, 34, 34, 0.208)"
617
647
  },
618
648
  variants: {
@@ -623,7 +653,7 @@ var component = {
623
653
  backgroundColor: "#fcfcfc"
624
654
  },
625
655
  active: {
626
- backgroundColor: "#f2f2f2"
656
+ backgroundColor: "rgba(34, 34, 34, 0.059)"
627
657
  },
628
658
  disabled: {
629
659
  backgroundColor: "#ffffff",
@@ -639,7 +669,7 @@ var component = {
639
669
  },
640
670
  iconButton: {
641
671
  primary: {
642
- borderRadius: "0.25rem"
672
+ borderRadius: "0.5rem"
643
673
  },
644
674
  focus: {
645
675
  outline: "0.125rem solid #222222"
@@ -660,7 +690,7 @@ var component = {
660
690
  }
661
691
  },
662
692
  progressBar: {
663
- backgroundColor: "#f2f2f2",
693
+ backgroundColor: "rgba(34, 34, 34, 0.059)",
664
694
  sizes: {
665
695
  sm: {
666
696
  height: "0.25rem"
@@ -681,7 +711,7 @@ var component = {
681
711
  backgroundColor: "#ffffff",
682
712
  textColor: "#222222",
683
713
  borderColor: "#909090",
684
- borderRadius: "0.25rem",
714
+ borderRadius: "0.5rem",
685
715
  borderWidth: "0.0625rem",
686
716
  font: "400 1rem/1.5rem 'Inter', sans-serif"
687
717
  },
@@ -706,7 +736,7 @@ var component = {
706
736
  }
707
737
  },
708
738
  disabled: {
709
- backgroundColor: "#f2f2f2",
739
+ backgroundColor: "rgba(34, 34, 34, 0.059)",
710
740
  textColor: "rgba(34, 34, 34, 0.208)",
711
741
  borderColor: "#d1d1d1"
712
742
  },
@@ -754,19 +784,19 @@ var component = {
754
784
  alert: {
755
785
  severity: {
756
786
  error: {
757
- background: "#faf0ee",
787
+ background: "rgba(180, 31, 1, 0.067)",
758
788
  text: "#c90002"
759
789
  },
760
790
  warning: {
761
- background: "#faf1e3",
791
+ background: "rgba(210, 128, 0, 0.11)",
762
792
  text: "#835c00"
763
793
  },
764
794
  info: {
765
- background: "#edf3fa",
795
+ background: "rgba(1, 86, 185, 0.071)",
766
796
  text: "#0162bf"
767
797
  },
768
798
  success: {
769
- background: "#dbf9e8",
799
+ background: "rgba(1, 213, 93, 0.142)",
770
800
  text: "#017249"
771
801
  }
772
802
  },
@@ -789,7 +819,7 @@ var component = {
789
819
  }
790
820
  },
791
821
  title: {
792
- typography: "500 1.125rem/1.5rem 'Inter', sans-serif",
822
+ typography: "600 1.125rem/1.5rem 'Inter', sans-serif",
793
823
  fontWeight: "600",
794
824
  lineHeight: "1.25rem"
795
825
  },
@@ -833,6 +863,14 @@ var component = {
833
863
  fontSize: "0.75rem",
834
864
  lineHeight: "1.25rem"
835
865
  },
866
+ sidebarNav: {
867
+ width: {
868
+ rail: "3.5rem",
869
+ narrow: "14rem",
870
+ "default": "16rem",
871
+ wide: "18.75rem"
872
+ }
873
+ },
836
874
  slider: {
837
875
  thumb: {
838
876
  shadow: {
@@ -859,7 +897,8 @@ var component = {
859
897
  },
860
898
  checkbox: {
861
899
  box: {
862
- size: "1.25rem"
900
+ size: "1.25rem",
901
+ borderRadius: "0.25rem"
863
902
  },
864
903
  row: {
865
904
  minHeight: "2rem"
@@ -891,31 +930,34 @@ var component = {
891
930
  status: {
892
931
  pending: {
893
932
  text: "#636363",
894
- background: "#f2f2f2"
933
+ background: "rgba(34, 34, 34, 0.059)"
895
934
  },
896
935
  completed: {
897
936
  text: "#017249",
898
- background: "#dbf9e8"
937
+ background: "rgba(1, 213, 93, 0.142)"
899
938
  },
900
939
  failed: {
901
940
  text: "#c90002",
902
- background: "#faf0ee"
941
+ background: "rgba(180, 31, 1, 0.067)"
903
942
  },
904
943
  cancelled: {
905
944
  text: "#636363",
906
- background: "#f2f2f2"
945
+ background: "rgba(34, 34, 34, 0.059)"
907
946
  },
908
947
  processing: {
909
948
  text: "#0162bf",
910
- background: "#edf3fa"
949
+ background: "rgba(1, 86, 185, 0.071)"
911
950
  },
912
951
  scheduled: {
913
952
  text: "#636363",
914
- background: "#f2f2f2"
953
+ background: "rgba(34, 34, 34, 0.059)"
915
954
  }
916
955
  },
917
956
  track: {
918
- background: "#f2f2f2"
957
+ background: "rgba(34, 34, 34, 0.059)"
958
+ },
959
+ overlay: {
960
+ borderRadius: "1.5rem"
919
961
  }
920
962
  };
921
963
  var semantic = {
@@ -991,12 +1033,15 @@ var semantic = {
991
1033
  "600": "1.5rem",
992
1034
  "800": "2rem",
993
1035
  "1200": "3rem",
1036
+ "1400": "3.5rem",
994
1037
  "1500": "3.75rem",
995
1038
  "1800": "4.5rem",
996
1039
  "2000": "5rem",
997
1040
  "3000": "7.5rem",
998
1041
  "4500": "11.25rem",
999
1042
  "5000": "12.5rem",
1043
+ "5600": "14rem",
1044
+ "6400": "16rem",
1000
1045
  "7500": "18.75rem",
1001
1046
  "9000": "22.5rem",
1002
1047
  "10000": "25rem",
@@ -1008,6 +1053,11 @@ var semantic = {
1008
1053
  md: "2.5rem",
1009
1054
  lg: "3rem"
1010
1055
  },
1056
+ row: {
1057
+ sm: "2rem",
1058
+ md: "3rem",
1059
+ lg: "4.5rem"
1060
+ },
1011
1061
  overlay: {
1012
1062
  sm: "25rem",
1013
1063
  md: "35rem",
@@ -1046,6 +1096,7 @@ var semantic = {
1046
1096
  text: {
1047
1097
  "default": "#222222",
1048
1098
  inverse: "#fcfcfc",
1099
+ "on-fill": "#fcfcfc",
1049
1100
  disabled: "rgba(34, 34, 34, 0.208)",
1050
1101
  success: "#017249",
1051
1102
  warning: "#835c00",
@@ -1072,6 +1123,7 @@ var semantic = {
1072
1123
  "default": "#222222",
1073
1124
  disabled: "rgba(34, 34, 34, 0.208)",
1074
1125
  inverse: "#fcfcfc",
1126
+ "on-fill": "#fcfcfc",
1075
1127
  success: "#017249",
1076
1128
  warning: "#835c00",
1077
1129
  muted: "#636363",
@@ -1084,53 +1136,53 @@ var semantic = {
1084
1136
  gray: "#909090",
1085
1137
  "gray-strong": "#636363",
1086
1138
  "gray-text": "#636363",
1087
- "gray-muted": "#f2f2f2",
1139
+ "gray-muted": "rgba(34, 34, 34, 0.059)",
1088
1140
  olive: "#889903",
1089
1141
  "olive-strong": "#5d6900",
1090
1142
  "olive-text": "#5d6900",
1091
- "olive-muted": "#eff6d4",
1143
+ "olive-muted": "rgba(160, 202, 1, 0.169)",
1092
1144
  periwinkle: "#7a84ff",
1093
1145
  "periwinkle-strong": "#533eff",
1094
1146
  "periwinkle-text": "#533eff",
1095
- "periwinkle-muted": "#f0f2fa",
1147
+ "periwinkle-muted": "rgba(1, 35, 170, 0.059)",
1096
1148
  rose: "#ff4989",
1097
1149
  "rose-strong": "#c4005d",
1098
1150
  "rose-text": "#c4005d",
1099
- "rose-muted": "#faeff1",
1151
+ "rose-muted": "rgba(176, 1, 33, 0.063)",
1100
1152
  magenta: "#fd00fa",
1101
1153
  "magenta-strong": "#b100af",
1102
1154
  "magenta-text": "#b100af",
1103
- "magenta-muted": "#faeff9"
1155
+ "magenta-muted": "rgba(176, 1, 160, 0.063)"
1104
1156
  },
1105
1157
  fill: {
1106
1158
  emphasis: "#222222",
1107
- muted: "#f2f2f2",
1159
+ muted: "rgba(34, 34, 34, 0.059)",
1108
1160
  inverse: "#222222",
1109
1161
  accent: "#0162bf",
1110
- "accent-muted": "#edf3fa",
1111
- "accent-muted-hover": "#e3ecf8",
1112
- "accent-muted-pressed": "#d8e5f6",
1162
+ "accent-muted": "rgba(1, 86, 185, 0.071)",
1163
+ "accent-muted-hover": "rgba(0, 82, 191, 0.11)",
1164
+ "accent-muted-pressed": "rgba(0, 85, 196, 0.153)",
1113
1165
  "accent-hover": "color-mix(in srgb, #0162bf, #fcfcfc calc(0.08 * 100%))",
1114
1166
  "accent-pressed": "color-mix(in srgb, #0162bf, #fcfcfc calc(0.12 * 100%))",
1115
1167
  danger: "#c90002",
1116
1168
  "danger-hover": "color-mix(in srgb, #c90002, #fcfcfc calc(0.08 * 100%))",
1117
1169
  "danger-pressed": "color-mix(in srgb, #c90002, #fcfcfc calc(0.12 * 100%))",
1118
- "danger-muted": "#faf0ee",
1170
+ "danger-muted": "rgba(180, 31, 1, 0.067)",
1119
1171
  success: "#017249",
1120
- "success-muted": "#dbf9e8",
1172
+ "success-muted": "rgba(1, 213, 93, 0.142)",
1121
1173
  warning: "#835c00",
1122
- "warning-muted": "#faf1e3",
1123
- disabled: "#f2f2f2",
1124
- "default": "#f2f2f2",
1125
- "default-hover": "#ebebeb",
1126
- "default-pressed": "#e4e4e4",
1174
+ "warning-muted": "rgba(210, 128, 0, 0.11)",
1175
+ disabled: "rgba(34, 34, 34, 0.059)",
1176
+ "default": "rgba(34, 34, 34, 0.059)",
1177
+ "default-hover": "rgba(34, 34, 34, 0.09)",
1178
+ "default-pressed": "rgba(34, 34, 34, 0.122)",
1127
1179
  none: "transparent",
1128
- "none-hover": "rgba(34, 34, 34, 0.1)",
1129
- "none-pressed": "rgba(34, 34, 34, 0.15)",
1130
- "inverse-none-hover": "rgba(255, 255, 255, 0.2)",
1180
+ "none-hover": "rgba(34, 34, 34, 0.09)",
1181
+ "none-pressed": "rgba(34, 34, 34, 0.158)",
1182
+ "inverse-none-hover": "rgba(252, 252, 252, 0.208)",
1131
1183
  serious: "#a54703",
1132
- "serious-muted": "#faf0eb",
1133
- "ai-muted": "#f4f0fa"
1184
+ "serious-muted": "rgba(192, 65, 2, 0.079)",
1185
+ "ai-muted": "rgba(69, 1, 170, 0.059)"
1134
1186
  },
1135
1187
  data: {
1136
1188
  positive: "#009762",
@@ -1164,12 +1216,12 @@ var semantic = {
1164
1216
  },
1165
1217
  typography: {
1166
1218
  display: "700 5rem/4.5rem 'Inter', sans-serif",
1167
- h1: "700 3rem/3rem 'Inter', sans-serif",
1168
- h2: "700 2rem/2.5rem 'Inter', sans-serif",
1169
- h3: "700 1.75rem/2.25rem 'Inter', sans-serif",
1170
- h4: "700 1.5rem/2rem 'Inter', sans-serif",
1171
- h5: "500 1.25rem/1.75rem 'Inter', sans-serif",
1172
- h6: "500 1.125rem/1.5rem 'Inter', sans-serif",
1219
+ h1: "600 3rem/3rem 'Inter', sans-serif",
1220
+ h2: "600 2rem/2.5rem 'Inter', sans-serif",
1221
+ h3: "600 1.75rem/2.25rem 'Inter', sans-serif",
1222
+ h4: "600 1.5rem/2rem 'Inter', sans-serif",
1223
+ h5: "600 1.25rem/1.75rem 'Inter', sans-serif",
1224
+ h6: "600 1.125rem/1.5rem 'Inter', sans-serif",
1173
1225
  subtitle: "500 1rem/1.5rem 'Inter', sans-serif",
1174
1226
  body: "400 1rem/1.5rem 'Inter', sans-serif",
1175
1227
  small: "400 0.875rem/1.25rem 'Inter', sans-serif",
@@ -1184,6 +1236,9 @@ var semantic = {
1184
1236
  instant: "0ms",
1185
1237
  moderate: "200ms"
1186
1238
  },
1239
+ delay: {
1240
+ hint: "500ms"
1241
+ },
1187
1242
  easing: {
1188
1243
  standard: "ease-in-out",
1189
1244
  decelerate: "ease-out",
@@ -1244,7 +1299,8 @@ var semantic = {
1244
1299
  surface: {
1245
1300
  base: "#fcfcfc",
1246
1301
  raised: "#ffffff",
1247
- scrim: "rgba(34, 34, 34, 0.5)"
1302
+ overlay: "#ffffff",
1303
+ scrim: "color-mix(in srgb, #222222 calc(0.5 * 100%), transparent)"
1248
1304
  }
1249
1305
  };
1250
1306
  var tokensJson = {
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/types/tokens.ts","../../src/tokens.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\nimport type { Tokens } from '../styles/tokens'\n\n// The published types come from the generated `src/styles/tokens.ts`, which carries each token's\n// description as JSDoc and `@deprecated` on deprecated tokens (decision 0033, #199). Declaring the\n// constant with that type also keeps emitted .d.ts files free of JSON imports, which consumers can\n// only resolve with `resolveJsonModule`.\nexport const tokens: Tokens = tokensJson\n\nexport type { Tokens }\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Tokens-only export for standalone usage\nimport { tokens } from './types/tokens'\n\nexport { tokens }\nexport default tokens\n\nexport type {\n Tokens,\n TokensBase,\n TokensSemantic,\n TokensComponent\n} from './types/tokens'\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA;AACA;AACA;AACA;AACO,IAAM,MAAM,GAAW;;ACP9B;;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/types/tokens.ts","../../src/tokens.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\nimport type { Tokens } from '../styles/tokens'\n\n// The published types come from the generated `src/styles/tokens.ts`, which carries each token's\n// description as JSDoc and `@deprecated` on deprecated tokens (decision 0033, #199). Declaring the\n// constant with that type also keeps emitted .d.ts files free of JSON imports, which consumers can\n// only resolve with `resolveJsonModule`.\nexport const tokens: Tokens = tokensJson\n\nexport type { Tokens }\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Tokens-only export for standalone usage\nimport { tokens } from './types/tokens'\n\nexport { tokens }\nexport default tokens\n\nexport type {\n Tokens,\n TokensBase,\n TokensSemantic,\n TokensComponent\n} from './types/tokens'\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA;AACA;AACA;AACA;AACO,IAAM,MAAM,GAAW;;ACP9B;;;;;"}