@central-design-system/components 2.33.0 → 3.0.0-alpha.1

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 (334) hide show
  1. package/dist/cds.css +1 -111
  2. package/dist/cds.d.ts +48 -0
  3. package/dist/cds.es.js +5454 -0
  4. package/dist/cds.umd.js +1 -0
  5. package/dist/components/CdsBadge/CdsBadge.vue.d.ts +32 -0
  6. package/dist/components/CdsButton/CdsButton.vue.d.ts +140 -0
  7. package/dist/components/CdsCheckbox/CdsCheckbox.vue.d.ts +222 -0
  8. package/dist/components/CdsCheckbox/CdsCheckboxGroup.vue.d.ts +205 -0
  9. package/dist/components/CdsDrawer/CdsDrawer.vue.d.ts +179 -0
  10. package/dist/components/CdsForm/CdsForm.vue.d.ts +99 -0
  11. package/dist/components/CdsGrid/CdsCol.vue.d.ts +73 -0
  12. package/dist/components/CdsGrid/CdsGrid.vue.d.ts +55 -0
  13. package/dist/components/CdsGrid/CdsRow.vue.d.ts +37 -0
  14. package/dist/components/CdsGrid/composable/column.d.ts +84 -0
  15. package/dist/components/CdsGrid/composable/grid.d.ts +24 -0
  16. package/dist/components/CdsGrid/composable/index.d.ts +4 -0
  17. package/dist/components/CdsGrid/composable/subgrid.d.ts +20 -0
  18. package/dist/components/CdsGrid/composable/wide.d.ts +12 -0
  19. package/dist/components/CdsGrid/mode/CSSGrid.d.ts +5 -0
  20. package/dist/components/CdsGrid/mode/FlexGrid.d.ts +5 -0
  21. package/dist/components/CdsGrid/types.d.ts +27 -0
  22. package/dist/components/CdsIcon/CdsIcon.vue.d.ts +44 -0
  23. package/dist/components/CdsIcon/index.d.ts +1 -0
  24. package/dist/components/CdsInput/CdsInput.vue.d.ts +219 -0
  25. package/dist/components/CdsInput/CdsInputCounter.vue.d.ts +39 -0
  26. package/dist/components/CdsInput/CdsInputDescription.vue.d.ts +26 -0
  27. package/dist/components/CdsInput/CdsInputLabel.vue.d.ts +32 -0
  28. package/dist/components/CdsInput/CdsInputMessages.vue.d.ts +221 -0
  29. package/dist/components/CdsInput/index.d.ts +5 -0
  30. package/dist/components/CdsLink/CdsLink.vue.d.ts +50 -0
  31. package/dist/components/CdsList/CdsList.vue.d.ts +158 -0
  32. package/dist/components/CdsList/CdsListGroup.vue.d.ts +125 -0
  33. package/dist/components/CdsList/CdsListItem.vue.d.ts +178 -0
  34. package/dist/components/CdsList/composable/depth.d.ts +3 -0
  35. package/dist/components/CdsList/composable/focus.d.ts +12 -0
  36. package/dist/components/CdsList/composable/index.d.ts +3 -0
  37. package/dist/components/CdsList/composable/list.d.ts +19 -0
  38. package/dist/components/CdsList/index.d.ts +3 -0
  39. package/dist/components/CdsLoader/CdsLoader.vue.d.ts +62 -0
  40. package/dist/components/CdsLoader/index.d.ts +1 -0
  41. package/dist/components/CdsMenu/CdsMenu.vue.d.ts +592 -0
  42. package/dist/components/CdsMenu/shared.d.ts +10 -0
  43. package/dist/components/CdsOverlay/CdsOverlay.vue.d.ts +324 -0
  44. package/dist/components/CdsOverlay/composable/activator.d.ts +81 -0
  45. package/dist/components/CdsOverlay/composable/index.d.ts +6 -0
  46. package/dist/components/CdsOverlay/composable/locationStrategies.d.ts +75 -0
  47. package/dist/components/CdsOverlay/composable/scrim.d.ts +8 -0
  48. package/dist/components/CdsOverlay/composable/scrollStrategies.d.ts +33 -0
  49. package/dist/components/CdsOverlay/composable/stack.d.ts +9 -0
  50. package/dist/components/CdsOverlay/composable/teleport.d.ts +6 -0
  51. package/dist/components/CdsOverlay/utils/index.d.ts +2 -0
  52. package/dist/components/CdsOverlay/utils/point.d.ts +20 -0
  53. package/dist/components/CdsOverlay/utils/requestNewFrame.d.ts +5 -0
  54. package/dist/components/CdsRadioButton/CdsRadio.vue.d.ts +201 -0
  55. package/dist/components/CdsRadioButton/CdsRadioButton.vue.d.ts +200 -0
  56. package/dist/components/CdsSelect/CdsSelect.vue.d.ts +664 -0
  57. package/dist/components/CdsSidebar/CdsSidebar.vue.d.ts +61 -0
  58. package/dist/components/CdsStages/CdsStages.vue.d.ts +102 -0
  59. package/dist/components/CdsStatus/CdsStatus.vue.d.ts +46 -0
  60. package/dist/components/CdsTag/CdsTag.vue.d.ts +96 -0
  61. package/dist/components/CdsTextArea/CdsTextArea.vue.d.ts +681 -0
  62. package/dist/components/CdsTextInput/CdsTextInput.vue.d.ts +600 -0
  63. package/dist/components/index.d.ts +35 -0
  64. package/dist/composable/appearance.d.ts +24 -0
  65. package/dist/composable/color.d.ts +21 -0
  66. package/dist/composable/dark.d.ts +19 -0
  67. package/dist/composable/delay.d.ts +29 -0
  68. package/dist/composable/dimensions.d.ts +47 -0
  69. package/dist/composable/direction.d.ts +24 -0
  70. package/dist/composable/disabled.d.ts +19 -0
  71. package/dist/composable/field.d.ts +138 -0
  72. package/dist/composable/focus.d.ts +22 -0
  73. package/dist/composable/form.d.ts +126 -0
  74. package/dist/composable/hidration.d.ts +1 -0
  75. package/dist/composable/icon.d.ts +57 -0
  76. package/dist/composable/index.d.ts +29 -0
  77. package/dist/composable/input.d.ts +97 -0
  78. package/dist/composable/items.d.ts +79 -0
  79. package/dist/composable/lazy.d.ts +11 -0
  80. package/dist/composable/link.d.ts +35 -0
  81. package/dist/composable/loading.d.ts +20 -0
  82. package/dist/composable/nested/nested.d.ts +85 -0
  83. package/dist/composable/nested/openStrategies.d.ts +25 -0
  84. package/dist/composable/nested/selectStrategies.d.ts +21 -0
  85. package/dist/composable/overlay.d.ts +99 -0
  86. package/dist/composable/proxyModel.d.ts +8 -0
  87. package/dist/composable/render.d.ts +2 -0
  88. package/dist/composable/scopeId.d.ts +5 -0
  89. package/dist/composable/size.d.ts +24 -0
  90. package/dist/composable/status.d.ts +21 -0
  91. package/dist/composable/tag.d.ts +16 -0
  92. package/dist/composable/text.d.ts +17 -0
  93. package/dist/composable/toggleScope.d.ts +2 -0
  94. package/dist/composable/transition.d.ts +22 -0
  95. package/dist/composable/validation.d.ts +136 -0
  96. package/dist/directives/click-outside/index.d.ts +14 -0
  97. package/dist/directives/index.d.ts +1 -0
  98. package/dist/globals.d.ts +16 -0
  99. package/dist/plugins/index.d.ts +2 -0
  100. package/dist/shims-vue.d.ts +24 -0
  101. package/dist/transitions/createTransition.d.ts +38 -0
  102. package/dist/transitions/expandTransition.d.ts +19 -0
  103. package/dist/transitions/index.d.ts +104 -0
  104. package/dist/types/CdsOptions.d.ts +3 -0
  105. package/dist/utils/anchor.d.ts +23 -0
  106. package/dist/utils/animation.d.ts +6 -0
  107. package/dist/utils/box.d.ts +26 -0
  108. package/dist/utils/changeCase/lowerCase.d.ts +8 -0
  109. package/dist/utils/changeCase/noCase.d.ts +10 -0
  110. package/dist/utils/changeCase/paramCase.d.ts +3 -0
  111. package/dist/utils/changeCase/pascalCase.d.ts +5 -0
  112. package/dist/utils/dom.d.ts +6 -0
  113. package/dist/utils/getCurrentInstance.d.ts +13 -0
  114. package/dist/utils/getScrollParent.d.ts +3 -0
  115. package/dist/utils/globals.d.ts +4 -0
  116. package/dist/utils/helpers.d.ts +73 -0
  117. package/dist/utils/index.d.ts +13 -0
  118. package/dist/utils/propsFactory.d.ts +52 -0
  119. package/nuxt.js +13 -0
  120. package/package.json +37 -80
  121. package/src/scss/index.scss +10 -0
  122. package/{dist/mixins/scss → src/scss/mixins}/layout/_convert.scss +4 -2
  123. package/src/scss/mixins/layout/_shadow.scss +4 -0
  124. package/src/scss/mixins/layout/exports/_mini-unit.module.scss +5 -0
  125. package/src/scss/mixins/layout/exports/_spacing-all.module.scss +3 -0
  126. package/src/scss/mixins/layout/exports/_spacing-fluid.module.scss +8 -0
  127. package/src/scss/mixins/layout/exports/_spacing-layout.module.scss +11 -0
  128. package/src/scss/mixins/layout/exports/_spacing.module.scss +16 -0
  129. package/{dist/mixins/scss → src/scss/mixins}/layout/index.scss +1 -2
  130. package/{dist/mixins/scss → src/scss/mixins}/typo.scss +0 -67
  131. package/src/scss/modules/_reset.scss +113 -0
  132. package/src/scss/modules/_transition.scss +54 -0
  133. package/src/scss/modules/_typography.scss +36 -0
  134. package/src/scss/modules/_variables.scss +9 -0
  135. package/src/scss/modules/grid/_aspect-ratio.scss +62 -0
  136. package/src/scss/modules/grid/_breakpoint.scss +195 -0
  137. package/src/scss/modules/grid/_config.scss +88 -0
  138. package/src/scss/modules/grid/_css-grid.scss +445 -0
  139. package/src/scss/modules/grid/_flex-grid.scss +39 -0
  140. package/src/scss/modules/grid/_mixins.scss +307 -0
  141. package/src/scss/modules/grid/exports/_config.module.scss +9 -0
  142. package/src/scss/modules/grid/index.scss +5 -0
  143. package/src/scss/themes/b2b/tokens-map.scss +139 -0
  144. package/src/scss/themes/b2b/tokens.json +2190 -0
  145. package/src/scss/themes/cds/tokens-map.scss +138 -0
  146. package/src/scss/themes/cds/tokens.json +2184 -0
  147. package/{dist/tokens → src/scss/themes}/cds/variables.css +0 -3
  148. package/src/scss/themes/index.ts +43 -0
  149. package/src/scss/utility/display.scss +13 -0
  150. package/src/scss/utility/flexbox.scss +37 -0
  151. package/src/scss/utility/generatedFiles/generatedStyles.json +1 -0
  152. package/src/scss/utility/generatedFiles/generatedStyles.scss +300 -0
  153. package/src/scss/utility/index.scss +7 -0
  154. package/src/scss/utility/layout.scss +11 -0
  155. package/src/scss/utility/lists.scss +76 -0
  156. package/src/scss/utility/spacing.scss +89 -0
  157. package/src/scss/utility/typography.scss +16 -0
  158. package/src/scss/utility/variables.scss +116 -0
  159. package/README.md +0 -87
  160. package/build/utils/postInstall.js +0 -20
  161. package/build/utils/print.js +0 -38
  162. package/dist/CdsAccordion/index.js +0 -8
  163. package/dist/CdsAccordion/styles.css +0 -11
  164. package/dist/CdsBadge/index.js +0 -8
  165. package/dist/CdsBadge/styles.css +0 -9
  166. package/dist/CdsBreadcrumbs/index.js +0 -8
  167. package/dist/CdsBreadcrumbs/styles.css +0 -11
  168. package/dist/CdsButton/index.js +0 -8
  169. package/dist/CdsButton/styles.css +0 -11
  170. package/dist/CdsCheckbox/index.js +0 -8
  171. package/dist/CdsCheckbox/styles.css +0 -15
  172. package/dist/CdsCombobox/index.js +0 -8
  173. package/dist/CdsCombobox/styles.css +0 -15
  174. package/dist/CdsContainer/index.js +0 -8
  175. package/dist/CdsContainer/styles.css +0 -11
  176. package/dist/CdsContentSwitcher/index.js +0 -8
  177. package/dist/CdsContentSwitcher/styles.css +0 -15
  178. package/dist/CdsDataTable/index.js +0 -8
  179. package/dist/CdsDataTable/styles.css +0 -21
  180. package/dist/CdsDatePicker/index.js +0 -24
  181. package/dist/CdsDatePicker/styles.css +0 -15
  182. package/dist/CdsDrawer/index.js +0 -8
  183. package/dist/CdsDrawer/styles.css +0 -17
  184. package/dist/CdsDropdown/index.js +0 -8
  185. package/dist/CdsDropdown/styles.css +0 -15
  186. package/dist/CdsEmptyState/index.js +0 -8
  187. package/dist/CdsEmptyState/styles.css +0 -9
  188. package/dist/CdsFooter/index.js +0 -8
  189. package/dist/CdsFooter/styles.css +0 -17
  190. package/dist/CdsForm/index.js +0 -8
  191. package/dist/CdsForm/styles.css +0 -15
  192. package/dist/CdsGrid/index.js +0 -8
  193. package/dist/CdsGrid/styles.css +0 -9
  194. package/dist/CdsHeader/index.js +0 -8
  195. package/dist/CdsHeader/styles.css +0 -11
  196. package/dist/CdsIcon/index.js +0 -8
  197. package/dist/CdsIcon/styles.css +0 -9
  198. package/dist/CdsImage/index.js +0 -8
  199. package/dist/CdsImage/styles.css +0 -9
  200. package/dist/CdsInput/index.js +0 -8
  201. package/dist/CdsInput/styles.css +0 -13
  202. package/dist/CdsLink/index.js +0 -8
  203. package/dist/CdsLink/styles.css +0 -9
  204. package/dist/CdsList/index.js +0 -8
  205. package/dist/CdsList/styles.css +0 -9
  206. package/dist/CdsLoading/index.js +0 -8
  207. package/dist/CdsLoading/styles.css +0 -9
  208. package/dist/CdsModal/index.js +0 -8
  209. package/dist/CdsModal/styles.css +0 -15
  210. package/dist/CdsMultiselect/index.js +0 -8
  211. package/dist/CdsMultiselect/styles.css +0 -17
  212. package/dist/CdsNotification/index.js +0 -8
  213. package/dist/CdsNotification/styles.css +0 -21
  214. package/dist/CdsOverflowMenu/index.js +0 -8
  215. package/dist/CdsOverflowMenu/styles.css +0 -21
  216. package/dist/CdsPagination/index.js +0 -8
  217. package/dist/CdsPagination/styles.css +0 -13
  218. package/dist/CdsRadioButton/index.js +0 -8
  219. package/dist/CdsRadioButton/styles.css +0 -15
  220. package/dist/CdsSearch/index.js +0 -8
  221. package/dist/CdsSearch/styles.css +0 -19
  222. package/dist/CdsSelect/index.js +0 -8
  223. package/dist/CdsSelect/styles.css +0 -15
  224. package/dist/CdsSidebar/index.js +0 -8
  225. package/dist/CdsSidebar/styles.css +0 -15
  226. package/dist/CdsSkeleton/index.js +0 -8
  227. package/dist/CdsSkeleton/styles.css +0 -9
  228. package/dist/CdsStages/index.js +0 -8
  229. package/dist/CdsStages/styles.css +0 -9
  230. package/dist/CdsStatus/index.js +0 -8
  231. package/dist/CdsStatus/styles.css +0 -15
  232. package/dist/CdsSteps/index.js +0 -8
  233. package/dist/CdsSteps/styles.css +0 -19
  234. package/dist/CdsTable/index.js +0 -16
  235. package/dist/CdsTable/styles.css +0 -21
  236. package/dist/CdsTabs/index.js +0 -8
  237. package/dist/CdsTabs/styles.css +0 -9
  238. package/dist/CdsTag/index.js +0 -8
  239. package/dist/CdsTag/styles.css +0 -11
  240. package/dist/CdsTextArea/index.js +0 -8
  241. package/dist/CdsTextArea/styles.css +0 -17
  242. package/dist/CdsTextInput/index.js +0 -8
  243. package/dist/CdsTextInput/styles.css +0 -15
  244. package/dist/CdsToggle/index.js +0 -8
  245. package/dist/CdsToggle/styles.css +0 -9
  246. package/dist/CdsTooltip/index.js +0 -8
  247. package/dist/CdsTooltip/styles.css +0 -13
  248. package/dist/CdsUploader/index.js +0 -14
  249. package/dist/CdsUploader/styles.css +0 -25
  250. package/dist/cds.js +0 -38
  251. package/dist/cds.min.css +0 -7
  252. package/dist/cds.min.js +0 -38
  253. package/dist/index.html +0 -60
  254. package/dist/mixins/scss/layout/_breakpoint.scss +0 -237
  255. package/dist/mixins/scss/layout/_key-height.scss +0 -90
  256. package/dist/mixins/scss/layout/_spacing-export.scss +0 -34
  257. package/dist/mixins/scss/layout/_utilities.scss +0 -33
  258. package/dist/types/CdsAccordion.ts +0 -4
  259. package/dist/types/CdsAccordionItem.ts +0 -10
  260. package/dist/types/CdsBreadcrumbs.ts +0 -11
  261. package/dist/types/CdsBreadcrumbsItem.ts +0 -12
  262. package/dist/types/CdsButton.ts +0 -30
  263. package/dist/types/CdsCheckbox.ts +0 -20
  264. package/dist/types/CdsCheckboxGroup.ts +0 -14
  265. package/dist/types/CdsCol.ts +0 -38
  266. package/dist/types/CdsCombobox.ts +0 -42
  267. package/dist/types/CdsContainer.ts +0 -32
  268. package/dist/types/CdsContentSwitcher.ts +0 -4
  269. package/dist/types/CdsContentSwitcherButton.ts +0 -21
  270. package/dist/types/CdsDataTable.ts +0 -48
  271. package/dist/types/CdsDatePicker.ts +0 -40
  272. package/dist/types/CdsDrawer.ts +0 -25
  273. package/dist/types/CdsDrawerGroup.ts +0 -8
  274. package/dist/types/CdsDrawerItem.ts +0 -12
  275. package/dist/types/CdsDrawerLabel.ts +0 -4
  276. package/dist/types/CdsDropdown.ts +0 -14
  277. package/dist/types/CdsEmptyState.ts +0 -10
  278. package/dist/types/CdsFooter.ts +0 -17
  279. package/dist/types/CdsFooterService.ts +0 -16
  280. package/dist/types/CdsForm.ts +0 -4
  281. package/dist/types/CdsFormGroup.ts +0 -8
  282. package/dist/types/CdsFormItem.ts +0 -4
  283. package/dist/types/CdsGrid.ts +0 -16
  284. package/dist/types/CdsHeader.ts +0 -27
  285. package/dist/types/CdsHeaderService.ts +0 -4
  286. package/dist/types/CdsIcon.ts +0 -6
  287. package/dist/types/CdsLink.ts +0 -22
  288. package/dist/types/CdsList.ts +0 -6
  289. package/dist/types/CdsLoading.ts +0 -14
  290. package/dist/types/CdsModal.ts +0 -17
  291. package/dist/types/CdsMultiselect.ts +0 -33
  292. package/dist/types/CdsNotification.ts +0 -22
  293. package/dist/types/CdsOverflowMenu.ts +0 -16
  294. package/dist/types/CdsPagination.ts +0 -12
  295. package/dist/types/CdsRadioButton.ts +0 -29
  296. package/dist/types/CdsRow.ts +0 -18
  297. package/dist/types/CdsSearch.ts +0 -24
  298. package/dist/types/CdsSelect.ts +0 -37
  299. package/dist/types/CdsSkeleton.ts +0 -14
  300. package/dist/types/CdsStages.ts +0 -10
  301. package/dist/types/CdsStatus.ts +0 -22
  302. package/dist/types/CdsSteps.ts +0 -22
  303. package/dist/types/CdsStepsItem.ts +0 -12
  304. package/dist/types/CdsTable.ts +0 -46
  305. package/dist/types/CdsTabs.ts +0 -19
  306. package/dist/types/CdsTabsItem.ts +0 -18
  307. package/dist/types/CdsTag.ts +0 -20
  308. package/dist/types/CdsTextArea.ts +0 -26
  309. package/dist/types/CdsTextInput.ts +0 -32
  310. package/dist/types/CdsToggle.ts +0 -18
  311. package/dist/types/CdsTooltip.ts +0 -18
  312. package/dist/types/CdsTooltipDefinition.ts +0 -16
  313. package/dist/types/CdsTooltipInteractive.ts +0 -11
  314. package/dist/types/CdsUploader.ts +0 -44
  315. package/dist/types/Sidebar.ts +0 -17
  316. package/dist/types/types.ts +0 -2
  317. package/dist/utils/convertRemToPx.js +0 -9
  318. package/dist/utils/deepFind.js +0 -14
  319. package/dist/utils/expiringStorage.js +0 -28
  320. package/dist/utils/helpers.js +0 -33
  321. package/dist/utils/index.js +0 -1
  322. package/dist/utils/isCorrectTag.js +0 -5
  323. package/dist/utils/isRightProps.js +0 -5
  324. package/dist/utils/memoize.js +0 -8
  325. package/dist/utils/suffixPropName.js +0 -12
  326. package/dist/utils/test/deepFind.test.js +0 -18
  327. package/dist/utils/test/isCorrectTag.test.js +0 -9
  328. package/dist/utils/test/isCorrectTagDataSet.js +0 -51
  329. package/dist/utils/validationProps.js +0 -7
  330. /package/{dist/mixins/scss → src/scss/mixins}/layout/_layout.scss +0 -0
  331. /package/{dist/mixins/scss → src/scss/mixins}/layout/_mini-unit.scss +0 -0
  332. /package/{dist/mixins/scss → src/scss/mixins}/layout/_spacing.scss +0 -0
  333. /package/{dist/mixins/scss → src/scss/mixins}/motion.scss +0 -0
  334. /package/{dist/tokens → src/scss/themes}/b2b/variables.css +0 -0
package/{dist/tokens → src/scss/themes}/cds/variables.css RENAMED
@@ -45,8 +45,6 @@
45
45
  --cds-color-interactive-02-above: #1d6ef6;
46
46
  --cds-color-link-default: #1d6ef6;
47
47
  --cds-color-link-visited: #825af3;
48
- --cds-color-link-inverse-default: #639af8;
49
- --cds-color-link-inverse-visited: #a68af5;
50
48
  --cds-color-neutral-0: #ffffff;
51
49
  --cds-color-neutral-4: #f5f5f5;
52
50
  --cds-color-neutral-8: #ebebeb;
@@ -72,7 +70,6 @@
72
70
  --cds-font-body-size-s: 0.875rem; /* Font size */
73
71
  --cds-font-body-size-m: 1rem; /* Font size */
74
72
  --cds-font-body-size-l: 1.5rem; /* Font size */
75
- --cds-font-body-size-xl: 1.75rem; /* Font size */
76
73
  --cds-font-heading-1: 2.625rem; /* Font size */
77
74
  --cds-font-heading-2: 2rem; /* Font size */
78
75
  --cds-font-heading-3: 1.75rem; /* Font size */
package/src/scss/themes/index.ts ADDED
@@ -0,0 +1,43 @@
1
+ /**
2
+ * Automatically generated by CDS CLI
3
+ * Generated on 4/25/2023, 7:08:32 PM
4
+ **/
5
+
6
+ /**
7
+ * @etchteam/storybook-addon-css-variables-theme not support Vite, only webpack loaders
8
+ * because need this hack for loading css variable with Vite
9
+ * @param theme
10
+ */
11
+ const cssVariablesViteHack = (theme: string) => {
12
+ return {
13
+ styleTag: null as any,
14
+ innerStyles: '',
15
+ use: async function () {
16
+ if (!this.styleTag?.innerHTML) {
17
+ this.styleTag = document.createElement('style');
18
+ this.styleTag.type = 'text/css';
19
+ this.innerStyles = (await import(`./${theme}/variables.css?inline`)).default;
20
+ this.styleTag.innerHTML = this.innerStyles;
21
+ document.body.appendChild(this.styleTag);
22
+ return;
23
+ }
24
+ this.styleTag.innerHTML = this.innerStyles;
25
+ },
26
+ unuse: function () {
27
+ if (this.styleTag) {
28
+ this.styleTag.innerHTML = '';
29
+ }
30
+ }
31
+ };
32
+ };
33
+
34
+ const B2B = cssVariablesViteHack('b2b');
35
+ const CDS = cssVariablesViteHack('cds');
36
+
37
+ export default {
38
+ files: {
39
+ B2B,
40
+ CDS
41
+ },
42
+ defaultTheme: 'CDS'
43
+ };
package/src/scss/utility/display.scss ADDED
@@ -0,0 +1,13 @@
1
+ @import "variables";
2
+
3
+ @each $name, $display in $displays {
4
+ .cds-#{$name} {
5
+ display: $display !important;
6
+ }
7
+ }
8
+
9
+ @each $name, $visibility in $visibility {
10
+ .cds-#{$name} {
11
+ visibility: $visibility !important;
12
+ }
13
+ }
package/src/scss/utility/flexbox.scss ADDED
@@ -0,0 +1,37 @@
1
+ @import "variables";
2
+
3
+ @each $name, $direction in $flex-direction {
4
+ .cds-#{$name} {
5
+ flex-direction: $direction !important;
6
+ }
7
+ }
8
+
9
+ @each $name, $value in $justify-content {
10
+ .cds-justify-#{$name} {
11
+ justify-content: $value !important;
12
+ }
13
+ }
14
+
15
+ @each $name, $value in $align-items {
16
+ .cds-items-#{$name} {
17
+ align-items: $value !important;
18
+ }
19
+ }
20
+
21
+ @each $name, $value in $align-content {
22
+ .cds-content-#{$name} {
23
+ align-content: $value !important;
24
+ }
25
+ }
26
+
27
+ @each $name, $value in $flex-wrap {
28
+ .cds-flex-#{$name} {
29
+ flex-wrap: $value !important;
30
+ }
31
+ }
32
+
33
+ @each $name, $value in $align-self {
34
+ .cds-self-#{$name} {
35
+ align-self: $value !important;
36
+ }
37
+ }
package/src/scss/utility/generatedFiles/generatedStyles.json ADDED
@@ -0,0 +1 @@
1
+ ".cds-border-radius-s { border-radius: var(--cds-border-radius-s) !important; }/.cds-border-radius-m { border-radius: var(--cds-border-radius-m) !important; }/.cds-border-radius-l { border-radius: var(--cds-border-radius-l) !important; }/.cds-color-background-page-primary { background-color: var(--cds-color-background-page-primary) !important; }/.cds-color-background-page-secondary { background-color: var(--cds-color-background-page-secondary) !important; }/.cds-color-background-container-primary { background-color: var(--cds-color-background-container-primary) !important; }/.cds-color-background-container-secondary { background-color: var(--cds-color-background-container-secondary) !important; }/.cds-color-background-field-primary { background-color: var(--cds-color-background-field-primary) !important; }/.cds-color-background-field-secondary { background-color: var(--cds-color-background-field-secondary) !important; }/.cds-color-background-element-primary { background-color: var(--cds-color-background-element-primary) !important; }/.cds-color-background-inverse { background-color: var(--cds-color-background-inverse) !important; }/.cds-color-border-element-primary { border-color: var(--cds-color-border-element-primary) !important; }/.cds-color-border-element-secondary { border-color: var(--cds-color-border-element-secondary) !important; }/.cds-color-disabled-01 { color: var(--cds-color-disabled-01) !important; }/.cds-color-disabled-02 { color: var(--cds-color-disabled-02) !important; }/.cds-color-feedback-error-10 { color: var(--cds-color-feedback-error-10) !important; }/.cds-color-feedback-error-20 { color: var(--cds-color-feedback-error-20) !important; }/.cds-color-feedback-error-100 { color: var(--cds-color-feedback-error-100) !important; }/.cds-color-feedback-warning-10 { color: var(--cds-color-feedback-warning-10) !important; }/.cds-color-feedback-warning-20 { color: var(--cds-color-feedback-warning-20) !important; }/.cds-color-feedback-warning-100 { color: var(--cds-color-feedback-warning-100) !important; }/.cds-color-feedback-success-10 { color: var(--cds-color-feedback-success-10) !important; }/.cds-color-feedback-success-20 { color: var(--cds-color-feedback-success-20) !important; }/.cds-color-feedback-success-100 { color: var(--cds-color-feedback-success-100) !important; }/.cds-color-feedback-info-10 { color: var(--cds-color-feedback-info-10) !important; }/.cds-color-feedback-info-20 { color: var(--cds-color-feedback-info-20) !important; }/.cds-color-feedback-info-100 { color: var(--cds-color-feedback-info-100) !important; }/.cds-color-feedback-progress-10 { color: var(--cds-color-feedback-progress-10) !important; }/.cds-color-feedback-progress-20 { color: var(--cds-color-feedback-progress-20) !important; }/.cds-color-feedback-progress-100 { color: var(--cds-color-feedback-progress-100) !important; }/.cds-color-icon-default { color: var(--cds-color-icon-default) !important; }/.cds-color-icon-inverse { color: var(--cds-color-icon-inverse) !important; }/.cds-color-interactive-01 { color: var(--cds-color-interactive-01-default) !important; }/.cds-color-interactive-01:hover { color: var(--cds-color-interactive-01-hover) !important; }/.cds-color-interactive-01:focus { color: var(--cds-color-interactive-01-focus) !important; }/.cds-color-interactive-01:active { color: var(--cds-color-interactive-01-active) !important; }/.cds-color-interactive-01:above { color: var(--cds-color-interactive-01-above) !important; }/.cds-color-interactive-02 { color: var(--cds-color-interactive-02-default) !important; }/.cds-color-interactive-02:hover { color: var(--cds-color-interactive-02-hover) !important; }/.cds-color-interactive-02:focus { color: var(--cds-color-interactive-02-focus) !important; }/.cds-color-interactive-02:active { color: var(--cds-color-interactive-02-active) !important; }/.cds-color-interactive-02:above { color: var(--cds-color-interactive-02-above) !important; }/.cds-color-link-default { color: var(--cds-color-link-default) !important; }/.cds-color-link-visited { color: var(--cds-color-link-visited) !important; }/.cds-color-neutral-0 { color: var(--cds-color-neutral-0) !important; }/.cds-color-neutral-4 { color: var(--cds-color-neutral-4) !important; }/.cds-color-neutral-8 { color: var(--cds-color-neutral-8) !important; }/.cds-color-neutral-10 { color: var(--cds-color-neutral-10) !important; }/.cds-color-neutral-15 { color: var(--cds-color-neutral-15) !important; }/.cds-color-neutral-25 { color: var(--cds-color-neutral-25) !important; }/.cds-color-neutral-40 { color: var(--cds-color-neutral-40) !important; }/.cds-color-neutral-48 { color: var(--cds-color-neutral-48) !important; }/.cds-color-neutral-66 { color: var(--cds-color-neutral-66) !important; }/.cds-color-neutral-100 { color: var(--cds-color-neutral-100) !important; }/.cds-color-overlay-01 { color: var(--cds-color-overlay-01) !important; }/.cds-color-overlay-02 { color: var(--cds-color-overlay-02) !important; }/.cds-color-text-primary { color: var(--cds-color-text-primary) !important; }/.cds-color-text-secondary { color: var(--cds-color-text-secondary) !important; }/.cds-color-text-description { color: var(--cds-color-text-description) !important; }/.cds-color-text-label { color: var(--cds-color-text-label) !important; }/.cds-color-text-placeholder { color: var(--cds-color-text-placeholder) !important; }/.cds-color-text-inverse { color: var(--cds-color-text-inverse) !important; }/.cds-font-family-size { font-size: var(--cds-font-family-size) !important; }/.cds-font-body-size-xs { font-size: var(--cds-font-body-size-xs) !important; }/.cds-font-body-size-s { font-size: var(--cds-font-body-size-s) !important; }/.cds-font-body-size-m { font-size: var(--cds-font-body-size-m) !important; }/.cds-font-body-size-l { font-size: var(--cds-font-body-size-l) !important; }/.cds-font-heading-1 { font-size: var(--cds-font-heading-1) !important; }/.cds-font-heading-2 { font-size: var(--cds-font-heading-2) !important; }/.cds-font-heading-3 { font-size: var(--cds-font-heading-3) !important; }/.cds-font-heading-4 { font-size: var(--cds-font-heading-4) !important; }/.cds-font-heading-5 { font-size: var(--cds-font-heading-5) !important; }/.cds-font-heading-6 { font-size: var(--cds-font-heading-6) !important; }/.cds-font-heading-eyebrow { font-size: var(--cds-font-heading-eyebrow) !important; }/.cds-font-display-1 { font-size: var(--cds-font-display-1) !important; }/.cds-font-display-2 { font-size: var(--cds-font-display-2) !important; }/.cds-font-weight-bold { font-weight: var(--cds-font-weight-bold) !important; }/.cds-font-weight-semi-bold { font-weight: var(--cds-font-weight-semi-bold) !important; }/.cds-font-weight-normal { font-weight: var(--cds-font-weight-normal) !important; }/.cds-font-weight-light { font-weight: var(--cds-font-weight-light) !important; }/.cds-font-height-body { line-height: var(--cds-font-height-body) !important; }/.cds-font-height-heading { line-height: var(--cds-font-height-heading) !important; }/.cds-font-height-display { line-height: var(--cds-font-height-display) !important; }/.cds-font-height-helper { line-height: var(--cds-font-height-helper) !important; }/.cds-font-margin-heading-1 { margin: var(--cds-font-margin-heading-1) !important; }/.cds-font-margin-heading-2 { margin: var(--cds-font-margin-heading-2) !important; }/.cds-font-margin-heading-3 { margin: var(--cds-font-margin-heading-3) !important; }/.cds-font-margin-heading-4 { margin: var(--cds-font-margin-heading-4) !important; }/.cds-font-margin-heading-5 { margin: var(--cds-font-margin-heading-5) !important; }/.cds-font-margin-heading-6 { margin: var(--cds-font-margin-heading-6) !important; }/.cds-font-margin-display-1 { margin: var(--cds-font-margin-display-1) !important; }/.cds-font-margin-display-2 { margin: var(--cds-font-margin-display-2) !important; }/.cds-font-margin-s { margin: var(--cds-font-margin-s) !important; }/.cds-box-shadow-header { box-shadow: var(--cds-box-shadow-header) !important; }/.cds-box-shadow-footer { box-shadow: var(--cds-box-shadow-footer) !important; }/.cds-box-shadow-sidebar-left { box-shadow: var(--cds-box-shadow-sidebar-left) !important; }/.cds-box-shadow-sidebar-right { box-shadow: var(--cds-box-shadow-sidebar-right) !important; }/.cds-box-shadow-menu { box-shadow: var(--cds-box-shadow-menu) !important; }/.cds-box-shadow-modal { box-shadow: var(--cds-box-shadow-modal) !important; }/.cds-box-shadow-notification { box-shadow: var(--cds-box-shadow-notification) !important; }"
package/src/scss/utility/generatedFiles/generatedStyles.scss ADDED
@@ -0,0 +1,300 @@
1
+ .cds-border-radius-s {
2
+ border-radius: var(--cds-border-radius-s) !important;
3
+ }
4
+ .cds-border-radius-m {
5
+ border-radius: var(--cds-border-radius-m) !important;
6
+ }
7
+ .cds-border-radius-l {
8
+ border-radius: var(--cds-border-radius-l) !important;
9
+ }
10
+ .cds-color-background-page-primary {
11
+ background-color: var(--cds-color-background-page-primary) !important;
12
+ }
13
+ .cds-color-background-page-secondary {
14
+ background-color: var(--cds-color-background-page-secondary) !important;
15
+ }
16
+ .cds-color-background-container-primary {
17
+ background-color: var(--cds-color-background-container-primary) !important;
18
+ }
19
+ .cds-color-background-container-secondary {
20
+ background-color: var(--cds-color-background-container-secondary) !important;
21
+ }
22
+ .cds-color-background-field-primary {
23
+ background-color: var(--cds-color-background-field-primary) !important;
24
+ }
25
+ .cds-color-background-field-secondary {
26
+ background-color: var(--cds-color-background-field-secondary) !important;
27
+ }
28
+ .cds-color-background-element-primary {
29
+ background-color: var(--cds-color-background-element-primary) !important;
30
+ }
31
+ .cds-color-background-inverse {
32
+ background-color: var(--cds-color-background-inverse) !important;
33
+ }
34
+ .cds-color-border-element-primary {
35
+ border-color: var(--cds-color-border-element-primary) !important;
36
+ }
37
+ .cds-color-border-element-secondary {
38
+ border-color: var(--cds-color-border-element-secondary) !important;
39
+ }
40
+ .cds-color-disabled-01 {
41
+ color: var(--cds-color-disabled-01) !important;
42
+ }
43
+ .cds-color-disabled-02 {
44
+ color: var(--cds-color-disabled-02) !important;
45
+ }
46
+ .cds-color-feedback-error-10 {
47
+ color: var(--cds-color-feedback-error-10) !important;
48
+ }
49
+ .cds-color-feedback-error-20 {
50
+ color: var(--cds-color-feedback-error-20) !important;
51
+ }
52
+ .cds-color-feedback-error-100 {
53
+ color: var(--cds-color-feedback-error-100) !important;
54
+ }
55
+ .cds-color-feedback-warning-10 {
56
+ color: var(--cds-color-feedback-warning-10) !important;
57
+ }
58
+ .cds-color-feedback-warning-20 {
59
+ color: var(--cds-color-feedback-warning-20) !important;
60
+ }
61
+ .cds-color-feedback-warning-100 {
62
+ color: var(--cds-color-feedback-warning-100) !important;
63
+ }
64
+ .cds-color-feedback-success-10 {
65
+ color: var(--cds-color-feedback-success-10) !important;
66
+ }
67
+ .cds-color-feedback-success-20 {
68
+ color: var(--cds-color-feedback-success-20) !important;
69
+ }
70
+ .cds-color-feedback-success-100 {
71
+ color: var(--cds-color-feedback-success-100) !important;
72
+ }
73
+ .cds-color-feedback-info-10 {
74
+ color: var(--cds-color-feedback-info-10) !important;
75
+ }
76
+ .cds-color-feedback-info-20 {
77
+ color: var(--cds-color-feedback-info-20) !important;
78
+ }
79
+ .cds-color-feedback-info-100 {
80
+ color: var(--cds-color-feedback-info-100) !important;
81
+ }
82
+ .cds-color-feedback-progress-10 {
83
+ color: var(--cds-color-feedback-progress-10) !important;
84
+ }
85
+ .cds-color-feedback-progress-20 {
86
+ color: var(--cds-color-feedback-progress-20) !important;
87
+ }
88
+ .cds-color-feedback-progress-100 {
89
+ color: var(--cds-color-feedback-progress-100) !important;
90
+ }
91
+ .cds-color-icon-default {
92
+ color: var(--cds-color-icon-default) !important;
93
+ }
94
+ .cds-color-icon-inverse {
95
+ color: var(--cds-color-icon-inverse) !important;
96
+ }
97
+ .cds-color-interactive-01 {
98
+ color: var(--cds-color-interactive-01-default) !important;
99
+ }
100
+ .cds-color-interactive-01:hover {
101
+ color: var(--cds-color-interactive-01-hover) !important;
102
+ }
103
+ .cds-color-interactive-01:focus {
104
+ color: var(--cds-color-interactive-01-focus) !important;
105
+ }
106
+ .cds-color-interactive-01:active {
107
+ color: var(--cds-color-interactive-01-active) !important;
108
+ }
109
+ .cds-color-interactive-01:above {
110
+ color: var(--cds-color-interactive-01-above) !important;
111
+ }
112
+ .cds-color-interactive-02 {
113
+ color: var(--cds-color-interactive-02-default) !important;
114
+ }
115
+ .cds-color-interactive-02:hover {
116
+ color: var(--cds-color-interactive-02-hover) !important;
117
+ }
118
+ .cds-color-interactive-02:focus {
119
+ color: var(--cds-color-interactive-02-focus) !important;
120
+ }
121
+ .cds-color-interactive-02:active {
122
+ color: var(--cds-color-interactive-02-active) !important;
123
+ }
124
+ .cds-color-interactive-02:above {
125
+ color: var(--cds-color-interactive-02-above) !important;
126
+ }
127
+ .cds-color-link-default {
128
+ color: var(--cds-color-link-default) !important;
129
+ }
130
+ .cds-color-link-visited {
131
+ color: var(--cds-color-link-visited) !important;
132
+ }
133
+ .cds-color-neutral-0 {
134
+ color: var(--cds-color-neutral-0) !important;
135
+ }
136
+ .cds-color-neutral-4 {
137
+ color: var(--cds-color-neutral-4) !important;
138
+ }
139
+ .cds-color-neutral-8 {
140
+ color: var(--cds-color-neutral-8) !important;
141
+ }
142
+ .cds-color-neutral-10 {
143
+ color: var(--cds-color-neutral-10) !important;
144
+ }
145
+ .cds-color-neutral-15 {
146
+ color: var(--cds-color-neutral-15) !important;
147
+ }
148
+ .cds-color-neutral-25 {
149
+ color: var(--cds-color-neutral-25) !important;
150
+ }
151
+ .cds-color-neutral-40 {
152
+ color: var(--cds-color-neutral-40) !important;
153
+ }
154
+ .cds-color-neutral-48 {
155
+ color: var(--cds-color-neutral-48) !important;
156
+ }
157
+ .cds-color-neutral-66 {
158
+ color: var(--cds-color-neutral-66) !important;
159
+ }
160
+ .cds-color-neutral-100 {
161
+ color: var(--cds-color-neutral-100) !important;
162
+ }
163
+ .cds-color-overlay-01 {
164
+ color: var(--cds-color-overlay-01) !important;
165
+ }
166
+ .cds-color-overlay-02 {
167
+ color: var(--cds-color-overlay-02) !important;
168
+ }
169
+ .cds-color-text-primary {
170
+ color: var(--cds-color-text-primary) !important;
171
+ }
172
+ .cds-color-text-secondary {
173
+ color: var(--cds-color-text-secondary) !important;
174
+ }
175
+ .cds-color-text-description {
176
+ color: var(--cds-color-text-description) !important;
177
+ }
178
+ .cds-color-text-label {
179
+ color: var(--cds-color-text-label) !important;
180
+ }
181
+ .cds-color-text-placeholder {
182
+ color: var(--cds-color-text-placeholder) !important;
183
+ }
184
+ .cds-color-text-inverse {
185
+ color: var(--cds-color-text-inverse) !important;
186
+ }
187
+ .cds-font-family-size {
188
+ font-size: var(--cds-font-family-size) !important;
189
+ }
190
+ .cds-font-body-size-xs {
191
+ font-size: var(--cds-font-body-size-xs) !important;
192
+ }
193
+ .cds-font-body-size-s {
194
+ font-size: var(--cds-font-body-size-s) !important;
195
+ }
196
+ .cds-font-body-size-m {
197
+ font-size: var(--cds-font-body-size-m) !important;
198
+ }
199
+ .cds-font-body-size-l {
200
+ font-size: var(--cds-font-body-size-l) !important;
201
+ }
202
+ .cds-font-heading-1 {
203
+ font-size: var(--cds-font-heading-1) !important;
204
+ }
205
+ .cds-font-heading-2 {
206
+ font-size: var(--cds-font-heading-2) !important;
207
+ }
208
+ .cds-font-heading-3 {
209
+ font-size: var(--cds-font-heading-3) !important;
210
+ }
211
+ .cds-font-heading-4 {
212
+ font-size: var(--cds-font-heading-4) !important;
213
+ }
214
+ .cds-font-heading-5 {
215
+ font-size: var(--cds-font-heading-5) !important;
216
+ }
217
+ .cds-font-heading-6 {
218
+ font-size: var(--cds-font-heading-6) !important;
219
+ }
220
+ .cds-font-heading-eyebrow {
221
+ font-size: var(--cds-font-heading-eyebrow) !important;
222
+ }
223
+ .cds-font-display-1 {
224
+ font-size: var(--cds-font-display-1) !important;
225
+ }
226
+ .cds-font-display-2 {
227
+ font-size: var(--cds-font-display-2) !important;
228
+ }
229
+ .cds-font-weight-bold {
230
+ font-weight: var(--cds-font-weight-bold) !important;
231
+ }
232
+ .cds-font-weight-semi-bold {
233
+ font-weight: var(--cds-font-weight-semi-bold) !important;
234
+ }
235
+ .cds-font-weight-normal {
236
+ font-weight: var(--cds-font-weight-normal) !important;
237
+ }
238
+ .cds-font-weight-light {
239
+ font-weight: var(--cds-font-weight-light) !important;
240
+ }
241
+ .cds-font-height-body {
242
+ line-height: var(--cds-font-height-body) !important;
243
+ }
244
+ .cds-font-height-heading {
245
+ line-height: var(--cds-font-height-heading) !important;
246
+ }
247
+ .cds-font-height-display {
248
+ line-height: var(--cds-font-height-display) !important;
249
+ }
250
+ .cds-font-height-helper {
251
+ line-height: var(--cds-font-height-helper) !important;
252
+ }
253
+ .cds-font-margin-heading-1 {
254
+ margin: var(--cds-font-margin-heading-1) !important;
255
+ }
256
+ .cds-font-margin-heading-2 {
257
+ margin: var(--cds-font-margin-heading-2) !important;
258
+ }
259
+ .cds-font-margin-heading-3 {
260
+ margin: var(--cds-font-margin-heading-3) !important;
261
+ }
262
+ .cds-font-margin-heading-4 {
263
+ margin: var(--cds-font-margin-heading-4) !important;
264
+ }
265
+ .cds-font-margin-heading-5 {
266
+ margin: var(--cds-font-margin-heading-5) !important;
267
+ }
268
+ .cds-font-margin-heading-6 {
269
+ margin: var(--cds-font-margin-heading-6) !important;
270
+ }
271
+ .cds-font-margin-display-1 {
272
+ margin: var(--cds-font-margin-display-1) !important;
273
+ }
274
+ .cds-font-margin-display-2 {
275
+ margin: var(--cds-font-margin-display-2) !important;
276
+ }
277
+ .cds-font-margin-s {
278
+ margin: var(--cds-font-margin-s) !important;
279
+ }
280
+ .cds-box-shadow-header {
281
+ box-shadow: var(--cds-box-shadow-header) !important;
282
+ }
283
+ .cds-box-shadow-footer {
284
+ box-shadow: var(--cds-box-shadow-footer) !important;
285
+ }
286
+ .cds-box-shadow-sidebar-left {
287
+ box-shadow: var(--cds-box-shadow-sidebar-left) !important;
288
+ }
289
+ .cds-box-shadow-sidebar-right {
290
+ box-shadow: var(--cds-box-shadow-sidebar-right) !important;
291
+ }
292
+ .cds-box-shadow-menu {
293
+ box-shadow: var(--cds-box-shadow-menu) !important;
294
+ }
295
+ .cds-box-shadow-modal {
296
+ box-shadow: var(--cds-box-shadow-modal) !important;
297
+ }
298
+ .cds-box-shadow-notification {
299
+ box-shadow: var(--cds-box-shadow-notification) !important;
300
+ }
package/src/scss/utility/index.scss ADDED
@@ -0,0 +1,7 @@
1
+ @import 'generatedFiles/generatedStyles';
2
+ @import 'display';
3
+ @import 'layout';
4
+ @import 'spacing';
5
+ @import 'typography';
6
+ @import 'flexbox';
7
+ @import 'lists';
package/src/scss/utility/layout.scss ADDED
@@ -0,0 +1,11 @@
1
+ @import "variables";
2
+
3
+ @each $name, $index in $z-indexes {
4
+ .#{$name} {
5
+ z-index: $index !important;
6
+ }
7
+ }
8
+
9
+ .cds-fullwidth {
10
+ width: 100%;
11
+ }
package/src/scss/utility/lists.scss ADDED
@@ -0,0 +1,76 @@
1
+ @import '../mixins/layout/spacing';
2
+ @import '../mixins/layout/mini-unit';
3
+ @import '../mixins/layout/layout';
4
+ @import '../mixins/typo.scss';
5
+
6
+ .cds-ul, .cds-ol {
7
+ list-style-type: none;
8
+ margin: 0;
9
+ padding: 0;
10
+ border: 0;
11
+ counter-reset: listitem;
12
+
13
+ .cds-li {
14
+ position: relative;
15
+ list-style-type: none;
16
+ border: 0;
17
+ counter-increment: listitem;
18
+ margin: 0 0 $cds-spacing-xxs $cds-spacing-xs;
19
+ padding: 0 0 0 $cds-spacing-xs;
20
+ color: var(--cds-color-text-primary);
21
+ @include cds-body-text-s();
22
+
23
+ // Задаем расположение для всех элементов списка
24
+ &:before {
25
+ display: inline-block;
26
+ position: absolute;
27
+ left: -($cds-spacing-xs);
28
+ margin-right: $cds-spacing-xs;
29
+ margin-bottom: $cds-spacing-xxs;
30
+ }
31
+
32
+ // Задаем иконку для элементов верхнего списка
33
+ > &:before {
34
+ content: '\2013'
35
+ }
36
+ }
37
+
38
+ &--nested {
39
+ margin: $cds-spacing-xxs 0;
40
+
41
+ // Задаем иконку для элементов вложенного списка
42
+ & > .cds-li:before {
43
+ content: '\25AA'
44
+ }
45
+
46
+ // Задаем расположение для элементов вложенного списка
47
+ .cds-li {
48
+ margin-left: $cds-spacing-l;
49
+ margin-bottom: 0;
50
+ }
51
+ }
52
+ }
53
+
54
+ .cds-ol {
55
+ // Задаем расположение для элементов верхнего списка при ordered
56
+ > .cds-li {
57
+ padding-left: $cds-spacing-m;
58
+ }
59
+
60
+ // Задаем иконку для элементов верхнего списка при ordered
61
+ > .cds-li:before {
62
+ content: counter(listitem) ".";
63
+ }
64
+
65
+ .cds-ol--nested, .cds-ul--nested {
66
+ counter-reset: ol-counter;
67
+
68
+ > .cds-li {
69
+ counter-increment: ol-counter;
70
+
71
+ &:before {
72
+ content: counter(ol-counter,lower-alpha) ".";
73
+ }
74
+ }
75
+ }
76
+ }
package/src/scss/utility/spacing.scss ADDED
@@ -0,0 +1,89 @@
1
+ @import "variables";
2
+
3
+ @each $name, $space in $spaces {
4
+ .cds-pa-#{$name} {
5
+ padding: $space !important;
6
+ }
7
+ }
8
+
9
+ @each $name, $space in $spaces {
10
+ .cds-pt-#{$name} {
11
+ padding-top: $space !important;
12
+ }
13
+ }
14
+
15
+ @each $name, $space in $spaces {
16
+ .cds-pb-#{$name} {
17
+ padding-bottom: $space !important;
18
+ }
19
+ }
20
+
21
+ @each $name, $space in $spaces {
22
+ .cds-pr-#{$name} {
23
+ padding-right: $space !important;
24
+ }
25
+ }
26
+
27
+ @each $name, $space in $spaces {
28
+ .cds-pl-#{$name} {
29
+ padding-left: $space !important;
30
+ }
31
+ }
32
+
33
+ @each $name, $space in $spaces {
34
+ .cds-px-#{$name} {
35
+ padding-right: $space !important;
36
+ padding-left: $space !important;
37
+ }
38
+ }
39
+
40
+ @each $name, $space in $spaces {
41
+ .cds-py-#{$name} {
42
+ padding-top: $space !important;
43
+ padding-bottom: $space !important;
44
+ }
45
+ }
46
+
47
+ @each $name, $space in $spaces {
48
+ .cds-ma-#{$name} {
49
+ margin: $space !important;
50
+ }
51
+ }
52
+
53
+ @each $name, $space in $spaces {
54
+ .cds-mt-#{$name} {
55
+ margin-top: $space !important;
56
+ }
57
+ }
58
+
59
+ @each $name, $space in $spaces {
60
+ .cds-mb-#{$name} {
61
+ margin-bottom: $space !important;
62
+ }
63
+ }
64
+
65
+ @each $name, $space in $spaces {
66
+ .cds-mr-#{$name} {
67
+ margin-right: $space !important;
68
+ }
69
+ }
70
+
71
+ @each $name, $space in $spaces {
72
+ .cds-ml-#{$name} {
73
+ margin-left: $space !important;
74
+ }
75
+ }
76
+
77
+ @each $name, $space in $spaces {
78
+ .cds-mx-#{$name} {
79
+ margin-right: $space !important;
80
+ margin-left: $space !important;
81
+ }
82
+ }
83
+
84
+ @each $name, $space in $spaces {
85
+ .cds-my-#{$name} {
86
+ margin-top: $space !important;
87
+ margin-bottom: $space !important;
88
+ }
89
+ }
package/src/scss/utility/typography.scss ADDED
@@ -0,0 +1,16 @@
1
+ @import "variables";
2
+
3
+ @each $type, $value in $typography {
4
+ .cds-text-#{$type} {
5
+ @each $name, $val in $value {
6
+ @if $name == 'size' {
7
+ font-size: $val !important;
8
+ } @else if $name == 'height' {
9
+ line-height: $val !important;
10
+ } @else if $name == 'weight' {
11
+ font-weight: $val !important;
12
+ }
13
+ }
14
+ font-family: var(--cds-font-family-sans) !important;
15
+ }
16
+ }