@i-cell/ids-styles 0.0.17 → 0.0.18

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