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