feat: New Theme Structure and Custom Style Integration

config/config.toml

@@ -48,6 +48,7 @@ new_analytics=false
 new_analytics_smart_retries=false
 new_analytics_refunds=false
 down_time=false
+dev_theme_feature=false
 tax_processor=true
 x_feature_route=false
 tenant_user=false

public/hyperswitch/module.js

@@ -213,26 +213,72 @@ const getRGBColor = (hex, type) => {
   return `--color-${type}: ${r}, ${g}, ${b};`;
 };
 
-function appendStyle(customStyle) {
-  let { primaryColor, primaryHover, sidebar } = customStyle;
-  let cssVariables = `
-:root {
-  ${getRGBColor(primaryColor, "primary")}
-  ${getRGBColor(primaryHover, "hover")}
- ${getRGBColor(sidebar, "sidebar")}
+const getRGBvalue = (hex) => {
+  let color = hex.replace(/#/g, "");
+  if (color.length !== 6) {
+    color = `${color}${color}`;
+  }
+  var r = parseInt(color.substr(0, 2), 16);
+  var g = parseInt(color.substr(2, 2), 16);
+  var b = parseInt(color.substr(4, 2), 16);
 
-}
-`;
-  let style;
+  return `${r}, ${g}, ${b};`;
+};
+
+const toSnakeCase = (str) => {
+  return str
+    .replace(/([A-Z])/g, "-$1")
+    .replace(/\s+/g, "-")
+    .replace(/^-/, "")
+    .toLowerCase();
+};
+
+const generateVariablesForSection = (sectionData, sectionName) => {
+  return (
+    Object.entries(sectionData)
+      .map(([key, value]) => {
+        const processedValue =
+          typeof value === "string" && value.startsWith("#")
+            ? getRGBvalue(value)
+            : value;
+        return `  --${sectionName}-${toSnakeCase(key)}: ${processedValue};`;
+      })
+      .join("\n") + "\n"
+  );
+};
+
+const generateButtonVariables = (buttons) => {
+  return `
+  /* Primary Button */
+  ${generateVariablesForSection(buttons.primary, "btn-primary")}
+
+  /* Secondary Button */
+  ${generateVariablesForSection(buttons.secondary, "btn-secondary")}
+  `;
+};
+
+function appendStyle(themesConfig) {
+  const settings = themesConfig.settings;
+  let cssVariables = `:root{
+  /* Colors */
+  ${generateVariablesForSection(settings.colors, "colors")}
+  /* Typography */
+  ${generateVariablesForSection(settings.typography, "base")}
+ /* Buttons */
+  ${generateButtonVariables(settings.buttons)}
+  /* Borders */
+  ${generateVariablesForSection(settings.borders, "borders")}
+  /* Spacing */
+  ${generateVariablesForSection(settings.spacing, "spacing")}
 
-  if (document.getElementById("custom-style")) {
-    style = document.getElementById("custom-style");
+}`;
+  if (document.getElementById("custom-themes-style")) {
+    style = document.getElementById("custom-themes-style");
   } else {
     style = document.createElement("style");
   }
-  // let style = document.createElement("style")
   let text = document.createTextNode(cssVariables);
-  style.setAttribute("id", "custom-style");
+  style.setAttribute("id", "custom-themes-style");
   style.appendChild(text);
   document.head.appendChild(style);
 }

src/UIConifg/UIConfig.res

@@ -3,7 +3,15 @@ module ButtonConfig = {
     default: string,
     defaultPagination: string,
   }
-  type textColor = {primaryOutline: string, primaryNormal: string, primaryDisabled: string}
+  type textColor = {
+    primaryOutline: string,
+    primaryNormal: string,
+    primaryDisabled: string,
+    secondaryNormal: string,
+    secondaryLoading: string,
+    secondaryDisabled: string,
+    secondaryNoBorder: string,
+  }
   type bGcolor = {
     primaryNormal: string,
     primaryDisabled: string,
@@ -18,6 +26,7 @@ module ButtonConfig = {
     secondaryNormal: string,
     secondaryLoading: string,
     secondaryNoHover: string,
+    secondaryNoBorder: string,
   }
 
   type border = {
@@ -71,7 +80,7 @@ module BorderConfig = {
 }
 
 module SidebarConfig = {
-  type backgroundColor = {primaryNormal: string}
+  type backgroundColor = {sidebarNormal: string}
   type t = {backgroundColor: backgroundColor}
 }
 
@@ -80,13 +89,14 @@ type t = {
   font: FontConfig.t,
   backgroundColor: string,
   primaryColor: string,
+  secondaryColor: string,
   shadow: ShadowConfig.t,
   border: BorderConfig.t,
   sidebarColor: SidebarConfig.t,
 }
 
 let defaultUIConfig: t = {
-  backgroundColor: "bg-primary",
+  backgroundColor: "bg-background",
   button: {
     height: {
       medium: "h-fit",
@@ -114,33 +124,38 @@ let defaultUIConfig: t = {
       borderSecondaryBorderStyleClass: "border-border_gray border-opacity-20 dark:border-jp-gray-960 dark:border-opacity-100",
     },
     backgroundColor: {
-      primaryNormal: "bg-primary hover:bg-primary-hover focus:outline-none",
-      primaryDisabled: "bg-primary opacity-60 dark:bg-jp-gray-950 dark:bg-opacity-50 border dark:border-jp-gray-disabled_border dark:border-opacity-50",
-      primaryNoHover: "bg-primary hover:bg-primary-hover focus:outline-none dark:text-opacity-50 text-opacity-50",
-      primaryLoading: "bg-primary",
+      primaryNormal: "bg-button-primary-bg  hover:bg-button-primary-hoverbg focus:outline-none",
+      primaryDisabled: "bg-button-primary-bg  opacity-60 dark:bg-jp-gray-950 dark:bg-opacity-50 border dark:border-jp-gray-disabled_border dark:border-opacity-50",
+      primaryNoHover: "bg-button-primary-bg  hover:bg-button-primary-hoverbg focus:outline-none dark:text-opacity-50 text-opacity-50",
+      primaryLoading: "bg-button-primary-bg ",
       primaryOutline: "mix-blend-normal",
       paginationNormal: "border-left-1 opacity-80 border-right-1 font-normal border-left-1 text-jp-gray-900 text-opacity-50 hover:text-jp-gray-900 focus:outline-none",
       paginationLoading: "border-left-1 border-right-1 font-normal border-left-1 bg-jp-gray-200 dark:bg-jp-gray-800 dark:bg-opacity-10",
       paginationDisabled: "border-left-1 border-right-1 font-normal border-left-1 bg-jp-gray-300 dark:bg-jp-gray-950 dark:bg-opacity-50 border dark:border-jp-gray-disabled_border dark:border-opacity-50",
       paginationNoHover: "bg-white border-left-1 border-right-1 font-normal text-jp-gray-900 text-opacity-75 hover:text-jp-gray-900 dark:text-jp-gray-text_darktheme dark:text-opacity-75",
       dropdownDisabled: "bg-gray-200 dark:bg-jp-gray-950 dark:bg-opacity-50 border dark:border-jp-gray-disabled_border dark:border-opacity-50",
-      secondaryNormal: "bg-jp-gray-button_gray text-jp-gray-900 text-opacity-75 hover:bg-jp-gray-secondary_hover hover:text-jp-gray-890  dark:bg-jp-gray-darkgray_background  dark:text-jp-gray-text_darktheme dark:text-opacity-50 focus:outline-none",
-      secondaryLoading: "bg-jp-gray-button_gray  dark:bg-jp-gray-darkgray_background",
-      secondaryNoHover: "bg-jp-gray-button_gray text-jp-gray-900 text-opacity-50  hover:bg-jp-gray-secondary_hover hover:text-jp-gray-890  dark:bg-jp-gray-darkgray_background dark:text-jp-gray-text_darktheme focus:outline-none dark:text-opacity-50 ",
+      secondaryNormal: "bg-button-secondary-bg text-jp-gray-900 text-opacity-75 hover:bg-button-secondary-hoverbg hover:text-jp-gray-890  dark:bg-jp-gray-darkgray_background  dark:text-jp-gray-text_darktheme dark:text-opacity-50 focus:outline-none",
+      secondaryNoBorder: "hover:bg-jp-gray-lightmode_steelgray hover:bg-opacity-40 dark:bg-jp-gray-darkgray_background dark:text-jp-gray-text_darktheme dark:text-opacity-50 dark:hover:bg-jp-gray-950 focus:outline-none",
+      secondaryLoading: "bg-button-secondary-bg  dark:bg-jp-gray-darkgray_background",
+      secondaryNoHover: "bg-button-secondary-bg text-jp-gray-900 text-opacity-50  hover:bg-button-secondary-hoverbg hover:text-jp-gray-890  dark:bg-jp-gray-darkgray_background dark:text-jp-gray-text_darktheme focus:outline-none dark:text-opacity-50 ",
     },
     borderRadius: {
       default: "rounded",
       defaultPagination: "rounded-md",
     },
     textColor: {
       primaryNormal: "text-white",
-      primaryOutline: "text-primary",
+      primaryOutline: "text-button-primary-text",
       primaryDisabled: "text-jp-gray-600 dark:text-jp-gray-text_darktheme dark:text-opacity-25",
+      secondaryNormal: "text-button-secondary-text hover:text-black dark:text-jp-gray-text_darktheme dark:hover:text-jp-gray-text_darktheme dark:hover:text-opacity-75",
+      secondaryNoBorder: "text-jp-gray-900 ",
+      secondaryLoading: "text-button-secondary-text hover:text-black dark:text-jp-gray-text_darktheme dark:text-opacity-75",
+      secondaryDisabled: "text-jp-gray-600 dark:text-jp-gray-text_darktheme dark:text-opacity-25",
     },
   },
   font: {
     textColor: {
-      primaryNormal: "text-primary",
+      primaryNormal: "text-typography",
     },
   },
   shadow: {
@@ -151,14 +166,15 @@ let defaultUIConfig: t = {
   },
   border: {
     borderColor: {
-      primaryNormal: "border border-primary",
-      primaryFocused: "focus:border-primary",
+      primaryNormal: "border border-outline",
+      primaryFocused: "focus:border-outline",
     },
   },
   primaryColor: "primary",
+  secondaryColor: "secondary",
   sidebarColor: {
     backgroundColor: {
-      primaryNormal: "bg-primary-sidebar",
+      sidebarNormal: "bg-sidebar",
     },
   },
 }

src/components/Button.res

@@ -121,15 +121,10 @@ let useGetBgColor = (
     switch buttonState {
     | Focused
     | Normal =>
-      showBorder
-        ? "bg-jp-gray-button_gray text-jp-gray-900 text-opacity-75 hover:bg-jp-gray-secondary_hover hover:text-jp-gray-890  dark:bg-jp-gray-darkgray_background  dark:text-jp-gray-text_darktheme dark:text-opacity-50 focus:outline-none"
-        : "text-jp-gray-900 hover:bg-jp-gray-lightmode_steelgray hover:bg-opacity-40 dark:bg-jp-gray-darkgray_background dark:text-jp-gray-text_darktheme dark:text-opacity-50 dark:hover:bg-jp-gray-950 focus:outline-none"
-    | Loading =>
-      showBorder
-        ? "bg-jp-gray-button_gray  dark:bg-jp-gray-darkgray_background"
-        : "bg-jp-gray-lightmode_steelgray bg-opacity-40 dark:bg-jp-gray-950 dark:bg-opacity-100"
+      showBorder ? buttonConfig.secondaryNormal : buttonConfig.secondaryNoBorder
+    | Loading => showBorder ? buttonConfig.secondaryLoading : buttonConfig.secondaryNoBorder
     | Disabled => showBorder ? "bg-jp-gray-300 dark:bg-gray-800 dark:bg-opacity-10" : "px-4"
-    | NoHover => "bg-jp-gray-button_gray text-jp-gray-900 text-opacity-50  hover:bg-jp-gray-secondary_hover hover:text-jp-gray-890  dark:bg-jp-gray-darkgray_background dark:text-jp-gray-text_darktheme focus:outline-none dark:text-opacity-50 "
+    | NoHover => buttonConfig.secondaryNoHover
     }
   | Pill =>
     switch buttonState {
@@ -218,9 +213,9 @@ let useGetTextColor = (
     }
   | Secondary =>
     switch buttonState {
-    | Disabled => "text-jp-gray-600 dark:text-jp-gray-text_darktheme dark:text-opacity-25"
-    | Loading => "text-jp-gray-950 hover:text-black dark:text-jp-gray-text_darktheme dark:text-opacity-75"
-    | _ => "text-jp-gray-950 hover:text-black dark:text-jp-gray-text_darktheme dark:hover:text-jp-gray-text_darktheme dark:hover:text-opacity-75"
+    | Disabled => textConfig.secondaryDisabled
+    | Loading => textConfig.secondaryLoading
+    | _ => textConfig.secondaryNormal
     }
   | SecondaryFilled =>
     switch buttonState {

src/context/ThemeProvider.res

@@ -6,23 +6,54 @@ type themeType = LightTheme
 
 type x = {theme: string}
 
-type customStyle = {
-  primaryColor: string,
-  primaryHover: string,
-  sidebar: string,
-}
-
 type customUIConfig = {
   globalUIConfig: UIConfig.t,
   theme: theme,
   themeSetter: theme => unit,
   configCustomDomainTheme: JSON.t => unit,
 }
 
-let defaultGlobalConfig: customStyle = {
-  primaryColor: "#006DF9",
-  primaryHover: "#005ED6",
-  sidebar: "#242F48",
+let newDefaultConfig: HyperSwitchConfigTypes.customStylesTheme = {
+  settings: {
+    colors: {
+      primary: "#006DF9",
+      secondary: "#F7F7F7",
+      sidebar: "#242F48",
+      background: "#F7F8FB",
+    },
+    typography: {
+      fontFamily: "Roboto, sans-serif",
+      fontSize: "14px",
+      headingFontSize: "24px",
+      textColor: "#006DF9",
+      linkColor: "#3498db",
+      linkHoverColor: "#005ED6",
+    },
+    buttons: {
+      primary: {
+        backgroundColor: "#006DF9",
+        textColor: "#006df9",
+        hoverBackgroundColor: "#005ED6",
+      },
+      secondary: {
+        backgroundColor: "#F7F7F7",
+        textColor: "#202124",
+        hoverBackgroundColor: "#EEEEEE",
+      },
+    },
+    borders: {
+      defaultRadius: "4px",
+      borderColor: "#006DF9",
+    },
+    spacing: {
+      padding: "16px",
+      margin: "16px",
+    },
+  },
+  urls: {
+    faviconUrl: None,
+    logoUrl: None,
+  },
 }
 
 let themeContext = {
@@ -75,14 +106,84 @@ let make = (~children) => {
   | Dark => "dark"
   | Light => ""
   }
+
   let configCustomDomainTheme = React.useCallback((uiConfg: JSON.t) => {
     open LogicUtils
-    let dict = uiConfg->getDictFromJsonObject->getDictfromDict("theme")
-    let {primaryColor, primaryHover, sidebar} = defaultGlobalConfig
-    let value: HyperSwitchConfigTypes.customStyle = {
-      primaryColor: dict->getString("primary_color", primaryColor),
-      primaryHover: dict->getString("primary_hover_color", primaryHover),
-      sidebar: dict->getString("sidebar_color", sidebar),
+    let dict = uiConfg->getDictFromJsonObject
+    let settings = dict->getDictfromDict("settings")
+    let url = dict->getDictfromDict("urls")
+    let colorsConfig = settings->getDictfromDict("colors")
+    let typography = settings->getDictfromDict("typography")
+    let borders = settings->getDictfromDict("borders")
+    let spacing = settings->getDictfromDict("spacing")
+    let colorsBtnPrimary = settings->getDictfromDict("buttons")->getDictfromDict("primary")
+    let colorsBtnSecondary = settings->getDictfromDict("buttons")->getDictfromDict("secondary")
+    let {settings: defaultSettings, _} = newDefaultConfig
+    let value: HyperSwitchConfigTypes.customStylesTheme = {
+      settings: {
+        colors: {
+          primary: colorsConfig->getString("primary", defaultSettings.colors.primary),
+          secondary: colorsConfig->getString("secondary", defaultSettings.colors.secondary),
+          sidebar: colorsConfig->getString("sidebar", defaultSettings.colors.sidebar),
+          background: colorsConfig->getString("background", defaultSettings.colors.background),
+        },
+        typography: {
+          fontFamily: typography->getString("fontFamily", defaultSettings.typography.fontFamily),
+          fontSize: typography->getString("fontSize", defaultSettings.typography.fontSize),
+          headingFontSize: typography->getString(
+            "headingFontSize",
+            defaultSettings.typography.headingFontSize,
+          ),
+          textColor: typography->getString("textColor", defaultSettings.typography.textColor),
+          linkColor: typography->getString("linkColor", defaultSettings.typography.linkColor),
+          linkHoverColor: typography->getString(
+            "linkHoverColor",
+            defaultSettings.typography.linkHoverColor,
+          ),
+        },
+        buttons: {
+          primary: {
+            backgroundColor: colorsBtnPrimary->getString(
+              "backgroundColor",
+              defaultSettings.buttons.primary.backgroundColor,
+            ),
+            textColor: colorsBtnPrimary->getString(
+              "textColor",
+              defaultSettings.buttons.primary.textColor,
+            ),
+            hoverBackgroundColor: colorsBtnPrimary->getString(
+              "hoverBackgroundColor",
+              defaultSettings.buttons.primary.hoverBackgroundColor,
+            ),
+          },
+          secondary: {
+            backgroundColor: colorsBtnSecondary->getString(
+              "backgroundColor",
+              defaultSettings.buttons.secondary.backgroundColor,
+            ),
+            textColor: colorsBtnSecondary->getString(
+              "textColor",
+              defaultSettings.buttons.secondary.textColor,
+            ),
+            hoverBackgroundColor: colorsBtnSecondary->getString(
+              "hoverBackgroundColor",
+              defaultSettings.buttons.secondary.hoverBackgroundColor,
+            ),
+          },
+        },
+        borders: {
+          defaultRadius: borders->getString("defaultRadius", defaultSettings.borders.defaultRadius),
+          borderColor: borders->getString("borderColor", defaultSettings.borders.borderColor),
+        },
+        spacing: {
+          padding: spacing->getString("padding", defaultSettings.spacing.padding),
+          margin: spacing->getString("margin", defaultSettings.spacing.margin),
+        },
+      },
+      urls: {
+        faviconUrl: url->getOptionString("faviconUrl"),
+        logoUrl: url->getOptionString("logoUrl"),
+      },
     }
     Window.appendStyle(value)
   }, [])