@instructure/ui-buttons 9.3.0 → 9.3.1-pr-snapshot-1721388565180

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 (7) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/es/BaseButton/theme.js +63 -95
  3. package/lib/BaseButton/theme.js +63 -96
  4. package/package.json +20 -20
  5. package/src/BaseButton/theme.ts +67 -147
  6. package/tsconfig.build.tsbuildinfo +1 -1
  7. package/types/BaseButton/theme.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,22 @@
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.3.1-pr-snapshot-1721388565180](https://github.com/instructure/instructure-ui/compare/v9.3.0...v9.3.1-pr-snapshot-1721388565180) (2024-07-19)
7
+
8
+
9
+ ### Features
10
+
11
+ * **many:** rewrite color system ([daa119c](https://github.com/instructure/instructure-ui/commit/daa119c31a8b6d35389909e27da5aaf17b654f4e))
12
+
13
+
14
+ ### BREAKING CHANGES
15
+
16
+ * **many:** Breaks color overrides in certain cases
17
+
18
+
19
+
20
+
21
+
6
22
  # [9.3.0](https://github.com/instructure/instructure-ui/compare/v9.2.0...v9.3.0) (2024-07-17)
7
23
 
8
24
 
package/es/BaseButton/theme.js CHANGED
@@ -22,29 +22,7 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import { alpha, darken } from '@instructure/ui-color-utils';
26
25
  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
26
 
49
27
  /**
50
28
  * Generates the theme object for the component from the theme and provided additional information
@@ -52,38 +30,12 @@ const generateButtonThemeVars = ({
52
30
  * @return {Object} The final theme object with the overrides and component variables
53
31
  */
54
32
  const generateComponentTheme = theme => {
33
+ 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;
55
34
  const borders = theme.borders,
56
35
  colors = theme.colors,
57
36
  forms = theme.forms,
58
37
  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
- };
38
+ typography = theme.typography;
87
39
  const componentVariables = {
88
40
  transform: 'none',
89
41
  hoverTransform: 'none',
@@ -115,53 +67,69 @@ const generateComponentTheme = theme => {
115
67
  iconSizeLarge: '1.625rem',
116
68
  iconTextGap: spacing.xSmall,
117
69
  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)
70
+ primaryColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
71
+ primaryBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.blue5782,
72
+ primaryBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.blue4570,
73
+ primaryHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue5782,
74
+ primaryActiveBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.blue5782,
75
+ primaryActiveBoxShadow: `${activeShadow} "#013451"}`,
76
+ primaryGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.blue4570,
77
+ primaryGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue4570,
78
+ primaryGhostBackground: 'transparent',
79
+ primaryGhostHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.blue1212,
80
+ primaryGhostActiveBackground: 'transparent',
81
+ primaryGhostActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.white1010}`,
82
+ secondaryColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.grey125125,
83
+ secondaryBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.grey1214,
84
+ secondaryBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.grey1111,
85
+ secondaryHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts13 = colors.contrasts) === null || _colors$contrasts13 === void 0 ? void 0 : _colors$contrasts13.grey1214,
86
+ secondaryActiveBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts14 = colors.contrasts) === null || _colors$contrasts14 === void 0 ? void 0 : _colors$contrasts14.grey1214,
87
+ secondaryActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts15 = colors.contrasts) === null || _colors$contrasts15 === void 0 ? void 0 : _colors$contrasts15.white1010}`,
88
+ secondaryGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts16 = colors.contrasts) === null || _colors$contrasts16 === void 0 ? void 0 : _colors$contrasts16.grey125125,
89
+ secondaryGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts17 = colors.contrasts) === null || _colors$contrasts17 === void 0 ? void 0 : _colors$contrasts17.grey125125,
90
+ secondaryGhostBackground: 'transparent',
91
+ secondaryGhostHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts18 = colors.contrasts) === null || _colors$contrasts18 === void 0 ? void 0 : _colors$contrasts18.grey1111,
92
+ secondaryGhostActiveBackground: 'transparent',
93
+ secondaryGhostActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts19 = colors.contrasts) === null || _colors$contrasts19 === void 0 ? void 0 : _colors$contrasts19.white1010}`,
94
+ successColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts20 = colors.contrasts) === null || _colors$contrasts20 === void 0 ? void 0 : _colors$contrasts20.white1010,
95
+ successBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts21 = colors.contrasts) === null || _colors$contrasts21 === void 0 ? void 0 : _colors$contrasts21.green5782,
96
+ successBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts22 = colors.contrasts) === null || _colors$contrasts22 === void 0 ? void 0 : _colors$contrasts22.green4570,
97
+ successHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts23 = colors.contrasts) === null || _colors$contrasts23 === void 0 ? void 0 : _colors$contrasts23.green5782,
98
+ successActiveBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts24 = colors.contrasts) === null || _colors$contrasts24 === void 0 ? void 0 : _colors$contrasts24.green5782,
99
+ successActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts25 = colors.contrasts) === null || _colors$contrasts25 === void 0 ? void 0 : _colors$contrasts25.white1010}`,
100
+ successGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts26 = colors.contrasts) === null || _colors$contrasts26 === void 0 ? void 0 : _colors$contrasts26.green4570,
101
+ successGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts27 = colors.contrasts) === null || _colors$contrasts27 === void 0 ? void 0 : _colors$contrasts27.green4570,
102
+ successGhostBackground: 'transparent',
103
+ successGhostHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts28 = colors.contrasts) === null || _colors$contrasts28 === void 0 ? void 0 : _colors$contrasts28.green1212,
104
+ successGhostActiveBackground: 'transparent',
105
+ successGhostActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts29 = colors.contrasts) === null || _colors$contrasts29 === void 0 ? void 0 : _colors$contrasts29.white1010}`,
106
+ dangerColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts30 = colors.contrasts) === null || _colors$contrasts30 === void 0 ? void 0 : _colors$contrasts30.white1010,
107
+ dangerBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts31 = colors.contrasts) === null || _colors$contrasts31 === void 0 ? void 0 : _colors$contrasts31.red5782,
108
+ dangerBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts32 = colors.contrasts) === null || _colors$contrasts32 === void 0 ? void 0 : _colors$contrasts32.red4570,
109
+ dangerHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts33 = colors.contrasts) === null || _colors$contrasts33 === void 0 ? void 0 : _colors$contrasts33.red5782,
110
+ dangerActiveBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts34 = colors.contrasts) === null || _colors$contrasts34 === void 0 ? void 0 : _colors$contrasts34.red5782,
111
+ dangerActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts35 = colors.contrasts) === null || _colors$contrasts35 === void 0 ? void 0 : _colors$contrasts35.white1010}`,
112
+ dangerGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts36 = colors.contrasts) === null || _colors$contrasts36 === void 0 ? void 0 : _colors$contrasts36.red4570,
113
+ dangerGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts37 = colors.contrasts) === null || _colors$contrasts37 === void 0 ? void 0 : _colors$contrasts37.red4570,
114
+ dangerGhostBackground: 'transparent',
115
+ dangerGhostHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts38 = colors.contrasts) === null || _colors$contrasts38 === void 0 ? void 0 : _colors$contrasts38.red1212,
116
+ dangerGhostActiveBackground: 'transparent',
117
+ dangerGhostActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts39 = colors.contrasts) === null || _colors$contrasts39 === void 0 ? void 0 : _colors$contrasts39.white1010}`,
118
+ primaryInverseColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts40 = colors.contrasts) === null || _colors$contrasts40 === void 0 ? void 0 : _colors$contrasts40.grey125125,
119
+ primaryInverseBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts41 = colors.contrasts) === null || _colors$contrasts41 === void 0 ? void 0 : _colors$contrasts41.grey1214,
120
+ primaryInverseBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts42 = colors.contrasts) === null || _colors$contrasts42 === void 0 ? void 0 : _colors$contrasts42.white1010,
121
+ primaryInverseHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts43 = colors.contrasts) === null || _colors$contrasts43 === void 0 ? void 0 : _colors$contrasts43.grey1111,
122
+ primaryInverseActiveBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts44 = colors.contrasts) === null || _colors$contrasts44 === void 0 ? void 0 : _colors$contrasts44.white1010,
123
+ primaryInverseActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts45 = colors.contrasts) === null || _colors$contrasts45 === void 0 ? void 0 : _colors$contrasts45.white1010}`,
124
+ primaryInverseGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts46 = colors.contrasts) === null || _colors$contrasts46 === void 0 ? void 0 : _colors$contrasts46.white1010,
125
+ primaryInverseGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts47 = colors.contrasts) === null || _colors$contrasts47 === void 0 ? void 0 : _colors$contrasts47.white1010,
126
+ primaryInverseGhostBackground: 'transparent',
127
+ primaryInverseGhostHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts48 = colors.contrasts) === null || _colors$contrasts48 === void 0 ? void 0 : _colors$contrasts48.grey1111,
128
+ primaryInverseGhostActiveBackground: 'transparent',
129
+ primaryInverseGhostActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts49 = colors.contrasts) === null || _colors$contrasts49 === void 0 ? void 0 : _colors$contrasts49.white1010}`
161
130
  };
162
131
  return {
163
- ...componentVariables,
164
- ...themeSpecificStyle[themeName]
132
+ ...componentVariables
165
133
  };
166
134
  };
167
135
  export default generateComponentTheme;
package/lib/BaseButton/theme.js CHANGED
@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _alpha = require("@instructure/ui-color-utils/lib/alpha.js");
8
- var _darken = require("@instructure/ui-color-utils/lib/darken.js");
9
7
  /*
10
8
  * The MIT License (MIT)
11
9
  *
@@ -31,27 +29,6 @@ var _darken = require("@instructure/ui-color-utils/lib/darken.js");
31
29
  */
32
30
 
33
31
  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
32
 
56
33
  /**
57
34
  * Generates the theme object for the component from the theme and provided additional information
@@ -59,38 +36,12 @@ const generateButtonThemeVars = ({
59
36
  * @return {Object} The final theme object with the overrides and component variables
60
37
  */
61
38
  const generateComponentTheme = theme => {
39
+ 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;
62
40
  const borders = theme.borders,
63
41
  colors = theme.colors,
64
42
  forms = theme.forms,
65
43
  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
- };
44
+ typography = theme.typography;
94
45
  const componentVariables = {
95
46
  transform: 'none',
96
47
  hoverTransform: 'none',
@@ -122,53 +73,69 @@ const generateComponentTheme = theme => {
122
73
  iconSizeLarge: '1.625rem',
123
74
  iconTextGap: spacing.xSmall,
124
75
  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)
76
+ primaryColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
77
+ primaryBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.blue5782,
78
+ primaryBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.blue4570,
79
+ primaryHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue5782,
80
+ primaryActiveBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.blue5782,
81
+ primaryActiveBoxShadow: `${activeShadow} "#013451"}`,
82
+ primaryGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.blue4570,
83
+ primaryGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue4570,
84
+ primaryGhostBackground: 'transparent',
85
+ primaryGhostHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.blue1212,
86
+ primaryGhostActiveBackground: 'transparent',
87
+ primaryGhostActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.white1010}`,
88
+ secondaryColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.grey125125,
89
+ secondaryBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.grey1214,
90
+ secondaryBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.grey1111,
91
+ secondaryHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts13 = colors.contrasts) === null || _colors$contrasts13 === void 0 ? void 0 : _colors$contrasts13.grey1214,
92
+ secondaryActiveBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts14 = colors.contrasts) === null || _colors$contrasts14 === void 0 ? void 0 : _colors$contrasts14.grey1214,
93
+ secondaryActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts15 = colors.contrasts) === null || _colors$contrasts15 === void 0 ? void 0 : _colors$contrasts15.white1010}`,
94
+ secondaryGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts16 = colors.contrasts) === null || _colors$contrasts16 === void 0 ? void 0 : _colors$contrasts16.grey125125,
95
+ secondaryGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts17 = colors.contrasts) === null || _colors$contrasts17 === void 0 ? void 0 : _colors$contrasts17.grey125125,
96
+ secondaryGhostBackground: 'transparent',
97
+ secondaryGhostHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts18 = colors.contrasts) === null || _colors$contrasts18 === void 0 ? void 0 : _colors$contrasts18.grey1111,
98
+ secondaryGhostActiveBackground: 'transparent',
99
+ secondaryGhostActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts19 = colors.contrasts) === null || _colors$contrasts19 === void 0 ? void 0 : _colors$contrasts19.white1010}`,
100
+ successColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts20 = colors.contrasts) === null || _colors$contrasts20 === void 0 ? void 0 : _colors$contrasts20.white1010,
101
+ successBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts21 = colors.contrasts) === null || _colors$contrasts21 === void 0 ? void 0 : _colors$contrasts21.green5782,
102
+ successBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts22 = colors.contrasts) === null || _colors$contrasts22 === void 0 ? void 0 : _colors$contrasts22.green4570,
103
+ successHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts23 = colors.contrasts) === null || _colors$contrasts23 === void 0 ? void 0 : _colors$contrasts23.green5782,
104
+ successActiveBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts24 = colors.contrasts) === null || _colors$contrasts24 === void 0 ? void 0 : _colors$contrasts24.green5782,
105
+ successActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts25 = colors.contrasts) === null || _colors$contrasts25 === void 0 ? void 0 : _colors$contrasts25.white1010}`,
106
+ successGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts26 = colors.contrasts) === null || _colors$contrasts26 === void 0 ? void 0 : _colors$contrasts26.green4570,
107
+ successGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts27 = colors.contrasts) === null || _colors$contrasts27 === void 0 ? void 0 : _colors$contrasts27.green4570,
108
+ successGhostBackground: 'transparent',
109
+ successGhostHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts28 = colors.contrasts) === null || _colors$contrasts28 === void 0 ? void 0 : _colors$contrasts28.green1212,
110
+ successGhostActiveBackground: 'transparent',
111
+ successGhostActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts29 = colors.contrasts) === null || _colors$contrasts29 === void 0 ? void 0 : _colors$contrasts29.white1010}`,
112
+ dangerColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts30 = colors.contrasts) === null || _colors$contrasts30 === void 0 ? void 0 : _colors$contrasts30.white1010,
113
+ dangerBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts31 = colors.contrasts) === null || _colors$contrasts31 === void 0 ? void 0 : _colors$contrasts31.red5782,
114
+ dangerBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts32 = colors.contrasts) === null || _colors$contrasts32 === void 0 ? void 0 : _colors$contrasts32.red4570,
115
+ dangerHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts33 = colors.contrasts) === null || _colors$contrasts33 === void 0 ? void 0 : _colors$contrasts33.red5782,
116
+ dangerActiveBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts34 = colors.contrasts) === null || _colors$contrasts34 === void 0 ? void 0 : _colors$contrasts34.red5782,
117
+ dangerActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts35 = colors.contrasts) === null || _colors$contrasts35 === void 0 ? void 0 : _colors$contrasts35.white1010}`,
118
+ dangerGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts36 = colors.contrasts) === null || _colors$contrasts36 === void 0 ? void 0 : _colors$contrasts36.red4570,
119
+ dangerGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts37 = colors.contrasts) === null || _colors$contrasts37 === void 0 ? void 0 : _colors$contrasts37.red4570,
120
+ dangerGhostBackground: 'transparent',
121
+ dangerGhostHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts38 = colors.contrasts) === null || _colors$contrasts38 === void 0 ? void 0 : _colors$contrasts38.red1212,
122
+ dangerGhostActiveBackground: 'transparent',
123
+ dangerGhostActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts39 = colors.contrasts) === null || _colors$contrasts39 === void 0 ? void 0 : _colors$contrasts39.white1010}`,
124
+ primaryInverseColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts40 = colors.contrasts) === null || _colors$contrasts40 === void 0 ? void 0 : _colors$contrasts40.grey125125,
125
+ primaryInverseBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts41 = colors.contrasts) === null || _colors$contrasts41 === void 0 ? void 0 : _colors$contrasts41.grey1214,
126
+ primaryInverseBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts42 = colors.contrasts) === null || _colors$contrasts42 === void 0 ? void 0 : _colors$contrasts42.white1010,
127
+ primaryInverseHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts43 = colors.contrasts) === null || _colors$contrasts43 === void 0 ? void 0 : _colors$contrasts43.grey1111,
128
+ primaryInverseActiveBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts44 = colors.contrasts) === null || _colors$contrasts44 === void 0 ? void 0 : _colors$contrasts44.white1010,
129
+ primaryInverseActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts45 = colors.contrasts) === null || _colors$contrasts45 === void 0 ? void 0 : _colors$contrasts45.white1010}`,
130
+ primaryInverseGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts46 = colors.contrasts) === null || _colors$contrasts46 === void 0 ? void 0 : _colors$contrasts46.white1010,
131
+ primaryInverseGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts47 = colors.contrasts) === null || _colors$contrasts47 === void 0 ? void 0 : _colors$contrasts47.white1010,
132
+ primaryInverseGhostBackground: 'transparent',
133
+ primaryInverseGhostHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts48 = colors.contrasts) === null || _colors$contrasts48 === void 0 ? void 0 : _colors$contrasts48.grey1111,
134
+ primaryInverseGhostActiveBackground: 'transparent',
135
+ primaryInverseGhostActiveBoxShadow: `${activeShadow} ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts49 = colors.contrasts) === null || _colors$contrasts49 === void 0 ? void 0 : _colors$contrasts49.white1010}`
168
136
  };
169
137
  return {
170
- ...componentVariables,
171
- ...themeSpecificStyle[themeName]
138
+ ...componentVariables
172
139
  };
173
140
  };
174
141
  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.0",
3
+ "version": "9.3.1-pr-snapshot-1721388565180",
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.3.0",
27
- "@instructure/ui-babel-preset": "9.3.0",
28
- "@instructure/ui-test-utils": "9.3.0",
29
- "@instructure/ui-themes": "9.3.0",
26
+ "@instructure/ui-axe-check": "9.3.1-pr-snapshot-1721388565180",
27
+ "@instructure/ui-babel-preset": "9.3.1-pr-snapshot-1721388565180",
28
+ "@instructure/ui-test-utils": "9.3.1-pr-snapshot-1721388565180",
29
+ "@instructure/ui-themes": "9.3.1-pr-snapshot-1721388565180",
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.3.0",
38
- "@instructure/emotion": "9.3.0",
39
- "@instructure/shared-types": "9.3.0",
40
- "@instructure/ui-a11y-content": "9.3.0",
41
- "@instructure/ui-a11y-utils": "9.3.0",
42
- "@instructure/ui-color-utils": "9.3.0",
43
- "@instructure/ui-dom-utils": "9.3.0",
44
- "@instructure/ui-icons": "9.3.0",
45
- "@instructure/ui-position": "9.3.0",
46
- "@instructure/ui-prop-types": "9.3.0",
47
- "@instructure/ui-react-utils": "9.3.0",
48
- "@instructure/ui-testable": "9.3.0",
49
- "@instructure/ui-tooltip": "9.3.0",
50
- "@instructure/ui-utils": "9.3.0",
51
- "@instructure/ui-view": "9.3.0",
37
+ "@instructure/console": "9.3.1-pr-snapshot-1721388565180",
38
+ "@instructure/emotion": "9.3.1-pr-snapshot-1721388565180",
39
+ "@instructure/shared-types": "9.3.1-pr-snapshot-1721388565180",
40
+ "@instructure/ui-a11y-content": "9.3.1-pr-snapshot-1721388565180",
41
+ "@instructure/ui-a11y-utils": "9.3.1-pr-snapshot-1721388565180",
42
+ "@instructure/ui-color-utils": "9.3.1-pr-snapshot-1721388565180",
43
+ "@instructure/ui-dom-utils": "9.3.1-pr-snapshot-1721388565180",
44
+ "@instructure/ui-icons": "9.3.1-pr-snapshot-1721388565180",
45
+ "@instructure/ui-position": "9.3.1-pr-snapshot-1721388565180",
46
+ "@instructure/ui-prop-types": "9.3.1-pr-snapshot-1721388565180",
47
+ "@instructure/ui-react-utils": "9.3.1-pr-snapshot-1721388565180",
48
+ "@instructure/ui-testable": "9.3.1-pr-snapshot-1721388565180",
49
+ "@instructure/ui-tooltip": "9.3.1-pr-snapshot-1721388565180",
50
+ "@instructure/ui-utils": "9.3.1-pr-snapshot-1721388565180",
51
+ "@instructure/ui-view": "9.3.1-pr-snapshot-1721388565180",
52
52
  "keycode": "^2",
53
53
  "prop-types": "^15.8.1"
54
54
  },