@pingux/astro 2.207.1-alpha.0 → 2.208.0-alpha.0

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

@@ -15,7 +15,6 @@ _Object$defineProperty(exports, "__esModule", {
 exports.tableBase = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _onyxTokens = require("@pingux/onyx-tokens");
-var _colors = _interopRequireDefault(require("../colors/colors"));
 var _button = require("./button");
 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; }
@@ -60,37 +59,38 @@ var container = {
 var caption = {
   backgroundColor: 'backgroundBase',
   px: 'lg',
-  color: 'text.primary',
+  color: _onyxTokens.astroTokens.color.font.base,
   borderBottom: '1px solid',
-  borderBottomColor: 'border.base',
+  borderBottomColor: _onyxTokens.astroTokens.color.common.border,
   borderTopLeftRadius: borderRadius,
   borderTopRightRadius: borderRadius
 };
 var row = {
   borderBottom: '1px solid',
-  borderBottomColor: 'border.base',
+  borderBottomColor: _onyxTokens.astroTokens.color.common.border,
   '&.is-focused': _objectSpread({}, defaultFocus),
   '&.is-hovered': {
-    bg: 'background.hover',
+    bg: _onyxTokens.astroTokens.color['table-row'].hover.bg,
     '& > td:last-of-type': {
-      bg: 'background.hover'
+      bg: _onyxTokens.astroTokens.color['table-row'].hover.bg
     }
   },
   '&:nth-of-type(odd)': {
-    bg: 'backgroundBase',
+    bg: _onyxTokens.astroTokens.color.common.bg.base,
     '&.is-hovered': {
-      bg: 'background.hover'
+      bg: _onyxTokens.astroTokens.color['table-row'].hover.bg
     },
     '& > td:last-of-type': {
-      bg: 'backgroundBase'
+      bg: _onyxTokens.astroTokens.color.common.bg.base
     }
   }
 };
 var thead = {
-  borderBottomColor: 'border.base',
+  borderBottomColor: _onyxTokens.astroTokens.color.common.border,
   backgroundColor: 'backgroundBase',
   '&.is-sticky': {
-    boxShadow: "0 1px 0 ".concat(_colors["default"].border.base)
+    border: 'none',
+    boxShadow: "0 1px 0 ".concat(_onyxTokens.astroTokens.color.common.border)
   }
 };
 var resizer = {
@@ -99,17 +99,13 @@ var resizer = {
 var head = {
   px: 'lg',
   py: 'sm',
-  fontSize: 'md',
-  fontWeight: '2',
-  color: 'text.primary',
-  lineHeight: 'body',
   '&.is-focused': _objectSpread({}, defaultFocus),
   '&:last-of-type': {
     backgroundColor: 'backgroundBase'
   }
 };
 var tbody = {
-  borderTopColor: 'border.base',
+  borderTopColor: _onyxTokens.astroTokens.color.common.border,
   borderBottom: 'unset',
   backgroundColor: 'backgroundBase',
   borderBottomLeftRadius: borderRadius,
@@ -117,7 +113,7 @@ var tbody = {
 };
 var data = _objectSpread(_objectSpread({}, head), {}, {
   py: 'md',
-  fontWeight: '1',
+  fontWeight: '0',
   '&:last-of-type': {
     backgroundColor: 'backgroundBase',
     zIndex: 1

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

@@ -54,6 +54,12 @@ export declare const text: {
         fontWeight: number;
         fontFamily: string;
     };
+    headText: {
+        fontSize: string;
+        fontWeight: string;
+        color: any;
+        lineHeight: string;
+    };
     label: {
         fontSize: any;
     };

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

@@ -262,6 +262,12 @@ var text = exports.text = _objectSpread(_objectSpread({
   },
   stepperTabContent: stepperTabContent,
   stepperTabContentHeader: stepperTabContentHeader,
+  headText: {
+    fontSize: 'md',
+    fontWeight: '2',
+    color: _onyxTokens.astroTokens.color.font.base,
+    lineHeight: 'xs'
+  },
   label: label,
   linkSelectFieldLabel: _objectSpread(_objectSpread({}, label), {}, {
     color: _onyxTokens.astroTokens.color.font.link

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

@@ -2130,50 +2130,47 @@ declare const _default: {
         caption: {
             backgroundColor: string;
             px: string;
-            color: string;
+            color: any;
             borderBottom: string;
-            borderBottomColor: string;
+            borderBottomColor: any;
             borderTopLeftRadius: string;
             borderTopRightRadius: string;
         };
         row: {
             borderBottom: string;
-            borderBottomColor: string;
+            borderBottomColor: any;
             '&.is-focused': {
                 outlineOffset: string;
                 outline: string;
                 outlineColor: string;
             };
             '&.is-hovered': {
-                bg: string;
+                bg: any;
                 '& > td:last-of-type': {
-                    bg: string;
+                    bg: any;
                 };
             };
             '&:nth-of-type(odd)': {
-                bg: string;
+                bg: any;
                 '&.is-hovered': {
-                    bg: string;
+                    bg: any;
                 };
                 '& > td:last-of-type': {
-                    bg: string;
+                    bg: any;
                 };
             };
         };
         thead: {
-            borderBottomColor: string;
+            borderBottomColor: any;
             backgroundColor: string;
             '&.is-sticky': {
+                border: string;
                 boxShadow: string;
             };
         };
         head: {
             px: string;
             py: string;
-            fontSize: string;
-            fontWeight: string;
-            color: string;
-            lineHeight: string;
             '&.is-focused': {
                 outlineOffset: string;
                 outline: string;
@@ -2184,7 +2181,7 @@ declare const _default: {
             };
         };
         tbody: {
-            borderTopColor: string;
+            borderTopColor: any;
             borderBottom: string;
             backgroundColor: string;
             borderBottomLeftRadius: string;
@@ -2198,9 +2195,6 @@ declare const _default: {
                 zIndex: number;
             };
             px: string;
-            fontSize: string;
-            color: string;
-            lineHeight: string;
             '&.is-focused': {
                 outlineOffset: string;
                 outline: string;

package/lib/components/Badge/Badge.styles.js

@@ -258,6 +258,13 @@ var dataTable = {
     borderColor: 'success.dark'
   })
 };
+var tableBaseBadge = {
+  active: _objectSpread({}, infoCalloutBadge),
+  warning: _objectSpread({}, warningStatusBadge),
+  critical: _objectSpread({}, criticalStatusBadge),
+  healthy: _objectSpread({}, healthyStatusBadge),
+  secondary: _objectSpread({}, secondaryStatusBadge)
+};
 export default {
   activeStatusBadge: activeStatusBadge,
   badgeDeleteButton: badgeDeleteButton,
@@ -284,5 +291,6 @@ export default {
   secondaryStatusBadge: secondaryStatusBadge,
   removableBadge: removableBadge,
   invertedRemovableBadge: invertedRemovableBadge,
-  dataTable: dataTable
+  dataTable: dataTable,
+  tableBaseBadge: tableBaseBadge
 };

package/lib/components/Pagination/Pagination.js

@@ -61,12 +61,14 @@ var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
     icon: ChevronLeftIcon,
     title: {
       name: 'Previous'
-    }
+    },
+    size: "md"
   }, previousButtonIconProps))), ___EmotionJSX(IconButton, nextButtonProps, ___EmotionJSX(Icon, _extends({
     icon: ChevronRightIcon,
     title: {
       name: 'Next'
-    }
+    },
+    size: "md"
   }, nextButtonIconProps))))));
 });
 export default Pagination;

package/lib/components/Pagination/Pagination.styles.js

@@ -6,7 +6,7 @@ var container = {
   flexGrow: 1
 };
 var iconWrapper = {
-  ml: 'md'
+  ml: 'lg'
 };
 var wrapper = {
   ml: 'auto',

package/lib/components/TableBase/TableBase.js

@@ -328,7 +328,10 @@ function TableColumnHeader(props) {
     isRow: true,
     gap: "sm",
     alignItems: "center"
-  }, ___EmotionJSX(Text, null, column.rendered), allowsSorting && sortIcon), allowsResizing && ___EmotionJSX(Resizer, {
+  }, ___EmotionJSX(Text, {
+    as: "h4",
+    variant: "headText"
+  }, column.rendered), allowsSorting && sortIcon), allowsResizing && ___EmotionJSX(Resizer, {
     column: column,
     layoutState: layoutState,
     onResizeStart: onResizeStart,

package/lib/components/TableBase/TableBase.stories.js

@@ -79,11 +79,11 @@ var objects = [{
   total_grant: '75,000'
 }];
 var statusVariant = {
-  Pending: 'warningStatusBadge',
-  Failed: 'criticalStatusBadge',
-  Rejected: 'criticalStatusBadge',
-  Active: 'healthyStatusBadge',
-  Inactive: 'secondaryStatusBadge'
+  Pending: 'tableBaseBadge.secondary',
+  Failed: 'tableBaseBadge.critical',
+  Rejected: 'tableBaseBadge.critical',
+  Active: 'tableBaseBadge.healthy',
+  Inactive: 'tableBaseBadge.secondary'
 };
 export var Default = function Default() {
   return ___EmotionJSX(Card, {
@@ -246,11 +246,11 @@ export var DynamicWithSorting = function DynamicWithSorting() {
   }, {
     name: 'Population',
     key: 'population',
-    isSortable: true
+    isSortable: false
   }, {
     name: 'Continent',
     key: 'continent',
-    isSortable: true
+    isSortable: false
   }];
   var rows = [{
     id: 1,
@@ -357,7 +357,7 @@ export var DynamicWithSorting = function DynamicWithSorting() {
   }, function (column) {
     return ___EmotionJSX(Column, {
       minWidth: 155,
-      allowsSorting: true
+      allowsSorting: column.isSortable
     }, column.name);
   }), ___EmotionJSX(TBody, {
     items: list.items,

package/lib/styles/themeOverrides/nextGenDarkMode/variants/badges.js

@@ -103,6 +103,42 @@ var itemBadgeWithSlot = _objectSpread(_objectSpread({}, selectedItemBadge), {},
     }
   }
 });
+var tableBaseBadgeSpanStyle = {
+  fontSize: '11.25px',
+  lineHeight: '1'
+};
+var tableBaseBadge = {
+  active: {
+    backgroundColor: "".concat(astroTokensDark.color.blue[500], " !important"),
+    '& > span': _objectSpread(_objectSpread({}, tableBaseBadgeSpanStyle), {}, {
+      color: astroTokensDark.color.black
+    })
+  },
+  warning: {
+    backgroundColor: "".concat(astroTokensDark.color.yellow[500], " !important"),
+    '& > span': _objectSpread(_objectSpread({}, tableBaseBadgeSpanStyle), {}, {
+      color: astroTokensDark.color.black
+    })
+  },
+  critical: {
+    backgroundColor: "".concat(astroTokensDark.color.red[500], " !important"),
+    '& > span': _objectSpread(_objectSpread({}, tableBaseBadgeSpanStyle), {}, {
+      color: astroTokensDark.color.black
+    })
+  },
+  healthy: {
+    backgroundColor: "".concat(astroTokensDark.color.green[500], " !important"),
+    '& > span': _objectSpread(_objectSpread({}, tableBaseBadgeSpanStyle), {}, {
+      color: astroTokensDark.color.black
+    })
+  },
+  secondary: {
+    backgroundColor: "".concat(astroTokensDark.color.gray[500], " !important"),
+    '& > span': _objectSpread(_objectSpread({}, tableBaseBadgeSpanStyle), {}, {
+      color: astroTokensDark.color.black
+    })
+  }
+};
 var badges = {
   baseBadge: baseBadge,
   primary: primary,
@@ -147,6 +183,7 @@ var badges = {
     '& span': {
       color: 'font.base'
     }
-  }
+  },
+  tableBaseBadge: tableBaseBadge
 };
 export default badges;

package/lib/styles/themeOverrides/nextGenDarkMode/variants/cards.js

@@ -1,3 +1,4 @@
+import { astroTokensDark } from '@pingux/onyx-tokens';
 var cards = {
   dark: {
     border: '1px solid',
@@ -24,6 +25,9 @@ var cards = {
   },
   activeCard: {
     borderColor: 'border.attachment'
+  },
+  tableWrapper: {
+    borderColor: astroTokensDark.color.common.border
   }
 };
 export default cards;

package/lib/styles/themeOverrides/nextGenDarkMode/variants/text.js

@@ -49,6 +49,9 @@ export var text = {
   pageHeaderTitle: {
     color: astroTokensDark.color.gray[100]
   },
+  headText: {
+    color: astroTokensDark.color.font.base
+  },
   linkSelectFieldLabel: {
     color: astroTokensDark.color.font.link
   },

package/lib/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -1,5 +1,4 @@
 import { astroTokensDark } from '@pingux/onyx-tokens';
-import { colors } from '../colors';
 import { avatar } from './avatar';
 import callout from './callout';
 import { footer } from './footer';
@@ -254,18 +253,41 @@ export default {
       }
     },
     caption: {
-      color: 'text.secondary'
+      color: astroTokensDark.color.font.base,
+      borderBottomColor: astroTokensDark.color.common.border
     },
     thead: {
+      borderBottomColor: astroTokensDark.color.common.border,
       '&.is-sticky': {
-        boxShadow: "0 1px 0 ".concat(colors.border.base)
+        boxShadow: "0 1px 0 ".concat(astroTokensDark.color.common.border)
+      }
+    },
+    tbody: {
+      borderTopColor: astroTokensDark.color.common.border
+    },
+    row: {
+      borderBottomColor: astroTokensDark.color.common.border,
+      '&.is-hovered': {
+        bg: astroTokensDark.color['table-row'].hover.bg,
+        '& > td:last-of-type': {
+          bg: astroTokensDark.color['table-row'].hover.bg
+        }
+      },
+      '&:nth-of-type(odd)': {
+        bg: astroTokensDark.color.common.bg.base,
+        '&.is-hovered': {
+          bg: astroTokensDark.color['table-row'].hover.bg
+        },
+        '& > td:last-of-type': {
+          bg: astroTokensDark.color.common.bg.base
+        }
       }
     },
     head: {
-      color: 'text.secondary'
+      color: astroTokensDark.color.font.base
     },
     data: {
-      color: 'text.secondary'
+      color: astroTokensDark.color.font.base
     },
     resizer: {
       backgroundColor: astroTokensDark.color.common['border-dark']

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

@@ -54,7 +54,7 @@ var nextGenTheme = {
     codeView: 'Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace'
   },
   shadows: {
-    standard: _concatInstanceProperty(_context = "0 ".concat(astroTokens.spacing.card.shadow.y, " ")).call(_context, astroTokens.spacing.card.shadow.blur, " 0 rgba(0, 0, 0, 0.13)")
+    standard: _concatInstanceProperty(_context = "0 ".concat(astroTokens.spacing.card.shadow.y, "px ")).call(_context, astroTokens.spacing.card.shadow.blur, "px 0 rgba(0, 0, 0, 0.13)")
   },
   sizes: sizes,
   badges: badges,

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

@@ -145,6 +145,46 @@ var healthyStatusBadge = _objectSpread({
 var secondaryStatusBadge = _objectSpread({
   border: 'none'
 }, secondary);
+var tableBaseBadgeBaseStyle = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  minWidth: '100px',
+  border: 'none'
+});
+var tableBaseBadgeSpanStyle = {
+  fontSize: '11.25px',
+  lineHeight: '1'
+};
+var tableBaseBadge = {
+  active: _objectSpread(_objectSpread({}, tableBaseBadgeBaseStyle), {}, {
+    backgroundColor: "".concat(astroTokens.color.blue[100], " !important"),
+    '& > span': _objectSpread(_objectSpread({}, tableBaseBadgeSpanStyle), {}, {
+      color: astroTokens.color.blue[600]
+    })
+  }),
+  warning: _objectSpread(_objectSpread({}, tableBaseBadgeBaseStyle), {}, {
+    backgroundColor: "".concat(astroTokens.color.yellow[100], " !important"),
+    '& > span': _objectSpread(_objectSpread({}, tableBaseBadgeSpanStyle), {}, {
+      color: astroTokens.color.blue[600]
+    })
+  }),
+  critical: _objectSpread(_objectSpread({}, tableBaseBadgeBaseStyle), {}, {
+    backgroundColor: "".concat(astroTokens.color.red[100], " !important"),
+    '& > span': _objectSpread(_objectSpread({}, tableBaseBadgeSpanStyle), {}, {
+      color: astroTokens.color.red[800]
+    })
+  }),
+  healthy: _objectSpread(_objectSpread({}, tableBaseBadgeBaseStyle), {}, {
+    backgroundColor: "".concat(astroTokens.color.green[100], " !important"),
+    '& > span': _objectSpread(_objectSpread({}, tableBaseBadgeSpanStyle), {}, {
+      color: astroTokens.color.green[800]
+    })
+  }),
+  secondary: _objectSpread(_objectSpread({}, tableBaseBadgeBaseStyle), {}, {
+    backgroundColor: "".concat(astroTokens.color.gray[100], " !important"),
+    '& > span': _objectSpread(_objectSpread({}, tableBaseBadgeSpanStyle), {}, {
+      color: astroTokens.color.gray[800]
+    })
+  })
+};
 var countBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#455469 !important',
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
@@ -198,5 +238,6 @@ export var badges = {
   },
   warningCalloutBadge: {
     backgroundColor: 'white !important'
-  }
+  },
+  tableBaseBadge: tableBaseBadge
 };

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

@@ -82,7 +82,9 @@ var suggestionRow = _objectSpread(_objectSpread({}, baseSuggestion), {}, {
 var suggestionColumn = _objectSpread(_objectSpread({}, baseSuggestion), {}, {
   display: 'flex'
 });
-var tableWrapper = _objectSpread({}, container);
+var tableWrapper = _objectSpread(_objectSpread({}, container), {}, {
+  boxShadow: 'standard'
+});
 export default {
   interactive: interactive,
   dark: dark,

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

@@ -10,7 +10,6 @@ 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 colors from '../colors/colors';
 import { defaultFocus as baseFocus } from './button';
 var borderRadius = '16px';
 var defaultFocus = _objectSpread(_objectSpread({}, baseFocus), {}, {
@@ -53,37 +52,38 @@ var container = {
 var caption = {
   backgroundColor: 'backgroundBase',
   px: 'lg',
-  color: 'text.primary',
+  color: astroTokens.color.font.base,
   borderBottom: '1px solid',
-  borderBottomColor: 'border.base',
+  borderBottomColor: astroTokens.color.common.border,
   borderTopLeftRadius: borderRadius,
   borderTopRightRadius: borderRadius
 };
 var row = {
   borderBottom: '1px solid',
-  borderBottomColor: 'border.base',
+  borderBottomColor: astroTokens.color.common.border,
   '&.is-focused': _objectSpread({}, defaultFocus),
   '&.is-hovered': {
-    bg: 'background.hover',
+    bg: astroTokens.color['table-row'].hover.bg,
     '& > td:last-of-type': {
-      bg: 'background.hover'
+      bg: astroTokens.color['table-row'].hover.bg
     }
   },
   '&:nth-of-type(odd)': {
-    bg: 'backgroundBase',
+    bg: astroTokens.color.common.bg.base,
     '&.is-hovered': {
-      bg: 'background.hover'
+      bg: astroTokens.color['table-row'].hover.bg
     },
     '& > td:last-of-type': {
-      bg: 'backgroundBase'
+      bg: astroTokens.color.common.bg.base
     }
   }
 };
 var thead = {
-  borderBottomColor: 'border.base',
+  borderBottomColor: astroTokens.color.common.border,
   backgroundColor: 'backgroundBase',
   '&.is-sticky': {
-    boxShadow: "0 1px 0 ".concat(colors.border.base)
+    border: 'none',
+    boxShadow: "0 1px 0 ".concat(astroTokens.color.common.border)
   }
 };
 var resizer = {
@@ -92,17 +92,13 @@ var resizer = {
 var head = {
   px: 'lg',
   py: 'sm',
-  fontSize: 'md',
-  fontWeight: '2',
-  color: 'text.primary',
-  lineHeight: 'body',
   '&.is-focused': _objectSpread({}, defaultFocus),
   '&:last-of-type': {
     backgroundColor: 'backgroundBase'
   }
 };
 var tbody = {
-  borderTopColor: 'border.base',
+  borderTopColor: astroTokens.color.common.border,
   borderBottom: 'unset',
   backgroundColor: 'backgroundBase',
   borderBottomLeftRadius: borderRadius,
@@ -110,7 +106,7 @@ var tbody = {
 };
 var data = _objectSpread(_objectSpread({}, head), {}, {
   py: 'md',
-  fontWeight: '1',
+  fontWeight: '0',
   '&:last-of-type': {
     backgroundColor: 'backgroundBase',
     zIndex: 1

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

@@ -255,6 +255,12 @@ export var text = _objectSpread(_objectSpread({
   },
   stepperTabContent: stepperTabContent,
   stepperTabContentHeader: stepperTabContentHeader,
+  headText: {
+    fontSize: 'md',
+    fontWeight: '2',
+    color: astroTokens.color.font.base,
+    lineHeight: 'xs'
+  },
   label: label,
   linkSelectFieldLabel: _objectSpread(_objectSpread({}, label), {}, {
     color: astroTokens.color.font.link

package/package.json

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