@i-cell/ids-styles 0.0.2 → 0.0.3

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 (43) hide show
  1. package/dist/accordion/accordion.css +69 -68
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +69 -73
  4. package/dist/action-item/action-item.css +67 -55
  5. package/dist/action-item/action-item.min.css +1 -1
  6. package/dist/action-item/action-item.plugin.js +67 -73
  7. package/dist/action-panel/action-panel.css +29 -28
  8. package/dist/action-panel/action-panel.min.css +1 -1
  9. package/dist/action-panel/action-panel.plugin.js +35 -39
  10. package/dist/avatar/avatar.css +77 -154
  11. package/dist/avatar/avatar.min.css +1 -1
  12. package/dist/avatar/avatar.plugin.js +77 -148
  13. package/dist/button/button.css +134 -178
  14. package/dist/button/button.min.css +1 -1
  15. package/dist/button/button.plugin.js +141 -179
  16. package/dist/card/card.css +137 -184
  17. package/dist/card/card.min.css +1 -1
  18. package/dist/card/card.plugin.js +137 -189
  19. package/dist/checkbox/checkbox.css +554 -0
  20. package/dist/checkbox/checkbox.min.css +1 -0
  21. package/dist/checkbox/checkbox.plugin.js +539 -0
  22. package/dist/components.css +1566 -1326
  23. package/dist/components.min.css +1 -1
  24. package/dist/components.plugin.js +1511 -1374
  25. package/dist/dialog/dialog.css +99 -95
  26. package/dist/dialog/dialog.min.css +1 -1
  27. package/dist/dialog/dialog.plugin.js +103 -102
  28. package/dist/divider/divider.css +21 -23
  29. package/dist/divider/divider.min.css +1 -1
  30. package/dist/divider/divider.plugin.js +22 -30
  31. package/dist/form-elements/message/message.css +165 -0
  32. package/dist/form-elements/message/message.min.css +1 -0
  33. package/dist/form-elements/message/message.plugin.js +116 -0
  34. package/dist/form-elements/required-marker/required-marker.css +6 -0
  35. package/dist/form-elements/required-marker/required-marker.min.css +1 -0
  36. package/dist/form-elements/required-marker/required-marker.plugin.js +15 -0
  37. package/dist/icon-button/icon-button.css +101 -124
  38. package/dist/icon-button/icon-button.min.css +1 -1
  39. package/dist/icon-button/icon-button.plugin.js +108 -125
  40. package/dist/tag/tag.css +104 -417
  41. package/dist/tag/tag.min.css +1 -1
  42. package/dist/tag/tag.plugin.js +111 -418
  43. package/package.json +6 -4
package/dist/card/card.css CHANGED
@@ -1,6 +1,7 @@
1
1
  .ids-card {
2
2
  display: flex;
3
3
  border-style: solid;
4
+ box-sizing: border-box;
4
5
  }
5
6
  .ids-card.ids-card-clickable {
6
7
  pointer-events: auto;
@@ -77,180 +78,180 @@
77
78
  box-shadow: var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-sm) var(--ids-smc-reference-container-effects-shadow-blur-md) var(--ids-smc-reference-container-effects-shadow-spread-xxl) var(--ids-smc-reference-container-effects-shadow-color-dark-light), var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xs) var(--ids-smc-reference-container-effects-shadow-blur-sm) var(--ids-smc-reference-container-effects-shadow-spread-xl) var(--ids-smc-reference-container-effects-shadow-color-dark-light);
78
79
  }
79
80
  .ids-card.ids-card-compact.ids-card-horizontal {
80
- padding: var(--ids-comp-size-card-container-horizontal-size-padding-y-compact) var(--ids-comp-size-card-container-horizontal-size-padding-x-compact);
81
- gap: var(--ids-comp-size-card-container-horizontal-size-gap-compact);
82
- border-radius: var(--ids-comp-size-card-container-horizontal-size-border-radius-compact);
81
+ padding: var(--ids-comp-card-container-horizontal-size-padding-y-compact) var(--ids-comp-card-container-horizontal-size-padding-x-compact);
82
+ gap: var(--ids-comp-card-container-horizontal-size-gap-compact);
83
+ border-radius: var(--ids-comp-card-container-horizontal-size-border-radius-compact);
83
84
  }
84
85
  .ids-card.ids-card-compact.ids-card-horizontal.ids-card-outlined {
85
- border-width: var(--ids-comp-size-card-container-horizontal-size-border-width-compact);
86
+ border-width: var(--ids-comp-card-container-horizontal-size-border-width-compact);
86
87
  }
87
88
  .ids-card.ids-card-compact.ids-card-vertical {
88
- padding: var(--ids-comp-size-card-container-vertical-size-padding-y-compact) var(--ids-comp-size-card-container-vertical-size-padding-x-compact);
89
- gap: var(--ids-comp-size-card-container-vertical-size-gap-compact);
90
- border-radius: var(--ids-comp-size-card-container-vertical-size-border-radius-compact);
89
+ padding: var(--ids-comp-card-container-vertical-size-padding-y-compact) var(--ids-comp-card-container-vertical-size-padding-x-compact);
90
+ gap: var(--ids-comp-card-container-vertical-size-gap-compact);
91
+ border-radius: var(--ids-comp-card-container-vertical-size-border-radius-compact);
91
92
  }
92
93
  .ids-card.ids-card-compact.ids-card-vertical.ids-card-outlined {
93
- border-width: var(--ids-comp-size-card-container-vertical-size-border-width-compact);
94
+ border-width: var(--ids-comp-card-container-vertical-size-border-width-compact);
94
95
  }
95
96
  .ids-card.ids-card-compact.ids-card-clickable:focus {
96
- outline-width: var(--ids-comp-size-card-focused-outline-outline-compact);
97
+ outline-width: var(--ids-comp-card-focused-outline-outline-compact);
97
98
  }
98
99
  .ids-card.ids-card-compact .ids-card-header-headline {
99
- gap: var(--ids-comp-size-card-header-headline-gap-compact);
100
- padding: var(--ids-comp-size-card-header-headline-padding-y-compact) var(--ids-comp-size-card-header-headline-padding-x-compact);
100
+ gap: var(--ids-comp-card-header-headline-gap-compact);
101
+ padding: var(--ids-comp-card-header-headline-padding-y-compact) var(--ids-comp-card-header-headline-padding-x-compact);
101
102
  }
102
103
  .ids-card.ids-card-compact.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child {
103
- padding-top: var(--ids-comp-size-card-slot-size-padding-top-compact);
104
+ padding-top: var(--ids-comp-card-slot-size-padding-top-compact);
104
105
  }
105
106
  .ids-card.ids-card-compact.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child {
106
- padding-bottom: var(--ids-comp-size-card-slot-size-padding-bottom-compact);
107
+ padding-bottom: var(--ids-comp-card-slot-size-padding-bottom-compact);
107
108
  }
108
109
  .ids-card.ids-card-compact.ids-card-vertical .ids-card-section.ids-card-section-padded {
109
- padding-left: var(--ids-comp-size-card-slot-size-padding-x-compact);
110
- padding-right: var(--ids-comp-size-card-slot-size-padding-x-compact);
110
+ padding-left: var(--ids-comp-card-slot-size-padding-x-compact);
111
+ padding-right: var(--ids-comp-card-slot-size-padding-x-compact);
111
112
  }
112
113
  .ids-card.ids-card-compact.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child {
113
- padding-left: var(--ids-comp-size-card-slot-size-padding-top-compact);
114
+ padding-left: var(--ids-comp-card-slot-size-padding-top-compact);
114
115
  }
115
116
  .ids-card.ids-card-compact.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child {
116
- padding-right: var(--ids-comp-size-card-slot-size-padding-bottom-compact);
117
+ padding-right: var(--ids-comp-card-slot-size-padding-bottom-compact);
117
118
  }
118
119
  .ids-card.ids-card-compact.ids-card-horizontal .ids-card-section.ids-card-section-padded {
119
- padding-top: var(--ids-comp-size-card-slot-size-padding-x-compact);
120
- padding-bottom: var(--ids-comp-size-card-slot-size-padding-x-compact);
120
+ padding-top: var(--ids-comp-card-slot-size-padding-x-compact);
121
+ padding-bottom: var(--ids-comp-card-slot-size-padding-x-compact);
121
122
  }
122
123
  .ids-card.ids-card-comfortable.ids-card-horizontal {
123
- padding: var(--ids-comp-size-card-container-horizontal-size-padding-y-comfortable) var(--ids-comp-size-card-container-horizontal-size-padding-x-comfortable);
124
- gap: var(--ids-comp-size-card-container-horizontal-size-gap-comfortable);
125
- border-radius: var(--ids-comp-size-card-container-horizontal-size-border-radius-comfortable);
124
+ padding: var(--ids-comp-card-container-horizontal-size-padding-y-comfortable) var(--ids-comp-card-container-horizontal-size-padding-x-comfortable);
125
+ gap: var(--ids-comp-card-container-horizontal-size-gap-comfortable);
126
+ border-radius: var(--ids-comp-card-container-horizontal-size-border-radius-comfortable);
126
127
  }
127
128
  .ids-card.ids-card-comfortable.ids-card-horizontal.ids-card-outlined {
128
- border-width: var(--ids-comp-size-card-container-horizontal-size-border-width-comfortable);
129
+ border-width: var(--ids-comp-card-container-horizontal-size-border-width-comfortable);
129
130
  }
130
131
  .ids-card.ids-card-comfortable.ids-card-vertical {
131
- padding: var(--ids-comp-size-card-container-vertical-size-padding-y-comfortable) var(--ids-comp-size-card-container-vertical-size-padding-x-comfortable);
132
- gap: var(--ids-comp-size-card-container-vertical-size-gap-comfortable);
133
- border-radius: var(--ids-comp-size-card-container-vertical-size-border-radius-comfortable);
132
+ padding: var(--ids-comp-card-container-vertical-size-padding-y-comfortable) var(--ids-comp-card-container-vertical-size-padding-x-comfortable);
133
+ gap: var(--ids-comp-card-container-vertical-size-gap-comfortable);
134
+ border-radius: var(--ids-comp-card-container-vertical-size-border-radius-comfortable);
134
135
  }
135
136
  .ids-card.ids-card-comfortable.ids-card-vertical.ids-card-outlined {
136
- border-width: var(--ids-comp-size-card-container-vertical-size-border-width-comfortable);
137
+ border-width: var(--ids-comp-card-container-vertical-size-border-width-comfortable);
137
138
  }
138
139
  .ids-card.ids-card-comfortable.ids-card-clickable:focus {
139
- outline-width: var(--ids-comp-size-card-focused-outline-outline-comfortable);
140
+ outline-width: var(--ids-comp-card-focused-outline-outline-comfortable);
140
141
  }
141
142
  .ids-card.ids-card-comfortable .ids-card-header-headline {
142
- gap: var(--ids-comp-size-card-header-headline-gap-comfortable);
143
- padding: var(--ids-comp-size-card-header-headline-padding-y-comfortable) var(--ids-comp-size-card-header-headline-padding-x-comfortable);
143
+ gap: var(--ids-comp-card-header-headline-gap-comfortable);
144
+ padding: var(--ids-comp-card-header-headline-padding-y-comfortable) var(--ids-comp-card-header-headline-padding-x-comfortable);
144
145
  }
145
146
  .ids-card.ids-card-comfortable.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child {
146
- padding-top: var(--ids-comp-size-card-slot-size-padding-top-comfortable);
147
+ padding-top: var(--ids-comp-card-slot-size-padding-top-comfortable);
147
148
  }
148
149
  .ids-card.ids-card-comfortable.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child {
149
- padding-bottom: var(--ids-comp-size-card-slot-size-padding-bottom-comfortable);
150
+ padding-bottom: var(--ids-comp-card-slot-size-padding-bottom-comfortable);
150
151
  }
151
152
  .ids-card.ids-card-comfortable.ids-card-vertical .ids-card-section.ids-card-section-padded {
152
- padding-left: var(--ids-comp-size-card-slot-size-padding-x-comfortable);
153
- padding-right: var(--ids-comp-size-card-slot-size-padding-x-comfortable);
153
+ padding-left: var(--ids-comp-card-slot-size-padding-x-comfortable);
154
+ padding-right: var(--ids-comp-card-slot-size-padding-x-comfortable);
154
155
  }
155
156
  .ids-card.ids-card-comfortable.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child {
156
- padding-left: var(--ids-comp-size-card-slot-size-padding-top-comfortable);
157
+ padding-left: var(--ids-comp-card-slot-size-padding-top-comfortable);
157
158
  }
158
159
  .ids-card.ids-card-comfortable.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child {
159
- padding-right: var(--ids-comp-size-card-slot-size-padding-bottom-comfortable);
160
+ padding-right: var(--ids-comp-card-slot-size-padding-bottom-comfortable);
160
161
  }
161
162
  .ids-card.ids-card-comfortable.ids-card-horizontal .ids-card-section.ids-card-section-padded {
162
- padding-top: var(--ids-comp-size-card-slot-size-padding-x-comfortable);
163
- padding-bottom: var(--ids-comp-size-card-slot-size-padding-x-comfortable);
163
+ padding-top: var(--ids-comp-card-slot-size-padding-x-comfortable);
164
+ padding-bottom: var(--ids-comp-card-slot-size-padding-x-comfortable);
164
165
  }
165
166
  .ids-card.ids-card-spacious.ids-card-horizontal {
166
- padding: var(--ids-comp-size-card-container-horizontal-size-padding-y-spacious) var(--ids-comp-size-card-container-horizontal-size-padding-x-spacious);
167
- gap: var(--ids-comp-size-card-container-horizontal-size-gap-spacious);
168
- border-radius: var(--ids-comp-size-card-container-horizontal-size-border-radius-spacious);
167
+ padding: var(--ids-comp-card-container-horizontal-size-padding-y-spacious) var(--ids-comp-card-container-horizontal-size-padding-x-spacious);
168
+ gap: var(--ids-comp-card-container-horizontal-size-gap-spacious);
169
+ border-radius: var(--ids-comp-card-container-horizontal-size-border-radius-spacious);
169
170
  }
170
171
  .ids-card.ids-card-spacious.ids-card-horizontal.ids-card-outlined {
171
- border-width: var(--ids-comp-size-card-container-horizontal-size-border-width-spacious);
172
+ border-width: var(--ids-comp-card-container-horizontal-size-border-width-spacious);
172
173
  }
173
174
  .ids-card.ids-card-spacious.ids-card-vertical {
174
- padding: var(--ids-comp-size-card-container-vertical-size-padding-y-spacious) var(--ids-comp-size-card-container-vertical-size-padding-x-spacious);
175
- gap: var(--ids-comp-size-card-container-vertical-size-gap-spacious);
176
- border-radius: var(--ids-comp-size-card-container-vertical-size-border-radius-spacious);
175
+ padding: var(--ids-comp-card-container-vertical-size-padding-y-spacious) var(--ids-comp-card-container-vertical-size-padding-x-spacious);
176
+ gap: var(--ids-comp-card-container-vertical-size-gap-spacious);
177
+ border-radius: var(--ids-comp-card-container-vertical-size-border-radius-spacious);
177
178
  }
178
179
  .ids-card.ids-card-spacious.ids-card-vertical.ids-card-outlined {
179
- border-width: var(--ids-comp-size-card-container-vertical-size-border-width-spacious);
180
+ border-width: var(--ids-comp-card-container-vertical-size-border-width-spacious);
180
181
  }
181
182
  .ids-card.ids-card-spacious.ids-card-clickable:focus {
182
- outline-width: var(--ids-comp-size-card-focused-outline-outline-spacious);
183
+ outline-width: var(--ids-comp-card-focused-outline-outline-spacious);
183
184
  }
184
185
  .ids-card.ids-card-spacious .ids-card-header-headline {
185
- gap: var(--ids-comp-size-card-header-headline-gap-spacious);
186
- padding: var(--ids-comp-size-card-header-headline-padding-y-spacious) var(--ids-comp-size-card-header-headline-padding-x-spacious);
186
+ gap: var(--ids-comp-card-header-headline-gap-spacious);
187
+ padding: var(--ids-comp-card-header-headline-padding-y-spacious) var(--ids-comp-card-header-headline-padding-x-spacious);
187
188
  }
188
189
  .ids-card.ids-card-spacious.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child {
189
- padding-top: var(--ids-comp-size-card-slot-size-padding-top-spacious);
190
+ padding-top: var(--ids-comp-card-slot-size-padding-top-spacious);
190
191
  }
191
192
  .ids-card.ids-card-spacious.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child {
192
- padding-bottom: var(--ids-comp-size-card-slot-size-padding-bottom-spacious);
193
+ padding-bottom: var(--ids-comp-card-slot-size-padding-bottom-spacious);
193
194
  }
194
195
  .ids-card.ids-card-spacious.ids-card-vertical .ids-card-section.ids-card-section-padded {
195
- padding-left: var(--ids-comp-size-card-slot-size-padding-x-spacious);
196
- padding-right: var(--ids-comp-size-card-slot-size-padding-x-spacious);
196
+ padding-left: var(--ids-comp-card-slot-size-padding-x-spacious);
197
+ padding-right: var(--ids-comp-card-slot-size-padding-x-spacious);
197
198
  }
198
199
  .ids-card.ids-card-spacious.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child {
199
- padding-left: var(--ids-comp-size-card-slot-size-padding-top-spacious);
200
+ padding-left: var(--ids-comp-card-slot-size-padding-top-spacious);
200
201
  }
201
202
  .ids-card.ids-card-spacious.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child {
202
- padding-right: var(--ids-comp-size-card-slot-size-padding-bottom-spacious);
203
+ padding-right: var(--ids-comp-card-slot-size-padding-bottom-spacious);
203
204
  }
204
205
  .ids-card.ids-card-spacious.ids-card-horizontal .ids-card-section.ids-card-section-padded {
205
- padding-top: var(--ids-comp-size-card-slot-size-padding-x-spacious);
206
- padding-bottom: var(--ids-comp-size-card-slot-size-padding-x-spacious);
206
+ padding-top: var(--ids-comp-card-slot-size-padding-x-spacious);
207
+ padding-bottom: var(--ids-comp-card-slot-size-padding-x-spacious);
207
208
  }
208
209
  .ids-card.ids-card-dense.ids-card-horizontal {
209
- padding: var(--ids-comp-size-card-container-horizontal-size-padding-y-dense) var(--ids-comp-size-card-container-horizontal-size-padding-x-dense);
210
- gap: var(--ids-comp-size-card-container-horizontal-size-gap-dense);
211
- border-radius: var(--ids-comp-size-card-container-horizontal-size-border-radius-dense);
210
+ padding: var(--ids-comp-card-container-horizontal-size-padding-y-dense) var(--ids-comp-card-container-horizontal-size-padding-x-dense);
211
+ gap: var(--ids-comp-card-container-horizontal-size-gap-dense);
212
+ border-radius: var(--ids-comp-card-container-horizontal-size-border-radius-dense);
212
213
  }
213
214
  .ids-card.ids-card-dense.ids-card-horizontal.ids-card-outlined {
214
- border-width: var(--ids-comp-size-card-container-horizontal-size-border-width-dense);
215
+ border-width: var(--ids-comp-card-container-horizontal-size-border-width-dense);
215
216
  }
216
217
  .ids-card.ids-card-dense.ids-card-vertical {
217
- padding: var(--ids-comp-size-card-container-vertical-size-padding-y-dense) var(--ids-comp-size-card-container-vertical-size-padding-x-dense);
218
- gap: var(--ids-comp-size-card-container-vertical-size-gap-dense);
219
- border-radius: var(--ids-comp-size-card-container-vertical-size-border-radius-dense);
218
+ padding: var(--ids-comp-card-container-vertical-size-padding-y-dense) var(--ids-comp-card-container-vertical-size-padding-x-dense);
219
+ gap: var(--ids-comp-card-container-vertical-size-gap-dense);
220
+ border-radius: var(--ids-comp-card-container-vertical-size-border-radius-dense);
220
221
  }
221
222
  .ids-card.ids-card-dense.ids-card-vertical.ids-card-outlined {
222
- border-width: var(--ids-comp-size-card-container-vertical-size-border-width-dense);
223
+ border-width: var(--ids-comp-card-container-vertical-size-border-width-dense);
223
224
  }
224
225
  .ids-card.ids-card-dense.ids-card-clickable:focus {
225
- outline-width: var(--ids-comp-size-card-focused-outline-outline-dense);
226
+ outline-width: var(--ids-comp-card-focused-outline-outline-dense);
226
227
  }
227
228
  .ids-card.ids-card-dense .ids-card-header-headline {
228
- gap: var(--ids-comp-size-card-header-headline-gap-dense);
229
- padding: var(--ids-comp-size-card-header-headline-padding-y-dense) var(--ids-comp-size-card-header-headline-padding-x-dense);
229
+ gap: var(--ids-comp-card-header-headline-gap-dense);
230
+ padding: var(--ids-comp-card-header-headline-padding-y-dense) var(--ids-comp-card-header-headline-padding-x-dense);
230
231
  }
231
232
  .ids-card.ids-card-dense.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child {
232
- padding-top: var(--ids-comp-size-card-slot-size-padding-top-dense);
233
+ padding-top: var(--ids-comp-card-slot-size-padding-top-dense);
233
234
  }
234
235
  .ids-card.ids-card-dense.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child {
235
- padding-bottom: var(--ids-comp-size-card-slot-size-padding-bottom-dense);
236
+ padding-bottom: var(--ids-comp-card-slot-size-padding-bottom-dense);
236
237
  }
237
238
  .ids-card.ids-card-dense.ids-card-vertical .ids-card-section.ids-card-section-padded {
238
- padding-left: var(--ids-comp-size-card-slot-size-padding-x-dense);
239
- padding-right: var(--ids-comp-size-card-slot-size-padding-x-dense);
239
+ padding-left: var(--ids-comp-card-slot-size-padding-x-dense);
240
+ padding-right: var(--ids-comp-card-slot-size-padding-x-dense);
240
241
  }
241
242
  .ids-card.ids-card-dense.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child {
242
- padding-left: var(--ids-comp-size-card-slot-size-padding-top-dense);
243
+ padding-left: var(--ids-comp-card-slot-size-padding-top-dense);
243
244
  }
244
245
  .ids-card.ids-card-dense.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child {
245
- padding-right: var(--ids-comp-size-card-slot-size-padding-bottom-dense);
246
+ padding-right: var(--ids-comp-card-slot-size-padding-bottom-dense);
246
247
  }
247
248
  .ids-card.ids-card-dense.ids-card-horizontal .ids-card-section.ids-card-section-padded {
248
- padding-top: var(--ids-comp-size-card-slot-size-padding-x-dense);
249
- padding-bottom: var(--ids-comp-size-card-slot-size-padding-x-dense);
249
+ padding-top: var(--ids-comp-card-slot-size-padding-x-dense);
250
+ padding-bottom: var(--ids-comp-card-slot-size-padding-x-dense);
250
251
  }
251
252
  .ids-card.ids-card-filled.ids-card-primary {
252
- background-color: var(--ids-comp-card-filled-color-bg-primary-enabled);
253
- border-color: var(--ids-comp-card-filled-color-border-primary-enabled);
253
+ background-color: var(--ids-comp-card-filled-color-bg-primary-default);
254
+ border-color: var(--ids-comp-card-filled-color-border-primary-default);
254
255
  }
255
256
  .ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:hover {
256
257
  background-color: var(--ids-comp-card-filled-color-bg-primary-hovered);
@@ -269,8 +270,8 @@
269
270
  border-color: var(--ids-comp-card-filled-color-border-primary-disabled);
270
271
  }
271
272
  .ids-card.ids-card-filled.ids-card-secondary {
272
- background-color: var(--ids-comp-card-filled-color-bg-secondary-enabled);
273
- border-color: var(--ids-comp-card-filled-color-border-secondary-enabled);
273
+ background-color: var(--ids-comp-card-filled-color-bg-secondary-default);
274
+ border-color: var(--ids-comp-card-filled-color-border-secondary-default);
274
275
  }
275
276
  .ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:hover {
276
277
  background-color: var(--ids-comp-card-filled-color-bg-secondary-hovered);
@@ -289,8 +290,8 @@
289
290
  border-color: var(--ids-comp-card-filled-color-border-secondary-disabled);
290
291
  }
291
292
  .ids-card.ids-card-filled.ids-card-brand {
292
- background-color: var(--ids-comp-card-filled-color-bg-brand-enabled);
293
- border-color: var(--ids-comp-card-filled-color-border-brand-enabled);
293
+ background-color: var(--ids-comp-card-filled-color-bg-brand-default);
294
+ border-color: var(--ids-comp-card-filled-color-border-brand-default);
294
295
  }
295
296
  .ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:hover {
296
297
  background-color: var(--ids-comp-card-filled-color-bg-brand-hovered);
@@ -309,8 +310,8 @@
309
310
  border-color: var(--ids-comp-card-filled-color-border-brand-disabled);
310
311
  }
311
312
  .ids-card.ids-card-filled.ids-card-error {
312
- background-color: var(--ids-comp-card-filled-color-bg-error-enabled);
313
- border-color: var(--ids-comp-card-filled-color-border-error-enabled);
313
+ background-color: var(--ids-comp-card-filled-color-bg-error-default);
314
+ border-color: var(--ids-comp-card-filled-color-border-error-default);
314
315
  }
315
316
  .ids-card.ids-card-filled.ids-card-error.ids-card-clickable:hover {
316
317
  background-color: var(--ids-comp-card-filled-color-bg-error-hovered);
@@ -324,13 +325,9 @@
324
325
  background-color: var(--ids-comp-card-filled-color-bg-error-pressed);
325
326
  border-color: var(--ids-comp-card-filled-color-border-error-pressed);
326
327
  }
327
- .ids-card.ids-card-filled.ids-card-error.ids-card-clickable.ids-card-disabled {
328
- background-color: var(--ids-comp-card-filled-color-bg-error-disabled);
329
- border-color: var(--ids-comp-card-filled-color-border-error-disabled);
330
- }
331
328
  .ids-card.ids-card-filled.ids-card-success {
332
- background-color: var(--ids-comp-card-filled-color-bg-success-enabled);
333
- border-color: var(--ids-comp-card-filled-color-border-success-enabled);
329
+ background-color: var(--ids-comp-card-filled-color-bg-success-default);
330
+ border-color: var(--ids-comp-card-filled-color-border-success-default);
334
331
  }
335
332
  .ids-card.ids-card-filled.ids-card-success.ids-card-clickable:hover {
336
333
  background-color: var(--ids-comp-card-filled-color-bg-success-hovered);
@@ -344,13 +341,9 @@
344
341
  background-color: var(--ids-comp-card-filled-color-bg-success-pressed);
345
342
  border-color: var(--ids-comp-card-filled-color-border-success-pressed);
346
343
  }
347
- .ids-card.ids-card-filled.ids-card-success.ids-card-clickable.ids-card-disabled {
348
- background-color: var(--ids-comp-card-filled-color-bg-success-disabled);
349
- border-color: var(--ids-comp-card-filled-color-border-success-disabled);
350
- }
351
344
  .ids-card.ids-card-filled.ids-card-warning {
352
- background-color: var(--ids-comp-card-filled-color-bg-warning-enabled);
353
- border-color: var(--ids-comp-card-filled-color-border-warning-enabled);
345
+ background-color: var(--ids-comp-card-filled-color-bg-warning-default);
346
+ border-color: var(--ids-comp-card-filled-color-border-warning-default);
354
347
  }
355
348
  .ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:hover {
356
349
  background-color: var(--ids-comp-card-filled-color-bg-warning-hovered);
@@ -364,13 +357,9 @@
364
357
  background-color: var(--ids-comp-card-filled-color-bg-warning-pressed);
365
358
  border-color: var(--ids-comp-card-filled-color-border-warning-pressed);
366
359
  }
367
- .ids-card.ids-card-filled.ids-card-warning.ids-card-clickable.ids-card-disabled {
368
- background-color: var(--ids-comp-card-filled-color-bg-warning-disabled);
369
- border-color: var(--ids-comp-card-filled-color-border-warning-disabled);
370
- }
371
360
  .ids-card.ids-card-filled.ids-card-info {
372
- background-color: var(--ids-comp-card-filled-color-bg-info-enabled);
373
- border-color: var(--ids-comp-card-filled-color-border-info-enabled);
361
+ background-color: var(--ids-comp-card-filled-color-bg-info-default);
362
+ border-color: var(--ids-comp-card-filled-color-border-info-default);
374
363
  }
375
364
  .ids-card.ids-card-filled.ids-card-info.ids-card-clickable:hover {
376
365
  background-color: var(--ids-comp-card-filled-color-bg-info-hovered);
@@ -384,13 +373,9 @@
384
373
  background-color: var(--ids-comp-card-filled-color-bg-info-pressed);
385
374
  border-color: var(--ids-comp-card-filled-color-border-info-pressed);
386
375
  }
387
- .ids-card.ids-card-filled.ids-card-info.ids-card-clickable.ids-card-disabled {
388
- background-color: var(--ids-comp-card-filled-color-bg-info-disabled);
389
- border-color: var(--ids-comp-card-filled-color-border-info-disabled);
390
- }
391
376
  .ids-card.ids-card-filled.ids-card-light {
392
- background-color: var(--ids-comp-card-filled-color-bg-light-enabled);
393
- border-color: var(--ids-comp-card-filled-color-border-light-enabled);
377
+ background-color: var(--ids-comp-card-filled-color-bg-light-default);
378
+ border-color: var(--ids-comp-card-filled-color-border-light-default);
394
379
  }
395
380
  .ids-card.ids-card-filled.ids-card-light.ids-card-clickable:hover {
396
381
  background-color: var(--ids-comp-card-filled-color-bg-light-hovered);
@@ -409,8 +394,8 @@
409
394
  border-color: var(--ids-comp-card-filled-color-border-light-disabled);
410
395
  }
411
396
  .ids-card.ids-card-filled.ids-card-dark {
412
- background-color: var(--ids-comp-card-filled-color-bg-dark-enabled);
413
- border-color: var(--ids-comp-card-filled-color-border-dark-enabled);
397
+ background-color: var(--ids-comp-card-filled-color-bg-dark-default);
398
+ border-color: var(--ids-comp-card-filled-color-border-dark-default);
414
399
  }
415
400
  .ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:hover {
416
401
  background-color: var(--ids-comp-card-filled-color-bg-dark-hovered);
@@ -429,8 +414,8 @@
429
414
  border-color: var(--ids-comp-card-filled-color-border-dark-disabled);
430
415
  }
431
416
  .ids-card.ids-card-filled.ids-card-surface {
432
- background-color: var(--ids-comp-card-filled-color-bg-surface-enabled);
433
- border-color: var(--ids-comp-card-filled-color-border-surface-enabled);
417
+ background-color: var(--ids-comp-card-filled-color-bg-surface-default);
418
+ border-color: var(--ids-comp-card-filled-color-border-surface-default);
434
419
  }
435
420
  .ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:hover {
436
421
  background-color: var(--ids-comp-card-filled-color-bg-surface-hovered);
@@ -449,8 +434,8 @@
449
434
  border-color: var(--ids-comp-card-filled-color-border-surface-disabled);
450
435
  }
451
436
  .ids-card.ids-card-outlined.ids-card-primary {
452
- background-color: var(--ids-comp-card-outlined-color-bg-primary-enabled);
453
- border-color: var(--ids-comp-card-outlined-color-border-primary-enabled);
437
+ background-color: var(--ids-comp-card-outlined-color-bg-primary-default);
438
+ border-color: var(--ids-comp-card-outlined-color-border-primary-default);
454
439
  }
455
440
  .ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:hover {
456
441
  background-color: var(--ids-comp-card-outlined-color-bg-primary-hovered);
@@ -469,8 +454,8 @@
469
454
  border-color: var(--ids-comp-card-outlined-color-border-primary-disabled);
470
455
  }
471
456
  .ids-card.ids-card-outlined.ids-card-secondary {
472
- background-color: var(--ids-comp-card-outlined-color-bg-secondary-enabled);
473
- border-color: var(--ids-comp-card-outlined-color-border-secondary-enabled);
457
+ background-color: var(--ids-comp-card-outlined-color-bg-secondary-default);
458
+ border-color: var(--ids-comp-card-outlined-color-border-secondary-default);
474
459
  }
475
460
  .ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:hover {
476
461
  background-color: var(--ids-comp-card-outlined-color-bg-secondary-hovered);
@@ -489,8 +474,8 @@
489
474
  border-color: var(--ids-comp-card-outlined-color-border-secondary-disabled);
490
475
  }
491
476
  .ids-card.ids-card-outlined.ids-card-brand {
492
- background-color: var(--ids-comp-card-outlined-color-bg-brand-enabled);
493
- border-color: var(--ids-comp-card-outlined-color-border-brand-enabled);
477
+ background-color: var(--ids-comp-card-outlined-color-bg-brand-default);
478
+ border-color: var(--ids-comp-card-outlined-color-border-brand-default);
494
479
  }
495
480
  .ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:hover {
496
481
  background-color: var(--ids-comp-card-outlined-color-bg-brand-hovered);
@@ -509,8 +494,8 @@
509
494
  border-color: var(--ids-comp-card-outlined-color-border-brand-disabled);
510
495
  }
511
496
  .ids-card.ids-card-outlined.ids-card-error {
512
- background-color: var(--ids-comp-card-outlined-color-bg-error-enabled);
513
- border-color: var(--ids-comp-card-outlined-color-border-error-enabled);
497
+ background-color: var(--ids-comp-card-outlined-color-bg-error-default);
498
+ border-color: var(--ids-comp-card-outlined-color-border-error-default);
514
499
  }
515
500
  .ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:hover {
516
501
  background-color: var(--ids-comp-card-outlined-color-bg-error-hovered);
@@ -524,13 +509,9 @@
524
509
  background-color: var(--ids-comp-card-outlined-color-bg-error-pressed);
525
510
  border-color: var(--ids-comp-card-outlined-color-border-error-pressed);
526
511
  }
527
- .ids-card.ids-card-outlined.ids-card-error.ids-card-clickable.ids-card-disabled {
528
- background-color: var(--ids-comp-card-outlined-color-bg-error-disabled);
529
- border-color: var(--ids-comp-card-outlined-color-border-error-disabled);
530
- }
531
512
  .ids-card.ids-card-outlined.ids-card-success {
532
- background-color: var(--ids-comp-card-outlined-color-bg-success-enabled);
533
- border-color: var(--ids-comp-card-outlined-color-border-success-enabled);
513
+ background-color: var(--ids-comp-card-outlined-color-bg-success-default);
514
+ border-color: var(--ids-comp-card-outlined-color-border-success-default);
534
515
  }
535
516
  .ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:hover {
536
517
  background-color: var(--ids-comp-card-outlined-color-bg-success-hovered);
@@ -544,13 +525,9 @@
544
525
  background-color: var(--ids-comp-card-outlined-color-bg-success-pressed);
545
526
  border-color: var(--ids-comp-card-outlined-color-border-success-pressed);
546
527
  }
547
- .ids-card.ids-card-outlined.ids-card-success.ids-card-clickable.ids-card-disabled {
548
- background-color: var(--ids-comp-card-outlined-color-bg-success-disabled);
549
- border-color: var(--ids-comp-card-outlined-color-border-success-disabled);
550
- }
551
528
  .ids-card.ids-card-outlined.ids-card-warning {
552
- background-color: var(--ids-comp-card-outlined-color-bg-warning-enabled);
553
- border-color: var(--ids-comp-card-outlined-color-border-warning-enabled);
529
+ background-color: var(--ids-comp-card-outlined-color-bg-warning-default);
530
+ border-color: var(--ids-comp-card-outlined-color-border-warning-default);
554
531
  }
555
532
  .ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:hover {
556
533
  background-color: var(--ids-comp-card-outlined-color-bg-warning-hovered);
@@ -564,13 +541,9 @@
564
541
  background-color: var(--ids-comp-card-outlined-color-bg-warning-pressed);
565
542
  border-color: var(--ids-comp-card-outlined-color-border-warning-pressed);
566
543
  }
567
- .ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable.ids-card-disabled {
568
- background-color: var(--ids-comp-card-outlined-color-bg-warning-disabled);
569
- border-color: var(--ids-comp-card-outlined-color-border-warning-disabled);
570
- }
571
544
  .ids-card.ids-card-outlined.ids-card-info {
572
- background-color: var(--ids-comp-card-outlined-color-bg-info-enabled);
573
- border-color: var(--ids-comp-card-outlined-color-border-info-enabled);
545
+ background-color: var(--ids-comp-card-outlined-color-bg-info-default);
546
+ border-color: var(--ids-comp-card-outlined-color-border-info-default);
574
547
  }
575
548
  .ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:hover {
576
549
  background-color: var(--ids-comp-card-outlined-color-bg-info-hovered);
@@ -584,13 +557,9 @@
584
557
  background-color: var(--ids-comp-card-outlined-color-bg-info-pressed);
585
558
  border-color: var(--ids-comp-card-outlined-color-border-info-pressed);
586
559
  }
587
- .ids-card.ids-card-outlined.ids-card-info.ids-card-clickable.ids-card-disabled {
588
- background-color: var(--ids-comp-card-outlined-color-bg-info-disabled);
589
- border-color: var(--ids-comp-card-outlined-color-border-info-disabled);
590
- }
591
560
  .ids-card.ids-card-outlined.ids-card-light {
592
- background-color: var(--ids-comp-card-outlined-color-bg-light-enabled);
593
- border-color: var(--ids-comp-card-outlined-color-border-light-enabled);
561
+ background-color: var(--ids-comp-card-outlined-color-bg-light-default);
562
+ border-color: var(--ids-comp-card-outlined-color-border-light-default);
594
563
  }
595
564
  .ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:hover {
596
565
  background-color: var(--ids-comp-card-outlined-color-bg-light-hovered);
@@ -609,8 +578,8 @@
609
578
  border-color: var(--ids-comp-card-outlined-color-border-light-disabled);
610
579
  }
611
580
  .ids-card.ids-card-outlined.ids-card-dark {
612
- background-color: var(--ids-comp-card-outlined-color-bg-dark-enabled);
613
- border-color: var(--ids-comp-card-outlined-color-border-dark-enabled);
581
+ background-color: var(--ids-comp-card-outlined-color-bg-dark-default);
582
+ border-color: var(--ids-comp-card-outlined-color-border-dark-default);
614
583
  }
615
584
  .ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:hover {
616
585
  background-color: var(--ids-comp-card-outlined-color-bg-dark-hovered);
@@ -629,8 +598,8 @@
629
598
  border-color: var(--ids-comp-card-outlined-color-border-dark-disabled);
630
599
  }
631
600
  .ids-card.ids-card-outlined.ids-card-surface {
632
- background-color: var(--ids-comp-card-outlined-color-bg-surface-enabled);
633
- border-color: var(--ids-comp-card-outlined-color-border-surface-enabled);
601
+ background-color: var(--ids-comp-card-outlined-color-bg-surface-default);
602
+ border-color: var(--ids-comp-card-outlined-color-border-surface-default);
634
603
  }
635
604
  .ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:hover {
636
605
  background-color: var(--ids-comp-card-outlined-color-bg-surface-hovered);
@@ -649,8 +618,8 @@
649
618
  border-color: var(--ids-comp-card-outlined-color-border-surface-disabled);
650
619
  }
651
620
  .ids-card.ids-card-elevated.ids-card-primary {
652
- background-color: var(--ids-comp-card-elevated-color-bg-primary-enabled);
653
- border-color: var(--ids-comp-card-elevated-color-border-primary-enabled);
621
+ background-color: var(--ids-comp-card-elevated-color-bg-primary-default);
622
+ border-color: var(--ids-comp-card-elevated-color-border-primary-default);
654
623
  }
655
624
  .ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:hover {
656
625
  background-color: var(--ids-comp-card-elevated-color-bg-primary-hovered);
@@ -669,8 +638,8 @@
669
638
  border-color: var(--ids-comp-card-elevated-color-border-primary-disabled);
670
639
  }
671
640
  .ids-card.ids-card-elevated.ids-card-secondary {
672
- background-color: var(--ids-comp-card-elevated-color-bg-secondary-enabled);
673
- border-color: var(--ids-comp-card-elevated-color-border-secondary-enabled);
641
+ background-color: var(--ids-comp-card-elevated-color-bg-secondary-default);
642
+ border-color: var(--ids-comp-card-elevated-color-border-secondary-default);
674
643
  }
675
644
  .ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:hover {
676
645
  background-color: var(--ids-comp-card-elevated-color-bg-secondary-hovered);
@@ -689,8 +658,8 @@
689
658
  border-color: var(--ids-comp-card-elevated-color-border-secondary-disabled);
690
659
  }
691
660
  .ids-card.ids-card-elevated.ids-card-brand {
692
- background-color: var(--ids-comp-card-elevated-color-bg-brand-enabled);
693
- border-color: var(--ids-comp-card-elevated-color-border-brand-enabled);
661
+ background-color: var(--ids-comp-card-elevated-color-bg-brand-default);
662
+ border-color: var(--ids-comp-card-elevated-color-border-brand-default);
694
663
  }
695
664
  .ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:hover {
696
665
  background-color: var(--ids-comp-card-elevated-color-bg-brand-hovered);
@@ -709,8 +678,8 @@
709
678
  border-color: var(--ids-comp-card-elevated-color-border-brand-disabled);
710
679
  }
711
680
  .ids-card.ids-card-elevated.ids-card-error {
712
- background-color: var(--ids-comp-card-elevated-color-bg-error-enabled);
713
- border-color: var(--ids-comp-card-elevated-color-border-error-enabled);
681
+ background-color: var(--ids-comp-card-elevated-color-bg-error-default);
682
+ border-color: var(--ids-comp-card-elevated-color-border-error-default);
714
683
  }
715
684
  .ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:hover {
716
685
  background-color: var(--ids-comp-card-elevated-color-bg-error-hovered);
@@ -724,13 +693,9 @@
724
693
  background-color: var(--ids-comp-card-elevated-color-bg-error-pressed);
725
694
  border-color: var(--ids-comp-card-elevated-color-border-error-pressed);
726
695
  }
727
- .ids-card.ids-card-elevated.ids-card-error.ids-card-clickable.ids-card-disabled {
728
- background-color: var(--ids-comp-card-elevated-color-bg-error-disabled);
729
- border-color: var(--ids-comp-card-elevated-color-border-error-disabled);
730
- }
731
696
  .ids-card.ids-card-elevated.ids-card-success {
732
- background-color: var(--ids-comp-card-elevated-color-bg-success-enabled);
733
- border-color: var(--ids-comp-card-elevated-color-border-success-enabled);
697
+ background-color: var(--ids-comp-card-elevated-color-bg-success-default);
698
+ border-color: var(--ids-comp-card-elevated-color-border-success-default);
734
699
  }
735
700
  .ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:hover {
736
701
  background-color: var(--ids-comp-card-elevated-color-bg-success-hovered);
@@ -744,13 +709,9 @@
744
709
  background-color: var(--ids-comp-card-elevated-color-bg-success-pressed);
745
710
  border-color: var(--ids-comp-card-elevated-color-border-success-pressed);
746
711
  }
747
- .ids-card.ids-card-elevated.ids-card-success.ids-card-clickable.ids-card-disabled {
748
- background-color: var(--ids-comp-card-elevated-color-bg-success-disabled);
749
- border-color: var(--ids-comp-card-elevated-color-border-success-disabled);
750
- }
751
712
  .ids-card.ids-card-elevated.ids-card-warning {
752
- background-color: var(--ids-comp-card-elevated-color-bg-warning-enabled);
753
- border-color: var(--ids-comp-card-elevated-color-border-warning-enabled);
713
+ background-color: var(--ids-comp-card-elevated-color-bg-warning-default);
714
+ border-color: var(--ids-comp-card-elevated-color-border-warning-default);
754
715
  }
755
716
  .ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:hover {
756
717
  background-color: var(--ids-comp-card-elevated-color-bg-warning-hovered);
@@ -764,13 +725,9 @@
764
725
  background-color: var(--ids-comp-card-elevated-color-bg-warning-pressed);
765
726
  border-color: var(--ids-comp-card-elevated-color-border-warning-pressed);
766
727
  }
767
- .ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable.ids-card-disabled {
768
- background-color: var(--ids-comp-card-elevated-color-bg-warning-disabled);
769
- border-color: var(--ids-comp-card-elevated-color-border-warning-disabled);
770
- }
771
728
  .ids-card.ids-card-elevated.ids-card-info {
772
- background-color: var(--ids-comp-card-elevated-color-bg-info-enabled);
773
- border-color: var(--ids-comp-card-elevated-color-border-info-enabled);
729
+ background-color: var(--ids-comp-card-elevated-color-bg-info-default);
730
+ border-color: var(--ids-comp-card-elevated-color-border-info-default);
774
731
  }
775
732
  .ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:hover {
776
733
  background-color: var(--ids-comp-card-elevated-color-bg-info-hovered);
@@ -784,13 +741,9 @@
784
741
  background-color: var(--ids-comp-card-elevated-color-bg-info-pressed);
785
742
  border-color: var(--ids-comp-card-elevated-color-border-info-pressed);
786
743
  }
787
- .ids-card.ids-card-elevated.ids-card-info.ids-card-clickable.ids-card-disabled {
788
- background-color: var(--ids-comp-card-elevated-color-bg-info-disabled);
789
- border-color: var(--ids-comp-card-elevated-color-border-info-disabled);
790
- }
791
744
  .ids-card.ids-card-elevated.ids-card-light {
792
- background-color: var(--ids-comp-card-elevated-color-bg-light-enabled);
793
- border-color: var(--ids-comp-card-elevated-color-border-light-enabled);
745
+ background-color: var(--ids-comp-card-elevated-color-bg-light-default);
746
+ border-color: var(--ids-comp-card-elevated-color-border-light-default);
794
747
  }
795
748
  .ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:hover {
796
749
  background-color: var(--ids-comp-card-elevated-color-bg-light-hovered);
@@ -809,8 +762,8 @@
809
762
  border-color: var(--ids-comp-card-elevated-color-border-light-disabled);
810
763
  }
811
764
  .ids-card.ids-card-elevated.ids-card-dark {
812
- background-color: var(--ids-comp-card-elevated-color-bg-dark-enabled);
813
- border-color: var(--ids-comp-card-elevated-color-border-dark-enabled);
765
+ background-color: var(--ids-comp-card-elevated-color-bg-dark-default);
766
+ border-color: var(--ids-comp-card-elevated-color-border-dark-default);
814
767
  }
815
768
  .ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:hover {
816
769
  background-color: var(--ids-comp-card-elevated-color-bg-dark-hovered);
@@ -829,8 +782,8 @@
829
782
  border-color: var(--ids-comp-card-elevated-color-border-dark-disabled);
830
783
  }
831
784
  .ids-card.ids-card-elevated.ids-card-surface {
832
- background-color: var(--ids-comp-card-elevated-color-bg-surface-enabled);
833
- border-color: var(--ids-comp-card-elevated-color-border-surface-enabled);
785
+ background-color: var(--ids-comp-card-elevated-color-bg-surface-default);
786
+ border-color: var(--ids-comp-card-elevated-color-border-surface-default);
834
787
  }
835
788
  .ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:hover {
836
789
  background-color: var(--ids-comp-card-elevated-color-bg-surface-hovered);