@atlaskit/flag 14.3.3 → 14.4.2

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @atlaskit/flag
 
+## 14.4.2
+
+### Minor Changes
+
+- [`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
+
+- [`230e1862182`](https://bitbucket.org/atlassian/atlassian-frontend/commits/230e1862182) - Fix a11y eslint error in Flag component
+
+### Patch Changes
+
+- Updated dependencies
+
+## 14.3.4
+
+### Patch Changes
+
+- [`378d1cef00f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/378d1cef00f) - Bump `@atlaskit/theme` to version `^11.3.0`.
+
 ## 14.3.3
 
 ### Patch 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.3.3";
+var packageVersion = "14.4.2";
 var AUTO_DISMISS_SECONDS = 8;
 exports.AUTO_DISMISS_SECONDS = AUTO_DISMISS_SECONDS;
 

package/dist/cjs/flag.js

@@ -41,9 +41,7 @@ var _flagActions = _interopRequireDefault(require("./flag-actions"));
 
 var _flagGroup = require("./flag-group");
 
-var _utils = require("./utils");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+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; }
 
@@ -54,7 +52,7 @@ function noop() {}
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "14.3.3"
+  packageVersion: "14.4.2"
 };
 var gridSize = (0, _constants.gridSize)();
 var doubleGridSize = gridSize * 2;
@@ -178,44 +176,43 @@ 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);
-    return (// https://product-fabric.atlassian.net/browse/DST-1972
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-      (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-sizing: border-box;\n              box-shadow: ", ";\n              color: ", ";\n              padding: ", "px;\n              transition: background-color 200ms;\n              width: 100%;\n              z-index: ", ";\n\n              &:focus {\n                outline: none;\n                box-shadow: 0 0 0 2px ", ";\n              }\n            "])), (0, _theme.getFlagBackgroundColor)(appearance, mode), (0, _constants.borderRadius)(), boxShadow, textColour, doubleGridSize, _constants.layers.flag(), (0, _theme.getFlagFocusRingColor)(appearance, mode)),
-        role: "alert" // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        ,
-        tabIndex: 0,
-        onMouseDown: _utils.onMouseDownBlur,
-        "data-testid": testId
-      }, autoDismissProps), (0, _core.jsx)("div", {
-        css: (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n                display: flex;\n                align-items: center;\n                height: ", "px;\n              "])), headerHeight)
-      }, icon, (0, _core.jsx)("span", {
-        css: (0, _core.css)(_templateObject4 || (_templateObject4 = (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, {
-        mode: mode
-      })), (0, _core.jsx)(_expander.default, {
-        isExpanded: !isBold || isExpanded,
-        testId: testId
-      }, description && (0, _core.jsx)("div", {
-        css: (0, _core.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n                    color: ", ";\n                    word-wrap: break-word;\n                    overflow: auto;\n                    max-height: 100px; /* height is defined as 5 lines maximum by design */\n                  "])), textColour),
-        "data-testid": testId && "".concat(testId, "-description")
-      }, description), (0, _core.jsx)(_flagActions.default, {
-        actions: actions,
-        appearance: appearance,
-        linkComponent: linkComponent,
-        testId: testId,
-        mode: 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",
+      "data-testid": testId
+    }, autoDismissProps), (0, _core.jsx)("div", {
+      css: (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n                width: 100%;\n                padding: ", "px;\n                box-sizing: border-box;\n                border-radius: ", "px;\n\n                &:focus-visible {\n                  outline: none;\n                  box-shadow: 0 0 0 2px\n                    ", ";\n                }\n\n                @supports not selector(*:focus-visible) {\n                  &:focus {\n                    outline: none;\n                    box-shadow: 0 0 0 2px\n                      ", ";\n                  }\n                }\n\n                @media screen and (forced-colors: active),\n                  screen and (-ms-high-contrast: active) {\n                  &:focus-visible {\n                    outline: 1px solid;\n                  }\n                }\n              "])), doubleGridSize, (0, _constants.borderRadius)(), (0, _theme.getFlagFocusRingColor)(appearance, mode), (0, _theme.getFlagFocusRingColor)(appearance, mode)) // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      ,
+      tabIndex: 0
+    }, (0, _core.jsx)("div", {
+      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, {
+      mode: mode
+    })), (0, _core.jsx)(_expander.default, {
+      isExpanded: !isBold || isExpanded,
+      testId: testId
+    }, description && (0, _core.jsx)("div", {
+      css: (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n                      color: ", ";\n                      word-wrap: break-word;\n                      overflow: auto;\n                      max-height: 100px; /* height is defined as 5 lines maximum by design */\n                    "])), textColour),
+      "data-testid": testId && "".concat(testId, "-description")
+    }, description), (0, _core.jsx)(_flagActions.default, {
+      actions: actions,
+      appearance: appearance,
+      linkComponent: linkComponent,
+      testId: testId,
+      mode: mode
+    }))));
   });
 };
 

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.getActionColor = exports.getActionBackground = exports.getFlagFocusRingColor = exports.flagShadowColor = exports.getFlagIconColor = exports.getFlagTextColor = exports.flagBorderColor = exports.getFlagBackgroundColor = 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.3.3",
+	"version": "14.4.2",
 	"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.3.3";
+const packageVersion = "14.4.2";
 export const AUTO_DISMISS_SECONDS = 8;
 
 function noop() {}

package/dist/es2019/flag.js

@@ -10,18 +10,17 @@ 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';
-import { onMouseDownBlur } from './utils';
 
 function noop() {}
 
 const analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "14.3.3"
+  packageVersion: "14.4.2"
 };
 const gridSize = getGridSize();
 const doubleGridSize = gridSize * 2;
@@ -153,76 +152,95 @@ 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);
-    return (// https://product-fabric.atlassian.net/browse/DST-1972
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-      jsx("div", _extends({
-        css: css`
+    const iconColour = getFlagIconColor(appearance, mode);
+    return jsx("div", _extends({
+      css: css`
               background-color: ${getFlagBackgroundColor(appearance, mode)};
               border-radius: ${borderRadius()}px;
-              box-sizing: border-box;
               box-shadow: ${boxShadow};
               color: ${textColour};
-              padding: ${doubleGridSize}px;
               transition: background-color 200ms;
               width: 100%;
               z-index: ${layers.flag()};
-
-              &:focus {
-                outline: none;
-                box-shadow: 0 0 0 2px ${getFlagFocusRingColor(appearance, mode)};
-              }
             `,
-        role: "alert" // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        ,
-        tabIndex: 0,
-        onMouseDown: onMouseDownBlur,
-        "data-testid": testId
-      }, autoDismissProps), jsx("div", {
-        css: css`
-                display: flex;
-                align-items: center;
-                height: ${headerHeight}px;
-              `
-      }, icon, jsx("span", {
-        css: css`
-                  color: ${textColour};
-                  font-weight: 600;
-                  flex: 1;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  white-space: nowrap;
-                  padding: 0 0 0 ${doubleGridSize}px;
+      role: "alert",
+      "data-testid": testId
+    }, autoDismissProps), jsx("div", {
+      css: css`
+                width: 100%;
+                padding: ${doubleGridSize}px;
+                box-sizing: border-box;
+                border-radius: ${borderRadius()}px;
+
+                &:focus-visible {
+                  outline: none;
+                  box-shadow: 0 0 0 2px
+                    ${getFlagFocusRingColor(appearance, mode)};
+                }
+
+                @supports not selector(*:focus-visible) {
+                  &:focus {
+                    outline: none;
+                    box-shadow: 0 0 0 2px
+                      ${getFlagFocusRingColor(appearance, mode)};
+                  }
+                }
+
+                @media screen and (forced-colors: active),
+                  screen and (-ms-high-contrast: active) {
+                  &:focus-visible {
+                    outline: 1px solid;
+                  }
+                }
+              ` // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      ,
+      tabIndex: 0
+    }, jsx("div", {
+      css: css`
+                  color: ${iconColour};
+                  display: flex;
+                  align-items: center;
+                  height: ${headerHeight}px;
                 `
-      }, title), jsx(OptionalDismissButton, {
-        mode: mode
-      })), jsx(Expander, {
-        isExpanded: !isBold || isExpanded,
-        testId: testId
-      }, description && jsx("div", {
-        css: css`
+    }, icon, jsx("span", {
+      css: css`
                     color: ${textColour};
-                    word-wrap: break-word;
-                    overflow: auto;
-                    max-height: 100px; /* height is defined as 5 lines maximum by design */
-                  `,
-        "data-testid": testId && `${testId}-description`
-      }, description), jsx(Actions, {
-        actions: actions,
-        appearance: appearance,
-        linkComponent: linkComponent,
-        testId: testId,
-        mode: mode
-      })))
-    );
+                    font-weight: 600;
+                    flex: 1;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    padding: 0 0 0 ${doubleGridSize}px;
+                  `
+    }, title), jsx(OptionalDismissButton, {
+      mode: mode
+    })), jsx(Expander, {
+      isExpanded: !isBold || isExpanded,
+      testId: testId
+    }, description && jsx("div", {
+      css: css`
+                      color: ${textColour};
+                      word-wrap: break-word;
+                      overflow: auto;
+                      max-height: 100px; /* height is defined as 5 lines maximum by design */
+                    `,
+      "data-testid": testId && `${testId}-description`
+    }, description), jsx(Actions, {
+      actions: actions,
+      appearance: appearance,
+      linkComponent: linkComponent,
+      testId: testId,
+      mode: mode
+    }))));
   });
 };
 

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.3.3",
+	"version": "14.4.2",
 	"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.3.3";
+var packageVersion = "14.4.2";
 export var AUTO_DISMISS_SECONDS = 8;
 
 function noop() {}

package/dist/esm/flag.js

@@ -3,7 +3,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+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; }
 
@@ -19,18 +19,17 @@ 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';
-import { onMouseDownBlur } from './utils';
 
 function noop() {}
 
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "14.3.3"
+  packageVersion: "14.4.2"
 };
 var gridSize = getGridSize();
 var doubleGridSize = gridSize * 2;
@@ -154,44 +153,43 @@ 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);
-    return (// https://product-fabric.atlassian.net/browse/DST-1972
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-      jsx("div", _extends({
-        css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n              background-color: ", ";\n              border-radius: ", "px;\n              box-sizing: border-box;\n              box-shadow: ", ";\n              color: ", ";\n              padding: ", "px;\n              transition: background-color 200ms;\n              width: 100%;\n              z-index: ", ";\n\n              &:focus {\n                outline: none;\n                box-shadow: 0 0 0 2px ", ";\n              }\n            "])), getFlagBackgroundColor(appearance, mode), borderRadius(), boxShadow, textColour, doubleGridSize, layers.flag(), getFlagFocusRingColor(appearance, mode)),
-        role: "alert" // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        ,
-        tabIndex: 0,
-        onMouseDown: onMouseDownBlur,
-        "data-testid": testId
-      }, autoDismissProps), jsx("div", {
-        css: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                display: flex;\n                align-items: center;\n                height: ", "px;\n              "])), headerHeight)
-      }, icon, jsx("span", {
-        css: css(_templateObject4 || (_templateObject4 = _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, {
-        mode: mode
-      })), jsx(Expander, {
-        isExpanded: !isBold || isExpanded,
-        testId: testId
-      }, description && jsx("div", {
-        css: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                    color: ", ";\n                    word-wrap: break-word;\n                    overflow: auto;\n                    max-height: 100px; /* height is defined as 5 lines maximum by design */\n                  "])), textColour),
-        "data-testid": testId && "".concat(testId, "-description")
-      }, description), jsx(Actions, {
-        actions: actions,
-        appearance: appearance,
-        linkComponent: linkComponent,
-        testId: testId,
-        mode: 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",
+      "data-testid": testId
+    }, autoDismissProps), jsx("div", {
+      css: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                width: 100%;\n                padding: ", "px;\n                box-sizing: border-box;\n                border-radius: ", "px;\n\n                &:focus-visible {\n                  outline: none;\n                  box-shadow: 0 0 0 2px\n                    ", ";\n                }\n\n                @supports not selector(*:focus-visible) {\n                  &:focus {\n                    outline: none;\n                    box-shadow: 0 0 0 2px\n                      ", ";\n                  }\n                }\n\n                @media screen and (forced-colors: active),\n                  screen and (-ms-high-contrast: active) {\n                  &:focus-visible {\n                    outline: 1px solid;\n                  }\n                }\n              "])), doubleGridSize, borderRadius(), getFlagFocusRingColor(appearance, mode), getFlagFocusRingColor(appearance, mode)) // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      ,
+      tabIndex: 0
+    }, jsx("div", {
+      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, {
+      mode: mode
+    })), jsx(Expander, {
+      isExpanded: !isBold || isExpanded,
+      testId: testId
+    }, description && jsx("div", {
+      css: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n                      color: ", ";\n                      word-wrap: break-word;\n                      overflow: auto;\n                      max-height: 100px; /* height is defined as 5 lines maximum by design */\n                    "])), textColour),
+      "data-testid": testId && "".concat(testId, "-description")
+    }, description), jsx(Actions, {
+      actions: actions,
+      appearance: appearance,
+      linkComponent: linkComponent,
+      testId: testId,
+      mode: mode
+    }))));
   });
 };
 

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.3.3",
+	"version": "14.4.2",
 	"sideEffects": false
 }

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.3.3",
+  "version": "14.4.2",
   "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/"
@@ -25,11 +25,12 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
-    "@atlaskit/button": "^15.1.0",
-    "@atlaskit/icon": "^21.6.0",
+    "@atlaskit/button": "^16.0.0",
+    "@atlaskit/icon": "^21.9.0",
     "@atlaskit/motion": "^1.0.0",
     "@atlaskit/portal": "^4.0.0",
-    "@atlaskit/theme": "^11.0.0",
+    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.4.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -39,11 +40,11 @@
   "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.0.0",
+    "@atlaskit/theme": "^12.0.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 +68,12 @@
         "analytics-next"
       ],
       "theming": [
-        "new-theming-api"
+        "tokens",
+        "react-context"
       ],
-      "deprecation": [
-        "no-deprecated-imports"
+      "deprecation": "no-deprecated-imports",
+      "styling": [
+        "emotion"
       ]
     }
   },

package/dist/cjs/utils.js

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.onMouseDownBlur = void 0;
-
-// Prevent a focus ring if clicked
-var onMouseDownBlur = function onMouseDownBlur(e) {
-  var currentTarget = e.currentTarget;
-  var focusedDuringMouseDown = currentTarget === document.activeElement;
-  requestAnimationFrame(function () {
-    if (focusedDuringMouseDown && currentTarget !== document.activeElement && document.body.contains(currentTarget)) {
-      currentTarget.focus();
-      return;
-    }
-
-    if (!focusedDuringMouseDown && document.activeElement && document.activeElement instanceof HTMLElement) {
-      document.activeElement.blur();
-    }
-  });
-};
-
-exports.onMouseDownBlur = onMouseDownBlur;

package/dist/es2019/utils.js

@@ -1,15 +0,0 @@
-// Prevent a focus ring if clicked
-export const onMouseDownBlur = e => {
-  const currentTarget = e.currentTarget;
-  const focusedDuringMouseDown = currentTarget === document.activeElement;
-  requestAnimationFrame(() => {
-    if (focusedDuringMouseDown && currentTarget !== document.activeElement && document.body.contains(currentTarget)) {
-      currentTarget.focus();
-      return;
-    }
-
-    if (!focusedDuringMouseDown && document.activeElement && document.activeElement instanceof HTMLElement) {
-      document.activeElement.blur();
-    }
-  });
-};

package/dist/esm/utils.js

@@ -1,15 +0,0 @@
-// Prevent a focus ring if clicked
-export var onMouseDownBlur = function onMouseDownBlur(e) {
-  var currentTarget = e.currentTarget;
-  var focusedDuringMouseDown = currentTarget === document.activeElement;
-  requestAnimationFrame(function () {
-    if (focusedDuringMouseDown && currentTarget !== document.activeElement && document.body.contains(currentTarget)) {
-      currentTarget.focus();
-      return;
-    }
-
-    if (!focusedDuringMouseDown && document.activeElement && document.activeElement instanceof HTMLElement) {
-      document.activeElement.blur();
-    }
-  });
-};

package/dist/types/utils.d.ts

@@ -1,2 +0,0 @@
-import { MouseEvent } from 'react';
-export declare const onMouseDownBlur: (e: MouseEvent<HTMLElement>) => void;

package/utils/package.json

@@ -1,7 +0,0 @@
-{
-  "name": "@atlaskit/flag/utils",
-  "main": "../dist/cjs/utils.js",
-  "module": "../dist/esm/utils.js",
-  "module:es2019": "../dist/es2019/utils.js",
-  "types": "../dist/types/utils.d.ts"
-}