@instructure/ui-buttons 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 (6) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/BaseButton/theme.js +7 -7
  3. package/lib/BaseButton/theme.js +7 -7
  4. package/package.json +20 -20
  5. package/src/BaseButton/theme.ts +7 -7
  6. package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +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
- **Note:** Version bump only for package @instructure/ui-buttons
8
+
9
+ ### Bug Fixes
10
+
11
+ * **many:** adjust border colors to meet a11y contrast standards ([2f47e06](https://github.com/instructure/instructure-ui/commit/2f47e066f7107c67e37ce8b7aff483586cf7a6b7))
9
12
 
10
13
 
11
14
 
package/es/BaseButton/theme.js CHANGED
@@ -41,15 +41,15 @@ const generateComponentTheme = theme => {
41
41
  const themeSpecificStyle = {
42
42
  canvas: {
43
43
  primaryColor: theme['ic-brand-button--primary-text'],
44
- primaryBorderColor: theme['ic-brand-button--primary-bgd'],
44
+ primaryBorderColor: darken(theme['ic-brand-button--primary-bgd']),
45
45
  primaryBackground: theme['ic-brand-button--primary-bgd'],
46
46
  primaryHoverBackground: darken(theme['ic-brand-button--primary-bgd']),
47
47
  primaryActiveBackground: darken(theme['ic-brand-button--primary-bgd']),
48
48
  primaryActiveBoxShadow: `${activeShadow} ${theme['ic-brand-button--primary-bgd']}`,
49
- primaryGhostColor: theme['ic-brand-button--primary-bgd'],
50
- primaryGhostBorderColor: theme['ic-brand-button--primary-bgd'],
49
+ primaryGhostColor: darken(theme['ic-brand-button--primary-bgd']),
50
+ primaryGhostBorderColor: darken(theme['ic-brand-button--primary-bgd']),
51
51
  primaryGhostBackground: 'transparent',
52
- primaryGhostHoverBackground: alpha(theme['ic-brand-button--primary-bgd'], 10),
52
+ primaryGhostHoverBackground: alpha(darken(theme['ic-brand-button--primary-bgd']), 10),
53
53
  primaryGhostActiveBackground: 'transparent',
54
54
  primaryGhostActiveBoxShadow: `${activeShadow} ${alpha(theme['ic-brand-button--primary-bgd'], 28)}`
55
55
  }
@@ -91,10 +91,10 @@ const generateComponentTheme = theme => {
91
91
  primaryHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue5782,
92
92
  primaryActiveBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.blue5782,
93
93
  primaryActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.white1010}`,
94
- primaryGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue4570,
94
+ primaryGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue5782,
95
95
  primaryGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.blue4570,
96
96
  primaryGhostBackground: 'transparent',
97
- primaryGhostHoverBackground: alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.blue4570, 10),
97
+ primaryGhostHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.blue1212,
98
98
  primaryGhostActiveBackground: 'transparent',
99
99
  primaryGhostActiveBoxShadow: `${activeShadow} ${alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.blue1212, 28)}`,
100
100
  secondaryColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.grey125125,
@@ -106,7 +106,7 @@ const generateComponentTheme = theme => {
106
106
  secondaryGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts17 = colors.contrasts) === null || _colors$contrasts17 === void 0 ? void 0 : _colors$contrasts17.grey125125,
107
107
  secondaryGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts18 = colors.contrasts) === null || _colors$contrasts18 === void 0 ? void 0 : _colors$contrasts18.grey125125,
108
108
  secondaryGhostBackground: 'transparent',
109
- secondaryGhostHoverBackground: alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts19 = colors.contrasts) === null || _colors$contrasts19 === void 0 ? void 0 : _colors$contrasts19.grey125125, 10),
109
+ secondaryGhostHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts19 = colors.contrasts) === null || _colors$contrasts19 === void 0 ? void 0 : _colors$contrasts19.grey1111,
110
110
  secondaryGhostActiveBackground: 'transparent',
111
111
  secondaryGhostActiveBoxShadow: `${activeShadow} ${alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts20 = colors.contrasts) === null || _colors$contrasts20 === void 0 ? void 0 : _colors$contrasts20.grey125125, 28)}`,
112
112
  successColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts21 = colors.contrasts) === null || _colors$contrasts21 === void 0 ? void 0 : _colors$contrasts21.white1010,
package/lib/BaseButton/theme.js CHANGED
@@ -48,15 +48,15 @@ const generateComponentTheme = theme => {
48
48
  const themeSpecificStyle = {
49
49
  canvas: {
50
50
  primaryColor: theme['ic-brand-button--primary-text'],
51
- primaryBorderColor: theme['ic-brand-button--primary-bgd'],
51
+ primaryBorderColor: (0, _darken.darken)(theme['ic-brand-button--primary-bgd']),
52
52
  primaryBackground: theme['ic-brand-button--primary-bgd'],
53
53
  primaryHoverBackground: (0, _darken.darken)(theme['ic-brand-button--primary-bgd']),
54
54
  primaryActiveBackground: (0, _darken.darken)(theme['ic-brand-button--primary-bgd']),
55
55
  primaryActiveBoxShadow: `${activeShadow} ${theme['ic-brand-button--primary-bgd']}`,
56
- primaryGhostColor: theme['ic-brand-button--primary-bgd'],
57
- primaryGhostBorderColor: theme['ic-brand-button--primary-bgd'],
56
+ primaryGhostColor: (0, _darken.darken)(theme['ic-brand-button--primary-bgd']),
57
+ primaryGhostBorderColor: (0, _darken.darken)(theme['ic-brand-button--primary-bgd']),
58
58
  primaryGhostBackground: 'transparent',
59
- primaryGhostHoverBackground: (0, _alpha.alpha)(theme['ic-brand-button--primary-bgd'], 10),
59
+ primaryGhostHoverBackground: (0, _alpha.alpha)((0, _darken.darken)(theme['ic-brand-button--primary-bgd']), 10),
60
60
  primaryGhostActiveBackground: 'transparent',
61
61
  primaryGhostActiveBoxShadow: `${activeShadow} ${(0, _alpha.alpha)(theme['ic-brand-button--primary-bgd'], 28)}`
62
62
  }
@@ -98,10 +98,10 @@ const generateComponentTheme = theme => {
98
98
  primaryHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue5782,
99
99
  primaryActiveBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.blue5782,
100
100
  primaryActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.white1010}`,
101
- primaryGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue4570,
101
+ primaryGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue5782,
102
102
  primaryGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.blue4570,
103
103
  primaryGhostBackground: 'transparent',
104
- primaryGhostHoverBackground: (0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.blue4570, 10),
104
+ primaryGhostHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.blue1212,
105
105
  primaryGhostActiveBackground: 'transparent',
106
106
  primaryGhostActiveBoxShadow: `${activeShadow} ${(0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.blue1212, 28)}`,
107
107
  secondaryColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.grey125125,
@@ -113,7 +113,7 @@ const generateComponentTheme = theme => {
113
113
  secondaryGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts17 = colors.contrasts) === null || _colors$contrasts17 === void 0 ? void 0 : _colors$contrasts17.grey125125,
114
114
  secondaryGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts18 = colors.contrasts) === null || _colors$contrasts18 === void 0 ? void 0 : _colors$contrasts18.grey125125,
115
115
  secondaryGhostBackground: 'transparent',
116
- secondaryGhostHoverBackground: (0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts19 = colors.contrasts) === null || _colors$contrasts19 === void 0 ? void 0 : _colors$contrasts19.grey125125, 10),
116
+ secondaryGhostHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts19 = colors.contrasts) === null || _colors$contrasts19 === void 0 ? void 0 : _colors$contrasts19.grey1111,
117
117
  secondaryGhostActiveBackground: 'transparent',
118
118
  secondaryGhostActiveBoxShadow: `${activeShadow} ${(0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts20 = colors.contrasts) === null || _colors$contrasts20 === void 0 ? void 0 : _colors$contrasts20.grey125125, 28)}`,
119
119
  successColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts21 = colors.contrasts) === null || _colors$contrasts21 === void 0 ? void 0 : _colors$contrasts21.white1010,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-buttons",
3
- "version": "10.5.1-snapshot-5",
3
+ "version": "10.6.0",
4
4
  "description": "Accessible button components",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,10 +23,10 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-axe-check": "10.5.1-snapshot-5",
27
- "@instructure/ui-babel-preset": "10.5.1-snapshot-5",
28
- "@instructure/ui-test-utils": "10.5.1-snapshot-5",
29
- "@instructure/ui-themes": "10.5.1-snapshot-5",
26
+ "@instructure/ui-axe-check": "10.6.0",
27
+ "@instructure/ui-babel-preset": "10.6.0",
28
+ "@instructure/ui-test-utils": "10.6.0",
29
+ "@instructure/ui-themes": "10.6.0",
30
30
  "@testing-library/jest-dom": "^6.4.6",
31
31
  "@testing-library/react": "^16.0.1",
32
32
  "@testing-library/user-event": "^14.5.2",
@@ -34,21 +34,21 @@
34
34
  },
35
35
  "dependencies": {
36
36
  "@babel/runtime": "^7.25.6",
37
- "@instructure/console": "10.5.1-snapshot-5",
38
- "@instructure/emotion": "10.5.1-snapshot-5",
39
- "@instructure/shared-types": "10.5.1-snapshot-5",
40
- "@instructure/ui-a11y-content": "10.5.1-snapshot-5",
41
- "@instructure/ui-a11y-utils": "10.5.1-snapshot-5",
42
- "@instructure/ui-color-utils": "10.5.1-snapshot-5",
43
- "@instructure/ui-dom-utils": "10.5.1-snapshot-5",
44
- "@instructure/ui-icons": "10.5.1-snapshot-5",
45
- "@instructure/ui-position": "10.5.1-snapshot-5",
46
- "@instructure/ui-prop-types": "10.5.1-snapshot-5",
47
- "@instructure/ui-react-utils": "10.5.1-snapshot-5",
48
- "@instructure/ui-testable": "10.5.1-snapshot-5",
49
- "@instructure/ui-tooltip": "10.5.1-snapshot-5",
50
- "@instructure/ui-utils": "10.5.1-snapshot-5",
51
- "@instructure/ui-view": "10.5.1-snapshot-5",
37
+ "@instructure/console": "10.6.0",
38
+ "@instructure/emotion": "10.6.0",
39
+ "@instructure/shared-types": "10.6.0",
40
+ "@instructure/ui-a11y-content": "10.6.0",
41
+ "@instructure/ui-a11y-utils": "10.6.0",
42
+ "@instructure/ui-color-utils": "10.6.0",
43
+ "@instructure/ui-dom-utils": "10.6.0",
44
+ "@instructure/ui-icons": "10.6.0",
45
+ "@instructure/ui-position": "10.6.0",
46
+ "@instructure/ui-prop-types": "10.6.0",
47
+ "@instructure/ui-react-utils": "10.6.0",
48
+ "@instructure/ui-testable": "10.6.0",
49
+ "@instructure/ui-tooltip": "10.6.0",
50
+ "@instructure/ui-utils": "10.6.0",
51
+ "@instructure/ui-view": "10.6.0",
52
52
  "keycode": "^2",
53
53
  "prop-types": "^15.8.1"
54
54
  },
package/src/BaseButton/theme.ts CHANGED
@@ -39,18 +39,18 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => {
39
39
  const themeSpecificStyle: ThemeSpecificStyle<BaseButtonTheme> = {
40
40
  canvas: {
41
41
  primaryColor: theme['ic-brand-button--primary-text']!,
42
- primaryBorderColor: theme['ic-brand-button--primary-bgd']!,
42
+ primaryBorderColor: darken(theme['ic-brand-button--primary-bgd']!),
43
43
  primaryBackground: theme['ic-brand-button--primary-bgd']!,
44
44
  primaryHoverBackground: darken(theme['ic-brand-button--primary-bgd']!),
45
45
  primaryActiveBackground: darken(theme['ic-brand-button--primary-bgd']!),
46
46
  primaryActiveBoxShadow: `${activeShadow} ${theme[
47
47
  'ic-brand-button--primary-bgd'
48
48
  ]!}`,
49
- primaryGhostColor: theme['ic-brand-button--primary-bgd']!,
50
- primaryGhostBorderColor: theme['ic-brand-button--primary-bgd']!,
49
+ primaryGhostColor: darken(theme['ic-brand-button--primary-bgd']!),
50
+ primaryGhostBorderColor: darken(theme['ic-brand-button--primary-bgd']!),
51
51
  primaryGhostBackground: 'transparent',
52
52
  primaryGhostHoverBackground: alpha(
53
- theme['ic-brand-button--primary-bgd']!,
53
+ darken(theme['ic-brand-button--primary-bgd']!),
54
54
  10
55
55
  ),
56
56
  primaryGhostActiveBackground: 'transparent',
@@ -104,10 +104,10 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => {
104
104
  primaryHoverBackground: colors?.contrasts?.blue5782,
105
105
  primaryActiveBackground: colors?.contrasts?.blue5782,
106
106
  primaryActiveBoxShadow: `${activeShadow} ${colors?.contrasts?.white1010}`,
107
- primaryGhostColor: colors?.contrasts?.blue4570,
107
+ primaryGhostColor: colors?.contrasts?.blue5782,
108
108
  primaryGhostBorderColor: colors?.contrasts?.blue4570,
109
109
  primaryGhostBackground: 'transparent',
110
- primaryGhostHoverBackground: alpha(colors?.contrasts?.blue4570, 10),
110
+ primaryGhostHoverBackground: colors?.contrasts?.blue1212,
111
111
  primaryGhostActiveBackground: 'transparent',
112
112
  primaryGhostActiveBoxShadow: `${activeShadow} ${alpha(
113
113
  colors?.contrasts?.blue1212,
@@ -123,7 +123,7 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => {
123
123
  secondaryGhostColor: colors?.contrasts?.grey125125,
124
124
  secondaryGhostBorderColor: colors?.contrasts?.grey125125,
125
125
  secondaryGhostBackground: 'transparent',
126
- secondaryGhostHoverBackground: alpha(colors?.contrasts?.grey125125, 10),
126
+ secondaryGhostHoverBackground: colors?.contrasts?.grey1111,
127
127
  secondaryGhostActiveBackground: 'transparent',
128
128
  secondaryGhostActiveBoxShadow: `${activeShadow} ${alpha(
129
129
  colors?.contrasts?.grey125125,