@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/alert/_variables.scss CHANGED
@@ -3,123 +3,243 @@
3
3
  // These values are to be used to directly style components and provide a
4
4
  // cleaner way to reference custom properties.
5
5
 
6
+ // Custom property defaults:
7
+ // | Custom property | Default |
8
+ // | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
9
+ // | --graupl-alert-padding-x | var(--graupl-spacer-5) |
10
+ // | --graupl-alert-padding-y | var(--graupl-spacer-5) |
11
+ // | --graupl-alert-padding | var(--graupl-alert-padding-y) var(--graupl-alert-padding-x) |
12
+ // | --graupl-alert-column-gap | var(--graupl-spacer-0) |
13
+ // | --graupl-alert-row-gap | var(--graupl-spacer-3) |
14
+ // | --graupl-alert-gap | var(--graupl-alert-column-gap) var(--graupl-alert-row-gap) |
15
+ // | --graupl-alert-background | var(--graupl-background) |
16
+ // | --graupl-alert-color | var(--graupl-color) |
17
+ // | --graupl-alert-link-color | link-variables.var(--graupl-link-color) |
18
+ // | --graupl-alert-link-visited-color | var(--graupl-alert-link-color) |
19
+ // | --graupl-alert-link-focus-color | var(--graupl-alert-link-color) |
20
+ // | --graupl-alert-link-hover-color | link-variables.var(--graupl-link-hover-color) |
21
+ // | --graupl-alert-link-active-color | var(--graupl-alert-link-hover-color) |
22
+ // | --graupl-alert-link-disabled-color | link-variables.var(--graupl-link-disabled-color) |
23
+ // | --graupl-alert-border-color | var(--graupl-alert-color) |
24
+ // | --graupl-alert-border-top-left-radius | var(--graupl-border-top-left-radius) |
25
+ // | --graupl-alert-border-top-right-radius | var(--graupl-border-top-right-radius) |
26
+ // | --graupl-alert-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |
27
+ // | --graupl-alert-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |
28
+ // | --graupl-alert-border-radius | var(--graupl-alert-border-top-left-radius) var(--graupl-alert-border-top-right-radius) var(--graupl-alert-border-bottom-right-radius) var(--graupl-alert-border-bottom-left-radius) |
29
+ // | --graupl-alert-border-top-width | var(--graupl-border-top-width) |
30
+ // | --graupl-alert-border-right-width | var(--graupl-border-right-width) |
31
+ // | --graupl-alert-border-bottom-width | var(--graupl-border-bottom-width) |
32
+ // | --graupl-alert-border-left-width | var(--graupl-border-left-width) |
33
+ // | --graupl-alert-border-width | var(--graupl-alert-border-top-width) var(--graupl-alert-border-right-width) var(--graupl-alert-border-bottom-width) var(--graupl-alert-border-left-width) |
34
+ // | --graupl-alert-border-top-style | var(--graupl-border-top-style) |
35
+ // | --graupl-alert-border-right-style | var(--graupl-border-right-style) |
36
+ // | --graupl-alert-border-bottom-style | var(--graupl-border-bottom-style) |
37
+ // | --graupl-alert-border-left-style | var(--graupl-border-left-style) |
38
+ // | --graupl-alert-border-style | var(--graupl-alert-border-top-style) var(--graupl-alert-border-right-style) var(--graupl-alert-border-bottom-style) var(--graupl-alert-border-left-style) |
39
+ // | --graupl-alert-transition | opacity var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function), transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function) |
40
+ // | --graupl-alert-transition-reduced-motion | opacity var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function) |
41
+ // | --graupl-alert-header-padding-x | 0 |
42
+ // | --graupl-alert-header-padding-y | 0 |
43
+ // | --graupl-alert-header-padding | var(--graupl-alert-header-padding-y) var(--graupl-alert-header-padding-x) |
44
+ // | --graupl-alert-title-color | var(--graupl-alert-color) |
45
+ // | --graupl-alert-title-font-size | var(--graupl-h4-font-size) |
46
+ // | --graupl-alert-title-font-weight | var(--graupl-h4-font-weight) |
47
+ // | --graupl-alert-title-font-family | var(--graupl-h4-font-family) |
48
+ // | --graupl-alert-title-line-height | var(--graupl-h4-line-height) |
49
+ // | --graupl-alert-title-margin | 0 0 0 0 |
50
+ // | --graupl-alert-body-padding-x | 0 |
51
+ // | --graupl-alert-body-padding-y | 0 |
52
+ // | --graupl-alert-body-padding | var(--graupl-alert-body-padding-y) var(--graupl-alert-body-padding-x) |
53
+ // | --graupl-alert-footer-padding-x | 0 |
54
+ // | --graupl-alert-footer-padding-y | 0 |
55
+ // | --graupl-alert-footer-padding | var(--graupl-alert-footer-padding-y) var(--graupl-alert-footer-padding-x) |
56
+
6
57
  @use "defaults";
7
58
  @use "../../defaults" as root-defaults;
8
59
  @use "../../variables" as root-variables;
9
60
  @use "../../theme/color/variables" as color;
10
61
  @use "../../theme/typography/variables" as typography;
62
+ @use "../../base/link/variables" as link-variables;
11
63
  @use "sass:map";
12
64
 
13
65
  // Alert properties.
66
+ // --graupl-alert-padding-x
14
67
  $alert-padding-x: var(
15
68
  --#{root-defaults.$prefix}alert-padding-x,
16
69
  #{map.get(root-variables.$spacers, 5)}
17
70
  );
71
+
72
+ // --graupl-alert-padding-y
18
73
  $alert-padding-y: var(
19
74
  --#{root-defaults.$prefix}alert-padding-y,
20
75
  #{map.get(root-variables.$spacers, 5)}
21
76
  );
77
+
78
+ // --graupl-alert-padding
22
79
  $alert-padding: var(
23
80
  --#{root-defaults.$prefix}alert-padding,
24
81
  #{$alert-padding-y} #{$alert-padding-x}
25
82
  );
26
83
 
27
84
  // Alert gap properties.
85
+ // --graupl-alert-column-gap
28
86
  $alert-column-gap: var(
29
87
  --#{root-defaults.$prefix}alert-column-gap,
30
88
  #{map.get(root-variables.$spacers, 0)}
31
89
  );
90
+
91
+ // --graupl-alert-row-gap
32
92
  $alert-row-gap: var(
33
93
  --#{root-defaults.$prefix}alert-row-gap,
34
94
  #{map.get(root-variables.$spacers, 3)}
35
95
  );
96
+
97
+ // --graupl-alert-gap
36
98
  $alert-gap: var(
37
99
  --#{root-defaults.$prefix}alert-gap,
38
100
  #{$alert-column-gap} #{$alert-row-gap}
39
101
  );
40
102
 
41
103
  // Alert color properties.
104
+ // --graupl-alert-background
42
105
  $alert-background: var(
43
106
  --#{root-defaults.$prefix}alert-background,
44
107
  #{color.$background}
45
108
  );
109
+
110
+ // --graupl-alert-color
46
111
  $alert-color: var(--#{root-defaults.$prefix}alert-color, #{color.$color});
47
- $alert-link-color: var(--#{root-defaults.$prefix}alert-link-color);
112
+
113
+ // --graupl-alert-link-color
114
+ $alert-link-color: var(
115
+ --#{root-defaults.$prefix}alert-link-color,
116
+ #{link-variables.$link-color}
117
+ );
118
+
119
+ // --graupl-alert-link-visited-color
48
120
  $alert-link-visited-color: var(
49
- --#{root-defaults.$prefix}alert-link-visited-color
121
+ --#{root-defaults.$prefix}alert-link-visited-color,
122
+ #{$alert-link-color}
123
+ );
124
+
125
+ // --graupl-alert-link-focus-color
126
+ $alert-link-focus-color: var(
127
+ --#{root-defaults.$prefix}alert-link-focus-color,
128
+ #{$alert-link-color}
50
129
  );
51
- $alert-link-focus-color: var(--#{root-defaults.$prefix}alert-link-focus-color);
52
- $alert-link-hover-color: var(--#{root-defaults.$prefix}alert-link-hover-color);
130
+
131
+ // --graupl-alert-link-hover-color
132
+ $alert-link-hover-color: var(
133
+ --#{root-defaults.$prefix}alert-link-hover-color,
134
+ #{link-variables.$link-hover-color}
135
+ );
136
+
137
+ // --graupl-alert-link-active-color
53
138
  $alert-link-active-color: var(
54
- --#{root-defaults.$prefix}alert-link-active-color
139
+ --#{root-defaults.$prefix}alert-link-active-color,
140
+ #{$alert-link-hover-color}
55
141
  );
142
+
143
+ // --graupl-alert-link-disabled-color
56
144
  $alert-link-disabled-color: var(
57
- --#{root-defaults.$prefix}alert-link-disabled-color
145
+ --#{root-defaults.$prefix}alert-link-disabled-color,
146
+ #{link-variables.$link-disabled-color}
58
147
  );
59
148
 
60
149
  // Alert border-properties.
150
+ // --graupl-alert-border-color
61
151
  $alert-border-color: var(
62
152
  --#{root-defaults.$prefix}alert-border-color,
63
153
  #{$alert-color}
64
154
  );
155
+
156
+ // --graupl-alert-border-top-left-radius
65
157
  $alert-border-top-left-radius: var(
66
158
  --#{root-defaults.$prefix}alert-border-top-left-radius,
67
159
  #{root-variables.$border-top-left-radius}
68
160
  );
161
+
162
+ // --graupl-alert-border-top-right-radius
69
163
  $alert-border-top-right-radius: var(
70
164
  --#{root-defaults.$prefix}alert-border-top-right-radius,
71
165
  #{root-variables.$border-top-right-radius}
72
166
  );
167
+
168
+ // --graupl-alert-border-bottom-left-radius
73
169
  $alert-border-bottom-left-radius: var(
74
170
  --#{root-defaults.$prefix}alert-border-bottom-left-radius,
75
171
  #{root-variables.$border-bottom-left-radius}
76
172
  );
173
+
174
+ // --graupl-alert-border-bottom-right-radius
77
175
  $alert-border-bottom-right-radius: var(
78
176
  --#{root-defaults.$prefix}alert-border-bottom-right-radius,
79
177
  #{root-variables.$border-bottom-right-radius}
80
178
  );
179
+
180
+ // --graupl-alert-border-radius
81
181
  $alert-border-radius: var(
82
182
  --#{root-defaults.$prefix}alert-border-radius,
83
183
  #{$alert-border-top-left-radius} #{$alert-border-top-right-radius}
84
184
  #{$alert-border-bottom-right-radius} #{$alert-border-bottom-left-radius}
85
185
  );
186
+
187
+ // --graupl-alert-border-top-width
86
188
  $alert-border-top-width: var(
87
189
  --#{root-defaults.$prefix}alert-border-top-width,
88
190
  #{root-variables.$border-top-width}
89
191
  );
192
+
193
+ // --graupl-alert-border-right-width
90
194
  $alert-border-right-width: var(
91
195
  --#{root-defaults.$prefix}alert-border-right-width,
92
196
  #{root-variables.$border-right-width}
93
197
  );
198
+
199
+ // --graupl-alert-border-bottom-width
94
200
  $alert-border-bottom-width: var(
95
201
  --#{root-defaults.$prefix}alert-border-bottom-width,
96
202
  #{root-variables.$border-bottom-width}
97
203
  );
204
+
205
+ // --graupl-alert-border-left-width
98
206
  $alert-border-left-width: var(
99
207
  --#{root-defaults.$prefix}alert-border-left-width,
100
208
  #{root-variables.$border-left-width}
101
209
  );
210
+
211
+ // --graupl-alert-border-width
102
212
  $alert-border-width: var(
103
213
  --#{root-defaults.$prefix}alert-border-width,
104
214
  #{$alert-border-top-width} #{$alert-border-right-width}
105
215
  #{$alert-border-bottom-width} #{$alert-border-left-width}
106
216
  );
217
+
218
+ // --graupl-alert-border-top-style
107
219
  $alert-border-top-style: var(
108
220
  --#{root-defaults.$prefix}alert-border-top-style,
109
221
  #{root-variables.$border-top-style}
110
222
  );
223
+
224
+ // --graupl-alert-border-right-style
111
225
  $alert-border-right-style: var(
112
226
  --#{root-defaults.$prefix}alert-border-right-style,
113
227
  #{root-variables.$border-right-style}
114
228
  );
229
+
230
+ // --graupl-alert-border-bottom-style
115
231
  $alert-border-bottom-style: var(
116
232
  --#{root-defaults.$prefix}alert-border-bottom-style,
117
233
  #{root-variables.$border-bottom-style}
118
234
  );
235
+
236
+ // --graupl-alert-border-left-style
119
237
  $alert-border-left-style: var(
120
238
  --#{root-defaults.$prefix}alert-border-left-style,
121
239
  #{root-variables.$border-left-style}
122
240
  );
241
+
242
+ // --graupl-alert-border-style
123
243
  $alert-border-style: var(
124
244
  --#{root-defaults.$prefix}alert-border-style,
125
245
  #{$alert-border-top-style} #{$alert-border-right-style}
@@ -127,6 +247,7 @@ $alert-border-style: var(
127
247
  );
128
248
 
129
249
  // Alert transition properties.
250
+ // --graupl-alert-transition
130
251
  $alert-transition: var(
131
252
  --#{root-defaults.$prefix}alert-transition,
132
253
  opacity #{map.get(root-variables.$transition-durations, fast)}
@@ -134,6 +255,8 @@ $alert-transition: var(
134
255
  transform #{map.get(root-variables.$transition-durations, fast)}
135
256
  #{root-variables.$transition-timing-function}
136
257
  );
258
+
259
+ // --graupl-alert-transition-reduced-motion
137
260
  $alert-transition-reduced-motion: var(
138
261
  --#{root-defaults.$prefix}alert-transition-reduced-motion,
139
262
  opacity #{map.get(root-variables.$transition-durations, fast)}
@@ -141,59 +264,85 @@ $alert-transition-reduced-motion: var(
141
264
  );
142
265
 
143
266
  // Alert header properties.
267
+ // --graupl-alert-header-padding-x
144
268
  $alert-header-padding-x: var(
145
269
  --#{root-defaults.$prefix}alert-header-padding-x,
146
270
  0
147
271
  );
272
+
273
+ // --graupl-alert-header-padding-y
148
274
  $alert-header-padding-y: var(
149
275
  --#{root-defaults.$prefix}alert-header-padding-y,
150
276
  0
151
277
  );
278
+
279
+ // --graupl-alert-header-padding
152
280
  $alert-header-padding: var(
153
281
  --#{root-defaults.$prefix}alert-header-padding,
154
282
  #{$alert-header-padding-y} #{$alert-header-padding-x}
155
283
  );
156
284
 
157
285
  // Alert title properties.
286
+ // --graupl-alert-title-color
158
287
  $alert-title-color: var(
159
288
  --#{root-defaults.$prefix}alert-title-color,
160
289
  #{$alert-color}
161
290
  );
291
+
292
+ // --graupl-alert-title-font-size
162
293
  $alert-title-font-size: var(
163
294
  --#{root-defaults.$prefix}alert-title-font-size,
164
295
  #{typography.$h4-font-size}
165
296
  );
297
+
298
+ // --graupl-alert-title-font-weight
166
299
  $alert-title-font-weight: var(
167
300
  --#{root-defaults.$prefix}alert-title-font-weight,
168
301
  #{typography.$h4-font-weight}
169
302
  );
303
+
304
+ // --graupl-alert-title-font-family
170
305
  $alert-title-font-family: var(
171
306
  --#{root-defaults.$prefix}alert-title-font-family,
172
307
  #{typography.$h4-font-family}
173
308
  );
309
+
310
+ // --graupl-alert-title-line-height
174
311
  $alert-title-line-height: var(
175
312
  --#{root-defaults.$prefix}alert-title-line-height,
176
313
  #{typography.$h4-line-height}
177
314
  );
315
+
316
+ // --graupl-alert-title-margin
178
317
  $alert-title-margin: var(--#{root-defaults.$prefix}alert-title-margin, 0 0 0 0);
179
318
 
180
319
  // Alert body properties.
320
+ // --graupl-alert-body-padding-x
181
321
  $alert-body-padding-x: var(--#{root-defaults.$prefix}alert-body-padding-x, 0);
322
+
323
+ // --graupl-alert-body-padding-y
182
324
  $alert-body-padding-y: var(--#{root-defaults.$prefix}alert-body-padding-y, 0);
325
+
326
+ // --graupl-alert-body-padding
183
327
  $alert-body-padding: var(
184
328
  --#{root-defaults.$prefix}alert-body-padding,
185
329
  #{$alert-body-padding-y} #{$alert-body-padding-x}
186
330
  );
187
331
 
188
332
  // Alert footer properties.
333
+ // --graupl-alert-footer-padding-x
189
334
  $alert-footer-padding-x: var(
190
335
  --#{root-defaults.$prefix}alert-footer-padding-x,
191
336
  0
192
337
  );
338
+
339
+ // --graupl-alert-footer-padding-y
193
340
  $alert-footer-padding-y: var(
194
341
  --#{root-defaults.$prefix}alert-footer-padding-y,
195
342
  0
196
343
  );
344
+
345
+ // --graupl-alert-footer-padding
197
346
  $alert-footer-padding: var(
198
347
  --#{root-defaults.$prefix}alert-footer-padding,
199
348
  #{$alert-footer-padding-y} #{$alert-footer-padding-x}
package/src/scss/component/badge/_defaults.scss CHANGED
@@ -14,6 +14,7 @@
14
14
  $selector-base: root-defaults.$component-selector-base !default;
15
15
  $modifier-selector-base: root-defaults.$modifier-selector-base !default;
16
16
  $generate-base-theme-map: root-defaults.$generate-base-theme-maps !default;
17
+ $themeable: true !default;
17
18
  $badge-selector-base: $selector-base !default;
18
19
  $badge-selector: "badge" !default;
19
20
  $badge-theme-selector-base: $modifier-selector-base !default;
package/src/scss/component/badge/_index.scss CHANGED
@@ -2,18 +2,17 @@
2
2
  //
3
3
  // This module provides the base styles for the badge component.
4
4
  //
5
- // The badge component is meant to be used on <badge> or <a> elements, but can be applied to anything.
5
+ // The badge component is meant to be used on <span>, <div>, or <a> elements, but can be applied to anything.
6
6
  //
7
7
  // The following selectors are generated by default:
8
8
  // - `.badge`: The badge component.
9
9
  // - `.primary`: A component modifier to use the primary colour for the badge component.
10
10
  // - `.secondary`: A component modifier to use the secondary colour for the badge component.
11
11
  // - `.tertiary`: A component modifier to use the tertiary colour for the badge component.
12
- // - `.link`: A component modifier to make the badge component look like a link component.
13
12
  //
14
13
  // The following custom properties can be used to customize the badge component:
15
- // | Property | Description | Default Value |
16
- // | --- | --- | --- |
14
+ // | Property | Description | Default Value |
15
+ // | --- | --- | --- |
17
16
  // | `--graupl-badge-font-size` | The font size of the badge component. | `var(--graupl-font-sm)` |
18
17
  // | `--graupl-badge-background` | The background colour of the badge component. | `var(--graupl-background)` |
19
18
  // | `--graupl-badge-color` | The text colour of the badge component. | `var(--graupl-color)` |
@@ -38,19 +37,20 @@
38
37
  // | `--graupl-badge-border-radius` | The border radius of the badge component (combines top-left, top-right, bottom-right, and bottom-left radii). | `var(--graupl-badge-border-top-left-radius) var(--graupl-badge-border-top-right-radius) var(--graupl-badge-border-bottom-right-radius) var(--graupl-badge-border-bottom-left-radius)` |
39
38
  //
40
39
  // The following sass variables can be used to customize the generation of the badge component:
41
- // | Variable | Description | Default Value |
42
- // | --- | --- | --- |
43
- // | `$selector-base` | The selector base for the component. | `.` |
44
- // | `$modifier-selector-base` | The selector base for component modifiers. | `.` |
45
- // | `$generate-base-theme-map` | A flag to generate the base theme maps for badge variants. | `true` |
46
- // | `$badge-selector-base` | The selector base for the badge component. | `$selector-base` |
47
- // | `$badge-selector` | The badge component selector. | `badge` |
48
- // | `$badge-theme-selector-base` | The selector base for the badge theme component modifiers. | `$modifier-selector-base` |
49
- // | `$badge-theme-selector-prefix` | The badge theme component modifier selector prefix. | `""` |
50
- // | `$badge-theme-mappings` | A map of properties and color shades used generate all badge variants. | `()` |
51
- // | `$badge-theme-map` | A map of all properties, colors, and color shades used to generate all badge variants. | `()` |
52
- //
53
- // Using `$badge-theme-mappings`
40
+ // | Variable | Description | Default Value |
41
+ // | --- | --- | --- |
42
+ // | `$selector-base` | The selector base for the component. | `.` |
43
+ // | `$modifier-selector-base` | The selector base for component modifiers. | `.` |
44
+ // | `$themeable` | Flag to generate theme modifiers. | `true`. |
45
+ // | `$generate-base-theme-map` | A flag to generate the base theme maps for badge variants. | `true` |
46
+ // | `$badge-selector-base` | The selector base for the badge component. | `$selector-base` |
47
+ // | `$badge-selector` | The badge component selector. | `badge` |
48
+ // | `$badge-theme-selector-base` | The selector base for the badge theme component modifiers. | `$modifier-selector-base` |
49
+ // | `$badge-theme-selector-prefix` | The badge theme component modifier selector prefix. | `""` |
50
+ // | `$badge-theme-mappings` | A map of properties and color shades used generate all badge variants. | `()` |
51
+ // | `$badge-theme-map` | A map of all properties, colors, and color shades used to generate all badge variants. | `()` |
52
+ //
53
+ // ## Using `$badge-theme-mappings`
54
54
  //
55
55
  // `$badge-theme-mappings` is a 1-level map of properties and shade values.
56
56
  //
@@ -159,7 +159,7 @@
159
159
  // <a class="badge tertiary" href="#">Tertiary Badge</a>
160
160
 
161
161
  @use "../../defaults" as root-defaults;
162
- @use "../../functions/theme";
162
+ @use "../../mixins/theme";
163
163
  @use "../../mixins/layer" as *;
164
164
  @use "defaults";
165
165
  @use "sass:map";
@@ -186,16 +186,13 @@
186
186
  background: $badge-background;
187
187
  color: $badge-color;
188
188
 
189
- @each $color, $map in defaults.$badge-theme-map {
190
- // e.g. &.primary, &.secondary, &.tertiary
191
- &#{defaults.$badge-theme-selector-base}#{defaults.$badge-theme-selector-prefix}#{$color} {
192
- @each $prop, $value in $map {
193
- --#{root-defaults.$prefix}badge-#{$prop}: #{theme.get(
194
- map.get($value, color),
195
- map.get($value, shade)
196
- )};
197
- }
198
- }
189
+ @if root-defaults.$themeable-components and defaults.$themeable {
190
+ @include theme.generate-modifiers(
191
+ defaults.$badge-theme-map,
192
+ defaults.$badge-theme-selector-base,
193
+ defaults.$badge-theme-selector-prefix,
194
+ "badge-"
195
+ );
199
196
  }
200
197
  }
201
198
  }
package/src/scss/component/badge/_variables.scss CHANGED
@@ -3,6 +3,32 @@
3
3
  // These values are to be used to directly style bases and provide a
4
4
  // cleaner way to reference custom properties.
5
5
 
6
+ // Custom property defaults:
7
+ // | Custom property | Default |
8
+ // | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
9
+ // | --graupl-badge-font-size | var(--graupl-font-sm) |
10
+ // | --graupl-badge-background | var(--graupl-background) |
11
+ // | --graupl-badge-color | var(--graupl-color) |
12
+ // | --graupl-badge-border-color | var(--graupl-border-color) |
13
+ // | --graupl-badge-padding-x | var(--graupl-spacer-5) |
14
+ // | --graupl-badge-padding-y | var(--graupl-spacer-3) |
15
+ // | --graupl-badge-padding | var(--graupl-badge-padding-y) var(--graupl-badge-padding-x) |
16
+ // | --graupl-badge-border-top-width | var(--graupl-border-top-width) |
17
+ // | --graupl-badge-border-right-width | var(--graupl-border-right-width) |
18
+ // | --graupl-badge-border-bottom-width | var(--graupl-border-bottom-width) |
19
+ // | --graupl-badge-border-left-width | var(--graupl-border-left-width) |
20
+ // | --graupl-badge-border-width | var(--graupl-badge-border-top-width) var(--graupl-badge-border-right-width) var(--graupl-badge-border-bottom-width) var(--graupl-badge-border-left-width) |
21
+ // | --graupl-badge-border-top-style | var(--graupl-border-top-style) |
22
+ // | --graupl-badge-border-right-style | var(--graupl-border-right-style) |
23
+ // | --graupl-badge-border-bottom-style | var(--graupl-border-bottom-style) |
24
+ // | --graupl-badge-border-left-style | var(--graupl-border-left-style) |
25
+ // | --graupl-badge-border-style | var(--graupl-badge-border-top-style) var(--graupl-badge-border-right-style) var(--graupl-badge-border-bottom-style) var(--graupl-badge-border-left-style) |
26
+ // | --graupl-badge-border-top-left-radius | var(--graupl-border-top-left-radius) |
27
+ // | --graupl-badge-border-top-right-radius | var(--graupl-border-top-right-radius) |
28
+ // | --graupl-badge-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |
29
+ // | --graupl-badge-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |
30
+ // | --graupl-badge-border-radius | var(--graupl-badge-border-top-left-radius) var(--graupl-badge-border-top-right-radius) var(--graupl-badge-border-bottom-right-radius) var(--graupl-badge-border-bottom-left-radius) |
31
+
6
32
  @use "defaults";
7
33
  @use "../../variables" as root-variables;
8
34
  @use "../../defaults" as root-defaults;
@@ -12,53 +38,73 @@
12
38
  @use "sass:map";
13
39
 
14
40
  // Typography.
41
+ // --graupl-badge-font-size
15
42
  $badge-font-size: var(
16
43
  --#{root-defaults.$prefix}badge-font-size,
17
44
  #{map.get(typography.$font-sizes, sm)}
18
45
  );
19
46
 
20
47
  // Colors.
48
+ // --graupl-badge-background
21
49
  $badge-background: var(
22
50
  --#{root-defaults.$prefix}badge-background,
23
51
  #{color.$background}
24
52
  );
53
+
54
+ // --graupl-badge-color
25
55
  $badge-color: var(--#{root-defaults.$prefix}badge-color, #{color.$color});
56
+
57
+ // --graupl-badge-border-color
26
58
  $badge-border-color: var(
27
59
  --#{root-defaults.$prefix}badge-border-color,
28
60
  #{color.$border-color}
29
61
  );
30
62
 
31
63
  // Spacing.
64
+ // --graupl-badge-padding-x
32
65
  $badge-padding-x: var(
33
66
  --#{root-defaults.$prefix}badge-padding-x,
34
- #{map.get(root-variables.$spacers, 5)}
67
+ #{map.get(root-variables.$spacers, 3)}
35
68
  );
69
+
70
+ // --graupl-badge-padding-y
36
71
  $badge-padding-y: var(
37
72
  --#{root-defaults.$prefix}badge-padding-y,
38
- #{map.get(root-variables.$spacers, 3)}
73
+ #{map.get(root-variables.$spacers, 2)}
39
74
  );
75
+
76
+ // --graupl-badge-padding
40
77
  $badge-padding: var(
41
78
  --#{root-defaults.$prefix}badge-padding,
42
79
  #{$badge-padding-y} #{$badge-padding-x}
43
80
  );
44
81
 
45
82
  // Border widths.
83
+ // --graupl-badge-border-top-width
46
84
  $badge-border-top-width: var(
47
85
  --#{root-defaults.$prefix}badge-border-top-width,
48
86
  #{root-variables.$border-top-width}
49
87
  );
88
+
89
+ // --graupl-badge-border-right-width
50
90
  $badge-border-right-width: var(
51
91
  --#{root-defaults.$prefix}badge-border-right-width,
52
92
  #{root-variables.$border-right-width}
53
93
  );
94
+
95
+ // --graupl-badge-border-bottom-width
54
96
  $badge-border-bottom-width: var(
55
97
  --#{root-defaults.$prefix}badge-border-bottom-width,
56
98
  #{root-variables.$border-bottom-width}
57
99
  );
100
+
101
+ // --graupl-badge-border-left-width
58
102
  $badge-border-left-width: var(
59
103
  --#{root-defaults.$prefix}badge-border-left-width,
60
104
  #{root-variables.$border-left-width}
61
105
  );
106
+
107
+ // --graupl-badge-border-width
62
108
  $badge-border-width: var(
63
109
  --#{root-defaults.$prefix}badge-border-width,
64
110
  #{$badge-border-top-width} #{$badge-border-right-width}
@@ -66,22 +112,31 @@ $badge-border-width: var(
66
112
  );
67
113
 
68
114
  // Border styles.
115
+ // --graupl-badge-border-top-style
69
116
  $badge-border-top-style: var(
70
117
  --#{root-defaults.$prefix}badge-border-top-style,
71
118
  #{root-variables.$border-top-style}
72
119
  );
120
+
121
+ // --graupl-badge-border-right-style
73
122
  $badge-border-right-style: var(
74
123
  --#{root-defaults.$prefix}badge-border-right-style,
75
124
  #{root-variables.$border-right-style}
76
125
  );
126
+
127
+ // --graupl-badge-border-bottom-style
77
128
  $badge-border-bottom-style: var(
78
129
  --#{root-defaults.$prefix}badge-border-bottom-style,
79
130
  #{root-variables.$border-bottom-style}
80
131
  );
132
+
133
+ // --graupl-badge-border-left-style
81
134
  $badge-border-left-style: var(
82
135
  --#{root-defaults.$prefix}badge-border-left-style,
83
136
  #{root-variables.$border-left-style}
84
137
  );
138
+
139
+ // --graupl-badge-border-style
85
140
  $badge-border-style: var(
86
141
  --#{root-defaults.$prefix}badge-border-style,
87
142
  #{$badge-border-top-style} #{$badge-border-right-style}
@@ -89,22 +144,31 @@ $badge-border-style: var(
89
144
  );
90
145
 
91
146
  // Border radii.
147
+ // --graupl-badge-border-top-left-radius
92
148
  $badge-border-top-left-radius: var(
93
149
  --#{root-defaults.$prefix}badge-border-top-left-radius,
94
150
  #{root-variables.$border-top-left-radius}
95
151
  );
152
+
153
+ // --graupl-badge-border-top-right-radius
96
154
  $badge-border-top-right-radius: var(
97
155
  --#{root-defaults.$prefix}badge-border-top-right-radius,
98
156
  #{root-variables.$border-top-right-radius}
99
157
  );
158
+
159
+ // --graupl-badge-border-bottom-right-radius
100
160
  $badge-border-bottom-right-radius: var(
101
161
  --#{root-defaults.$prefix}badge-border-bottom-right-radius,
102
162
  #{root-variables.$border-bottom-right-radius}
103
163
  );
164
+
165
+ // --graupl-badge-border-bottom-left-radius
104
166
  $badge-border-bottom-left-radius: var(
105
167
  --#{root-defaults.$prefix}badge-border-bottom-left-radius,
106
168
  #{root-variables.$border-bottom-left-radius}
107
169
  );
170
+
171
+ // --graupl-badge-border-radius
108
172
  $badge-border-radius: var(
109
173
  --#{root-defaults.$prefix}badge-border-radius,
110
174
  #{$badge-border-top-left-radius} #{$badge-border-top-right-radius}