@central-design-system/components 3.0.0-beta.9 → 3.0.0

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 (247) hide show
  1. package/dist/cds.css +1 -1
  2. package/dist/cds.d.ts +9 -3
  3. package/dist/cds.es.js +18823 -14336
  4. package/dist/cds.umd.js +6 -6
  5. package/dist/components/CdsAutocomplete/CdsAutocomplete.vue.d.ts +79 -146
  6. package/dist/components/CdsBadge/CdsBadge.vue.d.ts +20 -16
  7. package/dist/components/CdsBreadcrumbs/CdsBreadcrumbs.vue.d.ts +2 -2
  8. package/dist/components/CdsBreadcrumbs/CdsBreadcrumbsItem.vue.d.ts +5 -5
  9. package/dist/components/CdsButton/CdsButton.vue.d.ts +31 -31
  10. package/dist/components/CdsButton/CdsFunctionalButton.vue.d.ts +73 -0
  11. package/dist/components/CdsButton/index.d.ts +1 -0
  12. package/dist/components/CdsCheckbox/CdsCheckbox.vue.d.ts +10 -2
  13. package/dist/components/CdsCheckbox/CdsCheckboxGroup.vue.d.ts +2 -2
  14. package/dist/components/CdsCombobox/CdsCombobox.vue.d.ts +255 -197
  15. package/dist/components/CdsContainer/CdsContainer.vue.d.ts +36 -34
  16. package/dist/components/CdsContainer/context.d.ts +1 -1
  17. package/dist/components/CdsContentSwitcher/CdsContentSwitcher.vue.d.ts +2 -2
  18. package/dist/components/CdsContentSwitcher/CdsContentSwitcherItem.vue.d.ts +27 -27
  19. package/dist/components/CdsDatePicker/CdsDatePicker.vue.d.ts +3 -3
  20. package/dist/components/CdsDatePicker/composable/calendar.d.ts +4 -4
  21. package/dist/components/CdsDivider/CdsDivider.vue.d.ts +45 -0
  22. package/dist/components/CdsDivider/index.d.ts +1 -0
  23. package/dist/components/CdsDrawer/CdsDrawer.vue.d.ts +60 -6
  24. package/dist/components/CdsDropdown/CdsDropdown.vue.d.ts +190 -214
  25. package/dist/components/CdsEmptyState/CdsEmptyState.vue.d.ts +4 -4
  26. package/dist/components/CdsExpandablePanel/CdsExpandablePanel.vue.d.ts +13 -13
  27. package/dist/components/CdsExpandablePanel/CdsExpandablePanelTitle.vue.d.ts +10 -10
  28. package/dist/components/CdsExpandablePanel/CdsExpandablePanels.vue.d.ts +10 -10
  29. package/dist/components/CdsExpandablePanel/composable/expandablePanelTitleProps.d.ts +3 -3
  30. package/dist/components/CdsFooter/CdsFooter.vue.d.ts +14 -5
  31. package/dist/components/CdsForm/CdsForm.vue.d.ts +2 -2
  32. package/dist/components/CdsGrid/composable/column.d.ts +1 -1
  33. package/dist/components/CdsGrid/composable/subgrid.d.ts +1 -1
  34. package/dist/components/CdsGrid/mode/CSSGrid.d.ts +1 -1
  35. package/dist/components/CdsGrid/mode/FlexGrid.d.ts +1 -1
  36. package/dist/components/CdsHeader/CdsHeader.vue.d.ts +14 -5
  37. package/dist/components/CdsIcon/CdsIcon.vue.d.ts +23 -6
  38. package/dist/components/CdsImage/CdsImage.vue.d.ts +264 -0
  39. package/dist/components/CdsImage/components/CdsResponsive.vue.d.ts +87 -0
  40. package/dist/components/CdsImage/components/index.d.ts +1 -0
  41. package/dist/components/CdsImage/composable/image.d.ts +134 -0
  42. package/dist/components/CdsImage/composable/index.d.ts +2 -0
  43. package/dist/components/CdsImage/composable/responsive.d.ts +35 -0
  44. package/dist/components/CdsImage/index.d.ts +2 -0
  45. package/dist/components/CdsInput/CdsInput.vue.d.ts +18 -18
  46. package/dist/components/CdsInput/CdsInputDescription.vue.d.ts +3 -3
  47. package/dist/components/CdsInput/CdsInputLabel.vue.d.ts +15 -4
  48. package/dist/components/CdsLayout/CdsLayout.vue.d.ts +3 -3
  49. package/dist/components/CdsLayout/context.d.ts +1 -1
  50. package/dist/components/CdsLink/CdsLink.vue.d.ts +5 -15
  51. package/dist/components/CdsList/CdsList.vue.d.ts +11 -26
  52. package/dist/components/CdsList/CdsListGroup.vue.d.ts +7 -7
  53. package/dist/components/CdsList/CdsListItem.vue.d.ts +12 -12
  54. package/dist/components/CdsList/composable/list.d.ts +1 -1
  55. package/dist/components/CdsLoader/CdsLoader.vue.d.ts +3 -3
  56. package/dist/components/CdsMenu/CdsMenu.vue.d.ts +50 -16
  57. package/dist/components/CdsModal/CdsModal.vue.d.ts +32 -10
  58. package/dist/components/CdsNotification/CdsNotification.vue.d.ts +23 -27
  59. package/dist/components/CdsNotification/CdsNotificationAlert.vue.d.ts +44 -26
  60. package/dist/components/CdsNotification/composable/notification.d.ts +4 -4
  61. package/dist/components/CdsOverlay/CdsOverlay.vue.d.ts +35 -3
  62. package/dist/components/CdsOverlay/composable/activator.d.ts +19 -6
  63. package/dist/components/CdsOverlay/composable/locationStrategies.d.ts +6 -5
  64. package/dist/components/CdsOverlay/composable/scrollStrategies.d.ts +1 -1
  65. package/dist/components/CdsOverlay/composable/teleport.d.ts +25 -1
  66. package/dist/components/CdsOverlay/constants.d.ts +2 -0
  67. package/dist/components/CdsPagination/CdsPagination.vue.d.ts +28 -4
  68. package/dist/components/CdsProgress/CdsProgress.vue.d.ts +2 -2
  69. package/dist/components/CdsRadioButton/CdsRadio.vue.d.ts +18 -14
  70. package/dist/components/CdsRadioButton/CdsRadioButton.vue.d.ts +2 -2
  71. package/dist/components/CdsSelect/CdsSelect.vue.d.ts +81 -67
  72. package/dist/components/CdsSidebar/CdsSidebar.vue.d.ts +3 -3
  73. package/dist/components/CdsSkeletonLoader/CdsSkeletonLoader.vue.d.ts +5 -5
  74. package/dist/components/CdsSlideGroup/CdsSlideGroup.vue.d.ts +19 -19
  75. package/dist/components/CdsStages/CdsStages.vue.d.ts +3 -3
  76. package/dist/components/CdsStatus/CdsStatus.vue.d.ts +30 -23
  77. package/dist/components/CdsSteps/CdsSteps.vue.d.ts +7 -67
  78. package/dist/components/CdsSteps/CdsStepsItem.vue.d.ts +5 -5
  79. package/dist/components/CdsSteps/context.d.ts +3 -2
  80. package/dist/components/CdsTable/CdsTable.vue.d.ts +90 -45
  81. package/dist/components/CdsTable/components/Footer/Footer.d.ts +1 -1
  82. package/dist/components/CdsTable/components/Header/DragHandle.d.ts +1 -1
  83. package/dist/components/CdsTable/components/Icons/ExpandIcon.d.ts +2 -1
  84. package/dist/components/CdsTable/components/Table/InternalTable.d.ts +83 -26
  85. package/dist/components/CdsTable/components/TableProvider.d.ts +86 -29
  86. package/dist/components/CdsTable/composable/filter.d.ts +1 -1
  87. package/dist/components/CdsTable/composable/flat.d.ts +1 -1
  88. package/dist/components/CdsTable/composable/pagination.d.ts +4 -2
  89. package/dist/components/CdsTable/composable/scroll.d.ts +4607 -0
  90. package/dist/components/CdsTable/composable/selection.d.ts +1 -1
  91. package/dist/components/CdsTable/composable/sorter.d.ts +1 -1
  92. package/dist/components/CdsTable/composable/sticky.d.ts +1 -1
  93. package/dist/components/CdsTable/composable/table.d.ts +53 -13
  94. package/dist/components/CdsTable/constants.d.ts +1 -0
  95. package/dist/components/CdsTable/context/summary.d.ts +1 -1
  96. package/dist/components/CdsTable/context/table.d.ts +1 -1
  97. package/dist/components/CdsTable/interface.d.ts +11 -7
  98. package/dist/components/CdsTable/utils/column.d.ts +1 -3
  99. package/dist/components/CdsTable/utils/index.d.ts +1 -1
  100. package/dist/components/CdsTable/utils/vnode.d.ts +10 -0
  101. package/dist/components/CdsTabs/CdsTab.vue.d.ts +14 -14
  102. package/dist/components/CdsTabs/CdsTabs.vue.d.ts +29 -34
  103. package/dist/components/CdsTag/CdsTag.vue.d.ts +45 -41
  104. package/dist/components/CdsTextArea/CdsTextArea.vue.d.ts +71 -49
  105. package/dist/components/CdsTextInput/CdsTextInput.vue.d.ts +81 -71
  106. package/dist/components/CdsTimePicker/CdsTimePicker.vue.d.ts +2 -2
  107. package/dist/components/CdsTimePicker/composable/time.d.ts +2 -2
  108. package/dist/components/CdsToggle/CdsToggle.vue.d.ts +2 -2
  109. package/dist/components/CdsToolbar/CdsToolbar.vue.d.ts +44 -2
  110. package/dist/components/CdsTooltip/CdsTooltip.vue.d.ts +30 -20
  111. package/dist/components/CdsTree/CdsTree.vue.d.ts +708 -0
  112. package/dist/components/CdsTree/CdsTreeDirectory.vue.d.ts +446 -0
  113. package/dist/components/CdsTree/CdsTreeNode.vue.d.ts +119 -0
  114. package/dist/components/CdsTree/components/DropIndicator.d.ts +9 -0
  115. package/dist/components/CdsTree/components/Indent.d.ts +10 -0
  116. package/dist/components/CdsTree/components/MotionTreeNode.d.ts +128 -0
  117. package/dist/components/CdsTree/components/NodeList.d.ts +191 -0
  118. package/dist/components/CdsTree/components/SwitcherIcon.d.ts +12 -0
  119. package/dist/components/CdsTree/components/TreeContext.d.ts +81 -0
  120. package/dist/components/CdsTree/components/TreeProvider.d.ts +619 -0
  121. package/dist/components/CdsTree/components/VirtualList/Filler.d.ts +12 -0
  122. package/dist/components/CdsTree/components/VirtualList/Item.d.ts +6 -0
  123. package/dist/components/CdsTree/components/VirtualList/ScrollBar.d.ts +33 -0
  124. package/dist/components/CdsTree/components/VirtualList/VirtualList.d.ts +84 -0
  125. package/dist/components/CdsTree/components/VirtualList/features/index.d.ts +5 -0
  126. package/dist/components/CdsTree/components/VirtualList/features/useFrameWheel.d.ts +10 -0
  127. package/dist/components/CdsTree/components/VirtualList/features/useHeights.d.ts +9 -0
  128. package/dist/components/CdsTree/components/VirtualList/features/useMobileTouchMove.d.ts +2 -0
  129. package/dist/components/CdsTree/components/VirtualList/features/useOriginScroll.d.ts +2 -0
  130. package/dist/components/CdsTree/components/VirtualList/features/useScrollTo.d.ts +4 -0
  131. package/dist/components/CdsTree/components/VirtualList/index.d.ts +2 -0
  132. package/dist/components/CdsTree/components/VirtualList/interface.d.ts +10 -0
  133. package/dist/components/CdsTree/composable/events.d.ts +133 -0
  134. package/dist/components/CdsTree/composable/index.d.ts +2 -0
  135. package/dist/components/CdsTree/composable/tree.d.ts +273 -0
  136. package/dist/components/CdsTree/composable/treeNode.d.ts +75 -0
  137. package/dist/components/CdsTree/index.d.ts +5 -0
  138. package/dist/components/CdsTree/interface.d.ts +104 -4
  139. package/dist/components/CdsTree/utils/conduct.d.ts +1 -1
  140. package/dist/components/CdsTree/utils/data.d.ts +70 -0
  141. package/dist/components/CdsTree/utils/diff.d.ts +6 -0
  142. package/dist/components/CdsTree/utils/directory.d.ts +9 -0
  143. package/dist/components/CdsTree/utils/index.d.ts +2 -0
  144. package/dist/components/CdsUploader/CdsUploader.vue.d.ts +637 -57
  145. package/dist/components/CdsUploader/components/AjaxUploader.d.ts +603 -15
  146. package/dist/components/CdsUploader/components/UploadList/ListItem.d.ts +19 -19
  147. package/dist/components/CdsUploader/components/UploadList/UploadList.d.ts +18 -18
  148. package/dist/components/CdsUploader/composable/upload.d.ts +221 -19
  149. package/dist/components/CdsUploader/index.d.ts +1 -0
  150. package/dist/components/CdsUploader/interface.d.ts +1 -1
  151. package/dist/components/index.d.ts +10 -1
  152. package/dist/composable/appearance.d.ts +4 -4
  153. package/dist/composable/color.d.ts +17 -6
  154. package/dist/composable/datetime.d.ts +4 -4
  155. package/dist/composable/delay.d.ts +3 -2
  156. package/dist/composable/direction.d.ts +1 -1
  157. package/dist/composable/display.d.ts +2 -0
  158. package/dist/composable/domObserver.d.ts +5 -0
  159. package/dist/composable/field.d.ts +17 -5
  160. package/dist/composable/filter.d.ts +30 -0
  161. package/dist/composable/form.d.ts +2 -2
  162. package/dist/composable/group.d.ts +3 -3
  163. package/dist/composable/icon.d.ts +3 -3
  164. package/dist/composable/index.d.ts +4 -1
  165. package/dist/composable/invertColor.d.ts +19 -0
  166. package/dist/composable/layout.d.ts +20 -20
  167. package/dist/composable/loading.d.ts +2 -2
  168. package/dist/composable/menu.d.ts +3 -1
  169. package/dist/composable/nested/nested.d.ts +2 -2
  170. package/dist/composable/overlay.d.ts +9 -1
  171. package/dist/{components/CdsDropdown/composable → composable}/scrolling.d.ts +2 -2
  172. package/dist/composable/select.d.ts +12 -19
  173. package/dist/composable/size.d.ts +1 -1
  174. package/dist/composable/text.d.ts +2 -2
  175. package/dist/composable/theme.d.ts +13 -22
  176. package/dist/composable/transition.d.ts +2 -0
  177. package/dist/composable/transparent.d.ts +19 -0
  178. package/dist/composable/validation.d.ts +2 -2
  179. package/dist/composable/variant.d.ts +2 -5
  180. package/dist/create.d.ts +6 -1
  181. package/dist/globals.d.ts +7 -0
  182. package/dist/locale/index.d.ts +4 -1
  183. package/dist/themes/b2bDark.d.ts +190 -0
  184. package/dist/themes/b2bLight.d.ts +190 -0
  185. package/dist/themes/cdsDark.d.ts +190 -0
  186. package/dist/themes/cdsLight.d.ts +190 -0
  187. package/dist/themes/colors.d.ts +458 -0
  188. package/dist/themes/index.d.ts +5 -4
  189. package/dist/themes/themes.d.ts +4 -4
  190. package/dist/transitions/collapseTransition.d.ts +11 -0
  191. package/dist/transitions/index.d.ts +1 -0
  192. package/dist/utils/colorsUtils/utils.d.ts +1 -0
  193. package/dist/utils/date/date.d.ts +1 -0
  194. package/dist/utils/dom/bindProps.d.ts +2 -0
  195. package/dist/utils/dom/box.d.ts +1 -0
  196. package/dist/utils/helpers.d.ts +24 -6
  197. package/dist/utils/index.d.ts +3 -1
  198. package/dist/utils/propsFactory.d.ts +1 -1
  199. package/dist/utils/use/flattenChildren.d.ts +3 -0
  200. package/nuxt.js +2 -1
  201. package/package.json +5 -1
  202. package/src/scss/index.scss +0 -2
  203. package/src/scss/mixins/layout/_shadow.scss +43 -2
  204. package/src/scss/mixins/layout/_spacing.scss +13 -12
  205. package/src/scss/mixins/layout/index.scss +1 -0
  206. package/src/scss/mixins/typo.scss +261 -58
  207. package/src/scss/modules/_reset.scss +5 -4
  208. package/src/scss/modules/_transition.scss +31 -0
  209. package/src/scss/modules/_typography.scss +6 -2
  210. package/src/scss/modules/grid/_css-grid.scss +12 -19
  211. package/src/scss/modules/grid/_flex-grid.scss +9 -5
  212. package/src/scss/modules/grid/_mixins.scss +23 -31
  213. package/src/scss/themes/.deprecated +1 -0
  214. package/src/scss/themes/b2b/tokens.json +104 -104
  215. package/src/scss/themes/b2b/variables.css +142 -0
  216. package/src/scss/themes/cds/tokens.json +104 -104
  217. package/src/scss/themes/cds/variables.css +173 -31
  218. package/src/scss/themes/index.ts +1 -1
  219. package/src/scss/utility/index.scss +1 -0
  220. package/src/scss/utility/lists.scss +1 -1
  221. package/src/scss/utility/typography.scss +63 -0
  222. package/src/scss/utility/variables/exports/_display.scss +4 -4
  223. package/src/scss/utility/variables/exports/_typography.scss +22 -0
  224. package/src/scss/utility/variables/index.scss +1 -0
  225. package/src/scss/utility/variables/typography.scss +93 -0
  226. package/src/themes/b2bDark.ts +191 -0
  227. package/src/themes/b2bLight.ts +191 -0
  228. package/src/themes/cdsDark.ts +191 -0
  229. package/src/themes/cdsLight.ts +191 -0
  230. package/src/themes/colors.ts +492 -0
  231. package/src/themes/css/b2bDark.css +184 -0
  232. package/src/themes/css/b2bLight.css +184 -0
  233. package/src/themes/css/cdsDark.css +184 -0
  234. package/src/themes/css/cdsLight.css +184 -0
  235. package/src/themes/index.ts +8 -0
  236. package/src/themes/themes.d.ts +10 -0
  237. package/dist/components/CdsDropdown/composable/index.d.ts +0 -1
  238. package/dist/components/CdsSteps/svg/_CdsStepCurrentIcon.vue.d.ts +0 -2
  239. package/dist/components/CdsSteps/svg/_CdsStepsIconIncomplete.vue.d.ts +0 -2
  240. package/dist/composable/dark.d.ts +0 -19
  241. package/dist/plugins/index.d.ts +0 -2
  242. package/dist/themes/b2b.d.ts +0 -26
  243. package/dist/themes/cds.d.ts +0 -26
  244. package/dist/themes/dark.d.ts +0 -26
  245. package/dist/themes/promo.d.ts +0 -26
  246. package/dist/utils/colors.d.ts +0 -368
  247. /package/dist/{components/CdsTable/utils → utils/use}/listener.d.ts +0 -0
package/src/themes/b2bLight.ts ADDED
@@ -0,0 +1,191 @@
1
+ import colors from './colors';
2
+
3
+ export default {
4
+ dark: false,
5
+ colors: {
6
+ 'surface-secondary': colors.gray.light0,
7
+ 'surface-primary': colors.gray.light0,
8
+ 'surface-overlay': colors.alpha.dark500,
9
+ 'surface-inverse': colors.silver.light900,
10
+ 'surface-elevated': colors.gray.light0,
11
+ 'status-warning-surface': colors.yellow.light600,
12
+ 'status-warning-line': colors.yellow.light500,
13
+ 'status-warning-fill-hover': colors.yellow.light200,
14
+ 'status-warning-fill': colors.yellow.light50,
15
+ 'status-warning-content': colors.yellow.light900,
16
+ 'status-success-surface': colors.green.light600,
17
+ 'status-success-line': colors.green.light500,
18
+ 'status-success-fill-hover': colors.green.light200,
19
+ 'status-success-fill': colors.green.light50,
20
+ 'status-success-content': colors.green.light900,
21
+ 'status-progress-surface': colors.sky.light600,
22
+ 'status-progress-line': colors.sky.light500,
23
+ 'status-progress-fill-hover': colors.sky.light200,
24
+ 'status-progress-fill': colors.sky.light50,
25
+ 'status-progress-content': colors.sky.light900,
26
+ 'status-info-surface': colors.silver.light600,
27
+ 'status-info-line': colors.silver.light500,
28
+ 'status-info-fill-hover': colors.silver.light200,
29
+ 'status-info-fill': colors.silver.light50,
30
+ 'status-info-content': colors.silver.light900,
31
+ 'status-indication-surface': colors.red.light700,
32
+ 'status-indication-line': colors.red.light700,
33
+ 'status-indication-fill-hover': colors.red.light200,
34
+ 'status-indication-fill': colors.red.light50,
35
+ 'status-indication-content': colors.red.light900,
36
+ 'status-danger-surface': colors.red.light700,
37
+ 'status-danger-line': colors.red.light700,
38
+ 'status-danger-fill-hover': colors.red.light200,
39
+ 'status-danger-fill': colors.red.light50,
40
+ 'status-danger-content': colors.red.light900,
41
+ 'page-primary': colors.silver.light10,
42
+ 'other-teal-surface': colors.teal.light600,
43
+ 'other-teal-line': colors.teal.light500,
44
+ 'other-teal-fill-hover': colors.teal.light200,
45
+ 'other-teal-fill': colors.teal.light50,
46
+ 'other-teal-content': colors.teal.light950,
47
+ 'other-purple-surface': colors.purple.light600,
48
+ 'other-purple-line': colors.purple.light500,
49
+ 'other-purple-fill-hover': colors.purple.light200,
50
+ 'other-purple-fill': colors.purple.light50,
51
+ 'other-purple-content': colors.purple.light950,
52
+ 'other-pink-surface': colors.pink.light600,
53
+ 'other-pink-line': colors.pink.light500,
54
+ 'other-pink-fill-hover': colors.pink.light200,
55
+ 'other-pink-fill': colors.pink.light50,
56
+ 'other-pink-content': colors.pink.light950,
57
+ 'other-lime-surface': colors.lime.light600,
58
+ 'other-lime-line': colors.lime.light500,
59
+ 'other-lime-fill-hover': colors.lime.light200,
60
+ 'other-lime-fill': colors.lime.light50,
61
+ 'other-lime-content': colors.lime.light950,
62
+ 'other-lemon-surface': colors.lemon.light600,
63
+ 'other-lemon-line': colors.lemon.light500,
64
+ 'other-lemon-fill-hover': colors.lemon.light200,
65
+ 'other-lemon-fill': colors.lemon.light50,
66
+ 'other-lemon-content': colors.lemon.light950,
67
+ 'other-indigo-surface': colors.indigo.light600,
68
+ 'other-indigo-line': colors.indigo.light500,
69
+ 'other-indigo-fill-hover': colors.indigo.light200,
70
+ 'other-indigo-fill': colors.indigo.light50,
71
+ 'other-indigo-content': colors.indigo.light950,
72
+ 'other-cyan-surface': colors.cyan.light600,
73
+ 'other-cyan-line': colors.cyan.light500,
74
+ 'other-cyan-fill-hover': colors.cyan.light200,
75
+ 'other-cyan-fill': colors.cyan.light50,
76
+ 'other-cyan-content': colors.cyan.light950,
77
+ 'other-chocolate-surface': colors.chocolate.light600,
78
+ 'other-chocolate-line': colors.chocolate.light500,
79
+ 'other-chocolate-fill-hover': colors.chocolate.light200,
80
+ 'other-chocolate-fill': colors.chocolate.light50,
81
+ 'other-chocolate-content': colors.chocolate.light950,
82
+ 'line-tertiary-hover': colors.silver.light300,
83
+ 'line-tertiary': colors.silver.light100,
84
+ 'line-selected-hover': colors.blue.light700,
85
+ 'line-selected': colors.blue.light500,
86
+ 'line-secondary-hover': colors.silver.light500,
87
+ 'line-secondary': colors.silver.light300,
88
+ 'line-primary-hover': colors.silver.light700,
89
+ 'line-primary': colors.silver.light500,
90
+ 'line-focus-outline': colors.blue.light200,
91
+ 'line-focus': colors.blue.light500,
92
+ 'line-elevated': colors.alpha.light0,
93
+ 'line-disable': colors.silver.light200,
94
+ 'fill-selected-hover': colors.blue.light700,
95
+ 'fill-selected': colors.blue.light500,
96
+ 'fill-secondary-hover': colors.silver.light100,
97
+ 'fill-secondary-active': colors.silver.light200,
98
+ 'fill-secondary': colors.silver.light50,
99
+ 'fill-primary-hover': colors.silver.light50,
100
+ 'fill-primary-active': colors.silver.light100,
101
+ 'fill-primary': colors.gray.light0,
102
+ 'fill-elevated': colors.gray.light0,
103
+ 'fill-disable': colors.silver.light50,
104
+ 'content-tertiary': colors.silver.light700,
105
+ 'content-secondary': colors.silver.light800,
106
+ 'content-primary': colors.silver.light950,
107
+ 'content-placeholder': colors.silver.light600,
108
+ 'content-on-dark': colors.gray.light0,
109
+ 'content-link-visited': colors.pink.light700,
110
+ 'content-link': colors.blue.light700,
111
+ 'content-inverse': colors.gray.light0,
112
+ 'content-disable': colors.silver.light500,
113
+ 'brand-secondary-hover': colors.sky.light100,
114
+ 'brand-secondary-border': colors.sky.light50,
115
+ 'brand-secondary-active': colors.sky.light200,
116
+ 'brand-secondary': colors.sky.light50,
117
+ 'brand-primary-hover': colors.sky.light600,
118
+ 'brand-primary-content': colors.sky.light900,
119
+ 'brand-primary-border': colors.sky.light700,
120
+ 'brand-primary-active': colors.sky.light500,
121
+ 'brand-primary': colors.sky.light700
122
+ },
123
+ variables: {
124
+ 'spacing-900': '4rem',
125
+ 'spacing-800': '3rem',
126
+ 'spacing-700': '2.5rem',
127
+ 'spacing-600': '2rem',
128
+ 'spacing-500': '1.5rem',
129
+ 'spacing-50': '0.125rem',
130
+ 'spacing-400': '1rem',
131
+ 'spacing-300': '0.75rem',
132
+ 'spacing-200': '0.5rem',
133
+ 'spacing-1100': '6rem',
134
+ 'spacing-1000': '5rem',
135
+ 'spacing-100': '0.25rem',
136
+ 'shadow-y-minus-400': '-0.5rem',
137
+ 'shadow-y-minus-300': '-0.375rem',
138
+ 'shadow-y-minus-200': '-0.25rem',
139
+ 'shadow-y-minus-100': '-0.125rem',
140
+ 'shadow-y-400': '0.5rem',
141
+ 'shadow-y-300': '0.375rem',
142
+ 'shadow-y-200': '0.25rem',
143
+ 'shadow-y-100': '0.125rem',
144
+ 'shadow-x-minus-400': '-0.5rem',
145
+ 'shadow-x-minus-300': '-0.375rem',
146
+ 'shadow-x-minus-200': '-0.25rem',
147
+ 'shadow-x-minus-100': '-0.125rem',
148
+ 'shadow-x-400': '0.5rem',
149
+ 'shadow-x-300': '0.375rem',
150
+ 'shadow-x-200': '0.25rem',
151
+ 'shadow-x-100': '0.125rem',
152
+ 'shadow-blur-400': '0.75rem',
153
+ 'shadow-blur-300': '0.5rem',
154
+ 'shadow-blur-200': '0.25rem',
155
+ 'shadow-blur-100': '0.125rem',
156
+ 'font-weight-regular': 400,
157
+ 'font-weight-bold': 700,
158
+ 'font-size-900': '3.25rem',
159
+ 'font-size-800': '2.75rem',
160
+ 'font-size-700': '2.25rem',
161
+ 'font-size-600': '1.75rem',
162
+ 'font-size-500': '1.5rem',
163
+ 'font-size-50': '0.625rem',
164
+ 'font-size-400': '1.25rem',
165
+ 'font-size-300': '1rem',
166
+ 'font-size-200': '0.875rem',
167
+ 'font-size-1100': '4.5rem',
168
+ 'font-size-1000': '3.75rem',
169
+ 'font-size-100': '0.75rem',
170
+ 'font-line-height-900': '4rem',
171
+ 'font-line-height-800': '3rem',
172
+ 'font-line-height-700': '2.5rem',
173
+ 'font-line-height-600': '2rem',
174
+ 'font-line-height-500': '1.75rem',
175
+ 'font-line-height-50': '0.75rem',
176
+ 'font-line-height-400': '1.5rem',
177
+ 'font-line-height-300': '1.25rem',
178
+ 'font-line-height-200': '1rem',
179
+ 'font-line-height-1100': '5.5rem',
180
+ 'font-line-height-1000': '4.5rem',
181
+ 'font-line-height-100': '0.875rem',
182
+ 'font-letter-spacing-500': '0.0625rem',
183
+ 'font-family': 'Arial',
184
+ 'border-radius-300': '0.5rem',
185
+ 'border-radius-200': '0.25rem',
186
+ 'border-radius-100': '0.125rem',
187
+ 'border-200': '0.125rem',
188
+ 'border-100': '0.0625rem',
189
+ 'base-unit': '16px'
190
+ }
191
+ };
package/src/themes/cdsDark.ts ADDED
@@ -0,0 +1,191 @@
1
+ import colors from './colors';
2
+
3
+ export default {
4
+ dark: true,
5
+ colors: {
6
+ 'surface-secondary': colors.silver.dark25,
7
+ 'surface-primary': colors.silver.dark10,
8
+ 'surface-overlay': colors.alpha.dark800,
9
+ 'surface-inverse': colors.silver.dark900,
10
+ 'surface-elevated': colors.silver.dark25,
11
+ 'status-warning-surface': colors.yellow.dark600,
12
+ 'status-warning-line': colors.yellow.dark500,
13
+ 'status-warning-fill-hover': colors.yellow.dark200,
14
+ 'status-warning-fill': colors.yellow.dark50,
15
+ 'status-warning-content': colors.yellow.dark900,
16
+ 'status-success-surface': colors.green.dark600,
17
+ 'status-success-line': colors.green.dark500,
18
+ 'status-success-fill-hover': colors.green.dark200,
19
+ 'status-success-fill': colors.green.dark50,
20
+ 'status-success-content': colors.green.dark900,
21
+ 'status-progress-surface': colors.sky.dark600,
22
+ 'status-progress-line': colors.sky.dark500,
23
+ 'status-progress-fill-hover': colors.sky.dark200,
24
+ 'status-progress-fill': colors.sky.dark50,
25
+ 'status-progress-content': colors.sky.dark900,
26
+ 'status-info-surface': colors.silver.dark600,
27
+ 'status-info-line': colors.silver.dark500,
28
+ 'status-info-fill-hover': colors.silver.dark200,
29
+ 'status-info-fill': colors.silver.dark50,
30
+ 'status-info-content': colors.silver.dark900,
31
+ 'status-indication-surface': colors.red.dark700,
32
+ 'status-indication-line': colors.red.dark700,
33
+ 'status-indication-fill-hover': colors.red.dark200,
34
+ 'status-indication-fill': colors.red.dark50,
35
+ 'status-indication-content': colors.red.dark900,
36
+ 'status-danger-surface': colors.red.dark700,
37
+ 'status-danger-line': colors.red.dark700,
38
+ 'status-danger-fill-hover': colors.red.dark200,
39
+ 'status-danger-fill': colors.red.dark50,
40
+ 'status-danger-content': colors.red.dark900,
41
+ 'page-primary': colors.gray.dark0,
42
+ 'other-teal-surface': colors.teal.dark600,
43
+ 'other-teal-line': colors.teal.dark500,
44
+ 'other-teal-fill-hover': colors.teal.dark200,
45
+ 'other-teal-fill': colors.teal.dark50,
46
+ 'other-teal-content': colors.teal.dark950,
47
+ 'other-purple-surface': colors.purple.dark600,
48
+ 'other-purple-line': colors.purple.dark500,
49
+ 'other-purple-fill-hover': colors.purple.dark200,
50
+ 'other-purple-fill': colors.purple.dark50,
51
+ 'other-purple-content': colors.purple.dark950,
52
+ 'other-pink-surface': colors.pink.dark600,
53
+ 'other-pink-line': colors.pink.dark500,
54
+ 'other-pink-fill-hover': colors.pink.dark200,
55
+ 'other-pink-fill': colors.pink.dark50,
56
+ 'other-pink-content': colors.pink.dark950,
57
+ 'other-lime-surface': colors.lime.dark600,
58
+ 'other-lime-line': colors.lime.dark500,
59
+ 'other-lime-fill-hover': colors.lime.dark200,
60
+ 'other-lime-fill': colors.lime.dark50,
61
+ 'other-lime-content': colors.lime.dark950,
62
+ 'other-lemon-surface': colors.lemon.dark600,
63
+ 'other-lemon-line': colors.lemon.dark500,
64
+ 'other-lemon-fill-hover': colors.lemon.dark200,
65
+ 'other-lemon-fill': colors.lemon.dark50,
66
+ 'other-lemon-content': colors.lemon.dark950,
67
+ 'other-indigo-surface': colors.indigo.dark600,
68
+ 'other-indigo-line': colors.indigo.dark500,
69
+ 'other-indigo-fill-hover': colors.indigo.dark200,
70
+ 'other-indigo-fill': colors.indigo.dark50,
71
+ 'other-indigo-content': colors.indigo.dark950,
72
+ 'other-cyan-surface': colors.cyan.dark600,
73
+ 'other-cyan-line': colors.cyan.dark500,
74
+ 'other-cyan-fill-hover': colors.cyan.dark200,
75
+ 'other-cyan-fill': colors.cyan.dark50,
76
+ 'other-cyan-content': colors.cyan.dark950,
77
+ 'other-chocolate-surface': colors.chocolate.dark600,
78
+ 'other-chocolate-line': colors.chocolate.dark500,
79
+ 'other-chocolate-fill-hover': colors.chocolate.dark200,
80
+ 'other-chocolate-fill': colors.chocolate.dark50,
81
+ 'other-chocolate-content': colors.chocolate.dark950,
82
+ 'line-tertiary-hover': colors.silver.dark300,
83
+ 'line-tertiary': colors.silver.dark100,
84
+ 'line-selected-hover': colors.blue.dark700,
85
+ 'line-selected': colors.blue.dark500,
86
+ 'line-secondary-hover': colors.silver.dark500,
87
+ 'line-secondary': colors.silver.dark300,
88
+ 'line-primary-hover': colors.silver.dark700,
89
+ 'line-primary': colors.silver.dark500,
90
+ 'line-focus-outline': colors.blue.dark100,
91
+ 'line-focus': colors.blue.dark500,
92
+ 'line-elevated': colors.alpha.silver400,
93
+ 'line-disable': colors.silver.dark200,
94
+ 'fill-selected-hover': colors.blue.dark700,
95
+ 'fill-selected': colors.blue.dark500,
96
+ 'fill-secondary-hover': colors.silver.dark100,
97
+ 'fill-secondary-active': colors.silver.dark200,
98
+ 'fill-secondary': colors.silver.dark50,
99
+ 'fill-primary-hover': colors.silver.dark50,
100
+ 'fill-primary-active': colors.silver.dark100,
101
+ 'fill-primary': colors.silver.dark10,
102
+ 'fill-elevated': colors.silver.dark300,
103
+ 'fill-disable': colors.silver.dark50,
104
+ 'content-tertiary': colors.silver.dark700,
105
+ 'content-secondary': colors.silver.dark800,
106
+ 'content-primary': colors.silver.dark950,
107
+ 'content-placeholder': colors.silver.dark600,
108
+ 'content-on-dark': colors.gray.dark1000,
109
+ 'content-link-visited': colors.purple.dark700,
110
+ 'content-link': colors.blue.dark700,
111
+ 'content-inverse': colors.gray.dark0,
112
+ 'content-disable': colors.silver.dark500,
113
+ 'brand-secondary-hover': colors.blue.dark50,
114
+ 'brand-secondary-border': colors.blue.dark100,
115
+ 'brand-secondary-active': colors.blue.dark100,
116
+ 'brand-secondary': colors.blue.dark10,
117
+ 'brand-primary-hover': colors.blue.dark100,
118
+ 'brand-primary-content': colors.blue.dark900,
119
+ 'brand-primary-border': colors.blue.dark300,
120
+ 'brand-primary-active': colors.blue.dark50,
121
+ 'brand-primary': colors.blue.dark300
122
+ },
123
+ variables: {
124
+ 'spacing-900': '4rem',
125
+ 'spacing-800': '3rem',
126
+ 'spacing-700': '2.5rem',
127
+ 'spacing-600': '2rem',
128
+ 'spacing-500': '1.5rem',
129
+ 'spacing-50': '0.125rem',
130
+ 'spacing-400': '1rem',
131
+ 'spacing-300': '0.75rem',
132
+ 'spacing-200': '0.5rem',
133
+ 'spacing-1100': '6rem',
134
+ 'spacing-1000': '5rem',
135
+ 'spacing-100': '0.25rem',
136
+ 'shadow-y-minus-400': '0rem',
137
+ 'shadow-y-minus-300': '0rem',
138
+ 'shadow-y-minus-200': '0rem',
139
+ 'shadow-y-minus-100': '0rem',
140
+ 'shadow-y-400': '0rem',
141
+ 'shadow-y-300': '0rem',
142
+ 'shadow-y-200': '0rem',
143
+ 'shadow-y-100': '0rem',
144
+ 'shadow-x-minus-400': '0rem',
145
+ 'shadow-x-minus-300': '0rem',
146
+ 'shadow-x-minus-200': '0rem',
147
+ 'shadow-x-minus-100': '0rem',
148
+ 'shadow-x-400': '0rem',
149
+ 'shadow-x-300': '0rem',
150
+ 'shadow-x-200': '0rem',
151
+ 'shadow-x-100': '0rem',
152
+ 'shadow-blur-400': '0rem',
153
+ 'shadow-blur-300': '0rem',
154
+ 'shadow-blur-200': '0rem',
155
+ 'shadow-blur-100': '0rem',
156
+ 'font-weight-regular': 400,
157
+ 'font-weight-bold': 700,
158
+ 'font-size-900': '3.25rem',
159
+ 'font-size-800': '2.75rem',
160
+ 'font-size-700': '2.25rem',
161
+ 'font-size-600': '1.75rem',
162
+ 'font-size-500': '1.5rem',
163
+ 'font-size-50': '0.625rem',
164
+ 'font-size-400': '1.25rem',
165
+ 'font-size-300': '1rem',
166
+ 'font-size-200': '0.875rem',
167
+ 'font-size-1100': '4.5rem',
168
+ 'font-size-1000': '3.75rem',
169
+ 'font-size-100': '0.75rem',
170
+ 'font-line-height-900': '4rem',
171
+ 'font-line-height-800': '3rem',
172
+ 'font-line-height-700': '2.5rem',
173
+ 'font-line-height-600': '2rem',
174
+ 'font-line-height-500': '1.75rem',
175
+ 'font-line-height-50': '0.75rem',
176
+ 'font-line-height-400': '1.5rem',
177
+ 'font-line-height-300': '1.25rem',
178
+ 'font-line-height-200': '1rem',
179
+ 'font-line-height-1100': '5.5rem',
180
+ 'font-line-height-1000': '4.5rem',
181
+ 'font-line-height-100': '0.875rem',
182
+ 'font-letter-spacing-500': '0.0625rem',
183
+ 'font-family': 'Arial',
184
+ 'border-radius-300': '0.5rem',
185
+ 'border-radius-200': '0.25rem',
186
+ 'border-radius-100': '0.125rem',
187
+ 'border-200': '0.125rem',
188
+ 'border-100': '0.0625rem',
189
+ 'base-unit': '16px'
190
+ }
191
+ };
package/src/themes/cdsLight.ts ADDED
@@ -0,0 +1,191 @@
1
+ import colors from './colors';
2
+
3
+ export default {
4
+ dark: false,
5
+ colors: {
6
+ 'surface-secondary': colors.silver.light10,
7
+ 'surface-primary': colors.gray.light0,
8
+ 'surface-overlay': colors.alpha.dark500,
9
+ 'surface-inverse': colors.silver.light900,
10
+ 'surface-elevated': colors.gray.light0,
11
+ 'status-warning-surface': colors.yellow.light600,
12
+ 'status-warning-line': colors.yellow.light500,
13
+ 'status-warning-fill-hover': colors.yellow.light200,
14
+ 'status-warning-fill': colors.yellow.light50,
15
+ 'status-warning-content': colors.yellow.light900,
16
+ 'status-success-surface': colors.green.light600,
17
+ 'status-success-line': colors.green.light500,
18
+ 'status-success-fill-hover': colors.green.light200,
19
+ 'status-success-fill': colors.green.light50,
20
+ 'status-success-content': colors.green.light900,
21
+ 'status-progress-surface': colors.sky.light600,
22
+ 'status-progress-line': colors.sky.light500,
23
+ 'status-progress-fill-hover': colors.sky.light200,
24
+ 'status-progress-fill': colors.sky.light50,
25
+ 'status-progress-content': colors.sky.light900,
26
+ 'status-info-surface': colors.silver.light600,
27
+ 'status-info-line': colors.silver.light500,
28
+ 'status-info-fill-hover': colors.silver.light200,
29
+ 'status-info-fill': colors.silver.light50,
30
+ 'status-info-content': colors.silver.light900,
31
+ 'status-indication-surface': colors.red.light700,
32
+ 'status-indication-line': colors.red.light700,
33
+ 'status-indication-fill-hover': colors.red.light200,
34
+ 'status-indication-fill': colors.red.light50,
35
+ 'status-indication-content': colors.red.light900,
36
+ 'status-danger-surface': colors.red.light700,
37
+ 'status-danger-line': colors.red.light700,
38
+ 'status-danger-fill-hover': colors.red.light200,
39
+ 'status-danger-fill': colors.red.light50,
40
+ 'status-danger-content': colors.red.light900,
41
+ 'page-primary': colors.silver.light10,
42
+ 'other-teal-surface': colors.teal.light600,
43
+ 'other-teal-line': colors.teal.light500,
44
+ 'other-teal-fill-hover': colors.teal.light200,
45
+ 'other-teal-fill': colors.teal.light50,
46
+ 'other-teal-content': colors.teal.light950,
47
+ 'other-purple-surface': colors.purple.light600,
48
+ 'other-purple-line': colors.purple.light500,
49
+ 'other-purple-fill-hover': colors.purple.light200,
50
+ 'other-purple-fill': colors.purple.light50,
51
+ 'other-purple-content': colors.purple.light950,
52
+ 'other-pink-surface': colors.pink.light600,
53
+ 'other-pink-line': colors.pink.light500,
54
+ 'other-pink-fill-hover': colors.pink.light200,
55
+ 'other-pink-fill': colors.pink.light50,
56
+ 'other-pink-content': colors.pink.light950,
57
+ 'other-lime-surface': colors.lime.light600,
58
+ 'other-lime-line': colors.lime.light500,
59
+ 'other-lime-fill-hover': colors.lime.light200,
60
+ 'other-lime-fill': colors.lime.light50,
61
+ 'other-lime-content': colors.lime.light950,
62
+ 'other-lemon-surface': colors.lemon.light600,
63
+ 'other-lemon-line': colors.lemon.light500,
64
+ 'other-lemon-fill-hover': colors.lemon.light200,
65
+ 'other-lemon-fill': colors.lemon.light50,
66
+ 'other-lemon-content': colors.lemon.light950,
67
+ 'other-indigo-surface': colors.indigo.light600,
68
+ 'other-indigo-line': colors.indigo.light500,
69
+ 'other-indigo-fill-hover': colors.indigo.light200,
70
+ 'other-indigo-fill': colors.indigo.light50,
71
+ 'other-indigo-content': colors.indigo.light950,
72
+ 'other-cyan-surface': colors.cyan.light600,
73
+ 'other-cyan-line': colors.cyan.light500,
74
+ 'other-cyan-fill-hover': colors.cyan.light200,
75
+ 'other-cyan-fill': colors.cyan.light50,
76
+ 'other-cyan-content': colors.cyan.light950,
77
+ 'other-chocolate-surface': colors.chocolate.light600,
78
+ 'other-chocolate-line': colors.chocolate.light500,
79
+ 'other-chocolate-fill-hover': colors.chocolate.light200,
80
+ 'other-chocolate-fill': colors.chocolate.light50,
81
+ 'other-chocolate-content': colors.chocolate.light950,
82
+ 'line-tertiary-hover': colors.silver.light300,
83
+ 'line-tertiary': colors.silver.light100,
84
+ 'line-selected-hover': colors.blue.light700,
85
+ 'line-selected': colors.blue.light500,
86
+ 'line-secondary-hover': colors.silver.light500,
87
+ 'line-secondary': colors.silver.light300,
88
+ 'line-primary-hover': colors.silver.light700,
89
+ 'line-primary': colors.silver.light500,
90
+ 'line-focus-outline': colors.blue.light200,
91
+ 'line-focus': colors.blue.light500,
92
+ 'line-elevated': colors.alpha.light0,
93
+ 'line-disable': colors.silver.light200,
94
+ 'fill-selected-hover': colors.blue.light700,
95
+ 'fill-selected': colors.blue.light500,
96
+ 'fill-secondary-hover': colors.silver.light100,
97
+ 'fill-secondary-active': colors.silver.light200,
98
+ 'fill-secondary': colors.silver.light50,
99
+ 'fill-primary-hover': colors.silver.light50,
100
+ 'fill-primary-active': colors.silver.light100,
101
+ 'fill-primary': colors.gray.light0,
102
+ 'fill-elevated': colors.gray.light0,
103
+ 'fill-disable': colors.silver.light50,
104
+ 'content-tertiary': colors.silver.light700,
105
+ 'content-secondary': colors.silver.light800,
106
+ 'content-primary': colors.silver.light950,
107
+ 'content-placeholder': colors.silver.light600,
108
+ 'content-on-dark': colors.gray.light0,
109
+ 'content-link-visited': colors.purple.light700,
110
+ 'content-link': colors.blue.light700,
111
+ 'content-inverse': colors.gray.light0,
112
+ 'content-disable': colors.silver.light500,
113
+ 'brand-secondary-hover': colors.blue.light100,
114
+ 'brand-secondary-border': colors.blue.light50,
115
+ 'brand-secondary-active': colors.blue.light200,
116
+ 'brand-secondary': colors.blue.light50,
117
+ 'brand-primary-hover': colors.blue.light600,
118
+ 'brand-primary-content': colors.blue.light900,
119
+ 'brand-primary-border': colors.blue.light700,
120
+ 'brand-primary-active': colors.blue.light500,
121
+ 'brand-primary': colors.blue.light700
122
+ },
123
+ variables: {
124
+ 'spacing-900': '4rem',
125
+ 'spacing-800': '3rem',
126
+ 'spacing-700': '2.5rem',
127
+ 'spacing-600': '2rem',
128
+ 'spacing-500': '1.5rem',
129
+ 'spacing-50': '0.125rem',
130
+ 'spacing-400': '1rem',
131
+ 'spacing-300': '0.75rem',
132
+ 'spacing-200': '0.5rem',
133
+ 'spacing-1100': '6rem',
134
+ 'spacing-1000': '5rem',
135
+ 'spacing-100': '0.25rem',
136
+ 'shadow-y-minus-400': '-0.5rem',
137
+ 'shadow-y-minus-300': '-0.375rem',
138
+ 'shadow-y-minus-200': '-0.25rem',
139
+ 'shadow-y-minus-100': '-0.125rem',
140
+ 'shadow-y-400': '0.5rem',
141
+ 'shadow-y-300': '0.375rem',
142
+ 'shadow-y-200': '0.25rem',
143
+ 'shadow-y-100': '0.125rem',
144
+ 'shadow-x-minus-400': '-0.5rem',
145
+ 'shadow-x-minus-300': '-0.375rem',
146
+ 'shadow-x-minus-200': '-0.25rem',
147
+ 'shadow-x-minus-100': '-0.125rem',
148
+ 'shadow-x-400': '0.5rem',
149
+ 'shadow-x-300': '0.375rem',
150
+ 'shadow-x-200': '0.25rem',
151
+ 'shadow-x-100': '0.125rem',
152
+ 'shadow-blur-400': '0.75rem',
153
+ 'shadow-blur-300': '0.5rem',
154
+ 'shadow-blur-200': '0.25rem',
155
+ 'shadow-blur-100': '0.125rem',
156
+ 'font-weight-regular': 400,
157
+ 'font-weight-bold': 700,
158
+ 'font-size-900': '3.25rem',
159
+ 'font-size-800': '2.75rem',
160
+ 'font-size-700': '2.25rem',
161
+ 'font-size-600': '1.75rem',
162
+ 'font-size-500': '1.5rem',
163
+ 'font-size-50': '0.625rem',
164
+ 'font-size-400': '1.25rem',
165
+ 'font-size-300': '1rem',
166
+ 'font-size-200': '0.875rem',
167
+ 'font-size-1100': '4.5rem',
168
+ 'font-size-1000': '3.75rem',
169
+ 'font-size-100': '0.75rem',
170
+ 'font-line-height-900': '4rem',
171
+ 'font-line-height-800': '3rem',
172
+ 'font-line-height-700': '2.5rem',
173
+ 'font-line-height-600': '2rem',
174
+ 'font-line-height-500': '1.75rem',
175
+ 'font-line-height-50': '0.75rem',
176
+ 'font-line-height-400': '1.5rem',
177
+ 'font-line-height-300': '1.25rem',
178
+ 'font-line-height-200': '1rem',
179
+ 'font-line-height-1100': '5.5rem',
180
+ 'font-line-height-1000': '4.5rem',
181
+ 'font-line-height-100': '0.875rem',
182
+ 'font-letter-spacing-500': '0.0625rem',
183
+ 'font-family': 'Arial',
184
+ 'border-radius-300': '0.5rem',
185
+ 'border-radius-200': '0.25rem',
186
+ 'border-radius-100': '0.125rem',
187
+ 'border-200': '0.125rem',
188
+ 'border-100': '0.0625rem',
189
+ 'base-unit': '16px'
190
+ }
191
+ };