@pingux/astro 2.151.1-alpha.1 → 2.151.1-alpha.2

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

@@ -429,7 +429,9 @@ var thirdData = [{
 }];
 var Default = function Default() {
   var _useGetTheme = (0, _hooks.useGetTheme)(),
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    themeState = _useGetTheme.themeState;
+  var isOnyx = themeState.isOnyx;
   return (0, _react2.jsx)(_.NavBar, null, (0, _react2.jsx)(_.Box, {
     padding: "md",
     key: "top-logo-parent"
@@ -437,10 +439,10 @@ var Default = function Default() {
     "aria-label": "home link",
     href: "https://pingidentity.com",
     target: "_blank"
-  }, icons.pingLogoHorizontalSmall)), (0, _react2.jsx)(_.Separator, {
+  }, icons.pingLogoHorizontalSmall)), !isOnyx ? (0, _react2.jsx)(_.Separator, {
     m: 0,
     backgroundColor: "neutral.60"
-  }), (0, _react2.jsx)(_.Box, {
+  }) : (0, _react2.jsx)(_.Box, null), (0, _react2.jsx)(_.Box, {
     variant: "navBar.sectionContainer",
     paddingBottom: "xl",
     key: "first-section-container"
@@ -650,6 +652,9 @@ var Controlled = function Controlled() {
     setSelectedKey = _useState2[1];
   var _useGetTheme3 = (0, _hooks.useGetTheme)(),
     icons = _useGetTheme3.icons;
+  var _useGetTheme4 = (0, _hooks.useGetTheme)(),
+    themeState = _useGetTheme4.themeState;
+  var isOnyx = themeState.isOnyx;
   var customData = [{
     icon: _EarthIcon["default"],
     key: 'Environment',
@@ -675,11 +680,11 @@ var Controlled = function Controlled() {
     "aria-label": "home link",
     href: "https://pingidentity.com",
     target: "_blank"
-  }, icons.pingLogoHorizontalSmall)), (0, _react2.jsx)(_.Separator, {
+  }, icons.pingLogoHorizontalSmall)), !isOnyx ? (0, _react2.jsx)(_.Separator, {
     m: "0",
     backgroundColor: "neutral.60",
     key: "top-separator"
-  }), (0, _react2.jsx)(_.Box, {
+  }) : (0, _react2.jsx)(_.Box, null), (0, _react2.jsx)(_.Box, {
     variant: "navBar.sectionContainer",
     paddingBottom: "xl",
     key: "first-section-container"
@@ -706,8 +711,10 @@ var Controlled = function Controlled() {
 };
 exports.Controlled = Controlled;
 var AutoCollapse = function AutoCollapse() {
-  var _useGetTheme4 = (0, _hooks.useGetTheme)(),
-    icons = _useGetTheme4.icons;
+  var _useGetTheme5 = (0, _hooks.useGetTheme)(),
+    icons = _useGetTheme5.icons,
+    themeState = _useGetTheme5.themeState;
+  var isOnyx = themeState.isOnyx;
   return (0, _react2.jsx)(_.NavBar, {
     isAutoСollapsible: true
   }, (0, _react2.jsx)(_.Box, {
@@ -717,10 +724,10 @@ var AutoCollapse = function AutoCollapse() {
     "aria-label": "home link",
     href: "https://pingidentity.com",
     target: "_blank"
-  }, icons.pingLogoHorizontalSmall)), (0, _react2.jsx)(_.Separator, {
+  }, icons.pingLogoHorizontalSmall)), !isOnyx ? (0, _react2.jsx)(_.Separator, {
     m: 0,
     backgroundColor: "neutral.60"
-  }), (0, _react2.jsx)(_.Box, {
+  }) : (0, _react2.jsx)(_.Box, null), (0, _react2.jsx)(_.Box, {
     variant: "navBar.sectionContainer",
     paddingBottom: "xl",
     key: "first-section-container"

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

@@ -4531,6 +4531,8 @@ declare const _default: {
                 paddingLeft: string;
                 color: string;
                 borderRadius: string;
+                fontWeight: number;
+                fontSize: string;
                 '&.is-focused': {
                     outline: string;
                     outlineColor: string;
@@ -4554,6 +4556,8 @@ declare const _default: {
             };
             headerText: {
                 color: string;
+                fontWeight: number;
+                fontSize: string;
                 ml: string;
                 '.is-selected &': {
                     color: string;

package/lib/cjs/styles/themes/next-gen/variants/navbar.d.ts

@@ -37,6 +37,8 @@ export declare const navBar: {
         paddingLeft: string;
         color: string;
         borderRadius: string;
+        fontWeight: number;
+        fontSize: string;
         '&.is-focused': {
             outline: string;
             outlineColor: string;
@@ -60,6 +62,8 @@ export declare const navBar: {
     };
     headerText: {
         color: string;
+        fontWeight: number;
+        fontSize: string;
         ml: string;
         '.is-selected &': {
             color: string;

package/lib/cjs/styles/themes/next-gen/variants/navbar.js

@@ -17,7 +17,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var navBarSelected = {
-  backgroundColor: 'lightblue',
+  backgroundColor: 'blue-100',
   boxShadow: 'none'
 };
 exports.navBarSelected = navBarSelected;
@@ -53,6 +53,8 @@ var navBar = {
     paddingLeft: '53px',
     color: 'gray-700',
     borderRadius: '4px',
+    fontWeight: 0,
+    fontSize: 'sm',
     '&.is-focused': _objectSpread({}, navBarFocus),
     '&.is-hovered': {
       backgroundColor: 'light'
@@ -62,7 +64,7 @@ var navBar = {
       color: 'gray-700'
     },
     '&.is-selected': {
-      bg: 'lightblue',
+      bg: 'blue-100',
       boxShadow: 'none',
       color: 'darkblue'
     }
@@ -71,7 +73,9 @@ var navBar = {
     color: 'gray-700'
   },
   headerText: {
-    color: 'text.primary',
+    color: 'gray-700',
+    fontWeight: 0,
+    fontSize: 'sm',
     ml: 'sm',
     '.is-selected &': {
       color: 'darkblue'

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

@@ -1014,6 +1014,8 @@ declare const _default: {
             paddingLeft: string;
             color: string;
             borderRadius: string;
+            fontWeight: number;
+            fontSize: string;
             '&.is-focused': {
                 outline: string;
                 outlineColor: string;
@@ -1037,6 +1039,8 @@ declare const _default: {
         };
         headerText: {
             color: string;
+            fontWeight: number;
+            fontSize: string;
             ml: string;
             '.is-selected &': {
                 color: string;

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

@@ -415,7 +415,9 @@ var thirdData = [{
 }];
 export var Default = function Default() {
   var _useGetTheme = useGetTheme(),
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    themeState = _useGetTheme.themeState;
+  var isOnyx = themeState.isOnyx;
   return ___EmotionJSX(NavBar, null, ___EmotionJSX(Box, {
     padding: "md",
     key: "top-logo-parent"
@@ -423,10 +425,10 @@ export var Default = function Default() {
     "aria-label": "home link",
     href: "https://pingidentity.com",
     target: "_blank"
-  }, icons.pingLogoHorizontalSmall)), ___EmotionJSX(Separator, {
+  }, icons.pingLogoHorizontalSmall)), !isOnyx ? ___EmotionJSX(Separator, {
     m: 0,
     backgroundColor: "neutral.60"
-  }), ___EmotionJSX(Box, {
+  }) : ___EmotionJSX(Box, null), ___EmotionJSX(Box, {
     variant: "navBar.sectionContainer",
     paddingBottom: "xl",
     key: "first-section-container"
@@ -634,6 +636,9 @@ export var Controlled = function Controlled() {
     setSelectedKey = _useState2[1];
   var _useGetTheme3 = useGetTheme(),
     icons = _useGetTheme3.icons;
+  var _useGetTheme4 = useGetTheme(),
+    themeState = _useGetTheme4.themeState;
+  var isOnyx = themeState.isOnyx;
   var customData = [{
     icon: Earth,
     key: 'Environment',
@@ -659,11 +664,11 @@ export var Controlled = function Controlled() {
     "aria-label": "home link",
     href: "https://pingidentity.com",
     target: "_blank"
-  }, icons.pingLogoHorizontalSmall)), ___EmotionJSX(Separator, {
+  }, icons.pingLogoHorizontalSmall)), !isOnyx ? ___EmotionJSX(Separator, {
     m: "0",
     backgroundColor: "neutral.60",
     key: "top-separator"
-  }), ___EmotionJSX(Box, {
+  }) : ___EmotionJSX(Box, null), ___EmotionJSX(Box, {
     variant: "navBar.sectionContainer",
     paddingBottom: "xl",
     key: "first-section-container"
@@ -689,8 +694,10 @@ export var Controlled = function Controlled() {
   })));
 };
 export var AutoCollapse = function AutoCollapse() {
-  var _useGetTheme4 = useGetTheme(),
-    icons = _useGetTheme4.icons;
+  var _useGetTheme5 = useGetTheme(),
+    icons = _useGetTheme5.icons,
+    themeState = _useGetTheme5.themeState;
+  var isOnyx = themeState.isOnyx;
   return ___EmotionJSX(NavBar, {
     isAutoСollapsible: true
   }, ___EmotionJSX(Box, {
@@ -700,10 +707,10 @@ export var AutoCollapse = function AutoCollapse() {
     "aria-label": "home link",
     href: "https://pingidentity.com",
     target: "_blank"
-  }, icons.pingLogoHorizontalSmall)), ___EmotionJSX(Separator, {
+  }, icons.pingLogoHorizontalSmall)), !isOnyx ? ___EmotionJSX(Separator, {
     m: 0,
     backgroundColor: "neutral.60"
-  }), ___EmotionJSX(Box, {
+  }) : ___EmotionJSX(Box, null), ___EmotionJSX(Box, {
     variant: "navBar.sectionContainer",
     paddingBottom: "xl",
     key: "first-section-container"

package/lib/styles/themes/next-gen/variants/navbar.js

@@ -10,7 +10,7 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 export var navBarSelected = {
-  backgroundColor: 'lightblue',
+  backgroundColor: 'blue-100',
   boxShadow: 'none'
 };
 export var navBarFocus = {
@@ -44,6 +44,8 @@ export var navBar = {
     paddingLeft: '53px',
     color: 'gray-700',
     borderRadius: '4px',
+    fontWeight: 0,
+    fontSize: 'sm',
     '&.is-focused': _objectSpread({}, navBarFocus),
     '&.is-hovered': {
       backgroundColor: 'light'
@@ -53,7 +55,7 @@ export var navBar = {
       color: 'gray-700'
     },
     '&.is-selected': {
-      bg: 'lightblue',
+      bg: 'blue-100',
       boxShadow: 'none',
       color: 'darkblue'
     }
@@ -62,7 +64,9 @@ export var navBar = {
     color: 'gray-700'
   },
   headerText: {
-    color: 'text.primary',
+    color: 'gray-700',
+    fontWeight: 0,
+    fontSize: 'sm',
     ml: 'sm',
     '.is-selected &': {
       color: 'darkblue'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.151.1-alpha.1",
+  "version": "2.151.1-alpha.2",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",