@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/button/button.css CHANGED
@@ -1,6 +1,5 @@
1
1
  .ids-button {
2
2
  flex-shrink: 0;
3
- font-weight: 700;
4
3
  width: fit-content;
5
4
  align-items: center;
6
5
  display: inline-flex;
@@ -23,27 +22,20 @@
23
22
  align-items: center;
24
23
  justify-content: center;
25
24
  }
26
- .ids-button .ids-button-label {
27
- @apply font-bold not-italic;
28
- }
29
- .ids-button.ids-button-compact .ids-button-label {
30
- @apply text-xs;
31
- }
32
- .ids-button.ids-button-comfortable .ids-button-label {
33
- @apply text-sm;
34
- }
35
- .ids-button.ids-button-spacious .ids-button-label {
36
- @apply text-lg leading-6;
37
- }
38
25
  .ids-button.ids-button-compact {
39
- font-size: 12px;
40
- line-height: 16px;
41
- gap: var(--ids-comp-size-buttons-size-gap-compact, 4px);
42
- height: var(--ids-comp-size-buttons-size-height-compact, 24px);
43
- min-width: var(--ids-comp-size-buttons-size-min-width-compact, 24px);
44
- padding: var(--ids-comp-size-buttons-size-padding-y-compact, 6px) var(--ids-comp-size-buttons-size-padding-x-compact, 8px);
45
- border-radius: var(--ids-comp-size-buttons-size-border-radius-compact, 1000px);
46
- border: var(--ids-comp-size-buttons-size-border-width-compact, 1px) solid;
26
+ gap: var(--ids-comp-size-buttons-size-gap-compact);
27
+ height: var(--ids-comp-size-buttons-size-height-compact);
28
+ min-width: var(--ids-comp-size-buttons-size-min-width-compact);
29
+ padding: var(--ids-comp-size-buttons-size-padding-y-compact) var(--ids-comp-size-buttons-size-padding-x-compact);
30
+ border-radius: var(--ids-comp-size-buttons-size-border-radius-compact);
31
+ border: var(--ids-comp-size-buttons-size-border-width-compact) solid;
32
+ }
33
+ .ids-button.ids-button-compact > .ids-button-label {
34
+ font-family: var(--ids-comp-size-buttons-label-typography-font-family-compact);
35
+ font-size: var(--ids-comp-size-buttons-label-typography-font-size-compact);
36
+ font-weight: var(--ids-comp-size-buttons-label-typography-font-weight-compact);
37
+ letter-spacing: var(--ids-comp-size-buttons-label-typography-letter-spacing-compact);
38
+ line-height: var(--ids-comp-size-buttons-label-typography-line-height-compact);
47
39
  }
48
40
  .ids-button.ids-button-compact *[icon-leading],
49
41
  .ids-button.ids-button-compact *[icon-trailing] {
@@ -51,14 +43,19 @@
51
43
  height: var(--ids-comp-size-buttons-size-icon-compact);
52
44
  }
53
45
  .ids-button.ids-button-comfortable {
54
- font-size: 12px;
55
- line-height: 16px;
56
- gap: var(--ids-comp-size-buttons-size-gap-comfortable, 4px);
57
- height: var(--ids-comp-size-buttons-size-height-comfortable, 24px);
58
- min-width: var(--ids-comp-size-buttons-size-min-width-comfortable, 24px);
59
- padding: var(--ids-comp-size-buttons-size-padding-y-comfortable, 6px) var(--ids-comp-size-buttons-size-padding-x-comfortable, 8px);
60
- border-radius: var(--ids-comp-size-buttons-size-border-radius-comfortable, 1000px);
61
- border: var(--ids-comp-size-buttons-size-border-width-comfortable, 1px) solid;
46
+ gap: var(--ids-comp-size-buttons-size-gap-comfortable);
47
+ height: var(--ids-comp-size-buttons-size-height-comfortable);
48
+ min-width: var(--ids-comp-size-buttons-size-min-width-comfortable);
49
+ padding: var(--ids-comp-size-buttons-size-padding-y-comfortable) var(--ids-comp-size-buttons-size-padding-x-comfortable);
50
+ border-radius: var(--ids-comp-size-buttons-size-border-radius-comfortable);
51
+ border: var(--ids-comp-size-buttons-size-border-width-comfortable) solid;
52
+ }
53
+ .ids-button.ids-button-comfortable > .ids-button-label {
54
+ font-family: var(--ids-comp-size-buttons-label-typography-font-family-comfortable);
55
+ font-size: var(--ids-comp-size-buttons-label-typography-font-size-comfortable);
56
+ font-weight: var(--ids-comp-size-buttons-label-typography-font-weight-comfortable);
57
+ letter-spacing: var(--ids-comp-size-buttons-label-typography-letter-spacing-comfortable);
58
+ line-height: var(--ids-comp-size-buttons-label-typography-line-height-comfortable);
62
59
  }
63
60
  .ids-button.ids-button-comfortable *[icon-leading],
64
61
  .ids-button.ids-button-comfortable *[icon-trailing] {
@@ -66,14 +63,19 @@
66
63
  height: var(--ids-comp-size-buttons-size-icon-comfortable);
67
64
  }
68
65
  .ids-button.ids-button-spacious {
69
- font-size: 12px;
70
- line-height: 16px;
71
- gap: var(--ids-comp-size-buttons-size-gap-spacious, 4px);
72
- height: var(--ids-comp-size-buttons-size-height-spacious, 24px);
73
- min-width: var(--ids-comp-size-buttons-size-min-width-spacious, 24px);
74
- padding: var(--ids-comp-size-buttons-size-padding-y-spacious, 6px) var(--ids-comp-size-buttons-size-padding-x-spacious, 8px);
75
- border-radius: var(--ids-comp-size-buttons-size-border-radius-spacious, 1000px);
76
- border: var(--ids-comp-size-buttons-size-border-width-spacious, 1px) solid;
66
+ gap: var(--ids-comp-size-buttons-size-gap-spacious);
67
+ height: var(--ids-comp-size-buttons-size-height-spacious);
68
+ min-width: var(--ids-comp-size-buttons-size-min-width-spacious);
69
+ padding: var(--ids-comp-size-buttons-size-padding-y-spacious) var(--ids-comp-size-buttons-size-padding-x-spacious);
70
+ border-radius: var(--ids-comp-size-buttons-size-border-radius-spacious);
71
+ border: var(--ids-comp-size-buttons-size-border-width-spacious) solid;
72
+ }
73
+ .ids-button.ids-button-spacious > .ids-button-label {
74
+ font-family: var(--ids-comp-size-buttons-label-typography-font-family-spacious);
75
+ font-size: var(--ids-comp-size-buttons-label-typography-font-size-spacious);
76
+ font-weight: var(--ids-comp-size-buttons-label-typography-font-weight-spacious);
77
+ letter-spacing: var(--ids-comp-size-buttons-label-typography-letter-spacing-spacious);
78
+ line-height: var(--ids-comp-size-buttons-label-typography-line-height-spacious);
77
79
  }
78
80
  .ids-button.ids-button-spacious *[icon-leading],
79
81
  .ids-button.ids-button-spacious *[icon-trailing] {
@@ -81,14 +83,19 @@
81
83
  height: var(--ids-comp-size-buttons-size-icon-spacious);
82
84
  }
83
85
  .ids-button.ids-button-dense {
84
- font-size: 12px;
85
- line-height: 16px;
86
- gap: var(--ids-comp-size-buttons-size-gap-dense, 4px);
87
- height: var(--ids-comp-size-buttons-size-height-dense, 24px);
88
- min-width: var(--ids-comp-size-buttons-size-min-width-dense, 24px);
89
- padding: var(--ids-comp-size-buttons-size-padding-y-dense, 6px) var(--ids-comp-size-buttons-size-padding-x-dense, 8px);
90
- border-radius: var(--ids-comp-size-buttons-size-border-radius-dense, 1000px);
91
- border: var(--ids-comp-size-buttons-size-border-width-dense, 1px) solid;
86
+ gap: var(--ids-comp-size-buttons-size-gap-dense);
87
+ height: var(--ids-comp-size-buttons-size-height-dense);
88
+ min-width: var(--ids-comp-size-buttons-size-min-width-dense);
89
+ padding: var(--ids-comp-size-buttons-size-padding-y-dense) var(--ids-comp-size-buttons-size-padding-x-dense);
90
+ border-radius: var(--ids-comp-size-buttons-size-border-radius-dense);
91
+ border: var(--ids-comp-size-buttons-size-border-width-dense) solid;
92
+ }
93
+ .ids-button.ids-button-dense > .ids-button-label {
94
+ font-family: var(--ids-comp-size-buttons-label-typography-font-family-dense);
95
+ font-size: var(--ids-comp-size-buttons-label-typography-font-size-dense);
96
+ font-weight: var(--ids-comp-size-buttons-label-typography-font-weight-dense);
97
+ letter-spacing: var(--ids-comp-size-buttons-label-typography-letter-spacing-dense);
98
+ line-height: var(--ids-comp-size-buttons-label-typography-line-height-dense);
92
99
  }
93
100
  .ids-button.ids-button-dense *[icon-leading],
94
101
  .ids-button.ids-button-dense *[icon-trailing] {
@@ -98,702 +105,702 @@
98
105
  .ids-button.ids-button-filled.ids-button-primary {
99
106
  color: var(--ids-comp-buttons-filled-color-fg-label-primary-enabled);
100
107
  background: var(--ids-comp-buttons-filled-color-bg-primary-enabled);
101
- border-color: var(--ids-comp-buttons-filled-color-border-primary-enabled, rgba(255, 255, 255, 0));
108
+ border-color: var(--ids-comp-buttons-filled-color-border-primary-enabled);
102
109
  }
103
110
  .ids-button.ids-button-filled.ids-button-primary:hover {
104
111
  background: var(--ids-comp-buttons-filled-color-bg-primary-hovered);
105
112
  color: var(--ids-comp-buttons-filled-color-fg-label-primary-hovered);
106
- border-color: var(--ids-comp-buttons-filled-color-border-primary-hovered, rgba(255, 255, 255, 0));
113
+ border-color: var(--ids-comp-buttons-filled-color-border-primary-hovered);
107
114
  }
108
115
  .ids-button.ids-button-filled.ids-button-primary:focus {
109
116
  outline-offset: 2px;
110
117
  background: var(--ids-comp-buttons-filled-color-bg-primary-focused);
111
118
  color: var(--ids-comp-buttons-filled-color-fg-label-primary-focused);
112
- border-color: var(--ids-comp-buttons-filled-color-border-primary-focused, rgba(255, 255, 255, 0));
119
+ border-color: var(--ids-comp-buttons-filled-color-border-primary-focused);
113
120
  }
114
121
  .ids-button.ids-button-filled.ids-button-primary:active {
115
122
  background: var(--ids-comp-buttons-filled-color-bg-primary-pressed);
116
123
  color: var(--ids-comp-buttons-filled-color-fg-label-primary-pressed);
117
- border-color: var(--ids-comp-buttons-filled-color-border-primary-pressed, rgba(255, 255, 255, 0));
124
+ border-color: var(--ids-comp-buttons-filled-color-border-primary-pressed);
118
125
  }
119
126
  .ids-button.ids-button-filled.ids-button-primary:disabled {
120
127
  background: var(--ids-comp-buttons-filled-color-bg-primary-disabled);
121
128
  color: var(--ids-comp-buttons-filled-color-fg-label-primary-disabled);
122
- border-color: var(--ids-comp-buttons-filled-color-border-primary-disabled, rgba(255, 255, 255, 0));
129
+ border-color: var(--ids-comp-buttons-filled-color-border-primary-disabled);
123
130
  }
124
131
  .ids-button.ids-button-filled.ids-button-secondary {
125
132
  color: var(--ids-comp-buttons-filled-color-fg-label-secondary-enabled);
126
133
  background: var(--ids-comp-buttons-filled-color-bg-secondary-enabled);
127
- border-color: var(--ids-comp-buttons-filled-color-border-secondary-enabled, rgba(255, 255, 255, 0));
134
+ border-color: var(--ids-comp-buttons-filled-color-border-secondary-enabled);
128
135
  }
129
136
  .ids-button.ids-button-filled.ids-button-secondary:hover {
130
137
  background: var(--ids-comp-buttons-filled-color-bg-secondary-hovered);
131
138
  color: var(--ids-comp-buttons-filled-color-fg-label-secondary-hovered);
132
- border-color: var(--ids-comp-buttons-filled-color-border-secondary-hovered, rgba(255, 255, 255, 0));
139
+ border-color: var(--ids-comp-buttons-filled-color-border-secondary-hovered);
133
140
  }
134
141
  .ids-button.ids-button-filled.ids-button-secondary:focus {
135
142
  outline-offset: 2px;
136
143
  background: var(--ids-comp-buttons-filled-color-bg-secondary-focused);
137
144
  color: var(--ids-comp-buttons-filled-color-fg-label-secondary-focused);
138
- border-color: var(--ids-comp-buttons-filled-color-border-secondary-focused, rgba(255, 255, 255, 0));
145
+ border-color: var(--ids-comp-buttons-filled-color-border-secondary-focused);
139
146
  }
140
147
  .ids-button.ids-button-filled.ids-button-secondary:active {
141
148
  background: var(--ids-comp-buttons-filled-color-bg-secondary-pressed);
142
149
  color: var(--ids-comp-buttons-filled-color-fg-label-secondary-pressed);
143
- border-color: var(--ids-comp-buttons-filled-color-border-secondary-pressed, rgba(255, 255, 255, 0));
150
+ border-color: var(--ids-comp-buttons-filled-color-border-secondary-pressed);
144
151
  }
145
152
  .ids-button.ids-button-filled.ids-button-secondary:disabled {
146
153
  background: var(--ids-comp-buttons-filled-color-bg-secondary-disabled);
147
154
  color: var(--ids-comp-buttons-filled-color-fg-label-secondary-disabled);
148
- border-color: var(--ids-comp-buttons-filled-color-border-secondary-disabled, rgba(255, 255, 255, 0));
155
+ border-color: var(--ids-comp-buttons-filled-color-border-secondary-disabled);
149
156
  }
150
157
  .ids-button.ids-button-filled.ids-button-brand {
151
158
  color: var(--ids-comp-buttons-filled-color-fg-label-brand-enabled);
152
159
  background: var(--ids-comp-buttons-filled-color-bg-brand-enabled);
153
- border-color: var(--ids-comp-buttons-filled-color-border-brand-enabled, rgba(255, 255, 255, 0));
160
+ border-color: var(--ids-comp-buttons-filled-color-border-brand-enabled);
154
161
  }
155
162
  .ids-button.ids-button-filled.ids-button-brand:hover {
156
163
  background: var(--ids-comp-buttons-filled-color-bg-brand-hovered);
157
164
  color: var(--ids-comp-buttons-filled-color-fg-label-brand-hovered);
158
- border-color: var(--ids-comp-buttons-filled-color-border-brand-hovered, rgba(255, 255, 255, 0));
165
+ border-color: var(--ids-comp-buttons-filled-color-border-brand-hovered);
159
166
  }
160
167
  .ids-button.ids-button-filled.ids-button-brand:focus {
161
168
  outline-offset: 2px;
162
169
  background: var(--ids-comp-buttons-filled-color-bg-brand-focused);
163
170
  color: var(--ids-comp-buttons-filled-color-fg-label-brand-focused);
164
- border-color: var(--ids-comp-buttons-filled-color-border-brand-focused, rgba(255, 255, 255, 0));
171
+ border-color: var(--ids-comp-buttons-filled-color-border-brand-focused);
165
172
  }
166
173
  .ids-button.ids-button-filled.ids-button-brand:active {
167
174
  background: var(--ids-comp-buttons-filled-color-bg-brand-pressed);
168
175
  color: var(--ids-comp-buttons-filled-color-fg-label-brand-pressed);
169
- border-color: var(--ids-comp-buttons-filled-color-border-brand-pressed, rgba(255, 255, 255, 0));
176
+ border-color: var(--ids-comp-buttons-filled-color-border-brand-pressed);
170
177
  }
171
178
  .ids-button.ids-button-filled.ids-button-brand:disabled {
172
179
  background: var(--ids-comp-buttons-filled-color-bg-brand-disabled);
173
180
  color: var(--ids-comp-buttons-filled-color-fg-label-brand-disabled);
174
- border-color: var(--ids-comp-buttons-filled-color-border-brand-disabled, rgba(255, 255, 255, 0));
181
+ border-color: var(--ids-comp-buttons-filled-color-border-brand-disabled);
175
182
  }
176
183
  .ids-button.ids-button-filled.ids-button-error {
177
184
  color: var(--ids-comp-buttons-filled-color-fg-label-error-enabled);
178
185
  background: var(--ids-comp-buttons-filled-color-bg-error-enabled);
179
- border-color: var(--ids-comp-buttons-filled-color-border-error-enabled, rgba(255, 255, 255, 0));
186
+ border-color: var(--ids-comp-buttons-filled-color-border-error-enabled);
180
187
  }
181
188
  .ids-button.ids-button-filled.ids-button-error:hover {
182
189
  background: var(--ids-comp-buttons-filled-color-bg-error-hovered);
183
190
  color: var(--ids-comp-buttons-filled-color-fg-label-error-hovered);
184
- border-color: var(--ids-comp-buttons-filled-color-border-error-hovered, rgba(255, 255, 255, 0));
191
+ border-color: var(--ids-comp-buttons-filled-color-border-error-hovered);
185
192
  }
186
193
  .ids-button.ids-button-filled.ids-button-error:focus {
187
194
  outline-offset: 2px;
188
195
  background: var(--ids-comp-buttons-filled-color-bg-error-focused);
189
196
  color: var(--ids-comp-buttons-filled-color-fg-label-error-focused);
190
- border-color: var(--ids-comp-buttons-filled-color-border-error-focused, rgba(255, 255, 255, 0));
197
+ border-color: var(--ids-comp-buttons-filled-color-border-error-focused);
191
198
  }
192
199
  .ids-button.ids-button-filled.ids-button-error:active {
193
200
  background: var(--ids-comp-buttons-filled-color-bg-error-pressed);
194
201
  color: var(--ids-comp-buttons-filled-color-fg-label-error-pressed);
195
- border-color: var(--ids-comp-buttons-filled-color-border-error-pressed, rgba(255, 255, 255, 0));
202
+ border-color: var(--ids-comp-buttons-filled-color-border-error-pressed);
196
203
  }
197
204
  .ids-button.ids-button-filled.ids-button-error:disabled {
198
205
  background: var(--ids-comp-buttons-filled-color-bg-error-disabled);
199
206
  color: var(--ids-comp-buttons-filled-color-fg-label-error-disabled);
200
- border-color: var(--ids-comp-buttons-filled-color-border-error-disabled, rgba(255, 255, 255, 0));
207
+ border-color: var(--ids-comp-buttons-filled-color-border-error-disabled);
201
208
  }
202
209
  .ids-button.ids-button-filled.ids-button-success {
203
210
  color: var(--ids-comp-buttons-filled-color-fg-label-success-enabled);
204
211
  background: var(--ids-comp-buttons-filled-color-bg-success-enabled);
205
- border-color: var(--ids-comp-buttons-filled-color-border-success-enabled, rgba(255, 255, 255, 0));
212
+ border-color: var(--ids-comp-buttons-filled-color-border-success-enabled);
206
213
  }
207
214
  .ids-button.ids-button-filled.ids-button-success:hover {
208
215
  background: var(--ids-comp-buttons-filled-color-bg-success-hovered);
209
216
  color: var(--ids-comp-buttons-filled-color-fg-label-success-hovered);
210
- border-color: var(--ids-comp-buttons-filled-color-border-success-hovered, rgba(255, 255, 255, 0));
217
+ border-color: var(--ids-comp-buttons-filled-color-border-success-hovered);
211
218
  }
212
219
  .ids-button.ids-button-filled.ids-button-success:focus {
213
220
  outline-offset: 2px;
214
221
  background: var(--ids-comp-buttons-filled-color-bg-success-focused);
215
222
  color: var(--ids-comp-buttons-filled-color-fg-label-success-focused);
216
- border-color: var(--ids-comp-buttons-filled-color-border-success-focused, rgba(255, 255, 255, 0));
223
+ border-color: var(--ids-comp-buttons-filled-color-border-success-focused);
217
224
  }
218
225
  .ids-button.ids-button-filled.ids-button-success:active {
219
226
  background: var(--ids-comp-buttons-filled-color-bg-success-pressed);
220
227
  color: var(--ids-comp-buttons-filled-color-fg-label-success-pressed);
221
- border-color: var(--ids-comp-buttons-filled-color-border-success-pressed, rgba(255, 255, 255, 0));
228
+ border-color: var(--ids-comp-buttons-filled-color-border-success-pressed);
222
229
  }
223
230
  .ids-button.ids-button-filled.ids-button-success:disabled {
224
231
  background: var(--ids-comp-buttons-filled-color-bg-success-disabled);
225
232
  color: var(--ids-comp-buttons-filled-color-fg-label-success-disabled);
226
- border-color: var(--ids-comp-buttons-filled-color-border-success-disabled, rgba(255, 255, 255, 0));
233
+ border-color: var(--ids-comp-buttons-filled-color-border-success-disabled);
227
234
  }
228
235
  .ids-button.ids-button-filled.ids-button-warning {
229
236
  color: var(--ids-comp-buttons-filled-color-fg-label-warning-enabled);
230
237
  background: var(--ids-comp-buttons-filled-color-bg-warning-enabled);
231
- border-color: var(--ids-comp-buttons-filled-color-border-warning-enabled, rgba(255, 255, 255, 0));
238
+ border-color: var(--ids-comp-buttons-filled-color-border-warning-enabled);
232
239
  }
233
240
  .ids-button.ids-button-filled.ids-button-warning:hover {
234
241
  background: var(--ids-comp-buttons-filled-color-bg-warning-hovered);
235
242
  color: var(--ids-comp-buttons-filled-color-fg-label-warning-hovered);
236
- border-color: var(--ids-comp-buttons-filled-color-border-warning-hovered, rgba(255, 255, 255, 0));
243
+ border-color: var(--ids-comp-buttons-filled-color-border-warning-hovered);
237
244
  }
238
245
  .ids-button.ids-button-filled.ids-button-warning:focus {
239
246
  outline-offset: 2px;
240
247
  background: var(--ids-comp-buttons-filled-color-bg-warning-focused);
241
248
  color: var(--ids-comp-buttons-filled-color-fg-label-warning-focused);
242
- border-color: var(--ids-comp-buttons-filled-color-border-warning-focused, rgba(255, 255, 255, 0));
249
+ border-color: var(--ids-comp-buttons-filled-color-border-warning-focused);
243
250
  }
244
251
  .ids-button.ids-button-filled.ids-button-warning:active {
245
252
  background: var(--ids-comp-buttons-filled-color-bg-warning-pressed);
246
253
  color: var(--ids-comp-buttons-filled-color-fg-label-warning-pressed);
247
- border-color: var(--ids-comp-buttons-filled-color-border-warning-pressed, rgba(255, 255, 255, 0));
254
+ border-color: var(--ids-comp-buttons-filled-color-border-warning-pressed);
248
255
  }
249
256
  .ids-button.ids-button-filled.ids-button-warning:disabled {
250
257
  background: var(--ids-comp-buttons-filled-color-bg-warning-disabled);
251
258
  color: var(--ids-comp-buttons-filled-color-fg-label-warning-disabled);
252
- border-color: var(--ids-comp-buttons-filled-color-border-warning-disabled, rgba(255, 255, 255, 0));
259
+ border-color: var(--ids-comp-buttons-filled-color-border-warning-disabled);
253
260
  }
254
261
  .ids-button.ids-button-filled.ids-button-light {
255
262
  color: var(--ids-comp-buttons-filled-color-fg-label-light-enabled);
256
263
  background: var(--ids-comp-buttons-filled-color-bg-light-enabled);
257
- border-color: var(--ids-comp-buttons-filled-color-border-light-enabled, rgba(255, 255, 255, 0));
264
+ border-color: var(--ids-comp-buttons-filled-color-border-light-enabled);
258
265
  }
259
266
  .ids-button.ids-button-filled.ids-button-light:hover {
260
267
  background: var(--ids-comp-buttons-filled-color-bg-light-hovered);
261
268
  color: var(--ids-comp-buttons-filled-color-fg-label-light-hovered);
262
- border-color: var(--ids-comp-buttons-filled-color-border-light-hovered, rgba(255, 255, 255, 0));
269
+ border-color: var(--ids-comp-buttons-filled-color-border-light-hovered);
263
270
  }
264
271
  .ids-button.ids-button-filled.ids-button-light:focus {
265
272
  outline-offset: 2px;
266
273
  background: var(--ids-comp-buttons-filled-color-bg-light-focused);
267
274
  color: var(--ids-comp-buttons-filled-color-fg-label-light-focused);
268
- border-color: var(--ids-comp-buttons-filled-color-border-light-focused, rgba(255, 255, 255, 0));
275
+ border-color: var(--ids-comp-buttons-filled-color-border-light-focused);
269
276
  }
270
277
  .ids-button.ids-button-filled.ids-button-light:active {
271
278
  background: var(--ids-comp-buttons-filled-color-bg-light-pressed);
272
279
  color: var(--ids-comp-buttons-filled-color-fg-label-light-pressed);
273
- border-color: var(--ids-comp-buttons-filled-color-border-light-pressed, rgba(255, 255, 255, 0));
280
+ border-color: var(--ids-comp-buttons-filled-color-border-light-pressed);
274
281
  }
275
282
  .ids-button.ids-button-filled.ids-button-light:disabled {
276
283
  background: var(--ids-comp-buttons-filled-color-bg-light-disabled);
277
284
  color: var(--ids-comp-buttons-filled-color-fg-label-light-disabled);
278
- border-color: var(--ids-comp-buttons-filled-color-border-light-disabled, rgba(255, 255, 255, 0));
285
+ border-color: var(--ids-comp-buttons-filled-color-border-light-disabled);
279
286
  }
280
287
  .ids-button.ids-button-filled.ids-button-dark {
281
288
  color: var(--ids-comp-buttons-filled-color-fg-label-dark-enabled);
282
289
  background: var(--ids-comp-buttons-filled-color-bg-dark-enabled);
283
- border-color: var(--ids-comp-buttons-filled-color-border-dark-enabled, rgba(255, 255, 255, 0));
290
+ border-color: var(--ids-comp-buttons-filled-color-border-dark-enabled);
284
291
  }
285
292
  .ids-button.ids-button-filled.ids-button-dark:hover {
286
293
  background: var(--ids-comp-buttons-filled-color-bg-dark-hovered);
287
294
  color: var(--ids-comp-buttons-filled-color-fg-label-dark-hovered);
288
- border-color: var(--ids-comp-buttons-filled-color-border-dark-hovered, rgba(255, 255, 255, 0));
295
+ border-color: var(--ids-comp-buttons-filled-color-border-dark-hovered);
289
296
  }
290
297
  .ids-button.ids-button-filled.ids-button-dark:focus {
291
298
  outline-offset: 2px;
292
299
  background: var(--ids-comp-buttons-filled-color-bg-dark-focused);
293
300
  color: var(--ids-comp-buttons-filled-color-fg-label-dark-focused);
294
- border-color: var(--ids-comp-buttons-filled-color-border-dark-focused, rgba(255, 255, 255, 0));
301
+ border-color: var(--ids-comp-buttons-filled-color-border-dark-focused);
295
302
  }
296
303
  .ids-button.ids-button-filled.ids-button-dark:active {
297
304
  background: var(--ids-comp-buttons-filled-color-bg-dark-pressed);
298
305
  color: var(--ids-comp-buttons-filled-color-fg-label-dark-pressed);
299
- border-color: var(--ids-comp-buttons-filled-color-border-dark-pressed, rgba(255, 255, 255, 0));
306
+ border-color: var(--ids-comp-buttons-filled-color-border-dark-pressed);
300
307
  }
301
308
  .ids-button.ids-button-filled.ids-button-dark:disabled {
302
309
  background: var(--ids-comp-buttons-filled-color-bg-dark-disabled);
303
310
  color: var(--ids-comp-buttons-filled-color-fg-label-dark-disabled);
304
- border-color: var(--ids-comp-buttons-filled-color-border-dark-disabled, rgba(255, 255, 255, 0));
311
+ border-color: var(--ids-comp-buttons-filled-color-border-dark-disabled);
305
312
  }
306
313
  .ids-button.ids-button-filled.ids-button-surface {
307
314
  color: var(--ids-comp-buttons-filled-color-fg-label-surface-enabled);
308
315
  background: var(--ids-comp-buttons-filled-color-bg-surface-enabled);
309
- border-color: var(--ids-comp-buttons-filled-color-border-surface-enabled, rgba(255, 255, 255, 0));
316
+ border-color: var(--ids-comp-buttons-filled-color-border-surface-enabled);
310
317
  }
311
318
  .ids-button.ids-button-filled.ids-button-surface:hover {
312
319
  background: var(--ids-comp-buttons-filled-color-bg-surface-hovered);
313
320
  color: var(--ids-comp-buttons-filled-color-fg-label-surface-hovered);
314
- border-color: var(--ids-comp-buttons-filled-color-border-surface-hovered, rgba(255, 255, 255, 0));
321
+ border-color: var(--ids-comp-buttons-filled-color-border-surface-hovered);
315
322
  }
316
323
  .ids-button.ids-button-filled.ids-button-surface:focus {
317
324
  outline-offset: 2px;
318
325
  background: var(--ids-comp-buttons-filled-color-bg-surface-focused);
319
326
  color: var(--ids-comp-buttons-filled-color-fg-label-surface-focused);
320
- border-color: var(--ids-comp-buttons-filled-color-border-surface-focused, rgba(255, 255, 255, 0));
327
+ border-color: var(--ids-comp-buttons-filled-color-border-surface-focused);
321
328
  }
322
329
  .ids-button.ids-button-filled.ids-button-surface:active {
323
330
  background: var(--ids-comp-buttons-filled-color-bg-surface-pressed);
324
331
  color: var(--ids-comp-buttons-filled-color-fg-label-surface-pressed);
325
- border-color: var(--ids-comp-buttons-filled-color-border-surface-pressed, rgba(255, 255, 255, 0));
332
+ border-color: var(--ids-comp-buttons-filled-color-border-surface-pressed);
326
333
  }
327
334
  .ids-button.ids-button-filled.ids-button-surface:disabled {
328
335
  background: var(--ids-comp-buttons-filled-color-bg-surface-disabled);
329
336
  color: var(--ids-comp-buttons-filled-color-fg-label-surface-disabled);
330
- border-color: var(--ids-comp-buttons-filled-color-border-surface-disabled, rgba(255, 255, 255, 0));
337
+ border-color: var(--ids-comp-buttons-filled-color-border-surface-disabled);
331
338
  }
332
339
  .ids-button.ids-button-outlined.ids-button-primary {
333
340
  color: var(--ids-comp-buttons-outlined-color-fg-label-primary-enabled);
334
341
  background: var(--ids-comp-buttons-outlined-color-bg-primary-enabled);
335
- border-color: var(--ids-comp-buttons-outlined-color-border-primary-enabled, rgba(255, 255, 255, 0));
342
+ border-color: var(--ids-comp-buttons-outlined-color-border-primary-enabled);
336
343
  }
337
344
  .ids-button.ids-button-outlined.ids-button-primary:hover {
338
345
  background: var(--ids-comp-buttons-outlined-color-bg-primary-hovered);
339
346
  color: var(--ids-comp-buttons-outlined-color-fg-label-primary-hovered);
340
- border-color: var(--ids-comp-buttons-outlined-color-border-primary-hovered, rgba(255, 255, 255, 0));
347
+ border-color: var(--ids-comp-buttons-outlined-color-border-primary-hovered);
341
348
  }
342
349
  .ids-button.ids-button-outlined.ids-button-primary:focus {
343
350
  outline-offset: 2px;
344
351
  background: var(--ids-comp-buttons-outlined-color-bg-primary-focused);
345
352
  color: var(--ids-comp-buttons-outlined-color-fg-label-primary-focused);
346
- border-color: var(--ids-comp-buttons-outlined-color-border-primary-focused, rgba(255, 255, 255, 0));
353
+ border-color: var(--ids-comp-buttons-outlined-color-border-primary-focused);
347
354
  }
348
355
  .ids-button.ids-button-outlined.ids-button-primary:active {
349
356
  background: var(--ids-comp-buttons-outlined-color-bg-primary-pressed);
350
357
  color: var(--ids-comp-buttons-outlined-color-fg-label-primary-pressed);
351
- border-color: var(--ids-comp-buttons-outlined-color-border-primary-pressed, rgba(255, 255, 255, 0));
358
+ border-color: var(--ids-comp-buttons-outlined-color-border-primary-pressed);
352
359
  }
353
360
  .ids-button.ids-button-outlined.ids-button-primary:disabled {
354
361
  background: var(--ids-comp-buttons-outlined-color-bg-primary-disabled);
355
362
  color: var(--ids-comp-buttons-outlined-color-fg-label-primary-disabled);
356
- border-color: var(--ids-comp-buttons-outlined-color-border-primary-disabled, rgba(255, 255, 255, 0));
363
+ border-color: var(--ids-comp-buttons-outlined-color-border-primary-disabled);
357
364
  }
358
365
  .ids-button.ids-button-outlined.ids-button-secondary {
359
366
  color: var(--ids-comp-buttons-outlined-color-fg-label-secondary-enabled);
360
367
  background: var(--ids-comp-buttons-outlined-color-bg-secondary-enabled);
361
- border-color: var(--ids-comp-buttons-outlined-color-border-secondary-enabled, rgba(255, 255, 255, 0));
368
+ border-color: var(--ids-comp-buttons-outlined-color-border-secondary-enabled);
362
369
  }
363
370
  .ids-button.ids-button-outlined.ids-button-secondary:hover {
364
371
  background: var(--ids-comp-buttons-outlined-color-bg-secondary-hovered);
365
372
  color: var(--ids-comp-buttons-outlined-color-fg-label-secondary-hovered);
366
- border-color: var(--ids-comp-buttons-outlined-color-border-secondary-hovered, rgba(255, 255, 255, 0));
373
+ border-color: var(--ids-comp-buttons-outlined-color-border-secondary-hovered);
367
374
  }
368
375
  .ids-button.ids-button-outlined.ids-button-secondary:focus {
369
376
  outline-offset: 2px;
370
377
  background: var(--ids-comp-buttons-outlined-color-bg-secondary-focused);
371
378
  color: var(--ids-comp-buttons-outlined-color-fg-label-secondary-focused);
372
- border-color: var(--ids-comp-buttons-outlined-color-border-secondary-focused, rgba(255, 255, 255, 0));
379
+ border-color: var(--ids-comp-buttons-outlined-color-border-secondary-focused);
373
380
  }
374
381
  .ids-button.ids-button-outlined.ids-button-secondary:active {
375
382
  background: var(--ids-comp-buttons-outlined-color-bg-secondary-pressed);
376
383
  color: var(--ids-comp-buttons-outlined-color-fg-label-secondary-pressed);
377
- border-color: var(--ids-comp-buttons-outlined-color-border-secondary-pressed, rgba(255, 255, 255, 0));
384
+ border-color: var(--ids-comp-buttons-outlined-color-border-secondary-pressed);
378
385
  }
379
386
  .ids-button.ids-button-outlined.ids-button-secondary:disabled {
380
387
  background: var(--ids-comp-buttons-outlined-color-bg-secondary-disabled);
381
388
  color: var(--ids-comp-buttons-outlined-color-fg-label-secondary-disabled);
382
- border-color: var(--ids-comp-buttons-outlined-color-border-secondary-disabled, rgba(255, 255, 255, 0));
389
+ border-color: var(--ids-comp-buttons-outlined-color-border-secondary-disabled);
383
390
  }
384
391
  .ids-button.ids-button-outlined.ids-button-brand {
385
392
  color: var(--ids-comp-buttons-outlined-color-fg-label-brand-enabled);
386
393
  background: var(--ids-comp-buttons-outlined-color-bg-brand-enabled);
387
- border-color: var(--ids-comp-buttons-outlined-color-border-brand-enabled, rgba(255, 255, 255, 0));
394
+ border-color: var(--ids-comp-buttons-outlined-color-border-brand-enabled);
388
395
  }
389
396
  .ids-button.ids-button-outlined.ids-button-brand:hover {
390
397
  background: var(--ids-comp-buttons-outlined-color-bg-brand-hovered);
391
398
  color: var(--ids-comp-buttons-outlined-color-fg-label-brand-hovered);
392
- border-color: var(--ids-comp-buttons-outlined-color-border-brand-hovered, rgba(255, 255, 255, 0));
399
+ border-color: var(--ids-comp-buttons-outlined-color-border-brand-hovered);
393
400
  }
394
401
  .ids-button.ids-button-outlined.ids-button-brand:focus {
395
402
  outline-offset: 2px;
396
403
  background: var(--ids-comp-buttons-outlined-color-bg-brand-focused);
397
404
  color: var(--ids-comp-buttons-outlined-color-fg-label-brand-focused);
398
- border-color: var(--ids-comp-buttons-outlined-color-border-brand-focused, rgba(255, 255, 255, 0));
405
+ border-color: var(--ids-comp-buttons-outlined-color-border-brand-focused);
399
406
  }
400
407
  .ids-button.ids-button-outlined.ids-button-brand:active {
401
408
  background: var(--ids-comp-buttons-outlined-color-bg-brand-pressed);
402
409
  color: var(--ids-comp-buttons-outlined-color-fg-label-brand-pressed);
403
- border-color: var(--ids-comp-buttons-outlined-color-border-brand-pressed, rgba(255, 255, 255, 0));
410
+ border-color: var(--ids-comp-buttons-outlined-color-border-brand-pressed);
404
411
  }
405
412
  .ids-button.ids-button-outlined.ids-button-brand:disabled {
406
413
  background: var(--ids-comp-buttons-outlined-color-bg-brand-disabled);
407
414
  color: var(--ids-comp-buttons-outlined-color-fg-label-brand-disabled);
408
- border-color: var(--ids-comp-buttons-outlined-color-border-brand-disabled, rgba(255, 255, 255, 0));
415
+ border-color: var(--ids-comp-buttons-outlined-color-border-brand-disabled);
409
416
  }
410
417
  .ids-button.ids-button-outlined.ids-button-error {
411
418
  color: var(--ids-comp-buttons-outlined-color-fg-label-error-enabled);
412
419
  background: var(--ids-comp-buttons-outlined-color-bg-error-enabled);
413
- border-color: var(--ids-comp-buttons-outlined-color-border-error-enabled, rgba(255, 255, 255, 0));
420
+ border-color: var(--ids-comp-buttons-outlined-color-border-error-enabled);
414
421
  }
415
422
  .ids-button.ids-button-outlined.ids-button-error:hover {
416
423
  background: var(--ids-comp-buttons-outlined-color-bg-error-hovered);
417
424
  color: var(--ids-comp-buttons-outlined-color-fg-label-error-hovered);
418
- border-color: var(--ids-comp-buttons-outlined-color-border-error-hovered, rgba(255, 255, 255, 0));
425
+ border-color: var(--ids-comp-buttons-outlined-color-border-error-hovered);
419
426
  }
420
427
  .ids-button.ids-button-outlined.ids-button-error:focus {
421
428
  outline-offset: 2px;
422
429
  background: var(--ids-comp-buttons-outlined-color-bg-error-focused);
423
430
  color: var(--ids-comp-buttons-outlined-color-fg-label-error-focused);
424
- border-color: var(--ids-comp-buttons-outlined-color-border-error-focused, rgba(255, 255, 255, 0));
431
+ border-color: var(--ids-comp-buttons-outlined-color-border-error-focused);
425
432
  }
426
433
  .ids-button.ids-button-outlined.ids-button-error:active {
427
434
  background: var(--ids-comp-buttons-outlined-color-bg-error-pressed);
428
435
  color: var(--ids-comp-buttons-outlined-color-fg-label-error-pressed);
429
- border-color: var(--ids-comp-buttons-outlined-color-border-error-pressed, rgba(255, 255, 255, 0));
436
+ border-color: var(--ids-comp-buttons-outlined-color-border-error-pressed);
430
437
  }
431
438
  .ids-button.ids-button-outlined.ids-button-error:disabled {
432
439
  background: var(--ids-comp-buttons-outlined-color-bg-error-disabled);
433
440
  color: var(--ids-comp-buttons-outlined-color-fg-label-error-disabled);
434
- border-color: var(--ids-comp-buttons-outlined-color-border-error-disabled, rgba(255, 255, 255, 0));
441
+ border-color: var(--ids-comp-buttons-outlined-color-border-error-disabled);
435
442
  }
436
443
  .ids-button.ids-button-outlined.ids-button-success {
437
444
  color: var(--ids-comp-buttons-outlined-color-fg-label-success-enabled);
438
445
  background: var(--ids-comp-buttons-outlined-color-bg-success-enabled);
439
- border-color: var(--ids-comp-buttons-outlined-color-border-success-enabled, rgba(255, 255, 255, 0));
446
+ border-color: var(--ids-comp-buttons-outlined-color-border-success-enabled);
440
447
  }
441
448
  .ids-button.ids-button-outlined.ids-button-success:hover {
442
449
  background: var(--ids-comp-buttons-outlined-color-bg-success-hovered);
443
450
  color: var(--ids-comp-buttons-outlined-color-fg-label-success-hovered);
444
- border-color: var(--ids-comp-buttons-outlined-color-border-success-hovered, rgba(255, 255, 255, 0));
451
+ border-color: var(--ids-comp-buttons-outlined-color-border-success-hovered);
445
452
  }
446
453
  .ids-button.ids-button-outlined.ids-button-success:focus {
447
454
  outline-offset: 2px;
448
455
  background: var(--ids-comp-buttons-outlined-color-bg-success-focused);
449
456
  color: var(--ids-comp-buttons-outlined-color-fg-label-success-focused);
450
- border-color: var(--ids-comp-buttons-outlined-color-border-success-focused, rgba(255, 255, 255, 0));
457
+ border-color: var(--ids-comp-buttons-outlined-color-border-success-focused);
451
458
  }
452
459
  .ids-button.ids-button-outlined.ids-button-success:active {
453
460
  background: var(--ids-comp-buttons-outlined-color-bg-success-pressed);
454
461
  color: var(--ids-comp-buttons-outlined-color-fg-label-success-pressed);
455
- border-color: var(--ids-comp-buttons-outlined-color-border-success-pressed, rgba(255, 255, 255, 0));
462
+ border-color: var(--ids-comp-buttons-outlined-color-border-success-pressed);
456
463
  }
457
464
  .ids-button.ids-button-outlined.ids-button-success:disabled {
458
465
  background: var(--ids-comp-buttons-outlined-color-bg-success-disabled);
459
466
  color: var(--ids-comp-buttons-outlined-color-fg-label-success-disabled);
460
- border-color: var(--ids-comp-buttons-outlined-color-border-success-disabled, rgba(255, 255, 255, 0));
467
+ border-color: var(--ids-comp-buttons-outlined-color-border-success-disabled);
461
468
  }
462
469
  .ids-button.ids-button-outlined.ids-button-warning {
463
470
  color: var(--ids-comp-buttons-outlined-color-fg-label-warning-enabled);
464
471
  background: var(--ids-comp-buttons-outlined-color-bg-warning-enabled);
465
- border-color: var(--ids-comp-buttons-outlined-color-border-warning-enabled, rgba(255, 255, 255, 0));
472
+ border-color: var(--ids-comp-buttons-outlined-color-border-warning-enabled);
466
473
  }
467
474
  .ids-button.ids-button-outlined.ids-button-warning:hover {
468
475
  background: var(--ids-comp-buttons-outlined-color-bg-warning-hovered);
469
476
  color: var(--ids-comp-buttons-outlined-color-fg-label-warning-hovered);
470
- border-color: var(--ids-comp-buttons-outlined-color-border-warning-hovered, rgba(255, 255, 255, 0));
477
+ border-color: var(--ids-comp-buttons-outlined-color-border-warning-hovered);
471
478
  }
472
479
  .ids-button.ids-button-outlined.ids-button-warning:focus {
473
480
  outline-offset: 2px;
474
481
  background: var(--ids-comp-buttons-outlined-color-bg-warning-focused);
475
482
  color: var(--ids-comp-buttons-outlined-color-fg-label-warning-focused);
476
- border-color: var(--ids-comp-buttons-outlined-color-border-warning-focused, rgba(255, 255, 255, 0));
483
+ border-color: var(--ids-comp-buttons-outlined-color-border-warning-focused);
477
484
  }
478
485
  .ids-button.ids-button-outlined.ids-button-warning:active {
479
486
  background: var(--ids-comp-buttons-outlined-color-bg-warning-pressed);
480
487
  color: var(--ids-comp-buttons-outlined-color-fg-label-warning-pressed);
481
- border-color: var(--ids-comp-buttons-outlined-color-border-warning-pressed, rgba(255, 255, 255, 0));
488
+ border-color: var(--ids-comp-buttons-outlined-color-border-warning-pressed);
482
489
  }
483
490
  .ids-button.ids-button-outlined.ids-button-warning:disabled {
484
491
  background: var(--ids-comp-buttons-outlined-color-bg-warning-disabled);
485
492
  color: var(--ids-comp-buttons-outlined-color-fg-label-warning-disabled);
486
- border-color: var(--ids-comp-buttons-outlined-color-border-warning-disabled, rgba(255, 255, 255, 0));
493
+ border-color: var(--ids-comp-buttons-outlined-color-border-warning-disabled);
487
494
  }
488
495
  .ids-button.ids-button-outlined.ids-button-light {
489
496
  color: var(--ids-comp-buttons-outlined-color-fg-label-light-enabled);
490
497
  background: var(--ids-comp-buttons-outlined-color-bg-light-enabled);
491
- border-color: var(--ids-comp-buttons-outlined-color-border-light-enabled, rgba(255, 255, 255, 0));
498
+ border-color: var(--ids-comp-buttons-outlined-color-border-light-enabled);
492
499
  }
493
500
  .ids-button.ids-button-outlined.ids-button-light:hover {
494
501
  background: var(--ids-comp-buttons-outlined-color-bg-light-hovered);
495
502
  color: var(--ids-comp-buttons-outlined-color-fg-label-light-hovered);
496
- border-color: var(--ids-comp-buttons-outlined-color-border-light-hovered, rgba(255, 255, 255, 0));
503
+ border-color: var(--ids-comp-buttons-outlined-color-border-light-hovered);
497
504
  }
498
505
  .ids-button.ids-button-outlined.ids-button-light:focus {
499
506
  outline-offset: 2px;
500
507
  background: var(--ids-comp-buttons-outlined-color-bg-light-focused);
501
508
  color: var(--ids-comp-buttons-outlined-color-fg-label-light-focused);
502
- border-color: var(--ids-comp-buttons-outlined-color-border-light-focused, rgba(255, 255, 255, 0));
509
+ border-color: var(--ids-comp-buttons-outlined-color-border-light-focused);
503
510
  }
504
511
  .ids-button.ids-button-outlined.ids-button-light:active {
505
512
  background: var(--ids-comp-buttons-outlined-color-bg-light-pressed);
506
513
  color: var(--ids-comp-buttons-outlined-color-fg-label-light-pressed);
507
- border-color: var(--ids-comp-buttons-outlined-color-border-light-pressed, rgba(255, 255, 255, 0));
514
+ border-color: var(--ids-comp-buttons-outlined-color-border-light-pressed);
508
515
  }
509
516
  .ids-button.ids-button-outlined.ids-button-light:disabled {
510
517
  background: var(--ids-comp-buttons-outlined-color-bg-light-disabled);
511
518
  color: var(--ids-comp-buttons-outlined-color-fg-label-light-disabled);
512
- border-color: var(--ids-comp-buttons-outlined-color-border-light-disabled, rgba(255, 255, 255, 0));
519
+ border-color: var(--ids-comp-buttons-outlined-color-border-light-disabled);
513
520
  }
514
521
  .ids-button.ids-button-outlined.ids-button-dark {
515
522
  color: var(--ids-comp-buttons-outlined-color-fg-label-dark-enabled);
516
523
  background: var(--ids-comp-buttons-outlined-color-bg-dark-enabled);
517
- border-color: var(--ids-comp-buttons-outlined-color-border-dark-enabled, rgba(255, 255, 255, 0));
524
+ border-color: var(--ids-comp-buttons-outlined-color-border-dark-enabled);
518
525
  }
519
526
  .ids-button.ids-button-outlined.ids-button-dark:hover {
520
527
  background: var(--ids-comp-buttons-outlined-color-bg-dark-hovered);
521
528
  color: var(--ids-comp-buttons-outlined-color-fg-label-dark-hovered);
522
- border-color: var(--ids-comp-buttons-outlined-color-border-dark-hovered, rgba(255, 255, 255, 0));
529
+ border-color: var(--ids-comp-buttons-outlined-color-border-dark-hovered);
523
530
  }
524
531
  .ids-button.ids-button-outlined.ids-button-dark:focus {
525
532
  outline-offset: 2px;
526
533
  background: var(--ids-comp-buttons-outlined-color-bg-dark-focused);
527
534
  color: var(--ids-comp-buttons-outlined-color-fg-label-dark-focused);
528
- border-color: var(--ids-comp-buttons-outlined-color-border-dark-focused, rgba(255, 255, 255, 0));
535
+ border-color: var(--ids-comp-buttons-outlined-color-border-dark-focused);
529
536
  }
530
537
  .ids-button.ids-button-outlined.ids-button-dark:active {
531
538
  background: var(--ids-comp-buttons-outlined-color-bg-dark-pressed);
532
539
  color: var(--ids-comp-buttons-outlined-color-fg-label-dark-pressed);
533
- border-color: var(--ids-comp-buttons-outlined-color-border-dark-pressed, rgba(255, 255, 255, 0));
540
+ border-color: var(--ids-comp-buttons-outlined-color-border-dark-pressed);
534
541
  }
535
542
  .ids-button.ids-button-outlined.ids-button-dark:disabled {
536
543
  background: var(--ids-comp-buttons-outlined-color-bg-dark-disabled);
537
544
  color: var(--ids-comp-buttons-outlined-color-fg-label-dark-disabled);
538
- border-color: var(--ids-comp-buttons-outlined-color-border-dark-disabled, rgba(255, 255, 255, 0));
545
+ border-color: var(--ids-comp-buttons-outlined-color-border-dark-disabled);
539
546
  }
540
547
  .ids-button.ids-button-outlined.ids-button-surface {
541
548
  color: var(--ids-comp-buttons-outlined-color-fg-label-surface-enabled);
542
549
  background: var(--ids-comp-buttons-outlined-color-bg-surface-enabled);
543
- border-color: var(--ids-comp-buttons-outlined-color-border-surface-enabled, rgba(255, 255, 255, 0));
550
+ border-color: var(--ids-comp-buttons-outlined-color-border-surface-enabled);
544
551
  }
545
552
  .ids-button.ids-button-outlined.ids-button-surface:hover {
546
553
  background: var(--ids-comp-buttons-outlined-color-bg-surface-hovered);
547
554
  color: var(--ids-comp-buttons-outlined-color-fg-label-surface-hovered);
548
- border-color: var(--ids-comp-buttons-outlined-color-border-surface-hovered, rgba(255, 255, 255, 0));
555
+ border-color: var(--ids-comp-buttons-outlined-color-border-surface-hovered);
549
556
  }
550
557
  .ids-button.ids-button-outlined.ids-button-surface:focus {
551
558
  outline-offset: 2px;
552
559
  background: var(--ids-comp-buttons-outlined-color-bg-surface-focused);
553
560
  color: var(--ids-comp-buttons-outlined-color-fg-label-surface-focused);
554
- border-color: var(--ids-comp-buttons-outlined-color-border-surface-focused, rgba(255, 255, 255, 0));
561
+ border-color: var(--ids-comp-buttons-outlined-color-border-surface-focused);
555
562
  }
556
563
  .ids-button.ids-button-outlined.ids-button-surface:active {
557
564
  background: var(--ids-comp-buttons-outlined-color-bg-surface-pressed);
558
565
  color: var(--ids-comp-buttons-outlined-color-fg-label-surface-pressed);
559
- border-color: var(--ids-comp-buttons-outlined-color-border-surface-pressed, rgba(255, 255, 255, 0));
566
+ border-color: var(--ids-comp-buttons-outlined-color-border-surface-pressed);
560
567
  }
561
568
  .ids-button.ids-button-outlined.ids-button-surface:disabled {
562
569
  background: var(--ids-comp-buttons-outlined-color-bg-surface-disabled);
563
570
  color: var(--ids-comp-buttons-outlined-color-fg-label-surface-disabled);
564
- border-color: var(--ids-comp-buttons-outlined-color-border-surface-disabled, rgba(255, 255, 255, 0));
571
+ border-color: var(--ids-comp-buttons-outlined-color-border-surface-disabled);
565
572
  }
566
573
  .ids-button.ids-button-text.ids-button-primary {
567
574
  color: var(--ids-comp-buttons-text-color-fg-label-primary-enabled);
568
575
  background: var(--ids-comp-buttons-text-color-bg-primary-enabled);
569
- border-color: var(--ids-comp-buttons-text-color-border-primary-enabled, rgba(255, 255, 255, 0));
576
+ border-color: var(--ids-comp-buttons-text-color-border-primary-enabled);
570
577
  }
571
578
  .ids-button.ids-button-text.ids-button-primary:hover {
572
579
  background: var(--ids-comp-buttons-text-color-bg-primary-hovered);
573
580
  color: var(--ids-comp-buttons-text-color-fg-label-primary-hovered);
574
- border-color: var(--ids-comp-buttons-text-color-border-primary-hovered, rgba(255, 255, 255, 0));
581
+ border-color: var(--ids-comp-buttons-text-color-border-primary-hovered);
575
582
  }
576
583
  .ids-button.ids-button-text.ids-button-primary:focus {
577
584
  outline-offset: 2px;
578
585
  background: var(--ids-comp-buttons-text-color-bg-primary-focused);
579
586
  color: var(--ids-comp-buttons-text-color-fg-label-primary-focused);
580
- border-color: var(--ids-comp-buttons-text-color-border-primary-focused, rgba(255, 255, 255, 0));
587
+ border-color: var(--ids-comp-buttons-text-color-border-primary-focused);
581
588
  }
582
589
  .ids-button.ids-button-text.ids-button-primary:active {
583
590
  background: var(--ids-comp-buttons-text-color-bg-primary-pressed);
584
591
  color: var(--ids-comp-buttons-text-color-fg-label-primary-pressed);
585
- border-color: var(--ids-comp-buttons-text-color-border-primary-pressed, rgba(255, 255, 255, 0));
592
+ border-color: var(--ids-comp-buttons-text-color-border-primary-pressed);
586
593
  }
587
594
  .ids-button.ids-button-text.ids-button-primary:disabled {
588
595
  background: var(--ids-comp-buttons-text-color-bg-primary-disabled);
589
596
  color: var(--ids-comp-buttons-text-color-fg-label-primary-disabled);
590
- border-color: var(--ids-comp-buttons-text-color-border-primary-disabled, rgba(255, 255, 255, 0));
597
+ border-color: var(--ids-comp-buttons-text-color-border-primary-disabled);
591
598
  }
592
599
  .ids-button.ids-button-text.ids-button-secondary {
593
600
  color: var(--ids-comp-buttons-text-color-fg-label-secondary-enabled);
594
601
  background: var(--ids-comp-buttons-text-color-bg-secondary-enabled);
595
- border-color: var(--ids-comp-buttons-text-color-border-secondary-enabled, rgba(255, 255, 255, 0));
602
+ border-color: var(--ids-comp-buttons-text-color-border-secondary-enabled);
596
603
  }
597
604
  .ids-button.ids-button-text.ids-button-secondary:hover {
598
605
  background: var(--ids-comp-buttons-text-color-bg-secondary-hovered);
599
606
  color: var(--ids-comp-buttons-text-color-fg-label-secondary-hovered);
600
- border-color: var(--ids-comp-buttons-text-color-border-secondary-hovered, rgba(255, 255, 255, 0));
607
+ border-color: var(--ids-comp-buttons-text-color-border-secondary-hovered);
601
608
  }
602
609
  .ids-button.ids-button-text.ids-button-secondary:focus {
603
610
  outline-offset: 2px;
604
611
  background: var(--ids-comp-buttons-text-color-bg-secondary-focused);
605
612
  color: var(--ids-comp-buttons-text-color-fg-label-secondary-focused);
606
- border-color: var(--ids-comp-buttons-text-color-border-secondary-focused, rgba(255, 255, 255, 0));
613
+ border-color: var(--ids-comp-buttons-text-color-border-secondary-focused);
607
614
  }
608
615
  .ids-button.ids-button-text.ids-button-secondary:active {
609
616
  background: var(--ids-comp-buttons-text-color-bg-secondary-pressed);
610
617
  color: var(--ids-comp-buttons-text-color-fg-label-secondary-pressed);
611
- border-color: var(--ids-comp-buttons-text-color-border-secondary-pressed, rgba(255, 255, 255, 0));
618
+ border-color: var(--ids-comp-buttons-text-color-border-secondary-pressed);
612
619
  }
613
620
  .ids-button.ids-button-text.ids-button-secondary:disabled {
614
621
  background: var(--ids-comp-buttons-text-color-bg-secondary-disabled);
615
622
  color: var(--ids-comp-buttons-text-color-fg-label-secondary-disabled);
616
- border-color: var(--ids-comp-buttons-text-color-border-secondary-disabled, rgba(255, 255, 255, 0));
623
+ border-color: var(--ids-comp-buttons-text-color-border-secondary-disabled);
617
624
  }
618
625
  .ids-button.ids-button-text.ids-button-brand {
619
626
  color: var(--ids-comp-buttons-text-color-fg-label-brand-enabled);
620
627
  background: var(--ids-comp-buttons-text-color-bg-brand-enabled);
621
- border-color: var(--ids-comp-buttons-text-color-border-brand-enabled, rgba(255, 255, 255, 0));
628
+ border-color: var(--ids-comp-buttons-text-color-border-brand-enabled);
622
629
  }
623
630
  .ids-button.ids-button-text.ids-button-brand:hover {
624
631
  background: var(--ids-comp-buttons-text-color-bg-brand-hovered);
625
632
  color: var(--ids-comp-buttons-text-color-fg-label-brand-hovered);
626
- border-color: var(--ids-comp-buttons-text-color-border-brand-hovered, rgba(255, 255, 255, 0));
633
+ border-color: var(--ids-comp-buttons-text-color-border-brand-hovered);
627
634
  }
628
635
  .ids-button.ids-button-text.ids-button-brand:focus {
629
636
  outline-offset: 2px;
630
637
  background: var(--ids-comp-buttons-text-color-bg-brand-focused);
631
638
  color: var(--ids-comp-buttons-text-color-fg-label-brand-focused);
632
- border-color: var(--ids-comp-buttons-text-color-border-brand-focused, rgba(255, 255, 255, 0));
639
+ border-color: var(--ids-comp-buttons-text-color-border-brand-focused);
633
640
  }
634
641
  .ids-button.ids-button-text.ids-button-brand:active {
635
642
  background: var(--ids-comp-buttons-text-color-bg-brand-pressed);
636
643
  color: var(--ids-comp-buttons-text-color-fg-label-brand-pressed);
637
- border-color: var(--ids-comp-buttons-text-color-border-brand-pressed, rgba(255, 255, 255, 0));
644
+ border-color: var(--ids-comp-buttons-text-color-border-brand-pressed);
638
645
  }
639
646
  .ids-button.ids-button-text.ids-button-brand:disabled {
640
647
  background: var(--ids-comp-buttons-text-color-bg-brand-disabled);
641
648
  color: var(--ids-comp-buttons-text-color-fg-label-brand-disabled);
642
- border-color: var(--ids-comp-buttons-text-color-border-brand-disabled, rgba(255, 255, 255, 0));
649
+ border-color: var(--ids-comp-buttons-text-color-border-brand-disabled);
643
650
  }
644
651
  .ids-button.ids-button-text.ids-button-error {
645
652
  color: var(--ids-comp-buttons-text-color-fg-label-error-enabled);
646
653
  background: var(--ids-comp-buttons-text-color-bg-error-enabled);
647
- border-color: var(--ids-comp-buttons-text-color-border-error-enabled, rgba(255, 255, 255, 0));
654
+ border-color: var(--ids-comp-buttons-text-color-border-error-enabled);
648
655
  }
649
656
  .ids-button.ids-button-text.ids-button-error:hover {
650
657
  background: var(--ids-comp-buttons-text-color-bg-error-hovered);
651
658
  color: var(--ids-comp-buttons-text-color-fg-label-error-hovered);
652
- border-color: var(--ids-comp-buttons-text-color-border-error-hovered, rgba(255, 255, 255, 0));
659
+ border-color: var(--ids-comp-buttons-text-color-border-error-hovered);
653
660
  }
654
661
  .ids-button.ids-button-text.ids-button-error:focus {
655
662
  outline-offset: 2px;
656
663
  background: var(--ids-comp-buttons-text-color-bg-error-focused);
657
664
  color: var(--ids-comp-buttons-text-color-fg-label-error-focused);
658
- border-color: var(--ids-comp-buttons-text-color-border-error-focused, rgba(255, 255, 255, 0));
665
+ border-color: var(--ids-comp-buttons-text-color-border-error-focused);
659
666
  }
660
667
  .ids-button.ids-button-text.ids-button-error:active {
661
668
  background: var(--ids-comp-buttons-text-color-bg-error-pressed);
662
669
  color: var(--ids-comp-buttons-text-color-fg-label-error-pressed);
663
- border-color: var(--ids-comp-buttons-text-color-border-error-pressed, rgba(255, 255, 255, 0));
670
+ border-color: var(--ids-comp-buttons-text-color-border-error-pressed);
664
671
  }
665
672
  .ids-button.ids-button-text.ids-button-error:disabled {
666
673
  background: var(--ids-comp-buttons-text-color-bg-error-disabled);
667
674
  color: var(--ids-comp-buttons-text-color-fg-label-error-disabled);
668
- border-color: var(--ids-comp-buttons-text-color-border-error-disabled, rgba(255, 255, 255, 0));
675
+ border-color: var(--ids-comp-buttons-text-color-border-error-disabled);
669
676
  }
670
677
  .ids-button.ids-button-text.ids-button-success {
671
678
  color: var(--ids-comp-buttons-text-color-fg-label-success-enabled);
672
679
  background: var(--ids-comp-buttons-text-color-bg-success-enabled);
673
- border-color: var(--ids-comp-buttons-text-color-border-success-enabled, rgba(255, 255, 255, 0));
680
+ border-color: var(--ids-comp-buttons-text-color-border-success-enabled);
674
681
  }
675
682
  .ids-button.ids-button-text.ids-button-success:hover {
676
683
  background: var(--ids-comp-buttons-text-color-bg-success-hovered);
677
684
  color: var(--ids-comp-buttons-text-color-fg-label-success-hovered);
678
- border-color: var(--ids-comp-buttons-text-color-border-success-hovered, rgba(255, 255, 255, 0));
685
+ border-color: var(--ids-comp-buttons-text-color-border-success-hovered);
679
686
  }
680
687
  .ids-button.ids-button-text.ids-button-success:focus {
681
688
  outline-offset: 2px;
682
689
  background: var(--ids-comp-buttons-text-color-bg-success-focused);
683
690
  color: var(--ids-comp-buttons-text-color-fg-label-success-focused);
684
- border-color: var(--ids-comp-buttons-text-color-border-success-focused, rgba(255, 255, 255, 0));
691
+ border-color: var(--ids-comp-buttons-text-color-border-success-focused);
685
692
  }
686
693
  .ids-button.ids-button-text.ids-button-success:active {
687
694
  background: var(--ids-comp-buttons-text-color-bg-success-pressed);
688
695
  color: var(--ids-comp-buttons-text-color-fg-label-success-pressed);
689
- border-color: var(--ids-comp-buttons-text-color-border-success-pressed, rgba(255, 255, 255, 0));
696
+ border-color: var(--ids-comp-buttons-text-color-border-success-pressed);
690
697
  }
691
698
  .ids-button.ids-button-text.ids-button-success:disabled {
692
699
  background: var(--ids-comp-buttons-text-color-bg-success-disabled);
693
700
  color: var(--ids-comp-buttons-text-color-fg-label-success-disabled);
694
- border-color: var(--ids-comp-buttons-text-color-border-success-disabled, rgba(255, 255, 255, 0));
701
+ border-color: var(--ids-comp-buttons-text-color-border-success-disabled);
695
702
  }
696
703
  .ids-button.ids-button-text.ids-button-warning {
697
704
  color: var(--ids-comp-buttons-text-color-fg-label-warning-enabled);
698
705
  background: var(--ids-comp-buttons-text-color-bg-warning-enabled);
699
- border-color: var(--ids-comp-buttons-text-color-border-warning-enabled, rgba(255, 255, 255, 0));
706
+ border-color: var(--ids-comp-buttons-text-color-border-warning-enabled);
700
707
  }
701
708
  .ids-button.ids-button-text.ids-button-warning:hover {
702
709
  background: var(--ids-comp-buttons-text-color-bg-warning-hovered);
703
710
  color: var(--ids-comp-buttons-text-color-fg-label-warning-hovered);
704
- border-color: var(--ids-comp-buttons-text-color-border-warning-hovered, rgba(255, 255, 255, 0));
711
+ border-color: var(--ids-comp-buttons-text-color-border-warning-hovered);
705
712
  }
706
713
  .ids-button.ids-button-text.ids-button-warning:focus {
707
714
  outline-offset: 2px;
708
715
  background: var(--ids-comp-buttons-text-color-bg-warning-focused);
709
716
  color: var(--ids-comp-buttons-text-color-fg-label-warning-focused);
710
- border-color: var(--ids-comp-buttons-text-color-border-warning-focused, rgba(255, 255, 255, 0));
717
+ border-color: var(--ids-comp-buttons-text-color-border-warning-focused);
711
718
  }
712
719
  .ids-button.ids-button-text.ids-button-warning:active {
713
720
  background: var(--ids-comp-buttons-text-color-bg-warning-pressed);
714
721
  color: var(--ids-comp-buttons-text-color-fg-label-warning-pressed);
715
- border-color: var(--ids-comp-buttons-text-color-border-warning-pressed, rgba(255, 255, 255, 0));
722
+ border-color: var(--ids-comp-buttons-text-color-border-warning-pressed);
716
723
  }
717
724
  .ids-button.ids-button-text.ids-button-warning:disabled {
718
725
  background: var(--ids-comp-buttons-text-color-bg-warning-disabled);
719
726
  color: var(--ids-comp-buttons-text-color-fg-label-warning-disabled);
720
- border-color: var(--ids-comp-buttons-text-color-border-warning-disabled, rgba(255, 255, 255, 0));
727
+ border-color: var(--ids-comp-buttons-text-color-border-warning-disabled);
721
728
  }
722
729
  .ids-button.ids-button-text.ids-button-light {
723
730
  color: var(--ids-comp-buttons-text-color-fg-label-light-enabled);
724
731
  background: var(--ids-comp-buttons-text-color-bg-light-enabled);
725
- border-color: var(--ids-comp-buttons-text-color-border-light-enabled, rgba(255, 255, 255, 0));
732
+ border-color: var(--ids-comp-buttons-text-color-border-light-enabled);
726
733
  }
727
734
  .ids-button.ids-button-text.ids-button-light:hover {
728
735
  background: var(--ids-comp-buttons-text-color-bg-light-hovered);
729
736
  color: var(--ids-comp-buttons-text-color-fg-label-light-hovered);
730
- border-color: var(--ids-comp-buttons-text-color-border-light-hovered, rgba(255, 255, 255, 0));
737
+ border-color: var(--ids-comp-buttons-text-color-border-light-hovered);
731
738
  }
732
739
  .ids-button.ids-button-text.ids-button-light:focus {
733
740
  outline-offset: 2px;
734
741
  background: var(--ids-comp-buttons-text-color-bg-light-focused);
735
742
  color: var(--ids-comp-buttons-text-color-fg-label-light-focused);
736
- border-color: var(--ids-comp-buttons-text-color-border-light-focused, rgba(255, 255, 255, 0));
743
+ border-color: var(--ids-comp-buttons-text-color-border-light-focused);
737
744
  }
738
745
  .ids-button.ids-button-text.ids-button-light:active {
739
746
  background: var(--ids-comp-buttons-text-color-bg-light-pressed);
740
747
  color: var(--ids-comp-buttons-text-color-fg-label-light-pressed);
741
- border-color: var(--ids-comp-buttons-text-color-border-light-pressed, rgba(255, 255, 255, 0));
748
+ border-color: var(--ids-comp-buttons-text-color-border-light-pressed);
742
749
  }
743
750
  .ids-button.ids-button-text.ids-button-light:disabled {
744
751
  background: var(--ids-comp-buttons-text-color-bg-light-disabled);
745
752
  color: var(--ids-comp-buttons-text-color-fg-label-light-disabled);
746
- border-color: var(--ids-comp-buttons-text-color-border-light-disabled, rgba(255, 255, 255, 0));
753
+ border-color: var(--ids-comp-buttons-text-color-border-light-disabled);
747
754
  }
748
755
  .ids-button.ids-button-text.ids-button-dark {
749
756
  color: var(--ids-comp-buttons-text-color-fg-label-dark-enabled);
750
757
  background: var(--ids-comp-buttons-text-color-bg-dark-enabled);
751
- border-color: var(--ids-comp-buttons-text-color-border-dark-enabled, rgba(255, 255, 255, 0));
758
+ border-color: var(--ids-comp-buttons-text-color-border-dark-enabled);
752
759
  }
753
760
  .ids-button.ids-button-text.ids-button-dark:hover {
754
761
  background: var(--ids-comp-buttons-text-color-bg-dark-hovered);
755
762
  color: var(--ids-comp-buttons-text-color-fg-label-dark-hovered);
756
- border-color: var(--ids-comp-buttons-text-color-border-dark-hovered, rgba(255, 255, 255, 0));
763
+ border-color: var(--ids-comp-buttons-text-color-border-dark-hovered);
757
764
  }
758
765
  .ids-button.ids-button-text.ids-button-dark:focus {
759
766
  outline-offset: 2px;
760
767
  background: var(--ids-comp-buttons-text-color-bg-dark-focused);
761
768
  color: var(--ids-comp-buttons-text-color-fg-label-dark-focused);
762
- border-color: var(--ids-comp-buttons-text-color-border-dark-focused, rgba(255, 255, 255, 0));
769
+ border-color: var(--ids-comp-buttons-text-color-border-dark-focused);
763
770
  }
764
771
  .ids-button.ids-button-text.ids-button-dark:active {
765
772
  background: var(--ids-comp-buttons-text-color-bg-dark-pressed);
766
773
  color: var(--ids-comp-buttons-text-color-fg-label-dark-pressed);
767
- border-color: var(--ids-comp-buttons-text-color-border-dark-pressed, rgba(255, 255, 255, 0));
774
+ border-color: var(--ids-comp-buttons-text-color-border-dark-pressed);
768
775
  }
769
776
  .ids-button.ids-button-text.ids-button-dark:disabled {
770
777
  background: var(--ids-comp-buttons-text-color-bg-dark-disabled);
771
778
  color: var(--ids-comp-buttons-text-color-fg-label-dark-disabled);
772
- border-color: var(--ids-comp-buttons-text-color-border-dark-disabled, rgba(255, 255, 255, 0));
779
+ border-color: var(--ids-comp-buttons-text-color-border-dark-disabled);
773
780
  }
774
781
  .ids-button.ids-button-text.ids-button-surface {
775
782
  color: var(--ids-comp-buttons-text-color-fg-label-surface-enabled);
776
783
  background: var(--ids-comp-buttons-text-color-bg-surface-enabled);
777
- border-color: var(--ids-comp-buttons-text-color-border-surface-enabled, rgba(255, 255, 255, 0));
784
+ border-color: var(--ids-comp-buttons-text-color-border-surface-enabled);
778
785
  }
779
786
  .ids-button.ids-button-text.ids-button-surface:hover {
780
787
  background: var(--ids-comp-buttons-text-color-bg-surface-hovered);
781
788
  color: var(--ids-comp-buttons-text-color-fg-label-surface-hovered);
782
- border-color: var(--ids-comp-buttons-text-color-border-surface-hovered, rgba(255, 255, 255, 0));
789
+ border-color: var(--ids-comp-buttons-text-color-border-surface-hovered);
783
790
  }
784
791
  .ids-button.ids-button-text.ids-button-surface:focus {
785
792
  outline-offset: 2px;
786
793
  background: var(--ids-comp-buttons-text-color-bg-surface-focused);
787
794
  color: var(--ids-comp-buttons-text-color-fg-label-surface-focused);
788
- border-color: var(--ids-comp-buttons-text-color-border-surface-focused, rgba(255, 255, 255, 0));
795
+ border-color: var(--ids-comp-buttons-text-color-border-surface-focused);
789
796
  }
790
797
  .ids-button.ids-button-text.ids-button-surface:active {
791
798
  background: var(--ids-comp-buttons-text-color-bg-surface-pressed);
792
799
  color: var(--ids-comp-buttons-text-color-fg-label-surface-pressed);
793
- border-color: var(--ids-comp-buttons-text-color-border-surface-pressed, rgba(255, 255, 255, 0));
800
+ border-color: var(--ids-comp-buttons-text-color-border-surface-pressed);
794
801
  }
795
802
  .ids-button.ids-button-text.ids-button-surface:disabled {
796
803
  background: var(--ids-comp-buttons-text-color-bg-surface-disabled);
797
804
  color: var(--ids-comp-buttons-text-color-fg-label-surface-disabled);
798
- border-color: var(--ids-comp-buttons-text-color-border-surface-disabled, rgba(255, 255, 255, 0));
805
+ border-color: var(--ids-comp-buttons-text-color-border-surface-disabled);
799
806
  }