From 741347f226377d72300cd59d51633e432d2f2244 Mon Sep 17 00:00:00 2001
From: Wang Sijie <wangsijie@silverhand.io>
Date: Thu, 7 Jul 2022 13:59:27 +0800
Subject: [PATCH] refactor(console,schemas,shared): extract dark mode color
 generator (#1425)

---
 packages/console/package.json                              | 1 -
 .../src/pages/SignInExperience/components/ColorForm.tsx    | 5 ++---
 packages/schemas/src/seeds/sign-in-experience.ts           | 7 +++++--
 packages/shared/src/utilities/color.ts                     | 3 +++
 pnpm-lock.yaml                                             | 2 --
 5 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/console/package.json b/packages/console/package.json
index 724f69668..17623a129 100644
--- a/packages/console/package.json
+++ b/packages/console/package.json
@@ -42,7 +42,6 @@
     "@types/react-modal": "^3.13.1",
     "@types/react-syntax-highlighter": "^15.5.1",
     "classnames": "^2.3.1",
-    "color": "^4.2.3",
     "cross-env": "^7.0.3",
     "csstype": "^3.0.11",
     "dayjs": "^1.10.5",
diff --git a/packages/console/src/pages/SignInExperience/components/ColorForm.tsx b/packages/console/src/pages/SignInExperience/components/ColorForm.tsx
index 137707471..1c7e70a86 100644
--- a/packages/console/src/pages/SignInExperience/components/ColorForm.tsx
+++ b/packages/console/src/pages/SignInExperience/components/ColorForm.tsx
@@ -1,5 +1,4 @@
-import { absoluteLighten } from '@logto/shared';
-import color from 'color';
+import { generateDarkColor } from '@logto/shared';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -27,7 +26,7 @@ const ColorForm = () => {
   const darkPrimaryColor = watch('color.darkPrimaryColor');
 
   const calculatedDarkPrimaryColor = useMemo(() => {
-    return absoluteLighten(color(primaryColor), 10).hex();
+    return generateDarkColor(primaryColor);
   }, [primaryColor]);
 
   const handleResetColor = useCallback(() => {
diff --git a/packages/schemas/src/seeds/sign-in-experience.ts b/packages/schemas/src/seeds/sign-in-experience.ts
index 229e0fd78..a8ea4cd1b 100644
--- a/packages/schemas/src/seeds/sign-in-experience.ts
+++ b/packages/schemas/src/seeds/sign-in-experience.ts
@@ -1,14 +1,17 @@
 import { Language } from '@logto/phrases-ui';
+import { generateDarkColor } from '@logto/shared';
 
 import { CreateSignInExperience, SignInMode } from '../db-entries';
 import { BrandingStyle, SignInMethodState } from '../foundations';
 
+const defaultPrimaryColor = '#6139F6';
+
 export const defaultSignInExperience: Readonly<CreateSignInExperience> = {
   id: 'default',
   color: {
-    primaryColor: '#6139F6',
+    primaryColor: defaultPrimaryColor,
     isDarkModeEnabled: false,
-    darkPrimaryColor: '#8768F8',
+    darkPrimaryColor: generateDarkColor(defaultPrimaryColor),
   },
   branding: {
     style: BrandingStyle.Logo,
diff --git a/packages/shared/src/utilities/color.ts b/packages/shared/src/utilities/color.ts
index 1fe0e2c02..5a8147b3e 100644
--- a/packages/shared/src/utilities/color.ts
+++ b/packages/shared/src/utilities/color.ts
@@ -12,3 +12,6 @@ export const absoluteDarken = (baseColor: color, delta: number) => {
 
   return color([hslArray[0], hslArray[1], hslArray[2] - delta], 'hsl');
 };
+
+export const generateDarkColor = (lightColor: string) =>
+  absoluteLighten(color(lightColor), 10).hex();
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 24474817d..132966984 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -691,7 +691,6 @@ importers:
       '@types/react-modal': ^3.13.1
       '@types/react-syntax-highlighter': ^15.5.1
       classnames: ^2.3.1
-      color: ^4.2.3
       cross-env: ^7.0.3
       csstype: ^3.0.11
       dayjs: ^1.10.5
@@ -755,7 +754,6 @@ importers:
       '@types/react-modal': 3.13.1
       '@types/react-syntax-highlighter': 15.5.1
       classnames: 2.3.1
-      color: 4.2.3
       cross-env: 7.0.3
       csstype: 3.0.11
       dayjs: 1.10.7