@instructure/ui-themes 11.7.3-snapshot-25 → 11.7.3-snapshot-26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +5 -2
- package/es/themes/canvas/index.js +13 -14
- package/es/utils/getUIColors.js +32 -32
- package/lib/themes/canvas/index.js +14 -14
- package/lib/utils/getUIColors.js +32 -32
- package/package.json +3 -3
- package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,9 +3,12 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
## [11.7.3-snapshot-
|
|
6
|
+
## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
|
|
9
12
|
|
|
10
13
|
|
|
11
14
|
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts0, _colors$contrasts1, _colors$contrasts10, _colors$contrasts11;
|
|
2
1
|
/*
|
|
3
2
|
* The MIT License (MIT)
|
|
4
3
|
*
|
|
@@ -29,26 +28,26 @@ const key = 'canvas';
|
|
|
29
28
|
const brandVariables = {
|
|
30
29
|
/* Defaults for Canvas account branding variables: */
|
|
31
30
|
// used for border/background/shadow colors in many places
|
|
32
|
-
'ic-brand-primary': colors
|
|
31
|
+
'ic-brand-primary': colors?.contrasts?.blue4570,
|
|
33
32
|
// used in lots of places for text color
|
|
34
|
-
'ic-brand-font-color-dark': colors
|
|
33
|
+
'ic-brand-font-color-dark': colors?.contrasts?.grey125125,
|
|
35
34
|
// used by Link and links in Billboard
|
|
36
|
-
'ic-link-color': colors
|
|
35
|
+
'ic-link-color': colors?.contrasts?.blue5782,
|
|
37
36
|
'ic-link-decoration': 'none',
|
|
38
37
|
// Used by BaseButton and its subcomponents
|
|
39
|
-
'ic-brand-button--primary-bgd': colors
|
|
40
|
-
'ic-brand-button--primary-text': colors
|
|
41
|
-
'ic-brand-button--secondary-bgd': colors
|
|
38
|
+
'ic-brand-button--primary-bgd': colors?.contrasts?.blue4570,
|
|
39
|
+
'ic-brand-button--primary-text': colors?.contrasts?.white1010,
|
|
40
|
+
'ic-brand-button--secondary-bgd': colors?.contrasts?.grey125125,
|
|
42
41
|
// unused!
|
|
43
|
-
'ic-brand-button--secondary-text': colors
|
|
42
|
+
'ic-brand-button--secondary-text': colors?.contrasts?.white1010,
|
|
44
43
|
// unused!
|
|
45
44
|
// these are used only by SideNavBar
|
|
46
|
-
'ic-brand-global-nav-bgd': colors
|
|
47
|
-
'ic-global-nav-link-hover': colors
|
|
48
|
-
'ic-brand-global-nav-ic-icon-svg-fill': colors
|
|
49
|
-
'ic-brand-global-nav-ic-icon-svg-fill--active': colors
|
|
50
|
-
'ic-brand-global-nav-menu-item__text-color': colors
|
|
51
|
-
'ic-brand-global-nav-menu-item__text-color--active': colors
|
|
45
|
+
'ic-brand-global-nav-bgd': colors?.contrasts?.grey100100,
|
|
46
|
+
'ic-global-nav-link-hover': colors?.contrasts?.grey125125,
|
|
47
|
+
'ic-brand-global-nav-ic-icon-svg-fill': colors?.contrasts?.white1010,
|
|
48
|
+
'ic-brand-global-nav-ic-icon-svg-fill--active': colors?.contrasts?.blue4570,
|
|
49
|
+
'ic-brand-global-nav-menu-item__text-color': colors?.contrasts?.white1010,
|
|
50
|
+
'ic-brand-global-nav-menu-item__text-color--active': colors?.contrasts?.blue4570
|
|
52
51
|
};
|
|
53
52
|
/**
|
|
54
53
|
* Canvas theme object
|
package/es/utils/getUIColors.js
CHANGED
|
@@ -23,37 +23,37 @@
|
|
|
23
23
|
*/
|
|
24
24
|
|
|
25
25
|
export const getUIColors = contrasts => ({
|
|
26
|
-
surfacePagePrimary: contrasts
|
|
27
|
-
surfacePageSecondary: contrasts
|
|
28
|
-
surfaceCardPrimary: contrasts
|
|
29
|
-
surfaceCardSecondary: contrasts
|
|
30
|
-
surfaceDark: contrasts
|
|
31
|
-
textTitle: contrasts
|
|
32
|
-
textDescription: contrasts
|
|
33
|
-
textBody: contrasts
|
|
34
|
-
textTimestamp: contrasts
|
|
35
|
-
textAuthor: contrasts
|
|
36
|
-
textDatapoint: contrasts
|
|
37
|
-
textLink: contrasts
|
|
38
|
-
textPlaceholder: contrasts
|
|
39
|
-
textSuccess: contrasts
|
|
40
|
-
textWarning: contrasts
|
|
41
|
-
textError: contrasts
|
|
42
|
-
lineStroke: contrasts
|
|
43
|
-
lineDivider: contrasts
|
|
44
|
-
surfaceOverlayGrey: contrasts
|
|
45
|
-
surfaceOverlayWhite: contrasts
|
|
46
|
-
surfaceAttention: contrasts
|
|
47
|
-
surfaceSuccess: contrasts
|
|
48
|
-
surfaceWarning: contrasts
|
|
49
|
-
surfaceError: contrasts
|
|
50
|
-
surfaceDivider: contrasts
|
|
51
|
-
textSurfaceColored: contrasts
|
|
52
|
-
iconDefault: contrasts
|
|
53
|
-
iconSuccess: contrasts
|
|
54
|
-
iconWarning: contrasts
|
|
55
|
-
iconError: contrasts
|
|
56
|
-
iconSurfaceColored: contrasts
|
|
57
|
-
lineConnector: contrasts
|
|
26
|
+
surfacePagePrimary: contrasts?.white1010,
|
|
27
|
+
surfacePageSecondary: contrasts?.grey1111,
|
|
28
|
+
surfaceCardPrimary: contrasts?.white1010,
|
|
29
|
+
surfaceCardSecondary: contrasts?.grey1111,
|
|
30
|
+
surfaceDark: contrasts?.grey100100,
|
|
31
|
+
textTitle: contrasts?.grey125125,
|
|
32
|
+
textDescription: contrasts?.grey125125,
|
|
33
|
+
textBody: contrasts?.grey125125,
|
|
34
|
+
textTimestamp: contrasts?.grey5782,
|
|
35
|
+
textAuthor: contrasts?.grey5782,
|
|
36
|
+
textDatapoint: contrasts?.grey5782,
|
|
37
|
+
textLink: contrasts?.blue5782,
|
|
38
|
+
textPlaceholder: contrasts?.grey2424,
|
|
39
|
+
textSuccess: contrasts?.green5782,
|
|
40
|
+
textWarning: contrasts?.orange5782,
|
|
41
|
+
textError: contrasts?.red5782,
|
|
42
|
+
lineStroke: contrasts?.grey1424,
|
|
43
|
+
lineDivider: contrasts?.grey1214,
|
|
44
|
+
surfaceOverlayGrey: contrasts?.grey100100op75,
|
|
45
|
+
surfaceOverlayWhite: contrasts?.white1010op75,
|
|
46
|
+
surfaceAttention: contrasts?.blue4570,
|
|
47
|
+
surfaceSuccess: contrasts?.green4570,
|
|
48
|
+
surfaceWarning: contrasts?.orange4570,
|
|
49
|
+
surfaceError: contrasts?.red4570,
|
|
50
|
+
surfaceDivider: contrasts?.grey1214,
|
|
51
|
+
textSurfaceColored: contrasts?.white1010,
|
|
52
|
+
iconDefault: contrasts?.grey125125,
|
|
53
|
+
iconSuccess: contrasts?.green4570,
|
|
54
|
+
iconWarning: contrasts?.orange4570,
|
|
55
|
+
iconError: contrasts?.red4570,
|
|
56
|
+
iconSurfaceColored: contrasts?.white1010,
|
|
57
|
+
lineConnector: contrasts?.grey1424
|
|
58
58
|
});
|
|
59
59
|
export default getUIColors;
|
|
@@ -8,7 +8,6 @@ exports.default = void 0;
|
|
|
8
8
|
var _legacySharedThemeTokens = _interopRequireDefault(require("../../legacySharedThemeTokens"));
|
|
9
9
|
var _colors = require("./colors");
|
|
10
10
|
var _newThemeTokens = require("../newThemeTokens");
|
|
11
|
-
var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts0, _colors$contrasts1, _colors$contrasts10, _colors$contrasts11;
|
|
12
11
|
/*
|
|
13
12
|
* The MIT License (MIT)
|
|
14
13
|
*
|
|
@@ -32,30 +31,31 @@ var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts
|
|
|
32
31
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
33
32
|
* SOFTWARE.
|
|
34
33
|
*/
|
|
34
|
+
|
|
35
35
|
const key = 'canvas';
|
|
36
36
|
const brandVariables = {
|
|
37
37
|
/* Defaults for Canvas account branding variables: */
|
|
38
38
|
// used for border/background/shadow colors in many places
|
|
39
|
-
'ic-brand-primary': _colors.colors
|
|
39
|
+
'ic-brand-primary': _colors.colors?.contrasts?.blue4570,
|
|
40
40
|
// used in lots of places for text color
|
|
41
|
-
'ic-brand-font-color-dark': _colors.colors
|
|
41
|
+
'ic-brand-font-color-dark': _colors.colors?.contrasts?.grey125125,
|
|
42
42
|
// used by Link and links in Billboard
|
|
43
|
-
'ic-link-color': _colors.colors
|
|
43
|
+
'ic-link-color': _colors.colors?.contrasts?.blue5782,
|
|
44
44
|
'ic-link-decoration': 'none',
|
|
45
45
|
// Used by BaseButton and its subcomponents
|
|
46
|
-
'ic-brand-button--primary-bgd': _colors.colors
|
|
47
|
-
'ic-brand-button--primary-text': _colors.colors
|
|
48
|
-
'ic-brand-button--secondary-bgd': _colors.colors
|
|
46
|
+
'ic-brand-button--primary-bgd': _colors.colors?.contrasts?.blue4570,
|
|
47
|
+
'ic-brand-button--primary-text': _colors.colors?.contrasts?.white1010,
|
|
48
|
+
'ic-brand-button--secondary-bgd': _colors.colors?.contrasts?.grey125125,
|
|
49
49
|
// unused!
|
|
50
|
-
'ic-brand-button--secondary-text': _colors.colors
|
|
50
|
+
'ic-brand-button--secondary-text': _colors.colors?.contrasts?.white1010,
|
|
51
51
|
// unused!
|
|
52
52
|
// these are used only by SideNavBar
|
|
53
|
-
'ic-brand-global-nav-bgd': _colors.colors
|
|
54
|
-
'ic-global-nav-link-hover': _colors.colors
|
|
55
|
-
'ic-brand-global-nav-ic-icon-svg-fill': _colors.colors
|
|
56
|
-
'ic-brand-global-nav-ic-icon-svg-fill--active': _colors.colors
|
|
57
|
-
'ic-brand-global-nav-menu-item__text-color': _colors.colors
|
|
58
|
-
'ic-brand-global-nav-menu-item__text-color--active': _colors.colors
|
|
53
|
+
'ic-brand-global-nav-bgd': _colors.colors?.contrasts?.grey100100,
|
|
54
|
+
'ic-global-nav-link-hover': _colors.colors?.contrasts?.grey125125,
|
|
55
|
+
'ic-brand-global-nav-ic-icon-svg-fill': _colors.colors?.contrasts?.white1010,
|
|
56
|
+
'ic-brand-global-nav-ic-icon-svg-fill--active': _colors.colors?.contrasts?.blue4570,
|
|
57
|
+
'ic-brand-global-nav-menu-item__text-color': _colors.colors?.contrasts?.white1010,
|
|
58
|
+
'ic-brand-global-nav-menu-item__text-color--active': _colors.colors?.contrasts?.blue4570
|
|
59
59
|
};
|
|
60
60
|
/**
|
|
61
61
|
* Canvas theme object
|
package/lib/utils/getUIColors.js
CHANGED
|
@@ -29,38 +29,38 @@ exports.getUIColors = exports.default = void 0;
|
|
|
29
29
|
*/
|
|
30
30
|
|
|
31
31
|
const getUIColors = contrasts => ({
|
|
32
|
-
surfacePagePrimary: contrasts
|
|
33
|
-
surfacePageSecondary: contrasts
|
|
34
|
-
surfaceCardPrimary: contrasts
|
|
35
|
-
surfaceCardSecondary: contrasts
|
|
36
|
-
surfaceDark: contrasts
|
|
37
|
-
textTitle: contrasts
|
|
38
|
-
textDescription: contrasts
|
|
39
|
-
textBody: contrasts
|
|
40
|
-
textTimestamp: contrasts
|
|
41
|
-
textAuthor: contrasts
|
|
42
|
-
textDatapoint: contrasts
|
|
43
|
-
textLink: contrasts
|
|
44
|
-
textPlaceholder: contrasts
|
|
45
|
-
textSuccess: contrasts
|
|
46
|
-
textWarning: contrasts
|
|
47
|
-
textError: contrasts
|
|
48
|
-
lineStroke: contrasts
|
|
49
|
-
lineDivider: contrasts
|
|
50
|
-
surfaceOverlayGrey: contrasts
|
|
51
|
-
surfaceOverlayWhite: contrasts
|
|
52
|
-
surfaceAttention: contrasts
|
|
53
|
-
surfaceSuccess: contrasts
|
|
54
|
-
surfaceWarning: contrasts
|
|
55
|
-
surfaceError: contrasts
|
|
56
|
-
surfaceDivider: contrasts
|
|
57
|
-
textSurfaceColored: contrasts
|
|
58
|
-
iconDefault: contrasts
|
|
59
|
-
iconSuccess: contrasts
|
|
60
|
-
iconWarning: contrasts
|
|
61
|
-
iconError: contrasts
|
|
62
|
-
iconSurfaceColored: contrasts
|
|
63
|
-
lineConnector: contrasts
|
|
32
|
+
surfacePagePrimary: contrasts?.white1010,
|
|
33
|
+
surfacePageSecondary: contrasts?.grey1111,
|
|
34
|
+
surfaceCardPrimary: contrasts?.white1010,
|
|
35
|
+
surfaceCardSecondary: contrasts?.grey1111,
|
|
36
|
+
surfaceDark: contrasts?.grey100100,
|
|
37
|
+
textTitle: contrasts?.grey125125,
|
|
38
|
+
textDescription: contrasts?.grey125125,
|
|
39
|
+
textBody: contrasts?.grey125125,
|
|
40
|
+
textTimestamp: contrasts?.grey5782,
|
|
41
|
+
textAuthor: contrasts?.grey5782,
|
|
42
|
+
textDatapoint: contrasts?.grey5782,
|
|
43
|
+
textLink: contrasts?.blue5782,
|
|
44
|
+
textPlaceholder: contrasts?.grey2424,
|
|
45
|
+
textSuccess: contrasts?.green5782,
|
|
46
|
+
textWarning: contrasts?.orange5782,
|
|
47
|
+
textError: contrasts?.red5782,
|
|
48
|
+
lineStroke: contrasts?.grey1424,
|
|
49
|
+
lineDivider: contrasts?.grey1214,
|
|
50
|
+
surfaceOverlayGrey: contrasts?.grey100100op75,
|
|
51
|
+
surfaceOverlayWhite: contrasts?.white1010op75,
|
|
52
|
+
surfaceAttention: contrasts?.blue4570,
|
|
53
|
+
surfaceSuccess: contrasts?.green4570,
|
|
54
|
+
surfaceWarning: contrasts?.orange4570,
|
|
55
|
+
surfaceError: contrasts?.red4570,
|
|
56
|
+
surfaceDivider: contrasts?.grey1214,
|
|
57
|
+
textSurfaceColored: contrasts?.white1010,
|
|
58
|
+
iconDefault: contrasts?.grey125125,
|
|
59
|
+
iconSuccess: contrasts?.green4570,
|
|
60
|
+
iconWarning: contrasts?.orange4570,
|
|
61
|
+
iconError: contrasts?.red4570,
|
|
62
|
+
iconSurfaceColored: contrasts?.white1010,
|
|
63
|
+
lineConnector: contrasts?.grey1424
|
|
64
64
|
});
|
|
65
65
|
exports.getUIColors = getUIColors;
|
|
66
66
|
var _default = exports.default = getUIColors;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-themes",
|
|
3
|
-
"version": "11.7.3-snapshot-
|
|
3
|
+
"version": "11.7.3-snapshot-26",
|
|
4
4
|
"description": "A library of instructure themes",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -17,11 +17,11 @@
|
|
|
17
17
|
"@testing-library/jest-dom": "^6.6.3",
|
|
18
18
|
"@testing-library/react": "15.0.7",
|
|
19
19
|
"vitest": "^3.2.2",
|
|
20
|
-
"@instructure/ui-babel-preset": "11.7.3-snapshot-
|
|
20
|
+
"@instructure/ui-babel-preset": "11.7.3-snapshot-26"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@tokens-studio/types": "^0.5.2",
|
|
24
|
-
"@instructure/shared-types": "11.7.3-snapshot-
|
|
24
|
+
"@instructure/shared-types": "11.7.3-snapshot-26"
|
|
25
25
|
},
|
|
26
26
|
"publishConfig": {
|
|
27
27
|
"access": "public"
|