@graupl/graupl 1.0.0-beta.4 → 1.0.0-beta.41

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 (475) hide show
  1. package/LICENSE +674 -0
  2. package/README.md +9 -0
  3. package/dist/css/base/button.css +2 -2
  4. package/dist/css/base/button.css.map +1 -1
  5. package/dist/css/base/form.css +2 -2
  6. package/dist/css/base/form.css.map +1 -1
  7. package/dist/css/base/link.css +2 -2
  8. package/dist/css/base/link.css.map +1 -1
  9. package/dist/css/base/table.css +2 -2
  10. package/dist/css/base/table.css.map +1 -1
  11. package/dist/css/base.css +2 -2
  12. package/dist/css/base.css.map +1 -1
  13. package/dist/css/component/accordion.css +2 -2
  14. package/dist/css/component/accordion.css.map +1 -1
  15. package/dist/css/component/alert.css +2 -2
  16. package/dist/css/component/alert.css.map +1 -1
  17. package/dist/css/component/badge.css +2 -0
  18. package/dist/css/component/badge.css.map +1 -0
  19. package/dist/css/component/breadcrumb.css +2 -0
  20. package/dist/css/component/breadcrumb.css.map +1 -0
  21. package/dist/css/component/card.css +2 -2
  22. package/dist/css/component/card.css.map +1 -1
  23. package/dist/css/component/carousel.css +2 -2
  24. package/dist/css/component/carousel.css.map +1 -1
  25. package/dist/css/component/disclosure.css +2 -0
  26. package/dist/css/component/disclosure.css.map +1 -0
  27. package/dist/css/component/input-group.css +2 -2
  28. package/dist/css/component/input-group.css.map +1 -1
  29. package/dist/css/component/list.css +2 -2
  30. package/dist/css/component/list.css.map +1 -1
  31. package/dist/css/component/menu.css +2 -2
  32. package/dist/css/component/menu.css.map +1 -1
  33. package/dist/css/component/navigation.css +2 -2
  34. package/dist/css/component/navigation.css.map +1 -1
  35. package/dist/css/component/tabs.css +2 -0
  36. package/dist/css/component/tabs.css.map +1 -0
  37. package/dist/css/component.css +2 -2
  38. package/dist/css/component.css.map +1 -1
  39. package/dist/css/graupl.css +2 -2
  40. package/dist/css/graupl.css.map +1 -1
  41. package/dist/css/init.css +2 -2
  42. package/dist/css/init.css.map +1 -1
  43. package/dist/css/layout/columns.css +2 -2
  44. package/dist/css/layout/columns.css.map +1 -1
  45. package/dist/css/layout/container.css +2 -2
  46. package/dist/css/layout/container.css.map +1 -1
  47. package/dist/css/layout/flex-columns.css +2 -2
  48. package/dist/css/layout/flex-columns.css.map +1 -1
  49. package/dist/css/layout.css +2 -2
  50. package/dist/css/layout.css.map +1 -1
  51. package/dist/css/normalize.css +2 -2
  52. package/dist/css/normalize.css.map +1 -1
  53. package/dist/css/state/focus.css +2 -2
  54. package/dist/css/state/focus.css.map +1 -1
  55. package/dist/css/state.css +2 -2
  56. package/dist/css/state.css.map +1 -1
  57. package/dist/css/theme/color.css +2 -2
  58. package/dist/css/theme/color.css.map +1 -1
  59. package/dist/css/theme/typography.css +2 -2
  60. package/dist/css/theme/typography.css.map +1 -1
  61. package/dist/css/theme.css +2 -2
  62. package/dist/css/theme.css.map +1 -1
  63. package/dist/css/utilities/alignment.css +1 -1
  64. package/dist/css/utilities/alignment.css.map +1 -1
  65. package/dist/css/utilities/background.css +2 -2
  66. package/dist/css/utilities/background.css.map +1 -1
  67. package/dist/css/utilities/border.css +2 -2
  68. package/dist/css/utilities/border.css.map +1 -1
  69. package/dist/css/utilities/color.css +2 -2
  70. package/dist/css/utilities/color.css.map +1 -1
  71. package/dist/css/utilities/container.css +2 -0
  72. package/dist/css/utilities/container.css.map +1 -0
  73. package/dist/css/utilities/display.css +2 -2
  74. package/dist/css/utilities/display.css.map +1 -1
  75. package/dist/css/utilities/flex.css +2 -2
  76. package/dist/css/utilities/flex.css.map +1 -1
  77. package/dist/css/utilities/gradient.css +2 -2
  78. package/dist/css/utilities/gradient.css.map +1 -1
  79. package/dist/css/utilities/height.css +2 -2
  80. package/dist/css/utilities/height.css.map +1 -1
  81. package/dist/css/utilities/inset.css +2 -2
  82. package/dist/css/utilities/inset.css.map +1 -1
  83. package/dist/css/utilities/isolation.css +2 -0
  84. package/dist/css/utilities/isolation.css.map +1 -0
  85. package/dist/css/utilities/justification.css +1 -1
  86. package/dist/css/utilities/justification.css.map +1 -1
  87. package/dist/css/utilities/list.css +1 -1
  88. package/dist/css/utilities/list.css.map +1 -1
  89. package/dist/css/utilities/object.css +2 -0
  90. package/dist/css/utilities/object.css.map +1 -0
  91. package/dist/css/utilities/order.css +2 -2
  92. package/dist/css/utilities/order.css.map +1 -1
  93. package/dist/css/utilities/position.css +2 -0
  94. package/dist/css/utilities/position.css.map +1 -0
  95. package/dist/css/utilities/ratio.css +2 -2
  96. package/dist/css/utilities/ratio.css.map +1 -1
  97. package/dist/css/utilities/spacing.css +2 -2
  98. package/dist/css/utilities/spacing.css.map +1 -1
  99. package/dist/css/utilities/typography.css +2 -2
  100. package/dist/css/utilities/typography.css.map +1 -1
  101. package/dist/css/utilities/visibility.css +2 -2
  102. package/dist/css/utilities/visibility.css.map +1 -1
  103. package/dist/css/utilities/visually-hidden.css +2 -0
  104. package/dist/css/utilities/visually-hidden.css.map +1 -0
  105. package/dist/css/utilities/width.css +2 -2
  106. package/dist/css/utilities/width.css.map +1 -1
  107. package/dist/css/utilities/z-index.css +2 -0
  108. package/dist/css/utilities/z-index.css.map +1 -0
  109. package/dist/css/utilities.css +2 -2
  110. package/dist/css/utilities.css.map +1 -1
  111. package/dist/js/accordion.js +5 -0
  112. package/dist/js/accordion.js.map +1 -0
  113. package/dist/js/alert.js +5 -0
  114. package/dist/js/alert.js.map +1 -0
  115. package/dist/js/breadcrumb.js +5 -0
  116. package/dist/js/breadcrumb.js.map +1 -0
  117. package/dist/js/carousel.js +5 -0
  118. package/dist/js/carousel.js.map +1 -0
  119. package/dist/js/component/accordion.cjs.js +5 -3
  120. package/dist/js/component/accordion.cjs.js.map +1 -0
  121. package/dist/js/component/accordion.es.js +5 -0
  122. package/dist/js/component/accordion.es.js.map +1 -0
  123. package/dist/js/component/accordion.iife.js +5 -3
  124. package/dist/js/component/accordion.iife.js.map +1 -0
  125. package/dist/js/component/alert.cjs.js +5 -3
  126. package/dist/js/component/alert.cjs.js.map +1 -0
  127. package/dist/js/component/alert.es.js +5 -0
  128. package/dist/js/component/alert.es.js.map +1 -0
  129. package/dist/js/component/alert.iife.js +5 -3
  130. package/dist/js/component/alert.iife.js.map +1 -0
  131. package/dist/js/component/breadcrumb.cjs.js +5 -0
  132. package/dist/js/component/breadcrumb.cjs.js.map +1 -0
  133. package/dist/js/component/breadcrumb.es.js +5 -0
  134. package/dist/js/component/breadcrumb.es.js.map +1 -0
  135. package/dist/js/component/breadcrumb.iife.js +5 -0
  136. package/dist/js/component/breadcrumb.iife.js.map +1 -0
  137. package/dist/js/component/carousel.cjs.js +5 -3
  138. package/dist/js/component/carousel.cjs.js.map +1 -0
  139. package/dist/js/component/carousel.es.js +5 -0
  140. package/dist/js/component/carousel.es.js.map +1 -0
  141. package/dist/js/component/carousel.iife.js +5 -3
  142. package/dist/js/component/carousel.iife.js.map +1 -0
  143. package/dist/js/component/disclosure.cjs.js +5 -0
  144. package/dist/js/component/disclosure.cjs.js.map +1 -0
  145. package/dist/js/component/disclosure.es.js +5 -0
  146. package/dist/js/component/disclosure.es.js.map +1 -0
  147. package/dist/js/component/disclosure.iife.js +5 -0
  148. package/dist/js/component/disclosure.iife.js.map +1 -0
  149. package/dist/js/component/tabs.cjs.js +5 -0
  150. package/dist/js/component/tabs.cjs.js.map +1 -0
  151. package/dist/js/component/tabs.es.js +5 -0
  152. package/dist/js/component/tabs.es.js.map +1 -0
  153. package/dist/js/component/tabs.iife.js +5 -0
  154. package/dist/js/component/tabs.iife.js.map +1 -0
  155. package/dist/js/disclosure.js +5 -0
  156. package/dist/js/disclosure.js.map +1 -0
  157. package/dist/js/generator/accordion.cjs.js +5 -0
  158. package/dist/js/generator/accordion.cjs.js.map +1 -0
  159. package/dist/js/generator/accordion.es.js +5 -0
  160. package/dist/js/generator/accordion.es.js.map +1 -0
  161. package/dist/js/generator/accordion.iife.js +5 -0
  162. package/dist/js/generator/accordion.iife.js.map +1 -0
  163. package/dist/js/generator/alert.cjs.js +5 -0
  164. package/dist/js/generator/alert.cjs.js.map +1 -0
  165. package/dist/js/generator/alert.es.js +5 -0
  166. package/dist/js/generator/alert.es.js.map +1 -0
  167. package/dist/js/generator/alert.iife.js +5 -0
  168. package/dist/js/generator/alert.iife.js.map +1 -0
  169. package/dist/js/generator/breadcrumb.cjs.js +5 -0
  170. package/dist/js/generator/breadcrumb.cjs.js.map +1 -0
  171. package/dist/js/generator/breadcrumb.es.js +5 -0
  172. package/dist/js/generator/breadcrumb.es.js.map +1 -0
  173. package/dist/js/generator/breadcrumb.iife.js +5 -0
  174. package/dist/js/generator/breadcrumb.iife.js.map +1 -0
  175. package/dist/js/generator/carousel.cjs.js +5 -0
  176. package/dist/js/generator/carousel.cjs.js.map +1 -0
  177. package/dist/js/generator/carousel.es.js +5 -0
  178. package/dist/js/generator/carousel.es.js.map +1 -0
  179. package/dist/js/generator/carousel.iife.js +5 -0
  180. package/dist/js/generator/carousel.iife.js.map +1 -0
  181. package/dist/js/generator/disclosure.cjs.js +5 -0
  182. package/dist/js/generator/disclosure.cjs.js.map +1 -0
  183. package/dist/js/generator/disclosure.es.js +5 -0
  184. package/dist/js/generator/disclosure.es.js.map +1 -0
  185. package/dist/js/generator/disclosure.iife.js +5 -0
  186. package/dist/js/generator/disclosure.iife.js.map +1 -0
  187. package/dist/js/generator/navigation.cjs.js +3 -0
  188. package/dist/js/generator/navigation.cjs.js.map +1 -0
  189. package/dist/js/generator/navigation.es.js +3 -0
  190. package/dist/js/generator/navigation.es.js.map +1 -0
  191. package/dist/js/generator/navigation.iife.js +3 -0
  192. package/dist/js/generator/navigation.iife.js.map +1 -0
  193. package/dist/js/generator/tabs.cjs.js +5 -0
  194. package/dist/js/generator/tabs.cjs.js.map +1 -0
  195. package/dist/js/generator/tabs.es.js +5 -0
  196. package/dist/js/generator/tabs.es.js.map +1 -0
  197. package/dist/js/generator/tabs.iife.js +5 -0
  198. package/dist/js/generator/tabs.iife.js.map +1 -0
  199. package/dist/js/graupl.js +5 -0
  200. package/dist/js/graupl.js.map +1 -0
  201. package/dist/js/navigation.js +3 -0
  202. package/dist/js/navigation.js.map +1 -0
  203. package/dist/js/storage/initializer.js +3 -0
  204. package/dist/js/storage/initializer.js.map +1 -0
  205. package/dist/js/storage/storage-manager.cjs.js +3 -0
  206. package/dist/js/storage/storage-manager.cjs.js.map +1 -0
  207. package/dist/js/storage/storage-manager.es.js +3 -0
  208. package/dist/js/storage/storage-manager.es.js.map +1 -0
  209. package/dist/js/storage/storage-manager.iife.js +3 -0
  210. package/dist/js/storage/storage-manager.iife.js.map +1 -0
  211. package/dist/js/tabs.js +5 -0
  212. package/dist/js/tabs.js.map +1 -0
  213. package/package.json +59 -49
  214. package/scss/base/button.scss +1 -1
  215. package/scss/base/form.scss +1 -1
  216. package/scss/base/link.scss +1 -1
  217. package/scss/base/table.scss +1 -1
  218. package/scss/base.scss +1 -1
  219. package/scss/component/accordion.scss +1 -1
  220. package/scss/component/alert.scss +1 -1
  221. package/scss/component/badge.scss +3 -0
  222. package/scss/component/breadcrumb.scss +3 -0
  223. package/scss/component/card.scss +1 -1
  224. package/scss/component/carousel.scss +1 -1
  225. package/scss/component/disclosure.scss +3 -0
  226. package/scss/component/input-group.scss +1 -1
  227. package/scss/component/list.scss +1 -1
  228. package/scss/component/menu.scss +1 -1
  229. package/scss/component/navigation.scss +1 -1
  230. package/scss/component/tabs.scss +3 -0
  231. package/scss/component.scss +1 -1
  232. package/scss/graupl.scss +1 -1
  233. package/scss/init.scss +1 -1
  234. package/scss/layout/columns.scss +1 -1
  235. package/scss/layout/container.scss +1 -1
  236. package/scss/layout/flex-columns.scss +1 -1
  237. package/scss/layout.scss +1 -1
  238. package/scss/normalize.scss +1 -1
  239. package/scss/state/focus.scss +1 -1
  240. package/scss/state.scss +1 -1
  241. package/scss/theme/color.scss +1 -1
  242. package/scss/theme/typography.scss +1 -1
  243. package/scss/theme.scss +1 -1
  244. package/scss/utilities/alignment.scss +1 -1
  245. package/scss/utilities/background.scss +1 -1
  246. package/scss/utilities/border.scss +1 -1
  247. package/scss/utilities/color.scss +1 -1
  248. package/scss/utilities/container.scss +3 -0
  249. package/scss/utilities/display.scss +1 -1
  250. package/scss/utilities/flex.scss +1 -1
  251. package/scss/utilities/gradient.scss +1 -1
  252. package/scss/utilities/height.scss +1 -1
  253. package/scss/utilities/inset.scss +1 -1
  254. package/scss/utilities/isolation.scss +3 -0
  255. package/scss/utilities/justification.scss +1 -1
  256. package/scss/utilities/list.scss +1 -1
  257. package/scss/utilities/object.scss +3 -0
  258. package/scss/utilities/order.scss +1 -1
  259. package/scss/utilities/position.scss +3 -0
  260. package/scss/utilities/ratio.scss +1 -1
  261. package/scss/utilities/spacing.scss +1 -1
  262. package/scss/utilities/typography.scss +1 -1
  263. package/scss/utilities/visibility.scss +1 -1
  264. package/scss/utilities/visually-hidden.scss +3 -0
  265. package/scss/utilities/width.scss +1 -1
  266. package/scss/utilities/z-index.scss +3 -0
  267. package/scss/utilities.scss +1 -1
  268. package/.browserslistrc +0 -3
  269. package/.czrc +0 -3
  270. package/.editorconfig +0 -13
  271. package/.github/CODE_OF_CONDUCT.md +0 -73
  272. package/.github/COMMIT_CONVENTION.md +0 -17
  273. package/.github/CONTRIBUTING.md +0 -86
  274. package/.github/ISSUE_TEMPLATE/bug_report.md +0 -30
  275. package/.github/ISSUE_TEMPLATE/documentation.md +0 -20
  276. package/.github/ISSUE_TEMPLATE/feature_request.md +0 -20
  277. package/.github/SECURITY.md +0 -26
  278. package/.github/dependabot.yml +0 -17
  279. package/.github/pull_request_template.md +0 -5
  280. package/.github/workflows/codeql-analysis.yml +0 -71
  281. package/.github/workflows/docs.yml +0 -59
  282. package/.github/workflows/test.yml +0 -27
  283. package/.husky/commit-msg +0 -3
  284. package/.husky/pre-commit +0 -4
  285. package/.prettierignore +0 -12
  286. package/.stylelintignore +0 -9
  287. package/.versionrc.cjs +0 -61
  288. package/CHANGELOG.md +0 -430
  289. package/build.js +0 -7
  290. package/combine-at-rules.cjs +0 -61
  291. package/commitlint.config.js +0 -5
  292. package/dist/css/utilities/postion.css +0 -2
  293. package/dist/css/utilities/postion.css.map +0 -1
  294. package/dist/js/component/accordion.esm.js +0 -1289
  295. package/dist/js/component/alert.esm.js +0 -529
  296. package/dist/js/component/carousel.esm.js +0 -1110
  297. package/dist/js/graupl.cjs.js +0 -5
  298. package/dist/js/graupl.esm.js +0 -1462
  299. package/dist/js/graupl.iife.js +0 -5
  300. package/docs/.vitepress/config.js +0 -78
  301. package/docs/.vitepress/theme/custom.scss +0 -35
  302. package/docs/.vitepress/theme/index.js +0 -4
  303. package/docs/compiling-graupl.md +0 -56
  304. package/docs/components/alert.md +0 -130
  305. package/docs/components/button.md +0 -84
  306. package/docs/components/card.md +0 -369
  307. package/docs/components/index.md +0 -1
  308. package/docs/components/inputgroup.md +0 -159
  309. package/docs/components/menu.md +0 -326
  310. package/docs/components/navigation.md +0 -158
  311. package/docs/content.md +0 -237
  312. package/docs/defaults.md +0 -121
  313. package/docs/forms.md +0 -79
  314. package/docs/functions.md +0 -9
  315. package/docs/getting-started.md +0 -1
  316. package/docs/index.md +0 -1
  317. package/docs/introduction.md +0 -25
  318. package/docs/layout.md +0 -200
  319. package/docs/mixins.md +0 -47
  320. package/docs/state.md +0 -67
  321. package/docs/theme.md +0 -258
  322. package/docs/utilities.md +0 -357
  323. package/eslint.config.js +0 -74
  324. package/index.html +0 -923
  325. package/index.js +0 -12
  326. package/lint-staged.config.js +0 -6
  327. package/postcss.config.cjs +0 -11
  328. package/prettier.config.js +0 -16
  329. package/scss/utilities/postion.scss +0 -3
  330. package/src/js/accordion/Accordion.js +0 -1163
  331. package/src/js/accordion/AccordionItem.js +0 -496
  332. package/src/js/accordion/index.js +0 -10
  333. package/src/js/alert/Alert.js +0 -581
  334. package/src/js/alert/index.js +0 -11
  335. package/src/js/carousel/Carousel.js +0 -1427
  336. package/src/js/carousel/index.js +0 -10
  337. package/src/js/domHelpers.js +0 -37
  338. package/src/js/eventHandlers.js +0 -39
  339. package/src/js/navigation/index.js +0 -36
  340. package/src/js/storage.js +0 -106
  341. package/src/js/validate.js +0 -225
  342. package/src/scss/_defaults.scss +0 -152
  343. package/src/scss/_index.scss +0 -15
  344. package/src/scss/_init.scss +0 -6
  345. package/src/scss/_normalize.scss +0 -197
  346. package/src/scss/_variables.scss +0 -53
  347. package/src/scss/base/_index.scss +0 -6
  348. package/src/scss/base/button/_defaults.scss +0 -60
  349. package/src/scss/base/button/_index.scss +0 -107
  350. package/src/scss/base/button/_mixins.scss +0 -166
  351. package/src/scss/base/button/_variables.scss +0 -176
  352. package/src/scss/base/form/_defaults.scss +0 -17
  353. package/src/scss/base/form/_index.scss +0 -93
  354. package/src/scss/base/form/_variables.scss +0 -153
  355. package/src/scss/base/link/_defaults.scss +0 -50
  356. package/src/scss/base/link/_index.scss +0 -134
  357. package/src/scss/base/link/_variables.scss +0 -262
  358. package/src/scss/base/table/_defaults.scss +0 -53
  359. package/src/scss/base/table/_index.scss +0 -121
  360. package/src/scss/base/table/_variables.scss +0 -135
  361. package/src/scss/component/_index.scss +0 -10
  362. package/src/scss/component/accordion/_defaults.scss +0 -40
  363. package/src/scss/component/accordion/_index.scss +0 -180
  364. package/src/scss/component/accordion/_variables.scss +0 -316
  365. package/src/scss/component/alert/_defaults.scss +0 -49
  366. package/src/scss/component/alert/_index.scss +0 -118
  367. package/src/scss/component/alert/_variables.scss +0 -170
  368. package/src/scss/component/card/_defaults.scss +0 -32
  369. package/src/scss/component/card/_index.scss +0 -178
  370. package/src/scss/component/card/_variables.scss +0 -186
  371. package/src/scss/component/carousel/_defaults.scss +0 -43
  372. package/src/scss/component/carousel/_index.scss +0 -188
  373. package/src/scss/component/carousel/_variables.scss +0 -104
  374. package/src/scss/component/input-group/_defaults.scss +0 -30
  375. package/src/scss/component/input-group/_index.scss +0 -47
  376. package/src/scss/component/input-group/_variables.scss +0 -66
  377. package/src/scss/component/list/_defaults.scss +0 -15
  378. package/src/scss/component/list/_index.scss +0 -50
  379. package/src/scss/component/list/_variables.scss +0 -176
  380. package/src/scss/component/menu/_defaults.scss +0 -66
  381. package/src/scss/component/menu/_index.scss +0 -305
  382. package/src/scss/component/menu/_variables.scss +0 -500
  383. package/src/scss/component/navigation/_defaults.scss +0 -29
  384. package/src/scss/component/navigation/_index.scss +0 -189
  385. package/src/scss/component/navigation/_variables.scss +0 -237
  386. package/src/scss/functions/_important.scss +0 -13
  387. package/src/scss/functions/_screen.scss +0 -38
  388. package/src/scss/functions/_theme.scss +0 -39
  389. package/src/scss/functions/_utility.scss +0 -28
  390. package/src/scss/layout/_index.scss +0 -5
  391. package/src/scss/layout/columns/_defaults.scss +0 -24
  392. package/src/scss/layout/columns/_index.scss +0 -58
  393. package/src/scss/layout/columns/_variables.scss +0 -51
  394. package/src/scss/layout/container/_defaults.scss +0 -23
  395. package/src/scss/layout/container/_index.scss +0 -43
  396. package/src/scss/layout/container/_variables.scss +0 -50
  397. package/src/scss/layout/flex-columns/_defaults.scss +0 -24
  398. package/src/scss/layout/flex-columns/_index.scss +0 -78
  399. package/src/scss/layout/flex-columns/_variables.scss +0 -26
  400. package/src/scss/mixins/_animation.scss +0 -15
  401. package/src/scss/mixins/_layer.scss +0 -16
  402. package/src/scss/mixins/_screen.scss +0 -77
  403. package/src/scss/mixins/_state.scss +0 -18
  404. package/src/scss/mixins/_theme.scss +0 -15
  405. package/src/scss/mixins/_utility.scss +0 -138
  406. package/src/scss/mixins/_visually-hidden.scss +0 -20
  407. package/src/scss/state/_index.scss +0 -3
  408. package/src/scss/state/focus/_defaults.scss +0 -10
  409. package/src/scss/state/focus/_index.scss +0 -13
  410. package/src/scss/state/focus/_mixins.scss +0 -15
  411. package/src/scss/state/focus/_variables.scss +0 -44
  412. package/src/scss/theme/_index.scss +0 -4
  413. package/src/scss/theme/color/_defaults.scss +0 -143
  414. package/src/scss/theme/color/_index.scss +0 -42
  415. package/src/scss/theme/color/_variables.scss +0 -129
  416. package/src/scss/theme/typography/_defaults.scss +0 -54
  417. package/src/scss/theme/typography/_index.scss +0 -111
  418. package/src/scss/theme/typography/_variables.scss +0 -231
  419. package/src/scss/utilities/_index.scss +0 -20
  420. package/src/scss/utilities/alignment/_defaults.scss +0 -64
  421. package/src/scss/utilities/alignment/_index.scss +0 -168
  422. package/src/scss/utilities/alignment/_variables.scss +0 -6
  423. package/src/scss/utilities/background/_defaults.scss +0 -145
  424. package/src/scss/utilities/background/_index.scss +0 -340
  425. package/src/scss/utilities/background/_variables.scss +0 -6
  426. package/src/scss/utilities/border/_defaults.scss +0 -61
  427. package/src/scss/utilities/border/_index.scss +0 -269
  428. package/src/scss/utilities/border/_variables.scss +0 -6
  429. package/src/scss/utilities/color/_defaults.scss +0 -37
  430. package/src/scss/utilities/color/_index.scss +0 -202
  431. package/src/scss/utilities/color/_variables.scss +0 -6
  432. package/src/scss/utilities/display/_defaults.scss +0 -36
  433. package/src/scss/utilities/display/_index.scss +0 -134
  434. package/src/scss/utilities/display/_variables.scss +0 -6
  435. package/src/scss/utilities/flex/_defaults.scss +0 -87
  436. package/src/scss/utilities/flex/_index.scss +0 -255
  437. package/src/scss/utilities/flex/_variables.scss +0 -6
  438. package/src/scss/utilities/gradient/_defaults.scss +0 -58
  439. package/src/scss/utilities/gradient/_index.scss +0 -380
  440. package/src/scss/utilities/gradient/_variables.scss +0 -29
  441. package/src/scss/utilities/height/_defaults.scss +0 -43
  442. package/src/scss/utilities/height/_index.scss +0 -236
  443. package/src/scss/utilities/height/_variables.scss +0 -6
  444. package/src/scss/utilities/inset/_defaults.scss +0 -43
  445. package/src/scss/utilities/inset/_index.scss +0 -90
  446. package/src/scss/utilities/inset/_variables.scss +0 -6
  447. package/src/scss/utilities/justification/_defaults.scss +0 -61
  448. package/src/scss/utilities/justification/_index.scss +0 -168
  449. package/src/scss/utilities/justification/_variables.scss +0 -6
  450. package/src/scss/utilities/list/_defaults.scss +0 -41
  451. package/src/scss/utilities/list/_index.scss +0 -125
  452. package/src/scss/utilities/list/_variables.scss +0 -6
  453. package/src/scss/utilities/order/_defaults.scss +0 -24
  454. package/src/scss/utilities/order/_index.scss +0 -111
  455. package/src/scss/utilities/order/_variables.scss +0 -6
  456. package/src/scss/utilities/position/_defaults.scss +0 -28
  457. package/src/scss/utilities/position/_index.scss +0 -82
  458. package/src/scss/utilities/position/_variables.scss +0 -6
  459. package/src/scss/utilities/ratio/_defaults.scss +0 -30
  460. package/src/scss/utilities/ratio/_index.scss +0 -91
  461. package/src/scss/utilities/ratio/_variables.scss +0 -9
  462. package/src/scss/utilities/spacing/_defaults.scss +0 -51
  463. package/src/scss/utilities/spacing/_index.scss +0 -382
  464. package/src/scss/utilities/spacing/_variables.scss +0 -6
  465. package/src/scss/utilities/typography/_defaults.scss +0 -46
  466. package/src/scss/utilities/typography/_index.scss +0 -658
  467. package/src/scss/utilities/typography/_variables.scss +0 -6
  468. package/src/scss/utilities/visibility/_defaults.scss +0 -27
  469. package/src/scss/utilities/visibility/_index.scss +0 -82
  470. package/src/scss/utilities/visibility/_variables.scss +0 -6
  471. package/src/scss/utilities/width/_defaults.scss +0 -43
  472. package/src/scss/utilities/width/_index.scss +0 -236
  473. package/src/scss/utilities/width/_variables.scss +0 -6
  474. package/stylelint.config.js +0 -22
  475. package/vite.config.js +0 -57
@@ -1,369 +0,0 @@
1
- # Card
2
-
3
- Defaults
4
-
5
- ```jsx
6
- // Card selectors.
7
- $card-selector: ".card" !default;
8
- $card-image-selector: ".card-image" !default;
9
- $card-content-selector: ".card-content" !default;
10
- $card-body-selector: ".card-body" !default;
11
- $card-header-selector: ".card-header" !default;
12
- $card-footer-selector: ".card-footer" !default;
13
- $card-title-selector: ".card-title" !default;
14
- $horizontal-card-selector: ".horizontal" !default;
15
- $horizontal-card-left-selector: ".left" !default;
16
- $horizontal-card-right-selector: ".right" !default;
17
- $vertical-card-top-selector: ".top" !default;
18
- $vertical-card-bottom-selector: ".bottom" !default;
19
- $inverse-card-selector: ".inverse" !default;
20
-
21
- // Card properties.
22
- $card-transform: none !default;
23
- $card-hover-transform: $card-transform !default;
24
-
25
- // Card layout properties.
26
- $card-content-ratio: 1fr !default;
27
- $card-image-ratio: auto !default;
28
- $horizontal-card-content-ratio: 3fr !default;
29
- $horizontal-card-image-ratio: 2fr !default;
30
- ```
31
-
32
- Variables
33
-
34
- Card Properties
35
-
36
- ```jsx
37
- --#{root-defaults.$prefix}card-padding-x
38
- --#{root-defaults.$prefix}card-padding-y
39
- --#{root-defaults.$prefix}card-padding
40
- --#{root-defaults.$prefix}card-transition
41
- --#{root-defaults.$prefix}card-transition-reduced-motion
42
- ```
43
-
44
- Card transform properties
45
-
46
- ```jsx
47
- --#{root-defaults.$prefix}card-transform
48
- --#{root-defaults.$prefix}card-hover-transform
49
- ```
50
-
51
- Card gap properties
52
-
53
- ```jsx
54
- --#{root-defaults.$prefix}card-column-gap
55
- --#{root-defaults.$prefix}card-row-gap
56
- --#{root-defaults.$prefix}card-gap
57
- ```
58
-
59
- Card color properties
60
-
61
- ```jsx
62
- --#{root-defaults.$prefix}card-background
63
- --#{root-defaults.$prefix}card-color
64
- ```
65
-
66
- Card border-properties
67
-
68
- ```jsx
69
- --#{root-defaults.$prefix}card-border-color
70
- --#{root-defaults.$prefix}card-top-left-border-radius
71
- --#{root-defaults.$prefix}card-top-right-border-radius
72
- --#{root-defaults.$prefix}card-bottom-left-border-radius
73
- --#{root-defaults.$prefix}card-bottom-right-border-radius
74
- --#{root-defaults.$prefix}card-border-radius
75
- --#{root-defaults.$prefix}card-border-style
76
- --#{root-defaults.$prefix}card-border-width
77
- --#{root-defaults.$prefix}card-border
78
- ```
79
-
80
- Card layout properties
81
-
82
- ```jsx
83
- --#{root-defaults.$prefix}card-content-ratio
84
- --#{root-defaults.$prefix}card-image-ratio
85
- --#{root-defaults.$prefix}horizontal-card-content-ratio
86
- --#{root-defaults.$prefix}horizontal-card-image-ratio
87
- ```
88
-
89
- Card Image Properties
90
-
91
- ```jsx
92
- --#{root-defaults.$prefix}card-image-padding-x
93
- --#{root-defaults.$prefix}card-image-padding-y
94
- --#{root-defaults.$prefix}card-image-padding
95
- ```
96
-
97
- Card content properties
98
-
99
- ```jsx
100
- --#{root-defaults.$prefix}card-content-padding-x
101
- --#{root-defaults.$prefix}card-content-padding-y
102
- --#{root-defaults.$prefix}card-content-padding
103
- ```
104
-
105
- Card content gap properties
106
-
107
- ```jsx
108
- --#{root-defaults.$prefix}card-content-column-gap
109
- --#{root-defaults.$prefix}card-content-row-gap
110
- --#{root-defaults.$prefix}card-content-gap
111
- ```
112
-
113
- Card title properties
114
-
115
- ```jsx
116
- --#{root-defaults.$prefix}card-title-color
117
- --#{root-defaults.$prefix}card-title-font-size
118
- --#{root-defaults.$prefix}card-title-font-weight
119
- --#{root-defaults.$prefix}card-title-font-family
120
- --#{root-defaults.$prefix}card-title-line-height
121
- ```
122
-
123
- Markup
124
-
125
- ```jsx
126
- <div class="py-10 full-width container">
127
- <h2>Cards</h2>
128
- <p>Cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.top</span> class will have the image placed on the top while cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.bottom</span> class will have the image placed on the bottom.</p>
129
- <div class="columns">
130
- <div class="card">
131
- <div class="card-image">
132
- <img src="https://unsplash.it/1000/400" alt="Card image">
133
- </div>
134
- <div class="card-content">
135
- <div class="card-header">
136
- <h3 class="card-title">Title</h3>
137
- </div>
138
- <div class="card-body">
139
- <p>This is some text that describes the card.</p>
140
- </div>
141
- <div class="card-footer">
142
- <a class="button primary stretched" href="#">Card Action</a>
143
- </div>
144
- </div>
145
- </div>
146
- <div class="card">
147
- <div class="card-image">
148
- <img src="https://unsplash.it/1000/400" alt="Card image">
149
- </div>
150
- <div class="card-content">
151
- <div class="card-header">
152
- <h3 class="card-title">Title</h3>
153
- </div>
154
- <div class="card-body">
155
- <p>This is some text that describes the card.</p>
156
- </div>
157
- <div class="card-footer">
158
- <a class="button primary stretched" href="#">Card Action</a>
159
- </div>
160
- </div>
161
- </div>
162
- <div class="card">
163
- <div class="card-image">
164
- <img src="https://unsplash.it/1000/400" alt="Card image">
165
- </div>
166
- <div class="card-content">
167
- <div class="card-header">
168
- <h3 class="card-title">Title</h3>
169
- </div>
170
- <div class="card-body">
171
- <p>This is some text that describes the card.</p>
172
- </div>
173
- <div class="card-footer">
174
- <a class="button primary stretched" href="#">Card Action</a>
175
- </div>
176
- </div>
177
- </div>
178
- <div class="card bottom">
179
- <div class="card-image">
180
- <img src="https://unsplash.it/1000/400" alt="Card image">
181
- </div>
182
- <div class="card-content">
183
- <div class="card-header">
184
- <h3 class="card-title">Title</h3>
185
- </div>
186
- <div class="card-body">
187
- <p>This is some text that describes the card.</p>
188
- </div>
189
- <div class="card-footer">
190
- <a class="button primary stretched" href="#">Card Action</a>
191
- </div>
192
- </div>
193
- </div>
194
- <div class="card bottom">
195
- <div class="card-image">
196
- <img src="https://unsplash.it/1000/400" alt="Card image">
197
- </div>
198
- <div class="card-content">
199
- <div class="card-header">
200
- <h3 class="card-title">Title</h3>
201
- </div>
202
- <div class="card-body">
203
- <p>This is some text that describes the card.</p>
204
- </div>
205
- <div class="card-footer">
206
- <a class="button primary stretched" href="#">Card Action</a>
207
- </div>
208
- </div>
209
- </div>
210
- <div class="card bottom">
211
- <div class="card-image">
212
- <img src="https://unsplash.it/1000/400" alt="Card image">
213
- </div>
214
- <div class="card-content">
215
- <div class="card-header">
216
- <h3 class="card-title">Title</h3>
217
- </div>
218
- <div class="card-body">
219
- <p>This is some text that describes the card.</p>
220
- </div>
221
- <div class="card-footer">
222
- <a class="button primary stretched" href="#">Card Action</a>
223
- </div>
224
- </div>
225
- </div>
226
- </div>
227
- </div>
228
- <div class="py-10 full-width container">
229
- <h2>Horizontal Cards</h2>
230
- <p>Cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.right</span> class will have the image placed on the right while cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.left</span> class will have the image placed on the left.</p>
231
- <div class="columns count-2">
232
- <div class="card horizontal">
233
- <div class="card-image">
234
- <img src="https://unsplash.it/1000/400" alt="Card image">
235
- </div>
236
- <div class="card-content">
237
- <div class="card-header">
238
- <h3 class="card-title">Title</h3>
239
- </div>
240
- <div class="card-body">
241
- <p>This is some text that describes the card.</p>
242
- </div>
243
- <div class="card-footer">
244
- <a class="button primary stretched" href="#">Card Action</a>
245
- </div>
246
- </div>
247
- </div>
248
- <div class="card horizontal right">
249
- <div class="card-image">
250
- <img src="https://unsplash.it/1000/400" alt="Card image">
251
- </div>
252
- <div class="card-content">
253
- <div class="card-header">
254
- <h3 class="card-title">Title</h3>
255
- </div>
256
- <div class="card-body">
257
- <p>This is some text that describes the card.</p>
258
- </div>
259
- <div class="card-footer">
260
- <a class="button primary stretched" href="#">Card Action</a>
261
- </div>
262
- </div>
263
- </div>
264
- <div class="card horizontal">
265
- <div class="card-image">
266
- <img src="https://unsplash.it/1000/400" alt="Card image">
267
- </div>
268
- <div class="card-content">
269
- <div class="card-header">
270
- <h3 class="card-title">Title</h3>
271
- </div>
272
- <div class="card-body">
273
- <p>This is some text that describes the card.</p>
274
- </div>
275
- <div class="card-footer">
276
- <a class="button primary stretched" href="#">Card Action</a>
277
- </div>
278
- </div>
279
- </div>
280
- <div class="card horizontal right">
281
- <div class="card-image">
282
- <img src="https://unsplash.it/1000/400" alt="Card image">
283
- </div>
284
- <div class="card-content">
285
- <div class="card-header">
286
- <h3 class="card-title">Title</h3>
287
- </div>
288
- <div class="card-body">
289
- <p>This is some text that describes the card.</p>
290
- </div>
291
- <div class="card-footer">
292
- <a class="button primary stretched" href="#">Card Action</a>
293
- </div>
294
- </div>
295
- </div>
296
- <div class="card horizontal">
297
- <div class="card-image">
298
- <img src="https://unsplash.it/1000/400" alt="Card image">
299
- </div>
300
- <div class="card-content">
301
- <div class="card-header">
302
- <h3 class="card-title">Title</h3>
303
- </div>
304
- <div class="card-body">
305
- <p>This is some text that describes the card.</p>
306
- </div>
307
- <div class="card-footer">
308
- <a class="button primary stretched" href="#">Card Action</a>
309
- </div>
310
- </div>
311
- </div>
312
- <div class="card horizontal right">
313
- <div class="card-image">
314
- <img src="https://unsplash.it/1000/400" alt="Card image">
315
- </div>
316
- <div class="card-content">
317
- <div class="card-header">
318
- <h3 class="card-title">Title</h3>
319
- </div>
320
- <div class="card-body">
321
- <p>This is some text that describes the card.</p>
322
- </div>
323
- <div class="card-footer">
324
- <a class="button primary stretched" href="#">Card Action</a>
325
- </div>
326
- </div>
327
- </div>
328
- </div>
329
- </div>
330
- <div class="py-10 full-width container">
331
- <h2>Inverse Cards</h2>
332
- <p>Cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.inverse</span> class will have the image placed on the right if it is a horizontal card and on the bottom if it is a vertical card.</p>
333
- <p>This is mainly to provide a shortcut for horiztonal cards that you'd like to use the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.bottom .right</span> classes on when the card is forced to be vertical.</p>
334
- <div class="columns count-2">
335
- <div class="card horizontal inverse">
336
- <div class="card-image">
337
- <img src="https://unsplash.it/1000/400" alt="Card image">
338
- </div>
339
- <div class="card-content">
340
- <div class="card-header">
341
- <h3 class="card-title">Title</h3>
342
- </div>
343
- <div class="card-body">
344
- <p>This is some text that describes the card.</p>
345
- </div>
346
- <div class="card-footer">
347
- <a class="button primary stretched" href="#">Card Action</a>
348
- </div>
349
- </div>
350
- </div>
351
- <div class="card horizontal inverse">
352
- <div class="card-image">
353
- <img src="https://unsplash.it/1000/400" alt="Card image">
354
- </div>
355
- <div class="card-content">
356
- <div class="card-header">
357
- <h3 class="card-title">Title</h3>
358
- </div>
359
- <div class="card-body">
360
- <p>This is some text that describes the card.</p>
361
- </div>
362
- <div class="card-footer">
363
- <a class="button primary stretched" href="#">Card Action</a>
364
- </div>
365
- </div>
366
- </div>
367
- </div>
368
- </div>
369
- ```
@@ -1 +0,0 @@
1
- # Components
@@ -1,159 +0,0 @@
1
- # Input Group
2
-
3
- Defaults
4
-
5
- ```jsx
6
- // Input group selectors.
7
- $input-group-selector: ".input-group" !default;
8
- $input-group-inline-selector: ".inline" !default;
9
- $input-group-help-text-selector: ".help-text" !default;
10
-
11
- // Grid names.
12
- $input-group-grid-label-name: label !default;
13
- $input-group-grid-input-name: input !default;
14
- $input-group-grid-help-name: help !default;
15
-
16
- // Input group properties.
17
- $input-group-grid-template-columns: 100% !default;
18
- $input-group-grid-template-rows: auto auto auto !default;
19
-
20
- // Inline input group properties.
21
- $input-group-inline-grid-template-columns: auto 1fr !default;
22
- $input-group-inline-grid-template-rows: auto auto !default;
23
-
24
- // Inner element properties.
25
- $input-group-label-grid-area: $input-group-grid-label-name !default;
26
- $input-group-input-grid-area: $input-group-grid-input-name !default;
27
- $input-group-help-grid-area: $input-group-grid-help-name !default;
28
- ```
29
-
30
- Variables
31
-
32
- Input group properties
33
-
34
- ```jsx
35
- --#{root-defaults.$prefix}input-group-grid-template-areas
36
- --#{root-defaults.$prefix}input-group-grid-template-columns
37
- --#{root-defaults.$prefix}input-group-grid-template-rows
38
- --#{root-defaults.$prefix}input-group-row-gap
39
- --#{root-defaults.$prefix}input-group-column-gap
40
- --#{root-defaults.$prefix}input-group-gap
41
- ```
42
-
43
- Inline input group properties
44
-
45
- ```jsx
46
- --#{root-defaults.$prefix}input-group-inline-grid-template-areas
47
- --#{root-defaults.$prefix}input-group-inline-grid-template-columns
48
- --#{root-defaults.$prefix}input-group-inline-grid-template-rows
49
- ```
50
-
51
- Inner element properties
52
-
53
- ```jsx
54
- --#{root-defaults.$prefix}input-group-label-grid-area
55
- --#{root-defaults.$prefix}input-group-input-grid-area
56
- --#{root-defaults.$prefix}input-group-help-grid-area
57
- ```
58
-
59
- Markup
60
-
61
- ```jsx
62
- <div class="py-10 full-width container">
63
- <h2>Form elements</h2>
64
- <p>Graupl provides default styling for all form elements.</p>
65
- <form class="full-width rg-4">
66
- <div class="input-group">
67
- <label for="input">Input</label>
68
- <input type="text" placeholder="Input" id="input">
69
- <small class="help-text">This is some help text to assist with knowing what the field is about.</small>
70
- </div>
71
- <div class="input-group inline"><label for="input-readonly">Readonly Input</label>
72
- <input type="text" placeholder="Readonly Input" id="input-readonly" value="Readonly Input" readonly>
73
- <small class="help-text">This is some help text to assist with knowing what the field is about.</small>
74
- </div>
75
- <div class="input-group"><label for="input-disabled">Disabled Input</label>
76
- <input type="text" placeholder="Disabled Input" id="input-disabled" disabled>
77
- <small class="help-text">This is some help text to assist with knowing what the field is about.</small>
78
- </div>
79
- <div class="input-group inline"><label for="textarea">Textarea</label>
80
- <textarea class="textarea" placeholder="Textarea" id="textarea"></textarea>
81
- </div>
82
- <div class="input-group"><label for="textarea-readonly">Readonly Textarea</label>
83
- <textarea class="textarea" placeholder="Readonly Textarea" id="textarea-readonly"
84
- readonly>Readonly Textarea</textarea>
85
- </div>
86
- <div class="input-group"><label for="textarea-disabled">Disabled Textarea</label>
87
- <textarea class="textarea" placeholder="Disabled Textarea" id="textarea-disabled" disabled></textarea>
88
- </div>
89
- <div class="input-group inline"><label for="select">Select</label>
90
- <select id="select">
91
- <option value="1">Option 1</option>
92
- <option value="2">Option 2</option>
93
- <optgroup label="Group 1">
94
- <option value="3">Option 3</option>
95
- <option value="4">Option 4</option>
96
- <option value="5">Option 5</option>
97
- </optgroup>
98
- </select>
99
- </div>
100
- <div class="input-group"><label for="select-disabled">Disabled Select</label>
101
- <select id="select-disabled" disabled>
102
- <option value="1">Option 1</option>
103
- <option value="2">Option 2</option>
104
- <optgroup label="Group 1">
105
- <option value="3">Option 3</option>
106
- <option value="4">Option 4</option>
107
- <option value="5">Option 5</option>
108
- </optgroup>
109
- </select>
110
- </div>
111
- <div class="input-group"><label for"multi-select">Multi-select</label>
112
- <select id="multi-select" multiple>
113
- <option value="1">Option 1</option>
114
- <option value="2">Option 2</option>
115
- <optgroup label="Group 1">
116
- <option value="3">Option 3</option>
117
- <option value="4">Option 4</option>
118
- <option value="5">Option 5</option>
119
- </optgroup>
120
- </select>
121
- </div>
122
- <div class="input-group inline"><label for="multi-select-disabled">Disabled Multi-select</label>
123
- <select id="multi-select-disabled" multiple disabled>
124
- <option value="1">Option 1</option>
125
- <option value="2">Option 2</option>
126
- <optgroup label="Group 1">
127
- <option value="3">Option 3</option>
128
- <option value="4">Option 4</option>
129
- <option value="5">Option 5</option>
130
- </optgroup>
131
- </select>
132
- </div>
133
- <fieldset>
134
- <legend>Checkboxes</legend>
135
- <label for="checkbox">
136
- <input type="checkbox" id="checkbox"> Checkbox</label>
137
- <label for="checkbox-checked">
138
- <input type="checkbox" id="checkbox-checked" checked> Checked Checkbox</label>
139
- <label for="checkbox-disabled">
140
- <input type="checkbox" id="checkbox-disabled" disabled> Disabled Checkbox</label>
141
- </fieldset>
142
- <fieldset>
143
- <legend>Radio Buttons</legend>
144
- <label for="radio"><input type="radio" id="radio" name="radio"> Radio</label>
145
- <label for="radio-checked"><input type="radio" id="radio-checked" name="radio" checked> Checked Radio</label>
146
- <label for="radio-disabled"><input type="radio" id="radio-disabled" name="radio" disabled> Disabled
147
- Radio</label>
148
- </fieldset>
149
- <fieldset disabled>
150
- <legend>Disabled Fieldset</legend>
151
- <label for="disabled-fieldset-checkbox">
152
- <input type="checkbox" id="disabled-fieldset-checkbox"> Checkbox</label>
153
- </fieldset>
154
- <div class="input-group"><label for="range">Range</label>
155
- <input type="range" class="range" id="range">
156
- </div>
157
- </form>
158
- </div>
159
- ```