@instructure/ui-checkbox 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/Checkbox/CheckboxFacade/theme.js +9 -10
  3. package/es/Checkbox/ToggleFacade/theme.js +11 -12
  4. package/lib/Checkbox/CheckboxFacade/theme.js +9 -10
  5. package/lib/Checkbox/ToggleFacade/theme.js +11 -12
  6. package/package.json +19 -19
  7. package/src/Checkbox/CheckboxFacade/theme.ts +9 -9
  8. package/src/Checkbox/ToggleFacade/theme.ts +11 -11
  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-checkbox
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-checkbox
17
17
 
18
18
 
19
19
 
package/es/Checkbox/CheckboxFacade/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;
32
31
  const colors = theme.colors,
33
32
  borders = theme.borders,
34
33
  spacing = theme.spacing,
@@ -45,21 +44,21 @@ const generateComponentTheme = theme => {
45
44
  }
46
45
  };
47
46
  const componentVariables = {
48
- color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
47
+ color: colors === null || colors === void 0 ? void 0 : colors.textLightest,
49
48
  borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
50
- borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey1214,
49
+ borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
51
50
  borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
52
- background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
51
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
53
52
  marginRight: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
54
53
  padding: spacing === null || spacing === void 0 ? void 0 : spacing.xxxSmall,
55
- checkedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey125125,
56
- checkedBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey125125,
57
- hoverBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey125125,
58
- focusBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue4570,
54
+ checkedBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
55
+ checkedBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest,
56
+ hoverBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest,
57
+ focusBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
59
58
  focusBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
60
59
  focusBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
61
- labelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey125125,
62
- checkedLabelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.grey125125,
60
+ labelColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
61
+ checkedLabelColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
63
62
  labelFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
64
63
  labelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
65
64
  labelLineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
package/es/Checkbox/ToggleFacade/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, _colors$contrasts11;
32
31
  const colors = theme.colors,
33
32
  borders = theme.borders,
34
33
  forms = theme.forms,
@@ -42,29 +41,29 @@ const generateComponentTheme = theme => {
42
41
  labelColor: theme['ic-brand-font-color-dark']
43
42
  },
44
43
  'canvas-high-contrast': {
45
- background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
46
- borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125
44
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
45
+ borderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest
47
46
  }
48
47
  };
49
48
  const componentVariables = {
50
- color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
51
- background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey1111,
52
- borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey1214,
49
+ color: colors === null || colors === void 0 ? void 0 : colors.textLightest,
50
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
51
+ borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
53
52
  borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
54
53
  borderRadius: '4rem',
55
54
  marginEnd: spacing === null || spacing === void 0 ? void 0 : spacing.small,
56
55
  marginStart: spacing === null || spacing === void 0 ? void 0 : spacing.small,
57
56
  marginVertical: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
58
- checkedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.green4570,
59
- uncheckedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey125125,
60
- checkedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.green4570,
61
- focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.blue4570,
57
+ checkedBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
58
+ uncheckedIconColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
59
+ checkedIconColor: colors === null || colors === void 0 ? void 0 : colors.textSuccess,
60
+ focusOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
62
61
  focusBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
63
62
  focusBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
64
- toggleBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.white1010,
63
+ toggleBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
65
64
  toggleShadow: shadows === null || shadows === void 0 ? void 0 : shadows.depth1,
66
65
  toggleSize: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
67
- labelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.grey125125,
66
+ labelColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
68
67
  labelFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
69
68
  labelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
70
69
  labelLineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
package/lib/Checkbox/CheckboxFacade/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;
38
37
  const colors = theme.colors,
39
38
  borders = theme.borders,
40
39
  spacing = theme.spacing,
@@ -51,21 +50,21 @@ const generateComponentTheme = theme => {
51
50
  }
52
51
  };
53
52
  const componentVariables = {
54
- color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
53
+ color: colors === null || colors === void 0 ? void 0 : colors.textLightest,
55
54
  borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
56
- borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey1214,
55
+ borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
57
56
  borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
58
- background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
57
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
59
58
  marginRight: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
60
59
  padding: spacing === null || spacing === void 0 ? void 0 : spacing.xxxSmall,
61
- checkedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey125125,
62
- checkedBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey125125,
63
- hoverBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey125125,
64
- focusBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue4570,
60
+ checkedBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
61
+ checkedBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest,
62
+ hoverBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest,
63
+ focusBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
65
64
  focusBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
66
65
  focusBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
67
- labelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey125125,
68
- checkedLabelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.grey125125,
66
+ labelColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
67
+ checkedLabelColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
69
68
  labelFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
70
69
  labelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
71
70
  labelLineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
package/lib/Checkbox/ToggleFacade/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, _colors$contrasts11;
38
37
  const colors = theme.colors,
39
38
  borders = theme.borders,
40
39
  forms = theme.forms,
@@ -48,29 +47,29 @@ const generateComponentTheme = theme => {
48
47
  labelColor: theme['ic-brand-font-color-dark']
49
48
  },
50
49
  'canvas-high-contrast': {
51
- background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
52
- borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125
50
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
51
+ borderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest
53
52
  }
54
53
  };
55
54
  const componentVariables = {
56
- color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
57
- background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey1111,
58
- borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey1214,
55
+ color: colors === null || colors === void 0 ? void 0 : colors.textLightest,
56
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
57
+ borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
59
58
  borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
60
59
  borderRadius: '4rem',
61
60
  marginEnd: spacing === null || spacing === void 0 ? void 0 : spacing.small,
62
61
  marginStart: spacing === null || spacing === void 0 ? void 0 : spacing.small,
63
62
  marginVertical: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
64
- checkedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.green4570,
65
- uncheckedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey125125,
66
- checkedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.green4570,
67
- focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.blue4570,
63
+ checkedBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
64
+ uncheckedIconColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
65
+ checkedIconColor: colors === null || colors === void 0 ? void 0 : colors.textSuccess,
66
+ focusOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
68
67
  focusBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
69
68
  focusBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
70
- toggleBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.white1010,
69
+ toggleBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
71
70
  toggleShadow: shadows === null || shadows === void 0 ? void 0 : shadows.depth1,
72
71
  toggleSize: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
73
- labelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.grey125125,
72
+ labelColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
74
73
  labelFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
75
74
  labelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
76
75
  labelLineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-checkbox",
3
- "version": "9.5.2-snapshot-7",
3
+ "version": "9.6.0",
4
4
  "description": " styled HTML input type='checkbox' component.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,28 +24,28 @@
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-dom-utils": "9.5.2-snapshot-7",
31
- "@instructure/ui-form-field": "9.5.2-snapshot-7",
32
- "@instructure/ui-icons": "9.5.2-snapshot-7",
33
- "@instructure/ui-prop-types": "9.5.2-snapshot-7",
34
- "@instructure/ui-react-utils": "9.5.2-snapshot-7",
35
- "@instructure/ui-svg-images": "9.5.2-snapshot-7",
36
- "@instructure/ui-testable": "9.5.2-snapshot-7",
37
- "@instructure/ui-utils": "9.5.2-snapshot-7",
38
- "@instructure/ui-view": "9.5.2-snapshot-7",
39
- "@instructure/uid": "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-dom-utils": "9.6.0",
31
+ "@instructure/ui-form-field": "9.6.0",
32
+ "@instructure/ui-icons": "9.6.0",
33
+ "@instructure/ui-prop-types": "9.6.0",
34
+ "@instructure/ui-react-utils": "9.6.0",
35
+ "@instructure/ui-svg-images": "9.6.0",
36
+ "@instructure/ui-testable": "9.6.0",
37
+ "@instructure/ui-utils": "9.6.0",
38
+ "@instructure/ui-view": "9.6.0",
39
+ "@instructure/uid": "9.6.0",
40
40
  "keycode": "^2",
41
41
  "prop-types": "^15.8.1"
42
42
  },
43
43
  "devDependencies": {
44
- "@instructure/ui-axe-check": "9.5.2-snapshot-7",
45
- "@instructure/ui-babel-preset": "9.5.2-snapshot-7",
46
- "@instructure/ui-color-utils": "9.5.2-snapshot-7",
47
- "@instructure/ui-test-utils": "9.5.2-snapshot-7",
48
- "@instructure/ui-themes": "9.5.2-snapshot-7",
44
+ "@instructure/ui-axe-check": "9.6.0",
45
+ "@instructure/ui-babel-preset": "9.6.0",
46
+ "@instructure/ui-color-utils": "9.6.0",
47
+ "@instructure/ui-test-utils": "9.6.0",
48
+ "@instructure/ui-themes": "9.6.0",
49
49
  "@testing-library/jest-dom": "^6.4.6",
50
50
  "@testing-library/react": "^15.0.7",
51
51
  "@testing-library/user-event": "^14.5.2",
package/src/Checkbox/CheckboxFacade/theme.ts CHANGED
@@ -45,25 +45,25 @@ const generateComponentTheme = (theme: Theme): CheckboxFacadeTheme => {
45
45
  }
46
46
 
47
47
  const componentVariables: CheckboxFacadeTheme = {
48
- color: colors?.contrasts?.white1010,
48
+ color: colors?.textLightest,
49
49
  borderWidth: borders?.widthSmall,
50
- borderColor: colors?.contrasts?.grey1214,
50
+ borderColor: colors?.borderMedium,
51
51
  borderRadius: borders?.radiusMedium,
52
- background: colors?.contrasts?.white1010,
52
+ background: colors?.backgroundLightest,
53
53
  marginRight: spacing?.xSmall,
54
54
  padding: spacing?.xxxSmall,
55
55
 
56
- checkedBackground: colors?.contrasts?.grey125125,
57
- checkedBorderColor: colors?.contrasts?.grey125125,
56
+ checkedBackground: colors?.backgroundDarkest,
57
+ checkedBorderColor: colors?.borderDarkest,
58
58
 
59
- hoverBorderColor: colors?.contrasts?.grey125125,
59
+ hoverBorderColor: colors?.borderDarkest,
60
60
 
61
- focusBorderColor: colors?.contrasts?.blue4570,
61
+ focusBorderColor: colors?.borderBrand,
62
62
  focusBorderWidth: borders?.widthMedium,
63
63
  focusBorderStyle: borders?.style,
64
64
 
65
- labelColor: colors?.contrasts?.grey125125,
66
- checkedLabelColor: colors?.contrasts?.grey125125,
65
+ labelColor: colors?.textDarkest,
66
+ checkedLabelColor: colors?.textDarkest,
67
67
  labelFontFamily: typography?.fontFamily,
68
68
  labelFontWeight: typography?.fontWeightNormal,
69
69
  labelLineHeight: typography?.lineHeightCondensed,
package/src/Checkbox/ToggleFacade/theme.ts CHANGED
@@ -47,30 +47,30 @@ const generateComponentTheme = (theme: Theme): ToggleFacadeTheme => {
47
47
  labelColor: theme['ic-brand-font-color-dark']
48
48
  },
49
49
  'canvas-high-contrast': {
50
- background: colors?.contrasts?.grey125125,
51
- borderColor: colors?.contrasts?.grey125125
50
+ background: colors?.backgroundDarkest,
51
+ borderColor: colors?.borderDarkest
52
52
  }
53
53
  }
54
54
 
55
55
  const componentVariables: ToggleFacadeTheme = {
56
- color: colors?.contrasts?.white1010,
57
- background: colors?.contrasts?.grey1111,
58
- borderColor: colors?.contrasts?.grey1214,
56
+ color: colors?.textLightest,
57
+ background: colors?.backgroundLight,
58
+ borderColor: colors?.borderMedium,
59
59
  borderWidth: borders?.widthSmall,
60
60
  borderRadius: '4rem',
61
61
  marginEnd: spacing?.small,
62
62
  marginStart: spacing?.small,
63
63
  marginVertical: spacing?.xSmall,
64
- checkedBackground: colors?.contrasts?.green4570,
65
- uncheckedIconColor: colors?.contrasts?.grey125125,
66
- checkedIconColor: colors?.contrasts?.green4570,
67
- focusOutlineColor: colors?.contrasts?.blue4570,
64
+ checkedBackground: colors?.backgroundSuccess,
65
+ uncheckedIconColor: colors?.textDarkest,
66
+ checkedIconColor: colors?.textSuccess,
67
+ focusOutlineColor: colors?.borderBrand,
68
68
  focusBorderWidth: borders?.widthMedium,
69
69
  focusBorderStyle: borders?.style,
70
- toggleBackground: colors?.contrasts?.white1010,
70
+ toggleBackground: colors?.backgroundLightest,
71
71
  toggleShadow: shadows?.depth1,
72
72
  toggleSize: forms?.inputHeightSmall,
73
- labelColor: colors?.contrasts?.grey125125,
73
+ labelColor: colors?.textDarkest,
74
74
  labelFontFamily: typography?.fontFamily,
75
75
  labelFontWeight: typography?.fontWeightNormal,
76
76
  labelLineHeight: typography?.lineHeightCondensed,