@lukso/web-components 1.6.2 → 1.7.3

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 (328) hide show
  1. package/dist/color-palette.cjs +1363 -0
  2. package/dist/{shared/utils/color-palette.d.ts → color-palette.d.ts} +1 -2
  3. package/dist/color-palette.d.ts.map +1 -0
  4. package/dist/color-palette.js +1356 -0
  5. package/dist/components/index.cjs +74 -0
  6. package/dist/components/index.d.ts +2 -1
  7. package/dist/components/index.d.ts.map +1 -1
  8. package/dist/components/index.js +17 -7354
  9. package/dist/components/lukso-button/index.cjs +144 -0
  10. package/dist/components/lukso-button/index.js +95 -1190
  11. package/dist/components/lukso-card/index.cjs +143 -0
  12. package/dist/components/lukso-card/index.js +61 -1487
  13. package/dist/components/lukso-icon/index.cjs +4366 -0
  14. package/dist/components/lukso-icon/index.js +1713 -2410
  15. package/dist/components/lukso-input/index.cjs +219 -0
  16. package/dist/components/lukso-input/index.d.ts +1 -2
  17. package/dist/components/lukso-input/index.d.ts.map +1 -1
  18. package/dist/components/lukso-input/index.js +128 -1229
  19. package/dist/components/lukso-modal/index.cjs +70 -0
  20. package/dist/components/lukso-modal/index.d.ts +18 -0
  21. package/dist/components/lukso-modal/index.d.ts.map +1 -0
  22. package/dist/components/lukso-modal/index.js +68 -0
  23. package/dist/components/lukso-navbar/index.cjs +74 -0
  24. package/dist/components/lukso-navbar/index.js +44 -1155
  25. package/dist/components/lukso-profile/index.cjs +547 -0
  26. package/dist/components/lukso-profile/index.js +483 -1370
  27. package/dist/components/lukso-sanitize/index.cjs +1730 -0
  28. package/dist/components/lukso-sanitize/index.js +1643 -1544
  29. package/dist/components/lukso-tag/index.cjs +78 -0
  30. package/dist/components/lukso-tag/index.js +52 -1189
  31. package/dist/components/lukso-test/index.cjs +120 -0
  32. package/dist/components/lukso-test/index.js +65 -1767
  33. package/dist/components/lukso-username/index.cjs +126 -0
  34. package/dist/components/lukso-username/index.js +75 -1206
  35. package/dist/components/lukso-wizard/index.cjs +93 -0
  36. package/dist/components/lukso-wizard/index.js +48 -1254
  37. package/dist/directive-9ec64c08.js +28 -0
  38. package/dist/directive-db00f5fb.cjs +34 -0
  39. package/dist/index-4aafbf5c.cjs +67 -0
  40. package/dist/index-714323c9.js +18 -0
  41. package/dist/index-7dc05ee5.cjs +20 -0
  42. package/dist/index-e1077e02.js +59 -0
  43. package/dist/index.cjs +74 -0
  44. package/dist/index.js +17 -7354
  45. package/dist/shared/tailwind-element/index.cjs +10 -0
  46. package/dist/shared/tailwind-element/index.js +1 -1064
  47. package/dist/state-7fde94d1.js +9 -0
  48. package/dist/state-a62a7d5d.cjs +11 -0
  49. package/dist/style-map-3f88f525.js +10 -0
  50. package/dist/style-map-e193a4d9.cjs +12 -0
  51. package/dist/styles/main.css.map +1 -1
  52. package/package.json +85 -147
  53. package/tools/assets/fonts/index.cjs +10 -0
  54. package/tools/assets/fonts/index.d.ts +2 -0
  55. package/tools/assets/fonts/index.d.ts.map +1 -0
  56. package/tools/assets/fonts/index.js +6 -0
  57. package/tools/assets/images/index.cjs +10 -0
  58. package/tools/assets/images/index.d.ts +2 -0
  59. package/tools/assets/images/index.d.ts.map +1 -0
  60. package/tools/assets/images/index.js +6 -0
  61. package/tools/assets/index.cjs +15 -0
  62. package/tools/assets/index.d.ts +4 -0
  63. package/tools/assets/index.d.ts.map +1 -0
  64. package/tools/assets/index.js +9 -0
  65. package/tools/color-palette-a34f5d09.js +1356 -0
  66. package/tools/color-palette-bf5780ed.cjs +1362 -0
  67. package/tools/color-palette.cjs +11 -146
  68. package/tools/color-palette.d.ts +39 -52
  69. package/tools/color-palette.d.ts.map +1 -1
  70. package/tools/color-palette.js +1 -0
  71. package/tools/copy-assets.cjs +50 -136
  72. package/tools/copy-assets.d.ts +7 -9
  73. package/tools/copy-assets.d.ts.map +1 -1
  74. package/tools/copy-assets.js +49 -0
  75. package/tools/index.cjs +35 -0
  76. package/tools/index.d.ts +6 -0
  77. package/tools/index.d.ts.map +1 -0
  78. package/tools/index.js +22 -0
  79. package/tools/sass/index.cjs +7 -0
  80. package/tools/sass/index.js +1 -0
  81. package/tools/styles/index.cjs +5 -0
  82. package/tools/styles/index.js +3 -0
  83. package/tools/styles/main.css +287 -0
  84. package/CHANGELOG.md +0 -278
  85. package/dist/assets/fonts/index.js +0 -4
  86. package/dist/assets/fonts/index.ts +0 -1
  87. package/dist/assets/fonts/index.umd.cjs +0 -1
  88. package/dist/assets/images/index.js +0 -4
  89. package/dist/assets/images/index.ts +0 -1
  90. package/dist/assets/images/index.umd.cjs +0 -1
  91. package/dist/assets/index.js +0 -4
  92. package/dist/assets/index.ts +0 -1
  93. package/dist/assets/index.umd.cjs +0 -1
  94. package/dist/color-palette/index.js +0 -705
  95. package/dist/color-palette/index.umd.cjs +0 -1
  96. package/dist/components/index.umd.cjs +0 -3756
  97. package/dist/components/lukso-button/index.umd.cjs +0 -88
  98. package/dist/components/lukso-card/index.umd.cjs +0 -145
  99. package/dist/components/lukso-icon/index.umd.cjs +0 -3465
  100. package/dist/components/lukso-input/index.umd.cjs +0 -109
  101. package/dist/components/lukso-navbar/index.umd.cjs +0 -73
  102. package/dist/components/lukso-profile/index.umd.cjs +0 -90
  103. package/dist/components/lukso-sanitize/index.umd.cjs +0 -61
  104. package/dist/components/lukso-tag/index.umd.cjs +0 -67
  105. package/dist/components/lukso-test/index.umd.cjs +0 -95
  106. package/dist/components/lukso-username/index.umd.cjs +0 -75
  107. package/dist/components/lukso-wizard/index.umd.cjs +0 -89
  108. package/dist/index.umd.cjs +0 -3756
  109. package/dist/sass/index.js +0 -4
  110. package/dist/sass/index.ts +0 -1
  111. package/dist/sass/index.umd.cjs +0 -1
  112. package/dist/shared/assets/index.d.ts +0 -3
  113. package/dist/shared/assets/index.d.ts.map +0 -1
  114. package/dist/shared/directives/custom-class-map/index.d.ts +0 -26
  115. package/dist/shared/directives/custom-class-map/index.d.ts.map +0 -1
  116. package/dist/shared/directives/index.d.ts +0 -2
  117. package/dist/shared/directives/index.d.ts.map +0 -1
  118. package/dist/shared/styles/index.d.ts +0 -3
  119. package/dist/shared/styles/index.d.ts.map +0 -1
  120. package/dist/shared/tailwind-element/index.umd.cjs +0 -39
  121. package/dist/shared/tailwind-element.js +0 -1064
  122. package/dist/shared/tailwind-element.umd.cjs +0 -39
  123. package/dist/shared/utils/color-palette.d.ts.map +0 -1
  124. package/dist/styles/index.js +0 -4
  125. package/dist/styles/index.umd.cjs +0 -1
  126. package/src/components/index.ts +0 -13
  127. package/src/components/lukso-button/index.ts +0 -145
  128. package/src/components/lukso-button/lukso-button.stories.ts +0 -216
  129. package/src/components/lukso-card/index.ts +0 -131
  130. package/src/components/lukso-card/lukso-card.stories.ts +0 -191
  131. package/src/components/lukso-card/style.scss +0 -3
  132. package/src/components/lukso-icon/icons/add-photo.ts +0 -46
  133. package/src/components/lukso-icon/icons/arrow-down-lg.ts +0 -26
  134. package/src/components/lukso-icon/icons/arrow-down-sm.ts +0 -26
  135. package/src/components/lukso-icon/icons/arrow-left-lg.ts +0 -26
  136. package/src/components/lukso-icon/icons/arrow-left-sm.ts +0 -26
  137. package/src/components/lukso-icon/icons/arrow-right-lg.ts +0 -26
  138. package/src/components/lukso-icon/icons/arrow-right-sm.ts +0 -26
  139. package/src/components/lukso-icon/icons/arrow-up-lg.ts +0 -26
  140. package/src/components/lukso-icon/icons/arrow-up-sm.ts +0 -26
  141. package/src/components/lukso-icon/icons/barbell-outline.ts +0 -54
  142. package/src/components/lukso-icon/icons/bulb-outline.ts +0 -54
  143. package/src/components/lukso-icon/icons/camera.ts +0 -40
  144. package/src/components/lukso-icon/icons/clipboard.ts +0 -59
  145. package/src/components/lukso-icon/icons/clock.ts +0 -31
  146. package/src/components/lukso-icon/icons/close-lg.ts +0 -33
  147. package/src/components/lukso-icon/icons/close-sm.ts +0 -33
  148. package/src/components/lukso-icon/icons/cloud.ts +0 -25
  149. package/src/components/lukso-icon/icons/compass-outline.ts +0 -29
  150. package/src/components/lukso-icon/icons/complete-filled-fade-in.ts +0 -34
  151. package/src/components/lukso-icon/icons/complete-filled.ts +0 -32
  152. package/src/components/lukso-icon/icons/complete-outline.ts +0 -31
  153. package/src/components/lukso-icon/icons/connect.ts +0 -33
  154. package/src/components/lukso-icon/icons/connections.ts +0 -34
  155. package/src/components/lukso-icon/icons/contract-lock.ts +0 -43
  156. package/src/components/lukso-icon/icons/controller.ts +0 -55
  157. package/src/components/lukso-icon/icons/copy.ts +0 -31
  158. package/src/components/lukso-icon/icons/cross-outline.ts +0 -38
  159. package/src/components/lukso-icon/icons/dots.ts +0 -22
  160. package/src/components/lukso-icon/icons/edit.ts +0 -30
  161. package/src/components/lukso-icon/icons/error.ts +0 -31
  162. package/src/components/lukso-icon/icons/eth-logo.ts +0 -50
  163. package/src/components/lukso-icon/icons/expand.ts +0 -31
  164. package/src/components/lukso-icon/icons/extension.ts +0 -31
  165. package/src/components/lukso-icon/icons/eye-hide.ts +0 -47
  166. package/src/components/lukso-icon/icons/eye-show.ts +0 -37
  167. package/src/components/lukso-icon/icons/filter.ts +0 -43
  168. package/src/components/lukso-icon/icons/fish-outline.ts +0 -36
  169. package/src/components/lukso-icon/icons/flip.ts +0 -45
  170. package/src/components/lukso-icon/icons/globe.ts +0 -61
  171. package/src/components/lukso-icon/icons/google-color.ts +0 -35
  172. package/src/components/lukso-icon/icons/hamburger.ts +0 -40
  173. package/src/components/lukso-icon/icons/infinite.ts +0 -33
  174. package/src/components/lukso-icon/icons/information.ts +0 -38
  175. package/src/components/lukso-icon/icons/key-outline.ts +0 -25
  176. package/src/components/lukso-icon/icons/link.ts +0 -33
  177. package/src/components/lukso-icon/icons/link1.ts +0 -39
  178. package/src/components/lukso-icon/icons/link2.ts +0 -46
  179. package/src/components/lukso-icon/icons/link3.ts +0 -32
  180. package/src/components/lukso-icon/icons/link4.ts +0 -52
  181. package/src/components/lukso-icon/icons/loading.ts +0 -50
  182. package/src/components/lukso-icon/icons/location.ts +0 -33
  183. package/src/components/lukso-icon/icons/locked.ts +0 -44
  184. package/src/components/lukso-icon/icons/login-2.ts +0 -55
  185. package/src/components/lukso-icon/icons/login-3.ts +0 -53
  186. package/src/components/lukso-icon/icons/login.ts +0 -39
  187. package/src/components/lukso-icon/icons/logo-chrome.ts +0 -35
  188. package/src/components/lukso-icon/icons/lyx-logo.ts +0 -41
  189. package/src/components/lukso-icon/icons/mail.ts +0 -33
  190. package/src/components/lukso-icon/icons/menu-1.ts +0 -71
  191. package/src/components/lukso-icon/icons/menu-2.ts +0 -61
  192. package/src/components/lukso-icon/icons/migrate.ts +0 -47
  193. package/src/components/lukso-icon/icons/minimize.ts +0 -53
  194. package/src/components/lukso-icon/icons/network.ts +0 -49
  195. package/src/components/lukso-icon/icons/notifications.ts +0 -33
  196. package/src/components/lukso-icon/icons/phone-portrait-outline.ts +0 -33
  197. package/src/components/lukso-icon/icons/pin.ts +0 -25
  198. package/src/components/lukso-icon/icons/play-filled.ts +0 -23
  199. package/src/components/lukso-icon/icons/play-outline.ts +0 -24
  200. package/src/components/lukso-icon/icons/plus.ts +0 -33
  201. package/src/components/lukso-icon/icons/profile-add.ts +0 -43
  202. package/src/components/lukso-icon/icons/profile-export.ts +0 -42
  203. package/src/components/lukso-icon/icons/profile-import.ts +0 -42
  204. package/src/components/lukso-icon/icons/profile-recovery-2.ts +0 -62
  205. package/src/components/lukso-icon/icons/profile-recovery.ts +0 -55
  206. package/src/components/lukso-icon/icons/profile-restore.ts +0 -50
  207. package/src/components/lukso-icon/icons/profile.ts +0 -29
  208. package/src/components/lukso-icon/icons/progress-complete.ts +0 -289
  209. package/src/components/lukso-icon/icons/progress-indicator.ts +0 -236
  210. package/src/components/lukso-icon/icons/pulse-dot.ts +0 -22
  211. package/src/components/lukso-icon/icons/qr-code.ts +0 -122
  212. package/src/components/lukso-icon/icons/relayer.ts +0 -40
  213. package/src/components/lukso-icon/icons/reload.ts +0 -32
  214. package/src/components/lukso-icon/icons/return-down.ts +0 -33
  215. package/src/components/lukso-icon/icons/return-left.ts +0 -33
  216. package/src/components/lukso-icon/icons/return-right.ts +0 -33
  217. package/src/components/lukso-icon/icons/return-up.ts +0 -33
  218. package/src/components/lukso-icon/icons/search.ts +0 -28
  219. package/src/components/lukso-icon/icons/settings.ts +0 -33
  220. package/src/components/lukso-icon/icons/smart-contract-doc.ts +0 -40
  221. package/src/components/lukso-icon/icons/smart-contract.ts +0 -31
  222. package/src/components/lukso-icon/icons/star-filled.ts +0 -23
  223. package/src/components/lukso-icon/icons/star-outline.ts +0 -24
  224. package/src/components/lukso-icon/icons/step-dot.ts +0 -34
  225. package/src/components/lukso-icon/icons/step-progress.ts +0 -31
  226. package/src/components/lukso-icon/icons/steps.ts +0 -40
  227. package/src/components/lukso-icon/icons/tick.ts +0 -26
  228. package/src/components/lukso-icon/icons/timer-outline.ts +0 -47
  229. package/src/components/lukso-icon/icons/transaction-receive.ts +0 -39
  230. package/src/components/lukso-icon/icons/transaction-send.ts +0 -39
  231. package/src/components/lukso-icon/icons/transfer.ts +0 -47
  232. package/src/components/lukso-icon/icons/trash.ts +0 -40
  233. package/src/components/lukso-icon/icons/turn-down.ts +0 -33
  234. package/src/components/lukso-icon/icons/turn-left.ts +0 -33
  235. package/src/components/lukso-icon/icons/turn-right.ts +0 -33
  236. package/src/components/lukso-icon/icons/turn-up.ts +0 -33
  237. package/src/components/lukso-icon/icons/unlocked.ts +0 -41
  238. package/src/components/lukso-icon/icons/wallet-outline.ts +0 -35
  239. package/src/components/lukso-icon/icons/warning-round.ts +0 -32
  240. package/src/components/lukso-icon/icons/warning-triangle.ts +0 -32
  241. package/src/components/lukso-icon/index.ts +0 -310
  242. package/src/components/lukso-icon/lukso-icon.stories.ts +0 -116
  243. package/src/components/lukso-icon/style.scss +0 -3
  244. package/src/components/lukso-input/index.ts +0 -211
  245. package/src/components/lukso-input/lukso-input.stories.ts +0 -184
  246. package/src/components/lukso-navbar/index.ts +0 -63
  247. package/src/components/lukso-navbar/lukso-navbar.stories.ts +0 -70
  248. package/src/components/lukso-profile/index.ts +0 -106
  249. package/src/components/lukso-profile/lukso-profile.stories.ts +0 -104
  250. package/src/components/lukso-sanitize/index.ts +0 -28
  251. package/src/components/lukso-sanitize/lukso-sanitize.stories.ts +0 -30
  252. package/src/components/lukso-tag/index.ts +0 -68
  253. package/src/components/lukso-tag/lukso-tag.stories.ts +0 -129
  254. package/src/components/lukso-test/index.ts +0 -72
  255. package/src/components/lukso-test/test.component.scss +0 -7
  256. package/src/components/lukso-test/test.stories.ts +0 -31
  257. package/src/components/lukso-username/index.ts +0 -105
  258. package/src/components/lukso-username/lukso-username.stories.ts +0 -98
  259. package/src/components/lukso-wizard/index.ts +0 -74
  260. package/src/components/lukso-wizard/lukso-wizard.stories.ts +0 -52
  261. package/src/docs/animations.stories.mdx +0 -83
  262. package/src/docs/colors.stories.mdx +0 -77
  263. package/src/docs/drop-shadows.stories.mdx +0 -108
  264. package/src/docs/icons.stories.mdx +0 -1590
  265. package/src/docs/typography.stories.mdx +0 -253
  266. package/src/index.ts +0 -1
  267. package/src/postcss.config.ts +0 -8
  268. package/src/shared/assets/fonts/Apax-Bold.woff2 +0 -0
  269. package/src/shared/assets/fonts/Apax-Light.woff2 +0 -0
  270. package/src/shared/assets/fonts/Apax-Medium.woff2 +0 -0
  271. package/src/shared/assets/fonts/Apax-Regular.woff2 +0 -0
  272. package/src/shared/assets/fonts/Inter-Bold.woff2 +0 -0
  273. package/src/shared/assets/fonts/Inter-ExtraBold.woff2 +0 -0
  274. package/src/shared/assets/fonts/Inter-Medium.woff2 +0 -0
  275. package/src/shared/assets/fonts/Inter-Regular.woff2 +0 -0
  276. package/src/shared/assets/fonts/Inter-SemiBold.woff2 +0 -0
  277. package/src/shared/assets/fonts/Inter-Thin.woff2 +0 -0
  278. package/src/shared/assets/fonts/PT-Mono-Bold.woff2 +0 -0
  279. package/src/shared/assets/fonts/PT-Mono-Regular.woff2 +0 -0
  280. package/src/shared/assets/fonts/index.ts +0 -1
  281. package/src/shared/assets/images/index.ts +0 -1
  282. package/src/shared/assets/images/lukso-logo.svg +0 -3
  283. package/src/shared/assets/images/profile-default.png +0 -0
  284. package/src/shared/assets/index.ts +0 -1
  285. package/src/shared/directives/custom-class-map/index.ts +0 -49
  286. package/src/shared/directives/index.ts +0 -1
  287. package/src/shared/globals.d.ts +0 -5
  288. package/src/shared/styles/colors.scss +0 -91
  289. package/src/shared/styles/component.scss +0 -13
  290. package/src/shared/styles/fonts.scss +0 -97
  291. package/src/shared/styles/index.ts +0 -1
  292. package/src/shared/styles/main.scss +0 -13
  293. package/src/shared/styles/typography.scss +0 -142
  294. package/src/shared/styles/variables.scss +0 -5
  295. package/src/shared/tailwind-element/index.ts +0 -16
  296. package/src/shared/utils/__tests__/slice-address.spec.ts +0 -15
  297. package/src/shared/utils/color-palette.ts +0 -76
  298. package/src/shared/utils/copy-assets.ts +0 -80
  299. package/src/shared/utils/hsl-color-map.ts +0 -20
  300. package/src/shared/utils/slice-address.ts +0 -30
  301. /package/{dist → tools}/assets/fonts/Apax-Bold.woff2 +0 -0
  302. /package/{dist → tools}/assets/fonts/Apax-Light.woff2 +0 -0
  303. /package/{dist → tools}/assets/fonts/Apax-Medium.woff2 +0 -0
  304. /package/{dist → tools}/assets/fonts/Apax-Regular.woff2 +0 -0
  305. /package/{dist → tools}/assets/fonts/Inter-Bold.woff2 +0 -0
  306. /package/{dist → tools}/assets/fonts/Inter-ExtraBold.woff2 +0 -0
  307. /package/{dist → tools}/assets/fonts/Inter-Medium.woff2 +0 -0
  308. /package/{dist → tools}/assets/fonts/Inter-Regular.woff2 +0 -0
  309. /package/{dist → tools}/assets/fonts/Inter-SemiBold.woff2 +0 -0
  310. /package/{dist → tools}/assets/fonts/Inter-Thin.woff2 +0 -0
  311. /package/{dist → tools}/assets/fonts/PT-Mono-Bold.woff2 +0 -0
  312. /package/{dist → tools}/assets/fonts/PT-Mono-Regular.woff2 +0 -0
  313. /package/{dist → tools}/assets/images/lukso-logo.svg +0 -0
  314. /package/{dist → tools}/assets/images/profile-default.png +0 -0
  315. /package/{dist/shared/utils → tools}/hsl-color-map.d.ts +0 -0
  316. /package/{dist/shared/utils → tools}/hsl-color-map.d.ts.map +0 -0
  317. /package/{dist → tools}/sass/colors.scss +0 -0
  318. /package/{dist → tools}/sass/component.scss +0 -0
  319. /package/{dist → tools}/sass/fonts.scss +0 -0
  320. /package/{dist/shared/assets/fonts → tools/sass}/index.d.ts +0 -0
  321. /package/{dist/shared/assets/fonts → tools/sass}/index.d.ts.map +0 -0
  322. /package/{dist → tools}/sass/main.scss +0 -0
  323. /package/{dist → tools}/sass/typography.scss +0 -0
  324. /package/{dist → tools}/sass/variables.scss +0 -0
  325. /package/{dist/shared/utils → tools}/slice-address.d.ts +0 -0
  326. /package/{dist/shared/utils → tools}/slice-address.d.ts.map +0 -0
  327. /package/{dist/shared/assets/images → tools/styles}/index.d.ts +0 -0
  328. /package/{dist/shared/assets/images → tools/styles}/index.d.ts.map +0 -0
package/src/docs/colors.stories.mdx DELETED
@@ -1,77 +0,0 @@
1
- import {
2
- Meta,
3
- ColorPalette,
4
- ColorItem,
5
- Story,
6
- Canvas,
7
- Source,
8
- } from '@storybook/addon-docs'
9
- import { html } from 'lit-html'
10
- import dedent from 'ts-dedent'
11
-
12
- import {
13
- colorPalette,
14
- neutral1,
15
- neutral2,
16
- neutral3,
17
- } from '../shared/utils/color-palette'
18
-
19
- <Meta title="Design System/Colors" />
20
-
21
- <h1 id="typography">Colors</h1>
22
-
23
- We use colors that has fixed `hue` and `saturation` and operate over `lightness` values.
24
- For instance in `neutral-20` the lightness value is `20`.
25
-
26
- ### **Example Usage**
27
-
28
- Apply color class like any other Tailwind color, for example:
29
-
30
- ```html
31
- <span class="bg-neutral-20 text-honey-72">Text</span>
32
- ```
33
-
34
- ### **Color Palette**
35
-
36
- <br />
37
-
38
- <ColorPalette>
39
- #### **Neutral Colors**
40
- <br />
41
- <br />
42
- <ColorItem title="neutral" colors={neutral1} />
43
- <ColorItem colors={neutral2} />
44
- <ColorItem colors={neutral3} />
45
- ### **Accent Colors**
46
- <br />
47
- <br />
48
- <ColorItem title="honey" colors={colorPalette.honey} />
49
- <ColorItem title="coral" colors={colorPalette.coral} />
50
- <ColorItem title="warm" colors={colorPalette.warm} />
51
- <ColorItem title="sea salt" colors={colorPalette['sea-salt']} />
52
- <ColorItem title="cloud" colors={colorPalette.cloud} />
53
- <ColorItem title="ocean" colors={colorPalette.ocean} />
54
- <ColorItem title="sky" colors={colorPalette.sky} />
55
- <ColorItem title="lukso" colors={colorPalette.lukso} />
56
- ### **Utility Colors**
57
- <br />
58
- <br />
59
- <ColorItem title="yellow" colors={colorPalette.yellow} />
60
- <ColorItem title="green" colors={colorPalette.green} />
61
- <ColorItem title="blue" colors={colorPalette.blue} />
62
- <ColorItem title="red" colors={colorPalette.red} />
63
- ### **Purples**
64
- <br />
65
- <br />
66
- <ColorItem title="purple" colors={colorPalette.purple} />
67
- ### **Pinks**
68
- <br />
69
- <br />
70
- <ColorItem title="pink" colors={colorPalette.pink} />
71
- ### **Gradients**
72
- <br />
73
- <br />
74
- <ColorItem title="gradient-1" colors={colorPalette['gradient-1']} />
75
- <ColorItem title="gradient-2" colors={colorPalette['gradient-2']} />
76
- <ColorItem title="gradient-3" colors={colorPalette['gradient-3']} />
77
- </ColorPalette>
package/src/docs/drop-shadows.stories.mdx DELETED
@@ -1,108 +0,0 @@
1
- import { Meta } from '@storybook/addon-docs'
2
-
3
- <h1 id="typography">Drop Shadows</h1>
4
-
5
- Set of drop shadows for use in the design system.
6
-
7
- <Meta title="Design System/Drop Shadows" />
8
-
9
- ### **Example Usage**
10
-
11
- Apply shadow class like any other Tailwind shadow using `shadow-{name}` pattern, for example:
12
-
13
- ```html
14
- <span class="shadow-neutral-drop-shadow">Text</span>
15
- ```
16
-
17
- ### **Object Drop Shadows**
18
-
19
- <div class="flex gap-16 py-12">
20
- <div class="shadow-1xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
21
- 1xl
22
- </div>
23
- <div class="shadow-2xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
24
- 2xl
25
- </div>
26
- <div class="shadow-3xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
27
- 3xl
28
- </div>
29
- </div>
30
-
31
- <div class="flex gap-16 py-12">
32
- <div class="shadow-neutral-drop-shadow px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
33
- neutral-drop-shadow
34
- </div>
35
- <div class="shadow-neutral-drop-shadow-1xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
36
- neutral-drop-shadow-1xl
37
- </div>
38
- <div class="shadow-neutral-drop-shadow-2xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
39
- neutral-drop-shadow-2xl
40
- </div>
41
- <div class="shadow-neutral-drop-shadow-3xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
42
- neutral-drop-shadow-3xl
43
- </div>
44
- </div>
45
-
46
- <div class="flex gap-16 py-12">
47
- <div class="shadow-pink-drop-shadow px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
48
- pink-drop-shadow
49
- </div>
50
- <div class="shadow-pink-drop-shadow-1xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
51
- pink-drop-shadow-1xl
52
- </div>
53
- <div class="shadow-pink-drop-shadow-2xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
54
- pink-drop-shadow-2xl
55
- </div>
56
- <div class="shadow-pink-drop-shadow-3xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
57
- pink-drop-shadow-3xl
58
- </div>
59
- </div>
60
-
61
- ### **Object Inner Shadows**
62
-
63
- <div class="flex gap-16 py-12">
64
- <div class="shadow-neutral-inner-shadow px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
65
- neutral-inner-shadow
66
- </div>
67
- <div class="shadow-neutral-inner-shadow-1xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
68
- neutral-inner-shadow-1xl
69
- </div>
70
- <div class="shadow-neutral-inner-shadow-2xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
71
- neutral-inner-shadow-2xl
72
- </div>
73
- <div class="shadow-neutral-inner-shadow-3xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
74
- neutral-inner-shadow-3xl
75
- </div>
76
- </div>
77
-
78
- ### **Object Above Shadows**
79
-
80
- <div class="flex gap-16 py-12">
81
- <div class="shadow-neutral-above-shadow px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
82
- neutral-above-shadow
83
- </div>
84
- <div class="shadow-neutral-above-shadow-1xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
85
- neutral-above-shadow-1xl
86
- </div>
87
- <div class="shadow-neutral-above-shadow-2xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
88
- neutral-above-shadow-2xl
89
- </div>
90
- <div class="shadow-neutral-above-shadow-3xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
91
- neutral-above-shadow-3xl
92
- </div>
93
- </div>
94
-
95
- <div class="flex gap-16 py-12">
96
- <div class="shadow-pink-above-shadow px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
97
- pink-above-shadow
98
- </div>
99
- <div class="shadow-pink-above-shadow-1xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
100
- pink-above-shadow-1xl
101
- </div>
102
- <div class="shadow-pink-above-shadow-2xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
103
- pink-above-shadow-2xl
104
- </div>
105
- <div class="shadow-pink-above-shadow-3xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
106
- pink-above-shadow-3xl
107
- </div>
108
- </div>