@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/form/_index.scss CHANGED
@@ -9,76 +9,156 @@
9
9
  // - `label`: The label component.
10
10
  // - `fieldset`: The fieldset component.
11
11
  //
12
- // The following custom properties control the generated selectors:
13
- // - `--graupl-input-padding-x`: The horizontal padding for input components.
14
- // - `--graupl-input-padding-y`: The vertical padding for input components.
15
- // - `--graupl-input-padding`: The padding for input components (combines x and y padding).
16
- // - `--graupl-input-font-size`: The font size for input components.
17
- // - `--graupl-label-font-size`: The font size for label components.
18
- // - `--graupl-fieldset-direction`: The direction of fieldset items.
19
- // - `--graupl-fieldset-gap`: The gap between fieldset items.
20
- // - `--graupl-fieldset-padding-x`: The horizontal padding for fieldset components.
21
- // - `--graupl-fieldset-padding-y`: The vertical padding for fieldset components.
22
- // - `--graupl-fieldset-padding`: The padding for fieldset components (combines x and y padding).
23
- // - `--graupl-fieldset-font-size`: The font size for fieldset components.
24
- // - `--graupl-input-background`: The background color for input components.
25
- // - `--graupl-fieldset-background`: The background color for fieldset components.
26
- // - `--graupl-input-color`: The text color for input components.
27
- // - `--graupl-input-placeholder-color`: The placeholder text color for input components.
28
- // - `--graupl-label-color`: The text color for label components.
29
- // - `--graupl-fieldset-color`: The text color for fieldset components.
30
- // - `--graupl-input-disabled-color`: The text color for disabled input components.
31
- // - `--graupl-input-placeholder-disabled-color`: The placeholder text color for disabled input components.
32
- // - `--graupl-label-disabled-color`: The text color for disabled label components.
33
- // - `--graupl-fieldset-disabled-color`: The text color for disabled fieldset components.
34
- // - `--graupl-input-border-top-width`: The top border width for input components.
35
- // - `--graupl-input-border-right-width`: The right border width for input components.
36
- // - `--graupl-input-border-bottom-width`: The bottom border width for input components.
37
- // - `--graupl-input-border-left-width`: The left border width for input components.
38
- // - `--graupl-input-border-width`: The border width for input components (combines top, right, bottom, and left widths).
39
- // - `--graupl-input-border-top-style`: The top border style for input components.
40
- // - `--graupl-input-border-right-style`: The right border style for input components.
41
- // - `--graupl-input-border-bottom-style`: The bottom border style for input components.
42
- // - `--graupl-input-border-left-style`: The left border style for input components.
43
- // - `--graupl-input-border-style`: The border style for input components (combines top, right, bottom, and left styles).
44
- // - `--graupl-input-border-top-left-radius`: The top-left border radius for input components.
45
- // - `--graupl-input-border-top-right-radius`: The top-right border radius for input components.
46
- // - `--graupl-input-border-bottom-right-radius`: The bottom-right border radius for input components.
47
- // - `--graupl-input-border-bottom-left-radius`: The bottom-left border radius for input components.
48
- // - `--graupl-input-border-radius`: The border radius for input components (combines top-left, top-right, bottom-right, and bottom-left radii).
49
- // - `--graupl-fieldset-border-top-width`: The top border width for fieldset components.
50
- // - `--graupl-fieldset-border-right-width`: The right border width for fieldset components.
51
- // - `--graupl-fieldset-border-bottom-width`: The bottom border width for fieldset components.
52
- // - `--graupl-fieldset-border-left-width`: The left border width for fieldset components.
53
- // - `--graupl-fieldset-border-width`: The border width for fieldset components (combines top, right, bottom, and left widths).
54
- // - `--graupl-fieldset-border-top-style`: The top border style for fieldset components.
55
- // - `--graupl-fieldset-border-right-style`: The right border style for fieldset components.
56
- // - `--graupl-fieldset-border-bottom-style`: The bottom border style for fieldset components.
57
- // - `--graupl-fieldset-border-left-style`: The left border style for fieldset components.
58
- // - `--graupl-fieldset-border-style`: The border style for fieldset components (combines top, right, bottom, and left styles).
59
- // - `--graupl-fieldset-border-top-left-radius`: The top-left border radius for fieldset components.
60
- // - `--graupl-fieldset-border-top-right-radius`: The top-right border radius for fieldset components.
61
- // - `--graupl-fieldset-border-bottom-right-radius`: The bottom-right border radius for fieldset components.
62
- // - `--graupl-fieldset-border-bottom-left-radius`: The bottom-left border radius for fieldset components.
63
- // - `--graupl-fieldset-border-radius`: The border radius for fieldset components (combines top-left, top-right, bottom-right, and bottom-left radii).
64
- // - `--graupl-input-border-color`: The border color for input components.
65
- // - `--graupl-input-disabled-border-color`: The border color for disabled input components.
66
- // - `--graupl-fieldset-border-color`: The border color for fieldset components.
67
- // - `--graupl-fieldset-disabled-border-color`: The border color for disabled fieldset components.
68
- // - `--graupl-input-accent-color`: The accent color for input components.
69
- //
70
- // The following variables control the generated selectors:
71
- // - `$selector-base`: The selector base for the component.
72
- // - `$modifier-selector-base`: The selector base for component modifiers.
73
- // - `$input-selector-base`: The base selector for the input component.
74
- // - `$input-selector`: The input component selector.
75
- // - `$textarea-selector-base`: The base selector for the textarea component.
76
- // - `$textarea-selector`: The textarea component selector.
77
- // - `$select-selector-base`: The base selector for the select component.
78
- // - `$select-selector`: The select component selector.
79
- // - `$fieldset-selector-base`: The base selector for the fieldset component.
80
- // - `$fieldset-selector`: The fieldset component selector.
81
- // - `$fieldset-direction`: The direction of fieldset component items.
12
+ // The following custom properties can be used to customize the form components:
13
+ // | Property | Description | Default Value |
14
+ // | ---------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
15
+ // | `--graupl-input-padding-x` | The horizontal padding for input components. | `var(--graupl-spacer-5)` |
16
+ // | `--graupl-input-padding-y` | The vertical padding for input components. | `var(--graupl-spacer-3)` |
17
+ // | `--graupl-input-padding` | The padding for input components (combines x and y padding). | `var(--graupl-input-padding-y) var(--graupl-input-padding-x)` |
18
+ // | `--graupl-input-font-size` | The font size for input components. | `var(--graupl-font-size-base)` |
19
+ // | `--graupl-label-font-size` | The font size for label components. | `var(--graupl-input-font-size)` |
20
+ // | `--graupl-fieldset-direction` | The direction of fieldset items- controls the `flex-direction` property. | `column` |
21
+ // | `--graupl-fieldset-gap` | The gap between fieldset items. | `var(--graupl-spacer-2)` |
22
+ // | `--graupl-fieldset-padding-x` | The horizontal padding for fieldset components. | `var(--graupl-input-padding-x)` |
23
+ // | `--graupl-fieldset-padding-y` | The vertical padding for fieldset components. | `var(--graupl-input-padding-y)` |
24
+ // | `--graupl-fieldset-padding` | The padding for fieldset components (combines x and y padding). | `var(--graupl-fieldset-padding-y) var(--graupl-fieldset-padding-x)` |
25
+ // | `--graupl-fieldset-font-size` | The font size for fieldset components. | `var(--graupl-input-font-size)` |
26
+ // | `--graupl-input-background` | The background color for input components. | `var(--graupl-background)` |
27
+ // | `--graupl-fieldset-background` | The background color for fieldset components. | `var(--graupl-input-background)` |
28
+ // | `--graupl-input-color` | The text color for input components. | `var(--graupl-color)` |
29
+ // | `--graupl-input-placeholder-color` | The placeholder text color for input components. | `var(--graupl-theme-active--secondary--600)` |
30
+ // | `--graupl-label-color` | The text color for label components. | `var(--graupl-input-color)` |
31
+ // | `--graupl-fieldset-color` | The text color for fieldset components. | `var(--graupl-input-color)` |
32
+ // | `--graupl-input-disabled-color` | The text color for disabled input components. | `var(--graupl-theme-active--secondary--400)` |
33
+ // | `--graupl-input-placeholder-disabled-color` | The placeholder text color for disabled input components. | `var(--graupl-input-disabled-color)` |
34
+ // | `--graupl-label-disabled-color` | The text color for labels for disabled components. | `var(--graupl-input-disabled-color)` |
35
+ // | `--graupl-fieldset-disabled-color` | The text color for disabled fieldset components. | `var(--graupl-input-disabled-color)` |
36
+ // | `--graupl-input-border-top-width` | The top border width for input components. | `var(--graupl-border-top-width)` |
37
+ // | `--graupl-input-border-right-width` | The right border width for input components. | `var(--graupl-border-right-width)` |
38
+ // | `--graupl-input-border-bottom-width` | The bottom border width for input components. | `var(--graupl-border-bottom-width)` |
39
+ // | `--graupl-input-border-left-width` | The left border width for input components. | `var(--graupl-border-left-width)` |
40
+ // | `--graupl-input-border-width` | The border width for input components (combines top, right, bottom, and left widths). | `var(--graupl-input-border-top-width) var(--graupl-input-border-right-width) var(--graupl-input-border-bottom-width) var(--graupl-input-border-left-width)` |
41
+ // | `--graupl-input-border-top-style` | The top border style for input components. | `var(--graupl-border-top-style)` |
42
+ // | `--graupl-input-border-right-style` | The right border style for input components. | `var(--graupl-border-right-style)` |
43
+ // | `--graupl-input-border-bottom-style` | The bottom border style for input components. | `var(--graupl-border-bottom-style)` |
44
+ // | `--graupl-input-border-left-style` | The left border style for input components. | `var(--graupl-border-left-style)` |
45
+ // | `--graupl-input-border-style` | The border style for input components (combines top, right, bottom, and left styles). | `var(--graupl-input-border-top-style) var(--graupl-input-border-right-style) var(--graupl-input-border-bottom-style) var(--graupl-input-border-left-style)` |
46
+ // | `--graupl-input-border-top-left-radius` | The top-left border radius for input components. | `var(--graupl-border-top-left-radius)` |
47
+ // | `--graupl-input-border-top-right-radius` | The top-right border radius for input components. | `var(--graupl-border-top-right-radius)` |
48
+ // | `--graupl-input-border-bottom-right-radius` | The bottom-right border radius for input components. | `var(--graupl-border-bottom-right-radius)` |
49
+ // | `--graupl-input-border-bottom-left-radius` | The bottom-left border radius for input components. | `var(--graupl-border-bottom-left-radius)` |
50
+ // | `--graupl-input-border-radius` | The border radius for input components (combines top-left, top-right, bottom-right, and bottom-left radii). | `var(--graupl-input-border-top-left-radius) var(--graupl-input-border-top-right-radius) var(--graupl-input-border-bottom-right-radius) var(--graupl-input-border-bottom-left-radius)` |
51
+ // | `--graupl-fieldset-border-top-width` | The top border width for fieldset components. | `var(--graupl-input-border-top-width)` |
52
+ // | `--graupl-fieldset-border-right-width` | The right border width for fieldset components. | `var(--graupl-input-border-right-width)` |
53
+ // | `--graupl-fieldset-border-bottom-width` | The bottom border width for fieldset components. | `var(--graupl-input-border-bottom-width)` |
54
+ // | `--graupl-fieldset-border-left-width` | The left border width for fieldset components. | `var(--graupl-input-border-left-width)` |
55
+ // | `--graupl-fieldset-border-width` | The border width for fieldset components (combines top, right, bottom, and left widths). | `var(--graupl-fieldset-border-top-width) var(--graupl-fieldset-border-right-width) var(--graupl-fieldset-border-bottom-width) var(--graupl-fieldset-border-left-width)` |
56
+ // | `--graupl-fieldset-border-top-style` | The top border style for fieldset components. | `var(--graupl-input-border-top-style)` |
57
+ // | `--graupl-fieldset-border-right-style` | The right border style for fieldset components. | `var(--graupl-input-border-right-style)` |
58
+ // | `--graupl-fieldset-border-bottom-style` | The bottom border style for fieldset components. | `var(--graupl-input-border-bottom-style)` |
59
+ // | `--graupl-fieldset-border-left-style` | The left border style for fieldset components. | `var(--graupl-input-border-left-style)` |
60
+ // | `--graupl-fieldset-border-style` | The border style for fieldset components (combines top, right, bottom, and left styles). | `var(--graupl-fieldset-border-top-style) var(--graupl-fieldset-border-right-style) var(--graupl-fieldset-border-bottom-style) var(--graupl-fieldset-border-left-style)` |
61
+ // | `--graupl-fieldset-border-top-left-radius` | The top-left border radius for fieldset components. | `var(--graupl-input-border-top-left-radius)` |
62
+ // | `--graupl-fieldset-border-top-right-radius` | The top-right border radius for fieldset components. | `var(--graupl-input-border-top-right-radius)` |
63
+ // | `--graupl-fieldset-border-bottom-right-radius` | The bottom-right border radius for fieldset components. | `var(--graupl-input-border-bottom-right-radius)` |
64
+ // | `--graupl-fieldset-border-bottom-left-radius` | The bottom-left border radius for fieldset components. | `var(--graupl-input-border-bottom-left-radius)` |
65
+ // | `--graupl-fieldset-border-radius` | The border radius for fieldset components (combines top-left, top-right, bottom-right, and bottom-left radii). | `var(--graupl-fieldset-border-top-left-radius) var(--graupl-fieldset-border-top-right-radius) var(--graupl-fieldset-border-bottom-right-radius) var(--graupl-fieldset-border-bottom-left-radius)` |
66
+ // | `--graupl-input-border-color` | The border color for input components. | `var(--graupl-border-color)` |
67
+ // | `--graupl-input-disabled-border-color` | The border color for disabled input components. | `var(--graupl-theme-active--secondary--200)` |
68
+ // | `--graupl-fieldset-border-color` | The border color for fieldset components. | `var(--graupl-input-border-color)` |
69
+ // | `--graupl-fieldset-disabled-border-color` | The border color for disabled fieldset components. | `var(--graupl-input-disabled-border-color)` |
70
+ // | `--graupl-input-accent-color` | The accent color for input components. | `var(--graupl-input-color)` |
71
+ //
72
+ // The following sass variables can be used to customize the generation of the form components:
73
+ // | Variable | Description | Default Value |
74
+ // | -------------------------------------- | -------------------------------------------------------------------------- | ----------------------------------- |
75
+ // | `$selector-base` | The selector base for the component. | `""` |
76
+ // | `$modifier-selector-base` | The selector base for component modifiers. | `$selector-base` |
77
+ // | `$generate-base-theme-map` | Flag to generate the base theme maps for form elements. | `true` |
78
+ // | `$themeable` | Flag to generate theme modifiers. | `false` |
79
+ // | `$input-selector-base` | The base selector for the input component. | `$selector-base` |
80
+ // | `$input-selector` | The input component selector. | `input` |
81
+ // | `$input-theme-prefix-selector-base` | Selector base used for input theme modifiers. | `$modifier-selector-base` |
82
+ // | `$input-theme-prefix-selector` | Selector prefix used for input theme modifiers. | `""` |
83
+ // | `$textarea-selector-base` | The base selector for the textarea component. | `$selector-base` |
84
+ // | `$textarea-selector` | The textarea component selector. | `textarea` |
85
+ // | `$select-selector-base` | The base selector for the select component. | `$selector-base` |
86
+ // | `$select-selector` | The select component selector. | `select` |
87
+ // | `$label-selector-base` | The base selector for the label component. | `$selector-base` |
88
+ // | `$label-selector` | The label component selector. | `label` |
89
+ // | `$label-theme-prefix-selector-base` | Selector base used for label theme modifiers. | `$input-theme-prefix-selector-base` |
90
+ // | `$label-theme-prefix-selector` | Selector prefix used for label theme modifiers. | `$input-theme-prefix-selector` |
91
+ // | `$fieldset-selector-base` | The base selector for the fieldset component. | `$selector-base` |
92
+ // | `$fieldset-selector` | The fieldset component selector. | `fieldset` |
93
+ // | `$fieldset-theme-prefix-selector-base` | Selector base used for fieldset theme modifiers. | `$input-theme-prefix-selector-base` |
94
+ // | `$fieldset-theme-prefix-selector` | Selector prefix used for fieldset theme modifiers. | `$input-theme-prefix-selector` |
95
+ // | `$fieldset-direction` | The direction of fieldset component items. | `column` |
96
+ // | `$input-theme-mappings` | Map of properties and shade values applied to themed input variants. | `()` |
97
+ // | `$input-theme-map` | Fully expanded property map used to generate themed input variants. | `()` |
98
+ // | `$label-theme-mappings` | Map of properties and shade values applied to themed label variants. | `()` |
99
+ // | `$label-theme-map` | Fully expanded property map used to generate themed label variants. | `()` |
100
+ // | `$fieldset-theme-mappings` | Map of properties and shade values applied to themed fieldset variants. | `()` |
101
+ // | `$fieldset-theme-map` | Fully expanded property map used to generate themed fieldset variants. | `()` |
102
+ //
103
+ // ## Using `$input-theme-mappings`, `$label-theme-mappings`, and `$fieldset-theme-mappings`
104
+ //
105
+ // Each of these variables is a single-level map of properties and shade values.
106
+ //
107
+ // e.g.
108
+ // ```scss
109
+ // $input-theme-mappings: (
110
+ // color: 900,
111
+ // background: 100,
112
+ // border-color: 700,
113
+ // );
114
+ // ```
115
+ //
116
+ // This directly[1] informs all input variants what shade to use for each property key.
117
+ // Based on the example above:
118
+ // - Primary inputs expose `--graupl-input-color`, `--graupl-input-background`, and `--graupl-input-border-color` as `var(--graupl-theme-active--primary--900/100/700)`,
119
+ // - Secondary inputs expose those properties via the secondary palette, and
120
+ // - Tertiary inputs expose those properties via the tertiary palette.
121
+ //
122
+ // The same pattern applies to `$label-theme-mappings` and `$fieldset-theme-mappings`, ensuring every form element stays in sync across variants.
123
+ //
124
+ // ```scss
125
+ // $label-theme-mappings: (
126
+ // color: 800,
127
+ // );
128
+ // $fieldset-theme-mappings: (
129
+ // background: 50,
130
+ // border-color: 600,
131
+ // );
132
+ // ```
133
+ //
134
+ // - Primary labels use `--graupl-theme-active--primary--800` for `--graupl-label-color`,
135
+ // - Primary fieldsets use `--graupl-theme-active--primary--50` / `--graupl-theme-active--primary--600` for their background/border colours, and other variants follow suit using their palettes.
136
+ //
137
+ // [1] Each `*-theme-mappings` map gets parsed into a larger, more explicit map: the corresponding `*-theme-map`.
138
+ //
139
+ // ## Using `$input-theme-map`, `$label-theme-map`, and `$fieldset-theme-map`
140
+ //
141
+ // These variables are multi-level maps of properties, colours, and shade values, allowing you to override individual variants without affecting the others.
142
+ //
143
+ // e.g.
144
+ // ```scss
145
+ // $input-theme-map: (
146
+ // primary: (
147
+ // border-color: (
148
+ // color: primary,
149
+ // shade: 950,
150
+ // ),
151
+ // ),
152
+ // secondary: (
153
+ // background: (
154
+ // color: secondary,
155
+ // shade: 200,
156
+ // ),
157
+ // ),
158
+ // );
159
+ // ```
160
+ //
161
+ // This example deepens the primary input border colour while lightening the secondary input background. You can mix and match overrides for labels and fieldsets in their respective maps to target variants independently.
82
162
  //
83
163
  // @example
84
164
  // <label for="input-id">Input Label</label>
@@ -111,6 +191,7 @@
111
191
 
112
192
  @use "../../defaults" as root-defaults;
113
193
  @use "../../mixins/layer" as *;
194
+ @use "../../mixins/theme";
114
195
  @use "defaults";
115
196
  @use "sass:map";
116
197
  @use "variables" as *;
@@ -188,6 +269,15 @@
188
269
  }
189
270
  }
190
271
  }
272
+
273
+ @if root-defaults.$themeable-components and defaults.$themeable {
274
+ @include theme.generate-modifiers(
275
+ defaults.$input-theme-map,
276
+ defaults.$input-theme-prefix-selector-base,
277
+ defaults.$input-theme-prefix-selector,
278
+ "input-"
279
+ );
280
+ }
191
281
  }
192
282
 
193
283
  // label
@@ -204,6 +294,21 @@
204
294
  color: $label-disabled-color;
205
295
  }
206
296
  }
297
+
298
+ @if root-defaults.$themeable-components and defaults.$themeable {
299
+ @include theme.generate-modifiers(
300
+ defaults.$label-theme-map,
301
+ defaults.$label-theme-prefix-selector-base,
302
+ defaults.$label-theme-prefix-selector,
303
+ "label-"
304
+ );
305
+ @include theme.generate-modifiers(
306
+ defaults.$input-theme-map,
307
+ defaults.$input-theme-prefix-selector-base,
308
+ defaults.$input-theme-prefix-selector,
309
+ "input-"
310
+ );
311
+ }
207
312
  }
208
313
 
209
314
  // fieldset
@@ -223,5 +328,26 @@
223
328
  }
224
329
  }
225
330
  }
331
+
332
+ @if root-defaults.$themeable-components and defaults.$themeable {
333
+ @include theme.generate-modifiers(
334
+ defaults.$fieldset-theme-map,
335
+ defaults.$fieldset-theme-prefix-selector-base,
336
+ defaults.$fieldset-theme-prefix-selector,
337
+ "fieldset-"
338
+ );
339
+ @include theme.generate-modifiers(
340
+ defaults.$label-theme-map,
341
+ defaults.$label-theme-prefix-selector-base,
342
+ defaults.$label-theme-prefix-selector,
343
+ "label-"
344
+ );
345
+ @include theme.generate-modifiers(
346
+ defaults.$input-theme-map,
347
+ defaults.$input-theme-prefix-selector-base,
348
+ defaults.$input-theme-prefix-selector,
349
+ "input-"
350
+ );
351
+ }
226
352
  }
227
353
  }