@instructure/ui-buttons 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.
- package/CHANGELOG.md +4 -9
- package/es/BaseButton/theme.js +95 -64
- package/lib/BaseButton/theme.js +95 -63
- package/package.json +20 -20
- package/src/BaseButton/theme.ts +145 -81
- package/tsconfig.build.tsbuildinfo +1 -1
- package/types/BaseButton/theme.d.ts.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,22 +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
|
-
|
|
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-buttons
|
|
8
9
|
|
|
9
|
-
### Bug Fixes
|
|
10
|
-
|
|
11
|
-
* **ui-buttons:** fix hover enabled when a component is disabled ([f55dc3e](https://github.com/instructure/instructure-ui/commit/f55dc3e81036c25842460869ec03952e14b5ef2b))
|
|
12
10
|
|
|
13
11
|
|
|
14
|
-
### Features
|
|
15
12
|
|
|
16
|
-
* **many:** rewrite color system ([1e5809e](https://github.com/instructure/instructure-ui/commit/1e5809e28dee8c2a71703a429609b8d2f95d76e6))
|
|
17
13
|
|
|
14
|
+
## [9.5.2](https://github.com/instructure/instructure-ui/compare/v9.5.1...v9.5.2) (2024-08-05)
|
|
18
15
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
* **many:** Breaks color overrides in certain cases
|
|
16
|
+
**Note:** Version bump only for package @instructure/ui-buttons
|
|
22
17
|
|
|
23
18
|
|
|
24
19
|
|
package/es/BaseButton/theme.js
CHANGED
|
@@ -22,8 +22,29 @@
|
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
24
|
|
|
25
|
-
import { alpha } from '@instructure/ui-color-utils';
|
|
25
|
+
import { alpha, darken } from '@instructure/ui-color-utils';
|
|
26
26
|
const activeShadow = 'inset 0 0 0.1875rem 0.0625rem';
|
|
27
|
+
const generateButtonThemeVars = ({
|
|
28
|
+
style,
|
|
29
|
+
textColor,
|
|
30
|
+
ghostTextColor,
|
|
31
|
+
backgroundColor,
|
|
32
|
+
borderColor,
|
|
33
|
+
ghostBorderColor = borderColor
|
|
34
|
+
}) => ({
|
|
35
|
+
[`${style}Color`]: textColor,
|
|
36
|
+
[`${style}BorderColor`]: darken(borderColor, 10),
|
|
37
|
+
[`${style}Background`]: backgroundColor,
|
|
38
|
+
[`${style}HoverBackground`]: darken(backgroundColor, 10),
|
|
39
|
+
[`${style}ActiveBackground`]: darken(backgroundColor, 10),
|
|
40
|
+
[`${style}ActiveBoxShadow`]: `${activeShadow} ${darken(borderColor, 20)}`,
|
|
41
|
+
[`${style}GhostColor`]: ghostTextColor,
|
|
42
|
+
[`${style}GhostBorderColor`]: ghostBorderColor,
|
|
43
|
+
[`${style}GhostBackground`]: 'transparent',
|
|
44
|
+
[`${style}GhostHoverBackground`]: alpha(ghostTextColor, 10),
|
|
45
|
+
[`${style}GhostActiveBackground`]: 'transparent',
|
|
46
|
+
[`${style}GhostActiveBoxShadow`]: `${activeShadow} ${alpha(ghostBorderColor, 28)}`
|
|
47
|
+
});
|
|
27
48
|
|
|
28
49
|
/**
|
|
29
50
|
* Generates the theme object for the component from the theme and provided additional information
|
|
@@ -31,12 +52,38 @@ const activeShadow = 'inset 0 0 0.1875rem 0.0625rem';
|
|
|
31
52
|
* @return {Object} The final theme object with the overrides and component variables
|
|
32
53
|
*/
|
|
33
54
|
const generateComponentTheme = theme => {
|
|
34
|
-
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, _colors$contrasts13, _colors$contrasts14, _colors$contrasts15, _colors$contrasts16, _colors$contrasts17, _colors$contrasts18, _colors$contrasts19, _colors$contrasts20, _colors$contrasts21, _colors$contrasts22, _colors$contrasts23, _colors$contrasts24, _colors$contrasts25, _colors$contrasts26, _colors$contrasts27, _colors$contrasts28, _colors$contrasts29, _colors$contrasts30, _colors$contrasts31, _colors$contrasts32, _colors$contrasts33, _colors$contrasts34, _colors$contrasts35, _colors$contrasts36, _colors$contrasts37, _colors$contrasts38, _colors$contrasts39, _colors$contrasts40, _colors$contrasts41, _colors$contrasts42, _colors$contrasts43, _colors$contrasts44, _colors$contrasts45, _colors$contrasts46, _colors$contrasts47, _colors$contrasts48, _colors$contrasts49, _colors$contrasts50;
|
|
35
55
|
const borders = theme.borders,
|
|
36
56
|
colors = theme.colors,
|
|
37
57
|
forms = theme.forms,
|
|
38
58
|
spacing = theme.spacing,
|
|
39
|
-
typography = theme.typography
|
|
59
|
+
typography = theme.typography,
|
|
60
|
+
themeName = theme.key;
|
|
61
|
+
const themeSpecificStyle = {
|
|
62
|
+
canvas: {
|
|
63
|
+
...generateButtonThemeVars({
|
|
64
|
+
style: 'primary',
|
|
65
|
+
backgroundColor: theme['ic-brand-button--primary-bgd'],
|
|
66
|
+
borderColor: theme['ic-brand-button--primary-bgd'],
|
|
67
|
+
textColor: theme['ic-brand-button--primary-text'],
|
|
68
|
+
ghostTextColor: theme['ic-brand-button--primary-bgd']
|
|
69
|
+
}),
|
|
70
|
+
primaryGhostHoverBackground: alpha(theme['ic-brand-button--primary-bgd'], 10)
|
|
71
|
+
},
|
|
72
|
+
'canvas-high-contrast': {
|
|
73
|
+
secondaryBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
|
|
74
|
+
primaryInverseBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium
|
|
75
|
+
},
|
|
76
|
+
instructure: {
|
|
77
|
+
borderRadius: '999em',
|
|
78
|
+
smallPaddingTop: '0.5rem',
|
|
79
|
+
smallPaddingBottom: '0.4375rem',
|
|
80
|
+
mediumPaddingTop: '0.75rem',
|
|
81
|
+
mediumPaddingBottom: '0.75rem',
|
|
82
|
+
largePaddingTop: '1rem',
|
|
83
|
+
largePaddingBottom: '1rem',
|
|
84
|
+
largeFontSize: '1.125rem'
|
|
85
|
+
}
|
|
86
|
+
};
|
|
40
87
|
const componentVariables = {
|
|
41
88
|
transform: 'none',
|
|
42
89
|
hoverTransform: 'none',
|
|
@@ -68,69 +115,53 @@ const generateComponentTheme = theme => {
|
|
|
68
115
|
iconSizeLarge: '1.625rem',
|
|
69
116
|
iconTextGap: spacing.xSmall,
|
|
70
117
|
iconTextGapCondensed: spacing.xxSmall,
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
dangerGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts38 = colors.contrasts) === null || _colors$contrasts38 === void 0 ? void 0 : _colors$contrasts38.red4570,
|
|
115
|
-
dangerGhostBackground: 'transparent',
|
|
116
|
-
dangerGhostHoverBackground: alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts39 = colors.contrasts) === null || _colors$contrasts39 === void 0 ? void 0 : _colors$contrasts39.red4570, 10),
|
|
117
|
-
dangerGhostActiveBackground: 'transparent',
|
|
118
|
-
dangerGhostActiveBoxShadow: `${activeShadow} ${alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts40 = colors.contrasts) === null || _colors$contrasts40 === void 0 ? void 0 : _colors$contrasts40.red4570, 28)}`,
|
|
119
|
-
primaryInverseColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts41 = colors.contrasts) === null || _colors$contrasts41 === void 0 ? void 0 : _colors$contrasts41.grey125125,
|
|
120
|
-
primaryInverseBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts42 = colors.contrasts) === null || _colors$contrasts42 === void 0 ? void 0 : _colors$contrasts42.grey1214,
|
|
121
|
-
primaryInverseBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts43 = colors.contrasts) === null || _colors$contrasts43 === void 0 ? void 0 : _colors$contrasts43.white1010,
|
|
122
|
-
primaryInverseHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts44 = colors.contrasts) === null || _colors$contrasts44 === void 0 ? void 0 : _colors$contrasts44.grey1111,
|
|
123
|
-
primaryInverseActiveBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts45 = colors.contrasts) === null || _colors$contrasts45 === void 0 ? void 0 : _colors$contrasts45.white1010,
|
|
124
|
-
primaryInverseActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts46 = colors.contrasts) === null || _colors$contrasts46 === void 0 ? void 0 : _colors$contrasts46.white1010}`,
|
|
125
|
-
primaryInverseGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts47 = colors.contrasts) === null || _colors$contrasts47 === void 0 ? void 0 : _colors$contrasts47.white1010,
|
|
126
|
-
primaryInverseGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts48 = colors.contrasts) === null || _colors$contrasts48 === void 0 ? void 0 : _colors$contrasts48.white1010,
|
|
127
|
-
primaryInverseGhostBackground: 'transparent',
|
|
128
|
-
primaryInverseGhostHoverBackground: alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts49 = colors.contrasts) === null || _colors$contrasts49 === void 0 ? void 0 : _colors$contrasts49.white1010, 10),
|
|
129
|
-
primaryInverseGhostActiveBackground: 'transparent',
|
|
130
|
-
primaryInverseGhostActiveBoxShadow: `${activeShadow} ${alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts50 = colors.contrasts) === null || _colors$contrasts50 === void 0 ? void 0 : _colors$contrasts50.white1010, 28)}`
|
|
118
|
+
...generateButtonThemeVars({
|
|
119
|
+
style: 'primary',
|
|
120
|
+
backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
|
|
121
|
+
borderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
|
|
122
|
+
textColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
|
|
123
|
+
ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textBrand
|
|
124
|
+
}),
|
|
125
|
+
...generateButtonThemeVars({
|
|
126
|
+
style: 'secondary',
|
|
127
|
+
backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
|
|
128
|
+
borderColor: colors === null || colors === void 0 ? void 0 : colors.borderLight,
|
|
129
|
+
ghostBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest,
|
|
130
|
+
textColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
|
|
131
|
+
ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest
|
|
132
|
+
}),
|
|
133
|
+
...generateButtonThemeVars({
|
|
134
|
+
style: 'success',
|
|
135
|
+
backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
|
|
136
|
+
borderColor: colors === null || colors === void 0 ? void 0 : colors.borderSuccess,
|
|
137
|
+
textColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
|
|
138
|
+
ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textSuccess
|
|
139
|
+
}),
|
|
140
|
+
...generateButtonThemeVars({
|
|
141
|
+
style: 'danger',
|
|
142
|
+
backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
|
|
143
|
+
borderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
|
|
144
|
+
textColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
|
|
145
|
+
ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textDanger
|
|
146
|
+
}),
|
|
147
|
+
...generateButtonThemeVars({
|
|
148
|
+
style: 'primaryInverse',
|
|
149
|
+
backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
150
|
+
borderColor: colors === null || colors === void 0 ? void 0 : colors.borderLightest,
|
|
151
|
+
textColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
|
|
152
|
+
ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textLightest
|
|
153
|
+
}),
|
|
154
|
+
// Overrides for primary-inverse to match what was previously the `light` button variant
|
|
155
|
+
primaryInverseBorderColor: darken(colors === null || colors === void 0 ? void 0 : colors.borderLight, 10),
|
|
156
|
+
primaryInverseHoverBackground: darken(colors === null || colors === void 0 ? void 0 : colors.backgroundLightest, 5),
|
|
157
|
+
primaryInverseActiveBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
158
|
+
primaryInverseActiveBoxShadow: `${activeShadow} ${darken(colors === null || colors === void 0 ? void 0 : colors.borderLightest, 25)}`,
|
|
159
|
+
// Overrides for ghost hover states to ensure correct color contrast for a11y
|
|
160
|
+
successGhostHoverBackground: alpha(colors === null || colors === void 0 ? void 0 : colors.textSuccess, 1)
|
|
131
161
|
};
|
|
132
162
|
return {
|
|
133
|
-
...componentVariables
|
|
163
|
+
...componentVariables,
|
|
164
|
+
...themeSpecificStyle[themeName]
|
|
134
165
|
};
|
|
135
166
|
};
|
|
136
167
|
export default generateComponentTheme;
|
package/lib/BaseButton/theme.js
CHANGED
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _alpha = require("@instructure/ui-color-utils/lib/alpha.js");
|
|
8
|
+
var _darken = require("@instructure/ui-color-utils/lib/darken.js");
|
|
8
9
|
/*
|
|
9
10
|
* The MIT License (MIT)
|
|
10
11
|
*
|
|
@@ -30,6 +31,27 @@ var _alpha = require("@instructure/ui-color-utils/lib/alpha.js");
|
|
|
30
31
|
*/
|
|
31
32
|
|
|
32
33
|
const activeShadow = 'inset 0 0 0.1875rem 0.0625rem';
|
|
34
|
+
const generateButtonThemeVars = ({
|
|
35
|
+
style,
|
|
36
|
+
textColor,
|
|
37
|
+
ghostTextColor,
|
|
38
|
+
backgroundColor,
|
|
39
|
+
borderColor,
|
|
40
|
+
ghostBorderColor = borderColor
|
|
41
|
+
}) => ({
|
|
42
|
+
[`${style}Color`]: textColor,
|
|
43
|
+
[`${style}BorderColor`]: (0, _darken.darken)(borderColor, 10),
|
|
44
|
+
[`${style}Background`]: backgroundColor,
|
|
45
|
+
[`${style}HoverBackground`]: (0, _darken.darken)(backgroundColor, 10),
|
|
46
|
+
[`${style}ActiveBackground`]: (0, _darken.darken)(backgroundColor, 10),
|
|
47
|
+
[`${style}ActiveBoxShadow`]: `${activeShadow} ${(0, _darken.darken)(borderColor, 20)}`,
|
|
48
|
+
[`${style}GhostColor`]: ghostTextColor,
|
|
49
|
+
[`${style}GhostBorderColor`]: ghostBorderColor,
|
|
50
|
+
[`${style}GhostBackground`]: 'transparent',
|
|
51
|
+
[`${style}GhostHoverBackground`]: (0, _alpha.alpha)(ghostTextColor, 10),
|
|
52
|
+
[`${style}GhostActiveBackground`]: 'transparent',
|
|
53
|
+
[`${style}GhostActiveBoxShadow`]: `${activeShadow} ${(0, _alpha.alpha)(ghostBorderColor, 28)}`
|
|
54
|
+
});
|
|
33
55
|
|
|
34
56
|
/**
|
|
35
57
|
* Generates the theme object for the component from the theme and provided additional information
|
|
@@ -37,12 +59,38 @@ const activeShadow = 'inset 0 0 0.1875rem 0.0625rem';
|
|
|
37
59
|
* @return {Object} The final theme object with the overrides and component variables
|
|
38
60
|
*/
|
|
39
61
|
const generateComponentTheme = theme => {
|
|
40
|
-
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, _colors$contrasts13, _colors$contrasts14, _colors$contrasts15, _colors$contrasts16, _colors$contrasts17, _colors$contrasts18, _colors$contrasts19, _colors$contrasts20, _colors$contrasts21, _colors$contrasts22, _colors$contrasts23, _colors$contrasts24, _colors$contrasts25, _colors$contrasts26, _colors$contrasts27, _colors$contrasts28, _colors$contrasts29, _colors$contrasts30, _colors$contrasts31, _colors$contrasts32, _colors$contrasts33, _colors$contrasts34, _colors$contrasts35, _colors$contrasts36, _colors$contrasts37, _colors$contrasts38, _colors$contrasts39, _colors$contrasts40, _colors$contrasts41, _colors$contrasts42, _colors$contrasts43, _colors$contrasts44, _colors$contrasts45, _colors$contrasts46, _colors$contrasts47, _colors$contrasts48, _colors$contrasts49, _colors$contrasts50;
|
|
41
62
|
const borders = theme.borders,
|
|
42
63
|
colors = theme.colors,
|
|
43
64
|
forms = theme.forms,
|
|
44
65
|
spacing = theme.spacing,
|
|
45
|
-
typography = theme.typography
|
|
66
|
+
typography = theme.typography,
|
|
67
|
+
themeName = theme.key;
|
|
68
|
+
const themeSpecificStyle = {
|
|
69
|
+
canvas: {
|
|
70
|
+
...generateButtonThemeVars({
|
|
71
|
+
style: 'primary',
|
|
72
|
+
backgroundColor: theme['ic-brand-button--primary-bgd'],
|
|
73
|
+
borderColor: theme['ic-brand-button--primary-bgd'],
|
|
74
|
+
textColor: theme['ic-brand-button--primary-text'],
|
|
75
|
+
ghostTextColor: theme['ic-brand-button--primary-bgd']
|
|
76
|
+
}),
|
|
77
|
+
primaryGhostHoverBackground: (0, _alpha.alpha)(theme['ic-brand-button--primary-bgd'], 10)
|
|
78
|
+
},
|
|
79
|
+
'canvas-high-contrast': {
|
|
80
|
+
secondaryBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
|
|
81
|
+
primaryInverseBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium
|
|
82
|
+
},
|
|
83
|
+
instructure: {
|
|
84
|
+
borderRadius: '999em',
|
|
85
|
+
smallPaddingTop: '0.5rem',
|
|
86
|
+
smallPaddingBottom: '0.4375rem',
|
|
87
|
+
mediumPaddingTop: '0.75rem',
|
|
88
|
+
mediumPaddingBottom: '0.75rem',
|
|
89
|
+
largePaddingTop: '1rem',
|
|
90
|
+
largePaddingBottom: '1rem',
|
|
91
|
+
largeFontSize: '1.125rem'
|
|
92
|
+
}
|
|
93
|
+
};
|
|
46
94
|
const componentVariables = {
|
|
47
95
|
transform: 'none',
|
|
48
96
|
hoverTransform: 'none',
|
|
@@ -74,69 +122,53 @@ const generateComponentTheme = theme => {
|
|
|
74
122
|
iconSizeLarge: '1.625rem',
|
|
75
123
|
iconTextGap: spacing.xSmall,
|
|
76
124
|
iconTextGapCondensed: spacing.xxSmall,
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
dangerGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts38 = colors.contrasts) === null || _colors$contrasts38 === void 0 ? void 0 : _colors$contrasts38.red4570,
|
|
121
|
-
dangerGhostBackground: 'transparent',
|
|
122
|
-
dangerGhostHoverBackground: (0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts39 = colors.contrasts) === null || _colors$contrasts39 === void 0 ? void 0 : _colors$contrasts39.red4570, 10),
|
|
123
|
-
dangerGhostActiveBackground: 'transparent',
|
|
124
|
-
dangerGhostActiveBoxShadow: `${activeShadow} ${(0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts40 = colors.contrasts) === null || _colors$contrasts40 === void 0 ? void 0 : _colors$contrasts40.red4570, 28)}`,
|
|
125
|
-
primaryInverseColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts41 = colors.contrasts) === null || _colors$contrasts41 === void 0 ? void 0 : _colors$contrasts41.grey125125,
|
|
126
|
-
primaryInverseBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts42 = colors.contrasts) === null || _colors$contrasts42 === void 0 ? void 0 : _colors$contrasts42.grey1214,
|
|
127
|
-
primaryInverseBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts43 = colors.contrasts) === null || _colors$contrasts43 === void 0 ? void 0 : _colors$contrasts43.white1010,
|
|
128
|
-
primaryInverseHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts44 = colors.contrasts) === null || _colors$contrasts44 === void 0 ? void 0 : _colors$contrasts44.grey1111,
|
|
129
|
-
primaryInverseActiveBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts45 = colors.contrasts) === null || _colors$contrasts45 === void 0 ? void 0 : _colors$contrasts45.white1010,
|
|
130
|
-
primaryInverseActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts46 = colors.contrasts) === null || _colors$contrasts46 === void 0 ? void 0 : _colors$contrasts46.white1010}`,
|
|
131
|
-
primaryInverseGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts47 = colors.contrasts) === null || _colors$contrasts47 === void 0 ? void 0 : _colors$contrasts47.white1010,
|
|
132
|
-
primaryInverseGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts48 = colors.contrasts) === null || _colors$contrasts48 === void 0 ? void 0 : _colors$contrasts48.white1010,
|
|
133
|
-
primaryInverseGhostBackground: 'transparent',
|
|
134
|
-
primaryInverseGhostHoverBackground: (0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts49 = colors.contrasts) === null || _colors$contrasts49 === void 0 ? void 0 : _colors$contrasts49.white1010, 10),
|
|
135
|
-
primaryInverseGhostActiveBackground: 'transparent',
|
|
136
|
-
primaryInverseGhostActiveBoxShadow: `${activeShadow} ${(0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts50 = colors.contrasts) === null || _colors$contrasts50 === void 0 ? void 0 : _colors$contrasts50.white1010, 28)}`
|
|
125
|
+
...generateButtonThemeVars({
|
|
126
|
+
style: 'primary',
|
|
127
|
+
backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
|
|
128
|
+
borderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
|
|
129
|
+
textColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
|
|
130
|
+
ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textBrand
|
|
131
|
+
}),
|
|
132
|
+
...generateButtonThemeVars({
|
|
133
|
+
style: 'secondary',
|
|
134
|
+
backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
|
|
135
|
+
borderColor: colors === null || colors === void 0 ? void 0 : colors.borderLight,
|
|
136
|
+
ghostBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest,
|
|
137
|
+
textColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
|
|
138
|
+
ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest
|
|
139
|
+
}),
|
|
140
|
+
...generateButtonThemeVars({
|
|
141
|
+
style: 'success',
|
|
142
|
+
backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
|
|
143
|
+
borderColor: colors === null || colors === void 0 ? void 0 : colors.borderSuccess,
|
|
144
|
+
textColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
|
|
145
|
+
ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textSuccess
|
|
146
|
+
}),
|
|
147
|
+
...generateButtonThemeVars({
|
|
148
|
+
style: 'danger',
|
|
149
|
+
backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
|
|
150
|
+
borderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
|
|
151
|
+
textColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
|
|
152
|
+
ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textDanger
|
|
153
|
+
}),
|
|
154
|
+
...generateButtonThemeVars({
|
|
155
|
+
style: 'primaryInverse',
|
|
156
|
+
backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
157
|
+
borderColor: colors === null || colors === void 0 ? void 0 : colors.borderLightest,
|
|
158
|
+
textColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
|
|
159
|
+
ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textLightest
|
|
160
|
+
}),
|
|
161
|
+
// Overrides for primary-inverse to match what was previously the `light` button variant
|
|
162
|
+
primaryInverseBorderColor: (0, _darken.darken)(colors === null || colors === void 0 ? void 0 : colors.borderLight, 10),
|
|
163
|
+
primaryInverseHoverBackground: (0, _darken.darken)(colors === null || colors === void 0 ? void 0 : colors.backgroundLightest, 5),
|
|
164
|
+
primaryInverseActiveBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
165
|
+
primaryInverseActiveBoxShadow: `${activeShadow} ${(0, _darken.darken)(colors === null || colors === void 0 ? void 0 : colors.borderLightest, 25)}`,
|
|
166
|
+
// Overrides for ghost hover states to ensure correct color contrast for a11y
|
|
167
|
+
successGhostHoverBackground: (0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : colors.textSuccess, 1)
|
|
137
168
|
};
|
|
138
169
|
return {
|
|
139
|
-
...componentVariables
|
|
170
|
+
...componentVariables,
|
|
171
|
+
...themeSpecificStyle[themeName]
|
|
140
172
|
};
|
|
141
173
|
};
|
|
142
174
|
var _default = exports.default = generateComponentTheme;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-buttons",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.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": "9.
|
|
27
|
-
"@instructure/ui-babel-preset": "9.
|
|
28
|
-
"@instructure/ui-test-utils": "9.
|
|
29
|
-
"@instructure/ui-themes": "9.
|
|
26
|
+
"@instructure/ui-axe-check": "9.6.0",
|
|
27
|
+
"@instructure/ui-babel-preset": "9.6.0",
|
|
28
|
+
"@instructure/ui-test-utils": "9.6.0",
|
|
29
|
+
"@instructure/ui-themes": "9.6.0",
|
|
30
30
|
"@testing-library/jest-dom": "^6.4.6",
|
|
31
31
|
"@testing-library/react": "^15.0.7",
|
|
32
32
|
"@testing-library/user-event": "^14.5.2",
|
|
@@ -34,21 +34,21 @@
|
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@babel/runtime": "^7.24.5",
|
|
37
|
-
"@instructure/console": "9.
|
|
38
|
-
"@instructure/emotion": "9.
|
|
39
|
-
"@instructure/shared-types": "9.
|
|
40
|
-
"@instructure/ui-a11y-content": "9.
|
|
41
|
-
"@instructure/ui-a11y-utils": "9.
|
|
42
|
-
"@instructure/ui-color-utils": "9.
|
|
43
|
-
"@instructure/ui-dom-utils": "9.
|
|
44
|
-
"@instructure/ui-icons": "9.
|
|
45
|
-
"@instructure/ui-position": "9.
|
|
46
|
-
"@instructure/ui-prop-types": "9.
|
|
47
|
-
"@instructure/ui-react-utils": "9.
|
|
48
|
-
"@instructure/ui-testable": "9.
|
|
49
|
-
"@instructure/ui-tooltip": "9.
|
|
50
|
-
"@instructure/ui-utils": "9.
|
|
51
|
-
"@instructure/ui-view": "9.
|
|
37
|
+
"@instructure/console": "9.6.0",
|
|
38
|
+
"@instructure/emotion": "9.6.0",
|
|
39
|
+
"@instructure/shared-types": "9.6.0",
|
|
40
|
+
"@instructure/ui-a11y-content": "9.6.0",
|
|
41
|
+
"@instructure/ui-a11y-utils": "9.6.0",
|
|
42
|
+
"@instructure/ui-color-utils": "9.6.0",
|
|
43
|
+
"@instructure/ui-dom-utils": "9.6.0",
|
|
44
|
+
"@instructure/ui-icons": "9.6.0",
|
|
45
|
+
"@instructure/ui-position": "9.6.0",
|
|
46
|
+
"@instructure/ui-prop-types": "9.6.0",
|
|
47
|
+
"@instructure/ui-react-utils": "9.6.0",
|
|
48
|
+
"@instructure/ui-testable": "9.6.0",
|
|
49
|
+
"@instructure/ui-tooltip": "9.6.0",
|
|
50
|
+
"@instructure/ui-utils": "9.6.0",
|
|
51
|
+
"@instructure/ui-view": "9.6.0",
|
|
52
52
|
"keycode": "^2",
|
|
53
53
|
"prop-types": "^15.8.1"
|
|
54
54
|
},
|