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

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 (613) hide show
  1. package/.devcontainer/devcontainer.json +221 -0
  2. package/.env +3 -0
  3. package/.github/workflows/docs.yml +13 -6
  4. package/.github/workflows/prerelease.yml +125 -0
  5. package/.github/workflows/release.yml +111 -0
  6. package/.github/workflows/test.yml +54 -3
  7. package/.versionrc.cjs +12 -0
  8. package/.vscode/settings.json +10 -0
  9. package/CHANGELOG.md +203 -1
  10. package/build.js +4 -2
  11. package/combine-at-rules.cjs +61 -0
  12. package/container/.env +26 -0
  13. package/container/build/app.dockerfile +41 -0
  14. package/container/docker-compose.yml +27 -0
  15. package/dist/css/base/button.css +1 -1
  16. package/dist/css/base/button.css.map +1 -1
  17. package/dist/css/base/form.css +1 -1
  18. package/dist/css/base/form.css.map +1 -1
  19. package/dist/css/base/link.css +1 -1
  20. package/dist/css/base/link.css.map +1 -1
  21. package/dist/css/base/table.css +1 -1
  22. package/dist/css/base/table.css.map +1 -1
  23. package/dist/css/base.css +1 -1
  24. package/dist/css/base.css.map +1 -1
  25. package/dist/css/component/accordion.css +4 -1
  26. package/dist/css/component/accordion.css.map +1 -1
  27. package/dist/css/component/alert.css +1 -1
  28. package/dist/css/component/alert.css.map +1 -1
  29. package/dist/css/component/card.css +1 -1
  30. package/dist/css/component/card.css.map +1 -1
  31. package/dist/css/component/carousel.css +1 -1
  32. package/dist/css/component/carousel.css.map +1 -1
  33. package/dist/css/component/input-group.css +1 -1
  34. package/dist/css/component/input-group.css.map +1 -1
  35. package/dist/css/component/list.css +2 -0
  36. package/dist/css/component/list.css.map +1 -0
  37. package/dist/css/component/menu.css +1 -1
  38. package/dist/css/component/menu.css.map +1 -1
  39. package/dist/css/component/navigation.css +1 -1
  40. package/dist/css/component/navigation.css.map +1 -1
  41. package/dist/css/component.css +4 -1
  42. package/dist/css/component.css.map +1 -1
  43. package/dist/css/graupl.css +4 -1
  44. package/dist/css/graupl.css.map +1 -1
  45. package/dist/css/init.css.map +1 -1
  46. package/dist/css/layout/columns.css +1 -1
  47. package/dist/css/layout/columns.css.map +1 -1
  48. package/dist/css/layout/container.css +1 -1
  49. package/dist/css/layout/container.css.map +1 -1
  50. package/dist/css/layout/flex-columns.css +1 -1
  51. package/dist/css/layout/flex-columns.css.map +1 -1
  52. package/dist/css/layout.css +4 -1
  53. package/dist/css/layout.css.map +1 -1
  54. package/dist/css/normalize.css.map +1 -1
  55. package/dist/css/state/focus.css +1 -1
  56. package/dist/css/state/focus.css.map +1 -1
  57. package/dist/css/state.css +1 -1
  58. package/dist/css/state.css.map +1 -1
  59. package/dist/css/theme/color.css.map +1 -1
  60. package/dist/css/theme/typography.css +1 -1
  61. package/dist/css/theme/typography.css.map +1 -1
  62. package/dist/css/theme.css +1 -1
  63. package/dist/css/theme.css.map +1 -1
  64. package/dist/css/utilities/alignment.css.map +1 -1
  65. package/dist/css/utilities/background.css +2 -0
  66. package/dist/css/utilities/background.css.map +1 -0
  67. package/dist/css/utilities/border.css +2 -0
  68. package/dist/css/utilities/border.css.map +1 -0
  69. package/dist/css/utilities/color.css +1 -1
  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 +1 -1
  74. package/dist/css/utilities/display.css.map +1 -1
  75. package/dist/css/utilities/flex.css +1 -1
  76. package/dist/css/utilities/flex.css.map +1 -1
  77. package/dist/css/utilities/gradient.css +2 -0
  78. package/dist/css/utilities/gradient.css.map +1 -0
  79. package/dist/css/utilities/height.css +1 -1
  80. package/dist/css/utilities/height.css.map +1 -1
  81. package/dist/css/utilities/inset.css +1 -1
  82. package/dist/css/utilities/inset.css.map +1 -1
  83. package/dist/css/utilities/justification.css.map +1 -1
  84. package/dist/css/utilities/list.css.map +1 -1
  85. package/dist/css/utilities/order.css.map +1 -1
  86. package/dist/css/utilities/position.css +2 -0
  87. package/dist/css/utilities/position.css.map +1 -0
  88. package/dist/css/utilities/ratio.css +1 -1
  89. package/dist/css/utilities/ratio.css.map +1 -1
  90. package/dist/css/utilities/spacing.css +1 -1
  91. package/dist/css/utilities/spacing.css.map +1 -1
  92. package/dist/css/utilities/typography.css +1 -1
  93. package/dist/css/utilities/typography.css.map +1 -1
  94. package/dist/css/utilities/visibility.css +1 -1
  95. package/dist/css/utilities/visibility.css.map +1 -1
  96. package/dist/css/utilities/visually-hidden.css +2 -0
  97. package/dist/css/utilities/visually-hidden.css.map +1 -0
  98. package/dist/css/utilities/width.css +1 -1
  99. package/dist/css/utilities/width.css.map +1 -1
  100. package/dist/css/utilities/z-index.css +2 -0
  101. package/dist/css/utilities/z-index.css.map +1 -0
  102. package/dist/css/utilities.css +1 -1
  103. package/dist/css/utilities.css.map +1 -1
  104. package/dist/js/graupl.cjs.js +5 -3
  105. package/dist/js/graupl.esm.js +1305 -206
  106. package/dist/js/graupl.iife.js +5 -3
  107. package/docs/.vitepress/config.js +31 -1
  108. package/docs/.vitepress/theme/custom.scss +16 -16
  109. package/docs/compiling-graupl.md +6 -5
  110. package/docs/components/alert.md +28 -28
  111. package/docs/components/button.md +36 -36
  112. package/docs/components/card.md +39 -39
  113. package/docs/components/inputgroup.md +12 -12
  114. package/docs/components/menu.md +112 -112
  115. package/docs/components/navigation.md +52 -52
  116. package/docs/content.md +86 -86
  117. package/docs/defaults.md +10 -10
  118. package/docs/forms.md +34 -34
  119. package/docs/layout.md +21 -21
  120. package/docs/state.md +8 -8
  121. package/docs/theme.md +58 -58
  122. package/docs/utilities/alignment.md +411 -0
  123. package/docs/utilities/background.md +192 -0
  124. package/docs/utilities/border.md +268 -0
  125. package/docs/utilities/color.md +348 -0
  126. package/docs/utilities/container.md +3 -0
  127. package/docs/utilities/display.md +3 -0
  128. package/docs/utilities/flex.md +3 -0
  129. package/docs/utilities/gradient.md +3 -0
  130. package/docs/utilities/height.md +3 -0
  131. package/docs/utilities/inset.md +3 -0
  132. package/docs/utilities/justification.md +3 -0
  133. package/docs/utilities/list.md +3 -0
  134. package/docs/utilities/order.md +3 -0
  135. package/docs/utilities/position.md +3 -0
  136. package/docs/utilities/ratio.md +3 -0
  137. package/docs/utilities/responsive-classes.md +3 -0
  138. package/docs/utilities/spacing.md +3 -0
  139. package/docs/utilities/typography.md +3 -0
  140. package/docs/utilities/visibility.md +3 -0
  141. package/docs/utilities/visually-hidden.md +3 -0
  142. package/docs/utilities/width.md +3 -0
  143. package/docs/utilities/z-index.md +3 -0
  144. package/docs/utilities.md +1 -1
  145. package/favicon.ico +0 -0
  146. package/index.html +418 -55
  147. package/logo.svg +296 -0
  148. package/package.json +33 -37
  149. package/packages/core/build.js +9 -0
  150. package/packages/core/dist/css/base/button.css +2 -0
  151. package/packages/core/dist/css/base/button.css.map +1 -0
  152. package/packages/core/dist/css/base/form.css +2 -0
  153. package/packages/core/dist/css/base/form.css.map +1 -0
  154. package/packages/core/dist/css/base/link.css +2 -0
  155. package/packages/core/dist/css/base/link.css.map +1 -0
  156. package/packages/core/dist/css/base/table.css +2 -0
  157. package/packages/core/dist/css/base/table.css.map +1 -0
  158. package/packages/core/dist/css/base.css +2 -0
  159. package/packages/core/dist/css/base.css.map +1 -0
  160. package/packages/core/dist/css/component/accordion.css +5 -0
  161. package/packages/core/dist/css/component/accordion.css.map +1 -0
  162. package/packages/core/dist/css/component/alert.css +2 -0
  163. package/packages/core/dist/css/component/alert.css.map +1 -0
  164. package/packages/core/dist/css/component/card.css +2 -0
  165. package/packages/core/dist/css/component/card.css.map +1 -0
  166. package/packages/core/dist/css/component/carousel.css +2 -0
  167. package/packages/core/dist/css/component/carousel.css.map +1 -0
  168. package/packages/core/dist/css/component/input-group.css +2 -0
  169. package/packages/core/dist/css/component/input-group.css.map +1 -0
  170. package/packages/core/dist/css/component/list.css +2 -0
  171. package/packages/core/dist/css/component/list.css.map +1 -0
  172. package/packages/core/dist/css/component/menu.css +2 -0
  173. package/packages/core/dist/css/component/menu.css.map +1 -0
  174. package/packages/core/dist/css/component/navigation.css +2 -0
  175. package/packages/core/dist/css/component/navigation.css.map +1 -0
  176. package/packages/core/dist/css/component.css +5 -0
  177. package/packages/core/dist/css/component.css.map +1 -0
  178. package/packages/core/dist/css/graupl.css +5 -0
  179. package/packages/core/dist/css/graupl.css.map +1 -0
  180. package/{src/scss/_init.scss → packages/core/dist/css/init.css} +1 -2
  181. package/packages/core/dist/css/init.css.map +1 -0
  182. package/packages/core/dist/css/layout/columns.css +2 -0
  183. package/packages/core/dist/css/layout/columns.css.map +1 -0
  184. package/packages/core/dist/css/layout/container.css +2 -0
  185. package/packages/core/dist/css/layout/container.css.map +1 -0
  186. package/packages/core/dist/css/layout/flex-columns.css +2 -0
  187. package/packages/core/dist/css/layout/flex-columns.css.map +1 -0
  188. package/packages/core/dist/css/layout.css +5 -0
  189. package/packages/core/dist/css/layout.css.map +1 -0
  190. package/packages/core/dist/css/normalize.css +2 -0
  191. package/packages/core/dist/css/normalize.css.map +1 -0
  192. package/packages/core/dist/css/state/focus.css +2 -0
  193. package/packages/core/dist/css/state/focus.css.map +1 -0
  194. package/packages/core/dist/css/state.css +2 -0
  195. package/packages/core/dist/css/state.css.map +1 -0
  196. package/packages/core/dist/css/theme/color.css +2 -0
  197. package/packages/core/dist/css/theme/color.css.map +1 -0
  198. package/packages/core/dist/css/theme/typography.css +2 -0
  199. package/packages/core/dist/css/theme/typography.css.map +1 -0
  200. package/packages/core/dist/css/theme.css +2 -0
  201. package/packages/core/dist/css/theme.css.map +1 -0
  202. package/packages/core/dist/css/utilities/alignment.css +2 -0
  203. package/packages/core/dist/css/utilities/alignment.css.map +1 -0
  204. package/packages/core/dist/css/utilities/background.css +2 -0
  205. package/packages/core/dist/css/utilities/background.css.map +1 -0
  206. package/packages/core/dist/css/utilities/border.css +2 -0
  207. package/packages/core/dist/css/utilities/border.css.map +1 -0
  208. package/packages/core/dist/css/utilities/color.css +2 -0
  209. package/packages/core/dist/css/utilities/color.css.map +1 -0
  210. package/packages/core/dist/css/utilities/container.css +2 -0
  211. package/packages/core/dist/css/utilities/container.css.map +1 -0
  212. package/packages/core/dist/css/utilities/display.css +2 -0
  213. package/packages/core/dist/css/utilities/display.css.map +1 -0
  214. package/packages/core/dist/css/utilities/flex.css +2 -0
  215. package/packages/core/dist/css/utilities/flex.css.map +1 -0
  216. package/packages/core/dist/css/utilities/gradient.css +2 -0
  217. package/packages/core/dist/css/utilities/gradient.css.map +1 -0
  218. package/packages/core/dist/css/utilities/height.css +2 -0
  219. package/packages/core/dist/css/utilities/height.css.map +1 -0
  220. package/packages/core/dist/css/utilities/inset.css +2 -0
  221. package/packages/core/dist/css/utilities/inset.css.map +1 -0
  222. package/packages/core/dist/css/utilities/justification.css +2 -0
  223. package/packages/core/dist/css/utilities/justification.css.map +1 -0
  224. package/packages/core/dist/css/utilities/list.css +2 -0
  225. package/packages/core/dist/css/utilities/list.css.map +1 -0
  226. package/packages/core/dist/css/utilities/order.css +2 -0
  227. package/packages/core/dist/css/utilities/order.css.map +1 -0
  228. package/packages/core/dist/css/utilities/position.css +2 -0
  229. package/packages/core/dist/css/utilities/position.css.map +1 -0
  230. package/packages/core/dist/css/utilities/ratio.css +2 -0
  231. package/packages/core/dist/css/utilities/ratio.css.map +1 -0
  232. package/packages/core/dist/css/utilities/spacing.css +2 -0
  233. package/packages/core/dist/css/utilities/spacing.css.map +1 -0
  234. package/packages/core/dist/css/utilities/typography.css +2 -0
  235. package/packages/core/dist/css/utilities/typography.css.map +1 -0
  236. package/packages/core/dist/css/utilities/visibility.css +2 -0
  237. package/packages/core/dist/css/utilities/visibility.css.map +1 -0
  238. package/packages/core/dist/css/utilities/visually-hidden.css +2 -0
  239. package/packages/core/dist/css/utilities/visually-hidden.css.map +1 -0
  240. package/packages/core/dist/css/utilities/width.css +2 -0
  241. package/packages/core/dist/css/utilities/width.css.map +1 -0
  242. package/packages/core/dist/css/utilities/z-index.css +2 -0
  243. package/packages/core/dist/css/utilities/z-index.css.map +1 -0
  244. package/packages/core/dist/css/utilities.css +2 -0
  245. package/packages/core/dist/css/utilities.css.map +1 -0
  246. package/packages/core/package.json +58 -0
  247. package/packages/core/scss/base/button.scss +3 -0
  248. package/packages/core/scss/base/form.scss +3 -0
  249. package/packages/core/scss/base/link.scss +3 -0
  250. package/packages/core/scss/base/table.scss +3 -0
  251. package/packages/core/scss/base.scss +3 -0
  252. package/packages/core/scss/component/accordion.scss +3 -0
  253. package/packages/core/scss/component/alert.scss +3 -0
  254. package/packages/core/scss/component/card.scss +3 -0
  255. package/packages/core/scss/component/carousel.scss +3 -0
  256. package/packages/core/scss/component/input-group.scss +3 -0
  257. package/packages/core/scss/component/list.scss +3 -0
  258. package/packages/core/scss/component/menu.scss +3 -0
  259. package/packages/core/scss/component/navigation.scss +3 -0
  260. package/packages/core/scss/component.scss +3 -0
  261. package/packages/core/scss/graupl.scss +3 -0
  262. package/packages/core/scss/init.scss +3 -0
  263. package/packages/core/scss/layout/columns.scss +3 -0
  264. package/packages/core/scss/layout/container.scss +3 -0
  265. package/packages/core/scss/layout/flex-columns.scss +3 -0
  266. package/packages/core/scss/layout.scss +3 -0
  267. package/packages/core/scss/normalize.scss +3 -0
  268. package/packages/core/scss/state/focus.scss +3 -0
  269. package/packages/core/scss/state.scss +3 -0
  270. package/packages/core/scss/theme/color.scss +3 -0
  271. package/packages/core/scss/theme/typography.scss +3 -0
  272. package/packages/core/scss/theme.scss +3 -0
  273. package/packages/core/scss/utilities/alignment.scss +3 -0
  274. package/packages/core/scss/utilities/background.scss +3 -0
  275. package/packages/core/scss/utilities/border.scss +3 -0
  276. package/packages/core/scss/utilities/color.scss +3 -0
  277. package/packages/core/scss/utilities/container.scss +3 -0
  278. package/packages/core/scss/utilities/display.scss +3 -0
  279. package/packages/core/scss/utilities/flex.scss +3 -0
  280. package/packages/core/scss/utilities/gradient.scss +3 -0
  281. package/packages/core/scss/utilities/height.scss +3 -0
  282. package/packages/core/scss/utilities/inset.scss +3 -0
  283. package/packages/core/scss/utilities/justification.scss +3 -0
  284. package/packages/core/scss/utilities/list.scss +3 -0
  285. package/packages/core/scss/utilities/order.scss +3 -0
  286. package/{scss/utilities/postion.scss → packages/core/scss/utilities/position.scss} +1 -1
  287. package/packages/core/scss/utilities/ratio.scss +3 -0
  288. package/packages/core/scss/utilities/spacing.scss +3 -0
  289. package/packages/core/scss/utilities/typography.scss +3 -0
  290. package/packages/core/scss/utilities/visibility.scss +3 -0
  291. package/packages/core/scss/utilities/visually-hidden.scss +3 -0
  292. package/packages/core/scss/utilities/width.scss +3 -0
  293. package/packages/core/scss/utilities/z-index.scss +3 -0
  294. package/packages/core/scss/utilities.scss +3 -0
  295. package/{src → packages/core/src}/scss/_defaults.scss +59 -11
  296. package/{src → packages/core/src}/scss/_index.scss +1 -1
  297. package/packages/core/src/scss/_init.scss +6 -0
  298. package/{src → packages/core/src}/scss/_normalize.scss +1 -1
  299. package/packages/core/src/scss/_variables.scss +95 -0
  300. package/{src → packages/core/src}/scss/base/_index.scss +1 -1
  301. package/{src → packages/core/src}/scss/base/button/_defaults.scss +13 -24
  302. package/packages/core/src/scss/base/button/_index.scss +206 -0
  303. package/packages/core/src/scss/base/button/_mixins.scss +104 -0
  304. package/packages/core/src/scss/base/button/_variables.scss +252 -0
  305. package/{src → packages/core/src}/scss/base/form/_defaults.scss +8 -1
  306. package/packages/core/src/scss/base/form/_index.scss +227 -0
  307. package/packages/core/src/scss/base/form/_variables.scss +245 -0
  308. package/packages/core/src/scss/base/link/_defaults.scss +35 -0
  309. package/packages/core/src/scss/base/link/_index.scss +245 -0
  310. package/packages/core/src/scss/base/link/_variables.scss +370 -0
  311. package/packages/core/src/scss/base/table/_defaults.scss +68 -0
  312. package/packages/core/src/scss/base/table/_index.scss +314 -0
  313. package/packages/core/src/scss/base/table/_variables.scss +309 -0
  314. package/{src → packages/core/src}/scss/component/_index.scss +2 -1
  315. package/{src → packages/core/src}/scss/component/accordion/_defaults.scss +1 -1
  316. package/{src → packages/core/src}/scss/component/accordion/_index.scss +78 -60
  317. package/{src → packages/core/src}/scss/component/accordion/_variables.scss +127 -87
  318. package/{src → packages/core/src}/scss/component/alert/_defaults.scss +1 -1
  319. package/{src → packages/core/src}/scss/component/alert/_index.scss +51 -50
  320. package/packages/core/src/scss/component/alert/_variables.scss +200 -0
  321. package/{src → packages/core/src}/scss/component/card/_defaults.scss +1 -1
  322. package/{src → packages/core/src}/scss/component/card/_index.scss +53 -19
  323. package/packages/core/src/scss/component/card/_variables.scss +216 -0
  324. package/{src → packages/core/src}/scss/component/carousel/_defaults.scss +1 -1
  325. package/{src → packages/core/src}/scss/component/carousel/_index.scss +32 -28
  326. package/{src → packages/core/src}/scss/component/carousel/_variables.scss +22 -22
  327. package/{src → packages/core/src}/scss/component/input-group/_defaults.scss +1 -1
  328. package/{src → packages/core/src}/scss/component/input-group/_index.scss +2 -2
  329. package/{src → packages/core/src}/scss/component/input-group/_variables.scss +13 -13
  330. package/{src/scss/utilities/order → packages/core/src/scss/component/list}/_defaults.scss +7 -14
  331. package/packages/core/src/scss/component/list/_index.scss +52 -0
  332. package/packages/core/src/scss/component/list/_variables.scss +236 -0
  333. package/{src → packages/core/src}/scss/component/menu/_defaults.scss +11 -20
  334. package/packages/core/src/scss/component/menu/_index.scss +308 -0
  335. package/packages/core/src/scss/component/menu/_variables.scss +642 -0
  336. package/packages/core/src/scss/component/navigation/_defaults.scss +23 -0
  337. package/packages/core/src/scss/component/navigation/_index.scss +190 -0
  338. package/packages/core/src/scss/component/navigation/_variables.scss +290 -0
  339. package/packages/core/src/scss/functions/_container.scss +38 -0
  340. package/packages/core/src/scss/functions/_important.scss +36 -0
  341. package/{src → packages/core/src}/scss/functions/_screen.scss +9 -1
  342. package/{src → packages/core/src}/scss/functions/_theme.scss +2 -2
  343. package/packages/core/src/scss/functions/_utility.scss +28 -0
  344. package/{src → packages/core/src}/scss/layout/_index.scss +1 -1
  345. package/{src → packages/core/src}/scss/layout/columns/_defaults.scss +9 -4
  346. package/packages/core/src/scss/layout/columns/_index.scss +137 -0
  347. package/{src → packages/core/src}/scss/layout/columns/_variables.scss +13 -9
  348. package/packages/core/src/scss/layout/container/_defaults.scss +35 -0
  349. package/packages/core/src/scss/layout/container/_index.scss +628 -0
  350. package/packages/core/src/scss/layout/container/_variables.scss +114 -0
  351. package/packages/core/src/scss/layout/flex-columns/_defaults.scss +28 -0
  352. package/packages/core/src/scss/layout/flex-columns/_index.scss +184 -0
  353. package/{src → packages/core/src}/scss/layout/flex-columns/_variables.scss +9 -5
  354. package/{src → packages/core/src}/scss/mixins/_animation.scss +1 -1
  355. package/packages/core/src/scss/mixins/_container.scss +80 -0
  356. package/{src → packages/core/src}/scss/mixins/_layer.scss +6 -2
  357. package/{src → packages/core/src}/scss/mixins/_screen.scss +25 -4
  358. package/packages/core/src/scss/mixins/_state.scss +18 -0
  359. package/packages/core/src/scss/mixins/_theme.scss +15 -0
  360. package/packages/core/src/scss/mixins/_utility.scss +185 -0
  361. package/packages/core/src/scss/mixins/_visually-hidden.scss +30 -0
  362. package/packages/core/src/scss/state/_index.scss +3 -0
  363. package/{src → packages/core/src}/scss/state/focus/_defaults.scss +1 -2
  364. package/packages/core/src/scss/state/focus/_index.scss +42 -0
  365. package/packages/core/src/scss/state/focus/_mixins.scss +13 -0
  366. package/packages/core/src/scss/state/focus/_variables.scss +50 -0
  367. package/{src → packages/core/src}/scss/theme/_index.scss +1 -1
  368. package/{src → packages/core/src}/scss/theme/color/_defaults.scss +1 -1
  369. package/{src → packages/core/src}/scss/theme/color/_index.scss +8 -8
  370. package/{src → packages/core/src}/scss/theme/color/_variables.scss +12 -8
  371. package/{src → packages/core/src}/scss/theme/typography/_defaults.scss +1 -1
  372. package/{src → packages/core/src}/scss/theme/typography/_index.scss +10 -1
  373. package/packages/core/src/scss/theme/typography/_variables.scss +248 -0
  374. package/{src → packages/core/src}/scss/utilities/_index.scss +7 -1
  375. package/packages/core/src/scss/utilities/_template/_defaults.scss +41 -0
  376. package/packages/core/src/scss/utilities/_template/_index.scss +171 -0
  377. package/{src/scss/utilities/alignment → packages/core/src/scss/utilities/_template}/_variables.scss +1 -1
  378. package/{src → packages/core/src}/scss/utilities/alignment/_defaults.scss +21 -7
  379. package/packages/core/src/scss/utilities/alignment/_index.scss +336 -0
  380. package/{src/scss/utilities/display → packages/core/src/scss/utilities/alignment}/_variables.scss +1 -1
  381. package/packages/core/src/scss/utilities/background/_defaults.scss +122 -0
  382. package/packages/core/src/scss/utilities/background/_index.scss +634 -0
  383. package/packages/core/src/scss/utilities/background/_variables.scss +6 -0
  384. package/packages/core/src/scss/utilities/border/_defaults.scss +73 -0
  385. package/packages/core/src/scss/utilities/border/_index.scss +558 -0
  386. package/{src/scss/utilities/list → packages/core/src/scss/utilities/border}/_variables.scss +1 -1
  387. package/packages/core/src/scss/utilities/color/_defaults.scss +49 -0
  388. package/packages/core/src/scss/utilities/color/_index.scss +469 -0
  389. package/{src/scss/utilities/flex → packages/core/src/scss/utilities/color}/_variables.scss +1 -1
  390. package/packages/core/src/scss/utilities/container/_defaults.scss +40 -0
  391. package/packages/core/src/scss/utilities/container/_index.scss +174 -0
  392. package/packages/core/src/scss/utilities/container/_variables.scss +6 -0
  393. package/packages/core/src/scss/utilities/display/_defaults.scss +47 -0
  394. package/packages/core/src/scss/utilities/display/_index.scss +184 -0
  395. package/{src/scss/utilities/inset → packages/core/src/scss/utilities/display}/_variables.scss +1 -1
  396. package/packages/core/src/scss/utilities/flex/_defaults.scss +99 -0
  397. package/packages/core/src/scss/utilities/flex/_index.scss +486 -0
  398. package/{src/scss/utilities/color → packages/core/src/scss/utilities/flex}/_variables.scss +1 -1
  399. package/packages/core/src/scss/utilities/gradient/_defaults.scss +70 -0
  400. package/packages/core/src/scss/utilities/gradient/_index.scss +696 -0
  401. package/packages/core/src/scss/utilities/gradient/_variables.scss +29 -0
  402. package/packages/core/src/scss/utilities/height/_defaults.scss +54 -0
  403. package/packages/core/src/scss/utilities/height/_index.scss +525 -0
  404. package/packages/core/src/scss/utilities/height/_variables.scss +6 -0
  405. package/packages/core/src/scss/utilities/inset/_defaults.scss +55 -0
  406. package/packages/core/src/scss/utilities/inset/_index.scss +258 -0
  407. package/packages/core/src/scss/utilities/inset/_variables.scss +6 -0
  408. package/{src → packages/core/src}/scss/utilities/justification/_defaults.scss +21 -7
  409. package/packages/core/src/scss/utilities/justification/_index.scss +333 -0
  410. package/packages/core/src/scss/utilities/justification/_variables.scss +6 -0
  411. package/packages/core/src/scss/utilities/list/_defaults.scss +53 -0
  412. package/packages/core/src/scss/utilities/list/_index.scss +253 -0
  413. package/packages/core/src/scss/utilities/list/_variables.scss +6 -0
  414. package/packages/core/src/scss/utilities/order/_defaults.scss +36 -0
  415. package/packages/core/src/scss/utilities/order/_index.scss +246 -0
  416. package/packages/core/src/scss/utilities/order/_variables.scss +6 -0
  417. package/packages/core/src/scss/utilities/position/_defaults.scss +41 -0
  418. package/packages/core/src/scss/utilities/position/_index.scss +178 -0
  419. package/{src/scss/utilities/height → packages/core/src/scss/utilities/position}/_variables.scss +1 -1
  420. package/packages/core/src/scss/utilities/ratio/_defaults.scss +42 -0
  421. package/packages/core/src/scss/utilities/ratio/_index.scss +188 -0
  422. package/{src → packages/core/src}/scss/utilities/ratio/_variables.scss +2 -2
  423. package/{src → packages/core/src}/scss/utilities/spacing/_defaults.scss +19 -4
  424. package/packages/core/src/scss/utilities/spacing/_index.scss +970 -0
  425. package/packages/core/src/scss/utilities/spacing/_variables.scss +6 -0
  426. package/packages/core/src/scss/utilities/typography/_defaults.scss +58 -0
  427. package/packages/core/src/scss/utilities/typography/_index.scss +1089 -0
  428. package/packages/core/src/scss/utilities/typography/_variables.scss +6 -0
  429. package/packages/core/src/scss/utilities/visibility/_defaults.scss +39 -0
  430. package/packages/core/src/scss/utilities/visibility/_index.scss +173 -0
  431. package/packages/core/src/scss/utilities/visibility/_variables.scss +6 -0
  432. package/packages/core/src/scss/utilities/visually-hidden/_defaults.scss +29 -0
  433. package/packages/core/src/scss/utilities/visually-hidden/_index.scss +189 -0
  434. package/packages/core/src/scss/utilities/visually-hidden/_variables.scss +6 -0
  435. package/packages/core/src/scss/utilities/width/_defaults.scss +54 -0
  436. package/packages/core/src/scss/utilities/width/_index.scss +525 -0
  437. package/packages/core/src/scss/utilities/width/_variables.scss +6 -0
  438. package/packages/core/src/scss/utilities/z-index/_defaults.scss +40 -0
  439. package/packages/core/src/scss/utilities/z-index/_index.scss +173 -0
  440. package/packages/core/src/scss/utilities/z-index/_variables.scss +6 -0
  441. package/packages/core/vite.config.js +28 -0
  442. package/packages/icons/dist/css/base/button.css +2 -0
  443. package/packages/icons/dist/css/base/button.css.map +1 -0
  444. package/packages/icons/dist/css/base/link.css +2 -0
  445. package/packages/icons/dist/css/base/link.css.map +1 -0
  446. package/packages/icons/dist/css/base.css +2 -0
  447. package/packages/icons/dist/css/base.css.map +1 -0
  448. package/packages/icons/dist/css/component/icon.css +2 -0
  449. package/packages/icons/dist/css/component/icon.css.map +1 -0
  450. package/packages/icons/dist/css/component.css +2 -0
  451. package/packages/icons/dist/css/component.css.map +1 -0
  452. package/packages/icons/dist/css/icon.css +2 -0
  453. package/packages/icons/dist/css/icon.css.map +1 -0
  454. package/packages/icons/package.json +48 -0
  455. package/packages/icons/scss/base/button.scss +3 -0
  456. package/packages/icons/scss/base/link.scss +3 -0
  457. package/packages/icons/scss/base.scss +3 -0
  458. package/packages/icons/scss/component/icon.scss +3 -0
  459. package/packages/icons/scss/component.scss +3 -0
  460. package/packages/icons/scss/icon.scss +3 -0
  461. package/packages/icons/src/scss/_index.scss +4 -0
  462. package/packages/icons/src/scss/base/_index.scss +4 -0
  463. package/packages/icons/src/scss/base/button/_defaults.scss +7 -0
  464. package/packages/icons/src/scss/base/button/_index.scss +58 -0
  465. package/packages/icons/src/scss/base/button/_variables.scss +7 -0
  466. package/packages/icons/src/scss/base/link/_defaults.scss +7 -0
  467. package/packages/icons/src/scss/base/link/_index.scss +58 -0
  468. package/packages/icons/src/scss/base/link/_variables.scss +7 -0
  469. package/packages/icons/src/scss/component/_index.scss +3 -0
  470. package/packages/icons/src/scss/component/icon/_defaults.scss +30 -0
  471. package/packages/icons/src/scss/component/icon/_index.scss +60 -0
  472. package/packages/icons/src/scss/component/icon/_mixins.scss +62 -0
  473. package/packages/icons/src/scss/component/icon/_variables.scss +24 -0
  474. package/postcss.config.cjs +2 -3
  475. package/scss/base/button.scss +1 -1
  476. package/scss/base/form.scss +1 -1
  477. package/scss/base/link.scss +1 -1
  478. package/scss/base/table.scss +1 -1
  479. package/scss/base.scss +1 -1
  480. package/scss/component/accordion.scss +1 -1
  481. package/scss/component/alert.scss +1 -1
  482. package/scss/component/card.scss +1 -1
  483. package/scss/component/carousel.scss +1 -1
  484. package/scss/component/input-group.scss +1 -1
  485. package/scss/component/list.scss +3 -0
  486. package/scss/component/menu.scss +1 -1
  487. package/scss/component/navigation.scss +1 -1
  488. package/scss/component.scss +1 -1
  489. package/scss/graupl.scss +1 -1
  490. package/scss/init.scss +1 -1
  491. package/scss/layout/columns.scss +1 -1
  492. package/scss/layout/container.scss +1 -1
  493. package/scss/layout/flex-columns.scss +1 -1
  494. package/scss/layout.scss +1 -1
  495. package/scss/normalize.scss +1 -1
  496. package/scss/state/focus.scss +1 -1
  497. package/scss/state.scss +1 -1
  498. package/scss/theme/color.scss +1 -1
  499. package/scss/theme/typography.scss +1 -1
  500. package/scss/theme.scss +1 -1
  501. package/scss/utilities/alignment.scss +1 -1
  502. package/scss/utilities/background.scss +3 -0
  503. package/scss/utilities/border.scss +3 -0
  504. package/scss/utilities/color.scss +1 -1
  505. package/scss/utilities/container.scss +3 -0
  506. package/scss/utilities/display.scss +1 -1
  507. package/scss/utilities/flex.scss +1 -1
  508. package/scss/utilities/gradient.scss +3 -0
  509. package/scss/utilities/height.scss +1 -1
  510. package/scss/utilities/inset.scss +1 -1
  511. package/scss/utilities/justification.scss +1 -1
  512. package/scss/utilities/list.scss +1 -1
  513. package/scss/utilities/order.scss +1 -1
  514. package/scss/utilities/position.scss +3 -0
  515. package/scss/utilities/ratio.scss +1 -1
  516. package/scss/utilities/spacing.scss +1 -1
  517. package/scss/utilities/typography.scss +1 -1
  518. package/scss/utilities/visibility.scss +1 -1
  519. package/scss/utilities/visually-hidden.scss +3 -0
  520. package/scss/utilities/width.scss +1 -1
  521. package/scss/utilities/z-index.scss +3 -0
  522. package/scss/utilities.scss +1 -1
  523. package/stylelint.config.js +1 -0
  524. package/vite.config.js +6 -35
  525. package/dist/css/utilities/postion.css +0 -2
  526. package/dist/css/utilities/postion.css.map +0 -1
  527. package/dist/js/component/accordion.cjs.js +0 -3
  528. package/dist/js/component/accordion.esm.js +0 -1289
  529. package/dist/js/component/accordion.iife.js +0 -3
  530. package/dist/js/component/alert.cjs.js +0 -3
  531. package/dist/js/component/alert.esm.js +0 -529
  532. package/dist/js/component/alert.iife.js +0 -3
  533. package/dist/js/component/carousel.cjs.js +0 -3
  534. package/dist/js/component/carousel.esm.js +0 -1110
  535. package/dist/js/component/carousel.iife.js +0 -3
  536. package/src/scss/_variables.scss +0 -53
  537. package/src/scss/base/button/_index.scss +0 -107
  538. package/src/scss/base/button/_mixins.scss +0 -166
  539. package/src/scss/base/button/_variables.scss +0 -176
  540. package/src/scss/base/form/_index.scss +0 -93
  541. package/src/scss/base/form/_variables.scss +0 -156
  542. package/src/scss/base/link/_defaults.scss +0 -50
  543. package/src/scss/base/link/_index.scss +0 -134
  544. package/src/scss/base/link/_variables.scss +0 -262
  545. package/src/scss/base/table/_defaults.scss +0 -53
  546. package/src/scss/base/table/_index.scss +0 -121
  547. package/src/scss/base/table/_variables.scss +0 -135
  548. package/src/scss/component/alert/_variables.scss +0 -173
  549. package/src/scss/component/card/_variables.scss +0 -186
  550. package/src/scss/component/menu/_index.scss +0 -305
  551. package/src/scss/component/menu/_variables.scss +0 -500
  552. package/src/scss/component/navigation/_defaults.scss +0 -29
  553. package/src/scss/component/navigation/_index.scss +0 -189
  554. package/src/scss/component/navigation/_variables.scss +0 -237
  555. package/src/scss/functions/_important.scss +0 -13
  556. package/src/scss/layout/columns/_index.scss +0 -58
  557. package/src/scss/layout/container/_defaults.scss +0 -17
  558. package/src/scss/layout/container/_index.scss +0 -41
  559. package/src/scss/layout/container/_variables.scss +0 -50
  560. package/src/scss/layout/flex-columns/_defaults.scss +0 -18
  561. package/src/scss/layout/flex-columns/_index.scss +0 -80
  562. package/src/scss/mixins/_utility.scss +0 -30
  563. package/src/scss/mixins/_visually-hidden.scss +0 -20
  564. package/src/scss/state/_index.scss +0 -3
  565. package/src/scss/state/focus/_index.scss +0 -13
  566. package/src/scss/state/focus/_mixins.scss +0 -15
  567. package/src/scss/state/focus/_variables.scss +0 -44
  568. package/src/scss/theme/typography/_variables.scss +0 -231
  569. package/src/scss/utilities/alignment/_index.scss +0 -75
  570. package/src/scss/utilities/color/_defaults.scss +0 -35
  571. package/src/scss/utilities/color/_index.scss +0 -91
  572. package/src/scss/utilities/display/_defaults.scss +0 -32
  573. package/src/scss/utilities/display/_index.scss +0 -61
  574. package/src/scss/utilities/flex/_defaults.scss +0 -63
  575. package/src/scss/utilities/flex/_index.scss +0 -71
  576. package/src/scss/utilities/height/_defaults.scss +0 -41
  577. package/src/scss/utilities/height/_index.scss +0 -98
  578. package/src/scss/utilities/inset/_defaults.scss +0 -41
  579. package/src/scss/utilities/inset/_index.scss +0 -37
  580. package/src/scss/utilities/justification/_index.scss +0 -75
  581. package/src/scss/utilities/justification/_variables.scss +0 -6
  582. package/src/scss/utilities/list/_defaults.scss +0 -39
  583. package/src/scss/utilities/list/_index.scss +0 -56
  584. package/src/scss/utilities/order/_index.scss +0 -63
  585. package/src/scss/utilities/order/_variables.scss +0 -6
  586. package/src/scss/utilities/position/_defaults.scss +0 -26
  587. package/src/scss/utilities/position/_index.scss +0 -37
  588. package/src/scss/utilities/position/_variables.scss +0 -6
  589. package/src/scss/utilities/ratio/_defaults.scss +0 -28
  590. package/src/scss/utilities/ratio/_index.scss +0 -52
  591. package/src/scss/utilities/spacing/_index.scss +0 -169
  592. package/src/scss/utilities/spacing/_variables.scss +0 -6
  593. package/src/scss/utilities/typography/_defaults.scss +0 -30
  594. package/src/scss/utilities/typography/_index.scss +0 -224
  595. package/src/scss/utilities/typography/_variables.scss +0 -6
  596. package/src/scss/utilities/visibility/_defaults.scss +0 -25
  597. package/src/scss/utilities/visibility/_index.scss +0 -36
  598. package/src/scss/utilities/visibility/_variables.scss +0 -6
  599. package/src/scss/utilities/width/_defaults.scss +0 -41
  600. package/src/scss/utilities/width/_index.scss +0 -98
  601. package/src/scss/utilities/width/_variables.scss +0 -6
  602. /package/{src → packages/core/src}/js/accordion/Accordion.js +0 -0
  603. /package/{src → packages/core/src}/js/accordion/AccordionItem.js +0 -0
  604. /package/{src → packages/core/src}/js/accordion/index.js +0 -0
  605. /package/{src → packages/core/src}/js/alert/Alert.js +0 -0
  606. /package/{src → packages/core/src}/js/alert/index.js +0 -0
  607. /package/{src → packages/core/src}/js/carousel/Carousel.js +0 -0
  608. /package/{src → packages/core/src}/js/carousel/index.js +0 -0
  609. /package/{src → packages/core/src}/js/domHelpers.js +0 -0
  610. /package/{src → packages/core/src}/js/eventHandlers.js +0 -0
  611. /package/{src → packages/core/src}/js/navigation/index.js +0 -0
  612. /package/{src → packages/core/src}/js/storage.js +0 -0
  613. /package/{src → packages/core/src}/js/validate.js +0 -0
@@ -1,156 +0,0 @@
1
- // @graupl/graupl form base variables.
2
- //
3
- // These values are to be used to directly style bases and provide a
4
- // cleaner way to reference custom properties.
5
-
6
- @use "defaults";
7
- @use "../../variables" as root-variables;
8
- @use "../../defaults" as root-defaults;
9
- @use "../../theme/typography/variables" as typography;
10
- @use "../../theme/color//variables" as color;
11
- @use "../../functions/theme";
12
- @use "sass:map";
13
-
14
- $input-padding-x: var(
15
- --#{root-defaults.$prefix}-input-padding-x,
16
- #{map.get(root-variables.$spacers, 5)}
17
- );
18
- $input-padding-y: var(
19
- --#{root-defaults.$prefix}-input-padding-y,
20
- #{map.get(root-variables.$spacers, 3)}
21
- );
22
- $input-padding: var(
23
- --#{root-defaults.$prefix}-input-padding,
24
- #{$input-padding-y} #{$input-padding-x}
25
- );
26
- $input-font-size: var(
27
- --#{root-defaults.$prefix}-input-font-size,
28
- #{map.get(typography.$font-sizes, base)}
29
- );
30
- $label-font-size: var(
31
- --#{root-defaults.$prefix}-label-font-size,
32
- #{$input-font-size}
33
- );
34
- $fieldset-direction: var(
35
- --#{root-defaults.$prefix}-fieldset-direction,
36
- #{defaults.$fieldset-direction}
37
- );
38
- $fieldset-gap: var(
39
- --#{root-defaults.$prefix}-fieldset-gap,
40
- map.get(root-variables.$spacers, 2)
41
- );
42
- $fieldset-padding-x: var(
43
- --#{root-defaults.$prefix}-fieldset-padding-x,
44
- #{$input-padding-x}
45
- );
46
- $fieldset-padding-y: var(
47
- --#{root-defaults.$prefix}-fieldset-padding-y,
48
- #{$input-padding-y}
49
- );
50
- $fieldset-padding: var(
51
- --#{root-defaults.$prefix}-fieldset-padding,
52
- #{$fieldset-padding-y} #{$fieldset-padding-x}
53
- );
54
- $fieldset-font-size: var(
55
- --#{root-defaults.$prefix}-fieldset-font-size,
56
- #{$input-font-size}
57
- );
58
-
59
- // Background properties.
60
- $input-background: var(
61
- --#{root-defaults.$prefix}-input-background,
62
- #{color.$root-background}
63
- );
64
- $fieldset-background: var(
65
- --#{root-defaults.$prefix}-fieldset-background,
66
- #{$input-background}
67
- );
68
-
69
- // Text properties.
70
- $input-color: var(
71
- --#{root-defaults.$prefix}-input-color,
72
- #{theme.get(primary, 900)}
73
- );
74
- $input-placeholder-color: var(
75
- --#{root-defaults.$prefix}-input-placeholder-color,
76
- #{theme.get(secondary, 600)}
77
- );
78
- $label-color: var(--#{root-defaults.$prefix}-label-color, #{$input-color});
79
- $fieldset-color: var(
80
- --#{root-defaults.$prefix}-fieldset-color,
81
- #{$input-color}
82
- );
83
- $input-disabled-color: var(
84
- --#{root-defaults.$prefix}-input-disabled-color,
85
- #{theme.get(secondary, 400)}
86
- );
87
- $input-disabled-placeholder-color: var(
88
- --#{root-defaults.$prefix}-input-disabled-placeholder-color,
89
- #{$input-disabled-color}
90
- );
91
- $label-disabled-color: var(
92
- --#{root-defaults.$prefix}-label-disabled-color,
93
- #{$input-disabled-color}
94
- );
95
- $fieldset-disabled-color: var(
96
- --#{root-defaults.$prefix}-fieldset-disabled-color,
97
- #{$input-disabled-color}
98
- );
99
-
100
- // Border properties.
101
- $input-border-width: var(
102
- --#{root-defaults.$prefix}-input-border-width,
103
- #{root-variables.$border-width}
104
- );
105
- $input-border-style: var(
106
- --#{root-defaults.$prefix}-botton-border-style,
107
- #{root-variables.$border-style}
108
- );
109
- $input-border: var(
110
- --#{root-defaults.$prefix}-input-border,
111
- #{$input-border-width} #{$input-border-style}
112
- );
113
- $input-border-radius: var(
114
- --#{root-defaults.$prefix}-input-border-radius,
115
- #{root-variables.$border-radius}
116
- );
117
- $fieldset-border-width: var(
118
- --#{root-defaults.$prefix}-fieldset-border-width,
119
- #{$input-border-width}
120
- );
121
- $fieldset-border-style: var(
122
- --#{root-defaults.$prefix}-fieldset-border-style,
123
- #{$input-border-style}
124
- );
125
- $fieldset-border: var(
126
- --#{root-defaults.$prefix}-fieldset-border,
127
- #{$fieldset-border-width} #{$fieldset-border-style}
128
- );
129
- $fieldset-border-radius: var(
130
- --#{root-defaults.$prefix}-fieldset-border-radius,
131
- #{$input-border-radius}
132
- );
133
-
134
- // Border colour properties.
135
- $input-border-color: var(
136
- --#{root-defaults.$prefix}-input-border-color,
137
- #{theme.get(secondary, 700)}
138
- );
139
- $input-disabled-border-color: var(
140
- --#{root-defaults.$prefix}-input-disabled-border-color,
141
- #{theme.get(secondary, 200)}
142
- );
143
- $fieldset-border-color: var(
144
- --#{root-defaults.$prefix}-fieldset-border-color,
145
- #{$input-border-color}
146
- );
147
- $fieldset-disabled-border-color: var(
148
- --#{root-defaults.$prefix}-fieldset-disabled-border-color,
149
- #{$input-disabled-border-color}
150
- );
151
-
152
- // Accent color properties.
153
- $input-accent-color: var(
154
- --#{root-defaults.$prefix}-input-accent-color,
155
- #{theme.get(primary, 700)}
156
- );
@@ -1,50 +0,0 @@
1
- // @graupl/graupl link base default values.
2
- //
3
- // Generally, these should not be used directly when styling bases unless a static value is needed.
4
- // They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
5
- //
6
- // They should not be used to define direct property values (i.e. font-size, color, etc.).
7
- // Those should be defined as custom properties in the `_variables.scss` file.
8
-
9
- // Link selectors.
10
- $link-selector: "a" !default;
11
- $stretched-link-selector: ".stretched" !default;
12
- $stretched-link-pseudo-selector: "before" !default;
13
-
14
- // Link properties.
15
- $link-text-decoration: underline !default;
16
- $link-visited-text-decoration: $link-text-decoration !default;
17
- $link-active-text-decoration: $link-text-decoration !default;
18
- $link-hover-text-decoration: $link-text-decoration !default;
19
- $link-focus-text-decoration: $link-text-decoration !default;
20
- $link-disabled-text-decoration: $link-text-decoration !default;
21
- $link-text-decoration-style: solid !default;
22
- $link-visited-text-decoration-style: $link-text-decoration-style !default;
23
- $link-active-text-decoration-style: $link-text-decoration-style !default;
24
- $link-hover-text-decoration-style: $link-text-decoration-style !default;
25
- $link-focus-text-decoration-style: $link-text-decoration-style !default;
26
- $link-disabled-text-decoration-style: $link-text-decoration-style !default;
27
- $link-transform: none !default;
28
- $link-visited-transform: $link-transform !default;
29
- $link-focus-transform: $link-transform !default;
30
- $link-hover-transform: $link-transform !default;
31
- $link-active-transform: $link-transform !default;
32
- $link-disabled-transform: $link-transform !default;
33
- $link-border-width: 0 !default;
34
- $link-border-color: transparent !default;
35
- $link-visited-border-color: $link-border-color !default;
36
- $link-focus-border-color: $link-border-color !default;
37
- $link-hover-border-color: $link-border-color !default;
38
- $link-active-border-color: $link-border-color !default;
39
- $link-disabled-border-color: $link-border-color !default;
40
- $link-background: transparent !default;
41
- $link-visited-background: $link-background !default;
42
- $link-focus-background: $link-background !default;
43
- $link-hover-background: $link-background !default;
44
- $link-active-background: $link-background !default;
45
- $link-disabled-background: $link-background !default;
46
- $link-min-width: auto;
47
- $link-min-height: auto;
48
-
49
- // Stretched link properties.
50
- $stretched-link-z-index: 5 !default;
@@ -1,134 +0,0 @@
1
- // @graupl/graupl link base styles.
2
-
3
- @use "defaults";
4
- @use "variables" as *;
5
- @use "../../defaults" as root-defaults;
6
- @use "../../mixins/layer" as *;
7
- @use "../../mixins/animation";
8
-
9
- @include layer(base) {
10
- #{defaults.$link-selector} {
11
- min-width: $link-min-width;
12
- min-height: $link-min-height;
13
- padding: $link-padding;
14
- transform: $link-transform;
15
- transition: $link-transition;
16
- border: $link-border;
17
- border-radius: $link-border-radius;
18
- text-decoration: $link-text-decoration;
19
- text-decoration-style: $link-text-decoration-style;
20
- text-decoration-thickness: $link-text-decoration-thickness;
21
-
22
- &:visited {
23
- --#{root-defaults.$prefix}-link-text-decoration: #{$link-visited-text-decoration};
24
- --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$link-visited-text-decoration-thickness};
25
- --#{root-defaults.$prefix}-link-text-decoration-style: #{$link-visited-text-decoration-style};
26
- --#{root-defaults.$prefix}-link-transform: #{$link-visited-transform};
27
- }
28
-
29
- &:focus-visible {
30
- --#{root-defaults.$prefix}-link-text-decoration: #{$link-focus-text-decoration};
31
- --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$link-focus-text-decoration-thickness};
32
- --#{root-defaults.$prefix}-link-text-decoration-style: #{$link-focus-text-decoration-style};
33
- --#{root-defaults.$prefix}-link-transform: #{$link-focus-transform};
34
- }
35
-
36
- &:hover {
37
- --#{root-defaults.$prefix}-link-text-decoration: #{$link-hover-text-decoration};
38
- --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$link-hover-text-decoration-thickness};
39
- --#{root-defaults.$prefix}-link-text-decoration-style: #{$link-hover-text-decoration-style};
40
- --#{root-defaults.$prefix}-link-transform: #{$link-hover-transform};
41
- }
42
-
43
- &:active {
44
- --#{root-defaults.$prefix}-link-text-decoration: #{$link-active-text-decoration};
45
- --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$link-active-text-decoration-thickness};
46
- --#{root-defaults.$prefix}-link-text-decoration-style: #{$link-active-text-decoration-style};
47
- --#{root-defaults.$prefix}-link-transform: #{$link-active-transform};
48
- }
49
-
50
- &:disabled,
51
- &[disabled] {
52
- cursor: not-allowed;
53
-
54
- &,
55
- &:visited,
56
- &:focus-visible,
57
- &:hover,
58
- &:active {
59
- --#{root-defaults.$prefix}-link-text-decoration: #{$link-disabled-text-decoration};
60
- --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$link-disabled-text-decoration-thickness};
61
- --#{root-defaults.$prefix}-link-text-decoration-style: #{$link-disabled-text-decoration-style};
62
- --#{root-defaults.$prefix}-link-transform: #{$link-disabled-transform};
63
- }
64
- }
65
-
66
- &#{defaults.$stretched-link-selector} {
67
- isolation: isolate;
68
-
69
- &::#{defaults.$stretched-link-pseudo-selector} {
70
- content: "";
71
- position: absolute;
72
- inset: 0;
73
- z-index: $stretched-link-z-index;
74
- }
75
- }
76
- }
77
-
78
- @include animation.off {
79
- #{defaults.$link-selector} {
80
- --#{root-defaults.$prefix}-link-transition: #{$link-transition-reduced-motion};
81
- }
82
- }
83
- }
84
-
85
- @include layer(theme) {
86
- #{defaults.$link-selector} {
87
- border-color: $link-border-color;
88
- background: $link-background;
89
- color: $link-color;
90
- text-decoration-color: $link-text-decoration-color;
91
-
92
- &:visited {
93
- --#{root-defaults.$prefix}-link-color: #{$link-visited-color};
94
- --#{root-defaults.$prefix}-link-background: #{$link-visited-background};
95
- --#{root-defaults.$prefix}-link-border-color: #{$link-visited-border-color};
96
- --#{root-defaults.$prefix}-link-text-decoration-color: #{$link-visited-text-decoration-color};
97
- }
98
-
99
- &:focus-visible {
100
- --#{root-defaults.$prefix}-link-color: #{$link-focus-color};
101
- --#{root-defaults.$prefix}-link-background: #{$link-focus-background};
102
- --#{root-defaults.$prefix}-link-border-color: #{$link-focus-border-color};
103
- --#{root-defaults.$prefix}-link-text-decoration-color: #{$link-focus-text-decoration-color};
104
- }
105
-
106
- &:hover {
107
- --#{root-defaults.$prefix}-link-color: #{$link-hover-color};
108
- --#{root-defaults.$prefix}-link-background: #{$link-hover-background};
109
- --#{root-defaults.$prefix}-link-border-color: #{$link-hover-border-color};
110
- --#{root-defaults.$prefix}-link-text-decoration-color: #{$link-hover-text-decoration-color};
111
- }
112
-
113
- &:active {
114
- --#{root-defaults.$prefix}-link-color: #{$link-active-color};
115
- --#{root-defaults.$prefix}-link-background: #{$link-active-background};
116
- --#{root-defaults.$prefix}-link-border-color: #{$link-active-border-color};
117
- --#{root-defaults.$prefix}-link-text-decoration-color: #{$link-active-text-decoration-color};
118
- }
119
-
120
- &:disabled,
121
- &[disabled] {
122
- &,
123
- &:visited,
124
- &:focus-visible,
125
- &:hover,
126
- &:active {
127
- --#{root-defaults.$prefix}-link-color: #{$link-disabled-color};
128
- --#{root-defaults.$prefix}-link-background: #{$link-disabled-background};
129
- --#{root-defaults.$prefix}-link-border-color: #{$link-disabled-border-color};
130
- --#{root-defaults.$prefix}-link-text-decoration-color: #{$link-disabled-text-decoration-color};
131
- }
132
- }
133
- }
134
- }
@@ -1,262 +0,0 @@
1
- // @graupl/graupl link base variables.
2
- //
3
- // These values are to be used to directly style bases and provide a
4
- // cleaner way to reference custom properties.
5
-
6
- @use "defaults";
7
- @use "../../variables" as root-variables;
8
- @use "../../defaults" as root-defaults;
9
- @use "../../functions/theme";
10
- @use "sass:map";
11
-
12
- // Link properties.
13
- $link-text-decoration: var(
14
- --#{root-defaults.$prefix}-link-text-decoration,
15
- #{defaults.$link-text-decoration}
16
- );
17
- $link-visited-text-decoration: var(
18
- --#{root-defaults.$prefix}-link-visited-text-decoration,
19
- #{defaults.$link-visited-text-decoration}
20
- );
21
- $link-focus-text-decoration: var(
22
- --#{root-defaults.$prefix}-link-focus-text-decoration,
23
- #{defaults.$link-focus-text-decoration}
24
- );
25
- $link-hover-text-decoration: var(
26
- --#{root-defaults.$prefix}-link-hover-text-decoration,
27
- #{defaults.$link-hover-text-decoration}
28
- );
29
- $link-active-text-decoration: var(
30
- --#{root-defaults.$prefix}-link-active-text-decoration,
31
- #{defaults.$link-active-text-decoration}
32
- );
33
- $link-disabled-text-decoration: var(
34
- --#{root-defaults.$prefix}-link-disabled-text-decoration,
35
- #{defaults.$link-disabled-text-decoration}
36
- );
37
- $link-text-decoration-thickness: var(
38
- --#{root-defaults.$prefix}-link-text-decoration-thickness,
39
- #{root-variables.$border-width}
40
- );
41
- $link-visited-text-decoration-thickness: var(
42
- --#{root-defaults.$prefix}-link-visited-text-decoration-thickness,
43
- #{root-variables.$border-width}
44
- );
45
- $link-focus-text-decoration-thickness: var(
46
- --#{root-defaults.$prefix}-link-focus-text-decoration-thickness,
47
- #{root-variables.$border-width}
48
- );
49
- $link-hover-text-decoration-thickness: var(
50
- --#{root-defaults.$prefix}-link-hover-text-decoration-thickness,
51
- #{root-variables.$border-width}
52
- );
53
- $link-active-text-decoration-thickness: var(
54
- --#{root-defaults.$prefix}-link-active-text-decoration-thickness,
55
- #{root-variables.$border-width}
56
- );
57
- $link-disabled-text-decoration-thickness: var(
58
- --#{root-defaults.$prefix}-link-disabled-text-decoration-thickness,
59
- #{root-variables.$border-width}
60
- );
61
- $link-text-decoration-style: var(
62
- --#{root-defaults.$prefix}-link-text-decoration-style,
63
- #{defaults.$link-text-decoration-style}
64
- );
65
- $link-visited-text-decoration-style: var(
66
- --#{root-defaults.$prefix}-link-visited-text-decoration-style,
67
- #{defaults.$link-visited-text-decoration-style}
68
- );
69
- $link-focus-text-decoration-style: var(
70
- --#{root-defaults.$prefix}-link-focus-text-decoration-style,
71
- #{defaults.$link-focus-text-decoration-style}
72
- );
73
- $link-hover-text-decoration-style: var(
74
- --#{root-defaults.$prefix}-link-hover-text-decoration-style,
75
- #{defaults.$link-hover-text-decoration-style}
76
- );
77
- $link-active-text-decoration-style: var(
78
- --#{root-defaults.$prefix}-link-active-text-decoration-style,
79
- #{defaults.$link-active-text-decoration-style}
80
- );
81
- $link-disabled-text-decoration-style: var(
82
- --#{root-defaults.$prefix}-link-disabled-text-decoration-style,
83
- #{defaults.$link-disabled-text-decoration-style}
84
- );
85
- $link-color: var(
86
- --#{root-defaults.$prefix}-link-color,
87
- #{theme.get(primary, 700)}
88
- );
89
- $link-visited-color: var(
90
- --#{root-defaults.$prefix}-link-visited-color,
91
- #{theme.get(primary, 700)}
92
- );
93
- $link-focus-color: var(
94
- --#{root-defaults.$prefix}-link-focus-color,
95
- #{theme.get(primary, 700)}
96
- );
97
- $link-hover-color: var(
98
- --#{root-defaults.$prefix}-link-hover-color,
99
- #{theme.get(tertiary, 700)}
100
- );
101
- $link-active-color: var(
102
- --#{root-defaults.$prefix}-link-active-color,
103
- #{theme.get(tertiary, 700)}
104
- );
105
- $link-disabled-color: var(
106
- --#{root-defaults.$prefix}-link-disabled-color,
107
- #{theme.get(primary, 200)}
108
- );
109
- $link-text-decoration-color: var(
110
- --#{root-defaults.$prefix}-link-text-decoration-color,
111
- #{$link-color}
112
- );
113
- $link-visited-text-decoration-color: var(
114
- --#{root-defaults.$prefix}-link-visited-text-decoration-color,
115
- #{$link-visited-color}
116
- );
117
- $link-focus-text-decoration-color: var(
118
- --#{root-defaults.$prefix}-link-focus-text-decoration-color,
119
- #{$link-focus-color}
120
- );
121
- $link-hover-text-decoration-color: var(
122
- --#{root-defaults.$prefix}-link-hover-text-decoration-color,
123
- #{$link-hover-color}
124
- );
125
- $link-active-text-decoration-color: var(
126
- --#{root-defaults.$prefix}-link-active-text-decoration-color,
127
- #{$link-active-color}
128
- );
129
- $link-disabled-text-decoration-color: var(
130
- --#{root-defaults.$prefix}-link-disabled-text-decoration-color,
131
- #{$link-disabled-color}
132
- );
133
- $link-background: var(
134
- --#{root-defaults.$prefix}-link-background,
135
- #{defaults.$link-background}
136
- );
137
- $link-visited-background: var(
138
- --#{root-defaults.$prefix}-link-visited-background,
139
- #{defaults.$link-visited-background}
140
- );
141
- $link-focus-background: var(
142
- --#{root-defaults.$prefix}-link-focus-background,
143
- #{defaults.$link-focus-background}
144
- );
145
- $link-hover-background: var(
146
- --#{root-defaults.$prefix}-link-hover-background,
147
- #{defaults.$link-hover-background}
148
- );
149
- $link-active-background: var(
150
- --#{root-defaults.$prefix}-link-active-background,
151
- #{defaults.$link-active-background}
152
- );
153
- $link-disabled-background: var(
154
- --#{root-defaults.$prefix}-link-disabled-background,
155
- #{defaults.$link-disabled-background}
156
- );
157
- $link-padding-x: var(
158
- --#{root-defaults.$prefix}-link-padding-x,
159
- #{map.get(root-variables.$spacers, 0)}
160
- );
161
- $link-padding-y: var(
162
- --#{root-defaults.$prefix}-link-padding-y,
163
- #{map.get(root-variables.$spacers, 0)}
164
- );
165
- $link-padding: var(
166
- --#{root-defaults.$prefix}-link-padding,
167
- #{$link-padding-y} #{$link-padding-x}
168
- );
169
- $link-transition: var(
170
- --#{root-defaults.$prefix}-link-transition,
171
- background #{map.get(root-variables.$transition-durations, fast)}
172
- #{root-variables.$transition-timing-function},
173
- color #{map.get(root-variables.$transition-durations, fast)}
174
- #{root-variables.$transition-timing-function},
175
- transform #{map.get(root-variables.$transition-durations, fast)}
176
- #{root-variables.$transition-timing-function}
177
- );
178
- $link-transition-reduced-motion: var(
179
- --#{root-defaults.$prefix}-link-transition-reduced-motion,
180
- background #{map.get(root-variables.$transition-durations, none)}
181
- #{root-variables.$transition-timing-function},
182
- color #{map.get(root-variables.$transition-durations, none)}
183
- #{root-variables.$transition-timing-function}
184
- );
185
- $link-transform: var(
186
- --#{root-defaults.$prefix}-link-transform,
187
- #{defaults.$link-transform}
188
- );
189
- $link-visited-transform: var(
190
- --#{root-defaults.$prefix}-link-visited-transform,
191
- #{defaults.$link-visited-transform}
192
- );
193
- $link-focus-transform: var(
194
- --#{root-defaults.$prefix}-link-focus-transform,
195
- #{defaults.$link-focus-transform}
196
- );
197
- $link-hover-transform: var(
198
- --#{root-defaults.$prefix}-link-hover-transform,
199
- #{defaults.$link-hover-transform}
200
- );
201
- $link-active-transform: var(
202
- --#{root-defaults.$prefix}-link-active-transform,
203
- #{defaults.$link-active-transform}
204
- );
205
- $link-disabled-transform: var(
206
- --#{root-defaults.$prefix}-link-disabled-transform,
207
- #{defaults.$link-disabled-transform}
208
- );
209
- $link-border-width: var(
210
- --#{root-defaults.$prefix}-link-border-width,
211
- #{defaults.$link-border-width}
212
- );
213
- $link-border-style: var(
214
- --#{root-defaults.$prefix}-link-border-style,
215
- #{root-variables.$border-style}
216
- );
217
- $link-border: var(
218
- --#{root-defaults.$prefix}-link-border,
219
- #{$link-border-width} #{$link-border-style}
220
- );
221
- $link-border-radius: var(
222
- --#{root-defaults.$prefix}-link-border-radius,
223
- #{root-variables.$border-radius}
224
- );
225
- $link-border-color: var(
226
- --#{root-defaults.$prefix}-link-border-color,
227
- #{defaults.$link-border-color}
228
- );
229
- $link-visited-border-color: var(
230
- --#{root-defaults.$prefix}-link-visited-border-color,
231
- #{defaults.$link-visited-border-color}
232
- );
233
- $link-focus-border-color: var(
234
- --#{root-defaults.$prefix}-link-focus-border-color,
235
- #{defaults.$link-focus-border-color}
236
- );
237
- $link-hover-border-color: var(
238
- --#{root-defaults.$prefix}-link-hover-border-color,
239
- #{defaults.$link-hover-border-color}
240
- );
241
- $link-active-border-color: var(
242
- --#{root-defaults.$prefix}-link-active-border-color,
243
- #{defaults.$link-active-border-color}
244
- );
245
- $link-disabled-border-color: var(
246
- --#{root-defaults.$prefix}-link-disabled-border-color,
247
- #{defaults.$link-disabled-border-color}
248
- );
249
- $link-min-width: var(
250
- --#{root-defaults.$prefix}-link-min-width,
251
- defaults.$link-min-width
252
- );
253
- $link-min-height: var(
254
- --#{root-defaults.$prefix}-link-min-height,
255
- defaults.$link-min-height
256
- );
257
-
258
- // Stretched link properties.
259
- $stretched-link-z-index: var(
260
- --#{root-defaults.$prefix}-stretched-link-z-index,
261
- #{defaults.$stretched-link-z-index}
262
- );
@@ -1,53 +0,0 @@
1
- // @graupl/graupl table base default values.
2
- //
3
- // Generally, these should not be used directly when styling bases unless a static value is needed.
4
- // They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
5
- //
6
- // They should not be used to define direct property values (i.e. font-size, color, etc.).
7
- // Those should be defined as custom properties in the `_variables.scss` file.
8
-
9
- @use "sass:map";
10
-
11
- // Table selectors.
12
- $table-selector: "table" !default;
13
- $table-caption-selector: "caption" !default;
14
- $table-header-selector: "th" !default;
15
- $table-cell-selector: "td" !default;
16
- $table-row-selector: "tr" !default;
17
- $table-head-selector: "thead" !default;
18
- $table-body-selector: "tbody" !default;
19
- $table-foot-selector: "tfoot" !default;
20
- $table-theme-prefix-selector: "." !default;
21
- $table-bordered-selector: ".bordered" !default;
22
- $table-collapsed-selector: ".collapsed" !default;
23
- $table-striped-columns-selector: ".striped-columns" !default;
24
- $table-striped-rows-selector: ".striped-rows" !default;
25
- $table-hoverable-selector: ".hoverable" !default;
26
- $table-highlight-selector: ".highlight" !default;
27
- $table-responsive-selector: ".responsive-table" !default;
28
-
29
- // Table properties.
30
- $table-caption-side: bottom !default;
31
-
32
- // Table theme defaults.
33
- // This map is used to define the default colour shades for the
34
- // themed table bases.
35
- //
36
- // e.g.
37
- // Primary tables will use primary--700 as the header background,
38
- // and primary--100 as the header text colour.
39
- //
40
- // Secondary/tertiary tables will use the same shade for their respective colours.
41
- $base-table-theme-map: (
42
- header-background: 700,
43
- header-color: 100,
44
- striped-background: 200,
45
- striped-color: 900,
46
- hover-background: 300,
47
- hover-color: 900,
48
- border-color: 900,
49
- highlight-background: 500,
50
- highlight-color: 100,
51
- );
52
- $custom-table-theme-map: () !default;
53
- $table-theme-map: map.merge($base-table-theme-map, $custom-table-theme-map);