@conveyorhq/arrow-ds 2.0.0-beta.7 → 2.0.0-beta.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 (181) hide show
  1. package/package.json +15 -14
  2. package/public/components/Accordion/Accordion.js +8 -10
  3. package/public/components/Avatar/Avatar.js +20 -19
  4. package/public/components/Button/Button.js +2 -2
  5. package/public/components/ConveyorLogo/ConveyorLogo.js +6 -6
  6. package/public/components/Drawer/Drawer.js +7 -7
  7. package/public/components/Frame/Frame.d.ts +1 -1
  8. package/public/components/Icon/Icon.d.ts +1 -0
  9. package/public/components/Icon/Icon.js +3 -1
  10. package/public/components/MenuRenderer/MenuRenderer.js +4 -7
  11. package/public/components/Modal/Modal.js +1 -1
  12. package/public/components/OptionButton/OptionButton.js +18 -13
  13. package/public/components/Select/Select.js +4 -4
  14. package/public/components/Select/SelectPopover.js +6 -6
  15. package/public/components/Select/index.d.ts +2 -0
  16. package/public/components/Select/index.js +3 -0
  17. package/public/components/Select/theme.js +22 -22
  18. package/public/components/Svg/Svg.d.ts +3 -3
  19. package/public/components/Svg/Svg.js +1 -2
  20. package/public/components/Tooltip/Tooltip.js +11 -19
  21. package/public/components/VisuallyHidden/VisuallyHidden.d.ts +2 -1
  22. package/public/components/VisuallyHidden/VisuallyHidden.js +3 -5
  23. package/public/css/styles.css +139 -59
  24. package/public/css/styles.min.css +1 -1
  25. package/public/css/styles.min.css.map +1 -1
  26. package/public/hooks/index.d.ts +3 -0
  27. package/public/hooks/index.js +7 -1
  28. package/public/hooks/useMatchMedia.d.ts +1 -0
  29. package/public/hooks/useMatchMedia.js +27 -0
  30. package/public/hooks/usePrefersReducedMotion.d.ts +1 -0
  31. package/public/hooks/usePrefersReducedMotion.js +9 -0
  32. package/public/hooks/useScreenOrientation.d.ts +1 -0
  33. package/public/hooks/useScreenOrientation.js +24 -0
  34. package/public/{style-dictionary → src/style-dictionary}/dist/tokens.css +1 -0
  35. package/public/src/style-dictionary/dist/tokens.d.ts +428 -0
  36. package/public/src/style-dictionary/dist/tokens.js +428 -0
  37. package/public/src/style-dictionary/dist/tokens.module.js +428 -0
  38. package/public/src/style-dictionary/tailwind.config.js +87 -0
  39. package/public/storybook-components/EnumTable.js +2 -1
  40. package/public/storybook-components/Story.d.ts +2 -1
  41. package/public/storybook-components/Story.js +4 -1
  42. package/public/style-dictionary/dist/tokens.d.ts +428 -422
  43. package/public/style-dictionary/dist/tokens.js +415 -416
  44. package/public/style-dictionary/dist/tokens.module.d.ts +431 -0
  45. package/public/style-dictionary/dist/tokens.module.js +412 -415
  46. package/public/style-dictionary/src/border-radius.d.ts +31 -0
  47. package/public/style-dictionary/src/border-radius.js +10 -9
  48. package/public/style-dictionary/src/border-width.d.ts +21 -0
  49. package/public/style-dictionary/src/border-width.js +9 -8
  50. package/public/style-dictionary/src/color.d.ts +249 -0
  51. package/public/style-dictionary/src/color.js +97 -95
  52. package/public/style-dictionary/src/font-size.d.ts +45 -0
  53. package/public/style-dictionary/src/font-size.js +14 -13
  54. package/public/style-dictionary/src/font-weight.d.ts +13 -0
  55. package/public/style-dictionary/src/font-weight.js +6 -5
  56. package/public/style-dictionary/src/height.d.ts +215 -0
  57. package/public/style-dictionary/src/height.js +10 -10
  58. package/public/style-dictionary/src/leading.d.ts +17 -0
  59. package/public/style-dictionary/src/leading.js +7 -6
  60. package/public/style-dictionary/src/screen-width.d.ts +17 -0
  61. package/public/style-dictionary/src/screen-width.js +7 -6
  62. package/public/style-dictionary/src/shadow.d.ts +63 -0
  63. package/public/style-dictionary/src/shadow.js +19 -18
  64. package/public/style-dictionary/src/spacing.d.ts +197 -0
  65. package/public/style-dictionary/src/spacing.js +68 -67
  66. package/public/style-dictionary/src/tracking.d.ts +13 -0
  67. package/public/style-dictionary/src/tracking.js +6 -5
  68. package/public/style-dictionary/src/type.d.ts +13 -0
  69. package/public/style-dictionary/src/type.js +32 -31
  70. package/public/style-dictionary/src/width.d.ts +287 -0
  71. package/public/style-dictionary/src/width.js +29 -29
  72. package/public/style-dictionary/src/z-index.d.ts +53 -0
  73. package/public/style-dictionary/src/z-index.js +20 -19
  74. package/public/style-dictionary/tailwind.config.d.ts +392 -0
  75. package/public/style-dictionary/tailwind.config.js +51 -72
  76. package/src/components/Accordion/Accordion.tsx +39 -27
  77. package/src/components/Avatar/Avatar.tsx +20 -19
  78. package/src/components/Button/Button.tsx +3 -3
  79. package/src/components/Button/index.css +12 -1
  80. package/src/components/Card/Card.story.mdx +45 -37
  81. package/src/components/ConveyorLogo/ConveyorLogo.tsx +6 -6
  82. package/src/components/Drawer/Drawer.tsx +1 -1
  83. package/src/components/Frame/Frame.story.mdx +140 -5
  84. package/src/components/Frame/Frame.tsx +1 -1
  85. package/src/components/Frame/index.css +8 -13
  86. package/src/components/Icon/Icon.tsx +3 -0
  87. package/src/components/MenuRenderer/MenuRenderer.tsx +7 -9
  88. package/src/components/Modal/Modal.tsx +1 -1
  89. package/src/components/Modal/index.css +8 -3
  90. package/src/components/OptionButton/OptionButton.story.mdx +91 -36
  91. package/src/components/OptionButton/OptionButton.tsx +19 -18
  92. package/src/components/OptionButton/index.css +13 -0
  93. package/src/components/Overlay/Overlay.story.mdx +26 -0
  94. package/src/components/Select/Select.tsx +4 -4
  95. package/src/components/Select/SelectPopover.tsx +6 -6
  96. package/src/components/Select/index.ts +14 -0
  97. package/src/components/Select/theme.ts +22 -22
  98. package/src/components/Svg/Svg.story.mdx +36 -0
  99. package/src/components/Svg/Svg.tsx +6 -4
  100. package/src/components/Text/Text.story.mdx +34 -0
  101. package/src/components/Tooltip/Tooltip.story.mdx +21 -0
  102. package/src/components/Tooltip/Tooltip.tsx +23 -27
  103. package/src/components/Tooltip/index.css +31 -0
  104. package/src/components/VisuallyHidden/VisuallyHidden.story.mdx +54 -0
  105. package/src/components/VisuallyHidden/VisuallyHidden.tsx +10 -5
  106. package/src/components/VisuallyHidden/index.css +3 -0
  107. package/src/css/components.css +2 -0
  108. package/src/docs/Colors.story.mdx +13 -13
  109. package/src/docs/Spacing.story.mdx +4 -20
  110. package/src/docs/Tokens.story.mdx +230 -0
  111. package/src/docs/Typography.story.mdx +17 -94
  112. package/src/docs/hooks/useDisclosureHook.story.mdx +58 -0
  113. package/src/docs/hooks/useKeyPressHook.story.mdx +54 -0
  114. package/src/docs/hooks/useMatchMediaHook.story.mdx +42 -0
  115. package/src/docs/hooks/useOutsideClickHook.story.mdx +56 -0
  116. package/src/docs/hooks/usePrefersReducedMotion.story.mdx +61 -0
  117. package/src/docs/hooks/useScreenOrientationHook.story.mdx +56 -0
  118. package/src/docs/hooks/useStepHook.story.mdx +102 -0
  119. package/src/hooks/index.ts +3 -0
  120. package/src/hooks/useMatchMedia.ts +40 -0
  121. package/src/hooks/usePrefersReducedMotion.ts +9 -0
  122. package/src/hooks/useScreenOrientation.ts +27 -0
  123. package/src/storybook-components/EnumTable.tsx +3 -2
  124. package/src/storybook-components/Story.tsx +13 -1
  125. package/src/style-dictionary/dist/tokens.css +378 -0
  126. package/src/style-dictionary/dist/tokens.d.ts +428 -0
  127. package/src/style-dictionary/dist/tokens.js +428 -0
  128. package/src/style-dictionary/dist/tokens.module.js +428 -0
  129. package/src/style-dictionary/src/border-radius.js +11 -0
  130. package/src/style-dictionary/src/border-width.js +10 -0
  131. package/src/style-dictionary/src/color.js +98 -0
  132. package/src/style-dictionary/src/font-size.js +15 -0
  133. package/src/style-dictionary/src/font-weight.js +7 -0
  134. package/src/style-dictionary/src/height.js +13 -0
  135. package/src/style-dictionary/src/leading.js +8 -0
  136. package/src/style-dictionary/src/screen-width.js +8 -0
  137. package/src/style-dictionary/src/shadow.js +19 -0
  138. package/src/style-dictionary/src/spacing.js +69 -0
  139. package/src/style-dictionary/src/tracking.js +7 -0
  140. package/src/style-dictionary/src/type.js +34 -0
  141. package/src/style-dictionary/src/width.js +32 -0
  142. package/src/style-dictionary/src/z-index.js +21 -0
  143. package/src/style-dictionary/tailwind.config.js +87 -0
  144. package/src/tokens/borders.ts +6 -0
  145. package/src/tokens/box-shadow.ts +3 -0
  146. package/src/tokens/colors.ts +6 -0
  147. package/src/tokens/font-family.ts +3 -0
  148. package/src/tokens/font-size.ts +3 -0
  149. package/src/tokens/font-weight.ts +3 -0
  150. package/src/tokens/height.ts +3 -0
  151. package/src/tokens/index.ts +3 -2
  152. package/src/tokens/letter-spacing.ts +3 -0
  153. package/src/tokens/line-height.ts +3 -0
  154. package/src/tokens/margin.ts +3 -0
  155. package/src/tokens/padding.ts +3 -0
  156. package/src/tokens/screens.ts +3 -0
  157. package/src/tokens/sizing-scale.ts +6 -0
  158. package/src/tokens/width.ts +9 -0
  159. package/src/tokens/will-change.ts +3 -0
  160. package/src/tokens/z-index.ts +3 -0
  161. package/src/types/index.ts +3 -0
  162. package/public/components/Overlay/Overlay.story.d.ts +0 -1
  163. package/public/components/Overlay/Overlay.story.js +0 -12
  164. package/public/components/Svg/Svg.story.d.ts +0 -1
  165. package/public/components/Svg/Svg.story.js +0 -14
  166. package/public/components/Text/Text.story.d.ts +0 -1
  167. package/public/components/Text/Text.story.js +0 -31
  168. package/public/components/VisuallyHidden/VisuallyHidden.story.d.ts +0 -1
  169. package/public/components/VisuallyHidden/VisuallyHidden.story.js +0 -36
  170. package/public/components/useStep/ExampleSetupWizard.d.ts +0 -4
  171. package/public/components/useStep/ExampleSetupWizard.js +0 -33
  172. package/src/components/Overlay/Overlay.md +0 -14
  173. package/src/components/Overlay/Overlay.story.tsx +0 -12
  174. package/src/components/Svg/Svg.md +0 -14
  175. package/src/components/Svg/Svg.story.tsx +0 -15
  176. package/src/components/Text/Text.md +0 -14
  177. package/src/components/Text/Text.story.tsx +0 -12
  178. package/src/components/VisuallyHidden/VisuallyHidden.md +0 -23
  179. package/src/components/VisuallyHidden/VisuallyHidden.story.tsx +0 -19
  180. package/src/components/useStep/ExampleSetupWizard.tsx +0 -63
  181. package/src/components/useStep/useStep.story.mdx +0 -76
@@ -1,427 +1,426 @@
1
- /**
2
- * This tokens file was automatically generated by Style Dictionary
3
- * Please do not edit this file directly; token definitions can be found in style-dictionary.config.js
4
- */
5
-
6
- export const tokens = {
7
- borderRadius: {
8
- none: "0",
9
- px: "1px",
10
- sm: "2px",
11
- md: "3px",
12
- "DEFAULT": "4px",
13
- lg: "8px",
14
- full: "9999px",
15
- },
16
- borderWidth: {
17
- 0: "0",
18
- 1: "1px",
19
- 2: "2px",
20
- 4: "4px",
21
- 8: "8px",
22
- "DEFAULT": "1px",
23
- },
24
- color: {
25
- lighten: {
26
- 100: "rgba(255, 255, 255, 0.04)",
27
- 200: "rgba(255, 255, 255, 0.08)",
28
- 300: "rgba(255, 255, 255, 0.12)",
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.tokens = void 0;
4
+ exports.tokens = {
5
+ borderRadius: {
6
+ none: "0",
7
+ px: "1px",
8
+ sm: "2px",
9
+ md: "3px",
10
+ "DEFAULT": "4px",
11
+ lg: "8px",
12
+ full: "9999px",
29
13
  },
30
- gray: {
31
- 100: "#f9fbfc",
32
- 200: "#f4f7f9",
33
- 300: "#edf3f7",
34
- 400: "#dee7ee",
35
- 500: "#b9c8d2",
36
- 600: "#86a3b5",
37
- 700: "#47687d",
38
- 800: "#204156",
39
- 900: "#001b28",
14
+ borderWidth: {
15
+ 0: "0",
16
+ 1: "1px",
17
+ 2: "2px",
18
+ 4: "4px",
19
+ 8: "8px",
20
+ "DEFAULT": "1px",
40
21
  },
41
- brandGreen: {
42
- 200: "#7de5ca",
43
- 300: "#5cd8b7",
44
- 400: "#33c69f",
45
- 500: "#20b08a",
46
- 600: "#12926f",
22
+ color: {
23
+ lighten: {
24
+ 100: "rgba(255, 255, 255, 0.04)",
25
+ 200: "rgba(255, 255, 255, 0.08)",
26
+ 300: "rgba(255, 255, 255, 0.12)",
27
+ },
28
+ gray: {
29
+ 100: "#f9fbfc",
30
+ 200: "#f4f7f9",
31
+ 300: "#edf3f7",
32
+ 400: "#dee7ee",
33
+ 500: "#b9c8d2",
34
+ 600: "#86a3b5",
35
+ 700: "#47687d",
36
+ 800: "#204156",
37
+ 900: "#001b28",
38
+ },
39
+ brandGreen: {
40
+ 200: "#7de5ca",
41
+ 300: "#5cd8b7",
42
+ 400: "#33c69f",
43
+ 500: "#20b08a",
44
+ 600: "#12926f",
45
+ },
46
+ blue: {
47
+ 0: "#e6f3ff",
48
+ 100: "#c2e2ff",
49
+ 200: "#76baf9",
50
+ 300: "#3e9ef5",
51
+ 400: "#0d7de4",
52
+ 500: "#0668ca",
53
+ 600: "#0052b1",
54
+ },
55
+ green: {
56
+ 100: "#e8f5ee",
57
+ 200: "#a1ddae",
58
+ 300: "#7bc88c",
59
+ 400: "#54af68",
60
+ 500: "#3c9f52",
61
+ 600: "#29853d",
62
+ },
63
+ gold: {
64
+ 100: "#fff4de",
65
+ 200: "#ffd883",
66
+ 300: "#ffcc5a",
67
+ 400: "#fdb515",
68
+ 500: "#f0a600",
69
+ 600: "#dc9801",
70
+ },
71
+ red: {
72
+ 100: "#fdeeee",
73
+ 200: "#ffa7a1",
74
+ 300: "#fa7d76",
75
+ 400: "#f25d54",
76
+ 500: "#e4473e",
77
+ 600: "#d93329",
78
+ },
79
+ orange: {
80
+ 200: "#ffc3a1",
81
+ 300: "#ffaa7a",
82
+ 400: "#f38f56",
83
+ 500: "#ed7b3b",
84
+ 600: "#e36823",
85
+ },
86
+ pink: {
87
+ 200: "#daccd7",
88
+ 300: "#d3b8cd",
89
+ 400: "#cca8c4",
90
+ 500: "#c297b9",
91
+ 600: "#b881ac",
92
+ },
93
+ cyan: {
94
+ 200: "#a1d8f1",
95
+ 300: "#7dc3e4",
96
+ 400: "#61accf",
97
+ 500: "#3e9ecb",
98
+ 600: "#2488b6",
99
+ },
100
+ purple: {
101
+ 200: "#c8b3e8",
102
+ 300: "#a68ad2",
103
+ 400: "#8969bd",
104
+ 500: "#7757ad",
105
+ 600: "#604194",
106
+ },
107
+ white: "#ffffff",
108
+ black: "#000b11",
109
+ brandBlack: "#132333",
110
+ screen: "rgba(0, 0, 0, 0.25)",
111
+ success: "#54af68",
112
+ failure: "#f25d54",
113
+ caution: "#fdb515",
114
+ border: "#dee7ee",
115
+ placeholder: "#86a3b5",
116
+ link: "#0d7de4",
47
117
  },
48
- blue: {
49
- 0: "#e6f3ff",
50
- 100: "#c2e2ff",
51
- 200: "#76baf9",
52
- 300: "#3e9ef5",
53
- 400: "#0d7de4",
54
- 500: "#0668ca",
55
- 600: "#0052b1",
118
+ fontSize: {
119
+ h1: "26px",
120
+ h2: "20px",
121
+ h3: "16px",
122
+ h4: "14px",
123
+ h5: "12px",
124
+ h6: "11px",
125
+ bodySm: "12px",
126
+ body: "14px",
127
+ bodyLg: "16px",
128
+ icon: "13px",
129
+ iconSm: "11px",
56
130
  },
57
- green: {
58
- 100: "#e8f5ee",
59
- 200: "#a1ddae",
60
- 300: "#7bc88c",
61
- 400: "#54af68",
62
- 500: "#3c9f52",
63
- 600: "#29853d",
131
+ fontWeight: {
132
+ regular: 400,
133
+ medium: 500,
134
+ bold: 600,
64
135
  },
65
- gold: {
66
- 100: "#fff4de",
67
- 200: "#ffd883",
68
- 300: "#ffcc5a",
69
- 400: "#fdb515",
70
- 500: "#f0a600",
71
- 600: "#dc9801",
136
+ height: {
137
+ 0: "0",
138
+ 1: "4px",
139
+ 2: "8px",
140
+ 3: "12px",
141
+ 4: "16px",
142
+ 5: "20px",
143
+ 6: "24px",
144
+ 7: "28px",
145
+ 8: "32px",
146
+ 9: "36px",
147
+ 10: "40px",
148
+ 11: "44px",
149
+ 12: "48px",
150
+ 13: "52px",
151
+ 14: "56px",
152
+ 15: "60px",
153
+ 16: "64px",
154
+ 17: "68px",
155
+ 18: "72px",
156
+ 19: "76px",
157
+ 20: "80px",
158
+ 21: "84px",
159
+ 22: "88px",
160
+ 23: "92px",
161
+ 24: "96px",
162
+ 25: "100px",
163
+ 26: "104px",
164
+ 27: "108px",
165
+ 28: "112px",
166
+ 29: "116px",
167
+ 30: "120px",
168
+ 31: "124px",
169
+ 32: "128px",
170
+ 33: "132px",
171
+ 34: "136px",
172
+ 35: "140px",
173
+ 36: "144px",
174
+ 37: "148px",
175
+ 38: "152px",
176
+ 39: "156px",
177
+ 40: "160px",
178
+ 41: "164px",
179
+ 42: "168px",
180
+ 43: "172px",
181
+ 44: "176px",
182
+ 45: "180px",
183
+ 46: "184px",
184
+ 47: "188px",
185
+ 48: "192px",
186
+ 49: "196px",
187
+ 50: "200px",
188
+ 51: "204px",
189
+ 52: "208px",
190
+ 53: "212px",
191
+ 54: "216px",
192
+ 55: "220px",
193
+ 56: "224px",
194
+ 57: "228px",
195
+ 58: "232px",
196
+ 59: "236px",
197
+ 60: "240px",
198
+ 61: "244px",
199
+ 62: "248px",
200
+ 63: "252px",
201
+ 64: "256px",
202
+ auto: "auto",
203
+ px: "1px",
204
+ full: "100%",
205
+ screen: "100vh",
206
+ appbar: "48px",
207
+ cell: "34px",
72
208
  },
73
- red: {
74
- 100: "#fdeeee",
75
- 200: "#ffa7a1",
76
- 300: "#fa7d76",
77
- 400: "#f25d54",
78
- 500: "#e4473e",
79
- 600: "#d93329",
209
+ leading: {
210
+ none: 1,
211
+ tight: 1.25,
212
+ normal: 1.5,
213
+ loose: 2,
80
214
  },
81
- orange: {
82
- 200: "#ffc3a1",
83
- 300: "#ffaa7a",
84
- 400: "#f38f56",
85
- 500: "#ed7b3b",
86
- 600: "#e36823",
215
+ screenWidth: {
216
+ sm: "576px",
217
+ md: "768px",
218
+ lg: "992px",
219
+ xl: "1200px",
87
220
  },
88
- pink: {
89
- 200: "#daccd7",
90
- 300: "#d3b8cd",
91
- 400: "#cca8c4",
92
- 500: "#c297b9",
93
- 600: "#b881ac",
221
+ shadow: {
222
+ "DEFAULT": "0 2px 4px 0 rgba(0,0,0,0.10)",
223
+ up: "0 -2px 4px 0 rgba(0,0,0,0.10)",
224
+ md: "0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)",
225
+ lg: "0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)",
226
+ inner: "inset 0 2px 4px 0 rgba(0,0,0,0.06)",
227
+ glow: "rgba(7,114,239,0.2) 0 0 1rem",
228
+ none: "none",
229
+ focus: "rgba(7, 114, 239, 0.2) 0 0 1px 3px",
230
+ focusInside: "rgba(7, 114, 239, 0.2) 0 0 1px 3px inset",
231
+ focusBrand: "rgba(125, 229, 202, 0.2) 0 0 1px 3px",
232
+ popover: "0 0 3px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.1)",
233
+ buttonPrimary: "0 4px 8px rgba(255, 255, 255, 0.1) inset, 0 2px 5px rgba(0, 0, 0, 0.1)",
234
+ buttonSecondary: "0 1px 3px rgba(0, 0, 0, 0.05)",
235
+ paper: "0 0 3px rgba(0,0,0,0.1), 9px 9px rgba(0,0,0,0.04)",
236
+ tile: "0 10px 20px rgba(0, 0, 0, 0.1), 0 0 3px rgba(0, 0, 0, 0.1)",
94
237
  },
95
- cyan: {
96
- 200: "#a1d8f1",
97
- 300: "#7dc3e4",
98
- 400: "#61accf",
99
- 500: "#3e9ecb",
100
- 600: "#2488b6",
238
+ spacing: {
239
+ 0: "0",
240
+ 1: "4px",
241
+ 2: "8px",
242
+ 3: "12px",
243
+ 4: "16px",
244
+ 5: "20px",
245
+ 6: "24px",
246
+ 7: "28px",
247
+ 8: "32px",
248
+ 9: "36px",
249
+ 10: "40px",
250
+ 11: "44px",
251
+ 12: "48px",
252
+ 13: "52px",
253
+ 14: "56px",
254
+ 15: "60px",
255
+ 16: "64px",
256
+ 17: "68px",
257
+ 18: "72px",
258
+ 19: "76px",
259
+ 20: "80px",
260
+ 21: "84px",
261
+ 22: "88px",
262
+ 23: "92px",
263
+ 24: "96px",
264
+ 25: "100px",
265
+ 26: "104px",
266
+ 27: "108px",
267
+ 28: "112px",
268
+ 29: "116px",
269
+ 30: "120px",
270
+ 31: "124px",
271
+ 32: "128px",
272
+ 33: "132px",
273
+ 34: "136px",
274
+ 35: "140px",
275
+ 36: "144px",
276
+ 37: "148px",
277
+ 38: "152px",
278
+ 39: "156px",
279
+ 40: "160px",
280
+ 41: "164px",
281
+ 42: "168px",
282
+ 43: "172px",
283
+ 44: "176px",
284
+ 45: "180px",
285
+ 46: "184px",
286
+ 47: "188px",
287
+ 48: "192px",
288
+ 49: "196px",
289
+ 50: "200px",
290
+ 51: "204px",
291
+ 52: "208px",
292
+ 53: "212px",
293
+ 54: "216px",
294
+ 55: "220px",
295
+ 56: "224px",
296
+ 57: "228px",
297
+ 58: "232px",
298
+ 59: "236px",
299
+ 60: "240px",
300
+ 61: "244px",
301
+ 62: "248px",
302
+ 63: "252px",
303
+ 64: "256px",
101
304
  },
102
- purple: {
103
- 200: "#c8b3e8",
104
- 300: "#a68ad2",
105
- 400: "#8969bd",
106
- 500: "#7757ad",
107
- 600: "#604194",
305
+ tracking: {
306
+ tight: "-0.05em",
307
+ normal: "0",
308
+ wide: "0.05em",
108
309
  },
109
- white: "#ffffff",
110
- black: "#000b11",
111
- screen: "rgba(0, 0, 0, 0.25)",
112
- success: "#54af68",
113
- failure: "#f25d54",
114
- caution: "#fdb515",
115
- border: "#dee7ee",
116
- placeholder: "#86a3b5",
117
- link: "#0d7de4",
118
- },
119
- fontSize: {
120
- h1: "26px",
121
- h2: "20px",
122
- h3: "16px",
123
- h4: "14px",
124
- h5: "12px",
125
- h6: "11px",
126
- bodySm: "12px",
127
- body: "14px",
128
- bodyLg: "16px",
129
- icon: "13px",
130
- iconSm: "11px",
131
- },
132
- fontWeight: {
133
- regular: 400,
134
- medium: 500,
135
- bold: 600,
136
- },
137
- height: {
138
- 0: "0",
139
- 1: "4px",
140
- 2: "8px",
141
- 3: "12px",
142
- 4: "16px",
143
- 5: "20px",
144
- 6: "24px",
145
- 7: "28px",
146
- 8: "32px",
147
- 9: "36px",
148
- 10: "40px",
149
- 11: "44px",
150
- 12: "48px",
151
- 13: "52px",
152
- 14: "56px",
153
- 15: "60px",
154
- 16: "64px",
155
- 17: "68px",
156
- 18: "72px",
157
- 19: "76px",
158
- 20: "80px",
159
- 21: "84px",
160
- 22: "88px",
161
- 23: "92px",
162
- 24: "96px",
163
- 25: "100px",
164
- 26: "104px",
165
- 27: "108px",
166
- 28: "112px",
167
- 29: "116px",
168
- 30: "120px",
169
- 31: "124px",
170
- 32: "128px",
171
- 33: "132px",
172
- 34: "136px",
173
- 35: "140px",
174
- 36: "144px",
175
- 37: "148px",
176
- 38: "152px",
177
- 39: "156px",
178
- 40: "160px",
179
- 41: "164px",
180
- 42: "168px",
181
- 43: "172px",
182
- 44: "176px",
183
- 45: "180px",
184
- 46: "184px",
185
- 47: "188px",
186
- 48: "192px",
187
- 49: "196px",
188
- 50: "200px",
189
- 51: "204px",
190
- 52: "208px",
191
- 53: "212px",
192
- 54: "216px",
193
- 55: "220px",
194
- 56: "224px",
195
- 57: "228px",
196
- 58: "232px",
197
- 59: "236px",
198
- 60: "240px",
199
- 61: "244px",
200
- 62: "248px",
201
- 63: "252px",
202
- 64: "256px",
203
- auto: "auto",
204
- px: "1px",
205
- full: "100%",
206
- screen: "100vh",
207
- appbar: "48px",
208
- cell: "34px",
209
- },
210
- leading: {
211
- none: 1,
212
- tight: 1.25,
213
- normal: 1.5,
214
- loose: 2,
215
- },
216
- screenWidth: {
217
- sm: "576px",
218
- md: "768px",
219
- lg: "992px",
220
- xl: "1200px",
221
- },
222
- shadow: {
223
- "DEFAULT": "0 2px 4px 0 rgba(0,0,0,0.10)",
224
- up: "0 -2px 4px 0 rgba(0,0,0,0.10)",
225
- md: "0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)",
226
- lg: "0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)",
227
- inner: "inset 0 2px 4px 0 rgba(0,0,0,0.06)",
228
- glow: "rgba(7,114,239,0.2) 0 0 1rem",
229
- none: "none",
230
- focus: "rgba(7, 114, 239, 0.2) 0 0 1px 3px",
231
- focusInside: "rgba(7, 114, 239, 0.2) 0 0 1px 3px inset",
232
- focusBrand: "rgba(125, 229, 202, 0.2) 0 0 1px 3px",
233
- popover: "0 0 3px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.1)",
234
- buttonPrimary: "0 4px 8px rgba(255, 255, 255, 0.1) inset, 0 2px 5px rgba(0, 0, 0, 0.1)",
235
- buttonSecondary: "0 1px 3px rgba(0, 0, 0, 0.05)",
236
- paper: "0 0 3px rgba(0,0,0,0.1), 9px 9px rgba(0,0,0,0.04)",
237
- tile: "0 10px 20px rgba(0, 0, 0, 0.1), 0 0 3px rgba(0, 0, 0, 0.1)",
238
- },
239
- spacing: {
240
- 0: "0",
241
- 1: "4px",
242
- 2: "8px",
243
- 3: "12px",
244
- 4: "16px",
245
- 5: "20px",
246
- 6: "24px",
247
- 7: "28px",
248
- 8: "32px",
249
- 9: "36px",
250
- 10: "40px",
251
- 11: "44px",
252
- 12: "48px",
253
- 13: "52px",
254
- 14: "56px",
255
- 15: "60px",
256
- 16: "64px",
257
- 17: "68px",
258
- 18: "72px",
259
- 19: "76px",
260
- 20: "80px",
261
- 21: "84px",
262
- 22: "88px",
263
- 23: "92px",
264
- 24: "96px",
265
- 25: "100px",
266
- 26: "104px",
267
- 27: "108px",
268
- 28: "112px",
269
- 29: "116px",
270
- 30: "120px",
271
- 31: "124px",
272
- 32: "128px",
273
- 33: "132px",
274
- 34: "136px",
275
- 35: "140px",
276
- 36: "144px",
277
- 37: "148px",
278
- 38: "152px",
279
- 39: "156px",
280
- 40: "160px",
281
- 41: "164px",
282
- 42: "168px",
283
- 43: "172px",
284
- 44: "176px",
285
- 45: "180px",
286
- 46: "184px",
287
- 47: "188px",
288
- 48: "192px",
289
- 49: "196px",
290
- 50: "200px",
291
- 51: "204px",
292
- 52: "208px",
293
- 53: "212px",
294
- 54: "216px",
295
- 55: "220px",
296
- 56: "224px",
297
- 57: "228px",
298
- 58: "232px",
299
- 59: "236px",
300
- 60: "240px",
301
- 61: "244px",
302
- 62: "248px",
303
- 63: "252px",
304
- 64: "256px",
305
- },
306
- tracking: {
307
- tight: "-0.05em",
308
- normal: "0",
309
- wide: "0.05em",
310
- },
311
- type: {
312
- sans: "'Neue Montreal', system-ui, BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
313
- serif: "'Copernicus', serif",
314
- mono: "'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace",
315
- },
316
- width: {
317
- 0: "0",
318
- 1: "4px",
319
- 2: "8px",
320
- 3: "12px",
321
- 4: "16px",
322
- 5: "20px",
323
- 6: "24px",
324
- 7: "28px",
325
- 8: "32px",
326
- 9: "36px",
327
- 10: "40px",
328
- 11: "44px",
329
- 12: "48px",
330
- 13: "52px",
331
- 14: "56px",
332
- 15: "60px",
333
- 16: "64px",
334
- 17: "68px",
335
- 18: "72px",
336
- 19: "76px",
337
- 20: "80px",
338
- 21: "84px",
339
- 22: "88px",
340
- 23: "92px",
341
- 24: "96px",
342
- 25: "100px",
343
- 26: "104px",
344
- 27: "108px",
345
- 28: "112px",
346
- 29: "116px",
347
- 30: "120px",
348
- 31: "124px",
349
- 32: "128px",
350
- 33: "132px",
351
- 34: "136px",
352
- 35: "140px",
353
- 36: "144px",
354
- 37: "148px",
355
- 38: "152px",
356
- 39: "156px",
357
- 40: "160px",
358
- 41: "164px",
359
- 42: "168px",
360
- 43: "172px",
361
- 44: "176px",
362
- 45: "180px",
363
- 46: "184px",
364
- 47: "188px",
365
- 48: "192px",
366
- 49: "196px",
367
- 50: "200px",
368
- 51: "204px",
369
- 52: "208px",
370
- 53: "212px",
371
- 54: "216px",
372
- 55: "220px",
373
- 56: "224px",
374
- 57: "228px",
375
- 58: "232px",
376
- 59: "236px",
377
- 60: "240px",
378
- 61: "244px",
379
- 62: "248px",
380
- 63: "252px",
381
- 64: "256px",
382
- "1/2": "50%",
383
- "1/3": "33.33333%",
384
- "2/3": "66.66667%",
385
- "1/4": "25%",
386
- "3/4": "75%",
387
- "1/5": "20%",
388
- "2/5": "40%",
389
- "3/5": "60%",
390
- "4/5": "80%",
391
- "1/6": "16.66667%",
392
- "5/6": "83.33333%",
393
- auto: "auto",
394
- px: "1px",
395
- full: "100%",
396
- screen: "100vw",
397
- maxContent: "max-content",
398
- xs: "20rem",
399
- sm: "30rem",
400
- md: "40rem",
401
- lg: "50rem",
402
- xl: "60rem",
403
- "2xl": "70rem",
404
- "3xl": "80rem",
405
- "4xl": "90rem",
406
- "5xl": "100rem",
407
- },
408
- zIndex: {
409
- 0: "0",
410
- 10: 10,
411
- 20: 20,
412
- 30: 30,
413
- 40: 40,
414
- 50: 50,
415
- auto: "auto",
416
- below: -1,
417
- default: 1,
418
- popup: 400,
419
- dialog: 500,
420
- dropdown: 600,
421
- overlay: 700,
422
- menu: 800,
423
- modal: 900,
424
- toast: 1000,
425
- max: 2147483647,
426
- },
427
- };
310
+ type: {
311
+ sans: "'Neue Montreal', system-ui, BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
312
+ serif: "'Copernicus', serif",
313
+ mono: "'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace",
314
+ },
315
+ width: {
316
+ 0: "0",
317
+ 1: "4px",
318
+ 2: "8px",
319
+ 3: "12px",
320
+ 4: "16px",
321
+ 5: "20px",
322
+ 6: "24px",
323
+ 7: "28px",
324
+ 8: "32px",
325
+ 9: "36px",
326
+ 10: "40px",
327
+ 11: "44px",
328
+ 12: "48px",
329
+ 13: "52px",
330
+ 14: "56px",
331
+ 15: "60px",
332
+ 16: "64px",
333
+ 17: "68px",
334
+ 18: "72px",
335
+ 19: "76px",
336
+ 20: "80px",
337
+ 21: "84px",
338
+ 22: "88px",
339
+ 23: "92px",
340
+ 24: "96px",
341
+ 25: "100px",
342
+ 26: "104px",
343
+ 27: "108px",
344
+ 28: "112px",
345
+ 29: "116px",
346
+ 30: "120px",
347
+ 31: "124px",
348
+ 32: "128px",
349
+ 33: "132px",
350
+ 34: "136px",
351
+ 35: "140px",
352
+ 36: "144px",
353
+ 37: "148px",
354
+ 38: "152px",
355
+ 39: "156px",
356
+ 40: "160px",
357
+ 41: "164px",
358
+ 42: "168px",
359
+ 43: "172px",
360
+ 44: "176px",
361
+ 45: "180px",
362
+ 46: "184px",
363
+ 47: "188px",
364
+ 48: "192px",
365
+ 49: "196px",
366
+ 50: "200px",
367
+ 51: "204px",
368
+ 52: "208px",
369
+ 53: "212px",
370
+ 54: "216px",
371
+ 55: "220px",
372
+ 56: "224px",
373
+ 57: "228px",
374
+ 58: "232px",
375
+ 59: "236px",
376
+ 60: "240px",
377
+ 61: "244px",
378
+ 62: "248px",
379
+ 63: "252px",
380
+ 64: "256px",
381
+ "1/2": "50%",
382
+ "1/3": "33.33333%",
383
+ "2/3": "66.66667%",
384
+ "1/4": "25%",
385
+ "3/4": "75%",
386
+ "1/5": "20%",
387
+ "2/5": "40%",
388
+ "3/5": "60%",
389
+ "4/5": "80%",
390
+ "1/6": "16.66667%",
391
+ "5/6": "83.33333%",
392
+ auto: "auto",
393
+ px: "1px",
394
+ full: "100%",
395
+ screen: "100vw",
396
+ maxContent: "max-content",
397
+ xs: "20rem",
398
+ sm: "30rem",
399
+ md: "40rem",
400
+ lg: "50rem",
401
+ xl: "60rem",
402
+ "2xl": "70rem",
403
+ "3xl": "80rem",
404
+ "4xl": "90rem",
405
+ "5xl": "100rem",
406
+ },
407
+ zIndex: {
408
+ 0: 0,
409
+ 10: 10,
410
+ 20: 20,
411
+ 30: 30,
412
+ 40: 40,
413
+ 50: 50,
414
+ auto: "auto",
415
+ below: -1,
416
+ default: 1,
417
+ popup: 400,
418
+ dialog: 500,
419
+ dropdown: 600,
420
+ overlay: 700,
421
+ menu: 800,
422
+ modal: 900,
423
+ toast: 1000,
424
+ max: 2147483647,
425
+ },
426
+ };