@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/navigation/_variables.scss CHANGED
@@ -3,82 +3,243 @@
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
+ // | Custom property | Default |
8
+ // | --------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
9
+ // | Custom property | Default |
10
+ // | --------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
11
+ // | --graupl-navigation-background | var(--graupl-background) |
12
+ // | --graupl-navigation-color | var(--graupl-color) |
13
+ // | --graupl-navigation-toggle-min-width | 44px |
14
+ // | --graupl-navigation-toggle-min-height | 44px |
15
+ // | --graupl-navigation-toggle-padding-x | var(--graupl-spacer-5) |
16
+ // | --graupl-navigation-toggle-padding-y | var(--graupl-spacer-3) |
17
+ // | --graupl-navigation-toggle-padding | var(--graupl-navigation-toggle-padding-y) var(--graupl-navigation-toggle-padding-x) |
18
+ // | --graupl-navigation-toggle-background | var(--graupl-navigation-background) |
19
+ // | --graupl-navigation-toggle-color | var(--graupl-navigation-color) |
20
+ // | --graupl-navigation-toggle-hover-background | var(--graupl-navigation-color) |
21
+ // | --graupl-navigation-toggle-hover-color | var(--graupl-navigation-background) |
22
+ // | --graupl-navigation-toggle-border-top-width | var(--graupl-border-top-width) |
23
+ // | --graupl-navigation-toggle-border-right-width | var(--graupl-border-right-width) |
24
+ // | --graupl-navigation-toggle-border-bottom-width | var(--graupl-border-bottom-width) |
25
+ // | --graupl-navigation-toggle-border-left-width | var(--graupl-border-left-width) |
26
+ // | --graupl-navigation-toggle-border-width | var(--graupl-navigation-toggle-border-top-width) var(--graupl-navigation-toggle-border-right-width) var(--graupl-navigation-toggle-border-bottom-width) var(--graupl-navigation-toggle-border-left-width) |
27
+ // | --graupl-navigation-toggle-border-top-style | var(--graupl-border-top-style) |
28
+ // | --graupl-navigation-toggle-border-right-style | var(--graupl-border-right-style) |
29
+ // | --graupl-navigation-toggle-border-bottom-style | var(--graupl-border-bottom-style) |
30
+ // | --graupl-navigation-toggle-border-left-style | var(--graupl-border-left-style) |
31
+ // | --graupl-navigation-toggle-border-style | var(--graupl-navigation-toggle-border-top-style) var(--graupl-navigation-toggle-border-right-style) var(--graupl-navigation-toggle-border-bottom-style) var(--graupl-navigation-toggle-border-left-style) |
32
+ // | --graupl-navigation-toggle-border-color | var(--graupl-navigation-toggle-color) |
33
+ // | --graupl-navigation-toggle-border-top-left-radius | var(--graupl-border-top-left-radius) |
34
+ // | --graupl-navigation-toggle-border-top-right-radius | var(--graupl-border-top-right-radius) |
35
+ // | --graupl-navigation-toggle-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |
36
+ // | --graupl-navigation-toggle-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |
37
+ // | --graupl-navigation-toggle-border-radius | var(--graupl-navigation-toggle-border-top-left-radius) var(--graupl-navigation-toggle-border-top-right-radius) var(--graupl-navigation-toggle-border-bottom-right-radius) var(--graupl-navigation-toggle-border-bottom-left-radius) |
38
+ // | --graupl-navigation-branding-font-size | var(--graupl-font-lg) |
39
+ // | --graupl-navigation-branding-font-weight | var(--graupl-font-weight-bold) |
40
+ // | --graupl-navigation-branding-padding-x | var(--graupl-spacer-3) |
41
+ // | --graupl-navigation-branding-padding-y | var(--graupl-spacer-2) |
42
+ // | --graupl-navigation-branding-padding | var(--graupl-navigation-branding-padding-y) var(--graupl-navigation-branding-padding-x) |
43
+ // | --graupl-navigation-branding-color | var(--graupl-navigation-color) |
44
+ // | --graupl-navigation-branding-visited-color | var(--graupl-navigation-branding-color) |
45
+ // | --graupl-navigation-branding-focus-color | var(--graupl-navigation-branding-color) |
46
+ // | --graupl-navigation-branding-hover-color | var(--graupl-navigation-color) |
47
+ // | --graupl-navigation-branding-active-color | var(--graupl-navigation-branding-hover-color) |
48
+ // | --graupl-navigation-branding-disabled-color | var(--graupl-navigation-color) |
49
+ // | --graupl-navigation-branding-text-decoration | none |
50
+ // | --graupl-navigation-branding-visited-text-decoration | var(--graupl-navigation-branding-text-decoration) |
51
+ // | --graupl-navigation-branding-focus-text-decoration | var(--graupl-navigation-branding-text-decoration) |
52
+ // | --graupl-navigation-branding-hover-text-decoration | none |
53
+ // | --graupl-navigation-branding-active-text-decoration | var(--graupl-navigation-branding-hover-text-decoration) |
54
+ // | --graupl-navigation-branding-disabled-text-decoration | none |
55
+ // | --graupl-navigation-branding-text-decoration-style | solid |
56
+ // | --graupl-navigation-branding-visited-text-decoration-style | var(--graupl-navigation-branding-text-decoration-style) |
57
+ // | --graupl-navigation-branding-focus-text-decoration-style | var(--graupl-navigation-branding-text-decoration-style) |
58
+ // | --graupl-navigation-branding-hover-text-decoration-style | solid |
59
+ // | --graupl-navigation-branding-active-text-decoration-style | var(--graupl-navigation-branding-hover-text-decoration-style) |
60
+ // | --graupl-navigation-branding-disabled-text-decoration-style | solid |
61
+ // | --graupl-navigation-branding-text-decoration-thickness | var(--graupl-border-width) |
62
+ // | --graupl-navigation-branding-visited-text-decoration-thickness | var(--graupl-navigation-branding-text-decoration-thickness) |
63
+ // | --graupl-navigation-branding-focus-text-decoration-thickness | var(--graupl-navigation-branding-text-decoration-thickness) |
64
+ // | --graupl-navigation-branding-hover-text-decoration-thickness | var(--graupl-border-width) |
65
+ // | --graupl-navigation-branding-active-text-decoration-thickness | var(--graupl-navigation-branding-hover-text-decoration-thickness) |
66
+ // | --graupl-navigation-branding-disabled-text-decoration-thickness | var(--graupl-border-width) |
67
+ // | --graupl-navigation-branding-text-decoration-color | var(--graupl-navigation-branding-color) |
68
+ // | --graupl-navigation-branding-visited-text-decoration-color | var(--graupl-navigation-branding-visited-color) |
69
+ // | --graupl-navigation-branding-focus-text-decoration-color | var(--graupl-navigation-branding-focus-color) |
70
+ // | --graupl-navigation-branding-hover-text-decoration-color | var(--graupl-navigation-branding-hover-color) |
71
+ // | --graupl-navigation-branding-active-text-decoration-color | var(--graupl-navigation-branding-active-color) |
72
+ // | --graupl-navigation-branding-disabled-text-decoration-color | var(--graupl-navigation-branding-disabled-color) |
73
+ // | --graupl-navigation-toggle-content | "'☰'" |
74
+
7
75
  @use "../../defaults" as root-defaults;
8
- @use "../../variables" as root-variables;
76
+ @use "../../functions/theme";
9
77
  @use "../../theme/color/variables" as color;
10
78
  @use "../../theme/typography/variables" as typography;
79
+ @use "../../variables" as root-variables;
80
+ @use "defaults";
11
81
  @use "sass:map";
12
82
 
13
83
  // Navigation colors.
84
+ // --graupl-navigation-background
14
85
  $navigation-background: var(
15
86
  --#{root-defaults.$prefix}navigation-background,
16
87
  #{color.$background}
17
88
  );
89
+
90
+ // --graupl-navigation-color
18
91
  $navigation-color: var(
19
92
  --#{root-defaults.$prefix}navigation-color,
20
93
  #{color.$color}
21
94
  );
22
95
 
23
96
  // Navigation toggle size.
97
+ // --graupl-navigation-toggle-min-width
24
98
  $navigation-toggle-min-width: var(
25
99
  --#{root-defaults.$prefix}navigation-toggle-min-width,
26
100
  #{root-defaults.$interactive-min-width}
27
101
  );
102
+
103
+ // --graupl-navigation-toggle-min-height
28
104
  $navigation-toggle-min-height: var(
29
105
  --#{root-defaults.$prefix}navigation-toggle-min-height,
30
106
  #{root-defaults.$interactive-min-height}
31
107
  );
32
108
 
33
109
  // Navigation toggle spacing.
110
+ // --graupl-navigation-toggle-padding-x
34
111
  $navigation-toggle-padding-x: var(
35
112
  --#{root-defaults.$prefix}navigation-toggle-padding-x,
36
113
  #{map.get(root-variables.$spacers, 5)}
37
114
  );
115
+
116
+ // --graupl-navigation-toggle-padding-y
38
117
  $navigation-toggle-padding-y: var(
39
118
  --#{root-defaults.$prefix}navigation-toggle-padding-y,
40
119
  #{map.get(root-variables.$spacers, 3)}
41
120
  );
121
+
122
+ // --graupl-navigation-toggle-padding
42
123
  $navigation-toggle-padding: var(
43
124
  --#{root-defaults.$prefix}navigation-toggle-padding,
44
125
  #{$navigation-toggle-padding-y} #{$navigation-toggle-padding-x}
45
126
  );
46
127
 
47
128
  // Navigation toggle colors.
129
+ // --graupl-navigation-toggle-background
48
130
  $navigation-toggle-background: var(
49
131
  --#{root-defaults.$prefix}navigation-toggle-background,
50
132
  #{$navigation-background}
51
133
  );
52
- $navigation-toggle-color: var(
53
- --#{root-defaults.$prefix}navigation-toggle-color,
54
- #{$navigation-color}
134
+
135
+ // --graupl-navigation-toggle-visited-background
136
+ $navigation-toggle-visited-background: var(
137
+ --#{root-defaults.$prefix}navigation-toggle-visited-background,
138
+ #{$navigation-toggle-background}
55
139
  );
140
+
141
+ // --graupl-navigation-toggle-focus-background
142
+ $navigation-toggle-focus-background: var(
143
+ --#{root-defaults.$prefix}navigation-toggle-focus-background,
144
+ #{$navigation-toggle-background}
145
+ );
146
+
147
+ // --graupl-navigation-toggle-hover-background
56
148
  $navigation-toggle-hover-background: var(
57
149
  --#{root-defaults.$prefix}navigation-toggle-hover-background,
58
150
  #{$navigation-color}
59
151
  );
152
+
153
+ // --graupl-navigation-toggle-active-background
154
+ $navigation-toggle-active-background: var(
155
+ --#{root-defaults.$prefix}navigation-toggle-active-background,
156
+ #{$navigation-toggle-hover-background}
157
+ );
158
+
159
+ // --graupl-navigation-toggle-disabled-background
160
+ $navigation-toggle-disabled-background: var(
161
+ --#{root-defaults.$prefix}navigation-toggle-disabled-background,
162
+ #{$navigation-background}
163
+ );
164
+ $navigation-toggle-background-states: (
165
+ default: $navigation-toggle-background,
166
+ visited: $navigation-toggle-visited-background,
167
+ focus: $navigation-toggle-focus-background,
168
+ hover: $navigation-toggle-hover-background,
169
+ active: $navigation-toggle-active-background,
170
+ disabled: $navigation-toggle-disabled-background,
171
+ );
172
+
173
+ // --graupl-navigation-toggle-color
174
+ $navigation-toggle-color: var(
175
+ --#{root-defaults.$prefix}navigation-toggle-color,
176
+ #{$navigation-color}
177
+ );
178
+
179
+ // --graupl-navigation-toggle-visited-color
180
+ $navigation-toggle-visited-color: var(
181
+ --#{root-defaults.$prefix}navigation-toggle-visited-color,
182
+ #{$navigation-background}
183
+ );
184
+
185
+ // --graupl-navigation-toggle-focus-color
186
+ $navigation-toggle-focus-color: var(
187
+ --#{root-defaults.$prefix}navigation-toggle-focus-color,
188
+ #{$navigation-background}
189
+ );
190
+
191
+ // --graupl-navigation-toggle-hover-color
60
192
  $navigation-toggle-hover-color: var(
61
193
  --#{root-defaults.$prefix}navigation-toggle-hover-color,
62
194
  #{$navigation-background}
63
195
  );
64
196
 
197
+ // --graupl-navigation-toggle-active-color
198
+ $navigation-toggle-active-color: var(
199
+ --#{root-defaults.$prefix}navigation-toggle-active-color,
200
+ #{$navigation-background}
201
+ );
202
+
203
+ // --graupl-navigation-toggle-disabled-color
204
+ $navigation-toggle-disabled-color: var(
205
+ --#{root-defaults.$prefix}navigation-toggle-disabled-color,
206
+ #{theme.get(primary, 200)}
207
+ );
208
+ $navigation-toggle-color-states: (
209
+ default: $navigation-toggle-color,
210
+ visited: $navigation-toggle-visited-color,
211
+ focus: $navigation-toggle-focus-color,
212
+ hover: $navigation-toggle-hover-color,
213
+ active: $navigation-toggle-active-color,
214
+ disabled: $navigation-toggle-disabled-color,
215
+ );
216
+
65
217
  // Navigation toggle border properties.
218
+ // --graupl-navigation-toggle-border-top-width
66
219
  $navigation-toggle-border-top-width: var(
67
220
  --#{root-defaults.$prefix}navigation-toggle-border-top-width,
68
221
  #{root-variables.$border-top-width}
69
222
  );
223
+
224
+ // --graupl-navigation-toggle-border-right-width
70
225
  $navigation-toggle-border-right-width: var(
71
226
  --#{root-defaults.$prefix}navigation-toggle-border-right-width,
72
227
  #{root-variables.$border-right-width}
73
228
  );
229
+
230
+ // --graupl-navigation-toggle-border-bottom-width
74
231
  $navigation-toggle-border-bottom-width: var(
75
232
  --#{root-defaults.$prefix}navigation-toggle-border-bottom-width,
76
233
  #{root-variables.$border-bottom-width}
77
234
  );
235
+
236
+ // --graupl-navigation-toggle-border-left-width
78
237
  $navigation-toggle-border-left-width: var(
79
238
  --#{root-defaults.$prefix}navigation-toggle-border-left-width,
80
239
  #{root-variables.$border-left-width}
81
240
  );
241
+
242
+ // --graupl-navigation-toggle-border-width
82
243
  $navigation-toggle-border-width: var(
83
244
  --#{root-defaults.$prefix}navigation-toggle-border-width,
84
245
  #{$navigation-toggle-border-top-width}
@@ -86,22 +247,32 @@ $navigation-toggle-border-width: var(
86
247
  #{$navigation-toggle-border-bottom-width}
87
248
  #{$navigation-toggle-border-left-width}
88
249
  );
250
+
251
+ // --graupl-navigation-toggle-border-top-style
89
252
  $navigation-toggle-border-top-style: var(
90
253
  --#{root-defaults.$prefix}navigation-toggle-border-top-style,
91
254
  #{root-variables.$border-top-style}
92
255
  );
256
+
257
+ // --graupl-navigation-toggle-border-right-style
93
258
  $navigation-toggle-border-right-style: var(
94
259
  --#{root-defaults.$prefix}navigation-toggle-border-right-style,
95
260
  #{root-variables.$border-right-style}
96
261
  );
262
+
263
+ // --graupl-navigation-toggle-border-bottom-style
97
264
  $navigation-toggle-border-bottom-style: var(
98
265
  --#{root-defaults.$prefix}navigation-toggle-border-bottom-style,
99
266
  #{root-variables.$border-bottom-style}
100
267
  );
268
+
269
+ // --graupl-navigation-toggle-border-left-style
101
270
  $navigation-toggle-border-left-style: var(
102
271
  --#{root-defaults.$prefix}navigation-toggle-border-left-style,
103
272
  #{root-variables.$border-left-style}
104
273
  );
274
+
275
+ // --graupl-navigation-toggle-border-style
105
276
  $navigation-toggle-border-style: var(
106
277
  --#{root-defaults.$prefix}navigation-toggle-border-style,
107
278
  #{$navigation-toggle-border-top-style}
@@ -109,26 +280,76 @@ $navigation-toggle-border-style: var(
109
280
  #{$navigation-toggle-border-bottom-style}
110
281
  #{$navigation-toggle-border-left-style}
111
282
  );
283
+
284
+ // --graupl-navigation-toggle-border-color
112
285
  $navigation-toggle-border-color: var(
113
286
  --#{root-defaults.$prefix}navigation-toggle-border-color,
114
287
  #{$navigation-toggle-color}
115
288
  );
289
+
290
+ // --graupl-navigation-toggle-visited-border-color
291
+ $navigation-toggle-visited-border-color: var(
292
+ --#{root-defaults.$prefix}navigation-toggle-visited-border-color,
293
+ #{$navigation-toggle-border-color}
294
+ );
295
+
296
+ // --graupl-navigation-toggle-focus-border-color
297
+ $navigation-toggle-focus-border-color: var(
298
+ --#{root-defaults.$prefix}navigation-toggle-focus-border-color,
299
+ #{$navigation-toggle-border-color}
300
+ );
301
+
302
+ // --graupl-navigation-toggle-hover-border-color
303
+ $navigation-toggle-hover-border-color: var(
304
+ --#{root-defaults.$prefix}navigation-toggle-hover-border-color,
305
+ #{$navigation-toggle-hover-color}
306
+ );
307
+
308
+ // --graupl-navigation-toggle-active-border-color
309
+ $navigation-toggle-active-border-color: var(
310
+ --#{root-defaults.$prefix}navigation-toggle-active-border-color,
311
+ #{$navigation-toggle-hover-border-color}
312
+ );
313
+
314
+ // --graupl-navigation-toggle-disabled-border-color
315
+ $navigation-toggle-disabled-border-color: var(
316
+ --#{root-defaults.$prefix}navigation-toggle-disabled-border-color,
317
+ #{$navigation-toggle-disabled-color}
318
+ );
319
+ $navigation-toggle-border-color-states: (
320
+ default: $navigation-toggle-border-color,
321
+ visited: $navigation-toggle-visited-border-color,
322
+ focus: $navigation-toggle-focus-border-color,
323
+ hover: $navigation-toggle-hover-border-color,
324
+ active: $navigation-toggle-active-border-color,
325
+ disabled: $navigation-toggle-disabled-border-color,
326
+ );
327
+
328
+ // --graupl-navigation-toggle-border-top-left-radius
116
329
  $navigation-toggle-border-top-left-radius: var(
117
330
  --#{root-defaults.$prefix}navigation-toggle-border-top-left-radius,
118
331
  #{root-variables.$border-top-left-radius}
119
332
  );
333
+
334
+ // --graupl-navigation-toggle-border-top-right-radius
120
335
  $navigation-toggle-border-top-right-radius: var(
121
336
  --#{root-defaults.$prefix}navigation-toggle-border-top-right-radius,
122
337
  #{root-variables.$border-top-right-radius}
123
338
  );
339
+
340
+ // --graupl-navigation-toggle-border-bottom-left-radius
124
341
  $navigation-toggle-border-bottom-left-radius: var(
125
342
  --#{root-defaults.$prefix}navigation-toggle-border-bottom-left-radius,
126
343
  #{root-variables.$border-bottom-left-radius}
127
344
  );
345
+
346
+ // --graupl-navigation-toggle-border-bottom-right-radius
128
347
  $navigation-toggle-border-bottom-right-radius: var(
129
348
  --#{root-defaults.$prefix}navigation-toggle-border-bottom-right-radius,
130
349
  #{root-variables.$border-bottom-right-radius}
131
350
  );
351
+
352
+ // --graupl-navigation-toggle-border-radius
132
353
  $navigation-toggle-border-radius: var(
133
354
  --#{root-defaults.$prefix}navigation-toggle-border-radius,
134
355
  #{$navigation-toggle-border-top-left-radius}
@@ -138,152 +359,260 @@ $navigation-toggle-border-radius: var(
138
359
  );
139
360
 
140
361
  // Navigation branding properties.
362
+ // --graupl-navigation-branding-font-size
141
363
  $navigation-branding-font-size: var(
142
364
  --#{root-defaults.$prefix}navigation-branding-font-size,
143
365
  #{map.get(typography.$font-sizes, "lg")}
144
366
  );
367
+
368
+ // --graupl-navigation-branding-font-weight
145
369
  $navigation-branding-font-weight: var(
146
370
  --#{root-defaults.$prefix}navigation-branding-font-weight,
147
371
  #{typography.$font-weight-bold}
148
372
  );
373
+
374
+ // --graupl-navigation-branding-padding-x
149
375
  $navigation-branding-padding-x: var(
150
376
  --#{root-defaults.$prefix}navigation-branding-padding-x,
151
377
  #{map.get(root-variables.$spacers, 3)}
152
378
  );
379
+
380
+ // --graupl-navigation-branding-padding-y
153
381
  $navigation-branding-padding-y: var(
154
382
  --#{root-defaults.$prefix}navigation-branding-padding-y,
155
383
  #{map.get(root-variables.$spacers, 2)}
156
384
  );
385
+
386
+ // --graupl-navigation-branding-padding
157
387
  $navigation-branding-padding: var(
158
388
  --#{root-defaults.$prefix}navigation-branding-padding,
159
389
  #{$navigation-branding-padding-y} #{$navigation-branding-padding-x}
160
390
  );
161
391
 
162
392
  // Navigation branding colors.
393
+ // --graupl-navigation-branding-color
163
394
  $navigation-branding-color: var(
164
395
  --#{root-defaults.$prefix}navigation-branding-color,
165
396
  #{$navigation-color}
166
397
  );
398
+
399
+ // --graupl-navigation-branding-visited-color
167
400
  $navigation-branding-visited-color: var(
168
401
  --#{root-defaults.$prefix}navigation-branding-visited-color,
169
402
  #{$navigation-branding-color}
170
403
  );
404
+
405
+ // --graupl-navigation-branding-focus-color
171
406
  $navigation-branding-focus-color: var(
172
407
  --#{root-defaults.$prefix}navigation-branding-focus-color,
173
408
  #{$navigation-branding-color}
174
409
  );
410
+
411
+ // --graupl-navigation-branding-hover-color
175
412
  $navigation-branding-hover-color: var(
176
413
  --#{root-defaults.$prefix}navigation-branding-hover-color,
177
414
  #{$navigation-color}
178
415
  );
416
+
417
+ // --graupl-navigation-branding-active-color
179
418
  $navigation-branding-active-color: var(
180
419
  --#{root-defaults.$prefix}navigation-branding-active-color,
181
420
  #{$navigation-branding-hover-color}
182
421
  );
422
+
423
+ // --graupl-navigation-branding-disabled-color
183
424
  $navigation-branding-disabled-color: var(
184
425
  --#{root-defaults.$prefix}navigation-branding-disabled-color,
185
426
  #{$navigation-color}
186
427
  );
428
+ $navigation-branding-color-states: (
429
+ default: $navigation-branding-color,
430
+ visited: $navigation-branding-visited-color,
431
+ focus: $navigation-branding-focus-color,
432
+ hover: $navigation-branding-hover-color,
433
+ active: $navigation-branding-active-color,
434
+ disabled: $navigation-branding-disabled-color,
435
+ );
187
436
 
188
437
  // Navigation branding text decoration properties.
438
+ // --graupl-navigation-branding-text-decoration
189
439
  $navigation-branding-text-decoration: var(
190
440
  --#{root-defaults.$prefix}navigation-branding-text-decoration,
191
441
  #{defaults.$navigation-branding-initial-text-decoration}
192
442
  );
443
+
444
+ // --graupl-navigation-branding-visited-text-decoration
193
445
  $navigation-branding-visited-text-decoration: var(
194
446
  --#{root-defaults.$prefix}navigation-branding-visited-text-decoration,
195
447
  #{$navigation-branding-text-decoration}
196
448
  );
449
+
450
+ // --graupl-navigation-branding-focus-text-decoration
197
451
  $navigation-branding-focus-text-decoration: var(
198
452
  --#{root-defaults.$prefix}navigation-branding-focus-text-decoration,
199
453
  #{$navigation-branding-text-decoration}
200
454
  );
455
+
456
+ // --graupl-navigation-branding-hover-text-decoration
201
457
  $navigation-branding-hover-text-decoration: var(
202
458
  --#{root-defaults.$prefix}navigation-branding-hover-text-decoration,
203
459
  #{defaults.$navigation-branding-final-text-decoration}
204
460
  );
461
+
462
+ // --graupl-navigation-branding-active-text-decoration
205
463
  $navigation-branding-active-text-decoration: var(
206
464
  --#{root-defaults.$prefix}navigation-branding-active-text-decoration,
207
465
  #{$navigation-branding-hover-text-decoration}
208
466
  );
467
+
468
+ // --graupl-navigation-branding-disabled-text-decoration
209
469
  $navigation-branding-disabled-text-decoration: var(
210
470
  --#{root-defaults.$prefix}navigation-branding-disabled-text-decoration,
211
471
  #{defaults.$navigation-branding-disabled-text-decoration}
212
472
  );
473
+ $navigation-branding-text-decoration-states: (
474
+ default: $navigation-branding-text-decoration,
475
+ visited: $navigation-branding-visited-text-decoration,
476
+ focus: $navigation-branding-focus-text-decoration,
477
+ hover: $navigation-branding-hover-text-decoration,
478
+ active: $navigation-branding-active-text-decoration,
479
+ disabled: $navigation-branding-disabled-text-decoration,
480
+ );
481
+
482
+ // --graupl-navigation-branding-text-decoration-style
213
483
  $navigation-branding-text-decoration-style: var(
214
484
  --#{root-defaults.$prefix}navigation-branding-text-decoration-style,
215
485
  #{defaults.$navigation-branding-initial-text-decoration-style}
216
486
  );
487
+
488
+ // --graupl-navigation-branding-visited-text-decoration-style
217
489
  $navigation-branding-visited-text-decoration-style: var(
218
490
  --#{root-defaults.$prefix}navigation-branding-visited-text-decoration-style,
219
491
  #{$navigation-branding-text-decoration-style}
220
492
  );
493
+
494
+ // --graupl-navigation-branding-focus-text-decoration-style
221
495
  $navigation-branding-focus-text-decoration-style: var(
222
496
  --#{root-defaults.$prefix}navigation-branding-focus-text-decoration-style,
223
497
  #{$navigation-branding-text-decoration-style}
224
498
  );
499
+
500
+ // --graupl-navigation-branding-hover-text-decoration-style
225
501
  $navigation-branding-hover-text-decoration-style: var(
226
502
  --#{root-defaults.$prefix}navigation-branding-hover-text-decoration-style,
227
503
  #{defaults.$navigation-branding-final-text-decoration-style}
228
504
  );
505
+
506
+ // --graupl-navigation-branding-active-text-decoration-style
229
507
  $navigation-branding-active-text-decoration-style: var(
230
508
  --#{root-defaults.$prefix}navigation-branding-active-text-decoration-style,
231
509
  #{$navigation-branding-hover-text-decoration-style}
232
510
  );
511
+
512
+ // --graupl-navigation-branding-disabled-text-decoration-style
233
513
  $navigation-branding-disabled-text-decoration-style: var(
234
514
  --#{root-defaults.$prefix}navigation-branding-disabled-text-decoration-style,
235
515
  #{defaults.$navigation-branding-disabled-text-decoration-style}
236
516
  );
517
+ $navigation-branding-text-decoration-style-states: (
518
+ default: $navigation-branding-text-decoration-style,
519
+ visited: $navigation-branding-visited-text-decoration-style,
520
+ focus: $navigation-branding-focus-text-decoration-style,
521
+ hover: $navigation-branding-hover-text-decoration-style,
522
+ active: $navigation-branding-active-text-decoration-style,
523
+ disabled: $navigation-branding-disabled-text-decoration-style,
524
+ );
525
+
526
+ // --graupl-navigation-branding-text-decoration-thickness
237
527
  $navigation-branding-text-decoration-thickness: var(
238
528
  --#{root-defaults.$prefix}navigation-branding-text-decoration-thickness,
239
529
  #{root-variables.$border-width}
240
530
  );
531
+
532
+ // --graupl-navigation-branding-visited-text-decoration-thickness
241
533
  $navigation-branding-visited-text-decoration-thickness: var(
242
534
  --#{root-defaults.$prefix}navigation-branding-visited-text-decoration-thickness,
243
535
  #{$navigation-branding-text-decoration-thickness}
244
536
  );
537
+
538
+ // --graupl-navigation-branding-focus-text-decoration-thickness
245
539
  $navigation-branding-focus-text-decoration-thickness: var(
246
540
  --#{root-defaults.$prefix}navigation-branding-focus-text-decoration-thickness,
247
541
  #{$navigation-branding-text-decoration-thickness}
248
542
  );
543
+
544
+ // --graupl-navigation-branding-hover-text-decoration-thickness
249
545
  $navigation-branding-hover-text-decoration-thickness: var(
250
546
  --#{root-defaults.$prefix}navigation-branding-hover-text-decoration-thickness,
251
547
  #{root-variables.$border-width}
252
548
  );
549
+
550
+ // --graupl-navigation-branding-active-text-decoration-thickness
253
551
  $navigation-branding-active-text-decoration-thickness: var(
254
552
  --#{root-defaults.$prefix}navigation-branding-active-text-decoration-thickness,
255
553
  #{$navigation-branding-hover-text-decoration-thickness}
256
554
  );
555
+
556
+ // --graupl-navigation-branding-disabled-text-decoration-thickness
257
557
  $navigation-branding-disabled-text-decoration-thickness: var(
258
558
  --#{root-defaults.$prefix}navigation-branding-disabled-text-decoration-thickness,
259
559
  #{root-variables.$border-width}
260
560
  );
561
+ $navigation-branding-text-decoration-thickness-states: (
562
+ default: $navigation-branding-text-decoration-thickness,
563
+ visited: $navigation-branding-visited-text-decoration-thickness,
564
+ focus: $navigation-branding-focus-text-decoration-thickness,
565
+ hover: $navigation-branding-hover-text-decoration-thickness,
566
+ active: $navigation-branding-active-text-decoration-thickness,
567
+ disabled: $navigation-branding-disabled-text-decoration-thickness,
568
+ );
569
+
570
+ // --graupl-navigation-branding-text-decoration-color
261
571
  $navigation-branding-text-decoration-color: var(
262
572
  --#{root-defaults.$prefix}navigation-branding-text-decoration-color,
263
573
  #{$navigation-branding-color}
264
574
  );
575
+
576
+ // --graupl-navigation-branding-visited-text-decoration-color
265
577
  $navigation-branding-visited-text-decoration-color: var(
266
578
  --#{root-defaults.$prefix}navigation-branding-visited-text-decoration-color,
267
579
  #{$navigation-branding-visited-color}
268
580
  );
581
+
582
+ // --graupl-navigation-branding-focus-text-decoration-color
269
583
  $navigation-branding-focus-text-decoration-color: var(
270
584
  --#{root-defaults.$prefix}navigation-branding-focus-text-decoration-color,
271
585
  #{$navigation-branding-focus-color}
272
586
  );
587
+
588
+ // --graupl-navigation-branding-hover-text-decoration-color
273
589
  $navigation-branding-hover-text-decoration-color: var(
274
590
  --#{root-defaults.$prefix}navigation-branding-hover-text-decoration-color,
275
591
  #{$navigation-branding-hover-color}
276
592
  );
593
+
594
+ // --graupl-navigation-branding-active-text-decoration-color
277
595
  $navigation-branding-active-text-decoration-color: var(
278
596
  --#{root-defaults.$prefix}navigation-branding-active-text-decoration-color,
279
597
  #{$navigation-branding-active-color}
280
598
  );
599
+
600
+ // --graupl-navigation-branding-disabled-text-decoration-color
281
601
  $navigation-branding-disabled-text-decoration-color: var(
282
602
  --#{root-defaults.$prefix}navigation-branding-disabled-text-decoration-color,
283
603
  #{$navigation-branding-disabled-color}
284
604
  );
605
+ $navigation-branding-text-decoration-color-states: (
606
+ default: $navigation-branding-text-decoration-color,
607
+ visited: $navigation-branding-visited-text-decoration-color,
608
+ focus: $navigation-branding-focus-text-decoration-color,
609
+ hover: $navigation-branding-hover-text-decoration-color,
610
+ active: $navigation-branding-active-text-decoration-color,
611
+ disabled: $navigation-branding-disabled-text-decoration-color,
612
+ );
285
613
 
286
614
  // Navigation toggle properties.
615
+ // --graupl-navigation-toggle-content
287
616
  $navigation-toggle-content: var(
288
617
  --#{root-defaults.$prefix}navigation-toggle-content,
289
618
  #{defaults.$navigation-toggle-content}