@i-cell/ids-styles 0.0.19 → 0.0.21

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 (13) hide show
  1. package/dist/chip/chip.css +315 -306
  2. package/dist/chip/chip.min.css +1 -1
  3. package/dist/chip/chip.plugin.js +297 -299
  4. package/dist/components.css +1267 -546
  5. package/dist/components.min.css +1 -1
  6. package/dist/components.plugin.js +1014 -544
  7. package/dist/notification/notification.css +598 -0
  8. package/dist/notification/notification.min.css +1 -0
  9. package/dist/notification/notification.plugin.js +382 -0
  10. package/dist/tag/tag.css +353 -240
  11. package/dist/tag/tag.min.css +1 -1
  12. package/dist/tag/tag.plugin.js +344 -245
  13. package/package.json +2 -2
package/dist/tag/tag.plugin.js CHANGED
@@ -2,15 +2,7 @@
2
2
  module.exports = function TagPlugin() {
3
3
  return function ({ addComponents }) {
4
4
  const cssObj = {
5
- '.ids-tag': {
6
- flexShrink: 0,
7
- width: 'fit-content',
8
- display: 'inline-flex',
9
- alignItems: 'center',
10
- justifyContent: 'center',
11
- borderStyle: 'solid',
12
- boxSizing: 'border-box',
13
- },
5
+ '.ids-tag': { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', borderStyle: 'solid', boxSizing: 'border-box' },
14
6
  '.ids-tag:focus,.ids-tag:focus-visible': { outlineOffset: '2px', outlineStyle: 'solid' },
15
7
  '.ids-tag:active': { outline: 'none' },
16
8
  '.ids-tag .ids-icon': { color: 'inherit' },
@@ -19,7 +11,7 @@ module.exports = function TagPlugin() {
19
11
  height: 'var(--ids-comp-tag-size-height-compact)',
20
12
  padding: 'var(--ids-comp-tag-size-padding-y-compact) var(--ids-comp-tag-size-padding-x-compact)',
21
13
  borderRadius: 'var(--ids-comp-tag-size-border-radius-compact)',
22
- border: 'var(--ids-comp-tag-size-border-width-compact)',
14
+ borderWidth: 'var(--ids-comp-tag-size-border-width-compact)',
23
15
  },
24
16
  '.ids-tag.ids-tag-compact:focus,.ids-tag.ids-tag-compact:focus-visible': {
25
17
  outlineWidth: 'var(--ids-comp-tag-focused-outline-size-outline-compact)',
@@ -43,7 +35,7 @@ module.exports = function TagPlugin() {
43
35
  height: 'var(--ids-comp-tag-size-height-comfortable)',
44
36
  padding: 'var(--ids-comp-tag-size-padding-y-comfortable) var(--ids-comp-tag-size-padding-x-comfortable)',
45
37
  borderRadius: 'var(--ids-comp-tag-size-border-radius-comfortable)',
46
- border: 'var(--ids-comp-tag-size-border-width-comfortable)',
38
+ borderWidth: 'var(--ids-comp-tag-size-border-width-comfortable)',
47
39
  },
48
40
  '.ids-tag.ids-tag-comfortable:focus,.ids-tag.ids-tag-comfortable:focus-visible': {
49
41
  outlineWidth: 'var(--ids-comp-tag-focused-outline-size-outline-comfortable)',
@@ -67,7 +59,7 @@ module.exports = function TagPlugin() {
67
59
  height: 'var(--ids-comp-tag-size-height-spacious)',
68
60
  padding: 'var(--ids-comp-tag-size-padding-y-spacious) var(--ids-comp-tag-size-padding-x-spacious)',
69
61
  borderRadius: 'var(--ids-comp-tag-size-border-radius-spacious)',
70
- border: 'var(--ids-comp-tag-size-border-width-spacious)',
62
+ borderWidth: 'var(--ids-comp-tag-size-border-width-spacious)',
71
63
  },
72
64
  '.ids-tag.ids-tag-spacious:focus,.ids-tag.ids-tag-spacious:focus-visible': {
73
65
  outlineWidth: 'var(--ids-comp-tag-focused-outline-size-outline-spacious)',
@@ -91,7 +83,7 @@ module.exports = function TagPlugin() {
91
83
  height: 'var(--ids-comp-tag-size-height-dense)',
92
84
  padding: 'var(--ids-comp-tag-size-padding-y-dense) var(--ids-comp-tag-size-padding-x-dense)',
93
85
  borderRadius: 'var(--ids-comp-tag-size-border-radius-dense)',
94
- border: 'var(--ids-comp-tag-size-border-width-dense)',
86
+ borderWidth: 'var(--ids-comp-tag-size-border-width-dense)',
95
87
  },
96
88
  '.ids-tag.ids-tag-dense:focus,.ids-tag.ids-tag-dense:focus-visible': {
97
89
  outlineWidth: 'var(--ids-comp-tag-focused-outline-size-outline-dense)',
@@ -115,381 +107,488 @@ module.exports = function TagPlugin() {
115
107
  background: 'var(--ids-comp-tag-filled-color-bg-primary-default)',
116
108
  borderColor: 'var(--ids-comp-tag-filled-color-border-primary-default)',
117
109
  },
118
- '.ids-tag.ids-tag-filled.ids-tag-primary:hover': {
119
- color: 'var(--ids-comp-tag-filled-color-fg-label-primary-default)',
120
- background: 'var(--ids-comp-tag-filled-color-bg-primary-default)',
121
- borderColor: 'var(--ids-comp-tag-filled-color-border-primary-default)',
110
+ '.ids-tag.ids-tag-filled.ids-tag-secondary': {
111
+ color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-default)',
112
+ background: 'var(--ids-comp-tag-filled-color-bg-secondary-default)',
113
+ borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-default)',
114
+ },
115
+ '.ids-tag.ids-tag-filled.ids-tag-brand': {
116
+ color: 'var(--ids-comp-tag-filled-color-fg-label-brand-default)',
117
+ background: 'var(--ids-comp-tag-filled-color-bg-brand-default)',
118
+ borderColor: 'var(--ids-comp-tag-filled-color-border-brand-default)',
119
+ },
120
+ '.ids-tag.ids-tag-filled.ids-tag-error': {
121
+ color: 'var(--ids-comp-tag-filled-color-fg-label-error-default)',
122
+ background: 'var(--ids-comp-tag-filled-color-bg-error-default)',
123
+ borderColor: 'var(--ids-comp-tag-filled-color-border-error-default)',
124
+ },
125
+ '.ids-tag.ids-tag-filled.ids-tag-success': {
126
+ color: 'var(--ids-comp-tag-filled-color-fg-label-success-default)',
127
+ background: 'var(--ids-comp-tag-filled-color-bg-success-default)',
128
+ borderColor: 'var(--ids-comp-tag-filled-color-border-success-default)',
129
+ },
130
+ '.ids-tag.ids-tag-filled.ids-tag-warning': {
131
+ color: 'var(--ids-comp-tag-filled-color-fg-label-warning-default)',
132
+ background: 'var(--ids-comp-tag-filled-color-bg-warning-default)',
133
+ borderColor: 'var(--ids-comp-tag-filled-color-border-warning-default)',
134
+ },
135
+ '.ids-tag.ids-tag-filled.ids-tag-light': {
136
+ color: 'var(--ids-comp-tag-filled-color-fg-label-light-default)',
137
+ background: 'var(--ids-comp-tag-filled-color-bg-light-default)',
138
+ borderColor: 'var(--ids-comp-tag-filled-color-border-light-default)',
139
+ },
140
+ '.ids-tag.ids-tag-filled.ids-tag-dark': {
141
+ color: 'var(--ids-comp-tag-filled-color-fg-label-dark-default)',
142
+ background: 'var(--ids-comp-tag-filled-color-bg-dark-default)',
143
+ borderColor: 'var(--ids-comp-tag-filled-color-border-dark-default)',
144
+ },
145
+ '.ids-tag.ids-tag-filled.ids-tag-surface': {
146
+ color: 'var(--ids-comp-tag-filled-color-fg-label-surface-default)',
147
+ background: 'var(--ids-comp-tag-filled-color-bg-surface-default)',
148
+ borderColor: 'var(--ids-comp-tag-filled-color-border-surface-default)',
149
+ },
150
+ '.ids-tag.ids-tag-outlined.ids-tag-primary': {
151
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-default)',
152
+ background: 'var(--ids-comp-tag-outlined-color-bg-primary-default)',
153
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-default)',
154
+ },
155
+ '.ids-tag.ids-tag-outlined.ids-tag-secondary': {
156
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-default)',
157
+ background: 'var(--ids-comp-tag-outlined-color-bg-secondary-default)',
158
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-default)',
159
+ },
160
+ '.ids-tag.ids-tag-outlined.ids-tag-brand': {
161
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-default)',
162
+ background: 'var(--ids-comp-tag-outlined-color-bg-brand-default)',
163
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-default)',
164
+ },
165
+ '.ids-tag.ids-tag-outlined.ids-tag-error': {
166
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-error-default)',
167
+ background: 'var(--ids-comp-tag-outlined-color-bg-error-default)',
168
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-error-default)',
169
+ },
170
+ '.ids-tag.ids-tag-outlined.ids-tag-success': {
171
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-success-default)',
172
+ background: 'var(--ids-comp-tag-outlined-color-bg-success-default)',
173
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-success-default)',
174
+ },
175
+ '.ids-tag.ids-tag-outlined.ids-tag-warning': {
176
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-default)',
177
+ background: 'var(--ids-comp-tag-outlined-color-bg-warning-default)',
178
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-default)',
179
+ },
180
+ '.ids-tag.ids-tag-outlined.ids-tag-light': {
181
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-light-default)',
182
+ background: 'var(--ids-comp-tag-outlined-color-bg-light-default)',
183
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-light-default)',
184
+ },
185
+ '.ids-tag.ids-tag-outlined.ids-tag-dark': {
186
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-default)',
187
+ background: 'var(--ids-comp-tag-outlined-color-bg-dark-default)',
188
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-default)',
189
+ },
190
+ '.ids-tag.ids-tag-outlined.ids-tag-surface': {
191
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-default)',
192
+ background: 'var(--ids-comp-tag-outlined-color-bg-surface-default)',
193
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-default)',
122
194
  },
123
- '.ids-tag.ids-tag-filled.ids-tag-primary:focus,.ids-tag.ids-tag-filled.ids-tag-primary:focus-visible': {
195
+ 'ids-tag': { cursor: 'default' },
196
+ 'a.ids-tag': { cursor: 'pointer', textDecoration: 'none' },
197
+ 'a.ids-tag.ids-tag-filled.ids-tag-primary': {
124
198
  color: 'var(--ids-comp-tag-filled-color-fg-label-primary-default)',
125
199
  background: 'var(--ids-comp-tag-filled-color-bg-primary-default)',
126
200
  borderColor: 'var(--ids-comp-tag-filled-color-border-primary-default)',
201
+ },
202
+ 'a.ids-tag.ids-tag-filled.ids-tag-primary:hover': {
203
+ color: 'var(--ids-comp-tag-filled-color-fg-label-primary-hovered)',
204
+ background: 'var(--ids-comp-tag-filled-color-bg-primary-hovered)',
205
+ borderColor: 'var(--ids-comp-tag-filled-color-border-primary-hovered)',
206
+ },
207
+ 'a.ids-tag.ids-tag-filled.ids-tag-primary:focus,a.ids-tag.ids-tag-filled.ids-tag-primary:focus-visible': {
208
+ color: 'var(--ids-comp-tag-filled-color-fg-label-primary-focused)',
209
+ background: 'var(--ids-comp-tag-filled-color-bg-primary-focused)',
210
+ borderColor: 'var(--ids-comp-tag-filled-color-border-primary-focused)',
127
211
  outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
128
212
  },
129
- '.ids-tag.ids-tag-filled.ids-tag-primary:active': {
130
- color: 'var(--ids-comp-tag-filled-color-fg-label-primary-default)',
131
- background: 'var(--ids-comp-tag-filled-color-bg-primary-default)',
132
- borderColor: 'var(--ids-comp-tag-filled-color-border-primary-default)',
213
+ 'a.ids-tag.ids-tag-filled.ids-tag-primary:active': {
214
+ color: 'var(--ids-comp-tag-filled-color-fg-label-primary-pressed)',
215
+ background: 'var(--ids-comp-tag-filled-color-bg-primary-pressed)',
216
+ borderColor: 'var(--ids-comp-tag-filled-color-border-primary-pressed)',
133
217
  },
134
- '.ids-tag.ids-tag-filled.ids-tag-secondary': {
218
+ 'a.ids-tag.ids-tag-filled.ids-tag-secondary': {
135
219
  color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-default)',
136
220
  background: 'var(--ids-comp-tag-filled-color-bg-secondary-default)',
137
221
  borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-default)',
138
222
  },
139
- '.ids-tag.ids-tag-filled.ids-tag-secondary:hover': {
140
- color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-default)',
141
- background: 'var(--ids-comp-tag-filled-color-bg-secondary-default)',
142
- borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-default)',
223
+ 'a.ids-tag.ids-tag-filled.ids-tag-secondary:hover': {
224
+ color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-hovered)',
225
+ background: 'var(--ids-comp-tag-filled-color-bg-secondary-hovered)',
226
+ borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-hovered)',
143
227
  },
144
- '.ids-tag.ids-tag-filled.ids-tag-secondary:focus,.ids-tag.ids-tag-filled.ids-tag-secondary:focus-visible': {
145
- color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-default)',
146
- background: 'var(--ids-comp-tag-filled-color-bg-secondary-default)',
147
- borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-default)',
228
+ 'a.ids-tag.ids-tag-filled.ids-tag-secondary:focus,a.ids-tag.ids-tag-filled.ids-tag-secondary:focus-visible': {
229
+ color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-focused)',
230
+ background: 'var(--ids-comp-tag-filled-color-bg-secondary-focused)',
231
+ borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-focused)',
148
232
  outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
149
233
  },
150
- '.ids-tag.ids-tag-filled.ids-tag-secondary:active': {
151
- color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-default)',
152
- background: 'var(--ids-comp-tag-filled-color-bg-secondary-default)',
153
- borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-default)',
234
+ 'a.ids-tag.ids-tag-filled.ids-tag-secondary:active': {
235
+ color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-pressed)',
236
+ background: 'var(--ids-comp-tag-filled-color-bg-secondary-pressed)',
237
+ borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-pressed)',
154
238
  },
155
- '.ids-tag.ids-tag-filled.ids-tag-brand': {
239
+ 'a.ids-tag.ids-tag-filled.ids-tag-brand': {
156
240
  color: 'var(--ids-comp-tag-filled-color-fg-label-brand-default)',
157
241
  background: 'var(--ids-comp-tag-filled-color-bg-brand-default)',
158
242
  borderColor: 'var(--ids-comp-tag-filled-color-border-brand-default)',
159
243
  },
160
- '.ids-tag.ids-tag-filled.ids-tag-brand:hover': {
161
- color: 'var(--ids-comp-tag-filled-color-fg-label-brand-default)',
162
- background: 'var(--ids-comp-tag-filled-color-bg-brand-default)',
163
- borderColor: 'var(--ids-comp-tag-filled-color-border-brand-default)',
244
+ 'a.ids-tag.ids-tag-filled.ids-tag-brand:hover': {
245
+ color: 'var(--ids-comp-tag-filled-color-fg-label-brand-hovered)',
246
+ background: 'var(--ids-comp-tag-filled-color-bg-brand-hovered)',
247
+ borderColor: 'var(--ids-comp-tag-filled-color-border-brand-hovered)',
164
248
  },
165
- '.ids-tag.ids-tag-filled.ids-tag-brand:focus,.ids-tag.ids-tag-filled.ids-tag-brand:focus-visible': {
166
- color: 'var(--ids-comp-tag-filled-color-fg-label-brand-default)',
167
- background: 'var(--ids-comp-tag-filled-color-bg-brand-default)',
168
- borderColor: 'var(--ids-comp-tag-filled-color-border-brand-default)',
249
+ 'a.ids-tag.ids-tag-filled.ids-tag-brand:focus,a.ids-tag.ids-tag-filled.ids-tag-brand:focus-visible': {
250
+ color: 'var(--ids-comp-tag-filled-color-fg-label-brand-focused)',
251
+ background: 'var(--ids-comp-tag-filled-color-bg-brand-focused)',
252
+ borderColor: 'var(--ids-comp-tag-filled-color-border-brand-focused)',
169
253
  outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
170
254
  },
171
- '.ids-tag.ids-tag-filled.ids-tag-brand:active': {
172
- color: 'var(--ids-comp-tag-filled-color-fg-label-brand-default)',
173
- background: 'var(--ids-comp-tag-filled-color-bg-brand-default)',
174
- borderColor: 'var(--ids-comp-tag-filled-color-border-brand-default)',
255
+ 'a.ids-tag.ids-tag-filled.ids-tag-brand:active': {
256
+ color: 'var(--ids-comp-tag-filled-color-fg-label-brand-pressed)',
257
+ background: 'var(--ids-comp-tag-filled-color-bg-brand-pressed)',
258
+ borderColor: 'var(--ids-comp-tag-filled-color-border-brand-pressed)',
175
259
  },
176
- '.ids-tag.ids-tag-filled.ids-tag-error': {
260
+ 'a.ids-tag.ids-tag-filled.ids-tag-error': {
177
261
  color: 'var(--ids-comp-tag-filled-color-fg-label-error-default)',
178
262
  background: 'var(--ids-comp-tag-filled-color-bg-error-default)',
179
263
  borderColor: 'var(--ids-comp-tag-filled-color-border-error-default)',
180
264
  },
181
- '.ids-tag.ids-tag-filled.ids-tag-error:hover': {
182
- color: 'var(--ids-comp-tag-filled-color-fg-label-error-default)',
183
- background: 'var(--ids-comp-tag-filled-color-bg-error-default)',
184
- borderColor: 'var(--ids-comp-tag-filled-color-border-error-default)',
265
+ 'a.ids-tag.ids-tag-filled.ids-tag-error:hover': {
266
+ color: 'var(--ids-comp-tag-filled-color-fg-label-error-hovered)',
267
+ background: 'var(--ids-comp-tag-filled-color-bg-error-hovered)',
268
+ borderColor: 'var(--ids-comp-tag-filled-color-border-error-hovered)',
185
269
  },
186
- '.ids-tag.ids-tag-filled.ids-tag-error:focus,.ids-tag.ids-tag-filled.ids-tag-error:focus-visible': {
187
- color: 'var(--ids-comp-tag-filled-color-fg-label-error-default)',
188
- background: 'var(--ids-comp-tag-filled-color-bg-error-default)',
189
- borderColor: 'var(--ids-comp-tag-filled-color-border-error-default)',
270
+ 'a.ids-tag.ids-tag-filled.ids-tag-error:focus,a.ids-tag.ids-tag-filled.ids-tag-error:focus-visible': {
271
+ color: 'var(--ids-comp-tag-filled-color-fg-label-error-focused)',
272
+ background: 'var(--ids-comp-tag-filled-color-bg-error-focused)',
273
+ borderColor: 'var(--ids-comp-tag-filled-color-border-error-focused)',
190
274
  outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
191
275
  },
192
- '.ids-tag.ids-tag-filled.ids-tag-error:active': {
193
- color: 'var(--ids-comp-tag-filled-color-fg-label-error-default)',
194
- background: 'var(--ids-comp-tag-filled-color-bg-error-default)',
195
- borderColor: 'var(--ids-comp-tag-filled-color-border-error-default)',
276
+ 'a.ids-tag.ids-tag-filled.ids-tag-error:active': {
277
+ color: 'var(--ids-comp-tag-filled-color-fg-label-error-pressed)',
278
+ background: 'var(--ids-comp-tag-filled-color-bg-error-pressed)',
279
+ borderColor: 'var(--ids-comp-tag-filled-color-border-error-pressed)',
196
280
  },
197
- '.ids-tag.ids-tag-filled.ids-tag-success': {
281
+ 'a.ids-tag.ids-tag-filled.ids-tag-success': {
198
282
  color: 'var(--ids-comp-tag-filled-color-fg-label-success-default)',
199
283
  background: 'var(--ids-comp-tag-filled-color-bg-success-default)',
200
284
  borderColor: 'var(--ids-comp-tag-filled-color-border-success-default)',
201
285
  },
202
- '.ids-tag.ids-tag-filled.ids-tag-success:hover': {
203
- color: 'var(--ids-comp-tag-filled-color-fg-label-success-default)',
204
- background: 'var(--ids-comp-tag-filled-color-bg-success-default)',
205
- borderColor: 'var(--ids-comp-tag-filled-color-border-success-default)',
286
+ 'a.ids-tag.ids-tag-filled.ids-tag-success:hover': {
287
+ color: 'var(--ids-comp-tag-filled-color-fg-label-success-hovered)',
288
+ background: 'var(--ids-comp-tag-filled-color-bg-success-hovered)',
289
+ borderColor: 'var(--ids-comp-tag-filled-color-border-success-hovered)',
206
290
  },
207
- '.ids-tag.ids-tag-filled.ids-tag-success:focus,.ids-tag.ids-tag-filled.ids-tag-success:focus-visible': {
208
- color: 'var(--ids-comp-tag-filled-color-fg-label-success-default)',
209
- background: 'var(--ids-comp-tag-filled-color-bg-success-default)',
210
- borderColor: 'var(--ids-comp-tag-filled-color-border-success-default)',
291
+ 'a.ids-tag.ids-tag-filled.ids-tag-success:focus,a.ids-tag.ids-tag-filled.ids-tag-success:focus-visible': {
292
+ color: 'var(--ids-comp-tag-filled-color-fg-label-success-focused)',
293
+ background: 'var(--ids-comp-tag-filled-color-bg-success-focused)',
294
+ borderColor: 'var(--ids-comp-tag-filled-color-border-success-focused)',
211
295
  outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
212
296
  },
213
- '.ids-tag.ids-tag-filled.ids-tag-success:active': {
214
- color: 'var(--ids-comp-tag-filled-color-fg-label-success-default)',
215
- background: 'var(--ids-comp-tag-filled-color-bg-success-default)',
216
- borderColor: 'var(--ids-comp-tag-filled-color-border-success-default)',
297
+ 'a.ids-tag.ids-tag-filled.ids-tag-success:active': {
298
+ color: 'var(--ids-comp-tag-filled-color-fg-label-success-pressed)',
299
+ background: 'var(--ids-comp-tag-filled-color-bg-success-pressed)',
300
+ borderColor: 'var(--ids-comp-tag-filled-color-border-success-pressed)',
217
301
  },
218
- '.ids-tag.ids-tag-filled.ids-tag-warning': {
302
+ 'a.ids-tag.ids-tag-filled.ids-tag-warning': {
219
303
  color: 'var(--ids-comp-tag-filled-color-fg-label-warning-default)',
220
304
  background: 'var(--ids-comp-tag-filled-color-bg-warning-default)',
221
305
  borderColor: 'var(--ids-comp-tag-filled-color-border-warning-default)',
222
306
  },
223
- '.ids-tag.ids-tag-filled.ids-tag-warning:hover': {
224
- color: 'var(--ids-comp-tag-filled-color-fg-label-warning-default)',
225
- background: 'var(--ids-comp-tag-filled-color-bg-warning-default)',
226
- borderColor: 'var(--ids-comp-tag-filled-color-border-warning-default)',
307
+ 'a.ids-tag.ids-tag-filled.ids-tag-warning:hover': {
308
+ color: 'var(--ids-comp-tag-filled-color-fg-label-warning-hovered)',
309
+ background: 'var(--ids-comp-tag-filled-color-bg-warning-hovered)',
310
+ borderColor: 'var(--ids-comp-tag-filled-color-border-warning-hovered)',
227
311
  },
228
- '.ids-tag.ids-tag-filled.ids-tag-warning:focus,.ids-tag.ids-tag-filled.ids-tag-warning:focus-visible': {
229
- color: 'var(--ids-comp-tag-filled-color-fg-label-warning-default)',
230
- background: 'var(--ids-comp-tag-filled-color-bg-warning-default)',
231
- borderColor: 'var(--ids-comp-tag-filled-color-border-warning-default)',
312
+ 'a.ids-tag.ids-tag-filled.ids-tag-warning:focus,a.ids-tag.ids-tag-filled.ids-tag-warning:focus-visible': {
313
+ color: 'var(--ids-comp-tag-filled-color-fg-label-warning-focused)',
314
+ background: 'var(--ids-comp-tag-filled-color-bg-warning-focused)',
315
+ borderColor: 'var(--ids-comp-tag-filled-color-border-warning-focused)',
232
316
  outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
233
317
  },
234
- '.ids-tag.ids-tag-filled.ids-tag-warning:active': {
235
- color: 'var(--ids-comp-tag-filled-color-fg-label-warning-default)',
236
- background: 'var(--ids-comp-tag-filled-color-bg-warning-default)',
237
- borderColor: 'var(--ids-comp-tag-filled-color-border-warning-default)',
318
+ 'a.ids-tag.ids-tag-filled.ids-tag-warning:active': {
319
+ color: 'var(--ids-comp-tag-filled-color-fg-label-warning-pressed)',
320
+ background: 'var(--ids-comp-tag-filled-color-bg-warning-pressed)',
321
+ borderColor: 'var(--ids-comp-tag-filled-color-border-warning-pressed)',
238
322
  },
239
- '.ids-tag.ids-tag-filled.ids-tag-light': {
323
+ 'a.ids-tag.ids-tag-filled.ids-tag-light': {
240
324
  color: 'var(--ids-comp-tag-filled-color-fg-label-light-default)',
241
325
  background: 'var(--ids-comp-tag-filled-color-bg-light-default)',
242
326
  borderColor: 'var(--ids-comp-tag-filled-color-border-light-default)',
243
327
  },
244
- '.ids-tag.ids-tag-filled.ids-tag-light:hover': {
245
- color: 'var(--ids-comp-tag-filled-color-fg-label-light-default)',
246
- background: 'var(--ids-comp-tag-filled-color-bg-light-default)',
247
- borderColor: 'var(--ids-comp-tag-filled-color-border-light-default)',
328
+ 'a.ids-tag.ids-tag-filled.ids-tag-light:hover': {
329
+ color: 'var(--ids-comp-tag-filled-color-fg-label-light-hovered)',
330
+ background: 'var(--ids-comp-tag-filled-color-bg-light-hovered)',
331
+ borderColor: 'var(--ids-comp-tag-filled-color-border-light-hovered)',
248
332
  },
249
- '.ids-tag.ids-tag-filled.ids-tag-light:focus,.ids-tag.ids-tag-filled.ids-tag-light:focus-visible': {
250
- color: 'var(--ids-comp-tag-filled-color-fg-label-light-default)',
251
- background: 'var(--ids-comp-tag-filled-color-bg-light-default)',
252
- borderColor: 'var(--ids-comp-tag-filled-color-border-light-default)',
333
+ 'a.ids-tag.ids-tag-filled.ids-tag-light:focus,a.ids-tag.ids-tag-filled.ids-tag-light:focus-visible': {
334
+ color: 'var(--ids-comp-tag-filled-color-fg-label-light-focused)',
335
+ background: 'var(--ids-comp-tag-filled-color-bg-light-focused)',
336
+ borderColor: 'var(--ids-comp-tag-filled-color-border-light-focused)',
253
337
  outlineColor: 'var(--ids-comp-tag-focused-outline-color-light-focused)',
254
338
  },
255
- '.ids-tag.ids-tag-filled.ids-tag-light:active': {
256
- color: 'var(--ids-comp-tag-filled-color-fg-label-light-default)',
257
- background: 'var(--ids-comp-tag-filled-color-bg-light-default)',
258
- borderColor: 'var(--ids-comp-tag-filled-color-border-light-default)',
339
+ 'a.ids-tag.ids-tag-filled.ids-tag-light:active': {
340
+ color: 'var(--ids-comp-tag-filled-color-fg-label-light-pressed)',
341
+ background: 'var(--ids-comp-tag-filled-color-bg-light-pressed)',
342
+ borderColor: 'var(--ids-comp-tag-filled-color-border-light-pressed)',
259
343
  },
260
- '.ids-tag.ids-tag-filled.ids-tag-dark': {
344
+ 'a.ids-tag.ids-tag-filled.ids-tag-dark': {
261
345
  color: 'var(--ids-comp-tag-filled-color-fg-label-dark-default)',
262
346
  background: 'var(--ids-comp-tag-filled-color-bg-dark-default)',
263
347
  borderColor: 'var(--ids-comp-tag-filled-color-border-dark-default)',
264
348
  },
265
- '.ids-tag.ids-tag-filled.ids-tag-dark:hover': {
266
- color: 'var(--ids-comp-tag-filled-color-fg-label-dark-default)',
267
- background: 'var(--ids-comp-tag-filled-color-bg-dark-default)',
268
- borderColor: 'var(--ids-comp-tag-filled-color-border-dark-default)',
349
+ 'a.ids-tag.ids-tag-filled.ids-tag-dark:hover': {
350
+ color: 'var(--ids-comp-tag-filled-color-fg-label-dark-hovered)',
351
+ background: 'var(--ids-comp-tag-filled-color-bg-dark-hovered)',
352
+ borderColor: 'var(--ids-comp-tag-filled-color-border-dark-hovered)',
269
353
  },
270
- '.ids-tag.ids-tag-filled.ids-tag-dark:focus,.ids-tag.ids-tag-filled.ids-tag-dark:focus-visible': {
271
- color: 'var(--ids-comp-tag-filled-color-fg-label-dark-default)',
272
- background: 'var(--ids-comp-tag-filled-color-bg-dark-default)',
273
- borderColor: 'var(--ids-comp-tag-filled-color-border-dark-default)',
354
+ 'a.ids-tag.ids-tag-filled.ids-tag-dark:focus,a.ids-tag.ids-tag-filled.ids-tag-dark:focus-visible': {
355
+ color: 'var(--ids-comp-tag-filled-color-fg-label-dark-focused)',
356
+ background: 'var(--ids-comp-tag-filled-color-bg-dark-focused)',
357
+ borderColor: 'var(--ids-comp-tag-filled-color-border-dark-focused)',
274
358
  outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
275
359
  },
276
- '.ids-tag.ids-tag-filled.ids-tag-dark:active': {
277
- color: 'var(--ids-comp-tag-filled-color-fg-label-dark-default)',
278
- background: 'var(--ids-comp-tag-filled-color-bg-dark-default)',
279
- borderColor: 'var(--ids-comp-tag-filled-color-border-dark-default)',
360
+ 'a.ids-tag.ids-tag-filled.ids-tag-dark:active': {
361
+ color: 'var(--ids-comp-tag-filled-color-fg-label-dark-pressed)',
362
+ background: 'var(--ids-comp-tag-filled-color-bg-dark-pressed)',
363
+ borderColor: 'var(--ids-comp-tag-filled-color-border-dark-pressed)',
280
364
  },
281
- '.ids-tag.ids-tag-filled.ids-tag-surface': {
365
+ 'a.ids-tag.ids-tag-filled.ids-tag-surface': {
282
366
  color: 'var(--ids-comp-tag-filled-color-fg-label-surface-default)',
283
367
  background: 'var(--ids-comp-tag-filled-color-bg-surface-default)',
284
368
  borderColor: 'var(--ids-comp-tag-filled-color-border-surface-default)',
285
369
  },
286
- '.ids-tag.ids-tag-filled.ids-tag-surface:hover': {
287
- color: 'var(--ids-comp-tag-filled-color-fg-label-surface-default)',
288
- background: 'var(--ids-comp-tag-filled-color-bg-surface-default)',
289
- borderColor: 'var(--ids-comp-tag-filled-color-border-surface-default)',
370
+ 'a.ids-tag.ids-tag-filled.ids-tag-surface:hover': {
371
+ color: 'var(--ids-comp-tag-filled-color-fg-label-surface-hovered)',
372
+ background: 'var(--ids-comp-tag-filled-color-bg-surface-hovered)',
373
+ borderColor: 'var(--ids-comp-tag-filled-color-border-surface-hovered)',
290
374
  },
291
- '.ids-tag.ids-tag-filled.ids-tag-surface:focus,.ids-tag.ids-tag-filled.ids-tag-surface:focus-visible': {
292
- color: 'var(--ids-comp-tag-filled-color-fg-label-surface-default)',
293
- background: 'var(--ids-comp-tag-filled-color-bg-surface-default)',
294
- borderColor: 'var(--ids-comp-tag-filled-color-border-surface-default)',
375
+ 'a.ids-tag.ids-tag-filled.ids-tag-surface:focus,a.ids-tag.ids-tag-filled.ids-tag-surface:focus-visible': {
376
+ color: 'var(--ids-comp-tag-filled-color-fg-label-surface-focused)',
377
+ background: 'var(--ids-comp-tag-filled-color-bg-surface-focused)',
378
+ borderColor: 'var(--ids-comp-tag-filled-color-border-surface-focused)',
295
379
  outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
296
380
  },
297
- '.ids-tag.ids-tag-filled.ids-tag-surface:active': {
298
- color: 'var(--ids-comp-tag-filled-color-fg-label-surface-default)',
299
- background: 'var(--ids-comp-tag-filled-color-bg-surface-default)',
300
- borderColor: 'var(--ids-comp-tag-filled-color-border-surface-default)',
381
+ 'a.ids-tag.ids-tag-filled.ids-tag-surface:active': {
382
+ color: 'var(--ids-comp-tag-filled-color-fg-label-surface-pressed)',
383
+ background: 'var(--ids-comp-tag-filled-color-bg-surface-pressed)',
384
+ borderColor: 'var(--ids-comp-tag-filled-color-border-surface-pressed)',
301
385
  },
302
- '.ids-tag.ids-tag-outlined.ids-tag-primary': {
386
+ 'a.ids-tag.ids-tag-outlined.ids-tag-primary': {
303
387
  color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-default)',
304
388
  background: 'var(--ids-comp-tag-outlined-color-bg-primary-default)',
305
389
  borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-default)',
306
390
  },
307
- '.ids-tag.ids-tag-outlined.ids-tag-primary:hover': {
308
- color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-default)',
309
- background: 'var(--ids-comp-tag-outlined-color-bg-primary-default)',
310
- borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-default)',
391
+ 'a.ids-tag.ids-tag-outlined.ids-tag-primary:hover': {
392
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-hovered)',
393
+ background: 'var(--ids-comp-tag-outlined-color-bg-primary-hovered)',
394
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-hovered)',
311
395
  },
312
- '.ids-tag.ids-tag-outlined.ids-tag-primary:focus,.ids-tag.ids-tag-outlined.ids-tag-primary:focus-visible': {
313
- color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-default)',
314
- background: 'var(--ids-comp-tag-outlined-color-bg-primary-default)',
315
- borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-default)',
396
+ 'a.ids-tag.ids-tag-outlined.ids-tag-primary:focus,a.ids-tag.ids-tag-outlined.ids-tag-primary:focus-visible': {
397
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-focused)',
398
+ background: 'var(--ids-comp-tag-outlined-color-bg-primary-focused)',
399
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-focused)',
316
400
  outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
317
401
  },
318
- '.ids-tag.ids-tag-outlined.ids-tag-primary:active': {
319
- color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-default)',
320
- background: 'var(--ids-comp-tag-outlined-color-bg-primary-default)',
321
- borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-default)',
402
+ 'a.ids-tag.ids-tag-outlined.ids-tag-primary:active': {
403
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-pressed)',
404
+ background: 'var(--ids-comp-tag-outlined-color-bg-primary-pressed)',
405
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-pressed)',
322
406
  },
323
- '.ids-tag.ids-tag-outlined.ids-tag-secondary': {
407
+ 'a.ids-tag.ids-tag-outlined.ids-tag-secondary': {
324
408
  color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-default)',
325
409
  background: 'var(--ids-comp-tag-outlined-color-bg-secondary-default)',
326
410
  borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-default)',
327
411
  },
328
- '.ids-tag.ids-tag-outlined.ids-tag-secondary:hover': {
329
- color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-default)',
330
- background: 'var(--ids-comp-tag-outlined-color-bg-secondary-default)',
331
- borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-default)',
412
+ 'a.ids-tag.ids-tag-outlined.ids-tag-secondary:hover': {
413
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-hovered)',
414
+ background: 'var(--ids-comp-tag-outlined-color-bg-secondary-hovered)',
415
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-hovered)',
332
416
  },
333
- '.ids-tag.ids-tag-outlined.ids-tag-secondary:focus,.ids-tag.ids-tag-outlined.ids-tag-secondary:focus-visible': {
334
- color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-default)',
335
- background: 'var(--ids-comp-tag-outlined-color-bg-secondary-default)',
336
- borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-default)',
417
+ 'a.ids-tag.ids-tag-outlined.ids-tag-secondary:focus,a.ids-tag.ids-tag-outlined.ids-tag-secondary:focus-visible': {
418
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-focused)',
419
+ background: 'var(--ids-comp-tag-outlined-color-bg-secondary-focused)',
420
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-focused)',
337
421
  outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
338
422
  },
339
- '.ids-tag.ids-tag-outlined.ids-tag-secondary:active': {
340
- color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-default)',
341
- background: 'var(--ids-comp-tag-outlined-color-bg-secondary-default)',
342
- borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-default)',
423
+ 'a.ids-tag.ids-tag-outlined.ids-tag-secondary:active': {
424
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-pressed)',
425
+ background: 'var(--ids-comp-tag-outlined-color-bg-secondary-pressed)',
426
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-pressed)',
343
427
  },
344
- '.ids-tag.ids-tag-outlined.ids-tag-brand': {
428
+ 'a.ids-tag.ids-tag-outlined.ids-tag-brand': {
345
429
  color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-default)',
346
430
  background: 'var(--ids-comp-tag-outlined-color-bg-brand-default)',
347
431
  borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-default)',
348
432
  },
349
- '.ids-tag.ids-tag-outlined.ids-tag-brand:hover': {
350
- color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-default)',
351
- background: 'var(--ids-comp-tag-outlined-color-bg-brand-default)',
352
- borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-default)',
433
+ 'a.ids-tag.ids-tag-outlined.ids-tag-brand:hover': {
434
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-hovered)',
435
+ background: 'var(--ids-comp-tag-outlined-color-bg-brand-hovered)',
436
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-hovered)',
353
437
  },
354
- '.ids-tag.ids-tag-outlined.ids-tag-brand:focus,.ids-tag.ids-tag-outlined.ids-tag-brand:focus-visible': {
355
- color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-default)',
356
- background: 'var(--ids-comp-tag-outlined-color-bg-brand-default)',
357
- borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-default)',
438
+ 'a.ids-tag.ids-tag-outlined.ids-tag-brand:focus,a.ids-tag.ids-tag-outlined.ids-tag-brand:focus-visible': {
439
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-focused)',
440
+ background: 'var(--ids-comp-tag-outlined-color-bg-brand-focused)',
441
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-focused)',
358
442
  outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
359
443
  },
360
- '.ids-tag.ids-tag-outlined.ids-tag-brand:active': {
361
- color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-default)',
362
- background: 'var(--ids-comp-tag-outlined-color-bg-brand-default)',
363
- borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-default)',
444
+ 'a.ids-tag.ids-tag-outlined.ids-tag-brand:active': {
445
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-pressed)',
446
+ background: 'var(--ids-comp-tag-outlined-color-bg-brand-pressed)',
447
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-pressed)',
364
448
  },
365
- '.ids-tag.ids-tag-outlined.ids-tag-error': {
449
+ 'a.ids-tag.ids-tag-outlined.ids-tag-error': {
366
450
  color: 'var(--ids-comp-tag-outlined-color-fg-label-error-default)',
367
451
  background: 'var(--ids-comp-tag-outlined-color-bg-error-default)',
368
452
  borderColor: 'var(--ids-comp-tag-outlined-color-border-error-default)',
369
453
  },
370
- '.ids-tag.ids-tag-outlined.ids-tag-error:hover': {
371
- color: 'var(--ids-comp-tag-outlined-color-fg-label-error-default)',
372
- background: 'var(--ids-comp-tag-outlined-color-bg-error-default)',
373
- borderColor: 'var(--ids-comp-tag-outlined-color-border-error-default)',
454
+ 'a.ids-tag.ids-tag-outlined.ids-tag-error:hover': {
455
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-error-hovered)',
456
+ background: 'var(--ids-comp-tag-outlined-color-bg-error-hovered)',
457
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-error-hovered)',
374
458
  },
375
- '.ids-tag.ids-tag-outlined.ids-tag-error:focus,.ids-tag.ids-tag-outlined.ids-tag-error:focus-visible': {
376
- color: 'var(--ids-comp-tag-outlined-color-fg-label-error-default)',
377
- background: 'var(--ids-comp-tag-outlined-color-bg-error-default)',
378
- borderColor: 'var(--ids-comp-tag-outlined-color-border-error-default)',
459
+ 'a.ids-tag.ids-tag-outlined.ids-tag-error:focus,a.ids-tag.ids-tag-outlined.ids-tag-error:focus-visible': {
460
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-error-focused)',
461
+ background: 'var(--ids-comp-tag-outlined-color-bg-error-focused)',
462
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-error-focused)',
379
463
  outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
380
464
  },
381
- '.ids-tag.ids-tag-outlined.ids-tag-error:active': {
382
- color: 'var(--ids-comp-tag-outlined-color-fg-label-error-default)',
383
- background: 'var(--ids-comp-tag-outlined-color-bg-error-default)',
384
- borderColor: 'var(--ids-comp-tag-outlined-color-border-error-default)',
465
+ 'a.ids-tag.ids-tag-outlined.ids-tag-error:active': {
466
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-error-pressed)',
467
+ background: 'var(--ids-comp-tag-outlined-color-bg-error-pressed)',
468
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-error-pressed)',
385
469
  },
386
- '.ids-tag.ids-tag-outlined.ids-tag-success': {
470
+ 'a.ids-tag.ids-tag-outlined.ids-tag-success': {
387
471
  color: 'var(--ids-comp-tag-outlined-color-fg-label-success-default)',
388
472
  background: 'var(--ids-comp-tag-outlined-color-bg-success-default)',
389
473
  borderColor: 'var(--ids-comp-tag-outlined-color-border-success-default)',
390
474
  },
391
- '.ids-tag.ids-tag-outlined.ids-tag-success:hover': {
392
- color: 'var(--ids-comp-tag-outlined-color-fg-label-success-default)',
393
- background: 'var(--ids-comp-tag-outlined-color-bg-success-default)',
394
- borderColor: 'var(--ids-comp-tag-outlined-color-border-success-default)',
475
+ 'a.ids-tag.ids-tag-outlined.ids-tag-success:hover': {
476
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-success-hovered)',
477
+ background: 'var(--ids-comp-tag-outlined-color-bg-success-hovered)',
478
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-success-hovered)',
395
479
  },
396
- '.ids-tag.ids-tag-outlined.ids-tag-success:focus,.ids-tag.ids-tag-outlined.ids-tag-success:focus-visible': {
397
- color: 'var(--ids-comp-tag-outlined-color-fg-label-success-default)',
398
- background: 'var(--ids-comp-tag-outlined-color-bg-success-default)',
399
- borderColor: 'var(--ids-comp-tag-outlined-color-border-success-default)',
480
+ 'a.ids-tag.ids-tag-outlined.ids-tag-success:focus,a.ids-tag.ids-tag-outlined.ids-tag-success:focus-visible': {
481
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-success-focused)',
482
+ background: 'var(--ids-comp-tag-outlined-color-bg-success-focused)',
483
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-success-focused)',
400
484
  outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
401
485
  },
402
- '.ids-tag.ids-tag-outlined.ids-tag-success:active': {
403
- color: 'var(--ids-comp-tag-outlined-color-fg-label-success-default)',
404
- background: 'var(--ids-comp-tag-outlined-color-bg-success-default)',
405
- borderColor: 'var(--ids-comp-tag-outlined-color-border-success-default)',
486
+ 'a.ids-tag.ids-tag-outlined.ids-tag-success:active': {
487
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-success-pressed)',
488
+ background: 'var(--ids-comp-tag-outlined-color-bg-success-pressed)',
489
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-success-pressed)',
406
490
  },
407
- '.ids-tag.ids-tag-outlined.ids-tag-warning': {
491
+ 'a.ids-tag.ids-tag-outlined.ids-tag-warning': {
408
492
  color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-default)',
409
493
  background: 'var(--ids-comp-tag-outlined-color-bg-warning-default)',
410
494
  borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-default)',
411
495
  },
412
- '.ids-tag.ids-tag-outlined.ids-tag-warning:hover': {
413
- color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-default)',
414
- background: 'var(--ids-comp-tag-outlined-color-bg-warning-default)',
415
- borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-default)',
496
+ 'a.ids-tag.ids-tag-outlined.ids-tag-warning:hover': {
497
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-hovered)',
498
+ background: 'var(--ids-comp-tag-outlined-color-bg-warning-hovered)',
499
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-hovered)',
416
500
  },
417
- '.ids-tag.ids-tag-outlined.ids-tag-warning:focus,.ids-tag.ids-tag-outlined.ids-tag-warning:focus-visible': {
418
- color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-default)',
419
- background: 'var(--ids-comp-tag-outlined-color-bg-warning-default)',
420
- borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-default)',
501
+ 'a.ids-tag.ids-tag-outlined.ids-tag-warning:focus,a.ids-tag.ids-tag-outlined.ids-tag-warning:focus-visible': {
502
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-focused)',
503
+ background: 'var(--ids-comp-tag-outlined-color-bg-warning-focused)',
504
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-focused)',
421
505
  outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
422
506
  },
423
- '.ids-tag.ids-tag-outlined.ids-tag-warning:active': {
424
- color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-default)',
425
- background: 'var(--ids-comp-tag-outlined-color-bg-warning-default)',
426
- borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-default)',
507
+ 'a.ids-tag.ids-tag-outlined.ids-tag-warning:active': {
508
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-pressed)',
509
+ background: 'var(--ids-comp-tag-outlined-color-bg-warning-pressed)',
510
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-pressed)',
427
511
  },
428
- '.ids-tag.ids-tag-outlined.ids-tag-light': {
512
+ 'a.ids-tag.ids-tag-outlined.ids-tag-light': {
429
513
  color: 'var(--ids-comp-tag-outlined-color-fg-label-light-default)',
430
514
  background: 'var(--ids-comp-tag-outlined-color-bg-light-default)',
431
515
  borderColor: 'var(--ids-comp-tag-outlined-color-border-light-default)',
432
516
  },
433
- '.ids-tag.ids-tag-outlined.ids-tag-light:hover': {
434
- color: 'var(--ids-comp-tag-outlined-color-fg-label-light-default)',
435
- background: 'var(--ids-comp-tag-outlined-color-bg-light-default)',
436
- borderColor: 'var(--ids-comp-tag-outlined-color-border-light-default)',
517
+ 'a.ids-tag.ids-tag-outlined.ids-tag-light:hover': {
518
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-light-hovered)',
519
+ background: 'var(--ids-comp-tag-outlined-color-bg-light-hovered)',
520
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-light-hovered)',
437
521
  },
438
- '.ids-tag.ids-tag-outlined.ids-tag-light:focus,.ids-tag.ids-tag-outlined.ids-tag-light:focus-visible': {
439
- color: 'var(--ids-comp-tag-outlined-color-fg-label-light-default)',
440
- background: 'var(--ids-comp-tag-outlined-color-bg-light-default)',
441
- borderColor: 'var(--ids-comp-tag-outlined-color-border-light-default)',
522
+ 'a.ids-tag.ids-tag-outlined.ids-tag-light:focus,a.ids-tag.ids-tag-outlined.ids-tag-light:focus-visible': {
523
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-light-focused)',
524
+ background: 'var(--ids-comp-tag-outlined-color-bg-light-focused)',
525
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-light-focused)',
442
526
  outlineColor: 'var(--ids-comp-tag-focused-outline-color-light-focused)',
443
527
  },
444
- '.ids-tag.ids-tag-outlined.ids-tag-light:active': {
445
- color: 'var(--ids-comp-tag-outlined-color-fg-label-light-default)',
446
- background: 'var(--ids-comp-tag-outlined-color-bg-light-default)',
447
- borderColor: 'var(--ids-comp-tag-outlined-color-border-light-default)',
528
+ 'a.ids-tag.ids-tag-outlined.ids-tag-light:active': {
529
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-light-pressed)',
530
+ background: 'var(--ids-comp-tag-outlined-color-bg-light-pressed)',
531
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-light-pressed)',
448
532
  },
449
- '.ids-tag.ids-tag-outlined.ids-tag-dark': {
533
+ 'a.ids-tag.ids-tag-outlined.ids-tag-dark': {
450
534
  color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-default)',
451
535
  background: 'var(--ids-comp-tag-outlined-color-bg-dark-default)',
452
536
  borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-default)',
453
537
  },
454
- '.ids-tag.ids-tag-outlined.ids-tag-dark:hover': {
455
- color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-default)',
456
- background: 'var(--ids-comp-tag-outlined-color-bg-dark-default)',
457
- borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-default)',
538
+ 'a.ids-tag.ids-tag-outlined.ids-tag-dark:hover': {
539
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-hovered)',
540
+ background: 'var(--ids-comp-tag-outlined-color-bg-dark-hovered)',
541
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-hovered)',
458
542
  },
459
- '.ids-tag.ids-tag-outlined.ids-tag-dark:focus,.ids-tag.ids-tag-outlined.ids-tag-dark:focus-visible': {
460
- color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-default)',
461
- background: 'var(--ids-comp-tag-outlined-color-bg-dark-default)',
462
- borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-default)',
543
+ 'a.ids-tag.ids-tag-outlined.ids-tag-dark:focus,a.ids-tag.ids-tag-outlined.ids-tag-dark:focus-visible': {
544
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-focused)',
545
+ background: 'var(--ids-comp-tag-outlined-color-bg-dark-focused)',
546
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-focused)',
463
547
  outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
464
548
  },
465
- '.ids-tag.ids-tag-outlined.ids-tag-dark:active': {
466
- color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-default)',
467
- background: 'var(--ids-comp-tag-outlined-color-bg-dark-default)',
468
- borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-default)',
549
+ 'a.ids-tag.ids-tag-outlined.ids-tag-dark:active': {
550
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-pressed)',
551
+ background: 'var(--ids-comp-tag-outlined-color-bg-dark-pressed)',
552
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-pressed)',
469
553
  },
470
- '.ids-tag.ids-tag-outlined.ids-tag-surface': {
554
+ 'a.ids-tag.ids-tag-outlined.ids-tag-surface': {
471
555
  color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-default)',
472
556
  background: 'var(--ids-comp-tag-outlined-color-bg-surface-default)',
473
557
  borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-default)',
474
558
  },
475
- '.ids-tag.ids-tag-outlined.ids-tag-surface:hover': {
476
- color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-default)',
477
- background: 'var(--ids-comp-tag-outlined-color-bg-surface-default)',
478
- borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-default)',
559
+ 'a.ids-tag.ids-tag-outlined.ids-tag-surface:hover': {
560
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-hovered)',
561
+ background: 'var(--ids-comp-tag-outlined-color-bg-surface-hovered)',
562
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-hovered)',
479
563
  },
480
- '.ids-tag.ids-tag-outlined.ids-tag-surface:focus,.ids-tag.ids-tag-outlined.ids-tag-surface:focus-visible': {
481
- color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-default)',
482
- background: 'var(--ids-comp-tag-outlined-color-bg-surface-default)',
483
- borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-default)',
564
+ 'a.ids-tag.ids-tag-outlined.ids-tag-surface:focus,a.ids-tag.ids-tag-outlined.ids-tag-surface:focus-visible': {
565
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-focused)',
566
+ background: 'var(--ids-comp-tag-outlined-color-bg-surface-focused)',
567
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-focused)',
484
568
  outlineColor: 'var(--ids-comp-tag-focused-outline-color-dark-focused)',
485
569
  },
486
- '.ids-tag.ids-tag-outlined.ids-tag-surface:active': {
487
- color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-default)',
488
- background: 'var(--ids-comp-tag-outlined-color-bg-surface-default)',
489
- borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-default)',
570
+ 'a.ids-tag.ids-tag-outlined.ids-tag-surface:active': {
571
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-pressed)',
572
+ background: 'var(--ids-comp-tag-outlined-color-bg-surface-pressed)',
573
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-pressed)',
574
+ },
575
+ '.ids-tag-group': { display: 'inline-flex', flexWrap: 'wrap', alignItems: 'center', alignContent: 'center' },
576
+ '.ids-tag-group.ids-tag-group-compact': {
577
+ gap: 'var(--ids-comp-tag-group-size-row-gap-compact) var(--ids-comp-tag-group-size-column-gap-compact)',
578
+ padding: 'var(--ids-comp-tag-group-size-padding-y-compact) var(--ids-comp-tag-group-size-padding-x-compact)',
579
+ },
580
+ '.ids-tag-group.ids-tag-group-comfortable': {
581
+ gap: 'var(--ids-comp-tag-group-size-row-gap-comfortable) var(--ids-comp-tag-group-size-column-gap-comfortable)',
582
+ padding: 'var(--ids-comp-tag-group-size-padding-y-comfortable) var(--ids-comp-tag-group-size-padding-x-comfortable)',
583
+ },
584
+ '.ids-tag-group.ids-tag-group-spacious': {
585
+ gap: 'var(--ids-comp-tag-group-size-row-gap-spacious) var(--ids-comp-tag-group-size-column-gap-spacious)',
586
+ padding: 'var(--ids-comp-tag-group-size-padding-y-spacious) var(--ids-comp-tag-group-size-padding-x-spacious)',
587
+ },
588
+ '.ids-tag-group.ids-tag-group-dense': {
589
+ gap: 'var(--ids-comp-tag-group-size-row-gap-dense) var(--ids-comp-tag-group-size-column-gap-dense)',
590
+ padding: 'var(--ids-comp-tag-group-size-padding-y-dense) var(--ids-comp-tag-group-size-padding-x-dense)',
490
591
  },
491
- 'button.ids-tag :not(:disabled)': { cursor: 'pointer' },
492
- 'button.ids-tag :disabled': { cursor: 'not-allowed' },
493
592
  };
494
593
 
495
594
  addComponents(cssObj);