@central-design-system/components 3.0.0-beta.0 → 3.0.0-beta.11

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 (141) hide show
  1. package/dist/cds.css +1 -1
  2. package/dist/cds.d.ts +3 -0
  3. package/dist/cds.es.js +9693 -8457
  4. package/dist/cds.umd.js +7 -3
  5. package/dist/components/CdsAutocomplete/CdsAutocomplete.vue.d.ts +114 -62
  6. package/dist/components/CdsBadge/CdsBadge.vue.d.ts +35 -14
  7. package/dist/components/CdsBreadcrumbs/CdsBreadcrumbs.vue.d.ts +12 -5
  8. package/dist/components/CdsBreadcrumbs/CdsBreadcrumbsItem.vue.d.ts +12 -6
  9. package/dist/components/CdsButton/CdsButton.vue.d.ts +25 -14
  10. package/dist/components/CdsCheckbox/CdsCheckbox.vue.d.ts +11 -0
  11. package/dist/components/CdsCheckbox/CdsCheckboxGroup.vue.d.ts +13 -0
  12. package/dist/components/CdsCombobox/CdsCombobox.vue.d.ts +184 -470
  13. package/dist/components/CdsContainer/CdsContainer.vue.d.ts +37 -24
  14. package/dist/components/CdsContainer/CdsContainerItem.vue.d.ts +1 -1
  15. package/dist/components/CdsContentSwitcher/CdsContentSwitcher.vue.d.ts +66 -0
  16. package/dist/components/CdsContentSwitcher/CdsContentSwitcherItem.vue.d.ts +212 -0
  17. package/dist/components/CdsContentSwitcher/index.d.ts +2 -0
  18. package/dist/components/CdsDatePicker/CdsDatePicker.vue.d.ts +12 -7
  19. package/dist/components/CdsDrawer/CdsDrawer.vue.d.ts +12 -0
  20. package/dist/components/CdsDropdown/CdsDropdown.vue.d.ts +236 -485
  21. package/dist/components/CdsEmptyState/CdsEmptyState.vue.d.ts +3 -3
  22. package/dist/components/CdsExpandablePanel/CdsExpandablePanel.vue.d.ts +11 -11
  23. package/dist/components/CdsExpandablePanel/CdsExpandablePanelContent.vue.d.ts +1 -1
  24. package/dist/components/CdsExpandablePanel/CdsExpandablePanelTitle.vue.d.ts +11 -11
  25. package/dist/components/CdsExpandablePanel/CdsExpandablePanels.vue.d.ts +14 -3
  26. package/dist/components/CdsExpandablePanel/composable/expandablePanelTitleProps.d.ts +2 -2
  27. package/dist/components/CdsFooter/CdsFooter.vue.d.ts +12 -1
  28. package/dist/components/CdsForm/CdsForm.vue.d.ts +12 -28
  29. package/dist/components/CdsHeader/CdsHeader.vue.d.ts +12 -1
  30. package/dist/components/CdsIcon/CdsIcon.vue.d.ts +16 -3
  31. package/dist/components/CdsInput/CdsInput.vue.d.ts +23 -39
  32. package/dist/components/CdsInput/CdsInputMessages.vue.d.ts +5 -5
  33. package/dist/components/CdsLayout/CdsLayout.vue.d.ts +13 -4
  34. package/dist/components/CdsLink/CdsLink.vue.d.ts +12 -0
  35. package/dist/components/CdsList/CdsList.vue.d.ts +12 -5
  36. package/dist/components/CdsList/CdsListGroup.vue.d.ts +7 -7
  37. package/dist/components/CdsList/CdsListItem.vue.d.ts +14 -26
  38. package/dist/components/CdsLoader/CdsLoader.vue.d.ts +12 -0
  39. package/dist/components/CdsMain/CdsMain.vue.d.ts +1 -1
  40. package/dist/components/CdsMenu/CdsMenu.vue.d.ts +12 -336
  41. package/dist/components/CdsModal/CdsModal.vue.d.ts +12 -341
  42. package/dist/components/CdsNotification/CdsNotification.vue.d.ts +35 -24
  43. package/dist/components/CdsNotification/CdsNotificationAlert.vue.d.ts +28 -351
  44. package/dist/components/CdsNotification/composable/notification.d.ts +3 -3
  45. package/dist/components/CdsOverlay/CdsOverlay.vue.d.ts +2 -8
  46. package/dist/components/CdsOverlay/composable/locationStrategies.d.ts +11 -11
  47. package/dist/components/CdsPage/CdsPage.vue.d.ts +1 -1
  48. package/dist/components/CdsPagination/CdsPagination.vue.d.ts +13 -7
  49. package/dist/components/CdsProgress/CdsProgress.vue.d.ts +13 -2
  50. package/dist/components/CdsRadioButton/CdsRadio.vue.d.ts +224 -0
  51. package/dist/components/CdsRadioButton/CdsRadioButton.vue.d.ts +13 -0
  52. package/dist/components/CdsSelect/CdsSelect.vue.d.ts +77 -71
  53. package/dist/components/CdsSidebar/CdsSidebar.vue.d.ts +30 -8
  54. package/dist/components/CdsSkeletonLoader/CdsSkeletonLoader.vue.d.ts +14 -3
  55. package/dist/components/CdsSlideGroup/CdsSlideGroup.vue.d.ts +19 -19
  56. package/dist/components/CdsStages/CdsStages.vue.d.ts +12 -0
  57. package/dist/components/CdsStatus/CdsStatus.vue.d.ts +12 -0
  58. package/dist/components/CdsSteps/CdsSteps.vue.d.ts +31 -28
  59. package/dist/components/CdsTable/CdsTable.vue.d.ts +42 -16
  60. package/dist/components/CdsTable/components/Table/InternalTable.d.ts +23 -5
  61. package/dist/components/CdsTable/components/TableProvider.d.ts +33 -4
  62. package/dist/components/CdsTable/composable/scroll.d.ts +4607 -0
  63. package/dist/components/CdsTable/composable/table.d.ts +7 -1
  64. package/dist/components/CdsTabs/CdsTab.vue.d.ts +10 -10
  65. package/dist/components/CdsTabs/CdsTabs.vue.d.ts +48 -37
  66. package/dist/components/CdsTag/CdsTag.vue.d.ts +12 -0
  67. package/dist/components/CdsTextArea/CdsTextArea.vue.d.ts +81 -67
  68. package/dist/components/CdsTextInput/CdsTextInput.vue.d.ts +87 -73
  69. package/dist/components/CdsTimePicker/CdsTimePicker.vue.d.ts +11 -0
  70. package/dist/components/CdsToggle/CdsToggle.vue.d.ts +14 -9
  71. package/dist/components/CdsToolbar/CdsToolbar.vue.d.ts +11 -0
  72. package/dist/components/CdsTooltip/CdsTooltip.vue.d.ts +20 -335
  73. package/dist/components/CdsUploader/CdsUploader.vue.d.ts +61 -389
  74. package/dist/components/CdsUploader/components/AjaxUploader.d.ts +16 -16
  75. package/dist/components/CdsUploader/components/UploadList/ListItem.d.ts +42 -24
  76. package/dist/components/CdsUploader/components/UploadList/UploadList.d.ts +42 -24
  77. package/dist/components/CdsUploader/composable/upload.d.ts +25 -15
  78. package/dist/components/index.d.ts +3 -0
  79. package/dist/composable/datetime.d.ts +2 -2
  80. package/dist/composable/delay.d.ts +2 -2
  81. package/dist/composable/field.d.ts +5 -3
  82. package/dist/composable/filter.d.ts +8 -0
  83. package/dist/composable/form.d.ts +1 -1
  84. package/dist/composable/group.d.ts +2 -2
  85. package/dist/composable/icon.d.ts +2 -2
  86. package/dist/composable/index.d.ts +1 -0
  87. package/dist/composable/items.d.ts +6 -0
  88. package/dist/composable/loading.d.ts +2 -2
  89. package/dist/composable/nested/nested.d.ts +1 -2
  90. package/dist/composable/select.d.ts +31 -3
  91. package/dist/composable/tag.d.ts +0 -3
  92. package/dist/composable/theme.d.ts +82 -0
  93. package/dist/composable/variant.d.ts +1 -1
  94. package/dist/create.d.ts +5 -1
  95. package/dist/directives/index.d.ts +1 -0
  96. package/dist/directives/intersect/index.d.ts +19 -0
  97. package/dist/globals.d.ts +8 -0
  98. package/dist/themes/b2b.d.ts +26 -0
  99. package/dist/themes/cds.d.ts +26 -0
  100. package/dist/themes/dark.d.ts +26 -0
  101. package/dist/themes/index.d.ts +5 -0
  102. package/dist/themes/promo.d.ts +26 -0
  103. package/dist/themes/themes.d.ts +10 -0
  104. package/dist/transitions/createTransition.d.ts +1 -1
  105. package/dist/transitions/index.d.ts +10 -10
  106. package/dist/utils/colors.d.ts +368 -0
  107. package/dist/utils/colorsUtils/APCA.d.ts +7 -0
  108. package/dist/utils/colorsUtils/index.d.ts +1 -0
  109. package/dist/utils/colorsUtils/transformCIELAB.d.ts +3 -0
  110. package/dist/utils/colorsUtils/transformSRGB.d.ts +3 -0
  111. package/dist/utils/colorsUtils/utils.d.ts +41 -0
  112. package/dist/utils/date/date.d.ts +12 -12
  113. package/dist/utils/helpers.d.ts +30 -0
  114. package/dist/utils/index.d.ts +2 -0
  115. package/package.json +1 -1
  116. package/src/scss/modules/grid/_mixins.scss +4 -2
  117. package/src/scss/themes/index.ts +1 -1
  118. package/src/scss/utility/display.scss +56 -5
  119. package/src/scss/utility/flexbox.scss +26 -28
  120. package/src/scss/utility/index.scss +0 -2
  121. package/src/scss/utility/layout.scss +65 -3
  122. package/src/scss/utility/spacing.scss +46 -86
  123. package/src/scss/utility/variables/display.scss +10 -0
  124. package/src/scss/utility/variables/exports/_display.scss +7 -0
  125. package/src/scss/utility/variables/exports/_flex.scss +13 -0
  126. package/src/scss/utility/variables/exports/_overflow.scss +7 -0
  127. package/src/scss/utility/variables/exports/_position.scss +7 -0
  128. package/src/scss/utility/variables/exports/_spacing.scss +14 -0
  129. package/src/scss/utility/variables/exports/_visibility.scss +7 -0
  130. package/src/scss/utility/variables/exports/_widthHeight.scss +7 -0
  131. package/src/scss/utility/variables/flex.scss +140 -0
  132. package/src/scss/utility/variables/index.scss +11 -0
  133. package/src/scss/utility/variables/overflow.scss +6 -0
  134. package/src/scss/utility/variables/position.scss +7 -0
  135. package/src/scss/utility/variables/spacing.scss +37 -0
  136. package/src/scss/utility/variables/visibility.scss +5 -0
  137. package/src/scss/utility/variables/widthHeight.scss +69 -0
  138. package/src/scss/utility/generatedFiles/generatedStyles.json +0 -1
  139. package/src/scss/utility/generatedFiles/generatedStyles.scss +0 -300
  140. package/src/scss/utility/typography.scss +0 -16
  141. package/src/scss/utility/variables.scss +0 -116
package/src/scss/utility/generatedFiles/generatedStyles.scss DELETED
@@ -1,300 +0,0 @@
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/typography.scss DELETED
@@ -1,16 +0,0 @@
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
- }
package/src/scss/utility/variables.scss DELETED
@@ -1,116 +0,0 @@
1
- @import "../mixins/layout/spacing";
2
- @import "../mixins/layout/layout";
3
- @import "../mixins/layout/spacing";
4
- @import "../mixins/typo";
5
-
6
- $xs: ('size': var(--cds-font-body-size-xs), 'height': var(--cds-font-height-body), 'weight': var(--cds-font-weight-light));
7
- $sm: ('size': var(--cds-font-body-size-s), 'height': var(--cds-font-height-body), 'weight': var(--cds-font-weight-light));
8
- $md: ('size': var(--cds-font-body-size-m), 'height': var(--cds-font-height-body), 'weight': var(--cds-font-weight-light));
9
- $lg: ('size': var(--cds-font-body-size-l), 'height': var(--cds-font-height-body), 'weight': var(--cds-font-weight-normal));
10
- $h1: ('size': var(--cds-font-heading-1), 'height': var(--cds-font-height-heading), 'weight': var(--cds-font-weight-light));
11
- $h2: ('size': var(--cds-font-heading-2), 'height': var(--cds-font-height-heading), 'weight': var(--cds-font-weight-light));
12
- $h3: ('size': var(--cds-font-heading-3), 'height': var(--cds-font-height-heading), 'weight': var(--cds-font-weight-light));
13
- $h4: ('size': var(--cds-font-heading-4), 'height': var(--cds-font-height-heading), 'weight': var(--cds-font-weight-bold));
14
- $h5: ('size': var(--cds-font-heading-5), 'height': var(--cds-font-height-heading), 'weight': var(--cds-font-weight-bold));
15
- $h6: ('size': var(--cds-font-heading-6), 'height': var(--cds-font-height-heading), 'weight': var(--cds-font-weight-bold));
16
- $display1: ('size': var(--cds-font-display-1), 'height': var(--cds-font-height-display), 'weight': var(--cds-font-weight-bold));
17
- $display2: ('size': var(--cds-font-display-2), 'height': var(--cds-font-height-display), 'weight': var(--cds-font-weight-bold));
18
-
19
- $typography: (
20
- 'h1': $h1,
21
- 'h2': $h2,
22
- 'h3': $h3,
23
- 'h4': $h4,
24
- 'h5': $h5,
25
- 'h6': $h6,
26
- 'xs': $xs,
27
- 'sm': $sm,
28
- 'md': $md,
29
- 'lg': $lg,
30
- 'display-1': $display1,
31
- 'display-2': $display2
32
- );
33
-
34
- $borders: ('1': var(--cds-border-element-01), '2': var(--cds-border-element-02));
35
- $borders-radius: ('3': var(--cds-border-radius-s), '6': var(--cds-border-radius-m), '9': var(--cds-border-radius-l));
36
-
37
- $spaces: (
38
- 'none': 0,
39
- '3xs': $cds-spacing-3xs,
40
- 'xxs': $cds-spacing-xxs,
41
- 'xs': $cds-spacing-xs,
42
- 's': $cds-spacing-s,
43
- 'm': $cds-spacing-m,
44
- 'l': $cds-spacing-l,
45
- 'xl': $cds-spacing-xl,
46
- 'xxl': $cds-spacing-xxl,
47
- '3xl': $cds-spacing-3xl,
48
- '4xl': $cds-spacing-4xl,
49
- '5xl': $cds-spacing-5xl,
50
- '6xl': $cds-spacing-6xl
51
- );
52
-
53
- $displays: (
54
- 'block': block,
55
- 'inline-block': inline-block,
56
- 'inline': inline,
57
- 'flex': flex,
58
- 'inline-flex': inline-flex,
59
- 'hidden': none,
60
- );
61
-
62
- $visibility: (
63
- 'invisible': hidden,
64
- 'visible': visible,
65
- );
66
-
67
- $flex-direction: (
68
- 'flex-col': column,
69
- 'flex-row': row,
70
- 'flex-row-reverse': row-reverse,
71
- 'flex-col-reverse': column-reverse
72
- );
73
-
74
- $justify-content: (
75
- 'center': center,
76
- 'start': flex-start,
77
- 'end': flex-end,
78
- 'between': space-between,
79
- 'around': space-around,
80
- 'stretch': stretch
81
- );
82
-
83
- $align-items: (
84
- 'start': flex-start,
85
- 'end': flex-end,
86
- 'center': center,
87
- 'baseline': baseline,
88
- 'stretch': stretch
89
- );
90
-
91
- $align-content: (
92
- 'start': flex-start,
93
- 'end': flex-end,
94
- 'center': center,
95
- 'between': space-between,
96
- 'around': space-around,
97
- 'stretch': stretch,
98
- );
99
-
100
- $align-self: (
101
- 'start': flex-start,
102
- 'end': flex-end,
103
- 'center': center,
104
- 'baseline': baseline,
105
- 'stretch': stretch,
106
- 'auto': auto,
107
- 'normal': normal,
108
- 'first-baseline': first baseline,
109
- 'last-baseline': last baseline
110
- );
111
-
112
- $flex-wrap: (
113
- 'wrap': wrap,
114
- 'nowrap': nowrap,
115
- 'wrap-reverse': wrap-reverse
116
- );