@pingux/astro 2.104.0 → 2.105.0-alpha.1

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/components/NumberField/NumberField.test.js

@@ -6,6 +6,7 @@ import { NumberField } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { act, render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import { universalFieldComponentTests } from '../../utils/testUtils/universalFormSubmitTest';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-NumberField';
 var testLabel = 'test-NumberField-label';
@@ -33,6 +34,14 @@ universalComponentTests({
     return ___EmotionJSX(NumberField, _extends({}, defaultProps, props));
   }
 });
+universalFieldComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(NumberField, _extends({}, defaultProps, props));
+  },
+  testValue: 5,
+  testLabel: testLabel,
+  componentType: 'NumberField'
+});
 test('renders NumberField component', function () {
   getComponent();
   expect(screen.queryAllByLabelText(testLabel)[0]).toBeInTheDocument();

package/lib/components/PasswordField/PasswordField.test.js

@@ -18,6 +18,7 @@ import userEvent from '@testing-library/user-event';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { act, render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import { universalFieldComponentTests } from '../../utils/testUtils/universalFormSubmitTest';
 import PasswordField from '.';
 
 // Emotion Cache added as test fails otherwise, root cause of this failure is unknown.
@@ -70,12 +71,14 @@ var successfulRequirements = [{
   name: '1 special character',
   status: statuses.SUCCESS
 }];
-var getComponent = function getComponent() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(CacheProvider, {
-    value: emotionCache
-  }, ___EmotionJSX(PasswordField, _extends({}, defaultProps, props))));
-};
+universalFieldComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(PasswordField, _extends({}, defaultProps, props));
+  },
+  testValue: 'testvalue',
+  testLabel: testLabel,
+  componentType: 'PasswordField'
+});
 
 // Needs to be added to each components test file
 universalComponentTests({
@@ -83,8 +86,14 @@ universalComponentTests({
     return ___EmotionJSX(PasswordField, _extends({}, defaultProps, props));
   }
 });
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(CacheProvider, {
+    value: emotionCache
+  }, ___EmotionJSX(PasswordField, _extends({}, defaultProps, props))));
+};
 afterEach(function () {
-  jest.resetAllMocks();
+  jest.clearAllMocks();
 });
 test('default password field', function () {
   getComponent();

package/lib/components/RadioGroupField/RadioGroupField.test.js

@@ -17,6 +17,7 @@ import ORIENTATION from '../../utils/devUtils/constants/orientation';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import { universalFieldComponentTests } from '../../utils/testUtils/universalFormSubmitTest';
 import RadioField from '../RadioField';
 import RadioGroupField from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -51,6 +52,20 @@ universalComponentTests({
     }));
   }
 });
+universalFieldComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(RadioGroupField, _extends({}, defaultProps, props), ___EmotionJSX(RadioField, {
+      value: testValues[0],
+      label: testValues[0]
+    }), ___EmotionJSX(RadioField, {
+      value: testValues[1],
+      label: testValues[1]
+    }));
+  },
+  testValue: testValues[0],
+  testLabel: testLabel,
+  componentType: 'RadioGroupField'
+});
 test('default radio group', function () {
   getComponent();
   var group = screen.getByLabelText(testLabel);

package/lib/components/SearchField/SearchField.test.js

@@ -3,6 +3,7 @@ import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import { universalFieldComponentTests } from '../../utils/testUtils/universalFormSubmitTest';
 import SearchField from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-radio-group';
@@ -15,6 +16,14 @@ var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(SearchField, _extends({}, defaultProps, props)));
 };
+universalFieldComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(SearchField, _extends({}, defaultProps, props));
+  },
+  testValue: 'testvalue',
+  testLabel: testLabel,
+  componentType: 'SearchField'
+});
 
 // Needs to be added to each components test file
 universalComponentTests({

package/lib/components/SelectField/SelectField.test.js

@@ -6,6 +6,7 @@ import { Item, Section, SelectField } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import { universalFieldComponentTests } from '../../utils/testUtils/universalFormSubmitTest';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var items = [{
   name: 'a'
@@ -98,6 +99,18 @@ universalComponentTests({
     });
   }
 });
+universalFieldComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(SelectField, _extends({}, defaultProps, props), function (item) {
+      return ___EmotionJSX(Item, {
+        key: item.name
+      }, item.name);
+    });
+  },
+  testValue: items[0].name,
+  testLabel: defaultProps.label,
+  componentType: 'SelectField'
+});
 test('default select field', function () {
   getComponent();
   var container = screen.getByTestId(testId);

package/lib/components/SelectFieldBase/SelectFieldBase.js

@@ -9,7 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["columnStyleProps", "defaultText", "fieldContainerProps", "fieldControlInputProps", "fieldControlWrapperProps", "fieldLabelProps", "helperText", "isLoadingInitial", "label", "labelMode", "name", "overlay", "placeholder", "slots", "state", "status", "trigger", "triggerProps", "triggerRef", "valueProps", "selectProps"];
+var _excluded = ["columnStyleProps", "defaultText", "fieldContainerProps", "fieldControlInputProps", "fieldControlWrapperProps", "fieldLabelProps", "helperText", "isLoadingInitial", "isDisabled", "label", "labelMode", "name", "overlay", "placeholder", "slots", "state", "status", "trigger", "triggerProps", "triggerRef", "valueProps", "selectProps"];
 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; }
 import React, { forwardRef, useMemo } from 'react';
@@ -44,6 +44,7 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (props, ref) {
     fieldLabelProps = props.fieldLabelProps,
     helperText = props.helperText,
     isLoadingInitial = props.isLoadingInitial,
+    isDisabled = props.isDisabled,
     label = props.label,
     labelMode = props.labelMode,
     name = props.name,
@@ -103,7 +104,7 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (props, ref) {
     triggerRef: triggerRef,
     label: label,
     name: name,
-    isDisabled: true
+    isDisabled: isDisabled
   }, selectProps)), trigger || defaultTrigger, overlay, helperText && ___EmotionJSX(FieldHelperText, {
     status: status,
     id: helperTextId

package/lib/components/SwitchField/SwitchField.js

@@ -8,7 +8,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["label", "helperText", "isDefaultSelected", "isDisabled", "status", "controlProps"];
+var _excluded = ["label", "helperText", "isDefaultSelected", "isDisabled", "status", "controlProps", "name"];
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 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; }
@@ -31,6 +31,7 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
     isDisabled = props.isDisabled,
     status = props.status,
     controlProps = props.controlProps,
+    name = props.name,
     others = _objectWithoutProperties(props, _excluded);
   usePropWarning(props, 'disabled', 'isDisabled');
   var switchRef = useLocalOrForwardRef(ref);
@@ -68,7 +69,8 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "forms.switch.label"
   }, fieldLabelProps), ___EmotionJSX(Box, fieldControlWrapperProps, ___EmotionJSX(Switch, _extends({
     ref: switchRef,
-    inputProps: fieldControlInputProps
+    inputProps: fieldControlInputProps,
+    name: name
   }, unhandledAriaProps, omit(others, 'data-pendo-id', 'aria-label')))), label), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText));

package/lib/components/SwitchField/SwitchField.test.js

@@ -3,6 +3,7 @@ import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import { universalFieldComponentTests } from '../../utils/testUtils/universalFormSubmitTest';
 import SwitchField from './SwitchField';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TEST_LABEL = 'test label';
@@ -13,6 +14,14 @@ var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(SwitchField, _extends({}, defaultProps, props)));
 };
+universalFieldComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(SwitchField, _extends({}, defaultProps, props));
+  },
+  testValue: 'testvalue',
+  testLabel: defaultProps.label,
+  componentType: 'SwitchField'
+});
 
 // Needs to be added to each components test file
 universalComponentTests({

package/lib/components/TextAreaField/TextAreaField.test.js

@@ -8,6 +8,7 @@ import userEvent from '@testing-library/user-event';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import { universalFieldComponentTests } from '../../utils/testUtils/universalFormSubmitTest';
 import TextAreaField from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-textAreaField';
@@ -28,6 +29,14 @@ universalComponentTests({
     return ___EmotionJSX(TextAreaField, _extends({}, defaultProps, props));
   }
 });
+universalFieldComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(TextAreaField, _extends({}, defaultProps, props));
+  },
+  testValue: 'testvalue',
+  testLabel: defaultProps.label,
+  componentType: 'TextAreaField'
+});
 test('disabled prop disables input', function () {
   getComponent({
     isDisabled: true

package/lib/components/TextField/TextField.test.js

@@ -7,6 +7,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import { universalFieldComponentTests } from '../../utils/testUtils/universalFormSubmitTest';
 import TextField from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-text-field';
@@ -19,6 +20,14 @@ var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(TextField, _extends({}, defaultProps, props)));
 };
+universalFieldComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(TextField, _extends({}, defaultProps, props));
+  },
+  testValue: 'testvalue',
+  testLabel: testLabel,
+  componentType: 'TextField'
+});
 
 // Needs to be added to each components test file
 universalComponentTests({

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)) {