@instructure/ui-tag 9.5.2-snapshot-0 → 9.5.2-snapshot-7

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 (8) hide show
  1. package/CHANGELOG.md +10 -2
  2. package/es/Tag/theme.js +22 -44
  3. package/lib/Tag/theme.js +22 -44
  4. package/package.json +14 -14
  5. package/src/Tag/theme.ts +21 -77
  6. package/tsconfig.build.json +39 -13
  7. package/tsconfig.build.tsbuildinfo +1 -1
  8. package/types/Tag/theme.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,17 @@
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.5.2-snapshot-0](https://github.com/instructure/instructure-ui/compare/v9.5.1...v9.5.2-snapshot-0) (2024-07-31)
6
+ ## [9.5.2-snapshot-7](https://github.com/instructure/instructure-ui/compare/v9.5.1...v9.5.2-snapshot-7) (2024-07-31)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-tag
8
+
9
+ ### Features
10
+
11
+ * **many:** rewrite color system ([1e5809e](https://github.com/instructure/instructure-ui/commit/1e5809e28dee8c2a71703a429609b8d2f95d76e6))
12
+
13
+
14
+ ### BREAKING CHANGES
15
+
16
+ * **many:** Breaks color overrides in certain cases
9
17
 
10
18
 
11
19
 
package/es/Tag/theme.js CHANGED
@@ -22,13 +22,13 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import { darken } from '@instructure/ui-color-utils';
26
25
  /**
27
26
  * Generates the theme object for the component from the theme and provided additional information
28
27
  * @param {Object} theme The actual theme object.
29
28
  * @return {Object} The final theme object with the overrides and component variables
30
29
  */
31
30
  const generateComponentTheme = theme => {
31
+ 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;
32
32
  const borders = theme.borders,
33
33
  colors = theme.colors,
34
34
  forms = theme.forms,
@@ -37,8 +37,8 @@ const generateComponentTheme = theme => {
37
37
  themeName = theme.key;
38
38
  const themeSpecificStyle = {
39
39
  'canvas-high-contrast': {
40
- defaultBackground: colors.backgroundLightest,
41
- defaultBorderColor: colors.borderDarkest
40
+ defaultBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
41
+ defaultBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125
42
42
  },
43
43
  canvas: {
44
44
  focusOutlineColor: theme['ic-brand-primary'],
@@ -47,31 +47,6 @@ const generateComponentTheme = theme => {
47
47
  defaultColor: theme['ic-brand-font-color-dark']
48
48
  }
49
49
  };
50
- const tagVariant = function (style, {
51
- borderColor,
52
- borderRadius,
53
- borderStyle,
54
- borderWidth,
55
- hoverColor,
56
- iconColor,
57
- iconHoverColor,
58
- mainColor,
59
- textColor
60
- }) {
61
- return {
62
- [`${style}BackgroundHover`]: hoverColor || darken(mainColor, 5),
63
- [`${style}Background`]: mainColor,
64
- [`${style}BorderColor`]: borderColor,
65
- // For 'pill'-style rounded corners
66
- // https://stackoverflow.com/questions/22578979/border-radius-50-vs-border-radius-999em
67
- [`${style}BorderRadius`]: borderRadius || '999rem',
68
- [`${style}BorderStyle`]: borderStyle || borders.style,
69
- [`${style}BorderWidth`]: borderWidth || borders.widthSmall,
70
- [`${style}Color`]: textColor,
71
- [`${style}IconColor`]: iconColor || textColor,
72
- [`${style}IconHoverColor`]: iconHoverColor || iconColor || textColor
73
- };
74
- };
75
50
  const componentVariables = {
76
51
  fontFamily: typography.fontFamily,
77
52
  heightSmall: '1.3125rem',
@@ -83,27 +58,30 @@ const generateComponentTheme = theme => {
83
58
  fontSizeLarge: typography.fontSizeMedium,
84
59
  padding: `0 ${spacing.xSmall}`,
85
60
  paddingSmall: `0 ${spacing.xSmall}`,
86
- focusOutlineColor: colors.borderBrand,
61
+ focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.blue4570,
87
62
  focusOutlineWidth: borders.widthMedium,
88
63
  focusOutlineStyle: borders.style,
89
64
  maxWidth: '10rem',
90
65
  iconMargin: spacing.xSmall,
91
66
  transitionTiming: '0.2s',
92
- ...tagVariant('default', {
93
- borderColor: colors.borderMedium,
94
- iconColor: colors.textDarkest,
95
- iconHoverColor: colors.textBrand,
96
- mainColor: colors.textLight,
97
- textColor: colors.textDarkest
98
- }),
99
- ...tagVariant('inline', {
100
- borderColor: colors.borderDark,
101
- borderRadius: borders.radiusMedium,
102
- iconColor: colors.textDark,
103
- iconHoverColor: colors.textDark,
104
- mainColor: colors.textLightest,
105
- textColor: colors.textDarkest
106
- })
67
+ defaultBackgroundHover: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey1214,
68
+ defaultBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey1111,
69
+ defaultBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey1214,
70
+ defaultBorderRadius: '999rem',
71
+ defaultBorderStyle: borders.style,
72
+ defaultBorderWidth: borders.widthSmall,
73
+ defaultColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey125125,
74
+ defaultIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey125125,
75
+ defaultIconHoverColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.blue4570,
76
+ inlineBackgroundHover: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.grey1111,
77
+ inlineBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.white1010,
78
+ inlineBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.grey4570,
79
+ inlineBorderRadius: borders.radiusMedium,
80
+ inlineBorderStyle: borders.style,
81
+ inlineBorderWidth: borders.widthSmall,
82
+ inlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts13 = colors.contrasts) === null || _colors$contrasts13 === void 0 ? void 0 : _colors$contrasts13.grey125125,
83
+ inlineIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts14 = colors.contrasts) === null || _colors$contrasts14 === void 0 ? void 0 : _colors$contrasts14.grey4570,
84
+ inlineIconHoverColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts15 = colors.contrasts) === null || _colors$contrasts15 === void 0 ? void 0 : _colors$contrasts15.blue4570
107
85
  };
108
86
  return {
109
87
  ...componentVariables,
package/lib/Tag/theme.js CHANGED
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _darken = require("@instructure/ui-color-utils/lib/darken.js");
8
7
  /*
9
8
  * The MIT License (MIT)
10
9
  *
@@ -35,6 +34,7 @@ var _darken = require("@instructure/ui-color-utils/lib/darken.js");
35
34
  * @return {Object} The final theme object with the overrides and component variables
36
35
  */
37
36
  const generateComponentTheme = theme => {
37
+ 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;
38
38
  const borders = theme.borders,
39
39
  colors = theme.colors,
40
40
  forms = theme.forms,
@@ -43,8 +43,8 @@ const generateComponentTheme = theme => {
43
43
  themeName = theme.key;
44
44
  const themeSpecificStyle = {
45
45
  'canvas-high-contrast': {
46
- defaultBackground: colors.backgroundLightest,
47
- defaultBorderColor: colors.borderDarkest
46
+ defaultBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
47
+ defaultBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125
48
48
  },
49
49
  canvas: {
50
50
  focusOutlineColor: theme['ic-brand-primary'],
@@ -53,31 +53,6 @@ const generateComponentTheme = theme => {
53
53
  defaultColor: theme['ic-brand-font-color-dark']
54
54
  }
55
55
  };
56
- const tagVariant = function (style, {
57
- borderColor,
58
- borderRadius,
59
- borderStyle,
60
- borderWidth,
61
- hoverColor,
62
- iconColor,
63
- iconHoverColor,
64
- mainColor,
65
- textColor
66
- }) {
67
- return {
68
- [`${style}BackgroundHover`]: hoverColor || (0, _darken.darken)(mainColor, 5),
69
- [`${style}Background`]: mainColor,
70
- [`${style}BorderColor`]: borderColor,
71
- // For 'pill'-style rounded corners
72
- // https://stackoverflow.com/questions/22578979/border-radius-50-vs-border-radius-999em
73
- [`${style}BorderRadius`]: borderRadius || '999rem',
74
- [`${style}BorderStyle`]: borderStyle || borders.style,
75
- [`${style}BorderWidth`]: borderWidth || borders.widthSmall,
76
- [`${style}Color`]: textColor,
77
- [`${style}IconColor`]: iconColor || textColor,
78
- [`${style}IconHoverColor`]: iconHoverColor || iconColor || textColor
79
- };
80
- };
81
56
  const componentVariables = {
82
57
  fontFamily: typography.fontFamily,
83
58
  heightSmall: '1.3125rem',
@@ -89,27 +64,30 @@ const generateComponentTheme = theme => {
89
64
  fontSizeLarge: typography.fontSizeMedium,
90
65
  padding: `0 ${spacing.xSmall}`,
91
66
  paddingSmall: `0 ${spacing.xSmall}`,
92
- focusOutlineColor: colors.borderBrand,
67
+ focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.blue4570,
93
68
  focusOutlineWidth: borders.widthMedium,
94
69
  focusOutlineStyle: borders.style,
95
70
  maxWidth: '10rem',
96
71
  iconMargin: spacing.xSmall,
97
72
  transitionTiming: '0.2s',
98
- ...tagVariant('default', {
99
- borderColor: colors.borderMedium,
100
- iconColor: colors.textDarkest,
101
- iconHoverColor: colors.textBrand,
102
- mainColor: colors.textLight,
103
- textColor: colors.textDarkest
104
- }),
105
- ...tagVariant('inline', {
106
- borderColor: colors.borderDark,
107
- borderRadius: borders.radiusMedium,
108
- iconColor: colors.textDark,
109
- iconHoverColor: colors.textDark,
110
- mainColor: colors.textLightest,
111
- textColor: colors.textDarkest
112
- })
73
+ defaultBackgroundHover: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey1214,
74
+ defaultBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey1111,
75
+ defaultBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey1214,
76
+ defaultBorderRadius: '999rem',
77
+ defaultBorderStyle: borders.style,
78
+ defaultBorderWidth: borders.widthSmall,
79
+ defaultColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey125125,
80
+ defaultIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey125125,
81
+ defaultIconHoverColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.blue4570,
82
+ inlineBackgroundHover: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.grey1111,
83
+ inlineBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.white1010,
84
+ inlineBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.grey4570,
85
+ inlineBorderRadius: borders.radiusMedium,
86
+ inlineBorderStyle: borders.style,
87
+ inlineBorderWidth: borders.widthSmall,
88
+ inlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts13 = colors.contrasts) === null || _colors$contrasts13 === void 0 ? void 0 : _colors$contrasts13.grey125125,
89
+ inlineIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts14 = colors.contrasts) === null || _colors$contrasts14 === void 0 ? void 0 : _colors$contrasts14.grey4570,
90
+ inlineIconHoverColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts15 = colors.contrasts) === null || _colors$contrasts15 === void 0 ? void 0 : _colors$contrasts15.blue4570
113
91
  };
114
92
  return {
115
93
  ...componentVariables,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-tag",
3
- "version": "9.5.2-snapshot-0",
3
+ "version": "9.5.2-snapshot-7",
4
4
  "description": "A tag component",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,22 +24,22 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.24.5",
27
- "@instructure/console": "9.5.2-snapshot-0",
28
- "@instructure/emotion": "9.5.2-snapshot-0",
29
- "@instructure/shared-types": "9.5.2-snapshot-0",
30
- "@instructure/ui-color-utils": "9.5.2-snapshot-0",
31
- "@instructure/ui-dom-utils": "9.5.2-snapshot-0",
32
- "@instructure/ui-icons": "9.5.2-snapshot-0",
33
- "@instructure/ui-react-utils": "9.5.2-snapshot-0",
34
- "@instructure/ui-testable": "9.5.2-snapshot-0",
35
- "@instructure/ui-view": "9.5.2-snapshot-0",
27
+ "@instructure/console": "9.5.2-snapshot-7",
28
+ "@instructure/emotion": "9.5.2-snapshot-7",
29
+ "@instructure/shared-types": "9.5.2-snapshot-7",
30
+ "@instructure/ui-color-utils": "9.5.2-snapshot-7",
31
+ "@instructure/ui-dom-utils": "9.5.2-snapshot-7",
32
+ "@instructure/ui-icons": "9.5.2-snapshot-7",
33
+ "@instructure/ui-react-utils": "9.5.2-snapshot-7",
34
+ "@instructure/ui-testable": "9.5.2-snapshot-7",
35
+ "@instructure/ui-view": "9.5.2-snapshot-7",
36
36
  "prop-types": "^15.8.1"
37
37
  },
38
38
  "devDependencies": {
39
- "@instructure/ui-axe-check": "9.5.2-snapshot-0",
40
- "@instructure/ui-babel-preset": "9.5.2-snapshot-0",
41
- "@instructure/ui-test-utils": "9.5.2-snapshot-0",
42
- "@instructure/ui-themes": "9.5.2-snapshot-0",
39
+ "@instructure/ui-axe-check": "9.5.2-snapshot-7",
40
+ "@instructure/ui-babel-preset": "9.5.2-snapshot-7",
41
+ "@instructure/ui-test-utils": "9.5.2-snapshot-7",
42
+ "@instructure/ui-themes": "9.5.2-snapshot-7",
43
43
  "@testing-library/jest-dom": "^6.4.5",
44
44
  "@testing-library/react": "^15.0.7",
45
45
  "@testing-library/user-event": "^14.5.2",
package/src/Tag/theme.ts CHANGED
@@ -22,28 +22,9 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import { darken } from '@instructure/ui-color-utils'
26
25
  import type { Theme, ThemeSpecificStyle } from '@instructure/ui-themes'
27
26
  import { TagTheme } from '@instructure/shared-types'
28
27
 
29
- type Variants = 'default' | 'inline'
30
-
31
- type VariantValues =
32
- | 'BackgroundHover'
33
- | 'Background'
34
- | 'BorderColor'
35
- | 'BorderRadius'
36
- | 'BorderStyle'
37
- | 'BorderWidth'
38
- | 'Color'
39
- | 'IconColor'
40
- | 'IconHoverColor'
41
-
42
- type VariantMap<Variant extends Variants> = Record<
43
- `${Variant}${VariantValues}`,
44
- string
45
- >
46
-
47
28
  /**
48
29
  * Generates the theme object for the component from the theme and provided additional information
49
30
  * @param {Object} theme The actual theme object.
@@ -54,8 +35,8 @@ const generateComponentTheme = (theme: Theme): TagTheme => {
54
35
 
55
36
  const themeSpecificStyle: ThemeSpecificStyle<TagTheme> = {
56
37
  'canvas-high-contrast': {
57
- defaultBackground: colors.backgroundLightest,
58
- defaultBorderColor: colors.borderDarkest
38
+ defaultBackground: colors?.contrasts?.white1010,
39
+ defaultBorderColor: colors?.contrasts?.grey125125
59
40
  },
60
41
  canvas: {
61
42
  focusOutlineColor: theme['ic-brand-primary'],
@@ -64,46 +45,6 @@ const generateComponentTheme = (theme: Theme): TagTheme => {
64
45
  defaultColor: theme['ic-brand-font-color-dark']
65
46
  }
66
47
  }
67
-
68
- const tagVariant = function <Variant extends Variants>(
69
- style: Variant,
70
- {
71
- borderColor,
72
- borderRadius,
73
- borderStyle,
74
- borderWidth,
75
- hoverColor,
76
- iconColor,
77
- iconHoverColor,
78
- mainColor,
79
- textColor
80
- }: {
81
- borderColor: string
82
- mainColor: string
83
- textColor: string
84
- borderRadius?: string | 0
85
- borderStyle?: string
86
- borderWidth?: string | 0
87
- hoverColor?: string
88
- iconColor?: string
89
- iconHoverColor?: string
90
- }
91
- ) {
92
- return {
93
- [`${style}BackgroundHover`]: hoverColor || darken(mainColor, 5),
94
- [`${style}Background`]: mainColor,
95
- [`${style}BorderColor`]: borderColor,
96
- // For 'pill'-style rounded corners
97
- // https://stackoverflow.com/questions/22578979/border-radius-50-vs-border-radius-999em
98
- [`${style}BorderRadius`]: borderRadius || '999rem',
99
- [`${style}BorderStyle`]: borderStyle || borders.style,
100
- [`${style}BorderWidth`]: borderWidth || borders.widthSmall,
101
- [`${style}Color`]: textColor,
102
- [`${style}IconColor`]: iconColor || textColor,
103
- [`${style}IconHoverColor`]: iconHoverColor || iconColor || textColor
104
- } as VariantMap<Variant>
105
- }
106
-
107
48
  const componentVariables: TagTheme = {
108
49
  fontFamily: typography.fontFamily,
109
50
  heightSmall: '1.3125rem', // matches Pill component height
@@ -114,29 +55,32 @@ const generateComponentTheme = (theme: Theme): TagTheme => {
114
55
  fontSizeLarge: typography.fontSizeMedium,
115
56
  padding: `0 ${spacing.xSmall}`,
116
57
  paddingSmall: `0 ${spacing.xSmall}`,
117
- focusOutlineColor: colors.borderBrand,
58
+ focusOutlineColor: colors?.contrasts?.blue4570,
118
59
  focusOutlineWidth: borders.widthMedium,
119
60
  focusOutlineStyle: borders.style,
120
61
  maxWidth: '10rem',
121
62
  iconMargin: spacing.xSmall,
122
63
  transitionTiming: '0.2s',
123
64
 
124
- ...tagVariant('default', {
125
- borderColor: colors.borderMedium,
126
- iconColor: colors.textDarkest,
127
- iconHoverColor: colors.textBrand,
128
- mainColor: colors.textLight,
129
- textColor: colors.textDarkest
130
- }),
65
+ defaultBackgroundHover: colors?.contrasts?.grey1214,
66
+ defaultBackground: colors?.contrasts?.grey1111,
67
+ defaultBorderColor: colors?.contrasts?.grey1214,
68
+ defaultBorderRadius: '999rem',
69
+ defaultBorderStyle: borders.style,
70
+ defaultBorderWidth: borders.widthSmall,
71
+ defaultColor: colors?.contrasts?.grey125125,
72
+ defaultIconColor: colors?.contrasts?.grey125125,
73
+ defaultIconHoverColor: colors?.contrasts?.blue4570,
131
74
 
132
- ...tagVariant('inline', {
133
- borderColor: colors.borderDark,
134
- borderRadius: borders.radiusMedium,
135
- iconColor: colors.textDark,
136
- iconHoverColor: colors.textDark,
137
- mainColor: colors.textLightest,
138
- textColor: colors.textDarkest
139
- })
75
+ inlineBackgroundHover: colors?.contrasts?.grey1111,
76
+ inlineBackground: colors?.contrasts?.white1010,
77
+ inlineBorderColor: colors?.contrasts?.grey4570,
78
+ inlineBorderRadius: borders.radiusMedium,
79
+ inlineBorderStyle: borders.style,
80
+ inlineBorderWidth: borders.widthSmall,
81
+ inlineColor: colors?.contrasts?.grey125125,
82
+ inlineIconColor: colors?.contrasts?.grey4570,
83
+ inlineIconHoverColor: colors?.contrasts?.blue4570
140
84
  }
141
85
 
142
86
  return {
package/tsconfig.build.json CHANGED
@@ -7,18 +7,44 @@
7
7
  },
8
8
  "include": ["src"],
9
9
  "references": [
10
- { "path": "../console/tsconfig.build.json" },
11
- { "path": "../emotion/tsconfig.build.json" },
12
- { "path": "../shared-types/tsconfig.build.json" },
13
- { "path": "../ui-axe-check/tsconfig.build.json" },
14
- { "path": "../ui-color-utils/tsconfig.build.json" },
15
- { "path": "../ui-dom-utils/tsconfig.build.json" },
16
- { "path": "../ui-icons/tsconfig.build.json" },
17
- { "path": "../ui-react-utils/tsconfig.build.json" },
18
- { "path": "../ui-testable/tsconfig.build.json" },
19
- { "path": "../ui-view/tsconfig.build.json" },
20
- { "path": "../ui-babel-preset/tsconfig.build.json" },
21
- { "path": "../ui-test-utils/tsconfig.build.json" },
22
- { "path": "../ui-themes/tsconfig.build.json" }
10
+ {
11
+ "path": "../console/tsconfig.build.json"
12
+ },
13
+ {
14
+ "path": "../emotion/tsconfig.build.json"
15
+ },
16
+ {
17
+ "path": "../shared-types/tsconfig.build.json"
18
+ },
19
+ {
20
+ "path": "../ui-axe-check/tsconfig.build.json"
21
+ },
22
+ {
23
+ "path": "../ui-color-utils/tsconfig.build.json"
24
+ },
25
+ {
26
+ "path": "../ui-dom-utils/tsconfig.build.json"
27
+ },
28
+ {
29
+ "path": "../ui-icons/tsconfig.build.json"
30
+ },
31
+ {
32
+ "path": "../ui-react-utils/tsconfig.build.json"
33
+ },
34
+ {
35
+ "path": "../ui-testable/tsconfig.build.json"
36
+ },
37
+ {
38
+ "path": "../ui-view/tsconfig.build.json"
39
+ },
40
+ {
41
+ "path": "../ui-babel-preset/tsconfig.build.json"
42
+ },
43
+ {
44
+ "path": "../ui-test-utils/tsconfig.build.json"
45
+ },
46
+ {
47
+ "path": "../ui-themes/tsconfig.build.json"
48
+ }
23
49
  ]
24
50
  }