@atlaskit/inline-message 11.1.3 → 11.2.1

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
@@ -1,5 +1,32 @@
1
1
  # @atlaskit/inline-message
2
2
 
3
+ ## 11.2.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 11.2.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [`3d6d3a581d6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3d6d3a581d6) - Instrumented `@atlaskit/inline-message` with the new theming package, `@atlaskit/tokens`.
14
+
15
+ New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
16
+ These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
17
+
18
+ ## 11.1.5
19
+
20
+ ### Patch Changes
21
+
22
+ - [`34282240102`](https://bitbucket.org/atlassian/atlassian-frontend/commits/34282240102) - Adds explicit type to button usages components.
23
+
24
+ ## 11.1.4
25
+
26
+ ### Patch Changes
27
+
28
+ - Updated dependencies
29
+
3
30
  ## 11.1.3
4
31
 
5
32
  ### Patch Changes
@@ -65,55 +65,33 @@ var rootStyles = (0, _core.css)({
65
65
  }
66
66
  });
67
67
  var titleColor = (0, _components.themed)({
68
- light: colors.N600,
69
- dark: colors.DN600
68
+ light: "var(--ds-text-highEmphasis, ".concat(colors.N600, ")"),
69
+ dark: "var(--ds-text-highEmphasis, ".concat(colors.DN600, ")")
70
70
  });
71
71
  var textColor = (0, _components.themed)({
72
- light: colors.N300,
73
- dark: colors.DN100
74
- });
75
- var rootFocusColor = (0, _components.themed)('appearance', {
76
- connectivity: {
77
- light: colors.B500,
78
- dark: colors.B200
79
- },
80
- confirmation: {
81
- light: colors.G400,
82
- dark: colors.G400
83
- },
84
- info: {
85
- light: colors.P500,
86
- dark: colors.P300
87
- },
88
- warning: {
89
- light: colors.Y500,
90
- dark: colors.Y500
91
- },
92
- error: {
93
- light: colors.R500,
94
- dark: colors.R500
95
- }
72
+ light: "var(--ds-text-lowEmphasis, ".concat(colors.N300, ")"),
73
+ dark: "var(--ds-text-lowEmphasis, ".concat(colors.DN100, ")")
96
74
  });
97
75
  var iconColor = (0, _components.themed)('appearance', {
98
76
  connectivity: {
99
- light: colors.B300,
100
- dark: colors.B75
77
+ light: "var(--ds-iconBorder-brand, ".concat(colors.B300, ")"),
78
+ dark: "var(--ds-iconBorder-brand, ".concat(colors.B75, ")")
101
79
  },
102
80
  confirmation: {
103
- light: colors.G200,
104
- dark: colors.G200
81
+ light: "var(--ds-iconBorder-success, ".concat(colors.G200, ")"),
82
+ dark: "var(--ds-iconBorder-success, ".concat(colors.G200, ")")
105
83
  },
106
84
  info: {
107
- light: colors.P200,
108
- dark: colors.P200
85
+ light: "var(--ds-iconBorder-discovery, ".concat(colors.P200, ")"),
86
+ dark: "var(--ds-iconBorder-discovery, ".concat(colors.P200, ")")
109
87
  },
110
88
  warning: {
111
- light: colors.Y200,
112
- dark: colors.Y200
89
+ light: "var(--ds-iconBorder-warning, ".concat(colors.Y200, ")"),
90
+ dark: "var(--ds-iconBorder-warning, ".concat(colors.Y200, ")")
113
91
  },
114
92
  error: {
115
- light: colors.R300,
116
- dark: colors.R300
93
+ light: "var(--ds-iconBorder-danger, ".concat(colors.R300, ")"),
94
+ dark: "var(--ds-iconBorder-danger, ".concat(colors.R300, ")")
117
95
  }
118
96
  });
119
97
  /**
@@ -169,10 +147,6 @@ var InlineMessage = function InlineMessage(_ref) {
169
147
  return (0, _core.jsx)("div", {
170
148
  css: rootStyles,
171
149
  style: {
172
- outlineColor: rootFocusColor({
173
- appearance: type,
174
- theme: theme
175
- }),
176
150
  '--icon-accent-color': iconColor({
177
151
  appearance: type,
178
152
  theme: theme
@@ -22,24 +22,24 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
22
22
  /** @jsx jsx */
23
23
  var iconColor = (0, _components.themed)('appearance', {
24
24
  connectivity: {
25
- light: colors.B400,
26
- dark: colors.B100
25
+ light: "var(--ds-iconBorder-brand, ".concat(colors.B400, ")"),
26
+ dark: "var(--ds-iconBorder-brand, ".concat(colors.B100, ")")
27
27
  },
28
28
  confirmation: {
29
- light: colors.G300,
30
- dark: colors.G300
29
+ light: "var(--ds-iconBorder-success, ".concat(colors.G300, ")"),
30
+ dark: "var(--ds-iconBorder-success, ".concat(colors.G300, ")")
31
31
  },
32
32
  info: {
33
- light: colors.P300,
34
- dark: colors.P300
33
+ light: "var(--ds-iconBorder-discovery, ".concat(colors.P300, ")"),
34
+ dark: "var(--ds-iconBorder-discovery, ".concat(colors.P300, ")")
35
35
  },
36
36
  warning: {
37
- light: colors.Y300,
38
- dark: colors.Y300
37
+ light: "var(--ds-iconBorder-warning, ".concat(colors.Y300, ")"),
38
+ dark: "var(--ds-iconBorder-warning, ".concat(colors.Y300, ")")
39
39
  },
40
40
  error: {
41
- light: colors.R400,
42
- dark: colors.R400
41
+ light: "var(--ds-iconBorder-danger, ".concat(colors.R400, ")"),
42
+ dark: "var(--ds-iconBorder-danger, ".concat(colors.R400, ")")
43
43
  }
44
44
  });
45
45
  var iconWrapperStyles = (0, _core.css)({
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/inline-message",
3
- "version": "11.1.3",
3
+ "version": "11.2.1",
4
4
  "sideEffects": false
5
5
  }
@@ -40,55 +40,33 @@ const rootStyles = css({
40
40
  }
41
41
  });
42
42
  const titleColor = themed({
43
- light: colors.N600,
44
- dark: colors.DN600
43
+ light: `var(--ds-text-highEmphasis, ${colors.N600})`,
44
+ dark: `var(--ds-text-highEmphasis, ${colors.DN600})`
45
45
  });
46
46
  const textColor = themed({
47
- light: colors.N300,
48
- dark: colors.DN100
49
- });
50
- const rootFocusColor = themed('appearance', {
51
- connectivity: {
52
- light: colors.B500,
53
- dark: colors.B200
54
- },
55
- confirmation: {
56
- light: colors.G400,
57
- dark: colors.G400
58
- },
59
- info: {
60
- light: colors.P500,
61
- dark: colors.P300
62
- },
63
- warning: {
64
- light: colors.Y500,
65
- dark: colors.Y500
66
- },
67
- error: {
68
- light: colors.R500,
69
- dark: colors.R500
70
- }
47
+ light: `var(--ds-text-lowEmphasis, ${colors.N300})`,
48
+ dark: `var(--ds-text-lowEmphasis, ${colors.DN100})`
71
49
  });
72
50
  const iconColor = themed('appearance', {
73
51
  connectivity: {
74
- light: colors.B300,
75
- dark: colors.B75
52
+ light: `var(--ds-iconBorder-brand, ${colors.B300})`,
53
+ dark: `var(--ds-iconBorder-brand, ${colors.B75})`
76
54
  },
77
55
  confirmation: {
78
- light: colors.G200,
79
- dark: colors.G200
56
+ light: `var(--ds-iconBorder-success, ${colors.G200})`,
57
+ dark: `var(--ds-iconBorder-success, ${colors.G200})`
80
58
  },
81
59
  info: {
82
- light: colors.P200,
83
- dark: colors.P200
60
+ light: `var(--ds-iconBorder-discovery, ${colors.P200})`,
61
+ dark: `var(--ds-iconBorder-discovery, ${colors.P200})`
84
62
  },
85
63
  warning: {
86
- light: colors.Y200,
87
- dark: colors.Y200
64
+ light: `var(--ds-iconBorder-warning, ${colors.Y200})`,
65
+ dark: `var(--ds-iconBorder-warning, ${colors.Y200})`
88
66
  },
89
67
  error: {
90
- light: colors.R300,
91
- dark: colors.R300
68
+ light: `var(--ds-iconBorder-danger, ${colors.R300})`,
69
+ dark: `var(--ds-iconBorder-danger, ${colors.R300})`
92
70
  }
93
71
  });
94
72
  /**
@@ -132,10 +110,6 @@ const InlineMessage = ({
132
110
  return jsx("div", {
133
111
  css: rootStyles,
134
112
  style: {
135
- outlineColor: rootFocusColor({
136
- appearance: type,
137
- theme
138
- }),
139
113
  '--icon-accent-color': iconColor({
140
114
  appearance: type,
141
115
  theme
@@ -5,24 +5,24 @@ import { themed, useGlobalTheme } from '@atlaskit/theme/components';
5
5
  import { typesMapping } from '../../constants';
6
6
  const iconColor = themed('appearance', {
7
7
  connectivity: {
8
- light: colors.B400,
9
- dark: colors.B100
8
+ light: `var(--ds-iconBorder-brand, ${colors.B400})`,
9
+ dark: `var(--ds-iconBorder-brand, ${colors.B100})`
10
10
  },
11
11
  confirmation: {
12
- light: colors.G300,
13
- dark: colors.G300
12
+ light: `var(--ds-iconBorder-success, ${colors.G300})`,
13
+ dark: `var(--ds-iconBorder-success, ${colors.G300})`
14
14
  },
15
15
  info: {
16
- light: colors.P300,
17
- dark: colors.P300
16
+ light: `var(--ds-iconBorder-discovery, ${colors.P300})`,
17
+ dark: `var(--ds-iconBorder-discovery, ${colors.P300})`
18
18
  },
19
19
  warning: {
20
- light: colors.Y300,
21
- dark: colors.Y300
20
+ light: `var(--ds-iconBorder-warning, ${colors.Y300})`,
21
+ dark: `var(--ds-iconBorder-warning, ${colors.Y300})`
22
22
  },
23
23
  error: {
24
- light: colors.R400,
25
- dark: colors.R400
24
+ light: `var(--ds-iconBorder-danger, ${colors.R400})`,
25
+ dark: `var(--ds-iconBorder-danger, ${colors.R400})`
26
26
  }
27
27
  });
28
28
  const iconWrapperStyles = css({
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/inline-message",
3
- "version": "11.1.3",
3
+ "version": "11.2.1",
4
4
  "sideEffects": false
5
5
  }
@@ -42,55 +42,33 @@ var rootStyles = css({
42
42
  }
43
43
  });
44
44
  var titleColor = themed({
45
- light: colors.N600,
46
- dark: colors.DN600
45
+ light: "var(--ds-text-highEmphasis, ".concat(colors.N600, ")"),
46
+ dark: "var(--ds-text-highEmphasis, ".concat(colors.DN600, ")")
47
47
  });
48
48
  var textColor = themed({
49
- light: colors.N300,
50
- dark: colors.DN100
51
- });
52
- var rootFocusColor = themed('appearance', {
53
- connectivity: {
54
- light: colors.B500,
55
- dark: colors.B200
56
- },
57
- confirmation: {
58
- light: colors.G400,
59
- dark: colors.G400
60
- },
61
- info: {
62
- light: colors.P500,
63
- dark: colors.P300
64
- },
65
- warning: {
66
- light: colors.Y500,
67
- dark: colors.Y500
68
- },
69
- error: {
70
- light: colors.R500,
71
- dark: colors.R500
72
- }
49
+ light: "var(--ds-text-lowEmphasis, ".concat(colors.N300, ")"),
50
+ dark: "var(--ds-text-lowEmphasis, ".concat(colors.DN100, ")")
73
51
  });
74
52
  var iconColor = themed('appearance', {
75
53
  connectivity: {
76
- light: colors.B300,
77
- dark: colors.B75
54
+ light: "var(--ds-iconBorder-brand, ".concat(colors.B300, ")"),
55
+ dark: "var(--ds-iconBorder-brand, ".concat(colors.B75, ")")
78
56
  },
79
57
  confirmation: {
80
- light: colors.G200,
81
- dark: colors.G200
58
+ light: "var(--ds-iconBorder-success, ".concat(colors.G200, ")"),
59
+ dark: "var(--ds-iconBorder-success, ".concat(colors.G200, ")")
82
60
  },
83
61
  info: {
84
- light: colors.P200,
85
- dark: colors.P200
62
+ light: "var(--ds-iconBorder-discovery, ".concat(colors.P200, ")"),
63
+ dark: "var(--ds-iconBorder-discovery, ".concat(colors.P200, ")")
86
64
  },
87
65
  warning: {
88
- light: colors.Y200,
89
- dark: colors.Y200
66
+ light: "var(--ds-iconBorder-warning, ".concat(colors.Y200, ")"),
67
+ dark: "var(--ds-iconBorder-warning, ".concat(colors.Y200, ")")
90
68
  },
91
69
  error: {
92
- light: colors.R300,
93
- dark: colors.R300
70
+ light: "var(--ds-iconBorder-danger, ".concat(colors.R300, ")"),
71
+ dark: "var(--ds-iconBorder-danger, ".concat(colors.R300, ")")
94
72
  }
95
73
  });
96
74
  /**
@@ -146,10 +124,6 @@ var InlineMessage = function InlineMessage(_ref) {
146
124
  return jsx("div", {
147
125
  css: rootStyles,
148
126
  style: {
149
- outlineColor: rootFocusColor({
150
- appearance: type,
151
- theme: theme
152
- }),
153
127
  '--icon-accent-color': iconColor({
154
128
  appearance: type,
155
129
  theme: theme
@@ -5,24 +5,24 @@ import { themed, useGlobalTheme } from '@atlaskit/theme/components';
5
5
  import { typesMapping } from '../../constants';
6
6
  var iconColor = themed('appearance', {
7
7
  connectivity: {
8
- light: colors.B400,
9
- dark: colors.B100
8
+ light: "var(--ds-iconBorder-brand, ".concat(colors.B400, ")"),
9
+ dark: "var(--ds-iconBorder-brand, ".concat(colors.B100, ")")
10
10
  },
11
11
  confirmation: {
12
- light: colors.G300,
13
- dark: colors.G300
12
+ light: "var(--ds-iconBorder-success, ".concat(colors.G300, ")"),
13
+ dark: "var(--ds-iconBorder-success, ".concat(colors.G300, ")")
14
14
  },
15
15
  info: {
16
- light: colors.P300,
17
- dark: colors.P300
16
+ light: "var(--ds-iconBorder-discovery, ".concat(colors.P300, ")"),
17
+ dark: "var(--ds-iconBorder-discovery, ".concat(colors.P300, ")")
18
18
  },
19
19
  warning: {
20
- light: colors.Y300,
21
- dark: colors.Y300
20
+ light: "var(--ds-iconBorder-warning, ".concat(colors.Y300, ")"),
21
+ dark: "var(--ds-iconBorder-warning, ".concat(colors.Y300, ")")
22
22
  },
23
23
  error: {
24
- light: colors.R400,
25
- dark: colors.R400
24
+ light: "var(--ds-iconBorder-danger, ".concat(colors.R400, ")"),
25
+ dark: "var(--ds-iconBorder-danger, ".concat(colors.R400, ")")
26
26
  }
27
27
  });
28
28
  var iconWrapperStyles = css({
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/inline-message",
3
- "version": "11.1.3",
3
+ "version": "11.2.1",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/inline-message",
3
- "version": "11.1.3",
3
+ "version": "11.2.1",
4
4
  "description": "An inline message lets users know when important information is available or when an action is required.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -17,7 +17,6 @@
17
17
  "atlassian": {
18
18
  "team": "Design System Team",
19
19
  "deprecatedAutoEntryPoints": true,
20
- "inPublicMirror": true,
21
20
  "releaseModel": "scheduled",
22
21
  "website": {
23
22
  "name": "Inline message"
@@ -25,9 +24,10 @@
25
24
  },
26
25
  "dependencies": {
27
26
  "@atlaskit/button": "^16.1.0",
28
- "@atlaskit/icon": "^21.7.0",
29
- "@atlaskit/inline-dialog": "^13.1.0",
30
- "@atlaskit/theme": "^11.4.0",
27
+ "@atlaskit/icon": "^21.10.0",
28
+ "@atlaskit/inline-dialog": "^13.2.0",
29
+ "@atlaskit/theme": "^12.1.0",
30
+ "@atlaskit/tokens": "^0.5.0",
31
31
  "@babel/runtime": "^7.0.0",
32
32
  "@emotion/core": "^10.0.9"
33
33
  },
@@ -35,7 +35,6 @@
35
35
  "react": "^16.8.0"
36
36
  },
37
37
  "devDependencies": {
38
- "@atlaskit/build-utils": "*",
39
38
  "@atlaskit/docs": "*",
40
39
  "@atlaskit/section-message": "^6.1.0",
41
40
  "@atlaskit/ssr": "*",
@@ -58,10 +57,13 @@
58
57
  },
59
58
  "@repo/internal": {
60
59
  "design-system": "v1",
61
- "styling": "emotion",
60
+ "styling": [
61
+ "static",
62
+ "emotion"
63
+ ],
62
64
  "ui-components": "lite-mode",
63
65
  "analytics": "analytics-next",
64
- "theming": "new-theming-api",
66
+ "theming": "tokens",
65
67
  "deprecation": "no-deprecated-imports"
66
68
  }
67
69
  },