@i-cell/ids-styles 0.0.15-beta.8 → 0.0.15

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