@atlaskit/button 23.5.3 → 23.6.0

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

@@ -3,8 +3,6 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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) { _defineProperty(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
 import { css } from '@emotion/react';
-import { fg } from '@atlaskit/platform-feature-flags';
-import colors from './colors';
 var gridSize = 8;
 var HAS_DISABLED_BACKGROUND = ['default', 'primary', 'danger', 'warning'];
 
@@ -62,16 +60,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)"
@@ -87,38 +85,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'
@@ -126,29 +124,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 = {
@@ -158,18 +156,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 = {
@@ -178,44 +176,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.background[appearance],
-      key: key,
-      mode: mode
-    }),
-    // Needing to add !important to overcome specificity issue caused by deprecated AtlaskitThemeProvider
-    color: "".concat(getColor({
-      group: colors.color[appearance],
-      key: key,
-      mode: mode
-    }), " !important")
-  };
-}
-export 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({
+export 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,
@@ -234,8 +201,7 @@ export 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'
-  }, !fg('platform-component-visual-refresh') && baseColors), {}, {
+    whiteSpace: 'nowrap',
     cursor: 'pointer',
     height: heights[spacing],
     lineHeight: lineHeights[spacing],
@@ -244,69 +210,20 @@ export function getCss(_ref3) {
     width: shouldFitContainer ? '100%' : 'auto',
     // justifyContent required for shouldFitContainer buttons with an icon inside
     justifyContent: 'center'
-  }, !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
-    }))
-  })), 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,
@@ -316,8 +233,8 @@ export function getCss(_ref3) {
 }
 
 // inline-flex child
-export function getIconStyle(_ref4) {
-  var spacing = _ref4.spacing;
+export function getIconStyle(_ref2) {
+  var spacing = _ref2.spacing;
   return css({
     display: 'flex',
     // icon size cannot grow and shrink
@@ -335,8 +252,8 @@ export function getIconStyle(_ref4) {
 }
 
 // inline-flex child
-export function getContentStyle(_ref5) {
-  var spacing = _ref5.spacing;
+export function getContentStyle(_ref3) {
+  var spacing = _ref3.spacing;
   return css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     margin: spacing === 'none' ? 0 : innerMargin.content,
@@ -349,8 +266,8 @@ export function getContentStyle(_ref5) {
     whiteSpace: 'nowrap'
   });
 }
-export function getFadingCss(_ref6) {
-  var hasOverlay = _ref6.hasOverlay;
+export function getFadingCss(_ref4) {
+  var hasOverlay = _ref4.hasOverlay;
   return css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     opacity: hasOverlay ? 0 : 1,

package/dist/types/old-button/shared/css.d.ts

@@ -9,7 +9,7 @@ type GetCssArgs = {
     shouldFitContainer: boolean;
     isOnlySingleIcon: boolean;
 };
-export declare function getCss({ appearance, spacing, mode, isSelected, shouldFitContainer, isOnlySingleIcon, }: GetCssArgs): CSSObject;
+export declare function getCss({ appearance, spacing, isSelected, shouldFitContainer, isOnlySingleIcon, }: GetCssArgs): CSSObject;
 export declare function getIconStyle({ spacing }: {
     spacing: Spacing;
 }): import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/old-button/shared/css.d.ts

@@ -9,7 +9,7 @@ type GetCssArgs = {
     shouldFitContainer: boolean;
     isOnlySingleIcon: boolean;
 };
-export declare function getCss({ appearance, spacing, mode, isSelected, shouldFitContainer, isOnlySingleIcon, }: GetCssArgs): CSSObject;
+export declare function getCss({ appearance, spacing, isSelected, shouldFitContainer, isOnlySingleIcon, }: GetCssArgs): CSSObject;
 export declare function getIconStyle({ spacing }: {
     spacing: Spacing;
 }): import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/button",
-	"version": "23.5.3",
+	"version": "23.6.0",
 	"description": "A button triggers an event or action. They let users know what will happen next.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -76,16 +76,16 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/css": "^0.15.0",
-		"@atlaskit/ds-lib": "^5.1.0",
+		"@atlaskit/ds-lib": "^5.2.0",
 		"@atlaskit/focus-ring": "^3.0.0",
 		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/interaction-context": "^3.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^16.0.0",
+		"@atlaskit/primitives": "^16.1.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tokens": "^7.0.0",
-		"@atlaskit/tooltip": "^20.5.0",
+		"@atlaskit/tokens": "^8.0.0",
+		"@atlaskit/tooltip": "^20.8.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6",
@@ -106,12 +106,12 @@
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/logo": "^19.9.0",
-		"@atlaskit/modal-dialog": "^14.5.0",
-		"@atlaskit/section-message": "^8.7.0",
+		"@atlaskit/modal-dialog": "^14.6.0",
+		"@atlaskit/section-message": "^8.9.0",
 		"@atlaskit/select": "^21.3.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/toggle": "^15.1.0",
-		"@atlassian/ssr-tests": "^0.3.0",
+		"@atlassian/ssr-tests": "workspace:^",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^14.4.3",
 		"ast-types": "^0.13.3",
@@ -121,9 +121,6 @@
 	},
 	"homepage": "https://atlassian.design/components/button/",
 	"platform-feature-flags": {
-		"platform-component-visual-refresh": {
-			"type": "boolean"
-		},
 		"platform_dst_button_chevron_sizing": {
 			"type": "boolean"
 		}