@instructure/ui-number-input 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 (6) hide show
  1. package/CHANGELOG.md +10 -2
  2. package/es/NumberInput/theme.js +13 -12
  3. package/lib/NumberInput/theme.js +13 -12
  4. package/package.json +15 -15
  5. package/src/NumberInput/theme.ts +12 -12
  6. 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-number-input
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/NumberInput/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, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10, _colors$contrasts11, _colors$contrasts12;
31
32
  const colors = theme.colors,
32
33
  spacing = theme.spacing,
33
34
  borders = theme.borders,
@@ -46,23 +47,23 @@ const generateComponentTheme = theme => {
46
47
  fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
47
48
  borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
48
49
  borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
49
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
50
+ borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey1214,
50
51
  borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
51
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
52
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
52
+ color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
53
+ background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
53
54
  padding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
54
55
  arrowsContainerWidth: '2rem',
55
- arrowsColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
56
- arrowsBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
57
- arrowsHoverBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundMedium,
58
- arrowsBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
59
- arrowsActiveBoxShadow: `inset 0 0 3px 1px ${colors === null || colors === void 0 ? void 0 : colors.borderMedium}`,
56
+ arrowsColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey125125,
57
+ arrowsBackgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey1111,
58
+ arrowsHoverBackgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey1214,
59
+ arrowsBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey1214,
60
+ arrowsActiveBoxShadow: `inset 0 0 3px 1px ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey1214}`,
60
61
  focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
61
62
  focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
62
- focusOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
63
- errorBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
64
- errorOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
65
- placeholderColor: colors === null || colors === void 0 ? void 0 : colors.textDark,
63
+ focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.blue4570,
64
+ errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.red4570,
65
+ errorOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.red4570,
66
+ placeholderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.grey4570,
66
67
  mediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
67
68
  mediumHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
68
69
  largeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
package/lib/NumberInput/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, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10, _colors$contrasts11, _colors$contrasts12;
37
38
  const colors = theme.colors,
38
39
  spacing = theme.spacing,
39
40
  borders = theme.borders,
@@ -52,23 +53,23 @@ const generateComponentTheme = theme => {
52
53
  fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
53
54
  borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
54
55
  borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
55
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
56
+ borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey1214,
56
57
  borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
57
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
58
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
58
+ color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
59
+ background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
59
60
  padding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
60
61
  arrowsContainerWidth: '2rem',
61
- arrowsColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
62
- arrowsBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
63
- arrowsHoverBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundMedium,
64
- arrowsBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
65
- arrowsActiveBoxShadow: `inset 0 0 3px 1px ${colors === null || colors === void 0 ? void 0 : colors.borderMedium}`,
62
+ arrowsColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey125125,
63
+ arrowsBackgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey1111,
64
+ arrowsHoverBackgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey1214,
65
+ arrowsBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey1214,
66
+ arrowsActiveBoxShadow: `inset 0 0 3px 1px ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey1214}`,
66
67
  focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
67
68
  focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
68
- focusOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
69
- errorBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
70
- errorOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
71
- placeholderColor: colors === null || colors === void 0 ? void 0 : colors.textDark,
69
+ focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.blue4570,
70
+ errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.red4570,
71
+ errorOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.red4570,
72
+ placeholderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.grey4570,
72
73
  mediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
73
74
  mediumHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
74
75
  largeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-number-input",
3
- "version": "9.5.2-snapshot-1",
3
+ "version": "10.0.0",
4
4
  "description": "A UI component library made by Instructure Inc.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "homepage": "https://instructure.github.io/instructure-ui/",
@@ -23,25 +23,25 @@
23
23
  "ts:check": "tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"
24
24
  },
25
25
  "devDependencies": {
26
- "@instructure/ui-axe-check": "9.5.2-snapshot-1",
27
- "@instructure/ui-babel-preset": "9.5.2-snapshot-1",
28
- "@instructure/ui-scripts": "9.5.2-snapshot-1",
29
- "@instructure/ui-test-locator": "9.5.2-snapshot-1",
30
- "@instructure/ui-test-utils": "9.5.2-snapshot-1",
31
- "@instructure/ui-themes": "9.5.2-snapshot-1",
26
+ "@instructure/ui-axe-check": "10.0.0",
27
+ "@instructure/ui-babel-preset": "10.0.0",
28
+ "@instructure/ui-scripts": "10.0.0",
29
+ "@instructure/ui-test-locator": "10.0.0",
30
+ "@instructure/ui-test-utils": "10.0.0",
31
+ "@instructure/ui-themes": "10.0.0",
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/emotion": "9.5.2-snapshot-1",
38
- "@instructure/shared-types": "9.5.2-snapshot-1",
39
- "@instructure/ui-form-field": "9.5.2-snapshot-1",
40
- "@instructure/ui-icons": "9.5.2-snapshot-1",
41
- "@instructure/ui-react-utils": "9.5.2-snapshot-1",
42
- "@instructure/ui-testable": "9.5.2-snapshot-1",
43
- "@instructure/ui-utils": "9.5.2-snapshot-1",
44
- "@instructure/uid": "9.5.2-snapshot-1",
37
+ "@instructure/emotion": "10.0.0",
38
+ "@instructure/shared-types": "10.0.0",
39
+ "@instructure/ui-form-field": "10.0.0",
40
+ "@instructure/ui-icons": "10.0.0",
41
+ "@instructure/ui-react-utils": "10.0.0",
42
+ "@instructure/ui-testable": "10.0.0",
43
+ "@instructure/ui-utils": "10.0.0",
44
+ "@instructure/uid": "10.0.0",
45
45
  "keycode": "^2",
46
46
  "prop-types": "^15.8.1"
47
47
  },
package/src/NumberInput/theme.ts CHANGED
@@ -47,29 +47,29 @@ const generateComponentTheme = (theme: Theme): NumberInputTheme => {
47
47
 
48
48
  borderWidth: borders?.widthSmall,
49
49
  borderStyle: borders?.style,
50
- borderColor: colors?.borderMedium,
50
+ borderColor: colors?.contrasts?.grey1214,
51
51
  borderRadius: borders?.radiusMedium,
52
52
 
53
- color: colors?.textDarkest,
54
- background: colors?.backgroundLightest,
53
+ color: colors?.contrasts?.grey125125,
54
+ background: colors?.contrasts?.white1010,
55
55
 
56
56
  padding: `0 ${spacing?.small}`,
57
57
 
58
58
  arrowsContainerWidth: '2rem',
59
- arrowsColor: colors?.textDarkest,
60
- arrowsBackgroundColor: colors?.backgroundLight,
61
- arrowsHoverBackgroundColor: colors?.backgroundMedium,
62
- arrowsBorderColor: colors?.borderMedium,
63
- arrowsActiveBoxShadow: `inset 0 0 3px 1px ${colors?.borderMedium}`,
59
+ arrowsColor: colors?.contrasts?.grey125125,
60
+ arrowsBackgroundColor: colors?.contrasts?.grey1111,
61
+ arrowsHoverBackgroundColor: colors?.contrasts?.grey1214,
62
+ arrowsBorderColor: colors?.contrasts?.grey1214,
63
+ arrowsActiveBoxShadow: `inset 0 0 3px 1px ${colors?.contrasts?.grey1214}`,
64
64
 
65
65
  focusOutlineWidth: borders?.widthMedium,
66
66
  focusOutlineStyle: borders?.style,
67
- focusOutlineColor: colors?.borderBrand,
67
+ focusOutlineColor: colors?.contrasts?.blue4570,
68
68
 
69
- errorBorderColor: colors?.borderDanger,
70
- errorOutlineColor: colors?.borderDanger,
69
+ errorBorderColor: colors?.contrasts?.red4570,
70
+ errorOutlineColor: colors?.contrasts?.red4570,
71
71
 
72
- placeholderColor: colors?.textDark,
72
+ placeholderColor: colors?.contrasts?.grey4570,
73
73
 
74
74
  mediumFontSize: typography?.fontSizeMedium,
75
75
  mediumHeight: forms?.inputHeightMedium,