@pingux/astro 2.221.6 → 2.234.0-alpha.0

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

@@ -22,7 +22,9 @@ var badgeFont = {
   fontWeight: '2'
 };
 var badgeIconStyle = {
-  '& span': _objectSpread({}, badgeFont),
+  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+    color: 'inherit'
+  }),
   '& button': {
     alignSelf: 'center',
     p: '0',
@@ -37,6 +39,7 @@ var badgeIconStyle = {
     }
   },
   '& svg': {
+    color: 'inherit',
     path: {
       fill: 'inherit'
     }
@@ -51,7 +54,8 @@ var baseBadge = _objectSpread({
   alignSelf: 'flex-start',
   display: 'inline-flex !important',
   width: 'fit-content',
-  color: 'text.primary'
+  color: 'text.primary',
+  backgroundColor: 'gray.100'
 }, badgeIconStyle);
 var primary = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#EAF2FD !important',
@@ -137,21 +141,53 @@ var dataTableBadge = {
   minWidth: '100px',
   border: 'none'
 };
-var activeStatusBadge = _objectSpread({
-  border: 'none'
-}, primary);
-var warningStatusBadge = _objectSpread({
+var activeStatusBadge = _objectSpread(_objectSpread({
   border: 'none'
-}, warning);
-var criticalStatusBadge = _objectSpread({
-  border: 'none'
-}, danger);
-var healthyStatusBadge = _objectSpread({
-  border: 'none'
-}, success);
-var secondaryStatusBadge = _objectSpread({
+}, primary), {}, {
+  '& svg': {
+    color: 'inherit',
+    path: {
+      fill: 'blue-600'
+    }
+  }
+});
+var warningStatusBadge = _objectSpread(_objectSpread({
   border: 'none'
-}, secondary);
+}, warning), {}, {
+  '& svg': {
+    color: 'inherit',
+    path: {
+      fill: 'yellow-800'
+    }
+  }
+});
+var criticalStatusBadge = _objectSpread(_objectSpread({}, danger), {}, {
+  border: 'none',
+  '& svg': {
+    color: 'inherit',
+    path: {
+      fill: 'red-700'
+    }
+  }
+});
+var healthyStatusBadge = _objectSpread(_objectSpread({}, success), {}, {
+  border: 'none',
+  '& svg': {
+    color: 'inherit',
+    path: {
+      fill: 'success.dark'
+    }
+  }
+});
+var secondaryStatusBadge = _objectSpread(_objectSpread({}, secondary), {}, {
+  border: 'none',
+  '& svg': {
+    color: 'inherit',
+    path: {
+      fill: 'gray-900'
+    }
+  }
+});
 var tableBaseBadgeBaseStyle = _objectSpread(_objectSpread({}, baseBadge), {}, {
   minWidth: '100px',
   border: 'none'
@@ -199,7 +235,27 @@ var countBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   })
 });
 var countNeutral = _objectSpread({}, secondary);
-var invertedRemovableBadge = _objectSpread({}, dark);
+// #23282e
+var invertedRemovableBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  backgroundColor: "".concat(_onyxTokens.astroTokens.color.gray[900], " !important"),
+  '& span': {
+    color: _onyxTokens.astroTokens.color.gray[100]
+  },
+  '& svg': {
+    path: {
+      fill: _onyxTokens.astroTokens.color.gray[100]
+    }
+  },
+  '& button.is-hovered': {
+    backgroundColor: _onyxTokens.astroTokens.color.gray[100]
+  },
+  '& button.is-hovered svg path': {
+    fill: 'dark'
+  },
+  '& button.is-pressed svg path': {
+    fill: _onyxTokens.astroTokens.color.gray[100]
+  }
+});
 var removableBadge = _objectSpread(_objectSpread({}, secondary), {}, {
   border: 'none'
 });
@@ -234,17 +290,10 @@ var badges = exports.badges = {
   removableBadge: removableBadge,
   environmentBadge: environmentBadge,
   invertedRemovableBadge: invertedRemovableBadge,
-  errorCalloutBadge: {
-    backgroundColor: 'white !important'
-  },
-  infoCalloutBadge: {
-    backgroundColor: 'white !important'
-  },
-  successCalloutBadge: {
-    backgroundColor: 'white !important'
-  },
-  warningCalloutBadge: {
-    backgroundColor: 'white !important'
-  },
+  convenienceDefault: _objectSpread({}, primary),
+  errorCalloutBadge: _objectSpread({}, criticalStatusBadge),
+  infoCalloutBadge: _objectSpread({}, activeStatusBadge),
+  successCalloutBadge: _objectSpread({}, healthyStatusBadge),
+  warningCalloutBadge: _objectSpread({}, warningStatusBadge),
   tableBaseBadge: tableBaseBadge
 };

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

@@ -10,7 +10,9 @@ export declare const box: {
     indeterminateCheckboxIcon: {
         height: string;
         width: string;
+        color: string;
         '&.is-disabled': {
+            opacity: number;
             '& rect[id="indeterminate-checkbox-icon-wrapper"]': {
                 fill: string;
                 stroke: string;

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

@@ -27,12 +27,15 @@ var commonContentProps = exports.commonContentProps = {
 };
 var box = exports.box = {
   indeterminateCheckboxIcon: {
-    height: '19.25px',
-    width: '19.25px',
+    height: '16px',
+    width: '16px',
+    color: 'active',
     '&.is-disabled': {
+      opacity: 0.5,
+      // Override base Astro theme's neutral.80 fill so disabled state stays blue at 50%
       '& rect[id="indeterminate-checkbox-icon-wrapper"]': {
-        fill: 'gray-500',
-        stroke: 'gray-500'
+        fill: 'active',
+        stroke: 'active'
       }
     },
     '&.is-focused': {

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

@@ -557,35 +557,6 @@ declare const buttons: {
             boxShadow: string;
             alignSelf: string;
         };
-        invertedBadgeDeleteButton: {
-            transition: string;
-            p: number;
-            height: number;
-            width: number;
-            '&.is-focused': {
-                outline: string;
-                outlineColor: string;
-                outlineOffset: string;
-            };
-            '&.is-pressed': {
-                backgroundColor: string;
-                path: {
-                    fill: string;
-                };
-            };
-            '&.is-hovered': {
-                bg: string;
-            };
-            path: {
-                fill: string;
-            };
-            outline: string;
-            borderRadius: string;
-            border: string;
-            cursor: string;
-            boxShadow: string;
-            alignSelf: string;
-        };
         clearSelectionButton: {
             top: string;
             right: string;
@@ -672,6 +643,9 @@ declare const buttons: {
     primaryWithIcon: {
         display: string;
         color: string;
+        '> span': {
+            color: string;
+        };
         backgroundColor: string;
         borderColor: string;
         '&.is-pressed': {
@@ -942,6 +916,9 @@ declare const buttons: {
             boxShadow: string;
             alignSelf: string;
         };
+        arrayField: {
+            deleteButton: import("theme-ui").ThemeUICSSObject;
+        };
         responseToolbar: {
             '&.is-not-loaded': {
                 display: string;
@@ -1074,6 +1051,38 @@ declare const buttons: {
                 alignSelf: string;
             };
         };
+        invertedBadgeDeleteButton: {
+            path: {
+                fill: string;
+            };
+            '&.is-hovered': {
+                bg: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '&.is-pressed': {
+                bg: string;
+                path: {
+                    fill: string;
+                };
+            };
+            transition: string;
+            p: number;
+            height: number;
+            width: number;
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+            outline: string;
+            borderRadius: string;
+            border: string;
+            cursor: string;
+            boxShadow: string;
+            alignSelf: string;
+        };
         messageCloseButton: {
             minWidth: string;
             width: string;
@@ -1146,6 +1155,9 @@ declare const buttons: {
             alignSelf: string;
         };
         copyButton: {
+            path: {
+                fill: string;
+            };
             default: {
                 mx: string;
                 path: {

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

@@ -18,6 +18,7 @@ var _onyxTokens = require("@pingux/onyx-tokens");
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 var _codeView = require("../codeView/codeView");
 var _tShirtSizes = _interopRequireDefault(require("../customProperties/tShirtSizes"));
+var _arrayFieldDeleteButton = require("./arrayFieldDeleteButton");
 var _box = require("./box");
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -290,7 +291,10 @@ var withIcon = _objectSpread(_objectSpread({}, secondary), {}, {
 });
 var primaryWithIcon = _objectSpread(_objectSpread({}, primary), {}, {
   display: 'inline-flex',
-  color: 'white'
+  color: 'white',
+  '> span': {
+    color: 'white'
+  }
 });
 var inlineWithIcon = _objectSpread(_objectSpread({}, inline), {}, {
   display: 'inline-flex',
@@ -487,6 +491,9 @@ var searchClearButton = _objectSpread(_objectSpread({}, baseIconButtonStyle), {}
 var iconButtons = {
   base: _objectSpread({}, baseIconButton),
   onyx: _objectSpread({}, onyxIconButton),
+  arrayField: {
+    deleteButton: _arrayFieldDeleteButton.arrayFieldDeleteButton.deleteButton
+  },
   responseToolbar: _objectSpread(_objectSpread({}, baseIconButton), {}, {
     '&.is-not-loaded': {
       display: 'none'
@@ -517,6 +524,23 @@ var iconButtons = {
       }
     }, transitions)
   },
+  invertedBadgeDeleteButton: _objectSpread(_objectSpread({}, badgeDeleteButton), {}, {
+    path: {
+      fill: 'white'
+    },
+    '&.is-hovered': {
+      bg: 'transparent',
+      path: {
+        fill: 'white'
+      }
+    },
+    '&.is-pressed': {
+      bg: 'transparent',
+      path: {
+        fill: 'white'
+      }
+    }
+  }),
   messageCloseButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {
     minWidth: '28px',
     width: '28px',
@@ -602,7 +626,6 @@ var listBoxLink = {
     outline: 'none'
   },
   badgeDeleteButton: badgeDeleteButton,
-  invertedBadgeDeleteButton: _objectSpread({}, badgeDeleteButton),
   clearSelectionButton: _objectSpread(_objectSpread({}, searchClearButton), {}, {
     top: '15px',
     right: '1rem',

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

@@ -1,4 +1,9 @@
 declare const _default: {
-    avatar: {};
+    avatar: {
+        borderRadius: string;
+        width: string;
+        height: string;
+        objectFit: string;
+    };
 };
 export default _default;

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

@@ -1,11 +1,18 @@
 "use strict";
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var avatar = {};
+var _sizes = _interopRequireDefault(require("../sizes"));
+var avatar = {
+  borderRadius: '100%',
+  width: _sizes["default"].avatar.sm,
+  height: _sizes["default"].avatar.sm,
+  objectFit: 'cover'
+};
 var _default = exports["default"] = {
   avatar: avatar
 };

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

@@ -35,6 +35,38 @@ var label = exports.label = {
   radioGroup: {
     color: 'text.primary',
     fontSize: fontSizes.label,
-    mb: 'md'
+    mb: 'sm'
+  },
+  checkboxFieldGroup: {
+    color: 'text.primary',
+    fontSize: fontSizes.label,
+    mb: 'sm',
+    fontWeight: 'body',
+    opacity: 1,
+    flexWrap: 'wrap'
+  },
+  checkboxFieldGroupItem: {
+    fontSize: fontSizes.label,
+    display: 'inline-flex !important',
+    div: {
+      flexShrink: 0
+    },
+    width: 'max-content',
+    alignItems: 'center',
+    cursor: 'pointer',
+    minWidth: 0,
+    maxWidth: '100%',
+    flexWrap: 'wrap',
+    '> div': {
+      mr: 'md'
+    },
+    // Keyboard focus ring: the field-label gets .is-focused while the hidden
+    // input inside it holds focus, so surface the ring on the checkbox icon.
+    '&.is-focused input:focus ~ svg': {
+      boxShadow: "inset 0px 0px 0px 1px ".concat(_onyxTokens.astroTokens.color.primary)
+    }
   }
+};
+label.indicator = {
+  fontWeight: 0
 };

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

@@ -10,6 +10,9 @@ export declare const listViewItem: {
     iconWrapper: {
         ml: string;
     };
+    imageContainer: {
+        width: string;
+    };
     imageWrapper: {
         ml: string;
     };
@@ -42,6 +45,36 @@ export declare const listViewItem: {
             };
         };
     };
+    container: {
+        p: number;
+        bg: string;
+        '&.is-selected': {
+            bg: string;
+        };
+        borderBottom: string;
+        '&.has-separator': {
+            borderBottom: string;
+            borderBottomColor: string;
+        };
+        '&.is-hovered': {
+            bg: string;
+        };
+        '&.is-focused': {
+            boxShadow: string;
+            bg: string;
+        };
+        '&.is-first-item': {
+            borderTopLeftRadius: string;
+            borderTopRightRadius: string;
+        };
+        '&.is-last-item': {
+            borderBottomLeftRadius: string;
+            borderBottomRightRadius: string;
+            '&.has-separator': {
+                border: string;
+            };
+        };
+    };
     styledContainer: {
         bg: string;
         '&.is-hovered': {

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

@@ -1,11 +1,13 @@
 "use strict";
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.listViewItem = exports.listView = exports.lisViewItemChart = exports.focusBoxShadow = exports.borderRadius = void 0;
 var _onyxTokens = require("@pingux/onyx-tokens");
+var _sizes = _interopRequireDefault(require("../sizes"));
 var focusBoxShadow = exports.focusBoxShadow = '0 0 0 2px inset #1a73e8';
 var borderRadius = exports.borderRadius = '16px';
 var listViewItem = exports.listViewItem = {
@@ -18,8 +20,11 @@ var listViewItem = exports.listViewItem = {
   iconWrapper: {
     ml: 'lg'
   },
+  imageContainer: {
+    width: _sizes["default"].avatar.sm
+  },
   imageWrapper: {
-    ml: 'md'
+    ml: 'lg'
   },
   styledListItem: {
     bg: 'white',
@@ -50,6 +55,36 @@ var listViewItem = exports.listViewItem = {
       }
     }
   },
+  container: {
+    p: 0,
+    bg: 'white',
+    '&.is-selected': {
+      bg: _onyxTokens.astroTokens.color.gray[100]
+    },
+    borderBottom: 'none',
+    '&.has-separator': {
+      borderBottom: '1px solid',
+      borderBottomColor: _onyxTokens.astroTokens.color.gray[200]
+    },
+    '&.is-hovered': {
+      bg: _onyxTokens.astroTokens.color.gray[100]
+    },
+    '&.is-focused': {
+      boxShadow: focusBoxShadow,
+      bg: _onyxTokens.astroTokens.color.gray[100]
+    },
+    '&.is-first-item': {
+      borderTopLeftRadius: borderRadius,
+      borderTopRightRadius: borderRadius
+    },
+    '&.is-last-item': {
+      borderBottomLeftRadius: borderRadius,
+      borderBottomRightRadius: borderRadius,
+      '&.has-separator': {
+        border: 'none'
+      }
+    }
+  },
   styledContainer: {
     bg: 'transparent',
     '&.is-hovered': {

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

@@ -76,8 +76,18 @@ declare const _default: {
         borderRadius: string;
         p: string;
     };
+    calendarHeaderContainer: {
+        mt: number;
+        height: string;
+        mb: string;
+        width: string;
+    };
     columnHeader: {
         color: string;
+        fontWeight: number;
+        '&.is-disabled': {
+            opacity: number;
+        };
     };
     calendarRow: {
         bg: string;

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

@@ -9,7 +9,7 @@ var _onyxTokens = require("@pingux/onyx-tokens");
 var calendarBody = {
   py: 'sm',
   borderTop: '1px solid',
-  borderTopColor: 'border.base',
+  borderTopColor: 'border.separator',
   backgroundColor: 'backgroundBase',
   '& > tr:nth-of-type(odd) ': {
     backgroundColor: 'backgroundBase'
@@ -73,18 +73,28 @@ var calendarButton = {
 var calendarCell = {
   height: '36px'
 };
+var calendarHeaderContainer = {
+  mt: 0,
+  height: '26px',
+  mb: 'md',
+  width: '100%'
+};
 var columnHeader = {
-  color: 'text.primary'
+  color: 'text.primary',
+  fontWeight: 0,
+  '&.is-disabled': {
+    opacity: 0.65
+  }
 };
 var calendarContainer = {
   width: '611px',
   textAlign: 'center',
   color: 'backgroundBase',
   border: '1px solid',
-  borderColor: 'border.base',
+  borderColor: 'border.hairline',
   boxShadow: 'standard',
   borderRadius: '16px',
-  p: 'sm'
+  p: 'md'
 };
 var calendarRow = {
   bg: 'backgroundBase'
@@ -94,6 +104,7 @@ var _default = exports["default"] = {
   calendarButton: calendarButton,
   calendarCell: calendarCell,
   calendarContainer: calendarContainer,
+  calendarHeaderContainer: calendarHeaderContainer,
   columnHeader: columnHeader,
   calendarRow: calendarRow
 };

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

@@ -1,8 +1,14 @@
 export declare const tabs: {
+    mb: string;
     '&.is-horizontal': {
         gap: string;
     };
 };
+export declare const tabPickerExpandIcon: {
+    ml: string;
+    width: string;
+    height: string;
+};
 export declare const menuTab: {
     ml: string;
 };
@@ -11,6 +17,9 @@ export declare const tab: {
     '& > span': {
         px: string;
         fontSize: string;
+        mb: string;
+        mt: string;
+        minWidth: number;
     };
     '&.is-focused': {
         boxShadow: string;

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

@@ -4,12 +4,18 @@ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/obje
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tabs = exports.tabLine = exports.tab = exports.menuTab = void 0;
+exports.tabs = exports.tabPickerExpandIcon = exports.tabLine = exports.tab = exports.menuTab = void 0;
 var tabs = exports.tabs = {
+  mb: 'md',
   '&.is-horizontal': {
     gap: '0px'
   }
 };
+var tabPickerExpandIcon = exports.tabPickerExpandIcon = {
+  ml: 'sm',
+  width: '16px',
+  height: '16px'
+};
 var menuTab = exports.menuTab = {
   ml: '0px !important'
 };
@@ -17,13 +23,16 @@ var tab = exports.tab = {
   borderRadius: '2px',
   '& > span': {
     px: 'md',
-    fontSize: 'md'
+    fontSize: 'md',
+    mb: 'sm',
+    mt: 'sm',
+    minWidth: 0
   },
   '&.is-focused': {
     boxShadow: 'none',
     outline: '1px solid',
     outlineColor: 'active',
-    outlineOffset: '0px',
+    outlineOffset: '1px',
     '& > span': {
       outline: 'none'
     }

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

@@ -195,10 +195,14 @@ export declare const text: {
     };
     tabLabel: {
         color: string;
-        wordBreak: string;
+        fontWeight: number;
+        wordBreak: "break-word";
         lineHeight: string;
         mb: string;
         mt: string;
+        '.is-disabled &': {
+            opacity: number;
+        };
         '.is-selected &': {
             color: string;
             mb: string;