@spothero/ui 17.2.1 → 17.2.4

package/dist/components/Button/Button.styles.js

@@ -18,7 +18,7 @@ const baseStyle = {
   borderStyle: 'solid',
   borderRadius: '1.25rem',
   textTransform: 'capitalize',
-  transition: 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+  transition: 'all normal ease',
   _disabled: {
     cursor: 'not-allowed',
     opacity: 1,

package/dist/components/Checkbox/styles/index.js

@@ -12,8 +12,9 @@ const baseStyle = {
     borderWidth: 1,
     borderStyle: 'solid',
     borderImage: 'initial',
-    borderRadius: 'var(--chakra-radii-sm)',
+    borderRadius: 'sm',
     borderColor: 'gray.600',
+    transition: 'all 150ms ease',
     _readOnly: {
       boxShadow: 'none !important',
       userSelect: 'all'
@@ -25,11 +26,11 @@ const baseStyle = {
     },
     _focus: {
       zIndex: 1,
-      boxShadow: t => `0 0 1px 1px ${t.colors.primary['300']}`
+      boxShadow: 'outline'
     },
     _checked: {
-      borderColor: 'brandBlue',
-      backgroundColor: 'brandBlue',
+      borderColor: 'primary.default',
+      backgroundColor: 'primary.default',
       _hover: {
         borderColor: 'primary.600',
         backgroundColor: 'primary.600'
@@ -38,6 +39,9 @@ const baseStyle = {
         borderColor: 'gray.200',
         backgroundColor: 'gray.200'
       }
+    },
+    '& svg': {
+      filter: `drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25))`
     }
   },
   label: {

package/dist/components/Input/styles/index.js

@@ -35,7 +35,7 @@ const variants = {
         fontWeight: 'normal'
       },
       _focus: {
-        borderColor: 'brandBlue'
+        borderColor: 'primary.default'
       },
       _hover: {
         borderColor: 'gray.300'

package/dist/components/Link/Link.styles.js

@@ -1,15 +1,19 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.variants = exports.default = void 0;
+var _merge = _interopRequireDefault(require("lodash/merge"));
+var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
 const baseStyle = {
-  transition: `all 0.15s ease-out`,
+  transition: `all 0.15s ease`,
   color: 'text.link.light',
   fontWeight: 'semibold',
   _hover: {
-    color: 'primary.600'
+    color: 'primary.600',
+    textDecoration: 'none'
   },
   _focus: {
     boxShadow: 'outline'
@@ -34,9 +38,9 @@ exports.variants = variants;
 const defaultProps = {
   variant: 'standard'
 };
-var _default = {
+var _default = (0, _merge.default)(_theme.default.components.Link, {
   baseStyle,
   variants,
   defaultProps
-};
+});
 exports.default = _default;

package/dist/components/Popover/styles/popover-close-button.js

@@ -20,7 +20,10 @@ const closeButtonStyles = _ref => {
     padding: 4,
     borderTopRightRadius: 4,
     _hover: pseudoStyles(variant),
-    _focus: pseudoStyles(variant)
+    _focus: {
+      ...pseudoStyles(variant),
+      boxShadow: 'outline'
+    }
   };
 };
 var _default = closeButtonStyles;

package/dist/components/Popover/styles/popover-content.js

@@ -20,7 +20,10 @@ const popoverContentStyles = _ref => {
     borderWidth: '1px',
     borderStyle: 'solid',
     '--popper-arrow-shadow-color': t => t.colors.gray['100'],
-    zIndex: 'layer10'
+    zIndex: 'layer10',
+    _focusVisible: {
+      outline: '3px solid rgba(91, 170, 250, 0.7)'
+    }
   };
 };
 var _default = popoverContentStyles;

package/dist/components/Radio/styles/index.js

@@ -14,25 +14,35 @@ const baseStyle = {
     borderWidth: '1px',
     borderColor: 'gray.dark',
     backgroundColor: 'white',
+    color: 'white',
     minWidth: 5,
     minHeight: 5,
     marginTop: 1,
+    transition: 'all 150ms ease',
+    _before: {
+      content: '""',
+      display: 'inline-block',
+      position: 'relative',
+      width: '0px',
+      height: '0px',
+      opacity: '0',
+      borderRadius: '50%',
+      background: 'currentcolor',
+      transition: 'all 150ms ease-in',
+      filter: `drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25))`
+    },
     _checked: {
-      borderWidth: 0,
+      borderColor: 'primary.default',
       color: 'white',
       backgroundColor: 'primary.default',
       _before: {
-        content: '""',
-        display: 'inline-block',
-        position: 'relative',
         width: 2,
         height: 2,
-        borderRadius: '50%',
-        background: 'currentcolor'
+        opacity: '1'
       }
     },
     _focus: {
-      boxShadow: t => `0 0 1px 2px ${t.colors.primary['300']}`
+      boxShadow: 'outline'
     },
     _disabled: {
       borderColor: 'gray.200',

package/dist/components/Switch/styles/index.js

@@ -14,7 +14,15 @@ const overrides = {
   },
   baseStyle: props => (0, _merge.default)(_theme.default.components.Switch.baseStyle(props), {
     track: {
-      bg: 'gray.medium'
+      bg: 'gray.medium',
+      overflow: 'clip'
+    },
+    thumb: {
+      transition: 'all 150ms ease',
+      boxShadow: 'base',
+      _hover: {
+        boxShadow: 'md'
+      }
     }
   })
 };

package/dist/components/Tabs/styles/index.js

@@ -23,9 +23,6 @@ const variants = {
         borderColor: 'primary.default',
         fontWeight: 'semibold'
       },
-      _focus: {
-        boxShadow: 'none'
-      },
       _active: {
         color: 'black',
         bg: 'transparent'

package/dist/theme/base/index.js

@@ -52,6 +52,12 @@ Object.defineProperty(exports, "notificationStatusStyles", {
     return _notifications.notificationStatusStyles;
   }
 });
+Object.defineProperty(exports, "shadows", {
+  enumerable: true,
+  get: function () {
+    return _shadows.default;
+  }
+});
 Object.defineProperty(exports, "sizes", {
   enumerable: true,
   get: function () {
@@ -66,6 +72,7 @@ Object.defineProperty(exports, "zIndices", {
 });
 var _sizes = _interopRequireDefault(require("./sizes"));
 var _colors = _interopRequireDefault(require("./colors"));
+var _shadows = _interopRequireDefault(require("./shadows"));
 var _zindices = _interopRequireDefault(require("./zindices"));
 var _breakpoints = _interopRequireDefault(require("./breakpoints"));
 var _typography = require("./typography");

package/dist/theme/base/shadows.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _merge = _interopRequireDefault(require("lodash/merge"));
+var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
+const shadows = {
+  outline: '0 0 0 3px rgba(91, 170, 250, 0.7)' // primary.400, 70% opacity
+};
+var _default = (0, _merge.default)(_theme.default.shadows, shadows);
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "17.2.1",
+  "version": "17.2.4",
   "description": "SpotHero's React component UI library.",
   "main": "./dist/components/index.js",
   "exports": "./dist/components/index.js",
@@ -57,7 +57,6 @@
     "clean": "rm -rf docs v2 lib styles coverage || true",
     "lint": "eslint .storybook src --ext .jsx,.js",
     "start": "start-storybook -p 6006",
-    "start:ci": "http-server ./docs --port 8000 --silent",
     "test": "npm run test:unit",
     "test:template": "NODE_ENV=test jest --config ./jest.config.json",
     "test:unit": "npm run test:template -- --coverage",
@@ -68,10 +67,6 @@
     "release": "npm-release",
     "publish-storybook": "npm run build:storybook && push-dir --dir=docs/v2 --branch=gh-pages --allow-unclean"
   },
-  "engines": {
-    "node": ">=16.14.2",
-    "npm": ">=8.5.0"
-  },
   "devDependencies": {
     "@babel/cli": "7.14.5",
     "@babel/core": "7.14.6",
@@ -99,7 +94,6 @@
     "classnames": "2.2.6",
     "eslint-loader": "4.0.2",
     "get-contrast-ratio": "0.2.1",
-    "http-server": "0.12.3",
     "jest": "26.6.3",
     "jest-chain": "1.1.5",
     "jest-date-mock": "1.0.8",
@@ -146,4 +140,4 @@
     "react-redux": ">=7.0.0",
     "redux": ">=4.0.0"
   }
-}
+}