@instructure/ui-side-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 (9) hide show
  1. package/CHANGELOG.md +5 -5
  2. package/es/SideNavBar/SideNavBarItem/theme.js +10 -11
  3. package/es/SideNavBar/theme.js +5 -6
  4. package/lib/SideNavBar/SideNavBarItem/theme.js +10 -11
  5. package/lib/SideNavBar/theme.js +5 -6
  6. package/package.json +17 -17
  7. package/src/SideNavBar/SideNavBarItem/theme.ts +10 -10
  8. package/src/SideNavBar/theme.ts +5 -5
  9. 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-side-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-side-nav-bar
17
17
 
18
18
 
19
19
 
package/es/SideNavBar/SideNavBarItem/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, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10;
32
31
  const colors = theme.colors,
33
32
  spacing = theme.spacing,
34
33
  typography = theme.typography,
@@ -49,20 +48,20 @@ const generateComponentTheme = theme => {
49
48
  fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
50
49
  fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
51
50
  fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
52
- fontColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
51
+ fontColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
53
52
  iconSize: '1.625rem',
54
- iconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
53
+ iconColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
55
54
  lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight,
56
55
  backgroundColor: 'transparent',
57
56
  linkTextDecoration: 'none',
58
- hoverBackgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey125125,
59
- outerFocusOutline: `inset 0 0 0 0.125rem ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey4570}`,
60
- innerFocusOutline: `inset 0 0 0 0.25rem ${(_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.white1010}`,
61
- selectedFontColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.blue4570,
62
- selectedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue4570,
63
- selectedBackgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.white1010,
64
- selectedOuterFocusOutline: `inset 0 0 0 0.125rem ${(_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.white1010}`,
65
- selectedInnerFocusOutline: `inset 0 0 0 0.25rem ${(_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.blue4570}`,
57
+ hoverBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
58
+ outerFocusOutline: `inset 0 0 0 0.125rem ${colors === null || colors === void 0 ? void 0 : colors.borderDarkest}`,
59
+ innerFocusOutline: `inset 0 0 0 0.25rem ${colors === null || colors === void 0 ? void 0 : colors.borderLightest}`,
60
+ selectedFontColor: colors === null || colors === void 0 ? void 0 : colors.textBrand,
61
+ selectedIconColor: colors === null || colors === void 0 ? void 0 : colors.textBrand,
62
+ selectedBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
63
+ selectedOuterFocusOutline: `inset 0 0 0 0.125rem ${colors === null || colors === void 0 ? void 0 : colors.borderLightest}`,
64
+ selectedInnerFocusOutline: `inset 0 0 0 0.25rem ${colors === null || colors === void 0 ? void 0 : colors.borderBrand}`,
66
65
  contentPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall
67
66
  };
68
67
  return {
package/es/SideNavBar/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
  spacing = theme.spacing,
34
33
  borders = theme.borders,
@@ -42,15 +41,15 @@ const generateComponentTheme = theme => {
42
41
  }
43
42
  };
44
43
  const componentVariables = {
45
- fontColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
46
- backgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey100100,
44
+ fontColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
45
+ backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundBrandSecondary,
47
46
  width: '5.25rem',
48
47
  minimizedWidth: '3.375rem',
49
- fill: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
48
+ fill: colors === null || colors === void 0 ? void 0 : colors.textLightest,
50
49
  focusOutlineInnerWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
51
50
  focusOutlineOuterWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
52
- focusOutlineInnerColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue4570,
53
- focusOutlineOuterColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.white1010,
51
+ focusOutlineInnerColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
52
+ focusOutlineOuterColor: colors === null || colors === void 0 ? void 0 : colors.borderLightest,
54
53
  marginBottom: spacing === null || spacing === void 0 ? void 0 : spacing.small,
55
54
  toggleTransition: transitions === null || transitions === void 0 ? void 0 : transitions.duration
56
55
  };
package/lib/SideNavBar/SideNavBarItem/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, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10;
38
37
  const colors = theme.colors,
39
38
  spacing = theme.spacing,
40
39
  typography = theme.typography,
@@ -55,20 +54,20 @@ const generateComponentTheme = theme => {
55
54
  fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
56
55
  fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
57
56
  fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
58
- fontColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
57
+ fontColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
59
58
  iconSize: '1.625rem',
60
- iconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
59
+ iconColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
61
60
  lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight,
62
61
  backgroundColor: 'transparent',
63
62
  linkTextDecoration: 'none',
64
- hoverBackgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey125125,
65
- outerFocusOutline: `inset 0 0 0 0.125rem ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey4570}`,
66
- innerFocusOutline: `inset 0 0 0 0.25rem ${(_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.white1010}`,
67
- selectedFontColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.blue4570,
68
- selectedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue4570,
69
- selectedBackgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.white1010,
70
- selectedOuterFocusOutline: `inset 0 0 0 0.125rem ${(_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.white1010}`,
71
- selectedInnerFocusOutline: `inset 0 0 0 0.25rem ${(_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.blue4570}`,
63
+ hoverBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
64
+ outerFocusOutline: `inset 0 0 0 0.125rem ${colors === null || colors === void 0 ? void 0 : colors.borderDarkest}`,
65
+ innerFocusOutline: `inset 0 0 0 0.25rem ${colors === null || colors === void 0 ? void 0 : colors.borderLightest}`,
66
+ selectedFontColor: colors === null || colors === void 0 ? void 0 : colors.textBrand,
67
+ selectedIconColor: colors === null || colors === void 0 ? void 0 : colors.textBrand,
68
+ selectedBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
69
+ selectedOuterFocusOutline: `inset 0 0 0 0.125rem ${colors === null || colors === void 0 ? void 0 : colors.borderLightest}`,
70
+ selectedInnerFocusOutline: `inset 0 0 0 0.25rem ${colors === null || colors === void 0 ? void 0 : colors.borderBrand}`,
72
71
  contentPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall
73
72
  };
74
73
  return {
package/lib/SideNavBar/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
  spacing = theme.spacing,
40
39
  borders = theme.borders,
@@ -48,15 +47,15 @@ const generateComponentTheme = theme => {
48
47
  }
49
48
  };
50
49
  const componentVariables = {
51
- fontColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
52
- backgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey100100,
50
+ fontColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
51
+ backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundBrandSecondary,
53
52
  width: '5.25rem',
54
53
  minimizedWidth: '3.375rem',
55
- fill: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
54
+ fill: colors === null || colors === void 0 ? void 0 : colors.textLightest,
56
55
  focusOutlineInnerWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
57
56
  focusOutlineOuterWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
58
- focusOutlineInnerColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue4570,
59
- focusOutlineOuterColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.white1010,
57
+ focusOutlineInnerColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
58
+ focusOutlineOuterColor: colors === null || colors === void 0 ? void 0 : colors.borderLightest,
60
59
  marginBottom: spacing === null || spacing === void 0 ? void 0 : spacing.small,
61
60
  toggleTransition: transitions === null || transitions === void 0 ? void 0 : transitions.duration
62
61
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-side-nav-bar",
3
- "version": "9.5.2-snapshot-7",
3
+ "version": "9.6.0",
4
4
  "description": "Main and application level navigational components",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,11 +23,11 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-axe-check": "9.5.2-snapshot-7",
27
- "@instructure/ui-babel-preset": "9.5.2-snapshot-7",
28
- "@instructure/ui-color-utils": "9.5.2-snapshot-7",
29
- "@instructure/ui-test-utils": "9.5.2-snapshot-7",
30
- "@instructure/ui-themes": "9.5.2-snapshot-7",
26
+ "@instructure/ui-axe-check": "9.6.0",
27
+ "@instructure/ui-babel-preset": "9.6.0",
28
+ "@instructure/ui-color-utils": "9.6.0",
29
+ "@instructure/ui-test-utils": "9.6.0",
30
+ "@instructure/ui-themes": "9.6.0",
31
31
  "@testing-library/jest-dom": "^6.4.6",
32
32
  "@testing-library/react": "^15.0.7",
33
33
  "@testing-library/user-event": "^14.5.2",
@@ -35,17 +35,17 @@
35
35
  },
36
36
  "dependencies": {
37
37
  "@babel/runtime": "^7.24.5",
38
- "@instructure/debounce": "9.5.2-snapshot-7",
39
- "@instructure/emotion": "9.5.2-snapshot-7",
40
- "@instructure/shared-types": "9.5.2-snapshot-7",
41
- "@instructure/ui-a11y-content": "9.5.2-snapshot-7",
42
- "@instructure/ui-a11y-utils": "9.5.2-snapshot-7",
43
- "@instructure/ui-badge": "9.5.2-snapshot-7",
44
- "@instructure/ui-icons": "9.5.2-snapshot-7",
45
- "@instructure/ui-prop-types": "9.5.2-snapshot-7",
46
- "@instructure/ui-react-utils": "9.5.2-snapshot-7",
47
- "@instructure/ui-testable": "9.5.2-snapshot-7",
48
- "@instructure/ui-tooltip": "9.5.2-snapshot-7",
38
+ "@instructure/debounce": "9.6.0",
39
+ "@instructure/emotion": "9.6.0",
40
+ "@instructure/shared-types": "9.6.0",
41
+ "@instructure/ui-a11y-content": "9.6.0",
42
+ "@instructure/ui-a11y-utils": "9.6.0",
43
+ "@instructure/ui-badge": "9.6.0",
44
+ "@instructure/ui-icons": "9.6.0",
45
+ "@instructure/ui-prop-types": "9.6.0",
46
+ "@instructure/ui-react-utils": "9.6.0",
47
+ "@instructure/ui-testable": "9.6.0",
48
+ "@instructure/ui-tooltip": "9.6.0",
49
49
  "prop-types": "^15.8.1"
50
50
  },
51
51
  "peerDependencies": {
package/src/SideNavBar/SideNavBarItem/theme.ts CHANGED
@@ -52,22 +52,22 @@ const generateComponentTheme = (theme: Theme): SideNavBarItemTheme => {
52
52
  fontFamily: typography?.fontFamily,
53
53
  fontWeight: typography?.fontWeightNormal,
54
54
 
55
- fontColor: colors?.contrasts?.white1010,
55
+ fontColor: colors?.textLightest,
56
56
  iconSize: '1.625rem',
57
- iconColor: colors?.contrasts?.white1010,
57
+ iconColor: colors?.textLightest,
58
58
  lineHeight: typography?.lineHeight,
59
59
  backgroundColor: 'transparent',
60
60
  linkTextDecoration: 'none',
61
61
 
62
- hoverBackgroundColor: colors?.contrasts?.grey125125,
63
- outerFocusOutline: `inset 0 0 0 0.125rem ${colors?.contrasts?.grey4570}`,
64
- innerFocusOutline: `inset 0 0 0 0.25rem ${colors.contrasts?.white1010}`,
62
+ hoverBackgroundColor: colors?.backgroundDarkest,
63
+ outerFocusOutline: `inset 0 0 0 0.125rem ${colors?.borderDarkest}`,
64
+ innerFocusOutline: `inset 0 0 0 0.25rem ${colors?.borderLightest}`,
65
65
 
66
- selectedFontColor: colors?.contrasts?.blue4570,
67
- selectedIconColor: colors?.contrasts?.blue4570,
68
- selectedBackgroundColor: colors?.contrasts?.white1010,
69
- selectedOuterFocusOutline: `inset 0 0 0 0.125rem ${colors.contrasts?.white1010}`,
70
- selectedInnerFocusOutline: `inset 0 0 0 0.25rem ${colors.contrasts?.blue4570}`,
66
+ selectedFontColor: colors?.textBrand,
67
+ selectedIconColor: colors?.textBrand,
68
+ selectedBackgroundColor: colors?.backgroundLightest,
69
+ selectedOuterFocusOutline: `inset 0 0 0 0.125rem ${colors?.borderLightest}`,
70
+ selectedInnerFocusOutline: `inset 0 0 0 0.25rem ${colors?.borderBrand}`,
71
71
 
72
72
  contentPadding: spacing?.xxSmall
73
73
  }
package/src/SideNavBar/theme.ts CHANGED
@@ -42,16 +42,16 @@ const generateComponentTheme = (theme: Theme): SideNavBarTheme => {
42
42
  }
43
43
 
44
44
  const componentVariables: SideNavBarTheme = {
45
- fontColor: colors?.contrasts?.white1010,
46
- backgroundColor: colors?.contrasts?.grey100100,
45
+ fontColor: colors?.textLightest,
46
+ backgroundColor: colors?.backgroundBrandSecondary,
47
47
  width: '5.25rem',
48
48
  minimizedWidth: '3.375rem',
49
- fill: colors?.contrasts?.white1010,
49
+ fill: colors?.textLightest,
50
50
 
51
51
  focusOutlineInnerWidth: borders?.widthMedium,
52
52
  focusOutlineOuterWidth: borders?.widthSmall,
53
- focusOutlineInnerColor: colors?.contrasts?.blue4570,
54
- focusOutlineOuterColor: colors?.contrasts?.white1010,
53
+ focusOutlineInnerColor: colors?.borderBrand,
54
+ focusOutlineOuterColor: colors?.borderLightest,
55
55
 
56
56
  marginBottom: spacing?.small,
57
57
  toggleTransition: transitions?.duration