@instructure/ui-top-nav-bar 9.5.2-snapshot-7 → 9.6.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 (15) hide show
  1. package/CHANGELOG.md +5 -5
  2. package/es/TopNavBar/TopNavBarItem/__new-tests__/TopNavBarItem.test.js +6 -6
  3. package/es/TopNavBar/TopNavBarItem/theme.js +2 -3
  4. package/es/TopNavBar/TopNavBarLayout/DesktopLayout/theme.js +5 -6
  5. package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/theme.js +3 -4
  6. package/lib/TopNavBar/TopNavBarItem/__new-tests__/TopNavBarItem.test.js +6 -6
  7. package/lib/TopNavBar/TopNavBarItem/theme.js +2 -3
  8. package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/theme.js +5 -6
  9. package/lib/TopNavBar/TopNavBarLayout/SmallViewportLayout/theme.js +3 -4
  10. package/package.json +30 -30
  11. package/src/TopNavBar/TopNavBarItem/__new-tests__/TopNavBarItem.test.tsx +6 -6
  12. package/src/TopNavBar/TopNavBarItem/theme.ts +2 -2
  13. package/src/TopNavBar/TopNavBarLayout/DesktopLayout/theme.ts +5 -5
  14. package/src/TopNavBar/TopNavBarLayout/SmallViewportLayout/theme.ts +3 -3
  15. package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -3,17 +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-7](https://github.com/instructure/instructure-ui/compare/v9.5.1...v9.5.2-snapshot-7) (2024-07-31)
6
+ # [9.6.0](https://github.com/instructure/instructure-ui/compare/v9.5.2...v9.6.0) (2024-08-14)
7
7
 
8
+ **Note:** Version bump only for package @instructure/ui-top-nav-bar
8
9
 
9
- ### Features
10
10
 
11
- * **many:** rewrite color system ([1e5809e](https://github.com/instructure/instructure-ui/commit/1e5809e28dee8c2a71703a429609b8d2f95d76e6))
12
11
 
13
12
 
14
- ### BREAKING CHANGES
15
13
 
16
- * **many:** Breaks color overrides in certain cases
14
+ ## [9.5.2](https://github.com/instructure/instructure-ui/compare/v9.5.1...v9.5.2) (2024-08-05)
15
+
16
+ **Note:** Version bump only for package @instructure/ui-top-nav-bar
17
17
 
18
18
 
19
19
 
package/es/TopNavBar/TopNavBarItem/__new-tests__/TopNavBarItem.test.js CHANGED
@@ -372,7 +372,7 @@ describe('<TopNavBarItem />', () => {
372
372
  // const activeIndicatorStyle = await component.getActiveIndicatorStyle()
373
373
 
374
374
  // expect(activeIndicatorStyle?.backgroundColor).to.equal(
375
- // 'rgb(39, 53, 64)'
375
+ // 'rgb(45, 59, 69)'
376
376
  // )
377
377
  // })
378
378
 
@@ -962,7 +962,7 @@ describe('<TopNavBarItem />', () => {
962
962
  // expect(
963
963
  // getComputedStyle(tooltipContent.getDOMNode().childNodes[0])
964
964
  // .backgroundColor
965
- // ).to.equal('rgb(39, 53, 64)')
965
+ // ).to.equal('rgb(45, 59, 69)')
966
966
  // })
967
967
  });
968
968
  describe('renderAvatar prop', () => {
@@ -1091,11 +1091,11 @@ describe('<TopNavBarItem />', () => {
1091
1091
  expect(icon).toBeVisible();
1092
1092
  expect(icon).toHaveAttribute('name', 'IconSearch');
1093
1093
  // TODO convert to e2e
1094
- // expect(window.getComputedStyle(icon!).fill).toEqual('rgb(39, 53, 64)')
1094
+ // expect(window.getComputedStyle(icon!).fill).toEqual('rgb(45, 59, 69)')
1095
1095
 
1096
1096
  const button = screen.getByRole('button');
1097
1097
  expect(button).toHaveTextContent('Menu Item');
1098
- expect(window.getComputedStyle(button).color).toEqual('rgb(39, 53, 64)');
1098
+ expect(window.getComputedStyle(button).color).toEqual('rgb(45, 59, 69)');
1099
1099
  });
1100
1100
  });
1101
1101
  describe('should render icon in inverse mode', () => {
@@ -1112,11 +1112,11 @@ describe('<TopNavBarItem />', () => {
1112
1112
  expect(icon).toBeVisible();
1113
1113
  expect(icon).toHaveAttribute('name', 'IconSearch');
1114
1114
  // TODO convert to e2e
1115
- // expect(window.getComputedStyle(icon!).fill).toEqual('rgb(39, 53, 64)')
1115
+ // expect(window.getComputedStyle(icon!).fill).toEqual('rgb(45, 59, 69)')
1116
1116
 
1117
1117
  const button = screen.getByRole('button');
1118
1118
  expect(button).toHaveTextContent('Menu Item');
1119
- expect(window.getComputedStyle(button).color).toEqual('rgb(39, 53, 64)');
1119
+ expect(window.getComputedStyle(button).color).toEqual('rgb(45, 59, 69)');
1120
1120
  });
1121
1121
  it('for button variant', () => {
1122
1122
  const _render35 = render(_SmallViewportModeWra2 || (_SmallViewportModeWra2 = /*#__PURE__*/React.createElement(SmallViewportModeWrapper, {
package/es/TopNavBar/TopNavBarItem/theme.js CHANGED
@@ -28,7 +28,6 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- var _colors$contrasts, _colors$contrasts2;
32
31
  const colors = theme.colors,
33
32
  spacing = theme.spacing,
34
33
  typography = theme.typography,
@@ -45,8 +44,8 @@ const generateComponentTheme = theme => {
45
44
  activeItemFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
46
45
  activeItemIndicatorSpacing: '0.25rem',
47
46
  activeIndicatorWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
48
- activeIndicatorColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
49
- activeIndicatorColorInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125
47
+ activeIndicatorColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
48
+ activeIndicatorColorInverse: colors.textDarkest
50
49
  };
51
50
  return {
52
51
  ...componentVariables
package/es/TopNavBar/TopNavBarLayout/DesktopLayout/theme.js CHANGED
@@ -28,7 +28,6 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5;
32
31
  const colors = theme.colors,
33
32
  stacking = theme.stacking,
34
33
  typography = theme.typography,
@@ -38,10 +37,10 @@ const generateComponentTheme = theme => {
38
37
  desktopFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
39
38
  desktopFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
40
39
  desktopFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
41
- desktopBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey100100,
42
- desktopBackgroundInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey1111,
40
+ desktopBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrandSecondary,
41
+ desktopBackgroundInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
43
42
  desktopBottomBorder: 'none',
44
- desktopBottomBorderInverse: `${borders === null || borders === void 0 ? void 0 : borders.widthSmall} ${borders === null || borders === void 0 ? void 0 : borders.style} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey1214}`,
43
+ desktopBottomBorderInverse: `${borders === null || borders === void 0 ? void 0 : borders.widthSmall} ${borders === null || borders === void 0 ? void 0 : borders.style} ${colors === null || colors === void 0 ? void 0 : colors.borderMedium}`,
45
44
  desktopHeight: '4rem',
46
45
  desktopZIndex: (stacking === null || stacking === void 0 ? void 0 : stacking.topmost) - 1,
47
46
  // -1 so it is below tray/modal/popover/etc TODO find a better solution
@@ -54,8 +53,8 @@ const generateComponentTheme = theme => {
54
53
  desktopUserSeparatorGap: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
55
54
  desktopUserSeparatorHeight: '1.5rem',
56
55
  desktopUserSeparatorWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
57
- desktopUserSeparatorColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey1214,
58
- desktopUserSeparatorColorInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey1214
56
+ desktopUserSeparatorColor: colors.borderMedium,
57
+ desktopUserSeparatorColorInverse: colors.borderMedium
59
58
  };
60
59
  return {
61
60
  ...componentVariables
package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/theme.js CHANGED
@@ -28,7 +28,6 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3;
32
31
  const colors = theme.colors,
33
32
  stacking = theme.stacking,
34
33
  typography = theme.typography,
@@ -38,10 +37,10 @@ const generateComponentTheme = theme => {
38
37
  smallViewportFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
39
38
  smallViewportFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
40
39
  smallViewportFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
41
- smallViewportBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey100100,
42
- smallViewportBackgroundInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey1111,
40
+ smallViewportBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrandSecondary,
41
+ smallViewportBackgroundInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
43
42
  smallViewportBottomBorder: 'none',
44
- smallViewportBottomBorderInverse: `${borders === null || borders === void 0 ? void 0 : borders.widthSmall} ${borders === null || borders === void 0 ? void 0 : borders.style} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey1214}`,
43
+ smallViewportBottomBorderInverse: `${borders === null || borders === void 0 ? void 0 : borders.widthSmall} ${borders === null || borders === void 0 ? void 0 : borders.style} ${colors === null || colors === void 0 ? void 0 : colors.borderMedium}`,
45
44
  smallViewportHeight: '3.5rem',
46
45
  smallViewportInlinePadding: `0.25rem`,
47
46
  smallViewportZIndex: (stacking === null || stacking === void 0 ? void 0 : stacking.topmost) + 1,
package/lib/TopNavBar/TopNavBarItem/__new-tests__/TopNavBarItem.test.js CHANGED
@@ -373,7 +373,7 @@ describe('<TopNavBarItem />', () => {
373
373
  // const activeIndicatorStyle = await component.getActiveIndicatorStyle()
374
374
 
375
375
  // expect(activeIndicatorStyle?.backgroundColor).to.equal(
376
- // 'rgb(39, 53, 64)'
376
+ // 'rgb(45, 59, 69)'
377
377
  // )
378
378
  // })
379
379
 
@@ -963,7 +963,7 @@ describe('<TopNavBarItem />', () => {
963
963
  // expect(
964
964
  // getComputedStyle(tooltipContent.getDOMNode().childNodes[0])
965
965
  // .backgroundColor
966
- // ).to.equal('rgb(39, 53, 64)')
966
+ // ).to.equal('rgb(45, 59, 69)')
967
967
  // })
968
968
  });
969
969
  describe('renderAvatar prop', () => {
@@ -1092,11 +1092,11 @@ describe('<TopNavBarItem />', () => {
1092
1092
  expect(icon).toBeVisible();
1093
1093
  expect(icon).toHaveAttribute('name', 'IconSearch');
1094
1094
  // TODO convert to e2e
1095
- // expect(window.getComputedStyle(icon!).fill).toEqual('rgb(39, 53, 64)')
1095
+ // expect(window.getComputedStyle(icon!).fill).toEqual('rgb(45, 59, 69)')
1096
1096
 
1097
1097
  const button = _react2.screen.getByRole('button');
1098
1098
  expect(button).toHaveTextContent('Menu Item');
1099
- expect(window.getComputedStyle(button).color).toEqual('rgb(39, 53, 64)');
1099
+ expect(window.getComputedStyle(button).color).toEqual('rgb(45, 59, 69)');
1100
1100
  });
1101
1101
  });
1102
1102
  describe('should render icon in inverse mode', () => {
@@ -1113,11 +1113,11 @@ describe('<TopNavBarItem />', () => {
1113
1113
  expect(icon).toBeVisible();
1114
1114
  expect(icon).toHaveAttribute('name', 'IconSearch');
1115
1115
  // TODO convert to e2e
1116
- // expect(window.getComputedStyle(icon!).fill).toEqual('rgb(39, 53, 64)')
1116
+ // expect(window.getComputedStyle(icon!).fill).toEqual('rgb(45, 59, 69)')
1117
1117
 
1118
1118
  const button = _react2.screen.getByRole('button');
1119
1119
  expect(button).toHaveTextContent('Menu Item');
1120
- expect(window.getComputedStyle(button).color).toEqual('rgb(39, 53, 64)');
1120
+ expect(window.getComputedStyle(button).color).toEqual('rgb(45, 59, 69)');
1121
1121
  });
1122
1122
  it('for button variant', () => {
1123
1123
  const _render35 = (0, _react2.render)(_SmallViewportModeWra2 || (_SmallViewportModeWra2 = /*#__PURE__*/_react.default.createElement(_exampleHelpers.SmallViewportModeWrapper, {
package/lib/TopNavBar/TopNavBarItem/theme.js CHANGED
@@ -34,7 +34,6 @@ exports.default = void 0;
34
34
  * @return {Object} The final theme object with the overrides and component variables
35
35
  */
36
36
  const generateComponentTheme = theme => {
37
- var _colors$contrasts, _colors$contrasts2;
38
37
  const colors = theme.colors,
39
38
  spacing = theme.spacing,
40
39
  typography = theme.typography,
@@ -51,8 +50,8 @@ const generateComponentTheme = theme => {
51
50
  activeItemFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
52
51
  activeItemIndicatorSpacing: '0.25rem',
53
52
  activeIndicatorWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
54
- activeIndicatorColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
55
- activeIndicatorColorInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125
53
+ activeIndicatorColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
54
+ activeIndicatorColorInverse: colors.textDarkest
56
55
  };
57
56
  return {
58
57
  ...componentVariables
package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/theme.js CHANGED
@@ -34,7 +34,6 @@ exports.default = void 0;
34
34
  * @return {Object} The final theme object with the overrides and component variables
35
35
  */
36
36
  const generateComponentTheme = theme => {
37
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5;
38
37
  const colors = theme.colors,
39
38
  stacking = theme.stacking,
40
39
  typography = theme.typography,
@@ -44,10 +43,10 @@ const generateComponentTheme = theme => {
44
43
  desktopFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
45
44
  desktopFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
46
45
  desktopFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
47
- desktopBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey100100,
48
- desktopBackgroundInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey1111,
46
+ desktopBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrandSecondary,
47
+ desktopBackgroundInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
49
48
  desktopBottomBorder: 'none',
50
- desktopBottomBorderInverse: `${borders === null || borders === void 0 ? void 0 : borders.widthSmall} ${borders === null || borders === void 0 ? void 0 : borders.style} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey1214}`,
49
+ desktopBottomBorderInverse: `${borders === null || borders === void 0 ? void 0 : borders.widthSmall} ${borders === null || borders === void 0 ? void 0 : borders.style} ${colors === null || colors === void 0 ? void 0 : colors.borderMedium}`,
51
50
  desktopHeight: '4rem',
52
51
  desktopZIndex: (stacking === null || stacking === void 0 ? void 0 : stacking.topmost) - 1,
53
52
  // -1 so it is below tray/modal/popover/etc TODO find a better solution
@@ -60,8 +59,8 @@ const generateComponentTheme = theme => {
60
59
  desktopUserSeparatorGap: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
61
60
  desktopUserSeparatorHeight: '1.5rem',
62
61
  desktopUserSeparatorWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
63
- desktopUserSeparatorColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey1214,
64
- desktopUserSeparatorColorInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey1214
62
+ desktopUserSeparatorColor: colors.borderMedium,
63
+ desktopUserSeparatorColorInverse: colors.borderMedium
65
64
  };
66
65
  return {
67
66
  ...componentVariables
package/lib/TopNavBar/TopNavBarLayout/SmallViewportLayout/theme.js CHANGED
@@ -34,7 +34,6 @@ exports.default = void 0;
34
34
  * @return {Object} The final theme object with the overrides and component variables
35
35
  */
36
36
  const generateComponentTheme = theme => {
37
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3;
38
37
  const colors = theme.colors,
39
38
  stacking = theme.stacking,
40
39
  typography = theme.typography,
@@ -44,10 +43,10 @@ const generateComponentTheme = theme => {
44
43
  smallViewportFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
45
44
  smallViewportFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
46
45
  smallViewportFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
47
- smallViewportBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey100100,
48
- smallViewportBackgroundInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey1111,
46
+ smallViewportBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrandSecondary,
47
+ smallViewportBackgroundInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
49
48
  smallViewportBottomBorder: 'none',
50
- smallViewportBottomBorderInverse: `${borders === null || borders === void 0 ? void 0 : borders.widthSmall} ${borders === null || borders === void 0 ? void 0 : borders.style} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey1214}`,
49
+ smallViewportBottomBorderInverse: `${borders === null || borders === void 0 ? void 0 : borders.widthSmall} ${borders === null || borders === void 0 ? void 0 : borders.style} ${colors === null || colors === void 0 ? void 0 : colors.borderMedium}`,
51
50
  smallViewportHeight: '3.5rem',
52
51
  smallViewportInlinePadding: `0.25rem`,
53
52
  smallViewportZIndex: (stacking === null || stacking === void 0 ? void 0 : stacking.topmost) + 1,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-top-nav-bar",
3
- "version": "9.5.2-snapshot-7",
3
+ "version": "9.6.0",
4
4
  "description": "A UI component library made by Instructure Inc.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,38 +24,38 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.24.5",
27
- "@instructure/console": "9.5.2-snapshot-7",
28
- "@instructure/emotion": "9.5.2-snapshot-7",
29
- "@instructure/shared-types": "9.5.2-snapshot-7",
30
- "@instructure/ui-a11y-content": "9.5.2-snapshot-7",
31
- "@instructure/ui-avatar": "9.5.2-snapshot-7",
32
- "@instructure/ui-breadcrumb": "9.5.2-snapshot-7",
33
- "@instructure/ui-buttons": "9.5.2-snapshot-7",
34
- "@instructure/ui-dialog": "9.5.2-snapshot-7",
35
- "@instructure/ui-dom-utils": "9.5.2-snapshot-7",
36
- "@instructure/ui-drilldown": "9.5.2-snapshot-7",
37
- "@instructure/ui-icons": "9.5.2-snapshot-7",
38
- "@instructure/ui-link": "9.5.2-snapshot-7",
39
- "@instructure/ui-popover": "9.5.2-snapshot-7",
40
- "@instructure/ui-prop-types": "9.5.2-snapshot-7",
41
- "@instructure/ui-react-utils": "9.5.2-snapshot-7",
42
- "@instructure/ui-responsive": "9.5.2-snapshot-7",
43
- "@instructure/ui-testable": "9.5.2-snapshot-7",
44
- "@instructure/ui-tooltip": "9.5.2-snapshot-7",
45
- "@instructure/ui-tray": "9.5.2-snapshot-7",
46
- "@instructure/ui-truncate-list": "9.5.2-snapshot-7",
47
- "@instructure/ui-utils": "9.5.2-snapshot-7",
48
- "@instructure/ui-view": "9.5.2-snapshot-7",
27
+ "@instructure/console": "9.6.0",
28
+ "@instructure/emotion": "9.6.0",
29
+ "@instructure/shared-types": "9.6.0",
30
+ "@instructure/ui-a11y-content": "9.6.0",
31
+ "@instructure/ui-avatar": "9.6.0",
32
+ "@instructure/ui-breadcrumb": "9.6.0",
33
+ "@instructure/ui-buttons": "9.6.0",
34
+ "@instructure/ui-dialog": "9.6.0",
35
+ "@instructure/ui-dom-utils": "9.6.0",
36
+ "@instructure/ui-drilldown": "9.6.0",
37
+ "@instructure/ui-icons": "9.6.0",
38
+ "@instructure/ui-link": "9.6.0",
39
+ "@instructure/ui-popover": "9.6.0",
40
+ "@instructure/ui-prop-types": "9.6.0",
41
+ "@instructure/ui-react-utils": "9.6.0",
42
+ "@instructure/ui-responsive": "9.6.0",
43
+ "@instructure/ui-testable": "9.6.0",
44
+ "@instructure/ui-tooltip": "9.6.0",
45
+ "@instructure/ui-tray": "9.6.0",
46
+ "@instructure/ui-truncate-list": "9.6.0",
47
+ "@instructure/ui-utils": "9.6.0",
48
+ "@instructure/ui-view": "9.6.0",
49
49
  "prop-types": "^15.8.1"
50
50
  },
51
51
  "devDependencies": {
52
- "@instructure/ui-axe-check": "9.5.2-snapshot-7",
53
- "@instructure/ui-babel-preset": "9.5.2-snapshot-7",
54
- "@instructure/ui-color-utils": "9.5.2-snapshot-7",
55
- "@instructure/ui-scripts": "9.5.2-snapshot-7",
56
- "@instructure/ui-test-locator": "9.5.2-snapshot-7",
57
- "@instructure/ui-test-utils": "9.5.2-snapshot-7",
58
- "@instructure/ui-themes": "9.5.2-snapshot-7",
52
+ "@instructure/ui-axe-check": "9.6.0",
53
+ "@instructure/ui-babel-preset": "9.6.0",
54
+ "@instructure/ui-color-utils": "9.6.0",
55
+ "@instructure/ui-scripts": "9.6.0",
56
+ "@instructure/ui-test-locator": "9.6.0",
57
+ "@instructure/ui-test-utils": "9.6.0",
58
+ "@instructure/ui-themes": "9.6.0",
59
59
  "@testing-library/jest-dom": "^6.4.6",
60
60
  "@testing-library/react": "^15.0.7",
61
61
  "@testing-library/user-event": "^14.5.2",
package/src/TopNavBar/TopNavBarItem/__new-tests__/TopNavBarItem.test.tsx CHANGED
@@ -452,7 +452,7 @@ describe('<TopNavBarItem />', () => {
452
452
  // const activeIndicatorStyle = await component.getActiveIndicatorStyle()
453
453
 
454
454
  // expect(activeIndicatorStyle?.backgroundColor).to.equal(
455
- // 'rgb(39, 53, 64)'
455
+ // 'rgb(45, 59, 69)'
456
456
  // )
457
457
  // })
458
458
 
@@ -1350,7 +1350,7 @@ describe('<TopNavBarItem />', () => {
1350
1350
  // expect(
1351
1351
  // getComputedStyle(tooltipContent.getDOMNode().childNodes[0])
1352
1352
  // .backgroundColor
1353
- // ).to.equal('rgb(39, 53, 64)')
1353
+ // ).to.equal('rgb(45, 59, 69)')
1354
1354
  // })
1355
1355
  })
1356
1356
 
@@ -1531,11 +1531,11 @@ describe('<TopNavBarItem />', () => {
1531
1531
  expect(icon).toBeVisible()
1532
1532
  expect(icon).toHaveAttribute('name', 'IconSearch')
1533
1533
  // TODO convert to e2e
1534
- // expect(window.getComputedStyle(icon!).fill).toEqual('rgb(39, 53, 64)')
1534
+ // expect(window.getComputedStyle(icon!).fill).toEqual('rgb(45, 59, 69)')
1535
1535
 
1536
1536
  const button = screen.getByRole('button')
1537
1537
  expect(button).toHaveTextContent('Menu Item')
1538
- expect(window.getComputedStyle(button).color).toEqual('rgb(39, 53, 64)')
1538
+ expect(window.getComputedStyle(button).color).toEqual('rgb(45, 59, 69)')
1539
1539
  })
1540
1540
  })
1541
1541
 
@@ -1553,11 +1553,11 @@ describe('<TopNavBarItem />', () => {
1553
1553
  expect(icon).toBeVisible()
1554
1554
  expect(icon).toHaveAttribute('name', 'IconSearch')
1555
1555
  // TODO convert to e2e
1556
- // expect(window.getComputedStyle(icon!).fill).toEqual('rgb(39, 53, 64)')
1556
+ // expect(window.getComputedStyle(icon!).fill).toEqual('rgb(45, 59, 69)')
1557
1557
 
1558
1558
  const button = screen.getByRole('button')
1559
1559
  expect(button).toHaveTextContent('Menu Item')
1560
- expect(window.getComputedStyle(button).color).toEqual('rgb(39, 53, 64)')
1560
+ expect(window.getComputedStyle(button).color).toEqual('rgb(45, 59, 69)')
1561
1561
  })
1562
1562
 
1563
1563
  it('for button variant', () => {
package/src/TopNavBar/TopNavBarItem/theme.ts CHANGED
@@ -48,8 +48,8 @@ const generateComponentTheme = (theme: Theme): TopNavBarItemTheme => {
48
48
  activeItemFontWeight: typography?.fontWeightBold,
49
49
  activeItemIndicatorSpacing: '0.25rem',
50
50
  activeIndicatorWidth: borders?.widthMedium,
51
- activeIndicatorColor: colors?.contrasts?.white1010,
52
- activeIndicatorColorInverse: colors?.contrasts?.grey125125
51
+ activeIndicatorColor: colors?.textLightest,
52
+ activeIndicatorColorInverse: colors.textDarkest
53
53
  }
54
54
 
55
55
  return {
package/src/TopNavBar/TopNavBarLayout/DesktopLayout/theme.ts CHANGED
@@ -38,10 +38,10 @@ const generateComponentTheme = (theme: Theme): TopNavBarLayoutDesktopTheme => {
38
38
  desktopFontFamily: typography?.fontFamily,
39
39
  desktopFontWeight: typography?.fontWeightNormal,
40
40
 
41
- desktopBackground: colors?.contrasts?.grey100100,
42
- desktopBackgroundInverse: colors?.contrasts?.grey1111,
41
+ desktopBackground: colors?.backgroundBrandSecondary,
42
+ desktopBackgroundInverse: colors?.backgroundLight,
43
43
  desktopBottomBorder: 'none',
44
- desktopBottomBorderInverse: `${borders?.widthSmall} ${borders?.style} ${colors?.contrasts?.grey1214}`,
44
+ desktopBottomBorderInverse: `${borders?.widthSmall} ${borders?.style} ${colors?.borderMedium}`,
45
45
  desktopHeight: '4rem',
46
46
  desktopZIndex: stacking?.topmost - 1, // -1 so it is below tray/modal/popover/etc TODO find a better solution
47
47
 
@@ -54,8 +54,8 @@ const generateComponentTheme = (theme: Theme): TopNavBarLayoutDesktopTheme => {
54
54
  desktopUserSeparatorGap: spacing?.xSmall,
55
55
  desktopUserSeparatorHeight: '1.5rem',
56
56
  desktopUserSeparatorWidth: borders?.widthSmall,
57
- desktopUserSeparatorColor: colors?.contrasts?.grey1214,
58
- desktopUserSeparatorColorInverse: colors?.contrasts?.grey1214
57
+ desktopUserSeparatorColor: colors.borderMedium,
58
+ desktopUserSeparatorColorInverse: colors.borderMedium
59
59
  }
60
60
 
61
61
  return {
package/src/TopNavBar/TopNavBarLayout/SmallViewportLayout/theme.ts CHANGED
@@ -40,10 +40,10 @@ const generateComponentTheme = (
40
40
  smallViewportFontFamily: typography?.fontFamily,
41
41
  smallViewportFontWeight: typography?.fontWeightNormal,
42
42
 
43
- smallViewportBackground: colors?.contrasts?.grey100100,
44
- smallViewportBackgroundInverse: colors?.contrasts?.grey1111,
43
+ smallViewportBackground: colors?.backgroundBrandSecondary,
44
+ smallViewportBackgroundInverse: colors?.backgroundLight,
45
45
  smallViewportBottomBorder: 'none',
46
- smallViewportBottomBorderInverse: `${borders?.widthSmall} ${borders?.style} ${colors?.contrasts?.grey1214}`,
46
+ smallViewportBottomBorderInverse: `${borders?.widthSmall} ${borders?.style} ${colors?.borderMedium}`,
47
47
  smallViewportHeight: '3.5rem',
48
48
  smallViewportInlinePadding: `0.25rem`,
49
49
  smallViewportZIndex: stacking?.topmost + 1,