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

package/lib/cjs/components/ListBox/ListBox.js

@@ -28,6 +28,7 @@ var _listbox = require("@react-aria/listbox");
 var _listboxLayout = require("listbox-layout");
 var _listboxVirtualizer = require("listbox-virtualizer");
 var _hooks = require("../../hooks");
+var _Box = _interopRequireDefault(require("../Box"));
 var _Loader = _interopRequireDefault(require("../Loader"));
 var _index = require("./index");
 var _ListBoxContext = require("./ListBoxContext");
@@ -154,6 +155,8 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   };
   return (0, _react2.jsx)(_ListBoxContext.ListBoxContext.Provider, {
     value: state
+  }, (0, _react2.jsx)(_Box["default"], {
+    variant: "listBox.container"
   }, (0, _react2.jsx)(_listboxVirtualizer.Virtualizer, (0, _extends2["default"])({}, (0, _reactAria.mergeProps)(listBoxProps, others), {
     autoFocus: hasAutoFocus,
     style: {
@@ -188,7 +191,7 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       });
     }
     return null;
-  }));
+  })));
 });
 var _default = ListBox;
 exports["default"] = _default;

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

@@ -1278,6 +1278,7 @@ declare const _default: {
             lineHeight: string;
             minHeight: string;
             fontFamily: string;
+            cursor: string;
             '&.is-hovered': {
                 color: string;
             };
@@ -1289,6 +1290,7 @@ declare const _default: {
             px: string;
             display: string;
             position: string;
+            cursor: string;
             '&:before': {
                 position: string;
                 display: string;
@@ -1545,7 +1547,14 @@ declare const _default: {
             ml: string;
         };
         listBox: {
+            container: {
+                px: string;
+                py: string;
+            };
             option: {
+                py: string;
+                pl: string;
+                pr: string;
                 '&.is-focused': {
                     color: string;
                     bg: string;

package/lib/cjs/styles/themes/next-gen/tokens/colorTokens.js

@@ -47,16 +47,16 @@ var nextGenColors = {
   'pink-800': '#561435',
   'pink-900': '#2b0a1a',
   'pink': '#d63384',
-  'red-100': '#fde1de',
-  'red-200': '#fcc3bd',
-  'red-300': '#faa49d',
-  'red-400': '#f9867c',
-  'red-500': '#f7685b',
-  'red-600': '#c65349',
-  'red-700': '#943e37',
-  'red-800': '#632a24',
-  'red-900': '#311512',
-  'red': '#f7685b',
+  'red-100': '#f8d8d5',
+  'red-200': '#f0b0aa',
+  'red-300': '#e98980',
+  'red-400': '#e16155',
+  'red-500': '#da3a2b',
+  'red-600': '#ae2e22',
+  'red-700': '#83231a',
+  'red-800': '#571711',
+  'red-900': '#2c0c09',
+  'red': '#da3a2b',
   'orange-100': '#ffe5d0',
   'orange-200': '#fecba1',
   'orange-300': '#feb272',
@@ -77,16 +77,16 @@ var nextGenColors = {
   'yellow-800': '#664a1c',
   'yellow-900': '#33250e',
   'yellow': '#ffb946',
-  'green-100': '#d5f6e4',
-  'green-200': '#abeeca',
-  'green-300': '#82e5af',
-  'green-400': '#58dd95',
-  'green-500': '#2ed47a',
-  'green-600': '#25aa62',
-  'green-700': '#1c7f49',
-  'green-800': '#125531',
-  'green-900': '#092a18',
-  'green': '#2ed47a',
+  'green-100': '#d3eddf',
+  'green-200': '#a7dcbf',
+  'green-300': '#7aca9f',
+  'green-400': '#4eb97f',
+  'green-500': '#22a75f',
+  'green-600': '#1b864c',
+  'green-700': '#146439',
+  'green-800': '#0e4326',
+  'green-900': '#072113',
+  'green': '#22a75f',
   'teal-100': '#d1ecf1',
   'teal-200': '#a2dae3',
   'teal-300': '#74c7d4',
@@ -132,10 +132,10 @@ var nextGenColors = {
   },
   'active': '#1a73e8',
   'active_light': '#eaf2fd',
-  'success': '#1c7f49',
-  'success_light': '#d5f6e4',
-  'critical': '#943e37',
-  'critical_light': '#fde1de',
+  'success': '#22a75f',
+  'success_light': '#d3eddf',
+  'critical': '#da3a2b',
+  'critical_light': '#f8d8d5',
   'warning': '#984c0c',
   'warning_light': '#ffe5d0'
 };

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

@@ -10,7 +10,7 @@ var interactive = {
   borderRadius: '1rem',
   border: '1px solid',
   borderColor: 'gray-300',
-  transition: 'border-color .15s ease-in',
+  transition: 'border-color .25s ease-in',
   '&.is-focused': {
     outline: '2px solid',
     outlineColor: 'focus',

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

@@ -14,6 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.input = exports.fieldControlWrapper = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _text = require("./text");
 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 defaultFocus = {
@@ -33,7 +34,8 @@ var input = {
   '&.is-focused': _objectSpread({}, defaultFocus),
   borderRadius: '4px',
   fontWeight: 1,
-  height: '50px'
+  height: '50px',
+  '&::placeholder': _text.text.placeholder
 };
 exports.input = input;
 input.search = _objectSpread(_objectSpread({}, input), {}, {

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

@@ -9,6 +9,7 @@ declare const _default: {
         lineHeight: string;
         minHeight: string;
         fontFamily: string;
+        cursor: string;
         '&.is-hovered': {
             color: string;
         };
@@ -20,6 +21,7 @@ declare const _default: {
         px: string;
         display: string;
         position: string;
+        cursor: string;
         '&:before': {
             position: string;
             display: string;

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

@@ -26,6 +26,7 @@ var nextGen = {
   lineHeight: '1.5',
   minHeight: '22.5px',
   fontFamily: 'standard',
+  cursor: 'pointer',
   '&.is-hovered': {
     color: 'blue-600'
   },
@@ -37,6 +38,7 @@ var sideNav = _objectSpread(_objectSpread({}, nextGen), {}, {
   px: '0',
   display: 'block',
   position: 'relative',
+  cursor: 'pointer',
   '&:before': {
     position: 'absolute',
     display: 'block',

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

@@ -65,7 +65,7 @@ var text = _objectSpread({
     color: 'text.primary'
   },
   placeholder: {
-    color: 'text.primary',
+    color: 'gray-500',
     fontWeight: 1
   },
   paragraph: {

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

@@ -410,7 +410,14 @@ declare const _default: {
         ml: string;
     };
     listBox: {
+        container: {
+            px: string;
+            py: string;
+        };
         option: {
+            py: string;
+            pl: string;
+            pr: string;
             '&.is-focused': {
                 color: string;
                 bg: string;

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

@@ -205,7 +205,14 @@ var menuTab = {
   ml: '0px !important'
 };
 var listBox = {
+  container: {
+    px: 'sm',
+    py: 'xs'
+  },
   option: {
+    py: '.75rem',
+    pl: '.75rem',
+    pr: '1rem',
     '&.is-focused': {
       color: 'text.primary',
       bg: 'gray-100'

package/lib/components/ListBox/ListBox.js

@@ -20,6 +20,7 @@ import { useListBox } from '@react-aria/listbox';
 import { ListLayout } from 'listbox-layout';
 import { Virtualizer, VirtualizerItem } from 'listbox-virtualizer';
 import { useLocalOrForwardRef } from '../../hooks';
+import Box from '../Box';
 import Loader from '../Loader';
 import { Option } from './index';
 import { ListBoxContext } from './ListBoxContext';
@@ -140,6 +141,8 @@ var ListBox = /*#__PURE__*/forwardRef(function (props, ref) {
   };
   return ___EmotionJSX(ListBoxContext.Provider, {
     value: state
+  }, ___EmotionJSX(Box, {
+    variant: "listBox.container"
   }, ___EmotionJSX(Virtualizer, _extends({}, mergeProps(listBoxProps, others), {
     autoFocus: hasAutoFocus,
     style: {
@@ -174,6 +177,6 @@ var ListBox = /*#__PURE__*/forwardRef(function (props, ref) {
       });
     }
     return null;
-  }));
+  })));
 });
 export default ListBox;

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

@@ -40,16 +40,16 @@ export var nextGenColors = {
   'pink-800': '#561435',
   'pink-900': '#2b0a1a',
   'pink': '#d63384',
-  'red-100': '#fde1de',
-  'red-200': '#fcc3bd',
-  'red-300': '#faa49d',
-  'red-400': '#f9867c',
-  'red-500': '#f7685b',
-  'red-600': '#c65349',
-  'red-700': '#943e37',
-  'red-800': '#632a24',
-  'red-900': '#311512',
-  'red': '#f7685b',
+  'red-100': '#f8d8d5',
+  'red-200': '#f0b0aa',
+  'red-300': '#e98980',
+  'red-400': '#e16155',
+  'red-500': '#da3a2b',
+  'red-600': '#ae2e22',
+  'red-700': '#83231a',
+  'red-800': '#571711',
+  'red-900': '#2c0c09',
+  'red': '#da3a2b',
   'orange-100': '#ffe5d0',
   'orange-200': '#fecba1',
   'orange-300': '#feb272',
@@ -70,16 +70,16 @@ export var nextGenColors = {
   'yellow-800': '#664a1c',
   'yellow-900': '#33250e',
   'yellow': '#ffb946',
-  'green-100': '#d5f6e4',
-  'green-200': '#abeeca',
-  'green-300': '#82e5af',
-  'green-400': '#58dd95',
-  'green-500': '#2ed47a',
-  'green-600': '#25aa62',
-  'green-700': '#1c7f49',
-  'green-800': '#125531',
-  'green-900': '#092a18',
-  'green': '#2ed47a',
+  'green-100': '#d3eddf',
+  'green-200': '#a7dcbf',
+  'green-300': '#7aca9f',
+  'green-400': '#4eb97f',
+  'green-500': '#22a75f',
+  'green-600': '#1b864c',
+  'green-700': '#146439',
+  'green-800': '#0e4326',
+  'green-900': '#072113',
+  'green': '#22a75f',
   'teal-100': '#d1ecf1',
   'teal-200': '#a2dae3',
   'teal-300': '#74c7d4',
@@ -125,10 +125,10 @@ export var nextGenColors = {
   },
   'active': '#1a73e8',
   'active_light': '#eaf2fd',
-  'success': '#1c7f49',
-  'success_light': '#d5f6e4',
-  'critical': '#943e37',
-  'critical_light': '#fde1de',
+  'success': '#22a75f',
+  'success_light': '#d3eddf',
+  'critical': '#da3a2b',
+  'critical_light': '#f8d8d5',
   'warning': '#984c0c',
   'warning_light': '#ffe5d0'
 };

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

@@ -3,7 +3,7 @@ var interactive = {
   borderRadius: '1rem',
   border: '1px solid',
   borderColor: 'gray-300',
-  transition: 'border-color .15s ease-in',
+  transition: 'border-color .25s ease-in',
   '&.is-focused': {
     outline: '2px solid',
     outlineColor: 'focus',

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

@@ -9,6 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 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 { text } from './text';
 var defaultFocus = {
   boxShadow: '0 1px 1px rgba(0,0,0,.075), 0 0 0 .0625rem blue'
 };
@@ -26,7 +27,8 @@ export var input = {
   '&.is-focused': _objectSpread({}, defaultFocus),
   borderRadius: '4px',
   fontWeight: 1,
-  height: '50px'
+  height: '50px',
+  '&::placeholder': text.placeholder
 };
 input.search = _objectSpread(_objectSpread({}, input), {}, {
   '&.is-disabled': _objectSpread(_objectSpread({}, readOnlyandDisabledStyles), {}, {

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

@@ -19,6 +19,7 @@ var nextGen = {
   lineHeight: '1.5',
   minHeight: '22.5px',
   fontFamily: 'standard',
+  cursor: 'pointer',
   '&.is-hovered': {
     color: 'blue-600'
   },
@@ -30,6 +31,7 @@ var sideNav = _objectSpread(_objectSpread({}, nextGen), {}, {
   px: '0',
   display: 'block',
   position: 'relative',
+  cursor: 'pointer',
   '&:before': {
     position: 'absolute',
     display: 'block',

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

@@ -58,7 +58,7 @@ export var text = _objectSpread({
     color: 'text.primary'
   },
   placeholder: {
-    color: 'text.primary',
+    color: 'gray-500',
     fontWeight: 1
   },
   paragraph: {

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

@@ -196,7 +196,14 @@ var menuTab = {
   ml: '0px !important'
 };
 var listBox = {
+  container: {
+    px: 'sm',
+    py: 'xs'
+  },
   option: {
+    py: '.75rem',
+    pl: '.75rem',
+    pr: '1rem',
     '&.is-focused': {
       color: 'text.primary',
       bg: 'gray-100'

package/package.json

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