@i-cell/ids-styles 0.0.1 → 0.0.2

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 (32) hide show
  1. package/dist/accordion/accordion.css +29 -14
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +193 -0
  4. package/dist/action-item/action-item.css +33 -33
  5. package/dist/action-item/action-item.min.css +1 -1
  6. package/dist/action-item/action-item.plugin.js +180 -0
  7. package/dist/action-panel/action-panel.css +12 -12
  8. package/dist/action-panel/action-panel.min.css +1 -1
  9. package/dist/action-panel/action-panel.plugin.js +94 -0
  10. package/dist/avatar/avatar.css +78 -82
  11. package/dist/avatar/avatar.min.css +1 -1
  12. package/dist/avatar/avatar.plugin.js +269 -0
  13. package/dist/button/button.css +187 -180
  14. package/dist/button/button.min.css +1 -1
  15. package/dist/button/button.plugin.js +800 -0
  16. package/dist/card/card.plugin.js +850 -0
  17. package/dist/components.css +718 -637
  18. package/dist/components.min.css +1 -1
  19. package/dist/components.plugin.js +4011 -0
  20. package/dist/dialog/dialog.css +92 -43
  21. package/dist/dialog/dialog.min.css +1 -1
  22. package/dist/dialog/dialog.plugin.js +224 -0
  23. package/dist/divider/divider.css +2 -2
  24. package/dist/divider/divider.min.css +1 -1
  25. package/dist/divider/divider.plugin.js +39 -0
  26. package/dist/icon-button/icon-button.css +102 -102
  27. package/dist/icon-button/icon-button.min.css +1 -1
  28. package/dist/icon-button/icon-button.plugin.js +674 -0
  29. package/dist/tag/tag.css +183 -169
  30. package/dist/tag/tag.min.css +1 -1
  31. package/dist/tag/tag.plugin.js +769 -0
  32. package/package.json +14 -4
package/dist/icon-button/icon-button.css CHANGED
@@ -16,44 +16,44 @@
16
16
  outline: none;
17
17
  }
18
18
  .ids-icon-button.ids-icon-button-compact {
19
- padding: var(--ids-comp-size-icon-button-size-padding-y-compact, 2px) var(--ids-comp-size-icon-button-size-padding-x-compact, 2px);
19
+ padding: var(--ids-comp-size-icon-button-size-padding-y-compact) var(--ids-comp-size-icon-button-size-padding-x-compact);
20
20
  width: var(--ids-comp-size-icon-button-size-width-compact);
21
21
  height: var(--ids-comp-size-icon-button-size-height-compact);
22
- border-radius: var(--ids-comp-size-icon-button-size-border-radius-compact, 1000px);
23
- border: var(--ids-comp-size-icon-button-size-border-compact, 1px) solid;
22
+ border-radius: var(--ids-comp-size-icon-button-size-border-radius-compact);
23
+ border: var(--ids-comp-size-icon-button-size-border-compact) solid;
24
24
  }
25
25
  .ids-icon-button.ids-icon-button-compact *[icon] {
26
26
  width: var(--ids-comp-size-icon-button-size-icon-compact);
27
27
  height: var(--ids-comp-size-icon-button-size-icon-compact);
28
28
  }
29
29
  .ids-icon-button.ids-icon-button-comfortable {
30
- padding: var(--ids-comp-size-icon-button-size-padding-y-comfortable, 2px) var(--ids-comp-size-icon-button-size-padding-x-comfortable, 2px);
30
+ padding: var(--ids-comp-size-icon-button-size-padding-y-comfortable) var(--ids-comp-size-icon-button-size-padding-x-comfortable);
31
31
  width: var(--ids-comp-size-icon-button-size-width-comfortable);
32
32
  height: var(--ids-comp-size-icon-button-size-height-comfortable);
33
- border-radius: var(--ids-comp-size-icon-button-size-border-radius-comfortable, 1000px);
34
- border: var(--ids-comp-size-icon-button-size-border-comfortable, 1px) solid;
33
+ border-radius: var(--ids-comp-size-icon-button-size-border-radius-comfortable);
34
+ border: var(--ids-comp-size-icon-button-size-border-comfortable) solid;
35
35
  }
36
36
  .ids-icon-button.ids-icon-button-comfortable *[icon] {
37
37
  width: var(--ids-comp-size-icon-button-size-icon-comfortable);
38
38
  height: var(--ids-comp-size-icon-button-size-icon-comfortable);
39
39
  }
40
40
  .ids-icon-button.ids-icon-button-spacious {
41
- padding: var(--ids-comp-size-icon-button-size-padding-y-spacious, 2px) var(--ids-comp-size-icon-button-size-padding-x-spacious, 2px);
41
+ padding: var(--ids-comp-size-icon-button-size-padding-y-spacious) var(--ids-comp-size-icon-button-size-padding-x-spacious);
42
42
  width: var(--ids-comp-size-icon-button-size-width-spacious);
43
43
  height: var(--ids-comp-size-icon-button-size-height-spacious);
44
- border-radius: var(--ids-comp-size-icon-button-size-border-radius-spacious, 1000px);
45
- border: var(--ids-comp-size-icon-button-size-border-spacious, 1px) solid;
44
+ border-radius: var(--ids-comp-size-icon-button-size-border-radius-spacious);
45
+ border: var(--ids-comp-size-icon-button-size-border-spacious) solid;
46
46
  }
47
47
  .ids-icon-button.ids-icon-button-spacious *[icon] {
48
48
  width: var(--ids-comp-size-icon-button-size-icon-spacious);
49
49
  height: var(--ids-comp-size-icon-button-size-icon-spacious);
50
50
  }
51
51
  .ids-icon-button.ids-icon-button-dense {
52
- padding: var(--ids-comp-size-icon-button-size-padding-y-dense, 2px) var(--ids-comp-size-icon-button-size-padding-x-dense, 2px);
52
+ padding: var(--ids-comp-size-icon-button-size-padding-y-dense) var(--ids-comp-size-icon-button-size-padding-x-dense);
53
53
  width: var(--ids-comp-size-icon-button-size-width-dense);
54
54
  height: var(--ids-comp-size-icon-button-size-height-dense);
55
- border-radius: var(--ids-comp-size-icon-button-size-border-radius-dense, 1000px);
56
- border: var(--ids-comp-size-icon-button-size-border-dense, 1px) solid;
55
+ border-radius: var(--ids-comp-size-icon-button-size-border-radius-dense);
56
+ border: var(--ids-comp-size-icon-button-size-border-dense) solid;
57
57
  }
58
58
  .ids-icon-button.ids-icon-button-dense *[icon] {
59
59
  width: var(--ids-comp-size-icon-button-size-icon-dense);
@@ -62,434 +62,434 @@
62
62
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-primary {
63
63
  color: var(--ids-comp-icon-button-filled-color-fg-primary-enabled);
64
64
  background: var(--ids-comp-icon-button-filled-color-bg-primary-enabled);
65
- border-color: var(--ids-comp-icon-button-filled-color-border-primary-enabled, rgba(255, 255, 255, 0));
65
+ border-color: var(--ids-comp-icon-button-filled-color-border-primary-enabled);
66
66
  }
67
67
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-primary:hover {
68
68
  background: var(--ids-comp-icon-button-filled-color-bg-primary-hovered);
69
- border-color: var(--ids-comp-icon-button-filled-color-border-primary-hovered, rgba(255, 255, 255, 0));
69
+ border-color: var(--ids-comp-icon-button-filled-color-border-primary-hovered);
70
70
  }
71
71
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-primary:focus {
72
72
  background: var(--ids-comp-icon-button-filled-color-bg-primary-focused);
73
73
  color: var(--ids-comp-icon-button-filled-color-fg-primary-focused);
74
- border-color: var(--ids-comp-icon-button-filled-color-border-primary-focused, rgba(255, 255, 255, 0));
74
+ border-color: var(--ids-comp-icon-button-filled-color-border-primary-focused);
75
75
  }
76
76
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-primary:active {
77
77
  background: var(--ids-comp-icon-button-filled-color-bg-primary-pressed);
78
78
  color: var(--ids-comp-icon-button-filled-color-fg-primary-pressed);
79
- border-color: var(--ids-comp-icon-button-filled-color-border-primary-pressed, rgba(255, 255, 255, 0));
79
+ border-color: var(--ids-comp-icon-button-filled-color-border-primary-pressed);
80
80
  }
81
81
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-primary:disabled {
82
82
  background: var(--ids-comp-icon-button-filled-color-bg-primary-disabled);
83
83
  color: var(--ids-comp-icon-button-filled-color-fg-primary-disabled);
84
- border-color: var(--ids-comp-icon-button-filled-color-border-primary-disabled, rgba(255, 255, 255, 0));
84
+ border-color: var(--ids-comp-icon-button-filled-color-border-primary-disabled);
85
85
  }
86
86
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary {
87
87
  color: var(--ids-comp-icon-button-filled-color-fg-secondary-enabled);
88
88
  background: var(--ids-comp-icon-button-filled-color-bg-secondary-enabled);
89
- border-color: var(--ids-comp-icon-button-filled-color-border-secondary-enabled, rgba(255, 255, 255, 0));
89
+ border-color: var(--ids-comp-icon-button-filled-color-border-secondary-enabled);
90
90
  }
91
91
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary:hover {
92
92
  background: var(--ids-comp-icon-button-filled-color-bg-secondary-hovered);
93
- border-color: var(--ids-comp-icon-button-filled-color-border-secondary-hovered, rgba(255, 255, 255, 0));
93
+ border-color: var(--ids-comp-icon-button-filled-color-border-secondary-hovered);
94
94
  }
95
95
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary:focus {
96
96
  background: var(--ids-comp-icon-button-filled-color-bg-secondary-focused);
97
97
  color: var(--ids-comp-icon-button-filled-color-fg-secondary-focused);
98
- border-color: var(--ids-comp-icon-button-filled-color-border-secondary-focused, rgba(255, 255, 255, 0));
98
+ border-color: var(--ids-comp-icon-button-filled-color-border-secondary-focused);
99
99
  }
100
100
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary:active {
101
101
  background: var(--ids-comp-icon-button-filled-color-bg-secondary-pressed);
102
102
  color: var(--ids-comp-icon-button-filled-color-fg-secondary-pressed);
103
- border-color: var(--ids-comp-icon-button-filled-color-border-secondary-pressed, rgba(255, 255, 255, 0));
103
+ border-color: var(--ids-comp-icon-button-filled-color-border-secondary-pressed);
104
104
  }
105
105
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary:disabled {
106
106
  background: var(--ids-comp-icon-button-filled-color-bg-secondary-disabled);
107
107
  color: var(--ids-comp-icon-button-filled-color-fg-secondary-disabled);
108
- border-color: var(--ids-comp-icon-button-filled-color-border-secondary-disabled, rgba(255, 255, 255, 0));
108
+ border-color: var(--ids-comp-icon-button-filled-color-border-secondary-disabled);
109
109
  }
110
110
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-brand {
111
111
  color: var(--ids-comp-icon-button-filled-color-fg-brand-enabled);
112
112
  background: var(--ids-comp-icon-button-filled-color-bg-brand-enabled);
113
- border-color: var(--ids-comp-icon-button-filled-color-border-brand-enabled, rgba(255, 255, 255, 0));
113
+ border-color: var(--ids-comp-icon-button-filled-color-border-brand-enabled);
114
114
  }
115
115
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-brand:hover {
116
116
  background: var(--ids-comp-icon-button-filled-color-bg-brand-hovered);
117
- border-color: var(--ids-comp-icon-button-filled-color-border-brand-hovered, rgba(255, 255, 255, 0));
117
+ border-color: var(--ids-comp-icon-button-filled-color-border-brand-hovered);
118
118
  }
119
119
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-brand:focus {
120
120
  background: var(--ids-comp-icon-button-filled-color-bg-brand-focused);
121
121
  color: var(--ids-comp-icon-button-filled-color-fg-brand-focused);
122
- border-color: var(--ids-comp-icon-button-filled-color-border-brand-focused, rgba(255, 255, 255, 0));
122
+ border-color: var(--ids-comp-icon-button-filled-color-border-brand-focused);
123
123
  }
124
124
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-brand:active {
125
125
  background: var(--ids-comp-icon-button-filled-color-bg-brand-pressed);
126
126
  color: var(--ids-comp-icon-button-filled-color-fg-brand-pressed);
127
- border-color: var(--ids-comp-icon-button-filled-color-border-brand-pressed, rgba(255, 255, 255, 0));
127
+ border-color: var(--ids-comp-icon-button-filled-color-border-brand-pressed);
128
128
  }
129
129
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-brand:disabled {
130
130
  background: var(--ids-comp-icon-button-filled-color-bg-brand-disabled);
131
131
  color: var(--ids-comp-icon-button-filled-color-fg-brand-disabled);
132
- border-color: var(--ids-comp-icon-button-filled-color-border-brand-disabled, rgba(255, 255, 255, 0));
132
+ border-color: var(--ids-comp-icon-button-filled-color-border-brand-disabled);
133
133
  }
134
134
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-error {
135
135
  color: var(--ids-comp-icon-button-filled-color-fg-error-enabled);
136
136
  background: var(--ids-comp-icon-button-filled-color-bg-error-enabled);
137
- border-color: var(--ids-comp-icon-button-filled-color-border-error-enabled, rgba(255, 255, 255, 0));
137
+ border-color: var(--ids-comp-icon-button-filled-color-border-error-enabled);
138
138
  }
139
139
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-error:hover {
140
140
  background: var(--ids-comp-icon-button-filled-color-bg-error-hovered);
141
- border-color: var(--ids-comp-icon-button-filled-color-border-error-hovered, rgba(255, 255, 255, 0));
141
+ border-color: var(--ids-comp-icon-button-filled-color-border-error-hovered);
142
142
  }
143
143
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-error:focus {
144
144
  background: var(--ids-comp-icon-button-filled-color-bg-error-focused);
145
145
  color: var(--ids-comp-icon-button-filled-color-fg-error-focused);
146
- border-color: var(--ids-comp-icon-button-filled-color-border-error-focused, rgba(255, 255, 255, 0));
146
+ border-color: var(--ids-comp-icon-button-filled-color-border-error-focused);
147
147
  }
148
148
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-error:active {
149
149
  background: var(--ids-comp-icon-button-filled-color-bg-error-pressed);
150
150
  color: var(--ids-comp-icon-button-filled-color-fg-error-pressed);
151
- border-color: var(--ids-comp-icon-button-filled-color-border-error-pressed, rgba(255, 255, 255, 0));
151
+ border-color: var(--ids-comp-icon-button-filled-color-border-error-pressed);
152
152
  }
153
153
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-error:disabled {
154
154
  background: var(--ids-comp-icon-button-filled-color-bg-error-disabled);
155
155
  color: var(--ids-comp-icon-button-filled-color-fg-error-disabled);
156
- border-color: var(--ids-comp-icon-button-filled-color-border-error-disabled, rgba(255, 255, 255, 0));
156
+ border-color: var(--ids-comp-icon-button-filled-color-border-error-disabled);
157
157
  }
158
158
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-success {
159
159
  color: var(--ids-comp-icon-button-filled-color-fg-success-enabled);
160
160
  background: var(--ids-comp-icon-button-filled-color-bg-success-enabled);
161
- border-color: var(--ids-comp-icon-button-filled-color-border-success-enabled, rgba(255, 255, 255, 0));
161
+ border-color: var(--ids-comp-icon-button-filled-color-border-success-enabled);
162
162
  }
163
163
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-success:hover {
164
164
  background: var(--ids-comp-icon-button-filled-color-bg-success-hovered);
165
- border-color: var(--ids-comp-icon-button-filled-color-border-success-hovered, rgba(255, 255, 255, 0));
165
+ border-color: var(--ids-comp-icon-button-filled-color-border-success-hovered);
166
166
  }
167
167
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-success:focus {
168
168
  background: var(--ids-comp-icon-button-filled-color-bg-success-focused);
169
169
  color: var(--ids-comp-icon-button-filled-color-fg-success-focused);
170
- border-color: var(--ids-comp-icon-button-filled-color-border-success-focused, rgba(255, 255, 255, 0));
170
+ border-color: var(--ids-comp-icon-button-filled-color-border-success-focused);
171
171
  }
172
172
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-success:active {
173
173
  background: var(--ids-comp-icon-button-filled-color-bg-success-pressed);
174
174
  color: var(--ids-comp-icon-button-filled-color-fg-success-pressed);
175
- border-color: var(--ids-comp-icon-button-filled-color-border-success-pressed, rgba(255, 255, 255, 0));
175
+ border-color: var(--ids-comp-icon-button-filled-color-border-success-pressed);
176
176
  }
177
177
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-success:disabled {
178
178
  background: var(--ids-comp-icon-button-filled-color-bg-success-disabled);
179
179
  color: var(--ids-comp-icon-button-filled-color-fg-success-disabled);
180
- border-color: var(--ids-comp-icon-button-filled-color-border-success-disabled, rgba(255, 255, 255, 0));
180
+ border-color: var(--ids-comp-icon-button-filled-color-border-success-disabled);
181
181
  }
182
182
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-warning {
183
183
  color: var(--ids-comp-icon-button-filled-color-fg-warning-enabled);
184
184
  background: var(--ids-comp-icon-button-filled-color-bg-warning-enabled);
185
- border-color: var(--ids-comp-icon-button-filled-color-border-warning-enabled, rgba(255, 255, 255, 0));
185
+ border-color: var(--ids-comp-icon-button-filled-color-border-warning-enabled);
186
186
  }
187
187
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-warning:hover {
188
188
  background: var(--ids-comp-icon-button-filled-color-bg-warning-hovered);
189
- border-color: var(--ids-comp-icon-button-filled-color-border-warning-hovered, rgba(255, 255, 255, 0));
189
+ border-color: var(--ids-comp-icon-button-filled-color-border-warning-hovered);
190
190
  }
191
191
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-warning:focus {
192
192
  background: var(--ids-comp-icon-button-filled-color-bg-warning-focused);
193
193
  color: var(--ids-comp-icon-button-filled-color-fg-warning-focused);
194
- border-color: var(--ids-comp-icon-button-filled-color-border-warning-focused, rgba(255, 255, 255, 0));
194
+ border-color: var(--ids-comp-icon-button-filled-color-border-warning-focused);
195
195
  }
196
196
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-warning:active {
197
197
  background: var(--ids-comp-icon-button-filled-color-bg-warning-pressed);
198
198
  color: var(--ids-comp-icon-button-filled-color-fg-warning-pressed);
199
- border-color: var(--ids-comp-icon-button-filled-color-border-warning-pressed, rgba(255, 255, 255, 0));
199
+ border-color: var(--ids-comp-icon-button-filled-color-border-warning-pressed);
200
200
  }
201
201
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-warning:disabled {
202
202
  background: var(--ids-comp-icon-button-filled-color-bg-warning-disabled);
203
203
  color: var(--ids-comp-icon-button-filled-color-fg-warning-disabled);
204
- border-color: var(--ids-comp-icon-button-filled-color-border-warning-disabled, rgba(255, 255, 255, 0));
204
+ border-color: var(--ids-comp-icon-button-filled-color-border-warning-disabled);
205
205
  }
206
206
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-light {
207
207
  color: var(--ids-comp-icon-button-filled-color-fg-light-enabled);
208
208
  background: var(--ids-comp-icon-button-filled-color-bg-light-enabled);
209
- border-color: var(--ids-comp-icon-button-filled-color-border-light-enabled, rgba(255, 255, 255, 0));
209
+ border-color: var(--ids-comp-icon-button-filled-color-border-light-enabled);
210
210
  }
211
211
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-light:hover {
212
212
  background: var(--ids-comp-icon-button-filled-color-bg-light-hovered);
213
- border-color: var(--ids-comp-icon-button-filled-color-border-light-hovered, rgba(255, 255, 255, 0));
213
+ border-color: var(--ids-comp-icon-button-filled-color-border-light-hovered);
214
214
  }
215
215
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-light:focus {
216
216
  background: var(--ids-comp-icon-button-filled-color-bg-light-focused);
217
217
  color: var(--ids-comp-icon-button-filled-color-fg-light-focused);
218
- border-color: var(--ids-comp-icon-button-filled-color-border-light-focused, rgba(255, 255, 255, 0));
218
+ border-color: var(--ids-comp-icon-button-filled-color-border-light-focused);
219
219
  }
220
220
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-light:active {
221
221
  background: var(--ids-comp-icon-button-filled-color-bg-light-pressed);
222
222
  color: var(--ids-comp-icon-button-filled-color-fg-light-pressed);
223
- border-color: var(--ids-comp-icon-button-filled-color-border-light-pressed, rgba(255, 255, 255, 0));
223
+ border-color: var(--ids-comp-icon-button-filled-color-border-light-pressed);
224
224
  }
225
225
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-light:disabled {
226
226
  background: var(--ids-comp-icon-button-filled-color-bg-light-disabled);
227
227
  color: var(--ids-comp-icon-button-filled-color-fg-light-disabled);
228
- border-color: var(--ids-comp-icon-button-filled-color-border-light-disabled, rgba(255, 255, 255, 0));
228
+ border-color: var(--ids-comp-icon-button-filled-color-border-light-disabled);
229
229
  }
230
230
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-dark {
231
231
  color: var(--ids-comp-icon-button-filled-color-fg-dark-enabled);
232
232
  background: var(--ids-comp-icon-button-filled-color-bg-dark-enabled);
233
- border-color: var(--ids-comp-icon-button-filled-color-border-dark-enabled, rgba(255, 255, 255, 0));
233
+ border-color: var(--ids-comp-icon-button-filled-color-border-dark-enabled);
234
234
  }
235
235
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-dark:hover {
236
236
  background: var(--ids-comp-icon-button-filled-color-bg-dark-hovered);
237
- border-color: var(--ids-comp-icon-button-filled-color-border-dark-hovered, rgba(255, 255, 255, 0));
237
+ border-color: var(--ids-comp-icon-button-filled-color-border-dark-hovered);
238
238
  }
239
239
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-dark:focus {
240
240
  background: var(--ids-comp-icon-button-filled-color-bg-dark-focused);
241
241
  color: var(--ids-comp-icon-button-filled-color-fg-dark-focused);
242
- border-color: var(--ids-comp-icon-button-filled-color-border-dark-focused, rgba(255, 255, 255, 0));
242
+ border-color: var(--ids-comp-icon-button-filled-color-border-dark-focused);
243
243
  }
244
244
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-dark:active {
245
245
  background: var(--ids-comp-icon-button-filled-color-bg-dark-pressed);
246
246
  color: var(--ids-comp-icon-button-filled-color-fg-dark-pressed);
247
- border-color: var(--ids-comp-icon-button-filled-color-border-dark-pressed, rgba(255, 255, 255, 0));
247
+ border-color: var(--ids-comp-icon-button-filled-color-border-dark-pressed);
248
248
  }
249
249
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-dark:disabled {
250
250
  background: var(--ids-comp-icon-button-filled-color-bg-dark-disabled);
251
251
  color: var(--ids-comp-icon-button-filled-color-fg-dark-disabled);
252
- border-color: var(--ids-comp-icon-button-filled-color-border-dark-disabled, rgba(255, 255, 255, 0));
252
+ border-color: var(--ids-comp-icon-button-filled-color-border-dark-disabled);
253
253
  }
254
254
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-surface {
255
255
  color: var(--ids-comp-icon-button-filled-color-fg-surface-enabled);
256
256
  background: var(--ids-comp-icon-button-filled-color-bg-surface-enabled);
257
- border-color: var(--ids-comp-icon-button-filled-color-border-surface-enabled, rgba(255, 255, 255, 0));
257
+ border-color: var(--ids-comp-icon-button-filled-color-border-surface-enabled);
258
258
  }
259
259
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-surface:hover {
260
260
  background: var(--ids-comp-icon-button-filled-color-bg-surface-hovered);
261
- border-color: var(--ids-comp-icon-button-filled-color-border-surface-hovered, rgba(255, 255, 255, 0));
261
+ border-color: var(--ids-comp-icon-button-filled-color-border-surface-hovered);
262
262
  }
263
263
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-surface:focus {
264
264
  background: var(--ids-comp-icon-button-filled-color-bg-surface-focused);
265
265
  color: var(--ids-comp-icon-button-filled-color-fg-surface-focused);
266
- border-color: var(--ids-comp-icon-button-filled-color-border-surface-focused, rgba(255, 255, 255, 0));
266
+ border-color: var(--ids-comp-icon-button-filled-color-border-surface-focused);
267
267
  }
268
268
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-surface:active {
269
269
  background: var(--ids-comp-icon-button-filled-color-bg-surface-pressed);
270
270
  color: var(--ids-comp-icon-button-filled-color-fg-surface-pressed);
271
- border-color: var(--ids-comp-icon-button-filled-color-border-surface-pressed, rgba(255, 255, 255, 0));
271
+ border-color: var(--ids-comp-icon-button-filled-color-border-surface-pressed);
272
272
  }
273
273
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-surface:disabled {
274
274
  background: var(--ids-comp-icon-button-filled-color-bg-surface-disabled);
275
275
  color: var(--ids-comp-icon-button-filled-color-fg-surface-disabled);
276
- border-color: var(--ids-comp-icon-button-filled-color-border-surface-disabled, rgba(255, 255, 255, 0));
276
+ border-color: var(--ids-comp-icon-button-filled-color-border-surface-disabled);
277
277
  }
278
278
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary {
279
279
  color: var(--ids-comp-icon-button-outlined-color-fg-primary-enabled);
280
280
  background: var(--ids-comp-icon-button-outlined-color-bg-primary-enabled);
281
- border-color: var(--ids-comp-icon-button-outlined-color-border-primary-enabled, rgba(255, 255, 255, 0));
281
+ border-color: var(--ids-comp-icon-button-outlined-color-border-primary-enabled);
282
282
  }
283
283
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary:hover {
284
284
  background: var(--ids-comp-icon-button-outlined-color-bg-primary-hovered);
285
- border-color: var(--ids-comp-icon-button-outlined-color-border-primary-hovered, rgba(255, 255, 255, 0));
285
+ border-color: var(--ids-comp-icon-button-outlined-color-border-primary-hovered);
286
286
  }
287
287
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary:focus {
288
288
  background: var(--ids-comp-icon-button-outlined-color-bg-primary-focused);
289
289
  color: var(--ids-comp-icon-button-outlined-color-fg-primary-focused);
290
- border-color: var(--ids-comp-icon-button-outlined-color-border-primary-focused, rgba(255, 255, 255, 0));
290
+ border-color: var(--ids-comp-icon-button-outlined-color-border-primary-focused);
291
291
  }
292
292
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary:active {
293
293
  background: var(--ids-comp-icon-button-outlined-color-bg-primary-pressed);
294
294
  color: var(--ids-comp-icon-button-outlined-color-fg-primary-pressed);
295
- border-color: var(--ids-comp-icon-button-outlined-color-border-primary-pressed, rgba(255, 255, 255, 0));
295
+ border-color: var(--ids-comp-icon-button-outlined-color-border-primary-pressed);
296
296
  }
297
297
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary:disabled {
298
298
  background: var(--ids-comp-icon-button-outlined-color-bg-primary-disabled);
299
299
  color: var(--ids-comp-icon-button-outlined-color-fg-primary-disabled);
300
- border-color: var(--ids-comp-icon-button-outlined-color-border-primary-disabled, rgba(255, 255, 255, 0));
300
+ border-color: var(--ids-comp-icon-button-outlined-color-border-primary-disabled);
301
301
  }
302
302
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary {
303
303
  color: var(--ids-comp-icon-button-outlined-color-fg-secondary-enabled);
304
304
  background: var(--ids-comp-icon-button-outlined-color-bg-secondary-enabled);
305
- border-color: var(--ids-comp-icon-button-outlined-color-border-secondary-enabled, rgba(255, 255, 255, 0));
305
+ border-color: var(--ids-comp-icon-button-outlined-color-border-secondary-enabled);
306
306
  }
307
307
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary:hover {
308
308
  background: var(--ids-comp-icon-button-outlined-color-bg-secondary-hovered);
309
- border-color: var(--ids-comp-icon-button-outlined-color-border-secondary-hovered, rgba(255, 255, 255, 0));
309
+ border-color: var(--ids-comp-icon-button-outlined-color-border-secondary-hovered);
310
310
  }
311
311
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary:focus {
312
312
  background: var(--ids-comp-icon-button-outlined-color-bg-secondary-focused);
313
313
  color: var(--ids-comp-icon-button-outlined-color-fg-secondary-focused);
314
- border-color: var(--ids-comp-icon-button-outlined-color-border-secondary-focused, rgba(255, 255, 255, 0));
314
+ border-color: var(--ids-comp-icon-button-outlined-color-border-secondary-focused);
315
315
  }
316
316
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary:active {
317
317
  background: var(--ids-comp-icon-button-outlined-color-bg-secondary-pressed);
318
318
  color: var(--ids-comp-icon-button-outlined-color-fg-secondary-pressed);
319
- border-color: var(--ids-comp-icon-button-outlined-color-border-secondary-pressed, rgba(255, 255, 255, 0));
319
+ border-color: var(--ids-comp-icon-button-outlined-color-border-secondary-pressed);
320
320
  }
321
321
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary:disabled {
322
322
  background: var(--ids-comp-icon-button-outlined-color-bg-secondary-disabled);
323
323
  color: var(--ids-comp-icon-button-outlined-color-fg-secondary-disabled);
324
- border-color: var(--ids-comp-icon-button-outlined-color-border-secondary-disabled, rgba(255, 255, 255, 0));
324
+ border-color: var(--ids-comp-icon-button-outlined-color-border-secondary-disabled);
325
325
  }
326
326
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand {
327
327
  color: var(--ids-comp-icon-button-outlined-color-fg-brand-enabled);
328
328
  background: var(--ids-comp-icon-button-outlined-color-bg-brand-enabled);
329
- border-color: var(--ids-comp-icon-button-outlined-color-border-brand-enabled, rgba(255, 255, 255, 0));
329
+ border-color: var(--ids-comp-icon-button-outlined-color-border-brand-enabled);
330
330
  }
331
331
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand:hover {
332
332
  background: var(--ids-comp-icon-button-outlined-color-bg-brand-hovered);
333
- border-color: var(--ids-comp-icon-button-outlined-color-border-brand-hovered, rgba(255, 255, 255, 0));
333
+ border-color: var(--ids-comp-icon-button-outlined-color-border-brand-hovered);
334
334
  }
335
335
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand:focus {
336
336
  background: var(--ids-comp-icon-button-outlined-color-bg-brand-focused);
337
337
  color: var(--ids-comp-icon-button-outlined-color-fg-brand-focused);
338
- border-color: var(--ids-comp-icon-button-outlined-color-border-brand-focused, rgba(255, 255, 255, 0));
338
+ border-color: var(--ids-comp-icon-button-outlined-color-border-brand-focused);
339
339
  }
340
340
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand:active {
341
341
  background: var(--ids-comp-icon-button-outlined-color-bg-brand-pressed);
342
342
  color: var(--ids-comp-icon-button-outlined-color-fg-brand-pressed);
343
- border-color: var(--ids-comp-icon-button-outlined-color-border-brand-pressed, rgba(255, 255, 255, 0));
343
+ border-color: var(--ids-comp-icon-button-outlined-color-border-brand-pressed);
344
344
  }
345
345
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand:disabled {
346
346
  background: var(--ids-comp-icon-button-outlined-color-bg-brand-disabled);
347
347
  color: var(--ids-comp-icon-button-outlined-color-fg-brand-disabled);
348
- border-color: var(--ids-comp-icon-button-outlined-color-border-brand-disabled, rgba(255, 255, 255, 0));
348
+ border-color: var(--ids-comp-icon-button-outlined-color-border-brand-disabled);
349
349
  }
350
350
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-error {
351
351
  color: var(--ids-comp-icon-button-outlined-color-fg-error-enabled);
352
352
  background: var(--ids-comp-icon-button-outlined-color-bg-error-enabled);
353
- border-color: var(--ids-comp-icon-button-outlined-color-border-error-enabled, rgba(255, 255, 255, 0));
353
+ border-color: var(--ids-comp-icon-button-outlined-color-border-error-enabled);
354
354
  }
355
355
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-error:hover {
356
356
  background: var(--ids-comp-icon-button-outlined-color-bg-error-hovered);
357
- border-color: var(--ids-comp-icon-button-outlined-color-border-error-hovered, rgba(255, 255, 255, 0));
357
+ border-color: var(--ids-comp-icon-button-outlined-color-border-error-hovered);
358
358
  }
359
359
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-error:focus {
360
360
  background: var(--ids-comp-icon-button-outlined-color-bg-error-focused);
361
361
  color: var(--ids-comp-icon-button-outlined-color-fg-error-focused);
362
- border-color: var(--ids-comp-icon-button-outlined-color-border-error-focused, rgba(255, 255, 255, 0));
362
+ border-color: var(--ids-comp-icon-button-outlined-color-border-error-focused);
363
363
  }
364
364
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-error:active {
365
365
  background: var(--ids-comp-icon-button-outlined-color-bg-error-pressed);
366
366
  color: var(--ids-comp-icon-button-outlined-color-fg-error-pressed);
367
- border-color: var(--ids-comp-icon-button-outlined-color-border-error-pressed, rgba(255, 255, 255, 0));
367
+ border-color: var(--ids-comp-icon-button-outlined-color-border-error-pressed);
368
368
  }
369
369
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-error:disabled {
370
370
  background: var(--ids-comp-icon-button-outlined-color-bg-error-disabled);
371
371
  color: var(--ids-comp-icon-button-outlined-color-fg-error-disabled);
372
- border-color: var(--ids-comp-icon-button-outlined-color-border-error-disabled, rgba(255, 255, 255, 0));
372
+ border-color: var(--ids-comp-icon-button-outlined-color-border-error-disabled);
373
373
  }
374
374
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-success {
375
375
  color: var(--ids-comp-icon-button-outlined-color-fg-success-enabled);
376
376
  background: var(--ids-comp-icon-button-outlined-color-bg-success-enabled);
377
- border-color: var(--ids-comp-icon-button-outlined-color-border-success-enabled, rgba(255, 255, 255, 0));
377
+ border-color: var(--ids-comp-icon-button-outlined-color-border-success-enabled);
378
378
  }
379
379
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-success:hover {
380
380
  background: var(--ids-comp-icon-button-outlined-color-bg-success-hovered);
381
- border-color: var(--ids-comp-icon-button-outlined-color-border-success-hovered, rgba(255, 255, 255, 0));
381
+ border-color: var(--ids-comp-icon-button-outlined-color-border-success-hovered);
382
382
  }
383
383
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-success:focus {
384
384
  background: var(--ids-comp-icon-button-outlined-color-bg-success-focused);
385
385
  color: var(--ids-comp-icon-button-outlined-color-fg-success-focused);
386
- border-color: var(--ids-comp-icon-button-outlined-color-border-success-focused, rgba(255, 255, 255, 0));
386
+ border-color: var(--ids-comp-icon-button-outlined-color-border-success-focused);
387
387
  }
388
388
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-success:active {
389
389
  background: var(--ids-comp-icon-button-outlined-color-bg-success-pressed);
390
390
  color: var(--ids-comp-icon-button-outlined-color-fg-success-pressed);
391
- border-color: var(--ids-comp-icon-button-outlined-color-border-success-pressed, rgba(255, 255, 255, 0));
391
+ border-color: var(--ids-comp-icon-button-outlined-color-border-success-pressed);
392
392
  }
393
393
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-success:disabled {
394
394
  background: var(--ids-comp-icon-button-outlined-color-bg-success-disabled);
395
395
  color: var(--ids-comp-icon-button-outlined-color-fg-success-disabled);
396
- border-color: var(--ids-comp-icon-button-outlined-color-border-success-disabled, rgba(255, 255, 255, 0));
396
+ border-color: var(--ids-comp-icon-button-outlined-color-border-success-disabled);
397
397
  }
398
398
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning {
399
399
  color: var(--ids-comp-icon-button-outlined-color-fg-warning-enabled);
400
400
  background: var(--ids-comp-icon-button-outlined-color-bg-warning-enabled);
401
- border-color: var(--ids-comp-icon-button-outlined-color-border-warning-enabled, rgba(255, 255, 255, 0));
401
+ border-color: var(--ids-comp-icon-button-outlined-color-border-warning-enabled);
402
402
  }
403
403
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning:hover {
404
404
  background: var(--ids-comp-icon-button-outlined-color-bg-warning-hovered);
405
- border-color: var(--ids-comp-icon-button-outlined-color-border-warning-hovered, rgba(255, 255, 255, 0));
405
+ border-color: var(--ids-comp-icon-button-outlined-color-border-warning-hovered);
406
406
  }
407
407
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning:focus {
408
408
  background: var(--ids-comp-icon-button-outlined-color-bg-warning-focused);
409
409
  color: var(--ids-comp-icon-button-outlined-color-fg-warning-focused);
410
- border-color: var(--ids-comp-icon-button-outlined-color-border-warning-focused, rgba(255, 255, 255, 0));
410
+ border-color: var(--ids-comp-icon-button-outlined-color-border-warning-focused);
411
411
  }
412
412
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning:active {
413
413
  background: var(--ids-comp-icon-button-outlined-color-bg-warning-pressed);
414
414
  color: var(--ids-comp-icon-button-outlined-color-fg-warning-pressed);
415
- border-color: var(--ids-comp-icon-button-outlined-color-border-warning-pressed, rgba(255, 255, 255, 0));
415
+ border-color: var(--ids-comp-icon-button-outlined-color-border-warning-pressed);
416
416
  }
417
417
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning:disabled {
418
418
  background: var(--ids-comp-icon-button-outlined-color-bg-warning-disabled);
419
419
  color: var(--ids-comp-icon-button-outlined-color-fg-warning-disabled);
420
- border-color: var(--ids-comp-icon-button-outlined-color-border-warning-disabled, rgba(255, 255, 255, 0));
420
+ border-color: var(--ids-comp-icon-button-outlined-color-border-warning-disabled);
421
421
  }
422
422
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-light {
423
423
  color: var(--ids-comp-icon-button-outlined-color-fg-light-enabled);
424
424
  background: var(--ids-comp-icon-button-outlined-color-bg-light-enabled);
425
- border-color: var(--ids-comp-icon-button-outlined-color-border-light-enabled, rgba(255, 255, 255, 0));
425
+ border-color: var(--ids-comp-icon-button-outlined-color-border-light-enabled);
426
426
  }
427
427
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-light:hover {
428
428
  background: var(--ids-comp-icon-button-outlined-color-bg-light-hovered);
429
- border-color: var(--ids-comp-icon-button-outlined-color-border-light-hovered, rgba(255, 255, 255, 0));
429
+ border-color: var(--ids-comp-icon-button-outlined-color-border-light-hovered);
430
430
  }
431
431
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-light:focus {
432
432
  background: var(--ids-comp-icon-button-outlined-color-bg-light-focused);
433
433
  color: var(--ids-comp-icon-button-outlined-color-fg-light-focused);
434
- border-color: var(--ids-comp-icon-button-outlined-color-border-light-focused, rgba(255, 255, 255, 0));
434
+ border-color: var(--ids-comp-icon-button-outlined-color-border-light-focused);
435
435
  }
436
436
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-light:active {
437
437
  background: var(--ids-comp-icon-button-outlined-color-bg-light-pressed);
438
438
  color: var(--ids-comp-icon-button-outlined-color-fg-light-pressed);
439
- border-color: var(--ids-comp-icon-button-outlined-color-border-light-pressed, rgba(255, 255, 255, 0));
439
+ border-color: var(--ids-comp-icon-button-outlined-color-border-light-pressed);
440
440
  }
441
441
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-light:disabled {
442
442
  background: var(--ids-comp-icon-button-outlined-color-bg-light-disabled);
443
443
  color: var(--ids-comp-icon-button-outlined-color-fg-light-disabled);
444
- border-color: var(--ids-comp-icon-button-outlined-color-border-light-disabled, rgba(255, 255, 255, 0));
444
+ border-color: var(--ids-comp-icon-button-outlined-color-border-light-disabled);
445
445
  }
446
446
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark {
447
447
  color: var(--ids-comp-icon-button-outlined-color-fg-dark-enabled);
448
448
  background: var(--ids-comp-icon-button-outlined-color-bg-dark-enabled);
449
- border-color: var(--ids-comp-icon-button-outlined-color-border-dark-enabled, rgba(255, 255, 255, 0));
449
+ border-color: var(--ids-comp-icon-button-outlined-color-border-dark-enabled);
450
450
  }
451
451
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark:hover {
452
452
  background: var(--ids-comp-icon-button-outlined-color-bg-dark-hovered);
453
- border-color: var(--ids-comp-icon-button-outlined-color-border-dark-hovered, rgba(255, 255, 255, 0));
453
+ border-color: var(--ids-comp-icon-button-outlined-color-border-dark-hovered);
454
454
  }
455
455
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark:focus {
456
456
  background: var(--ids-comp-icon-button-outlined-color-bg-dark-focused);
457
457
  color: var(--ids-comp-icon-button-outlined-color-fg-dark-focused);
458
- border-color: var(--ids-comp-icon-button-outlined-color-border-dark-focused, rgba(255, 255, 255, 0));
458
+ border-color: var(--ids-comp-icon-button-outlined-color-border-dark-focused);
459
459
  }
460
460
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark:active {
461
461
  background: var(--ids-comp-icon-button-outlined-color-bg-dark-pressed);
462
462
  color: var(--ids-comp-icon-button-outlined-color-fg-dark-pressed);
463
- border-color: var(--ids-comp-icon-button-outlined-color-border-dark-pressed, rgba(255, 255, 255, 0));
463
+ border-color: var(--ids-comp-icon-button-outlined-color-border-dark-pressed);
464
464
  }
465
465
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark:disabled {
466
466
  background: var(--ids-comp-icon-button-outlined-color-bg-dark-disabled);
467
467
  color: var(--ids-comp-icon-button-outlined-color-fg-dark-disabled);
468
- border-color: var(--ids-comp-icon-button-outlined-color-border-dark-disabled, rgba(255, 255, 255, 0));
468
+ border-color: var(--ids-comp-icon-button-outlined-color-border-dark-disabled);
469
469
  }
470
470
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface {
471
471
  color: var(--ids-comp-icon-button-outlined-color-fg-surface-enabled);
472
472
  background: var(--ids-comp-icon-button-outlined-color-bg-surface-enabled);
473
- border-color: var(--ids-comp-icon-button-outlined-color-border-surface-enabled, rgba(255, 255, 255, 0));
473
+ border-color: var(--ids-comp-icon-button-outlined-color-border-surface-enabled);
474
474
  }
475
475
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface:hover {
476
476
  background: var(--ids-comp-icon-button-outlined-color-bg-surface-hovered);
477
- border-color: var(--ids-comp-icon-button-outlined-color-border-surface-hovered, rgba(255, 255, 255, 0));
477
+ border-color: var(--ids-comp-icon-button-outlined-color-border-surface-hovered);
478
478
  }
479
479
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface:focus {
480
480
  background: var(--ids-comp-icon-button-outlined-color-bg-surface-focused);
481
481
  color: var(--ids-comp-icon-button-outlined-color-fg-surface-focused);
482
- border-color: var(--ids-comp-icon-button-outlined-color-border-surface-focused, rgba(255, 255, 255, 0));
482
+ border-color: var(--ids-comp-icon-button-outlined-color-border-surface-focused);
483
483
  }
484
484
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface:active {
485
485
  background: var(--ids-comp-icon-button-outlined-color-bg-surface-pressed);
486
486
  color: var(--ids-comp-icon-button-outlined-color-fg-surface-pressed);
487
- border-color: var(--ids-comp-icon-button-outlined-color-border-surface-pressed, rgba(255, 255, 255, 0));
487
+ border-color: var(--ids-comp-icon-button-outlined-color-border-surface-pressed);
488
488
  }
489
489
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface:disabled {
490
490
  background: var(--ids-comp-icon-button-outlined-color-bg-surface-disabled);
491
491
  color: var(--ids-comp-icon-button-outlined-color-fg-surface-disabled);
492
- border-color: var(--ids-comp-icon-button-outlined-color-border-surface-disabled, rgba(255, 255, 255, 0));
492
+ border-color: var(--ids-comp-icon-button-outlined-color-border-surface-disabled);
493
493
  }
494
494
  .ids-icon-button.ids-icon-button-standard {
495
495
  border: none;