@atlaskit/page-layout 1.0.7 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @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

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/components/resize-control/styles.js

@@ -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/styles.js

@@ -22,10 +22,10 @@ var skipLinkStyles = _objectSpread(_objectSpread({
   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/styles.js

@@ -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/version.json

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

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

@@ -7,15 +7,16 @@ export const resizeControlCSS = (setIsGrabAreaFocused, isLeftSidebarCollapsed) =
   bottom: 0,
   position: 'absolute',
   outline: 'none',
+  // TODO https://product-fabric.atlassian.net/browse/DSP-3392
   [`[${GRAB_AREA_SELECTOR}]:enabled`]: {
     [`&:hover [${GRAB_AREA_LINE_SELECTOR}]`]: {
-      backgroundColor: B100
+      backgroundColor: `var(--ds-background-brand-bold-hovered, ${B100})`
     },
     [`&:active [${GRAB_AREA_LINE_SELECTOR}] , &:focus [${GRAB_AREA_LINE_SELECTOR}]`]: {
-      backgroundColor: B200
+      backgroundColor: `var(--ds-background-brand-bold-pressed, ${B200})`
     },
     [`&:hover [${RESIZE_BUTTON_SELECTOR}]:not(:focus):not(:hover)`]: {
-      color: B100
+      backgroundColor: `var(--ds-background-brand-bold-hovered, ${B100})`
     },
     [`&:hover [${RESIZE_BUTTON_SELECTOR}]`]: {
       opacity: 1
@@ -26,15 +27,17 @@ export const resizeControlCSS = (setIsGrabAreaFocused, isLeftSidebarCollapsed) =
   }
 });
 export const resizeIconButtonCSS = isCollapsed => ({
-  backgroundColor: N0,
+  backgroundColor: `var(--ds-surface-overlay, ${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 ${N30A}, 0 2px 4px 1px ${N30A}`,
-  color: N200,
+  color: `var(--ds-text-subtle, ${N200})`,
   cursor: 'pointer',
   height: 24,
   opacity: 0,
@@ -47,18 +50,18 @@ export const resizeIconButtonCSS = isCollapsed => ({
   `,
   width: 24,
   ':hover': {
-    backgroundColor: B100,
-    color: N0,
+    backgroundColor: `var(--ds-background-brand-hovered, ${B100})`,
+    color: `var(--ds-text-inverse, ${N0})`,
     opacity: 1
   },
   ':active': {
-    backgroundColor: B200,
-    color: N0,
+    backgroundColor: `var(--ds-background-brand-pressed, ${B200})`,
+    color: `var(--ds-text-inverse, ${N0})`,
     opacity: 1
   },
   ':focus': {
-    backgroundColor: B200,
-    color: N0,
+    backgroundColor: `var(--ds-background-brand-pressed, ${B200})`,
+    color: `var(--ds-text-inverse, ${N0})`,
     opacity: 1
   },
   ...(!isCollapsed && {

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

@@ -5,10 +5,10 @@ export const skipLinkStyles = {
   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 ${N30A}, 0 2px 10px ${N30A}, 0 0 20px -4px ${N60A}`,
+  boxShadow: `var(--ds-shadow-overlay, ${`0 0 0 1px ${N30A}, 0 2px 10px ${N30A}, 0 0 20px -4px ${N60A}`})`,
   borderRadius: '3px',
   margin: 10,
 

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

@@ -29,11 +29,11 @@ export const focusStyles = {
     outline: 'none',
     '&  [data-wrapper-element]': {
       outline: 'none',
-      boxShadow: '0px 0px 0px 2px inset #4C9AFF'
+      boxShadow: `0px 0px 0px 2px inset ${"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 ${"var(--ds-border-focused, #4C9AFF)"}`
     }
   }
 };

package/dist/es2019/version.json

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

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

@@ -17,11 +17,11 @@ export var resizeControlCSS = function resizeControlCSS(setIsGrabAreaFocused, is
     position: 'absolute',
     outline: 'none'
   }, _defineProperty(_ref, "[".concat(GRAB_AREA_SELECTOR, "]:enabled"), (_$concat = {}, _defineProperty(_$concat, "&:hover [".concat(GRAB_AREA_LINE_SELECTOR, "]"), {
-    backgroundColor: B100
+    backgroundColor: "var(--ds-background-brand-bold-hovered, ".concat(B100, ")")
   }), _defineProperty(_$concat, "&:active [".concat(GRAB_AREA_LINE_SELECTOR, "] , &:focus [").concat(GRAB_AREA_LINE_SELECTOR, "]"), {
-    backgroundColor: B200
+    backgroundColor: "var(--ds-background-brand-bold-pressed, ".concat(B200, ")")
   }), _defineProperty(_$concat, "&:hover [".concat(RESIZE_BUTTON_SELECTOR, "]:not(:focus):not(:hover)"), {
-    color: B100
+    backgroundColor: "var(--ds-background-brand-bold-hovered, ".concat(B100, ")")
   }), _defineProperty(_$concat, "&:hover [".concat(RESIZE_BUTTON_SELECTOR, "]"), {
     opacity: 1
   }), _$concat)), _defineProperty(_ref, "[".concat(RESIZE_BUTTON_SELECTOR, "]"), {
@@ -30,15 +30,17 @@ export var resizeControlCSS = function resizeControlCSS(setIsGrabAreaFocused, is
 };
 export var resizeIconButtonCSS = function resizeIconButtonCSS(isCollapsed) {
   return _objectSpread(_objectSpread({
-    backgroundColor: N0,
+    backgroundColor: "var(--ds-surface-overlay, ".concat(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(N30A, ", 0 2px 4px 1px ").concat(N30A),
-    color: N200,
+    color: "var(--ds-text-subtle, ".concat(N200, ")"),
     cursor: 'pointer',
     height: 24,
     opacity: 0,
@@ -47,18 +49,18 @@ export var resizeIconButtonCSS = function resizeIconButtonCSS(isCollapsed) {
     transition: "\n    background-color ".concat(smallDurationMs, "ms linear,\n    color ").concat(smallDurationMs, "ms linear,\n    opacity ").concat(mediumDurationMs, "ms ").concat(easeOut, "\n  "),
     width: 24,
     ':hover': {
-      backgroundColor: B100,
-      color: N0,
+      backgroundColor: "var(--ds-background-brand-hovered, ".concat(B100, ")"),
+      color: "var(--ds-text-inverse, ".concat(N0, ")"),
       opacity: 1
     },
     ':active': {
-      backgroundColor: B200,
-      color: N0,
+      backgroundColor: "var(--ds-background-brand-pressed, ".concat(B200, ")"),
+      color: "var(--ds-text-inverse, ".concat(N0, ")"),
       opacity: 1
     },
     ':focus': {
-      backgroundColor: B200,
-      color: N0,
+      backgroundColor: "var(--ds-background-brand-pressed, ".concat(B200, ")"),
+      color: "var(--ds-text-inverse, ".concat(N0, ")"),
       opacity: 1
     }
   }, !isCollapsed && {

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

@@ -11,10 +11,10 @@ export var skipLinkStyles = _objectSpread(_objectSpread({
   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(N30A, ", 0 2px 10px ").concat(N30A, ", 0 0 20px -4px ").concat(N60A),
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(N30A, ", 0 2px 10px ").concat(N30A, ", 0 0 20px -4px ").concat(N60A), ")"),
   borderRadius: '3px',
   margin: 10
 }, prefersReducedMotion()), {}, {

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

@@ -18,11 +18,11 @@ export 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/esm/version.json

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

package/dist/types/components/slots/styles.d.ts

@@ -1,6 +1,6 @@
 import { CSSObject } from '@emotion/core';
-export declare const gridStyles: import("@emotion/core").SerializedStyles;
-export declare const contentStyles: import("@emotion/core").SerializedStyles;
+export declare const gridStyles: import("@emotion/utils").SerializedStyles;
+export declare const contentStyles: import("@emotion/utils").SerializedStyles;
 export declare const focusStyles: {
     '&:focus': {
         outline: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/page-layout",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "A collection of components which let you compose an application's page layout",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,6 +26,7 @@
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/motion": "^1.0.0",
     "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.7.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
     "raf-schd": "^4.0.3"
@@ -35,14 +36,14 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/atlassian-navigation": "^2.0.0",
+    "@atlaskit/atlassian-navigation": "^2.1.0",
     "@atlaskit/atlassian-notifications": "^0.3.0",
-    "@atlaskit/button": "^16.0.0",
+    "@atlaskit/button": "^16.2.0",
     "@atlaskit/docs": "*",
     "@atlaskit/drawer": "^7.1.0",
     "@atlaskit/icon": "*",
     "@atlaskit/logo": "^13.0.0",
-    "@atlaskit/menu": "^1.2.0",
+    "@atlaskit/menu": "^1.3.0",
     "@atlaskit/notification-indicator": "^9.0.0",
     "@atlaskit/notification-log-client": "^6.0.0",
     "@atlaskit/onboarding": "^10.3.0",
@@ -79,7 +80,8 @@
         "analytics-next"
       ],
       "theming": [
-        "react-context"
+        "react-context",
+        "tokens"
       ],
       "deprecation": "no-deprecated-imports",
       "styling": [