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

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 CHANGED
@@ -3,17 +3,9 @@
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-7](https://github.com/instructure/instructure-ui/compare/v9.5.1...v9.5.2-snapshot-7) (2024-07-31)
6
+ ## [9.5.2](https://github.com/instructure/instructure-ui/compare/v9.5.1...v9.5.2) (2024-08-05)
7
7
 
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
8
+ **Note:** Version bump only for package @instructure/ui-tag
17
9
 
18
10
 
19
11
 
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';
25
26
  /**
26
27
  * Generates the theme object for the component from the theme and provided additional information
27
28
  * @param {Object} theme The actual theme object.
28
29
  * @return {Object} The final theme object with the overrides and component variables
29
30
  */
30
31
  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 === 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
40
+ defaultBackground: colors.backgroundLightest,
41
+ defaultBorderColor: colors.borderDarkest
42
42
  },
43
43
  canvas: {
44
44
  focusOutlineColor: theme['ic-brand-primary'],
@@ -47,6 +47,31 @@ 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
+ };
50
75
  const componentVariables = {
51
76
  fontFamily: typography.fontFamily,
52
77
  heightSmall: '1.3125rem',
@@ -58,30 +83,27 @@ const generateComponentTheme = theme => {
58
83
  fontSizeLarge: typography.fontSizeMedium,
59
84
  padding: `0 ${spacing.xSmall}`,
60
85
  paddingSmall: `0 ${spacing.xSmall}`,
61
- focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.blue4570,
86
+ focusOutlineColor: colors.borderBrand,
62
87
  focusOutlineWidth: borders.widthMedium,
63
88
  focusOutlineStyle: borders.style,
64
89
  maxWidth: '10rem',
65
90
  iconMargin: spacing.xSmall,
66
91
  transitionTiming: '0.2s',
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
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
+ })
85
107
  };
86
108
  return {
87
109
  ...componentVariables,
package/lib/Tag/theme.js CHANGED
@@ -4,6 +4,7 @@ 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");
7
8
  /*
8
9
  * The MIT License (MIT)
9
10
  *
@@ -34,7 +35,6 @@ exports.default = void 0;
34
35
  * @return {Object} The final theme object with the overrides and component variables
35
36
  */
36
37
  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 === 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
46
+ defaultBackground: colors.backgroundLightest,
47
+ defaultBorderColor: colors.borderDarkest
48
48
  },
49
49
  canvas: {
50
50
  focusOutlineColor: theme['ic-brand-primary'],
@@ -53,6 +53,31 @@ 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
+ };
56
81
  const componentVariables = {
57
82
  fontFamily: typography.fontFamily,
58
83
  heightSmall: '1.3125rem',
@@ -64,30 +89,27 @@ const generateComponentTheme = theme => {
64
89
  fontSizeLarge: typography.fontSizeMedium,
65
90
  padding: `0 ${spacing.xSmall}`,
66
91
  paddingSmall: `0 ${spacing.xSmall}`,
67
- focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.blue4570,
92
+ focusOutlineColor: colors.borderBrand,
68
93
  focusOutlineWidth: borders.widthMedium,
69
94
  focusOutlineStyle: borders.style,
70
95
  maxWidth: '10rem',
71
96
  iconMargin: spacing.xSmall,
72
97
  transitionTiming: '0.2s',
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
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
+ })
91
113
  };
92
114
  return {
93
115
  ...componentVariables,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-tag",
3
- "version": "9.5.2-snapshot-7",
3
+ "version": "9.5.2",
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-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",
27
+ "@instructure/console": "9.5.2",
28
+ "@instructure/emotion": "9.5.2",
29
+ "@instructure/shared-types": "9.5.2",
30
+ "@instructure/ui-color-utils": "9.5.2",
31
+ "@instructure/ui-dom-utils": "9.5.2",
32
+ "@instructure/ui-icons": "9.5.2",
33
+ "@instructure/ui-react-utils": "9.5.2",
34
+ "@instructure/ui-testable": "9.5.2",
35
+ "@instructure/ui-view": "9.5.2",
36
36
  "prop-types": "^15.8.1"
37
37
  },
38
38
  "devDependencies": {
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",
39
+ "@instructure/ui-axe-check": "9.5.2",
40
+ "@instructure/ui-babel-preset": "9.5.2",
41
+ "@instructure/ui-test-utils": "9.5.2",
42
+ "@instructure/ui-themes": "9.5.2",
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,9 +22,28 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
+ import { darken } from '@instructure/ui-color-utils'
25
26
  import type { Theme, ThemeSpecificStyle } from '@instructure/ui-themes'
26
27
  import { TagTheme } from '@instructure/shared-types'
27
28
 
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
+
28
47
  /**
29
48
  * Generates the theme object for the component from the theme and provided additional information
30
49
  * @param {Object} theme The actual theme object.
@@ -35,8 +54,8 @@ const generateComponentTheme = (theme: Theme): TagTheme => {
35
54
 
36
55
  const themeSpecificStyle: ThemeSpecificStyle<TagTheme> = {
37
56
  'canvas-high-contrast': {
38
- defaultBackground: colors?.contrasts?.white1010,
39
- defaultBorderColor: colors?.contrasts?.grey125125
57
+ defaultBackground: colors.backgroundLightest,
58
+ defaultBorderColor: colors.borderDarkest
40
59
  },
41
60
  canvas: {
42
61
  focusOutlineColor: theme['ic-brand-primary'],
@@ -45,6 +64,46 @@ const generateComponentTheme = (theme: Theme): TagTheme => {
45
64
  defaultColor: theme['ic-brand-font-color-dark']
46
65
  }
47
66
  }
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
+
48
107
  const componentVariables: TagTheme = {
49
108
  fontFamily: typography.fontFamily,
50
109
  heightSmall: '1.3125rem', // matches Pill component height
@@ -55,32 +114,29 @@ const generateComponentTheme = (theme: Theme): TagTheme => {
55
114
  fontSizeLarge: typography.fontSizeMedium,
56
115
  padding: `0 ${spacing.xSmall}`,
57
116
  paddingSmall: `0 ${spacing.xSmall}`,
58
- focusOutlineColor: colors?.contrasts?.blue4570,
117
+ focusOutlineColor: colors.borderBrand,
59
118
  focusOutlineWidth: borders.widthMedium,
60
119
  focusOutlineStyle: borders.style,
61
120
  maxWidth: '10rem',
62
121
  iconMargin: spacing.xSmall,
63
122
  transitionTiming: '0.2s',
64
123
 
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,
124
+ ...tagVariant('default', {
125
+ borderColor: colors.borderMedium,
126
+ iconColor: colors.textDarkest,
127
+ iconHoverColor: colors.textBrand,
128
+ mainColor: colors.textLight,
129
+ textColor: colors.textDarkest
130
+ }),
74
131
 
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
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
+ })
84
140
  }
85
141
 
86
142
  return {
@@ -7,44 +7,18 @@
7
7
  },
8
8
  "include": ["src"],
9
9
  "references": [
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
- }
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" }
49
23
  ]
50
24
  }