@atlaskit/flag 14.4.2 → 14.5.3

package/dist/es2019/theme.js

@@ -1,70 +1,70 @@
 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: `var(--ds-background-overlay, ${R400})`,
-    dark: `var(--ds-background-overlay, ${R300})`
+    light: `var(--ds-surface-overlay, ${R400})`,
+    dark: `var(--ds-surface-overlay, ${R300})`
   },
   info: {
-    light: `var(--ds-background-overlay, ${N500})`,
-    dark: `var(--ds-background-overlay, ${N500})`
+    light: `var(--ds-surface-overlay, ${N500})`,
+    dark: `var(--ds-surface-overlay, ${N500})`
   },
   normal: {
-    light: `var(--ds-background-overlay, ${N0})`,
-    dark: `var(--ds-background-overlay, ${DN50})`
+    light: `var(--ds-surface-overlay, ${N0})`,
+    dark: `var(--ds-surface-overlay, ${DN50})`
   },
   success: {
-    light: `var(--ds-background-overlay, ${G400})`,
-    dark: `var(--ds-background-overlay, ${G300})`
+    light: `var(--ds-surface-overlay, ${G400})`,
+    dark: `var(--ds-surface-overlay, ${G300})`
   },
   warning: {
-    light: `var(--ds-background-overlay, ${Y200})`,
-    dark: `var(--ds-background-overlay, ${Y300})`
+    light: `var(--ds-surface-overlay, ${Y200})`,
+    dark: `var(--ds-surface-overlay, ${Y300})`
   }
 };
 export const getFlagBackgroundColor = (appearance, mode) => flagBackgroundColor[appearance][mode];
-export const flagBorderColor = `var(--ds-background-overlay, ${N60A})`;
+export const flagBorderColor = `var(--ds-surface-overlay, ${N60A})`;
 const flagIconColor = {
   error: {
-    light: `var(--ds-iconBorder-danger, ${N0})`,
-    dark: `var(--ds-iconBorder-danger, ${DN40})`
+    light: `var(--ds-icon-danger, ${N0})`,
+    dark: `var(--ds-icon-danger, ${DN40})`
   },
   info: {
-    light: `var(--ds-iconBorder-discovery, ${N0})`,
-    dark: `var(--ds-iconBorder-discovery, ${DN600})`
+    light: `var(--ds-icon-discovery, ${N0})`,
+    dark: `var(--ds-icon-discovery, ${DN600})`
   },
   normal: {
-    light: `var(--ds-iconBorder-brand, ${N500})`,
-    dark: `var(--ds-iconBorder-brand, ${DN600})`
+    light: `var(--ds-icon-brand, ${N500})`,
+    dark: `var(--ds-icon-brand, ${DN600})`
   },
   success: {
-    light: `var(--ds-iconBorder-success, ${N0})`,
-    dark: `var(--ds-iconBorder-success, ${DN40})`
+    light: `var(--ds-icon-success, ${N0})`,
+    dark: `var(--ds-icon-success, ${DN40})`
   },
   warning: {
-    light: `var(--ds-iconBorder-warning, ${N700})`,
-    dark: `var(--ds-iconBorder-warning, ${DN40})`
+    light: `var(--ds-icon-warning, ${N700})`,
+    dark: `var(--ds-icon-warning, ${DN40})`
   }
 };
 const flagTextColor = {
   error: {
-    light: `var(--ds-text-highEmphasis, ${N0})`,
-    dark: `var(--ds-text-highEmphasis, ${DN40})`
+    light: `var(--ds-text, ${N0})`,
+    dark: `var(--ds-text, ${DN40})`
   },
   info: {
-    light: `var(--ds-text-highEmphasis, ${N0})`,
-    dark: `var(--ds-text-highEmphasis, ${DN600})`
+    light: `var(--ds-text, ${N0})`,
+    dark: `var(--ds-text, ${DN600})`
   },
   normal: {
-    light: `var(--ds-text-highEmphasis, ${N500})`,
-    dark: `var(--ds-text-highEmphasis, ${DN600})`
+    light: `var(--ds-text, ${N500})`,
+    dark: `var(--ds-text, ${DN600})`
   },
   success: {
-    light: `var(--ds-text-highEmphasis, ${N0})`,
-    dark: `var(--ds-text-highEmphasis, ${DN40})`
+    light: `var(--ds-text, ${N0})`,
+    dark: `var(--ds-text, ${DN40})`
   },
   warning: {
-    light: `var(--ds-text-highEmphasis, ${N700})`,
-    dark: `var(--ds-text-highEmphasis, ${DN40})`
+    light: `var(--ds-text, ${N700})`,
+    dark: `var(--ds-text, ${DN40})`
   }
 };
 export const getFlagTextColor = (appearance, mode) => flagTextColor[appearance][mode];
@@ -74,70 +74,70 @@ export const getFlagIconColor = (appearance, mode) => flagIconColor[appearance][
 export const flagShadowColor = N50A;
 const flagFocusRingColor = {
   error: {
-    light: `var(--ds-border-focus, ${N40})`,
-    dark: `var(--ds-border-focus, ${N40})`
+    light: `var(--ds-border-focused, ${N40})`,
+    dark: `var(--ds-border-focused, ${N40})`
   },
   info: {
-    light: `var(--ds-border-focus, ${N40})`,
-    dark: `var(--ds-border-focus, ${N40})`
+    light: `var(--ds-border-focused, ${N40})`,
+    dark: `var(--ds-border-focused, ${N40})`
   },
   normal: {
-    light: `var(--ds-border-focus, ${B100})`,
-    dark: `var(--ds-border-focus, ${B100})`
+    light: `var(--ds-border-focused, ${B100})`,
+    dark: `var(--ds-border-focused, ${B100})`
   },
   success: {
-    light: `var(--ds-border-focus, ${N40})`,
-    dark: `var(--ds-border-focus, ${N40})`
+    light: `var(--ds-border-focused, ${N40})`,
+    dark: `var(--ds-border-focused, ${N40})`
   },
   warning: {
-    light: `var(--ds-border-focus, ${N200})`,
-    dark: `var(--ds-border-focus, ${N200})`
+    light: `var(--ds-border-focused, ${N200})`,
+    dark: `var(--ds-border-focused, ${N200})`
   }
 };
 export const getFlagFocusRingColor = (appearance, mode) => flagFocusRingColor[appearance][mode];
 const lightButtonBackground = 'rgba(255, 255, 255, 0.08)';
 const actionBackground = {
   success: {
-    light: `var(--ds-background-subtleNeutral-resting, ${lightButtonBackground})`,
-    dark: `var(--ds-background-subtleNeutral-resting, ${N30A})`
+    light: `var(--ds-background-neutral, ${lightButtonBackground})`,
+    dark: `var(--ds-background-neutral, ${N30A})`
   },
   info: {
-    light: `var(--ds-background-subtleNeutral-resting, ${lightButtonBackground})`,
-    dark: `var(--ds-background-subtleNeutral-resting, ${lightButtonBackground})`
+    light: `var(--ds-background-neutral, ${lightButtonBackground})`,
+    dark: `var(--ds-background-neutral, ${lightButtonBackground})`
   },
   error: {
-    light: `var(--ds-background-subtleNeutral-resting, ${lightButtonBackground})`,
-    dark: `var(--ds-background-subtleNeutral-resting, ${N30A})`
+    light: `var(--ds-background-neutral, ${lightButtonBackground})`,
+    dark: `var(--ds-background-neutral, ${N30A})`
   },
   warning: {
-    light: `var(--ds-background-subtleNeutral-resting, ${N30A})`,
-    dark: `var(--ds-background-subtleNeutral-resting, ${N30A})`
+    light: `var(--ds-background-neutral, ${N30A})`,
+    dark: `var(--ds-background-neutral, ${N30A})`
   },
   normal: {
-    light: "var(--ds-background-subtleNeutral-resting, none)",
-    dark: "var(--ds-background-subtleNeutral-resting, none)"
+    light: "var(--ds-background-neutral, none)",
+    dark: "var(--ds-background-neutral, none)"
   }
 };
 const actionColor = {
   success: {
-    light: `var(--ds-text-mediumEmphasis, ${N0})`,
-    dark: `var(--ds-text-mediumEmphasis, ${DN40})`
+    light: `var(--ds-text-subtle, ${N0})`,
+    dark: `var(--ds-text-subtle, ${DN40})`
   },
   info: {
-    light: `var(--ds-text-mediumEmphasis, ${N0})`,
-    dark: `var(--ds-text-mediumEmphasis, ${DN600})`
+    light: `var(--ds-text-subtle, ${N0})`,
+    dark: `var(--ds-text-subtle, ${DN600})`
   },
   error: {
-    light: `var(--ds-text-mediumEmphasis, ${N0})`,
-    dark: `var(--ds-text-mediumEmphasis, ${DN600})`
+    light: `var(--ds-text-subtle, ${N0})`,
+    dark: `var(--ds-text-subtle, ${DN600})`
   },
   warning: {
-    light: `var(--ds-text-mediumEmphasis, ${N700})`,
-    dark: `var(--ds-text-mediumEmphasis, ${DN40})`
+    light: `var(--ds-text-subtle, ${N700})`,
+    dark: `var(--ds-text-subtle, ${DN40})`
   },
   normal: {
-    light: `var(--ds-text-mediumEmphasis, ${B400})`,
-    dark: `var(--ds-text-mediumEmphasis, ${B100})`
+    light: `var(--ds-text-subtle, ${B400})`,
+    dark: `var(--ds-text-subtle, ${B100})`
   }
 };
 export const getActionBackground = (appearance, mode) => actionBackground[appearance][mode];

package/dist/es2019/version.json

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

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

@@ -1,14 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useRef } from 'react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
+import noop from '@atlaskit/ds-lib/noop';
 import Flag from './flag';
 import { useFlagGroup } from './flag-group';
 var packageName = "@atlaskit/flag";
-var packageVersion = "14.4.2";
+var packageVersion = "14.5.3";
 export var AUTO_DISMISS_SECONDS = 8;
 
-function noop() {}
-
 var AutoDismissFlag = function AutoDismissFlag(props) {
   var id = props.id,
       analyticsContext = props.analyticsContext,

package/dist/esm/flag-actions.js

@@ -1,6 +1,4 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2, _templateObject3;
+/* eslint-disable @repo/internal/styles/no-nested-styles */
 
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
@@ -11,6 +9,46 @@ import { getActionBackground, getActionColor, getFlagFocusRingColor } from './th
 var gridSize = getGridSize();
 var separatorWidth = gridSize * 2;
 var defaultAppearanceTranslate = gridSize / 4;
+var separatorStyles = css({
+  display: 'inline-block',
+  width: separatorWidth,
+  textAlign: 'center'
+});
+var actionContainerStyles = css({
+  display: 'flex',
+  paddingTop: gridSize,
+  alignItems: 'center',
+  flexWrap: 'wrap',
+  transform: "translateX(-".concat(defaultAppearanceTranslate, "px)")
+});
+var boldActionContainerStyles = css({
+  transform: 0
+});
+var buttonStyles = css({
+  '&&, a&&': {
+    marginLeft: 0,
+    padding: "0 ".concat(gridSize, "px !important"),
+    background: "var(--bg-color)",
+    color: "var(--color) !important",
+    fontWeight: 500
+  },
+  '&&:focus, a&&:focus': {
+    boxShadow: "0 0 0 2px var(--focus-color)"
+  },
+  '&&:hover, &&:active, a&&:hover, a&&:active': {
+    textDecoration: 'underline'
+  }
+});
+var appeanceNormalButtonStyles = css({
+  '&&, a&&': {
+    padding: '0 !important'
+  }
+});
+var isBoldButtonStyles = css({
+  '&&, a&&': {
+    marginLeft: gridSize
+  }
+});
 
 var FlagActions = function FlagActions(props) {
   var _props$appearance = props.appearance,
@@ -27,11 +65,11 @@ var FlagActions = function FlagActions(props) {
 
   var isBold = appearance !== DEFAULT_APPEARANCE;
   return jsx("div", {
-    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        display: flex;\n        flex-wrap: wrap;\n        padding-top: ", "px;\n        transform: ", ";\n        align-items: center;\n      "])), gridSize, appearance === DEFAULT_APPEARANCE ? "translateX(-".concat(defaultAppearanceTranslate, "px)") : 0),
+    css: [actionContainerStyles, isBold && boldActionContainerStyles],
     "data-testid": testId && "".concat(testId, "-actions")
   }, actions.map(function (action, index) {
     return [index && !isBold ? jsx("div", {
-      css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n              text-align: center;\n              display: inline-block;\n              width: ", "px;\n            "])), separatorWidth),
+      css: separatorStyles,
       key: index + 0.5
     }, "\xB7") : '', jsx(Button, {
       onClick: action.onClick,
@@ -42,7 +80,12 @@ var FlagActions = function FlagActions(props) {
       spacing: "compact",
       testId: action.testId,
       key: index,
-      css: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            &&,\n            a&& {\n              margin-left: ", "px;\n              font-weight: 500;\n              padding: 0 ", "px !important;\n              background: ", ";\n              color: ", " !important;\n            }\n            &&:focus,\n            a&&:focus {\n              box-shadow: 0 0 0 2px ", ";\n            }\n            &&:hover,\n            &&:active,\n            a&&:hover,\n            a&&:active {\n              text-decoration: underline;\n            }\n          "])), index && isBold ? gridSize : 0, appearance === 'normal' ? 0 : gridSize, getActionBackground(appearance, mode), getActionColor(appearance, mode), getFlagFocusRingColor(appearance, mode))
+      style: {
+        '--color': getActionColor(appearance, mode),
+        '--bg-color': getActionBackground(appearance, mode),
+        '--focus-color': getFlagFocusRingColor(appearance, mode)
+      },
+      css: [buttonStyles, isBold && isBoldButtonStyles, appearance === 'normal' && appeanceNormalButtonStyles]
     }, action.content)];
   }));
 };

package/dist/esm/flag-group.js

@@ -1,13 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _typeof from "@babel/runtime/helpers/typeof";
 
-var _templateObject, _templateObject2, _templateObject3;
-
 /** @jsx jsx */
 import { Children, createContext, useContext, useMemo } from 'react';
 import { css, jsx } from '@emotion/core';
 import { easeIn, ExitingPersistence, SlideIn } from '@atlaskit/motion';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+import noop from '@atlaskit/ds-lib/noop';
 import Portal from '@atlaskit/portal';
 import { gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
 var gridSize = getGridSize();
@@ -15,9 +14,6 @@ export var flagWidth = gridSize * 50;
 export var flagAnimationTime = 400;
 var flagBottom = gridSize * 6;
 var flagLeft = gridSize * 10;
-
-function noop() {}
-
 var defaultFlagGroupContext = {
   onDismissed: function onDismissed() {},
   isDismissAllowed: false
@@ -28,7 +24,51 @@ export function useFlagGroup() {
 } // transition: none is set on first-of-type to prevent a bug in Firefox
 // that causes a broken transition
 
-var baseStyles = "\n  bottom: 0;\n  position: absolute;\n  width: ".concat(flagWidth, "px;\n  transition: transform ").concat(flagAnimationTime, "ms ease-in-out;\n\n  @media (max-width: 560px) {\n    width: 100vw;\n  }\n\n  &:first-of-type {\n    transition: none;\n    transform: translate(0,0);\n  }\n\n  &:nth-of-type(n + 2) {\n    animation-duration: 0ms;\n    transform: translateX(0) translateY(100%) translateY(").concat(2 * gridSize, "px);\n  }\n\n  /* Layer the 'primary' flag above the 'secondary' flag */\n  &:nth-of-type(1) {\n    z-index: 5;\n  }\n  &:nth-of-type(2) {\n    z-index: 4;\n  }\n\n  &:nth-of-type(n + 4) {\n    visibility: hidden;\n  }\n");
+var baseStyles = css({
+  width: flagWidth,
+  position: 'absolute',
+  bottom: 0,
+  transition: "transform ".concat(flagAnimationTime, "ms ease-in-out"),
+  '@media (max-width: 560px)': {
+    width: '100vw'
+  },
+  ':first-of-type': {
+    transform: "translate(0,0)",
+    transition: 'none'
+  },
+  ':nth-of-type(n + 2)': {
+    animationDuration: '0ms',
+    transform: "translateX(0) translateY(100%) translateY(".concat(2 * gridSize, "px)")
+  },
+  ':nth-of-type(1)': {
+    zIndex: 5
+  },
+  ':nth-of-type(2)': {
+    zIndex: 4
+  },
+  '&:nth-of-type(n + 4)': {
+    visibility: 'hidden'
+  }
+}); // Transform needed to push up while 1st flag is leaving
+// Exiting time should match the exiting time of motion so is halved
+
+var dismissAllowedStyles = css({
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '&& + *': {
+    transform: "translate(0, 0)",
+    transitionDuration: "".concat(flagAnimationTime / 2, "ms")
+  }
+});
+var flagGroupContainerStyles = css({
+  position: 'fixed',
+  zIndex: layers.flag(),
+  bottom: flagBottom,
+  left: flagLeft,
+  '@media (max-width: 560px)': {
+    bottom: 0,
+    left: 0
+  }
+});
 
 var FlagGroup = function FlagGroup(props) {
   var id = props.id,
@@ -51,17 +91,15 @@ var FlagGroup = function FlagGroup(props) {
     return children && _typeof(children) === 'object' ? Children.map(children, function (flag, index) {
       var isDismissAllowed = index === 0;
       return jsx(SlideIn, {
-        enterFrom: 'left',
-        fade: 'inout',
+        enterFrom: "left",
+        fade: "inout",
         duration: flagAnimationTime,
         animationTimingFunction: function animationTimingFunction() {
           return easeIn;
         }
       }, function (props) {
         return jsx("div", _extends({}, props, {
-          css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                    ", "\n                    ", "\n                  "])), baseStyles, isDismissAllowed ? // Transform needed to push up while 1st flag is leaving
-          // Exiting time should match the exiting time of motion so is halved
-          "\n                    && + * {\n                     transform: translate(0, 0);\n                     transition-duration: ".concat(flagAnimationTime / 2, "ms\n                   }") : '')
+          css: [baseStyles, isDismissAllowed && dismissAllowedStyles]
         }), jsx(FlagGroupContext.Provider, {
           value: // Only the first flag should be able to be dismissed.
           isDismissAllowed ? dismissFlagContext : defaultFlagGroupContext
@@ -74,10 +112,8 @@ var FlagGroup = function FlagGroup(props) {
     zIndex: layers.flag()
   }, jsx("div", {
     id: id,
-    css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          bottom: ", "px;\n          left: ", "px;\n          position: fixed;\n          z-index: ", ";\n          @media (max-width: 560px) {\n            bottom: 0;\n            left: 0;\n          }\n        "])), flagBottom, flagLeft, layers.flag())
-  }, hasFlags ? jsx(LabelTag, {
-    css: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              border: 0;\n              clip: rect(1px, 1px, 1px, 1px);\n              height: 1px;\n              overflow: hidden;\n              padding: 0;\n              position: absolute;\n              white-space: nowrap;\n              width: 1px;\n            "])))
-  }, label) : null, jsx(ExitingPersistence, {
+    css: flagGroupContainerStyles
+  }, hasFlags ? jsx(VisuallyHidden, null, jsx(LabelTag, null, label)) : null, jsx(ExitingPersistence, {
     appear: false
   }, renderChildren())));
 };

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, {