Merge pull request #372 from Web3Auth/fix/color-import

use color package injection to help with esm builds

Author: chaitanyapotti

package-lock.json

@@ -80,6 +80,7 @@
     "@types/pump": "^1.1.3",
     "@types/readable-stream": "^4.0.19",
     "@vitest/coverage-istanbul": "^3.1.4",
+    "color": "^5.0.0",
     "cross-env": "^7.0.3",
     "eslint": "^9.27.0",
     "husky": "^9.1.7",
@@ -93,7 +94,8 @@
     "vitest": "^3.1.4"
   },
   "peerDependencies": {
-    "@babel/runtime": "7.x"
+    "@babel/runtime": "7.x",
+    "color": "^5.x"
   },
   "optionalDependencies": {
     "@nx/nx-linux-x64-gnu": "^21.1.1",
@@ -127,7 +129,6 @@
     "base64url": "^3.0.1",
     "bip39": "^3.1.0",
     "bn.js": "^5.2.2",
-    "color": "^5.0.0",
     "deepmerge": "^4.3.1",
     "enc-utils": "^3.0.0",
     "end-of-stream": "^1.4.4",

package.json

@@ -1,33 +1,41 @@
-import Color from "color";
+import type { ColorConstructor } from "color";
 
 import { type WHITE_LABEL_THEME } from "./interfaces";
 
-export function getColorsList(colorsAmount = 3, colorsShiftAmount = 50, mixColor = "black", rotate = 0, saturation = 20, mainColor = "#0346ff") {
+export function getColorsList(
+  colorPackage: ColorConstructor,
+  colorsAmount = 3,
+  colorsShiftAmount = 50,
+  mixColor = "black",
+  rotate = 0,
+  saturation = 20,
+  mainColor = "#0346ff"
+) {
   const colorsList = [];
 
   let step;
   for (step = 0; step < colorsAmount; step += 1) {
     colorsList.push(
-      Color(mainColor)
+      colorPackage(mainColor)
         .rotate(((step + 1) / colorsAmount) * -rotate)
         .saturate(((step + 1) / colorsAmount) * (saturation / 100))
-        .mix(Color(mixColor), ((colorsShiftAmount / 100) * (step + 1)) / colorsAmount)
+        .mix(colorPackage(mixColor), ((colorsShiftAmount / 100) * (step + 1)) / colorsAmount)
         .hex()
     );
   }
 
   return colorsList;
 }
 
-export function generateWhiteLabelTheme(primary: string) {
-  const darkSet = getColorsList(3, 50, "black", 0, 20, primary);
-  const lightSet = getColorsList(6, 85, "white", 0, 20, primary);
+export function generateWhiteLabelTheme(colorPackage: ColorConstructor, primary: string) {
+  const darkSet = getColorsList(colorPackage, 3, 50, "black", 0, 20, primary);
+  const lightSet = getColorsList(colorPackage, 6, 85, "white", 0, 20, primary);
   return [...darkSet.reverse(), primary, ...lightSet];
 }
 
-export function applyWhiteLabelTheme(rootElement: HTMLElement, theme: WHITE_LABEL_THEME) {
+export function applyWhiteLabelTheme(colorPackage: ColorConstructor, rootElement: HTMLElement, theme: WHITE_LABEL_THEME) {
   if (theme.primary) {
-    const themeSet = generateWhiteLabelTheme(theme.primary);
+    const themeSet = generateWhiteLabelTheme(colorPackage, theme.primary);
 
     rootElement.style.setProperty("--app-primary-900", themeSet[0]);
     rootElement.style.setProperty("--app-primary-800", themeSet[1]);