@atlaskit/page-layout 1.0.5 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/page-layout
 
+## 1.1.0
+
+### Minor Changes
+
+- [`567a96da90e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/567a96da90e) - [ux] Instrumented page-layout with the 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.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.0.7
+
+### Patch Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Bump raf-schd to latest (4.0.3), including better TS typings.
+
+## 1.0.6
+
+### Patch Changes
+
+- [`192d35cfdbd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/192d35cfdbd) - Defaults native button usage to type="button" to prevent unintended submittig of forms.
+
 ## 1.0.5
 
 ### Patch Changes

package/__perf__/utils/perf-example.tsx

@@ -2,6 +2,8 @@
 
 import { css, jsx } from '@emotion/core';
 
+import { token } from '@atlaskit/tokens';
+
 import {
   Content,
   LeftSidebar,
@@ -33,7 +35,7 @@ const Wrapper = ({
       boxSizing: 'border-box',
       overflowY: 'auto',
       overflowX: noHorizontalScrollbar ? 'hidden' : 'auto',
-      backgroundColor: 'white',
+      backgroundColor: token('color.background.neutral.subtle', 'white'),
     }}
   >
     {children}
@@ -61,7 +63,7 @@ const BasicGrid = () => {
           </div>
         </LeftSidebar>
         <Main>
-          <Wrapper noOutline borderColor="black">
+          <Wrapper noOutline borderColor={token('color.border', 'black')}>
             <h3 css={{ textAlign: 'center' }}>Main</h3>
           </Wrapper>
         </Main>

package/__perf__/utils/product-integration/Create.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 
 import { Create } from '@atlaskit/atlassian-navigation';
+import { token } from '@atlaskit/tokens';
 
 const StyledTooltip = () => (
   <span>
     Create
-    <span style={{ color: 'orange' }}> [c]</span>
+    <span style={{ color: token('color.text.accent.orange', 'orange') }}>
+      {' '}
+      [c]
+    </span>
   </span>
 );
 

package/__perf__/utils/product-integration/SampleFooter.tsx

@@ -6,6 +6,7 @@ import { jsx } from '@emotion/core';
 import { CustomItemComponentProps } from '@atlaskit/menu';
 import { Footer } from '@atlaskit/side-navigation';
 import { B400, N200 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 
 const Container: React.FC<CustomItemComponentProps> = (props) => {
   return <div {...props} />;
@@ -16,9 +17,9 @@ const Container: React.FC<CustomItemComponentProps> = (props) => {
 const ExampleFooter = () => {
   const linkCSS = {
     fontSize: 12,
-    color: N200,
+    color: token('color.text.subtle', N200),
     '&:hover': {
-      color: B400,
+      color: token('color.background.brand.hovered', B400),
       textDecoration: 'none',
       cursor: 'pointer',
     },

package/dist/cjs/common/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LEFT_SIDEBAR_FLYOUT_WIDTH = exports.BANNER_HEIGHT = exports.TOP_NAVIGATION_HEIGHT = exports.RIGHT_SIDEBAR_WIDTH = exports.LEFT_SIDEBAR_WIDTH = exports.RIGHT_PANEL_WIDTH = exports.LEFT_PANEL_WIDTH = exports.PAGE_LAYOUT_CONTAINER_SELECTOR = exports.DEFAULT_I18N_PROPS_SKIP_LINKS = exports.PAGE_LAYOUT_SLOT_SELECTOR = exports.RESIZE_CONTROL_SELECTOR = exports.RESIZE_BUTTON_SELECTOR = exports.GRAB_AREA_SELECTOR = exports.GRAB_AREA_LINE_SELECTOR = exports.IS_FLYOUT_OPEN = exports.IS_SIDEBAR_COLLAPSING = exports.IS_SIDEBAR_DRAGGING = exports.PAGE_LAYOUT_LS_KEY = exports.LEFT_SIDEBAR_EXPANDED_WIDTH = exports.FLYOUT_DELAY = exports.TRANSITION_DURATION = exports.MIN_LEFT_SIDEBAR_DRAG_THRESHOLD = exports.DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH = exports.MIN_LEFT_SIDEBAR_WIDTH = exports.COLLAPSED_LEFT_SIDEBAR_WIDTH = exports.DEFAULT_LEFT_PANEL_WIDTH = exports.DEFAULT_RIGHT_PANEL_WIDTH = exports.DEFAULT_RIGHT_SIDEBAR_WIDTH = exports.DEFAULT_LEFT_SIDEBAR_WIDTH = exports.DEFAULT_TOP_NAVIGATION_HEIGHT = exports.DEFAULT_BANNER_HEIGHT = exports.RIGHT_SIDEBAR = exports.LEFT_SIDEBAR = exports.MAIN = exports.CONTENT = exports.TOP_NAVIGATION = exports.BANNER = exports.RIGHT_PANEL = exports.LEFT_PANEL = exports.DIMENSIONS = exports.VAR_LEFT_SIDEBAR_FLYOUT = exports.VAR_BANNER_HEIGHT = exports.VAR_TOP_NAVIGATION_HEIGHT = exports.VAR_RIGHT_PANEL_WIDTH = exports.VAR_RIGHT_SIDEBAR_WIDTH = exports.VAR_LEFT_SIDEBAR_WIDTH = exports.VAR_LEFT_PANEL_WIDTH = void 0;
+exports.VAR_TOP_NAVIGATION_HEIGHT = exports.VAR_RIGHT_SIDEBAR_WIDTH = exports.VAR_RIGHT_PANEL_WIDTH = exports.VAR_LEFT_SIDEBAR_WIDTH = exports.VAR_LEFT_SIDEBAR_FLYOUT = exports.VAR_LEFT_PANEL_WIDTH = exports.VAR_BANNER_HEIGHT = exports.TRANSITION_DURATION = exports.TOP_NAVIGATION_HEIGHT = exports.TOP_NAVIGATION = exports.RIGHT_SIDEBAR_WIDTH = exports.RIGHT_SIDEBAR = exports.RIGHT_PANEL_WIDTH = exports.RIGHT_PANEL = exports.RESIZE_CONTROL_SELECTOR = exports.RESIZE_BUTTON_SELECTOR = exports.PAGE_LAYOUT_SLOT_SELECTOR = exports.PAGE_LAYOUT_LS_KEY = exports.PAGE_LAYOUT_CONTAINER_SELECTOR = exports.MIN_LEFT_SIDEBAR_WIDTH = exports.MIN_LEFT_SIDEBAR_DRAG_THRESHOLD = exports.MAIN = exports.LEFT_SIDEBAR_WIDTH = exports.LEFT_SIDEBAR_FLYOUT_WIDTH = exports.LEFT_SIDEBAR_EXPANDED_WIDTH = exports.LEFT_SIDEBAR = exports.LEFT_PANEL_WIDTH = exports.LEFT_PANEL = exports.IS_SIDEBAR_DRAGGING = exports.IS_SIDEBAR_COLLAPSING = exports.IS_FLYOUT_OPEN = exports.GRAB_AREA_SELECTOR = exports.GRAB_AREA_LINE_SELECTOR = exports.FLYOUT_DELAY = exports.DIMENSIONS = exports.DEFAULT_TOP_NAVIGATION_HEIGHT = exports.DEFAULT_RIGHT_SIDEBAR_WIDTH = exports.DEFAULT_RIGHT_PANEL_WIDTH = exports.DEFAULT_LEFT_SIDEBAR_WIDTH = exports.DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH = exports.DEFAULT_LEFT_PANEL_WIDTH = exports.DEFAULT_I18N_PROPS_SKIP_LINKS = exports.DEFAULT_BANNER_HEIGHT = exports.CONTENT = exports.COLLAPSED_LEFT_SIDEBAR_WIDTH = exports.BANNER_HEIGHT = exports.BANNER = void 0;
 // dimension vars
 var VAR_LEFT_PANEL_WIDTH = 'leftPanelWidth';
 exports.VAR_LEFT_PANEL_WIDTH = VAR_LEFT_PANEL_WIDTH;

package/dist/cjs/common/utils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getPageLayoutSlotCSSSelector = exports.getPageLayoutSlotSelector = exports.getLeftSidebarPercentage = exports.getLeftPanelWidth = exports.resolveDimension = exports.removeFromGridStateInStorage = exports.getGridStateFromStorage = exports.mergeGridStateIntoStorage = exports.emptyGridState = void 0;
+exports.resolveDimension = exports.removeFromGridStateInStorage = exports.mergeGridStateIntoStorage = exports.getPageLayoutSlotSelector = exports.getPageLayoutSlotCSSSelector = exports.getLeftSidebarPercentage = exports.getLeftPanelWidth = exports.getGridStateFromStorage = exports.emptyGridState = void 0;
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
@@ -15,9 +15,9 @@ var _constants = require("./constants");
 
 var _safeLocalStorage = _interopRequireDefault(require("./safe-local-storage"));
 
-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) { (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; }
+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; }
 
 var emptyGridState = _constants.DIMENSIONS.reduce(function (acc, currentValue) {
   return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, currentValue, 0));

package/dist/cjs/components/index.js

@@ -5,70 +5,70 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "PageLayout", {
+Object.defineProperty(exports, "Banner", {
   enumerable: true,
   get: function get() {
-    return _pageLayout.default;
+    return _banner.default;
   }
 });
-Object.defineProperty(exports, "Main", {
+Object.defineProperty(exports, "Content", {
   enumerable: true,
   get: function get() {
-    return _main.default;
+    return _content.default;
   }
 });
-Object.defineProperty(exports, "RightPanel", {
+Object.defineProperty(exports, "LeftPanel", {
   enumerable: true,
   get: function get() {
-    return _rightPanel.default;
+    return _leftPanel.default;
   }
 });
-Object.defineProperty(exports, "LeftPanel", {
+Object.defineProperty(exports, "LeftSidebar", {
   enumerable: true,
   get: function get() {
-    return _leftPanel.default;
+    return _leftSidebar.default;
   }
 });
-Object.defineProperty(exports, "RightSidebar", {
+Object.defineProperty(exports, "LeftSidebarWithoutResize", {
   enumerable: true,
   get: function get() {
-    return _rightSidebar.default;
+    return _leftSidebarWithoutResize.default;
   }
 });
-Object.defineProperty(exports, "LeftSidebar", {
+Object.defineProperty(exports, "Main", {
   enumerable: true,
   get: function get() {
-    return _leftSidebar.default;
+    return _main.default;
   }
 });
-Object.defineProperty(exports, "LeftSidebarWithoutResize", {
+Object.defineProperty(exports, "PageLayout", {
   enumerable: true,
   get: function get() {
-    return _leftSidebarWithoutResize.default;
+    return _pageLayout.default;
   }
 });
-Object.defineProperty(exports, "Banner", {
+Object.defineProperty(exports, "ResizeControl", {
   enumerable: true,
   get: function get() {
-    return _banner.default;
+    return _resizeControl.default;
   }
 });
-Object.defineProperty(exports, "TopNavigation", {
+Object.defineProperty(exports, "RightPanel", {
   enumerable: true,
   get: function get() {
-    return _topNavigation.default;
+    return _rightPanel.default;
   }
 });
-Object.defineProperty(exports, "Content", {
+Object.defineProperty(exports, "RightSidebar", {
   enumerable: true,
   get: function get() {
-    return _content.default;
+    return _rightSidebar.default;
   }
 });
-Object.defineProperty(exports, "ResizeControl", {
+Object.defineProperty(exports, "TopNavigation", {
   enumerable: true,
   get: function get() {
-    return _resizeControl.default;
+    return _topNavigation.default;
   }
 });
 Object.defineProperty(exports, "useCustomSkipLink", {

package/dist/cjs/components/resize-control/grab-area.js

@@ -19,16 +19,17 @@ var _constants = require("../../common/constants");
 
 var _styles = require("./styles");
 
-/** @jsx jsx */
+var _excluded = ["testId", "isLeftSidebarCollapsed"];
 var grabAreaLineSelector = (0, _defineProperty2.default)({}, _constants.GRAB_AREA_LINE_SELECTOR, true);
 var grabAreaSelector = (0, _defineProperty2.default)({}, _constants.GRAB_AREA_SELECTOR, true); // TODO: Consider allowing this to be controlled using arrow keys
 
 var GrabArea = function GrabArea(_ref) {
   var testId = _ref.testId,
       isLeftSidebarCollapsed = _ref.isLeftSidebarCollapsed,
-      rest = (0, _objectWithoutProperties2.default)(_ref, ["testId", "isLeftSidebarCollapsed"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _core.jsx)("button", (0, _extends2.default)({}, grabAreaSelector, {
     "data-testid": testId,
+    type: "button",
     css: (0, _styles.grabAreaCSS)(isLeftSidebarCollapsed)
   }, rest), (0, _core.jsx)("span", (0, _extends2.default)({
     css: (0, _styles.lineCSS)(isLeftSidebarCollapsed)

package/dist/cjs/components/resize-control/index.js

@@ -31,9 +31,9 @@ var _resizeButton2 = _interopRequireDefault(require("./resize-button"));
 
 var _styles = require("./styles");
 
-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) { (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; }
+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; }
 
 var cssSelector = (0, _defineProperty2.default)({}, _constants.RESIZE_CONTROL_SELECTOR, true);
 

package/dist/cjs/components/resize-control/resize-button.js

@@ -21,7 +21,8 @@ var _constants = require("../../common/constants");
 
 var _styles = require("./styles");
 
-/** @jsx jsx */
+var _excluded = ["isLeftSidebarCollapsed", "label", "testId"];
+
 var preventDefault = function preventDefault(event) {
   return event.preventDefault();
 };
@@ -32,7 +33,7 @@ var ResizeButton = function ResizeButton(_ref) {
   var isLeftSidebarCollapsed = _ref.isLeftSidebarCollapsed,
       label = _ref.label,
       testId = _ref.testId,
-      props = (0, _objectWithoutProperties2.default)(_ref, ["isLeftSidebarCollapsed", "label", "testId"]);
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _core.jsx)("button", (0, _extends2.default)({}, cssSelector, {
     // DO NOT remove. used as a CSS selector.
     "aria-expanded": !isLeftSidebarCollapsed,

package/dist/cjs/components/resize-control/styles.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.shadowCSS = exports.increaseHitArea = exports.lineCSS = exports.grabAreaCSS = exports.resizeIconButtonCSS = exports.resizeControlCSS = void 0;
+exports.shadowCSS = exports.resizeIconButtonCSS = exports.resizeControlCSS = exports.lineCSS = exports.increaseHitArea = exports.grabAreaCSS = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -15,9 +15,9 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("../../common/constants");
 
-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) { (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; }
+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; }
 
 var resizeControlCSS = function resizeControlCSS(setIsGrabAreaFocused, isLeftSidebarCollapsed) {
   var _$concat, _ref;
@@ -29,11 +29,11 @@ var resizeControlCSS = function resizeControlCSS(setIsGrabAreaFocused, isLeftSid
     position: 'absolute',
     outline: 'none'
   }, (0, _defineProperty2.default)(_ref, "[".concat(_constants.GRAB_AREA_SELECTOR, "]:enabled"), (_$concat = {}, (0, _defineProperty2.default)(_$concat, "&:hover [".concat(_constants.GRAB_AREA_LINE_SELECTOR, "]"), {
-    backgroundColor: _colors.B100
+    backgroundColor: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B100, ")")
   }), (0, _defineProperty2.default)(_$concat, "&:active [".concat(_constants.GRAB_AREA_LINE_SELECTOR, "] , &:focus [").concat(_constants.GRAB_AREA_LINE_SELECTOR, "]"), {
-    backgroundColor: _colors.B200
+    backgroundColor: "var(--ds-background-brand-bold-pressed, ".concat(_colors.B200, ")")
   }), (0, _defineProperty2.default)(_$concat, "&:hover [".concat(_constants.RESIZE_BUTTON_SELECTOR, "]:not(:focus):not(:hover)"), {
-    color: _colors.B100
+    backgroundColor: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B100, ")")
   }), (0, _defineProperty2.default)(_$concat, "&:hover [".concat(_constants.RESIZE_BUTTON_SELECTOR, "]"), {
     opacity: 1
   }), _$concat)), (0, _defineProperty2.default)(_ref, "[".concat(_constants.RESIZE_BUTTON_SELECTOR, "]"), {
@@ -45,15 +45,17 @@ exports.resizeControlCSS = resizeControlCSS;
 
 var resizeIconButtonCSS = function resizeIconButtonCSS(isCollapsed) {
   return _objectSpread(_objectSpread({
-    backgroundColor: _colors.N0,
+    backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
     position: 'absolute',
     top: 32,
     left: 0,
     transform: 'translateX(-50%)',
     border: 0,
     borderRadius: '50%',
+    // TODO https://product-fabric.atlassian.net/browse/DSP-3392
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     boxShadow: "0 0 0 1px ".concat(_colors.N30A, ", 0 2px 4px 1px ").concat(_colors.N30A),
-    color: _colors.N200,
+    color: "var(--ds-text-subtle, ".concat(_colors.N200, ")"),
     cursor: 'pointer',
     height: 24,
     opacity: 0,
@@ -62,18 +64,18 @@ var resizeIconButtonCSS = function resizeIconButtonCSS(isCollapsed) {
     transition: "\n    background-color ".concat(_motion.smallDurationMs, "ms linear,\n    color ").concat(_motion.smallDurationMs, "ms linear,\n    opacity ").concat(_motion.mediumDurationMs, "ms ").concat(_motion.easeOut, "\n  "),
     width: 24,
     ':hover': {
-      backgroundColor: _colors.B100,
-      color: _colors.N0,
+      backgroundColor: "var(--ds-background-brand-hovered, ".concat(_colors.B100, ")"),
+      color: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
       opacity: 1
     },
     ':active': {
-      backgroundColor: _colors.B200,
-      color: _colors.N0,
+      backgroundColor: "var(--ds-background-brand-pressed, ".concat(_colors.B200, ")"),
+      color: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
       opacity: 1
     },
     ':focus': {
-      backgroundColor: _colors.B200,
-      color: _colors.N0,
+      backgroundColor: "var(--ds-background-brand-pressed, ".concat(_colors.B200, ")"),
+      color: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
       opacity: 1
     }
   }, !isCollapsed && {

package/dist/cjs/components/skip-links/index.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "SkipLinkWrapper", {
+Object.defineProperty(exports, "SkipLink", {
   enumerable: true,
   get: function get() {
-    return _skipLinkComponents.SkipLinkWrapper;
+    return _skipLinkComponents.SkipLink;
   }
 });
-Object.defineProperty(exports, "SkipLink", {
+Object.defineProperty(exports, "SkipLinkWrapper", {
   enumerable: true,
   get: function get() {
-    return _skipLinkComponents.SkipLink;
+    return _skipLinkComponents.SkipLinkWrapper;
   }
 });
 Object.defineProperty(exports, "useCustomSkipLink", {

package/dist/cjs/components/skip-links/skip-link-components.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SkipLink = exports.SkipLinkWrapper = void 0;
+exports.SkipLinkWrapper = exports.SkipLink = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -19,9 +19,9 @@ var _controllers = require("../../controllers");
 
 var _styles = require("./styles");
 
-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) { (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; }
+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; }
 
 var assignIndex = function assignIndex(num, arr) {
   if (!arr.includes(num)) {

package/dist/cjs/components/skip-links/styles.js

@@ -13,19 +13,19 @@ var _motion = require("@atlaskit/motion");
 
 var _colors = require("@atlaskit/theme/colors");
 
-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) { (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; }
+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; }
 
 var skipLinkStyles = _objectSpread(_objectSpread({
   zIndex: -1,
   left: -999999,
   position: 'fixed',
   opacity: 0,
-  background: 'white',
+  background: "var(--ds-surface-overlay, white)",
   border: 'none',
   padding: '0.8rem 1rem',
-  boxShadow: "0 0 0 1px ".concat(_colors.N30A, ", 0 2px 10px ").concat(_colors.N30A, ", 0 0 20px -4px ").concat(_colors.N60A),
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N30A, ", 0 2px 10px ").concat(_colors.N30A, ", 0 0 20px -4px ").concat(_colors.N60A), ")"),
   borderRadius: '3px',
   margin: 10
 }, (0, _motion.prefersReducedMotion)()), {}, {

package/dist/cjs/components/slots/left-sidebar-styles.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fixedChildrenWrapperStyle = exports.resizeableChildrenWrapperStyle = exports.leftSidebarStyles = exports.fixedLeftSidebarInnerStyles = void 0;
+exports.resizeableChildrenWrapperStyle = exports.leftSidebarStyles = exports.fixedLeftSidebarInnerStyles = exports.fixedChildrenWrapperStyle = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -17,9 +17,9 @@ var _utils = require("../../common/utils");
 
 var _styles = require("./styles");
 
-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) { (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; }
+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; }
 
 // This inner wrapper is required to allow the
 // sidebar to be position: fixed. If we were to apply position: fixed

package/dist/cjs/components/slots/left-sidebar.js

@@ -27,9 +27,9 @@ var _leftSidebarStyles = require("./left-sidebar-styles");
 
 var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
 
-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) { (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; }
+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; }
 
 var LeftSidebar = function LeftSidebar(props) {
   var children = props.children,

package/dist/cjs/components/slots/styles.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.leftPanelStyles = exports.rightPanelStyles = exports.rightSidebarStyles = exports.fixedRightSidebarInnerStyles = exports.mainStyles = exports.topNavigationStyles = exports.bannerStyles = exports.focusStyles = exports.contentStyles = exports.gridStyles = void 0;
+exports.topNavigationStyles = exports.rightSidebarStyles = exports.rightPanelStyles = exports.mainStyles = exports.leftPanelStyles = exports.gridStyles = exports.focusStyles = exports.fixedRightSidebarInnerStyles = exports.contentStyles = exports.bannerStyles = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -19,9 +19,9 @@ var _constants = require("../../common/constants");
 
 var _templateObject, _templateObject2;
 
-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) { (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; }
+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; }
 
 var gridTemplateAreas = "\n  \"".concat(_constants.LEFT_PANEL, " ").concat(_constants.BANNER, " ").concat(_constants.RIGHT_PANEL, "\"\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.TOP_NAVIGATION, " ").concat(_constants.RIGHT_PANEL, "\"\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.CONTENT, " ").concat(_constants.RIGHT_PANEL, "\"\n ");
 var gridStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n\n  display: grid;\n  height: 100%;\n  // prettier-ignore\n  grid-template-columns: ", " minmax(0, 1fr) ", ";\n  grid-template-rows:\n    ", " ", "\n    auto;\n  grid-template-areas: ", ";\n"])), _constants.LEFT_PANEL_WIDTH, _constants.RIGHT_PANEL_WIDTH, _constants.BANNER_HEIGHT, _constants.TOP_NAVIGATION_HEIGHT, gridTemplateAreas);
@@ -33,11 +33,11 @@ var focusStyles = {
     outline: 'none',
     '&  [data-wrapper-element]': {
       outline: 'none',
-      boxShadow: '0px 0px 0px 2px inset #4C9AFF'
+      boxShadow: "0px 0px 0px 2px inset ".concat("var(--ds-border-focused, #4C9AFF)")
     },
     '& > div:not([data-skip-link-wrapper])': {
       outline: 'none',
-      boxShadow: '0px 0px 0px 2px inset #4C9AFF'
+      boxShadow: "0px 0px 0px 2px inset ".concat("var(--ds-border-focused, #4C9AFF)")
     }
   }
 };

package/dist/cjs/controllers/index.js

@@ -5,40 +5,40 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "publishGridState", {
+Object.defineProperty(exports, "SidebarResizeContext", {
   enumerable: true,
   get: function get() {
-    return _usePageLayoutGrid.default;
+    return _sidebarResizeContext.SidebarResizeContext;
   }
 });
-Object.defineProperty(exports, "SidebarResizeContext", {
+Object.defineProperty(exports, "SidebarResizeController", {
   enumerable: true,
   get: function get() {
-    return _sidebarResizeContext.SidebarResizeContext;
+    return _sidebarResizeController.SidebarResizeController;
   }
 });
-Object.defineProperty(exports, "usePageLayoutResize", {
+Object.defineProperty(exports, "SkipLinksController", {
   enumerable: true,
   get: function get() {
-    return _sidebarResizeContext.usePageLayoutResize;
+    return _skipLinkController.SkipLinksController;
   }
 });
-Object.defineProperty(exports, "useLeftSidebarFlyoutLock", {
+Object.defineProperty(exports, "publishGridState", {
   enumerable: true,
   get: function get() {
-    return _sidebarResizeContext.useLeftSidebarFlyoutLock;
+    return _usePageLayoutGrid.default;
   }
 });
-Object.defineProperty(exports, "SidebarResizeController", {
+Object.defineProperty(exports, "useLeftSidebarFlyoutLock", {
   enumerable: true,
   get: function get() {
-    return _sidebarResizeController.SidebarResizeController;
+    return _sidebarResizeContext.useLeftSidebarFlyoutLock;
   }
 });
-Object.defineProperty(exports, "useSkipLinks", {
+Object.defineProperty(exports, "usePageLayoutResize", {
   enumerable: true,
   get: function get() {
-    return _skipLinkContext.useSkipLinks;
+    return _sidebarResizeContext.usePageLayoutResize;
   }
 });
 Object.defineProperty(exports, "useSkipLink", {
@@ -47,10 +47,10 @@ Object.defineProperty(exports, "useSkipLink", {
     return _skipLinkContext.useSkipLink;
   }
 });
-Object.defineProperty(exports, "SkipLinksController", {
+Object.defineProperty(exports, "useSkipLinks", {
   enumerable: true,
   get: function get() {
-    return _skipLinkController.SkipLinksController;
+    return _skipLinkContext.useSkipLinks;
   }
 });
 

package/dist/cjs/controllers/sidebar-resize-context.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useLeftSidebarFlyoutLock = exports.usePageLayoutResize = exports.SidebarResizeContext = void 0;
+exports.usePageLayoutResize = exports.useLeftSidebarFlyoutLock = exports.SidebarResizeContext = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -13,9 +13,11 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = require("react");
 
-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; }
+var _excluded = ["setLeftSidebarState"];
 
-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; }
+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 = 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; }
 
 var noop = function noop() {};
 
@@ -39,7 +41,7 @@ exports.SidebarResizeContext = SidebarResizeContext;
 var usePageLayoutResize = function usePageLayoutResize() {
   var _useContext = (0, _react.useContext)(SidebarResizeContext),
       setLeftSidebarState = _useContext.setLeftSidebarState,
-      context = (0, _objectWithoutProperties2.default)(_useContext, ["setLeftSidebarState"]);
+      context = (0, _objectWithoutProperties2.default)(_useContext, _excluded);
 
   return context;
 };