@metrifox/react-sdk 0.0.13 → 0.0.15

package/README.md

@@ -115,12 +115,7 @@ Displays subscription plans and one-time purchases in a configurable pricing tab
 import { PricingTable } from "@metrifox/react-sdk"
 
 export default function PricingPage() {
-  return( 
-    <PricingTable 
-      checkoutUsername="your-checkout-username" 
-      productKey="your-product-key" 
-    />
-  )
+  return <PricingTable checkoutUsername="your-checkout-username" productKey="your-product-key" />
 }
 ```
 
@@ -151,10 +146,79 @@ import "@metrifox/react-sdk/dist/styles.css"
 > This is required for proper styling of all widgets.
 
 #### Pricing Table
-The SDK accepts an optional `pricingTableTheme` object during initialization. This theme is applied to Pricing Table component and UI elements within it to match your brand styles.
+
+The SDK accepts an optional `theme` object during initialization. This theme is applied to Widgets and UI elements within them to match your brand styles.
 
 Any values not provided will fall back to the default theme.
 
+```ts
+theme?: {
+  customerPortal?: CustomerPortalTheme
+  pricingTable?: PricingTableTheme
+}
+```
+
+```ts
+customerPortalTheme?: {
+  tabs?: {
+    background?: string
+    borderColor?: string
+    activeBackground?: string
+    activeTextColor?: string
+    inactiveTextColor?: string
+  }
+
+  section?: {
+    background?: string
+    titleTextColor?: string
+    contentBackground?: string
+    iconBackground?: string
+    iconColor?: string
+    emptyTextColor?: string
+  }
+
+  card?: {
+    titleBackground?: string
+    contentBackground?: string
+    titleColor?: string
+    details?: {
+      labelColor?: string
+      valueColor?: string
+    }
+  }
+
+  subscription?: {
+    items?: {
+      background?: string
+      borderColor?: string
+      textColor?: string
+    }
+  }
+
+  table?: {
+    headerTextColor?: string
+    textcolor?: string
+  }
+
+  button?: {
+    background?: string
+    textColor?: string
+  }
+
+  filter?: {
+    border?: string
+    activeBackground?: string
+    inactiveBackground?: string
+    activeTextColor?: string
+    inactiveTextColor?: string
+    countBackground?: string
+    countTextColor?: string
+  }
+
+  linkColor?: string
+}
+```
+
 ```ts
 // Pricing table theme configuration
 pricingTableTheme?: {
@@ -232,7 +296,9 @@ pricingTableTheme?: {
   }
 }
 ```
+
 ###### Example usage
+
 ```tsx
 import { metrifoxInit } from "@metrifox/react-sdk"
 
@@ -254,11 +320,36 @@ const pricingTableTheme = {
   },
 }
 
+const customerPortalTheme = {
+  tabs: {
+    background: "#111827",
+    borderColor: "#243044",
+  },
+
+  section: {
+    background: "#020617",
+  },
+
+  card: {
+    titleColor: "#F9FAFB",
+    details: {
+      labelColor: "#CBD5E1",
+      valueColor: "#FFFFFF",
+    },
+  },
+}
+
+const theme = {
+  customerPortal: customerPortalTheme,
+  pricingTableTheme: pricingTableTheme,
+}
+
 metrifoxInit({
   clientKey: "your-client-key",
-  pricingTableTheme,
+  theme,
 })
 ```
+
 ---
 
 ## Local Development