@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/avatar/avatar.css CHANGED
@@ -22,51 +22,26 @@
22
22
  }
23
23
  .ids-avatar:focus {
24
24
  outline-offset: 2px;
25
- outline: var(--ids-comp-avatar-focused-outline-size-outline, 3px) solid var(--ids-comp-avatar-focused-outline-color-dark-focused, rgb(0, 0, 0));
25
+ outline: var(--ids-comp-avatar-focused-outline-size-outline) solid var(--ids-comp-avatar-focused-outline-color-dark-focused);
26
26
  }
27
27
  .ids-avatar:focus.ids-avatar-light {
28
- outline: var(--ids-comp-avatar-focused-outline-size-outline, 3px) solid var(--ids-comp-avatar-focused-outline-color-light-focused);
28
+ outline: var(--ids-comp-avatar-focused-outline-size-outline) solid var(--ids-comp-avatar-focused-outline-color-light-focused);
29
29
  }
30
30
  .ids-avatar:active {
31
31
  outline: none;
32
32
  }
33
33
  .ids-avatar.ids-avatar-compact {
34
- font-weight: 500;
35
- line-height: 1rem;
36
- font-size: 0.6875rem;
37
- letter-spacing: 0.03125rem;
38
- width: var(--ids-comp-size-avatar-size-height-compact, 1.5rem);
39
- height: var(--ids-comp-size-avatar-size-width-compact, 1.5rem);
40
- }
41
- .ids-avatar.ids-avatar-comfortable {
42
- font-weight: 400;
43
- font-size: 0.875rem;
44
- line-height: 1.25rem;
45
- letter-spacing: 0.01563rem;
46
- width: var(--ids-comp-size-avatar-size-width-comfortable, 2.5rem);
47
- height: var(--ids-comp-size-avatar-size-height-comfortable, 2.5rem);
48
- }
49
- .ids-avatar.ids-avatar-spacious {
50
- font-weight: 400;
51
- font-style: normal;
52
- font-size: 1.375rem;
53
- line-height: 1.75rem;
54
- width: var(--ids-comp-size-avatar-size-width-spacious, 4rem);
55
- height: var(--ids-comp-size-avatar-size-height-spacious, 4rem);
56
- }
57
- .ids-avatar.ids-avatar-dense {
58
- font-weight: 500;
59
- line-height: 16px;
60
- font-size: 10px;
61
- letter-spacing: 0.25px;
62
- width: var(--ids-comp-size-avatar-size-width-dense, 1.25rem);
63
- height: var(--ids-comp-size-avatar-size-height-dense, 1.25rem);
64
- }
65
- .ids-avatar.ids-avatar-compact {
66
- gap: var(--ids-comp-size-avatar-size-gap-compact, 12px);
67
- border-radius: var(--ids-comp-size-avatar-size-border-radius-compact, 62.5rem);
34
+ width: var(--ids-comp-size-avatar-size-height-compact);
35
+ height: var(--ids-comp-size-avatar-size-width-compact);
36
+ gap: var(--ids-comp-size-avatar-size-gap-compact);
37
+ border-radius: var(--ids-comp-size-avatar-size-border-radius-compact);
68
38
  padding: var(--ids-comp-size-avatar-size-padding-y-compact) var(--ids-comp-size-avatar-size-padding-x-compact);
69
- border: var(--ids-comp-size-avatar-size-border-compact, 1px) solid;
39
+ border: var(--ids-comp-size-avatar-size-border-compact) solid;
40
+ font-family: var(--ids-comp-size-avatar-initials-typography-font-family-compact);
41
+ font-size: var(--ids-comp-size-avatar-initials-typography-font-size-compact);
42
+ font-weight: var(--ids-comp-size-avatar-initials-typography-font-weight-compact);
43
+ letter-spacing: var(--ids-comp-size-avatar-initials-typography-letter-spacing-compact);
44
+ line-height: var(--ids-comp-size-avatar-initials-typography-line-height-compact);
70
45
  }
71
46
  .ids-avatar.ids-avatar-compact:has(.ids-avatar-image) {
72
47
  padding: 0;
@@ -76,10 +51,17 @@
76
51
  height: var(--ids-comp-size-avatar-size-height-compact);
77
52
  }
78
53
  .ids-avatar.ids-avatar-comfortable {
79
- gap: var(--ids-comp-size-avatar-size-gap-comfortable, 12px);
80
- border-radius: var(--ids-comp-size-avatar-size-border-radius-comfortable, 62.5rem);
54
+ width: var(--ids-comp-size-avatar-size-height-comfortable);
55
+ height: var(--ids-comp-size-avatar-size-width-comfortable);
56
+ gap: var(--ids-comp-size-avatar-size-gap-comfortable);
57
+ border-radius: var(--ids-comp-size-avatar-size-border-radius-comfortable);
81
58
  padding: var(--ids-comp-size-avatar-size-padding-y-comfortable) var(--ids-comp-size-avatar-size-padding-x-comfortable);
82
- border: var(--ids-comp-size-avatar-size-border-comfortable, 1px) solid;
59
+ border: var(--ids-comp-size-avatar-size-border-comfortable) solid;
60
+ font-family: var(--ids-comp-size-avatar-initials-typography-font-family-comfortable);
61
+ font-size: var(--ids-comp-size-avatar-initials-typography-font-size-comfortable);
62
+ font-weight: var(--ids-comp-size-avatar-initials-typography-font-weight-comfortable);
63
+ letter-spacing: var(--ids-comp-size-avatar-initials-typography-letter-spacing-comfortable);
64
+ line-height: var(--ids-comp-size-avatar-initials-typography-line-height-comfortable);
83
65
  }
84
66
  .ids-avatar.ids-avatar-comfortable:has(.ids-avatar-image) {
85
67
  padding: 0;
@@ -89,10 +71,17 @@
89
71
  height: var(--ids-comp-size-avatar-size-height-comfortable);
90
72
  }
91
73
  .ids-avatar.ids-avatar-spacious {
92
- gap: var(--ids-comp-size-avatar-size-gap-spacious, 12px);
93
- border-radius: var(--ids-comp-size-avatar-size-border-radius-spacious, 62.5rem);
74
+ width: var(--ids-comp-size-avatar-size-height-spacious);
75
+ height: var(--ids-comp-size-avatar-size-width-spacious);
76
+ gap: var(--ids-comp-size-avatar-size-gap-spacious);
77
+ border-radius: var(--ids-comp-size-avatar-size-border-radius-spacious);
94
78
  padding: var(--ids-comp-size-avatar-size-padding-y-spacious) var(--ids-comp-size-avatar-size-padding-x-spacious);
95
- border: var(--ids-comp-size-avatar-size-border-spacious, 1px) solid;
79
+ border: var(--ids-comp-size-avatar-size-border-spacious) solid;
80
+ font-family: var(--ids-comp-size-avatar-initials-typography-font-family-spacious);
81
+ font-size: var(--ids-comp-size-avatar-initials-typography-font-size-spacious);
82
+ font-weight: var(--ids-comp-size-avatar-initials-typography-font-weight-spacious);
83
+ letter-spacing: var(--ids-comp-size-avatar-initials-typography-letter-spacing-spacious);
84
+ line-height: var(--ids-comp-size-avatar-initials-typography-line-height-spacious);
96
85
  }
97
86
  .ids-avatar.ids-avatar-spacious:has(.ids-avatar-image) {
98
87
  padding: 0;
@@ -102,10 +91,17 @@
102
91
  height: var(--ids-comp-size-avatar-size-height-spacious);
103
92
  }
104
93
  .ids-avatar.ids-avatar-dense {
105
- gap: var(--ids-comp-size-avatar-size-gap-dense, 12px);
106
- border-radius: var(--ids-comp-size-avatar-size-border-radius-dense, 62.5rem);
94
+ width: var(--ids-comp-size-avatar-size-height-dense);
95
+ height: var(--ids-comp-size-avatar-size-width-dense);
96
+ gap: var(--ids-comp-size-avatar-size-gap-dense);
97
+ border-radius: var(--ids-comp-size-avatar-size-border-radius-dense);
107
98
  padding: var(--ids-comp-size-avatar-size-padding-y-dense) var(--ids-comp-size-avatar-size-padding-x-dense);
108
- border: var(--ids-comp-size-avatar-size-border-dense, 1px) solid;
99
+ border: var(--ids-comp-size-avatar-size-border-dense) solid;
100
+ font-family: var(--ids-comp-size-avatar-initials-typography-font-family-dense);
101
+ font-size: var(--ids-comp-size-avatar-initials-typography-font-size-dense);
102
+ font-weight: var(--ids-comp-size-avatar-initials-typography-font-weight-dense);
103
+ letter-spacing: var(--ids-comp-size-avatar-initials-typography-letter-spacing-dense);
104
+ line-height: var(--ids-comp-size-avatar-initials-typography-line-height-dense);
109
105
  }
110
106
  .ids-avatar.ids-avatar-dense:has(.ids-avatar-image) {
111
107
  padding: 0;
@@ -117,19 +113,19 @@
117
113
  .ids-avatar.ids-avatar-primary {
118
114
  color: var(--ids-comp-avatar-color-fg-primary-enabled);
119
115
  background: var(--ids-comp-avatar-color-bg-primary-enabled);
120
- border-color: var(--ids-comp-avatar-color-border-primary-enabled, rgba(255, 255, 255, 0));
116
+ border-color: var(--ids-comp-avatar-color-border-primary-enabled);
121
117
  }
122
118
  .ids-avatar.ids-avatar-primary:hover {
123
119
  background: var(--ids-comp-avatar-color-bg-primary-hovered);
124
- border-color: var(--ids-comp-avatar-color-border-primary-hovered, rgba(255, 255, 255, 0));
120
+ border-color: var(--ids-comp-avatar-color-border-primary-hovered);
125
121
  }
126
122
  .ids-avatar.ids-avatar-primary:focus {
127
123
  background: var(--ids-comp-avatar-color-bg-primary-focused);
128
- border-color: var(--ids-comp-avatar-color-border-primary-focused, rgba(255, 255, 255, 0));
124
+ border-color: var(--ids-comp-avatar-color-border-primary-focused);
129
125
  }
130
126
  .ids-avatar.ids-avatar-primary:active {
131
127
  background: var(--ids-comp-avatar-color-bg-primary-pressed);
132
- border-color: var(--ids-comp-avatar-color-border-primary-pressed, rgba(255, 255, 255, 0));
128
+ border-color: var(--ids-comp-avatar-color-border-primary-pressed);
133
129
  }
134
130
  .ids-avatar.ids-avatar-primary .ids-avatar-icon path {
135
131
  fill: var(--ids-comp-avatar-color-fg-primary-enabled);
@@ -137,19 +133,19 @@
137
133
  .ids-avatar.ids-avatar-secondary {
138
134
  color: var(--ids-comp-avatar-color-fg-secondary-enabled);
139
135
  background: var(--ids-comp-avatar-color-bg-secondary-enabled);
140
- border-color: var(--ids-comp-avatar-color-border-secondary-enabled, rgba(255, 255, 255, 0));
136
+ border-color: var(--ids-comp-avatar-color-border-secondary-enabled);
141
137
  }
142
138
  .ids-avatar.ids-avatar-secondary:hover {
143
139
  background: var(--ids-comp-avatar-color-bg-secondary-hovered);
144
- border-color: var(--ids-comp-avatar-color-border-secondary-hovered, rgba(255, 255, 255, 0));
140
+ border-color: var(--ids-comp-avatar-color-border-secondary-hovered);
145
141
  }
146
142
  .ids-avatar.ids-avatar-secondary:focus {
147
143
  background: var(--ids-comp-avatar-color-bg-secondary-focused);
148
- border-color: var(--ids-comp-avatar-color-border-secondary-focused, rgba(255, 255, 255, 0));
144
+ border-color: var(--ids-comp-avatar-color-border-secondary-focused);
149
145
  }
150
146
  .ids-avatar.ids-avatar-secondary:active {
151
147
  background: var(--ids-comp-avatar-color-bg-secondary-pressed);
152
- border-color: var(--ids-comp-avatar-color-border-secondary-pressed, rgba(255, 255, 255, 0));
148
+ border-color: var(--ids-comp-avatar-color-border-secondary-pressed);
153
149
  }
154
150
  .ids-avatar.ids-avatar-secondary .ids-avatar-icon path {
155
151
  fill: var(--ids-comp-avatar-color-fg-secondary-enabled);
@@ -157,19 +153,19 @@
157
153
  .ids-avatar.ids-avatar-brand {
158
154
  color: var(--ids-comp-avatar-color-fg-brand-enabled);
159
155
  background: var(--ids-comp-avatar-color-bg-brand-enabled);
160
- border-color: var(--ids-comp-avatar-color-border-brand-enabled, rgba(255, 255, 255, 0));
156
+ border-color: var(--ids-comp-avatar-color-border-brand-enabled);
161
157
  }
162
158
  .ids-avatar.ids-avatar-brand:hover {
163
159
  background: var(--ids-comp-avatar-color-bg-brand-hovered);
164
- border-color: var(--ids-comp-avatar-color-border-brand-hovered, rgba(255, 255, 255, 0));
160
+ border-color: var(--ids-comp-avatar-color-border-brand-hovered);
165
161
  }
166
162
  .ids-avatar.ids-avatar-brand:focus {
167
163
  background: var(--ids-comp-avatar-color-bg-brand-focused);
168
- border-color: var(--ids-comp-avatar-color-border-brand-focused, rgba(255, 255, 255, 0));
164
+ border-color: var(--ids-comp-avatar-color-border-brand-focused);
169
165
  }
170
166
  .ids-avatar.ids-avatar-brand:active {
171
167
  background: var(--ids-comp-avatar-color-bg-brand-pressed);
172
- border-color: var(--ids-comp-avatar-color-border-brand-pressed, rgba(255, 255, 255, 0));
168
+ border-color: var(--ids-comp-avatar-color-border-brand-pressed);
173
169
  }
174
170
  .ids-avatar.ids-avatar-brand .ids-avatar-icon path {
175
171
  fill: var(--ids-comp-avatar-color-fg-brand-enabled);
@@ -177,19 +173,19 @@
177
173
  .ids-avatar.ids-avatar-error {
178
174
  color: var(--ids-comp-avatar-color-fg-error-enabled);
179
175
  background: var(--ids-comp-avatar-color-bg-error-enabled);
180
- border-color: var(--ids-comp-avatar-color-border-error-enabled, rgba(255, 255, 255, 0));
176
+ border-color: var(--ids-comp-avatar-color-border-error-enabled);
181
177
  }
182
178
  .ids-avatar.ids-avatar-error:hover {
183
179
  background: var(--ids-comp-avatar-color-bg-error-hovered);
184
- border-color: var(--ids-comp-avatar-color-border-error-hovered, rgba(255, 255, 255, 0));
180
+ border-color: var(--ids-comp-avatar-color-border-error-hovered);
185
181
  }
186
182
  .ids-avatar.ids-avatar-error:focus {
187
183
  background: var(--ids-comp-avatar-color-bg-error-focused);
188
- border-color: var(--ids-comp-avatar-color-border-error-focused, rgba(255, 255, 255, 0));
184
+ border-color: var(--ids-comp-avatar-color-border-error-focused);
189
185
  }
190
186
  .ids-avatar.ids-avatar-error:active {
191
187
  background: var(--ids-comp-avatar-color-bg-error-pressed);
192
- border-color: var(--ids-comp-avatar-color-border-error-pressed, rgba(255, 255, 255, 0));
188
+ border-color: var(--ids-comp-avatar-color-border-error-pressed);
193
189
  }
194
190
  .ids-avatar.ids-avatar-error .ids-avatar-icon path {
195
191
  fill: var(--ids-comp-avatar-color-fg-error-enabled);
@@ -197,19 +193,19 @@
197
193
  .ids-avatar.ids-avatar-success {
198
194
  color: var(--ids-comp-avatar-color-fg-success-enabled);
199
195
  background: var(--ids-comp-avatar-color-bg-success-enabled);
200
- border-color: var(--ids-comp-avatar-color-border-success-enabled, rgba(255, 255, 255, 0));
196
+ border-color: var(--ids-comp-avatar-color-border-success-enabled);
201
197
  }
202
198
  .ids-avatar.ids-avatar-success:hover {
203
199
  background: var(--ids-comp-avatar-color-bg-success-hovered);
204
- border-color: var(--ids-comp-avatar-color-border-success-hovered, rgba(255, 255, 255, 0));
200
+ border-color: var(--ids-comp-avatar-color-border-success-hovered);
205
201
  }
206
202
  .ids-avatar.ids-avatar-success:focus {
207
203
  background: var(--ids-comp-avatar-color-bg-success-focused);
208
- border-color: var(--ids-comp-avatar-color-border-success-focused, rgba(255, 255, 255, 0));
204
+ border-color: var(--ids-comp-avatar-color-border-success-focused);
209
205
  }
210
206
  .ids-avatar.ids-avatar-success:active {
211
207
  background: var(--ids-comp-avatar-color-bg-success-pressed);
212
- border-color: var(--ids-comp-avatar-color-border-success-pressed, rgba(255, 255, 255, 0));
208
+ border-color: var(--ids-comp-avatar-color-border-success-pressed);
213
209
  }
214
210
  .ids-avatar.ids-avatar-success .ids-avatar-icon path {
215
211
  fill: var(--ids-comp-avatar-color-fg-success-enabled);
@@ -217,19 +213,19 @@
217
213
  .ids-avatar.ids-avatar-warning {
218
214
  color: var(--ids-comp-avatar-color-fg-warning-enabled);
219
215
  background: var(--ids-comp-avatar-color-bg-warning-enabled);
220
- border-color: var(--ids-comp-avatar-color-border-warning-enabled, rgba(255, 255, 255, 0));
216
+ border-color: var(--ids-comp-avatar-color-border-warning-enabled);
221
217
  }
222
218
  .ids-avatar.ids-avatar-warning:hover {
223
219
  background: var(--ids-comp-avatar-color-bg-warning-hovered);
224
- border-color: var(--ids-comp-avatar-color-border-warning-hovered, rgba(255, 255, 255, 0));
220
+ border-color: var(--ids-comp-avatar-color-border-warning-hovered);
225
221
  }
226
222
  .ids-avatar.ids-avatar-warning:focus {
227
223
  background: var(--ids-comp-avatar-color-bg-warning-focused);
228
- border-color: var(--ids-comp-avatar-color-border-warning-focused, rgba(255, 255, 255, 0));
224
+ border-color: var(--ids-comp-avatar-color-border-warning-focused);
229
225
  }
230
226
  .ids-avatar.ids-avatar-warning:active {
231
227
  background: var(--ids-comp-avatar-color-bg-warning-pressed);
232
- border-color: var(--ids-comp-avatar-color-border-warning-pressed, rgba(255, 255, 255, 0));
228
+ border-color: var(--ids-comp-avatar-color-border-warning-pressed);
233
229
  }
234
230
  .ids-avatar.ids-avatar-warning .ids-avatar-icon path {
235
231
  fill: var(--ids-comp-avatar-color-fg-warning-enabled);
@@ -237,19 +233,19 @@
237
233
  .ids-avatar.ids-avatar-light {
238
234
  color: var(--ids-comp-avatar-color-fg-light-enabled);
239
235
  background: var(--ids-comp-avatar-color-bg-light-enabled);
240
- border-color: var(--ids-comp-avatar-color-border-light-enabled, rgba(255, 255, 255, 0));
236
+ border-color: var(--ids-comp-avatar-color-border-light-enabled);
241
237
  }
242
238
  .ids-avatar.ids-avatar-light:hover {
243
239
  background: var(--ids-comp-avatar-color-bg-light-hovered);
244
- border-color: var(--ids-comp-avatar-color-border-light-hovered, rgba(255, 255, 255, 0));
240
+ border-color: var(--ids-comp-avatar-color-border-light-hovered);
245
241
  }
246
242
  .ids-avatar.ids-avatar-light:focus {
247
243
  background: var(--ids-comp-avatar-color-bg-light-focused);
248
- border-color: var(--ids-comp-avatar-color-border-light-focused, rgba(255, 255, 255, 0));
244
+ border-color: var(--ids-comp-avatar-color-border-light-focused);
249
245
  }
250
246
  .ids-avatar.ids-avatar-light:active {
251
247
  background: var(--ids-comp-avatar-color-bg-light-pressed);
252
- border-color: var(--ids-comp-avatar-color-border-light-pressed, rgba(255, 255, 255, 0));
248
+ border-color: var(--ids-comp-avatar-color-border-light-pressed);
253
249
  }
254
250
  .ids-avatar.ids-avatar-light .ids-avatar-icon path {
255
251
  fill: var(--ids-comp-avatar-color-fg-light-enabled);
@@ -257,19 +253,19 @@
257
253
  .ids-avatar.ids-avatar-dark {
258
254
  color: var(--ids-comp-avatar-color-fg-dark-enabled);
259
255
  background: var(--ids-comp-avatar-color-bg-dark-enabled);
260
- border-color: var(--ids-comp-avatar-color-border-dark-enabled, rgba(255, 255, 255, 0));
256
+ border-color: var(--ids-comp-avatar-color-border-dark-enabled);
261
257
  }
262
258
  .ids-avatar.ids-avatar-dark:hover {
263
259
  background: var(--ids-comp-avatar-color-bg-dark-hovered);
264
- border-color: var(--ids-comp-avatar-color-border-dark-hovered, rgba(255, 255, 255, 0));
260
+ border-color: var(--ids-comp-avatar-color-border-dark-hovered);
265
261
  }
266
262
  .ids-avatar.ids-avatar-dark:focus {
267
263
  background: var(--ids-comp-avatar-color-bg-dark-focused);
268
- border-color: var(--ids-comp-avatar-color-border-dark-focused, rgba(255, 255, 255, 0));
264
+ border-color: var(--ids-comp-avatar-color-border-dark-focused);
269
265
  }
270
266
  .ids-avatar.ids-avatar-dark:active {
271
267
  background: var(--ids-comp-avatar-color-bg-dark-pressed);
272
- border-color: var(--ids-comp-avatar-color-border-dark-pressed, rgba(255, 255, 255, 0));
268
+ border-color: var(--ids-comp-avatar-color-border-dark-pressed);
273
269
  }
274
270
  .ids-avatar.ids-avatar-dark .ids-avatar-icon path {
275
271
  fill: var(--ids-comp-avatar-color-fg-dark-enabled);
@@ -277,19 +273,19 @@
277
273
  .ids-avatar.ids-avatar-surface {
278
274
  color: var(--ids-comp-avatar-color-fg-surface-enabled);
279
275
  background: var(--ids-comp-avatar-color-bg-surface-enabled);
280
- border-color: var(--ids-comp-avatar-color-border-surface-enabled, rgba(255, 255, 255, 0));
276
+ border-color: var(--ids-comp-avatar-color-border-surface-enabled);
281
277
  }
282
278
  .ids-avatar.ids-avatar-surface:hover {
283
279
  background: var(--ids-comp-avatar-color-bg-surface-hovered);
284
- border-color: var(--ids-comp-avatar-color-border-surface-hovered, rgba(255, 255, 255, 0));
280
+ border-color: var(--ids-comp-avatar-color-border-surface-hovered);
285
281
  }
286
282
  .ids-avatar.ids-avatar-surface:focus {
287
283
  background: var(--ids-comp-avatar-color-bg-surface-focused);
288
- border-color: var(--ids-comp-avatar-color-border-surface-focused, rgba(255, 255, 255, 0));
284
+ border-color: var(--ids-comp-avatar-color-border-surface-focused);
289
285
  }
290
286
  .ids-avatar.ids-avatar-surface:active {
291
287
  background: var(--ids-comp-avatar-color-bg-surface-pressed);
292
- border-color: var(--ids-comp-avatar-color-border-surface-pressed, rgba(255, 255, 255, 0));
288
+ border-color: var(--ids-comp-avatar-color-border-surface-pressed);
293
289
  }
294
290
  .ids-avatar.ids-avatar-surface .ids-avatar-icon path {
295
291
  fill: var(--ids-comp-avatar-color-fg-surface-enabled);
package/dist/avatar/avatar.min.css CHANGED
@@ -1 +1 @@
1
- .ids-avatar{display:flex;font-style:normal;text-align:center;align-items:center;flex-direction:column;justify-content:center}.ids-avatar .ids-avatar-icon{gap:10px;display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;height:100%}.ids-avatar .ids-avatar-image{border-radius:50%;vertical-align:middle;max-width:none}.ids-avatar:focus{outline-offset:2px;outline:var(--ids-comp-avatar-focused-outline-size-outline, 3px) solid var(--ids-comp-avatar-focused-outline-color-dark-focused, rgb(0, 0, 0))}.ids-avatar:focus.ids-avatar-light{outline:var(--ids-comp-avatar-focused-outline-size-outline, 3px) solid var(--ids-comp-avatar-focused-outline-color-light-focused)}.ids-avatar:active{outline:none}.ids-avatar.ids-avatar-compact{font-weight:500;line-height:1rem;font-size:.6875rem;letter-spacing:.03125rem;width:var(--ids-comp-size-avatar-size-height-compact, 1.5rem);height:var(--ids-comp-size-avatar-size-width-compact, 1.5rem)}.ids-avatar.ids-avatar-comfortable{font-weight:400;font-size:.875rem;line-height:1.25rem;letter-spacing:.01563rem;width:var(--ids-comp-size-avatar-size-width-comfortable, 2.5rem);height:var(--ids-comp-size-avatar-size-height-comfortable, 2.5rem)}.ids-avatar.ids-avatar-spacious{font-weight:400;font-style:normal;font-size:1.375rem;line-height:1.75rem;width:var(--ids-comp-size-avatar-size-width-spacious, 4rem);height:var(--ids-comp-size-avatar-size-height-spacious, 4rem)}.ids-avatar.ids-avatar-dense{font-weight:500;line-height:16px;font-size:10px;letter-spacing:.25px;width:var(--ids-comp-size-avatar-size-width-dense, 1.25rem);height:var(--ids-comp-size-avatar-size-height-dense, 1.25rem)}.ids-avatar.ids-avatar-compact{gap:var(--ids-comp-size-avatar-size-gap-compact, 12px);border-radius:var(--ids-comp-size-avatar-size-border-radius-compact, 62.5rem);padding:var(--ids-comp-size-avatar-size-padding-y-compact) var(--ids-comp-size-avatar-size-padding-x-compact);border:var(--ids-comp-size-avatar-size-border-compact, 1px) solid}.ids-avatar.ids-avatar-compact:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-compact .ids-avatar-image{width:var(--ids-comp-size-avatar-size-width-compact);height:var(--ids-comp-size-avatar-size-height-compact)}.ids-avatar.ids-avatar-comfortable{gap:var(--ids-comp-size-avatar-size-gap-comfortable, 12px);border-radius:var(--ids-comp-size-avatar-size-border-radius-comfortable, 62.5rem);padding:var(--ids-comp-size-avatar-size-padding-y-comfortable) var(--ids-comp-size-avatar-size-padding-x-comfortable);border:var(--ids-comp-size-avatar-size-border-comfortable, 1px) solid}.ids-avatar.ids-avatar-comfortable:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-comfortable .ids-avatar-image{width:var(--ids-comp-size-avatar-size-width-comfortable);height:var(--ids-comp-size-avatar-size-height-comfortable)}.ids-avatar.ids-avatar-spacious{gap:var(--ids-comp-size-avatar-size-gap-spacious, 12px);border-radius:var(--ids-comp-size-avatar-size-border-radius-spacious, 62.5rem);padding:var(--ids-comp-size-avatar-size-padding-y-spacious) var(--ids-comp-size-avatar-size-padding-x-spacious);border:var(--ids-comp-size-avatar-size-border-spacious, 1px) solid}.ids-avatar.ids-avatar-spacious:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-spacious .ids-avatar-image{width:var(--ids-comp-size-avatar-size-width-spacious);height:var(--ids-comp-size-avatar-size-height-spacious)}.ids-avatar.ids-avatar-dense{gap:var(--ids-comp-size-avatar-size-gap-dense, 12px);border-radius:var(--ids-comp-size-avatar-size-border-radius-dense, 62.5rem);padding:var(--ids-comp-size-avatar-size-padding-y-dense) var(--ids-comp-size-avatar-size-padding-x-dense);border:var(--ids-comp-size-avatar-size-border-dense, 1px) solid}.ids-avatar.ids-avatar-dense:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-dense .ids-avatar-image{width:var(--ids-comp-size-avatar-size-width-dense);height:var(--ids-comp-size-avatar-size-height-dense)}.ids-avatar.ids-avatar-primary{color:var(--ids-comp-avatar-color-fg-primary-enabled);background:var(--ids-comp-avatar-color-bg-primary-enabled);border-color:var(--ids-comp-avatar-color-border-primary-enabled, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-primary:hover{background:var(--ids-comp-avatar-color-bg-primary-hovered);border-color:var(--ids-comp-avatar-color-border-primary-hovered, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-primary:focus{background:var(--ids-comp-avatar-color-bg-primary-focused);border-color:var(--ids-comp-avatar-color-border-primary-focused, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-primary:active{background:var(--ids-comp-avatar-color-bg-primary-pressed);border-color:var(--ids-comp-avatar-color-border-primary-pressed, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-primary .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-primary-enabled)}.ids-avatar.ids-avatar-secondary{color:var(--ids-comp-avatar-color-fg-secondary-enabled);background:var(--ids-comp-avatar-color-bg-secondary-enabled);border-color:var(--ids-comp-avatar-color-border-secondary-enabled, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-secondary:hover{background:var(--ids-comp-avatar-color-bg-secondary-hovered);border-color:var(--ids-comp-avatar-color-border-secondary-hovered, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-secondary:focus{background:var(--ids-comp-avatar-color-bg-secondary-focused);border-color:var(--ids-comp-avatar-color-border-secondary-focused, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-secondary:active{background:var(--ids-comp-avatar-color-bg-secondary-pressed);border-color:var(--ids-comp-avatar-color-border-secondary-pressed, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-secondary .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-secondary-enabled)}.ids-avatar.ids-avatar-brand{color:var(--ids-comp-avatar-color-fg-brand-enabled);background:var(--ids-comp-avatar-color-bg-brand-enabled);border-color:var(--ids-comp-avatar-color-border-brand-enabled, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-brand:hover{background:var(--ids-comp-avatar-color-bg-brand-hovered);border-color:var(--ids-comp-avatar-color-border-brand-hovered, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-brand:focus{background:var(--ids-comp-avatar-color-bg-brand-focused);border-color:var(--ids-comp-avatar-color-border-brand-focused, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-brand:active{background:var(--ids-comp-avatar-color-bg-brand-pressed);border-color:var(--ids-comp-avatar-color-border-brand-pressed, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-brand .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-brand-enabled)}.ids-avatar.ids-avatar-error{color:var(--ids-comp-avatar-color-fg-error-enabled);background:var(--ids-comp-avatar-color-bg-error-enabled);border-color:var(--ids-comp-avatar-color-border-error-enabled, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-error:hover{background:var(--ids-comp-avatar-color-bg-error-hovered);border-color:var(--ids-comp-avatar-color-border-error-hovered, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-error:focus{background:var(--ids-comp-avatar-color-bg-error-focused);border-color:var(--ids-comp-avatar-color-border-error-focused, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-error:active{background:var(--ids-comp-avatar-color-bg-error-pressed);border-color:var(--ids-comp-avatar-color-border-error-pressed, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-error .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-error-enabled)}.ids-avatar.ids-avatar-success{color:var(--ids-comp-avatar-color-fg-success-enabled);background:var(--ids-comp-avatar-color-bg-success-enabled);border-color:var(--ids-comp-avatar-color-border-success-enabled, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-success:hover{background:var(--ids-comp-avatar-color-bg-success-hovered);border-color:var(--ids-comp-avatar-color-border-success-hovered, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-success:focus{background:var(--ids-comp-avatar-color-bg-success-focused);border-color:var(--ids-comp-avatar-color-border-success-focused, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-success:active{background:var(--ids-comp-avatar-color-bg-success-pressed);border-color:var(--ids-comp-avatar-color-border-success-pressed, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-success .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-success-enabled)}.ids-avatar.ids-avatar-warning{color:var(--ids-comp-avatar-color-fg-warning-enabled);background:var(--ids-comp-avatar-color-bg-warning-enabled);border-color:var(--ids-comp-avatar-color-border-warning-enabled, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-warning:hover{background:var(--ids-comp-avatar-color-bg-warning-hovered);border-color:var(--ids-comp-avatar-color-border-warning-hovered, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-warning:focus{background:var(--ids-comp-avatar-color-bg-warning-focused);border-color:var(--ids-comp-avatar-color-border-warning-focused, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-warning:active{background:var(--ids-comp-avatar-color-bg-warning-pressed);border-color:var(--ids-comp-avatar-color-border-warning-pressed, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-warning .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-warning-enabled)}.ids-avatar.ids-avatar-light{color:var(--ids-comp-avatar-color-fg-light-enabled);background:var(--ids-comp-avatar-color-bg-light-enabled);border-color:var(--ids-comp-avatar-color-border-light-enabled, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-light:hover{background:var(--ids-comp-avatar-color-bg-light-hovered);border-color:var(--ids-comp-avatar-color-border-light-hovered, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-light:focus{background:var(--ids-comp-avatar-color-bg-light-focused);border-color:var(--ids-comp-avatar-color-border-light-focused, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-light:active{background:var(--ids-comp-avatar-color-bg-light-pressed);border-color:var(--ids-comp-avatar-color-border-light-pressed, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-light .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-light-enabled)}.ids-avatar.ids-avatar-dark{color:var(--ids-comp-avatar-color-fg-dark-enabled);background:var(--ids-comp-avatar-color-bg-dark-enabled);border-color:var(--ids-comp-avatar-color-border-dark-enabled, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-dark:hover{background:var(--ids-comp-avatar-color-bg-dark-hovered);border-color:var(--ids-comp-avatar-color-border-dark-hovered, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-dark:focus{background:var(--ids-comp-avatar-color-bg-dark-focused);border-color:var(--ids-comp-avatar-color-border-dark-focused, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-dark:active{background:var(--ids-comp-avatar-color-bg-dark-pressed);border-color:var(--ids-comp-avatar-color-border-dark-pressed, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-dark .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-dark-enabled)}.ids-avatar.ids-avatar-surface{color:var(--ids-comp-avatar-color-fg-surface-enabled);background:var(--ids-comp-avatar-color-bg-surface-enabled);border-color:var(--ids-comp-avatar-color-border-surface-enabled, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-surface:hover{background:var(--ids-comp-avatar-color-bg-surface-hovered);border-color:var(--ids-comp-avatar-color-border-surface-hovered, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-surface:focus{background:var(--ids-comp-avatar-color-bg-surface-focused);border-color:var(--ids-comp-avatar-color-border-surface-focused, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-surface:active{background:var(--ids-comp-avatar-color-bg-surface-pressed);border-color:var(--ids-comp-avatar-color-border-surface-pressed, rgba(255, 255, 255, 0))}.ids-avatar.ids-avatar-surface .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-surface-enabled)}
1
+ .ids-avatar{display:flex;font-style:normal;text-align:center;align-items:center;flex-direction:column;justify-content:center}.ids-avatar .ids-avatar-icon{gap:10px;display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;height:100%}.ids-avatar .ids-avatar-image{border-radius:50%;vertical-align:middle;max-width:none}.ids-avatar:focus{outline-offset:2px;outline:var(--ids-comp-avatar-focused-outline-size-outline) solid var(--ids-comp-avatar-focused-outline-color-dark-focused)}.ids-avatar:focus.ids-avatar-light{outline:var(--ids-comp-avatar-focused-outline-size-outline) solid var(--ids-comp-avatar-focused-outline-color-light-focused)}.ids-avatar:active{outline:none}.ids-avatar.ids-avatar-compact{width:var(--ids-comp-size-avatar-size-height-compact);height:var(--ids-comp-size-avatar-size-width-compact);gap:var(--ids-comp-size-avatar-size-gap-compact);border-radius:var(--ids-comp-size-avatar-size-border-radius-compact);padding:var(--ids-comp-size-avatar-size-padding-y-compact) var(--ids-comp-size-avatar-size-padding-x-compact);border:var(--ids-comp-size-avatar-size-border-compact) solid;font-family:var(--ids-comp-size-avatar-initials-typography-font-family-compact);font-size:var(--ids-comp-size-avatar-initials-typography-font-size-compact);font-weight:var(--ids-comp-size-avatar-initials-typography-font-weight-compact);letter-spacing:var(--ids-comp-size-avatar-initials-typography-letter-spacing-compact);line-height:var(--ids-comp-size-avatar-initials-typography-line-height-compact)}.ids-avatar.ids-avatar-compact:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-compact .ids-avatar-image{width:var(--ids-comp-size-avatar-size-width-compact);height:var(--ids-comp-size-avatar-size-height-compact)}.ids-avatar.ids-avatar-comfortable{width:var(--ids-comp-size-avatar-size-height-comfortable);height:var(--ids-comp-size-avatar-size-width-comfortable);gap:var(--ids-comp-size-avatar-size-gap-comfortable);border-radius:var(--ids-comp-size-avatar-size-border-radius-comfortable);padding:var(--ids-comp-size-avatar-size-padding-y-comfortable) var(--ids-comp-size-avatar-size-padding-x-comfortable);border:var(--ids-comp-size-avatar-size-border-comfortable) solid;font-family:var(--ids-comp-size-avatar-initials-typography-font-family-comfortable);font-size:var(--ids-comp-size-avatar-initials-typography-font-size-comfortable);font-weight:var(--ids-comp-size-avatar-initials-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-size-avatar-initials-typography-letter-spacing-comfortable);line-height:var(--ids-comp-size-avatar-initials-typography-line-height-comfortable)}.ids-avatar.ids-avatar-comfortable:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-comfortable .ids-avatar-image{width:var(--ids-comp-size-avatar-size-width-comfortable);height:var(--ids-comp-size-avatar-size-height-comfortable)}.ids-avatar.ids-avatar-spacious{width:var(--ids-comp-size-avatar-size-height-spacious);height:var(--ids-comp-size-avatar-size-width-spacious);gap:var(--ids-comp-size-avatar-size-gap-spacious);border-radius:var(--ids-comp-size-avatar-size-border-radius-spacious);padding:var(--ids-comp-size-avatar-size-padding-y-spacious) var(--ids-comp-size-avatar-size-padding-x-spacious);border:var(--ids-comp-size-avatar-size-border-spacious) solid;font-family:var(--ids-comp-size-avatar-initials-typography-font-family-spacious);font-size:var(--ids-comp-size-avatar-initials-typography-font-size-spacious);font-weight:var(--ids-comp-size-avatar-initials-typography-font-weight-spacious);letter-spacing:var(--ids-comp-size-avatar-initials-typography-letter-spacing-spacious);line-height:var(--ids-comp-size-avatar-initials-typography-line-height-spacious)}.ids-avatar.ids-avatar-spacious:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-spacious .ids-avatar-image{width:var(--ids-comp-size-avatar-size-width-spacious);height:var(--ids-comp-size-avatar-size-height-spacious)}.ids-avatar.ids-avatar-dense{width:var(--ids-comp-size-avatar-size-height-dense);height:var(--ids-comp-size-avatar-size-width-dense);gap:var(--ids-comp-size-avatar-size-gap-dense);border-radius:var(--ids-comp-size-avatar-size-border-radius-dense);padding:var(--ids-comp-size-avatar-size-padding-y-dense) var(--ids-comp-size-avatar-size-padding-x-dense);border:var(--ids-comp-size-avatar-size-border-dense) solid;font-family:var(--ids-comp-size-avatar-initials-typography-font-family-dense);font-size:var(--ids-comp-size-avatar-initials-typography-font-size-dense);font-weight:var(--ids-comp-size-avatar-initials-typography-font-weight-dense);letter-spacing:var(--ids-comp-size-avatar-initials-typography-letter-spacing-dense);line-height:var(--ids-comp-size-avatar-initials-typography-line-height-dense)}.ids-avatar.ids-avatar-dense:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-dense .ids-avatar-image{width:var(--ids-comp-size-avatar-size-width-dense);height:var(--ids-comp-size-avatar-size-height-dense)}.ids-avatar.ids-avatar-primary{color:var(--ids-comp-avatar-color-fg-primary-enabled);background:var(--ids-comp-avatar-color-bg-primary-enabled);border-color:var(--ids-comp-avatar-color-border-primary-enabled)}.ids-avatar.ids-avatar-primary:hover{background:var(--ids-comp-avatar-color-bg-primary-hovered);border-color:var(--ids-comp-avatar-color-border-primary-hovered)}.ids-avatar.ids-avatar-primary:focus{background:var(--ids-comp-avatar-color-bg-primary-focused);border-color:var(--ids-comp-avatar-color-border-primary-focused)}.ids-avatar.ids-avatar-primary:active{background:var(--ids-comp-avatar-color-bg-primary-pressed);border-color:var(--ids-comp-avatar-color-border-primary-pressed)}.ids-avatar.ids-avatar-primary .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-primary-enabled)}.ids-avatar.ids-avatar-secondary{color:var(--ids-comp-avatar-color-fg-secondary-enabled);background:var(--ids-comp-avatar-color-bg-secondary-enabled);border-color:var(--ids-comp-avatar-color-border-secondary-enabled)}.ids-avatar.ids-avatar-secondary:hover{background:var(--ids-comp-avatar-color-bg-secondary-hovered);border-color:var(--ids-comp-avatar-color-border-secondary-hovered)}.ids-avatar.ids-avatar-secondary:focus{background:var(--ids-comp-avatar-color-bg-secondary-focused);border-color:var(--ids-comp-avatar-color-border-secondary-focused)}.ids-avatar.ids-avatar-secondary:active{background:var(--ids-comp-avatar-color-bg-secondary-pressed);border-color:var(--ids-comp-avatar-color-border-secondary-pressed)}.ids-avatar.ids-avatar-secondary .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-secondary-enabled)}.ids-avatar.ids-avatar-brand{color:var(--ids-comp-avatar-color-fg-brand-enabled);background:var(--ids-comp-avatar-color-bg-brand-enabled);border-color:var(--ids-comp-avatar-color-border-brand-enabled)}.ids-avatar.ids-avatar-brand:hover{background:var(--ids-comp-avatar-color-bg-brand-hovered);border-color:var(--ids-comp-avatar-color-border-brand-hovered)}.ids-avatar.ids-avatar-brand:focus{background:var(--ids-comp-avatar-color-bg-brand-focused);border-color:var(--ids-comp-avatar-color-border-brand-focused)}.ids-avatar.ids-avatar-brand:active{background:var(--ids-comp-avatar-color-bg-brand-pressed);border-color:var(--ids-comp-avatar-color-border-brand-pressed)}.ids-avatar.ids-avatar-brand .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-brand-enabled)}.ids-avatar.ids-avatar-error{color:var(--ids-comp-avatar-color-fg-error-enabled);background:var(--ids-comp-avatar-color-bg-error-enabled);border-color:var(--ids-comp-avatar-color-border-error-enabled)}.ids-avatar.ids-avatar-error:hover{background:var(--ids-comp-avatar-color-bg-error-hovered);border-color:var(--ids-comp-avatar-color-border-error-hovered)}.ids-avatar.ids-avatar-error:focus{background:var(--ids-comp-avatar-color-bg-error-focused);border-color:var(--ids-comp-avatar-color-border-error-focused)}.ids-avatar.ids-avatar-error:active{background:var(--ids-comp-avatar-color-bg-error-pressed);border-color:var(--ids-comp-avatar-color-border-error-pressed)}.ids-avatar.ids-avatar-error .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-error-enabled)}.ids-avatar.ids-avatar-success{color:var(--ids-comp-avatar-color-fg-success-enabled);background:var(--ids-comp-avatar-color-bg-success-enabled);border-color:var(--ids-comp-avatar-color-border-success-enabled)}.ids-avatar.ids-avatar-success:hover{background:var(--ids-comp-avatar-color-bg-success-hovered);border-color:var(--ids-comp-avatar-color-border-success-hovered)}.ids-avatar.ids-avatar-success:focus{background:var(--ids-comp-avatar-color-bg-success-focused);border-color:var(--ids-comp-avatar-color-border-success-focused)}.ids-avatar.ids-avatar-success:active{background:var(--ids-comp-avatar-color-bg-success-pressed);border-color:var(--ids-comp-avatar-color-border-success-pressed)}.ids-avatar.ids-avatar-success .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-success-enabled)}.ids-avatar.ids-avatar-warning{color:var(--ids-comp-avatar-color-fg-warning-enabled);background:var(--ids-comp-avatar-color-bg-warning-enabled);border-color:var(--ids-comp-avatar-color-border-warning-enabled)}.ids-avatar.ids-avatar-warning:hover{background:var(--ids-comp-avatar-color-bg-warning-hovered);border-color:var(--ids-comp-avatar-color-border-warning-hovered)}.ids-avatar.ids-avatar-warning:focus{background:var(--ids-comp-avatar-color-bg-warning-focused);border-color:var(--ids-comp-avatar-color-border-warning-focused)}.ids-avatar.ids-avatar-warning:active{background:var(--ids-comp-avatar-color-bg-warning-pressed);border-color:var(--ids-comp-avatar-color-border-warning-pressed)}.ids-avatar.ids-avatar-warning .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-warning-enabled)}.ids-avatar.ids-avatar-light{color:var(--ids-comp-avatar-color-fg-light-enabled);background:var(--ids-comp-avatar-color-bg-light-enabled);border-color:var(--ids-comp-avatar-color-border-light-enabled)}.ids-avatar.ids-avatar-light:hover{background:var(--ids-comp-avatar-color-bg-light-hovered);border-color:var(--ids-comp-avatar-color-border-light-hovered)}.ids-avatar.ids-avatar-light:focus{background:var(--ids-comp-avatar-color-bg-light-focused);border-color:var(--ids-comp-avatar-color-border-light-focused)}.ids-avatar.ids-avatar-light:active{background:var(--ids-comp-avatar-color-bg-light-pressed);border-color:var(--ids-comp-avatar-color-border-light-pressed)}.ids-avatar.ids-avatar-light .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-light-enabled)}.ids-avatar.ids-avatar-dark{color:var(--ids-comp-avatar-color-fg-dark-enabled);background:var(--ids-comp-avatar-color-bg-dark-enabled);border-color:var(--ids-comp-avatar-color-border-dark-enabled)}.ids-avatar.ids-avatar-dark:hover{background:var(--ids-comp-avatar-color-bg-dark-hovered);border-color:var(--ids-comp-avatar-color-border-dark-hovered)}.ids-avatar.ids-avatar-dark:focus{background:var(--ids-comp-avatar-color-bg-dark-focused);border-color:var(--ids-comp-avatar-color-border-dark-focused)}.ids-avatar.ids-avatar-dark:active{background:var(--ids-comp-avatar-color-bg-dark-pressed);border-color:var(--ids-comp-avatar-color-border-dark-pressed)}.ids-avatar.ids-avatar-dark .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-dark-enabled)}.ids-avatar.ids-avatar-surface{color:var(--ids-comp-avatar-color-fg-surface-enabled);background:var(--ids-comp-avatar-color-bg-surface-enabled);border-color:var(--ids-comp-avatar-color-border-surface-enabled)}.ids-avatar.ids-avatar-surface:hover{background:var(--ids-comp-avatar-color-bg-surface-hovered);border-color:var(--ids-comp-avatar-color-border-surface-hovered)}.ids-avatar.ids-avatar-surface:focus{background:var(--ids-comp-avatar-color-bg-surface-focused);border-color:var(--ids-comp-avatar-color-border-surface-focused)}.ids-avatar.ids-avatar-surface:active{background:var(--ids-comp-avatar-color-bg-surface-pressed);border-color:var(--ids-comp-avatar-color-border-surface-pressed)}.ids-avatar.ids-avatar-surface .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-surface-enabled)}