@atlaskit/help 7.1.22 → 7.1.24

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;

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

@@ -2,10 +2,9 @@
 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: ${token('color.text.subtlest', colors.N300)};
+  color: ${`var(--ds-text-subtlest, ${colors.N300})`};
   font-size: ${fontSize()}px;
   vertical-align: middle;
   padding-left: ${gridSize() / 2}px;
@@ -19,7 +18,7 @@ export const WhatsNewIconContainer = styled.div`
 `;
 export const WhatsNewTitleText = styled.span`
   text-decoration: none;
-  color: ${token('color.text', colors.N800)};
+  color: ${`var(--ds-text, ${colors.N800})`};
   font-size: ${fontSize()}px;
   font-weight: 600;
   white-space: normal;
@@ -29,7 +28,7 @@ export const WhatsNewTitleText = styled.span`
 `;
 export const WhatsNewRelatedLinksTitleText = styled.span`
   text-decoration: none;
-  color: ${token('color.text', colors.N800)};
+  color: ${`var(--ds-text, ${colors.N800})`};
   font-size: ${fontSizeSmall()}px;
   font-weight: 600;
   white-space: normal;

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

@@ -1,14 +1,13 @@
 /** @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: ${token('elevation.surface', '#FFFFFF')};
+  background-color: ${"var(--ds-surface, #FFFFFF)"};
   left: 100%;
   flex: 1;
   flex-direction: column;

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N30 } 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';
@@ -9,7 +8,7 @@ import { MIN_ITEMS_TO_DISPLAY, ANIMATE_HEIGHT_TRANSITION_DURATION_MS } from './c
 const getStyles = style => {
   if (style === 'secondary') {
     return {
-      border: `2px solid ${token('color.border', N30)}`,
+      border: `2px solid ${`var(--ds-border, ${N30})`}`,
       padding: `${gridSize() * 2}px`,
       marginBottom: `${gridSize() * 1.5}px`
     };

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

@@ -2,7 +2,6 @@ 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 { ArticlesListItemWrapper, ArticlesListItemContainer, ArticlesListItemTitleText, ArticlesListItemDescription, ArticlesListItemLinkIcon } from './styled';
@@ -42,8 +41,8 @@ export const ArticlesListItem = ({
   }, /*#__PURE__*/React.createElement(ArticlesListItemContainer, null, /*#__PURE__*/React.createElement(ArticlesListItemTitleText, null, title, href && /*#__PURE__*/React.createElement(ArticlesListItemLinkIcon, null, /*#__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, ${colors.N90})`,
+    secondaryColor: `var(--ds-icon-subtle, ${colors.N90})`
   })))), /*#__PURE__*/React.createElement(ArticlesListItemDescription, null, description));
 };
 

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

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

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

@@ -2,12 +2,11 @@
 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: ${token('color.text.subtle', colors.N600)};
+  color: ${`var(--ds-text-subtle, ${colors.N600})`};
   padding: ${gridSize}px;
   border-radius: 3px;
 
@@ -18,19 +17,19 @@ export const HelpContentButtonContainer = styled.a`
     text-decoration: none;
     outline: none;
     outline-offset: none;
-    color: ${token('color.text.subtle', colors.N600)};
+    color: ${`var(--ds-text-subtle, ${colors.N600})`};
   }
 
   &:focus {
-    box-shadow: ${token('color.border.focused', colors.B100)} 0 0 0 2px inset;
+    box-shadow: ${`var(--ds-border-focused, ${colors.B100})`} 0 0 0 2px inset;
   }
 
   &:hover {
-    background-color: ${token('color.background.neutral.subtle.hovered', colors.N30)};
+    background-color: ${`var(--ds-background-neutral-subtle-hovered, ${colors.N30})`};
   }
 
   &:active {
-    background-color: ${token('color.background.neutral.subtle.pressed', colors.B50)};
+    background-color: ${`var(--ds-background-neutral-subtle-pressed, ${colors.B50})`};
   }
 `;
 export const HelpContentButtonIcon = styled.div`

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

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

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

@@ -77,6 +77,7 @@ export const SearchInput = ({
   }
 
   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/es2019/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 const SearchExternalSite = ({
   searchExternalUrl,
   onSearchExternalUrlClick,
@@ -36,8 +35,8 @@ export const SearchExternalSite = ({
     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, ${colors.N90})`,
+      secondaryColor: `var(--ds-icon-subtle, ${colors.N90})`
     }),
     spacing: "compact",
     href: searchExternalUrl,

package/dist/es2019/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';
@@ -37,8 +36,8 @@ export const SearchResultsEmpty = ({
     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, ${colors.N90})`,
+      secondaryColor: `var(--ds-icon-subtle, ${colors.N90})`
     }),
     spacing: "compact",
     href: searchExternalUrl,

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

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

package/dist/es2019/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';
@@ -48,7 +47,7 @@ export const WhatsNewButton = ({
       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, ${colors.N600})`,
       size: "medium",
       label: ""
     })

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

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

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

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

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

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

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

@@ -1,7 +1,6 @@
 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';
@@ -41,7 +40,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 ${token('color.border', colors.N30)}` : 0,
+        border: style === 'secondary' ? `2px solid ${`var(--ds-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,7 +2,6 @@
 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;
@@ -17,7 +16,7 @@ export const WhatsNewResultsListGroupWrapper = styled.div`
   padding: ${gridSize()}px 0 ${gridSize()}px 0;
 `;
 export const WhatsNewResultsListGroupTitle = styled.div`
-  color: ${token('color.text.subtlest', colors.N200)};
+  color: ${`var(--ds-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,13 +1,12 @@
 /** @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: ${token('elevation.surface', '#FFFFFF')};
+  background-color: ${"var(--ds-surface, #FFFFFF)"};
   flex: 1;
   flex-direction: column;
   box-sizing: border-box;

package/dist/es2019/util/styled.js

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

package/dist/es2019/version.json

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

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

@@ -11,7 +11,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
 
@@ -223,7 +222,7 @@ export var ArticleWasHelpfulForm = function ArticleWasHelpfulForm(_ref) {
           verticalAlign: 'middle'
         }
       }, /*#__PURE__*/React.createElement(CheckCircleIcon, {
-        primaryColor: token('color.icon.success', colors.G400),
+        primaryColor: "var(--ds-icon-success, ".concat(colors.G400, ")"),
         label: ""
       })), /*#__PURE__*/React.createElement(ArticleFeedbackText, null, formatMessage(messages.help_article_rating_form_Success)));
     }

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

@@ -6,7 +6,6 @@ var _templateObject, _templateObject2, _templateObject3;
 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 ArticleFeedbackContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-export var ArticleFeedbackText = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-size: 0.75rem;\n  font-weight: bold;\n  color: ", ";\n  line-height: ", "px;\n  position: relative;\n  display: inline-block;\n"])), token('color.text.subtlest', colors.N200), gridSize() * 4);
+export var ArticleFeedbackText = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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, ")"), gridSize() * 4);
 export var ArticleFeedbackAnswerWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding-top: ", "px;\n"])), gridSize() * 2);

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

@@ -6,10 +6,9 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 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 var WhatsNewTypeTitle = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), token('color.text.subtlest', colors.N300), fontSize(), gridSize() / 2, gridSize() * 2.5);
+export var WhatsNewTypeTitle = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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, ")"), fontSize(), gridSize() / 2, gridSize() * 2.5);
 export var WhatsNewIconContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: block;\n  padding-bottom: ", "px;\n"])), gridSize());
-export var WhatsNewTitleText = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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"])), token('color.text', colors.N800), fontSize(), gridSize());
-export var WhatsNewRelatedLinksTitleText = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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"])), token('color.text', colors.N800), fontSizeSmall(), gridSize());
+export var WhatsNewTitleText = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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, ")"), fontSize(), gridSize());
+export var WhatsNewRelatedLinksTitleText = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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, ")"), fontSizeSmall(), gridSize());
 export var RelatedLinkContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-bottom: ", "px;\n"])), gridSize());
 export var ExternalLinkIconContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: middle;\n  padding-left: ", "px;\n"])), gridSize() / 2);

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

@@ -5,5 +5,4 @@ var _templateObject;
 /** @jsx jsx */
 import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
-export var ArticleContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), gridSize() * 2, gridSize() * 3, token('elevation.surface', '#FFFFFF'));
+export var ArticleContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), gridSize() * 2, gridSize() * 3, "var(--ds-surface, #FFFFFF)");

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N30 } 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';
@@ -9,7 +8,7 @@ import { MIN_ITEMS_TO_DISPLAY, ANIMATE_HEIGHT_TRANSITION_DURATION_MS } from './c
 var getStyles = function getStyles(style) {
   if (style === 'secondary') {
     return {
-      border: "2px solid ".concat(token('color.border', N30)),
+      border: "2px solid ".concat("var(--ds-border, ".concat(N30, ")")),
       padding: "".concat(gridSize() * 2, "px"),
       marginBottom: "".concat(gridSize() * 1.5, "px")
     };

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

@@ -2,7 +2,6 @@ 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 { ArticlesListItemWrapper, ArticlesListItemContainer, ArticlesListItemTitleText, ArticlesListItemDescription, ArticlesListItemLinkIcon } from './styled';
@@ -43,8 +42,8 @@ export var ArticlesListItem = function ArticlesListItem(_ref) {
   }, /*#__PURE__*/React.createElement(ArticlesListItemContainer, null, /*#__PURE__*/React.createElement(ArticlesListItemTitleText, null, title, href && /*#__PURE__*/React.createElement(ArticlesListItemLinkIcon, null, /*#__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, ")")
   })))), /*#__PURE__*/React.createElement(ArticlesListItemDescription, null, description));
 };