@pingux/astro 1.37.1 → 1.37.2-alpha.1

package/lib/styles/forms/input.js

@@ -15,7 +15,8 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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 '../variants/text';
-import statuses from '../../utils/devUtils/constants/statuses'; // Styles for default input and variants go here.
+import statuses from '../../utils/devUtils/constants/statuses';
+import { defaultFocus } from '../variants/buttons'; // Styles for default input and variants go here.
 
 var activeFloatLabel = {
   pt: 'md',
@@ -40,8 +41,9 @@ export var input = _objectSpread(_objectSpread({}, text.inputValue), {}, {
   width: '100%',
   outline: 'none',
   '&.is-focused': {
-    borderColor: 'accent.80',
-    boxShadow: 'focus'
+    outline: '1px solid',
+    outlineColor: 'focus',
+    outlineOffset: '2px'
   },
   '.is-float-label &': {
     height: '45px'
@@ -71,6 +73,12 @@ input.large = _objectSpread(_objectSpread({}, input), {}, {
   lineHeight: '2em',
   height: '4em'
 });
+input.search = _objectSpread(_objectSpread({}, input), {}, {
+  '&.is-focused': {
+    outline: 'none',
+    borderColor: 'focus'
+  }
+});
 input.small = _objectSpread(_objectSpread({}, input), {}, {
   height: '28px',
   pb: '2px',
@@ -189,9 +197,13 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.container), {},
     lineHeight: '100%',
     p: 5,
     '&.is-focused': {
-      boxShadow: 'none'
+      boxShadow: 'none',
+      outline: 'none'
     }
-  }
+  },
+  '&.is-focused': _objectSpread({
+    boxShadow: 'none'
+  }, defaultFocus)
 });
 input.numberField = _objectSpread(_objectSpread({}, input), {}, {
   pr: '28px'

package/lib/styles/forms/radio.js

@@ -1,5 +1,20 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+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; }
+
 // Styles for default radio and variants go here.
-// Default radio
+import { focusWithCroppedOutline } from '../variants/buttons'; // Default radio
+
 export var radio = {
   width: 20,
   height: 20,
@@ -9,10 +24,7 @@ export var radio = {
   'input:focus ~ &': {
     bg: 'transparent'
   },
-  'input ~ &.is-focused': {
-    outline: 'none',
-    boxShadow: 'focus'
-  }
+  'input ~ &.is-focused': _objectSpread({}, focusWithCroppedOutline)
 };
 export var radioField = {
   '.is-horizontal &': {

package/lib/styles/forms/select.js

@@ -15,6 +15,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // Styles for default select and variants go here.
 import { input } from './input';
 import { text } from '../variants';
+import { defaultFocus } from '../variants/buttons';
 var activeFloatLabel = {
   pt: 'md',
   pb: 'xs'
@@ -23,9 +24,7 @@ var activeFloatLabel = {
 export var select = _objectSpread(_objectSpread({}, input), {}, {
   display: 'flex',
   alignItems: 'center',
-  '&.is-focused': {
-    boxShadow: 'focus'
-  },
+  '&.is-focused': _objectSpread({}, defaultFocus),
   '.is-float-label &': _objectSpread({
     height: '45px'
   }, activeFloatLabel)

package/lib/styles/variants/accordion.js

@@ -1,18 +1,3 @@
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-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 { defaultFocus } from '../variants/buttons';
 var accordionTitle = {
   display: 'inline-block !important',
   overflowWrap: 'break-word',
@@ -54,9 +39,12 @@ var accordionGridHeader = {
   color: 'neutral.10',
   flexGrow: 1,
   fontWeight: 700,
-  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+  border: '1px solid transparent',
+  '&.is-focused': {
+    border: '1px solid',
+    borderColor: 'focus',
     zIndex: '10'
-  }),
+  },
   minHeight: '64px',
   '&.is-hovered': {
     backgroundColor: 'accent.99'

package/lib/styles/variants/boxes.js

@@ -58,7 +58,8 @@ var listItem = _objectSpread(_objectSpread({}, base), {}, {
   '&.is-hovered': {
     bg: 'white'
   }
-});
+}); // the transparent border is included so that the content does not shift on hover.
+
 
 var listViewItem = _objectSpread(_objectSpread({}, base), {}, {
   padding: '0px 15px 0px 25px',
@@ -74,17 +75,18 @@ var listViewItem = _objectSpread(_objectSpread({}, base), {}, {
     bg: 'white',
     cursor: 'pointer'
   },
-  '&.is-focused': {
-    boxShadow: 'inset 0 0 5px #5873bdbf'
-  },
   '&.has-separator': {
     borderBottom: '1px solid',
     borderBottomColor: 'line.hairline'
+  },
+  '&.is-focused': {
+    boxShadow: '0 0 0 1px inset #D033FF'
   }
 });
 
 var linkedListViewItem = _objectSpread(_objectSpread({}, listViewItem), {}, {
   minHeight: '75px',
+  height: '76px',
   '&.has-inset-separator': {
     '&:after': {
       content: '""',
@@ -94,6 +96,17 @@ var linkedListViewItem = _objectSpread(_objectSpread({}, listViewItem), {}, {
       bottom: 0,
       borderBottom: '1px solid',
       borderBottomColor: 'line.hairline'
+    },
+    '&.is-focused': {
+      '&:after': {
+        content: '""',
+        position: 'absolute',
+        width: 'calc(100% - 43px)',
+        right: 0,
+        bottom: 0,
+        borderBottom: '1px solid',
+        borderBottomColor: 'focus'
+      }
     }
   }
 });

package/lib/styles/variants/buttons.js

@@ -50,8 +50,14 @@ var defaultHover = {
 };
 export var defaultFocus = {
   outline: '1px solid',
-  outlineColor: 'active',
-  outlineOffset: '4px'
+  outlineColor: 'focus',
+  outlineOffset: '2px'
+};
+export var focusWithCroppedOutline = {
+  boxShadow: 'none',
+  outline: '1px solid',
+  outlineColor: 'focus',
+  outlineOffset: '1px'
 };
 var navItemButton = {
   textDecoration: 'none',
@@ -76,7 +82,7 @@ var navItemButton = {
   wordBreak: 'break-word',
   '&.is-focused': {
     outline: '1px solid',
-    outlineColor: '#D033FF'
+    outlineColor: 'focus'
   },
   '&.is-hovered': {
     bg: 'accent.10'
@@ -256,7 +262,8 @@ var success = _objectSpread(_objectSpread({}, base), {}, {
   bg: 'success.bright',
   border: '1px solid',
   borderColor: 'success.bright',
-  color: 'white'
+  color: 'white',
+  '&.is-focused': _objectSpread({}, defaultFocus)
 });
 
 var critical = _objectSpread(_objectSpread({}, base), {}, {
@@ -264,7 +271,8 @@ var critical = _objectSpread(_objectSpread({}, base), {}, {
   bg: 'critical.bright',
   border: '1px solid',
   borderColor: 'critical.bright',
-  color: 'white'
+  color: 'white',
+  '&.is-focused': _objectSpread({}, defaultFocus)
 });
 
 var inverted = _objectSpread(_objectSpread({}, iconButton), {}, {
@@ -398,7 +406,7 @@ var text = _objectSpread(_objectSpread({}, base), {}, {
   '&.is-hovered': {
     textDecoration: 'underline'
   },
-  '&.is-focused': _objectSpread({}, defaultFocus)
+  '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
 });
 
 var quiet = {
@@ -412,12 +420,9 @@ var chipDeleteButton = {
   mx: '3px !important',
   p: 0,
   width: 14,
-  '&.is-focused, &.is-hovered': {
-    bg: 'accent.40',
-    borderColor: 'accent.40',
-    boxShadow: 'standard',
-    outline: 'none'
-  },
+  '&.is-focused, &.is-hovered': _objectSpread({
+    bg: 'accent.40'
+  }, focusWithCroppedOutline),
   '&.is-pressed': {
     bg: 'accent.20',
     borderColor: 'accent.20'
@@ -469,16 +474,21 @@ var danger = _objectSpread(_objectSpread({}, base), {}, {
 });
 
 var copy = {
-  ml: 'xs',
+  ml: 'sm',
+  mr: 'sm',
   outline: 'none',
   height: 'auto',
+  width: 'auto',
   cursor: 'pointer',
   path: {
     fill: 'neutral.10'
   },
-  '&.is-focused': _objectSpread({
-    boxShadow: 'none'
-  }, defaultFocus)
+  '&.is-focused': {
+    boxShadow: 'none',
+    outline: '1px solid',
+    outlineColor: 'focus',
+    outlineOffset: '1px'
+  }
 };
 var colorField = {
   border: "1px solid ".concat(neutral['80']),
@@ -495,7 +505,10 @@ var imageUpload = _objectSpread(_objectSpread({}, base), {}, {
   padding: 0,
   backgroundColor: 'accent.99',
   border: '2px solid',
-  borderColor: 'neutral.95'
+  borderColor: 'neutral.40',
+  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+    borderColor: 'neutral.40'
+  })
 });
 
 var link = _objectSpread(_objectSpread({}, text), {}, {
@@ -507,7 +520,8 @@ var link = _objectSpread(_objectSpread({}, text), {}, {
   '&.is-current': {
     cursor: 'default',
     color: 'text.primary'
-  }
+  },
+  '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
 });
 
 var neutralText = _objectSpread(_objectSpread({}, link), {}, {
@@ -541,8 +555,9 @@ var environmentBreadcrumb = {
       boxShadow: 'none'
     },
     '&.is-focused': {
-      borderRadius: '2px',
-      boxShadow: '0 0 0 1px #4462ED'
+      outline: '1px solid',
+      outlineColor: 'focus',
+      outlineOffset: '1px'
     },
     '&:focus-visible': {
       outline: 'none'
@@ -574,9 +589,7 @@ var fileInputField = {
       textDecoration: 'underline'
     }
   },
-  '&.is-focused': {
-    boxShadow: 'focus'
-  }
+  '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
 };
 
 var tooltipChip = _objectSpread(_objectSpread({}, chip), {}, {
@@ -693,7 +706,7 @@ var navBarSectionButton = _objectSpread(_objectSpread({}, quiet), {}, {
   width: '100%',
   '&.is-focused': {
     outline: '1px solid',
-    outlineColor: '#D033FF'
+    outlineColor: 'focus'
   },
   '&.is-hovered': {
     backgroundColor: 'accent.10'

package/lib/styles/variants/collapsiblePanel.js

@@ -1,3 +1,18 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+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 { focusWithCroppedOutline } from '../variants/buttons';
 var collapsiblePanelContainer = {
   pr: 'sm',
   minHeight: '80vh',
@@ -16,11 +31,9 @@ var collapsiblePanelContent = {
   fontSize: 'sm',
   height: '100%',
   width: '300px',
-  '&.is-focused': {
-    borderColor: 'accent.80',
-    boxShadow: 'focus',
-    outline: 'none'
-  },
+  '&.is-focused': _objectSpread({
+    borderColor: 'accent.80'
+  }, focusWithCroppedOutline),
   '& div': {
     alignItems: 'center',
     display: 'flex',

package/lib/styles/variants/links.js

@@ -12,6 +12,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 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 { focusWithCroppedOutline } from './buttons';
 var app = {
   color: 'active',
   fontFamily: 'standard',
@@ -21,9 +22,7 @@ var app = {
   '&.is-hovered': {
     textDecoration: 'underline'
   },
-  '&.is-focused': {
-    textDecoration: 'underline'
-  },
+  '&.is-focused': _objectSpread({}, focusWithCroppedOutline),
   '&.is-pressed': {
     color: 'accent.40',
     textDecoration: 'underline'
@@ -37,7 +36,8 @@ var web = _objectSpread(_objectSpread({}, app), {}, {
   textDecoration: 'underline',
   '&:visited': {
     color: 'decorative.7'
-  }
+  },
+  '&.is-focused': _objectSpread({}, focusWithCroppedOutline)
 });
 
 export default {

package/lib/styles/variants/navBar.js

@@ -65,7 +65,7 @@ var navItem = {
   fontSize: '16px',
   '&.is-focused': {
     outline: '1px solid',
-    outlineColor: '#D033FF'
+    outlineColor: 'focus'
   },
   '&.is-hovered': {
     backgroundColor: 'accent.10'

package/lib/styles/variants/stepper.js

@@ -13,6 +13,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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; }
 
 /** Tabs styles */
+import { defaultFocus } from './buttons';
 var wrapper = {
   width: '100%'
 };
@@ -26,10 +27,9 @@ var tab = {
   mb: 0,
   mr: 0,
   outline: 'none',
-  '&.is-focused': {
-    boxShadow: 'focus',
+  '&.is-focused': _objectSpread({
     borderRadius: '50%'
-  },
+  }, defaultFocus),
   '&:not(:first-of-type)': {
     flex: 1,
     maxWidth: 122

package/lib/styles/variants/tabs.js

@@ -1,3 +1,18 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+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 { focusWithCroppedOutline } from './buttons';
 export var tab = {
   pt: 10,
   cursor: 'pointer',
@@ -7,7 +22,7 @@ export var tab = {
   transform: 'translateY(1px)',
   width: '100%',
   '&.is-focused': {
-    boxShadow: 'focus'
+    '& > span': _objectSpread({}, focusWithCroppedOutline)
   },
   '&.is-disabled': {
     cursor: 'default'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.37.1",
+  "version": "1.37.2-alpha.1",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",