@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
@@ -3,6 +3,81 @@
3
3
  // These values are to be used to directly style bases and provide a
4
4
  // cleaner way to reference custom properties.
5
5
 
6
+ // Custom property defaults:
7
+ // | Custom property | Default |
8
+ // | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
9
+ // | --graupl-link-text-decoration | underline |
10
+ // | --graupl-link-visited-text-decoration | var(--graupl-link-text-decoration) |
11
+ // | --graupl-link-focus-text-decoration | var(--graupl-link-text-decoration) |
12
+ // | --graupl-link-hover-text-decoration | underline |
13
+ // | --graupl-link-active-text-decoration | var(--graupl-link-hover-text-decoration) |
14
+ // | --graupl-link-disabled-text-decoration | underline |
15
+ // | --graupl-link-text-decoration-thickness | var(--graupl-border-width) |
16
+ // | --graupl-link-visited-text-decoration-thickness | var(--graupl-link-text-decoration-thickness) |
17
+ // | --graupl-link-focus-text-decoration-thickness | var(--graupl-link-text-decoration-thickness) |
18
+ // | --graupl-link-hover-text-decoration-thickness | var(--graupl-border-width) |
19
+ // | --graupl-link-active-text-decoration-thickness | var(--graupl-link-hover-text-decoration-thickness) |
20
+ // | --graupl-link-disabled-text-decoration-thickness | var(--graupl-border-width) |
21
+ // | --graupl-link-text-decoration-style | solid |
22
+ // | --graupl-link-visited-text-decoration-style | var(--graupl-link-text-decoration-style) |
23
+ // | --graupl-link-focus-text-decoration-style | var(--graupl-link-text-decoration-style) |
24
+ // | --graupl-link-hover-text-decoration-style | solid |
25
+ // | --graupl-link-active-text-decoration-style | var(--graupl-link-hover-text-decoration-style) |
26
+ // | --graupl-link-disabled-text-decoration-style | solid |
27
+ // | --graupl-link-color | var(--graupl-theme-active--primary--700) |
28
+ // | --graupl-link-visited-color | var(--graupl-link-color) |
29
+ // | --graupl-link-focus-color | var(--graupl-link-color) |
30
+ // | --graupl-link-hover-color | theme.get(tertiary, 700) |
31
+ // | --graupl-link-active-color | var(--graupl-link-hover-color) |
32
+ // | --graupl-link-disabled-color | var(--graupl-theme-active--primary--200) |
33
+ // | --graupl-link-text-decoration-color | var(--graupl-link-color) |
34
+ // | --graupl-link-visited-text-decoration-color | var(--graupl-link-visited-color) |
35
+ // | --graupl-link-focus-text-decoration-color | var(--graupl-link-focus-color) |
36
+ // | --graupl-link-hover-text-decoration-color | var(--graupl-link-hover-color) |
37
+ // | --graupl-link-active-text-decoration-color | var(--graupl-link-active-color) |
38
+ // | --graupl-link-disabled-text-decoration-color | var(--graupl-link-disabled-color) |
39
+ // | --graupl-link-background | theme.get(transparent) |
40
+ // | --graupl-link-visited-background | var(--graupl-link-background) |
41
+ // | --graupl-link-focus-background | var(--graupl-link-background) |
42
+ // | --graupl-link-hover-background | theme.get(transparent) |
43
+ // | --graupl-link-active-background | var(--graupl-link-hover-background) |
44
+ // | --graupl-link-disabled-background | theme.get(transparent) |
45
+ // | --graupl-link-padding-x | var(--graupl-spacer-0) |
46
+ // | --graupl-link-padding-y | var(--graupl-spacer-0) |
47
+ // | --graupl-link-padding | var(--graupl-link-padding-y) var(--graupl-link-padding-x) |
48
+ // | --graupl-link-transition | 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) |
49
+ // | --graupl-link-transition-reduced-motion | background var(--graupl-transition-duration-none) var(--graupl-transition-timing-function), color var(--graupl-transition-duration-none) var(--graupl-transition-timing-function) |
50
+ // | --graupl-link-transform | var(--graupl-link-initial-transform) |
51
+ // | --graupl-link-visited-transform | var(--graupl-link-transform) |
52
+ // | --graupl-link-focus-transform | var(--graupl-link-transform) |
53
+ // | --graupl-link-hover-transform | var(--graupl-link-final-transform) |
54
+ // | --graupl-link-active-transform | var(--graupl-link-hover-transform) |
55
+ // | --graupl-link-disabled-transform | var(--graupl-link-disabled-transform) |
56
+ // | --graupl-link-border-top-width | 0 |
57
+ // | --graupl-link-border-right-width | 0 |
58
+ // | --graupl-link-border-bottom-width | 0 |
59
+ // | --graupl-link-border-left-width | 0 |
60
+ // | --graupl-link-border-width | var(--graupl-link-border-top-width) var(--graupl-link-border-right-width) var(--graupl-link-border-bottom-width) var(--graupl-link-border-left-width) |
61
+ // | --graupl-link-border-top-style | var(--graupl-border-top-style) |
62
+ // | --graupl-link-border-right-style | var(--graupl-border-right-style) |
63
+ // | --graupl-link-border-bottom-style | var(--graupl-border-bottom-style) |
64
+ // | --graupl-link-border-left-style | var(--graupl-border-left-style) |
65
+ // | --graupl-link-border-style | var(--graupl-link-border-top-style) var(--graupl-link-border-right-style) var(--graupl-link-border-bottom-style) var(--graupl-link-border-left-style) |
66
+ // | --graupl-link-border-top-left-radius | var(--graupl-border-top-left-radius) |
67
+ // | --graupl-link-border-top-right-radius | var(--graupl-border-top-right-radius) |
68
+ // | --graupl-link-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |
69
+ // | --graupl-link-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |
70
+ // | --graupl-link-border-radius | 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) |
71
+ // | --graupl-link-border-color | theme.get(transparent) |
72
+ // | --graupl-link-visited-border-color | var(--graupl-link-border-color) |
73
+ // | --graupl-link-focus-border-color | var(--graupl-link-border-color) |
74
+ // | --graupl-link-hover-border-color | theme.get(transparent) |
75
+ // | --graupl-link-active-border-color | var(--graupl-link-hover-border-color) |
76
+ // | --graupl-link-disabled-border-color | theme.get(transparent) |
77
+ // | --graupl-link-min-width | var(--graupl-link-min-width) |
78
+ // | --graupl-link-min-height | var(--graupl-link-min-height) |
79
+ // | --graupl-stretched-link-z-index | var(--graupl-stretched-link-z-index) |
80
+
6
81
  @use "defaults";
7
82
  @use "../../variables" as root-variables;
8
83
  @use "../../defaults" as root-defaults;
@@ -10,26 +85,37 @@
10
85
  @use "sass:map";
11
86
 
12
87
  // Link properties.
88
+ // --graupl-link-text-decoration
13
89
  $link-text-decoration: var(
14
90
  --#{root-defaults.$prefix}link-text-decoration,
15
91
  #{defaults.$link-initial-text-decoration}
16
92
  );
93
+
94
+ // --graupl-link-visited-text-decoration
17
95
  $link-visited-text-decoration: var(
18
96
  --#{root-defaults.$prefix}link-visited-text-decoration,
19
97
  #{$link-text-decoration}
20
98
  );
99
+
100
+ // --graupl-link-focus-text-decoration
21
101
  $link-focus-text-decoration: var(
22
102
  --#{root-defaults.$prefix}link-focus-text-decoration,
23
103
  #{$link-text-decoration}
24
104
  );
105
+
106
+ // --graupl-link-hover-text-decoration
25
107
  $link-hover-text-decoration: var(
26
108
  --#{root-defaults.$prefix}link-hover-text-decoration,
27
109
  #{defaults.$link-final-text-decoration}
28
110
  );
111
+
112
+ // --graupl-link-active-text-decoration
29
113
  $link-active-text-decoration: var(
30
114
  --#{root-defaults.$prefix}link-active-text-decoration,
31
115
  #{$link-hover-text-decoration}
32
116
  );
117
+
118
+ // --graupl-link-disabled-text-decoration
33
119
  $link-disabled-text-decoration: var(
34
120
  --#{root-defaults.$prefix}link-disabled-text-decoration,
35
121
  #{defaults.$link-disabled-text-decoration}
@@ -42,26 +128,38 @@ $link-text-decoration-states: (
42
128
  active: $link-active-text-decoration,
43
129
  disabled: $link-disabled-text-decoration,
44
130
  );
131
+
132
+ // --graupl-link-text-decoration-thickness
45
133
  $link-text-decoration-thickness: var(
46
134
  --#{root-defaults.$prefix}link-text-decoration-thickness,
47
135
  #{root-variables.$border-width}
48
136
  );
137
+
138
+ // --graupl-link-visited-text-decoration-thickness
49
139
  $link-visited-text-decoration-thickness: var(
50
140
  --#{root-defaults.$prefix}link-visited-text-decoration-thickness,
51
141
  #{$link-text-decoration-thickness}
52
142
  );
143
+
144
+ // --graupl-link-focus-text-decoration-thickness
53
145
  $link-focus-text-decoration-thickness: var(
54
146
  --#{root-defaults.$prefix}link-focus-text-decoration-thickness,
55
147
  #{$link-text-decoration-thickness}
56
148
  );
149
+
150
+ // --graupl-link-hover-text-decoration-thickness
57
151
  $link-hover-text-decoration-thickness: var(
58
152
  --#{root-defaults.$prefix}link-hover-text-decoration-thickness,
59
153
  #{root-variables.$border-width}
60
154
  );
155
+
156
+ // --graupl-link-active-text-decoration-thickness
61
157
  $link-active-text-decoration-thickness: var(
62
158
  --#{root-defaults.$prefix}link-active-text-decoration-thickness,
63
159
  #{$link-hover-text-decoration-thickness}
64
160
  );
161
+
162
+ // --graupl-link-disabled-text-decoration-thickness
65
163
  $link-disabled-text-decoration-thickness: var(
66
164
  --#{root-defaults.$prefix}link-disabled-text-decoration-thickness,
67
165
  #{root-variables.$border-width}
@@ -74,26 +172,38 @@ $link-text-decoration-thickness-states: (
74
172
  active: $link-active-text-decoration-thickness,
75
173
  disabled: $link-disabled-text-decoration-thickness,
76
174
  );
175
+
176
+ // --graupl-link-text-decoration-style
77
177
  $link-text-decoration-style: var(
78
178
  --#{root-defaults.$prefix}link-text-decoration-style,
79
179
  #{defaults.$link-initial-text-decoration-style}
80
180
  );
181
+
182
+ // --graupl-link-visited-text-decoration-style
81
183
  $link-visited-text-decoration-style: var(
82
184
  --#{root-defaults.$prefix}link-visited-text-decoration-style,
83
185
  #{$link-text-decoration-style}
84
186
  );
187
+
188
+ // --graupl-link-focus-text-decoration-style
85
189
  $link-focus-text-decoration-style: var(
86
190
  --#{root-defaults.$prefix}link-focus-text-decoration-style,
87
191
  #{$link-text-decoration-style}
88
192
  );
193
+
194
+ // --graupl-link-hover-text-decoration-style
89
195
  $link-hover-text-decoration-style: var(
90
196
  --#{root-defaults.$prefix}link-hover-text-decoration-style,
91
197
  #{defaults.$link-final-text-decoration-style}
92
198
  );
199
+
200
+ // --graupl-link-active-text-decoration-style
93
201
  $link-active-text-decoration-style: var(
94
202
  --#{root-defaults.$prefix}link-active-text-decoration-style,
95
203
  #{$link-hover-text-decoration-style}
96
204
  );
205
+
206
+ // --graupl-link-disabled-text-decoration-style
97
207
  $link-disabled-text-decoration-style: var(
98
208
  --#{root-defaults.$prefix}link-disabled-text-decoration-style,
99
209
  #{defaults.$link-disabled-text-decoration-style}
@@ -106,26 +216,38 @@ $link-text-decoration-style-states: (
106
216
  active: $link-active-text-decoration-style,
107
217
  disabled: $link-disabled-text-decoration-style,
108
218
  );
219
+
220
+ // --graupl-link-color
109
221
  $link-color: var(
110
222
  --#{root-defaults.$prefix}link-color,
111
223
  #{theme.get(primary, 700)}
112
224
  );
225
+
226
+ // --graupl-link-visited-color
113
227
  $link-visited-color: var(
114
228
  --#{root-defaults.$prefix}link-visited-color,
115
229
  #{$link-color}
116
230
  );
231
+
232
+ // --graupl-link-focus-color
117
233
  $link-focus-color: var(
118
234
  --#{root-defaults.$prefix}link-focus-color,
119
235
  #{$link-color}
120
236
  );
237
+
238
+ // --graupl-link-hover-color
121
239
  $link-hover-color: var(
122
240
  --#{root-defaults.$prefix}link-hover-color,
123
241
  #{theme.get(tertiary, 700)}
124
242
  );
243
+
244
+ // --graupl-link-active-color
125
245
  $link-active-color: var(
126
246
  --#{root-defaults.$prefix}link-active-color,
127
247
  #{$link-hover-color}
128
248
  );
249
+
250
+ // --graupl-link-disabled-color
129
251
  $link-disabled-color: var(
130
252
  --#{root-defaults.$prefix}link-disabled-color,
131
253
  #{theme.get(primary, 200)}
@@ -138,26 +260,38 @@ $link-color-states: (
138
260
  active: $link-active-color,
139
261
  disabled: $link-disabled-color,
140
262
  );
263
+
264
+ // --graupl-link-text-decoration-color
141
265
  $link-text-decoration-color: var(
142
266
  --#{root-defaults.$prefix}link-text-decoration-color,
143
267
  #{$link-color}
144
268
  );
269
+
270
+ // --graupl-link-visited-text-decoration-color
145
271
  $link-visited-text-decoration-color: var(
146
272
  --#{root-defaults.$prefix}link-visited-text-decoration-color,
147
273
  #{$link-visited-color}
148
274
  );
275
+
276
+ // --graupl-link-focus-text-decoration-color
149
277
  $link-focus-text-decoration-color: var(
150
278
  --#{root-defaults.$prefix}link-focus-text-decoration-color,
151
279
  #{$link-focus-color}
152
280
  );
281
+
282
+ // --graupl-link-hover-text-decoration-color
153
283
  $link-hover-text-decoration-color: var(
154
284
  --#{root-defaults.$prefix}link-hover-text-decoration-color,
155
285
  #{$link-hover-color}
156
286
  );
287
+
288
+ // --graupl-link-active-text-decoration-color
157
289
  $link-active-text-decoration-color: var(
158
290
  --#{root-defaults.$prefix}link-active-text-decoration-color,
159
291
  #{$link-active-color}
160
292
  );
293
+
294
+ // --graupl-link-disabled-text-decoration-color
161
295
  $link-disabled-text-decoration-color: var(
162
296
  --#{root-defaults.$prefix}link-disabled-text-decoration-color,
163
297
  #{$link-disabled-color}
@@ -170,26 +304,38 @@ $link-text-decoration-color-states: (
170
304
  active: $link-active-text-decoration-color,
171
305
  disabled: $link-disabled-text-decoration-color,
172
306
  );
307
+
308
+ // --graupl-link-background
173
309
  $link-background: var(
174
310
  --#{root-defaults.$prefix}link-background,
175
311
  #{theme.get(transparent)}
176
312
  );
313
+
314
+ // --graupl-link-visited-background
177
315
  $link-visited-background: var(
178
316
  --#{root-defaults.$prefix}link-visited-background,
179
317
  #{$link-background}
180
318
  );
319
+
320
+ // --graupl-link-focus-background
181
321
  $link-focus-background: var(
182
322
  --#{root-defaults.$prefix}link-focus-background,
183
323
  #{$link-background}
184
324
  );
325
+
326
+ // --graupl-link-hover-background
185
327
  $link-hover-background: var(
186
328
  --#{root-defaults.$prefix}link-hover-background,
187
329
  #{theme.get(transparent)}
188
330
  );
331
+
332
+ // --graupl-link-active-background
189
333
  $link-active-background: var(
190
334
  --#{root-defaults.$prefix}link-active-background,
191
335
  #{$link-hover-background}
192
336
  );
337
+
338
+ // --graupl-link-disabled-background
193
339
  $link-disabled-background: var(
194
340
  --#{root-defaults.$prefix}link-disabled-background,
195
341
  #{theme.get(transparent)}
@@ -202,18 +348,26 @@ $link-background-states: (
202
348
  active: $link-active-background,
203
349
  disabled: $link-disabled-background,
204
350
  );
351
+
352
+ // --graupl-link-padding-x
205
353
  $link-padding-x: var(
206
354
  --#{root-defaults.$prefix}link-padding-x,
207
355
  #{map.get(root-variables.$spacers, 0)}
208
356
  );
357
+
358
+ // --graupl-link-padding-y
209
359
  $link-padding-y: var(
210
360
  --#{root-defaults.$prefix}link-padding-y,
211
361
  #{map.get(root-variables.$spacers, 0)}
212
362
  );
363
+
364
+ // --graupl-link-padding
213
365
  $link-padding: var(
214
366
  --#{root-defaults.$prefix}link-padding,
215
367
  #{$link-padding-y} #{$link-padding-x}
216
368
  );
369
+
370
+ // --graupl-link-transition
217
371
  $link-transition: var(
218
372
  --#{root-defaults.$prefix}link-transition,
219
373
  background #{map.get(root-variables.$transition-durations, fast)}
@@ -223,6 +377,8 @@ $link-transition: var(
223
377
  transform #{map.get(root-variables.$transition-durations, fast)}
224
378
  #{root-variables.$transition-timing-function}
225
379
  );
380
+
381
+ // --graupl-link-transition-reduced-motion
226
382
  $link-transition-reduced-motion: var(
227
383
  --#{root-defaults.$prefix}link-transition-reduced-motion,
228
384
  background #{map.get(root-variables.$transition-durations, none)}
@@ -230,26 +386,38 @@ $link-transition-reduced-motion: var(
230
386
  color #{map.get(root-variables.$transition-durations, none)}
231
387
  #{root-variables.$transition-timing-function}
232
388
  );
389
+
390
+ // --graupl-link-transform
233
391
  $link-transform: var(
234
392
  --#{root-defaults.$prefix}link-transform,
235
393
  #{defaults.$link-initial-transform}
236
394
  );
395
+
396
+ // --graupl-link-visited-transform
237
397
  $link-visited-transform: var(
238
398
  --#{root-defaults.$prefix}link-visited-transform,
239
399
  #{$link-transform}
240
400
  );
401
+
402
+ // --graupl-link-focus-transform
241
403
  $link-focus-transform: var(
242
404
  --#{root-defaults.$prefix}link-focus-transform,
243
405
  #{$link-transform}
244
406
  );
407
+
408
+ // --graupl-link-hover-transform
245
409
  $link-hover-transform: var(
246
410
  --#{root-defaults.$prefix}link-hover-transform,
247
411
  #{defaults.$link-final-transform}
248
412
  );
413
+
414
+ // --graupl-link-active-transform
249
415
  $link-active-transform: var(
250
416
  --#{root-defaults.$prefix}link-active-transform,
251
417
  #{$link-hover-transform}
252
418
  );
419
+
420
+ // --graupl-link-disabled-transform
253
421
  $link-disabled-transform: var(
254
422
  --#{root-defaults.$prefix}link-disabled-transform,
255
423
  #{defaults.$link-disabled-transform}
@@ -262,86 +430,128 @@ $link-transform-states: (
262
430
  active: $link-active-transform,
263
431
  disabled: $link-disabled-transform,
264
432
  );
433
+
434
+ // --graupl-link-border-top-width
265
435
  $link-border-top-width: var(--#{root-defaults.$prefix}link-border-top-width, 0);
436
+
437
+ // --graupl-link-border-right-width
266
438
  $link-border-right-width: var(
267
439
  --#{root-defaults.$prefix}link-border-right-width,
268
440
  0
269
441
  );
442
+
443
+ // --graupl-link-border-bottom-width
270
444
  $link-border-bottom-width: var(
271
445
  --#{root-defaults.$prefix}link-border-bottom-width,
272
446
  0
273
447
  );
448
+
449
+ // --graupl-link-border-left-width
274
450
  $link-border-left-width: var(
275
451
  --#{root-defaults.$prefix}link-border-left-width,
276
452
  0
277
453
  );
454
+
455
+ // --graupl-link-border-width
278
456
  $link-border-width: var(
279
457
  --#{root-defaults.$prefix}link-border-width,
280
458
  #{$link-border-top-width} #{$link-border-right-width}
281
459
  #{$link-border-bottom-width} #{$link-border-left-width}
282
460
  );
461
+
462
+ // --graupl-link-border-top-style
283
463
  $link-border-top-style: var(
284
464
  --#{root-defaults.$prefix}link-border-top-style,
285
465
  #{root-variables.$border-top-style}
286
466
  );
467
+
468
+ // --graupl-link-border-right-style
287
469
  $link-border-right-style: var(
288
470
  --#{root-defaults.$prefix}link-border-right-style,
289
471
  #{root-variables.$border-right-style}
290
472
  );
473
+
474
+ // --graupl-link-border-bottom-style
291
475
  $link-border-bottom-style: var(
292
476
  --#{root-defaults.$prefix}link-border-bottom-style,
293
477
  #{root-variables.$border-bottom-style}
294
478
  );
479
+
480
+ // --graupl-link-border-left-style
295
481
  $link-border-left-style: var(
296
482
  --#{root-defaults.$prefix}link-border-left-style,
297
483
  #{root-variables.$border-left-style}
298
484
  );
485
+
486
+ // --graupl-link-border-style
299
487
  $link-border-style: var(
300
488
  --#{root-defaults.$prefix}link-border-style,
301
489
  #{$link-border-top-style} #{$link-border-right-style}
302
490
  #{$link-border-bottom-style} #{$link-border-left-style}
303
491
  );
492
+
493
+ // --graupl-link-border-top-left-radius
304
494
  $link-border-top-left-radius: var(
305
495
  --#{root-defaults.$prefix}link-border-top-left-radius,
306
496
  #{root-variables.$border-top-left-radius}
307
497
  );
498
+
499
+ // --graupl-link-border-top-right-radius
308
500
  $link-border-top-right-radius: var(
309
501
  --#{root-defaults.$prefix}link-border-top-right-radius,
310
502
  #{root-variables.$border-top-right-radius}
311
503
  );
504
+
505
+ // --graupl-link-border-bottom-right-radius
312
506
  $link-border-bottom-right-radius: var(
313
507
  --#{root-defaults.$prefix}link-border-bottom-right-radius,
314
508
  #{root-variables.$border-bottom-right-radius}
315
509
  );
510
+
511
+ // --graupl-link-border-bottom-left-radius
316
512
  $link-border-bottom-left-radius: var(
317
513
  --#{root-defaults.$prefix}link-border-bottom-left-radius,
318
514
  #{root-variables.$border-bottom-left-radius}
319
515
  );
516
+
517
+ // --graupl-link-border-radius
320
518
  $link-border-radius: var(
321
519
  --#{root-defaults.$prefix}link-border-radius,
322
520
  #{$link-border-top-left-radius} #{$link-border-top-right-radius}
323
521
  #{$link-border-bottom-right-radius} #{$link-border-bottom-left-radius}
324
522
  );
523
+
524
+ // --graupl-link-border-color
325
525
  $link-border-color: var(
326
526
  --#{root-defaults.$prefix}link-border-color,
327
527
  #{theme.get(transparent)}
328
528
  );
529
+
530
+ // --graupl-link-visited-border-color
329
531
  $link-visited-border-color: var(
330
532
  --#{root-defaults.$prefix}link-visited-border-color,
331
533
  #{$link-border-color}
332
534
  );
535
+
536
+ // --graupl-link-focus-border-color
333
537
  $link-focus-border-color: var(
334
538
  --#{root-defaults.$prefix}link-focus-border-color,
335
539
  #{$link-border-color}
336
540
  );
541
+
542
+ // --graupl-link-hover-border-color
337
543
  $link-hover-border-color: var(
338
544
  --#{root-defaults.$prefix}link-hover-border-color,
339
545
  #{theme.get(transparent)}
340
546
  );
547
+
548
+ // --graupl-link-active-border-color
341
549
  $link-active-border-color: var(
342
550
  --#{root-defaults.$prefix}link-active-border-color,
343
551
  #{$link-hover-border-color}
344
552
  );
553
+
554
+ // --graupl-link-disabled-border-color
345
555
  $link-disabled-border-color: var(
346
556
  --#{root-defaults.$prefix}link-disabled-border-color,
347
557
  #{theme.get(transparent)}
@@ -354,16 +564,21 @@ $link-border-color-states: (
354
564
  active: $link-active-border-color,
355
565
  disabled: $link-disabled-border-color,
356
566
  );
567
+
568
+ // --graupl-link-min-width
357
569
  $link-min-width: var(
358
570
  --#{root-defaults.$prefix}link-min-width,
359
571
  defaults.$link-min-width
360
572
  );
573
+
574
+ // --graupl-link-min-height
361
575
  $link-min-height: var(
362
576
  --#{root-defaults.$prefix}link-min-height,
363
577
  defaults.$link-min-height
364
578
  );
365
579
 
366
580
  // Stretched link properties.
581
+ // --graupl-stretched-link-z-index
367
582
  $stretched-link-z-index: var(
368
583
  --#{root-defaults.$prefix}stretched-link-z-index,
369
584
  #{defaults.$stretched-link-z-index}
@@ -14,6 +14,7 @@
14
14
  $selector-base: root-defaults.$element-selector-base !default;
15
15
  $modifier-selector-base: root-defaults.$modifier-selector-base !default;
16
16
  $generate-base-theme-map: root-defaults.$generate-base-theme-maps !default;
17
+ $themeable: true !default;
17
18
  $table-selector-base: $selector-base !default;
18
19
  $table-selector: "table" !default;
19
20
  $table-caption-selector-base: $selector-base !default;
@@ -66,19 +67,8 @@ $-table-theme-mappings: (
66
67
  highlight-background: 500,
67
68
  highlight-color: 100,
68
69
  );
69
- $custom-table-theme-map: () !default;
70
70
  $table-theme-mappings: () !default;
71
71
 
72
- // @todo remove this once $custom-table-theme-map is removed
73
- @if $custom-table-theme-map != () {
74
- @warn "`$custom-table-theme-map` is deprecated and will be removed in a future release of Graupl. Use `$table-theme-mappings` instead.";
75
-
76
- $table-theme-mappings: map.merge(
77
- $table-theme-mappings,
78
- $custom-table-theme-map
79
- );
80
- }
81
-
82
72
  // Merge the custom table theme map with the default one.
83
73
  @if $generate-base-theme-map {
84
74
  $table-theme-mappings: map.merge(