@pingux/astro 2.136.1-alpha.3 → 2.137.0

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

@@ -11,75 +11,99 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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 buttons from './button';
 var badgeFont = {
-  fontSize: '11.25px',
+  fontSize: '12px',
   fontWeight: 2
 };
-var baseBadge = {
+var badgeIconStyle = {
+  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+    color: 'inherit'
+  }),
+  '& button': {
+    alignSelf: 'center',
+    p: '0',
+    bg: 'transparent',
+    '&.is-hovered': {
+      bg: 'transparent',
+      '& svg': {
+        path: {
+          fill: 'inherit'
+        }
+      }
+    }
+  },
+  '& svg': {
+    path: {
+      fill: 'inherit'
+    }
+  }
+};
+var baseBadge = _objectSpread({
   alignItems: 'center',
   justifyContent: 'center',
   py: '.25em',
   px: '.4em',
   borderRadius: '4px',
-  fontSize: '11.25px',
+  maxHeight: '18px',
+  minHeight: '18px',
+  fontSize: '12px',
   alignSelf: 'flex-start',
   display: 'inline-flex !important',
   width: 'fit-content',
-  '& span': _objectSpread({}, badgeFont)
-};
+  color: 'text.primary'
+}, badgeIconStyle);
 var primary = _objectSpread(_objectSpread({}, baseBadge), {}, {
-  backgroundColor: '#eaf1fb !important',
-  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-    color: '#1967d2'
-  })
+  backgroundColor: '#EAF2FD !important',
+  color: 'blue-600'
 });
 var secondary = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#f6f8fa !important',
-  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-    color: 'gray-900'
-  })
+  color: 'gray-900'
 });
 var success = _objectSpread(_objectSpread({}, baseBadge), {}, {
-  backgroundColor: '#d3eddf !important',
-  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-    color: 'success.dark'
-  })
+  backgroundColor: '#D3EDDF !important',
+  color: 'success.dark'
 });
 var danger = _objectSpread(_objectSpread({}, baseBadge), {}, {
-  backgroundColor: '#f8d8d5 !important',
-  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-    color: 'red-700'
-  })
+  backgroundColor: '#F8D8D5 !important',
+  color: 'red-700'
 });
 var warning = _objectSpread(_objectSpread({}, baseBadge), {}, {
-  backgroundColor: '#fff1da !important',
-  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-    color: 'yellow-700'
-  })
+  backgroundColor: '#FFF1DA !important',
+  color: 'yellow-800'
 });
 var dark = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: 'black !important',
-  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-    color: 'white'
-  })
+  color: 'white'
+});
+var info = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  backgroundColor: '#EAF2FD !important',
+  color: 'darkblue'
 });
 var selectedItemBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#eaf2fd !important',
   paddingRight: '0px !important',
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-    fontSize: '14px',
     color: 'text.primary',
     fontWeight: 400
   })
 });
-var readOnlyBadge = {
-  '& span': {
-    fontSize: '14px'
-  }
-};
-var info = _objectSpread(_objectSpread({}, baseBadge), {}, {
-  backgroundColor: '#eaf2fd !important',
+var readOnlyBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  border: 'none',
+  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+    color: 'text.primary',
+    fontWeight: 2
+  })
+});
+var readOnlyFieldBadge = _objectSpread(_objectSpread({}, readOnlyBadge), {}, {
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-    color: 'darkblue'
+    color: 'white'
+  })
+});
+var itemBadgeWithSlot = _objectSpread(_objectSpread({}, readOnlyBadge), {}, {
+  bg: '#f6f8fa !important',
+  fontWeight: 2,
+  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+    color: 'text.primary'
   })
 });
 export var badgeDeleteButton = _objectSpread(_objectSpread({}, buttons.iconButtons.base), {}, {
@@ -98,22 +122,51 @@ var warningStatusBadge = _objectSpread(_objectSpread({}, warning), dataTableBadg
 var criticalStatusBadge = _objectSpread(_objectSpread({}, danger), dataTableBadge);
 var healthyStatusBadge = _objectSpread(_objectSpread({}, success), dataTableBadge);
 var secondaryStatusBadge = _objectSpread(_objectSpread({}, secondary), dataTableBadge);
+var countBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  backgroundColor: '#455469 !important',
+  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+    color: 'white'
+  })
+});
+var countNeutral = _objectSpread({}, secondary);
+var invertedRemovableBadge = _objectSpread({}, dark);
+var removableBadge = _objectSpread(_objectSpread({}, secondary), {}, {
+  border: 'none'
+});
 export var badges = {
   baseBadge: _objectSpread({}, baseBadge),
   "default": _objectSpread({}, baseBadge),
   primary: primary,
+  countBadge: countBadge,
+  countNeutral: countNeutral,
   secondary: secondary,
   success: success,
   danger: danger,
   warning: warning,
   dark: dark,
+  info: info,
   selectedItemBadge: selectedItemBadge,
   readOnlyBadge: readOnlyBadge,
+  readOnlyFieldBadge: readOnlyFieldBadge,
   activeStatusBadge: activeStatusBadge,
   warningStatusBadge: warningStatusBadge,
   criticalStatusBadge: criticalStatusBadge,
   healthyStatusBadge: healthyStatusBadge,
   secondaryStatusBadge: secondaryStatusBadge,
   badgeDeleteButton: badgeDeleteButton,
-  info: info
+  itemBadgeWithSlot: itemBadgeWithSlot,
+  removableBadge: removableBadge,
+  invertedRemovableBadge: invertedRemovableBadge,
+  errorCalloutBadge: {
+    backgroundColor: 'white !important'
+  },
+  infoCalloutBadge: {
+    backgroundColor: 'white !important'
+  },
+  successCalloutBadge: {
+    backgroundColor: 'white !important'
+  },
+  warningCalloutBadge: {
+    backgroundColor: 'white !important'
+  }
 };

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

@@ -377,6 +377,25 @@ var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButto
   alignItems: 'center',
   justifyContent: 'center'
 });
+var badgeDeleteButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
+  height: 14,
+  p: 0,
+  width: 14,
+  border: 'none',
+  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+    backgroundColor: 'gray-100'
+  }),
+  '&.is-pressed': {
+    backgroundColor: 'gray-100',
+    borderColor: 'gray-200',
+    path: {
+      fill: 'dark'
+    }
+  },
+  '&.is-hovered': {
+    bg: 'transparent'
+  }
+}, transitions);
 var searchClearButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
   width: '20px',
   height: '20px',
@@ -514,6 +533,8 @@ var iconButtons = {
       bg: 'gray-900'
     }
   },
+  badgeDeleteButton: badgeDeleteButton,
+  invertedBadgeDeleteButton: _objectSpread({}, badgeDeleteButton),
   clearSelectionButton: _objectSpread(_objectSpread({}, searchClearButton), {}, {
     top: '15px',
     right: '1rem',

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

@@ -14,7 +14,7 @@ import skeleton from '../../../../components/Skeleton/Skeleton.styles';
 import codeView from '../codeView/codeView';
 import colors from '../colors/colors';
 import { avatar } from './avatar';
-import button, { defaultFocus } from './button';
+import { defaultFocus } from './button';
 import callout from './callout';
 import { dataTable } from './dataTable';
 import { footer } from './footer';
@@ -51,88 +51,6 @@ var fieldHelperText = {
     }
   }
 };
-var badgeFont = {
-  fontSize: '11.25px',
-  fontWeight: 2
-};
-var baseBadge = {
-  alignItems: 'center',
-  justifyContent: 'center',
-  py: '.25em',
-  px: '.4em',
-  borderRadius: '4px',
-  fontSize: '11.25px',
-  alignSelf: 'flex-start',
-  display: 'inline-flex !important',
-  width: 'fit-content',
-  '& span': _objectSpread({}, badgeFont)
-};
-export var badgeDeleteButton = _objectSpread(_objectSpread({}, button.iconButtons.base), {}, {
-  borderRadius: '50%',
-  cursor: 'pointer',
-  height: 14,
-  p: 0,
-  width: 14
-});
-export var badges = {
-  primary: _objectSpread(_objectSpread({}, baseBadge), {}, {
-    backgroundColor: '#eaf1fb !important',
-    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-      color: '#1967d2'
-    })
-  }),
-  baseBadge: _objectSpread(_objectSpread({}, baseBadge), {}, {
-    backgroundColor: '#eaf1fb !important',
-    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-      color: '#1967d2'
-    })
-  }),
-  secondary: _objectSpread(_objectSpread({}, baseBadge), {}, {
-    backgroundColor: '#f6f8fa !important',
-    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-      color: 'gray-900'
-    })
-  }),
-  success: _objectSpread(_objectSpread({}, baseBadge), {}, {
-    backgroundColor: '#d3eddf !important',
-    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-      color: 'success.dark'
-    })
-  }),
-  danger: _objectSpread(_objectSpread({}, baseBadge), {}, {
-    backgroundColor: '#f8d8d5 !important',
-    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-      color: 'red-700'
-    })
-  }),
-  warning: _objectSpread(_objectSpread({}, baseBadge), {}, {
-    backgroundColor: '#fff1da !important',
-    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-      color: 'yellow-700'
-    })
-  }),
-  dark: _objectSpread(_objectSpread({}, baseBadge), {}, {
-    backgroundColor: 'black !important',
-    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-      color: 'white'
-    })
-  }),
-  selectedItemBadge: _objectSpread(_objectSpread({}, baseBadge), {}, {
-    backgroundColor: '#eaf2fd !important',
-    paddingRight: '0px !important',
-    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-      fontSize: '14px',
-      color: 'text.primary',
-      fontWeight: 400
-    })
-  }),
-  readOnlyBadge: {
-    '& span': {
-      fontSize: '14px'
-    }
-  },
-  badgeDeleteButton: badgeDeleteButton
-};
 var modalSize = {
   xs: ['100%', '300px', '300px', '300px', '300px', '300px'],
   sm: ['100%', '500px', '500px', '500px', '500px', '500px'],

package/package.json

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