@atlaskit/inline-message 11.1.2 → 11.2.0

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,33 @@
1
1
  # @atlaskit/inline-message
2
2
 
3
+ ## 11.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`3d6d3a581d6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3d6d3a581d6) - Instrumented `@atlaskit/inline-message` with the new theming package, `@atlaskit/tokens`.
8
+
9
+ New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
10
+ These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
11
+
12
+ ## 11.1.5
13
+
14
+ ### Patch Changes
15
+
16
+ - [`34282240102`](https://bitbucket.org/atlassian/atlassian-frontend/commits/34282240102) - Adds explicit type to button usages components.
17
+
18
+ ## 11.1.4
19
+
20
+ ### Patch Changes
21
+
22
+ - Updated dependencies
23
+
24
+ ## 11.1.3
25
+
26
+ ### Patch Changes
27
+
28
+ - [`af4bca32ad4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/af4bca32ad4) - Internal changes to supress eslint rules.
29
+ - Updated dependencies
30
+
3
31
  ## 11.1.2
4
32
 
5
33
  ### Patch Changes
@@ -54,64 +54,44 @@ var rootStyles = (0, _core.css)({
54
54
  outline: '1px solid'
55
55
  },
56
56
  '&:hover': {
57
+ // eslint-disable-next-line @repo/internal/styles/no-nested-styles
57
58
  '[data-ds--inline-message--icon]': {
58
59
  color: 'var(--icon-accent-color)'
59
60
  },
61
+ // eslint-disable-next-line @repo/internal/styles/no-nested-styles
60
62
  '[data-ds--inline-message--button]': {
61
63
  textDecoration: 'underline'
62
64
  }
63
65
  }
64
66
  });
65
67
  var titleColor = (0, _components.themed)({
66
- light: colors.N600,
67
- dark: colors.DN600
68
+ light: "var(--ds-text-highEmphasis, ".concat(colors.N600, ")"),
69
+ dark: "var(--ds-text-highEmphasis, ".concat(colors.DN600, ")")
68
70
  });
69
71
  var textColor = (0, _components.themed)({
70
- light: colors.N300,
71
- dark: colors.DN100
72
- });
73
- var rootFocusColor = (0, _components.themed)('appearance', {
74
- connectivity: {
75
- light: colors.B500,
76
- dark: colors.B200
77
- },
78
- confirmation: {
79
- light: colors.G400,
80
- dark: colors.G400
81
- },
82
- info: {
83
- light: colors.P500,
84
- dark: colors.P300
85
- },
86
- warning: {
87
- light: colors.Y500,
88
- dark: colors.Y500
89
- },
90
- error: {
91
- light: colors.R500,
92
- dark: colors.R500
93
- }
72
+ light: "var(--ds-text-lowEmphasis, ".concat(colors.N300, ")"),
73
+ dark: "var(--ds-text-lowEmphasis, ".concat(colors.DN100, ")")
94
74
  });
95
75
  var iconColor = (0, _components.themed)('appearance', {
96
76
  connectivity: {
97
- light: colors.B300,
98
- dark: colors.B75
77
+ light: "var(--ds-iconBorder-brand, ".concat(colors.B300, ")"),
78
+ dark: "var(--ds-iconBorder-brand, ".concat(colors.B75, ")")
99
79
  },
100
80
  confirmation: {
101
- light: colors.G200,
102
- dark: colors.G200
81
+ light: "var(--ds-iconBorder-success, ".concat(colors.G200, ")"),
82
+ dark: "var(--ds-iconBorder-success, ".concat(colors.G200, ")")
103
83
  },
104
84
  info: {
105
- light: colors.P200,
106
- dark: colors.P200
85
+ light: "var(--ds-iconBorder-discovery, ".concat(colors.P200, ")"),
86
+ dark: "var(--ds-iconBorder-discovery, ".concat(colors.P200, ")")
107
87
  },
108
88
  warning: {
109
- light: colors.Y200,
110
- dark: colors.Y200
89
+ light: "var(--ds-iconBorder-warning, ".concat(colors.Y200, ")"),
90
+ dark: "var(--ds-iconBorder-warning, ".concat(colors.Y200, ")")
111
91
  },
112
92
  error: {
113
- light: colors.R300,
114
- dark: colors.R300
93
+ light: "var(--ds-iconBorder-danger, ".concat(colors.R300, ")"),
94
+ dark: "var(--ds-iconBorder-danger, ".concat(colors.R300, ")")
115
95
  }
116
96
  });
117
97
  /**
@@ -167,10 +147,6 @@ var InlineMessage = function InlineMessage(_ref) {
167
147
  return (0, _core.jsx)("div", {
168
148
  css: rootStyles,
169
149
  style: {
170
- outlineColor: rootFocusColor({
171
- appearance: type,
172
- theme: theme
173
- }),
174
150
  '--icon-accent-color': iconColor({
175
151
  appearance: type,
176
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.2",
3
+ "version": "11.2.0",
4
4
  "sideEffects": false
5
5
  }
@@ -29,64 +29,44 @@ const rootStyles = css({
29
29
  outline: '1px solid'
30
30
  },
31
31
  '&:hover': {
32
+ // eslint-disable-next-line @repo/internal/styles/no-nested-styles
32
33
  '[data-ds--inline-message--icon]': {
33
34
  color: 'var(--icon-accent-color)'
34
35
  },
36
+ // eslint-disable-next-line @repo/internal/styles/no-nested-styles
35
37
  '[data-ds--inline-message--button]': {
36
38
  textDecoration: 'underline'
37
39
  }
38
40
  }
39
41
  });
40
42
  const titleColor = themed({
41
- light: colors.N600,
42
- dark: colors.DN600
43
+ light: `var(--ds-text-highEmphasis, ${colors.N600})`,
44
+ dark: `var(--ds-text-highEmphasis, ${colors.DN600})`
43
45
  });
44
46
  const textColor = themed({
45
- light: colors.N300,
46
- dark: colors.DN100
47
- });
48
- const rootFocusColor = themed('appearance', {
49
- connectivity: {
50
- light: colors.B500,
51
- dark: colors.B200
52
- },
53
- confirmation: {
54
- light: colors.G400,
55
- dark: colors.G400
56
- },
57
- info: {
58
- light: colors.P500,
59
- dark: colors.P300
60
- },
61
- warning: {
62
- light: colors.Y500,
63
- dark: colors.Y500
64
- },
65
- error: {
66
- light: colors.R500,
67
- dark: colors.R500
68
- }
47
+ light: `var(--ds-text-lowEmphasis, ${colors.N300})`,
48
+ dark: `var(--ds-text-lowEmphasis, ${colors.DN100})`
69
49
  });
70
50
  const iconColor = themed('appearance', {
71
51
  connectivity: {
72
- light: colors.B300,
73
- dark: colors.B75
52
+ light: `var(--ds-iconBorder-brand, ${colors.B300})`,
53
+ dark: `var(--ds-iconBorder-brand, ${colors.B75})`
74
54
  },
75
55
  confirmation: {
76
- light: colors.G200,
77
- dark: colors.G200
56
+ light: `var(--ds-iconBorder-success, ${colors.G200})`,
57
+ dark: `var(--ds-iconBorder-success, ${colors.G200})`
78
58
  },
79
59
  info: {
80
- light: colors.P200,
81
- dark: colors.P200
60
+ light: `var(--ds-iconBorder-discovery, ${colors.P200})`,
61
+ dark: `var(--ds-iconBorder-discovery, ${colors.P200})`
82
62
  },
83
63
  warning: {
84
- light: colors.Y200,
85
- dark: colors.Y200
64
+ light: `var(--ds-iconBorder-warning, ${colors.Y200})`,
65
+ dark: `var(--ds-iconBorder-warning, ${colors.Y200})`
86
66
  },
87
67
  error: {
88
- light: colors.R300,
89
- dark: colors.R300
68
+ light: `var(--ds-iconBorder-danger, ${colors.R300})`,
69
+ dark: `var(--ds-iconBorder-danger, ${colors.R300})`
90
70
  }
91
71
  });
92
72
  /**
@@ -130,10 +110,6 @@ const InlineMessage = ({
130
110
  return jsx("div", {
131
111
  css: rootStyles,
132
112
  style: {
133
- outlineColor: rootFocusColor({
134
- appearance: type,
135
- theme
136
- }),
137
113
  '--icon-accent-color': iconColor({
138
114
  appearance: type,
139
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.2",
3
+ "version": "11.2.0",
4
4
  "sideEffects": false
5
5
  }
@@ -31,64 +31,44 @@ var rootStyles = css({
31
31
  outline: '1px solid'
32
32
  },
33
33
  '&:hover': {
34
+ // eslint-disable-next-line @repo/internal/styles/no-nested-styles
34
35
  '[data-ds--inline-message--icon]': {
35
36
  color: 'var(--icon-accent-color)'
36
37
  },
38
+ // eslint-disable-next-line @repo/internal/styles/no-nested-styles
37
39
  '[data-ds--inline-message--button]': {
38
40
  textDecoration: 'underline'
39
41
  }
40
42
  }
41
43
  });
42
44
  var titleColor = themed({
43
- light: colors.N600,
44
- dark: colors.DN600
45
+ light: "var(--ds-text-highEmphasis, ".concat(colors.N600, ")"),
46
+ dark: "var(--ds-text-highEmphasis, ".concat(colors.DN600, ")")
45
47
  });
46
48
  var textColor = themed({
47
- light: colors.N300,
48
- dark: colors.DN100
49
- });
50
- var 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
- }
49
+ light: "var(--ds-text-lowEmphasis, ".concat(colors.N300, ")"),
50
+ dark: "var(--ds-text-lowEmphasis, ".concat(colors.DN100, ")")
71
51
  });
72
52
  var iconColor = themed('appearance', {
73
53
  connectivity: {
74
- light: colors.B300,
75
- dark: colors.B75
54
+ light: "var(--ds-iconBorder-brand, ".concat(colors.B300, ")"),
55
+ dark: "var(--ds-iconBorder-brand, ".concat(colors.B75, ")")
76
56
  },
77
57
  confirmation: {
78
- light: colors.G200,
79
- dark: colors.G200
58
+ light: "var(--ds-iconBorder-success, ".concat(colors.G200, ")"),
59
+ dark: "var(--ds-iconBorder-success, ".concat(colors.G200, ")")
80
60
  },
81
61
  info: {
82
- light: colors.P200,
83
- dark: colors.P200
62
+ light: "var(--ds-iconBorder-discovery, ".concat(colors.P200, ")"),
63
+ dark: "var(--ds-iconBorder-discovery, ".concat(colors.P200, ")")
84
64
  },
85
65
  warning: {
86
- light: colors.Y200,
87
- dark: colors.Y200
66
+ light: "var(--ds-iconBorder-warning, ".concat(colors.Y200, ")"),
67
+ dark: "var(--ds-iconBorder-warning, ".concat(colors.Y200, ")")
88
68
  },
89
69
  error: {
90
- light: colors.R300,
91
- dark: colors.R300
70
+ light: "var(--ds-iconBorder-danger, ".concat(colors.R300, ")"),
71
+ dark: "var(--ds-iconBorder-danger, ".concat(colors.R300, ")")
92
72
  }
93
73
  });
94
74
  /**
@@ -144,10 +124,6 @@ var InlineMessage = function InlineMessage(_ref) {
144
124
  return jsx("div", {
145
125
  css: rootStyles,
146
126
  style: {
147
- outlineColor: rootFocusColor({
148
- appearance: type,
149
- theme: theme
150
- }),
151
127
  '--icon-accent-color': iconColor({
152
128
  appearance: type,
153
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.2",
3
+ "version": "11.2.0",
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.2",
3
+ "version": "11.2.0",
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/"
@@ -24,10 +24,11 @@
24
24
  }
25
25
  },
26
26
  "dependencies": {
27
- "@atlaskit/button": "^16.0.0",
28
- "@atlaskit/icon": "^21.7.0",
29
- "@atlaskit/inline-dialog": "^13.0.0",
30
- "@atlaskit/theme": "^11.4.0",
27
+ "@atlaskit/button": "^16.1.0",
28
+ "@atlaskit/icon": "^21.9.0",
29
+ "@atlaskit/inline-dialog": "^13.1.0",
30
+ "@atlaskit/theme": "^12.0.0",
31
+ "@atlaskit/tokens": "^0.4.0",
31
32
  "@babel/runtime": "^7.0.0",
32
33
  "@emotion/core": "^10.0.9"
33
34
  },
@@ -37,6 +38,7 @@
37
38
  "devDependencies": {
38
39
  "@atlaskit/build-utils": "*",
39
40
  "@atlaskit/docs": "*",
41
+ "@atlaskit/section-message": "^6.1.0",
40
42
  "@atlaskit/ssr": "*",
41
43
  "@atlaskit/visual-regression": "*",
42
44
  "@atlaskit/webdriver-runner": "*",
@@ -57,10 +59,13 @@
57
59
  },
58
60
  "@repo/internal": {
59
61
  "design-system": "v1",
60
- "styling": "emotion",
62
+ "styling": [
63
+ "static",
64
+ "emotion"
65
+ ],
61
66
  "ui-components": "lite-mode",
62
67
  "analytics": "analytics-next",
63
- "theming": "new-theming-api",
68
+ "theming": "tokens",
64
69
  "deprecation": "no-deprecated-imports"
65
70
  }
66
71
  },