@cds/core 6.0.0-next.1 → 6.0.0-next.2

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 (305) hide show
  1. package/accordion/accordion-content.element.scss.js +1 -1
  2. package/accordion/accordion-header.element.d.ts +2 -0
  3. package/accordion/accordion-header.element.js +1 -1
  4. package/accordion/accordion-header.element.js.map +1 -1
  5. package/accordion/accordion-header.element.scss.js +1 -1
  6. package/accordion/accordion-panel.element.d.ts +2 -2
  7. package/accordion/accordion-panel.element.js +1 -1
  8. package/accordion/accordion-panel.element.js.map +1 -1
  9. package/accordion/accordion-panel.element.scss.js +1 -1
  10. package/accordion/accordion.element.scss.js +1 -1
  11. package/accordion/register.d.ts +1 -0
  12. package/accordion/register.js +1 -1
  13. package/accordion/register.js.map +1 -1
  14. package/alert/alert-actions.element.js +1 -1
  15. package/alert/alert-actions.element.scss.js +1 -1
  16. package/alert/alert-group.element.js +1 -1
  17. package/alert/alert-group.element.scss.js +1 -1
  18. package/alert/alert.element.js +1 -1
  19. package/alert/alert.element.js.map +1 -1
  20. package/alert/alert.element.scss.js +1 -1
  21. package/badge/badge.element.scss.js +1 -1
  22. package/breadcrumb/breadcrumb.element.js +1 -1
  23. package/breadcrumb/breadcrumb.element.scss.js +1 -1
  24. package/button/button.element.d.ts +1 -1
  25. package/button/button.element.js +1 -1
  26. package/button/button.element.scss.js +1 -1
  27. package/button/icon-button.element.d.ts +1 -1
  28. package/button/icon-button.element.js +1 -1
  29. package/button/icon-button.element.js.map +1 -1
  30. package/button/index.d.ts +0 -1
  31. package/button/index.js +1 -1
  32. package/button/register.d.ts +0 -2
  33. package/button/register.js +1 -1
  34. package/button/register.js.map +1 -1
  35. package/button-action/button-action.element.d.ts +38 -0
  36. package/button-action/button-action.element.js +2 -0
  37. package/button-action/button-action.element.js.map +1 -0
  38. package/button-action/button-action.element.scss.js +2 -0
  39. package/button-action/button-action.element.scss.js.map +1 -0
  40. package/button-action/index.d.ts +1 -0
  41. package/button-action/index.js +2 -0
  42. package/button-action/index.js.map +1 -0
  43. package/button-action/register.d.ts +7 -0
  44. package/button-action/register.js +2 -0
  45. package/button-action/register.js.map +1 -0
  46. package/button-expand/button-expand.element.d.ts +25 -0
  47. package/button-expand/button-expand.element.js +2 -0
  48. package/button-expand/button-expand.element.js.map +1 -0
  49. package/button-expand/button-expand.element.scss.js +2 -0
  50. package/button-expand/button-expand.element.scss.js.map +1 -0
  51. package/button-expand/index.d.ts +1 -0
  52. package/button-expand/index.js +2 -0
  53. package/button-expand/index.js.map +1 -0
  54. package/button-expand/register.d.ts +7 -0
  55. package/button-expand/register.js +2 -0
  56. package/button-expand/register.js.map +1 -0
  57. package/button-handle/button-handle.element.d.ts +19 -0
  58. package/button-handle/button-handle.element.js +2 -0
  59. package/button-handle/button-handle.element.js.map +1 -0
  60. package/button-handle/button-handle.element.scss.js +2 -0
  61. package/button-handle/button-handle.element.scss.js.map +1 -0
  62. package/button-handle/index.d.ts +1 -0
  63. package/button-handle/index.js +2 -0
  64. package/button-handle/index.js.map +1 -0
  65. package/button-handle/register.d.ts +7 -0
  66. package/button-handle/register.js +2 -0
  67. package/button-handle/register.js.map +1 -0
  68. package/{button/inline-button.element.d.ts → button-inline/button-inline.element.d.ts} +10 -3
  69. package/button-inline/button-inline.element.js +2 -0
  70. package/button-inline/button-inline.element.js.map +1 -0
  71. package/{button/inline-button.element.scss.js → button-inline/button-inline.element.scss.js} +2 -2
  72. package/button-inline/button-inline.element.scss.js.map +1 -0
  73. package/button-inline/index.d.ts +1 -0
  74. package/button-inline/index.js +2 -0
  75. package/button-inline/index.js.map +1 -0
  76. package/button-inline/register.d.ts +11 -0
  77. package/button-inline/register.js +2 -0
  78. package/button-inline/register.js.map +1 -0
  79. package/button-sort/button-sort.element.d.ts +23 -0
  80. package/button-sort/button-sort.element.js +2 -0
  81. package/button-sort/button-sort.element.js.map +1 -0
  82. package/button-sort/button-sort.element.scss.js +2 -0
  83. package/button-sort/button-sort.element.scss.js.map +1 -0
  84. package/button-sort/index.d.ts +1 -0
  85. package/button-sort/index.js +2 -0
  86. package/button-sort/index.js.map +1 -0
  87. package/button-sort/register.d.ts +7 -0
  88. package/button-sort/register.js +2 -0
  89. package/button-sort/register.js.map +1 -0
  90. package/button-sort/utils.d.ts +1 -0
  91. package/button-sort/utils.js +2 -0
  92. package/button-sort/utils.js.map +1 -0
  93. package/card/card.element.d.ts +3 -3
  94. package/card/card.element.scss.js +1 -1
  95. package/checkbox/checkbox.element.scss.js +1 -1
  96. package/custom-elements.json +5239 -4678
  97. package/custom-elements.legacy.json +321 -136
  98. package/datalist/datalist.element.d.ts +0 -1
  99. package/datalist/datalist.element.js +1 -1
  100. package/datalist/datalist.element.js.map +1 -1
  101. package/datalist/register.d.ts +1 -1
  102. package/datalist/register.js +1 -1
  103. package/datalist/register.js.map +1 -1
  104. package/date/date.element.d.ts +0 -1
  105. package/date/date.element.js +1 -1
  106. package/date/date.element.js.map +1 -1
  107. package/date/date.global.scss.js +1 -1
  108. package/date/register.d.ts +1 -0
  109. package/date/register.js +1 -1
  110. package/date/register.js.map +1 -1
  111. package/divider/divider.element.scss.js +1 -1
  112. package/file/file.element.d.ts +0 -1
  113. package/file/file.element.js +1 -1
  114. package/file/file.element.js.map +1 -1
  115. package/file/file.element.scss.js +1 -1
  116. package/file/register.d.ts +1 -0
  117. package/file/register.js +1 -1
  118. package/file/register.js.map +1 -1
  119. package/forms/control/control.element.js +2 -2
  120. package/forms/control/control.element.js.map +1 -1
  121. package/forms/control/control.element.scss.js +1 -1
  122. package/forms/control-action/control-action.element.d.ts +6 -15
  123. package/forms/control-action/control-action.element.js +1 -1
  124. package/forms/control-action/control-action.element.js.map +1 -1
  125. package/forms/control-group/control-group.element.js +1 -1
  126. package/forms/control-group/control-group.element.scss.js +1 -1
  127. package/forms/control-inline/control-inline.element.js +1 -1
  128. package/forms/control-inline/control-inline.element.scss.js +1 -1
  129. package/forms/control-label/control-label.element.js +1 -1
  130. package/forms/control-label/control-label.element.scss.js +1 -1
  131. package/forms/control-message/control-message.element.scss.js +1 -1
  132. package/forms/form-group/form-group.element.js +1 -1
  133. package/forms/register.d.ts +1 -0
  134. package/forms/register.js +1 -1
  135. package/forms/register.js.map +1 -1
  136. package/forms/utils/utils.js +1 -1
  137. package/forms/utils/utils.js.map +1 -1
  138. package/global.css +1851 -1024
  139. package/global.min.css +1 -1
  140. package/icon/collections/core.d.ts +4 -0
  141. package/icon/collections/core.js +1 -1
  142. package/icon/collections/core.js.map +1 -1
  143. package/icon/icon.element.scss.js +1 -1
  144. package/icon/shapes/detail-collapse.d.ts +3 -0
  145. package/icon/shapes/detail-collapse.js +2 -0
  146. package/icon/shapes/detail-collapse.js.map +1 -0
  147. package/icon/shapes/detail-expand.d.ts +3 -0
  148. package/icon/shapes/detail-expand.js +2 -0
  149. package/icon/shapes/detail-expand.js.map +1 -0
  150. package/input/input-group.element.scss.js +1 -1
  151. package/input/input.element.scss.js +1 -1
  152. package/internal/base/base.element.scss.js +1 -1
  153. package/internal/base/button.base.d.ts +4 -37
  154. package/internal/base/button.base.js +1 -1
  155. package/internal/base/button.base.js.map +1 -1
  156. package/internal/controllers/active.controller.d.ts +20 -0
  157. package/internal/controllers/active.controller.js +2 -0
  158. package/internal/controllers/active.controller.js.map +1 -0
  159. package/internal/controllers/aria-button.controller.d.ts +15 -0
  160. package/internal/controllers/aria-button.controller.js +2 -0
  161. package/internal/controllers/aria-button.controller.js.map +1 -0
  162. package/internal/controllers/aria-disabled.controller.d.ts +14 -0
  163. package/internal/controllers/aria-disabled.controller.js +2 -0
  164. package/internal/controllers/aria-disabled.controller.js.map +1 -0
  165. package/internal/controllers/aria-popup-trigger.controller.d.ts +11 -3
  166. package/internal/controllers/aria-popup-trigger.controller.js +1 -1
  167. package/internal/controllers/aria-popup-trigger.controller.js.map +1 -1
  168. package/internal/controllers/aria-pressed.controller.d.ts +15 -0
  169. package/internal/controllers/aria-pressed.controller.js +2 -0
  170. package/internal/controllers/aria-pressed.controller.js.map +1 -0
  171. package/internal/controllers/aria-selected.controller.d.ts +13 -0
  172. package/internal/controllers/aria-selected.controller.js +2 -0
  173. package/internal/controllers/aria-selected.controller.js.map +1 -0
  174. package/internal/controllers/button-anchor.controller.d.ts +22 -0
  175. package/internal/controllers/button-anchor.controller.js +2 -0
  176. package/internal/controllers/button-anchor.controller.js.map +1 -0
  177. package/internal/controllers/button-submit.controller.d.ts +27 -0
  178. package/internal/controllers/button-submit.controller.js +2 -0
  179. package/internal/controllers/button-submit.controller.js.map +1 -0
  180. package/internal/decorators/animate.d.ts +2 -2
  181. package/internal/decorators/animate.js +1 -1
  182. package/internal/decorators/animate.js.map +1 -1
  183. package/internal/decorators/property.js +1 -1
  184. package/internal/decorators/property.js.map +1 -1
  185. package/internal/index.d.ts +8 -1
  186. package/internal/index.js +1 -1
  187. package/internal/index.js.map +1 -1
  188. package/internal/motion/interfaces.d.ts +4 -5
  189. package/internal/services/global.service.d.ts +1 -1
  190. package/internal/services/i18n.service.d.ts +7 -0
  191. package/internal/services/i18n.service.js +1 -1
  192. package/internal/services/i18n.service.js.map +1 -1
  193. package/internal/utils/global.d.ts +2 -1
  194. package/internal/utils/global.js +1 -1
  195. package/internal/utils/lit.d.ts +5 -1
  196. package/internal/utils/lit.js +1 -1
  197. package/internal/utils/lit.js.map +1 -1
  198. package/internal-components/close-button/close-button.element.d.ts +5 -12
  199. package/internal-components/close-button/close-button.element.js +1 -1
  200. package/internal-components/close-button/close-button.element.js.map +1 -1
  201. package/internal-components/close-button/register.js +1 -1
  202. package/internal-components/close-button/register.js.map +1 -1
  203. package/internal-components/overlay/overlay.element.d.ts +2 -2
  204. package/internal-components/panel/panel.element.scss.js +1 -1
  205. package/internal-components/popup/popup.element.d.ts +2 -2
  206. package/internal-components/popup/popup.element.scss.js +1 -1
  207. package/internal-components/visual-checkbox/visual-checkbox.element.scss.js +1 -1
  208. package/list/list.css +6 -6
  209. package/list/list.min.css +1 -1
  210. package/modal/modal-actions.element.js +1 -1
  211. package/modal/modal.element.d.ts +2 -2
  212. package/modal/modal.element.js +1 -1
  213. package/modal/modal.element.scss.js +1 -1
  214. package/navigation/navigation-group.element.d.ts +2 -2
  215. package/navigation/navigation-group.element.scss.js +1 -5
  216. package/navigation/navigation-group.element.scss.js.map +1 -1
  217. package/navigation/navigation-item.element.js +1 -1
  218. package/navigation/navigation-item.element.scss.js +1 -5
  219. package/navigation/navigation-item.element.scss.js.map +1 -1
  220. package/navigation/navigation-start.element.js +1 -1
  221. package/navigation/navigation.element.d.ts +2 -2
  222. package/navigation/navigation.element.scss.js +1 -1
  223. package/package.json +23 -1
  224. package/pagination/pagination-button.element.d.ts +7 -10
  225. package/pagination/pagination-button.element.js +1 -1
  226. package/pagination/pagination-button.element.js.map +1 -1
  227. package/pagination/pagination.element.js +1 -1
  228. package/pagination/pagination.element.scss.js +1 -1
  229. package/pagination/utils.d.ts +5 -0
  230. package/pagination/utils.js +2 -0
  231. package/pagination/utils.js.map +1 -0
  232. package/password/password.element.js +1 -1
  233. package/password/password.element.js.map +1 -1
  234. package/password/register.d.ts +1 -0
  235. package/password/register.js +1 -1
  236. package/password/register.js.map +1 -1
  237. package/progress-circle/progress-circle.element.scss.js +1 -1
  238. package/radio/radio.element.scss.js +1 -1
  239. package/range/range.element.scss.js +1 -1
  240. package/range/range.global.scss.js +1 -1
  241. package/search/register.d.ts +1 -0
  242. package/search/register.js +1 -1
  243. package/search/register.js.map +1 -1
  244. package/search/search.element.js +1 -1
  245. package/search/search.element.js.map +1 -1
  246. package/select/register.d.ts +1 -1
  247. package/select/register.js +1 -1
  248. package/select/register.js.map +1 -1
  249. package/select/select.element.js +1 -1
  250. package/select/select.element.js.map +1 -1
  251. package/select/select.element.scss.js +1 -1
  252. package/select/select.global.scss.js +1 -1
  253. package/selection-panels/checkbox/checkbox-panel.element.d.ts +10 -13
  254. package/selection-panels/checkbox/checkbox-panel.element.js.map +1 -1
  255. package/selection-panels/radio/radio-panel.element.d.ts +20 -15
  256. package/selection-panels/radio/radio-panel.element.js.map +1 -1
  257. package/selection-panels/shared/selection-panel.element.scss.js +1 -5
  258. package/selection-panels/shared/selection-panel.element.scss.js.map +1 -1
  259. package/styles/module.layout.css +1411 -655
  260. package/styles/module.layout.min.css +1 -1
  261. package/styles/module.tokens.css +71 -52
  262. package/styles/module.tokens.min.css +1 -1
  263. package/styles/module.typography.css +78 -26
  264. package/styles/module.typography.min.css +1 -1
  265. package/styles/shim.clr-ui.css +633 -0
  266. package/styles/shim.clr-ui.min.css +119 -0
  267. package/table/table.css +7 -7
  268. package/table/table.min.css +1 -1
  269. package/tag/tag.element.d.ts +2 -1
  270. package/tag/tag.element.js +1 -1
  271. package/tag/tag.element.js.map +1 -1
  272. package/tag/tag.element.scss.js +1 -1
  273. package/textarea/textarea.element.scss.js +1 -1
  274. package/time/register.d.ts +1 -0
  275. package/time/register.js +1 -1
  276. package/time/register.js.map +1 -1
  277. package/time/time.element.d.ts +0 -1
  278. package/time/time.element.js +1 -1
  279. package/time/time.element.js.map +1 -1
  280. package/toggle/toggle.element.scss.js +1 -1
  281. package/tokens/tokens.android.xml +30 -11
  282. package/tokens/tokens.d.ts +28 -9
  283. package/tokens/tokens.ios.swift +31 -12
  284. package/tokens/tokens.js +29 -10
  285. package/tokens/tokens.json +127 -26
  286. package/tokens/tokens.scss +87 -12
  287. package/tree-view/register.js +1 -1
  288. package/tree-view/register.js.map +1 -1
  289. package/tree-view/tree-item.element.d.ts +2 -2
  290. package/tree-view/tree-item.element.js +1 -1
  291. package/tree-view/tree-item.element.js.map +1 -1
  292. package/tree-view/tree-item.element.scss.js +1 -1
  293. package/button/icon-button.element.scss.js +0 -2
  294. package/button/icon-button.element.scss.js.map +0 -1
  295. package/button/inline-button.element.js +0 -2
  296. package/button/inline-button.element.js.map +0 -1
  297. package/button/inline-button.element.scss.js.map +0 -1
  298. package/forms/control-action/control-action.element.scss.js +0 -2
  299. package/forms/control-action/control-action.element.scss.js.map +0 -1
  300. package/internal-components/close-button/close-button.element.scss.js +0 -2
  301. package/internal-components/close-button/close-button.element.scss.js.map +0 -1
  302. package/pagination/pagination-button.element.scss.js +0 -2
  303. package/pagination/pagination-button.element.scss.js.map +0 -1
  304. package/search/search.element.scss.js +0 -2
  305. package/search/search.element.scss.js.map +0 -1
package/styles/module.tokens.css CHANGED
@@ -1,32 +1,40 @@
1
1
 
2
2
  :root {
3
- --cds-global-layout-space-xxs: calc((2 / var(--cds-global-base, 20)) * 1rem);
4
- --cds-global-layout-space-xs: calc((4 / var(--cds-global-base, 20)) * 1rem);
5
- --cds-global-layout-space-sm: calc((6 / var(--cds-global-base, 20)) * 1rem);
6
- --cds-global-layout-space-md: calc((12 / var(--cds-global-base, 20)) * 1rem);
7
- --cds-global-layout-space-lg: calc((24 / var(--cds-global-base, 20)) * 1rem);
8
- --cds-global-layout-space-xl: calc((48 / var(--cds-global-base, 20)) * 1rem);
9
- --cds-global-layout-space-xxl: calc((96 / var(--cds-global-base, 20)) * 1rem);
3
+ --cds-global-base: 20;
4
+ --cds-global-scale-space: 1;
5
+ --cds-global-scale-layout-space: 1;
6
+ --cds-global-scale-typography: 1;
10
7
  --cds-global-layout-grid-cols: 12;
11
8
  --cds-global-layout-width-xs: 576px;
12
9
  --cds-global-layout-width-sm: 768px;
13
10
  --cds-global-layout-width-md: 992px;
14
11
  --cds-global-layout-width-lg: 1200px;
15
12
  --cds-global-layout-width-xl: 1440px;
16
- --cds-global-space-0: calc((0 / var(--cds-global-base, 20)) * 1rem);
17
- --cds-global-space-1: calc((1 / var(--cds-global-base, 20)) * 1rem);
18
- --cds-global-space-2: calc((2 / var(--cds-global-base, 20)) * 1rem);
19
- --cds-global-space-3: calc((4 / var(--cds-global-base, 20)) * 1rem);
20
- --cds-global-space-4: calc((6 / var(--cds-global-base, 20)) * 1rem);
21
- --cds-global-space-5: calc((8 / var(--cds-global-base, 20)) * 1rem);
22
- --cds-global-space-6: calc((12 / var(--cds-global-base, 20)) * 1rem);
23
- --cds-global-space-7: calc((16 / var(--cds-global-base, 20)) * 1rem);
24
- --cds-global-space-8: calc((18 / var(--cds-global-base, 20)) * 1rem);
25
- --cds-global-space-9: calc((24 / var(--cds-global-base, 20)) * 1rem);
26
- --cds-global-space-10: calc((32 / var(--cds-global-base, 20)) * 1rem);
27
- --cds-global-space-11: calc((36 / var(--cds-global-base, 20)) * 1rem);
28
- --cds-global-space-12: calc((48 / var(--cds-global-base, 20)) * 1rem);
29
- --cds-global-space-13: calc((72 / var(--cds-global-base, 20)) * 1rem);
13
+ --cds-global-layout-space-xxxs: calc(2 * var(--cds-internal-scale-1));
14
+ --cds-global-layout-space-xxs: calc(4 * var(--cds-internal-scale-1));
15
+ --cds-global-layout-space-xs: calc(8 * var(--cds-internal-scale-1));
16
+ --cds-global-layout-space-sm: calc(12 * var(--cds-internal-scale-1));
17
+ --cds-global-layout-space-md: calc(16 * var(--cds-internal-scale-1));
18
+ --cds-global-layout-space-lg: calc(24 * var(--cds-internal-scale-1));
19
+ --cds-global-layout-space-xl: calc(32 * var(--cds-internal-scale-1));
20
+ --cds-global-layout-space-xxl: calc(48 * var(--cds-internal-scale-1));
21
+ --cds-global-layout-space-xxxl: calc(64 * var(--cds-internal-scale-1));
22
+ --cds-global-space-0: calc(0 * var(--cds-internal-scale-2));
23
+ --cds-global-space-1: calc(1 * var(--cds-internal-scale-2));
24
+ --cds-global-space-2: calc(2 * var(--cds-internal-scale-2));
25
+ --cds-global-space-3: calc(4 * var(--cds-internal-scale-2));
26
+ --cds-global-space-4: calc(6 * var(--cds-internal-scale-2));
27
+ --cds-global-space-5: calc(8 * var(--cds-internal-scale-2));
28
+ --cds-global-space-6: calc(12 * var(--cds-internal-scale-2));
29
+ --cds-global-space-7: calc(16 * var(--cds-internal-scale-2));
30
+ --cds-global-space-8: calc(18 * var(--cds-internal-scale-2));
31
+ --cds-global-space-9: calc(24 * var(--cds-internal-scale-2));
32
+ --cds-global-space-10: calc(32 * var(--cds-internal-scale-2));
33
+ --cds-global-space-11: calc(36 * var(--cds-internal-scale-2));
34
+ --cds-global-space-12: calc(48 * var(--cds-internal-scale-2));
35
+ --cds-global-space-13: calc(64 * var(--cds-internal-scale-2));
36
+ --cds-global-space-14: calc(72 * var(--cds-internal-scale-2));
37
+ --cds-global-space-15: calc(96 * var(--cds-internal-scale-2));
30
38
  --cds-global-color-black: hsl(0, 0%, 0%);
31
39
  --cds-global-color-white: hsl(0, 0%, 100%);
32
40
  --cds-global-color-green-50: hsl(93, 80%, 94%);
@@ -139,6 +147,17 @@
139
147
  --cds-global-color-yellow-800: hsl(40, 100%, 26%);
140
148
  --cds-global-color-yellow-900: hsl(40, 100%, 18%);
141
149
  --cds-global-color-yellow-1000: hsl(40, 100%, 13%);
150
+ --cds-global-color-lime-50: hsl(66, 100%, 94%);
151
+ --cds-global-color-lime-100: hsl(66, 95%, 83%);
152
+ --cds-global-color-lime-200: hsl(66, 85%, 70%);
153
+ --cds-global-color-lime-300: hsl(66, 80%, 58%);
154
+ --cds-global-color-lime-400: hsl(66, 80%, 48%);
155
+ --cds-global-color-lime-500: hsl(66, 90%, 41%);
156
+ --cds-global-color-lime-600: hsl(66, 90%, 36%);
157
+ --cds-global-color-lime-700: hsl(66, 100%, 28%);
158
+ --cds-global-color-lime-800: hsl(66, 100%, 22%);
159
+ --cds-global-color-lime-900: hsl(66, 100%, 12%);
160
+ --cds-global-color-lime-1000: hsl(66, 100%, 7%);
142
161
  --cds-global-color-tangerine-50: hsl(25, 100%, 95%);
143
162
  --cds-global-color-tangerine-100: hsl(25, 100%, 88%);
144
163
  --cds-global-color-tangerine-200: hsl(25, 94%, 78%);
@@ -261,18 +280,16 @@
261
280
  --cds-global-typography-font-weight-semibold: 600;
262
281
  --cds-global-typography-font-weight-bold: 600;
263
282
  --cds-global-typography-font-weight-extrabold: 600;
264
- --cds-global-typography-font-size-0: calc((10 / var(--cds-global-base, 20)) * 1rem);
265
- --cds-global-typography-font-size-1: calc((11 / var(--cds-global-base, 20)) * 1rem);
266
- --cds-global-typography-font-size-2: calc((12 / var(--cds-global-base, 20)) * 1rem);
267
- --cds-global-typography-font-size-3: calc((13 / var(--cds-global-base, 20)) * 1rem);
268
- --cds-global-typography-font-size-4: calc((14 / var(--cds-global-base, 20)) * 1rem);
269
- --cds-global-typography-font-size-5: calc((16 / var(--cds-global-base, 20)) * 1rem);
270
- --cds-global-typography-font-size-6: calc((20 / var(--cds-global-base, 20)) * 1rem);
271
- --cds-global-typography-font-size-7: calc((24 / var(--cds-global-base, 20)) * 1rem);
272
- --cds-global-typography-font-size-8: calc((32 / var(--cds-global-base, 20)) * 1rem);
273
- --cds-global-typography-font-size-9: calc((40 / var(--cds-global-base, 20)) * 1rem);
274
- --cds-global-typography-base-font-size: 125%;
275
- --cds-global-typography-base-font-size-px: calc((20 / var(--cds-global-base, 20)) * 1rem);
283
+ --cds-global-typography-font-size-0: calc(10 * var(--cds-internal-scale-3));
284
+ --cds-global-typography-font-size-1: calc(11 * var(--cds-internal-scale-3));
285
+ --cds-global-typography-font-size-2: calc(12 * var(--cds-internal-scale-3));
286
+ --cds-global-typography-font-size-3: calc(13 * var(--cds-internal-scale-3));
287
+ --cds-global-typography-font-size-4: calc(14 * var(--cds-internal-scale-3));
288
+ --cds-global-typography-font-size-5: calc(16 * var(--cds-internal-scale-3));
289
+ --cds-global-typography-font-size-6: calc(20 * var(--cds-internal-scale-3));
290
+ --cds-global-typography-font-size-7: calc(24 * var(--cds-internal-scale-3));
291
+ --cds-global-typography-font-size-8: calc(32 * var(--cds-internal-scale-3));
292
+ --cds-global-typography-font-size-9: calc(40 * var(--cds-internal-scale-3));
276
293
  --cds-global-typography-font-family: 'Clarity City', 'Avenir Next', sans-serif;
277
294
  --cds-global-typography-header-font-family: 'Clarity City', 'Avenir Next', sans-serif;
278
295
  --cds-global-typography-monospace-font-family: ui-monospace, Consolas, Menlo, Monaco, monospace;
@@ -283,43 +300,43 @@
283
300
  --cds-global-typography-link-color-hover: var(--cds-global-color-blue-900);
284
301
  --cds-global-typography-link-color-visited: var(--cds-global-color-lavender-600);
285
302
  --cds-global-typography-link-color-visited-hover: var(--cds-global-color-lavender-700);
286
- --cds-global-typography-body-font-size: calc((14 / var(--cds-global-base, 20)) * 1rem);
303
+ --cds-global-typography-body-font-size: calc(14 * var(--cds-internal-scale-3));
287
304
  --cds-global-typography-body-line-height: 1.42857em;
288
305
  --cds-global-typography-body-letter-spacing: -0.014286em;
289
306
  --cds-global-typography-body-font-weight: 400;
290
- --cds-global-typography-display-font-size: calc((40 / var(--cds-global-base, 20)) * 1rem);
307
+ --cds-global-typography-display-font-size: calc(40 * var(--cds-internal-scale-3));
291
308
  --cds-global-typography-display-line-height: 1.1em;
292
309
  --cds-global-typography-display-letter-spacing: -0.0125em;
293
310
  --cds-global-typography-display-font-weight: 400;
294
- --cds-global-typography-heading-font-size: calc((32 / var(--cds-global-base, 20)) * 1rem);
311
+ --cds-global-typography-heading-font-size: calc(32 * var(--cds-internal-scale-3));
295
312
  --cds-global-typography-heading-line-height: 1.125em;
296
313
  --cds-global-typography-heading-letter-spacing: -0.0125em;
297
314
  --cds-global-typography-heading-font-weight: 400;
298
- --cds-global-typography-title-font-size: calc((24 / var(--cds-global-base, 20)) * 1rem);
315
+ --cds-global-typography-title-font-size: calc(24 * var(--cds-internal-scale-3));
299
316
  --cds-global-typography-title-line-height: 1.16667em;
300
317
  --cds-global-typography-title-letter-spacing: -0.008333em;
301
318
  --cds-global-typography-title-font-weight: 400;
302
- --cds-global-typography-section-font-size: calc((20 / var(--cds-global-base, 20)) * 1rem);
319
+ --cds-global-typography-section-font-size: calc(20 * var(--cds-internal-scale-3));
303
320
  --cds-global-typography-section-line-height: 1.2em;
304
321
  --cds-global-typography-section-letter-spacing: -0.01em;
305
322
  --cds-global-typography-section-font-weight: 400;
306
- --cds-global-typography-subsection-font-size: calc((16 / var(--cds-global-base, 20)) * 1rem);
323
+ --cds-global-typography-subsection-font-size: calc(16 * var(--cds-internal-scale-3));
307
324
  --cds-global-typography-subsection-line-height: 1.25em;
308
325
  --cds-global-typography-subsection-letter-spacing: -0.0125em;
309
326
  --cds-global-typography-subsection-font-weight: 400;
310
- --cds-global-typography-message-font-size: calc((16 / var(--cds-global-base, 20)) * 1rem);
327
+ --cds-global-typography-message-font-size: calc(16 * var(--cds-internal-scale-3));
311
328
  --cds-global-typography-message-line-height: 1.25em;
312
329
  --cds-global-typography-message-letter-spacing: -0.0125em;
313
- --cds-global-typography-message-font-weight: calc((400 / var(--cds-global-base, 20)) * 1rem);
314
- --cds-global-typography-secondary-font-size: calc((13 / var(--cds-global-base, 20)) * 1rem);
330
+ --cds-global-typography-message-font-weight: calc(400 * (1rem / var(--cds-global-base)));
331
+ --cds-global-typography-secondary-font-size: calc(13 * var(--cds-internal-scale-3));
315
332
  --cds-global-typography-secondary-line-height: 1.23077em;
316
333
  --cds-global-typography-secondary-letter-spacing: -0.007692em;
317
334
  --cds-global-typography-secondary-font-weight: 400;
318
- --cds-global-typography-caption-font-size: calc((11 / var(--cds-global-base, 20)) * 1rem);
335
+ --cds-global-typography-caption-font-size: calc(11 * var(--cds-internal-scale-3));
319
336
  --cds-global-typography-caption-line-height: 1.454545em;
320
337
  --cds-global-typography-caption-letter-spacing: 0.018182em;
321
338
  --cds-global-typography-caption-font-weight: 400;
322
- --cds-global-typography-smallcaption-font-size: calc((10 / var(--cds-global-base, 20)) * 1rem);
339
+ --cds-global-typography-smallcaption-font-size: calc(10 * var(--cds-internal-scale-3));
323
340
  --cds-global-typography-smallcaption-line-height: 1.2em;
324
341
  --cds-global-typography-smallcaption-letter-spacing: 0.05em;
325
342
  --cds-global-typography-smallcaption-font-weight: 500;
@@ -335,14 +352,13 @@
335
352
  --cds-global-animation-easing-primary: cubic-bezier(0,.99,0,.99);
336
353
  --cds-global-animation-easing-secondary: cubic-bezier(0, 1.5, 0.5, 1);
337
354
  --cds-global-animation-easing-loop: cubic-bezier(0.17, 0.4, 0.8, 0.79);
338
- --cds-global-base: 20;
339
- --cds-alias-object-border-radius-100: calc((4 / var(--cds-global-base, 20)) * 1rem);
340
- --cds-alias-object-border-radius-200: calc((12 / var(--cds-global-base, 20)) * 1rem);
355
+ --cds-alias-object-border-radius-100: calc(4 * (1rem / var(--cds-global-base)));
356
+ --cds-alias-object-border-radius-200: calc(12 * (1rem / var(--cds-global-base)));
341
357
  --cds-alias-object-border-radius-300: 50%;
342
- --cds-alias-object-border-width-100: calc((1 / var(--cds-global-base, 20)) * 1rem);
343
- --cds-alias-object-border-width-200: calc((2 / var(--cds-global-base, 20)) * 1rem);
344
- --cds-alias-object-border-width-300: calc((3 / var(--cds-global-base, 20)) * 1rem);
345
- --cds-alias-object-border-width-400: calc((4 / var(--cds-global-base, 20)) * 1rem);
358
+ --cds-alias-object-border-width-100: calc(1 * (1rem / var(--cds-global-base)));
359
+ --cds-alias-object-border-width-200: calc(2 * (1rem / var(--cds-global-base)));
360
+ --cds-alias-object-border-width-300: calc(3 * (1rem / var(--cds-global-base)));
361
+ --cds-alias-object-border-width-400: calc(4 * (1rem / var(--cds-global-base)));
346
362
  --cds-alias-object-border-color: var(--cds-global-color-construction-200);
347
363
  --cds-alias-object-border-color-tint: var(--cds-global-color-construction-100);
348
364
  --cds-alias-object-border-color-shade: var(--cds-global-color-construction-300);
@@ -356,7 +372,7 @@
356
372
  --cds-alias-object-interaction-outline: Highlight solid 2px;
357
373
  --cds-alias-object-interaction-outline-webkit: 5px auto -webkit-focus-ring-color;
358
374
  --cds-alias-object-interaction-outline-offset: 1px;
359
- --cds-alias-object-interaction-touch-target: calc((36 / var(--cds-global-base, 20)) * 1rem);
375
+ --cds-alias-object-interaction-touch-target: calc(36 * (1rem / var(--cds-global-base)));
360
376
  --cds-alias-object-interaction-border-color: var(--cds-global-color-construction-500);
361
377
  --cds-alias-object-interaction-background: var(--cds-global-color-white);
362
378
  --cds-alias-object-interaction-background-hover: var(--cds-global-color-blue-50);
@@ -399,4 +415,7 @@
399
415
  --cds-alias-status-alt: var(--cds-global-color-violet-700);
400
416
  --cds-alias-status-alt-tint: var(--cds-global-color-violet-600);
401
417
  --cds-alias-status-alt-shade: var(--cds-global-color-violet-900);
418
+ --cds-internal-scale-1: calc((1rem / var(--cds-global-base)) * var(--cds-global-scale-layout-space));
419
+ --cds-internal-scale-2: calc((1rem / var(--cds-global-base)) * var(--cds-global-scale-space));
420
+ --cds-internal-scale-3: calc((1rem / var(--cds-global-base)) * var(--cds-global-scale-typography));
402
421
  }
package/styles/module.tokens.min.css CHANGED
@@ -1 +1 @@
1
- :root{--cds-global-layout-space-xxs:calc((2 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-xs:calc((4 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-sm:calc((6 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-md:calc((12 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-lg:calc((24 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-xl:calc((48 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-xxl:calc((96 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-grid-cols:12;--cds-global-layout-width-xs:576px;--cds-global-layout-width-sm:768px;--cds-global-layout-width-md:992px;--cds-global-layout-width-lg:1200px;--cds-global-layout-width-xl:1440px;--cds-global-space-0:calc((0 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-1:calc((1 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-2:calc((2 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-3:calc((4 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-4:calc((6 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-5:calc((8 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-6:calc((12 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-7:calc((16 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-8:calc((18 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-9:calc((24 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-10:calc((32 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-11:calc((36 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-12:calc((48 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-13:calc((72 / var(--cds-global-base, 20)) * 1rem);--cds-global-color-black:hsl(0, 0%, 0%);--cds-global-color-white:hsl(0, 0%, 100%);--cds-global-color-green-50:hsl(93, 80%, 94%);--cds-global-color-green-100:hsl(93, 80%, 83%);--cds-global-color-green-200:hsl(93, 80%, 70%);--cds-global-color-green-300:hsl(93, 80%, 56%);--cds-global-color-green-400:hsl(93, 80%, 48%);--cds-global-color-green-500:hsl(93, 80%, 44%);--cds-global-color-green-600:hsl(93, 80%, 37%);--cds-global-color-green-700:hsl(93, 80%, 28%);--cds-global-color-green-800:hsl(93, 80%, 23%);--cds-global-color-green-900:hsl(93, 80%, 17%);--cds-global-color-green-1000:hsl(93, 80%, 12%);--cds-global-color-blue-50:hsl(198, 100%, 95%);--cds-global-color-blue-100:hsl(198, 100%, 87%);--cds-global-color-blue-200:hsl(198, 100%, 78%);--cds-global-color-blue-300:hsl(198, 100%, 70%);--cds-global-color-blue-400:hsl(198, 100%, 59%);--cds-global-color-blue-500:hsl(198, 100%, 48%);--cds-global-color-blue-600:hsl(198, 100%, 43%);--cds-global-color-blue-700:hsl(198, 100%, 34%);--cds-global-color-blue-800:hsl(198, 100%, 27%);--cds-global-color-blue-900:hsl(198, 100%, 21%);--cds-global-color-blue-1000:hsl(198, 100%, 15%);--cds-global-color-violet-50:hsl(282, 100%, 97%);--cds-global-color-violet-100:hsl(282, 80%, 91%);--cds-global-color-violet-200:hsl(282, 73%, 83%);--cds-global-color-violet-300:hsl(282, 66%, 74%);--cds-global-color-violet-400:hsl(282, 60%, 65%);--cds-global-color-violet-500:hsl(282, 60%, 57%);--cds-global-color-violet-600:hsl(282, 60%, 49%);--cds-global-color-violet-700:hsl(283, 80%, 36%);--cds-global-color-violet-800:hsl(282, 100%, 26%);--cds-global-color-violet-900:hsl(282, 100%, 19%);--cds-global-color-violet-1000:hsl(282, 100%, 14%);--cds-global-color-red-50:hsl(9, 100%, 97%);--cds-global-color-red-100:hsl(9, 100%, 94%);--cds-global-color-red-200:hsl(9, 100%, 88%);--cds-global-color-red-300:hsl(9, 100%, 79%);--cds-global-color-red-400:hsl(9, 100%, 71%);--cds-global-color-red-500:hsl(9, 100%, 65%);--cds-global-color-red-600:hsl(9, 100%, 60%);--cds-global-color-red-700:hsl(9, 100%, 44%);--cds-global-color-red-800:hsl(9, 100%, 38%);--cds-global-color-red-900:hsl(9, 100%, 28%);--cds-global-color-red-1000:hsl(9, 100%, 22%);--cds-global-color-ochre-50:hsl(41, 100%, 96%);--cds-global-color-ochre-100:hsl(41, 100%, 92%);--cds-global-color-ochre-200:hsl(41, 100%, 86%);--cds-global-color-ochre-300:hsl(41, 100%, 78%);--cds-global-color-ochre-400:hsl(41, 100%, 70%);--cds-global-color-ochre-500:hsl(40, 100%, 59%);--cds-global-color-ochre-600:hsl(39, 100%, 50%);--cds-global-color-ochre-700:hsl(38, 100%, 42%);--cds-global-color-ochre-800:hsl(37, 100%, 32%);--cds-global-color-ochre-900:hsl(36, 100%, 27%);--cds-global-color-ochre-1000:hsl(35, 100%, 19%);--cds-global-color-lavender-50:hsl(238, 100%, 96%);--cds-global-color-lavender-100:hsl(238, 58%, 88%);--cds-global-color-lavender-200:hsl(238, 53%, 79%);--cds-global-color-lavender-300:hsl(238, 52%, 70%);--cds-global-color-lavender-400:hsl(238, 58%, 64%);--cds-global-color-lavender-500:hsl(238, 59%, 58%);--cds-global-color-lavender-600:hsl(238, 60%, 52%);--cds-global-color-lavender-700:hsl(238, 69%, 45%);--cds-global-color-lavender-800:hsl(238, 100%, 32%);--cds-global-color-lavender-900:hsl(238, 100%, 22%);--cds-global-color-lavender-1000:hsl(238, 100%, 14%);--cds-global-color-azure-50:hsl(211, 100%, 95%);--cds-global-color-azure-100:hsl(211, 100%, 88%);--cds-global-color-azure-200:hsl(211, 100%, 81%);--cds-global-color-azure-300:hsl(211, 100%, 70%);--cds-global-color-azure-400:hsl(211, 100%, 62%);--cds-global-color-azure-500:hsl(211, 100%, 54%);--cds-global-color-azure-600:hsl(211, 100%, 46%);--cds-global-color-azure-700:hsl(211, 100%, 37%);--cds-global-color-azure-800:hsl(211, 100%, 26%);--cds-global-color-azure-900:hsl(211, 100%, 18%);--cds-global-color-azure-1000:hsl(211, 100%, 14%);--cds-global-color-aqua-50:hsl(184, 100%, 96%);--cds-global-color-aqua-100:hsl(184, 100%, 86%);--cds-global-color-aqua-200:hsl(184, 100%, 75%);--cds-global-color-aqua-300:hsl(184, 100%, 62%);--cds-global-color-aqua-400:hsl(184, 100%, 48%);--cds-global-color-aqua-500:hsl(184, 100%, 43%);--cds-global-color-aqua-600:hsl(184, 100%, 34%);--cds-global-color-aqua-700:hsl(184, 100%, 25%);--cds-global-color-aqua-800:hsl(184, 100%, 18%);--cds-global-color-aqua-900:hsl(184, 100%, 13%);--cds-global-color-aqua-1000:hsl(184, 100%, 10%);--cds-global-color-jade-50:hsl(160, 83%, 95%);--cds-global-color-jade-100:hsl(160, 82%, 88%);--cds-global-color-jade-200:hsl(160, 78%, 78%);--cds-global-color-jade-300:hsl(160, 69%, 65%);--cds-global-color-jade-400:hsl(160, 69%, 53%);--cds-global-color-jade-500:hsl(160, 64%, 45%);--cds-global-color-jade-600:hsl(160, 69%, 36%);--cds-global-color-jade-700:hsl(160, 64%, 30%);--cds-global-color-jade-800:hsl(160, 100%, 21%);--cds-global-color-jade-900:hsl(160, 70%, 21%);--cds-global-color-jade-1000:hsl(160, 69%, 19%);--cds-global-color-yellow-50:hsl(50, 100%, 95%);--cds-global-color-yellow-100:hsl(50, 100%, 84%);--cds-global-color-yellow-200:hsl(50, 100%, 73%);--cds-global-color-yellow-300:hsl(50, 100%, 57%);--cds-global-color-yellow-400:hsl(46, 100%, 52%);--cds-global-color-yellow-500:hsl(44, 100%, 47%);--cds-global-color-yellow-600:hsl(42, 100%, 42%);--cds-global-color-yellow-700:hsl(40, 100%, 35%);--cds-global-color-yellow-800:hsl(40, 100%, 26%);--cds-global-color-yellow-900:hsl(40, 100%, 18%);--cds-global-color-yellow-1000:hsl(40, 100%, 13%);--cds-global-color-tangerine-50:hsl(25, 100%, 95%);--cds-global-color-tangerine-100:hsl(25, 100%, 88%);--cds-global-color-tangerine-200:hsl(25, 94%, 78%);--cds-global-color-tangerine-300:hsl(25, 100%, 72%);--cds-global-color-tangerine-400:hsl(25, 100%, 62%);--cds-global-color-tangerine-500:hsl(25, 100%, 48%);--cds-global-color-tangerine-600:hsl(25, 100%, 41%);--cds-global-color-tangerine-700:hsl(25, 100%, 34%);--cds-global-color-tangerine-800:hsl(25, 100%, 25%);--cds-global-color-tangerine-900:hsl(25, 100%, 19%);--cds-global-color-tangerine-1000:hsl(25, 100%, 15%);--cds-global-color-magenta-50:hsl(345, 100%, 95%);--cds-global-color-magenta-100:hsl(345, 100%, 87%);--cds-global-color-magenta-200:hsl(345, 100%, 79%);--cds-global-color-magenta-300:hsl(345, 100%, 70%);--cds-global-color-magenta-400:hsl(345, 100%, 61%);--cds-global-color-magenta-500:hsl(345, 81%, 50%);--cds-global-color-magenta-600:hsl(345, 83%, 40%);--cds-global-color-magenta-700:hsl(345, 91%, 31%);--cds-global-color-magenta-800:hsl(345, 100%, 24%);--cds-global-color-magenta-900:hsl(345, 100%, 19%);--cds-global-color-magenta-1000:hsl(345, 100%, 15%);--cds-global-color-pink-50:hsl(324, 100%, 97%);--cds-global-color-pink-100:hsl(324, 95%, 91%);--cds-global-color-pink-200:hsl(324, 84%, 81%);--cds-global-color-pink-300:hsl(324, 78%, 70%);--cds-global-color-pink-400:hsl(324, 78%, 62%);--cds-global-color-pink-500:hsl(324, 64%, 51%);--cds-global-color-pink-600:hsl(324, 80%, 39%);--cds-global-color-pink-700:hsl(324, 100%, 30%);--cds-global-color-pink-800:hsl(324, 100%, 24%);--cds-global-color-pink-900:hsl(324, 100%, 18%);--cds-global-color-pink-1000:hsl(324, 100%, 15%);--cds-global-color-warm-gray-50:hsl(282, 3%, 97%);--cds-global-color-warm-gray-100:hsl(282, 3%, 92%);--cds-global-color-warm-gray-200:hsl(282, 3%, 84%);--cds-global-color-warm-gray-300:hsl(282, 3%, 74%);--cds-global-color-warm-gray-400:hsl(282, 3%, 63%);--cds-global-color-warm-gray-500:hsl(282, 3%, 54%);--cds-global-color-warm-gray-600:hsl(282, 3%, 43%);--cds-global-color-warm-gray-700:hsl(282, 3%, 35%);--cds-global-color-warm-gray-800:hsl(282, 3%, 28%);--cds-global-color-warm-gray-900:hsl(282, 3%, 20%);--cds-global-color-warm-gray-1000:hsl(282, 3%, 14%);--cds-global-color-slate-50:hsl(238, 20%, 96%);--cds-global-color-slate-100:hsl(238, 20%, 91%);--cds-global-color-slate-200:hsl(238, 20%, 82%);--cds-global-color-slate-300:hsl(238, 20%, 73%);--cds-global-color-slate-400:hsl(238, 20%, 63%);--cds-global-color-slate-500:hsl(238, 23%, 56%);--cds-global-color-slate-600:hsl(238, 24%, 49%);--cds-global-color-slate-700:hsl(238, 28%, 38%);--cds-global-color-slate-800:hsl(238, 28%, 29%);--cds-global-color-slate-900:hsl(238, 28%, 22%);--cds-global-color-slate-1000:hsl(238, 28%, 14%);--cds-global-color-ice-50:hsl(211, 100%, 97%);--cds-global-color-ice-100:hsl(211, 58%, 90%);--cds-global-color-ice-200:hsl(211, 53%, 81%);--cds-global-color-ice-300:hsl(211, 49%, 70%);--cds-global-color-ice-400:hsl(211, 47%, 62%);--cds-global-color-ice-500:hsl(211, 47%, 53%);--cds-global-color-ice-600:hsl(211, 56%, 44%);--cds-global-color-ice-700:hsl(211, 69%, 34%);--cds-global-color-ice-800:hsl(211, 69%, 27%);--cds-global-color-ice-900:hsl(211, 100%, 20%);--cds-global-color-ice-1000:hsl(211, 100%, 14%);--cds-global-color-cool-gray-50:hsl(211, 20%, 96%);--cds-global-color-cool-gray-100:hsl(211, 20%, 90%);--cds-global-color-cool-gray-200:hsl(211, 20%, 81%);--cds-global-color-cool-gray-300:hsl(211, 20%, 72%);--cds-global-color-cool-gray-400:hsl(211, 20%, 61%);--cds-global-color-cool-gray-500:hsl(211, 20%, 53%);--cds-global-color-cool-gray-600:hsl(211, 20%, 44%);--cds-global-color-cool-gray-700:hsl(211, 23%, 36%);--cds-global-color-cool-gray-800:hsl(211, 30%, 28%);--cds-global-color-cool-gray-900:hsl(211, 40%, 22%);--cds-global-color-cool-gray-1000:hsl(211, 63%, 14%);--cds-global-color-tan-50:hsl(41, 23%, 96%);--cds-global-color-tan-100:hsl(41, 22%, 91%);--cds-global-color-tan-200:hsl(41, 27%, 82%);--cds-global-color-tan-300:hsl(41, 23%, 68%);--cds-global-color-tan-400:hsl(41, 23%, 58%);--cds-global-color-tan-500:hsl(41, 20%, 47%);--cds-global-color-tan-600:hsl(41, 20%, 40%);--cds-global-color-tan-700:hsl(41, 20%, 32%);--cds-global-color-tan-800:hsl(41, 23%, 26%);--cds-global-color-tan-900:hsl(41, 23%, 21%);--cds-global-color-tan-1000:hsl(41, 22%, 16%);--cds-global-color-construction-50:hsl(198, 36%, 96%);--cds-global-color-construction-100:hsl(198, 20%, 91%);--cds-global-color-construction-200:hsl(198, 14%, 82%);--cds-global-color-construction-300:hsl(198, 10%, 71%);--cds-global-color-construction-400:hsl(198, 9%, 56%);--cds-global-color-construction-500:hsl(198, 10%, 46%);--cds-global-color-construction-600:hsl(198, 14%, 36%);--cds-global-color-construction-700:hsl(198, 19%, 28%);--cds-global-color-construction-800:hsl(198, 23%, 23%);--cds-global-color-construction-900:hsl(198, 28%, 18%);--cds-global-color-construction-1000:hsl(198, 30%, 15%);--cds-global-color-gray-0:hsl(0, 0%, 100%);--cds-global-color-gray-50:hsl(0, 0%, 98%);--cds-global-color-gray-100:hsl(0, 0%, 95%);--cds-global-color-gray-200:hsl(0, 0%, 91%);--cds-global-color-gray-300:hsl(0, 0%, 87%);--cds-global-color-gray-400:hsl(0, 0%, 80%);--cds-global-color-gray-500:hsl(0, 0%, 70%);--cds-global-color-gray-600:hsl(0, 0%, 55%);--cds-global-color-gray-700:hsl(0, 0%, 40%);--cds-global-color-gray-800:hsl(0, 0%, 27%);--cds-global-color-gray-900:hsl(0, 0%, 20%);--cds-global-color-gray-1000:hsl(0, 0%, 0%);--cds-global-typography-color-100:var(--cds-global-color-white);--cds-global-typography-color-200:var(--cds-global-color-construction-600);--cds-global-typography-color-300:var(--cds-global-color-construction-800);--cds-global-typography-color-400:var(--cds-global-color-construction-900);--cds-global-typography-color-500:var(--cds-global-color-black);--cds-global-typography-font-weight-light:300;--cds-global-typography-font-weight-regular:400;--cds-global-typography-font-weight-medium:500;--cds-global-typography-font-weight-semibold:600;--cds-global-typography-font-weight-bold:600;--cds-global-typography-font-weight-extrabold:600;--cds-global-typography-font-size-0:calc((10 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-1:calc((11 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-2:calc((12 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-3:calc((13 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-4:calc((14 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-5:calc((16 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-6:calc((20 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-7:calc((24 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-8:calc((32 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-9:calc((40 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-base-font-size:125%;--cds-global-typography-base-font-size-px:calc((20 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-family:'Clarity City', 'Avenir Next', sans-serif;--cds-global-typography-header-font-family:'Clarity City', 'Avenir Next', sans-serif;--cds-global-typography-monospace-font-family:ui-monospace, Consolas, Menlo, Monaco, monospace;--cds-global-typography-top-gap-height:0.1475em;--cds-global-typography-ascender-height:0.1703em;--cds-global-typography-x-height:0.517em;--cds-global-typography-link-color:var(--cds-global-color-blue-800);--cds-global-typography-link-color-hover:var(--cds-global-color-blue-900);--cds-global-typography-link-color-visited:var(--cds-global-color-lavender-600);--cds-global-typography-link-color-visited-hover:var(--cds-global-color-lavender-700);--cds-global-typography-body-font-size:calc((14 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-body-line-height:1.42857em;--cds-global-typography-body-letter-spacing:-0.014286em;--cds-global-typography-body-font-weight:400;--cds-global-typography-display-font-size:calc((40 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-display-line-height:1.1em;--cds-global-typography-display-letter-spacing:-0.0125em;--cds-global-typography-display-font-weight:400;--cds-global-typography-heading-font-size:calc((32 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-heading-line-height:1.125em;--cds-global-typography-heading-letter-spacing:-0.0125em;--cds-global-typography-heading-font-weight:400;--cds-global-typography-title-font-size:calc((24 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-title-line-height:1.16667em;--cds-global-typography-title-letter-spacing:-0.008333em;--cds-global-typography-title-font-weight:400;--cds-global-typography-section-font-size:calc((20 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-section-line-height:1.2em;--cds-global-typography-section-letter-spacing:-0.01em;--cds-global-typography-section-font-weight:400;--cds-global-typography-subsection-font-size:calc((16 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-subsection-line-height:1.25em;--cds-global-typography-subsection-letter-spacing:-0.0125em;--cds-global-typography-subsection-font-weight:400;--cds-global-typography-message-font-size:calc((16 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-message-line-height:1.25em;--cds-global-typography-message-letter-spacing:-0.0125em;--cds-global-typography-message-font-weight:calc((400 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-secondary-font-size:calc((13 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-secondary-line-height:1.23077em;--cds-global-typography-secondary-letter-spacing:-0.007692em;--cds-global-typography-secondary-font-weight:400;--cds-global-typography-caption-font-size:calc((11 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-caption-line-height:1.454545em;--cds-global-typography-caption-letter-spacing:0.018182em;--cds-global-typography-caption-font-weight:400;--cds-global-typography-smallcaption-font-size:calc((10 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-smallcaption-line-height:1.2em;--cds-global-typography-smallcaption-letter-spacing:0.05em;--cds-global-typography-smallcaption-font-weight:500;--cds-global-animation-duration-instant:0s;--cds-global-animation-duration-quickest:0.1s;--cds-global-animation-duration-quicker:0.15s;--cds-global-animation-duration-quick:0.2s;--cds-global-animation-duration-secondary:0.3s;--cds-global-animation-duration-primary:0.4s;--cds-global-animation-duration-slow:0.5s;--cds-global-animation-duration-slower:0.7s;--cds-global-animation-duration-slowest:0.8s;--cds-global-animation-easing-primary:cubic-bezier(0,.99,0,.99);--cds-global-animation-easing-secondary:cubic-bezier(0, 1.5, 0.5, 1);--cds-global-animation-easing-loop:cubic-bezier(0.17, 0.4, 0.8, 0.79);--cds-global-base:20;--cds-alias-object-border-radius-100:calc((4 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-radius-200:calc((12 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-radius-300:50%;--cds-alias-object-border-width-100:calc((1 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-width-200:calc((2 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-width-300:calc((3 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-width-400:calc((4 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-color:var(--cds-global-color-construction-200);--cds-alias-object-border-color-tint:var(--cds-global-color-construction-100);--cds-alias-object-border-color-shade:var(--cds-global-color-construction-300);--cds-alias-object-shadow-100:0 calc((1 / var(--cds-global-base, 20)) * 1rem) calc((3 / var(--cds-global-base, 20)) * 1rem) 0 hsla(198, 30%, 15%, 0.5);--cds-alias-object-shadow-200:0 calc((1 / var(--cds-global-base, 20)) * 1rem) calc((3 / var(--cds-global-base, 20)) * 1rem) 0 hsla(198, 30%, 15%, 0.3);--cds-alias-object-shadow-300:0 calc((1 / var(--cds-global-base, 20)) * 1rem) calc((3 / var(--cds-global-base, 20)) * 1rem) 0 hsla(198, 30%, 15%, 0.2);--cds-alias-object-opacity-0:hsla(0, 0%, 0%, 0);--cds-alias-object-opacity-100:hsla(0, 0%, 0%, 0.2);--cds-alias-object-opacity-200:hsla(0, 0%, 0%, 0.4);--cds-alias-object-opacity-300:hsla(0, 0%, 0%, 0.6);--cds-alias-object-interaction-outline:Highlight solid 2px;--cds-alias-object-interaction-outline-webkit:5px auto -webkit-focus-ring-color;--cds-alias-object-interaction-outline-offset:1px;--cds-alias-object-interaction-touch-target:calc((36 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-interaction-border-color:var(--cds-global-color-construction-500);--cds-alias-object-interaction-background:var(--cds-global-color-white);--cds-alias-object-interaction-background-hover:var(--cds-global-color-blue-50);--cds-alias-object-interaction-background-active:var(--cds-global-color-blue-100);--cds-alias-object-interaction-background-selected:var(--cds-global-color-blue-50);--cds-alias-object-interaction-background-disabled:var(--cds-global-color-white);--cds-alias-object-interaction-background-highlight:var(--cds-global-color-blue-700);--cds-alias-object-interaction-color:var(--cds-global-color-construction-700);--cds-alias-object-interaction-color-hover:var(--cds-global-color-construction-1000);--cds-alias-object-interaction-color-active:var(--cds-global-color-construction-1000);--cds-alias-object-interaction-color-selected:var(--cds-global-color-construction-700);--cds-alias-object-interaction-color-disabled:var(--cds-global-color-construction-300);--cds-alias-object-app-background:var(--cds-global-color-gray-50);--cds-alias-object-overlay-background:var(--cds-global-color-white);--cds-alias-object-overlay-backdrop-background:hsla(0, 0%, 0%, 0.6);--cds-alias-object-container-background:var(--cds-global-color-white);--cds-alias-object-container-background-tint:var(--cds-global-color-construction-50);--cds-alias-object-container-background-shade:var(--cds-global-color-construction-100);--cds-alias-object-container-border-color:var(--cds-global-color-construction-200);--cds-alias-status-info:var(--cds-global-color-blue-700);--cds-alias-status-info-tint:var(--cds-global-color-blue-50);--cds-alias-status-info-shade:var(--cds-global-color-blue-800);--cds-alias-status-success:var(--cds-global-color-green-700);--cds-alias-status-success-tint:var(--cds-global-color-green-50);--cds-alias-status-success-shade:var(--cds-global-color-green-800);--cds-alias-status-warning:var(--cds-global-color-ochre-500);--cds-alias-status-warning-tint:var(--cds-global-color-ochre-100);--cds-alias-status-warning-shade:var(--cds-global-color-ochre-600);--cds-alias-status-warning-dark:var(--cds-global-color-ochre-800);--cds-alias-status-danger:var(--cds-global-color-red-700);--cds-alias-status-danger-tint:var(--cds-global-color-red-50);--cds-alias-status-danger-shade:var(--cds-global-color-red-800);--cds-alias-status-danger-dark:var(--cds-global-color-red-900);--cds-alias-status-neutral:var(--cds-global-color-construction-600);--cds-alias-status-neutral-tint:var(--cds-global-color-construction-50);--cds-alias-status-neutral-shade:var(--cds-global-color-construction-700);--cds-alias-status-disabled:var(--cds-global-color-construction-300);--cds-alias-status-disabled-tint:var(--cds-global-color-construction-200);--cds-alias-status-disabled-shade:var(--cds-global-color-construction-400);--cds-alias-status-alt:var(--cds-global-color-violet-700);--cds-alias-status-alt-tint:var(--cds-global-color-violet-600);--cds-alias-status-alt-shade:var(--cds-global-color-violet-900)}
1
+ :root{--cds-global-base:20;--cds-global-scale-space:1;--cds-global-scale-layout-space:1;--cds-global-scale-typography:1;--cds-global-layout-grid-cols:12;--cds-global-layout-width-xs:576px;--cds-global-layout-width-sm:768px;--cds-global-layout-width-md:992px;--cds-global-layout-width-lg:1200px;--cds-global-layout-width-xl:1440px;--cds-global-layout-space-xxxs:calc(2 * var(--cds-internal-scale-1));--cds-global-layout-space-xxs:calc(4 * var(--cds-internal-scale-1));--cds-global-layout-space-xs:calc(8 * var(--cds-internal-scale-1));--cds-global-layout-space-sm:calc(12 * var(--cds-internal-scale-1));--cds-global-layout-space-md:calc(16 * var(--cds-internal-scale-1));--cds-global-layout-space-lg:calc(24 * var(--cds-internal-scale-1));--cds-global-layout-space-xl:calc(32 * var(--cds-internal-scale-1));--cds-global-layout-space-xxl:calc(48 * var(--cds-internal-scale-1));--cds-global-layout-space-xxxl:calc(64 * var(--cds-internal-scale-1));--cds-global-space-0:calc(0 * var(--cds-internal-scale-2));--cds-global-space-1:calc(1 * var(--cds-internal-scale-2));--cds-global-space-2:calc(2 * var(--cds-internal-scale-2));--cds-global-space-3:calc(4 * var(--cds-internal-scale-2));--cds-global-space-4:calc(6 * var(--cds-internal-scale-2));--cds-global-space-5:calc(8 * var(--cds-internal-scale-2));--cds-global-space-6:calc(12 * var(--cds-internal-scale-2));--cds-global-space-7:calc(16 * var(--cds-internal-scale-2));--cds-global-space-8:calc(18 * var(--cds-internal-scale-2));--cds-global-space-9:calc(24 * var(--cds-internal-scale-2));--cds-global-space-10:calc(32 * var(--cds-internal-scale-2));--cds-global-space-11:calc(36 * var(--cds-internal-scale-2));--cds-global-space-12:calc(48 * var(--cds-internal-scale-2));--cds-global-space-13:calc(64 * var(--cds-internal-scale-2));--cds-global-space-14:calc(72 * var(--cds-internal-scale-2));--cds-global-space-15:calc(96 * var(--cds-internal-scale-2));--cds-global-color-black:hsl(0, 0%, 0%);--cds-global-color-white:hsl(0, 0%, 100%);--cds-global-color-green-50:hsl(93, 80%, 94%);--cds-global-color-green-100:hsl(93, 80%, 83%);--cds-global-color-green-200:hsl(93, 80%, 70%);--cds-global-color-green-300:hsl(93, 80%, 56%);--cds-global-color-green-400:hsl(93, 80%, 48%);--cds-global-color-green-500:hsl(93, 80%, 44%);--cds-global-color-green-600:hsl(93, 80%, 37%);--cds-global-color-green-700:hsl(93, 80%, 28%);--cds-global-color-green-800:hsl(93, 80%, 23%);--cds-global-color-green-900:hsl(93, 80%, 17%);--cds-global-color-green-1000:hsl(93, 80%, 12%);--cds-global-color-blue-50:hsl(198, 100%, 95%);--cds-global-color-blue-100:hsl(198, 100%, 87%);--cds-global-color-blue-200:hsl(198, 100%, 78%);--cds-global-color-blue-300:hsl(198, 100%, 70%);--cds-global-color-blue-400:hsl(198, 100%, 59%);--cds-global-color-blue-500:hsl(198, 100%, 48%);--cds-global-color-blue-600:hsl(198, 100%, 43%);--cds-global-color-blue-700:hsl(198, 100%, 34%);--cds-global-color-blue-800:hsl(198, 100%, 27%);--cds-global-color-blue-900:hsl(198, 100%, 21%);--cds-global-color-blue-1000:hsl(198, 100%, 15%);--cds-global-color-violet-50:hsl(282, 100%, 97%);--cds-global-color-violet-100:hsl(282, 80%, 91%);--cds-global-color-violet-200:hsl(282, 73%, 83%);--cds-global-color-violet-300:hsl(282, 66%, 74%);--cds-global-color-violet-400:hsl(282, 60%, 65%);--cds-global-color-violet-500:hsl(282, 60%, 57%);--cds-global-color-violet-600:hsl(282, 60%, 49%);--cds-global-color-violet-700:hsl(283, 80%, 36%);--cds-global-color-violet-800:hsl(282, 100%, 26%);--cds-global-color-violet-900:hsl(282, 100%, 19%);--cds-global-color-violet-1000:hsl(282, 100%, 14%);--cds-global-color-red-50:hsl(9, 100%, 97%);--cds-global-color-red-100:hsl(9, 100%, 94%);--cds-global-color-red-200:hsl(9, 100%, 88%);--cds-global-color-red-300:hsl(9, 100%, 79%);--cds-global-color-red-400:hsl(9, 100%, 71%);--cds-global-color-red-500:hsl(9, 100%, 65%);--cds-global-color-red-600:hsl(9, 100%, 60%);--cds-global-color-red-700:hsl(9, 100%, 44%);--cds-global-color-red-800:hsl(9, 100%, 38%);--cds-global-color-red-900:hsl(9, 100%, 28%);--cds-global-color-red-1000:hsl(9, 100%, 22%);--cds-global-color-ochre-50:hsl(41, 100%, 96%);--cds-global-color-ochre-100:hsl(41, 100%, 92%);--cds-global-color-ochre-200:hsl(41, 100%, 86%);--cds-global-color-ochre-300:hsl(41, 100%, 78%);--cds-global-color-ochre-400:hsl(41, 100%, 70%);--cds-global-color-ochre-500:hsl(40, 100%, 59%);--cds-global-color-ochre-600:hsl(39, 100%, 50%);--cds-global-color-ochre-700:hsl(38, 100%, 42%);--cds-global-color-ochre-800:hsl(37, 100%, 32%);--cds-global-color-ochre-900:hsl(36, 100%, 27%);--cds-global-color-ochre-1000:hsl(35, 100%, 19%);--cds-global-color-lavender-50:hsl(238, 100%, 96%);--cds-global-color-lavender-100:hsl(238, 58%, 88%);--cds-global-color-lavender-200:hsl(238, 53%, 79%);--cds-global-color-lavender-300:hsl(238, 52%, 70%);--cds-global-color-lavender-400:hsl(238, 58%, 64%);--cds-global-color-lavender-500:hsl(238, 59%, 58%);--cds-global-color-lavender-600:hsl(238, 60%, 52%);--cds-global-color-lavender-700:hsl(238, 69%, 45%);--cds-global-color-lavender-800:hsl(238, 100%, 32%);--cds-global-color-lavender-900:hsl(238, 100%, 22%);--cds-global-color-lavender-1000:hsl(238, 100%, 14%);--cds-global-color-azure-50:hsl(211, 100%, 95%);--cds-global-color-azure-100:hsl(211, 100%, 88%);--cds-global-color-azure-200:hsl(211, 100%, 81%);--cds-global-color-azure-300:hsl(211, 100%, 70%);--cds-global-color-azure-400:hsl(211, 100%, 62%);--cds-global-color-azure-500:hsl(211, 100%, 54%);--cds-global-color-azure-600:hsl(211, 100%, 46%);--cds-global-color-azure-700:hsl(211, 100%, 37%);--cds-global-color-azure-800:hsl(211, 100%, 26%);--cds-global-color-azure-900:hsl(211, 100%, 18%);--cds-global-color-azure-1000:hsl(211, 100%, 14%);--cds-global-color-aqua-50:hsl(184, 100%, 96%);--cds-global-color-aqua-100:hsl(184, 100%, 86%);--cds-global-color-aqua-200:hsl(184, 100%, 75%);--cds-global-color-aqua-300:hsl(184, 100%, 62%);--cds-global-color-aqua-400:hsl(184, 100%, 48%);--cds-global-color-aqua-500:hsl(184, 100%, 43%);--cds-global-color-aqua-600:hsl(184, 100%, 34%);--cds-global-color-aqua-700:hsl(184, 100%, 25%);--cds-global-color-aqua-800:hsl(184, 100%, 18%);--cds-global-color-aqua-900:hsl(184, 100%, 13%);--cds-global-color-aqua-1000:hsl(184, 100%, 10%);--cds-global-color-jade-50:hsl(160, 83%, 95%);--cds-global-color-jade-100:hsl(160, 82%, 88%);--cds-global-color-jade-200:hsl(160, 78%, 78%);--cds-global-color-jade-300:hsl(160, 69%, 65%);--cds-global-color-jade-400:hsl(160, 69%, 53%);--cds-global-color-jade-500:hsl(160, 64%, 45%);--cds-global-color-jade-600:hsl(160, 69%, 36%);--cds-global-color-jade-700:hsl(160, 64%, 30%);--cds-global-color-jade-800:hsl(160, 100%, 21%);--cds-global-color-jade-900:hsl(160, 70%, 21%);--cds-global-color-jade-1000:hsl(160, 69%, 19%);--cds-global-color-yellow-50:hsl(50, 100%, 95%);--cds-global-color-yellow-100:hsl(50, 100%, 84%);--cds-global-color-yellow-200:hsl(50, 100%, 73%);--cds-global-color-yellow-300:hsl(50, 100%, 57%);--cds-global-color-yellow-400:hsl(46, 100%, 52%);--cds-global-color-yellow-500:hsl(44, 100%, 47%);--cds-global-color-yellow-600:hsl(42, 100%, 42%);--cds-global-color-yellow-700:hsl(40, 100%, 35%);--cds-global-color-yellow-800:hsl(40, 100%, 26%);--cds-global-color-yellow-900:hsl(40, 100%, 18%);--cds-global-color-yellow-1000:hsl(40, 100%, 13%);--cds-global-color-lime-50:hsl(66, 100%, 94%);--cds-global-color-lime-100:hsl(66, 95%, 83%);--cds-global-color-lime-200:hsl(66, 85%, 70%);--cds-global-color-lime-300:hsl(66, 80%, 58%);--cds-global-color-lime-400:hsl(66, 80%, 48%);--cds-global-color-lime-500:hsl(66, 90%, 41%);--cds-global-color-lime-600:hsl(66, 90%, 36%);--cds-global-color-lime-700:hsl(66, 100%, 28%);--cds-global-color-lime-800:hsl(66, 100%, 22%);--cds-global-color-lime-900:hsl(66, 100%, 12%);--cds-global-color-lime-1000:hsl(66, 100%, 7%);--cds-global-color-tangerine-50:hsl(25, 100%, 95%);--cds-global-color-tangerine-100:hsl(25, 100%, 88%);--cds-global-color-tangerine-200:hsl(25, 94%, 78%);--cds-global-color-tangerine-300:hsl(25, 100%, 72%);--cds-global-color-tangerine-400:hsl(25, 100%, 62%);--cds-global-color-tangerine-500:hsl(25, 100%, 48%);--cds-global-color-tangerine-600:hsl(25, 100%, 41%);--cds-global-color-tangerine-700:hsl(25, 100%, 34%);--cds-global-color-tangerine-800:hsl(25, 100%, 25%);--cds-global-color-tangerine-900:hsl(25, 100%, 19%);--cds-global-color-tangerine-1000:hsl(25, 100%, 15%);--cds-global-color-magenta-50:hsl(345, 100%, 95%);--cds-global-color-magenta-100:hsl(345, 100%, 87%);--cds-global-color-magenta-200:hsl(345, 100%, 79%);--cds-global-color-magenta-300:hsl(345, 100%, 70%);--cds-global-color-magenta-400:hsl(345, 100%, 61%);--cds-global-color-magenta-500:hsl(345, 81%, 50%);--cds-global-color-magenta-600:hsl(345, 83%, 40%);--cds-global-color-magenta-700:hsl(345, 91%, 31%);--cds-global-color-magenta-800:hsl(345, 100%, 24%);--cds-global-color-magenta-900:hsl(345, 100%, 19%);--cds-global-color-magenta-1000:hsl(345, 100%, 15%);--cds-global-color-pink-50:hsl(324, 100%, 97%);--cds-global-color-pink-100:hsl(324, 95%, 91%);--cds-global-color-pink-200:hsl(324, 84%, 81%);--cds-global-color-pink-300:hsl(324, 78%, 70%);--cds-global-color-pink-400:hsl(324, 78%, 62%);--cds-global-color-pink-500:hsl(324, 64%, 51%);--cds-global-color-pink-600:hsl(324, 80%, 39%);--cds-global-color-pink-700:hsl(324, 100%, 30%);--cds-global-color-pink-800:hsl(324, 100%, 24%);--cds-global-color-pink-900:hsl(324, 100%, 18%);--cds-global-color-pink-1000:hsl(324, 100%, 15%);--cds-global-color-warm-gray-50:hsl(282, 3%, 97%);--cds-global-color-warm-gray-100:hsl(282, 3%, 92%);--cds-global-color-warm-gray-200:hsl(282, 3%, 84%);--cds-global-color-warm-gray-300:hsl(282, 3%, 74%);--cds-global-color-warm-gray-400:hsl(282, 3%, 63%);--cds-global-color-warm-gray-500:hsl(282, 3%, 54%);--cds-global-color-warm-gray-600:hsl(282, 3%, 43%);--cds-global-color-warm-gray-700:hsl(282, 3%, 35%);--cds-global-color-warm-gray-800:hsl(282, 3%, 28%);--cds-global-color-warm-gray-900:hsl(282, 3%, 20%);--cds-global-color-warm-gray-1000:hsl(282, 3%, 14%);--cds-global-color-slate-50:hsl(238, 20%, 96%);--cds-global-color-slate-100:hsl(238, 20%, 91%);--cds-global-color-slate-200:hsl(238, 20%, 82%);--cds-global-color-slate-300:hsl(238, 20%, 73%);--cds-global-color-slate-400:hsl(238, 20%, 63%);--cds-global-color-slate-500:hsl(238, 23%, 56%);--cds-global-color-slate-600:hsl(238, 24%, 49%);--cds-global-color-slate-700:hsl(238, 28%, 38%);--cds-global-color-slate-800:hsl(238, 28%, 29%);--cds-global-color-slate-900:hsl(238, 28%, 22%);--cds-global-color-slate-1000:hsl(238, 28%, 14%);--cds-global-color-ice-50:hsl(211, 100%, 97%);--cds-global-color-ice-100:hsl(211, 58%, 90%);--cds-global-color-ice-200:hsl(211, 53%, 81%);--cds-global-color-ice-300:hsl(211, 49%, 70%);--cds-global-color-ice-400:hsl(211, 47%, 62%);--cds-global-color-ice-500:hsl(211, 47%, 53%);--cds-global-color-ice-600:hsl(211, 56%, 44%);--cds-global-color-ice-700:hsl(211, 69%, 34%);--cds-global-color-ice-800:hsl(211, 69%, 27%);--cds-global-color-ice-900:hsl(211, 100%, 20%);--cds-global-color-ice-1000:hsl(211, 100%, 14%);--cds-global-color-cool-gray-50:hsl(211, 20%, 96%);--cds-global-color-cool-gray-100:hsl(211, 20%, 90%);--cds-global-color-cool-gray-200:hsl(211, 20%, 81%);--cds-global-color-cool-gray-300:hsl(211, 20%, 72%);--cds-global-color-cool-gray-400:hsl(211, 20%, 61%);--cds-global-color-cool-gray-500:hsl(211, 20%, 53%);--cds-global-color-cool-gray-600:hsl(211, 20%, 44%);--cds-global-color-cool-gray-700:hsl(211, 23%, 36%);--cds-global-color-cool-gray-800:hsl(211, 30%, 28%);--cds-global-color-cool-gray-900:hsl(211, 40%, 22%);--cds-global-color-cool-gray-1000:hsl(211, 63%, 14%);--cds-global-color-tan-50:hsl(41, 23%, 96%);--cds-global-color-tan-100:hsl(41, 22%, 91%);--cds-global-color-tan-200:hsl(41, 27%, 82%);--cds-global-color-tan-300:hsl(41, 23%, 68%);--cds-global-color-tan-400:hsl(41, 23%, 58%);--cds-global-color-tan-500:hsl(41, 20%, 47%);--cds-global-color-tan-600:hsl(41, 20%, 40%);--cds-global-color-tan-700:hsl(41, 20%, 32%);--cds-global-color-tan-800:hsl(41, 23%, 26%);--cds-global-color-tan-900:hsl(41, 23%, 21%);--cds-global-color-tan-1000:hsl(41, 22%, 16%);--cds-global-color-construction-50:hsl(198, 36%, 96%);--cds-global-color-construction-100:hsl(198, 20%, 91%);--cds-global-color-construction-200:hsl(198, 14%, 82%);--cds-global-color-construction-300:hsl(198, 10%, 71%);--cds-global-color-construction-400:hsl(198, 9%, 56%);--cds-global-color-construction-500:hsl(198, 10%, 46%);--cds-global-color-construction-600:hsl(198, 14%, 36%);--cds-global-color-construction-700:hsl(198, 19%, 28%);--cds-global-color-construction-800:hsl(198, 23%, 23%);--cds-global-color-construction-900:hsl(198, 28%, 18%);--cds-global-color-construction-1000:hsl(198, 30%, 15%);--cds-global-color-gray-0:hsl(0, 0%, 100%);--cds-global-color-gray-50:hsl(0, 0%, 98%);--cds-global-color-gray-100:hsl(0, 0%, 95%);--cds-global-color-gray-200:hsl(0, 0%, 91%);--cds-global-color-gray-300:hsl(0, 0%, 87%);--cds-global-color-gray-400:hsl(0, 0%, 80%);--cds-global-color-gray-500:hsl(0, 0%, 70%);--cds-global-color-gray-600:hsl(0, 0%, 55%);--cds-global-color-gray-700:hsl(0, 0%, 40%);--cds-global-color-gray-800:hsl(0, 0%, 27%);--cds-global-color-gray-900:hsl(0, 0%, 20%);--cds-global-color-gray-1000:hsl(0, 0%, 0%);--cds-global-typography-color-100:var(--cds-global-color-white);--cds-global-typography-color-200:var(--cds-global-color-construction-600);--cds-global-typography-color-300:var(--cds-global-color-construction-800);--cds-global-typography-color-400:var(--cds-global-color-construction-900);--cds-global-typography-color-500:var(--cds-global-color-black);--cds-global-typography-font-weight-light:300;--cds-global-typography-font-weight-regular:400;--cds-global-typography-font-weight-medium:500;--cds-global-typography-font-weight-semibold:600;--cds-global-typography-font-weight-bold:600;--cds-global-typography-font-weight-extrabold:600;--cds-global-typography-font-size-0:calc(10 * var(--cds-internal-scale-3));--cds-global-typography-font-size-1:calc(11 * var(--cds-internal-scale-3));--cds-global-typography-font-size-2:calc(12 * var(--cds-internal-scale-3));--cds-global-typography-font-size-3:calc(13 * var(--cds-internal-scale-3));--cds-global-typography-font-size-4:calc(14 * var(--cds-internal-scale-3));--cds-global-typography-font-size-5:calc(16 * var(--cds-internal-scale-3));--cds-global-typography-font-size-6:calc(20 * var(--cds-internal-scale-3));--cds-global-typography-font-size-7:calc(24 * var(--cds-internal-scale-3));--cds-global-typography-font-size-8:calc(32 * var(--cds-internal-scale-3));--cds-global-typography-font-size-9:calc(40 * var(--cds-internal-scale-3));--cds-global-typography-font-family:'Clarity City', 'Avenir Next', sans-serif;--cds-global-typography-header-font-family:'Clarity City', 'Avenir Next', sans-serif;--cds-global-typography-monospace-font-family:ui-monospace, Consolas, Menlo, Monaco, monospace;--cds-global-typography-top-gap-height:0.1475em;--cds-global-typography-ascender-height:0.1703em;--cds-global-typography-x-height:0.517em;--cds-global-typography-link-color:var(--cds-global-color-blue-800);--cds-global-typography-link-color-hover:var(--cds-global-color-blue-900);--cds-global-typography-link-color-visited:var(--cds-global-color-lavender-600);--cds-global-typography-link-color-visited-hover:var(--cds-global-color-lavender-700);--cds-global-typography-body-font-size:calc(14 * var(--cds-internal-scale-3));--cds-global-typography-body-line-height:1.42857em;--cds-global-typography-body-letter-spacing:-0.014286em;--cds-global-typography-body-font-weight:400;--cds-global-typography-display-font-size:calc(40 * var(--cds-internal-scale-3));--cds-global-typography-display-line-height:1.1em;--cds-global-typography-display-letter-spacing:-0.0125em;--cds-global-typography-display-font-weight:400;--cds-global-typography-heading-font-size:calc(32 * var(--cds-internal-scale-3));--cds-global-typography-heading-line-height:1.125em;--cds-global-typography-heading-letter-spacing:-0.0125em;--cds-global-typography-heading-font-weight:400;--cds-global-typography-title-font-size:calc(24 * var(--cds-internal-scale-3));--cds-global-typography-title-line-height:1.16667em;--cds-global-typography-title-letter-spacing:-0.008333em;--cds-global-typography-title-font-weight:400;--cds-global-typography-section-font-size:calc(20 * var(--cds-internal-scale-3));--cds-global-typography-section-line-height:1.2em;--cds-global-typography-section-letter-spacing:-0.01em;--cds-global-typography-section-font-weight:400;--cds-global-typography-subsection-font-size:calc(16 * var(--cds-internal-scale-3));--cds-global-typography-subsection-line-height:1.25em;--cds-global-typography-subsection-letter-spacing:-0.0125em;--cds-global-typography-subsection-font-weight:400;--cds-global-typography-message-font-size:calc(16 * var(--cds-internal-scale-3));--cds-global-typography-message-line-height:1.25em;--cds-global-typography-message-letter-spacing:-0.0125em;--cds-global-typography-message-font-weight:calc(400 * (1rem / var(--cds-global-base)));--cds-global-typography-secondary-font-size:calc(13 * var(--cds-internal-scale-3));--cds-global-typography-secondary-line-height:1.23077em;--cds-global-typography-secondary-letter-spacing:-0.007692em;--cds-global-typography-secondary-font-weight:400;--cds-global-typography-caption-font-size:calc(11 * var(--cds-internal-scale-3));--cds-global-typography-caption-line-height:1.454545em;--cds-global-typography-caption-letter-spacing:0.018182em;--cds-global-typography-caption-font-weight:400;--cds-global-typography-smallcaption-font-size:calc(10 * var(--cds-internal-scale-3));--cds-global-typography-smallcaption-line-height:1.2em;--cds-global-typography-smallcaption-letter-spacing:0.05em;--cds-global-typography-smallcaption-font-weight:500;--cds-global-animation-duration-instant:0s;--cds-global-animation-duration-quickest:0.1s;--cds-global-animation-duration-quicker:0.15s;--cds-global-animation-duration-quick:0.2s;--cds-global-animation-duration-secondary:0.3s;--cds-global-animation-duration-primary:0.4s;--cds-global-animation-duration-slow:0.5s;--cds-global-animation-duration-slower:0.7s;--cds-global-animation-duration-slowest:0.8s;--cds-global-animation-easing-primary:cubic-bezier(0,.99,0,.99);--cds-global-animation-easing-secondary:cubic-bezier(0, 1.5, 0.5, 1);--cds-global-animation-easing-loop:cubic-bezier(0.17, 0.4, 0.8, 0.79);--cds-alias-object-border-radius-100:calc(4 * (1rem / var(--cds-global-base)));--cds-alias-object-border-radius-200:calc(12 * (1rem / var(--cds-global-base)));--cds-alias-object-border-radius-300:50%;--cds-alias-object-border-width-100:calc(1 * (1rem / var(--cds-global-base)));--cds-alias-object-border-width-200:calc(2 * (1rem / var(--cds-global-base)));--cds-alias-object-border-width-300:calc(3 * (1rem / var(--cds-global-base)));--cds-alias-object-border-width-400:calc(4 * (1rem / var(--cds-global-base)));--cds-alias-object-border-color:var(--cds-global-color-construction-200);--cds-alias-object-border-color-tint:var(--cds-global-color-construction-100);--cds-alias-object-border-color-shade:var(--cds-global-color-construction-300);--cds-alias-object-shadow-100:0 calc((1 / var(--cds-global-base, 20)) * 1rem) calc((3 / var(--cds-global-base, 20)) * 1rem) 0 hsla(198, 30%, 15%, 0.5);--cds-alias-object-shadow-200:0 calc((1 / var(--cds-global-base, 20)) * 1rem) calc((3 / var(--cds-global-base, 20)) * 1rem) 0 hsla(198, 30%, 15%, 0.3);--cds-alias-object-shadow-300:0 calc((1 / var(--cds-global-base, 20)) * 1rem) calc((3 / var(--cds-global-base, 20)) * 1rem) 0 hsla(198, 30%, 15%, 0.2);--cds-alias-object-opacity-0:hsla(0, 0%, 0%, 0);--cds-alias-object-opacity-100:hsla(0, 0%, 0%, 0.2);--cds-alias-object-opacity-200:hsla(0, 0%, 0%, 0.4);--cds-alias-object-opacity-300:hsla(0, 0%, 0%, 0.6);--cds-alias-object-interaction-outline:Highlight solid 2px;--cds-alias-object-interaction-outline-webkit:5px auto -webkit-focus-ring-color;--cds-alias-object-interaction-outline-offset:1px;--cds-alias-object-interaction-touch-target:calc(36 * (1rem / var(--cds-global-base)));--cds-alias-object-interaction-border-color:var(--cds-global-color-construction-500);--cds-alias-object-interaction-background:var(--cds-global-color-white);--cds-alias-object-interaction-background-hover:var(--cds-global-color-blue-50);--cds-alias-object-interaction-background-active:var(--cds-global-color-blue-100);--cds-alias-object-interaction-background-selected:var(--cds-global-color-blue-50);--cds-alias-object-interaction-background-disabled:var(--cds-global-color-white);--cds-alias-object-interaction-background-highlight:var(--cds-global-color-blue-700);--cds-alias-object-interaction-color:var(--cds-global-color-construction-700);--cds-alias-object-interaction-color-hover:var(--cds-global-color-construction-1000);--cds-alias-object-interaction-color-active:var(--cds-global-color-construction-1000);--cds-alias-object-interaction-color-selected:var(--cds-global-color-construction-700);--cds-alias-object-interaction-color-disabled:var(--cds-global-color-construction-300);--cds-alias-object-app-background:var(--cds-global-color-gray-50);--cds-alias-object-overlay-background:var(--cds-global-color-white);--cds-alias-object-overlay-backdrop-background:hsla(0, 0%, 0%, 0.6);--cds-alias-object-container-background:var(--cds-global-color-white);--cds-alias-object-container-background-tint:var(--cds-global-color-construction-50);--cds-alias-object-container-background-shade:var(--cds-global-color-construction-100);--cds-alias-object-container-border-color:var(--cds-global-color-construction-200);--cds-alias-status-info:var(--cds-global-color-blue-700);--cds-alias-status-info-tint:var(--cds-global-color-blue-50);--cds-alias-status-info-shade:var(--cds-global-color-blue-800);--cds-alias-status-success:var(--cds-global-color-green-700);--cds-alias-status-success-tint:var(--cds-global-color-green-50);--cds-alias-status-success-shade:var(--cds-global-color-green-800);--cds-alias-status-warning:var(--cds-global-color-ochre-500);--cds-alias-status-warning-tint:var(--cds-global-color-ochre-100);--cds-alias-status-warning-shade:var(--cds-global-color-ochre-600);--cds-alias-status-warning-dark:var(--cds-global-color-ochre-800);--cds-alias-status-danger:var(--cds-global-color-red-700);--cds-alias-status-danger-tint:var(--cds-global-color-red-50);--cds-alias-status-danger-shade:var(--cds-global-color-red-800);--cds-alias-status-danger-dark:var(--cds-global-color-red-900);--cds-alias-status-neutral:var(--cds-global-color-construction-600);--cds-alias-status-neutral-tint:var(--cds-global-color-construction-50);--cds-alias-status-neutral-shade:var(--cds-global-color-construction-700);--cds-alias-status-disabled:var(--cds-global-color-construction-300);--cds-alias-status-disabled-tint:var(--cds-global-color-construction-200);--cds-alias-status-disabled-shade:var(--cds-global-color-construction-400);--cds-alias-status-alt:var(--cds-global-color-violet-700);--cds-alias-status-alt-tint:var(--cds-global-color-violet-600);--cds-alias-status-alt-shade:var(--cds-global-color-violet-900);--cds-internal-scale-1:calc((1rem / var(--cds-global-base)) * var(--cds-global-scale-layout-space));--cds-internal-scale-2:calc((1rem / var(--cds-global-base)) * var(--cds-global-scale-space));--cds-internal-scale-3:calc((1rem / var(--cds-global-base)) * var(--cds-global-scale-typography))}
package/styles/module.typography.css CHANGED
@@ -47,7 +47,9 @@
47
47
  display: block;
48
48
  height: 0;
49
49
  width: 0;
50
- margin-top: calc( (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-display-line-height) - 1em) / 2)) * -1) - 0.044em );
50
+ margin-top: calc(
51
+ (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-display-line-height) - 1em) / 2)) * -1) - 0.044em
52
+ );
51
53
  }
52
54
 
53
55
  [cds-text*=heading] {
@@ -68,7 +70,9 @@
68
70
  display: block;
69
71
  height: 0;
70
72
  width: 0;
71
- margin-top: calc( (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-heading-line-height) - 1em) / 2)) * -1) - 0.044em );
73
+ margin-top: calc(
74
+ (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-heading-line-height) - 1em) / 2)) * -1) - 0.044em
75
+ );
72
76
  }
73
77
 
74
78
  [cds-text*=title] {
@@ -89,7 +93,9 @@
89
93
  display: block;
90
94
  height: 0;
91
95
  width: 0;
92
- margin-top: calc( (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-title-line-height) - 1em) / 2)) * -1) - 0.044em );
96
+ margin-top: calc(
97
+ (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-title-line-height) - 1em) / 2)) * -1) - 0.044em
98
+ );
93
99
  }
94
100
 
95
101
  [cds-text*=section] {
@@ -110,7 +116,9 @@
110
116
  display: block;
111
117
  height: 0;
112
118
  width: 0;
113
- margin-top: calc( (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-section-line-height) - 1em) / 2)) * -1) - 0.044em );
119
+ margin-top: calc(
120
+ (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-section-line-height) - 1em) / 2)) * -1) - 0.044em
121
+ );
114
122
  }
115
123
 
116
124
  [cds-text*=subsection] {
@@ -131,7 +139,9 @@
131
139
  display: block;
132
140
  height: 0;
133
141
  width: 0;
134
- margin-top: calc( (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-subsection-line-height) - 1em) / 2)) * -1) - 0.044em );
142
+ margin-top: calc(
143
+ (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-subsection-line-height) - 1em) / 2)) * -1) - 0.044em
144
+ );
135
145
  }
136
146
 
137
147
  [cds-text*=body] {
@@ -152,7 +162,9 @@
152
162
  display: block;
153
163
  height: 0;
154
164
  width: 0;
155
- margin-top: calc( (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-body-line-height) - 1em) / 2)) * -1) - 0.044em );
165
+ margin-top: calc(
166
+ (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-body-line-height) - 1em) / 2)) * -1) - 0.044em
167
+ );
156
168
  }
157
169
 
158
170
  [cds-text*=message] {
@@ -173,7 +185,9 @@
173
185
  display: block;
174
186
  height: 0;
175
187
  width: 0;
176
- margin-top: calc( (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-message-line-height) - 1em) / 2)) * -1) - 0.044em );
188
+ margin-top: calc(
189
+ (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-message-line-height) - 1em) / 2)) * -1) - 0.044em
190
+ );
177
191
  }
178
192
 
179
193
  [cds-text*=secondary] {
@@ -194,7 +208,9 @@
194
208
  display: block;
195
209
  height: 0;
196
210
  width: 0;
197
- margin-top: calc( (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-secondary-line-height) - 1em) / 2)) * -1) - 0.044em );
211
+ margin-top: calc(
212
+ (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-secondary-line-height) - 1em) / 2)) * -1) - 0.044em
213
+ );
198
214
  }
199
215
 
200
216
  [cds-text*=caption] {
@@ -215,7 +231,9 @@
215
231
  display: block;
216
232
  height: 0;
217
233
  width: 0;
218
- margin-top: calc( (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-caption-line-height) - 1em) / 2)) * -1) - 0.044em );
234
+ margin-top: calc(
235
+ (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-caption-line-height) - 1em) / 2)) * -1) - 0.044em
236
+ );
219
237
  }
220
238
 
221
239
  [cds-text*=smallcaption] {
@@ -236,7 +254,9 @@
236
254
  display: block;
237
255
  height: 0;
238
256
  width: 0;
239
- margin-top: calc( (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-smallcaption-line-height) - 1em) / 2)) * -1) - 0.044em );
257
+ margin-top: calc(
258
+ (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-smallcaption-line-height) - 1em) / 2)) * -1) - 0.044em
259
+ );
240
260
  }
241
261
 
242
262
  [cds-text~=link] {
@@ -376,7 +396,9 @@
376
396
  display: block;
377
397
  height: 0;
378
398
  width: 0;
379
- margin-top: calc( (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.2em - 1em) / 2)) * -1) - 0.044em );
399
+ margin-top: calc(
400
+ (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.2em - 1em) / 2)) * -1) - 0.044em
401
+ );
380
402
  }
381
403
 
382
404
  [cds-text*=h1] {
@@ -399,7 +421,9 @@
399
421
  display: block;
400
422
  height: 0;
401
423
  width: 0;
402
- margin-top: calc( (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.5em - 1em) / 2)) * -1) - 0.044em );
424
+ margin-top: calc(
425
+ (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.5em - 1em) / 2)) * -1) - 0.044em
426
+ );
403
427
  }
404
428
 
405
429
  [cds-text*=h2] {
@@ -422,7 +446,9 @@
422
446
  display: block;
423
447
  height: 0;
424
448
  width: 0;
425
- margin-top: calc( (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.7143em - 1em) / 2)) * -1) - 0.044em );
449
+ margin-top: calc(
450
+ (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.7143em - 1em) / 2)) * -1) - 0.044em
451
+ );
426
452
  }
427
453
 
428
454
  [cds-text*=h3] {
@@ -445,7 +471,9 @@
445
471
  display: block;
446
472
  height: 0;
447
473
  width: 0;
448
- margin-top: calc( (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.0909em - 1em) / 2)) * -1) - 0.044em );
474
+ margin-top: calc(
475
+ (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.0909em - 1em) / 2)) * -1) - 0.044em
476
+ );
449
477
  }
450
478
 
451
479
  [cds-text*=h4] {
@@ -468,7 +496,9 @@
468
496
  display: block;
469
497
  height: 0;
470
498
  width: 0;
471
- margin-top: calc( (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.333333em - 1em) / 2)) * -1) - 0.044em );
499
+ margin-top: calc(
500
+ (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.333333em - 1em) / 2)) * -1) - 0.044em
501
+ );
472
502
  }
473
503
 
474
504
  [cds-text*=h5] {
@@ -491,7 +521,9 @@
491
521
  display: block;
492
522
  height: 0;
493
523
  width: 0;
494
- margin-top: calc( (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.5em - 1em) / 2)) * -1) - 0.044em );
524
+ margin-top: calc(
525
+ (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.5em - 1em) / 2)) * -1) - 0.044em
526
+ );
495
527
  }
496
528
 
497
529
  [cds-text*=h6] {
@@ -514,7 +546,9 @@
514
546
  display: block;
515
547
  height: 0;
516
548
  width: 0;
517
- margin-top: calc( (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.5em - 1em) / 2)) * -1) - 0.044em );
549
+ margin-top: calc(
550
+ (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.5em - 1em) / 2)) * -1) - 0.044em
551
+ );
518
552
  }
519
553
 
520
554
  [cds-text*=p0] {
@@ -536,7 +570,9 @@
536
570
  display: block;
537
571
  height: 0;
538
572
  width: 0;
539
- margin-top: calc( (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.16667em - 1em) / 2)) * -1) - 0.044em );
573
+ margin-top: calc(
574
+ (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.16667em - 1em) / 2)) * -1) - 0.044em
575
+ );
540
576
  }
541
577
 
542
578
  [cds-text*=p1] {
@@ -558,7 +594,9 @@
558
594
  display: block;
559
595
  height: 0;
560
596
  width: 0;
561
- margin-top: calc( (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.71429em - 1em) / 2)) * -1) - 0.044em );
597
+ margin-top: calc(
598
+ (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.71429em - 1em) / 2)) * -1) - 0.044em
599
+ );
562
600
  }
563
601
 
564
602
  [cds-text*=p2] {
@@ -580,7 +618,9 @@
580
618
  display: block;
581
619
  height: 0;
582
620
  width: 0;
583
- margin-top: calc( (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.84615em - 1em) / 2)) * -1) - 0.044em );
621
+ margin-top: calc(
622
+ (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.84615em - 1em) / 2)) * -1) - 0.044em
623
+ );
584
624
  }
585
625
 
586
626
  [cds-text*=p3] {
@@ -602,7 +642,9 @@
602
642
  display: block;
603
643
  height: 0;
604
644
  width: 0;
605
- margin-top: calc( (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.84615em - 1em) / 2)) * -1) - 0.044em );
645
+ margin-top: calc(
646
+ (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.84615em - 1em) / 2)) * -1) - 0.044em
647
+ );
606
648
  }
607
649
 
608
650
  [cds-text*=p4] {
@@ -624,7 +666,9 @@
624
666
  display: block;
625
667
  height: 0;
626
668
  width: 0;
627
- margin-top: calc( (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((2em - 1em) / 2)) * -1) - 0.044em );
669
+ margin-top: calc(
670
+ (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((2em - 1em) / 2)) * -1) - 0.044em
671
+ );
628
672
  }
629
673
 
630
674
  [cds-text*=p5] {
@@ -646,7 +690,9 @@
646
690
  display: block;
647
691
  height: 0;
648
692
  width: 0;
649
- margin-top: calc( (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((2em - 1em) / 2)) * -1) - 0.044em );
693
+ margin-top: calc(
694
+ (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((2em - 1em) / 2)) * -1) - 0.044em
695
+ );
650
696
  }
651
697
 
652
698
  [cds-text*=p6] {
@@ -668,7 +714,9 @@
668
714
  display: block;
669
715
  height: 0;
670
716
  width: 0;
671
- margin-top: calc( (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.090909em - 1em) / 2)) * -1) - 0.044em );
717
+ margin-top: calc(
718
+ (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.090909em - 1em) / 2)) * -1) - 0.044em
719
+ );
672
720
  }
673
721
 
674
722
  [cds-text*=p7] {
@@ -690,7 +738,9 @@
690
738
  display: block;
691
739
  height: 0;
692
740
  width: 0;
693
- margin-top: calc( (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.090909em - 1em) / 2)) * -1) - 0.044em );
741
+ margin-top: calc(
742
+ (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.090909em - 1em) / 2)) * -1) - 0.044em
743
+ );
694
744
  }
695
745
 
696
746
  [cds-text*=p8] {
@@ -712,5 +762,7 @@
712
762
  display: block;
713
763
  height: 0;
714
764
  width: 0;
715
- margin-top: calc( (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.2em - 1em) / 2)) * -1) - 0.044em );
765
+ margin-top: calc(
766
+ (((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.2em - 1em) / 2)) * -1) - 0.044em
767
+ );
716
768
  }