@funkit/connect 8.2.1 → 8.3.1-next.0

package/dist/chunk-5JRQC2VM.js

@@ -0,0 +1,300 @@
+"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,
+  customTextTransforms,
+  overlayBlur = "small"
+}) => ({
+  blurs: {
+    modalOverlay: blurs[overlayBlur].modalOverlay
+  },
+  dimensions: {
+    connectExchangeIconSize: "48px",
+    dollarValueSkeletonHeight: "60px",
+    dollarValueSkeletonWidth: "160px",
+    inputAmountQuickOptionButtonHeight: "36px",
+    inputAmountMinHeight: "76px",
+    modalBottomBarButtonHeight: "34px",
+    modalTopBarHeight: "56px",
+    paymentAmountSkeletonBlockHeight: "10px",
+    paymentAmountSkeletonBlockWidth: "93px",
+    paymentAmountSkeletonCircleSize: "15px",
+    selectAssetItemIconSize: "24px",
+    txBreakdownSkeletonWidth: "72px",
+    txSummaryLineSkeletonHeight: "14px",
+    txSummaryLineSkeletonWidth: "54px",
+    ...customDimensions,
+    modalBottomBarCloseButtonHeight: customDimensions?.modalBottomBarCloseButtonHeight ?? customDimensions?.modalBottomBarButtonHeight ?? "34px"
+  },
+  fonts: typeof customFontFamily === "string" ? {
+    amountValue: customFontFamily,
+    body: customFontFamily,
+    buttonTextPrimary: customFontFamily,
+    buttonTextSecondary: customFontFamily,
+    buttonTextTertiary: customFontFamily,
+    header: customFontFamily,
+    inputAmount: customFontFamily,
+    txStatusDescription: customFontFamily,
+    txStatusTitle: customFontFamily
+  } : {
+    amountValue: fontStacks[fontStack],
+    body: fontStacks[fontStack],
+    buttonTextPrimary: fontStacks[fontStack],
+    buttonTextSecondary: fontStacks[fontStack],
+    buttonTextTertiary: fontStacks[fontStack],
+    header: fontStacks[fontStack],
+    inputAmount: fontStacks[fontStack],
+    txStatusDescription: fontStacks[fontStack],
+    txStatusTitle: fontStacks[fontStack],
+    ...customFontFamily
+  },
+  fontWeight: {
+    ...DEFAULT_FONT_WEIGHTS,
+    inputAmount: DEFAULT_FONT_WEIGHTS.medium,
+    modalTopbarTitle: DEFAULT_FONT_WEIGHTS.medium,
+    modalBottomBarButtonText: DEFAULT_FONT_WEIGHTS.medium,
+    paymentMethodItemSubtitle: DEFAULT_FONT_WEIGHTS.regular,
+    paymentMethodItemTitle: DEFAULT_FONT_WEIGHTS.medium,
+    selectAssetItemSubtitle: DEFAULT_FONT_WEIGHTS.regular,
+    selectAssetItemTitle: DEFAULT_FONT_WEIGHTS.medium,
+    transferTokenLabelFontWeight: DEFAULT_FONT_WEIGHTS.medium,
+    txBreakdown: DEFAULT_FONT_WEIGHTS.regular,
+    txStatusDescription: DEFAULT_FONT_WEIGHTS.regular,
+    txStatusTitle: DEFAULT_FONT_WEIGHTS.medium,
+    txSummaryLabel: DEFAULT_FONT_WEIGHTS.medium,
+    txSummaryValue: DEFAULT_FONT_WEIGHTS.medium,
+    ...customFontWeights
+  },
+  fontSize: {
+    ...FONT_SIZINGS[fontSizing],
+    body: FONT_SIZINGS[fontSizing][14],
+    "header-14": { fontSize: "14px", lineHeight: "14px" },
+    "header-36": { fontSize: "36px", lineHeight: "36px" },
+    buttonTextPrimary: FONT_SIZINGS[fontSizing][12],
+    buttonTextSecondary: FONT_SIZINGS[fontSizing][10],
+    buttonTextTertiary: FONT_SIZINGS[fontSizing][12],
+    dollarValue: FONT_SIZINGS[fontSizing][40],
+    inputAmount: FONT_SIZINGS[fontSizing][57],
+    modalTopbarSubtitle: FONT_SIZINGS[fontSizing][10],
+    modalTopbarTitle: FONT_SIZINGS[fontSizing][13],
+    modalBottomBarButtonText: FONT_SIZINGS[fontSizing][12],
+    paymentMethodItemSubtitle: FONT_SIZINGS[fontSizing][12],
+    paymentMethodItemTitle: FONT_SIZINGS[fontSizing][12],
+    selectAssetItemSubtitle: FONT_SIZINGS[fontSizing][10],
+    selectAssetItemTitle: FONT_SIZINGS[fontSizing][13],
+    txBreakdown: FONT_SIZINGS[fontSizing][12],
+    txStatusDescription: FONT_SIZINGS[fontSizing][13],
+    txStatusTitle: FONT_SIZINGS[fontSizing][13],
+    txSummaryLabel: FONT_SIZINGS[fontSizing][12],
+    txSummaryValue: FONT_SIZINGS[fontSizing][12],
+    youPayYouReceivePrimaryFontSize: FONT_SIZINGS[fontSizing][12],
+    youPayYouReceiveSecondaryFontSize: FONT_SIZINGS[fontSizing][10],
+    transferTokenLabelFontSize: FONT_SIZINGS[fontSizing][12],
+    depositAddressFontSize: FONT_SIZINGS[fontSizing][10],
+    funFeatureListItemFontSize: FONT_SIZINGS[fontSizing][12],
+    dropdownItemFontSize: 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",
+    buttonTertiaryBorderWidth: "0px",
+    txSummaryBoxBorderWidth: "1px",
+    ...customBorderWidths
+  },
+  spacing: {
+    confirmationStepMarginTop: "6px",
+    confirmationStepVerticalGap: "18px",
+    modalBaseHorizontalPadding: "6px",
+    modalBottomBarButtonPaddingY: "0px",
+    modalBottomHorizontalPadding: "12px",
+    modalPaddingBottomUpper: "16px",
+    modalPaddingBottomLower: "16px",
+    modalTopBarVerticalTextSpacing: "0px",
+    selectAssetItemPaddingX: "12px",
+    selectAssetItemPaddingY: "8px",
+    selectAssetItemTextGap: "0px",
+    selectBrokerageItemPaddingX: "12px",
+    selectBrokerageItemPaddingY: "11px",
+    txBreakdownMarginY: "18px",
+    txBreakdownPaddingX: "12px",
+    txSummaryBoxPaddingX: "12px",
+    txSummaryBoxPaddingY: "12px",
+    txSummaryLineItemPadding: "0px",
+    txSummaryDividerMarginX: "12px",
+    txSummaryDividerMarginY: "12px",
+    youPayYouReceivePaddingY: "8px",
+    ...customSpacings
+  },
+  textTransforms: {
+    inputAmountQuickOptionButton: "none",
+    txStatusTitle: "none",
+    ...customTextTransforms
+  }
+});
+
+export {
+  systemFontStack,
+  baseTheme
+};

package/dist/{chunk-BP7VOYBS.js → chunk-A24XIU2M.js}

@@ -165,7 +165,8 @@ var baseTheme = ({
     txBreakdownSkeletonWidth: "72px",
     txSummaryLineSkeletonHeight: "14px",
     txSummaryLineSkeletonWidth: "54px",
-    ...customDimensions
+    ...customDimensions,
+    modalBottomBarCloseButtonHeight: customDimensions?.modalBottomBarCloseButtonHeight ?? customDimensions?.modalBottomBarButtonHeight ?? "34px"
   },
   fonts: typeof customFontFamily === "string" ? {
     amountValue: customFontFamily,
@@ -233,6 +234,7 @@ var baseTheme = ({
     transferTokenLabelFontSize: FONT_SIZINGS[fontSizing][12],
     depositAddressFontSize: FONT_SIZINGS[fontSizing][10],
     funFeatureListItemFontSize: FONT_SIZINGS[fontSizing][12],
+    dropdownItemFontSize: FONT_SIZINGS[fontSizing][12],
     ...customFontSizings
   },
   radii: {

package/dist/{chunk-MYPFORR2.js → chunk-CMS4F5PL.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   baseTheme
-} from "./chunk-BP7VOYBS.js";
+} from "./chunk-A24XIU2M.js";
 
 // src/themes/lightTheme.ts
 var accentColors = {
@@ -169,7 +169,8 @@ var lightTheme = ({
     dropdownActiveItemBackgroundHover: customColors?.dropdownActiveItemBackgroundHover ?? customColors?.offBackground ?? "#F7F7F7",
     dropdownActiveItemBackgroundDisabled: customColors?.dropdownActiveItemBackgroundDisabled ?? "transparent",
     txSummaryBoxBackground: customColors?.txSummaryBoxBackground ?? customColors?.modalBackground ?? "#FFF",
-    txSummaryBoxBorder: customColors?.txSummaryBoxBorder ?? customColors?.lightStroke ?? "#F7F7F7"
+    txSummaryBoxBorder: customColors?.txSummaryBoxBorder ?? customColors?.lightStroke ?? "#F7F7F7",
+    counterRingColor: customColors?.counterRingColor ?? accentColor
   },
   shadows: {
     connectButton: "0px 4px 12px rgba(0, 0, 0, 0.1)",

package/dist/chunk-CUWQELX3.js

@@ -0,0 +1,209 @@
+"use client";
+import {
+  baseTheme
+} from "./chunk-5JRQC2VM.js";
+
+// src/themes/lightTheme.ts
+var accentColors = {
+  blue: { accentColor: "#31A3F8", accentColorForeground: "#31A3F859" },
+  green: { accentColor: "#66CC00", accentColorForeground: "#FFF" },
+  orange: { accentColor: "#F6851B", accentColorForeground: "#FFF" },
+  pink: { accentColor: "#FF5CA0", accentColorForeground: "#FFF" },
+  purple: { accentColor: "#5F5AFA", accentColorForeground: "#FFF" },
+  red: { accentColor: "#F34126", accentColorForeground: "#FFF" },
+  white: { accentColor: "#000000", accentColorForeground: "#FFF" }
+};
+var defaultAccentColor = accentColors.white;
+var lightTheme = ({
+  accentColor = defaultAccentColor.accentColor,
+  accentColorForeground = defaultAccentColor.accentColorForeground,
+  customColors,
+  customShadows,
+  ...baseThemeOptions
+} = {}) => ({
+  ...baseTheme(baseThemeOptions),
+  colors: {
+    accentColor,
+    accentColorForeground,
+    actionButtonBorder: "rgba(0, 0, 0, 0.04)",
+    connectButtonBackground: "#FFF",
+    connectButtonBackgroundError: "#C60000",
+    connectButtonText: "#25292E",
+    connectButtonTextError: "#FFF",
+    connectionIndicator: "#30E000",
+    error: accentColors.red.accentColor,
+    errorBackground: "#F2E6E4",
+    errorBorder: "rgba(243, 65, 38, 0.2)",
+    generalBorder: "#F7F7F7",
+    // strokeColor in figma
+    generalBorderDim: "rgba(0, 0, 0, 0.03)",
+    menuItemBackground: "#FCFCFC",
+    selectedOptionBorder: "#F7F7F7",
+    focusedOptionBorder: "#737373",
+    standby: "#F6851B",
+    success: "#66CC00",
+    delayedStatusIcon: customColors?.secondaryText ?? "#737373",
+    // backward compatibility
+    chainIconBorder: "#fff",
+    // FUNKIT COLORS
+    // modal backgrounds
+    modalBackdrop: "rgba(0, 0, 0, 0.2)",
+    modalTopbarIcon: "#000",
+    modalTopbarIconBackground: customColors?.modalTopbarIconBackground ?? "transparent",
+    modalTopbarIconBackgroundHover: customColors?.modalTopbarIconBackgroundHover ?? customColors?.buttonIconBackgroundHover ?? "#F7F7F7",
+    modalTopbarIconBackgroundPressed: customColors?.modalTopbarIconBackgroundPressed ?? customColors?.buttonIconBackgroundPressed ?? "#F0F0F0",
+    modalTopbarIconStroke: customColors?.modalTopbarIconStroke ?? customColors?.buttonIconStroke ?? "rgba(0, 0, 0, 0.35)",
+    modalBackground: "#FFF",
+    modalBorder: "#F7F7F7",
+    offBackground: "#F7F7F7",
+    offBackgroundInverse: "#333333",
+    hoverState: "#F0F0F0",
+    lightStroke: "#F7F7F7",
+    mediumStroke: "#F0F0F0",
+    heavyStroke: "#E5E5E5",
+    strokeColor: "#E8E8E8",
+    //Text
+    primaryText: "#000",
+    secondaryText: "#737373",
+    tertiaryText: "rgba(0, 0, 0, 0.35)",
+    textSelection: "rgba(0, 0, 0, 0.10)",
+    // input
+    inputBackground: "#FFFFFF",
+    inputBorderBase: "#F0F0F0",
+    inputBorderHover: "#E5E5E5",
+    // tab
+    activeTabBorderColor: "#F7F7F7",
+    activeTabBackground: "#F7F7F7",
+    // button
+    actionColor: "#000",
+    actionColorHover: "rgba(0, 0, 0, 0.7)",
+    actionColorDisabled: "rgba(0, 0, 0, 0.50)",
+    buttonPrimary: accentColor,
+    buttonDisabled: "#31A3F826",
+    buttonWarning: accentColors.red.accentColor,
+    buttonSuccess: "#2EA200",
+    buttonTextPrimary: "#FFFFFF",
+    buttonTextHover: "#FFF",
+    buttonTextDisabled: "#FFF",
+    transparent: "transparent",
+    buttonBackgroundTertiary: "#F7F7F7",
+    buttonBackgroundHoverTertiary: "#F0F0F0",
+    buttonBackgroundDisabledTertiary: "transparent",
+    buttonTextTertiary: "#000",
+    buttonTextDisabledTertiary: "rgba(0, 0, 0, 0.5)",
+    buttonBackground: "#000",
+    buttonBackgroundHover: "#333333",
+    buttonBackgroundPressed: "#000",
+    buttonBackgroundDisabled: "rgba(0, 0, 0, 0.5)",
+    buttonTextSecondaryDisabled: "rgba(0, 0, 0, 0.5)",
+    buttonTextSecondary: "#000000",
+    buttonIconBackgroundHover: "#F7F7F7",
+    buttonIconBackgroundPressed: "#F0F0F0",
+    buttonIconStroke: "rgba(0, 0, 0, 0.35)",
+    buttonBorderTertiary: "transparent",
+    buttonBorderFocusedTertiary: "rgba(0, 0, 0, 0.35)",
+    buttonFocusedOutline: "none",
+    buttonBorderGradient: "none",
+    buttonHoverBorderGradient: "none",
+    buttonDisabledBorderGradient: "none",
+    // TODO: Make common colors when refactoring the design system
+    inputAmountQuickOptionBaseBackground: "#F7F7F7",
+    inputAmountQuickOptionHoverBackground: "#F0F0F0",
+    inputAmountQuickOptionActiveBackground: "#F0F0F0",
+    inputAmountQuickOptionDisabledBackground: "#F7F7F7",
+    inputAmountQuickOptionBaseBorder: "#F7F7F7",
+    inputAmountQuickOptionHoverBorder: "rgba(0, 0, 0, 0.35)",
+    inputAmountQuickOptionActiveBorder: "rgba(0, 0, 0, 0.35)",
+    inputAmountQuickOptionFocusedBorder: "rgba(0, 0, 0, 0.35)",
+    inputAmountFiatDecimalsColor: customColors?.inputAmountFiatDecimalsColor ?? "none",
+    youPayYouReceiveBackground: "#FFF",
+    // modalBackground
+    youPayYouReceiveBorder: "#F0F0F0",
+    // mediumStroke
+    youPayYouReceivePrimaryText: "#000",
+    // primaryText
+    youPayYouReceiveSecondaryText: "#737373",
+    // secondaryText
+    // badges
+    badgeBackgroundSuccess: "rgba(124, 242, 136, 0.1)",
+    badgeBorderSuccess: "rgba(124, 242, 136, 0.2)",
+    badgeTextSuccess: "rgb(124, 242, 136)",
+    newBadgeBackground: "linear-gradient(180deg, #ECFFEA 0%, #E4FFE9 100%)",
+    newBadgeBorder: "rgba(122, 221, 122, 0.5)",
+    newBadgeText: "#028320",
+    approvedBadgeBackground: "linear-gradient(180deg, #ECFFEA 0%, #E4FFE9 100%)",
+    approvedBadgeBorder: "rgba(109, 216, 109, 0.5)",
+    approvedBadgeText: "#028320",
+    failedBadgeBackground: "rgba(255, 61, 61, 0.08)",
+    failedBadgeBorder: "rgba(0, 0, 0, 0.03)",
+    failedBadgeText: "#C2341E",
+    announceGradientFrom: "#595959",
+    announceGradientTo: "#9C9C9C",
+    fiatPendingGradientFrom: "#454545",
+    fiatPendingGradientTo: "#747474",
+    fiatSuccessBackgroundFill: "rgba(102, 204, 0, 0.16)",
+    fiatFailedBackgroundFill: "rgba(255, 61, 61, 0.12)",
+    fiatStatusIconBorder: "rgba(0, 0, 0, 0.03)",
+    fiatAccountIconFill: "#E7F3FE",
+    fiatAccountGradientFrom: "#055DF5",
+    fiatAccountGradientTo: "#4C8DFD",
+    modalHeaderDivider: "#F7F7F7",
+    // lightStroke
+    modalFooterDivider: "#F7F7F7",
+    // lightStroke
+    spinnerBackground: customColors?.mediumStroke ?? "rgba(255, 255, 255, 0.3)",
+    // 30% buttonTextPrimary
+    spinnerIndicator: customColors?.primaryText ?? "#FFF",
+    // 100% buttonTextPrimary
+    spinnerBackgroundVerifyAccount: "rgba(255, 255, 255, 0.3)",
+    // 30% buttonTextPrimary
+    spinnerIndicatorVerifyAccount: customColors?.primaryText ?? "#FFF",
+    // 100% buttonTextPrimary
+    // Override colors
+    ...customColors || {},
+    // option Boxes
+    optionBoxBackground: customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#FFF",
+    // keeps gradient in SourcePaymentMethodItem if optionBoxBackground differs from modal background
+    optionBoxBackgroundUninteractive: customColors?.optionBoxBackgroundUninteractive ?? "transparent",
+    dropdownActiveItemBackgroundBase: customColors?.dropdownActiveItemBackgroundBase ?? customColors?.modalBackground ?? "#FFF",
+    dropdownActiveItemBackgroundHover: customColors?.dropdownActiveItemBackgroundHover ?? customColors?.offBackground ?? "#F7F7F7",
+    dropdownActiveItemBackgroundDisabled: customColors?.dropdownActiveItemBackgroundDisabled ?? "transparent",
+    txSummaryBoxBackground: customColors?.txSummaryBoxBackground ?? customColors?.modalBackground ?? "#FFF",
+    txSummaryBoxBorder: customColors?.txSummaryBoxBorder ?? customColors?.lightStroke ?? "#F7F7F7",
+    counterRingColor: customColors?.counterRingColor ?? accentColor
+  },
+  shadows: {
+    connectButton: "0px 4px 12px rgba(0, 0, 0, 0.1)",
+    dialog: "0px 8px 32px rgba(0, 0, 0, 0.32)",
+    selectedOption: "0px 2px 6px rgba(0, 0, 0, 0.24)",
+    selectedWallet: "0px 2px 6px rgba(0, 0, 0, 0.12)",
+    dropdown: "0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 2px 6px 0px rgba(0, 0, 0, 0.03), 0px 4px 42px 0px rgba(0, 0, 0, 0.06)",
+    notification: "0px 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 2px 6px 0px rgba(0, 0, 0, 0.05), 0px 4px 42px 0px rgba(0, 0, 0, 0.06)",
+    qrCode: "0px 0px 0px 1px rgba(0, 0, 0, 0.10), 0px 1px 4px 0px rgba(0, 0, 0, 0.04), 0px 4px 24px 0px rgba(8, 7, 7, 0.10)",
+    buttonShadow: "none",
+    buttonShadowTertiary: customShadows?.buttonShadow ?? "none",
+    buttonFocusedShadow: "0px 0px 0px 2px rgba(0, 0, 0, 0.25)",
+    buttonFocusedShadowTertiary: "0px 0px 0px 2px rgba(0, 0, 0, 0.25)",
+    buttonHoverShadow: "none",
+    buttonHoverShadowTertiary: "none",
+    buttonDisabledShadow: "none",
+    buttonDisabledShadowTertiary: customShadows?.buttonDisabledShadow ?? "none",
+    buttonInnerShadow: "none",
+    buttonInnerShadowTertiary: customShadows?.buttonInnerShadow ?? "none",
+    buttonFocusedInnerShadow: "none",
+    buttonFocusedInnerShadowTertiary: customShadows?.buttonFocusedInnerShadow ?? "none",
+    buttonHoverInnerShadow: "none",
+    buttonHoverInnerShadowTertiary: customShadows?.buttonHoverInnerShadow ?? "none",
+    buttonDisabledInnerShadow: "none",
+    buttonDisabledInnerShadowTertiary: customShadows?.buttonDisabledInnerShadow ?? "none",
+    selectedDropdownItem: "none",
+    // Override shadows
+    ...customShadows || {}
+  },
+  moonpayTheme: "light"
+});
+lightTheme.accentColors = accentColors;
+
+export {
+  lightTheme
+};