@pingux/astro 2.105.0-alpha.0 → 2.105.0-alpha.1

package/lib/cjs/components/CodeView/CodeView.js

@@ -55,13 +55,13 @@ var CodeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isHovered = _useHover.isHovered;
   var theme = (0, _useGetTheme["default"])();
   var themeState = theme.themeState;
-  var isNextGen = themeState.isNextGen;
+  var isOnyx = themeState.isOnyx;
   var _useStatusClasses = (0, _hooks.useStatusClasses)(outerClassName, {
       isFocused: isFocusVisible,
       isHovered: isHovered,
       hasLineNumbers: hasLineNumbers,
       hasNoCopyButton: hasNoCopyButton,
-      isNextGen: isNextGen
+      isOnyx: isOnyx
     }),
     classNames = _useStatusClasses.classNames;
 
@@ -71,7 +71,7 @@ var CodeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return tokens.length.toString().length * 12;
   };
   var code = (children === null || children === void 0 ? void 0 : (0, _trim["default"])(children).call(children)) || '';
-  var codeViewTheme = (stylesProp === null || stylesProp === void 0 ? void 0 : stylesProp.theme) || (isNextGen ? _codeView["default"].theme : _CodeView["default"].theme);
+  var codeViewTheme = (stylesProp === null || stylesProp === void 0 ? void 0 : stylesProp.theme) || (isOnyx ? _codeView["default"].theme : _CodeView["default"].theme);
   var content = (0, _react2.jsx)(_prismReactRenderer["default"], (0, _extends2["default"])({}, _prismReactRenderer.defaultProps, {
     theme: codeViewTheme,
     code: code,
@@ -110,7 +110,7 @@ var CodeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   });
 
   /* istanbul ignore next */
-  if (isNextGen) {
+  if (isOnyx) {
     return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
       ref: ref,
       variant: "codeView.wrapper",

package/lib/cjs/components/CodeView/CodeView.test.js

@@ -202,11 +202,11 @@ test('renders CodeView component with highlighted code', function () {
   expect(codeViewElement).toBeInTheDocument();
   expect(codeViewElement).toHaveClass("language-".concat(language));
 });
-test('isNextGen prop renders CodeView component with next-gen theme', function () {
+test('isOnyx prop renders CodeView component with next-gen theme', function () {
   var children = ' ';
   getComponent({
     children: children,
-    isNextGen: true,
+    isOnyx: true,
     language: 'json'
   });
   var codeViewElement = _testWrapper.screen.getByTestId(testId);

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

@@ -149,7 +149,7 @@ var Default = function Default(_ref) {
     justifyContent: "center",
     py: "xs",
     flex: "0 0 auto"
-  }, themeState.isNextGenDark ? whiteLogo : logo, (0, _react2.jsx)(_index.Separator, {
+  }, themeState.isOnyxDark ? whiteLogo : logo, (0, _react2.jsx)(_index.Separator, {
     orientation: "vertical",
     sx: placeholderSeparator,
     style: {

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 export declare const baseState: {
-    isNextGen: boolean;
+    isOnyx: boolean;
     isAstro: boolean;
-    isNextGenDark: boolean;
+    isOnyxDark: boolean;
     isCustom: boolean;
 };
 declare const useGetTheme: () => {
@@ -36,9 +36,9 @@ declare const useGetTheme: () => {
         lg: number;
     };
     themeState: {
-        isNextGen: boolean;
+        isOnyx: boolean;
         isAstro: boolean;
-        isNextGenDark: boolean;
+        isOnyxDark: boolean;
         isCustom: boolean;
     };
     name: string;
@@ -66,8 +66,8 @@ declare const useGetTheme: () => {
     name: string;
     themeState: {
         isAstro: boolean;
-        isNextGen: boolean;
-        isNextGenDark: boolean;
+        isOnyx: boolean;
+        isOnyxDark: boolean;
         isCustom: boolean;
     };
 };

package/lib/cjs/hooks/useGetTheme/useGetTheme.js

@@ -24,9 +24,9 @@ var _themes = require("../../utils/devUtils/constants/themes");
 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; } /* eslint-disable no-else-return */
 var baseState = {
-  isNextGen: false,
+  isOnyx: false,
   isAstro: false,
-  isNextGenDark: false,
+  isOnyxDark: false,
   isCustom: false
 };
 exports.baseState = baseState;
@@ -36,17 +36,17 @@ var astroState = _objectSpread({
     isAstro: true
   })
 }, _customProperties2.astroThemeValues);
-var nextGenState = _objectSpread({
+var onyxState = _objectSpread({
   themeState: _objectSpread(_objectSpread({}, baseState), {}, {
-    isNextGen: true
+    isOnyx: true
   }),
   name: _themes.themes.NEXT_GEN
 }, _customProperties3.nextGenThemeValues);
-var nextGenDarkState = _objectSpread({
+var onyxDarkState = _objectSpread({
   name: _themes.themes.NEXT_GEN_DARK,
   themeState: _objectSpread(_objectSpread({}, baseState), {}, {
-    isNextGen: true,
-    isNextGenDark: true
+    isOnyx: true,
+    isOnyxDark: true
   })
 }, _customProperties.nextGenDarkThemeValues);
 var customThemeState = _objectSpread({
@@ -57,13 +57,13 @@ var customThemeState = _objectSpread({
 }, _customProperties2.astroThemeValues);
 var getTheme = function getTheme(theme) {
   if (theme === _themes.themes.NEXT_GEN) {
-    return _objectSpread({}, nextGenState);
+    return _objectSpread({}, onyxState);
   }
   if (theme === _themes.themes.ASTRO) {
     return _objectSpread({}, astroState);
   }
   if (theme === _themes.themes.NEXT_GEN_DARK) {
-    return _objectSpread({}, nextGenDarkState);
+    return _objectSpread({}, onyxDarkState);
   }
   return _objectSpread({}, customThemeState);
 };

package/lib/cjs/hooks/useGetTheme/useGetTheme.test.js

@@ -45,7 +45,7 @@ describe('useGetTheme', function () {
       result = _renderHook.result;
     expect(result.current.name).toBe(_themes.themes.NEXT_GEN);
     expect(result.current.themeState).toEqual(_objectSpread(_objectSpread({}, _useGetTheme.baseState), {}, {
-      isNextGen: true
+      isOnyx: true
     }));
   });
 });
@@ -63,8 +63,8 @@ describe('useGetTheme', function () {
       result = _renderHook2.result;
     expect(result.current.name).toBe(_themes.themes.NEXT_GEN_DARK);
     expect(result.current.themeState).toEqual(_objectSpread(_objectSpread({}, _useGetTheme.baseState), {}, {
-      isNextGen: true,
-      isNextGenDark: true
+      isOnyx: true,
+      isOnyxDark: true
     }));
   });
 });

package/lib/cjs/index.d.ts

@@ -198,7 +198,9 @@ export * from './components/TooltipTrigger';
 export { default as TreeView } from './components/TreeView';
 export * from './components/TreeView';
 export { default as NextGenDarkTheme } from './styles/themeOverrides/nextGenDarkMode';
+export { default as OnyxDarkTheme } from './styles/themeOverrides/nextGenDarkMode';
 export { default as NextGenTheme } from './styles/themes/next-gen';
+export { default as OnyxTheme } from './styles/themes/next-gen';
 export * from './types';
 export { OverlayProvider, useOverlayPosition, useOverlayTrigger } from 'react-aria';
 export { Item, Section, useOverlayTriggerState, useTreeData } from 'react-stately';

package/lib/cjs/index.js

@@ -135,7 +135,9 @@ var _exportNames = {
   TooltipTrigger: true,
   TreeView: true,
   NextGenDarkTheme: true,
+  OnyxDarkTheme: true,
   NextGenTheme: true,
+  OnyxTheme: true,
   OverlayProvider: true,
   useOverlayPosition: true,
   useOverlayTrigger: true,
@@ -629,6 +631,18 @@ _Object$defineProperty(exports, "NumberField", {
     return _NumberField["default"];
   }
 });
+_Object$defineProperty(exports, "OnyxDarkTheme", {
+  enumerable: true,
+  get: function get() {
+    return _nextGenDarkMode["default"];
+  }
+});
+_Object$defineProperty(exports, "OnyxTheme", {
+  enumerable: true,
+  get: function get() {
+    return _nextGen["default"];
+  }
+});
 _Object$defineProperty(exports, "OverlayPanel", {
   enumerable: true,
   get: function get() {

package/lib/cjs/recipes/NextGen/ListViewNextGen.stories.js

@@ -11,7 +11,7 @@ var _index = require("../../index");
 var _ListViewNextGenComponent = require("../../styles/themes/next-gen/stories/ListViewNextGenComponent");
 var _react2 = require("@emotion/react");
 var _default = {
-  title: 'Next Gen Recipes/ListView'
+  title: 'Onyx Recipes/ListView'
 };
 exports["default"] = _default;
 var Default = function Default() {

package/lib/cjs/recipes/NextGen/ModalNextGen.stories.js

@@ -11,7 +11,7 @@ var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
 var _default = {
-  title: 'Next Gen Recipes/Modal'
+  title: 'Onyx Recipes/Modal'
 };
 exports["default"] = _default;
 var Default = function Default() {

package/lib/cjs/recipes/NextGen/NavBarNextGen.stories.js

@@ -10,7 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _NavBarNextGenComponent = require("../../styles/themes/next-gen/stories/NavBarNextGenComponent");
 var _react2 = require("@emotion/react");
 var _default = {
-  title: 'Next Gen Recipes/NavBar'
+  title: 'Onyx Recipes/NavBar'
 };
 exports["default"] = _default;
 var Default = function Default() {

package/lib/cjs/recipes/NextGen/NextGenDataTable.stories.js

@@ -10,7 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _DataTableNextGenComponent = require("../../styles/themes/next-gen/stories/DataTableNextGenComponent");
 var _react2 = require("@emotion/react");
 var _default = {
-  title: 'Next Gen Recipes/DataTable'
+  title: 'Onyx Recipes/DataTable'
 };
 exports["default"] = _default;
 var Default = function Default() {

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/stories/NextGenDarkDataTable.chomatic.stories.js

@@ -11,7 +11,7 @@ var _ = require("../../../..");
 var _DataTableNextGenComponent = require("../../../themes/next-gen/stories/DataTableNextGenComponent");
 var _react2 = require("@emotion/react");
 var _default = {
-  title: 'Chromatic Only NextGen Dark DataTable'
+  title: 'Chromatic Only Onyx Dark DataTable'
 };
 exports["default"] = _default;
 var Default = function Default() {

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/stories/NextGenDarkListView.chromatic.stories.js

@@ -11,7 +11,7 @@ var _ = require("../../../..");
 var _ListViewNextGenComponent = require("../../../themes/next-gen/stories/ListViewNextGenComponent");
 var _react2 = require("@emotion/react");
 var _default = {
-  title: 'Chromatic Only NextGen Dark ListView'
+  title: 'Chromatic Only Onyx Dark ListView'
 };
 exports["default"] = _default;
 var Default = function Default() {

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/stories/NextGenDarkNavStory.chomatic.stories.js

@@ -11,7 +11,7 @@ var _ = require("../../../..");
 var _NavBarNextGenComponent = require("../../../themes/next-gen/stories/NavBarNextGenComponent");
 var _react2 = require("@emotion/react");
 var _default = {
-  title: 'Chromatic Only NextGen Dark NavBar'
+  title: 'Chromatic Only Onyx Dark NavBar'
 };
 exports["default"] = _default;
 var Default = function Default() {

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/stories/NextGenDarkStickerSheet.chromatic.stories.js

@@ -11,7 +11,7 @@ var _ = require("../../../..");
 var _StickerSheetComponent = _interopRequireDefault(require("../../../themes/next-gen/stories/StickerSheetComponent"));
 var _react2 = require("@emotion/react");
 var _default = {
-  title: 'Chromatic Only NextGen Dark Sticker Sheet'
+  title: 'Chromatic Only Onyx Dark Sticker Sheet'
 };
 exports["default"] = _default;
 var Default = function Default() {

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/forms.js

@@ -46,7 +46,7 @@ var checkbox = {
 exports.checkbox = checkbox;
 var selectOption = {
   backgroundColor: 'background.base',
-  color: 'magenta !important',
+  color: 'text.primary',
   px: 'md',
   py: 'sm',
   alignItems: 'center',

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/navbar.js

@@ -98,7 +98,7 @@ var navBar = {
   item: {
     px: '1rem',
     py: '.75rem',
-    color: 'magenta !important',
+    color: 'text.primary',
     fontFamily: 'standard',
     '&.is-hovered': {
       backgroundColor: 'background.hover'

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

@@ -730,6 +730,58 @@ declare const _default: {
                 transition: string;
                 outline: string;
             };
+            onyx: {
+                path: {
+                    fill: string;
+                };
+                '&.is-hovered': {
+                    backgroundColor: string;
+                    path: {
+                        fill: string;
+                    };
+                };
+                '&.is-pressed': {
+                    backgroundColor: string;
+                    borderColor: string;
+                    path: {
+                        fill: string;
+                    };
+                };
+                maxHeight: string;
+                maxWidth: string;
+                width: string;
+                p: string;
+                display: string;
+                alignItems: string;
+                justifyContent: string;
+                backgroundColor: string;
+                borderColor: string;
+                color: string;
+                minWidth: string;
+                cursor: string;
+                fontFamily: string;
+                fontSize: string;
+                flexGrow: string;
+                fontWeight: number;
+                textAlign: string;
+                verticalAlign: string;
+                lineHeight: number;
+                borderRadius: string;
+                border: string;
+                px: string;
+                py: string;
+                height: string;
+                '&.is-disabled': {
+                    opacity: number;
+                };
+                '&.is-focused': {
+                    outline: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                };
+                transition: string;
+                outline: string;
+            };
             modalCloseButton: {
                 position: string;
                 top: number;
@@ -1549,6 +1601,24 @@ declare const _default: {
                 color: string;
             };
         };
+        onyx: {
+            color: string;
+            fontSize: string;
+            py: string;
+            px: string;
+            textDecoration: string;
+            borderRadius: string;
+            lineHeight: string;
+            minHeight: string;
+            fontFamily: string;
+            cursor: string;
+            '&.is-hovered': {
+                color: string;
+            };
+            '&.is-pressed': {
+                color: string;
+            };
+        };
         sideNav: {
             px: string;
             display: string;

package/lib/cjs/styles/themes/next-gen/stories/DataTableNextGenComponent.js

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 var _index = require("../../../../index");
 var _react2 = require("@emotion/react");
 var _default = {
-  title: 'Next Gen Recipes/DataTable'
+  title: 'Onyx Recipes/DataTable'
 };
 exports["default"] = _default;
 var getCellProps = function getCellProps(columnKey, align) {

package/lib/cjs/styles/themes/next-gen/stories/NextGenDataTable.chromatic.stories.js

@@ -11,7 +11,7 @@ var _ = require("../../../..");
 var _DataTableNextGenComponent = require("./DataTableNextGenComponent");
 var _react2 = require("@emotion/react");
 var _default = {
-  title: 'Chromatic Only NextGen DataTable'
+  title: 'Chromatic Only Onyx DataTable'
 };
 exports["default"] = _default;
 var Default = function Default() {

package/lib/cjs/styles/themes/next-gen/stories/NextGenListView.chromatic.stories.js

@@ -11,7 +11,7 @@ var _ = require("../../../..");
 var _ListViewNextGenComponent = require("./ListViewNextGenComponent");
 var _react2 = require("@emotion/react");
 var _default = {
-  title: 'Chromatic Only NextGen ListView'
+  title: 'Chromatic Only Onyx ListView'
 };
 exports["default"] = _default;
 var Default = function Default() {

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

@@ -1,7 +1,6 @@
 import React from 'react';
 declare const _default: {
     title: string;
-    component: string;
 };
 export default _default;
 export declare const Default: () => React.JSX.Element;

package/lib/cjs/styles/themes/next-gen/stories/NextGenListViewItem.stories.js

@@ -11,8 +11,7 @@ var _ = require("../../../..");
 var _ListViewItemNextGen = require("./ListViewItemNextGen");
 var _react2 = require("@emotion/react");
 var _default = {
-  title: 'Next Gen Recipes/NextGen ListViewItem',
-  component: 'Tabs'
+  title: 'Onyx Recipes/ListViewItem'
 };
 exports["default"] = _default;
 var item = {

package/lib/cjs/styles/themes/next-gen/stories/NextGenNavBar.chromatic.stories.js

@@ -11,7 +11,7 @@ var _ = require("../../../..");
 var _NavBarNextGenComponent = require("./NavBarNextGenComponent");
 var _react2 = require("@emotion/react");
 var _default = {
-  title: 'Chromatic Only NextGen NavBar'
+  title: 'Chromatic Only Onyx NavBar'
 };
 exports["default"] = _default;
 var Default = function Default() {

package/lib/cjs/styles/themes/next-gen/stories/NextGenStickerSheet.chromatic.stories.js

@@ -11,7 +11,7 @@ var _ = require("../../../..");
 var _StickerSheetComponent = _interopRequireDefault(require("./StickerSheetComponent"));
 var _react2 = require("@emotion/react");
 var _default = {
-  title: 'NextGen Sticker Sheet'
+  title: 'Onyx Sticker Sheet'
 };
 exports["default"] = _default;
 var Default = function Default() {

package/lib/cjs/styles/themes/next-gen/stories/StickerSheetComponent.js

@@ -178,7 +178,7 @@ var StickerSheetComponent = function StickerSheetComponent() {
     }
   })), (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "default icon button",
-    variant: "nextGen"
+    variant: "onyx"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _DeleteIcon["default"],
     title: {

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

@@ -498,6 +498,58 @@ declare const buttons: {
             transition: string;
             outline: string;
         };
+        onyx: {
+            path: {
+                fill: string;
+            };
+            '&.is-hovered': {
+                backgroundColor: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '&.is-pressed': {
+                backgroundColor: string;
+                borderColor: string;
+                path: {
+                    fill: string;
+                };
+            };
+            maxHeight: string;
+            maxWidth: string;
+            width: string;
+            p: string;
+            display: string;
+            alignItems: string;
+            justifyContent: string;
+            backgroundColor: string;
+            borderColor: string;
+            color: string;
+            minWidth: string;
+            cursor: string;
+            fontFamily: string;
+            fontSize: string;
+            flexGrow: string;
+            fontWeight: number;
+            textAlign: string;
+            verticalAlign: string;
+            lineHeight: number;
+            borderRadius: string;
+            border: string;
+            px: string;
+            py: string;
+            height: string;
+            '&.is-disabled': {
+                opacity: number;
+            };
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+            transition: string;
+            outline: string;
+        };
         modalCloseButton: {
             position: string;
             top: number;

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

@@ -221,33 +221,35 @@ var modalCloseButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
   top: 22,
   right: 22
 });
+var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButton), secondary), {}, {
+  path: {
+    fill: 'blue'
+  },
+  '&.is-hovered': {
+    backgroundColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.075, 'rgb').hex(),
+    path: {
+      fill: 'white'
+    }
+  },
+  '&.is-pressed': {
+    backgroundColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
+    borderColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
+    path: {
+      fill: 'white'
+    }
+  },
+  maxHeight: '48.5px',
+  maxWidth: '48.5px',
+  width: '48.5px',
+  p: 'sm',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
 var iconButtons = {
   base: _objectSpread({}, baseIconButton),
-  nextGen: _objectSpread(_objectSpread(_objectSpread({}, baseIconButton), secondary), {}, {
-    path: {
-      fill: 'blue'
-    },
-    '&.is-hovered': {
-      backgroundColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.075, 'rgb').hex(),
-      path: {
-        fill: 'white'
-      }
-    },
-    '&.is-pressed': {
-      backgroundColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
-      borderColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
-      path: {
-        fill: 'white'
-      }
-    },
-    maxHeight: '48.5px',
-    maxWidth: '48.5px',
-    width: '48.5px',
-    p: 'sm',
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center'
-  }),
+  nextGen: _objectSpread({}, onyxIconButton),
+  onyx: _objectSpread({}, onyxIconButton),
   modalCloseButton: modalCloseButton,
   badge: {
     deleteButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {

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

@@ -17,6 +17,24 @@ declare const _default: {
             color: string;
         };
     };
+    onyx: {
+        color: string;
+        fontSize: string;
+        py: string;
+        px: string;
+        textDecoration: string;
+        borderRadius: string;
+        lineHeight: string;
+        minHeight: string;
+        fontFamily: string;
+        cursor: string;
+        '&.is-hovered': {
+            color: string;
+        };
+        '&.is-pressed': {
+            color: string;
+        };
+    };
     sideNav: {
         px: string;
         display: string;

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

@@ -34,6 +34,7 @@ var nextGen = {
     color: 'blue-600'
   }
 };
+var onyx = _objectSpread({}, nextGen);
 var sideNav = _objectSpread(_objectSpread({}, nextGen), {}, {
   px: '0',
   display: 'block',
@@ -63,6 +64,7 @@ var footerHeader = _objectSpread(_objectSpread({}, footerLinks), {}, {
 });
 var _default = {
   nextGen: nextGen,
+  onyx: onyx,
   sideNav: sideNav,
   footerLinks: footerLinks,
   footerHeader: footerHeader

package/lib/cjs/types/codeView.d.ts

@@ -16,6 +16,6 @@ export interface CodeViewProps extends HoverProps, StyleProps {
     textToCopy?: string;
     sx?: ThemeUICSSObject;
     stylesProp?: ThemeUICSSObject;
-    isNextGen?: boolean;
+    isOnyx?: boolean;
     iconButtonProps?: IconButtonProps;
 }

package/lib/cjs/utils/devUtils/shouldReturnComingSoon.js

@@ -18,8 +18,11 @@ var shouldReturnComingSoon = function shouldReturnComingSoon(context, selectedTh
   var _context;
   var story = context.name;
   var component = context.title.split('/')[1];
-  var isNextGenOnlyComponent = (0, _includes["default"])(_convertedComponentList.nextGenOnlyComponents).call(_convertedComponentList.nextGenOnlyComponents, component) || context.title.split('/')[0] === 'Next Gen Recipes';
+  var isNextGenOnlyComponent = (0, _includes["default"])(_convertedComponentList.nextGenOnlyComponents).call(_convertedComponentList.nextGenOnlyComponents, component) || context.title.split('/')[0] === 'Onyx Recipes';
   var isStoryInNextGen = (0, _includes["default"])(_convertedComponentList["default"]).call(_convertedComponentList["default"], component);
+  if (isNextGenOnlyComponent && (selectedTheme === _themes.themes.NEXT_GEN || selectedTheme === _themes.themes.NEXT_GEN_DARK)) {
+    return false;
+  }
 
   // if a specific story has not been converted, return the coming soon message
   if (_convertedComponentList.componentSpecificNextGenBlacklist[component] && (0, _includes["default"])(_context = _convertedComponentList.componentSpecificNextGenBlacklist[component]).call(_context, story) && (selectedTheme === _themes.themes.NEXT_GEN || selectedTheme === _themes.themes.NEXT_GEN_DARK)) {

package/lib/components/CodeView/CodeView.js

@@ -44,13 +44,13 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
     isHovered = _useHover.isHovered;
   var theme = useGetTheme();
   var themeState = theme.themeState;
-  var isNextGen = themeState.isNextGen;
+  var isOnyx = themeState.isOnyx;
   var _useStatusClasses = useStatusClasses(outerClassName, {
       isFocused: isFocusVisible,
       isHovered: isHovered,
       hasLineNumbers: hasLineNumbers,
       hasNoCopyButton: hasNoCopyButton,
-      isNextGen: isNextGen
+      isOnyx: isOnyx
     }),
     classNames = _useStatusClasses.classNames;
 
@@ -60,7 +60,7 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
     return tokens.length.toString().length * 12;
   };
   var code = (children === null || children === void 0 ? void 0 : _trimInstanceProperty(children).call(children)) || '';
-  var codeViewTheme = (stylesProp === null || stylesProp === void 0 ? void 0 : stylesProp.theme) || (isNextGen ? codeViewStyle.theme : styles.theme);
+  var codeViewTheme = (stylesProp === null || stylesProp === void 0 ? void 0 : stylesProp.theme) || (isOnyx ? codeViewStyle.theme : styles.theme);
   var content = ___EmotionJSX(Highlight, _extends({}, defaultProps, {
     theme: codeViewTheme,
     code: code,
@@ -99,7 +99,7 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
   });
 
   /* istanbul ignore next */
-  if (isNextGen) {
+  if (isOnyx) {
     return ___EmotionJSX(Box, _extends({
       ref: ref,
       variant: "codeView.wrapper",

package/lib/components/CodeView/CodeView.test.js

@@ -198,11 +198,11 @@ test('renders CodeView component with highlighted code', function () {
   expect(codeViewElement).toBeInTheDocument();
   expect(codeViewElement).toHaveClass("language-".concat(language));
 });
-test('isNextGen prop renders CodeView component with next-gen theme', function () {
+test('isOnyx prop renders CodeView component with next-gen theme', function () {
   var children = ' ';
   getComponent({
     children: children,
-    isNextGen: true,
+    isOnyx: true,
     language: 'json'
   });
   var codeViewElement = screen.getByTestId(testId);

package/lib/components/NavigationHeader/NavigationHeader.stories.js

@@ -140,7 +140,7 @@ export var Default = function Default(_ref) {
     justifyContent: "center",
     py: "xs",
     flex: "0 0 auto"
-  }, themeState.isNextGenDark ? whiteLogo : logo, ___EmotionJSX(Separator, {
+  }, themeState.isOnyxDark ? whiteLogo : logo, ___EmotionJSX(Separator, {
     orientation: "vertical",
     sx: placeholderSeparator,
     style: {

package/lib/hooks/useGetTheme/useGetTheme.js

@@ -18,9 +18,9 @@ import { astroThemeValues } from '../../styles/themes/astro/customProperties';
 import { nextGenThemeValues } from '../../styles/themes/next-gen/customProperties';
 import { themes } from '../../utils/devUtils/constants/themes';
 export var baseState = {
-  isNextGen: false,
+  isOnyx: false,
   isAstro: false,
-  isNextGenDark: false,
+  isOnyxDark: false,
   isCustom: false
 };
 var astroState = _objectSpread({
@@ -29,17 +29,17 @@ var astroState = _objectSpread({
     isAstro: true
   })
 }, astroThemeValues);
-var nextGenState = _objectSpread({
+var onyxState = _objectSpread({
   themeState: _objectSpread(_objectSpread({}, baseState), {}, {
-    isNextGen: true
+    isOnyx: true
   }),
   name: themes.NEXT_GEN
 }, nextGenThemeValues);
-var nextGenDarkState = _objectSpread({
+var onyxDarkState = _objectSpread({
   name: themes.NEXT_GEN_DARK,
   themeState: _objectSpread(_objectSpread({}, baseState), {}, {
-    isNextGen: true,
-    isNextGenDark: true
+    isOnyx: true,
+    isOnyxDark: true
   })
 }, nextGenDarkThemeValues);
 var customThemeState = _objectSpread({
@@ -50,13 +50,13 @@ var customThemeState = _objectSpread({
 }, astroThemeValues);
 var getTheme = function getTheme(theme) {
   if (theme === themes.NEXT_GEN) {
-    return _objectSpread({}, nextGenState);
+    return _objectSpread({}, onyxState);
   }
   if (theme === themes.ASTRO) {
     return _objectSpread({}, astroState);
   }
   if (theme === themes.NEXT_GEN_DARK) {
-    return _objectSpread({}, nextGenDarkState);
+    return _objectSpread({}, onyxDarkState);
   }
   return _objectSpread({}, customThemeState);
 };

package/lib/hooks/useGetTheme/useGetTheme.test.js

@@ -38,7 +38,7 @@ describe('useGetTheme', function () {
       result = _renderHook.result;
     expect(result.current.name).toBe(themes.NEXT_GEN);
     expect(result.current.themeState).toEqual(_objectSpread(_objectSpread({}, baseState), {}, {
-      isNextGen: true
+      isOnyx: true
     }));
   });
 });
@@ -56,8 +56,8 @@ describe('useGetTheme', function () {
       result = _renderHook2.result;
     expect(result.current.name).toBe(themes.NEXT_GEN_DARK);
     expect(result.current.themeState).toEqual(_objectSpread(_objectSpread({}, baseState), {}, {
-      isNextGen: true,
-      isNextGenDark: true
+      isOnyx: true,
+      isOnyxDark: true
     }));
   });
 });

package/lib/index.js

@@ -202,7 +202,9 @@ export * from './components/TooltipTrigger';
 export { default as TreeView } from './components/TreeView';
 export * from './components/TreeView';
 export { default as NextGenDarkTheme } from './styles/themeOverrides/nextGenDarkMode';
+export { default as OnyxDarkTheme } from './styles/themeOverrides/nextGenDarkMode';
 export { default as NextGenTheme } from './styles/themes/next-gen';
+export { default as OnyxTheme } from './styles/themes/next-gen';
 export * from './types';
 export { OverlayProvider, useOverlayPosition, useOverlayTrigger } from 'react-aria';
 export { Item, Section, useOverlayTriggerState, useTreeData } from 'react-stately';

package/lib/recipes/NextGen/ListViewNextGen.stories.js

@@ -3,7 +3,7 @@ import { Box } from '../../index';
 import { ListViewNextGen } from '../../styles/themes/next-gen/stories/ListViewNextGenComponent';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Next Gen Recipes/ListView'
+  title: 'Onyx Recipes/ListView'
 };
 export var Default = function Default() {
   return ___EmotionJSX(Box, {

package/lib/recipes/NextGen/ModalNextGen.stories.js

@@ -3,7 +3,7 @@ import { useModalState } from '../../hooks';
 import { Box, Button, Modal, OverlayProvider, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Next Gen Recipes/Modal'
+  title: 'Onyx Recipes/Modal'
 };
 export var Default = function Default() {
   var state = useModalState();

package/lib/recipes/NextGen/NavBarNextGen.stories.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { NavBarNextGenComponent } from '../../styles/themes/next-gen/stories/NavBarNextGenComponent';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Next Gen Recipes/NavBar'
+  title: 'Onyx Recipes/NavBar'
 };
 export var Default = function Default() {
   return ___EmotionJSX(NavBarNextGenComponent, null);

package/lib/recipes/NextGen/NextGenDataTable.stories.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { DataTableNextGenComponent } from '../../styles/themes/next-gen/stories/DataTableNextGenComponent';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Next Gen Recipes/DataTable'
+  title: 'Onyx Recipes/DataTable'
 };
 export var Default = function Default() {
   return ___EmotionJSX(DataTableNextGenComponent, null);

package/lib/styles/themeOverrides/nextGenDarkMode/stories/NextGenDarkDataTable.chomatic.stories.js

@@ -3,7 +3,7 @@ import { AstroProvider, NextGenDarkTheme } from '../../../..';
 import { DataTableNextGenComponent } from '../../../themes/next-gen/stories/DataTableNextGenComponent';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Chromatic Only NextGen Dark DataTable'
+  title: 'Chromatic Only Onyx Dark DataTable'
 };
 export var Default = function Default() {
   return ___EmotionJSX(AstroProvider, {

package/lib/styles/themeOverrides/nextGenDarkMode/stories/NextGenDarkListView.chromatic.stories.js

@@ -3,7 +3,7 @@ import { AstroProvider, NextGenDarkTheme } from '../../../..';
 import { ListViewNextGen } from '../../../themes/next-gen/stories/ListViewNextGenComponent';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Chromatic Only NextGen Dark ListView'
+  title: 'Chromatic Only Onyx Dark ListView'
 };
 export var Default = function Default() {
   return ___EmotionJSX(AstroProvider, {

package/lib/styles/themeOverrides/nextGenDarkMode/stories/NextGenDarkNavStory.chomatic.stories.js

@@ -3,7 +3,7 @@ import { AstroProvider, NextGenDarkTheme } from '../../../..';
 import { NavBarNextGenComponent } from '../../../themes/next-gen/stories/NavBarNextGenComponent';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Chromatic Only NextGen Dark NavBar'
+  title: 'Chromatic Only Onyx Dark NavBar'
 };
 export var Default = function Default() {
   return ___EmotionJSX(AstroProvider, {

package/lib/styles/themeOverrides/nextGenDarkMode/stories/NextGenDarkStickerSheet.chromatic.stories.js

@@ -3,7 +3,7 @@ import { AstroProvider, NextGenDarkTheme } from '../../../..';
 import StickerSheetComponent from '../../../themes/next-gen/stories/StickerSheetComponent';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Chromatic Only NextGen Dark Sticker Sheet'
+  title: 'Chromatic Only Onyx Dark Sticker Sheet'
 };
 export var Default = function Default() {
   return ___EmotionJSX(AstroProvider, {

package/lib/styles/themeOverrides/nextGenDarkMode/variants/forms.js

@@ -36,7 +36,7 @@ export var checkbox = {
 };
 var selectOption = {
   backgroundColor: 'background.base',
-  color: 'magenta !important',
+  color: 'text.primary',
   px: 'md',
   py: 'sm',
   alignItems: 'center',

package/lib/styles/themeOverrides/nextGenDarkMode/variants/navbar.js

@@ -91,7 +91,7 @@ export var navBar = {
   item: {
     px: '1rem',
     py: '.75rem',
-    color: 'magenta !important',
+    color: 'text.primary',
     fontFamily: 'standard',
     '&.is-hovered': {
       backgroundColor: 'background.hover'

package/lib/styles/themes/next-gen/stories/DataTableNextGenComponent.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { Badge, Box, DataTable, DataTableBody, DataTableCell, DataTableColumn, DataTableHeader, DataTableMenu, DataTableRow, Text } from '../../../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Next Gen Recipes/DataTable'
+  title: 'Onyx Recipes/DataTable'
 };
 var getCellProps = function getCellProps(columnKey, align) {
   return {

package/lib/styles/themes/next-gen/stories/NextGenDataTable.chromatic.stories.js

@@ -3,7 +3,7 @@ import { AstroProvider, NextGenTheme } from '../../../..';
 import { DataTableNextGenComponent } from './DataTableNextGenComponent';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Chromatic Only NextGen DataTable'
+  title: 'Chromatic Only Onyx DataTable'
 };
 export var Default = function Default() {
   return ___EmotionJSX(AstroProvider, {

package/lib/styles/themes/next-gen/stories/NextGenListView.chromatic.stories.js

@@ -3,7 +3,7 @@ import { AstroProvider, NextGenTheme } from '../../../..';
 import { ListViewNextGen } from './ListViewNextGenComponent';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Chromatic Only NextGen ListView'
+  title: 'Chromatic Only Onyx ListView'
 };
 export var Default = function Default() {
   return ___EmotionJSX(AstroProvider, {

package/lib/styles/themes/next-gen/stories/NextGenListViewItem.stories.js

@@ -3,8 +3,7 @@ import { Box } from '../../../..';
 import { ListViewItemNextGen } from './ListViewItemNextGen';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Next Gen Recipes/NextGen ListViewItem',
-  component: 'Tabs'
+  title: 'Onyx Recipes/ListViewItem'
 };
 var item = {
   key: 'test',

package/lib/styles/themes/next-gen/stories/NextGenNavBar.chromatic.stories.js

@@ -3,7 +3,7 @@ import { AstroProvider, NextGenTheme } from '../../../..';
 import { NavBarNextGenComponent } from './NavBarNextGenComponent';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Chromatic Only NextGen NavBar'
+  title: 'Chromatic Only Onyx NavBar'
 };
 export var Default = function Default() {
   return ___EmotionJSX(AstroProvider, {

package/lib/styles/themes/next-gen/stories/NextGenStickerSheet.chromatic.stories.js

@@ -3,7 +3,7 @@ import { AstroProvider, NextGenTheme } from '../../../..';
 import StickerSheetComponent from './StickerSheetComponent';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'NextGen Sticker Sheet'
+  title: 'Onyx Sticker Sheet'
 };
 export var Default = function Default() {
   return ___EmotionJSX(AstroProvider, {

package/lib/styles/themes/next-gen/stories/StickerSheetComponent.js

@@ -170,7 +170,7 @@ var StickerSheetComponent = function StickerSheetComponent() {
     }
   })), ___EmotionJSX(IconButton, {
     "aria-label": "default icon button",
-    variant: "nextGen"
+    variant: "onyx"
   }, ___EmotionJSX(Icon, {
     icon: DeleteIcon,
     title: {

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

@@ -214,33 +214,35 @@ var modalCloseButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
   top: 22,
   right: 22
 });
+var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButton), secondary), {}, {
+  path: {
+    fill: 'blue'
+  },
+  '&.is-hovered': {
+    backgroundColor: chroma.mix(primaryBlue, 'black', 0.075, 'rgb').hex(),
+    path: {
+      fill: 'white'
+    }
+  },
+  '&.is-pressed': {
+    backgroundColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
+    borderColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
+    path: {
+      fill: 'white'
+    }
+  },
+  maxHeight: '48.5px',
+  maxWidth: '48.5px',
+  width: '48.5px',
+  p: 'sm',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
 var iconButtons = {
   base: _objectSpread({}, baseIconButton),
-  nextGen: _objectSpread(_objectSpread(_objectSpread({}, baseIconButton), secondary), {}, {
-    path: {
-      fill: 'blue'
-    },
-    '&.is-hovered': {
-      backgroundColor: chroma.mix(primaryBlue, 'black', 0.075, 'rgb').hex(),
-      path: {
-        fill: 'white'
-      }
-    },
-    '&.is-pressed': {
-      backgroundColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
-      borderColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
-      path: {
-        fill: 'white'
-      }
-    },
-    maxHeight: '48.5px',
-    maxWidth: '48.5px',
-    width: '48.5px',
-    p: 'sm',
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center'
-  }),
+  nextGen: _objectSpread({}, onyxIconButton),
+  onyx: _objectSpread({}, onyxIconButton),
   modalCloseButton: modalCloseButton,
   badge: {
     deleteButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {

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

@@ -27,6 +27,7 @@ var nextGen = {
     color: 'blue-600'
   }
 };
+var onyx = _objectSpread({}, nextGen);
 var sideNav = _objectSpread(_objectSpread({}, nextGen), {}, {
   px: '0',
   display: 'block',
@@ -56,6 +57,7 @@ var footerHeader = _objectSpread(_objectSpread({}, footerLinks), {}, {
 });
 export default {
   nextGen: nextGen,
+  onyx: onyx,
   sideNav: sideNav,
   footerLinks: footerLinks,
   footerHeader: footerHeader

package/lib/utils/devUtils/shouldReturnComingSoon.js

@@ -5,8 +5,11 @@ export var shouldReturnComingSoon = function shouldReturnComingSoon(context, sel
   var _context;
   var story = context.name;
   var component = context.title.split('/')[1];
-  var isNextGenOnlyComponent = _includesInstanceProperty(nextGenOnlyComponents).call(nextGenOnlyComponents, component) || context.title.split('/')[0] === 'Next Gen Recipes';
+  var isNextGenOnlyComponent = _includesInstanceProperty(nextGenOnlyComponents).call(nextGenOnlyComponents, component) || context.title.split('/')[0] === 'Onyx Recipes';
   var isStoryInNextGen = _includesInstanceProperty(nextGenConvertedComponents).call(nextGenConvertedComponents, component);
+  if (isNextGenOnlyComponent && (selectedTheme === themes.NEXT_GEN || selectedTheme === themes.NEXT_GEN_DARK)) {
+    return false;
+  }
 
   // if a specific story has not been converted, return the coming soon message
   if (componentSpecificNextGenBlacklist[component] && _includesInstanceProperty(_context = componentSpecificNextGenBlacklist[component]).call(_context, story) && (selectedTheme === themes.NEXT_GEN || selectedTheme === themes.NEXT_GEN_DARK)) {

package/package.json

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