@atlaskit/progress-tracker 8.6.1 → 8.6.3

package/README.md

@@ -10,4 +10,5 @@ yarn add @atlaskit/progress-tracker
 
 ## Usage
 
-Detailed docs and example usage can be found [here](https://atlassian.design/components/progress-tracker/).
+Detailed docs and example usage can be found
+[here](https://atlassian.design/components/progress-tracker/).

package/dist/cjs/internal/bar.js

@@ -9,17 +9,23 @@ var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../constants");
 var _constants2 = require("./constants");
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var progressBarStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   height: _constants2.PROGRESS_BAR_HEIGHT,
   position: 'absolute',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  left: '50%',
   backgroundColor: "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"),
-  borderBottomRightRadius: _constants2.PROGRESS_BAR_HEIGHT,
-  borderTopRightRadius: _constants2.PROGRESS_BAR_HEIGHT,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  borderEndEndRadius: _constants2.PROGRESS_BAR_HEIGHT,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  borderStartEndRadius: _constants2.PROGRESS_BAR_HEIGHT,
+  insetInlineStart: '50%',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transform: "translate(0, calc(-1 * ".concat(_constants2.LABEL_TOP_SPACING, "))"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transition: "width var(".concat(_constants2.varTransitionSpeed, ") var(").concat(_constants2.varTransitionEasing, ")"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transitionDelay: "var(".concat(_constants2.varTransitionDelay, ")")
 });
 
@@ -35,7 +41,9 @@ var ProgressBar = function ProgressBar(_ref) {
   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, ") + ").concat(_constants2.HALF_GRID_SIZE, "))")
+      width: "calc(".concat(percentageComplete, "% + ").concat(percentageComplete / 100
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      , " * calc(var(").concat(_constants2.varSpacing, ", ").concat(_constants.spacing.cosy, ") + ").concat(_constants2.HALF_GRID_SIZE, "))")
     },
     css: progressBarStyles
   });

package/dist/cjs/internal/constants.js

@@ -3,7 +3,7 @@
 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;
+exports.varTransitionSpeed = exports.varTransitionEasing = exports.varTransitionDelay = exports.varSpacing = exports.varMarkerColor = exports.varBackgroundColor = exports.TRANSITION_SPEED = exports.PROGRESS_BAR_HEIGHT = exports.LINEAR_TRANSITION_SPEED = exports.LABEL_TOP_SPACING = exports.HALF_GRID_SIZE = exports.ANIMATION_EASE_OUT = void 0;
 var TRANSITION_SPEED = exports.TRANSITION_SPEED = 300;
 var LINEAR_TRANSITION_SPEED = exports.LINEAR_TRANSITION_SPEED = 50;
 var ANIMATION_EASE_OUT = exports.ANIMATION_EASE_OUT = 'cubic-bezier(0.15,1,0.3,1)';
@@ -13,10 +13,9 @@ var varTransitionDelay = exports.varTransitionDelay = '--ds--pt--td';
 var varTransitionEasing = exports.varTransitionEasing = '--ds--pt--te';
 var varMarkerColor = exports.varMarkerColor = '--ds--pt--mc';
 var varBackgroundColor = exports.varBackgroundColor = '--ds--pt--bg';
-var REGULAR_FONT_WEIGHT = exports.REGULAR_FONT_WEIGHT = "var(--ds-font-weight-regular, 400)";
-var SEMI_BOLD_FONT_WEIGHT = exports.SEMI_BOLD_FONT_WEIGHT = "var(--ds-font-weight-semibold, 600)";
 var HALF_GRID_SIZE = exports.HALF_GRID_SIZE = "var(--ds-space-050, 4px)";
 var PROGRESS_BAR_HEIGHT = exports.PROGRESS_BAR_HEIGHT = "var(--ds-space-100, 8px)";
 
-// Labels sit 16px from bottom of progress bar i.e. 8 + 16
-var LABEL_TOP_SPACING = exports.LABEL_TOP_SPACING = "var(--ds-space-300, 24px)";
+// Labels sit 16px from bottom of progress bar
+// i.e. 8 (bar height) + 16 - 4 (line height 24->20 in PYX-695) = 20px
+var LABEL_TOP_SPACING = exports.LABEL_TOP_SPACING = "var(--ds-space-250, 20px)";

package/dist/cjs/internal/link.js

@@ -8,6 +8,8 @@ var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var linkStyles = (0, _react.css)({
   color: "var(--ds-text, ".concat(_colors.N800, ")"),
   cursor: 'pointer'

package/dist/cjs/internal/marker.js

@@ -9,27 +9,41 @@ var _constants = require("./constants");
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var progressMarkerStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   width: _constants.PROGRESS_BAR_HEIGHT,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   height: _constants.PROGRESS_BAR_HEIGHT,
   position: 'absolute',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  left: '50%',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   backgroundColor: "var(".concat(_constants.varBackgroundColor, ")"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   borderRadius: _constants.PROGRESS_BAR_HEIGHT,
+  insetInlineStart: '50%',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transform: "translate(-50%, calc(-1 * ".concat(_constants.LABEL_TOP_SPACING, "))"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transition: "opacity var(".concat(_constants.varTransitionSpeed, ") var(").concat(_constants.varTransitionEasing, "), background-color var(").concat(_constants.varTransitionSpeed, ") var(").concat(_constants.varTransitionEasing, ")"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transitionDelay: "var(".concat(_constants.varTransitionDelay, ")"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.fade-appear': {
     opacity: 0.01
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.fade-appear.fade-appear-active': {
     opacity: 1
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.fade-enter': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     backgroundColor: "var(".concat(_constants.varMarkerColor, ")")
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.fade-enter.fade-enter-active': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     backgroundColor: "var(".concat(_constants.varBackgroundColor, ")")
   }
 });

package/dist/cjs/internal/stage.js

@@ -23,7 +23,7 @@ var _utils = require("./utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/design-system/no-nested-styles */ /** @jsx jsx */
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/design-system/no-nested-styles */ /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var listItemContentStyles = (0, _primitives.xcss)({
   width: '100%',
   position: 'relative'
@@ -33,23 +33,20 @@ var listItemStyles = (0, _react2.css)({
   overflowWrap: 'break-word'
 });
 var titleStyles = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  marginTop: _constants.LABEL_TOP_SPACING,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  lineHeight: '16px',
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  marginBlockStart: _constants.LABEL_TOP_SPACING,
   textAlign: 'center',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.fade-appear': {
     opacity: 0.01
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.fade-appear.fade-appear-active': {
     opacity: 1,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     transition: "opacity var(".concat(_constants.varTransitionSpeed, ") cubic-bezier(0.2, 0, 0, 1)")
   }
 });
-var textStyles = (0, _react2.css)({
-  fontSize: '14px',
-  lineHeight: '16px'
-});
 var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(ProgressTrackerStage, _PureComponent);
   var _super = _createSuper(ProgressTrackerStage);
@@ -104,7 +101,9 @@ var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureCompone
       var ariaCurrent = item.status === 'current' ? 'step' : 'false';
       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 (0, _react2.jsx)("li", {
-        "data-testid": testId,
+        "data-testid": testId
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
         style: listInlineStyles,
         css: listItemStyles,
         "aria-current": ariaCurrent
@@ -134,9 +133,7 @@ var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureCompone
         timeout: transitionDelay + transitionSpeed,
         classNames: "fade"
       }, (0, _react2.jsx)("div", {
-        css: titleStyles
-      }, (0, _react2.jsx)("span", {
-        css: textStyles,
+        css: titleStyles,
         style: {
           color: (0, _utils.getTextColor)(item.status),
           fontWeight: (0, _utils.getFontWeight)(item.status)
@@ -144,7 +141,7 @@ var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureCompone
         "data-testid": testId && "".concat(testId, "-title")
       }, this.shouldShowLink() ? render.link({
         item: item
-      }) : item.label)))));
+      }) : item.label))));
     }
   }]);
   return ProgressTrackerStage;

package/dist/cjs/internal/utils.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getTextColor = exports.getMarkerColor = exports.getFontWeight = void 0;
 var _colors = require("@atlaskit/theme/colors");
-var _constants = require("./constants");
 var getMarkerColor = exports.getMarkerColor = function getMarkerColor(status) {
   switch (status) {
     case 'unvisited':
@@ -35,11 +34,11 @@ var getTextColor = exports.getTextColor = function getTextColor(status) {
 var getFontWeight = exports.getFontWeight = function getFontWeight(status) {
   switch (status) {
     case 'unvisited':
-      return _constants.REGULAR_FONT_WEIGHT;
+      return "var(--ds-font-weight-regular, 400)";
     case 'current':
     case 'visited':
     case 'disabled':
-      return _constants.SEMI_BOLD_FONT_WEIGHT;
+      return "var(--ds-font-weight-semibold, 600)";
     default:
       return undefined;
   }

package/dist/cjs/progress-tracker.js

@@ -21,16 +21,17 @@ var _stage = _interopRequireDefault(require("./internal/stage"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/design-system/no-nested-styles */ /** @jsx jsx */
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/design-system/no-nested-styles */ /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var containerStyles = (0, _react2.css)({
   display: 'grid',
   width: '100%',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   margin: '0 auto',
   padding: "var(--ds-space-0, 0px)",
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   gap: "var(".concat(_constants2.varSpacing, ")"),
   listStyleType: 'none',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&&': {
     marginBlockStart: "var(--ds-space-500, 40px)"
   }
@@ -120,7 +121,9 @@ var ProgressTracker = exports.default = /*#__PURE__*/function (_PureComponent) {
         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 (0, _react2.jsx)("ul", {
-        "data-testid": testId,
+        "data-testid": testId
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
         style: listInlineStyles,
         css: containerStyles,
         "aria-label": label

package/dist/es2019/internal/bar.js

@@ -1,18 +1,24 @@
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { B300 } from '@atlaskit/theme/colors';
 import { spacing } from '../constants';
 import { HALF_GRID_SIZE, LABEL_TOP_SPACING, PROGRESS_BAR_HEIGHT, varSpacing, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
 const progressBarStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   height: PROGRESS_BAR_HEIGHT,
   position: 'absolute',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  left: '50%',
   backgroundColor: `var(--ds-background-brand-bold, ${B300})`,
-  borderBottomRightRadius: PROGRESS_BAR_HEIGHT,
-  borderTopRightRadius: PROGRESS_BAR_HEIGHT,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  borderEndEndRadius: PROGRESS_BAR_HEIGHT,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  borderStartEndRadius: PROGRESS_BAR_HEIGHT,
+  insetInlineStart: '50%',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transform: `translate(0, calc(-1 * ${LABEL_TOP_SPACING}))`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transition: `width var(${varTransitionSpeed}) var(${varTransitionEasing})`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transitionDelay: `var(${varTransitionDelay})`
 });
 
@@ -28,7 +34,9 @@ const ProgressBar = ({
 }) => jsx("div", {
   "data-testid": testId,
   style: {
-    width: `calc(${percentageComplete}% + ${percentageComplete / 100} * calc(var(${varSpacing}, ${spacing.cosy}) + ${HALF_GRID_SIZE}))`
+    width: `calc(${percentageComplete}% + ${percentageComplete / 100
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    } * calc(var(${varSpacing}, ${spacing.cosy}) + ${HALF_GRID_SIZE}))`
   },
   css: progressBarStyles
 });

package/dist/es2019/internal/constants.js

@@ -7,10 +7,9 @@ export const varTransitionDelay = '--ds--pt--td';
 export const varTransitionEasing = '--ds--pt--te';
 export const varMarkerColor = '--ds--pt--mc';
 export const varBackgroundColor = '--ds--pt--bg';
-export const REGULAR_FONT_WEIGHT = "var(--ds-font-weight-regular, 400)";
-export const SEMI_BOLD_FONT_WEIGHT = "var(--ds-font-weight-semibold, 600)";
 export const HALF_GRID_SIZE = "var(--ds-space-050, 4px)";
 export const PROGRESS_BAR_HEIGHT = "var(--ds-space-100, 8px)";
 
-// Labels sit 16px from bottom of progress bar i.e. 8 + 16
-export const LABEL_TOP_SPACING = "var(--ds-space-300, 24px)";
+// Labels sit 16px from bottom of progress bar
+// i.e. 8 (bar height) + 16 - 4 (line height 24->20 in PYX-695) = 20px
+export const LABEL_TOP_SPACING = "var(--ds-space-250, 20px)";

package/dist/es2019/internal/link.js

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { N800 } from '@atlaskit/theme/colors';
 const linkStyles = css({

package/dist/es2019/internal/marker.js

@@ -1,29 +1,42 @@
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { LABEL_TOP_SPACING, PROGRESS_BAR_HEIGHT, varBackgroundColor, varMarkerColor, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
 const progressMarkerStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   width: PROGRESS_BAR_HEIGHT,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   height: PROGRESS_BAR_HEIGHT,
   position: 'absolute',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  left: '50%',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   backgroundColor: `var(${varBackgroundColor})`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   borderRadius: PROGRESS_BAR_HEIGHT,
+  insetInlineStart: '50%',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transform: `translate(-50%, calc(-1 * ${LABEL_TOP_SPACING}))`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transition: `opacity var(${varTransitionSpeed}) var(${varTransitionEasing}), background-color var(${varTransitionSpeed}) var(${varTransitionEasing})`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transitionDelay: `var(${varTransitionDelay})`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.fade-appear': {
     opacity: 0.01
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.fade-appear.fade-appear-active': {
     opacity: 1
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.fade-enter': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     backgroundColor: `var(${varMarkerColor})`
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.fade-enter.fade-enter-active': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     backgroundColor: `var(${varBackgroundColor})`
   }
 });

package/dist/es2019/internal/stage.js

@@ -2,6 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
 /** @jsx jsx */
 import { PureComponent } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { CSSTransition } from 'react-transition-group';
 import { Box, xcss } from '@atlaskit/primitives';
@@ -18,23 +20,20 @@ const listItemStyles = css({
   overflowWrap: 'break-word'
 });
 const titleStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  marginTop: LABEL_TOP_SPACING,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  lineHeight: '16px',
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  marginBlockStart: LABEL_TOP_SPACING,
   textAlign: 'center',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.fade-appear': {
     opacity: 0.01
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.fade-appear.fade-appear-active': {
     opacity: 1,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     transition: `opacity var(${varTransitionSpeed}) cubic-bezier(0.2, 0, 0, 1)`
   }
 });
-const textStyles = css({
-  fontSize: '14px',
-  lineHeight: '16px'
-});
 export default class ProgressTrackerStage extends PureComponent {
   constructor(props) {
     super(props);
@@ -84,7 +83,9 @@ export default class ProgressTrackerStage extends PureComponent {
       [varBackgroundColor]: getMarkerColor(item.status)
     };
     return jsx("li", {
-      "data-testid": testId,
+      "data-testid": testId
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
       style: listInlineStyles,
       css: listItemStyles,
       "aria-current": ariaCurrent
@@ -114,9 +115,7 @@ export default class ProgressTrackerStage extends PureComponent {
       timeout: transitionDelay + transitionSpeed,
       classNames: "fade"
     }, jsx("div", {
-      css: titleStyles
-    }, jsx("span", {
-      css: textStyles,
+      css: titleStyles,
       style: {
         color: getTextColor(item.status),
         fontWeight: getFontWeight(item.status)
@@ -124,6 +123,6 @@ export default class ProgressTrackerStage extends PureComponent {
       "data-testid": testId && `${testId}-title`
     }, this.shouldShowLink() ? render.link({
       item
-    }) : item.label)))));
+    }) : item.label))));
   }
 }

package/dist/es2019/internal/utils.js

@@ -1,5 +1,4 @@
 import { B300, N70 } from '@atlaskit/theme/colors';
-import { REGULAR_FONT_WEIGHT, SEMI_BOLD_FONT_WEIGHT } from './constants';
 export const getMarkerColor = status => {
   switch (status) {
     case 'unvisited':
@@ -29,11 +28,11 @@ export const getTextColor = status => {
 export const getFontWeight = status => {
   switch (status) {
     case 'unvisited':
-      return REGULAR_FONT_WEIGHT;
+      return "var(--ds-font-weight-regular, 400)";
     case 'current':
     case 'visited':
     case 'disabled':
-      return SEMI_BOLD_FONT_WEIGHT;
+      return "var(--ds-font-weight-semibold, 600)";
     default:
       return undefined;
   }

package/dist/es2019/progress-tracker.js

@@ -2,6 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
 /** @jsx jsx */
 import { PureComponent } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { spacing } from './constants';
 import { ANIMATION_EASE_OUT, LINEAR_TRANSITION_SPEED, TRANSITION_SPEED, varSpacing } from './internal/constants';
@@ -13,9 +15,10 @@ const containerStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   margin: '0 auto',
   padding: "var(--ds-space-0, 0px)",
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   gap: `var(${varSpacing})`,
   listStyleType: 'none',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&&': {
     marginBlockStart: "var(--ds-space-500, 40px)"
   }
@@ -84,7 +87,9 @@ export default class ProgressTracker extends PureComponent {
       maxWidth: 8 * 10 * items.length * 2
     };
     return jsx("ul", {
-      "data-testid": testId,
+      "data-testid": testId
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
       style: listInlineStyles,
       css: containerStyles,
       "aria-label": label

package/dist/esm/internal/bar.js

@@ -1,18 +1,24 @@
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { B300 } from '@atlaskit/theme/colors';
 import { spacing } from '../constants';
 import { HALF_GRID_SIZE, LABEL_TOP_SPACING, PROGRESS_BAR_HEIGHT, varSpacing, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
 var progressBarStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   height: PROGRESS_BAR_HEIGHT,
   position: 'absolute',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  left: '50%',
   backgroundColor: "var(--ds-background-brand-bold, ".concat(B300, ")"),
-  borderBottomRightRadius: PROGRESS_BAR_HEIGHT,
-  borderTopRightRadius: PROGRESS_BAR_HEIGHT,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  borderEndEndRadius: PROGRESS_BAR_HEIGHT,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  borderStartEndRadius: PROGRESS_BAR_HEIGHT,
+  insetInlineStart: '50%',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transform: "translate(0, calc(-1 * ".concat(LABEL_TOP_SPACING, "))"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transition: "width var(".concat(varTransitionSpeed, ") var(").concat(varTransitionEasing, ")"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transitionDelay: "var(".concat(varTransitionDelay, ")")
 });
 
@@ -28,7 +34,9 @@ var ProgressBar = function ProgressBar(_ref) {
   return jsx("div", {
     "data-testid": testId,
     style: {
-      width: "calc(".concat(percentageComplete, "% + ").concat(percentageComplete / 100, " * calc(var(").concat(varSpacing, ", ").concat(spacing.cosy, ") + ").concat(HALF_GRID_SIZE, "))")
+      width: "calc(".concat(percentageComplete, "% + ").concat(percentageComplete / 100
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      , " * calc(var(").concat(varSpacing, ", ").concat(spacing.cosy, ") + ").concat(HALF_GRID_SIZE, "))")
     },
     css: progressBarStyles
   });

package/dist/esm/internal/constants.js

@@ -7,10 +7,9 @@ export var varTransitionDelay = '--ds--pt--td';
 export var varTransitionEasing = '--ds--pt--te';
 export var varMarkerColor = '--ds--pt--mc';
 export var varBackgroundColor = '--ds--pt--bg';
-export var REGULAR_FONT_WEIGHT = "var(--ds-font-weight-regular, 400)";
-export var SEMI_BOLD_FONT_WEIGHT = "var(--ds-font-weight-semibold, 600)";
 export var HALF_GRID_SIZE = "var(--ds-space-050, 4px)";
 export var PROGRESS_BAR_HEIGHT = "var(--ds-space-100, 8px)";
 
-// Labels sit 16px from bottom of progress bar i.e. 8 + 16
-export var LABEL_TOP_SPACING = "var(--ds-space-300, 24px)";
+// Labels sit 16px from bottom of progress bar
+// i.e. 8 (bar height) + 16 - 4 (line height 24->20 in PYX-695) = 20px
+export var LABEL_TOP_SPACING = "var(--ds-space-250, 20px)";

package/dist/esm/internal/link.js

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { N800 } from '@atlaskit/theme/colors';
 var linkStyles = css({

package/dist/esm/internal/marker.js

@@ -1,29 +1,42 @@
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { LABEL_TOP_SPACING, PROGRESS_BAR_HEIGHT, varBackgroundColor, varMarkerColor, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
 var progressMarkerStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   width: PROGRESS_BAR_HEIGHT,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   height: PROGRESS_BAR_HEIGHT,
   position: 'absolute',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  left: '50%',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   backgroundColor: "var(".concat(varBackgroundColor, ")"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   borderRadius: PROGRESS_BAR_HEIGHT,
+  insetInlineStart: '50%',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transform: "translate(-50%, calc(-1 * ".concat(LABEL_TOP_SPACING, "))"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transition: "opacity var(".concat(varTransitionSpeed, ") var(").concat(varTransitionEasing, "), background-color var(").concat(varTransitionSpeed, ") var(").concat(varTransitionEasing, ")"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transitionDelay: "var(".concat(varTransitionDelay, ")"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.fade-appear': {
     opacity: 0.01
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.fade-appear.fade-appear-active': {
     opacity: 1
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.fade-enter': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     backgroundColor: "var(".concat(varMarkerColor, ")")
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.fade-enter.fade-enter-active': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     backgroundColor: "var(".concat(varBackgroundColor, ")")
   }
 });