@chakra-ui/theme-tools
Advanced tools
Comparing version 1.1.9 to 1.2.0
# 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 @@ |
@@ -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 @@ |
@@ -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 |
@@ -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 @@ |
import { runIfFn } from "@chakra-ui/utils"; | ||
/* ----------------------------------------------------------------------------- | ||
* Style Configuration definition for components | ||
* -----------------------------------------------------------------------------*/ | ||
export { runIfFn }; | ||
@@ -3,0 +7,0 @@ export function mode(light, dark) { |
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 |
@@ -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; |
@@ -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 |
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 |
{ | ||
"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" | ||
} | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
116475
44
1152