@instructure/ui-avatar 9.5.2-snapshot-1 → 10.0.0

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 (10) hide show
  1. package/CHANGELOG.md +10 -2
  2. package/es/Avatar/__new-tests__/Avatar.test.js +5 -5
  3. package/es/Avatar/theme.js +11 -17
  4. package/lib/Avatar/__new-tests__/Avatar.test.js +5 -5
  5. package/lib/Avatar/theme.js +11 -17
  6. package/package.json +13 -13
  7. package/src/Avatar/__new-tests__/Avatar.test.tsx +5 -5
  8. package/src/Avatar/theme.ts +10 -12
  9. package/tsconfig.build.tsbuildinfo +1 -1
  10. package/types/Avatar/theme.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +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
- ## [9.5.2-snapshot-1](https://github.com/instructure/instructure-ui/compare/v9.5.1...v9.5.2-snapshot-1) (2024-07-31)
6
+ # [10.0.0](https://github.com/instructure/instructure-ui/compare/v9.5.1...v10.0.0) (2024-07-31)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-avatar
8
+
9
+ ### Features
10
+
11
+ * **many:** rewrite color system ([1e5809e](https://github.com/instructure/instructure-ui/commit/1e5809e28dee8c2a71703a429609b8d2f95d76e6))
12
+
13
+
14
+ ### BREAKING CHANGES
15
+
16
+ * **many:** Breaks color overrides in certain cases
9
17
 
10
18
 
11
19
 
package/es/Avatar/__new-tests__/Avatar.test.js CHANGED
@@ -78,7 +78,7 @@ describe('<Avatar />', () => {
78
78
  name: "Jessica Jones"
79
79
  })));
80
80
  const initials = screen.getByText('JJ');
81
- expect(getComputedStyle(initials).color).toBe('rgb(3, 116, 181)');
81
+ expect(getComputedStyle(initials).color).toBe('rgb(43, 122, 188)');
82
82
  });
83
83
  it('should return the underlying component', async () => {
84
84
  const elementRef = vi.fn();
@@ -194,7 +194,7 @@ describe('<Avatar />', () => {
194
194
  color: "shamrock"
195
195
  })));
196
196
  const initials = screen.getByText('JJ');
197
- expect(getComputedStyle(initials).color).toBe('rgb(11, 135, 75)');
197
+ expect(getComputedStyle(initials).color).toBe('rgb(3, 137, 61)');
198
198
  });
199
199
  it('should display the icon in green (shamrock)', async () => {
200
200
  const _render13 = render(_Avatar13 || (_Avatar13 = /*#__PURE__*/React.createElement(Avatar, {
@@ -205,7 +205,7 @@ describe('<Avatar />', () => {
205
205
  container = _render13.container;
206
206
  const avatarSvg = container.querySelector('svg');
207
207
  expect(avatarSvg).toHaveStyle({
208
- fill: '#FC5E13'
208
+ fill: '#CF4A00'
209
209
  });
210
210
  });
211
211
  });
@@ -219,7 +219,7 @@ describe('<Avatar />', () => {
219
219
  })));
220
220
  const initials = screen.getByText('JJ');
221
221
  expect(initials.parentNode).toHaveStyle({
222
- backgroundColor: 'rgb(11, 135, 75)'
222
+ backgroundColor: 'rgb(3, 137, 61)'
223
223
  });
224
224
  });
225
225
  it('should display the initials in white', async () => {
@@ -245,7 +245,7 @@ describe('<Avatar />', () => {
245
245
  container = _render14.container;
246
246
  const element = container.querySelector('span');
247
247
  expect(element).toHaveStyle({
248
- backgroundColor: 'rgb(11, 135, 75)'
248
+ backgroundColor: 'rgb(3, 137, 61)'
249
249
  });
250
250
  });
251
251
  it('should display the icon in white', async () => {
package/es/Avatar/theme.js CHANGED
@@ -29,34 +29,28 @@ import { alpha } from '@instructure/ui-color-utils';
29
29
  * @return {Object} 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
33
  const colors = theme.colors,
33
34
  borders = theme.borders,
34
35
  typography = theme.typography;
35
- const brand = colors.brand,
36
- shamrock = colors.shamrock,
37
- barney = colors.barney,
38
- crimson = colors.crimson,
39
- fire = colors.fire,
40
- licorice = colors.licorice,
41
- ash = colors.ash;
42
36
  const componentVariables = {
43
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
37
+ background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
44
38
  borderWidthSmall: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
45
39
  borderWidthMedium: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
46
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
47
- boxShadowColor: alpha(colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest, 12),
40
+ borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey1214,
41
+ boxShadowColor: alpha('#2d3b45', 12),
48
42
  boxShadowBlur: '1rem',
49
43
  fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
50
44
  fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
51
45
  // these colors have sufficient contrast with the white background
52
46
  // in the normal and high contrast themes
53
- color: brand,
54
- colorShamrock: shamrock,
55
- colorBarney: barney,
56
- colorCrimson: crimson,
57
- colorFire: fire,
58
- colorLicorice: licorice,
59
- colorAsh: ash
47
+ color: colors === null || colors === void 0 ? void 0 : colors.contrasts.blue4570,
48
+ colorShamrock: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.green4570,
49
+ colorBarney: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue4570,
50
+ colorCrimson: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.red4570,
51
+ colorFire: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.orange4570,
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
60
54
  };
61
55
  return {
62
56
  ...componentVariables
package/lib/Avatar/__new-tests__/Avatar.test.js CHANGED
@@ -81,7 +81,7 @@ describe('<Avatar />', () => {
81
81
  name: "Jessica Jones"
82
82
  })));
83
83
  const initials = _react2.screen.getByText('JJ');
84
- expect(getComputedStyle(initials).color).toBe('rgb(3, 116, 181)');
84
+ expect(getComputedStyle(initials).color).toBe('rgb(43, 122, 188)');
85
85
  });
86
86
  it('should return the underlying component', async () => {
87
87
  const elementRef = _vitest.vi.fn();
@@ -197,7 +197,7 @@ describe('<Avatar />', () => {
197
197
  color: "shamrock"
198
198
  })));
199
199
  const initials = _react2.screen.getByText('JJ');
200
- expect(getComputedStyle(initials).color).toBe('rgb(11, 135, 75)');
200
+ expect(getComputedStyle(initials).color).toBe('rgb(3, 137, 61)');
201
201
  });
202
202
  it('should display the icon in green (shamrock)', async () => {
203
203
  const _render13 = (0, _react2.render)(_Avatar13 || (_Avatar13 = /*#__PURE__*/_react.default.createElement(_index.default, {
@@ -208,7 +208,7 @@ describe('<Avatar />', () => {
208
208
  container = _render13.container;
209
209
  const avatarSvg = container.querySelector('svg');
210
210
  expect(avatarSvg).toHaveStyle({
211
- fill: '#FC5E13'
211
+ fill: '#CF4A00'
212
212
  });
213
213
  });
214
214
  });
@@ -222,7 +222,7 @@ describe('<Avatar />', () => {
222
222
  })));
223
223
  const initials = _react2.screen.getByText('JJ');
224
224
  expect(initials.parentNode).toHaveStyle({
225
- backgroundColor: 'rgb(11, 135, 75)'
225
+ backgroundColor: 'rgb(3, 137, 61)'
226
226
  });
227
227
  });
228
228
  it('should display the initials in white', async () => {
@@ -248,7 +248,7 @@ describe('<Avatar />', () => {
248
248
  container = _render14.container;
249
249
  const element = container.querySelector('span');
250
250
  expect(element).toHaveStyle({
251
- backgroundColor: 'rgb(11, 135, 75)'
251
+ backgroundColor: 'rgb(3, 137, 61)'
252
252
  });
253
253
  });
254
254
  it('should display the icon in white', async () => {
package/lib/Avatar/theme.js CHANGED
@@ -35,34 +35,28 @@ var _alpha = require("@instructure/ui-color-utils/lib/alpha.js");
35
35
  * @return {Object} 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
39
  const colors = theme.colors,
39
40
  borders = theme.borders,
40
41
  typography = theme.typography;
41
- const brand = colors.brand,
42
- shamrock = colors.shamrock,
43
- barney = colors.barney,
44
- crimson = colors.crimson,
45
- fire = colors.fire,
46
- licorice = colors.licorice,
47
- ash = colors.ash;
48
42
  const componentVariables = {
49
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
43
+ background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
50
44
  borderWidthSmall: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
51
45
  borderWidthMedium: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
52
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
53
- boxShadowColor: (0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest, 12),
46
+ borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey1214,
47
+ boxShadowColor: (0, _alpha.alpha)('#2d3b45', 12),
54
48
  boxShadowBlur: '1rem',
55
49
  fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
56
50
  fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
57
51
  // these colors have sufficient contrast with the white background
58
52
  // in the normal and high contrast themes
59
- color: brand,
60
- colorShamrock: shamrock,
61
- colorBarney: barney,
62
- colorCrimson: crimson,
63
- colorFire: fire,
64
- colorLicorice: licorice,
65
- colorAsh: ash
53
+ color: colors === null || colors === void 0 ? void 0 : colors.contrasts.blue4570,
54
+ colorShamrock: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.green4570,
55
+ colorBarney: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue4570,
56
+ colorCrimson: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.red4570,
57
+ colorFire: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.orange4570,
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
66
60
  };
67
61
  return {
68
62
  ...componentVariables
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-avatar",
3
- "version": "9.5.2-snapshot-1",
3
+ "version": "10.0.0",
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.24.5",
27
- "@instructure/emotion": "9.5.2-snapshot-1",
28
- "@instructure/shared-types": "9.5.2-snapshot-1",
29
- "@instructure/ui-icons": "9.5.2-snapshot-1",
30
- "@instructure/ui-react-utils": "9.5.2-snapshot-1",
31
- "@instructure/ui-testable": "9.5.2-snapshot-1",
32
- "@instructure/ui-view": "9.5.2-snapshot-1",
27
+ "@instructure/emotion": "10.0.0",
28
+ "@instructure/shared-types": "10.0.0",
29
+ "@instructure/ui-icons": "10.0.0",
30
+ "@instructure/ui-react-utils": "10.0.0",
31
+ "@instructure/ui-testable": "10.0.0",
32
+ "@instructure/ui-view": "10.0.0",
33
33
  "prop-types": "^15.8.1"
34
34
  },
35
35
  "devDependencies": {
36
- "@instructure/ui-axe-check": "9.5.2-snapshot-1",
37
- "@instructure/ui-babel-preset": "9.5.2-snapshot-1",
38
- "@instructure/ui-color-utils": "9.5.2-snapshot-1",
39
- "@instructure/ui-test-locator": "9.5.2-snapshot-1",
40
- "@instructure/ui-test-utils": "9.5.2-snapshot-1",
41
- "@instructure/ui-themes": "9.5.2-snapshot-1",
36
+ "@instructure/ui-axe-check": "10.0.0",
37
+ "@instructure/ui-babel-preset": "10.0.0",
38
+ "@instructure/ui-color-utils": "10.0.0",
39
+ "@instructure/ui-test-locator": "10.0.0",
40
+ "@instructure/ui-test-utils": "10.0.0",
41
+ "@instructure/ui-themes": "10.0.0",
42
42
  "@testing-library/jest-dom": "^6.4.6",
43
43
  "@testing-library/react": "^15.0.7",
44
44
  "vitest": "^2.0.2"
package/src/Avatar/__new-tests__/Avatar.test.tsx CHANGED
@@ -69,7 +69,7 @@ describe('<Avatar />', () => {
69
69
  it('should display the initials in brand color', async () => {
70
70
  render(<Avatar name="Jessica Jones" />)
71
71
  const initials = screen.getByText('JJ')
72
- expect(getComputedStyle(initials).color).toBe('rgb(3, 116, 181)')
72
+ expect(getComputedStyle(initials).color).toBe('rgb(43, 122, 188)')
73
73
  })
74
74
 
75
75
  it('should return the underlying component', async () => {
@@ -176,7 +176,7 @@ describe('<Avatar />', () => {
176
176
  it('should display the initials in green (shamrock)', async () => {
177
177
  render(<Avatar name="Jessica Jones" color="shamrock" />)
178
178
  const initials = screen.getByText('JJ')
179
- expect(getComputedStyle(initials).color).toBe('rgb(11, 135, 75)')
179
+ expect(getComputedStyle(initials).color).toBe('rgb(3, 137, 61)')
180
180
  })
181
181
 
182
182
  it('should display the icon in green (shamrock)', async () => {
@@ -190,7 +190,7 @@ describe('<Avatar />', () => {
190
190
  </Avatar>
191
191
  )
192
192
  const avatarSvg = container.querySelector('svg')
193
- expect(avatarSvg).toHaveStyle({ fill: '#FC5E13' })
193
+ expect(avatarSvg).toHaveStyle({ fill: '#CF4A00' })
194
194
  })
195
195
  })
196
196
 
@@ -200,7 +200,7 @@ describe('<Avatar />', () => {
200
200
  render(<Avatar name="Jessica Jones" color="shamrock" hasInverseColor />)
201
201
  const initials = screen.getByText('JJ')
202
202
  expect(initials.parentNode).toHaveStyle({
203
- backgroundColor: 'rgb(11, 135, 75)'
203
+ backgroundColor: 'rgb(3, 137, 61)'
204
204
  })
205
205
  })
206
206
 
@@ -222,7 +222,7 @@ describe('<Avatar />', () => {
222
222
  />
223
223
  )
224
224
  const element = container.querySelector('span')
225
- expect(element).toHaveStyle({ backgroundColor: 'rgb(11, 135, 75)' })
225
+ expect(element).toHaveStyle({ backgroundColor: 'rgb(3, 137, 61)' })
226
226
  })
227
227
 
228
228
  it('should display the icon in white', async () => {
package/src/Avatar/theme.ts CHANGED
@@ -34,27 +34,25 @@ import { AvatarTheme } from '@instructure/shared-types'
34
34
  const generateComponentTheme = (theme: Theme): AvatarTheme => {
35
35
  const { colors, borders, typography } = theme
36
36
 
37
- const { brand, shamrock, barney, crimson, fire, licorice, ash } = colors
38
-
39
37
  const componentVariables: AvatarTheme = {
40
- background: colors?.backgroundLightest,
38
+ background: colors?.contrasts?.white1010,
41
39
  borderWidthSmall: borders?.widthSmall,
42
40
  borderWidthMedium: borders?.widthMedium,
43
- borderColor: colors?.borderMedium,
44
- boxShadowColor: alpha(colors?.backgroundDarkest, 12),
41
+ borderColor: colors?.contrasts?.grey1214,
42
+ boxShadowColor: alpha('#2d3b45', 12),
45
43
  boxShadowBlur: '1rem',
46
44
  fontFamily: typography?.fontFamily,
47
45
  fontWeight: typography?.fontWeightBold,
48
46
 
49
47
  // these colors have sufficient contrast with the white background
50
48
  // in the normal and high contrast themes
51
- color: brand,
52
- colorShamrock: shamrock,
53
- colorBarney: barney,
54
- colorCrimson: crimson,
55
- colorFire: fire,
56
- colorLicorice: licorice,
57
- colorAsh: ash
49
+ color: colors?.contrasts.blue4570,
50
+ colorShamrock: colors?.contrasts?.green4570,
51
+ colorBarney: colors?.contrasts?.blue4570,
52
+ colorCrimson: colors?.contrasts?.red4570,
53
+ colorFire: colors?.contrasts?.orange4570,
54
+ colorLicorice: colors?.contrasts?.grey125125,
55
+ colorAsh: colors?.contrasts?.grey4570
58
56
  }
59
57
 
60
58
  return {