@pingux/astro 2.185.0-alpha.0 → 2.187.0-alpha.0

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

@@ -38,7 +38,7 @@ var badgeIconStyle = {
 var baseBadge = _objectSpread({
   alignItems: 'center',
   justifyContent: 'center',
-  padding: '.25em .4em',
+  padding: '2.81px 4px',
   borderRadius: '4px',
   fontSize: 'unset',
   alignSelf: 'flex-start',
@@ -48,31 +48,45 @@ var baseBadge = _objectSpread({
 }, badgeIconStyle);
 var primary = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#EAF2FD !important',
-  color: astroTokens.color.blue[600]
+  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+    color: astroTokens.color.blue[600]
+  })
 });
 var secondary = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#f6f8fa !important',
-  color: astroTokens.color.gray[900]
+  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+    color: astroTokens.color.gray[900]
+  })
 });
 var success = _objectSpread(_objectSpread({}, baseBadge), {}, {
-  backgroundColor: '#D3EDDF !important',
-  color: 'success.dark'
+  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+    color: astroTokens.color.green[800]
+  }),
+  backgroundColor: '#D3EDDF !important'
 });
 var danger = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#F8D8D5 !important',
-  color: astroTokens.color.red[700]
+  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+    color: astroTokens.color.red[700]
+  })
 });
 var warning = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#FFF1DA !important',
-  color: astroTokens.color.yellow[800]
+  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+    color: astroTokens.color.yellow[800]
+  })
 });
 var dark = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: 'black !important',
-  color: 'white'
+  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+    color: 'white'
+  })
 });
 var info = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#EAF2FD !important',
-  color: 'darkblue'
+  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+    color: 'darkblue'
+  })
 });
 var selectedItemBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#eaf2fd !important',
@@ -116,11 +130,21 @@ var dataTableBadge = {
   minWidth: '100px',
   border: 'none'
 };
-var activeStatusBadge = _objectSpread(_objectSpread({}, primary), dataTableBadge);
-var warningStatusBadge = _objectSpread(_objectSpread({}, warning), dataTableBadge);
-var criticalStatusBadge = _objectSpread(_objectSpread({}, danger), dataTableBadge);
-var healthyStatusBadge = _objectSpread(_objectSpread({}, success), dataTableBadge);
-var secondaryStatusBadge = _objectSpread(_objectSpread({}, secondary), dataTableBadge);
+var activeStatusBadge = _objectSpread({
+  border: 'none'
+}, primary);
+var warningStatusBadge = _objectSpread({
+  border: 'none'
+}, warning);
+var criticalStatusBadge = _objectSpread({
+  border: 'none'
+}, danger);
+var healthyStatusBadge = _objectSpread({
+  border: 'none'
+}, success);
+var secondaryStatusBadge = _objectSpread({
+  border: 'none'
+}, secondary);
 var countBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#455469 !important',
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
@@ -133,6 +157,7 @@ var removableBadge = _objectSpread(_objectSpread({}, secondary), {}, {
   border: 'none'
 });
 export var badges = {
+  dataTableBadge: dataTableBadge,
   baseBadge: _objectSpread({}, baseBadge),
   "default": _objectSpread({}, baseBadge),
   primary: primary,
@@ -145,6 +170,7 @@ export var badges = {
   dark: dark,
   info: info,
   selectedItemBadge: selectedItemBadge,
+  selected: activeStatusBadge,
   readOnlyBadge: readOnlyBadge,
   readOnlyFieldBadge: readOnlyFieldBadge,
   activeStatusBadge: activeStatusBadge,

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

@@ -3,6 +3,8 @@ var fontSizes = astroTokens["default"]['font-size'];
 export var label = {
   color: 'text.primary',
   fontSize: fontSizes.label,
+  mb: 'sm',
+  fontWeight: 'body',
   '&.is-float-label': {
     fontSize: fontSizes.label,
     fontWeight: 1,

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

@@ -1,5 +1,7 @@
 import { astroTokens } from '@pingux/onyx-tokens';
 var container = {
+  minWidth: '150px',
+  boxShadow: '0px 8px 16px 0px rgba(0, 0, 0, 0.176)',
   transition: 'opacity 200ms ease',
   '&.animate': {
     opacity: 0
@@ -27,6 +29,7 @@ var container = {
 };
 var arrow = {
   color: 'white',
+  fontSize: 'sm',
   '&:before': {
     content: '""',
     position: 'absolute',

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

@@ -41,7 +41,7 @@ import { menuTab, tab, tabs } from './tabs';
 import tooltip from './tooltip';
 var fieldHelperText = {
   title: {
-    fontSize: 'sm',
+    fontSize: 'small',
     pt: '0px !important',
     mt: '.25rem',
     '&.is-default': {
@@ -164,7 +164,7 @@ var listBox = {
       zIndex: 1
     },
     '&.is-selected': {
-      color: 'text.primary',
+      color: 'black',
       bg: 'lightblue',
       pl: '.75rem',
       borderRadius: '4px',
@@ -194,17 +194,20 @@ var listBox = {
   },
   sectionTitle: {
     color: 'font.light',
-    fontWeight: '1',
+    fontWeight: '0',
     fontSize: 'tiny',
     lineHeight: 'xs',
     textTransform: 'uppercase',
     letterSpacing: '1px',
-    ml: 'md'
+    pl: 'xs',
+    ml: 'sm',
+    py: 'sm'
   }
 };
 var separator = {
   base: {
     bg: 'border.base',
+    my: 'sm',
     '&.is-vertical': {
       m: '0'
     }

package/package.json

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