@funkit/connect/dist/chunk-RJAD5CZH.js

Funkit Connect SDK elevates DeFi apps via web2 sign-ins and one-click checkouts.

"use client";

// src/themes/baseTheme.ts
var systemFontStack = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
var fontStacks = {
  rounded: `SFRounded, ui-rounded, "SF Pro Rounded", ${systemFontStack}`,
  system: systemFontStack,
  fun: `SF Pro, ${systemFontStack}`
};
var radiusScales = {
  large: {
    actionButton: "12px",
    actionButtonInner: "10px",
    connectButton: "12px",
    modal: "24px",
    modalMobile: "28px",
    modalActionButton: "24px",
    modalActionButtonMobile: "28px",
    summaryBox: "12px",
    youPayYouReceive: "24px",
    inputAmountSwitcher: "24px",
    qrCode: "12px",
    tooltip: "4px",
    skeleton: "4px",
    dropdown: "12px",
    dropdownItem: "4px",
    modalTopbarIcon: "9999px"
  },
  medium: {
    actionButton: "10px",
    actionButtonInner: "8px",
    connectButton: "10px",
    modal: "16px",
    modalMobile: "18px",
    modalActionButton: "16px",
    modalActionButtonMobile: "18px",
    summaryBox: "10px",
    youPayYouReceive: "24px",
    inputAmountSwitcher: "24px",
    qrCode: "10px",
    tooltip: "4px",
    skeleton: "4px",
    dropdown: "10px",
    dropdownItem: "4px",
    modalTopbarIcon: "9999px"
  },
  none: {
    actionButton: "0px",
    actionButtonInner: "0px",
    connectButton: "0px",
    modal: "0px",
    modalMobile: "0px",
    modalActionButton: "0px",
    modalActionButtonMobile: "0px",
    summaryBox: "0px",
    youPayYouReceive: "0px",
    inputAmountSwitcher: "0px",
    qrCode: "0px",
    tooltip: "0px",
    skeleton: "0px",
    dropdown: "0px",
    dropdownItem: "0px",
    modalTopbarIcon: "0px"
  },
  small: {
    actionButton: "8px",
    actionButtonInner: "6px",
    connectButton: "8px",
    modal: "8px",
    modalMobile: "8px",
    modalActionButton: "8px",
    modalActionButtonMobile: "8px",
    summaryBox: "8px",
    youPayYouReceive: "24px",
    inputAmountSwitcher: "24px",
    qrCode: "8px",
    tooltip: "4px",
    skeleton: "4px",
    dropdown: "8px",
    dropdownItem: "4px",
    modalTopbarIcon: "9999px"
  }
};
var blurs = {
  large: {
    modalOverlay: "blur(20px)"
  },
  none: {
    modalOverlay: "blur(0px)"
  },
  small: {
    modalOverlay: "blur(8px)"
  },
  tiny: {
    modalOverlay: "blur(4px)"
  }
};
var DEFAULT_FONT_WEIGHTS = {
  regular: "400",
  medium: "500",
  // 510 in figma, but chrome no longer supports 510 - lowered to 500
  semibold: "600",
  // 590 in figma, but chrome no longer supports 590 - raised to 600
  bold: "700",
  heavy: "800"
};
var DEFAULT_FONT_SIZES = {
  "10": { fontSize: "10px", lineHeight: "15px" },
  "12": { fontSize: "12px", lineHeight: "14px" },
  "13": { fontSize: "13px", lineHeight: "18px" },
  "14": { fontSize: "14px", lineHeight: "18px" },
  "16": { fontSize: "16px", lineHeight: "20px" },
  "18": { fontSize: "18px", lineHeight: "24px" },
  "20": { fontSize: "20px", lineHeight: "20px" },
  "21": { fontSize: "21px", lineHeight: "21px" },
  "40": { fontSize: "40px", lineHeight: "48px" },
  "57": { fontSize: "57px", lineHeight: "68px" }
};
var FONT_SIZINGS = {
  regular: DEFAULT_FONT_SIZES,
  small: {
    "8": { fontSize: "8px", lineHeight: "16px" },
    "10": { fontSize: "8px", lineHeight: "16px" },
    "12": { fontSize: "10px", lineHeight: "16px" },
    "13": { fontSize: "10px", lineHeight: "16px" },
    "14": { fontSize: "12px", lineHeight: "16px" },
    "16": { fontSize: "14px", lineHeight: "18px" },
    "18": { fontSize: "14px", lineHeight: "20px" },
    "20": { fontSize: "18px", lineHeight: "20px" },
    "21": { fontSize: "19px", lineHeight: "19px" },
    "23": { fontSize: "20px", lineHeight: "28px" },
    "40": { fontSize: "34px", lineHeight: "40px" },
    "57": { fontSize: "50px", lineHeight: "60px" }
  }
};
var baseTheme = ({
  borderRadius = "large",
  fontStack = "fun",
  fontSizing = "regular",
  customFontFamily,
  customFontWeights = DEFAULT_FONT_WEIGHTS,
  customFontSizings = FONT_SIZINGS[fontSizing],
  customBorderWidths,
  customBorderRadiuses = radiusScales[borderRadius],
  customDimensions,
  customSpacings,
  overlayBlur = "small"
}) => ({
  blurs: {
    modalOverlay: blurs[overlayBlur].modalOverlay
  },
  dimensions: {
    modalBottomBarButtonHeight: "34px",
    modalTopBarHeight: "56px",
    ...customDimensions
  },
  fonts: typeof customFontFamily === "string" ? {
    buttonTextPrimary: customFontFamily,
    buttonTextSecondary: customFontFamily,
    buttonTextTertiary: customFontFamily,
    body: customFontFamily
  } : {
    buttonTextPrimary: fontStacks[fontStack],
    buttonTextSecondary: fontStacks[fontStack],
    buttonTextTertiary: fontStacks[fontStack],
    body: fontStacks[fontStack],
    ...customFontFamily
  },
  fontWeight: {
    ...DEFAULT_FONT_WEIGHTS,
    modalTopbarTitle: DEFAULT_FONT_WEIGHTS.medium,
    modalBottomBarButtonText: DEFAULT_FONT_WEIGHTS.medium,
    ...customFontWeights
  },
  fontSize: {
    ...FONT_SIZINGS[fontSizing],
    buttonTextPrimary: FONT_SIZINGS[fontSizing][12],
    buttonTextSecondary: FONT_SIZINGS[fontSizing][10],
    buttonTextTertiary: FONT_SIZINGS[fontSizing][12],
    modalTopbarSubtitle: FONT_SIZINGS[fontSizing][10],
    modalTopbarTitle: FONT_SIZINGS[fontSizing][13],
    modalBottomBarButtonText: FONT_SIZINGS[fontSizing][12],
    ...customFontSizings
  },
  radii: {
    actionButton: radiusScales[borderRadius].actionButton,
    actionButtonInner: radiusScales[borderRadius].actionButtonInner,
    connectButton: radiusScales[borderRadius].connectButton,
    menuButton: radiusScales[borderRadius].connectButton,
    modal: radiusScales[borderRadius].modal,
    modalMobile: radiusScales[borderRadius].modalMobile,
    modalActionButton: radiusScales[borderRadius].modalActionButton,
    modalActionButtonMobile: radiusScales[borderRadius].modalActionButtonMobile,
    summaryBox: radiusScales[borderRadius].summaryBox,
    youPayYouReceive: radiusScales[borderRadius].youPayYouReceive,
    inputAmountSwitcher: radiusScales[borderRadius].inputAmountSwitcher,
    qrCode: radiusScales[borderRadius].qrCode,
    skeleton: radiusScales[borderRadius].skeleton,
    tooltip: radiusScales[borderRadius].tooltip,
    dropdown: radiusScales[borderRadius].dropdown,
    dropdownItem: radiusScales[borderRadius].dropdownItem,
    modalTopbarIcon: radiusScales[borderRadius].modalTopbarIcon,
    ...customBorderRadiuses
  },
  borderWidths: {
    activeOptionBorderWidth: "1px",
    ...customBorderWidths
  },
  spacing: {
    modalBaseHorizontalPadding: "6px",
    modalBottomHorizontalPadding: "12px",
    modalPaddingBottomUpper: "16px",
    modalPaddingBottomLower: "16px",
    modalTopBarVerticalTextSpacing: "0px",
    ...customSpacings
  }
});

export {
  systemFontStack,
  baseTheme
};