@graupl/graupl 1.0.0-beta.10 → 1.0.0-beta.12

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 (480) hide show
  1. package/dist/js/accordion.js +5 -0
  2. package/dist/js/accordion.js.map +1 -0
  3. package/dist/js/alert.js +5 -0
  4. package/dist/js/alert.js.map +1 -0
  5. package/dist/js/carousel.js +5 -0
  6. package/dist/js/carousel.js.map +1 -0
  7. package/dist/js/component/accordion.cjs.js +5 -0
  8. package/dist/js/component/accordion.cjs.js.map +1 -0
  9. package/dist/js/component/accordion.es.js +5 -0
  10. package/dist/js/component/accordion.es.js.map +1 -0
  11. package/dist/js/component/accordion.iife.js +5 -0
  12. package/dist/js/component/accordion.iife.js.map +1 -0
  13. package/dist/js/component/alert.cjs.js +5 -0
  14. package/dist/js/component/alert.cjs.js.map +1 -0
  15. package/dist/js/component/alert.es.js +5 -0
  16. package/dist/js/component/alert.es.js.map +1 -0
  17. package/dist/js/component/alert.iife.js +5 -0
  18. package/dist/js/component/alert.iife.js.map +1 -0
  19. package/dist/js/component/carousel.cjs.js +5 -0
  20. package/dist/js/component/carousel.cjs.js.map +1 -0
  21. package/dist/js/component/carousel.es.js +5 -0
  22. package/dist/js/component/carousel.es.js.map +1 -0
  23. package/dist/js/component/carousel.iife.js +5 -0
  24. package/dist/js/component/carousel.iife.js.map +1 -0
  25. package/dist/js/generator/accordion.cjs.js +5 -0
  26. package/dist/js/generator/accordion.cjs.js.map +1 -0
  27. package/dist/js/generator/accordion.es.js +5 -0
  28. package/dist/js/generator/accordion.es.js.map +1 -0
  29. package/dist/js/generator/accordion.iife.js +5 -0
  30. package/dist/js/generator/accordion.iife.js.map +1 -0
  31. package/dist/js/generator/alert.cjs.js +5 -0
  32. package/dist/js/generator/alert.cjs.js.map +1 -0
  33. package/dist/js/generator/alert.es.js +5 -0
  34. package/dist/js/generator/alert.es.js.map +1 -0
  35. package/dist/js/generator/alert.iife.js +5 -0
  36. package/dist/js/generator/alert.iife.js.map +1 -0
  37. package/dist/js/generator/carousel.cjs.js +5 -0
  38. package/dist/js/generator/carousel.cjs.js.map +1 -0
  39. package/dist/js/generator/carousel.es.js +5 -0
  40. package/dist/js/generator/carousel.es.js.map +1 -0
  41. package/dist/js/generator/carousel.iife.js +5 -0
  42. package/dist/js/generator/carousel.iife.js.map +1 -0
  43. package/dist/js/generator/navigation.cjs.js +3 -0
  44. package/dist/js/generator/navigation.cjs.js.map +1 -0
  45. package/dist/js/generator/navigation.es.js +3 -0
  46. package/dist/js/generator/navigation.es.js.map +1 -0
  47. package/dist/js/generator/navigation.iife.js +3 -0
  48. package/dist/js/generator/navigation.iife.js.map +1 -0
  49. package/dist/js/graupl.js +9 -0
  50. package/dist/js/graupl.js.map +1 -0
  51. package/dist/js/navigation.js +3 -0
  52. package/dist/js/navigation.js.map +1 -0
  53. package/package.json +24 -14
  54. package/.browserslistrc +0 -3
  55. package/.czrc +0 -3
  56. package/.devcontainer/devcontainer.json +0 -221
  57. package/.editorconfig +0 -13
  58. package/.env +0 -3
  59. package/.github/CODE_OF_CONDUCT.md +0 -73
  60. package/.github/COMMIT_CONVENTION.md +0 -17
  61. package/.github/CONTRIBUTING.md +0 -86
  62. package/.github/ISSUE_TEMPLATE/bug_report.md +0 -30
  63. package/.github/ISSUE_TEMPLATE/documentation.md +0 -20
  64. package/.github/ISSUE_TEMPLATE/feature_request.md +0 -20
  65. package/.github/SECURITY.md +0 -26
  66. package/.github/dependabot.yml +0 -17
  67. package/.github/pull_request_template.md +0 -5
  68. package/.github/workflows/codeql-analysis.yml +0 -71
  69. package/.github/workflows/docs.yml +0 -66
  70. package/.github/workflows/prerelease.yml +0 -125
  71. package/.github/workflows/release.yml +0 -111
  72. package/.github/workflows/test.yml +0 -78
  73. package/.husky/commit-msg +0 -3
  74. package/.husky/pre-commit +0 -4
  75. package/.prettierignore +0 -12
  76. package/.stylelintignore +0 -9
  77. package/.versionrc.cjs +0 -73
  78. package/.vscode/settings.json +0 -10
  79. package/CHANGELOG.md +0 -559
  80. package/build.js +0 -9
  81. package/combine-at-rules.cjs +0 -61
  82. package/commitlint.config.js +0 -5
  83. package/container/.env +0 -26
  84. package/container/build/app.dockerfile +0 -41
  85. package/container/docker-compose.yml +0 -27
  86. package/dist/js/graupl.cjs.js +0 -7
  87. package/dist/js/graupl.esm.js +0 -2561
  88. package/dist/js/graupl.iife.js +0 -7
  89. package/docs/.vitepress/config.js +0 -108
  90. package/docs/.vitepress/theme/custom.scss +0 -35
  91. package/docs/.vitepress/theme/index.js +0 -4
  92. package/docs/compiling-graupl.md +0 -57
  93. package/docs/components/alert.md +0 -130
  94. package/docs/components/button.md +0 -84
  95. package/docs/components/card.md +0 -369
  96. package/docs/components/index.md +0 -1
  97. package/docs/components/inputgroup.md +0 -159
  98. package/docs/components/menu.md +0 -326
  99. package/docs/components/navigation.md +0 -158
  100. package/docs/content.md +0 -237
  101. package/docs/defaults.md +0 -121
  102. package/docs/forms.md +0 -79
  103. package/docs/functions.md +0 -9
  104. package/docs/getting-started.md +0 -1
  105. package/docs/index.md +0 -1
  106. package/docs/introduction.md +0 -25
  107. package/docs/layout.md +0 -200
  108. package/docs/mixins.md +0 -47
  109. package/docs/state.md +0 -67
  110. package/docs/theme.md +0 -258
  111. package/docs/utilities/alignment.md +0 -411
  112. package/docs/utilities/background.md +0 -192
  113. package/docs/utilities/border.md +0 -268
  114. package/docs/utilities/color.md +0 -348
  115. package/docs/utilities/container.md +0 -3
  116. package/docs/utilities/display.md +0 -3
  117. package/docs/utilities/flex.md +0 -3
  118. package/docs/utilities/gradient.md +0 -3
  119. package/docs/utilities/height.md +0 -3
  120. package/docs/utilities/inset.md +0 -3
  121. package/docs/utilities/justification.md +0 -3
  122. package/docs/utilities/list.md +0 -3
  123. package/docs/utilities/order.md +0 -3
  124. package/docs/utilities/position.md +0 -3
  125. package/docs/utilities/ratio.md +0 -3
  126. package/docs/utilities/responsive-classes.md +0 -3
  127. package/docs/utilities/spacing.md +0 -3
  128. package/docs/utilities/typography.md +0 -3
  129. package/docs/utilities/visibility.md +0 -3
  130. package/docs/utilities/visually-hidden.md +0 -3
  131. package/docs/utilities/width.md +0 -3
  132. package/docs/utilities/z-index.md +0 -3
  133. package/docs/utilities.md +0 -357
  134. package/eslint.config.js +0 -74
  135. package/favicon.ico +0 -0
  136. package/index.html +0 -1214
  137. package/index.js +0 -12
  138. package/lint-staged.config.js +0 -6
  139. package/logo.svg +0 -296
  140. package/packages/core/build.js +0 -9
  141. package/packages/core/dist/css/base/button.css +0 -2
  142. package/packages/core/dist/css/base/button.css.map +0 -1
  143. package/packages/core/dist/css/base/form.css +0 -2
  144. package/packages/core/dist/css/base/form.css.map +0 -1
  145. package/packages/core/dist/css/base/link.css +0 -2
  146. package/packages/core/dist/css/base/link.css.map +0 -1
  147. package/packages/core/dist/css/base/table.css +0 -2
  148. package/packages/core/dist/css/base/table.css.map +0 -1
  149. package/packages/core/dist/css/base.css +0 -2
  150. package/packages/core/dist/css/base.css.map +0 -1
  151. package/packages/core/dist/css/component/accordion.css +0 -5
  152. package/packages/core/dist/css/component/accordion.css.map +0 -1
  153. package/packages/core/dist/css/component/alert.css +0 -2
  154. package/packages/core/dist/css/component/alert.css.map +0 -1
  155. package/packages/core/dist/css/component/card.css +0 -2
  156. package/packages/core/dist/css/component/card.css.map +0 -1
  157. package/packages/core/dist/css/component/carousel.css +0 -2
  158. package/packages/core/dist/css/component/carousel.css.map +0 -1
  159. package/packages/core/dist/css/component/input-group.css +0 -2
  160. package/packages/core/dist/css/component/input-group.css.map +0 -1
  161. package/packages/core/dist/css/component/list.css +0 -2
  162. package/packages/core/dist/css/component/list.css.map +0 -1
  163. package/packages/core/dist/css/component/menu.css +0 -2
  164. package/packages/core/dist/css/component/menu.css.map +0 -1
  165. package/packages/core/dist/css/component/navigation.css +0 -2
  166. package/packages/core/dist/css/component/navigation.css.map +0 -1
  167. package/packages/core/dist/css/component.css +0 -5
  168. package/packages/core/dist/css/component.css.map +0 -1
  169. package/packages/core/dist/css/graupl.css +0 -5
  170. package/packages/core/dist/css/graupl.css.map +0 -1
  171. package/packages/core/dist/css/init.css +0 -2
  172. package/packages/core/dist/css/init.css.map +0 -1
  173. package/packages/core/dist/css/layout/columns.css +0 -2
  174. package/packages/core/dist/css/layout/columns.css.map +0 -1
  175. package/packages/core/dist/css/layout/container.css +0 -2
  176. package/packages/core/dist/css/layout/container.css.map +0 -1
  177. package/packages/core/dist/css/layout/flex-columns.css +0 -2
  178. package/packages/core/dist/css/layout/flex-columns.css.map +0 -1
  179. package/packages/core/dist/css/layout.css +0 -5
  180. package/packages/core/dist/css/layout.css.map +0 -1
  181. package/packages/core/dist/css/normalize.css +0 -2
  182. package/packages/core/dist/css/normalize.css.map +0 -1
  183. package/packages/core/dist/css/state/focus.css +0 -2
  184. package/packages/core/dist/css/state/focus.css.map +0 -1
  185. package/packages/core/dist/css/state.css +0 -2
  186. package/packages/core/dist/css/state.css.map +0 -1
  187. package/packages/core/dist/css/theme/color.css +0 -2
  188. package/packages/core/dist/css/theme/color.css.map +0 -1
  189. package/packages/core/dist/css/theme/typography.css +0 -2
  190. package/packages/core/dist/css/theme/typography.css.map +0 -1
  191. package/packages/core/dist/css/theme.css +0 -2
  192. package/packages/core/dist/css/theme.css.map +0 -1
  193. package/packages/core/dist/css/utilities/alignment.css +0 -2
  194. package/packages/core/dist/css/utilities/alignment.css.map +0 -1
  195. package/packages/core/dist/css/utilities/background.css +0 -2
  196. package/packages/core/dist/css/utilities/background.css.map +0 -1
  197. package/packages/core/dist/css/utilities/border.css +0 -2
  198. package/packages/core/dist/css/utilities/border.css.map +0 -1
  199. package/packages/core/dist/css/utilities/color.css +0 -2
  200. package/packages/core/dist/css/utilities/color.css.map +0 -1
  201. package/packages/core/dist/css/utilities/container.css +0 -2
  202. package/packages/core/dist/css/utilities/container.css.map +0 -1
  203. package/packages/core/dist/css/utilities/display.css +0 -2
  204. package/packages/core/dist/css/utilities/display.css.map +0 -1
  205. package/packages/core/dist/css/utilities/flex.css +0 -2
  206. package/packages/core/dist/css/utilities/flex.css.map +0 -1
  207. package/packages/core/dist/css/utilities/gradient.css +0 -2
  208. package/packages/core/dist/css/utilities/gradient.css.map +0 -1
  209. package/packages/core/dist/css/utilities/height.css +0 -2
  210. package/packages/core/dist/css/utilities/height.css.map +0 -1
  211. package/packages/core/dist/css/utilities/inset.css +0 -2
  212. package/packages/core/dist/css/utilities/inset.css.map +0 -1
  213. package/packages/core/dist/css/utilities/justification.css +0 -2
  214. package/packages/core/dist/css/utilities/justification.css.map +0 -1
  215. package/packages/core/dist/css/utilities/list.css +0 -2
  216. package/packages/core/dist/css/utilities/list.css.map +0 -1
  217. package/packages/core/dist/css/utilities/order.css +0 -2
  218. package/packages/core/dist/css/utilities/order.css.map +0 -1
  219. package/packages/core/dist/css/utilities/position.css +0 -2
  220. package/packages/core/dist/css/utilities/position.css.map +0 -1
  221. package/packages/core/dist/css/utilities/ratio.css +0 -2
  222. package/packages/core/dist/css/utilities/ratio.css.map +0 -1
  223. package/packages/core/dist/css/utilities/spacing.css +0 -2
  224. package/packages/core/dist/css/utilities/spacing.css.map +0 -1
  225. package/packages/core/dist/css/utilities/typography.css +0 -2
  226. package/packages/core/dist/css/utilities/typography.css.map +0 -1
  227. package/packages/core/dist/css/utilities/visibility.css +0 -2
  228. package/packages/core/dist/css/utilities/visibility.css.map +0 -1
  229. package/packages/core/dist/css/utilities/visually-hidden.css +0 -2
  230. package/packages/core/dist/css/utilities/visually-hidden.css.map +0 -1
  231. package/packages/core/dist/css/utilities/width.css +0 -2
  232. package/packages/core/dist/css/utilities/width.css.map +0 -1
  233. package/packages/core/dist/css/utilities/z-index.css +0 -2
  234. package/packages/core/dist/css/utilities/z-index.css.map +0 -1
  235. package/packages/core/dist/css/utilities.css +0 -2
  236. package/packages/core/dist/css/utilities.css.map +0 -1
  237. package/packages/core/package.json +0 -58
  238. package/packages/core/scss/base/button.scss +0 -3
  239. package/packages/core/scss/base/form.scss +0 -3
  240. package/packages/core/scss/base/link.scss +0 -3
  241. package/packages/core/scss/base/table.scss +0 -3
  242. package/packages/core/scss/base.scss +0 -3
  243. package/packages/core/scss/component/accordion.scss +0 -3
  244. package/packages/core/scss/component/alert.scss +0 -3
  245. package/packages/core/scss/component/card.scss +0 -3
  246. package/packages/core/scss/component/carousel.scss +0 -3
  247. package/packages/core/scss/component/input-group.scss +0 -3
  248. package/packages/core/scss/component/list.scss +0 -3
  249. package/packages/core/scss/component/menu.scss +0 -3
  250. package/packages/core/scss/component/navigation.scss +0 -3
  251. package/packages/core/scss/component.scss +0 -3
  252. package/packages/core/scss/graupl.scss +0 -3
  253. package/packages/core/scss/init.scss +0 -3
  254. package/packages/core/scss/layout/columns.scss +0 -3
  255. package/packages/core/scss/layout/container.scss +0 -3
  256. package/packages/core/scss/layout/flex-columns.scss +0 -3
  257. package/packages/core/scss/layout.scss +0 -3
  258. package/packages/core/scss/normalize.scss +0 -3
  259. package/packages/core/scss/state/focus.scss +0 -3
  260. package/packages/core/scss/state.scss +0 -3
  261. package/packages/core/scss/theme/color.scss +0 -3
  262. package/packages/core/scss/theme/typography.scss +0 -3
  263. package/packages/core/scss/theme.scss +0 -3
  264. package/packages/core/scss/utilities/alignment.scss +0 -3
  265. package/packages/core/scss/utilities/background.scss +0 -3
  266. package/packages/core/scss/utilities/border.scss +0 -3
  267. package/packages/core/scss/utilities/color.scss +0 -3
  268. package/packages/core/scss/utilities/container.scss +0 -3
  269. package/packages/core/scss/utilities/display.scss +0 -3
  270. package/packages/core/scss/utilities/flex.scss +0 -3
  271. package/packages/core/scss/utilities/gradient.scss +0 -3
  272. package/packages/core/scss/utilities/height.scss +0 -3
  273. package/packages/core/scss/utilities/inset.scss +0 -3
  274. package/packages/core/scss/utilities/justification.scss +0 -3
  275. package/packages/core/scss/utilities/list.scss +0 -3
  276. package/packages/core/scss/utilities/order.scss +0 -3
  277. package/packages/core/scss/utilities/position.scss +0 -3
  278. package/packages/core/scss/utilities/ratio.scss +0 -3
  279. package/packages/core/scss/utilities/spacing.scss +0 -3
  280. package/packages/core/scss/utilities/typography.scss +0 -3
  281. package/packages/core/scss/utilities/visibility.scss +0 -3
  282. package/packages/core/scss/utilities/visually-hidden.scss +0 -3
  283. package/packages/core/scss/utilities/width.scss +0 -3
  284. package/packages/core/scss/utilities/z-index.scss +0 -3
  285. package/packages/core/scss/utilities.scss +0 -3
  286. package/packages/core/src/js/accordion/Accordion.js +0 -1163
  287. package/packages/core/src/js/accordion/AccordionItem.js +0 -496
  288. package/packages/core/src/js/accordion/index.js +0 -10
  289. package/packages/core/src/js/alert/Alert.js +0 -581
  290. package/packages/core/src/js/alert/index.js +0 -11
  291. package/packages/core/src/js/carousel/Carousel.js +0 -1427
  292. package/packages/core/src/js/carousel/index.js +0 -10
  293. package/packages/core/src/js/domHelpers.js +0 -37
  294. package/packages/core/src/js/eventHandlers.js +0 -39
  295. package/packages/core/src/js/navigation/index.js +0 -36
  296. package/packages/core/src/js/storage.js +0 -106
  297. package/packages/core/src/js/validate.js +0 -225
  298. package/packages/core/src/scss/_defaults.scss +0 -184
  299. package/packages/core/src/scss/_index.scss +0 -15
  300. package/packages/core/src/scss/_init.scss +0 -6
  301. package/packages/core/src/scss/_normalize.scss +0 -197
  302. package/packages/core/src/scss/_variables.scss +0 -95
  303. package/packages/core/src/scss/base/_index.scss +0 -6
  304. package/packages/core/src/scss/base/button/_defaults.scss +0 -49
  305. package/packages/core/src/scss/base/button/_index.scss +0 -206
  306. package/packages/core/src/scss/base/button/_mixins.scss +0 -104
  307. package/packages/core/src/scss/base/button/_variables.scss +0 -252
  308. package/packages/core/src/scss/base/form/_defaults.scss +0 -24
  309. package/packages/core/src/scss/base/form/_index.scss +0 -227
  310. package/packages/core/src/scss/base/form/_variables.scss +0 -245
  311. package/packages/core/src/scss/base/link/_defaults.scss +0 -35
  312. package/packages/core/src/scss/base/link/_index.scss +0 -245
  313. package/packages/core/src/scss/base/link/_variables.scss +0 -370
  314. package/packages/core/src/scss/base/table/_defaults.scss +0 -68
  315. package/packages/core/src/scss/base/table/_index.scss +0 -314
  316. package/packages/core/src/scss/base/table/_variables.scss +0 -309
  317. package/packages/core/src/scss/component/_index.scss +0 -10
  318. package/packages/core/src/scss/component/accordion/_defaults.scss +0 -40
  319. package/packages/core/src/scss/component/accordion/_index.scss +0 -198
  320. package/packages/core/src/scss/component/accordion/_variables.scss +0 -356
  321. package/packages/core/src/scss/component/alert/_defaults.scss +0 -49
  322. package/packages/core/src/scss/component/alert/_index.scss +0 -119
  323. package/packages/core/src/scss/component/alert/_variables.scss +0 -200
  324. package/packages/core/src/scss/component/card/_defaults.scss +0 -32
  325. package/packages/core/src/scss/component/card/_index.scss +0 -212
  326. package/packages/core/src/scss/component/card/_variables.scss +0 -216
  327. package/packages/core/src/scss/component/carousel/_defaults.scss +0 -43
  328. package/packages/core/src/scss/component/carousel/_index.scss +0 -192
  329. package/packages/core/src/scss/component/carousel/_variables.scss +0 -104
  330. package/packages/core/src/scss/component/input-group/_defaults.scss +0 -30
  331. package/packages/core/src/scss/component/input-group/_index.scss +0 -47
  332. package/packages/core/src/scss/component/input-group/_variables.scss +0 -66
  333. package/packages/core/src/scss/component/list/_defaults.scss +0 -15
  334. package/packages/core/src/scss/component/list/_index.scss +0 -52
  335. package/packages/core/src/scss/component/list/_variables.scss +0 -236
  336. package/packages/core/src/scss/component/menu/_defaults.scss +0 -57
  337. package/packages/core/src/scss/component/menu/_index.scss +0 -308
  338. package/packages/core/src/scss/component/menu/_variables.scss +0 -642
  339. package/packages/core/src/scss/component/navigation/_defaults.scss +0 -23
  340. package/packages/core/src/scss/component/navigation/_index.scss +0 -190
  341. package/packages/core/src/scss/component/navigation/_variables.scss +0 -290
  342. package/packages/core/src/scss/functions/_container.scss +0 -38
  343. package/packages/core/src/scss/functions/_important.scss +0 -36
  344. package/packages/core/src/scss/functions/_screen.scss +0 -38
  345. package/packages/core/src/scss/functions/_theme.scss +0 -39
  346. package/packages/core/src/scss/functions/_utility.scss +0 -28
  347. package/packages/core/src/scss/layout/_index.scss +0 -5
  348. package/packages/core/src/scss/layout/columns/_defaults.scss +0 -24
  349. package/packages/core/src/scss/layout/columns/_index.scss +0 -137
  350. package/packages/core/src/scss/layout/columns/_variables.scss +0 -55
  351. package/packages/core/src/scss/layout/container/_defaults.scss +0 -35
  352. package/packages/core/src/scss/layout/container/_index.scss +0 -628
  353. package/packages/core/src/scss/layout/container/_variables.scss +0 -114
  354. package/packages/core/src/scss/layout/flex-columns/_defaults.scss +0 -28
  355. package/packages/core/src/scss/layout/flex-columns/_index.scss +0 -184
  356. package/packages/core/src/scss/layout/flex-columns/_variables.scss +0 -30
  357. package/packages/core/src/scss/mixins/_animation.scss +0 -15
  358. package/packages/core/src/scss/mixins/_container.scss +0 -80
  359. package/packages/core/src/scss/mixins/_layer.scss +0 -16
  360. package/packages/core/src/scss/mixins/_screen.scss +0 -77
  361. package/packages/core/src/scss/mixins/_state.scss +0 -18
  362. package/packages/core/src/scss/mixins/_theme.scss +0 -15
  363. package/packages/core/src/scss/mixins/_utility.scss +0 -185
  364. package/packages/core/src/scss/mixins/_visually-hidden.scss +0 -30
  365. package/packages/core/src/scss/state/_index.scss +0 -3
  366. package/packages/core/src/scss/state/focus/_defaults.scss +0 -9
  367. package/packages/core/src/scss/state/focus/_index.scss +0 -42
  368. package/packages/core/src/scss/state/focus/_mixins.scss +0 -13
  369. package/packages/core/src/scss/state/focus/_variables.scss +0 -50
  370. package/packages/core/src/scss/theme/_index.scss +0 -4
  371. package/packages/core/src/scss/theme/color/_defaults.scss +0 -143
  372. package/packages/core/src/scss/theme/color/_index.scss +0 -42
  373. package/packages/core/src/scss/theme/color/_variables.scss +0 -133
  374. package/packages/core/src/scss/theme/typography/_defaults.scss +0 -54
  375. package/packages/core/src/scss/theme/typography/_index.scss +0 -120
  376. package/packages/core/src/scss/theme/typography/_variables.scss +0 -248
  377. package/packages/core/src/scss/utilities/_index.scss +0 -23
  378. package/packages/core/src/scss/utilities/_template/_defaults.scss +0 -41
  379. package/packages/core/src/scss/utilities/_template/_index.scss +0 -171
  380. package/packages/core/src/scss/utilities/_template/_variables.scss +0 -6
  381. package/packages/core/src/scss/utilities/alignment/_defaults.scss +0 -76
  382. package/packages/core/src/scss/utilities/alignment/_index.scss +0 -336
  383. package/packages/core/src/scss/utilities/alignment/_variables.scss +0 -6
  384. package/packages/core/src/scss/utilities/background/_defaults.scss +0 -122
  385. package/packages/core/src/scss/utilities/background/_index.scss +0 -634
  386. package/packages/core/src/scss/utilities/background/_variables.scss +0 -6
  387. package/packages/core/src/scss/utilities/border/_defaults.scss +0 -73
  388. package/packages/core/src/scss/utilities/border/_index.scss +0 -558
  389. package/packages/core/src/scss/utilities/border/_variables.scss +0 -6
  390. package/packages/core/src/scss/utilities/color/_defaults.scss +0 -49
  391. package/packages/core/src/scss/utilities/color/_index.scss +0 -469
  392. package/packages/core/src/scss/utilities/color/_variables.scss +0 -6
  393. package/packages/core/src/scss/utilities/container/_defaults.scss +0 -40
  394. package/packages/core/src/scss/utilities/container/_index.scss +0 -174
  395. package/packages/core/src/scss/utilities/container/_variables.scss +0 -6
  396. package/packages/core/src/scss/utilities/display/_defaults.scss +0 -47
  397. package/packages/core/src/scss/utilities/display/_index.scss +0 -184
  398. package/packages/core/src/scss/utilities/display/_variables.scss +0 -6
  399. package/packages/core/src/scss/utilities/flex/_defaults.scss +0 -99
  400. package/packages/core/src/scss/utilities/flex/_index.scss +0 -486
  401. package/packages/core/src/scss/utilities/flex/_variables.scss +0 -6
  402. package/packages/core/src/scss/utilities/gradient/_defaults.scss +0 -70
  403. package/packages/core/src/scss/utilities/gradient/_index.scss +0 -696
  404. package/packages/core/src/scss/utilities/gradient/_variables.scss +0 -29
  405. package/packages/core/src/scss/utilities/height/_defaults.scss +0 -54
  406. package/packages/core/src/scss/utilities/height/_index.scss +0 -525
  407. package/packages/core/src/scss/utilities/height/_variables.scss +0 -6
  408. package/packages/core/src/scss/utilities/inset/_defaults.scss +0 -55
  409. package/packages/core/src/scss/utilities/inset/_index.scss +0 -258
  410. package/packages/core/src/scss/utilities/inset/_variables.scss +0 -6
  411. package/packages/core/src/scss/utilities/justification/_defaults.scss +0 -73
  412. package/packages/core/src/scss/utilities/justification/_index.scss +0 -333
  413. package/packages/core/src/scss/utilities/justification/_variables.scss +0 -6
  414. package/packages/core/src/scss/utilities/list/_defaults.scss +0 -53
  415. package/packages/core/src/scss/utilities/list/_index.scss +0 -253
  416. package/packages/core/src/scss/utilities/list/_variables.scss +0 -6
  417. package/packages/core/src/scss/utilities/order/_defaults.scss +0 -36
  418. package/packages/core/src/scss/utilities/order/_index.scss +0 -246
  419. package/packages/core/src/scss/utilities/order/_variables.scss +0 -6
  420. package/packages/core/src/scss/utilities/position/_defaults.scss +0 -41
  421. package/packages/core/src/scss/utilities/position/_index.scss +0 -178
  422. package/packages/core/src/scss/utilities/position/_variables.scss +0 -6
  423. package/packages/core/src/scss/utilities/ratio/_defaults.scss +0 -42
  424. package/packages/core/src/scss/utilities/ratio/_index.scss +0 -188
  425. package/packages/core/src/scss/utilities/ratio/_variables.scss +0 -9
  426. package/packages/core/src/scss/utilities/spacing/_defaults.scss +0 -64
  427. package/packages/core/src/scss/utilities/spacing/_index.scss +0 -970
  428. package/packages/core/src/scss/utilities/spacing/_variables.scss +0 -6
  429. package/packages/core/src/scss/utilities/typography/_defaults.scss +0 -58
  430. package/packages/core/src/scss/utilities/typography/_index.scss +0 -1089
  431. package/packages/core/src/scss/utilities/typography/_variables.scss +0 -6
  432. package/packages/core/src/scss/utilities/visibility/_defaults.scss +0 -39
  433. package/packages/core/src/scss/utilities/visibility/_index.scss +0 -173
  434. package/packages/core/src/scss/utilities/visibility/_variables.scss +0 -6
  435. package/packages/core/src/scss/utilities/visually-hidden/_defaults.scss +0 -29
  436. package/packages/core/src/scss/utilities/visually-hidden/_index.scss +0 -189
  437. package/packages/core/src/scss/utilities/visually-hidden/_variables.scss +0 -6
  438. package/packages/core/src/scss/utilities/width/_defaults.scss +0 -54
  439. package/packages/core/src/scss/utilities/width/_index.scss +0 -525
  440. package/packages/core/src/scss/utilities/width/_variables.scss +0 -6
  441. package/packages/core/src/scss/utilities/z-index/_defaults.scss +0 -40
  442. package/packages/core/src/scss/utilities/z-index/_index.scss +0 -173
  443. package/packages/core/src/scss/utilities/z-index/_variables.scss +0 -6
  444. package/packages/core/vite.config.js +0 -28
  445. package/packages/icons/dist/css/base/button.css +0 -2
  446. package/packages/icons/dist/css/base/button.css.map +0 -1
  447. package/packages/icons/dist/css/base/link.css +0 -2
  448. package/packages/icons/dist/css/base/link.css.map +0 -1
  449. package/packages/icons/dist/css/base.css +0 -2
  450. package/packages/icons/dist/css/base.css.map +0 -1
  451. package/packages/icons/dist/css/component/icon.css +0 -2
  452. package/packages/icons/dist/css/component/icon.css.map +0 -1
  453. package/packages/icons/dist/css/component.css +0 -2
  454. package/packages/icons/dist/css/component.css.map +0 -1
  455. package/packages/icons/dist/css/icon.css +0 -2
  456. package/packages/icons/dist/css/icon.css.map +0 -1
  457. package/packages/icons/package.json +0 -48
  458. package/packages/icons/scss/base/button.scss +0 -3
  459. package/packages/icons/scss/base/link.scss +0 -3
  460. package/packages/icons/scss/base.scss +0 -3
  461. package/packages/icons/scss/component/icon.scss +0 -3
  462. package/packages/icons/scss/component.scss +0 -3
  463. package/packages/icons/scss/icon.scss +0 -3
  464. package/packages/icons/src/scss/_index.scss +0 -4
  465. package/packages/icons/src/scss/base/_index.scss +0 -4
  466. package/packages/icons/src/scss/base/button/_defaults.scss +0 -7
  467. package/packages/icons/src/scss/base/button/_index.scss +0 -58
  468. package/packages/icons/src/scss/base/button/_variables.scss +0 -7
  469. package/packages/icons/src/scss/base/link/_defaults.scss +0 -7
  470. package/packages/icons/src/scss/base/link/_index.scss +0 -58
  471. package/packages/icons/src/scss/base/link/_variables.scss +0 -7
  472. package/packages/icons/src/scss/component/_index.scss +0 -3
  473. package/packages/icons/src/scss/component/icon/_defaults.scss +0 -30
  474. package/packages/icons/src/scss/component/icon/_index.scss +0 -60
  475. package/packages/icons/src/scss/component/icon/_mixins.scss +0 -62
  476. package/packages/icons/src/scss/component/icon/_variables.scss +0 -24
  477. package/postcss.config.cjs +0 -11
  478. package/prettier.config.js +0 -16
  479. package/stylelint.config.js +0 -22
  480. package/vite.config.js +0 -28
@@ -1,411 +0,0 @@
1
- # Alignment Utilities
2
-
3
- The alignment utilities provide a set of classes to adjust the `align-content`, `align-items`, and `align-self` properties of elements.
4
-
5
- ## Align content
6
-
7
- | Class Name | Property | Value |
8
- | --- | --- | --- |
9
- | [`.align-content-normal`](#align-content-normal) | align-content | normal |
10
- | [`.align-content-start`](#align-content-start) | align-content | flex-start |
11
- | [`.align-content-end`](#align-content-end) | align-content | flex-end |
12
- | [`.align-content-center`](#align-content-center) | align-content | center |
13
- | [`.align-content-between`](#align-content-between) | align-content | space-between |
14
- | [`.align-content-around`](#align-content-around) | align-content | space-around |
15
- | [`.align-content-evenly`](#align-content-evenly) | align-content | space-evenly |
16
- | [`.align-content-baseline`](#align-content-baseline) | align-content | baseline |
17
- | [`.align-content-stretch`](#align-content-stretch) | align-content | stretch |
18
-
19
- ### `.align-content-normal`
20
-
21
- Sets the `align-content` property to `normal`.
22
-
23
- <div class="w-full display-grid g-4 bg-primary-100 bordered border-primary-700 align-content-normal p-5 h-10" style="grid-template-columns: repeat(3, min-content); grid-template-rows: min-content;">
24
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
25
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
26
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
27
- </div>
28
-
29
- ```html
30
- <div class="display-grid align-content-normal">
31
- <!-- Content here -->
32
- </div>
33
- ```
34
-
35
- ### `.align-content-start`
36
-
37
- Sets the `align-content` property to `flex-start`.
38
-
39
- <div class="w-full display-grid g-4 bg-primary-100 bordered border-primary-700 align-content-start p-5 h-10" style="grid-template-columns: repeat(3, min-content); grid-template-rows: min-content;">
40
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
41
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
42
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
43
- </div>
44
-
45
- ```html
46
- <div class="display-grid align-content-start">
47
- <!-- Content here -->
48
- </div>
49
- ```
50
-
51
- ### `.align-content-end`
52
-
53
- Sets the `align-content` property to `flex-end`.
54
-
55
- <div class="w-full display-grid g-4 bg-primary-100 bordered border-primary-700 align-content-end p-5 h-10" style="grid-template-columns: repeat(3, min-content); grid-template-rows: min-content;">
56
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
57
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
58
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
59
- </div>
60
-
61
- ```html
62
- <div class="display-grid align-content-end">
63
- <!-- Content here -->
64
- </div>
65
- ```
66
-
67
- ### `.align-content-center`
68
-
69
- Sets the `align-content` property to `center`.
70
-
71
- <div class="w-full display-grid g-4 bg-primary-100 bordered border-primary-700 align-content-center p-5 h-10" style="grid-template-columns: repeat(3, min-content); grid-template-rows: min-content;">
72
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
73
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
74
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
75
- </div>
76
-
77
- ```html
78
- <div class="display-grid align-content-center">
79
- <!-- Content here -->
80
- </div>
81
- ```
82
-
83
- ### `.align-content-between`
84
-
85
- Sets the `align-content` property to `space-between`.
86
-
87
- <div class="w-full display-grid g-4 bg-primary-100 bordered border-primary-700 align-content-between p-5 h-10" style="grid-template-columns: repeat(3, min-content); grid-template-rows: min-content;">
88
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
89
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
90
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
91
- </div>
92
-
93
- ```html
94
- <div class="display-grid align-content-between">
95
- <!-- Content here -->
96
- </div>
97
- ```
98
-
99
- ### `.align-content-around`
100
-
101
- Sets the `align-content` property to `space-around`.
102
-
103
- <div class="w-full display-grid g-4 bg-primary-100 bordered border-primary-700 align-content-around p-5 h-10" style="grid-template-columns: repeat(3, min-content); grid-template-rows: min-content;">
104
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
105
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
106
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
107
- </div>
108
-
109
- ```html
110
- <div class="display-grid align-content-around">
111
- <!-- Content here -->
112
- </div>
113
- ```
114
-
115
- ### `.align-content-evenly`
116
-
117
- Sets the `align-content` property to `space-evenly`.
118
-
119
- <div class="w-full display-grid g-4 bg-primary-100 bordered border-primary-700 align-content-evenly p-5 h-10" style="grid-template-columns: repeat(3, min-content); grid-template-rows: min-content;">
120
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
121
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
122
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
123
- </div>
124
-
125
- ```html
126
- <div class="display-grid align-content-evenly">
127
- <!-- Content here -->
128
- </div>
129
- ```
130
-
131
- ### `.align-content-baseline`
132
-
133
- Sets the `align-content` property to `baseline`.
134
-
135
- <div class="w-full display-grid g-4 bg-primary-100 bordered border-primary-700 align-content-baseline p-5 h-10" style="grid-template-columns: repeat(3, min-content); grid-template-rows: min-content;">
136
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
137
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
138
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
139
- </div>
140
-
141
- ```html
142
- <div class="display-grid align-content-baseline">
143
- <!-- Content here -->
144
- </div>
145
- ```
146
-
147
- ### `.align-content-stretch`
148
-
149
- Sets the `align-content` property to `stretch`.
150
-
151
- <div class="w-full display-grid g-4 bg-primary-100 bordered border-primary-700 align-content-stretch p-5 h-10" style="grid-template-columns: repeat(3, min-content); grid-template-rows: min-content;">
152
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
153
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
154
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
155
- </div>
156
-
157
- ```html
158
- <div class="display-grid align-content-start">
159
- <!-- Content here -->
160
- </div>
161
- ```
162
-
163
- ## Align items
164
-
165
- | Class Name | Property | Value |
166
- | --- | --- | --- |
167
- | `.align-items-start` | align-items | start |
168
- | `.align-items-end` | align-items | end |
169
- | `.align-items-center` | align-items | center |
170
- | `.align-items-baseline` | align-items | baseline |
171
- | `.align-items-stretch` | align-items | stretch |
172
-
173
- ### `.align-items-start`
174
-
175
- Sets the `align-items` property to `start`.
176
-
177
- <div class="w-full display-flex g-4 bg-primary-100 bordered border-primary-700 align-items-start p-5 h-10">
178
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
179
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
180
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
181
- </div>
182
-
183
- ```html
184
- <div class="display-flex align-items-start">
185
- <!-- Content here -->
186
- </div>
187
- ```
188
-
189
- ### `.align-items-end`
190
-
191
- Sets the `align-items` property to `end`.
192
-
193
- <div class="w-full display-flex g-4 bg-primary-100 bordered border-primary-700 align-items-end p-5 h-10">
194
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
195
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
196
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
197
- </div>
198
-
199
- ```html
200
- <div class="display-flex align-items-end">
201
- <!-- Content here -->
202
- </div>
203
- ```
204
-
205
- ### `.align-items-center`
206
-
207
- Sets the `align-items` property to `center`.
208
-
209
- <div class="w-full display-flex g-4 bg-primary-100 bordered border-primary-700 align-items-center p-5 h-10">
210
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
211
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
212
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
213
- </div>
214
-
215
- ```html
216
- <div class="display-flex align-items-center">
217
- <!-- Content here -->
218
- </div>
219
- ```
220
-
221
- ### `.align-items-baseline`
222
-
223
- Sets the `align-items` property to `baseline`.
224
-
225
- <div class="w-full display-flex g-4 bg-primary-100 bordered border-primary-700 align-items-baseline p-5 h-10">
226
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
227
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
228
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
229
- </div>
230
-
231
- ```html
232
- <div class="display-flex align-items-baseline">
233
- <!-- Content here -->
234
- </div>
235
- ```
236
-
237
- ### `.align-items-stretch`
238
-
239
- Sets the `align-items` property to `stretch`.
240
-
241
- <div class="w-full display-flex g-4 bg-primary-100 bordered border-primary-700 align-items-stretch p-5 h-10">
242
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
243
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
244
- <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
245
- </div>
246
-
247
- ```html
248
- <div class="display-flex align-items-stretch">
249
- <!-- Content here -->
250
- </div>
251
- ```
252
-
253
- ## Align self
254
-
255
- | Class Name | Property | Value |
256
- | --- | --- | --- |
257
- | `.align-self-auto` | align-self | auto |
258
- | `.align-self-start` | align-self | start |
259
- | `.align-self-end` | align-self | end |
260
- | `.align-self-center` | align-self | center |
261
- | `.align-self-baseline` | align-self | baseline |
262
- | `.align-self-stretch` | align-self | stretch |
263
-
264
- ### `.align-self-auto`
265
-
266
- Sets the `align-self` property to `auto`.
267
-
268
- <div class="w-full display-flex g-4 bg-primary-100 bordered border-primary-700 p-5 h-10">
269
- <div class="bg-primary-200 bordered border-tertiary-700 p-4 align-self-auto">Item</div>
270
- </div>
271
-
272
- ```html
273
- <div class="display-flex">
274
- <div class="align-self-auto">
275
- <!-- Content here -->
276
- </div>
277
- </div>
278
- ```
279
-
280
- ### `.align-self-start`
281
-
282
- Sets the `align-self` property to `start`.
283
-
284
- <div class="w-full display-flex g-4 bg-primary-100 bordered border-primary-700 p-5 h-10">
285
- <div class="bg-primary-200 bordered border-tertiary-700 p-4 align-self-start">Item</div>
286
- </div>
287
-
288
- ```html
289
- <div class="display-flex">
290
- <div class="align-self-start">
291
- <!-- Content here -->
292
- </div>
293
- </div>
294
- ```
295
-
296
- ### `.align-self-end`
297
-
298
- Sets the `align-self` property to `end`.
299
-
300
- <div class="w-full display-flex g-4 bg-primary-100 bordered border-primary-700 p-5 h-10">
301
- <div class="bg-primary-200 bordered border-tertiary-700 p-4 align-self-end">Item</div>
302
- </div>
303
-
304
- ```html
305
- <div class="display-flex">
306
- <div class="align-self-end">
307
- <!-- Content here -->
308
- </div>
309
- </div>
310
- ```
311
-
312
- ### `.align-self-end`
313
-
314
- Sets the `align-self` property to `end`.
315
-
316
- <div class="w-full display-flex g-4 bg-primary-100 bordered border-primary-700 p-5 h-10">
317
- <div class="bg-primary-200 bordered border-tertiary-700 p-4 align-self-end">Item</div>
318
- </div>
319
-
320
- ```html
321
- <div class="display-flex">
322
- <div class="align-self-end">
323
- <!-- Content here -->
324
- </div>
325
- </div>
326
- ```
327
-
328
- ### `.align-self-center`
329
-
330
- Sets the `align-self` property to `center`.
331
-
332
- <div class="w-full display-flex g-4 bg-primary-100 bordered border-primary-700 p-5 h-10">
333
- <div class="bg-primary-200 bordered border-tertiary-700 p-4 align-self-center">Item</div>
334
- </div>
335
-
336
- ```html
337
- <div class="display-flex">
338
- <div class="align-self-center">
339
- <!-- Content here -->
340
- </div>
341
- </div>
342
- ```
343
-
344
- ### `.align-self-baseline`
345
-
346
- Sets the `align-self` property to `baseline`.
347
-
348
- <div class="w-full display-flex g-4 bg-primary-100 bordered border-primary-700 p-5 h-10">
349
- <div class="bg-primary-200 bordered border-tertiary-700 p-4 align-self-baseline">Item</div>
350
- </div>
351
-
352
- ```html
353
- <div class="display-flex">
354
- <div class="align-self-baseline">
355
- <!-- Content here -->
356
- </div>
357
- </div>
358
- ```
359
-
360
- ### `.align-self-stretch`
361
-
362
- Sets the `align-self` property to `stretch`.
363
-
364
- <div class="w-full display-flex g-4 bg-primary-100 bordered border-primary-700 p-5 h-10">
365
- <div class="bg-primary-200 bordered border-tertiary-700 p-4 align-self-stretch">Item</div>
366
- </div>
367
-
368
- ```html
369
- <div class="display-flex">
370
- <div class="align-self-stretch">
371
- <!-- Content here -->
372
- </div>
373
- </div>
374
- ```
375
-
376
- ## Customization
377
-
378
- To customize the alignment utilities, you can use the following variables.
379
-
380
- | Variable | Default Value | Description |
381
- | --- | --- | --- |
382
- | `$selector-base` | `"."` | The base selector for the utility classes. |
383
- | `$use-important` | `true` | A flag to determine if the `!important` flag should be added to the utility classes. |
384
- | `$screen-aware` | `false` | A flag to generate screen-aware utility classes. |
385
- | `$theme-aware` | `false` | A flag to generate theme-aware utility classes. |
386
- | `$state-aware` | `false` | A flag to generate state-aware utility classes. |
387
- | `$container-aware` | `false` | A flag to generate container-aware utility classes. |
388
- | `$screen-aware-separator` | `":"` | The separator for screen-aware utility classes. |
389
- | `$theme-aware-separator` | `":"` | The separator for theme-aware utility classes. |
390
- | `$state-aware-separator` | `":"` | The separator for state-aware utility classes. |
391
- | `$container-aware-separator` | `":"` | The separator for container-aware utility classes. |
392
- | `$screen-aware-selector-prefix` | `""` | The prefix for the screen-aware utility classes. |
393
- | `$theme-aware-selector-prefix` | `""` | The prefix for the theme-aware utility classes. |
394
- | `$state-aware-selector-prefix` | `""` | The prefix for the state-aware utility classes. |
395
- | `$container-aware-selector-prefix` | `"cq:"` | The prefix for the container-aware utility classes. |
396
- | `$align-content-selector-prefix` | `"align-content-"` | The prefix for the align content utility classes. |
397
- | `$custom-align-content-properties` | `()` | The custom properties and values for the align content utility classes. |
398
- | `$align-items-selector-prefix` | `"align-items-"` | The prefix for the `.align-items-utility` utility classes. |
399
- | `$custom-align-items-properties` | `()` | The custom properties and values for the `.align-items-utility` utility classes. |
400
- | `$align-self-selector-prefix` | `"align-self-"` | The prefix for the `.align-self-utility` utility classes. |
401
- | `$custom-align-self-properties` | `()` | The custom properties and values for the `.align-self-utility` utility classes. |
402
-
403
- ## Responsive variants
404
-
405
- To generate responsive alignment utilities, you can set the `$screen-aware`, `$theme-aware`, `$state-aware`, or `$container-aware` variables to `true`.
406
-
407
- By default, no responsive alignment utilities are generated.
408
-
409
- ::: tip :pencil2: Note
410
- For more information on responsive variants, refer to the [Responsive utility classes](./responsive-classes) documentation.
411
- :::
@@ -1,192 +0,0 @@
1
- # Background Utilities
2
-
3
- The background utilities provide a set of classes to adjust the `bg-attachment`, `bg-clip`, `bg-image`, `bg-origin`, `bg-position`, `bg-repeat`, and `bg-size` properties of elements.
4
-
5
- ::: tip :pencil2: Note
6
- For `background-color` utility classes, please refer to the [color utilities](./color).
7
- :::
8
-
9
- ## Background Attachment
10
-
11
- | Class Name | Property | Value |
12
- | --- | --- | --- |
13
- | [`.bg-attachment-scroll`](#bg-attachment-scroll) | `background-attachment` | `scroll` |
14
- | [`.bg-attachment-fixed`](#bg-attachment-fixed) | `background-attachment` | `fixed` |
15
- | [`.bg-attachment-local`](#bg-attachment-local) | `background-attachment` | `local` |
16
-
17
- ### `.bg-attachment-scroll`
18
-
19
- Sets the `background-attachment` property to `scroll`.
20
-
21
- ### `.bg-attachment-fixed`
22
-
23
- Sets the `background-attachment` property to `fixed`.
24
-
25
- ### `.bg-attachment-local`
26
-
27
- Sets the `background-attachment` property to `local`.
28
-
29
- ## Background Clip
30
-
31
- | Class Name | Property | Value |
32
- | --- | --- | --- |
33
- | [`.bg-clip-border-box`](#bg-clip-border-box) | `background-clip` | `border-box` |
34
- | [`.bg-clip-padding-box`](#bg-clip-padding-box) | `background-clip` | `padding-box` |
35
- | [`.bg-clip-content-box`](#bg-clip-content-box) | `background-clip` | `content-box` |
36
- | [`.bg-clip-text`](#bg-clip-text) | `background-clip` | `text` |
37
-
38
- ### `.bg-clip-border-box`
39
-
40
- Sets the `background-clip` property to `border-box`.
41
-
42
- ### `.bg-clip-padding-box`
43
-
44
- Sets the `background-clip` property to `padding-box`.
45
-
46
- ### `.bg-clip-content-box`
47
-
48
- Sets the `background-clip` property to `content-box`.
49
-
50
- ### `.bg-clip-text`
51
-
52
- Sets the `background-clip` property to `text`.
53
-
54
- ## Background Image
55
-
56
- | Class Name | Property | Value |
57
- | --- | --- | --- |
58
- | [`.bg-image-none`](#bg-image-none) | `background-image` | `none` |
59
-
60
- ### `.bg-image-none`
61
-
62
- Sets the `background-image` property to `none`.
63
-
64
- ## Background Position
65
-
66
- | Class Name | Property | Value |
67
- | --- | --- | --- |
68
- | [`.bg-position-top`](#bg-position-top) | `background-position` | `top` |
69
- | [`.bg-position-right`](#bg-position-right) | `background-position` | `right` |
70
- | [`.bg-position-bottom`](#bg-position-bottom) | `background-position` | `bottom` |
71
- | [`.bg-position-left`](#bg-position-left) | `background-position` | `left` |
72
- | [`.bg-position-center`](#bg-position-center) | `background-position` | `center` |
73
-
74
- ### `.bg-position-top`
75
-
76
- Sets the `background-position` property to `top`.
77
-
78
- ### `.bg-position-right`
79
-
80
- Sets the `background-position` property to `right`.
81
-
82
- ### `.bg-position-bottom`
83
-
84
- Sets the `background-position` property to `bottom`.
85
-
86
- ### `.bg-position-left`
87
-
88
- Sets the `background-position` property to `left`.
89
-
90
- ### `.bg-position-center`
91
-
92
- Sets the `background-position` property to `center`.
93
-
94
- ## Background Repeat
95
-
96
- | Class Name | Property | Value |
97
- | --- | --- | --- |
98
- | [`.bg-repeat-repeat`](#bg-repeat-repeat) | `background-repeat` | `repeat` |
99
- | [`.bg-repeat-repeat-x`](#bg-repeat-repeat-x) | `background-repeat` | `repeat-x` |
100
- | [`.bg-repeat-repeat-y`](#bg-repeat-repeat-y) | `background-repeat` | `repeat-y` |
101
- | [`.bg-repeat-space`](#bg-repeat-space) | `background-repeat` | `space` |
102
- | [`.bg-repeat-round`](#bg-repeat-round) | `background-repeat` | `round` |
103
- | [`.bg-repeat-no-repeat`](#bg-repeat-no-repeat) | `background-repeat` | `no-repeat` |
104
-
105
- ### `.bg-repeat-repeat`
106
-
107
- Sets the `background-repeat` property to `repeat`.
108
-
109
- ### `.bg-repeat-repeat-x`
110
-
111
- Sets the `background-repeat` property to `repeat-x`.
112
-
113
- ### `.bg-repeat-repeat-y`
114
-
115
- Sets the `background-repeat` property to `repeat-y`.
116
-
117
- ### `.bg-repeat-space`
118
-
119
- Sets the `background-repeat` property to `space`.
120
-
121
- ### `.bg-repeat-round`
122
-
123
- Sets the `background-repeat` property to `round`.
124
-
125
- ### `.bg-repeat-no-repeat`
126
-
127
- Sets the `background-repeat` property to `no-repeat`.
128
-
129
- ## Background Size
130
-
131
- | Class Name | Property | Value |
132
- | --- | --- | --- |
133
- | [`.bg-size-auto`](#bg-size-auto) | `background-size` | `auto` |
134
- | [`.bg-size-cover`](#bg-size-cover) | `background-size` | `cover` |
135
- | [`.bg-size-contain`](#bg-size-contain) | `background-size` | `contain` |
136
-
137
- ### `.bg-size-auto`
138
-
139
- Sets the `background-size` property to `auto`.
140
-
141
- ### `.bg-size-cover`
142
-
143
- Sets the `background-size` property to `cover`.
144
-
145
- ### `.bg-size-contain`
146
-
147
- Sets the `background-size` property to `contain`.
148
-
149
- ## Customization
150
-
151
- To customize the background utilities, you can use the following variables.
152
-
153
- | Variable | Default Value | Description |
154
- | --- | --- | --- |
155
- | `$selector-base` | `"."` | The base selector for the utility classes. |
156
- | `$use-important` | `true` | A flag to determine if the `!important` flag should be added to the utility classes. |
157
- | `$screen-aware` | `false` | A flag to generate screen-aware utility classes. |
158
- | `$theme-aware` | `false` | A flag to generate theme-aware utility classes. |
159
- | `$state-aware` | `false` | A flag to generate state-aware utility classes. |
160
- | `$container-aware` | `false` | A flag to generate container-aware utility classes. |
161
- | `$screen-aware-separator` | `":"` | The separator for screen-aware utility classes. |
162
- | `$theme-aware-separator` | `":"` | The separator for theme-aware utility classes. |
163
- | `$state-aware-separator` | `":"` | The separator for state-aware utility classes. |
164
- | `$container-aware-separator` | `":"` | The separator for container-aware utility classes. |
165
- | `$screen-aware-selector-prefix` | `""` | The prefix for the screen-aware utility classes. |
166
- | `$theme-aware-selector-prefix` | `""` | The prefix for the theme-aware utility classes. |
167
- | `$state-aware-selector-prefix` | `""` | The prefix for the state-aware utility classes. |
168
- | `$container-aware-selector-prefix` | `"cq:"` | The prefix for the container-aware utility classes. |
169
- | `$background-attachment-selector-prefix` | `"bg-attachment-"` | The prefix for the background attachment utility classes. |
170
- | `$custom-background-attachment-properties` | `()` | The custom properties and values for the background attachment utility classes. |
171
- | `$background-clip-selector-prefix` | `"bg-clip-"` | The prefix for the background clip utility classes. |
172
- | `$custom-background-clip-properties` | `()` | The custom properties and values for the background clip utility classes. |
173
- | `$background-image-selector-prefix` | `"bg-image-"` | The prefix for the background image utility classes. |
174
- | `$custom-background-image-properties` | `()` | The custom properties and values for the background image utility classes. |
175
- | `$background-origin-selector-prefix` | `"bg-origin-"` | The prefix for the background origin utility classes. |
176
- | `$custom-background-origin-properties` | `()` | The custom properties and values for the background origin utility classes. |
177
- | `$background-position-selector-prefix` | `"bg-position-"` | The prefix for the background position utility classes. |
178
- | `$custom-background-position-properties` | `()` | The custom properties and values for the background position utility classes. |
179
- | `$background-repeat-selector-prefix` | `"bg-repeat-"` | The prefix for the background repeat utility classes. |
180
- | `$custom-background-repeat-properties` | `()` | The custom properties and values for the background repeat utility classes. |
181
- | `$background-size-selector-prefix` | `"bg-size-"` | The prefix for the background size utility classes. |
182
- | `$custom-background-size-properties` | `()` | The custom properties and values for the background size utility classes. |
183
-
184
- ## Responsive variants
185
-
186
- To generate responsive background utilities, you can set the `$screen-aware`, `$theme-aware`, `$state-aware`, or `$container-aware` variables to `true`.
187
-
188
- By default, no responsive alignment utilities are generated.
189
-
190
- ::: tip :pencil2: Note
191
- For more information on responsive variants, refer to the [Responsive utility classes](./responsive-classes) documentation.
192
- :::