@atlaskit/button 17.16.0 → 17.17.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/button
 
+## 17.17.1
+
+### Patch Changes
+
+-   [#103760](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103760)
+    [`53958b31d2e7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/53958b31d2e7) -
+    Legacy buttons are now marked with intent to deprecate in favor of new buttons
+
+## 17.17.0
+
+### Minor Changes
+
+-   [#102849](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102849)
+    [`36d7498311be`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/36d7498311be) -
+    We are testing an internal change to typography behind a feature flag. If this change is
+    successful it will be available in a later release.
+
 ## 17.16.0
 
 ### Minor Changes
@@ -288,12 +305,12 @@ See new features for new exports and entrypoint ⤵
 
 New Button goes open beta!
 
-Check out the exports under `@atlaskit/button/new` and the
-[docs](/components/button/button-new/examples) for our new approach.
+Check out the exports under `@atlaskit/button/new` and the [docs](/components/button/examples) for
+our new approach.
 
 ##### Button
 
-[Read the docs here.](/components/button/button-new/examples)
+[Read the docs here.](/components/button/examples)
 
 ```js
 import Button from '@atlaskit/button/new';

package/__perf__/utils/interaction-tasks.tsx

@@ -1,7 +1,7 @@
 import { fireEvent } from '@testing-library/react';
 import {
-  InteractionTaskArgs,
-  PublicInteractionTask,
+  type InteractionTaskArgs,
+  type PublicInteractionTask,
 } from 'storybook-addon-performance';
 
 export const interactionTasks: PublicInteractionTask[] = [

package/codemods/15.0.0-lite-mode.tsx

@@ -1,10 +1,10 @@
-import { API, FileInfo, Options } from 'jscodeshift';
-import { Collection } from 'jscodeshift/src/Collection';
+import { type API, type FileInfo, type Options } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
 
 import { changeType, transformButton } from './helpers/15.0.0-runner';
 import {
   getDefaultSpecifierName,
-  Nullable,
+  type Nullable,
   shiftDefaultImport,
 } from './helpers/helpers-generic';
 

package/codemods/15.1.1-data-testid.tsx

@@ -1,12 +1,12 @@
-import core, { API, FileInfo, Options } from 'jscodeshift';
-import { Collection } from 'jscodeshift/src/Collection';
+import type { API, default as core, FileInfo, Options } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
 
 import {
   addCommentToStartOfFile,
   getDefaultSpecifierName,
   getJSXAttributesByName,
   hasImportDeclaration,
-  Nullable,
+  type Nullable,
 } from './helpers/helpers-generic';
 const relevantEntryPoints = [
   '@atlaskit/button',

package/codemods/__tests__/_framework.tsx

@@ -1,4 +1,4 @@
-import { API, FileInfo, Options } from 'jscodeshift';
+import { type API, type FileInfo, type Options } from 'jscodeshift';
 
 import noop from '@atlaskit/ds-lib/noop';
 

package/codemods/helpers/15.0.0-runner.tsx

@@ -1,6 +1,6 @@
-import { NodePath } from 'ast-types/lib/node-path';
-import core, { FileInfo, JSXElement } from 'jscodeshift';
-import { Collection } from 'jscodeshift/src/Collection';
+import { type NodePath } from 'ast-types/lib/node-path';
+import type { default as core, FileInfo, JSXElement } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
 
 import {
   addToImport,

package/codemods/helpers/helpers-generic.tsx

@@ -1,6 +1,7 @@
-import { NodePath } from 'ast-types/lib/node-path';
-import core, {
+import { type NodePath } from 'ast-types/lib/node-path';
+import type {
   ASTPath,
+  default as core,
   ImportDeclaration,
   ImportDefaultSpecifier,
   ImportSpecifier,
@@ -9,7 +10,7 @@ import core, {
   Node,
   Program,
 } from 'jscodeshift';
-import { Collection } from 'jscodeshift/src/Collection';
+import { type Collection } from 'jscodeshift/src/Collection';
 
 export type Nullable<T> = T | null;
 

package/codemods/optimistic-15.0.0-lite-mode.tsx

@@ -1,6 +1,13 @@
-import { NodePath } from 'ast-types/lib/node-path';
-import core, { API, FileInfo, JSXElement, Node, Options } from 'jscodeshift';
-import { Collection } from 'jscodeshift/src/Collection';
+import { type NodePath } from 'ast-types/lib/node-path';
+import type {
+  API,
+  default as core,
+  FileInfo,
+  JSXElement,
+  Node,
+  Options,
+} from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
 
 import { convertButtonType, transformButton } from './helpers/15.0.0-runner';
 import {
@@ -13,7 +20,7 @@ import {
   isOnlyUsingNameForJSX,
   isUsingProp,
   isUsingSupportedSpread,
-  Nullable,
+  type Nullable,
   tryCreateImport,
 } from './helpers/helpers-generic';
 

package/dist/cjs/new-button/variants/default/link.js

@@ -109,9 +109,9 @@ var WithRef = /*#__PURE__*/(0, _react.forwardRef)(LinkButtonBase);
  *
  * Renders a link in the style of a button.
  *
- * - [Examples](https://atlassian.design/components/button/examples)
- * - [Code](https://atlassian.design/components/button/code)
- * - [Usage](https://atlassian.design/components/button/usage)
+ * - [Examples](https://atlassian.design/components/link-button/examples)
+ * - [Code](https://atlassian.design/components/link-button/code)
+ * - [Usage](https://atlassian.design/components/link-button/usage)
  */
 var LinkButton = /*#__PURE__*/(0, _react.memo)(WithRef);
 var _default = exports.default = LinkButton;

package/dist/cjs/new-button/variants/icon/button.js

@@ -17,9 +17,9 @@ var _excluded = ["aria-label", "analyticsContext", "appearance", "autoFocus", "i
  *
  * TODO: Description
  *
- * - [Examples](https://atlassian.design/components/button/examples)
- * - [Code](https://atlassian.design/components/button/code)
- * - [Usage](https://atlassian.design/components/button/usage)
+ * - [Examples](https://atlassian.design/components/icon-button/examples)
+ * - [Code](https://atlassian.design/components/icon-button/code)
+ * - [Usage](https://atlassian.design/components/icon-button/usage)
  */
 var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function Button(_ref, ref) {
   var preventedAriaLabel = _ref['aria-label'],

package/dist/cjs/new-button/variants/icon/link.js

@@ -203,9 +203,9 @@ var WithRef = /*#__PURE__*/(0, _react.forwardRef)(LinkIconButtonBase);
  *
  * Renders a link in the style of an icon button.
  *
- * - [Examples](https://atlassian.design/components/button/examples)
- * - [Code](https://atlassian.design/components/button/code)
- * - [Usage](https://atlassian.design/components/button/usage)
+ * - [Examples](https://atlassian.design/components/link-icon-button/examples)
+ * - [Code](https://atlassian.design/components/link-icon-button/code)
+ * - [Usage](https://atlassian.design/components/link-icon-button/usage)
  */
 var LinkIconButton = /*#__PURE__*/(0, _react.memo)(WithRef);
 var _default = exports.default = LinkIconButton;

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

@@ -10,6 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _constants = require("@atlaskit/theme/constants");
@@ -35,13 +36,7 @@ var buttonStyles = (0, _primitives.xcss)({
   // @ts-expect-error
   color: "var(--ds-text, ".concat(colors.N500, ")"),
   flexShrink: 0,
-  fontFamily: 'inherit',
-  fontSize: 'inherit',
-  fontStyle: 'normal',
-  fontWeight: 500,
   height: "".concat(32 / fontSize, "em"),
-  lineHeight: "".concat(32 / fontSize, "em"),
-  paddingBlock: 'space.0',
   paddingInlineEnd: 'space.150',
   paddingInlineStart: 'space.150',
   textAlign: 'center',
@@ -52,6 +47,19 @@ var buttonStyles = (0, _primitives.xcss)({
     color: "var(--ds-text, ".concat(colors.N500, ")")
   }
 });
+var baseButtonStyles = (0, _primitives.xcss)({
+  fontFamily: 'inherit',
+  fontSize: 'inherit',
+  fontStyle: 'normal',
+  fontWeight: 500,
+  lineHeight: "".concat(32 / fontSize, "em"),
+  paddingBlock: 'space.0'
+});
+var tokenizedButtonStyles = (0, _primitives.xcss)({
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-medium, 500)",
+  paddingBlock: 'space.075'
+});
 var defaultInteractiveStyles = (0, _primitives.xcss)({
   ':hover': {
     background: "var(--ds-background-neutral-hovered, #091e4214)",
@@ -315,11 +323,16 @@ var selectedDiscoveryStyles = (0, _primitives.xcss)({
 var spacingCompactStyles = (0, _primitives.xcss)({
   columnGap: 'space.050',
   height: "".concat(24 / fontSize, "em"),
-  lineHeight: "".concat(24 / fontSize, "em"),
   paddingInlineEnd: 'space.150',
   paddingInlineStart: 'space.150',
   verticalAlign: 'middle'
 });
+var baseSpacingCompactStyles = (0, _primitives.xcss)({
+  lineHeight: "".concat(24 / fontSize, "em")
+});
+var tokenizedSpacingCompactStyles = (0, _primitives.xcss)({
+  paddingBlock: 'space.025'
+});
 var spacingNoneStyles = (0, _primitives.xcss)({
   columnGap: 'space.0',
   height: 'auto',
@@ -328,6 +341,9 @@ var spacingNoneStyles = (0, _primitives.xcss)({
   paddingInlineStart: 'space.0',
   verticalAlign: 'baseline'
 });
+var tokenizedSpacingNoneStyles = (0, _primitives.xcss)({
+  paddingBlock: 'space.0'
+});
 var circleStyles = (0, _primitives.xcss)({
   borderRadius: 'border.radius.circle'
 });
@@ -440,13 +456,13 @@ var useButtonBase = function useButtonBase(_ref) {
   (0, _useAutoFocus.default)(localRef, autoFocus);
   return _objectSpread({
     ref: (0, _mergeRefs.default)([localRef, ref]),
-    xcss: [buttonStyles, appearance === 'default' && isInteractive && defaultInteractiveStyles, appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && subtleStyles, appearance === 'subtle' && isInteractive && subtleInteractiveStyles, appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && selectedStyles, isSelected && isInteractive && selectedInteractiveStyles,
+    xcss: [(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : baseButtonStyles, buttonStyles, appearance === 'default' && isInteractive && defaultInteractiveStyles, appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && subtleStyles, appearance === 'subtle' && isInteractive && subtleInteractiveStyles, appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && selectedStyles, isSelected && isInteractive && selectedInteractiveStyles,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'danger' && selectedDangerStyles,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'warning' && selectedWarningStyles,
     // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'none' && spacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingOverlayStyles, (isDisabled || hasOverlay && !isLoading) && nonInteractiveStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
+    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'compact' && ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedSpacingCompactStyles : baseSpacingCompactStyles), spacing === 'none' && spacingNoneStyles, spacing === 'none' && (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.button-tokenised-typography-styles') && tokenizedSpacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingOverlayStyles, (isDisabled || hasOverlay && !isLoading) && nonInteractiveStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
     // Consider overlay buttons to be effectively disabled
     isDisabled: isEffectivelyDisabled,
     children: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, children, overlay ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {

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

@@ -22,11 +22,13 @@ var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerC
 /**
  * __Button__
  *
+ * CAUTION: Legacy buttons will soon be deprecated. Please use the new Button components from `@atlaskit/button/new`.
+ *
  * A button triggers an event or action. They let users know what will happen next.
  *
- * - [Examples](https://atlassian.design/components/button/examples)
- * - [Code](https://atlassian.design/components/button/code)
- * - [Usage](https://atlassian.design/components/button/usage)
+ * - [Examples](https://atlassian.design/components/button/button-legacy/examples)
+ * - [Code](https://atlassian.design/components/button/button-legacy/code)
+ * - [Usage](https://atlassian.design/components/button/button-legacy/usage)
  */
 var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function Button(_ref, ref) {
   var _ref$appearance = _ref.appearance,

package/dist/cjs/old-button/loading-button.js

@@ -14,6 +14,8 @@ var _excluded = ["appearance", "isDisabled", "isSelected", "isLoading", "spacing
 /**
  * __Loading button__
  *
+ * CAUTION: Legacy loading buttons will soon be deprecated. Please use the new Button components from `@atlaskit/button/new` with the `isLoading` prop.
+ *
  * A small wrapper around Button that allows you to show an @atlaskit/spinner as an overlay on the button when you set an isLoading prop to true.
  *
  * - [Examples](https://atlassian.design/components/button/examples#loading-button)

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

@@ -129,7 +129,7 @@ var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(function
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.16.0",
+    packageVersion: "17.17.1",
     analyticsData: analyticsContext
   });
 

package/dist/es2019/new-button/variants/default/link.js

@@ -98,9 +98,9 @@ const WithRef = /*#__PURE__*/forwardRef(LinkButtonBase);
  *
  * Renders a link in the style of a button.
  *
- * - [Examples](https://atlassian.design/components/button/examples)
- * - [Code](https://atlassian.design/components/button/code)
- * - [Usage](https://atlassian.design/components/button/usage)
+ * - [Examples](https://atlassian.design/components/link-button/examples)
+ * - [Code](https://atlassian.design/components/link-button/code)
+ * - [Usage](https://atlassian.design/components/link-button/usage)
  */
 const LinkButton = /*#__PURE__*/memo(WithRef);
 export default LinkButton;

package/dist/es2019/new-button/variants/icon/button.js

@@ -8,9 +8,9 @@ import useIconButton from './use-icon-button';
  *
  * TODO: Description
  *
- * - [Examples](https://atlassian.design/components/button/examples)
- * - [Code](https://atlassian.design/components/button/code)
- * - [Usage](https://atlassian.design/components/button/usage)
+ * - [Examples](https://atlassian.design/components/icon-button/examples)
+ * - [Code](https://atlassian.design/components/icon-button/code)
+ * - [Usage](https://atlassian.design/components/icon-button/usage)
  */
 const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button({
   // Prevent duplicate labels being added.

package/dist/es2019/new-button/variants/icon/link.js

@@ -190,9 +190,9 @@ const WithRef = /*#__PURE__*/forwardRef(LinkIconButtonBase);
  *
  * Renders a link in the style of an icon button.
  *
- * - [Examples](https://atlassian.design/components/button/examples)
- * - [Code](https://atlassian.design/components/button/code)
- * - [Usage](https://atlassian.design/components/button/usage)
+ * - [Examples](https://atlassian.design/components/link-icon-button/examples)
+ * - [Code](https://atlassian.design/components/link-icon-button/code)
+ * - [Usage](https://atlassian.design/components/link-icon-button/usage)
  */
 const LinkIconButton = /*#__PURE__*/memo(WithRef);
 export default LinkIconButton;

package/dist/es2019/new-button/variants/shared/use-button-base.js

@@ -1,6 +1,7 @@
 import React, { Fragment, useRef } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import * as colors from '@atlaskit/theme/colors';
 import { fontSize as getFontSize } from '@atlaskit/theme/constants';
@@ -22,13 +23,7 @@ const buttonStyles = xcss({
   // @ts-expect-error
   color: `var(--ds-text, ${colors.N500})`,
   flexShrink: 0,
-  fontFamily: 'inherit',
-  fontSize: 'inherit',
-  fontStyle: 'normal',
-  fontWeight: 500,
   height: `${32 / fontSize}em`,
-  lineHeight: `${32 / fontSize}em`,
-  paddingBlock: 'space.0',
   paddingInlineEnd: 'space.150',
   paddingInlineStart: 'space.150',
   textAlign: 'center',
@@ -39,6 +34,19 @@ const buttonStyles = xcss({
     color: `var(--ds-text, ${colors.N500})`
   }
 });
+const baseButtonStyles = xcss({
+  fontFamily: 'inherit',
+  fontSize: 'inherit',
+  fontStyle: 'normal',
+  fontWeight: 500,
+  lineHeight: `${32 / fontSize}em`,
+  paddingBlock: 'space.0'
+});
+const tokenizedButtonStyles = xcss({
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-medium, 500)",
+  paddingBlock: 'space.075'
+});
 const defaultInteractiveStyles = xcss({
   ':hover': {
     background: "var(--ds-background-neutral-hovered, #091e4214)",
@@ -302,11 +310,16 @@ const selectedDiscoveryStyles = xcss({
 const spacingCompactStyles = xcss({
   columnGap: 'space.050',
   height: `${24 / fontSize}em`,
-  lineHeight: `${24 / fontSize}em`,
   paddingInlineEnd: 'space.150',
   paddingInlineStart: 'space.150',
   verticalAlign: 'middle'
 });
+const baseSpacingCompactStyles = xcss({
+  lineHeight: `${24 / fontSize}em`
+});
+const tokenizedSpacingCompactStyles = xcss({
+  paddingBlock: 'space.025'
+});
 const spacingNoneStyles = xcss({
   columnGap: 'space.0',
   height: 'auto',
@@ -315,6 +328,9 @@ const spacingNoneStyles = xcss({
   paddingInlineStart: 'space.0',
   verticalAlign: 'baseline'
 });
+const tokenizedSpacingNoneStyles = xcss({
+  paddingBlock: 'space.0'
+});
 const circleStyles = xcss({
   borderRadius: 'border.radius.circle'
 });
@@ -419,13 +435,13 @@ const useButtonBase = ({
   useAutoFocus(localRef, autoFocus);
   return {
     ref: mergeRefs([localRef, ref]),
-    xcss: [buttonStyles, appearance === 'default' && isInteractive && defaultInteractiveStyles, appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && subtleStyles, appearance === 'subtle' && isInteractive && subtleInteractiveStyles, appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && selectedStyles, isSelected && isInteractive && selectedInteractiveStyles,
+    xcss: [getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : baseButtonStyles, buttonStyles, appearance === 'default' && isInteractive && defaultInteractiveStyles, appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && subtleStyles, appearance === 'subtle' && isInteractive && subtleInteractiveStyles, appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && selectedStyles, isSelected && isInteractive && selectedInteractiveStyles,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'danger' && selectedDangerStyles,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'warning' && selectedWarningStyles,
     // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'none' && spacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingOverlayStyles, (isDisabled || hasOverlay && !isLoading) && nonInteractiveStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
+    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'compact' && (getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedSpacingCompactStyles : baseSpacingCompactStyles), spacing === 'none' && spacingNoneStyles, spacing === 'none' && getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') && tokenizedSpacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingOverlayStyles, (isDisabled || hasOverlay && !isLoading) && nonInteractiveStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
     // Consider overlay buttons to be effectively disabled
     isDisabled: isEffectivelyDisabled,
     children: /*#__PURE__*/React.createElement(Fragment, null, children, overlay ? /*#__PURE__*/React.createElement(Box, {

package/dist/es2019/old-button/button.js

@@ -9,11 +9,13 @@ const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowe
 /**
  * __Button__
  *
+ * CAUTION: Legacy buttons will soon be deprecated. Please use the new Button components from `@atlaskit/button/new`.
+ *
  * A button triggers an event or action. They let users know what will happen next.
  *
- * - [Examples](https://atlassian.design/components/button/examples)
- * - [Code](https://atlassian.design/components/button/code)
- * - [Usage](https://atlassian.design/components/button/usage)
+ * - [Examples](https://atlassian.design/components/button/button-legacy/examples)
+ * - [Code](https://atlassian.design/components/button/button-legacy/code)
+ * - [Usage](https://atlassian.design/components/button/button-legacy/usage)
  */
 const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button({
   appearance = 'default',

package/dist/es2019/old-button/loading-button.js

@@ -5,6 +5,8 @@ import LoadingSpinner from './shared/loading-spinner';
 /**
  * __Loading button__
  *
+ * CAUTION: Legacy loading buttons will soon be deprecated. Please use the new Button components from `@atlaskit/button/new` with the `isLoading` prop.
+ *
  * A small wrapper around Button that allows you to show an @atlaskit/spinner as an overlay on the button when you set an isLoading prop to true.
  *
  * - [Examples](https://atlassian.design/components/button/examples#loading-button)

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

@@ -114,7 +114,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.16.0",
+    packageVersion: "17.17.1",
     analyticsData: analyticsContext
   });
 

package/dist/esm/new-button/variants/default/link.js

@@ -99,9 +99,9 @@ var WithRef = /*#__PURE__*/forwardRef(LinkButtonBase);
  *
  * Renders a link in the style of a button.
  *
- * - [Examples](https://atlassian.design/components/button/examples)
- * - [Code](https://atlassian.design/components/button/code)
- * - [Usage](https://atlassian.design/components/button/usage)
+ * - [Examples](https://atlassian.design/components/link-button/examples)
+ * - [Code](https://atlassian.design/components/link-button/code)
+ * - [Usage](https://atlassian.design/components/link-button/usage)
  */
 var LinkButton = /*#__PURE__*/memo(WithRef);
 export default LinkButton;

package/dist/esm/new-button/variants/icon/button.js

@@ -10,9 +10,9 @@ import useIconButton from './use-icon-button';
  *
  * TODO: Description
  *
- * - [Examples](https://atlassian.design/components/button/examples)
- * - [Code](https://atlassian.design/components/button/code)
- * - [Usage](https://atlassian.design/components/button/usage)
+ * - [Examples](https://atlassian.design/components/icon-button/examples)
+ * - [Code](https://atlassian.design/components/icon-button/code)
+ * - [Usage](https://atlassian.design/components/icon-button/usage)
  */
 var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
   var preventedAriaLabel = _ref['aria-label'],

package/dist/esm/new-button/variants/icon/link.js

@@ -193,9 +193,9 @@ var WithRef = /*#__PURE__*/forwardRef(LinkIconButtonBase);
  *
  * Renders a link in the style of an icon button.
  *
- * - [Examples](https://atlassian.design/components/button/examples)
- * - [Code](https://atlassian.design/components/button/code)
- * - [Usage](https://atlassian.design/components/button/usage)
+ * - [Examples](https://atlassian.design/components/link-icon-button/examples)
+ * - [Code](https://atlassian.design/components/link-icon-button/code)
+ * - [Usage](https://atlassian.design/components/link-icon-button/usage)
  */
 var LinkIconButton = /*#__PURE__*/memo(WithRef);
 export default LinkIconButton;

package/dist/esm/new-button/variants/shared/use-button-base.js

@@ -4,6 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { Fragment, useRef } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import * as colors from '@atlaskit/theme/colors';
 import { fontSize as getFontSize } from '@atlaskit/theme/constants';
@@ -25,13 +26,7 @@ var buttonStyles = xcss({
   // @ts-expect-error
   color: "var(--ds-text, ".concat(colors.N500, ")"),
   flexShrink: 0,
-  fontFamily: 'inherit',
-  fontSize: 'inherit',
-  fontStyle: 'normal',
-  fontWeight: 500,
   height: "".concat(32 / fontSize, "em"),
-  lineHeight: "".concat(32 / fontSize, "em"),
-  paddingBlock: 'space.0',
   paddingInlineEnd: 'space.150',
   paddingInlineStart: 'space.150',
   textAlign: 'center',
@@ -42,6 +37,19 @@ var buttonStyles = xcss({
     color: "var(--ds-text, ".concat(colors.N500, ")")
   }
 });
+var baseButtonStyles = xcss({
+  fontFamily: 'inherit',
+  fontSize: 'inherit',
+  fontStyle: 'normal',
+  fontWeight: 500,
+  lineHeight: "".concat(32 / fontSize, "em"),
+  paddingBlock: 'space.0'
+});
+var tokenizedButtonStyles = xcss({
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-medium, 500)",
+  paddingBlock: 'space.075'
+});
 var defaultInteractiveStyles = xcss({
   ':hover': {
     background: "var(--ds-background-neutral-hovered, #091e4214)",
@@ -305,11 +313,16 @@ var selectedDiscoveryStyles = xcss({
 var spacingCompactStyles = xcss({
   columnGap: 'space.050',
   height: "".concat(24 / fontSize, "em"),
-  lineHeight: "".concat(24 / fontSize, "em"),
   paddingInlineEnd: 'space.150',
   paddingInlineStart: 'space.150',
   verticalAlign: 'middle'
 });
+var baseSpacingCompactStyles = xcss({
+  lineHeight: "".concat(24 / fontSize, "em")
+});
+var tokenizedSpacingCompactStyles = xcss({
+  paddingBlock: 'space.025'
+});
 var spacingNoneStyles = xcss({
   columnGap: 'space.0',
   height: 'auto',
@@ -318,6 +331,9 @@ var spacingNoneStyles = xcss({
   paddingInlineStart: 'space.0',
   verticalAlign: 'baseline'
 });
+var tokenizedSpacingNoneStyles = xcss({
+  paddingBlock: 'space.0'
+});
 var circleStyles = xcss({
   borderRadius: 'border.radius.circle'
 });
@@ -430,13 +446,13 @@ var useButtonBase = function useButtonBase(_ref) {
   useAutoFocus(localRef, autoFocus);
   return _objectSpread({
     ref: mergeRefs([localRef, ref]),
-    xcss: [buttonStyles, appearance === 'default' && isInteractive && defaultInteractiveStyles, appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && subtleStyles, appearance === 'subtle' && isInteractive && subtleInteractiveStyles, appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && selectedStyles, isSelected && isInteractive && selectedInteractiveStyles,
+    xcss: [getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : baseButtonStyles, buttonStyles, appearance === 'default' && isInteractive && defaultInteractiveStyles, appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && subtleStyles, appearance === 'subtle' && isInteractive && subtleInteractiveStyles, appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && selectedStyles, isSelected && isInteractive && selectedInteractiveStyles,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'danger' && selectedDangerStyles,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'warning' && selectedWarningStyles,
     // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'none' && spacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingOverlayStyles, (isDisabled || hasOverlay && !isLoading) && nonInteractiveStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
+    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'compact' && (getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedSpacingCompactStyles : baseSpacingCompactStyles), spacing === 'none' && spacingNoneStyles, spacing === 'none' && getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') && tokenizedSpacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingOverlayStyles, (isDisabled || hasOverlay && !isLoading) && nonInteractiveStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
     // Consider overlay buttons to be effectively disabled
     isDisabled: isEffectivelyDisabled,
     children: /*#__PURE__*/React.createElement(Fragment, null, children, overlay ? /*#__PURE__*/React.createElement(Box, {