@atlaskit/button 23.5.3 → 23.6.0

package/dist/cjs/new-button/variants/shared/button-base.compiled.css

@@ -10,9 +10,9 @@
 ._1rjcv77o{padding-block:var(--ds-space-025,2px)}
 ._1tv3nqa1:after{border-style:solid}
 ._39yqe4h9:after{border-width:var(--ds-border-width,1px)}
-._8l3m13gt:after{border-color:var(--ds-border-disabled,#091e420f)}
+._8l3m1l7x:after{border-color:var(--ds-border,#0b120e24)}
+._8l3mbk0g:after{border-color:var(--ds-border-disabled,#0515240f)}
 ._8l3mcoux:after{border-color:var(--ds-border-selected,#0052cc)}
-._8l3mmuej:after{border-color:var(--ds-border,#091e4224)}
 ._11fnglyw:after{pointer-events:none}
 ._152tze3t{inset-block-start:var(--ds-space-0,0)}
 ._18m915vq{overflow-y:hidden}
@@ -39,16 +39,14 @@
 ._80om15jw{cursor:progress}
 ._aetrb3bt:after{content:""}
 ._ajmmnqa1{text-decoration-style:solid}
+._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
 ._bfhk1fvb{background-color:var(--ds-background-disabled,rgba(9,30,66,.04))}
 ._bfhk1g49{background-color:var(--ds-background-selected,#403294)}
 ._bfhk1ikc{background-color:var(--ds-background-warning-bold,#ffab00)}
 ._bfhk1j28{background-color:transparent}
-._bfhk1j54{background-color:var(--ds-background-neutral,rgba(9,30,66,.04))}
 ._bfhk1v7l{background-color:var(--ds-background-danger-bold,#de350b)}
 ._bfhk1vbi{background-color:var(--ds-background-discovery-bold,#5243aa)}
-._bfhk7btw{background-color:var(--ds-background-selected,#253858)}
 ._bfhkbeib{background-color:var(--ds-background-selected,#bf2600)}
-._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
 ._bfhkomb0{background-color:var(--ds-background-brand-bold,#0052cc)}
 ._bfhkqtfy{background-color:var(--ds-background-neutral-subtle,transparent)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
@@ -64,46 +62,40 @@
 ._p12f1osq{max-width:100%}
 ._rjxpze3t{inset-inline-end:var(--ds-space-0,0)}
 ._s7n4nkob{vertical-align:middle}
-._syaz10s3{color:var(--ds-text,#42526e)}
 ._syaz15cr{color:var(--ds-text-inverse,#fff)}
 ._syaz16q2{color:var(--ds-text-selected,#172b4d)}
-._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
+._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
 ._syaz1ldt{color:var(--ds-text-selected,#0052cc)}
-._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
 ._syaz1pke{color:var(--ds-text-selected,#f4f5f7)}
 ._syazal3n{color:var(--ds-text-warning-inverse,#172b4d)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
 ._u7coze3t{inset-block-end:var(--ds-space-0,0)}
 ._vchhusvi{box-sizing:border-box}
 ._y3gn1h6o{text-align:center}
 ._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
 ._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}
 ._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
-._y4tize3t{padding-inline-end:var(--ds-space-0,0)}._105310s3:visited{color:var(--ds-text,#42526e)}
-._105315cr:visited{color:var(--ds-text-inverse,#fff)}
-._10531gjq:visited{color:var(--ds-text-subtle,#44546f)}
+._y4tize3t{padding-inline-end:var(--ds-space-0,0)}._105315cr:visited{color:var(--ds-text-inverse,#fff)}
 ._10531ldt:visited{color:var(--ds-text-selected,#0052cc)}
-._10531pke:visited{color:var(--ds-text-selected,#f4f5f7)}
 ._1053al3n:visited{color:var(--ds-text-warning-inverse,#172b4d)}
+._1053azsu:visited{color:var(--ds-text-subtle,#505258)}
 ._1a3b1r31:focus{text-decoration-color:currentColor}
 ._4fprglyw:focus{text-decoration-line:none}
 ._5goinqa1:focus{text-decoration-style:solid}
-._f8pj10s3:focus{color:var(--ds-text,#42526e)}
 ._f8pj15cr:focus{color:var(--ds-text-inverse,#fff)}
-._f8pj1gjq:focus{color:var(--ds-text-subtle,#44546f)}
 ._f8pj1ldt:focus{color:var(--ds-text-selected,#0052cc)}
-._f8pj1pke:focus{color:var(--ds-text-selected,#f4f5f7)}
 ._f8pjal3n:focus{color:var(--ds-text-warning-inverse,#172b4d)}
+._f8pjazsu:focus{color:var(--ds-text-subtle,#505258)}
 ._g0pbb4wl:focus-visible{z-index:100}
 ._1bnxglyw:hover{text-decoration-line:none}
-._30l310s3:hover{color:var(--ds-text,#42526e)}
 ._30l315cr:hover{color:var(--ds-text-inverse,#fff)}
-._30l31gjq:hover{color:var(--ds-text-subtle,#44546f)}
+._30l31gmx:hover{color:var(--ds-text-disabled,#080f214a)}
 ._30l31ldt:hover{color:var(--ds-text-selected,#0052cc)}
-._30l31lh4:hover{color:var(--ds-text-disabled,#091e424f)}
 ._30l31pke:hover{color:var(--ds-text-selected,#f4f5f7)}
 ._30l3al3n:hover{color:var(--ds-text-warning-inverse,#172b4d)}
+._30l3azsu:hover{color:var(--ds-text-subtle,#505258)}
 ._9oik1r31:hover{text-decoration-color:currentColor}
-._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
 ._irr31fvb:hover{background-color:var(--ds-background-disabled,rgba(9,30,66,.04))}
 ._irr31g49:hover{background-color:var(--ds-background-selected,#403294)}
 ._irr31j28:hover{background-color:transparent}
@@ -115,28 +107,25 @@
 ._irr3beib:hover{background-color:var(--ds-background-selected,#bf2600)}
 ._irr3t71w:hover{background-color:var(--ds-background-selected-hovered,#253858)}
 ._irr3vdtc:hover{background-color:var(--ds-background-selected,#ff991f)}
-._irr3yw9d:hover{background-color:var(--ds-background-neutral-hovered,#091e4214)}
 ._jf4cnqa1:hover{text-decoration-style:solid}
 ._1di617hq:active{background-color:var(--ds-background-brand-bold-pressed,#0747a6)}
 ._1di619qy:active{background-color:var(--ds-background-neutral-subtle-pressed,#b3d4ff)}
-._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
 ._1di61fvb:active{background-color:var(--ds-background-disabled,rgba(9,30,66,.04))}
 ._1di61g49:active{background-color:var(--ds-background-selected,#403294)}
 ._1di61j28:active{background-color:transparent}
 ._1di61wu2:active{background-color:var(--ds-background-discovery-bold-pressed,#5243aa)}
 ._1di6beib:active{background-color:var(--ds-background-selected,#bf2600)}
+._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
 ._1di6h4op:active{background-color:var(--ds-background-warning-bold-pressed,#ff991f)}
-._1di6ih13:active{background-color:var(--ds-background-neutral-pressed,#b3d4ff)}
 ._1di6vdtc:active{background-color:var(--ds-background-selected,#ff991f)}
 ._1di6yssv:active{background-color:var(--ds-background-selected-pressed,#253858)}
 ._1di6yycf:active{background-color:var(--ds-background-danger-bold-pressed,#bf2600)}
 ._1iohnqa1:active{text-decoration-style:solid}
 ._1nrm1r31:active{text-decoration-color:currentColor}
-._9h8h10s3:active{color:var(--ds-text,#42526e)}
 ._9h8h15cr:active{color:var(--ds-text-inverse,#fff)}
-._9h8h1gjq:active{color:var(--ds-text-subtle,#44546f)}
+._9h8h1gmx:active{color:var(--ds-text-disabled,#080f214a)}
 ._9h8h1ldt:active{color:var(--ds-text-selected,#0052cc)}
-._9h8h1lh4:active{color:var(--ds-text-disabled,#091e424f)}
 ._9h8h1pke:active{color:var(--ds-text-selected,#f4f5f7)}
 ._9h8hal3n:active{color:var(--ds-text-warning-inverse,#172b4d)}
+._9h8hazsu:active{color:var(--ds-text-subtle,#505258)}
 ._c2waglyw:active{text-decoration-line:none}

package/dist/cjs/new-button/variants/shared/button-base.js

@@ -16,7 +16,6 @@ var _css2 = require("@atlaskit/css");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
 var _useId = require("@atlaskit/ds-lib/use-id");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _splitButtonContext = require("../../containers/split-button/split-button-context");
@@ -29,7 +28,7 @@ var LOADING_LABEL = ', Loading';
 var styles = {
   base: "_2rkofajl _11c82smr _v5649dqc _189eidpf _1rjc12x7 _1e0c116y _vchhusvi _1bsb1wug _p12f1osq _kqswh2mm _4cvr1q9y _1bah1h6o _gy1p1b66 _1o9zidpf _4t3iviql _k48p1wq8 _y4tiutpp _bozgutpp _y3gn1h6o _s7n4nkob _14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _11fnglyw _18postnw",
   linkDecorationUnset: "_4bfu1r31 _1hmsglyw _ajmmnqa1 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
-  disabled: "_80om13gf _syaz1lh4 _30l31lh4 _9h8h1lh4",
+  disabled: "_80om13gf _syaz1gmx _30l31gmx _9h8h1gmx",
   sharedDisabled: "_bfhk1fvb _irr31fvb _1di61fvb",
   spacingCompact: "_1rjcv77o _gy1p1b66 _4t3i1k8s _y4tiutpp _bozgutpp _s7n4nkob",
   circle: "_2rko1rr0",
@@ -44,11 +43,9 @@ var styles = {
   navigationSplitButton: "_1bsb1tcg _bfhksm61 _y4ti12x7 _bozg12x7"
 };
 var defaultStyles = {
-  root: "_bfhk1j54 _syaz10s3 _105310s3 _f8pj10s3 _30l310s3 _9h8h10s3",
-  rootRefreshed: "_bfhksm61 _syaz1gjq _8l3mmuej _aetrb3bt _10531gjq _f8pj1gjq _30l31gjq _9h8h1gjq",
-  interactive: "_irr3yw9d _30l310s3 _1di6ih13 _9h8h10s3",
-  interactiveRefreshed: "_irr3166n _30l31gjq _1di61dty _9h8h1gjq",
-  disabledRefreshed: "_bfhk1j28 _8l3m13gt _irr31j28 _1di61j28"
+  root: "_bfhksm61 _syazazsu _8l3m1l7x _aetrb3bt _1053azsu _f8pjazsu _30l3azsu _9h8hazsu",
+  interactive: "_irr31dpa _30l3azsu _1di6fcek _9h8hazsu",
+  disabled: "_bfhk1j28 _8l3mbk0g _irr31j28 _1di61j28"
 };
 var primaryStyles = {
   root: "_bfhkomb0 _syaz15cr _105315cr _f8pj15cr _30l315cr _9h8h15cr",
@@ -67,15 +64,12 @@ var discoveryStyles = {
   interactive: "_30l315cr _irr37gr8 _9h8h15cr _1di61wu2"
 };
 var subtleStyles = {
-  root: "_bfhkqtfy _syaz10s3 _105310s3 _f8pj10s3 _30l310s3 _9h8h10s3",
-  rootRefreshed: "_bfhkqtfy _syaz1gjq _10531gjq _f8pj1gjq _30l31gjq _9h8h1gjq",
-  interactive: "_irr34mfv _30l310s3 _1di619qy _9h8h10s3",
-  interactiveRefreshed: "_irr34mfv _30l31gjq _1di619qy _9h8h1gjq",
-  disabledRefreshed: "_bfhk1j28 _8l3m13gt _irr31j28 _1di61j28"
+  root: "_bfhkqtfy _syazazsu _1053azsu _f8pjazsu _30l3azsu _9h8hazsu",
+  interactive: "_irr34mfv _30l3azsu _1di619qy _9h8hazsu",
+  disabled: "_bfhk1j28 _8l3mbk0g _irr31j28 _1di61j28"
 };
 var selectedStyles = {
-  root: "_bfhk7btw _syaz1pke _10531pke _f8pj1pke _30l31pke _9h8h1pke",
-  rootRefreshed: "_bfhkfg4m _syaz1ldt _8l3mcoux _aetrb3bt _10531ldt _f8pj1ldt _30l31ldt _9h8h1ldt",
+  root: "_bfhk15s3 _syaz1ldt _8l3mcoux _aetrb3bt _10531ldt _f8pj1ldt _30l31ldt _9h8h1ldt",
   insideSplitButton: "_1pbycs5v",
   interactive: "_irr3t71w _30l31pke _1di6yssv _9h8h1pke",
   warning: "_bfhkvdtc _syaz16q2 _30l31pke _irr3vdtc _9h8h1pke _1di6vdtc",
@@ -155,7 +149,7 @@ function (_ref, ref) {
   var isSplitButton = Boolean(splitButtonContext);
   var isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
   var isDefaultAppearanceSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) === 'default';
-  var appearance = isDefaultAppearanceSplitButton && (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? 'subtle' : propAppearance || (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || 'default';
+  var appearance = isDefaultAppearanceSplitButton ? 'subtle' : propAppearance || (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || 'default';
   var spacing = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.spacing) || propSpacing;
   var isDisabled = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isDisabled) || propIsDisabled;
   var isInteractive = !isDisabled && !isLoading;
@@ -175,13 +169,13 @@ function (_ref, ref) {
     analyticsContext: analyticsContext,
     role: role,
     ref: (0, _mergeRefs.default)([localRef, ref]),
-    xcss: (0, _css2.cx)(styles.base, appearance === 'default' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultStyles.rootRefreshed : defaultStyles.root), appearance === 'default' && isInteractive && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultStyles.interactiveRefreshed : defaultStyles.interactive), appearance === 'primary' && primaryStyles.root, appearance === 'primary' && isInteractive && primaryStyles.interactive, appearance === 'warning' && warningStyles.root, appearance === 'warning' && isInteractive && warningStyles.interactive, appearance === 'danger' && dangerStyles.root, appearance === 'danger' && isInteractive && dangerStyles.interactive, appearance === 'discovery' && discoveryStyles.root, appearance === 'discovery' && isInteractive && discoveryStyles.interactive, appearance === 'subtle' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? subtleStyles.rootRefreshed : subtleStyles.root), appearance === 'subtle' && isInteractive && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? subtleStyles.interactiveRefreshed : subtleStyles.interactive), styles.linkDecorationUnset, isSelected && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? selectedStyles.rootRefreshed : selectedStyles.root), isSelected && isSplitButton && selectedStyles.insideSplitButton, isSelected && isInteractive && selectedStyles.interactive,
+    xcss: (0, _css2.cx)(styles.base, appearance === 'default' && defaultStyles.root, appearance === 'default' && isInteractive && defaultStyles.interactive, appearance === 'primary' && primaryStyles.root, appearance === 'primary' && isInteractive && primaryStyles.interactive, appearance === 'warning' && warningStyles.root, appearance === 'warning' && isInteractive && warningStyles.interactive, appearance === 'danger' && dangerStyles.root, appearance === 'danger' && isInteractive && dangerStyles.interactive, appearance === 'discovery' && discoveryStyles.root, appearance === 'discovery' && isInteractive && discoveryStyles.interactive, appearance === 'subtle' && subtleStyles.root, appearance === 'subtle' && isInteractive && subtleStyles.interactive, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && isSplitButton && selectedStyles.insideSplitButton, isSelected && isInteractive && selectedStyles.interactive,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'danger' && selectedStyles.danger,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'warning' && selectedStyles.warning,
     // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, isDisabled && (!(0, _platformFeatureFlags.fg)('platform-component-visual-refresh') || appearance !== 'default' && appearance !== 'subtle') && styles.sharedDisabled, isDisabled && appearance === 'default' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultStyles.disabledRefreshed : defaultStyles.disabled), isCircle && !isSplitButton && styles.circle, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, shouldFitContainer && styles.fullWidth, hasIconAfter && styles.buttonIconAfter, isIconButton && styles.iconButton, isIconButton && spacing === 'compact' && styles.iconButtonCompact, isLoading && styles.loading, isSplitButton && styles.splitButton, isNavigationSplitButton && styles.navigationSplitButton),
+    isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, isDisabled && appearance !== 'default' && appearance !== 'subtle' && styles.sharedDisabled, isDisabled && appearance === 'default' && defaultStyles.disabled, isCircle && !isSplitButton && styles.circle, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, shouldFitContainer && styles.fullWidth, hasIconAfter && styles.buttonIconAfter, isIconButton && styles.iconButton, isIconButton && spacing === 'compact' && styles.iconButtonCompact, isLoading && styles.loading, isSplitButton && styles.splitButton, isNavigationSplitButton && styles.navigationSplitButton),
     isDisabled: isEffectivelyDisabled,
     "aria-label": isLoading && ariaLabel && !ariaLabelledBy ? "".concat(ariaLabel, " ").concat(LOADING_LABEL) : ariaLabel,
     "aria-labelledby": isLoading && ariaLabelledBy ? "".concat(ariaLabelledBy, " ").concat(loadingLabelId) : ariaLabelledBy,

package/dist/cjs/old-button/shared/button-base.js

@@ -132,7 +132,7 @@ var ButtonBase = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(prop
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "23.5.2",
+    packageVersion: "0.0.0-development",
     analyticsData: analyticsContext
   });
 

package/dist/cjs/old-button/shared/css.js

@@ -11,8 +11,6 @@ exports.getIconStyle = getIconStyle;
 exports.overlayCss = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _colors = _interopRequireDefault(require("./colors"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var gridSize = 8;
@@ -72,16 +70,16 @@ var defaultAfterStyles = {
 };
 var defaultStyles = {
   background: "var(--ds-background-neutral-subtle, #00000000)",
-  color: "var(--ds-text, #172B4D)",
+  color: "var(--ds-text, #292A2E)",
   '&::after': _objectSpread(_objectSpread({}, defaultAfterStyles), {}, {
     content: '""',
-    borderColor: "var(--ds-border, #091E4224)"
+    borderColor: "var(--ds-border, #0B120E24)"
   }),
   '&:hover': {
-    background: "var(--ds-background-neutral-hovered, #091E4224)"
+    background: "var(--ds-background-neutral-hovered, #0B120E24)"
   },
   '&:active': {
-    background: "var(--ds-background-neutral-pressed, #091E424F)"
+    background: "var(--ds-background-neutral-pressed, #080F214A)"
   },
   '&[data-has-overlay="true"]:not([disabled]):hover': {
     background: "var(--ds-background-neutral-subtle, #00000000)"
@@ -97,38 +95,38 @@ var defaultStyles = {
   }
 };
 var primaryStyles = {
-  background: "var(--ds-background-brand-bold, #0C66E4)",
+  background: "var(--ds-background-brand-bold, #1868DB)",
   color: "var(--ds-text-inverse, #FFFFFF)",
   '&:hover': {
-    background: "var(--ds-background-brand-bold-hovered, #0055CC)"
+    background: "var(--ds-background-brand-bold-hovered, #1558BC)"
   },
   '&:active': {
-    background: "var(--ds-background-brand-bold-pressed, #09326C)"
+    background: "var(--ds-background-brand-bold-pressed, #144794)"
   },
   '&[data-has-overlay="true"]:not([disabled]):hover': {
-    background: "var(--ds-background-brand-bold, #0C66E4)"
+    background: "var(--ds-background-brand-bold, #1868DB)"
   }
 };
 var linkStyles = {
   background: 'transparent',
-  color: "var(--ds-link, #0C66E4)",
+  color: "var(--ds-link, #1868DB)",
   '&:hover': {
-    color: "var(--ds-link, #0C66E4)",
+    color: "var(--ds-link, #1868DB)",
     textDecoration: 'underline'
   },
   '&:active': {
-    color: "var(--ds-link-pressed, #0055CC)",
+    color: "var(--ds-link-pressed, #1558BC)",
     textDecoration: 'underline'
   }
 };
 var subtleStyles = {
   background: 'transparent',
-  color: "var(--ds-text-subtle, #44546F)",
+  color: "var(--ds-text-subtle, #505258)",
   '&:hover': {
-    background: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+    background: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
   },
   '&:active': {
-    background: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+    background: "var(--ds-background-neutral-subtle-pressed, #0B120E24)"
   },
   '&[data-has-overlay="true"]:not([disabled]):hover': {
     background: 'transparent'
@@ -136,29 +134,29 @@ var subtleStyles = {
 };
 var subtleLinkStyles = {
   background: 'transparent',
-  color: "var(--ds-text-subtle, #44546F)",
+  color: "var(--ds-text-subtle, #505258)",
   '&:hover': {
     background: 'transparent',
-    color: "var(--ds-text-subtle, #44546F)",
+    color: "var(--ds-text-subtle, #505258)",
     textDecoration: 'underline'
   },
   '&:active': {
     background: 'transparent',
-    color: "var(--ds-text, #172B4D)",
+    color: "var(--ds-text, #292A2E)",
     textDecoration: 'underline'
   }
 };
 var warningStyles = {
-  background: "var(--ds-background-warning-bold, #F5CD47)",
-  color: "var(--ds-text-warning-inverse, #172B4D)",
+  background: "var(--ds-background-warning-bold, #FBC828)",
+  color: "var(--ds-text-warning-inverse, #292A2E)",
   '&:hover': {
-    background: "var(--ds-background-warning-bold-hovered, #E2B203)"
+    background: "var(--ds-background-warning-bold-hovered, #FCA700)"
   },
   '&:active': {
-    background: "var(--ds-background-warning-bold-pressed, #CF9F02)"
+    background: "var(--ds-background-warning-bold-pressed, #F68909)"
   },
   '&[data-has-overlay="true"]:not([disabled]):hover': {
-    background: "var(--ds-background-warning-bold, #F5CD47)"
+    background: "var(--ds-background-warning-bold, #FBC828)"
   }
 };
 var dangerStyles = {
@@ -168,18 +166,18 @@ var dangerStyles = {
     background: "var(--ds-background-danger-bold-hovered, #AE2E24)"
   },
   '&:active': {
-    background: "var(--ds-background-danger-bold-pressed, #5D1F1A)"
+    background: "var(--ds-background-danger-bold-pressed, #872821)"
   },
   '&[data-has-overlay="true"]:not([disabled]):hover': {
     background: "var(--ds-background-danger-bold, #C9372C)"
   }
 };
 var selectedStyles = {
-  background: "var(--ds-background-selected, #E9F2FF)",
-  color: "var(--ds-text-selected, #0C66E4)",
+  background: "var(--ds-background-selected, #E9F2FE)",
+  color: "var(--ds-text-selected, #1868DB)",
   '&:not([disabled])::after': _objectSpread(_objectSpread({}, defaultAfterStyles), {}, {
     content: '""',
-    borderColor: "var(--ds-border-selected, #0C66E4)"
+    borderColor: "var(--ds-border-selected, #1868DB)"
   })
 };
 var hasOverlayStyles = {
@@ -188,44 +186,13 @@ var hasOverlayStyles = {
     textDecoration: 'none'
   }
 };
-function getColor(_ref) {
-  var group = _ref.group,
-    key = _ref.key,
-    mode = _ref.mode;
-  var rule = group[key] || group.default;
-  return rule[mode];
-}
-function getColors(_ref2) {
-  var appearance = _ref2.appearance,
-    key = _ref2.key,
-    mode = _ref2.mode;
-  return {
-    background: getColor({
-      group: _colors.default.background[appearance],
-      key: key,
-      mode: mode
-    }),
-    // Needing to add !important to overcome specificity issue caused by deprecated AtlaskitThemeProvider
-    color: "".concat(getColor({
-      group: _colors.default.color[appearance],
-      key: key,
-      mode: mode
-    }), " !important")
-  };
-}
-function getCss(_ref3) {
-  var appearance = _ref3.appearance,
-    spacing = _ref3.spacing,
-    mode = _ref3.mode,
-    isSelected = _ref3.isSelected,
-    shouldFitContainer = _ref3.shouldFitContainer,
-    isOnlySingleIcon = _ref3.isOnlySingleIcon;
-  var baseColors = getColors({
-    appearance: appearance,
-    key: isSelected ? 'selected' : 'default',
-    mode: mode
-  });
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+function getCss(_ref) {
+  var appearance = _ref.appearance,
+    spacing = _ref.spacing,
+    isSelected = _ref.isSelected,
+    shouldFitContainer = _ref.shouldFitContainer,
+    isOnlySingleIcon = _ref.isOnlySingleIcon;
+  return _objectSpread(_objectSpread({
     // 0px margin added to css-reset
     alignItems: 'baseline',
     borderWidth: 0,
@@ -244,8 +211,7 @@ function getCss(_ref3) {
     textAlign: 'center',
     textDecoration: 'none',
     transition: 'background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
-    whiteSpace: 'nowrap'
-  }, !(0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && baseColors), {}, {
+    whiteSpace: 'nowrap',
     cursor: 'pointer',
     height: heights[spacing],
     lineHeight: lineHeights[spacing],
@@ -254,69 +220,20 @@ function getCss(_ref3) {
     width: shouldFitContainer ? '100%' : 'auto',
     // justifyContent required for shouldFitContainer buttons with an icon inside
     justifyContent: 'center'
-  }, !(0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && _objectSpread(_objectSpread({
-    // Disabling visited styles (just using the base colors)
-    '&:visited': _objectSpread({}, baseColors),
-    '&:hover': _objectSpread(_objectSpread({}, getColors({
-      appearance: appearance,
-      key: isSelected ? 'selected' : 'hover',
-      mode: mode
-    })), {}, {
-      textDecoration: !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? 'underline' : 'inherit',
-      // background, box-shadow
-      transitionDuration: '0s, 0.15s'
-    }),
-    // giving active styles preference by listing them after focus
-    '&:active': _objectSpread(_objectSpread({}, getColors({
-      appearance: appearance,
-      key: isSelected ? 'selected' : 'active',
-      mode: mode
-    })), {}, {
-      // background, box-shadow
-      transitionDuration: '0s, 0s'
-    }),
-    // preventDefault prevents regular active styles from applying in Firefox
-    '&[data-firefox-is-active="true"]': _objectSpread(_objectSpread({}, getColors({
-      appearance: appearance,
-      key: isSelected ? 'selected' : 'active',
-      mode: mode
-    })), {}, {
-      // background, box-shadow
-      transitionDuration: '0s, 0s'
-    }),
-    // Giving disabled styles preference over active by listing them after.
-    // Not using '&:disabled' because :disabled is not a valid state for all element types
-    // so we are targeting the attribute
-    // Attributes have the same specificity a pseudo classes so we are overriding :disabled here
-    '&[disabled]': _objectSpread(_objectSpread({}, getColors({
-      appearance: appearance,
-      key: 'disabled',
-      mode: mode
-    })), {}, {
-      cursor: 'not-allowed',
-      textDecoration: 'none'
-    })
-  }, hasOverlayStyles), {}, {
-    // disabling hover and active color changes when there is an overlay, but the button is not disabled
-    '&[data-has-overlay="true"]:not([disabled]):hover, &[data-has-overlay="true"]:not([disabled]):active': _objectSpread({}, getColors({
-      appearance: appearance,
-      key: isSelected ? 'selected' : 'default',
-      mode: mode
-    }))
-  })), (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && (isSelected ? selectedStyles : _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, appearance === 'default' && defaultStyles), appearance === 'primary' && primaryStyles), appearance === 'link' && linkStyles), appearance === 'subtle' && subtleStyles), appearance === 'subtle-link' && subtleLinkStyles), appearance === 'warning' && warningStyles), appearance === 'danger' && dangerStyles), {}, {
+  }, isSelected ? selectedStyles : _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, appearance === 'default' && defaultStyles), appearance === 'primary' && primaryStyles), appearance === 'link' && linkStyles), appearance === 'subtle' && subtleStyles), appearance === 'subtle-link' && subtleLinkStyles), appearance === 'warning' && warningStyles), appearance === 'danger' && dangerStyles), {}, {
     '&[disabled]': {
-      color: "var(--ds-text-disabled, #091E424F)",
-      backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #091E4208)" : 'transparent',
+      color: "var(--ds-text-disabled, #080F214A)",
+      backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #17171708)" : 'transparent',
       cursor: 'not-allowed',
       textDecoration: 'none',
       '&:hovered': {
-        backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #091E4208)" : 'transparent'
+        backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #17171708)" : 'transparent'
       },
       '&:active': {
-        backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #091E4208)" : 'transparent'
+        backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #17171708)" : 'transparent'
       }
     }
-  }, hasOverlayStyles))), {}, {
+  }, hasOverlayStyles)), {}, {
     '&::-moz-focus-inner': {
       border: 0,
       margin: 0,
@@ -326,8 +243,8 @@ function getCss(_ref3) {
 }
 
 // inline-flex child
-function getIconStyle(_ref4) {
-  var spacing = _ref4.spacing;
+function getIconStyle(_ref2) {
+  var spacing = _ref2.spacing;
   return (0, _react.css)({
     display: 'flex',
     // icon size cannot grow and shrink
@@ -345,8 +262,8 @@ function getIconStyle(_ref4) {
 }
 
 // inline-flex child
-function getContentStyle(_ref5) {
-  var spacing = _ref5.spacing;
+function getContentStyle(_ref3) {
+  var spacing = _ref3.spacing;
   return (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     margin: spacing === 'none' ? 0 : innerMargin.content,
@@ -359,8 +276,8 @@ function getContentStyle(_ref5) {
     whiteSpace: 'nowrap'
   });
 }
-function getFadingCss(_ref6) {
-  var hasOverlay = _ref6.hasOverlay;
+function getFadingCss(_ref4) {
+  var hasOverlay = _ref4.hasOverlay;
   return (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     opacity: hasOverlay ? 0 : 1,

package/dist/es2019/new-button/containers/split-button/split-button.compiled.css

@@ -2,8 +2,8 @@
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
 ._195g1h5n{margin-inline:-.03125rem}
 ._195g1n1a{margin-inline:-1px}
-._1mouu2gc{margin-block:var(--ds-space-100,8px)}._12ji13gt{outline-color:var(--ds-border-disabled,#091e420f)}
-._12jimuej{outline-color:var(--ds-border,#091e4224)}
+._1mouu2gc{margin-block:var(--ds-space-100,8px)}._12ji1l7x{outline-color:var(--ds-border,#0b120e24)}
+._12jibk0g{outline-color:var(--ds-border-disabled,#0515240f)}
 ._12y3t94y{outline-width:1px}
 ._1553idpf button{border-end-start-radius:0}
 ._1bsbe4h9{width:var(--ds-border-width,1px)}
@@ -22,18 +22,14 @@
 ._80om13gf{cursor:not-allowed}
 ._anlpidpf button{border-end-end-radius:0}
 ._bepvidpf button{border-start-end-radius:0}
-._bfhk15cr{background-color:var(--ds-text-inverse,#fff)}
-._bfhk1fxt{background-color:var(--ds-text,#172b4d)}
 ._bfhk9xzm{background-color:var(--ds-border-disabled,#091e4224)}
 ._bfhkdud1{background-color:var(--ds-text-subtle,#0052cc)}
 ._bfhkmuej{background-color:var(--ds-border,#091e4224)}
-._bfhkojnm{background-color:var(--ds-text-disabled,#091e4224)}
 ._bfhkveue{background-color:var(--ds-border-inverse,#fff)}
 ._kqswh2mm{position:relative}
 ._o5721q9c{white-space:nowrap}
 ._p9ykidpf a{border-start-end-radius:0}
 ._traeidpf a{border-end-end-radius:0}
 ._tzy419lr{opacity:.62}
-._tzy41uwv{opacity:.51}
 ._tzy41wzo{opacity:.64}
 ._y1n3idpf button{border-start-start-radius:0}

package/dist/es2019/new-button/containers/split-button/split-button.js

@@ -2,21 +2,14 @@
 import "./split-button.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { fg } from '@atlaskit/platform-feature-flags';
 import { SplitButtonContext } from './split-button-context';
 import { getActions } from './utils';
 const dividerStyles = {
   baseDivider: "_1bsbe4h9 _kqswh2mm _1pbykb7n",
-  dividerDisabled: "_bfhkojnm _80om13gf _tzy41uwv",
-  dividerDisabledRefreshed: "_bfhk9xzm _80om13gf",
-  dividerOffsetRefreshed: "_195g1n1a"
+  dividerDisabled: "_bfhk9xzm _80om13gf",
+  dividerOffset: "_195g1n1a"
 };
 const dividerAppearanceStyles = {
-  default: "_bfhk1fxt _tzy41uwv",
-  primary: "_bfhk15cr _tzy41wzo",
-  navigation: "_1mouu2gc _195g1h5n _4t3i7vkz _bfhkdud1 _tzy419lr"
-};
-const dividerRefreshedAppearanceStyles = {
   default: "_bfhkmuej",
   primary: "_bfhkveue _tzy41wzo",
   navigation: "_1mouu2gc _195g1h5n _4t3i7vkz _bfhkdud1 _tzy419lr"
@@ -41,17 +34,17 @@ export const Divider = ({
   spacing,
   isDisabled = false
 }) => {
-  const isDefaultDivider = appearance === 'default' && !isDisabled && fg('platform-component-visual-refresh');
+  const isDefaultDivider = appearance === 'default' && !isDisabled;
   return /*#__PURE__*/React.createElement("div", {
-    className: ax([dividerStyles.baseDivider, isDefaultDivider && defaultDividerHeightStyles[spacing], !isDefaultDivider && dividerHeightStyles[spacing], isDisabled && fg('platform-component-visual-refresh') && dividerStyles.dividerDisabledRefreshed, isDisabled && !fg('platform-component-visual-refresh') && dividerStyles.dividerDisabled, !isDisabled && fg('platform-component-visual-refresh') && dividerRefreshedAppearanceStyles[appearance], !isDisabled && !fg('platform-component-visual-refresh') && dividerAppearanceStyles[appearance], fg('platform-component-visual-refresh') && dividerStyles.dividerOffsetRefreshed])
+    className: ax([dividerStyles.baseDivider, isDefaultDivider && defaultDividerHeightStyles[spacing], !isDefaultDivider && dividerHeightStyles[spacing], isDisabled && dividerStyles.dividerDisabled, !isDisabled && dividerAppearanceStyles[appearance], dividerStyles.dividerOffset])
   });
 };
 const buttonStyles = {
   splitButton: "_1e0c116y _kqswh2mm _4cvr1h6o _o5721q9c",
   primaryButton: "_traeidpf _anlpidpf _p9ykidpf _bepvidpf",
   secondaryButton: "_1j4hidpf _1553idpf _1qgbidpf _y1n3idpf",
-  defaultAppearanceContainer: "_2rkofajl _12jimuej _1cwg1n1a _1qu2nqa1 _12y3t94y",
-  defaultAppearanceDisabledContainer: "_12ji13gt"
+  defaultAppearanceContainer: "_2rkofajl _12ji1l7x _1cwg1n1a _1qu2nqa1 _12y3t94y",
+  defaultAppearanceDisabledContainer: "_12jibk0g"
 };
 
 /**
@@ -63,7 +56,7 @@ export const SplitButtonContainer = ({
   isDisabled = false
 }) => {
   return /*#__PURE__*/React.createElement("div", {
-    className: ax([appearance === 'default' && fg('platform-component-visual-refresh') && buttonStyles.defaultAppearanceContainer, appearance === 'default' && isDisabled && fg('platform-component-visual-refresh') && buttonStyles.defaultAppearanceDisabledContainer, buttonStyles.splitButton])
+    className: ax([appearance === 'default' && buttonStyles.defaultAppearanceContainer, appearance === 'default' && isDisabled && buttonStyles.defaultAppearanceDisabledContainer, buttonStyles.splitButton])
   }, children);
 };