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