fix: theme-tools methods color mix amounts (#7158)

Closes #7155
chakra-ui · Dec 28, 2022 · be1926e · be1926e · vercel · Dec 28, 2022
1 parent 30938fa
commit be1926e
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/.changeset/chatty-games-refuse.md b/.changeset/chatty-games-refuse.md
@@ -0,0 +1,5 @@
+---
+"@chakra-ui/theme-tools": patch
+---
+
+Resolve theme tools to values between 0 and 1
diff --git a/packages/components/theme-tools/src/color.ts b/packages/components/theme-tools/src/color.ts
@@ -106,7 +106,7 @@ export const whiten = (color: string, amount: number) => (theme: Dict) => {
  */
 export const blacken = (color: string, amount: number) => (theme: Dict) => {
   const raw = getColor(theme, color)
-  return toHex(mix(raw, "#000", amount))
+  return toHex(mix(raw, "#000", amount / 100))
 }
 
 /**
@@ -118,7 +118,7 @@ export const blacken = (color: string, amount: number) => (theme: Dict) => {
  */
 export const darken = (color: string, amount: number) => (theme: Dict) => {
   const raw = getColor(theme, color)
-  return toHex(reduceLightness(raw, amount))
+  return toHex(reduceLightness(raw, amount / 100))
 }
 
 /**
@@ -130,7 +130,7 @@ export const darken = (color: string, amount: number) => (theme: Dict) => {
  */
 export const lighten = (color: string, amount: number) => (theme: Dict) => {
   const raw = getColor(theme, color)
-  toHex(increaseLightness(raw, amount))
+  toHex(increaseLightness(raw, amount / 100))
 }
 
 /**