@atlaskit/page-layout 1.1.0 → 1.2.2

package/dist/cjs/components/slots/right-panel.js

@@ -21,11 +21,22 @@ var _utils = require("../../common/utils");
 
 var _controllers = require("../../controllers");
 
-var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
+var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
 
-var _styles = require("./styles");
+var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
 
 /** @jsx jsx */
+var baseStyles = (0, _core.css)({
+  gridArea: _constants.RIGHT_PANEL
+});
+var fixedStyles = (0, _core.css)({
+  width: _constants.RIGHT_PANEL_WIDTH,
+  position: 'fixed',
+  top: 0,
+  right: 0,
+  bottom: 0
+});
+
 var RightPanel = function RightPanel(props) {
   var children = props.children,
       isFixed = props.isFixed,
@@ -40,17 +51,21 @@ var RightPanel = function RightPanel(props) {
     (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_RIGHT_PANEL_WIDTH, rightPanelWidth));
     return function () {
       (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_RIGHT_PANEL_WIDTH, 0));
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
   }, [rightPanelWidth]);
   (0, _controllers.useSkipLink)(id, skipLinkTitle);
-  return (0, _core.jsx)("div", (0, _extends2.default)({
-    css: (0, _styles.rightPanelStyles)(isFixed),
-    "data-testid": testId,
-    id: id
-  }, (0, _utils.getPageLayoutSlotSelector)('right-panel')), (0, _core.jsx)(_slotDimensions.default, {
-    variableName: _constants.VAR_RIGHT_PANEL_WIDTH,
-    value: rightPanelWidth
-  }), children);
+  return (0, _core.jsx)(_slotFocusRing.default, null, function (_ref) {
+    var className = _ref.className;
+    return (0, _core.jsx)("div", (0, _extends2.default)({
+      css: [baseStyles, isFixed && fixedStyles],
+      className: className,
+      "data-testid": testId,
+      id: id
+    }, (0, _utils.getPageLayoutSlotSelector)('right-panel')), (0, _core.jsx)(_slotDimensions.default, {
+      variableName: _constants.VAR_RIGHT_PANEL_WIDTH,
+      value: rightPanelWidth
+    }), children);
+  });
 };
 
 var _default = RightPanel;

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

@@ -21,11 +21,49 @@ var _utils = require("../../common/utils");
 
 var _controllers = require("../../controllers");
 
-var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
+var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
 
-var _styles = require("./styles");
+var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
 
 /** @jsx jsx */
+
+/**
+ * This inner wrapper is required to allow the sidebar to be `position: fixed`.
+ *
+ * If we were to apply `position: fixed` to the outer wrapper, it will be popped
+ * out of its flex container and Main would stretch to occupy all the space.
+ */
+var fixedInnerStyles = (0, _core.css)({
+  /**
+   * This width on the inner wrapper is required when it is using fixed
+   * positioning. Otherwise its width is slightly off.
+   */
+  width: _constants.RIGHT_SIDEBAR_WIDTH,
+  position: 'fixed',
+  top: "calc(".concat(_constants.BANNER_HEIGHT, " + ").concat(_constants.TOP_NAVIGATION_HEIGHT, ")"),
+  right: "calc(".concat(_constants.RIGHT_PANEL_WIDTH, ")"),
+  bottom: 0
+});
+var staticInnerStyles = (0, _core.css)({
+  height: '100%'
+});
+var outerStyles = (0, _core.css)({
+  width: _constants.RIGHT_SIDEBAR_WIDTH
+});
+/**
+ * In fixed mode this element's child is taken out of the document flow.
+ * It doesn't take up the width as expected,
+ * so the pseudo element forces it to take up the necessary width.
+ */
+
+var fixedOuterStyles = (0, _core.css)({
+  '&::after': {
+    display: 'inline-block',
+    width: _constants.RIGHT_SIDEBAR_WIDTH,
+    content: "''"
+  }
+});
+
 var RightSidebar = function RightSidebar(props) {
   var children = props.children,
       _props$width = props.width,
@@ -40,19 +78,25 @@ var RightSidebar = function RightSidebar(props) {
     (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_RIGHT_SIDEBAR_WIDTH, rightSidebarWidth));
     return function () {
       (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_RIGHT_SIDEBAR_WIDTH, 0));
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
   }, [rightSidebarWidth, id]);
   (0, _controllers.useSkipLink)(id, skipLinkTitle);
-  return (0, _core.jsx)("div", (0, _extends2.default)({
-    "data-testid": testId,
-    css: (0, _styles.rightSidebarStyles)(isFixed),
-    id: id
-  }, (0, _utils.getPageLayoutSlotSelector)('right-sidebar')), (0, _core.jsx)(_slotDimensions.default, {
-    variableName: _constants.VAR_RIGHT_SIDEBAR_WIDTH,
-    value: rightSidebarWidth
-  }), (0, _core.jsx)("div", {
-    css: (0, _styles.fixedRightSidebarInnerStyles)(isFixed)
-  }, children));
+  return (0, _core.jsx)(_slotFocusRing.default, {
+    isSidebar: true
+  }, function (_ref) {
+    var className = _ref.className;
+    return (0, _core.jsx)("div", (0, _extends2.default)({
+      "data-testid": testId,
+      css: [outerStyles, isFixed && fixedOuterStyles],
+      className: className,
+      id: id
+    }, (0, _utils.getPageLayoutSlotSelector)('right-sidebar')), (0, _core.jsx)(_slotDimensions.default, {
+      variableName: _constants.VAR_RIGHT_SIDEBAR_WIDTH,
+      value: rightSidebarWidth
+    }), (0, _core.jsx)("div", {
+      css: [isFixed && fixedInnerStyles, !isFixed && staticInnerStyles]
+    }, children));
+  });
 };
 
 var _default = RightSidebar;

package/dist/cjs/components/slots/top-navigation.js

@@ -21,11 +21,23 @@ var _utils = require("../../common/utils");
 
 var _controllers = require("../../controllers");
 
-var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
+var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
 
-var _styles = require("./styles");
+var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
 
 /** @jsx jsx */
+var topNavigationStyles = (0, _core.css)({
+  height: _constants.TOP_NAVIGATION_HEIGHT,
+  gridArea: _constants.TOP_NAVIGATION
+});
+var fixedStyles = (0, _core.css)({
+  position: 'fixed',
+  zIndex: 2,
+  top: _constants.BANNER_HEIGHT,
+  right: _constants.RIGHT_PANEL_WIDTH,
+  left: _constants.LEFT_PANEL_WIDTH
+});
+
 var TopNavigation = function TopNavigation(props) {
   var children = props.children,
       _props$height = props.height,
@@ -41,17 +53,21 @@ var TopNavigation = function TopNavigation(props) {
     (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_TOP_NAVIGATION_HEIGHT, topNavigationHeight));
     return function () {
       (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_TOP_NAVIGATION_HEIGHT, 0));
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
   }, [topNavigationHeight]);
   (0, _controllers.useSkipLink)(id, skipLinkTitle);
-  return (0, _core.jsx)("div", (0, _extends2.default)({
-    css: (0, _styles.topNavigationStyles)(isFixed),
-    "data-testid": testId,
-    id: id
-  }, (0, _utils.getPageLayoutSlotSelector)('top-navigation')), (0, _core.jsx)(_slotDimensions.default, {
-    variableName: _constants.VAR_TOP_NAVIGATION_HEIGHT,
-    value: topNavigationHeight
-  }), children);
+  return (0, _core.jsx)(_slotFocusRing.default, null, function (_ref) {
+    var className = _ref.className;
+    return (0, _core.jsx)("div", (0, _extends2.default)({
+      css: [topNavigationStyles, isFixed && fixedStyles],
+      className: className,
+      "data-testid": testId,
+      id: id
+    }, (0, _utils.getPageLayoutSlotSelector)('top-navigation')), (0, _core.jsx)(_slotDimensions.default, {
+      variableName: _constants.VAR_TOP_NAVIGATION_HEIGHT,
+      value: topNavigationHeight
+    }), children);
+  });
 };
 
 var _default = TopNavigation;

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

@@ -27,7 +27,8 @@ var leftSidebarState = {
   isLeftSidebarCollapsed: false,
   leftSidebarWidth: 0,
   lastLeftSidebarWidth: 0,
-  flyoutLockCount: 0
+  flyoutLockCount: 0,
+  isFixed: true
 };
 var SidebarResizeContext = /*#__PURE__*/(0, _react.createContext)({
   isLeftSidebarCollapsed: false,

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

@@ -46,7 +46,8 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
     isLeftSidebarCollapsed: false,
     leftSidebarWidth: 0,
     lastLeftSidebarWidth: 0,
-    flyoutLockCount: 0
+    flyoutLockCount: 0,
+    isFixed: true
   }),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       leftSidebarState = _useState2[0],
@@ -74,7 +75,8 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
   var expandLeftSidebar = (0, _react.useCallback)(function () {
     var lastLeftSidebarWidth = leftSidebarState.lastLeftSidebarWidth,
         isResizing = leftSidebarState.isResizing,
-        flyoutLockCount = leftSidebarState.flyoutLockCount;
+        flyoutLockCount = leftSidebarState.flyoutLockCount,
+        isFixed = leftSidebarState.isFixed;
 
     if (isResizing) {
       return;
@@ -87,7 +89,8 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
       leftSidebarWidth: width,
       lastLeftSidebarWidth: lastLeftSidebarWidth,
       isResizing: isResizing,
-      flyoutLockCount: flyoutLockCount
+      flyoutLockCount: flyoutLockCount,
+      isFixed: isFixed
     };
     setLeftSidebarState(updatedLeftSidebarState); // onTransitionEnd isn't triggered when a user prefers reduced motion
 
@@ -98,7 +101,8 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
   var collapseLeftSidebar = (0, _react.useCallback)(function (event, collapseWithoutTransition) {
     var leftSidebarWidth = leftSidebarState.leftSidebarWidth,
         isResizing = leftSidebarState.isResizing,
-        flyoutLockCount = leftSidebarState.flyoutLockCount;
+        flyoutLockCount = leftSidebarState.flyoutLockCount,
+        isFixed = leftSidebarState.isFixed;
 
     if (isResizing) {
       return;
@@ -113,7 +117,8 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
       leftSidebarWidth: _constants.COLLAPSED_LEFT_SIDEBAR_WIDTH,
       lastLeftSidebarWidth: leftSidebarWidth,
       isResizing: isResizing,
-      flyoutLockCount: flyoutLockCount
+      flyoutLockCount: flyoutLockCount,
+      isFixed: isFixed
     };
     setLeftSidebarState(updatedLeftSidebarState); // onTransitionEnd isn't triggered when a user prefers reduced motion
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.1.0",
+	"version": "1.2.2",
 	"sideEffects": false
 }

package/dist/es2019/common/hooks/index.js

@@ -0,0 +1,2 @@
+export { default as useIsSidebarCollapsing } from './use-is-sidebar-collapsing';
+export { default as useIsSidebarDragging } from './use-is-sidebar-dragging';

package/dist/es2019/common/hooks/use-is-sidebar-collapsing.js

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+import { IS_SIDEBAR_COLLAPSING } from '../constants';
+
+const getIsCollapsing = () => {
+  // SSR bail-out because document is undefined on the server
+  if (typeof document === 'undefined') {
+    return false;
+  }
+
+  return document.documentElement.getAttribute(IS_SIDEBAR_COLLAPSING) === 'true';
+};
+
+const useIsSidebarCollapsing = () => {
+  const [isCollapsing, setIsCollapsing] = useState(getIsCollapsing);
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      setIsCollapsing(getIsCollapsing);
+    });
+    observer.observe(document.documentElement, {
+      attributeFilter: [IS_SIDEBAR_COLLAPSING]
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  return isCollapsing;
+};
+
+export default useIsSidebarCollapsing;

package/dist/es2019/common/hooks/use-is-sidebar-dragging.js

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+import { IS_SIDEBAR_DRAGGING } from '../constants';
+
+const getIsDragging = () => {
+  // SSR bail-out because document is undefined on the server
+  if (typeof document === 'undefined') {
+    return false;
+  }
+
+  return document.documentElement.getAttribute(IS_SIDEBAR_DRAGGING) === 'true';
+};
+
+const useIsSidebarDragging = () => {
+  const [isDragging, setIsDragging] = useState(getIsDragging);
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      setIsDragging(getIsDragging);
+    });
+    observer.observe(document.documentElement, {
+      attributeFilter: [IS_SIDEBAR_DRAGGING]
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  return isDragging;
+};
+
+export default useIsSidebarDragging;

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

@@ -1,9 +1,51 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
+import { B100, B200 } from '@atlaskit/theme/colors';
 import { GRAB_AREA_LINE_SELECTOR, GRAB_AREA_SELECTOR } from '../../common/constants';
-import { grabAreaCSS, lineCSS } from './styles';
+
+/**
+ * Determines the color of the grab line.
+ *
+ * Used on internal leaf node, so naming collisions won't matter.
+ */
+const varLineColor = '--ds-line';
+const grabAreaStyles = css({
+  width: 24,
+  height: '100%',
+  padding: 0,
+  backgroundColor: 'transparent',
+  border: 0,
+  cursor: 'ew-resize',
+  '&::-moz-focus-inner': {
+    border: 0
+  },
+  ':focus': {
+    outline: 0
+  },
+  ':enabled': {
+    ':hover': {
+      [varLineColor]: `var(--ds-border-selected, ${B100})`
+    },
+    ':active, :focus': {
+      [varLineColor]: `var(--ds-border-selected, ${B200})`
+    }
+  }
+});
+const grabAreaCollapsedStyles = css({
+  padding: 0,
+  backgroundColor: 'transparent',
+  border: 0,
+  cursor: 'default'
+});
+const lineStyles = css({
+  display: 'block',
+  width: 2,
+  height: '100%',
+  backgroundColor: `var(${varLineColor})`,
+  transition: 'background-color 200ms'
+});
 const grabAreaLineSelector = {
   [GRAB_AREA_LINE_SELECTOR]: true
 };
@@ -18,9 +60,9 @@ const GrabArea = ({
 }) => jsx("button", _extends({}, grabAreaSelector, {
   "data-testid": testId,
   type: "button",
-  css: grabAreaCSS(isLeftSidebarCollapsed)
+  css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles]
 }, rest), jsx("span", _extends({
-  css: lineCSS(isLeftSidebarCollapsed)
+  css: lineStyles
 }, grabAreaLineSelector)));
 
 export default GrabArea;

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { useCallback, useContext, useMemo, useRef, useState } from 'react';
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import rafSchd from 'raf-schd';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, IS_SIDEBAR_DRAGGING, MIN_LEFT_SIDEBAR_DRAG_THRESHOLD, RESIZE_BUTTON_SELECTOR, RESIZE_CONTROL_SELECTOR, VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
 import { getLeftPanelWidth, getLeftSidebarPercentage } from '../../common/utils';
@@ -11,16 +11,19 @@ import { SidebarResizeContext } from '../../controllers/sidebar-resize-context';
 
 import GrabArea from './grab-area';
 import ResizeButton from './resize-button';
-import { resizeControlCSS, shadowCSS } from './styles';
+import Shadow from './shadow';
 const cssSelector = {
   [RESIZE_CONTROL_SELECTOR]: true
 };
-
-const Shadow = ({
-  testId
-}) => jsx("div", {
-  "data-testid": testId,
-  css: shadowCSS
+const resizeControlStyles = css({
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: '100%',
+  outline: 'none'
+});
+const showResizeButtonStyles = css({
+  '--ds--resize-button--opacity': 1
 });
 
 const ResizeControl = ({
@@ -236,7 +239,7 @@ const ResizeControl = ({
   /* eslint-disable jsx-a11y/role-supports-aria-props */
 
   return jsx("div", _extends({}, cssSelector, {
-    css: resizeControlCSS(isGrabAreaFocused, isLeftSidebarCollapsed)
+    css: [resizeControlStyles, (isGrabAreaFocused || isLeftSidebarCollapsed) && showResizeButtonStyles]
   }), jsx(Shadow, {
     testId: testId && `${testId}-shadow`
   }), jsx(GrabArea, {

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

@@ -1,10 +1,67 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import ChevronRight from '@atlaskit/icon/glyph/chevron-right';
+import { easeOut } from '@atlaskit/motion/curves';
+import { mediumDurationMs, smallDurationMs } from '@atlaskit/motion/durations';
+import { B100, B200, N0, N200, N30A } from '@atlaskit/theme/colors';
 import { RESIZE_BUTTON_SELECTOR } from '../../common/constants';
-import { increaseHitArea, resizeIconButtonCSS } from './styles';
+const increaseHitAreaStyles = css({
+  position: 'absolute',
+  top: -8,
+  right: -12,
+  bottom: -8,
+  left: -8
+});
+const resizeIconButtonStyles = css({
+  width: 24,
+  height: 24,
+  padding: 0,
+  position: 'absolute',
+  top: 32,
+  left: 0,
+  backgroundColor: `var(--ds-surface-overlay, ${N0})`,
+  border: 0,
+  borderRadius: '50%',
+
+  /**
+   * TODO: https://product-fabric.atlassian.net/browse/DSP-3392
+   * This shadow needs further investigation,
+   * along with the hover and active background colors.
+   */
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  boxShadow: `0 0 0 1px ${N30A}, 0 2px 4px 1px ${N30A}`,
+  color: `var(--ds-text-subtle, ${N200})`,
+  cursor: 'pointer',
+
+  /**
+   * The fallback value of 0 ensures that the button is hidden by default,
+   * unless some parent (or the button itself) overrides it.
+   */
+  opacity: `var(--ds--resize-button--opacity,0)`,
+  outline: 0,
+  transform: 'translateX(-50%)',
+  transition: `
+    background-color ${smallDurationMs}ms linear,
+    color ${smallDurationMs}ms linear,
+    opacity ${mediumDurationMs}ms ${easeOut}
+  `,
+  ':hover': {
+    backgroundColor: `var(--ds-background-selected-bold, ${B100})`,
+    color: `var(--ds-text-inverse, ${N0})`,
+    opacity: 1
+  },
+  ':active, :focus': {
+    backgroundColor: `var(--ds-background-selected-bold-hovered, ${B200})`,
+    color: `var(--ds-text-inverse, ${N0})`,
+    opacity: 1
+  }
+});
+const resizeIconButtonExpandedStyles = css({
+  transform: 'rotate(180deg)',
+  transformOrigin: 7
+});
 
 const preventDefault = event => event.preventDefault();
 
@@ -22,7 +79,7 @@ const ResizeButton = ({
   "aria-expanded": !isLeftSidebarCollapsed,
   "aria-label": label,
   type: "button",
-  css: resizeIconButtonCSS(isLeftSidebarCollapsed),
+  css: [resizeIconButtonStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
   "data-testid": testId // Prevents focus staying attached to the button
   // when pressed
   ,
@@ -30,7 +87,7 @@ const ResizeButton = ({
 }, props), jsx(ChevronRight, {
   label: ""
 }), jsx("div", {
-  css: increaseHitArea
+  css: increaseHitAreaStyles
 }));
 
 export default ResizeButton;

package/dist/es2019/components/resize-control/shadow.js

@@ -0,0 +1,43 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { easeOut } from '@atlaskit/motion';
+import { useIsSidebarDragging } from '../../common/hooks';
+const colorStops = `
+    rgba(0, 0, 0, 0.2) 0px,
+    rgba(0, 0, 0, 0.2) 1px,
+    rgba(0, 0, 0, 0.1) 1px,
+    rgba(0, 0, 0, 0) 100%
+  `;
+const direction = 'to left';
+const transitionDuration = '0.22s';
+const shadowStyles = css({
+  width: 3,
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: -1,
+  background: `var(--ds-border, ${`linear-gradient(${direction}, ${colorStops})`})`,
+  opacity: 0.5,
+  pointerEvents: 'none',
+  transitionDuration: transitionDuration,
+  transitionProperty: 'left, opacity, width',
+  transitionTimingFunction: easeOut
+});
+const draggingStyles = css({
+  width: 6,
+  left: -6,
+  background: `var(--ds-background-neutral-subtle, ${`linear-gradient(${direction}, ${colorStops})`})`,
+  opacity: 0.8
+});
+
+const Shadow = ({
+  testId
+}) => {
+  const isDragging = useIsSidebarDragging();
+  return jsx("div", {
+    "data-testid": testId,
+    css: [shadowStyles, isDragging && draggingStyles]
+  });
+};
+
+export default Shadow;

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

@@ -1,8 +1,46 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
+import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
+import { N30A, N60A } from '@atlaskit/theme/colors';
 import { PAGE_LAYOUT_CONTAINER_SELECTOR } from '../../common/constants';
 import { useSkipLinks } from '../../controllers';
-import { skipLinkStyles } from './styles';
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+const prefersReducedMotionStyles = css(prefersReducedMotion());
+const skipLinkStyles = css({
+  margin: 10,
+  padding: '0.8rem 1rem',
+  position: 'fixed',
+  zIndex: -1,
+  left: -999999,
+  background: "var(--ds-surface-overlay, white)",
+  border: 'none',
+  borderRadius: 3,
+  boxShadow: `var(--ds-shadow-overlay, ${`0 0 0 1px ${N30A}, 0 2px 10px ${N30A}, 0 0 20px -4px ${N60A}`})`,
+  opacity: 0,
+
+  /* Do the transform when focused */
+  transform: 'translateY(-50%)',
+  transition: `transform 0.3s ${easeOut}`,
+  ':focus-within': {
+    /**
+     * Max z-index is 2147483647. Skip links always be on top,
+     * but giving a few digits extra space just in case there's a future need.
+     */
+    zIndex: 2147483640,
+    left: 0,
+    opacity: 1,
+    transform: 'translateY(0%)'
+  }
+});
+const skipLinkListStyles = css({
+  marginTop: 4,
+  paddingLeft: 0,
+  listStylePosition: 'outside',
+  listStyleType: 'none'
+});
+const skipLinkListItemStyles = css({
+  marginTop: 0
+});
 
 const assignIndex = (num, arr) => {
   if (!arr.includes(num)) {
@@ -58,9 +96,11 @@ export const SkipLinkWrapper = ({
   return jsx("div", {
     onFocus: attachEscHandler,
     onBlur: removeEscHandler,
-    css: skipLinkStyles,
+    css: [skipLinkStyles, prefersReducedMotionStyles],
     "data-skip-link-wrapper": true
-  }, jsx("h5", null, skipLinksLabel), jsx("ol", null, sortSkipLinks(skipLinksData).map(({
+  }, jsx("h5", null, skipLinksLabel), jsx("ol", {
+    css: skipLinkListStyles
+  }, sortSkipLinks(skipLinksData).map(({
     id,
     skipLinkTitle
   }) => jsx(SkipLink, {
@@ -110,7 +150,9 @@ export const SkipLink = ({
   isFocusable,
   title
 }) => {
-  return jsx("li", null, jsx("a", {
+  return jsx("li", {
+    css: skipLinkListItemStyles
+  }, jsx("a", {
     tabIndex: isFocusable ? 0 : -1,
     href: href,
     onClick: focusTargetRef(href),