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