@atlaskit/flag 15.0.2 → 15.0.3

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,12 @@
1
1
  # @atlaskit/flag
2
2
 
3
+ ## 15.0.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [`56a44cd0ae9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56a44cd0ae9) - - [ux] Updated Flag component colored background buttons to use correct tokens for better contrast
8
+ - Made the button color type stricter and extracted local css variable names into constants
9
+
3
10
  ## 15.0.2
4
11
 
5
12
  ### Patch Changes
@@ -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 = "15.0.2";
29
+ var packageVersion = "15.0.3";
30
30
  var AUTO_DISMISS_SECONDS = 8;
31
31
  /**
32
32
  * __Auto dismiss flag__
@@ -3,6 +3,16 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.DEFAULT_APPEARANCE = void 0;
6
+ exports.VAR_FOCUS_COLOR = exports.VAR_COLOR = exports.VAR_BG_COLOR_HOVER = exports.VAR_BG_COLOR_ACTIVE = exports.VAR_BG_COLOR = exports.DEFAULT_APPEARANCE = void 0;
7
7
  var DEFAULT_APPEARANCE = 'normal';
8
- exports.DEFAULT_APPEARANCE = DEFAULT_APPEARANCE;
8
+ exports.DEFAULT_APPEARANCE = DEFAULT_APPEARANCE;
9
+ var VAR_COLOR = '--color';
10
+ exports.VAR_COLOR = VAR_COLOR;
11
+ var VAR_BG_COLOR = '--bg-color';
12
+ exports.VAR_BG_COLOR = VAR_BG_COLOR;
13
+ var VAR_BG_COLOR_HOVER = '--bg-color-hover';
14
+ exports.VAR_BG_COLOR_HOVER = VAR_BG_COLOR_HOVER;
15
+ var VAR_BG_COLOR_ACTIVE = '--bg-color-active';
16
+ exports.VAR_BG_COLOR_ACTIVE = VAR_BG_COLOR_ACTIVE;
17
+ var VAR_FOCUS_COLOR = '--focus-color';
18
+ exports.VAR_FOCUS_COLOR = VAR_FOCUS_COLOR;
@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.default = void 0;
9
9
 
10
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
+
10
12
  var _react = require("@emotion/react");
11
13
 
12
14
  var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
@@ -26,15 +28,21 @@ var gridSize = (0, _constants.gridSize)();
26
28
  var buttonStyles = (0, _react.css)({
27
29
  '&&, a&&': {
28
30
  padding: "0 ".concat(gridSize, "px !important"),
29
- background: "var(--bg-color)",
30
- color: "var(--color) !important",
31
+ background: "var(".concat(_constants2.VAR_BG_COLOR, ")"),
32
+ color: "var(".concat(_constants2.VAR_COLOR, ") !important"),
31
33
  fontWeight: 500
32
34
  },
33
35
  '&&:focus, a&&:focus': {
34
- boxShadow: "0 0 0 2px var(--focus-color)"
36
+ boxShadow: "0 0 0 2px var(".concat(_constants2.VAR_FOCUS_COLOR, ")")
35
37
  },
36
38
  '&&:hover, &&:active, a&&:hover, a&&:active': {
37
39
  textDecoration: 'underline'
40
+ },
41
+ '&&:hover': {
42
+ backgroundColor: "var(".concat(_constants2.VAR_BG_COLOR_HOVER, ")")
43
+ },
44
+ '&&:active': {
45
+ backgroundColor: "var(".concat(_constants2.VAR_BG_COLOR_ACTIVE, ")")
38
46
  }
39
47
  });
40
48
  var appearanceNormalButtonStyles = (0, _react.css)({
@@ -66,6 +74,8 @@ var FlagActions = function FlagActions(props) {
66
74
  },
67
75
  testId: testId && "".concat(testId, "-actions")
68
76
  }, actions.map(function (action, index) {
77
+ var _ref;
78
+
69
79
  return (0, _react.jsx)(_customThemeButton.default, {
70
80
  onClick: action.onClick,
71
81
  href: action.href,
@@ -75,11 +85,7 @@ var FlagActions = function FlagActions(props) {
75
85
  spacing: "compact",
76
86
  testId: action.testId,
77
87
  key: index,
78
- style: {
79
- '--color': _theme.actionTextColor[appearance],
80
- '--bg-color': _theme.actionBackgroundColor[appearance],
81
- '--focus-color': _theme.flagFocusRingColor[appearance]
82
- },
88
+ style: (_ref = {}, (0, _defineProperty2.default)(_ref, _constants2.VAR_COLOR, _theme.actionTextColor[appearance]), (0, _defineProperty2.default)(_ref, _constants2.VAR_BG_COLOR, _theme.actionBackgroundColor[appearance].default), (0, _defineProperty2.default)(_ref, _constants2.VAR_BG_COLOR_HOVER, _theme.actionBackgroundColor[appearance].pressed), (0, _defineProperty2.default)(_ref, _constants2.VAR_BG_COLOR_ACTIVE, _theme.actionBackgroundColor[appearance].active), (0, _defineProperty2.default)(_ref, _constants2.VAR_FOCUS_COLOR, _theme.flagFocusRingColor[appearance]), _ref),
83
89
  css: [buttonStyles, appearance === 'normal' && appearanceNormalButtonStyles]
84
90
  }, action.content);
85
91
  }));
package/dist/cjs/flag.js CHANGED
@@ -42,7 +42,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
42
42
  var analyticsAttributes = {
43
43
  componentName: 'flag',
44
44
  packageName: "@atlaskit/flag",
45
- packageVersion: "15.0.2"
45
+ packageVersion: "15.0.3"
46
46
  };
47
47
  /**
48
48
  * __Flag__
package/dist/cjs/theme.js CHANGED
@@ -48,16 +48,36 @@ var flagFocusRingColor = {
48
48
  normal: "var(--ds-border-focused, ".concat(_colors.B100, ")"),
49
49
  success: "var(--ds-border-focused, ".concat(_colors.N40, ")"),
50
50
  warning: "var(--ds-border-focused, ".concat(_colors.N200, ")")
51
- }; // TODO: DSP-2519 Interaction tokens should be used for hovered and pressed states
52
- // https://product-fabric.atlassian.net/browse/DSP-2519
53
-
51
+ };
54
52
  exports.flagFocusRingColor = flagFocusRingColor;
53
+ // TODO: DSP-2519 Interaction tokens should be used for hovered and pressed states
54
+ // https://product-fabric.atlassian.net/browse/DSP-2519
55
55
  var actionBackgroundColor = {
56
- success: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
57
- info: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
58
- error: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
59
- warning: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
60
- normal: 'none'
56
+ success: {
57
+ default: "var(--ds-background-inverse-subtle, ".concat(_colors.N30A, ")"),
58
+ active: "var(--ds-background-inverse-subtle-pressed, ".concat(_colors.N30A, ")"),
59
+ pressed: "var(--ds-background-inverse-subtle-hovered, ".concat(_colors.N30A, ")")
60
+ },
61
+ info: {
62
+ default: "var(--ds-background-inverse-subtle, ".concat(_colors.N30A, ")"),
63
+ active: "var(--ds-background-inverse-subtle-pressed, ".concat(_colors.N30A, ")"),
64
+ pressed: "var(--ds-background-inverse-subtle-hovered, ".concat(_colors.N30A, ")")
65
+ },
66
+ error: {
67
+ default: "var(--ds-background-inverse-subtle, ".concat(_colors.N30A, ")"),
68
+ active: "var(--ds-background-inverse-subtle-pressed, ".concat(_colors.N30A, ")"),
69
+ pressed: "var(--ds-background-inverse-subtle-hovered, ".concat(_colors.N30A, ")")
70
+ },
71
+ warning: {
72
+ default: "var(--ds-background-inverse-subtle, ".concat(_colors.N30A, ")"),
73
+ active: "var(--ds-background-inverse-subtle-pressed, ".concat(_colors.N30A, ")"),
74
+ pressed: "var(--ds-background-inverse-subtle-hovered, ".concat(_colors.N30A, ")")
75
+ },
76
+ normal: {
77
+ default: 'none',
78
+ active: 'none',
79
+ pressed: 'none'
80
+ }
61
81
  };
62
82
  exports.actionBackgroundColor = actionBackgroundColor;
63
83
  var actionTextColor = {
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/flag",
3
- "version": "15.0.2",
3
+ "version": "15.0.3",
4
4
  "sideEffects": false
5
5
  }
@@ -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 = "15.0.2";
8
+ const packageVersion = "15.0.3";
9
9
  export const AUTO_DISMISS_SECONDS = 8;
10
10
  /**
11
11
  * __Auto dismiss flag__
@@ -1 +1,6 @@
1
- export const DEFAULT_APPEARANCE = 'normal';
1
+ export const DEFAULT_APPEARANCE = 'normal';
2
+ export const VAR_COLOR = '--color';
3
+ export const VAR_BG_COLOR = '--bg-color';
4
+ export const VAR_BG_COLOR_HOVER = '--bg-color-hover';
5
+ export const VAR_BG_COLOR_ACTIVE = '--bg-color-active';
6
+ export const VAR_FOCUS_COLOR = '--focus-color';
@@ -5,21 +5,27 @@ import { css, jsx } from '@emotion/react';
5
5
  import Button from '@atlaskit/button/custom-theme-button';
6
6
  import { UNSAFE_Inline as Inline } from '@atlaskit/ds-explorations';
7
7
  import { gridSize as getGridSize } from '@atlaskit/theme/constants';
8
- import { DEFAULT_APPEARANCE } from './constants';
8
+ import { DEFAULT_APPEARANCE, VAR_COLOR, VAR_BG_COLOR, VAR_BG_COLOR_HOVER, VAR_BG_COLOR_ACTIVE, VAR_FOCUS_COLOR } from './constants';
9
9
  import { flagFocusRingColor, actionBackgroundColor, actionTextColor } from './theme';
10
10
  const gridSize = getGridSize();
11
11
  const buttonStyles = css({
12
12
  '&&, a&&': {
13
13
  padding: `0 ${gridSize}px !important`,
14
- background: `var(--bg-color)`,
15
- color: `var(--color) !important`,
14
+ background: `var(${VAR_BG_COLOR})`,
15
+ color: `var(${VAR_COLOR}) !important`,
16
16
  fontWeight: 500
17
17
  },
18
18
  '&&:focus, a&&:focus': {
19
- boxShadow: `0 0 0 2px var(--focus-color)`
19
+ boxShadow: `0 0 0 2px var(${VAR_FOCUS_COLOR})`
20
20
  },
21
21
  '&&:hover, &&:active, a&&:hover, a&&:active': {
22
22
  textDecoration: 'underline'
23
+ },
24
+ '&&:hover': {
25
+ backgroundColor: `var(${VAR_BG_COLOR_HOVER})`
26
+ },
27
+ '&&:active': {
28
+ backgroundColor: `var(${VAR_BG_COLOR_ACTIVE})`
23
29
  }
24
30
  });
25
31
  const appearanceNormalButtonStyles = css({
@@ -60,9 +66,11 @@ const FlagActions = props => {
60
66
  testId: action.testId,
61
67
  key: index,
62
68
  style: {
63
- '--color': actionTextColor[appearance],
64
- '--bg-color': actionBackgroundColor[appearance],
65
- '--focus-color': flagFocusRingColor[appearance]
69
+ [VAR_COLOR]: actionTextColor[appearance],
70
+ [VAR_BG_COLOR]: actionBackgroundColor[appearance].default,
71
+ [VAR_BG_COLOR_HOVER]: actionBackgroundColor[appearance].pressed,
72
+ [VAR_BG_COLOR_ACTIVE]: actionBackgroundColor[appearance].active,
73
+ [VAR_FOCUS_COLOR]: flagFocusRingColor[appearance]
66
74
  },
67
75
  css: [buttonStyles, appearance === 'normal' && appearanceNormalButtonStyles]
68
76
  }, action.content)));
@@ -15,7 +15,7 @@ import { Expander, DismissButton } from './internal';
15
15
  const analyticsAttributes = {
16
16
  componentName: 'flag',
17
17
  packageName: "@atlaskit/flag",
18
- packageVersion: "15.0.2"
18
+ packageVersion: "15.0.3"
19
19
  };
20
20
  /**
21
21
  * __Flag__
@@ -36,15 +36,35 @@ export const flagFocusRingColor = {
36
36
  normal: `var(--ds-border-focused, ${B100})`,
37
37
  success: `var(--ds-border-focused, ${N40})`,
38
38
  warning: `var(--ds-border-focused, ${N200})`
39
- }; // TODO: DSP-2519 Interaction tokens should be used for hovered and pressed states
39
+ };
40
+ // TODO: DSP-2519 Interaction tokens should be used for hovered and pressed states
40
41
  // https://product-fabric.atlassian.net/browse/DSP-2519
41
-
42
42
  export const actionBackgroundColor = {
43
- success: `var(--ds-background-neutral, ${N30A})`,
44
- info: `var(--ds-background-neutral, ${N30A})`,
45
- error: `var(--ds-background-neutral, ${N30A})`,
46
- warning: `var(--ds-background-neutral, ${N30A})`,
47
- normal: 'none'
43
+ success: {
44
+ default: `var(--ds-background-inverse-subtle, ${N30A})`,
45
+ active: `var(--ds-background-inverse-subtle-pressed, ${N30A})`,
46
+ pressed: `var(--ds-background-inverse-subtle-hovered, ${N30A})`
47
+ },
48
+ info: {
49
+ default: `var(--ds-background-inverse-subtle, ${N30A})`,
50
+ active: `var(--ds-background-inverse-subtle-pressed, ${N30A})`,
51
+ pressed: `var(--ds-background-inverse-subtle-hovered, ${N30A})`
52
+ },
53
+ error: {
54
+ default: `var(--ds-background-inverse-subtle, ${N30A})`,
55
+ active: `var(--ds-background-inverse-subtle-pressed, ${N30A})`,
56
+ pressed: `var(--ds-background-inverse-subtle-hovered, ${N30A})`
57
+ },
58
+ warning: {
59
+ default: `var(--ds-background-inverse-subtle, ${N30A})`,
60
+ active: `var(--ds-background-inverse-subtle-pressed, ${N30A})`,
61
+ pressed: `var(--ds-background-inverse-subtle-hovered, ${N30A})`
62
+ },
63
+ normal: {
64
+ default: 'none',
65
+ active: 'none',
66
+ pressed: 'none'
67
+ }
48
68
  };
49
69
  export const actionTextColor = {
50
70
  success: `var(--ds-text-inverse, ${N0})`,
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/flag",
3
- "version": "15.0.2",
3
+ "version": "15.0.3",
4
4
  "sideEffects": false
5
5
  }
@@ -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 = "15.0.2";
8
+ var packageVersion = "15.0.3";
9
9
  export var AUTO_DISMISS_SECONDS = 8;
10
10
  /**
11
11
  * __Auto dismiss flag__
@@ -1 +1,6 @@
1
- export var DEFAULT_APPEARANCE = 'normal';
1
+ export var DEFAULT_APPEARANCE = 'normal';
2
+ export var VAR_COLOR = '--color';
3
+ export var VAR_BG_COLOR = '--bg-color';
4
+ export var VAR_BG_COLOR_HOVER = '--bg-color-hover';
5
+ export var VAR_BG_COLOR_ACTIVE = '--bg-color-active';
6
+ export var VAR_FOCUS_COLOR = '--focus-color';
@@ -1,3 +1,5 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+
1
3
  /* eslint-disable @repo/internal/styles/no-nested-styles */
2
4
 
3
5
  /** @jsx jsx */
@@ -5,21 +7,27 @@ import { css, jsx } from '@emotion/react';
5
7
  import Button from '@atlaskit/button/custom-theme-button';
6
8
  import { UNSAFE_Inline as Inline } from '@atlaskit/ds-explorations';
7
9
  import { gridSize as getGridSize } from '@atlaskit/theme/constants';
8
- import { DEFAULT_APPEARANCE } from './constants';
10
+ import { DEFAULT_APPEARANCE, VAR_COLOR, VAR_BG_COLOR, VAR_BG_COLOR_HOVER, VAR_BG_COLOR_ACTIVE, VAR_FOCUS_COLOR } from './constants';
9
11
  import { flagFocusRingColor, actionBackgroundColor, actionTextColor } from './theme';
10
12
  var gridSize = getGridSize();
11
13
  var buttonStyles = css({
12
14
  '&&, a&&': {
13
15
  padding: "0 ".concat(gridSize, "px !important"),
14
- background: "var(--bg-color)",
15
- color: "var(--color) !important",
16
+ background: "var(".concat(VAR_BG_COLOR, ")"),
17
+ color: "var(".concat(VAR_COLOR, ") !important"),
16
18
  fontWeight: 500
17
19
  },
18
20
  '&&:focus, a&&:focus': {
19
- boxShadow: "0 0 0 2px var(--focus-color)"
21
+ boxShadow: "0 0 0 2px var(".concat(VAR_FOCUS_COLOR, ")")
20
22
  },
21
23
  '&&:hover, &&:active, a&&:hover, a&&:active': {
22
24
  textDecoration: 'underline'
25
+ },
26
+ '&&:hover': {
27
+ backgroundColor: "var(".concat(VAR_BG_COLOR_HOVER, ")")
28
+ },
29
+ '&&:active': {
30
+ backgroundColor: "var(".concat(VAR_BG_COLOR_ACTIVE, ")")
23
31
  }
24
32
  });
25
33
  var appearanceNormalButtonStyles = css({
@@ -51,6 +59,8 @@ var FlagActions = function FlagActions(props) {
51
59
  },
52
60
  testId: testId && "".concat(testId, "-actions")
53
61
  }, actions.map(function (action, index) {
62
+ var _ref;
63
+
54
64
  return jsx(Button, {
55
65
  onClick: action.onClick,
56
66
  href: action.href,
@@ -60,11 +70,7 @@ var FlagActions = function FlagActions(props) {
60
70
  spacing: "compact",
61
71
  testId: action.testId,
62
72
  key: index,
63
- style: {
64
- '--color': actionTextColor[appearance],
65
- '--bg-color': actionBackgroundColor[appearance],
66
- '--focus-color': flagFocusRingColor[appearance]
67
- },
73
+ style: (_ref = {}, _defineProperty(_ref, VAR_COLOR, actionTextColor[appearance]), _defineProperty(_ref, VAR_BG_COLOR, actionBackgroundColor[appearance].default), _defineProperty(_ref, VAR_BG_COLOR_HOVER, actionBackgroundColor[appearance].pressed), _defineProperty(_ref, VAR_BG_COLOR_ACTIVE, actionBackgroundColor[appearance].active), _defineProperty(_ref, VAR_FOCUS_COLOR, flagFocusRingColor[appearance]), _ref),
68
74
  css: [buttonStyles, appearance === 'normal' && appearanceNormalButtonStyles]
69
75
  }, action.content);
70
76
  }));
package/dist/esm/flag.js CHANGED
@@ -21,7 +21,7 @@ import { Expander, DismissButton } from './internal';
21
21
  var analyticsAttributes = {
22
22
  componentName: 'flag',
23
23
  packageName: "@atlaskit/flag",
24
- packageVersion: "15.0.2"
24
+ packageVersion: "15.0.3"
25
25
  };
26
26
  /**
27
27
  * __Flag__
package/dist/esm/theme.js CHANGED
@@ -36,15 +36,35 @@ export var flagFocusRingColor = {
36
36
  normal: "var(--ds-border-focused, ".concat(B100, ")"),
37
37
  success: "var(--ds-border-focused, ".concat(N40, ")"),
38
38
  warning: "var(--ds-border-focused, ".concat(N200, ")")
39
- }; // TODO: DSP-2519 Interaction tokens should be used for hovered and pressed states
39
+ };
40
+ // TODO: DSP-2519 Interaction tokens should be used for hovered and pressed states
40
41
  // https://product-fabric.atlassian.net/browse/DSP-2519
41
-
42
42
  export var actionBackgroundColor = {
43
- success: "var(--ds-background-neutral, ".concat(N30A, ")"),
44
- info: "var(--ds-background-neutral, ".concat(N30A, ")"),
45
- error: "var(--ds-background-neutral, ".concat(N30A, ")"),
46
- warning: "var(--ds-background-neutral, ".concat(N30A, ")"),
47
- normal: 'none'
43
+ success: {
44
+ default: "var(--ds-background-inverse-subtle, ".concat(N30A, ")"),
45
+ active: "var(--ds-background-inverse-subtle-pressed, ".concat(N30A, ")"),
46
+ pressed: "var(--ds-background-inverse-subtle-hovered, ".concat(N30A, ")")
47
+ },
48
+ info: {
49
+ default: "var(--ds-background-inverse-subtle, ".concat(N30A, ")"),
50
+ active: "var(--ds-background-inverse-subtle-pressed, ".concat(N30A, ")"),
51
+ pressed: "var(--ds-background-inverse-subtle-hovered, ".concat(N30A, ")")
52
+ },
53
+ error: {
54
+ default: "var(--ds-background-inverse-subtle, ".concat(N30A, ")"),
55
+ active: "var(--ds-background-inverse-subtle-pressed, ".concat(N30A, ")"),
56
+ pressed: "var(--ds-background-inverse-subtle-hovered, ".concat(N30A, ")")
57
+ },
58
+ warning: {
59
+ default: "var(--ds-background-inverse-subtle, ".concat(N30A, ")"),
60
+ active: "var(--ds-background-inverse-subtle-pressed, ".concat(N30A, ")"),
61
+ pressed: "var(--ds-background-inverse-subtle-hovered, ".concat(N30A, ")")
62
+ },
63
+ normal: {
64
+ default: 'none',
65
+ active: 'none',
66
+ pressed: 'none'
67
+ }
48
68
  };
49
69
  export var actionTextColor = {
50
70
  success: "var(--ds-text-inverse, ".concat(N0, ")"),
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/flag",
3
- "version": "15.0.2",
3
+ "version": "15.0.3",
4
4
  "sideEffects": false
5
5
  }
@@ -1,2 +1,7 @@
1
1
  import { AppearanceTypes } from './types';
2
2
  export declare const DEFAULT_APPEARANCE: AppearanceTypes;
3
+ export declare const VAR_COLOR = "--color";
4
+ export declare const VAR_BG_COLOR = "--bg-color";
5
+ export declare const VAR_BG_COLOR_HOVER = "--bg-color-hover";
6
+ export declare const VAR_BG_COLOR_ACTIVE = "--bg-color-active";
7
+ export declare const VAR_FOCUS_COLOR = "--focus-color";
@@ -11,5 +11,15 @@ export declare const flagTextColorToken: {
11
11
  warning: "var(--ds-text-warning-inverse)";
12
12
  };
13
13
  export declare const flagFocusRingColor: Record<AppearanceTypes, string>;
14
- export declare const actionBackgroundColor: Record<AppearanceTypes, string>;
14
+ declare type ActionBackgroundColor = Record<Exclude<AppearanceTypes, 'normal'>, {
15
+ default: 'var(--ds-background-inverse-subtle)';
16
+ active: 'var(--ds-background-inverse-subtle-pressed)';
17
+ pressed: 'var(--ds-background-inverse-subtle-hovered)';
18
+ }> & Record<Extract<AppearanceTypes, 'normal'>, {
19
+ default: 'none';
20
+ active: 'none';
21
+ pressed: 'none';
22
+ }>;
23
+ export declare const actionBackgroundColor: ActionBackgroundColor;
15
24
  export declare const actionTextColor: Record<AppearanceTypes, string>;
25
+ export {};
@@ -9,7 +9,7 @@ export declare type ActionType = {
9
9
  testId?: string;
10
10
  };
11
11
  export declare type ActionsType = Array<ActionType>;
12
- export declare type AppearanceTypes = 'error' | 'info' | 'normal' | 'success' | 'warning';
12
+ export declare type AppearanceTypes = 'error' | 'info' | 'success' | 'warning' | 'normal';
13
13
  export declare const AppearanceArray: AppearanceTypes[];
14
14
  declare type FlagPropsId = {
15
15
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/flag",
3
- "version": "15.0.2",
3
+ "version": "15.0.3",
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/"
package/report.api.md CHANGED
@@ -1,4 +1,4 @@
1
- <!-- API Report Version: 2.2 -->
1
+ <!-- API Report Version: 2.3 -->
2
2
 
3
3
  ## API Report File for "@atlaskit/flag"
4
4