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