@usefillo/core 0.24.1 → 0.25.0

package/dist/index.d.ts

@@ -401,16 +401,31 @@ interface FormSchema {
     pages: FormPage[];
     settings: FormSettings;
 }
-interface FormTheme {
-    /** Omit to inherit the host page. Use "auto" to follow the visitor's system directly. */
-    colorScheme?: "light" | "dark" | "auto";
+/** The colors (and logo) of one appearance. */
+interface FormThemePalette {
     /** Accent for buttons, focus rings, selection. */
     primary?: string;
     background?: string;
     text?: string;
+    /**
+     * Logo shown above the form on Fillo-hosted pages: the id of an image
+     * uploaded to the workspace. Embedded forms leave branding to the host app.
+     */
+    logo?: string;
+}
+interface FormTheme extends FormThemePalette {
+    /** Omit to inherit the host page. Use "auto" to follow the visitor's system directly. */
+    colorScheme?: "light" | "dark" | "auto";
     /** Border radius scale, e.g. "8px". */
     radius?: string;
     fontFamily?: string;
+    /**
+     * Dark-mode colors, for a form that follows a light/dark setting
+     * (`colorScheme` omitted or "auto"). The top-level colors are then the
+     * light palette. An unset dark color uses the default dark token; an unset
+     * dark logo reuses the top-level logo. Ignored when `colorScheme` is fixed.
+     */
+    dark?: FormThemePalette;
 }
 /** Branding the server tells the SDK to render. Server-owned so the wording /
  *  link can change centrally without a new SDK release. */
@@ -1980,6 +1995,8 @@ declare const FILLO_THEME_VARS: readonly [{
     readonly var: "--fillo-muted";
 }, {
     readonly var: "--fillo-border";
+}, {
+    readonly var: "--fillo-control-border";
 }, {
     readonly var: "--fillo-control-bg";
 }, {
@@ -2006,6 +2023,30 @@ declare const FILLO_THEME_VARS: readonly [{
  * `[data-fillo-color-scheme="dark"]` CSS, so no new CSS is needed.
  */
 declare function resolveThemeAppearance(theme: FormTheme | null): FormTheme | null;
+/**
+ * True when the theme switches palettes with the light/dark setting: it has
+ * dark colors and its scheme is not fixed (omitted or "auto"). A dark logo
+ * alone switches nothing.
+ */
+declare function themeHasDarkPalette(theme: FormTheme | null | undefined): boolean;
+interface ThemeDomAttributes {
+    /** Inline custom properties for the form root (`--fillo-primary`, …). */
+    vars: Record<string, string>;
+    /** `data-fillo-*` attributes for the form root. */
+    attrs: Record<string, string>;
+}
+/**
+ * Turn an untrusted theme into the form root's inline custom properties and
+ * data attributes — one implementation for every renderer.
+ *
+ * A theme with a dark palette (see themeHasDarkPalette) emits each color as
+ * `light-dark(light, dark)`, so it follows the form's own color-scheme: the
+ * host page's when `colorScheme` is omitted, the visitor's device on "auto".
+ * `data-fillo-on-primary` (and `-dark`) name the text tone that reads on a
+ * custom accent; the stylesheet maps them to `--fillo-primary-contrast`, which
+ * stays overridable from consumer CSS.
+ */
+declare function resolveThemeDom(theme: FormTheme | null | undefined): ThemeDomAttributes | null;
 
 /** Result of syncing a code-defined form: its canonical id, slug, and branding. */
 interface SyncedForm {
@@ -2252,4 +2293,4 @@ declare class Sha1 {
 }
 declare const sha1Base64: (bytes: Uint8Array) => string;
 
-export { type AutoSubmitContext, BLOCK_KIND_META, type BaseField, type Block, type BlockKind, CONTENT_KINDS, type CalcExpr, type CalculatedField, type ChallengeConfig, type ChallengeTheme, type CheckboxField, type ChoiceField, type CodeForm, type Condition, type ConditionOp, type ContentBlock, type ContentKind, type CreatedDraft, type CustomField, DEFAULT_FIELD_STRINGS, DEFAULT_RESPONDENT_ERROR_STRINGS, DEFAULT_STRINGS, DRAFT_KINDS, type DateField, type DividerBlock, FILLO_CALC_MIN_SDK_VERSION, FILLO_CHALLENGE_MIN_SDK_VERSION, FILLO_DATA_ATTRS, FILLO_GROUP_MIN_SDK_VERSION, FILLO_MIN_SDK_VERSION, FILLO_SCHEMA_VERSION, FILLO_SDK_VERSION, FILLO_SLOTS, FILLO_THEME_VARS, type Field, type FieldKind, type FieldSpec, type FieldValue, type FileUploadField, type FileValue, type FilloAppearance, FilloClient, type FilloClientOptions, FilloError, type FilloFieldStrings, FilloJsxError, type FilloRendererStrings, type FilloRespondent, type FilloSlot, type FilloStrings, type FormBranding, type FormController, type FormControllerOptions, type FormControllerState, type FormDraftSpec, type FormPage, type FormSchema, type FormSettings, type FormStatus, type FormTheme, type GroupInstanceValue, type HeadingBlock, type HiddenField, JSX_BLOCK_COMPONENTS, JSX_BLOCK_SPECS, type JsonValue, type JsxFormMeta, type JumpRule, type LinearScaleField, MAX_FILES_PER_FIELD, type MatrixField, type NextPage, type NumberField, PHONE_COUNTRIES, PHONE_PICKER_COUNTRIES, PHONE_POPOVER_VIEWPORT_GAP, type ParagraphBlock, type ParsePhoneOptions, type ParsedPhone, type PhoneCountry, type PhoneField, type PhonePopoverPlacement, type ProvisionWorkspaceResult, type PublishedForm, REQUIRED_FIELD_MESSAGE, type RankingField, type RatingField, type RepeatingGroupField, type RespondentErrorOverrides, type RespondentErrorStrings, type ResponseData, type ResponseDraft, type ResponseLimit, type SchemaValidationResult, type SelectOption, Sha1, type SignatureField, type SlotClass, type SlotState, type SubmitMeta, type SubmitResult, type SyncFormResult, type SyncedForm, type TextField, type TrustPolicy, type UploadFileOptions, type UploadProgress, type UploadSession, type UploadStatus, type UploadTransport, type ValidationResult, type WhenBuilder, allFields, assembleForm, codeFormFromJsx, computeCalculated, conditionsMet, contentHash, countryByDialCode, countryByIso, countryByTimeZone, createBlock, createClient, createEmptyForm, createFormController, createId, defineForm, digitsOnly, evaluateCalc, flagEmoji, formSchemasEqual, formatAnswer, formatGroupedNumber, formatNational, isAutoSubmitBlock, isBlockVisible, isBuildTimeDevEnv, isCodeForm, isField, isFilloError, isLikelyDevEnv, isPossiblePhone, isTerminalPage, isValidPartialNumberText, localeForNotation, needsExplicitSubmit, normalizeFormSchema, normalizeFormTheme, normalizeSettings, parseGroupedNumber, parsePhone, pipeBlock, positionPhonePopover, prefillFromParams, provisionWorkspace, radioGroupStep, reachableFieldIds, reachableFields, reachablePageIds, reachablePageSequence, requiredFieldMessage, resolveNextPage, resolveSlotClass, resolveStrings, resolveText, resolveThemeAppearance, respondentErrorStringsFor, responseScopeValue, schemaFromJsx, sha1Base64, shouldAutoSubmit, slotClass, syncCodeForm, toE164, validateField, validateFormSchema, validateResponse, visibleBlocks, visibleFields, visibleGroupChildren, visiblePageBlocks, when };
+export { type AutoSubmitContext, BLOCK_KIND_META, type BaseField, type Block, type BlockKind, CONTENT_KINDS, type CalcExpr, type CalculatedField, type ChallengeConfig, type ChallengeTheme, type CheckboxField, type ChoiceField, type CodeForm, type Condition, type ConditionOp, type ContentBlock, type ContentKind, type CreatedDraft, type CustomField, DEFAULT_FIELD_STRINGS, DEFAULT_RESPONDENT_ERROR_STRINGS, DEFAULT_STRINGS, DRAFT_KINDS, type DateField, type DividerBlock, FILLO_CALC_MIN_SDK_VERSION, FILLO_CHALLENGE_MIN_SDK_VERSION, FILLO_DATA_ATTRS, FILLO_GROUP_MIN_SDK_VERSION, FILLO_MIN_SDK_VERSION, FILLO_SCHEMA_VERSION, FILLO_SDK_VERSION, FILLO_SLOTS, FILLO_THEME_VARS, type Field, type FieldKind, type FieldSpec, type FieldValue, type FileUploadField, type FileValue, type FilloAppearance, FilloClient, type FilloClientOptions, FilloError, type FilloFieldStrings, FilloJsxError, type FilloRendererStrings, type FilloRespondent, type FilloSlot, type FilloStrings, type FormBranding, type FormController, type FormControllerOptions, type FormControllerState, type FormDraftSpec, type FormPage, type FormSchema, type FormSettings, type FormStatus, type FormTheme, type FormThemePalette, type GroupInstanceValue, type HeadingBlock, type HiddenField, JSX_BLOCK_COMPONENTS, JSX_BLOCK_SPECS, type JsonValue, type JsxFormMeta, type JumpRule, type LinearScaleField, MAX_FILES_PER_FIELD, type MatrixField, type NextPage, type NumberField, PHONE_COUNTRIES, PHONE_PICKER_COUNTRIES, PHONE_POPOVER_VIEWPORT_GAP, type ParagraphBlock, type ParsePhoneOptions, type ParsedPhone, type PhoneCountry, type PhoneField, type PhonePopoverPlacement, type ProvisionWorkspaceResult, type PublishedForm, REQUIRED_FIELD_MESSAGE, type RankingField, type RatingField, type RepeatingGroupField, type RespondentErrorOverrides, type RespondentErrorStrings, type ResponseData, type ResponseDraft, type ResponseLimit, type SchemaValidationResult, type SelectOption, Sha1, type SignatureField, type SlotClass, type SlotState, type SubmitMeta, type SubmitResult, type SyncFormResult, type SyncedForm, type TextField, type ThemeDomAttributes, type TrustPolicy, type UploadFileOptions, type UploadProgress, type UploadSession, type UploadStatus, type UploadTransport, type ValidationResult, type WhenBuilder, allFields, assembleForm, codeFormFromJsx, computeCalculated, conditionsMet, contentHash, countryByDialCode, countryByIso, countryByTimeZone, createBlock, createClient, createEmptyForm, createFormController, createId, defineForm, digitsOnly, evaluateCalc, flagEmoji, formSchemasEqual, formatAnswer, formatGroupedNumber, formatNational, isAutoSubmitBlock, isBlockVisible, isBuildTimeDevEnv, isCodeForm, isField, isFilloError, isLikelyDevEnv, isPossiblePhone, isTerminalPage, isValidPartialNumberText, localeForNotation, needsExplicitSubmit, normalizeFormSchema, normalizeFormTheme, normalizeSettings, parseGroupedNumber, parsePhone, pipeBlock, positionPhonePopover, prefillFromParams, provisionWorkspace, radioGroupStep, reachableFieldIds, reachableFields, reachablePageIds, reachablePageSequence, requiredFieldMessage, resolveNextPage, resolveSlotClass, resolveStrings, resolveText, resolveThemeAppearance, resolveThemeDom, respondentErrorStringsFor, responseScopeValue, schemaFromJsx, sha1Base64, shouldAutoSubmit, slotClass, syncCodeForm, themeHasDarkPalette, toE164, validateField, validateFormSchema, validateResponse, visibleBlocks, visibleFields, visibleGroupChildren, visiblePageBlocks, when };

package/dist/index.js

@@ -1114,7 +1114,7 @@ var schemaShape = z2.object({
 });
 var MAX_SCHEMA_VERSION = 1;
 var FILLO_SCHEMA_VERSION = 1;
-var FILLO_SDK_VERSION = true ? "0.24.1" : "0.0.0-dev";
+var FILLO_SDK_VERSION = true ? "0.25.0" : "0.0.0-dev";
 var FILLO_MIN_SDK_VERSION = "0.4.0";
 var FILLO_CHALLENGE_MIN_SDK_VERSION = "0.9.0";
 var FILLO_CALC_MIN_SDK_VERSION = "0.11.0";
@@ -1893,17 +1893,30 @@ function safeCssToken(value, max) {
   if (/[;{}<>]/.test(token) || /url\s*\(/i.test(token)) return void 0;
   return token;
 }
+function themeAssetId(value) {
+  return typeof value === "string" && /^[A-Za-z0-9_-]{8,64}$/.test(value) ? value : void 0;
+}
+function normalizeThemePalette(input) {
+  if (!input || typeof input !== "object" || Array.isArray(input)) return void 0;
+  const rec = input;
+  const palette = cleanObject({
+    primary: safeCssToken(rec.primary, 200),
+    background: safeCssToken(rec.background, 200),
+    text: safeCssToken(rec.text, 200),
+    logo: themeAssetId(rec.logo)
+  });
+  return Object.keys(palette).length > 0 ? palette : void 0;
+}
 function normalizeFormTheme(input) {
   if (!input || typeof input !== "object" || Array.isArray(input)) return null;
   const rec = input;
   const colorScheme = rec.colorScheme === "light" || rec.colorScheme === "dark" || rec.colorScheme === "auto" ? rec.colorScheme : void 0;
   const theme = cleanObject({
     colorScheme,
-    primary: safeCssToken(rec.primary, 200),
-    background: safeCssToken(rec.background, 200),
-    text: safeCssToken(rec.text, 200),
+    ...normalizeThemePalette(rec),
     radius: safeCssToken(rec.radius, 64),
-    fontFamily: safeCssToken(rec.fontFamily, 200)
+    fontFamily: safeCssToken(rec.fontFamily, 200),
+    dark: normalizeThemePalette(rec.dark)
   });
   return Object.keys(theme).length > 0 ? theme : null;
 }
@@ -4194,6 +4207,7 @@ var FILLO_THEME_VARS = [
   { var: "--fillo-font", themeProp: "fontFamily" },
   { var: "--fillo-muted" },
   { var: "--fillo-border" },
+  { var: "--fillo-control-border" },
   { var: "--fillo-control-bg" },
   { var: "--fillo-error" },
   { var: "--fillo-primary-contrast" }
@@ -4222,13 +4236,71 @@ function relativeLuminance(token) {
   return 0.2126 * srgbToLinear(r) + 0.7152 * srgbToLinear(g) + 0.0722 * srgbToLinear(b);
 }
 function resolveThemeAppearance(theme) {
-  if (!theme || theme.colorScheme === "light" || theme.colorScheme === "dark" || !theme.background) {
+  if (!theme || theme.colorScheme === "light" || theme.colorScheme === "dark" || !theme.background || // A form with dark colors of its own follows the light/dark setting.
+  themeHasDarkPalette(theme)) {
     return theme;
   }
   const luminance = relativeLuminance(theme.background);
   if (luminance == null) return theme;
   return { ...theme, colorScheme: luminance > DARK_LUMINANCE_THRESHOLD ? "light" : "dark" };
 }
+function themeHasDarkPalette(theme) {
+  if (!theme || theme.colorScheme === "light" || theme.colorScheme === "dark") return false;
+  const dark = theme.dark;
+  return Boolean(dark && (dark.primary || dark.background || dark.text));
+}
+var ON_LIGHT_TEXT = "#18181b";
+function onColorTone(color) {
+  const luminance = relativeLuminance(color);
+  if (luminance == null) return null;
+  const withWhite = 1.05 / (luminance + 0.05);
+  const withDark = (luminance + 0.05) / ((relativeLuminance(ON_LIGHT_TEXT) ?? 0) + 0.05);
+  return withWhite >= withDark ? "light" : "dark";
+}
+var PALETTE_VARS = [
+  ["primary", "--fillo-primary"],
+  ["background", "--fillo-bg"],
+  ["text", "--fillo-text"]
+];
+var DEFAULT_PALETTE = {
+  light: { primary: "#18181b", background: "transparent", text: "#18181b" },
+  dark: { primary: "#fafafa", background: "transparent", text: "#f4f4f5" }
+};
+function resolveThemeDom(theme) {
+  const safe = resolveThemeAppearance(normalizeFormTheme(theme));
+  if (!safe) return null;
+  const vars = {};
+  const attrs = {};
+  if (safe.colorScheme) attrs["data-fillo-color-scheme"] = safe.colorScheme;
+  const dark = themeHasDarkPalette(safe) ? safe.dark : void 0;
+  for (const [key, name] of PALETTE_VARS) {
+    const light = safe[key];
+    if (!dark) {
+      if (light) vars[name] = light;
+      continue;
+    }
+    const darkValue = dark[key];
+    if (!light && !darkValue) continue;
+    vars[name] = `light-dark(${light ?? DEFAULT_PALETTE.light[key]}, ${darkValue ?? DEFAULT_PALETTE.dark[key]})`;
+  }
+  if (safe.radius) vars["--fillo-radius"] = safe.radius;
+  if (safe.fontFamily) vars["--fillo-font"] = safe.fontFamily;
+  if (dark) {
+    const lightTone = onColorTone(safe.primary ?? DEFAULT_PALETTE.light.primary);
+    const darkTone = onColorTone(dark.primary ?? DEFAULT_PALETTE.dark.primary);
+    if (lightTone && darkTone) {
+      attrs["data-fillo-on-primary"] = lightTone;
+      attrs["data-fillo-on-primary-dark"] = darkTone;
+    }
+  } else if (safe.primary) {
+    const tone = onColorTone(safe.primary);
+    if (tone) attrs["data-fillo-on-primary"] = tone;
+  }
+  if (safe.primary || safe.background || safe.text || dark) {
+    attrs["data-fillo-has-color-theme"] = "";
+  }
+  return { vars, attrs };
+}
 
 // src/define.ts
 function defineForm(def) {
@@ -4864,6 +4936,7 @@ export {
   resolveStrings,
   resolveText,
   resolveThemeAppearance,
+  resolveThemeDom,
   respondentErrorStringsFor,
   responseScopeValue,
   schemaFromJsx,
@@ -4871,6 +4944,7 @@ export {
   shouldAutoSubmit,
   slotClass,
   syncCodeForm,
+  themeHasDarkPalette,
   toE164,
   validateField,
   validateFormSchema,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefillo/core",
-  "version": "0.24.1",
+  "version": "0.25.0",
   "description": "Form schema, validation, logic engine and JS client for Fillo. Framework-agnostic.",
   "license": "MIT",
   "keywords": [