@infonomic/uikit 2.0.0 → 2.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 (312) hide show
  1. package/dist/components/card/card.d.ts.map +1 -1
  2. package/package.json +9 -5
  3. package/src/astro.d.ts +43 -0
  4. package/src/astro.js +2 -2
  5. package/src/components/@types/shared.ts +24 -0
  6. package/src/components/accordion/accordion.module.css +60 -0
  7. package/src/components/accordion/accordion.stories.tsx +117 -0
  8. package/src/components/accordion/accordion.tsx +105 -0
  9. package/src/components/animation/fade-in-lift.stories.tsx +81 -0
  10. package/src/components/animation/fade-in-lift.tsx +42 -0
  11. package/src/components/avatar/avatar.module.css +54 -0
  12. package/src/components/avatar/avatar.stories.tsx +28 -0
  13. package/src/components/avatar/avatar.tsx +19 -0
  14. package/src/components/button/@types/button.ts +17 -0
  15. package/src/components/button/button-group.module.css +17 -0
  16. package/src/components/button/button-group.stories.tsx +45 -0
  17. package/src/components/button/button-group.tsx +132 -0
  18. package/src/components/button/button-icon.stories.tsx +145 -0
  19. package/src/components/button/button-intents.stories.tsx +50 -0
  20. package/src/components/button/button-variants.stories.tsx +60 -0
  21. package/src/components/button/button.astro +86 -0
  22. package/src/components/button/button.module.css +533 -0
  23. package/src/components/button/button.tsx +81 -0
  24. package/src/components/button/control-buttons.module.css +144 -0
  25. package/src/components/button/control-buttons.stories.tsx +60 -0
  26. package/src/components/button/control-buttons.tsx +137 -0
  27. package/src/components/button/copy-button.module.css +31 -0
  28. package/src/components/button/copy-button.stories.tsx +50 -0
  29. package/src/components/button/copy-button.tsx +92 -0
  30. package/src/components/button/icon-button.astro +47 -0
  31. package/src/components/button/icon-button.tsx +44 -0
  32. package/src/components/button/index.ts +5 -0
  33. package/src/components/calendar/calendar.module.css +315 -0
  34. package/src/components/calendar/calendar.stories.tsx +139 -0
  35. package/src/components/calendar/calendar.tsx +173 -0
  36. package/src/components/card/card-content.astro +14 -0
  37. package/src/components/card/card-description.astro +14 -0
  38. package/src/components/card/card-footer.astro +14 -0
  39. package/src/components/card/card-header.astro +14 -0
  40. package/src/components/card/card-title.astro +14 -0
  41. package/src/components/card/card.astro +41 -0
  42. package/src/components/card/card.module.css +67 -0
  43. package/src/components/card/card.stories.tsx +61 -0
  44. package/src/components/card/card.tsx +86 -0
  45. package/src/components/container/container.astro +13 -0
  46. package/src/components/container/container.module.css +28 -0
  47. package/src/components/container/container.stories.tsx +42 -0
  48. package/src/components/container/container.tsx +23 -0
  49. package/src/components/dropdown/dropdown.module.css +131 -0
  50. package/src/components/dropdown/dropdown.stories.tsx +103 -0
  51. package/src/components/dropdown/dropdown.tsx +193 -0
  52. package/src/components/hamburger/hamburger.astro +30 -0
  53. package/src/components/hamburger/hamburger.tsx +66 -0
  54. package/src/components/input/@types/checkbox.ts +20 -0
  55. package/src/components/input/@types/input.ts +20 -0
  56. package/src/components/input/checkbox-group.tsx +78 -0
  57. package/src/components/input/checkbox.module.css +267 -0
  58. package/src/components/input/checkbox.stories.tsx +240 -0
  59. package/src/components/input/checkbox.tsx +95 -0
  60. package/src/components/input/error-text.astro +14 -0
  61. package/src/components/input/error-text.module.css +19 -0
  62. package/src/components/input/error-text.tsx +18 -0
  63. package/src/components/input/errors.tsx +37 -0
  64. package/src/components/input/help-text.astro +13 -0
  65. package/src/components/input/help-text.module.css +19 -0
  66. package/src/components/input/help-text.tsx +13 -0
  67. package/src/components/input/index.tsx +8 -0
  68. package/src/components/input/input-adornment.astro +26 -0
  69. package/src/components/input/input-adornment.module.css +18 -0
  70. package/src/components/input/input-adornment.tsx +36 -0
  71. package/src/components/input/input.astro +99 -0
  72. package/src/components/input/input.module.css +310 -0
  73. package/src/components/input/input.stories.tsx +174 -0
  74. package/src/components/input/input.tsx +103 -0
  75. package/src/components/input/label.astro +24 -0
  76. package/src/components/input/label.module.css +28 -0
  77. package/src/components/input/label.tsx +25 -0
  78. package/src/components/input/radio-group.module.css +219 -0
  79. package/src/components/input/radio-group.stories.tsx +73 -0
  80. package/src/components/input/radio-group.tsx +67 -0
  81. package/src/components/input/select.module.css +75 -0
  82. package/src/components/input/select.stories.tsx +34 -0
  83. package/src/components/input/select.tsx +115 -0
  84. package/src/components/input/text-area.module.css +9 -0
  85. package/src/components/input/text-area.stories.tsx +51 -0
  86. package/src/components/input/text-area.tsx +81 -0
  87. package/src/components/input/utils.ts +21 -0
  88. package/src/components/notifications/@types/alert.ts +12 -0
  89. package/src/components/notifications/@types/toast.ts +12 -0
  90. package/src/components/notifications/alert.module.css +114 -0
  91. package/src/components/notifications/alert.stories.tsx +39 -0
  92. package/src/components/notifications/alert.tsx +117 -0
  93. package/src/components/notifications/index.ts +2 -0
  94. package/src/components/notifications/toast.module.css +237 -0
  95. package/src/components/notifications/toast.stories.tsx +42 -0
  96. package/src/components/notifications/toast.tsx +124 -0
  97. package/src/components/overlay/index.stories.tsx +29 -0
  98. package/src/components/overlay/index.ts +2 -0
  99. package/src/components/overlay/overlay.module.css +41 -0
  100. package/src/components/overlay/overlay.tsx +61 -0
  101. package/src/components/pager/@types/index.ts +2 -0
  102. package/src/components/pager/ellipses.tsx +18 -0
  103. package/src/components/pager/event-pager.tsx +18 -0
  104. package/src/components/pager/first-button.tsx +53 -0
  105. package/src/components/pager/hooks/types/usePagination.ts +80 -0
  106. package/src/components/pager/hooks/usePagination.ts +140 -0
  107. package/src/components/pager/icons/first.tsx +33 -0
  108. package/src/components/pager/icons/index.tsx +4 -0
  109. package/src/components/pager/icons/last.tsx +33 -0
  110. package/src/components/pager/icons/next.tsx +20 -0
  111. package/src/components/pager/icons/previous.tsx +20 -0
  112. package/src/components/pager/index.ts +4 -0
  113. package/src/components/pager/last-button.tsx +57 -0
  114. package/src/components/pager/next-button.tsx +55 -0
  115. package/src/components/pager/number-button.tsx +83 -0
  116. package/src/components/pager/pagination.module.css +165 -0
  117. package/src/components/pager/pagination.stories.tsx +190 -0
  118. package/src/components/pager/pagination.tsx +266 -0
  119. package/src/components/pager/previous-button.tsx +51 -0
  120. package/src/components/scroll-area/scroll-area.module.css +80 -0
  121. package/src/components/scroll-area/scroll-area.stories.tsx +33 -0
  122. package/src/components/scroll-area/scroll-area.tsx +22 -0
  123. package/src/components/scroll-to-top/scroll-to-top.tsx +59 -0
  124. package/src/components/section/section.astro +13 -0
  125. package/src/components/section/section.module.css +7 -0
  126. package/src/components/section/section.tsx +23 -0
  127. package/src/components/shimmer/shimmer.module.css +53 -0
  128. package/src/components/shimmer/shimmer.stories.tsx +24 -0
  129. package/src/components/shimmer/shimmer.tsx +70 -0
  130. package/src/components/table/table.module.css +100 -0
  131. package/src/components/table/table.stories.tsx +95 -0
  132. package/src/components/table/table.tsx +165 -0
  133. package/src/components/tabs/tabs.module.css +64 -0
  134. package/src/components/tabs/tabs.stories.tsx +47 -0
  135. package/src/components/tabs/tabs.tsx +75 -0
  136. package/src/components/timeline/timeline.module.css +87 -0
  137. package/src/components/timeline/timeline.stories.tsx +50 -0
  138. package/src/components/timeline/timeline.tsx +177 -0
  139. package/src/components/tooltip/tooltip.module.css +55 -0
  140. package/src/components/tooltip/tooltip.stories.tsx +59 -0
  141. package/src/components/tooltip/tooltip.tsx +51 -0
  142. package/src/declarations.d.ts +4 -0
  143. package/src/hooks/use-media-query.ts +20 -0
  144. package/src/icons/activity-icon.tsx +40 -0
  145. package/src/icons/calendar-icon.tsx +39 -0
  146. package/src/icons/check-icon.tsx +33 -0
  147. package/src/icons/chevron-down-icon.tsx +39 -0
  148. package/src/icons/chevron-left-double-icon.tsx +58 -0
  149. package/src/icons/chevron-left-icon.tsx +58 -0
  150. package/src/icons/chevron-right-double-icon.tsx +58 -0
  151. package/src/icons/chevron-right-icon.tsx +58 -0
  152. package/src/icons/chevrons-up-down.tsx +37 -0
  153. package/src/icons/close-icon.astro +38 -0
  154. package/src/icons/close-icon.tsx +30 -0
  155. package/src/icons/copy-icon.tsx +35 -0
  156. package/src/icons/danger-icon.tsx +18 -0
  157. package/src/icons/dashboard-icon.tsx +41 -0
  158. package/src/icons/delete-icon.tsx +34 -0
  159. package/src/icons/document-icon.tsx +38 -0
  160. package/src/icons/download-icon.tsx +39 -0
  161. package/src/icons/edit-icon.tsx +35 -0
  162. package/src/icons/ellipsis-icon.tsx +38 -0
  163. package/src/icons/email-icon.tsx +33 -0
  164. package/src/icons/external-link-icon.tsx +39 -0
  165. package/src/icons/github-icon.tsx +27 -0
  166. package/src/icons/globe-icon.tsx +50 -0
  167. package/src/icons/google-icon.tsx +44 -0
  168. package/src/icons/gripper-vertical-icon.tsx +43 -0
  169. package/src/icons/history-icon.tsx +32 -0
  170. package/src/icons/home-icon.tsx +34 -0
  171. package/src/icons/icon-element.astro +27 -0
  172. package/src/icons/icon-element.tsx +32 -0
  173. package/src/icons/icon-sprite.tsx +18 -0
  174. package/src/icons/icons.module.css +147 -0
  175. package/src/icons/index.stories.tsx +25 -0
  176. package/src/icons/index.ts +39 -0
  177. package/src/icons/info-icon.tsx +18 -0
  178. package/src/icons/infonomic-icon.tsx +173 -0
  179. package/src/icons/light-icon.astro +36 -0
  180. package/src/icons/light-icon.tsx +29 -0
  181. package/src/icons/location-pin-icon.tsx +36 -0
  182. package/src/icons/moon-icon.astro +38 -0
  183. package/src/icons/moon-icon.tsx +42 -0
  184. package/src/icons/plus-icon.tsx +34 -0
  185. package/src/icons/primary-icon.tsx +22 -0
  186. package/src/icons/refresh-icon.tsx +33 -0
  187. package/src/icons/return-icon.tsx +36 -0
  188. package/src/icons/roles-icon.tsx +34 -0
  189. package/src/icons/search-icon.astro +40 -0
  190. package/src/icons/search-icon.tsx +29 -0
  191. package/src/icons/search-menu-icon.tsx +42 -0
  192. package/src/icons/settings-gear-icon.tsx +36 -0
  193. package/src/icons/settings-sliders-icon.tsx +43 -0
  194. package/src/icons/sign-out-icon.tsx +35 -0
  195. package/src/icons/source/icon-calendar.svg +1 -0
  196. package/src/icons/source/icon-check.svg +4 -0
  197. package/src/icons/source/icon-close.svg +3 -0
  198. package/src/icons/source/icon-coinbase.svg +9 -0
  199. package/src/icons/source/icon-copy.svg +4 -0
  200. package/src/icons/source/icon-document.svg +5 -0
  201. package/src/icons/source/icon-download.svg +4 -0
  202. package/src/icons/source/icon-edit.svg +6 -0
  203. package/src/icons/source/icon-eth-purple.svg +15 -0
  204. package/src/icons/source/icon-etherscan.svg +5 -0
  205. package/src/icons/source/icon-external-link.svg +4 -0
  206. package/src/icons/source/icon-globe.svg +7 -0
  207. package/src/icons/source/icon-gripper-vertical.svg +9 -0
  208. package/src/icons/source/icon-info.svg +4 -0
  209. package/src/icons/source/icon-infonomic.svg +43 -0
  210. package/src/icons/source/icon-ledger.svg +4 -0
  211. package/src/icons/source/icon-light.svg +3 -0
  212. package/src/icons/source/icon-location-pin.svg +8 -0
  213. package/src/icons/source/icon-logout.svg +6 -0
  214. package/src/icons/source/icon-metamask.svg +32 -0
  215. package/src/icons/source/icon-moon.svg +3 -0
  216. package/src/icons/source/icon-plus.svg +4 -0
  217. package/src/icons/source/icon-refresh.svg +4 -0
  218. package/src/icons/source/icon-return.svg +4 -0
  219. package/src/icons/source/icon-search-menu.svg +13 -0
  220. package/src/icons/source/icon-search.svg +3 -0
  221. package/src/icons/source/icon-settings-gear.svg +5 -0
  222. package/src/icons/source/icon-settings.svg +12 -0
  223. package/src/icons/source/icon-wallet.svg +3 -0
  224. package/src/icons/source/icon-walletconnect.svg +4 -0
  225. package/src/icons/source/icon-x.svg +4 -0
  226. package/src/icons/stopwatch-icon.tsx +39 -0
  227. package/src/icons/success-icon.tsx +18 -0
  228. package/src/icons/types/icon.ts +8 -0
  229. package/src/icons/user-icon.tsx +33 -0
  230. package/src/icons/users-icon.tsx +35 -0
  231. package/src/icons/wallet-icon.tsx +29 -0
  232. package/src/icons/warning-icon.tsx +18 -0
  233. package/src/icons/x-icon.tsx +33 -0
  234. package/src/loaders/ellipses.tsx +36 -0
  235. package/src/loaders/loaders.stories.tsx +46 -0
  236. package/src/loaders/ring.tsx +33 -0
  237. package/src/loaders/spinner.tsx +28 -0
  238. package/src/loaders/types/index.ts +6 -0
  239. package/src/react.ts +99 -0
  240. package/src/styles/base/animations.css +143 -0
  241. package/src/styles/base/base.css +5 -0
  242. package/src/styles/base/colors.css +163 -0
  243. package/src/styles/base/colors.stories.tsx +671 -0
  244. package/src/styles/base/reset.css +464 -0
  245. package/src/styles/base/typography.css +25 -0
  246. package/src/styles/base/vars.css +188 -0
  247. package/src/styles/components/card.css +20 -0
  248. package/src/styles/components/checkbox.css +55 -0
  249. package/src/styles/components/components.css +11 -0
  250. package/src/styles/components/directional-button.css +92 -0
  251. package/src/styles/components/dropdown.css +19 -0
  252. package/src/styles/components/fade-in-lift.css +13 -0
  253. package/src/styles/components/hamburger.css +107 -0
  254. package/src/styles/components/icon-element.css +4 -0
  255. package/src/styles/components/list-checkbox.css +60 -0
  256. package/src/styles/components/loaders.css +196 -0
  257. package/src/styles/components/popover.css +15 -0
  258. package/src/styles/components/scroll-to-top.css +89 -0
  259. package/src/styles/components/toast.css +18 -0
  260. package/src/styles/styles.css +6 -0
  261. package/src/styles/theme/autofill.css +58 -0
  262. package/src/styles/theme/scrollers.css +52 -0
  263. package/src/styles/theme/theme.css +130 -0
  264. package/src/styles/theme/theme.stories.tsx +33 -0
  265. package/src/styles/typography/code.stories.tsx +76 -0
  266. package/src/styles/typography/default.stories.tsx +51 -0
  267. package/src/styles/typography/fonts.css +30 -0
  268. package/src/styles/typography/lists.stories.tsx +50 -0
  269. package/src/styles/typography/prose.css +404 -0
  270. package/src/styles/typography/quote.stories.tsx +37 -0
  271. package/src/styles/typography.css +24 -0
  272. package/src/styles/utils/scroll-layout-shift.css +9 -0
  273. package/src/styles/utils/utility-classes.css +1278 -0
  274. package/src/styles/utils/utils.css +2 -0
  275. package/src/theme/theme-provider/index.ts +1 -0
  276. package/src/theme/theme-provider/provider.tsx +44 -0
  277. package/src/utils/capitalize.ts +6 -0
  278. package/src/utils/externalLinkProps.ts +6 -0
  279. package/src/utils/findMatch.ts +7 -0
  280. package/src/utils/getPortalRoot.ts +3 -0
  281. package/src/utils/isTouchDevice.ts +11 -0
  282. package/src/utils/objectsToArray.ts +15 -0
  283. package/src/utils/objectsToString.ts +5 -0
  284. package/src/utils/polymorphic.ts +16 -0
  285. package/src/utils/to-kebab-case.ts +5 -0
  286. package/src/widgets/datepicker/datepicker.module.css +189 -0
  287. package/src/widgets/datepicker/datepicker.stories.tsx +25 -0
  288. package/src/widgets/datepicker/datepicker.tsx +310 -0
  289. package/src/widgets/drawer/drawer-container.tsx +26 -0
  290. package/src/widgets/drawer/drawer-content.tsx +26 -0
  291. package/src/widgets/drawer/drawer-context.tsx +49 -0
  292. package/src/widgets/drawer/drawer-header.tsx +27 -0
  293. package/src/widgets/drawer/drawer-top-actions.tsx +27 -0
  294. package/src/widgets/drawer/drawer-wrapper.tsx +54 -0
  295. package/src/widgets/drawer/drawer.module.css +116 -0
  296. package/src/widgets/drawer/drawer.stories.tsx +224 -0
  297. package/src/widgets/drawer/drawer.tsx +115 -0
  298. package/src/widgets/drawer/motionDomAnimation.ts +4 -0
  299. package/src/widgets/drawer/motionDomMax.ts +4 -0
  300. package/src/widgets/modal/modal-actions.tsx +26 -0
  301. package/src/widgets/modal/modal-container.tsx +26 -0
  302. package/src/widgets/modal/modal-content.tsx +26 -0
  303. package/src/widgets/modal/modal-header.tsx +27 -0
  304. package/src/widgets/modal/modal-wrapper.tsx +50 -0
  305. package/src/widgets/modal/modal.module.css +85 -0
  306. package/src/widgets/modal/modal.stories.tsx +71 -0
  307. package/src/widgets/modal/modal.tsx +110 -0
  308. package/src/widgets/modal/motionDomAnimation.ts +4 -0
  309. package/src/widgets/modal/motionDomMax.ts +4 -0
  310. package/src/widgets/search/index.ts +1 -0
  311. package/src/widgets/search/search.stories.tsx +18 -0
  312. package/src/widgets/search/search.tsx +186 -0
package/src/styles/base/colors.stories.tsx ADDED
@@ -0,0 +1,671 @@
1
+ import type { Meta } from '@storybook/react-vite'
2
+
3
+ export const Colors = (): React.JSX.Element => {
4
+ return (
5
+ <>
6
+ <style>
7
+ {`
8
+ :root {
9
+ --foo: #00FF00;
10
+ }
11
+ table {
12
+ border-collapse: collapse;
13
+ width: 100%;
14
+ }
15
+ td {
16
+ color: black;
17
+ border: 1px solid #ddd;
18
+ padding: 8px;
19
+ text-align: center;
20
+ font-size: 14px;
21
+ }
22
+ `}
23
+ </style>
24
+ <div style={{ marginBottom: '2rem' }}>
25
+ <table>
26
+ <tbody>
27
+ <tr>
28
+ <td style={{ backgroundColor: 'var(--theme-25)' }}>
29
+ theme
30
+ <br />
31
+ 25
32
+ </td>
33
+ <td style={{ backgroundColor: 'var(--theme-50)' }}>
34
+ {' '}
35
+ theme
36
+ <br />
37
+ 50
38
+ </td>
39
+ <td style={{ backgroundColor: 'var(--theme-100)' }}>
40
+ {' '}
41
+ theme
42
+ <br />
43
+ 100
44
+ </td>
45
+ <td style={{ backgroundColor: 'var(--theme-200)' }}>
46
+ theme
47
+ <br />
48
+ 200
49
+ </td>
50
+ <td style={{ backgroundColor: 'var(--theme-300)' }}>
51
+ theme
52
+ <br />
53
+ 300
54
+ </td>
55
+ <td style={{ backgroundColor: 'var(--theme-400)' }}>
56
+ theme
57
+ <br />
58
+ 400
59
+ </td>
60
+ <td style={{ backgroundColor: 'var(--theme-500)' }}>
61
+ theme
62
+ <br />
63
+ 500
64
+ </td>
65
+ <td style={{ backgroundColor: 'var(--theme-600)' }}>
66
+ theme
67
+ <br />
68
+ 600
69
+ </td>
70
+ <td style={{ backgroundColor: 'var(--theme-700)' }}>
71
+ theme
72
+ <br />
73
+ 700
74
+ </td>
75
+ <td style={{ backgroundColor: 'var(--theme-800)' }}>
76
+ theme
77
+ <br />
78
+ 800
79
+ </td>
80
+ <td style={{ backgroundColor: 'var(--theme-900)' }}>
81
+ theme
82
+ <br />
83
+ 900
84
+ </td>
85
+ <td style={{ backgroundColor: 'var(--theme-950)' }}>
86
+ theme
87
+ <br />
88
+ 950
89
+ </td>
90
+ </tr>
91
+ <tr>
92
+ <td style={{ backgroundColor: 'var(--primary-25)' }}>
93
+ primary
94
+ <br />
95
+ 25
96
+ </td>
97
+ <td style={{ backgroundColor: 'var(--primary-50)' }}>
98
+ primary
99
+ <br />
100
+ 50
101
+ </td>
102
+ <td style={{ backgroundColor: 'var(--primary-100)' }}>
103
+ primary
104
+ <br />
105
+ 100
106
+ </td>
107
+ <td style={{ backgroundColor: 'var(--primary-200)' }}>
108
+ primary
109
+ <br />
110
+ 200
111
+ </td>
112
+ <td style={{ backgroundColor: 'var(--primary-300)' }}>
113
+ primary
114
+ <br />
115
+ 300
116
+ </td>
117
+ <td style={{ backgroundColor: 'var(--primary-400)' }}>
118
+ primary
119
+ <br />
120
+ 400
121
+ </td>
122
+ <td style={{ backgroundColor: 'var(--primary-500)' }}>
123
+ primary
124
+ <br />
125
+ 500
126
+ </td>
127
+ <td style={{ backgroundColor: 'var(--primary-600)' }}>
128
+ primary
129
+ <br />
130
+ 600
131
+ </td>
132
+ <td style={{ backgroundColor: 'var(--primary-700)' }}>
133
+ primary
134
+ <br />
135
+ 700
136
+ </td>
137
+ <td style={{ backgroundColor: 'var(--primary-800)' }}>
138
+ primary
139
+ <br />
140
+ 800
141
+ </td>
142
+ <td style={{ backgroundColor: 'var(--primary-900)' }}>
143
+ primary
144
+ <br />
145
+ 900
146
+ </td>
147
+ <td style={{ backgroundColor: 'var(--primary-950)' }}>
148
+ primary
149
+ <br />
150
+ 950
151
+ </td>
152
+ </tr>
153
+ <tr>
154
+ <td style={{ backgroundColor: 'var(--secondary-25)' }}>
155
+ secondary
156
+ <br />
157
+ 25
158
+ </td>
159
+ <td style={{ backgroundColor: 'var(--secondary-50)' }}>
160
+ secondary
161
+ <br />
162
+ 50
163
+ </td>
164
+ <td style={{ backgroundColor: 'var(--secondary-100)' }}>
165
+ secondary
166
+ <br />
167
+ 100
168
+ </td>
169
+ <td style={{ backgroundColor: 'var(--secondary-200)' }}>
170
+ secondary
171
+ <br />
172
+ 200
173
+ </td>
174
+ <td style={{ backgroundColor: 'var(--secondary-300)' }}>
175
+ secondary
176
+ <br />
177
+ 300
178
+ </td>
179
+ <td style={{ backgroundColor: 'var(--secondary-400)' }}>
180
+ secondary
181
+ <br />
182
+ 400
183
+ </td>
184
+ <td style={{ backgroundColor: 'var(--secondary-500)' }}>
185
+ secondary
186
+ <br />
187
+ 500
188
+ </td>
189
+ <td style={{ backgroundColor: 'var(--secondary-600)' }}>
190
+ secondary
191
+ <br />
192
+ 600
193
+ </td>
194
+ <td style={{ backgroundColor: 'var(--secondary-700)' }}>
195
+ secondary
196
+ <br />
197
+ 700
198
+ </td>
199
+ <td style={{ backgroundColor: 'var(--secondary-800)' }}>
200
+ secondary
201
+ <br />
202
+ 800
203
+ </td>
204
+ <td style={{ backgroundColor: 'var(--secondary-900)' }}>
205
+ secondary
206
+ <br />
207
+ 900
208
+ </td>
209
+ <td style={{ backgroundColor: 'var(--secondary-950)' }}>
210
+ secondary
211
+ <br />
212
+ 950
213
+ </td>
214
+ </tr>
215
+ <tr>
216
+ <td style={{ backgroundColor: 'var(--accent-25)' }}>
217
+ accent
218
+ <br />
219
+ 25
220
+ </td>
221
+ <td style={{ backgroundColor: 'var(--accent-50)' }}>
222
+ accent
223
+ <br />
224
+ 50
225
+ </td>
226
+ <td style={{ backgroundColor: 'var(--accent-100)' }}>
227
+ accent
228
+ <br />
229
+ 100
230
+ </td>
231
+ <td style={{ backgroundColor: 'var(--accent-200)' }}>
232
+ accent
233
+ <br />
234
+ 200
235
+ </td>
236
+ <td style={{ backgroundColor: 'var(--accent-300)' }}>
237
+ accent
238
+ <br />
239
+ 300
240
+ </td>
241
+ <td style={{ backgroundColor: 'var(--accent-400)' }}>
242
+ accent
243
+ <br />
244
+ 400
245
+ </td>
246
+ <td style={{ backgroundColor: 'var(--accent-500)' }}>
247
+ accent
248
+ <br />
249
+ 500
250
+ </td>
251
+ <td style={{ backgroundColor: 'var(--accent-600)' }}>
252
+ accent
253
+ <br />
254
+ 600
255
+ </td>
256
+ <td style={{ backgroundColor: 'var(--accent-700)' }}>
257
+ accent
258
+ <br />
259
+ 700
260
+ </td>
261
+ <td style={{ backgroundColor: 'var(--accent-800)' }}>
262
+ accent
263
+ <br />
264
+ 800
265
+ </td>
266
+ <td style={{ backgroundColor: 'var(--accent-900)' }}>
267
+ accent
268
+ <br />
269
+ 900
270
+ </td>
271
+ <td style={{ backgroundColor: 'var(--accent-950)' }}>
272
+ accent
273
+ <br />
274
+ 950
275
+ </td>
276
+ </tr>
277
+ <tr>
278
+ <td style={{ backgroundColor: 'var(--gray-25)' }}>
279
+ gray
280
+ <br />
281
+ 25
282
+ </td>
283
+ <td style={{ backgroundColor: 'var(--gray-50)' }}>
284
+ gray
285
+ <br />
286
+ 50
287
+ </td>
288
+ <td style={{ backgroundColor: 'var(--gray-100)' }}>
289
+ gray
290
+ <br />
291
+ 100
292
+ </td>
293
+ <td style={{ backgroundColor: 'var(--gray-200)' }}>
294
+ gray
295
+ <br />
296
+ 200
297
+ </td>
298
+ <td style={{ backgroundColor: 'var(--gray-300)' }}>
299
+ gray
300
+ <br />
301
+ 300
302
+ </td>
303
+ <td style={{ backgroundColor: 'var(--gray-400)' }}>
304
+ gray
305
+ <br />
306
+ 400
307
+ </td>
308
+ <td style={{ backgroundColor: 'var(--gray-500)' }}>
309
+ gray
310
+ <br />
311
+ 500
312
+ </td>
313
+ <td style={{ backgroundColor: 'var(--gray-600)' }}>
314
+ gray
315
+ <br />
316
+ 600
317
+ </td>
318
+ <td style={{ backgroundColor: 'var(--gray-700)' }}>
319
+ gray
320
+ <br />
321
+ 700
322
+ </td>
323
+ <td style={{ backgroundColor: 'var(--gray-800)' }}>
324
+ gray
325
+ <br />
326
+ 800
327
+ </td>
328
+ <td style={{ backgroundColor: 'var(--gray-900)' }}>
329
+ gray
330
+ <br />
331
+ 900
332
+ </td>
333
+ <td style={{ backgroundColor: 'var(--gray-950)' }}>
334
+ gray
335
+ <br />
336
+ 950
337
+ </td>
338
+ </tr>
339
+ <tr>
340
+ <td style={{ backgroundColor: 'var(--canvas-25)' }}>
341
+ canvas
342
+ <br />
343
+ 25
344
+ </td>
345
+ <td style={{ backgroundColor: 'var(--canvas-50)' }}>
346
+ canvas
347
+ <br />
348
+ 50
349
+ </td>
350
+ <td style={{ backgroundColor: 'var(--canvas-100)' }}>
351
+ canvas
352
+ <br />
353
+ 100
354
+ </td>
355
+ <td style={{ backgroundColor: 'var(--canvas-200)' }}>
356
+ canvas
357
+ <br />
358
+ 200
359
+ </td>
360
+ <td style={{ backgroundColor: 'var(--canvas-300)' }}>
361
+ canvas
362
+ <br />
363
+ 300
364
+ </td>
365
+ <td style={{ backgroundColor: 'var(--canvas-400)' }}>
366
+ canvas
367
+ <br />
368
+ 400
369
+ </td>
370
+ <td style={{ backgroundColor: 'var(--canvas-500)' }}>
371
+ canvas
372
+ <br />
373
+ 500
374
+ </td>
375
+ <td style={{ backgroundColor: 'var(--canvas-600)' }}>
376
+ canvas
377
+ <br />
378
+ 600
379
+ </td>
380
+ <td style={{ backgroundColor: 'var(--canvas-700)' }}>
381
+ canvas
382
+ <br />
383
+ 700
384
+ </td>
385
+ <td style={{ backgroundColor: 'var(--canvas-800)' }}>
386
+ canvas
387
+ <br />
388
+ 800
389
+ </td>
390
+ <td style={{ backgroundColor: 'var(--canvas-900)' }}>
391
+ canvas
392
+ <br />
393
+ 900
394
+ </td>
395
+ <td style={{ backgroundColor: 'var(--canvas-950)' }}>
396
+ canvas
397
+ <br />
398
+ 950
399
+ </td>
400
+ </tr>
401
+ </tbody>
402
+ </table>
403
+ </div>
404
+ <div style={{ marginBottom: '2rem' }}>
405
+ <table>
406
+ <tbody>
407
+ <tr>
408
+ <td style={{ backgroundColor: 'var(--red-25)' }}>
409
+ red
410
+ <br />
411
+ 25
412
+ </td>
413
+ <td style={{ backgroundColor: 'var(--red-50)' }}>
414
+ red
415
+ <br />
416
+ 50
417
+ </td>
418
+ <td style={{ backgroundColor: 'var(--red-100)' }}>
419
+ red
420
+ <br />
421
+ 100
422
+ </td>
423
+ <td style={{ backgroundColor: 'var(--red-200)' }}>
424
+ red
425
+ <br />
426
+ 200
427
+ </td>
428
+ <td style={{ backgroundColor: 'var(--red-300)' }}>
429
+ red
430
+ <br />
431
+ 300
432
+ </td>
433
+ <td style={{ backgroundColor: 'var(--red-400)' }}>
434
+ red
435
+ <br />
436
+ 400
437
+ </td>
438
+ <td style={{ backgroundColor: 'var(--red-500)' }}>
439
+ red
440
+ <br />
441
+ 500
442
+ </td>
443
+ <td style={{ backgroundColor: 'var(--red-600)' }}>
444
+ red
445
+ <br />
446
+ 600
447
+ </td>
448
+ <td style={{ backgroundColor: 'var(--red-700)' }}>
449
+ red
450
+ <br />
451
+ 700
452
+ </td>
453
+ <td style={{ backgroundColor: 'var(--red-800)' }}>
454
+ red
455
+ <br />
456
+ 800
457
+ </td>
458
+ <td style={{ backgroundColor: 'var(--red-900)' }}>
459
+ red
460
+ <br />
461
+ 900
462
+ </td>
463
+ <td style={{ backgroundColor: 'var(--red-950)' }}>
464
+ red
465
+ <br />
466
+ 950
467
+ </td>
468
+ </tr>
469
+ <tr>
470
+ <td style={{ backgroundColor: 'var(--green-25)' }}>
471
+ green
472
+ <br />
473
+ 25
474
+ </td>
475
+ <td style={{ backgroundColor: 'var(--green-50)' }}>
476
+ green
477
+ <br />
478
+ 50
479
+ </td>
480
+ <td style={{ backgroundColor: 'var(--green-100)' }}>
481
+ green
482
+ <br />
483
+ 100
484
+ </td>
485
+ <td style={{ backgroundColor: 'var(--green-200)' }}>
486
+ green
487
+ <br />
488
+ 200
489
+ </td>
490
+ <td style={{ backgroundColor: 'var(--green-300)' }}>
491
+ green
492
+ <br />
493
+ 300
494
+ </td>
495
+ <td style={{ backgroundColor: 'var(--green-400)' }}>
496
+ green
497
+ <br />
498
+ 400
499
+ </td>
500
+ <td style={{ backgroundColor: 'var(--green-500)' }}>
501
+ green
502
+ <br />
503
+ 500
504
+ </td>
505
+ <td style={{ backgroundColor: 'var(--green-600)' }}>
506
+ green
507
+ <br />
508
+ 600
509
+ </td>
510
+ <td style={{ backgroundColor: 'var(--green-700)' }}>
511
+ green
512
+ <br />
513
+ 700
514
+ </td>
515
+ <td style={{ backgroundColor: 'var(--green-800)' }}>
516
+ green
517
+ <br />
518
+ 800
519
+ </td>
520
+ <td style={{ backgroundColor: 'var(--green-900)' }}>
521
+ green
522
+ <br />
523
+ 900
524
+ </td>
525
+ <td style={{ backgroundColor: 'var(--green-950)' }}>
526
+ green
527
+ <br />
528
+ 950
529
+ </td>
530
+ </tr>
531
+ <tr>
532
+ <td style={{ backgroundColor: 'var(--blue-25)' }}>
533
+ blue
534
+ <br />
535
+ 25
536
+ </td>
537
+ <td style={{ backgroundColor: 'var(--blue-50)' }}>
538
+ blue
539
+ <br />
540
+ 50
541
+ </td>
542
+ <td style={{ backgroundColor: 'var(--blue-100)' }}>
543
+ blue
544
+ <br />
545
+ 100
546
+ </td>
547
+ <td style={{ backgroundColor: 'var(--blue-200)' }}>
548
+ blue
549
+ <br />
550
+ 200
551
+ </td>
552
+ <td style={{ backgroundColor: 'var(--blue-300)' }}>
553
+ blue
554
+ <br />
555
+ 300
556
+ </td>
557
+ <td style={{ backgroundColor: 'var(--blue-400)' }}>
558
+ blue
559
+ <br />
560
+ 400
561
+ </td>
562
+ <td style={{ backgroundColor: 'var(--blue-500)' }}>
563
+ blue
564
+ <br />
565
+ 500
566
+ </td>
567
+ <td style={{ backgroundColor: 'var(--blue-600)' }}>
568
+ blue
569
+ <br />
570
+ 600
571
+ </td>
572
+ <td style={{ backgroundColor: 'var(--blue-700)' }}>
573
+ blue
574
+ <br />
575
+ 700
576
+ </td>
577
+ <td style={{ backgroundColor: 'var(--blue-800)' }}>
578
+ blue
579
+ <br />
580
+ 800
581
+ </td>
582
+ <td style={{ backgroundColor: 'var(--blue-900)' }}>
583
+ blue
584
+ <br />
585
+ 900
586
+ </td>
587
+ <td style={{ backgroundColor: 'var(--blue-950)' }}>
588
+ blue
589
+ <br />
590
+ 950
591
+ </td>
592
+ </tr>
593
+ <tr>
594
+ <td style={{ backgroundColor: 'var(--yellow-25)' }}>
595
+ yellow
596
+ <br />
597
+ 25
598
+ </td>
599
+ <td style={{ backgroundColor: 'var(--yellow-50)' }}>
600
+ yellow
601
+ <br />
602
+ 50
603
+ </td>
604
+ <td style={{ backgroundColor: 'var(--yellow-100)' }}>
605
+ yellow
606
+ <br />
607
+ 100
608
+ </td>
609
+ <td style={{ backgroundColor: 'var(--yellow-200)' }}>
610
+ yellow
611
+ <br />
612
+ 200
613
+ </td>
614
+ <td style={{ backgroundColor: 'var(--yellow-300)' }}>
615
+ yellow
616
+ <br />
617
+ 300
618
+ </td>
619
+ <td style={{ backgroundColor: 'var(--yellow-400)' }}>
620
+ yellow
621
+ <br />
622
+ 400
623
+ </td>
624
+ <td style={{ backgroundColor: 'var(--yellow-500)' }}>
625
+ yellow
626
+ <br />
627
+ 500
628
+ </td>
629
+ <td style={{ backgroundColor: 'var(--yellow-600)' }}>
630
+ yellow
631
+ <br />
632
+ 600
633
+ </td>
634
+ <td style={{ backgroundColor: 'var(--yellow-700)' }}>
635
+ yellow
636
+ <br />
637
+ 700
638
+ </td>
639
+ <td style={{ backgroundColor: 'var(--yellow-800)' }}>
640
+ yellow
641
+ <br />
642
+ 800
643
+ </td>
644
+ <td style={{ backgroundColor: 'var(--yellow-900)' }}>
645
+ yellow
646
+ <br />
647
+ 900
648
+ </td>
649
+ <td style={{ backgroundColor: 'var(--yellow-950)' }}>
650
+ yellow
651
+ <br />
652
+ 950
653
+ </td>
654
+ </tr>
655
+ </tbody>
656
+ </table>
657
+ </div>
658
+ </>
659
+ )
660
+ }
661
+
662
+ const meta: Meta = {
663
+ /* 👇 The title prop is optional.
664
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
665
+ * to learn how to generate automatic titles
666
+ */
667
+ title: 'Theme',
668
+ component: Colors,
669
+ }
670
+
671
+ export default meta