@atlaskit/button 17.16.0 → 17.17.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/button
 
+## 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

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/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/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.0",
     analyticsData: analyticsContext
   });
 

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/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.0",
     analyticsData: analyticsContext
   });
 

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, {

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

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

package/dist/types/containers/button-group.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { Appearance } from '../old-button/types';
+import { type Appearance } from '../old-button/types';
 export type ButtonGroupProps = {
     /**
      * The appearance to apply to all buttons.

package/dist/types/new-button/containers/split-button/split-button-context.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SplitButtonAppearance, SplitButtonSpacing } from './types';
+import { type SplitButtonAppearance, type SplitButtonSpacing } from './types';
 type NavigationSplitButtonContextProps = {
     appearance: 'navigation';
     isHighlighted: boolean;

package/dist/types/new-button/variants/shared/loading-overlay.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Appearance, type ButtonSpacing } from '../types';
+import { type Appearance, type ButtonSpacing } from '../types';
 export default function renderLoadingOverlay({ appearance, spacing, isDisabled, isSelected, }: {
     spacing?: ButtonSpacing;
     appearance?: Appearance;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BaseProps } from './types';
+import { type BaseProps } from './types';
 export interface ButtonProps extends BaseProps {
 }
 /**

package/dist/types/old-button/custom-theme-button/custom-theme-button-types.d.ts

@@ -1,6 +1,6 @@
-import { CSSObject } from '@emotion/react';
-import { ThemeModes } from '@atlaskit/theme/types';
-import { BaseProps } from '../types';
+import { type CSSObject } from '@emotion/react';
+import { type ThemeModes } from '@atlaskit/theme/types';
+import { type BaseProps } from '../types';
 export type ThemeTokens = {
     buttonStyles: CSSObject;
     spinnerStyles: CSSObject;

package/dist/types/old-button/custom-theme-button/theme.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { CSSObject } from '@emotion/react';
-import { ThemeProps, ThemeTokens } from './custom-theme-button-types';
+import { type CSSObject } from '@emotion/react';
+import { type ThemeProps, type ThemeTokens } from './custom-theme-button-types';
 export declare function getCustomCss({ appearance, spacing, mode, isSelected, shouldFitContainer, iconIsOnlyChild, isLoading, state, }: ThemeProps): CSSObject;
 export declare function getSpecifiers(styles: CSSObject): CSSObject;
 export declare function defaultThemeFn(current: (values: ThemeProps) => ThemeTokens, values: ThemeProps): ThemeTokens;

package/dist/types/old-button/loading-button.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BaseProps } from './types';
+import { type BaseProps } from './types';
 export type LoadingButtonOwnProps = {
     isLoading?: boolean;
 };

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

@@ -1,5 +1,5 @@
-import { ThemeModes } from '@atlaskit/theme/types';
-import { Appearance } from '../types';
+import { type ThemeModes } from '@atlaskit/theme/types';
+import { type Appearance } from '../types';
 export type ColorRule = {
     [key in ThemeModes]: string;
 };

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

@@ -1,6 +1,6 @@
-import { CSSObject } from '@emotion/react';
-import { ThemeModes } from '@atlaskit/theme/types';
-import { Appearance, Spacing } from '../types';
+import { type CSSObject } from '@emotion/react';
+import { type ThemeModes } from '@atlaskit/theme/types';
+import { type Appearance, type Spacing } from '../types';
 export type GetCssArgs = {
     appearance: Appearance;
     spacing: Spacing;

package/dist/types/old-button/shared/get-is-only-single-icon.d.ts

@@ -1,2 +1,2 @@
-import { BaseProps } from '../types';
+import { type BaseProps } from '../types';
 export default function getIsOnlySingleIcon({ children, iconBefore, iconAfter, }: Pick<BaseProps, 'children' | 'iconBefore' | 'iconAfter'>): boolean;

package/dist/types/old-button/shared/loading-spinner.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseProps } from '../types';
+import { type BaseProps } from '../types';
 type LoadingSpinnerProps = Pick<BaseProps, 'appearance' | 'isDisabled' | 'isSelected' | 'spacing'>;
 export default function LoadingSpinner({ appearance, isDisabled, isSelected, spacing, }: LoadingSpinnerProps): JSX.Element;
 export {};

package/dist/types/utils/variants.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import Button from '../new-button/variants/default/button';
-import { LinkButtonProps } from '../new-button/variants/default/link';
+import { type LinkButtonProps } from '../new-button/variants/default/link';
 import { type IconButtonProps } from '../new-button/variants/icon/button';
 import { type LinkIconButtonProps } from '../new-button/variants/icon/link';
 import { buttonAppearances, iconButtonAppearances, linkButtonAppearances } from './appearances';

package/dist/types-ts4.5/containers/button-group.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { Appearance } from '../old-button/types';
+import { type Appearance } from '../old-button/types';
 export type ButtonGroupProps = {
     /**
      * The appearance to apply to all buttons.

package/dist/types-ts4.5/new-button/containers/split-button/split-button-context.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SplitButtonAppearance, SplitButtonSpacing } from './types';
+import { type SplitButtonAppearance, type SplitButtonSpacing } from './types';
 type NavigationSplitButtonContextProps = {
     appearance: 'navigation';
     isHighlighted: boolean;

package/dist/types-ts4.5/new-button/variants/shared/loading-overlay.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Appearance, type ButtonSpacing } from '../types';
+import { type Appearance, type ButtonSpacing } from '../types';
 export default function renderLoadingOverlay({ appearance, spacing, isDisabled, isSelected, }: {
     spacing?: ButtonSpacing;
     appearance?: Appearance;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BaseProps } from './types';
+import { type BaseProps } from './types';
 export interface ButtonProps extends BaseProps {
 }
 /**

package/dist/types-ts4.5/old-button/custom-theme-button/custom-theme-button-types.d.ts

@@ -1,6 +1,6 @@
-import { CSSObject } from '@emotion/react';
-import { ThemeModes } from '@atlaskit/theme/types';
-import { BaseProps } from '../types';
+import { type CSSObject } from '@emotion/react';
+import { type ThemeModes } from '@atlaskit/theme/types';
+import { type BaseProps } from '../types';
 export type ThemeTokens = {
     buttonStyles: CSSObject;
     spinnerStyles: CSSObject;

package/dist/types-ts4.5/old-button/custom-theme-button/theme.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { CSSObject } from '@emotion/react';
-import { ThemeProps, ThemeTokens } from './custom-theme-button-types';
+import { type CSSObject } from '@emotion/react';
+import { type ThemeProps, type ThemeTokens } from './custom-theme-button-types';
 export declare function getCustomCss({ appearance, spacing, mode, isSelected, shouldFitContainer, iconIsOnlyChild, isLoading, state, }: ThemeProps): CSSObject;
 export declare function getSpecifiers(styles: CSSObject): CSSObject;
 export declare function defaultThemeFn(current: (values: ThemeProps) => ThemeTokens, values: ThemeProps): ThemeTokens;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BaseProps } from './types';
+import { type BaseProps } from './types';
 export type LoadingButtonOwnProps = {
     isLoading?: boolean;
 };

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

@@ -1,5 +1,5 @@
-import { ThemeModes } from '@atlaskit/theme/types';
-import { Appearance } from '../types';
+import { type ThemeModes } from '@atlaskit/theme/types';
+import { type Appearance } from '../types';
 export type ColorRule = {
     [key in ThemeModes]: string;
 };

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

@@ -1,6 +1,6 @@
-import { CSSObject } from '@emotion/react';
-import { ThemeModes } from '@atlaskit/theme/types';
-import { Appearance, Spacing } from '../types';
+import { type CSSObject } from '@emotion/react';
+import { type ThemeModes } from '@atlaskit/theme/types';
+import { type Appearance, type Spacing } from '../types';
 export type GetCssArgs = {
     appearance: Appearance;
     spacing: Spacing;

package/dist/types-ts4.5/old-button/shared/get-is-only-single-icon.d.ts

@@ -1,2 +1,2 @@
-import { BaseProps } from '../types';
+import { type BaseProps } from '../types';
 export default function getIsOnlySingleIcon({ children, iconBefore, iconAfter, }: Pick<BaseProps, 'children' | 'iconBefore' | 'iconAfter'>): boolean;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseProps } from '../types';
+import { type BaseProps } from '../types';
 type LoadingSpinnerProps = Pick<BaseProps, 'appearance' | 'isDisabled' | 'isSelected' | 'spacing'>;
 export default function LoadingSpinner({ appearance, isDisabled, isSelected, spacing, }: LoadingSpinnerProps): JSX.Element;
 export {};

package/dist/types-ts4.5/utils/variants.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import Button from '../new-button/variants/default/button';
-import { LinkButtonProps } from '../new-button/variants/default/link';
+import { type LinkButtonProps } from '../new-button/variants/default/link';
 import { type IconButtonProps } from '../new-button/variants/icon/button';
 import { type LinkIconButtonProps } from '../new-button/variants/icon/link';
 import { buttonAppearances, iconButtonAppearances, linkButtonAppearances } from './appearances';

package/extract-react-types/custom-theme-button-props.tsx

@@ -1,4 +1,4 @@
-import { CustomThemeButtonOwnProps } from '../src/old-button/custom-theme-button/custom-theme-button-types';
+import { type CustomThemeButtonOwnProps } from '../src/old-button/custom-theme-button/custom-theme-button-types';
 
 export default function CustomThemeButtonProps(
   props: CustomThemeButtonOwnProps,

package/extract-react-types/legacy-button/custom-theme-button-props.tsx

@@ -1,4 +1,4 @@
-import { CustomThemeButtonOwnProps } from '../../src/old-button/custom-theme-button/custom-theme-button-types';
+import { type CustomThemeButtonOwnProps } from '../../src/old-button/custom-theme-button/custom-theme-button-types';
 
 export default function CustomThemeButtonProps(
   props: CustomThemeButtonOwnProps,

package/extract-react-types/legacy-button/loading-button-props.tsx

@@ -1,4 +1,4 @@
-import { LoadingButtonOwnProps } from '../../src/old-button/loading-button';
+import { type LoadingButtonOwnProps } from '../../src/old-button/loading-button';
 
 export default function LoadingButtonProps(props: LoadingButtonOwnProps) {
   return null;

package/extract-react-types/legacy-button/shared-props.tsx

@@ -1,4 +1,4 @@
-import { BaseOwnProps } from '../../src/old-button/types';
+import { type BaseOwnProps } from '../../src/old-button/types';
 
 export default function SharedProps(props: BaseOwnProps) {
   return null;

package/extract-react-types/loading-button-props.tsx

@@ -1,4 +1,4 @@
-import { LoadingButtonOwnProps } from '../src/old-button/loading-button';
+import { type LoadingButtonOwnProps } from '../src/old-button/loading-button';
 
 export default function LoadingButtonProps(props: LoadingButtonOwnProps) {
   return null;

package/extract-react-types/new-button/variants/default/button-props.tsx

@@ -1,4 +1,4 @@
-import { AdditionalButtonVariantProps } from '../../../../src/new-button/variants/types';
+import { type AdditionalButtonVariantProps } from '../../../../src/new-button/variants/types';
 
 export default function ButtonProps(props: AdditionalButtonVariantProps) {
   return null;

package/extract-react-types/new-button/variants/icon-button/icon-button-props.tsx

@@ -1,4 +1,4 @@
-import { AdditionalButtonVariantProps } from '../../../../src/new-button/variants/types';
+import { type AdditionalButtonVariantProps } from '../../../../src/new-button/variants/types';
 
 export default function IconButtonProps(props: AdditionalButtonVariantProps) {
   return null;

package/extract-react-types/shared-props.tsx

@@ -1,4 +1,4 @@
-import { BaseOwnProps } from '../src/old-button/types';
+import { type BaseOwnProps } from '../src/old-button/types';
 
 export default function SharedProps(props: BaseOwnProps) {
   return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "17.16.0",
+  "version": "17.17.0",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -96,6 +96,7 @@
     "@atlaskit/focus-ring": "^1.4.0",
     "@atlaskit/icon": "^22.3.0",
     "@atlaskit/interaction-context": "^2.1.0",
+    "@atlaskit/platform-feature-flags": "^0.2.5",
     "@atlaskit/primitives": "^6.3.0",
     "@atlaskit/spinner": "^16.1.0",
     "@atlaskit/theme": "^12.8.0",
@@ -156,5 +157,10 @@
     }
   },
   "homepage": "https://atlassian.design/components/button/",
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
+  "platform-feature-flags": {
+    "platform.design-system-team.button-tokenised-typography-styles": {
+      "type": "boolean"
+    }
+  }
 }