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

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

@@ -327,44 +327,60 @@ var aiChat = _objectSpread(_objectSpread({}, withIcon), {}, {
     }
   }
 });
-var baseIconButton = {
-  cursor: 'pointer',
+
+// Base styles for icon buttons
+var baseIconButtonStyle = {
+  p: '4px',
   transition: 'color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out',
   outline: 'none',
   borderRadius: '28px',
-  border: '1px solid',
-  borderColor: 'transparent',
+  border: 'none',
+  cursor: 'pointer',
+  boxShadow: 'none !important'
+};
+var baseIconButton = _objectSpread(_objectSpread({}, baseIconButtonStyle), {}, {
   path: {
     fill: 'dark'
   },
-  '&.is-focused': {
-    outline: '2px solid',
-    outlineColor: 'primary',
-    outlineOffset: '3px'
-  },
   '&.is-hovered': {
-    backgroundColor: 'gray-100',
+    backgroundColor: 'background.hover',
     path: {
       fill: 'dark'
     }
   },
   '&.is-pressed': {
-    backgroundColor: 'gray-100',
-    borderColor: 'gray-200',
+    backgroundColor: 'background.hover',
     path: {
       fill: 'dark'
     }
-  }
-};
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+var invertedIconButton = _objectSpread(_objectSpread({}, baseIconButtonStyle), {}, {
+  '&.is-hovered': {
+    boxShadow: 'none !important',
+    backgroundColor: 'blue-600'
+  },
+  '&.is-pressed': {
+    backgroundColor: 'blue-600'
+  },
+  '&.is-disabled': {
+    backgroundColor: 'gray-300'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
 var modalCloseButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
   position: 'absolute',
   top: 32,
   right: 18
 });
-var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButton), secondary), {}, {
+var onyxIconButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
   path: {
     fill: 'blue'
   },
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
   '&.is-hovered': {
     backgroundColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.075, 'rgb').hex(),
     path: {
@@ -373,47 +389,32 @@ var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButto
   },
   '&.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'
+  '&.is-focused': _objectSpread({}, defaultFocus)
 });
 var hintButton = {
   backgroundColor: 'transparent',
   path: {
     fill: 'dark'
   },
-  '&.is-focused': {
-    outline: '2px solid',
-    outlineColor: 'primary',
-    outlineOffset: '3px'
-  },
   '&.is-hovered': {
     backgroundColor: 'gray-100',
     path: {
       fill: 'dark'
     }
-  }
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
 };
 var badgeDeleteButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
-  height: 14,
   p: 0,
+  height: 14,
   width: 14,
-  border: 'none',
-  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
-    backgroundColor: 'gray-100'
-  }),
+  '&.is-focused': _objectSpread({}, defaultFocus),
   '&.is-pressed': {
     backgroundColor: 'gray-100',
-    borderColor: 'gray-200',
     path: {
       fill: 'dark'
     }
@@ -422,19 +423,17 @@ var badgeDeleteButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
     bg: 'transparent'
   }
 }, transitions);
-var searchClearButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
+var searchClearButton = _objectSpread(_objectSpread({}, baseIconButtonStyle), {}, {
+  path: {
+    fill: 'dark'
+  },
   width: '20px',
   height: '20px',
-  border: 'none',
   position: 'absolute',
   right: '20px',
-  '& > svg': {
-    minWidth: _tShirtSizes["default"].xs,
-    width: _tShirtSizes["default"].xs,
-    height: _tShirtSizes["default"].xs
-  },
   '&.is-hovered': {
-    bg: 'background.hover'
+    bg: 'background.hover',
+    boxShadow: 'none !important'
   },
   '&.is-pressed': {
     bg: 'background.hover'
@@ -442,7 +441,6 @@ var searchClearButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
 });
 var iconButtons = {
   base: _objectSpread({}, baseIconButton),
-  nextGen: _objectSpread({}, onyxIconButton),
   onyx: _objectSpread({}, onyxIconButton),
   responseToolbar: _objectSpread(_objectSpread({}, baseIconButton), {}, {
     '&.is-not-loaded': {
@@ -463,7 +461,6 @@ var iconButtons = {
       }),
       '&.is-pressed': {
         backgroundColor: 'gray-100',
-        borderColor: 'gray-200',
         path: {
           fill: 'dark'
         }
@@ -475,83 +472,30 @@ var iconButtons = {
     width: '28px',
     height: '28px',
     '& > svg': {
-      minWidth: '18px',
-      width: '18px',
-      height: '18px',
+      minWidth: _tShirtSizes["default"].sm,
+      width: _tShirtSizes["default"].sm,
+      height: _tShirtSizes["default"].sm,
       path: {
         fill: '#455469 !important'
       }
     }
   }),
-  headerNav: _objectSpread(_objectSpread({}, baseIconButton), {}, {
-    borderRadius: '4px',
-    path: {
-      fill: 'text.primary'
-    },
-    px: 'md',
-    py: 'sm',
-    width: '56px',
-    height: '40px',
-    '&.is-hovered': {
-      path: {
-        fill: 'text.secondary'
-      }
-    },
-    '&.is-pressed': {
-      path: {
-        fill: 'text.secondary'
-      }
-    },
-    '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
-      outlineOffset: '1px'
-    })
-  }),
+  headerNav: _objectSpread({}, baseIconButton),
   copyButton: _codeView.copyButton,
   deleteAttachment: _objectSpread(_objectSpread({}, baseIconButton), {}, {
     backgroundColor: 'light',
-    border: '1px solid',
-    borderColor: 'gray-300',
     size: '24px',
-    p: '4px',
     '&.is-hovered': {
       backgroundColor: '#dde5ec'
     }
   }),
-  inverted: {
-    cursor: 'pointer',
-    transition: 'color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out',
-    outline: 'none',
-    path: {
-      fill: 'white'
-    },
-    '&.is-focused': {
-      outline: '2px solid',
-      outlineColor: 'primary',
-      outlineOffset: '3px'
-    },
-    '&.is-pressed': {
-      backgroundColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
-      borderColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex()
-    },
-    '&.is-hovered': _objectSpread(_objectSpread({}, boxShadowNone), {}, {
-      border: 'none !important',
-      borderColor: 'none !important',
-      backgroundColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.075, 'rgb').hex()
-    }),
-    '&.is-disabled': {
-      backgroundColor: 'gray-300'
-    }
-  },
+  inverted: _objectSpread({}, invertedIconButton),
   searchClearButton: searchClearButton,
   filter: _objectSpread(_objectSpread({}, baseIconButton), {}, {
-    bg: 'transparent',
-    border: '2px solid',
-    borderColor: 'transparent',
     width: '32px',
     height: '32px',
     '&.is-hovered': {
-      border: '2px solid',
-      borderColor: 'transparent',
+      boxShadow: 'none !important',
       backgroundColor: 'gray-100',
       path: {
         fill: 'dark'
@@ -559,7 +503,6 @@ var iconButtons = {
     },
     '&.is-pressed': {
       backgroundColor: 'gray-100',
-      borderColor: 'gray-200',
       path: {
         fill: 'dark'
       }

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

@@ -9,7 +9,7 @@ exports["default"] = void 0;
 var _tShirtSizes = _interopRequireDefault(require("../customProperties/tShirtSizes"));
 var base = {
   width: '100%',
-  backgroundColor: 'background.secondary',
+  backgroundColor: 'light',
   lineHeight: 'md',
   p: 'md',
   border: 'none',

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

@@ -25,7 +25,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/cjs/styles/themes/next-gen/variants/dataTable.js

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

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

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

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

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

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

@@ -32,7 +32,7 @@ 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/cjs/styles/themes/next-gen/variants/navigationHeader.js

@@ -64,7 +64,7 @@ var navigationHeader = {
     fontFamily: 'standard',
     borderBottom: '1px solid',
     borderColor: 'border.base',
-    backgroundColor: 'background.base',
+    backgroundColor: 'backgroundBase',
     height: '4.5rem',
     justifyContent: 'center'
   },
@@ -73,10 +73,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/cjs/styles/themes/next-gen/variants/panelHeader.js

@@ -6,7 +6,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var container = {
-  bg: 'background.base',
+  bg: 'backgroundBase',
   border: 'none',
   minHeight: 72,
   maxHeight: 72

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

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

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

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

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

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

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

@@ -4,18 +4,9 @@ export declare const badgeDeleteButton: {
     height: number;
     p: number;
     width: number;
-    transition: string;
-    outline: string;
-    border: string;
-    borderColor: string;
     path: {
         fill: string;
     };
-    '&.is-focused': {
-        outline: string;
-        outlineColor: string;
-        outlineOffset: string;
-    };
     '&.is-hovered': {
         backgroundColor: string;
         path: {
@@ -24,11 +15,19 @@ export declare const badgeDeleteButton: {
     };
     '&.is-pressed': {
         backgroundColor: string;
-        borderColor: string;
         path: {
             fill: string;
         };
     };
+    '&.is-focused': {
+        outline: string;
+        outlineColor: string;
+        outlineOffset: string;
+    };
+    transition: string;
+    outline: string;
+    border: string;
+    boxShadow: string;
 };
 declare const _default: {
     accordion: {
@@ -789,6 +788,12 @@ declare const _default: {
                 maxWidth: string[];
             };
         };
+        headingContainer: {
+            borderBottom: string;
+            borderBottomColor: string;
+            bg: string;
+            borderRadius: string;
+        };
         container: {
             justifyContent: string;
         };

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

@@ -123,12 +123,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'
   }
 };
@@ -160,12 +166,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'
       }
     }
   }
@@ -201,11 +207,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',
@@ -239,30 +245,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',
@@ -314,7 +320,7 @@ var loader = {
     py: 'sm'
   },
   circleSpinner: {
-    borderColor: 'background.base'
+    borderColor: 'backgroundBase'
   }
 };
 var breadcrumb = {

package/lib/components/AccordionGridGroup/AccordionGrid.styles.js

@@ -20,7 +20,7 @@ var header = {
   flexShrink: 0,
   wordBreak: 'inherit',
   whiteSpace: 'nowrap',
-  bg: 'background.base',
+  bg: 'backgroundBase',
   flexGrow: 1,
   fontWeight: 700,
   border: '1px solid transparent',