@atlaskit/flag 14.3.4 → 14.5.0

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