@pingux/astro 2.84.0-alpha.1 → 2.84.0-alpha.2

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

@@ -1,17 +1,12 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _fontWeights;
-var baseSize = 15;
-var majorMultiplier = 1.15;
-var getFontSize = function getFontSize(major) {
-  return Math.round(baseSize * Math.pow(majorMultiplier, major));
-};
 export var fontSizes = {
-  'xs': getFontSize(-2),
-  'sm': getFontSize(-1),
-  'md': '15px',
-  'lg': '18.75px',
-  'xl': '22.5px',
-  'xx': '26.25px',
-  'xxx': '33.75px'
+  'xs': '0.75rem',
+  'sm': '0.875rem',
+  'md': '.9375rem',
+  'lg': '1.171875rem',
+  'xl': '1.40625rem',
+  'xx': '1.640625rem',
+  'xxx': '2.109375rem'
 };
-export var fontWeights = (_fontWeights = {}, _defineProperty(_fontWeights, -1, 400), _defineProperty(_fontWeights, 0, 400), _defineProperty(_fontWeights, 1, 400), _defineProperty(_fontWeights, 2, 600), _defineProperty(_fontWeights, 3, 600), _fontWeights);
+export var fontWeights = (_fontWeights = {}, _defineProperty(_fontWeights, -1, 300), _defineProperty(_fontWeights, 0, 400), _defineProperty(_fontWeights, 1, 400), _defineProperty(_fontWeights, 2, 600), _defineProperty(_fontWeights, 3, 600), _fontWeights);

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

@@ -47,14 +47,14 @@ var buttonBase = _objectSpread(_objectSpread({}, transitions), {}, {
   },
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
-var neutral = _objectSpread(_objectSpread({
+var neutral = _objectSpread(_objectSpread(_objectSpread({
   color: 'gray-600'
-}, buttonBase), {}, {
+}, buttonBase), transitions), {}, {
   '&.is-pressed': {
-    backgroundColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex()
+    color: 'white'
   },
   '&.is-hovered': {
-    backgroundColor: chroma.mix(primaryBlue, 'black', 0.075, 'rgb').hex()
+    borderColor: 'primary'
   }
 });
 var primary = _objectSpread(_objectSpread({}, buttonBase), {}, {
@@ -152,6 +152,7 @@ var primaryWithIcon = _objectSpread(_objectSpread({}, primary), {}, {
   color: 'white'
 });
 var baseIconButton = {
+  cursor: 'pointer',
   transition: 'color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out',
   outline: 'none',
   borderRadius: '28px',
@@ -231,7 +232,26 @@ var iconButtons = {
       }
     }, transitions)
   },
-  messageCloseButton: _objectSpread({}, baseIconButton)
+  messageCloseButton: _objectSpread({}, baseIconButton),
+  headerNav: _objectSpread(_objectSpread({}, baseIconButton), {}, {
+    borderRadius: '4px',
+    path: {
+      fill: 'gray-800'
+    },
+    px: 'md',
+    py: 'sm',
+    width: '56px',
+    '&.is-hovered': {
+      path: {
+        fill: 'gray-500'
+      }
+    },
+    '&.is-pressed': {
+      path: {
+        fill: 'gray-500'
+      }
+    }
+  })
 };
 var buttons = {
   neutral: neutral,

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

@@ -0,0 +1,20 @@
+var interactive = {
+  boxShadow: 'none',
+  borderRadius: '24px',
+  border: '1px solid',
+  borderColor: 'gray-300',
+  transition: 'border-color .15s ease-in',
+  '&.is-focused': {
+    outline: '2px solid',
+    outlineColor: 'focus',
+    outlineOffset: '0px'
+  },
+  '&.is-hovered': {
+    outline: 'none',
+    borderColor: 'blue',
+    bg: 'default'
+  }
+};
+export default {
+  interactive: interactive
+};

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

@@ -0,0 +1,54 @@
+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 nextGen = {
+  color: 'gray-800',
+  fontSize: 'md',
+  py: 'sm',
+  px: 'md',
+  textDecoration: 'none',
+  borderRadius: '4px',
+  lineHeight: '22.5px',
+  minHeight: '22.5px',
+  fontFamily: 'standard',
+  '&.is-hovered': {
+    color: '#155cba'
+  },
+  '&.is-pressed': {
+    color: '#155cba'
+  }
+};
+var sideNav = _objectSpread(_objectSpread({}, nextGen), {}, {
+  px: '0',
+  display: 'block',
+  position: 'relative',
+  '&:before': {
+    position: 'absolute',
+    display: 'block',
+    borderRadius: '.25rem',
+    content: '""',
+    top: '0',
+    right: '-1rem',
+    bottom: 0,
+    left: '-1rem',
+    transition: 'background-color .15s ease'
+  },
+  '&.is-selected': {
+    color: '#155cba',
+    '&:before': {
+      backgroundColor: 'active_light'
+    }
+  }
+});
+export default {
+  nextGen: nextGen,
+  sideNav: sideNav
+};

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

@@ -45,7 +45,7 @@ var hTags = {
     color: 'text.primary',
     fontFamily: 'standard',
     fontWeight: 1,
-    fontSize: 'sm'
+    fontSize: 'xs'
   }
 };
 export var text = _objectSpread({
@@ -58,12 +58,19 @@ export var text = _objectSpread({
     color: 'text.primary'
   },
   placeholder: {
-    color: 'text.primary'
+    color: 'text.primary',
+    fontWeight: 1
   },
   paragraph: {
     lineHeight: 'body'
   },
   listViewItemText: {
     fontWeight: 2
+  },
+  small: {
+    fontSize: 'sm',
+    color: 'gray-500',
+    fontFamily: 'standard',
+    lineHeight: '1.75rem'
   }
 }, hTags);

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

@@ -226,11 +226,14 @@ var menuItem = {
       color: 'text.primary',
       bg: 'lightblue'
     }
+  },
+  separator: {
+    my: 'sm'
   }
 };
 var separator = {
   base: {
-    bg: 'gray-200'
+    bg: 'gray-300'
   }
 };
 var avatarBase = {
@@ -273,8 +276,12 @@ var progressBar = {
   })
 };
 var listViewItem = {
+  rightOfData: {
+    flexShrink: 4,
+    whiteSpace: 'nowrap'
+  },
   iconContainer: {
-    mr: 'sm'
+    ml: '0px'
   },
   styledListItem: {
     bg: 'white',
@@ -295,8 +302,8 @@ var listViewItem = {
     }
   },
   styledContainer: {
-    py: '1.25rem',
-    px: '1rem',
+    py: '1rem',
+    px: '1.5rem',
     bg: 'transparent',
     '&.is-hovered': {
       bg: 'transparent',
@@ -450,6 +457,29 @@ var dataTable = {
     fontSize: 'md'
   }
 };
+var codeView = {
+  wrapper: {
+    backgroundColor: 'gray-900',
+    borderRadius: '4px',
+    '> button >svg': {
+      color: 'gray-300',
+      path: {
+        fill: 'gray-300'
+      }
+    },
+    '> pre': {
+      p: 'md'
+    }
+  }
+};
+var tabs = {
+  gap: '0px'
+};
+var menu = {
+  p: 'sm',
+  border: '1px solid',
+  borderColor: 'gray-300'
+};
 export default {
   navBar: navBar,
   fieldHelperText: fieldHelperText,
@@ -464,5 +494,8 @@ export default {
   listViewItem: listViewItem,
   progressBar: progressBar,
   listView: listView,
-  dataTable: dataTable
+  dataTable: dataTable,
+  codeView: codeView,
+  tabs: tabs,
+  menu: menu
 };

package/package.json

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