From 565b944ae0dbd54d9d0f6d5034f8d3932a70e6e8 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Sun, 23 Oct 2022 15:02:09 +0800
Subject: [PATCH] refactor(ui): refactor branding color calulation logic

refactor branding color calculation logic
---
 .../ui/src/containers/AppContent/index.tsx    |  2 +-
 packages/ui/src/hooks/use-color-theme.ts      | 67 ++++++++++---------
 packages/ui/src/scss/_colors.scss             |  2 +-
 3 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/packages/ui/src/containers/AppContent/index.tsx b/packages/ui/src/containers/AppContent/index.tsx
index 30e117ff4..57da52cfe 100644
--- a/packages/ui/src/containers/AppContent/index.tsx
+++ b/packages/ui/src/containers/AppContent/index.tsx
@@ -24,7 +24,7 @@ const AppContent = ({ children }: Props) => {
   }, [setToast]);
 
   // Set Primary Color
-  useColorTheme(experienceSettings?.color.primaryColor, experienceSettings?.color.darkPrimaryColor);
+  useColorTheme();
 
   // Set Theme Mode
   useEffect(() => {
diff --git a/packages/ui/src/hooks/use-color-theme.ts b/packages/ui/src/hooks/use-color-theme.ts
index 665e4ac95..ad3429ee8 100644
--- a/packages/ui/src/hooks/use-color-theme.ts
+++ b/packages/ui/src/hooks/use-color-theme.ts
@@ -1,54 +1,59 @@
 import { absoluteDarken, absoluteLighten } from '@logto/core-kit';
 import color from 'color';
-import { useEffect } from 'react';
+import { useEffect, useContext } from 'react';
+
+import { PageContext } from '@/hooks/use-page-context';
 
 const generateLightColorLibrary = (primaryColor: color) => ({
-  [`--color-light-brand`]: primaryColor.hex(),
-  [`--color-light-brand-hover`]: absoluteLighten(primaryColor, 10).string(),
-  [`--color-light-brand-pressed`]: absoluteDarken(primaryColor, 10).string(),
-  [`--color-light-overlay-brand-focused`]: primaryColor.alpha(0.16).string(),
-  [`--color-light-overlay-brand-hover`]: primaryColor.alpha(0.08).string(),
-  [`--color-light-overlay-brand-pressed`]: primaryColor.alpha(0.12).string(),
+  [`--color-brand-default`]: primaryColor.hex(),
+  [`--color-brand-hover`]: absoluteLighten(primaryColor, 10).string(),
+  [`--color-brand-pressed`]: absoluteDarken(primaryColor, 10).string(),
+  [`--color-overlay-brand-focused`]: primaryColor.alpha(0.16).string(),
+  [`--color-overlay-brand-hover`]: primaryColor.alpha(0.08).string(),
+  [`--color-overlay-brand-pressed`]: primaryColor.alpha(0.12).string(),
 });
 
 const generateDarkColorLibrary = (primaryColor: color) => ({
-  [`--color-dark-brand`]: primaryColor.hex(),
-  [`--color-dark-brand-hover`]: absoluteLighten(primaryColor, 10).string(),
-  [`--color-dark-brand-pressed`]: absoluteDarken(primaryColor, 10).string(),
-  [`--color-dark-overlay-brand-focused`]: absoluteLighten(primaryColor, 17)
-    .rgb()
-    .alpha(0.16)
-    .string(),
-  [`--color-dark-overlay-brand-hover`]: absoluteLighten(primaryColor, 17)
-    .rgb()
-    .alpha(0.08)
-    .string(),
-  [`--color-dark-overlay-brand-pressed`]: absoluteLighten(primaryColor, 17)
-    .rgb()
-    .alpha(0.12)
-    .string(),
+  [`--color-brand-default`]: primaryColor.hex(),
+  [`--color-brand-hover`]: absoluteLighten(primaryColor, 10).string(),
+  [`--color-brand-pressed`]: absoluteDarken(primaryColor, 10).string(),
+  [`--color-overlay-brand-focused`]: absoluteLighten(primaryColor, 30).rgb().alpha(0.16).string(),
+  [`--color-overlay-brand-hover`]: absoluteLighten(primaryColor, 30).rgb().alpha(0.08).string(),
+  [`--color-overlay-brand-pressed`]: absoluteLighten(primaryColor, 30).rgb().alpha(0.12).string(),
 });
 
-const useColorTheme = (primaryColor?: string, darkPrimaryColor?: string) => {
+const useColorTheme = () => {
+  const { theme, experienceSettings } = useContext(PageContext);
+  const primaryColor = experienceSettings?.color.primaryColor;
+  const darkPrimaryColor = experienceSettings?.color.darkPrimaryColor;
+
   useEffect(() => {
     if (!primaryColor) {
       return;
     }
 
     const lightPrimary = color(primaryColor);
-    const darkPrimary = color(darkPrimaryColor);
 
-    const lightColorLibrary = generateLightColorLibrary(lightPrimary);
+    if (theme === 'light') {
+      const lightColorLibrary = generateLightColorLibrary(lightPrimary);
+
+      for (const [key, value] of Object.entries(lightColorLibrary)) {
+        document.body.style.setProperty(key, value);
+      }
+
+      return;
+    }
+
+    const darkPrimary = darkPrimaryColor
+      ? color(darkPrimaryColor)
+      : absoluteLighten(lightPrimary, 10);
+
     const darkColorLibrary = generateDarkColorLibrary(darkPrimary);
 
-    for (const [key, value] of Object.entries(lightColorLibrary)) {
-      document.documentElement.style.setProperty(key, value);
-    }
-
     for (const [key, value] of Object.entries(darkColorLibrary)) {
-      document.documentElement.style.setProperty(key, value);
+      document.body.style.setProperty(key, value);
     }
-  }, [darkPrimaryColor, primaryColor]);
+  }, [darkPrimaryColor, primaryColor, theme]);
 };
 
 export default useColorTheme;
diff --git a/packages/ui/src/scss/_colors.scss b/packages/ui/src/scss/_colors.scss
index ed21cbe9c..3666003dd 100644
--- a/packages/ui/src/scss/_colors.scss
+++ b/packages/ui/src/scss/_colors.scss
@@ -112,7 +112,7 @@
   --color-danger-50: #ff897a;
   --color-danger-60: #ff5449;
   --color-danger-70: #dd3730;
-  --color-danger-50: #ba1b1b;
+  --color-danger-80: #ba1b1b;
 
   --color-success-60: #4ea254;
   --color-success-70: #32873d;