@chakra-ui/theme - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

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.
+## 1.1.0
 
-# 1.0.0 (2020-11-13)
+### Minor Changes
 
-**Note:** Version bump only for package @chakra-ui/theme
+- [`843854ec`](https://github.com/chakra-ui/chakra-ui/commit/843854ec669367623b50a598402be343866d87a8)
+  Thanks [@segunadebayo](https://github.com/segunadebayo)! - - Update heading
+  theme to relative values for line height
 
+  - Fixed error styles for flushed input variant
+    [#2508](https://github.com/chakra-ui/chakra-ui/issues/2508)
 
+  ```jsx
+  // This shows the wrong shadow on focus. Work nows 🎉
+  <Input variant="flushed" isInvalid placeholder="Focus me" />
+  ```
 
+### Patch Changes
 
+- [`892ea2ca`](https://github.com/chakra-ui/chakra-ui/commit/892ea2ca1c02b4127f4f044df33de58cc7641f5c)
+  Thanks [@segunadebayo](https://github.com/segunadebayo)! - - Fix orientation
+  styles for Tabs when orientation prop is vertical
+  [#1187](https://github.com/chakra-ui/chakra-ui/issues/1187)
 
+  - Add support for styling the `root` tab element from theme
+    [#2548](https://github.com/chakra-ui/chakra-ui/issues/2548)
+
+- Updated dependencies []:
+  - @chakra-ui/theme-tools@1.0.1
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 1.0.0 (2020-11-13)
+
+**Note:** Version bump only for package @chakra-ui/theme
+
 # Change Log
@@ -15,0 +40,0 @@

dist/cjs/components/heading.js

@@ -20,23 +20,23 @@ "use strict";
     fontSize: ["4xl", null, "5xl"],
-    lineHeight: ["2.5rem", null, "1"]
+    lineHeight: [1.2, null, 1]
   },
   xl: {
     fontSize: ["3xl", null, "4xl"],
-    lineHeight: ["2.25rem", null, "2.5rem"]
+    lineHeight: [1.33, null, 1.2]
   },
   lg: {
     fontSize: ["2xl", null, "3xl"],
-    lineHeight: ["2rem", null, "2.25rem"]
+    lineHeight: [1.33, null, 1.2]
   },
   md: {
     fontSize: "xl",
-    lineHeight: "1.75rem"
+    lineHeight: 1.2
   },
   sm: {
     fontSize: "md",
-    lineHeight: "1.5rem"
+    lineHeight: 1.2
   },
   xs: {
     fontSize: "sm",
-    lineHeight: "1.25rem"
+    lineHeight: 1.2
   }
@@ -43,0 +43,0 @@ };

dist/cjs/components/input.js

@@ -169,3 +169,4 @@ "use strict";
       _invalid: {
-        borderColor: (0, _themeTools.getColor)(theme, ec)
+        borderColor: (0, _themeTools.getColor)(theme, ec),
+        boxShadow: "0 0 0 1px " + (0, _themeTools.getColor)(theme, ec)
       }
@@ -172,0 +173,0 @@ },

dist/cjs/components/tabs.js

@@ -8,4 +8,11 @@ "use strict";
 
-var parts = ["tablist", "tab", "tabpanel", "indicator"];
+var parts = ["root", "tablist", "tab", "tabpanel", "indicator"];
 
+function baseStyleRoot(props) {
+  var orientation = props.orientation;
+  return {
+    display: orientation === "vertical" ? "flex" : "block"
+  };
+}
+
 function baseStyleTab(props) {
@@ -44,2 +51,3 @@ var isFitted = props.isFitted;
   return {
+    root: baseStyleRoot(props),
     tab: baseStyleTab(props),
@@ -80,6 +88,8 @@ tablist: baseStyleTablist(props),
       orientation = props.orientation;
+  var isVertical = orientation === "vertical";
   var borderProp = orientation === "vertical" ? "borderLeft" : "borderBottom";
+  var marginProp = isVertical ? "ml" : "mb";
   return {
     tablist: (_tablist = {}, _tablist[borderProp] = "2px solid", _tablist.borderColor = "inherit", _tablist),
-    tab: (_tab = {}, _tab[borderProp] = "2px solid", _tab.borderColor = "transparent", _tab.mb = "-2px", _tab._selected = {
+    tab: (_tab = {}, _tab[borderProp] = "2px solid", _tab.borderColor = "transparent", _tab[marginProp] = "-2px", _tab._selected = {
       color: (0, _themeTools.mode)(c + ".600", c + ".300")(props),
@@ -86,0 +96,0 @@ borderColor: "currentColor"

dist/esm/components/heading.js

@@ -16,23 +16,23 @@ var baseStyle = {
     fontSize: ["4xl", null, "5xl"],
-    lineHeight: ["2.5rem", null, "1"]
+    lineHeight: [1.2, null, 1]
   },
   xl: {
     fontSize: ["3xl", null, "4xl"],
-    lineHeight: ["2.25rem", null, "2.5rem"]
+    lineHeight: [1.33, null, 1.2]
   },
   lg: {
     fontSize: ["2xl", null, "3xl"],
-    lineHeight: ["2rem", null, "2.25rem"]
+    lineHeight: [1.33, null, 1.2]
   },
   md: {
     fontSize: "xl",
-    lineHeight: "1.75rem"
+    lineHeight: 1.2
   },
   sm: {
     fontSize: "md",
-    lineHeight: "1.5rem"
+    lineHeight: 1.2
   },
   xs: {
     fontSize: "sm",
-    lineHeight: "1.25rem"
+    lineHeight: 1.2
   }
@@ -39,0 +39,0 @@ };

dist/esm/components/input.js

@@ -168,3 +168,4 @@ import { getColor, mode } from "@chakra-ui/theme-tools";
       _invalid: {
-        borderColor: getColor(theme, ec)
+        borderColor: getColor(theme, ec),
+        boxShadow: "0 0 0 1px " + getColor(theme, ec)
       }
@@ -171,0 +172,0 @@ },

dist/esm/components/tabs.js

 import { getColor, mode } from "@chakra-ui/theme-tools";
-var parts = ["tablist", "tab", "tabpanel", "indicator"];
+var parts = ["root", "tablist", "tab", "tabpanel", "indicator"];
 
+function baseStyleRoot(props) {
+  var {
+    orientation
+  } = props;
+  return {
+    display: orientation === "vertical" ? "flex" : "block"
+  };
+}
+
 function baseStyleTab(props) {
@@ -40,2 +49,3 @@ var {
   return {
+    root: baseStyleRoot(props),
     tab: baseStyleTab(props),
@@ -76,3 +86,5 @@ tablist: baseStyleTablist(props),
   } = props;
+  var isVertical = orientation === "vertical";
   var borderProp = orientation === "vertical" ? "borderLeft" : "borderBottom";
+  var marginProp = isVertical ? "ml" : "mb";
   return {
@@ -86,3 +98,3 @@ tablist: {
       borderColor: "transparent",
-      mb: "-2px",
+      [marginProp]: "-2px",
       _selected: {
@@ -89,0 +101,0 @@ color: mode(c + ".600", c + ".300")(props),

dist/types/components/drawer.d.ts

@@ -13,10 +13,3 @@ declare const _default: {
         };
-        dialog: {
-            zIndex: string;
-            maxH: string;
-            bg: any;
-            color: string;
-            boxShadow: any;
-            height: string;
-        };
+        dialog: any;
         header: {
@@ -23,0 +16,0 @@ px: number;

dist/types/components/heading.d.ts

@@ -17,23 +17,23 @@ declare const _default: {
             fontSize: (string | null)[];
-            lineHeight: (string | null)[];
+            lineHeight: (number | null)[];
         };
         xl: {
             fontSize: (string | null)[];
-            lineHeight: (string | null)[];
+            lineHeight: (number | null)[];
         };
         lg: {
             fontSize: (string | null)[];
-            lineHeight: (string | null)[];
+            lineHeight: (number | null)[];
         };
         md: {
             fontSize: string;
-            lineHeight: string;
+            lineHeight: number;
         };
         sm: {
             fontSize: string;
-            lineHeight: string;
+            lineHeight: number;
         };
         xs: {
             fontSize: string;
-            lineHeight: string;
+            lineHeight: number;
         };
@@ -40,0 +40,0 @@ };

dist/types/components/input.d.ts

@@ -81,2 +81,3 @@ declare function variantOutline(props: Record<string, any>): {
             borderColor: any;
+            boxShadow: string;
         };
@@ -83,0 +84,0 @@ };

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

@@ -206,2 +206,3 @@ declare const _default: {
                     borderColor: any;
+                    boxShadow: string;
                 };
@@ -208,0 +209,0 @@ };

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

@@ -73,2 +73,3 @@ declare const _default: {
                 borderColor: any;
+                boxShadow: string;
             };
@@ -75,0 +76,0 @@ };

dist/types/components/select.d.ts

@@ -155,2 +155,3 @@ declare const _default: {
                     borderColor: any;
+                    boxShadow: string;
                 };
@@ -157,0 +158,0 @@ };

dist/types/components/tabs.d.ts

@@ -28,3 +28,2 @@ declare type Dict = Record<string, any>;
         borderColor: string;
-        mb: string;
         _selected: {
@@ -109,2 +108,5 @@ color: any;
     baseStyle: (props: Record<string, any>) => {
+        root: {
+            display: string;
+        };
         tab: {
@@ -111,0 +113,0 @@ flex: number | undefined;

dist/types/components/textarea.d.ts

@@ -78,2 +78,3 @@ declare const _default: {
                 borderColor: any;
+                boxShadow: string;
             };
@@ -80,0 +81,0 @@ };

package.json

 {
   "name": "@chakra-ui/theme",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "The default theme for chakra components",
@@ -53,11 +53,10 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/theme-tools": "1.0.0"
+    "@chakra-ui/theme-tools": "1.0.1"
   },
   "peerDependencies": {
-    "@chakra-ui/system": ">=1.0.0-rc.5"
+    "@chakra-ui/system": ">=1.0.0"
   },
   "devDependencies": {
-    "@chakra-ui/system": "1.0.0"
-  },
-  "gitHead": "c98ca366cec7151fe7ea4e0b6f893088797c5398"
+    "@chakra-ui/system": "1.0.1"
+  }
 }

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

676517

increased by0.31%

Lines of code

14914

increased by0.15%

Worsened metrics

Number of package files

253

decreased by-0.39%

Dependency changes

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

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

• + Addedtinycolor2@1.4.2(transitive)

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

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

• - Removedtinycolor2@1.4.1(transitive)

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