@instructure/ui-calendar 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 (12) hide show
  1. package/CHANGELOG.md +10 -2
  2. package/es/Calendar/Day/theme.js +8 -7
  3. package/es/Calendar/__new-tests__/Calendar.test.js +1 -1
  4. package/es/Calendar/theme.js +3 -2
  5. package/lib/Calendar/Day/theme.js +8 -7
  6. package/lib/Calendar/__new-tests__/Calendar.test.js +1 -1
  7. package/lib/Calendar/theme.js +3 -2
  8. package/package.json +20 -20
  9. package/src/Calendar/Day/theme.ts +7 -7
  10. package/src/Calendar/__new-tests__/Calendar.test.tsx +1 -1
  11. package/src/Calendar/theme.ts +2 -2
  12. package/tsconfig.build.tsbuildinfo +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-calendar
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/Calendar/Day/theme.js CHANGED
@@ -28,6 +28,7 @@
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;
31
32
  const borders = theme.borders,
32
33
  colors = theme.colors,
33
34
  typography = theme.typography,
@@ -41,18 +42,18 @@ const generateComponentTheme = theme => {
41
42
  }
42
43
  };
43
44
  const componentVariables = {
44
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
45
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
45
+ color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
46
+ background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
46
47
  fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
47
48
  padding: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
48
49
  height: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
49
50
  minWidth: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
50
- outsideMonthColor: colors === null || colors === void 0 ? void 0 : colors.textDark,
51
- selectedBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
52
- selectedColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
51
+ outsideMonthColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey4570,
52
+ selectedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.green4570,
53
+ selectedColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.white1010,
53
54
  selectedBorderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
54
- todayBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
55
- todayColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
55
+ todayBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.blue4570,
56
+ todayColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.white1010,
56
57
  todayBorderRadius: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall
57
58
  };
58
59
  return {
package/es/Calendar/__new-tests__/Calendar.test.js CHANGED
@@ -81,7 +81,7 @@ describe('<Calendar />', () => {
81
81
  expect(selectedDay).toBeDefined();
82
82
  if (selectedDay) {
83
83
  var _window$getComputedSt;
84
- expect((_window$getComputedSt = window.getComputedStyle(selectedDay)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.background).toBe('rgb(11, 135, 75)');
84
+ expect((_window$getComputedSt = window.getComputedStyle(selectedDay)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.background).toBe('rgb(3, 137, 61)');
85
85
  }
86
86
  });
87
87
  });
package/es/Calendar/theme.js CHANGED
@@ -28,6 +28,7 @@
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;
31
32
  const colors = theme.colors,
32
33
  typography = theme.typography,
33
34
  spacing = theme.spacing,
@@ -41,8 +42,8 @@ const generateComponentTheme = theme => {
41
42
  fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
42
43
  fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
43
44
  fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
44
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
45
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
45
+ color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
46
+ background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
46
47
  navMargin: spacing === null || spacing === void 0 ? void 0 : spacing.small,
47
48
  navWithYearMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
48
49
  yearPickerMargin: spacing === null || spacing === void 0 ? void 0 : spacing.mediumSmall,
package/lib/Calendar/Day/theme.js CHANGED
@@ -34,6 +34,7 @@ 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;
37
38
  const borders = theme.borders,
38
39
  colors = theme.colors,
39
40
  typography = theme.typography,
@@ -47,18 +48,18 @@ const generateComponentTheme = theme => {
47
48
  }
48
49
  };
49
50
  const componentVariables = {
50
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
51
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
51
+ color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
52
+ background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
52
53
  fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
53
54
  padding: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
54
55
  height: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
55
56
  minWidth: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
56
- outsideMonthColor: colors === null || colors === void 0 ? void 0 : colors.textDark,
57
- selectedBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
58
- selectedColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
57
+ outsideMonthColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey4570,
58
+ selectedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.green4570,
59
+ selectedColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.white1010,
59
60
  selectedBorderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
60
- todayBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
61
- todayColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
61
+ todayBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.blue4570,
62
+ todayColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.white1010,
62
63
  todayBorderRadius: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall
63
64
  };
64
65
  return {
package/lib/Calendar/__new-tests__/Calendar.test.js CHANGED
@@ -84,7 +84,7 @@ describe('<Calendar />', () => {
84
84
  expect(selectedDay).toBeDefined();
85
85
  if (selectedDay) {
86
86
  var _window$getComputedSt;
87
- expect((_window$getComputedSt = window.getComputedStyle(selectedDay)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.background).toBe('rgb(11, 135, 75)');
87
+ expect((_window$getComputedSt = window.getComputedStyle(selectedDay)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.background).toBe('rgb(3, 137, 61)');
88
88
  }
89
89
  });
90
90
  });
package/lib/Calendar/theme.js CHANGED
@@ -34,6 +34,7 @@ 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;
37
38
  const colors = theme.colors,
38
39
  typography = theme.typography,
39
40
  spacing = theme.spacing,
@@ -47,8 +48,8 @@ const generateComponentTheme = theme => {
47
48
  fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
48
49
  fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
49
50
  fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
50
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
51
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
51
+ color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
52
+ background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
52
53
  navMargin: spacing === null || spacing === void 0 ? void 0 : spacing.small,
53
54
  navWithYearMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
54
55
  yearPickerMargin: spacing === null || spacing === void 0 ? void 0 : spacing.mediumSmall,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-calendar",
3
- "version": "9.5.2-snapshot-1",
3
+ "version": "10.0.0",
4
4
  "description": "A calendar component.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,31 +23,31 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-babel-preset": "9.5.2-snapshot-1",
27
- "@instructure/ui-color-utils": "9.5.2-snapshot-1",
28
- "@instructure/ui-test-locator": "9.5.2-snapshot-1",
29
- "@instructure/ui-test-utils": "9.5.2-snapshot-1",
30
- "@instructure/ui-themes": "9.5.2-snapshot-1",
26
+ "@instructure/ui-babel-preset": "10.0.0",
27
+ "@instructure/ui-color-utils": "10.0.0",
28
+ "@instructure/ui-test-locator": "10.0.0",
29
+ "@instructure/ui-test-utils": "10.0.0",
30
+ "@instructure/ui-themes": "10.0.0",
31
31
  "@testing-library/jest-dom": "^6.4.6",
32
32
  "@testing-library/react": "^15.0.7",
33
33
  "vitest": "^2.0.2"
34
34
  },
35
35
  "dependencies": {
36
36
  "@babel/runtime": "^7.24.5",
37
- "@instructure/console": "9.5.2-snapshot-1",
38
- "@instructure/emotion": "9.5.2-snapshot-1",
39
- "@instructure/shared-types": "9.5.2-snapshot-1",
40
- "@instructure/ui-a11y-content": "9.5.2-snapshot-1",
41
- "@instructure/ui-buttons": "9.5.2-snapshot-1",
42
- "@instructure/ui-i18n": "9.5.2-snapshot-1",
43
- "@instructure/ui-icons": "9.5.2-snapshot-1",
44
- "@instructure/ui-prop-types": "9.5.2-snapshot-1",
45
- "@instructure/ui-react-utils": "9.5.2-snapshot-1",
46
- "@instructure/ui-simple-select": "9.5.2-snapshot-1",
47
- "@instructure/ui-testable": "9.5.2-snapshot-1",
48
- "@instructure/ui-utils": "9.5.2-snapshot-1",
49
- "@instructure/ui-view": "9.5.2-snapshot-1",
50
- "@instructure/uid": "9.5.2-snapshot-1",
37
+ "@instructure/console": "10.0.0",
38
+ "@instructure/emotion": "10.0.0",
39
+ "@instructure/shared-types": "10.0.0",
40
+ "@instructure/ui-a11y-content": "10.0.0",
41
+ "@instructure/ui-buttons": "10.0.0",
42
+ "@instructure/ui-i18n": "10.0.0",
43
+ "@instructure/ui-icons": "10.0.0",
44
+ "@instructure/ui-prop-types": "10.0.0",
45
+ "@instructure/ui-react-utils": "10.0.0",
46
+ "@instructure/ui-simple-select": "10.0.0",
47
+ "@instructure/ui-testable": "10.0.0",
48
+ "@instructure/ui-utils": "10.0.0",
49
+ "@instructure/ui-view": "10.0.0",
50
+ "@instructure/uid": "10.0.0",
51
51
  "prop-types": "^15.8.1"
52
52
  },
53
53
  "peerDependencies": {
package/src/Calendar/Day/theme.ts CHANGED
@@ -41,21 +41,21 @@ const generateComponentTheme = (theme: Theme): CalendarDayTheme => {
41
41
  }
42
42
 
43
43
  const componentVariables: CalendarDayTheme = {
44
- color: colors?.textDarkest,
45
- background: colors?.backgroundLightest,
44
+ color: colors?.contrasts?.grey125125,
45
+ background: colors?.contrasts?.white1010,
46
46
  fontSize: typography?.fontSizeMedium,
47
47
  padding: spacing?.xxSmall,
48
48
  height: forms?.inputHeightSmall,
49
49
  minWidth: forms?.inputHeightSmall,
50
50
 
51
- outsideMonthColor: colors?.textDark,
51
+ outsideMonthColor: colors?.contrasts?.grey4570,
52
52
 
53
- selectedBackground: colors?.backgroundSuccess,
54
- selectedColor: colors?.textLightest,
53
+ selectedBackground: colors?.contrasts?.green4570,
54
+ selectedColor: colors?.contrasts?.white1010,
55
55
  selectedBorderRadius: borders?.radiusMedium,
56
56
 
57
- todayBackground: colors?.backgroundBrand,
58
- todayColor: colors?.textLightest,
57
+ todayBackground: colors?.contrasts?.blue4570,
58
+ todayColor: colors?.contrasts?.white1010,
59
59
  todayBorderRadius: forms?.inputHeightSmall
60
60
  }
61
61
 
package/src/Calendar/__new-tests__/Calendar.test.tsx CHANGED
@@ -94,7 +94,7 @@ describe('<Calendar />', () => {
94
94
  expect(selectedDay).toBeDefined()
95
95
  if (selectedDay) {
96
96
  expect(window.getComputedStyle(selectedDay)?.background).toBe(
97
- 'rgb(11, 135, 75)'
97
+ 'rgb(3, 137, 61)'
98
98
  )
99
99
  }
100
100
  })
package/src/Calendar/theme.ts CHANGED
@@ -44,8 +44,8 @@ const generateComponentTheme = (theme: Theme): CalendarTheme => {
44
44
  fontFamily: typography?.fontFamily,
45
45
  fontWeight: typography?.fontWeightNormal,
46
46
 
47
- color: colors?.textDarkest,
48
- background: colors?.backgroundLightest,
47
+ color: colors?.contrasts?.grey125125,
48
+ background: colors?.contrasts?.white1010,
49
49
 
50
50
  navMargin: spacing?.small,
51
51
  navWithYearMargin: spacing?.xSmall,