@atlaskit/help 7.0.2 → 7.1.0

package/dist/cjs/util/styled.js

@@ -17,6 +17,8 @@ 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");
@@ -27,7 +29,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"])), 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"])), (0, _tokens.token)('color.border', colors.N30A), 2 * (0, _constants.gridSize)(), (0, _constants.gridSize)() * 2);
 /**
  * Loading container
  */
@@ -42,7 +44,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, colors.N30, colors.N30, colors.N40, colors.N30);
+}, 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));
 /**
  * Loading Circle
  */
@@ -56,7 +58,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, colors.N30, colors.N30, colors.N40, colors.N30);
+}, 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));
 /**
  * What's new icon
  */
@@ -69,22 +71,22 @@ var WhatsNewTypeIcon = _styled.default.div(_templateObject5 || (_templateObject5
 
   switch (type) {
     case _WhatsNew.WHATS_NEW_ITEM_TYPES.IMPROVEMENT:
-      return colors.Y200;
+      return (0, _tokens.token)('color.icon.warning', colors.Y200);
 
     case _WhatsNew.WHATS_NEW_ITEM_TYPES.NEW_FEATURE:
-      return colors.G300;
+      return (0, _tokens.token)('color.icon.success', colors.G300);
 
     case _WhatsNew.WHATS_NEW_ITEM_TYPES.FIX:
-      return colors.B500;
+      return (0, _tokens.token)('color.icon.information', colors.B500);
 
     case _WhatsNew.WHATS_NEW_ITEM_TYPES.EXPERIMENT:
-      return colors.P500;
+      return (0, _tokens.token)('color.icon.discovery', colors.P500);
 
     case _WhatsNew.WHATS_NEW_ITEM_TYPES.REMOVED:
-      return colors.N700;
+      return (0, _tokens.token)('color.icon.disabled', colors.N700);
 
     default:
-      return colors.N400;
+      return (0, _tokens.token)('color.icon', colors.N400);
   }
 }, (0, _constants.gridSize)() / 2, (0, _constants.gridSize)() / 2);
 

package/dist/cjs/version.json

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

package/dist/es2019/assets/ErrorImage.js

@@ -1,7 +1,7 @@
 import React from 'react';
 export const svg = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="90" height="116" viewBox="0 0 90 116" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 0H89.2308V116H0V0Z" fill="white"/>
+<path d="M0 0H89.2308V116H0V0Z"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M51.5691 40.9323L87.7184 103.605C89.1943 106.161 89.195 109.312 87.72 111.869C86.2451 114.426 83.519 116.001 80.5691 116H8.27039C5.3205 116.001 2.59431 114.426 1.11941 111.869C-0.355493 109.312 -0.354868 106.161 1.12105 103.605L37.2704 40.9323C38.7445 38.3748 41.47 36.7992 44.4197 36.7992C47.3695 36.7992 50.095 38.3748 51.5691 40.9323ZM47.4558 86.4337L49.0227 62.2806C49.113 60.9009 48.6284 59.5454 47.6841 58.5363C46.7399 57.5271 45.4202 56.9545 44.0389 56.9544C42.6575 56.9545 41.3379 57.5271 40.3936 58.5363C39.4493 59.5454 38.9647 60.9009 39.055 62.2806L40.622 86.4337C40.7395 88.2366 42.2338 89.6395 44.0389 89.6414C45.844 89.6395 47.3383 88.2366 47.4558 86.4337ZM40.5075 103.118C39.4304 102.124 38.8237 100.72 38.8374 99.2536C38.8071 96.3645 41.1146 93.994 44.0008 93.9492C46.8187 93.943 49.1423 96.158 49.2734 98.9756C49.4045 101.793 47.2968 104.215 44.4905 104.471C43.0314 104.603 41.5845 104.112 40.5075 103.118Z" fill="url(#paint0_linear)"/>
 <g opacity="0.6">
 <path d="M50.4387 15.3414L46.407 0.789686C46.3669 0.639179 46.2278 0.536726 46.0723 0.543265C45.9168 0.549803 45.7868 0.663577 45.7595 0.816916L43.224 14.4864L40.0683 13.8982C39.956 13.8774 39.8409 13.9157 39.7636 13.9998C39.6862 14.0839 39.6574 14.2018 39.6874 14.3121L43.7192 28.8639C43.7533 29.0153 43.8878 29.1229 44.0429 29.1229C44.198 29.1229 44.3324 29.0153 44.3666 28.8639L46.9021 15.1944L50.0578 15.7553C50.1701 15.7762 50.2852 15.7378 50.3625 15.6538C50.4399 15.5697 50.4687 15.4517 50.4387 15.3414Z" fill="#C1C7D0"/>

package/dist/es2019/assets/NotFoundImage.js

@@ -1,7 +1,7 @@
 import React from 'react';
 export const svg = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="100" height="116" viewBox="0 0 100 116" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 0H100V116H0V0Z" fill="white"/>
+<path d="M0 0H100V116H0V0Z"/>
 <g opacity="0.3">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M14.4783 115.563H23.4169H23.4237C24.2045 115.563 24.8375 114.928 24.8375 114.144C24.8375 113.36 24.2045 112.725 23.4237 112.725H14.4783C13.6975 112.725 13.0645 113.36 13.0645 114.144C13.0645 114.928 13.6975 115.563 14.4783 115.563ZM40.6686 115.563H31.7301C30.9492 115.563 30.3162 114.928 30.3162 114.144C30.3162 113.36 30.9492 112.725 31.7301 112.725H40.6686C41.4495 112.725 42.0825 113.36 42.0825 114.144C42.0825 114.928 41.4495 115.563 40.6686 115.563ZM48.975 115.563H57.9204C58.7013 115.563 59.3343 114.928 59.3343 114.144C59.3343 113.36 58.7013 112.725 57.9204 112.725H48.975C48.1942 112.725 47.5612 113.36 47.5612 114.144C47.5612 114.928 48.1942 115.563 48.975 115.563ZM66.2268 115.563H75.1722C75.953 115.563 76.586 114.928 76.586 114.144C76.586 113.36 75.953 112.725 75.1722 112.725H66.2268C65.446 112.725 64.813 113.36 64.813 114.144C64.813 114.928 65.446 115.563 66.2268 115.563Z" fill="#B3BAC5"/>
 <path d="M6.17203 115.563H1.41386C0.633005 115.563 0 114.928 0 114.144V109.368C0 108.584 0.633005 107.948 1.41386 107.948C2.19471 107.948 2.82771 108.584 2.82771 109.368V112.725H6.17203C6.95288 112.725 7.58588 113.36 7.58588 114.144C7.58588 114.928 6.95288 115.563 6.17203 115.563Z" fill="#B3BAC5"/>

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

@@ -10,6 +10,7 @@ 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
 
@@ -192,7 +193,7 @@ export const ArticleWasHelpfulForm = ({
           verticalAlign: 'middle'
         }
       }, /*#__PURE__*/React.createElement(CheckCircleIcon, {
-        primaryColor: colors.G400,
+        primaryColor: token('color.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,13 +2,14 @@
 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: ${colors.N200};
+  color: ${token('color.text.subtlest', colors.N200)};
   line-height: ${gridSize() * 4}px;
   position: relative;
   display: inline-block;

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

@@ -2,9 +2,10 @@
 import styled from '@emotion/styled';
 import { fontSize, fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export const WhatsNewTypeTitle = styled.span`
   text-decoration: none;
-  color: ${colors.N300};
+  color: ${token('color.text.subtlest', colors.N300)};
   font-size: ${fontSize()}px;
   vertical-align: middle;
   padding-left: ${gridSize() / 2}px;
@@ -18,7 +19,7 @@ export const WhatsNewIconContainer = styled.div`
 `;
 export const WhatsNewTitleText = styled.span`
   text-decoration: none;
-  color: ${colors.N800};
+  color: ${token('color.text', colors.N800)};
   font-size: ${fontSize()}px;
   font-weight: 600;
   white-space: normal;
@@ -28,7 +29,7 @@ export const WhatsNewTitleText = styled.span`
 `;
 export const WhatsNewRelatedLinksTitleText = styled.span`
   text-decoration: none;
-  color: ${colors.N800};
+  color: ${token('color.text', colors.N800)};
   font-size: ${fontSizeSmall()}px;
   font-weight: 600;
   white-space: normal;

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

@@ -1,13 +1,14 @@
 /** @jsx jsx */
 import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 export const ArticleContainer = styled.div`
   padding: ${gridSize() * 2}px ${gridSize() * 3}px;
   position: absolute;
   height: 100%;
   width: 100%;
   top: 0;
-  background-color: #ffffff;
+  background-color: ${token('elevation.surface', '#FFFFFF')};
   left: 100%;
   flex: 1;
   flex-direction: column;

package/dist/es2019/components/ArticlesList/ArticlesList.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import AnimateHeight from 'react-animate-height';
 import ArticlesListItem from './ArticlesListItem';
 import { MIN_ITEMS_TO_DISPLAY, ANIMATE_HEIGHT_TRANSITION_DURATION_MS } from './constants';
@@ -14,7 +15,7 @@ const articlesList = ({
 }) => articles && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, articles.slice(0, minItemsToDisplay).map((article, i) => {
   return /*#__PURE__*/React.createElement(ArticlesListItem, {
     styles: {
-      border: style === 'secondary' ? `2px solid ${colors.N30}` : 0,
+      border: style === 'secondary' ? `2px solid ${token('color.border', colors.N30)}` : 0,
       padding: style === 'secondary' ? `${gridSize()}px ${gridSize() * 2}px` : `${gridSize()}px`,
       marginBottom: style === 'secondary' ? `${gridSize() * 1.5}px` : 0
     },
@@ -35,7 +36,7 @@ const articlesList = ({
   height: numberOfArticlesToDisplay > minItemsToDisplay ? 'auto' : 0
 }, articles.slice(minItemsToDisplay, articles.length).map((article, i) => /*#__PURE__*/React.createElement(ArticlesListItem, {
   styles: {
-    border: style === 'secondary' ? `2px solid ${colors.N30}` : 0,
+    border: style === 'secondary' ? `2px solid ${token('color.border', colors.N30)}` : 0,
     padding: style === 'secondary' ? `${gridSize()}px ${gridSize() * 2}px` : `${gridSize()}px`,
     marginBottom: style === 'secondary' ? `${gridSize() * 1.5}px` : 0
   },

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

@@ -2,6 +2,7 @@ import React from 'react';
 import * as colors from '@atlaskit/theme/colors';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
+import { token } from '@atlaskit/tokens';
 import { injectIntl } from 'react-intl-next';
 import { name as packageName, version as packageVersion } from '../../../version.json';
 // import { messages } from '../../../messages';
@@ -55,8 +56,8 @@ export const ArticlesListItem = ({
   }, /*#__PURE__*/React.createElement(ArticlesListItemContainer, null, typeTitle && /*#__PURE__*/React.createElement(ArticlesListItemTypeTitle, null, formatMessage(typeTitle)), /*#__PURE__*/React.createElement(ArticlesListItemTitleText, null, title), href && /*#__PURE__*/React.createElement(ArticlesListItemLinkIcon, null, /*#__PURE__*/React.createElement(ShortcutIcon, {
     size: "small",
     label: "",
-    primaryColor: colors.N90,
-    secondaryColor: colors.N90
+    primaryColor: token('color.icon.subtle', colors.N90),
+    secondaryColor: token('color.icon.subtle', colors.N90)
   }))), /*#__PURE__*/React.createElement(ArticlesListItemDescription, null, description));
 };
 

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

@@ -2,6 +2,7 @@
 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 const ArticlesListItemWrapper = styled.a({
   position: `relative`,
   boxSizing: `border-box`,
@@ -9,21 +10,22 @@ export const ArticlesListItemWrapper = styled.a({
   display: `block`,
   textDecoration: `none`,
   cursor: `pointer`,
-  color: `${colors.N200}`,
+  color: `${token('color.text.subtlest', colors.N200)}`,
   borderRadius: `3px`,
+  backgroundColor: `${token('color.background.neutral.subtle', 'transparent')}`,
   '&:hover, &:focus, &:visited, &:active': {
     textDecoration: `none`,
     outline: `none`,
     outlineOffset: `none`
   },
   '&:focus': {
-    boxShadow: `${colors.B100} 0px 0px 0px 2px inset`
+    boxShadow: `${token('color.border.focused', colors.B100)} 0px 0px 0px 2px inset`
   },
   '&:hover': {
-    backgroundColor: `${colors.N30}`
+    backgroundColor: `${token('color.background.neutral.subtle.hovered', colors.N30)}`
   },
   '&:active': {
-    backgroundColor: `${colors.B50}`
+    backgroundColor: `${token('color.background.neutral.subtle.pressed', colors.B50)}`
   }
 }, props => props.styles);
 export const ArticlesListItemContainer = styled.div`
@@ -34,7 +36,7 @@ export const ArticlesListItemTypeTitle = styled.div`
   font-weight: bold;
   font-size: 11px;
   line-height: ${gridSize() * 2}px;
-  color: ${colors.N200};
+  color: ${token('color.text.subtlest', colors.N200)};
   padding-bottom: ${gridSize() / 2}px;
 `;
 export const ArticlesListItemLinkIcon = styled.div`
@@ -42,7 +44,7 @@ export const ArticlesListItemLinkIcon = styled.div`
 `;
 export const ArticlesListItemTitleText = styled.span`
   text-decoration: none;
-  color: ${colors.N800};
+  color: ${token('color.text', colors.N800)};
   font-size: ${fontSize()}px;
   font-weight: 600;
   display: block;
@@ -54,6 +56,6 @@ export const ArticlesListItemTitleText = styled.span`
 export const ArticlesListItemDescription = styled.p`
   display: block;
   line-height: ${gridSize() * 2.5}px;
-  color: ${colors.N400};
+  color: ${token('color.text.subtle', colors.N400)};
   margin: 0;
 `;

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

@@ -2,11 +2,12 @@
 import styled from 'styled-components';
 import * as colors from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 export const HelpContentButtonContainer = styled.a`
   display: block;
   cursor: pointer;
   width: calc(100% - ${gridSize() * 2}px);
-  color: ${colors.N600};
+  color: ${token('color.text.subtle', colors.N600)};
   padding: ${gridSize}px;
   border-radius: 3px;
 
@@ -17,19 +18,19 @@ export const HelpContentButtonContainer = styled.a`
     text-decoration: none;
     outline: none;
     outline-offset: none;
-    color: ${colors.N600};
+    color: ${token('color.text.subtle', colors.N600)};
   }
 
   &:focus {
-    box-shadow: ${colors.B100} 0 0 0 2px inset;
+    box-shadow: ${token('color.border.focused', colors.B100)} 0 0 0 2px inset;
   }
 
   &:hover {
-    background-color: ${colors.N30};
+    background-color: ${token('color.background.neutral.subtle.hovered', colors.N30)};
   }
 
   &:active {
-    background-color: ${colors.B50};
+    background-color: ${token('color.background.neutral.subtle.pressed', colors.B50)};
   }
 `;
 export const HelpContentButtonIcon = styled.div`

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

@@ -3,6 +3,7 @@ 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';
 
 const baseHeading = (size, lineHeight) => `
   font-size: ${size / fontSize()}em;
@@ -18,7 +19,7 @@ export const truncate = (width = '100%') => css`
 `;
 export const RelatedArticlesTitle = styled.div`
   ${baseHeading(16, 20)}
-  color: ${colors.heading};
+  color: ${token('color.text', colors.N800)};
   font-weight: 600;
   letter-spacing: -0.006em;
   padding: ${gridSize() * 2}px 0;

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

@@ -6,6 +6,7 @@ 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 const SearchExternalSite = ({
   searchExternalUrl,
   onSearchExternalUrlClick,
@@ -35,8 +36,8 @@ export const SearchExternalSite = ({
     iconAfter: /*#__PURE__*/React.createElement(ShortcutIcon, {
       size: "small",
       label: "",
-      primaryColor: colors.N90,
-      secondaryColor: colors.N90
+      primaryColor: token('color.icon.subtle', colors.N90),
+      secondaryColor: token('color.icon.subtle', colors.N90)
     }),
     spacing: "compact",
     href: searchExternalUrl,

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

@@ -3,6 +3,7 @@ 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';
@@ -36,8 +37,8 @@ export const SearchResultsEmpty = ({
     iconAfter: /*#__PURE__*/React.createElement(ShortcutIcon, {
       size: "small",
       label: "",
-      primaryColor: colors.N90,
-      secondaryColor: colors.N90
+      primaryColor: token('color.icon.subtle', colors.N90),
+      secondaryColor: token('color.icon.subtle', colors.N90)
     }),
     spacing: "compact",
     href: searchExternalUrl,

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

@@ -2,12 +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 SearchResultsContainer = styled.div`
   position: absolute;
   height: 100%;
   width: 100%;
   top: 0;
-  background-color: #ffffff;
+  background-color: ${token('elevation.surface', '#FFFFFF')};
   flex: 1;
   flex-direction: column;
   box-sizing: border-box;
@@ -29,7 +30,7 @@ export const SearchResultEmptyMessageText = styled.div`
   text-align: center;
 
   p {
-    color: ${colors.N200};
+    color: ${token('color.text.subtlest', colors.N200)};
   }
 `;
 export const SearchResultSearchExternalSiteContainer = styled.div`
@@ -37,6 +38,6 @@ export const SearchResultSearchExternalSiteContainer = styled.div`
   text-align: center;
 
   p {
-    color: ${colors.N200};
+    color: ${token('color.text.subtlest', colors.N200)};
   }
 `;

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

@@ -2,6 +2,7 @@ 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';
@@ -47,7 +48,7 @@ export const WhatsNewButton = ({
       productName
     }) : formatMessage(messages.help_whats_new_button_label_without_product_name),
     icon: /*#__PURE__*/React.createElement(LightbulbIcon, {
-      primaryColor: colors.N600,
+      primaryColor: token('color.icon.subtle', colors.N600),
       size: "medium",
       label: ""
     })

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

@@ -2,6 +2,7 @@
 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 WhatsNewResultsEmptyMessageImage = styled.div`
   padding: ${3 * gridSize()}px ${3 * gridSize()}px 0 ${3 * gridSize()}px;
   text-align: center;
@@ -11,6 +12,6 @@ export const WhatsNewResultsEmptyMessageText = styled.div`
   text-align: center;
 
   p {
-    color: ${colors.N200};
+    color: ${token('color.text.subtlest', colors.N200)};
   }
 `;

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

@@ -2,6 +2,7 @@
 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 SearchResultEmptyMessageImage = styled.div`
   padding: ${3 * gridSize()}px ${3 * gridSize()}px 0 ${3 * gridSize()}px;
   text-align: center;
@@ -11,6 +12,6 @@ export const SearchResultEmptyMessageText = styled.div`
   text-align: center;
 
   p {
-    color: ${colors.N200};
+    color: ${token('color.text.subtlest', colors.N200)};
   }
 `;

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

@@ -3,6 +3,7 @@ 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 const WhatsNewResultListItemWrapper = styled.a({
   position: `relative`,
   boxSizing: `border-box`,
@@ -10,7 +11,8 @@ export const WhatsNewResultListItemWrapper = styled.a({
   display: `block`,
   textDecoration: `none`,
   cursor: `pointer`,
-  color: `${colors.N200}`,
+  color: `${token('color.text.subtlest', colors.N200)}`,
+  backgroundColor: `${token('color.background.neutral.subtle', colors.N0)}`,
   borderRadius: `3px`,
   '&:hover, &:focus, &:visited, &:active': {
     textDecoration: `none`,
@@ -18,13 +20,13 @@ export const WhatsNewResultListItemWrapper = styled.a({
     outlineOffset: `none`
   },
   '&:focus': {
-    boxShadow: `${colors.B100} 0px 0px 0px 2px inset`
+    boxShadow: `${token('color.border.focused', colors.B100)} 0px 0px 0px 2px inset`
   },
   '&:hover': {
-    backgroundColor: `${colors.N30}`
+    backgroundColor: `${token('color.background.neutral.subtle.hovered', colors.N30)}`
   },
   '&:active': {
-    backgroundColor: `${colors.B50}`
+    backgroundColor: `${token('color.background.neutral.subtle.pressed', colors.B50)}`
   }
 }, props => props.styles);
 export const WhatsNewResultListItemTitleContainer = styled.div`
@@ -45,6 +47,6 @@ export const WhatsNewResultListItemTitleText = styled.span`
 export const WhatsNewResultListItemDescription = styled.p`
   display: block;
   line-height: ${gridSize() * 2.5}px;
-  color: ${colors.N800};
+  color: ${token('color.text', colors.N800)};
   margin: 0;
 `;

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

@@ -1,6 +1,7 @@
 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';
@@ -40,7 +41,7 @@ const WhatsNewResultsList = ({
       key: key
     }, /*#__PURE__*/React.createElement(WhatsNewResultsListGroupTitle, null, whatsNewArticlesGroupedByDate[key].title), whatsNewArticlesGroupedByDate[key].items.map((whatsNewArticle, i) => /*#__PURE__*/React.createElement(WhatsNewResultItem, {
       styles: {
-        border: style === 'secondary' ? `2px solid ${colors.N30}` : 0,
+        border: style === 'secondary' ? `2px solid ${token('color.border', colors.N30)}` : 0,
         padding: style === 'secondary' ? `${gridSize()}px ${gridSize() * 2}px` : `${gridSize()}px`,
         marginBottom: style === 'secondary' ? `${gridSize() * 1.5}px` : 0
       },

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

@@ -2,6 +2,7 @@
 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 const truncate = (width = '100%') => css`
   overflow-x: hidden;
@@ -16,7 +17,7 @@ export const WhatsNewResultsListGroupWrapper = styled.div`
   padding: ${gridSize()}px 0 ${gridSize()}px 0;
 `;
 export const WhatsNewResultsListGroupTitle = styled.div`
-  color: ${colors.N200};
+  color: ${token('color.text.subtlest', colors.N200)};
   font-size: ${fontSizeSmall()}px;
   font-weight: bold;
   padding: 0 ${gridSize()}px ${gridSize()}px ${gridSize()}px;

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

@@ -1,12 +1,13 @@
 /** @jsx jsx */
 import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 export const WhatsNewResultsContainer = styled.div`
   position: absolute;
   height: 100%;
   width: 100%;
   top: 0;
-  background-color: #ffffff;
+  background-color: ${token('elevation.surface', '#FFFFFF')};
   flex: 1;
   flex-direction: column;
   box-sizing: border-box;

package/dist/es2019/util/styled.js

@@ -2,10 +2,11 @@
 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 const DividerLine = styled.div`
-  background-color: ${colors.N30A};
+  background-color: ${token('color.border', colors.N30A)};
   height: 2px;
   width: 100%;
   padding: 0 ${2 * gridSize()}px;
@@ -37,12 +38,12 @@ export const LoadingRectangle = styled.div`
   animation-iteration-count: infinite;
   animation-name: ${shimmer};
   animation-timing-function: linear;
-  background-color: ${colors.N30};
+  background-color: ${token('color.background.neutral', colors.N30)};
   background-image: linear-gradient(
     to right,
-    ${colors.N30} 10%,
-    ${colors.N40} 20%,
-    ${colors.N30} 30%
+    ${token('color.background.neutral.subtle', colors.N30)} 10%,
+    ${token('color.background.neutral', colors.N40)} 20%,
+    ${token('color.background.neutral.subtle', colors.N30)} 30%
   );
   background-repeat: no-repeat;
 `;
@@ -63,12 +64,12 @@ export const LoadingCircle = styled.div`
   animation-iteration-count: infinite;
   animation-name: ${shimmer};
   animation-timing-function: linear;
-  background-color: ${colors.N30};
+  background-color: ${token('color.background.neutral', colors.N30)};
   background-image: linear-gradient(
     to right,
-    ${colors.N30} 10%,
-    ${colors.N40} 20%,
-    ${colors.N30} 30%
+    ${token('color.background.neutral.subtle', colors.N30)} 10%,
+    ${token('color.background.neutral', colors.N40)} 20%,
+    ${token('color.background.neutral.subtle', colors.N30)} 30%
   );
   background-repeat: no-repeat;
 `;
@@ -88,22 +89,22 @@ export const WhatsNewTypeIcon = styled.div`
 }) => {
   switch (type) {
     case WHATS_NEW_ITEM_TYPES.IMPROVEMENT:
-      return colors.Y200;
+      return token('color.icon.warning', colors.Y200);
 
     case WHATS_NEW_ITEM_TYPES.NEW_FEATURE:
-      return colors.G300;
+      return token('color.icon.success', colors.G300);
 
     case WHATS_NEW_ITEM_TYPES.FIX:
-      return colors.B500;
+      return token('color.icon.information', colors.B500);
 
     case WHATS_NEW_ITEM_TYPES.EXPERIMENT:
-      return colors.P500;
+      return token('color.icon.discovery', colors.P500);
 
     case WHATS_NEW_ITEM_TYPES.REMOVED:
-      return colors.N700;
+      return token('color.icon.disabled', colors.N700);
 
     default:
-      return colors.N400;
+      return token('color.icon', colors.N400);
   }
 }};
 

package/dist/es2019/version.json

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