Merge pull request #102 from userfront/theme-with-web-components

Get theme working with web components
userfront · Feb 6, 2024 · 3947132 · 3947132
2 parents bc8dfd5 + d411dff
commit 3947132
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 15 deletions.
diff --git a/package/src/forms/UniversalForm.jsx b/package/src/forms/UniversalForm.jsx
@@ -565,7 +565,7 @@ const componentForStep = (state) => {
 };
 
 const UniversalForm = ({
-  theme = {},
+  theme,
   state,
   isDemo = false,
   demoState = "live",
@@ -590,48 +590,48 @@ const UniversalForm = ({
   // Build the theme
 
   // Define CSS variables
-  const themeColors = theme.colors || {};
+  const themeColors = theme?.colors;
   const style = {
-    "--userfront-light-color": themeColors.light || "#ffffff",
-    "--userfront-dark-color": themeColors.dark || "#5e72e4",
-    "--userfront-accent-color": themeColors.accent || "#13a0ff",
+    "--userfront-light-color": themeColors?.light || "#ffffff",
+    "--userfront-dark-color": themeColors?.dark || "#5e72e4",
+    "--userfront-accent-color": themeColors?.accent || "#13a0ff",
   };
-  if (themeColors.lightBackground) {
+  if (themeColors?.lightBackground) {
     style["--userfront-light-background-color"] = themeColors.lightBackground;
   }
-  if (themeColors.darkBackground) {
+  if (themeColors?.darkBackground) {
     style["--userfront-dark-background-color"] = themeColors.darkBackground;
   }
-  if (theme.fontFamily) {
+  if (theme?.fontFamily) {
     style["--userfront-font-family"] = theme.fontFamily;
   }
 
   // Classes for color schemes
   // For now, "light scheme only" is default, to match existing behavior.
   // In a future iteration "auto scheme" should be made default
   let colorSchemeClass = "userfront-light-scheme";
-  if (theme.colorScheme === "dark") {
+  if (theme?.colorScheme === "dark") {
     colorSchemeClass = "userfront-dark-scheme";
   }
-  if (theme.colorScheme === "auto") {
+  if (theme?.colorScheme === "auto") {
     colorSchemeClass = "userfront-auto-scheme";
   }
 
   // CSS variables for sizing
-  if (theme.size === "compact") {
+  if (theme?.size === "compact") {
     style["--userfront-em-size"] = "14px";
     style["--userfront-spacing"] = "0.5em";
   }
-  if (theme.size === "mini") {
+  if (theme?.size === "mini") {
     style["--userfront-em-size"] = "12px";
     style["--userfront-spacing"] = "0.5em";
     style["--userfront-container-width"] = "250px";
   }
-  if (theme.size === "spaced") {
+  if (theme?.size === "spaced") {
     style["--userfront-em-size"] = "14px";
     style["--userfront-spacing"] = "20px";
   }
-  if (theme.size === "large") {
+  if (theme?.size === "large") {
     style["--userfront-em-size"] = "20px";
     style["--userfront-spacing"] = "18px";
   }
@@ -644,7 +644,7 @@ const UniversalForm = ({
     raisedButtons: "userfront-raised-buttons",
     dottedOutlines: "userfront-dotted-outlines",
   };
-  const extras = theme.extras || {};
+  const extras = theme?.extras || {};
   let customizationClasses = "";
   Object.entries(extras)
     .filter(([key, val]) => Boolean(val))

diff --git a/package/src/web-component.js b/package/src/web-component.js
@@ -23,6 +23,7 @@ if (typeof window === "object" && window.customElements) {
       props: {
         tenantId: "string",
         flow: "json",
+        theme: "json",
         compact: "boolean",
         redirect: "string",
         redirectOnLoadIfLoggedIn: "boolean",
@@ -37,6 +38,7 @@ if (typeof window === "object" && window.customElements) {
       props: {
         tenantId: "string",
         flow: "json",
+        theme: "json",
         compact: "boolean",
         redirect: "string",
         redirectOnLoadIfLoggedIn: "boolean",
@@ -51,6 +53,7 @@ if (typeof window === "object" && window.customElements) {
       props: {
         tenantId: "string",
         flow: "json",
+        theme: "json",
         compact: "boolean",
         redirect: "string",
         redirectOnLoadIfLoggedIn: "boolean",
@@ -65,6 +68,7 @@ if (typeof window === "object" && window.customElements) {
       props: {
         disabled: "boolean",
         redirect: "string",
+        theme: "json",
       },
     })
   );