@i-cell/ids-styles 0.0.15 → 0.0.16

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 (7) hide show
  1. package/dist/avatar/avatar.css +176 -207
  2. package/dist/avatar/avatar.min.css +1 -1
  3. package/dist/avatar/avatar.plugin.js +168 -181
  4. package/dist/components.css +176 -207
  5. package/dist/components.min.css +1 -1
  6. package/dist/components.plugin.js +167 -180
  7. package/package.json +2 -2
package/dist/avatar/avatar.css CHANGED
@@ -1,233 +1,202 @@
1
1
  .ids-avatar {
2
- display: flex;
3
- font-style: normal;
4
- text-align: center;
5
- align-items: center;
6
- flex-direction: column;
2
+ display: inline-flex;
7
3
  justify-content: center;
4
+ align-items: center;
5
+ flex-shrink: 0;
8
6
  border-style: solid;
7
+ overflow: hidden;
9
8
  }
10
- .ids-avatar:not(:disabled) {
11
- cursor: pointer;
9
+ .ids-avatar.ids-avatar-type-initials {
10
+ flex-direction: column;
11
+ text-align: center;
12
+ font-style: normal;
13
+ color: inherit;
12
14
  }
13
- .ids-avatar:disabled {
14
- cursor: not-allowed;
15
+ .ids-avatar.ids-avatar-type-icon {
16
+ flex-shrink: 0;
15
17
  }
16
- .ids-avatar .ids-avatar-icon {
17
- gap: 10px;
18
- display: flex;
19
- align-items: center;
20
- justify-content: center;
21
- flex-direction: column;
18
+ .ids-avatar.ids-avatar-type-icon > .ids-icon {
19
+ color: inherit;
20
+ }
21
+ .ids-avatar.ids-avatar-type-image > img {
22
22
  width: 100%;
23
23
  height: 100%;
24
- }
25
- .ids-avatar .ids-avatar-image {
26
- border-radius: 50%;
27
- vertical-align: middle;
28
- max-width: none;
29
- }
30
- .ids-avatar:focus, .ids-avatar:focus-visible {
31
- outline-offset: 2px;
32
- outline-style: solid;
33
- }
34
- .ids-avatar:active {
35
- outline: none;
36
- }
37
- .ids-avatar.ids-avatar-compact {
38
- width: var(--ids-comp-avatar-size-height-compact);
39
- height: var(--ids-comp-avatar-size-width-compact);
40
- gap: var(--ids-comp-avatar-size-gap-compact);
41
- border-radius: var(--ids-comp-avatar-size-border-radius-compact);
42
- padding: var(--ids-comp-avatar-size-padding-y-compact) var(--ids-comp-avatar-size-padding-x-compact);
43
- border: var(--ids-comp-avatar-size-border-compact);
44
- font-family: var(--ids-comp-avatar-initials-typography-font-family-compact);
45
- font-size: var(--ids-comp-avatar-initials-typography-font-size-compact);
46
- font-weight: var(--ids-comp-avatar-initials-typography-font-weight-compact);
47
- letter-spacing: var(--ids-comp-avatar-initials-typography-letter-spacing-compact);
48
- line-height: var(--ids-comp-avatar-initials-typography-line-height-compact);
49
- }
50
- .ids-avatar.ids-avatar-compact:focus, .ids-avatar.ids-avatar-compact:focus-visible {
51
- outline-width: var(--ids-comp-avatar-focused-outline-size-outline);
52
- }
53
- .ids-avatar.ids-avatar-compact:has(.ids-avatar-image) {
54
- padding: 0;
55
- }
56
- .ids-avatar.ids-avatar-compact .ids-avatar-image {
57
- width: var(--ids-comp-avatar-size-width-compact);
58
- height: var(--ids-comp-avatar-size-height-compact);
59
- }
60
- .ids-avatar.ids-avatar-comfortable {
61
- width: var(--ids-comp-avatar-size-height-comfortable);
62
- height: var(--ids-comp-avatar-size-width-comfortable);
63
- gap: var(--ids-comp-avatar-size-gap-comfortable);
64
- border-radius: var(--ids-comp-avatar-size-border-radius-comfortable);
65
- padding: var(--ids-comp-avatar-size-padding-y-comfortable) var(--ids-comp-avatar-size-padding-x-comfortable);
66
- border: var(--ids-comp-avatar-size-border-comfortable);
67
- font-family: var(--ids-comp-avatar-initials-typography-font-family-comfortable);
68
- font-size: var(--ids-comp-avatar-initials-typography-font-size-comfortable);
69
- font-weight: var(--ids-comp-avatar-initials-typography-font-weight-comfortable);
70
- letter-spacing: var(--ids-comp-avatar-initials-typography-letter-spacing-comfortable);
71
- line-height: var(--ids-comp-avatar-initials-typography-line-height-comfortable);
72
- }
73
- .ids-avatar.ids-avatar-comfortable:focus, .ids-avatar.ids-avatar-comfortable:focus-visible {
74
- outline-width: var(--ids-comp-avatar-focused-outline-size-outline);
75
- }
76
- .ids-avatar.ids-avatar-comfortable:has(.ids-avatar-image) {
77
- padding: 0;
78
- }
79
- .ids-avatar.ids-avatar-comfortable .ids-avatar-image {
80
- width: var(--ids-comp-avatar-size-width-comfortable);
81
- height: var(--ids-comp-avatar-size-height-comfortable);
82
- }
83
- .ids-avatar.ids-avatar-spacious {
84
- width: var(--ids-comp-avatar-size-height-spacious);
85
- height: var(--ids-comp-avatar-size-width-spacious);
86
- gap: var(--ids-comp-avatar-size-gap-spacious);
87
- border-radius: var(--ids-comp-avatar-size-border-radius-spacious);
88
- padding: var(--ids-comp-avatar-size-padding-y-spacious) var(--ids-comp-avatar-size-padding-x-spacious);
89
- border: var(--ids-comp-avatar-size-border-spacious);
90
- font-family: var(--ids-comp-avatar-initials-typography-font-family-spacious);
91
- font-size: var(--ids-comp-avatar-initials-typography-font-size-spacious);
92
- font-weight: var(--ids-comp-avatar-initials-typography-font-weight-spacious);
93
- letter-spacing: var(--ids-comp-avatar-initials-typography-letter-spacing-spacious);
94
- line-height: var(--ids-comp-avatar-initials-typography-line-height-spacious);
95
- }
96
- .ids-avatar.ids-avatar-spacious:focus, .ids-avatar.ids-avatar-spacious:focus-visible {
97
- outline-width: var(--ids-comp-avatar-focused-outline-size-outline);
98
- }
99
- .ids-avatar.ids-avatar-spacious:has(.ids-avatar-image) {
100
- padding: 0;
101
- }
102
- .ids-avatar.ids-avatar-spacious .ids-avatar-image {
103
- width: var(--ids-comp-avatar-size-width-spacious);
104
- height: var(--ids-comp-avatar-size-height-spacious);
105
- }
106
- .ids-avatar.ids-avatar-dense {
107
- width: var(--ids-comp-avatar-size-height-dense);
108
- height: var(--ids-comp-avatar-size-width-dense);
109
- gap: var(--ids-comp-avatar-size-gap-dense);
110
- border-radius: var(--ids-comp-avatar-size-border-radius-dense);
111
- padding: var(--ids-comp-avatar-size-padding-y-dense) var(--ids-comp-avatar-size-padding-x-dense);
112
- border: var(--ids-comp-avatar-size-border-dense);
113
- font-family: var(--ids-comp-avatar-initials-typography-font-family-dense);
114
- font-size: var(--ids-comp-avatar-initials-typography-font-size-dense);
115
- font-weight: var(--ids-comp-avatar-initials-typography-font-weight-dense);
116
- letter-spacing: var(--ids-comp-avatar-initials-typography-letter-spacing-dense);
117
- line-height: var(--ids-comp-avatar-initials-typography-line-height-dense);
118
- }
119
- .ids-avatar.ids-avatar-dense:focus, .ids-avatar.ids-avatar-dense:focus-visible {
120
- outline-width: var(--ids-comp-avatar-focused-outline-size-outline);
121
- }
122
- .ids-avatar.ids-avatar-dense:has(.ids-avatar-image) {
123
- padding: 0;
124
- }
125
- .ids-avatar.ids-avatar-dense .ids-avatar-image {
126
- width: var(--ids-comp-avatar-size-width-dense);
127
- height: var(--ids-comp-avatar-size-height-dense);
24
+ object-fit: cover;
25
+ }
26
+ .ids-avatar.ids-avatar-smallcollection-compact {
27
+ width: var(--ids-comp-avatar-size-smallcollection-width-compact);
28
+ height: var(--ids-comp-avatar-size-smallcollection-height-compact);
29
+ border-width: var(--ids-comp-avatar-size-smallcollection-border-compact);
30
+ border-radius: var(--ids-comp-avatar-size-smallcollection-border-radius-compact);
31
+ }
32
+ .ids-avatar.ids-avatar-smallcollection-compact.ids-avatar-type-initials {
33
+ font-size: var(--ids-comp-avatar-initials-typography-smallcollection-font-size-compact);
34
+ font-weight: var(--ids-comp-avatar-initials-typography-smallcollection-font-weight-compact);
35
+ line-height: var(--ids-comp-avatar-initials-typography-smallcollection-line-height-compact);
36
+ letter-spacing: var(--ids-comp-avatar-initials-typography-smallcollection-letter-spacing-compact);
37
+ }
38
+ .ids-avatar.ids-avatar-smallcollection-compact.ids-avatar-type-icon > .ids-icon {
39
+ width: var(--ids-comp-avatar-size-smallcollection-icon-compact);
40
+ height: var(--ids-comp-avatar-size-smallcollection-icon-compact);
41
+ font-size: var(--ids-comp-avatar-icon-typography-smallcollection-font-size-compact);
42
+ font-weight: var(--ids-comp-avatar-icon-typography-smallcollection-font-weight-compact);
43
+ line-height: var(--ids-comp-avatar-icon-typography-smallcollection-line-height-compact);
44
+ }
45
+ .ids-avatar.ids-avatar-smallcollection-comfortable {
46
+ width: var(--ids-comp-avatar-size-smallcollection-width-comfortable);
47
+ height: var(--ids-comp-avatar-size-smallcollection-height-comfortable);
48
+ border-width: var(--ids-comp-avatar-size-smallcollection-border-comfortable);
49
+ border-radius: var(--ids-comp-avatar-size-smallcollection-border-radius-comfortable);
50
+ }
51
+ .ids-avatar.ids-avatar-smallcollection-comfortable.ids-avatar-type-initials {
52
+ font-size: var(--ids-comp-avatar-initials-typography-smallcollection-font-size-comfortable);
53
+ font-weight: var(--ids-comp-avatar-initials-typography-smallcollection-font-weight-comfortable);
54
+ line-height: var(--ids-comp-avatar-initials-typography-smallcollection-line-height-comfortable);
55
+ letter-spacing: var(--ids-comp-avatar-initials-typography-smallcollection-letter-spacing-comfortable);
56
+ }
57
+ .ids-avatar.ids-avatar-smallcollection-comfortable.ids-avatar-type-icon > .ids-icon {
58
+ width: var(--ids-comp-avatar-size-smallcollection-icon-comfortable);
59
+ height: var(--ids-comp-avatar-size-smallcollection-icon-comfortable);
60
+ font-size: var(--ids-comp-avatar-icon-typography-smallcollection-font-size-comfortable);
61
+ font-weight: var(--ids-comp-avatar-icon-typography-smallcollection-font-weight-comfortable);
62
+ line-height: var(--ids-comp-avatar-icon-typography-smallcollection-line-height-comfortable);
63
+ }
64
+ .ids-avatar.ids-avatar-smallcollection-spacious {
65
+ width: var(--ids-comp-avatar-size-smallcollection-width-spacious);
66
+ height: var(--ids-comp-avatar-size-smallcollection-height-spacious);
67
+ border-width: var(--ids-comp-avatar-size-smallcollection-border-spacious);
68
+ border-radius: var(--ids-comp-avatar-size-smallcollection-border-radius-spacious);
69
+ }
70
+ .ids-avatar.ids-avatar-smallcollection-spacious.ids-avatar-type-initials {
71
+ font-size: var(--ids-comp-avatar-initials-typography-smallcollection-font-size-spacious);
72
+ font-weight: var(--ids-comp-avatar-initials-typography-smallcollection-font-weight-spacious);
73
+ line-height: var(--ids-comp-avatar-initials-typography-smallcollection-line-height-spacious);
74
+ letter-spacing: var(--ids-comp-avatar-initials-typography-smallcollection-letter-spacing-spacious);
75
+ }
76
+ .ids-avatar.ids-avatar-smallcollection-spacious.ids-avatar-type-icon > .ids-icon {
77
+ width: var(--ids-comp-avatar-size-smallcollection-icon-spacious);
78
+ height: var(--ids-comp-avatar-size-smallcollection-icon-spacious);
79
+ font-size: var(--ids-comp-avatar-icon-typography-smallcollection-font-size-spacious);
80
+ font-weight: var(--ids-comp-avatar-icon-typography-smallcollection-font-weight-spacious);
81
+ line-height: var(--ids-comp-avatar-icon-typography-smallcollection-line-height-spacious);
82
+ }
83
+ .ids-avatar.ids-avatar-smallcollection-dense {
84
+ width: var(--ids-comp-avatar-size-smallcollection-width-dense);
85
+ height: var(--ids-comp-avatar-size-smallcollection-height-dense);
86
+ border-width: var(--ids-comp-avatar-size-smallcollection-border-dense);
87
+ border-radius: var(--ids-comp-avatar-size-smallcollection-border-radius-dense);
88
+ }
89
+ .ids-avatar.ids-avatar-smallcollection-dense.ids-avatar-type-initials {
90
+ font-size: var(--ids-comp-avatar-initials-typography-smallcollection-font-size-dense);
91
+ font-weight: var(--ids-comp-avatar-initials-typography-smallcollection-font-weight-dense);
92
+ line-height: var(--ids-comp-avatar-initials-typography-smallcollection-line-height-dense);
93
+ letter-spacing: var(--ids-comp-avatar-initials-typography-smallcollection-letter-spacing-dense);
94
+ }
95
+ .ids-avatar.ids-avatar-smallcollection-dense.ids-avatar-type-icon > .ids-icon {
96
+ width: var(--ids-comp-avatar-size-smallcollection-icon-dense);
97
+ height: var(--ids-comp-avatar-size-smallcollection-icon-dense);
98
+ font-size: var(--ids-comp-avatar-icon-typography-smallcollection-font-size-dense);
99
+ font-weight: var(--ids-comp-avatar-icon-typography-smallcollection-font-weight-dense);
100
+ line-height: var(--ids-comp-avatar-icon-typography-smallcollection-line-height-dense);
101
+ }
102
+ .ids-avatar.ids-avatar-bigcollection-compact {
103
+ width: var(--ids-comp-avatar-size-bigcollection-width-compact);
104
+ height: var(--ids-comp-avatar-size-bigcollection-height-compact);
105
+ border-width: var(--ids-comp-avatar-size-bigcollection-border-compact);
106
+ border-radius: var(--ids-comp-avatar-size-bigcollection-border-radius-compact);
107
+ }
108
+ .ids-avatar.ids-avatar-bigcollection-compact.ids-avatar-type-initials {
109
+ font-size: var(--ids-comp-avatar-initials-typography-bigcollection-font-size-compact);
110
+ font-weight: var(--ids-comp-avatar-initials-typography-bigcollection-font-weight-compact);
111
+ line-height: var(--ids-comp-avatar-initials-typography-bigcollection-line-height-compact);
112
+ letter-spacing: var(--ids-comp-avatar-initials-typography-bigcollection-letter-spacing-compact);
113
+ }
114
+ .ids-avatar.ids-avatar-bigcollection-compact.ids-avatar-type-icon > .ids-icon {
115
+ width: var(--ids-comp-avatar-size-bigcollection-icon-compact);
116
+ height: var(--ids-comp-avatar-size-bigcollection-icon-compact);
117
+ font-size: var(--ids-comp-avatar-icon-typography-bigcollection-font-size-compact);
118
+ font-weight: var(--ids-comp-avatar-icon-typography-bigcollection-font-weight-compact);
119
+ line-height: var(--ids-comp-avatar-icon-typography-bigcollection-line-height-compact);
120
+ }
121
+ .ids-avatar.ids-avatar-bigcollection-comfortable {
122
+ width: var(--ids-comp-avatar-size-bigcollection-width-comfortable);
123
+ height: var(--ids-comp-avatar-size-bigcollection-height-comfortable);
124
+ border-width: var(--ids-comp-avatar-size-bigcollection-border-comfortable);
125
+ border-radius: var(--ids-comp-avatar-size-bigcollection-border-radius-comfortable);
126
+ }
127
+ .ids-avatar.ids-avatar-bigcollection-comfortable.ids-avatar-type-initials {
128
+ font-size: var(--ids-comp-avatar-initials-typography-bigcollection-font-size-comfortable);
129
+ font-weight: var(--ids-comp-avatar-initials-typography-bigcollection-font-weight-comfortable);
130
+ line-height: var(--ids-comp-avatar-initials-typography-bigcollection-line-height-comfortable);
131
+ letter-spacing: var(--ids-comp-avatar-initials-typography-bigcollection-letter-spacing-comfortable);
132
+ }
133
+ .ids-avatar.ids-avatar-bigcollection-comfortable.ids-avatar-type-icon > .ids-icon {
134
+ width: var(--ids-comp-avatar-size-bigcollection-icon-comfortable);
135
+ height: var(--ids-comp-avatar-size-bigcollection-icon-comfortable);
136
+ font-size: var(--ids-comp-avatar-icon-typography-bigcollection-font-size-comfortable);
137
+ font-weight: var(--ids-comp-avatar-icon-typography-bigcollection-font-weight-comfortable);
138
+ line-height: var(--ids-comp-avatar-icon-typography-bigcollection-line-height-comfortable);
139
+ }
140
+ .ids-avatar.ids-avatar-bigcollection-spacious {
141
+ width: var(--ids-comp-avatar-size-bigcollection-width-spacious);
142
+ height: var(--ids-comp-avatar-size-bigcollection-height-spacious);
143
+ border-width: var(--ids-comp-avatar-size-bigcollection-border-spacious);
144
+ border-radius: var(--ids-comp-avatar-size-bigcollection-border-radius-spacious);
145
+ }
146
+ .ids-avatar.ids-avatar-bigcollection-spacious.ids-avatar-type-initials {
147
+ font-size: var(--ids-comp-avatar-initials-typography-bigcollection-font-size-spacious);
148
+ font-weight: var(--ids-comp-avatar-initials-typography-bigcollection-font-weight-spacious);
149
+ line-height: var(--ids-comp-avatar-initials-typography-bigcollection-line-height-spacious);
150
+ letter-spacing: var(--ids-comp-avatar-initials-typography-bigcollection-letter-spacing-spacious);
151
+ }
152
+ .ids-avatar.ids-avatar-bigcollection-spacious.ids-avatar-type-icon > .ids-icon {
153
+ width: var(--ids-comp-avatar-size-bigcollection-icon-spacious);
154
+ height: var(--ids-comp-avatar-size-bigcollection-icon-spacious);
155
+ font-size: var(--ids-comp-avatar-icon-typography-bigcollection-font-size-spacious);
156
+ font-weight: var(--ids-comp-avatar-icon-typography-bigcollection-font-weight-spacious);
157
+ line-height: var(--ids-comp-avatar-icon-typography-bigcollection-line-height-spacious);
158
+ }
159
+ .ids-avatar.ids-avatar-bigcollection-dense {
160
+ width: var(--ids-comp-avatar-size-bigcollection-width-dense);
161
+ height: var(--ids-comp-avatar-size-bigcollection-height-dense);
162
+ border-width: var(--ids-comp-avatar-size-bigcollection-border-dense);
163
+ border-radius: var(--ids-comp-avatar-size-bigcollection-border-radius-dense);
164
+ }
165
+ .ids-avatar.ids-avatar-bigcollection-dense.ids-avatar-type-initials {
166
+ font-size: var(--ids-comp-avatar-initials-typography-bigcollection-font-size-dense);
167
+ font-weight: var(--ids-comp-avatar-initials-typography-bigcollection-font-weight-dense);
168
+ line-height: var(--ids-comp-avatar-initials-typography-bigcollection-line-height-dense);
169
+ letter-spacing: var(--ids-comp-avatar-initials-typography-bigcollection-letter-spacing-dense);
170
+ }
171
+ .ids-avatar.ids-avatar-bigcollection-dense.ids-avatar-type-icon > .ids-icon {
172
+ width: var(--ids-comp-avatar-size-bigcollection-icon-dense);
173
+ height: var(--ids-comp-avatar-size-bigcollection-icon-dense);
174
+ font-size: var(--ids-comp-avatar-icon-typography-bigcollection-font-size-dense);
175
+ font-weight: var(--ids-comp-avatar-icon-typography-bigcollection-font-weight-dense);
176
+ line-height: var(--ids-comp-avatar-icon-typography-bigcollection-line-height-dense);
128
177
  }
129
178
  .ids-avatar.ids-avatar-primary {
130
179
  color: var(--ids-comp-avatar-color-fg-primary-default);
131
- background: var(--ids-comp-avatar-color-bg-primary-default);
132
180
  border-color: var(--ids-comp-avatar-color-border-primary-default);
133
- }
134
- .ids-avatar.ids-avatar-primary:hover {
135
- background: var(--ids-comp-avatar-color-bg-primary-hovered);
136
- border-color: var(--ids-comp-avatar-color-border-primary-hovered);
137
- }
138
- .ids-avatar.ids-avatar-primary:focus, .ids-avatar.ids-avatar-primary:focus-visible {
139
- background: var(--ids-comp-avatar-color-bg-primary-focused);
140
- border-color: var(--ids-comp-avatar-color-border-primary-focused);
141
- outline-color: var(--ids-comp-avatar-focused-outline-color-dark-focused);
142
- }
143
- .ids-avatar.ids-avatar-primary:active {
144
- background: var(--ids-comp-avatar-color-bg-primary-pressed);
145
- border-color: var(--ids-comp-avatar-color-border-primary-pressed);
146
- }
147
- .ids-avatar.ids-avatar-primary .ids-avatar-icon path {
148
- fill: var(--ids-comp-avatar-color-fg-primary-default);
181
+ background: var(--ids-comp-avatar-color-bg-primary-default);
149
182
  }
150
183
  .ids-avatar.ids-avatar-secondary {
151
184
  color: var(--ids-comp-avatar-color-fg-secondary-default);
152
- background: var(--ids-comp-avatar-color-bg-secondary-default);
153
185
  border-color: var(--ids-comp-avatar-color-border-secondary-default);
186
+ background: var(--ids-comp-avatar-color-bg-secondary-default);
154
187
  }
155
- .ids-avatar.ids-avatar-secondary:hover {
156
- background: var(--ids-comp-avatar-color-bg-secondary-hovered);
157
- border-color: var(--ids-comp-avatar-color-border-secondary-hovered);
158
- }
159
- .ids-avatar.ids-avatar-secondary:focus, .ids-avatar.ids-avatar-secondary:focus-visible {
160
- background: var(--ids-comp-avatar-color-bg-secondary-focused);
161
- border-color: var(--ids-comp-avatar-color-border-secondary-focused);
162
- outline-color: var(--ids-comp-avatar-focused-outline-color-dark-focused);
163
- }
164
- .ids-avatar.ids-avatar-secondary:active {
165
- background: var(--ids-comp-avatar-color-bg-secondary-pressed);
166
- border-color: var(--ids-comp-avatar-color-border-secondary-pressed);
167
- }
168
- .ids-avatar.ids-avatar-secondary .ids-avatar-icon path {
169
- fill: var(--ids-comp-avatar-color-fg-secondary-default);
188
+ .ids-avatar.ids-avatar-surface {
189
+ color: var(--ids-comp-avatar-color-fg-surface-default);
190
+ border-color: var(--ids-comp-avatar-color-border-surface-default);
191
+ background: var(--ids-comp-avatar-color-bg-surface-default);
170
192
  }
171
193
  .ids-avatar.ids-avatar-light {
172
194
  color: var(--ids-comp-avatar-color-fg-light-default);
173
- background: var(--ids-comp-avatar-color-bg-light-default);
174
195
  border-color: var(--ids-comp-avatar-color-border-light-default);
175
- }
176
- .ids-avatar.ids-avatar-light:hover {
177
- background: var(--ids-comp-avatar-color-bg-light-hovered);
178
- border-color: var(--ids-comp-avatar-color-border-light-hovered);
179
- }
180
- .ids-avatar.ids-avatar-light:focus, .ids-avatar.ids-avatar-light:focus-visible {
181
- background: var(--ids-comp-avatar-color-bg-light-focused);
182
- border-color: var(--ids-comp-avatar-color-border-light-focused);
183
- outline-color: var(--ids-comp-avatar-focused-outline-color-light-focused);
184
- }
185
- .ids-avatar.ids-avatar-light:active {
186
- background: var(--ids-comp-avatar-color-bg-light-pressed);
187
- border-color: var(--ids-comp-avatar-color-border-light-pressed);
188
- }
189
- .ids-avatar.ids-avatar-light .ids-avatar-icon path {
190
- fill: var(--ids-comp-avatar-color-fg-light-default);
196
+ background: var(--ids-comp-avatar-color-bg-light-default);
191
197
  }
192
198
  .ids-avatar.ids-avatar-dark {
193
199
  color: var(--ids-comp-avatar-color-fg-dark-default);
194
- background: var(--ids-comp-avatar-color-bg-dark-default);
195
200
  border-color: var(--ids-comp-avatar-color-border-dark-default);
196
- }
197
- .ids-avatar.ids-avatar-dark:hover {
198
- background: var(--ids-comp-avatar-color-bg-dark-hovered);
199
- border-color: var(--ids-comp-avatar-color-border-dark-hovered);
200
- }
201
- .ids-avatar.ids-avatar-dark:focus, .ids-avatar.ids-avatar-dark:focus-visible {
202
- background: var(--ids-comp-avatar-color-bg-dark-focused);
203
- border-color: var(--ids-comp-avatar-color-border-dark-focused);
204
- outline-color: var(--ids-comp-avatar-focused-outline-color-dark-focused);
205
- }
206
- .ids-avatar.ids-avatar-dark:active {
207
- background: var(--ids-comp-avatar-color-bg-dark-pressed);
208
- border-color: var(--ids-comp-avatar-color-border-dark-pressed);
209
- }
210
- .ids-avatar.ids-avatar-dark .ids-avatar-icon path {
211
- fill: var(--ids-comp-avatar-color-fg-dark-default);
212
- }
213
- .ids-avatar.ids-avatar-surface {
214
- color: var(--ids-comp-avatar-color-fg-surface-default);
215
- background: var(--ids-comp-avatar-color-bg-surface-default);
216
- border-color: var(--ids-comp-avatar-color-border-surface-default);
217
- }
218
- .ids-avatar.ids-avatar-surface:hover {
219
- background: var(--ids-comp-avatar-color-bg-surface-hovered);
220
- border-color: var(--ids-comp-avatar-color-border-surface-hovered);
221
- }
222
- .ids-avatar.ids-avatar-surface:focus, .ids-avatar.ids-avatar-surface:focus-visible {
223
- background: var(--ids-comp-avatar-color-bg-surface-focused);
224
- border-color: var(--ids-comp-avatar-color-border-surface-focused);
225
- outline-color: var(--ids-comp-avatar-focused-outline-color-dark-focused);
226
- }
227
- .ids-avatar.ids-avatar-surface:active {
228
- background: var(--ids-comp-avatar-color-bg-surface-pressed);
229
- border-color: var(--ids-comp-avatar-color-border-surface-pressed);
230
- }
231
- .ids-avatar.ids-avatar-surface .ids-avatar-icon path {
232
- fill: var(--ids-comp-avatar-color-fg-surface-default);
201
+ background: var(--ids-comp-avatar-color-bg-dark-default);
233
202
  }
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;border-style:solid}.ids-avatar:not(:disabled){cursor:pointer}.ids-avatar:disabled{cursor:not-allowed}.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,.ids-avatar:focus-visible{outline-offset:2px;outline-style:solid}.ids-avatar:active{outline:none}.ids-avatar.ids-avatar-compact{width:var(--ids-comp-avatar-size-height-compact);height:var(--ids-comp-avatar-size-width-compact);gap:var(--ids-comp-avatar-size-gap-compact);border-radius:var(--ids-comp-avatar-size-border-radius-compact);padding:var(--ids-comp-avatar-size-padding-y-compact) var(--ids-comp-avatar-size-padding-x-compact);border:var(--ids-comp-avatar-size-border-compact);font-family:var(--ids-comp-avatar-initials-typography-font-family-compact);font-size:var(--ids-comp-avatar-initials-typography-font-size-compact);font-weight:var(--ids-comp-avatar-initials-typography-font-weight-compact);letter-spacing:var(--ids-comp-avatar-initials-typography-letter-spacing-compact);line-height:var(--ids-comp-avatar-initials-typography-line-height-compact)}.ids-avatar.ids-avatar-compact:focus,.ids-avatar.ids-avatar-compact:focus-visible{outline-width:var(--ids-comp-avatar-focused-outline-size-outline)}.ids-avatar.ids-avatar-compact:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-compact .ids-avatar-image{width:var(--ids-comp-avatar-size-width-compact);height:var(--ids-comp-avatar-size-height-compact)}.ids-avatar.ids-avatar-comfortable{width:var(--ids-comp-avatar-size-height-comfortable);height:var(--ids-comp-avatar-size-width-comfortable);gap:var(--ids-comp-avatar-size-gap-comfortable);border-radius:var(--ids-comp-avatar-size-border-radius-comfortable);padding:var(--ids-comp-avatar-size-padding-y-comfortable) var(--ids-comp-avatar-size-padding-x-comfortable);border:var(--ids-comp-avatar-size-border-comfortable);font-family:var(--ids-comp-avatar-initials-typography-font-family-comfortable);font-size:var(--ids-comp-avatar-initials-typography-font-size-comfortable);font-weight:var(--ids-comp-avatar-initials-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-avatar-initials-typography-letter-spacing-comfortable);line-height:var(--ids-comp-avatar-initials-typography-line-height-comfortable)}.ids-avatar.ids-avatar-comfortable:focus,.ids-avatar.ids-avatar-comfortable:focus-visible{outline-width:var(--ids-comp-avatar-focused-outline-size-outline)}.ids-avatar.ids-avatar-comfortable:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-comfortable .ids-avatar-image{width:var(--ids-comp-avatar-size-width-comfortable);height:var(--ids-comp-avatar-size-height-comfortable)}.ids-avatar.ids-avatar-spacious{width:var(--ids-comp-avatar-size-height-spacious);height:var(--ids-comp-avatar-size-width-spacious);gap:var(--ids-comp-avatar-size-gap-spacious);border-radius:var(--ids-comp-avatar-size-border-radius-spacious);padding:var(--ids-comp-avatar-size-padding-y-spacious) var(--ids-comp-avatar-size-padding-x-spacious);border:var(--ids-comp-avatar-size-border-spacious);font-family:var(--ids-comp-avatar-initials-typography-font-family-spacious);font-size:var(--ids-comp-avatar-initials-typography-font-size-spacious);font-weight:var(--ids-comp-avatar-initials-typography-font-weight-spacious);letter-spacing:var(--ids-comp-avatar-initials-typography-letter-spacing-spacious);line-height:var(--ids-comp-avatar-initials-typography-line-height-spacious)}.ids-avatar.ids-avatar-spacious:focus,.ids-avatar.ids-avatar-spacious:focus-visible{outline-width:var(--ids-comp-avatar-focused-outline-size-outline)}.ids-avatar.ids-avatar-spacious:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-spacious .ids-avatar-image{width:var(--ids-comp-avatar-size-width-spacious);height:var(--ids-comp-avatar-size-height-spacious)}.ids-avatar.ids-avatar-dense{width:var(--ids-comp-avatar-size-height-dense);height:var(--ids-comp-avatar-size-width-dense);gap:var(--ids-comp-avatar-size-gap-dense);border-radius:var(--ids-comp-avatar-size-border-radius-dense);padding:var(--ids-comp-avatar-size-padding-y-dense) var(--ids-comp-avatar-size-padding-x-dense);border:var(--ids-comp-avatar-size-border-dense);font-family:var(--ids-comp-avatar-initials-typography-font-family-dense);font-size:var(--ids-comp-avatar-initials-typography-font-size-dense);font-weight:var(--ids-comp-avatar-initials-typography-font-weight-dense);letter-spacing:var(--ids-comp-avatar-initials-typography-letter-spacing-dense);line-height:var(--ids-comp-avatar-initials-typography-line-height-dense)}.ids-avatar.ids-avatar-dense:focus,.ids-avatar.ids-avatar-dense:focus-visible{outline-width:var(--ids-comp-avatar-focused-outline-size-outline)}.ids-avatar.ids-avatar-dense:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-dense .ids-avatar-image{width:var(--ids-comp-avatar-size-width-dense);height:var(--ids-comp-avatar-size-height-dense)}.ids-avatar.ids-avatar-primary{color:var(--ids-comp-avatar-color-fg-primary-default);background:var(--ids-comp-avatar-color-bg-primary-default);border-color:var(--ids-comp-avatar-color-border-primary-default)}.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,.ids-avatar.ids-avatar-primary:focus-visible{background:var(--ids-comp-avatar-color-bg-primary-focused);border-color:var(--ids-comp-avatar-color-border-primary-focused);outline-color:var(--ids-comp-avatar-focused-outline-color-dark-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-default)}.ids-avatar.ids-avatar-secondary{color:var(--ids-comp-avatar-color-fg-secondary-default);background:var(--ids-comp-avatar-color-bg-secondary-default);border-color:var(--ids-comp-avatar-color-border-secondary-default)}.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,.ids-avatar.ids-avatar-secondary:focus-visible{background:var(--ids-comp-avatar-color-bg-secondary-focused);border-color:var(--ids-comp-avatar-color-border-secondary-focused);outline-color:var(--ids-comp-avatar-focused-outline-color-dark-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-default)}.ids-avatar.ids-avatar-light{color:var(--ids-comp-avatar-color-fg-light-default);background:var(--ids-comp-avatar-color-bg-light-default);border-color:var(--ids-comp-avatar-color-border-light-default)}.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,.ids-avatar.ids-avatar-light:focus-visible{background:var(--ids-comp-avatar-color-bg-light-focused);border-color:var(--ids-comp-avatar-color-border-light-focused);outline-color:var(--ids-comp-avatar-focused-outline-color-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-default)}.ids-avatar.ids-avatar-dark{color:var(--ids-comp-avatar-color-fg-dark-default);background:var(--ids-comp-avatar-color-bg-dark-default);border-color:var(--ids-comp-avatar-color-border-dark-default)}.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,.ids-avatar.ids-avatar-dark:focus-visible{background:var(--ids-comp-avatar-color-bg-dark-focused);border-color:var(--ids-comp-avatar-color-border-dark-focused);outline-color:var(--ids-comp-avatar-focused-outline-color-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-default)}.ids-avatar.ids-avatar-surface{color:var(--ids-comp-avatar-color-fg-surface-default);background:var(--ids-comp-avatar-color-bg-surface-default);border-color:var(--ids-comp-avatar-color-border-surface-default)}.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,.ids-avatar.ids-avatar-surface:focus-visible{background:var(--ids-comp-avatar-color-bg-surface-focused);border-color:var(--ids-comp-avatar-color-border-surface-focused);outline-color:var(--ids-comp-avatar-focused-outline-color-dark-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-default)}
1
+ .ids-avatar{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;border-style:solid;overflow:hidden}.ids-avatar.ids-avatar-type-initials{flex-direction:column;text-align:center;font-style:normal;color:inherit}.ids-avatar.ids-avatar-type-icon{flex-shrink:0}.ids-avatar.ids-avatar-type-icon>.ids-icon{color:inherit}.ids-avatar.ids-avatar-type-image>img{width:100%;height:100%;object-fit:cover}.ids-avatar.ids-avatar-smallcollection-compact{width:var(--ids-comp-avatar-size-smallcollection-width-compact);height:var(--ids-comp-avatar-size-smallcollection-height-compact);border-width:var(--ids-comp-avatar-size-smallcollection-border-compact);border-radius:var(--ids-comp-avatar-size-smallcollection-border-radius-compact)}.ids-avatar.ids-avatar-smallcollection-compact.ids-avatar-type-initials{font-size:var(--ids-comp-avatar-initials-typography-smallcollection-font-size-compact);font-weight:var(--ids-comp-avatar-initials-typography-smallcollection-font-weight-compact);line-height:var(--ids-comp-avatar-initials-typography-smallcollection-line-height-compact);letter-spacing:var(--ids-comp-avatar-initials-typography-smallcollection-letter-spacing-compact)}.ids-avatar.ids-avatar-smallcollection-compact.ids-avatar-type-icon>.ids-icon{width:var(--ids-comp-avatar-size-smallcollection-icon-compact);height:var(--ids-comp-avatar-size-smallcollection-icon-compact);font-size:var(--ids-comp-avatar-icon-typography-smallcollection-font-size-compact);font-weight:var(--ids-comp-avatar-icon-typography-smallcollection-font-weight-compact);line-height:var(--ids-comp-avatar-icon-typography-smallcollection-line-height-compact)}.ids-avatar.ids-avatar-smallcollection-comfortable{width:var(--ids-comp-avatar-size-smallcollection-width-comfortable);height:var(--ids-comp-avatar-size-smallcollection-height-comfortable);border-width:var(--ids-comp-avatar-size-smallcollection-border-comfortable);border-radius:var(--ids-comp-avatar-size-smallcollection-border-radius-comfortable)}.ids-avatar.ids-avatar-smallcollection-comfortable.ids-avatar-type-initials{font-size:var(--ids-comp-avatar-initials-typography-smallcollection-font-size-comfortable);font-weight:var(--ids-comp-avatar-initials-typography-smallcollection-font-weight-comfortable);line-height:var(--ids-comp-avatar-initials-typography-smallcollection-line-height-comfortable);letter-spacing:var(--ids-comp-avatar-initials-typography-smallcollection-letter-spacing-comfortable)}.ids-avatar.ids-avatar-smallcollection-comfortable.ids-avatar-type-icon>.ids-icon{width:var(--ids-comp-avatar-size-smallcollection-icon-comfortable);height:var(--ids-comp-avatar-size-smallcollection-icon-comfortable);font-size:var(--ids-comp-avatar-icon-typography-smallcollection-font-size-comfortable);font-weight:var(--ids-comp-avatar-icon-typography-smallcollection-font-weight-comfortable);line-height:var(--ids-comp-avatar-icon-typography-smallcollection-line-height-comfortable)}.ids-avatar.ids-avatar-smallcollection-spacious{width:var(--ids-comp-avatar-size-smallcollection-width-spacious);height:var(--ids-comp-avatar-size-smallcollection-height-spacious);border-width:var(--ids-comp-avatar-size-smallcollection-border-spacious);border-radius:var(--ids-comp-avatar-size-smallcollection-border-radius-spacious)}.ids-avatar.ids-avatar-smallcollection-spacious.ids-avatar-type-initials{font-size:var(--ids-comp-avatar-initials-typography-smallcollection-font-size-spacious);font-weight:var(--ids-comp-avatar-initials-typography-smallcollection-font-weight-spacious);line-height:var(--ids-comp-avatar-initials-typography-smallcollection-line-height-spacious);letter-spacing:var(--ids-comp-avatar-initials-typography-smallcollection-letter-spacing-spacious)}.ids-avatar.ids-avatar-smallcollection-spacious.ids-avatar-type-icon>.ids-icon{width:var(--ids-comp-avatar-size-smallcollection-icon-spacious);height:var(--ids-comp-avatar-size-smallcollection-icon-spacious);font-size:var(--ids-comp-avatar-icon-typography-smallcollection-font-size-spacious);font-weight:var(--ids-comp-avatar-icon-typography-smallcollection-font-weight-spacious);line-height:var(--ids-comp-avatar-icon-typography-smallcollection-line-height-spacious)}.ids-avatar.ids-avatar-smallcollection-dense{width:var(--ids-comp-avatar-size-smallcollection-width-dense);height:var(--ids-comp-avatar-size-smallcollection-height-dense);border-width:var(--ids-comp-avatar-size-smallcollection-border-dense);border-radius:var(--ids-comp-avatar-size-smallcollection-border-radius-dense)}.ids-avatar.ids-avatar-smallcollection-dense.ids-avatar-type-initials{font-size:var(--ids-comp-avatar-initials-typography-smallcollection-font-size-dense);font-weight:var(--ids-comp-avatar-initials-typography-smallcollection-font-weight-dense);line-height:var(--ids-comp-avatar-initials-typography-smallcollection-line-height-dense);letter-spacing:var(--ids-comp-avatar-initials-typography-smallcollection-letter-spacing-dense)}.ids-avatar.ids-avatar-smallcollection-dense.ids-avatar-type-icon>.ids-icon{width:var(--ids-comp-avatar-size-smallcollection-icon-dense);height:var(--ids-comp-avatar-size-smallcollection-icon-dense);font-size:var(--ids-comp-avatar-icon-typography-smallcollection-font-size-dense);font-weight:var(--ids-comp-avatar-icon-typography-smallcollection-font-weight-dense);line-height:var(--ids-comp-avatar-icon-typography-smallcollection-line-height-dense)}.ids-avatar.ids-avatar-bigcollection-compact{width:var(--ids-comp-avatar-size-bigcollection-width-compact);height:var(--ids-comp-avatar-size-bigcollection-height-compact);border-width:var(--ids-comp-avatar-size-bigcollection-border-compact);border-radius:var(--ids-comp-avatar-size-bigcollection-border-radius-compact)}.ids-avatar.ids-avatar-bigcollection-compact.ids-avatar-type-initials{font-size:var(--ids-comp-avatar-initials-typography-bigcollection-font-size-compact);font-weight:var(--ids-comp-avatar-initials-typography-bigcollection-font-weight-compact);line-height:var(--ids-comp-avatar-initials-typography-bigcollection-line-height-compact);letter-spacing:var(--ids-comp-avatar-initials-typography-bigcollection-letter-spacing-compact)}.ids-avatar.ids-avatar-bigcollection-compact.ids-avatar-type-icon>.ids-icon{width:var(--ids-comp-avatar-size-bigcollection-icon-compact);height:var(--ids-comp-avatar-size-bigcollection-icon-compact);font-size:var(--ids-comp-avatar-icon-typography-bigcollection-font-size-compact);font-weight:var(--ids-comp-avatar-icon-typography-bigcollection-font-weight-compact);line-height:var(--ids-comp-avatar-icon-typography-bigcollection-line-height-compact)}.ids-avatar.ids-avatar-bigcollection-comfortable{width:var(--ids-comp-avatar-size-bigcollection-width-comfortable);height:var(--ids-comp-avatar-size-bigcollection-height-comfortable);border-width:var(--ids-comp-avatar-size-bigcollection-border-comfortable);border-radius:var(--ids-comp-avatar-size-bigcollection-border-radius-comfortable)}.ids-avatar.ids-avatar-bigcollection-comfortable.ids-avatar-type-initials{font-size:var(--ids-comp-avatar-initials-typography-bigcollection-font-size-comfortable);font-weight:var(--ids-comp-avatar-initials-typography-bigcollection-font-weight-comfortable);line-height:var(--ids-comp-avatar-initials-typography-bigcollection-line-height-comfortable);letter-spacing:var(--ids-comp-avatar-initials-typography-bigcollection-letter-spacing-comfortable)}.ids-avatar.ids-avatar-bigcollection-comfortable.ids-avatar-type-icon>.ids-icon{width:var(--ids-comp-avatar-size-bigcollection-icon-comfortable);height:var(--ids-comp-avatar-size-bigcollection-icon-comfortable);font-size:var(--ids-comp-avatar-icon-typography-bigcollection-font-size-comfortable);font-weight:var(--ids-comp-avatar-icon-typography-bigcollection-font-weight-comfortable);line-height:var(--ids-comp-avatar-icon-typography-bigcollection-line-height-comfortable)}.ids-avatar.ids-avatar-bigcollection-spacious{width:var(--ids-comp-avatar-size-bigcollection-width-spacious);height:var(--ids-comp-avatar-size-bigcollection-height-spacious);border-width:var(--ids-comp-avatar-size-bigcollection-border-spacious);border-radius:var(--ids-comp-avatar-size-bigcollection-border-radius-spacious)}.ids-avatar.ids-avatar-bigcollection-spacious.ids-avatar-type-initials{font-size:var(--ids-comp-avatar-initials-typography-bigcollection-font-size-spacious);font-weight:var(--ids-comp-avatar-initials-typography-bigcollection-font-weight-spacious);line-height:var(--ids-comp-avatar-initials-typography-bigcollection-line-height-spacious);letter-spacing:var(--ids-comp-avatar-initials-typography-bigcollection-letter-spacing-spacious)}.ids-avatar.ids-avatar-bigcollection-spacious.ids-avatar-type-icon>.ids-icon{width:var(--ids-comp-avatar-size-bigcollection-icon-spacious);height:var(--ids-comp-avatar-size-bigcollection-icon-spacious);font-size:var(--ids-comp-avatar-icon-typography-bigcollection-font-size-spacious);font-weight:var(--ids-comp-avatar-icon-typography-bigcollection-font-weight-spacious);line-height:var(--ids-comp-avatar-icon-typography-bigcollection-line-height-spacious)}.ids-avatar.ids-avatar-bigcollection-dense{width:var(--ids-comp-avatar-size-bigcollection-width-dense);height:var(--ids-comp-avatar-size-bigcollection-height-dense);border-width:var(--ids-comp-avatar-size-bigcollection-border-dense);border-radius:var(--ids-comp-avatar-size-bigcollection-border-radius-dense)}.ids-avatar.ids-avatar-bigcollection-dense.ids-avatar-type-initials{font-size:var(--ids-comp-avatar-initials-typography-bigcollection-font-size-dense);font-weight:var(--ids-comp-avatar-initials-typography-bigcollection-font-weight-dense);line-height:var(--ids-comp-avatar-initials-typography-bigcollection-line-height-dense);letter-spacing:var(--ids-comp-avatar-initials-typography-bigcollection-letter-spacing-dense)}.ids-avatar.ids-avatar-bigcollection-dense.ids-avatar-type-icon>.ids-icon{width:var(--ids-comp-avatar-size-bigcollection-icon-dense);height:var(--ids-comp-avatar-size-bigcollection-icon-dense);font-size:var(--ids-comp-avatar-icon-typography-bigcollection-font-size-dense);font-weight:var(--ids-comp-avatar-icon-typography-bigcollection-font-weight-dense);line-height:var(--ids-comp-avatar-icon-typography-bigcollection-line-height-dense)}.ids-avatar.ids-avatar-primary{color:var(--ids-comp-avatar-color-fg-primary-default);border-color:var(--ids-comp-avatar-color-border-primary-default);background:var(--ids-comp-avatar-color-bg-primary-default)}.ids-avatar.ids-avatar-secondary{color:var(--ids-comp-avatar-color-fg-secondary-default);border-color:var(--ids-comp-avatar-color-border-secondary-default);background:var(--ids-comp-avatar-color-bg-secondary-default)}.ids-avatar.ids-avatar-surface{color:var(--ids-comp-avatar-color-fg-surface-default);border-color:var(--ids-comp-avatar-color-border-surface-default);background:var(--ids-comp-avatar-color-bg-surface-default)}.ids-avatar.ids-avatar-light{color:var(--ids-comp-avatar-color-fg-light-default);border-color:var(--ids-comp-avatar-color-border-light-default);background:var(--ids-comp-avatar-color-bg-light-default)}.ids-avatar.ids-avatar-dark{color:var(--ids-comp-avatar-color-fg-dark-default);border-color:var(--ids-comp-avatar-color-border-dark-default);background:var(--ids-comp-avatar-color-bg-dark-default)}