@atlaskit/help 7.1.22 → 7.1.24

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

@@ -6,7 +6,6 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 import styled from '@emotion/styled';
 import { fontSize, gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export var ArticlesListItemWrapper = styled.a({
   position: "relative",
   boxSizing: "border-box",
@@ -14,28 +13,28 @@ export var ArticlesListItemWrapper = styled.a({
   display: "block",
   textDecoration: "none",
   cursor: "pointer",
-  color: "".concat(token('color.text.subtlest', colors.N200)),
+  color: "".concat("var(--ds-text-subtlest, ".concat(colors.N200, ")")),
   borderRadius: "3px",
-  backgroundColor: "".concat(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(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(token('color.background.neutral.subtle.hovered', colors.N30))
+    backgroundColor: "".concat("var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30, ")"))
   },
   '&:active': {
-    backgroundColor: "".concat(token('color.background.neutral.subtle.pressed', colors.B50))
+    backgroundColor: "".concat("var(--ds-background-neutral-subtle-pressed, ".concat(colors.B50, ")"))
   }
 }, function (props) {
   return props.styles;
 });
 export var ArticlesListItemContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  white-space: nowrap;\n"])));
-export var ArticlesListItemTypeTitle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 11px;\n  line-height: ", "px;\n  color: ", ";\n  padding-bottom: ", "px;\n"])), gridSize() * 2, token('color.text.subtlest', colors.N200), gridSize() / 2);
+export var ArticlesListItemTypeTitle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-size: 11px;\n  line-height: ", "px;\n  color: ", ";\n  padding-bottom: ", "px;\n"])), gridSize() * 2, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), gridSize() / 2);
 export var ArticlesListItemLinkIcon = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  align-self: auto;\n  padding-inline-start: 5px;\n  vertical-align: middle;\n"])));
-export var ArticlesListItemTitleText = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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"])), token('color.text', colors.N800), fontSize(), gridSize() * 2.5, gridSize());
-export var ArticlesListItemDescription = styled.p(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: block;\n  line-height: ", "px;\n  color: ", ";\n  margin: 0;\n"])), gridSize() * 2.5, token('color.text.subtle', colors.N400));
+export var ArticlesListItemTitleText = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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, ")"), fontSize(), gridSize() * 2.5, gridSize());
+export var ArticlesListItemDescription = styled.p(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: block;\n  line-height: ", "px;\n  color: ", ";\n  margin: 0;\n"])), gridSize() * 2.5, "var(--ds-text-subtle, ".concat(colors.N400, ")"));

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

@@ -6,8 +6,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 import styled from 'styled-components';
 import * as colors from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
-export var HelpContentButtonContainer = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), gridSize() * 2, token('color.text.subtle', colors.N600), gridSize, token('color.text.subtle', colors.N600), token('color.border.focused', colors.B100), token('color.background.neutral.subtle.hovered', colors.N30), token('color.background.neutral.subtle.pressed', colors.B50));
+export var HelpContentButtonContainer = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), gridSize() * 2, "var(--ds-text-subtle, ".concat(colors.N600, ")"), 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, ")"));
 export var HelpContentButtonIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: middle;\n  width: 20px;\n  height: 20px;\n  border-radius: 4px;\n  position: relative;\n\n  & span {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n"])));
 export var HelpContentButtonText = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: calc(100% - 20px);\n  display: inline-block;\n  vertical-align: middle;\n  padding: 0 ", "px;\n  box-sizing: border-box;\n"])), gridSize);
 export var HelpContentButtonExternalLinkIcon = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: middle;\n  padding-left: ", "px;\n"])), gridSize() / 2);

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

@@ -7,7 +7,6 @@ import { css } from '@emotion/core';
 import styled from '@emotion/styled';
 import * as colors from '@atlaskit/theme/colors';
 import { gridSize, fontSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 
 var baseHeading = function baseHeading(size, lineHeight) {
   return "\n  font-size: ".concat(size / fontSize(), "em;\n  font-style: inherit;\n  line-height: ").concat(lineHeight / size, ";\n");
@@ -17,7 +16,7 @@ export var truncate = function truncate() {
   var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: ", ";\n"])), width);
 };
-export var RelatedArticlesTitle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  color: ", ";\n  font-weight: 600;\n  letter-spacing: -0.006em;\n  padding: ", "px 0;\n"])), baseHeading(16, 20), token('color.text', colors.N800), gridSize() * 2);
+export var RelatedArticlesTitle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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, ")"), gridSize() * 2);
 /**
  * Loading styled-components
  */

package/dist/esm/components/Search/SearchInput/index.js

@@ -76,6 +76,7 @@ export var SearchInput = function SearchInput(_ref) {
   }
 
   return /*#__PURE__*/React.createElement(SearchInputContainer, null, /*#__PURE__*/React.createElement(Textfield, {
+    title: "Help articles search input",
     autoComplete: "off",
     ref: inputRef,
     name: "help-search-input",

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

@@ -6,7 +6,6 @@ import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import { injectIntl } from 'react-intl-next';
 import { messages } from '../../../messages';
 import { SearchResultSearchExternalSiteContainer } from './styled';
-import { token } from '@atlaskit/tokens';
 export var SearchExternalSite = function SearchExternalSite(_ref) {
   var searchExternalUrl = _ref.searchExternalUrl,
       onSearchExternalUrlClick = _ref.onSearchExternalUrlClick,
@@ -34,8 +33,8 @@ export var SearchExternalSite = function SearchExternalSite(_ref) {
     iconAfter: /*#__PURE__*/React.createElement(ShortcutIcon, {
       size: "small",
       label: "",
-      primaryColor: token('color.icon.subtle', colors.N90),
-      secondaryColor: 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/esm/components/Search/SearchResults/SearchResultsEmpty.js

@@ -3,7 +3,6 @@ import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import * as colors from '@atlaskit/theme/colors';
 import Button from '@atlaskit/button/custom-theme-button';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
-import { token } from '@atlaskit/tokens';
 import { injectIntl } from 'react-intl-next';
 import NotFoundImage from '../../../assets/NotFoundImage';
 import { messages } from '../../../messages';
@@ -35,8 +34,8 @@ export var SearchResultsEmpty = function SearchResultsEmpty(_ref) {
     iconAfter: /*#__PURE__*/React.createElement(ShortcutIcon, {
       size: "small",
       label: "",
-      primaryColor: token('color.icon.subtle', colors.N90),
-      secondaryColor: 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/esm/components/Search/SearchResults/styled.js

@@ -6,9 +6,8 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-export var SearchResultsContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), token('elevation.surface', '#FFFFFF'), 2 * gridSize());
+export var SearchResultsContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 * gridSize());
 export var SearchResultsList = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-top: ", "px;\n  position: relative;\n"])), 3 * gridSize());
 export var SearchResultEmptyMessageImage = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n"])), 3 * gridSize(), 3 * gridSize(), 3 * gridSize());
-export var SearchResultEmptyMessageText = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), 3 * gridSize(), 3 * gridSize(), 3 * gridSize(), token('color.text.subtlest', colors.N200));
-export var SearchResultSearchExternalSiteContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: ", "px;\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), 3 * gridSize(), token('color.text.subtlest', colors.N200));
+export var SearchResultEmptyMessageText = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), 3 * gridSize(), 3 * gridSize(), 3 * gridSize(), "var(--ds-text-subtlest, ".concat(colors.N200, ")"));
+export var SearchResultSearchExternalSiteContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: ", "px;\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), 3 * gridSize(), "var(--ds-text-subtlest, ".concat(colors.N200, ")"));

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

@@ -2,7 +2,6 @@ import React, { useCallback } from 'react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import * as colors from '@atlaskit/theme/colors';
 import LightbulbIcon from '@atlaskit/icon/glyph/lightbulb';
-import { token } from '@atlaskit/tokens';
 import { injectIntl } from 'react-intl-next';
 import { name as packageName, version as packageVersion } from '../../../version.json';
 import { useWhatsNewArticleContext } from '../../contexts/whatsNewArticleContext';
@@ -46,7 +45,7 @@ export var WhatsNewButton = function WhatsNewButton(_ref) {
       productName: productName
     }) : formatMessage(messages.help_whats_new_button_label_without_product_name),
     icon: /*#__PURE__*/React.createElement(LightbulbIcon, {
-      primaryColor: token('color.icon.subtle', colors.N600),
+      primaryColor: "var(--ds-icon-subtle, ".concat(colors.N600, ")"),
       size: "medium",
       label: ""
     })

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

@@ -6,6 +6,5 @@ var _templateObject, _templateObject2;
 import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export var WhatsNewResultsEmptyMessageImage = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n"])), 3 * gridSize(), 3 * gridSize(), 3 * gridSize());
-export var WhatsNewResultsEmptyMessageText = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), 3 * gridSize(), 3 * gridSize(), 3 * gridSize(), token('color.text.subtlest', colors.N200));
+export var WhatsNewResultsEmptyMessageText = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), 3 * gridSize(), 3 * gridSize(), 3 * gridSize(), "var(--ds-text-subtlest, ".concat(colors.N200, ")"));

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

@@ -6,6 +6,5 @@ var _templateObject, _templateObject2;
 import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export var SearchResultEmptyMessageImage = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n"])), 3 * gridSize(), 3 * gridSize(), 3 * gridSize());
-export var SearchResultEmptyMessageText = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), 3 * gridSize(), 3 * gridSize(), 3 * gridSize(), token('color.text.subtlest', colors.N200));
+export var SearchResultEmptyMessageText = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), 3 * gridSize(), 3 * gridSize(), 3 * gridSize(), "var(--ds-text-subtlest, ".concat(colors.N200, ")"));

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

@@ -7,7 +7,6 @@ import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
 import { fontSize, fontSizeSmall } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export var WhatsNewResultListItemWrapper = styled.a({
   position: "relative",
   boxSizing: "border-box",
@@ -15,8 +14,8 @@ export var WhatsNewResultListItemWrapper = styled.a({
   display: "block",
   textDecoration: "none",
   cursor: "pointer",
-  color: "".concat(token('color.text.subtlest', colors.N200)),
-  backgroundColor: "".concat(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",
@@ -24,17 +23,17 @@ export var WhatsNewResultListItemWrapper = styled.a({
     outlineOffset: "none"
   },
   '&:focus': {
-    boxShadow: "".concat(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(token('color.background.neutral.subtle.hovered', colors.N30))
+    backgroundColor: "".concat("var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30, ")"))
   },
   '&:active': {
-    backgroundColor: "".concat(token('color.background.neutral.subtle.pressed', colors.B50))
+    backgroundColor: "".concat("var(--ds-background-neutral-subtle-pressed, ".concat(colors.B50, ")"))
   }
 }, function (props) {
   return props.styles;
 });
 export var WhatsNewResultListItemTitleContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  white-space: nowrap;\n  margin-bottom: ", "px;\n"])), gridSize() / 2);
 export var WhatsNewResultListItemTitleText = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-size: ", "px;\n  line-height: ", "px;\n  display: inline-block;\n  vertical-align: middle;\n  margin: 0;\n  padding-left: ", "px;\n  white-space: normal;\n  overflow-x: hidden;\n"])), fontSizeSmall(), fontSize(), gridSize() / 2);
-export var WhatsNewResultListItemDescription = styled.p(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: block;\n  line-height: ", "px;\n  color: ", ";\n  margin: 0;\n"])), gridSize() * 2.5, token('color.text', colors.N800));
+export var WhatsNewResultListItemDescription = styled.p(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: block;\n  line-height: ", "px;\n  color: ", ";\n  margin: 0;\n"])), gridSize() * 2.5, "var(--ds-text, ".concat(colors.N800, ")"));

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

@@ -2,7 +2,6 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useEffect, useState } from 'react';
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import toDate from 'date-fns/toDate';
 import isYesterday from 'date-fns/isYesterday';
 import isToday from 'date-fns/isToday';
@@ -49,7 +48,7 @@ var WhatsNewResultsList = function WhatsNewResultsList(_ref) {
     }, /*#__PURE__*/React.createElement(WhatsNewResultsListGroupTitle, null, whatsNewArticlesGroupedByDate[key].title), whatsNewArticlesGroupedByDate[key].items.map(function (whatsNewArticle, i) {
       return /*#__PURE__*/React.createElement(WhatsNewResultItem, {
         styles: {
-          border: style === 'secondary' ? "2px solid ".concat(token('color.border', colors.N30)) : 0,
+          border: style === 'secondary' ? "2px solid ".concat("var(--ds-border, ".concat(colors.N30, ")")) : 0,
           padding: style === 'secondary' ? "".concat(gridSize(), "px ").concat(gridSize() * 2, "px") : "".concat(gridSize(), "px"),
           marginBottom: style === 'secondary' ? "".concat(gridSize() * 1.5, "px") : 0
         },

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

@@ -6,7 +6,6 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
 import { fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import * as colors from '@atlaskit/theme/colors';
 export var truncate = function truncate() {
   var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
@@ -14,5 +13,5 @@ export var truncate = function truncate() {
 };
 export var WhatsNewResultsListContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
 export var WhatsNewResultsListGroupWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: ", "px 0 ", "px 0;\n"])), gridSize(), gridSize());
-export var WhatsNewResultsListGroupTitle = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", "px;\n  font-weight: bold;\n  padding: 0 ", "px ", "px ", "px;\n  text-transform: uppercase;\n"])), token('color.text.subtlest', colors.N200), fontSizeSmall(), gridSize(), gridSize(), gridSize());
+export var WhatsNewResultsListGroupTitle = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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, ")"), fontSizeSmall(), gridSize(), gridSize(), gridSize());
 export var ToggleShowWhatsNewResultsContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: ", "px 0;\n  span {\n    margin: 0;\n  }\n"])), gridSize());

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

@@ -5,8 +5,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
-export var WhatsNewResultsContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), token('elevation.surface', '#FFFFFF'), 2 * gridSize());
+export var WhatsNewResultsContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 * gridSize());
 export var SelectContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", "px;\n"])), 19 * gridSize());
 export var WhatsNewResultsListContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding-top: ", "px;\n"])), gridSize());
 export var WhatsNewResultsListTitleContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: 0 ", "px;\n"])), gridSize());

package/dist/esm/util/styled.js

@@ -6,10 +6,9 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { keyframes } from '@emotion/core';
 import { WHATS_NEW_ITEM_TYPES } from '../model/WhatsNew';
-export var DividerLine = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  height: 2px;\n  width: 100%;\n  padding: 0 ", "px;\n  margin-top: ", "px;\n  box-sizing: border-box;\n"])), token('color.border', colors.N30A), 2 * gridSize(), gridSize() * 2);
+export var DividerLine = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 * gridSize(), gridSize() * 2);
 /**
  * Loading container
  */
@@ -21,7 +20,7 @@ export var LoadingRectangle = styled.div(_templateObject3 || (_templateObject3 =
   return props.marginTop ? props.marginTop : gridSize() + 'px';
 }, function (props) {
   return props.contentWidth ? props.contentWidth : '100%';
-}, shimmer, token('color.background.neutral', colors.N30), token('color.background.neutral.subtle', colors.N30), token('color.background.neutral', colors.N40), 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
  */
@@ -32,7 +31,7 @@ export var LoadingCircle = styled.div(_templateObject4 || (_templateObject4 = _t
   return props.marginTop ? props.marginTop : '';
 }, function (props) {
   return props.radius ? props.radius : "".concat(gridSize() * 4, "px");
-}, shimmer, token('color.background.neutral', colors.N30), token('color.background.neutral.subtle', colors.N30), token('color.background.neutral', colors.N40), 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
  */
@@ -42,21 +41,21 @@ export var WhatsNewTypeIcon = styled.div(_templateObject5 || (_templateObject5 =
 
   switch (type) {
     case WHATS_NEW_ITEM_TYPES.IMPROVEMENT:
-      return token('color.icon.warning', colors.Y200);
+      return "var(--ds-icon-warning, ".concat(colors.Y200, ")");
 
     case WHATS_NEW_ITEM_TYPES.NEW_FEATURE:
-      return token('color.icon.success', colors.G300);
+      return "var(--ds-icon-success, ".concat(colors.G300, ")");
 
     case WHATS_NEW_ITEM_TYPES.FIX:
-      return token('color.icon.information', colors.B500);
+      return "var(--ds-icon-information, ".concat(colors.B500, ")");
 
     case WHATS_NEW_ITEM_TYPES.EXPERIMENT:
-      return token('color.icon.discovery', colors.P500);
+      return "var(--ds-icon-discovery, ".concat(colors.P500, ")");
 
     case WHATS_NEW_ITEM_TYPES.REMOVED:
-      return token('color.icon.disabled', colors.N700);
+      return "var(--ds-icon-disabled, ".concat(colors.N700, ")");
 
     default:
-      return token('color.icon', colors.N400);
+      return "var(--ds-icon, ".concat(colors.N400, ")");
   }
 }, gridSize() / 2, gridSize() / 2);

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/help",
-  "version": "7.1.22",
+  "version": "7.1.24",
   "description": "A cross-product help component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -38,7 +38,7 @@
     "@atlaskit/notification-log-client": "^6.0.0",
     "@atlaskit/radio": "^5.4.0",
     "@atlaskit/section-message": "^6.3.0",
-    "@atlaskit/select": "^16.0.0",
+    "@atlaskit/select": "^16.1.0",
     "@atlaskit/spinner": "^15.3.0",
     "@atlaskit/textarea": "^4.5.0",
     "@atlaskit/textfield": "^5.3.0",