@instructure/ui-themes 11.7.4-snapshot-127 → 11.7.4-snapshot-129
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 +1 -1
- package/es/themes/newThemeTokens/dark/components/badge.js +4 -3
- package/es/themes/newThemeTokens/dark/components/baseButton.js +11 -4
- package/es/themes/newThemeTokens/dark/components/truncateText.js +1 -2
- package/es/themes/newThemeTokens/legacyCanvas/components/badge.js +5 -4
- package/es/themes/newThemeTokens/legacyCanvas/components/truncateText.js +1 -2
- package/es/themes/newThemeTokens/legacyCanvasHighContrast/components/badge.js +5 -4
- package/es/themes/newThemeTokens/legacyCanvasHighContrast/components/truncateText.js +1 -2
- package/es/themes/newThemeTokens/light/components/badge.js +4 -3
- package/es/themes/newThemeTokens/light/components/baseButton.js +11 -4
- package/es/themes/newThemeTokens/light/components/truncateText.js +1 -2
- package/es/themes/newThemeTokens/light/semantics.js +1 -1
- package/lib/themes/newThemeTokens/dark/components/badge.js +4 -3
- package/lib/themes/newThemeTokens/dark/components/baseButton.js +11 -4
- package/lib/themes/newThemeTokens/dark/components/truncateText.js +1 -2
- package/lib/themes/newThemeTokens/legacyCanvas/components/badge.js +5 -4
- package/lib/themes/newThemeTokens/legacyCanvas/components/truncateText.js +1 -2
- package/lib/themes/newThemeTokens/legacyCanvasHighContrast/components/badge.js +5 -4
- package/lib/themes/newThemeTokens/legacyCanvasHighContrast/components/truncateText.js +1 -2
- package/lib/themes/newThemeTokens/light/components/badge.js +4 -3
- package/lib/themes/newThemeTokens/light/components/baseButton.js +11 -4
- package/lib/themes/newThemeTokens/light/components/truncateText.js +1 -2
- package/lib/themes/newThemeTokens/light/semantics.js +1 -1
- package/package.json +3 -3
- package/src/themes/newThemeTokens/componentTypes/badge.ts +1 -0
- package/src/themes/newThemeTokens/componentTypes/truncateText.ts +1 -1
- package/src/themes/newThemeTokens/dark/components/badge.ts +3 -2
- package/src/themes/newThemeTokens/dark/components/baseButton.ts +7 -4
- package/src/themes/newThemeTokens/dark/components/truncateText.ts +1 -4
- package/src/themes/newThemeTokens/legacyCanvas/components/badge.ts +4 -3
- package/src/themes/newThemeTokens/legacyCanvas/components/truncateText.ts +1 -4
- package/src/themes/newThemeTokens/legacyCanvasHighContrast/components/badge.ts +4 -3
- package/src/themes/newThemeTokens/legacyCanvasHighContrast/components/truncateText.ts +1 -4
- package/src/themes/newThemeTokens/light/components/badge.ts +3 -2
- package/src/themes/newThemeTokens/light/components/baseButton.ts +7 -4
- package/src/themes/newThemeTokens/light/components/truncateText.ts +1 -4
- package/src/themes/newThemeTokens/light/semantics.ts +2 -2
- package/tsconfig.build.tsbuildinfo +1 -1
- package/types/themes/newThemeTokens/componentTypes/badge.d.ts +1 -0
- package/types/themes/newThemeTokens/componentTypes/badge.d.ts.map +1 -1
- package/types/themes/newThemeTokens/componentTypes/truncateText.d.ts +0 -1
- package/types/themes/newThemeTokens/componentTypes/truncateText.d.ts.map +1 -1
- package/types/themes/newThemeTokens/dark/components/badge.d.ts +1 -0
- package/types/themes/newThemeTokens/dark/components/badge.d.ts.map +1 -1
- package/types/themes/newThemeTokens/dark/components/baseButton.d.ts +8 -1
- package/types/themes/newThemeTokens/dark/components/baseButton.d.ts.map +1 -1
- package/types/themes/newThemeTokens/dark/components/truncateText.d.ts +0 -1
- package/types/themes/newThemeTokens/dark/components/truncateText.d.ts.map +1 -1
- package/types/themes/newThemeTokens/legacyCanvas/components/badge.d.ts +2 -1
- package/types/themes/newThemeTokens/legacyCanvas/components/badge.d.ts.map +1 -1
- package/types/themes/newThemeTokens/legacyCanvas/components/truncateText.d.ts +0 -1
- package/types/themes/newThemeTokens/legacyCanvas/components/truncateText.d.ts.map +1 -1
- package/types/themes/newThemeTokens/legacyCanvasHighContrast/components/badge.d.ts +2 -1
- package/types/themes/newThemeTokens/legacyCanvasHighContrast/components/badge.d.ts.map +1 -1
- package/types/themes/newThemeTokens/legacyCanvasHighContrast/components/truncateText.d.ts +0 -1
- package/types/themes/newThemeTokens/legacyCanvasHighContrast/components/truncateText.d.ts.map +1 -1
- package/types/themes/newThemeTokens/light/components/badge.d.ts +1 -0
- package/types/themes/newThemeTokens/light/components/badge.d.ts.map +1 -1
- package/types/themes/newThemeTokens/light/components/baseButton.d.ts +8 -1
- package/types/themes/newThemeTokens/light/components/baseButton.d.ts.map +1 -1
- package/types/themes/newThemeTokens/light/components/truncateText.d.ts +0 -1
- package/types/themes/newThemeTokens/light/components/truncateText.d.ts.map +1 -1
- package/types/themes/newThemeTokens/light/semantics.d.ts +1 -1
- package/types/themes/newThemeTokens/light/semantics.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
|
-
## [11.7.4-snapshot-
|
|
6
|
+
## [11.7.4-snapshot-129](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-129) (2026-07-23)
|
|
7
7
|
|
|
8
8
|
**Note:** Version bump only for package @instructure/ui-themes
|
|
9
9
|
|
|
@@ -30,14 +30,15 @@ const badge = semantic => ({
|
|
|
30
30
|
colorDanger: semantic.color.background.error,
|
|
31
31
|
colorSuccess: semantic.color.background.success,
|
|
32
32
|
colorPrimary: semantic.color.institutional.brandPrimary,
|
|
33
|
-
fontSize: semantic.fontSize.
|
|
33
|
+
fontSize: semantic.fontSize.textXs,
|
|
34
34
|
fontWeight: semantic.fontWeight.body.strong,
|
|
35
35
|
sizeNotification: "0.75rem",
|
|
36
|
-
size: "
|
|
36
|
+
size: "1rem",
|
|
37
37
|
padding: semantic.spacing.spaceXs,
|
|
38
38
|
notificationOffset: "0.125rem",
|
|
39
39
|
notificationZIndex: 1,
|
|
40
40
|
pulseBorderThickness: "0.125rem",
|
|
41
|
-
countOffset: "0.5rem"
|
|
41
|
+
countOffset: "0.5rem",
|
|
42
|
+
primaryTextColor: semantic.color.text.inverse
|
|
42
43
|
});
|
|
43
44
|
export default badge;
|
|
@@ -50,7 +50,7 @@ const baseButton = semantic => ({
|
|
|
50
50
|
value: semantic.color.institutional.brandButtonPrimaryBgd,
|
|
51
51
|
modify: {
|
|
52
52
|
type: "alpha",
|
|
53
|
-
value: 0.
|
|
53
|
+
value: 0.2,
|
|
54
54
|
space: "hsl"
|
|
55
55
|
}
|
|
56
56
|
},
|
|
@@ -58,7 +58,7 @@ const baseButton = semantic => ({
|
|
|
58
58
|
value: semantic.color.institutional.brandButtonPrimaryBgd,
|
|
59
59
|
modify: {
|
|
60
60
|
type: "alpha",
|
|
61
|
-
value: 0.
|
|
61
|
+
value: 0.4,
|
|
62
62
|
space: "hsl"
|
|
63
63
|
}
|
|
64
64
|
},
|
|
@@ -67,7 +67,7 @@ const baseButton = semantic => ({
|
|
|
67
67
|
value: semantic.color.institutional.brandButtonPrimaryBgd,
|
|
68
68
|
modify: {
|
|
69
69
|
type: "alpha",
|
|
70
|
-
value: 0.
|
|
70
|
+
value: 0.1,
|
|
71
71
|
space: "hsl"
|
|
72
72
|
}
|
|
73
73
|
},
|
|
@@ -134,7 +134,14 @@ const baseButton = semantic => ({
|
|
|
134
134
|
secondaryDisabledBackgroundColor: semantic.color.background.interactive.action.secondary.disabled,
|
|
135
135
|
secondaryDisabledBorderColor: semantic.color.stroke.interactive.action.secondary.disabled,
|
|
136
136
|
secondaryDisabledTextColor: semantic.color.text.interactive.action.secondary.disabled,
|
|
137
|
-
secondaryGhostBorderColor:
|
|
137
|
+
secondaryGhostBorderColor: {
|
|
138
|
+
value: semantic.color.institutional.brandButtonSecondaryText,
|
|
139
|
+
modify: {
|
|
140
|
+
type: "alpha",
|
|
141
|
+
value: 0.2,
|
|
142
|
+
space: "hsl"
|
|
143
|
+
}
|
|
144
|
+
},
|
|
138
145
|
secondaryGhostColor: semantic.color.institutional.brandButtonSecondaryText,
|
|
139
146
|
secondaryGhostHoverBackground: semantic.color.institutional.brandButtonSecondaryBgd,
|
|
140
147
|
secondaryHoverBackground: {
|
|
@@ -30,14 +30,15 @@ const badge = semantic => ({
|
|
|
30
30
|
colorDanger: semantic.color.background.error,
|
|
31
31
|
colorSuccess: semantic.color.background.success,
|
|
32
32
|
colorPrimary: semantic.color.institutional.brandPrimary,
|
|
33
|
-
fontSize: semantic.fontSize.
|
|
33
|
+
fontSize: semantic.fontSize.textXs,
|
|
34
34
|
fontWeight: semantic.fontWeight.body.strong,
|
|
35
35
|
sizeNotification: "0.75rem",
|
|
36
|
-
size: "
|
|
36
|
+
size: "1rem",
|
|
37
37
|
padding: semantic.spacing.spaceXs,
|
|
38
|
-
notificationZIndex: 1,
|
|
39
38
|
notificationOffset: "0.125rem",
|
|
39
|
+
notificationZIndex: 1,
|
|
40
40
|
pulseBorderThickness: "0.125rem",
|
|
41
|
-
countOffset: "0.5rem"
|
|
41
|
+
countOffset: "0.5rem",
|
|
42
|
+
primaryTextColor: semantic.color.text.inverse
|
|
42
43
|
});
|
|
43
44
|
export default badge;
|
|
@@ -30,14 +30,15 @@ const badge = semantic => ({
|
|
|
30
30
|
colorDanger: semantic.color.background.error,
|
|
31
31
|
colorSuccess: semantic.color.background.success,
|
|
32
32
|
colorPrimary: semantic.color.institutional.brandPrimary,
|
|
33
|
-
fontSize: semantic.fontSize.
|
|
33
|
+
fontSize: semantic.fontSize.textXs,
|
|
34
34
|
fontWeight: semantic.fontWeight.body.strong,
|
|
35
35
|
sizeNotification: "0.75rem",
|
|
36
|
-
size: "
|
|
36
|
+
size: "1rem",
|
|
37
37
|
padding: semantic.spacing.spaceXs,
|
|
38
|
-
notificationZIndex: 1,
|
|
39
38
|
notificationOffset: "0.125rem",
|
|
39
|
+
notificationZIndex: 1,
|
|
40
40
|
pulseBorderThickness: "0.125rem",
|
|
41
|
-
countOffset: "0.5rem"
|
|
41
|
+
countOffset: "0.5rem",
|
|
42
|
+
primaryTextColor: semantic.color.text.inverse
|
|
42
43
|
});
|
|
43
44
|
export default badge;
|
|
@@ -30,14 +30,15 @@ const badge = semantic => ({
|
|
|
30
30
|
colorDanger: semantic.color.background.error,
|
|
31
31
|
colorSuccess: semantic.color.background.success,
|
|
32
32
|
colorPrimary: semantic.color.institutional.brandPrimary,
|
|
33
|
-
fontSize: semantic.fontSize.
|
|
33
|
+
fontSize: semantic.fontSize.textXs,
|
|
34
34
|
fontWeight: semantic.fontWeight.body.strong,
|
|
35
35
|
sizeNotification: "0.75rem",
|
|
36
|
-
size: "
|
|
36
|
+
size: "1rem",
|
|
37
37
|
padding: semantic.spacing.spaceXs,
|
|
38
38
|
notificationOffset: "0.125rem",
|
|
39
39
|
notificationZIndex: 1,
|
|
40
40
|
pulseBorderThickness: "0.125rem",
|
|
41
|
-
countOffset: "0.5rem"
|
|
41
|
+
countOffset: "0.5rem",
|
|
42
|
+
primaryTextColor: semantic.color.text.inverse
|
|
42
43
|
});
|
|
43
44
|
export default badge;
|
|
@@ -50,7 +50,7 @@ const baseButton = semantic => ({
|
|
|
50
50
|
value: semantic.color.institutional.brandButtonPrimaryBgd,
|
|
51
51
|
modify: {
|
|
52
52
|
type: "alpha",
|
|
53
|
-
value: 0.
|
|
53
|
+
value: 0.2,
|
|
54
54
|
space: "hsl"
|
|
55
55
|
}
|
|
56
56
|
},
|
|
@@ -58,7 +58,7 @@ const baseButton = semantic => ({
|
|
|
58
58
|
value: semantic.color.institutional.brandButtonPrimaryBgd,
|
|
59
59
|
modify: {
|
|
60
60
|
type: "alpha",
|
|
61
|
-
value: 0.
|
|
61
|
+
value: 0.4,
|
|
62
62
|
space: "hsl"
|
|
63
63
|
}
|
|
64
64
|
},
|
|
@@ -67,7 +67,7 @@ const baseButton = semantic => ({
|
|
|
67
67
|
value: semantic.color.institutional.brandButtonPrimaryBgd,
|
|
68
68
|
modify: {
|
|
69
69
|
type: "alpha",
|
|
70
|
-
value: 0.
|
|
70
|
+
value: 0.1,
|
|
71
71
|
space: "hsl"
|
|
72
72
|
}
|
|
73
73
|
},
|
|
@@ -134,7 +134,14 @@ const baseButton = semantic => ({
|
|
|
134
134
|
secondaryDisabledBackgroundColor: semantic.color.background.interactive.action.secondary.disabled,
|
|
135
135
|
secondaryDisabledBorderColor: semantic.color.stroke.interactive.action.secondary.disabled,
|
|
136
136
|
secondaryDisabledTextColor: semantic.color.text.interactive.action.secondary.disabled,
|
|
137
|
-
secondaryGhostBorderColor:
|
|
137
|
+
secondaryGhostBorderColor: {
|
|
138
|
+
value: semantic.color.institutional.brandButtonSecondaryText,
|
|
139
|
+
modify: {
|
|
140
|
+
type: "alpha",
|
|
141
|
+
value: 0.2,
|
|
142
|
+
space: "hsl"
|
|
143
|
+
}
|
|
144
|
+
},
|
|
138
145
|
secondaryGhostColor: semantic.color.institutional.brandButtonSecondaryText,
|
|
139
146
|
secondaryGhostHoverBackground: semantic.color.institutional.brandButtonSecondaryBgd,
|
|
140
147
|
secondaryHoverBackground: {
|
|
@@ -719,7 +719,7 @@ const semantics = primitives => ({
|
|
|
719
719
|
},
|
|
720
720
|
"brandButtonSecondaryText": primitives.color.navy.navy170,
|
|
721
721
|
"brandGlobalNavBgd": primitives.color.white,
|
|
722
|
-
"globalNavLinkHover": primitives.color.
|
|
722
|
+
"globalNavLinkHover": primitives.color.navy.navy10,
|
|
723
723
|
"brandGlobalNavMenuItemTextColor": primitives.color.grey.grey170,
|
|
724
724
|
"brandGlobalNavMenuItemTextColorActive": primitives.color.white
|
|
725
725
|
}
|
|
@@ -36,14 +36,15 @@ const badge = semantic => ({
|
|
|
36
36
|
colorDanger: semantic.color.background.error,
|
|
37
37
|
colorSuccess: semantic.color.background.success,
|
|
38
38
|
colorPrimary: semantic.color.institutional.brandPrimary,
|
|
39
|
-
fontSize: semantic.fontSize.
|
|
39
|
+
fontSize: semantic.fontSize.textXs,
|
|
40
40
|
fontWeight: semantic.fontWeight.body.strong,
|
|
41
41
|
sizeNotification: "0.75rem",
|
|
42
|
-
size: "
|
|
42
|
+
size: "1rem",
|
|
43
43
|
padding: semantic.spacing.spaceXs,
|
|
44
44
|
notificationOffset: "0.125rem",
|
|
45
45
|
notificationZIndex: 1,
|
|
46
46
|
pulseBorderThickness: "0.125rem",
|
|
47
|
-
countOffset: "0.5rem"
|
|
47
|
+
countOffset: "0.5rem",
|
|
48
|
+
primaryTextColor: semantic.color.text.inverse
|
|
48
49
|
});
|
|
49
50
|
var _default = exports.default = badge;
|
|
@@ -56,7 +56,7 @@ const baseButton = semantic => ({
|
|
|
56
56
|
value: semantic.color.institutional.brandButtonPrimaryBgd,
|
|
57
57
|
modify: {
|
|
58
58
|
type: "alpha",
|
|
59
|
-
value: 0.
|
|
59
|
+
value: 0.2,
|
|
60
60
|
space: "hsl"
|
|
61
61
|
}
|
|
62
62
|
},
|
|
@@ -64,7 +64,7 @@ const baseButton = semantic => ({
|
|
|
64
64
|
value: semantic.color.institutional.brandButtonPrimaryBgd,
|
|
65
65
|
modify: {
|
|
66
66
|
type: "alpha",
|
|
67
|
-
value: 0.
|
|
67
|
+
value: 0.4,
|
|
68
68
|
space: "hsl"
|
|
69
69
|
}
|
|
70
70
|
},
|
|
@@ -73,7 +73,7 @@ const baseButton = semantic => ({
|
|
|
73
73
|
value: semantic.color.institutional.brandButtonPrimaryBgd,
|
|
74
74
|
modify: {
|
|
75
75
|
type: "alpha",
|
|
76
|
-
value: 0.
|
|
76
|
+
value: 0.1,
|
|
77
77
|
space: "hsl"
|
|
78
78
|
}
|
|
79
79
|
},
|
|
@@ -140,7 +140,14 @@ const baseButton = semantic => ({
|
|
|
140
140
|
secondaryDisabledBackgroundColor: semantic.color.background.interactive.action.secondary.disabled,
|
|
141
141
|
secondaryDisabledBorderColor: semantic.color.stroke.interactive.action.secondary.disabled,
|
|
142
142
|
secondaryDisabledTextColor: semantic.color.text.interactive.action.secondary.disabled,
|
|
143
|
-
secondaryGhostBorderColor:
|
|
143
|
+
secondaryGhostBorderColor: {
|
|
144
|
+
value: semantic.color.institutional.brandButtonSecondaryText,
|
|
145
|
+
modify: {
|
|
146
|
+
type: "alpha",
|
|
147
|
+
value: 0.2,
|
|
148
|
+
space: "hsl"
|
|
149
|
+
}
|
|
150
|
+
},
|
|
144
151
|
secondaryGhostColor: semantic.color.institutional.brandButtonSecondaryText,
|
|
145
152
|
secondaryGhostHoverBackground: semantic.color.institutional.brandButtonSecondaryBgd,
|
|
146
153
|
secondaryHoverBackground: {
|
|
@@ -29,7 +29,6 @@ exports.default = void 0;
|
|
|
29
29
|
*/
|
|
30
30
|
|
|
31
31
|
const truncateText = semantic => ({
|
|
32
|
-
fontFamily: semantic.fontFamily.base
|
|
33
|
-
lineHeight: semantic.lineHeight.paragraph.base
|
|
32
|
+
fontFamily: semantic.fontFamily.base
|
|
34
33
|
});
|
|
35
34
|
var _default = exports.default = truncateText;
|
|
@@ -36,14 +36,15 @@ const badge = semantic => ({
|
|
|
36
36
|
colorDanger: semantic.color.background.error,
|
|
37
37
|
colorSuccess: semantic.color.background.success,
|
|
38
38
|
colorPrimary: semantic.color.institutional.brandPrimary,
|
|
39
|
-
fontSize: semantic.fontSize.
|
|
39
|
+
fontSize: semantic.fontSize.textXs,
|
|
40
40
|
fontWeight: semantic.fontWeight.body.strong,
|
|
41
41
|
sizeNotification: "0.75rem",
|
|
42
|
-
size: "
|
|
42
|
+
size: "1rem",
|
|
43
43
|
padding: semantic.spacing.spaceXs,
|
|
44
|
-
notificationZIndex: 1,
|
|
45
44
|
notificationOffset: "0.125rem",
|
|
45
|
+
notificationZIndex: 1,
|
|
46
46
|
pulseBorderThickness: "0.125rem",
|
|
47
|
-
countOffset: "0.5rem"
|
|
47
|
+
countOffset: "0.5rem",
|
|
48
|
+
primaryTextColor: semantic.color.text.inverse
|
|
48
49
|
});
|
|
49
50
|
var _default = exports.default = badge;
|
|
@@ -29,7 +29,6 @@ exports.default = void 0;
|
|
|
29
29
|
*/
|
|
30
30
|
|
|
31
31
|
const truncateText = semantic => ({
|
|
32
|
-
fontFamily: semantic.fontFamily.base
|
|
33
|
-
lineHeight: semantic.lineHeight.paragraph.base
|
|
32
|
+
fontFamily: semantic.fontFamily.base
|
|
34
33
|
});
|
|
35
34
|
var _default = exports.default = truncateText;
|
|
@@ -36,14 +36,15 @@ const badge = semantic => ({
|
|
|
36
36
|
colorDanger: semantic.color.background.error,
|
|
37
37
|
colorSuccess: semantic.color.background.success,
|
|
38
38
|
colorPrimary: semantic.color.institutional.brandPrimary,
|
|
39
|
-
fontSize: semantic.fontSize.
|
|
39
|
+
fontSize: semantic.fontSize.textXs,
|
|
40
40
|
fontWeight: semantic.fontWeight.body.strong,
|
|
41
41
|
sizeNotification: "0.75rem",
|
|
42
|
-
size: "
|
|
42
|
+
size: "1rem",
|
|
43
43
|
padding: semantic.spacing.spaceXs,
|
|
44
|
-
notificationZIndex: 1,
|
|
45
44
|
notificationOffset: "0.125rem",
|
|
45
|
+
notificationZIndex: 1,
|
|
46
46
|
pulseBorderThickness: "0.125rem",
|
|
47
|
-
countOffset: "0.5rem"
|
|
47
|
+
countOffset: "0.5rem",
|
|
48
|
+
primaryTextColor: semantic.color.text.inverse
|
|
48
49
|
});
|
|
49
50
|
var _default = exports.default = badge;
|
|
@@ -29,7 +29,6 @@ exports.default = void 0;
|
|
|
29
29
|
*/
|
|
30
30
|
|
|
31
31
|
const truncateText = semantic => ({
|
|
32
|
-
fontFamily: semantic.fontFamily.base
|
|
33
|
-
lineHeight: semantic.lineHeight.paragraph.base
|
|
32
|
+
fontFamily: semantic.fontFamily.base
|
|
34
33
|
});
|
|
35
34
|
var _default = exports.default = truncateText;
|
|
@@ -36,14 +36,15 @@ const badge = semantic => ({
|
|
|
36
36
|
colorDanger: semantic.color.background.error,
|
|
37
37
|
colorSuccess: semantic.color.background.success,
|
|
38
38
|
colorPrimary: semantic.color.institutional.brandPrimary,
|
|
39
|
-
fontSize: semantic.fontSize.
|
|
39
|
+
fontSize: semantic.fontSize.textXs,
|
|
40
40
|
fontWeight: semantic.fontWeight.body.strong,
|
|
41
41
|
sizeNotification: "0.75rem",
|
|
42
|
-
size: "
|
|
42
|
+
size: "1rem",
|
|
43
43
|
padding: semantic.spacing.spaceXs,
|
|
44
44
|
notificationOffset: "0.125rem",
|
|
45
45
|
notificationZIndex: 1,
|
|
46
46
|
pulseBorderThickness: "0.125rem",
|
|
47
|
-
countOffset: "0.5rem"
|
|
47
|
+
countOffset: "0.5rem",
|
|
48
|
+
primaryTextColor: semantic.color.text.inverse
|
|
48
49
|
});
|
|
49
50
|
var _default = exports.default = badge;
|
|
@@ -56,7 +56,7 @@ const baseButton = semantic => ({
|
|
|
56
56
|
value: semantic.color.institutional.brandButtonPrimaryBgd,
|
|
57
57
|
modify: {
|
|
58
58
|
type: "alpha",
|
|
59
|
-
value: 0.
|
|
59
|
+
value: 0.2,
|
|
60
60
|
space: "hsl"
|
|
61
61
|
}
|
|
62
62
|
},
|
|
@@ -64,7 +64,7 @@ const baseButton = semantic => ({
|
|
|
64
64
|
value: semantic.color.institutional.brandButtonPrimaryBgd,
|
|
65
65
|
modify: {
|
|
66
66
|
type: "alpha",
|
|
67
|
-
value: 0.
|
|
67
|
+
value: 0.4,
|
|
68
68
|
space: "hsl"
|
|
69
69
|
}
|
|
70
70
|
},
|
|
@@ -73,7 +73,7 @@ const baseButton = semantic => ({
|
|
|
73
73
|
value: semantic.color.institutional.brandButtonPrimaryBgd,
|
|
74
74
|
modify: {
|
|
75
75
|
type: "alpha",
|
|
76
|
-
value: 0.
|
|
76
|
+
value: 0.1,
|
|
77
77
|
space: "hsl"
|
|
78
78
|
}
|
|
79
79
|
},
|
|
@@ -140,7 +140,14 @@ const baseButton = semantic => ({
|
|
|
140
140
|
secondaryDisabledBackgroundColor: semantic.color.background.interactive.action.secondary.disabled,
|
|
141
141
|
secondaryDisabledBorderColor: semantic.color.stroke.interactive.action.secondary.disabled,
|
|
142
142
|
secondaryDisabledTextColor: semantic.color.text.interactive.action.secondary.disabled,
|
|
143
|
-
secondaryGhostBorderColor:
|
|
143
|
+
secondaryGhostBorderColor: {
|
|
144
|
+
value: semantic.color.institutional.brandButtonSecondaryText,
|
|
145
|
+
modify: {
|
|
146
|
+
type: "alpha",
|
|
147
|
+
value: 0.2,
|
|
148
|
+
space: "hsl"
|
|
149
|
+
}
|
|
150
|
+
},
|
|
144
151
|
secondaryGhostColor: semantic.color.institutional.brandButtonSecondaryText,
|
|
145
152
|
secondaryGhostHoverBackground: semantic.color.institutional.brandButtonSecondaryBgd,
|
|
146
153
|
secondaryHoverBackground: {
|
|
@@ -29,7 +29,6 @@ exports.default = void 0;
|
|
|
29
29
|
*/
|
|
30
30
|
|
|
31
31
|
const truncateText = semantic => ({
|
|
32
|
-
fontFamily: semantic.fontFamily.base
|
|
33
|
-
lineHeight: semantic.lineHeight.paragraph.base
|
|
32
|
+
fontFamily: semantic.fontFamily.base
|
|
34
33
|
});
|
|
35
34
|
var _default = exports.default = truncateText;
|
|
@@ -725,7 +725,7 @@ const semantics = primitives => ({
|
|
|
725
725
|
},
|
|
726
726
|
"brandButtonSecondaryText": primitives.color.navy.navy170,
|
|
727
727
|
"brandGlobalNavBgd": primitives.color.white,
|
|
728
|
-
"globalNavLinkHover": primitives.color.
|
|
728
|
+
"globalNavLinkHover": primitives.color.navy.navy10,
|
|
729
729
|
"brandGlobalNavMenuItemTextColor": primitives.color.grey.grey170,
|
|
730
730
|
"brandGlobalNavMenuItemTextColorActive": primitives.color.white
|
|
731
731
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-themes",
|
|
3
|
-
"version": "11.7.4-snapshot-
|
|
3
|
+
"version": "11.7.4-snapshot-129",
|
|
4
4
|
"description": "A library of instructure themes",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -17,12 +17,12 @@
|
|
|
17
17
|
"@testing-library/jest-dom": "^6.9.1",
|
|
18
18
|
"@testing-library/react": "16.3.2",
|
|
19
19
|
"vitest": "^4.1.9",
|
|
20
|
-
"@instructure/ui-babel-preset": "11.7.4-snapshot-
|
|
20
|
+
"@instructure/ui-babel-preset": "11.7.4-snapshot-129"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@babel/runtime": "^7.29.7",
|
|
24
24
|
"@tokens-studio/types": "^0.5.2",
|
|
25
|
-
"@instructure/shared-types": "11.7.4-snapshot-
|
|
25
|
+
"@instructure/shared-types": "11.7.4-snapshot-129"
|
|
26
26
|
},
|
|
27
27
|
"publishConfig": {
|
|
28
28
|
"access": "public"
|
|
@@ -32,14 +32,15 @@ const badge = (semantic: Semantics) => ({
|
|
|
32
32
|
colorDanger: semantic.color.background.error,
|
|
33
33
|
colorSuccess: semantic.color.background.success,
|
|
34
34
|
colorPrimary: semantic.color.institutional.brandPrimary,
|
|
35
|
-
fontSize: semantic.fontSize.
|
|
35
|
+
fontSize: semantic.fontSize.textXs,
|
|
36
36
|
fontWeight: semantic.fontWeight.body.strong,
|
|
37
37
|
sizeNotification: "0.75rem",
|
|
38
|
-
size: "
|
|
38
|
+
size: "1rem",
|
|
39
39
|
padding: semantic.spacing.spaceXs,
|
|
40
40
|
notificationOffset: "0.125rem",
|
|
41
41
|
notificationZIndex: 1,
|
|
42
42
|
pulseBorderThickness: "0.125rem",
|
|
43
43
|
countOffset: "0.5rem",
|
|
44
|
+
primaryTextColor: semantic.color.text.inverse,
|
|
44
45
|
})
|
|
45
46
|
export default badge
|
|
@@ -42,16 +42,16 @@ const baseButton = (semantic: Semantics) => ({
|
|
|
42
42
|
primaryDisabledTextColor: semantic.color.text.interactive.action.primary.disabled,
|
|
43
43
|
primaryGhostActiveBackground: {
|
|
44
44
|
value: semantic.color.institutional.brandButtonPrimaryBgd,
|
|
45
|
-
modify: { type: "alpha", value: 0.
|
|
45
|
+
modify: { type: "alpha", value: 0.2, space: "hsl" },
|
|
46
46
|
},
|
|
47
47
|
primaryGhostBorderColor: {
|
|
48
48
|
value: semantic.color.institutional.brandButtonPrimaryBgd,
|
|
49
|
-
modify: { type: "alpha", value: 0.
|
|
49
|
+
modify: { type: "alpha", value: 0.4, space: "hsl" },
|
|
50
50
|
},
|
|
51
51
|
primaryGhostColor: semantic.color.institutional.brandButtonPrimaryBgd,
|
|
52
52
|
primaryGhostHoverBackground: {
|
|
53
53
|
value: semantic.color.institutional.brandButtonPrimaryBgd,
|
|
54
|
-
modify: { type: "alpha", value: 0.
|
|
54
|
+
modify: { type: "alpha", value: 0.1, space: "hsl" },
|
|
55
55
|
},
|
|
56
56
|
primaryHoverBackground: {
|
|
57
57
|
value: semantic.color.institutional.brandButtonPrimaryBgd,
|
|
@@ -96,7 +96,10 @@ const baseButton = (semantic: Semantics) => ({
|
|
|
96
96
|
secondaryDisabledBackgroundColor: semantic.color.background.interactive.action.secondary.disabled,
|
|
97
97
|
secondaryDisabledBorderColor: semantic.color.stroke.interactive.action.secondary.disabled,
|
|
98
98
|
secondaryDisabledTextColor: semantic.color.text.interactive.action.secondary.disabled,
|
|
99
|
-
secondaryGhostBorderColor:
|
|
99
|
+
secondaryGhostBorderColor: {
|
|
100
|
+
value: semantic.color.institutional.brandButtonSecondaryText,
|
|
101
|
+
modify: { type: "alpha", value: 0.2, space: "hsl" },
|
|
102
|
+
},
|
|
100
103
|
secondaryGhostColor: semantic.color.institutional.brandButtonSecondaryText,
|
|
101
104
|
secondaryGhostHoverBackground: semantic.color.institutional.brandButtonSecondaryBgd,
|
|
102
105
|
secondaryHoverBackground: {
|
|
@@ -24,8 +24,5 @@
|
|
|
24
24
|
|
|
25
25
|
import type { Semantics } from "../semantics"
|
|
26
26
|
|
|
27
|
-
const truncateText = (semantic: Semantics) => ({
|
|
28
|
-
fontFamily: semantic.fontFamily.base,
|
|
29
|
-
lineHeight: semantic.lineHeight.paragraph.base,
|
|
30
|
-
})
|
|
27
|
+
const truncateText = (semantic: Semantics) => ({ fontFamily: semantic.fontFamily.base })
|
|
31
28
|
export default truncateText
|
|
@@ -32,14 +32,15 @@ const badge = (semantic: Semantics) => ({
|
|
|
32
32
|
colorDanger: semantic.color.background.error,
|
|
33
33
|
colorSuccess: semantic.color.background.success,
|
|
34
34
|
colorPrimary: semantic.color.institutional.brandPrimary,
|
|
35
|
-
fontSize: semantic.fontSize.
|
|
35
|
+
fontSize: semantic.fontSize.textXs,
|
|
36
36
|
fontWeight: semantic.fontWeight.body.strong,
|
|
37
37
|
sizeNotification: "0.75rem",
|
|
38
|
-
size: "
|
|
38
|
+
size: "1rem",
|
|
39
39
|
padding: semantic.spacing.spaceXs,
|
|
40
|
-
notificationZIndex: 1,
|
|
41
40
|
notificationOffset: "0.125rem",
|
|
41
|
+
notificationZIndex: 1,
|
|
42
42
|
pulseBorderThickness: "0.125rem",
|
|
43
43
|
countOffset: "0.5rem",
|
|
44
|
+
primaryTextColor: semantic.color.text.inverse,
|
|
44
45
|
})
|
|
45
46
|
export default badge
|
|
@@ -24,8 +24,5 @@
|
|
|
24
24
|
|
|
25
25
|
import type { Semantics } from "../semantics"
|
|
26
26
|
|
|
27
|
-
const truncateText = (semantic: Semantics) => ({
|
|
28
|
-
fontFamily: semantic.fontFamily.base,
|
|
29
|
-
lineHeight: semantic.lineHeight.paragraph.base,
|
|
30
|
-
})
|
|
27
|
+
const truncateText = (semantic: Semantics) => ({ fontFamily: semantic.fontFamily.base })
|
|
31
28
|
export default truncateText
|
|
@@ -32,14 +32,15 @@ const badge = (semantic: Semantics) => ({
|
|
|
32
32
|
colorDanger: semantic.color.background.error,
|
|
33
33
|
colorSuccess: semantic.color.background.success,
|
|
34
34
|
colorPrimary: semantic.color.institutional.brandPrimary,
|
|
35
|
-
fontSize: semantic.fontSize.
|
|
35
|
+
fontSize: semantic.fontSize.textXs,
|
|
36
36
|
fontWeight: semantic.fontWeight.body.strong,
|
|
37
37
|
sizeNotification: "0.75rem",
|
|
38
|
-
size: "
|
|
38
|
+
size: "1rem",
|
|
39
39
|
padding: semantic.spacing.spaceXs,
|
|
40
|
-
notificationZIndex: 1,
|
|
41
40
|
notificationOffset: "0.125rem",
|
|
41
|
+
notificationZIndex: 1,
|
|
42
42
|
pulseBorderThickness: "0.125rem",
|
|
43
43
|
countOffset: "0.5rem",
|
|
44
|
+
primaryTextColor: semantic.color.text.inverse,
|
|
44
45
|
})
|
|
45
46
|
export default badge
|
|
@@ -24,8 +24,5 @@
|
|
|
24
24
|
|
|
25
25
|
import type { Semantics } from "../semantics"
|
|
26
26
|
|
|
27
|
-
const truncateText = (semantic: Semantics) => ({
|
|
28
|
-
fontFamily: semantic.fontFamily.base,
|
|
29
|
-
lineHeight: semantic.lineHeight.paragraph.base,
|
|
30
|
-
})
|
|
27
|
+
const truncateText = (semantic: Semantics) => ({ fontFamily: semantic.fontFamily.base })
|
|
31
28
|
export default truncateText
|
|
@@ -32,14 +32,15 @@ const badge = (semantic: Semantics) => ({
|
|
|
32
32
|
colorDanger: semantic.color.background.error,
|
|
33
33
|
colorSuccess: semantic.color.background.success,
|
|
34
34
|
colorPrimary: semantic.color.institutional.brandPrimary,
|
|
35
|
-
fontSize: semantic.fontSize.
|
|
35
|
+
fontSize: semantic.fontSize.textXs,
|
|
36
36
|
fontWeight: semantic.fontWeight.body.strong,
|
|
37
37
|
sizeNotification: "0.75rem",
|
|
38
|
-
size: "
|
|
38
|
+
size: "1rem",
|
|
39
39
|
padding: semantic.spacing.spaceXs,
|
|
40
40
|
notificationOffset: "0.125rem",
|
|
41
41
|
notificationZIndex: 1,
|
|
42
42
|
pulseBorderThickness: "0.125rem",
|
|
43
43
|
countOffset: "0.5rem",
|
|
44
|
+
primaryTextColor: semantic.color.text.inverse,
|
|
44
45
|
})
|
|
45
46
|
export default badge
|