@graupl/core 1.0.0-beta.22 → 1.0.0-beta.24

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 (273) hide show
  1. package/dist/css/base/button.css +2 -2
  2. package/dist/css/base/button.css.map +1 -1
  3. package/dist/css/base/form.css +2 -2
  4. package/dist/css/base/form.css.map +1 -1
  5. package/dist/css/base/link.css +2 -2
  6. package/dist/css/base/link.css.map +1 -1
  7. package/dist/css/base/table.css +2 -2
  8. package/dist/css/base/table.css.map +1 -1
  9. package/dist/css/base.css +2 -2
  10. package/dist/css/base.css.map +1 -1
  11. package/dist/css/component/accordion.css +2 -5
  12. package/dist/css/component/accordion.css.map +1 -1
  13. package/dist/css/component/alert.css +2 -2
  14. package/dist/css/component/alert.css.map +1 -1
  15. package/dist/css/component/badge.css +2 -2
  16. package/dist/css/component/badge.css.map +1 -1
  17. package/dist/css/component/card.css +2 -2
  18. package/dist/css/component/card.css.map +1 -1
  19. package/dist/css/component/carousel.css +2 -2
  20. package/dist/css/component/carousel.css.map +1 -1
  21. package/dist/css/component/disclosure.css +2 -2
  22. package/dist/css/component/disclosure.css.map +1 -1
  23. package/dist/css/component/input-group.css +2 -2
  24. package/dist/css/component/input-group.css.map +1 -1
  25. package/dist/css/component/list.css +2 -2
  26. package/dist/css/component/list.css.map +1 -1
  27. package/dist/css/component/menu.css +2 -2
  28. package/dist/css/component/menu.css.map +1 -1
  29. package/dist/css/component/navigation.css +2 -2
  30. package/dist/css/component/navigation.css.map +1 -1
  31. package/dist/css/component.css +2 -5
  32. package/dist/css/component.css.map +1 -1
  33. package/dist/css/graupl.css +2 -5
  34. package/dist/css/graupl.css.map +1 -1
  35. package/dist/css/init.css +2 -2
  36. package/dist/css/init.css.map +1 -1
  37. package/dist/css/layout/columns.css +2 -2
  38. package/dist/css/layout/columns.css.map +1 -1
  39. package/dist/css/layout/container.css +2 -2
  40. package/dist/css/layout/container.css.map +1 -1
  41. package/dist/css/layout/flex-columns.css +2 -2
  42. package/dist/css/layout/flex-columns.css.map +1 -1
  43. package/dist/css/layout.css +2 -5
  44. package/dist/css/layout.css.map +1 -1
  45. package/dist/css/normalize.css +2 -2
  46. package/dist/css/normalize.css.map +1 -1
  47. package/dist/css/state/focus.css +2 -2
  48. package/dist/css/state/focus.css.map +1 -1
  49. package/dist/css/state.css +2 -2
  50. package/dist/css/state.css.map +1 -1
  51. package/dist/css/theme/color.css +2 -2
  52. package/dist/css/theme/color.css.map +1 -1
  53. package/dist/css/theme/typography.css +2 -2
  54. package/dist/css/theme/typography.css.map +1 -1
  55. package/dist/css/theme.css +2 -2
  56. package/dist/css/theme.css.map +1 -1
  57. package/dist/css/utilities/alignment.css +1 -1
  58. package/dist/css/utilities/alignment.css.map +1 -1
  59. package/dist/css/utilities/background.css +2 -2
  60. package/dist/css/utilities/background.css.map +1 -1
  61. package/dist/css/utilities/border.css +2 -2
  62. package/dist/css/utilities/border.css.map +1 -1
  63. package/dist/css/utilities/color.css +2 -2
  64. package/dist/css/utilities/color.css.map +1 -1
  65. package/dist/css/utilities/container.css +1 -1
  66. package/dist/css/utilities/container.css.map +1 -1
  67. package/dist/css/utilities/display.css +2 -2
  68. package/dist/css/utilities/display.css.map +1 -1
  69. package/dist/css/utilities/flex.css +2 -2
  70. package/dist/css/utilities/flex.css.map +1 -1
  71. package/dist/css/utilities/gradient.css +2 -2
  72. package/dist/css/utilities/gradient.css.map +1 -1
  73. package/dist/css/utilities/height.css +2 -2
  74. package/dist/css/utilities/height.css.map +1 -1
  75. package/dist/css/utilities/inset.css +2 -2
  76. package/dist/css/utilities/inset.css.map +1 -1
  77. package/dist/css/utilities/justification.css +1 -1
  78. package/dist/css/utilities/justification.css.map +1 -1
  79. package/dist/css/utilities/list.css +1 -1
  80. package/dist/css/utilities/list.css.map +1 -1
  81. package/dist/css/utilities/order.css +2 -2
  82. package/dist/css/utilities/order.css.map +1 -1
  83. package/dist/css/utilities/position.css +2 -2
  84. package/dist/css/utilities/position.css.map +1 -1
  85. package/dist/css/utilities/ratio.css +2 -2
  86. package/dist/css/utilities/ratio.css.map +1 -1
  87. package/dist/css/utilities/spacing.css +2 -2
  88. package/dist/css/utilities/spacing.css.map +1 -1
  89. package/dist/css/utilities/typography.css +2 -2
  90. package/dist/css/utilities/typography.css.map +1 -1
  91. package/dist/css/utilities/visibility.css +2 -2
  92. package/dist/css/utilities/visibility.css.map +1 -1
  93. package/dist/css/utilities/visually-hidden.css +2 -2
  94. package/dist/css/utilities/visually-hidden.css.map +1 -1
  95. package/dist/css/utilities/width.css +2 -2
  96. package/dist/css/utilities/width.css.map +1 -1
  97. package/dist/css/utilities/z-index.css +1 -1
  98. package/dist/css/utilities/z-index.css.map +1 -1
  99. package/dist/css/utilities.css +2 -2
  100. package/dist/css/utilities.css.map +1 -1
  101. package/dist/js/accordion.js.map +1 -1
  102. package/dist/js/alert.js.map +1 -1
  103. package/dist/js/carousel.js.map +1 -1
  104. package/dist/js/component/accordion.cjs.js.map +1 -1
  105. package/dist/js/component/accordion.es.js.map +1 -1
  106. package/dist/js/component/accordion.iife.js.map +1 -1
  107. package/dist/js/component/alert.cjs.js.map +1 -1
  108. package/dist/js/component/alert.es.js.map +1 -1
  109. package/dist/js/component/alert.iife.js.map +1 -1
  110. package/dist/js/component/carousel.cjs.js.map +1 -1
  111. package/dist/js/component/carousel.es.js.map +1 -1
  112. package/dist/js/component/carousel.iife.js.map +1 -1
  113. package/dist/js/component/disclosure.cjs.js +2 -2
  114. package/dist/js/component/disclosure.cjs.js.map +1 -1
  115. package/dist/js/component/disclosure.es.js +2 -2
  116. package/dist/js/component/disclosure.es.js.map +1 -1
  117. package/dist/js/component/disclosure.iife.js +2 -2
  118. package/dist/js/component/disclosure.iife.js.map +1 -1
  119. package/dist/js/component/tabs.cjs.js +5 -0
  120. package/dist/js/component/tabs.cjs.js.map +1 -0
  121. package/dist/js/component/tabs.es.js +5 -0
  122. package/dist/js/component/tabs.es.js.map +1 -0
  123. package/dist/js/component/tabs.iife.js +5 -0
  124. package/dist/js/component/tabs.iife.js.map +1 -0
  125. package/dist/js/disclosure.js +2 -2
  126. package/dist/js/disclosure.js.map +1 -1
  127. package/dist/js/generator/accordion.cjs.js.map +1 -1
  128. package/dist/js/generator/accordion.es.js.map +1 -1
  129. package/dist/js/generator/accordion.iife.js.map +1 -1
  130. package/dist/js/generator/alert.cjs.js.map +1 -1
  131. package/dist/js/generator/alert.es.js.map +1 -1
  132. package/dist/js/generator/alert.iife.js.map +1 -1
  133. package/dist/js/generator/carousel.cjs.js.map +1 -1
  134. package/dist/js/generator/carousel.es.js.map +1 -1
  135. package/dist/js/generator/carousel.iife.js.map +1 -1
  136. package/dist/js/generator/disclosure.cjs.js +2 -2
  137. package/dist/js/generator/disclosure.cjs.js.map +1 -1
  138. package/dist/js/generator/disclosure.es.js +2 -2
  139. package/dist/js/generator/disclosure.es.js.map +1 -1
  140. package/dist/js/generator/disclosure.iife.js +2 -2
  141. package/dist/js/generator/disclosure.iife.js.map +1 -1
  142. package/dist/js/generator/navigation.cjs.js.map +1 -1
  143. package/dist/js/generator/navigation.es.js.map +1 -1
  144. package/dist/js/generator/navigation.iife.js.map +1 -1
  145. package/dist/js/generator/tabs.cjs.js +5 -0
  146. package/dist/js/generator/tabs.cjs.js.map +1 -0
  147. package/dist/js/generator/tabs.es.js +5 -0
  148. package/dist/js/generator/tabs.es.js.map +1 -0
  149. package/dist/js/generator/tabs.iife.js +5 -0
  150. package/dist/js/generator/tabs.iife.js.map +1 -0
  151. package/dist/js/graupl.js +5 -5
  152. package/dist/js/graupl.js.map +1 -1
  153. package/dist/js/navigation.js.map +1 -1
  154. package/dist/js/tabs.js +5 -0
  155. package/dist/js/tabs.js.map +1 -0
  156. package/package.json +4 -3
  157. package/src/js/disclosure/Disclosure.js +25 -45
  158. package/src/js/domHelpers.js +39 -22
  159. package/src/js/tabs/TabToggle.js +378 -0
  160. package/src/js/tabs/Tabs.js +1091 -0
  161. package/src/js/tabs/generator.js +32 -0
  162. package/src/js/tabs/index.js +5 -0
  163. package/src/scss/_defaults.scss +21 -88
  164. package/src/scss/_variables.scss +70 -0
  165. package/src/scss/base/button/_defaults.scss +2 -24
  166. package/src/scss/base/button/_index.scss +53 -52
  167. package/src/scss/base/button/_mixins.scss +24 -58
  168. package/src/scss/base/button/_variables.scss +139 -0
  169. package/src/scss/base/form/_defaults.scss +72 -2
  170. package/src/scss/base/form/_index.scss +196 -70
  171. package/src/scss/base/form/_variables.scss +166 -0
  172. package/src/scss/base/link/_defaults.scss +31 -0
  173. package/src/scss/base/link/_index.scss +177 -172
  174. package/src/scss/base/link/_variables.scss +215 -0
  175. package/src/scss/base/table/_defaults.scss +1 -11
  176. package/src/scss/base/table/_index.scss +126 -117
  177. package/src/scss/base/table/_variables.scss +214 -3
  178. package/src/scss/component/_index.scss +1 -0
  179. package/src/scss/component/accordion/_defaults.scss +73 -22
  180. package/src/scss/component/accordion/_index.scss +437 -62
  181. package/src/scss/component/accordion/_variables.scss +527 -101
  182. package/src/scss/component/alert/_defaults.scss +23 -32
  183. package/src/scss/component/alert/_index.scss +236 -30
  184. package/src/scss/component/alert/_variables.scss +155 -6
  185. package/src/scss/component/badge/_defaults.scss +1 -0
  186. package/src/scss/component/badge/_index.scss +25 -28
  187. package/src/scss/component/badge/_variables.scss +66 -2
  188. package/src/scss/component/card/_defaults.scss +64 -13
  189. package/src/scss/component/card/_index.scss +276 -30
  190. package/src/scss/component/card/_variables.scss +132 -0
  191. package/src/scss/component/carousel/_defaults.scss +73 -15
  192. package/src/scss/component/carousel/_index.scss +357 -41
  193. package/src/scss/component/carousel/_variables.scss +391 -0
  194. package/src/scss/component/disclosure/_index.scss +4 -4
  195. package/src/scss/component/disclosure/_variables.scss +127 -2
  196. package/src/scss/component/input-group/_defaults.scss +10 -3
  197. package/src/scss/component/input-group/_index.scss +72 -4
  198. package/src/scss/component/input-group/_variables.scss +37 -0
  199. package/src/scss/component/list/_defaults.scss +35 -2
  200. package/src/scss/component/list/_index.scss +159 -5
  201. package/src/scss/component/list/_variables.scss +152 -0
  202. package/src/scss/component/menu/_defaults.scss +49 -7
  203. package/src/scss/component/menu/_index.scss +325 -99
  204. package/src/scss/component/menu/_variables.scss +484 -1
  205. package/src/scss/component/navigation/_defaults.scss +45 -3
  206. package/src/scss/component/navigation/_index.scss +249 -98
  207. package/src/scss/component/navigation/_variables.scss +334 -5
  208. package/src/scss/component/tabs/_defaults.scss +82 -0
  209. package/src/scss/component/tabs/_index.scss +497 -0
  210. package/src/scss/component/tabs/_variables.scss +974 -0
  211. package/src/scss/layout/columns/_defaults.scss +5 -3
  212. package/src/scss/layout/columns/_index.scss +27 -21
  213. package/src/scss/layout/columns/_variables.scss +13 -0
  214. package/src/scss/layout/container/_defaults.scss +28 -11
  215. package/src/scss/layout/container/_index.scss +305 -161
  216. package/src/scss/layout/container/_variables.scss +148 -15
  217. package/src/scss/layout/flex-columns/_defaults.scss +5 -3
  218. package/src/scss/layout/flex-columns/_index.scss +28 -20
  219. package/src/scss/layout/flex-columns/_variables.scss +9 -0
  220. package/src/scss/mixins/_state.scss +37 -0
  221. package/src/scss/mixins/_theme.scss +36 -1
  222. package/src/scss/state/focus/_index.scss +17 -12
  223. package/src/scss/state/focus/_variables.scss +30 -4
  224. package/src/scss/theme/color/_defaults.scss +6 -35
  225. package/src/scss/theme/color/_index.scss +167 -1
  226. package/src/scss/theme/color/_variables.scss +155 -0
  227. package/src/scss/theme/typography/_defaults.scss +26 -19
  228. package/src/scss/theme/typography/_index.scss +176 -20
  229. package/src/scss/theme/typography/_variables.scss +186 -0
  230. package/src/scss/utilities/_template/_index.scss +0 -1
  231. package/src/scss/utilities/alignment/_defaults.scss +0 -33
  232. package/src/scss/utilities/alignment/_index.scss +24 -25
  233. package/src/scss/utilities/background/_defaults.scss +0 -77
  234. package/src/scss/utilities/background/_index.scss +32 -37
  235. package/src/scss/utilities/border/_defaults.scss +0 -33
  236. package/src/scss/utilities/border/_index.scss +25 -26
  237. package/src/scss/utilities/color/_defaults.scss +0 -19
  238. package/src/scss/utilities/color/_index.scss +22 -22
  239. package/src/scss/utilities/container/_defaults.scss +0 -11
  240. package/src/scss/utilities/container/_index.scss +20 -19
  241. package/src/scss/utilities/display/_defaults.scss +0 -11
  242. package/src/scss/utilities/display/_index.scss +20 -19
  243. package/src/scss/utilities/flex/_defaults.scss +0 -55
  244. package/src/scss/utilities/flex/_index.scss +28 -31
  245. package/src/scss/utilities/gradient/_defaults.scss +0 -28
  246. package/src/scss/utilities/gradient/_index.scss +27 -28
  247. package/src/scss/utilities/gradient/_variables.scss +15 -0
  248. package/src/scss/utilities/height/_defaults.scss +0 -8
  249. package/src/scss/utilities/height/_index.scss +22 -21
  250. package/src/scss/utilities/inset/_defaults.scss +0 -16
  251. package/src/scss/utilities/inset/_index.scss +20 -20
  252. package/src/scss/utilities/justification/_defaults.scss +0 -33
  253. package/src/scss/utilities/justification/_index.scss +24 -25
  254. package/src/scss/utilities/list/_defaults.scss +0 -22
  255. package/src/scss/utilities/list/_index.scss +22 -22
  256. package/src/scss/utilities/order/_defaults.scss +0 -8
  257. package/src/scss/utilities/order/_index.scss +20 -19
  258. package/src/scss/utilities/position/_defaults.scss +0 -11
  259. package/src/scss/utilities/position/_index.scss +20 -19
  260. package/src/scss/utilities/ratio/_defaults.scss +0 -8
  261. package/src/scss/utilities/ratio/_index.scss +22 -21
  262. package/src/scss/utilities/ratio/_variables.scss +6 -0
  263. package/src/scss/utilities/spacing/_defaults.scss +0 -11
  264. package/src/scss/utilities/spacing/_index.scss +18 -17
  265. package/src/scss/utilities/typography/_defaults.scss +0 -22
  266. package/src/scss/utilities/typography/_index.scss +27 -26
  267. package/src/scss/utilities/visibility/_defaults.scss +0 -11
  268. package/src/scss/utilities/visibility/_index.scss +19 -18
  269. package/src/scss/utilities/visually-hidden/_index.scss +19 -17
  270. package/src/scss/utilities/width/_defaults.scss +0 -8
  271. package/src/scss/utilities/width/_index.scss +21 -20
  272. package/src/scss/utilities/z-index/_defaults.scss +0 -11
  273. package/src/scss/utilities/z-index/_index.scss +19 -18
package/src/scss/base/link/_index.scss CHANGED
@@ -8,100 +8,157 @@
8
8
  // - `a`: The link component.
9
9
  // - `.stretched`: A component modifier that makes the link component stretch to fill nearest relative container.
10
10
  //
11
- // The following custom properties control the generated selectors:
12
- // - `--graupl-link-text-decoration`: The text decoration for the link component.
13
- // - `--graupl-link-visited-text-decoration`: The text decoration for a visited link component.
14
- // - `--graupl-link-focus-text-decoration`: The text decoration for a focused link component.
15
- // - `--graupl-link-hover-text-decoration`: The text decoration for a hovered link component.
16
- // - `--graupl-link-active-text-decoration`: The text decoration for an active link component.
17
- // - `--graupl-link-disabled-text-decoration`: The text decoration for a disabled link component.
18
- // - `--graupl-link-text-decoration-thickness`: The text decoration thickness for the link component.
19
- // - `--graupl-link-visited-text-decoration-thickness`: The text decoration thickness for a visited link component.
20
- // - `--graupl-link-focus-text-decoration-thickness`: The text decoration thickness for a focused link component.
21
- // - `--graupl-link-hover-text-decoration-thickness`: The text decoration thickness for a hovered link component.
22
- // - `--graupl-link-active-text-decoration-thickness`: The text decoration thickness for an active link component.
23
- // - `--graupl-link-disabled-text-decoration-thickness`: The text decoration thickness for a disabled link component.
24
- // - `--graupl-link-text-decoration-style`: The text decoration style for the link component.
25
- // - `--graupl-link-visited-text-decoration-style`: The text decoration style for a visited link component.
26
- // - `--graupl-link-focus-text-decoration-style`: The text decoration style for a focused link component.
27
- // - `--graupl-link-hover-text-decoration-style`: The text decoration style for a hovered link component.
28
- // - `--graupl-link-active-text-decoration-style`: The text decoration style for an active link component.
29
- // - `--graupl-link-disabled-text-decoration-style`: The text decoration style for a disabled link component.
30
- // - `--graupl-link-color`: The color for the link component.
31
- // - `--graupl-link-visited-color`: The color for a visited link component.
32
- // - `--graupl-link-focus-color`: The color for a focused link component.
33
- // - `--graupl-link-hover-color`: The color for a hovered link component.
34
- // - `--graupl-link-active-color`: The color for an active link component.
35
- // - `--graupl-link-disabled-color`: The color for a disabled link component.
36
- // - `--graupl-link-text-decoration-color`: The text decoration color for the link component.
37
- // - `--graupl-link-visited-text-decoration-color`: The text decoration color for a visited link component.
38
- // - `--graupl-link-focus-text-decoration-color`: The text decoration color for a focused link component.
39
- // - `--graupl-link-hover-text-decoration-color`: The text decoration color for a hovered link component.
40
- // - `--graupl-link-active-text-decoration-color`: The text decoration color for an active link component.
41
- // - `--graupl-link-disabled-text-decoration-color`: The text decoration color for a disabled link component.
42
- // - `--graupl-link-background`: The background color for the link component.
43
- // - `--graupl-link-visited-background`: The background color for a visited link component.
44
- // - `--graupl-link-focus-background`: The background color for a focused link component.
45
- // - `--graupl-link-hover-background`: The background color for a hovered link component.
46
- // - `--graupl-link-active-background`: The background color for an active link component.
47
- // - `--graupl-link-disabled-background`: The background color for a disabled link component.
48
- // - `--graupl-link-padding-x`: The horizontal padding for the link component.
49
- // - `--graupl-link-padding-y`: The vertical padding for the link component.
50
- // - `--graupl-link-padding`: The padding for the link component (combines x and y padding).
51
- // - `--graupl-link-transition`: The transition for the link component.
52
- // - `--graupl-link-transition-reduced-motion`: The transition for the link component when reduced motion is enabled.
53
- // - `--graupl-link-transform`: The transform for the link component.
54
- // - `--graupl-link-transform-visited`: The transform for a visited link component.
55
- // - `--graupl-link-transform-focus`: The transform for a focused link component.
56
- // - `--graupl-link-transform-hover`: The transform for a hovered link component.
57
- // - `--graupl-link-transform-active`: The transform for an active link component.
58
- // - `--graupl-link-transform-disabled`: The transform for a disabled link component.
59
- // - `--graupl-link-border-top-width`: The top border width for the link component.
60
- // - `--graupl-link-border-right-width`: The right border width for the link component.
61
- // - `--graupl-link-border-bottom-width`: The bottom border width for the link component.
62
- // - `--graupl-link-border-left-width`: The left border width for the link component.
63
- // - `--graupl-link-border-width`: The border width for the link component (combines top, right, bottom, and left widths).
64
- // - `--graupl-link-border-top-style`: The top border style for the link component.
65
- // - `--graupl-link-border-right-style`: The right border style for the link component.
66
- // - `--graupl-link-border-bottom-style`: The bottom border style for the link component.
67
- // - `--graupl-link-border-left-style`: The left border style for the link component.
68
- // - `--graupl-link-border-style`: The border style for the link component (combines top, right, bottom, and left styles).
69
- // - `--graupl-link-border-top-left-radius`: The top left border radius for the link component.
70
- // - `--graupl-link-border-top-right-radius`: The top right border radius for the link component.
71
- // - `--graupl-link-border-bottom-right-radius`: The bottom right border radius for the link component.
72
- // - `--graupl-link-border-bottom-left-radius`: The bottom left border radius for the link component.
73
- // - `--graupl-link-border-radius`: The border radius for the link component (combines top-left, top-right, bottom-right, and bottom-left radii).
74
- // - `--graupl-link-border-color`: The border color for the link component.
75
- // - `--graupl-link-visited-border-color`: The border color for a visited link component.
76
- // - `--graupl-link-focus-border-color`: The border color for a focused link component.
77
- // - `--graupl-link-hover-border-color`: The border color for a hovered link component.
78
- // - `--graupl-link-active-border-color`: The border color for an active link component.
79
- // - `--graupl-link-disabled-border-color`: The border color for a disabled link component.
80
- // - `--graupl-link-min-width`: The minimum width for the link component.
81
- // - `--graupl-link-min-height`: The minimum height for the link component.
82
- // - `--graupl-link-stretched-link-z-index`: The z-index for the stretched link component modifier.
83
- //
84
- // The following variables control the generated selectors:
85
- // - `$selector-base`: The selector base for the component.
86
- // - `$modifier-selector-base`: The selector base for component modifiers.
87
- // - `$link-selector-base`: The base selector for the link component.
88
- // - `$link-selector`: The selector for the link component.
89
- // - `$stretched-link-selector-base`: The base selector for the stretched link component modifier.
90
- // - `$stretched-link-selector`: The selector for the stretched link component modifier.
91
- // - `$stretched-link-pseudo-selector`: The pseudo selector for the stretched link component modifier.
92
- // - `$link-initial-text-decoration`: The initial text decoration for the link component.
93
- // - `$link-final-text-decoration`: The final text decoration for the link component.
94
- // - `$link-disabled-text-decoration`: The disabled text decoration for the link component.
95
- // - `$link-initial-text-decoration-style`: The initial text decoration style for the link component.
96
- // - `$link-final-text-decoration-style`: The final text decoration style for the link component.
97
- // - `$link-disabled-text-decoration-style`: The disabled text decoration style for the link component.
98
- // - `$link-initial-transform`: The initial transform for the link component.
99
- // - `$link-final-transform`: The final transform for the link component.
100
- // - `$link-disabled-transform`: The disabled transform for the link component.
101
- // - `$link-border-width`: The border width for the link component.
102
- // - `$link-min-width`: The minimum width for the link component.
103
- // - `$link-min-height`: The minimum height for the link component.
104
- // - `$stretched-link-z-index`: The z-index for the stretched link component modifier.
11
+ // The following custom properties can be used to customize the link component:
12
+ // | Property | Description | Default Value |
13
+ // | --- | --- | --- |
14
+ // | `--graupl-link-text-decoration` | The text decoration for the link component. | `underline` |
15
+ // | `--graupl-link-visited-text-decoration` | The text decoration for a visited link component. | `var(--graupl-link-text-decoration)` |
16
+ // | `--graupl-link-focus-text-decoration` | The text decoration for a focused link component. | `var(--graupl-link-text-decoration)` |
17
+ // | `--graupl-link-hover-text-decoration` | The text decoration for a hovered link component. | `underline` |
18
+ // | `--graupl-link-active-text-decoration` | The text decoration for an active link component. | `var(--graupl-link-hover-text-decoration)` |
19
+ // | `--graupl-link-disabled-text-decoration` | The text decoration for a disabled link component. | `underline` |
20
+ // | `--graupl-link-text-decoration-thickness` | The text decoration thickness for the link component. | `var(--graupl-border-width)` |
21
+ // | `--graupl-link-visited-text-decoration-thickness` | The text decoration thickness for a visited link component. | `var(--graupl-link-text-decoration-thickness)` |
22
+ // | `--graupl-link-focus-text-decoration-thickness` | The text decoration thickness for a focused link component. | `var(--graupl-link-text-decoration-thickness)` |
23
+ // | `--graupl-link-hover-text-decoration-thickness` | The text decoration thickness for a hovered link component. | `var(--graupl-border-width)` |
24
+ // | `--graupl-link-active-text-decoration-thickness` | The text decoration thickness for an active link component. | `var(--graupl-link-hover-text-decoration-thickness)` |
25
+ // | `--graupl-link-disabled-text-decoration-thickness` | The text decoration thickness for a disabled link component. | `var(--graupl-border-width)` |
26
+ // | `--graupl-link-text-decoration-style` | The text decoration style for the link component. | `solid` |
27
+ // | `--graupl-link-visited-text-decoration-style` | The text decoration style for a visited link component. | `var(--graupl-link-text-decoration-style)` |
28
+ // | `--graupl-link-focus-text-decoration-style` | The text decoration style for a focused link component. | `var(--graupl-link-text-decoration-style)` |
29
+ // | `--graupl-link-hover-text-decoration-style` | The text decoration style for a hovered link component. | `solid` |
30
+ // | `--graupl-link-active-text-decoration-style` | The text decoration style for an active link component. | `var(--graupl-link-hover-text-decoration-style)` |
31
+ // | `--graupl-link-disabled-text-decoration-style` | The text decoration style for a disabled link component. | `solid` |
32
+ // | `--graupl-link-color` | The color for the link component. | `var(--graupl-theme-active--primary--700)` |
33
+ // | `--graupl-link-visited-color` | The color for a visited link component. | `var(--graupl-link-color)` |
34
+ // | `--graupl-link-focus-color` | The color for a focused link component. | `var(--graupl-link-color)` |
35
+ // | `--graupl-link-hover-color` | The color for a hovered link component. | `var(--graupl-theme-active--tertiary--700)` |
36
+ // | `--graupl-link-active-color` | The color for an active link component. | `var(--graupl-link-hover-color)` |
37
+ // | `--graupl-link-disabled-color` | The color for a disabled link component. | `var(--graupl-theme-active--primary--200)` |
38
+ // | `--graupl-link-text-decoration-color` | The text decoration color for the link component. | `var(--graupl-link-color)` |
39
+ // | `--graupl-link-visited-text-decoration-color` | The text decoration color for a visited link component. | `var(--graupl-link-visited-color)` |
40
+ // | `--graupl-link-focus-text-decoration-color` | The text decoration color for a focused link component. | `var(--graupl-link-focus-color)` |
41
+ // | `--graupl-link-hover-text-decoration-color` | The text decoration color for a hovered link component. | `var(--graupl-link-hover-color)` |
42
+ // | `--graupl-link-active-text-decoration-color` | The text decoration color for an active link component. | `var(--graupl-link-active-color)` |
43
+ // | `--graupl-link-disabled-text-decoration-color` | The text decoration color for a disabled link component. | `var(--graupl-link-disabled-color)` |
44
+ // | `--graupl-link-background` | The background color for the link component. | `transparent` |
45
+ // | `--graupl-link-visited-background` | The background color for a visited link component. | `var(--graupl-link-background)` |
46
+ // | `--graupl-link-focus-background` | The background color for a focused link component. | `var(--graupl-link-background)` |
47
+ // | `--graupl-link-hover-background` | The background color for a hovered link component. | `transparent` |
48
+ // | `--graupl-link-active-background` | The background color for an active link component. | `var(--graupl-link-hover-background)` |
49
+ // | `--graupl-link-disabled-background` | The background color for a disabled link component. | `transparent` |
50
+ // | `--graupl-link-padding-x` | The horizontal padding for the link component. | `var(--graupl-spacer-0)` |
51
+ // | `--graupl-link-padding-y` | The vertical padding for the link component. | `var(--graupl-spacer-0)` |
52
+ // | `--graupl-link-padding` | The padding for the link component (combines x and y padding). | `var(--graupl-link-padding-y) var(--graupl-link-padding-x)` |
53
+ // | `--graupl-link-transition` | The transition for the link component. | `background var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function), color var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function), transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function)` |
54
+ // | `--graupl-link-transition-reduced-motion` | The transition for the link component when reduced motion is enabled. | `background var(--graupl-transition-duration-none) var(--graupl-transition-timing-function), color var(--graupl-transition-duration-none) var(--graupl-transition-timing-function)` |
55
+ // | `--graupl-link-transform` | The transform for the link component. | `none` |
56
+ // | `--graupl-link-visited-transform` | The transform for a visited link component. | `var(--graupl-link-transform)` |
57
+ // | `--graupl-link-focus-transform` | The transform for a focused link component. | `var(--graupl-link-transform)` |
58
+ // | `--graupl-link-hover-transform` | The transform for a hovered link component. | `none` |
59
+ // | `--graupl-link-active-transform` | The transform for an active link component. | `var(--graupl-link-hover-transform)` |
60
+ // | `--graupl-link-disabled-transform` | The transform for a disabled link component. | `none` |
61
+ // | `--graupl-link-border-top-width` | The top border width for the link component. | `0` |
62
+ // | `--graupl-link-border-right-width` | The right border width for the link component. | `0` |
63
+ // | `--graupl-link-border-bottom-width` | The bottom border width for the link component. | `0` |
64
+ // | `--graupl-link-border-left-width` | The left border width for the link component. | `0` |
65
+ // | `--graupl-link-border-width` | The border width for the link component (combines top, right, bottom, and left widths). | `var(--graupl-link-border-top-width) var(--graupl-link-border-right-width) var(--graupl-link-border-bottom-width) var(--graupl-link-border-left-width)` |
66
+ // | `--graupl-link-border-top-style` | The top border style for the link component. | `var(--graupl-border-top-style)` |
67
+ // | `--graupl-link-border-right-style` | The right border style for the link component. | `var(--graupl-border-right-style)` |
68
+ // | `--graupl-link-border-bottom-style` | The bottom border style for the link component. | `var(--graupl-border-bottom-style)` |
69
+ // | `--graupl-link-border-left-style` | The left border style for the link component. | `var(--graupl-border-left-style)` |
70
+ // | `--graupl-link-border-style` | The border style for the link component (combines top, right, bottom, and left styles). | `var(--graupl-link-border-top-style) var(--graupl-link-border-right-style) var(--graupl-link-border-bottom-style) var(--graupl-link-border-left-style)` |
71
+ // | `--graupl-link-border-top-left-radius` | The top left border radius for the link component. | `var(--graupl-border-top-left-radius)` |
72
+ // | `--graupl-link-border-top-right-radius` | The top right border radius for the link component. | `var(--graupl-border-top-right-radius)` |
73
+ // | `--graupl-link-border-bottom-right-radius` | The bottom right border radius for the link component. | `var(--graupl-border-bottom-right-radius)` |
74
+ // | `--graupl-link-border-bottom-left-radius` | The bottom left border radius for the link component. | `var(--graupl-border-bottom-left-radius)` |
75
+ // | `--graupl-link-border-radius` | The border radius for the link component (combines top-left, top-right, bottom-right, and bottom-left radii). | `var(--graupl-link-border-top-left-radius) var(--graupl-link-border-top-right-radius) var(--graupl-link-border-bottom-right-radius) var(--graupl-link-border-bottom-left-radius)` |
76
+ // | `--graupl-link-border-color` | The border color for the link component. | `transparent` |
77
+ // | `--graupl-link-visited-border-color` | The border color for a visited link component. | `var(--graupl-link-border-color)` |
78
+ // | `--graupl-link-focus-border-color` | The border color for a focused link component. | `var(--graupl-link-border-color)` |
79
+ // | `--graupl-link-hover-border-color` | The border color for a hovered link component. | `transparent` |
80
+ // | `--graupl-link-active-border-color` | The border color for an active link component. | `var(--graupl-link-hover-border-color)` |
81
+ // | `--graupl-link-disabled-border-color` | The border color for a disabled link component. | `transparent` |
82
+ // | `--graupl-link-min-width` | The minimum width for the link component. | `auto` |
83
+ // | `--graupl-link-min-height` | The minimum height for the link component. | `auto` |
84
+ // | `--graupl-link-stretched-link-z-index` | The z-index for the stretched link component modifier. | `5` |
85
+ //
86
+ // The following sass variables can be used to customize the generation of the link component:
87
+ // | Variable | Description | Default Value |
88
+ // | -------------------------------------- | -------------------------------------------------------------- | ------------------------------------- |
89
+ // | `$selector-base` | The selector base for the component. | `""` |
90
+ // | `$modifier-selector-base` | The selector base for component modifiers. | `"."` |
91
+ // | `$generate-base-theme-map` | Flag to generate the base theme maps for link variants. | `true` |
92
+ // | `$themeable` | Flag to generate theme modifiers. | `false` |
93
+ // | `$link-selector-base` | The base selector for the link component. | `$selector-base` |
94
+ // | `$link-selector` | The selector for the link component. | `"a"` |
95
+ // | `$link-theme-prefix-selector-base` | Selector base used for link theme modifiers. | `$modifier-selector-base` |
96
+ // | `$link-theme-prefix-selector` | Selector prefix used for link theme modifiers. | `""` |
97
+ // | `$stretched-link-selector-base` | The base selector for the stretched link component modifier. | `$modifier-selector-base` |
98
+ // | `$stretched-link-selector` | The selector for the stretched link component modifier. | `"stretched"` |
99
+ // | `$stretched-link-pseudo-selector` | The pseudo selector for the stretched link component modifier. | `"before"` |
100
+ // | `$link-initial-text-decoration` | The initial text decoration for the link component. | `underline` |
101
+ // | `$link-final-text-decoration` | The final text decoration for the link component. | `$link-initial-text-decoration` |
102
+ // | `$link-disabled-text-decoration` | The disabled text decoration for the link component. | `$link-initial-text-decoration` |
103
+ // | `$link-initial-text-decoration-style` | The initial text decoration style for the link component. | `solid` |
104
+ // | `$link-final-text-decoration-style` | The final text decoration style for the link component. | `$link-initial-text-decoration-style` |
105
+ // | `$link-disabled-text-decoration-style` | The disabled text decoration style for the link component. | `$link-initial-text-decoration-style` |
106
+ // | `$link-initial-transform` | The initial transform for the link component. | `none` |
107
+ // | `$link-final-transform` | The final transform for the link component. | `$link-initial-transform` |
108
+ // | `$link-disabled-transform` | The disabled transform for the link component. | `$link-initial-transform` |
109
+ // | `$link-border-width` | The border width for the link component. | `0` |
110
+ // | `$link-min-width` | The minimum width for the link component. | `auto` |
111
+ // | `$link-min-height` | The minimum height for the link component. | `auto` |
112
+ // | `$stretched-link-z-index` | The z-index for the stretched link component modifier. | `5` |
113
+ // | `$link-theme-mappings` | Map of properties and shade values applied to themed links. | `()` |
114
+ // | `$link-theme-map` | Fully expanded property map used to generate themed links. | `()` |
115
+ //
116
+ // ## Using `$link-theme-mappings`
117
+ //
118
+ // `$link-theme-mappings` is a single-level map of properties and shade values.
119
+ //
120
+ // e.g.
121
+ // ```scss
122
+ // $link-theme-mappings: (
123
+ // color: 700,
124
+ // hover-color: 400,
125
+ // disabled-color: 200,
126
+ // );
127
+ // ```
128
+ //
129
+ // This directly[1] informs all link variants what shade to use for each property key.
130
+ // Based on the example above:
131
+ // - Primary links expose `--graupl-link-color`, `--graupl-link-hover-color`, and `--graupl-link-disabled-color` as `var(--graupl-theme-active--primary--700/400/200)`,
132
+ // - Secondary links expose those properties via the secondary palette, and
133
+ // - Tertiary links expose those properties via the tertiary palette.
134
+ //
135
+ // You can tailor the behaviour by specifying additional properties (e.g. `text-decoration-color`, `background`) to keep variants in sync.
136
+ //
137
+ // [1] `$link-theme-mappings` gets parsed into a larger, more explicit map: `$link-theme-map`.
138
+ //
139
+ // ## Using `$link-theme-map`
140
+ //
141
+ // `$link-theme-map` is a multi-level map of properties, colours, and shade values, allowing you to override individual variants without affecting the others.
142
+ //
143
+ // e.g.
144
+ // ```scss
145
+ // $link-theme-map: (
146
+ // primary: (
147
+ // color: (
148
+ // color: primary,
149
+ // shade: 900,
150
+ // ),
151
+ // ),
152
+ // secondary: (
153
+ // hover-color: (
154
+ // color: secondary,
155
+ // shade: 300,
156
+ // ),
157
+ // ),
158
+ // );
159
+ // ```
160
+ //
161
+ // This example deepens the primary link colour while lightening the secondary hover colour, leaving other variants untouched.
105
162
  //
106
163
  // @example
107
164
  // <a href="#">Link</a>
@@ -112,6 +169,8 @@
112
169
  @use "../../defaults" as root-defaults;
113
170
  @use "../../mixins/animation";
114
171
  @use "../../mixins/layer" as *;
172
+ @use "../../mixins/state";
173
+ @use "../../mixins/theme";
115
174
  @use "defaults";
116
175
  @use "sass:map";
117
176
  @use "variables" as *;
@@ -131,51 +190,14 @@
131
190
  text-decoration-style: $link-text-decoration-style;
132
191
  text-decoration-thickness: $link-text-decoration-thickness;
133
192
 
134
- @each $state, $selectors in root-defaults.$state-selectors {
135
- @each $selector in $selectors {
136
- // e.g &:visited, &:focus-visible, &:hover, &:active, &:disabled
137
- &#{$selector} {
138
- transform: map.get($link-transform-states, $state);
139
- text-decoration: map.get($link-text-decoration-states, $state);
140
- text-decoration-style: map.get(
141
- $link-text-decoration-style-states,
142
- $state
143
- );
144
- text-decoration-thickness: map.get(
145
- $link-text-decoration-thickness-states,
146
- $state
147
- );
148
-
149
- // If the state is disabled, we want that to supersede all other states.
150
- @if $state == "disabled" {
151
- cursor: not-allowed;
152
-
153
- @each $sub-state, $sub-selectors in root-defaults.$state-selectors {
154
- @if $sub-state != $state {
155
- @each $sub-selector in $sub-selectors {
156
- // e.g &:visited, &:focus-visible, &:hover, &:active
157
- &#{$sub-selector} {
158
- transform: map.get($link-transform-states, $state);
159
- text-decoration: map.get(
160
- $link-text-decoration-states,
161
- $state
162
- );
163
- text-decoration-style: map.get(
164
- $link-text-decoration-style-states,
165
- $state
166
- );
167
- text-decoration-thickness: map.get(
168
- $link-text-decoration-thickness-states,
169
- $state
170
- );
171
- }
172
- }
173
- }
174
- }
175
- }
176
- }
177
- }
178
- }
193
+ @include state.generate-modifiers(
194
+ (
195
+ transform: $link-transform-states,
196
+ text-decoration: $link-text-decoration-states,
197
+ text-decoration-style: $link-text-decoration-style-states,
198
+ text-decoration-thickness: $link-text-decoration-thickness-states,
199
+ )
200
+ );
179
201
 
180
202
  // &.stretched
181
203
  &#{defaults.$stretched-link-selector-base}#{defaults.$stretched-link-selector} {
@@ -207,39 +229,22 @@
207
229
  color: $link-color;
208
230
  text-decoration-color: $link-text-decoration-color;
209
231
 
210
- @each $state, $selectors in root-defaults.$state-selectors {
211
- @each $selector in $selectors {
212
- // e.g &:visited, &:focus-visible, &:hover, &:active, &:disabled
213
- &#{$selector} {
214
- border-color: map.get($link-border-color-states, $state);
215
- background: map.get($link-background-states, $state);
216
- color: map.get($link-color-states, $state);
217
- text-decoration-color: map.get(
218
- $link-text-decoration-color-states,
219
- $state
220
- );
221
-
222
- // If the state is disabled, we want that to supersede all other states.
223
- @if $state == "disabled" {
224
- @each $sub-state, $sub-selectors in root-defaults.$state-selectors {
225
- @if $sub-state != $state {
226
- @each $sub-selector in $sub-selectors {
227
- // e.g &:visited, &:focus-visible, &:hover, &:active
228
- &#{$sub-selector} {
229
- border-color: map.get($link-border-color-states, $state);
230
- background: map.get($link-background-states, $state);
231
- color: map.get($link-color-states, $state);
232
- text-decoration-color: map.get(
233
- $link-text-decoration-color-states,
234
- $state
235
- );
236
- }
237
- }
238
- }
239
- }
240
- }
241
- }
242
- }
232
+ @if root-defaults.$themeable-components and defaults.$themeable {
233
+ @include theme.generate-modifiers(
234
+ defaults.$link-theme-map,
235
+ defaults.$link-theme-prefix-selector-base,
236
+ defaults.$link-theme-prefix-selector,
237
+ "link-"
238
+ );
243
239
  }
240
+
241
+ @include state.generate-modifiers(
242
+ (
243
+ border-color: $link-border-color-states,
244
+ background: $link-background-states,
245
+ color: $link-color-states,
246
+ text-decoration-color: $link-text-decoration-color-states,
247
+ )
248
+ );
244
249
  }
245
250
  }