From 45ee68d08244636f2ce5337e9b88879f89549671 Mon Sep 17 00:00:00 2001
From: Tony Wu <93302820+tonywu6@users.noreply.github.com>
Date: Wed, 19 Jan 2022 11:49:10 +0800
Subject: [PATCH 1/2] Align gray colors with antd@4.18 palettes

---
 src/generate.ts |  6 +++++-
 src/index.ts    | 13 ++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/generate.ts b/src/generate.ts
index 1bb6806..7f74d76 100644
--- a/src/generate.ts
+++ b/src/generate.ts
@@ -1,4 +1,4 @@
-import { rgbToHsv, rgbToHex, inputToRGB } from '@ctrl/tinycolor';
+import { rgbToHsv, rgbToHex, inputToRGB, tinycolor, TinyColor } from '@ctrl/tinycolor';
 
 const hueStep = 2; // 色相阶梯
 const saturationStep = 0.16; // 饱和度阶梯，浅色部分
@@ -158,3 +158,7 @@ export default function generate(color: string, opts: Opts = {}): string[] {
   }
   return patterns;
 }
+
+export function generateGrayscale(percentage: number): TinyColor {
+  return tinycolor('white').setAlpha(percentage).onBackground(tinycolor('black'));
+}
diff --git a/src/index.ts b/src/index.ts
index 95a5984..ff9a451 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,7 +1,7 @@
-import generate from './generate';
+import generate, { generateGrayscale } from './generate';
 
 export interface PalettesProps {
-  [key: string]: string[] & { primary?: string };
+  [key: string]: readonly string[] & { primary?: string };
 }
 
 const presetPrimaryColors: {
@@ -19,7 +19,6 @@ const presetPrimaryColors: {
   geekblue: '#2F54EB',
   purple: '#722ED1',
   magenta: '#EB2F96',
-  grey: '#666666',
 };
 
 const presetPalettes: PalettesProps = {};
@@ -37,6 +36,14 @@ Object.keys(presetPrimaryColors).forEach((key): void => {
   presetDarkPalettes[key].primary = presetDarkPalettes[key][5];
 });
 
+// Per antd@4.18 neutral colors use a separate pattern
+const grayscaleGradient: number[] = [1, 0.98, 0.96, 0.94, 0.85, 0.75, 0.55, 0.35, 0.263, 0.15, 0.12, 0.08, 0];
+
+const grayColors = grayscaleGradient.map((percent) => `#${generateGrayscale(percent).toHex()}`);
+
+presetPalettes.grey = presetDarkPalettes.grey = grayColors;
+presetDarkPalettes.grey.primary = presetDarkPalettes.grey.primary = '#BFBFBF';
+
 const red = presetPalettes.red;
 const volcano = presetPalettes.volcano;
 const gold = presetPalettes.gold;

From 9542324137917d1401264fac9a7d7d217775b059 Mon Sep 17 00:00:00 2001
From: Tony Wu <93302820+tonywu6@users.noreply.github.com>
Date: Wed, 19 Jan 2022 17:30:11 +0800
Subject: [PATCH 2/2] Use lighten() directly instead of using alpha

---
 src/generate.ts | 6 +-----
 src/index.ts    | 8 +++++---
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/generate.ts b/src/generate.ts
index 7f74d76..1bb6806 100644
--- a/src/generate.ts
+++ b/src/generate.ts
@@ -1,4 +1,4 @@
-import { rgbToHsv, rgbToHex, inputToRGB, tinycolor, TinyColor } from '@ctrl/tinycolor';
+import { rgbToHsv, rgbToHex, inputToRGB } from '@ctrl/tinycolor';
 
 const hueStep = 2; // 色相阶梯
 const saturationStep = 0.16; // 饱和度阶梯，浅色部分
@@ -158,7 +158,3 @@ export default function generate(color: string, opts: Opts = {}): string[] {
   }
   return patterns;
 }
-
-export function generateGrayscale(percentage: number): TinyColor {
-  return tinycolor('white').setAlpha(percentage).onBackground(tinycolor('black'));
-}
diff --git a/src/index.ts b/src/index.ts
index eeba3ba..5a0c4cc 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,5 @@
-import generate, { generateGrayscale } from './generate';
+import tinycolor from '@ctrl/tinycolor';
+import generate from './generate';
 
 export interface PalettesProps {
   [key: string]: readonly string[] & { primary?: string };
@@ -37,9 +38,10 @@ Object.keys(presetPrimaryColors).forEach((key): void => {
 });
 
 // Per antd@4.18 neutral colors use a separate pattern
-const grayscaleGradient: number[] = [1, 0.98, 0.96, 0.94, 0.85, 0.75, 0.55, 0.35, 0.263, 0.15, 0.12, 0.08, 0];
+const black = tinycolor('black');
+const grayscaleGradient: number[] = [100, 98, 96, 94, 85, 75, 55, 35, 26.3, 15, 12, 8, 0];
 
-const grayColors = grayscaleGradient.map((percent) => `#${generateGrayscale(percent).toHex()}`);
+const grayColors = grayscaleGradient.map((brightness) => `#${black.lighten(brightness).toHex()}`);
 
 presetPalettes.grey = presetDarkPalettes.grey = grayColors;
 presetDarkPalettes.grey.primary = presetDarkPalettes.grey.primary = '#BFBFBF';