@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
@@ -0,0 +1,173 @@
1
+ // @graupl/core z-index utilities styles.
2
+ //
3
+ // This file generates the z-index utility classes provided by Graupl.
4
+ //
5
+ // The following classes are generated by default:
6
+ // - `.z-n1`: Sets the z-index to -1.
7
+ // - `.z-0`: Sets the z-index to 0.
8
+ // - `.z-1`: Sets the z-index to 1.
9
+ //
10
+ // The following custom properties control the generated classes:
11
+ // - N/A.
12
+ //
13
+ // The following variables control the generated classes:
14
+ // - `$selector-base`: The base selector for the utility classes.
15
+ // - `$use-important`: A flag to determine if the `!important` flag should be added to the utility classes.
16
+ // - `$screen-aware`: A flag to generate screen-aware utility classes.
17
+ // - `$theme-aware`: A flag to generate theme-aware utility classes.
18
+ // - `$state-aware`: A flag to generate state-aware utility classes.
19
+ // - `$container-aware`: A flag to generate container-aware utility classes.
20
+ // - `$screen-aware-separator`: The separator for screen-aware utility classes.
21
+ // - `$theme-aware-separator`: The separator for theme-aware utility classes.
22
+ // - `$state-aware-separator`: The separator for state-aware utility classes.
23
+ // - `$container-aware-separator`: The separator for container-aware utility classes.
24
+ // - `$screen-aware-selector-prefix`: The prefix for screen-aware utility classes.
25
+ // - `$theme-aware-selector-prefix`: The prefix for theme-aware utility classes.
26
+ // - `$state-aware-selector-prefix`: The prefix for state-aware utility classes.
27
+ // - `$container-aware-selector-prefix`: The prefix for container-aware utility classes.
28
+ // - `$z-index-selector-prefix`: The prefix for the utility classes.
29
+ // - `$base-z-index-properties`: The base properties and values for the z-index utility classes.
30
+ // - `$custom-z-index-properties`: The custom properties and values for the z-index utility classes.
31
+ // - `$z-index-properties`: The merged properties and values for the z-index utility classes.
32
+ //
33
+ // Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.
34
+ // By default, no responsive utility classes are generated.
35
+ //
36
+ // When set to true, screen-aware utility classes will be generated for each screen size in the following pattern:
37
+ // - `.{screen-prefix}{screen-name}:{prefix}{value}`
38
+ //
39
+ // e.g. `.sm:z-0` will set the `z-index` property to `0` on screens equal to or larger than the `sm` breakpoint.
40
+ //
41
+ // When set to true, theme-aware utility classes will be generated for each theme in the following pattern:
42
+ // - `.{theme-prefix}{theme-name}:{prefix}{value}`
43
+ //
44
+ // e.g. `.dark:z-0` will set the `z-index` property to `0` when the `dark` theme is active.
45
+ //
46
+ // When set to true, state-aware utility classes will be generated for each state in the following pattern:
47
+ // - `.{state-prefix}{state-name}:{prefix}{value}`
48
+ //
49
+ // e.g. `.hover:z-0` will set the `z-index` property to `0` when the element is hovered.
50
+ //
51
+ // When set to true, container-aware utility classes will be generated for each container in the following pattern:
52
+ // - `.{container-prefix}{container-name}:{prefix}{value}`
53
+ //
54
+ // e.g. `.cq:md:z-0` will set the `z-index` property to `0` when the parent container is larger than the `md` breakpoint.
55
+ //
56
+ // @example
57
+ // <div class="z-0">This element has a z-index of 0.</div>
58
+
59
+ @use "../../defaults" as root-defaults;
60
+ @use "../../mixins/layer" as *;
61
+ @use "../../mixins/utility";
62
+ @use "../../theme/color/variables" as color;
63
+ @use "defaults";
64
+ @use "sass:map";
65
+ @use "variables" as *;
66
+
67
+ @include layer(utilities) {
68
+ // `.`
69
+ $selector-prefix: defaults.$selector-base;
70
+
71
+ // For each z-index property, create a utility class.
72
+ @each $name, $value in defaults.$z-index-properties {
73
+ // e.g. `.z-0`
74
+ $selector: #{$selector-prefix}#{defaults.$z-index-selector-prefix}#{$name};
75
+
76
+ @include utility.create(
77
+ $selector,
78
+ z-index,
79
+ $value,
80
+ $important: #{defaults.$use-important}
81
+ );
82
+ }
83
+
84
+ // Generate screen-aware utilities.
85
+ @if defaults.$screen-aware and root-defaults.$screen-aware-utilities {
86
+ @each $screen-name in map.keys(root-defaults.$screen-sizes) {
87
+ // e.g. `.md:` or `.lg:`
88
+ $selector-prefix: #{defaults.$selector-base}#{defaults.$screen-aware-selector-prefix}#{$screen-name}#{defaults.$screen-aware-separator};
89
+
90
+ // For each template property, create a utility class.
91
+ @each $name, $value in defaults.$z-index-properties {
92
+ // e.g. `.md:z-0`
93
+ $selector: #{$selector-prefix}#{defaults.$z-index-selector-prefix}#{$name};
94
+
95
+ @include utility.create(
96
+ $selector,
97
+ z-index,
98
+ $value,
99
+ $important: #{defaults.$use-important},
100
+ $screen: $screen-name
101
+ );
102
+ }
103
+ }
104
+ }
105
+
106
+ // Generate theme-aware utilities.
107
+ @if defaults.$theme-aware and root-defaults.$theme-aware-utilities {
108
+ @each $theme-name, $colors in color.$themes {
109
+ @if $theme-name != active {
110
+ // e.g. `.dark:` or `.light:`
111
+ $selector-prefix: #{defaults.$selector-base}#{defaults.$theme-aware-selector-prefix}#{$theme-name}#{defaults.$theme-aware-separator};
112
+
113
+ // For each template property, create a utility class.
114
+ @each $name, $value in defaults.$z-index-properties {
115
+ // e.g. `.dark:z-0` or `.light:z-n1`
116
+ $selector: #{$selector-prefix}#{defaults.$z-index-selector-prefix}#{$name};
117
+
118
+ @include utility.create(
119
+ $selector,
120
+ z-index,
121
+ $value,
122
+ $important: #{defaults.$use-important},
123
+ $theme: $theme-name
124
+ );
125
+ }
126
+ }
127
+ }
128
+ }
129
+
130
+ // Generate state-aware utilities.
131
+ @if defaults.$state-aware and root-defaults.$state-aware-utilities {
132
+ @each $state-name, $value in root-defaults.$state-selectors {
133
+ // e.g. `.hover:` or `.focus:`
134
+ $selector-prefix: #{defaults.$selector-base}#{defaults.$state-aware-selector-prefix}#{$state-name}#{defaults.$state-aware-separator};
135
+
136
+ // For each template property, create a utility class.
137
+ @each $name, $value in defaults.$z-index-properties {
138
+ // e.g. `.hover:z-0` or `.focus:z-n1`
139
+ $selector: #{$selector-prefix}#{defaults.$z-index-selector-prefix}#{$name};
140
+
141
+ @include utility.create(
142
+ $selector,
143
+ z-index,
144
+ $value,
145
+ $important: #{defaults.$use-important},
146
+ $state: $state-name
147
+ );
148
+ }
149
+ }
150
+ }
151
+
152
+ // Generate container-aware utilities.
153
+ @if defaults.$container-aware and root-defaults.$container-aware-utilities {
154
+ @each $container-name in map.keys(root-defaults.$container-sizes) {
155
+ // e.g. `.md:` or `.lg:`
156
+ $selector-prefix: #{defaults.$selector-base}#{defaults.$container-aware-selector-prefix}#{$container-name}#{defaults.$container-aware-separator};
157
+
158
+ // For each template property, create a utility class.
159
+ @each $name, $value in defaults.$z-index-properties {
160
+ // e.g. `.md:z-0`
161
+ $selector: #{$selector-prefix}#{defaults.$z-index-selector-prefix}#{$name};
162
+
163
+ @include utility.create(
164
+ $selector,
165
+ z-index,
166
+ $value,
167
+ $important: #{defaults.$use-important},
168
+ $container: $container-name
169
+ );
170
+ }
171
+ }
172
+ }
173
+ }
@@ -0,0 +1,6 @@
1
+ // @graupl/core [_template] utilities variables.
2
+ //
3
+ // These values are to be used to directly style components and provide a
4
+ // cleaner way to reference custom properties.
5
+
6
+ @use "defaults";
@@ -0,0 +1,28 @@
1
+ import { resolve } from "path";
2
+ import { defineConfig } from "vite";
3
+ import { fileURLToPath, URL } from "url";
4
+
5
+ // Get the current directory path.
6
+ const __dirname = fileURLToPath(new URL(".", import.meta.url));
7
+
8
+ // Supported build types.
9
+ const formats = ["iife", "esm", "cjs"];
10
+
11
+ // https://vitejs.dev/config/
12
+ export default defineConfig({
13
+ build: {
14
+ outDir: "dist/js",
15
+ lib: {
16
+ entry: resolve(__dirname, "build.js"),
17
+ name: "Graupl",
18
+ formats,
19
+ fileName: (format) => `graupl.${format}.js`,
20
+ },
21
+ },
22
+ server: {
23
+ host: "0.0.0.0",
24
+ hmr: {
25
+ host: "localhost",
26
+ },
27
+ },
28
+ });
@@ -0,0 +1,2 @@
1
+ @layer graupl.theme{.button{--graupl-icon-color:var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}.button.visited,.button:visited{--graupl-icon-color:var(--graupl-button-visited-color,var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))}.button.focus{--graupl-icon-color:var(--graupl-button-focus-color,var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))}.button:focus-visible{--graupl-icon-color:var(--graupl-button-focus-color,var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))}.button.hover,.button:hover{--graupl-icon-color:var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))))}.button.active,.button:active{--graupl-icon-color:var(--graupl-button-active-color,var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))))}.button.disabled,.button.disabled.focus,.button.disabled.visited,.button.disabled:visited{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button.disabled:focus-visible{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button.disabled.active,.button.disabled.disabled,.button.disabled.hover,.button.disabled:active,.button.disabled:disabled,.button.disabled:hover,.button.disabled[aria-disabled=true],.button.disabled[disabled],.button:disabled,.button:disabled.focus,.button:disabled.visited,.button:disabled:visited{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button:disabled:focus-visible{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button:disabled.active,.button:disabled.disabled,.button:disabled.hover,.button:disabled:active,.button:disabled:disabled,.button:disabled:hover,.button:disabled[aria-disabled=true],.button:disabled[disabled],.button[disabled],.button[disabled].focus,.button[disabled].visited,.button[disabled]:visited{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button[disabled]:focus-visible{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button[aria-disabled=true],.button[aria-disabled=true].focus,.button[aria-disabled=true].visited,.button[aria-disabled=true]:visited,.button[disabled].active,.button[disabled].disabled,.button[disabled].hover,.button[disabled]:active,.button[disabled]:disabled,.button[disabled]:hover,.button[disabled][aria-disabled=true],.button[disabled][disabled]{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button[aria-disabled=true]:focus-visible{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button[aria-disabled=true].active,.button[aria-disabled=true].disabled,.button[aria-disabled=true].hover,.button[aria-disabled=true]:active,.button[aria-disabled=true]:disabled,.button[aria-disabled=true]:hover,.button[aria-disabled=true][aria-disabled=true],.button[aria-disabled=true][disabled]{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}}
2
+ /*# sourceMappingURL=button.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../../node_modules/@graupl/core/src/scss/mixins/_layer.scss","../../../src/scss/base/button/_index.scss","button.css"],"names":[],"mappings":"AASI,oBCkBF,QACE,+MCxBF,CD6BM,gCACE,kPCxBR,CDuBM,cACE,gPCrBR,CDoBM,sBACE,gPClBR,CDiBM,4BACE,+NCZR,CDWM,8BACE,iQCNR,CDgBc,0FACE,2KCLhB,CDIc,+BACE,2KCFhB,CDCc,4SACE,2KCkChB,CDnCc,+BACE,2KCqChB,CDtCc,gTACE,2KCyEhB,CD1Ec,gCACE,2KC4EhB,CD7Ec,gWACE,2KCgHhB,CDjHc,0CACE,2KCmHhB,CDpHc,0SACE,2KC2IhB,CACF","file":"button.css"}
@@ -0,0 +1,2 @@
1
+ @layer graupl.theme{a{--graupl-icon-color:var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))))}a.visited,a:visited{--graupl-icon-color:var(--graupl-link-visited-color,var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))))}a.focus{--graupl-icon-color:var(--graupl-link-focus-color,var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))))}a:focus-visible{--graupl-icon-color:var(--graupl-link-focus-color,var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))))}a.hover,a:hover{--graupl-icon-color:var(--graupl-link-hover-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46))))}a.active,a:active{--graupl-icon-color:var(--graupl-link-active-color,var(--graupl-link-hover-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))))}a.disabled,a.disabled.focus,a.disabled.visited,a.disabled:visited{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}a.disabled:focus-visible{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}a.disabled.active,a.disabled.disabled,a.disabled.hover,a.disabled:active,a.disabled:disabled,a.disabled:hover,a.disabled[aria-disabled=true],a.disabled[disabled],a:disabled,a:disabled.focus,a:disabled.visited,a:disabled:visited{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}a:disabled:focus-visible{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}a:disabled.active,a:disabled.disabled,a:disabled.hover,a:disabled:active,a:disabled:disabled,a:disabled:hover,a:disabled[aria-disabled=true],a:disabled[disabled],a[disabled],a[disabled].focus,a[disabled].visited,a[disabled]:visited{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}a[disabled]:focus-visible{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}a[aria-disabled=true],a[aria-disabled=true].focus,a[aria-disabled=true].visited,a[aria-disabled=true]:visited,a[disabled].active,a[disabled].disabled,a[disabled].hover,a[disabled]:active,a[disabled]:disabled,a[disabled]:hover,a[disabled][aria-disabled=true],a[disabled][disabled]{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}a[aria-disabled=true]:focus-visible{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}a[aria-disabled=true].active,a[aria-disabled=true].disabled,a[aria-disabled=true].hover,a[aria-disabled=true]:active,a[aria-disabled=true]:disabled,a[aria-disabled=true]:hover,a[aria-disabled=true][aria-disabled=true],a[aria-disabled=true][disabled]{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}}
2
+ /*# sourceMappingURL=link.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../../node_modules/@graupl/core/src/scss/mixins/_layer.scss","../../../src/scss/base/link/_index.scss","link.css"],"names":[],"mappings":"AASI,oBCkBkC,EAClC,gKCzBF,CD8BM,oBACE,iMCzBR,CDwBM,QACE,+LCtBR,CDqBM,gBACE,+LCnBR,CDkBM,gBACE,yKCbR,CDYM,kBACE,yMCPR,CDiBc,kEACE,yKCNhB,CDKc,yBACE,yKCHhB,CDEc,oOACE,yKCiChB,CDlCc,yBACE,yKCoChB,CDrCc,wOACE,yKCwEhB,CDzEc,0BACE,yKC2EhB,CD5Ec,wRACE,yKC+GhB,CDhHc,oCACE,yKCkHhB,CDnHc,0PACE,yKC0IhB,CACF","file":"link.css"}
@@ -0,0 +1,2 @@
1
+ @layer graupl.theme{.button{--graupl-icon-color:var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}.button.visited,.button:visited{--graupl-icon-color:var(--graupl-button-visited-color,var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))}.button.focus{--graupl-icon-color:var(--graupl-button-focus-color,var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))}.button:focus-visible{--graupl-icon-color:var(--graupl-button-focus-color,var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))}.button.hover,.button:hover{--graupl-icon-color:var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))))}.button.active,.button:active{--graupl-icon-color:var(--graupl-button-active-color,var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))))}.button.disabled,.button.disabled.focus,.button.disabled.visited,.button.disabled:visited{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button.disabled:focus-visible{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button.disabled.active,.button.disabled.disabled,.button.disabled.hover,.button.disabled:active,.button.disabled:disabled,.button.disabled:hover,.button.disabled[aria-disabled=true],.button.disabled[disabled],.button:disabled,.button:disabled.focus,.button:disabled.visited,.button:disabled:visited{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button:disabled:focus-visible{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button:disabled.active,.button:disabled.disabled,.button:disabled.hover,.button:disabled:active,.button:disabled:disabled,.button:disabled:hover,.button:disabled[aria-disabled=true],.button:disabled[disabled],.button[disabled],.button[disabled].focus,.button[disabled].visited,.button[disabled]:visited{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button[disabled]:focus-visible{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button[aria-disabled=true],.button[aria-disabled=true].focus,.button[aria-disabled=true].visited,.button[aria-disabled=true]:visited,.button[disabled].active,.button[disabled].disabled,.button[disabled].hover,.button[disabled]:active,.button[disabled]:disabled,.button[disabled]:hover,.button[disabled][aria-disabled=true],.button[disabled][disabled]{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button[aria-disabled=true]:focus-visible{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button[aria-disabled=true].active,.button[aria-disabled=true].disabled,.button[aria-disabled=true].hover,.button[aria-disabled=true]:active,.button[aria-disabled=true]:disabled,.button[aria-disabled=true]:hover,.button[aria-disabled=true][aria-disabled=true],.button[aria-disabled=true][disabled]{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}a{--graupl-icon-color:var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))))}a.visited,a:visited{--graupl-icon-color:var(--graupl-link-visited-color,var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))))}a.focus{--graupl-icon-color:var(--graupl-link-focus-color,var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))))}}@layer graupl.theme{a:focus-visible{--graupl-icon-color:var(--graupl-link-focus-color,var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))))}a.hover,a:hover{--graupl-icon-color:var(--graupl-link-hover-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46))))}a.active,a:active{--graupl-icon-color:var(--graupl-link-active-color,var(--graupl-link-hover-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))))}a.disabled,a.disabled.focus,a.disabled.visited,a.disabled:visited{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}a.disabled:focus-visible{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}a.disabled.active,a.disabled.disabled,a.disabled.hover,a.disabled:active,a.disabled:disabled,a.disabled:hover,a.disabled[aria-disabled=true],a.disabled[disabled],a:disabled,a:disabled.focus,a:disabled.visited,a:disabled:visited{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}a:disabled:focus-visible{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}a:disabled.active,a:disabled.disabled,a:disabled.hover,a:disabled:active,a:disabled:disabled,a:disabled:hover,a:disabled[aria-disabled=true],a:disabled[disabled],a[disabled],a[disabled].focus,a[disabled].visited,a[disabled]:visited{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}a[disabled]:focus-visible{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}a[aria-disabled=true],a[aria-disabled=true].focus,a[aria-disabled=true].visited,a[aria-disabled=true]:visited,a[disabled].active,a[disabled].disabled,a[disabled].hover,a[disabled]:active,a[disabled]:disabled,a[disabled]:hover,a[disabled][aria-disabled=true],a[disabled][disabled]{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}a[aria-disabled=true]:focus-visible{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}a[aria-disabled=true].active,a[aria-disabled=true].disabled,a[aria-disabled=true].hover,a[aria-disabled=true]:active,a[aria-disabled=true]:disabled,a[aria-disabled=true]:hover,a[aria-disabled=true][aria-disabled=true],a[aria-disabled=true][disabled]{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}}
2
+ /*# sourceMappingURL=base.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../node_modules/@graupl/core/src/scss/mixins/_layer.scss","../../src/scss/base/button/_index.scss","base.css","../../src/scss/base/link/_index.scss"],"names":[],"mappings":"AASI,oBCkBF,QACE,+MCxBF,CD6BM,gCACE,kPCxBR,CDuBM,cACE,gPCrBR,CDoBM,sBACE,gPClBR,CDiBM,4BACE,+NCZR,CDWM,8BACE,iQCNR,CDgBc,0FACE,2KCLhB,CDIc,+BACE,2KCFhB,CDCc,4SACE,2KCkChB,CDnCc,+BACE,2KCqChB,CDtCc,gTACE,2KCyEhB,CD1Ec,gCACE,2KC4EhB,CD7Ec,gWACE,2KCgHhB,CDjHc,0CACE,2KCmHhB,CDpHc,0SACE,2KC2IhB,CC7JoC,EAClC,gKDiKF,CC5JM,oBACE,iMDiKR,CClKM,QACE,+LDoKR,CAbF,CFhLI,oBGwBI,gBACE,+LDuKR,CCxKM,gBACE,yKD6KR,CC9KM,kBACE,yMDmLR,CCzKc,kEACE,yKDoLhB,CCrLc,yBACE,yKDuLhB,CCxLc,oOACE,yKD2NhB,CC5Nc,yBACE,yKD8NhB,CC/Nc,wOACE,yKDkQhB,CCnQc,0BACE,yKDqQhB,CCtQc,wRACE,yKDyShB,CC1Sc,oCACE,yKD4ShB,CC7Sc,0PACE,yKDoUhB,CACF","file":"base.css"}
@@ -0,0 +1,2 @@
1
+ @layer graupl.component{.icon{background-position:50%;background-repeat:no-repeat;background-size:contain;display:var(--graupl-icon-display,inline-block);height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));margin-inline:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))) var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)));-webkit-mask-image:var(--graupl-icon,none);mask-image:var(--graupl-icon,none);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;vertical-align:sub;width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em))}.icon-before:before{margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)))}.icon-after:after,.icon-before:before{background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:var(--graupl-icon-display,inline-block);height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));-webkit-mask-image:var(--graupl-icon,none);mask-image:var(--graupl-icon,none);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;vertical-align:sub;width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em))}.icon-after:after{margin-inline-start:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)))}}@layer graupl.theme{.icon,.icon-after:after,.icon-before:before{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}.icon-after.primary-100,.icon-before.primary-100,.icon.primary-100{--graupl-icon-color:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))}.icon-after.primary-200,.icon-before.primary-200,.icon.primary-200{--graupl-icon-color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))}.icon-after.primary-300,.icon-before.primary-300,.icon.primary-300{--graupl-icon-color:var(--graupl-theme-active--primary--300,var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed)))}.icon-after.primary-400,.icon-before.primary-400,.icon.primary-400{--graupl-icon-color:var(--graupl-theme-active--primary--400,var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2)))}.icon-after.primary-500,.icon-before.primary-500,.icon.primary-500{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))}.icon-after.primary-600,.icon-before.primary-600,.icon.primary-600{--graupl-icon-color:var(--graupl-theme-active--primary--600,var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9)))}.icon-after.primary-700,.icon-before.primary-700,.icon.primary-700{--graupl-icon-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))}.icon-after.primary-800,.icon-before.primary-800,.icon.primary-800{--graupl-icon-color:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)))}.icon-after.primary-900,.icon-before.primary-900,.icon.primary-900{--graupl-icon-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))}.icon-after.secondary-100,.icon-before.secondary-100,.icon.secondary-100{--graupl-icon-color:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)))}.icon-after.secondary-200,.icon-before.secondary-200,.icon.secondary-200{--graupl-icon-color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))}.icon-after.secondary-300,.icon-before.secondary-300,.icon.secondary-300{--graupl-icon-color:var(--graupl-theme-active--secondary--300,var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8)))}.icon-after.secondary-400,.icon-before.secondary-400,.icon.secondary-400{--graupl-icon-color:var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))}.icon-after.secondary-500,.icon-before.secondary-500,.icon.secondary-500{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))}.icon-after.secondary-600,.icon-before.secondary-600,.icon.secondary-600{--graupl-icon-color:var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484)))}.icon-after.secondary-700,.icon-before.secondary-700,.icon.secondary-700{--graupl-icon-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)))}.icon-after.secondary-800,.icon-before.secondary-800,.icon.secondary-800{--graupl-icon-color:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)))}.icon-after.secondary-900,.icon-before.secondary-900,.icon.secondary-900{--graupl-icon-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)))}.icon-after.tertiary-100,.icon-before.tertiary-100,.icon.tertiary-100{--graupl-icon-color:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)))}.icon-after.tertiary-200,.icon-before.tertiary-200,.icon.tertiary-200{--graupl-icon-color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))}.icon-after.tertiary-300,.icon-before.tertiary-300,.icon.tertiary-300{--graupl-icon-color:var(--graupl-theme-active--tertiary--300,var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92)))}.icon-after.tertiary-400,.icon-before.tertiary-400,.icon.tertiary-400{--graupl-icon-color:var(--graupl-theme-active--tertiary--400,var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775)))}.icon-after.tertiary-500,.icon-before.tertiary-500,.icon.tertiary-500{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))}.icon-after.tertiary-600,.icon-before.tertiary-600,.icon.tertiary-600{--graupl-icon-color:var(--graupl-theme-active--tertiary--600,var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c)))}.icon-after.tertiary-700,.icon-before.tertiary-700,.icon.tertiary-700{--graupl-icon-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))}.icon-after.tertiary-800,.icon-before.tertiary-800,.icon.tertiary-800{--graupl-icon-color:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)))}.icon-after.tertiary-900,.icon-before.tertiary-900,.icon.tertiary-900{--graupl-icon-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)))}}
2
+ /*# sourceMappingURL=icon.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../../node_modules/@graupl/core/src/scss/mixins/_layer.scss","../../../src/scss/component/icon/_index.scss","../../../src/scss/component/icon/_mixins.scss","../../../src/scss/component/icon/_variables.scss","icon.css"],"names":[],"mappings":"AASI,wBCCF,MCDA,uBAAA,CADA,2BAAA,CAEA,uBAAA,CALA,+CCMa,CDJb,+DCUY,CDuBV,yLAAA,CA5BF,0CCOK,CDPL,kCCOK,CDJL,4BAAA,CAAA,oBAAA,CAFA,6BAAA,CAAA,qBAAA,CACA,yBAAA,CAAA,iBAAA,CAHA,kBAAA,CALA,6DEQA,CFUE,oBAIE,uGECJ,CFEE,sCAtBF,uBAAA,CADA,2BAAA,CAEA,uBAAA,CAiBI,UAAA,CAtBJ,+CCMa,CDJb,+DCUY,CDLZ,0CCOK,CDPL,kCCOK,CDJL,4BAAA,CAAA,oBAAA,CAFA,6BAAA,CAAA,qBAAA,CACA,yBAAA,CAAA,iBAAA,CAHA,kBAAA,CALA,6DEsCA,CFbE,kBAIE,yGESJ,CACF,CJpCI,oBEyCA,4CA/BF,0MEoCA,CHFM,mEACE,uIGMR,CHPM,mEACE,uIGWR,CHZM,mEACE,uIGgBR,CHjBM,mEACE,uIGqBR,CHtBM,mEACE,uIG0BR,CH3BM,mEACE,uIG+BR,CHhCM,mEACE,uIGoCR,CHrCM,mEACE,uIGyCR,CH1CM,mEACE,uIG8CR,CH/CM,yEACE,6IGmDR,CHpDM,yEACE,6IGwDR,CHzDM,yEACE,6IG6DR,CH9DM,yEACE,6IGkER,CHnEM,yEACE,6IGuER,CHxEM,yEACE,6IG4ER,CH7EM,yEACE,6IGiFR,CHlFM,yEACE,6IGsFR,CHvFM,yEACE,6IG2FR,CH5FM,sEACE,0IGgGR,CHjGM,sEACE,0IGqGR,CHtGM,sEACE,0IG0GR,CH3GM,sEACE,0IG+GR,CHhHM,sEACE,uIGoHR,CHrHM,sEACE,0IGyHR,CH1HM,sEACE,0IG8HR,CH/HM,sEACE,0IGmIR,CHpIM,sEACE,0IGwIR,CACF","file":"icon.css"}
@@ -0,0 +1,2 @@
1
+ @layer graupl.component{.icon{background-position:50%;background-repeat:no-repeat;background-size:contain;display:var(--graupl-icon-display,inline-block);height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));margin-inline:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))) var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)));-webkit-mask-image:var(--graupl-icon,none);mask-image:var(--graupl-icon,none);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;vertical-align:sub;width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em))}.icon-before:before{margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)))}.icon-after:after,.icon-before:before{background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:var(--graupl-icon-display,inline-block);height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));-webkit-mask-image:var(--graupl-icon,none);mask-image:var(--graupl-icon,none);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;vertical-align:sub;width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em))}.icon-after:after{margin-inline-start:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)))}}@layer graupl.theme{.icon,.icon-after:after,.icon-before:before{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}.icon-after.primary-100,.icon-before.primary-100,.icon.primary-100{--graupl-icon-color:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))}.icon-after.primary-200,.icon-before.primary-200,.icon.primary-200{--graupl-icon-color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))}.icon-after.primary-300,.icon-before.primary-300,.icon.primary-300{--graupl-icon-color:var(--graupl-theme-active--primary--300,var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed)))}.icon-after.primary-400,.icon-before.primary-400,.icon.primary-400{--graupl-icon-color:var(--graupl-theme-active--primary--400,var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2)))}.icon-after.primary-500,.icon-before.primary-500,.icon.primary-500{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))}.icon-after.primary-600,.icon-before.primary-600,.icon.primary-600{--graupl-icon-color:var(--graupl-theme-active--primary--600,var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9)))}.icon-after.primary-700,.icon-before.primary-700,.icon.primary-700{--graupl-icon-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))}.icon-after.primary-800,.icon-before.primary-800,.icon.primary-800{--graupl-icon-color:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)))}.icon-after.primary-900,.icon-before.primary-900,.icon.primary-900{--graupl-icon-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))}.icon-after.secondary-100,.icon-before.secondary-100,.icon.secondary-100{--graupl-icon-color:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)))}.icon-after.secondary-200,.icon-before.secondary-200,.icon.secondary-200{--graupl-icon-color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))}.icon-after.secondary-300,.icon-before.secondary-300,.icon.secondary-300{--graupl-icon-color:var(--graupl-theme-active--secondary--300,var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8)))}.icon-after.secondary-400,.icon-before.secondary-400,.icon.secondary-400{--graupl-icon-color:var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))}.icon-after.secondary-500,.icon-before.secondary-500,.icon.secondary-500{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))}.icon-after.secondary-600,.icon-before.secondary-600,.icon.secondary-600{--graupl-icon-color:var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484)))}.icon-after.secondary-700,.icon-before.secondary-700,.icon.secondary-700{--graupl-icon-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)))}.icon-after.secondary-800,.icon-before.secondary-800,.icon.secondary-800{--graupl-icon-color:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)))}.icon-after.secondary-900,.icon-before.secondary-900,.icon.secondary-900{--graupl-icon-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)))}.icon-after.tertiary-100,.icon-before.tertiary-100,.icon.tertiary-100{--graupl-icon-color:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)))}.icon-after.tertiary-200,.icon-before.tertiary-200,.icon.tertiary-200{--graupl-icon-color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))}.icon-after.tertiary-300,.icon-before.tertiary-300,.icon.tertiary-300{--graupl-icon-color:var(--graupl-theme-active--tertiary--300,var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92)))}.icon-after.tertiary-400,.icon-before.tertiary-400,.icon.tertiary-400{--graupl-icon-color:var(--graupl-theme-active--tertiary--400,var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775)))}.icon-after.tertiary-500,.icon-before.tertiary-500,.icon.tertiary-500{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))}.icon-after.tertiary-600,.icon-before.tertiary-600,.icon.tertiary-600{--graupl-icon-color:var(--graupl-theme-active--tertiary--600,var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c)))}.icon-after.tertiary-700,.icon-before.tertiary-700,.icon.tertiary-700{--graupl-icon-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))}.icon-after.tertiary-800,.icon-before.tertiary-800,.icon.tertiary-800{--graupl-icon-color:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)))}.icon-after.tertiary-900,.icon-before.tertiary-900,.icon.tertiary-900{--graupl-icon-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)))}}
2
+ /*# sourceMappingURL=component.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../node_modules/@graupl/core/src/scss/mixins/_layer.scss","../../src/scss/component/icon/_index.scss","../../src/scss/component/icon/_mixins.scss","../../src/scss/component/icon/_variables.scss","component.css"],"names":[],"mappings":"AASI,wBCCF,MCDA,uBAAA,CADA,2BAAA,CAEA,uBAAA,CALA,+CCMa,CDJb,+DCUY,CDuBV,yLAAA,CA5BF,0CCOK,CDPL,kCCOK,CDJL,4BAAA,CAAA,oBAAA,CAFA,6BAAA,CAAA,qBAAA,CACA,yBAAA,CAAA,iBAAA,CAHA,kBAAA,CALA,6DEQA,CFUE,oBAIE,uGECJ,CFEE,sCAtBF,uBAAA,CADA,2BAAA,CAEA,uBAAA,CAiBI,UAAA,CAtBJ,+CCMa,CDJb,+DCUY,CDLZ,0CCOK,CDPL,kCCOK,CDJL,4BAAA,CAAA,oBAAA,CAFA,6BAAA,CAAA,qBAAA,CACA,yBAAA,CAAA,iBAAA,CAHA,kBAAA,CALA,6DEsCA,CFbE,kBAIE,yGESJ,CACF,CJpCI,oBEyCA,4CA/BF,0MEoCA,CHFM,mEACE,uIGMR,CHPM,mEACE,uIGWR,CHZM,mEACE,uIGgBR,CHjBM,mEACE,uIGqBR,CHtBM,mEACE,uIG0BR,CH3BM,mEACE,uIG+BR,CHhCM,mEACE,uIGoCR,CHrCM,mEACE,uIGyCR,CH1CM,mEACE,uIG8CR,CH/CM,yEACE,6IGmDR,CHpDM,yEACE,6IGwDR,CHzDM,yEACE,6IG6DR,CH9DM,yEACE,6IGkER,CHnEM,yEACE,6IGuER,CHxEM,yEACE,6IG4ER,CH7EM,yEACE,6IGiFR,CHlFM,yEACE,6IGsFR,CHvFM,yEACE,6IG2FR,CH5FM,sEACE,0IGgGR,CHjGM,sEACE,0IGqGR,CHtGM,sEACE,0IG0GR,CH3GM,sEACE,0IG+GR,CHhHM,sEACE,uIGoHR,CHrHM,sEACE,0IGyHR,CH1HM,sEACE,0IG8HR,CH/HM,sEACE,0IGmIR,CHpIM,sEACE,0IGwIR,CACF","file":"component.css"}
@@ -0,0 +1,2 @@
1
+ @layer graupl.theme{.button{--graupl-icon-color:var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}.button.visited,.button:visited{--graupl-icon-color:var(--graupl-button-visited-color,var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))}.button.focus{--graupl-icon-color:var(--graupl-button-focus-color,var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))}.button:focus-visible{--graupl-icon-color:var(--graupl-button-focus-color,var(--graupl-button-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))}.button.hover,.button:hover{--graupl-icon-color:var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))))}.button.active,.button:active{--graupl-icon-color:var(--graupl-button-active-color,var(--graupl-button-hover-color,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))))))}.button.disabled,.button.disabled.focus,.button.disabled.visited,.button.disabled:visited{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button.disabled:focus-visible{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button.disabled.active,.button.disabled.disabled,.button.disabled.hover,.button.disabled:active,.button.disabled:disabled,.button.disabled:hover,.button.disabled[aria-disabled=true],.button.disabled[disabled],.button:disabled,.button:disabled.focus,.button:disabled.visited,.button:disabled:visited{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button:disabled:focus-visible{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button:disabled.active,.button:disabled.disabled,.button:disabled.hover,.button:disabled:active,.button:disabled:disabled,.button:disabled:hover,.button:disabled[aria-disabled=true],.button:disabled[disabled],.button[disabled],.button[disabled].focus,.button[disabled].visited,.button[disabled]:visited{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button[disabled]:focus-visible{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button[aria-disabled=true],.button[aria-disabled=true].focus,.button[aria-disabled=true].visited,.button[aria-disabled=true]:visited,.button[disabled].active,.button[disabled].disabled,.button[disabled].hover,.button[disabled]:active,.button[disabled]:disabled,.button[disabled]:hover,.button[disabled][aria-disabled=true],.button[disabled][disabled]{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button[aria-disabled=true]:focus-visible{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button[aria-disabled=true].active,.button[aria-disabled=true].disabled,.button[aria-disabled=true].hover,.button[aria-disabled=true]:active,.button[aria-disabled=true]:disabled,.button[aria-disabled=true]:hover,.button[aria-disabled=true][aria-disabled=true],.button[aria-disabled=true][disabled]{--graupl-icon-color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}a{--graupl-icon-color:var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))))}a.visited,a:visited{--graupl-icon-color:var(--graupl-link-visited-color,var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))))}a.focus{--graupl-icon-color:var(--graupl-link-focus-color,var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))))}}@layer graupl.theme{a:focus-visible{--graupl-icon-color:var(--graupl-link-focus-color,var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))))}a.hover,a:hover{--graupl-icon-color:var(--graupl-link-hover-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46))))}a.active,a:active{--graupl-icon-color:var(--graupl-link-active-color,var(--graupl-link-hover-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))))}a.disabled,a.disabled.focus,a.disabled.visited,a.disabled:visited{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}a.disabled:focus-visible{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}a.disabled.active,a.disabled.disabled,a.disabled.hover,a.disabled:active,a.disabled:disabled,a.disabled:hover,a.disabled[aria-disabled=true],a.disabled[disabled],a:disabled,a:disabled.focus,a:disabled.visited,a:disabled:visited{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}a:disabled:focus-visible{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}a:disabled.active,a:disabled.disabled,a:disabled.hover,a:disabled:active,a:disabled:disabled,a:disabled:hover,a:disabled[aria-disabled=true],a:disabled[disabled],a[disabled],a[disabled].focus,a[disabled].visited,a[disabled]:visited{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}a[disabled]:focus-visible{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}a[aria-disabled=true],a[aria-disabled=true].focus,a[aria-disabled=true].visited,a[aria-disabled=true]:visited,a[disabled].active,a[disabled].disabled,a[disabled].hover,a[disabled]:active,a[disabled]:disabled,a[disabled]:hover,a[disabled][aria-disabled=true],a[disabled][disabled]{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}a[aria-disabled=true]:focus-visible{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}a[aria-disabled=true].active,a[aria-disabled=true].disabled,a[aria-disabled=true].hover,a[aria-disabled=true]:active,a[aria-disabled=true]:disabled,a[aria-disabled=true]:hover,a[aria-disabled=true][aria-disabled=true],a[aria-disabled=true][disabled]{--graupl-icon-color:var(--graupl-link-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}}@layer graupl.component{.icon{background-position:50%;background-repeat:no-repeat;background-size:contain;display:var(--graupl-icon-display,inline-block);height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));margin-inline:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25))) var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)));-webkit-mask-image:var(--graupl-icon,none);mask-image:var(--graupl-icon,none);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;vertical-align:sub;width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em))}.icon-before:before{margin-inline-end:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)))}.icon-after:after,.icon-before:before{background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:var(--graupl-icon-display,inline-block);height:var(--graupl-icon-height,var(--graupl-icon-size,1.25em));-webkit-mask-image:var(--graupl-icon,none);mask-image:var(--graupl-icon,none);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;vertical-align:sub;width:var(--graupl-icon-width,var(--graupl-icon-size,1.25em))}.icon-after:after{margin-inline-start:var(--graupl-icon-spacer,var(--graupl-spacer-2,calc(var(--graupl-spacer, 1rem)*.25)))}}@layer graupl.theme{.icon,.icon-after:after,.icon-before:before{background-color:var(--graupl-icon-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))}.icon-after.primary-100,.icon-before.primary-100,.icon.primary-100{--graupl-icon-color:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))}.icon-after.primary-200,.icon-before.primary-200,.icon.primary-200{--graupl-icon-color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))}.icon-after.primary-300,.icon-before.primary-300,.icon.primary-300{--graupl-icon-color:var(--graupl-theme-active--primary--300,var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed)))}.icon-after.primary-400,.icon-before.primary-400,.icon.primary-400{--graupl-icon-color:var(--graupl-theme-active--primary--400,var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2)))}.icon-after.primary-500,.icon-before.primary-500,.icon.primary-500{--graupl-icon-color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))}.icon-after.primary-600,.icon-before.primary-600,.icon.primary-600{--graupl-icon-color:var(--graupl-theme-active--primary--600,var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9)))}.icon-after.primary-700,.icon-before.primary-700,.icon.primary-700{--graupl-icon-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))}.icon-after.primary-800,.icon-before.primary-800,.icon.primary-800{--graupl-icon-color:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)))}.icon-after.primary-900,.icon-before.primary-900,.icon.primary-900{--graupl-icon-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))}.icon-after.secondary-100,.icon-before.secondary-100,.icon.secondary-100{--graupl-icon-color:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)))}.icon-after.secondary-200,.icon-before.secondary-200,.icon.secondary-200{--graupl-icon-color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))}.icon-after.secondary-300,.icon-before.secondary-300,.icon.secondary-300{--graupl-icon-color:var(--graupl-theme-active--secondary--300,var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8)))}.icon-after.secondary-400,.icon-before.secondary-400,.icon.secondary-400{--graupl-icon-color:var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))}.icon-after.secondary-500,.icon-before.secondary-500,.icon.secondary-500{--graupl-icon-color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))}.icon-after.secondary-600,.icon-before.secondary-600,.icon.secondary-600{--graupl-icon-color:var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484)))}.icon-after.secondary-700,.icon-before.secondary-700,.icon.secondary-700{--graupl-icon-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)))}.icon-after.secondary-800,.icon-before.secondary-800,.icon.secondary-800{--graupl-icon-color:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)))}.icon-after.secondary-900,.icon-before.secondary-900,.icon.secondary-900{--graupl-icon-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)))}.icon-after.tertiary-100,.icon-before.tertiary-100,.icon.tertiary-100{--graupl-icon-color:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)))}.icon-after.tertiary-200,.icon-before.tertiary-200,.icon.tertiary-200{--graupl-icon-color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))}.icon-after.tertiary-300,.icon-before.tertiary-300,.icon.tertiary-300{--graupl-icon-color:var(--graupl-theme-active--tertiary--300,var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92)))}.icon-after.tertiary-400,.icon-before.tertiary-400,.icon.tertiary-400{--graupl-icon-color:var(--graupl-theme-active--tertiary--400,var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775)))}.icon-after.tertiary-500,.icon-before.tertiary-500,.icon.tertiary-500{--graupl-icon-color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))}.icon-after.tertiary-600,.icon-before.tertiary-600,.icon.tertiary-600{--graupl-icon-color:var(--graupl-theme-active--tertiary--600,var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c)))}.icon-after.tertiary-700,.icon-before.tertiary-700,.icon.tertiary-700{--graupl-icon-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))}.icon-after.tertiary-800,.icon-before.tertiary-800,.icon.tertiary-800{--graupl-icon-color:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)))}.icon-after.tertiary-900,.icon-before.tertiary-900,.icon.tertiary-900{--graupl-icon-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)))}}
2
+ /*# sourceMappingURL=icon.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../node_modules/@graupl/core/src/scss/mixins/_layer.scss","../../src/scss/base/button/_index.scss","icon.css","../../src/scss/base/link/_index.scss","../../src/scss/component/icon/_index.scss","../../src/scss/component/icon/_mixins.scss","../../src/scss/component/icon/_variables.scss"],"names":[],"mappings":"AASI,oBCkBF,QACE,+MCxBF,CD6BM,gCACE,kPCxBR,CDuBM,cACE,gPCrBR,CDoBM,sBACE,gPClBR,CDiBM,4BACE,+NCZR,CDWM,8BACE,iQCNR,CDgBc,0FACE,2KCLhB,CDIc,+BACE,2KCFhB,CDCc,4SACE,2KCkChB,CDnCc,+BACE,2KCqChB,CDtCc,gTACE,2KCyEhB,CD1Ec,gCACE,2KC4EhB,CD7Ec,gWACE,2KCgHhB,CDjHc,0CACE,2KCmHhB,CDpHc,0SACE,2KC2IhB,CC7JoC,EAClC,gKDiKF,CC5JM,oBACE,iMDiKR,CClKM,QACE,+LDoKR,CAbF,CFhLI,oBGwBI,gBACE,+LDuKR,CCxKM,gBACE,yKD6KR,CC9KM,kBACE,yMDmLR,CCzKc,kEACE,yKDoLhB,CCrLc,yBACE,yKDuLhB,CCxLc,oOACE,yKD2NhB,CC5Nc,yBACE,yKD8NhB,CC/Nc,wOACE,yKDkQhB,CCnQc,0BACE,yKDqQhB,CCtQc,wRACE,yKDyShB,CC1Sc,oCACE,yKD4ShB,CC7Sc,0PACE,yKDoUhB,CACF,CFzWI,wBICF,MCDA,uBAAA,CADA,2BAAA,CAEA,uBAAA,CALA,+CCMa,CDJb,+DCUY,CDuBV,yLAAA,CA5BF,0CCOK,CDPL,kCCOK,CDJL,4BAAA,CAAA,oBAAA,CAFA,6BAAA,CAAA,qBAAA,CACA,yBAAA,CAAA,iBAAA,CAHA,kBAAA,CALA,6DH2XA,CGzWE,oBAIE,uGHoXJ,CGjXE,sCAtBF,uBAAA,CADA,2BAAA,CAEA,uBAAA,CAiBI,UAAA,CAtBJ,+CCMa,CDJb,+DCUY,CDLZ,0CCOK,CDPL,kCCOK,CDJL,4BAAA,CAAA,oBAAA,CAFA,6BAAA,CAAA,qBAAA,CACA,yBAAA,CAAA,iBAAA,CAHA,kBAAA,CALA,6DHyZA,CGhYE,kBAIE,yGH4XJ,CACF,CFvZI,oBKyCA,4CA/BF,0MHuZA,CErXM,mEACE,uIFyXR,CE1XM,mEACE,uIF8XR,CE/XM,mEACE,uIFmYR,CEpYM,mEACE,uIFwYR,CEzYM,mEACE,uIF6YR,CE9YM,mEACE,uIFkZR,CEnZM,mEACE,uIFuZR,CExZM,mEACE,uIF4ZR,CE7ZM,mEACE,uIFiaR,CElaM,yEACE,6IFsaR,CEvaM,yEACE,6IF2aR,CE5aM,yEACE,6IFgbR,CEjbM,yEACE,6IFqbR,CEtbM,yEACE,6IF0bR,CE3bM,yEACE,6IF+bR,CEhcM,yEACE,6IFocR,CErcM,yEACE,6IFycR,CE1cM,yEACE,6IF8cR,CE/cM,sEACE,0IFmdR,CEpdM,sEACE,0IFwdR,CEzdM,sEACE,0IF6dR,CE9dM,sEACE,0IFkeR,CEneM,sEACE,uIFueR,CExeM,sEACE,0IF4eR,CE7eM,sEACE,0IFifR,CElfM,sEACE,0IFsfR,CEvfM,sEACE,0IF2fR,CACF","file":"icon.css"}
@@ -0,0 +1,48 @@
1
+ {
2
+ "name": "@graupl/icons",
3
+ "version": "1.0.0-beta.10",
4
+ "description": "A plugin for Graupl that provides bare-minimum icon components.",
5
+ "type": "module",
6
+ "files": [
7
+ "dist",
8
+ "scss",
9
+ "src"
10
+ ],
11
+ "exports": {
12
+ ".": {
13
+ "sass": "./scss/icon.scss"
14
+ },
15
+ "./*.scss": {
16
+ "sass": "./scss/*.scss"
17
+ },
18
+ "./src/*.scss": {
19
+ "sass": "./src/scss/*.scss"
20
+ }
21
+ },
22
+ "repository": {
23
+ "type": "git",
24
+ "url": "git+https://github.com/Graupl/graupl.git",
25
+ "directory": "packages/icons"
26
+ },
27
+ "keywords": [
28
+ "graupl"
29
+ ],
30
+ "author": "Nick Milton",
31
+ "contributors": [
32
+ {
33
+ "name": "Coldfront Labs Inc.",
34
+ "url": "https://coldfrontlabs.ca"
35
+ }
36
+ ],
37
+ "bugs": {
38
+ "url": "https://github.com/Graupl/graupl/issues"
39
+ },
40
+ "license": "ISC",
41
+ "homepage": "https://github.com/Graupl/graupl/tree/main/packages/icons#readme",
42
+ "devDependencies": {
43
+ "sass": "^1.89.2"
44
+ },
45
+ "dependencies": {
46
+ "@graupl/core": "*"
47
+ }
48
+ }
@@ -0,0 +1,3 @@
1
+ // @gruapl/icons button base.
2
+
3
+ @forward "../../src/scss/base/button";
@@ -0,0 +1,3 @@
1
+ // @gruapl/icons link base.
2
+
3
+ @forward "../../src/scss/base/link";
@@ -0,0 +1,3 @@
1
+ // @gruapl/icons base.
2
+
3
+ @forward "../src/scss/base";
@@ -0,0 +1,3 @@
1
+ // Graupl Icons Icon Component.
2
+
3
+ @forward "../../src/scss/component/icon";
@@ -0,0 +1,3 @@
1
+ // @gruapl/icons components.
2
+
3
+ @forward "../src/scss/component";
@@ -0,0 +1,3 @@
1
+ // @gruapl/icons.
2
+
3
+ @forward "../src/scss";
@@ -0,0 +1,4 @@
1
+ // @gruapl/icons styles.
2
+
3
+ @forward "base";
4
+ @forward "component";
@@ -0,0 +1,4 @@
1
+ // @gruapl/icons base styles.
2
+
3
+ @forward "button";
4
+ @forward "link";
@@ -0,0 +1,7 @@
1
+ // @graupl/icons button base default values.
2
+ //
3
+ // Generally, these should not be used directly when styling components 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.
@@ -0,0 +1,58 @@
1
+ // @gruapl/icons button base styles.
2
+ //
3
+ // This module provides icon component integration for the button component.
4
+ //
5
+ // It sets the `--graupl-icon-color` custom property to the appropriate `--graupl-button-color` property.
6
+ //
7
+ // The following selectors are generated by default:
8
+ // - `.button`: The button component.
9
+ //
10
+ // The following custom properties control the generated selectors:
11
+ // - N/A
12
+ //
13
+ // The following variables control the generated selectors:
14
+ // - N/A
15
+ //
16
+ // @example
17
+ // <button class="button icon-after">Button</button>
18
+
19
+ @use "pkg:@graupl/core/src/base/button/defaults" as button-defaults;
20
+ @use "pkg:@graupl/core/src/base/button/variables" as button;
21
+ @use "pkg:@graupl/core/src/defaults" as root-defaults;
22
+ @use "pkg:@graupl/core/src/mixins/layer" as *;
23
+ @use "sass:map";
24
+ @use "variables" as *;
25
+
26
+ @include layer(theme) {
27
+ // .button
28
+ #{button-defaults.$button-selector-base}#{button-defaults.$button-selector} {
29
+ --#{root-defaults.$prefix}icon-color: #{button.$button-color};
30
+
31
+ @each $state, $selectors in root-defaults.$state-selectors {
32
+ @each $selector in $selectors {
33
+ // e.g &:visited, &:focus-visible, &:hover, &:active, &:disabled
34
+ &#{$selector} {
35
+ --#{root-defaults.$prefix}icon-color: #{map.get(
36
+ button.$button-color-states,
37
+ $state
38
+ )};
39
+
40
+ // If the state is disabled, we want that to supersede all other states.
41
+ @if $state == "disabled" {
42
+ @each $sub-state, $sub-selectors in root-defaults.$state-selectors {
43
+ @each $sub-selector in $sub-selectors {
44
+ // e.g &:visited, &:focus-visible, &:hover, &:active
45
+ &#{$sub-selector} {
46
+ --#{root-defaults.$prefix}icon-color: #{map.get(
47
+ button.$button-color-states,
48
+ $state
49
+ )};
50
+ }
51
+ }
52
+ }
53
+ }
54
+ }
55
+ }
56
+ }
57
+ }
58
+ }
@@ -0,0 +1,7 @@
1
+ // @graupl/icons button base variables.
2
+ //
3
+ // These values are to be used to directly style components and provide a
4
+ // cleaner way to reference custom properties.
5
+
6
+ @use "defaults";
7
+ @use "pkg:@graupl/core/src/defaults" as root-defaults;
@@ -0,0 +1,7 @@
1
+ // @graupl/icons link base default values.
2
+ //
3
+ // Generally, these should not be used directly when styling components 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.
@@ -0,0 +1,58 @@
1
+ // @gruapl/icons link base styles.
2
+ //
3
+ // This module provides icon component integration for the link component.
4
+ //
5
+ // It sets the `--graupl-icon-color` custom property to the appropriate `--graupl-link-color` property.
6
+ //
7
+ // The following selectors are generated by default:
8
+ // - `a`: The link component.
9
+ //
10
+ // The following custom properties control the generated selectors:
11
+ // - N/A
12
+ //
13
+ // The following variables control the generated selectors:
14
+ // - N/A
15
+ //
16
+ // @example
17
+ // <a href="#" class="icon-after">Link</a>
18
+
19
+ @use "pkg:@graupl/core/src/base/link/defaults" as link-defaults;
20
+ @use "pkg:@graupl/core/src/base/link/variables" as link;
21
+ @use "pkg:@graupl/core/src/defaults" as root-defaults;
22
+ @use "pkg:@graupl/core/src/mixins/layer" as *;
23
+ @use "sass:map";
24
+ @use "variables" as *;
25
+
26
+ @include layer(theme) {
27
+ // a
28
+ #{link-defaults.$link-selector-base}#{link-defaults.$link-selector} {
29
+ --#{root-defaults.$prefix}icon-color: #{link.$link-color};
30
+
31
+ @each $state, $selectors in root-defaults.$state-selectors {
32
+ @each $selector in $selectors {
33
+ // e.g &:visited, &:focus-visible, &:hover, &:active, &:disabled
34
+ &#{$selector} {
35
+ --#{root-defaults.$prefix}icon-color: #{map.get(
36
+ link.$link-color-states,
37
+ $state
38
+ )};
39
+
40
+ // If the state is disabled, we want that to supersede all other states.
41
+ @if $state == "disabled" {
42
+ @each $sub-state, $sub-selectors in root-defaults.$state-selectors {
43
+ @each $sub-selector in $sub-selectors {
44
+ // e.g &:visited, &:focus-visible, &:hover, &:active
45
+ &#{$sub-selector} {
46
+ --#{root-defaults.$prefix}icon-color: #{map.get(
47
+ link.$link-color-states,
48
+ $state
49
+ )};
50
+ }
51
+ }
52
+ }
53
+ }
54
+ }
55
+ }
56
+ }
57
+ }
58
+ }
@@ -0,0 +1,7 @@
1
+ // @graupl/icons link base variables.
2
+ //
3
+ // These values are to be used to directly style components and provide a
4
+ // cleaner way to reference custom properties.
5
+
6
+ @use "defaults";
7
+ @use "pkg:@graupl/core/src/defaults" as root-defaults;
@@ -0,0 +1,3 @@
1
+ // @gruapl/icons component styles.
2
+
3
+ @forward "icon";