@atlaskit/flag 14.5.3 → 14.5.6

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 (15) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/__perf__/withFlagGroup.tsx +1 -1
  3. package/dist/cjs/auto-dismiss-flag.js +1 -1
  4. package/dist/cjs/flag.js +1 -1
  5. package/dist/cjs/theme.js +43 -41
  6. package/dist/cjs/version.json +1 -1
  7. package/dist/es2019/auto-dismiss-flag.js +1 -1
  8. package/dist/es2019/flag.js +1 -1
  9. package/dist/es2019/theme.js +43 -41
  10. package/dist/es2019/version.json +1 -1
  11. package/dist/esm/auto-dismiss-flag.js +1 -1
  12. package/dist/esm/flag.js +1 -1
  13. package/dist/esm/theme.js +43 -41
  14. package/dist/esm/version.json +1 -1
  15. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @atlaskit/flag
2
2
 
3
+ ## 14.5.6
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 14.5.5
10
+
11
+ ### Patch Changes
12
+
13
+ - [`0739258f502`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0739258f502) - [ux] Fixed token usages on backgrounds and action links.
14
+ - Updated dependencies
15
+
16
+ ## 14.5.4
17
+
18
+ ### Patch Changes
19
+
20
+ - Updated dependencies
21
+
3
22
  ## 14.5.3
4
23
 
5
24
  ### Patch Changes
package/__perf__/withFlagGroup.tsx CHANGED
@@ -13,7 +13,7 @@ export default () => (
13
13
  icon={
14
14
  <SuccessIcon
15
15
  label="Success"
16
- secondaryColor={token('color.icon.success', G400)}
16
+ secondaryColor={token('color.background.success.bold', G400)}
17
17
  />
18
18
  }
19
19
  id="success"
package/dist/cjs/auto-dismiss-flag.js CHANGED
@@ -26,7 +26,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
26
26
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
27
27
 
28
28
  var packageName = "@atlaskit/flag";
29
- var packageVersion = "14.5.3";
29
+ var packageVersion = "14.5.6";
30
30
  var AUTO_DISMISS_SECONDS = 8;
31
31
  exports.AUTO_DISMISS_SECONDS = AUTO_DISMISS_SECONDS;
32
32
 
package/dist/cjs/flag.js CHANGED
@@ -44,7 +44,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
44
44
  var analyticsAttributes = {
45
45
  componentName: 'flag',
46
46
  packageName: "@atlaskit/flag",
47
- packageVersion: "14.5.3"
47
+ packageVersion: "14.5.6"
48
48
  };
49
49
  var gridSize = (0, _constants.gridSize)();
50
50
  var doubleGridSize = gridSize * 2;
package/dist/cjs/theme.js CHANGED
@@ -9,24 +9,24 @@ var _colors = require("@atlaskit/theme/colors");
9
9
 
10
10
  var flagBackgroundColor = {
11
11
  error: {
12
- light: "var(--ds-surface-overlay, ".concat(_colors.R400, ")"),
13
- dark: "var(--ds-surface-overlay, ".concat(_colors.R300, ")")
12
+ light: "var(--ds-background-danger-bold, ".concat(_colors.R400, ")"),
13
+ dark: "var(--ds-background-danger-bold, ".concat(_colors.R300, ")")
14
14
  },
15
15
  info: {
16
- light: "var(--ds-surface-overlay, ".concat(_colors.N500, ")"),
17
- dark: "var(--ds-surface-overlay, ".concat(_colors.N500, ")")
16
+ light: "var(--ds-background-neutral-bold, ".concat(_colors.N500, ")"),
17
+ dark: "var(--ds-background-neutral-bold, ".concat(_colors.N500, ")")
18
18
  },
19
19
  normal: {
20
20
  light: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
21
21
  dark: "var(--ds-surface-overlay, ".concat(_colors.DN50, ")")
22
22
  },
23
23
  success: {
24
- light: "var(--ds-surface-overlay, ".concat(_colors.G400, ")"),
25
- dark: "var(--ds-surface-overlay, ".concat(_colors.G300, ")")
24
+ light: "var(--ds-background-success-bold, ".concat(_colors.G400, ")"),
25
+ dark: "var(--ds-background-success-bold, ".concat(_colors.G300, ")")
26
26
  },
27
27
  warning: {
28
- light: "var(--ds-surface-overlay, ".concat(_colors.Y200, ")"),
29
- dark: "var(--ds-surface-overlay, ".concat(_colors.Y300, ")")
28
+ light: "var(--ds-background-warning-bold, ".concat(_colors.Y200, ")"),
29
+ dark: "var(--ds-background-warning-bold, ".concat(_colors.Y300, ")")
30
30
  }
31
31
  };
32
32
 
@@ -39,46 +39,46 @@ var flagBorderColor = "var(--ds-surface-overlay, ".concat(_colors.N60A, ")");
39
39
  exports.flagBorderColor = flagBorderColor;
40
40
  var flagIconColor = {
41
41
  error: {
42
- light: "var(--ds-icon-danger, ".concat(_colors.N0, ")"),
43
- dark: "var(--ds-icon-danger, ".concat(_colors.DN40, ")")
42
+ light: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
43
+ dark: "var(--ds-icon-inverse, ".concat(_colors.DN40, ")")
44
44
  },
45
45
  info: {
46
- light: "var(--ds-icon-discovery, ".concat(_colors.N0, ")"),
47
- dark: "var(--ds-icon-discovery, ".concat(_colors.DN600, ")")
46
+ light: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
47
+ dark: "var(--ds-icon-inverse, ".concat(_colors.DN600, ")")
48
48
  },
49
49
  normal: {
50
- light: "var(--ds-icon-brand, ".concat(_colors.N500, ")"),
51
- dark: "var(--ds-icon-brand, ".concat(_colors.DN600, ")")
50
+ light: "var(--ds-icon-subtle, ".concat(_colors.N500, ")"),
51
+ dark: "var(--ds-icon-subtle, ".concat(_colors.DN600, ")")
52
52
  },
53
53
  success: {
54
- light: "var(--ds-icon-success, ".concat(_colors.N0, ")"),
55
- dark: "var(--ds-icon-success, ".concat(_colors.DN40, ")")
54
+ light: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
55
+ dark: "var(--ds-icon-inverse, ".concat(_colors.DN40, ")")
56
56
  },
57
57
  warning: {
58
- light: "var(--ds-icon-warning, ".concat(_colors.N700, ")"),
59
- dark: "var(--ds-icon-warning, ".concat(_colors.DN40, ")")
58
+ light: "var(--ds-icon-warning-inverse, ".concat(_colors.N700, ")"),
59
+ dark: "var(--ds-icon-warning-inverse, ".concat(_colors.DN40, ")")
60
60
  }
61
61
  };
62
62
  var flagTextColor = {
63
63
  error: {
64
- light: "var(--ds-text, ".concat(_colors.N0, ")"),
65
- dark: "var(--ds-text, ".concat(_colors.DN40, ")")
64
+ light: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
65
+ dark: "var(--ds-text-inverse, ".concat(_colors.DN40, ")")
66
66
  },
67
67
  info: {
68
- light: "var(--ds-text, ".concat(_colors.N0, ")"),
69
- dark: "var(--ds-text, ".concat(_colors.DN600, ")")
68
+ light: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
69
+ dark: "var(--ds-text-inverse, ".concat(_colors.DN600, ")")
70
70
  },
71
71
  normal: {
72
- light: "var(--ds-text, ".concat(_colors.N500, ")"),
73
- dark: "var(--ds-text, ".concat(_colors.DN600, ")")
72
+ light: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
73
+ dark: "var(--ds-text-subtle, ".concat(_colors.DN600, ")")
74
74
  },
75
75
  success: {
76
- light: "var(--ds-text, ".concat(_colors.N0, ")"),
77
- dark: "var(--ds-text, ".concat(_colors.DN40, ")")
76
+ light: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
77
+ dark: "var(--ds-text-inverse, ".concat(_colors.DN40, ")")
78
78
  },
79
79
  warning: {
80
- light: "var(--ds-text, ".concat(_colors.N700, ")"),
81
- dark: "var(--ds-text, ".concat(_colors.DN40, ")")
80
+ light: "var(--ds-text-warning-inverse, ".concat(_colors.N700, ")"),
81
+ dark: "var(--ds-text-warning-inverse, ".concat(_colors.DN40, ")")
82
82
  }
83
83
  };
84
84
 
@@ -125,7 +125,9 @@ var getFlagFocusRingColor = function getFlagFocusRingColor(appearance, mode) {
125
125
  };
126
126
 
127
127
  exports.getFlagFocusRingColor = getFlagFocusRingColor;
128
- var lightButtonBackground = 'rgba(255, 255, 255, 0.08)';
128
+ var lightButtonBackground = 'rgba(255, 255, 255, 0.08)'; // TODO: DSP-2519 Interaction tokens should be used for hovered and pressed states
129
+ // https://product-fabric.atlassian.net/browse/DSP-2519
130
+
129
131
  var actionBackground = {
130
132
  success: {
131
133
  light: "var(--ds-background-neutral, ".concat(lightButtonBackground, ")"),
@@ -144,30 +146,30 @@ var actionBackground = {
144
146
  dark: "var(--ds-background-neutral, ".concat(_colors.N30A, ")")
145
147
  },
146
148
  normal: {
147
- light: "var(--ds-background-neutral, none)",
148
- dark: "var(--ds-background-neutral, none)"
149
+ light: 'none',
150
+ dark: 'none'
149
151
  }
150
152
  };
151
153
  var actionColor = {
152
154
  success: {
153
- light: "var(--ds-text-subtle, ".concat(_colors.N0, ")"),
154
- dark: "var(--ds-text-subtle, ".concat(_colors.DN40, ")")
155
+ light: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
156
+ dark: "var(--ds-text-inverse, ".concat(_colors.DN40, ")")
155
157
  },
156
158
  info: {
157
- light: "var(--ds-text-subtle, ".concat(_colors.N0, ")"),
158
- dark: "var(--ds-text-subtle, ".concat(_colors.DN600, ")")
159
+ light: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
160
+ dark: "var(--ds-text-inverse, ".concat(_colors.DN600, ")")
159
161
  },
160
162
  error: {
161
- light: "var(--ds-text-subtle, ".concat(_colors.N0, ")"),
162
- dark: "var(--ds-text-subtle, ".concat(_colors.DN600, ")")
163
+ light: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
164
+ dark: "var(--ds-text-inverse, ".concat(_colors.DN600, ")")
163
165
  },
164
166
  warning: {
165
- light: "var(--ds-text-subtle, ".concat(_colors.N700, ")"),
166
- dark: "var(--ds-text-subtle, ".concat(_colors.DN40, ")")
167
+ light: "var(--ds-text-warning-inverse, ".concat(_colors.N700, ")"),
168
+ dark: "var(--ds-text-warning-inverse, ".concat(_colors.DN40, ")")
167
169
  },
168
170
  normal: {
169
- light: "var(--ds-text-subtle, ".concat(_colors.B400, ")"),
170
- dark: "var(--ds-text-subtle, ".concat(_colors.B100, ")")
171
+ light: "var(--ds-link, ".concat(_colors.B400, ")"),
172
+ dark: "var(--ds-link, ".concat(_colors.B100, ")")
171
173
  }
172
174
  };
173
175
 
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/flag",
3
- "version": "14.5.3",
3
+ "version": "14.5.6",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/auto-dismiss-flag.js CHANGED
@@ -5,7 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
5
5
  import Flag from './flag';
6
6
  import { useFlagGroup } from './flag-group';
7
7
  const packageName = "@atlaskit/flag";
8
- const packageVersion = "14.5.3";
8
+ const packageVersion = "14.5.6";
9
9
  export const AUTO_DISMISS_SECONDS = 8;
10
10
 
11
11
  const AutoDismissFlag = props => {
package/dist/es2019/flag.js CHANGED
@@ -16,7 +16,7 @@ import { Title, Description, Expander, DismissButton } from './internal';
16
16
  const analyticsAttributes = {
17
17
  componentName: 'flag',
18
18
  packageName: "@atlaskit/flag",
19
- packageVersion: "14.5.3"
19
+ packageVersion: "14.5.6"
20
20
  };
21
21
  const gridSize = getGridSize();
22
22
  const doubleGridSize = gridSize * 2;
package/dist/es2019/theme.js CHANGED
@@ -1,70 +1,70 @@
1
1
  import { B100, B400, DN40, DN50, DN600, G300, G400, N0, N200, N30A, N40, N500, N50A, N60A, N700, R300, R400, Y200, Y300 } from '@atlaskit/theme/colors';
2
2
  const flagBackgroundColor = {
3
3
  error: {
4
- light: `var(--ds-surface-overlay, ${R400})`,
5
- dark: `var(--ds-surface-overlay, ${R300})`
4
+ light: `var(--ds-background-danger-bold, ${R400})`,
5
+ dark: `var(--ds-background-danger-bold, ${R300})`
6
6
  },
7
7
  info: {
8
- light: `var(--ds-surface-overlay, ${N500})`,
9
- dark: `var(--ds-surface-overlay, ${N500})`
8
+ light: `var(--ds-background-neutral-bold, ${N500})`,
9
+ dark: `var(--ds-background-neutral-bold, ${N500})`
10
10
  },
11
11
  normal: {
12
12
  light: `var(--ds-surface-overlay, ${N0})`,
13
13
  dark: `var(--ds-surface-overlay, ${DN50})`
14
14
  },
15
15
  success: {
16
- light: `var(--ds-surface-overlay, ${G400})`,
17
- dark: `var(--ds-surface-overlay, ${G300})`
16
+ light: `var(--ds-background-success-bold, ${G400})`,
17
+ dark: `var(--ds-background-success-bold, ${G300})`
18
18
  },
19
19
  warning: {
20
- light: `var(--ds-surface-overlay, ${Y200})`,
21
- dark: `var(--ds-surface-overlay, ${Y300})`
20
+ light: `var(--ds-background-warning-bold, ${Y200})`,
21
+ dark: `var(--ds-background-warning-bold, ${Y300})`
22
22
  }
23
23
  };
24
24
  export const getFlagBackgroundColor = (appearance, mode) => flagBackgroundColor[appearance][mode];
25
25
  export const flagBorderColor = `var(--ds-surface-overlay, ${N60A})`;
26
26
  const flagIconColor = {
27
27
  error: {
28
- light: `var(--ds-icon-danger, ${N0})`,
29
- dark: `var(--ds-icon-danger, ${DN40})`
28
+ light: `var(--ds-icon-inverse, ${N0})`,
29
+ dark: `var(--ds-icon-inverse, ${DN40})`
30
30
  },
31
31
  info: {
32
- light: `var(--ds-icon-discovery, ${N0})`,
33
- dark: `var(--ds-icon-discovery, ${DN600})`
32
+ light: `var(--ds-icon-inverse, ${N0})`,
33
+ dark: `var(--ds-icon-inverse, ${DN600})`
34
34
  },
35
35
  normal: {
36
- light: `var(--ds-icon-brand, ${N500})`,
37
- dark: `var(--ds-icon-brand, ${DN600})`
36
+ light: `var(--ds-icon-subtle, ${N500})`,
37
+ dark: `var(--ds-icon-subtle, ${DN600})`
38
38
  },
39
39
  success: {
40
- light: `var(--ds-icon-success, ${N0})`,
41
- dark: `var(--ds-icon-success, ${DN40})`
40
+ light: `var(--ds-icon-inverse, ${N0})`,
41
+ dark: `var(--ds-icon-inverse, ${DN40})`
42
42
  },
43
43
  warning: {
44
- light: `var(--ds-icon-warning, ${N700})`,
45
- dark: `var(--ds-icon-warning, ${DN40})`
44
+ light: `var(--ds-icon-warning-inverse, ${N700})`,
45
+ dark: `var(--ds-icon-warning-inverse, ${DN40})`
46
46
  }
47
47
  };
48
48
  const flagTextColor = {
49
49
  error: {
50
- light: `var(--ds-text, ${N0})`,
51
- dark: `var(--ds-text, ${DN40})`
50
+ light: `var(--ds-text-inverse, ${N0})`,
51
+ dark: `var(--ds-text-inverse, ${DN40})`
52
52
  },
53
53
  info: {
54
- light: `var(--ds-text, ${N0})`,
55
- dark: `var(--ds-text, ${DN600})`
54
+ light: `var(--ds-text-inverse, ${N0})`,
55
+ dark: `var(--ds-text-inverse, ${DN600})`
56
56
  },
57
57
  normal: {
58
- light: `var(--ds-text, ${N500})`,
59
- dark: `var(--ds-text, ${DN600})`
58
+ light: `var(--ds-text-subtle, ${N500})`,
59
+ dark: `var(--ds-text-subtle, ${DN600})`
60
60
  },
61
61
  success: {
62
- light: `var(--ds-text, ${N0})`,
63
- dark: `var(--ds-text, ${DN40})`
62
+ light: `var(--ds-text-inverse, ${N0})`,
63
+ dark: `var(--ds-text-inverse, ${DN40})`
64
64
  },
65
65
  warning: {
66
- light: `var(--ds-text, ${N700})`,
67
- dark: `var(--ds-text, ${DN40})`
66
+ light: `var(--ds-text-warning-inverse, ${N700})`,
67
+ dark: `var(--ds-text-warning-inverse, ${DN40})`
68
68
  }
69
69
  };
70
70
  export const getFlagTextColor = (appearance, mode) => flagTextColor[appearance][mode];
@@ -95,7 +95,9 @@ const flagFocusRingColor = {
95
95
  }
96
96
  };
97
97
  export const getFlagFocusRingColor = (appearance, mode) => flagFocusRingColor[appearance][mode];
98
- const lightButtonBackground = 'rgba(255, 255, 255, 0.08)';
98
+ const lightButtonBackground = 'rgba(255, 255, 255, 0.08)'; // TODO: DSP-2519 Interaction tokens should be used for hovered and pressed states
99
+ // https://product-fabric.atlassian.net/browse/DSP-2519
100
+
99
101
  const actionBackground = {
100
102
  success: {
101
103
  light: `var(--ds-background-neutral, ${lightButtonBackground})`,
@@ -114,30 +116,30 @@ const actionBackground = {
114
116
  dark: `var(--ds-background-neutral, ${N30A})`
115
117
  },
116
118
  normal: {
117
- light: "var(--ds-background-neutral, none)",
118
- dark: "var(--ds-background-neutral, none)"
119
+ light: 'none',
120
+ dark: 'none'
119
121
  }
120
122
  };
121
123
  const actionColor = {
122
124
  success: {
123
- light: `var(--ds-text-subtle, ${N0})`,
124
- dark: `var(--ds-text-subtle, ${DN40})`
125
+ light: `var(--ds-text-inverse, ${N0})`,
126
+ dark: `var(--ds-text-inverse, ${DN40})`
125
127
  },
126
128
  info: {
127
- light: `var(--ds-text-subtle, ${N0})`,
128
- dark: `var(--ds-text-subtle, ${DN600})`
129
+ light: `var(--ds-text-inverse, ${N0})`,
130
+ dark: `var(--ds-text-inverse, ${DN600})`
129
131
  },
130
132
  error: {
131
- light: `var(--ds-text-subtle, ${N0})`,
132
- dark: `var(--ds-text-subtle, ${DN600})`
133
+ light: `var(--ds-text-inverse, ${N0})`,
134
+ dark: `var(--ds-text-inverse, ${DN600})`
133
135
  },
134
136
  warning: {
135
- light: `var(--ds-text-subtle, ${N700})`,
136
- dark: `var(--ds-text-subtle, ${DN40})`
137
+ light: `var(--ds-text-warning-inverse, ${N700})`,
138
+ dark: `var(--ds-text-warning-inverse, ${DN40})`
137
139
  },
138
140
  normal: {
139
- light: `var(--ds-text-subtle, ${B400})`,
140
- dark: `var(--ds-text-subtle, ${B100})`
141
+ light: `var(--ds-link, ${B400})`,
142
+ dark: `var(--ds-link, ${B100})`
141
143
  }
142
144
  };
143
145
  export const getActionBackground = (appearance, mode) => actionBackground[appearance][mode];
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/flag",
3
- "version": "14.5.3",
3
+ "version": "14.5.6",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/auto-dismiss-flag.js CHANGED
@@ -5,7 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
5
5
  import Flag from './flag';
6
6
  import { useFlagGroup } from './flag-group';
7
7
  var packageName = "@atlaskit/flag";
8
- var packageVersion = "14.5.3";
8
+ var packageVersion = "14.5.6";
9
9
  export var AUTO_DISMISS_SECONDS = 8;
10
10
 
11
11
  var AutoDismissFlag = function AutoDismissFlag(props) {
package/dist/esm/flag.js CHANGED
@@ -22,7 +22,7 @@ import { Title, Description, Expander, DismissButton } from './internal';
22
22
  var analyticsAttributes = {
23
23
  componentName: 'flag',
24
24
  packageName: "@atlaskit/flag",
25
- packageVersion: "14.5.3"
25
+ packageVersion: "14.5.6"
26
26
  };
27
27
  var gridSize = getGridSize();
28
28
  var doubleGridSize = gridSize * 2;
package/dist/esm/theme.js CHANGED
@@ -1,24 +1,24 @@
1
1
  import { B100, B400, DN40, DN50, DN600, G300, G400, N0, N200, N30A, N40, N500, N50A, N60A, N700, R300, R400, Y200, Y300 } from '@atlaskit/theme/colors';
2
2
  var flagBackgroundColor = {
3
3
  error: {
4
- light: "var(--ds-surface-overlay, ".concat(R400, ")"),
5
- dark: "var(--ds-surface-overlay, ".concat(R300, ")")
4
+ light: "var(--ds-background-danger-bold, ".concat(R400, ")"),
5
+ dark: "var(--ds-background-danger-bold, ".concat(R300, ")")
6
6
  },
7
7
  info: {
8
- light: "var(--ds-surface-overlay, ".concat(N500, ")"),
9
- dark: "var(--ds-surface-overlay, ".concat(N500, ")")
8
+ light: "var(--ds-background-neutral-bold, ".concat(N500, ")"),
9
+ dark: "var(--ds-background-neutral-bold, ".concat(N500, ")")
10
10
  },
11
11
  normal: {
12
12
  light: "var(--ds-surface-overlay, ".concat(N0, ")"),
13
13
  dark: "var(--ds-surface-overlay, ".concat(DN50, ")")
14
14
  },
15
15
  success: {
16
- light: "var(--ds-surface-overlay, ".concat(G400, ")"),
17
- dark: "var(--ds-surface-overlay, ".concat(G300, ")")
16
+ light: "var(--ds-background-success-bold, ".concat(G400, ")"),
17
+ dark: "var(--ds-background-success-bold, ".concat(G300, ")")
18
18
  },
19
19
  warning: {
20
- light: "var(--ds-surface-overlay, ".concat(Y200, ")"),
21
- dark: "var(--ds-surface-overlay, ".concat(Y300, ")")
20
+ light: "var(--ds-background-warning-bold, ".concat(Y200, ")"),
21
+ dark: "var(--ds-background-warning-bold, ".concat(Y300, ")")
22
22
  }
23
23
  };
24
24
  export var getFlagBackgroundColor = function getFlagBackgroundColor(appearance, mode) {
@@ -27,46 +27,46 @@ export var getFlagBackgroundColor = function getFlagBackgroundColor(appearance,
27
27
  export var flagBorderColor = "var(--ds-surface-overlay, ".concat(N60A, ")");
28
28
  var flagIconColor = {
29
29
  error: {
30
- light: "var(--ds-icon-danger, ".concat(N0, ")"),
31
- dark: "var(--ds-icon-danger, ".concat(DN40, ")")
30
+ light: "var(--ds-icon-inverse, ".concat(N0, ")"),
31
+ dark: "var(--ds-icon-inverse, ".concat(DN40, ")")
32
32
  },
33
33
  info: {
34
- light: "var(--ds-icon-discovery, ".concat(N0, ")"),
35
- dark: "var(--ds-icon-discovery, ".concat(DN600, ")")
34
+ light: "var(--ds-icon-inverse, ".concat(N0, ")"),
35
+ dark: "var(--ds-icon-inverse, ".concat(DN600, ")")
36
36
  },
37
37
  normal: {
38
- light: "var(--ds-icon-brand, ".concat(N500, ")"),
39
- dark: "var(--ds-icon-brand, ".concat(DN600, ")")
38
+ light: "var(--ds-icon-subtle, ".concat(N500, ")"),
39
+ dark: "var(--ds-icon-subtle, ".concat(DN600, ")")
40
40
  },
41
41
  success: {
42
- light: "var(--ds-icon-success, ".concat(N0, ")"),
43
- dark: "var(--ds-icon-success, ".concat(DN40, ")")
42
+ light: "var(--ds-icon-inverse, ".concat(N0, ")"),
43
+ dark: "var(--ds-icon-inverse, ".concat(DN40, ")")
44
44
  },
45
45
  warning: {
46
- light: "var(--ds-icon-warning, ".concat(N700, ")"),
47
- dark: "var(--ds-icon-warning, ".concat(DN40, ")")
46
+ light: "var(--ds-icon-warning-inverse, ".concat(N700, ")"),
47
+ dark: "var(--ds-icon-warning-inverse, ".concat(DN40, ")")
48
48
  }
49
49
  };
50
50
  var flagTextColor = {
51
51
  error: {
52
- light: "var(--ds-text, ".concat(N0, ")"),
53
- dark: "var(--ds-text, ".concat(DN40, ")")
52
+ light: "var(--ds-text-inverse, ".concat(N0, ")"),
53
+ dark: "var(--ds-text-inverse, ".concat(DN40, ")")
54
54
  },
55
55
  info: {
56
- light: "var(--ds-text, ".concat(N0, ")"),
57
- dark: "var(--ds-text, ".concat(DN600, ")")
56
+ light: "var(--ds-text-inverse, ".concat(N0, ")"),
57
+ dark: "var(--ds-text-inverse, ".concat(DN600, ")")
58
58
  },
59
59
  normal: {
60
- light: "var(--ds-text, ".concat(N500, ")"),
61
- dark: "var(--ds-text, ".concat(DN600, ")")
60
+ light: "var(--ds-text-subtle, ".concat(N500, ")"),
61
+ dark: "var(--ds-text-subtle, ".concat(DN600, ")")
62
62
  },
63
63
  success: {
64
- light: "var(--ds-text, ".concat(N0, ")"),
65
- dark: "var(--ds-text, ".concat(DN40, ")")
64
+ light: "var(--ds-text-inverse, ".concat(N0, ")"),
65
+ dark: "var(--ds-text-inverse, ".concat(DN40, ")")
66
66
  },
67
67
  warning: {
68
- light: "var(--ds-text, ".concat(N700, ")"),
69
- dark: "var(--ds-text, ".concat(DN40, ")")
68
+ light: "var(--ds-text-warning-inverse, ".concat(N700, ")"),
69
+ dark: "var(--ds-text-warning-inverse, ".concat(DN40, ")")
70
70
  }
71
71
  };
72
72
  export var getFlagTextColor = function getFlagTextColor(appearance, mode) {
@@ -103,7 +103,9 @@ var flagFocusRingColor = {
103
103
  export var getFlagFocusRingColor = function getFlagFocusRingColor(appearance, mode) {
104
104
  return flagFocusRingColor[appearance][mode];
105
105
  };
106
- var lightButtonBackground = 'rgba(255, 255, 255, 0.08)';
106
+ var lightButtonBackground = 'rgba(255, 255, 255, 0.08)'; // TODO: DSP-2519 Interaction tokens should be used for hovered and pressed states
107
+ // https://product-fabric.atlassian.net/browse/DSP-2519
108
+
107
109
  var actionBackground = {
108
110
  success: {
109
111
  light: "var(--ds-background-neutral, ".concat(lightButtonBackground, ")"),
@@ -122,30 +124,30 @@ var actionBackground = {
122
124
  dark: "var(--ds-background-neutral, ".concat(N30A, ")")
123
125
  },
124
126
  normal: {
125
- light: "var(--ds-background-neutral, none)",
126
- dark: "var(--ds-background-neutral, none)"
127
+ light: 'none',
128
+ dark: 'none'
127
129
  }
128
130
  };
129
131
  var actionColor = {
130
132
  success: {
131
- light: "var(--ds-text-subtle, ".concat(N0, ")"),
132
- dark: "var(--ds-text-subtle, ".concat(DN40, ")")
133
+ light: "var(--ds-text-inverse, ".concat(N0, ")"),
134
+ dark: "var(--ds-text-inverse, ".concat(DN40, ")")
133
135
  },
134
136
  info: {
135
- light: "var(--ds-text-subtle, ".concat(N0, ")"),
136
- dark: "var(--ds-text-subtle, ".concat(DN600, ")")
137
+ light: "var(--ds-text-inverse, ".concat(N0, ")"),
138
+ dark: "var(--ds-text-inverse, ".concat(DN600, ")")
137
139
  },
138
140
  error: {
139
- light: "var(--ds-text-subtle, ".concat(N0, ")"),
140
- dark: "var(--ds-text-subtle, ".concat(DN600, ")")
141
+ light: "var(--ds-text-inverse, ".concat(N0, ")"),
142
+ dark: "var(--ds-text-inverse, ".concat(DN600, ")")
141
143
  },
142
144
  warning: {
143
- light: "var(--ds-text-subtle, ".concat(N700, ")"),
144
- dark: "var(--ds-text-subtle, ".concat(DN40, ")")
145
+ light: "var(--ds-text-warning-inverse, ".concat(N700, ")"),
146
+ dark: "var(--ds-text-warning-inverse, ".concat(DN40, ")")
145
147
  },
146
148
  normal: {
147
- light: "var(--ds-text-subtle, ".concat(B400, ")"),
148
- dark: "var(--ds-text-subtle, ".concat(B100, ")")
149
+ light: "var(--ds-link, ".concat(B400, ")"),
150
+ dark: "var(--ds-link, ".concat(B100, ")")
149
151
  }
150
152
  };
151
153
  export var getActionBackground = function getActionBackground(appearance, mode) {
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/flag",
3
- "version": "14.5.3",
3
+ "version": "14.5.6",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/flag",
3
- "version": "14.5.3",
3
+ "version": "14.5.6",
4
4
  "description": "A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -24,14 +24,14 @@
24
24
  },
25
25
  "dependencies": {
26
26
  "@atlaskit/analytics-next": "^8.0.0",
27
- "@atlaskit/button": "^16.0.0",
27
+ "@atlaskit/button": "^16.2.0",
28
28
  "@atlaskit/ds-lib": "^1.4.0",
29
29
  "@atlaskit/focus-ring": "^1.0.0",
30
30
  "@atlaskit/icon": "^21.10.0",
31
31
  "@atlaskit/motion": "^1.0.0",
32
32
  "@atlaskit/portal": "^4.0.0",
33
33
  "@atlaskit/theme": "^12.1.0",
34
- "@atlaskit/tokens": "^0.6.0",
34
+ "@atlaskit/tokens": "^0.9.0",
35
35
  "@atlaskit/visually-hidden": "^1.0.0",
36
36
  "@babel/runtime": "^7.0.0",
37
37
  "@emotion/core": "^10.0.9"
@@ -53,7 +53,7 @@
53
53
  "jest-emotion": "^10.0.32",
54
54
  "react-dom": "^16.8.0",
55
55
  "storybook-addon-performance": "^0.16.0",
56
- "typescript": "3.9.6"
56
+ "typescript": "3.9.10"
57
57
  },
58
58
  "keywords": [
59
59
  "atlaskit",