@atlaskit/lozenge 11.1.12 → 11.2.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/lozenge
 
+## 11.2.0
+
+### Minor Changes
+
+- [`bf235e83ac0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bf235e83ac0) - Internal changes to the way styles are applied. The Lozenge background is now centred properly resulting in it sitting 1px higher, however the text inside the Lozenge is unaffected.
+
+### Patch Changes
+
+- [`37246e87cfc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/37246e87cfc) - Adds position static to Box.
+  Changes lozenge to use position static instead of relative.
+- [`6e0671cb45c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6e0671cb45c) - Internal change to implementation which should not have any noticeable impact.
+- Updated dependencies
+
 ## 11.1.12
 
 ### Patch Changes

package/codemods/{utils.ts → utils.tsx}

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import core from 'jscodeshift';
 import { Collection } from 'jscodeshift/src/Collection';
 

package/dist/cjs/Lozenge/index.js

@@ -9,97 +9,14 @@ var _react = require("react");
 
 var _core = require("@emotion/core");
 
+var _dsExplorations = require("@atlaskit/ds-explorations");
+
 var _colors = require("@atlaskit/theme/colors");
 
-var _constants = require("@atlaskit/theme/constants");
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
 /** @jsx jsx */
-var defaultAppearanceStyles = (0, _core.css)({
-  backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N40, ")"),
-  color: "var(--ds-text, ".concat(_colors.N500, ")")
-});
-var inprogressAppearanceStyles = (0, _core.css)({
-  backgroundColor: "var(--ds-background-information, ".concat(_colors.B50, ")"),
-  color: "var(--ds-text-information, ".concat(_colors.B500, ")")
-});
-var movedAppearanceStyles = (0, _core.css)({
-  backgroundColor: "var(--ds-background-warning, ".concat(_colors.Y75, ")"),
-  color: "var(--ds-text-warning, ".concat(_colors.N800, ")")
-});
-var newAppearanceStyles = (0, _core.css)({
-  backgroundColor: "var(--ds-background-discovery, ".concat(_colors.P50, ")"),
-  color: "var(--ds-text-discovery, ".concat(_colors.P500, ")")
-});
-var removedAppearanceStyles = (0, _core.css)({
-  backgroundColor: "var(--ds-background-danger, ".concat(_colors.R50, ")"),
-  color: "var(--ds-text-danger, ".concat(_colors.R500, ")")
-});
-var successAppearanceStyles = (0, _core.css)({
-  backgroundColor: "var(--ds-background-success, ".concat(_colors.G50, ")"),
-  color: "var(--ds-text-success, ".concat(_colors.G500, ")")
-});
-var defaultBoldAppearanceStyles = (0, _core.css)({
-  backgroundColor: "var(--ds-background-neutral-bold, ".concat(_colors.N500, ")"),
-  color: "var(--ds-text-inverse, ".concat(_colors.N0, ")")
-});
-var inprogressBoldAppearanceStyles = (0, _core.css)({
-  backgroundColor: "var(--ds-background-information-bold, ".concat(_colors.B400, ")"),
-  color: "var(--ds-text-inverse, ".concat(_colors.N0, ")")
-});
-var movedBoldAppearanceStyles = (0, _core.css)({
-  backgroundColor: "var(--ds-background-warning-bold, ".concat(_colors.Y500, ")"),
-  color: "var(--ds-text-warning-inverse, ".concat(_colors.N800, ")")
-});
-var newBoldAppearanceStyles = (0, _core.css)({
-  backgroundColor: "var(--ds-background-discovery-bold, ".concat(_colors.P400, ")"),
-  color: "var(--ds-text-inverse, ".concat(_colors.N0, ")")
-});
-var removedBoldAppearanceStyles = (0, _core.css)({
-  backgroundColor: "var(--ds-background-danger-bold, ".concat(_colors.R400, ")"),
-  color: "var(--ds-text-inverse, ".concat(_colors.N0, ")")
-});
-var successBoldAppearanceStyles = (0, _core.css)({
-  backgroundColor: "var(--ds-background-success-bold, ".concat(_colors.G400, ")"),
-  color: "var(--ds-text-inverse, ".concat(_colors.N0, ")")
-});
-var subtleAppearances = {
-  default: defaultAppearanceStyles,
-  inprogress: inprogressAppearanceStyles,
-  moved: movedAppearanceStyles,
-  new: newAppearanceStyles,
-  removed: removedAppearanceStyles,
-  success: successAppearanceStyles
-};
-var boldAppearances = {
-  default: defaultBoldAppearanceStyles,
-  inprogress: inprogressBoldAppearanceStyles,
-  moved: movedBoldAppearanceStyles,
-  new: newBoldAppearanceStyles,
-  removed: removedBoldAppearanceStyles,
-  success: successBoldAppearanceStyles
-};
-var contentStyles = (0, _core.css)({
-  display: 'inline-block',
-  boxSizing: 'border-box',
-  width: '100%',
-  padding: "0 ".concat((0, _constants.gridSize)() / 2, "px"),
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  verticalAlign: 'top',
-  whiteSpace: 'nowrap'
-});
-var containerStyles = (0, _core.css)({
-  display: 'inline-block',
-  boxSizing: 'border-box',
-  maxWidth: '100%',
-  padding: '2px 0 3px 0',
-  borderRadius: (0, _constants.borderRadius)(),
-  fontSize: '11px',
-  fontWeight: 700,
-  lineHeight: 1,
-  textTransform: 'uppercase',
-  verticalAlign: 'baseline'
-});
+
 /**
  * __Lozenge__
  *
@@ -109,7 +26,6 @@ var containerStyles = (0, _core.css)({
  * - [Code](https://atlassian.design/components/lozenge/code)
  * - [Usage](https://atlassian.design/components/lozenge/usage)
  */
-
 var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var children = _ref.children,
       testId = _ref.testId,
@@ -121,20 +37,76 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
       _ref$style = _ref.style,
       style = _ref$style === void 0 ? {} : _ref$style;
-  return (0, _core.jsx)("span", {
-    style: {
+  var appearanceStyle = isBold ? 'bold' : 'subtle';
+  var appearanceType = appearance in backgroundColors[appearanceStyle] ? appearance : 'default';
+  var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
+  return (0, _core.jsx)(_dsExplorations.UNSAFE_Box, {
+    as: "span",
+    display: "inlineFlex",
+    backgroundColor: backgroundColors[appearanceStyle][appearanceType],
+    borderRadius: "normal",
+    paddingInline: "sp-50",
+    position: "static",
+    testId: testId,
+    UNSAFE_style: {
       backgroundColor: style.backgroundColor,
-      color: style.color
-    },
-    css: [isBold ? boldAppearances[appearance] : subtleAppearances[appearance], containerStyles],
-    "data-testid": testId
-  }, (0, _core.jsx)("span", {
-    style: {
-      maxWidth: maxWidth
+      verticalAlign: 'baseline',
+      maxWidth: '100%'
+    }
+  }, (0, _core.jsx)(_dsExplorations.UNSAFE_Text, {
+    as: "span",
+    fontSize: "11px",
+    fontWeight: "700",
+    lineHeight: "16px",
+    textTransform: "uppercase",
+    color: textColors[appearanceStyle][appearanceType],
+    shouldTruncate: true,
+    UNSAFE_style: {
+      color: style.color,
+      width: '100%',
+      maxWidth: "calc(".concat(maxWidthValue, " - ").concat(_dsExplorations.UNSAFE_SPACING_SCALE['sp-100'], "px)") // to negate paddingInline specified on Box above
+
     },
-    css: contentStyles
+    testId: testId && "".concat(testId, "--text")
   }, children));
 });
 Lozenge.displayName = 'Lozenge';
-var _default = Lozenge;
-exports.default = _default;
+var _default = Lozenge; // Lozenge colors
+
+exports.default = _default;
+var backgroundColors = {
+  bold: {
+    default: ['neutral.bold', _colors.N500],
+    inprogress: ['information.bold', _colors.B400],
+    moved: ['warning.bold', _colors.Y500],
+    new: ['discovery.bold', _colors.P400],
+    removed: ['danger.bold', _colors.R400],
+    success: ['success.bold', _colors.G400]
+  },
+  subtle: {
+    default: ['neutral', _colors.N40],
+    inprogress: ['information', _colors.B50],
+    moved: ['warning', _colors.Y75],
+    new: ['discovery', _colors.P50],
+    removed: ['danger', _colors.R50],
+    success: ['success', _colors.G50]
+  }
+};
+var textColors = {
+  bold: {
+    default: ['inverse', _colors.N0],
+    inprogress: ['inverse', _colors.N0],
+    moved: ['warning.inverse', _colors.N800],
+    new: ['inverse', _colors.N0],
+    removed: ['inverse', _colors.N0],
+    success: ['inverse', _colors.N0]
+  },
+  subtle: {
+    default: ['color.text', _colors.N500],
+    inprogress: ['information', _colors.B500],
+    moved: ['warning', _colors.N800],
+    new: ['discovery', _colors.P500],
+    removed: ['danger', _colors.R500],
+    success: ['success', _colors.G500]
+  }
+};

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/lozenge",
-	"version": "11.1.12",
+	"version": "11.2.0",
 	"sideEffects": false
 }

package/dist/es2019/Lozenge/index.js

@@ -1,94 +1,11 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 /** @jsx jsx */
 import { memo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { jsx } from '@emotion/core';
+import { UNSAFE_Box as Box, UNSAFE_SPACING_SCALE as SPACING_SCALE, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
 import { B400, B50, B500, G400, G50, G500, N0, N40, N500, N800, P400, P50, P500, R400, R50, R500, Y500, Y75 } from '@atlaskit/theme/colors';
-import { borderRadius, gridSize } from '@atlaskit/theme/constants';
-const defaultAppearanceStyles = css({
-  backgroundColor: `var(--ds-background-neutral, ${N40})`,
-  color: `var(--ds-text, ${N500})`
-});
-const inprogressAppearanceStyles = css({
-  backgroundColor: `var(--ds-background-information, ${B50})`,
-  color: `var(--ds-text-information, ${B500})`
-});
-const movedAppearanceStyles = css({
-  backgroundColor: `var(--ds-background-warning, ${Y75})`,
-  color: `var(--ds-text-warning, ${N800})`
-});
-const newAppearanceStyles = css({
-  backgroundColor: `var(--ds-background-discovery, ${P50})`,
-  color: `var(--ds-text-discovery, ${P500})`
-});
-const removedAppearanceStyles = css({
-  backgroundColor: `var(--ds-background-danger, ${R50})`,
-  color: `var(--ds-text-danger, ${R500})`
-});
-const successAppearanceStyles = css({
-  backgroundColor: `var(--ds-background-success, ${G50})`,
-  color: `var(--ds-text-success, ${G500})`
-});
-const defaultBoldAppearanceStyles = css({
-  backgroundColor: `var(--ds-background-neutral-bold, ${N500})`,
-  color: `var(--ds-text-inverse, ${N0})`
-});
-const inprogressBoldAppearanceStyles = css({
-  backgroundColor: `var(--ds-background-information-bold, ${B400})`,
-  color: `var(--ds-text-inverse, ${N0})`
-});
-const movedBoldAppearanceStyles = css({
-  backgroundColor: `var(--ds-background-warning-bold, ${Y500})`,
-  color: `var(--ds-text-warning-inverse, ${N800})`
-});
-const newBoldAppearanceStyles = css({
-  backgroundColor: `var(--ds-background-discovery-bold, ${P400})`,
-  color: `var(--ds-text-inverse, ${N0})`
-});
-const removedBoldAppearanceStyles = css({
-  backgroundColor: `var(--ds-background-danger-bold, ${R400})`,
-  color: `var(--ds-text-inverse, ${N0})`
-});
-const successBoldAppearanceStyles = css({
-  backgroundColor: `var(--ds-background-success-bold, ${G400})`,
-  color: `var(--ds-text-inverse, ${N0})`
-});
-const subtleAppearances = {
-  default: defaultAppearanceStyles,
-  inprogress: inprogressAppearanceStyles,
-  moved: movedAppearanceStyles,
-  new: newAppearanceStyles,
-  removed: removedAppearanceStyles,
-  success: successAppearanceStyles
-};
-const boldAppearances = {
-  default: defaultBoldAppearanceStyles,
-  inprogress: inprogressBoldAppearanceStyles,
-  moved: movedBoldAppearanceStyles,
-  new: newBoldAppearanceStyles,
-  removed: removedBoldAppearanceStyles,
-  success: successBoldAppearanceStyles
-};
-const contentStyles = css({
-  display: 'inline-block',
-  boxSizing: 'border-box',
-  width: '100%',
-  padding: `0 ${gridSize() / 2}px`,
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  verticalAlign: 'top',
-  whiteSpace: 'nowrap'
-});
-const containerStyles = css({
-  display: 'inline-block',
-  boxSizing: 'border-box',
-  maxWidth: '100%',
-  padding: '2px 0 3px 0',
-  borderRadius: borderRadius(),
-  fontSize: '11px',
-  fontWeight: 700,
-  lineHeight: 1,
-  textTransform: 'uppercase',
-  verticalAlign: 'baseline'
-});
+
 /**
  * __Lozenge__
  *
@@ -98,7 +15,6 @@ const containerStyles = css({
  * - [Code](https://atlassian.design/components/lozenge/code)
  * - [Usage](https://atlassian.design/components/lozenge/usage)
  */
-
 const Lozenge = /*#__PURE__*/memo(({
   children,
   testId,
@@ -106,18 +22,76 @@ const Lozenge = /*#__PURE__*/memo(({
   appearance = 'default',
   maxWidth = 200,
   style = {}
-}) => jsx("span", {
-  style: {
-    backgroundColor: style.backgroundColor,
-    color: style.color
+}) => {
+  const appearanceStyle = isBold ? 'bold' : 'subtle';
+  const appearanceType = appearance in backgroundColors[appearanceStyle] ? appearance : 'default';
+  const maxWidthValue = typeof maxWidth === 'string' ? maxWidth : `${maxWidth}px`;
+  return jsx(Box, {
+    as: "span",
+    display: "inlineFlex",
+    backgroundColor: backgroundColors[appearanceStyle][appearanceType],
+    borderRadius: "normal",
+    paddingInline: "sp-50",
+    position: "static",
+    testId: testId,
+    UNSAFE_style: {
+      backgroundColor: style.backgroundColor,
+      verticalAlign: 'baseline',
+      maxWidth: '100%'
+    }
+  }, jsx(Text, {
+    as: "span",
+    fontSize: "11px",
+    fontWeight: "700",
+    lineHeight: "16px",
+    textTransform: "uppercase",
+    color: textColors[appearanceStyle][appearanceType],
+    shouldTruncate: true,
+    UNSAFE_style: {
+      color: style.color,
+      width: '100%',
+      maxWidth: `calc(${maxWidthValue} - ${SPACING_SCALE['sp-100']}px)` // to negate paddingInline specified on Box above
+
+    },
+    testId: testId && `${testId}--text`
+  }, children));
+});
+Lozenge.displayName = 'Lozenge';
+export default Lozenge; // Lozenge colors
+
+const backgroundColors = {
+  bold: {
+    default: ['neutral.bold', N500],
+    inprogress: ['information.bold', B400],
+    moved: ['warning.bold', Y500],
+    new: ['discovery.bold', P400],
+    removed: ['danger.bold', R400],
+    success: ['success.bold', G400]
   },
-  css: [isBold ? boldAppearances[appearance] : subtleAppearances[appearance], containerStyles],
-  "data-testid": testId
-}, jsx("span", {
-  style: {
-    maxWidth
+  subtle: {
+    default: ['neutral', N40],
+    inprogress: ['information', B50],
+    moved: ['warning', Y75],
+    new: ['discovery', P50],
+    removed: ['danger', R50],
+    success: ['success', G50]
+  }
+};
+const textColors = {
+  bold: {
+    default: ['inverse', N0],
+    inprogress: ['inverse', N0],
+    moved: ['warning.inverse', N800],
+    new: ['inverse', N0],
+    removed: ['inverse', N0],
+    success: ['inverse', N0]
   },
-  css: contentStyles
-}, children)));
-Lozenge.displayName = 'Lozenge';
-export default Lozenge;
+  subtle: {
+    default: ['color.text', N500],
+    inprogress: ['information', B500],
+    moved: ['warning', N800],
+    new: ['discovery', P500],
+    removed: ['danger', R500],
+    success: ['success', G500]
+  }
+};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/lozenge",
-	"version": "11.1.12",
+	"version": "11.2.0",
 	"sideEffects": false
 }

package/dist/esm/Lozenge/index.js

@@ -1,94 +1,11 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 /** @jsx jsx */
 import { memo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { jsx } from '@emotion/core';
+import { UNSAFE_Box as Box, UNSAFE_SPACING_SCALE as SPACING_SCALE, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
 import { B400, B50, B500, G400, G50, G500, N0, N40, N500, N800, P400, P50, P500, R400, R50, R500, Y500, Y75 } from '@atlaskit/theme/colors';
-import { borderRadius, gridSize } from '@atlaskit/theme/constants';
-var defaultAppearanceStyles = css({
-  backgroundColor: "var(--ds-background-neutral, ".concat(N40, ")"),
-  color: "var(--ds-text, ".concat(N500, ")")
-});
-var inprogressAppearanceStyles = css({
-  backgroundColor: "var(--ds-background-information, ".concat(B50, ")"),
-  color: "var(--ds-text-information, ".concat(B500, ")")
-});
-var movedAppearanceStyles = css({
-  backgroundColor: "var(--ds-background-warning, ".concat(Y75, ")"),
-  color: "var(--ds-text-warning, ".concat(N800, ")")
-});
-var newAppearanceStyles = css({
-  backgroundColor: "var(--ds-background-discovery, ".concat(P50, ")"),
-  color: "var(--ds-text-discovery, ".concat(P500, ")")
-});
-var removedAppearanceStyles = css({
-  backgroundColor: "var(--ds-background-danger, ".concat(R50, ")"),
-  color: "var(--ds-text-danger, ".concat(R500, ")")
-});
-var successAppearanceStyles = css({
-  backgroundColor: "var(--ds-background-success, ".concat(G50, ")"),
-  color: "var(--ds-text-success, ".concat(G500, ")")
-});
-var defaultBoldAppearanceStyles = css({
-  backgroundColor: "var(--ds-background-neutral-bold, ".concat(N500, ")"),
-  color: "var(--ds-text-inverse, ".concat(N0, ")")
-});
-var inprogressBoldAppearanceStyles = css({
-  backgroundColor: "var(--ds-background-information-bold, ".concat(B400, ")"),
-  color: "var(--ds-text-inverse, ".concat(N0, ")")
-});
-var movedBoldAppearanceStyles = css({
-  backgroundColor: "var(--ds-background-warning-bold, ".concat(Y500, ")"),
-  color: "var(--ds-text-warning-inverse, ".concat(N800, ")")
-});
-var newBoldAppearanceStyles = css({
-  backgroundColor: "var(--ds-background-discovery-bold, ".concat(P400, ")"),
-  color: "var(--ds-text-inverse, ".concat(N0, ")")
-});
-var removedBoldAppearanceStyles = css({
-  backgroundColor: "var(--ds-background-danger-bold, ".concat(R400, ")"),
-  color: "var(--ds-text-inverse, ".concat(N0, ")")
-});
-var successBoldAppearanceStyles = css({
-  backgroundColor: "var(--ds-background-success-bold, ".concat(G400, ")"),
-  color: "var(--ds-text-inverse, ".concat(N0, ")")
-});
-var subtleAppearances = {
-  default: defaultAppearanceStyles,
-  inprogress: inprogressAppearanceStyles,
-  moved: movedAppearanceStyles,
-  new: newAppearanceStyles,
-  removed: removedAppearanceStyles,
-  success: successAppearanceStyles
-};
-var boldAppearances = {
-  default: defaultBoldAppearanceStyles,
-  inprogress: inprogressBoldAppearanceStyles,
-  moved: movedBoldAppearanceStyles,
-  new: newBoldAppearanceStyles,
-  removed: removedBoldAppearanceStyles,
-  success: successBoldAppearanceStyles
-};
-var contentStyles = css({
-  display: 'inline-block',
-  boxSizing: 'border-box',
-  width: '100%',
-  padding: "0 ".concat(gridSize() / 2, "px"),
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  verticalAlign: 'top',
-  whiteSpace: 'nowrap'
-});
-var containerStyles = css({
-  display: 'inline-block',
-  boxSizing: 'border-box',
-  maxWidth: '100%',
-  padding: '2px 0 3px 0',
-  borderRadius: borderRadius(),
-  fontSize: '11px',
-  fontWeight: 700,
-  lineHeight: 1,
-  textTransform: 'uppercase',
-  verticalAlign: 'baseline'
-});
+
 /**
  * __Lozenge__
  *
@@ -98,7 +15,6 @@ var containerStyles = css({
  * - [Code](https://atlassian.design/components/lozenge/code)
  * - [Usage](https://atlassian.design/components/lozenge/usage)
  */
-
 var Lozenge = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
       testId = _ref.testId,
@@ -110,19 +26,75 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
       maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
       _ref$style = _ref.style,
       style = _ref$style === void 0 ? {} : _ref$style;
-  return jsx("span", {
-    style: {
+  var appearanceStyle = isBold ? 'bold' : 'subtle';
+  var appearanceType = appearance in backgroundColors[appearanceStyle] ? appearance : 'default';
+  var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
+  return jsx(Box, {
+    as: "span",
+    display: "inlineFlex",
+    backgroundColor: backgroundColors[appearanceStyle][appearanceType],
+    borderRadius: "normal",
+    paddingInline: "sp-50",
+    position: "static",
+    testId: testId,
+    UNSAFE_style: {
       backgroundColor: style.backgroundColor,
-      color: style.color
-    },
-    css: [isBold ? boldAppearances[appearance] : subtleAppearances[appearance], containerStyles],
-    "data-testid": testId
-  }, jsx("span", {
-    style: {
-      maxWidth: maxWidth
+      verticalAlign: 'baseline',
+      maxWidth: '100%'
+    }
+  }, jsx(Text, {
+    as: "span",
+    fontSize: "11px",
+    fontWeight: "700",
+    lineHeight: "16px",
+    textTransform: "uppercase",
+    color: textColors[appearanceStyle][appearanceType],
+    shouldTruncate: true,
+    UNSAFE_style: {
+      color: style.color,
+      width: '100%',
+      maxWidth: "calc(".concat(maxWidthValue, " - ").concat(SPACING_SCALE['sp-100'], "px)") // to negate paddingInline specified on Box above
+
     },
-    css: contentStyles
+    testId: testId && "".concat(testId, "--text")
   }, children));
 });
 Lozenge.displayName = 'Lozenge';
-export default Lozenge;
+export default Lozenge; // Lozenge colors
+
+var backgroundColors = {
+  bold: {
+    default: ['neutral.bold', N500],
+    inprogress: ['information.bold', B400],
+    moved: ['warning.bold', Y500],
+    new: ['discovery.bold', P400],
+    removed: ['danger.bold', R400],
+    success: ['success.bold', G400]
+  },
+  subtle: {
+    default: ['neutral', N40],
+    inprogress: ['information', B50],
+    moved: ['warning', Y75],
+    new: ['discovery', P50],
+    removed: ['danger', R50],
+    success: ['success', G50]
+  }
+};
+var textColors = {
+  bold: {
+    default: ['inverse', N0],
+    inprogress: ['inverse', N0],
+    moved: ['warning.inverse', N800],
+    new: ['inverse', N0],
+    removed: ['inverse', N0],
+    success: ['inverse', N0]
+  },
+  subtle: {
+    default: ['color.text', N500],
+    inprogress: ['information', B500],
+    moved: ['warning', N800],
+    new: ['discovery', P500],
+    removed: ['danger', R500],
+    success: ['success', G500]
+  }
+};

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/lozenge",
-	"version": "11.1.12",
+	"version": "11.2.0",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/lozenge",
-  "version": "11.1.12",
+  "version": "11.2.0",
   "description": "A lozenge is a visual indicator used to highlight an item's status for quick recognition.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -25,8 +25,8 @@
   },
   "dependencies": {
     "@atlaskit/codemod-utils": "^4.1.0",
-    "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.10.0",
+    "@atlaskit/ds-explorations": "^0.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -36,7 +36,7 @@
   "devDependencies": {
     "@atlaskit/button": "*",
     "@atlaskit/docs": "*",
-    "@atlaskit/section-message": "^6.1.0",
+    "@atlaskit/section-message": "^6.2.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
@@ -58,7 +58,10 @@
         "static",
         "emotion"
       ],
-      "ui-components": "lite-mode",
+      "ui-components": [
+        "primitives",
+        "lite-mode"
+      ],
       "analytics": "analytics-next",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports"