From 1d41280ac75d4397505df12605cabab3306053d9 Mon Sep 17 00:00:00 2001 From: Ryan Felix Date: Tue, 6 Feb 2024 17:12:49 -0500 Subject: [PATCH 1/2] Get theme working with web components, null check more rigorously to avoid errors --- package/src/forms/UniversalForm.jsx | 30 ++++++++++++++--------------- package/src/web-component.js | 4 ++++ 2 files changed, 19 insertions(+), 15 deletions(-) diff --git a/package/src/forms/UniversalForm.jsx b/package/src/forms/UniversalForm.jsx index 2fabd6b..3b379b0 100644 --- 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,19 +590,19 @@ 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; } @@ -610,28 +610,28 @@ const UniversalForm = ({ // 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 index f63c32a..7142a13 100644 --- 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", }, }) ); From d411dffdf513974b003c024172417c3cbeb253a0 Mon Sep 17 00:00:00 2001 From: Userfront Robot <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 6 Feb 2024 22:35:48 +0000 Subject: [PATCH 2/2] Update to v1.1.0-alpha.1 --- package-lock.json | 2 +- package/package-lock.json | 4 ++-- package/package.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index d0b7e27..05cb2bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18707,7 +18707,7 @@ }, "package": { "name": "@userfront/toolkit", - "version": "1.1.0-alpha.0", + "version": "1.1.0-alpha.1", "license": "MIT", "dependencies": { "@r2wc/react-to-web-component": "^2.0.2", diff --git a/package/package-lock.json b/package/package-lock.json index ea376e6..4eb87ae 100644 --- a/package/package-lock.json +++ b/package/package-lock.json @@ -1,12 +1,12 @@ { "name": "@userfront/react", - "version": "1.0.6", + "version": "1.1.0-alpha.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@userfront/react", - "version": "1.0.6", + "version": "1.1.0-alpha.1", "license": "MIT", "dependencies": { "@r2wc/react-to-web-component": "^2.0.2", diff --git a/package/package.json b/package/package.json index 9f8a52f..b387a58 100644 --- a/package/package.json +++ b/package/package.json @@ -1,6 +1,6 @@ { "name": "@userfront/toolkit", - "version": "1.1.0-alpha.0", + "version": "1.1.0-alpha.1", "description": "Bindings and components for authentication with Userfront with React, Vue, other frameworks, and plain JS + HTML", "type": "module", "directories": {