@atlaskit/flag 14.4.2 → 14.5.3

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/internal/description.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@emotion/core");
+
+/** @jsx jsx */
+var descriptionStyles = (0, _core.css)({
+  /* height is defined as 5 lines maximum by design */
+  maxHeight: 100,
+  overflow: 'auto',
+  wordWrap: 'break-word'
+});
+
+var Description = function Description(_ref) {
+  var color = _ref.color,
+      testId = _ref.testId,
+      children = _ref.children;
+  return (0, _core.jsx)("div", {
+    style: {
+      color: color
+    },
+    css: descriptionStyles,
+    "data-testid": testId
+  }, children);
+};
+
+var _default = Description;
+exports.default = _default;

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

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _core = require("@emotion/core");
+
+var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
+
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+
+var _chevronUp = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-up"));
+
+var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _components = require("@atlaskit/theme/components");
+
+var _theme = require("../theme");
+
+/** @jsx jsx */
+var gridSize = (0, _constants.gridSize)();
+var borderRadius = (0, _constants.borderRadius)();
+var dismissButtonStyles = (0, _core.css)({
+  marginLeft: gridSize,
+  padding: 0,
+  flex: '0 0 auto',
+  appearance: 'none',
+  background: 'none',
+  border: 'none',
+  borderRadius: borderRadius,
+  cursor: 'pointer',
+  lineHeight: '1',
+  whiteSpace: 'nowrap'
+});
+
+var DismissButton = function DismissButton(_ref) {
+  var appearance = _ref.appearance,
+      onClick = _ref.onClick,
+      isBold = _ref.isBold,
+      isExpanded = _ref.isExpanded,
+      testId = _ref.testId;
+
+  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
+      mode = _useGlobalTheme.mode;
+
+  var ButtonIcon = _cross.default;
+  var buttonLabel = 'Dismiss';
+  var size = 'small';
+  var buttonTestId = testId && "".concat(testId, "-dismiss");
+
+  if (isBold) {
+    ButtonIcon = isExpanded ? _chevronUp.default : _chevronDown.default;
+    buttonLabel = isExpanded ? 'Collapse' : 'Expand';
+    size = 'large';
+    buttonTestId = testId && "".concat(testId, "-toggle");
+  }
+
+  return (0, _core.jsx)(_focusRing.default, null, (0, _core.jsx)("button", {
+    style: {
+      color: (0, _theme.getFlagTextColor)(appearance, mode)
+    },
+    css: dismissButtonStyles,
+    onClick: onClick,
+    "data-testid": buttonTestId,
+    type: "button",
+    "aria-expanded": isBold ? isExpanded : undefined
+  }, (0, _core.jsx)(ButtonIcon, {
+    label: buttonLabel,
+    size: size
+  })));
+};
+
+var _default = /*#__PURE__*/(0, _react.memo)(DismissButton);
+
+exports.default = _default;

package/dist/cjs/{expander.js → internal/expander.js}

@@ -1,23 +1,31 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _core = require("@emotion/core");
 
 var _motion = require("@atlaskit/motion");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _templateObject;
-
+/** @jsx jsx */
 var paddingLeft = (0, _constants.gridSize)() * 5;
+var expanderStyles = (0, _core.css)({
+  display: 'flex',
+  minWidth: 0,
+  maxHeight: 0,
+  padding: "0 0 0 ".concat(paddingLeft, "px"),
+  justifyContent: 'center',
+  flex: '1 1 100%',
+  flexDirection: 'column',
+  transition: "max-height 0.3s"
+});
+var expandedStyles = (0, _core.css)({
+  maxHeight: 150
+});
 
 var Expander = function Expander(_ref) {
   var children = _ref.children,
@@ -28,7 +36,7 @@ var Expander = function Expander(_ref) {
   // the the reveal because we don't know the height of the content.
   return (0, _core.jsx)("div", {
     "aria-hidden": !isExpanded,
-    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        max-height: ", "px;\n        transition: max-height 0.3s;\n        display: flex;\n        flex: 1 1 100%;\n        flex-direction: column;\n        justify-content: center;\n        min-width: 0;\n        padding: 0 0 0 ", "px;\n      "])), isExpanded ? 150 : 0, paddingLeft),
+    css: [expanderStyles, isExpanded && expandedStyles],
     "data-testid": testId && "".concat(testId, "-expander")
   }, (0, _core.jsx)(_motion.ExitingPersistence, {
     appear: true

package/dist/cjs/internal/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Description", {
+  enumerable: true,
+  get: function get() {
+    return _description.default;
+  }
+});
+Object.defineProperty(exports, "DismissButton", {
+  enumerable: true,
+  get: function get() {
+    return _dismissButton.default;
+  }
+});
+Object.defineProperty(exports, "Expander", {
+  enumerable: true,
+  get: function get() {
+    return _expander.default;
+  }
+});
+Object.defineProperty(exports, "Title", {
+  enumerable: true,
+  get: function get() {
+    return _title.default;
+  }
+});
+
+var _title = _interopRequireDefault(require("./title"));
+
+var _description = _interopRequireDefault(require("./description"));
+
+var _expander = _interopRequireDefault(require("./expander"));
+
+var _dismissButton = _interopRequireDefault(require("./dismiss-button"));

package/dist/cjs/internal/title.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@emotion/core");
+
+/** @jsx jsx */
+var titleStyles = (0, _core.css)({
+  padding: "0 0 0 16px",
+  flex: 1,
+  fontWeight: 600,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+
+var Title = function Title(_ref) {
+  var color = _ref.color,
+      children = _ref.children;
+  return (0, _core.jsx)("span", {
+    style: {
+      color: color
+    },
+    css: titleStyles
+  }, children);
+};
+
+var _default = Title;
+exports.default = _default;

package/dist/cjs/theme.js

@@ -3,30 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getActionColor = exports.getActionBackground = exports.getFlagFocusRingColor = exports.flagShadowColor = exports.getFlagIconColor = exports.getFlagTextColor = exports.flagBorderColor = exports.getFlagBackgroundColor = void 0;
+exports.getFlagTextColor = exports.getFlagIconColor = exports.getFlagFocusRingColor = exports.getFlagBackgroundColor = exports.getActionColor = exports.getActionBackground = exports.flagShadowColor = exports.flagBorderColor = void 0;
 
 var _colors = require("@atlaskit/theme/colors");
 
 var flagBackgroundColor = {
   error: {
-    light: "var(--ds-background-overlay, ".concat(_colors.R400, ")"),
-    dark: "var(--ds-background-overlay, ".concat(_colors.R300, ")")
+    light: "var(--ds-surface-overlay, ".concat(_colors.R400, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(_colors.R300, ")")
   },
   info: {
-    light: "var(--ds-background-overlay, ".concat(_colors.N500, ")"),
-    dark: "var(--ds-background-overlay, ".concat(_colors.N500, ")")
+    light: "var(--ds-surface-overlay, ".concat(_colors.N500, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(_colors.N500, ")")
   },
   normal: {
-    light: "var(--ds-background-overlay, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-background-overlay, ".concat(_colors.DN50, ")")
+    light: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(_colors.DN50, ")")
   },
   success: {
-    light: "var(--ds-background-overlay, ".concat(_colors.G400, ")"),
-    dark: "var(--ds-background-overlay, ".concat(_colors.G300, ")")
+    light: "var(--ds-surface-overlay, ".concat(_colors.G400, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(_colors.G300, ")")
   },
   warning: {
-    light: "var(--ds-background-overlay, ".concat(_colors.Y200, ")"),
-    dark: "var(--ds-background-overlay, ".concat(_colors.Y300, ")")
+    light: "var(--ds-surface-overlay, ".concat(_colors.Y200, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(_colors.Y300, ")")
   }
 };
 
@@ -35,50 +35,50 @@ var getFlagBackgroundColor = function getFlagBackgroundColor(appearance, mode) {
 };
 
 exports.getFlagBackgroundColor = getFlagBackgroundColor;
-var flagBorderColor = "var(--ds-background-overlay, ".concat(_colors.N60A, ")");
+var flagBorderColor = "var(--ds-surface-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, ")")
+    light: "var(--ds-icon-danger, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-icon-danger, ".concat(_colors.DN40, ")")
   },
   info: {
-    light: "var(--ds-iconBorder-discovery, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-iconBorder-discovery, ".concat(_colors.DN600, ")")
+    light: "var(--ds-icon-discovery, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-icon-discovery, ".concat(_colors.DN600, ")")
   },
   normal: {
-    light: "var(--ds-iconBorder-brand, ".concat(_colors.N500, ")"),
-    dark: "var(--ds-iconBorder-brand, ".concat(_colors.DN600, ")")
+    light: "var(--ds-icon-brand, ".concat(_colors.N500, ")"),
+    dark: "var(--ds-icon-brand, ".concat(_colors.DN600, ")")
   },
   success: {
-    light: "var(--ds-iconBorder-success, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-iconBorder-success, ".concat(_colors.DN40, ")")
+    light: "var(--ds-icon-success, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-icon-success, ".concat(_colors.DN40, ")")
   },
   warning: {
-    light: "var(--ds-iconBorder-warning, ".concat(_colors.N700, ")"),
-    dark: "var(--ds-iconBorder-warning, ".concat(_colors.DN40, ")")
+    light: "var(--ds-icon-warning, ".concat(_colors.N700, ")"),
+    dark: "var(--ds-icon-warning, ".concat(_colors.DN40, ")")
   }
 };
 var flagTextColor = {
   error: {
-    light: "var(--ds-text-highEmphasis, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-text-highEmphasis, ".concat(_colors.DN40, ")")
+    light: "var(--ds-text, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-text, ".concat(_colors.DN40, ")")
   },
   info: {
-    light: "var(--ds-text-highEmphasis, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-text-highEmphasis, ".concat(_colors.DN600, ")")
+    light: "var(--ds-text, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-text, ".concat(_colors.DN600, ")")
   },
   normal: {
-    light: "var(--ds-text-highEmphasis, ".concat(_colors.N500, ")"),
-    dark: "var(--ds-text-highEmphasis, ".concat(_colors.DN600, ")")
+    light: "var(--ds-text, ".concat(_colors.N500, ")"),
+    dark: "var(--ds-text, ".concat(_colors.DN600, ")")
   },
   success: {
-    light: "var(--ds-text-highEmphasis, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-text-highEmphasis, ".concat(_colors.DN40, ")")
+    light: "var(--ds-text, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-text, ".concat(_colors.DN40, ")")
   },
   warning: {
-    light: "var(--ds-text-highEmphasis, ".concat(_colors.N700, ")"),
-    dark: "var(--ds-text-highEmphasis, ".concat(_colors.DN40, ")")
+    light: "var(--ds-text, ".concat(_colors.N700, ")"),
+    dark: "var(--ds-text, ".concat(_colors.DN40, ")")
   }
 };
 
@@ -99,24 +99,24 @@ var flagShadowColor = _colors.N50A;
 exports.flagShadowColor = flagShadowColor;
 var flagFocusRingColor = {
   error: {
-    light: "var(--ds-border-focus, ".concat(_colors.N40, ")"),
-    dark: "var(--ds-border-focus, ".concat(_colors.N40, ")")
+    light: "var(--ds-border-focused, ".concat(_colors.N40, ")"),
+    dark: "var(--ds-border-focused, ".concat(_colors.N40, ")")
   },
   info: {
-    light: "var(--ds-border-focus, ".concat(_colors.N40, ")"),
-    dark: "var(--ds-border-focus, ".concat(_colors.N40, ")")
+    light: "var(--ds-border-focused, ".concat(_colors.N40, ")"),
+    dark: "var(--ds-border-focused, ".concat(_colors.N40, ")")
   },
   normal: {
-    light: "var(--ds-border-focus, ".concat(_colors.B100, ")"),
-    dark: "var(--ds-border-focus, ".concat(_colors.B100, ")")
+    light: "var(--ds-border-focused, ".concat(_colors.B100, ")"),
+    dark: "var(--ds-border-focused, ".concat(_colors.B100, ")")
   },
   success: {
-    light: "var(--ds-border-focus, ".concat(_colors.N40, ")"),
-    dark: "var(--ds-border-focus, ".concat(_colors.N40, ")")
+    light: "var(--ds-border-focused, ".concat(_colors.N40, ")"),
+    dark: "var(--ds-border-focused, ".concat(_colors.N40, ")")
   },
   warning: {
-    light: "var(--ds-border-focus, ".concat(_colors.N200, ")"),
-    dark: "var(--ds-border-focus, ".concat(_colors.N200, ")")
+    light: "var(--ds-border-focused, ".concat(_colors.N200, ")"),
+    dark: "var(--ds-border-focused, ".concat(_colors.N200, ")")
   }
 };
 
@@ -128,46 +128,46 @@ exports.getFlagFocusRingColor = getFlagFocusRingColor;
 var lightButtonBackground = 'rgba(255, 255, 255, 0.08)';
 var actionBackground = {
   success: {
-    light: "var(--ds-background-subtleNeutral-resting, ".concat(lightButtonBackground, ")"),
-    dark: "var(--ds-background-subtleNeutral-resting, ".concat(_colors.N30A, ")")
+    light: "var(--ds-background-neutral, ".concat(lightButtonBackground, ")"),
+    dark: "var(--ds-background-neutral, ".concat(_colors.N30A, ")")
   },
   info: {
-    light: "var(--ds-background-subtleNeutral-resting, ".concat(lightButtonBackground, ")"),
-    dark: "var(--ds-background-subtleNeutral-resting, ".concat(lightButtonBackground, ")")
+    light: "var(--ds-background-neutral, ".concat(lightButtonBackground, ")"),
+    dark: "var(--ds-background-neutral, ".concat(lightButtonBackground, ")")
   },
   error: {
-    light: "var(--ds-background-subtleNeutral-resting, ".concat(lightButtonBackground, ")"),
-    dark: "var(--ds-background-subtleNeutral-resting, ".concat(_colors.N30A, ")")
+    light: "var(--ds-background-neutral, ".concat(lightButtonBackground, ")"),
+    dark: "var(--ds-background-neutral, ".concat(_colors.N30A, ")")
   },
   warning: {
-    light: "var(--ds-background-subtleNeutral-resting, ".concat(_colors.N30A, ")"),
-    dark: "var(--ds-background-subtleNeutral-resting, ".concat(_colors.N30A, ")")
+    light: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
+    dark: "var(--ds-background-neutral, ".concat(_colors.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)"
   }
 };
 var actionColor = {
   success: {
-    light: "var(--ds-text-mediumEmphasis, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-text-mediumEmphasis, ".concat(_colors.DN40, ")")
+    light: "var(--ds-text-subtle, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-text-subtle, ".concat(_colors.DN40, ")")
   },
   info: {
-    light: "var(--ds-text-mediumEmphasis, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-text-mediumEmphasis, ".concat(_colors.DN600, ")")
+    light: "var(--ds-text-subtle, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-text-subtle, ".concat(_colors.DN600, ")")
   },
   error: {
-    light: "var(--ds-text-mediumEmphasis, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-text-mediumEmphasis, ".concat(_colors.DN600, ")")
+    light: "var(--ds-text-subtle, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-text-subtle, ".concat(_colors.DN600, ")")
   },
   warning: {
-    light: "var(--ds-text-mediumEmphasis, ".concat(_colors.N700, ")"),
-    dark: "var(--ds-text-mediumEmphasis, ".concat(_colors.DN40, ")")
+    light: "var(--ds-text-subtle, ".concat(_colors.N700, ")"),
+    dark: "var(--ds-text-subtle, ".concat(_colors.DN40, ")")
   },
   normal: {
-    light: "var(--ds-text-mediumEmphasis, ".concat(_colors.B400, ")"),
-    dark: "var(--ds-text-mediumEmphasis, ".concat(_colors.B100, ")")
+    light: "var(--ds-text-subtle, ".concat(_colors.B400, ")"),
+    dark: "var(--ds-text-subtle, ".concat(_colors.B100, ")")
   }
 };
 

package/dist/cjs/version.json

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

package/dist/es2019/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';
 const packageName = "@atlaskit/flag";
-const packageVersion = "14.4.2";
+const packageVersion = "14.5.3";
 export const AUTO_DISMISS_SECONDS = 8;
 
-function noop() {}
-
 const AutoDismissFlag = props => {
   const {
     id,

package/dist/es2019/flag-actions.js

@@ -1,3 +1,5 @@
+/* eslint-disable @repo/internal/styles/no-nested-styles */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import Button from '@atlaskit/button/custom-theme-button';
@@ -7,6 +9,46 @@ import { getActionBackground, getActionColor, getFlagFocusRingColor } from './th
 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`,
+    fontWeight: 500
+  },
+  '&&:focus, a&&:focus': {
+    boxShadow: `0 0 0 2px var(--focus-color)`
+  },
+  '&&:hover, &&:active, a&&:hover, a&&:active': {
+    textDecoration: 'underline'
+  }
+});
+const appeanceNormalButtonStyles = css({
+  '&&, a&&': {
+    padding: '0 !important'
+  }
+});
+const isBoldButtonStyles = css({
+  '&&, a&&': {
+    marginLeft: gridSize
+  }
+});
 
 const FlagActions = props => {
   const {
@@ -23,20 +65,10 @@ const FlagActions = props => {
 
   const isBold = appearance !== DEFAULT_APPEARANCE;
   return jsx("div", {
-    css: css`
-        display: flex;
-        flex-wrap: wrap;
-        padding-top: ${gridSize}px;
-        transform: ${appearance === DEFAULT_APPEARANCE ? `translateX(-${defaultAppearanceTranslate}px)` : 0};
-        align-items: center;
-      `,
+    css: [actionContainerStyles, isBold && boldActionContainerStyles],
     "data-testid": testId && `${testId}-actions`
   }, actions.map((action, index) => [index && !isBold ? jsx("div", {
-    css: css`
-              text-align: center;
-              display: inline-block;
-              width: ${separatorWidth}px;
-            `,
+    css: separatorStyles,
     key: index + 0.5
   }, "\xB7") : '', jsx(Button, {
     onClick: action.onClick,
@@ -47,26 +79,12 @@ const FlagActions = props => {
     spacing: "compact",
     testId: action.testId,
     key: index,
-    css: css`
-            &&,
-            a&& {
-              margin-left: ${index && isBold ? gridSize : 0}px;
-              font-weight: 500;
-              padding: 0 ${appearance === 'normal' ? 0 : gridSize}px !important;
-              background: ${getActionBackground(appearance, mode)};
-              color: ${getActionColor(appearance, mode)} !important;
-            }
-            &&:focus,
-            a&&:focus {
-              box-shadow: 0 0 0 2px ${getFlagFocusRingColor(appearance, mode)};
-            }
-            &&:hover,
-            &&:active,
-            a&&:hover,
-            a&&:active {
-              text-decoration: underline;
-            }
-          `
+    style: {
+      '--color': getActionColor(appearance, mode),
+      '--bg-color': getActionBackground(appearance, mode),
+      '--focus-color': getFlagFocusRingColor(appearance, mode)
+    },
+    css: [buttonStyles, isBold && isBoldButtonStyles, appearance === 'normal' && appeanceNormalButtonStyles]
   }, action.content)]));
 };