@pingux/astro 2.91.0 → 2.92.0-alpha.0

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

@@ -0,0 +1,68 @@
+export var listViewItem = {
+  rightOfData: {
+    flexShrink: 4,
+    whiteSpace: 'nowrap'
+  },
+  iconContainer: {
+    ml: '0px'
+  },
+  styledListItem: {
+    bg: 'white',
+    '&.is-selected': {
+      bg: 'gray-100'
+    },
+    borderBottom: 'none',
+    '&.has-separator': {
+      borderBottom: '1px solid',
+      borderBottomColor: 'gray-200'
+    },
+    '&.is-hovered': {
+      bg: 'gray-100'
+    },
+    '&.is-focused': {
+      boxShadow: '0 0 0 3px inset #1a73e8',
+      bg: 'gray-100'
+    }
+  },
+  styledContainer: {
+    py: 'md',
+    px: 'lg',
+    bg: 'transparent',
+    '&.is-hovered': {
+      bg: 'transparent',
+      cursor: 'pointer'
+    }
+  },
+  expandableStyledListItem: {
+    pr: '1.25rem',
+    pl: 0
+  },
+  expandableItemBody: {
+    px: '1.5rem'
+  },
+  expandableRow: {
+    '&.has-separator': {
+      borderBottom: '1px solid',
+      borderBottomColor: 'border.base'
+    }
+  }
+};
+export var listView = {
+  container: {
+    borderRadius: '16px',
+    border: '1px solid',
+    borderColor: '#e7eef4',
+    '& > div > div': {
+      '& > div:first-of-type': {
+        '& > div > div': {
+          borderRadius: '16px 16px 0 0'
+        }
+      },
+      '& > div:last-of-type': {
+        '& > div > div': {
+          borderRadius: ' 0 0 16px 16px'
+        }
+      }
+    }
+  }
+};

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

@@ -0,0 +1,28 @@
+export var menu = {
+  p: 'sm',
+  border: '1px solid',
+  borderColor: 'border.base'
+};
+export var menuItem = {
+  item: {
+    bg: 'transparent',
+    padding: '10px 10px',
+    outline: 'none',
+    color: 'text.primary',
+    cursor: 'pointer',
+    '&.is-focused, &.is-selected, &.is-pressed': {
+      bg: 'gray-100',
+      color: 'text.primary',
+      '> *': {
+        color: 'text.primary'
+      }
+    },
+    '&.is-pressed': {
+      color: 'text.primary',
+      bg: 'lightblue'
+    }
+  },
+  separator: {
+    my: 'sm'
+  }
+};

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

@@ -0,0 +1,40 @@
+export var message = {
+  item: {
+    maxWidth: 400,
+    pointerEvents: 'all',
+    mb: 'md',
+    p: '1.25rem',
+    wordBreak: 'break-word',
+    alignItems: 'center',
+    backgroundColor: 'blue-100',
+    borderLeftWidth: '5px',
+    borderLeftStyle: 'solid',
+    borderLeftColor: 'teal-500',
+    color: 'text.message',
+    fontSize: '15px !important',
+    borderRadius: 4,
+    '&.is-success': {
+      bg: 'green-100',
+      borderLeftColor: 'green-500',
+      color: 'text.message'
+    },
+    '&.is-warning': {
+      bg: 'warning.light',
+      borderLeftColor: 'yellow-500',
+      color: 'text.message'
+    },
+    '&.is-error, > .is-error': {
+      bg: 'red-100',
+      color: 'text.message'
+    },
+    '&.is-error, > button > svg': {
+      color: 'text.message !important',
+      path: {
+        fill: 'text.message'
+      }
+    },
+    '&.is-error': {
+      borderLeftColor: 'red-500'
+    }
+  }
+};

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

@@ -0,0 +1,124 @@
+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; }
+export var navBarSelected = {
+  backgroundColor: 'lightblue',
+  boxShadow: 'none'
+};
+export var navBarFocus = {
+  outline: '2px solid',
+  outlineColor: 'active',
+  outlineOffset: '-2px'
+};
+export var navBar = {
+  container: {
+    width: '252px',
+    p: 'sm',
+    backgroundColor: 'background.base',
+    boxShadow: '0 .5rem 1rem rgba(0, 0, 0, .15)'
+  },
+  sectionButton: {
+    borderRadius: '4px',
+    '&.is-hovered': {
+      backgroundColor: 'light'
+    },
+    '&.is-pressed': {
+      backgroundColor: 'gray-200'
+    },
+    '&.is-focused': _objectSpread({}, navBarFocus)
+  },
+  itemButton: {
+    py: '.75rem',
+    paddingLeft: '53px',
+    color: 'text.primary',
+    borderRadius: '4px',
+    '&.is-focused': _objectSpread({}, navBarFocus),
+    '&.is-hovered': {
+      backgroundColor: 'light'
+    },
+    '&.is-pressed': {
+      backgroundColor: 'gray-200',
+      color: 'text.primary'
+    },
+    '&.is-selected': {
+      bg: 'lightblue',
+      boxShadow: 'none',
+      color: 'darkblue'
+    }
+  },
+  subtitle: {
+    color: 'text.primary'
+  },
+  headerText: {
+    color: 'text.primary',
+    ml: 'sm',
+    '.is-selected &': {
+      color: 'darkblue'
+    }
+  },
+  headerNav: {
+    borderRadius: '4px',
+    color: 'text.primary',
+    '&.is-hovered': {
+      backgroundColor: 'light'
+    },
+    '&.is-focused': {
+      boxShadow: 'none',
+      WebkitBoxShadow: 'none',
+      MozBoxShadow: 'none'
+    }
+  },
+  item: {
+    px: '1rem',
+    py: '.75rem',
+    color: 'text.primary',
+    borderRadius: '4px',
+    '&.is-hovered': {
+      backgroundColor: 'light'
+    },
+    '> div > svg': {
+      fill: 'text.primary'
+    },
+    '&.is-pressed': {
+      backgroundColor: 'gray-200'
+    },
+    '&.is-selected': _objectSpread(_objectSpread({}, navBarSelected), {}, {
+      '> div > svg': {
+        fill: 'darkblue'
+      }
+    }),
+    '&.is-focused': {
+      outline: '2px solid',
+      outlineColor: 'active',
+      outlineOffset: '-2px',
+      boxShadow: 'none',
+      WebkitBoxShadow: 'none',
+      MozBoxShadow: 'none'
+    }
+  },
+  itemHeaderContainer: {
+    boxShadow: 'none',
+    maxWidth: '236px',
+    px: '1rem',
+    py: '.75rem',
+    '&.is-selected': _objectSpread({}, navBarSelected),
+    backgroundColor: 'transparent',
+    '> svg': {
+      fill: 'text.primary'
+    },
+    '> div > svg': {
+      fill: 'text.primary'
+    }
+  },
+  navBarItemBody: {
+    mb: '0px !important'
+  }
+};

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

@@ -42,7 +42,7 @@ var logoBand = _objectSpread(_objectSpread({}, link), {}, {
 var headerPlaceholder = {
   fontSize: 'lg',
   ml: 'md',
-  color: 'text.primary',
+  color: 'text.secondary',
   lineHeight: 'body',
   fontWeight: '1',
   '&.is-hovered': {
@@ -56,8 +56,8 @@ var navigationHeader = {
   container: {
     fontFamily: 'standard',
     borderBottom: '1px solid',
-    borderColor: 'gray-300',
-    bg: '#fff',
+    borderColor: 'border.base',
+    backgroundColor: 'background.base',
     height: '4.5rem',
     justifyContent: 'center'
   },
@@ -65,9 +65,11 @@ var navigationHeader = {
     px: ['1.5rem', '1.5rem', '1.5rem', '3rem', '3rem', '3rem'],
     maxWidth: '1540px',
     mx: 'auto',
-    width: '100%'
+    width: '100%',
+    backgroundColor: 'background.base'
   },
   dropdownMenu: {
+    backgroundColor: 'background.base',
     maxWidth: 'unset',
     p: 'sm',
     '& > li': {

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

@@ -0,0 +1,28 @@
+export var tabs = {
+  gap: '0px'
+};
+export var menuTab = {
+  ml: '0px !important'
+};
+export var tab = {
+  borderRadius: '2px',
+  pt: '.5rem',
+  '& > span': {
+    px: '1rem',
+    fontSize: '.9375rem'
+  },
+  '&.is-focused': {
+    boxShadow: 'none',
+    outline: '3px solid',
+    outlineColor: 'active',
+    outlineOffset: '1px',
+    '& > span': {
+      outline: 'none'
+    }
+  },
+  '& > div': {
+    borderBottom: '3px solid',
+    borderBottomColor: 'primary',
+    ml: '0px'
+  }
+};

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

@@ -13,45 +13,55 @@ var hTags = {
   h1: {
     fontSize: 'xxx',
     fontWeight: 2,
-    color: 'text.primary',
+    color: 'text.secondary',
     fontFamily: 'standard'
   },
   h2: {
     fontSize: 'xx',
     fontWeight: 2,
-    color: 'text.primary',
+    color: 'text.secondary',
     fontFamily: 'standard'
   },
   h3: {
     fontSize: 'xl',
     fontWeight: 2,
-    color: 'text.primary',
+    color: 'text.secondary',
     fontFamily: 'standard'
   },
   h4: {
     fontSize: 'lg',
     fontWeight: 2,
-    color: 'text.primary',
+    color: 'text.secondary',
     fontFamily: 'standard'
   },
   h5: {
     fontSize: 'md',
     fontWeight: 2,
-    color: 'text.primary',
+    color: 'text.secondary',
     fontFamily: 'standard'
   },
   h6: {
     textTransform: 'uppercase',
-    color: 'text.primary',
+    color: 'text.secondary',
     fontFamily: 'standard',
     fontWeight: 1,
     fontSize: 'xs'
   }
 };
 export var text = _objectSpread({
+  sideNavHeader: {
+    py: 'sm',
+    lineHeight: 'body',
+    textDecoration: 'none',
+    color: 'text.secondary',
+    px: '0',
+    fontWeight: '1',
+    letterSpacing: '1px'
+  },
   modalTitle: {
     fontSize: '20px',
     fontWeight: '2',
+    color: 'text.secondary',
     fontFamily: 'standard'
   },
   tabLabel: {
@@ -65,11 +75,12 @@ export var text = _objectSpread({
     lineHeight: 'body'
   },
   listViewItemText: {
+    color: 'text.secondary',
     fontWeight: 2
   },
   small: {
     fontSize: 'sm',
-    color: 'gray-500',
+    color: 'text.primary',
     fontFamily: 'standard',
     lineHeight: 'md'
   }