@atlaskit/flag 14.4.0 → 14.5.1

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @atlaskit/flag
 
+## 14.5.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 14.5.0
+
+### Minor Changes
+
+- [`c04528ade6a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c04528ade6a) - **Note**: It is a re-release of the wrongly `patched` version `14.4.2` that should have been a `minor` release.
+
+  [ux] Instrumented flag with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 14.4.2
+
+### Minor Changes
+
+_WRONG RELEASE TYPE - DON'T USE_
+
+- [`4567d73813c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4567d73813c) - Instrumented flag with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### Patch Changes
+
+- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
+- Updated dependencies
+
+## 14.4.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 14.4.0
 
 ### Minor Changes

package/__perf__/withFlagGroup.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import SuccessIcon from '@atlaskit/icon/glyph/check-circle';
 import { G400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 
 import Flag, { FlagGroup } from '../src';
 
@@ -9,7 +10,12 @@ export default () => (
   <FlagGroup>
     <Flag
       appearance="success"
-      icon={<SuccessIcon label="Success" secondaryColor={G400} />}
+      icon={
+        <SuccessIcon
+          label="Success"
+          secondaryColor={token('color.iconBorder.success', G400)}
+        />
+      }
       id="success"
       key="success"
       title="Connected"

package/dist/cjs/auto-dismiss-flag.js

@@ -24,7 +24,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 
 var packageName = "@atlaskit/flag";
-var packageVersion = "14.4.0";
+var packageVersion = "14.5.1";
 var AUTO_DISMISS_SECONDS = 8;
 exports.AUTO_DISMISS_SECONDS = AUTO_DISMISS_SECONDS;
 

package/dist/cjs/flag-group.js

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.flagWidth = exports.flagAnimationTime = exports.default = exports.FlagGroupContext = void 0;
 exports.useFlagGroup = useFlagGroup;
-exports.default = exports.FlagGroupContext = exports.flagAnimationTime = exports.flagWidth = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 

package/dist/cjs/flag-provider.js

@@ -7,8 +7,8 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useFlags = useFlags;
 exports.FlagsProvider = FlagsProvider;
+exports.useFlags = useFlags;
 exports.withFlagsProvider = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -29,13 +29,15 @@ var _flag = _interopRequireDefault(require("./flag"));
 
 var _flagGroup = _interopRequireDefault(require("./flag-group"));
 
+var _excluded = ["isAutoDismiss"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 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; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var FlagContext = /*#__PURE__*/_react.default.createContext(null);
 
@@ -104,7 +106,7 @@ function FlagsProvider(_ref) {
     onDismissed: removeFlag
   }, flags.map(function (flag) {
     var isAutoDismiss = flag.isAutoDismiss,
-        restProps = (0, _objectWithoutProperties2.default)(flag, ["isAutoDismiss"]);
+        restProps = (0, _objectWithoutProperties2.default)(flag, _excluded);
     var FlagType = isAutoDismiss ? _autoDismissFlag.default : _flag.default;
     return /*#__PURE__*/_react.default.createElement(FlagType, (0, _extends2.default)({}, restProps, {
       key: flag.id

package/dist/cjs/flag.js

@@ -43,16 +43,16 @@ var _flagGroup = require("./flag-group");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function noop() {}
 
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "14.4.0"
+  packageVersion: "14.5.1"
 };
 var gridSize = (0, _constants.gridSize)();
 var doubleGridSize = gridSize * 2;
@@ -176,15 +176,16 @@ var Flag = function Flag(props) {
     onBlur: onBlurAnalytics
   };
   var OptionalDismissButton = renderToggleOrDismissButton;
-  var boxShadow = "0 20px 32px -8px ".concat(_theme.flagShadowColor);
+  var boxShadow = "var(--ds-overlay, ".concat("0 20px 32px -8px ".concat(_theme.flagShadowColor), ")");
 
   if (!isBold) {
-    boxShadow = "0 0 1px ".concat(_theme.flagBorderColor, ", ").concat(boxShadow);
+    boxShadow = "var(--ds-overlay, ".concat("0 0 1px ".concat(_theme.flagBorderColor, ", ").concat(boxShadow), ")");
   }
 
   return (0, _core.jsx)(_components.default.Consumer, null, function (tokens) {
     var mode = tokens.mode;
     var textColour = (0, _theme.getFlagTextColor)(appearance, mode);
+    var iconColour = (0, _theme.getFlagIconColor)(appearance, mode);
     return (0, _core.jsx)("div", (0, _extends2.default)({
       css: (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n              background-color: ", ";\n              border-radius: ", "px;\n              box-shadow: ", ";\n              color: ", ";\n              transition: background-color 200ms;\n              width: 100%;\n              z-index: ", ";\n            "])), (0, _theme.getFlagBackgroundColor)(appearance, mode), (0, _constants.borderRadius)(), boxShadow, textColour, _constants.layers.flag()),
       role: "alert",
@@ -194,7 +195,7 @@ var Flag = function Flag(props) {
       ,
       tabIndex: 0
     }, (0, _core.jsx)("div", {
-      css: (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n                  display: flex;\n                  align-items: center;\n                  height: ", "px;\n                "])), headerHeight)
+      css: (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n                  color: ", ";\n                  display: flex;\n                  align-items: center;\n                  height: ", "px;\n                "])), iconColour, headerHeight)
     }, icon, (0, _core.jsx)("span", {
       css: (0, _core.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n                    color: ", ";\n                    font-weight: 600;\n                    flex: 1;\n                    overflow: hidden;\n                    text-overflow: ellipsis;\n                    white-space: nowrap;\n                    padding: 0 0 0 ", "px;\n                  "])), textColour, doubleGridSize)
     }, title), (0, _core.jsx)(OptionalDismissButton, {

package/dist/cjs/index.js

@@ -5,12 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _flag.default;
-  }
-});
 Object.defineProperty(exports, "AutoDismissFlag", {
   enumerable: true,
   get: function get() {
@@ -23,22 +17,28 @@ Object.defineProperty(exports, "FlagGroup", {
     return _flagGroup.default;
   }
 });
-Object.defineProperty(exports, "useFlags", {
+Object.defineProperty(exports, "FlagsProvider", {
   enumerable: true,
   get: function get() {
-    return _flagProvider.useFlags;
+    return _flagProvider.FlagsProvider;
   }
 });
-Object.defineProperty(exports, "withFlagsProvider", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _flagProvider.withFlagsProvider;
+    return _flag.default;
   }
 });
-Object.defineProperty(exports, "FlagsProvider", {
+Object.defineProperty(exports, "useFlags", {
   enumerable: true,
   get: function get() {
-    return _flagProvider.FlagsProvider;
+    return _flagProvider.useFlags;
+  }
+});
+Object.defineProperty(exports, "withFlagsProvider", {
+  enumerable: true,
+  get: function get() {
+    return _flagProvider.withFlagsProvider;
   }
 });
 

package/dist/cjs/theme.js

@@ -1,38 +1,32 @@
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getActionColor = exports.getActionBackground = exports.getFlagFocusRingColor = exports.flagShadowColor = exports.getFlagTextColor = exports.flagBorderColor = exports.getFlagBackgroundColor = void 0;
-
-var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+exports.getFlagTextColor = exports.getFlagIconColor = exports.getFlagFocusRingColor = exports.getFlagBackgroundColor = exports.getActionColor = exports.getActionBackground = exports.flagShadowColor = exports.flagBorderColor = void 0;
 
-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; }
+var _colors = require("@atlaskit/theme/colors");
 
 var flagBackgroundColor = {
   error: {
-    light: colors.R400,
-    dark: colors.R300
+    light: "var(--ds-background-overlay, ".concat(_colors.R400, ")"),
+    dark: "var(--ds-background-overlay, ".concat(_colors.R300, ")")
   },
   info: {
-    light: colors.N500,
-    dark: colors.N500
+    light: "var(--ds-background-overlay, ".concat(_colors.N500, ")"),
+    dark: "var(--ds-background-overlay, ".concat(_colors.N500, ")")
   },
   normal: {
-    light: colors.N0,
-    dark: colors.DN50
+    light: "var(--ds-background-overlay, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-background-overlay, ".concat(_colors.DN50, ")")
   },
   success: {
-    light: colors.G400,
-    dark: colors.G300
+    light: "var(--ds-background-overlay, ".concat(_colors.G400, ")"),
+    dark: "var(--ds-background-overlay, ".concat(_colors.G300, ")")
   },
   warning: {
-    light: colors.Y200,
-    dark: colors.Y300
+    light: "var(--ds-background-overlay, ".concat(_colors.Y200, ")"),
+    dark: "var(--ds-background-overlay, ".concat(_colors.Y300, ")")
   }
 };
 
@@ -41,28 +35,50 @@ var getFlagBackgroundColor = function getFlagBackgroundColor(appearance, mode) {
 };
 
 exports.getFlagBackgroundColor = getFlagBackgroundColor;
-var flagBorderColor = colors.N60A;
+var flagBorderColor = "var(--ds-background-overlay, ".concat(_colors.N60A, ")");
 exports.flagBorderColor = flagBorderColor;
+var flagIconColor = {
+  error: {
+    light: "var(--ds-iconBorder-danger, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-iconBorder-danger, ".concat(_colors.DN40, ")")
+  },
+  info: {
+    light: "var(--ds-iconBorder-discovery, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-iconBorder-discovery, ".concat(_colors.DN600, ")")
+  },
+  normal: {
+    light: "var(--ds-iconBorder-brand, ".concat(_colors.N500, ")"),
+    dark: "var(--ds-iconBorder-brand, ".concat(_colors.DN600, ")")
+  },
+  success: {
+    light: "var(--ds-iconBorder-success, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-iconBorder-success, ".concat(_colors.DN40, ")")
+  },
+  warning: {
+    light: "var(--ds-iconBorder-warning, ".concat(_colors.N700, ")"),
+    dark: "var(--ds-iconBorder-warning, ".concat(_colors.DN40, ")")
+  }
+};
 var flagTextColor = {
   error: {
-    light: colors.N0,
-    dark: colors.DN40
+    light: "var(--ds-text-highEmphasis, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-text-highEmphasis, ".concat(_colors.DN40, ")")
   },
   info: {
-    light: colors.N0,
-    dark: colors.DN600
+    light: "var(--ds-text-highEmphasis, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-text-highEmphasis, ".concat(_colors.DN600, ")")
   },
   normal: {
-    light: colors.N500,
-    dark: colors.DN600
+    light: "var(--ds-text-highEmphasis, ".concat(_colors.N500, ")"),
+    dark: "var(--ds-text-highEmphasis, ".concat(_colors.DN600, ")")
   },
   success: {
-    light: colors.N0,
-    dark: colors.DN40
+    light: "var(--ds-text-highEmphasis, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-text-highEmphasis, ".concat(_colors.DN40, ")")
   },
   warning: {
-    light: colors.N700,
-    dark: colors.DN40
+    light: "var(--ds-text-highEmphasis, ".concat(_colors.N700, ")"),
+    dark: "var(--ds-text-highEmphasis, ".concat(_colors.DN40, ")")
   }
 };
 
@@ -71,28 +87,36 @@ var getFlagTextColor = function getFlagTextColor(appearance, mode) {
 };
 
 exports.getFlagTextColor = getFlagTextColor;
-var flagShadowColor = colors.N50A;
+
+var getFlagIconColor = function getFlagIconColor(appearance, mode) {
+  return flagIconColor[appearance][mode];
+}; // token set in flag.tsx instead
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+
+
+exports.getFlagIconColor = getFlagIconColor;
+var flagShadowColor = _colors.N50A;
 exports.flagShadowColor = flagShadowColor;
 var flagFocusRingColor = {
   error: {
-    light: colors.N40,
-    dark: colors.N40
+    light: "var(--ds-border-focus, ".concat(_colors.N40, ")"),
+    dark: "var(--ds-border-focus, ".concat(_colors.N40, ")")
   },
   info: {
-    light: colors.N40,
-    dark: colors.N40
+    light: "var(--ds-border-focus, ".concat(_colors.N40, ")"),
+    dark: "var(--ds-border-focus, ".concat(_colors.N40, ")")
   },
   normal: {
-    light: colors.B100,
-    dark: colors.B100
+    light: "var(--ds-border-focus, ".concat(_colors.B100, ")"),
+    dark: "var(--ds-border-focus, ".concat(_colors.B100, ")")
   },
   success: {
-    light: colors.N40,
-    dark: colors.N40
+    light: "var(--ds-border-focus, ".concat(_colors.N40, ")"),
+    dark: "var(--ds-border-focus, ".concat(_colors.N40, ")")
   },
   warning: {
-    light: colors.N200,
-    dark: colors.N200
+    light: "var(--ds-border-focus, ".concat(_colors.N200, ")"),
+    dark: "var(--ds-border-focus, ".concat(_colors.N200, ")")
   }
 };
 
@@ -104,46 +128,46 @@ exports.getFlagFocusRingColor = getFlagFocusRingColor;
 var lightButtonBackground = 'rgba(255, 255, 255, 0.08)';
 var actionBackground = {
   success: {
-    light: lightButtonBackground,
-    dark: colors.N30A
+    light: "var(--ds-background-subtleNeutral-resting, ".concat(lightButtonBackground, ")"),
+    dark: "var(--ds-background-subtleNeutral-resting, ".concat(_colors.N30A, ")")
   },
   info: {
-    light: lightButtonBackground,
-    dark: lightButtonBackground
+    light: "var(--ds-background-subtleNeutral-resting, ".concat(lightButtonBackground, ")"),
+    dark: "var(--ds-background-subtleNeutral-resting, ".concat(lightButtonBackground, ")")
   },
   error: {
-    light: lightButtonBackground,
-    dark: colors.N30A
+    light: "var(--ds-background-subtleNeutral-resting, ".concat(lightButtonBackground, ")"),
+    dark: "var(--ds-background-subtleNeutral-resting, ".concat(_colors.N30A, ")")
   },
   warning: {
-    light: colors.N30A,
-    dark: colors.N30A
+    light: "var(--ds-background-subtleNeutral-resting, ".concat(_colors.N30A, ")"),
+    dark: "var(--ds-background-subtleNeutral-resting, ".concat(_colors.N30A, ")")
   },
   normal: {
-    light: 'none',
-    dark: 'none'
+    light: "var(--ds-background-subtleNeutral-resting, none)",
+    dark: "var(--ds-background-subtleNeutral-resting, none)"
   }
 };
 var actionColor = {
   success: {
-    light: colors.N0,
-    dark: colors.DN40
+    light: "var(--ds-text-mediumEmphasis, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-text-mediumEmphasis, ".concat(_colors.DN40, ")")
   },
   info: {
-    light: colors.N0,
-    dark: colors.DN600
+    light: "var(--ds-text-mediumEmphasis, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-text-mediumEmphasis, ".concat(_colors.DN600, ")")
   },
   error: {
-    light: colors.N0,
-    dark: colors.DN600
+    light: "var(--ds-text-mediumEmphasis, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-text-mediumEmphasis, ".concat(_colors.DN600, ")")
   },
   warning: {
-    light: colors.N700,
-    dark: colors.DN40
+    light: "var(--ds-text-mediumEmphasis, ".concat(_colors.N700, ")"),
+    dark: "var(--ds-text-mediumEmphasis, ".concat(_colors.DN40, ")")
   },
   normal: {
-    light: colors.B400,
-    dark: colors.B100
+    light: "var(--ds-text-mediumEmphasis, ".concat(_colors.B400, ")"),
+    dark: "var(--ds-text-mediumEmphasis, ".concat(_colors.B100, ")")
   }
 };
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "14.4.0",
+	"version": "14.5.1",
 	"sideEffects": false
 }

package/dist/es2019/auto-dismiss-flag.js

@@ -4,7 +4,7 @@ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatfor
 import Flag from './flag';
 import { useFlagGroup } from './flag-group';
 const packageName = "@atlaskit/flag";
-const packageVersion = "14.4.0";
+const packageVersion = "14.5.1";
 export const AUTO_DISMISS_SECONDS = 8;
 
 function noop() {}

package/dist/es2019/flag.js

@@ -10,7 +10,7 @@ import GlobalTheme from '@atlaskit/theme/components';
 import { borderRadius, gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import { DEFAULT_APPEARANCE } from './constants';
-import { flagBorderColor, flagShadowColor, getFlagBackgroundColor, getFlagFocusRingColor, getFlagTextColor } from './theme';
+import { flagBorderColor, flagShadowColor, getFlagBackgroundColor, getFlagFocusRingColor, getFlagTextColor, getFlagIconColor } from './theme';
 import Expander from './expander';
 import Actions from './flag-actions';
 import { useFlagGroup } from './flag-group';
@@ -20,7 +20,7 @@ function noop() {}
 const analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "14.4.0"
+  packageVersion: "14.5.1"
 };
 const gridSize = getGridSize();
 const doubleGridSize = gridSize * 2;
@@ -152,15 +152,16 @@ const Flag = props => {
     onBlur: onBlurAnalytics
   };
   const OptionalDismissButton = renderToggleOrDismissButton;
-  let boxShadow = `0 20px 32px -8px ${flagShadowColor}`;
+  let boxShadow = `var(--ds-overlay, ${`0 20px 32px -8px ${flagShadowColor}`})`;
 
   if (!isBold) {
-    boxShadow = `0 0 1px ${flagBorderColor}, ${boxShadow}`;
+    boxShadow = `var(--ds-overlay, ${`0 0 1px ${flagBorderColor}, ${boxShadow}`})`;
   }
 
   return jsx(GlobalTheme.Consumer, null, tokens => {
     const mode = tokens.mode;
     const textColour = getFlagTextColor(appearance, mode);
+    const iconColour = getFlagIconColor(appearance, mode);
     return jsx("div", _extends({
       css: css`
               background-color: ${getFlagBackgroundColor(appearance, mode)};
@@ -205,6 +206,7 @@ const Flag = props => {
       tabIndex: 0
     }, jsx("div", {
       css: css`
+                  color: ${iconColour};
                   display: flex;
                   align-items: center;
                   height: ${headerHeight}px;

package/dist/es2019/theme.js

@@ -1,118 +1,143 @@
-import * as colors from '@atlaskit/theme/colors';
+import { B100, B400, DN40, DN50, DN600, G300, G400, N0, N200, N30A, N40, N500, N50A, N60A, N700, R300, R400, Y200, Y300 } from '@atlaskit/theme/colors';
 const flagBackgroundColor = {
   error: {
-    light: colors.R400,
-    dark: colors.R300
+    light: `var(--ds-background-overlay, ${R400})`,
+    dark: `var(--ds-background-overlay, ${R300})`
   },
   info: {
-    light: colors.N500,
-    dark: colors.N500
+    light: `var(--ds-background-overlay, ${N500})`,
+    dark: `var(--ds-background-overlay, ${N500})`
   },
   normal: {
-    light: colors.N0,
-    dark: colors.DN50
+    light: `var(--ds-background-overlay, ${N0})`,
+    dark: `var(--ds-background-overlay, ${DN50})`
   },
   success: {
-    light: colors.G400,
-    dark: colors.G300
+    light: `var(--ds-background-overlay, ${G400})`,
+    dark: `var(--ds-background-overlay, ${G300})`
   },
   warning: {
-    light: colors.Y200,
-    dark: colors.Y300
+    light: `var(--ds-background-overlay, ${Y200})`,
+    dark: `var(--ds-background-overlay, ${Y300})`
   }
 };
 export const getFlagBackgroundColor = (appearance, mode) => flagBackgroundColor[appearance][mode];
-export const flagBorderColor = colors.N60A;
+export const flagBorderColor = `var(--ds-background-overlay, ${N60A})`;
+const flagIconColor = {
+  error: {
+    light: `var(--ds-iconBorder-danger, ${N0})`,
+    dark: `var(--ds-iconBorder-danger, ${DN40})`
+  },
+  info: {
+    light: `var(--ds-iconBorder-discovery, ${N0})`,
+    dark: `var(--ds-iconBorder-discovery, ${DN600})`
+  },
+  normal: {
+    light: `var(--ds-iconBorder-brand, ${N500})`,
+    dark: `var(--ds-iconBorder-brand, ${DN600})`
+  },
+  success: {
+    light: `var(--ds-iconBorder-success, ${N0})`,
+    dark: `var(--ds-iconBorder-success, ${DN40})`
+  },
+  warning: {
+    light: `var(--ds-iconBorder-warning, ${N700})`,
+    dark: `var(--ds-iconBorder-warning, ${DN40})`
+  }
+};
 const flagTextColor = {
   error: {
-    light: colors.N0,
-    dark: colors.DN40
+    light: `var(--ds-text-highEmphasis, ${N0})`,
+    dark: `var(--ds-text-highEmphasis, ${DN40})`
   },
   info: {
-    light: colors.N0,
-    dark: colors.DN600
+    light: `var(--ds-text-highEmphasis, ${N0})`,
+    dark: `var(--ds-text-highEmphasis, ${DN600})`
   },
   normal: {
-    light: colors.N500,
-    dark: colors.DN600
+    light: `var(--ds-text-highEmphasis, ${N500})`,
+    dark: `var(--ds-text-highEmphasis, ${DN600})`
   },
   success: {
-    light: colors.N0,
-    dark: colors.DN40
+    light: `var(--ds-text-highEmphasis, ${N0})`,
+    dark: `var(--ds-text-highEmphasis, ${DN40})`
   },
   warning: {
-    light: colors.N700,
-    dark: colors.DN40
+    light: `var(--ds-text-highEmphasis, ${N700})`,
+    dark: `var(--ds-text-highEmphasis, ${DN40})`
   }
 };
 export const getFlagTextColor = (appearance, mode) => flagTextColor[appearance][mode];
-export const flagShadowColor = colors.N50A;
+export const getFlagIconColor = (appearance, mode) => flagIconColor[appearance][mode]; // token set in flag.tsx instead
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+
+export const flagShadowColor = N50A;
 const flagFocusRingColor = {
   error: {
-    light: colors.N40,
-    dark: colors.N40
+    light: `var(--ds-border-focus, ${N40})`,
+    dark: `var(--ds-border-focus, ${N40})`
   },
   info: {
-    light: colors.N40,
-    dark: colors.N40
+    light: `var(--ds-border-focus, ${N40})`,
+    dark: `var(--ds-border-focus, ${N40})`
   },
   normal: {
-    light: colors.B100,
-    dark: colors.B100
+    light: `var(--ds-border-focus, ${B100})`,
+    dark: `var(--ds-border-focus, ${B100})`
   },
   success: {
-    light: colors.N40,
-    dark: colors.N40
+    light: `var(--ds-border-focus, ${N40})`,
+    dark: `var(--ds-border-focus, ${N40})`
   },
   warning: {
-    light: colors.N200,
-    dark: colors.N200
+    light: `var(--ds-border-focus, ${N200})`,
+    dark: `var(--ds-border-focus, ${N200})`
   }
 };
 export const getFlagFocusRingColor = (appearance, mode) => flagFocusRingColor[appearance][mode];
 const lightButtonBackground = 'rgba(255, 255, 255, 0.08)';
 const actionBackground = {
   success: {
-    light: lightButtonBackground,
-    dark: colors.N30A
+    light: `var(--ds-background-subtleNeutral-resting, ${lightButtonBackground})`,
+    dark: `var(--ds-background-subtleNeutral-resting, ${N30A})`
   },
   info: {
-    light: lightButtonBackground,
-    dark: lightButtonBackground
+    light: `var(--ds-background-subtleNeutral-resting, ${lightButtonBackground})`,
+    dark: `var(--ds-background-subtleNeutral-resting, ${lightButtonBackground})`
   },
   error: {
-    light: lightButtonBackground,
-    dark: colors.N30A
+    light: `var(--ds-background-subtleNeutral-resting, ${lightButtonBackground})`,
+    dark: `var(--ds-background-subtleNeutral-resting, ${N30A})`
   },
   warning: {
-    light: colors.N30A,
-    dark: colors.N30A
+    light: `var(--ds-background-subtleNeutral-resting, ${N30A})`,
+    dark: `var(--ds-background-subtleNeutral-resting, ${N30A})`
   },
   normal: {
-    light: 'none',
-    dark: 'none'
+    light: "var(--ds-background-subtleNeutral-resting, none)",
+    dark: "var(--ds-background-subtleNeutral-resting, none)"
   }
 };
 const actionColor = {
   success: {
-    light: colors.N0,
-    dark: colors.DN40
+    light: `var(--ds-text-mediumEmphasis, ${N0})`,
+    dark: `var(--ds-text-mediumEmphasis, ${DN40})`
   },
   info: {
-    light: colors.N0,
-    dark: colors.DN600
+    light: `var(--ds-text-mediumEmphasis, ${N0})`,
+    dark: `var(--ds-text-mediumEmphasis, ${DN600})`
   },
   error: {
-    light: colors.N0,
-    dark: colors.DN600
+    light: `var(--ds-text-mediumEmphasis, ${N0})`,
+    dark: `var(--ds-text-mediumEmphasis, ${DN600})`
   },
   warning: {
-    light: colors.N700,
-    dark: colors.DN40
+    light: `var(--ds-text-mediumEmphasis, ${N700})`,
+    dark: `var(--ds-text-mediumEmphasis, ${DN40})`
   },
   normal: {
-    light: colors.B400,
-    dark: colors.B100
+    light: `var(--ds-text-mediumEmphasis, ${B400})`,
+    dark: `var(--ds-text-mediumEmphasis, ${B100})`
   }
 };
 export const getActionBackground = (appearance, mode) => actionBackground[appearance][mode];

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "14.4.0",
+	"version": "14.5.1",
 	"sideEffects": false
 }

package/dist/esm/auto-dismiss-flag.js

@@ -4,7 +4,7 @@ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatfor
 import Flag from './flag';
 import { useFlagGroup } from './flag-group';
 var packageName = "@atlaskit/flag";
-var packageVersion = "14.4.0";
+var packageVersion = "14.5.1";
 export var AUTO_DISMISS_SECONDS = 8;
 
 function noop() {}

package/dist/esm/flag-provider.js

@@ -3,10 +3,11 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["isAutoDismiss"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { useCallback, useContext, useMemo, useState } from 'react';
 import AutoDismissFlag from './auto-dismiss-flag';
@@ -79,7 +80,7 @@ export function FlagsProvider(_ref) {
     onDismissed: removeFlag
   }, flags.map(function (flag) {
     var isAutoDismiss = flag.isAutoDismiss,
-        restProps = _objectWithoutProperties(flag, ["isAutoDismiss"]);
+        restProps = _objectWithoutProperties(flag, _excluded);
 
     var FlagType = isAutoDismiss ? AutoDismissFlag : Flag;
     return /*#__PURE__*/React.createElement(FlagType, _extends({}, restProps, {

package/dist/esm/flag.js

@@ -5,9 +5,9 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @jsx jsx */
 import { useCallback, useEffect, useState } from 'react';
@@ -19,7 +19,7 @@ import GlobalTheme from '@atlaskit/theme/components';
 import { borderRadius, gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import { DEFAULT_APPEARANCE } from './constants';
-import { flagBorderColor, flagShadowColor, getFlagBackgroundColor, getFlagFocusRingColor, getFlagTextColor } from './theme';
+import { flagBorderColor, flagShadowColor, getFlagBackgroundColor, getFlagFocusRingColor, getFlagTextColor, getFlagIconColor } from './theme';
 import Expander from './expander';
 import Actions from './flag-actions';
 import { useFlagGroup } from './flag-group';
@@ -29,7 +29,7 @@ function noop() {}
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "14.4.0"
+  packageVersion: "14.5.1"
 };
 var gridSize = getGridSize();
 var doubleGridSize = gridSize * 2;
@@ -153,15 +153,16 @@ var Flag = function Flag(props) {
     onBlur: onBlurAnalytics
   };
   var OptionalDismissButton = renderToggleOrDismissButton;
-  var boxShadow = "0 20px 32px -8px ".concat(flagShadowColor);
+  var boxShadow = "var(--ds-overlay, ".concat("0 20px 32px -8px ".concat(flagShadowColor), ")");
 
   if (!isBold) {
-    boxShadow = "0 0 1px ".concat(flagBorderColor, ", ").concat(boxShadow);
+    boxShadow = "var(--ds-overlay, ".concat("0 0 1px ".concat(flagBorderColor, ", ").concat(boxShadow), ")");
   }
 
   return jsx(GlobalTheme.Consumer, null, function (tokens) {
     var mode = tokens.mode;
     var textColour = getFlagTextColor(appearance, mode);
+    var iconColour = getFlagIconColor(appearance, mode);
     return jsx("div", _extends({
       css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n              background-color: ", ";\n              border-radius: ", "px;\n              box-shadow: ", ";\n              color: ", ";\n              transition: background-color 200ms;\n              width: 100%;\n              z-index: ", ";\n            "])), getFlagBackgroundColor(appearance, mode), borderRadius(), boxShadow, textColour, layers.flag()),
       role: "alert",
@@ -171,7 +172,7 @@ var Flag = function Flag(props) {
       ,
       tabIndex: 0
     }, jsx("div", {
-      css: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                  display: flex;\n                  align-items: center;\n                  height: ", "px;\n                "])), headerHeight)
+      css: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                  color: ", ";\n                  display: flex;\n                  align-items: center;\n                  height: ", "px;\n                "])), iconColour, headerHeight)
     }, icon, jsx("span", {
       css: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                    color: ", ";\n                    font-weight: 600;\n                    flex: 1;\n                    overflow: hidden;\n                    text-overflow: ellipsis;\n                    white-space: nowrap;\n                    padding: 0 0 0 ", "px;\n                  "])), textColour, doubleGridSize)
     }, title), jsx(OptionalDismissButton, {

package/dist/esm/theme.js

@@ -1,76 +1,103 @@
-import * as colors from '@atlaskit/theme/colors';
+import { B100, B400, DN40, DN50, DN600, G300, G400, N0, N200, N30A, N40, N500, N50A, N60A, N700, R300, R400, Y200, Y300 } from '@atlaskit/theme/colors';
 var flagBackgroundColor = {
   error: {
-    light: colors.R400,
-    dark: colors.R300
+    light: "var(--ds-background-overlay, ".concat(R400, ")"),
+    dark: "var(--ds-background-overlay, ".concat(R300, ")")
   },
   info: {
-    light: colors.N500,
-    dark: colors.N500
+    light: "var(--ds-background-overlay, ".concat(N500, ")"),
+    dark: "var(--ds-background-overlay, ".concat(N500, ")")
   },
   normal: {
-    light: colors.N0,
-    dark: colors.DN50
+    light: "var(--ds-background-overlay, ".concat(N0, ")"),
+    dark: "var(--ds-background-overlay, ".concat(DN50, ")")
   },
   success: {
-    light: colors.G400,
-    dark: colors.G300
+    light: "var(--ds-background-overlay, ".concat(G400, ")"),
+    dark: "var(--ds-background-overlay, ".concat(G300, ")")
   },
   warning: {
-    light: colors.Y200,
-    dark: colors.Y300
+    light: "var(--ds-background-overlay, ".concat(Y200, ")"),
+    dark: "var(--ds-background-overlay, ".concat(Y300, ")")
   }
 };
 export var getFlagBackgroundColor = function getFlagBackgroundColor(appearance, mode) {
   return flagBackgroundColor[appearance][mode];
 };
-export var flagBorderColor = colors.N60A;
+export var flagBorderColor = "var(--ds-background-overlay, ".concat(N60A, ")");
+var flagIconColor = {
+  error: {
+    light: "var(--ds-iconBorder-danger, ".concat(N0, ")"),
+    dark: "var(--ds-iconBorder-danger, ".concat(DN40, ")")
+  },
+  info: {
+    light: "var(--ds-iconBorder-discovery, ".concat(N0, ")"),
+    dark: "var(--ds-iconBorder-discovery, ".concat(DN600, ")")
+  },
+  normal: {
+    light: "var(--ds-iconBorder-brand, ".concat(N500, ")"),
+    dark: "var(--ds-iconBorder-brand, ".concat(DN600, ")")
+  },
+  success: {
+    light: "var(--ds-iconBorder-success, ".concat(N0, ")"),
+    dark: "var(--ds-iconBorder-success, ".concat(DN40, ")")
+  },
+  warning: {
+    light: "var(--ds-iconBorder-warning, ".concat(N700, ")"),
+    dark: "var(--ds-iconBorder-warning, ".concat(DN40, ")")
+  }
+};
 var flagTextColor = {
   error: {
-    light: colors.N0,
-    dark: colors.DN40
+    light: "var(--ds-text-highEmphasis, ".concat(N0, ")"),
+    dark: "var(--ds-text-highEmphasis, ".concat(DN40, ")")
   },
   info: {
-    light: colors.N0,
-    dark: colors.DN600
+    light: "var(--ds-text-highEmphasis, ".concat(N0, ")"),
+    dark: "var(--ds-text-highEmphasis, ".concat(DN600, ")")
   },
   normal: {
-    light: colors.N500,
-    dark: colors.DN600
+    light: "var(--ds-text-highEmphasis, ".concat(N500, ")"),
+    dark: "var(--ds-text-highEmphasis, ".concat(DN600, ")")
   },
   success: {
-    light: colors.N0,
-    dark: colors.DN40
+    light: "var(--ds-text-highEmphasis, ".concat(N0, ")"),
+    dark: "var(--ds-text-highEmphasis, ".concat(DN40, ")")
   },
   warning: {
-    light: colors.N700,
-    dark: colors.DN40
+    light: "var(--ds-text-highEmphasis, ".concat(N700, ")"),
+    dark: "var(--ds-text-highEmphasis, ".concat(DN40, ")")
   }
 };
 export var getFlagTextColor = function getFlagTextColor(appearance, mode) {
   return flagTextColor[appearance][mode];
 };
-export var flagShadowColor = colors.N50A;
+export var getFlagIconColor = function getFlagIconColor(appearance, mode) {
+  return flagIconColor[appearance][mode];
+}; // token set in flag.tsx instead
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+
+export var flagShadowColor = N50A;
 var flagFocusRingColor = {
   error: {
-    light: colors.N40,
-    dark: colors.N40
+    light: "var(--ds-border-focus, ".concat(N40, ")"),
+    dark: "var(--ds-border-focus, ".concat(N40, ")")
   },
   info: {
-    light: colors.N40,
-    dark: colors.N40
+    light: "var(--ds-border-focus, ".concat(N40, ")"),
+    dark: "var(--ds-border-focus, ".concat(N40, ")")
   },
   normal: {
-    light: colors.B100,
-    dark: colors.B100
+    light: "var(--ds-border-focus, ".concat(B100, ")"),
+    dark: "var(--ds-border-focus, ".concat(B100, ")")
   },
   success: {
-    light: colors.N40,
-    dark: colors.N40
+    light: "var(--ds-border-focus, ".concat(N40, ")"),
+    dark: "var(--ds-border-focus, ".concat(N40, ")")
   },
   warning: {
-    light: colors.N200,
-    dark: colors.N200
+    light: "var(--ds-border-focus, ".concat(N200, ")"),
+    dark: "var(--ds-border-focus, ".concat(N200, ")")
   }
 };
 export var getFlagFocusRingColor = function getFlagFocusRingColor(appearance, mode) {
@@ -79,46 +106,46 @@ export var getFlagFocusRingColor = function getFlagFocusRingColor(appearance, mo
 var lightButtonBackground = 'rgba(255, 255, 255, 0.08)';
 var actionBackground = {
   success: {
-    light: lightButtonBackground,
-    dark: colors.N30A
+    light: "var(--ds-background-subtleNeutral-resting, ".concat(lightButtonBackground, ")"),
+    dark: "var(--ds-background-subtleNeutral-resting, ".concat(N30A, ")")
   },
   info: {
-    light: lightButtonBackground,
-    dark: lightButtonBackground
+    light: "var(--ds-background-subtleNeutral-resting, ".concat(lightButtonBackground, ")"),
+    dark: "var(--ds-background-subtleNeutral-resting, ".concat(lightButtonBackground, ")")
   },
   error: {
-    light: lightButtonBackground,
-    dark: colors.N30A
+    light: "var(--ds-background-subtleNeutral-resting, ".concat(lightButtonBackground, ")"),
+    dark: "var(--ds-background-subtleNeutral-resting, ".concat(N30A, ")")
   },
   warning: {
-    light: colors.N30A,
-    dark: colors.N30A
+    light: "var(--ds-background-subtleNeutral-resting, ".concat(N30A, ")"),
+    dark: "var(--ds-background-subtleNeutral-resting, ".concat(N30A, ")")
   },
   normal: {
-    light: 'none',
-    dark: 'none'
+    light: "var(--ds-background-subtleNeutral-resting, none)",
+    dark: "var(--ds-background-subtleNeutral-resting, none)"
   }
 };
 var actionColor = {
   success: {
-    light: colors.N0,
-    dark: colors.DN40
+    light: "var(--ds-text-mediumEmphasis, ".concat(N0, ")"),
+    dark: "var(--ds-text-mediumEmphasis, ".concat(DN40, ")")
   },
   info: {
-    light: colors.N0,
-    dark: colors.DN600
+    light: "var(--ds-text-mediumEmphasis, ".concat(N0, ")"),
+    dark: "var(--ds-text-mediumEmphasis, ".concat(DN600, ")")
   },
   error: {
-    light: colors.N0,
-    dark: colors.DN600
+    light: "var(--ds-text-mediumEmphasis, ".concat(N0, ")"),
+    dark: "var(--ds-text-mediumEmphasis, ".concat(DN600, ")")
   },
   warning: {
-    light: colors.N700,
-    dark: colors.DN40
+    light: "var(--ds-text-mediumEmphasis, ".concat(N700, ")"),
+    dark: "var(--ds-text-mediumEmphasis, ".concat(DN40, ")")
   },
   normal: {
-    light: colors.B400,
-    dark: colors.B100
+    light: "var(--ds-text-mediumEmphasis, ".concat(B400, ")"),
+    dark: "var(--ds-text-mediumEmphasis, ".concat(B100, ")")
   }
 };
 export var getActionBackground = function getActionBackground(appearance, mode) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "14.4.0",
+	"version": "14.5.1",
 	"sideEffects": false
 }

package/dist/types/auto-dismiss-flag.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AutoDismissFlagProps } from './types';
 export declare const AUTO_DISMISS_SECONDS = 8;
 declare const AutoDismissFlag: (props: AutoDismissFlagProps) => JSX.Element;

package/dist/types/flag.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FlagProps } from './types';
 declare const Flag: (props: FlagProps) => JSX.Element;
 export default Flag;

package/dist/types/theme.d.ts

@@ -1,8 +1,9 @@
 import { ThemeModes } from '@atlaskit/theme/types';
 import { AppearanceTypes } from './types';
 export declare const getFlagBackgroundColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
-export declare const flagBorderColor = "rgba(9, 30, 66, 0.31)";
+export declare const flagBorderColor: "var(--ds-background-overlay)";
 export declare const getFlagTextColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
+export declare const getFlagIconColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
 export declare const flagShadowColor = "rgba(9, 30, 66, 0.25)";
 export declare const getFlagFocusRingColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
 export declare const getActionBackground: (appearance: AppearanceTypes, mode: ThemeModes) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/flag",
-  "version": "14.4.0",
+  "version": "14.5.1",
   "description": "A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -17,7 +17,6 @@
   "atlassian": {
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
-    "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Flag"
@@ -26,10 +25,11 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
     "@atlaskit/button": "^16.0.0",
-    "@atlaskit/icon": "^21.6.0",
+    "@atlaskit/icon": "^21.10.0",
     "@atlaskit/motion": "^1.0.0",
     "@atlaskit/portal": "^4.0.0",
-    "@atlaskit/theme": "^11.4.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.5.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -37,13 +37,12 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/build-utils": "*",
     "@atlaskit/docs": "*",
-    "@atlaskit/field-radio-group": "^8.0.0",
     "@atlaskit/radio": "^5.2.0",
+    "@atlaskit/section-message": "^6.0.0",
     "@atlaskit/spinner": "^15.0.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/theme": "^11.4.0",
+    "@atlaskit/theme": "^12.1.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -67,10 +66,12 @@
         "analytics-next"
       ],
       "theming": [
-        "new-theming-api"
+        "tokens",
+        "react-context"
       ],
-      "deprecation": [
-        "no-deprecated-imports"
+      "deprecation": "no-deprecated-imports",
+      "styling": [
+        "emotion"
       ]
     }
   },