@chakra-ui/theme-tools
Advanced tools
Comparing version 1.2.0 to 1.2.1
# Change Log | ||
## 1.2.1 | ||
### Patch Changes | ||
- [`09577b088`](https://github.com/chakra-ui/chakra-ui/commit/09577b088272075f6f183bbb34d5639ac5e68cc0) | ||
[#4708](https://github.com/chakra-ui/chakra-ui/pull/4708) Thanks | ||
[@hiroppy](https://github.com/hiroppy)! - Replace `tinycolor2` with | ||
`@ctrl/tinycolor` to get better tree-shaking benefits | ||
## 1.2.0 | ||
@@ -4,0 +13,0 @@ |
@@ -8,8 +8,6 @@ "use strict"; | ||
var _tinycolor = _interopRequireDefault(require("tinycolor2")); | ||
var _tinycolor = require("@ctrl/tinycolor"); | ||
var _utils = require("@chakra-ui/utils"); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } | ||
/** | ||
@@ -23,3 +21,6 @@ * Get the color raw value from theme | ||
var hex = (0, _utils.memoizedGet)(theme, "colors." + color, color); | ||
var isValid = (0, _tinycolor["default"])(hex).isValid(); | ||
var _TinyColor = new _tinycolor.TinyColor(hex), | ||
isValid = _TinyColor.isValid; | ||
return isValid ? hex : fallback; | ||
@@ -38,3 +39,3 @@ }; | ||
var hex = getColor(theme, color); | ||
var isDark = (0, _tinycolor["default"])(hex).isDark(); | ||
var isDark = new _tinycolor.TinyColor(hex).isDark(); | ||
return isDark ? "dark" : "light"; | ||
@@ -81,3 +82,3 @@ }; | ||
var raw = getColor(theme, color); | ||
return (0, _tinycolor["default"])(raw).setAlpha(opacity).toRgbString(); | ||
return new _tinycolor.TinyColor(raw).setAlpha(opacity).toRgbString(); | ||
}; | ||
@@ -97,3 +98,3 @@ }; | ||
var raw = getColor(theme, color); | ||
return _tinycolor["default"].mix(raw, "#fff", amount).toHexString(); | ||
return new _tinycolor.TinyColor(raw).mix("#fff", amount).toHexString(); | ||
}; | ||
@@ -113,3 +114,3 @@ }; | ||
var raw = getColor(theme, color); | ||
return _tinycolor["default"].mix(raw, "#000", amount).toHexString(); | ||
return new _tinycolor.TinyColor(raw).mix("#000", amount).toHexString(); | ||
}; | ||
@@ -129,3 +130,3 @@ }; | ||
var raw = getColor(theme, color); | ||
return (0, _tinycolor["default"])(raw).darken(amount).toHexString(); | ||
return new _tinycolor.TinyColor(raw).darken(amount).toHexString(); | ||
}; | ||
@@ -144,3 +145,3 @@ }; | ||
return function (theme) { | ||
return (0, _tinycolor["default"])(getColor(theme, color)).lighten(amount).toHexString(); | ||
return new _tinycolor.TinyColor(getColor(theme, color)).lighten(amount).toHexString(); | ||
}; | ||
@@ -161,3 +162,3 @@ }; | ||
return function (theme) { | ||
return _tinycolor["default"].readability(getColor(theme, bg), getColor(theme, fg)); | ||
return (0, _tinycolor.readability)(getColor(theme, bg), getColor(theme, fg)); | ||
}; | ||
@@ -178,3 +179,3 @@ }; | ||
return function (theme) { | ||
return _tinycolor["default"].isReadable(getColor(theme, bgColor), getColor(theme, textColor), options); | ||
return (0, _tinycolor.isReadable)(getColor(theme, bgColor), getColor(theme, textColor), options); | ||
}; | ||
@@ -187,3 +188,3 @@ }; | ||
return function (theme) { | ||
return (0, _tinycolor["default"])(getColor(theme, color)).complement().toHexString(); | ||
return new _tinycolor.TinyColor(getColor(theme, color)).complement().toHexString(); | ||
}; | ||
@@ -210,3 +211,3 @@ }; | ||
function randomColor(opts) { | ||
var fallback = _tinycolor["default"].random().toHexString(); | ||
var fallback = (0, _tinycolor.random)().toHexString(); | ||
@@ -213,0 +214,0 @@ if (!opts || (0, _utils.isEmptyObject)(opts)) { |
@@ -1,2 +0,2 @@ | ||
import Color from "tinycolor2"; | ||
import { TinyColor, readability, isReadable, random } from "@ctrl/tinycolor"; | ||
import { memoizedGet as get, isEmptyObject } from "@chakra-ui/utils"; | ||
@@ -12,3 +12,5 @@ /** | ||
var hex = get(theme, "colors." + color, color); | ||
var isValid = Color(hex).isValid(); | ||
var { | ||
isValid | ||
} = new TinyColor(hex); | ||
return isValid ? hex : fallback; | ||
@@ -23,3 +25,3 @@ }; | ||
var hex = getColor(theme, color); | ||
var isDark = Color(hex).isDark(); | ||
var isDark = new TinyColor(hex).isDark(); | ||
return isDark ? "dark" : "light"; | ||
@@ -47,3 +49,3 @@ }; | ||
var raw = getColor(theme, color); | ||
return Color(raw).setAlpha(opacity).toRgbString(); | ||
return new TinyColor(raw).setAlpha(opacity).toRgbString(); | ||
}; | ||
@@ -58,3 +60,3 @@ /** | ||
var raw = getColor(theme, color); | ||
return Color.mix(raw, "#fff", amount).toHexString(); | ||
return new TinyColor(raw).mix("#fff", amount).toHexString(); | ||
}; | ||
@@ -69,3 +71,3 @@ /** | ||
var raw = getColor(theme, color); | ||
return Color.mix(raw, "#000", amount).toHexString(); | ||
return new TinyColor(raw).mix("#000", amount).toHexString(); | ||
}; | ||
@@ -80,3 +82,3 @@ /** | ||
var raw = getColor(theme, color); | ||
return Color(raw).darken(amount).toHexString(); | ||
return new TinyColor(raw).darken(amount).toHexString(); | ||
}; | ||
@@ -89,3 +91,3 @@ /** | ||
export var lighten = (color, amount) => theme => Color(getColor(theme, color)).lighten(amount).toHexString(); | ||
export var lighten = (color, amount) => theme => new TinyColor(getColor(theme, color)).lighten(amount).toHexString(); | ||
/** | ||
@@ -99,3 +101,3 @@ * Checks the contract ratio of between 2 colors, | ||
export var contrast = (fg, bg) => theme => Color.readability(getColor(theme, bg), getColor(theme, fg)); | ||
export var contrast = (fg, bg) => theme => readability(getColor(theme, bg), getColor(theme, fg)); | ||
/** | ||
@@ -109,4 +111,4 @@ * Checks if a color meets the Web Content Accessibility | ||
export var isAccessible = (textColor, bgColor, options) => theme => Color.isReadable(getColor(theme, bgColor), getColor(theme, textColor), options); | ||
export var complementary = color => theme => Color(getColor(theme, color)).complement().toHexString(); | ||
export var isAccessible = (textColor, bgColor, options) => theme => isReadable(getColor(theme, bgColor), getColor(theme, textColor), options); | ||
export var complementary = color => theme => new TinyColor(getColor(theme, color)).complement().toHexString(); | ||
export function generateStripe(size, color) { | ||
@@ -127,3 +129,3 @@ if (size === void 0) { | ||
export function randomColor(opts) { | ||
var fallback = Color.random().toHexString(); | ||
var fallback = random().toHexString(); | ||
@@ -130,0 +132,0 @@ if (!opts || isEmptyObject(opts)) { |
@@ -1,2 +0,2 @@ | ||
import Color from "tinycolor2"; | ||
import { WCAG2Parms } from "@ctrl/tinycolor"; | ||
import { Dict } from "@chakra-ui/utils"; | ||
@@ -70,3 +70,3 @@ /** | ||
*/ | ||
export declare const isAccessible: (textColor: string, bgColor: string, options?: Color.WCAG2Options | undefined) => (theme: Dict) => boolean; | ||
export declare const isAccessible: (textColor: string, bgColor: string, options?: WCAG2Parms | undefined) => (theme: Dict) => boolean; | ||
export declare const complementary: (color: string) => (theme: Dict) => string; | ||
@@ -73,0 +73,0 @@ export declare function generateStripe(size?: string, color?: string): { |
{ | ||
"name": "@chakra-ui/theme-tools", | ||
"version": "1.2.0", | ||
"version": "1.2.1", | ||
"description": "Set of helpers that makes theming and styling easier", | ||
@@ -55,4 +55,3 @@ "keywords": [ | ||
"@chakra-ui/utils": "1.8.2", | ||
"@types/tinycolor2": "1.4.2", | ||
"tinycolor2": "1.4.2" | ||
"@ctrl/tinycolor": "^3.4.0" | ||
}, | ||
@@ -59,0 +58,0 @@ "peerDependencies": { |
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
117031
3
1154
+ Added@ctrl/tinycolor@^3.4.0
+ Added@ctrl/tinycolor@3.6.1(transitive)
- Removed@types/tinycolor2@1.4.2
- Removedtinycolor2@1.4.2
- Removed@types/tinycolor2@1.4.2(transitive)
- Removedtinycolor2@1.4.2(transitive)