@instructure/ui-checkbox 10.5.1-snapshot-5 → 10.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 (14) hide show
  1. package/CHANGELOG.md +2 -1
  2. package/es/Checkbox/CheckboxFacade/theme.js +1 -1
  3. package/es/Checkbox/ToggleFacade/styles.js +4 -5
  4. package/es/Checkbox/ToggleFacade/theme.js +6 -4
  5. package/lib/Checkbox/CheckboxFacade/theme.js +1 -1
  6. package/lib/Checkbox/ToggleFacade/styles.js +4 -5
  7. package/lib/Checkbox/ToggleFacade/theme.js +6 -4
  8. package/package.json +19 -19
  9. package/src/Checkbox/CheckboxFacade/theme.ts +1 -1
  10. package/src/Checkbox/ToggleFacade/styles.ts +8 -5
  11. package/src/Checkbox/ToggleFacade/theme.ts +5 -3
  12. package/tsconfig.build.tsbuildinfo +1 -1
  13. package/types/Checkbox/ToggleFacade/styles.d.ts.map +1 -1
  14. package/types/Checkbox/ToggleFacade/theme.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,11 +3,12 @@
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
- ## [10.5.1-snapshot-5](https://github.com/instructure/instructure-ui/compare/v10.5.0...v10.5.1-snapshot-5) (2024-11-14)
6
+ # [10.6.0](https://github.com/instructure/instructure-ui/compare/v10.5.0...v10.6.0) (2024-11-18)
7
7
 
8
8
 
9
9
  ### Bug Fixes
10
10
 
11
+ * **many:** adjust border colors to meet a11y contrast standards ([2f47e06](https://github.com/instructure/instructure-ui/commit/2f47e066f7107c67e37ce8b7aff483586cf7a6b7))
11
12
  * **many:** fix regression where form elements without label got misaligned ([139f7f1](https://github.com/instructure/instructure-ui/commit/139f7f130cd7e8372af869a13cfd50cd6a97fd85))
12
13
 
13
14
 
package/es/Checkbox/CheckboxFacade/theme.js CHANGED
@@ -47,7 +47,7 @@ const generateComponentTheme = theme => {
47
47
  const componentVariables = {
48
48
  color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
49
49
  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,
50
+ borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey3045,
51
51
  errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$ui = colors.ui) === null || _colors$ui === void 0 ? void 0 : _colors$ui.textError,
52
52
  borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
53
53
  background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
package/es/Checkbox/ToggleFacade/styles.js CHANGED
@@ -153,13 +153,12 @@ const generateStyle = (componentTheme, props) => {
153
153
  '&::before': {
154
154
  content: '""',
155
155
  position: 'absolute',
156
- top: componentTheme.borderWidth,
157
- left: componentTheme.borderWidth,
158
- height: `calc(100% - (${componentTheme.borderWidth} * 2))`,
159
- width: `calc(100% - (${componentTheme.borderWidth} * 2))`,
156
+ height: `calc(100% - (${componentTheme.borderWidth} * 6))`,
157
+ width: `calc(100% - (${componentTheme.borderWidth} * 6))`,
160
158
  background: componentTheme.toggleBackground,
161
159
  boxShadow: componentTheme.toggleShadow,
162
- borderRadius: '100%'
160
+ borderRadius: '100%',
161
+ border: `${componentTheme.borderWidth} solid ${checked ? componentTheme.checkedIconBorderColor : componentTheme.uncheckedIconBorderColor}`
163
162
  }
164
163
  },
165
164
  iconSVG: {
package/es/Checkbox/ToggleFacade/theme.js CHANGED
@@ -28,7 +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$ui, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10, _colors$contrasts11;
31
+ var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$ui, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10, _colors$contrasts11, _colors$contrasts12, _colors$contrasts13;
32
32
  const colors = theme.colors,
33
33
  borders = theme.borders,
34
34
  forms = theme.forms,
@@ -50,7 +50,7 @@ const generateComponentTheme = theme => {
50
50
  color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
51
51
  errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$ui = colors.ui) === null || _colors$ui === void 0 ? void 0 : _colors$ui.textError,
52
52
  background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey1111,
53
- borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey1214,
53
+ borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey3045,
54
54
  borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
55
55
  borderRadius: '4rem',
56
56
  marginEnd: spacing === null || spacing === void 0 ? void 0 : spacing.small,
@@ -58,7 +58,7 @@ const generateComponentTheme = theme => {
58
58
  marginVertical: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
59
59
  checkedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.green4570,
60
60
  uncheckedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey125125,
61
- checkedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.green4570,
61
+ checkedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.green5782,
62
62
  focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.blue4570,
63
63
  focusBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
64
64
  focusBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
@@ -71,7 +71,9 @@ const generateComponentTheme = theme => {
71
71
  labelLineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
72
72
  labelFontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
73
73
  labelFontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
74
- labelFontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge
74
+ labelFontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
75
+ uncheckedIconBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.grey5782,
76
+ checkedIconBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts13 = colors.contrasts) === null || _colors$contrasts13 === void 0 ? void 0 : _colors$contrasts13.green5782
75
77
  };
76
78
  return {
77
79
  ...componentVariables,
package/lib/Checkbox/CheckboxFacade/theme.js CHANGED
@@ -53,7 +53,7 @@ const generateComponentTheme = theme => {
53
53
  const componentVariables = {
54
54
  color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
55
55
  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,
56
+ borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey3045,
57
57
  errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$ui = colors.ui) === null || _colors$ui === void 0 ? void 0 : _colors$ui.textError,
58
58
  borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
59
59
  background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
package/lib/Checkbox/ToggleFacade/styles.js CHANGED
@@ -159,13 +159,12 @@ const generateStyle = (componentTheme, props) => {
159
159
  '&::before': {
160
160
  content: '""',
161
161
  position: 'absolute',
162
- top: componentTheme.borderWidth,
163
- left: componentTheme.borderWidth,
164
- height: `calc(100% - (${componentTheme.borderWidth} * 2))`,
165
- width: `calc(100% - (${componentTheme.borderWidth} * 2))`,
162
+ height: `calc(100% - (${componentTheme.borderWidth} * 6))`,
163
+ width: `calc(100% - (${componentTheme.borderWidth} * 6))`,
166
164
  background: componentTheme.toggleBackground,
167
165
  boxShadow: componentTheme.toggleShadow,
168
- borderRadius: '100%'
166
+ borderRadius: '100%',
167
+ border: `${componentTheme.borderWidth} solid ${checked ? componentTheme.checkedIconBorderColor : componentTheme.uncheckedIconBorderColor}`
169
168
  }
170
169
  },
171
170
  iconSVG: {
package/lib/Checkbox/ToggleFacade/theme.js CHANGED
@@ -34,7 +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$ui, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10, _colors$contrasts11;
37
+ var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$ui, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10, _colors$contrasts11, _colors$contrasts12, _colors$contrasts13;
38
38
  const colors = theme.colors,
39
39
  borders = theme.borders,
40
40
  forms = theme.forms,
@@ -56,7 +56,7 @@ const generateComponentTheme = theme => {
56
56
  color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
57
57
  errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$ui = colors.ui) === null || _colors$ui === void 0 ? void 0 : _colors$ui.textError,
58
58
  background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey1111,
59
- borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey1214,
59
+ borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey3045,
60
60
  borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
61
61
  borderRadius: '4rem',
62
62
  marginEnd: spacing === null || spacing === void 0 ? void 0 : spacing.small,
@@ -64,7 +64,7 @@ const generateComponentTheme = theme => {
64
64
  marginVertical: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
65
65
  checkedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.green4570,
66
66
  uncheckedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey125125,
67
- checkedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.green4570,
67
+ checkedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.green5782,
68
68
  focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.blue4570,
69
69
  focusBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
70
70
  focusBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
@@ -77,7 +77,9 @@ const generateComponentTheme = theme => {
77
77
  labelLineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
78
78
  labelFontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
79
79
  labelFontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
80
- labelFontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge
80
+ labelFontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
81
+ uncheckedIconBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.grey5782,
82
+ checkedIconBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts13 = colors.contrasts) === null || _colors$contrasts13 === void 0 ? void 0 : _colors$contrasts13.green5782
81
83
  };
82
84
  return {
83
85
  ...componentVariables,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-checkbox",
3
- "version": "10.5.1-snapshot-5",
3
+ "version": "10.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.25.6",
27
- "@instructure/console": "10.5.1-snapshot-5",
28
- "@instructure/emotion": "10.5.1-snapshot-5",
29
- "@instructure/shared-types": "10.5.1-snapshot-5",
30
- "@instructure/ui-dom-utils": "10.5.1-snapshot-5",
31
- "@instructure/ui-form-field": "10.5.1-snapshot-5",
32
- "@instructure/ui-icons": "10.5.1-snapshot-5",
33
- "@instructure/ui-prop-types": "10.5.1-snapshot-5",
34
- "@instructure/ui-react-utils": "10.5.1-snapshot-5",
35
- "@instructure/ui-svg-images": "10.5.1-snapshot-5",
36
- "@instructure/ui-testable": "10.5.1-snapshot-5",
37
- "@instructure/ui-utils": "10.5.1-snapshot-5",
38
- "@instructure/ui-view": "10.5.1-snapshot-5",
39
- "@instructure/uid": "10.5.1-snapshot-5",
27
+ "@instructure/console": "10.6.0",
28
+ "@instructure/emotion": "10.6.0",
29
+ "@instructure/shared-types": "10.6.0",
30
+ "@instructure/ui-dom-utils": "10.6.0",
31
+ "@instructure/ui-form-field": "10.6.0",
32
+ "@instructure/ui-icons": "10.6.0",
33
+ "@instructure/ui-prop-types": "10.6.0",
34
+ "@instructure/ui-react-utils": "10.6.0",
35
+ "@instructure/ui-svg-images": "10.6.0",
36
+ "@instructure/ui-testable": "10.6.0",
37
+ "@instructure/ui-utils": "10.6.0",
38
+ "@instructure/ui-view": "10.6.0",
39
+ "@instructure/uid": "10.6.0",
40
40
  "keycode": "^2",
41
41
  "prop-types": "^15.8.1"
42
42
  },
43
43
  "devDependencies": {
44
- "@instructure/ui-axe-check": "10.5.1-snapshot-5",
45
- "@instructure/ui-babel-preset": "10.5.1-snapshot-5",
46
- "@instructure/ui-color-utils": "10.5.1-snapshot-5",
47
- "@instructure/ui-test-utils": "10.5.1-snapshot-5",
48
- "@instructure/ui-themes": "10.5.1-snapshot-5",
44
+ "@instructure/ui-axe-check": "10.6.0",
45
+ "@instructure/ui-babel-preset": "10.6.0",
46
+ "@instructure/ui-color-utils": "10.6.0",
47
+ "@instructure/ui-test-utils": "10.6.0",
48
+ "@instructure/ui-themes": "10.6.0",
49
49
  "@testing-library/jest-dom": "^6.4.6",
50
50
  "@testing-library/react": "^16.0.1",
51
51
  "@testing-library/user-event": "^14.5.2",
package/src/Checkbox/CheckboxFacade/theme.ts CHANGED
@@ -47,7 +47,7 @@ const generateComponentTheme = (theme: Theme): CheckboxFacadeTheme => {
47
47
  const componentVariables: CheckboxFacadeTheme = {
48
48
  color: colors?.contrasts?.white1010,
49
49
  borderWidth: borders?.widthSmall,
50
- borderColor: colors?.contrasts?.grey1214,
50
+ borderColor: colors?.contrasts?.grey3045,
51
51
  errorBorderColor: colors?.ui?.textError,
52
52
  borderRadius: borders?.radiusMedium,
53
53
  background: colors?.contrasts?.white1010,
package/src/Checkbox/ToggleFacade/styles.ts CHANGED
@@ -157,13 +157,16 @@ const generateStyle = (
157
157
  '&::before': {
158
158
  content: '""',
159
159
  position: 'absolute',
160
- top: componentTheme.borderWidth,
161
- left: componentTheme.borderWidth,
162
- height: `calc(100% - (${componentTheme.borderWidth} * 2))`,
163
- width: `calc(100% - (${componentTheme.borderWidth} * 2))`,
160
+ height: `calc(100% - (${componentTheme.borderWidth} * 6))`,
161
+ width: `calc(100% - (${componentTheme.borderWidth} * 6))`,
164
162
  background: componentTheme.toggleBackground,
165
163
  boxShadow: componentTheme.toggleShadow,
166
- borderRadius: '100%'
164
+ borderRadius: '100%',
165
+ border: `${componentTheme.borderWidth} solid ${
166
+ checked
167
+ ? componentTheme.checkedIconBorderColor
168
+ : componentTheme.uncheckedIconBorderColor
169
+ }`
167
170
  }
168
171
  },
169
172
 
package/src/Checkbox/ToggleFacade/theme.ts CHANGED
@@ -56,7 +56,7 @@ const generateComponentTheme = (theme: Theme): ToggleFacadeTheme => {
56
56
  color: colors?.contrasts?.white1010,
57
57
  errorBorderColor: colors?.ui?.textError,
58
58
  background: colors?.contrasts?.grey1111,
59
- borderColor: colors?.contrasts?.grey1214,
59
+ borderColor: colors?.contrasts?.grey3045,
60
60
  borderWidth: borders?.widthSmall,
61
61
  borderRadius: '4rem',
62
62
  marginEnd: spacing?.small,
@@ -64,7 +64,7 @@ const generateComponentTheme = (theme: Theme): ToggleFacadeTheme => {
64
64
  marginVertical: spacing?.xSmall,
65
65
  checkedBackground: colors?.contrasts?.green4570,
66
66
  uncheckedIconColor: colors?.contrasts?.grey125125,
67
- checkedIconColor: colors?.contrasts?.green4570,
67
+ checkedIconColor: colors?.contrasts?.green5782,
68
68
  focusOutlineColor: colors?.contrasts?.blue4570,
69
69
  focusBorderWidth: borders?.widthMedium,
70
70
  focusBorderStyle: borders?.style,
@@ -77,7 +77,9 @@ const generateComponentTheme = (theme: Theme): ToggleFacadeTheme => {
77
77
  labelLineHeight: typography?.lineHeightCondensed,
78
78
  labelFontSizeSmall: typography?.fontSizeSmall,
79
79
  labelFontSizeMedium: typography?.fontSizeMedium,
80
- labelFontSizeLarge: typography?.fontSizeLarge
80
+ labelFontSizeLarge: typography?.fontSizeLarge,
81
+ uncheckedIconBorderColor: colors?.contrasts?.grey5782,
82
+ checkedIconBorderColor: colors?.contrasts?.green5782
81
83
  }
82
84
 
83
85
  return {