@chakra-ui/theme - npm Package Compare versions

Comparing version 1.5.0 to 1.6.0

CHANGELOG.md

 # Change Log
 
+## 1.6.0
+
+### Minor Changes
+
+- [`408aaaace`](https://github.com/chakra-ui/chakra-ui/commit/408aaaace0dd413b61354958a4c30b9f2f8aa376)
+  [#3227](https://github.com/chakra-ui/chakra-ui/pull/3227) Thanks
+  [@TimKolberger](https://github.com/TimKolberger)! - Introducing a generic
+  TypeScript type `ChakraTheme` to improve the `extendTheme` function even
+  further.
+
+  ```ts
+  import { extendTheme } from "@chakra-ui/react"
+
+  export const customTheme = extendTheme({
+    // here you get autocomplete for
+    //   - existing definitions from the default theme
+    //   - new components (Single and MultiStyle)
+    //   - CSS definitions
+    //   - color hues
+    //   - etc.
+  })
+
+  export type MyCustomTheme = typeof customTheme
+  ```
+
+  You can get typesafe access to your custom theme like this:
+
+  ```ts
+  import { useTheme } from "@chakra-ui/react"
+  import { MyCustomTheme } from "./my-custom-theme"
+
+  const MyComponent = () => {
+    const customTheme = useTheme<MyCustomTheme>()
+    //...
+  }
+  ```
+
+### Patch Changes
+
+- [`a023a269f`](https://github.com/chakra-ui/chakra-ui/commit/a023a269ffe0efdae74be3de28e41790c9a5ca8a)
+  [#3278](https://github.com/chakra-ui/chakra-ui/pull/3278) Thanks
+  [@dodas](https://github.com/dodas)! - Fixed an issue where a `Tooltip` with
+  negative `gutter` causes flickering on hover.
+
+* [`2861b613b`](https://github.com/chakra-ui/chakra-ui/commit/2861b613bf354e6d00de01bf12bb543b2f2c2532)
+  [#3251](https://github.com/chakra-ui/chakra-ui/pull/3251) Thanks
+  [@dodas](https://github.com/dodas)! - Fixed an issue in Firefox where `Input`
+  overflows it's flex container.
+
+* Updated dependencies
+  [[`ff4a36bca`](https://github.com/chakra-ui/chakra-ui/commit/ff4a36bca11cc177830f6f1da13700acd1e3a087),
+  [`483687237`](https://github.com/chakra-ui/chakra-ui/commit/483687237f2c4fed05dc6a79693f307c601c1285),
+  [`61962345c`](https://github.com/chakra-ui/chakra-ui/commit/61962345c5b1c862445c16c586e304b28c376c9a)]:
+  - @chakra-ui/utils@1.2.0
+  - @chakra-ui/theme-tools@1.0.4
+
 ## 1.5.0
@@ -4,0 +60,0 @@

dist/cjs/components/alert.js

@@ -97,3 +97,4 @@ "use strict";
 var defaultProps = {
-  variant: "subtle"
+  variant: "subtle",
+  colorScheme: "blue"
 };
@@ -100,0 +101,0 @@ var _default = {

dist/cjs/components/input.js

@@ -12,2 +12,3 @@ "use strict";
     width: "100%",
+    minWidth: 0,
     outline: 0,
@@ -14,0 +15,0 @@ position: "relative",

dist/cjs/components/tooltip.js

@@ -16,3 +16,2 @@ "use strict";
     fontWeight: "medium",
-    pointerEvents: "none",
     fontSize: "sm",
@@ -19,0 +18,0 @@ boxShadow: "md",

dist/cjs/foundations/colors.js

@@ -5,2 +5,9 @@ "use strict";
 exports["default"] = void 0;
+
+/**
+ * @deprecated
+ * You can derive the Colors type from the DefaultChakraTheme:
+ *
+ * type Colors = DefaultChakraTheme["colors"]
+ */
 var colors = {
@@ -7,0 +14,0 @@ transparent: "transparent",

dist/cjs/foundations/radius.js

@@ -16,4 +16,11 @@ "use strict";
 };
+/**
+ * @deprecated
+ * You can derive the Radii type from the DefaultChakraTheme
+ *
+ * type Radii = DefaultChakraTheme['radii']
+ */
+
 var _default = radii;
 exports["default"] = _default;
 //# sourceMappingURL=radius.js.map

dist/cjs/foundations/shadows.js

@@ -18,4 +18,11 @@ "use strict";
 };
+/**
+ * @deprecated
+ * You can derive the Shadows type from the DefaultChakraTheme
+ *
+ * type Shadows = DefaultChakraTheme['shadows']
+ */
+
 var _default = shadows;
 exports["default"] = _default;
 //# sourceMappingURL=shadows.js.map

dist/cjs/foundations/sizes.js

@@ -39,5 +39,12 @@ "use strict";
 });
+/**
+ * @deprecated
+ * You can derive the Sizes type from the DefaultChakraTheme
+ *
+ * type Sizes = DefaultChakraTheme['sizes']
+ */
 
+
 var _default = sizes;
 exports["default"] = _default;
 //# sourceMappingURL=sizes.js.map

dist/cjs/foundations/spacing.js

@@ -37,3 +37,8 @@ "use strict";
 };
+/**
+ * @deprecated
+ * Spacing tokens are a part of DefaultChakraTheme['sizes']
+ */
+
 exports.spacing = spacing;
 //# sourceMappingURL=spacing.js.map

dist/cjs/foundations/typography.js

@@ -63,4 +63,18 @@ "use strict";
 };
+/**
+ * @deprecated
+ * You can derive the Typography type from the DefaultChakraTheme
+ *
+ * type Typography = Pick<
+ *   DefaultChakraTheme,
+ *   | "letterSpacings"
+ *   | "lineHeights"
+ *   | "fontWeights"
+ *   | "fonts"
+ *   | "fontSizes"
+ *  >
+ */
+
 var _default = typography;
 exports["default"] = _default;
 //# sourceMappingURL=typography.js.map

dist/cjs/foundations/z-index.js

@@ -20,4 +20,11 @@ "use strict";
 };
+/**
+ * @deprecated
+ * You can derive the ZIndices type from the DefaultChakraTheme
+ *
+ * type ZIndices = DefaultChakraTheme['zIndices']
+ */
+
 var _default = zIndices;
 exports["default"] = _default;
 //# sourceMappingURL=z-index.js.map

dist/cjs/index.js

 "use strict";
 
 exports.__esModule = true;
+var _exportNames = {
+  theme: true
+};
 exports["default"] = exports.theme = void 0;
@@ -12,2 +15,11 @@
 
+var _theme = require("./theme.types");
+
+Object.keys(_theme).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _theme[key]) return;
+  exports[key] = _theme[key];
+});
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -23,3 +35,3 @@
 
-var theme = _extends({
+var defaultTheme = _extends({
   direction: direction
@@ -32,2 +44,3 @@ }, _foundations["default"], {
 
+var theme = defaultTheme;
 exports.theme = theme;
@@ -34,0 +47,0 @@ var _default = theme;

dist/esm/components/alert.js

@@ -101,3 +101,4 @@ import { getColor, mode, transparentize } from "@chakra-ui/theme-tools";
 var defaultProps = {
-  variant: "subtle"
+  variant: "subtle",
+  colorScheme: "blue"
 };
@@ -104,0 +105,0 @@ export default {

dist/esm/components/input.js

@@ -6,2 +6,3 @@ import { getColor, mode } from "@chakra-ui/theme-tools";
     width: "100%",
+    minWidth: 0,
     outline: 0,
@@ -8,0 +9,0 @@ position: "relative",

dist/esm/components/tooltip.js

@@ -11,3 +11,2 @@ import { mode } from "@chakra-ui/theme-tools";
     fontWeight: "medium",
-    pointerEvents: "none",
     fontSize: "sm",
@@ -14,0 +13,0 @@ boxShadow: "md",

dist/esm/foundations/colors.js

@@ -0,1 +1,7 @@
+/**
+ * @deprecated
+ * You can derive the Colors type from the DefaultChakraTheme:
+ *
+ * type Colors = DefaultChakraTheme["colors"]
+ */
 var colors = {
@@ -2,0 +8,0 @@ transparent: "transparent",

dist/esm/foundations/radius.js

@@ -12,3 +12,10 @@ var radii = {
 };
+/**
+ * @deprecated
+ * You can derive the Radii type from the DefaultChakraTheme
+ *
+ * type Radii = DefaultChakraTheme['radii']
+ */
+
 export default radii;
 //# sourceMappingURL=radius.js.map

dist/esm/foundations/shadows.js

@@ -14,3 +14,10 @@ var shadows = {
 };
+/**
+ * @deprecated
+ * You can derive the Shadows type from the DefaultChakraTheme
+ *
+ * type Shadows = DefaultChakraTheme['shadows']
+ */
+
 export default shadows;
 //# sourceMappingURL=shadows.js.map

dist/esm/foundations/sizes.js

@@ -33,4 +33,11 @@ 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); }
 });
+/**
+ * @deprecated
+ * You can derive the Sizes type from the DefaultChakraTheme
+ *
+ * type Sizes = DefaultChakraTheme['sizes']
+ */
 
+
 export default sizes;
 //# sourceMappingURL=sizes.js.map

dist/esm/foundations/spacing.js

@@ -33,2 +33,6 @@ export var spacing = {
 };
+/**
+ * @deprecated
+ * Spacing tokens are a part of DefaultChakraTheme['sizes']
+ */
 //# sourceMappingURL=spacing.js.map

dist/esm/foundations/typography.js

@@ -59,3 +59,17 @@ var typography = {
 };
+/**
+ * @deprecated
+ * You can derive the Typography type from the DefaultChakraTheme
+ *
+ * type Typography = Pick<
+ *   DefaultChakraTheme,
+ *   | "letterSpacings"
+ *   | "lineHeights"
+ *   | "fontWeights"
+ *   | "fonts"
+ *   | "fontSizes"
+ *  >
+ */
+
 export default typography;
 //# sourceMappingURL=typography.js.map

dist/esm/foundations/z-index.js

@@ -16,3 +16,10 @@ var zIndices = {
 };
+/**
+ * @deprecated
+ * You can derive the ZIndices type from the DefaultChakraTheme
+ *
+ * type ZIndices = DefaultChakraTheme['zIndices']
+ */
+
 export default zIndices;
 //# sourceMappingURL=z-index.js.map

dist/esm/index.js

@@ -11,3 +11,4 @@ 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); }
 };
-export var theme = _extends({
+
+var defaultTheme = _extends({
   direction
@@ -19,3 +20,6 @@ }, foundations, {
 });
+
+export var theme = defaultTheme;
+export * from "./theme.types";
 export default theme;
 //# sourceMappingURL=index.js.map

dist/types/components/alert.d.ts

@@ -68,4 +68,5 @@ declare type Dict = Record<string, any>;
         variant: string;
+        colorScheme: string;
     };
 };
 export default _default;

dist/types/components/input.d.ts

@@ -97,2 +97,3 @@ declare function variantOutline(props: Record<string, any>): {
             width: string;
+            minWidth: number;
             outline: number;
@@ -99,0 +100,0 @@ position: string;

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

@@ -6,2 +6,3 @@ declare const _default: {
             width: string;
+            minWidth: number;
             outline: number;
@@ -8,0 +9,0 @@ position: string;

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

@@ -5,2 +5,3 @@ declare const _default: {
         width: string;
+        minWidth: number;
         outline: number;
@@ -7,0 +8,0 @@ position: string;

dist/types/components/select.d.ts

@@ -12,2 +12,3 @@ declare const _default: {
             width: string;
+            minWidth: number;
             outline: number;
@@ -14,0 +15,0 @@ position: string;

dist/types/components/textarea.d.ts

@@ -7,2 +7,3 @@ declare const _default: {
         width: string;
+        minWidth: number;
         outline: number;
@@ -9,0 +10,0 @@ position: string;

dist/types/components/tooltip.d.ts

@@ -8,3 +8,2 @@ declare function baseStyle(props: Record<string, any>): {
     fontWeight: string;
-    pointerEvents: string;
     fontSize: string;
@@ -11,0 +10,0 @@ boxShadow: string;

dist/types/foundations/colors.d.ts

@@ -1,13 +0,7 @@
-export interface ColorHues {
-    50: string;
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    600: string;
-    700: string;
-    800: string;
-    900: string;
-}
+/**
+ * @deprecated
+ * You can derive the Colors type from the DefaultChakraTheme:
+ *
+ * type Colors = DefaultChakraTheme["colors"]
+ */
 export declare type Colors = typeof colors;
@@ -14,0 +8,0 @@ declare const colors: {

dist/types/foundations/index.d.ts

@@ -445,4 +445,26 @@ declare const foundations: {
 declare type FoundationsType = typeof foundations;
+/**
+ * @deprecated
+ * You can derive the Foundations type from the DefaultChakraTheme
+ *
+ * type Foundations = Pick<
+ *   DefaultChakraTheme,
+ *   | "breakpoints"
+ *   | "zIndices"
+ *   | "radii"
+ *   | "colors"
+ *   | "letterSpacings"
+ *   | "lineHeights"
+ *   | "fontWeights"
+ *   | "fonts"
+ *   | "fontSizes"
+ *   | "sizes"
+ *   | "shadows"
+ *   | "space"
+ *   | "borders"
+ *   | "transition"
+ *  >
+ */
 export interface Foundations extends FoundationsType {
 }
 export default foundations;

dist/types/foundations/radius.d.ts

@@ -12,3 +12,9 @@ declare const radii: {
 };
+/**
+ * @deprecated
+ * You can derive the Radii type from the DefaultChakraTheme
+ *
+ * type Radii = DefaultChakraTheme['radii']
+ */
 export declare type Radii = typeof radii;
 export default radii;

dist/types/foundations/shadows.d.ts

@@ -14,3 +14,9 @@ declare const shadows: {
 };
+/**
+ * @deprecated
+ * You can derive the Shadows type from the DefaultChakraTheme
+ *
+ * type Shadows = DefaultChakraTheme['shadows']
+ */
 export declare type Shadows = typeof shadows;
 export default shadows;

dist/types/foundations/sizes.d.ts

@@ -82,2 +82,8 @@ import { spacing } from "./spacing";
 };
+/**
+ * @deprecated
+ * You can derive the Sizes type from the DefaultChakraTheme
+ *
+ * type Sizes = DefaultChakraTheme['sizes']
+ */
 export declare type Sizes = typeof spacing & typeof largeSizes & {
@@ -84,0 +90,0 @@ container: typeof container;

dist/types/foundations/spacing.d.ts

@@ -33,2 +33,6 @@ export declare const spacing: {
 };
+/**
+ * @deprecated
+ * Spacing tokens are a part of DefaultChakraTheme['sizes']
+ */
 export declare type Spacing = typeof spacing;

dist/types/foundations/typography.d.ts

@@ -59,3 +59,16 @@ declare const typography: {
 };
+/**
+ * @deprecated
+ * You can derive the Typography type from the DefaultChakraTheme
+ *
+ * type Typography = Pick<
+ *   DefaultChakraTheme,
+ *   | "letterSpacings"
+ *   | "lineHeights"
+ *   | "fontWeights"
+ *   | "fonts"
+ *   | "fontSizes"
+ *  >
+ */
 export declare type Typography = typeof typography;
 export default typography;

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

@@ -16,3 +16,9 @@ declare const zIndices: {
 };
+/**
+ * @deprecated
+ * You can derive the ZIndices type from the DefaultChakraTheme
+ *
+ * type ZIndices = DefaultChakraTheme['zIndices']
+ */
 export declare type ZIndices = typeof zIndices;
 export default zIndices;

package.json

 {
   "name": "@chakra-ui/theme",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "The default theme for chakra components",
@@ -54,4 +54,4 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/theme-tools": "1.0.3",
-    "@chakra-ui/utils": "1.1.0"
+    "@chakra-ui/theme-tools": "1.0.4",
+    "@chakra-ui/utils": "1.2.0"
   },
@@ -62,5 +62,5 @@ "peerDependencies": {
   "devDependencies": {
-    "@chakra-ui/cli": "1.0.0",
-    "@chakra-ui/system": "1.2.0"
+    "@chakra-ui/cli": "1.2.0",
+    "@chakra-ui/system": "1.3.0"
   }
 }

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

756061

increased by1.6%

Number of package files

278

increased by1.83%

Lines of code

16463

increased by1.56%

Dependency changes

• + Added@chakra-ui/theme-tools@1.0.4(transitive)

• + Added@chakra-ui/utils@1.2.0(transitive)

• - Removed@chakra-ui/theme-tools@1.0.3(transitive)

• - Removed@chakra-ui/utils@1.1.0(transitive)

• - Removedobject-assign@4.1.1(transitive)

• Updated@chakra-ui/theme-tools@1.0.4

• Updated@chakra-ui/utils@1.2.0