@pingux/astro 2.91.0 → 2.92.0-alpha.0

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.d.ts

@@ -0,0 +1,375 @@
+declare const _default: {
+    avatar: {
+        backgroundColor: string;
+        color: string;
+        cursor: string;
+        '&.is-orange': {
+            backgroundColor: string;
+            color: string;
+        };
+        '&.is-green': {
+            backgroundColor: string;
+            color: string;
+        };
+        '&.is-purple': {
+            backgroundColor: string;
+            color: string;
+        };
+        '&.is-pink': {
+            backgroundColor: string;
+            color: string;
+        };
+        '&.is-red': {
+            backgroundColor: string;
+            color: string;
+        };
+        '&.is-yellow': {
+            backgroundColor: string;
+            color: string;
+        };
+        '&.is-cyan': {
+            backgroundColor: string;
+            color: string;
+        };
+        '&.is-teal': {
+            backgroundColor: string;
+            color: string;
+        };
+        display: string;
+        borderRadius: string;
+        textAlign: string;
+        alignItems: string;
+        justifyContent: string;
+        fontFamily: string;
+    };
+    message: {
+        item: {
+            backgroundColor: string;
+            color: string;
+            '> span': {
+                color: string;
+            };
+            '&.is-success': {
+                bg: string;
+                borderLeftColor: string;
+                color: string;
+            };
+            '&.is-success, > .is-success': {
+                bg: string;
+                color: string;
+            };
+            '&.is-warning': {
+                bg: string;
+                borderLeftColor: string;
+                color: string;
+            };
+            '&.is-warning, > .is-warning': {
+                bg: string;
+                color: string;
+            };
+            '&.is-error, > .is-error': {
+                bg: string;
+                color: string;
+            };
+            '&.is-error, > button > svg': {
+                color: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '&.is-warning, > button > svg': {
+                color: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '&.is-success, > button > svg': {
+                color: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '&.is-error': {
+                borderLeftColor: string;
+            };
+        };
+    };
+    menu: {
+        backgroundColor: string;
+    };
+    menuItem: {
+        item: {
+            bg: string;
+            padding: string;
+            outline: string;
+            color: string;
+            cursor: string;
+            '&.is-focused, &.is-selected, &.is-pressed': {
+                bg: string;
+                color: string;
+                '> *': {
+                    color: string;
+                };
+            };
+            '&.is-pressed': {
+                color: string;
+                bg: string;
+            };
+        };
+        separator: {
+            my: string;
+        };
+    };
+    listViewItem: {
+        styledListItem: {
+            '&.has-separator': {
+                borderBottom: string;
+                borderBottomColor: string;
+            };
+            bg: string;
+            '&.is-selected': {
+                bg: string;
+            };
+            '&.is-hovered': {
+                bg: string;
+            };
+            '&.is-focused': {
+                boxShadow: string;
+                bg: string;
+            };
+        };
+    };
+    listView: {
+        container: {
+            borderColor: string;
+        };
+    };
+    navBar: {
+        container: {
+            width: string;
+            p: string;
+            backgroundColor: string;
+            boxShadow: string;
+        };
+        sectionButton: {
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+            '&.is-pressed': {
+                backgroundColor: string;
+                color: string;
+                fontFamily: string;
+                '> div > span': {
+                    color: string;
+                };
+                '> div > svg': {
+                    fill: string;
+                };
+            };
+            '&.is-hovered': {
+                '> div': {
+                    backgroundColor: string;
+                };
+            };
+        };
+        itemButton: {
+            color: string;
+            fontFamily: string;
+            '&.is-selected': {
+                backgroundColor: string;
+                color: string;
+                '> div > span': {
+                    color: string;
+                };
+                '> div > svg': {
+                    fill: string;
+                };
+            };
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+            '&.is-hovered': {
+                backgroundColor: string;
+            };
+            '&.is-pressed': {
+                backgroundColor: string;
+                color: string;
+            };
+        };
+        subtitle: {
+            fontFamily: string;
+            color: string;
+        };
+        headerText: {
+            color: string;
+            fontFamily: string;
+            '.is-selected &': {
+                color: string;
+            };
+        };
+        headerNav: {
+            color: string;
+            fontFamily: string;
+            '&.is-hovered': {
+                backgroundColor: string;
+            };
+            '&.is-focused': {
+                boxShadow: string;
+                WebkitBoxShadow: string;
+                MozBoxShadow: string;
+            };
+        };
+        item: {
+            px: string;
+            py: string;
+            color: string;
+            fontFamily: string;
+            '&.is-hovered': {
+                backgroundColor: string;
+            };
+            '> div > svg': {
+                fill: string;
+            };
+            '&.is-selected': {
+                '> div > svg': {
+                    fill: string;
+                };
+                backgroundColor: string;
+            };
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+                boxShadow: string;
+                WebkitBoxShadow: string;
+                MozBoxShadow: string;
+            };
+            '&.is-pressed': {
+                backgroundColor: string;
+                '> div > span': {
+                    color: string;
+                };
+                '> div > svg': {
+                    fill: string;
+                };
+            };
+        };
+        itemHeaderContainer: {
+            px: string;
+            py: string;
+            backgroundColor: string;
+            '> svg': {
+                fill: string;
+            };
+            '> div > svg': {
+                fill: string;
+            };
+            '&.is-selected': {
+                '> svg': {
+                    fill: string;
+                };
+                backgroundColor: string;
+            };
+        };
+    };
+    listBox: {
+        container: {
+            backgroundColor: string;
+            border: string;
+            borderColor: string;
+            borderRadius: string;
+        };
+        option: {
+            py: string;
+            pl: string;
+            pr: string;
+            bg: string;
+            '&.is-focused': {
+                color: string;
+                bg: string;
+            };
+            '&.is-selected': {
+                color: string;
+                bg: string;
+                pl: number;
+                '&.is-focused': {
+                    color: string;
+                };
+            };
+        };
+    };
+    modal: {
+        content: {
+            bg: string;
+        };
+    };
+    tab: {
+        '&.is-selected': {
+            '& > span': {
+                color: string;
+            };
+        };
+        '&.is-hovered': {
+            '& > span': {
+                color: string;
+            };
+        };
+    };
+    iconBadge: {
+        cyan: {
+            backgroundColor: string;
+            fill: string;
+            color: string;
+        };
+        pink: {
+            backgroundColor: string;
+            fill: string;
+            color: string;
+        };
+        green: {
+            backgroundColor: string;
+            fill: string;
+            color: string;
+        };
+        orange: {
+            backgroundColor: string;
+            fill: string;
+            color: string;
+        };
+        blue: {
+            backgroundColor: string;
+            fill: string;
+            color: string;
+        };
+        red: {
+            backgroundColor: string;
+            fill: string;
+            color: string;
+        };
+        teal: {
+            backgroundColor: string;
+            fill: string;
+            color: string;
+        };
+        yellow: {
+            backgroundColor: string;
+            fill: string;
+            color: string;
+        };
+        indigo: {
+            backgroundColor: string;
+            fill: string;
+            color: string;
+        };
+        purple: {
+            backgroundColor: string;
+            fill: string;
+            color: string;
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,71 @@
+"use strict";
+
+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["default"] = void 0;
+var _avatar = require("./avatar");
+var _iconBadge = _interopRequireDefault(require("./iconBadge"));
+var _lsitview = require("./lsitview");
+var _menu = require("./menu");
+var _message = require("./message");
+var _navbar = require("./navbar");
+var listBox = {
+  container: {
+    backgroundColor: 'background.base',
+    border: '1px solid',
+    borderColor: 'border.input',
+    borderRadius: '4px'
+  },
+  option: {
+    py: '.75rem',
+    pl: '.75rem',
+    pr: '1rem',
+    bg: 'background.base',
+    '&.is-focused': {
+      color: 'text.primary',
+      bg: 'gray-800'
+    },
+    '&.is-selected': {
+      color: 'text.primary',
+      bg: 'gray-800',
+      pl: 0,
+      '&.is-focused': {
+        color: 'text.primary'
+      }
+    }
+  }
+};
+var tab = {
+  '&.is-selected': {
+    '& > span': {
+      color: 'text.secondary'
+    }
+  },
+  '&.is-hovered': {
+    '& > span': {
+      color: 'text.secondary'
+    }
+  }
+};
+var modal = {
+  content: {
+    bg: 'background.base'
+  }
+};
+var _default = {
+  avatar: _avatar.avatar,
+  message: _message.message,
+  menu: _menu.menu,
+  menuItem: _menu.menuItem,
+  listViewItem: _lsitview.listViewItem,
+  listView: _lsitview.listView,
+  navBar: _navbar.navBar,
+  listBox: listBox,
+  modal: modal,
+  tab: tab,
+  iconBadge: _iconBadge["default"]
+};
+exports["default"] = _default;

package/lib/cjs/styles/themes/astro/customProperties/icons.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: {
+    [x: number]: import("@pingux/mdi-react").MdiReactIconComponentType;
+    MenuDown: import("@pingux/mdi-react").MdiReactIconComponentType;
+    MenuUp: import("@pingux/mdi-react").MdiReactIconComponentType;
+    pingLogoHorizontalSmall: import("react").JSX.Element;
+};
+export default _default;

package/lib/cjs/styles/themes/astro/customProperties/icons.js

@@ -0,0 +1,23 @@
+"use strict";
+
+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["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _AlertCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertCircleIcon"));
+var _AlertIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertIcon"));
+var _CheckCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckCircleIcon"));
+var _InformationIcon = _interopRequireDefault(require("@pingux/mdi-react/InformationIcon"));
+var _MenuDownIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuDownIcon"));
+var _MenuUpIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuUpIcon"));
+var _logos = require("../../../../utils/devUtils/constants/logos");
+var _statuses = _interopRequireDefault(require("../../../../utils/devUtils/constants/statuses"));
+var _MenuDown$MenuUp$stat;
+var _default = (_MenuDown$MenuUp$stat = {
+  MenuDown: _MenuDownIcon["default"],
+  MenuUp: _MenuUpIcon["default"]
+}, (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].DEFAULT, _InformationIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].ERROR, _AlertCircleIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].SUCCESS, _CheckCircleIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].WARNING, _AlertIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", _logos.pingLogoHorizontalSmallWhite), _MenuDown$MenuUp$stat);
+exports["default"] = _default;

package/lib/cjs/styles/themes/astro/customProperties/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const astroThemeValues: {
+    icons: {
+        [x: number]: import("@pingux/mdi-react").MdiReactIconComponentType;
+        MenuDown: import("@pingux/mdi-react").MdiReactIconComponentType;
+        MenuUp: import("@pingux/mdi-react").MdiReactIconComponentType;
+        pingLogoHorizontalSmall: import("react").JSX.Element;
+    };
+    styles: {
+        navButtonEstHeight: number;
+    };
+};

package/lib/cjs/styles/themes/astro/customProperties/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+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.astroThemeValues = void 0;
+var _icons = _interopRequireDefault(require("./icons"));
+var _styles = _interopRequireDefault(require("./styles"));
+var astroThemeValues = {
+  icons: _icons["default"],
+  styles: _styles["default"]
+};
+exports.astroThemeValues = astroThemeValues;

package/lib/cjs/styles/themes/astro/customProperties/styles.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    navButtonEstHeight: number;
+};
+export default _default;

package/lib/cjs/styles/themes/astro/customProperties/styles.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  navButtonEstHeight: 40
+};
+exports["default"] = _default;

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

@@ -14,6 +14,10 @@ export declare const warning: {
     light: string;
 };
 declare const colors: {
+    card: {
+        blue: string;
+        gray: string;
+    };
     critical: {
         bright: string;
         dark: string;
@@ -32,16 +36,48 @@ declare const colors: {
     text: {
         primary: string;
         secondary: string;
+        message: string;
+        fieldHelper: string;
     };
     border: {
         base: string;
+        input: string;
+        separator: string;
     };
     active: string;
     primary: string;
+    background: {
+        base: string;
+        secondary: string;
+        card: string;
+    };
+    iconWrapper: {
+        wrapper: {
+            orange: string;
+            cyan: string;
+            green: string;
+            purple: string;
+            pink: string;
+            red: string;
+            yellow: string;
+            teal: string;
+        };
+        icon: {
+            orange: string;
+            cyan: string;
+            green: string;
+            purple: string;
+            pink: string;
+            red: string;
+            yellow: string;
+            teal: string;
+        };
+    };
     neutral: {
         80: string;
     };
     focus: string;
+    disabled: string;
     white: string;
     'blue-100': string;
     'blue-200': string;

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

@@ -15,6 +15,7 @@ _Object$defineProperty(exports, "__esModule", {
 exports.warning = exports.success = exports["default"] = exports.critical = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _colorTokens = require("../tokens/colorTokens");
+var _iconWrapper = require("./iconWrapper");
 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 subColors = {
@@ -88,25 +89,42 @@ var warning = {
 exports.warning = warning;
 var text = {
   primary: _colorTokens.nextGenColors['gray-900'],
-  secondary: _colorTokens.nextGenColors['gray-500']
+  secondary: _colorTokens.nextGenColors['gray-500'],
+  message: _colorTokens.nextGenColors['gray-700'],
+  fieldHelper: _colorTokens.nextGenColors['gray-500']
 };
 var border = {
-  base: _colorTokens.nextGenColors['gray-500']
+  base: _colorTokens.nextGenColors['gray-300'],
+  input: _colorTokens.nextGenColors['gray-500'],
+  separator: _colorTokens.nextGenColors['gray-200']
 };
 var overrides = {
   neutral: {
     80: '#69788B'
   },
-  focus: colorsObject.active
+  focus: colorsObject.active,
+  disabled: _colorTokens.nextGenColors['gray-100']
+};
+var background = {
+  base: 'white',
+  secondary: _colorTokens.nextGenColors['gray-100'],
+  card: _colorTokens.nextGenColors['blue-100']
+};
+var card = {
+  blue: _colorTokens.nextGenColors['blue-100'],
+  gray: _colorTokens.nextGenColors['gray-100']
 };
 var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColors), _colorTokens.nextGenColors), overrides), {}, {
+  card: card,
   critical: critical,
   success: success,
   warning: warning,
   text: text,
   border: border,
   active: colorsObject.blue,
-  primary: colorsObject.blue
+  primary: colorsObject.blue,
+  background: background,
+  iconWrapper: _iconWrapper.iconWrapper
 });
 var _default = colors;
 exports["default"] = _default;

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

@@ -0,0 +1,22 @@
+export declare const iconWrapper: {
+    wrapper: {
+        orange: string;
+        cyan: string;
+        green: string;
+        purple: string;
+        pink: string;
+        red: string;
+        yellow: string;
+        teal: string;
+    };
+    icon: {
+        orange: string;
+        cyan: string;
+        green: string;
+        purple: string;
+        pink: string;
+        red: string;
+        yellow: string;
+        teal: string;
+    };
+};

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

@@ -0,0 +1,31 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.iconWrapper = void 0;
+var _colorTokens = require("../tokens/colorTokens");
+var iconWrapper = {
+  wrapper: {
+    orange: _colorTokens.nextGenColors['orange-100'],
+    cyan: _colorTokens.nextGenColors['cyan-100'],
+    green: _colorTokens.nextGenColors['green-100'],
+    purple: _colorTokens.nextGenColors['purple-100'],
+    pink: _colorTokens.nextGenColors['pink-100'],
+    red: _colorTokens.nextGenColors['red-100'],
+    yellow: _colorTokens.nextGenColors['yellow-100'],
+    teal: _colorTokens.nextGenColors['teal-100']
+  },
+  icon: {
+    orange: _colorTokens.nextGenColors['orange-800'],
+    cyan: _colorTokens.nextGenColors['cyan-800'],
+    green: _colorTokens.nextGenColors['green-800'],
+    purple: _colorTokens.nextGenColors['purple-800'],
+    pink: _colorTokens.nextGenColors['pink-800'],
+    red: _colorTokens.nextGenColors['red-800'],
+    yellow: _colorTokens.nextGenColors['yellow-800'],
+    teal: _colorTokens.nextGenColors['teal-800']
+  }
+};
+exports.iconWrapper = iconWrapper;