@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/base/table/_index.scss CHANGED
@@ -21,112 +21,117 @@
21
21
  // - `.tertiary`: A component modifier to apply the tertiary colour to the table component.
22
22
  //
23
23
  // The following custom properties can be used to customize the table component:
24
- // - `--graupl-table-caption-side`: The caption side of the table component.
25
- // - `--graupl-table-caption-padding-x`: The horizontal padding of the table caption component.
26
- // - `--graupl-table-caption-padding-y`: The vertical padding of the table caption component.
27
- // - `--graupl-table-caption-padding`: The padding of the table caption component (combines x and y padding).
28
- // - `--graupl-table-header-font-weight`: The font weight of the table header component.
29
- // - `--graupl-table-header-padding-x`: The horizontal padding of the table header component.
30
- // - `--graupl-table-header-padding-y`: The vertical padding of the table header component.
31
- // - `--graupl-table-header-padding`: The padding of the table header component (combines x and y padding).
32
- // - `--graupl-table-header-background`: The background colour of the table header component.
33
- // - `--graupl-table-header-background`: The text colour of the table header component.
34
- // - `--graupl-table-cell-padding-x`: The horizontal padding of the table cell component.
35
- // - `--graupl-table-cell-padding-y`: The vertical padding of the table cell component.
36
- // - `--graupl-table-cell-padding`: The padding of the table cell component (combines x and y padding).
37
- // - `--graupl-table-cell-background`: The background colour of the table cell component.
38
- // - `--graupl-table-cell-color`: The text colour of the table cell component.
39
- // - `--graupl-table-border-top-width`: The top border width of the table component.
40
- // - `--graupl-table-border-right-width`: The right border width of the table component.
41
- // - `--graupl-table-border-bottom-width`: The bottom border width of the table component.
42
- // - `--graupl-table-border-left-width`: The left border width of the table component.
43
- // - `--graupl-table-border-width`: The border width of the table component (combines top, right, bottom, and left widths).
44
- // - `--graupl-table-border-top-style`: The top border style of the table component.
45
- // - `--graupl-table-border-right-style`: The right border style of the table component.
46
- // - `--graupl-table-border-bottom-style`: The bottom border style of the table component.
47
- // - `--graupl-table-border-left-style`: The left border style of the table component.
48
- // - `--graupl-table-border-style`: The border style of the table component (combines top, right, bottom, and left styles).
49
- // - `--graupl-table-border-top-left-radius`: The top left border radius of the table component.
50
- // - `--graupl-table-border-top-right-radius`: The top right border radius of the table component.
51
- // - `--graupl-table-border-bottom-right-radius`: The bottom right border radius of the table component.
52
- // - `--graupl-table-border-bottom-left-radius`: The bottom left border radius of the table component.
53
- // - `--graupl-table-border-radius`: The border radius of the table component (combines top left, top right, bottom right, and bottom left radii).
54
- // - `--graupl-table-border-color`: The border colour of the table component.
55
- // - `--graupl-table-cell-border-top-width`: The top border width of the table cell component.
56
- // - `--graupl-table-cell-border-right-width`: The right border width of the table cell component.
57
- // - `--graupl-table-cell-border-bottom-width`: The bottom border width of the table cell component.
58
- // - `--graupl-table-cell-border-left-width`: The left border width of the table cell component.
59
- // - `--graupl-table-cell-border-width`: The border width of the table cell component (combines top, right, bottom, and left widths).
60
- // - `--graupl-table-cell-border-top-style`: The top border style of the table cell component.
61
- // - `--graupl-table-cell-border-right-style`: The right border style of the table cell component.
62
- // - `--graupl-table-cell-border-bottom-style`: The bottom border style of the table cell component.
63
- // - `--graupl-table-cell-border-left-style`: The left border style of the table cell component.
64
- // - `--graupl-table-cell-border-style`: The border style of the table cell component (combines top, right, bottom, and left styles).
65
- // - `--graupl-table-cell-border-top-left-radius`: The top left border radius of the table cell component.
66
- // - `--graupl-table-cell-border-top-right-radius`: The top right border radius of the table cell component.
67
- // - `--graupl-table-cell-border-bottom-right-radius`: The bottom right border radius of the table cell component.
68
- // - `--graupl-table-cell-border-bottom-left-radius`: The bottom left border radius of the table cell component.
69
- // - `--graupl-table-cell-border-radius`: The border radius of the table cell component (combines top left, top right, bottom right, and bottom left radii).
70
- // - `--graupl-table-cell-border-color`: The border colour of the table cell component.
71
- // - `--graupl-table-header-border-top-width`: The top border width of the table header component.
72
- // - `--graupl-table-header-border-right-width`: The right border width of the table header component.
73
- // - `--graupl-table-header-border-bottom-width`: The bottom border width of the table header component.
74
- // - `--graupl-table-header-border-left-width`: The left border width of the table header component.
75
- // - `--graupl-table-header-border-width`: The border width of the table header component (combines top, right, bottom, and left widths).
76
- // - `--graupl-table-header-border-top-style`: The top border style of the table header component.
77
- // - `--graupl-table-header-border-right-style`: The right border style of the table header component.
78
- // - `--graupl-table-header-border-bottom-style`: The bottom border style of the table header component.
79
- // - `--graupl-table-header-border-left-style`: The left border style of the table header component.
80
- // - `--graupl-table-header-border-style`: The border style of the table header component (combines top, right, bottom, and left styles).
81
- // - `--graupl-table-header-border-top-left-radius`: The top left border radius of the table header component.
82
- // - `--graupl-table-header-border-top-right-radius`: The top right border radius of the table header component.
83
- // - `--graupl-table-header-border-bottom-right-radius`: The bottom right border radius of the table header component.
84
- // - `--graupl-table-header-border-bottom-left-radius`: The bottom left border radius of the table header component.
85
- // - `--graupl-table-header-border-radius`: The border radius of the table header component (combines top left, top right, bottom right, and bottom left radii).
86
- // - `--graupl-table-header-border-color`: The border colour of the table header component.
87
- // - `--graupl-table-striped-background`: The background colour of the striped table component modifier.
88
- // - `--graupl-table-striped-color`: The text colour of the striped table component modifier.
89
- // - `--graupl-table-hover-background`: The background colour of the hoverable table component modifier.
90
- // - `--graupl-table-hover-color`: The text colour of the hoverable table component modifier.
91
- // - `--graupl-table-highlight-background`: The background colour of the highlighted table component modifier.
92
- // - `--graupl-table-highlight-color`: The text colour of the highlighted table component modifier.
24
+ // | Property | Description | Default Value |
25
+ // | --- | --- | --- |
26
+ // | `--graupl-table-caption-side` | The caption side of the table component. | `bottom` |
27
+ // | `--graupl-table-caption-padding-x` | The horizontal padding of the table caption component. | `var(--graupl-spacer-3)` |
28
+ // | `--graupl-table-caption-padding-y` | The vertical padding of the table caption component. | `var(--graupl-spacer-3)` |
29
+ // | `--graupl-table-caption-padding` | The padding of the table caption component (combines x and y padding). | `var(--graupl-table-caption-padding-y) var(--graupl-table-caption-padding-x)` |
30
+ // | `--graupl-table-header-font-weight` | The font weight of the table header component. | `var(--graupl-font-weight-bold)` |
31
+ // | `--graupl-table-header-padding-x` | The horizontal padding of the table header component. | `var(--graupl-spacer-3)` |
32
+ // | `--graupl-table-header-padding-y` | The vertical padding of the table header component. | `var(--graupl-spacer-3)` |
33
+ // | `--graupl-table-header-padding` | The padding of the table header component (combines x and y padding). | `var(--graupl-table-header-padding-y) var(--graupl-table-header-padding-x)` |
34
+ // | `--graupl-table-header-background` | The background colour of the table header component. | `var(--graupl-background)` |
35
+ // | `--graupl-table-header-color` | The text colour of the table header component. | `var(--graupl-color)` |
36
+ // | `--graupl-table-cell-padding-x` | The horizontal padding of the table cell component. | `var(--graupl-spacer-3)` |
37
+ // | `--graupl-table-cell-padding-y` | The vertical padding of the table cell component. | `var(--graupl-spacer-3)` |
38
+ // | `--graupl-table-cell-padding` | The padding of the table cell component (combines x and y padding). | `var(--graupl-table-cell-padding-y) var(--graupl-table-cell-padding-x)` |
39
+ // | `--graupl-table-cell-background` | The background colour of the table cell component. | `var(--graupl-background)` |
40
+ // | `--graupl-table-cell-color` | The text colour of the table cell component. | `var(--graupl-color)` |
41
+ // | `--graupl-table-border-top-width` | The top border width of the table component. | `var(--graupl-border-top-width)` |
42
+ // | `--graupl-table-border-right-width` | The right border width of the table component. | `var(--graupl-border-right-width)` |
43
+ // | `--graupl-table-border-bottom-width` | The bottom border width of the table component. | `var(--graupl-border-bottom-width)` |
44
+ // | `--graupl-table-border-left-width` | The left border width of the table component. | `var(--graupl-border-left-width)` |
45
+ // | `--graupl-table-border-width` | The border width of the table component (combines top, right, bottom, and left widths). | `var(--graupl-table-border-top-width) var(--graupl-table-border-right-width) var(--graupl-table-border-bottom-width) var(--graupl-table-border-left-width)` |
46
+ // | `--graupl-table-border-top-style` | The top border style of the table component. | `var(--graupl-border-top-style)` |
47
+ // | `--graupl-table-border-right-style` | The right border style of the table component. | `var(--graupl-border-right-style)` |
48
+ // | `--graupl-table-border-bottom-style` | The bottom border style of the table component. | `var(--graupl-border-bottom-style)` |
49
+ // | `--graupl-table-border-left-style` | The left border style of the table component. | `var(--graupl-border-left-style)` |
50
+ // | `--graupl-table-border-style` | The border style of the table component (combines top, right, bottom, and left styles). | `var(--graupl-table-border-top-style) var(--graupl-table-border-right-style) var(--graupl-table-border-bottom-style) var(--graupl-table-border-left-style)` |
51
+ // | `--graupl-table-border-top-left-radius` | The top left border radius of the table component. | `var(--graupl-border-top-left-radius)` |
52
+ // | `--graupl-table-border-top-right-radius` | The top right border radius of the table component. | `var(--graupl-border-top-right-radius)` |
53
+ // | `--graupl-table-border-bottom-right-radius` | The bottom right border radius of the table component. | `var(--graupl-border-bottom-right-radius)` |
54
+ // | `--graupl-table-border-bottom-left-radius` | The bottom left border radius of the table component. | `var(--graupl-border-bottom-left-radius)` |
55
+ // | `--graupl-table-border-radius` | The border radius of the table component (combines top left, top right, bottom right, and bottom left radii). | `var(--graupl-table-border-top-left-radius) var(--graupl-table-border-top-right-radius) var(--graupl-table-border-bottom-right-radius) var(--graupl-table-border-bottom-left-radius)` |
56
+ // | `--graupl-table-border-color` | The border colour of the table component. | `var(--graupl-border-color)` |
57
+ // | `--graupl-table-cell-border-top-width` | The top border width of the table cell component. | `var(--graupl-border-top-width)` |
58
+ // | `--graupl-table-cell-border-right-width` | The right border width of the table cell component. | `var(--graupl-border-right-width)` |
59
+ // | `--graupl-table-cell-border-bottom-width` | The bottom border width of the table cell component. | `var(--graupl-border-bottom-width)` |
60
+ // | `--graupl-table-cell-border-left-width` | The left border width of the table cell component. | `var(--graupl-border-left-width)` |
61
+ // | `--graupl-table-cell-border-width` | The border width of the table cell component (combines top, right, bottom, and left widths). | `var(--graupl-table-cell-border-top-width) var(--graupl-table-cell-border-right-width) var(--graupl-table-cell-border-bottom-width) var(--graupl-table-cell-border-left-width)` |
62
+ // | `--graupl-table-cell-border-top-style` | The top border style of the table cell component. | `var(--graupl-border-top-style)` |
63
+ // | `--graupl-table-cell-border-right-style` | The right border style of the table cell component. | `var(--graupl-border-right-style)` |
64
+ // | `--graupl-table-cell-border-bottom-style` | The bottom border style of the table cell component. | `var(--graupl-border-bottom-style)` |
65
+ // | `--graupl-table-cell-border-left-style` | The left border style of the table cell component. | `var(--graupl-border-left-style)` |
66
+ // | `--graupl-table-cell-border-style` | The border style of the table cell component (combines top, right, bottom, and left styles). | `var(--graupl-table-cell-border-top-style) var(--graupl-table-cell-border-right-style) var(--graupl-table-cell-border-bottom-style) var(--graupl-table-cell-border-left-style)` |
67
+ // | `--graupl-table-cell-border-top-left-radius` | The top left border radius of the table cell component. | `var(--graupl-border-top-left-radius)` |
68
+ // | `--graupl-table-cell-border-top-right-radius` | The top right border radius of the table cell component. | `var(--graupl-border-top-right-radius)` |
69
+ // | `--graupl-table-cell-border-bottom-right-radius` | The bottom right border radius of the table cell component. | `var(--graupl-border-bottom-right-radius)` |
70
+ // | `--graupl-table-cell-border-bottom-left-radius` | The bottom left border radius of the table cell component. | `var(--graupl-border-bottom-left-radius)` |
71
+ // | `--graupl-table-cell-border-radius` | The border radius of the table cell component (combines top left, top right, bottom right, and bottom left radii). | `var(--graupl-table-cell-border-top-left-radius) var(--graupl-table-cell-border-top-right-radius) var(--graupl-table-cell-border-bottom-right-radius) var(--graupl-table-cell-border-bottom-left-radius)` |
72
+ // | `--graupl-table-cell-border-color` | The border colour of the table cell component. | `var(--graupl-table-border-color)` |
73
+ // | `--graupl-table-header-border-top-width` | The top border width of the table header component. | `var(--graupl-table-cell-border-top-width)` |
74
+ // | `--graupl-table-header-border-right-width` | The right border width of the table header component. | `var(--graupl-table-cell-border-right-width)` |
75
+ // | `--graupl-table-header-border-bottom-width` | The bottom border width of the table header component. | `var(--graupl-table-cell-border-bottom-width)` |
76
+ // | `--graupl-table-header-border-left-width` | The left border width of the table header component. | `var(--graupl-table-cell-border-left-width)` |
77
+ // | `--graupl-table-header-border-width` | The border width of the table header component (combines top, right, bottom, and left widths). | `var(--graupl-table-header-border-top-width) var(--graupl-table-header-border-right-width) var(--graupl-table-header-border-bottom-width) var(--graupl-table-header-border-left-width)` |
78
+ // | `--graupl-table-header-border-top-style` | The top border style of the table header component. | `var(--graupl-table-cell-border-top-style)` |
79
+ // | `--graupl-table-header-border-right-style` | The right border style of the table header component. | `var(--graupl-table-cell-border-right-style)` |
80
+ // | `--graupl-table-header-border-bottom-style` | The bottom border style of the table header component. | `var(--graupl-table-cell-border-bottom-style)` |
81
+ // | `--graupl-table-header-border-left-style` | The left border style of the table header component. | `var(--graupl-table-cell-border-left-style)` |
82
+ // | `--graupl-table-header-border-style` | The border style of the table header component (combines top, right, bottom, and left styles). | `var(--graupl-table-header-border-top-style) var(--graupl-table-header-border-right-style) var(--graupl-table-header-border-bottom-style) var(--graupl-table-header-border-left-style)` |
83
+ // | `--graupl-table-header-border-top-left-radius` | The top left border radius of the table header component. | `var(--graupl-table-cell-border-top-left-radius)` |
84
+ // | `--graupl-table-header-border-top-right-radius` | The top right border radius of the table header component. | `var(--graupl-table-cell-border-top-right-radius)` |
85
+ // | `--graupl-table-header-border-bottom-right-radius` | The bottom right border radius of the table header component. | `var(--graupl-table-cell-border-bottom-right-radius)` |
86
+ // | `--graupl-table-header-border-bottom-left-radius` | The bottom left border radius of the table header component. | `var(--graupl-table-cell-border-bottom-left-radius)` |
87
+ // | `--graupl-table-header-border-radius` | The border radius of the table header component (combines top left, top right, bottom right, and bottom left radii). | `var(--graupl-table-header-border-top-left-radius) var(--graupl-table-header-border-top-right-radius) var(--graupl-table-header-border-bottom-right-radius) var(--graupl-table-header-border-bottom-left-radius)` |
88
+ // | `--graupl-table-header-border-color` | The border colour of the table header component. | `var(--graupl-table-border-color)` |
89
+ // | `--graupl-table-striped-background` | The background colour of the striped table component modifier. | `var(--graupl-theme-active--secondary--200)` |
90
+ // | `--graupl-table-striped-color` | The text colour of the striped table component modifier. | `var(--graupl-theme-active--secondary--900)` |
91
+ // | `--graupl-table-hover-background` | The background colour of the hoverable table component modifier. | `var(--graupl-theme-active--secondary--300)` |
92
+ // | `--graupl-table-hover-color` | The text colour of the hoverable table component modifier. | `var(--graupl-theme-active--secondary--900)` |
93
+ // | `--graupl-table-highlight-background` | The background colour of the highlighted table component modifier. | `var(--graupl-theme-active--secondary--500)` |
94
+ // | `--graupl-table-highlight-color` | The text colour of the highlighted table component modifier. | `var(--graupl-theme-active--secondary--100)` |
93
95
  //
94
96
  // The following sass variables can be used to customize the generation of the table component:
95
- // - `$selector-base`: The selector base for the component.
96
- // - `$modifier-selector-base`: The selector base for component modifiers.
97
- // - `$generate-base-theme-map`: A flag to generate the base theme maps for table variants.
98
- // - `$table-selector-base`: The selector base for the table component.
99
- // - `$table-selector`: The selector for the table component.
100
- // - `$table-caption-selector-base`: The selector base for the table caption component.
101
- // - `$table-caption-selector`: The selector for the table caption component.
102
- // - `$table-header-selector-base`: The selector base for the table header cell component.
103
- // - `$table-header-selector`: The selector for the table header cell component.
104
- // - `$table-cell-selector-base`: The selector base for the table cell component.
105
- // - `$table-cell-selector`: The selector for the table cell component.
106
- // - `$table-row-selector-base`: The selector base for the table row component.
107
- // - `$table-row-selector`: The selector for the table row component.
108
- // - `$table-body-selector-base`: The selector base for the table body component.
109
- // - `$table-body-selector`: The selector for the table body component.
110
- // - `$table-theme-prefix-selector-base`: The selector base for the themed table component modifiers.
111
- // - `$table-theme-prefix-selector`: The selector prefix for the themed table component modifiers.
112
- // - `$table-bordered-selector-base`: The selector base for the bordered table component modifier.
113
- // - `$table-bordered-selector`: The selector for the bordered table component modifier.
114
- // - `$table-collapsed-selector-base`: The selector base for the collapsed table component modifier.
115
- // - `$table-collapsed-selector`: The selector for the collapsed table component modifier.
116
- // - `$table-striped-columns-selector-base`: The selector base for the striped columns table component modifier.
117
- // - `$table-striped-columns-selector`: The selector for the striped columns table component modifier.
118
- // - `$table-striped-rows-selector-base`: The selector base for the striped rows table component modifier.
119
- // - `$table-striped-rows-selector`: The selector for the striped rows table component modifier.
120
- // - `$table-hoverable-selector-base`: The selector base for the hoverable table component modifier.
121
- // - `$table-hoverable-selector`: The selector for the hoverable table component modifier.
122
- // - `$table-highlight-selector-base`: The selector base for the highlighted table component modifier.
123
- // - `$table-highlight-selector`: The selector for the highlighted table component modifier.
124
- // - `$table-responsive-selector-base`: The selector base for the responsive table component modifier.
125
- // - `$table-responsive-selector`: The selector for the responsive table component modifier.
126
- // - `$table-theme-mappings`: A map of properties and color shades used generate all table variants.
127
- // - `$table-theme-map`: A map of all properties, colors, and color shades used to generate all table variants.
97
+ // | Variable | Description | Default Value |
98
+ // | --- | --- | --- |
99
+ // | `$selector-base` | The selector base for the component. | `""` |
100
+ // | `$modifier-selector-base` | The selector base for component modifiers. | `"."` |
101
+ // | `$generate-base-theme-map` | A flag to generate the base theme maps for table variants. | `true` |
102
+ // | `$themeable` | A flag that determines whether theme modifiers are generated. | `true` |
103
+ // | `$table-selector-base` | The selector base for the table component. | `$selector-base` |
104
+ // | `$table-selector` | The selector for the table component. | `"table"` |
105
+ // | `$table-caption-selector-base` | The selector base for the table caption component. | `$selector-base` |
106
+ // | `$table-caption-selector` | The selector for the table caption component. | `"caption"` |
107
+ // | `$table-header-selector-base` | The selector base for the table header cell component. | `$selector-base` |
108
+ // | `$table-header-selector` | The selector for the table header cell component. | `"th"` |
109
+ // | `$table-cell-selector-base` | The selector base for the table cell component. | `$selector-base` |
110
+ // | `$table-cell-selector` | The selector for the table cell component. | `"td"` |
111
+ // | `$table-row-selector-base` | The selector base for the table row component. | `$selector-base` |
112
+ // | `$table-row-selector` | The selector for the table row component. | `"tr"` |
113
+ // | `$table-body-selector-base` | The selector base for the table body component. | `$selector-base` |
114
+ // | `$table-body-selector` | The selector for the table body component. | `"tbody"` |
115
+ // | `$table-theme-prefix-selector-base` | The selector base for the themed table component modifiers. | `$modifier-selector-base` |
116
+ // | `$table-theme-prefix-selector` | The selector prefix for the themed table component modifiers. | `""` |
117
+ // | `$table-bordered-selector-base` | The selector base for the bordered table component modifier. | `$modifier-selector-base` |
118
+ // | `$table-bordered-selector` | The selector for the bordered table component modifier. | `"bordered"` |
119
+ // | `$table-collapsed-selector-base` | The selector base for the collapsed table component modifier. | `$modifier-selector-base` |
120
+ // | `$table-collapsed-selector` | The selector for the collapsed table component modifier. | `"collapsed"` |
121
+ // | `$table-striped-columns-selector-base` | The selector base for the striped columns table component modifier. | `$modifier-selector-base` |
122
+ // | `$table-striped-columns-selector` | The selector for the striped columns table component modifier. | `"striped-columns"` |
123
+ // | `$table-striped-rows-selector-base` | The selector base for the striped rows table component modifier. | `$modifier-selector-base` |
124
+ // | `$table-striped-rows-selector` | The selector for the striped rows table component modifier. | `"striped-rows"` |
125
+ // | `$table-hoverable-selector-base` | The selector base for the hoverable table component modifier. | `$modifier-selector-base` |
126
+ // | `$table-hoverable-selector` | The selector for the hoverable table component modifier. | `"hoverable"` |
127
+ // | `$table-highlight-selector-base` | The selector base for the highlighted table component modifier. | `$modifier-selector-base` |
128
+ // | `$table-highlight-selector` | The selector for the highlighted table component modifier. | `"highlight"` |
129
+ // | `$table-responsive-selector-base` | The selector base for the responsive table component modifier. | `$modifier-selector-base` |
130
+ // | `$table-responsive-selector` | The selector for the responsive table component modifier. | `"responsive-table"` |
131
+ // | `$table-theme-mappings` | A map of properties and color shades used generate all table variants. | `()` |
132
+ // | `$table-theme-map` | A map of all properties, colors, and color shades used to generate all table variants. | `()` |
128
133
  //
129
- // Using `$table-theme-mappings`
134
+ // ## Using `$table-theme-mappings`
130
135
  //
131
136
  // `$table-theme-mappings` is a 1-level map of properties and shade values.
132
137
  //
@@ -250,8 +255,8 @@
250
255
  @use "variables" as *;
251
256
  @use "../../mixins/layer" as *;
252
257
  @use "../../defaults" as root-defaults;
253
- @use "../../functions/theme";
254
- @use "sass:map";
258
+ @use "../../mixins/state";
259
+ @use "../../mixins/theme";
255
260
 
256
261
  @include layer(base) {
257
262
  // table
@@ -326,18 +331,22 @@
326
331
  @include layer(theme) {
327
332
  // table
328
333
  #{defaults.$table-selector-base}#{defaults.$table-selector} {
329
- @each $color, $map in defaults.$table-theme-map {
330
- // e.g. &.primary, &.secondary, &.tertiary,
331
- // e.g. .primary, .secondary, .tertiary
332
- &#{defaults.$table-theme-prefix-selector-base}#{defaults.$table-theme-prefix-selector}#{$color},
333
- #{defaults.$table-theme-prefix-selector-base}#{defaults.$table-theme-prefix-selector}#{$color} {
334
- @each $prop, $value in $map {
335
- --#{root-defaults.$prefix}table-#{$prop}: #{theme.get(
336
- map.get($value, color),
337
- map.get($value, shade)
338
- )};
339
- }
340
- }
334
+ @if root-defaults.$themeable-components and defaults.$themeable {
335
+ @include theme.generate-modifiers(
336
+ defaults.$table-theme-map,
337
+ defaults.$table-theme-prefix-selector-base,
338
+ defaults.$table-theme-prefix-selector,
339
+ "table-"
340
+ );
341
+
342
+ // Apply theme modifiers when used without the parent reference.
343
+ @include theme.generate-modifiers(
344
+ defaults.$table-theme-map,
345
+ defaults.$table-theme-prefix-selector-base,
346
+ defaults.$table-theme-prefix-selector,
347
+ "table-",
348
+ ""
349
+ );
341
350
  }
342
351
 
343
352
  // th