@pingux/astro 2.170.0-alpha.0 → 2.170.1-alpha.0

package/lib/cjs/components/NavBar/stories/NavBarNextGenComponent.js

@@ -57,11 +57,18 @@ var NavBarNextGenComponent = exports.NavBarNextGenComponent = function NavBarNex
     'data-id': 'Authentication-data-id',
     heading: 'Authentication',
     icon: icons.authenticationIcon,
+    title: 'Policies',
     key: 'Authentication',
     children: [(0, _react2.jsx)(_.NavBarItemButton, {
       key: "Authentication-Policies",
       id: "Authentication-Policies"
-    }, "Authentication Policies"), (0, _react2.jsx)(_.NavBarItemButton, {
+    }, "Authentication Policies"), {
+      hasSeparator: false,
+      subTitle: 'Applications'
+    }, (0, _react2.jsx)(_.Separator, {
+      key: "separator",
+      variant: "separator.navBarSubtitleSeparator"
+    }), (0, _react2.jsx)(_.NavBarItemButton, {
       key: "Password-Policies",
       id: "Password-Policies"
     }, "Password Policies")]

package/lib/cjs/components/NavBarSection/NavBarItem.js

@@ -67,7 +67,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     classNames = _useStatusClasses.classNames;
   var color = isSelected ? 'white' : 'neutral.95';
   var _useGetTheme = (0, _hooks.useGetTheme)(),
-    isOnyx = _useGetTheme.themeState.isOnyx;
+    navBarIconSize = _useGetTheme.navBarIconSize;
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     id: key,
     variant: state.navStyles.navBarItem,
@@ -89,7 +89,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     title: {
       name: text
     },
-    size: isOnyx ? 'icon-200' : 'sm',
+    size: navBarIconSize || 18,
     sx: {
       mr: 'sm',
       color: color,

package/lib/cjs/components/NavBarSection/NavBarItemHeader.js

@@ -38,8 +38,8 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
     heading = item.heading;
   var navBarState = (0, _NavBarContext.useNavBarContext)();
   var _useGetTheme = (0, _useGetTheme3["default"])(),
-    isOnyx = _useGetTheme.themeState.isOnyx,
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    navBarIconSize = _useGetTheme.navBarIconSize;
   var MenuDown = icons.MenuDown,
     MenuUp = icons.MenuUp;
   var selectedKey = navBarState.selectedKey,
@@ -74,7 +74,7 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
     "data-testid": heading
   }, icon && (0, _react2.jsx)(_index.Icon, {
     icon: icon,
-    size: isOnyx ? 'icon-200' : 18,
+    size: navBarIconSize || 18,
     sx: {
       mr: 'sm',
       color: getIconColor(),

package/lib/cjs/components/NavBarSection/NavBarItemHeader.test.js

@@ -81,6 +81,6 @@ describe('NavItemHeader', function () {
     getComponent();
     var icon = _testWrapper.screen.getByTestId('Dashboard').querySelector('svg');
     expect(icon).toBeInTheDocument();
-    expect(icon).toHaveAttribute('width', 'icon-200');
+    expect(icon).toHaveAttribute('width', '18');
   });
 });

package/lib/cjs/components/NavSideBar/NavSideBarItem.js

@@ -9,8 +9,8 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _interactions = require("@react-aria/interactions");
@@ -23,8 +23,13 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var
 var NavSideBarItem = function NavSideBarItem(props) {
   var children = props.children,
     linkProps = props.linkProps;
+  console.log(props);
   if (linkProps && linkProps !== null && linkProps !== void 0 && linkProps.href) {
-    return (0, _react2.jsx)(_index.Link, linkProps, (0, _react2.jsx)(ChildWrapper, props, children));
+    return (0, _react2.jsx)(_index.Link, (0, _extends2["default"])({}, linkProps, {
+      sx: {
+        textDecoration: 'none !important'
+      }
+    }), (0, _react2.jsx)(ChildWrapper, props, children));
   }
   return (0, _react2.jsx)(_index.Button, {
     variant: "link",
@@ -68,6 +73,8 @@ var ChildWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }),
     pressProps = _usePress.pressProps,
     isPressed = _usePress.isPressed;
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    navBarIconSize = _useGetTheme.navBarIconSize;
   var mergedProps = (0, _reactAria.mergeProps)(pressProps, hoverProps, focusWithinProps, focusProps, others);
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
       isPressed: isPressed,
@@ -76,6 +83,7 @@ var ChildWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       isFocused: isFocusVisible
     }),
     classNames = _useStatusClasses.classNames;
+  console.log(state.navStyles.navBarItem);
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     id: key,
     variant: state.navStyles.navBarItem,
@@ -93,13 +101,13 @@ var ChildWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     title: {
       name: children
     },
-    size: state.navStyles.navBarItemHeaderIconSize,
+    size: navBarIconSize,
     variant: isSelected ? state.navStyles.navBarItemIconSelected : state.navStyles.navBarItemIcon
   }, iconProps)), (0, _react2.jsx)(_index.Text, {
     variant: state.navStyles.navBarItemText
   }, children), customIcon && (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
     icon: customIcon,
-    size: state.navStyles.navBarItemHeaderIconSize,
+    size: navBarIconSize,
     variant: isSelected ? state.navStyles.navBarItemCustomIconSelected : state.navStyles.navBarItemCustomIcon
   }, customIconProps, {
     title: {

package/lib/cjs/components/NavSideBar/NavSideBarSectionHeader.js

@@ -33,7 +33,8 @@ var NavSideBarSectionHeader = function NavSideBarSectionHeader(props) {
     onExpandedChange = props.onExpandedChange,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useGetTheme = (0, _useGetTheme2["default"])(),
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    navBarIconSize = _useGetTheme.navBarIconSize;
   var MenuUp = icons.MenuUp,
     MenuDown = icons.MenuDown;
   var navBarState = (0, _NavBarContext.useNavBarContext)();
@@ -74,7 +75,7 @@ var NavSideBarSectionHeader = function NavSideBarSectionHeader(props) {
     isRow: true
   }, icon && (0, _react2.jsx)(_index.Icon, {
     icon: icon,
-    size: navStyles.navBarItemHeaderIconSize,
+    size: navBarIconSize,
     variant: variant,
     "aria-hidden": "true"
   }), (0, _react2.jsx)(_index.Text, {
@@ -87,7 +88,7 @@ var NavSideBarSectionHeader = function NavSideBarSectionHeader(props) {
     }
   }, (0, _react2.jsx)(_index.Icon, {
     icon: isExpanded ? MenuUp : MenuDown,
-    size: navStyles.navBarItemHeaderIconSize,
+    size: navBarIconSize,
     variant: variant,
     mr: "0",
     title: {

package/lib/cjs/hooks/useGetTheme/useGetTheme.d.ts

@@ -7,6 +7,7 @@ export declare const baseState: {
 declare const useGetTheme: () => {
     name: string;
     accordionItemDefaultLabelTag: string;
+    navBarIconSize: import("../..").IconSize;
     activeColor: string;
     backgroundBaseColor: string;
     icons: {
@@ -157,6 +158,7 @@ declare const useGetTheme: () => {
     pageHeaderAddIconSize: string;
     defaultLoaderSize: number;
     activeColor: string;
+    navBarIconSize: import("../..").IconSize;
     styles: {
         navButtonEstHeight: number;
     };

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/customProperties/index.d.ts

@@ -59,6 +59,7 @@ export declare const nextGenDarkThemeValues: {
     pageHeaderAddIconSize: string;
     defaultLoaderSize: number;
     activeColor: string;
+    navBarIconSize: import("../../../..").IconSize;
     styles: {
         navButtonEstHeight: number;
     };

package/lib/cjs/styles/themeOverrides/onyxSideNav.d.ts

@@ -16,6 +16,7 @@ declare const _default: {
                 p: string;
                 backgroundColor: string;
                 boxShadow: string;
+                zIndex: number;
             };
             logoParent: {
                 p: string;
@@ -127,6 +128,7 @@ declare const _default: {
                 textTransform: string;
                 fontSize: string;
                 letterSpacing: string;
+                lineHeight: string;
             };
             headerText: {
                 color: string;
@@ -156,6 +158,7 @@ declare const _default: {
                 py: string;
                 color: string;
                 borderRadius: string;
+                textDecoration: string;
                 mb: string;
                 '&.is-hovered': {
                     backgroundColor: string;
@@ -163,6 +166,9 @@ declare const _default: {
                 '> div > svg': {
                     fill: string;
                 };
+                '> svg': {
+                    fill: string;
+                };
                 '&.is-pressed': {
                     backgroundColor: string;
                 };
@@ -170,6 +176,9 @@ declare const _default: {
                     '> div > svg': {
                         fill: string;
                     };
+                    '> svg': {
+                        fill: string;
+                    };
                     backgroundColor: string;
                     boxShadow: string;
                 };
@@ -217,6 +226,11 @@ declare const _default: {
                 maxWidth: string;
                 backgroundColor: string;
             };
+            navBarSubtitleSeparator: {
+                backgroundColor: string;
+                mx: string;
+                my: string;
+            };
         };
     };
     icons: {
@@ -269,5 +283,6 @@ declare const _default: {
         md: number;
         xsm: number;
     };
+    navBarIconSize: string;
 };
 export default _default;

package/lib/cjs/styles/themeOverrides/onyxSideNav.js

@@ -35,7 +35,8 @@ var navBar = {
     width: '230px',
     p: '8px',
     backgroundColor: 'white',
-    boxShadow: '0 .5rem 1rem rgba(0, 0, 0, .15)'
+    boxShadow: '0 2px 11px rgba(0, 0, 0, .13)',
+    zIndex: 2
   },
   logoParent: {
     p: '8px'
@@ -51,7 +52,7 @@ var navBar = {
       backgroundColor: '#f6f8fa'
     },
     '&.is-pressed': {
-      backgroundColor: '#e5e9f8'
+      backgroundColor: '#EDEFF1'
     },
     '&.is-focused': _objectSpread({}, navBarFocus),
     ':focus': {
@@ -65,7 +66,7 @@ var navBar = {
         backgroundColor: '#f6f8fa'
       },
       '&.is-pressed': {
-        backgroundColor: '#e5e9f8'
+        backgroundColor: '#EDEFF1'
       },
       '&.is-focused': _objectSpread({}, navBarFocus),
       backgroundColor: '#f6f8fa'
@@ -99,7 +100,7 @@ var navBar = {
         border: 'none'
       },
       '&.is-pressed': {
-        backgroundColor: '#e5e9f8',
+        backgroundColor: '#EDEFF1',
         color: '#455469'
       },
       '&.is-selected': {
@@ -116,7 +117,7 @@ var navBar = {
       border: 'none'
     },
     '&.is-pressed': {
-      backgroundColor: '#e5e9f8',
+      backgroundColor: '#EDEFF1',
       color: '#455469'
     },
     '&.is-selected': {
@@ -130,7 +131,8 @@ var navBar = {
     marginLeft: '50px !important',
     textTransform: 'uppercase',
     fontSize: '12px',
-    letterSpacing: '1px'
+    letterSpacing: '1px',
+    lineHeight: '140%'
   },
   headerText: {
     color: '#455469',
@@ -160,6 +162,7 @@ var navBar = {
     py: '.75rem',
     color: '#455469',
     borderRadius: '4px',
+    textDecoration: 'none',
     mb: '2px',
     '&.is-hovered': {
       backgroundColor: '#f6f8fa'
@@ -167,12 +170,18 @@ var navBar = {
     '> div > svg': {
       fill: '#455469'
     },
+    '> svg': {
+      fill: '#455469'
+    },
     '&.is-pressed': {
-      backgroundColor: '#e5e9f8'
+      backgroundColor: '#EDEFF1'
     },
     '&.is-selected': _objectSpread(_objectSpread({}, navBarSelected), {}, {
       '> div > svg': {
         fill: 'accent.40'
+      },
+      '> svg': {
+        fill: 'accent.40'
       }
     }),
     '&.is-focused': {
@@ -216,6 +225,11 @@ var separator = {
     mx: '0px',
     maxWidth: '236px',
     backgroundColor: '#e7eef4'
+  },
+  navBarSubtitleSeparator: {
+    backgroundColor: '#e7eef4',
+    mx: '0px',
+    my: '10px'
   }
 };
 var _default = exports["default"] = {
@@ -235,5 +249,6 @@ var _default = exports["default"] = {
     sm: 20,
     md: 25,
     'xsm': 16
-  }
+  },
+  navBarIconSize: '20px'
 };

package/lib/cjs/styles/themes/astro/customProperties/index.d.ts

@@ -1,6 +1,7 @@
 import { IconSize, LoaderSize } from '../../../../types';
 export declare const astroThemeValues: {
     accordionItemDefaultLabelTag: string;
+    navBarIconSize: IconSize;
     activeColor: string;
     backgroundBaseColor: string;
     icons: {

package/lib/cjs/styles/themes/astro/customProperties/index.js

@@ -32,8 +32,10 @@ var defaultIconColor = 'currentColor';
 var defaultIconSize = 'sm';
 var linkSelectFieldWidth = '10em';
 var calendarIconSize = 25;
+var navBarIconSize = 18;
 var astroThemeValues = exports.astroThemeValues = {
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
+  navBarIconSize: navBarIconSize,
   activeColor: activeColor,
   backgroundBaseColor: backgroundBaseColor,
   icons: _icons["default"],

package/lib/cjs/styles/themes/next-gen/customProperties/index.d.ts

@@ -10,6 +10,7 @@ export declare const nextGenThemeValues: {
     pageHeaderAddIconSize: string;
     defaultLoaderSize: number;
     activeColor: string;
+    navBarIconSize: IconSize;
     backgroundBaseColor: string;
     styles: {
         navButtonEstHeight: number;

package/lib/cjs/styles/themes/next-gen/customProperties/index.js

@@ -39,8 +39,10 @@ var badgeStyles = {
 };
 var linkSelectFieldWidth = '12em';
 var calendarIconSize = 'sm';
+var navBarIconSize = '20px';
 var nextGenThemeValues = exports.nextGenThemeValues = _objectSpread({
   activeColor: activeColor,
+  navBarIconSize: navBarIconSize,
   backgroundBaseColor: backgroundBaseColor,
   styles: _styles["default"],
   icons: _icons["default"],

package/lib/components/NavBar/stories/NavBarNextGenComponent.js

@@ -49,11 +49,18 @@ export var NavBarNextGenComponent = function NavBarNextGenComponent() {
     'data-id': 'Authentication-data-id',
     heading: 'Authentication',
     icon: icons.authenticationIcon,
+    title: 'Policies',
     key: 'Authentication',
     children: [___EmotionJSX(NavBarItemButton, {
       key: "Authentication-Policies",
       id: "Authentication-Policies"
-    }, "Authentication Policies"), ___EmotionJSX(NavBarItemButton, {
+    }, "Authentication Policies"), {
+      hasSeparator: false,
+      subTitle: 'Applications'
+    }, ___EmotionJSX(Separator, {
+      key: "separator",
+      variant: "separator.navBarSubtitleSeparator"
+    }), ___EmotionJSX(NavBarItemButton, {
       key: "Password-Policies",
       id: "Password-Policies"
     }, "Password Policies")]

package/lib/components/NavBarSection/NavBarItem.js

@@ -55,7 +55,7 @@ var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
     classNames = _useStatusClasses.classNames;
   var color = isSelected ? 'white' : 'neutral.95';
   var _useGetTheme = useGetTheme(),
-    isOnyx = _useGetTheme.themeState.isOnyx;
+    navBarIconSize = _useGetTheme.navBarIconSize;
   return ___EmotionJSX(Box, _extends({
     id: key,
     variant: state.navStyles.navBarItem,
@@ -77,7 +77,7 @@ var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
     title: {
       name: text
     },
-    size: isOnyx ? 'icon-200' : 'sm',
+    size: navBarIconSize || 18,
     sx: {
       mr: 'sm',
       color: color,

package/lib/components/NavBarSection/NavBarItemHeader.js

@@ -26,8 +26,8 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
     heading = item.heading;
   var navBarState = useNavBarContext();
   var _useGetTheme = useGetTheme(),
-    isOnyx = _useGetTheme.themeState.isOnyx,
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    navBarIconSize = _useGetTheme.navBarIconSize;
   var MenuDown = icons.MenuDown,
     MenuUp = icons.MenuUp;
   var selectedKey = navBarState.selectedKey,
@@ -62,7 +62,7 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
     "data-testid": heading
   }, icon && ___EmotionJSX(Icon, {
     icon: icon,
-    size: isOnyx ? 'icon-200' : 18,
+    size: navBarIconSize || 18,
     sx: {
       mr: 'sm',
       color: getIconColor(),

package/lib/components/NavBarSection/NavBarItemHeader.test.js

@@ -78,6 +78,6 @@ describe('NavItemHeader', function () {
     getComponent();
     var icon = screen.getByTestId('Dashboard').querySelector('svg');
     expect(icon).toBeInTheDocument();
-    expect(icon).toHaveAttribute('width', 'icon-200');
+    expect(icon).toHaveAttribute('width', '18');
   });
 });

package/lib/components/NavSideBar/NavSideBarItem.js

@@ -1,18 +1,23 @@
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 var _excluded = ["children", "icon", "className", "id", "onPress", "customIcon", "iconProps", "customIconProps"];
 import React, { forwardRef } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 import { useHover, usePress } from '@react-aria/interactions';
 import { useNavBarContext } from '../../context/NavBarContext';
-import { useLocalOrForwardRef, useNavBarPress, useStatusClasses } from '../../hooks';
+import { useGetTheme, useLocalOrForwardRef, useNavBarPress, useStatusClasses } from '../../hooks';
 import { Box, Button, Icon, Link, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var NavSideBarItem = function NavSideBarItem(props) {
   var children = props.children,
     linkProps = props.linkProps;
+  console.log(props);
   if (linkProps && linkProps !== null && linkProps !== void 0 && linkProps.href) {
-    return ___EmotionJSX(Link, linkProps, ___EmotionJSX(ChildWrapper, props, children));
+    return ___EmotionJSX(Link, _extends({}, linkProps, {
+      sx: {
+        textDecoration: 'none !important'
+      }
+    }), ___EmotionJSX(ChildWrapper, props, children));
   }
   return ___EmotionJSX(Button, {
     variant: "link",
@@ -56,6 +61,8 @@ var ChildWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
     }),
     pressProps = _usePress.pressProps,
     isPressed = _usePress.isPressed;
+  var _useGetTheme = useGetTheme(),
+    navBarIconSize = _useGetTheme.navBarIconSize;
   var mergedProps = mergeProps(pressProps, hoverProps, focusWithinProps, focusProps, others);
   var _useStatusClasses = useStatusClasses(className, {
       isPressed: isPressed,
@@ -64,6 +71,7 @@ var ChildWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
       isFocused: isFocusVisible
     }),
     classNames = _useStatusClasses.classNames;
+  console.log(state.navStyles.navBarItem);
   return ___EmotionJSX(Box, _extends({
     id: key,
     variant: state.navStyles.navBarItem,
@@ -81,13 +89,13 @@ var ChildWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
     title: {
       name: children
     },
-    size: state.navStyles.navBarItemHeaderIconSize,
+    size: navBarIconSize,
     variant: isSelected ? state.navStyles.navBarItemIconSelected : state.navStyles.navBarItemIcon
   }, iconProps)), ___EmotionJSX(Text, {
     variant: state.navStyles.navBarItemText
   }, children), customIcon && ___EmotionJSX(Icon, _extends({
     icon: customIcon,
-    size: state.navStyles.navBarItemHeaderIconSize,
+    size: navBarIconSize,
     variant: isSelected ? state.navStyles.navBarItemCustomIconSelected : state.navStyles.navBarItemCustomIcon
   }, customIconProps, {
     title: {

package/lib/components/NavSideBar/NavSideBarSectionHeader.js

@@ -21,7 +21,8 @@ var NavSideBarSectionHeader = function NavSideBarSectionHeader(props) {
     onExpandedChange = props.onExpandedChange,
     others = _objectWithoutProperties(props, _excluded);
   var _useGetTheme = useGetTheme(),
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    navBarIconSize = _useGetTheme.navBarIconSize;
   var MenuUp = icons.MenuUp,
     MenuDown = icons.MenuDown;
   var navBarState = useNavBarContext();
@@ -62,7 +63,7 @@ var NavSideBarSectionHeader = function NavSideBarSectionHeader(props) {
     isRow: true
   }, icon && ___EmotionJSX(Icon, {
     icon: icon,
-    size: navStyles.navBarItemHeaderIconSize,
+    size: navBarIconSize,
     variant: variant,
     "aria-hidden": "true"
   }), ___EmotionJSX(Text, {
@@ -75,7 +76,7 @@ var NavSideBarSectionHeader = function NavSideBarSectionHeader(props) {
     }
   }, ___EmotionJSX(Icon, {
     icon: isExpanded ? MenuUp : MenuDown,
-    size: navStyles.navBarItemHeaderIconSize,
+    size: navBarIconSize,
     variant: variant,
     mr: "0",
     title: {

package/lib/styles/themeOverrides/onyxSideNav.js

@@ -28,7 +28,8 @@ var navBar = {
     width: '230px',
     p: '8px',
     backgroundColor: 'white',
-    boxShadow: '0 .5rem 1rem rgba(0, 0, 0, .15)'
+    boxShadow: '0 2px 11px rgba(0, 0, 0, .13)',
+    zIndex: 2
   },
   logoParent: {
     p: '8px'
@@ -44,7 +45,7 @@ var navBar = {
       backgroundColor: '#f6f8fa'
     },
     '&.is-pressed': {
-      backgroundColor: '#e5e9f8'
+      backgroundColor: '#EDEFF1'
     },
     '&.is-focused': _objectSpread({}, navBarFocus),
     ':focus': {
@@ -58,7 +59,7 @@ var navBar = {
         backgroundColor: '#f6f8fa'
       },
       '&.is-pressed': {
-        backgroundColor: '#e5e9f8'
+        backgroundColor: '#EDEFF1'
       },
       '&.is-focused': _objectSpread({}, navBarFocus),
       backgroundColor: '#f6f8fa'
@@ -92,7 +93,7 @@ var navBar = {
         border: 'none'
       },
       '&.is-pressed': {
-        backgroundColor: '#e5e9f8',
+        backgroundColor: '#EDEFF1',
         color: '#455469'
       },
       '&.is-selected': {
@@ -109,7 +110,7 @@ var navBar = {
       border: 'none'
     },
     '&.is-pressed': {
-      backgroundColor: '#e5e9f8',
+      backgroundColor: '#EDEFF1',
       color: '#455469'
     },
     '&.is-selected': {
@@ -123,7 +124,8 @@ var navBar = {
     marginLeft: '50px !important',
     textTransform: 'uppercase',
     fontSize: '12px',
-    letterSpacing: '1px'
+    letterSpacing: '1px',
+    lineHeight: '140%'
   },
   headerText: {
     color: '#455469',
@@ -153,6 +155,7 @@ var navBar = {
     py: '.75rem',
     color: '#455469',
     borderRadius: '4px',
+    textDecoration: 'none',
     mb: '2px',
     '&.is-hovered': {
       backgroundColor: '#f6f8fa'
@@ -160,12 +163,18 @@ var navBar = {
     '> div > svg': {
       fill: '#455469'
     },
+    '> svg': {
+      fill: '#455469'
+    },
     '&.is-pressed': {
-      backgroundColor: '#e5e9f8'
+      backgroundColor: '#EDEFF1'
     },
     '&.is-selected': _objectSpread(_objectSpread({}, navBarSelected), {}, {
       '> div > svg': {
         fill: 'accent.40'
+      },
+      '> svg': {
+        fill: 'accent.40'
       }
     }),
     '&.is-focused': {
@@ -209,6 +218,11 @@ var separator = {
     mx: '0px',
     maxWidth: '236px',
     backgroundColor: '#e7eef4'
+  },
+  navBarSubtitleSeparator: {
+    backgroundColor: '#e7eef4',
+    mx: '0px',
+    my: '10px'
   }
 };
 export default {
@@ -228,5 +242,6 @@ export default {
     sm: 20,
     md: 25,
     'xsm': 16
-  }
+  },
+  navBarIconSize: '20px'
 };

package/lib/styles/themes/astro/customProperties/index.js

@@ -20,8 +20,10 @@ var defaultIconColor = 'currentColor';
 var defaultIconSize = 'sm';
 var linkSelectFieldWidth = '10em';
 var calendarIconSize = 25;
+var navBarIconSize = 18;
 export var astroThemeValues = {
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
+  navBarIconSize: navBarIconSize,
   activeColor: activeColor,
   backgroundBaseColor: backgroundBaseColor,
   icons: icons,

package/lib/styles/themes/next-gen/customProperties/index.js

@@ -29,8 +29,10 @@ var badgeStyles = {
 };
 var linkSelectFieldWidth = '12em';
 var calendarIconSize = 'sm';
+var navBarIconSize = '20px';
 export var nextGenThemeValues = _objectSpread({
   activeColor: activeColor,
+  navBarIconSize: navBarIconSize,
   backgroundBaseColor: backgroundBaseColor,
   styles: styles,
   icons: icons,