@instructure/ui-avatar 10.16.4 → 10.16.5-snapshot-1

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 (18) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/es/Avatar/props.js +1 -1
  3. package/es/Avatar/styles.js +101 -29
  4. package/es/Avatar/theme.js +5 -2
  5. package/lib/Avatar/props.js +1 -1
  6. package/lib/Avatar/styles.js +101 -29
  7. package/lib/Avatar/theme.js +5 -2
  8. package/package.json +13 -13
  9. package/src/Avatar/README.md +72 -52
  10. package/src/Avatar/props.ts +3 -1
  11. package/src/Avatar/styles.ts +108 -33
  12. package/src/Avatar/theme.ts +5 -1
  13. package/tsconfig.build.tsbuildinfo +1 -1
  14. package/types/Avatar/index.d.ts +3 -3
  15. package/types/Avatar/props.d.ts +1 -1
  16. package/types/Avatar/props.d.ts.map +1 -1
  17. package/types/Avatar/styles.d.ts.map +1 -1
  18. package/types/Avatar/theme.d.ts.map +1 -1
package/src/Avatar/README.md CHANGED
@@ -14,15 +14,35 @@ type: example
14
14
  readonly: true
15
15
  ---
16
16
  <div>
17
- <Avatar name="Sarah Robinson" src={avatarSquare} margin="0 small 0 0" />
18
- <Avatar name="Sarah Robinson" margin="0 small 0 0" />
19
- <Avatar name="Sarah Robinson" renderIcon={<IconGroupLine />} margin="0 small 0 0" />
20
- <Avatar name="Kyle Montgomery" src={avatarSquare} shape="rectangle" margin="0 small 0 0" />
21
- <Avatar name="Kyle Montgomery" shape="rectangle" margin="0 small 0 0" />
17
+ <Avatar name="Sarah Robinson" src={avatarSquare} margin="0 space8 0 0" />
18
+ <Avatar name="Sarah Robinson" margin="0 space8 0 0" />
19
+ <Avatar name="Sarah Robinson" renderIcon={<IconGroupLine />} margin="0 space8 0 0" />
20
+ <Avatar name="Kyle Montgomery" src={avatarSquare} shape="rectangle" margin="0 space8 0 0" />
21
+ <Avatar name="Kyle Montgomery" shape="rectangle" margin="0 space8 0 0" />
22
22
  <Avatar name="Kyle Montgomery" renderIcon={<IconGroupLine />} shape="rectangle" />
23
23
  </div>
24
24
  ```
25
25
 
26
+ ### AI Avatar
27
+
28
+ There is a need for special, `ai avatars`. These have a specific look. You can achieve it the following way
29
+
30
+ ```js
31
+ ---
32
+ type: example
33
+ readonly: true
34
+ ---
35
+ <View display="block" padding="small medium" background="primary">
36
+ <Avatar size="xx-small" color="ai" renderIcon={IconAiSolid} margin="0 space8 0 0"/>
37
+ <Avatar size="x-small" color="ai" renderIcon={IconAiSolid} margin="0 space8 0 0"/>
38
+ <Avatar size="small" color="ai" renderIcon={IconAiSolid} margin="0 space8 0 0"/>
39
+ <Avatar size="medium" color="ai" renderIcon={IconAiSolid} margin="0 space8 0 0"/>
40
+ <Avatar size="large" color="ai" renderIcon={IconAiSolid} margin="0 space8 0 0"/>
41
+ <Avatar size="x-large" color="ai" renderIcon={IconAiSolid} margin="0 space8 0 0"/>
42
+ <Avatar size="xx-large" color="ai" renderIcon={IconAiSolid} />
43
+ </View>
44
+ ```
45
+
26
46
  ### Size
27
47
 
28
48
  The `size` prop allows you to select from `xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, and `xx-large`. If the `auto` prop is set, the avatar size will adjust according to the font-size
@@ -34,30 +54,30 @@ type: example
34
54
  ---
35
55
  <div>
36
56
  <View display="block" padding="small medium">
37
- <Avatar name="Arthur C. Clarke" size="xx-small" margin="0 small 0 0" />
38
- <Avatar name="James Arias" size="x-small" margin="0 small 0 0" />
39
- <Avatar name="Charles Kimball" size="small" margin="0 small 0 0" />
40
- <Avatar name="Melissa Reed" size="medium" margin="0 small 0 0" />
41
- <Avatar name="Heather Wheeler" size="large" margin="0 small 0 0" />
42
- <Avatar name="David Herbert" size="x-large" margin="0 small 0 0" />
57
+ <Avatar name="Arthur C. Clarke" size="xx-small" margin="0 space8 0 0" />
58
+ <Avatar name="James Arias" size="x-small" margin="0 space8 0 0" />
59
+ <Avatar name="Charles Kimball" size="small" margin="0 space8 0 0" />
60
+ <Avatar name="Melissa Reed" size="medium" margin="0 space8 0 0" />
61
+ <Avatar name="Heather Wheeler" size="large" margin="0 space8 0 0" />
62
+ <Avatar name="David Herbert" size="x-large" margin="0 space8 0 0" />
43
63
  <Avatar name="Isaac Asimov" size="xx-large" />
44
64
  </View>
45
65
  <View display="block" padding="small medium" background="primary">
46
- <Avatar name="Arthur C. Clarke" size="xx-small" margin="0 small 0 0" src={avatarSquare} />
47
- <Avatar name="James Arias" size="x-small" margin="0 small 0 0" src={avatarSquare} />
48
- <Avatar name="Charles Kimball" size="small" margin="0 small 0 0" src={avatarSquare} />
49
- <Avatar name="Melissa Reed" size="medium" margin="0 small 0 0" src={avatarSquare} />
50
- <Avatar name="Heather Wheeler" size="large" margin="0 small 0 0" src={avatarSquare} />
51
- <Avatar name="David Herbert" size="x-large" margin="0 small 0 0" src={avatarSquare} />
66
+ <Avatar name="Arthur C. Clarke" size="xx-small" margin="0 space8 0 0" src={avatarSquare} />
67
+ <Avatar name="James Arias" size="x-small" margin="0 space8 0 0" src={avatarSquare} />
68
+ <Avatar name="Charles Kimball" size="small" margin="0 space8 0 0" src={avatarSquare} />
69
+ <Avatar name="Melissa Reed" size="medium" margin="0 space8 0 0" src={avatarSquare} />
70
+ <Avatar name="Heather Wheeler" size="large" margin="0 space8 0 0" src={avatarSquare} />
71
+ <Avatar name="David Herbert" size="x-large" margin="0 space8 0 0" src={avatarSquare} />
52
72
  <Avatar name="Isaac Asimov" size="xx-large" src={avatarSquare} />
53
73
  </View>
54
74
  <View display="block" padding="small medium">
55
- <Avatar name="Arthur C. Clarke" renderIcon={<IconGroupLine />} size="xx-small" margin="0 small 0 0" />
56
- <Avatar name="James Arias" renderIcon={<IconGroupLine />} size="x-small" margin="0 small 0 0" />
57
- <Avatar name="Charles Kimball" renderIcon={<IconGroupLine />} size="small" margin="0 small 0 0" />
58
- <Avatar name="Melissa Reed" renderIcon={<IconGroupLine />} size="medium" margin="0 small 0 0" />
59
- <Avatar name="Heather Wheeler" renderIcon={<IconGroupLine />} size="large" margin="0 small 0 0" />
60
- <Avatar name="David Herbert" renderIcon={<IconGroupLine />} size="x-large" margin="0 small 0 0" />
75
+ <Avatar name="Arthur C. Clarke" renderIcon={<IconGroupLine />} size="xx-small" margin="0 space8 0 0" />
76
+ <Avatar name="James Arias" renderIcon={<IconGroupLine />} size="x-small" margin="0 space8 0 0" />
77
+ <Avatar name="Charles Kimball" renderIcon={<IconGroupLine />} size="small" margin="0 space8 0 0" />
78
+ <Avatar name="Melissa Reed" renderIcon={<IconGroupLine />} size="medium" margin="0 space8 0 0" />
79
+ <Avatar name="Heather Wheeler" renderIcon={<IconGroupLine />} size="large" margin="0 space8 0 0" />
80
+ <Avatar name="David Herbert" renderIcon={<IconGroupLine />} size="x-large" margin="0 space8 0 0" />
61
81
  <Avatar name="Isaac Asimov" renderIcon={<IconGroupLine />} size="xx-large" />
62
82
  </View>
63
83
  </div>
@@ -73,21 +93,21 @@ type: example
73
93
  ---
74
94
  <div>
75
95
  <View display="block" padding="small medium">
76
- <Avatar name="Arthur C. Clarke" margin="0 small 0 0" />
77
- <Avatar name="James Arias" color="shamrock" margin="0 small 0 0" />
78
- <Avatar name="Charles Kimball" color="barney" margin="0 small 0 0" />
79
- <Avatar name="Melissa Reed" color="crimson" margin="0 small 0 0" />
80
- <Avatar name="Heather Wheeler" color="fire" margin="0 small 0 0" />
81
- <Avatar name="David Herbert" color="licorice" margin="0 small 0 0" />
96
+ <Avatar name="Arthur C. Clarke" margin="0 space8 0 0" />
97
+ <Avatar name="James Arias" color="shamrock" margin="0 space8 0 0" />
98
+ <Avatar name="Charles Kimball" color="barney" margin="0 space8 0 0" />
99
+ <Avatar name="Melissa Reed" color="crimson" margin="0 space8 0 0" />
100
+ <Avatar name="Heather Wheeler" color="fire" margin="0 space8 0 0" />
101
+ <Avatar name="David Herbert" color="licorice" margin="0 space8 0 0" />
82
102
  <Avatar name="Isaac Asimov" color="ash" />
83
103
  </View>
84
104
  <View display="block" padding="small medium">
85
- <Avatar renderIcon={<IconGroupLine />} name="Arthur C. Clarke" margin="0 small 0 0" />
86
- <Avatar renderIcon={<IconGroupLine />} name="James Arias" color="shamrock" margin="0 small 0 0" />
87
- <Avatar renderIcon={<IconGroupLine />} name="Charles Kimball" color="barney" margin="0 small 0 0" />
88
- <Avatar renderIcon={<IconGroupLine />} name="Melissa Reed" color="crimson" margin="0 small 0 0" />
89
- <Avatar renderIcon={<IconGroupLine />} name="Heather Wheeler" color="fire" margin="0 small 0 0" />
90
- <Avatar renderIcon={<IconGroupLine />} name="David Herbert" color="licorice" margin="0 small 0 0" />
105
+ <Avatar renderIcon={<IconGroupLine />} name="Arthur C. Clarke" margin="0 space8 0 0" />
106
+ <Avatar renderIcon={<IconGroupLine />} name="James Arias" color="shamrock" margin="0 space8 0 0" />
107
+ <Avatar renderIcon={<IconGroupLine />} name="Charles Kimball" color="barney" margin="0 space8 0 0" />
108
+ <Avatar renderIcon={<IconGroupLine />} name="Melissa Reed" color="crimson" margin="0 space8 0 0" />
109
+ <Avatar renderIcon={<IconGroupLine />} name="Heather Wheeler" color="fire" margin="0 space8 0 0" />
110
+ <Avatar renderIcon={<IconGroupLine />} name="David Herbert" color="licorice" margin="0 space8 0 0" />
91
111
  <Avatar renderIcon={<IconGroupLine />} name="Isaac Asimov" color="ash" />
92
112
  </View>
93
113
  </div>
@@ -103,21 +123,21 @@ type: example
103
123
  ---
104
124
  <div>
105
125
  <View display="block" padding="small medium" background="primary">
106
- <Avatar name="Arthur C. Clarke" hasInverseColor margin="0 small 0 0" />
107
- <Avatar name="James Arias" color="shamrock" hasInverseColor margin="0 small 0 0" />
108
- <Avatar name="Charles Kimball" color="barney" hasInverseColor margin="0 small 0 0" />
109
- <Avatar name="Melissa Reed" color="crimson" hasInverseColor margin="0 small 0 0" />
110
- <Avatar name="Heather Wheeler" color="fire" hasInverseColor margin="0 small 0 0" />
111
- <Avatar name="David Herbert" color="licorice" hasInverseColor margin="0 small 0 0" />
126
+ <Avatar name="Arthur C. Clarke" hasInverseColor margin="0 space8 0 0" />
127
+ <Avatar name="James Arias" color="shamrock" hasInverseColor margin="0 space8 0 0" />
128
+ <Avatar name="Charles Kimball" color="barney" hasInverseColor margin="0 space8 0 0" />
129
+ <Avatar name="Melissa Reed" color="crimson" hasInverseColor margin="0 space8 0 0" />
130
+ <Avatar name="Heather Wheeler" color="fire" hasInverseColor margin="0 space8 0 0" />
131
+ <Avatar name="David Herbert" color="licorice" hasInverseColor margin="0 space8 0 0" />
112
132
  <Avatar name="Isaac Asimov" color="ash" hasInverseColor />
113
133
  </View>
114
134
  <View display="block" padding="small medium" background="primary">
115
- <Avatar renderIcon={<IconGroupLine />} name="Arthur C. Clarke" hasInverseColor margin="0 small 0 0" />
116
- <Avatar renderIcon={<IconGroupLine />} name="James Arias" color="shamrock" hasInverseColor margin="0 small 0 0" />
117
- <Avatar renderIcon={<IconGroupLine />} name="Charles Kimball" color="barney" hasInverseColor margin="0 small 0 0" />
118
- <Avatar renderIcon={<IconGroupLine />} name="Melissa Reed" color="crimson" hasInverseColor margin="0 small 0 0" />
119
- <Avatar renderIcon={<IconGroupLine />} name="Heather Wheeler" color="fire" hasInverseColor margin="0 small 0 0" />
120
- <Avatar renderIcon={<IconGroupLine />} name="David Herbert" color="licorice" hasInverseColor margin="0 small 0 0" />
135
+ <Avatar renderIcon={<IconGroupLine />} name="Arthur C. Clarke" hasInverseColor margin="0 space8 0 0" />
136
+ <Avatar renderIcon={<IconGroupLine />} name="James Arias" color="shamrock" hasInverseColor margin="0 space8 0 0" />
137
+ <Avatar renderIcon={<IconGroupLine />} name="Charles Kimball" color="barney" hasInverseColor margin="0 space8 0 0" />
138
+ <Avatar renderIcon={<IconGroupLine />} name="Melissa Reed" color="crimson" hasInverseColor margin="0 space8 0 0" />
139
+ <Avatar renderIcon={<IconGroupLine />} name="Heather Wheeler" color="fire" hasInverseColor margin="0 space8 0 0" />
140
+ <Avatar renderIcon={<IconGroupLine />} name="David Herbert" color="licorice" hasInverseColor margin="0 space8 0 0" />
121
141
  <Avatar renderIcon={<IconGroupLine />} name="Isaac Asimov" color="ash" hasInverseColor />
122
142
  </View>
123
143
  </div>
@@ -130,9 +150,9 @@ In case you need more control over the color, feel free to use the `themeOverrid
130
150
  type: example
131
151
  ---
132
152
  <div>
133
- <Avatar name="Isaac Asimov" renderIcon={<IconGroupLine />} themeOverride={{ color: '#efb410' }} margin="0 small 0 0" />
134
- <Avatar name="Heather Wheeler" color="fire" themeOverride={{ colorFire: 'magenta' }} margin="0 small 0 0" />
135
- <Avatar name="Charles Kimball" renderIcon={<IconGroupLine />} hasInverseColor themeOverride={{ color: 'lightblue', background: 'black' }} margin="0 small 0 0" />
153
+ <Avatar name="Isaac Asimov" renderIcon={<IconGroupLine />} themeOverride={{ color: '#efb410' }} margin="0 space8 0 0" />
154
+ <Avatar name="Heather Wheeler" color="fire" themeOverride={{ colorFire: 'magenta' }} margin="0 space8 0 0" />
155
+ <Avatar name="Charles Kimball" renderIcon={<IconGroupLine />} hasInverseColor themeOverride={{ color: 'lightblue', background: 'black' }} margin="0 space8 0 0" />
136
156
  <Avatar name="David Herbert" hasInverseColor color="fire" themeOverride={{ colorFire: '#efb410' }} />
137
157
  </div>
138
158
  ```
@@ -146,8 +166,8 @@ By default only avatars without an image have borders but you can force it to `a
146
166
  type: example
147
167
  ---
148
168
  <div>
149
- <Avatar name="Sarah Robinson" src={avatarSquare} margin="0 small 0 0" showBorder="always"/>
150
- <Avatar name="Sarah Robinson" renderIcon={<IconGroupLine />} margin="0 small 0 0" showBorder="never"/>
169
+ <Avatar name="Sarah Robinson" src={avatarSquare} margin="0 space8 0 0" showBorder="always"/>
170
+ <Avatar name="Sarah Robinson" renderIcon={<IconGroupLine />} margin="0 space8 0 0" showBorder="never"/>
151
171
  </div>
152
172
  ```
153
173
 
package/src/Avatar/props.ts CHANGED
@@ -68,6 +68,7 @@ type AvatarOwnProps = {
68
68
  | 'fire'
69
69
  | 'licorice'
70
70
  | 'ash'
71
+ | 'ai'
71
72
  /**
72
73
  * In inverse color mode the background and text/icon colors are inverted
73
74
  */
@@ -139,7 +140,8 @@ const propTypes: PropValidators<PropKeys> = {
139
140
  'crimson',
140
141
  'fire',
141
142
  'licorice',
142
- 'ash'
143
+ 'ash',
144
+ 'ai'
143
145
  ]),
144
146
  hasInverseColor: PropTypes.bool,
145
147
  showBorder: PropTypes.oneOf(['auto', 'always', 'never']),
package/src/Avatar/styles.ts CHANGED
@@ -51,44 +51,98 @@ const generateStyle = (
51
51
  const { loaded, size, color, hasInverseColor, shape, src, showBorder } =
52
52
  params
53
53
 
54
+ // TODO: this is a temporary solution and should be revised on component update
55
+ // NOTE: this is needed due to design changes. The size of the component is calculated from "em" which means it is
56
+ // tied to the fontSize. The font sizes changed for the icons, which meant that the container (component) size would've
57
+ // changed too without additional calculations
58
+ const calcNewScaler = (
59
+ originalFontSize: number,
60
+ newFontSize: number,
61
+ originalScaler: number
62
+ ) => {
63
+ return `${(originalFontSize * originalScaler) / newFontSize}em`
64
+ }
65
+
54
66
  const sizeStyles = {
55
67
  auto: {
56
68
  fontSize: 'inherit',
57
- borderWidth: componentTheme.borderWidthSmall
69
+ borderWidth: componentTheme.borderWidthSmall,
70
+ width: '2.5em',
71
+ height: '2.5em'
58
72
  },
59
73
  'xx-small': {
60
- fontSize: '0.5rem',
61
- borderWidth: componentTheme.borderWidthSmall
74
+ fontSize: '0.625rem',
75
+ borderWidth: componentTheme.borderWidthSmall,
76
+ width: calcNewScaler(0.5, 0.625, shape === 'circle' ? 2.5 : 3),
77
+ height: calcNewScaler(0.5, 0.625, 2.5)
62
78
  },
63
79
  'x-small': {
64
- fontSize: '0.75rem',
65
- borderWidth: componentTheme.borderWidthSmall
80
+ fontSize: '0.875rem',
81
+ borderWidth: componentTheme.borderWidthSmall,
82
+ width: calcNewScaler(0.75, 0.875, shape === 'circle' ? 2.5 : 3),
83
+ height: calcNewScaler(0.75, 0.875, 2.5)
66
84
  },
67
85
  small: {
68
- fontSize: '1rem',
69
- borderWidth: componentTheme.borderWidthSmall
86
+ fontSize: '1.25rem',
87
+ borderWidth: componentTheme.borderWidthSmall,
88
+ width: calcNewScaler(1, 1.25, shape === 'circle' ? 2.5 : 3),
89
+ height: calcNewScaler(1, 1.25, 2.5)
70
90
  },
71
91
  medium: {
72
- fontSize: '1.25rem',
73
- borderWidth: componentTheme.borderWidthMedium
92
+ fontSize: '1.5rem',
93
+ borderWidth: componentTheme.borderWidthMedium,
94
+ width: calcNewScaler(1.25, 1.5, shape === 'circle' ? 2.5 : 3),
95
+ height: calcNewScaler(1.25, 1.5, 2.5)
74
96
  },
75
97
  large: {
76
- fontSize: '1.5rem',
77
- borderWidth: componentTheme.borderWidthMedium
98
+ fontSize: '1.75rem',
99
+ borderWidth: componentTheme.borderWidthMedium,
100
+ width: calcNewScaler(1.5, 1.75, shape === 'circle' ? 2.5 : 3),
101
+ height: calcNewScaler(1.5, 1.75, 2.5)
78
102
  },
79
103
  'x-large': {
80
- fontSize: '1.75rem',
81
- borderWidth: componentTheme.borderWidthMedium
104
+ fontSize: '2rem',
105
+ borderWidth: componentTheme.borderWidthMedium,
106
+ width: calcNewScaler(1.75, 2, shape === 'circle' ? 2.5 : 3),
107
+ height: calcNewScaler(1.75, 2, 2.5)
82
108
  },
83
109
  'xx-large': {
84
- fontSize: '2rem',
85
- borderWidth: componentTheme.borderWidthMedium
110
+ fontSize: '2.25rem',
111
+ borderWidth: componentTheme.borderWidthMedium,
112
+ width: calcNewScaler(2, 2.25, shape === 'circle' ? 2.5 : 3),
113
+ height: calcNewScaler(2, 2.25, 2.5)
86
114
  }
87
115
  }
88
116
 
89
- const variantStyles = {
117
+ const initialSizeStyles = {
118
+ auto: {
119
+ fontSize: 'inherit'
120
+ },
121
+ 'xx-small': {
122
+ fontSize: '0.5rem'
123
+ },
124
+ 'x-small': {
125
+ fontSize: '0.75rem'
126
+ },
127
+ small: {
128
+ fontSize: '1rem'
129
+ },
130
+ medium: {
131
+ fontSize: '1.25rem'
132
+ },
133
+ large: {
134
+ fontSize: '1.5rem'
135
+ },
136
+ 'x-large': {
137
+ fontSize: '1.75rem'
138
+ },
139
+ 'xx-large': {
140
+ fontSize: '2rem'
141
+ }
142
+ }
143
+
144
+ const shapeStyles = {
90
145
  circle: {
91
- width: '2.5em',
92
146
  position: 'relative',
93
147
  borderRadius: '100%',
94
148
  overflow: 'hidden'
@@ -105,34 +159,54 @@ const generateStyle = (
105
159
  crimson: componentTheme.colorCrimson,
106
160
  fire: componentTheme.colorFire,
107
161
  licorice: componentTheme.colorLicorice,
108
- ash: componentTheme.colorAsh
162
+ ash: componentTheme.colorAsh,
163
+ ai: `
164
+ linear-gradient(to bottom, ${componentTheme.aiTopGradientColor} 0%, ${componentTheme.aiBottomGradientColor} 100%) padding-box,
165
+ linear-gradient(to bottom right, ${componentTheme.aiTopGradientColor} 0%, ${componentTheme.aiBottomGradientColor} 100%) border-box`
109
166
  }
110
167
 
111
- const backgroundColor = hasInverseColor
112
- ? colorVariants[color!]
113
- : componentTheme.background
168
+ const background = () => {
169
+ if (color === 'ai') {
170
+ return {
171
+ background: `
172
+ linear-gradient(to bottom, ${componentTheme.aiTopGradientColor} 0%, ${componentTheme.aiBottomGradientColor} 100%) padding-box,
173
+ linear-gradient(to bottom right, ${componentTheme.aiTopGradientColor} 0%, ${componentTheme.aiBottomGradientColor} 100%) border-box`,
174
+ border: 'solid transparent'
175
+ }
176
+ }
177
+ return hasInverseColor
178
+ ? {
179
+ backgroundColor: colorVariants[color!],
180
+ backgroundClip: 'content-box'
181
+ }
182
+ : {
183
+ backgroundColor: componentTheme.background,
184
+ backgroundClip: 'content-box'
185
+ }
186
+ }
114
187
 
115
- const contentColor = hasInverseColor
116
- ? componentTheme.background
117
- : colorVariants[color!]
188
+ const contentColor = () => {
189
+ if (color === 'ai') {
190
+ return componentTheme.aiFontColor
191
+ }
192
+ return hasInverseColor ? componentTheme.background : colorVariants[color!]
193
+ }
118
194
 
119
195
  return {
120
196
  avatar: {
121
197
  label: 'avatar',
122
- height: '2.5em',
123
198
  boxSizing: 'border-box',
124
- backgroundColor: backgroundColor,
199
+ borderStyle: 'solid',
200
+ borderColor: componentTheme.borderColor,
201
+ ...background(),
125
202
  backgroundPosition: 'center',
126
203
  backgroundSize: 'cover',
127
- backgroundClip: 'content-box',
128
204
  backgroundRepeat: 'no-repeat',
129
205
  overflow: 'hidden',
130
206
  lineHeight: 0,
131
207
  textAlign: 'center',
132
- borderStyle: 'solid',
133
- borderColor: componentTheme.borderColor,
134
208
  ...sizeStyles[size!],
135
- ...variantStyles[shape!],
209
+ ...shapeStyles[shape!],
136
210
  ...(loaded
137
211
  ? {
138
212
  backgroundImage: `url('${src}')`,
@@ -155,11 +229,12 @@ const generateStyle = (
155
229
  },
156
230
  initials: {
157
231
  label: 'avatar__initials',
158
- color: contentColor,
232
+ color: contentColor(),
159
233
  lineHeight: '2.375em',
160
234
  fontFamily: componentTheme.fontFamily,
161
235
  fontWeight: componentTheme.fontWeight,
162
- letterSpacing: '0.0313em'
236
+ letterSpacing: '0.0313em',
237
+ ...initialSizeStyles[size!]
163
238
  },
164
239
  loadImage: {
165
240
  label: 'avatar__loadImage',
@@ -174,7 +249,7 @@ const generateStyle = (
174
249
  width: '100%',
175
250
 
176
251
  svg: {
177
- fill: contentColor,
252
+ fill: contentColor(),
178
253
  height: '1em',
179
254
  width: '1em'
180
255
  }
package/src/Avatar/theme.ts CHANGED
@@ -52,7 +52,11 @@ const generateComponentTheme = (theme: Theme): AvatarTheme => {
52
52
  colorCrimson: colors?.contrasts?.red4570,
53
53
  colorFire: colors?.contrasts?.orange4570,
54
54
  colorLicorice: colors?.contrasts?.grey125125,
55
- colorAsh: colors?.contrasts?.grey4570
55
+ colorAsh: colors?.contrasts?.grey4570,
56
+
57
+ aiTopGradientColor: colors?.contrasts?.violet4570,
58
+ aiBottomGradientColor: colors?.contrasts?.sea4570,
59
+ aiFontColor: colors?.contrasts?.white1010
56
60
  }
57
61
 
58
62
  return {