@chakra-ui/theme-tools - npm Package Compare versions

Comparing version 1.1.9 to 1.2.0

CHANGELOG.md

 # Change Log
 
+## 1.2.0
+
+### Minor Changes
+
+- [`01c913309`](https://github.com/chakra-ui/chakra-ui/commit/01c913309819c342806307291d2d60aea0122ecf)
+  [#4611](https://github.com/chakra-ui/chakra-ui/pull/4611) Thanks
+  [@segunadebayo](https://github.com/segunadebayo)! - Add new helpers to the
+  `theme-tools` package to make the process of creating component themes less
+  cumbersome.
+
+  - `cssVar` - function to create css vars
+  - `calc` - function that makes it easy to create the css calc string
+  - `anatomy`- function to define and extend component parts
+
+  Creating a CSS variable in the theme
+
+  ```jsx
+  import { cssVar, calc } from "@chakra-ui/theme-tools"
+
+  const $width = cssVar("slider-width")
+  const $height = cssVar("slider-height")
+
+  const $diff = calc($width)
+    .subtract($height)
+    .toString()
+
+  $width.variable // => '--slider-width'
+  $width.reference // => 'var(--slider-width)'
+  ```
+
+  Create a component anatomy
+
+  ```jsx
+  import { anatomy }  from "@chakra-ui/theme-tools"
+  import type { PartsStyle } from "@chakra-ui/theme-tools"
+
+  const btn = anatomy("button").parts("label", "container")
+
+  const newBtn = btn.extend("icon") //  extend button to include icon part
+
+  // Using the anatomy in component theme
+  const baseStyle: PartsStyle<typeof newBtn> = {
+    // auto-complete for the component parts
+    icon: {...},
+    label: {...}
+  }
+  ```
+
+  Added `PartsStyleObject` and `PartStyleFunction` types for easy creation of
+  type-safe, multipart component styles.
+
 ## 1.1.9
@@ -4,0 +55,0 @@

dist/cjs/color.js

@@ -84,3 +84,3 @@ "use strict";
  * @param color - the color in hex, rgb, or hsl
- * @param amount - the amount white to add (0-1)
+ * @param amount - the amount white to add (0-100)
  */
@@ -100,3 +100,3 @@
  * @param color - the color in hex, rgb, or hsl
- * @param amount - the amount black to add (0-1)
+ * @param amount - the amount black to add (0-100)
  */
@@ -116,3 +116,3 @@
  * @param color - the color in hex, rgb, or hsl
- * @param amount - the amount to darken (0-1)
+ * @param amount - the amount to darken (0-100)
  */
@@ -132,3 +132,3 @@
  * @param color - the color in hex, rgb, or hsl
- * @param amount - the amount to lighten (0-1)
+ * @param amount - the amount to lighten (0-100)
  */
@@ -135,0 +135,0 @@

dist/cjs/index.js

@@ -28,2 +28,26 @@ "use strict";
 });
+
+var _anatomy = require("./anatomy");
+
+Object.keys(_anatomy).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _anatomy[key]) return;
+  exports[key] = _anatomy[key];
+});
+
+var _cssCalc = require("./css-calc");
+
+Object.keys(_cssCalc).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _cssCalc[key]) return;
+  exports[key] = _cssCalc[key];
+});
+
+var _cssVar = require("./css-var");
+
+Object.keys(_cssVar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _cssVar[key]) return;
+  exports[key] = _cssVar[key];
+});
 //# sourceMappingURL=index.js.map

dist/esm/color.js

@@ -50,3 +50,3 @@ import Color from "tinycolor2";
  * @param color - the color in hex, rgb, or hsl
- * @param amount - the amount white to add (0-1)
+ * @param amount - the amount white to add (0-100)
  */
@@ -61,3 +61,3 @@
  * @param color - the color in hex, rgb, or hsl
- * @param amount - the amount black to add (0-1)
+ * @param amount - the amount black to add (0-100)
  */
@@ -72,3 +72,3 @@
  * @param color - the color in hex, rgb, or hsl
- * @param amount - the amount to darken (0-1)
+ * @param amount - the amount to darken (0-100)
  */
@@ -83,3 +83,3 @@
  * @param color - the color in hex, rgb, or hsl
- * @param amount - the amount to lighten (0-1)
+ * @param amount - the amount to lighten (0-100)
  */
@@ -86,0 +86,0 @@

dist/esm/component.js

 import { runIfFn } from "@chakra-ui/utils";
+/* -----------------------------------------------------------------------------
+ * Style Configuration definition for components
+ * -----------------------------------------------------------------------------*/
+
 export { runIfFn };
@@ -3,0 +7,0 @@ export function mode(light, dark) {

dist/esm/index.js

 export * from "./color";
 export * from "./component";
 export * from "./create-breakpoints";
+export * from "./anatomy";
+export * from "./css-calc";
+export * from "./css-var";
 //# sourceMappingURL=index.js.map

dist/types/color.d.ts

@@ -34,3 +34,3 @@ import Color from "tinycolor2";
  * @param color - the color in hex, rgb, or hsl
- * @param amount - the amount white to add (0-1)
+ * @param amount - the amount white to add (0-100)
  */
@@ -41,3 +41,3 @@ export declare const whiten: (color: string, amount: number) => (theme: Dict) => string;
  * @param color - the color in hex, rgb, or hsl
- * @param amount - the amount black to add (0-1)
+ * @param amount - the amount black to add (0-100)
  */
@@ -48,3 +48,3 @@ export declare const blacken: (color: string, amount: number) => (theme: Dict) => string;
  * @param color - the color in hex, rgb, or hsl
- * @param amount - the amount to darken (0-1)
+ * @param amount - the amount to darken (0-100)
  */
@@ -55,3 +55,3 @@ export declare const darken: (color: string, amount: number) => (theme: Dict) => string;
  * @param color - the color in hex, rgb, or hsl
- * @param amount - the amount to lighten (0-1)
+ * @param amount - the amount to lighten (0-100)
  */
@@ -58,0 +58,0 @@ export declare const lighten: (color: string, amount: number) => (theme: Dict) => string;

dist/types/component.d.ts

@@ -18,25 +18,31 @@ /// <reference types="react" />
 }
-export interface MultiStyleConfig {
-    baseStyle?: {
-        [part: string]: SystemStyleObject;
-    };
+declare type Anatomy = {
+    __type: string;
+};
+export interface MultiStyleConfig<T extends Anatomy = Anatomy> {
+    baseStyle?: PartsStyleObject<T>;
     sizes?: {
-        [size: string]: {
-            [part: string]: SystemStyleObject;
-        };
+        [size: string]: PartsStyleObject<T> | PartsStyleFunction<T>;
     };
     variants?: {
-        [variants: string]: {
-            [part: string]: SystemStyleObject;
-        };
+        [variant: string]: PartsStyleObject<T> | PartsStyleFunction<T>;
     };
     defaultProps?: StyleConfig["defaultProps"];
 }
-export interface GlobalStyleProps {
+export type { SystemStyleObject };
+export declare type StyleFunctionProps = {
     colorScheme: string;
     colorMode: "light" | "dark";
+    orientation?: "horizontal" | "vertical";
     theme: Dict;
-}
+    [key: string]: any;
+};
+export declare type SystemStyleFunction = (props: StyleFunctionProps) => SystemStyleObject;
+export declare type SystemStyleInterpolation = SystemStyleObject | SystemStyleFunction;
+export declare type PartsStyleObject<T extends Anatomy = Anatomy> = Partial<Record<T["__type"], SystemStyleObject>>;
+export declare type PartsStyleFunction<T extends Anatomy = Anatomy> = (props: StyleFunctionProps) => PartsStyleObject<T>;
+export declare type PartsStyleInterpolation<T extends Anatomy = Anatomy> = PartsStyleObject<T> | PartsStyleFunction<T>;
+export declare type GlobalStyleProps = StyleFunctionProps;
 export declare type GlobalStyles = {
-    global?: SystemStyleObject | ((props: GlobalStyleProps) => SystemStyleObject);
+    global?: SystemStyleInterpolation;
 };
@@ -48,8 +54,8 @@ export declare type JSXElementStyles = {
 export declare type Styles = GlobalStyles & JSXElementStyles;
-export declare function mode(light: any, dark: any): (props: Dict) => any;
+export declare function mode(light: any, dark: any): (props: Dict | StyleFunctionProps) => any;
 export declare function orient(options: {
     orientation?: "vertical" | "horizontal";
-    vertical: any;
-    horizontal: any;
-}): any;
+    vertical: SystemStyleObject;
+    horizontal: SystemStyleObject;
+}): import("@chakra-ui/system").CSSWithMultiValues;
 //# sourceMappingURL=component.d.ts.map

dist/types/index.d.ts

 export * from "./color";
 export * from "./component";
 export * from "./create-breakpoints";
+export * from "./anatomy";
+export * from "./css-calc";
+export * from "./css-var";
 //# sourceMappingURL=index.d.ts.map

package.json

 {
   "name": "@chakra-ui/theme-tools",
-  "version": "1.1.9",
+  "version": "1.2.0",
   "description": "Set of helpers that makes theming and styling easier",
@@ -62,4 +62,4 @@ "keywords": [
   "devDependencies": {
-    "@chakra-ui/system": "1.7.2"
+    "@chakra-ui/system": "1.7.3"
   }
 }

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

116475

increased by84.21%

Number of package files

44

increased by69.23%

Lines of code

1152

increased by97.94%

No dependency changes