@atlaskit/help 7.1.23 → 7.1.24

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/help
 
+## 7.1.24
+
+### Patch Changes
+
+- [`6455cf006b3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6455cf006b3) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving performance.
+
 ## 7.1.23
 
 ### Patch Changes

package/dist/cjs/components/Article/HelpArticle/WasHelpfulForm/index.js

@@ -35,8 +35,6 @@ var _textarea = _interopRequireDefault(require("@atlaskit/textarea"));
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/check-circle"));
 
 var _theme = require("@atlaskit/theme");
@@ -260,7 +258,7 @@ var ArticleWasHelpfulForm = function ArticleWasHelpfulForm(_ref) {
           verticalAlign: 'middle'
         }
       }, /*#__PURE__*/_react.default.createElement(_checkCircle.default, {
-        primaryColor: (0, _tokens.token)('color.icon.success', _theme.colors.G400),
+        primaryColor: "var(--ds-icon-success, ".concat(_theme.colors.G400, ")"),
         label: ""
       })), /*#__PURE__*/_react.default.createElement(_styled.ArticleFeedbackText, null, formatMessage(_messages.messages.help_article_rating_form_Success)));
     }

package/dist/cjs/components/Article/HelpArticle/WasHelpfulForm/styled.js

@@ -17,8 +17,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -29,7 +27,7 @@ var ArticleFeedbackContainer = _styled.default.div(_templateObject || (_template
 
 exports.ArticleFeedbackContainer = ArticleFeedbackContainer;
 
-var ArticleFeedbackText = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 0.75rem;\n  font-weight: bold;\n  color: ", ";\n  line-height: ", "px;\n  position: relative;\n  display: inline-block;\n"])), (0, _tokens.token)('color.text.subtlest', colors.N200), (0, _constants.gridSize)() * 4);
+var ArticleFeedbackText = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 0.75rem;\n  font-weight: bold;\n  color: ", ";\n  line-height: ", "px;\n  position: relative;\n  display: inline-block;\n"])), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _constants.gridSize)() * 4);
 
 exports.ArticleFeedbackText = ArticleFeedbackText;
 

package/dist/cjs/components/Article/WhatsNewArticle/styled.js

@@ -17,15 +17,13 @@ var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var WhatsNewTypeTitle = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  text-decoration: none;\n  color: ", ";\n  font-size: ", "px;\n  vertical-align: middle;\n  padding-left: ", "px;\n  line-height: ", "px;\n  white-space: normal;\n  overflow-x: hidden;\n"])), (0, _tokens.token)('color.text.subtlest', colors.N300), (0, _constants.fontSize)(), (0, _constants.gridSize)() / 2, (0, _constants.gridSize)() * 2.5);
+var WhatsNewTypeTitle = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  text-decoration: none;\n  color: ", ";\n  font-size: ", "px;\n  vertical-align: middle;\n  padding-left: ", "px;\n  line-height: ", "px;\n  white-space: normal;\n  overflow-x: hidden;\n"])), "var(--ds-text-subtlest, ".concat(colors.N300, ")"), (0, _constants.fontSize)(), (0, _constants.gridSize)() / 2, (0, _constants.gridSize)() * 2.5);
 
 exports.WhatsNewTypeTitle = WhatsNewTypeTitle;
 
@@ -33,11 +31,11 @@ var WhatsNewIconContainer = _styled.default.div(_templateObject2 || (_templateOb
 
 exports.WhatsNewIconContainer = WhatsNewIconContainer;
 
-var WhatsNewTitleText = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  text-decoration: none;\n  color: ", ";\n  font-size: ", "px;\n  font-weight: 600;\n  white-space: normal;\n  overflow-x: hidden;\n  padding-bottom: ", "px;\n  display: block;\n"])), (0, _tokens.token)('color.text', colors.N800), (0, _constants.fontSize)(), (0, _constants.gridSize)());
+var WhatsNewTitleText = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  text-decoration: none;\n  color: ", ";\n  font-size: ", "px;\n  font-weight: 600;\n  white-space: normal;\n  overflow-x: hidden;\n  padding-bottom: ", "px;\n  display: block;\n"])), "var(--ds-text, ".concat(colors.N800, ")"), (0, _constants.fontSize)(), (0, _constants.gridSize)());
 
 exports.WhatsNewTitleText = WhatsNewTitleText;
 
-var WhatsNewRelatedLinksTitleText = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  text-decoration: none;\n  color: ", ";\n  font-size: ", "px;\n  font-weight: 600;\n  white-space: normal;\n  overflow-x: hidden;\n  padding-bottom: ", "px;\n  display: block;\n"])), (0, _tokens.token)('color.text', colors.N800), (0, _constants.fontSizeSmall)(), (0, _constants.gridSize)());
+var WhatsNewRelatedLinksTitleText = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  text-decoration: none;\n  color: ", ";\n  font-size: ", "px;\n  font-weight: 600;\n  white-space: normal;\n  overflow-x: hidden;\n  padding-bottom: ", "px;\n  display: block;\n"])), "var(--ds-text, ".concat(colors.N800, ")"), (0, _constants.fontSizeSmall)(), (0, _constants.gridSize)());
 
 exports.WhatsNewRelatedLinksTitleText = WhatsNewRelatedLinksTitleText;
 

package/dist/cjs/components/Article/styled.js

@@ -13,10 +13,8 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
-var ArticleContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px ", "px;\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  background-color: ", ";\n  left: 100%;\n  flex: 1;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  z-index: 2;\n"])), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 3, (0, _tokens.token)('elevation.surface', '#FFFFFF'));
+var ArticleContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px ", "px;\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  background-color: ", ";\n  left: 100%;\n  flex: 1;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  z-index: 2;\n"])), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 3, "var(--ds-surface, #FFFFFF)");
 
 exports.ArticleContainer = ArticleContainer;

package/dist/cjs/components/ArticlesList/ArticlesList.js

@@ -13,8 +13,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _reactAnimateHeight = _interopRequireDefault(require("react-animate-height"));
 
 var _ArticlesListItem = _interopRequireDefault(require("./ArticlesListItem"));
@@ -24,7 +22,7 @@ var _constants2 = require("./constants");
 var getStyles = function getStyles(style) {
   if (style === 'secondary') {
     return {
-      border: "2px solid ".concat((0, _tokens.token)('color.border', _colors.N30)),
+      border: "2px solid ".concat("var(--ds-border, ".concat(_colors.N30, ")")),
       padding: "".concat((0, _constants.gridSize)() * 2, "px"),
       marginBottom: "".concat((0, _constants.gridSize)() * 1.5, "px")
     };

package/dist/cjs/components/ArticlesList/ArticlesListItem/index.js

@@ -17,8 +17,6 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _reactIntlNext = require("react-intl-next");
 
 var _version = require("../../../version.json");
@@ -67,8 +65,8 @@ var ArticlesListItem = function ArticlesListItem(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemContainer, null, /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemTitleText, null, title, href && /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemLinkIcon, null, /*#__PURE__*/_react.default.createElement(_shortcut.default, {
     size: "small",
     label: "",
-    primaryColor: (0, _tokens.token)('color.icon.subtle', colors.N90),
-    secondaryColor: (0, _tokens.token)('color.icon.subtle', colors.N90)
+    primaryColor: "var(--ds-icon-subtle, ".concat(colors.N90, ")"),
+    secondaryColor: "var(--ds-icon-subtle, ".concat(colors.N90, ")")
   })))), /*#__PURE__*/_react.default.createElement(_styled.ArticlesListItemDescription, null, description));
 };
 

package/dist/cjs/components/ArticlesList/ArticlesListItem/styled.js

@@ -17,8 +17,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -32,22 +30,22 @@ var ArticlesListItemWrapper = _styled.default.a({
   display: "block",
   textDecoration: "none",
   cursor: "pointer",
-  color: "".concat((0, _tokens.token)('color.text.subtlest', colors.N200)),
+  color: "".concat("var(--ds-text-subtlest, ".concat(colors.N200, ")")),
   borderRadius: "3px",
-  backgroundColor: "".concat((0, _tokens.token)('color.background.neutral.subtle', 'transparent')),
+  backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
   '&:hover, &:focus, &:visited, &:active': {
     textDecoration: "none",
     outline: "none",
     outlineOffset: "none"
   },
   '&:focus': {
-    boxShadow: "".concat((0, _tokens.token)('color.border.focused', colors.B100), " 0px 0px 0px 2px inset")
+    boxShadow: "".concat("var(--ds-border-focused, ".concat(colors.B100, ")"), " 0px 0px 0px 2px inset")
   },
   '&:hover': {
-    backgroundColor: "".concat((0, _tokens.token)('color.background.neutral.subtle.hovered', colors.N30))
+    backgroundColor: "".concat("var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30, ")"))
   },
   '&:active': {
-    backgroundColor: "".concat((0, _tokens.token)('color.background.neutral.subtle.pressed', colors.B50))
+    backgroundColor: "".concat("var(--ds-background-neutral-subtle-pressed, ".concat(colors.B50, ")"))
   }
 }, function (props) {
   return props.styles;
@@ -59,7 +57,7 @@ var ArticlesListItemContainer = _styled.default.div(_templateObject || (_templat
 
 exports.ArticlesListItemContainer = ArticlesListItemContainer;
 
-var ArticlesListItemTypeTitle = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: bold;\n  font-size: 11px;\n  line-height: ", "px;\n  color: ", ";\n  padding-bottom: ", "px;\n"])), (0, _constants.gridSize)() * 2, (0, _tokens.token)('color.text.subtlest', colors.N200), (0, _constants.gridSize)() / 2);
+var ArticlesListItemTypeTitle = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: bold;\n  font-size: 11px;\n  line-height: ", "px;\n  color: ", ";\n  padding-bottom: ", "px;\n"])), (0, _constants.gridSize)() * 2, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _constants.gridSize)() / 2);
 
 exports.ArticlesListItemTypeTitle = ArticlesListItemTypeTitle;
 
@@ -67,10 +65,10 @@ var ArticlesListItemLinkIcon = _styled.default.span(_templateObject3 || (_templa
 
 exports.ArticlesListItemLinkIcon = ArticlesListItemLinkIcon;
 
-var ArticlesListItemTitleText = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  text-decoration: none;\n  color: ", ";\n  font-size: ", "px;\n  font-weight: 600;\n  display: inline-block;\n  line-height: ", "px;\n  white-space: normal;\n  overflow-x: hidden;\n  margin-bottom: ", "px;\n"])), (0, _tokens.token)('color.text', colors.N800), (0, _constants.fontSize)(), (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)());
+var ArticlesListItemTitleText = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  text-decoration: none;\n  color: ", ";\n  font-size: ", "px;\n  font-weight: 600;\n  display: inline-block;\n  line-height: ", "px;\n  white-space: normal;\n  overflow-x: hidden;\n  margin-bottom: ", "px;\n"])), "var(--ds-text, ".concat(colors.N800, ")"), (0, _constants.fontSize)(), (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)());
 
 exports.ArticlesListItemTitleText = ArticlesListItemTitleText;
 
-var ArticlesListItemDescription = _styled.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  line-height: ", "px;\n  color: ", ";\n  margin: 0;\n"])), (0, _constants.gridSize)() * 2.5, (0, _tokens.token)('color.text.subtle', colors.N400));
+var ArticlesListItemDescription = _styled.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  line-height: ", "px;\n  color: ", ";\n  margin: 0;\n"])), (0, _constants.gridSize)() * 2.5, "var(--ds-text-subtle, ".concat(colors.N400, ")"));
 
 exports.ArticlesListItemDescription = ArticlesListItemDescription;

package/dist/cjs/components/HelpContentButton/styled.js

@@ -17,15 +17,13 @@ var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var HelpContentButtonContainer = _styledComponents.default.a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  cursor: pointer;\n  width: calc(100% - ", "px);\n  color: ", ";\n  padding: ", "px;\n  border-radius: 3px;\n\n  &:hover,\n  &:focus,\n  &:visited,\n  &:active {\n    text-decoration: none;\n    outline: none;\n    outline-offset: none;\n    color: ", ";\n  }\n\n  &:focus {\n    box-shadow: ", " 0 0 0 2px inset;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"])), (0, _constants.gridSize)() * 2, (0, _tokens.token)('color.text.subtle', colors.N600), _constants.gridSize, (0, _tokens.token)('color.text.subtle', colors.N600), (0, _tokens.token)('color.border.focused', colors.B100), (0, _tokens.token)('color.background.neutral.subtle.hovered', colors.N30), (0, _tokens.token)('color.background.neutral.subtle.pressed', colors.B50));
+var HelpContentButtonContainer = _styledComponents.default.a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  cursor: pointer;\n  width: calc(100% - ", "px);\n  color: ", ";\n  padding: ", "px;\n  border-radius: 3px;\n\n  &:hover,\n  &:focus,\n  &:visited,\n  &:active {\n    text-decoration: none;\n    outline: none;\n    outline-offset: none;\n    color: ", ";\n  }\n\n  &:focus {\n    box-shadow: ", " 0 0 0 2px inset;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"])), (0, _constants.gridSize)() * 2, "var(--ds-text-subtle, ".concat(colors.N600, ")"), _constants.gridSize, "var(--ds-text-subtle, ".concat(colors.N600, ")"), "var(--ds-border-focused, ".concat(colors.B100, ")"), "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30, ")"), "var(--ds-background-neutral-subtle-pressed, ".concat(colors.B50, ")"));
 
 exports.HelpContentButtonContainer = HelpContentButtonContainer;
 

package/dist/cjs/components/RelatedArticles/styled.js

@@ -19,8 +19,6 @@ var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -38,7 +36,7 @@ var truncate = function truncate() {
 
 exports.truncate = truncate;
 
-var RelatedArticlesTitle = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  color: ", ";\n  font-weight: 600;\n  letter-spacing: -0.006em;\n  padding: ", "px 0;\n"])), baseHeading(16, 20), (0, _tokens.token)('color.text', colors.N800), (0, _constants.gridSize)() * 2);
+var RelatedArticlesTitle = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  color: ", ";\n  font-weight: 600;\n  letter-spacing: -0.006em;\n  padding: ", "px 0;\n"])), baseHeading(16, 20), "var(--ds-text, ".concat(colors.N800, ")"), (0, _constants.gridSize)() * 2);
 /**
  * Loading styled-components
  */

package/dist/cjs/components/Search/SearchResults/SearchExternalSite.js

@@ -25,8 +25,6 @@ var _messages = require("../../../messages");
 
 var _styled = require("./styled");
 
-var _tokens = require("@atlaskit/tokens");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -58,8 +56,8 @@ var SearchExternalSite = function SearchExternalSite(_ref) {
     iconAfter: /*#__PURE__*/_react.default.createElement(_shortcut.default, {
       size: "small",
       label: "",
-      primaryColor: (0, _tokens.token)('color.icon.subtle', colors.N90),
-      secondaryColor: (0, _tokens.token)('color.icon.subtle', colors.N90)
+      primaryColor: "var(--ds-icon-subtle, ".concat(colors.N90, ")"),
+      secondaryColor: "var(--ds-icon-subtle, ".concat(colors.N90, ")")
     }),
     spacing: "compact",
     href: searchExternalUrl,

package/dist/cjs/components/Search/SearchResults/SearchResultsEmpty.js

@@ -19,8 +19,6 @@ var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom
 
 var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _reactIntlNext = require("react-intl-next");
 
 var _NotFoundImage = _interopRequireDefault(require("../../../assets/NotFoundImage"));
@@ -60,8 +58,8 @@ var SearchResultsEmpty = function SearchResultsEmpty(_ref) {
     iconAfter: /*#__PURE__*/_react.default.createElement(_shortcut.default, {
       size: "small",
       label: "",
-      primaryColor: (0, _tokens.token)('color.icon.subtle', colors.N90),
-      secondaryColor: (0, _tokens.token)('color.icon.subtle', colors.N90)
+      primaryColor: "var(--ds-icon-subtle, ".concat(colors.N90, ")"),
+      secondaryColor: "var(--ds-icon-subtle, ".concat(colors.N90, ")")
     }),
     spacing: "compact",
     href: searchExternalUrl,

package/dist/cjs/components/Search/SearchResults/styled.js

@@ -17,15 +17,13 @@ var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var SearchResultsContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  background-color: ", ";\n  flex: 1;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  z-index: 10;\n  padding: 0 ", "px;\n"])), (0, _tokens.token)('elevation.surface', '#FFFFFF'), 2 * (0, _constants.gridSize)());
+var SearchResultsContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  background-color: ", ";\n  flex: 1;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  z-index: 10;\n  padding: 0 ", "px;\n"])), "var(--ds-surface, #FFFFFF)", 2 * (0, _constants.gridSize)());
 
 exports.SearchResultsContainer = SearchResultsContainer;
 
@@ -37,10 +35,10 @@ var SearchResultEmptyMessageImage = _styled.default.div(_templateObject3 || (_te
 
 exports.SearchResultEmptyMessageImage = SearchResultEmptyMessageImage;
 
-var SearchResultEmptyMessageText = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)(), (0, _tokens.token)('color.text.subtlest', colors.N200));
+var SearchResultEmptyMessageText = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)(), "var(--ds-text-subtlest, ".concat(colors.N200, ")"));
 
 exports.SearchResultEmptyMessageText = SearchResultEmptyMessageText;
 
-var SearchResultSearchExternalSiteContainer = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px;\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), 3 * (0, _constants.gridSize)(), (0, _tokens.token)('color.text.subtlest', colors.N200));
+var SearchResultSearchExternalSiteContainer = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px;\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), 3 * (0, _constants.gridSize)(), "var(--ds-text-subtlest, ".concat(colors.N200, ")"));
 
 exports.SearchResultSearchExternalSiteContainer = SearchResultSearchExternalSiteContainer;

package/dist/cjs/components/WhatsNew/WhatsNewButton/index.js

@@ -17,8 +17,6 @@ var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _lightbulb = _interopRequireDefault(require("@atlaskit/icon/glyph/lightbulb"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _reactIntlNext = require("react-intl-next");
 
 var _version = require("../../../version.json");
@@ -74,7 +72,7 @@ var WhatsNewButton = function WhatsNewButton(_ref) {
       productName: productName
     }) : formatMessage(_messages.messages.help_whats_new_button_label_without_product_name),
     icon: /*#__PURE__*/_react.default.createElement(_lightbulb.default, {
-      primaryColor: (0, _tokens.token)('color.icon.subtle', colors.N600),
+      primaryColor: "var(--ds-icon-subtle, ".concat(colors.N600, ")"),
       size: "medium",
       label: ""
     })

package/dist/cjs/components/WhatsNew/WhatsNewResults/WhatsNewResultsEmpty/styled.js

@@ -17,8 +17,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -29,6 +27,6 @@ var WhatsNewResultsEmptyMessageImage = _styled.default.div(_templateObject || (_
 
 exports.WhatsNewResultsEmptyMessageImage = WhatsNewResultsEmptyMessageImage;
 
-var WhatsNewResultsEmptyMessageText = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)(), (0, _tokens.token)('color.text.subtlest', colors.N200));
+var WhatsNewResultsEmptyMessageText = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)(), "var(--ds-text-subtlest, ".concat(colors.N200, ")"));
 
 exports.WhatsNewResultsEmptyMessageText = WhatsNewResultsEmptyMessageText;

package/dist/cjs/components/WhatsNew/WhatsNewResults/WhatsNewResultsError/styled.js

@@ -17,8 +17,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -29,6 +27,6 @@ var SearchResultEmptyMessageImage = _styled.default.div(_templateObject || (_tem
 
 exports.SearchResultEmptyMessageImage = SearchResultEmptyMessageImage;
 
-var SearchResultEmptyMessageText = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)(), (0, _tokens.token)('color.text.subtlest', colors.N200));
+var SearchResultEmptyMessageText = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)(), 3 * (0, _constants.gridSize)(), "var(--ds-text-subtlest, ".concat(colors.N200, ")"));
 
 exports.SearchResultEmptyMessageText = SearchResultEmptyMessageText;

package/dist/cjs/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/WhatsNewResultItem/styled.js

@@ -17,8 +17,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -32,8 +30,8 @@ var WhatsNewResultListItemWrapper = _styled.default.a({
   display: "block",
   textDecoration: "none",
   cursor: "pointer",
-  color: "".concat((0, _tokens.token)('color.text.subtlest', colors.N200)),
-  backgroundColor: "".concat((0, _tokens.token)('color.background.neutral.subtle', colors.N0)),
+  color: "".concat("var(--ds-text-subtlest, ".concat(colors.N200, ")")),
+  backgroundColor: "".concat("var(--ds-background-neutral-subtle, ".concat(colors.N0, ")")),
   borderRadius: "3px",
   '&:hover, &:focus, &:visited, &:active': {
     textDecoration: "none",
@@ -41,13 +39,13 @@ var WhatsNewResultListItemWrapper = _styled.default.a({
     outlineOffset: "none"
   },
   '&:focus': {
-    boxShadow: "".concat((0, _tokens.token)('color.border.focused', colors.B100), " 0px 0px 0px 2px inset")
+    boxShadow: "".concat("var(--ds-border-focused, ".concat(colors.B100, ")"), " 0px 0px 0px 2px inset")
   },
   '&:hover': {
-    backgroundColor: "".concat((0, _tokens.token)('color.background.neutral.subtle.hovered', colors.N30))
+    backgroundColor: "".concat("var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30, ")"))
   },
   '&:active': {
-    backgroundColor: "".concat((0, _tokens.token)('color.background.neutral.subtle.pressed', colors.B50))
+    backgroundColor: "".concat("var(--ds-background-neutral-subtle-pressed, ".concat(colors.B50, ")"))
   }
 }, function (props) {
   return props.styles;
@@ -63,6 +61,6 @@ var WhatsNewResultListItemTitleText = _styled.default.span(_templateObject2 || (
 
 exports.WhatsNewResultListItemTitleText = WhatsNewResultListItemTitleText;
 
-var WhatsNewResultListItemDescription = _styled.default.p(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  line-height: ", "px;\n  color: ", ";\n  margin: 0;\n"])), (0, _constants.gridSize)() * 2.5, (0, _tokens.token)('color.text', colors.N800));
+var WhatsNewResultListItemDescription = _styled.default.p(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  line-height: ", "px;\n  color: ", ";\n  margin: 0;\n"])), (0, _constants.gridSize)() * 2.5, "var(--ds-text, ".concat(colors.N800, ")"));
 
 exports.WhatsNewResultListItemDescription = WhatsNewResultListItemDescription;

package/dist/cjs/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/WhatsNewResultsList.js

@@ -17,8 +17,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _toDate = _interopRequireDefault(require("date-fns/toDate"));
 
 var _isYesterday = _interopRequireDefault(require("date-fns/isYesterday"));
@@ -74,7 +72,7 @@ var WhatsNewResultsList = function WhatsNewResultsList(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_styled.WhatsNewResultsListGroupTitle, null, whatsNewArticlesGroupedByDate[key].title), whatsNewArticlesGroupedByDate[key].items.map(function (whatsNewArticle, i) {
       return /*#__PURE__*/_react.default.createElement(_WhatsNewResultItem.default, {
         styles: {
-          border: style === 'secondary' ? "2px solid ".concat((0, _tokens.token)('color.border', colors.N30)) : 0,
+          border: style === 'secondary' ? "2px solid ".concat("var(--ds-border, ".concat(colors.N30, ")")) : 0,
           padding: style === 'secondary' ? "".concat((0, _constants.gridSize)(), "px ").concat((0, _constants.gridSize)() * 2, "px") : "".concat((0, _constants.gridSize)(), "px"),
           marginBottom: style === 'secondary' ? "".concat((0, _constants.gridSize)() * 1.5, "px") : 0
         },

package/dist/cjs/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/styled.js

@@ -17,8 +17,6 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
@@ -42,7 +40,7 @@ var WhatsNewResultsListGroupWrapper = _styled.default.div(_templateObject3 || (_
 
 exports.WhatsNewResultsListGroupWrapper = WhatsNewResultsListGroupWrapper;
 
-var WhatsNewResultsListGroupTitle = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", "px;\n  font-weight: bold;\n  padding: 0 ", "px ", "px ", "px;\n  text-transform: uppercase;\n"])), (0, _tokens.token)('color.text.subtlest', colors.N200), (0, _constants.fontSizeSmall)(), (0, _constants.gridSize)(), (0, _constants.gridSize)(), (0, _constants.gridSize)());
+var WhatsNewResultsListGroupTitle = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", "px;\n  font-weight: bold;\n  padding: 0 ", "px ", "px ", "px;\n  text-transform: uppercase;\n"])), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _constants.fontSizeSmall)(), (0, _constants.gridSize)(), (0, _constants.gridSize)(), (0, _constants.gridSize)());
 
 exports.WhatsNewResultsListGroupTitle = WhatsNewResultsListGroupTitle;
 

package/dist/cjs/components/WhatsNew/WhatsNewResults/styled.js

@@ -13,11 +13,9 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var WhatsNewResultsContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  background-color: ", ";\n  flex: 1;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  z-index: 1;\n  padding: ", "px;\n"])), (0, _tokens.token)('elevation.surface', '#FFFFFF'), 2 * (0, _constants.gridSize)());
+var WhatsNewResultsContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  background-color: ", ";\n  flex: 1;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  z-index: 1;\n  padding: ", "px;\n"])), "var(--ds-surface, #FFFFFF)", 2 * (0, _constants.gridSize)());
 
 exports.WhatsNewResultsContainer = WhatsNewResultsContainer;
 

package/dist/cjs/util/styled.js

@@ -17,8 +17,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _core = require("@emotion/core");
 
 var _WhatsNew = require("../model/WhatsNew");
@@ -29,7 +27,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var DividerLine = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  height: 2px;\n  width: 100%;\n  padding: 0 ", "px;\n  margin-top: ", "px;\n  box-sizing: border-box;\n"])), (0, _tokens.token)('color.border', colors.N30A), 2 * (0, _constants.gridSize)(), (0, _constants.gridSize)() * 2);
+var DividerLine = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  height: 2px;\n  width: 100%;\n  padding: 0 ", "px;\n  margin-top: ", "px;\n  box-sizing: border-box;\n"])), "var(--ds-border, ".concat(colors.N30A, ")"), 2 * (0, _constants.gridSize)(), (0, _constants.gridSize)() * 2);
 /**
  * Loading container
  */
@@ -44,7 +42,7 @@ var LoadingRectangle = _styled.default.div(_templateObject3 || (_templateObject3
   return props.marginTop ? props.marginTop : (0, _constants.gridSize)() + 'px';
 }, function (props) {
   return props.contentWidth ? props.contentWidth : '100%';
-}, shimmer, (0, _tokens.token)('color.background.neutral', colors.N30), (0, _tokens.token)('color.background.neutral.subtle', colors.N30), (0, _tokens.token)('color.background.neutral', colors.N40), (0, _tokens.token)('color.background.neutral.subtle', colors.N30));
+}, shimmer, "var(--ds-background-neutral, ".concat(colors.N30, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), "var(--ds-background-neutral, ".concat(colors.N40, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"));
 /**
  * Loading Circle
  */
@@ -58,7 +56,7 @@ var LoadingCircle = _styled.default.div(_templateObject4 || (_templateObject4 =
   return props.marginTop ? props.marginTop : '';
 }, function (props) {
   return props.radius ? props.radius : "".concat((0, _constants.gridSize)() * 4, "px");
-}, shimmer, (0, _tokens.token)('color.background.neutral', colors.N30), (0, _tokens.token)('color.background.neutral.subtle', colors.N30), (0, _tokens.token)('color.background.neutral', colors.N40), (0, _tokens.token)('color.background.neutral.subtle', colors.N30));
+}, shimmer, "var(--ds-background-neutral, ".concat(colors.N30, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), "var(--ds-background-neutral, ".concat(colors.N40, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"));
 /**
  * What's new icon
  */
@@ -71,22 +69,22 @@ var WhatsNewTypeIcon = _styled.default.div(_templateObject5 || (_templateObject5
 
   switch (type) {
     case _WhatsNew.WHATS_NEW_ITEM_TYPES.IMPROVEMENT:
-      return (0, _tokens.token)('color.icon.warning', colors.Y200);
+      return "var(--ds-icon-warning, ".concat(colors.Y200, ")");
 
     case _WhatsNew.WHATS_NEW_ITEM_TYPES.NEW_FEATURE:
-      return (0, _tokens.token)('color.icon.success', colors.G300);
+      return "var(--ds-icon-success, ".concat(colors.G300, ")");
 
     case _WhatsNew.WHATS_NEW_ITEM_TYPES.FIX:
-      return (0, _tokens.token)('color.icon.information', colors.B500);
+      return "var(--ds-icon-information, ".concat(colors.B500, ")");
 
     case _WhatsNew.WHATS_NEW_ITEM_TYPES.EXPERIMENT:
-      return (0, _tokens.token)('color.icon.discovery', colors.P500);
+      return "var(--ds-icon-discovery, ".concat(colors.P500, ")");
 
     case _WhatsNew.WHATS_NEW_ITEM_TYPES.REMOVED:
-      return (0, _tokens.token)('color.icon.disabled', colors.N700);
+      return "var(--ds-icon-disabled, ".concat(colors.N700, ")");
 
     default:
-      return (0, _tokens.token)('color.icon', colors.N400);
+      return "var(--ds-icon, ".concat(colors.N400, ")");
   }
 }, (0, _constants.gridSize)() / 2, (0, _constants.gridSize)() / 2);
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/help",
-	"version": "7.1.23",
+	"version": "7.1.24",
 	"sideEffects": false
 }

package/dist/es2019/components/Article/HelpArticle/WasHelpfulForm/index.js

@@ -10,7 +10,6 @@ import { RadioGroup } from '@atlaskit/radio';
 import { Checkbox } from '@atlaskit/checkbox';
 import TextArea from '@atlaskit/textarea';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle'; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
@@ -193,7 +192,7 @@ export const ArticleWasHelpfulForm = ({
           verticalAlign: 'middle'
         }
       }, /*#__PURE__*/React.createElement(CheckCircleIcon, {
-        primaryColor: token('color.icon.success', colors.G400),
+        primaryColor: `var(--ds-icon-success, ${colors.G400})`,
         label: ""
       })), /*#__PURE__*/React.createElement(ArticleFeedbackText, null, formatMessage(messages.help_article_rating_form_Success)));
     }

package/dist/es2019/components/Article/HelpArticle/WasHelpfulForm/styled.js

@@ -2,14 +2,13 @@
 import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const ArticleFeedbackContainer = styled.div`
   position: relative;
 `;
 export const ArticleFeedbackText = styled.div`
   font-size: 0.75rem;
   font-weight: bold;
-  color: ${token('color.text.subtlest', colors.N200)};
+  color: ${`var(--ds-text-subtlest, ${colors.N200})`};
   line-height: ${gridSize() * 4}px;
   position: relative;
   display: inline-block;