Add demo form, add theme customization

package/.storybook/decorators/css-variables.jsx

@@ -1,4 +1,4 @@
-import styles from "../../src/themes/default.css?inline";
+import styles from "../../src/themes/dynamic.css?inline";
 
 const styleSheet = new CSSStyleSheet();
 styleSheet.replaceSync(styles);

package/.storybook/preview.cjs

@@ -1,4 +1,4 @@
-import "../src/themes/default.css";
+import "../src/themes/dynamic.css";
 
 import { withCssVariables } from "./decorators/css-variables"
 

package/README.md

@@ -77,7 +77,7 @@ The `src` directory contains the package's source:
 
 **CSS**
 
-The forms' CSS is in `themes/default.css`. This uses CSS variables to allow full customization of forms' appearance. Variables are all prefixed `--userfront` to separate them from variables in client code.
+The forms' CSS is in `themes/dynamic.css`. This uses CSS variables to allow full customization of forms' appearance. Variables are all prefixed `--userfront` to separate them from variables in client code. The `dynamic` theme uses CSS's color modification capabilities (`color-mix` mostly) to derive a full color scheme (with active/hover states etc) from 1-3 main colors: "dark" (primary), "light" (secondary), and "accent".
 
 **Storybook**
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@userfront/toolkit",
-  "version": "1.0.6",
+  "version": "1.1.0-alpha.0",
   "description": "Bindings and components for authentication with Userfront with React, Vue, other frameworks, and plain JS + HTML",
   "type": "module",
   "directories": {
@@ -47,7 +47,7 @@
       "import": "./dist/web-component.es.js",
       "require": "./dist/web-component.umd.js"
     },
-    "./themes/default.css": "./dist/style.css"
+    "./themes/dynamic.css": "./dist/style.css"
   },
   "files": [
     "dist"

package/src/components/Input/BaseInput.jsx

@@ -8,24 +8,41 @@
  * @property {string} errorMessage The error message to display
  * @returns
  */
+import { FaEye, FaEyeSlash } from "react-icons/fa";
+import { useState } from "react";
+
 export default function BaseInput({
   label,
   showError = false,
   errorMessage = "Required field",
+  isPassword = false,
   ...props
 } = {}) {
+  const [hideContents, setHideContents] = useState(isPassword);
+
   return (
-    <>
+    <div className="userfront-password-input-container">
       {label && <label htmlFor={props.name}>{label}</label>}
-      <input
-        className={`userfront-input ${
-          showError ? "userfront-input-error" : ""
-        }`}
-        {...props}
-      />
+      <div className="userfront-input-container">
+        <input
+          type={hideContents ? "password" : "text"}
+          className={`userfront-input ${
+            showError ? "userfront-input-error" : ""
+          }`}
+          {...props}
+        />
+        {isPassword && (
+          <div
+            className="userfront-password-toggle"
+            onClick={() => setHideContents(!hideContents)}
+          >
+            {hideContents ? <FaEye size="15px" /> : <FaEyeSlash size="15px" />}
+          </div>
+        )}
+      </div>
       {showError && (
         <div className="userfront-input-error-message">{errorMessage}</div>
       )}
-    </>
+    </div>
   );
 }

package/src/components/Input/PasswordInput.jsx

@@ -1,5 +1,3 @@
-import { useState } from "react";
-import { FaEye, FaEyeSlash } from "react-icons/fa";
 import BaseInput from "./BaseInput";
 
 /**
@@ -9,36 +7,20 @@ import BaseInput from "./BaseInput";
  * @returns
  */
 export default function PasswordInput({
-  label = "Password",
+  label = "Choose a password",
   showError,
   errorMessage = "Please enter your password",
   ...props
 }) {
-  const [showPassword, setShowPassword] = useState(false);
-
-  function togglePasswordVisibility() {
-    setShowPassword(!showPassword);
-  }
-
   return (
-    <>
-      <label htmlFor="password">{label}</label>
-      <span className="userfront-password-input-container">
-        <BaseInput
-          type={showPassword ? "text" : "password"}
-          name="password"
-          aria-describedby="userfront-password-rules"
-          showError={showError}
-          errorMessage={errorMessage}
-          {...props}
-        />
-        <div
-          className="userfront-password-toggle"
-          onClick={togglePasswordVisibility}
-        >
-          {showPassword ? <FaEyeSlash size="15px" /> : <FaEye size="15px" />}
-        </div>
-      </span>
-    </>
+    <BaseInput
+      isPassword
+      name="password"
+      aria-describedby="userfront-password-rules"
+      showError={showError}
+      errorMessage={errorMessage}
+      label={label}
+      {...props}
+    />
   );
 }

package/src/components/LogoutButton.jsx

@@ -5,14 +5,40 @@ import { callUserfront } from "../services/userfront";
  *
  * @param {object} props
  * @param {boolean=} props.disabled - is the button disabled?
+ * @param {object=} props.theme - theme information: color scheme, font, sizing, options
+ * @param {string=} props.theme.colors.light - light color to use when deriving color scheme
+ * @param {string=} props.theme.colors.dark - dark color to use when deriving color scheme
+ * @param {object=} props.theme.colors - theme colors
+ * @param {string=} props.theme.colors.accent - accent color to use when deriving color scheme (optional)
+ * @param {string=} props.theme.colors.lightBackground - background color for light mode (optional)
+ * @param {string=} props.theme.colors.darkBackground - background color for dark mode (optional)
+ * @param {string=} props.theme.fontFamily - CSS font family to use for the form
+ * @param {object=} props.theme.extras - additional options to modify the form's appearance
+ * @param {boolean=} props.theme.extras.rounded - make form elements appear more rounded generally
+ * @param {boolean=} props.theme.extras.squared - make form elements appear more squared-off generally
+ * @param {boolean=} props.theme.extras.gradientButtons - add an interactive gradient to buttons
+ * @param {boolean=} props.theme.extras.hideSecuredMessage - hide the "secured by Userfront" message
+ * @param {boolean=} props.theme.extras.dottedOutline - use a dotted outline with some padding around active elements,
+ *   rather than a solid outline that is flush with the outside of the element
+ * @param {boolean=} props.theme.extras.raisedButtons - use old-school 3D-looking buttons
  * @param {(string|boolean)=} props.redirect - URL to redirect to. If false, disables redirect.
  *  If absent, redirect based on the tenant's after-logout path.
  * @param {array=} props.children - children to display in the button. Shows "Log out" if children are absent.
  * @returns
  */
-const LogoutButton = ({ redirect, disabled = false, children }) => {
+const LogoutButton = ({
+  redirect,
+  disabled = false,
+  demo = false,
+  theme = {},
+  children,
+  style = {},
+}) => {
   const _children = children || "Log out";
   const handleClick = async () => {
+    if (demo) {
+      return;
+    }
     try {
       const arg = {};
       if (redirect != null) {
@@ -29,10 +55,84 @@ const LogoutButton = ({ redirect, disabled = false, children }) => {
       );
     }
   };
+
+  // Build the theme
+
+  // Define CSS variables
+  const themeColors = theme?.colors || {};
+  const themeStyle = {
+    "--userfront-light-color": themeColors.light || "#ffffff",
+    "--userfront-dark-color": themeColors.dark || "#5e72e4",
+    "--userfront-accent-color": themeColors.accent || "#13a0ff",
+  };
+  if (themeColors.lightBackground) {
+    themeStyle["--userfront-light-background-color"] =
+      themeColors.lightBackground;
+  }
+  if (themeColors.darkBackground) {
+    themeStyle["--userfront-dark-background-color"] =
+      themeColors.darkBackground;
+  }
+  if (theme?.fontFamily) {
+    themeStyle["--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") {
+    colorSchemeClass = "userfront-dark-scheme";
+  }
+  if (theme?.colorScheme === "auto") {
+    colorSchemeClass = "userfront-auto-scheme";
+  }
+
+  // CSS variables for sizing
+  if (theme?.size === "compact") {
+    themeStyle["--userfront-em-size"] = "14px";
+    themeStyle["--userfront-spacing"] = "0.5em";
+  }
+  if (theme?.size === "mini") {
+    themeStyle["--userfront-em-size"] = "12px";
+    themeStyle["--userfront-spacing"] = "0.5em";
+    themeStyle["--userfront-container-width"] = "250px";
+  }
+  if (theme?.size === "spaced") {
+    themeStyle["--userfront-em-size"] = "14px";
+    themeStyle["--userfront-spacing"] = "20px";
+  }
+  if (theme?.size === "large") {
+    themeStyle["--userfront-em-size"] = "20px";
+    themeStyle["--userfront-spacing"] = "18px";
+  }
+
+  // Attach classes for theme customizations
+  // TODO: syntax and terminology is flexible here
+  const extrasClassMap = {
+    gradientButtons: "userfront-gradient-buttons",
+    hideSecuredMessage: "userfront-hide-branding",
+    raisedButtons: "userfront-raised-buttons",
+    dottedOutlines: "userfront-dotted-outlines",
+  };
+  const extras = theme?.extras || {};
+  let customizationClasses = "";
+  Object.entries(extras)
+    .filter(([key, val]) => Boolean(val))
+    .forEach(([key]) => {
+      if (key in extrasClassMap) {
+        customizationClasses += ` ${extrasClassMap[key]}`;
+      } else {
+        customizationClasses += ` userfront-${key}`;
+      }
+    });
+  customizationClasses = customizationClasses.trim();
+
   return (
     <button
       onClick={handleClick}
-      className="userfront-toolkit userfront-element userfront-button userfront-button-logout"
+      style={{ ...themeStyle, ...style }}
+      className={`userfront-toolkit userfront-element userfront-button userfront-button-logout ${customizationClasses}`}
       aria-disabled={disabled}
       disabled={disabled}
     >

package/src/forms/UniversalForm.jsx

@@ -564,7 +564,13 @@ const componentForStep = (state) => {
   }
 };
 
-const UniversalForm = ({ state, onEvent }) => {
+const UniversalForm = ({
+  theme = {},
+  state,
+  isDemo = false,
+  demoState = "live",
+  onEvent,
+}) => {
   // Apply CSS classes based on the size of the form's container
   const [containerRef, setContainerRef] = useState();
   const sizeClass = useSizeClass(containerRef);
@@ -581,15 +587,88 @@ const UniversalForm = ({ state, onEvent }) => {
     type: state.context.config.type,
   };
 
+  // Build the theme
+
+  // Define CSS variables
+  const themeColors = theme.colors || {};
+  const style = {
+    "--userfront-light-color": themeColors.light || "#ffffff",
+    "--userfront-dark-color": themeColors.dark || "#5e72e4",
+    "--userfront-accent-color": themeColors.accent || "#13a0ff",
+  };
+  if (themeColors.lightBackground) {
+    style["--userfront-light-background-color"] = themeColors.lightBackground;
+  }
+  if (themeColors.darkBackground) {
+    style["--userfront-dark-background-color"] = themeColors.darkBackground;
+  }
+  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") {
+    colorSchemeClass = "userfront-dark-scheme";
+  }
+  if (theme.colorScheme === "auto") {
+    colorSchemeClass = "userfront-auto-scheme";
+  }
+
+  // CSS variables for sizing
+  if (theme.size === "compact") {
+    style["--userfront-em-size"] = "14px";
+    style["--userfront-spacing"] = "0.5em";
+  }
+  if (theme.size === "mini") {
+    style["--userfront-em-size"] = "12px";
+    style["--userfront-spacing"] = "0.5em";
+    style["--userfront-container-width"] = "250px";
+  }
+  if (theme.size === "spaced") {
+    style["--userfront-em-size"] = "14px";
+    style["--userfront-spacing"] = "20px";
+  }
+  if (theme.size === "large") {
+    style["--userfront-em-size"] = "20px";
+    style["--userfront-spacing"] = "18px";
+  }
+
+  // Attach classes for theme customizations
+  // TODO: syntax and terminology is flexible here
+  const extrasClassMap = {
+    gradientButtons: "userfront-gradient-buttons",
+    hideSecuredMessage: "userfront-hide-branding",
+    raisedButtons: "userfront-raised-buttons",
+    dottedOutlines: "userfront-dotted-outlines",
+  };
+  const extras = theme.extras || {};
+  let customizationClasses = "";
+  Object.entries(extras)
+    .filter(([key, val]) => Boolean(val))
+    .forEach(([key]) => {
+      if (key in extrasClassMap) {
+        customizationClasses += ` ${extrasClassMap[key]}`;
+      } else {
+        customizationClasses += ` userfront-${key}`;
+      }
+    });
+  customizationClasses = customizationClasses.trim();
+
   return (
     <div
       ref={setContainerRef}
-      className={`userfront-toolkit userfront-container ${sizeClass}`}
+      className={`userfront-toolkit userfront-container ${sizeClass} ${colorSchemeClass} ${customizationClasses}`}
+      style={style}
     >
       <h2>{title}</h2>
       <Component onEvent={onEvent} {...defaultProps} {...props} />
       <div>
-        <SecuredByUserfront mode={state.context.config?.mode} />
+        <SecuredByUserfront
+          mode={isDemo ? demoState : state.context.config?.mode}
+        />
       </div>
     </div>
   );

package/src/index-cjs.js

@@ -12,16 +12,18 @@ import SignupForm from "./packaged-forms/SignupForm";
 import LoginForm from "./packaged-forms/LoginForm";
 import PasswordResetForm from "./packaged-forms/PasswordResetForm";
 import LogoutButton from "./components/LogoutButton";
+import DemoForm from "./packaged-forms/DemoForm";
 
 UserfrontCore.SignupForm = SignupForm;
 UserfrontCore.LoginForm = LoginForm;
 UserfrontCore.PasswordResetForm = PasswordResetForm;
 UserfrontCore.LogoutButton = LogoutButton;
+UserfrontCore.DemoForm = DemoForm;
 
 /*
  * CSS styles for the forms
  */
-import "./themes/default.css";
+import "./themes/dynamic.css";
 
 // TODO #9: add link to upgrade guide
 UserfrontCore.build = (toolId) => {