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

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

@@ -1,30 +1,30 @@
 export var message = {
   item: {
-    backgroundColor: 'background.secondary',
+    backgroundColor: 'light',
     color: 'white !important',
     '> span': {
       color: 'white !important'
     },
     '&.is-success': {
-      bg: 'background.secondary',
+      bg: 'light',
       borderLeftColor: 'green-500',
       color: 'text.message'
     },
     '&.is-success, > .is-success': {
-      bg: 'background.secondary',
+      bg: 'light',
       color: 'text.message'
     },
     '&.is-warning': {
-      bg: 'background.secondary',
+      bg: 'light',
       borderLeftColor: 'yellow-500',
       color: 'text.message'
     },
     '&.is-warning, > .is-warning': {
-      bg: 'background.secondary',
+      bg: 'light',
       color: 'text.message'
     },
     '&.is-error, > .is-error': {
-      bg: 'background.secondary',
+      bg: 'light',
       color: 'text.message'
     },
     '&.is-error, > button > svg': {

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

@@ -21,7 +21,7 @@ export var navBar = {
   container: {
     width: '252px',
     p: 'sm',
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     boxShadow: '0 .5rem 1rem rgba(0, 0, 0, .15)'
   },
   sectionButton: {

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

@@ -10,7 +10,7 @@ import { navBar } from './navbar';
 import skeleton from './skeleton';
 var listBox = {
   container: {
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     border: '1px solid',
     borderColor: 'transparent',
     borderRadius: '4px'
@@ -43,21 +43,41 @@ var tab = {
 };
 var modal = {
   content: {
-    bg: 'background.base'
+    bg: 'backgroundBase'
   },
   headingContainer: {
-    bg: 'background.base'
+    borderBottom: '1px solid',
+    borderBottomColor: 'border.base',
+    bg: 'backgroundBase'
+  },
+  header: {
+    borderBottom: '1px solid',
+    borderBottomColor: 'border.base',
+    bg: 'backgroundBase'
+  },
+  body: {
+    bg: 'backgroundBase'
+  },
+  footer: {
+    borderTop: '1px solid',
+    borderTopColor: 'border.base',
+    bg: 'backgroundBase'
+  },
+  footerContainer: {
+    borderTop: '1px solid',
+    borderTopColor: 'border.base',
+    bg: 'backgroundBase'
   },
   buttonsContainer: {
-    bg: 'background.base'
+    bg: 'backgroundBase'
   }
 };
 var rockerButton = {
   innerContainer: {
-    backgroundColor: 'background.base'
+    backgroundColor: 'backgroundBase'
   },
   thumbSwitch: {
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     color: 'blue-400',
     '&.is-selected': {
       color: 'black',
@@ -75,7 +95,7 @@ var rockerButton = {
 };
 var attachment = {
   container: {
-    backgroundColor: 'background.secondary',
+    backgroundColor: 'backgroundSecondary',
     borderColor: 'border.attachment'
   }
 };

package/lib/styles/themes/next-gen/colors/colors.js

@@ -102,13 +102,12 @@ var overrides = {
   focus: colorsObject.active,
   disabled: nextGenColors['gray-100']
 };
-var background = {
-  base: 'white',
-  secondary: nextGenColors['gray-100'],
-  card: nextGenColors['blue-100'],
-  suggestion: '#ecf0f5',
-  hover: nextGenColors['gray-100']
-};
+var background = nextGenColors['blue-100'];
+var backgroundBase = 'white';
+var backgroundSecondary = nextGenColors['gray-100'];
+var backgroundCard = nextGenColors['blue-100'];
+var backgroundSuggestion = '#ecf0f5';
+var backgroundHover = nextGenColors['gray-100'];
 var card = {
   blue: nextGenColors['blue-100'],
   gray: nextGenColors['gray-100']
@@ -130,6 +129,11 @@ var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColo
   active: colorsObject.blue,
   primary: colorsObject.blue,
   background: background,
+  backgroundBase: backgroundBase,
+  backgroundSecondary: backgroundSecondary,
+  backgroundCard: backgroundCard,
+  backgroundSuggestion: backgroundSuggestion,
+  backgroundHover: backgroundHover,
   iconWrapper: iconWrapper,
   tooltip: tooltip,
   twoTone: twoTone

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -1,4 +1,4 @@
-var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar'];
+var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box'];
 export var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Messages: ['Customization'],

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

@@ -55,7 +55,7 @@ var iconSizes = ['icon-100', 'icon-200', 'icon-300', 'icon-400', 'icon-500', 'ic
 var StickerSheetComponent = function StickerSheetComponent() {
   return ___EmotionJSX(Box, {
     sx: {
-      backgroundColor: 'background.base'
+      backgroundColor: 'backgroundBase'
     },
     height: "100%",
     p: "lg",

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

@@ -1,7 +1,7 @@
 import tShirtSizes from '../customProperties/tShirtSizes';
 var base = {
   width: '100%',
-  backgroundColor: 'background.secondary',
+  backgroundColor: 'light',
   lineHeight: 'md',
   p: 'md',
   border: 'none',

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

@@ -17,7 +17,7 @@ var interactive = {
   borderColor: 'border.base',
   transition: 'border-color .25s ease-in',
   '&.is-focused': {
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     outline: '2px solid',
     outlineColor: 'focus',
     outlineOffset: '0px'

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

@@ -25,7 +25,7 @@ var tableRow = {
   }
 };
 var selectableTableRow = _objectSpread(_objectSpread({}, tableRow), {}, {
-  bg: 'background.base',
+  bg: 'backgroundBase',
   '&.is-hovered': {
     bg: 'gray-100'
   },

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

@@ -24,7 +24,7 @@ export var input = {
   fontSize: 'md',
   fontFamily: 'standard',
   p: '0.75rem',
-  backgroundColor: 'background.base',
+  backgroundColor: 'backgroundBase',
   borderColor: 'border.input',
   '&.is-focused': _objectSpread({}, defaultFocus),
   borderRadius: '4px',
@@ -167,7 +167,7 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper),
     border: '1px solid',
     borderColor: 'gray-900',
     '> input': {
-      backgroundColor: 'background.secondary'
+      backgroundColor: 'backgroundSecondary'
     },
     '&:after': {
       display: 'none'

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

@@ -48,7 +48,7 @@ export var listViewItem = {
   },
   expandableStyledListItem: {
     px: 'lg',
-    bg: 'background.base',
+    bg: 'backgroundBase',
     '&.is-first-item': {
       borderTopLeftRadius: borderRadius,
       borderTopRightRadius: borderRadius

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

@@ -23,7 +23,7 @@ export var navBar = {
     fontFamily: 'standard',
     width: '252px',
     p: 'sm',
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     boxShadow: '0 .5rem 1rem rgba(0, 0, 0, .15)'
   },
   sectionContainer: {

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

@@ -57,7 +57,7 @@ var navigationHeader = {
     fontFamily: 'standard',
     borderBottom: '1px solid',
     borderColor: 'border.base',
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     height: '4.5rem',
     justifyContent: 'center'
   },
@@ -66,10 +66,10 @@ var navigationHeader = {
     maxWidth: '1540px',
     mx: 'auto',
     width: '100%',
-    backgroundColor: 'background.base'
+    backgroundColor: 'backgroundBase'
   },
   dropdownMenu: {
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     maxWidth: 'unset',
     p: 'sm',
     '&:focus': _objectSpread({}, defaultFocus),

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

@@ -1,5 +1,5 @@
 var container = {
-  bg: 'background.base',
+  bg: 'backgroundBase',
   border: 'none',
   minHeight: 72,
   maxHeight: 72

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

@@ -35,7 +35,7 @@ var step = {
   active: _objectSpread(_objectSpread({
     backgroundColor: 'active',
     borderColor: 'active',
-    color: 'background.base'
+    color: 'backgroundBase'
   }, stepBase), {}, {
     '&:before': {
       content: '""',
@@ -46,7 +46,7 @@ var step = {
       position: 'absolute',
       borderRadius: '100%',
       borderStyle: 'solid',
-      borderColor: 'background.base',
+      borderColor: 'backgroundBase',
       borderWidth: '2px'
     }
   }),
@@ -54,7 +54,7 @@ var step = {
     borderColor: 'active'
   }),
   inactive: _objectSpread({
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     borderColor: 'blue-200',
     color: 'active'
   }, stepBase)

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

@@ -29,7 +29,7 @@ var head = {
 var body = {
   borderTopColor: 'border.base',
   borderBottom: 'unset',
-  backgroundColor: 'background.base',
+  backgroundColor: 'backgroundBase',
   borderBottomLeftRadius: '16px',
   borderBottomRightRadius: '16px',
   '&& > tr:not(:last-child)': {
@@ -37,7 +37,7 @@ var body = {
     borderBottomColor: 'border.base'
   },
   '&& > tr:nth-of-type(odd) ': {
-    backgroundColor: 'background.base'
+    backgroundColor: 'backgroundBase'
   },
   '&& > tr:last-child': {
     borderBottomLeftRadius: '16px',

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

@@ -46,7 +46,7 @@ var container = {
   }
 };
 var caption = {
-  backgroundColor: 'background.base',
+  backgroundColor: 'backgroundBase',
   px: 'lg',
   color: 'text.primary',
   borderBottom: '1px solid',
@@ -62,7 +62,7 @@ var row = {
     bg: 'background.hover'
   },
   '&:nth-of-type(odd)': {
-    bg: 'background.base',
+    bg: 'backgroundBase',
     '&.is-hovered': {
       bg: 'background.hover'
     }
@@ -70,7 +70,7 @@ var row = {
 };
 var thead = {
   borderBottomColor: 'border.base',
-  backgroundColor: 'background.base',
+  backgroundColor: 'backgroundBase',
   '&.is-sticky': {
     boxShadow: "0 1px 0 ".concat(colors.border.base)
   }
@@ -87,7 +87,7 @@ var head = {
 var tbody = {
   borderTopColor: 'border.base',
   borderBottom: 'unset',
-  backgroundColor: 'background.base',
+  backgroundColor: 'backgroundBase',
   borderBottomLeftRadius: borderRadius,
   borderBottomRightRadius: borderRadius
 };

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

@@ -111,12 +111,18 @@ var modal = {
       maxWidth: modalSize.full
     }
   },
+  headingContainer: {
+    borderBottom: '1px solid',
+    borderBottomColor: 'gray-200',
+    bg: 'backgroundBase',
+    borderRadius: '1em 1em 0px 0px'
+  },
   container: {
     justifyContent: 'start'
   },
   header: {
     pt: 'lg',
-    bg: 'background.base',
+    bg: 'backgroundBase',
     mb: 'lg'
   }
 };
@@ -148,12 +154,12 @@ var listBox = {
     },
     '&.is-condensed': {
       pl: 'md',
-      bg: 'background.base',
+      bg: 'backgroundBase',
       '&.is-selected': {
-        bg: 'background.base'
+        bg: 'backgroundBase'
       },
       '&.is-focused': {
-        bg: 'background.base'
+        bg: 'backgroundBase'
       }
     }
   }
@@ -189,11 +195,11 @@ var progressBar = {
 };
 var overlayPanel = {
   container: {
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     borderColor: 'border.hairline'
   },
   aiPanelContainer: {
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     border: 'none',
     borderLeft: 'none',
     position: 'fixed',
@@ -227,30 +233,30 @@ var overlayPanel = {
     alignSelf: 'center'
   },
   innerPanel: {
-    backgroundColor: 'background.base'
+    backgroundColor: 'backgroundBase'
   }
 };
 var buttonBar = {
   container: {
     gap: 'sm',
-    backgroundColor: 'background.base'
+    backgroundColor: 'backgroundBase'
   },
   justifyRightContainer: {
     gap: 'sm',
-    backgroundColor: 'background.base'
+    backgroundColor: 'backgroundBase'
   }
 };
 var rockerButton = {
   innerContainer: {
     boxShadow: 'none',
-    backgroundColor: 'common.background.base',
+    backgroundColor: 'common.backgroundBase',
     borderRadius: '50px',
     padding: 0,
     border: 'none'
   },
   thumbSwitch: {
     textTransform: 'none',
-    backgroundColor: 'common.background.base',
+    backgroundColor: 'common.backgroundBase',
     padding: 'md',
     height: '50px',
     color: 'active',
@@ -302,7 +308,7 @@ var loader = {
     py: 'sm'
   },
   circleSpinner: {
-    borderColor: 'background.base'
+    borderColor: 'backgroundBase'
   }
 };
 var breadcrumb = {

package/package.json

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