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

Comparing version 2.0.17 to 2.0.18

dist/color.d.ts

@@ -1,2 +0,2 @@
-declare type Dict = {
+type Dict = {
     [key: string]: any;
@@ -14,2 +14,6 @@ };
 /**
+ * Get the color css variable from theme
+ */
+declare const getColorVar: (theme: Dict, color: string, fallback?: string) => any;
+/**
  * Determines if the tone of given color is "light" or "dark"
@@ -85,3 +89,3 @@ * @param color - the color in hex, rgb, or hsl
 declare const contrast: (fg: string, bg: string) => (theme: Dict) => number;
-interface WCAG2Parms {
+interface WCAG2Params {
     level?: "AA" | "AAA";
@@ -100,4 +104,4 @@ size?: "large" | "small";
  */
-declare const isAccessible: (textColor: string, bgColor: string, options?: WCAG2Parms) => (theme: Dict) => boolean;
-declare function isReadable(color1: string, color2: string, wcag2?: WCAG2Parms): boolean;
+declare const isAccessible: (textColor: string, bgColor: string, options?: WCAG2Params) => (theme: Dict) => boolean;
+declare function isReadable(color1: string, color2: string, wcag2?: WCAG2Params): boolean;
 declare function readability(color1: string, color2: string): number;
@@ -126,2 +130,2 @@ /**
 
-export { blacken, complementary, contrast, darken, generateStripe, getColor, isAccessible, isDark, isLight, isReadable, lighten, randomColor, readability, tone, transparentize, whiten };
+export { blacken, complementary, contrast, darken, generateStripe, getColor, getColorVar, isAccessible, isDark, isLight, isReadable, lighten, randomColor, readability, tone, transparentize, whiten };

dist/color.js

@@ -29,2 +29,3 @@ "use strict";
   getColor: () => getColor,
+  getColorVar: () => getColorVar,
   isAccessible: () => isAccessible,
@@ -42,2 +43,3 @@ isDark: () => isDark,
 module.exports = __toCommonJS(color_exports);
+var import_styled_system = require("@chakra-ui/styled-system");
 var import_color2k = require("color2k");
@@ -63,2 +65,6 @@
 };
+var getColorVar = (theme, color, fallback) => {
+  var _a;
+  return (_a = (0, import_styled_system.getCSSVar)(theme, "colors", color)) != null ? _a : fallback;
+};
 var getBrightness = (color) => {
@@ -193,2 +199,3 @@ const [r, g, b] = (0, import_color2k.parseToRgba)(color);
   getColor,
+  getColorVar,
   isAccessible,
@@ -195,0 +202,0 @@ isDark,

dist/component.d.ts

 import { StyleFunctionProps, SystemStyleInterpolation, SystemStyleObject } from '@chakra-ui/styled-system';
 export { MultiStyleConfig, PartsStyleFunction, PartsStyleInterpolation, PartsStyleObject, StyleConfig, StyleFunctionProps, SystemStyleFunction, SystemStyleInterpolation, SystemStyleObject } from '@chakra-ui/styled-system';
 
-declare type GlobalStyleProps = StyleFunctionProps;
-declare type GlobalStyles = {
+type GlobalStyleProps = StyleFunctionProps;
+type GlobalStyles = {
     global?: SystemStyleInterpolation;
 };
-declare type JSXElementStyles = {
+type JSXElementStyles = {
     [K in keyof JSX.IntrinsicElements]?: SystemStyleObject;
 };
-declare type Styles = GlobalStyles & JSXElementStyles;
+type Styles = GlobalStyles & JSXElementStyles;
 declare function mode<T>(light: T, dark: T): (props: Record<string, any> | StyleFunctionProps) => T;
@@ -17,4 +17,4 @@ declare function orient<T>(options: {
     horizontal: T;
-}): {};
+}): T | {};
 
 export { GlobalStyleProps, GlobalStyles, JSXElementStyles, Styles, mode, orient };

dist/create-breakpoints.d.ts

@@ -9,3 +9,3 @@ interface BaseBreakpointConfig {
 }
-declare type Breakpoints<T> = T & {
+type Breakpoints<T> = T & {
     base: "0em";
@@ -12,0 +12,0 @@ };

dist/css-calc.d.ts

 import { CSSVar } from './css-var.js';
 
-declare type Operand = string | number | CSSVar;
-declare type Operands = Operand[];
+type Operand = string | number | CSSVar;
+type Operands = Operand[];
 interface CalcChain {
@@ -6,0 +6,0 @@ add: (...operands: Operands) => CalcChain;

dist/css-var.d.ts

@@ -5,7 +5,7 @@ declare function isDecimal(value: any): boolean;
 declare function toVar(value: string, prefix?: string): string;
-declare type CSSVar = {
+type CSSVar = {
     variable: string;
     reference: string;
 };
-declare type CSSVarOptions = {
+type CSSVarOptions = {
     fallback?: string | CSSVar;
@@ -12,0 +12,0 @@ prefix?: string;

dist/index.d.ts

 export { anatomy } from '@chakra-ui/anatomy';
-export { blacken, complementary, contrast, darken, generateStripe, getColor, isAccessible, isDark, isLight, isReadable, lighten, randomColor, readability, tone, transparentize, whiten } from './color.js';
+export { blacken, complementary, contrast, darken, generateStripe, getColor, getColorVar, isAccessible, isDark, isLight, isReadable, lighten, randomColor, readability, tone, transparentize, whiten } from './color.js';
 export { GlobalStyleProps, GlobalStyles, JSXElementStyles, Styles, mode, orient } from './component.js';
@@ -4,0 +4,0 @@ export { BaseBreakpointConfig, Breakpoints, createBreakpoints } from './create-breakpoints.js';

dist/index.js

@@ -34,2 +34,3 @@ "use strict";
   getColor: () => getColor,
+  getColorVar: () => getColorVar,
   isAccessible: () => isAccessible,
@@ -55,2 +56,3 @@ isDark: () => isDark,
 // src/color.ts
+var import_styled_system = require("@chakra-ui/styled-system");
 var import_color2k = require("color2k");
@@ -76,2 +78,6 @@
 };
+var getColorVar = (theme, color, fallback) => {
+  var _a;
+  return (_a = (0, import_styled_system.getCSSVar)(theme, "colors", color)) != null ? _a : fallback;
+};
 var getBrightness = (color) => {
@@ -308,2 +314,3 @@ const [r, g, b] = (0, import_color2k.parseToRgba)(color);
   getColor,
+  getColorVar,
   isAccessible,
@@ -310,0 +317,0 @@ isDark,

package.json

 {
   "name": "@chakra-ui/theme-tools",
-  "version": "2.0.17",
+  "version": "2.0.18",
   "description": "Set of helpers that makes theming and styling easier",
@@ -40,5 +40,5 @@ "keywords": [
     "@types/dlv": "^1.1.2",
-    "clean-package": "2.1.1",
+    "clean-package": "2.2.0",
     "dlv": "^1.1.3",
-    "@chakra-ui/styled-system": "2.5.2"
+    "@chakra-ui/styled-system": "2.9.1"
   },
@@ -45,0 +45,0 @@ "clean-package": "../../../clean-package.config.json",

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

45207

increased by2.03%

Lines of code

1360

increased by2.1%

No dependency changes