@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/component/accordion/_variables.scss CHANGED
@@ -3,74 +3,219 @@
3
3
  // These values are to be used to directly style components and provide a
4
4
  // cleaner way to reference custom properties.
5
5
 
6
- @use "defaults";
6
+ // Custom property defaults:
7
+ // | Property | Description | Default |
8
+ // | --------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
9
+ // | --graupl-accordion-padding-x | Horizontal padding on the accordion container. | var(--graupl-spacer-0) |
10
+ // | --graupl-accordion-padding-y | Vertical padding on the accordion container. | var(--graupl-spacer-0) |
11
+ // | --graupl-accordion-padding | Shorthand padding for the accordion container. | var(--graupl-accordion-padding-y) var(--graupl-accordion-padding-x) |
12
+ // | --graupl-accordion-column-gap | Column gap between accordion items. | var(--graupl-spacer-0) |
13
+ // | --graupl-accordion-row-gap | Row gap between accordion items. | var(--graupl-spacer-0) |
14
+ // | --graupl-accordion-gap | Gap between accordion items (column/row). | var(--graupl-accordion-column-gap) var(--graupl-accordion-row-gap) |
15
+ // | --graupl-accordion-color | Text colour of the accordion container. | var(--graupl-color) |
16
+ // | --graupl-accordion-background | Background colour of the accordion container. | var(--graupl-background) |
17
+ // | --graupl-accordion-border-color | Border colour of the accordion container. | var(--graupl-accordion-color) |
18
+ // | --graupl-accordion-item-color | Text colour of the accordion item. | var(--graupl-accordion-color) |
19
+ // | --graupl-accordion-item-background | Background colour of the accordion item. | var(--graupl-accordion-background) |
20
+ // | --graupl-accordion-item-border-color | Border colour of the accordion item. | var(--graupl-accordion-border-color) |
21
+ // | --graupl-accordion-item-border-top-left-radius | Top-left border radius of an accordion item. | var(--graupl-border-top-left-radius) |
22
+ // | --graupl-accordion-item-border-top-right-radius | Top-right border radius of an accordion item. | var(--graupl-border-top-right-radius) |
23
+ // | --graupl-accordion-item-border-bottom-right-radius | Bottom-right border radius of an accordion item. | var(--graupl-border-bottom-right-radius) |
24
+ // | --graupl-accordion-item-border-bottom-left-radius | Bottom-left border radius of an accordion item. | var(--graupl-border-bottom-left-radius) |
25
+ // | --graupl-accordion-item-border-radius | Border radius of an accordion item. | var(--graupl-accordion-item-border-top-left-radius) var(--graupl-accordion-item-border-top-right-radius) var(--graupl-accordion-item-border-bottom-right-radius) var(--graupl-accordion-item-border-bottom-left-radius) |
26
+ // | --graupl-accordion-item-border-top-width | Top border width of an accordion item. | var(--graupl-border-top-width) |
27
+ // | --graupl-accordion-item-border-right-width | Right border width of an accordion item. | var(--graupl-border-right-width) |
28
+ // | --graupl-accordion-item-border-bottom-width | Bottom border width of an accordion item. | var(--graupl-border-bottom-width) |
29
+ // | --graupl-accordion-item-border-left-width | Left border width of an accordion item. | var(--graupl-border-left-width) |
30
+ // | --graupl-accordion-item-border-width | Border width of an accordion item. | var(--graupl-accordion-item-border-top-width) var(--graupl-accordion-item-border-right-width) var(--graupl-accordion-item-border-bottom-width) var(--graupl-accordion-item-border-left-width) |
31
+ // | --graupl-accordion-item-border-top-style | Top border style of an accordion item. | var(--graupl-border-top-style) |
32
+ // | --graupl-accordion-item-border-right-style | Right border style of an accordion item. | var(--graupl-border-right-style) |
33
+ // | --graupl-accordion-item-border-bottom-style | Bottom border style of an accordion item. | var(--graupl-border-bottom-style) |
34
+ // | --graupl-accordion-item-border-left-style | Left border style of an accordion item. | var(--graupl-border-left-style) |
35
+ // | --graupl-accordion-item-border-style | Border style of an accordion item. | var(--graupl-accordion-item-border-top-style) var(--graupl-accordion-item-border-right-style) var(--graupl-accordion-item-border-bottom-style) var(--graupl-accordion-item-border-left-style) |
36
+ // | --graupl-accordion-item-header-padding-x | Horizontal padding for the accordion item header. | var(--graupl-spacer-0) |
37
+ // | --graupl-accordion-item-header-padding-y | Vertical padding for the accordion item header. | var(--graupl-spacer-0) |
38
+ // | --graupl-accordion-item-header-padding | Padding for the accordion item header. | var(--graupl-accordion-item-header-padding-y) var(--graupl-accordion-item-header-padding-x) |
39
+ // | --graupl-accordion-item-header-margin | Margin for the accordion item header (pulls content over borders). | calc(-1 * min(var(--graupl-accordion-item-border-top-width), var(--graupl-accordion-item-border-bottom-width), var(--graupl-accordion-item-border-left-width), var(--graupl-accordion-item-border-right-width))) |
40
+ // | --graupl-accordion-item-title-padding-x | Horizontal padding for the accordion item title row. | var(--graupl-spacer-0) |
41
+ // | --graupl-accordion-item-title-padding-y | Vertical padding for the accordion item title row. | var(--graupl-spacer-0) |
42
+ // | --graupl-accordion-item-title-padding | Padding for the accordion item title row. | var(--graupl-accordion-item-title-padding-y) var(--graupl-accordion-item-title-padding-x) |
43
+ // | --graupl-accordion-item-title-margin-x | Horizontal margin for the accordion item title row. | var(--graupl-spacer-0) |
44
+ // | --graupl-accordion-item-title-margin-y | Vertical margin for the accordion item title row. | var(--graupl-spacer-0) |
45
+ // | --graupl-accordion-item-title-margin | Margin for the accordion item title row. | var(--graupl-accordion-item-title-margin-y) var(--graupl-accordion-item-title-margin-x) |
46
+ // | --graupl-accordion-item-title-color | Text colour for accordion item titles. | var(--graupl-accordion-item-color) |
47
+ // | --graupl-accordion-item-title-background | Background colour for accordion item titles. | var(--graupl-accordion-item-background) |
48
+ // | --graupl-accordion-item-title-border-color | Border colour for accordion item titles. | var(--graupl-accordion-item-border-color) |
49
+ // | --graupl-accordion-item-title-font-size | Font size for accordion item titles. | var(--graupl-h5-font-size) |
50
+ // | --graupl-accordion-item-title-font-weight | Font weight for accordion item titles. | var(--graupl-h5-font-weight) |
51
+ // | --graupl-accordion-item-title-font-family | Font family for accordion item titles. | var(--graupl-h5-font-family) |
52
+ // | --graupl-accordion-item-title-line-height | Line height for accordion item titles. | var(--graupl-h5-line-height) |
53
+ // | --graupl-accordion-item-content-color | Text colour for accordion item content. | var(--graupl-accordion-item-color) |
54
+ // | --graupl-accordion-item-content-background | Background colour for accordion item content. | var(--graupl-accordion-item-background) |
55
+ // | --graupl-accordion-item-content-padding-x | Horizontal padding for the accordion item content area. | var(--graupl-spacer-5) |
56
+ // | --graupl-accordion-item-content-padding-y | Vertical padding for the accordion item content area. | var(--graupl-spacer-5) |
57
+ // | --graupl-accordion-item-content-padding | Padding for the accordion item content area. | var(--graupl-accordion-item-content-padding-y) var(--graupl-accordion-item-content-padding-x) |
58
+ // | --graupl-accordion-item-content-column-gap | Column gap inside the accordion content. | var(--graupl-spacer-3) |
59
+ // | --graupl-accordion-item-content-row-gap | Row gap inside the accordion content. | var(--graupl-spacer-0) |
60
+ // | --graupl-accordion-item-content-gap | Gap inside the accordion content (column/row). | var(--graupl-accordion-item-content-column-gap) var(--graupl-accordion-item-content-row-gap) |
61
+ // | --graupl-accordion-item-body-padding-x | Horizontal padding for the accordion item body. | var(--graupl-spacer-0) |
62
+ // | --graupl-accordion-item-body-padding-y | Vertical padding for the accordion item body. | var(--graupl-spacer-0) |
63
+ // | --graupl-accordion-item-body-padding | Padding for the accordion item body. | var(--graupl-accordion-item-body-padding-y) var(--graupl-accordion-item-body-padding-x) |
64
+ // | --graupl-accordion-item-footer-padding-x | Horizontal padding for the accordion item footer. | var(--graupl-spacer-0) |
65
+ // | --graupl-accordion-item-footer-padding-y | Vertical padding for the accordion item footer. | var(--graupl-spacer-0) |
66
+ // | --graupl-accordion-item-footer-padding | Padding for the accordion item footer. | var(--graupl-accordion-item-footer-padding-y) var(--graupl-accordion-item-footer-padding-x) |
67
+ // | --graupl-accordion-item-content-transform | Base transform for accordion content. | translateY(-100%) |
68
+ // | --graupl-accordion-item-content-open-transform | Transform when accordion content is open. | translateY(0) |
69
+ // | --graupl-accordion-item-toggle-padding-x | Horizontal padding applied to the toggle control. | var(--graupl-button-padding-x) |
70
+ // | --graupl-accordion-item-toggle-padding-y | Vertical padding applied to the toggle control. | var(--graupl-button-padding-y) |
71
+ // | --graupl-accordion-item-toggle-padding | Shorthand padding applied to the toggle control. | var(--graupl-accordion-item-toggle-padding-y) var(--graupl-accordion-item-toggle-padding-x) |
72
+ // | --graupl-accordion-item-toggle-transform | Base transform for the toggle control. | none |
73
+ // | --graupl-accordion-item-toggle-visited-transform | Transform for a visited toggle. | var(--graupl-accordion-item-toggle-transform) |
74
+ // | --graupl-accordion-item-toggle-focus-transform | Transform for a focused toggle. | var(--graupl-accordion-item-toggle-transform) |
75
+ // | --graupl-accordion-item-toggle-hover-transform | Transform for a hovered toggle. | var(--graupl-accordion-item-toggle-transform) |
76
+ // | --graupl-accordion-item-toggle-active-transform | Transform for an active toggle. | none |
77
+ // | --graupl-accordion-item-toggle-disabled-transform | Transform for a disabled toggle. | none |
78
+ // | --graupl-accordion-item-toggle-pseudo-transform | Transform for the toggle indicator pseudo-element. | none |
79
+ // | --graupl-accordion-item-toggle-pseudo-open-transform | Transform for the toggle indicator when open. | rotate(-180deg) |
80
+ // | --graupl-accordion-transition-duration | Duration used for accordion transitions. | var(--graupl-transition-duration-slow) |
81
+ // | --graupl-accordion-transition-timing-function | Timing function used for accordion transitions. | var(--graupl-transition-timing-function) |
82
+ // | --graupl-accordion-item-transition | Transition applied to accordion item height. | height var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function) |
83
+ // | --graupl-accordion-item-transition-reduced-motion | Transition used when reduced motion is enabled. | none |
84
+ // | --graupl-accordion-item-toggle-pseudo-transition | Transition for the toggle indicator pseudo-element. | transform var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function) |
85
+ // | --graupl-accordion-item-toggle-pseudo-transition-reduced-motion | Transition for the toggle indicator when reduced motion is enabled. | none |
86
+ // | --graupl-accordion-item-content-transition | Transition applied to accordion content. | opacity var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function) transform var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function) |
87
+ // | --graupl-accordion-item-content-transition-reduced-motion | Transition for content when reduced motion is enabled. | opacity var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function) |
88
+ // | --graupl-accordion-item-toggle-transition | Transition for toggle state changes. | background var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function), color var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function), transform var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function) |
89
+ // | --graupl-accordion-item-toggle-transition-reduced-motion | Transition used when reduced motion is enabled. | background var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function), color var(--graupl-accordion-transition-duration) var(--graupl-accordion-transition-timing-function) |
90
+ // | --graupl-accordion-item-toggle-color | Text colour of the accordion item toggle. | var(--graupl-accordion-color) |
91
+ // | --graupl-accordion-item-toggle-visited-color | Text colour of a visited accordion item toggle. | var(--graupl-accordion-item-toggle-color) |
92
+ // | --graupl-accordion-item-toggle-focus-color | Text colour of a focused accordion item toggle. | var(--graupl-accordion-item-toggle-color) |
93
+ // | --graupl-accordion-item-toggle-hover-color | Text colour of a hovered accordion item toggle. | var(--graupl-accordion-background) |
94
+ // | --graupl-accordion-item-toggle-active-color | Text colour of an active accordion item toggle. | var(--graupl-accordion-item-toggle-hover-color) |
95
+ // | --graupl-accordion-item-toggle-disabled-color | Text colour of a disabled accordion item toggle. | var(--graupl-theme-active--primary--200) |
96
+ // | --graupl-accordion-item-toggle-background | Background colour of the accordion item toggle. | var(--graupl-accordion-background) |
97
+ // | --graupl-accordion-item-toggle-visited-background | Background colour of a visited accordion item toggle. | var(--graupl-accordion-item-toggle-background) |
98
+ // | --graupl-accordion-item-toggle-focus-background | Background colour of a focused accordion item toggle. | var(--graupl-accordion-item-toggle-background) |
99
+ // | --graupl-accordion-item-toggle-hover-background | Background colour of a hovered accordion item toggle. | var(--graupl-accordion-color) |
100
+ // | --graupl-accordion-item-toggle-active-background | Background colour of an active accordion item toggle. | var(--graupl-accordion-item-toggle-hover-background) |
101
+ // | --graupl-accordion-item-toggle-disabled-background | Background colour of a disabled accordion item toggle. | var(--graupl-accordion-background) |
102
+ // | --graupl-accordion-item-toggle-border-color | Border colour of the accordion item toggle. | var(--graupl-accordion-item-border-color) |
103
+ // | --graupl-accordion-item-toggle-visited-border-color | Border colour of a visited accordion item toggle. | var(--graupl-accordion-item-toggle-border-color) |
104
+ // | --graupl-accordion-item-toggle-focus-border-color | Border colour of a focused accordion item toggle. | var(--graupl-accordion-item-toggle-border-color) |
105
+ // | --graupl-accordion-item-toggle-hover-border-color | Border colour of a hovered accordion item toggle. | var(--graupl-accordion-item-border-color) |
106
+ // | --graupl-accordion-item-toggle-active-border-color | Border colour of an active accordion item toggle. | var(--graupl-accordion-item-toggle-hover-border-color) |
107
+ // | --graupl-accordion-item-toggle-disabled-border-color | Border colour of a disabled accordion item toggle. | var(--graupl-theme-active--primary--200) |
108
+
109
+ @use "../../base/button/variables" as button;
7
110
  @use "../../defaults" as root-defaults;
8
- @use "../../variables" as root-variables;
111
+ @use "../../functions/theme";
9
112
  @use "../../theme/color/variables" as color;
10
113
  @use "../../theme/typography/variables" as typography;
11
- @use "../../functions/theme";
114
+ @use "../../variables" as root-variables;
115
+ @use "defaults";
12
116
  @use "sass:map";
13
- @use "../../base/button/variables" as button;
14
117
 
15
118
  // Accordion properties.
119
+ // --graupl-accordion-padding-x
16
120
  $accordion-padding-x: var(
17
121
  --#{root-defaults.$prefix}accordion-padding-x,
18
122
  #{map.get(root-variables.$spacers, 0)}
19
123
  );
124
+
125
+ // --graupl-accordion-padding-y
20
126
  $accordion-padding-y: var(
21
127
  --#{root-defaults.$prefix}accordion-padding-y,
22
128
  #{map.get(root-variables.$spacers, 0)}
23
129
  );
130
+
131
+ // --graupl-accordion-padding
24
132
  $accordion-padding: var(
25
133
  --#{root-defaults.$prefix}accordion-padding,
26
134
  #{$accordion-padding-y} #{$accordion-padding-x}
27
135
  );
28
136
 
29
137
  // Accordion gap properties.
138
+ // --graupl-accordion-column-gap
30
139
  $accordion-column-gap: var(
31
140
  --#{root-defaults.$prefix}accordion-column-gap,
32
141
  #{map.get(root-variables.$spacers, 0)}
33
142
  );
143
+
144
+ // --graupl-accordion-row-gap
34
145
  $accordion-row-gap: var(
35
146
  --#{root-defaults.$prefix}accordion-row-gap,
36
147
  #{map.get(root-variables.$spacers, 0)}
37
148
  );
149
+
150
+ // --graupl-accordion-gap
38
151
  $accordion-gap: var(
39
152
  --#{root-defaults.$prefix}accordion-gap,
40
153
  #{$accordion-column-gap} #{$accordion-row-gap}
41
154
  );
42
155
 
43
156
  // Accordion color properties.
157
+ // --graupl-accordion-color
44
158
  $accordion-color: var(
45
159
  --#{root-defaults.$prefix}accordion-color,
46
160
  #{color.$color}
47
161
  );
162
+
163
+ // --graupl-accordion-background
48
164
  $accordion-background: var(
49
165
  --#{root-defaults.$prefix}accordion-background,
50
166
  #{color.$background}
51
167
  );
52
168
 
169
+ // --graupl-accordion-border-color
170
+ $accordion-border-color: var(
171
+ --#{root-defaults.$prefix}accordion-border-color,
172
+ #{$accordion-color}
173
+ );
174
+
175
+ // --graupl-accordion-item-color
176
+ $accordion-item-color: var(
177
+ --#{root-defaults.$prefix}accordion-item-color,
178
+ #{$accordion-color}
179
+ );
180
+
181
+ // --graupl-accordion-item-background
182
+ $accordion-item-background: var(
183
+ --#{root-defaults.$prefix}accordion-item-background,
184
+ #{$accordion-background}
185
+ );
186
+
53
187
  // Accordion item border properties.
188
+ // --graupl-accordion-item-border-color
54
189
  $accordion-item-border-color: var(
55
190
  --#{root-defaults.$prefix}accordion-item-border-color,
56
- #{$accordion-color}
191
+ #{$accordion-border-color}
57
192
  );
193
+
194
+ // --graupl-accordion-item-border-top-left-radius
58
195
  $accordion-item-border-top-left-radius: var(
59
196
  --#{root-defaults.$prefix}accordion-item-border-top-left-radius,
60
197
  #{root-variables.$border-top-left-radius}
61
198
  );
199
+
200
+ // --graupl-accordion-item-border-top-right-radius
62
201
  $accordion-item-border-top-right-radius: var(
63
202
  --#{root-defaults.$prefix}accordion-item-border-top-right-radius,
64
203
  #{root-variables.$border-top-right-radius}
65
204
  );
205
+
206
+ // --graupl-accordion-item-border-bottom-left-radius
66
207
  $accordion-item-border-bottom-left-radius: var(
67
208
  --#{root-defaults.$prefix}accordion-item-border-bottom-left-radius,
68
209
  #{root-variables.$border-bottom-left-radius}
69
210
  );
211
+
212
+ // --graupl-accordion-item-border-bottom-right-radius
70
213
  $accordion-item-border-bottom-right-radius: var(
71
214
  --#{root-defaults.$prefix}accordion-item-border-bottom-right-radius,
72
215
  #{root-variables.$border-bottom-right-radius}
73
216
  );
217
+
218
+ // --graupl-accordion-item-border-radius
74
219
  $accordion-item-border-radius: var(
75
220
  --#{root-defaults.$prefix}accordion-item-border-radius,
76
221
  #{$accordion-item-border-top-left-radius}
@@ -78,111 +223,89 @@ $accordion-item-border-radius: var(
78
223
  #{$accordion-item-border-bottom-right-radius}
79
224
  #{$accordion-item-border-bottom-left-radius}
80
225
  );
226
+
227
+ // --graupl-accordion-item-border-top-width
81
228
  $accordion-item-border-top-width: var(
82
229
  --#{root-defaults.$prefix}accordion-item-border-top-width,
83
230
  #{root-variables.$border-top-width}
84
231
  );
232
+
233
+ // --graupl-accordion-item-border-right-width
85
234
  $accordion-item-border-right-width: var(
86
235
  --#{root-defaults.$prefix}accordion-item-border-right-width,
87
236
  #{root-variables.$border-right-width}
88
237
  );
238
+
239
+ // --graupl-accordion-item-border-bottom-width
89
240
  $accordion-item-border-bottom-width: var(
90
241
  --#{root-defaults.$prefix}accordion-item-border-bottom-width,
91
242
  #{root-variables.$border-bottom-width}
92
243
  );
244
+
245
+ // --graupl-accordion-item-border-left-width
93
246
  $accordion-item-border-left-width: var(
94
247
  --#{root-defaults.$prefix}accordion-item-border-left-width,
95
248
  #{root-variables.$border-left-width}
96
249
  );
250
+
251
+ // --graupl-accordion-item-border-width
97
252
  $accordion-item-border-width: var(
98
253
  --#{root-defaults.$prefix}accordion-item-border-width,
99
254
  #{$accordion-item-border-top-width} #{$accordion-item-border-right-width}
100
255
  #{$accordion-item-border-bottom-width} #{$accordion-item-border-left-width}
101
256
  );
257
+
258
+ // --graupl-accordion-item-border-top-style
102
259
  $accordion-item-border-top-style: var(
103
260
  --#{root-defaults.$prefix}accordion-item-border-top-style,
104
261
  #{root-variables.$border-top-style}
105
262
  );
263
+
264
+ // --graupl-accordion-item-border-right-style
106
265
  $accordion-item-border-right-style: var(
107
266
  --#{root-defaults.$prefix}accordion-item-border-right-style,
108
267
  #{root-variables.$border-right-style}
109
268
  );
269
+
270
+ // --graupl-accordion-item-border-bottom-style
110
271
  $accordion-item-border-bottom-style: var(
111
272
  --#{root-defaults.$prefix}accordion-item-border-bottom-style,
112
273
  #{root-variables.$border-bottom-style}
113
274
  );
275
+
276
+ // --graupl-accordion-item-border-left-style
114
277
  $accordion-item-border-left-style: var(
115
278
  --#{root-defaults.$prefix}accordion-item-border-left-style,
116
279
  #{root-variables.$border-left-style}
117
280
  );
281
+
282
+ // --graupl-accordion-item-border-style
118
283
  $accordion-item-border-style: var(
119
284
  --#{root-defaults.$prefix}accordion-item-border-style,
120
285
  #{$accordion-item-border-top-style} #{$accordion-item-border-right-style}
121
286
  #{$accordion-item-border-bottom-style} #{$accordion-item-border-left-style}
122
287
  );
123
288
 
124
- // Accordion item properties.
125
- $accordion-item-toggle-padding: var(
126
- --#{root-defaults.$prefix}accordion-item-toggle-padding,
127
- #{button.$button-padding}
128
- );
129
-
130
- // Transform properties.
131
- $accordion-item-toggle-transform: var(
132
- --#{root-defaults.$prefix}accordion-item-toggle-transform,
133
- #{defaults.$accordion-item-toggle-transform}
134
- );
135
- $accordion-item-toggle-visited-transform: var(
136
- --#{root-defaults.$prefix}accordion-item-toggle-visited-transform,
137
- #{defaults.$accordion-item-toggle-visited-transform}
138
- );
139
- $accordion-item-toggle-focus-transform: var(
140
- --#{root-defaults.$prefix}accordion-item-toggle-focus-transform,
141
- #{defaults.$accordion-item-toggle-focus-transform}
142
- );
143
- $accordion-item-toggle-hover-transform: var(
144
- --#{root-defaults.$prefix}accordion-item-toggle-hover-transform,
145
- #{defaults.$accordion-item-toggle-hover-transform}
146
- );
147
- $accordion-item-toggle-active-transform: var(
148
- --#{root-defaults.$prefix}accordion-item-toggle-active-transform,
149
- #{defaults.$accordion-item-toggle-active-transform}
150
- );
151
- $accordion-item-toggle-disabled-transform: var(
152
- --#{root-defaults.$prefix}accordion-item-toggle-disabled-transform,
153
- #{defaults.$accordion-item-toggle-disabled-transform}
154
- );
155
- $accordion-item-toggle-transition: var(
156
- --#{root-defaults.$prefix}accordion-item-toggle-transition,
157
- background #{map.get(root-variables.$transition-durations, fast)}
158
- #{root-variables.$transition-timing-function},
159
- color #{map.get(root-variables.$transition-durations, fast)}
160
- #{root-variables.$transition-timing-function},
161
- transform #{map.get(root-variables.$transition-durations, fast)}
162
- #{root-variables.$transition-timing-function}
163
- );
164
- $accordion-item-toggle-transition-reduced-motion: var(
165
- --#{root-defaults.$prefix}accordion-item-toggle-transition-reduced-motion,
166
- background #{map.get(root-variables.$transition-durations, none)}
167
- #{root-variables.$transition-timing-function},
168
- color #{map.get(root-variables.$transition-durations, none)}
169
- #{root-variables.$transition-timing-function}
170
- );
171
-
172
289
  // Accordion item header properties.
290
+ // --graupl-accordion-item-header-padding-x
173
291
  $accordion-item-header-padding-x: var(
174
292
  --#{root-defaults.$prefix}accordion-item-header-padding-x,
175
293
  #{map.get(root-variables.$spacers, 0)}
176
294
  );
295
+
296
+ // --graupl-accordion-item-header-padding-y
177
297
  $accordion-item-header-padding-y: var(
178
298
  --#{root-defaults.$prefix}accordion-item-header-padding-y,
179
299
  #{map.get(root-variables.$spacers, 0)}
180
300
  );
301
+
302
+ // --graupl-accordion-item-header-padding
181
303
  $accordion-item-header-padding: var(
182
304
  --#{root-defaults.$prefix}accordion-item-header-padding,
183
305
  #{$accordion-item-header-padding-y} #{$accordion-item-header-padding-x}
184
306
  );
185
307
  /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
308
+ // --graupl-accordion-item-header-margin
186
309
  $accordion-item-header-margin: var(
187
310
  --#{root-defaults.$prefix}accordion-item-header-margin,
188
311
  calc(
@@ -198,159 +321,462 @@ $accordion-item-header-margin: var(
198
321
  /* stylelint-enable scss/operator-no-newline-after */
199
322
 
200
323
  // Accordion item title properties.
324
+ // --graupl-accordion-item-title-padding-x
201
325
  $accordion-item-title-padding-x: var(
202
326
  --#{root-defaults.$prefix}accordion-item-title-padding-x,
203
327
  #{map.get(root-variables.$spacers, 0)}
204
328
  );
329
+
330
+ // --graupl-accordion-item-title-padding-y
205
331
  $accordion-item-title-padding-y: var(
206
332
  --#{root-defaults.$prefix}accordion-item-title-padding-y,
207
333
  #{map.get(root-variables.$spacers, 0)}
208
334
  );
335
+
336
+ // --graupl-accordion-item-title-padding
209
337
  $accordion-item-title-padding: var(
210
338
  --#{root-defaults.$prefix}accordion-item-title-padding,
211
339
  #{$accordion-item-title-padding-y} #{$accordion-item-title-padding-x}
212
340
  );
341
+
342
+ // --graupl-accordion-item-title-margin-x
213
343
  $accordion-item-title-margin-x: var(
214
344
  --#{root-defaults.$prefix}accordion-item-title-margin-x,
215
345
  #{map.get(root-variables.$spacers, 0)}
216
346
  );
347
+
348
+ // --graupl-accordion-item-title-margin-y
217
349
  $accordion-item-title-margin-y: var(
218
350
  --#{root-defaults.$prefix}accordion-item-title-margin-y,
219
351
  #{map.get(root-variables.$spacers, 0)}
220
352
  );
353
+
354
+ // --graupl-accordion-item-title-margin
221
355
  $accordion-item-title-margin: var(
222
356
  --#{root-defaults.$prefix}accordion-item-title-margin,
223
357
  #{$accordion-item-title-margin-y} #{$accordion-item-title-margin-x}
224
358
  );
225
- $accordion-title-color: var(
226
- --#{root-defaults.$prefix}accordion-title-color,
227
- #{$accordion-color}
359
+
360
+ // --graupl-accordion-item-title-color
361
+ $accordion-item-title-color: var(
362
+ --#{root-defaults.$prefix}accordion-item-title-color,
363
+ #{$accordion-item-color}
364
+ );
365
+
366
+ // --graupl-accordion-item-title-background
367
+ $accordion-item-title-background: var(
368
+ --#{root-defaults.$prefix}accordion-item-title-background,
369
+ #{$accordion-item-background}
370
+ );
371
+
372
+ // --graupl-accordion-item-title-border-color
373
+ $accordion-item-title-border-color: var(
374
+ --#{root-defaults.$prefix}accordion-item-title-border-color,
375
+ #{$accordion-item-border-color}
228
376
  );
229
- $accordion-title-font-size: var(
230
- --#{root-defaults.$prefix}accordion-title-font-size,
377
+
378
+ // --graupl-accordion-item-title-font-size
379
+ $accordion-item-title-font-size: var(
380
+ --#{root-defaults.$prefix}accordion-item-title-font-size,
231
381
  #{typography.$h5-font-size}
232
382
  );
233
- $accordion-title-font-weight: var(
234
- --#{root-defaults.$prefix}accordion-title-font-weight,
383
+
384
+ // --graupl-accordion-item-title-font-weight
385
+ $accordion-item-title-font-weight: var(
386
+ --#{root-defaults.$prefix}accordion-item-title-font-weight,
235
387
  #{typography.$h5-font-weight}
236
388
  );
237
- $accordion-title-font-family: var(
238
- --#{root-defaults.$prefix}accordion-title-font-family,
389
+
390
+ // --graupl-accordion-item-title-font-family
391
+ $accordion-item-title-font-family: var(
392
+ --#{root-defaults.$prefix}accordion-item-title-font-family,
239
393
  #{typography.$h5-font-family}
240
394
  );
241
- $accordion-title-line-height: var(
242
- --#{root-defaults.$prefix}accordion-title-line-height,
395
+
396
+ // --graupl-accordion-item-title-line-height
397
+ $accordion-item-title-line-height: var(
398
+ --#{root-defaults.$prefix}accordion-item-title-line-height,
243
399
  #{typography.$h5-line-height}
244
400
  );
245
401
 
402
+ // --graupl-accordion-item-content-color
403
+ $accordion-item-content-color: var(
404
+ --#{root-defaults.$prefix}accordion-item-content-color,
405
+ #{$accordion-item-color}
406
+ );
407
+
408
+ // --graupl-accordion-item-content-background
409
+ $accordion-item-content-background: var(
410
+ --#{root-defaults.$prefix}accordion-item-content-background,
411
+ #{$accordion-item-background}
412
+ );
413
+
246
414
  // Accordion item content properties.
415
+ // --graupl-accordion-item-content-padding-x
247
416
  $accordion-item-content-padding-x: var(
248
417
  --#{root-defaults.$prefix}accordion-item-content-padding-x,
249
418
  #{map.get(root-variables.$spacers, 5)}
250
419
  );
420
+
421
+ // --graupl-accordion-item-content-padding-y
251
422
  $accordion-item-content-padding-y: var(
252
423
  --#{root-defaults.$prefix}accordion-item-content-padding-y,
253
424
  #{map.get(root-variables.$spacers, 5)}
254
425
  );
426
+
427
+ // --graupl-accordion-item-content-padding
255
428
  $accordion-item-content-padding: var(
256
429
  --#{root-defaults.$prefix}accordion-item-content-padding,
257
430
  #{$accordion-item-content-padding-y} #{$accordion-item-content-padding-x}
258
431
  );
432
+
433
+ // --graupl-accordion-item-content-column-gap
259
434
  $accordion-item-content-column-gap: var(
260
435
  --#{root-defaults.$prefix}accordion-item-content-column-gap,
261
436
  #{map.get(root-variables.$spacers, 3)}
262
437
  );
438
+
439
+ // --graupl-accordion-item-content-row-gap
263
440
  $accordion-item-content-row-gap: var(
264
441
  --#{root-defaults.$prefix}accordion-item-content-row-gap,
265
442
  #{map.get(root-variables.$spacers, 0)}
266
443
  );
444
+
445
+ // --graupl-accordion-item-content-gap
267
446
  $accordion-item-content-gap: var(
268
447
  --#{root-defaults.$prefix}accordion-item-content-gap,
269
448
  #{$accordion-item-content-column-gap} #{$accordion-item-content-row-gap}
270
449
  );
271
450
 
272
451
  // Accordion item body properties.
452
+ // --graupl-accordion-item-body-padding-x
273
453
  $accordion-item-body-padding-x: var(
274
454
  --#{root-defaults.$prefix}accordion-item-body-padding-x,
275
455
  #{map.get(root-variables.$spacers, 0)}
276
456
  );
457
+
458
+ // --graupl-accordion-item-body-padding-y
277
459
  $accordion-item-body-padding-y: var(
278
460
  --#{root-defaults.$prefix}accordion-item-body-padding-y,
279
461
  #{map.get(root-variables.$spacers, 0)}
280
462
  );
463
+
464
+ // --graupl-accordion-item-body-padding
281
465
  $accordion-item-body-padding: var(
282
466
  --#{root-defaults.$prefix}accordion-item-body-padding,
283
467
  #{$accordion-item-body-padding-y} #{$accordion-item-body-padding-x}
284
468
  );
285
469
 
286
470
  // Accordion item footer properties.
471
+ // --graupl-accordion-item-footer-padding-x
287
472
  $accordion-item-footer-padding-x: var(
288
473
  --#{root-defaults.$prefix}accordion-item-footer-padding-x,
289
474
  #{map.get(root-variables.$spacers, 0)}
290
475
  );
476
+
477
+ // --graupl-accordion-item-footer-padding-y
291
478
  $accordion-item-footer-padding-y: var(
292
479
  --#{root-defaults.$prefix}accordion-item-footer-padding-y,
293
480
  #{map.get(root-variables.$spacers, 0)}
294
481
  );
482
+
483
+ // --graupl-accordion-item-footer-padding
295
484
  $accordion-item-footer-padding: var(
296
485
  --#{root-defaults.$prefix}accordion-item-footer-padding,
297
486
  #{$accordion-item-footer-padding-y} #{$accordion-item-footer-padding-x}
298
487
  );
299
488
 
300
- // Accordion item transition properties.
489
+ // Accordion content transform properties.
490
+ // --graupl-accordion-item-content-transform
491
+ $accordion-item-content-transform: var(
492
+ --#{root-defaults.$prefix}accordion-item-content-transform,
493
+ #{defaults.$accordion-item-content-initial-transform}
494
+ );
495
+
496
+ // --graupl-accordion-item-content-open-transform
497
+ $accordion-item-content-open-transform: var(
498
+ --#{root-defaults.$prefix}accordion-item-content-open-transform,
499
+ #{defaults.$accordion-item-content-final-transform}
500
+ );
501
+
502
+ // Accordion toggle layout and transform properties.
503
+ // --graupl-accordion-item-toggle-padding-x
504
+ $accordion-item-toggle-padding-x: var(
505
+ --#{root-defaults.$prefix}accordion-item-toggle-padding-x,
506
+ #{button.$button-padding-x}
507
+ );
508
+
509
+ // --graupl-accordion-item-toggle-padding-y
510
+ $accordion-item-toggle-padding-y: var(
511
+ --#{root-defaults.$prefix}accordion-item-toggle-padding-y,
512
+ #{button.$button-padding-y}
513
+ );
514
+
515
+ // --graupl-accordion-item-toggle-padding
516
+ $accordion-item-toggle-padding: var(
517
+ --#{root-defaults.$prefix}accordion-item-toggle-padding,
518
+ #{$accordion-item-toggle-padding-y} #{$accordion-item-toggle-padding-x}
519
+ );
520
+
521
+ // --graupl-accordion-item-toggle-transform
522
+ $accordion-item-toggle-transform: var(
523
+ --#{root-defaults.$prefix}accordion-item-toggle-transform,
524
+ #{defaults.$accordion-item-toggle-initial-transform}
525
+ );
526
+
527
+ // --graupl-accordion-item-toggle-visited-transform
528
+ $accordion-item-toggle-visited-transform: var(
529
+ --#{root-defaults.$prefix}accordion-item-toggle-visited-transform,
530
+ #{$accordion-item-toggle-transform}
531
+ );
532
+
533
+ // --graupl-accordion-item-toggle-focus-transform
534
+ $accordion-item-toggle-focus-transform: var(
535
+ --#{root-defaults.$prefix}accordion-item-toggle-focus-transform,
536
+ #{$accordion-item-toggle-transform}
537
+ );
538
+
539
+ // --graupl-accordion-item-toggle-hover-transform
540
+ $accordion-item-toggle-hover-transform: var(
541
+ --#{root-defaults.$prefix}accordion-item-toggle-hover-transform,
542
+ #{$accordion-item-toggle-transform}
543
+ );
544
+
545
+ // --graupl-accordion-item-toggle-active-transform
546
+ $accordion-item-toggle-active-transform: var(
547
+ --#{root-defaults.$prefix}accordion-item-toggle-active-transform,
548
+ #{defaults.$accordion-item-toggle-final-transform}
549
+ );
550
+
551
+ // --graupl-accordion-item-toggle-disabled-transform
552
+ $accordion-item-toggle-disabled-transform: var(
553
+ --#{root-defaults.$prefix}accordion-item-toggle-disabled-transform,
554
+ #{defaults.$accordion-item-toggle-disabled-transform}
555
+ );
556
+ $accordion-item-toggle-transform-states: (
557
+ _default: $accordion-item-toggle-transform,
558
+ visited: $accordion-item-toggle-visited-transform,
559
+ focus: $accordion-item-toggle-focus-transform,
560
+ hover: $accordion-item-toggle-hover-transform,
561
+ active: $accordion-item-toggle-active-transform,
562
+ disabled: $accordion-item-toggle-disabled-transform,
563
+ );
564
+
565
+ // --graupl-accordion-item-toggle-pseudo-transform
566
+ $accordion-item-toggle-pseudo-transform: var(
567
+ --#{root-defaults.$prefix}accordion-item-toggle-pseudo-transform,
568
+ #{defaults.$accordion-item-toggle-pseudo-initial-transform}
569
+ );
570
+
571
+ // --graupl-accordion-item-toggle-pseudo-open-transform
572
+ $accordion-item-toggle-pseudo-open-transform: var(
573
+ --#{root-defaults.$prefix}accordion-item-toggle-pseudo-open-transform,
574
+ #{defaults.$accordion-item-toggle-pseudo-final-transform}
575
+ );
576
+
577
+ // Accordion item toggle color properties.
578
+ // --graupl-accordion-item-toggle-color
579
+ $accordion-item-toggle-color: var(
580
+ --#{root-defaults.$prefix}accordion-item-toggle-color,
581
+ #{$accordion-color}
582
+ );
583
+
584
+ // --graupl-accordion-item-toggle-visited-color
585
+ $accordion-item-toggle-visited-color: var(
586
+ --#{root-defaults.$prefix}accordion-item-toggle-visited-color,
587
+ #{$accordion-item-toggle-color}
588
+ );
589
+
590
+ // --graupl-accordion-item-toggle-focus-color
591
+ $accordion-item-toggle-focus-color: var(
592
+ --#{root-defaults.$prefix}accordion-item-toggle-focus-color,
593
+ #{$accordion-item-toggle-color}
594
+ );
595
+
596
+ // --graupl-accordion-item-toggle-hover-color
597
+ $accordion-item-toggle-hover-color: var(
598
+ --#{root-defaults.$prefix}accordion-item-toggle-hover-color,
599
+ #{$accordion-background}
600
+ );
601
+
602
+ // --graupl-accordion-item-toggle-active-color
603
+ $accordion-item-toggle-active-color: var(
604
+ --#{root-defaults.$prefix}accordion-item-toggle-active-color,
605
+ #{$accordion-item-toggle-hover-color}
606
+ );
607
+
608
+ // --graupl-accordion-item-toggle-disabled-color
609
+ $accordion-item-toggle-disabled-color: var(
610
+ --#{root-defaults.$prefix}accordion-item-toggle-disabled-color,
611
+ #{theme.get(primary, 200)}
612
+ );
613
+ $accordion-item-toggle-color-states: (
614
+ default: $accordion-item-toggle-color,
615
+ visited: $accordion-item-toggle-visited-color,
616
+ focus: $accordion-item-toggle-focus-color,
617
+ hover: $accordion-item-toggle-hover-color,
618
+ active: $accordion-item-toggle-active-color,
619
+ disabled: $accordion-item-toggle-disabled-color,
620
+ );
621
+
622
+ // --graupl-accordion-item-toggle-background
623
+ $accordion-item-toggle-background: var(
624
+ --#{root-defaults.$prefix}accordion-item-toggle-background,
625
+ #{$accordion-background}
626
+ );
627
+
628
+ // --graupl-accordion-item-toggle-visited-background
629
+ $accordion-item-toggle-visited-background: var(
630
+ --#{root-defaults.$prefix}accordion-item-toggle-visited-background,
631
+ #{$accordion-item-toggle-background}
632
+ );
633
+
634
+ // --graupl-accordion-item-toggle-focus-background
635
+ $accordion-item-toggle-focus-background: var(
636
+ --#{root-defaults.$prefix}accordion-item-toggle-focus-background,
637
+ #{$accordion-item-toggle-background}
638
+ );
639
+
640
+ // --graupl-accordion-item-toggle-hover-background
641
+ $accordion-item-toggle-hover-background: var(
642
+ --#{root-defaults.$prefix}accordion-item-toggle-hover-background,
643
+ #{$accordion-color}
644
+ );
645
+
646
+ // --graupl-accordion-item-toggle-active-background
647
+ $accordion-item-toggle-active-background: var(
648
+ --#{root-defaults.$prefix}accordion-item-toggle-active-background,
649
+ #{$accordion-item-toggle-hover-background}
650
+ );
651
+
652
+ // --graupl-accordion-item-toggle-disabled-background
653
+ $accordion-item-toggle-disabled-background: var(
654
+ --#{root-defaults.$prefix}accordion-item-toggle-disabled-background,
655
+ #{$accordion-background}
656
+ );
657
+ $accordion-item-toggle-background-states: (
658
+ default: $accordion-item-toggle-background,
659
+ visited: $accordion-item-toggle-visited-background,
660
+ focus: $accordion-item-toggle-focus-background,
661
+ hover: $accordion-item-toggle-hover-background,
662
+ active: $accordion-item-toggle-active-background,
663
+ disabled: $accordion-item-toggle-disabled-background,
664
+ );
665
+
666
+ // --graupl-accordion-item-toggle-border-color
667
+ $accordion-item-toggle-border-color: var(
668
+ --#{root-defaults.$prefix}accordion-item-toggle-border-color,
669
+ #{$accordion-item-border-color}
670
+ );
671
+
672
+ // --graupl-accordion-item-toggle-visited-border-color
673
+ $accordion-item-toggle-visited-border-color: var(
674
+ --#{root-defaults.$prefix}accordion-item-toggle-visited-border-color,
675
+ #{$accordion-item-toggle-border-color}
676
+ );
677
+
678
+ // --graupl-accordion-item-toggle-focus-border-color
679
+ $accordion-item-toggle-focus-border-color: var(
680
+ --#{root-defaults.$prefix}accordion-item-toggle-focus-border-color,
681
+ #{$accordion-item-toggle-border-color}
682
+ );
683
+
684
+ // --graupl-accordion-item-toggle-hover-border-color
685
+ $accordion-item-toggle-hover-border-color: var(
686
+ --#{root-defaults.$prefix}accordion-item-toggle-hover-border-color,
687
+ #{$accordion-item-border-color}
688
+ );
689
+
690
+ // --graupl-accordion-item-toggle-active-border-color
691
+ $accordion-item-toggle-active-border-color: var(
692
+ --#{root-defaults.$prefix}accordion-item-toggle-active-border-color,
693
+ #{$accordion-item-toggle-hover-border-color}
694
+ );
695
+
696
+ // --graupl-accordion-item-toggle-disabled-border-color
697
+ $accordion-item-toggle-disabled-border-color: var(
698
+ --#{root-defaults.$prefix}accordion-item-toggle-disabled-border-color,
699
+ #{theme.get(primary, 200)}
700
+ );
701
+ $accordion-item-toggle-border-color-states: (
702
+ default: $accordion-item-toggle-border-color,
703
+ visited: $accordion-item-toggle-visited-border-color,
704
+ focus: $accordion-item-toggle-focus-border-color,
705
+ hover: $accordion-item-toggle-hover-border-color,
706
+ active: $accordion-item-toggle-active-border-color,
707
+ disabled: $accordion-item-toggle-disabled-border-color,
708
+ );
709
+
710
+ // Accordion motion properties.
711
+ // --graupl-accordion-transition-duration
301
712
  $accordion-transition-duration: var(
302
713
  --#{root-defaults.$prefix}accordion-transition-duration,
303
714
  #{map.get(root-variables.$transition-durations, slow)}
304
715
  );
305
- $accordion-item-toggle-transition-duration: var(
306
- --#{root-defaults.$prefix}accordion-item-toggle-transition-duration,
307
- #{$accordion-transition-duration}
716
+
717
+ // --graupl-accordion-transition-timing-function.
718
+ $accordion-transition-timing-function: var(
719
+ --#{root-defaults.$prefix}accordion-transition-timing-function,
720
+ #{root-variables.$transition-timing-function}
308
721
  );
309
- $accordion-transition: var(
310
- --#{root-defaults.$prefix}accordion-transition,
311
- height #{map.get(root-variables.$transition-durations, slow)}
312
- #{root-variables.$transition-timing-function}
722
+
723
+ // --graupl-accordion-item-transition
724
+ $accordion-item-transition: var(
725
+ --#{root-defaults.$prefix}accordion-item-transition,
726
+ height #{$accordion-transition-duration}
727
+ #{$accordion-transition-timing-function}
313
728
  );
314
- $accordion-transition-reduced-motion: var(
315
- --#{root-defaults.$prefix}accordion-transition-reduced-motion,
729
+
730
+ // --graupl-accordion-item-transition-reduced-motion
731
+ $accordion-item-transition-reduced-motion: var(
732
+ --#{root-defaults.$prefix}accordion-item-transition-reduced-motion,
316
733
  none
317
734
  );
735
+
736
+ // --graupl-accordion-item-toggle-pseudo-transition
318
737
  $accordion-item-toggle-pseudo-transition: var(
319
- --#{root-defaults.$prefix}accordion-transition,
320
- transform #{map.get(root-variables.$transition-durations, slow)}
321
- #{root-variables.$transition-timing-function}
738
+ --#{root-defaults.$prefix}accordion-item-toggle-pseudo-transition,
739
+ transform #{$accordion-transition-duration}
740
+ #{$accordion-transition-timing-function}
322
741
  );
742
+
743
+ // --graupl-accordion-item-toggle-pseudo-transition-reduced-motion
323
744
  $accordion-item-toggle-pseudo-transition-reduced-motion: var(
324
- --#{root-defaults.$prefix}accordion-transition-reduced-motion,
745
+ --#{root-defaults.$prefix}accordion-item-toggle-pseudo-transition-reduced-motion,
325
746
  none
326
747
  );
748
+
749
+ // --graupl-accordion-item-content-transition
327
750
  $accordion-item-content-transition: var(
328
- --#{root-defaults.$prefix}accordion-transition,
329
- opacity #{map.get(root-variables.$transition-durations, slow)}
330
- #{root-variables.$transition-timing-function} transform
331
- #{map.get(root-variables.$transition-durations, slow)}
332
- #{root-variables.$transition-timing-function}
751
+ --#{root-defaults.$prefix}accordion-item-content-transition,
752
+ opacity #{$accordion-transition-duration}
753
+ #{$accordion-transition-timing-function} transform
754
+ #{$accordion-transition-duration} #{$accordion-transition-timing-function}
333
755
  );
756
+
757
+ // --graupl-accordion-item-content-transition-reduced-motion
334
758
  $accordion-item-content-transition-reduced-motion: var(
335
- --#{root-defaults.$prefix}accordion-transition-reduced-motion,
336
- opacity #{map.get(root-variables.$transition-durations, slow)}
337
- #{root-variables.$transition-timing-function}
759
+ --#{root-defaults.$prefix}accordion-item-content-transition-reduced-motion,
760
+ opacity #{$accordion-transition-duration}
761
+ #{$accordion-transition-timing-function}
338
762
  );
339
763
 
340
- // Accordion item transform properties.
341
- $accordion-item-content-transform: var(
342
- --#{root-defaults.$prefix}accordion-item-content-transform,
343
- #{defaults.$accordion-item-content-transform}
344
- );
345
- $accordion-item-content-open-transform: var(
346
- --#{root-defaults.$prefix}accordion-item-content-open-transform,
347
- #{defaults.$accordion-item-content-open-transform}
348
- );
349
- $accordion-item-toggle-pseudo-transform: var(
350
- --#{root-defaults.$prefix}accordion-item-toggle-pseudo-transform,
351
- #{defaults.$accordion-item-toggle-pseudo-transform}
764
+ // --graupl-accordion-item-toggle-transition
765
+ $accordion-item-toggle-transition: var(
766
+ --#{root-defaults.$prefix}accordion-item-toggle-transition,
767
+ background #{$accordion-transition-duration}
768
+ #{$accordion-transition-timing-function},
769
+ color #{$accordion-transition-duration}
770
+ #{$accordion-transition-timing-function},
771
+ transform #{$accordion-transition-duration}
772
+ #{$accordion-transition-timing-function}
352
773
  );
353
- $accordion-item-toggle-pseudo-open-transform: var(
354
- --#{root-defaults.$prefix}accordion-item-toggle-pseudo-open-transform,
355
- #{defaults.$accordion-item-toggle-pseudo-open-transform}
774
+
775
+ // --graupl-accordion-item-toggle-transition-reduced-motion
776
+ $accordion-item-toggle-transition-reduced-motion: var(
777
+ --#{root-defaults.$prefix}accordion-item-toggle-transition-reduced-motion,
778
+ background #{$accordion-transition-duration}
779
+ #{$accordion-transition-timing-function},
780
+ color #{$accordion-transition-duration}
781
+ #{$accordion-transition-timing-function}
356
782
  );