@metrifox/react-sdk 0.0.20-beta.2 → 0.0.20-beta.4

package/README.md

@@ -159,123 +159,124 @@ theme?: {
 ```
 
 ```ts
-// Customer portal theme configuration
-customerPortalTheme?: {
+// Customer portal theme (CustomerPortalTheme). All properties are optional.
+customerPortal?: {
+  general?: {
+    linkColor?: string
+    backgroundColor?: string
+    borderRadius?: string
+    fontFamily?: string
+    containerPadding?: string
+  }
+
   tabs?: {
-    background?: string
-    borderColor?: string
-    activeBackground?: string
-    activeTextColor?: string
-    inactiveTextColor?: string
+    tabBackground?: string
+    tabBorderColor?: string
+    activeTabBackground?: string
+    activeTabTextColor?: string
+    inactiveTabTextColor?: string
   }
 
-  section?: {
+  sections?: {
     background?: string
-    titleTextColor?: string
-    contentBackground?: string
-    iconBackground?: string
-    iconColor?: string
+    padding?: string
+    borderColor?: string
+    borderRadius?: string
     emptyTextColor?: string
+    usage?: { barColor?: string; trackColor?: string }
+    content?: { background?: string; padding?: string; borderColor?: string; borderRadius?: string }
+    summary?: { background?: string; padding?: string; borderColor?: string; borderRadius?: string }
+    header?: { fontSize?: string; fontWeight?: string; color?: string }
+    label?: { fontSize?: string; fontWeight?: string; color?: string }
+    value?: { fontSize?: string; fontWeight?: string; color?: string }
   }
 
-  card?: {
-    titleBackground?: string
-    contentBackground?: string
-    titleColor?: string
-    details?: {
-      labelColor?: string
-      valueColor?: string
+  buttons?: {
+    primary?: {
+      backgroundColor?: string
+      border?: { color?: string; width?: string; radius?: string }
+      typography?: { fontSize?: string; fontWeight?: string; color?: string }
+    }
+    secondary?: {
+      backgroundColor?: string
+      border?: { color?: string; width?: string; radius?: string }
+      typography?: { fontSize?: string; fontWeight?: string; color?: string }
     }
   }
 
-  subscription?: {
-    items?: {
+  lineItems?: {
+    parentRow?: {
       background?: string
       borderColor?: string
-      textColor?: string
+      typography?: { label?: { color?: string }; quantity?: { color?: string } }
+    }
+    childRow?: {
+      background?: string
+      borderColor?: string
+      typography?: { label?: { color?: string }; quantity?: { color?: string } }
     }
   }
 
-  table?: {
+  tables?: {
+    headerBackground?: string
     headerTextColor?: string
-    textColor?: string
+    rowBackgroundOdd?: string
+    rowBackgroundEven?: string
+    rowTextColor?: string
+    borderColor?: string
+    cellPadding?: string
+    expandIconColor?: string
+    typography?: {
+      fontSize?: string
+      fontWeight?: string
+      headerFontSize?: string
+      headerFontWeight?: string
+    }
   }
 
-  button?: {
+  modals?: {
+    overlayColor?: string
     background?: string
-    textColor?: string
-  }
-
-  filter?: {
-    border?: string
-    activeBackground?: string
-    inactiveBackground?: string
-    activeTextColor?: string
-    inactiveTextColor?: string
-    countBackground?: string
-    countTextColor?: string
+    borderColor?: string
+    borderRadius?: string
+    closeButtonColor?: string
+    header?: { fontSize?: string; fontWeight?: string; color?: string }
+    title?: { fontSize?: string; fontWeight?: string; color?: string }
+    description?: { fontSize?: string; fontWeight?: string; color?: string }
+    footer?: {
+      primary?: { backgroundColor?: string; textColor?: string }
+      secondary?: { backgroundColor?: string; textColor?: string; borderColor?: string; borderWidth?: string }
+    }
   }
 
-  linkColor?: string
-
-  plan?: {
-    card?: {
+  plans?: {
+    currentPlanCard?: {
+      header?: { background?: string; textColor?: string }
+      gradientColor?: string
+    }
+    planCards?: {
       background?: string
       borderColor?: string
       descriptionColor?: string
-
-      header?: {
-        background?: string
-        textColor?: string
-      }
-
-      description?: {
-        textColor?: string
-        textButtonColor?: string
-      }
-
+      header?: { background?: string; textColor?: string }
+      description?: { textColor?: string; textButtonColor?: string }
       price?: {
         amountColor?: string
         primaryTextColor?: string
         secondaryTextColor?: string
-        textButtonColor?: string
         background?: string
         borderColor?: string
       }
     }
-
-    button?: {
-      background?: string
-      textColor?: string
-      secondaryBackground?: string
-      secondaryTextColor?: string
-      textButtonColor?: string
-    }
-
-    featureList?: {
-      textColor?: string
-      iconColor?: string
-    }
-
-    intervalToggle?: {
+    planFeatures?: { textColor?: string; iconColor?: string }
+    planButton?: { background?: string; textColor?: string }
+    planToggle?: {
       background?: string
       activeBackground?: string
       activeText?: string
       inactiveText?: string
     }
-
-    currentSubscriptionCard?: {
-      header?: {
-        background?: string
-        textColor?: string
-      }
-      gradientColor?: string
-    }
-
-    freeTrialTag?: {
-      background?: string
-      textColor?: string
-    }
+    planTags?: { freeTrialBackground?: string; freeTrialText?: string }
   }
 }
 ```