@atlaskit/lozenge 11.0.0 → 11.1.3

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/lozenge
 
+## 11.1.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.1.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.1.0
+
+### Minor Changes
+
+- [`d7caf75e732`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d7caf75e732) - - [ux] Colors are now sourced through tokens.
+  - Deprecate `@atlaskit/lozenge/theme` entry-point.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.0.0
 
 ### Major Changes

package/dist/cjs/Lozenge/index.js

@@ -9,11 +9,87 @@ var _react = require("react");
 
 var _core = require("@emotion/core");
 
+var _colors = require("@atlaskit/theme/colors");
+
 var _constants = require("@atlaskit/theme/constants");
 
-var _theme = require("../theme");
+var _tokens = require("@atlaskit/tokens");
 
 /** @jsx jsx */
+var defaultAppearanceStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.N40),
+  color: (0, _tokens.token)('color.text.highEmphasis', _colors.N500)
+});
+var inprogressAppearanceStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.subtleBrand.resting', _colors.B50),
+  color: (0, _tokens.token)('color.text.brand', _colors.B500)
+});
+var movedAppearanceStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.subtleWarning.resting', _colors.Y75),
+  color: (0, _tokens.token)('color.text.warning', _colors.N800)
+});
+var newAppearanceStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.subtleDiscovery.resting', _colors.P50),
+  color: (0, _tokens.token)('color.text.discovery', _colors.P500)
+});
+var removedAppearanceStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.subtleDanger.resting', _colors.R50),
+  color: (0, _tokens.token)('color.text.danger', _colors.R500)
+});
+var successAppearanceStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.subtleSuccess.resting', _colors.G50),
+  color: (0, _tokens.token)('color.text.success', _colors.G500)
+});
+var defaultBoldAppearanceStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.boldNeutral.resting', _colors.N500),
+  color: (0, _tokens.token)('color.text.onBold', _colors.N0)
+});
+var inprogressBoldAppearanceStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.boldBrand.resting', _colors.B400),
+  color: (0, _tokens.token)('color.text.onBold', _colors.N0)
+});
+var movedBoldAppearanceStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.boldWarning.resting', _colors.Y500),
+  color: (0, _tokens.token)('color.text.onBoldWarning', _colors.N800)
+});
+var newBoldAppearanceStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.boldDiscovery.resting', _colors.P400),
+  color: (0, _tokens.token)('color.text.onBold', _colors.N0)
+});
+var removedBoldAppearanceStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.boldDanger.resting', _colors.R400),
+  color: (0, _tokens.token)('color.text.onBold', _colors.N0)
+});
+var successBoldAppearanceStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.boldSuccess.resting', _colors.G400),
+  color: (0, _tokens.token)('color.text.onBold', _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',
@@ -26,16 +102,6 @@ var containerStyles = (0, _core.css)({
   textTransform: 'uppercase',
   verticalAlign: 'baseline'
 });
-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'
-});
 /**
  * __Lozenge__
  *
@@ -57,14 +123,12 @@ 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;
-  var backgroundColor = style.backgroundColor || (isBold ? _theme.boldBackgroundColor[appearance] : _theme.defaultBackgroundColor[appearance]).light;
-  var color = style.color || (isBold ? _theme.boldTextColor[appearance] : _theme.defaultTextColor[appearance]).light;
   return (0, _core.jsx)("span", {
     style: {
-      backgroundColor: backgroundColor,
-      color: color
+      backgroundColor: style.backgroundColor,
+      color: style.color
     },
-    css: containerStyles,
+    css: [isBold ? boldAppearances[appearance] : subtleAppearances[appearance], containerStyles],
     "data-testid": testId
   }, (0, _core.jsx)("span", {
     style: {

package/dist/cjs/theme.js

@@ -7,10 +7,11 @@ exports.boldTextColor = exports.boldBackgroundColor = exports.defaultTextColor =
 
 var _colors = require("@atlaskit/theme/colors");
 
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+// TODO: DSP-1392 this file will be removed, don't import anything from this file elsewhere.
+
 /**
- * Note:
- * Lozenge does not support dark mode at the moment.
- * Hence, color values are the same.
+ * @deprecated
  */
 var defaultBackgroundColor = {
   default: {
@@ -38,6 +39,10 @@ var defaultBackgroundColor = {
     dark: _colors.G50
   }
 };
+/**
+ * @deprecated
+ */
+
 exports.defaultBackgroundColor = defaultBackgroundColor;
 var defaultTextColor = {
   default: {
@@ -65,6 +70,10 @@ var defaultTextColor = {
     dark: _colors.G500
   }
 };
+/**
+ * @deprecated
+ */
+
 exports.defaultTextColor = defaultTextColor;
 var boldBackgroundColor = {
   default: {
@@ -92,6 +101,10 @@ var boldBackgroundColor = {
     dark: _colors.G400
   }
 };
+/**
+ * @deprecated
+ */
+
 exports.boldBackgroundColor = boldBackgroundColor;
 var boldTextColor = {
   default: {
@@ -119,4 +132,8 @@ var boldTextColor = {
     dark: _colors.N0
   }
 };
+/**
+ * @deprecated
+ */
+
 exports.boldTextColor = boldTextColor;

package/dist/cjs/version.json

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

package/dist/es2019/Lozenge/index.js

@@ -1,8 +1,83 @@
 /** @jsx jsx */
 import { memo } from 'react';
 import { css, jsx } from '@emotion/core';
+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';
-import { boldBackgroundColor, boldTextColor, defaultBackgroundColor, defaultTextColor } from '../theme';
+import { token } from '@atlaskit/tokens';
+const defaultAppearanceStyles = css({
+  backgroundColor: token('color.background.subtleNeutral.resting', N40),
+  color: token('color.text.highEmphasis', N500)
+});
+const inprogressAppearanceStyles = css({
+  backgroundColor: token('color.background.subtleBrand.resting', B50),
+  color: token('color.text.brand', B500)
+});
+const movedAppearanceStyles = css({
+  backgroundColor: token('color.background.subtleWarning.resting', Y75),
+  color: token('color.text.warning', N800)
+});
+const newAppearanceStyles = css({
+  backgroundColor: token('color.background.subtleDiscovery.resting', P50),
+  color: token('color.text.discovery', P500)
+});
+const removedAppearanceStyles = css({
+  backgroundColor: token('color.background.subtleDanger.resting', R50),
+  color: token('color.text.danger', R500)
+});
+const successAppearanceStyles = css({
+  backgroundColor: token('color.background.subtleSuccess.resting', G50),
+  color: token('color.text.success', G500)
+});
+const defaultBoldAppearanceStyles = css({
+  backgroundColor: token('color.background.boldNeutral.resting', N500),
+  color: token('color.text.onBold', N0)
+});
+const inprogressBoldAppearanceStyles = css({
+  backgroundColor: token('color.background.boldBrand.resting', B400),
+  color: token('color.text.onBold', N0)
+});
+const movedBoldAppearanceStyles = css({
+  backgroundColor: token('color.background.boldWarning.resting', Y500),
+  color: token('color.text.onBoldWarning', N800)
+});
+const newBoldAppearanceStyles = css({
+  backgroundColor: token('color.background.boldDiscovery.resting', P400),
+  color: token('color.text.onBold', N0)
+});
+const removedBoldAppearanceStyles = css({
+  backgroundColor: token('color.background.boldDanger.resting', R400),
+  color: token('color.text.onBold', N0)
+});
+const successBoldAppearanceStyles = css({
+  backgroundColor: token('color.background.boldSuccess.resting', G400),
+  color: token('color.text.onBold', 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',
@@ -15,16 +90,6 @@ const containerStyles = css({
   textTransform: 'uppercase',
   verticalAlign: 'baseline'
 });
-const contentStyles = css({
-  display: 'inline-block',
-  boxSizing: 'border-box',
-  width: '100%',
-  padding: `0 ${gridSize() / 2}px`,
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  verticalAlign: 'top',
-  whiteSpace: 'nowrap'
-});
 /**
  * __Lozenge__
  *
@@ -42,22 +107,18 @@ const Lozenge = /*#__PURE__*/memo(({
   appearance = 'default',
   maxWidth = 200,
   style = {}
-}) => {
-  const backgroundColor = style.backgroundColor || (isBold ? boldBackgroundColor[appearance] : defaultBackgroundColor[appearance]).light;
-  const color = style.color || (isBold ? boldTextColor[appearance] : defaultTextColor[appearance]).light;
-  return jsx("span", {
-    style: {
-      backgroundColor,
-      color
-    },
-    css: containerStyles,
-    "data-testid": testId
-  }, jsx("span", {
-    style: {
-      maxWidth
-    },
-    css: contentStyles
-  }, children));
-});
+}) => jsx("span", {
+  style: {
+    backgroundColor: style.backgroundColor,
+    color: style.color
+  },
+  css: [isBold ? boldAppearances[appearance] : subtleAppearances[appearance], containerStyles],
+  "data-testid": testId
+}, jsx("span", {
+  style: {
+    maxWidth
+  },
+  css: contentStyles
+}, children)));
 Lozenge.displayName = 'Lozenge';
 export default Lozenge;

package/dist/es2019/theme.js

@@ -1,8 +1,8 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+// TODO: DSP-1392 this file will be removed, don't import anything from this file elsewhere.
 import { B400, B50, B500, G400, G50, G500, N0, N40, N500, N800, P400, P50, P500, R400, R50, R500, Y500, Y75 } from '@atlaskit/theme/colors';
 /**
- * Note:
- * Lozenge does not support dark mode at the moment.
- * Hence, color values are the same.
+ * @deprecated
  */
 
 export const defaultBackgroundColor = {
@@ -31,6 +31,10 @@ export const defaultBackgroundColor = {
     dark: G50
   }
 };
+/**
+ * @deprecated
+ */
+
 export const defaultTextColor = {
   default: {
     light: N500,
@@ -57,6 +61,10 @@ export const defaultTextColor = {
     dark: G500
   }
 };
+/**
+ * @deprecated
+ */
+
 export const boldBackgroundColor = {
   default: {
     light: N500,
@@ -83,6 +91,10 @@ export const boldBackgroundColor = {
     dark: G400
   }
 };
+/**
+ * @deprecated
+ */
+
 export const boldTextColor = {
   default: {
     light: N0,
@@ -108,4 +120,7 @@ export const boldTextColor = {
     light: N0,
     dark: N0
   }
-};
+};
+/**
+ * @deprecated
+ */

package/dist/es2019/version.json

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

package/dist/esm/Lozenge/index.js

@@ -1,8 +1,83 @@
 /** @jsx jsx */
 import { memo } from 'react';
 import { css, jsx } from '@emotion/core';
+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';
-import { boldBackgroundColor, boldTextColor, defaultBackgroundColor, defaultTextColor } from '../theme';
+import { token } from '@atlaskit/tokens';
+var defaultAppearanceStyles = css({
+  backgroundColor: token('color.background.subtleNeutral.resting', N40),
+  color: token('color.text.highEmphasis', N500)
+});
+var inprogressAppearanceStyles = css({
+  backgroundColor: token('color.background.subtleBrand.resting', B50),
+  color: token('color.text.brand', B500)
+});
+var movedAppearanceStyles = css({
+  backgroundColor: token('color.background.subtleWarning.resting', Y75),
+  color: token('color.text.warning', N800)
+});
+var newAppearanceStyles = css({
+  backgroundColor: token('color.background.subtleDiscovery.resting', P50),
+  color: token('color.text.discovery', P500)
+});
+var removedAppearanceStyles = css({
+  backgroundColor: token('color.background.subtleDanger.resting', R50),
+  color: token('color.text.danger', R500)
+});
+var successAppearanceStyles = css({
+  backgroundColor: token('color.background.subtleSuccess.resting', G50),
+  color: token('color.text.success', G500)
+});
+var defaultBoldAppearanceStyles = css({
+  backgroundColor: token('color.background.boldNeutral.resting', N500),
+  color: token('color.text.onBold', N0)
+});
+var inprogressBoldAppearanceStyles = css({
+  backgroundColor: token('color.background.boldBrand.resting', B400),
+  color: token('color.text.onBold', N0)
+});
+var movedBoldAppearanceStyles = css({
+  backgroundColor: token('color.background.boldWarning.resting', Y500),
+  color: token('color.text.onBoldWarning', N800)
+});
+var newBoldAppearanceStyles = css({
+  backgroundColor: token('color.background.boldDiscovery.resting', P400),
+  color: token('color.text.onBold', N0)
+});
+var removedBoldAppearanceStyles = css({
+  backgroundColor: token('color.background.boldDanger.resting', R400),
+  color: token('color.text.onBold', N0)
+});
+var successBoldAppearanceStyles = css({
+  backgroundColor: token('color.background.boldSuccess.resting', G400),
+  color: token('color.text.onBold', 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',
@@ -15,16 +90,6 @@ var containerStyles = css({
   textTransform: 'uppercase',
   verticalAlign: 'baseline'
 });
-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'
-});
 /**
  * __Lozenge__
  *
@@ -46,14 +111,12 @@ 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;
-  var backgroundColor = style.backgroundColor || (isBold ? boldBackgroundColor[appearance] : defaultBackgroundColor[appearance]).light;
-  var color = style.color || (isBold ? boldTextColor[appearance] : defaultTextColor[appearance]).light;
   return jsx("span", {
     style: {
-      backgroundColor: backgroundColor,
-      color: color
+      backgroundColor: style.backgroundColor,
+      color: style.color
     },
-    css: containerStyles,
+    css: [isBold ? boldAppearances[appearance] : subtleAppearances[appearance], containerStyles],
     "data-testid": testId
   }, jsx("span", {
     style: {

package/dist/esm/theme.js

@@ -1,8 +1,8 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+// TODO: DSP-1392 this file will be removed, don't import anything from this file elsewhere.
 import { B400, B50, B500, G400, G50, G500, N0, N40, N500, N800, P400, P50, P500, R400, R50, R500, Y500, Y75 } from '@atlaskit/theme/colors';
 /**
- * Note:
- * Lozenge does not support dark mode at the moment.
- * Hence, color values are the same.
+ * @deprecated
  */
 
 export var defaultBackgroundColor = {
@@ -31,6 +31,10 @@ export var defaultBackgroundColor = {
     dark: G50
   }
 };
+/**
+ * @deprecated
+ */
+
 export var defaultTextColor = {
   default: {
     light: N500,
@@ -57,6 +61,10 @@ export var defaultTextColor = {
     dark: G500
   }
 };
+/**
+ * @deprecated
+ */
+
 export var boldBackgroundColor = {
   default: {
     light: N500,
@@ -83,6 +91,10 @@ export var boldBackgroundColor = {
     dark: G400
   }
 };
+/**
+ * @deprecated
+ */
+
 export var boldTextColor = {
   default: {
     light: N0,
@@ -108,4 +120,7 @@ export var boldTextColor = {
     light: N0,
     dark: N0
   }
-};
+};
+/**
+ * @deprecated
+ */

package/dist/esm/version.json

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

package/dist/types/Lozenge/index.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { CSSProperties, ReactNode } from 'react';
-import { ThemeAppearance } from '../theme';
+export declare type ThemeAppearance = 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';
 export interface LozengeProps {
     /**
      * The appearance type.

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from './Lozenge';
-export type { ThemeAppearance } from './theme';
+export type { ThemeAppearance } from './Lozenge';

package/dist/types/theme.d.ts

@@ -1,7 +1,5 @@
 /**
- * Note:
- * Lozenge does not support dark mode at the moment.
- * Hence, color values are the same.
+ * @deprecated
  */
 export declare const defaultBackgroundColor: {
     default: {
@@ -29,6 +27,9 @@ export declare const defaultBackgroundColor: {
         dark: string;
     };
 };
+/**
+ * @deprecated
+ */
 export declare const defaultTextColor: {
     default: {
         light: string;
@@ -55,6 +56,9 @@ export declare const defaultTextColor: {
         dark: string;
     };
 };
+/**
+ * @deprecated
+ */
 export declare const boldBackgroundColor: {
     default: {
         light: string;
@@ -81,6 +85,9 @@ export declare const boldBackgroundColor: {
         dark: string;
     };
 };
+/**
+ * @deprecated
+ */
 export declare const boldTextColor: {
     default: {
         light: string;
@@ -107,4 +114,7 @@ export declare const boldTextColor: {
         dark: string;
     };
 };
+/**
+ * @deprecated
+ */
 export declare type ThemeAppearance = 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/lozenge",
-  "version": "11.0.0",
+  "version": "11.1.3",
   "description": "A lozenge is a visual indicator used to highlight an item's status for quick recognition.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,8 +24,9 @@
     }
   },
   "dependencies": {
-    "@atlaskit/codemod-utils": "^3.2.0",
-    "@atlaskit/theme": "^11.4.0",
+    "@atlaskit/codemod-utils": "^3.4.0",
+    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -36,6 +37,7 @@
     "@atlaskit/build-utils": "*",
     "@atlaskit/button": "*",
     "@atlaskit/docs": "*",
+    "@atlaskit/section-message": "^6.1.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
@@ -55,7 +57,7 @@
       "styling": "emotion",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
-      "theming": "new-theming-api",
+      "theming": "tokens",
       "deprecation": "no-deprecated-imports"
     }
   },