@carbon/charts 0.41.46 → 0.41.50

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 (248) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/build/demo/data/combo.d.ts +0 -11
  3. package/build/demo/data/index.d.ts +23 -17
  4. package/build/demo/data/wordcloud.d.ts +14 -0
  5. package/build/src/charts/index.d.ts +1 -0
  6. package/build/src/charts/wordcloud.d.ts +6 -0
  7. package/build/src/components/graphs/wordcloud.d.ts +10 -0
  8. package/build/src/components/index.d.ts +1 -0
  9. package/build/src/configuration.d.ts +2 -1
  10. package/build/src/interfaces/charts.d.ts +23 -0
  11. package/build/src/interfaces/events.d.ts +9 -0
  12. package/bundle.js +1 -1
  13. package/charts/index.d.ts +1 -0
  14. package/charts/index.js +1 -0
  15. package/charts/index.js.map +1 -1
  16. package/charts/wordcloud.d.ts +6 -0
  17. package/charts/wordcloud.js +46 -0
  18. package/charts/wordcloud.js.map +1 -0
  19. package/components/essentials/tooltip-axis.js +1 -1
  20. package/components/essentials/tooltip-axis.js.map +1 -1
  21. package/components/graphs/area.js +11 -2
  22. package/components/graphs/area.js.map +1 -1
  23. package/components/graphs/boxplot.js +2 -2
  24. package/components/graphs/boxplot.js.map +1 -1
  25. package/components/graphs/wordcloud.d.ts +10 -0
  26. package/components/graphs/wordcloud.js +229 -0
  27. package/components/graphs/wordcloud.js.map +1 -0
  28. package/components/index.d.ts +1 -0
  29. package/components/index.js +1 -0
  30. package/components/index.js.map +1 -1
  31. package/configuration.d.ts +2 -1
  32. package/configuration.js +22 -0
  33. package/configuration.js.map +1 -1
  34. package/demo/data/bundle.js +1 -1
  35. package/demo/data/combo.d.ts +0 -11
  36. package/demo/data/combo.js +0 -11
  37. package/demo/data/combo.js.map +1 -1
  38. package/demo/data/index.d.ts +23 -17
  39. package/demo/data/index.js +107 -50
  40. package/demo/data/index.js.map +1 -1
  41. package/demo/data/wordcloud.d.ts +14 -0
  42. package/demo/data/wordcloud.js +105 -0
  43. package/demo/data/wordcloud.js.map +1 -0
  44. package/demo/styles.css +2824 -28
  45. package/demo/styles.css.map +1 -1
  46. package/demo/styles.min.css +1 -1
  47. package/demo/styles.min.css.map +1 -1
  48. package/demo/tsconfig.tsbuildinfo +31 -17
  49. package/interfaces/charts.d.ts +23 -0
  50. package/interfaces/charts.js.map +1 -1
  51. package/interfaces/events.d.ts +9 -0
  52. package/interfaces/events.js +10 -0
  53. package/interfaces/events.js.map +1 -1
  54. package/package.json +8 -7
  55. package/styles/_type.scss +4 -2
  56. package/styles/graphs/_wordcloud.scss +7 -0
  57. package/styles/graphs/index.scss +1 -0
  58. package/styles/vendor/@carbon/colors/README.md +4 -3
  59. package/styles/vendor/@carbon/colors/es/index.js +13 -12
  60. package/styles/vendor/@carbon/colors/lib/index.js +98 -93
  61. package/styles/vendor/@carbon/colors/package.json +14 -10
  62. package/styles/vendor/@carbon/colors/scss/colors.scss +1 -1
  63. package/styles/vendor/@carbon/colors/scss/index.scss +1 -1
  64. package/styles/vendor/@carbon/colors/scss/mixins.scss +33 -13
  65. package/styles/vendor/@carbon/colors/umd/index.js +99 -94
  66. package/styles/vendor/@carbon/elements/README.md +0 -6
  67. package/styles/vendor/@carbon/elements/es/index.js +4 -11
  68. package/styles/vendor/@carbon/elements/lib/index.js +959 -13
  69. package/styles/vendor/@carbon/elements/package.json +17 -13
  70. package/styles/vendor/@carbon/elements/scss/colors/colors.scss +1 -1
  71. package/styles/vendor/@carbon/elements/scss/colors/index.scss +1 -1
  72. package/styles/vendor/@carbon/elements/scss/colors/mixins.scss +33 -13
  73. package/styles/vendor/@carbon/elements/scss/grid/_inlined/_mixins.scss +82 -22
  74. package/styles/vendor/@carbon/elements/scss/grid/_mixins.scss +82 -22
  75. package/styles/vendor/@carbon/elements/scss/grid/modules/_breakpoint.scss +266 -0
  76. package/styles/vendor/@carbon/{themes/node_modules/@carbon/colors/scss/colors.scss → elements/scss/grid/modules/_config.scss} +6 -6
  77. package/styles/vendor/@carbon/elements/scss/grid/modules/_css-grid.scss +350 -0
  78. package/styles/vendor/@carbon/elements/scss/grid/modules/_mixins.scss +323 -0
  79. package/styles/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/_breakpoint.scss +8 -3
  80. package/styles/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/modules/_breakpoint.scss +232 -0
  81. package/styles/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/modules/_convert.scss +40 -0
  82. package/styles/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/modules/_spacing.scss +9 -0
  83. package/styles/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/modules/_utilities.scss +41 -0
  84. package/styles/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/modules/generated/_fluid-spacing.scss +37 -0
  85. package/styles/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/modules/generated/_spacing.scss +85 -0
  86. package/styles/vendor/@carbon/elements/scss/layout/_breakpoint.scss +8 -3
  87. package/styles/vendor/@carbon/elements/scss/layout/modules/_breakpoint.scss +232 -0
  88. package/styles/vendor/@carbon/elements/scss/layout/modules/_convert.scss +40 -0
  89. package/styles/vendor/@carbon/elements/scss/layout/modules/_spacing.scss +9 -0
  90. package/styles/vendor/@carbon/elements/scss/layout/modules/_utilities.scss +41 -0
  91. package/styles/vendor/@carbon/elements/scss/layout/modules/generated/_fluid-spacing.scss +37 -0
  92. package/styles/vendor/@carbon/elements/scss/layout/modules/generated/_spacing.scss +85 -0
  93. package/styles/vendor/@carbon/elements/scss/motion/motion.scss +24 -0
  94. package/styles/vendor/@carbon/elements/scss/themes/generated/_mixins.scss +643 -138
  95. package/styles/vendor/@carbon/elements/scss/themes/generated/_themes.scss +154 -77
  96. package/styles/vendor/@carbon/elements/scss/themes/generated/_tokens.scss +157 -75
  97. package/styles/vendor/@carbon/elements/scss/themes/modules/_theme.scss +50 -0
  98. package/styles/vendor/@carbon/elements/scss/themes/modules/_themes.scss +8 -0
  99. package/styles/vendor/@carbon/elements/scss/themes/modules/_utilities.scss +18 -0
  100. package/styles/vendor/@carbon/elements/scss/themes/modules/generated/_themes.scss +247 -0
  101. package/styles/vendor/@carbon/elements/scss/type/_font-family.scss +2 -2
  102. package/styles/vendor/@carbon/elements/scss/type/_inlined/_font-family.scss +2 -2
  103. package/styles/vendor/@carbon/elements/scss/type/_inlined/_reset.scss +9 -3
  104. package/styles/vendor/@carbon/elements/scss/type/_inlined/_scale.scss +2 -2
  105. package/styles/vendor/@carbon/elements/scss/type/_inlined/_styles.scss +60 -57
  106. package/styles/vendor/@carbon/elements/scss/type/_inlined/font-face/_mono.scss +72 -72
  107. package/styles/vendor/@carbon/elements/scss/type/_inlined/font-face/_sans-condensed.scss +302 -0
  108. package/styles/vendor/@carbon/elements/scss/type/_inlined/font-face/_sans.scss +84 -84
  109. package/styles/vendor/@carbon/elements/scss/type/_inlined/font-face/_serif.scss +72 -72
  110. package/styles/vendor/@carbon/elements/scss/type/_reset.scss +9 -3
  111. package/styles/vendor/@carbon/elements/scss/type/_scale.scss +2 -2
  112. package/styles/vendor/@carbon/elements/scss/type/_styles.scss +60 -57
  113. package/styles/vendor/@carbon/elements/scss/type/font-face/_mono.scss +72 -72
  114. package/styles/vendor/@carbon/elements/scss/type/font-face/_sans-condensed.scss +302 -0
  115. package/styles/vendor/@carbon/elements/scss/type/font-face/_sans.scss +84 -84
  116. package/styles/vendor/@carbon/elements/scss/type/font-face/_serif.scss +72 -72
  117. package/styles/vendor/@carbon/elements/scss/type/modules/_classes.scss +42 -0
  118. package/styles/vendor/@carbon/elements/scss/type/modules/_font-family.scss +70 -0
  119. package/styles/vendor/@carbon/elements/scss/type/modules/_prefix.scss +11 -0
  120. package/styles/vendor/@carbon/elements/scss/type/modules/_reset.scss +92 -0
  121. package/styles/vendor/@carbon/elements/scss/type/modules/_scale.scss +56 -0
  122. package/styles/vendor/@carbon/elements/scss/type/modules/_styles.scss +713 -0
  123. package/styles/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/_breakpoint.scss +8 -3
  124. package/styles/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/modules/_breakpoint.scss +232 -0
  125. package/styles/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/modules/_convert.scss +40 -0
  126. package/styles/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/modules/_spacing.scss +9 -0
  127. package/styles/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/modules/_utilities.scss +41 -0
  128. package/styles/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/modules/generated/_fluid-spacing.scss +37 -0
  129. package/styles/vendor/@carbon/elements/scss/type/vendor/@carbon/layout/modules/generated/_spacing.scss +85 -0
  130. package/styles/vendor/@carbon/elements/src/__tests__/PublicAPI-test.js +12 -0
  131. package/styles/vendor/@carbon/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap +306 -0
  132. package/styles/vendor/@carbon/elements/src/index.js +166 -4
  133. package/styles/vendor/@carbon/elements/umd/index.js +961 -17
  134. package/styles/vendor/@carbon/layout/README.md +0 -6
  135. package/styles/vendor/@carbon/layout/es/index.js +1 -1
  136. package/styles/vendor/@carbon/{themes/node_modules/@carbon/colors/scss → layout}/index.scss +5 -6
  137. package/styles/vendor/@carbon/layout/lib/index.js +30 -30
  138. package/styles/vendor/@carbon/layout/package.json +14 -10
  139. package/styles/vendor/@carbon/layout/scss/_breakpoint.scss +8 -3
  140. package/styles/vendor/@carbon/layout/scss/modules/_breakpoint.scss +232 -0
  141. package/styles/vendor/@carbon/layout/scss/modules/_convert.scss +40 -0
  142. package/styles/vendor/@carbon/layout/scss/modules/_spacing.scss +9 -0
  143. package/styles/vendor/@carbon/layout/scss/modules/_utilities.scss +41 -0
  144. package/styles/vendor/@carbon/layout/scss/modules/generated/_fluid-spacing.scss +37 -0
  145. package/styles/vendor/@carbon/layout/scss/modules/generated/_spacing.scss +85 -0
  146. package/styles/vendor/@carbon/layout/umd/index.js +31 -31
  147. package/styles/vendor/@carbon/motion/README.md +0 -6
  148. package/styles/vendor/@carbon/motion/es/index.js +8 -1
  149. package/styles/vendor/@carbon/motion/index.scss +56 -0
  150. package/styles/vendor/@carbon/motion/lib/index.js +14 -0
  151. package/styles/vendor/@carbon/motion/package.json +10 -6
  152. package/styles/vendor/@carbon/motion/scss/motion.scss +24 -0
  153. package/styles/vendor/@carbon/motion/src/index.js +16 -0
  154. package/styles/vendor/@carbon/motion/umd/index.js +15 -1
  155. package/styles/vendor/@carbon/themes/README.md +5 -4
  156. package/styles/vendor/@carbon/themes/es/index.js +719 -57
  157. package/styles/vendor/@carbon/themes/index.scss +9 -0
  158. package/styles/vendor/@carbon/themes/lib/index.js +1297 -251
  159. package/styles/vendor/@carbon/themes/metadata.yml +3 -0
  160. package/styles/vendor/@carbon/themes/package.json +23 -14
  161. package/styles/vendor/@carbon/themes/scss/_mixins.scss +27 -146
  162. package/styles/vendor/@carbon/themes/scss/_theme-maps.scss +3 -263
  163. package/styles/vendor/@carbon/themes/scss/_tokens.scss +2 -297
  164. package/styles/vendor/@carbon/themes/scss/generated/_mixins.scss +1851 -0
  165. package/styles/vendor/@carbon/themes/scss/generated/_themes.scss +1534 -0
  166. package/styles/vendor/@carbon/themes/scss/generated/_tokens.scss +1757 -0
  167. package/styles/vendor/@carbon/themes/scss/modules/_theme.scss +50 -0
  168. package/styles/vendor/@carbon/themes/scss/modules/_themes.scss +8 -0
  169. package/styles/vendor/@carbon/themes/scss/modules/_utilities.scss +18 -0
  170. package/styles/vendor/@carbon/themes/scss/modules/generated/_themes.scss +247 -0
  171. package/styles/vendor/@carbon/themes/scss/themes.scss +3 -2
  172. package/styles/vendor/@carbon/themes/src/g10.js +97 -5
  173. package/styles/vendor/@carbon/themes/src/g100.js +96 -4
  174. package/styles/vendor/@carbon/themes/src/g90.js +98 -6
  175. package/styles/vendor/@carbon/themes/src/index.js +5 -3
  176. package/styles/vendor/@carbon/themes/src/tokens.js +112 -2
  177. package/styles/vendor/@carbon/themes/src/tools.js +25 -0
  178. package/styles/vendor/@carbon/themes/src/v9.js +181 -0
  179. package/styles/vendor/@carbon/themes/src/white.js +98 -3
  180. package/styles/vendor/@carbon/themes/umd/index.js +1297 -254
  181. package/styles/vendor/@carbon/type/README.md +0 -6
  182. package/styles/vendor/@carbon/type/es/index.js +111 -82
  183. package/styles/vendor/@carbon/type/lib/index.js +132 -103
  184. package/styles/vendor/@carbon/type/package.json +12 -8
  185. package/styles/vendor/@carbon/type/scss/_font-family.scss +2 -2
  186. package/styles/vendor/@carbon/type/scss/_inlined/_font-family.scss +2 -2
  187. package/styles/vendor/@carbon/type/scss/_inlined/_reset.scss +9 -3
  188. package/styles/vendor/@carbon/type/scss/_inlined/_scale.scss +2 -2
  189. package/styles/vendor/@carbon/type/scss/_inlined/_styles.scss +60 -57
  190. package/styles/vendor/@carbon/type/scss/_inlined/font-face/_mono.scss +72 -72
  191. package/styles/vendor/@carbon/type/scss/_inlined/font-face/_sans-condensed.scss +302 -0
  192. package/styles/vendor/@carbon/type/scss/_inlined/font-face/_sans.scss +84 -84
  193. package/styles/vendor/@carbon/type/scss/_inlined/font-face/_serif.scss +72 -72
  194. package/styles/vendor/@carbon/type/scss/_reset.scss +9 -3
  195. package/styles/vendor/@carbon/type/scss/_scale.scss +2 -2
  196. package/styles/vendor/@carbon/type/scss/_styles.scss +60 -57
  197. package/styles/vendor/@carbon/type/scss/font-face/_mono.scss +72 -72
  198. package/styles/vendor/@carbon/type/scss/font-face/_sans-condensed.scss +302 -0
  199. package/styles/vendor/@carbon/type/scss/font-face/_sans.scss +84 -84
  200. package/styles/vendor/@carbon/type/scss/font-face/_serif.scss +72 -72
  201. package/styles/vendor/@carbon/type/scss/modules/_classes.scss +42 -0
  202. package/styles/vendor/@carbon/type/scss/modules/_font-family.scss +70 -0
  203. package/styles/vendor/@carbon/type/scss/modules/_prefix.scss +11 -0
  204. package/styles/vendor/@carbon/type/scss/modules/_reset.scss +92 -0
  205. package/styles/vendor/@carbon/type/scss/modules/_scale.scss +56 -0
  206. package/styles/vendor/@carbon/type/scss/modules/_styles.scss +713 -0
  207. package/styles/vendor/@carbon/type/scss/vendor/@carbon/layout/_breakpoint.scss +8 -3
  208. package/styles/vendor/@carbon/type/scss/vendor/@carbon/layout/modules/_breakpoint.scss +232 -0
  209. package/styles/vendor/@carbon/type/scss/vendor/@carbon/layout/modules/_convert.scss +40 -0
  210. package/styles/vendor/@carbon/type/scss/vendor/@carbon/layout/modules/_spacing.scss +9 -0
  211. package/styles/vendor/@carbon/type/scss/vendor/@carbon/layout/modules/_utilities.scss +41 -0
  212. package/styles/vendor/@carbon/type/scss/vendor/@carbon/layout/modules/generated/_fluid-spacing.scss +37 -0
  213. package/styles/vendor/@carbon/type/scss/vendor/@carbon/layout/modules/generated/_spacing.scss +85 -0
  214. package/styles/vendor/@carbon/type/src/__tests__/__snapshots__/styles-test.js.snap +32 -34
  215. package/styles/vendor/@carbon/type/src/__tests__/exports-test.js +1 -1
  216. package/styles/vendor/@carbon/type/src/__tests__/fluid-test.js +26 -26
  217. package/styles/vendor/@carbon/type/src/__tests__/styles-test.js +1 -1
  218. package/styles/vendor/@carbon/type/src/__tests__/tokens-test.js +2 -2
  219. package/styles/vendor/@carbon/type/src/fluid.js +1 -1
  220. package/styles/vendor/@carbon/type/src/index.js +1 -1
  221. package/styles/vendor/@carbon/type/src/styles.js +65 -64
  222. package/styles/vendor/@carbon/type/src/tokens.js +64 -31
  223. package/styles/vendor/@carbon/type/umd/index.js +134 -105
  224. package/styles-g10.css +570 -2
  225. package/styles-g10.css.map +1 -1
  226. package/styles-g10.min.css +1 -1
  227. package/styles-g10.min.css.map +1 -1
  228. package/styles-g100.css +574 -6
  229. package/styles-g100.css.map +1 -1
  230. package/styles-g100.min.css +1 -1
  231. package/styles-g100.min.css.map +1 -1
  232. package/styles-g90.css +574 -6
  233. package/styles-g90.css.map +1 -1
  234. package/styles-g90.min.css +1 -1
  235. package/styles-g90.min.css.map +1 -1
  236. package/styles.css +570 -2
  237. package/styles.css.map +1 -1
  238. package/styles.min.css +1 -1
  239. package/styles.min.css.map +1 -1
  240. package/tsconfig.tsbuildinfo +65 -15
  241. package/styles/vendor/@carbon/layout/docs/sass.md +0 -1899
  242. package/styles/vendor/@carbon/themes/node_modules/@carbon/colors/LICENSE +0 -201
  243. package/styles/vendor/@carbon/themes/node_modules/@carbon/colors/README.md +0 -154
  244. package/styles/vendor/@carbon/themes/node_modules/@carbon/colors/es/index.js +0 -287
  245. package/styles/vendor/@carbon/themes/node_modules/@carbon/colors/lib/index.js +0 -410
  246. package/styles/vendor/@carbon/themes/node_modules/@carbon/colors/package.json +0 -51
  247. package/styles/vendor/@carbon/themes/node_modules/@carbon/colors/scss/mixins.scss +0 -646
  248. package/styles/vendor/@carbon/themes/node_modules/@carbon/colors/umd/index.js +0 -416
@@ -1,1899 +0,0 @@
1
- # Sass API
2
-
3
- | Mark | Description |
4
- | ---- | ---------------------------------------------------------- |
5
- | ✅ | Public functions, mixins, placeholders, and variables |
6
- | ❌ | Private items - not supported outside package's build |
7
- | ⚠️ | Deprecated items - may not be available in future releases |
8
-
9
- <!-- toc -->
10
-
11
- - [@carbon/layout](#carbonlayout)
12
- - [✅carbon--grid-gutter [variable]](#carbon--grid-gutter-variable)
13
- - [✅carbon--grid-gutter--condensed [variable]](#carbon--grid-gutter--condensed-variable)
14
- - [✅carbon--grid-breakpoints [variable]](#carbon--grid-breakpoints-variable)
15
- - [✅carbon--breakpoint-next [function]](#carbon--breakpoint-next-function)
16
- - [✅carbon--breakpoint-prev [function]](#carbon--breakpoint-prev-function)
17
- - [✅carbon--is-smallest-breakpoint [function]](#carbon--is-smallest-breakpoint-function)
18
- - [✅carbon--largest-breakpoint-name [function]](#carbon--largest-breakpoint-name-function)
19
- - [✅carbon--breakpoint-infix [function]](#carbon--breakpoint-infix-function)
20
- - [✅carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin)
21
- - [✅carbon--breakpoint-down [mixin]](#carbon--breakpoint-down-mixin)
22
- - [✅carbon--breakpoint-between [mixin]](#carbon--breakpoint-between-mixin)
23
- - [✅carbon--largest-breakpoint [mixin]](#carbon--largest-breakpoint-mixin)
24
- - [✅carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
25
- - [✅carbon--container-01 [variable]](#carbon--container-01-variable)
26
- - [✅carbon--container-02 [variable]](#carbon--container-02-variable)
27
- - [✅carbon--container-03 [variable]](#carbon--container-03-variable)
28
- - [✅carbon--container-04 [variable]](#carbon--container-04-variable)
29
- - [✅carbon--container-05 [variable]](#carbon--container-05-variable)
30
- - [✅carbon--container [variable]](#carbon--container-variable)
31
- - [✅container-01 [variable]](#container-01-variable)
32
- - [✅container-02 [variable]](#container-02-variable)
33
- - [✅container-03 [variable]](#container-03-variable)
34
- - [✅container-04 [variable]](#container-04-variable)
35
- - [✅container-05 [variable]](#container-05-variable)
36
- - [✅carbon--base-font-size [variable]](#carbon--base-font-size-variable)
37
- - [✅carbon--rem [function]](#carbon--rem-function)
38
- - [✅carbon--em [function]](#carbon--em-function)
39
- - [✅carbon--fluid-spacing-01 [variable]](#carbon--fluid-spacing-01-variable)
40
- - [✅carbon--fluid-spacing-02 [variable]](#carbon--fluid-spacing-02-variable)
41
- - [✅carbon--fluid-spacing-03 [variable]](#carbon--fluid-spacing-03-variable)
42
- - [✅carbon--fluid-spacing-04 [variable]](#carbon--fluid-spacing-04-variable)
43
- - [✅carbon--fluid-spacing [variable]](#carbon--fluid-spacing-variable)
44
- - [✅fluid-spacing-01 [variable]](#fluid-spacing-01-variable)
45
- - [✅fluid-spacing-02 [variable]](#fluid-spacing-02-variable)
46
- - [✅fluid-spacing-03 [variable]](#fluid-spacing-03-variable)
47
- - [✅fluid-spacing-04 [variable]](#fluid-spacing-04-variable)
48
- - [✅carbon--icon-size-01 [variable]](#carbon--icon-size-01-variable)
49
- - [✅carbon--icon-size-02 [variable]](#carbon--icon-size-02-variable)
50
- - [✅carbon--icon-size [variable]](#carbon--icon-size-variable)
51
- - [✅icon-size-01 [variable]](#icon-size-01-variable)
52
- - [✅icon-size-02 [variable]](#icon-size-02-variable)
53
- - [✅carbon--get-column-width [function]](#carbon--get-column-width-function)
54
- - [✅carbon--key-height-scales [variable]](#carbon--key-height-scales-variable)
55
- - [✅carbon--key-height [function]](#carbon--key-height-function)
56
- - [✅carbon--layout-01 [variable]](#carbon--layout-01-variable)
57
- - [✅carbon--layout-02 [variable]](#carbon--layout-02-variable)
58
- - [✅carbon--layout-03 [variable]](#carbon--layout-03-variable)
59
- - [✅carbon--layout-04 [variable]](#carbon--layout-04-variable)
60
- - [✅carbon--layout-05 [variable]](#carbon--layout-05-variable)
61
- - [✅carbon--layout-06 [variable]](#carbon--layout-06-variable)
62
- - [✅carbon--layout-07 [variable]](#carbon--layout-07-variable)
63
- - [✅carbon--layout [variable]](#carbon--layout-variable)
64
- - [✅layout-01 [variable]](#layout-01-variable)
65
- - [✅layout-02 [variable]](#layout-02-variable)
66
- - [✅layout-03 [variable]](#layout-03-variable)
67
- - [✅layout-04 [variable]](#layout-04-variable)
68
- - [✅layout-05 [variable]](#layout-05-variable)
69
- - [✅layout-06 [variable]](#layout-06-variable)
70
- - [✅layout-07 [variable]](#layout-07-variable)
71
- - [✅carbon--mini-unit-size [variable]](#carbon--mini-unit-size-variable)
72
- - [✅carbon--mini-units [function]](#carbon--mini-units-function)
73
- - [✅carbon--spacing-01 [variable]](#carbon--spacing-01-variable)
74
- - [✅carbon--spacing-02 [variable]](#carbon--spacing-02-variable)
75
- - [✅carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
76
- - [✅carbon--spacing-04 [variable]](#carbon--spacing-04-variable)
77
- - [✅carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
78
- - [✅carbon--spacing-06 [variable]](#carbon--spacing-06-variable)
79
- - [✅carbon--spacing-07 [variable]](#carbon--spacing-07-variable)
80
- - [✅carbon--spacing-08 [variable]](#carbon--spacing-08-variable)
81
- - [✅carbon--spacing-09 [variable]](#carbon--spacing-09-variable)
82
- - [✅carbon--spacing-10 [variable]](#carbon--spacing-10-variable)
83
- - [✅carbon--spacing-11 [variable]](#carbon--spacing-11-variable)
84
- - [✅carbon--spacing-12 [variable]](#carbon--spacing-12-variable)
85
- - [✅carbon--spacing [variable]](#carbon--spacing-variable)
86
- - [✅spacing-01 [variable]](#spacing-01-variable)
87
- - [✅spacing-02 [variable]](#spacing-02-variable)
88
- - [✅spacing-03 [variable]](#spacing-03-variable)
89
- - [✅spacing-04 [variable]](#spacing-04-variable)
90
- - [✅spacing-05 [variable]](#spacing-05-variable)
91
- - [✅spacing-06 [variable]](#spacing-06-variable)
92
- - [✅spacing-07 [variable]](#spacing-07-variable)
93
- - [✅spacing-08 [variable]](#spacing-08-variable)
94
- - [✅spacing-09 [variable]](#spacing-09-variable)
95
- - [✅spacing-10 [variable]](#spacing-10-variable)
96
- - [✅spacing-11 [variable]](#spacing-11-variable)
97
- - [✅spacing-12 [variable]](#spacing-12-variable)
98
- - [✅map-deep-get [function]](#map-deep-get-function)
99
- - [✅carbon--key-by-index [function]](#carbon--key-by-index-function)
100
- - [✅last-map-item [function]](#last-map-item-function)
101
-
102
- <!-- tocstop -->
103
-
104
- ## @carbon/layout
105
-
106
- ### ✅carbon--grid-gutter [variable]
107
-
108
- Carbon gutter size in rem
109
-
110
- <details>
111
- <summary>Source code</summary>
112
-
113
- ```scss
114
- $carbon--grid-gutter: carbon--rem(32px);
115
- ```
116
-
117
- </details>
118
-
119
- - **Group**: [@carbon/layout](#carbonlayout)
120
- - **Type**: `Number`
121
-
122
- ### ✅carbon--grid-gutter--condensed [variable]
123
-
124
- Carbon condensed gutter size in rem
125
-
126
- <details>
127
- <summary>Source code</summary>
128
-
129
- ```scss
130
- $carbon--grid-gutter--condensed: carbon--rem(2px);
131
- ```
132
-
133
- </details>
134
-
135
- - **Group**: [@carbon/layout](#carbonlayout)
136
- - **Type**: `Number`
137
-
138
- ### ✅carbon--grid-breakpoints [variable]
139
-
140
- <details>
141
- <summary>Source code</summary>
142
-
143
- ```scss
144
- $carbon--grid-breakpoints: (
145
- sm: (
146
- columns: 4,
147
- margin: 0,
148
- width: carbon--rem(320px),
149
- ),
150
- md: (
151
- columns: 8,
152
- margin: carbon--rem(16px),
153
- width: carbon--rem(672px),
154
- ),
155
- lg: (
156
- columns: 16,
157
- margin: carbon--rem(16px),
158
- width: carbon--rem(1056px),
159
- ),
160
- xlg: (
161
- columns: 16,
162
- margin: carbon--rem(16px),
163
- width: carbon--rem(1312px),
164
- ),
165
- max: (
166
- columns: 16,
167
- margin: carbon--rem(24px),
168
- width: carbon--rem(1584px),
169
- ),
170
- );
171
- ```
172
-
173
- </details>
174
-
175
- - **Group**: [@carbon/layout](#carbonlayout)
176
- - **Type**: `Map`
177
-
178
- ### ✅carbon--breakpoint-next [function]
179
-
180
- Get the value of the next breakpoint, or null for the last breakpoint
181
-
182
- <details>
183
- <summary>Source code</summary>
184
-
185
- ```scss
186
- @function carbon--breakpoint-next(
187
- $name,
188
- $breakpoints: $carbon--grid-breakpoints,
189
- $breakpoint-names: map-keys($breakpoints)
190
- ) {
191
- $n: index($breakpoint-names, $name);
192
- @if $n != null and $n < length($breakpoint-names) {
193
- @return nth($breakpoint-names, $n + 1);
194
- }
195
- @return null;
196
- }
197
- ```
198
-
199
- </details>
200
-
201
- - **Parameters**:
202
-
203
- | Name | Description | Type | Default value |
204
- | ------------------- | --------------------------------------------------------------------------------------------------------------- | -------- | --------------------------- |
205
- | `$name` | The name of the brekapoint | `String` | — |
206
- | `$breakpoints` | A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint | `Map` | `$carbon--grid-breakpoints` |
207
- | `$breakpoint-names` | A list of names from the `$breakpoints` map | `List` | `map-keys($breakpoints)` |
208
-
209
- - **Group**: [@carbon/layout](#carbonlayout)
210
- - **Returns**: `String`
211
-
212
- ### ✅carbon--breakpoint-prev [function]
213
-
214
- Get the value of the previous breakpoint, or null for the first breakpoint
215
-
216
- <details>
217
- <summary>Source code</summary>
218
-
219
- ```scss
220
- @function carbon--breakpoint-prev(
221
- $name,
222
- $breakpoints: $carbon--grid-breakpoints,
223
- $breakpoint-names: map-keys($breakpoints)
224
- ) {
225
- $n: index($breakpoint-names, $name);
226
- @if $n != null and $n > 1 {
227
- @return nth($breakpoint-names, $n - 1);
228
- }
229
- @return null;
230
- }
231
- ```
232
-
233
- </details>
234
-
235
- - **Parameters**:
236
-
237
- | Name | Description | Type | Default value |
238
- | ------------------- | --------------------------------------------------------------------------------------------------------------- | -------- | --------------------------- |
239
- | `$name` | The name of the brekapoint | `String` | — |
240
- | `$breakpoints` | A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint | `Map` | `$carbon--grid-breakpoints` |
241
- | `$breakpoint-names` | A list of names from the `$breakpoints` map | `List` | `map-keys($breakpoints)` |
242
-
243
- - **Group**: [@carbon/layout](#carbonlayout)
244
- - **Returns**: `String`
245
-
246
- ### ✅carbon--is-smallest-breakpoint [function]
247
-
248
- Check to see if the given breakpoint name
249
-
250
- <details>
251
- <summary>Source code</summary>
252
-
253
- ```scss
254
- @function carbon--is-smallest-breakpoint(
255
- $name,
256
- $breakpoints: $carbon--grid-breakpoints
257
- ) {
258
- @return index(map-keys($breakpoints), $name) == 1;
259
- }
260
- ```
261
-
262
- </details>
263
-
264
- - **Parameters**:
265
-
266
- | Name | Description | Type | Default value |
267
- | -------------- | --------------------------------------------------------------------------------------------------------------- | -------- | --------------------------- |
268
- | `$name` | The name of the brekapoint | `String` | — |
269
- | `$breakpoints` | A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint | `Map` | `$carbon--grid-breakpoints` |
270
-
271
- - **Group**: [@carbon/layout](#carbonlayout)
272
- - **Returns**: `Bool`
273
- - **Used by**:
274
- - [carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin)
275
-
276
- ### ✅carbon--largest-breakpoint-name [function]
277
-
278
- Returns the largest breakpoint name
279
-
280
- <details>
281
- <summary>Source code</summary>
282
-
283
- ```scss
284
- @function carbon--largest-breakpoint-name(
285
- $breakpoints: $carbon--grid-breakpoints
286
- ) {
287
- $total-breakpoints: length($breakpoints);
288
- @return carbon--key-by-index($breakpoints, $total-breakpoints);
289
- }
290
- ```
291
-
292
- </details>
293
-
294
- - **Parameters**:
295
-
296
- | Name | Description | Type | Default value |
297
- | -------------- | ---------------------------------------------- | ----- | --------------------------- |
298
- | `$breakpoints` | A map of breakpoints where the key is the name | `Map` | `$carbon--grid-breakpoints` |
299
-
300
- - **Group**: [@carbon/layout](#carbonlayout)
301
- - **Returns**: `String`
302
- - **Requires**:
303
- - [carbon--key-by-index [function]](#carbon--key-by-index-function)
304
- - **Used by**:
305
- - [carbon--largest-breakpoint [mixin]](#carbon--largest-breakpoint-mixin)
306
-
307
- ### ✅carbon--breakpoint-infix [function]
308
-
309
- Get the infix for a given breakpoint in a list of breakpoints. Usesful for
310
- generate the size part in a selector, for example: `.prefix--col-sm-2`.
311
-
312
- <details>
313
- <summary>Source code</summary>
314
-
315
- ```scss
316
- @function carbon--breakpoint-infix($name) {
317
- @return '-#{$name}';
318
- }
319
- ```
320
-
321
- </details>
322
-
323
- - **Parameters**:
324
-
325
- | Name | Description | Type | Default value |
326
- | ------- | -------------------------- | -------- | ------------- |
327
- | `$name` | The name of the breakpoint | `String` | — |
328
-
329
- - **Group**: [@carbon/layout](#carbonlayout)
330
- - **Returns**: `String`
331
-
332
- ### ✅carbon--breakpoint-up [mixin]
333
-
334
- Generate a media query up to the width of the given breakpoint name
335
-
336
- <details>
337
- <summary>Source code</summary>
338
-
339
- ```scss
340
- @mixin carbon--breakpoint-up($name, $breakpoints: $carbon--grid-breakpoints) {
341
- @if type-of($name) == 'number' {
342
- @media (min-width: $name) {
343
- @content;
344
- }
345
- } @else if map-has-key($breakpoints, $name) {
346
- $breakpoint: map-get($breakpoints, $name);
347
- $width: map-get($breakpoint, width);
348
- @if carbon--is-smallest-breakpoint($name, $breakpoints) {
349
- @content;
350
- } @else {
351
- @media (min-width: $width) {
352
- @content;
353
- }
354
- }
355
- } @else {
356
- @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})';
357
- }
358
- }
359
- ```
360
-
361
- </details>
362
-
363
- - **Parameters**:
364
-
365
- | Name | Description | Type | Default value |
366
- | -------------- | ---------------------------------------------- | ------------------ | --------------------------- |
367
- | `$name` | — | `String \| Number` | — |
368
- | `$breakpoints` | A map of breakpoints where the key is the name | `Map` | `$carbon--grid-breakpoints` |
369
-
370
- - **Group**: [@carbon/layout](#carbonlayout)
371
- - **Requires**:
372
- - [carbon--is-smallest-breakpoint [function]](#carbon--is-smallest-breakpoint-function)
373
- - **Used by**:
374
- - [carbon--breakpoint-between [mixin]](#carbon--breakpoint-between-mixin)
375
- - [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
376
-
377
- ### ✅carbon--breakpoint-down [mixin]
378
-
379
- Generate a media query for the maximum width of the given styles
380
-
381
- <details>
382
- <summary>Source code</summary>
383
-
384
- ```scss
385
- @mixin carbon--breakpoint-down($name, $breakpoints: $carbon--grid-breakpoints) {
386
- @if type-of($name) == 'number' {
387
- @media (max-width: $name) {
388
- @content;
389
- }
390
- } @else if map-has-key($breakpoints, $name) {
391
- $breakpoint: map-get($breakpoints, $name);
392
- $width: map-get($breakpoint, width);
393
- @media (max-width: $width) {
394
- @content;
395
- }
396
- } @else {
397
- @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})';
398
- }
399
- }
400
- ```
401
-
402
- </details>
403
-
404
- - **Parameters**:
405
-
406
- | Name | Description | Type | Default value |
407
- | -------------- | ---------------------------------------------- | ------------------ | --------------------------- |
408
- | `$name` | — | `String \| Number` | — |
409
- | `$breakpoints` | A map of breakpoints where the key is the name | `Map` | `$carbon--grid-breakpoints` |
410
-
411
- - **Group**: [@carbon/layout](#carbonlayout)
412
- - **Used by**:
413
- - [carbon--breakpoint-between [mixin]](#carbon--breakpoint-between-mixin)
414
-
415
- ### ✅carbon--breakpoint-between [mixin]
416
-
417
- Generate a media query for the range between the lower and upper breakpoints
418
-
419
- <details>
420
- <summary>Source code</summary>
421
-
422
- ```scss
423
- @mixin carbon--breakpoint-between(
424
- $lower,
425
- $upper,
426
- $breakpoints: $carbon--grid-breakpoints
427
- ) {
428
- $is-number-lower: type-of($lower) == 'number';
429
- $is-number-upper: type-of($upper) == 'number';
430
- $min: if($is-number-lower, $lower, map-get($breakpoints, $lower));
431
- $max: if($is-number-upper, $upper, map-get($breakpoints, $upper));
432
-
433
- @if $min and $max {
434
- $min-width: if(not $is-number-lower and $min, map-get($min, width), $min);
435
- $max-width: if(not $is-number-upper and $max, map-get($max, width), $max);
436
- @media (min-width: $min-width) and (max-width: $max-width) {
437
- @content;
438
- }
439
- } @else if $min != null and $max == null {
440
- @include carbon--breakpoint-up($lower) {
441
- @content;
442
- }
443
- } @else if $min == null and $max != null {
444
- @include carbon--breakpoint-down($upper) {
445
- @content;
446
- }
447
- } @else {
448
- @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map-keys($breakpoints)}).';
449
- }
450
- }
451
- ```
452
-
453
- </details>
454
-
455
- - **Parameters**:
456
-
457
- | Name | Description | Type | Default value |
458
- | -------------- | ---------------------------------------------- | ------------------ | --------------------------- |
459
- | `$lower` | — | `String \| Number` | — |
460
- | `$upper` | — | `String \| Number` | — |
461
- | `$breakpoints` | A map of breakpoints where the key is the name | `Map` | `$carbon--grid-breakpoints` |
462
-
463
- - **Group**: [@carbon/layout](#carbonlayout)
464
- - **Requires**:
465
- - [carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin)
466
- - [carbon--breakpoint-down [mixin]](#carbon--breakpoint-down-mixin)
467
-
468
- ### ✅carbon--largest-breakpoint [mixin]
469
-
470
- Generate media query for the largest breakpoint
471
-
472
- <details>
473
- <summary>Source code</summary>
474
-
475
- ```scss
476
- @mixin carbon--largest-breakpoint($breakpoints: $carbon--grid-breakpoints) {
477
- @include carbon--breakpoint(carbon--largest-breakpoint-name()) {
478
- @content;
479
- }
480
- }
481
- ```
482
-
483
- </details>
484
-
485
- - **Parameters**:
486
-
487
- | Name | Description | Type | Default value |
488
- | -------------- | ---------------------------------------------- | ----- | --------------------------- |
489
- | `$breakpoints` | A map of breakpoints where the key is the name | `Map` | `$carbon--grid-breakpoints` |
490
-
491
- - **Group**: [@carbon/layout](#carbonlayout)
492
- - **Requires**:
493
- - [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
494
- - [carbon--largest-breakpoint-name [function]](#carbon--largest-breakpoint-name-function)
495
-
496
- ### ✅carbon--breakpoint [mixin]
497
-
498
- Generate a media query for a given breakpoint
499
-
500
- <details>
501
- <summary>Source code</summary>
502
-
503
- ```scss
504
- @mixin carbon--breakpoint($name, $breakpoints: $carbon--grid-breakpoints) {
505
- @include carbon--breakpoint-up($name, $breakpoints) {
506
- @content;
507
- }
508
- }
509
- ```
510
-
511
- </details>
512
-
513
- - **Parameters**:
514
-
515
- | Name | Description | Type | Default value |
516
- | -------------- | ---------------------------------------------- | ------------------ | --------------------------- |
517
- | `$name` | — | `String \| Number` | — |
518
- | `$breakpoints` | A map of breakpoints where the key is the name | `Map` | `$carbon--grid-breakpoints` |
519
-
520
- - **Group**: [@carbon/layout](#carbonlayout)
521
- - **Requires**:
522
- - [carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin)
523
- - **Used by**:
524
- - [carbon--largest-breakpoint [mixin]](#carbon--largest-breakpoint-mixin)
525
-
526
- ### ✅carbon--container-01 [variable]
527
-
528
- <details>
529
- <summary>Source code</summary>
530
-
531
- ```scss
532
- $carbon--container-01: 1.5rem;
533
- ```
534
-
535
- </details>
536
-
537
- - **Group**: [@carbon/layout](#carbonlayout)
538
- - **Type**: `Number`
539
- - **Aliased**:
540
- - `container-01`
541
-
542
- ### ✅carbon--container-02 [variable]
543
-
544
- <details>
545
- <summary>Source code</summary>
546
-
547
- ```scss
548
- $carbon--container-02: 2rem;
549
- ```
550
-
551
- </details>
552
-
553
- - **Group**: [@carbon/layout](#carbonlayout)
554
- - **Type**: `Number`
555
- - **Aliased**:
556
- - `container-02`
557
-
558
- ### ✅carbon--container-03 [variable]
559
-
560
- <details>
561
- <summary>Source code</summary>
562
-
563
- ```scss
564
- $carbon--container-03: 2.5rem;
565
- ```
566
-
567
- </details>
568
-
569
- - **Group**: [@carbon/layout](#carbonlayout)
570
- - **Type**: `Number`
571
- - **Aliased**:
572
- - `container-03`
573
-
574
- ### ✅carbon--container-04 [variable]
575
-
576
- <details>
577
- <summary>Source code</summary>
578
-
579
- ```scss
580
- $carbon--container-04: 3rem;
581
- ```
582
-
583
- </details>
584
-
585
- - **Group**: [@carbon/layout](#carbonlayout)
586
- - **Type**: `Number`
587
- - **Aliased**:
588
- - `container-04`
589
-
590
- ### ✅carbon--container-05 [variable]
591
-
592
- <details>
593
- <summary>Source code</summary>
594
-
595
- ```scss
596
- $carbon--container-05: 4rem;
597
- ```
598
-
599
- </details>
600
-
601
- - **Group**: [@carbon/layout](#carbonlayout)
602
- - **Type**: `Number`
603
- - **Aliased**:
604
- - `container-05`
605
-
606
- ### ✅carbon--container [variable]
607
-
608
- <details>
609
- <summary>Source code</summary>
610
-
611
- ```scss
612
- $carbon--container: (
613
- $carbon--container-01,
614
- $carbon--container-02,
615
- $carbon--container-03,
616
- $carbon--container-04,
617
- $carbon--container-05
618
- );
619
- ```
620
-
621
- </details>
622
-
623
- - **Group**: [@carbon/layout](#carbonlayout)
624
- - **Type**: `List`
625
-
626
- ### ✅container-01 [variable]
627
-
628
- <details>
629
- <summary>Source code</summary>
630
-
631
- ```scss
632
- $container-01: $carbon--container-01;
633
- ```
634
-
635
- </details>
636
-
637
- - **Group**: [@carbon/layout](#carbonlayout)
638
- - **Type**: `Number`
639
- - **Alias**: `carbon--container-01`
640
-
641
- ### ✅container-02 [variable]
642
-
643
- <details>
644
- <summary>Source code</summary>
645
-
646
- ```scss
647
- $container-02: $carbon--container-02;
648
- ```
649
-
650
- </details>
651
-
652
- - **Group**: [@carbon/layout](#carbonlayout)
653
- - **Type**: `Number`
654
- - **Alias**: `carbon--container-02`
655
-
656
- ### ✅container-03 [variable]
657
-
658
- <details>
659
- <summary>Source code</summary>
660
-
661
- ```scss
662
- $container-03: $carbon--container-03;
663
- ```
664
-
665
- </details>
666
-
667
- - **Group**: [@carbon/layout](#carbonlayout)
668
- - **Type**: `Number`
669
- - **Alias**: `carbon--container-03`
670
-
671
- ### ✅container-04 [variable]
672
-
673
- <details>
674
- <summary>Source code</summary>
675
-
676
- ```scss
677
- $container-04: $carbon--container-04;
678
- ```
679
-
680
- </details>
681
-
682
- - **Group**: [@carbon/layout](#carbonlayout)
683
- - **Type**: `Number`
684
- - **Alias**: `carbon--container-04`
685
-
686
- ### ✅container-05 [variable]
687
-
688
- <details>
689
- <summary>Source code</summary>
690
-
691
- ```scss
692
- $container-05: $carbon--container-05;
693
- ```
694
-
695
- </details>
696
-
697
- - **Group**: [@carbon/layout](#carbonlayout)
698
- - **Type**: `Number`
699
- - **Alias**: `carbon--container-05`
700
-
701
- ### ✅carbon--base-font-size [variable]
702
-
703
- Default font size
704
-
705
- <details>
706
- <summary>Source code</summary>
707
-
708
- ```scss
709
- $carbon--base-font-size: 16px;
710
- ```
711
-
712
- </details>
713
-
714
- - **Group**: [@carbon/layout](#carbonlayout)
715
- - **Type**: `Number`
716
- - **Used by**:
717
- - [carbon--rem [function]](#carbon--rem-function)
718
- - [carbon--em [function]](#carbon--em-function)
719
-
720
- ### ✅carbon--rem [function]
721
-
722
- Convert a given px unit to a rem unit
723
-
724
- <details>
725
- <summary>Source code</summary>
726
-
727
- ```scss
728
- @function carbon--rem($px) {
729
- @if unit($px) != 'px' {
730
- // TODO: update to @error in v11
731
- @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
732
- }
733
-
734
- @return ($px / $carbon--base-font-size) * 1rem;
735
- }
736
- ```
737
-
738
- </details>
739
-
740
- - **Parameters**:
741
-
742
- | Name | Description | Type | Default value |
743
- | ----- | ------------------- | -------- | ------------- |
744
- | `$px` | Number with px unit | `Number` | — |
745
-
746
- - **Group**: [@carbon/layout](#carbonlayout)
747
- - **Returns**: `Number` Number with rem unit
748
- - **Requires**:
749
- - [carbon--base-font-size [variable]](#carbon--base-font-size-variable)
750
- - **Used by**:
751
- - [carbon--mini-units [function]](#carbon--mini-units-function)
752
-
753
- ### ✅carbon--em [function]
754
-
755
- Convert a given px unit to a em unit
756
-
757
- <details>
758
- <summary>Source code</summary>
759
-
760
- ```scss
761
- @function carbon--em($px) {
762
- @if unit($px) != 'px' {
763
- // TODO: update to @error in v11
764
- @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
765
- }
766
-
767
- @return ($px / $carbon--base-font-size) * 1em;
768
- }
769
- ```
770
-
771
- </details>
772
-
773
- - **Parameters**:
774
-
775
- | Name | Description | Type | Default value |
776
- | ----- | ------------------- | -------- | ------------- |
777
- | `$px` | Number with px unit | `Number` | — |
778
-
779
- - **Group**: [@carbon/layout](#carbonlayout)
780
- - **Returns**: `Number` Number with em unit
781
- - **Requires**:
782
- - [carbon--base-font-size [variable]](#carbon--base-font-size-variable)
783
-
784
- ### ✅carbon--fluid-spacing-01 [variable]
785
-
786
- <details>
787
- <summary>Source code</summary>
788
-
789
- ```scss
790
- $carbon--fluid-spacing-01: 0;
791
- ```
792
-
793
- </details>
794
-
795
- - **Group**: [@carbon/layout](#carbonlayout)
796
- - **Type**: `Number`
797
- - **Aliased**:
798
- - `fluid-spacing-01`
799
-
800
- ### ✅carbon--fluid-spacing-02 [variable]
801
-
802
- <details>
803
- <summary>Source code</summary>
804
-
805
- ```scss
806
- $carbon--fluid-spacing-02: 2vw;
807
- ```
808
-
809
- </details>
810
-
811
- - **Group**: [@carbon/layout](#carbonlayout)
812
- - **Type**: `Number`
813
- - **Aliased**:
814
- - `fluid-spacing-02`
815
-
816
- ### ✅carbon--fluid-spacing-03 [variable]
817
-
818
- <details>
819
- <summary>Source code</summary>
820
-
821
- ```scss
822
- $carbon--fluid-spacing-03: 5vw;
823
- ```
824
-
825
- </details>
826
-
827
- - **Group**: [@carbon/layout](#carbonlayout)
828
- - **Type**: `Number`
829
- - **Aliased**:
830
- - `fluid-spacing-03`
831
-
832
- ### ✅carbon--fluid-spacing-04 [variable]
833
-
834
- <details>
835
- <summary>Source code</summary>
836
-
837
- ```scss
838
- $carbon--fluid-spacing-04: 10vw;
839
- ```
840
-
841
- </details>
842
-
843
- - **Group**: [@carbon/layout](#carbonlayout)
844
- - **Type**: `Number`
845
- - **Aliased**:
846
- - `fluid-spacing-04`
847
-
848
- ### ✅carbon--fluid-spacing [variable]
849
-
850
- <details>
851
- <summary>Source code</summary>
852
-
853
- ```scss
854
- $carbon--fluid-spacing: (
855
- $carbon--fluid-spacing-01,
856
- $carbon--fluid-spacing-02,
857
- $carbon--fluid-spacing-03,
858
- $carbon--fluid-spacing-04
859
- );
860
- ```
861
-
862
- </details>
863
-
864
- - **Group**: [@carbon/layout](#carbonlayout)
865
- - **Type**: `List`
866
-
867
- ### ✅fluid-spacing-01 [variable]
868
-
869
- <details>
870
- <summary>Source code</summary>
871
-
872
- ```scss
873
- $fluid-spacing-01: $carbon--fluid-spacing-01;
874
- ```
875
-
876
- </details>
877
-
878
- - **Group**: [@carbon/layout](#carbonlayout)
879
- - **Type**: `Number`
880
- - **Alias**: `carbon--fluid-spacing-01`
881
-
882
- ### ✅fluid-spacing-02 [variable]
883
-
884
- <details>
885
- <summary>Source code</summary>
886
-
887
- ```scss
888
- $fluid-spacing-02: $carbon--fluid-spacing-02;
889
- ```
890
-
891
- </details>
892
-
893
- - **Group**: [@carbon/layout](#carbonlayout)
894
- - **Type**: `Number`
895
- - **Alias**: `carbon--fluid-spacing-02`
896
-
897
- ### ✅fluid-spacing-03 [variable]
898
-
899
- <details>
900
- <summary>Source code</summary>
901
-
902
- ```scss
903
- $fluid-spacing-03: $carbon--fluid-spacing-03;
904
- ```
905
-
906
- </details>
907
-
908
- - **Group**: [@carbon/layout](#carbonlayout)
909
- - **Type**: `Number`
910
- - **Alias**: `carbon--fluid-spacing-03`
911
-
912
- ### ✅fluid-spacing-04 [variable]
913
-
914
- <details>
915
- <summary>Source code</summary>
916
-
917
- ```scss
918
- $fluid-spacing-04: $carbon--fluid-spacing-04;
919
- ```
920
-
921
- </details>
922
-
923
- - **Group**: [@carbon/layout](#carbonlayout)
924
- - **Type**: `Number`
925
- - **Alias**: `carbon--fluid-spacing-04`
926
-
927
- ### ✅carbon--icon-size-01 [variable]
928
-
929
- <details>
930
- <summary>Source code</summary>
931
-
932
- ```scss
933
- $carbon--icon-size-01: 1rem;
934
- ```
935
-
936
- </details>
937
-
938
- - **Group**: [@carbon/layout](#carbonlayout)
939
- - **Type**: `Number`
940
- - **Aliased**:
941
- - `icon-size-01`
942
-
943
- ### ✅carbon--icon-size-02 [variable]
944
-
945
- <details>
946
- <summary>Source code</summary>
947
-
948
- ```scss
949
- $carbon--icon-size-02: 1.25rem;
950
- ```
951
-
952
- </details>
953
-
954
- - **Group**: [@carbon/layout](#carbonlayout)
955
- - **Type**: `Number`
956
- - **Aliased**:
957
- - `icon-size-02`
958
-
959
- ### ✅carbon--icon-size [variable]
960
-
961
- <details>
962
- <summary>Source code</summary>
963
-
964
- ```scss
965
- $carbon--icon-size: ($carbon--icon-size-01, $carbon--icon-size-02);
966
- ```
967
-
968
- </details>
969
-
970
- - **Group**: [@carbon/layout](#carbonlayout)
971
- - **Type**: `List`
972
-
973
- ### ✅icon-size-01 [variable]
974
-
975
- <details>
976
- <summary>Source code</summary>
977
-
978
- ```scss
979
- $icon-size-01: $carbon--icon-size-01;
980
- ```
981
-
982
- </details>
983
-
984
- - **Group**: [@carbon/layout](#carbonlayout)
985
- - **Type**: `Number`
986
- - **Alias**: `carbon--icon-size-01`
987
-
988
- ### ✅icon-size-02 [variable]
989
-
990
- <details>
991
- <summary>Source code</summary>
992
-
993
- ```scss
994
- $icon-size-02: $carbon--icon-size-02;
995
- ```
996
-
997
- </details>
998
-
999
- - **Group**: [@carbon/layout](#carbonlayout)
1000
- - **Type**: `Number`
1001
- - **Alias**: `carbon--icon-size-02`
1002
-
1003
- ### ✅carbon--get-column-width [function]
1004
-
1005
- Get the column width for a given breakpoint
1006
-
1007
- <details>
1008
- <summary>Source code</summary>
1009
-
1010
- ```scss
1011
- @function carbon--get-column-width(
1012
- $breakpoint,
1013
- $breakpoints: $carbon--grid-breakpoints
1014
- ) {
1015
- @if map-has-key($breakpoints, $breakpoint) {
1016
- $values: map-get($breakpoints, $breakpoint);
1017
- $width: map-get($values, width);
1018
- $margin: map-get($values, margin);
1019
- $columns: map-get($values, columns);
1020
-
1021
- @return ($width - (2 * $margin)) / $columns;
1022
- } @else {
1023
- @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
1024
- }
1025
- }
1026
- ```
1027
-
1028
- </details>
1029
-
1030
- - **Parameters**:
1031
-
1032
- | Name | Description | Type | Default value |
1033
- | -------------- | ----------- | -------- | --------------------------- |
1034
- | `$breakpoint` | — | `String` | — |
1035
- | `$breakpoints` | — | `Map` | `$carbon--grid-breakpoints` |
1036
-
1037
- - **Group**: [@carbon/layout](#carbonlayout)
1038
- - **Returns**: `Number` In rem
1039
-
1040
- ### ✅carbon--key-height-scales [variable]
1041
-
1042
- <details>
1043
- <summary>Source code</summary>
1044
-
1045
- ```scss
1046
- $carbon--key-height-scales: (
1047
- sm: (
1048
- carbon--get-column-width(sm),
1049
- carbon--get-column-width(sm) * 2,
1050
- carbon--get-column-width(sm) * 3,
1051
- carbon--get-column-width(sm) * 4,
1052
- carbon--get-column-width(sm) * 5,
1053
- carbon--get-column-width(sm) * 6,
1054
- ),
1055
- md: (
1056
- carbon--get-column-width(md),
1057
- carbon--get-column-width(md) * 2,
1058
- carbon--get-column-width(md) * 3,
1059
- carbon--get-column-width(md) * 4,
1060
- carbon--get-column-width(md) * 5,
1061
- carbon--get-column-width(md) * 6,
1062
- ),
1063
- lg: (
1064
- carbon--get-column-width(lg),
1065
- carbon--get-column-width(lg) * 2,
1066
- carbon--get-column-width(lg) * 3,
1067
- carbon--get-column-width(lg) * 4,
1068
- carbon--get-column-width(lg) * 5,
1069
- carbon--get-column-width(lg) * 6,
1070
- carbon--get-column-width(lg) * 7,
1071
- carbon--get-column-width(lg) * 8,
1072
- ),
1073
- xlg: (
1074
- carbon--get-column-width(xlg),
1075
- carbon--get-column-width(xlg) * 2,
1076
- carbon--get-column-width(xlg) * 3,
1077
- carbon--get-column-width(xlg) * 4,
1078
- carbon--get-column-width(xlg) * 5,
1079
- carbon--get-column-width(xlg) * 6,
1080
- carbon--get-column-width(xlg) * 7,
1081
- carbon--get-column-width(xlg) * 8,
1082
- ),
1083
- max: (
1084
- carbon--get-column-width(max),
1085
- carbon--get-column-width(max) * 2,
1086
- carbon--get-column-width(max) * 3,
1087
- carbon--get-column-width(max) * 4,
1088
- carbon--get-column-width(max) * 5,
1089
- carbon--get-column-width(max) * 6,
1090
- carbon--get-column-width(max) * 7,
1091
- carbon--get-column-width(max) * 8,
1092
- ),
1093
- );
1094
- ```
1095
-
1096
- </details>
1097
-
1098
- - **Group**: [@carbon/layout](#carbonlayout)
1099
- - **Type**: `Map`
1100
- - **Used by**:
1101
- - [carbon--key-height [function]](#carbon--key-height-function)
1102
-
1103
- ### ✅carbon--key-height [function]
1104
-
1105
- Get the value of a key height step at a given breakpoint
1106
-
1107
- <details>
1108
- <summary>Source code</summary>
1109
-
1110
- ```scss
1111
- @function carbon--key-height($breakpoint, $step) {
1112
- @if map-has-key($carbon--key-height-scales, $breakpoint) {
1113
- @return nth(map-get($carbon--key-height-scales, $breakpoint), $step);
1114
- } @else {
1115
- @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
1116
- }
1117
- }
1118
- ```
1119
-
1120
- </details>
1121
-
1122
- - **Parameters**:
1123
-
1124
- | Name | Description | Type | Default value |
1125
- | ------------- | ----------- | -------- | ------------- |
1126
- | `$breakpoint` | — | `String` | — |
1127
- | `$step` | — | `Number` | — |
1128
-
1129
- - **Group**: [@carbon/layout](#carbonlayout)
1130
- - **Returns**: `Number` In rem
1131
- - **Requires**:
1132
- - [carbon--key-height-scales [variable]](#carbon--key-height-scales-variable)
1133
-
1134
- ### ✅carbon--layout-01 [variable]
1135
-
1136
- <details>
1137
- <summary>Source code</summary>
1138
-
1139
- ```scss
1140
- $carbon--layout-01: 1rem;
1141
- ```
1142
-
1143
- </details>
1144
-
1145
- - **Group**: [@carbon/layout](#carbonlayout)
1146
- - **Type**: `Number`
1147
- - **Aliased**:
1148
- - `layout-01`
1149
-
1150
- ### ✅carbon--layout-02 [variable]
1151
-
1152
- <details>
1153
- <summary>Source code</summary>
1154
-
1155
- ```scss
1156
- $carbon--layout-02: 1.5rem;
1157
- ```
1158
-
1159
- </details>
1160
-
1161
- - **Group**: [@carbon/layout](#carbonlayout)
1162
- - **Type**: `Number`
1163
- - **Aliased**:
1164
- - `layout-02`
1165
-
1166
- ### ✅carbon--layout-03 [variable]
1167
-
1168
- <details>
1169
- <summary>Source code</summary>
1170
-
1171
- ```scss
1172
- $carbon--layout-03: 2rem;
1173
- ```
1174
-
1175
- </details>
1176
-
1177
- - **Group**: [@carbon/layout](#carbonlayout)
1178
- - **Type**: `Number`
1179
- - **Aliased**:
1180
- - `layout-03`
1181
-
1182
- ### ✅carbon--layout-04 [variable]
1183
-
1184
- <details>
1185
- <summary>Source code</summary>
1186
-
1187
- ```scss
1188
- $carbon--layout-04: 3rem;
1189
- ```
1190
-
1191
- </details>
1192
-
1193
- - **Group**: [@carbon/layout](#carbonlayout)
1194
- - **Type**: `Number`
1195
- - **Aliased**:
1196
- - `layout-04`
1197
-
1198
- ### ✅carbon--layout-05 [variable]
1199
-
1200
- <details>
1201
- <summary>Source code</summary>
1202
-
1203
- ```scss
1204
- $carbon--layout-05: 4rem;
1205
- ```
1206
-
1207
- </details>
1208
-
1209
- - **Group**: [@carbon/layout](#carbonlayout)
1210
- - **Type**: `Number`
1211
- - **Aliased**:
1212
- - `layout-05`
1213
-
1214
- ### ✅carbon--layout-06 [variable]
1215
-
1216
- <details>
1217
- <summary>Source code</summary>
1218
-
1219
- ```scss
1220
- $carbon--layout-06: 6rem;
1221
- ```
1222
-
1223
- </details>
1224
-
1225
- - **Group**: [@carbon/layout](#carbonlayout)
1226
- - **Type**: `Number`
1227
- - **Aliased**:
1228
- - `layout-06`
1229
-
1230
- ### ✅carbon--layout-07 [variable]
1231
-
1232
- <details>
1233
- <summary>Source code</summary>
1234
-
1235
- ```scss
1236
- $carbon--layout-07: 10rem;
1237
- ```
1238
-
1239
- </details>
1240
-
1241
- - **Group**: [@carbon/layout](#carbonlayout)
1242
- - **Type**: `Number`
1243
- - **Aliased**:
1244
- - `layout-07`
1245
-
1246
- ### ✅carbon--layout [variable]
1247
-
1248
- <details>
1249
- <summary>Source code</summary>
1250
-
1251
- ```scss
1252
- $carbon--layout: (
1253
- $carbon--layout-01,
1254
- $carbon--layout-02,
1255
- $carbon--layout-03,
1256
- $carbon--layout-04,
1257
- $carbon--layout-05,
1258
- $carbon--layout-06,
1259
- $carbon--layout-07
1260
- );
1261
- ```
1262
-
1263
- </details>
1264
-
1265
- - **Group**: [@carbon/layout](#carbonlayout)
1266
- - **Type**: `List`
1267
-
1268
- ### ✅layout-01 [variable]
1269
-
1270
- <details>
1271
- <summary>Source code</summary>
1272
-
1273
- ```scss
1274
- $layout-01: $carbon--layout-01;
1275
- ```
1276
-
1277
- </details>
1278
-
1279
- - **Group**: [@carbon/layout](#carbonlayout)
1280
- - **Type**: `Number`
1281
- - **Alias**: `carbon--layout-01`
1282
-
1283
- ### ✅layout-02 [variable]
1284
-
1285
- <details>
1286
- <summary>Source code</summary>
1287
-
1288
- ```scss
1289
- $layout-02: $carbon--layout-02;
1290
- ```
1291
-
1292
- </details>
1293
-
1294
- - **Group**: [@carbon/layout](#carbonlayout)
1295
- - **Type**: `Number`
1296
- - **Alias**: `carbon--layout-02`
1297
-
1298
- ### ✅layout-03 [variable]
1299
-
1300
- <details>
1301
- <summary>Source code</summary>
1302
-
1303
- ```scss
1304
- $layout-03: $carbon--layout-03;
1305
- ```
1306
-
1307
- </details>
1308
-
1309
- - **Group**: [@carbon/layout](#carbonlayout)
1310
- - **Type**: `Number`
1311
- - **Alias**: `carbon--layout-03`
1312
-
1313
- ### ✅layout-04 [variable]
1314
-
1315
- <details>
1316
- <summary>Source code</summary>
1317
-
1318
- ```scss
1319
- $layout-04: $carbon--layout-04;
1320
- ```
1321
-
1322
- </details>
1323
-
1324
- - **Group**: [@carbon/layout](#carbonlayout)
1325
- - **Type**: `Number`
1326
- - **Alias**: `carbon--layout-04`
1327
-
1328
- ### ✅layout-05 [variable]
1329
-
1330
- <details>
1331
- <summary>Source code</summary>
1332
-
1333
- ```scss
1334
- $layout-05: $carbon--layout-05;
1335
- ```
1336
-
1337
- </details>
1338
-
1339
- - **Group**: [@carbon/layout](#carbonlayout)
1340
- - **Type**: `Number`
1341
- - **Alias**: `carbon--layout-05`
1342
-
1343
- ### ✅layout-06 [variable]
1344
-
1345
- <details>
1346
- <summary>Source code</summary>
1347
-
1348
- ```scss
1349
- $layout-06: $carbon--layout-06;
1350
- ```
1351
-
1352
- </details>
1353
-
1354
- - **Group**: [@carbon/layout](#carbonlayout)
1355
- - **Type**: `Number`
1356
- - **Alias**: `carbon--layout-06`
1357
-
1358
- ### ✅layout-07 [variable]
1359
-
1360
- <details>
1361
- <summary>Source code</summary>
1362
-
1363
- ```scss
1364
- $layout-07: $carbon--layout-07;
1365
- ```
1366
-
1367
- </details>
1368
-
1369
- - **Group**: [@carbon/layout](#carbonlayout)
1370
- - **Type**: `Number`
1371
- - **Alias**: `carbon--layout-07`
1372
-
1373
- ### ✅carbon--mini-unit-size [variable]
1374
-
1375
- Default mini-unit value
1376
-
1377
- <details>
1378
- <summary>Source code</summary>
1379
-
1380
- ```scss
1381
- $carbon--mini-unit-size: 8px;
1382
- ```
1383
-
1384
- </details>
1385
-
1386
- - **Group**: [@carbon/layout](#carbonlayout)
1387
- - **Type**: `Number`
1388
- - **Used by**:
1389
- - [carbon--mini-units [function]](#carbon--mini-units-function)
1390
-
1391
- ### ✅carbon--mini-units [function]
1392
-
1393
- Get the value of the corresponding number of units
1394
-
1395
- <details>
1396
- <summary>Source code</summary>
1397
-
1398
- ```scss
1399
- @function carbon--mini-units($count) {
1400
- @return carbon--rem($carbon--mini-unit-size * $count);
1401
- }
1402
- ```
1403
-
1404
- </details>
1405
-
1406
- - **Parameters**:
1407
-
1408
- | Name | Description | Type | Default value |
1409
- | -------- | ---------------------------------------- | -------- | ------------- |
1410
- | `$count` | The number of units to get the value for | `Number` | — |
1411
-
1412
- - **Group**: [@carbon/layout](#carbonlayout)
1413
- - **Returns**: `Number` In rem units
1414
- - **Requires**:
1415
- - [carbon--rem [function]](#carbon--rem-function)
1416
- - [carbon--mini-unit-size [variable]](#carbon--mini-unit-size-variable)
1417
-
1418
- ### ✅carbon--spacing-01 [variable]
1419
-
1420
- <details>
1421
- <summary>Source code</summary>
1422
-
1423
- ```scss
1424
- $carbon--spacing-01: 0.125rem;
1425
- ```
1426
-
1427
- </details>
1428
-
1429
- - **Group**: [@carbon/layout](#carbonlayout)
1430
- - **Type**: `Number`
1431
- - **Aliased**:
1432
- - `spacing-01`
1433
-
1434
- ### ✅carbon--spacing-02 [variable]
1435
-
1436
- <details>
1437
- <summary>Source code</summary>
1438
-
1439
- ```scss
1440
- $carbon--spacing-02: 0.25rem;
1441
- ```
1442
-
1443
- </details>
1444
-
1445
- - **Group**: [@carbon/layout](#carbonlayout)
1446
- - **Type**: `Number`
1447
- - **Aliased**:
1448
- - `spacing-02`
1449
-
1450
- ### ✅carbon--spacing-03 [variable]
1451
-
1452
- <details>
1453
- <summary>Source code</summary>
1454
-
1455
- ```scss
1456
- $carbon--spacing-03: 0.5rem;
1457
- ```
1458
-
1459
- </details>
1460
-
1461
- - **Group**: [@carbon/layout](#carbonlayout)
1462
- - **Type**: `Number`
1463
- - **Aliased**:
1464
- - `spacing-03`
1465
-
1466
- ### ✅carbon--spacing-04 [variable]
1467
-
1468
- <details>
1469
- <summary>Source code</summary>
1470
-
1471
- ```scss
1472
- $carbon--spacing-04: 0.75rem;
1473
- ```
1474
-
1475
- </details>
1476
-
1477
- - **Group**: [@carbon/layout](#carbonlayout)
1478
- - **Type**: `Number`
1479
- - **Aliased**:
1480
- - `spacing-04`
1481
-
1482
- ### ✅carbon--spacing-05 [variable]
1483
-
1484
- <details>
1485
- <summary>Source code</summary>
1486
-
1487
- ```scss
1488
- $carbon--spacing-05: 1rem;
1489
- ```
1490
-
1491
- </details>
1492
-
1493
- - **Group**: [@carbon/layout](#carbonlayout)
1494
- - **Type**: `Number`
1495
- - **Aliased**:
1496
- - `spacing-05`
1497
-
1498
- ### ✅carbon--spacing-06 [variable]
1499
-
1500
- <details>
1501
- <summary>Source code</summary>
1502
-
1503
- ```scss
1504
- $carbon--spacing-06: 1.5rem;
1505
- ```
1506
-
1507
- </details>
1508
-
1509
- - **Group**: [@carbon/layout](#carbonlayout)
1510
- - **Type**: `Number`
1511
- - **Aliased**:
1512
- - `spacing-06`
1513
-
1514
- ### ✅carbon--spacing-07 [variable]
1515
-
1516
- <details>
1517
- <summary>Source code</summary>
1518
-
1519
- ```scss
1520
- $carbon--spacing-07: 2rem;
1521
- ```
1522
-
1523
- </details>
1524
-
1525
- - **Group**: [@carbon/layout](#carbonlayout)
1526
- - **Type**: `Number`
1527
- - **Aliased**:
1528
- - `spacing-07`
1529
-
1530
- ### ✅carbon--spacing-08 [variable]
1531
-
1532
- <details>
1533
- <summary>Source code</summary>
1534
-
1535
- ```scss
1536
- $carbon--spacing-08: 2.5rem;
1537
- ```
1538
-
1539
- </details>
1540
-
1541
- - **Group**: [@carbon/layout](#carbonlayout)
1542
- - **Type**: `Number`
1543
- - **Aliased**:
1544
- - `spacing-08`
1545
-
1546
- ### ✅carbon--spacing-09 [variable]
1547
-
1548
- <details>
1549
- <summary>Source code</summary>
1550
-
1551
- ```scss
1552
- $carbon--spacing-09: 3rem;
1553
- ```
1554
-
1555
- </details>
1556
-
1557
- - **Group**: [@carbon/layout](#carbonlayout)
1558
- - **Type**: `Number`
1559
- - **Aliased**:
1560
- - `spacing-09`
1561
-
1562
- ### ✅carbon--spacing-10 [variable]
1563
-
1564
- <details>
1565
- <summary>Source code</summary>
1566
-
1567
- ```scss
1568
- $carbon--spacing-10: 4rem;
1569
- ```
1570
-
1571
- </details>
1572
-
1573
- - **Group**: [@carbon/layout](#carbonlayout)
1574
- - **Type**: `Number`
1575
- - **Aliased**:
1576
- - `spacing-10`
1577
-
1578
- ### ✅carbon--spacing-11 [variable]
1579
-
1580
- <details>
1581
- <summary>Source code</summary>
1582
-
1583
- ```scss
1584
- $carbon--spacing-11: 5rem;
1585
- ```
1586
-
1587
- </details>
1588
-
1589
- - **Group**: [@carbon/layout](#carbonlayout)
1590
- - **Type**: `Number`
1591
- - **Aliased**:
1592
- - `spacing-11`
1593
-
1594
- ### ✅carbon--spacing-12 [variable]
1595
-
1596
- <details>
1597
- <summary>Source code</summary>
1598
-
1599
- ```scss
1600
- $carbon--spacing-12: 6rem;
1601
- ```
1602
-
1603
- </details>
1604
-
1605
- - **Group**: [@carbon/layout](#carbonlayout)
1606
- - **Type**: `Number`
1607
- - **Aliased**:
1608
- - `spacing-12`
1609
-
1610
- ### ✅carbon--spacing [variable]
1611
-
1612
- <details>
1613
- <summary>Source code</summary>
1614
-
1615
- ```scss
1616
- $carbon--spacing: (
1617
- $carbon--spacing-01,
1618
- $carbon--spacing-02,
1619
- $carbon--spacing-03,
1620
- $carbon--spacing-04,
1621
- $carbon--spacing-05,
1622
- $carbon--spacing-06,
1623
- $carbon--spacing-07,
1624
- $carbon--spacing-08,
1625
- $carbon--spacing-09,
1626
- $carbon--spacing-10,
1627
- $carbon--spacing-11,
1628
- $carbon--spacing-12
1629
- );
1630
- ```
1631
-
1632
- </details>
1633
-
1634
- - **Group**: [@carbon/layout](#carbonlayout)
1635
- - **Type**: `List`
1636
-
1637
- ### ✅spacing-01 [variable]
1638
-
1639
- <details>
1640
- <summary>Source code</summary>
1641
-
1642
- ```scss
1643
- $spacing-01: $carbon--spacing-01;
1644
- ```
1645
-
1646
- </details>
1647
-
1648
- - **Group**: [@carbon/layout](#carbonlayout)
1649
- - **Type**: `Number`
1650
- - **Alias**: `carbon--spacing-01`
1651
-
1652
- ### ✅spacing-02 [variable]
1653
-
1654
- <details>
1655
- <summary>Source code</summary>
1656
-
1657
- ```scss
1658
- $spacing-02: $carbon--spacing-02;
1659
- ```
1660
-
1661
- </details>
1662
-
1663
- - **Group**: [@carbon/layout](#carbonlayout)
1664
- - **Type**: `Number`
1665
- - **Alias**: `carbon--spacing-02`
1666
-
1667
- ### ✅spacing-03 [variable]
1668
-
1669
- <details>
1670
- <summary>Source code</summary>
1671
-
1672
- ```scss
1673
- $spacing-03: $carbon--spacing-03;
1674
- ```
1675
-
1676
- </details>
1677
-
1678
- - **Group**: [@carbon/layout](#carbonlayout)
1679
- - **Type**: `Number`
1680
- - **Alias**: `carbon--spacing-03`
1681
-
1682
- ### ✅spacing-04 [variable]
1683
-
1684
- <details>
1685
- <summary>Source code</summary>
1686
-
1687
- ```scss
1688
- $spacing-04: $carbon--spacing-04;
1689
- ```
1690
-
1691
- </details>
1692
-
1693
- - **Group**: [@carbon/layout](#carbonlayout)
1694
- - **Type**: `Number`
1695
- - **Alias**: `carbon--spacing-04`
1696
-
1697
- ### ✅spacing-05 [variable]
1698
-
1699
- <details>
1700
- <summary>Source code</summary>
1701
-
1702
- ```scss
1703
- $spacing-05: $carbon--spacing-05;
1704
- ```
1705
-
1706
- </details>
1707
-
1708
- - **Group**: [@carbon/layout](#carbonlayout)
1709
- - **Type**: `Number`
1710
- - **Alias**: `carbon--spacing-05`
1711
-
1712
- ### ✅spacing-06 [variable]
1713
-
1714
- <details>
1715
- <summary>Source code</summary>
1716
-
1717
- ```scss
1718
- $spacing-06: $carbon--spacing-06;
1719
- ```
1720
-
1721
- </details>
1722
-
1723
- - **Group**: [@carbon/layout](#carbonlayout)
1724
- - **Type**: `Number`
1725
- - **Alias**: `carbon--spacing-06`
1726
-
1727
- ### ✅spacing-07 [variable]
1728
-
1729
- <details>
1730
- <summary>Source code</summary>
1731
-
1732
- ```scss
1733
- $spacing-07: $carbon--spacing-07;
1734
- ```
1735
-
1736
- </details>
1737
-
1738
- - **Group**: [@carbon/layout](#carbonlayout)
1739
- - **Type**: `Number`
1740
- - **Alias**: `carbon--spacing-07`
1741
-
1742
- ### ✅spacing-08 [variable]
1743
-
1744
- <details>
1745
- <summary>Source code</summary>
1746
-
1747
- ```scss
1748
- $spacing-08: $carbon--spacing-08;
1749
- ```
1750
-
1751
- </details>
1752
-
1753
- - **Group**: [@carbon/layout](#carbonlayout)
1754
- - **Type**: `Number`
1755
- - **Alias**: `carbon--spacing-08`
1756
-
1757
- ### ✅spacing-09 [variable]
1758
-
1759
- <details>
1760
- <summary>Source code</summary>
1761
-
1762
- ```scss
1763
- $spacing-09: $carbon--spacing-09;
1764
- ```
1765
-
1766
- </details>
1767
-
1768
- - **Group**: [@carbon/layout](#carbonlayout)
1769
- - **Type**: `Number`
1770
- - **Alias**: `carbon--spacing-09`
1771
-
1772
- ### ✅spacing-10 [variable]
1773
-
1774
- <details>
1775
- <summary>Source code</summary>
1776
-
1777
- ```scss
1778
- $spacing-10: $carbon--spacing-10;
1779
- ```
1780
-
1781
- </details>
1782
-
1783
- - **Group**: [@carbon/layout](#carbonlayout)
1784
- - **Type**: `Number`
1785
- - **Alias**: `carbon--spacing-10`
1786
-
1787
- ### ✅spacing-11 [variable]
1788
-
1789
- <details>
1790
- <summary>Source code</summary>
1791
-
1792
- ```scss
1793
- $spacing-11: $carbon--spacing-11;
1794
- ```
1795
-
1796
- </details>
1797
-
1798
- - **Group**: [@carbon/layout](#carbonlayout)
1799
- - **Type**: `Number`
1800
- - **Alias**: `carbon--spacing-11`
1801
-
1802
- ### ✅spacing-12 [variable]
1803
-
1804
- <details>
1805
- <summary>Source code</summary>
1806
-
1807
- ```scss
1808
- $spacing-12: $carbon--spacing-12;
1809
- ```
1810
-
1811
- </details>
1812
-
1813
- - **Group**: [@carbon/layout](#carbonlayout)
1814
- - **Type**: `Number`
1815
- - **Alias**: `carbon--spacing-12`
1816
-
1817
- ### ✅map-deep-get [function]
1818
-
1819
- Map deep get
1820
-
1821
- <details>
1822
- <summary>Source code</summary>
1823
-
1824
- ```scss
1825
- @function map-deep-get($map, $keys) {
1826
- @each $key in $keys {
1827
- $map: map-get($map, $key);
1828
- }
1829
- @return $map;
1830
- }
1831
- ```
1832
-
1833
- </details>
1834
-
1835
- - **Parameters**:
1836
-
1837
- | Name | Description | Type | Default value |
1838
- | ------- | ----------- | --------- | ------------- |
1839
- | `$map` | Map | `Map` | — |
1840
- | `$keys` | Key chain | `Arglist` | — |
1841
-
1842
- - **Group**: [@carbon/layout](#carbonlayout)
1843
- - **Returns**: `*` Desired value
1844
-
1845
- ### ✅carbon--key-by-index [function]
1846
-
1847
- Provide a map and index, and get back the relevant key value
1848
-
1849
- <details>
1850
- <summary>Source code</summary>
1851
-
1852
- ```scss
1853
- @function carbon--key-by-index($map, $index) {
1854
- $keys: map-keys($map);
1855
- @return nth($keys, $index);
1856
- }
1857
- ```
1858
-
1859
- </details>
1860
-
1861
- - **Parameters**:
1862
-
1863
- | Name | Description | Type | Default value |
1864
- | -------- | ----------- | --------- | ------------- |
1865
- | `$map` | Map | `Map` | — |
1866
- | `$index` | Key chain | `Integer` | — |
1867
-
1868
- - **Group**: [@carbon/layout](#carbonlayout)
1869
- - **Returns**: `String` Desired value
1870
- - **Used by**:
1871
- - [carbon--largest-breakpoint-name [function]](#carbon--largest-breakpoint-name-function)
1872
- - [last-map-item [function]](#last-map-item-function)
1873
-
1874
- ### ✅last-map-item [function]
1875
-
1876
- Pass in a map, and get the last one in the list back
1877
-
1878
- <details>
1879
- <summary>Source code</summary>
1880
-
1881
- ```scss
1882
- @function last-map-item($map) {
1883
- $total-length: length($map);
1884
- @return map-get($map, carbon--key-by-index($map, $total-length));
1885
- }
1886
- ```
1887
-
1888
- </details>
1889
-
1890
- - **Parameters**:
1891
-
1892
- | Name | Description | Type | Default value |
1893
- | ------ | ----------- | ----- | ------------- |
1894
- | `$map` | Map | `Map` | — |
1895
-
1896
- - **Group**: [@carbon/layout](#carbonlayout)
1897
- - **Returns**: `*` Desired value
1898
- - **Requires**:
1899
- - [carbon--key-by-index [function]](#carbon--key-by-index-function)