@atlaskit/flag 14.3.4 → 14.5.0

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # @atlaskit/flag
 
+## 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
+
+- [`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

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.4";
+var packageVersion = "14.5.0";
 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"));

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.4"
+  packageVersion: "14.5.0"
 };
 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/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.3.4",
+	"version": "14.5.0",
 	"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.4";
+const packageVersion = "14.5.0";
 export const AUTO_DISMISS_SECONDS = 8;
 
 function noop() {}