@atlaskit/mobile-header 6.1.6 → 6.1.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/mobile-header
 
+## 6.1.7
+
+### Patch Changes
+
+- [#61588](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61588) [`c2563e7fb1f5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c2563e7fb1f5) - Remove reliance on logic from the deprecated `@atlaskit/theme` package. Theming is still available via the `@atlaskit/tokens` package.
+
 ## 6.1.6
 
 ### Patch Changes

package/dist/cjs/styled.js

@@ -8,12 +8,13 @@ exports.PageHeading = exports.MobilePageHeaderContent = exports.MobilePageHeader
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _theme = require("@atlaskit/theme");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9; // AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+var _colors = require("@atlaskit/theme/colors");
+var _constants = require("@atlaskit/theme/constants");
+var _typography = require("@atlaskit/theme/typography");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 // @atlaskit/navigation has a specific z-index, so we need to layer the header
 // components relative to that.
-var navLayer = _theme.layers.navigation();
+var navLayer = _constants.layers.navigation();
 var layers = {
   header: navLayer - 10,
   blanket: navLayer - 5,
@@ -34,10 +35,7 @@ var MobileNavSlider = exports.MobileNavSlider = _styled.default.div(_templateObj
 // make space so content below doesn't slip beneath the header
 // since the content is `position: fixed`
 var MobilePageHeader = exports.MobilePageHeader = _styled.default.header(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", "px;\n"])), mobileHeaderHeight);
-var MobilePageHeaderContent = exports.MobilePageHeaderContent = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", "px;\n  padding: ", ";\n  position: fixed;\n  top: ", "px;\n  width: 100%;\n  z-index: ", ";\n"])), (0, _theme.themed)({
-  light: _theme.colors.N20,
-  dark: _theme.colors.DN10
-}), mobileHeaderHeight, "var(--ds-space-100, 8px)", function (props) {
+var MobilePageHeaderContent = exports.MobilePageHeaderContent = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", "px;\n  padding: ", ";\n  position: fixed;\n  top: ", "px;\n  width: 100%;\n  z-index: ", ";\n"])), "var(--ds-background-neutral, ".concat(_colors.N20, ")"), mobileHeaderHeight, "var(--ds-space-100, 8px)", function (props) {
   return props.topOffset;
 }, layers.header);
 var opacityIn = (0, _react.keyframes)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  from { opacity: 0; }\n  to { opacity: 1; }\n"])));
@@ -45,9 +43,9 @@ var opacityOut = (0, _react.keyframes)(_templateObject7 || (_templateObject7 = (
 
 // @atlaskit/blanket has a z-index *higher* than @atlaskit/navigation,
 // so we can't display the AK blanket underneath the navigation.
-var FakeBlanket = exports.FakeBlanket = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: ", ";\n  animation: ", " 0.2s ease-out;\n"])), _theme.colors.N100A, layers.blanket, function (p) {
+var FakeBlanket = exports.FakeBlanket = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: ", ";\n  animation: ", " 0.2s ease-out;\n"])), "var(--ds-blanket, ".concat(_colors.N100A, ")"), layers.blanket, function (p) {
   return p.isOpen ? opacityIn : opacityOut;
 });
 
 // use proper h1 and header styles but for mobile we don't want a top margin
-var PageHeading = exports.PageHeading = _styled.default.h1(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  margin-left: ", ";\n  ", ";\n  && {\n    margin-top: 0;\n  }\n"])), "var(--ds-space-100, 8px)", _theme.typography.h500);
+var PageHeading = exports.PageHeading = _styled.default.h1(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  margin-left: ", ";\n  ", ";\n  && {\n    margin-top: 0;\n  }\n"])), "var(--ds-space-100, 8px)", _typography.h500);

package/dist/es2019/styled.js

@@ -1,9 +1,8 @@
 import { css, keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
-
-// AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import { layers as akLayers, colors, themed, typography } from '@atlaskit/theme';
+import { N100A, N20 } from '@atlaskit/theme/colors';
+import { layers as akLayers } from '@atlaskit/theme/constants';
+import { h500 } from '@atlaskit/theme/typography';
 // @atlaskit/navigation has a specific z-index, so we need to layer the header
 // components relative to that.
 const navLayer = akLayers.navigation();
@@ -39,10 +38,7 @@ export const MobilePageHeader = styled.header`
 `;
 export const MobilePageHeaderContent = styled.div`
   align-items: center;
-  background-color: ${themed({
-  light: colors.N20,
-  dark: colors.DN10
-})};
+  background-color: ${`var(--ds-background-neutral, ${N20})`};
   box-sizing: border-box;
   display: flex;
   height: ${mobileHeaderHeight}px;
@@ -64,7 +60,7 @@ const opacityOut = keyframes`
 // @atlaskit/blanket has a z-index *higher* than @atlaskit/navigation,
 // so we can't display the AK blanket underneath the navigation.
 export const FakeBlanket = styled.div`
-  background: ${colors.N100A};
+  background: ${`var(--ds-blanket, ${N100A})`};
   bottom: 0;
   left: 0;
   position: fixed;
@@ -78,7 +74,7 @@ export const FakeBlanket = styled.div`
 export const PageHeading = styled.h1`
   flex-grow: 1;
   margin-left: ${"var(--ds-space-100, 8px)"};
-  ${typography.h500};
+  ${h500};
   && {
     margin-top: 0;
   }

package/dist/esm/styled.js

@@ -2,10 +2,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 import { css, keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
-
-// AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import { layers as akLayers, colors, themed, typography } from '@atlaskit/theme';
+import { N100A, N20 } from '@atlaskit/theme/colors';
+import { layers as akLayers } from '@atlaskit/theme/constants';
+import { h500 } from '@atlaskit/theme/typography';
 // @atlaskit/navigation has a specific z-index, so we need to layer the header
 // components relative to that.
 var navLayer = akLayers.navigation();
@@ -29,10 +28,7 @@ export var MobileNavSlider = styled.div(_templateObject3 || (_templateObject3 =
 // make space so content below doesn't slip beneath the header
 // since the content is `position: fixed`
 export var MobilePageHeader = styled.header(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: ", "px;\n"])), mobileHeaderHeight);
-export var MobilePageHeaderContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", "px;\n  padding: ", ";\n  position: fixed;\n  top: ", "px;\n  width: 100%;\n  z-index: ", ";\n"])), themed({
-  light: colors.N20,
-  dark: colors.DN10
-}), mobileHeaderHeight, "var(--ds-space-100, 8px)", function (props) {
+export var MobilePageHeaderContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", "px;\n  padding: ", ";\n  position: fixed;\n  top: ", "px;\n  width: 100%;\n  z-index: ", ";\n"])), "var(--ds-background-neutral, ".concat(N20, ")"), mobileHeaderHeight, "var(--ds-space-100, 8px)", function (props) {
   return props.topOffset;
 }, layers.header);
 var opacityIn = keyframes(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  from { opacity: 0; }\n  to { opacity: 1; }\n"])));
@@ -40,9 +36,9 @@ var opacityOut = keyframes(_templateObject7 || (_templateObject7 = _taggedTempla
 
 // @atlaskit/blanket has a z-index *higher* than @atlaskit/navigation,
 // so we can't display the AK blanket underneath the navigation.
-export var FakeBlanket = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  background: ", ";\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: ", ";\n  animation: ", " 0.2s ease-out;\n"])), colors.N100A, layers.blanket, function (p) {
+export var FakeBlanket = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  background: ", ";\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: ", ";\n  animation: ", " 0.2s ease-out;\n"])), "var(--ds-blanket, ".concat(N100A, ")"), layers.blanket, function (p) {
   return p.isOpen ? opacityIn : opacityOut;
 });
 
 // use proper h1 and header styles but for mobile we don't want a top margin
-export var PageHeading = styled.h1(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  margin-left: ", ";\n  ", ";\n  && {\n    margin-top: 0;\n  }\n"])), "var(--ds-space-100, 8px)", typography.h500);
+export var PageHeading = styled.h1(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  margin-left: ", ";\n  ", ";\n  && {\n    margin-top: 0;\n  }\n"])), "var(--ds-space-100, 8px)", h500);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/mobile-header",
-  "version": "6.1.6",
+  "version": "6.1.7",
   "description": "A React component rendering a mobile header",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
     }
   },
   "dependencies": {
-    "@atlaskit/button": "^17.0.0",
+    "@atlaskit/button": "^17.1.0",
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.30.0",