@drivenets/design-system 0.10.0 → 0.11.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 (103) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/index.cjs +117 -122
  3. package/dist/index.d.cts +10 -2
  4. package/dist/index.d.cts.map +1 -1
  5. package/dist/index.d.ts +10 -2
  6. package/dist/index.d.ts.map +1 -1
  7. package/dist/index.js +119 -125
  8. package/dist/index.js.map +1 -1
  9. package/dist/index.min.css +1 -1
  10. package/package.json +1 -1
  11. package/src/components/ds-alert-banner/ds-alert-banner.module.scss +25 -25
  12. package/src/components/ds-autocomplete/ds-autocomplete.module.scss +29 -29
  13. package/src/components/ds-avatar/_mixins.scss +7 -7
  14. package/src/components/ds-avatar/ds-avatar.module.scss +2 -2
  15. package/src/components/ds-avatar-group/ds-avatar-group.module.scss +6 -6
  16. package/src/components/ds-breadcrumb/ds-breadcrumb.module.scss +14 -14
  17. package/src/components/ds-button/versions/ds-button-legacy/ds-button-legacy.module.scss +17 -17
  18. package/src/components/ds-button/versions/ds-button-new/ds-button-new.module.scss +135 -135
  19. package/src/components/ds-button-v3/ds-button-v3.module.scss +8 -8
  20. package/src/components/ds-card/ds-card.module.scss +12 -12
  21. package/src/components/ds-chip/ds-chip.module.scss +17 -17
  22. package/src/components/ds-chip-group/ds-chip-group.module.scss +12 -12
  23. package/src/components/ds-comment-bubble/components/ds-comment-thread/ds-comment-thread.module.scss +3 -3
  24. package/src/components/ds-comment-bubble/components/ds-thread-item/ds-thread-item.module.scss +18 -18
  25. package/src/components/ds-comment-bubble/ds-comment-bubble.module.scss +43 -43
  26. package/src/components/ds-comment-card/ds-comment-card.module.scss +34 -34
  27. package/src/components/ds-comment-indicator/ds-comment-indicator.module.scss +9 -9
  28. package/src/components/ds-comments-drawer/components/comments-filter-modal/comments-filter-modal.module.scss +10 -10
  29. package/src/components/ds-comments-drawer/ds-comments-drawer.module.scss +11 -11
  30. package/src/components/ds-date-input/ds-date-input.module.scss +42 -42
  31. package/src/components/ds-date-picker/components/calendar-table.module.scss +17 -17
  32. package/src/components/ds-date-picker/components/calendar-view-control/calendar-view-control.module.scss +8 -8
  33. package/src/components/ds-date-picker/components/day-view/day-view.module.scss +1 -1
  34. package/src/components/ds-date-picker/ds-date-picker.module.scss +1 -1
  35. package/src/components/ds-date-range-picker/ds-date-range-picker.module.scss +1 -1
  36. package/src/components/ds-dialog/ds-dialog.module.scss +3 -3
  37. package/src/components/ds-divider/ds-divider.module.scss +1 -1
  38. package/src/components/ds-drawer/ds-drawer.module.scss +12 -12
  39. package/src/components/ds-dropdown-menu/ds-dropdown-menu.module.scss +22 -14
  40. package/src/components/ds-dropdown-menu/ds-dropdown-menu.tsx +2 -0
  41. package/src/components/ds-dropdown-menu/ds-dropdown-menu.types.ts +9 -0
  42. package/src/components/ds-expandable-text-input/ds-expandable-text-input.module.scss +1 -1
  43. package/src/components/ds-file-upload/components/file-upload/file-upload.module.scss +22 -22
  44. package/src/components/ds-file-upload/components/file-upload-item/file-upload-item.module.scss +23 -23
  45. package/src/components/ds-filter-status-icon/ds-filter-status-icon.module.scss +5 -5
  46. package/src/components/ds-form-control/ds-form-control.module.scss +13 -13
  47. package/src/components/ds-icon/ds-icon.module.scss +8 -0
  48. package/src/components/ds-key-value-pair/ds-key-value-pair.module.scss +7 -7
  49. package/src/components/ds-modal/ds-modal.module.scss +9 -9
  50. package/src/components/ds-panel/ds-panel.module.scss +16 -16
  51. package/src/components/ds-popover/ds-popover.module.scss +2 -2
  52. package/src/components/ds-progress-arc/ds-progress-arc.module.scss +7 -7
  53. package/src/components/ds-progress-donut/ds-progress-donut.module.scss +7 -7
  54. package/src/components/ds-progress-linear/ds-progress-linear.module.scss +15 -15
  55. package/src/components/ds-segment-group/ds-segment-group.module.scss +18 -18
  56. package/src/components/ds-select/ds-select.module.scss +8 -8
  57. package/src/components/ds-skeleton/ds-skeleton.module.scss +1 -1
  58. package/src/components/ds-smart-tabs/ds-smart-tabs.module.scss +12 -12
  59. package/src/components/ds-smart-tabs/ds-smart-tabs.tsx +9 -9
  60. package/src/components/ds-spinner/ds-spinner.module.scss +1 -1
  61. package/src/components/ds-status-badge/ds-status-badge.module.scss +21 -25
  62. package/src/components/ds-stepper/ds-stepper.module.scss +55 -55
  63. package/src/components/ds-system-status/ds-system-status.module.scss +22 -22
  64. package/src/components/ds-table/components/ds-table-bulk-actions/ds-table-bulk-actions.module.scss +9 -9
  65. package/src/components/ds-table/components/ds-table-cell/ds-table-cell.module.scss +4 -4
  66. package/src/components/ds-table/components/ds-table-header/ds-table-header.module.scss +5 -10
  67. package/src/components/ds-table/components/ds-table-header/ds-table-header.tsx +6 -9
  68. package/src/components/ds-table/components/ds-table-row/ds-table-row.module.scss +13 -22
  69. package/src/components/ds-table/components/ds-table-row/ds-table-row.tsx +11 -18
  70. package/src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.module.scss +0 -7
  71. package/src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.tsx +19 -28
  72. package/src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.types.ts +0 -4
  73. package/src/components/ds-table/components/ds-table-row-selectable-cell/ds-table-row-selectable-cell.tsx +3 -8
  74. package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.module.scss +15 -11
  75. package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.tsx +9 -4
  76. package/src/components/ds-table/ds-table.module.scss +9 -2
  77. package/src/components/ds-table/ds-table.tsx +26 -4
  78. package/src/components/ds-table/filters/components/range-filter/range-filter.module.scss +1 -1
  79. package/src/components/ds-table/styles/_mixins.scss +1 -1
  80. package/src/components/ds-table/styles/_variables.scss +5 -6
  81. package/src/components/ds-table/utils/constants.ts +10 -0
  82. package/src/components/ds-tabs/components/ds-tabs-content/ds-tabs-content.module.scss +1 -1
  83. package/src/components/ds-tabs/components/ds-tabs-list/ds-tabs-indicator.module.scss +1 -1
  84. package/src/components/ds-tabs/components/ds-tabs-list/ds-tabs-list.module.scss +3 -3
  85. package/src/components/ds-tabs/components/ds-tabs-tab/ds-tabs-tab.module.scss +55 -55
  86. package/src/components/ds-tabs/ds-tabs.module.scss +1 -1
  87. package/src/components/ds-tag/ds-tag.module.scss +22 -22
  88. package/src/components/ds-tag-filter/ds-tag-filter.module.scss +10 -10
  89. package/src/components/ds-text-input/ds-text-input.module.scss +1 -1
  90. package/src/components/ds-time-picker/components/time-item/time-item.module.scss +8 -8
  91. package/src/components/ds-time-picker/components/time-scroller/time-scroller.module.scss +3 -3
  92. package/src/components/ds-toast/ds-toast.module.scss +11 -11
  93. package/src/components/ds-toggle/ds-toggle.module.scss +18 -18
  94. package/src/components/ds-tooltip/ds-tooltip.module.scss +5 -5
  95. package/src/components/ds-tree/ds-tree.module.scss +27 -27
  96. package/src/components/ds-vertical-tabs/ds-vertical-tabs.module.scss +13 -13
  97. package/src/styles/_root.scss +0 -18
  98. package/src/styles/_root_new.scss +1 -1
  99. package/src/styles/_scrollbars.scss +5 -5
  100. package/src/styles/_typography.scss +18 -14
  101. package/src/styles/mixins/_list.scss +8 -8
  102. package/src/styles/shared/_dropdown.scss +9 -9
  103. package/src/styles/shared/_input.scss +47 -47
package/src/components/ds-button/versions/ds-button-new/ds-button-new.module.scss CHANGED
@@ -8,7 +8,7 @@ $button-size-large: 40px;
8
8
  @mixin content-size-tiny {
9
9
  @include typography.body-xs-md;
10
10
  height: $button-size-tiny;
11
- border-radius: var(--spacing-4xs);
11
+ border-radius: var(--4xs);
12
12
  --icon-width-tiny: 13px;
13
13
  }
14
14
 
@@ -38,16 +38,16 @@ $button-size-large: 40px;
38
38
  padding-block: 0;
39
39
  padding-inline: 0;
40
40
  border: 2px solid transparent;
41
- border-radius: var(--exo-spacing-2x-small);
41
+ border-radius: var(--3xs);
42
42
 
43
43
  .content {
44
44
  display: flex;
45
45
  align-items: center;
46
46
  justify-content: center;
47
- gap: var(--exo-spacing-2x-small);
48
- padding: 0 var(--spacing-sm);
47
+ gap: var(--3xs);
48
+ padding: 0 var(--sm);
49
49
  border: 1px solid transparent;
50
- border-radius: var(--exo-spacing-2x-small);
50
+ border-radius: var(--3xs);
51
51
  flex-grow: 1;
52
52
  }
53
53
 
@@ -99,24 +99,24 @@ $button-size-large: 40px;
99
99
 
100
100
  &.primary-filled {
101
101
  border: 2px solid transparent;
102
- color: var(--color-font-on-action);
102
+ color: var(--font-on-action);
103
103
 
104
104
  .content {
105
- background: var(--color-background-selected);
105
+ background: var(--background-primary);
106
106
  }
107
107
 
108
108
  &:hover {
109
109
  .content {
110
- background: var(--color-background-selected-hover);
110
+ background: var(--background-primary-hover);
111
111
  }
112
112
  }
113
113
 
114
114
  &:focus-visible {
115
- border-color: var(--color-background-selected);
115
+ border-color: var(--background-primary);
116
116
 
117
117
  .content {
118
- border-color: var(--color-background);
119
- border-radius: calc(var(--exo-spacing-2x-small) / 2);
118
+ border-color: var(--background);
119
+ border-radius: calc(var(--3xs) / 2);
120
120
  }
121
121
  }
122
122
 
@@ -124,8 +124,8 @@ $button-size-large: 40px;
124
124
  cursor: not-allowed;
125
125
 
126
126
  .content {
127
- background: var(--color-background-disable);
128
- border-color: var(--color-background-disable);
127
+ background: var(--background-disable);
128
+ border-color: var(--background-disable);
129
129
  }
130
130
  }
131
131
  }
@@ -133,46 +133,46 @@ $button-size-large: 40px;
133
133
  &.secondary-filled {
134
134
  background: transparent;
135
135
  border: 2px solid transparent;
136
- color: var(--color-background-action);
136
+ color: var(--background-action);
137
137
 
138
138
  .content {
139
- background: var(--color-background);
140
- border-color: var(--color-border);
139
+ background: var(--background);
140
+ border-color: var(--border);
141
141
  }
142
142
 
143
143
  &:hover {
144
144
  &:not(:disabled) {
145
145
  .content {
146
- border-color: var(--color-background-action-hover);
147
- background: var(--color-background-action-hover-weak);
146
+ border-color: var(--background-action-hover);
147
+ background: var(--background-action-hover-weak);
148
148
  }
149
149
  }
150
150
 
151
151
  &:focus-visible {
152
- background: var(--color-background);
152
+ background: var(--background);
153
153
 
154
154
  .content {
155
- border-color: var(--color-background-action-secondary);
155
+ border-color: var(--background-action-secondary);
156
156
  }
157
157
  }
158
158
  }
159
159
 
160
160
  &:focus-visible {
161
- background: var(--color-background);
162
- border-color: var(--color-background-action-hover);
161
+ background: var(--background);
162
+ border-color: var(--background-action-hover);
163
163
 
164
164
  .content {
165
- border-color: var(--color-background);
166
- background: var(--color-background-action-hover-weak);
165
+ border-color: var(--background);
166
+ background: var(--background-action-hover-weak);
167
167
  }
168
168
  }
169
169
 
170
170
  &:disabled {
171
171
  cursor: not-allowed;
172
- color: var(--color-background-disable);
172
+ color: var(--background-disable);
173
173
 
174
174
  .content {
175
- border-color: var(--color-background-disable);
175
+ border-color: var(--background-disable);
176
176
  }
177
177
  }
178
178
  }
@@ -180,7 +180,7 @@ $button-size-large: 40px;
180
180
  &.tertiary-filled {
181
181
  background: transparent;
182
182
  border: 2px solid transparent;
183
- color: var(--color-background-action);
183
+ color: var(--background-action);
184
184
 
185
185
  .content {
186
186
  background: transparent;
@@ -189,74 +189,74 @@ $button-size-large: 40px;
189
189
 
190
190
  &:hover:not(:disabled) {
191
191
  .content {
192
- border-color: var(--color-border);
193
- background: var(--color-background-action-hover-weak);
192
+ border-color: var(--border);
193
+ background: var(--background-action-hover-weak);
194
194
  }
195
195
  }
196
196
 
197
197
  &:active {
198
198
  .content {
199
- border-color: var(--color-border);
199
+ border-color: var(--border);
200
200
  }
201
201
  }
202
202
 
203
203
  &:focus-visible {
204
- background: var(--color-background);
205
- border-color: var(--color-background-action-hover);
204
+ background: var(--background);
205
+ border-color: var(--background-action-hover);
206
206
 
207
207
  .content {
208
- border-color: var(--color-background);
209
- background: var(--color-background-action-hover-weak);
210
- border-radius: calc(var(--exo-spacing-2x-small) / 2);
208
+ border-color: var(--background);
209
+ background: var(--background-action-hover-weak);
210
+ border-radius: calc(var(--3xs) / 2);
211
211
  }
212
212
  }
213
213
 
214
214
  &:disabled {
215
215
  cursor: not-allowed;
216
- color: var(--color-background-disable);
216
+ color: var(--background-disable);
217
217
  }
218
218
  }
219
219
 
220
220
  &.secondary-ghost {
221
221
  background: transparent;
222
222
  border: 2px solid transparent;
223
- color: var(--color-background-selected);
223
+ color: var(--background-primary);
224
224
 
225
225
  .content {
226
- background: var(--color-background-action-secondary);
227
- border-color: var(--color-background-selected);
226
+ background: var(--background-action-secondary);
227
+ border-color: var(--background-primary);
228
228
  }
229
229
 
230
230
  &:hover {
231
231
  &:not(:disabled) {
232
232
  .content {
233
- background: var(--color-background-action-secondary-hover);
233
+ background: var(--background-action-secondary-hover);
234
234
  }
235
235
  }
236
236
 
237
237
  &:focus-visible {
238
238
  .content {
239
- border-color: var(--color-background-action-secondary);
239
+ border-color: var(--background-action-secondary);
240
240
  }
241
241
  }
242
242
  }
243
243
 
244
244
  &:focus-visible {
245
- background: var(--color-background);
246
- border-color: var(--color-background-selected);
245
+ background: var(--background);
246
+ border-color: var(--background-primary);
247
247
 
248
248
  .content {
249
- border-color: var(--color-background);
250
- background: var(--color-background-action-secondary-hover);
249
+ border-color: var(--background);
250
+ background: var(--background-action-secondary-hover);
251
251
  }
252
252
  }
253
253
 
254
254
  &:disabled {
255
255
  cursor: not-allowed;
256
- color: var(--color-background-disable);
256
+ color: var(--background-disable);
257
257
 
258
258
  .content {
259
- border-color: var(--color-background-disable);
259
+ border-color: var(--background-disable);
260
260
  }
261
261
  }
262
262
  }
@@ -264,7 +264,7 @@ $button-size-large: 40px;
264
264
  &.tertiary-ghost {
265
265
  background: transparent;
266
266
  border: 2px solid transparent;
267
- color: var(--color-background-selected);
267
+ color: var(--background-primary);
268
268
 
269
269
  .content {
270
270
  background: transparent;
@@ -273,52 +273,52 @@ $button-size-large: 40px;
273
273
 
274
274
  &:hover:not(:disabled) {
275
275
  .content {
276
- background: var(--color-background-action-secondary-hover);
276
+ background: var(--background-action-secondary-hover);
277
277
  }
278
278
  }
279
279
 
280
280
  &:active {
281
281
  .content {
282
- border-color: var(--color-border);
282
+ border-color: var(--border);
283
283
  }
284
284
  }
285
285
 
286
286
  &:focus-visible {
287
- background: var(--color-background);
288
- border-color: var(--color-background-selected);
287
+ background: var(--background);
288
+ border-color: var(--background-primary);
289
289
 
290
290
  .content {
291
- border-color: var(--color-background);
292
- background: var(--color-background-action-secondary-hover);
291
+ border-color: var(--background);
292
+ background: var(--background-action-secondary-hover);
293
293
  }
294
294
  }
295
295
 
296
296
  &:disabled {
297
297
  cursor: not-allowed;
298
- color: var(--color-background-disable);
298
+ color: var(--background-disable);
299
299
  }
300
300
  }
301
301
 
302
302
  &.primary-danger {
303
303
  border: 2px solid transparent;
304
- color: var(--color-font-on-action);
304
+ color: var(--font-on-action);
305
305
 
306
306
  .content {
307
- background: var(--color-background-danger-strong);
307
+ background: var(--background-error);
308
308
  }
309
309
 
310
310
  &:hover {
311
311
  .content {
312
- background: var(--color-background-danger-strong-hover);
312
+ background: var(--background-error-hover);
313
313
  }
314
314
  }
315
315
 
316
316
  &:focus-visible {
317
- border-color: var(--color-background-danger-strong);
317
+ border-color: var(--background-error);
318
318
 
319
319
  .content {
320
- border-color: var(--color-background);
321
- border-radius: calc(var(--exo-spacing-2x-small) / 2);
320
+ border-color: var(--background);
321
+ border-radius: calc(var(--3xs) / 2);
322
322
  }
323
323
  }
324
324
 
@@ -326,8 +326,8 @@ $button-size-large: 40px;
326
326
  cursor: not-allowed;
327
327
 
328
328
  .content {
329
- background: var(--color-background-disable);
330
- border-color: var(--color-background-disable);
329
+ background: var(--background-disable);
330
+ border-color: var(--background-disable);
331
331
  }
332
332
  }
333
333
  }
@@ -335,47 +335,47 @@ $button-size-large: 40px;
335
335
  &.secondary-danger {
336
336
  background: transparent;
337
337
  border: 2px solid transparent;
338
- color: var(--color-background-danger-strong);
338
+ color: var(--background-error);
339
339
 
340
340
  .content {
341
- background: var(--color-background);
342
- border-color: var(--color-background-danger-strong);
341
+ background: var(--background);
342
+ border-color: var(--background-error);
343
343
  }
344
344
 
345
345
  &:hover {
346
346
  &:not(:disabled) {
347
- color: var(--color-background-danger-strong-hover);
347
+ color: var(--background-error-hover);
348
348
 
349
349
  .content {
350
- border-color: var(--color-background-danger-strong-hover);
351
- background: var(--color-background-danger-weak);
350
+ border-color: var(--background-error-hover);
351
+ background: var(--background-error-secondary-hover);
352
352
  }
353
353
  }
354
354
 
355
355
  &:focus-visible {
356
356
  .content {
357
- border-color: var(--color-background-action-secondary);
357
+ border-color: var(--background-action-secondary);
358
358
  }
359
359
  }
360
360
  }
361
361
 
362
362
  &:focus-visible {
363
- background: var(--color-background);
364
- border-color: var(--color-background-danger-strong);
363
+ background: var(--background);
364
+ border-color: var(--background-error);
365
365
 
366
366
  .content {
367
- color: var(--color-background-danger-strong-hover);
368
- border-color: var(--color-background);
369
- background: var(--color-background-danger-weak);
367
+ color: var(--background-error-hover);
368
+ border-color: var(--background);
369
+ background: var(--background-error-secondary-hover);
370
370
  }
371
371
  }
372
372
 
373
373
  &:disabled {
374
374
  cursor: not-allowed;
375
- color: var(--color-background-disable);
375
+ color: var(--background-disable);
376
376
 
377
377
  .content {
378
- border-color: var(--color-background-disable);
378
+ border-color: var(--background-disable);
379
379
  }
380
380
  }
381
381
  }
@@ -383,7 +383,7 @@ $button-size-large: 40px;
383
383
  &.tertiary-danger {
384
384
  background: transparent;
385
385
  border: 2px solid transparent;
386
- color: var(--color-background-danger-strong);
386
+ color: var(--background-error);
387
387
 
388
388
  .content {
389
389
  background: transparent;
@@ -392,63 +392,63 @@ $button-size-large: 40px;
392
392
 
393
393
  &:hover:not(:disabled) {
394
394
  .content {
395
- border-color: var(--color-background-danger-strong-hover);
396
- background: var(--color-background-danger-weak);
395
+ border-color: var(--background-error-hover);
396
+ background: var(--background-error-secondary-hover);
397
397
  }
398
398
 
399
399
  &:focus-visible {
400
- background: var(--color-background);
400
+ background: var(--background);
401
401
 
402
402
  .content {
403
- border-color: var(--color-background);
403
+ border-color: var(--background);
404
404
  }
405
405
  }
406
406
  }
407
407
 
408
408
  &:focus-visible {
409
- background: var(--color-background);
410
- border-color: var(--color-background-danger-strong);
409
+ background: var(--background);
410
+ border-color: var(--background-error);
411
411
 
412
412
  .content {
413
- border-color: var(--color-background);
414
- background: var(--color-background-danger-weak);
413
+ border-color: var(--background);
414
+ background: var(--background-error-secondary-hover);
415
415
  }
416
416
  }
417
417
 
418
418
  &:disabled {
419
419
  cursor: not-allowed;
420
- background: var(--color-background);
421
- color: var(--color-background-disable);
420
+ background: var(--background);
421
+ color: var(--background-disable);
422
422
  }
423
423
  }
424
424
 
425
425
  &.primary-dark {
426
426
  border: 2px solid transparent;
427
- color: var(--color-font-on-action);
427
+ color: var(--font-on-action);
428
428
 
429
429
  .content {
430
- background: var(--color-dark-buttons-primary);
430
+ background: var(--light-buttons-primary);
431
431
  }
432
432
 
433
433
  &:hover:not(:disabled) {
434
434
  .content {
435
- background: var(--color-dark-buttons-primary-hover);
435
+ background: var(--light-buttons-primary-hover);
436
436
  }
437
437
  }
438
438
 
439
439
  &:active:not(:disabled) {
440
440
  .content {
441
- background: var(--color-dark-buttons-primary-hover);
441
+ background: var(--light-buttons-primary-hover);
442
442
  }
443
443
  }
444
444
 
445
445
  &:focus-visible {
446
- background: var(--color-background-brand);
447
- border-color: var(--color-dark-buttons-primary);
446
+ background: var(--background-brand);
447
+ border-color: var(--light-buttons-primary);
448
448
 
449
449
  .content {
450
- border-color: var(--color-font-on-action);
451
- border-radius: calc(var(--exo-spacing-2x-small) / 2);
450
+ border-color: var(--font-on-action);
451
+ border-radius: calc(var(--3xs) / 2);
452
452
  }
453
453
  }
454
454
 
@@ -456,8 +456,8 @@ $button-size-large: 40px;
456
456
  cursor: not-allowed;
457
457
 
458
458
  .content {
459
- background: var(--color-background-action-inverse);
460
- color: var(--color-background-deselected);
459
+ background: var(--background-action-inverse);
460
+ color: var(--background-deselected);
461
461
  }
462
462
  }
463
463
  }
@@ -465,47 +465,47 @@ $button-size-large: 40px;
465
465
  &.secondary-dark {
466
466
  background: transparent;
467
467
  border: 2px solid transparent;
468
- color: var(--color-dark-buttons-primary-hover);
468
+ color: var(--light-buttons-primary-hover);
469
469
 
470
470
  .content {
471
471
  background: transparent;
472
- border-color: var(--color-dark-buttons-primary-hover);
472
+ border-color: var(--light-buttons-primary-hover);
473
473
  }
474
474
 
475
475
  &:hover:not(:disabled) {
476
476
  .content {
477
- background: var(--color-dark-buttons-secondary-background);
478
- border-color: var(--color-dark-buttons-secondary-hover);
479
- color: var(--color-dark-buttons-secondary-hover);
477
+ background: var(--light-buttons-secondary-background);
478
+ border-color: var(--light-buttons-secondary-hover);
479
+ color: var(--light-buttons-secondary-hover);
480
480
  }
481
481
  }
482
482
 
483
483
  &:active:not(:disabled) {
484
484
  .content {
485
485
  background: transparent;
486
- border-color: var(--color-dark-buttons-secondary-hover);
487
- color: var(--color-dark-buttons-secondary-hover);
486
+ border-color: var(--light-buttons-secondary-hover);
487
+ color: var(--light-buttons-secondary-hover);
488
488
  }
489
489
  }
490
490
 
491
491
  &:focus-visible {
492
492
  background: transparent;
493
- border-color: var(--color-dark-buttons-secondary-hover);
493
+ border-color: var(--light-buttons-secondary-hover);
494
494
 
495
495
  .content {
496
496
  border-color: transparent;
497
- background: var(--color-dark-buttons-secondary-background);
498
- color: var(--color-dark-buttons-secondary-hover);
499
- border-radius: calc(var(--exo-spacing-2x-small) / 2);
497
+ background: var(--light-buttons-secondary-background);
498
+ color: var(--light-buttons-secondary-hover);
499
+ border-radius: calc(var(--3xs) / 2);
500
500
  }
501
501
  }
502
502
 
503
503
  &:disabled {
504
504
  cursor: not-allowed;
505
- color: var(--color-background-deselected);
505
+ color: var(--background-deselected);
506
506
 
507
507
  .content {
508
- border-color: var(--color-background-deselected);
508
+ border-color: var(--background-deselected);
509
509
  }
510
510
  }
511
511
  }
@@ -513,47 +513,47 @@ $button-size-large: 40px;
513
513
  &.secondary-light-dark {
514
514
  background: transparent;
515
515
  border: 2px solid transparent;
516
- color: var(--color-dark-buttons-secondary-light);
516
+ color: var(--light-buttons-secondary-light);
517
517
 
518
518
  .content {
519
519
  background: transparent;
520
- border-color: var(--color-dark-buttons-secondary-light);
520
+ border-color: var(--light-buttons-secondary-light);
521
521
  }
522
522
 
523
523
  &:hover:not(:disabled) {
524
524
  .content {
525
- background: var(--color-dark-buttons-secondary-light-hover-background);
526
- border-color: var(--color-border);
527
- color: var(--color-dark-buttons-tertiary);
525
+ background: var(--light-buttons-secondary-light-hover-background);
526
+ border-color: var(--border);
527
+ color: var(--light-buttons-tertiary);
528
528
  }
529
529
  }
530
530
 
531
531
  &:active:not(:disabled) {
532
532
  .content {
533
533
  background: transparent;
534
- border-color: var(--color-background-secondary);
535
- color: var(--color-font-on-action);
534
+ border-color: var(--background-secondary);
535
+ color: var(--font-on-action);
536
536
  }
537
537
  }
538
538
 
539
539
  &:focus-visible {
540
540
  background: transparent;
541
- border-color: var(--color-dark-buttons-tertiary);
542
- border-radius: var(--spacing-2xs);
541
+ border-color: var(--light-buttons-tertiary);
542
+ border-radius: var(--2xs);
543
543
 
544
544
  .content {
545
545
  background: var(--Dark-Buttons-secondary-light-hover-background);
546
- color: var(--color-dark-buttons-tertiary);
547
- border-radius: var(--exo-spacing-2x-small);
546
+ color: var(--light-buttons-tertiary);
547
+ border-radius: var(--3xs);
548
548
  }
549
549
  }
550
550
 
551
551
  &:disabled {
552
552
  cursor: not-allowed;
553
- color: var(--color-background-deselected);
553
+ color: var(--background-deselected);
554
554
 
555
555
  .content {
556
- border-color: var(--color-background-deselected);
556
+ border-color: var(--background-deselected);
557
557
  }
558
558
  }
559
559
  }
@@ -561,7 +561,7 @@ $button-size-large: 40px;
561
561
  &.tertiary-dark {
562
562
  background: transparent;
563
563
  border: 2px solid transparent;
564
- color: var(--color-dark-buttons-tertiary);
564
+ color: var(--light-buttons-tertiary);
565
565
 
566
566
  .content {
567
567
  background: transparent;
@@ -570,35 +570,35 @@ $button-size-large: 40px;
570
570
 
571
571
  &:hover:not(:disabled) {
572
572
  .content {
573
- background: var(--color-dark-buttons-secondary-light-hover-background);
574
- border-color: var(--color-border);
575
- color: var(--color-dark-buttons-tertiary);
573
+ background: var(--light-buttons-secondary-light-hover-background);
574
+ border-color: var(--border);
575
+ color: var(--light-buttons-tertiary);
576
576
  }
577
577
  }
578
578
 
579
579
  &:active:not(:disabled) {
580
580
  .content {
581
581
  background: transparent;
582
- border-color: var(--color-background-secondary);
583
- color: var(--color-font-on-action);
582
+ border-color: var(--background-secondary);
583
+ color: var(--font-on-action);
584
584
  }
585
585
  }
586
586
 
587
587
  &:focus-visible {
588
588
  background: transparent;
589
- border-color: var(--color-dark-buttons-tertiary);
590
- border-radius: var(--spacing-2xs);
589
+ border-color: var(--light-buttons-tertiary);
590
+ border-radius: var(--2xs);
591
591
 
592
592
  .content {
593
593
  background: var(--Dark-Buttons-secondary-light-hover-background);
594
- color: var(--color-dark-buttons-tertiary);
595
- border-radius: var(--exo-spacing-2x-small);
594
+ color: var(--light-buttons-tertiary);
595
+ border-radius: var(--3xs);
596
596
  }
597
597
  }
598
598
 
599
599
  &:disabled {
600
600
  cursor: not-allowed;
601
- color: var(--color-background-deselected);
601
+ color: var(--background-deselected);
602
602
  }
603
603
  }
604
604
  }
package/src/components/ds-button-v3/ds-button-v3.module.scss CHANGED
@@ -50,29 +50,29 @@ $focus-ring-width: 2px;
50
50
  &[data-size='large'] {
51
51
  padding: var(--3xs) var(--sm);
52
52
  min-height: $height-large;
53
- font-size: var(--font-size-md);
54
- line-height: var(--line-height-md);
53
+ font-size: var(--body-font-size-md);
54
+ line-height: var(--body-line-height-md);
55
55
  }
56
56
 
57
57
  &[data-size='medium'] {
58
58
  padding: var(--3xs) var(--sm);
59
59
  min-height: $height-medium;
60
- font-size: var(--font-size-sm);
61
- line-height: var(--line-height-sm);
60
+ font-size: var(--body-font-size-sm);
61
+ line-height: var(--body-line-height-small);
62
62
  }
63
63
 
64
64
  &[data-size='small'] {
65
65
  padding: var(--3xs) var(--sm);
66
66
  min-height: $height-small;
67
- font-size: var(--font-size-xs);
68
- line-height: var(--line-height-xs);
67
+ font-size: var(--body-font-size-xs);
68
+ line-height: var(--body-line-height-xs);
69
69
  }
70
70
 
71
71
  &[data-size='tiny'] {
72
72
  min-height: var(--icon-width-tiny);
73
73
  padding: 0 var(--3xs);
74
- font-size: var(--font-size-xs);
75
- line-height: var(--line-height-xs);
74
+ font-size: var(--body-font-size-xs);
75
+ line-height: var(--body-line-height-xs);
76
76
  }
77
77
 
78
78
  &[data-icon-only][data-size='large'] {