@atlaskit/navigation-system 7.1.7 → 7.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlassian/navigation-system
 
+## 7.2.0
+
+### Minor Changes
+
+- [`71834d94559e2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/71834d94559e2) -
+  Implements custom theming support when the full height sidebar is enabled. This change is behind
+  the `platform_dst_nav4_custom_theming_fhs_1` feature gate.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 7.1.7
 
 ### Patch Changes

package/dist/cjs/ui/page-layout/top-nav/top-nav-start.compiled.css

@@ -12,5 +12,5 @@
 ._vchhusvi{box-sizing:border-box}
 [dir=rtl] ._65m41mrw{--animation-direction:-1}
 @media (prefers-reduced-motion:no-preference){._10t81e03{transition-property:transform}._10t81rjc{transition-property:transform,opacity}._1xq51ytf{transition-timing-function:ease-in-out}._1xq55ucs{transition-timing-function:ease}._mjvc1efy{transform:translateX(calc(100%*var(--animation-direction)))}._bgpzidpf{opacity:0}._mjvc1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._mjvco0k7{transform:translateX(calc((-2rem + var(--ds-space-050, 4px)*-1)*var(--animation-direction)))}._mjvcyrjp{transform:translateX(calc((2rem + var(--ds-space-050, 4px))*var(--animation-direction)))}._mjvcz12g{transform:translateX(0)}._xrrpfnf5{transition-duration:.2s}._bgpzkb7n{opacity:1}}
-@media (min-width:64rem){._13wnh2mm{position:relative}._1l3vb3bt:after{content:""}._juxdstnw:after{position:absolute}._1vinidpf:after{inset-block-start:0}._1719idpf:after{inset-block-end:0}._e6znidpf:after{inset-inline-end:0}._1kyhe4h9:after{border-inline-end-width:var(--ds-border-width,1px)}._4cwynqa1:after{border-inline-end-style:solid}._435s1l7x:after{border-inline-end-color:var(--ds-border,#0b120e24)}._m7c3idpf:after{opacity:0}._15rin7od{min-width:unset}._glte1osq{width:100%}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmutpp{padding-inline-end:var(--ds-space-150,9pt)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}}
+@media (min-width:64rem){._13wnh2mm{position:relative}._1l3vb3bt:after{content:""}._juxdstnw:after{position:absolute}._1vinidpf:after{inset-block-start:0}._1719idpf:after{inset-block-end:0}._e6znidpf:after{inset-inline-end:0}._1kyhe4h9:after{border-inline-end-width:var(--ds-border-width,1px)}._4cwynqa1:after{border-inline-end-style:solid}._435s1l7x:after{border-inline-end-color:var(--ds-border,#0b120e24)}._m7c3idpf:after{opacity:0}._15rin7od{min-width:unset}._glte1osq{width:100%}._4ap319ly{background-color:revert}._1m5lglyw:after{display:none}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmutpp{padding-inline-end:var(--ds-space-150,9pt)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}}
 @media (prefers-reduced-motion:no-preference) and (min-width:64rem){._n8qabrmi:after{transition-property:opacity}._wc72fnf5:after{transition-duration:.2s}._j3mr1v42:after{transition-timing-function:ease-in}}

package/dist/cjs/ui/page-layout/top-nav/top-nav-start.js

@@ -13,9 +13,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _topNavStartContext = require("../../../context/top-nav-start/top-nav-start-context");
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
+var _hasCustomThemeContext = require("../../top-nav-items/themed/has-custom-theme-context");
+var _hasDefaultBackgroundColorContext = require("../../top-nav-items/themed/has-default-background-color-context");
 var _constants = require("../constants");
 var _useSideNavVisibility3 = require("../side-nav/use-side-nav-visibility");
 var _visibilityContext = require("../side-nav/visibility-context");
@@ -52,7 +55,8 @@ var innerStyles = {
 var wrapperStyles = {
   root: "_vchhusvi _bozgutpp _4t3i1osq _13wnh2mm _1l3vb3bt _juxdstnw _1vinidpf _1719idpf _e6znidpf _1kyhe4h9 _4cwynqa1 _435s1l7x _m7c3idpf",
   fullHeightSidebarExpanded: "_glte93mn _exxmutpp _4ap3vuon _m7c3kb7n",
-  fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42"
+  fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42",
+  fullHeightSidebarCustomTheming: "_4ap319ly _1m5lglyw"
 };
 
 /**
@@ -133,8 +137,10 @@ var TopNavStartInnerFHS = /*#__PURE__*/(0, _react.forwardRef)(function TopNavSta
       isFirstRenderRef.current = false;
     }
   }, [sideNavState]);
+  var hasCustomTheme = (0, _hasCustomThemeContext.useHasCustomTheme)();
+  var hasDefaultBackgroundColor = (0, _react.useContext)(_hasDefaultBackgroundColorContext.HasDefaultBackgroundColorContext);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _runtime.ax)([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, !isFirstRenderRef.current && isExpandedOnDesktop && wrapperStyles.fullHeightSidebarBorderTransition])
+    className: (0, _runtime.ax)([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, !isFirstRenderRef.current && isExpandedOnDesktop && wrapperStyles.fullHeightSidebarBorderTransition, hasCustomTheme && !hasDefaultBackgroundColor && (0, _platformFeatureFlags.fg)('platform_dst_nav4_custom_theming_fhs_1') && wrapperStyles.fullHeightSidebarCustomTheming])
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     "data-testid": testId,

package/dist/cjs/ui/page-layout/top-nav/top-nav.compiled.css

@@ -25,5 +25,5 @@
 ._vchhusvi{box-sizing:border-box}
 ._yv0e1mfv{grid-template-columns:auto 1fr auto}
 @media (min-width:48rem){._1j8b18ax{grid-template-columns:1fr minmax(min-content,max-content) 1fr}}
-@media (min-width:64rem){._1rqt16a9{grid-template-columns:0fr minmax(min-content,max-content) 1fr}._pdlmutpp{gap:var(--ds-space-150,9pt)}}
+@media (min-width:64rem){._1m5lglyw:after{display:none}._1rqt16a9{grid-template-columns:0fr minmax(min-content,max-content) 1fr}._pdlmutpp{gap:var(--ds-space-150,9pt)}}
 @media (min-width:110.5rem){._jh1g18ax{grid-template-columns:1fr minmax(min-content,max-content) 1fr}}

package/dist/cjs/ui/page-layout/top-nav/top-nav.js

@@ -5,21 +5,23 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TopNav = TopNav;
+exports.TopNav = void 0;
 require("./top-nav.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _skipLinksContext = require("../../../context/skip-links/skip-links-context");
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _hasCustomThemeContext = require("../../top-nav-items/themed/has-custom-theme-context");
+var _hasDefaultBackgroundColorContext = require("../../top-nav-items/themed/has-default-background-color-context");
 var _useCustomTheme = require("../../top-nav-items/themed/use-custom-theme");
 var _constants = require("../constants");
 var _hoistSlotSizesContext = require("../hoist-slot-sizes-context");
 var _hoistUtils = require("../hoist-utils");
 var _idUtils = require("../id-utils");
-var _useSideNavVisibility2 = require("../side-nav/use-side-nav-visibility");
+var _useSideNavVisibility3 = require("../side-nav/use-side-nav-visibility");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
  * Styles for the container for the top nav items.
@@ -32,13 +34,13 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var styles = {
   root: "_nd5l8cbt _zulpu2gc _18zrutpp _179ria51 _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
   fullHeightSidebar: "_18zrze3t _179rglyw _lcxv1wug _bfhkvuon _1pby11wp _aetrb3bt _18postnw _1gufidpf _1czdidpf _g0nf3tht _1beue4h9 _uaeunqa1 _1cte1l7x _pdlmutpp",
-  fullHeightSidebarExpanded: "_1rqt16a9 _jh1g18ax"
+  fullHeightSidebarExpanded: "_1rqt16a9 _jh1g18ax",
+  fullHeightSidebarCustomTheming: "_1m5lglyw"
 };
-
 /**
  * The top nav layout area. It will display at the top of the screen, below the banner if one is present.
  */
-function TopNav(_ref) {
+function TopNavOld(_ref) {
   var children = _ref.children,
     xcss = _ref.xcss,
     heightProp = _ref.height,
@@ -56,7 +58,7 @@ function TopNav(_ref) {
   var hasIncreasedDefaultHeight = isFhsEnabled && (0, _platformFeatureFlags.fg)('platform_dst_nav4_top_nav_increase_height');
   var height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
   var customTheme = (0, _useCustomTheme.useCustomTheme)(UNSAFE_theme);
-  var _useSideNavVisibility = (0, _useSideNavVisibility2.useSideNavVisibility)(),
+  var _useSideNavVisibility = (0, _useSideNavVisibility3.useSideNavVisibility)(),
     isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
   return /*#__PURE__*/React.createElement(_hasCustomThemeContext.HasCustomThemeContext.Provider, {
     value: customTheme.isEnabled
@@ -82,4 +84,61 @@ function TopNav(_ref) {
   })
   // ------ END UNSAFE STYLES ------
   , children));
-}
+}
+
+/**
+ * The top nav layout area. It will display at the top of the screen, below the banner if one is present.
+ */
+function TopNavNew(_ref2) {
+  var children = _ref2.children,
+    xcss = _ref2.xcss,
+    heightProp = _ref2.height,
+    _ref2$skipLinkLabel = _ref2.skipLinkLabel,
+    skipLinkLabel = _ref2$skipLinkLabel === void 0 ? 'Top Bar' : _ref2$skipLinkLabel,
+    testId = _ref2.testId,
+    providedId = _ref2.id,
+    UNSAFE_theme = _ref2.UNSAFE_theme;
+  var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
+  var dangerouslyHoistSlotSizes = (0, _react.useContext)(_hoistSlotSizesContext.DangerouslyHoistSlotSizes);
+  var id = (0, _idUtils.useLayoutId)({
+    providedId: providedId
+  });
+  (0, _skipLinksContext.useSkipLink)(id, skipLinkLabel);
+  var hasIncreasedDefaultHeight = isFhsEnabled && (0, _platformFeatureFlags.fg)('platform_dst_nav4_top_nav_increase_height');
+  var height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
+  var customTheme = (0, _useCustomTheme.useCustomThemeNew)(UNSAFE_theme);
+  var hasDefaultBackground = customTheme.isEnabled ? customTheme.hasDefaultBackground : true;
+  var _useSideNavVisibility2 = (0, _useSideNavVisibility3.useSideNavVisibility)(),
+    isExpandedOnDesktop = _useSideNavVisibility2.isExpandedOnDesktop;
+  return /*#__PURE__*/React.createElement(_hasCustomThemeContext.HasCustomThemeContext.Provider, {
+    value: customTheme.isEnabled
+  }, /*#__PURE__*/React.createElement(_hasDefaultBackgroundColorContext.HasDefaultBackgroundColorContext.Provider, {
+    value: hasDefaultBackground
+  }, /*#__PURE__*/React.createElement("header", {
+    id: id,
+    "data-layout-slot": true,
+    className: (0, _runtime.ax)([styles.root, isFhsEnabled && styles.fullHeightSidebar, isExpandedOnDesktop && isFhsEnabled && styles.fullHeightSidebarExpanded, customTheme.isEnabled && !hasDefaultBackground && (0, _platformFeatureFlags.fg)('platform_dst_nav4_custom_theming_fhs_1') && styles.fullHeightSidebarCustomTheming, xcss]),
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: customTheme.isEnabled ? customTheme.style : undefined
+  }, /*#__PURE__*/React.createElement(_hoistUtils.HoistCssVarToLocalGrid, {
+    variableName: _constants.topNavMountedVar,
+    value: height
+  }), dangerouslyHoistSlotSizes &&
+  /*#__PURE__*/
+  // ------ START UNSAFE STYLES ------
+  // These styles are only needed for the UNSAFE legacy use case for Jira + Confluence.
+  // When they aren't needed anymore we can delete them wholesale.
+  React.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
+    variableName: _constants.UNSAFE_topNavVar,
+    value: height
+  })
+  // ------ END UNSAFE STYLES ------
+  , children)));
+}
+
+/**
+ * The top nav layout area. It will display at the top of the screen, below the banner if one is present.
+ */
+var TopNav = exports.TopNav = (0, _platformFeatureFlagsReact.componentWithFG)('platform_dst_nav4_custom_theming_fhs_1', TopNavNew, TopNavOld);

package/dist/cjs/ui/top-nav-items/themed/has-default-background-color-context.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HasDefaultBackgroundColorContext = void 0;
+var _react = require("react");
+/**
+ * Context to let components know if the top nav background color is the default background color,
+ * even while a custom theme is being applied.
+ */
+var HasDefaultBackgroundColorContext = exports.HasDefaultBackgroundColorContext = /*#__PURE__*/(0, _react.createContext)(true);

package/dist/cjs/ui/top-nav-items/themed/use-custom-theme.js

@@ -1,11 +1,52 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useCustomTheme = useCustomTheme;
+exports.useCustomThemeNew = useCustomThemeNew;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
+var _appProvider = require("@atlaskit/app-provider");
+var _tokens = require("@atlaskit/tokens");
+var _hex = require("./color-utils/formats/hex");
 var _getCustomThemeStyles = require("./get-custom-theme-styles");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function toRGBString(_ref) {
+  var r = _ref.r,
+    g = _ref.g,
+    b = _ref.b;
+  return "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")");
+}
+
+// TODO: Fill in the hook {description}.
+/**
+ * {description}.
+ */
+function useCustomThemeNew(theme) {
+  var value = useCustomTheme(theme);
+
+  /**
+   * We use the color mode to determine the default background color for the top nav.
+   * We need to use the hook because the user could change their color mode preference.
+   */
+  var colorMode = (0, _appProvider.useColorMode)();
+  var hasDefaultBackground = (0, _react.useMemo)(function () {
+    if (!value.isEnabled) {
+      return true;
+    }
+    var defaultBackground = (0, _hex.parseHex)((0, _tokens.getTokenValue)('elevation.surface', colorMode === 'light' ? '#FFFFFF' : '#1F1F21'));
+    return defaultBackground ? value.style.backgroundColor === toRGBString(defaultBackground) : true;
+  }, [value, colorMode]);
+  if (value.isEnabled) {
+    return _objectSpread(_objectSpread({}, value), {}, {
+      hasDefaultBackground: hasDefaultBackground
+    });
+  }
+  return value;
+}
 /**
  * Processes the provided theme and returns theme styles if possible.
  */

package/dist/es2019/ui/page-layout/top-nav/top-nav-start.compiled.css

@@ -12,5 +12,5 @@
 ._vchhusvi{box-sizing:border-box}
 [dir=rtl] ._65m41mrw{--animation-direction:-1}
 @media (prefers-reduced-motion:no-preference){._10t81e03{transition-property:transform}._10t81rjc{transition-property:transform,opacity}._1xq51ytf{transition-timing-function:ease-in-out}._1xq55ucs{transition-timing-function:ease}._mjvc1efy{transform:translateX(calc(100%*var(--animation-direction)))}._bgpzidpf{opacity:0}._mjvc1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._mjvco0k7{transform:translateX(calc((-2rem + var(--ds-space-050, 4px)*-1)*var(--animation-direction)))}._mjvcyrjp{transform:translateX(calc((2rem + var(--ds-space-050, 4px))*var(--animation-direction)))}._mjvcz12g{transform:translateX(0)}._xrrpfnf5{transition-duration:.2s}._bgpzkb7n{opacity:1}}
-@media (min-width:64rem){._13wnh2mm{position:relative}._1l3vb3bt:after{content:""}._juxdstnw:after{position:absolute}._1vinidpf:after{inset-block-start:0}._1719idpf:after{inset-block-end:0}._e6znidpf:after{inset-inline-end:0}._1kyhe4h9:after{border-inline-end-width:var(--ds-border-width,1px)}._4cwynqa1:after{border-inline-end-style:solid}._435s1l7x:after{border-inline-end-color:var(--ds-border,#0b120e24)}._m7c3idpf:after{opacity:0}._15rin7od{min-width:unset}._glte1osq{width:100%}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmutpp{padding-inline-end:var(--ds-space-150,9pt)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}}
+@media (min-width:64rem){._13wnh2mm{position:relative}._1l3vb3bt:after{content:""}._juxdstnw:after{position:absolute}._1vinidpf:after{inset-block-start:0}._1719idpf:after{inset-block-end:0}._e6znidpf:after{inset-inline-end:0}._1kyhe4h9:after{border-inline-end-width:var(--ds-border-width,1px)}._4cwynqa1:after{border-inline-end-style:solid}._435s1l7x:after{border-inline-end-color:var(--ds-border,#0b120e24)}._m7c3idpf:after{opacity:0}._15rin7od{min-width:unset}._glte1osq{width:100%}._4ap319ly{background-color:revert}._1m5lglyw:after{display:none}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmutpp{padding-inline-end:var(--ds-space-150,9pt)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}}
 @media (prefers-reduced-motion:no-preference) and (min-width:64rem){._n8qabrmi:after{transition-property:opacity}._wc72fnf5:after{transition-duration:.2s}._j3mr1v42:after{transition-timing-function:ease-in}}

package/dist/es2019/ui/page-layout/top-nav/top-nav-start.js

@@ -4,9 +4,12 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_useMediaQuery } from '@atlaskit/primitives/compiled';
 import { TopNavStartAttachRef } from '../../../context/top-nav-start/top-nav-start-context';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
+import { useHasCustomTheme } from '../../top-nav-items/themed/has-custom-theme-context';
+import { HasDefaultBackgroundColorContext } from '../../top-nav-items/themed/has-default-background-color-context';
 import { openLayerObserverTopNavStartNamespace } from '../constants';
 import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
 import { SideNavVisibilityState } from '../side-nav/visibility-context';
@@ -43,7 +46,8 @@ const innerStyles = {
 const wrapperStyles = {
   root: "_vchhusvi _bozgutpp _4t3i1osq _13wnh2mm _1l3vb3bt _juxdstnw _1vinidpf _1719idpf _e6znidpf _1kyhe4h9 _4cwynqa1 _435s1l7x _m7c3idpf",
   fullHeightSidebarExpanded: "_glte93mn _exxmutpp _4ap3vuon _m7c3kb7n",
-  fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42"
+  fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42",
+  fullHeightSidebarCustomTheming: "_4ap319ly _1m5lglyw"
 };
 
 /**
@@ -127,8 +131,10 @@ const TopNavStartInnerFHS = /*#__PURE__*/forwardRef(function TopNavStartInnerFHS
       isFirstRenderRef.current = false;
     }
   }, [sideNavState]);
+  const hasCustomTheme = useHasCustomTheme();
+  const hasDefaultBackgroundColor = useContext(HasDefaultBackgroundColorContext);
   return /*#__PURE__*/React.createElement("div", {
-    className: ax([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, !isFirstRenderRef.current && isExpandedOnDesktop && wrapperStyles.fullHeightSidebarBorderTransition])
+    className: ax([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, !isFirstRenderRef.current && isExpandedOnDesktop && wrapperStyles.fullHeightSidebarBorderTransition, hasCustomTheme && !hasDefaultBackgroundColor && fg('platform_dst_nav4_custom_theming_fhs_1') && wrapperStyles.fullHeightSidebarCustomTheming])
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,
     "data-testid": testId,

package/dist/es2019/ui/page-layout/top-nav/top-nav.compiled.css

@@ -25,5 +25,5 @@
 ._vchhusvi{box-sizing:border-box}
 ._yv0e1mfv{grid-template-columns:auto 1fr auto}
 @media (min-width:48rem){._1j8b18ax{grid-template-columns:1fr minmax(min-content,max-content) 1fr}}
-@media (min-width:64rem){._1rqt16a9{grid-template-columns:0fr minmax(min-content,max-content) 1fr}._pdlmutpp{gap:var(--ds-space-150,9pt)}}
+@media (min-width:64rem){._1m5lglyw:after{display:none}._1rqt16a9{grid-template-columns:0fr minmax(min-content,max-content) 1fr}._pdlmutpp{gap:var(--ds-space-150,9pt)}}
 @media (min-width:110.5rem){._jh1g18ax{grid-template-columns:1fr minmax(min-content,max-content) 1fr}}

package/dist/es2019/ui/page-layout/top-nav/top-nav.js

@@ -4,10 +4,12 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useContext } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 import { useSkipLink } from '../../../context/skip-links/skip-links-context';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
-import { useCustomTheme } from '../../top-nav-items/themed/use-custom-theme';
+import { HasDefaultBackgroundColorContext } from '../../top-nav-items/themed/has-default-background-color-context';
+import { useCustomTheme, useCustomThemeNew } from '../../top-nav-items/themed/use-custom-theme';
 import { bannerMountedVar, localSlotLayers, sideNavLiveWidthVar, topNavMountedVar, UNSAFE_topNavVar } from '../constants';
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
 import { DangerouslyHoistCssVarToDocumentRoot, HoistCssVarToLocalGrid } from '../hoist-utils';
@@ -24,13 +26,13 @@ import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
 const styles = {
   root: "_nd5l8cbt _zulpu2gc _18zrutpp _179ria51 _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
   fullHeightSidebar: "_18zrze3t _179rglyw _lcxv1wug _bfhkvuon _1pby11wp _aetrb3bt _18postnw _1gufidpf _1czdidpf _g0nf3tht _1beue4h9 _uaeunqa1 _1cte1l7x _pdlmutpp",
-  fullHeightSidebarExpanded: "_1rqt16a9 _jh1g18ax"
+  fullHeightSidebarExpanded: "_1rqt16a9 _jh1g18ax",
+  fullHeightSidebarCustomTheming: "_1m5lglyw"
 };
-
 /**
  * The top nav layout area. It will display at the top of the screen, below the banner if one is present.
  */
-export function TopNav({
+function TopNavOld({
   children,
   xcss,
   height: heightProp,
@@ -75,4 +77,62 @@ export function TopNav({
   })
   // ------ END UNSAFE STYLES ------
   , children));
-}
+}
+
+/**
+ * The top nav layout area. It will display at the top of the screen, below the banner if one is present.
+ */
+function TopNavNew({
+  children,
+  xcss,
+  height: heightProp,
+  skipLinkLabel = 'Top Bar',
+  testId,
+  id: providedId,
+  UNSAFE_theme
+}) {
+  const isFhsEnabled = useIsFhsEnabled();
+  const dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
+  const id = useLayoutId({
+    providedId
+  });
+  useSkipLink(id, skipLinkLabel);
+  const hasIncreasedDefaultHeight = isFhsEnabled && fg('platform_dst_nav4_top_nav_increase_height');
+  const height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
+  const customTheme = useCustomThemeNew(UNSAFE_theme);
+  const hasDefaultBackground = customTheme.isEnabled ? customTheme.hasDefaultBackground : true;
+  const {
+    isExpandedOnDesktop
+  } = useSideNavVisibility();
+  return /*#__PURE__*/React.createElement(HasCustomThemeContext.Provider, {
+    value: customTheme.isEnabled
+  }, /*#__PURE__*/React.createElement(HasDefaultBackgroundColorContext.Provider, {
+    value: hasDefaultBackground
+  }, /*#__PURE__*/React.createElement("header", {
+    id: id,
+    "data-layout-slot": true,
+    className: ax([styles.root, isFhsEnabled && styles.fullHeightSidebar, isExpandedOnDesktop && isFhsEnabled && styles.fullHeightSidebarExpanded, customTheme.isEnabled && !hasDefaultBackground && fg('platform_dst_nav4_custom_theming_fhs_1') && styles.fullHeightSidebarCustomTheming, xcss]),
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: customTheme.isEnabled ? customTheme.style : undefined
+  }, /*#__PURE__*/React.createElement(HoistCssVarToLocalGrid, {
+    variableName: topNavMountedVar,
+    value: height
+  }), dangerouslyHoistSlotSizes &&
+  /*#__PURE__*/
+  // ------ START UNSAFE STYLES ------
+  // These styles are only needed for the UNSAFE legacy use case for Jira + Confluence.
+  // When they aren't needed anymore we can delete them wholesale.
+  React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
+    variableName: UNSAFE_topNavVar,
+    value: height
+  })
+  // ------ END UNSAFE STYLES ------
+  , children)));
+}
+
+/**
+ * The top nav layout area. It will display at the top of the screen, below the banner if one is present.
+ */
+export const TopNav = componentWithFG('platform_dst_nav4_custom_theming_fhs_1', TopNavNew, TopNavOld);

package/dist/es2019/ui/top-nav-items/themed/has-default-background-color-context.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+/**
+ * Context to let components know if the top nav background color is the default background color,
+ * even while a custom theme is being applied.
+ */
+export const HasDefaultBackgroundColorContext = /*#__PURE__*/createContext(true);

package/dist/es2019/ui/top-nav-items/themed/use-custom-theme.js

@@ -1,5 +1,43 @@
 import { useMemo } from 'react';
+import { useColorMode } from '@atlaskit/app-provider';
+import { getTokenValue } from '@atlaskit/tokens';
+import { parseHex } from './color-utils/formats/hex';
 import { getCustomThemeStyles } from './get-custom-theme-styles';
+function toRGBString({
+  r,
+  g,
+  b
+}) {
+  return `rgb(${r}, ${g}, ${b})`;
+}
+
+// TODO: Fill in the hook {description}.
+/**
+ * {description}.
+ */
+export function useCustomThemeNew(theme) {
+  const value = useCustomTheme(theme);
+
+  /**
+   * We use the color mode to determine the default background color for the top nav.
+   * We need to use the hook because the user could change their color mode preference.
+   */
+  const colorMode = useColorMode();
+  const hasDefaultBackground = useMemo(() => {
+    if (!value.isEnabled) {
+      return true;
+    }
+    const defaultBackground = parseHex(getTokenValue('elevation.surface', colorMode === 'light' ? '#FFFFFF' : '#1F1F21'));
+    return defaultBackground ? value.style.backgroundColor === toRGBString(defaultBackground) : true;
+  }, [value, colorMode]);
+  if (value.isEnabled) {
+    return {
+      ...value,
+      hasDefaultBackground
+    };
+  }
+  return value;
+}
 /**
  * Processes the provided theme and returns theme styles if possible.
  */

package/dist/esm/ui/page-layout/top-nav/top-nav-start.compiled.css

@@ -12,5 +12,5 @@
 ._vchhusvi{box-sizing:border-box}
 [dir=rtl] ._65m41mrw{--animation-direction:-1}
 @media (prefers-reduced-motion:no-preference){._10t81e03{transition-property:transform}._10t81rjc{transition-property:transform,opacity}._1xq51ytf{transition-timing-function:ease-in-out}._1xq55ucs{transition-timing-function:ease}._mjvc1efy{transform:translateX(calc(100%*var(--animation-direction)))}._bgpzidpf{opacity:0}._mjvc1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._mjvco0k7{transform:translateX(calc((-2rem + var(--ds-space-050, 4px)*-1)*var(--animation-direction)))}._mjvcyrjp{transform:translateX(calc((2rem + var(--ds-space-050, 4px))*var(--animation-direction)))}._mjvcz12g{transform:translateX(0)}._xrrpfnf5{transition-duration:.2s}._bgpzkb7n{opacity:1}}
-@media (min-width:64rem){._13wnh2mm{position:relative}._1l3vb3bt:after{content:""}._juxdstnw:after{position:absolute}._1vinidpf:after{inset-block-start:0}._1719idpf:after{inset-block-end:0}._e6znidpf:after{inset-inline-end:0}._1kyhe4h9:after{border-inline-end-width:var(--ds-border-width,1px)}._4cwynqa1:after{border-inline-end-style:solid}._435s1l7x:after{border-inline-end-color:var(--ds-border,#0b120e24)}._m7c3idpf:after{opacity:0}._15rin7od{min-width:unset}._glte1osq{width:100%}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmutpp{padding-inline-end:var(--ds-space-150,9pt)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}}
+@media (min-width:64rem){._13wnh2mm{position:relative}._1l3vb3bt:after{content:""}._juxdstnw:after{position:absolute}._1vinidpf:after{inset-block-start:0}._1719idpf:after{inset-block-end:0}._e6znidpf:after{inset-inline-end:0}._1kyhe4h9:after{border-inline-end-width:var(--ds-border-width,1px)}._4cwynqa1:after{border-inline-end-style:solid}._435s1l7x:after{border-inline-end-color:var(--ds-border,#0b120e24)}._m7c3idpf:after{opacity:0}._15rin7od{min-width:unset}._glte1osq{width:100%}._4ap319ly{background-color:revert}._1m5lglyw:after{display:none}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmutpp{padding-inline-end:var(--ds-space-150,9pt)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}}
 @media (prefers-reduced-motion:no-preference) and (min-width:64rem){._n8qabrmi:after{transition-property:opacity}._wc72fnf5:after{transition-duration:.2s}._j3mr1v42:after{transition-timing-function:ease-in}}

package/dist/esm/ui/page-layout/top-nav/top-nav-start.js

@@ -5,9 +5,12 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_useMediaQuery } from '@atlaskit/primitives/compiled';
 import { TopNavStartAttachRef } from '../../../context/top-nav-start/top-nav-start-context';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
+import { useHasCustomTheme } from '../../top-nav-items/themed/has-custom-theme-context';
+import { HasDefaultBackgroundColorContext } from '../../top-nav-items/themed/has-default-background-color-context';
 import { openLayerObserverTopNavStartNamespace } from '../constants';
 import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
 import { SideNavVisibilityState } from '../side-nav/visibility-context';
@@ -44,7 +47,8 @@ var innerStyles = {
 var wrapperStyles = {
   root: "_vchhusvi _bozgutpp _4t3i1osq _13wnh2mm _1l3vb3bt _juxdstnw _1vinidpf _1719idpf _e6znidpf _1kyhe4h9 _4cwynqa1 _435s1l7x _m7c3idpf",
   fullHeightSidebarExpanded: "_glte93mn _exxmutpp _4ap3vuon _m7c3kb7n",
-  fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42"
+  fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42",
+  fullHeightSidebarCustomTheming: "_4ap319ly _1m5lglyw"
 };
 
 /**
@@ -125,8 +129,10 @@ var TopNavStartInnerFHS = /*#__PURE__*/forwardRef(function TopNavStartInnerFHS(_
       isFirstRenderRef.current = false;
     }
   }, [sideNavState]);
+  var hasCustomTheme = useHasCustomTheme();
+  var hasDefaultBackgroundColor = useContext(HasDefaultBackgroundColorContext);
   return /*#__PURE__*/React.createElement("div", {
-    className: ax([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, !isFirstRenderRef.current && isExpandedOnDesktop && wrapperStyles.fullHeightSidebarBorderTransition])
+    className: ax([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, !isFirstRenderRef.current && isExpandedOnDesktop && wrapperStyles.fullHeightSidebarBorderTransition, hasCustomTheme && !hasDefaultBackgroundColor && fg('platform_dst_nav4_custom_theming_fhs_1') && wrapperStyles.fullHeightSidebarCustomTheming])
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,
     "data-testid": testId,

package/dist/esm/ui/page-layout/top-nav/top-nav.compiled.css

@@ -25,5 +25,5 @@
 ._vchhusvi{box-sizing:border-box}
 ._yv0e1mfv{grid-template-columns:auto 1fr auto}
 @media (min-width:48rem){._1j8b18ax{grid-template-columns:1fr minmax(min-content,max-content) 1fr}}
-@media (min-width:64rem){._1rqt16a9{grid-template-columns:0fr minmax(min-content,max-content) 1fr}._pdlmutpp{gap:var(--ds-space-150,9pt)}}
+@media (min-width:64rem){._1m5lglyw:after{display:none}._1rqt16a9{grid-template-columns:0fr minmax(min-content,max-content) 1fr}._pdlmutpp{gap:var(--ds-space-150,9pt)}}
 @media (min-width:110.5rem){._jh1g18ax{grid-template-columns:1fr minmax(min-content,max-content) 1fr}}

package/dist/esm/ui/page-layout/top-nav/top-nav.js

@@ -4,10 +4,12 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useContext } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 import { useSkipLink } from '../../../context/skip-links/skip-links-context';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
-import { useCustomTheme } from '../../top-nav-items/themed/use-custom-theme';
+import { HasDefaultBackgroundColorContext } from '../../top-nav-items/themed/has-default-background-color-context';
+import { useCustomTheme, useCustomThemeNew } from '../../top-nav-items/themed/use-custom-theme';
 import { bannerMountedVar, localSlotLayers, sideNavLiveWidthVar, topNavMountedVar, UNSAFE_topNavVar } from '../constants';
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
 import { DangerouslyHoistCssVarToDocumentRoot, HoistCssVarToLocalGrid } from '../hoist-utils';
@@ -24,13 +26,13 @@ import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
 var styles = {
   root: "_nd5l8cbt _zulpu2gc _18zrutpp _179ria51 _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
   fullHeightSidebar: "_18zrze3t _179rglyw _lcxv1wug _bfhkvuon _1pby11wp _aetrb3bt _18postnw _1gufidpf _1czdidpf _g0nf3tht _1beue4h9 _uaeunqa1 _1cte1l7x _pdlmutpp",
-  fullHeightSidebarExpanded: "_1rqt16a9 _jh1g18ax"
+  fullHeightSidebarExpanded: "_1rqt16a9 _jh1g18ax",
+  fullHeightSidebarCustomTheming: "_1m5lglyw"
 };
-
 /**
  * The top nav layout area. It will display at the top of the screen, below the banner if one is present.
  */
-export function TopNav(_ref) {
+function TopNavOld(_ref) {
   var children = _ref.children,
     xcss = _ref.xcss,
     heightProp = _ref.height,
@@ -74,4 +76,61 @@ export function TopNav(_ref) {
   })
   // ------ END UNSAFE STYLES ------
   , children));
-}
+}
+
+/**
+ * The top nav layout area. It will display at the top of the screen, below the banner if one is present.
+ */
+function TopNavNew(_ref2) {
+  var children = _ref2.children,
+    xcss = _ref2.xcss,
+    heightProp = _ref2.height,
+    _ref2$skipLinkLabel = _ref2.skipLinkLabel,
+    skipLinkLabel = _ref2$skipLinkLabel === void 0 ? 'Top Bar' : _ref2$skipLinkLabel,
+    testId = _ref2.testId,
+    providedId = _ref2.id,
+    UNSAFE_theme = _ref2.UNSAFE_theme;
+  var isFhsEnabled = useIsFhsEnabled();
+  var dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
+  var id = useLayoutId({
+    providedId: providedId
+  });
+  useSkipLink(id, skipLinkLabel);
+  var hasIncreasedDefaultHeight = isFhsEnabled && fg('platform_dst_nav4_top_nav_increase_height');
+  var height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
+  var customTheme = useCustomThemeNew(UNSAFE_theme);
+  var hasDefaultBackground = customTheme.isEnabled ? customTheme.hasDefaultBackground : true;
+  var _useSideNavVisibility2 = useSideNavVisibility(),
+    isExpandedOnDesktop = _useSideNavVisibility2.isExpandedOnDesktop;
+  return /*#__PURE__*/React.createElement(HasCustomThemeContext.Provider, {
+    value: customTheme.isEnabled
+  }, /*#__PURE__*/React.createElement(HasDefaultBackgroundColorContext.Provider, {
+    value: hasDefaultBackground
+  }, /*#__PURE__*/React.createElement("header", {
+    id: id,
+    "data-layout-slot": true,
+    className: ax([styles.root, isFhsEnabled && styles.fullHeightSidebar, isExpandedOnDesktop && isFhsEnabled && styles.fullHeightSidebarExpanded, customTheme.isEnabled && !hasDefaultBackground && fg('platform_dst_nav4_custom_theming_fhs_1') && styles.fullHeightSidebarCustomTheming, xcss]),
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: customTheme.isEnabled ? customTheme.style : undefined
+  }, /*#__PURE__*/React.createElement(HoistCssVarToLocalGrid, {
+    variableName: topNavMountedVar,
+    value: height
+  }), dangerouslyHoistSlotSizes &&
+  /*#__PURE__*/
+  // ------ START UNSAFE STYLES ------
+  // These styles are only needed for the UNSAFE legacy use case for Jira + Confluence.
+  // When they aren't needed anymore we can delete them wholesale.
+  React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
+    variableName: UNSAFE_topNavVar,
+    value: height
+  })
+  // ------ END UNSAFE STYLES ------
+  , children)));
+}
+
+/**
+ * The top nav layout area. It will display at the top of the screen, below the banner if one is present.
+ */
+export var TopNav = componentWithFG('platform_dst_nav4_custom_theming_fhs_1', TopNavNew, TopNavOld);

package/dist/esm/ui/top-nav-items/themed/has-default-background-color-context.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+/**
+ * Context to let components know if the top nav background color is the default background color,
+ * even while a custom theme is being applied.
+ */
+export var HasDefaultBackgroundColorContext = /*#__PURE__*/createContext(true);

package/dist/esm/ui/top-nav-items/themed/use-custom-theme.js

@@ -1,5 +1,44 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { useMemo } from 'react';
+import { useColorMode } from '@atlaskit/app-provider';
+import { getTokenValue } from '@atlaskit/tokens';
+import { parseHex } from './color-utils/formats/hex';
 import { getCustomThemeStyles } from './get-custom-theme-styles';
+function toRGBString(_ref) {
+  var r = _ref.r,
+    g = _ref.g,
+    b = _ref.b;
+  return "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")");
+}
+
+// TODO: Fill in the hook {description}.
+/**
+ * {description}.
+ */
+export function useCustomThemeNew(theme) {
+  var value = useCustomTheme(theme);
+
+  /**
+   * We use the color mode to determine the default background color for the top nav.
+   * We need to use the hook because the user could change their color mode preference.
+   */
+  var colorMode = useColorMode();
+  var hasDefaultBackground = useMemo(function () {
+    if (!value.isEnabled) {
+      return true;
+    }
+    var defaultBackground = parseHex(getTokenValue('elevation.surface', colorMode === 'light' ? '#FFFFFF' : '#1F1F21'));
+    return defaultBackground ? value.style.backgroundColor === toRGBString(defaultBackground) : true;
+  }, [value, colorMode]);
+  if (value.isEnabled) {
+    return _objectSpread(_objectSpread({}, value), {}, {
+      hasDefaultBackground: hasDefaultBackground
+    });
+  }
+  return value;
+}
 /**
  * Processes the provided theme and returns theme styles if possible.
  */

package/dist/types/ui/page-layout/top-nav/top-nav.d.ts

@@ -1,10 +1,7 @@
 import type { StrictXCSSProp } from '@atlaskit/css';
 import { type CustomTheme } from '../../top-nav-items/themed/get-custom-theme-styles';
 import type { CommonSlotProps } from '../types';
-/**
- * The top nav layout area. It will display at the top of the screen, below the banner if one is present.
- */
-export declare function TopNav({ children, xcss, height: heightProp, skipLinkLabel, testId, id: providedId, UNSAFE_theme, }: CommonSlotProps & {
+type TopNavProps = CommonSlotProps & {
     /**
      * The content of the layout area.
      * Should include `TopNavStart`, `TopNavMiddle`, and `TopNavEnd`.
@@ -25,4 +22,9 @@ export declare function TopNav({ children, xcss, height: heightProp, skipLinkLab
      * Feature is incomplete and API is subject to change at any time
      */
     UNSAFE_theme?: CustomTheme;
-}): JSX.Element;
+};
+/**
+ * The top nav layout area. It will display at the top of the screen, below the banner if one is present.
+ */
+export declare const TopNav: (props: TopNavProps) => React.ReactNode;
+export {};

package/dist/types/ui/top-nav-items/themed/has-default-background-color-context.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Context to let components know if the top nav background color is the default background color,
+ * even while a custom theme is being applied.
+ */
+export declare const HasDefaultBackgroundColorContext: import('react').Context<boolean>;

package/dist/types/ui/top-nav-items/themed/use-custom-theme.d.ts

@@ -1,4 +1,15 @@
 import { type CustomTheme } from './get-custom-theme-styles';
+type ResultNew = {
+    isEnabled: false;
+} | {
+    isEnabled: true;
+    style: React.CSSProperties;
+    hasDefaultBackground: boolean;
+};
+/**
+ * {description}.
+ */
+export declare function useCustomThemeNew(theme: CustomTheme | undefined): ResultNew;
 type Result = {
     isEnabled: false;
 } | {

package/dist/types-ts4.5/ui/page-layout/top-nav/top-nav.d.ts

@@ -1,10 +1,7 @@
 import type { StrictXCSSProp } from '@atlaskit/css';
 import { type CustomTheme } from '../../top-nav-items/themed/get-custom-theme-styles';
 import type { CommonSlotProps } from '../types';
-/**
- * The top nav layout area. It will display at the top of the screen, below the banner if one is present.
- */
-export declare function TopNav({ children, xcss, height: heightProp, skipLinkLabel, testId, id: providedId, UNSAFE_theme, }: CommonSlotProps & {
+type TopNavProps = CommonSlotProps & {
     /**
      * The content of the layout area.
      * Should include `TopNavStart`, `TopNavMiddle`, and `TopNavEnd`.
@@ -25,4 +22,9 @@ export declare function TopNav({ children, xcss, height: heightProp, skipLinkLab
      * Feature is incomplete and API is subject to change at any time
      */
     UNSAFE_theme?: CustomTheme;
-}): JSX.Element;
+};
+/**
+ * The top nav layout area. It will display at the top of the screen, below the banner if one is present.
+ */
+export declare const TopNav: (props: TopNavProps) => React.ReactNode;
+export {};

package/dist/types-ts4.5/ui/top-nav-items/themed/has-default-background-color-context.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Context to let components know if the top nav background color is the default background color,
+ * even while a custom theme is being applied.
+ */
+export declare const HasDefaultBackgroundColorContext: import('react').Context<boolean>;

package/dist/types-ts4.5/ui/top-nav-items/themed/use-custom-theme.d.ts

@@ -1,4 +1,15 @@
 import { type CustomTheme } from './get-custom-theme-styles';
+type ResultNew = {
+    isEnabled: false;
+} | {
+    isEnabled: true;
+    style: React.CSSProperties;
+    hasDefaultBackground: boolean;
+};
+/**
+ * {description}.
+ */
+export declare function useCustomThemeNew(theme: CustomTheme | undefined): ResultNew;
 type Result = {
     isEnabled: false;
 } | {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "7.1.7",
+	"version": "7.2.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -71,6 +71,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.2.0",
+		"@atlaskit/app-provider": "^4.2.0",
 		"@atlaskit/avatar": "^25.11.0",
 		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/css": "^0.19.0",
@@ -79,10 +80,11 @@
 		"@atlaskit/layering": "^3.6.0",
 		"@atlaskit/logo": "^20.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
+		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/popup": "^4.16.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/primitives": "^18.1.0",
-		"@atlaskit/side-nav-items": "^1.12.0",
+		"@atlaskit/side-nav-items": "^1.13.0",
 		"@atlaskit/tokens": "^12.0.0",
 		"@atlaskit/tooltip": "^21.1.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
@@ -100,7 +102,6 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/app-provider": "^4.2.0",
 		"@atlaskit/badge": "^18.4.0",
 		"@atlaskit/banner": "^14.0.0",
 		"@atlaskit/breadcrumbs": "^16.0.0",
@@ -108,7 +109,7 @@
 		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/heading": "^5.4.0",
 		"@atlaskit/link": "^3.4.0",
-		"@atlaskit/lozenge": "^13.5.0",
+		"@atlaskit/lozenge": "^13.6.0",
 		"@atlaskit/menu": "^8.4.0",
 		"@atlaskit/modal-dialog": "^14.15.0",
 		"@atlaskit/onboarding": "^14.5.0",
@@ -182,6 +183,9 @@
 		},
 		"navx-4418-fix-effect-state-updates-in-gsn": {
 			"type": "boolean"
+		},
+		"platform_dst_nav4_custom_theming_fhs_1": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/navigation-system"