@instructure/ui-avatar 10.16.4 → 10.16.5-snapshot-2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/es/Avatar/props.js +1 -1
- package/es/Avatar/styles.js +101 -29
- package/es/Avatar/theme.js +5 -2
- package/lib/Avatar/props.js +1 -1
- package/lib/Avatar/styles.js +101 -29
- package/lib/Avatar/theme.js +5 -2
- package/package.json +13 -13
- package/src/Avatar/README.md +72 -52
- package/src/Avatar/props.ts +3 -1
- package/src/Avatar/styles.ts +108 -33
- package/src/Avatar/theme.ts +5 -1
- package/tsconfig.build.tsbuildinfo +1 -1
- package/types/Avatar/index.d.ts +3 -3
- package/types/Avatar/props.d.ts +1 -1
- package/types/Avatar/props.d.ts.map +1 -1
- package/types/Avatar/styles.d.ts.map +1 -1
- package/types/Avatar/theme.d.ts.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [10.16.5-snapshot-2](https://github.com/instructure/instructure-ui/compare/v10.16.4...v10.16.5-snapshot-2) (2025-05-15)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **ui-avatar,shared-types:** add new ai color variant ([52545d1](https://github.com/instructure/instructure-ui/commit/52545d10d670722dd0126f99e97cb4e13a4ea814))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [10.16.4](https://github.com/instructure/instructure-ui/compare/v10.16.3...v10.16.4) (2025-05-09)
|
|
7
18
|
|
|
8
19
|
**Note:** Version bump only for package @instructure/ui-avatar
|
package/es/Avatar/props.js
CHANGED
|
@@ -28,7 +28,7 @@ const propTypes = {
|
|
|
28
28
|
src: PropTypes.string,
|
|
29
29
|
alt: PropTypes.string,
|
|
30
30
|
size: PropTypes.oneOf(['auto', 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large']),
|
|
31
|
-
color: PropTypes.oneOf(['default', 'shamrock', 'barney', 'crimson', 'fire', 'licorice', 'ash']),
|
|
31
|
+
color: PropTypes.oneOf(['default', 'shamrock', 'barney', 'crimson', 'fire', 'licorice', 'ash', 'ai']),
|
|
32
32
|
hasInverseColor: PropTypes.bool,
|
|
33
33
|
showBorder: PropTypes.oneOf(['auto', 'always', 'never']),
|
|
34
34
|
shape: PropTypes.oneOf(['circle', 'rectangle']),
|
package/es/Avatar/styles.js
CHANGED
|
@@ -39,43 +39,92 @@ const generateStyle = (componentTheme, params) => {
|
|
|
39
39
|
shape = params.shape,
|
|
40
40
|
src = params.src,
|
|
41
41
|
showBorder = params.showBorder;
|
|
42
|
+
|
|
43
|
+
// TODO: this is a temporary solution and should be revised on component update
|
|
44
|
+
// NOTE: this is needed due to design changes. The size of the component is calculated from "em" which means it is
|
|
45
|
+
// tied to the fontSize. The font sizes changed for the icons, which meant that the container (component) size would've
|
|
46
|
+
// changed too without additional calculations
|
|
47
|
+
const calcNewScaler = (originalFontSize, newFontSize, originalScaler) => {
|
|
48
|
+
return `${originalFontSize * originalScaler / newFontSize}em`;
|
|
49
|
+
};
|
|
42
50
|
const sizeStyles = {
|
|
43
51
|
auto: {
|
|
44
52
|
fontSize: 'inherit',
|
|
45
|
-
borderWidth: componentTheme.borderWidthSmall
|
|
53
|
+
borderWidth: componentTheme.borderWidthSmall,
|
|
54
|
+
width: '2.5em',
|
|
55
|
+
height: '2.5em'
|
|
46
56
|
},
|
|
47
57
|
'xx-small': {
|
|
48
|
-
fontSize: '0.
|
|
49
|
-
borderWidth: componentTheme.borderWidthSmall
|
|
58
|
+
fontSize: '0.625rem',
|
|
59
|
+
borderWidth: componentTheme.borderWidthSmall,
|
|
60
|
+
width: calcNewScaler(0.5, 0.625, shape === 'circle' ? 2.5 : 3),
|
|
61
|
+
height: calcNewScaler(0.5, 0.625, 2.5)
|
|
50
62
|
},
|
|
51
63
|
'x-small': {
|
|
52
|
-
fontSize: '0.
|
|
53
|
-
borderWidth: componentTheme.borderWidthSmall
|
|
64
|
+
fontSize: '0.875rem',
|
|
65
|
+
borderWidth: componentTheme.borderWidthSmall,
|
|
66
|
+
width: calcNewScaler(0.75, 0.875, shape === 'circle' ? 2.5 : 3),
|
|
67
|
+
height: calcNewScaler(0.75, 0.875, 2.5)
|
|
54
68
|
},
|
|
55
69
|
small: {
|
|
56
|
-
fontSize: '
|
|
57
|
-
borderWidth: componentTheme.borderWidthSmall
|
|
70
|
+
fontSize: '1.25rem',
|
|
71
|
+
borderWidth: componentTheme.borderWidthSmall,
|
|
72
|
+
width: calcNewScaler(1, 1.25, shape === 'circle' ? 2.5 : 3),
|
|
73
|
+
height: calcNewScaler(1, 1.25, 2.5)
|
|
58
74
|
},
|
|
59
75
|
medium: {
|
|
60
|
-
fontSize: '1.
|
|
61
|
-
borderWidth: componentTheme.borderWidthMedium
|
|
76
|
+
fontSize: '1.5rem',
|
|
77
|
+
borderWidth: componentTheme.borderWidthMedium,
|
|
78
|
+
width: calcNewScaler(1.25, 1.5, shape === 'circle' ? 2.5 : 3),
|
|
79
|
+
height: calcNewScaler(1.25, 1.5, 2.5)
|
|
62
80
|
},
|
|
63
81
|
large: {
|
|
64
|
-
fontSize: '1.
|
|
65
|
-
borderWidth: componentTheme.borderWidthMedium
|
|
82
|
+
fontSize: '1.75rem',
|
|
83
|
+
borderWidth: componentTheme.borderWidthMedium,
|
|
84
|
+
width: calcNewScaler(1.5, 1.75, shape === 'circle' ? 2.5 : 3),
|
|
85
|
+
height: calcNewScaler(1.5, 1.75, 2.5)
|
|
66
86
|
},
|
|
67
87
|
'x-large': {
|
|
68
|
-
fontSize: '
|
|
69
|
-
borderWidth: componentTheme.borderWidthMedium
|
|
88
|
+
fontSize: '2rem',
|
|
89
|
+
borderWidth: componentTheme.borderWidthMedium,
|
|
90
|
+
width: calcNewScaler(1.75, 2, shape === 'circle' ? 2.5 : 3),
|
|
91
|
+
height: calcNewScaler(1.75, 2, 2.5)
|
|
70
92
|
},
|
|
71
93
|
'xx-large': {
|
|
72
|
-
fontSize: '
|
|
73
|
-
borderWidth: componentTheme.borderWidthMedium
|
|
94
|
+
fontSize: '2.25rem',
|
|
95
|
+
borderWidth: componentTheme.borderWidthMedium,
|
|
96
|
+
width: calcNewScaler(2, 2.25, shape === 'circle' ? 2.5 : 3),
|
|
97
|
+
height: calcNewScaler(2, 2.25, 2.5)
|
|
74
98
|
}
|
|
75
99
|
};
|
|
76
|
-
const
|
|
100
|
+
const initialSizeStyles = {
|
|
101
|
+
auto: {
|
|
102
|
+
fontSize: 'inherit'
|
|
103
|
+
},
|
|
104
|
+
'xx-small': {
|
|
105
|
+
fontSize: '0.5rem'
|
|
106
|
+
},
|
|
107
|
+
'x-small': {
|
|
108
|
+
fontSize: '0.75rem'
|
|
109
|
+
},
|
|
110
|
+
small: {
|
|
111
|
+
fontSize: '1rem'
|
|
112
|
+
},
|
|
113
|
+
medium: {
|
|
114
|
+
fontSize: '1.25rem'
|
|
115
|
+
},
|
|
116
|
+
large: {
|
|
117
|
+
fontSize: '1.5rem'
|
|
118
|
+
},
|
|
119
|
+
'x-large': {
|
|
120
|
+
fontSize: '1.75rem'
|
|
121
|
+
},
|
|
122
|
+
'xx-large': {
|
|
123
|
+
fontSize: '2rem'
|
|
124
|
+
}
|
|
125
|
+
};
|
|
126
|
+
const shapeStyles = {
|
|
77
127
|
circle: {
|
|
78
|
-
width: '2.5em',
|
|
79
128
|
position: 'relative',
|
|
80
129
|
borderRadius: '100%',
|
|
81
130
|
overflow: 'hidden'
|
|
@@ -92,27 +141,49 @@ const generateStyle = (componentTheme, params) => {
|
|
|
92
141
|
crimson: componentTheme.colorCrimson,
|
|
93
142
|
fire: componentTheme.colorFire,
|
|
94
143
|
licorice: componentTheme.colorLicorice,
|
|
95
|
-
ash: componentTheme.colorAsh
|
|
144
|
+
ash: componentTheme.colorAsh,
|
|
145
|
+
ai: `
|
|
146
|
+
linear-gradient(to bottom, ${componentTheme.aiTopGradientColor} 0%, ${componentTheme.aiBottomGradientColor} 100%) padding-box,
|
|
147
|
+
linear-gradient(to bottom right, ${componentTheme.aiTopGradientColor} 0%, ${componentTheme.aiBottomGradientColor} 100%) border-box`
|
|
148
|
+
};
|
|
149
|
+
const background = () => {
|
|
150
|
+
if (color === 'ai') {
|
|
151
|
+
return {
|
|
152
|
+
background: `
|
|
153
|
+
linear-gradient(to bottom, ${componentTheme.aiTopGradientColor} 0%, ${componentTheme.aiBottomGradientColor} 100%) padding-box,
|
|
154
|
+
linear-gradient(to bottom right, ${componentTheme.aiTopGradientColor} 0%, ${componentTheme.aiBottomGradientColor} 100%) border-box`,
|
|
155
|
+
border: 'solid transparent'
|
|
156
|
+
};
|
|
157
|
+
}
|
|
158
|
+
return hasInverseColor ? {
|
|
159
|
+
backgroundColor: colorVariants[color],
|
|
160
|
+
backgroundClip: 'content-box'
|
|
161
|
+
} : {
|
|
162
|
+
backgroundColor: componentTheme.background,
|
|
163
|
+
backgroundClip: 'content-box'
|
|
164
|
+
};
|
|
165
|
+
};
|
|
166
|
+
const contentColor = () => {
|
|
167
|
+
if (color === 'ai') {
|
|
168
|
+
return componentTheme.aiFontColor;
|
|
169
|
+
}
|
|
170
|
+
return hasInverseColor ? componentTheme.background : colorVariants[color];
|
|
96
171
|
};
|
|
97
|
-
const backgroundColor = hasInverseColor ? colorVariants[color] : componentTheme.background;
|
|
98
|
-
const contentColor = hasInverseColor ? componentTheme.background : colorVariants[color];
|
|
99
172
|
return {
|
|
100
173
|
avatar: {
|
|
101
174
|
label: 'avatar',
|
|
102
|
-
height: '2.5em',
|
|
103
175
|
boxSizing: 'border-box',
|
|
104
|
-
|
|
176
|
+
borderStyle: 'solid',
|
|
177
|
+
borderColor: componentTheme.borderColor,
|
|
178
|
+
...background(),
|
|
105
179
|
backgroundPosition: 'center',
|
|
106
180
|
backgroundSize: 'cover',
|
|
107
|
-
backgroundClip: 'content-box',
|
|
108
181
|
backgroundRepeat: 'no-repeat',
|
|
109
182
|
overflow: 'hidden',
|
|
110
183
|
lineHeight: 0,
|
|
111
184
|
textAlign: 'center',
|
|
112
|
-
borderStyle: 'solid',
|
|
113
|
-
borderColor: componentTheme.borderColor,
|
|
114
185
|
...sizeStyles[size],
|
|
115
|
-
...
|
|
186
|
+
...shapeStyles[shape],
|
|
116
187
|
...(loaded ? {
|
|
117
188
|
backgroundImage: `url('${src}')`,
|
|
118
189
|
...(showBorder !== 'always' && {
|
|
@@ -133,11 +204,12 @@ const generateStyle = (componentTheme, params) => {
|
|
|
133
204
|
},
|
|
134
205
|
initials: {
|
|
135
206
|
label: 'avatar__initials',
|
|
136
|
-
color: contentColor,
|
|
207
|
+
color: contentColor(),
|
|
137
208
|
lineHeight: '2.375em',
|
|
138
209
|
fontFamily: componentTheme.fontFamily,
|
|
139
210
|
fontWeight: componentTheme.fontWeight,
|
|
140
|
-
letterSpacing: '0.0313em'
|
|
211
|
+
letterSpacing: '0.0313em',
|
|
212
|
+
...initialSizeStyles[size]
|
|
141
213
|
},
|
|
142
214
|
loadImage: {
|
|
143
215
|
label: 'avatar__loadImage',
|
|
@@ -151,7 +223,7 @@ const generateStyle = (componentTheme, params) => {
|
|
|
151
223
|
height: '100%',
|
|
152
224
|
width: '100%',
|
|
153
225
|
svg: {
|
|
154
|
-
fill: contentColor,
|
|
226
|
+
fill: contentColor(),
|
|
155
227
|
height: '1em',
|
|
156
228
|
width: '1em'
|
|
157
229
|
}
|
package/es/Avatar/theme.js
CHANGED
|
@@ -29,7 +29,7 @@ import { alpha } from '@instructure/ui-color-utils';
|
|
|
29
29
|
* @return The final theme object with the overrides and component variables
|
|
30
30
|
*/
|
|
31
31
|
const generateComponentTheme = theme => {
|
|
32
|
-
var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8;
|
|
32
|
+
var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10, _colors$contrasts11;
|
|
33
33
|
const colors = theme.colors,
|
|
34
34
|
borders = theme.borders,
|
|
35
35
|
typography = theme.typography;
|
|
@@ -50,7 +50,10 @@ const generateComponentTheme = theme => {
|
|
|
50
50
|
colorCrimson: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.red4570,
|
|
51
51
|
colorFire: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.orange4570,
|
|
52
52
|
colorLicorice: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey125125,
|
|
53
|
-
colorAsh: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey4570
|
|
53
|
+
colorAsh: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey4570,
|
|
54
|
+
aiTopGradientColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.violet4570,
|
|
55
|
+
aiBottomGradientColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.sea4570,
|
|
56
|
+
aiFontColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.white1010
|
|
54
57
|
};
|
|
55
58
|
return {
|
|
56
59
|
...componentVariables
|
package/lib/Avatar/props.js
CHANGED
|
@@ -35,7 +35,7 @@ const propTypes = exports.propTypes = {
|
|
|
35
35
|
src: _propTypes.default.string,
|
|
36
36
|
alt: _propTypes.default.string,
|
|
37
37
|
size: _propTypes.default.oneOf(['auto', 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large']),
|
|
38
|
-
color: _propTypes.default.oneOf(['default', 'shamrock', 'barney', 'crimson', 'fire', 'licorice', 'ash']),
|
|
38
|
+
color: _propTypes.default.oneOf(['default', 'shamrock', 'barney', 'crimson', 'fire', 'licorice', 'ash', 'ai']),
|
|
39
39
|
hasInverseColor: _propTypes.default.bool,
|
|
40
40
|
showBorder: _propTypes.default.oneOf(['auto', 'always', 'never']),
|
|
41
41
|
shape: _propTypes.default.oneOf(['circle', 'rectangle']),
|
package/lib/Avatar/styles.js
CHANGED
|
@@ -45,43 +45,92 @@ const generateStyle = (componentTheme, params) => {
|
|
|
45
45
|
shape = params.shape,
|
|
46
46
|
src = params.src,
|
|
47
47
|
showBorder = params.showBorder;
|
|
48
|
+
|
|
49
|
+
// TODO: this is a temporary solution and should be revised on component update
|
|
50
|
+
// NOTE: this is needed due to design changes. The size of the component is calculated from "em" which means it is
|
|
51
|
+
// tied to the fontSize. The font sizes changed for the icons, which meant that the container (component) size would've
|
|
52
|
+
// changed too without additional calculations
|
|
53
|
+
const calcNewScaler = (originalFontSize, newFontSize, originalScaler) => {
|
|
54
|
+
return `${originalFontSize * originalScaler / newFontSize}em`;
|
|
55
|
+
};
|
|
48
56
|
const sizeStyles = {
|
|
49
57
|
auto: {
|
|
50
58
|
fontSize: 'inherit',
|
|
51
|
-
borderWidth: componentTheme.borderWidthSmall
|
|
59
|
+
borderWidth: componentTheme.borderWidthSmall,
|
|
60
|
+
width: '2.5em',
|
|
61
|
+
height: '2.5em'
|
|
52
62
|
},
|
|
53
63
|
'xx-small': {
|
|
54
|
-
fontSize: '0.
|
|
55
|
-
borderWidth: componentTheme.borderWidthSmall
|
|
64
|
+
fontSize: '0.625rem',
|
|
65
|
+
borderWidth: componentTheme.borderWidthSmall,
|
|
66
|
+
width: calcNewScaler(0.5, 0.625, shape === 'circle' ? 2.5 : 3),
|
|
67
|
+
height: calcNewScaler(0.5, 0.625, 2.5)
|
|
56
68
|
},
|
|
57
69
|
'x-small': {
|
|
58
|
-
fontSize: '0.
|
|
59
|
-
borderWidth: componentTheme.borderWidthSmall
|
|
70
|
+
fontSize: '0.875rem',
|
|
71
|
+
borderWidth: componentTheme.borderWidthSmall,
|
|
72
|
+
width: calcNewScaler(0.75, 0.875, shape === 'circle' ? 2.5 : 3),
|
|
73
|
+
height: calcNewScaler(0.75, 0.875, 2.5)
|
|
60
74
|
},
|
|
61
75
|
small: {
|
|
62
|
-
fontSize: '
|
|
63
|
-
borderWidth: componentTheme.borderWidthSmall
|
|
76
|
+
fontSize: '1.25rem',
|
|
77
|
+
borderWidth: componentTheme.borderWidthSmall,
|
|
78
|
+
width: calcNewScaler(1, 1.25, shape === 'circle' ? 2.5 : 3),
|
|
79
|
+
height: calcNewScaler(1, 1.25, 2.5)
|
|
64
80
|
},
|
|
65
81
|
medium: {
|
|
66
|
-
fontSize: '1.
|
|
67
|
-
borderWidth: componentTheme.borderWidthMedium
|
|
82
|
+
fontSize: '1.5rem',
|
|
83
|
+
borderWidth: componentTheme.borderWidthMedium,
|
|
84
|
+
width: calcNewScaler(1.25, 1.5, shape === 'circle' ? 2.5 : 3),
|
|
85
|
+
height: calcNewScaler(1.25, 1.5, 2.5)
|
|
68
86
|
},
|
|
69
87
|
large: {
|
|
70
|
-
fontSize: '1.
|
|
71
|
-
borderWidth: componentTheme.borderWidthMedium
|
|
88
|
+
fontSize: '1.75rem',
|
|
89
|
+
borderWidth: componentTheme.borderWidthMedium,
|
|
90
|
+
width: calcNewScaler(1.5, 1.75, shape === 'circle' ? 2.5 : 3),
|
|
91
|
+
height: calcNewScaler(1.5, 1.75, 2.5)
|
|
72
92
|
},
|
|
73
93
|
'x-large': {
|
|
74
|
-
fontSize: '
|
|
75
|
-
borderWidth: componentTheme.borderWidthMedium
|
|
94
|
+
fontSize: '2rem',
|
|
95
|
+
borderWidth: componentTheme.borderWidthMedium,
|
|
96
|
+
width: calcNewScaler(1.75, 2, shape === 'circle' ? 2.5 : 3),
|
|
97
|
+
height: calcNewScaler(1.75, 2, 2.5)
|
|
76
98
|
},
|
|
77
99
|
'xx-large': {
|
|
78
|
-
fontSize: '
|
|
79
|
-
borderWidth: componentTheme.borderWidthMedium
|
|
100
|
+
fontSize: '2.25rem',
|
|
101
|
+
borderWidth: componentTheme.borderWidthMedium,
|
|
102
|
+
width: calcNewScaler(2, 2.25, shape === 'circle' ? 2.5 : 3),
|
|
103
|
+
height: calcNewScaler(2, 2.25, 2.5)
|
|
80
104
|
}
|
|
81
105
|
};
|
|
82
|
-
const
|
|
106
|
+
const initialSizeStyles = {
|
|
107
|
+
auto: {
|
|
108
|
+
fontSize: 'inherit'
|
|
109
|
+
},
|
|
110
|
+
'xx-small': {
|
|
111
|
+
fontSize: '0.5rem'
|
|
112
|
+
},
|
|
113
|
+
'x-small': {
|
|
114
|
+
fontSize: '0.75rem'
|
|
115
|
+
},
|
|
116
|
+
small: {
|
|
117
|
+
fontSize: '1rem'
|
|
118
|
+
},
|
|
119
|
+
medium: {
|
|
120
|
+
fontSize: '1.25rem'
|
|
121
|
+
},
|
|
122
|
+
large: {
|
|
123
|
+
fontSize: '1.5rem'
|
|
124
|
+
},
|
|
125
|
+
'x-large': {
|
|
126
|
+
fontSize: '1.75rem'
|
|
127
|
+
},
|
|
128
|
+
'xx-large': {
|
|
129
|
+
fontSize: '2rem'
|
|
130
|
+
}
|
|
131
|
+
};
|
|
132
|
+
const shapeStyles = {
|
|
83
133
|
circle: {
|
|
84
|
-
width: '2.5em',
|
|
85
134
|
position: 'relative',
|
|
86
135
|
borderRadius: '100%',
|
|
87
136
|
overflow: 'hidden'
|
|
@@ -98,27 +147,49 @@ const generateStyle = (componentTheme, params) => {
|
|
|
98
147
|
crimson: componentTheme.colorCrimson,
|
|
99
148
|
fire: componentTheme.colorFire,
|
|
100
149
|
licorice: componentTheme.colorLicorice,
|
|
101
|
-
ash: componentTheme.colorAsh
|
|
150
|
+
ash: componentTheme.colorAsh,
|
|
151
|
+
ai: `
|
|
152
|
+
linear-gradient(to bottom, ${componentTheme.aiTopGradientColor} 0%, ${componentTheme.aiBottomGradientColor} 100%) padding-box,
|
|
153
|
+
linear-gradient(to bottom right, ${componentTheme.aiTopGradientColor} 0%, ${componentTheme.aiBottomGradientColor} 100%) border-box`
|
|
154
|
+
};
|
|
155
|
+
const background = () => {
|
|
156
|
+
if (color === 'ai') {
|
|
157
|
+
return {
|
|
158
|
+
background: `
|
|
159
|
+
linear-gradient(to bottom, ${componentTheme.aiTopGradientColor} 0%, ${componentTheme.aiBottomGradientColor} 100%) padding-box,
|
|
160
|
+
linear-gradient(to bottom right, ${componentTheme.aiTopGradientColor} 0%, ${componentTheme.aiBottomGradientColor} 100%) border-box`,
|
|
161
|
+
border: 'solid transparent'
|
|
162
|
+
};
|
|
163
|
+
}
|
|
164
|
+
return hasInverseColor ? {
|
|
165
|
+
backgroundColor: colorVariants[color],
|
|
166
|
+
backgroundClip: 'content-box'
|
|
167
|
+
} : {
|
|
168
|
+
backgroundColor: componentTheme.background,
|
|
169
|
+
backgroundClip: 'content-box'
|
|
170
|
+
};
|
|
171
|
+
};
|
|
172
|
+
const contentColor = () => {
|
|
173
|
+
if (color === 'ai') {
|
|
174
|
+
return componentTheme.aiFontColor;
|
|
175
|
+
}
|
|
176
|
+
return hasInverseColor ? componentTheme.background : colorVariants[color];
|
|
102
177
|
};
|
|
103
|
-
const backgroundColor = hasInverseColor ? colorVariants[color] : componentTheme.background;
|
|
104
|
-
const contentColor = hasInverseColor ? componentTheme.background : colorVariants[color];
|
|
105
178
|
return {
|
|
106
179
|
avatar: {
|
|
107
180
|
label: 'avatar',
|
|
108
|
-
height: '2.5em',
|
|
109
181
|
boxSizing: 'border-box',
|
|
110
|
-
|
|
182
|
+
borderStyle: 'solid',
|
|
183
|
+
borderColor: componentTheme.borderColor,
|
|
184
|
+
...background(),
|
|
111
185
|
backgroundPosition: 'center',
|
|
112
186
|
backgroundSize: 'cover',
|
|
113
|
-
backgroundClip: 'content-box',
|
|
114
187
|
backgroundRepeat: 'no-repeat',
|
|
115
188
|
overflow: 'hidden',
|
|
116
189
|
lineHeight: 0,
|
|
117
190
|
textAlign: 'center',
|
|
118
|
-
borderStyle: 'solid',
|
|
119
|
-
borderColor: componentTheme.borderColor,
|
|
120
191
|
...sizeStyles[size],
|
|
121
|
-
...
|
|
192
|
+
...shapeStyles[shape],
|
|
122
193
|
...(loaded ? {
|
|
123
194
|
backgroundImage: `url('${src}')`,
|
|
124
195
|
...(showBorder !== 'always' && {
|
|
@@ -139,11 +210,12 @@ const generateStyle = (componentTheme, params) => {
|
|
|
139
210
|
},
|
|
140
211
|
initials: {
|
|
141
212
|
label: 'avatar__initials',
|
|
142
|
-
color: contentColor,
|
|
213
|
+
color: contentColor(),
|
|
143
214
|
lineHeight: '2.375em',
|
|
144
215
|
fontFamily: componentTheme.fontFamily,
|
|
145
216
|
fontWeight: componentTheme.fontWeight,
|
|
146
|
-
letterSpacing: '0.0313em'
|
|
217
|
+
letterSpacing: '0.0313em',
|
|
218
|
+
...initialSizeStyles[size]
|
|
147
219
|
},
|
|
148
220
|
loadImage: {
|
|
149
221
|
label: 'avatar__loadImage',
|
|
@@ -157,7 +229,7 @@ const generateStyle = (componentTheme, params) => {
|
|
|
157
229
|
height: '100%',
|
|
158
230
|
width: '100%',
|
|
159
231
|
svg: {
|
|
160
|
-
fill: contentColor,
|
|
232
|
+
fill: contentColor(),
|
|
161
233
|
height: '1em',
|
|
162
234
|
width: '1em'
|
|
163
235
|
}
|
package/lib/Avatar/theme.js
CHANGED
|
@@ -35,7 +35,7 @@ var _alpha = require("@instructure/ui-color-utils/lib/alpha.js");
|
|
|
35
35
|
* @return The final theme object with the overrides and component variables
|
|
36
36
|
*/
|
|
37
37
|
const generateComponentTheme = theme => {
|
|
38
|
-
var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8;
|
|
38
|
+
var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10, _colors$contrasts11;
|
|
39
39
|
const colors = theme.colors,
|
|
40
40
|
borders = theme.borders,
|
|
41
41
|
typography = theme.typography;
|
|
@@ -56,7 +56,10 @@ const generateComponentTheme = theme => {
|
|
|
56
56
|
colorCrimson: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.red4570,
|
|
57
57
|
colorFire: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.orange4570,
|
|
58
58
|
colorLicorice: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey125125,
|
|
59
|
-
colorAsh: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey4570
|
|
59
|
+
colorAsh: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey4570,
|
|
60
|
+
aiTopGradientColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.violet4570,
|
|
61
|
+
aiBottomGradientColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.sea4570,
|
|
62
|
+
aiFontColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.white1010
|
|
60
63
|
};
|
|
61
64
|
return {
|
|
62
65
|
...componentVariables
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-avatar",
|
|
3
|
-
"version": "10.16.
|
|
3
|
+
"version": "10.16.5-snapshot-2",
|
|
4
4
|
"description": "An image or letters that represents a user.",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -24,21 +24,21 @@
|
|
|
24
24
|
"license": "MIT",
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@babel/runtime": "^7.26.0",
|
|
27
|
-
"@instructure/emotion": "10.16.
|
|
28
|
-
"@instructure/shared-types": "10.16.
|
|
29
|
-
"@instructure/ui-icons": "10.16.
|
|
30
|
-
"@instructure/ui-react-utils": "10.16.
|
|
31
|
-
"@instructure/ui-testable": "10.16.
|
|
32
|
-
"@instructure/ui-view": "10.16.
|
|
27
|
+
"@instructure/emotion": "10.16.5-snapshot-2",
|
|
28
|
+
"@instructure/shared-types": "10.16.5-snapshot-2",
|
|
29
|
+
"@instructure/ui-icons": "10.16.5-snapshot-2",
|
|
30
|
+
"@instructure/ui-react-utils": "10.16.5-snapshot-2",
|
|
31
|
+
"@instructure/ui-testable": "10.16.5-snapshot-2",
|
|
32
|
+
"@instructure/ui-view": "10.16.5-snapshot-2",
|
|
33
33
|
"prop-types": "^15.8.1"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@instructure/ui-axe-check": "10.16.
|
|
37
|
-
"@instructure/ui-babel-preset": "10.16.
|
|
38
|
-
"@instructure/ui-color-utils": "10.16.
|
|
39
|
-
"@instructure/ui-test-locator": "10.16.
|
|
40
|
-
"@instructure/ui-test-utils": "10.16.
|
|
41
|
-
"@instructure/ui-themes": "10.16.
|
|
36
|
+
"@instructure/ui-axe-check": "10.16.5-snapshot-2",
|
|
37
|
+
"@instructure/ui-babel-preset": "10.16.5-snapshot-2",
|
|
38
|
+
"@instructure/ui-color-utils": "10.16.5-snapshot-2",
|
|
39
|
+
"@instructure/ui-test-locator": "10.16.5-snapshot-2",
|
|
40
|
+
"@instructure/ui-test-utils": "10.16.5-snapshot-2",
|
|
41
|
+
"@instructure/ui-themes": "10.16.5-snapshot-2",
|
|
42
42
|
"@testing-library/jest-dom": "^6.6.3",
|
|
43
43
|
"@testing-library/react": "^16.0.1",
|
|
44
44
|
"vitest": "^2.1.8"
|