@instructure/ui-buttons 10.4.1-snapshot-3 → 10.4.1-snapshot-5

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 +2 -1
  2. package/es/BaseButton/theme.js +21 -3
  3. package/lib/BaseButton/theme.js +21 -2
  4. package/package.json +20 -20
  5. package/src/BaseButton/theme.ts +30 -4
  6. package/tsconfig.build.tsbuildinfo +1 -1
  7. package/types/BaseButton/theme.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,11 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [10.4.1-snapshot-3](https://github.com/instructure/instructure-ui/compare/v10.4.0...v10.4.1-snapshot-3) (2024-10-22)
6
+ ## [10.4.1-snapshot-5](https://github.com/instructure/instructure-ui/compare/v10.4.0...v10.4.1-snapshot-5) (2024-10-28)
7
7
 
8
8
 
9
9
  ### Bug Fixes
10
10
 
11
+ * **ui-buttons:** add back ic-brand theme tokens to basebutton ([ff21f05](https://github.com/instructure/instructure-ui/commit/ff21f05ccafe699ebfdb4da3dff6a418e00f0721))
11
12
  * update license ([1c039d9](https://github.com/instructure/instructure-ui/commit/1c039d9cbf5a3ea99b59803ddde5c6c0b2d76ba5))
12
13
 
13
14
 
package/es/BaseButton/theme.js CHANGED
@@ -22,7 +22,7 @@
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
27
 
28
28
  /**
@@ -36,7 +36,24 @@ const generateComponentTheme = theme => {
36
36
  colors = theme.colors,
37
37
  forms = theme.forms,
38
38
  spacing = theme.spacing,
39
- typography = theme.typography;
39
+ typography = theme.typography,
40
+ themeName = theme.key;
41
+ const themeSpecificStyle = {
42
+ canvas: {
43
+ primaryColor: theme['ic-brand-button--primary-text'],
44
+ primaryBorderColor: theme['ic-brand-button--primary-bgd'],
45
+ primaryBackground: theme['ic-brand-button--primary-bgd'],
46
+ primaryHoverBackground: darken(theme['ic-brand-button--primary-bgd']),
47
+ primaryActiveBackground: darken(theme['ic-brand-button--primary-bgd']),
48
+ primaryActiveBoxShadow: `${activeShadow} ${theme['ic-brand-button--primary-bgd']}`,
49
+ primaryGhostColor: theme['ic-brand-button--primary-bgd'],
50
+ primaryGhostBorderColor: theme['ic-brand-button--primary-bgd'],
51
+ primaryGhostBackground: 'transparent',
52
+ primaryGhostHoverBackground: alpha(theme['ic-brand-button--primary-bgd'], 10),
53
+ primaryGhostActiveBackground: 'transparent',
54
+ primaryGhostActiveBoxShadow: `${activeShadow} ${alpha(theme['ic-brand-button--primary-bgd'], 28)}`
55
+ }
56
+ };
40
57
  const componentVariables = {
41
58
  transform: 'none',
42
59
  hoverTransform: 'none',
@@ -130,7 +147,8 @@ const generateComponentTheme = theme => {
130
147
  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)}`
131
148
  };
132
149
  return {
133
- ...componentVariables
150
+ ...componentVariables,
151
+ ...themeSpecificStyle[themeName]
134
152
  };
135
153
  };
136
154
  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
  *
@@ -42,7 +43,24 @@ const generateComponentTheme = theme => {
42
43
  colors = theme.colors,
43
44
  forms = theme.forms,
44
45
  spacing = theme.spacing,
45
- typography = theme.typography;
46
+ typography = theme.typography,
47
+ themeName = theme.key;
48
+ const themeSpecificStyle = {
49
+ canvas: {
50
+ primaryColor: theme['ic-brand-button--primary-text'],
51
+ primaryBorderColor: theme['ic-brand-button--primary-bgd'],
52
+ primaryBackground: theme['ic-brand-button--primary-bgd'],
53
+ primaryHoverBackground: (0, _darken.darken)(theme['ic-brand-button--primary-bgd']),
54
+ primaryActiveBackground: (0, _darken.darken)(theme['ic-brand-button--primary-bgd']),
55
+ primaryActiveBoxShadow: `${activeShadow} ${theme['ic-brand-button--primary-bgd']}`,
56
+ primaryGhostColor: theme['ic-brand-button--primary-bgd'],
57
+ primaryGhostBorderColor: theme['ic-brand-button--primary-bgd'],
58
+ primaryGhostBackground: 'transparent',
59
+ primaryGhostHoverBackground: (0, _alpha.alpha)(theme['ic-brand-button--primary-bgd'], 10),
60
+ primaryGhostActiveBackground: 'transparent',
61
+ primaryGhostActiveBoxShadow: `${activeShadow} ${(0, _alpha.alpha)(theme['ic-brand-button--primary-bgd'], 28)}`
62
+ }
63
+ };
46
64
  const componentVariables = {
47
65
  transform: 'none',
48
66
  hoverTransform: 'none',
@@ -136,7 +154,8 @@ const generateComponentTheme = theme => {
136
154
  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)}`
137
155
  };
138
156
  return {
139
- ...componentVariables
157
+ ...componentVariables,
158
+ ...themeSpecificStyle[themeName]
140
159
  };
141
160
  };
142
161
  var _default = exports.default = generateComponentTheme;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-buttons",
3
- "version": "10.4.1-snapshot-3",
3
+ "version": "10.4.1-snapshot-5",
4
4
  "description": "Accessible button components",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,10 +23,10 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-axe-check": "10.4.1-snapshot-3",
27
- "@instructure/ui-babel-preset": "10.4.1-snapshot-3",
28
- "@instructure/ui-test-utils": "10.4.1-snapshot-3",
29
- "@instructure/ui-themes": "10.4.1-snapshot-3",
26
+ "@instructure/ui-axe-check": "10.4.1-snapshot-5",
27
+ "@instructure/ui-babel-preset": "10.4.1-snapshot-5",
28
+ "@instructure/ui-test-utils": "10.4.1-snapshot-5",
29
+ "@instructure/ui-themes": "10.4.1-snapshot-5",
30
30
  "@testing-library/jest-dom": "^6.4.6",
31
31
  "@testing-library/react": "^16.0.1",
32
32
  "@testing-library/user-event": "^14.5.2",
@@ -34,21 +34,21 @@
34
34
  },
35
35
  "dependencies": {
36
36
  "@babel/runtime": "^7.25.6",
37
- "@instructure/console": "10.4.1-snapshot-3",
38
- "@instructure/emotion": "10.4.1-snapshot-3",
39
- "@instructure/shared-types": "10.4.1-snapshot-3",
40
- "@instructure/ui-a11y-content": "10.4.1-snapshot-3",
41
- "@instructure/ui-a11y-utils": "10.4.1-snapshot-3",
42
- "@instructure/ui-color-utils": "10.4.1-snapshot-3",
43
- "@instructure/ui-dom-utils": "10.4.1-snapshot-3",
44
- "@instructure/ui-icons": "10.4.1-snapshot-3",
45
- "@instructure/ui-position": "10.4.1-snapshot-3",
46
- "@instructure/ui-prop-types": "10.4.1-snapshot-3",
47
- "@instructure/ui-react-utils": "10.4.1-snapshot-3",
48
- "@instructure/ui-testable": "10.4.1-snapshot-3",
49
- "@instructure/ui-tooltip": "10.4.1-snapshot-3",
50
- "@instructure/ui-utils": "10.4.1-snapshot-3",
51
- "@instructure/ui-view": "10.4.1-snapshot-3",
37
+ "@instructure/console": "10.4.1-snapshot-5",
38
+ "@instructure/emotion": "10.4.1-snapshot-5",
39
+ "@instructure/shared-types": "10.4.1-snapshot-5",
40
+ "@instructure/ui-a11y-content": "10.4.1-snapshot-5",
41
+ "@instructure/ui-a11y-utils": "10.4.1-snapshot-5",
42
+ "@instructure/ui-color-utils": "10.4.1-snapshot-5",
43
+ "@instructure/ui-dom-utils": "10.4.1-snapshot-5",
44
+ "@instructure/ui-icons": "10.4.1-snapshot-5",
45
+ "@instructure/ui-position": "10.4.1-snapshot-5",
46
+ "@instructure/ui-prop-types": "10.4.1-snapshot-5",
47
+ "@instructure/ui-react-utils": "10.4.1-snapshot-5",
48
+ "@instructure/ui-testable": "10.4.1-snapshot-5",
49
+ "@instructure/ui-tooltip": "10.4.1-snapshot-5",
50
+ "@instructure/ui-utils": "10.4.1-snapshot-5",
51
+ "@instructure/ui-view": "10.4.1-snapshot-5",
52
52
  "keycode": "^2",
53
53
  "prop-types": "^15.8.1"
54
54
  },
package/src/BaseButton/theme.ts CHANGED
@@ -22,9 +22,9 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import type { Theme } from '@instructure/ui-themes'
25
+ import type { Theme, ThemeSpecificStyle } from '@instructure/ui-themes'
26
26
  import { BaseButtonTheme } from '@instructure/shared-types'
27
- import { alpha } from '@instructure/ui-color-utils'
27
+ import { alpha, darken } from '@instructure/ui-color-utils'
28
28
 
29
29
  const activeShadow = 'inset 0 0 0.1875rem 0.0625rem'
30
30
 
@@ -34,7 +34,32 @@ const activeShadow = 'inset 0 0 0.1875rem 0.0625rem'
34
34
  * @return {Object} The final theme object with the overrides and component variables
35
35
  */
36
36
  const generateComponentTheme = (theme: Theme): BaseButtonTheme => {
37
- const { borders, colors, forms, spacing, typography } = theme
37
+ const { borders, colors, forms, spacing, typography, key: themeName } = theme
38
+
39
+ const themeSpecificStyle: ThemeSpecificStyle<BaseButtonTheme> = {
40
+ canvas: {
41
+ primaryColor: theme['ic-brand-button--primary-text']!,
42
+ primaryBorderColor: theme['ic-brand-button--primary-bgd']!,
43
+ primaryBackground: theme['ic-brand-button--primary-bgd']!,
44
+ primaryHoverBackground: darken(theme['ic-brand-button--primary-bgd']!),
45
+ primaryActiveBackground: darken(theme['ic-brand-button--primary-bgd']!),
46
+ primaryActiveBoxShadow: `${activeShadow} ${theme[
47
+ 'ic-brand-button--primary-bgd'
48
+ ]!}`,
49
+ primaryGhostColor: theme['ic-brand-button--primary-bgd']!,
50
+ primaryGhostBorderColor: theme['ic-brand-button--primary-bgd']!,
51
+ primaryGhostBackground: 'transparent',
52
+ primaryGhostHoverBackground: alpha(
53
+ theme['ic-brand-button--primary-bgd']!,
54
+ 10
55
+ ),
56
+ primaryGhostActiveBackground: 'transparent',
57
+ primaryGhostActiveBoxShadow: `${activeShadow} ${alpha(
58
+ theme['ic-brand-button--primary-bgd']!,
59
+ 28
60
+ )}`
61
+ }
62
+ }
38
63
 
39
64
  const componentVariables: BaseButtonTheme = {
40
65
  transform: 'none',
@@ -155,7 +180,8 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => {
155
180
  }
156
181
 
157
182
  return {
158
- ...componentVariables
183
+ ...componentVariables,
184
+ ...themeSpecificStyle[themeName]
159
185
  }
160
186
  }
161
187