@revenuecat/purchases-ui-js 0.0.21 → 0.1.21

package/dist/ui/theme/text.js

@@ -0,0 +1,173 @@
+/**
+ * All text styles get translated into --rc-text-<property_name> CSS variables.
+ * i.e., --rc-text-title1-font-size or --rc-text-title1-line-height
+ */
+export const DEFAULT_FONT_FAMILY = "-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif";
+const FONT_WEIGHTS = {
+    regular: "400",
+    medium: "500",
+    semibold: "600",
+};
+const FONT_SIZES = {
+    "10": "10px",
+    "12": "12px",
+    "14": "14px",
+    "16": "16px",
+    "18": "18px",
+    "20": "20px",
+    "24": "24px",
+    "28": "28px",
+    "32": "32px",
+    "36": "36px",
+    "40": "40px",
+};
+const LINE_HEIGHTS = {
+    "120": "120%",
+    "130": "130%",
+    "140": "140%",
+};
+const LETTER_SPACING = {
+    tight: "0.20%",
+    regular: "0",
+    loose: "0.20%",
+};
+const MOBILE_TEXT_STYLES = {
+    heading2xl: {
+        fontSize: FONT_SIZES["28"],
+        lineHeight: LINE_HEIGHTS["120"],
+        fontWeight: FONT_WEIGHTS["semibold"],
+        letterSpacing: LETTER_SPACING["tight"],
+    },
+    headingXl: {
+        fontSize: FONT_SIZES["24"],
+        lineHeight: LINE_HEIGHTS["130"],
+        fontWeight: FONT_WEIGHTS["semibold"],
+        letterSpacing: LETTER_SPACING["regular"],
+    },
+    headingLg: {
+        fontSize: "20px",
+        lineHeight: LINE_HEIGHTS["130"],
+        fontWeight: FONT_WEIGHTS["semibold"],
+        letterSpacing: LETTER_SPACING["regular"],
+    },
+    headingMd: {
+        fontSize: "16px",
+        lineHeight: LINE_HEIGHTS["140"],
+        fontWeight: FONT_WEIGHTS["medium"],
+        letterSpacing: LETTER_SPACING["regular"],
+    },
+    bodyBase: {
+        fontSize: FONT_SIZES["16"],
+        lineHeight: LINE_HEIGHTS["140"],
+        fontWeight: FONT_WEIGHTS["regular"],
+        letterSpacing: LETTER_SPACING["regular"],
+    },
+    bodySmall: {
+        fontSize: FONT_SIZES["14"],
+        lineHeight: LINE_HEIGHTS["140"],
+        fontWeight: FONT_WEIGHTS["regular"],
+        letterSpacing: LETTER_SPACING["regular"],
+    },
+    labelButton: {
+        fontSize: FONT_SIZES["16"],
+        lineHeight: LINE_HEIGHTS["140"],
+        fontWeight: FONT_WEIGHTS["regular"],
+        letterSpacing: LETTER_SPACING["tight"],
+    },
+    labelDefault: {
+        fontSize: FONT_SIZES["14"],
+        lineHeight: LINE_HEIGHTS["140"],
+        fontWeight: FONT_WEIGHTS["regular"],
+        letterSpacing: LETTER_SPACING["tight"],
+    },
+    captionDefault: {
+        fontSize: FONT_SIZES["12"],
+        lineHeight: LINE_HEIGHTS["140"],
+        fontWeight: FONT_WEIGHTS["regular"],
+        letterSpacing: LETTER_SPACING["regular"],
+    },
+    captionLink: {
+        fontSize: FONT_SIZES["12"],
+        lineHeight: LINE_HEIGHTS["140"],
+        fontWeight: FONT_WEIGHTS["regular"],
+        letterSpacing: LETTER_SPACING["regular"],
+    },
+};
+const DESKTOP_TEXT_STYLES = {
+    heading2xl: {
+        ...MOBILE_TEXT_STYLES.heading2xl,
+        fontSize: FONT_SIZES["36"],
+    },
+    headingXl: {
+        ...MOBILE_TEXT_STYLES.headingXl,
+        fontSize: FONT_SIZES["32"],
+    },
+    headingLg: {
+        ...MOBILE_TEXT_STYLES.headingLg,
+        fontSize: FONT_SIZES["24"],
+    },
+    headingMd: {
+        ...MOBILE_TEXT_STYLES.headingMd,
+        fontSize: FONT_SIZES["18"],
+    },
+    bodyBase: {
+        ...MOBILE_TEXT_STYLES.bodyBase,
+    },
+    bodySmall: {
+        ...MOBILE_TEXT_STYLES.bodySmall,
+    },
+    labelButton: {
+        ...MOBILE_TEXT_STYLES.labelButton,
+    },
+    labelDefault: {
+        ...MOBILE_TEXT_STYLES.labelDefault,
+    },
+    captionDefault: {
+        ...MOBILE_TEXT_STYLES.captionDefault,
+    },
+    captionLink: {
+        ...MOBILE_TEXT_STYLES.captionLink,
+    },
+};
+export const DEFAULT_TEXT_STYLES = {
+    heading2xl: {
+        mobile: MOBILE_TEXT_STYLES.heading2xl,
+        desktop: DESKTOP_TEXT_STYLES.heading2xl,
+    },
+    headingXl: {
+        desktop: DESKTOP_TEXT_STYLES.headingXl,
+        mobile: MOBILE_TEXT_STYLES.headingXl,
+    },
+    headingLg: {
+        desktop: DESKTOP_TEXT_STYLES.headingLg,
+        mobile: MOBILE_TEXT_STYLES.headingLg,
+    },
+    headingMd: {
+        desktop: DESKTOP_TEXT_STYLES.headingMd,
+        mobile: MOBILE_TEXT_STYLES.headingMd,
+    },
+    bodyBase: {
+        desktop: DESKTOP_TEXT_STYLES.bodyBase,
+        mobile: MOBILE_TEXT_STYLES.bodyBase,
+    },
+    bodySmall: {
+        desktop: DESKTOP_TEXT_STYLES.bodySmall,
+        mobile: MOBILE_TEXT_STYLES.bodySmall,
+    },
+    labelButton: {
+        desktop: DESKTOP_TEXT_STYLES.labelButton,
+        mobile: MOBILE_TEXT_STYLES.labelButton,
+    },
+    labelDefault: {
+        desktop: DESKTOP_TEXT_STYLES.labelDefault,
+        mobile: MOBILE_TEXT_STYLES.labelDefault,
+    },
+    captionDefault: {
+        desktop: DESKTOP_TEXT_STYLES.captionDefault,
+        mobile: MOBILE_TEXT_STYLES.captionDefault,
+    },
+    captionLink: {
+        desktop: DESKTOP_TEXT_STYLES.captionLink,
+        mobile: MOBILE_TEXT_STYLES.captionLink,
+    },
+};

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

@@ -0,0 +1,15 @@
+import type { Shape } from "./shapes";
+import type { Colors } from "./colors";
+import type { BrandingAppearance } from "../utils/branding";
+export declare class Theme {
+    private readonly brandingAppearance;
+    constructor(brandingAppearance?: BrandingAppearance | null | undefined);
+    get shape(): Shape;
+    get formColors(): Colors;
+    get formStyleVars(): string;
+    get productInfoStyleVars(): string;
+    get spacing(): import("./spacing").Spacing;
+    get textStyles(): import("./text").TextStyles;
+    get textStyleVars(): string;
+    get spacingStyleVars(): string;
+}

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/package.json

@@ -2,7 +2,7 @@
   "name": "@revenuecat/purchases-ui-js",
   "description": "Web components for Paywalls. Powered by RevenueCat",
   "private": false,
-  "version": "0.0.21",
+  "version": "0.1.21",
   "author": {
     "name": "RevenueCat, Inc."
   },