@i-cell/ids-styles 0.0.25 → 0.0.27

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 (25) 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 +267 -507
  8. package/dist/components.min.css +1 -1
  9. package/dist/components.plugin.js +306 -560
  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/dist/segmented-control/segmented-control-toggle.css +117 -228
  17. package/dist/segmented-control/segmented-control-toggle.min.css +1 -1
  18. package/dist/segmented-control/segmented-control-toggle.plugin.js +206 -334
  19. package/dist/segmented-control/segmented-control.css +4 -267
  20. package/dist/segmented-control/segmented-control.min.css +1 -1
  21. package/dist/segmented-control/segmented-control.plugin.js +4 -252
  22. package/dist/segmented-control-toggle/segmented-control-toggle.css +563 -0
  23. package/dist/segmented-control-toggle/segmented-control-toggle.min.css +1 -0
  24. package/dist/segmented-control-toggle/segmented-control-toggle.plugin.js +558 -0
  25. package/package.json +2 -2
package/dist/button/button.plugin.js CHANGED
@@ -118,7 +118,7 @@ module.exports = function ButtonPlugin() {
118
118
  '.ids-button.ids-button-filled.ids-button-primary:hover': {
119
119
  color: 'var(--ids-comp-button-filled-color-fg-label-primary-hovered)',
120
120
  background: 'var(--ids-comp-button-filled-color-bg-primary-hovered)',
121
- borderColor: 'var(--ids-comp-button-filled-color-border-primary-default)',
121
+ borderColor: 'var(--ids-comp-button-filled-color-border-primary-hovered)',
122
122
  },
123
123
  '.ids-button.ids-button-filled.ids-button-primary:hover>.ids-icon': {
124
124
  color: 'var(--ids-comp-button-filled-color-fg-icon-primary-hovered)',
@@ -126,7 +126,7 @@ module.exports = function ButtonPlugin() {
126
126
  '.ids-button.ids-button-filled.ids-button-primary:focus,.ids-button.ids-button-filled.ids-button-primary:focus-visible': {
127
127
  color: 'var(--ids-comp-button-filled-color-fg-label-primary-focused)',
128
128
  background: 'var(--ids-comp-button-filled-color-bg-primary-focused)',
129
- borderColor: 'var(--ids-comp-button-filled-color-border-primary-default)',
129
+ borderColor: 'var(--ids-comp-button-filled-color-border-primary-focused)',
130
130
  outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
131
131
  },
132
132
  '.ids-button.ids-button-filled.ids-button-primary:focus>.ids-icon,.ids-button.ids-button-filled.ids-button-primary:focus-visible>.ids-icon':
@@ -134,7 +134,7 @@ module.exports = function ButtonPlugin() {
134
134
  '.ids-button.ids-button-filled.ids-button-primary:active': {
135
135
  color: 'var(--ids-comp-button-filled-color-fg-label-primary-pressed)',
136
136
  background: 'var(--ids-comp-button-filled-color-bg-primary-pressed)',
137
- borderColor: 'var(--ids-comp-button-filled-color-border-primary-default)',
137
+ borderColor: 'var(--ids-comp-button-filled-color-border-primary-pressed)',
138
138
  },
139
139
  '.ids-button.ids-button-filled.ids-button-primary:active>.ids-icon': {
140
140
  color: 'var(--ids-comp-button-filled-color-fg-icon-primary-pressed)',
@@ -142,7 +142,7 @@ module.exports = function ButtonPlugin() {
142
142
  '.ids-button.ids-button-filled.ids-button-primary:disabled': {
143
143
  color: 'var(--ids-comp-button-filled-color-fg-label-primary-disabled)',
144
144
  background: 'var(--ids-comp-button-filled-color-bg-primary-disabled)',
145
- borderColor: 'var(--ids-comp-button-filled-color-border-primary-default)',
145
+ borderColor: 'var(--ids-comp-button-filled-color-border-primary-disabled)',
146
146
  },
147
147
  '.ids-button.ids-button-filled.ids-button-primary:disabled>.ids-icon': {
148
148
  color: 'var(--ids-comp-button-filled-color-fg-icon-primary-disabled)',
@@ -158,7 +158,7 @@ module.exports = function ButtonPlugin() {
158
158
  '.ids-button.ids-button-filled.ids-button-secondary:hover': {
159
159
  color: 'var(--ids-comp-button-filled-color-fg-label-secondary-hovered)',
160
160
  background: 'var(--ids-comp-button-filled-color-bg-secondary-hovered)',
161
- borderColor: 'var(--ids-comp-button-filled-color-border-secondary-default)',
161
+ borderColor: 'var(--ids-comp-button-filled-color-border-secondary-hovered)',
162
162
  },
163
163
  '.ids-button.ids-button-filled.ids-button-secondary:hover>.ids-icon': {
164
164
  color: 'var(--ids-comp-button-filled-color-fg-icon-secondary-hovered)',
@@ -166,7 +166,7 @@ module.exports = function ButtonPlugin() {
166
166
  '.ids-button.ids-button-filled.ids-button-secondary:focus,.ids-button.ids-button-filled.ids-button-secondary:focus-visible': {
167
167
  color: 'var(--ids-comp-button-filled-color-fg-label-secondary-focused)',
168
168
  background: 'var(--ids-comp-button-filled-color-bg-secondary-focused)',
169
- borderColor: 'var(--ids-comp-button-filled-color-border-secondary-default)',
169
+ borderColor: 'var(--ids-comp-button-filled-color-border-secondary-focused)',
170
170
  outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
171
171
  },
172
172
  '.ids-button.ids-button-filled.ids-button-secondary:focus>.ids-icon,.ids-button.ids-button-filled.ids-button-secondary:focus-visible>.ids-icon':
@@ -174,7 +174,7 @@ module.exports = function ButtonPlugin() {
174
174
  '.ids-button.ids-button-filled.ids-button-secondary:active': {
175
175
  color: 'var(--ids-comp-button-filled-color-fg-label-secondary-pressed)',
176
176
  background: 'var(--ids-comp-button-filled-color-bg-secondary-pressed)',
177
- borderColor: 'var(--ids-comp-button-filled-color-border-secondary-default)',
177
+ borderColor: 'var(--ids-comp-button-filled-color-border-secondary-pressed)',
178
178
  },
179
179
  '.ids-button.ids-button-filled.ids-button-secondary:active>.ids-icon': {
180
180
  color: 'var(--ids-comp-button-filled-color-fg-icon-secondary-pressed)',
@@ -182,7 +182,7 @@ module.exports = function ButtonPlugin() {
182
182
  '.ids-button.ids-button-filled.ids-button-secondary:disabled': {
183
183
  color: 'var(--ids-comp-button-filled-color-fg-label-secondary-disabled)',
184
184
  background: 'var(--ids-comp-button-filled-color-bg-secondary-disabled)',
185
- borderColor: 'var(--ids-comp-button-filled-color-border-secondary-default)',
185
+ borderColor: 'var(--ids-comp-button-filled-color-border-secondary-disabled)',
186
186
  },
187
187
  '.ids-button.ids-button-filled.ids-button-secondary:disabled>.ids-icon': {
188
188
  color: 'var(--ids-comp-button-filled-color-fg-icon-secondary-disabled)',
@@ -196,7 +196,7 @@ module.exports = function ButtonPlugin() {
196
196
  '.ids-button.ids-button-filled.ids-button-brand:hover': {
197
197
  color: 'var(--ids-comp-button-filled-color-fg-label-brand-hovered)',
198
198
  background: 'var(--ids-comp-button-filled-color-bg-brand-hovered)',
199
- borderColor: 'var(--ids-comp-button-filled-color-border-brand-default)',
199
+ borderColor: 'var(--ids-comp-button-filled-color-border-brand-hovered)',
200
200
  },
201
201
  '.ids-button.ids-button-filled.ids-button-brand:hover>.ids-icon': {
202
202
  color: 'var(--ids-comp-button-filled-color-fg-icon-brand-hovered)',
@@ -204,7 +204,7 @@ module.exports = function ButtonPlugin() {
204
204
  '.ids-button.ids-button-filled.ids-button-brand:focus,.ids-button.ids-button-filled.ids-button-brand:focus-visible': {
205
205
  color: 'var(--ids-comp-button-filled-color-fg-label-brand-focused)',
206
206
  background: 'var(--ids-comp-button-filled-color-bg-brand-focused)',
207
- borderColor: 'var(--ids-comp-button-filled-color-border-brand-default)',
207
+ borderColor: 'var(--ids-comp-button-filled-color-border-brand-focused)',
208
208
  outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
209
209
  },
210
210
  '.ids-button.ids-button-filled.ids-button-brand:focus>.ids-icon,.ids-button.ids-button-filled.ids-button-brand:focus-visible>.ids-icon':
@@ -212,7 +212,7 @@ module.exports = function ButtonPlugin() {
212
212
  '.ids-button.ids-button-filled.ids-button-brand:active': {
213
213
  color: 'var(--ids-comp-button-filled-color-fg-label-brand-pressed)',
214
214
  background: 'var(--ids-comp-button-filled-color-bg-brand-pressed)',
215
- borderColor: 'var(--ids-comp-button-filled-color-border-brand-default)',
215
+ borderColor: 'var(--ids-comp-button-filled-color-border-brand-pressed)',
216
216
  },
217
217
  '.ids-button.ids-button-filled.ids-button-brand:active>.ids-icon': {
218
218
  color: 'var(--ids-comp-button-filled-color-fg-icon-brand-pressed)',
@@ -220,7 +220,7 @@ module.exports = function ButtonPlugin() {
220
220
  '.ids-button.ids-button-filled.ids-button-brand:disabled': {
221
221
  color: 'var(--ids-comp-button-filled-color-fg-label-brand-disabled)',
222
222
  background: 'var(--ids-comp-button-filled-color-bg-brand-disabled)',
223
- borderColor: 'var(--ids-comp-button-filled-color-border-brand-default)',
223
+ borderColor: 'var(--ids-comp-button-filled-color-border-brand-disabled)',
224
224
  },
225
225
  '.ids-button.ids-button-filled.ids-button-brand:disabled>.ids-icon': {
226
226
  color: 'var(--ids-comp-button-filled-color-fg-icon-brand-disabled)',
@@ -234,7 +234,7 @@ module.exports = function ButtonPlugin() {
234
234
  '.ids-button.ids-button-filled.ids-button-error:hover': {
235
235
  color: 'var(--ids-comp-button-filled-color-fg-label-error-hovered)',
236
236
  background: 'var(--ids-comp-button-filled-color-bg-error-hovered)',
237
- borderColor: 'var(--ids-comp-button-filled-color-border-error-default)',
237
+ borderColor: 'var(--ids-comp-button-filled-color-border-error-hovered)',
238
238
  },
239
239
  '.ids-button.ids-button-filled.ids-button-error:hover>.ids-icon': {
240
240
  color: 'var(--ids-comp-button-filled-color-fg-icon-error-hovered)',
@@ -242,7 +242,7 @@ module.exports = function ButtonPlugin() {
242
242
  '.ids-button.ids-button-filled.ids-button-error:focus,.ids-button.ids-button-filled.ids-button-error:focus-visible': {
243
243
  color: 'var(--ids-comp-button-filled-color-fg-label-error-focused)',
244
244
  background: 'var(--ids-comp-button-filled-color-bg-error-focused)',
245
- borderColor: 'var(--ids-comp-button-filled-color-border-error-default)',
245
+ borderColor: 'var(--ids-comp-button-filled-color-border-error-focused)',
246
246
  outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
247
247
  },
248
248
  '.ids-button.ids-button-filled.ids-button-error:focus>.ids-icon,.ids-button.ids-button-filled.ids-button-error:focus-visible>.ids-icon':
@@ -250,7 +250,7 @@ module.exports = function ButtonPlugin() {
250
250
  '.ids-button.ids-button-filled.ids-button-error:active': {
251
251
  color: 'var(--ids-comp-button-filled-color-fg-label-error-pressed)',
252
252
  background: 'var(--ids-comp-button-filled-color-bg-error-pressed)',
253
- borderColor: 'var(--ids-comp-button-filled-color-border-error-default)',
253
+ borderColor: 'var(--ids-comp-button-filled-color-border-error-pressed)',
254
254
  },
255
255
  '.ids-button.ids-button-filled.ids-button-error:active>.ids-icon': {
256
256
  color: 'var(--ids-comp-button-filled-color-fg-icon-error-pressed)',
@@ -266,7 +266,7 @@ module.exports = function ButtonPlugin() {
266
266
  '.ids-button.ids-button-filled.ids-button-success:hover': {
267
267
  color: 'var(--ids-comp-button-filled-color-fg-label-success-hovered)',
268
268
  background: 'var(--ids-comp-button-filled-color-bg-success-hovered)',
269
- borderColor: 'var(--ids-comp-button-filled-color-border-success-default)',
269
+ borderColor: 'var(--ids-comp-button-filled-color-border-success-hovered)',
270
270
  },
271
271
  '.ids-button.ids-button-filled.ids-button-success:hover>.ids-icon': {
272
272
  color: 'var(--ids-comp-button-filled-color-fg-icon-success-hovered)',
@@ -274,7 +274,7 @@ module.exports = function ButtonPlugin() {
274
274
  '.ids-button.ids-button-filled.ids-button-success:focus,.ids-button.ids-button-filled.ids-button-success:focus-visible': {
275
275
  color: 'var(--ids-comp-button-filled-color-fg-label-success-focused)',
276
276
  background: 'var(--ids-comp-button-filled-color-bg-success-focused)',
277
- borderColor: 'var(--ids-comp-button-filled-color-border-success-default)',
277
+ borderColor: 'var(--ids-comp-button-filled-color-border-success-focused)',
278
278
  outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
279
279
  },
280
280
  '.ids-button.ids-button-filled.ids-button-success:focus>.ids-icon,.ids-button.ids-button-filled.ids-button-success:focus-visible>.ids-icon':
@@ -282,7 +282,7 @@ module.exports = function ButtonPlugin() {
282
282
  '.ids-button.ids-button-filled.ids-button-success:active': {
283
283
  color: 'var(--ids-comp-button-filled-color-fg-label-success-pressed)',
284
284
  background: 'var(--ids-comp-button-filled-color-bg-success-pressed)',
285
- borderColor: 'var(--ids-comp-button-filled-color-border-success-default)',
285
+ borderColor: 'var(--ids-comp-button-filled-color-border-success-pressed)',
286
286
  },
287
287
  '.ids-button.ids-button-filled.ids-button-success:active>.ids-icon': {
288
288
  color: 'var(--ids-comp-button-filled-color-fg-icon-success-pressed)',
@@ -298,7 +298,7 @@ module.exports = function ButtonPlugin() {
298
298
  '.ids-button.ids-button-filled.ids-button-warning:hover': {
299
299
  color: 'var(--ids-comp-button-filled-color-fg-label-warning-hovered)',
300
300
  background: 'var(--ids-comp-button-filled-color-bg-warning-hovered)',
301
- borderColor: 'var(--ids-comp-button-filled-color-border-warning-default)',
301
+ borderColor: 'var(--ids-comp-button-filled-color-border-warning-hovered)',
302
302
  },
303
303
  '.ids-button.ids-button-filled.ids-button-warning:hover>.ids-icon': {
304
304
  color: 'var(--ids-comp-button-filled-color-fg-icon-warning-hovered)',
@@ -306,7 +306,7 @@ module.exports = function ButtonPlugin() {
306
306
  '.ids-button.ids-button-filled.ids-button-warning:focus,.ids-button.ids-button-filled.ids-button-warning:focus-visible': {
307
307
  color: 'var(--ids-comp-button-filled-color-fg-label-warning-focused)',
308
308
  background: 'var(--ids-comp-button-filled-color-bg-warning-focused)',
309
- borderColor: 'var(--ids-comp-button-filled-color-border-warning-default)',
309
+ borderColor: 'var(--ids-comp-button-filled-color-border-warning-focused)',
310
310
  outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
311
311
  },
312
312
  '.ids-button.ids-button-filled.ids-button-warning:focus>.ids-icon,.ids-button.ids-button-filled.ids-button-warning:focus-visible>.ids-icon':
@@ -314,7 +314,7 @@ module.exports = function ButtonPlugin() {
314
314
  '.ids-button.ids-button-filled.ids-button-warning:active': {
315
315
  color: 'var(--ids-comp-button-filled-color-fg-label-warning-pressed)',
316
316
  background: 'var(--ids-comp-button-filled-color-bg-warning-pressed)',
317
- borderColor: 'var(--ids-comp-button-filled-color-border-warning-default)',
317
+ borderColor: 'var(--ids-comp-button-filled-color-border-warning-pressed)',
318
318
  },
319
319
  '.ids-button.ids-button-filled.ids-button-warning:active>.ids-icon': {
320
320
  color: 'var(--ids-comp-button-filled-color-fg-icon-warning-pressed)',
@@ -328,7 +328,7 @@ module.exports = function ButtonPlugin() {
328
328
  '.ids-button.ids-button-filled.ids-button-light:hover': {
329
329
  color: 'var(--ids-comp-button-filled-color-fg-label-light-hovered)',
330
330
  background: 'var(--ids-comp-button-filled-color-bg-light-hovered)',
331
- borderColor: 'var(--ids-comp-button-filled-color-border-light-default)',
331
+ borderColor: 'var(--ids-comp-button-filled-color-border-light-hovered)',
332
332
  },
333
333
  '.ids-button.ids-button-filled.ids-button-light:hover>.ids-icon': {
334
334
  color: 'var(--ids-comp-button-filled-color-fg-icon-light-hovered)',
@@ -336,7 +336,7 @@ module.exports = function ButtonPlugin() {
336
336
  '.ids-button.ids-button-filled.ids-button-light:focus,.ids-button.ids-button-filled.ids-button-light:focus-visible': {
337
337
  color: 'var(--ids-comp-button-filled-color-fg-label-light-focused)',
338
338
  background: 'var(--ids-comp-button-filled-color-bg-light-focused)',
339
- borderColor: 'var(--ids-comp-button-filled-color-border-light-default)',
339
+ borderColor: 'var(--ids-comp-button-filled-color-border-light-focused)',
340
340
  outlineColor: 'var(--ids-comp-button-focused-outline-color-light-focused)',
341
341
  },
342
342
  '.ids-button.ids-button-filled.ids-button-light:focus>.ids-icon,.ids-button.ids-button-filled.ids-button-light:focus-visible>.ids-icon':
@@ -344,7 +344,7 @@ module.exports = function ButtonPlugin() {
344
344
  '.ids-button.ids-button-filled.ids-button-light:active': {
345
345
  color: 'var(--ids-comp-button-filled-color-fg-label-light-pressed)',
346
346
  background: 'var(--ids-comp-button-filled-color-bg-light-pressed)',
347
- borderColor: 'var(--ids-comp-button-filled-color-border-light-default)',
347
+ borderColor: 'var(--ids-comp-button-filled-color-border-light-pressed)',
348
348
  },
349
349
  '.ids-button.ids-button-filled.ids-button-light:active>.ids-icon': {
350
350
  color: 'var(--ids-comp-button-filled-color-fg-icon-light-pressed)',
@@ -352,7 +352,7 @@ module.exports = function ButtonPlugin() {
352
352
  '.ids-button.ids-button-filled.ids-button-light:disabled': {
353
353
  color: 'var(--ids-comp-button-filled-color-fg-label-light-disabled)',
354
354
  background: 'var(--ids-comp-button-filled-color-bg-light-disabled)',
355
- borderColor: 'var(--ids-comp-button-filled-color-border-light-default)',
355
+ borderColor: 'var(--ids-comp-button-filled-color-border-light-disabled)',
356
356
  },
357
357
  '.ids-button.ids-button-filled.ids-button-light:disabled>.ids-icon': {
358
358
  color: 'var(--ids-comp-button-filled-color-fg-icon-light-disabled)',
@@ -368,7 +368,7 @@ module.exports = function ButtonPlugin() {
368
368
  '.ids-button.ids-button-filled.ids-button-light-fixed:hover': {
369
369
  color: 'var(--ids-comp-button-filled-color-fg-label-light-fixed-hovered)',
370
370
  background: 'var(--ids-comp-button-filled-color-bg-light-fixed-hovered)',
371
- borderColor: 'var(--ids-comp-button-filled-color-border-light-fixed-default)',
371
+ borderColor: 'var(--ids-comp-button-filled-color-border-light-fixed-hovered)',
372
372
  },
373
373
  '.ids-button.ids-button-filled.ids-button-light-fixed:hover>.ids-icon': {
374
374
  color: 'var(--ids-comp-button-filled-color-fg-icon-light-fixed-hovered)',
@@ -376,7 +376,7 @@ module.exports = function ButtonPlugin() {
376
376
  '.ids-button.ids-button-filled.ids-button-light-fixed:focus,.ids-button.ids-button-filled.ids-button-light-fixed:focus-visible': {
377
377
  color: 'var(--ids-comp-button-filled-color-fg-label-light-fixed-focused)',
378
378
  background: 'var(--ids-comp-button-filled-color-bg-light-fixed-focused)',
379
- borderColor: 'var(--ids-comp-button-filled-color-border-light-fixed-default)',
379
+ borderColor: 'var(--ids-comp-button-filled-color-border-light-fixed-focused)',
380
380
  outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
381
381
  },
382
382
  '.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':
@@ -384,7 +384,7 @@ module.exports = function ButtonPlugin() {
384
384
  '.ids-button.ids-button-filled.ids-button-light-fixed:active': {
385
385
  color: 'var(--ids-comp-button-filled-color-fg-label-light-fixed-pressed)',
386
386
  background: 'var(--ids-comp-button-filled-color-bg-light-fixed-pressed)',
387
- borderColor: 'var(--ids-comp-button-filled-color-border-light-fixed-default)',
387
+ borderColor: 'var(--ids-comp-button-filled-color-border-light-fixed-pressed)',
388
388
  },
389
389
  '.ids-button.ids-button-filled.ids-button-light-fixed:active>.ids-icon': {
390
390
  color: 'var(--ids-comp-button-filled-color-fg-icon-light-fixed-pressed)',
@@ -392,7 +392,7 @@ module.exports = function ButtonPlugin() {
392
392
  '.ids-button.ids-button-filled.ids-button-light-fixed:disabled': {
393
393
  color: 'var(--ids-comp-button-filled-color-fg-label-light-fixed-disabled)',
394
394
  background: 'var(--ids-comp-button-filled-color-bg-light-fixed-disabled)',
395
- borderColor: 'var(--ids-comp-button-filled-color-border-light-fixed-default)',
395
+ borderColor: 'var(--ids-comp-button-filled-color-border-light-fixed-disabled)',
396
396
  },
397
397
  '.ids-button.ids-button-filled.ids-button-light-fixed:disabled>.ids-icon': {
398
398
  color: 'var(--ids-comp-button-filled-color-fg-icon-light-fixed-disabled)',
@@ -406,7 +406,7 @@ module.exports = function ButtonPlugin() {
406
406
  '.ids-button.ids-button-filled.ids-button-dark:hover': {
407
407
  color: 'var(--ids-comp-button-filled-color-fg-label-dark-hovered)',
408
408
  background: 'var(--ids-comp-button-filled-color-bg-dark-hovered)',
409
- borderColor: 'var(--ids-comp-button-filled-color-border-dark-default)',
409
+ borderColor: 'var(--ids-comp-button-filled-color-border-dark-hovered)',
410
410
  },
411
411
  '.ids-button.ids-button-filled.ids-button-dark:hover>.ids-icon': {
412
412
  color: 'var(--ids-comp-button-filled-color-fg-icon-dark-hovered)',
@@ -414,7 +414,7 @@ module.exports = function ButtonPlugin() {
414
414
  '.ids-button.ids-button-filled.ids-button-dark:focus,.ids-button.ids-button-filled.ids-button-dark:focus-visible': {
415
415
  color: 'var(--ids-comp-button-filled-color-fg-label-dark-focused)',
416
416
  background: 'var(--ids-comp-button-filled-color-bg-dark-focused)',
417
- borderColor: 'var(--ids-comp-button-filled-color-border-dark-default)',
417
+ borderColor: 'var(--ids-comp-button-filled-color-border-dark-focused)',
418
418
  outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
419
419
  },
420
420
  '.ids-button.ids-button-filled.ids-button-dark:focus>.ids-icon,.ids-button.ids-button-filled.ids-button-dark:focus-visible>.ids-icon':
@@ -422,7 +422,7 @@ module.exports = function ButtonPlugin() {
422
422
  '.ids-button.ids-button-filled.ids-button-dark:active': {
423
423
  color: 'var(--ids-comp-button-filled-color-fg-label-dark-pressed)',
424
424
  background: 'var(--ids-comp-button-filled-color-bg-dark-pressed)',
425
- borderColor: 'var(--ids-comp-button-filled-color-border-dark-default)',
425
+ borderColor: 'var(--ids-comp-button-filled-color-border-dark-pressed)',
426
426
  },
427
427
  '.ids-button.ids-button-filled.ids-button-dark:active>.ids-icon': {
428
428
  color: 'var(--ids-comp-button-filled-color-fg-icon-dark-pressed)',
@@ -430,7 +430,7 @@ module.exports = function ButtonPlugin() {
430
430
  '.ids-button.ids-button-filled.ids-button-dark:disabled': {
431
431
  color: 'var(--ids-comp-button-filled-color-fg-label-dark-disabled)',
432
432
  background: 'var(--ids-comp-button-filled-color-bg-dark-disabled)',
433
- borderColor: 'var(--ids-comp-button-filled-color-border-dark-default)',
433
+ borderColor: 'var(--ids-comp-button-filled-color-border-dark-disabled)',
434
434
  },
435
435
  '.ids-button.ids-button-filled.ids-button-dark:disabled>.ids-icon': {
436
436
  color: 'var(--ids-comp-button-filled-color-fg-icon-dark-disabled)',
@@ -446,7 +446,7 @@ module.exports = function ButtonPlugin() {
446
446
  '.ids-button.ids-button-filled.ids-button-surface:hover': {
447
447
  color: 'var(--ids-comp-button-filled-color-fg-label-surface-hovered)',
448
448
  background: 'var(--ids-comp-button-filled-color-bg-surface-hovered)',
449
- borderColor: 'var(--ids-comp-button-filled-color-border-surface-default)',
449
+ borderColor: 'var(--ids-comp-button-filled-color-border-surface-hovered)',
450
450
  },
451
451
  '.ids-button.ids-button-filled.ids-button-surface:hover>.ids-icon': {
452
452
  color: 'var(--ids-comp-button-filled-color-fg-icon-surface-hovered)',
@@ -454,7 +454,7 @@ module.exports = function ButtonPlugin() {
454
454
  '.ids-button.ids-button-filled.ids-button-surface:focus,.ids-button.ids-button-filled.ids-button-surface:focus-visible': {
455
455
  color: 'var(--ids-comp-button-filled-color-fg-label-surface-focused)',
456
456
  background: 'var(--ids-comp-button-filled-color-bg-surface-focused)',
457
- borderColor: 'var(--ids-comp-button-filled-color-border-surface-default)',
457
+ borderColor: 'var(--ids-comp-button-filled-color-border-surface-focused)',
458
458
  outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
459
459
  },
460
460
  '.ids-button.ids-button-filled.ids-button-surface:focus>.ids-icon,.ids-button.ids-button-filled.ids-button-surface:focus-visible>.ids-icon':
@@ -462,7 +462,7 @@ module.exports = function ButtonPlugin() {
462
462
  '.ids-button.ids-button-filled.ids-button-surface:active': {
463
463
  color: 'var(--ids-comp-button-filled-color-fg-label-surface-pressed)',
464
464
  background: 'var(--ids-comp-button-filled-color-bg-surface-pressed)',
465
- borderColor: 'var(--ids-comp-button-filled-color-border-surface-default)',
465
+ borderColor: 'var(--ids-comp-button-filled-color-border-surface-pressed)',
466
466
  },
467
467
  '.ids-button.ids-button-filled.ids-button-surface:active>.ids-icon': {
468
468
  color: 'var(--ids-comp-button-filled-color-fg-icon-surface-pressed)',
@@ -470,7 +470,7 @@ module.exports = function ButtonPlugin() {
470
470
  '.ids-button.ids-button-filled.ids-button-surface:disabled': {
471
471
  color: 'var(--ids-comp-button-filled-color-fg-label-surface-disabled)',
472
472
  background: 'var(--ids-comp-button-filled-color-bg-surface-disabled)',
473
- borderColor: 'var(--ids-comp-button-filled-color-border-surface-default)',
473
+ borderColor: 'var(--ids-comp-button-filled-color-border-surface-disabled)',
474
474
  },
475
475
  '.ids-button.ids-button-filled.ids-button-surface:disabled>.ids-icon': {
476
476
  color: 'var(--ids-comp-button-filled-color-fg-icon-surface-disabled)',
@@ -486,7 +486,7 @@ module.exports = function ButtonPlugin() {
486
486
  '.ids-button.ids-button-outlined.ids-button-primary:hover': {
487
487
  color: 'var(--ids-comp-button-outlined-color-fg-label-primary-hovered)',
488
488
  background: 'var(--ids-comp-button-outlined-color-bg-primary-hovered)',
489
- borderColor: 'var(--ids-comp-button-outlined-color-border-primary-default)',
489
+ borderColor: 'var(--ids-comp-button-outlined-color-border-primary-hovered)',
490
490
  },
491
491
  '.ids-button.ids-button-outlined.ids-button-primary:hover>.ids-icon': {
492
492
  color: 'var(--ids-comp-button-outlined-color-fg-icon-primary-hovered)',
@@ -494,7 +494,7 @@ module.exports = function ButtonPlugin() {
494
494
  '.ids-button.ids-button-outlined.ids-button-primary:focus,.ids-button.ids-button-outlined.ids-button-primary:focus-visible': {
495
495
  color: 'var(--ids-comp-button-outlined-color-fg-label-primary-focused)',
496
496
  background: 'var(--ids-comp-button-outlined-color-bg-primary-focused)',
497
- borderColor: 'var(--ids-comp-button-outlined-color-border-primary-default)',
497
+ borderColor: 'var(--ids-comp-button-outlined-color-border-primary-focused)',
498
498
  outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
499
499
  },
500
500
  '.ids-button.ids-button-outlined.ids-button-primary:focus>.ids-icon,.ids-button.ids-button-outlined.ids-button-primary:focus-visible>.ids-icon':
@@ -502,7 +502,7 @@ module.exports = function ButtonPlugin() {
502
502
  '.ids-button.ids-button-outlined.ids-button-primary:active': {
503
503
  color: 'var(--ids-comp-button-outlined-color-fg-label-primary-pressed)',
504
504
  background: 'var(--ids-comp-button-outlined-color-bg-primary-pressed)',
505
- borderColor: 'var(--ids-comp-button-outlined-color-border-primary-default)',
505
+ borderColor: 'var(--ids-comp-button-outlined-color-border-primary-pressed)',
506
506
  },
507
507
  '.ids-button.ids-button-outlined.ids-button-primary:active>.ids-icon': {
508
508
  color: 'var(--ids-comp-button-outlined-color-fg-icon-primary-pressed)',
@@ -510,7 +510,7 @@ module.exports = function ButtonPlugin() {
510
510
  '.ids-button.ids-button-outlined.ids-button-primary:disabled': {
511
511
  color: 'var(--ids-comp-button-outlined-color-fg-label-primary-disabled)',
512
512
  background: 'var(--ids-comp-button-outlined-color-bg-primary-disabled)',
513
- borderColor: 'var(--ids-comp-button-outlined-color-border-primary-default)',
513
+ borderColor: 'var(--ids-comp-button-outlined-color-border-primary-disabled)',
514
514
  },
515
515
  '.ids-button.ids-button-outlined.ids-button-primary:disabled>.ids-icon': {
516
516
  color: 'var(--ids-comp-button-outlined-color-fg-icon-primary-disabled)',
@@ -526,7 +526,7 @@ module.exports = function ButtonPlugin() {
526
526
  '.ids-button.ids-button-outlined.ids-button-secondary:hover': {
527
527
  color: 'var(--ids-comp-button-outlined-color-fg-label-secondary-hovered)',
528
528
  background: 'var(--ids-comp-button-outlined-color-bg-secondary-hovered)',
529
- borderColor: 'var(--ids-comp-button-outlined-color-border-secondary-default)',
529
+ borderColor: 'var(--ids-comp-button-outlined-color-border-secondary-hovered)',
530
530
  },
531
531
  '.ids-button.ids-button-outlined.ids-button-secondary:hover>.ids-icon': {
532
532
  color: 'var(--ids-comp-button-outlined-color-fg-icon-secondary-hovered)',
@@ -534,7 +534,7 @@ module.exports = function ButtonPlugin() {
534
534
  '.ids-button.ids-button-outlined.ids-button-secondary:focus,.ids-button.ids-button-outlined.ids-button-secondary:focus-visible': {
535
535
  color: 'var(--ids-comp-button-outlined-color-fg-label-secondary-focused)',
536
536
  background: 'var(--ids-comp-button-outlined-color-bg-secondary-focused)',
537
- borderColor: 'var(--ids-comp-button-outlined-color-border-secondary-default)',
537
+ borderColor: 'var(--ids-comp-button-outlined-color-border-secondary-focused)',
538
538
  outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
539
539
  },
540
540
  '.ids-button.ids-button-outlined.ids-button-secondary:focus>.ids-icon,.ids-button.ids-button-outlined.ids-button-secondary:focus-visible>.ids-icon':
@@ -542,7 +542,7 @@ module.exports = function ButtonPlugin() {
542
542
  '.ids-button.ids-button-outlined.ids-button-secondary:active': {
543
543
  color: 'var(--ids-comp-button-outlined-color-fg-label-secondary-pressed)',
544
544
  background: 'var(--ids-comp-button-outlined-color-bg-secondary-pressed)',
545
- borderColor: 'var(--ids-comp-button-outlined-color-border-secondary-default)',
545
+ borderColor: 'var(--ids-comp-button-outlined-color-border-secondary-pressed)',
546
546
  },
547
547
  '.ids-button.ids-button-outlined.ids-button-secondary:active>.ids-icon': {
548
548
  color: 'var(--ids-comp-button-outlined-color-fg-icon-secondary-pressed)',
@@ -550,7 +550,7 @@ module.exports = function ButtonPlugin() {
550
550
  '.ids-button.ids-button-outlined.ids-button-secondary:disabled': {
551
551
  color: 'var(--ids-comp-button-outlined-color-fg-label-secondary-disabled)',
552
552
  background: 'var(--ids-comp-button-outlined-color-bg-secondary-disabled)',
553
- borderColor: 'var(--ids-comp-button-outlined-color-border-secondary-default)',
553
+ borderColor: 'var(--ids-comp-button-outlined-color-border-secondary-disabled)',
554
554
  },
555
555
  '.ids-button.ids-button-outlined.ids-button-secondary:disabled>.ids-icon': {
556
556
  color: 'var(--ids-comp-button-outlined-color-fg-icon-secondary-disabled)',
@@ -566,7 +566,7 @@ module.exports = function ButtonPlugin() {
566
566
  '.ids-button.ids-button-outlined.ids-button-brand:hover': {
567
567
  color: 'var(--ids-comp-button-outlined-color-fg-label-brand-hovered)',
568
568
  background: 'var(--ids-comp-button-outlined-color-bg-brand-hovered)',
569
- borderColor: 'var(--ids-comp-button-outlined-color-border-brand-default)',
569
+ borderColor: 'var(--ids-comp-button-outlined-color-border-brand-hovered)',
570
570
  },
571
571
  '.ids-button.ids-button-outlined.ids-button-brand:hover>.ids-icon': {
572
572
  color: 'var(--ids-comp-button-outlined-color-fg-icon-brand-hovered)',
@@ -574,7 +574,7 @@ module.exports = function ButtonPlugin() {
574
574
  '.ids-button.ids-button-outlined.ids-button-brand:focus,.ids-button.ids-button-outlined.ids-button-brand:focus-visible': {
575
575
  color: 'var(--ids-comp-button-outlined-color-fg-label-brand-focused)',
576
576
  background: 'var(--ids-comp-button-outlined-color-bg-brand-focused)',
577
- borderColor: 'var(--ids-comp-button-outlined-color-border-brand-default)',
577
+ borderColor: 'var(--ids-comp-button-outlined-color-border-brand-focused)',
578
578
  outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
579
579
  },
580
580
  '.ids-button.ids-button-outlined.ids-button-brand:focus>.ids-icon,.ids-button.ids-button-outlined.ids-button-brand:focus-visible>.ids-icon':
@@ -582,7 +582,7 @@ module.exports = function ButtonPlugin() {
582
582
  '.ids-button.ids-button-outlined.ids-button-brand:active': {
583
583
  color: 'var(--ids-comp-button-outlined-color-fg-label-brand-pressed)',
584
584
  background: 'var(--ids-comp-button-outlined-color-bg-brand-pressed)',
585
- borderColor: 'var(--ids-comp-button-outlined-color-border-brand-default)',
585
+ borderColor: 'var(--ids-comp-button-outlined-color-border-brand-pressed)',
586
586
  },
587
587
  '.ids-button.ids-button-outlined.ids-button-brand:active>.ids-icon': {
588
588
  color: 'var(--ids-comp-button-outlined-color-fg-icon-brand-pressed)',
@@ -590,7 +590,7 @@ module.exports = function ButtonPlugin() {
590
590
  '.ids-button.ids-button-outlined.ids-button-brand:disabled': {
591
591
  color: 'var(--ids-comp-button-outlined-color-fg-label-brand-disabled)',
592
592
  background: 'var(--ids-comp-button-outlined-color-bg-brand-disabled)',
593
- borderColor: 'var(--ids-comp-button-outlined-color-border-brand-default)',
593
+ borderColor: 'var(--ids-comp-button-outlined-color-border-brand-disabled)',
594
594
  },
595
595
  '.ids-button.ids-button-outlined.ids-button-brand:disabled>.ids-icon': {
596
596
  color: 'var(--ids-comp-button-outlined-color-fg-icon-brand-disabled)',
@@ -606,7 +606,7 @@ module.exports = function ButtonPlugin() {
606
606
  '.ids-button.ids-button-outlined.ids-button-error:hover': {
607
607
  color: 'var(--ids-comp-button-outlined-color-fg-label-error-hovered)',
608
608
  background: 'var(--ids-comp-button-outlined-color-bg-error-hovered)',
609
- borderColor: 'var(--ids-comp-button-outlined-color-border-error-default)',
609
+ borderColor: 'var(--ids-comp-button-outlined-color-border-error-hovered)',
610
610
  },
611
611
  '.ids-button.ids-button-outlined.ids-button-error:hover>.ids-icon': {
612
612
  color: 'var(--ids-comp-button-outlined-color-fg-icon-error-hovered)',
@@ -614,7 +614,7 @@ module.exports = function ButtonPlugin() {
614
614
  '.ids-button.ids-button-outlined.ids-button-error:focus,.ids-button.ids-button-outlined.ids-button-error:focus-visible': {
615
615
  color: 'var(--ids-comp-button-outlined-color-fg-label-error-focused)',
616
616
  background: 'var(--ids-comp-button-outlined-color-bg-error-focused)',
617
- borderColor: 'var(--ids-comp-button-outlined-color-border-error-default)',
617
+ borderColor: 'var(--ids-comp-button-outlined-color-border-error-focused)',
618
618
  outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
619
619
  },
620
620
  '.ids-button.ids-button-outlined.ids-button-error:focus>.ids-icon,.ids-button.ids-button-outlined.ids-button-error:focus-visible>.ids-icon':
@@ -622,7 +622,7 @@ module.exports = function ButtonPlugin() {
622
622
  '.ids-button.ids-button-outlined.ids-button-error:active': {
623
623
  color: 'var(--ids-comp-button-outlined-color-fg-label-error-pressed)',
624
624
  background: 'var(--ids-comp-button-outlined-color-bg-error-pressed)',
625
- borderColor: 'var(--ids-comp-button-outlined-color-border-error-default)',
625
+ borderColor: 'var(--ids-comp-button-outlined-color-border-error-pressed)',
626
626
  },
627
627
  '.ids-button.ids-button-outlined.ids-button-error:active>.ids-icon': {
628
628
  color: 'var(--ids-comp-button-outlined-color-fg-icon-error-pressed)',
@@ -638,7 +638,7 @@ module.exports = function ButtonPlugin() {
638
638
  '.ids-button.ids-button-outlined.ids-button-success:hover': {
639
639
  color: 'var(--ids-comp-button-outlined-color-fg-label-success-hovered)',
640
640
  background: 'var(--ids-comp-button-outlined-color-bg-success-hovered)',
641
- borderColor: 'var(--ids-comp-button-outlined-color-border-success-default)',
641
+ borderColor: 'var(--ids-comp-button-outlined-color-border-success-hovered)',
642
642
  },
643
643
  '.ids-button.ids-button-outlined.ids-button-success:hover>.ids-icon': {
644
644
  color: 'var(--ids-comp-button-outlined-color-fg-icon-success-hovered)',
@@ -646,7 +646,7 @@ module.exports = function ButtonPlugin() {
646
646
  '.ids-button.ids-button-outlined.ids-button-success:focus,.ids-button.ids-button-outlined.ids-button-success:focus-visible': {
647
647
  color: 'var(--ids-comp-button-outlined-color-fg-label-success-focused)',
648
648
  background: 'var(--ids-comp-button-outlined-color-bg-success-focused)',
649
- borderColor: 'var(--ids-comp-button-outlined-color-border-success-default)',
649
+ borderColor: 'var(--ids-comp-button-outlined-color-border-success-focused)',
650
650
  outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
651
651
  },
652
652
  '.ids-button.ids-button-outlined.ids-button-success:focus>.ids-icon,.ids-button.ids-button-outlined.ids-button-success:focus-visible>.ids-icon':
@@ -654,7 +654,7 @@ module.exports = function ButtonPlugin() {
654
654
  '.ids-button.ids-button-outlined.ids-button-success:active': {
655
655
  color: 'var(--ids-comp-button-outlined-color-fg-label-success-pressed)',
656
656
  background: 'var(--ids-comp-button-outlined-color-bg-success-pressed)',
657
- borderColor: 'var(--ids-comp-button-outlined-color-border-success-default)',
657
+ borderColor: 'var(--ids-comp-button-outlined-color-border-success-pressed)',
658
658
  },
659
659
  '.ids-button.ids-button-outlined.ids-button-success:active>.ids-icon': {
660
660
  color: 'var(--ids-comp-button-outlined-color-fg-icon-success-pressed)',
@@ -670,7 +670,7 @@ module.exports = function ButtonPlugin() {
670
670
  '.ids-button.ids-button-outlined.ids-button-warning:hover': {
671
671
  color: 'var(--ids-comp-button-outlined-color-fg-label-warning-hovered)',
672
672
  background: 'var(--ids-comp-button-outlined-color-bg-warning-hovered)',
673
- borderColor: 'var(--ids-comp-button-outlined-color-border-warning-default)',
673
+ borderColor: 'var(--ids-comp-button-outlined-color-border-warning-hovered)',
674
674
  },
675
675
  '.ids-button.ids-button-outlined.ids-button-warning:hover>.ids-icon': {
676
676
  color: 'var(--ids-comp-button-outlined-color-fg-icon-warning-hovered)',
@@ -678,7 +678,7 @@ module.exports = function ButtonPlugin() {
678
678
  '.ids-button.ids-button-outlined.ids-button-warning:focus,.ids-button.ids-button-outlined.ids-button-warning:focus-visible': {
679
679
  color: 'var(--ids-comp-button-outlined-color-fg-label-warning-focused)',
680
680
  background: 'var(--ids-comp-button-outlined-color-bg-warning-focused)',
681
- borderColor: 'var(--ids-comp-button-outlined-color-border-warning-default)',
681
+ borderColor: 'var(--ids-comp-button-outlined-color-border-warning-focused)',
682
682
  outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
683
683
  },
684
684
  '.ids-button.ids-button-outlined.ids-button-warning:focus>.ids-icon,.ids-button.ids-button-outlined.ids-button-warning:focus-visible>.ids-icon':
@@ -686,7 +686,7 @@ module.exports = function ButtonPlugin() {
686
686
  '.ids-button.ids-button-outlined.ids-button-warning:active': {
687
687
  color: 'var(--ids-comp-button-outlined-color-fg-label-warning-pressed)',
688
688
  background: 'var(--ids-comp-button-outlined-color-bg-warning-pressed)',
689
- borderColor: 'var(--ids-comp-button-outlined-color-border-warning-default)',
689
+ borderColor: 'var(--ids-comp-button-outlined-color-border-warning-pressed)',
690
690
  },
691
691
  '.ids-button.ids-button-outlined.ids-button-warning:active>.ids-icon': {
692
692
  color: 'var(--ids-comp-button-outlined-color-fg-icon-warning-pressed)',
@@ -702,7 +702,7 @@ module.exports = function ButtonPlugin() {
702
702
  '.ids-button.ids-button-outlined.ids-button-light:hover': {
703
703
  color: 'var(--ids-comp-button-outlined-color-fg-label-light-hovered)',
704
704
  background: 'var(--ids-comp-button-outlined-color-bg-light-hovered)',
705
- borderColor: 'var(--ids-comp-button-outlined-color-border-light-default)',
705
+ borderColor: 'var(--ids-comp-button-outlined-color-border-light-hovered)',
706
706
  },
707
707
  '.ids-button.ids-button-outlined.ids-button-light:hover>.ids-icon': {
708
708
  color: 'var(--ids-comp-button-outlined-color-fg-icon-light-hovered)',
@@ -710,7 +710,7 @@ module.exports = function ButtonPlugin() {
710
710
  '.ids-button.ids-button-outlined.ids-button-light:focus,.ids-button.ids-button-outlined.ids-button-light:focus-visible': {
711
711
  color: 'var(--ids-comp-button-outlined-color-fg-label-light-focused)',
712
712
  background: 'var(--ids-comp-button-outlined-color-bg-light-focused)',
713
- borderColor: 'var(--ids-comp-button-outlined-color-border-light-default)',
713
+ borderColor: 'var(--ids-comp-button-outlined-color-border-light-focused)',
714
714
  outlineColor: 'var(--ids-comp-button-focused-outline-color-light-focused)',
715
715
  },
716
716
  '.ids-button.ids-button-outlined.ids-button-light:focus>.ids-icon,.ids-button.ids-button-outlined.ids-button-light:focus-visible>.ids-icon':
@@ -718,7 +718,7 @@ module.exports = function ButtonPlugin() {
718
718
  '.ids-button.ids-button-outlined.ids-button-light:active': {
719
719
  color: 'var(--ids-comp-button-outlined-color-fg-label-light-pressed)',
720
720
  background: 'var(--ids-comp-button-outlined-color-bg-light-pressed)',
721
- borderColor: 'var(--ids-comp-button-outlined-color-border-light-default)',
721
+ borderColor: 'var(--ids-comp-button-outlined-color-border-light-pressed)',
722
722
  },
723
723
  '.ids-button.ids-button-outlined.ids-button-light:active>.ids-icon': {
724
724
  color: 'var(--ids-comp-button-outlined-color-fg-icon-light-pressed)',
@@ -726,7 +726,7 @@ module.exports = function ButtonPlugin() {
726
726
  '.ids-button.ids-button-outlined.ids-button-light:disabled': {
727
727
  color: 'var(--ids-comp-button-outlined-color-fg-label-light-disabled)',
728
728
  background: 'var(--ids-comp-button-outlined-color-bg-light-disabled)',
729
- borderColor: 'var(--ids-comp-button-outlined-color-border-light-default)',
729
+ borderColor: 'var(--ids-comp-button-outlined-color-border-light-disabled)',
730
730
  },
731
731
  '.ids-button.ids-button-outlined.ids-button-light:disabled>.ids-icon': {
732
732
  color: 'var(--ids-comp-button-outlined-color-fg-icon-light-disabled)',
@@ -742,7 +742,7 @@ module.exports = function ButtonPlugin() {
742
742
  '.ids-button.ids-button-outlined.ids-button-light-fixed:hover': {
743
743
  color: 'var(--ids-comp-button-outlined-color-fg-label-light-fixed-hovered)',
744
744
  background: 'var(--ids-comp-button-outlined-color-bg-light-fixed-hovered)',
745
- borderColor: 'var(--ids-comp-button-outlined-color-border-light-fixed-default)',
745
+ borderColor: 'var(--ids-comp-button-outlined-color-border-light-fixed-hovered)',
746
746
  },
747
747
  '.ids-button.ids-button-outlined.ids-button-light-fixed:hover>.ids-icon': {
748
748
  color: 'var(--ids-comp-button-outlined-color-fg-icon-light-fixed-hovered)',
@@ -750,7 +750,7 @@ module.exports = function ButtonPlugin() {
750
750
  '.ids-button.ids-button-outlined.ids-button-light-fixed:focus,.ids-button.ids-button-outlined.ids-button-light-fixed:focus-visible': {
751
751
  color: 'var(--ids-comp-button-outlined-color-fg-label-light-fixed-focused)',
752
752
  background: 'var(--ids-comp-button-outlined-color-bg-light-fixed-focused)',
753
- borderColor: 'var(--ids-comp-button-outlined-color-border-light-fixed-default)',
753
+ borderColor: 'var(--ids-comp-button-outlined-color-border-light-fixed-focused)',
754
754
  outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
755
755
  },
756
756
  '.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':
@@ -758,7 +758,7 @@ module.exports = function ButtonPlugin() {
758
758
  '.ids-button.ids-button-outlined.ids-button-light-fixed:active': {
759
759
  color: 'var(--ids-comp-button-outlined-color-fg-label-light-fixed-pressed)',
760
760
  background: 'var(--ids-comp-button-outlined-color-bg-light-fixed-pressed)',
761
- borderColor: 'var(--ids-comp-button-outlined-color-border-light-fixed-default)',
761
+ borderColor: 'var(--ids-comp-button-outlined-color-border-light-fixed-pressed)',
762
762
  },
763
763
  '.ids-button.ids-button-outlined.ids-button-light-fixed:active>.ids-icon': {
764
764
  color: 'var(--ids-comp-button-outlined-color-fg-icon-light-fixed-pressed)',
@@ -766,7 +766,7 @@ module.exports = function ButtonPlugin() {
766
766
  '.ids-button.ids-button-outlined.ids-button-light-fixed:disabled': {
767
767
  color: 'var(--ids-comp-button-outlined-color-fg-label-light-fixed-disabled)',
768
768
  background: 'var(--ids-comp-button-outlined-color-bg-light-fixed-disabled)',
769
- borderColor: 'var(--ids-comp-button-outlined-color-border-light-fixed-default)',
769
+ borderColor: 'var(--ids-comp-button-outlined-color-border-light-fixed-disabled)',
770
770
  },
771
771
  '.ids-button.ids-button-outlined.ids-button-light-fixed:disabled>.ids-icon': {
772
772
  color: 'var(--ids-comp-button-outlined-color-fg-icon-light-fixed-disabled)',
@@ -780,7 +780,7 @@ module.exports = function ButtonPlugin() {
780
780
  '.ids-button.ids-button-outlined.ids-button-dark:hover': {
781
781
  color: 'var(--ids-comp-button-outlined-color-fg-label-dark-hovered)',
782
782
  background: 'var(--ids-comp-button-outlined-color-bg-dark-hovered)',
783
- borderColor: 'var(--ids-comp-button-outlined-color-border-dark-default)',
783
+ borderColor: 'var(--ids-comp-button-outlined-color-border-dark-hovered)',
784
784
  },
785
785
  '.ids-button.ids-button-outlined.ids-button-dark:hover>.ids-icon': {
786
786
  color: 'var(--ids-comp-button-outlined-color-fg-icon-dark-hovered)',
@@ -788,7 +788,7 @@ module.exports = function ButtonPlugin() {
788
788
  '.ids-button.ids-button-outlined.ids-button-dark:focus,.ids-button.ids-button-outlined.ids-button-dark:focus-visible': {
789
789
  color: 'var(--ids-comp-button-outlined-color-fg-label-dark-focused)',
790
790
  background: 'var(--ids-comp-button-outlined-color-bg-dark-focused)',
791
- borderColor: 'var(--ids-comp-button-outlined-color-border-dark-default)',
791
+ borderColor: 'var(--ids-comp-button-outlined-color-border-dark-focused)',
792
792
  outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
793
793
  },
794
794
  '.ids-button.ids-button-outlined.ids-button-dark:focus>.ids-icon,.ids-button.ids-button-outlined.ids-button-dark:focus-visible>.ids-icon':
@@ -796,7 +796,7 @@ module.exports = function ButtonPlugin() {
796
796
  '.ids-button.ids-button-outlined.ids-button-dark:active': {
797
797
  color: 'var(--ids-comp-button-outlined-color-fg-label-dark-pressed)',
798
798
  background: 'var(--ids-comp-button-outlined-color-bg-dark-pressed)',
799
- borderColor: 'var(--ids-comp-button-outlined-color-border-dark-default)',
799
+ borderColor: 'var(--ids-comp-button-outlined-color-border-dark-pressed)',
800
800
  },
801
801
  '.ids-button.ids-button-outlined.ids-button-dark:active>.ids-icon': {
802
802
  color: 'var(--ids-comp-button-outlined-color-fg-icon-dark-pressed)',
@@ -804,7 +804,7 @@ module.exports = function ButtonPlugin() {
804
804
  '.ids-button.ids-button-outlined.ids-button-dark:disabled': {
805
805
  color: 'var(--ids-comp-button-outlined-color-fg-label-dark-disabled)',
806
806
  background: 'var(--ids-comp-button-outlined-color-bg-dark-disabled)',
807
- borderColor: 'var(--ids-comp-button-outlined-color-border-dark-default)',
807
+ borderColor: 'var(--ids-comp-button-outlined-color-border-dark-disabled)',
808
808
  },
809
809
  '.ids-button.ids-button-outlined.ids-button-dark:disabled>.ids-icon': {
810
810
  color: 'var(--ids-comp-button-outlined-color-fg-icon-dark-disabled)',
@@ -820,7 +820,7 @@ module.exports = function ButtonPlugin() {
820
820
  '.ids-button.ids-button-outlined.ids-button-surface:hover': {
821
821
  color: 'var(--ids-comp-button-outlined-color-fg-label-surface-hovered)',
822
822
  background: 'var(--ids-comp-button-outlined-color-bg-surface-hovered)',
823
- borderColor: 'var(--ids-comp-button-outlined-color-border-surface-default)',
823
+ borderColor: 'var(--ids-comp-button-outlined-color-border-surface-hovered)',
824
824
  },
825
825
  '.ids-button.ids-button-outlined.ids-button-surface:hover>.ids-icon': {
826
826
  color: 'var(--ids-comp-button-outlined-color-fg-icon-surface-hovered)',
@@ -828,7 +828,7 @@ module.exports = function ButtonPlugin() {
828
828
  '.ids-button.ids-button-outlined.ids-button-surface:focus,.ids-button.ids-button-outlined.ids-button-surface:focus-visible': {
829
829
  color: 'var(--ids-comp-button-outlined-color-fg-label-surface-focused)',
830
830
  background: 'var(--ids-comp-button-outlined-color-bg-surface-focused)',
831
- borderColor: 'var(--ids-comp-button-outlined-color-border-surface-default)',
831
+ borderColor: 'var(--ids-comp-button-outlined-color-border-surface-focused)',
832
832
  outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
833
833
  },
834
834
  '.ids-button.ids-button-outlined.ids-button-surface:focus>.ids-icon,.ids-button.ids-button-outlined.ids-button-surface:focus-visible>.ids-icon':
@@ -836,7 +836,7 @@ module.exports = function ButtonPlugin() {
836
836
  '.ids-button.ids-button-outlined.ids-button-surface:active': {
837
837
  color: 'var(--ids-comp-button-outlined-color-fg-label-surface-pressed)',
838
838
  background: 'var(--ids-comp-button-outlined-color-bg-surface-pressed)',
839
- borderColor: 'var(--ids-comp-button-outlined-color-border-surface-default)',
839
+ borderColor: 'var(--ids-comp-button-outlined-color-border-surface-pressed)',
840
840
  },
841
841
  '.ids-button.ids-button-outlined.ids-button-surface:active>.ids-icon': {
842
842
  color: 'var(--ids-comp-button-outlined-color-fg-icon-surface-pressed)',
@@ -844,7 +844,7 @@ module.exports = function ButtonPlugin() {
844
844
  '.ids-button.ids-button-outlined.ids-button-surface:disabled': {
845
845
  color: 'var(--ids-comp-button-outlined-color-fg-label-surface-disabled)',
846
846
  background: 'var(--ids-comp-button-outlined-color-bg-surface-disabled)',
847
- borderColor: 'var(--ids-comp-button-outlined-color-border-surface-default)',
847
+ borderColor: 'var(--ids-comp-button-outlined-color-border-surface-disabled)',
848
848
  },
849
849
  '.ids-button.ids-button-outlined.ids-button-surface:disabled>.ids-icon': {
850
850
  color: 'var(--ids-comp-button-outlined-color-fg-icon-surface-disabled)',