@pingux/astro 2.221.6-alpha.0 → 2.234.0-alpha.0

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

@@ -10,19 +10,35 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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) { _defineProperty(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; }
 import { astroTokens } from '@pingux/onyx-tokens';
+import checkboxFieldGroup from '../../../components/CheckboxFieldGroup/CheckboxFieldGroup.styles';
 import { isSafari } from '../../safariAgent.js';
 import colors from './colors/colors';
 import tShirtSizes from './customProperties/tShirtSizes';
 import { fieldControlWrapper, input } from './variants/input';
 import { label } from './variants/label';
 import { switchable } from './variants/switch';
+export var checkboxField = {
+  container: {
+    mb: 'xs'
+  }
+};
 export var checkbox = {
-  height: '19.25px',
-  width: '19.25px',
-  color: 'text.secondary',
+  height: '16px',
+  width: '16px',
+  borderRadius: astroTokens.radius.checkbox.radius,
+  color: colors.neutral['80'],
   mr: '8px',
-  'input ~ &.is-focused': {
-    boxShadow: "inset 0px 0px 0px 1px ".concat(colors.focus)
+  'input:checked ~ &': {
+    color: 'active'
+  },
+  // The input is visually hidden; use the focus state propagated to the label for the outline.
+  '.is-focused &': {
+    outline: '2px solid',
+    outlineColor: colors.focus,
+    outlineOffset: '2px'
+  },
+  'input:disabled ~ &': {
+    opacity: 0.5
   }
 };
 export var select = {
@@ -30,6 +46,7 @@ export var select = {
   borderColor: 'border.input',
   color: 'text.primary',
   height: astroTokens.size.input.height,
+  pr: astroTokens.spacing.input['padding-x'],
   '&.is-disabled': {
     opacity: 1,
     borderColor: 'border.input',
@@ -67,6 +84,9 @@ export var comboBox = {
   },
   button: {
     border: 'none !important'
+  },
+  inputInContainerSlot: {
+    right: astroTokens.spacing.input['padding-x']
   }
 };
 export var numberField = {
@@ -74,8 +94,17 @@ export var numberField = {
 };
 export var radio = {
   base: {
-    color: 'text.secondary',
-    mr: '8px',
+    color: 'border.input',
+    mr: 'md',
+    height: 24,
+    width: 24,
+    // Horizontal RadioGroup uses a tighter icon-to-label gap per the Onyx spec
+    '.is-horizontal &': {
+      mr: 'sm'
+    },
+    'input:checked ~ &': {
+      color: 'active'
+    },
     'input ~ &.is-focused': /* istanbul ignore next */
     isSafari ? {
       boxShadow: 'none',
@@ -90,8 +119,19 @@ export var radio = {
       outlineColor: 'focus',
       outlineOffset: '1px'
     }
+  },
+  outerContainer: {
+    '.is-horizontal &': {
+      mr: 'lg'
+    }
+  },
+  checkedContent: {
+    pl: '40px'
   }
 };
+export var radioGroupWrapper = {
+  rowGap: 'xs'
+};
 export var timeField = {
   inputField: _objectSpread(_objectSpread({}, input), {}, {
     color: 'font.base',
@@ -128,10 +168,13 @@ export var timeField = {
 export default {
   input: input,
   label: label,
+  checkboxField: checkboxField,
   checkbox: checkbox,
+  checkboxFieldGroup: checkboxFieldGroup,
   comboBox: comboBox,
   select: select,
   radio: radio,
+  radioGroupWrapper: radioGroupWrapper,
   search: search,
   "switch": switchable,
   numberField: numberField,

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

@@ -5,6 +5,7 @@ var scale = {
   md: astroTokens.spacing.md,
   lg: astroTokens.spacing.lg,
   xl: astroTokens.spacing.xl,
-  xx: '4rem'
+  xx: '4rem',
+  'md-s': '12px'
 };
 export default scale;

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

@@ -0,0 +1,64 @@
+import { astroTokens } from '@pingux/onyx-tokens';
+// Onyx spec: 8px between rows.
+var listItem = {
+  mb: astroTokens.spacing.sm,
+  // The blocks below the list (helper text container and bottom bar) carry
+  // their own 8px top margin, so the last row drops its bottom margin to keep
+  // the spec's 8px gap instead of doubling it to 16px.
+  '&:last-of-type': {
+    mb: 0
+  },
+  // Row fields get their accessible name from aria-label, so their built-in
+  // label renders empty; the Onyx label variant's margin on that empty
+  // element would otherwise double the row spacing.
+  '& label.field-label:empty': {
+    mb: 0
+  },
+  // The delete control sits inline after the input per the Onyx spec, so the
+  // field's own control wrapper lays out horizontally with a centered
+  // alignment. The input flexes to fill the space left of the control
+  // (32px control + 16px gap) and spans the full row width when the control
+  // is absent ("cannot delete last item" state).
+  '& .field-control-wrapper': {
+    flexDirection: 'row',
+    alignItems: 'center',
+    '& .field-control-input': {
+      height: '50px',
+      width: '100%',
+      flex: '1 1 auto',
+      minWidth: 0
+    }
+  }
+};
+var helperTextContainer = {
+  mt: astroTokens.spacing.sm,
+  lineHeight: 'body',
+  '& > *': {
+    mt: '0px !important',
+    pt: '0px !important'
+  },
+  // 4px between the helper text and the maximum feedback, from the Onyx spec.
+  '& > * + *': {
+    mt: "".concat(astroTokens.spacing.xs, "px !important")
+  }
+};
+var bottomBar = {
+  mt: astroTokens.spacing.sm
+};
+var addButton = {
+  width: 'fit-content',
+  fontWeight: 0
+};
+var addButtonText = {
+  variant: 'text.label',
+  color: 'font.link',
+  fontWeight: 0
+};
+export var arrayField = {
+  listItem: listItem,
+  helperTextContainer: helperTextContainer,
+  bottomBar: bottomBar,
+  addButton: addButton,
+  addButtonText: addButtonText
+};
+export default arrayField;

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

@@ -0,0 +1,37 @@
+import { astroTokens } from '@pingux/onyx-tokens';
+// Onyx places the delete control inline after the field: 16px gap, 32x32 hit
+// area, circular badge-style focus ring and hover background. The base
+// Astro variant (merged underneath by the theme merge) positions the
+// control absolutely outside the row for its own layout, so those
+// properties are reset here to keep the control inside the flex row.
+var deleteButton = {
+  position: 'static',
+  right: 'auto',
+  top: 'auto',
+  ml: astroTokens.spacing.md,
+  width: 32,
+  height: 32,
+  alignSelf: 'center',
+  // '&&' out-specifies the base variant and the fieldControlWrapper
+  // '> button' rule; the focus indicator is circular, which needs the
+  // 28px radius kept as well.
+  '&&': {
+    border: 'none',
+    borderRadius: '28px'
+  },
+  cursor: 'pointer',
+  // This variant no longer extends the base icon button (the variant prop
+  // replaces it), so it carries its own focus ring and hover treatment.
+  '&.is-focused': {
+    outline: '2px solid',
+    outlineColor: 'active',
+    outlineOffset: '2px'
+  },
+  '&.is-hovered': {
+    backgroundColor: astroTokens.color.gray[100]
+  }
+};
+export var arrayFieldDeleteButton = {
+  deleteButton: deleteButton
+};
+export default arrayFieldDeleteButton;

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

@@ -15,7 +15,9 @@ var badgeFont = {
   fontWeight: '2'
 };
 var badgeIconStyle = {
-  '& span': _objectSpread({}, badgeFont),
+  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+    color: 'inherit'
+  }),
   '& button': {
     alignSelf: 'center',
     p: '0',
@@ -30,6 +32,7 @@ var badgeIconStyle = {
     }
   },
   '& svg': {
+    color: 'inherit',
     path: {
       fill: 'inherit'
     }
@@ -44,7 +47,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',
@@ -130,21 +134,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'
@@ -192,7 +228,27 @@ var countBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   })
 });
 var countNeutral = _objectSpread({}, secondary);
-var invertedRemovableBadge = _objectSpread({}, dark);
+// #23282e
+var invertedRemovableBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  backgroundColor: "".concat(astroTokens.color.gray[900], " !important"),
+  '& span': {
+    color: astroTokens.color.gray[100]
+  },
+  '& svg': {
+    path: {
+      fill: astroTokens.color.gray[100]
+    }
+  },
+  '& button.is-hovered': {
+    backgroundColor: astroTokens.color.gray[100]
+  },
+  '& button.is-hovered svg path': {
+    fill: 'dark'
+  },
+  '& button.is-pressed svg path': {
+    fill: astroTokens.color.gray[100]
+  }
+});
 var removableBadge = _objectSpread(_objectSpread({}, secondary), {}, {
   border: 'none'
 });
@@ -227,17 +283,10 @@ export var 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/styles/themes/next-gen/variants/box.js

@@ -20,12 +20,15 @@ export var commonContentProps = {
 };
 export var 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/styles/themes/next-gen/variants/button.js

@@ -13,6 +13,7 @@ import { astroTokens } from '@pingux/onyx-tokens';
 import chroma from 'chroma-js';
 import { copyButton } from '../codeView/codeView';
 import tShirtSizes from '../customProperties/tShirtSizes';
+import { arrayFieldDeleteButton } from './arrayFieldDeleteButton';
 import { commonContentProps } from './box';
 var transitions = {
   transition: 'color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out'
@@ -283,7 +284,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',
@@ -480,6 +484,9 @@ var searchClearButton = _objectSpread(_objectSpread({}, baseIconButtonStyle), {}
 var iconButtons = {
   base: _objectSpread({}, baseIconButton),
   onyx: _objectSpread({}, onyxIconButton),
+  arrayField: {
+    deleteButton: arrayFieldDeleteButton.deleteButton
+  },
   responseToolbar: _objectSpread(_objectSpread({}, baseIconButton), {}, {
     '&.is-not-loaded': {
       display: 'none'
@@ -510,6 +517,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',
@@ -595,7 +619,6 @@ var listBoxLink = {
     outline: 'none'
   },
   badgeDeleteButton: badgeDeleteButton,
-  invertedBadgeDeleteButton: _objectSpread({}, badgeDeleteButton),
   clearSelectionButton: _objectSpread(_objectSpread({}, searchClearButton), {}, {
     top: '15px',
     right: '1rem',

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

@@ -1,4 +1,10 @@
-var avatar = {};
+import sizes from '../sizes';
+var avatar = {
+  borderRadius: '100%',
+  width: sizes.avatar.sm,
+  height: sizes.avatar.sm,
+  objectFit: 'cover'
+};
 export default {
   avatar: avatar
 };

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

@@ -28,6 +28,38 @@ export var 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(astroTokens.color.primary)
+    }
   }
+};
+label.indicator = {
+  fontWeight: 0
 };

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

@@ -1,4 +1,5 @@
 import { astroTokens } from '@pingux/onyx-tokens';
+import sizes from '../sizes';
 export var focusBoxShadow = '0 0 0 2px inset #1a73e8';
 export var borderRadius = '16px';
 export var listViewItem = {
@@ -11,8 +12,11 @@ export var listViewItem = {
   iconWrapper: {
     ml: 'lg'
   },
+  imageContainer: {
+    width: sizes.avatar.sm
+  },
   imageWrapper: {
-    ml: 'md'
+    ml: 'lg'
   },
   styledListItem: {
     bg: 'white',
@@ -43,6 +47,36 @@ export var listViewItem = {
       }
     }
   },
+  container: {
+    p: 0,
+    bg: 'white',
+    '&.is-selected': {
+      bg: astroTokens.color.gray[100]
+    },
+    borderBottom: 'none',
+    '&.has-separator': {
+      borderBottom: '1px solid',
+      borderBottomColor: astroTokens.color.gray[200]
+    },
+    '&.is-hovered': {
+      bg: astroTokens.color.gray[100]
+    },
+    '&.is-focused': {
+      boxShadow: focusBoxShadow,
+      bg: 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/styles/themes/next-gen/variants/rangeCalendar.js

@@ -2,7 +2,7 @@ import { astroTokens } from '@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'
@@ -66,18 +66,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'
@@ -87,6 +97,7 @@ export default {
   calendarButton: calendarButton,
   calendarCell: calendarCell,
   calendarContainer: calendarContainer,
+  calendarHeaderContainer: calendarHeaderContainer,
   columnHeader: columnHeader,
   calendarRow: calendarRow
 };

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

@@ -1,8 +1,14 @@
 export var tabs = {
+  mb: 'md',
   '&.is-horizontal': {
     gap: '0px'
   }
 };
+export var tabPickerExpandIcon = {
+  ml: 'sm',
+  width: '16px',
+  height: '16px'
+};
 export var menuTab = {
   ml: '0px !important'
 };
@@ -10,13 +16,16 @@ export var 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/styles/themes/next-gen/variants/text.js

@@ -151,10 +151,14 @@ export var text = _objectSpread(_objectSpread({
   },
   tabLabel: {
     color: astroTokens.color.font.base,
-    wordBreak: 'normal',
-    lineHeight: 'body',
+    fontWeight: 0,
+    wordBreak: 'break-word',
+    lineHeight: 'sm',
     mb: 'sm',
     mt: 'sm',
+    '.is-disabled &': {
+      opacity: 0.65
+    },
     '.is-selected &': {
       color: astroTokens.color.font.link,
       mb: 'sm'