@instructure/ui-toggle-details 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 (6) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/es/ToggleDetails/theme.js +6 -5
  3. package/lib/ToggleDetails/theme.js +6 -5
  4. package/package.json +20 -20
  5. package/src/ToggleDetails/theme.ts +5 -5
  6. package/tsconfig.build.tsbuildinfo +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
  **Note:** Version bump only for package @instructure/ui-toggle-details
package/es/ToggleDetails/theme.js CHANGED
@@ -28,6 +28,7 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
+ var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5;
31
32
  const colors = theme.colors,
32
33
  spacing = theme.spacing,
33
34
  borders = theme.borders,
@@ -44,7 +45,7 @@ const generateComponentTheme = theme => {
44
45
  fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
45
46
  fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
46
47
  lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight,
47
- textColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
48
+ textColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
48
49
  fontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
49
50
  fontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
50
51
  fontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
@@ -52,16 +53,16 @@ const generateComponentTheme = theme => {
52
53
  mediumIconSize: '0.75rem',
53
54
  largeIconSize: '1rem',
54
55
  iconMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
55
- iconColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
56
+ iconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
56
57
  togglePadding: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
57
58
  toggleBorderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
58
59
  toggleBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
59
60
  toggleBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
60
- toggleFocusBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
61
- filledBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
61
+ toggleFocusBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.blue4570,
62
+ filledBackgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey1111,
62
63
  filledBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
63
64
  filledBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
64
- filledBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
65
+ filledBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey1214,
65
66
  filledBorderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
66
67
  filledPadding: spacing === null || spacing === void 0 ? void 0 : spacing.small
67
68
  };
package/lib/ToggleDetails/theme.js CHANGED
@@ -34,6 +34,7 @@ exports.default = void 0;
34
34
  * @return {Object} The final theme object with the overrides and component variables
35
35
  */
36
36
  const generateComponentTheme = theme => {
37
+ var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5;
37
38
  const colors = theme.colors,
38
39
  spacing = theme.spacing,
39
40
  borders = theme.borders,
@@ -50,7 +51,7 @@ const generateComponentTheme = theme => {
50
51
  fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
51
52
  fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
52
53
  lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight,
53
- textColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
54
+ textColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
54
55
  fontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
55
56
  fontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
56
57
  fontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
@@ -58,16 +59,16 @@ const generateComponentTheme = theme => {
58
59
  mediumIconSize: '0.75rem',
59
60
  largeIconSize: '1rem',
60
61
  iconMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
61
- iconColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
62
+ iconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
62
63
  togglePadding: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
63
64
  toggleBorderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
64
65
  toggleBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
65
66
  toggleBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
66
- toggleFocusBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
67
- filledBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
67
+ toggleFocusBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.blue4570,
68
+ filledBackgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey1111,
68
69
  filledBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
69
70
  filledBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
70
- filledBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
71
+ filledBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey1214,
71
72
  filledBorderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
72
73
  filledPadding: spacing === null || spacing === void 0 ? void 0 : spacing.small
73
74
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-toggle-details",
3
- "version": "9.3.0",
3
+ "version": "9.3.1-pr-snapshot-1721388565180",
4
4
  "description": "A styled toggleable, accordion-like component.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,28 +23,28 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-babel-preset": "9.3.0",
27
- "@instructure/ui-test-locator": "9.3.0",
28
- "@instructure/ui-test-queries": "9.3.0",
29
- "@instructure/ui-test-utils": "9.3.0",
30
- "@instructure/ui-themes": "9.3.0"
26
+ "@instructure/ui-babel-preset": "9.3.1-pr-snapshot-1721388565180",
27
+ "@instructure/ui-test-locator": "9.3.1-pr-snapshot-1721388565180",
28
+ "@instructure/ui-test-queries": "9.3.1-pr-snapshot-1721388565180",
29
+ "@instructure/ui-test-utils": "9.3.1-pr-snapshot-1721388565180",
30
+ "@instructure/ui-themes": "9.3.1-pr-snapshot-1721388565180"
31
31
  },
32
32
  "dependencies": {
33
33
  "@babel/runtime": "^7.24.5",
34
- "@instructure/emotion": "9.3.0",
35
- "@instructure/shared-types": "9.3.0",
36
- "@instructure/ui-buttons": "9.3.0",
37
- "@instructure/ui-dom-utils": "9.3.0",
38
- "@instructure/ui-expandable": "9.3.0",
39
- "@instructure/ui-flex": "9.3.0",
40
- "@instructure/ui-icons": "9.3.0",
41
- "@instructure/ui-motion": "9.3.0",
42
- "@instructure/ui-prop-types": "9.3.0",
43
- "@instructure/ui-react-utils": "9.3.0",
44
- "@instructure/ui-testable": "9.3.0",
45
- "@instructure/ui-utils": "9.3.0",
46
- "@instructure/ui-view": "9.3.0",
47
- "@instructure/uid": "9.3.0",
34
+ "@instructure/emotion": "9.3.1-pr-snapshot-1721388565180",
35
+ "@instructure/shared-types": "9.3.1-pr-snapshot-1721388565180",
36
+ "@instructure/ui-buttons": "9.3.1-pr-snapshot-1721388565180",
37
+ "@instructure/ui-dom-utils": "9.3.1-pr-snapshot-1721388565180",
38
+ "@instructure/ui-expandable": "9.3.1-pr-snapshot-1721388565180",
39
+ "@instructure/ui-flex": "9.3.1-pr-snapshot-1721388565180",
40
+ "@instructure/ui-icons": "9.3.1-pr-snapshot-1721388565180",
41
+ "@instructure/ui-motion": "9.3.1-pr-snapshot-1721388565180",
42
+ "@instructure/ui-prop-types": "9.3.1-pr-snapshot-1721388565180",
43
+ "@instructure/ui-react-utils": "9.3.1-pr-snapshot-1721388565180",
44
+ "@instructure/ui-testable": "9.3.1-pr-snapshot-1721388565180",
45
+ "@instructure/ui-utils": "9.3.1-pr-snapshot-1721388565180",
46
+ "@instructure/ui-view": "9.3.1-pr-snapshot-1721388565180",
47
+ "@instructure/uid": "9.3.1-pr-snapshot-1721388565180",
48
48
  "prop-types": "^15.8.1"
49
49
  },
50
50
  "peerDependencies": {
package/src/ToggleDetails/theme.ts CHANGED
@@ -45,7 +45,7 @@ const generateComponentTheme = (theme: Theme): ToggleDetailsTheme => {
45
45
  fontFamily: typography?.fontFamily,
46
46
  fontWeight: typography?.fontWeightNormal,
47
47
  lineHeight: typography?.lineHeight,
48
- textColor: colors?.textDarkest,
48
+ textColor: colors?.contrasts?.grey125125,
49
49
 
50
50
  fontSizeSmall: typography?.fontSizeSmall,
51
51
  fontSizeMedium: typography?.fontSizeMedium,
@@ -55,18 +55,18 @@ const generateComponentTheme = (theme: Theme): ToggleDetailsTheme => {
55
55
  mediumIconSize: '0.75rem',
56
56
  largeIconSize: '1rem',
57
57
  iconMargin: spacing?.xxSmall,
58
- iconColor: colors?.textDarkest,
58
+ iconColor: colors?.contrasts?.grey125125,
59
59
 
60
60
  togglePadding: spacing?.xxSmall,
61
61
  toggleBorderRadius: borders?.radiusMedium,
62
62
  toggleBorderWidth: borders?.widthMedium,
63
63
  toggleBorderStyle: borders?.style,
64
- toggleFocusBorderColor: colors?.borderBrand,
64
+ toggleFocusBorderColor: colors?.contrasts?.blue4570,
65
65
 
66
- filledBackgroundColor: colors?.backgroundLight,
66
+ filledBackgroundColor: colors?.contrasts?.grey1111,
67
67
  filledBorderWidth: borders?.widthSmall,
68
68
  filledBorderStyle: borders?.style,
69
- filledBorderColor: colors?.borderMedium,
69
+ filledBorderColor: colors?.contrasts?.grey1214,
70
70
  filledBorderRadius: borders?.radiusMedium,
71
71
  filledPadding: spacing?.small
72
72
  }