@chakra-ui/theme - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

CHANGELOG.md

 # Change Log
 
+## 1.2.0
+
+### Minor Changes
+
+- [`28bd21d7`](https://github.com/chakra-ui/chakra-ui/commit/28bd21d793911ba56bd146dd7aaff1008a70d147)
+  [#2659](https://github.com/chakra-ui/chakra-ui/pull/2659) Thanks
+  [@dodas](https://github.com/dodas)! - feat(theming): enable theming for
+  ModalCloseButton
+
+  This change enables `ModalCloseButton` to be themed as part of the `Modal`
+  component theme via the `closeButton` key.
+
+  See
+  https://chakra-ui.com/docs/theming/component-style#styling-multipart-components
+  for more information.
+
+* [`2192be3d`](https://github.com/chakra-ui/chakra-ui/commit/2192be3db77504addffc89cbfef62fb9e884fa5d)
+  [#2635](https://github.com/chakra-ui/chakra-ui/pull/2635) Thanks
+  [@jmiazga](https://github.com/jmiazga)! - feat: added theming to List,
+  ListItem, and ListIcon
+
+- [`a36ede75`](https://github.com/chakra-ui/chakra-ui/commit/a36ede7519b7193f90e4985636a06c5d483a8a62)
+  [#2681](https://github.com/chakra-ui/chakra-ui/pull/2681) Thanks
+  [@dodas](https://github.com/dodas)! - This change prevent shrinking of
+  AlertIcon when using Alert with long text
+
+* [`c696345a`](https://github.com/chakra-ui/chakra-ui/commit/c696345a711338a23542a7b1911a33927a9ba5f1)
+  [#2602](https://github.com/chakra-ui/chakra-ui/pull/2602) Thanks
+  [@Zyclotrop-j](https://github.com/Zyclotrop-j)! - feat(container): add ability
+  to style container component with theme api
+
+- [`9fdc61d8`](https://github.com/chakra-ui/chakra-ui/commit/9fdc61d8801f6d76783b5c9f068525d4dfc28b20)
+  [#2478](https://github.com/chakra-ui/chakra-ui/pull/2478) Thanks
+  [@Zyclotrop-j](https://github.com/Zyclotrop-j)! - feat(divider): add ability
+  to style divider component with theme api
+
 ## 1.1.0
@@ -4,0 +40,0 @@

dist/cjs/components/alert.js

@@ -8,3 +8,3 @@ "use strict";
 
-var parts = ["container", "title", "icon"];
+var parts = ["container", "title", "description", "icon"];
 var baseStyle = {
@@ -24,2 +24,3 @@ container: {
   icon: {
+    flexShrink: 0,
     mr: 3,
@@ -26,0 +27,0 @@ w: 5,

dist/cjs/components/index.js

@@ -24,2 +24,6 @@ "use strict";
 
+var _container = _interopRequireDefault(require("./container"));
+
+var _divider = _interopRequireDefault(require("./divider"));
+
 var _drawer = _interopRequireDefault(require("./drawer"));
@@ -41,2 +45,4 @@
 
+var _list = _interopRequireDefault(require("./list"));
+
 var _menu = _interopRequireDefault(require("./menu"));
@@ -92,2 +98,4 @@
   Code: _code["default"],
+  Container: _container["default"],
+  Divider: _divider["default"],
   Drawer: _drawer["default"],
@@ -101,2 +109,3 @@ Editable: _editable["default"],
   Link: _link["default"],
+  List: _list["default"],
   Menu: _menu["default"],
@@ -103,0 +112,0 @@ Modal: _modal["default"],

dist/cjs/components/modal.js

@@ -8,3 +8,3 @@ "use strict";
 
-var parts = ["overlay", "dialogContainer", "dialog", "header", "body", "footer"];
+var parts = ["overlay", "dialogContainer", "dialog", "header", "closeButton", "body", "footer"];
 var baseStyleOverlay = {
@@ -46,2 +46,7 @@ bg: "blackAlpha.600",
 };
+var baseStyleCloseButton = {
+  position: "absolute",
+  top: 2,
+  right: 3
+};
 
@@ -69,2 +74,3 @@ function baseStyleBody(props) {
     header: baseStyleHeader,
+    closeButton: baseStyleCloseButton,
     body: baseStyleBody(props),
@@ -71,0 +77,0 @@ footer: baseStyleFooter

dist/cjs/foundations/colors.js

@@ -191,12 +191,12 @@ "use strict";
   whatsapp: {
-    50: "#E2F7F4",
-    100: "#C3F0E9",
-    200: "#A0E7DC",
-    300: "#76DCCD",
-    400: "#43CFBA",
-    500: "#00BFA5",
-    600: "#00AC92",
-    700: "#009780",
-    800: "#007D6A",
-    900: "#005A4C"
+    50: "#dffeec",
+    100: "#b9f5d0",
+    200: "#90edb3",
+    300: "#65e495",
+    400: "#3cdd78",
+    500: "#22c35e",
+    600: "#179848",
+    700: "#0c6c33",
+    800: "#01421c",
+    900: "#001803"
   },
@@ -203,0 +203,0 @@ twitter: {

dist/esm/components/alert.js

 import { getColor, mode, transparentize } from "@chakra-ui/theme-tools";
-var parts = ["container", "title", "icon"];
+var parts = ["container", "title", "description", "icon"];
 var baseStyle = {
@@ -17,2 +17,3 @@ container: {
   icon: {
+    flexShrink: 0,
     mr: 3,
@@ -19,0 +20,0 @@ w: 5,

dist/esm/components/index.js

@@ -10,2 +10,4 @@ import Accordion from "./accordion";
 import Code from "./code";
+import Container from "./container";
+import Divider from "./divider";
 import Drawer from "./drawer";
@@ -19,2 +21,3 @@ import Editable from "./editable";
 import Link from "./link";
+import List from "./list";
 import Menu from "./menu";
@@ -49,2 +52,4 @@ import Modal from "./modal";
   Code,
+  Container,
+  Divider,
   Drawer,
@@ -58,2 +63,3 @@ Editable,
   Link,
+  List,
   Menu,
@@ -60,0 +66,0 @@ Modal,

dist/esm/components/modal.js

 import { mode } from "@chakra-ui/theme-tools";
-var parts = ["overlay", "dialogContainer", "dialog", "header", "body", "footer"];
+var parts = ["overlay", "dialogContainer", "dialog", "header", "closeButton", "body", "footer"];
 var baseStyleOverlay = {
@@ -43,2 +43,7 @@ bg: "blackAlpha.600",
 };
+var baseStyleCloseButton = {
+  position: "absolute",
+  top: 2,
+  right: 3
+};
 
@@ -67,2 +72,3 @@ function baseStyleBody(props) {
   header: baseStyleHeader,
+  closeButton: baseStyleCloseButton,
   body: baseStyleBody(props),
@@ -69,0 +75,0 @@ footer: baseStyleFooter

dist/esm/foundations/colors.js

@@ -187,12 +187,12 @@ var colors = {
   whatsapp: {
-    50: "#E2F7F4",
-    100: "#C3F0E9",
-    200: "#A0E7DC",
-    300: "#76DCCD",
-    400: "#43CFBA",
-    500: "#00BFA5",
-    600: "#00AC92",
-    700: "#009780",
-    800: "#007D6A",
-    900: "#005A4C"
+    50: "#dffeec",
+    100: "#b9f5d0",
+    200: "#90edb3",
+    300: "#65e495",
+    400: "#3cdd78",
+    500: "#22c35e",
+    600: "#179848",
+    700: "#0c6c33",
+    800: "#01421c",
+    900: "#001803"
   },
@@ -199,0 +199,0 @@ twitter: {

dist/types/components/alert.d.ts

@@ -54,2 +54,3 @@ declare type Dict = Record<string, any>;
         icon: {
+            flexShrink: number;
             mr: number;
@@ -56,0 +57,0 @@ w: number;

dist/types/components/modal.d.ts

@@ -30,2 +30,7 @@ declare const _default: {
         };
+        closeButton: {
+            position: string;
+            top: number;
+            right: number;
+        };
         body: {
@@ -32,0 +37,0 @@ px: number;

package.json

 {
   "name": "@chakra-ui/theme",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "The default theme for chakra components",
@@ -5,0 +5,0 @@ "keywords": [

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

690730

increased by2.1%

Number of package files

268

increased by5.93%

Lines of code

15182

increased by1.8%

No dependency changes