@instructure/ui-buttons 9.6.0 → 10.0.1-pr-snapshot-1723800180253

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 (8) hide show
  1. package/CHANGELOG.md +16 -3
  2. package/es/BaseButton/theme.js +64 -95
  3. package/lib/BaseButton/theme.js +63 -95
  4. package/package.json +20 -20
  5. package/src/BaseButton/theme.ts +81 -145
  6. package/src/ToggleButton/README.md +86 -39
  7. package/tsconfig.build.tsbuildinfo +1 -1
  8. package/types/BaseButton/theme.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
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.6.0](https://github.com/instructure/instructure-ui/compare/v9.5.2...v9.6.0) (2024-08-14)
6
+ ## [10.0.1-pr-snapshot-1723800180253](https://github.com/instructure/instructure-ui/compare/v10.0.0...v10.0.1-pr-snapshot-1723800180253) (2024-08-16)
7
7
 
8
8
  **Note:** Version bump only for package @instructure/ui-buttons
9
9
 
@@ -11,9 +11,22 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
11
11
 
12
12
 
13
13
 
14
- ## [9.5.2](https://github.com/instructure/instructure-ui/compare/v9.5.1...v9.5.2) (2024-08-05)
14
+ # [10.0.0](https://github.com/instructure/instructure-ui/compare/v9.5.1...v10.0.0) (2024-07-31)
15
15
 
16
- **Note:** Version bump only for package @instructure/ui-buttons
16
+
17
+ ### Bug Fixes
18
+
19
+ * **ui-buttons:** fix hover enabled when a component is disabled ([f55dc3e](https://github.com/instructure/instructure-ui/commit/f55dc3e81036c25842460869ec03952e14b5ef2b))
20
+
21
+
22
+ ### Features
23
+
24
+ * **many:** rewrite color system ([1e5809e](https://github.com/instructure/instructure-ui/commit/1e5809e28dee8c2a71703a429609b8d2f95d76e6))
25
+
26
+
27
+ ### BREAKING CHANGES
28
+
29
+ * **many:** Breaks color overrides in certain cases
17
30
 
18
31
 
19
32
 
package/es/BaseButton/theme.js CHANGED
@@ -22,29 +22,8 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import { alpha, darken } from '@instructure/ui-color-utils';
25
+ import { alpha } 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
- });
48
27
 
49
28
  /**
50
29
  * Generates the theme object for the component from the theme and provided additional information
@@ -52,38 +31,12 @@ const generateButtonThemeVars = ({
52
31
  * @return {Object} The final theme object with the overrides and component variables
53
32
  */
54
33
  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;
55
35
  const borders = theme.borders,
56
36
  colors = theme.colors,
57
37
  forms = theme.forms,
58
38
  spacing = theme.spacing,
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
- };
39
+ typography = theme.typography;
87
40
  const componentVariables = {
88
41
  transform: 'none',
89
42
  hoverTransform: 'none',
@@ -115,53 +68,69 @@ const generateComponentTheme = theme => {
115
68
  iconSizeLarge: '1.625rem',
116
69
  iconTextGap: spacing.xSmall,
117
70
  iconTextGapCondensed: spacing.xxSmall,
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)
71
+ primaryColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
72
+ primaryBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.blue5782,
73
+ primaryBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.blue4570,
74
+ primaryHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue5782,
75
+ primaryActiveBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.blue5782,
76
+ primaryActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.white1010}`,
77
+ primaryGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue4570,
78
+ primaryGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.blue4570,
79
+ primaryGhostBackground: 'transparent',
80
+ primaryGhostHoverBackground: alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.blue4570, 10),
81
+ primaryGhostActiveBackground: 'transparent',
82
+ 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)}`,
83
+ secondaryColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.grey125125,
84
+ secondaryBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.grey1214,
85
+ secondaryBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts13 = colors.contrasts) === null || _colors$contrasts13 === void 0 ? void 0 : _colors$contrasts13.grey1111,
86
+ secondaryHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts14 = colors.contrasts) === null || _colors$contrasts14 === void 0 ? void 0 : _colors$contrasts14.grey1214,
87
+ secondaryActiveBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts15 = colors.contrasts) === null || _colors$contrasts15 === void 0 ? void 0 : _colors$contrasts15.grey1214,
88
+ secondaryActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts16 = colors.contrasts) === null || _colors$contrasts16 === void 0 ? void 0 : _colors$contrasts16.white1010}`,
89
+ secondaryGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts17 = colors.contrasts) === null || _colors$contrasts17 === void 0 ? void 0 : _colors$contrasts17.grey125125,
90
+ secondaryGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts18 = colors.contrasts) === null || _colors$contrasts18 === void 0 ? void 0 : _colors$contrasts18.grey125125,
91
+ secondaryGhostBackground: 'transparent',
92
+ secondaryGhostHoverBackground: alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts19 = colors.contrasts) === null || _colors$contrasts19 === void 0 ? void 0 : _colors$contrasts19.grey125125, 10),
93
+ secondaryGhostActiveBackground: 'transparent',
94
+ 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)}`,
95
+ successColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts21 = colors.contrasts) === null || _colors$contrasts21 === void 0 ? void 0 : _colors$contrasts21.white1010,
96
+ successBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts22 = colors.contrasts) === null || _colors$contrasts22 === void 0 ? void 0 : _colors$contrasts22.green5782,
97
+ successBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts23 = colors.contrasts) === null || _colors$contrasts23 === void 0 ? void 0 : _colors$contrasts23.green4570,
98
+ successHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts24 = colors.contrasts) === null || _colors$contrasts24 === void 0 ? void 0 : _colors$contrasts24.green5782,
99
+ successActiveBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts25 = colors.contrasts) === null || _colors$contrasts25 === void 0 ? void 0 : _colors$contrasts25.green5782,
100
+ successActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts26 = colors.contrasts) === null || _colors$contrasts26 === void 0 ? void 0 : _colors$contrasts26.white1010}`,
101
+ successGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts27 = colors.contrasts) === null || _colors$contrasts27 === void 0 ? void 0 : _colors$contrasts27.green4570,
102
+ successGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts28 = colors.contrasts) === null || _colors$contrasts28 === void 0 ? void 0 : _colors$contrasts28.green4570,
103
+ successGhostBackground: 'transparent',
104
+ successGhostHoverBackground: alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts29 = colors.contrasts) === null || _colors$contrasts29 === void 0 ? void 0 : _colors$contrasts29.green4570, 10),
105
+ successGhostActiveBackground: 'transparent',
106
+ successGhostActiveBoxShadow: `${activeShadow} ${alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts30 = colors.contrasts) === null || _colors$contrasts30 === void 0 ? void 0 : _colors$contrasts30.green4570, 28)}`,
107
+ dangerColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts31 = colors.contrasts) === null || _colors$contrasts31 === void 0 ? void 0 : _colors$contrasts31.white1010,
108
+ dangerBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts32 = colors.contrasts) === null || _colors$contrasts32 === void 0 ? void 0 : _colors$contrasts32.red5782,
109
+ dangerBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts33 = colors.contrasts) === null || _colors$contrasts33 === void 0 ? void 0 : _colors$contrasts33.red4570,
110
+ dangerHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts34 = colors.contrasts) === null || _colors$contrasts34 === void 0 ? void 0 : _colors$contrasts34.red5782,
111
+ dangerActiveBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts35 = colors.contrasts) === null || _colors$contrasts35 === void 0 ? void 0 : _colors$contrasts35.red5782,
112
+ dangerActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts36 = colors.contrasts) === null || _colors$contrasts36 === void 0 ? void 0 : _colors$contrasts36.white1010}`,
113
+ dangerGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts37 = colors.contrasts) === null || _colors$contrasts37 === void 0 ? void 0 : _colors$contrasts37.red4570,
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)}`
161
131
  };
162
132
  return {
163
- ...componentVariables,
164
- ...themeSpecificStyle[themeName]
133
+ ...componentVariables
165
134
  };
166
135
  };
167
136
  export default generateComponentTheme;
package/lib/BaseButton/theme.js CHANGED
@@ -5,7 +5,6 @@ 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");
9
8
  /*
10
9
  * The MIT License (MIT)
11
10
  *
@@ -31,27 +30,6 @@ var _darken = require("@instructure/ui-color-utils/lib/darken.js");
31
30
  */
32
31
 
33
32
  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
- });
55
33
 
56
34
  /**
57
35
  * Generates the theme object for the component from the theme and provided additional information
@@ -59,38 +37,12 @@ const generateButtonThemeVars = ({
59
37
  * @return {Object} The final theme object with the overrides and component variables
60
38
  */
61
39
  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;
62
41
  const borders = theme.borders,
63
42
  colors = theme.colors,
64
43
  forms = theme.forms,
65
44
  spacing = theme.spacing,
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
- };
45
+ typography = theme.typography;
94
46
  const componentVariables = {
95
47
  transform: 'none',
96
48
  hoverTransform: 'none',
@@ -122,53 +74,69 @@ const generateComponentTheme = theme => {
122
74
  iconSizeLarge: '1.625rem',
123
75
  iconTextGap: spacing.xSmall,
124
76
  iconTextGapCondensed: spacing.xxSmall,
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)
77
+ primaryColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
78
+ primaryBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.blue5782,
79
+ primaryBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.blue4570,
80
+ primaryHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue5782,
81
+ primaryActiveBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.blue5782,
82
+ primaryActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.white1010}`,
83
+ primaryGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue4570,
84
+ primaryGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.blue4570,
85
+ primaryGhostBackground: 'transparent',
86
+ 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),
87
+ primaryGhostActiveBackground: 'transparent',
88
+ 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)}`,
89
+ secondaryColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.grey125125,
90
+ secondaryBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.grey1214,
91
+ secondaryBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts13 = colors.contrasts) === null || _colors$contrasts13 === void 0 ? void 0 : _colors$contrasts13.grey1111,
92
+ secondaryHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts14 = colors.contrasts) === null || _colors$contrasts14 === void 0 ? void 0 : _colors$contrasts14.grey1214,
93
+ secondaryActiveBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts15 = colors.contrasts) === null || _colors$contrasts15 === void 0 ? void 0 : _colors$contrasts15.grey1214,
94
+ secondaryActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts16 = colors.contrasts) === null || _colors$contrasts16 === void 0 ? void 0 : _colors$contrasts16.white1010}`,
95
+ secondaryGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts17 = colors.contrasts) === null || _colors$contrasts17 === void 0 ? void 0 : _colors$contrasts17.grey125125,
96
+ secondaryGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts18 = colors.contrasts) === null || _colors$contrasts18 === void 0 ? void 0 : _colors$contrasts18.grey125125,
97
+ secondaryGhostBackground: 'transparent',
98
+ 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),
99
+ secondaryGhostActiveBackground: 'transparent',
100
+ 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)}`,
101
+ successColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts21 = colors.contrasts) === null || _colors$contrasts21 === void 0 ? void 0 : _colors$contrasts21.white1010,
102
+ successBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts22 = colors.contrasts) === null || _colors$contrasts22 === void 0 ? void 0 : _colors$contrasts22.green5782,
103
+ successBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts23 = colors.contrasts) === null || _colors$contrasts23 === void 0 ? void 0 : _colors$contrasts23.green4570,
104
+ successHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts24 = colors.contrasts) === null || _colors$contrasts24 === void 0 ? void 0 : _colors$contrasts24.green5782,
105
+ successActiveBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts25 = colors.contrasts) === null || _colors$contrasts25 === void 0 ? void 0 : _colors$contrasts25.green5782,
106
+ successActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts26 = colors.contrasts) === null || _colors$contrasts26 === void 0 ? void 0 : _colors$contrasts26.white1010}`,
107
+ successGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts27 = colors.contrasts) === null || _colors$contrasts27 === void 0 ? void 0 : _colors$contrasts27.green4570,
108
+ successGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts28 = colors.contrasts) === null || _colors$contrasts28 === void 0 ? void 0 : _colors$contrasts28.green4570,
109
+ successGhostBackground: 'transparent',
110
+ successGhostHoverBackground: (0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts29 = colors.contrasts) === null || _colors$contrasts29 === void 0 ? void 0 : _colors$contrasts29.green4570, 10),
111
+ successGhostActiveBackground: 'transparent',
112
+ successGhostActiveBoxShadow: `${activeShadow} ${(0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts30 = colors.contrasts) === null || _colors$contrasts30 === void 0 ? void 0 : _colors$contrasts30.green4570, 28)}`,
113
+ dangerColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts31 = colors.contrasts) === null || _colors$contrasts31 === void 0 ? void 0 : _colors$contrasts31.white1010,
114
+ dangerBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts32 = colors.contrasts) === null || _colors$contrasts32 === void 0 ? void 0 : _colors$contrasts32.red5782,
115
+ dangerBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts33 = colors.contrasts) === null || _colors$contrasts33 === void 0 ? void 0 : _colors$contrasts33.red4570,
116
+ dangerHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts34 = colors.contrasts) === null || _colors$contrasts34 === void 0 ? void 0 : _colors$contrasts34.red5782,
117
+ dangerActiveBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts35 = colors.contrasts) === null || _colors$contrasts35 === void 0 ? void 0 : _colors$contrasts35.red5782,
118
+ dangerActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts36 = colors.contrasts) === null || _colors$contrasts36 === void 0 ? void 0 : _colors$contrasts36.white1010}`,
119
+ dangerGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts37 = colors.contrasts) === null || _colors$contrasts37 === void 0 ? void 0 : _colors$contrasts37.red4570,
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)}`
168
137
  };
169
138
  return {
170
- ...componentVariables,
171
- ...themeSpecificStyle[themeName]
139
+ ...componentVariables
172
140
  };
173
141
  };
174
142
  var _default = exports.default = generateComponentTheme;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-buttons",
3
- "version": "9.6.0",
3
+ "version": "10.0.1-pr-snapshot-1723800180253",
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.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",
26
+ "@instructure/ui-axe-check": "10.0.1-pr-snapshot-1723800180253",
27
+ "@instructure/ui-babel-preset": "10.0.1-pr-snapshot-1723800180253",
28
+ "@instructure/ui-test-utils": "10.0.1-pr-snapshot-1723800180253",
29
+ "@instructure/ui-themes": "10.0.1-pr-snapshot-1723800180253",
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.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",
37
+ "@instructure/console": "10.0.1-pr-snapshot-1723800180253",
38
+ "@instructure/emotion": "10.0.1-pr-snapshot-1723800180253",
39
+ "@instructure/shared-types": "10.0.1-pr-snapshot-1723800180253",
40
+ "@instructure/ui-a11y-content": "10.0.1-pr-snapshot-1723800180253",
41
+ "@instructure/ui-a11y-utils": "10.0.1-pr-snapshot-1723800180253",
42
+ "@instructure/ui-color-utils": "10.0.1-pr-snapshot-1723800180253",
43
+ "@instructure/ui-dom-utils": "10.0.1-pr-snapshot-1723800180253",
44
+ "@instructure/ui-icons": "10.0.1-pr-snapshot-1723800180253",
45
+ "@instructure/ui-position": "10.0.1-pr-snapshot-1723800180253",
46
+ "@instructure/ui-prop-types": "10.0.1-pr-snapshot-1723800180253",
47
+ "@instructure/ui-react-utils": "10.0.1-pr-snapshot-1723800180253",
48
+ "@instructure/ui-testable": "10.0.1-pr-snapshot-1723800180253",
49
+ "@instructure/ui-tooltip": "10.0.1-pr-snapshot-1723800180253",
50
+ "@instructure/ui-utils": "10.0.1-pr-snapshot-1723800180253",
51
+ "@instructure/ui-view": "10.0.1-pr-snapshot-1723800180253",
52
52
  "keycode": "^2",
53
53
  "prop-types": "^15.8.1"
54
54
  },