Create new whitelabel palette generation algorithm

examples/vue-example/src/lib/whitelabel.ts

@@ -8,6 +8,7 @@ const whiteLabel: WhiteLabelData = {
   mode: "auto",
   theme: {
     primary: "#FF9900",
+    onPrimary: "black",
   },
 };
 

lerna.json

@@ -1,5 +1,5 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "6.2.3",
+  "version": "6.2.5",
   "npmClient": "npm"
 }

package.json

@@ -49,6 +49,10 @@
     "tslib": "^2.6.2",
     "typescript": "^5.3.3"
   },
+  "optionalDependencies": {
+    "@nx/nx-linux-x64-gnu": "^17.2.8",
+    "@rollup/rollup-linux-x64-gnu": "^4.9.6"
+  },
   "author": "Torus Labs",
   "license": "MIT",
   "lint-staged": {

packages/openlogin-jrpc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toruslabs/openlogin-jrpc",
-  "version": "6.2.3",
+  "version": "6.2.5",
   "homepage": "https://github.com/torusresearch/OpenLoginSdk#readme",
   "license": "ISC",
   "main": "dist/openloginJrpc.cjs.js",
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@metamask/rpc-errors": "^6.1.0",
-    "@toruslabs/openlogin-utils": "^6.2.2",
+    "@toruslabs/openlogin-utils": "^6.2.5",
     "end-of-stream": "^1.4.4",
     "events": "^3.3.0",
     "fast-safe-stringify": "^2.1.1",

packages/openlogin-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toruslabs/openlogin-utils",
-  "version": "6.2.2",
+  "version": "6.2.5",
   "homepage": "https://github.com/torusresearch/OpenLoginSdk#readme",
   "license": "ISC",
   "main": "dist/openloginUtils.cjs.js",
@@ -21,7 +21,8 @@
   },
   "dependencies": {
     "@toruslabs/constants": "^13.1.0",
-    "base64url": "^3.0.1"
+    "base64url": "^3.0.1",
+    "color": "^4.2.3"
   },
   "peerDependencies": {
     "@babel/runtime": "7.x"
@@ -51,5 +52,8 @@
     "node": ">=18.x",
     "npm": ">=9.x"
   },
-  "gitHead": "2d61b7f1967ecd704470c46ff7c30c47d240f4a4"
+  "gitHead": "2d61b7f1967ecd704470c46ff7c30c47d240f4a4",
+  "devDependencies": {
+    "@types/color": "^3.0.6"
+  }
 }

packages/openlogin-utils/src/index.ts

@@ -2,3 +2,5 @@ export * from "./browserStorage";
 export * from "./constants";
 export * from "./interfaces";
 export * from "./utils";
+// TODO: code splitting
+export * from "./whitelabel";

packages/openlogin-utils/src/interfaces.ts

@@ -246,7 +246,7 @@ export const LANGUAGES = {
   fr: "fr",
   pt: "pt",
   nl: "nl",
-  tk: "tk",
+  tr: "tr",
 } as const;
 
 export type LANGUAGE_TYPE = (typeof LANGUAGES)[keyof typeof LANGUAGES];
@@ -255,7 +255,7 @@ export const THEME_MODES = {
   light: "light",
   dark: "dark",
   auto: "auto",
-};
+} as const;
 
 export type THEME_MODE_TYPE = (typeof THEME_MODES)[keyof typeof THEME_MODES];
 
@@ -300,7 +300,7 @@ export type WhiteLabelData = {
    * fr: french
    * pt: portuguese
    * nl: dutch
-   * tk: turkish
+   * tr: turkish
    *
    * @defaultValue en
    */

packages/openlogin-utils/src/whitelabel.ts

@@ -0,0 +1,49 @@
+import Color from "color";
+
+import { type WHITE_LABEL_THEME } from "./interfaces";
+
+function getColorsList(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)
+        .rotate(((step + 1) / colorsAmount) * -rotate)
+        .saturate(((step + 1) / colorsAmount) * (saturation / 100))
+        .mix(Color(mixColor), ((colorsShiftAmount / 100) * (step + 1)) / colorsAmount)
+        .hex()
+    );
+  }
+
+  return colorsList;
+}
+
+function generateWhiteLabelTheme(primary: string) {
+  const darkSet = getColorsList(3, 50, "black", 0, 20, primary);
+  const lightSet = getColorsList(6, 85, "white", 0, 20, primary);
+  return [...darkSet.reverse(), ...[primary], ...lightSet];
+}
+
+function applyWhiteLabelTheme(rootElement: HTMLElement, theme: WHITE_LABEL_THEME) {
+  if (theme.primary) {
+    const themeSet = generateWhiteLabelTheme(theme.primary);
+
+    rootElement.style.setProperty("--app-primary-900", themeSet[0]);
+    rootElement.style.setProperty("--app-primary-800", themeSet[1]);
+    rootElement.style.setProperty("--app-primary-700", themeSet[2]);
+    rootElement.style.setProperty("--app-primary-600", themeSet[3]);
+    rootElement.style.setProperty("--app-primary-500", themeSet[4]);
+    rootElement.style.setProperty("--app-primary-400", themeSet[5]);
+    rootElement.style.setProperty("--app-primary-300", themeSet[6]);
+    rootElement.style.setProperty("--app-primary-200", themeSet[7]);
+    rootElement.style.setProperty("--app-primary-100", themeSet[8]);
+    rootElement.style.setProperty("--app-primary-50", themeSet[9]);
+  }
+
+  if (theme.onPrimary) {
+    rootElement.style.setProperty("--app-on-primary", theme.onPrimary);
+  }
+}
+
+export { applyWhiteLabelTheme };

packages/openlogin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toruslabs/openlogin",
-  "version": "6.2.2",
+  "version": "6.2.5",
   "homepage": "https://github.com/torusresearch/OpenLoginSdk#readme",
   "license": "ISC",
   "main": "dist/openlogin.cjs.js",
@@ -23,15 +23,21 @@
     "@toruslabs/eccrypto": "^4.0.0",
     "@toruslabs/metadata-helpers": "^5.0.0",
     "@toruslabs/openlogin-session-manager": "^3.0.0",
-    "@toruslabs/openlogin-utils": "^6.2.2",
+    "@toruslabs/openlogin-utils": "file:../openlogin-utils",
     "@toruslabs/secure-pub-sub": "^0.0.1",
     "bowser": "^2.11.0",
     "events": "^3.3.0",
     "loglevel": "^1.8.1",
     "ts-custom-error": "^3.3.1"
   },
   "peerDependencies": {
-    "@babel/runtime": "7.x"
+    "@babel/runtime": "7.x",
+    "@toruslabs/openlogin-utils": "file:../openlogin-utils"
+  },
+  "peerDependenciesMeta": {
+    "@toruslabs/openlogin-utils": {
+      "optional": true
+    }
   },
   "files": [
     "dist",

packages/wrapper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openlogin",
-  "version": "6.2.3",
+  "version": "6.2.5",
   "homepage": "https://github.com/torusresearch/OpenLoginSdk#readme",
   "license": "ISC",
   "main": "dist/openlogin.cjs.js",
@@ -20,9 +20,9 @@
     "pre-commit": "lint-staged --cwd ."
   },
   "dependencies": {
-    "@toruslabs/openlogin": "^6.2.2",
-    "@toruslabs/openlogin-jrpc": "^6.2.3",
-    "@toruslabs/openlogin-utils": "^6.2.2"
+    "@toruslabs/openlogin": "^6.2.5",
+    "@toruslabs/openlogin-jrpc": "^6.2.5",
+    "@toruslabs/openlogin-utils": "^6.2.5"
   },
   "peerDependencies": {
     "@babel/runtime": "7.x"