@atlaskit/progress-tracker 8.3.3 → 8.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/progress-tracker
 
+## 8.4.0
+
+### Minor Changes
+
+- [`eb709e1fde3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eb709e1fde3) - [ux] Apply spacing tokens and primitive components. Reduce padding between stage labels and progress bar by 4px - overall height of component is therefore also 4px shorter.
+
+## 8.3.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.3.3
 
 ### Patch Changes

package/dist/cjs/constants.js

@@ -3,19 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.spacing = exports.defaultGridSize = void 0;
+exports.spacing = void 0;
 
-var _constants = require("@atlaskit/theme/constants");
-
-var defaultGridSize = (0, _constants.gridSize)();
 /**
  * Ideally these are exported by @atlaskit/page
  */
-
-exports.defaultGridSize = defaultGridSize;
 var spacing = {
-  comfortable: defaultGridSize * 5,
-  cosy: defaultGridSize * 2,
-  compact: defaultGridSize / 2
+  comfortable: "var(--ds-scale-500, 40px)",
+  cosy: "var(--ds-scale-200, 16px)",
+  compact: "var(--ds-scale-050, 4px)"
 };
 exports.spacing = spacing;

package/dist/cjs/internal/bar.js

@@ -21,7 +21,7 @@ var progressBarStyles = (0, _react.css)({
   backgroundColor: "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"),
   borderBottomRightRadius: _constants2.PROGRESS_BAR_HEIGHT,
   borderTopRightRadius: _constants2.PROGRESS_BAR_HEIGHT,
-  transform: "translate(0, -".concat(_constants2.LABEL_TOP_SPACING, "px)"),
+  transform: "translate(0, calc(-1 * ".concat(_constants2.LABEL_TOP_SPACING, "))"),
   transition: "width var(".concat(_constants2.varTransitionSpeed, ") var(").concat(_constants2.varTransitionEasing, ")"),
   transitionDelay: "var(".concat(_constants2.varTransitionDelay, ")")
 });
@@ -35,13 +35,15 @@ var progressBarStyles = (0, _react.css)({
 var ProgressBar = function ProgressBar(_ref) {
   var percentageComplete = _ref.percentageComplete,
       testId = _ref.testId;
-  return (0, _react.jsx)("div", {
-    "data-testid": testId,
-    style: {
-      width: "calc(".concat(percentageComplete, "% + ").concat(percentageComplete / 100, " * calc(var(").concat(_constants2.varSpacing, ", ").concat(_constants.spacing.cosy, "px) + ").concat(_constants2.HALF_GRID_SIZE, "px))")
-    },
-    css: progressBarStyles
-  });
+  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    (0, _react.jsx)("div", {
+      "data-testid": testId,
+      style: {
+        width: "calc(".concat(percentageComplete, "% + ").concat(percentageComplete / 100, " * calc(var(").concat(_constants2.varSpacing, ", ").concat(_constants.spacing.cosy, ") + ").concat(_constants2.HALF_GRID_SIZE, "))")
+      },
+      css: progressBarStyles
+    })
+  );
 };
 
 var _default = ProgressBar;

package/dist/cjs/internal/constants.js

@@ -4,9 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.varTransitionSpeed = exports.varTransitionEasing = exports.varTransitionDelay = exports.varSpacing = exports.varMarkerColor = exports.varBackgroundColor = exports.TRANSITION_SPEED = exports.SEMI_BOLD_FONT_WEIGHT = exports.REGULAR_FONT_WEIGHT = exports.PROGRESS_BAR_HEIGHT = exports.LINEAR_TRANSITION_SPEED = exports.LABEL_TOP_SPACING = exports.HALF_GRID_SIZE = exports.ANIMATION_EASE_OUT = void 0;
-
-var _constants = require("../constants");
-
 var TRANSITION_SPEED = 300;
 exports.TRANSITION_SPEED = TRANSITION_SPEED;
 var LINEAR_TRANSITION_SPEED = 50;
@@ -29,10 +26,10 @@ var SEMI_BOLD_FONT_WEIGHT = '600';
 exports.SEMI_BOLD_FONT_WEIGHT = SEMI_BOLD_FONT_WEIGHT;
 var REGULAR_FONT_WEIGHT = '400';
 exports.REGULAR_FONT_WEIGHT = REGULAR_FONT_WEIGHT;
-var HALF_GRID_SIZE = _constants.defaultGridSize / 2;
+var HALF_GRID_SIZE = "var(--ds-scale-050, 4px)";
 exports.HALF_GRID_SIZE = HALF_GRID_SIZE;
-var PROGRESS_BAR_HEIGHT = _constants.defaultGridSize; // Labels sit 20px from bottom of progress bar.
+var PROGRESS_BAR_HEIGHT = "var(--ds-scale-100, 8px)"; // Labels sit 16px from bottom of progress bar i.e. 8 + 16
 
 exports.PROGRESS_BAR_HEIGHT = PROGRESS_BAR_HEIGHT;
-var LABEL_TOP_SPACING = _constants.defaultGridSize + 20;
+var LABEL_TOP_SPACING = "var(--ds-scale-300, 24px)";
 exports.LABEL_TOP_SPACING = LABEL_TOP_SPACING;

package/dist/cjs/internal/link.js

@@ -23,12 +23,14 @@ var Link = function Link(_ref) {
       onClick = _ref.onClick,
       label = _ref.label,
       testId = _ref.testId;
-  return (0, _react.jsx)("a", {
-    css: linkStyles,
-    href: href,
-    onClick: onClick,
-    "data-testid": testId
-  }, label);
+  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    (0, _react.jsx)("a", {
+      css: linkStyles,
+      href: href,
+      onClick: onClick,
+      "data-testid": testId
+    }, label)
+  );
 };
 
 var _default = Link;

package/dist/cjs/internal/marker.js

@@ -19,7 +19,7 @@ var progressMarkerStyles = (0, _react.css)({
   left: '50%',
   backgroundColor: "var(".concat(_constants.varBackgroundColor, ")"),
   borderRadius: _constants.PROGRESS_BAR_HEIGHT,
-  transform: "translate(-50%, -".concat(_constants.LABEL_TOP_SPACING, "px)"),
+  transform: "translate(-50%, calc(-1 * ".concat(_constants.LABEL_TOP_SPACING, "))"),
   transition: "opacity var(".concat(_constants.varTransitionSpeed, ") var(").concat(_constants.varTransitionEasing, "), background-color var(").concat(_constants.varTransitionSpeed, ") var(").concat(_constants.varTransitionEasing, ")"),
   transitionDelay: "var(".concat(_constants.varTransitionDelay, ")"),
   '&.fade-appear': {
@@ -43,10 +43,13 @@ var progressMarkerStyles = (0, _react.css)({
 
 var ProgressMarker = function ProgressMarker(_ref) {
   var testId = _ref.testId;
-  return (0, _react.jsx)("div", {
-    "data-testid": testId,
-    css: progressMarkerStyles
-  });
+  return (// too many props that would go in UNSAFE_style + css transition prop having issues
+    // eslint-disable-next-line @repo/internal/react/use-primitives
+    (0, _react.jsx)("div", {
+      "data-testid": testId,
+      css: progressMarkerStyles
+    })
+  );
 };
 
 var _default = ProgressMarker;

package/dist/cjs/internal/stage.js

@@ -27,11 +27,13 @@ var _react2 = require("@emotion/react");
 
 var _reactTransitionGroup = require("react-transition-group");
 
-var _constants = require("@atlaskit/theme/constants");
+var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
+
+var _text = _interopRequireDefault(require("@atlaskit/ds-explorations/text"));
 
 var _bar = _interopRequireDefault(require("./bar"));
 
-var _constants2 = require("./constants");
+var _constants = require("./constants");
 
 var _marker = _interopRequireDefault(require("./marker"));
 
@@ -45,22 +47,14 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var containerStyles = (0, _react2.css)({
-  width: '100%',
-  position: 'relative'
-});
 var listItemStyles = (0, _react2.css)({
-  // TODO Delete this comment after verifying spacing token -> previous value `0`
   margin: "var(--ds-scale-0, 0px)",
   overflowWrap: 'break-word'
 });
 var titleStyles = (0, _react2.css)({
-  marginTop: _constants2.LABEL_TOP_SPACING,
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-  marginRight: 'auto',
+  marginTop: _constants.LABEL_TOP_SPACING,
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-  marginLeft: 'auto',
-  fontSize: (0, _constants.fontSize)(),
   lineHeight: '16px',
   textAlign: 'center',
   '&.fade-appear': {
@@ -68,7 +62,7 @@ var titleStyles = (0, _react2.css)({
   },
   '&.fade-appear.fade-appear-active': {
     opacity: 1,
-    transition: "opacity var(".concat(_constants2.varTransitionSpeed, ") cubic-bezier(0.2, 0, 0, 1)")
+    transition: "opacity var(".concat(_constants.varTransitionSpeed, ") cubic-bezier(0.2, 0, 0, 1)")
   }
 });
 
@@ -119,7 +113,7 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _ref;
+      var _listInlineStyles;
 
       var _this$props = this.props,
           item = _this$props.item,
@@ -129,46 +123,53 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
           transitionEasing = _this$props.transitionEasing,
           testId = _this$props.testId;
       var ariaCurrent = item.status === 'current' ? 'step' : 'false';
-      return (0, _react2.jsx)("li", {
-        "data-testid": testId,
-        style: (_ref = {}, (0, _defineProperty2.default)(_ref, _constants2.varTransitionSpeed, "".concat(transitionSpeed, "ms")), (0, _defineProperty2.default)(_ref, _constants2.varTransitionDelay, "".concat(transitionDelay, "ms")), (0, _defineProperty2.default)(_ref, _constants2.varTransitionEasing, transitionEasing), (0, _defineProperty2.default)(_ref, _constants2.varMarkerColor, this.state.oldMarkerColor), (0, _defineProperty2.default)(_ref, _constants2.varBackgroundColor, (0, _utils.getMarkerColor)(item.status)), _ref),
-        css: listItemStyles,
-        "aria-current": ariaCurrent
-      }, (0, _react2.jsx)("div", {
-        css: containerStyles
-      }, (0, _react2.jsx)(_reactTransitionGroup.CSSTransition, {
-        appear: true,
-        in: this.state.transitioning,
-        onEntered: this.onEntered,
-        timeout: transitionDelay + transitionSpeed,
-        classNames: "fade"
-      }, (0, _react2.jsx)(_marker.default, {
-        testId: testId && "".concat(testId, "-marker")
-      })), (0, _react2.jsx)(_reactTransitionGroup.CSSTransition, {
-        appear: true,
-        in: this.state.transitioning,
-        onEntered: this.onEntered,
-        timeout: transitionDelay + transitionSpeed,
-        classNames: "fade"
-      }, (0, _react2.jsx)(_bar.default, {
-        testId: testId && "".concat(testId, "-bar"),
-        percentageComplete: item.percentageComplete
-      })), (0, _react2.jsx)(_reactTransitionGroup.CSSTransition, {
-        appear: true,
-        in: this.state.transitioning,
-        onEntered: this.onEntered,
-        timeout: transitionDelay + transitionSpeed,
-        classNames: "fade"
-      }, (0, _react2.jsx)("div", {
-        css: titleStyles,
-        "data-testid": testId && "".concat(testId, "-title"),
-        style: {
+      var listInlineStyles = (_listInlineStyles = {}, (0, _defineProperty2.default)(_listInlineStyles, _constants.varTransitionSpeed, "".concat(transitionSpeed, "ms")), (0, _defineProperty2.default)(_listInlineStyles, _constants.varTransitionDelay, "".concat(transitionDelay, "ms")), (0, _defineProperty2.default)(_listInlineStyles, _constants.varTransitionEasing, transitionEasing), (0, _defineProperty2.default)(_listInlineStyles, _constants.varMarkerColor, this.state.oldMarkerColor), (0, _defineProperty2.default)(_listInlineStyles, _constants.varBackgroundColor, (0, _utils.getMarkerColor)(item.status)), _listInlineStyles);
+      return (// eslint-disable-next-line @repo/internal/react/use-primitives
+        (0, _react2.jsx)("li", {
+          "data-testid": testId,
+          style: listInlineStyles,
+          css: listItemStyles,
+          "aria-current": ariaCurrent
+        }, (0, _react2.jsx)(_box.default, {
+          display: "block",
+          UNSAFE_style: {
+            width: '100%'
+          }
+        }, (0, _react2.jsx)(_reactTransitionGroup.CSSTransition, {
+          appear: true,
+          in: this.state.transitioning,
+          onEntered: this.onEntered,
+          timeout: transitionDelay + transitionSpeed,
+          classNames: "fade"
+        }, (0, _react2.jsx)(_marker.default, {
+          testId: testId && "".concat(testId, "-marker")
+        })), (0, _react2.jsx)(_reactTransitionGroup.CSSTransition, {
+          appear: true,
+          in: this.state.transitioning,
+          onEntered: this.onEntered,
+          timeout: transitionDelay + transitionSpeed,
+          classNames: "fade"
+        }, (0, _react2.jsx)(_bar.default, {
+          testId: testId && "".concat(testId, "-bar"),
+          percentageComplete: item.percentageComplete
+        })), (0, _react2.jsx)(_reactTransitionGroup.CSSTransition, {
+          appear: true,
+          in: this.state.transitioning,
+          onEntered: this.onEntered,
+          timeout: transitionDelay + transitionSpeed,
+          classNames: "fade"
+        }, (0, _react2.jsx)("div", {
+          css: titleStyles
+        }, (0, _react2.jsx)(_text.default, {
+          fontSize: "14px",
+          lineHeight: "16px",
+          testId: testId && "".concat(testId, "-title"),
           color: (0, _utils.getTextColor)(item.status),
           fontWeight: (0, _utils.getFontWeight)(item.status)
-        }
-      }, this.shouldShowLink() ? render.link({
-        item: item
-      }) : item.label))));
+        }, this.shouldShowLink() ? render.link({
+          item: item
+        }) : item.label)))))
+      );
     }
   }]);
   return ProgressTrackerStage;

package/dist/cjs/internal/utils.js

@@ -29,16 +29,16 @@ exports.getMarkerColor = getMarkerColor;
 var getTextColor = function getTextColor(status) {
   switch (status) {
     case 'unvisited':
-      return "var(--ds-text-subtlest, ".concat(_colors.N300, ")");
+      return 'subtlest';
 
     case 'current':
-      return "var(--ds-text-brand, ".concat(_colors.B300, ")");
+      return 'brand';
 
     case 'visited':
-      return "var(--ds-text, ".concat(_colors.N800, ")");
+      return 'color.text';
 
     case 'disabled':
-      return "var(--ds-text-disabled, ".concat(_colors.N70, ")");
+      return 'disabled';
 
     default:
       return;

package/dist/cjs/progress-tracker.js

@@ -46,13 +46,11 @@ var containerStyles = (0, _react2.css)({
   width: '100%',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   margin: '0 auto',
-  // TODO Delete this comment after verifying spacing token -> previous value `0`
   padding: "var(--ds-scale-0, 0px)",
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   gap: "var(".concat(_constants2.varSpacing, ")"),
   listStyleType: 'none',
   '&&': {
-    // TODO Delete this comment after verifying spacing token -> previous value `40`
     marginTop: "var(--ds-scale-500, 40px)"
   }
 });
@@ -102,7 +100,7 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var _this3 = this,
-          _ref;
+          _listInlineStyles;
 
       var _this$props = this.props,
           testId = _this$props.testId,
@@ -150,14 +148,17 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
           render: _this3.props.render
         });
       });
-      return (0, _react2.jsx)("ul", {
-        "data-testid": testId,
-        style: (_ref = {
-          gridTemplateColumns: "repeat(".concat(items.length, ", 1fr)")
-        }, (0, _defineProperty2.default)(_ref, _constants2.varSpacing, "".concat(_constants.spacing[this.props.spacing], "px")), (0, _defineProperty2.default)(_ref, "maxWidth", _constants.defaultGridSize * 10 * items.length * 2), _ref),
-        css: containerStyles,
-        "aria-label": label
-      }, items);
+      var listInlineStyles = (_listInlineStyles = {
+        gridTemplateColumns: "repeat(".concat(items.length, ", 1fr)")
+      }, (0, _defineProperty2.default)(_listInlineStyles, _constants2.varSpacing, _constants.spacing[this.props.spacing]), (0, _defineProperty2.default)(_listInlineStyles, "maxWidth", 8 * 10 * items.length * 2), _listInlineStyles);
+      return (// eslint-disable-next-line @repo/internal/react/use-primitives
+        (0, _react2.jsx)("ul", {
+          "data-testid": testId,
+          style: listInlineStyles,
+          css: containerStyles,
+          "aria-label": label
+        }, items)
+      );
     }
   }]);
   return ProgressTracker;
@@ -168,8 +169,8 @@ exports.default = ProgressTracker;
   items: [],
   spacing: 'cosy',
   render: {
-    link: function link(_ref2) {
-      var item = _ref2.item;
+    link: function link(_ref) {
+      var item = _ref.item;
       return (0, _react2.jsx)(_link.default, item);
     }
   },

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/progress-tracker",
-	"version": "8.3.3",
+	"version": "8.4.0",
 	"sideEffects": false
 }

package/dist/es2019/constants.js

@@ -1,11 +1,8 @@
-import { gridSize as getGridSize } from '@atlaskit/theme/constants';
-export const defaultGridSize = getGridSize();
 /**
  * Ideally these are exported by @atlaskit/page
  */
-
 export const spacing = {
-  comfortable: defaultGridSize * 5,
-  cosy: defaultGridSize * 2,
-  compact: defaultGridSize / 2
+  comfortable: "var(--ds-scale-500, 40px)",
+  cosy: "var(--ds-scale-200, 16px)",
+  compact: "var(--ds-scale-050, 4px)"
 };

package/dist/es2019/internal/bar.js

@@ -10,7 +10,7 @@ const progressBarStyles = css({
   backgroundColor: `var(--ds-background-brand-bold, ${B300})`,
   borderBottomRightRadius: PROGRESS_BAR_HEIGHT,
   borderTopRightRadius: PROGRESS_BAR_HEIGHT,
-  transform: `translate(0, -${LABEL_TOP_SPACING}px)`,
+  transform: `translate(0, calc(-1 * ${LABEL_TOP_SPACING}))`,
   transition: `width var(${varTransitionSpeed}) var(${varTransitionEasing})`,
   transitionDelay: `var(${varTransitionDelay})`
 });
@@ -24,10 +24,11 @@ const progressBarStyles = css({
 const ProgressBar = ({
   percentageComplete,
   testId
-}) => jsx("div", {
+}) => // eslint-disable-next-line @repo/internal/react/use-primitives
+jsx("div", {
   "data-testid": testId,
   style: {
-    width: `calc(${percentageComplete}% + ${percentageComplete / 100} * calc(var(${varSpacing}, ${spacing.cosy}px) + ${HALF_GRID_SIZE}px))`
+    width: `calc(${percentageComplete}% + ${percentageComplete / 100} * calc(var(${varSpacing}, ${spacing.cosy}) + ${HALF_GRID_SIZE}))`
   },
   css: progressBarStyles
 });

package/dist/es2019/internal/constants.js

@@ -1,4 +1,3 @@
-import { defaultGridSize } from '../constants';
 export const TRANSITION_SPEED = 300;
 export const LINEAR_TRANSITION_SPEED = 50;
 export const ANIMATION_EASE_OUT = 'cubic-bezier(0.15,1,0.3,1)';
@@ -10,7 +9,7 @@ export const varMarkerColor = '--ds--pt--mc';
 export const varBackgroundColor = '--ds--pt--bg';
 export const SEMI_BOLD_FONT_WEIGHT = '600';
 export const REGULAR_FONT_WEIGHT = '400';
-export const HALF_GRID_SIZE = defaultGridSize / 2;
-export const PROGRESS_BAR_HEIGHT = defaultGridSize; // Labels sit 20px from bottom of progress bar.
+export const HALF_GRID_SIZE = "var(--ds-scale-050, 4px)";
+export const PROGRESS_BAR_HEIGHT = "var(--ds-scale-100, 8px)"; // Labels sit 16px from bottom of progress bar i.e. 8 + 16
 
-export const LABEL_TOP_SPACING = defaultGridSize + 20;
+export const LABEL_TOP_SPACING = "var(--ds-scale-300, 24px)";

package/dist/es2019/internal/link.js

@@ -14,7 +14,8 @@ const Link = ({
   onClick,
   label,
   testId
-}) => jsx("a", {
+}) => // eslint-disable-next-line @repo/internal/react/use-primitives
+jsx("a", {
   css: linkStyles,
   href: href,
   onClick: onClick,

package/dist/es2019/internal/marker.js

@@ -10,7 +10,7 @@ const progressMarkerStyles = css({
   left: '50%',
   backgroundColor: `var(${varBackgroundColor})`,
   borderRadius: PROGRESS_BAR_HEIGHT,
-  transform: `translate(-50%, -${LABEL_TOP_SPACING}px)`,
+  transform: `translate(-50%, calc(-1 * ${LABEL_TOP_SPACING}))`,
   transition: `opacity var(${varTransitionSpeed}) var(${varTransitionEasing}), background-color var(${varTransitionSpeed}) var(${varTransitionEasing})`,
   transitionDelay: `var(${varTransitionDelay})`,
   '&.fade-appear': {
@@ -34,7 +34,9 @@ const progressMarkerStyles = css({
 
 const ProgressMarker = ({
   testId
-}) => jsx("div", {
+}) => // too many props that would go in UNSAFE_style + css transition prop having issues
+// eslint-disable-next-line @repo/internal/react/use-primitives
+jsx("div", {
   "data-testid": testId,
   css: progressMarkerStyles
 });

package/dist/es2019/internal/stage.js

@@ -6,27 +6,20 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { PureComponent } from 'react';
 import { css, jsx } from '@emotion/react';
 import { CSSTransition } from 'react-transition-group';
-import { fontSize } from '@atlaskit/theme/constants';
+import Box from '@atlaskit/ds-explorations/box';
+import Text from '@atlaskit/ds-explorations/text';
 import ProgressBar from './bar';
 import { LABEL_TOP_SPACING, varBackgroundColor, varMarkerColor, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
 import ProgressMarker from './marker';
 import { getFontWeight, getMarkerColor, getTextColor } from './utils';
-const containerStyles = css({
-  width: '100%',
-  position: 'relative'
-});
 const listItemStyles = css({
-  // TODO Delete this comment after verifying spacing token -> previous value `0`
   margin: "var(--ds-scale-0, 0px)",
   overflowWrap: 'break-word'
 });
 const titleStyles = css({
-  marginTop: LABEL_TOP_SPACING,
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-  marginRight: 'auto',
+  marginTop: LABEL_TOP_SPACING,
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-  marginLeft: 'auto',
-  fontSize: fontSize(),
   lineHeight: '16px',
   textAlign: 'center',
   '&.fade-appear': {
@@ -82,52 +75,59 @@ export default class ProgressTrackerStage extends PureComponent {
       testId
     } = this.props;
     const ariaCurrent = item.status === 'current' ? 'step' : 'false';
-    return jsx("li", {
-      "data-testid": testId,
-      style: {
-        [varTransitionSpeed]: `${transitionSpeed}ms`,
-        [varTransitionDelay]: `${transitionDelay}ms`,
-        [varTransitionEasing]: transitionEasing,
-        [varMarkerColor]: this.state.oldMarkerColor,
-        [varBackgroundColor]: getMarkerColor(item.status)
-      },
-      css: listItemStyles,
-      "aria-current": ariaCurrent
-    }, jsx("div", {
-      css: containerStyles
-    }, jsx(CSSTransition, {
-      appear: true,
-      in: this.state.transitioning,
-      onEntered: this.onEntered,
-      timeout: transitionDelay + transitionSpeed,
-      classNames: "fade"
-    }, jsx(ProgressMarker, {
-      testId: testId && `${testId}-marker`
-    })), jsx(CSSTransition, {
-      appear: true,
-      in: this.state.transitioning,
-      onEntered: this.onEntered,
-      timeout: transitionDelay + transitionSpeed,
-      classNames: "fade"
-    }, jsx(ProgressBar, {
-      testId: testId && `${testId}-bar`,
-      percentageComplete: item.percentageComplete
-    })), jsx(CSSTransition, {
-      appear: true,
-      in: this.state.transitioning,
-      onEntered: this.onEntered,
-      timeout: transitionDelay + transitionSpeed,
-      classNames: "fade"
-    }, jsx("div", {
-      css: titleStyles,
-      "data-testid": testId && `${testId}-title`,
-      style: {
+    const listInlineStyles = {
+      [varTransitionSpeed]: `${transitionSpeed}ms`,
+      [varTransitionDelay]: `${transitionDelay}ms`,
+      [varTransitionEasing]: transitionEasing,
+      [varMarkerColor]: this.state.oldMarkerColor,
+      [varBackgroundColor]: getMarkerColor(item.status)
+    };
+    return (// eslint-disable-next-line @repo/internal/react/use-primitives
+      jsx("li", {
+        "data-testid": testId,
+        style: listInlineStyles,
+        css: listItemStyles,
+        "aria-current": ariaCurrent
+      }, jsx(Box, {
+        display: "block",
+        UNSAFE_style: {
+          width: '100%'
+        }
+      }, jsx(CSSTransition, {
+        appear: true,
+        in: this.state.transitioning,
+        onEntered: this.onEntered,
+        timeout: transitionDelay + transitionSpeed,
+        classNames: "fade"
+      }, jsx(ProgressMarker, {
+        testId: testId && `${testId}-marker`
+      })), jsx(CSSTransition, {
+        appear: true,
+        in: this.state.transitioning,
+        onEntered: this.onEntered,
+        timeout: transitionDelay + transitionSpeed,
+        classNames: "fade"
+      }, jsx(ProgressBar, {
+        testId: testId && `${testId}-bar`,
+        percentageComplete: item.percentageComplete
+      })), jsx(CSSTransition, {
+        appear: true,
+        in: this.state.transitioning,
+        onEntered: this.onEntered,
+        timeout: transitionDelay + transitionSpeed,
+        classNames: "fade"
+      }, jsx("div", {
+        css: titleStyles
+      }, jsx(Text, {
+        fontSize: "14px",
+        lineHeight: "16px",
+        testId: testId && `${testId}-title`,
         color: getTextColor(item.status),
         fontWeight: getFontWeight(item.status)
-      }
-    }, this.shouldShowLink() ? render.link({
-      item
-    }) : item.label))));
+      }, this.shouldShowLink() ? render.link({
+        item
+      }) : item.label)))))
+    );
   }
 
 }

package/dist/es2019/internal/utils.js

@@ -1,4 +1,4 @@
-import { B300, N300, N70, N800 } from '@atlaskit/theme/colors';
+import { B300, N70 } from '@atlaskit/theme/colors';
 import { REGULAR_FONT_WEIGHT, SEMI_BOLD_FONT_WEIGHT } from './constants';
 export const getMarkerColor = status => {
   switch (status) {
@@ -17,16 +17,16 @@ export const getMarkerColor = status => {
 export const getTextColor = status => {
   switch (status) {
     case 'unvisited':
-      return `var(--ds-text-subtlest, ${N300})`;
+      return 'subtlest';
 
     case 'current':
-      return `var(--ds-text-brand, ${B300})`;
+      return 'brand';
 
     case 'visited':
-      return `var(--ds-text, ${N800})`;
+      return 'color.text';
 
     case 'disabled':
-      return `var(--ds-text-disabled, ${N70})`;
+      return 'disabled';
 
     default:
       return;