@drivenets/design-system 0.9.1 → 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 (176) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/dist/index.cjs +1182 -716
  3. package/dist/index.d.cts +1806 -636
  4. package/dist/index.d.cts.map +1 -1
  5. package/dist/index.d.ts +1809 -639
  6. package/dist/index.d.ts.map +1 -1
  7. package/dist/index.js +1189 -726
  8. package/dist/index.js.map +1 -1
  9. package/dist/index.min.css +1 -1
  10. package/package.json +11 -13
  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-breadcrumb/ds-breadcrumb.types.ts +40 -6
  18. package/src/components/ds-button/ds-button.types.ts +13 -2
  19. package/src/components/ds-button/versions/ds-button-legacy/ds-button-legacy.module.scss +17 -17
  20. package/src/components/ds-button/versions/ds-button-new/ds-button-new.module.scss +135 -135
  21. package/src/components/ds-button-v3/ds-button-v3.module.scss +113 -114
  22. package/src/components/ds-button-v3/ds-button-v3.types.ts +7 -0
  23. package/src/components/ds-card/ds-card.module.scss +12 -12
  24. package/src/components/ds-card/ds-card.types.ts +3 -1
  25. package/src/components/ds-checkbox/ds-checkbox.module.scss +106 -123
  26. package/src/components/ds-checkbox/ds-checkbox.tsx +24 -35
  27. package/src/components/ds-checkbox/ds-checkbox.types.ts +12 -11
  28. package/src/components/ds-checkbox-group/ds-checkbox-group.module.scss +13 -0
  29. package/src/components/ds-checkbox-group/ds-checkbox-group.tsx +20 -0
  30. package/src/components/ds-checkbox-group/ds-checkbox-group.types.ts +8 -0
  31. package/src/components/ds-checkbox-group/hooks/index.ts +6 -0
  32. package/src/components/ds-checkbox-group/hooks/use-checkbox-select-all.ts +65 -0
  33. package/src/components/ds-checkbox-group/index.ts +3 -0
  34. package/src/components/ds-chip/ds-chip.module.scss +17 -17
  35. package/src/components/ds-chip-group/ds-chip-group.module.scss +12 -12
  36. package/src/components/ds-comment-bubble/components/ds-comment-thread/ds-comment-thread.module.scss +3 -3
  37. package/src/components/ds-comment-bubble/components/ds-comment-thread/ds-comment-thread.types.ts +26 -0
  38. package/src/components/ds-comment-bubble/components/ds-thread-item/ds-thread-item.module.scss +18 -18
  39. package/src/components/ds-comment-bubble/components/ds-thread-item/ds-thread-item.types.ts +38 -0
  40. package/src/components/ds-comment-bubble/ds-comment-bubble.module.scss +43 -43
  41. package/src/components/ds-comment-bubble/ds-comment-bubble.types.ts +78 -0
  42. package/src/components/ds-comment-card/ds-comment-card.module.scss +34 -34
  43. package/src/components/ds-comment-card/ds-comment-card.types.ts +114 -0
  44. package/src/components/ds-comment-indicator/ds-comment-indicator.module.scss +9 -9
  45. package/src/components/ds-comment-indicator/ds-comment-indicator.types.ts +26 -0
  46. package/src/components/ds-comments-drawer/comments-filters.types.ts +33 -0
  47. package/src/components/ds-comments-drawer/components/comments-filter-modal/comments-filter-modal.module.scss +10 -10
  48. package/src/components/ds-comments-drawer/components/comments-filter-modal/comments-filter-modal.types.ts +37 -1
  49. package/src/components/ds-comments-drawer/ds-comments-drawer.module.scss +11 -11
  50. package/src/components/ds-comments-drawer/ds-comments-drawer.types.ts +64 -0
  51. package/src/components/ds-date-input/ds-date-input.module.scss +42 -42
  52. package/src/components/ds-date-input/ds-date-input.types.ts +23 -0
  53. package/src/components/ds-date-picker/components/calendar-table.module.scss +17 -17
  54. package/src/components/ds-date-picker/components/calendar-view-control/calendar-view-control.module.scss +8 -8
  55. package/src/components/ds-date-picker/components/day-view/day-view.module.scss +1 -1
  56. package/src/components/ds-date-picker/ds-date-picker.module.scss +1 -1
  57. package/src/components/ds-date-picker/ds-date-picker.tsx +3 -0
  58. package/src/components/ds-date-picker/ds-date-picker.types.ts +20 -0
  59. package/src/components/ds-date-range-picker/ds-date-range-picker.module.scss +1 -1
  60. package/src/components/ds-date-range-picker/ds-date-range-picker.types.ts +28 -0
  61. package/src/components/ds-dialog/ds-dialog.module.scss +3 -3
  62. package/src/components/ds-dialog/ds-dialog.types.ts +10 -1
  63. package/src/components/ds-divider/ds-divider.module.scss +1 -1
  64. package/src/components/ds-drawer/ds-drawer.module.scss +12 -12
  65. package/src/components/ds-dropdown-menu/ds-dropdown-menu.module.scss +22 -14
  66. package/src/components/ds-dropdown-menu/ds-dropdown-menu.tsx +2 -0
  67. package/src/components/ds-dropdown-menu/ds-dropdown-menu.types.ts +33 -0
  68. package/src/components/ds-expandable-text-input/ds-expandable-text-input.module.scss +1 -1
  69. package/src/components/ds-file-upload/components/file-upload/file-upload.module.scss +22 -22
  70. package/src/components/ds-file-upload/components/file-upload/file-upload.types.ts +1 -0
  71. package/src/components/ds-file-upload/components/file-upload-item/file-upload-item.module.scss +23 -23
  72. package/src/components/ds-file-upload/ds-file-upload-api.types.ts +55 -0
  73. package/src/components/ds-filter-status-icon/ds-filter-status-icon.module.scss +5 -5
  74. package/src/components/ds-form-control/ds-form-control.module.scss +13 -13
  75. package/src/components/ds-form-control/ds-form-control.types.ts +3 -0
  76. package/src/components/ds-grid/ds-grid.tsx +29 -12
  77. package/src/components/ds-grid/ds-grid.types.ts +16 -13
  78. package/src/components/ds-grid/index.ts +10 -2
  79. package/src/components/ds-icon/custom-icons/index.ts +2 -0
  80. package/src/components/ds-icon/custom-icons/special-leading-icon.tsx +11 -0
  81. package/src/components/ds-icon/ds-icon.module.scss +8 -0
  82. package/src/components/ds-icon/ds-icon.tsx +10 -4
  83. package/src/components/ds-icon/ds-icon.types.ts +30 -0
  84. package/src/components/ds-key-value-pair/ds-key-value-pair.module.scss +7 -7
  85. package/src/components/ds-key-value-pair/ds-key-value-pair.types.ts +12 -2
  86. package/src/components/ds-modal/ds-modal.module.scss +9 -9
  87. package/src/components/ds-modal/ds-modal.types.ts +16 -0
  88. package/src/components/ds-panel/ds-panel.module.scss +16 -16
  89. package/src/components/ds-panel/ds-panel.types.ts +39 -0
  90. package/src/components/ds-popover/ds-popover.module.scss +2 -2
  91. package/src/components/ds-progress-arc/ds-progress-arc.module.scss +7 -7
  92. package/src/components/ds-progress-donut/ds-progress-donut.module.scss +7 -7
  93. package/src/components/ds-progress-linear/ds-progress-linear.module.scss +15 -15
  94. package/src/components/ds-radio-group/ds-radio-group.module.scss +58 -56
  95. package/src/components/ds-radio-group/ds-radio-group.tsx +35 -28
  96. package/src/components/ds-radio-group/ds-radio-group.types.ts +38 -7
  97. package/src/components/ds-segment-group/ds-segment-group.module.scss +18 -18
  98. package/src/components/ds-segment-group/ds-segment-group.types.ts +17 -0
  99. package/src/components/ds-select/ds-select.module.scss +8 -8
  100. package/src/components/ds-select/ds-select.types.ts +32 -0
  101. package/src/components/ds-skeleton/ds-skeleton.module.scss +1 -1
  102. package/src/components/ds-smart-tabs/ds-smart-tabs.module.scss +12 -12
  103. package/src/components/ds-smart-tabs/ds-smart-tabs.tsx +9 -9
  104. package/src/components/ds-spinner/ds-spinner.module.scss +1 -1
  105. package/src/components/ds-split-button/ds-split-button.module.scss +7 -7
  106. package/src/components/ds-split-button/ds-split-button.types.ts +28 -0
  107. package/src/components/ds-stack/ds-stack.types.ts +23 -0
  108. package/src/components/ds-status-badge/ds-status-badge.module.scss +21 -25
  109. package/src/components/ds-stepper/ds-stepper.module.scss +55 -55
  110. package/src/components/ds-stepper/ds-stepper.types.ts +34 -1
  111. package/src/components/ds-system-status/ds-system-status.module.scss +22 -22
  112. package/src/components/ds-table/components/ds-table-body-virtualized/ds-table-body-virtualized.types.ts +27 -0
  113. package/src/components/ds-table/components/ds-table-bulk-actions/ds-table-bulk-actions.module.scss +9 -9
  114. package/src/components/ds-table/components/ds-table-cell/ds-table-cell.module.scss +4 -4
  115. package/src/components/ds-table/components/ds-table-header/ds-table-header.module.scss +5 -10
  116. package/src/components/ds-table/components/ds-table-header/ds-table-header.tsx +6 -9
  117. package/src/components/ds-table/components/ds-table-row/ds-table-row.module.scss +13 -22
  118. package/src/components/ds-table/components/ds-table-row/ds-table-row.tsx +11 -18
  119. package/src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.module.scss +0 -7
  120. package/src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.tsx +19 -28
  121. package/src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.types.ts +7 -1
  122. package/src/components/ds-table/components/ds-table-row-selectable-cell/ds-table-row-selectable-cell.tsx +3 -8
  123. package/src/components/ds-table/components/ds-table-row-selectable-cell/ds-table-row-selectable-cell.types.ts +11 -0
  124. package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.module.scss +15 -11
  125. package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.tsx +9 -4
  126. package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.types.ts +27 -0
  127. package/src/components/ds-table/ds-table.module.scss +9 -2
  128. package/src/components/ds-table/ds-table.tsx +26 -4
  129. package/src/components/ds-table/filters/components/range-filter/range-filter.module.scss +1 -1
  130. package/src/components/ds-table/filters/types/filter-adapter.types.ts +6 -0
  131. package/src/components/ds-table/styles/_mixins.scss +1 -1
  132. package/src/components/ds-table/styles/_variables.scss +5 -6
  133. package/src/components/ds-table/utils/constants.ts +10 -0
  134. package/src/components/ds-tabs/components/ds-tabs-content/ds-tabs-content.module.scss +1 -1
  135. package/src/components/ds-tabs/components/ds-tabs-list/ds-tabs-indicator.module.scss +1 -1
  136. package/src/components/ds-tabs/components/ds-tabs-list/ds-tabs-list.module.scss +3 -3
  137. package/src/components/ds-tabs/components/ds-tabs-tab/ds-tabs-tab.module.scss +55 -55
  138. package/src/components/ds-tabs/ds-tabs.module.scss +1 -1
  139. package/src/components/ds-tag/ds-tag.module.scss +22 -22
  140. package/src/components/ds-tag/ds-tag.types.ts +6 -0
  141. package/src/components/ds-tag-filter/ds-tag-filter.module.scss +10 -10
  142. package/src/components/ds-tag-filter/ds-tag-filter.types.ts +16 -0
  143. package/src/components/ds-text-input/ds-text-input.module.scss +1 -1
  144. package/src/components/ds-text-input/ds-text-input.types.ts +3 -0
  145. package/src/components/ds-time-picker/components/time-item/time-item.module.scss +8 -8
  146. package/src/components/ds-time-picker/components/time-item/time-item.types.ts +19 -0
  147. package/src/components/ds-time-picker/components/time-scroller/time-scroller.module.scss +3 -3
  148. package/src/components/ds-time-picker/components/time-scroller/time-scroller.types.ts +29 -0
  149. package/src/components/ds-time-picker/ds-time-picker.module.scss +7 -0
  150. package/src/components/ds-time-picker/ds-time-picker.tsx +8 -1
  151. package/src/components/ds-time-picker/ds-time-picker.types.ts +80 -0
  152. package/src/components/ds-toast/ds-toast.module.scss +11 -11
  153. package/src/components/ds-toggle/ds-toggle.module.scss +18 -18
  154. package/src/components/ds-tooltip/ds-tooltip.module.scss +5 -5
  155. package/src/components/ds-tooltip/ds-tooltip.types.ts +6 -0
  156. package/src/components/ds-tree/ds-tree.module.scss +27 -27
  157. package/src/components/ds-tree/ds-tree.types.ts +84 -2
  158. package/src/components/ds-typography/ds-typography.config.ts +46 -27
  159. package/src/components/ds-typography/ds-typography.tsx +22 -7
  160. package/src/components/ds-typography/ds-typography.types.ts +15 -4
  161. package/src/components/ds-vertical-tabs/ds-vertical-tabs.module.scss +13 -13
  162. package/src/components/ds-workspace/ds-workspace.module.scss +55 -0
  163. package/src/components/ds-workspace/ds-workspace.tsx +37 -0
  164. package/src/components/ds-workspace/ds-workspace.types.ts +17 -0
  165. package/src/components/ds-workspace/index.ts +8 -0
  166. package/src/index.ts +2 -0
  167. package/src/styles/_grid.scss +2 -2
  168. package/src/styles/_root.scss +0 -18
  169. package/src/styles/_root_new.scss +449 -0
  170. package/src/styles/_scrollbars.scss +5 -5
  171. package/src/styles/_typography.scss +18 -14
  172. package/src/styles/mixins/_list.scss +8 -8
  173. package/src/styles/shared/_dropdown.scss +9 -9
  174. package/src/styles/shared/_input.scss +47 -49
  175. package/src/styles/styles.scss +1 -0
  176. package/src/styles/_root_updated.scss +0 -593
package/src/components/ds-button-v3/ds-button-v3.module.scss CHANGED
@@ -1,4 +1,3 @@
1
- @use '../../styles/root_updated';
2
1
  @use '../../styles/shared/button' as button;
3
2
 
4
3
  $height-large: 40px;
@@ -51,29 +50,29 @@ $focus-ring-width: 2px;
51
50
  &[data-size='large'] {
52
51
  padding: var(--3xs) var(--sm);
53
52
  min-height: $height-large;
54
- font-size: var(--font-size-md);
55
- line-height: var(--line-height-md);
53
+ font-size: var(--body-font-size-md);
54
+ line-height: var(--body-line-height-md);
56
55
  }
57
56
 
58
57
  &[data-size='medium'] {
59
58
  padding: var(--3xs) var(--sm);
60
59
  min-height: $height-medium;
61
- font-size: var(--font-size-sm);
62
- line-height: var(--line-height-sm);
60
+ font-size: var(--body-font-size-sm);
61
+ line-height: var(--body-line-height-small);
63
62
  }
64
63
 
65
64
  &[data-size='small'] {
66
65
  padding: var(--3xs) var(--sm);
67
66
  min-height: $height-small;
68
- font-size: var(--font-size-xs);
69
- line-height: var(--line-height-xs);
67
+ font-size: var(--body-font-size-xs);
68
+ line-height: var(--body-line-height-xs);
70
69
  }
71
70
 
72
71
  &[data-size='tiny'] {
73
72
  min-height: var(--icon-width-tiny);
74
73
  padding: 0 var(--3xs);
75
- font-size: var(--font-size-xs);
76
- line-height: var(--line-height-xs);
74
+ font-size: var(--body-font-size-xs);
75
+ line-height: var(--body-line-height-xs);
77
76
  }
78
77
 
79
78
  &[data-icon-only][data-size='large'] {
@@ -98,294 +97,294 @@ $focus-ring-width: 2px;
98
97
  }
99
98
 
100
99
  .root[data-color='default'][data-variant='primary'] {
101
- background-color: var(--background-background-primary);
102
- color: var(--font-font-on-action);
100
+ background-color: var(--background-primary);
101
+ color: var(--font-on-action);
103
102
  border-color: transparent;
104
103
 
105
104
  &:hover:not(:disabled):not(:active):not([data-selected='true']) {
106
- background-color: var(--background-background-primary-hover);
105
+ background-color: var(--background-primary-hover);
107
106
  }
108
107
 
109
108
  &:active:not(:disabled) {
110
- background-color: var(--background-background-primary-selected);
109
+ background-color: var(--background-primary-selected);
111
110
  }
112
111
 
113
112
  &:focus-visible {
114
- @include focus-ring(var(--border-border-action-primary));
113
+ @include focus-ring(var(--border-action-primary));
115
114
 
116
- background-color: var(--background-background-primary-hover);
117
- border-color: var(--border-border-inverse);
115
+ background-color: var(--background-primary-hover);
116
+ border-color: var(--border-inverse);
118
117
  }
119
118
 
120
119
  &[data-selected='true'] {
121
- background-color: var(--background-background-primary-selected);
120
+ background-color: var(--background-primary-selected);
122
121
  }
123
122
 
124
123
  &:disabled:not([data-loading]) {
125
- background-color: var(--background-background-disable);
126
- color: var(--font-font-on-action);
124
+ background-color: var(--background-disable);
125
+ color: var(--font-on-action);
127
126
  }
128
127
  }
129
128
 
130
129
  .root[data-color='default'][data-variant='secondary'] {
131
- background-color: var(--background-background-action-secondary);
132
- color: var(--font-font-main);
133
- border-color: var(--border-border);
130
+ background-color: var(--background-action-secondary);
131
+ color: var(--font-main);
132
+ border-color: var(--border);
134
133
 
135
134
  &:hover:not(:disabled):not(:active):not([data-selected='true']) {
136
- background-color: var(--background-background-secondary-hover);
137
- color: var(--font-font-action-secondary);
138
- border-color: var(--border-border-secondary-hover);
135
+ background-color: var(--background-secondary-hover);
136
+ color: var(--font-action-secondary);
137
+ border-color: var(--border-secondary-hover);
139
138
  }
140
139
 
141
140
  &:active:not(:disabled) {
142
- background-color: var(--background-background-action-secondary-hover);
143
- color: var(--font-font-action-secondary);
144
- border-color: var(--border-border-secondary-hover);
141
+ background-color: var(--background-action-secondary-hover);
142
+ color: var(--font-action-secondary);
143
+ border-color: var(--border-secondary-hover);
145
144
  }
146
145
 
147
146
  &:focus-visible {
148
- @include focus-ring(var(--border-border-action-primary-hover));
147
+ @include focus-ring(var(--border-action-primary-hover));
149
148
 
150
- background-color: var(--background-background-secondary-hover);
151
- border-color: var(--border-border-inverse);
152
- color: var(--font-font-action-secondary);
149
+ background-color: var(--background-secondary-hover);
150
+ border-color: var(--border-inverse);
151
+ color: var(--font-action-secondary);
153
152
  }
154
153
 
155
154
  &[data-selected='true'] {
156
- background-color: var(--background-background-action-secondary-hover);
157
- color: var(--font-font-action-secondary);
158
- border-color: var(--border-border-secondary-hover);
155
+ background-color: var(--background-action-secondary-hover);
156
+ color: var(--font-action-secondary);
157
+ border-color: var(--border-secondary-hover);
159
158
  }
160
159
 
161
160
  &:disabled:not([data-loading]) {
162
- background-color: var(--background-background-action-secondary);
163
- color: var(--font-font-disabled);
164
- border-color: var(--border-border-disabled);
161
+ background-color: var(--background-action-secondary);
162
+ color: var(--font-disabled);
163
+ border-color: var(--border-disabled);
165
164
  }
166
165
  }
167
166
 
168
167
  .root[data-color='default'][data-variant='tertiary'] {
169
168
  background-color: transparent;
170
- color: var(--font-font-main);
169
+ color: var(--font-main);
171
170
  border-color: transparent;
172
171
 
173
172
  &:hover:not(:disabled):not(:active):not([data-selected='true']) {
174
- background-color: var(--background-background-secondary-hover);
175
- color: var(--font-font-action-secondary);
173
+ background-color: var(--background-secondary-hover);
174
+ color: var(--font-action-secondary);
176
175
  }
177
176
 
178
177
  &:active:not(:disabled) {
179
- background-color: var(--background-background-action-secondary-hover);
180
- color: var(--font-font-action-secondary);
178
+ background-color: var(--background-action-secondary-hover);
179
+ color: var(--font-action-secondary);
181
180
  }
182
181
 
183
182
  &:focus-visible {
184
- @include focus-ring(var(--border-border-action-primary-hover));
183
+ @include focus-ring(var(--border-action-primary-hover));
185
184
 
186
- background-color: var(--background-background-secondary-hover);
187
- border-color: var(--border-border-inverse);
188
- color: var(--font-font-action-secondary);
185
+ background-color: var(--background-secondary-hover);
186
+ border-color: var(--border-inverse);
187
+ color: var(--font-action-secondary);
189
188
  }
190
189
 
191
190
  &[data-selected='true'] {
192
- background-color: var(--background-background-action-secondary-hover);
193
- color: var(--font-font-action-secondary);
191
+ background-color: var(--background-action-secondary-hover);
192
+ color: var(--font-action-secondary);
194
193
  }
195
194
 
196
195
  &:disabled:not([data-loading]) {
197
196
  background-color: transparent;
198
- color: var(--font-font-disabled);
197
+ color: var(--font-disabled);
199
198
  }
200
199
  }
201
200
 
202
201
  .root[data-color='error'][data-variant='primary'] {
203
- background-color: var(--background-background-error);
204
- color: var(--font-font-on-action);
202
+ background-color: var(--background-error);
203
+ color: var(--font-on-action);
205
204
  border-color: transparent;
206
205
 
207
206
  &:hover:not(:disabled):not(:active):not([data-selected='true']) {
208
- background-color: var(--background-background-error-hover);
207
+ background-color: var(--background-error-hover);
209
208
  }
210
209
 
211
210
  &:active:not(:disabled) {
212
- background-color: var(--background-background-error-selected);
211
+ background-color: var(--background-error-selected);
213
212
  }
214
213
 
215
214
  &:focus-visible {
216
- @include focus-ring(var(--border-border-error));
215
+ @include focus-ring(var(--border-error));
217
216
 
218
- background-color: var(--background-background-error-hover);
219
- border-color: var(--border-border-inverse);
217
+ background-color: var(--background-error-hover);
218
+ border-color: var(--border-inverse);
220
219
  }
221
220
 
222
221
  &[data-selected='true'] {
223
- background-color: var(--background-background-error-selected);
222
+ background-color: var(--background-error-selected);
224
223
  }
225
224
 
226
225
  &:disabled:not([data-loading]) {
227
- background-color: var(--background-background-disable);
228
- color: var(--font-font-on-action);
226
+ background-color: var(--background-disable);
227
+ color: var(--font-on-action);
229
228
  }
230
229
  }
231
230
 
232
231
  .root[data-color='error'][data-variant='secondary'] {
233
- background-color: var(--background-background-action-secondary);
234
- color: var(--font-font-error);
235
- border-color: var(--border-border-error);
232
+ background-color: var(--background-action-secondary);
233
+ color: var(--font-error);
234
+ border-color: var(--border-error);
236
235
 
237
236
  &:hover:not(:disabled):not(:active):not([data-selected='true']) {
238
- background-color: var(--background-background-error-secondary-hover);
239
- border-color: var(--border-border-error-hover);
237
+ background-color: var(--background-error-secondary-hover);
238
+ border-color: var(--border-error-hover);
240
239
  }
241
240
 
242
241
  &:active:not(:disabled) {
243
- background-color: var(--background-background-error-secondary-selected);
244
- border-color: var(--border-border-error-hover);
242
+ background-color: var(--background-error-secondary-selected);
243
+ border-color: var(--border-error-hover);
245
244
  }
246
245
 
247
246
  &:focus-visible {
248
- @include focus-ring(var(--border-border-error));
247
+ @include focus-ring(var(--border-error));
249
248
 
250
- background-color: var(--background-background-error-secondary-hover);
251
- border-color: var(--border-border-inverse);
249
+ background-color: var(--background-error-secondary-hover);
250
+ border-color: var(--border-inverse);
252
251
  }
253
252
 
254
253
  &[data-selected='true'] {
255
- background-color: var(--background-background-error-secondary-selected);
256
- border-color: var(--border-border-error-hover);
254
+ background-color: var(--background-error-secondary-selected);
255
+ border-color: var(--border-error-hover);
257
256
  }
258
257
 
259
258
  &:disabled:not([data-loading]) {
260
- background-color: var(--background-background-action-secondary);
261
- color: var(--font-font-disabled);
262
- border-color: var(--border-border-disabled);
259
+ background-color: var(--background-action-secondary);
260
+ color: var(--font-disabled);
261
+ border-color: var(--border-disabled);
263
262
  }
264
263
  }
265
264
 
266
265
  .root[data-color='error'][data-variant='tertiary'] {
267
266
  background-color: transparent;
268
- color: var(--font-font-error);
267
+ color: var(--font-error);
269
268
  border-color: transparent;
270
269
 
271
270
  &:hover:not(:disabled):not(:active):not([data-selected='true']) {
272
- background-color: var(--background-background-error-secondary-hover);
271
+ background-color: var(--background-error-secondary-hover);
273
272
  }
274
273
 
275
274
  &:active:not(:disabled) {
276
- background-color: var(--background-background-error-secondary-selected);
275
+ background-color: var(--background-error-secondary-selected);
277
276
  }
278
277
 
279
278
  &:focus-visible {
280
- @include focus-ring(var(--border-border-error));
279
+ @include focus-ring(var(--border-error));
281
280
 
282
- background-color: var(--background-background-error-secondary-hover);
283
- border-color: var(--border-border-inverse);
281
+ background-color: var(--background-error-secondary-hover);
282
+ border-color: var(--border-inverse);
284
283
  }
285
284
 
286
285
  &[data-selected='true'] {
287
- background-color: var(--background-background-error-secondary-selected);
286
+ background-color: var(--background-error-secondary-selected);
288
287
  }
289
288
 
290
289
  &:disabled:not([data-loading]) {
291
290
  background-color: transparent;
292
- color: var(--font-font-disabled);
291
+ color: var(--font-disabled);
293
292
  }
294
293
  }
295
294
 
296
295
  .root[data-color='light'][data-variant='primary'] {
297
- background-color: var(--background-background-ondark-primary);
298
- color: var(--font-font-on-action);
296
+ background-color: var(--background-ondark-primary);
297
+ color: var(--font-on-action);
299
298
  border-color: transparent;
300
299
 
301
300
  &:hover:not(:disabled):not(:active):not([data-selected='true']) {
302
- background-color: var(--background-background-ondark-primary-hover);
301
+ background-color: var(--background-ondark-primary-hover);
303
302
  }
304
303
 
305
304
  &:active:not(:disabled) {
306
- background-color: var(--background-background-ondark-primary-selected);
305
+ background-color: var(--background-ondark-primary-selected);
307
306
  }
308
307
 
309
308
  &:focus-visible {
310
309
  @include focus-ring(var(--outline-outline-inverse));
311
310
 
312
- background-color: var(--background-background-ondark-primary-hover);
313
- border-color: var(--border-border-action-secondary);
311
+ background-color: var(--background-ondark-primary-hover);
312
+ border-color: var(--border-action-secondary);
314
313
  }
315
314
 
316
315
  &[data-selected='true'] {
317
- background-color: var(--background-background-ondark-primary-selected);
316
+ background-color: var(--background-ondark-primary-selected);
318
317
  }
319
318
 
320
319
  &:disabled:not([data-loading]) {
321
- background-color: var(--background-background-ondark-disabled);
322
- color: var(--font-font-disabled);
320
+ background-color: var(--background-ondark-disabled);
321
+ color: var(--font-disabled);
323
322
  }
324
323
  }
325
324
 
326
325
  .root[data-color='light'][data-variant='secondary'] {
327
326
  background-color: transparent;
328
- color: var(--font-font-on-action);
329
- border-color: var(--border-border-ondark-secondary);
327
+ color: var(--font-on-action);
328
+ border-color: var(--border-ondark-secondary);
330
329
 
331
330
  &:hover:not(:disabled):not(:active):not([data-selected='true']) {
332
- background-color: var(--background-background-ondark-secondary-hover);
333
- color: var(--font-font-on-action);
331
+ background-color: var(--background-ondark-secondary-hover);
332
+ color: var(--font-on-action);
334
333
  }
335
334
 
336
335
  &:active:not(:disabled) {
337
- background-color: var(--background-background-ondark-secondary-selected);
338
- color: var(--font-font-on-action);
336
+ background-color: var(--background-ondark-secondary-selected);
337
+ color: var(--font-on-action);
339
338
  }
340
339
 
341
340
  &:focus-visible {
342
341
  @include focus-ring(var(--outline-outline-inverse));
343
342
 
344
- background-color: var(--background-background-ondark-secondary-hover);
345
- border-color: var(--border-border-action-secondary);
346
- color: var(--font-font-on-action);
343
+ background-color: var(--background-ondark-secondary-hover);
344
+ border-color: var(--border-action-secondary);
345
+ color: var(--font-on-action);
347
346
  }
348
347
 
349
348
  &[data-selected='true'] {
350
- background-color: var(--background-background-ondark-secondary-selected);
349
+ background-color: var(--background-ondark-secondary-selected);
351
350
  }
352
351
 
353
352
  &:disabled:not([data-loading]) {
354
353
  background-color: transparent;
355
- color: var(--font-font-ondark-disabled);
356
- border-color: var(--background-background-ondark-disabled);
354
+ color: var(--font-ondark-disabled);
355
+ border-color: var(--background-ondark-disabled);
357
356
  }
358
357
  }
359
358
 
360
359
  .root[data-color='light'][data-variant='tertiary'] {
361
360
  background-color: transparent;
362
- color: var(--font-font-on-action);
361
+ color: var(--font-on-action);
363
362
  border-color: transparent;
364
363
 
365
364
  &:hover:not(:disabled):not(:active):not([data-selected='true']) {
366
- background-color: var(--background-background-ondark-secondary-hover);
367
- color: var(--font-font-on-action);
365
+ background-color: var(--background-ondark-secondary-hover);
366
+ color: var(--font-on-action);
368
367
  }
369
368
 
370
369
  &:active:not(:disabled) {
371
- background-color: var(--background-background-ondark-secondary-selected);
372
- color: var(--font-font-on-action);
370
+ background-color: var(--background-ondark-secondary-selected);
371
+ color: var(--font-on-action);
373
372
  }
374
373
 
375
374
  &:focus-visible {
376
375
  @include focus-ring(var(--outline-outline-inverse));
377
376
 
378
- background-color: var(--background-background-ondark-secondary-hover);
379
- border-color: var(--border-border-action-secondary);
380
- color: var(--font-font-on-action);
377
+ background-color: var(--background-ondark-secondary-hover);
378
+ border-color: var(--border-action-secondary);
379
+ color: var(--font-on-action);
381
380
  }
382
381
 
383
382
  &[data-selected='true'] {
384
- background-color: var(--background-background-ondark-secondary-selected);
383
+ background-color: var(--background-ondark-secondary-selected);
385
384
  }
386
385
 
387
386
  &:disabled:not([data-loading]) {
388
387
  background-color: transparent;
389
- color: var(--font-font-ondark-disabled);
388
+ color: var(--font-ondark-disabled);
390
389
  }
391
390
  }
package/src/components/ds-button-v3/ds-button-v3.types.ts CHANGED
@@ -23,16 +23,23 @@ export interface DsButtonV3BaseProps extends ButtonHTMLAttributes<HTMLButtonElem
23
23
  color?: ButtonV3Color;
24
24
 
25
25
  /**
26
+ * Visual variant of the button:
27
+ * - `primary` — filled, highest-emphasis action
28
+ * - `secondary` — outlined, medium-emphasis action
29
+ * - `tertiary` — borderless, low-emphasis action (text-like)
26
30
  * @default 'primary'
27
31
  */
28
32
  variant?: ButtonV3Variant;
29
33
 
30
34
  /**
35
+ * Size of the button. Controls height, padding, font size, and icon size.
31
36
  * @default 'medium'
32
37
  */
33
38
  size?: ButtonV3Size;
34
39
 
35
40
  /**
41
+ * Whether the button is in a selected/pressed state. Used for toggle buttons
42
+ * and segmented controls.
36
43
  * @default false
37
44
  */
38
45
  selected?: boolean;
package/src/components/ds-card/ds-card.module.scss CHANGED
@@ -10,8 +10,8 @@ $transition-duration: 0.2s;
10
10
  position: relative;
11
11
  display: flex;
12
12
  flex-direction: column;
13
- background: var(--color-background);
14
- border: 1px solid var(--color-border-contrast);
13
+ background: var(--background);
14
+ border: 1px solid var(--border-contrast);
15
15
  overflow: hidden;
16
16
  box-sizing: border-box;
17
17
  border-radius: $border-radius;
@@ -25,7 +25,7 @@ $transition-duration: 0.2s;
25
25
  .header,
26
26
  .body,
27
27
  .footer {
28
- padding: var(--spacing-xs) var(--spacing-sm);
28
+ padding: var(--xs) var(--sm);
29
29
  }
30
30
  }
31
31
 
@@ -35,7 +35,7 @@ $transition-duration: 0.2s;
35
35
  .header,
36
36
  .body,
37
37
  .footer {
38
- padding: var(--spacing-xs) var(--spacing-standard);
38
+ padding: var(--xs) var(--standard);
39
39
  }
40
40
  }
41
41
 
@@ -45,7 +45,7 @@ $transition-duration: 0.2s;
45
45
  .header,
46
46
  .body,
47
47
  .footer {
48
- padding: var(--spacing-xs) var(--spacing-xl);
48
+ padding: var(--xs) var(--xl);
49
49
  }
50
50
  }
51
51
 
@@ -61,13 +61,13 @@ $transition-duration: 0.2s;
61
61
  }
62
62
 
63
63
  &:hover:not([data-disabled]):not([data-selected]) {
64
- border-color: var(--color-border-action-secondary);
64
+ border-color: var(--border-action-secondary);
65
65
  }
66
66
 
67
67
  &:focus-visible:not([data-selected]),
68
68
  &[data-focus-visible]:not([data-selected]) {
69
- border-color: var(--color-border-action-secondary);
70
- box-shadow: inset 0 0 0 1px var(--color-border-action-secondary);
69
+ border-color: var(--border-action-secondary);
70
+ box-shadow: inset 0 0 0 1px var(--border-action-secondary);
71
71
  outline: none;
72
72
  }
73
73
 
@@ -78,21 +78,21 @@ $transition-duration: 0.2s;
78
78
 
79
79
  &[data-disabled] {
80
80
  cursor: not-allowed;
81
- border-color: var(--color-border-disabled);
81
+ border-color: var(--border-disabled);
82
82
  }
83
83
  }
84
84
 
85
85
  .root[data-selected] {
86
- border-color: var(--color-border-action-primary);
86
+ border-color: var(--border-action-primary);
87
87
 
88
88
  &:hover:not([data-disabled]),
89
89
  &:focus-visible,
90
90
  &[data-focus-visible] {
91
- box-shadow: inset 0 0 0 1px var(--color-border-action-primary);
91
+ box-shadow: inset 0 0 0 1px var(--border-action-primary);
92
92
  }
93
93
 
94
94
  &[data-highlight] {
95
- background: var(--color-background-selected-weak);
95
+ background: var(--background-secondary-hover);
96
96
  }
97
97
  }
98
98
 
package/src/components/ds-card/ds-card.types.ts CHANGED
@@ -37,7 +37,9 @@ export interface DsCardRootProps extends HTMLAttributes<HTMLDivElement> {
37
37
  highlightSelected?: boolean;
38
38
 
39
39
  /**
40
- * Disabled state - prevents interaction
40
+ * Whether the card is disabled. Prevents selection and click interactions and
41
+ * visually dims the card.
42
+ * @default false
41
43
  */
42
44
  disabled?: boolean;
43
45
  }