@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/menu/_variables.scss CHANGED
@@ -3,6 +3,155 @@
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
+ // Custom property defaults:
7
+ // | Custom property | Default |
8
+ // | ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
9
+ // | --graupl-menu-flex-direction | row |
10
+ // | --graupl-menu-padding-x | var(--graupl-spacer-0) |
11
+ // | --graupl-menu-padding-y | var(--graupl-spacer-0) |
12
+ // | --graupl-menu-padding | var(--graupl-menu-padding-y) var(--graupl-menu-padding-x) |
13
+ // | --graupl-menu-column-gap | var(--graupl-spacer-0) |
14
+ // | --graupl-menu-row-gap | var(--graupl-spacer-0) |
15
+ // | --graupl-menu-gap | var(--graupl-menu-column-gap) var(--graupl-menu-row-gap) |
16
+ // | --graupl-menu-show-display | flex |
17
+ // | --graupl-menu-hide-display | none |
18
+ // | --graupl-menu-display | flex |
19
+ // | --graupl-menu-background | var(--graupl-background) |
20
+ // | --graupl-menu-color | var(--graupl-color) |
21
+ // | --graupl-menu-border-color | var(--graupl-menu-color) |
22
+ // | --graupl-menu-border-top-left-radius | var(--graupl-border-top-left-radius) |
23
+ // | --graupl-menu-border-top-right-radius | var(--graupl-border-top-right-radius) |
24
+ // | --graupl-menu-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |
25
+ // | --graupl-menu-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |
26
+ // | --graupl-menu-border-radius | var(--graupl-menu-border-top-left-radius) var(--graupl-menu-border-top-right-radius) var(--graupl-menu-border-bottom-right-radius) var(--graupl-menu-border-bottom-left-radius) |
27
+ // | --graupl-menu-border-top-width | 0 |
28
+ // | --graupl-menu-border-right-width | 0 |
29
+ // | --graupl-menu-border-bottom-width | 0 |
30
+ // | --graupl-menu-border-left-width | 0 |
31
+ // | --graupl-menu-border-width | var(--graupl-menu-border-top-width) var(--graupl-menu-border-right-width) var(--graupl-menu-border-bottom-width) var(--graupl-menu-border-left-width) |
32
+ // | --graupl-menu-border-top-style | var(--graupl-border-top-style) |
33
+ // | --graupl-menu-border-right-style | var(--graupl-border-right-style) |
34
+ // | --graupl-menu-border-bottom-style | var(--graupl-border-bottom-style) |
35
+ // | --graupl-menu-border-left-style | var(--graupl-border-left-style) |
36
+ // | --graupl-menu-border-style | var(--graupl-menu-border-top-style) var(--graupl-menu-border-right-style) var(--graupl-menu-border-bottom-style) var(--graupl-menu-border-left-style) |
37
+ // | --graupl-submenu-flex-direction | column |
38
+ // | --graupl-submenu-z-index | 2 |
39
+ // | --graupl-submenu-padding-x | var(--graupl-spacer-0) |
40
+ // | --graupl-submenu-padding-y | var(--graupl-spacer-0) |
41
+ // | --graupl-submenu-padding | var(--graupl-submenu-padding-y) var(--graupl-submenu-padding-x) |
42
+ // | --graupl-submenu-column-gap | var(--graupl-menu-column-gap) |
43
+ // | --graupl-submenu-row-gap | var(--graupl-menu-row-gap) |
44
+ // | --graupl-submenu-gap | var(--graupl-submenu-column-gap) var(--graupl-submenu-row-gap) |
45
+ // | --graupl-submenu-show-display | flex |
46
+ // | --graupl-submenu-hide-display | none |
47
+ // | --graupl-submenu-display | none |
48
+ // | --graupl-submenu-background | var(--graupl-menu-background) |
49
+ // | --graupl-submenu-color | var(--graupl-menu-color) |
50
+ // | --graupl-submenu-border-color | var(--graupl-menu-border-color) |
51
+ // | --graupl-submenu-border-top-left-radius | var(--graupl-border-top-left-radius) |
52
+ // | --graupl-submenu-border-top-right-radius | var(--graupl-border-top-right-radius) |
53
+ // | --graupl-submenu-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |
54
+ // | --graupl-submenu-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |
55
+ // | --graupl-submenu-border-radius | var(--graupl-submenu-border-top-left-radius) var(--graupl-submenu-border-top-right-radius) var(--graupl-submenu-border-bottom-right-radius) var(--graupl-submenu-border-bottom-left-radius) |
56
+ // | --graupl-submenu-border-top-width | var(--graupl-border-top-width) |
57
+ // | --graupl-submenu-border-right-width | var(--graupl-border-right-width) |
58
+ // | --graupl-submenu-border-bottom-width | var(--graupl-border-bottom-width) |
59
+ // | --graupl-submenu-border-left-width | var(--graupl-border-left-width) |
60
+ // | --graupl-submenu-border-width | var(--graupl-submenu-border-top-width) var(--graupl-submenu-border-right-width) var(--graupl-submenu-border-bottom-width) var(--graupl-submenu-border-left-width) |
61
+ // | --graupl-submenu-border-top-style | var(--graupl-border-top-style) |
62
+ // | --graupl-submenu-border-right-style | var(--graupl-border-right-style) |
63
+ // | --graupl-submenu-border-bottom-style | var(--graupl-border-bottom-style) |
64
+ // | --graupl-submenu-border-left-style | var(--graupl-border-left-style) |
65
+ // | --graupl-submenu-border-style | var(--graupl-submenu-border-top-style) var(--graupl-submenu-border-right-style) var(--graupl-submenu-border-bottom-style) var(--graupl-submenu-border-left-style) |
66
+ // | --graupl-submenu-position | absolute |
67
+ // | --graupl-submenu-top | 100% |
68
+ // | --graupl-submenu-right | auto |
69
+ // | --graupl-submenu-bottom | auto |
70
+ // | --graupl-submenu-left | 0 |
71
+ // | --graupl-submenu-inset | 100% auto auto 0 |
72
+ // | --graupl-menu-item-min-width | min-content |
73
+ // | --graupl-menu-item-max-width | 100% |
74
+ // | --graupl-menu-item-padding-x | var(--graupl-spacer-0) |
75
+ // | --graupl-menu-item-padding-y | var(--graupl-spacer-0) |
76
+ // | --graupl-menu-item-padding | var(--graupl-menu-item-padding-y) var(--graupl-menu-item-padding-x) |
77
+ // | --graupl-submenu-item-width | 100% |
78
+ // | --graupl-menu-link-padding-x | var(--graupl-spacer-5) |
79
+ // | --graupl-menu-link-padding-y | var(--graupl-spacer-3) |
80
+ // | --graupl-menu-link-padding | var(--graupl-menu-link-padding-y) var(--graupl-menu-link-padding-x) |
81
+ // | --graupl-menu-link-transition | background var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function), color var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function) |
82
+ // | --graupl-menu-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) |
83
+ // | --graupl-menu-link-transform | none |
84
+ // | --graupl-menu-link-visited-transform | var(--graupl-menu-link-transform) |
85
+ // | --graupl-menu-link-focus-transform | var(--graupl-menu-link-transform) |
86
+ // | --graupl-menu-link-hover-transform | none |
87
+ // | --graupl-menu-link-active-transform | var(--graupl-menu-link-hover-transform) |
88
+ // | --graupl-menu-link-disabled-transform | none |
89
+ // | --graupl-menu-link-column-gap | var(--graupl-menu-link-padding-x) |
90
+ // | --graupl-menu-link-row-gap | var(--graupl-spacer-0) |
91
+ // | --graupl-menu-link-gap | var(--graupl-menu-link-column-gap) var(--graupl-menu-link-row-gap) |
92
+ // | --graupl-menu-link-background | var(--graupl-menu-background) |
93
+ // | --graupl-menu-link-visited-background | var(--graupl-menu-link-background) |
94
+ // | --graupl-menu-link-focus-background | var(--graupl-menu-link-background) |
95
+ // | --graupl-menu-link-hover-background | var(--graupl-menu-color) |
96
+ // | --graupl-menu-link-active-background | var(--graupl-menu-link-hover-background) |
97
+ // | --graupl-menu-link-disabled-background | var(--graupl-background) |
98
+ // | --graupl-menu-link-color | var(--graupl-menu-color) |
99
+ // | --graupl-menu-link-visited-color | var(--graupl-menu-link-color) |
100
+ // | --graupl-menu-link-focus-color | var(--graupl-menu-link-color) |
101
+ // | --graupl-menu-link-hover-color | var(--graupl-menu-background) |
102
+ // | --graupl-menu-link-active-color | var(--graupl-menu-link-hover-color) |
103
+ // | --graupl-menu-link-disabled-color | var(--graupl-theme-active--primary--200) |
104
+ // | --graupl-menu-link-text-decoration | none |
105
+ // | --graupl-menu-link-visited-text-decoration | var(--graupl-menu-link-text-decoration) |
106
+ // | --graupl-menu-link-focus-text-decoration | var(--graupl-menu-link-text-decoration) |
107
+ // | --graupl-menu-link-hover-text-decoration | none |
108
+ // | --graupl-menu-link-active-text-decoration | var(--graupl-menu-link-hover-text-decoration) |
109
+ // | --graupl-menu-link-disabled-text-decoration | none |
110
+ // | --graupl-menu-link-text-decoration-thickness | var(--graupl-border-width) |
111
+ // | --graupl-menu-link-visited-text-decoration-thickness | var(--graupl-menu-link-text-decoration-thickness) |
112
+ // | --graupl-menu-link-focus-text-decoration-thickness | var(--graupl-menu-link-text-decoration-thickness) |
113
+ // | --graupl-menu-link-hover-text-decoration-thickness | var(--graupl-border-width) |
114
+ // | --graupl-menu-link-active-text-decoration-thickness | var(--graupl-menu-link-hover-text-decoration-thickness) |
115
+ // | --graupl-menu-link-disabled-text-decoration-thickness | var(--graupl-border-width) |
116
+ // | --graupl-menu-link-text-decoration-style | solid |
117
+ // | --graupl-menu-link-visited-text-decoration-style | var(--graupl-menu-link-text-decoration-style) |
118
+ // | --graupl-menu-link-focus-text-decoration-style | var(--graupl-menu-link-text-decoration-style) |
119
+ // | --graupl-menu-link-hover-text-decoration-style | solid |
120
+ // | --graupl-menu-link-active-text-decoration-style | var(--graupl-menu-link-hover-text-decoration-style) |
121
+ // | --graupl-menu-link-disabled-text-decoration-style | solid |
122
+ // | --graupl-menu-link-text-decoration-color | var(--graupl-menu-link-color) |
123
+ // | --graupl-menu-link-visited-text-decoration-color | var(--graupl-menu-link-visited-color) |
124
+ // | --graupl-menu-link-focus-text-decoration-color | var(--graupl-menu-link-focus-color) |
125
+ // | --graupl-menu-link-hover-text-decoration-color | var(--graupl-menu-link-hover-color) |
126
+ // | --graupl-menu-link-active-text-decoration-color | var(--graupl-menu-link-active-color) |
127
+ // | --graupl-menu-link-disabled-text-decoration-color | var(--graupl-menu-link-disabled-color) |
128
+ // | --graupl-menu-link-border-top-left-radius | var(--graupl-border-top-left-radius) |
129
+ // | --graupl-menu-link-border-top-right-radius | var(--graupl-border-top-right-radius) |
130
+ // | --graupl-menu-link-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |
131
+ // | --graupl-menu-link-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |
132
+ // | --graupl-menu-link-border-radius | var(--graupl-menu-link-border-top-left-radius) var(--graupl-menu-link-border-top-right-radius) var(--graupl-menu-link-border-bottom-right-radius) var(--graupl-menu-link-border-bottom-left-radius) |
133
+ // | --graupl-menu-link-border-top-width | 0 |
134
+ // | --graupl-menu-link-border-right-width | 0 |
135
+ // | --graupl-menu-link-border-bottom-width | 0 |
136
+ // | --graupl-menu-link-border-left-width | 0 |
137
+ // | --graupl-menu-link-border-width | var(--graupl-menu-link-border-top-width) var(--graupl-menu-link-border-right-width) var(--graupl-menu-link-border-bottom-width) var(--graupl-menu-link-border-left-width) |
138
+ // | --graupl-menu-link-border-top-style | var(--graupl-border-top-style) |
139
+ // | --graupl-menu-link-border-right-style | var(--graupl-border-right-style) |
140
+ // | --graupl-menu-link-border-bottom-style | var(--graupl-border-bottom-style) |
141
+ // | --graupl-menu-link-border-left-style | var(--graupl-border-left-style) |
142
+ // | --graupl-menu-link-border-style | var(--graupl-menu-link-border-top-style) var(--graupl-menu-link-border-right-style) var(--graupl-menu-link-border-bottom-style) var(--graupl-menu-link-border-left-style) |
143
+ // | --graupl-menu-link-border-color | var(--graupl-menu-link-color) |
144
+ // | --graupl-menu-link-visited-border-color | var(--graupl-menu-link-border-color) |
145
+ // | --graupl-menu-link-focus-border-color | var(--graupl-menu-link-border-color) |
146
+ // | --graupl-menu-link-hover-border-color | var(--graupl-menu-link-hover-color) |
147
+ // | --graupl-menu-link-active-border-color | var(--graupl-menu-link-hover-border-color) |
148
+ // | --graupl-menu-link-disabled-border-color | var(--graupl-menu-link-disabled-color) |
149
+ // | --graupl-submenu-toggle-transform | rotate(0deg) |
150
+ // | --graupl-submenu-toggle-open-transform | rotate(-180deg) |
151
+ // | --graupl-submenu-toggle-content | "'↓'" |
152
+ // | --graupl-submenu-toggle-transition | transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function) |
153
+ // | --graupl-submenu-toggle-transition-reduced-motion | none |
154
+
6
155
  @use "defaults";
7
156
  @use "../../defaults" as root-defaults;
8
157
  @use "../../variables" as root-variables;
@@ -11,121 +160,172 @@
11
160
  @use "sass:map";
12
161
 
13
162
  // Menu properties.
163
+ // --graupl-menu-flex-direction
14
164
  $menu-flex-direction: var(
15
165
  --#{root-defaults.$prefix}menu-flex-direction,
16
166
  #{defaults.$menu-flex-direction}
17
167
  );
168
+
169
+ // --graupl-menu-padding-x
18
170
  $menu-padding-x: var(
19
171
  --#{root-defaults.$prefix}menu-padding-x,
20
172
  #{map.get(root-variables.$spacers, 0)}
21
173
  );
174
+
175
+ // --graupl-menu-padding-y
22
176
  $menu-padding-y: var(
23
177
  --#{root-defaults.$prefix}menu-padding-y,
24
178
  #{map.get(root-variables.$spacers, 0)}
25
179
  );
180
+
181
+ // --graupl-menu-padding
26
182
  $menu-padding: var(
27
183
  --#{root-defaults.$prefix}menu-padding,
28
184
  #{$menu-padding-y} #{$menu-padding-x}
29
185
  );
30
186
 
31
187
  // Menu gap properties.
188
+ // --graupl-menu-column-gap
32
189
  $menu-column-gap: var(
33
190
  --#{root-defaults.$prefix}menu-column-gap,
34
191
  #{map.get(root-variables.$spacers, 0)}
35
192
  );
193
+
194
+ // --graupl-menu-row-gap
36
195
  $menu-row-gap: var(
37
196
  --#{root-defaults.$prefix}menu-row-gap,
38
197
  #{map.get(root-variables.$spacers, 0)}
39
198
  );
199
+
200
+ // --graupl-menu-gap
40
201
  $menu-gap: var(
41
202
  --#{root-defaults.$prefix}menu-gap,
42
203
  #{$menu-column-gap} #{$menu-row-gap}
43
204
  );
44
205
 
45
206
  // Menu display properties.
207
+ // --graupl-menu-show-display
46
208
  $menu-show-display: var(
47
209
  --#{root-defaults.$prefix}menu-show-display,
48
210
  #{defaults.$menu-show-display}
49
211
  );
212
+
213
+ // --graupl-menu-hide-display
50
214
  $menu-hide-display: var(
51
215
  --#{root-defaults.$prefix}menu-hide-display,
52
216
  #{defaults.$menu-hide-display}
53
217
  );
218
+
219
+ // --graupl-menu-display
54
220
  $menu-display: var(
55
221
  --#{root-defaults.$prefix}menu-display,
56
222
  #{defaults.$menu-show-display}
57
223
  );
58
224
 
59
225
  // Menu color properties.
226
+ // --graupl-menu-background
60
227
  $menu-background: var(
61
228
  --#{root-defaults.$prefix}menu-background,
62
229
  #{color.$background}
63
230
  );
231
+
232
+ // --graupl-menu-color
64
233
  $menu-color: var(--#{root-defaults.$prefix}menu-color, #{color.$color});
65
234
 
66
235
  // Menu border properties.
236
+ // --graupl-menu-border-color
67
237
  $menu-border-color: var(
68
238
  --#{root-defaults.$prefix}menu-border-color,
69
239
  #{$menu-color}
70
240
  );
241
+
242
+ // --graupl-menu-border-top-left-radius
71
243
  $menu-border-top-left-radius: var(
72
244
  --#{root-defaults.$prefix}menu-border-top-left-radius,
73
245
  #{root-variables.$border-top-left-radius}
74
246
  );
247
+
248
+ // --graupl-menu-border-top-right-radius
75
249
  $menu-border-top-right-radius: var(
76
250
  --#{root-defaults.$prefix}menu-border-top-right-radius,
77
251
  #{root-variables.$border-top-right-radius}
78
252
  );
253
+
254
+ // --graupl-menu-border-bottom-left-radius
79
255
  $menu-border-bottom-left-radius: var(
80
256
  --#{root-defaults.$prefix}menu-border-bottom-left-radius,
81
257
  #{root-variables.$border-bottom-left-radius}
82
258
  );
259
+
260
+ // --graupl-menu-border-bottom-right-radius
83
261
  $menu-border-bottom-right-radius: var(
84
262
  --#{root-defaults.$prefix}menu-border-bottom-right-radius,
85
263
  #{root-variables.$border-bottom-right-radius}
86
264
  );
265
+
266
+ // --graupl-menu-border-radius
87
267
  $menu-border-radius: var(
88
268
  --#{root-defaults.$prefix}menu-border-radius,
89
269
  #{$menu-border-top-left-radius} #{$menu-border-top-right-radius}
90
270
  #{$menu-border-bottom-right-radius} #{$menu-border-bottom-left-radius}
91
271
  );
272
+
273
+ // --graupl-menu-border-top-width
92
274
  $menu-border-top-width: var(
93
275
  --#{root-defaults.$prefix}menu-border-top-width,
94
276
  #{defaults.$menu-border-width}
95
277
  );
278
+
279
+ // --graupl-menu-border-right-width
96
280
  $menu-border-right-width: var(
97
281
  --#{root-defaults.$prefix}menu-border-right-width,
98
282
  #{defaults.$menu-border-width}
99
283
  );
284
+
285
+ // --graupl-menu-border-bottom-width
100
286
  $menu-border-bottom-width: var(
101
287
  --#{root-defaults.$prefix}menu-border-bottom-width,
102
288
  #{defaults.$menu-border-width}
103
289
  );
290
+
291
+ // --graupl-menu-border-left-width
104
292
  $menu-border-left-width: var(
105
293
  --#{root-defaults.$prefix}menu-border-left-width,
106
294
  #{defaults.$menu-border-width}
107
295
  );
296
+
297
+ // --graupl-menu-border-width
108
298
  $menu-border-width: var(
109
299
  --#{root-defaults.$prefix}menu-border-width,
110
300
  #{$menu-border-top-width} #{$menu-border-right-width}
111
301
  #{$menu-border-bottom-width} #{$menu-border-left-width}
112
302
  );
303
+
304
+ // --graupl-menu-border-top-style
113
305
  $menu-border-top-style: var(
114
306
  --#{root-defaults.$prefix}menu-border-top-style,
115
307
  #{root-variables.$border-top-style}
116
308
  );
309
+
310
+ // --graupl-menu-border-right-style
117
311
  $menu-border-right-style: var(
118
312
  --#{root-defaults.$prefix}menu-border-right-style,
119
313
  #{root-variables.$border-right-style}
120
314
  );
315
+
316
+ // --graupl-menu-border-bottom-style
121
317
  $menu-border-bottom-style: var(
122
318
  --#{root-defaults.$prefix}menu-border-bottom-style,
123
319
  #{root-variables.$border-bottom-style}
124
320
  );
321
+
322
+ // --graupl-menu-border-left-style
125
323
  $menu-border-left-style: var(
126
324
  --#{root-defaults.$prefix}menu-border-left-style,
127
325
  #{root-variables.$border-left-style}
128
326
  );
327
+
328
+ // --graupl-menu-border-style
129
329
  $menu-border-style: var(
130
330
  --#{root-defaults.$prefix}menu-border-style,
131
331
  #{$menu-border-top-style} #{$menu-border-right-style}
@@ -133,125 +333,178 @@ $menu-border-style: var(
133
333
  );
134
334
 
135
335
  // Submenu properties
336
+ // --graupl-submenu-flex-direction
136
337
  $submenu-flex-direction: var(
137
338
  --#{root-defaults.$prefix}submenu-flex-direction,
138
339
  #{defaults.$submenu-flex-direction}
139
340
  );
341
+
342
+ // --graupl-submenu-z-index
140
343
  $submenu-z-index: var(
141
344
  --#{root-defaults.$prefix}submenu-z-index,
142
345
  #{defaults.$submenu-z-index}
143
346
  );
347
+
348
+ // --graupl-submenu-padding-x
144
349
  $submenu-padding-x: var(
145
350
  --#{root-defaults.$prefix}submenu-padding-x,
146
351
  #{map.get(root-variables.$spacers, 0)}
147
352
  );
353
+
354
+ // --graupl-submenu-padding-y
148
355
  $submenu-padding-y: var(
149
356
  --#{root-defaults.$prefix}submenu-padding-y,
150
357
  #{map.get(root-variables.$spacers, 0)}
151
358
  );
359
+
360
+ // --graupl-submenu-padding
152
361
  $submenu-padding: var(
153
362
  --#{root-defaults.$prefix}submenu-padding,
154
363
  #{$submenu-padding-y} #{$submenu-padding-x}
155
364
  );
156
365
 
157
366
  // Submenu gap properties.
367
+ // --graupl-submenu-column-gap
158
368
  $submenu-column-gap: var(
159
369
  --#{root-defaults.$prefix}submenu-column-gap,
160
370
  #{$menu-column-gap}
161
371
  );
372
+
373
+ // --graupl-submenu-row-gap
162
374
  $submenu-row-gap: var(
163
375
  --#{root-defaults.$prefix}submenu-row-gap,
164
376
  #{$menu-row-gap}
165
377
  );
378
+
379
+ // --graupl-submenu-gap
166
380
  $submenu-gap: var(
167
381
  --#{root-defaults.$prefix}submenu-gap,
168
382
  #{$submenu-column-gap} #{$submenu-row-gap}
169
383
  );
170
384
 
171
385
  // Submenu display properties.
386
+ // --graupl-submenu-show-display
172
387
  $submenu-show-display: var(
173
388
  --#{root-defaults.$prefix}submenu-show-display,
174
389
  #{defaults.$submenu-show-display}
175
390
  );
391
+
392
+ // --graupl-submenu-hide-display
176
393
  $submenu-hide-display: var(
177
394
  --#{root-defaults.$prefix}submenu-hide-display,
178
395
  #{defaults.$submenu-hide-display}
179
396
  );
397
+
398
+ // --graupl-submenu-display
180
399
  $submenu-display: var(
181
400
  --#{root-defaults.$prefix}submenu-display,
182
401
  #{defaults.$submenu-hide-display}
183
402
  );
184
403
 
185
404
  // Submenu color properties.
405
+ // --graupl-submenu-background
186
406
  $submenu-background: var(
187
407
  --#{root-defaults.$prefix}submenu-background,
188
408
  #{$menu-background}
189
409
  );
410
+
411
+ // --graupl-submenu-color
190
412
  $submenu-color: var(--#{root-defaults.$prefix}submenu-color, #{$menu-color});
191
413
 
192
414
  // Submenu border properties.
415
+ // --graupl-submenu-border-color
193
416
  $submenu-border-color: var(
194
417
  --#{root-defaults.$prefix}submenu-border-color,
195
- #{$submenu-color}
418
+ #{$menu-border-color}
196
419
  );
420
+
421
+ // --graupl-submenu-border-top-left-radius
197
422
  $submenu-border-top-left-radius: var(
198
423
  --#{root-defaults.$prefix}submenu-border-top-left-radius,
199
424
  #{root-variables.$border-top-left-radius}
200
425
  );
426
+
427
+ // --graupl-submenu-border-top-right-radius
201
428
  $submenu-border-top-right-radius: var(
202
429
  --#{root-defaults.$prefix}submenu-border-top-right-radius,
203
430
  #{root-variables.$border-top-right-radius}
204
431
  );
432
+
433
+ // --graupl-submenu-border-bottom-left-radius
205
434
  $submenu-border-bottom-left-radius: var(
206
435
  --#{root-defaults.$prefix}submenu-border-bottom-left-radius,
207
436
  #{root-variables.$border-bottom-left-radius}
208
437
  );
438
+
439
+ // --graupl-submenu-border-bottom-right-radius
209
440
  $submenu-border-bottom-right-radius: var(
210
441
  --#{root-defaults.$prefix}submenu-border-bottom-right-radius,
211
442
  #{root-variables.$border-bottom-right-radius}
212
443
  );
444
+
445
+ // --graupl-submenu-border-radius
213
446
  $submenu-border-radius: var(
214
447
  --#{root-defaults.$prefix}submenu-border-radius,
215
448
  #{$submenu-border-top-left-radius} #{$submenu-border-top-right-radius}
216
449
  #{$submenu-border-bottom-right-radius} #{$submenu-border-bottom-left-radius}
217
450
  );
451
+
452
+ // --graupl-submenu-border-top-width
218
453
  $submenu-border-top-width: var(
219
454
  --#{root-defaults.$prefix}submenu-border-top-width,
220
455
  #{root-variables.$border-top-width}
221
456
  );
457
+
458
+ // --graupl-submenu-border-right-width
222
459
  $submenu-border-right-width: var(
223
460
  --#{root-defaults.$prefix}submenu-border-right-width,
224
461
  #{root-variables.$border-right-width}
225
462
  );
463
+
464
+ // --graupl-submenu-border-bottom-width
226
465
  $submenu-border-bottom-width: var(
227
466
  --#{root-defaults.$prefix}submenu-border-bottom-width,
228
467
  #{root-variables.$border-bottom-width}
229
468
  );
469
+
470
+ // --graupl-submenu-border-left-width
230
471
  $submenu-border-left-width: var(
231
472
  --#{root-defaults.$prefix}submenu-border-left-width,
232
473
  #{root-variables.$border-left-width}
233
474
  );
475
+
476
+ // --graupl-submenu-border-width
234
477
  $submenu-border-width: var(
235
478
  --#{root-defaults.$prefix}submenu-border-width,
236
479
  #{$submenu-border-top-width} #{$submenu-border-right-width}
237
480
  #{$submenu-border-bottom-width} #{$submenu-border-left-width}
238
481
  );
482
+
483
+ // --graupl-submenu-border-top-style
239
484
  $submenu-border-top-style: var(
240
485
  --#{root-defaults.$prefix}submenu-border-top-style,
241
486
  #{root-variables.$border-top-style}
242
487
  );
488
+
489
+ // --graupl-submenu-border-right-style
243
490
  $submenu-border-right-style: var(
244
491
  --#{root-defaults.$prefix}submenu-border-right-style,
245
492
  #{root-variables.$border-right-style}
246
493
  );
494
+
495
+ // --graupl-submenu-border-bottom-style
247
496
  $submenu-border-bottom-style: var(
248
497
  --#{root-defaults.$prefix}submenu-border-bottom-style,
249
498
  #{root-variables.$border-bottom-style}
250
499
  );
500
+
501
+ // --graupl-submenu-border-left-style
251
502
  $submenu-border-left-style: var(
252
503
  --#{root-defaults.$prefix}submenu-border-left-style,
253
504
  #{root-variables.$border-left-style}
254
505
  );
506
+
507
+ // --graupl-submenu-border-style
255
508
  $submenu-border-style: var(
256
509
  --#{root-defaults.$prefix}submenu-border-style,
257
510
  #{$submenu-border-top-style} #{$submenu-border-right-style}
@@ -259,74 +512,101 @@ $submenu-border-style: var(
259
512
  );
260
513
 
261
514
  // Submenu position properties.
515
+ // --graupl-submenu-position
262
516
  $submenu-position: var(
263
517
  --#{root-defaults.$prefix}submenu-position,
264
518
  #{defaults.$submenu-position}
265
519
  );
520
+
521
+ // --graupl-submenu-top
266
522
  $submenu-top: var(
267
523
  --#{root-defaults.$prefix}submenu-top,
268
524
  #{defaults.$submenu-top}
269
525
  );
526
+
527
+ // --graupl-submenu-right
270
528
  $submenu-right: var(
271
529
  --#{root-defaults.$prefix}submenu-right,
272
530
  #{defaults.$submenu-right}
273
531
  );
532
+
533
+ // --graupl-submenu-bottom
274
534
  $submenu-bottom: var(
275
535
  --#{root-defaults.$prefix}submenu-bottom,
276
536
  #{defaults.$submenu-bottom}
277
537
  );
538
+
539
+ // --graupl-submenu-left
278
540
  $submenu-left: var(
279
541
  --#{root-defaults.$prefix}submenu-left,
280
542
  #{defaults.$submenu-left}
281
543
  );
544
+
545
+ // --graupl-submenu-inset
282
546
  $submenu-inset: var(
283
547
  --#{root-defaults.$prefix}submenu-inset,
284
548
  #{$submenu-top} #{$submenu-right} #{$submenu-bottom} #{$submenu-left}
285
549
  );
286
550
 
287
551
  // Menu item properties.
552
+ // --graupl-menu-item-min-width
288
553
  $menu-item-min-width: var(
289
554
  --#{root-defaults.$prefix}menu-item-min-width,
290
555
  #{defaults.$menu-item-min-width}
291
556
  );
557
+
558
+ // --graupl-menu-item-max-width
292
559
  $menu-item-max-width: var(
293
560
  --#{root-defaults.$prefix}menu-item-max-width,
294
561
  #{defaults.$menu-item-max-width}
295
562
  );
563
+
564
+ // --graupl-menu-item-padding-x
296
565
  $menu-item-padding-x: var(
297
566
  --#{root-defaults.$prefix}menu-item-padding-x,
298
567
  #{map.get(root-variables.$spacers, 0)}
299
568
  );
569
+
570
+ // --graupl-menu-item-padding-y
300
571
  $menu-item-padding-y: var(
301
572
  --#{root-defaults.$prefix}menu-item-padding-y,
302
573
  #{map.get(root-variables.$spacers, 0)}
303
574
  );
575
+
576
+ // --graupl-menu-item-padding
304
577
  $menu-item-padding: var(
305
578
  --#{root-defaults.$prefix}menu-item-padding,
306
579
  #{$menu-item-padding-y} #{$menu-item-padding-x}
307
580
  );
308
581
 
309
582
  // Submenu item properties.
583
+ // --graupl-submenu-item-width
310
584
  $submenu-item-width: var(
311
585
  --#{root-defaults.$prefix}submenu-item-width,
312
586
  #{defaults.$submenu-item-width}
313
587
  );
314
588
 
315
589
  // Menu link properties.
590
+ // --graupl-menu-link-padding-x
316
591
  $menu-link-padding-x: var(
317
592
  --#{root-defaults.$prefix}menu-link-padding-x,
318
593
  #{map.get(root-variables.$spacers, 5)}
319
594
  );
595
+
596
+ // --graupl-menu-link-padding-y
320
597
  $menu-link-padding-y: var(
321
598
  --#{root-defaults.$prefix}menu-link-padding-y,
322
599
  #{map.get(root-variables.$spacers, 3)}
323
600
  );
601
+
602
+ // --graupl-menu-link-padding
324
603
  $menu-link-padding: var(
325
604
  --#{root-defaults.$prefix}menu-link-padding,
326
605
  #{$menu-link-padding-y} #{$menu-link-padding-x}
327
606
  );
328
607
 
329
608
  // Menu link transform properties.
609
+ // --graupl-menu-link-transition
330
610
  $menu-link-transition: var(
331
611
  --#{root-defaults.$prefix}menu-link-transition,
332
612
  background #{map.get(root-variables.$transition-durations, fast)}
@@ -334,6 +614,8 @@ $menu-link-transition: var(
334
614
  color #{map.get(root-variables.$transition-durations, fast)}
335
615
  #{root-variables.$transition-timing-function}
336
616
  );
617
+
618
+ // --graupl-menu-link-transition-reduced-motion
337
619
  $menu-link-transition-reduced-motion: var(
338
620
  --#{root-defaults.$prefix}menu-link-transition-reduced-motion,
339
621
  background #{map.get(root-variables.$transition-durations, none)}
@@ -341,301 +623,502 @@ $menu-link-transition-reduced-motion: var(
341
623
  color #{map.get(root-variables.$transition-durations, none)}
342
624
  #{root-variables.$transition-timing-function}
343
625
  );
626
+
627
+ // --graupl-menu-link-transform
344
628
  $menu-link-transform: var(
345
629
  --#{root-defaults.$prefix}menu-link-transform,
346
630
  #{defaults.$menu-link-initial-transform}
347
631
  );
632
+
633
+ // --graupl-menu-link-visited-transform
348
634
  $menu-link-visited-transform: var(
349
635
  --#{root-defaults.$prefix}menu-link-visited-transform,
350
636
  #{$menu-link-transform}
351
637
  );
638
+
639
+ // --graupl-menu-link-focus-transform
352
640
  $menu-link-focus-transform: var(
353
641
  --#{root-defaults.$prefix}menu-link-focus-transform,
354
642
  #{$menu-link-transform}
355
643
  );
644
+
645
+ // --graupl-menu-link-hover-transform
356
646
  $menu-link-hover-transform: var(
357
647
  --#{root-defaults.$prefix}menu-link-hover-transform,
358
648
  #{defaults.$menu-link-final-transform}
359
649
  );
650
+
651
+ // --graupl-menu-link-active-transform
360
652
  $menu-link-active-transform: var(
361
653
  --#{root-defaults.$prefix}menu-link-active-transform,
362
654
  #{$menu-link-hover-transform}
363
655
  );
656
+
657
+ // --graupl-menu-link-disabled-transform
364
658
  $menu-link-disabled-transform: var(
365
659
  --#{root-defaults.$prefix}menu-link-disabled-transform,
366
660
  #{defaults.$menu-link-disabled-transform}
367
661
  );
662
+ $menu-link-transform-states: (
663
+ default: $menu-link-transform,
664
+ visited: $menu-link-visited-transform,
665
+ focus: $menu-link-focus-transform,
666
+ hover: $menu-link-hover-transform,
667
+ active: $menu-link-active-transform,
668
+ disabled: $menu-link-disabled-transform,
669
+ );
368
670
 
369
671
  // Menu link gap properties.
672
+ // --graupl-menu-link-column-gap
370
673
  $menu-link-column-gap: var(
371
674
  --#{root-defaults.$prefix}menu-link-column-gap,
372
675
  #{$menu-link-padding-x}
373
676
  );
677
+
678
+ // --graupl-menu-link-row-gap
374
679
  $menu-link-row-gap: var(
375
680
  --#{root-defaults.$prefix}menu-link-row-gap,
376
681
  #{map.get(root-variables.$spacers, 0)}
377
682
  );
683
+
684
+ // --graupl-menu-link-gap
378
685
  $menu-link-gap: var(
379
686
  --#{root-defaults.$prefix}menu-link-gap,
380
687
  #{$menu-link-column-gap} #{$menu-link-row-gap}
381
688
  );
382
689
 
383
690
  // Menu link colors.
691
+ // --graupl-menu-link-background
384
692
  $menu-link-background: var(
385
693
  --#{root-defaults.$prefix}menu-link-background,
386
694
  #{$menu-background}
387
695
  );
696
+
697
+ // --graupl-menu-link-visited-background
388
698
  $menu-link-visited-background: var(
389
699
  --#{root-defaults.$prefix}menu-link-visited-background,
390
700
  #{$menu-link-background}
391
701
  );
702
+
703
+ // --graupl-menu-link-focus-background
392
704
  $menu-link-focus-background: var(
393
705
  --#{root-defaults.$prefix}menu-link-focus-background,
394
706
  #{$menu-link-background}
395
707
  );
708
+
709
+ // --graupl-menu-link-hover-background
396
710
  $menu-link-hover-background: var(
397
711
  --#{root-defaults.$prefix}menu-link-hover-background,
398
712
  #{$menu-color}
399
713
  );
714
+
715
+ // --graupl-menu-link-active-background
400
716
  $menu-link-active-background: var(
401
717
  --#{root-defaults.$prefix}menu-link-active-background,
402
718
  #{$menu-link-hover-background}
403
719
  );
720
+
721
+ // --graupl-menu-link-disabled-background
404
722
  $menu-link-disabled-background: var(
405
723
  --#{root-defaults.$prefix}menu-link-disabled-background,
406
724
  #{color.$background}
407
725
  );
726
+ $menu-link-background-states: (
727
+ default: $menu-link-background,
728
+ visited: $menu-link-visited-background,
729
+ focus: $menu-link-focus-background,
730
+ hover: $menu-link-hover-background,
731
+ active: $menu-link-active-background,
732
+ disabled: $menu-link-disabled-background,
733
+ );
734
+
735
+ // --graupl-menu-link-color
408
736
  $menu-link-color: var(
409
737
  --#{root-defaults.$prefix}menu-link-color,
410
738
  #{$menu-color}
411
739
  );
740
+
741
+ // --graupl-menu-link-visited-color
412
742
  $menu-link-visited-color: var(
413
743
  --#{root-defaults.$prefix}menu-link-visited-color,
414
744
  #{$menu-link-color}
415
745
  );
746
+
747
+ // --graupl-menu-link-focus-color
416
748
  $menu-link-focus-color: var(
417
749
  --#{root-defaults.$prefix}menu-link-focus-color,
418
750
  #{$menu-link-color}
419
751
  );
752
+
753
+ // --graupl-menu-link-hover-color
420
754
  $menu-link-hover-color: var(
421
755
  --#{root-defaults.$prefix}menu-link-hover-color,
422
756
  #{$menu-background}
423
757
  );
758
+
759
+ // --graupl-menu-link-active-color
424
760
  $menu-link-active-color: var(
425
761
  --#{root-defaults.$prefix}menu-link-active-color,
426
762
  #{$menu-link-hover-color}
427
763
  );
764
+
765
+ // --graupl-menu-link-disabled-color
428
766
  $menu-link-disabled-color: var(
429
767
  --#{root-defaults.$prefix}menu-link-disabled-color,
430
768
  #{theme.get(primary, 200)}
431
769
  );
770
+ $menu-link-color-states: (
771
+ default: $menu-link-color,
772
+ visited: $menu-link-visited-color,
773
+ focus: $menu-link-focus-color,
774
+ hover: $menu-link-hover-color,
775
+ active: $menu-link-active-color,
776
+ disabled: $menu-link-disabled-color,
777
+ );
432
778
 
433
779
  // Menu link text decoration properties.
780
+ // --graupl-menu-link-text-decoration
434
781
  $menu-link-text-decoration: var(
435
782
  --#{root-defaults.$prefix}menu-link-text-decoration,
436
783
  #{defaults.$menu-link-initial-text-decoration}
437
784
  );
785
+
786
+ // --graupl-menu-link-visited-text-decoration
438
787
  $menu-link-visited-text-decoration: var(
439
788
  --#{root-defaults.$prefix}menu-link-visited-text-decoration,
440
789
  #{$menu-link-text-decoration}
441
790
  );
791
+
792
+ // --graupl-menu-link-focus-text-decoration
442
793
  $menu-link-focus-text-decoration: var(
443
794
  --#{root-defaults.$prefix}menu-link-focus-text-decoration,
444
795
  #{$menu-link-text-decoration}
445
796
  );
797
+
798
+ // --graupl-menu-link-hover-text-decoration
446
799
  $menu-link-hover-text-decoration: var(
447
800
  --#{root-defaults.$prefix}menu-link-hover-text-decoration,
448
801
  #{defaults.$menu-link-final-text-decoration}
449
802
  );
803
+
804
+ // --graupl-menu-link-active-text-decoration
450
805
  $menu-link-active-text-decoration: var(
451
806
  --#{root-defaults.$prefix}menu-link-active-text-decoration,
452
807
  #{$menu-link-hover-text-decoration}
453
808
  );
809
+
810
+ // --graupl-menu-link-disabled-text-decoration
454
811
  $menu-link-disabled-text-decoration: var(
455
812
  --#{root-defaults.$prefix}menu-link-disabled-text-decoration,
456
813
  #{defaults.$menu-link-disabled-text-decoration}
457
814
  );
815
+ $menu-link-text-decoration-states: (
816
+ default: $menu-link-text-decoration,
817
+ visited: $menu-link-visited-text-decoration,
818
+ focus: $menu-link-focus-text-decoration,
819
+ hover: $menu-link-hover-text-decoration,
820
+ active: $menu-link-active-text-decoration,
821
+ disabled: $menu-link-disabled-text-decoration,
822
+ );
823
+
824
+ // --graupl-menu-link-text-decoration-thickness
458
825
  $menu-link-text-decoration-thickness: var(
459
826
  --#{root-defaults.$prefix}menu-link-text-decoration-thickness,
460
827
  #{root-variables.$border-width}
461
828
  );
829
+
830
+ // --graupl-menu-link-visited-text-decoration-thickness
462
831
  $menu-link-visited-text-decoration-thickness: var(
463
832
  --#{root-defaults.$prefix}menu-link-visited-text-decoration-thickness,
464
833
  #{$menu-link-text-decoration-thickness}
465
834
  );
835
+
836
+ // --graupl-menu-link-focus-text-decoration-thickness
466
837
  $menu-link-focus-text-decoration-thickness: var(
467
838
  --#{root-defaults.$prefix}menu-link-focus-text-decoration-thickness,
468
839
  #{$menu-link-text-decoration-thickness}
469
840
  );
841
+
842
+ // --graupl-menu-link-hover-text-decoration-thickness
470
843
  $menu-link-hover-text-decoration-thickness: var(
471
844
  --#{root-defaults.$prefix}menu-link-hover-text-decoration-thickness,
472
845
  #{root-variables.$border-width}
473
846
  );
847
+
848
+ // --graupl-menu-link-active-text-decoration-thickness
474
849
  $menu-link-active-text-decoration-thickness: var(
475
850
  --#{root-defaults.$prefix}menu-link-active-text-decoration-thickness,
476
851
  #{$menu-link-hover-text-decoration-thickness}
477
852
  );
853
+
854
+ // --graupl-menu-link-disabled-text-decoration-thickness
478
855
  $menu-link-disabled-text-decoration-thickness: var(
479
856
  --#{root-defaults.$prefix}menu-link-disabled-text-decoration-thickness,
480
857
  #{root-variables.$border-width}
481
858
  );
859
+ $menu-link-text-decoration-thickness-states: (
860
+ default: $menu-link-text-decoration-thickness,
861
+ visited: $menu-link-visited-text-decoration-thickness,
862
+ focus: $menu-link-focus-text-decoration-thickness,
863
+ hover: $menu-link-hover-text-decoration-thickness,
864
+ active: $menu-link-active-text-decoration-thickness,
865
+ disabled: $menu-link-disabled-text-decoration-thickness,
866
+ );
867
+
868
+ // --graupl-menu-link-text-decoration-style
482
869
  $menu-link-text-decoration-style: var(
483
870
  --#{root-defaults.$prefix}menu-link-text-decoration-style,
484
871
  #{defaults.$menu-link-initial-text-decoration-style}
485
872
  );
873
+
874
+ // --graupl-menu-link-visited-text-decoration-style
486
875
  $menu-link-visited-text-decoration-style: var(
487
876
  --#{root-defaults.$prefix}menu-link-visited-text-decoration-style,
488
877
  #{$menu-link-text-decoration-style}
489
878
  );
879
+
880
+ // --graupl-menu-link-focus-text-decoration-style
490
881
  $menu-link-focus-text-decoration-style: var(
491
882
  --#{root-defaults.$prefix}menu-link-focus-text-decoration-style,
492
883
  #{$menu-link-text-decoration-style}
493
884
  );
885
+
886
+ // --graupl-menu-link-hover-text-decoration-style
494
887
  $menu-link-hover-text-decoration-style: var(
495
888
  --#{root-defaults.$prefix}menu-link-hover-text-decoration-style,
496
889
  #{defaults.$menu-link-final-text-decoration-style}
497
890
  );
891
+
892
+ // --graupl-menu-link-active-text-decoration-style
498
893
  $menu-link-active-text-decoration-style: var(
499
894
  --#{root-defaults.$prefix}menu-link-active-text-decoration-style,
500
895
  #{$menu-link-hover-text-decoration-style}
501
896
  );
897
+
898
+ // --graupl-menu-link-disabled-text-decoration-style
502
899
  $menu-link-disabled-text-decoration-style: var(
503
900
  --#{root-defaults.$prefix}menu-link-disabled-text-decoration-style,
504
901
  #{defaults.$menu-link-disabled-text-decoration-style}
505
902
  );
903
+ $menu-link-text-decoration-style-states: (
904
+ default: $menu-link-text-decoration-style,
905
+ visited: $menu-link-visited-text-decoration-style,
906
+ focus: $menu-link-focus-text-decoration-style,
907
+ hover: $menu-link-hover-text-decoration-style,
908
+ active: $menu-link-active-text-decoration-style,
909
+ disabled: $menu-link-disabled-text-decoration-style,
910
+ );
911
+
912
+ // --graupl-menu-link-text-decoration-color
506
913
  $menu-link-text-decoration-color: var(
507
914
  --#{root-defaults.$prefix}menu-link-text-decoration-color,
508
915
  #{$menu-link-color}
509
916
  );
917
+
918
+ // --graupl-menu-link-visited-text-decoration-color
510
919
  $menu-link-visited-text-decoration-color: var(
511
920
  --#{root-defaults.$prefix}menu-link-visited-text-decoration-color,
512
921
  #{$menu-link-visited-color}
513
922
  );
923
+
924
+ // --graupl-menu-link-focus-text-decoration-color
514
925
  $menu-link-focus-text-decoration-color: var(
515
926
  --#{root-defaults.$prefix}menu-link-focus-text-decoration-color,
516
927
  #{$menu-link-focus-color}
517
928
  );
929
+
930
+ // --graupl-menu-link-hover-text-decoration-color
518
931
  $menu-link-hover-text-decoration-color: var(
519
932
  --#{root-defaults.$prefix}menu-link-hover-text-decoration-color,
520
933
  #{$menu-link-hover-color}
521
934
  );
935
+
936
+ // --graupl-menu-link-active-text-decoration-color
522
937
  $menu-link-active-text-decoration-color: var(
523
938
  --#{root-defaults.$prefix}menu-link-active-text-decoration-color,
524
939
  #{$menu-link-active-color}
525
940
  );
941
+
942
+ // --graupl-menu-link-disabled-text-decoration-color
526
943
  $menu-link-disabled-text-decoration-color: var(
527
944
  --#{root-defaults.$prefix}menu-link-disabled-text-decoration-color,
528
945
  #{$menu-link-disabled-color}
529
946
  );
947
+ $menu-link-text-decoration-color-states: (
948
+ default: $menu-link-text-decoration-color,
949
+ visited: $menu-link-visited-text-decoration-color,
950
+ focus: $menu-link-focus-text-decoration-color,
951
+ hover: $menu-link-hover-text-decoration-color,
952
+ active: $menu-link-active-text-decoration-color,
953
+ disabled: $menu-link-disabled-text-decoration-color,
954
+ );
530
955
 
531
956
  // Menu link border properties.
957
+ // --graupl-menu-link-border-top-left-radius
532
958
  $menu-link-border-top-left-radius: var(
533
959
  --#{root-defaults.$prefix}menu-link-border-top-left-radius,
534
960
  #{root-variables.$border-top-left-radius}
535
961
  );
962
+
963
+ // --graupl-menu-link-border-top-right-radius
536
964
  $menu-link-border-top-right-radius: var(
537
965
  --#{root-defaults.$prefix}menu-link-border-top-right-radius,
538
966
  #{root-variables.$border-top-right-radius}
539
967
  );
968
+
969
+ // --graupl-menu-link-border-bottom-left-radius
540
970
  $menu-link-border-bottom-left-radius: var(
541
971
  --#{root-defaults.$prefix}menu-link-border-bottom-left-radius,
542
972
  #{root-variables.$border-bottom-left-radius}
543
973
  );
974
+
975
+ // --graupl-menu-link-border-bottom-right-radius
544
976
  $menu-link-border-bottom-right-radius: var(
545
977
  --#{root-defaults.$prefix}menu-link-border-bottom-right-radius,
546
978
  #{root-variables.$border-bottom-right-radius}
547
979
  );
980
+
981
+ // --graupl-menu-link-border-radius
548
982
  $menu-link-border-radius: var(
549
983
  --#{root-defaults.$prefix}menu-link-border-radius,
550
984
  #{$menu-link-border-top-left-radius} #{$menu-link-border-top-right-radius}
551
985
  #{$menu-link-border-bottom-right-radius}
552
986
  #{$menu-link-border-bottom-left-radius}
553
987
  );
988
+
989
+ // --graupl-menu-link-border-top-width
554
990
  $menu-link-border-top-width: var(
555
991
  --#{root-defaults.$prefix}menu-link-border-top-width,
556
992
  #{defaults.$menu-link-border-width}
557
993
  );
994
+
995
+ // --graupl-menu-link-border-right-width
558
996
  $menu-link-border-right-width: var(
559
997
  --#{root-defaults.$prefix}menu-link-border-right-width,
560
998
  #{defaults.$menu-link-border-width}
561
999
  );
1000
+
1001
+ // --graupl-menu-link-border-bottom-width
562
1002
  $menu-link-border-bottom-width: var(
563
1003
  --#{root-defaults.$prefix}menu-link-border-bottom-width,
564
1004
  #{defaults.$menu-link-border-width}
565
1005
  );
1006
+
1007
+ // --graupl-menu-link-border-left-width
566
1008
  $menu-link-border-left-width: var(
567
1009
  --#{root-defaults.$prefix}menu-link-border-left-width,
568
1010
  #{defaults.$menu-link-border-width}
569
1011
  );
1012
+
1013
+ // --graupl-menu-link-border-width
570
1014
  $menu-link-border-width: var(
571
1015
  --#{root-defaults.$prefix}menu-link-border-width,
572
1016
  #{$menu-link-border-top-width} #{$menu-link-border-right-width}
573
1017
  #{$menu-link-border-bottom-width} #{$menu-link-border-left-width}
574
1018
  );
1019
+
1020
+ // --graupl-menu-link-border-top-style
575
1021
  $menu-link-border-top-style: var(
576
1022
  --#{root-defaults.$prefix}menu-link-border-top-style,
577
1023
  #{root-variables.$border-top-style}
578
1024
  );
1025
+
1026
+ // --graupl-menu-link-border-right-style
579
1027
  $menu-link-border-right-style: var(
580
1028
  --#{root-defaults.$prefix}menu-link-border-right-style,
581
1029
  #{root-variables.$border-right-style}
582
1030
  );
1031
+
1032
+ // --graupl-menu-link-border-bottom-style
583
1033
  $menu-link-border-bottom-style: var(
584
1034
  --#{root-defaults.$prefix}menu-link-border-bottom-style,
585
1035
  #{root-variables.$border-bottom-style}
586
1036
  );
1037
+
1038
+ // --graupl-menu-link-border-left-style
587
1039
  $menu-link-border-left-style: var(
588
1040
  --#{root-defaults.$prefix}menu-link-border-left-style,
589
1041
  #{root-variables.$border-left-style}
590
1042
  );
1043
+
1044
+ // --graupl-menu-link-border-style
591
1045
  $menu-link-border-style: var(
592
1046
  --#{root-defaults.$prefix}menu-link-border-style,
593
1047
  #{$menu-link-border-top-style} #{$menu-link-border-right-style}
594
1048
  #{$menu-link-border-bottom-style} #{$menu-link-border-left-style}
595
1049
  );
1050
+
1051
+ // --graupl-menu-link-border-color
596
1052
  $menu-link-border-color: var(
597
1053
  --#{root-defaults.$prefix}menu-link-border-color,
598
1054
  #{$menu-link-color}
599
1055
  );
1056
+
1057
+ // --graupl-menu-link-visited-border-color
600
1058
  $menu-link-visited-border-color: var(
601
1059
  --#{root-defaults.$prefix}menu-link-visited-border-color,
602
1060
  #{$menu-link-border-color}
603
1061
  );
1062
+
1063
+ // --graupl-menu-link-focus-border-color
604
1064
  $menu-link-focus-border-color: var(
605
1065
  --#{root-defaults.$prefix}menu-link-focus-border-color,
606
1066
  #{$menu-link-border-color}
607
1067
  );
1068
+
1069
+ // --graupl-menu-link-hover-border-color
608
1070
  $menu-link-hover-border-color: var(
609
1071
  --#{root-defaults.$prefix}menu-link-hover-border-color,
610
1072
  #{$menu-link-hover-color}
611
1073
  );
1074
+
1075
+ // --graupl-menu-link-active-border-color
612
1076
  $menu-link-active-border-color: var(
613
1077
  --#{root-defaults.$prefix}menu-link-active-border-color,
614
1078
  #{$menu-link-hover-border-color}
615
1079
  );
1080
+
1081
+ // --graupl-menu-link-disabled-border-color
616
1082
  $menu-link-disabled-border-color: var(
617
1083
  --#{root-defaults.$prefix}menu-link-disabled-border-color,
618
1084
  #{$menu-link-disabled-color}
619
1085
  );
1086
+ $menu-link-border-color-states: (
1087
+ default: $menu-link-border-color,
1088
+ visited: $menu-link-visited-border-color,
1089
+ focus: $menu-link-focus-border-color,
1090
+ hover: $menu-link-hover-border-color,
1091
+ active: $menu-link-active-border-color,
1092
+ disabled: $menu-link-disabled-border-color,
1093
+ );
620
1094
 
621
1095
  // Submenu toggle properties.
1096
+ // --graupl-submenu-toggle-transform
622
1097
  $submenu-toggle-transform: var(
623
1098
  --#{root-defaults.$prefix}submenu-toggle-transform,
624
1099
  #{defaults.$submenu-toggle-transform}
625
1100
  );
1101
+
1102
+ // --graupl-submenu-toggle-open-transform
626
1103
  $submenu-toggle-open-transform: var(
627
1104
  --#{root-defaults.$prefix}submenu-toggle-open-transform,
628
1105
  #{defaults.$submenu-toggle-open-transform}
629
1106
  );
1107
+
1108
+ // --graupl-submenu-toggle-content
630
1109
  $submenu-toggle-content: var(
631
1110
  --#{root-defaults.$prefix}submenu-toggle-content,
632
1111
  #{defaults.$submenu-toggle-content}
633
1112
  );
1113
+
1114
+ // --graupl-submenu-toggle-transition
634
1115
  $submenu-toggle-transition: var(
635
1116
  --#{root-defaults.$prefix}submenu-toggle-transition,
636
1117
  transform #{map.get(root-variables.$transition-durations, fast)}
637
1118
  #{root-variables.$transition-timing-function}
638
1119
  );
1120
+
1121
+ // --graupl-submenu-toggle-transition-reduced-motion
639
1122
  $submenu-toggle-transition-reduced-motion: var(
640
1123
  --#{root-defaults.$prefix}submenu-toggle-transition-reduced-motion,
641
1124
  none