@i-cell/ids-styles 0.0.26 → 0.0.28

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 (19) hide show
  1. package/dist/button/button-group.css +22 -0
  2. package/dist/button/button-group.min.css +1 -0
  3. package/dist/button/button-group.plugin.js +26 -0
  4. package/dist/button/button.css +74 -74
  5. package/dist/button/button.min.css +1 -1
  6. package/dist/button/button.plugin.js +74 -74
  7. package/dist/components.css +263 -240
  8. package/dist/components.min.css +1 -1
  9. package/dist/components.plugin.js +302 -308
  10. package/dist/form-elements/message/message.css +12 -12
  11. package/dist/form-elements/message/message.min.css +1 -1
  12. package/dist/form-elements/message/message.plugin.js +12 -12
  13. package/dist/radio/radio.css +154 -154
  14. package/dist/radio/radio.min.css +1 -1
  15. package/dist/radio/radio.plugin.js +199 -222
  16. package/package.json +2 -2
  17. /package/dist/{segmented-control → segmented-control-toggle}/segmented-control-toggle.css +0 -0
  18. /package/dist/{segmented-control → segmented-control-toggle}/segmented-control-toggle.min.css +0 -0
  19. /package/dist/{segmented-control → segmented-control-toggle}/segmented-control-toggle.plugin.js +0 -0
package/dist/button/button.css CHANGED
@@ -133,7 +133,7 @@
133
133
  .ids-button.ids-button-filled.ids-button-primary:hover {
134
134
  color: var(--ids-comp-button-filled-color-fg-label-primary-hovered);
135
135
  background: var(--ids-comp-button-filled-color-bg-primary-hovered);
136
- border-color: var(--ids-comp-button-filled-color-border-primary-default);
136
+ border-color: var(--ids-comp-button-filled-color-border-primary-hovered);
137
137
  }
138
138
  .ids-button.ids-button-filled.ids-button-primary:hover > .ids-icon {
139
139
  color: var(--ids-comp-button-filled-color-fg-icon-primary-hovered);
@@ -141,7 +141,7 @@
141
141
  .ids-button.ids-button-filled.ids-button-primary:focus, .ids-button.ids-button-filled.ids-button-primary:focus-visible {
142
142
  color: var(--ids-comp-button-filled-color-fg-label-primary-focused);
143
143
  background: var(--ids-comp-button-filled-color-bg-primary-focused);
144
- border-color: var(--ids-comp-button-filled-color-border-primary-default);
144
+ border-color: var(--ids-comp-button-filled-color-border-primary-focused);
145
145
  outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
146
146
  }
147
147
  .ids-button.ids-button-filled.ids-button-primary:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-primary:focus-visible > .ids-icon {
@@ -150,7 +150,7 @@
150
150
  .ids-button.ids-button-filled.ids-button-primary:active {
151
151
  color: var(--ids-comp-button-filled-color-fg-label-primary-pressed);
152
152
  background: var(--ids-comp-button-filled-color-bg-primary-pressed);
153
- border-color: var(--ids-comp-button-filled-color-border-primary-default);
153
+ border-color: var(--ids-comp-button-filled-color-border-primary-pressed);
154
154
  }
155
155
  .ids-button.ids-button-filled.ids-button-primary:active > .ids-icon {
156
156
  color: var(--ids-comp-button-filled-color-fg-icon-primary-pressed);
@@ -158,7 +158,7 @@
158
158
  .ids-button.ids-button-filled.ids-button-primary:disabled {
159
159
  color: var(--ids-comp-button-filled-color-fg-label-primary-disabled);
160
160
  background: var(--ids-comp-button-filled-color-bg-primary-disabled);
161
- border-color: var(--ids-comp-button-filled-color-border-primary-default);
161
+ border-color: var(--ids-comp-button-filled-color-border-primary-disabled);
162
162
  }
163
163
  .ids-button.ids-button-filled.ids-button-primary:disabled > .ids-icon {
164
164
  color: var(--ids-comp-button-filled-color-fg-icon-primary-disabled);
@@ -174,7 +174,7 @@
174
174
  .ids-button.ids-button-filled.ids-button-secondary:hover {
175
175
  color: var(--ids-comp-button-filled-color-fg-label-secondary-hovered);
176
176
  background: var(--ids-comp-button-filled-color-bg-secondary-hovered);
177
- border-color: var(--ids-comp-button-filled-color-border-secondary-default);
177
+ border-color: var(--ids-comp-button-filled-color-border-secondary-hovered);
178
178
  }
179
179
  .ids-button.ids-button-filled.ids-button-secondary:hover > .ids-icon {
180
180
  color: var(--ids-comp-button-filled-color-fg-icon-secondary-hovered);
@@ -182,7 +182,7 @@
182
182
  .ids-button.ids-button-filled.ids-button-secondary:focus, .ids-button.ids-button-filled.ids-button-secondary:focus-visible {
183
183
  color: var(--ids-comp-button-filled-color-fg-label-secondary-focused);
184
184
  background: var(--ids-comp-button-filled-color-bg-secondary-focused);
185
- border-color: var(--ids-comp-button-filled-color-border-secondary-default);
185
+ border-color: var(--ids-comp-button-filled-color-border-secondary-focused);
186
186
  outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
187
187
  }
188
188
  .ids-button.ids-button-filled.ids-button-secondary:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-secondary:focus-visible > .ids-icon {
@@ -191,7 +191,7 @@
191
191
  .ids-button.ids-button-filled.ids-button-secondary:active {
192
192
  color: var(--ids-comp-button-filled-color-fg-label-secondary-pressed);
193
193
  background: var(--ids-comp-button-filled-color-bg-secondary-pressed);
194
- border-color: var(--ids-comp-button-filled-color-border-secondary-default);
194
+ border-color: var(--ids-comp-button-filled-color-border-secondary-pressed);
195
195
  }
196
196
  .ids-button.ids-button-filled.ids-button-secondary:active > .ids-icon {
197
197
  color: var(--ids-comp-button-filled-color-fg-icon-secondary-pressed);
@@ -199,7 +199,7 @@
199
199
  .ids-button.ids-button-filled.ids-button-secondary:disabled {
200
200
  color: var(--ids-comp-button-filled-color-fg-label-secondary-disabled);
201
201
  background: var(--ids-comp-button-filled-color-bg-secondary-disabled);
202
- border-color: var(--ids-comp-button-filled-color-border-secondary-default);
202
+ border-color: var(--ids-comp-button-filled-color-border-secondary-disabled);
203
203
  }
204
204
  .ids-button.ids-button-filled.ids-button-secondary:disabled > .ids-icon {
205
205
  color: var(--ids-comp-button-filled-color-fg-icon-secondary-disabled);
@@ -215,7 +215,7 @@
215
215
  .ids-button.ids-button-filled.ids-button-brand:hover {
216
216
  color: var(--ids-comp-button-filled-color-fg-label-brand-hovered);
217
217
  background: var(--ids-comp-button-filled-color-bg-brand-hovered);
218
- border-color: var(--ids-comp-button-filled-color-border-brand-default);
218
+ border-color: var(--ids-comp-button-filled-color-border-brand-hovered);
219
219
  }
220
220
  .ids-button.ids-button-filled.ids-button-brand:hover > .ids-icon {
221
221
  color: var(--ids-comp-button-filled-color-fg-icon-brand-hovered);
@@ -223,7 +223,7 @@
223
223
  .ids-button.ids-button-filled.ids-button-brand:focus, .ids-button.ids-button-filled.ids-button-brand:focus-visible {
224
224
  color: var(--ids-comp-button-filled-color-fg-label-brand-focused);
225
225
  background: var(--ids-comp-button-filled-color-bg-brand-focused);
226
- border-color: var(--ids-comp-button-filled-color-border-brand-default);
226
+ border-color: var(--ids-comp-button-filled-color-border-brand-focused);
227
227
  outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
228
228
  }
229
229
  .ids-button.ids-button-filled.ids-button-brand:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-brand:focus-visible > .ids-icon {
@@ -232,7 +232,7 @@
232
232
  .ids-button.ids-button-filled.ids-button-brand:active {
233
233
  color: var(--ids-comp-button-filled-color-fg-label-brand-pressed);
234
234
  background: var(--ids-comp-button-filled-color-bg-brand-pressed);
235
- border-color: var(--ids-comp-button-filled-color-border-brand-default);
235
+ border-color: var(--ids-comp-button-filled-color-border-brand-pressed);
236
236
  }
237
237
  .ids-button.ids-button-filled.ids-button-brand:active > .ids-icon {
238
238
  color: var(--ids-comp-button-filled-color-fg-icon-brand-pressed);
@@ -240,7 +240,7 @@
240
240
  .ids-button.ids-button-filled.ids-button-brand:disabled {
241
241
  color: var(--ids-comp-button-filled-color-fg-label-brand-disabled);
242
242
  background: var(--ids-comp-button-filled-color-bg-brand-disabled);
243
- border-color: var(--ids-comp-button-filled-color-border-brand-default);
243
+ border-color: var(--ids-comp-button-filled-color-border-brand-disabled);
244
244
  }
245
245
  .ids-button.ids-button-filled.ids-button-brand:disabled > .ids-icon {
246
246
  color: var(--ids-comp-button-filled-color-fg-icon-brand-disabled);
@@ -256,7 +256,7 @@
256
256
  .ids-button.ids-button-filled.ids-button-error:hover {
257
257
  color: var(--ids-comp-button-filled-color-fg-label-error-hovered);
258
258
  background: var(--ids-comp-button-filled-color-bg-error-hovered);
259
- border-color: var(--ids-comp-button-filled-color-border-error-default);
259
+ border-color: var(--ids-comp-button-filled-color-border-error-hovered);
260
260
  }
261
261
  .ids-button.ids-button-filled.ids-button-error:hover > .ids-icon {
262
262
  color: var(--ids-comp-button-filled-color-fg-icon-error-hovered);
@@ -264,7 +264,7 @@
264
264
  .ids-button.ids-button-filled.ids-button-error:focus, .ids-button.ids-button-filled.ids-button-error:focus-visible {
265
265
  color: var(--ids-comp-button-filled-color-fg-label-error-focused);
266
266
  background: var(--ids-comp-button-filled-color-bg-error-focused);
267
- border-color: var(--ids-comp-button-filled-color-border-error-default);
267
+ border-color: var(--ids-comp-button-filled-color-border-error-focused);
268
268
  outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
269
269
  }
270
270
  .ids-button.ids-button-filled.ids-button-error:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-error:focus-visible > .ids-icon {
@@ -273,7 +273,7 @@
273
273
  .ids-button.ids-button-filled.ids-button-error:active {
274
274
  color: var(--ids-comp-button-filled-color-fg-label-error-pressed);
275
275
  background: var(--ids-comp-button-filled-color-bg-error-pressed);
276
- border-color: var(--ids-comp-button-filled-color-border-error-default);
276
+ border-color: var(--ids-comp-button-filled-color-border-error-pressed);
277
277
  }
278
278
  .ids-button.ids-button-filled.ids-button-error:active > .ids-icon {
279
279
  color: var(--ids-comp-button-filled-color-fg-icon-error-pressed);
@@ -289,7 +289,7 @@
289
289
  .ids-button.ids-button-filled.ids-button-success:hover {
290
290
  color: var(--ids-comp-button-filled-color-fg-label-success-hovered);
291
291
  background: var(--ids-comp-button-filled-color-bg-success-hovered);
292
- border-color: var(--ids-comp-button-filled-color-border-success-default);
292
+ border-color: var(--ids-comp-button-filled-color-border-success-hovered);
293
293
  }
294
294
  .ids-button.ids-button-filled.ids-button-success:hover > .ids-icon {
295
295
  color: var(--ids-comp-button-filled-color-fg-icon-success-hovered);
@@ -297,7 +297,7 @@
297
297
  .ids-button.ids-button-filled.ids-button-success:focus, .ids-button.ids-button-filled.ids-button-success:focus-visible {
298
298
  color: var(--ids-comp-button-filled-color-fg-label-success-focused);
299
299
  background: var(--ids-comp-button-filled-color-bg-success-focused);
300
- border-color: var(--ids-comp-button-filled-color-border-success-default);
300
+ border-color: var(--ids-comp-button-filled-color-border-success-focused);
301
301
  outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
302
302
  }
303
303
  .ids-button.ids-button-filled.ids-button-success:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-success:focus-visible > .ids-icon {
@@ -306,7 +306,7 @@
306
306
  .ids-button.ids-button-filled.ids-button-success:active {
307
307
  color: var(--ids-comp-button-filled-color-fg-label-success-pressed);
308
308
  background: var(--ids-comp-button-filled-color-bg-success-pressed);
309
- border-color: var(--ids-comp-button-filled-color-border-success-default);
309
+ border-color: var(--ids-comp-button-filled-color-border-success-pressed);
310
310
  }
311
311
  .ids-button.ids-button-filled.ids-button-success:active > .ids-icon {
312
312
  color: var(--ids-comp-button-filled-color-fg-icon-success-pressed);
@@ -322,7 +322,7 @@
322
322
  .ids-button.ids-button-filled.ids-button-warning:hover {
323
323
  color: var(--ids-comp-button-filled-color-fg-label-warning-hovered);
324
324
  background: var(--ids-comp-button-filled-color-bg-warning-hovered);
325
- border-color: var(--ids-comp-button-filled-color-border-warning-default);
325
+ border-color: var(--ids-comp-button-filled-color-border-warning-hovered);
326
326
  }
327
327
  .ids-button.ids-button-filled.ids-button-warning:hover > .ids-icon {
328
328
  color: var(--ids-comp-button-filled-color-fg-icon-warning-hovered);
@@ -330,7 +330,7 @@
330
330
  .ids-button.ids-button-filled.ids-button-warning:focus, .ids-button.ids-button-filled.ids-button-warning:focus-visible {
331
331
  color: var(--ids-comp-button-filled-color-fg-label-warning-focused);
332
332
  background: var(--ids-comp-button-filled-color-bg-warning-focused);
333
- border-color: var(--ids-comp-button-filled-color-border-warning-default);
333
+ border-color: var(--ids-comp-button-filled-color-border-warning-focused);
334
334
  outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
335
335
  }
336
336
  .ids-button.ids-button-filled.ids-button-warning:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-warning:focus-visible > .ids-icon {
@@ -339,7 +339,7 @@
339
339
  .ids-button.ids-button-filled.ids-button-warning:active {
340
340
  color: var(--ids-comp-button-filled-color-fg-label-warning-pressed);
341
341
  background: var(--ids-comp-button-filled-color-bg-warning-pressed);
342
- border-color: var(--ids-comp-button-filled-color-border-warning-default);
342
+ border-color: var(--ids-comp-button-filled-color-border-warning-pressed);
343
343
  }
344
344
  .ids-button.ids-button-filled.ids-button-warning:active > .ids-icon {
345
345
  color: var(--ids-comp-button-filled-color-fg-icon-warning-pressed);
@@ -355,7 +355,7 @@
355
355
  .ids-button.ids-button-filled.ids-button-light:hover {
356
356
  color: var(--ids-comp-button-filled-color-fg-label-light-hovered);
357
357
  background: var(--ids-comp-button-filled-color-bg-light-hovered);
358
- border-color: var(--ids-comp-button-filled-color-border-light-default);
358
+ border-color: var(--ids-comp-button-filled-color-border-light-hovered);
359
359
  }
360
360
  .ids-button.ids-button-filled.ids-button-light:hover > .ids-icon {
361
361
  color: var(--ids-comp-button-filled-color-fg-icon-light-hovered);
@@ -363,7 +363,7 @@
363
363
  .ids-button.ids-button-filled.ids-button-light:focus, .ids-button.ids-button-filled.ids-button-light:focus-visible {
364
364
  color: var(--ids-comp-button-filled-color-fg-label-light-focused);
365
365
  background: var(--ids-comp-button-filled-color-bg-light-focused);
366
- border-color: var(--ids-comp-button-filled-color-border-light-default);
366
+ border-color: var(--ids-comp-button-filled-color-border-light-focused);
367
367
  outline-color: var(--ids-comp-button-focused-outline-color-light-focused);
368
368
  }
369
369
  .ids-button.ids-button-filled.ids-button-light:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-light:focus-visible > .ids-icon {
@@ -372,7 +372,7 @@
372
372
  .ids-button.ids-button-filled.ids-button-light:active {
373
373
  color: var(--ids-comp-button-filled-color-fg-label-light-pressed);
374
374
  background: var(--ids-comp-button-filled-color-bg-light-pressed);
375
- border-color: var(--ids-comp-button-filled-color-border-light-default);
375
+ border-color: var(--ids-comp-button-filled-color-border-light-pressed);
376
376
  }
377
377
  .ids-button.ids-button-filled.ids-button-light:active > .ids-icon {
378
378
  color: var(--ids-comp-button-filled-color-fg-icon-light-pressed);
@@ -380,7 +380,7 @@
380
380
  .ids-button.ids-button-filled.ids-button-light:disabled {
381
381
  color: var(--ids-comp-button-filled-color-fg-label-light-disabled);
382
382
  background: var(--ids-comp-button-filled-color-bg-light-disabled);
383
- border-color: var(--ids-comp-button-filled-color-border-light-default);
383
+ border-color: var(--ids-comp-button-filled-color-border-light-disabled);
384
384
  }
385
385
  .ids-button.ids-button-filled.ids-button-light:disabled > .ids-icon {
386
386
  color: var(--ids-comp-button-filled-color-fg-icon-light-disabled);
@@ -396,7 +396,7 @@
396
396
  .ids-button.ids-button-filled.ids-button-light-fixed:hover {
397
397
  color: var(--ids-comp-button-filled-color-fg-label-light-fixed-hovered);
398
398
  background: var(--ids-comp-button-filled-color-bg-light-fixed-hovered);
399
- border-color: var(--ids-comp-button-filled-color-border-light-fixed-default);
399
+ border-color: var(--ids-comp-button-filled-color-border-light-fixed-hovered);
400
400
  }
401
401
  .ids-button.ids-button-filled.ids-button-light-fixed:hover > .ids-icon {
402
402
  color: var(--ids-comp-button-filled-color-fg-icon-light-fixed-hovered);
@@ -404,7 +404,7 @@
404
404
  .ids-button.ids-button-filled.ids-button-light-fixed:focus, .ids-button.ids-button-filled.ids-button-light-fixed:focus-visible {
405
405
  color: var(--ids-comp-button-filled-color-fg-label-light-fixed-focused);
406
406
  background: var(--ids-comp-button-filled-color-bg-light-fixed-focused);
407
- border-color: var(--ids-comp-button-filled-color-border-light-fixed-default);
407
+ border-color: var(--ids-comp-button-filled-color-border-light-fixed-focused);
408
408
  outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
409
409
  }
410
410
  .ids-button.ids-button-filled.ids-button-light-fixed:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-light-fixed:focus-visible > .ids-icon {
@@ -413,7 +413,7 @@
413
413
  .ids-button.ids-button-filled.ids-button-light-fixed:active {
414
414
  color: var(--ids-comp-button-filled-color-fg-label-light-fixed-pressed);
415
415
  background: var(--ids-comp-button-filled-color-bg-light-fixed-pressed);
416
- border-color: var(--ids-comp-button-filled-color-border-light-fixed-default);
416
+ border-color: var(--ids-comp-button-filled-color-border-light-fixed-pressed);
417
417
  }
418
418
  .ids-button.ids-button-filled.ids-button-light-fixed:active > .ids-icon {
419
419
  color: var(--ids-comp-button-filled-color-fg-icon-light-fixed-pressed);
@@ -421,7 +421,7 @@
421
421
  .ids-button.ids-button-filled.ids-button-light-fixed:disabled {
422
422
  color: var(--ids-comp-button-filled-color-fg-label-light-fixed-disabled);
423
423
  background: var(--ids-comp-button-filled-color-bg-light-fixed-disabled);
424
- border-color: var(--ids-comp-button-filled-color-border-light-fixed-default);
424
+ border-color: var(--ids-comp-button-filled-color-border-light-fixed-disabled);
425
425
  }
426
426
  .ids-button.ids-button-filled.ids-button-light-fixed:disabled > .ids-icon {
427
427
  color: var(--ids-comp-button-filled-color-fg-icon-light-fixed-disabled);
@@ -437,7 +437,7 @@
437
437
  .ids-button.ids-button-filled.ids-button-dark:hover {
438
438
  color: var(--ids-comp-button-filled-color-fg-label-dark-hovered);
439
439
  background: var(--ids-comp-button-filled-color-bg-dark-hovered);
440
- border-color: var(--ids-comp-button-filled-color-border-dark-default);
440
+ border-color: var(--ids-comp-button-filled-color-border-dark-hovered);
441
441
  }
442
442
  .ids-button.ids-button-filled.ids-button-dark:hover > .ids-icon {
443
443
  color: var(--ids-comp-button-filled-color-fg-icon-dark-hovered);
@@ -445,7 +445,7 @@
445
445
  .ids-button.ids-button-filled.ids-button-dark:focus, .ids-button.ids-button-filled.ids-button-dark:focus-visible {
446
446
  color: var(--ids-comp-button-filled-color-fg-label-dark-focused);
447
447
  background: var(--ids-comp-button-filled-color-bg-dark-focused);
448
- border-color: var(--ids-comp-button-filled-color-border-dark-default);
448
+ border-color: var(--ids-comp-button-filled-color-border-dark-focused);
449
449
  outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
450
450
  }
451
451
  .ids-button.ids-button-filled.ids-button-dark:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-dark:focus-visible > .ids-icon {
@@ -454,7 +454,7 @@
454
454
  .ids-button.ids-button-filled.ids-button-dark:active {
455
455
  color: var(--ids-comp-button-filled-color-fg-label-dark-pressed);
456
456
  background: var(--ids-comp-button-filled-color-bg-dark-pressed);
457
- border-color: var(--ids-comp-button-filled-color-border-dark-default);
457
+ border-color: var(--ids-comp-button-filled-color-border-dark-pressed);
458
458
  }
459
459
  .ids-button.ids-button-filled.ids-button-dark:active > .ids-icon {
460
460
  color: var(--ids-comp-button-filled-color-fg-icon-dark-pressed);
@@ -462,7 +462,7 @@
462
462
  .ids-button.ids-button-filled.ids-button-dark:disabled {
463
463
  color: var(--ids-comp-button-filled-color-fg-label-dark-disabled);
464
464
  background: var(--ids-comp-button-filled-color-bg-dark-disabled);
465
- border-color: var(--ids-comp-button-filled-color-border-dark-default);
465
+ border-color: var(--ids-comp-button-filled-color-border-dark-disabled);
466
466
  }
467
467
  .ids-button.ids-button-filled.ids-button-dark:disabled > .ids-icon {
468
468
  color: var(--ids-comp-button-filled-color-fg-icon-dark-disabled);
@@ -478,7 +478,7 @@
478
478
  .ids-button.ids-button-filled.ids-button-surface:hover {
479
479
  color: var(--ids-comp-button-filled-color-fg-label-surface-hovered);
480
480
  background: var(--ids-comp-button-filled-color-bg-surface-hovered);
481
- border-color: var(--ids-comp-button-filled-color-border-surface-default);
481
+ border-color: var(--ids-comp-button-filled-color-border-surface-hovered);
482
482
  }
483
483
  .ids-button.ids-button-filled.ids-button-surface:hover > .ids-icon {
484
484
  color: var(--ids-comp-button-filled-color-fg-icon-surface-hovered);
@@ -486,7 +486,7 @@
486
486
  .ids-button.ids-button-filled.ids-button-surface:focus, .ids-button.ids-button-filled.ids-button-surface:focus-visible {
487
487
  color: var(--ids-comp-button-filled-color-fg-label-surface-focused);
488
488
  background: var(--ids-comp-button-filled-color-bg-surface-focused);
489
- border-color: var(--ids-comp-button-filled-color-border-surface-default);
489
+ border-color: var(--ids-comp-button-filled-color-border-surface-focused);
490
490
  outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
491
491
  }
492
492
  .ids-button.ids-button-filled.ids-button-surface:focus > .ids-icon, .ids-button.ids-button-filled.ids-button-surface:focus-visible > .ids-icon {
@@ -495,7 +495,7 @@
495
495
  .ids-button.ids-button-filled.ids-button-surface:active {
496
496
  color: var(--ids-comp-button-filled-color-fg-label-surface-pressed);
497
497
  background: var(--ids-comp-button-filled-color-bg-surface-pressed);
498
- border-color: var(--ids-comp-button-filled-color-border-surface-default);
498
+ border-color: var(--ids-comp-button-filled-color-border-surface-pressed);
499
499
  }
500
500
  .ids-button.ids-button-filled.ids-button-surface:active > .ids-icon {
501
501
  color: var(--ids-comp-button-filled-color-fg-icon-surface-pressed);
@@ -503,7 +503,7 @@
503
503
  .ids-button.ids-button-filled.ids-button-surface:disabled {
504
504
  color: var(--ids-comp-button-filled-color-fg-label-surface-disabled);
505
505
  background: var(--ids-comp-button-filled-color-bg-surface-disabled);
506
- border-color: var(--ids-comp-button-filled-color-border-surface-default);
506
+ border-color: var(--ids-comp-button-filled-color-border-surface-disabled);
507
507
  }
508
508
  .ids-button.ids-button-filled.ids-button-surface:disabled > .ids-icon {
509
509
  color: var(--ids-comp-button-filled-color-fg-icon-surface-disabled);
@@ -519,7 +519,7 @@
519
519
  .ids-button.ids-button-outlined.ids-button-primary:hover {
520
520
  color: var(--ids-comp-button-outlined-color-fg-label-primary-hovered);
521
521
  background: var(--ids-comp-button-outlined-color-bg-primary-hovered);
522
- border-color: var(--ids-comp-button-outlined-color-border-primary-default);
522
+ border-color: var(--ids-comp-button-outlined-color-border-primary-hovered);
523
523
  }
524
524
  .ids-button.ids-button-outlined.ids-button-primary:hover > .ids-icon {
525
525
  color: var(--ids-comp-button-outlined-color-fg-icon-primary-hovered);
@@ -527,7 +527,7 @@
527
527
  .ids-button.ids-button-outlined.ids-button-primary:focus, .ids-button.ids-button-outlined.ids-button-primary:focus-visible {
528
528
  color: var(--ids-comp-button-outlined-color-fg-label-primary-focused);
529
529
  background: var(--ids-comp-button-outlined-color-bg-primary-focused);
530
- border-color: var(--ids-comp-button-outlined-color-border-primary-default);
530
+ border-color: var(--ids-comp-button-outlined-color-border-primary-focused);
531
531
  outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
532
532
  }
533
533
  .ids-button.ids-button-outlined.ids-button-primary:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-primary:focus-visible > .ids-icon {
@@ -536,7 +536,7 @@
536
536
  .ids-button.ids-button-outlined.ids-button-primary:active {
537
537
  color: var(--ids-comp-button-outlined-color-fg-label-primary-pressed);
538
538
  background: var(--ids-comp-button-outlined-color-bg-primary-pressed);
539
- border-color: var(--ids-comp-button-outlined-color-border-primary-default);
539
+ border-color: var(--ids-comp-button-outlined-color-border-primary-pressed);
540
540
  }
541
541
  .ids-button.ids-button-outlined.ids-button-primary:active > .ids-icon {
542
542
  color: var(--ids-comp-button-outlined-color-fg-icon-primary-pressed);
@@ -544,7 +544,7 @@
544
544
  .ids-button.ids-button-outlined.ids-button-primary:disabled {
545
545
  color: var(--ids-comp-button-outlined-color-fg-label-primary-disabled);
546
546
  background: var(--ids-comp-button-outlined-color-bg-primary-disabled);
547
- border-color: var(--ids-comp-button-outlined-color-border-primary-default);
547
+ border-color: var(--ids-comp-button-outlined-color-border-primary-disabled);
548
548
  }
549
549
  .ids-button.ids-button-outlined.ids-button-primary:disabled > .ids-icon {
550
550
  color: var(--ids-comp-button-outlined-color-fg-icon-primary-disabled);
@@ -560,7 +560,7 @@
560
560
  .ids-button.ids-button-outlined.ids-button-secondary:hover {
561
561
  color: var(--ids-comp-button-outlined-color-fg-label-secondary-hovered);
562
562
  background: var(--ids-comp-button-outlined-color-bg-secondary-hovered);
563
- border-color: var(--ids-comp-button-outlined-color-border-secondary-default);
563
+ border-color: var(--ids-comp-button-outlined-color-border-secondary-hovered);
564
564
  }
565
565
  .ids-button.ids-button-outlined.ids-button-secondary:hover > .ids-icon {
566
566
  color: var(--ids-comp-button-outlined-color-fg-icon-secondary-hovered);
@@ -568,7 +568,7 @@
568
568
  .ids-button.ids-button-outlined.ids-button-secondary:focus, .ids-button.ids-button-outlined.ids-button-secondary:focus-visible {
569
569
  color: var(--ids-comp-button-outlined-color-fg-label-secondary-focused);
570
570
  background: var(--ids-comp-button-outlined-color-bg-secondary-focused);
571
- border-color: var(--ids-comp-button-outlined-color-border-secondary-default);
571
+ border-color: var(--ids-comp-button-outlined-color-border-secondary-focused);
572
572
  outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
573
573
  }
574
574
  .ids-button.ids-button-outlined.ids-button-secondary:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-secondary:focus-visible > .ids-icon {
@@ -577,7 +577,7 @@
577
577
  .ids-button.ids-button-outlined.ids-button-secondary:active {
578
578
  color: var(--ids-comp-button-outlined-color-fg-label-secondary-pressed);
579
579
  background: var(--ids-comp-button-outlined-color-bg-secondary-pressed);
580
- border-color: var(--ids-comp-button-outlined-color-border-secondary-default);
580
+ border-color: var(--ids-comp-button-outlined-color-border-secondary-pressed);
581
581
  }
582
582
  .ids-button.ids-button-outlined.ids-button-secondary:active > .ids-icon {
583
583
  color: var(--ids-comp-button-outlined-color-fg-icon-secondary-pressed);
@@ -585,7 +585,7 @@
585
585
  .ids-button.ids-button-outlined.ids-button-secondary:disabled {
586
586
  color: var(--ids-comp-button-outlined-color-fg-label-secondary-disabled);
587
587
  background: var(--ids-comp-button-outlined-color-bg-secondary-disabled);
588
- border-color: var(--ids-comp-button-outlined-color-border-secondary-default);
588
+ border-color: var(--ids-comp-button-outlined-color-border-secondary-disabled);
589
589
  }
590
590
  .ids-button.ids-button-outlined.ids-button-secondary:disabled > .ids-icon {
591
591
  color: var(--ids-comp-button-outlined-color-fg-icon-secondary-disabled);
@@ -601,7 +601,7 @@
601
601
  .ids-button.ids-button-outlined.ids-button-brand:hover {
602
602
  color: var(--ids-comp-button-outlined-color-fg-label-brand-hovered);
603
603
  background: var(--ids-comp-button-outlined-color-bg-brand-hovered);
604
- border-color: var(--ids-comp-button-outlined-color-border-brand-default);
604
+ border-color: var(--ids-comp-button-outlined-color-border-brand-hovered);
605
605
  }
606
606
  .ids-button.ids-button-outlined.ids-button-brand:hover > .ids-icon {
607
607
  color: var(--ids-comp-button-outlined-color-fg-icon-brand-hovered);
@@ -609,7 +609,7 @@
609
609
  .ids-button.ids-button-outlined.ids-button-brand:focus, .ids-button.ids-button-outlined.ids-button-brand:focus-visible {
610
610
  color: var(--ids-comp-button-outlined-color-fg-label-brand-focused);
611
611
  background: var(--ids-comp-button-outlined-color-bg-brand-focused);
612
- border-color: var(--ids-comp-button-outlined-color-border-brand-default);
612
+ border-color: var(--ids-comp-button-outlined-color-border-brand-focused);
613
613
  outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
614
614
  }
615
615
  .ids-button.ids-button-outlined.ids-button-brand:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-brand:focus-visible > .ids-icon {
@@ -618,7 +618,7 @@
618
618
  .ids-button.ids-button-outlined.ids-button-brand:active {
619
619
  color: var(--ids-comp-button-outlined-color-fg-label-brand-pressed);
620
620
  background: var(--ids-comp-button-outlined-color-bg-brand-pressed);
621
- border-color: var(--ids-comp-button-outlined-color-border-brand-default);
621
+ border-color: var(--ids-comp-button-outlined-color-border-brand-pressed);
622
622
  }
623
623
  .ids-button.ids-button-outlined.ids-button-brand:active > .ids-icon {
624
624
  color: var(--ids-comp-button-outlined-color-fg-icon-brand-pressed);
@@ -626,7 +626,7 @@
626
626
  .ids-button.ids-button-outlined.ids-button-brand:disabled {
627
627
  color: var(--ids-comp-button-outlined-color-fg-label-brand-disabled);
628
628
  background: var(--ids-comp-button-outlined-color-bg-brand-disabled);
629
- border-color: var(--ids-comp-button-outlined-color-border-brand-default);
629
+ border-color: var(--ids-comp-button-outlined-color-border-brand-disabled);
630
630
  }
631
631
  .ids-button.ids-button-outlined.ids-button-brand:disabled > .ids-icon {
632
632
  color: var(--ids-comp-button-outlined-color-fg-icon-brand-disabled);
@@ -642,7 +642,7 @@
642
642
  .ids-button.ids-button-outlined.ids-button-error:hover {
643
643
  color: var(--ids-comp-button-outlined-color-fg-label-error-hovered);
644
644
  background: var(--ids-comp-button-outlined-color-bg-error-hovered);
645
- border-color: var(--ids-comp-button-outlined-color-border-error-default);
645
+ border-color: var(--ids-comp-button-outlined-color-border-error-hovered);
646
646
  }
647
647
  .ids-button.ids-button-outlined.ids-button-error:hover > .ids-icon {
648
648
  color: var(--ids-comp-button-outlined-color-fg-icon-error-hovered);
@@ -650,7 +650,7 @@
650
650
  .ids-button.ids-button-outlined.ids-button-error:focus, .ids-button.ids-button-outlined.ids-button-error:focus-visible {
651
651
  color: var(--ids-comp-button-outlined-color-fg-label-error-focused);
652
652
  background: var(--ids-comp-button-outlined-color-bg-error-focused);
653
- border-color: var(--ids-comp-button-outlined-color-border-error-default);
653
+ border-color: var(--ids-comp-button-outlined-color-border-error-focused);
654
654
  outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
655
655
  }
656
656
  .ids-button.ids-button-outlined.ids-button-error:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-error:focus-visible > .ids-icon {
@@ -659,7 +659,7 @@
659
659
  .ids-button.ids-button-outlined.ids-button-error:active {
660
660
  color: var(--ids-comp-button-outlined-color-fg-label-error-pressed);
661
661
  background: var(--ids-comp-button-outlined-color-bg-error-pressed);
662
- border-color: var(--ids-comp-button-outlined-color-border-error-default);
662
+ border-color: var(--ids-comp-button-outlined-color-border-error-pressed);
663
663
  }
664
664
  .ids-button.ids-button-outlined.ids-button-error:active > .ids-icon {
665
665
  color: var(--ids-comp-button-outlined-color-fg-icon-error-pressed);
@@ -675,7 +675,7 @@
675
675
  .ids-button.ids-button-outlined.ids-button-success:hover {
676
676
  color: var(--ids-comp-button-outlined-color-fg-label-success-hovered);
677
677
  background: var(--ids-comp-button-outlined-color-bg-success-hovered);
678
- border-color: var(--ids-comp-button-outlined-color-border-success-default);
678
+ border-color: var(--ids-comp-button-outlined-color-border-success-hovered);
679
679
  }
680
680
  .ids-button.ids-button-outlined.ids-button-success:hover > .ids-icon {
681
681
  color: var(--ids-comp-button-outlined-color-fg-icon-success-hovered);
@@ -683,7 +683,7 @@
683
683
  .ids-button.ids-button-outlined.ids-button-success:focus, .ids-button.ids-button-outlined.ids-button-success:focus-visible {
684
684
  color: var(--ids-comp-button-outlined-color-fg-label-success-focused);
685
685
  background: var(--ids-comp-button-outlined-color-bg-success-focused);
686
- border-color: var(--ids-comp-button-outlined-color-border-success-default);
686
+ border-color: var(--ids-comp-button-outlined-color-border-success-focused);
687
687
  outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
688
688
  }
689
689
  .ids-button.ids-button-outlined.ids-button-success:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-success:focus-visible > .ids-icon {
@@ -692,7 +692,7 @@
692
692
  .ids-button.ids-button-outlined.ids-button-success:active {
693
693
  color: var(--ids-comp-button-outlined-color-fg-label-success-pressed);
694
694
  background: var(--ids-comp-button-outlined-color-bg-success-pressed);
695
- border-color: var(--ids-comp-button-outlined-color-border-success-default);
695
+ border-color: var(--ids-comp-button-outlined-color-border-success-pressed);
696
696
  }
697
697
  .ids-button.ids-button-outlined.ids-button-success:active > .ids-icon {
698
698
  color: var(--ids-comp-button-outlined-color-fg-icon-success-pressed);
@@ -708,7 +708,7 @@
708
708
  .ids-button.ids-button-outlined.ids-button-warning:hover {
709
709
  color: var(--ids-comp-button-outlined-color-fg-label-warning-hovered);
710
710
  background: var(--ids-comp-button-outlined-color-bg-warning-hovered);
711
- border-color: var(--ids-comp-button-outlined-color-border-warning-default);
711
+ border-color: var(--ids-comp-button-outlined-color-border-warning-hovered);
712
712
  }
713
713
  .ids-button.ids-button-outlined.ids-button-warning:hover > .ids-icon {
714
714
  color: var(--ids-comp-button-outlined-color-fg-icon-warning-hovered);
@@ -716,7 +716,7 @@
716
716
  .ids-button.ids-button-outlined.ids-button-warning:focus, .ids-button.ids-button-outlined.ids-button-warning:focus-visible {
717
717
  color: var(--ids-comp-button-outlined-color-fg-label-warning-focused);
718
718
  background: var(--ids-comp-button-outlined-color-bg-warning-focused);
719
- border-color: var(--ids-comp-button-outlined-color-border-warning-default);
719
+ border-color: var(--ids-comp-button-outlined-color-border-warning-focused);
720
720
  outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
721
721
  }
722
722
  .ids-button.ids-button-outlined.ids-button-warning:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-warning:focus-visible > .ids-icon {
@@ -725,7 +725,7 @@
725
725
  .ids-button.ids-button-outlined.ids-button-warning:active {
726
726
  color: var(--ids-comp-button-outlined-color-fg-label-warning-pressed);
727
727
  background: var(--ids-comp-button-outlined-color-bg-warning-pressed);
728
- border-color: var(--ids-comp-button-outlined-color-border-warning-default);
728
+ border-color: var(--ids-comp-button-outlined-color-border-warning-pressed);
729
729
  }
730
730
  .ids-button.ids-button-outlined.ids-button-warning:active > .ids-icon {
731
731
  color: var(--ids-comp-button-outlined-color-fg-icon-warning-pressed);
@@ -741,7 +741,7 @@
741
741
  .ids-button.ids-button-outlined.ids-button-light:hover {
742
742
  color: var(--ids-comp-button-outlined-color-fg-label-light-hovered);
743
743
  background: var(--ids-comp-button-outlined-color-bg-light-hovered);
744
- border-color: var(--ids-comp-button-outlined-color-border-light-default);
744
+ border-color: var(--ids-comp-button-outlined-color-border-light-hovered);
745
745
  }
746
746
  .ids-button.ids-button-outlined.ids-button-light:hover > .ids-icon {
747
747
  color: var(--ids-comp-button-outlined-color-fg-icon-light-hovered);
@@ -749,7 +749,7 @@
749
749
  .ids-button.ids-button-outlined.ids-button-light:focus, .ids-button.ids-button-outlined.ids-button-light:focus-visible {
750
750
  color: var(--ids-comp-button-outlined-color-fg-label-light-focused);
751
751
  background: var(--ids-comp-button-outlined-color-bg-light-focused);
752
- border-color: var(--ids-comp-button-outlined-color-border-light-default);
752
+ border-color: var(--ids-comp-button-outlined-color-border-light-focused);
753
753
  outline-color: var(--ids-comp-button-focused-outline-color-light-focused);
754
754
  }
755
755
  .ids-button.ids-button-outlined.ids-button-light:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-light:focus-visible > .ids-icon {
@@ -758,7 +758,7 @@
758
758
  .ids-button.ids-button-outlined.ids-button-light:active {
759
759
  color: var(--ids-comp-button-outlined-color-fg-label-light-pressed);
760
760
  background: var(--ids-comp-button-outlined-color-bg-light-pressed);
761
- border-color: var(--ids-comp-button-outlined-color-border-light-default);
761
+ border-color: var(--ids-comp-button-outlined-color-border-light-pressed);
762
762
  }
763
763
  .ids-button.ids-button-outlined.ids-button-light:active > .ids-icon {
764
764
  color: var(--ids-comp-button-outlined-color-fg-icon-light-pressed);
@@ -766,7 +766,7 @@
766
766
  .ids-button.ids-button-outlined.ids-button-light:disabled {
767
767
  color: var(--ids-comp-button-outlined-color-fg-label-light-disabled);
768
768
  background: var(--ids-comp-button-outlined-color-bg-light-disabled);
769
- border-color: var(--ids-comp-button-outlined-color-border-light-default);
769
+ border-color: var(--ids-comp-button-outlined-color-border-light-disabled);
770
770
  }
771
771
  .ids-button.ids-button-outlined.ids-button-light:disabled > .ids-icon {
772
772
  color: var(--ids-comp-button-outlined-color-fg-icon-light-disabled);
@@ -782,7 +782,7 @@
782
782
  .ids-button.ids-button-outlined.ids-button-light-fixed:hover {
783
783
  color: var(--ids-comp-button-outlined-color-fg-label-light-fixed-hovered);
784
784
  background: var(--ids-comp-button-outlined-color-bg-light-fixed-hovered);
785
- border-color: var(--ids-comp-button-outlined-color-border-light-fixed-default);
785
+ border-color: var(--ids-comp-button-outlined-color-border-light-fixed-hovered);
786
786
  }
787
787
  .ids-button.ids-button-outlined.ids-button-light-fixed:hover > .ids-icon {
788
788
  color: var(--ids-comp-button-outlined-color-fg-icon-light-fixed-hovered);
@@ -790,7 +790,7 @@
790
790
  .ids-button.ids-button-outlined.ids-button-light-fixed:focus, .ids-button.ids-button-outlined.ids-button-light-fixed:focus-visible {
791
791
  color: var(--ids-comp-button-outlined-color-fg-label-light-fixed-focused);
792
792
  background: var(--ids-comp-button-outlined-color-bg-light-fixed-focused);
793
- border-color: var(--ids-comp-button-outlined-color-border-light-fixed-default);
793
+ border-color: var(--ids-comp-button-outlined-color-border-light-fixed-focused);
794
794
  outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
795
795
  }
796
796
  .ids-button.ids-button-outlined.ids-button-light-fixed:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-light-fixed:focus-visible > .ids-icon {
@@ -799,7 +799,7 @@
799
799
  .ids-button.ids-button-outlined.ids-button-light-fixed:active {
800
800
  color: var(--ids-comp-button-outlined-color-fg-label-light-fixed-pressed);
801
801
  background: var(--ids-comp-button-outlined-color-bg-light-fixed-pressed);
802
- border-color: var(--ids-comp-button-outlined-color-border-light-fixed-default);
802
+ border-color: var(--ids-comp-button-outlined-color-border-light-fixed-pressed);
803
803
  }
804
804
  .ids-button.ids-button-outlined.ids-button-light-fixed:active > .ids-icon {
805
805
  color: var(--ids-comp-button-outlined-color-fg-icon-light-fixed-pressed);
@@ -807,7 +807,7 @@
807
807
  .ids-button.ids-button-outlined.ids-button-light-fixed:disabled {
808
808
  color: var(--ids-comp-button-outlined-color-fg-label-light-fixed-disabled);
809
809
  background: var(--ids-comp-button-outlined-color-bg-light-fixed-disabled);
810
- border-color: var(--ids-comp-button-outlined-color-border-light-fixed-default);
810
+ border-color: var(--ids-comp-button-outlined-color-border-light-fixed-disabled);
811
811
  }
812
812
  .ids-button.ids-button-outlined.ids-button-light-fixed:disabled > .ids-icon {
813
813
  color: var(--ids-comp-button-outlined-color-fg-icon-light-fixed-disabled);
@@ -823,7 +823,7 @@
823
823
  .ids-button.ids-button-outlined.ids-button-dark:hover {
824
824
  color: var(--ids-comp-button-outlined-color-fg-label-dark-hovered);
825
825
  background: var(--ids-comp-button-outlined-color-bg-dark-hovered);
826
- border-color: var(--ids-comp-button-outlined-color-border-dark-default);
826
+ border-color: var(--ids-comp-button-outlined-color-border-dark-hovered);
827
827
  }
828
828
  .ids-button.ids-button-outlined.ids-button-dark:hover > .ids-icon {
829
829
  color: var(--ids-comp-button-outlined-color-fg-icon-dark-hovered);
@@ -831,7 +831,7 @@
831
831
  .ids-button.ids-button-outlined.ids-button-dark:focus, .ids-button.ids-button-outlined.ids-button-dark:focus-visible {
832
832
  color: var(--ids-comp-button-outlined-color-fg-label-dark-focused);
833
833
  background: var(--ids-comp-button-outlined-color-bg-dark-focused);
834
- border-color: var(--ids-comp-button-outlined-color-border-dark-default);
834
+ border-color: var(--ids-comp-button-outlined-color-border-dark-focused);
835
835
  outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
836
836
  }
837
837
  .ids-button.ids-button-outlined.ids-button-dark:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-dark:focus-visible > .ids-icon {
@@ -840,7 +840,7 @@
840
840
  .ids-button.ids-button-outlined.ids-button-dark:active {
841
841
  color: var(--ids-comp-button-outlined-color-fg-label-dark-pressed);
842
842
  background: var(--ids-comp-button-outlined-color-bg-dark-pressed);
843
- border-color: var(--ids-comp-button-outlined-color-border-dark-default);
843
+ border-color: var(--ids-comp-button-outlined-color-border-dark-pressed);
844
844
  }
845
845
  .ids-button.ids-button-outlined.ids-button-dark:active > .ids-icon {
846
846
  color: var(--ids-comp-button-outlined-color-fg-icon-dark-pressed);
@@ -848,7 +848,7 @@
848
848
  .ids-button.ids-button-outlined.ids-button-dark:disabled {
849
849
  color: var(--ids-comp-button-outlined-color-fg-label-dark-disabled);
850
850
  background: var(--ids-comp-button-outlined-color-bg-dark-disabled);
851
- border-color: var(--ids-comp-button-outlined-color-border-dark-default);
851
+ border-color: var(--ids-comp-button-outlined-color-border-dark-disabled);
852
852
  }
853
853
  .ids-button.ids-button-outlined.ids-button-dark:disabled > .ids-icon {
854
854
  color: var(--ids-comp-button-outlined-color-fg-icon-dark-disabled);
@@ -864,7 +864,7 @@
864
864
  .ids-button.ids-button-outlined.ids-button-surface:hover {
865
865
  color: var(--ids-comp-button-outlined-color-fg-label-surface-hovered);
866
866
  background: var(--ids-comp-button-outlined-color-bg-surface-hovered);
867
- border-color: var(--ids-comp-button-outlined-color-border-surface-default);
867
+ border-color: var(--ids-comp-button-outlined-color-border-surface-hovered);
868
868
  }
869
869
  .ids-button.ids-button-outlined.ids-button-surface:hover > .ids-icon {
870
870
  color: var(--ids-comp-button-outlined-color-fg-icon-surface-hovered);
@@ -872,7 +872,7 @@
872
872
  .ids-button.ids-button-outlined.ids-button-surface:focus, .ids-button.ids-button-outlined.ids-button-surface:focus-visible {
873
873
  color: var(--ids-comp-button-outlined-color-fg-label-surface-focused);
874
874
  background: var(--ids-comp-button-outlined-color-bg-surface-focused);
875
- border-color: var(--ids-comp-button-outlined-color-border-surface-default);
875
+ border-color: var(--ids-comp-button-outlined-color-border-surface-focused);
876
876
  outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
877
877
  }
878
878
  .ids-button.ids-button-outlined.ids-button-surface:focus > .ids-icon, .ids-button.ids-button-outlined.ids-button-surface:focus-visible > .ids-icon {
@@ -881,7 +881,7 @@
881
881
  .ids-button.ids-button-outlined.ids-button-surface:active {
882
882
  color: var(--ids-comp-button-outlined-color-fg-label-surface-pressed);
883
883
  background: var(--ids-comp-button-outlined-color-bg-surface-pressed);
884
- border-color: var(--ids-comp-button-outlined-color-border-surface-default);
884
+ border-color: var(--ids-comp-button-outlined-color-border-surface-pressed);
885
885
  }
886
886
  .ids-button.ids-button-outlined.ids-button-surface:active > .ids-icon {
887
887
  color: var(--ids-comp-button-outlined-color-fg-icon-surface-pressed);
@@ -889,7 +889,7 @@
889
889
  .ids-button.ids-button-outlined.ids-button-surface:disabled {
890
890
  color: var(--ids-comp-button-outlined-color-fg-label-surface-disabled);
891
891
  background: var(--ids-comp-button-outlined-color-bg-surface-disabled);
892
- border-color: var(--ids-comp-button-outlined-color-border-surface-default);
892
+ border-color: var(--ids-comp-button-outlined-color-border-surface-disabled);
893
893
  }
894
894
  .ids-button.ids-button-outlined.ids-button-surface:disabled > .ids-icon {
895
895
  color: var(--ids-comp-button-outlined-color-fg-icon-surface-disabled);