@atlaskit/flag 14.7.3 → 15.0.0

package/dist/cjs/theme.js

@@ -3,187 +3,68 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getFlagTextColor = exports.getFlagIconColor = exports.getFlagFocusRingColor = exports.getFlagBackgroundColor = exports.getActionColor = exports.getActionBackground = exports.flagShadowColor = exports.flagBorderColor = void 0;
+exports.flagTextColorToken = exports.flagTextColor = exports.flagIconColor = exports.flagFocusRingColor = exports.flagBackgroundColor = exports.actionTextColor = exports.actionBackgroundColor = void 0;
 
 var _colors = require("@atlaskit/theme/colors");
 
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var flagBackgroundColor = {
-  error: {
-    light: "var(--ds-background-danger-bold, ".concat(_colors.R400, ")"),
-    dark: "var(--ds-background-danger-bold, ".concat(_colors.R300, ")")
-  },
-  info: {
-    light: "var(--ds-background-neutral-bold, ".concat(_colors.N500, ")"),
-    dark: "var(--ds-background-neutral-bold, ".concat(_colors.N500, ")")
-  },
-  normal: {
-    light: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-surface-overlay, ".concat(_colors.DN50, ")")
-  },
-  success: {
-    light: "var(--ds-background-success-bold, ".concat(_colors.G400, ")"),
-    dark: "var(--ds-background-success-bold, ".concat(_colors.G300, ")")
-  },
-  warning: {
-    light: "var(--ds-background-warning-bold, ".concat(_colors.Y200, ")"),
-    dark: "var(--ds-background-warning-bold, ".concat(_colors.Y300, ")")
-  }
+  error: 'danger.bold',
+  info: 'neutral.bold',
+  normal: 'elevation.surface.overlay',
+  success: 'success.bold',
+  warning: 'warning.bold'
 };
-
-var getFlagBackgroundColor = function getFlagBackgroundColor(appearance, mode) {
-  return flagBackgroundColor[appearance][mode];
-}; // token set in flag.tsx instead
-
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-
-
-exports.getFlagBackgroundColor = getFlagBackgroundColor;
-var flagBorderColor = _colors.N60A;
-exports.flagBorderColor = flagBorderColor;
-var flagShadowColor = _colors.N50A;
-/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-
-exports.flagShadowColor = flagShadowColor;
+exports.flagBackgroundColor = flagBackgroundColor;
 var flagIconColor = {
-  error: {
-    light: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-icon-inverse, ".concat(_colors.DN40, ")")
-  },
-  info: {
-    light: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-icon-inverse, ".concat(_colors.DN600, ")")
-  },
-  normal: {
-    light: "var(--ds-icon-subtle, ".concat(_colors.N500, ")"),
-    dark: "var(--ds-icon-subtle, ".concat(_colors.DN600, ")")
-  },
-  success: {
-    light: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-icon-inverse, ".concat(_colors.DN40, ")")
-  },
-  warning: {
-    light: "var(--ds-icon-warning-inverse, ".concat(_colors.N700, ")"),
-    dark: "var(--ds-icon-warning-inverse, ".concat(_colors.DN40, ")")
-  }
-};
-var flagTextColor = {
-  error: {
-    light: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-text-inverse, ".concat(_colors.DN40, ")")
-  },
-  info: {
-    light: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-text-inverse, ".concat(_colors.DN600, ")")
-  },
-  normal: {
-    light: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
-    dark: "var(--ds-text-subtle, ".concat(_colors.DN600, ")")
-  },
-  success: {
-    light: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-text-inverse, ".concat(_colors.DN40, ")")
-  },
-  warning: {
-    light: "var(--ds-text-warning-inverse, ".concat(_colors.N700, ")"),
-    dark: "var(--ds-text-warning-inverse, ".concat(_colors.DN40, ")")
-  }
+  error: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
+  info: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
+  normal: "var(--ds-icon-subtle, ".concat(_colors.N500, ")"),
+  success: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
+  warning: "var(--ds-icon-warning-inverse, ".concat(_colors.N700, ")")
 };
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
-var getFlagTextColor = function getFlagTextColor(appearance, mode) {
-  return flagTextColor[appearance][mode];
+exports.flagIconColor = flagIconColor;
+var flagTextColor = {
+  error: 'inverse',
+  info: 'inverse',
+  normal: 'subtle',
+  success: 'inverse',
+  warning: 'warning.inverse'
 };
-
-exports.getFlagTextColor = getFlagTextColor;
-
-var getFlagIconColor = function getFlagIconColor(appearance, mode) {
-  return flagIconColor[appearance][mode];
+exports.flagTextColor = flagTextColor;
+var flagTextColorToken = {
+  error: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
+  info: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
+  normal: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
+  success: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
+  warning: "var(--ds-text-warning-inverse, ".concat(_colors.N700, ")")
 };
-
-exports.getFlagIconColor = getFlagIconColor;
+exports.flagTextColorToken = flagTextColorToken;
 var flagFocusRingColor = {
-  error: {
-    light: "var(--ds-border-focused, ".concat(_colors.N40, ")"),
-    dark: "var(--ds-border-focused, ".concat(_colors.N40, ")")
-  },
-  info: {
-    light: "var(--ds-border-focused, ".concat(_colors.N40, ")"),
-    dark: "var(--ds-border-focused, ".concat(_colors.N40, ")")
-  },
-  normal: {
-    light: "var(--ds-border-focused, ".concat(_colors.B100, ")"),
-    dark: "var(--ds-border-focused, ".concat(_colors.B100, ")")
-  },
-  success: {
-    light: "var(--ds-border-focused, ".concat(_colors.N40, ")"),
-    dark: "var(--ds-border-focused, ".concat(_colors.N40, ")")
-  },
-  warning: {
-    light: "var(--ds-border-focused, ".concat(_colors.N200, ")"),
-    dark: "var(--ds-border-focused, ".concat(_colors.N200, ")")
-  }
-};
-
-var getFlagFocusRingColor = function getFlagFocusRingColor(appearance, mode) {
-  return flagFocusRingColor[appearance][mode];
-};
-
-exports.getFlagFocusRingColor = getFlagFocusRingColor;
-var lightButtonBackground = 'rgba(255, 255, 255, 0.08)'; // TODO: DSP-2519 Interaction tokens should be used for hovered and pressed states
+  error: "var(--ds-border-focused, ".concat(_colors.N40, ")"),
+  info: "var(--ds-border-focused, ".concat(_colors.N40, ")"),
+  normal: "var(--ds-border-focused, ".concat(_colors.B100, ")"),
+  success: "var(--ds-border-focused, ".concat(_colors.N40, ")"),
+  warning: "var(--ds-border-focused, ".concat(_colors.N200, ")")
+}; // TODO: DSP-2519 Interaction tokens should be used for hovered and pressed states
 // https://product-fabric.atlassian.net/browse/DSP-2519
 
-var actionBackground = {
-  success: {
-    light: "var(--ds-background-neutral, ".concat(lightButtonBackground, ")"),
-    dark: "var(--ds-background-neutral, ".concat(_colors.N30A, ")")
-  },
-  info: {
-    light: "var(--ds-background-neutral, ".concat(lightButtonBackground, ")"),
-    dark: "var(--ds-background-neutral, ".concat(lightButtonBackground, ")")
-  },
-  error: {
-    light: "var(--ds-background-neutral, ".concat(lightButtonBackground, ")"),
-    dark: "var(--ds-background-neutral, ".concat(_colors.N30A, ")")
-  },
-  warning: {
-    light: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
-    dark: "var(--ds-background-neutral, ".concat(_colors.N30A, ")")
-  },
-  normal: {
-    light: 'none',
-    dark: 'none'
-  }
+exports.flagFocusRingColor = flagFocusRingColor;
+var actionBackgroundColor = {
+  success: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
+  info: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
+  error: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
+  warning: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
+  normal: 'none'
 };
-var actionColor = {
-  success: {
-    light: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-text-inverse, ".concat(_colors.DN40, ")")
-  },
-  info: {
-    light: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-text-inverse, ".concat(_colors.DN600, ")")
-  },
-  error: {
-    light: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-text-inverse, ".concat(_colors.DN600, ")")
-  },
-  warning: {
-    light: "var(--ds-text-warning-inverse, ".concat(_colors.N700, ")"),
-    dark: "var(--ds-text-warning-inverse, ".concat(_colors.DN40, ")")
-  },
-  normal: {
-    light: "var(--ds-link, ".concat(_colors.B400, ")"),
-    dark: "var(--ds-link, ".concat(_colors.B100, ")")
-  }
+exports.actionBackgroundColor = actionBackgroundColor;
+var actionTextColor = {
+  success: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
+  info: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
+  error: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
+  warning: "var(--ds-text-warning-inverse, ".concat(_colors.N700, ")"),
+  normal: "var(--ds-link, ".concat(_colors.B400, ")")
 };
-
-var getActionBackground = function getActionBackground(appearance, mode) {
-  return actionBackground[appearance][mode];
-};
-
-exports.getActionBackground = getActionBackground;
-
-var getActionColor = function getActionColor(appearance, mode) {
-  return actionColor[appearance][mode];
-};
-
-exports.getActionColor = getActionColor;
+exports.actionTextColor = actionTextColor;

package/dist/cjs/version.json

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

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

@@ -5,7 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import Flag from './flag';
 import { useFlagGroup } from './flag-group';
 const packageName = "@atlaskit/flag";
-const packageVersion = "14.7.3";
+const packageVersion = "15.0.0";
 export const AUTO_DISMISS_SECONDS = 8;
 /**
  * __Auto dismiss flag__

package/dist/es2019/flag-actions.js

@@ -3,30 +3,13 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
+import { UNSAFE_Inline as Inline } from '@atlaskit/ds-explorations';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { DEFAULT_APPEARANCE } from './constants';
-import { getActionBackground, getActionColor, getFlagFocusRingColor } from './theme';
+import { flagFocusRingColor, actionBackgroundColor, actionTextColor } from './theme';
 const gridSize = getGridSize();
-const separatorWidth = gridSize * 2;
-const defaultAppearanceTranslate = gridSize / 4;
-const separatorStyles = css({
-  display: 'inline-block',
-  width: separatorWidth,
-  textAlign: 'center'
-});
-const actionContainerStyles = css({
-  display: 'flex',
-  paddingTop: gridSize,
-  alignItems: 'center',
-  flexWrap: 'wrap',
-  transform: `translateX(-${defaultAppearanceTranslate}px)`
-});
-const boldActionContainerStyles = css({
-  transform: 0
-});
 const buttonStyles = css({
   '&&, a&&': {
-    marginLeft: 0,
     padding: `0 ${gridSize}px !important`,
     background: `var(--bg-color)`,
     color: `var(--color) !important`,
@@ -39,23 +22,17 @@ const buttonStyles = css({
     textDecoration: 'underline'
   }
 });
-const appeanceNormalButtonStyles = css({
+const appearanceNormalButtonStyles = css({
   '&&, a&&': {
     padding: '0 !important'
   }
 });
-const isBoldButtonStyles = css({
-  '&&, a&&': {
-    marginRight: gridSize
-  }
-});
 
 const FlagActions = props => {
   const {
     appearance = DEFAULT_APPEARANCE,
     actions = [],
     linkComponent,
-    mode,
     testId
   } = props;
 
@@ -64,13 +41,16 @@ const FlagActions = props => {
   }
 
   const isBold = appearance !== DEFAULT_APPEARANCE;
-  return jsx("div", {
-    css: [actionContainerStyles, isBold && boldActionContainerStyles],
-    "data-testid": testId && `${testId}-actions`
-  }, actions.map((action, index) => [index && !isBold ? jsx("div", {
-    css: separatorStyles,
-    key: index + 0.5
-  }, "\xB7") : '', jsx(Button, {
+  return jsx(Inline, {
+    gap: "scale.100",
+    flexWrap: "wrap",
+    alignItems: "center",
+    divider: isBold ? null : '·',
+    UNSAFE_style: isBold ? undefined : {
+      transform: `translateX(-2px)`
+    },
+    testId: testId && `${testId}-actions`
+  }, actions.map((action, index) => jsx(Button, {
     onClick: action.onClick,
     href: action.href,
     target: action.target,
@@ -80,12 +60,12 @@ const FlagActions = props => {
     testId: action.testId,
     key: index,
     style: {
-      '--color': getActionColor(appearance, mode),
-      '--bg-color': getActionBackground(appearance, mode),
-      '--focus-color': getFlagFocusRingColor(appearance, mode)
+      '--color': actionTextColor[appearance],
+      '--bg-color': actionBackgroundColor[appearance],
+      '--focus-color': flagFocusRingColor[appearance]
     },
-    css: [buttonStyles, isBold && isBoldButtonStyles, appearance === 'normal' && appeanceNormalButtonStyles]
-  }, action.content)]));
+    css: [buttonStyles, appearance === 'normal' && appearanceNormalButtonStyles]
+  }, action.content)));
 }; // eslint-disable-next-line @repo/internal/react/require-jsdoc
 
 

package/dist/es2019/flag-group.js

@@ -1,8 +1,7 @@
-import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { Children, createContext, useContext, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
+import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
 import { easeIn, ExitingPersistence, SlideIn } from '@atlaskit/motion';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import noop from '@atlaskit/ds-lib/noop';
@@ -27,7 +26,6 @@ export function useFlagGroup() {
 
 const baseStyles = css({
   width: flagWidth,
-  position: 'absolute',
   bottom: 0,
   transition: `transform ${flagAnimationTime}ms ease-in-out`,
   '@media (max-width: 560px)': {
@@ -61,7 +59,6 @@ const dismissAllowedStyles = css({
   }
 });
 const flagGroupContainerStyles = css({
-  position: 'fixed',
   zIndex: layers.flag(),
   bottom: flagBottom,
   left: flagLeft,
@@ -101,9 +98,16 @@ const FlagGroup = props => {
         fade: "inout",
         duration: flagAnimationTime,
         animationTimingFunction: () => easeIn
-      }, props => jsx("div", _extends({}, props, {
-        css: [baseStyles, isDismissAllowed && dismissAllowedStyles]
-      }), jsx(FlagGroupContext.Provider, {
+      }, ({
+        className,
+        ref
+      }) => jsx(Box, {
+        display: "block",
+        position: "absolute",
+        css: [baseStyles, isDismissAllowed && dismissAllowedStyles],
+        className: className,
+        ref: ref
+      }, jsx(FlagGroupContext.Provider, {
         value: // Only the first flag should be able to be dismissed.
         isDismissAllowed ? dismissFlagContext : defaultFlagGroupContext
       }, flag)));
@@ -112,7 +116,9 @@ const FlagGroup = props => {
 
   return jsx(Portal, {
     zIndex: layers.flag()
-  }, jsx("div", {
+  }, jsx(Box, {
+    display: "block",
+    position: "fixed",
     id: id,
     css: flagGroupContainerStyles
   }, hasFlags ? jsx(VisuallyHidden, null, jsx(LabelTag, null, label)) : null, jsx(ExitingPersistence, {

package/dist/es2019/flag.js

@@ -2,50 +2,21 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { useCallback, useEffect, useState } from 'react';
-import { css, jsx } from '@emotion/react';
-import { useGlobalTheme } from '@atlaskit/theme/components';
-import { borderRadius, //gridSize as getGridSize,
-layers } from '@atlaskit/theme/constants';
+import { jsx } from '@emotion/react';
+import { UNSAFE_Box as Box, UNSAFE_Inline as Inline, UNSAFE_Stack as Stack, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import noop from '@atlaskit/ds-lib/noop';
 import FocusRing from '@atlaskit/focus-ring';
 import { DEFAULT_APPEARANCE } from './constants';
-import { flagBorderColor, flagShadowColor, getFlagBackgroundColor, getFlagTextColor, getFlagIconColor } from './theme';
+import { flagTextColor, flagBackgroundColor, flagIconColor } from './theme';
 import Actions from './flag-actions';
 import { useFlagGroup } from './flag-group';
-import { Title, Description, Expander, DismissButton } from './internal';
+import { Expander, DismissButton } from './internal';
 const analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "14.7.3"
-}; // NOT USED
-// const gridSize = getGridSize();
-// const doubleGridSize = gridSize * 2;
-
-const titleGroupStyles = css({
-  display: 'flex',
-  alignItems: 'start'
-});
-const iconTitleStyles = css({
-  display: 'flex',
-  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize / 2}px``
-  paddingTop: "var(--ds-scale-050, 4px)",
-  alignItems: 'start',
-  flex: 1
-});
-const flagHeaderStyles = css({
-  boxSizing: 'border-box',
-  width: '100%',
-  // TODO Delete this comment after verifying spacing token -> previous value `doubleGridSize`
-  padding: "var(--ds-scale-200, 16px)",
-  borderRadius: borderRadius()
-});
-const flagContainerStyles = css({
-  width: '100%',
-  zIndex: layers.flag(),
-  borderRadius: borderRadius(),
-  transition: 'background-color 200ms'
-});
+  packageVersion: "15.0.0"
+};
 /**
  * __Flag__
  *
@@ -122,41 +93,55 @@ const Flag = props => {
     onMouseOut,
     onBlur: onBlurAnalytics
   };
-  let boxShadowValue = `0 20px 32px -8px ${flagShadowColor}`;
-
-  if (!isBold) {
-    boxShadowValue = `0 0 1px ${flagBorderColor}, ${boxShadowValue}`;
-  }
-
-  const boxShadow = `var(--ds-shadow-overlay, ${boxShadowValue})`;
-  const {
-    mode
-  } = useGlobalTheme();
-  const textColor = getFlagTextColor(appearance, mode);
-  const iconColor = getFlagIconColor(appearance, mode);
+  const textColor = flagTextColor[appearance];
+  const iconColor = flagIconColor[appearance];
   const isDismissable = isBold || isDismissAllowed;
-  return jsx("div", _extends({
-    style: {
-      color: textColor,
-      backgroundColor: getFlagBackgroundColor(appearance, mode),
-      boxShadow
+  const shouldRenderGap = !isBold && (description || actions.length) || isExpanded;
+  return jsx(FocusRing, null, jsx(Box, _extends({
+    display: "block",
+    backgroundColor: flagBackgroundColor[appearance],
+    shadow: "overlay",
+    padding: "scale.200",
+    borderRadius: "normal",
+    overflow: "hidden",
+    layer: "flag",
+    UNSAFE_style: {
+      width: '100%',
+      transition: 'background-color 200ms'
     },
-    css: flagContainerStyles,
     role: "alert",
-    "data-testid": testId
-  }, autoDismissProps), jsx(FocusRing, null, jsx("div", {
-    css: flagHeaderStyles // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    tabIndex: 0,
+    testId: testId
+  }, autoDismissProps), jsx(Inline, {
+    gap: "scale.200"
+  }, jsx(Box, {
+    alignItems: "start",
+    UNSAFE_style: {
+      color: iconColor,
+      flexShrink: 0
+    }
+  }, icon), jsx(Stack, {
+    gap: shouldRenderGap ? 'scale.100' : 'scale.0' // Gap exists even when not expanded due to Expander internals always being in the DOM
     ,
-    tabIndex: 0
-  }, jsx("div", {
-    style: {
-      color: iconColor
-    },
-    css: titleGroupStyles
-  }, jsx("div", {
-    css: iconTitleStyles
-  }, icon, jsx(Title, {
-    color: textColor
+    UNSAFE_style: {
+      flexGrow: 1,
+      transition: `gap 0.3s`
+    }
+  }, jsx(Inline, {
+    gap: "scale.100",
+    justifyContent: "spaceBetween"
+  }, jsx(Box, {
+    display: "block",
+    UNSAFE_style: {
+      paddingTop: 2
+    }
+  }, jsx(Text, {
+    color: textColor,
+    fontWeight: "600",
+    UNSAFE_style: {
+      overflowWrap: 'anywhere' // For cases where a single word is longer than the container (e.g. filenames)
+
+    }
   }, title)), isDismissable ? !(isBold && !description && !actions.length) && jsx(DismissButton, {
     testId: testId,
     appearance: appearance,
@@ -166,17 +151,23 @@ const Flag = props => {
   }) : null), jsx(Expander, {
     isExpanded: !isBold || isExpanded,
     testId: testId
-  }, description && jsx(Description, {
-    testId: testId && `${testId}-description`,
+  }, description && jsx(Text, {
+    as: "div",
     color: textColor,
-    isBold: isBold
+    UNSAFE_style: {
+      maxHeight: 100,
+      // height is defined as 5 lines maximum by design
+      overflow: 'auto',
+      overflowWrap: 'anywhere' // For cases where a single word is longer than the container (e.g. filenames)
+
+    },
+    testId: testId && `${testId}-description`
   }, description), jsx(Actions, {
     actions: actions,
     appearance: appearance,
     linkComponent: linkComponent,
-    testId: testId,
-    mode: mode
-  })))));
+    testId: testId
+  }))))));
 };
 
 export default Flag;

package/dist/es2019/internal/dismiss-button.js

@@ -1,30 +1,12 @@
 /** @jsx jsx */
 import { memo } from 'react';
-import { jsx, css } from '@emotion/react';
+import { jsx } from '@emotion/react';
+import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
 import FocusRing from '@atlaskit/focus-ring';
-import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
-import ChevronUpIcon from '@atlaskit/icon/glyph/chevron-up';
+import ChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
+import ChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
-import { borderRadius as getBorderRadius, gridSize as getGridSize } from '@atlaskit/theme/constants';
-import { useGlobalTheme } from '@atlaskit/theme/components';
-import { getFlagTextColor } from '../theme';
-const gridSize = getGridSize();
-const borderRadius = getBorderRadius();
-const dismissButtonStyles = css({
-  marginLeft: gridSize,
-  padding: 0,
-  flex: '0 0 auto',
-  appearance: 'none',
-  background: 'none',
-  border: 'none',
-  borderRadius,
-  cursor: 'pointer',
-  lineHeight: '1',
-  whiteSpace: 'nowrap'
-});
-const crossIconStyles = css({
-  paddingTop: `${gridSize}px`
-});
+import { flagTextColorToken } from '../theme';
 
 const DismissButton = ({
   appearance,
@@ -33,9 +15,6 @@ const DismissButton = ({
   isExpanded,
   testId
 }) => {
-  const {
-    mode
-  } = useGlobalTheme();
   let ButtonIcon = CrossIcon;
   let buttonLabel = 'Dismiss';
   let size = 'small';
@@ -44,22 +23,33 @@ const DismissButton = ({
   if (isBold) {
     ButtonIcon = isExpanded ? ChevronUpIcon : ChevronDownIcon;
     buttonLabel = isExpanded ? 'Collapse' : 'Expand';
-    size = 'large';
+    size = 'medium';
     buttonTestId = testId && `${testId}-toggle`;
   }
 
-  return jsx(FocusRing, null, jsx("button", {
-    style: {
-      color: getFlagTextColor(appearance, mode)
-    },
-    css: [dismissButtonStyles, !isBold && crossIconStyles],
-    onClick: onClick,
-    "data-testid": buttonTestId,
+  return jsx(FocusRing, null, jsx(Box, {
+    as: "button",
     type: "button",
-    "aria-expanded": isBold ? isExpanded : undefined
+    justifyContent: "center",
+    alignItems: "center",
+    borderStyle: "none",
+    borderRadius: "normal",
+    padding: "scale.0",
+    width: "size.200",
+    height: "size.200",
+    onClick: onClick,
+    "aria-expanded": isBold ? isExpanded : undefined,
+    UNSAFE_style: {
+      flex: '0 0 auto',
+      background: 'none',
+      cursor: 'pointer',
+      whiteSpace: 'nowrap'
+    },
+    testId: buttonTestId
   }, jsx(ButtonIcon, {
     label: buttonLabel,
-    size: size
+    size: size,
+    primaryColor: flagTextColorToken[appearance]
   })));
 };