@pingux/astro 2.129.0-alpha.1 → 2.129.0-alpha.3

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

@@ -124,6 +124,28 @@ var _default = {
         boxShadow: '0 0 0 3px inset #1a73e8'
       }
     }
+  },
+  table: {
+    caption: {
+      color: 'text.secondary'
+    },
+    head: {
+      color: 'text.secondary'
+    },
+    data: {
+      color: 'text.secondary'
+    }
+  },
+  tableBase: {
+    caption: {
+      color: 'text.secondary'
+    },
+    head: {
+      color: 'text.secondary'
+    },
+    data: {
+      color: 'text.secondary'
+    }
   }
 };
 exports["default"] = _default;

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

@@ -55,6 +55,7 @@ declare const colors: {
         secondary: string;
         card: string;
         suggestion: string;
+        hover: string;
     };
     iconWrapper: {
         wrapper: {

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

@@ -109,7 +109,8 @@ var background = {
   base: 'white',
   secondary: _colorTokens.nextGenColors['gray-100'],
   card: _colorTokens.nextGenColors['blue-100'],
-  suggestion: '#ecf0f5'
+  suggestion: '#ecf0f5',
+  hover: _colorTokens.nextGenColors['gray-100']
 };
 var card = {
   blue: _colorTokens.nextGenColors['blue-100'],

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

@@ -5,7 +5,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.nextGenOnlyComponents = exports["default"] = exports.componentSpecificNextGenBlacklist = exports.astroBlacklistStory = void 0;
-var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'RockerButtonGroup', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'TooltipTrigger', 'ListViewItem', 'Pagination'];
+var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'RockerButtonGroup', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'TooltipTrigger', 'ListViewItem', 'Pagination', 'Table', 'TableBase'];
 var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Badge: ['Status Badge Variants', 'Badge With Left Slot And Icon', 'Callout Badges', 'Removable'],

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

@@ -43,6 +43,7 @@ declare const _default: {
             secondary: string;
             card: string;
             suggestion: string;
+            hover: string;
         };
         iconWrapper: {
             wrapper: {
@@ -2543,9 +2544,9 @@ declare const _default: {
         };
         container: {
             p: string;
+            borderColor: string;
             boxShadow: string;
             border: string;
-            borderColor: string;
             borderRadius: string;
             display: string;
             color: string;
@@ -2591,6 +2592,19 @@ declare const _default: {
                 backgroundColor: string;
             };
         };
+        tableWrapper: {
+            overflowY: string;
+            p: string;
+            borderColor: string;
+            boxShadow: string;
+            border: string;
+            borderRadius: string;
+            display: string;
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+            flex: string;
+        };
     };
     variants: {
         attachment: {
@@ -3714,6 +3728,137 @@ declare const _default: {
                 color: string;
             };
         };
+        table: {
+            container: {
+                overflow: string;
+            };
+            caption: {
+                px: string;
+                color: string;
+                borderBottom: string;
+                borderBottomColor: string;
+            };
+            head: {
+                px: string;
+                py: string;
+                fontSize: string;
+                fontWeight: string;
+                color: string;
+                lineHeight: string;
+            };
+            body: {
+                borderTopColor: string;
+                borderBottom: string;
+                backgroundColor: string;
+                borderBottomLeftRadius: string;
+                borderBottomRightRadius: string;
+                '&& > tr:not(:last-child)': {
+                    borderBottom: string;
+                    borderBottomColor: string;
+                };
+                '&& > tr:nth-of-type(odd) ': {
+                    backgroundColor: string;
+                };
+                '&& > tr:last-child': {
+                    borderBottomLeftRadius: string;
+                    borderBottomRightRadius: string;
+                };
+            };
+            data: {
+                py: string;
+                fontWeight: string;
+                px: string;
+                fontSize: string;
+                color: string;
+                lineHeight: string;
+            };
+        };
+        tableBase: {
+            caption: {
+                backgroundColor: string;
+                px: string;
+                color: string;
+                borderBottom: string;
+                borderBottomColor: string;
+                borderTopLeftRadius: string;
+                borderTopRightRadius: string;
+            };
+            row: {
+                borderBottom: string;
+                borderBottomColor: string;
+                '&.is-focused': {
+                    outlineOffset: string;
+                    outline: string;
+                    outlineColor: string;
+                };
+                '&.is-hovered': {
+                    bg: string;
+                };
+                '&:nth-of-type(odd)': {
+                    bg: string;
+                    '&.is-hovered': {
+                        bg: string;
+                    };
+                };
+            };
+            thead: {
+                backgroundColor: string;
+                '&:not(.has-caption)': {
+                    '& > tr:first-child': {
+                        borderTopLeftRadius: string;
+                        borderTopRightRadius: string;
+                        '& > th:first-of-type': {
+                            borderTopLeftRadius: string;
+                        };
+                        '& > th:last-of-type': {
+                            borderTopRightRadius: string;
+                        };
+                    };
+                };
+            };
+            head: {
+                px: string;
+                py: string;
+                fontSize: string;
+                fontWeight: string;
+                color: string;
+                lineHeight: string;
+                '&.is-focused': {
+                    outlineOffset: string;
+                    outline: string;
+                    outlineColor: string;
+                };
+            };
+            tbody: {
+                borderTopColor: string;
+                borderBottom: string;
+                backgroundColor: string;
+                '& > tr:last-child': {
+                    borderBottom: string;
+                    borderBottomLeftRadius: string;
+                    borderBottomRightRadius: string;
+                    '& > td:first-of-type': {
+                        borderBottomLeftRadius: string;
+                    };
+                    '& > td:last-of-type': {
+                        borderBottomRightRadius: string;
+                    };
+                };
+            };
+            data: {
+                py: string;
+                fontWeight: string;
+                px: string;
+                fontSize: string;
+                color: string;
+                lineHeight: string;
+                '&.is-focused': {
+                    outlineOffset: string;
+                    outline: string;
+                    outlineColor: string;
+                };
+            };
+        };
     };
     images: {
         avatar: {};

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

@@ -62,9 +62,9 @@ declare const _default: {
     };
     container: {
         p: string;
+        borderColor: string;
         boxShadow: string;
         border: string;
-        borderColor: string;
         borderRadius: string;
         display: string;
         color: string;
@@ -110,5 +110,18 @@ declare const _default: {
             backgroundColor: string;
         };
     };
+    tableWrapper: {
+        overflowY: string;
+        p: string;
+        borderColor: string;
+        boxShadow: string;
+        border: string;
+        borderRadius: string;
+        display: string;
+        color: string;
+        fontSize: string;
+        fontWeight: number;
+        flex: string;
+    };
 };
 export default _default;

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

@@ -36,7 +36,8 @@ var interactive = {
   }
 };
 var container = _objectSpread(_objectSpread({}, _flatInstanceProperty(_Card)), {}, {
-  p: 'lg'
+  p: 'lg',
+  borderColor: 'border.base'
 });
 var dark = _objectSpread(_objectSpread({}, _flatInstanceProperty(_Card)), {}, {
   border: 'none',
@@ -81,6 +82,9 @@ var suggestionRow = _objectSpread(_objectSpread({}, baseSuggestion), {}, {
 var suggestionColumn = _objectSpread(_objectSpread({}, baseSuggestion), {}, {
   display: 'flex'
 });
+var tableWrapper = _objectSpread(_objectSpread({}, container), {}, {
+  overflowY: 'hidden'
+});
 var _default = {
   interactive: interactive,
   dark: dark,
@@ -88,6 +92,7 @@ var _default = {
   activeCard: activeCard,
   container: container,
   suggestionColumn: suggestionColumn,
-  suggestionRow: suggestionRow
+  suggestionRow: suggestionRow,
+  tableWrapper: tableWrapper
 };
 exports["default"] = _default;

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

@@ -0,0 +1,45 @@
+export declare const table: {
+    container: {
+        overflow: string;
+    };
+    caption: {
+        px: string;
+        color: string;
+        borderBottom: string;
+        borderBottomColor: string;
+    };
+    head: {
+        px: string;
+        py: string;
+        fontSize: string;
+        fontWeight: string;
+        color: string;
+        lineHeight: string;
+    };
+    body: {
+        borderTopColor: string;
+        borderBottom: string;
+        backgroundColor: string;
+        borderBottomLeftRadius: string;
+        borderBottomRightRadius: string;
+        '&& > tr:not(:last-child)': {
+            borderBottom: string;
+            borderBottomColor: string;
+        };
+        '&& > tr:nth-of-type(odd) ': {
+            backgroundColor: string;
+        };
+        '&& > tr:last-child': {
+            borderBottomLeftRadius: string;
+            borderBottomRightRadius: string;
+        };
+    };
+    data: {
+        py: string;
+        fontWeight: string;
+        px: string;
+        fontSize: string;
+        color: string;
+        lineHeight: string;
+    };
+};

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

@@ -0,0 +1,65 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+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.table = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+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) { (0, _defineProperty2["default"])(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; }
+var container = {
+  overflow: 'hidden'
+};
+var caption = {
+  px: 'lg',
+  color: 'text.primary',
+  borderBottom: '1px solid',
+  borderBottomColor: 'border.base'
+};
+var head = {
+  px: 'lg',
+  py: 'sm',
+  fontSize: 'md',
+  fontWeight: '2',
+  color: 'text.primary',
+  lineHeight: 'body'
+};
+var body = {
+  borderTopColor: 'border.base',
+  borderBottom: 'unset',
+  backgroundColor: 'background.base',
+  borderBottomLeftRadius: '16px',
+  borderBottomRightRadius: '16px',
+  '&& > tr:not(:last-child)': {
+    borderBottom: '1px solid',
+    borderBottomColor: 'border.base'
+  },
+  '&& > tr:nth-of-type(odd) ': {
+    backgroundColor: 'background.base'
+  },
+  '&& > tr:last-child': {
+    borderBottomLeftRadius: '16px',
+    borderBottomRightRadius: '16px'
+  }
+};
+var data = _objectSpread(_objectSpread({}, head), {}, {
+  py: 'md',
+  fontWeight: '1'
+});
+var table = {
+  container: container,
+  caption: caption,
+  head: head,
+  body: body,
+  data: data
+};
+exports.table = table;

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

@@ -0,0 +1,86 @@
+export declare const tableBase: {
+    caption: {
+        backgroundColor: string;
+        px: string;
+        color: string;
+        borderBottom: string;
+        borderBottomColor: string;
+        borderTopLeftRadius: string;
+        borderTopRightRadius: string;
+    };
+    row: {
+        borderBottom: string;
+        borderBottomColor: string;
+        '&.is-focused': {
+            outlineOffset: string;
+            outline: string;
+            outlineColor: string;
+        };
+        '&.is-hovered': {
+            bg: string;
+        };
+        '&:nth-of-type(odd)': {
+            bg: string;
+            '&.is-hovered': {
+                bg: string;
+            };
+        };
+    };
+    thead: {
+        backgroundColor: string;
+        '&:not(.has-caption)': {
+            '& > tr:first-child': {
+                borderTopLeftRadius: string;
+                borderTopRightRadius: string;
+                '& > th:first-of-type': {
+                    borderTopLeftRadius: string;
+                };
+                '& > th:last-of-type': {
+                    borderTopRightRadius: string;
+                };
+            };
+        };
+    };
+    head: {
+        px: string;
+        py: string;
+        fontSize: string;
+        fontWeight: string;
+        color: string;
+        lineHeight: string;
+        '&.is-focused': {
+            outlineOffset: string;
+            outline: string;
+            outlineColor: string;
+        };
+    };
+    tbody: {
+        borderTopColor: string;
+        borderBottom: string;
+        backgroundColor: string;
+        '& > tr:last-child': {
+            borderBottom: string;
+            borderBottomLeftRadius: string;
+            borderBottomRightRadius: string;
+            '& > td:first-of-type': {
+                borderBottomLeftRadius: string;
+            };
+            '& > td:last-of-type': {
+                borderBottomRightRadius: string;
+            };
+        };
+    };
+    data: {
+        py: string;
+        fontWeight: string;
+        px: string;
+        fontSize: string;
+        color: string;
+        lineHeight: string;
+        '&.is-focused': {
+            outlineOffset: string;
+            outline: string;
+            outlineColor: string;
+        };
+    };
+};

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

@@ -0,0 +1,99 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+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.tableBase = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _button = require("./button");
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+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) { (0, _defineProperty2["default"])(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; }
+var borderRadius = '16px';
+var defaultFocus = _objectSpread(_objectSpread({}, _button.defaultFocus), {}, {
+  outlineOffset: '-2px'
+});
+var caption = {
+  backgroundColor: 'background.base',
+  px: 'lg',
+  color: 'text.primary',
+  borderBottom: '1px solid',
+  borderBottomColor: 'border.base',
+  borderTopLeftRadius: borderRadius,
+  borderTopRightRadius: borderRadius
+};
+var row = {
+  borderBottom: '1px solid',
+  borderBottomColor: 'border.base',
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': {
+    bg: 'background.hover'
+  },
+  '&:nth-of-type(odd)': {
+    bg: 'background.base',
+    '&.is-hovered': {
+      bg: 'background.hover'
+    }
+  }
+};
+var thead = {
+  backgroundColor: 'background.base',
+  '&:not(.has-caption)': {
+    '& > tr:first-child': {
+      borderTopLeftRadius: borderRadius,
+      borderTopRightRadius: borderRadius,
+      '& > th:first-of-type': {
+        borderTopLeftRadius: borderRadius
+      },
+      '& > th:last-of-type': {
+        borderTopRightRadius: borderRadius
+      }
+    }
+  }
+};
+var head = {
+  px: 'lg',
+  py: 'sm',
+  fontSize: 'md',
+  fontWeight: '2',
+  color: 'text.primary',
+  lineHeight: 'body',
+  '&.is-focused': _objectSpread({}, defaultFocus)
+};
+var tbody = {
+  borderTopColor: 'border.base',
+  borderBottom: 'unset',
+  backgroundColor: 'background.base',
+  '& > tr:last-child': {
+    borderBottom: 'unset',
+    borderBottomLeftRadius: borderRadius,
+    borderBottomRightRadius: borderRadius,
+    '& > td:first-of-type': {
+      borderBottomLeftRadius: borderRadius
+    },
+    '& > td:last-of-type': {
+      borderBottomRightRadius: borderRadius
+    }
+  }
+};
+var data = _objectSpread(_objectSpread({}, head), {}, {
+  py: 'md',
+  fontWeight: '1'
+});
+var tableBase = {
+  caption: caption,
+  row: row,
+  thead: thead,
+  head: head,
+  tbody: tbody,
+  data: data
+};
+exports.tableBase = tableBase;