@chakra-ui/theme - npm Package Compare versions

Comparing version 1.0.0-next.2 to 1.0.0-next.3

CHANGELOG.md

 # Change Log
 
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [1.0.0-next.2](https://github.com/chakra-ui/chakra-ui/compare/@chakra-ui/theme@0.0.3...@chakra-ui/theme@1.0.0-next.2) (2020-06-22)
+# [1.0.0-next.3](https://github.com/chakra-ui/chakra-ui/compare/@chakra-ui/theme@0.0.3...@chakra-ui/theme@1.0.0-next.3) (2020-06-28)
 
-
 ### Bug Fixes
 
-* [#891](https://github.com/chakra-ui/chakra-ui/issues/891) ([e107acc](https://github.com/chakra-ui/chakra-ui/commit/e107acc8487898a965b0d695c1da71f46fc56d5e))
-* ts issue with sx prop ([d3b1340](https://github.com/chakra-ui/chakra-ui/commit/d3b1340cb255937927b4d4c56ce218141570b951))
+- [#891](https://github.com/chakra-ui/chakra-ui/issues/891)
+  ([e107acc](https://github.com/chakra-ui/chakra-ui/commit/e107acc8487898a965b0d695c1da71f46fc56d5e))
+- ts issue with sx prop
+  ([d3b1340](https://github.com/chakra-ui/chakra-ui/commit/d3b1340cb255937927b4d4c56ce218141570b951))
 
-
 ### Features
 
-* **divider:** revise divider and add vertical support ([7b67e9a](https://github.com/chakra-ui/chakra-ui/commit/7b67e9a9814b282aa4361efc472137e78b0d22b7))
-* **theme:** reduce default z-index values ([c925ca2](https://github.com/chakra-ui/chakra-ui/commit/c925ca2c6b598477146ceea5857eac48a2bd71f4))
+- **divider:** revise divider and add vertical support
+  ([7b67e9a](https://github.com/chakra-ui/chakra-ui/commit/7b67e9a9814b282aa4361efc472137e78b0d22b7))
+- **theme:** reduce default z-index values
+  ([c925ca2](https://github.com/chakra-ui/chakra-ui/commit/c925ca2c6b598477146ceea5857eac48a2bd71f4))
 
+### Reverts
 
+- theme z-indexes
+  ([52494e0](https://github.com/chakra-ui/chakra-ui/commit/52494e07f452ba973f76a5bdeb1dc32025fa9a1a))
 
-
-
 # Change Log
@@ -29,3 +32,3 @@
 
-# [1.0.0-next.1](https://github.com/chakra-ui/chakra-ui/compare/@chakra-ui/theme@0.0.3...@chakra-ui/theme@1.0.0-next.1) (2020-06-21)
+# [1.0.0-next.2](https://github.com/chakra-ui/chakra-ui/compare/@chakra-ui/theme@0.0.3...@chakra-ui/theme@1.0.0-next.2) (2020-06-21)
 
@@ -32,0 +35,0 @@ ### Bug Fixes

dist/cjs/components/alert.js

@@ -10,3 +10,3 @@ "use strict";
 
-function getSubtleStyle(props) {
+function subtle(props) {
   var t = props.theme,
@@ -27,5 +27,5 @@ c = props.colorScheme;
 
-function getLeftAccentStyle(props) {
+function leftAccent(props) {
   var c = props.colorScheme;
-  var subtleStyle = getSubtleStyle(props);
+  var subtleStyle = subtle(props);
   return {
@@ -43,5 +43,5 @@ Root: _extends({
 
-function getTopAccentStyle(props) {
+function topAccent(props) {
   var c = props.colorScheme;
-  var subtleStyle = getSubtleStyle(props);
+  var subtleStyle = subtle(props);
   return {
@@ -59,3 +59,3 @@ Root: _extends({
 
-function getSolidStyle(props) {
+function solid(props) {
   var c = props.colorScheme;
@@ -85,6 +85,6 @@ return {
   variants: {
-    solid: getSolidStyle,
-    subtle: getSubtleStyle,
-    "left-accent": getLeftAccentStyle,
-    "top-accent": getTopAccentStyle
+    solid: solid,
+    subtle: subtle,
+    "left-accent": leftAccent,
+    "top-accent": topAccent
   }
@@ -91,0 +91,0 @@ };

dist/cjs/components/badge.js

@@ -8,6 +8,6 @@ "use strict";
 
-function getSolidStyle(props) {
+function solid(props) {
   var c = props.colorScheme,
-      t = props.theme;
-  var dark = (0, _themeTools.transparentize)(c + ".500", 0.6)(t);
+      theme = props.theme;
+  var dark = (0, _themeTools.transparentize)(c + ".500", 0.6)(theme);
   return {
@@ -19,6 +19,6 @@ bg: (0, _themeTools.mode)(c + ".500", dark)(props),
 
-function getSubtleStyle(props) {
+function subtle(props) {
   var c = props.colorScheme,
-      t = props.theme;
-  var darkBg = (0, _themeTools.ink)(c + ".200", "lowest")(t);
+      theme = props.theme;
+  var darkBg = (0, _themeTools.ink)(c + ".200", "lowest")(theme);
   return {
@@ -30,7 +30,7 @@ bg: (0, _themeTools.mode)(c + ".100", darkBg)(props),
 
-function getOutlineStyle(props) {
+function outline(props) {
   var c = props.colorScheme,
-      t = props.theme;
-  var dark = (0, _themeTools.transparentize)(c + ".200", 0.8)(t);
-  var light = (0, _themeTools.getColor)(t, c + ".500");
+      theme = props.theme;
+  var dark = (0, _themeTools.transparentize)(c + ".200", 0.8)(theme);
+  var light = (0, _themeTools.getColor)(theme, c + ".500");
   var color = (0, _themeTools.mode)(light, dark)(props);
@@ -56,5 +56,5 @@ return {
   variants: {
-    solid: getSolidStyle,
-    outline: getOutlineStyle,
-    subtle: getSubtleStyle
+    solid: solid,
+    outline: outline,
+    subtle: subtle
   }
@@ -61,0 +61,0 @@ };

dist/cjs/components/button.js

@@ -10,3 +10,3 @@ "use strict";
 
-var grayGhostStyle = function grayGhostStyle(props) {
+var grayGhost = function grayGhost(props) {
   return {
@@ -23,6 +23,6 @@ color: (0, _themeTools.mode)("inherit", "whiteAlpha.900")(props),
 
-function getGhostStyle(props) {
+function ghost(props) {
   var c = props.colorScheme,
       t = props.theme;
-  if (c === "gray") return grayGhostStyle(props);
+  if (c === "gray") return grayGhost(props);
   var darkHover = (0, _themeTools.transparentize)(c + ".200", 0.12)(t);
@@ -42,3 +42,3 @@ var darkActive = (0, _themeTools.transparentize)(c + ".200", 0.24)(t);
 
-function getOutlineStyle(props) {
+function outline(props) {
   var c = props.colorScheme;
@@ -49,6 +49,6 @@ var borderColor = (0, _themeTools.mode)("gray.200", "whiteAlpha.300")(props);
     borderColor: c === "gray" ? borderColor : "currentColor"
-  }, getGhostStyle(props));
+  }, ghost(props));
 }
 
-var graySolidStyle = function graySolidStyle(props) {
+function graySolid(props) {
   return {
@@ -63,7 +63,7 @@ bg: (0, _themeTools.mode)("gray.100", "whiteAlpha.200")(props),
   };
-};
+}
 
-function getSolidStyle(props) {
+function solid(props) {
   var c = props.colorScheme;
-  if (c === "gray") return graySolidStyle(props);
+  if (c === "gray") return graySolid(props);
   return {
@@ -81,3 +81,3 @@ bg: (0, _themeTools.mode)(c + ".500", c + ".200")(props),
 
-function getLinkStyle(props) {
+function link(props) {
   var c = props.colorScheme;
@@ -156,6 +156,6 @@ return {
     unstyled: unstyled,
-    solid: getSolidStyle,
-    ghost: getGhostStyle,
-    link: getLinkStyle,
-    outline: getOutlineStyle
+    solid: solid,
+    ghost: ghost,
+    link: link,
+    outline: outline
   }
@@ -162,0 +162,0 @@ };

dist/cjs/components/checkbox.js

@@ -8,3 +8,3 @@ "use strict";
 
-function getCheckedStyle(props) {
+function checkedStyle(props) {
   var c = props.colorScheme;
@@ -36,3 +36,3 @@ return {
       color: "white",
-      _checked: getCheckedStyle(props),
+      _checked: checkedStyle(props),
       _indeterminate: {
@@ -39,0 +39,0 @@ bg: (0, _themeTools.mode)(c + ".500", c + ".200")(props),

dist/cjs/components/index.js

@@ -42,2 +42,4 @@ "use strict";
 
+var _select = _interopRequireDefault(require("./select"));
+
 var _spinner = _interopRequireDefault(require("./spinner"));
@@ -98,3 +100,3 @@
   Kbd: _kbd["default"],
-  Select: _input["default"],
+  Select: _select["default"],
   Textarea: _textarea["default"],
@@ -101,0 +103,0 @@ PinInput: _pinInput["default"],

dist/cjs/components/input-addon.js

@@ -8,3 +8,7 @@ "use strict";
 
-function getOutlineStyle(props) {
+var _input = _interopRequireDefault(require("./input"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function outline(props) {
   return {
@@ -17,3 +21,3 @@ border: "1px solid",
 
-function getFilledStyle(props) {
+function filled(props) {
   return {
@@ -26,12 +30,9 @@ border: "2px solid",
 
-function getFlushedStyle(props) {
-  return {
-    borderBottom: "2px solid",
-    borderColor: "inherit",
-    borderRadius: 0,
-    paddingX: 0,
-    bg: "transparent"
-  };
-}
-
+var flushed = {
+  borderBottom: "2px solid",
+  borderColor: "inherit",
+  borderRadius: 0,
+  paddingX: 0,
+  bg: "transparent"
+};
 var unstyled = {
@@ -42,28 +43,9 @@ bg: "transparent",
 };
-var sizes = {
-  lg: {
-    fontSize: "lg",
-    paddingX: 4,
-    paddingY: 2,
-    borderRadius: "md"
-  },
-  md: {
-    fontSize: "md",
-    paddingX: 4,
-    paddingY: 2,
-    borderRadius: "md"
-  },
-  sm: {
-    fontSize: "sm",
-    paddingX: 3,
-    paddingY: 1,
-    borderRadius: "sm"
-  }
-};
+var sizes = _input["default"].sizes;
 var InputAddon = {
   sizes: sizes,
   variants: {
-    outline: getOutlineStyle,
-    filled: getFilledStyle,
-    flushed: getFlushedStyle,
+    outline: outline,
+    filled: filled,
+    flushed: flushed,
     unstyled: unstyled
@@ -70,0 +52,0 @@ }

dist/cjs/components/input.js

@@ -8,11 +8,13 @@ "use strict";
 
-var getDefaults = function getDefaults(props) {
+function getDefaults(props) {
+  var fc = props.focusBorderColor,
+      ec = props.errorBorderColor;
   return {
-    focusBorderColor: props.focusBorderColor || (0, _themeTools.mode)("blue.500", "blue.300")(props),
-    errorBorderColor: props.errorBorderColor || (0, _themeTools.mode)("red.500", "red.300")(props)
+    focusBorderColor: fc || (0, _themeTools.mode)("blue.500", "blue.300")(props),
+    errorBorderColor: ec || (0, _themeTools.mode)("red.500", "red.300")(props)
   };
-};
+}
 
-function getOutlineStyle(props) {
-  var t = props.theme;
+function outline(props) {
+  var theme = props.theme;
 
@@ -30,2 +32,6 @@ var _getDefaults = getDefaults(props),
     },
+    _readOnly: {
+      boxShadow: "none !important",
+      userSelect: "all"
+    },
     _disabled: {
@@ -37,8 +43,8 @@ opacity: 0.4,
       zIndex: 1,
-      borderColor: (0, _themeTools.getColor)(t, fc),
-      boxShadow: "0 0 0 1px " + (0, _themeTools.getColor)(t, fc)
+      borderColor: (0, _themeTools.getColor)(theme, fc),
+      boxShadow: "0 0 0 1px " + (0, _themeTools.getColor)(theme, fc)
     },
     _invalid: {
-      borderColor: (0, _themeTools.getColor)(t, ec),
-      boxShadow: "0 0 0 1px " + (0, _themeTools.getColor)(t, ec)
+      borderColor: (0, _themeTools.getColor)(theme, ec),
+      boxShadow: "0 0 0 1px " + (0, _themeTools.getColor)(theme, ec)
     }
@@ -48,4 +54,4 @@ };
 
-function getFilledStyle(props) {
-  var t = props.theme;
+function filled(props) {
+  var theme = props.theme;
 
@@ -63,2 +69,6 @@ var _getDefaults2 = getDefaults(props),
     },
+    _readOnly: {
+      boxShadow: "none !important",
+      userSelect: "all"
+    },
     _disabled: {
@@ -71,6 +81,6 @@ opacity: 0.4,
       bg: "transparent",
-      borderColor: (0, _themeTools.getColor)(t, fc)
+      borderColor: (0, _themeTools.getColor)(theme, fc)
     },
     _invalid: {
-      borderColor: (0, _themeTools.getColor)(t, ec)
+      borderColor: (0, _themeTools.getColor)(theme, ec)
     }
@@ -80,4 +90,4 @@ };
 
-function getFlushedStyle(props) {
-  var t = props.theme;
+function flushed(props) {
+  var theme = props.theme;
 
@@ -94,8 +104,12 @@ var _getDefaults3 = getDefaults(props),
     bg: "transparent",
+    _readOnly: {
+      boxShadow: "none !important",
+      userSelect: "all"
+    },
     _focus: {
       zIndex: 1,
-      borderColor: (0, _themeTools.getColor)(t, fc)
+      borderColor: (0, _themeTools.getColor)(theme, fc)
     },
     _invalid: {
-      borderColor: (0, _themeTools.getColor)(t, ec)
+      borderColor: (0, _themeTools.getColor)(theme, ec)
     }
@@ -113,5 +127,5 @@ };
     fontSize: "lg",
-    paddingX: 4,
-    paddingY: 2,
-    minHeight: 12,
+    paddingLeft: 4,
+    paddingRight: 4,
+    height: 12,
     borderRadius: "md"
@@ -121,5 +135,5 @@ },
     fontSize: "md",
-    paddingX: 4,
-    paddingY: 2,
-    minHeight: 10,
+    paddingLeft: 4,
+    paddingRight: 4,
+    height: 10,
     borderRadius: "md"
@@ -129,5 +143,5 @@ },
     fontSize: "sm",
-    paddingX: 3,
-    paddingY: 1,
-    minHeight: 8,
+    paddingLeft: 3,
+    paddingRight: 3,
+    height: 8,
     borderRadius: "sm"
@@ -144,11 +158,11 @@ }
     outline: 0,
-    lineHeight: 1,
-    transitionDuration: "0.2s",
-    transitionProperty: "box-shadow, border, color, background-color"
+    position: "relative",
+    appearance: "none",
+    transition: "all 0.2s"
   },
   sizes: sizes,
   variants: {
-    outline: getOutlineStyle,
-    filled: getFilledStyle,
-    flushed: getFlushedStyle,
+    outline: outline,
+    filled: filled,
+    flushed: flushed,
     unstyled: unstyled
@@ -155,0 +169,0 @@ }

dist/cjs/components/menu.js

@@ -14,3 +14,3 @@ "use strict";
 
-var getMenuListStyle = function getMenuListStyle(props) {
+var menuListStyle = function menuListStyle(props) {
   return {
@@ -30,3 +30,3 @@ bg: (0, _themeTools.mode)("#fff", "gray.700")(props),
 
-var getMenuItemStyle = function getMenuItemStyle(props) {
+var menuItemStyle = function menuItemStyle(props) {
   return {
@@ -60,4 +60,4 @@ width: "100%",
       MenuButton: _button["default"].baseStyle,
-      MenuList: getMenuListStyle(props),
-      MenuItem: getMenuItemStyle(props),
+      MenuList: menuListStyle(props),
+      MenuItem: menuItemStyle(props),
       MenuGroupTitle: {
@@ -64,0 +64,0 @@ marginX: 4,

dist/cjs/components/modal.js

@@ -12,3 +12,3 @@ "use strict";
  */
-function getSize(value) {
+var getSize = function getSize(value) {
   return {
@@ -19,3 +19,3 @@ Content: {
   };
-}
+};
 
@@ -22,0 +22,0 @@ var Modal = {

dist/cjs/components/tabs.js

@@ -8,3 +8,3 @@ "use strict";
 
-function getLineStyle(props) {
+function line(props) {
   var c = props.colorScheme;
@@ -35,3 +35,3 @@ return {
 
-function getEnclosedStyle(props) {
+function enclosed(props) {
   var c = props.colorScheme;
@@ -58,3 +58,3 @@ return {
 
-function getEnclosedColoredStyle(props) {
+function enclosedColored(props) {
   var c = props.colorScheme;
@@ -86,5 +86,5 @@ return {
 
-function getSoftRoundedStyle(props) {
+function softRounded(props) {
   var c = props.colorScheme,
-      t = props.theme;
+      theme = props.theme;
   return {
@@ -96,4 +96,4 @@ Tab: {
       _selected: {
-        color: (0, _themeTools.getColor)(t, c + ".700"),
-        bg: (0, _themeTools.getColor)(t, c + ".100")
+        color: (0, _themeTools.getColor)(theme, c + ".700"),
+        bg: (0, _themeTools.getColor)(theme, c + ".100")
       }
@@ -105,3 +105,3 @@ },
 
-function getSolidRoundedStyle(props) {
+function solidRounded(props) {
   var c = props.colorScheme;
@@ -136,5 +136,3 @@ return {
     },
-    TabList: {
-      display: "flex"
-    },
+    TabList: {},
     TabPanel: {
@@ -168,7 +166,7 @@ padding: 4
   variants: {
-    line: getLineStyle,
-    enclosed: getEnclosedStyle,
-    "soft-rounded": getSoftRoundedStyle,
-    "enclosed-colored": getEnclosedColoredStyle,
-    "solid-rounded": getSolidRoundedStyle,
+    line: line,
+    enclosed: enclosed,
+    "soft-rounded": softRounded,
+    "enclosed-colored": enclosedColored,
+    "solid-rounded": solidRounded,
     unstyled: {}
@@ -175,0 +173,0 @@ }

dist/cjs/foundations/z-index.js

@@ -8,3 +8,13 @@ "use strict";
   auto: "auto",
-  base: 0
+  base: 0,
+  docked: 10,
+  dropdown: 1000,
+  sticky: 1100,
+  banner: 1200,
+  overlay: 1300,
+  modal: 1400,
+  popover: 1500,
+  skipLink: 1600,
+  toast: 1700,
+  tooltip: 1800
 };
@@ -11,0 +21,0 @@ var _default = zIndices;

dist/esm/components/alert.js

@@ -5,3 +5,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function getSubtleStyle(props) {
+function subtle(props) {
   var {
@@ -24,7 +24,7 @@ theme: t,
 
-function getLeftAccentStyle(props) {
+function leftAccent(props) {
   var {
     colorScheme: c
   } = props;
-  var subtleStyle = getSubtleStyle(props);
+  var subtleStyle = subtle(props);
   return {
@@ -42,7 +42,7 @@ Root: _extends({
 
-function getTopAccentStyle(props) {
+function topAccent(props) {
   var {
     colorScheme: c
   } = props;
-  var subtleStyle = getSubtleStyle(props);
+  var subtleStyle = subtle(props);
   return {
@@ -60,3 +60,3 @@ Root: _extends({
 
-function getSolidStyle(props) {
+function solid(props) {
   var {
@@ -88,6 +88,6 @@ colorScheme: c
   variants: {
-    solid: getSolidStyle,
-    subtle: getSubtleStyle,
-    "left-accent": getLeftAccentStyle,
-    "top-accent": getTopAccentStyle
+    solid: solid,
+    subtle: subtle,
+    "left-accent": leftAccent,
+    "top-accent": topAccent
   }
@@ -94,0 +94,0 @@ };

dist/esm/components/badge.js

 import { mode, getColor, ink, transparentize } from "@chakra-ui/theme-tools";
 
-function getSolidStyle(props) {
+function solid(props) {
   var {
     colorScheme: c,
-    theme: t
+    theme
   } = props;
-  var dark = transparentize(c + ".500", 0.6)(t);
+  var dark = transparentize(c + ".500", 0.6)(theme);
   return {
@@ -15,8 +15,8 @@ bg: mode(c + ".500", dark)(props),
 
-function getSubtleStyle(props) {
+function subtle(props) {
   var {
     colorScheme: c,
-    theme: t
+    theme
   } = props;
-  var darkBg = ink(c + ".200", "lowest")(t);
+  var darkBg = ink(c + ".200", "lowest")(theme);
   return {
@@ -28,9 +28,9 @@ bg: mode(c + ".100", darkBg)(props),
 
-function getOutlineStyle(props) {
+function outline(props) {
   var {
     colorScheme: c,
-    theme: t
+    theme
   } = props;
-  var dark = transparentize(c + ".200", 0.8)(t);
-  var light = getColor(t, c + ".500");
+  var dark = transparentize(c + ".200", 0.8)(theme);
+  var light = getColor(theme, c + ".500");
   var color = mode(light, dark)(props);
@@ -56,5 +56,5 @@ return {
   variants: {
-    solid: getSolidStyle,
-    outline: getOutlineStyle,
-    subtle: getSubtleStyle
+    solid,
+    outline,
+    subtle
   }
@@ -61,0 +61,0 @@ };

dist/esm/components/button.js

@@ -5,3 +5,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-var grayGhostStyle = props => ({
+var grayGhost = props => ({
   color: mode("inherit", "whiteAlpha.900")(props),
@@ -16,3 +16,3 @@ _hover: {
 
-function getGhostStyle(props) {
+function ghost(props) {
   var {
@@ -22,3 +22,3 @@ colorScheme: c,
   } = props;
-  if (c === "gray") return grayGhostStyle(props);
+  if (c === "gray") return grayGhost(props);
   var darkHover = transparentize(c + ".200", 0.12)(t);
@@ -38,3 +38,3 @@ var darkActive = transparentize(c + ".200", 0.24)(t);
 
-function getOutlineStyle(props) {
+function outline(props) {
   var {
@@ -47,20 +47,22 @@ colorScheme: c
     borderColor: c === "gray" ? borderColor : "currentColor"
-  }, getGhostStyle(props));
+  }, ghost(props));
 }
 
-var graySolidStyle = props => ({
-  bg: mode("gray.100", "whiteAlpha.200")(props),
-  _hover: {
-    bg: mode("gray.200", "whiteAlpha.300")(props)
-  },
-  _active: {
-    bg: mode("gray.300", "whiteAlpha.400")(props)
-  }
-});
+function graySolid(props) {
+  return {
+    bg: mode("gray.100", "whiteAlpha.200")(props),
+    _hover: {
+      bg: mode("gray.200", "whiteAlpha.300")(props)
+    },
+    _active: {
+      bg: mode("gray.300", "whiteAlpha.400")(props)
+    }
+  };
+}
 
-function getSolidStyle(props) {
+function solid(props) {
   var {
     colorScheme: c
   } = props;
-  if (c === "gray") return graySolidStyle(props);
+  if (c === "gray") return graySolid(props);
   return {
@@ -78,3 +80,3 @@ bg: mode(c + ".500", c + ".200")(props),
 
-function getLinkStyle(props) {
+function link(props) {
   var {
@@ -155,6 +157,6 @@ colorScheme: c
     unstyled,
-    solid: getSolidStyle,
-    ghost: getGhostStyle,
-    link: getLinkStyle,
-    outline: getOutlineStyle
+    solid,
+    ghost,
+    link,
+    outline
   }
@@ -161,0 +163,0 @@ };

dist/esm/components/checkbox.js

 import { mode } from "@chakra-ui/theme-tools";
 
-function getCheckedStyle(props) {
+function checkedStyle(props) {
   var {
@@ -34,3 +34,3 @@ colorScheme: c
       color: "white",
-      _checked: getCheckedStyle(props),
+      _checked: checkedStyle(props),
       _indeterminate: {
@@ -37,0 +37,0 @@ bg: mode(c + ".500", c + ".200")(props),

dist/esm/components/index.js

@@ -19,2 +19,3 @@ import Accordion from "./accordion";
 import Slider from "./slider";
+import Select from "./select";
 import Spinner from "./spinner";
@@ -59,3 +60,3 @@ import Switch from "./switch";
   Kbd,
-  Select: Input,
+  Select,
   Textarea,
@@ -62,0 +63,0 @@ PinInput,

dist/esm/components/input-addon.js

 import { mode } from "@chakra-ui/theme-tools";
+import Input from "./input";
 
-function getOutlineStyle(props) {
+function outline(props) {
   return {
@@ -11,3 +12,3 @@ border: "1px solid",
 
-function getFilledStyle(props) {
+function filled(props) {
   return {
@@ -20,12 +21,9 @@ border: "2px solid",
 
-function getFlushedStyle(props) {
-  return {
-    borderBottom: "2px solid",
-    borderColor: "inherit",
-    borderRadius: 0,
-    paddingX: 0,
-    bg: "transparent"
-  };
-}
-
+var flushed = {
+  borderBottom: "2px solid",
+  borderColor: "inherit",
+  borderRadius: 0,
+  paddingX: 0,
+  bg: "transparent"
+};
 var unstyled = {
@@ -36,28 +34,9 @@ bg: "transparent",
 };
-var sizes = {
-  lg: {
-    fontSize: "lg",
-    paddingX: 4,
-    paddingY: 2,
-    borderRadius: "md"
-  },
-  md: {
-    fontSize: "md",
-    paddingX: 4,
-    paddingY: 2,
-    borderRadius: "md"
-  },
-  sm: {
-    fontSize: "sm",
-    paddingX: 3,
-    paddingY: 1,
-    borderRadius: "sm"
-  }
-};
+var sizes = Input.sizes;
 var InputAddon = {
   sizes,
   variants: {
-    outline: getOutlineStyle,
-    filled: getFilledStyle,
-    flushed: getFlushedStyle,
+    outline,
+    filled,
+    flushed,
     unstyled
@@ -64,0 +43,0 @@ }

dist/esm/components/input.js

 import { mode, getColor } from "@chakra-ui/theme-tools";
 
-var getDefaults = props => ({
-  focusBorderColor: props.focusBorderColor || mode("blue.500", "blue.300")(props),
-  errorBorderColor: props.errorBorderColor || mode("red.500", "red.300")(props)
-});
+function getDefaults(props) {
+  var {
+    focusBorderColor: fc,
+    errorBorderColor: ec
+  } = props;
+  return {
+    focusBorderColor: fc || mode("blue.500", "blue.300")(props),
+    errorBorderColor: ec || mode("red.500", "red.300")(props)
+  };
+}
 
-function getOutlineStyle(props) {
+function outline(props) {
   var {
-    theme: t
+    theme
   } = props;
@@ -23,2 +29,6 @@ var {
     },
+    _readOnly: {
+      boxShadow: "none !important",
+      userSelect: "all"
+    },
     _disabled: {
@@ -30,8 +40,8 @@ opacity: 0.4,
       zIndex: 1,
-      borderColor: getColor(t, fc),
-      boxShadow: "0 0 0 1px " + getColor(t, fc)
+      borderColor: getColor(theme, fc),
+      boxShadow: "0 0 0 1px " + getColor(theme, fc)
     },
     _invalid: {
-      borderColor: getColor(t, ec),
-      boxShadow: "0 0 0 1px " + getColor(t, ec)
+      borderColor: getColor(theme, ec),
+      boxShadow: "0 0 0 1px " + getColor(theme, ec)
     }
@@ -41,5 +51,5 @@ };
 
-function getFilledStyle(props) {
+function filled(props) {
   var {
-    theme: t
+    theme
   } = props;
@@ -57,2 +67,6 @@ var {
     },
+    _readOnly: {
+      boxShadow: "none !important",
+      userSelect: "all"
+    },
     _disabled: {
@@ -65,6 +79,6 @@ opacity: 0.4,
       bg: "transparent",
-      borderColor: getColor(t, fc)
+      borderColor: getColor(theme, fc)
     },
     _invalid: {
-      borderColor: getColor(t, ec)
+      borderColor: getColor(theme, ec)
     }
@@ -74,5 +88,5 @@ };
 
-function getFlushedStyle(props) {
+function flushed(props) {
   var {
-    theme: t
+    theme
   } = props;
@@ -89,8 +103,12 @@ var {
     bg: "transparent",
+    _readOnly: {
+      boxShadow: "none !important",
+      userSelect: "all"
+    },
     _focus: {
       zIndex: 1,
-      borderColor: getColor(t, fc)
+      borderColor: getColor(theme, fc)
     },
     _invalid: {
-      borderColor: getColor(t, ec)
+      borderColor: getColor(theme, ec)
     }
@@ -108,5 +126,5 @@ };
     fontSize: "lg",
-    paddingX: 4,
-    paddingY: 2,
-    minHeight: 12,
+    paddingLeft: 4,
+    paddingRight: 4,
+    height: 12,
     borderRadius: "md"
@@ -116,5 +134,5 @@ },
     fontSize: "md",
-    paddingX: 4,
-    paddingY: 2,
-    minHeight: 10,
+    paddingLeft: 4,
+    paddingRight: 4,
+    height: 10,
     borderRadius: "md"
@@ -124,5 +142,5 @@ },
     fontSize: "sm",
-    paddingX: 3,
-    paddingY: 1,
-    minHeight: 8,
+    paddingLeft: 3,
+    paddingRight: 3,
+    height: 8,
     borderRadius: "sm"
@@ -139,11 +157,11 @@ }
     outline: 0,
-    lineHeight: 1,
-    transitionDuration: "0.2s",
-    transitionProperty: "box-shadow, border, color, background-color"
+    position: "relative",
+    appearance: "none",
+    transition: "all 0.2s"
   },
   sizes,
   variants: {
-    outline: getOutlineStyle,
-    filled: getFilledStyle,
-    flushed: getFlushedStyle,
+    outline,
+    filled,
+    flushed,
     unstyled
@@ -150,0 +168,0 @@ }

dist/esm/components/menu.js

@@ -6,3 +6,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-var getMenuListStyle = props => {
+var menuListStyle = props => {
   return {
@@ -22,3 +22,3 @@ bg: mode("#fff", "gray.700")(props),
 
-var getMenuItemStyle = props => ({
+var menuItemStyle = props => ({
   width: "100%",
@@ -49,4 +49,4 @@ outline: 0,
     MenuButton: Button.baseStyle,
-    MenuList: getMenuListStyle(props),
-    MenuItem: getMenuItemStyle(props),
+    MenuList: menuListStyle(props),
+    MenuItem: menuItemStyle(props),
     MenuGroupTitle: {
@@ -53,0 +53,0 @@ marginX: 4,

dist/esm/components/modal.js

@@ -7,9 +7,7 @@ import { mode } from "@chakra-ui/theme-tools";
 
-function getSize(value) {
-  return {
-    Content: {
-      maxWidth: value
-    }
-  };
-}
+var getSize = value => ({
+  Content: {
+    maxWidth: value
+  }
+});
 
@@ -16,0 +14,0 @@ var Modal = {

dist/esm/components/tabs.js

 import { mode, getColor } from "@chakra-ui/theme-tools";
 
-function getLineStyle(props) {
+function line(props) {
   var {
@@ -31,3 +31,3 @@ colorScheme: c
 
-function getEnclosedStyle(props) {
+function enclosed(props) {
   var {
@@ -56,3 +56,3 @@ colorScheme: c
 
-function getEnclosedColoredStyle(props) {
+function enclosedColored(props) {
   var {
@@ -86,6 +86,6 @@ colorScheme: c
 
-function getSoftRoundedStyle(props) {
+function softRounded(props) {
   var {
     colorScheme: c,
-    theme: t
+    theme
   } = props;
@@ -98,4 +98,4 @@ return {
       _selected: {
-        color: getColor(t, c + ".700"),
-        bg: getColor(t, c + ".100")
+        color: getColor(theme, c + ".700"),
+        bg: getColor(theme, c + ".100")
       }
@@ -107,3 +107,3 @@ },
 
-function getSolidRoundedStyle(props) {
+function solidRounded(props) {
   var {
@@ -140,5 +140,3 @@ colorScheme: c
     },
-    TabList: {
-      display: "flex"
-    },
+    TabList: {},
     TabPanel: {
@@ -172,7 +170,7 @@ padding: 4
   variants: {
-    line: getLineStyle,
-    enclosed: getEnclosedStyle,
-    "soft-rounded": getSoftRoundedStyle,
-    "enclosed-colored": getEnclosedColoredStyle,
-    "solid-rounded": getSolidRoundedStyle,
+    line: line,
+    enclosed: enclosed,
+    "soft-rounded": softRounded,
+    "enclosed-colored": enclosedColored,
+    "solid-rounded": solidRounded,
     unstyled: {}
@@ -179,0 +177,0 @@ }

dist/esm/foundations/z-index.js

 var zIndices = {
   hide: -1,
   auto: "auto",
-  base: 0
+  base: 0,
+  docked: 10,
+  dropdown: 1000,
+  sticky: 1100,
+  banner: 1200,
+  overlay: 1300,
+  modal: 1400,
+  popover: 1500,
+  skipLink: 1600,
+  toast: 1700,
+  tooltip: 1800
 };
 export default zIndices;
 //# sourceMappingURL=z-index.js.map

dist/types/components/index.d.ts

@@ -19,3 +19,3 @@ declare const _default: {
     Input: import("./input").InputTheme;
-    InputAddon: import("@chakra-ui/theme-tools").ComponentTheme<{}, Record<string, any>>;
+    InputAddon: import("./input").InputTheme;
     Tooltip: import("@chakra-ui/theme-tools").ComponentTheme<{}, Record<string, any>>;
@@ -29,3 +29,3 @@ CloseButton: import("@chakra-ui/theme-tools").ComponentTheme<{}, Record<string, any>>;
     Kbd: import("@chakra-ui/theme-tools").ComponentTheme<{}, Record<string, any>>;
-    Select: import("./input").InputTheme;
+    Select: import("@chakra-ui/theme-tools").ComponentTheme<import("./input").InputProps, Record<string, any>>;
     Textarea: import("./input").InputTheme;
@@ -32,0 +32,0 @@ PinInput: import("@chakra-ui/theme-tools").ComponentTheme<import("./input").InputProps, Record<string, any>>;

dist/types/components/input-addon.d.ts

@@ -1,3 +0,3 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare const InputAddon: ComponentTheme;
+import { InputTheme } from "./input";
+declare const InputAddon: InputTheme;
 export declare const InputAddonVariants: {
@@ -4,0 +4,0 @@ outline: string;

dist/types/foundations/index.d.ts

@@ -135,2 +135,12 @@ declare const theme: {
         base: number;
+        docked: number;
+        dropdown: number;
+        sticky: number;
+        banner: number;
+        overlay: number;
+        modal: number;
+        popover: number;
+        skipLink: number;
+        toast: number;
+        tooltip: number;
     };
@@ -137,0 +147,0 @@ radii: {

dist/types/foundations/z-index.d.ts

@@ -5,2 +5,12 @@ declare const zIndices: {
     base: number;
+    docked: number;
+    dropdown: number;
+    sticky: number;
+    banner: number;
+    overlay: number;
+    modal: number;
+    popover: number;
+    skipLink: number;
+    toast: number;
+    tooltip: number;
 };
@@ -7,0 +17,0 @@ export declare type ZIndices = typeof zIndices;

dist/types/index.d.ts

@@ -20,3 +20,3 @@ declare const theme: {
         Input: import("./components/input").InputTheme;
-        InputAddon: import("@chakra-ui/theme-tools").ComponentTheme<{}, Record<string, any>>;
+        InputAddon: import("./components/input").InputTheme;
         Tooltip: import("@chakra-ui/theme-tools").ComponentTheme<{}, Record<string, any>>;
@@ -30,3 +30,3 @@ CloseButton: import("@chakra-ui/theme-tools").ComponentTheme<{}, Record<string, any>>;
         Kbd: import("@chakra-ui/theme-tools").ComponentTheme<{}, Record<string, any>>;
-        Select: import("./components/input").InputTheme;
+        Select: import("@chakra-ui/theme-tools").ComponentTheme<import("./components/input").InputProps, Record<string, any>>;
         Textarea: import("./components/input").InputTheme;
@@ -181,2 +181,12 @@ PinInput: import("@chakra-ui/theme-tools").ComponentTheme<import("./components/input").InputProps, Record<string, any>>;
         base: number;
+        docked: number;
+        dropdown: number;
+        sticky: number;
+        banner: number;
+        overlay: number;
+        modal: number;
+        popover: number;
+        skipLink: number;
+        toast: number;
+        tooltip: number;
     };
@@ -183,0 +193,0 @@ radii: {

package.json

 {
   "name": "@chakra-ui/theme",
-  "version": "1.0.0-next.2",
+  "version": "1.0.0-next.3",
   "description": "The default theme for chakra components",
@@ -11,2 +11,3 @@ "keywords": [
   ],
+  "sideEffects": false,
   "author": "Segun Adebayo <[e-mail]>",
@@ -20,3 +21,4 @@ "homepage": "https://github.com/chakra-ui/chakra-ui#readme",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
@@ -48,3 +50,3 @@ "publishConfig": {
   "dependencies": {
-    "@chakra-ui/theme-tools": "^1.0.0-next.2"
+    "@chakra-ui/theme-tools": "^1.0.0-next.3"
   },
@@ -55,5 +57,5 @@ "peerDependencies": {
   "devDependencies": {
-    "@chakra-ui/system": "^1.0.0-next.2"
+    "@chakra-ui/system": "^1.0.0-next.3"
   },
-  "gitHead": "c5b51e43e9dff400f8bba7da7ffd135f5d33628b"
+  "gitHead": "d31ba9c35993985f49da4885dd47ab8dab49cdd1"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

485937

increased by12.93%

Number of package files

326

increased by18.98%

Lines of code

8968

increased by37.93%

Dependency changes

• Updated@chakra-ui/theme-tools@^1.0.0-next.3