@revenuecat/purchases-ui-js 0.0.20 → 0.1.21

package/dist/ui/theme/theme.js

@@ -0,0 +1,38 @@
+import { toFormColors, toFormStyleVar, toProductInfoStyleVar, toShape, toSpacingVars, toTextStyleVar, } from "./utils";
+import { DEFAULT_TEXT_STYLES } from "./text";
+import { DEFAULT_SPACING } from "./spacing";
+export class Theme {
+    brandingAppearance;
+    constructor(brandingAppearance) {
+        if (brandingAppearance) {
+            this.brandingAppearance = brandingAppearance;
+        }
+        else {
+            this.brandingAppearance = undefined;
+        }
+    }
+    get shape() {
+        return toShape(this.brandingAppearance);
+    }
+    get formColors() {
+        return toFormColors(this.brandingAppearance);
+    }
+    get formStyleVars() {
+        return toFormStyleVar(this.brandingAppearance);
+    }
+    get productInfoStyleVars() {
+        return toProductInfoStyleVar(this.brandingAppearance);
+    }
+    get spacing() {
+        return DEFAULT_SPACING;
+    }
+    get textStyles() {
+        return DEFAULT_TEXT_STYLES;
+    }
+    get textStyleVars() {
+        return toTextStyleVar("text", this.textStyles);
+    }
+    get spacingStyleVars() {
+        return toSpacingVars("spacing", this.spacing);
+    }
+}

package/dist/ui/theme/utils.d.ts

@@ -0,0 +1,37 @@
+import { type Colors } from "./colors";
+import { type Shape } from "./shapes";
+import { type TextStyles } from "./text";
+import type { Spacing } from "./spacing";
+import type { BrandingAppearance } from "../utils/branding";
+export declare const DEFAULT_LUMINANCE_THRESHOLD = 0.37;
+/**
+ * Applies an alpha value to a color.
+ * If the base color is light, the overlay color is black.
+ * If the base color is dark, the overlay color is white.
+ */
+export declare function applyAlpha(baseColor: string, alpha: number): string;
+export declare const toColors: (colorsMapping: Record<string, string>, defaultColors: Colors, brandingAppearance?: BrandingAppearance | null | undefined) => Colors;
+export declare const toProductInfoColors: (brandingAppearance?: BrandingAppearance | null | undefined) => Colors;
+export declare const toFormColors: (brandingAppearance?: BrandingAppearance | null | undefined) => Colors;
+export declare const toShape: (brandingAppearance?: BrandingAppearance | null | undefined) => Shape;
+export declare const toStyleVar: (prefix: string | undefined, entries: [string, string][]) => string;
+/**
+ * Assigns values to the css variables given the branding appearance customization.
+ * @param appearance BrandingAppearance
+ * @return a style parameter compatible string.
+ */
+export declare const toProductInfoStyleVar: (appearance?: BrandingAppearance | null) => string;
+/**
+ * Assigns values to the css variables given the branding appearance customization.
+ * @param appearance BrandingAppearance
+ * @return a style parameter compatible string.
+ */
+export declare const toFormStyleVar: (appearance?: BrandingAppearance | null) => string;
+/**
+ * Convert text styles into CSS variables for both desktop and mobile.
+ */
+export declare const toTextStyleVar: (prefix: string | undefined, textStyles: TextStyles) => string;
+/**
+ * Generates CSS variables for the spacing system.
+ */
+export declare const toSpacingVars: (prefix: string | undefined, spacing: Spacing) => string;

package/dist/ui/theme/utils.js

@@ -0,0 +1,191 @@
+import { DEFAULT_FORM_COLORS, DEFAULT_INFO_COLORS, FormColorsToBrandingAppearanceMapping, InfoColorsToBrandingAppearanceMapping, } from "./colors";
+import { DefaultShape, PillsShape, RectangularShape, RoundedShape, } from "./shapes";
+import { DEFAULT_FONT_FAMILY } from "./text";
+const hexToRGB = (color) => {
+    if (color.length == 7)
+        return {
+            r: parseInt(color.slice(1, 3), 16),
+            g: parseInt(color.slice(3, 5), 16),
+            b: parseInt(color.slice(5, 7), 16),
+        };
+    if (color.length == 4)
+        return {
+            r: parseInt(color[1], 16),
+            g: parseInt(color[2], 16),
+            b: parseInt(color[3], 16),
+        };
+    return null;
+};
+const isLightColor = ({ r, g, b, luminanceThreshold, }) => {
+    // Gamma correction
+    const gammaCorrect = (color) => {
+        color = color / 255;
+        return color <= 0.03928
+            ? color / 12.92
+            : Math.pow((color + 0.055) / 1.055, 2.4);
+    };
+    // Calculate relative luminance with gamma correction
+    const luminance = 0.2126 * gammaCorrect(r) +
+        0.7152 * gammaCorrect(g) +
+        0.0722 * gammaCorrect(b);
+    // Return whether the background is light
+    return luminance > luminanceThreshold;
+};
+export const DEFAULT_LUMINANCE_THRESHOLD = 0.37;
+const rgbToTextColors = (rgb, luminanceThreshold = DEFAULT_LUMINANCE_THRESHOLD) => {
+    const baseColor = isLightColor({ ...rgb, luminanceThreshold })
+        ? "0,0,0"
+        : "255,255,255";
+    return {
+        "grey-text-dark": `rgb(${baseColor})`,
+        "grey-text-light": `rgba(${baseColor},0.70)`,
+        "grey-ui-dark": `rgba(${baseColor},0.3)`,
+        "grey-ui-light": `rgba(${baseColor},0.1)`,
+    };
+};
+function overlayColor(baseColor, overlay, alpha) {
+    const base = hexToRGB(baseColor) || { r: 0, g: 0, b: 0 };
+    const over = hexToRGB(overlay) || { r: 255, g: 255, b: 255 };
+    const r = Math.round(over.r * alpha + base.r * (1 - alpha));
+    const g = Math.round(over.g * alpha + base.g * (1 - alpha));
+    const b = Math.round(over.b * alpha + base.b * (1 - alpha));
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+/**
+ * Applies an alpha value to a color.
+ * If the base color is light, the overlay color is black.
+ * If the base color is dark, the overlay color is white.
+ */
+export function applyAlpha(baseColor, alpha) {
+    const defaultRgb = { r: 255, g: 255, b: 255 };
+    const normalizedAlpha = Math.max(0, Math.min(1, alpha));
+    let appliedBaseColor = baseColor;
+    let baseRgb = hexToRGB(baseColor) || defaultRgb;
+    if (isNaN(baseRgb.r) || isNaN(baseRgb.g) || isNaN(baseRgb.b)) {
+        baseRgb = defaultRgb;
+        appliedBaseColor = "#FFFFFF";
+    }
+    const baseIsLight = isLightColor({
+        ...baseRgb,
+        luminanceThreshold: DEFAULT_LUMINANCE_THRESHOLD,
+    });
+    const overlay = baseIsLight ? "#000000" : "#FFFFFF";
+    return overlayColor(appliedBaseColor, overlay, normalizedAlpha);
+}
+function toHex(val) {
+    return val.toString(16).padStart(2, "0").toUpperCase();
+}
+const textColorsForBackground = (backgroundColor, primaryColor, defaultColors, luminanceThreshold = DEFAULT_LUMINANCE_THRESHOLD) => {
+    const textColors = {
+        "grey-text-dark": defaultColors["grey-text-dark"],
+        "grey-text-light": defaultColors["grey-text-light"],
+        "grey-ui-dark": defaultColors["grey-ui-dark"],
+        "grey-ui-light": defaultColors["grey-ui-light"],
+        "primary-text": defaultColors["primary-text"],
+    };
+    // Find the text colors for the background
+    if (backgroundColor?.startsWith("#")) {
+        const rgb = hexToRGB(backgroundColor);
+        if (rgb !== null) {
+            Object.assign(textColors, rgbToTextColors(rgb));
+        }
+    }
+    // Find the text color for the primary color
+    if (primaryColor?.startsWith("#")) {
+        const rgb = hexToRGB(primaryColor);
+        if (rgb !== null) {
+            textColors["primary-text"] = isLightColor({ ...rgb, luminanceThreshold })
+                ? "black"
+                : "white";
+        }
+    }
+    return textColors;
+};
+const colorsForButtonStates = (primaryColor) => {
+    return {
+        "primary-hover": applyAlpha(primaryColor, 0.1),
+        "primary-pressed": applyAlpha(primaryColor, 0.15),
+    };
+};
+const fallback = (somethingNullable, defaultValue) => {
+    return somethingNullable ? somethingNullable : defaultValue;
+};
+const mapColors = (colorsMapping, defaultColors, brandingAppearance) => {
+    const mappedColors = Object.entries(colorsMapping).map(([target, source]) => [
+        target,
+        fallback(brandingAppearance
+            ? brandingAppearance[source]
+            : null, defaultColors[target]),
+    ]);
+    return Object.fromEntries(mappedColors);
+};
+export const toColors = (colorsMapping, defaultColors, brandingAppearance) => {
+    const mappedColors = mapColors(colorsMapping, defaultColors, brandingAppearance);
+    return brandingAppearance
+        ? {
+            ...defaultColors,
+            ...mappedColors,
+            ...textColorsForBackground(mappedColors.background, mappedColors.primary, defaultColors),
+            ...colorsForButtonStates(mappedColors.primary),
+        }
+        : { ...defaultColors }; //copy, do not reference.
+};
+export const toProductInfoColors = (brandingAppearance) => {
+    return toColors(InfoColorsToBrandingAppearanceMapping, DEFAULT_INFO_COLORS, brandingAppearance);
+};
+export const toFormColors = (brandingAppearance) => {
+    return toColors(FormColorsToBrandingAppearanceMapping, DEFAULT_FORM_COLORS, brandingAppearance);
+};
+export const toShape = (brandingAppearance) => {
+    if (!brandingAppearance) {
+        return DefaultShape;
+    }
+    switch (brandingAppearance.shapes) {
+        case "rounded":
+            return RoundedShape;
+        case "rectangle":
+            return RectangularShape;
+        case "pill":
+            return PillsShape;
+        default:
+            return DefaultShape;
+    }
+};
+export const toStyleVar = (prefix = "", entries) => entries.map(([key, value]) => `--rc-${prefix}-${key}: ${value}`).join("; ");
+/**
+ * Assigns values to the css variables given the branding appearance customization.
+ * @param appearance BrandingAppearance
+ * @return a style parameter compatible string.
+ */
+export const toProductInfoStyleVar = (appearance) => {
+    const colorVariablesString = toStyleVar("color", Object.entries(toProductInfoColors(appearance)));
+    const shapeVariableString = toStyleVar("shape", Object.entries(toShape(appearance)));
+    return [colorVariablesString, shapeVariableString].join("; ");
+};
+/**
+ * Assigns values to the css variables given the branding appearance customization.
+ * @param appearance BrandingAppearance
+ * @return a style parameter compatible string.
+ */
+export const toFormStyleVar = (appearance) => {
+    const colorVariablesString = toStyleVar("color", Object.entries(toFormColors(appearance)));
+    const shapeVariableString = toStyleVar("shape", Object.entries(toShape(appearance)));
+    return [colorVariablesString, shapeVariableString].join("; ");
+};
+/**
+ * Convert text styles into CSS variables for both desktop and mobile.
+ */
+export const toTextStyleVar = (prefix = "", textStyles) => Object.entries(textStyles)
+    .flatMap(([key, { desktop, mobile }]) => [
+    `--rc-${prefix}-${key}-desktop: normal normal ${desktop.fontWeight} ${desktop.fontSize}/${desktop.lineHeight} ${DEFAULT_FONT_FAMILY}`,
+    `--rc-${prefix}-${key}-mobile: normal normal ${mobile.fontWeight} ${mobile.fontSize}/${mobile.lineHeight} ${DEFAULT_FONT_FAMILY}`,
+    `--rc-${prefix}-${key}-desktop-font-size: ${desktop.fontSize}`,
+    `--rc-${prefix}-${key}-mobile-font-size: ${mobile.fontSize}`,
+])
+    .join("; ");
+/**
+ * Generates CSS variables for the spacing system.
+ */
+export const toSpacingVars = (prefix = "", spacing) => Object.entries(spacing)
+    .map(([key, { mobile, desktop }]) => `--rc-${prefix}-${key}-mobile: ${mobile};  --rc-${prefix}-${key}-desktop: ${desktop};`)
+    .join(" ");

package/dist/ui/utils/branding.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @public
+ * `BrandingAppearance` defines the appearance settings
+ *  of an app's branding configuration.
+ */
+export interface BrandingAppearance {
+    color_buttons_primary: string;
+    color_accent: string;
+    color_error: string;
+    color_product_info_bg: string;
+    color_form_bg: string;
+    color_page_bg: string;
+    font: string;
+    shapes: "default" | "rectangle" | "rounded" | "pill";
+    show_product_description: boolean;
+}

package/dist/ui/utils/branding.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/utils/processing-animation.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  export let size: "small" | "medium" | "large" = "medium";
+
+  const sizeMap = {
+    small: { width: "8px", offset: "10px" },
+    medium: { width: "12px", offset: "20px" },
+    large: { width: "16px", offset: "30px" },
+  };
+</script>
+
+<div
+  class="rcb-processing"
+  style="--shadow-offset: {sizeMap[size].offset}; --width: {sizeMap[size]
+    .width};"
+></div>
+
+<style>
+  .rcb-processing {
+    width: var(--width, 12px);
+    aspect-ratio: 1;
+    border-radius: 50%;
+    animation: l5 1.5s infinite linear;
+  }
+
+  @keyframes l5 {
+    0% {
+      box-shadow:
+        var(--shadow-offset) 0 #fff2,
+        calc(-1 * var(--shadow-offset)) 0 #fff2;
+      background: #fff2;
+    }
+    25% {
+      box-shadow:
+        var(--shadow-offset) 0 #fff2,
+        calc(-1 * var(--shadow-offset)) 0 #ffff;
+      background: #fff2;
+    }
+    50% {
+      box-shadow:
+        var(--shadow-offset) 0 #fff2,
+        calc(-1 * var(--shadow-offset)) 0 #fff2;
+      background: #ffff;
+    }
+    75% {
+      box-shadow:
+        var(--shadow-offset) 0 #ffff,
+        calc(-1 * var(--shadow-offset)) 0 #fff2;
+      background: #fff2;
+    }
+    100% {
+      box-shadow:
+        var(--shadow-offset) 0 #fff2,
+        calc(-1 * var(--shadow-offset)) 0 #fff2;
+      background: #fff2;
+    }
+  }
+</style>

package/dist/ui/utils/processing-animation.svelte.d.ts

@@ -0,0 +1,20 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ProcessingAnimation: $$__sveltets_2_IsomorphicComponent<{
+    size?: "small" | "medium" | "large";
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ProcessingAnimation = InstanceType<typeof ProcessingAnimation>;
+export default ProcessingAnimation;

package/dist/utils/constants.d.ts

@@ -0,0 +1,4 @@
+import type { ColorMode } from "../types";
+export declare const DEFAULT_COLOR_MODE: ColorMode;
+export declare const DEFAULT_TEXT_COLOR = "#000000";
+export declare const DEFAULT_BACKGROUND_COLOR = "#FFFFFF";

package/dist/utils/constants.js

@@ -0,0 +1,3 @@
+export const DEFAULT_COLOR_MODE = "light";
+export const DEFAULT_TEXT_COLOR = "#000000";
+export const DEFAULT_BACKGROUND_COLOR = "#FFFFFF";

package/dist/utils/style-utils.js

@@ -1,3 +1,4 @@
+import { DEFAULT_COLOR_MODE, DEFAULT_TEXT_COLOR, } from "./constants.js";
 import { FontSizes, FontSizeTags, FontWeights, StackAlignment, StackDirection, StackDistribution, TextAlignments, } from "../types.js";
 /**
  * Generates CSS spacing styles for margin or padding
@@ -35,10 +36,10 @@ export function getTextComponentTag(fontSize) {
  * @param params - Object containing color map, mode and fallback color
  * @returns Color value as string
  */
-export function getColor({ colorMap, colorMode = "light", fallback = "FFFFFF", }) {
+export function getColor({ colorMap, colorMode = DEFAULT_COLOR_MODE, fallback = "FFFFFF", }) {
     if (!colorMap)
         return fallback;
-    const color = colorMap[colorMode] || colorMap["light"];
+    const color = colorMap[colorMode] || colorMap[DEFAULT_COLOR_MODE];
     let colorPoints = "";
     switch (color.type) {
         case "hex":
@@ -64,7 +65,7 @@ export function getColor({ colorMap, colorMode = "light", fallback = "FFFFFF", }
  * @param colorMode - Color mode (light/dark)
  * @returns CSS border style string
  */
-export function getBorderStyle(border, colorMode = "light") {
+export function getBorderStyle(border, colorMode = DEFAULT_COLOR_MODE) {
     if (!border)
         return "";
     const color = getColor({ colorMap: border.color, colorMode });
@@ -88,7 +89,7 @@ export function getCornerRadiusStyle(corners) {
  * @param params - Component style configuration object
  * @returns CSS style object with component styles
  */
-export function getComponentStyles({ background_color, border, margin, padding, color, colorMode = "light", shape, shadow, }) {
+export function getComponentStyles({ background_color, border, margin, padding, color, colorMode = DEFAULT_COLOR_MODE, shape, shadow, }) {
     const stylesObject = {
         "--margin-block-start": "0px",
         "--margin-inline-end": "0px",
@@ -124,7 +125,7 @@ export function getComponentStyles({ background_color, border, margin, padding,
         stylesObject["--text-color"] = getColor({
             colorMap: color,
             colorMode,
-            fallback: "#000000",
+            fallback: DEFAULT_TEXT_COLOR,
         });
     }
     if (border) {
@@ -143,7 +144,7 @@ export function getComponentStyles({ background_color, border, margin, padding,
     }
     if (shadow) {
         stylesObject["--shadow"] = `${shadow.x}px ${shadow.y}px ${shadow.radius}px 
-      ${getColor({ colorMap: shadow.color, colorMode, fallback: "#000000" })}`;
+      ${getColor({ colorMap: shadow.color, colorMode, fallback: DEFAULT_TEXT_COLOR })}`;
     }
     return stylesObject;
 }
@@ -256,7 +257,7 @@ export function getDimensionStyle(dimension) {
  * @param colorMode - The currently selected ColorMode (dark/light)
  * @returns CSS style object with text formatting properties
  */
-export function getTextStyles(props, colorMode = "light") {
+export function getTextStyles(props, colorMode = DEFAULT_COLOR_MODE) {
     const { font_size, horizontal_alignment, font_weight, font_name, color } = props;
     const styles = {
         "--text-align": "initial",
@@ -404,7 +405,7 @@ export function getLinearGradientAngle(props) {
         return { x1: "0%", y1: "0%", x2: "0%", y2: "0%" };
     }
     const { color_overlay: colorOverlay } = props;
-    const angle = colorOverlay?.["light"]?.degrees || 0;
+    const angle = colorOverlay?.[DEFAULT_COLOR_MODE]?.degrees || 0;
     const x1 = "50%";
     const y1 = "0%";
     const x2 = `${Math.round(50 + Math.sin(((angle + 90) * Math.PI) / 90) * 50)}%`;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@revenuecat/purchases-ui-js",
   "description": "Web components for Paywalls. Powered by RevenueCat",
   "private": false,
-  "version": "0.0.20",
+  "version": "0.1.21",
   "author": {
     "name": "RevenueCat, Inc."
   },
@@ -61,37 +61,37 @@
     "svelte": "^5.3.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.2",
-    "@eslint/js": "^9.16.0",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
+    "@chromatic-com/storybook": "^3.2.3",
+    "@eslint/js": "^9.18.0",
+    "@storybook/addon-essentials": "^8.5.0",
+    "@storybook/addon-interactions": "^8.5.0",
+    "@storybook/addon-links": "^8.5.0",
     "@storybook/addon-svelte-csf": "^5.0.0-next.14",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/svelte": "^8.4.7",
-    "@storybook/sveltekit": "^8.4.7",
-    "@storybook/test": "^8.4.7",
-    "@sveltejs/adapter-node": "^5.2.9",
-    "@sveltejs/kit": "^2.9.0",
+    "@storybook/blocks": "^8.5.0",
+    "@storybook/svelte": "^8.5.0",
+    "@storybook/sveltekit": "^8.5.0",
+    "@storybook/test": "^8.5.0",
+    "@sveltejs/adapter-node": "^5.2.11",
+    "@sveltejs/kit": "^2.15.3",
     "@sveltejs/package": "^2.3.7",
-    "@sveltejs/vite-plugin-svelte": "^5.0.2",
-    "@typescript-eslint/parser": "^8.17.0",
-    "chromatic": "^11.20.0",
-    "eslint": "^9.16.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@typescript-eslint/parser": "^8.20.0",
+    "chromatic": "^11.24.0",
+    "eslint": "^9.18.0",
     "eslint-plugin-svelte": "^2.46.1",
-    "globals": "^15.13.0",
+    "globals": "^15.14.0",
     "husky": "^9.1.7",
-    "jsdom": "^25.0.1",
-    "lint-staged": "^15.2.10",
+    "jsdom": "^26.0.0",
+    "lint-staged": "^15.3.0",
     "prettier": "^3.4.2",
-    "prettier-plugin-svelte": "^3.3.2",
+    "prettier-plugin-svelte": "^3.3.3",
     "publint": "^0.2.12",
-    "storybook": "^8.4.7",
-    "svelte": "^5.9.1",
-    "svelte-check": "^4.1.1",
-    "typescript": "^5.7.2",
-    "typescript-eslint": "^8.17.0",
-    "vite": "^6.0.3",
+    "storybook": "^8.5.0",
+    "svelte": "^5.18.0",
+    "svelte-check": "^4.1.4",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.20.0",
+    "vite": "^6.0.7",
     "vitest": "^2.1.8"
   },
   "lint-staged": {