@pingux/astro 2.91.0 → 2.92.0-alpha.1

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

@@ -0,0 +1,24 @@
+export var listViewItem = {
+  styledListItem: {
+    '&.has-separator': {
+      borderBottom: '1px solid',
+      borderBottomColor: 'border.base'
+    },
+    bg: 'background.base',
+    '&.is-selected': {
+      bg: 'background.hover'
+    },
+    '&.is-hovered': {
+      bg: 'background.hover'
+    },
+    '&.is-focused': {
+      boxShadow: '0 0 0 3px inset #1a73e8',
+      bg: 'background.hover'
+    }
+  }
+};
+export var listView = {
+  container: {
+    borderColor: 'border.base'
+  }
+};

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

@@ -0,0 +1,26 @@
+export var menuItem = {
+  item: {
+    bg: 'transparent',
+    padding: '10px 10px',
+    outline: 'none',
+    color: 'gray-400',
+    cursor: 'pointer',
+    '&.is-focused, &.is-selected, &.is-pressed': {
+      bg: 'gray-800',
+      color: 'text.primary',
+      '> *': {
+        color: 'text.primary'
+      }
+    },
+    '&.is-pressed': {
+      color: 'text.secondary',
+      bg: 'gray-800'
+    }
+  },
+  separator: {
+    my: 'sm'
+  }
+};
+export var menu = {
+  backgroundColor: '#23282e'
+};

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

@@ -0,0 +1,52 @@
+export var message = {
+  item: {
+    backgroundColor: 'background.secondary',
+    color: 'white !important',
+    '> span': {
+      color: 'text.message'
+    },
+    '&.is-success': {
+      bg: 'background.secondary',
+      borderLeftColor: 'green-500',
+      color: 'text.message'
+    },
+    '&.is-success, > .is-success': {
+      bg: 'background.secondary',
+      color: 'text.message'
+    },
+    '&.is-warning': {
+      bg: 'background.secondary',
+      borderLeftColor: 'yellow-500',
+      color: 'text.message'
+    },
+    '&.is-warning, > .is-warning': {
+      bg: 'background.secondary',
+      color: 'text.message'
+    },
+    '&.is-error, > .is-error': {
+      bg: 'background.secondary',
+      color: 'text.message'
+    },
+    '&.is-error, > button > svg': {
+      color: 'white !important',
+      path: {
+        fill: 'white !important'
+      }
+    },
+    '&.is-warning, > button > svg': {
+      color: 'white !important',
+      path: {
+        fill: 'text.message'
+      }
+    },
+    '&.is-success, > button > svg': {
+      color: 'white !important',
+      path: {
+        fill: 'text.message'
+      }
+    },
+    '&.is-error': {
+      borderLeftColor: 'red-500'
+    }
+  }
+};

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

@@ -0,0 +1,141 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/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) { _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; }
+var navBarFocus = {
+  outline: '2px solid',
+  outlineColor: 'active',
+  outlineOffset: '-2px'
+};
+var navBarSelected = {
+  backgroundColor: 'background.hover'
+};
+export var navBar = {
+  container: {
+    width: '252px',
+    p: 'sm',
+    backgroundColor: 'background.base',
+    boxShadow: '0 .5rem 1rem rgba(0, 0, 0, .15)'
+  },
+  sectionButton: {
+    '&.is-focused': _objectSpread({}, navBarFocus),
+    '&.is-pressed': {
+      backgroundColor: 'background.hover',
+      color: 'white',
+      fontFamily: 'standard',
+      '> div > span': {
+        color: 'white'
+      },
+      '> div > svg': {
+        fill: 'white'
+      }
+    },
+    '&.is-hovered': {
+      '> div': {
+        backgroundColor: 'background.hover'
+      }
+    }
+  },
+  itemButton: {
+    color: 'text.primary',
+    fontFamily: 'standard',
+    '&.is-selected': {
+      backgroundColor: 'background.hover',
+      color: 'white',
+      '> div > span': {
+        color: 'white'
+      },
+      '> div > svg': {
+        fill: 'white'
+      }
+    },
+    '&.is-focused': _objectSpread({}, navBarFocus),
+    '&.is-hovered': {
+      backgroundColor: 'background.hover'
+    },
+    '&.is-pressed': {
+      backgroundColor: 'background.hover',
+      color: 'white'
+    }
+  },
+  subtitle: {
+    fontFamily: 'standard',
+    color: 'text.primary'
+  },
+  headerText: {
+    color: 'text.primary',
+    fontFamily: 'standard',
+    '.is-selected &': {
+      color: 'white'
+    }
+  },
+  headerNav: {
+    color: 'text.primary',
+    fontFamily: 'standard',
+    '&.is-hovered': {
+      backgroundColor: 'light'
+    },
+    '&.is-focused': {
+      boxShadow: 'none',
+      WebkitBoxShadow: 'none',
+      MozBoxShadow: 'none'
+    }
+  },
+  item: {
+    px: '1rem',
+    py: '.75rem',
+    color: 'magenta !important',
+    fontFamily: 'standard',
+    '&.is-hovered': {
+      backgroundColor: 'background.hover'
+    },
+    '> div > svg': {
+      fill: 'text.primary'
+    },
+    '&.is-selected': _objectSpread(_objectSpread({}, navBarSelected), {}, {
+      '> div > svg': {
+        fill: 'white'
+      }
+    }),
+    '&.is-focused': {
+      outline: '2px solid',
+      outlineColor: 'active',
+      outlineOffset: '-2px',
+      boxShadow: 'none',
+      WebkitBoxShadow: 'none',
+      MozBoxShadow: 'none'
+    },
+    '&.is-pressed': {
+      backgroundColor: 'background.hover',
+      '> div > span': {
+        color: 'white'
+      },
+      '> div > svg': {
+        fill: 'white'
+      }
+    }
+  },
+  itemHeaderContainer: {
+    px: '1rem',
+    py: '.75rem',
+    backgroundColor: 'transparent',
+    '> svg': {
+      fill: 'text.primary'
+    },
+    '> div > svg': {
+      fill: 'text.primary'
+    },
+    '&.is-selected': _objectSpread(_objectSpread({}, navBarSelected), {}, {
+      '> svg': {
+        fill: 'white'
+      }
+    })
+  }
+};

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

@@ -0,0 +1,62 @@
+import { avatar } from './avatar';
+import iconBadge from './iconBadge';
+import { listView, listViewItem } from './lsitview';
+import { menu, menuItem } from './menu';
+import { message } from './message';
+import { navBar } from './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'
+  }
+};
+export default {
+  avatar: avatar,
+  message: message,
+  menu: menu,
+  menuItem: menuItem,
+  listViewItem: listViewItem,
+  listView: listView,
+  navBar: navBar,
+  listBox: listBox,
+  modal: modal,
+  tab: tab,
+  iconBadge: iconBadge
+};

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

@@ -0,0 +1,14 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+var _MenuDown$MenuUp$stat;
+import AlertCircleIcon from '@pingux/mdi-react/AlertCircleIcon';
+import AlertIcon from '@pingux/mdi-react/AlertIcon';
+import CheckCircleIcon from '@pingux/mdi-react/CheckCircleIcon';
+import InformationIcon from '@pingux/mdi-react/InformationIcon';
+import MenuDown from '@pingux/mdi-react/MenuDownIcon';
+import MenuUp from '@pingux/mdi-react/MenuUpIcon';
+import { pingLogoHorizontalSmallWhite } from '../../../../utils/devUtils/constants/logos';
+import statuses from '../../../../utils/devUtils/constants/statuses';
+export default (_MenuDown$MenuUp$stat = {
+  MenuDown: MenuDown,
+  MenuUp: MenuUp
+}, _defineProperty(_MenuDown$MenuUp$stat, statuses.DEFAULT, InformationIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.ERROR, AlertCircleIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.SUCCESS, CheckCircleIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.WARNING, AlertIcon), _defineProperty(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", pingLogoHorizontalSmallWhite), _MenuDown$MenuUp$stat);

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

@@ -0,0 +1,6 @@
+import icons from './icons';
+import styles from './styles';
+export var astroThemeValues = {
+  icons: icons,
+  styles: styles
+};

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

@@ -0,0 +1,3 @@
+export default {
+  navButtonEstHeight: 40
+};

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

@@ -10,6 +10,7 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/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) { _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 { nextGenColors } from '../tokens/colorTokens';
+import { iconWrapper } from './iconWrapper';
 var subColors = {
   lightblue: nextGenColors['blue-100'],
   lightindigo: nextGenColors['indigo-100'],
@@ -78,24 +79,41 @@ export var warning = {
 };
 var text = {
   primary: nextGenColors['gray-900'],
-  secondary: nextGenColors['gray-500']
+  secondary: nextGenColors['gray-500'],
+  message: nextGenColors['gray-700'],
+  fieldHelper: nextGenColors['gray-500']
 };
 var border = {
-  base: nextGenColors['gray-500']
+  base: nextGenColors['gray-300'],
+  input: nextGenColors['gray-500'],
+  separator: nextGenColors['gray-200']
 };
 var overrides = {
   neutral: {
     80: '#69788B'
   },
-  focus: colorsObject.active
+  focus: colorsObject.active,
+  disabled: nextGenColors['gray-100']
+};
+var background = {
+  base: 'white',
+  secondary: nextGenColors['gray-100'],
+  card: nextGenColors['blue-100']
+};
+var card = {
+  blue: nextGenColors['blue-100'],
+  gray: nextGenColors['gray-100']
 };
 var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColors), 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
 });
 export default colors;

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

@@ -0,0 +1,23 @@
+import { nextGenColors } from '../tokens/colorTokens';
+export var iconWrapper = {
+  wrapper: {
+    orange: nextGenColors['orange-100'],
+    cyan: nextGenColors['cyan-100'],
+    green: nextGenColors['green-100'],
+    purple: nextGenColors['purple-100'],
+    pink: nextGenColors['pink-100'],
+    red: nextGenColors['red-100'],
+    yellow: nextGenColors['yellow-100'],
+    teal: nextGenColors['teal-100']
+  },
+  icon: {
+    orange: nextGenColors['orange-800'],
+    cyan: nextGenColors['cyan-800'],
+    green: nextGenColors['green-800'],
+    purple: nextGenColors['purple-800'],
+    pink: nextGenColors['pink-800'],
+    red: nextGenColors['red-800'],
+    yellow: nextGenColors['yellow-800'],
+    teal: nextGenColors['teal-800']
+  }
+};

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

@@ -1,3 +1,13 @@
-var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'ComboBoxField', 'CodeView'];
-export var nextGenComponents = ['NavigationHeader'];
+var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet'];
+export var componentSpecificNextGenBlacklist = {
+  AstroProvider: ['Default', 'With Custom Theme Override'],
+  Badge: ['Status Badge Variants', 'Badge With Left Slot And Icon', 'Callout Badges', 'Removable'],
+  Button: ['Color Block Button', 'Text Icon Button'],
+  Messages: ['Customization'],
+  MultivaluesField: ['Condensed', 'Condensed With Section'],
+  PasswordField: ['Success'],
+  TextField: ['Success'],
+  OverlayPanel: ['Expandable']
+};
+export var nextGenOnlyComponents = ['NavigationHeader'];
 export default nextGenConvertedComponents;

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

@@ -0,0 +1,14 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+var _MenuDown$MenuUp$stat;
+import AlertCircleOutlineIcon from '@pingux/mdi-react/AlertCircleOutlineIcon';
+import AlertOutlineIcon from '@pingux/mdi-react/AlertOutlineIcon';
+import CheckCircleOutlineIcon from '@pingux/mdi-react/CheckCircleOutlineIcon';
+import ChevronDownIcon from '@pingux/mdi-react/ChevronDownIcon';
+import ChevronUpIcon from '@pingux/mdi-react/ChevronUpIcon';
+import InformationOutlineIcon from '@pingux/mdi-react/InformationOutlineIcon';
+import { pingLogoHorizontalSmall } from '../../../../utils/devUtils/constants/logos';
+import statuses from '../../../../utils/devUtils/constants/statuses';
+export default (_MenuDown$MenuUp$stat = {
+  MenuDown: ChevronDownIcon,
+  MenuUp: ChevronUpIcon
+}, _defineProperty(_MenuDown$MenuUp$stat, statuses.DEFAULT, InformationOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.ERROR, AlertCircleOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.SUCCESS, CheckCircleOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.WARNING, AlertOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", pingLogoHorizontalSmall), _MenuDown$MenuUp$stat);

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

@@ -0,0 +1,6 @@
+import icons from './icons';
+import styles from './styles';
+export var nextGenThemeValues = {
+  styles: styles,
+  icons: icons
+};

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

@@ -0,0 +1,3 @@
+export default {
+  navButtonEstHeight: 45.25
+};

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

@@ -24,13 +24,13 @@ export var checkbox = {
 };
 export var select = {
   borderRadius: '4px',
-  borderColor: 'border.base',
+  borderColor: 'border.input',
   color: 'text.primary',
   height: '50px',
   '&.is-disabled': {
     opacity: 1,
-    borderColor: 'border.base',
-    backgroundColor: 'gray-100'
+    borderColor: 'border.input',
+    backgroundColor: 'disabled'
   },
   currentValue: {
     color: 'text.primary'

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

@@ -10,26 +10,25 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/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) { _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 merge from 'deepmerge';
+import { themes } from '../../../utils/devUtils/constants/themes';
 import theme from '../../theme.js';
 import codeView from './codeView/codeView';
 import colors from './colors/colors';
+import { badges } from './variants/badges';
 import buttons from './variants/button';
 import cards from './variants/cards';
 import images from './variants/images';
 import links from './variants/links';
 import navigationHeader from './variants/navigationHeader';
 import { text as newText } from './variants/text';
-import variants, { badges } from './variants/variants';
+import variants from './variants/variants';
 import forms from './forms';
 import sizes from './sizes';
 import spacing from './spacing';
 import { fontSizes, fontWeights } from './text';
-
-// import './open_sans.css';
-
 var breakpoints = ['0px', '576px', '768px', '992px', '1200px', '1600px'];
 var nextGenTheme = {
-  name: 'Next Gen',
+  name: themes.NEXT_GEN,
   colors: colors,
   breakpoints: breakpoints,
   buttons: buttons,

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

@@ -4,6 +4,10 @@ var avatar = {
   lg: '72px',
   xl: '104px'
 };
+var iconBadge = {
+  md: '48px',
+  xl: '104px'
+};
 var container = {
   xs: ['100%', '540px', '720px', '960px', '1140px', '1540px'],
   sm: ['100%', '540px', '720px', '960px', '1140px', '1540px'],
@@ -13,7 +17,12 @@ var container = {
   xx: ['100%', '100%', '100%', '100%', '100%', '1540px'],
   fluid: ['100%', '100%', '100%', '100%', '100%', '100%']
 };
+var icons = {
+  xxxl: '70px'
+};
 export default {
   avatar: avatar,
-  container: container
+  container: container,
+  iconBadge: iconBadge,
+  icons: icons
 };