@i-cell/ids-styles 0.0.15-beta.9 → 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 (76) hide show
  1. package/dist/accordion/accordion.css +184 -45
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +194 -55
  4. package/dist/avatar/avatar.css +176 -195
  5. package/dist/avatar/avatar.min.css +1 -1
  6. package/dist/avatar/avatar.plugin.js +168 -170
  7. package/dist/button/button.css +788 -656
  8. package/dist/button/button.min.css +1 -1
  9. package/dist/button/button.plugin.js +792 -693
  10. package/dist/card/card.css +61 -35
  11. package/dist/card/card.min.css +1 -1
  12. package/dist/card/card.plugin.js +181 -126
  13. package/dist/checkbox/checkbox.css +57 -29
  14. package/dist/checkbox/checkbox.min.css +1 -1
  15. package/dist/checkbox/checkbox.plugin.js +78 -53
  16. package/dist/checkbox/pseudo-checkbox.css +53 -25
  17. package/dist/checkbox/pseudo-checkbox.min.css +1 -1
  18. package/dist/checkbox/pseudo-checkbox.plugin.js +72 -43
  19. package/dist/components.css +2434 -1796
  20. package/dist/components.min.css +1 -1
  21. package/dist/components.plugin.js +2763 -2126
  22. package/dist/dialog/dialog.css +12 -1
  23. package/dist/dialog/dialog.min.css +1 -1
  24. package/dist/dialog/dialog.plugin.js +11 -4
  25. package/dist/divider/divider.css +0 -3
  26. package/dist/divider/divider.min.css +1 -1
  27. package/dist/divider/divider.plugin.js +1 -1
  28. package/dist/form-elements/form-field/form-field.css +84 -60
  29. package/dist/form-elements/form-field/form-field.min.css +1 -1
  30. package/dist/form-elements/form-field/form-field.plugin.js +84 -60
  31. package/dist/form-elements/message/message.css +21 -12
  32. package/dist/form-elements/message/message.min.css +1 -1
  33. package/dist/form-elements/message/message.plugin.js +21 -4
  34. package/dist/icon/icon.css +3 -2
  35. package/dist/icon/icon.min.css +1 -1
  36. package/dist/icon/icon.plugin.js +3 -2
  37. package/dist/icon-button/icon-button.css +133 -82
  38. package/dist/icon-button/icon-button.min.css +1 -1
  39. package/dist/icon-button/icon-button.plugin.js +256 -182
  40. package/dist/menu-item/menu-item.css +184 -0
  41. package/dist/menu-item/menu-item.min.css +1 -0
  42. package/dist/menu-item/menu-item.plugin.js +181 -0
  43. package/dist/option/option.css +13 -0
  44. package/dist/option/option.min.css +1 -1
  45. package/dist/option/option.plugin.js +13 -1
  46. package/dist/overlay-panel/overlay-panel.css +125 -0
  47. package/dist/overlay-panel/overlay-panel.min.css +1 -0
  48. package/dist/overlay-panel/overlay-panel.plugin.js +125 -0
  49. package/dist/paginator/paginator.css +133 -23
  50. package/dist/paginator/paginator.min.css +1 -1
  51. package/dist/paginator/paginator.plugin.js +113 -41
  52. package/dist/radio/radio.css +49 -49
  53. package/dist/radio/radio.min.css +1 -1
  54. package/dist/radio/radio.plugin.js +56 -61
  55. package/dist/segmented-control/segmented-control-toggle.css +37 -25
  56. package/dist/segmented-control/segmented-control-toggle.min.css +1 -1
  57. package/dist/segmented-control/segmented-control-toggle.plugin.js +46 -45
  58. package/dist/segmented-control/segmented-control.css +37 -25
  59. package/dist/segmented-control/segmented-control.min.css +1 -1
  60. package/dist/segmented-control/segmented-control.plugin.js +87 -75
  61. package/dist/snackbar/snackbar.css +12 -0
  62. package/dist/snackbar/snackbar.min.css +1 -1
  63. package/dist/snackbar/snackbar.plugin.js +28 -4
  64. package/dist/switch/switch.css +44 -56
  65. package/dist/switch/switch.min.css +1 -1
  66. package/dist/switch/switch.plugin.js +55 -74
  67. package/dist/tag/tag.css +230 -199
  68. package/dist/tag/tag.min.css +1 -1
  69. package/dist/tag/tag.plugin.js +228 -195
  70. package/package.json +4 -4
  71. package/dist/action-item/action-item.css +0 -185
  72. package/dist/action-item/action-item.min.css +0 -1
  73. package/dist/action-item/action-item.plugin.js +0 -176
  74. package/dist/action-panel/action-panel.css +0 -91
  75. package/dist/action-panel/action-panel.min.css +0 -1
  76. package/dist/action-panel/action-panel.plugin.js +0 -91
package/dist/avatar/avatar.plugin.js CHANGED
@@ -3,196 +3,194 @@ module.exports = function AvatarPlugin() {
3
3
  return function ({ addComponents }) {
4
4
  const cssObj = {
5
5
  '.ids-avatar': {
6
- display: 'flex',
7
- fontStyle: 'normal',
8
- textAlign: 'center',
9
- alignItems: 'center',
10
- flexDirection: 'column',
6
+ display: 'inline-flex',
11
7
  justifyContent: 'center',
12
- borderStyle: 'solid',
13
- },
14
- '.ids-avatar:not(:disabled)': { cursor: 'pointer' },
15
- '.ids-avatar:disabled': { cursor: 'not-allowed' },
16
- '.ids-avatar .ids-avatar-icon': {
17
- gap: '10px',
18
- display: 'flex',
19
8
  alignItems: 'center',
20
- justifyContent: 'center',
21
- flexDirection: 'column',
22
- width: '100%',
23
- height: '100%',
24
- },
25
- '.ids-avatar .ids-avatar-image': { borderRadius: '50%', verticalAlign: 'middle', maxWidth: 'none' },
26
- '.ids-avatar:focus': {
27
- outlineOffset: '2px',
28
- outlineStyle: 'solid',
29
- outlineWidth: 'var(--ids-comp-avatar-focused-outline-size-outline)',
30
- outlineColor: 'var(--ids-comp-avatar-focused-outline-color-dark-focused)',
31
- },
32
- '.ids-avatar:focus.ids-avatar-light': { outlineColor: 'var(--ids-comp-avatar-focused-outline-color-light-focused)' },
33
- '.ids-avatar:active': { outline: 'none' },
34
- '.ids-avatar.ids-avatar-compact': {
35
- width: 'var(--ids-comp-avatar-size-height-compact)',
36
- height: 'var(--ids-comp-avatar-size-width-compact)',
37
- gap: 'var(--ids-comp-avatar-size-gap-compact)',
38
- borderRadius: 'var(--ids-comp-avatar-size-border-radius-compact)',
39
- padding: 'var(--ids-comp-avatar-size-padding-y-compact) var(--ids-comp-avatar-size-padding-x-compact)',
40
- border: 'var(--ids-comp-avatar-size-border-compact)',
41
- fontFamily: 'var(--ids-comp-avatar-initials-typography-font-family-compact)',
42
- fontSize: 'var(--ids-comp-avatar-initials-typography-font-size-compact)',
43
- fontWeight: 'var(--ids-comp-avatar-initials-typography-font-weight-compact)',
44
- letterSpacing: 'var(--ids-comp-avatar-initials-typography-letter-spacing-compact)',
45
- lineHeight: 'var(--ids-comp-avatar-initials-typography-line-height-compact)',
46
- },
47
- '.ids-avatar.ids-avatar-compact:has(.ids-avatar-image)': { padding: '0' },
48
- '.ids-avatar.ids-avatar-compact .ids-avatar-image': {
49
- width: 'var(--ids-comp-avatar-size-width-compact)',
50
- height: 'var(--ids-comp-avatar-size-height-compact)',
51
- },
52
- '.ids-avatar.ids-avatar-comfortable': {
53
- width: 'var(--ids-comp-avatar-size-height-comfortable)',
54
- height: 'var(--ids-comp-avatar-size-width-comfortable)',
55
- gap: 'var(--ids-comp-avatar-size-gap-comfortable)',
56
- borderRadius: 'var(--ids-comp-avatar-size-border-radius-comfortable)',
57
- padding: 'var(--ids-comp-avatar-size-padding-y-comfortable) var(--ids-comp-avatar-size-padding-x-comfortable)',
58
- border: 'var(--ids-comp-avatar-size-border-comfortable)',
59
- fontFamily: 'var(--ids-comp-avatar-initials-typography-font-family-comfortable)',
60
- fontSize: 'var(--ids-comp-avatar-initials-typography-font-size-comfortable)',
61
- fontWeight: 'var(--ids-comp-avatar-initials-typography-font-weight-comfortable)',
62
- letterSpacing: 'var(--ids-comp-avatar-initials-typography-letter-spacing-comfortable)',
63
- lineHeight: 'var(--ids-comp-avatar-initials-typography-line-height-comfortable)',
64
- },
65
- '.ids-avatar.ids-avatar-comfortable:has(.ids-avatar-image)': { padding: '0' },
66
- '.ids-avatar.ids-avatar-comfortable .ids-avatar-image': {
67
- width: 'var(--ids-comp-avatar-size-width-comfortable)',
68
- height: 'var(--ids-comp-avatar-size-height-comfortable)',
69
- },
70
- '.ids-avatar.ids-avatar-spacious': {
71
- width: 'var(--ids-comp-avatar-size-height-spacious)',
72
- height: 'var(--ids-comp-avatar-size-width-spacious)',
73
- gap: 'var(--ids-comp-avatar-size-gap-spacious)',
74
- borderRadius: 'var(--ids-comp-avatar-size-border-radius-spacious)',
75
- padding: 'var(--ids-comp-avatar-size-padding-y-spacious) var(--ids-comp-avatar-size-padding-x-spacious)',
76
- border: 'var(--ids-comp-avatar-size-border-spacious)',
77
- fontFamily: 'var(--ids-comp-avatar-initials-typography-font-family-spacious)',
78
- fontSize: 'var(--ids-comp-avatar-initials-typography-font-size-spacious)',
79
- fontWeight: 'var(--ids-comp-avatar-initials-typography-font-weight-spacious)',
80
- letterSpacing: 'var(--ids-comp-avatar-initials-typography-letter-spacing-spacious)',
81
- lineHeight: 'var(--ids-comp-avatar-initials-typography-line-height-spacious)',
82
- },
83
- '.ids-avatar.ids-avatar-spacious:has(.ids-avatar-image)': { padding: '0' },
84
- '.ids-avatar.ids-avatar-spacious .ids-avatar-image': {
85
- width: 'var(--ids-comp-avatar-size-width-spacious)',
86
- height: 'var(--ids-comp-avatar-size-height-spacious)',
87
- },
88
- '.ids-avatar.ids-avatar-dense': {
89
- width: 'var(--ids-comp-avatar-size-height-dense)',
90
- height: 'var(--ids-comp-avatar-size-width-dense)',
91
- gap: 'var(--ids-comp-avatar-size-gap-dense)',
92
- borderRadius: 'var(--ids-comp-avatar-size-border-radius-dense)',
93
- padding: 'var(--ids-comp-avatar-size-padding-y-dense) var(--ids-comp-avatar-size-padding-x-dense)',
94
- border: 'var(--ids-comp-avatar-size-border-dense)',
95
- fontFamily: 'var(--ids-comp-avatar-initials-typography-font-family-dense)',
96
- fontSize: 'var(--ids-comp-avatar-initials-typography-font-size-dense)',
97
- fontWeight: 'var(--ids-comp-avatar-initials-typography-font-weight-dense)',
98
- letterSpacing: 'var(--ids-comp-avatar-initials-typography-letter-spacing-dense)',
99
- lineHeight: 'var(--ids-comp-avatar-initials-typography-line-height-dense)',
100
- },
101
- '.ids-avatar.ids-avatar-dense:has(.ids-avatar-image)': { padding: '0' },
102
- '.ids-avatar.ids-avatar-dense .ids-avatar-image': {
103
- width: 'var(--ids-comp-avatar-size-width-dense)',
104
- height: 'var(--ids-comp-avatar-size-height-dense)',
9
+ flexShrink: 0,
10
+ borderStyle: 'solid',
11
+ overflow: 'hidden',
12
+ },
13
+ '.ids-avatar.ids-avatar-type-initials': { flexDirection: 'column', textAlign: 'center', fontStyle: 'normal', color: 'inherit' },
14
+ '.ids-avatar.ids-avatar-type-icon': { flexShrink: 0 },
15
+ '.ids-avatar.ids-avatar-type-icon>.ids-icon': { color: 'inherit' },
16
+ '.ids-avatar.ids-avatar-type-image>img': { width: '100%', height: '100%', objectFit: 'cover' },
17
+ '.ids-avatar.ids-avatar-smallcollection-compact': {
18
+ width: 'var(--ids-comp-avatar-size-smallcollection-width-compact)',
19
+ height: 'var(--ids-comp-avatar-size-smallcollection-height-compact)',
20
+ borderWidth: 'var(--ids-comp-avatar-size-smallcollection-border-compact)',
21
+ borderRadius: 'var(--ids-comp-avatar-size-smallcollection-border-radius-compact)',
22
+ },
23
+ '.ids-avatar.ids-avatar-smallcollection-compact.ids-avatar-type-initials': {
24
+ fontSize: 'var(--ids-comp-avatar-initials-typography-smallcollection-font-size-compact)',
25
+ fontWeight: 'var(--ids-comp-avatar-initials-typography-smallcollection-font-weight-compact)',
26
+ lineHeight: 'var(--ids-comp-avatar-initials-typography-smallcollection-line-height-compact)',
27
+ letterSpacing: 'var(--ids-comp-avatar-initials-typography-smallcollection-letter-spacing-compact)',
28
+ },
29
+ '.ids-avatar.ids-avatar-smallcollection-compact.ids-avatar-type-icon>.ids-icon': {
30
+ width: 'var(--ids-comp-avatar-size-smallcollection-icon-compact)',
31
+ height: 'var(--ids-comp-avatar-size-smallcollection-icon-compact)',
32
+ fontSize: 'var(--ids-comp-avatar-icon-typography-smallcollection-font-size-compact)',
33
+ fontWeight: 'var(--ids-comp-avatar-icon-typography-smallcollection-font-weight-compact)',
34
+ lineHeight: 'var(--ids-comp-avatar-icon-typography-smallcollection-line-height-compact)',
35
+ },
36
+ '.ids-avatar.ids-avatar-smallcollection-comfortable': {
37
+ width: 'var(--ids-comp-avatar-size-smallcollection-width-comfortable)',
38
+ height: 'var(--ids-comp-avatar-size-smallcollection-height-comfortable)',
39
+ borderWidth: 'var(--ids-comp-avatar-size-smallcollection-border-comfortable)',
40
+ borderRadius: 'var(--ids-comp-avatar-size-smallcollection-border-radius-comfortable)',
41
+ },
42
+ '.ids-avatar.ids-avatar-smallcollection-comfortable.ids-avatar-type-initials': {
43
+ fontSize: 'var(--ids-comp-avatar-initials-typography-smallcollection-font-size-comfortable)',
44
+ fontWeight: 'var(--ids-comp-avatar-initials-typography-smallcollection-font-weight-comfortable)',
45
+ lineHeight: 'var(--ids-comp-avatar-initials-typography-smallcollection-line-height-comfortable)',
46
+ letterSpacing: 'var(--ids-comp-avatar-initials-typography-smallcollection-letter-spacing-comfortable)',
47
+ },
48
+ '.ids-avatar.ids-avatar-smallcollection-comfortable.ids-avatar-type-icon>.ids-icon': {
49
+ width: 'var(--ids-comp-avatar-size-smallcollection-icon-comfortable)',
50
+ height: 'var(--ids-comp-avatar-size-smallcollection-icon-comfortable)',
51
+ fontSize: 'var(--ids-comp-avatar-icon-typography-smallcollection-font-size-comfortable)',
52
+ fontWeight: 'var(--ids-comp-avatar-icon-typography-smallcollection-font-weight-comfortable)',
53
+ lineHeight: 'var(--ids-comp-avatar-icon-typography-smallcollection-line-height-comfortable)',
54
+ },
55
+ '.ids-avatar.ids-avatar-smallcollection-spacious': {
56
+ width: 'var(--ids-comp-avatar-size-smallcollection-width-spacious)',
57
+ height: 'var(--ids-comp-avatar-size-smallcollection-height-spacious)',
58
+ borderWidth: 'var(--ids-comp-avatar-size-smallcollection-border-spacious)',
59
+ borderRadius: 'var(--ids-comp-avatar-size-smallcollection-border-radius-spacious)',
60
+ },
61
+ '.ids-avatar.ids-avatar-smallcollection-spacious.ids-avatar-type-initials': {
62
+ fontSize: 'var(--ids-comp-avatar-initials-typography-smallcollection-font-size-spacious)',
63
+ fontWeight: 'var(--ids-comp-avatar-initials-typography-smallcollection-font-weight-spacious)',
64
+ lineHeight: 'var(--ids-comp-avatar-initials-typography-smallcollection-line-height-spacious)',
65
+ letterSpacing: 'var(--ids-comp-avatar-initials-typography-smallcollection-letter-spacing-spacious)',
66
+ },
67
+ '.ids-avatar.ids-avatar-smallcollection-spacious.ids-avatar-type-icon>.ids-icon': {
68
+ width: 'var(--ids-comp-avatar-size-smallcollection-icon-spacious)',
69
+ height: 'var(--ids-comp-avatar-size-smallcollection-icon-spacious)',
70
+ fontSize: 'var(--ids-comp-avatar-icon-typography-smallcollection-font-size-spacious)',
71
+ fontWeight: 'var(--ids-comp-avatar-icon-typography-smallcollection-font-weight-spacious)',
72
+ lineHeight: 'var(--ids-comp-avatar-icon-typography-smallcollection-line-height-spacious)',
73
+ },
74
+ '.ids-avatar.ids-avatar-smallcollection-dense': {
75
+ width: 'var(--ids-comp-avatar-size-smallcollection-width-dense)',
76
+ height: 'var(--ids-comp-avatar-size-smallcollection-height-dense)',
77
+ borderWidth: 'var(--ids-comp-avatar-size-smallcollection-border-dense)',
78
+ borderRadius: 'var(--ids-comp-avatar-size-smallcollection-border-radius-dense)',
79
+ },
80
+ '.ids-avatar.ids-avatar-smallcollection-dense.ids-avatar-type-initials': {
81
+ fontSize: 'var(--ids-comp-avatar-initials-typography-smallcollection-font-size-dense)',
82
+ fontWeight: 'var(--ids-comp-avatar-initials-typography-smallcollection-font-weight-dense)',
83
+ lineHeight: 'var(--ids-comp-avatar-initials-typography-smallcollection-line-height-dense)',
84
+ letterSpacing: 'var(--ids-comp-avatar-initials-typography-smallcollection-letter-spacing-dense)',
85
+ },
86
+ '.ids-avatar.ids-avatar-smallcollection-dense.ids-avatar-type-icon>.ids-icon': {
87
+ width: 'var(--ids-comp-avatar-size-smallcollection-icon-dense)',
88
+ height: 'var(--ids-comp-avatar-size-smallcollection-icon-dense)',
89
+ fontSize: 'var(--ids-comp-avatar-icon-typography-smallcollection-font-size-dense)',
90
+ fontWeight: 'var(--ids-comp-avatar-icon-typography-smallcollection-font-weight-dense)',
91
+ lineHeight: 'var(--ids-comp-avatar-icon-typography-smallcollection-line-height-dense)',
92
+ },
93
+ '.ids-avatar.ids-avatar-bigcollection-compact': {
94
+ width: 'var(--ids-comp-avatar-size-bigcollection-width-compact)',
95
+ height: 'var(--ids-comp-avatar-size-bigcollection-height-compact)',
96
+ borderWidth: 'var(--ids-comp-avatar-size-bigcollection-border-compact)',
97
+ borderRadius: 'var(--ids-comp-avatar-size-bigcollection-border-radius-compact)',
98
+ },
99
+ '.ids-avatar.ids-avatar-bigcollection-compact.ids-avatar-type-initials': {
100
+ fontSize: 'var(--ids-comp-avatar-initials-typography-bigcollection-font-size-compact)',
101
+ fontWeight: 'var(--ids-comp-avatar-initials-typography-bigcollection-font-weight-compact)',
102
+ lineHeight: 'var(--ids-comp-avatar-initials-typography-bigcollection-line-height-compact)',
103
+ letterSpacing: 'var(--ids-comp-avatar-initials-typography-bigcollection-letter-spacing-compact)',
104
+ },
105
+ '.ids-avatar.ids-avatar-bigcollection-compact.ids-avatar-type-icon>.ids-icon': {
106
+ width: 'var(--ids-comp-avatar-size-bigcollection-icon-compact)',
107
+ height: 'var(--ids-comp-avatar-size-bigcollection-icon-compact)',
108
+ fontSize: 'var(--ids-comp-avatar-icon-typography-bigcollection-font-size-compact)',
109
+ fontWeight: 'var(--ids-comp-avatar-icon-typography-bigcollection-font-weight-compact)',
110
+ lineHeight: 'var(--ids-comp-avatar-icon-typography-bigcollection-line-height-compact)',
111
+ },
112
+ '.ids-avatar.ids-avatar-bigcollection-comfortable': {
113
+ width: 'var(--ids-comp-avatar-size-bigcollection-width-comfortable)',
114
+ height: 'var(--ids-comp-avatar-size-bigcollection-height-comfortable)',
115
+ borderWidth: 'var(--ids-comp-avatar-size-bigcollection-border-comfortable)',
116
+ borderRadius: 'var(--ids-comp-avatar-size-bigcollection-border-radius-comfortable)',
117
+ },
118
+ '.ids-avatar.ids-avatar-bigcollection-comfortable.ids-avatar-type-initials': {
119
+ fontSize: 'var(--ids-comp-avatar-initials-typography-bigcollection-font-size-comfortable)',
120
+ fontWeight: 'var(--ids-comp-avatar-initials-typography-bigcollection-font-weight-comfortable)',
121
+ lineHeight: 'var(--ids-comp-avatar-initials-typography-bigcollection-line-height-comfortable)',
122
+ letterSpacing: 'var(--ids-comp-avatar-initials-typography-bigcollection-letter-spacing-comfortable)',
123
+ },
124
+ '.ids-avatar.ids-avatar-bigcollection-comfortable.ids-avatar-type-icon>.ids-icon': {
125
+ width: 'var(--ids-comp-avatar-size-bigcollection-icon-comfortable)',
126
+ height: 'var(--ids-comp-avatar-size-bigcollection-icon-comfortable)',
127
+ fontSize: 'var(--ids-comp-avatar-icon-typography-bigcollection-font-size-comfortable)',
128
+ fontWeight: 'var(--ids-comp-avatar-icon-typography-bigcollection-font-weight-comfortable)',
129
+ lineHeight: 'var(--ids-comp-avatar-icon-typography-bigcollection-line-height-comfortable)',
130
+ },
131
+ '.ids-avatar.ids-avatar-bigcollection-spacious': {
132
+ width: 'var(--ids-comp-avatar-size-bigcollection-width-spacious)',
133
+ height: 'var(--ids-comp-avatar-size-bigcollection-height-spacious)',
134
+ borderWidth: 'var(--ids-comp-avatar-size-bigcollection-border-spacious)',
135
+ borderRadius: 'var(--ids-comp-avatar-size-bigcollection-border-radius-spacious)',
136
+ },
137
+ '.ids-avatar.ids-avatar-bigcollection-spacious.ids-avatar-type-initials': {
138
+ fontSize: 'var(--ids-comp-avatar-initials-typography-bigcollection-font-size-spacious)',
139
+ fontWeight: 'var(--ids-comp-avatar-initials-typography-bigcollection-font-weight-spacious)',
140
+ lineHeight: 'var(--ids-comp-avatar-initials-typography-bigcollection-line-height-spacious)',
141
+ letterSpacing: 'var(--ids-comp-avatar-initials-typography-bigcollection-letter-spacing-spacious)',
142
+ },
143
+ '.ids-avatar.ids-avatar-bigcollection-spacious.ids-avatar-type-icon>.ids-icon': {
144
+ width: 'var(--ids-comp-avatar-size-bigcollection-icon-spacious)',
145
+ height: 'var(--ids-comp-avatar-size-bigcollection-icon-spacious)',
146
+ fontSize: 'var(--ids-comp-avatar-icon-typography-bigcollection-font-size-spacious)',
147
+ fontWeight: 'var(--ids-comp-avatar-icon-typography-bigcollection-font-weight-spacious)',
148
+ lineHeight: 'var(--ids-comp-avatar-icon-typography-bigcollection-line-height-spacious)',
149
+ },
150
+ '.ids-avatar.ids-avatar-bigcollection-dense': {
151
+ width: 'var(--ids-comp-avatar-size-bigcollection-width-dense)',
152
+ height: 'var(--ids-comp-avatar-size-bigcollection-height-dense)',
153
+ borderWidth: 'var(--ids-comp-avatar-size-bigcollection-border-dense)',
154
+ borderRadius: 'var(--ids-comp-avatar-size-bigcollection-border-radius-dense)',
155
+ },
156
+ '.ids-avatar.ids-avatar-bigcollection-dense.ids-avatar-type-initials': {
157
+ fontSize: 'var(--ids-comp-avatar-initials-typography-bigcollection-font-size-dense)',
158
+ fontWeight: 'var(--ids-comp-avatar-initials-typography-bigcollection-font-weight-dense)',
159
+ lineHeight: 'var(--ids-comp-avatar-initials-typography-bigcollection-line-height-dense)',
160
+ letterSpacing: 'var(--ids-comp-avatar-initials-typography-bigcollection-letter-spacing-dense)',
161
+ },
162
+ '.ids-avatar.ids-avatar-bigcollection-dense.ids-avatar-type-icon>.ids-icon': {
163
+ width: 'var(--ids-comp-avatar-size-bigcollection-icon-dense)',
164
+ height: 'var(--ids-comp-avatar-size-bigcollection-icon-dense)',
165
+ fontSize: 'var(--ids-comp-avatar-icon-typography-bigcollection-font-size-dense)',
166
+ fontWeight: 'var(--ids-comp-avatar-icon-typography-bigcollection-font-weight-dense)',
167
+ lineHeight: 'var(--ids-comp-avatar-icon-typography-bigcollection-line-height-dense)',
105
168
  },
106
169
  '.ids-avatar.ids-avatar-primary': {
107
170
  color: 'var(--ids-comp-avatar-color-fg-primary-default)',
108
- background: 'var(--ids-comp-avatar-color-bg-primary-default)',
109
171
  borderColor: 'var(--ids-comp-avatar-color-border-primary-default)',
172
+ background: 'var(--ids-comp-avatar-color-bg-primary-default)',
110
173
  },
111
- '.ids-avatar.ids-avatar-primary:hover': {
112
- background: 'var(--ids-comp-avatar-color-bg-primary-hovered)',
113
- borderColor: 'var(--ids-comp-avatar-color-border-primary-hovered)',
114
- },
115
- '.ids-avatar.ids-avatar-primary:focus': {
116
- background: 'var(--ids-comp-avatar-color-bg-primary-focused)',
117
- borderColor: 'var(--ids-comp-avatar-color-border-primary-focused)',
118
- },
119
- '.ids-avatar.ids-avatar-primary:active': {
120
- background: 'var(--ids-comp-avatar-color-bg-primary-pressed)',
121
- borderColor: 'var(--ids-comp-avatar-color-border-primary-pressed)',
122
- },
123
- '.ids-avatar.ids-avatar-primary .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-primary-default)' },
124
174
  '.ids-avatar.ids-avatar-secondary': {
125
175
  color: 'var(--ids-comp-avatar-color-fg-secondary-default)',
126
- background: 'var(--ids-comp-avatar-color-bg-secondary-default)',
127
176
  borderColor: 'var(--ids-comp-avatar-color-border-secondary-default)',
177
+ background: 'var(--ids-comp-avatar-color-bg-secondary-default)',
128
178
  },
129
- '.ids-avatar.ids-avatar-secondary:hover': {
130
- background: 'var(--ids-comp-avatar-color-bg-secondary-hovered)',
131
- borderColor: 'var(--ids-comp-avatar-color-border-secondary-hovered)',
132
- },
133
- '.ids-avatar.ids-avatar-secondary:focus': {
134
- background: 'var(--ids-comp-avatar-color-bg-secondary-focused)',
135
- borderColor: 'var(--ids-comp-avatar-color-border-secondary-focused)',
136
- },
137
- '.ids-avatar.ids-avatar-secondary:active': {
138
- background: 'var(--ids-comp-avatar-color-bg-secondary-pressed)',
139
- borderColor: 'var(--ids-comp-avatar-color-border-secondary-pressed)',
179
+ '.ids-avatar.ids-avatar-surface': {
180
+ color: 'var(--ids-comp-avatar-color-fg-surface-default)',
181
+ borderColor: 'var(--ids-comp-avatar-color-border-surface-default)',
182
+ background: 'var(--ids-comp-avatar-color-bg-surface-default)',
140
183
  },
141
- '.ids-avatar.ids-avatar-secondary .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-secondary-default)' },
142
184
  '.ids-avatar.ids-avatar-light': {
143
185
  color: 'var(--ids-comp-avatar-color-fg-light-default)',
144
- background: 'var(--ids-comp-avatar-color-bg-light-default)',
145
186
  borderColor: 'var(--ids-comp-avatar-color-border-light-default)',
187
+ background: 'var(--ids-comp-avatar-color-bg-light-default)',
146
188
  },
147
- '.ids-avatar.ids-avatar-light:hover': {
148
- background: 'var(--ids-comp-avatar-color-bg-light-hovered)',
149
- borderColor: 'var(--ids-comp-avatar-color-border-light-hovered)',
150
- },
151
- '.ids-avatar.ids-avatar-light:focus': {
152
- background: 'var(--ids-comp-avatar-color-bg-light-focused)',
153
- borderColor: 'var(--ids-comp-avatar-color-border-light-focused)',
154
- },
155
- '.ids-avatar.ids-avatar-light:active': {
156
- background: 'var(--ids-comp-avatar-color-bg-light-pressed)',
157
- borderColor: 'var(--ids-comp-avatar-color-border-light-pressed)',
158
- },
159
- '.ids-avatar.ids-avatar-light .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-light-default)' },
160
189
  '.ids-avatar.ids-avatar-dark': {
161
190
  color: 'var(--ids-comp-avatar-color-fg-dark-default)',
162
- background: 'var(--ids-comp-avatar-color-bg-dark-default)',
163
191
  borderColor: 'var(--ids-comp-avatar-color-border-dark-default)',
192
+ background: 'var(--ids-comp-avatar-color-bg-dark-default)',
164
193
  },
165
- '.ids-avatar.ids-avatar-dark:hover': {
166
- background: 'var(--ids-comp-avatar-color-bg-dark-hovered)',
167
- borderColor: 'var(--ids-comp-avatar-color-border-dark-hovered)',
168
- },
169
- '.ids-avatar.ids-avatar-dark:focus': {
170
- background: 'var(--ids-comp-avatar-color-bg-dark-focused)',
171
- borderColor: 'var(--ids-comp-avatar-color-border-dark-focused)',
172
- },
173
- '.ids-avatar.ids-avatar-dark:active': {
174
- background: 'var(--ids-comp-avatar-color-bg-dark-pressed)',
175
- borderColor: 'var(--ids-comp-avatar-color-border-dark-pressed)',
176
- },
177
- '.ids-avatar.ids-avatar-dark .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-dark-default)' },
178
- '.ids-avatar.ids-avatar-surface': {
179
- color: 'var(--ids-comp-avatar-color-fg-surface-default)',
180
- background: 'var(--ids-comp-avatar-color-bg-surface-default)',
181
- borderColor: 'var(--ids-comp-avatar-color-border-surface-default)',
182
- },
183
- '.ids-avatar.ids-avatar-surface:hover': {
184
- background: 'var(--ids-comp-avatar-color-bg-surface-hovered)',
185
- borderColor: 'var(--ids-comp-avatar-color-border-surface-hovered)',
186
- },
187
- '.ids-avatar.ids-avatar-surface:focus': {
188
- background: 'var(--ids-comp-avatar-color-bg-surface-focused)',
189
- borderColor: 'var(--ids-comp-avatar-color-border-surface-focused)',
190
- },
191
- '.ids-avatar.ids-avatar-surface:active': {
192
- background: 'var(--ids-comp-avatar-color-bg-surface-pressed)',
193
- borderColor: 'var(--ids-comp-avatar-color-border-surface-pressed)',
194
- },
195
- '.ids-avatar.ids-avatar-surface .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-surface-default)' },
196
194
  };
197
195
 
198
196
  addComponents(cssObj);