@i-cell/ids-styles 0.0.1 → 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 +78 -62
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +189 -0
  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 +174 -0
  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 +90 -0
  10. package/dist/avatar/avatar.css +92 -173
  11. package/dist/avatar/avatar.min.css +1 -1
  12. package/dist/avatar/avatar.plugin.js +198 -0
  13. package/dist/button/button.css +241 -278
  14. package/dist/button/button.min.css +1 -1
  15. package/dist/button/button.plugin.js +762 -0
  16. package/dist/card/card.css +137 -184
  17. package/dist/card/card.min.css +1 -1
  18. package/dist/card/card.plugin.js +798 -0
  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 +1895 -1574
  23. package/dist/components.min.css +1 -1
  24. package/dist/components.plugin.js +4148 -0
  25. package/dist/dialog/dialog.css +163 -110
  26. package/dist/dialog/dialog.min.css +1 -1
  27. package/dist/dialog/dialog.plugin.js +225 -0
  28. package/dist/divider/divider.css +21 -23
  29. package/dist/divider/divider.min.css +1 -1
  30. package/dist/divider/divider.plugin.js +31 -0
  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 +173 -196
  38. package/dist/icon-button/icon-button.min.css +1 -1
  39. package/dist/icon-button/icon-button.plugin.js +657 -0
  40. package/dist/tag/tag.css +166 -465
  41. package/dist/tag/tag.min.css +1 -1
  42. package/dist/tag/tag.plugin.js +462 -0
  43. package/package.json +16 -4
package/dist/card/card.plugin.js ADDED
@@ -0,0 +1,798 @@
1
+ // Tailwind CSS plugin for the card component in the i-Cell Design System
2
+ module.exports = function CardPlugin() {
3
+ return function ({ addComponents }) {
4
+ const cssObj = {
5
+ '.ids-card': { display: 'flex', borderStyle: 'solid', boxSizing: 'border-box' },
6
+ '.ids-card.ids-card-clickable': { pointerEvents: 'auto', cursor: 'pointer' },
7
+ '.ids-card.ids-card-clickable:focus': {
8
+ outlineOffset: '2px',
9
+ outlineStyle: 'solid',
10
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
11
+ },
12
+ '.ids-card.ids-card-clickable:focus.ids-button-light': { outlineColor: 'var(--ids-comp-card-focused-outline-color-light-focused)' },
13
+ '.ids-card.ids-card-clickable.ids-card-disabled': { pointerEvents: 'none', cursor: 'not-allowed' },
14
+ '.ids-card.ids-card-vertical': { flexDirection: 'column' },
15
+ '.ids-card.ids-card-vertical .ids-card-section:first-child': {
16
+ paddingBottom: '0px',
17
+ borderTopLeftRadius: 'inherit',
18
+ borderTopRightRadius: 'inherit',
19
+ },
20
+ '.ids-card.ids-card-vertical .ids-card-section:last-child': {
21
+ paddingTop: '0px',
22
+ borderBottomLeftRadius: 'inherit',
23
+ borderBottomRightRadius: 'inherit',
24
+ },
25
+ '.ids-card.ids-card-vertical .ids-card-section.ids-card-section-stretched': {
26
+ paddingLeft: '0px',
27
+ paddingRight: '0px',
28
+ width: '100%',
29
+ },
30
+ '.ids-card.ids-card-vertical .ids-card-section .ids-card-header-headline': { display: 'flex', flexDirection: 'column' },
31
+ '.ids-card.ids-card-horizontal .ids-card-section:first-child': {
32
+ paddingRight: '0px',
33
+ borderTopLeftRadius: 'inherit',
34
+ borderBottomLeftRadius: 'inherit',
35
+ },
36
+ '.ids-card.ids-card-horizontal .ids-card-section:last-child': {
37
+ paddingLeft: '0px',
38
+ borderTopRightRadius: 'inherit',
39
+ borderBottomRightRadius: 'inherit',
40
+ },
41
+ '.ids-card.ids-card-horizontal .ids-card-section.ids-card-section-stretched': {
42
+ paddingTop: '0px',
43
+ paddingBottom: '0px',
44
+ height: '100%',
45
+ },
46
+ '.ids-card.ids-card-horizontal .ids-card-section.ids-card-header,.ids-card.ids-card-horizontal .ids-card-section.ids-card-footer': {
47
+ display: 'none',
48
+ },
49
+ '.ids-card .ids-card-title': {
50
+ color: 'var(--ids-smc-reference-container-color-fg-surface-darker-95)',
51
+ fontSize: '24px',
52
+ fontStyle: 'normal',
53
+ fontWeight: 600,
54
+ lineHeight: '32px',
55
+ },
56
+ '.ids-card .ids-card-subtitle': {
57
+ color: 'var(--ids-smc-reference-container-color-fg-surface-darker-70)',
58
+ fontSize: '16px',
59
+ fontStyle: 'normal',
60
+ fontWeight: 500,
61
+ lineHeight: '24px',
62
+ letterSpacing: '.15px',
63
+ },
64
+ '.ids-card.ids-card-elevated': {
65
+ boxShadow:
66
+ '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)',
67
+ },
68
+ '.ids-card.ids-card-compact.ids-card-horizontal': {
69
+ padding:
70
+ 'var(--ids-comp-card-container-horizontal-size-padding-y-compact) var(--ids-comp-card-container-horizontal-size-padding-x-compact)',
71
+ gap: 'var(--ids-comp-card-container-horizontal-size-gap-compact)',
72
+ borderRadius: 'var(--ids-comp-card-container-horizontal-size-border-radius-compact)',
73
+ },
74
+ '.ids-card.ids-card-compact.ids-card-horizontal.ids-card-outlined': {
75
+ borderWidth: 'var(--ids-comp-card-container-horizontal-size-border-width-compact)',
76
+ },
77
+ '.ids-card.ids-card-compact.ids-card-vertical': {
78
+ padding:
79
+ 'var(--ids-comp-card-container-vertical-size-padding-y-compact) var(--ids-comp-card-container-vertical-size-padding-x-compact)',
80
+ gap: 'var(--ids-comp-card-container-vertical-size-gap-compact)',
81
+ borderRadius: 'var(--ids-comp-card-container-vertical-size-border-radius-compact)',
82
+ },
83
+ '.ids-card.ids-card-compact.ids-card-vertical.ids-card-outlined': {
84
+ borderWidth: 'var(--ids-comp-card-container-vertical-size-border-width-compact)',
85
+ },
86
+ '.ids-card.ids-card-compact.ids-card-clickable:focus': { outlineWidth: 'var(--ids-comp-card-focused-outline-outline-compact)' },
87
+ '.ids-card.ids-card-compact .ids-card-header-headline': {
88
+ gap: 'var(--ids-comp-card-header-headline-gap-compact)',
89
+ padding: 'var(--ids-comp-card-header-headline-padding-y-compact) var(--ids-comp-card-header-headline-padding-x-compact)',
90
+ },
91
+ '.ids-card.ids-card-compact.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child': {
92
+ paddingTop: 'var(--ids-comp-card-slot-size-padding-top-compact)',
93
+ },
94
+ '.ids-card.ids-card-compact.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child': {
95
+ paddingBottom: 'var(--ids-comp-card-slot-size-padding-bottom-compact)',
96
+ },
97
+ '.ids-card.ids-card-compact.ids-card-vertical .ids-card-section.ids-card-section-padded': {
98
+ paddingLeft: 'var(--ids-comp-card-slot-size-padding-x-compact)',
99
+ paddingRight: 'var(--ids-comp-card-slot-size-padding-x-compact)',
100
+ },
101
+ '.ids-card.ids-card-compact.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child': {
102
+ paddingLeft: 'var(--ids-comp-card-slot-size-padding-top-compact)',
103
+ },
104
+ '.ids-card.ids-card-compact.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child': {
105
+ paddingRight: 'var(--ids-comp-card-slot-size-padding-bottom-compact)',
106
+ },
107
+ '.ids-card.ids-card-compact.ids-card-horizontal .ids-card-section.ids-card-section-padded': {
108
+ paddingTop: 'var(--ids-comp-card-slot-size-padding-x-compact)',
109
+ paddingBottom: 'var(--ids-comp-card-slot-size-padding-x-compact)',
110
+ },
111
+ '.ids-card.ids-card-comfortable.ids-card-horizontal': {
112
+ padding:
113
+ 'var(--ids-comp-card-container-horizontal-size-padding-y-comfortable) var(--ids-comp-card-container-horizontal-size-padding-x-comfortable)',
114
+ gap: 'var(--ids-comp-card-container-horizontal-size-gap-comfortable)',
115
+ borderRadius: 'var(--ids-comp-card-container-horizontal-size-border-radius-comfortable)',
116
+ },
117
+ '.ids-card.ids-card-comfortable.ids-card-horizontal.ids-card-outlined': {
118
+ borderWidth: 'var(--ids-comp-card-container-horizontal-size-border-width-comfortable)',
119
+ },
120
+ '.ids-card.ids-card-comfortable.ids-card-vertical': {
121
+ padding:
122
+ 'var(--ids-comp-card-container-vertical-size-padding-y-comfortable) var(--ids-comp-card-container-vertical-size-padding-x-comfortable)',
123
+ gap: 'var(--ids-comp-card-container-vertical-size-gap-comfortable)',
124
+ borderRadius: 'var(--ids-comp-card-container-vertical-size-border-radius-comfortable)',
125
+ },
126
+ '.ids-card.ids-card-comfortable.ids-card-vertical.ids-card-outlined': {
127
+ borderWidth: 'var(--ids-comp-card-container-vertical-size-border-width-comfortable)',
128
+ },
129
+ '.ids-card.ids-card-comfortable.ids-card-clickable:focus': {
130
+ outlineWidth: 'var(--ids-comp-card-focused-outline-outline-comfortable)',
131
+ },
132
+ '.ids-card.ids-card-comfortable .ids-card-header-headline': {
133
+ gap: 'var(--ids-comp-card-header-headline-gap-comfortable)',
134
+ padding: 'var(--ids-comp-card-header-headline-padding-y-comfortable) var(--ids-comp-card-header-headline-padding-x-comfortable)',
135
+ },
136
+ '.ids-card.ids-card-comfortable.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child': {
137
+ paddingTop: 'var(--ids-comp-card-slot-size-padding-top-comfortable)',
138
+ },
139
+ '.ids-card.ids-card-comfortable.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child': {
140
+ paddingBottom: 'var(--ids-comp-card-slot-size-padding-bottom-comfortable)',
141
+ },
142
+ '.ids-card.ids-card-comfortable.ids-card-vertical .ids-card-section.ids-card-section-padded': {
143
+ paddingLeft: 'var(--ids-comp-card-slot-size-padding-x-comfortable)',
144
+ paddingRight: 'var(--ids-comp-card-slot-size-padding-x-comfortable)',
145
+ },
146
+ '.ids-card.ids-card-comfortable.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child': {
147
+ paddingLeft: 'var(--ids-comp-card-slot-size-padding-top-comfortable)',
148
+ },
149
+ '.ids-card.ids-card-comfortable.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child': {
150
+ paddingRight: 'var(--ids-comp-card-slot-size-padding-bottom-comfortable)',
151
+ },
152
+ '.ids-card.ids-card-comfortable.ids-card-horizontal .ids-card-section.ids-card-section-padded': {
153
+ paddingTop: 'var(--ids-comp-card-slot-size-padding-x-comfortable)',
154
+ paddingBottom: 'var(--ids-comp-card-slot-size-padding-x-comfortable)',
155
+ },
156
+ '.ids-card.ids-card-spacious.ids-card-horizontal': {
157
+ padding:
158
+ 'var(--ids-comp-card-container-horizontal-size-padding-y-spacious) var(--ids-comp-card-container-horizontal-size-padding-x-spacious)',
159
+ gap: 'var(--ids-comp-card-container-horizontal-size-gap-spacious)',
160
+ borderRadius: 'var(--ids-comp-card-container-horizontal-size-border-radius-spacious)',
161
+ },
162
+ '.ids-card.ids-card-spacious.ids-card-horizontal.ids-card-outlined': {
163
+ borderWidth: 'var(--ids-comp-card-container-horizontal-size-border-width-spacious)',
164
+ },
165
+ '.ids-card.ids-card-spacious.ids-card-vertical': {
166
+ padding:
167
+ 'var(--ids-comp-card-container-vertical-size-padding-y-spacious) var(--ids-comp-card-container-vertical-size-padding-x-spacious)',
168
+ gap: 'var(--ids-comp-card-container-vertical-size-gap-spacious)',
169
+ borderRadius: 'var(--ids-comp-card-container-vertical-size-border-radius-spacious)',
170
+ },
171
+ '.ids-card.ids-card-spacious.ids-card-vertical.ids-card-outlined': {
172
+ borderWidth: 'var(--ids-comp-card-container-vertical-size-border-width-spacious)',
173
+ },
174
+ '.ids-card.ids-card-spacious.ids-card-clickable:focus': { outlineWidth: 'var(--ids-comp-card-focused-outline-outline-spacious)' },
175
+ '.ids-card.ids-card-spacious .ids-card-header-headline': {
176
+ gap: 'var(--ids-comp-card-header-headline-gap-spacious)',
177
+ padding: 'var(--ids-comp-card-header-headline-padding-y-spacious) var(--ids-comp-card-header-headline-padding-x-spacious)',
178
+ },
179
+ '.ids-card.ids-card-spacious.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child': {
180
+ paddingTop: 'var(--ids-comp-card-slot-size-padding-top-spacious)',
181
+ },
182
+ '.ids-card.ids-card-spacious.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child': {
183
+ paddingBottom: 'var(--ids-comp-card-slot-size-padding-bottom-spacious)',
184
+ },
185
+ '.ids-card.ids-card-spacious.ids-card-vertical .ids-card-section.ids-card-section-padded': {
186
+ paddingLeft: 'var(--ids-comp-card-slot-size-padding-x-spacious)',
187
+ paddingRight: 'var(--ids-comp-card-slot-size-padding-x-spacious)',
188
+ },
189
+ '.ids-card.ids-card-spacious.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child': {
190
+ paddingLeft: 'var(--ids-comp-card-slot-size-padding-top-spacious)',
191
+ },
192
+ '.ids-card.ids-card-spacious.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child': {
193
+ paddingRight: 'var(--ids-comp-card-slot-size-padding-bottom-spacious)',
194
+ },
195
+ '.ids-card.ids-card-spacious.ids-card-horizontal .ids-card-section.ids-card-section-padded': {
196
+ paddingTop: 'var(--ids-comp-card-slot-size-padding-x-spacious)',
197
+ paddingBottom: 'var(--ids-comp-card-slot-size-padding-x-spacious)',
198
+ },
199
+ '.ids-card.ids-card-dense.ids-card-horizontal': {
200
+ padding:
201
+ 'var(--ids-comp-card-container-horizontal-size-padding-y-dense) var(--ids-comp-card-container-horizontal-size-padding-x-dense)',
202
+ gap: 'var(--ids-comp-card-container-horizontal-size-gap-dense)',
203
+ borderRadius: 'var(--ids-comp-card-container-horizontal-size-border-radius-dense)',
204
+ },
205
+ '.ids-card.ids-card-dense.ids-card-horizontal.ids-card-outlined': {
206
+ borderWidth: 'var(--ids-comp-card-container-horizontal-size-border-width-dense)',
207
+ },
208
+ '.ids-card.ids-card-dense.ids-card-vertical': {
209
+ padding:
210
+ 'var(--ids-comp-card-container-vertical-size-padding-y-dense) var(--ids-comp-card-container-vertical-size-padding-x-dense)',
211
+ gap: 'var(--ids-comp-card-container-vertical-size-gap-dense)',
212
+ borderRadius: 'var(--ids-comp-card-container-vertical-size-border-radius-dense)',
213
+ },
214
+ '.ids-card.ids-card-dense.ids-card-vertical.ids-card-outlined': {
215
+ borderWidth: 'var(--ids-comp-card-container-vertical-size-border-width-dense)',
216
+ },
217
+ '.ids-card.ids-card-dense.ids-card-clickable:focus': { outlineWidth: 'var(--ids-comp-card-focused-outline-outline-dense)' },
218
+ '.ids-card.ids-card-dense .ids-card-header-headline': {
219
+ gap: 'var(--ids-comp-card-header-headline-gap-dense)',
220
+ padding: 'var(--ids-comp-card-header-headline-padding-y-dense) var(--ids-comp-card-header-headline-padding-x-dense)',
221
+ },
222
+ '.ids-card.ids-card-dense.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child': {
223
+ paddingTop: 'var(--ids-comp-card-slot-size-padding-top-dense)',
224
+ },
225
+ '.ids-card.ids-card-dense.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child': {
226
+ paddingBottom: 'var(--ids-comp-card-slot-size-padding-bottom-dense)',
227
+ },
228
+ '.ids-card.ids-card-dense.ids-card-vertical .ids-card-section.ids-card-section-padded': {
229
+ paddingLeft: 'var(--ids-comp-card-slot-size-padding-x-dense)',
230
+ paddingRight: 'var(--ids-comp-card-slot-size-padding-x-dense)',
231
+ },
232
+ '.ids-card.ids-card-dense.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child': {
233
+ paddingLeft: 'var(--ids-comp-card-slot-size-padding-top-dense)',
234
+ },
235
+ '.ids-card.ids-card-dense.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child': {
236
+ paddingRight: 'var(--ids-comp-card-slot-size-padding-bottom-dense)',
237
+ },
238
+ '.ids-card.ids-card-dense.ids-card-horizontal .ids-card-section.ids-card-section-padded': {
239
+ paddingTop: 'var(--ids-comp-card-slot-size-padding-x-dense)',
240
+ paddingBottom: 'var(--ids-comp-card-slot-size-padding-x-dense)',
241
+ },
242
+ '.ids-card.ids-card-filled.ids-card-primary': {
243
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-primary-default)',
244
+ borderColor: 'var(--ids-comp-card-filled-color-border-primary-default)',
245
+ },
246
+ '.ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:hover': {
247
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-primary-hovered)',
248
+ borderColor: 'var(--ids-comp-card-filled-color-border-primary-hovered)',
249
+ },
250
+ '.ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:focus': {
251
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-primary-focused)',
252
+ borderColor: 'var(--ids-comp-card-filled-color-border-primary-focused)',
253
+ },
254
+ '.ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:active': {
255
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-primary-pressed)',
256
+ borderColor: 'var(--ids-comp-card-filled-color-border-primary-pressed)',
257
+ },
258
+ '.ids-card.ids-card-filled.ids-card-primary.ids-card-clickable.ids-card-disabled': {
259
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-primary-disabled)',
260
+ borderColor: 'var(--ids-comp-card-filled-color-border-primary-disabled)',
261
+ },
262
+ '.ids-card.ids-card-filled.ids-card-secondary': {
263
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-secondary-default)',
264
+ borderColor: 'var(--ids-comp-card-filled-color-border-secondary-default)',
265
+ },
266
+ '.ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:hover': {
267
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-secondary-hovered)',
268
+ borderColor: 'var(--ids-comp-card-filled-color-border-secondary-hovered)',
269
+ },
270
+ '.ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:focus': {
271
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-secondary-focused)',
272
+ borderColor: 'var(--ids-comp-card-filled-color-border-secondary-focused)',
273
+ },
274
+ '.ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:active': {
275
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-secondary-pressed)',
276
+ borderColor: 'var(--ids-comp-card-filled-color-border-secondary-pressed)',
277
+ },
278
+ '.ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable.ids-card-disabled': {
279
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-secondary-disabled)',
280
+ borderColor: 'var(--ids-comp-card-filled-color-border-secondary-disabled)',
281
+ },
282
+ '.ids-card.ids-card-filled.ids-card-brand': {
283
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-brand-default)',
284
+ borderColor: 'var(--ids-comp-card-filled-color-border-brand-default)',
285
+ },
286
+ '.ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:hover': {
287
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-brand-hovered)',
288
+ borderColor: 'var(--ids-comp-card-filled-color-border-brand-hovered)',
289
+ },
290
+ '.ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:focus': {
291
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-brand-focused)',
292
+ borderColor: 'var(--ids-comp-card-filled-color-border-brand-focused)',
293
+ },
294
+ '.ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:active': {
295
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-brand-pressed)',
296
+ borderColor: 'var(--ids-comp-card-filled-color-border-brand-pressed)',
297
+ },
298
+ '.ids-card.ids-card-filled.ids-card-brand.ids-card-clickable.ids-card-disabled': {
299
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-brand-disabled)',
300
+ borderColor: 'var(--ids-comp-card-filled-color-border-brand-disabled)',
301
+ },
302
+ '.ids-card.ids-card-filled.ids-card-error': {
303
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-error-default)',
304
+ borderColor: 'var(--ids-comp-card-filled-color-border-error-default)',
305
+ },
306
+ '.ids-card.ids-card-filled.ids-card-error.ids-card-clickable:hover': {
307
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-error-hovered)',
308
+ borderColor: 'var(--ids-comp-card-filled-color-border-error-hovered)',
309
+ },
310
+ '.ids-card.ids-card-filled.ids-card-error.ids-card-clickable:focus': {
311
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-error-focused)',
312
+ borderColor: 'var(--ids-comp-card-filled-color-border-error-focused)',
313
+ },
314
+ '.ids-card.ids-card-filled.ids-card-error.ids-card-clickable:active': {
315
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-error-pressed)',
316
+ borderColor: 'var(--ids-comp-card-filled-color-border-error-pressed)',
317
+ },
318
+ '.ids-card.ids-card-filled.ids-card-success': {
319
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-success-default)',
320
+ borderColor: 'var(--ids-comp-card-filled-color-border-success-default)',
321
+ },
322
+ '.ids-card.ids-card-filled.ids-card-success.ids-card-clickable:hover': {
323
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-success-hovered)',
324
+ borderColor: 'var(--ids-comp-card-filled-color-border-success-hovered)',
325
+ },
326
+ '.ids-card.ids-card-filled.ids-card-success.ids-card-clickable:focus': {
327
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-success-focused)',
328
+ borderColor: 'var(--ids-comp-card-filled-color-border-success-focused)',
329
+ },
330
+ '.ids-card.ids-card-filled.ids-card-success.ids-card-clickable:active': {
331
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-success-pressed)',
332
+ borderColor: 'var(--ids-comp-card-filled-color-border-success-pressed)',
333
+ },
334
+ '.ids-card.ids-card-filled.ids-card-warning': {
335
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-warning-default)',
336
+ borderColor: 'var(--ids-comp-card-filled-color-border-warning-default)',
337
+ },
338
+ '.ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:hover': {
339
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-warning-hovered)',
340
+ borderColor: 'var(--ids-comp-card-filled-color-border-warning-hovered)',
341
+ },
342
+ '.ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:focus': {
343
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-warning-focused)',
344
+ borderColor: 'var(--ids-comp-card-filled-color-border-warning-focused)',
345
+ },
346
+ '.ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:active': {
347
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-warning-pressed)',
348
+ borderColor: 'var(--ids-comp-card-filled-color-border-warning-pressed)',
349
+ },
350
+ '.ids-card.ids-card-filled.ids-card-info': {
351
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-info-default)',
352
+ borderColor: 'var(--ids-comp-card-filled-color-border-info-default)',
353
+ },
354
+ '.ids-card.ids-card-filled.ids-card-info.ids-card-clickable:hover': {
355
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-info-hovered)',
356
+ borderColor: 'var(--ids-comp-card-filled-color-border-info-hovered)',
357
+ },
358
+ '.ids-card.ids-card-filled.ids-card-info.ids-card-clickable:focus': {
359
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-info-focused)',
360
+ borderColor: 'var(--ids-comp-card-filled-color-border-info-focused)',
361
+ },
362
+ '.ids-card.ids-card-filled.ids-card-info.ids-card-clickable:active': {
363
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-info-pressed)',
364
+ borderColor: 'var(--ids-comp-card-filled-color-border-info-pressed)',
365
+ },
366
+ '.ids-card.ids-card-filled.ids-card-light': {
367
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-light-default)',
368
+ borderColor: 'var(--ids-comp-card-filled-color-border-light-default)',
369
+ },
370
+ '.ids-card.ids-card-filled.ids-card-light.ids-card-clickable:hover': {
371
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-light-hovered)',
372
+ borderColor: 'var(--ids-comp-card-filled-color-border-light-hovered)',
373
+ },
374
+ '.ids-card.ids-card-filled.ids-card-light.ids-card-clickable:focus': {
375
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-light-focused)',
376
+ borderColor: 'var(--ids-comp-card-filled-color-border-light-focused)',
377
+ },
378
+ '.ids-card.ids-card-filled.ids-card-light.ids-card-clickable:active': {
379
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-light-pressed)',
380
+ borderColor: 'var(--ids-comp-card-filled-color-border-light-pressed)',
381
+ },
382
+ '.ids-card.ids-card-filled.ids-card-light.ids-card-clickable.ids-card-disabled': {
383
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-light-disabled)',
384
+ borderColor: 'var(--ids-comp-card-filled-color-border-light-disabled)',
385
+ },
386
+ '.ids-card.ids-card-filled.ids-card-dark': {
387
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-dark-default)',
388
+ borderColor: 'var(--ids-comp-card-filled-color-border-dark-default)',
389
+ },
390
+ '.ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:hover': {
391
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-dark-hovered)',
392
+ borderColor: 'var(--ids-comp-card-filled-color-border-dark-hovered)',
393
+ },
394
+ '.ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:focus': {
395
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-dark-focused)',
396
+ borderColor: 'var(--ids-comp-card-filled-color-border-dark-focused)',
397
+ },
398
+ '.ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:active': {
399
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-dark-pressed)',
400
+ borderColor: 'var(--ids-comp-card-filled-color-border-dark-pressed)',
401
+ },
402
+ '.ids-card.ids-card-filled.ids-card-dark.ids-card-clickable.ids-card-disabled': {
403
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-dark-disabled)',
404
+ borderColor: 'var(--ids-comp-card-filled-color-border-dark-disabled)',
405
+ },
406
+ '.ids-card.ids-card-filled.ids-card-surface': {
407
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-surface-default)',
408
+ borderColor: 'var(--ids-comp-card-filled-color-border-surface-default)',
409
+ },
410
+ '.ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:hover': {
411
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-surface-hovered)',
412
+ borderColor: 'var(--ids-comp-card-filled-color-border-surface-hovered)',
413
+ },
414
+ '.ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:focus': {
415
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-surface-focused)',
416
+ borderColor: 'var(--ids-comp-card-filled-color-border-surface-focused)',
417
+ },
418
+ '.ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:active': {
419
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-surface-pressed)',
420
+ borderColor: 'var(--ids-comp-card-filled-color-border-surface-pressed)',
421
+ },
422
+ '.ids-card.ids-card-filled.ids-card-surface.ids-card-clickable.ids-card-disabled': {
423
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-surface-disabled)',
424
+ borderColor: 'var(--ids-comp-card-filled-color-border-surface-disabled)',
425
+ },
426
+ '.ids-card.ids-card-outlined.ids-card-primary': {
427
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-primary-default)',
428
+ borderColor: 'var(--ids-comp-card-outlined-color-border-primary-default)',
429
+ },
430
+ '.ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:hover': {
431
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-primary-hovered)',
432
+ borderColor: 'var(--ids-comp-card-outlined-color-border-primary-hovered)',
433
+ },
434
+ '.ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:focus': {
435
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-primary-focused)',
436
+ borderColor: 'var(--ids-comp-card-outlined-color-border-primary-focused)',
437
+ },
438
+ '.ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:active': {
439
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-primary-pressed)',
440
+ borderColor: 'var(--ids-comp-card-outlined-color-border-primary-pressed)',
441
+ },
442
+ '.ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable.ids-card-disabled': {
443
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-primary-disabled)',
444
+ borderColor: 'var(--ids-comp-card-outlined-color-border-primary-disabled)',
445
+ },
446
+ '.ids-card.ids-card-outlined.ids-card-secondary': {
447
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-secondary-default)',
448
+ borderColor: 'var(--ids-comp-card-outlined-color-border-secondary-default)',
449
+ },
450
+ '.ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:hover': {
451
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-secondary-hovered)',
452
+ borderColor: 'var(--ids-comp-card-outlined-color-border-secondary-hovered)',
453
+ },
454
+ '.ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:focus': {
455
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-secondary-focused)',
456
+ borderColor: 'var(--ids-comp-card-outlined-color-border-secondary-focused)',
457
+ },
458
+ '.ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:active': {
459
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-secondary-pressed)',
460
+ borderColor: 'var(--ids-comp-card-outlined-color-border-secondary-pressed)',
461
+ },
462
+ '.ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable.ids-card-disabled': {
463
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-secondary-disabled)',
464
+ borderColor: 'var(--ids-comp-card-outlined-color-border-secondary-disabled)',
465
+ },
466
+ '.ids-card.ids-card-outlined.ids-card-brand': {
467
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-brand-default)',
468
+ borderColor: 'var(--ids-comp-card-outlined-color-border-brand-default)',
469
+ },
470
+ '.ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:hover': {
471
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-brand-hovered)',
472
+ borderColor: 'var(--ids-comp-card-outlined-color-border-brand-hovered)',
473
+ },
474
+ '.ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:focus': {
475
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-brand-focused)',
476
+ borderColor: 'var(--ids-comp-card-outlined-color-border-brand-focused)',
477
+ },
478
+ '.ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:active': {
479
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-brand-pressed)',
480
+ borderColor: 'var(--ids-comp-card-outlined-color-border-brand-pressed)',
481
+ },
482
+ '.ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable.ids-card-disabled': {
483
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-brand-disabled)',
484
+ borderColor: 'var(--ids-comp-card-outlined-color-border-brand-disabled)',
485
+ },
486
+ '.ids-card.ids-card-outlined.ids-card-error': {
487
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-error-default)',
488
+ borderColor: 'var(--ids-comp-card-outlined-color-border-error-default)',
489
+ },
490
+ '.ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:hover': {
491
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-error-hovered)',
492
+ borderColor: 'var(--ids-comp-card-outlined-color-border-error-hovered)',
493
+ },
494
+ '.ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:focus': {
495
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-error-focused)',
496
+ borderColor: 'var(--ids-comp-card-outlined-color-border-error-focused)',
497
+ },
498
+ '.ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:active': {
499
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-error-pressed)',
500
+ borderColor: 'var(--ids-comp-card-outlined-color-border-error-pressed)',
501
+ },
502
+ '.ids-card.ids-card-outlined.ids-card-success': {
503
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-success-default)',
504
+ borderColor: 'var(--ids-comp-card-outlined-color-border-success-default)',
505
+ },
506
+ '.ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:hover': {
507
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-success-hovered)',
508
+ borderColor: 'var(--ids-comp-card-outlined-color-border-success-hovered)',
509
+ },
510
+ '.ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:focus': {
511
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-success-focused)',
512
+ borderColor: 'var(--ids-comp-card-outlined-color-border-success-focused)',
513
+ },
514
+ '.ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:active': {
515
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-success-pressed)',
516
+ borderColor: 'var(--ids-comp-card-outlined-color-border-success-pressed)',
517
+ },
518
+ '.ids-card.ids-card-outlined.ids-card-warning': {
519
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-warning-default)',
520
+ borderColor: 'var(--ids-comp-card-outlined-color-border-warning-default)',
521
+ },
522
+ '.ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:hover': {
523
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-warning-hovered)',
524
+ borderColor: 'var(--ids-comp-card-outlined-color-border-warning-hovered)',
525
+ },
526
+ '.ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:focus': {
527
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-warning-focused)',
528
+ borderColor: 'var(--ids-comp-card-outlined-color-border-warning-focused)',
529
+ },
530
+ '.ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:active': {
531
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-warning-pressed)',
532
+ borderColor: 'var(--ids-comp-card-outlined-color-border-warning-pressed)',
533
+ },
534
+ '.ids-card.ids-card-outlined.ids-card-info': {
535
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-info-default)',
536
+ borderColor: 'var(--ids-comp-card-outlined-color-border-info-default)',
537
+ },
538
+ '.ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:hover': {
539
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-info-hovered)',
540
+ borderColor: 'var(--ids-comp-card-outlined-color-border-info-hovered)',
541
+ },
542
+ '.ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:focus': {
543
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-info-focused)',
544
+ borderColor: 'var(--ids-comp-card-outlined-color-border-info-focused)',
545
+ },
546
+ '.ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:active': {
547
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-info-pressed)',
548
+ borderColor: 'var(--ids-comp-card-outlined-color-border-info-pressed)',
549
+ },
550
+ '.ids-card.ids-card-outlined.ids-card-light': {
551
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-light-default)',
552
+ borderColor: 'var(--ids-comp-card-outlined-color-border-light-default)',
553
+ },
554
+ '.ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:hover': {
555
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-light-hovered)',
556
+ borderColor: 'var(--ids-comp-card-outlined-color-border-light-hovered)',
557
+ },
558
+ '.ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:focus': {
559
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-light-focused)',
560
+ borderColor: 'var(--ids-comp-card-outlined-color-border-light-focused)',
561
+ },
562
+ '.ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:active': {
563
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-light-pressed)',
564
+ borderColor: 'var(--ids-comp-card-outlined-color-border-light-pressed)',
565
+ },
566
+ '.ids-card.ids-card-outlined.ids-card-light.ids-card-clickable.ids-card-disabled': {
567
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-light-disabled)',
568
+ borderColor: 'var(--ids-comp-card-outlined-color-border-light-disabled)',
569
+ },
570
+ '.ids-card.ids-card-outlined.ids-card-dark': {
571
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-dark-default)',
572
+ borderColor: 'var(--ids-comp-card-outlined-color-border-dark-default)',
573
+ },
574
+ '.ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:hover': {
575
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-dark-hovered)',
576
+ borderColor: 'var(--ids-comp-card-outlined-color-border-dark-hovered)',
577
+ },
578
+ '.ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:focus': {
579
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-dark-focused)',
580
+ borderColor: 'var(--ids-comp-card-outlined-color-border-dark-focused)',
581
+ },
582
+ '.ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:active': {
583
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-dark-pressed)',
584
+ borderColor: 'var(--ids-comp-card-outlined-color-border-dark-pressed)',
585
+ },
586
+ '.ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable.ids-card-disabled': {
587
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-dark-disabled)',
588
+ borderColor: 'var(--ids-comp-card-outlined-color-border-dark-disabled)',
589
+ },
590
+ '.ids-card.ids-card-outlined.ids-card-surface': {
591
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-surface-default)',
592
+ borderColor: 'var(--ids-comp-card-outlined-color-border-surface-default)',
593
+ },
594
+ '.ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:hover': {
595
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-surface-hovered)',
596
+ borderColor: 'var(--ids-comp-card-outlined-color-border-surface-hovered)',
597
+ },
598
+ '.ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:focus': {
599
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-surface-focused)',
600
+ borderColor: 'var(--ids-comp-card-outlined-color-border-surface-focused)',
601
+ },
602
+ '.ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:active': {
603
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-surface-pressed)',
604
+ borderColor: 'var(--ids-comp-card-outlined-color-border-surface-pressed)',
605
+ },
606
+ '.ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable.ids-card-disabled': {
607
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-surface-disabled)',
608
+ borderColor: 'var(--ids-comp-card-outlined-color-border-surface-disabled)',
609
+ },
610
+ '.ids-card.ids-card-elevated.ids-card-primary': {
611
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-primary-default)',
612
+ borderColor: 'var(--ids-comp-card-elevated-color-border-primary-default)',
613
+ },
614
+ '.ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:hover': {
615
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-primary-hovered)',
616
+ borderColor: 'var(--ids-comp-card-elevated-color-border-primary-hovered)',
617
+ },
618
+ '.ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:focus': {
619
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-primary-focused)',
620
+ borderColor: 'var(--ids-comp-card-elevated-color-border-primary-focused)',
621
+ },
622
+ '.ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:active': {
623
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-primary-pressed)',
624
+ borderColor: 'var(--ids-comp-card-elevated-color-border-primary-pressed)',
625
+ },
626
+ '.ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable.ids-card-disabled': {
627
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-primary-disabled)',
628
+ borderColor: 'var(--ids-comp-card-elevated-color-border-primary-disabled)',
629
+ },
630
+ '.ids-card.ids-card-elevated.ids-card-secondary': {
631
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-secondary-default)',
632
+ borderColor: 'var(--ids-comp-card-elevated-color-border-secondary-default)',
633
+ },
634
+ '.ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:hover': {
635
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-secondary-hovered)',
636
+ borderColor: 'var(--ids-comp-card-elevated-color-border-secondary-hovered)',
637
+ },
638
+ '.ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:focus': {
639
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-secondary-focused)',
640
+ borderColor: 'var(--ids-comp-card-elevated-color-border-secondary-focused)',
641
+ },
642
+ '.ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:active': {
643
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-secondary-pressed)',
644
+ borderColor: 'var(--ids-comp-card-elevated-color-border-secondary-pressed)',
645
+ },
646
+ '.ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable.ids-card-disabled': {
647
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-secondary-disabled)',
648
+ borderColor: 'var(--ids-comp-card-elevated-color-border-secondary-disabled)',
649
+ },
650
+ '.ids-card.ids-card-elevated.ids-card-brand': {
651
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-brand-default)',
652
+ borderColor: 'var(--ids-comp-card-elevated-color-border-brand-default)',
653
+ },
654
+ '.ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:hover': {
655
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-brand-hovered)',
656
+ borderColor: 'var(--ids-comp-card-elevated-color-border-brand-hovered)',
657
+ },
658
+ '.ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:focus': {
659
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-brand-focused)',
660
+ borderColor: 'var(--ids-comp-card-elevated-color-border-brand-focused)',
661
+ },
662
+ '.ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:active': {
663
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-brand-pressed)',
664
+ borderColor: 'var(--ids-comp-card-elevated-color-border-brand-pressed)',
665
+ },
666
+ '.ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable.ids-card-disabled': {
667
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-brand-disabled)',
668
+ borderColor: 'var(--ids-comp-card-elevated-color-border-brand-disabled)',
669
+ },
670
+ '.ids-card.ids-card-elevated.ids-card-error': {
671
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-error-default)',
672
+ borderColor: 'var(--ids-comp-card-elevated-color-border-error-default)',
673
+ },
674
+ '.ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:hover': {
675
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-error-hovered)',
676
+ borderColor: 'var(--ids-comp-card-elevated-color-border-error-hovered)',
677
+ },
678
+ '.ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:focus': {
679
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-error-focused)',
680
+ borderColor: 'var(--ids-comp-card-elevated-color-border-error-focused)',
681
+ },
682
+ '.ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:active': {
683
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-error-pressed)',
684
+ borderColor: 'var(--ids-comp-card-elevated-color-border-error-pressed)',
685
+ },
686
+ '.ids-card.ids-card-elevated.ids-card-success': {
687
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-success-default)',
688
+ borderColor: 'var(--ids-comp-card-elevated-color-border-success-default)',
689
+ },
690
+ '.ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:hover': {
691
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-success-hovered)',
692
+ borderColor: 'var(--ids-comp-card-elevated-color-border-success-hovered)',
693
+ },
694
+ '.ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:focus': {
695
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-success-focused)',
696
+ borderColor: 'var(--ids-comp-card-elevated-color-border-success-focused)',
697
+ },
698
+ '.ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:active': {
699
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-success-pressed)',
700
+ borderColor: 'var(--ids-comp-card-elevated-color-border-success-pressed)',
701
+ },
702
+ '.ids-card.ids-card-elevated.ids-card-warning': {
703
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-warning-default)',
704
+ borderColor: 'var(--ids-comp-card-elevated-color-border-warning-default)',
705
+ },
706
+ '.ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:hover': {
707
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-warning-hovered)',
708
+ borderColor: 'var(--ids-comp-card-elevated-color-border-warning-hovered)',
709
+ },
710
+ '.ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:focus': {
711
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-warning-focused)',
712
+ borderColor: 'var(--ids-comp-card-elevated-color-border-warning-focused)',
713
+ },
714
+ '.ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:active': {
715
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-warning-pressed)',
716
+ borderColor: 'var(--ids-comp-card-elevated-color-border-warning-pressed)',
717
+ },
718
+ '.ids-card.ids-card-elevated.ids-card-info': {
719
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-info-default)',
720
+ borderColor: 'var(--ids-comp-card-elevated-color-border-info-default)',
721
+ },
722
+ '.ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:hover': {
723
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-info-hovered)',
724
+ borderColor: 'var(--ids-comp-card-elevated-color-border-info-hovered)',
725
+ },
726
+ '.ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:focus': {
727
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-info-focused)',
728
+ borderColor: 'var(--ids-comp-card-elevated-color-border-info-focused)',
729
+ },
730
+ '.ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:active': {
731
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-info-pressed)',
732
+ borderColor: 'var(--ids-comp-card-elevated-color-border-info-pressed)',
733
+ },
734
+ '.ids-card.ids-card-elevated.ids-card-light': {
735
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-light-default)',
736
+ borderColor: 'var(--ids-comp-card-elevated-color-border-light-default)',
737
+ },
738
+ '.ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:hover': {
739
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-light-hovered)',
740
+ borderColor: 'var(--ids-comp-card-elevated-color-border-light-hovered)',
741
+ },
742
+ '.ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:focus': {
743
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-light-focused)',
744
+ borderColor: 'var(--ids-comp-card-elevated-color-border-light-focused)',
745
+ },
746
+ '.ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:active': {
747
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-light-pressed)',
748
+ borderColor: 'var(--ids-comp-card-elevated-color-border-light-pressed)',
749
+ },
750
+ '.ids-card.ids-card-elevated.ids-card-light.ids-card-clickable.ids-card-disabled': {
751
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-light-disabled)',
752
+ borderColor: 'var(--ids-comp-card-elevated-color-border-light-disabled)',
753
+ },
754
+ '.ids-card.ids-card-elevated.ids-card-dark': {
755
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-dark-default)',
756
+ borderColor: 'var(--ids-comp-card-elevated-color-border-dark-default)',
757
+ },
758
+ '.ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:hover': {
759
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-dark-hovered)',
760
+ borderColor: 'var(--ids-comp-card-elevated-color-border-dark-hovered)',
761
+ },
762
+ '.ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:focus': {
763
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-dark-focused)',
764
+ borderColor: 'var(--ids-comp-card-elevated-color-border-dark-focused)',
765
+ },
766
+ '.ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:active': {
767
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-dark-pressed)',
768
+ borderColor: 'var(--ids-comp-card-elevated-color-border-dark-pressed)',
769
+ },
770
+ '.ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable.ids-card-disabled': {
771
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-dark-disabled)',
772
+ borderColor: 'var(--ids-comp-card-elevated-color-border-dark-disabled)',
773
+ },
774
+ '.ids-card.ids-card-elevated.ids-card-surface': {
775
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-surface-default)',
776
+ borderColor: 'var(--ids-comp-card-elevated-color-border-surface-default)',
777
+ },
778
+ '.ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:hover': {
779
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-surface-hovered)',
780
+ borderColor: 'var(--ids-comp-card-elevated-color-border-surface-hovered)',
781
+ },
782
+ '.ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:focus': {
783
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-surface-focused)',
784
+ borderColor: 'var(--ids-comp-card-elevated-color-border-surface-focused)',
785
+ },
786
+ '.ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:active': {
787
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-surface-pressed)',
788
+ borderColor: 'var(--ids-comp-card-elevated-color-border-surface-pressed)',
789
+ },
790
+ '.ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable.ids-card-disabled': {
791
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-surface-disabled)',
792
+ borderColor: 'var(--ids-comp-card-elevated-color-border-surface-disabled)',
793
+ },
794
+ };
795
+
796
+ addComponents(cssObj);
797
+ };
798
+ };