@atlaskit/help-layout 4.0.1 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/help-layout
 
+## 4.1.0
+
+### Minor Changes
+
+- [`b03b488246c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b03b488246c) - [ux] Added new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
 ## 4.0.1
 
 ### Patch Changes

package/dist/cjs/components/Header/BackButton.js

@@ -2,15 +2,11 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.BackButton = void 0;
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -19,15 +15,13 @@ var _reactIntlNext = require("react-intl-next");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
-var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
-
 var _constants = require("@atlaskit/theme/constants");
 
 var _reactTransitionGroup = require("react-transition-group");
 
 var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-left"));
 
-var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 
 var _version = require("../../version.json");
 
@@ -37,19 +31,11 @@ var _constants2 = require("../constants");
 
 var _styled = require("./styled");
 
-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; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-var buttonTheme = {
-  color: colors.N500,
-  fontWeight: 500
-}; // Animation
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+// Animation
 var defaultStyle = {
   transition: "left ".concat(_constants2.TRANSITION_DURATION_MS, "ms, opacity ").concat(_constants2.TRANSITION_DURATION_MS, "ms"),
   left: "".concat((0, _constants.gridSize)() * 3, "px"),
@@ -93,22 +79,13 @@ var BackButton = function BackButton(_ref) {
   }, function (state) {
     return /*#__PURE__*/_react.default.createElement(_styled.BackButtonContainer, {
       style: _objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state])
-    }, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+    }, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
       onClick: function onClick(event) {
         if (state === 'entered') {
           handleOnClick(event);
         }
       },
       appearance: "subtle",
-      theme: function theme(currentTheme, themeProps) {
-        var _currentTheme = currentTheme(themeProps),
-            buttonStyles = _currentTheme.buttonStyles,
-            rest = (0, _objectWithoutProperties2.default)(_currentTheme, ["buttonStyles"]);
-
-        return _objectSpread({
-          buttonStyles: _objectSpread(_objectSpread({}, buttonStyles), buttonTheme)
-        }, rest);
-      },
       iconBefore: /*#__PURE__*/_react.default.createElement(_arrowLeft.default, {
         label: "",
         size: "medium"

package/dist/cjs/components/Header/CloseButton.js

@@ -15,7 +15,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
-var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 
 var _close = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/close"));
 
@@ -51,7 +51,7 @@ var CloseButton = function CloseButton(_ref) {
   return /*#__PURE__*/_react.default.createElement(_styled.CloseButtonContainer, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: formatMessage(_messages.messages.help_panel_header_close),
     position: "left"
-  }, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+  }, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
     onClick: handleOnClick,
     appearance: "subtle",
     iconBefore: /*#__PURE__*/_react.default.createElement(_close.default, {

package/dist/cjs/components/Header/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 _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); }
@@ -26,7 +28,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var HEADER_TITLE_HEIGHT = (0, _constants.gridSize)() * 7;
 var HEADER_TITLE_BORDER_BOTTOM = 2;
 
-var HeaderContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-bottom: ", "px solid ", ";\n  justify-content: space-between;\n  position: relative;\n"])), colors.N10, HEADER_TITLE_BORDER_BOTTOM, colors.N30);
+var HeaderContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-bottom: ", "px solid\n    ", ";\n  justify-content: space-between;\n  position: relative;\n"])), (0, _tokens.token)('color.background.neutral', colors.N10), HEADER_TITLE_BORDER_BOTTOM, (0, _tokens.token)('color.border', colors.N30));
 
 exports.HeaderContainer = HeaderContainer;
 
@@ -38,7 +40,7 @@ var BackButtonContainer = _styled.default.div(_templateObject3 || (_templateObje
 
 exports.BackButtonContainer = BackButtonContainer;
 
-var HeaderTitle = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  text-align: center;\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: ", "px;\n  width: 100%;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  display: inline-block;\n  overflow: hidden;\n  vertical-align: middle;\n"])), colors.N500, HEADER_TITLE_HEIGHT);
+var HeaderTitle = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  text-align: center;\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: ", "px;\n  width: 100%;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  display: inline-block;\n  overflow: hidden;\n  vertical-align: middle;\n"])), (0, _tokens.token)('color.text.subtle', colors.N500), HEADER_TITLE_HEIGHT);
 
 exports.HeaderTitle = HeaderTitle;
 

package/dist/cjs/components/HelpLayoutContent.js

@@ -19,13 +19,15 @@ var _messages = require("../messages");
 
 var _styled = require("./styled");
 
+var _excluded = ["isLoading", "footer", "children", "intl"];
+
 var HelpContent = function HelpContent(props) {
   var _props$isLoading = props.isLoading,
       isLoading = _props$isLoading === void 0 ? false : _props$isLoading,
       footer = props.footer,
       children = props.children,
       formatMessage = props.intl.formatMessage,
-      rest = (0, _objectWithoutProperties2.default)(props, ["isLoading", "footer", "children", "intl"]);
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   return /*#__PURE__*/_react.default.createElement(_styled.Container, null, /*#__PURE__*/_react.default.createElement(_styled.Section, null, /*#__PURE__*/_react.default.createElement(_Header.default, rest), isLoading ? /*#__PURE__*/_react.default.createElement(_styled.LoadingContainer, {
     "aria-label": formatMessage(_messages.messages.help_loading),
     role: "img"

package/dist/cjs/components/styled.js

@@ -19,13 +19,15 @@ 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, _templateObject7;
 
 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 Container = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  background-color: #ffffff;\n"])));
+var Container = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  background-color: ", ";\n"])), (0, _tokens.token)('elevation.surface', '#FFFFFF'));
 
 exports.Container = Container;
 
@@ -33,12 +35,12 @@ var Section = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _t
 
 exports.Section = Section;
 
-var DividerLine = _styled.default.div(_templateObject3 || (_templateObject3 = (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(_templateObject3 || (_templateObject3 = (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);
 
 exports.DividerLine = DividerLine;
 var FOOTER_BORDER_TOP = 2;
 
-var HelpFooter = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px 0;\n  box-sizing: border-box;\n  background-color: ", ";\n  border-top: ", "px solid ", ";\n  justify-content: space-between;\n"])), (0, _constants.gridSize)(), colors.N10, FOOTER_BORDER_TOP, colors.N30);
+var HelpFooter = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px 0;\n  box-sizing: border-box;\n  background-color: ", ";\n  border-top: ", "px solid ", ";\n  justify-content: space-between;\n"])), (0, _constants.gridSize)(), (0, _tokens.token)('color.background.neutral', colors.N10), FOOTER_BORDER_TOP, (0, _tokens.token)('color.border', colors.N30));
 /**
  * Loading
  */
@@ -57,6 +59,6 @@ var LoadingRectangle = _styled.default.div(_templateObject7 || (_templateObject7
   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));
 
 exports.LoadingRectangle = LoadingRectangle;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/help-layout",
-	"version": "4.0.1",
+	"version": "4.1.0",
 	"sideEffects": false
 }

package/dist/es2019/components/Header/BackButton.js

@@ -1,20 +1,15 @@
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
-import * as colors from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { Transition } from 'react-transition-group';
 import ArrowleftIcon from '@atlaskit/icon/glyph/arrow-left';
-import Button from '@atlaskit/button/custom-theme-button';
+import Button from '@atlaskit/button/standard-button';
 import { name as packageName, version as packageVersion } from '../../version.json';
 import { messages } from '../../messages';
 import { TRANSITION_DURATION_MS } from '../constants';
 import { BackButtonContainer } from './styled';
-const buttonTheme = {
-  color: colors.N500,
-  fontWeight: 500
-}; // Animation
-
+// Animation
 const defaultStyle = {
   transition: `left ${TRANSITION_DURATION_MS}ms, opacity ${TRANSITION_DURATION_MS}ms`,
   left: `${gridSize() * 3}px`,
@@ -66,18 +61,6 @@ export const BackButton = ({
       }
     },
     appearance: "subtle",
-    theme: (currentTheme, themeProps) => {
-      const {
-        buttonStyles,
-        ...rest
-      } = currentTheme(themeProps);
-      return {
-        buttonStyles: { ...buttonStyles,
-          ...buttonTheme
-        },
-        ...rest
-      };
-    },
     iconBefore: /*#__PURE__*/React.createElement(ArrowleftIcon, {
       label: "",
       size: "medium"

package/dist/es2019/components/Header/CloseButton.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import Tooltip from '@atlaskit/tooltip';
-import Button from '@atlaskit/button/custom-theme-button';
+import Button from '@atlaskit/button/standard-button';
 import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
 import { name as packageName, version as packageVersion } from '../../version.json';
 import { messages } from '../../messages';

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

@@ -2,11 +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';
 const HEADER_TITLE_HEIGHT = gridSize() * 7;
 const HEADER_TITLE_BORDER_BOTTOM = 2;
 export const HeaderContainer = styled.div`
-  background-color: ${colors.N10};
-  border-bottom: ${HEADER_TITLE_BORDER_BOTTOM}px solid ${colors.N30};
+  background-color: ${token('color.background.neutral', colors.N10)};
+  border-bottom: ${HEADER_TITLE_BORDER_BOTTOM}px solid
+    ${token('color.border', colors.N30)};
   justify-content: space-between;
   position: relative;
 `;
@@ -21,7 +23,7 @@ export const BackButtonContainer = styled.div`
   left: ${gridSize()}px;
 `;
 export const HeaderTitle = styled.div`
-  color: ${colors.N500};
+  color: ${token('color.text.subtle', colors.N500)};
   text-align: center;
   font-size: 1rem;
   font-weight: 600;

package/dist/es2019/components/styled.js

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import { keyframes } from '@emotion/core';
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export const Container = styled.div`
   position: absolute;
   top: 0;
@@ -11,7 +12,7 @@ export const Container = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
-  background-color: #ffffff;
+  background-color: ${token('elevation.surface', '#FFFFFF')};
 `;
 export const Section = styled.div`
   flex-grow: 1;
@@ -20,7 +21,7 @@ export const Section = styled.div`
   min-height: 0;
 `;
 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;
@@ -31,8 +32,8 @@ const FOOTER_BORDER_TOP = 2;
 export const HelpFooter = styled.div`
   padding: ${gridSize()}px 0;
   box-sizing: border-box;
-  background-color: ${colors.N10};
-  border-top: ${FOOTER_BORDER_TOP}px solid ${colors.N30};
+  background-color: ${token('color.background.neutral', colors.N10)};
+  border-top: ${FOOTER_BORDER_TOP}px solid ${token('color.border', colors.N30)};
   justify-content: space-between;
 `;
 /**
@@ -62,12 +63,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;
 `;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/help-layout",
-	"version": "4.0.1",
+	"version": "4.1.0",
 	"sideEffects": false
 }

package/dist/esm/components/Header/BackButton.js

@@ -1,27 +1,21 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
-import * as colors from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { Transition } from 'react-transition-group';
 import ArrowleftIcon from '@atlaskit/icon/glyph/arrow-left';
-import Button from '@atlaskit/button/custom-theme-button';
+import Button from '@atlaskit/button/standard-button';
 import { name as packageName, version as packageVersion } from '../../version.json';
 import { messages } from '../../messages';
 import { TRANSITION_DURATION_MS } from '../constants';
 import { BackButtonContainer } from './styled';
-var buttonTheme = {
-  color: colors.N500,
-  fontWeight: 500
-}; // Animation
-
+// Animation
 var defaultStyle = {
   transition: "left ".concat(TRANSITION_DURATION_MS, "ms, opacity ").concat(TRANSITION_DURATION_MS, "ms"),
   left: "".concat(gridSize() * 3, "px"),
@@ -71,15 +65,6 @@ export var BackButton = function BackButton(_ref) {
         }
       },
       appearance: "subtle",
-      theme: function theme(currentTheme, themeProps) {
-        var _currentTheme = currentTheme(themeProps),
-            buttonStyles = _currentTheme.buttonStyles,
-            rest = _objectWithoutProperties(_currentTheme, ["buttonStyles"]);
-
-        return _objectSpread({
-          buttonStyles: _objectSpread(_objectSpread({}, buttonStyles), buttonTheme)
-        }, rest);
-      },
       iconBefore: /*#__PURE__*/React.createElement(ArrowleftIcon, {
         label: "",
         size: "medium"

package/dist/esm/components/Header/CloseButton.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import Tooltip from '@atlaskit/tooltip';
-import Button from '@atlaskit/button/custom-theme-button';
+import Button from '@atlaskit/button/standard-button';
 import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
 import { name as packageName, version as packageVersion } from '../../version.json';
 import { messages } from '../../messages';

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

@@ -6,10 +6,11 @@ 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';
 var HEADER_TITLE_HEIGHT = gridSize() * 7;
 var HEADER_TITLE_BORDER_BOTTOM = 2;
-export var HeaderContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-bottom: ", "px solid ", ";\n  justify-content: space-between;\n  position: relative;\n"])), colors.N10, HEADER_TITLE_BORDER_BOTTOM, colors.N30);
+export var HeaderContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-bottom: ", "px solid\n    ", ";\n  justify-content: space-between;\n  position: relative;\n"])), token('color.background.neutral', colors.N10), HEADER_TITLE_BORDER_BOTTOM, token('color.border', colors.N30));
 export var CloseButtonContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: ", "px;\n  top: ", "px;\n"])), gridSize(), gridSize() * 1.5);
 export var BackButtonContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n"])), gridSize() * 1.5, gridSize());
-export var HeaderTitle = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  text-align: center;\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: ", "px;\n  width: 100%;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  display: inline-block;\n  overflow: hidden;\n  vertical-align: middle;\n"])), colors.N500, HEADER_TITLE_HEIGHT);
+export var HeaderTitle = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  text-align: center;\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: ", "px;\n  width: 100%;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  display: inline-block;\n  overflow: hidden;\n  vertical-align: middle;\n"])), token('color.text.subtle', colors.N500), HEADER_TITLE_HEIGHT);
 export var HeaderContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: 0 ", "px ", "px ", "px;\n"])), gridSize() * 2, gridSize() * 2, gridSize() * 2);

package/dist/esm/components/HelpLayoutContent.js

@@ -1,4 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["isLoading", "footer", "children", "intl"];
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import Header from './Header';
@@ -10,7 +11,7 @@ export var HelpContent = function HelpContent(props) {
       footer = props.footer,
       children = props.children,
       formatMessage = props.intl.formatMessage,
-      rest = _objectWithoutProperties(props, ["isLoading", "footer", "children", "intl"]);
+      rest = _objectWithoutProperties(props, _excluded);
 
   return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Section, null, /*#__PURE__*/React.createElement(Header, rest), isLoading ? /*#__PURE__*/React.createElement(LoadingContainer, {
     "aria-label": formatMessage(messages.help_loading),

package/dist/esm/components/styled.js

@@ -7,11 +7,12 @@ import styled from '@emotion/styled';
 import { keyframes } from '@emotion/core';
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-export var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  background-color: #ffffff;\n"])));
+import { token } from '@atlaskit/tokens';
+export var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  background-color: ", ";\n"])), token('elevation.surface', '#FFFFFF'));
 export var Section = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n"])));
-export var DividerLine = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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 * gridSize(), gridSize() * 2);
+export var DividerLine = styled.div(_templateObject3 || (_templateObject3 = _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);
 var FOOTER_BORDER_TOP = 2;
-export var HelpFooter = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: ", "px 0;\n  box-sizing: border-box;\n  background-color: ", ";\n  border-top: ", "px solid ", ";\n  justify-content: space-between;\n"])), gridSize(), colors.N10, FOOTER_BORDER_TOP, colors.N30);
+export var HelpFooter = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: ", "px 0;\n  box-sizing: border-box;\n  background-color: ", ";\n  border-top: ", "px solid ", ";\n  justify-content: space-between;\n"])), gridSize(), token('color.background.neutral', colors.N10), FOOTER_BORDER_TOP, token('color.border', colors.N30));
 /**
  * Loading
  */
@@ -24,4 +25,4 @@ export var LoadingRectangle = styled.div(_templateObject7 || (_templateObject7 =
   return props.marginTop ? props.marginTop : gridSize() + 'px';
 }, function (props) {
   return props.contentWidth ? props.contentWidth : '100%';
-}, shimmer, colors.N30, colors.N30, colors.N40, colors.N30);
+}, 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));

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/help-layout",
-	"version": "4.0.1",
+	"version": "4.1.0",
 	"sideEffects": false
 }

package/dist/types/components/HelpLayout.d.ts

@@ -5,5 +5,5 @@ export declare type Props = HelpLayoutProps & WithAnalyticsEventsProps;
 export declare class HelpLayout extends React.PureComponent<Props> {
     render(): JSX.Element;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Props, "children" | "footer" | "isLoading" | "headerTitle" | "headerContent" | "isBackbuttonVisible" | "onCloseButtonClick" | "onBackButtonClick"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "footer" | "key" | "analyticsContext" | "isLoading" | "headerTitle" | "headerContent" | "isBackbuttonVisible" | "onCloseButtonClick" | "onBackButtonClick"> & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Props, "children" | "footer" | "headerTitle" | "headerContent" | "isBackbuttonVisible" | "onCloseButtonClick" | "onBackButtonClick" | "isLoading"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "footer" | "key" | "analyticsContext" | "headerTitle" | "headerContent" | "isBackbuttonVisible" | "onCloseButtonClick" | "onBackButtonClick" | "isLoading"> & React.RefAttributes<any>>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/help-layout",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "Layout for the atlaskit/help component.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,8 +26,9 @@
     "@atlaskit/analytics": "^8.0.0",
     "@atlaskit/analytics-next": "^8.0.0",
     "@atlaskit/button": "^16.0.0",
-    "@atlaskit/icon": "^21.9.0",
-    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.6.1",
     "@atlaskit/tooltip": "^17.5.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
@@ -43,8 +44,8 @@
   "devDependencies": {
     "@atlaskit/docs": "*",
     "@atlaskit/navigation": "^37.0.0",
-    "@atlaskit/page": "^12.0.0",
-    "@atlaskit/right-side-panel": "^1.0.0",
+    "@atlaskit/page": "^12.1.0",
+    "@atlaskit/right-side-panel": "^1.1.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "algoliasearch": "^3.35.1",
     "enzyme": "^3.10.0",
@@ -57,5 +58,10 @@
     "ui",
     "help"
   ],
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
+  "techstack": {
+    "@repo/internal": {
+      "theming": "tokens"
+    }
+  }
 }