@i-cell/ids-styles 0.0.2 → 0.0.3

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 (43) hide show
  1. package/dist/accordion/accordion.css +69 -68
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +69 -73
  4. package/dist/action-item/action-item.css +67 -55
  5. package/dist/action-item/action-item.min.css +1 -1
  6. package/dist/action-item/action-item.plugin.js +67 -73
  7. package/dist/action-panel/action-panel.css +29 -28
  8. package/dist/action-panel/action-panel.min.css +1 -1
  9. package/dist/action-panel/action-panel.plugin.js +35 -39
  10. package/dist/avatar/avatar.css +77 -154
  11. package/dist/avatar/avatar.min.css +1 -1
  12. package/dist/avatar/avatar.plugin.js +77 -148
  13. package/dist/button/button.css +134 -178
  14. package/dist/button/button.min.css +1 -1
  15. package/dist/button/button.plugin.js +141 -179
  16. package/dist/card/card.css +137 -184
  17. package/dist/card/card.min.css +1 -1
  18. package/dist/card/card.plugin.js +137 -189
  19. package/dist/checkbox/checkbox.css +554 -0
  20. package/dist/checkbox/checkbox.min.css +1 -0
  21. package/dist/checkbox/checkbox.plugin.js +539 -0
  22. package/dist/components.css +1566 -1326
  23. package/dist/components.min.css +1 -1
  24. package/dist/components.plugin.js +1511 -1374
  25. package/dist/dialog/dialog.css +99 -95
  26. package/dist/dialog/dialog.min.css +1 -1
  27. package/dist/dialog/dialog.plugin.js +103 -102
  28. package/dist/divider/divider.css +21 -23
  29. package/dist/divider/divider.min.css +1 -1
  30. package/dist/divider/divider.plugin.js +22 -30
  31. package/dist/form-elements/message/message.css +165 -0
  32. package/dist/form-elements/message/message.min.css +1 -0
  33. package/dist/form-elements/message/message.plugin.js +116 -0
  34. package/dist/form-elements/required-marker/required-marker.css +6 -0
  35. package/dist/form-elements/required-marker/required-marker.min.css +1 -0
  36. package/dist/form-elements/required-marker/required-marker.plugin.js +15 -0
  37. package/dist/icon-button/icon-button.css +101 -124
  38. package/dist/icon-button/icon-button.min.css +1 -1
  39. package/dist/icon-button/icon-button.plugin.js +108 -125
  40. package/dist/tag/tag.css +104 -417
  41. package/dist/tag/tag.min.css +1 -1
  42. package/dist/tag/tag.plugin.js +111 -418
  43. package/package.json +6 -4
package/dist/avatar/avatar.plugin.js CHANGED
@@ -9,6 +9,7 @@ module.exports = function AvatarPlugin() {
9
9
  alignItems: 'center',
10
10
  flexDirection: 'column',
11
11
  justifyContent: 'center',
12
+ borderStyle: 'solid',
12
13
  },
13
14
  '.ids-avatar .ids-avatar-icon': {
14
15
  gap: '10px',
@@ -22,88 +23,88 @@ module.exports = function AvatarPlugin() {
22
23
  '.ids-avatar .ids-avatar-image': { borderRadius: '50%', verticalAlign: 'middle', maxWidth: 'none' },
23
24
  '.ids-avatar:focus': {
24
25
  outlineOffset: '2px',
25
- outline: 'var(--ids-comp-avatar-focused-outline-size-outline) solid var(--ids-comp-avatar-focused-outline-color-dark-focused)',
26
- },
27
- '.ids-avatar:focus.ids-avatar-light': {
28
- outline: 'var(--ids-comp-avatar-focused-outline-size-outline) solid var(--ids-comp-avatar-focused-outline-color-light-focused)',
26
+ outlineStyle: 'solid',
27
+ outlineWidth: 'var(--ids-comp-avatar-focused-outline-size-outline)',
28
+ outlineColor: 'var(--ids-comp-avatar-focused-outline-color-dark-focused)',
29
29
  },
30
+ '.ids-avatar:focus.ids-avatar-light': { outlineColor: 'var(--ids-comp-avatar-focused-outline-color-light-focused)' },
30
31
  '.ids-avatar:active': { outline: 'none' },
31
32
  '.ids-avatar.ids-avatar-compact': {
32
- width: 'var(--ids-comp-size-avatar-size-height-compact)',
33
- height: 'var(--ids-comp-size-avatar-size-width-compact)',
34
- gap: 'var(--ids-comp-size-avatar-size-gap-compact)',
35
- borderRadius: 'var(--ids-comp-size-avatar-size-border-radius-compact)',
36
- padding: 'var(--ids-comp-size-avatar-size-padding-y-compact) var(--ids-comp-size-avatar-size-padding-x-compact)',
37
- border: 'var(--ids-comp-size-avatar-size-border-compact) solid',
38
- fontFamily: 'var(--ids-comp-size-avatar-initials-typography-font-family-compact)',
39
- fontSize: 'var(--ids-comp-size-avatar-initials-typography-font-size-compact)',
40
- fontWeight: 'var(--ids-comp-size-avatar-initials-typography-font-weight-compact)',
41
- letterSpacing: 'var(--ids-comp-size-avatar-initials-typography-letter-spacing-compact)',
42
- lineHeight: 'var(--ids-comp-size-avatar-initials-typography-line-height-compact)',
33
+ width: 'var(--ids-comp-avatar-size-height-compact)',
34
+ height: 'var(--ids-comp-avatar-size-width-compact)',
35
+ gap: 'var(--ids-comp-avatar-size-gap-compact)',
36
+ borderRadius: 'var(--ids-comp-avatar-size-border-radius-compact)',
37
+ padding: 'var(--ids-comp-avatar-size-padding-y-compact) var(--ids-comp-avatar-size-padding-x-compact)',
38
+ border: 'var(--ids-comp-avatar-size-border-compact)',
39
+ fontFamily: 'var(--ids-comp-avatar-initials-typography-font-family-compact)',
40
+ fontSize: 'var(--ids-comp-avatar-initials-typography-font-size-compact)',
41
+ fontWeight: 'var(--ids-comp-avatar-initials-typography-font-weight-compact)',
42
+ letterSpacing: 'var(--ids-comp-avatar-initials-typography-letter-spacing-compact)',
43
+ lineHeight: 'var(--ids-comp-avatar-initials-typography-line-height-compact)',
43
44
  },
44
45
  '.ids-avatar.ids-avatar-compact:has(.ids-avatar-image)': { padding: '0' },
45
46
  '.ids-avatar.ids-avatar-compact .ids-avatar-image': {
46
- width: 'var(--ids-comp-size-avatar-size-width-compact)',
47
- height: 'var(--ids-comp-size-avatar-size-height-compact)',
47
+ width: 'var(--ids-comp-avatar-size-width-compact)',
48
+ height: 'var(--ids-comp-avatar-size-height-compact)',
48
49
  },
49
50
  '.ids-avatar.ids-avatar-comfortable': {
50
- width: 'var(--ids-comp-size-avatar-size-height-comfortable)',
51
- height: 'var(--ids-comp-size-avatar-size-width-comfortable)',
52
- gap: 'var(--ids-comp-size-avatar-size-gap-comfortable)',
53
- borderRadius: 'var(--ids-comp-size-avatar-size-border-radius-comfortable)',
54
- padding: 'var(--ids-comp-size-avatar-size-padding-y-comfortable) var(--ids-comp-size-avatar-size-padding-x-comfortable)',
55
- border: 'var(--ids-comp-size-avatar-size-border-comfortable) solid',
56
- fontFamily: 'var(--ids-comp-size-avatar-initials-typography-font-family-comfortable)',
57
- fontSize: 'var(--ids-comp-size-avatar-initials-typography-font-size-comfortable)',
58
- fontWeight: 'var(--ids-comp-size-avatar-initials-typography-font-weight-comfortable)',
59
- letterSpacing: 'var(--ids-comp-size-avatar-initials-typography-letter-spacing-comfortable)',
60
- lineHeight: 'var(--ids-comp-size-avatar-initials-typography-line-height-comfortable)',
51
+ width: 'var(--ids-comp-avatar-size-height-comfortable)',
52
+ height: 'var(--ids-comp-avatar-size-width-comfortable)',
53
+ gap: 'var(--ids-comp-avatar-size-gap-comfortable)',
54
+ borderRadius: 'var(--ids-comp-avatar-size-border-radius-comfortable)',
55
+ padding: 'var(--ids-comp-avatar-size-padding-y-comfortable) var(--ids-comp-avatar-size-padding-x-comfortable)',
56
+ border: 'var(--ids-comp-avatar-size-border-comfortable)',
57
+ fontFamily: 'var(--ids-comp-avatar-initials-typography-font-family-comfortable)',
58
+ fontSize: 'var(--ids-comp-avatar-initials-typography-font-size-comfortable)',
59
+ fontWeight: 'var(--ids-comp-avatar-initials-typography-font-weight-comfortable)',
60
+ letterSpacing: 'var(--ids-comp-avatar-initials-typography-letter-spacing-comfortable)',
61
+ lineHeight: 'var(--ids-comp-avatar-initials-typography-line-height-comfortable)',
61
62
  },
62
63
  '.ids-avatar.ids-avatar-comfortable:has(.ids-avatar-image)': { padding: '0' },
63
64
  '.ids-avatar.ids-avatar-comfortable .ids-avatar-image': {
64
- width: 'var(--ids-comp-size-avatar-size-width-comfortable)',
65
- height: 'var(--ids-comp-size-avatar-size-height-comfortable)',
65
+ width: 'var(--ids-comp-avatar-size-width-comfortable)',
66
+ height: 'var(--ids-comp-avatar-size-height-comfortable)',
66
67
  },
67
68
  '.ids-avatar.ids-avatar-spacious': {
68
- width: 'var(--ids-comp-size-avatar-size-height-spacious)',
69
- height: 'var(--ids-comp-size-avatar-size-width-spacious)',
70
- gap: 'var(--ids-comp-size-avatar-size-gap-spacious)',
71
- borderRadius: 'var(--ids-comp-size-avatar-size-border-radius-spacious)',
72
- padding: 'var(--ids-comp-size-avatar-size-padding-y-spacious) var(--ids-comp-size-avatar-size-padding-x-spacious)',
73
- border: 'var(--ids-comp-size-avatar-size-border-spacious) solid',
74
- fontFamily: 'var(--ids-comp-size-avatar-initials-typography-font-family-spacious)',
75
- fontSize: 'var(--ids-comp-size-avatar-initials-typography-font-size-spacious)',
76
- fontWeight: 'var(--ids-comp-size-avatar-initials-typography-font-weight-spacious)',
77
- letterSpacing: 'var(--ids-comp-size-avatar-initials-typography-letter-spacing-spacious)',
78
- lineHeight: 'var(--ids-comp-size-avatar-initials-typography-line-height-spacious)',
69
+ width: 'var(--ids-comp-avatar-size-height-spacious)',
70
+ height: 'var(--ids-comp-avatar-size-width-spacious)',
71
+ gap: 'var(--ids-comp-avatar-size-gap-spacious)',
72
+ borderRadius: 'var(--ids-comp-avatar-size-border-radius-spacious)',
73
+ padding: 'var(--ids-comp-avatar-size-padding-y-spacious) var(--ids-comp-avatar-size-padding-x-spacious)',
74
+ border: 'var(--ids-comp-avatar-size-border-spacious)',
75
+ fontFamily: 'var(--ids-comp-avatar-initials-typography-font-family-spacious)',
76
+ fontSize: 'var(--ids-comp-avatar-initials-typography-font-size-spacious)',
77
+ fontWeight: 'var(--ids-comp-avatar-initials-typography-font-weight-spacious)',
78
+ letterSpacing: 'var(--ids-comp-avatar-initials-typography-letter-spacing-spacious)',
79
+ lineHeight: 'var(--ids-comp-avatar-initials-typography-line-height-spacious)',
79
80
  },
80
81
  '.ids-avatar.ids-avatar-spacious:has(.ids-avatar-image)': { padding: '0' },
81
82
  '.ids-avatar.ids-avatar-spacious .ids-avatar-image': {
82
- width: 'var(--ids-comp-size-avatar-size-width-spacious)',
83
- height: 'var(--ids-comp-size-avatar-size-height-spacious)',
83
+ width: 'var(--ids-comp-avatar-size-width-spacious)',
84
+ height: 'var(--ids-comp-avatar-size-height-spacious)',
84
85
  },
85
86
  '.ids-avatar.ids-avatar-dense': {
86
- width: 'var(--ids-comp-size-avatar-size-height-dense)',
87
- height: 'var(--ids-comp-size-avatar-size-width-dense)',
88
- gap: 'var(--ids-comp-size-avatar-size-gap-dense)',
89
- borderRadius: 'var(--ids-comp-size-avatar-size-border-radius-dense)',
90
- padding: 'var(--ids-comp-size-avatar-size-padding-y-dense) var(--ids-comp-size-avatar-size-padding-x-dense)',
91
- border: 'var(--ids-comp-size-avatar-size-border-dense) solid',
92
- fontFamily: 'var(--ids-comp-size-avatar-initials-typography-font-family-dense)',
93
- fontSize: 'var(--ids-comp-size-avatar-initials-typography-font-size-dense)',
94
- fontWeight: 'var(--ids-comp-size-avatar-initials-typography-font-weight-dense)',
95
- letterSpacing: 'var(--ids-comp-size-avatar-initials-typography-letter-spacing-dense)',
96
- lineHeight: 'var(--ids-comp-size-avatar-initials-typography-line-height-dense)',
87
+ width: 'var(--ids-comp-avatar-size-height-dense)',
88
+ height: 'var(--ids-comp-avatar-size-width-dense)',
89
+ gap: 'var(--ids-comp-avatar-size-gap-dense)',
90
+ borderRadius: 'var(--ids-comp-avatar-size-border-radius-dense)',
91
+ padding: 'var(--ids-comp-avatar-size-padding-y-dense) var(--ids-comp-avatar-size-padding-x-dense)',
92
+ border: 'var(--ids-comp-avatar-size-border-dense)',
93
+ fontFamily: 'var(--ids-comp-avatar-initials-typography-font-family-dense)',
94
+ fontSize: 'var(--ids-comp-avatar-initials-typography-font-size-dense)',
95
+ fontWeight: 'var(--ids-comp-avatar-initials-typography-font-weight-dense)',
96
+ letterSpacing: 'var(--ids-comp-avatar-initials-typography-letter-spacing-dense)',
97
+ lineHeight: 'var(--ids-comp-avatar-initials-typography-line-height-dense)',
97
98
  },
98
99
  '.ids-avatar.ids-avatar-dense:has(.ids-avatar-image)': { padding: '0' },
99
100
  '.ids-avatar.ids-avatar-dense .ids-avatar-image': {
100
- width: 'var(--ids-comp-size-avatar-size-width-dense)',
101
- height: 'var(--ids-comp-size-avatar-size-height-dense)',
101
+ width: 'var(--ids-comp-avatar-size-width-dense)',
102
+ height: 'var(--ids-comp-avatar-size-height-dense)',
102
103
  },
103
104
  '.ids-avatar.ids-avatar-primary': {
104
- color: 'var(--ids-comp-avatar-color-fg-primary-enabled)',
105
- background: 'var(--ids-comp-avatar-color-bg-primary-enabled)',
106
- borderColor: 'var(--ids-comp-avatar-color-border-primary-enabled)',
105
+ color: 'var(--ids-comp-avatar-color-fg-primary-default)',
106
+ background: 'var(--ids-comp-avatar-color-bg-primary-default)',
107
+ borderColor: 'var(--ids-comp-avatar-color-border-primary-default)',
107
108
  },
108
109
  '.ids-avatar.ids-avatar-primary:hover': {
109
110
  background: 'var(--ids-comp-avatar-color-bg-primary-hovered)',
@@ -117,11 +118,11 @@ module.exports = function AvatarPlugin() {
117
118
  background: 'var(--ids-comp-avatar-color-bg-primary-pressed)',
118
119
  borderColor: 'var(--ids-comp-avatar-color-border-primary-pressed)',
119
120
  },
120
- '.ids-avatar.ids-avatar-primary .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-primary-enabled)' },
121
+ '.ids-avatar.ids-avatar-primary .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-primary-default)' },
121
122
  '.ids-avatar.ids-avatar-secondary': {
122
- color: 'var(--ids-comp-avatar-color-fg-secondary-enabled)',
123
- background: 'var(--ids-comp-avatar-color-bg-secondary-enabled)',
124
- borderColor: 'var(--ids-comp-avatar-color-border-secondary-enabled)',
123
+ color: 'var(--ids-comp-avatar-color-fg-secondary-default)',
124
+ background: 'var(--ids-comp-avatar-color-bg-secondary-default)',
125
+ borderColor: 'var(--ids-comp-avatar-color-border-secondary-default)',
125
126
  },
126
127
  '.ids-avatar.ids-avatar-secondary:hover': {
127
128
  background: 'var(--ids-comp-avatar-color-bg-secondary-hovered)',
@@ -135,83 +136,11 @@ module.exports = function AvatarPlugin() {
135
136
  background: 'var(--ids-comp-avatar-color-bg-secondary-pressed)',
136
137
  borderColor: 'var(--ids-comp-avatar-color-border-secondary-pressed)',
137
138
  },
138
- '.ids-avatar.ids-avatar-secondary .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-secondary-enabled)' },
139
- '.ids-avatar.ids-avatar-brand': {
140
- color: 'var(--ids-comp-avatar-color-fg-brand-enabled)',
141
- background: 'var(--ids-comp-avatar-color-bg-brand-enabled)',
142
- borderColor: 'var(--ids-comp-avatar-color-border-brand-enabled)',
143
- },
144
- '.ids-avatar.ids-avatar-brand:hover': {
145
- background: 'var(--ids-comp-avatar-color-bg-brand-hovered)',
146
- borderColor: 'var(--ids-comp-avatar-color-border-brand-hovered)',
147
- },
148
- '.ids-avatar.ids-avatar-brand:focus': {
149
- background: 'var(--ids-comp-avatar-color-bg-brand-focused)',
150
- borderColor: 'var(--ids-comp-avatar-color-border-brand-focused)',
151
- },
152
- '.ids-avatar.ids-avatar-brand:active': {
153
- background: 'var(--ids-comp-avatar-color-bg-brand-pressed)',
154
- borderColor: 'var(--ids-comp-avatar-color-border-brand-pressed)',
155
- },
156
- '.ids-avatar.ids-avatar-brand .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-brand-enabled)' },
157
- '.ids-avatar.ids-avatar-error': {
158
- color: 'var(--ids-comp-avatar-color-fg-error-enabled)',
159
- background: 'var(--ids-comp-avatar-color-bg-error-enabled)',
160
- borderColor: 'var(--ids-comp-avatar-color-border-error-enabled)',
161
- },
162
- '.ids-avatar.ids-avatar-error:hover': {
163
- background: 'var(--ids-comp-avatar-color-bg-error-hovered)',
164
- borderColor: 'var(--ids-comp-avatar-color-border-error-hovered)',
165
- },
166
- '.ids-avatar.ids-avatar-error:focus': {
167
- background: 'var(--ids-comp-avatar-color-bg-error-focused)',
168
- borderColor: 'var(--ids-comp-avatar-color-border-error-focused)',
169
- },
170
- '.ids-avatar.ids-avatar-error:active': {
171
- background: 'var(--ids-comp-avatar-color-bg-error-pressed)',
172
- borderColor: 'var(--ids-comp-avatar-color-border-error-pressed)',
173
- },
174
- '.ids-avatar.ids-avatar-error .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-error-enabled)' },
175
- '.ids-avatar.ids-avatar-success': {
176
- color: 'var(--ids-comp-avatar-color-fg-success-enabled)',
177
- background: 'var(--ids-comp-avatar-color-bg-success-enabled)',
178
- borderColor: 'var(--ids-comp-avatar-color-border-success-enabled)',
179
- },
180
- '.ids-avatar.ids-avatar-success:hover': {
181
- background: 'var(--ids-comp-avatar-color-bg-success-hovered)',
182
- borderColor: 'var(--ids-comp-avatar-color-border-success-hovered)',
183
- },
184
- '.ids-avatar.ids-avatar-success:focus': {
185
- background: 'var(--ids-comp-avatar-color-bg-success-focused)',
186
- borderColor: 'var(--ids-comp-avatar-color-border-success-focused)',
187
- },
188
- '.ids-avatar.ids-avatar-success:active': {
189
- background: 'var(--ids-comp-avatar-color-bg-success-pressed)',
190
- borderColor: 'var(--ids-comp-avatar-color-border-success-pressed)',
191
- },
192
- '.ids-avatar.ids-avatar-success .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-success-enabled)' },
193
- '.ids-avatar.ids-avatar-warning': {
194
- color: 'var(--ids-comp-avatar-color-fg-warning-enabled)',
195
- background: 'var(--ids-comp-avatar-color-bg-warning-enabled)',
196
- borderColor: 'var(--ids-comp-avatar-color-border-warning-enabled)',
197
- },
198
- '.ids-avatar.ids-avatar-warning:hover': {
199
- background: 'var(--ids-comp-avatar-color-bg-warning-hovered)',
200
- borderColor: 'var(--ids-comp-avatar-color-border-warning-hovered)',
201
- },
202
- '.ids-avatar.ids-avatar-warning:focus': {
203
- background: 'var(--ids-comp-avatar-color-bg-warning-focused)',
204
- borderColor: 'var(--ids-comp-avatar-color-border-warning-focused)',
205
- },
206
- '.ids-avatar.ids-avatar-warning:active': {
207
- background: 'var(--ids-comp-avatar-color-bg-warning-pressed)',
208
- borderColor: 'var(--ids-comp-avatar-color-border-warning-pressed)',
209
- },
210
- '.ids-avatar.ids-avatar-warning .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-warning-enabled)' },
139
+ '.ids-avatar.ids-avatar-secondary .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-secondary-default)' },
211
140
  '.ids-avatar.ids-avatar-light': {
212
- color: 'var(--ids-comp-avatar-color-fg-light-enabled)',
213
- background: 'var(--ids-comp-avatar-color-bg-light-enabled)',
214
- borderColor: 'var(--ids-comp-avatar-color-border-light-enabled)',
141
+ color: 'var(--ids-comp-avatar-color-fg-light-default)',
142
+ background: 'var(--ids-comp-avatar-color-bg-light-default)',
143
+ borderColor: 'var(--ids-comp-avatar-color-border-light-default)',
215
144
  },
216
145
  '.ids-avatar.ids-avatar-light:hover': {
217
146
  background: 'var(--ids-comp-avatar-color-bg-light-hovered)',
@@ -225,11 +154,11 @@ module.exports = function AvatarPlugin() {
225
154
  background: 'var(--ids-comp-avatar-color-bg-light-pressed)',
226
155
  borderColor: 'var(--ids-comp-avatar-color-border-light-pressed)',
227
156
  },
228
- '.ids-avatar.ids-avatar-light .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-light-enabled)' },
157
+ '.ids-avatar.ids-avatar-light .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-light-default)' },
229
158
  '.ids-avatar.ids-avatar-dark': {
230
- color: 'var(--ids-comp-avatar-color-fg-dark-enabled)',
231
- background: 'var(--ids-comp-avatar-color-bg-dark-enabled)',
232
- borderColor: 'var(--ids-comp-avatar-color-border-dark-enabled)',
159
+ color: 'var(--ids-comp-avatar-color-fg-dark-default)',
160
+ background: 'var(--ids-comp-avatar-color-bg-dark-default)',
161
+ borderColor: 'var(--ids-comp-avatar-color-border-dark-default)',
233
162
  },
234
163
  '.ids-avatar.ids-avatar-dark:hover': {
235
164
  background: 'var(--ids-comp-avatar-color-bg-dark-hovered)',
@@ -243,11 +172,11 @@ module.exports = function AvatarPlugin() {
243
172
  background: 'var(--ids-comp-avatar-color-bg-dark-pressed)',
244
173
  borderColor: 'var(--ids-comp-avatar-color-border-dark-pressed)',
245
174
  },
246
- '.ids-avatar.ids-avatar-dark .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-dark-enabled)' },
175
+ '.ids-avatar.ids-avatar-dark .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-dark-default)' },
247
176
  '.ids-avatar.ids-avatar-surface': {
248
- color: 'var(--ids-comp-avatar-color-fg-surface-enabled)',
249
- background: 'var(--ids-comp-avatar-color-bg-surface-enabled)',
250
- borderColor: 'var(--ids-comp-avatar-color-border-surface-enabled)',
177
+ color: 'var(--ids-comp-avatar-color-fg-surface-default)',
178
+ background: 'var(--ids-comp-avatar-color-bg-surface-default)',
179
+ borderColor: 'var(--ids-comp-avatar-color-border-surface-default)',
251
180
  },
252
181
  '.ids-avatar.ids-avatar-surface:hover': {
253
182
  background: 'var(--ids-comp-avatar-color-bg-surface-hovered)',
@@ -261,7 +190,7 @@ module.exports = function AvatarPlugin() {
261
190
  background: 'var(--ids-comp-avatar-color-bg-surface-pressed)',
262
191
  borderColor: 'var(--ids-comp-avatar-color-border-surface-pressed)',
263
192
  },
264
- '.ids-avatar.ids-avatar-surface .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-surface-enabled)' },
193
+ '.ids-avatar.ids-avatar-surface .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-surface-default)' },
265
194
  };
266
195
 
267
196
  addComponents(cssObj);