@funkit/connect 9.7.1 → 9.7.2-next.1

package/dist/chunk-OQNN7EMQ.js

@@ -0,0 +1,238 @@
+"use client";
+import {
+  baseTheme
+} from "./chunk-64NZSUGQ.js";
+
+// src/themes/darkTheme.ts
+var accentColors = {
+  blue: { accentColor: "#3898FF", accentColorForeground: "#FFF" },
+  green: { accentColor: "#66CC00", accentColorForeground: "#000" },
+  orange: { accentColor: "#F6851B", accentColorForeground: "#000" },
+  pink: { accentColor: "#FF7AB8", accentColorForeground: "#000" },
+  purple: { accentColor: "#7A70FF", accentColorForeground: "#FFF" },
+  red: { accentColor: "#F34126", accentColorForeground: "#FFF" },
+  white: { accentColor: "#FFF", accentColorForeground: "#000" }
+};
+var defaultAccentColor = accentColors.white;
+var darkTheme = ({
+  accentColor = defaultAccentColor.accentColor,
+  accentColorForeground = defaultAccentColor.accentColorForeground,
+  customColors,
+  customShadows,
+  ...baseThemeOptions
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: just a bunch of ?? defaults
+} = {}) => ({
+  ...baseTheme(baseThemeOptions),
+  colors: {
+    accentColor,
+    accentColorForeground,
+    actionButtonBorder: "rgba(255, 255, 255, 0.04)",
+    connectButtonBackground: "#000",
+    connectButtonBackgroundError: "#C60000",
+    connectButtonText: "#FFF",
+    connectButtonTextError: "#FFF",
+    connectionIndicator: "#30E000",
+    error: accentColors.red.accentColor,
+    errorBackground: "#F2E6E4",
+    errorBorder: "rgba(243, 65, 38, 0.2)",
+    generalBorder: "#292929",
+    // strokeColor in figma
+    generalBorderDim: "rgba(255, 255, 255, 0.04)",
+    menuItemBackground: "rgba(255, 255, 255, 0.03)",
+    selectedOptionBorder: "rgba(224, 232, 255, 0.1)",
+    focusedOptionBorder: "#8C8C8C",
+    standby: "#F6851B",
+    success: "#66CC00",
+    delayedStatusIcon: customColors?.secondaryText ?? "#8C8C8C",
+    // backward compatibility
+    chainIconBorder: "#fff",
+    // FUNKIT COLORS
+    // modal backgrounds
+    modalBackdrop: "rgba(0, 0, 0, 0.2)",
+    modalBackground: "#000000",
+    modalBorder: "#292929",
+    modalTopbarIcon: "#FFF",
+    modalTopbarIconBackground: customColors?.modalTopbarIconBackground ?? "transparent",
+    modalTopbarIconBackgroundHover: customColors?.modalTopbarIconBackgroundHover ?? customColors?.buttonIconBackgroundHover ?? "#333333",
+    modalTopbarIconBackgroundPressed: customColors?.modalTopbarIconBackgroundPressed ?? customColors?.buttonIconBackgroundPressed ?? "#333333",
+    modalTopbarIconStroke: customColors?.modalTopbarIconStroke ?? customColors?.buttonIconStroke ?? "rgba(255, 255, 255, 0.35)",
+    offBackground: "#1F1F1F",
+    offBackgroundInverse: "#F2F2F2",
+    hoverState: "#333333",
+    lightStroke: "#333333",
+    mediumStroke: "#333333",
+    heavyStroke: "rgba(117, 117, 117, 0.40)",
+    strokeColor: "#333333",
+    //Text
+    primaryText: "#FFF",
+    secondaryText: "#8C8C8C",
+    tertiaryText: "rgba(255, 255, 255, 0.35)",
+    textSelection: "rgba(255, 255, 255, 0.10)",
+    selectedDropdownItemText: customColors?.primaryText ?? "#FFF",
+    copyButtonBackgroundBase: customColors?.offBackground ?? "#1F1F1F",
+    copyButtonBackgroundHover: customColors?.hoverState ?? "#333333",
+    copyButtonBackgroundActive: customColors?.inputBorderHover ?? "#525252",
+    copyButtonBorderBase: customColors?.mediumStroke ?? "#333333",
+    copyButtonBorderHover: customColors?.mediumStroke ?? "#333333",
+    funFeatureListBackgroundBase: customColors?.offBackground ?? "#1F1F1F",
+    funFeatureListBackgroundHover: customColors?.hoverState ?? "#333333",
+    funFeatureListBorderColor: "transparent",
+    funFeatureListBorderColorHover: "transparent",
+    selectedDropdownItemBackground: "transparent",
+    alwaysVisibleLabelBackgroundHover: "transparent",
+    // input
+    inputLabel: customColors?.primaryText ?? "#FFF",
+    inputBackground: "#000000",
+    inputBackgroundHover: customColors?.offBackground ?? "#1F1F1F",
+    inputBorderBase: "#333333",
+    inputBorderHover: "#525252",
+    // tab
+    activeTabBorderColor: "#333333",
+    activeTabBackground: "#333333",
+    // button
+    actionColor: "#FFF",
+    actionColorHover: "rgba(255, 255, 255, 0.8)",
+    actionColorDisabled: "rgba(255, 255, 255, 0.65)",
+    buttonPrimary: accentColor,
+    buttonDisabled: "rgba(255, 255, 255, 0.20)",
+    buttonTextPrimary: "#000000",
+    buttonTextHover: "#000000",
+    buttonTextDisabled: "#000000",
+    buttonWarning: accentColors.red.accentColor,
+    buttonSuccess: "#2EA200",
+    transparent: "transparent",
+    buttonBackgroundTertiary: "#333333",
+    buttonBackgroundHoverTertiary: "#333333",
+    buttonBackgroundDisabledTertiary: "transparent",
+    buttonTextTertiary: "#FFF",
+    buttonTextDisabledTertiary: "rgba(255, 255, 255, 0.65)",
+    buttonBackground: "#FFF",
+    buttonBackgroundHover: "#f2f2f2",
+    buttonBackgroundPressed: "#FFF",
+    buttonBackgroundDisabled: "rgba(255, 255, 255, 0.65)",
+    buttonTextSecondaryDisabled: "rgba(255, 255, 255, 0.65)",
+    buttonTextSecondary: "#FFFFFF",
+    buttonIconBackgroundHover: "#333333",
+    buttonIconBackgroundPressed: "#333333",
+    buttonIconStroke: "rgba(255, 255, 255, 0.35)",
+    buttonBorderTertiary: "transparent",
+    buttonBorderFocusedTertiary: "rgba(255, 255, 255, 0.35)",
+    buttonFocusedOutline: "none",
+    buttonBorderGradient: "none",
+    buttonHoverBorderGradient: "none",
+    buttonDisabledBorderGradient: "none",
+    // TODO: Make common colors when refactoring the design system
+    inputAmountQuickOptionBaseBackground: "#1F1F1F",
+    inputAmountQuickOptionHoverBackground: "#333333",
+    inputAmountQuickOptionActiveBackground: "#333333",
+    inputAmountQuickOptionDisabledBackground: "#333333",
+    inputAmountQuickOptionBaseBorder: "#f2f2f2",
+    inputAmountQuickOptionHoverBorder: "rgba(255, 255, 255, 0.35)",
+    inputAmountQuickOptionActiveBorder: "rgba(255, 255, 255, 0.35)",
+    inputAmountQuickOptionFocusedBorder: "rgba(255, 255, 255, 0.35)",
+    inputAmountFiatDecimalsColor: customColors?.inputAmountFiatDecimalsColor ?? "none",
+    youPayYouReceiveBackground: "#000000",
+    // modalBackground
+    youPayYouReceiveBorder: "#333333",
+    // mediumStroke
+    youPayYouReceivePrimaryText: "#FFF",
+    // primaryText
+    youPayYouReceiveSecondaryText: "#8C8C8C",
+    // secondaryText
+    withdrawalYouWillReceiveLabel: customColors?.withdrawalYouWillReceiveLabel ?? customColors?.primaryText ?? "#FFF",
+    withdrawalYouWillReceiveValueCrypto: customColors?.withdrawalYouWillReceiveValueCrypto ?? customColors?.primaryText ?? "#FFF",
+    withdrawalYouWillReceiveValueUsd: customColors?.withdrawalYouWillReceiveValueUsd ?? customColors?.secondaryText ?? "#8C8C8C",
+    // badges
+    badgeBackgroundSuccess: "rgba(124, 242, 136, 0.1)",
+    badgeBorderSuccess: "rgba(124, 242, 136, 0.2)",
+    badgeTextSuccess: "rgb(124, 242, 136)",
+    newBadgeBackground: "linear-gradient(180deg, rgba(57, 76, 56, 0.55) 0%, rgba(61, 81, 65, 0.55) 100%)",
+    newBadgeBorder: "rgba(122, 221, 122, 0.3)",
+    newBadgeText: "#A4FF9A",
+    approvedBadgeBackground: "linear-gradient(180deg, rgba(236, 255, 234, 0.20) 0%, rgba(228, 255, 233, 0.20) 100%)",
+    approvedBadgeBorder: "rgba(109, 216, 109, 0.08)",
+    approvedBadgeText: "#8FFFA9",
+    failedBadgeBackground: "rgba(255, 61, 61, 0.18)",
+    failedBadgeBorder: "rgba(255, 255, 255, 0.10)",
+    failedBadgeText: "#F88877",
+    announceGradientFrom: "#AAAAAA",
+    announceGradientTo: "#BEBEBE",
+    fiatPendingGradientFrom: "#AAAAAA",
+    fiatPendingGradientTo: "#BEBEBE",
+    fiatSuccessBackgroundFill: "rgba(102, 204, 0, 0.30)",
+    fiatFailedBackgroundFill: "rgba(255, 61, 61, 0.30)",
+    fiatStatusIconBorder: "rgba(255, 255, 255, 0.06)",
+    fiatAccountIconFill: "#002F5E",
+    fiatAccountGradientFrom: "#3A82FE",
+    fiatAccountGradientTo: "#73A7FF",
+    modalHeaderDivider: "#333333",
+    // lightStroke
+    modalFooterDivider: "#333333",
+    // lightStroke
+    spinnerBackground: customColors?.mediumStroke ?? "rgba(0, 0, 0, 0.3)",
+    // 30% buttonTextPrimary
+    spinnerIndicator: customColors?.primaryText ?? "#000",
+    // 100% buttonTextPrimary
+    spinnerBackgroundVerifyAccount: "rgba(0, 0, 0, 0.3)",
+    // 30% buttonTextPrimary
+    spinnerIndicatorVerifyAccount: customColors?.primaryText ?? "#000",
+    // 100% buttonTextPrimary
+    // Override colors
+    ...customColors || {},
+    // option Boxes
+    optionBoxBackground: customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#000",
+    // keeps gradient in SourcePaymentMethodItem if optionBoxBackground differs from modal background
+    optionBoxBackgroundUninteractive: customColors?.optionBoxBackgroundUninteractive ?? "transparent",
+    optionBoxBorderBase: customColors?.optionBoxBorderBase ?? customColors?.mediumStroke ?? "#333333",
+    optionBoxBorderHover: customColors?.optionBoxBorderHover ?? customColors?.mediumStroke ?? "#333333",
+    optionBoxDefaultModeNotActiveBorderBase: customColors?.optionBoxDefaultModeNotActiveBorderBase ?? "transparent",
+    optionBoxDefaultModeNotActiveBorderHover: customColors?.optionBoxDefaultModeNotActiveBorderHover ?? "transparent",
+    dropdownActiveItemBackgroundBase: customColors?.dropdownActiveItemBackgroundBase ?? customColors?.modalBackground ?? "#000000",
+    openDropdownBackgroundColor: customColors?.openDropdownBackgroundColor ?? customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#000",
+    dropdownActiveItemBackgroundHover: customColors?.dropdownActiveItemBackgroundHover ?? customColors?.offBackground ?? "#1F1F1F",
+    dropdownActiveItemBackgroundDisabled: customColors?.dropdownActiveItemBackgroundDisabled ?? "transparent",
+    dropdownActiveItemBorderBase: customColors?.dropdownActiveItemBorderBase ?? customColors?.mediumStroke ?? "#333333",
+    dropdownActiveItemBorderHover: customColors?.dropdownActiveItemBorderHover ?? customColors?.mediumStroke ?? "#333333",
+    dropdownGroupHeader: customColors?.dropdownGroupHeader ?? customColors?.primaryText ?? "#FFF",
+    // primaryText
+    txSummaryBoxBackground: customColors?.txSummaryBoxBackground ?? customColors?.modalBackground ?? "#000",
+    txSummaryBoxBorder: customColors?.txSummaryBoxBorder ?? customColors?.lightStroke ?? "#333333",
+    counterRingColor: customColors?.counterRingColor ?? accentColor,
+    cryptoCashToggleContainerBorderColor: customColors?.cryptoCashToggleContainerBorderColor ?? "transparent",
+    cryptoCashToggleBackground: customColors?.cryptoCashToggleBackground ?? "transparent"
+  },
+  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.24)",
+    dropdown: "0px 0px 0px 1px rgba(255, 255, 255, 0.16), 0px 2px 6px rgba(0, 0, 0, 0.03), 0px 4px 42px rgba(0, 0, 0, 0.06)",
+    notification: "0px 0px 0px 1px rgba(255, 255, 255, 0.20), 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(255, 255, 255, 0.16)",
+    buttonShadow: "none",
+    buttonShadowTertiary: "none",
+    buttonHoverShadow: "none",
+    buttonHoverShadowTertiary: "none",
+    buttonFocusedShadow: "0px 0px 0px 2px rgba(255, 255, 255, 0.25)",
+    buttonFocusedShadowTertiary: "0px 0px 0px 2px rgba(255, 255, 255, 0.25)",
+    buttonDisabledShadow: "none",
+    buttonDisabledShadowTertiary: "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: "dark"
+});
+darkTheme.accentColors = accentColors;
+
+export {
+  darkTheme
+};

package/dist/chunk-S65TG73G.js

@@ -0,0 +1,247 @@
+"use client";
+import {
+  baseTheme
+} from "./chunk-O35RTEEF.js";
+
+// src/themes/darkTheme.ts
+var accentColors = {
+  blue: { accentColor: "#3898FF", accentColorForeground: "#FFF" },
+  green: { accentColor: "#66CC00", accentColorForeground: "#000" },
+  orange: { accentColor: "#F6851B", accentColorForeground: "#000" },
+  pink: { accentColor: "#FF7AB8", accentColorForeground: "#000" },
+  purple: { accentColor: "#7A70FF", accentColorForeground: "#FFF" },
+  red: { accentColor: "#F34126", accentColorForeground: "#FFF" },
+  white: { accentColor: "#FFF", accentColorForeground: "#000" }
+};
+var defaultAccentColor = accentColors.white;
+var darkTheme = ({
+  accentColor = defaultAccentColor.accentColor,
+  accentColorForeground = defaultAccentColor.accentColorForeground,
+  customColors,
+  customShadows,
+  ...baseThemeOptions
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: just a bunch of ?? defaults
+} = {}) => ({
+  ...baseTheme(baseThemeOptions),
+  colors: {
+    accentColor,
+    accentColorForeground,
+    actionButtonBorder: "rgba(255, 255, 255, 0.04)",
+    connectButtonBackground: "#000",
+    connectButtonBackgroundError: "#C60000",
+    connectButtonText: "#FFF",
+    connectButtonTextError: "#FFF",
+    connectionIndicator: "#30E000",
+    error: accentColors.red.accentColor,
+    errorBackground: "#F2E6E4",
+    errorBorder: "rgba(243, 65, 38, 0.2)",
+    generalBorder: "#292929",
+    // strokeColor in figma
+    generalBorderDim: "rgba(255, 255, 255, 0.04)",
+    menuItemBackground: "rgba(255, 255, 255, 0.03)",
+    selectedOptionBorder: "rgba(224, 232, 255, 0.1)",
+    focusedOptionBorder: "#8C8C8C",
+    standby: "#F6851B",
+    success: "#66CC00",
+    delayedStatusIcon: customColors?.secondaryText ?? "#8C8C8C",
+    // backward compatibility
+    chainIconBorder: "#fff",
+    // FUNKIT COLORS
+    // modal backgrounds
+    modalBackdrop: "rgba(0, 0, 0, 0.2)",
+    modalBackground: "#000000",
+    modalBorder: "#292929",
+    modalTopbarIcon: "#FFF",
+    modalTopbarIconBackground: customColors?.modalTopbarIconBackground ?? "transparent",
+    modalTopbarIconBackgroundHover: customColors?.modalTopbarIconBackgroundHover ?? customColors?.buttonIconBackgroundHover ?? "#333333",
+    modalTopbarIconBackgroundPressed: customColors?.modalTopbarIconBackgroundPressed ?? customColors?.buttonIconBackgroundPressed ?? "#333333",
+    modalTopbarIconStroke: customColors?.modalTopbarIconStroke ?? customColors?.buttonIconStroke ?? "rgba(255, 255, 255, 0.35)",
+    offBackground: "#1F1F1F",
+    offBackgroundInverse: "#F2F2F2",
+    hoverState: "#333333",
+    lightStroke: "#333333",
+    mediumStroke: "#333333",
+    heavyStroke: "rgba(117, 117, 117, 0.40)",
+    strokeColor: "#333333",
+    //Text
+    primaryText: "#FFF",
+    secondaryText: "#8C8C8C",
+    tertiaryText: "rgba(255, 255, 255, 0.35)",
+    textSelection: "rgba(255, 255, 255, 0.10)",
+    selectedDropdownItemText: customColors?.primaryText ?? "#FFF",
+    copyButtonBackgroundBase: customColors?.offBackground ?? "#1F1F1F",
+    copyButtonBackgroundHover: customColors?.hoverState ?? "#333333",
+    copyButtonBackgroundActive: customColors?.inputBorderHover ?? "#525252",
+    useConnectedBackgroundBase: customColors?.mediumStroke ?? "#333333",
+    useConnectedBackgroundHover: customColors?.mediumStroke ?? "#333333",
+    copyButtonBorderBase: customColors?.mediumStroke ?? "#333333",
+    copyButtonBorderHover: customColors?.mediumStroke ?? "#333333",
+    funFeatureListBackgroundBase: customColors?.offBackground ?? "#1F1F1F",
+    funFeatureListBackgroundHover: customColors?.hoverState ?? "#333333",
+    funFeatureListBorderColor: "transparent",
+    funFeatureListBorderColorHover: "transparent",
+    selectedDropdownItemBackground: "transparent",
+    alwaysVisibleLabelBackgroundHover: "transparent",
+    // input
+    inputLabel: customColors?.primaryText ?? "#FFF",
+    inputBackground: "#000000",
+    inputBackgroundHover: customColors?.offBackground ?? "#1F1F1F",
+    inputBorderBase: "#333333",
+    inputBorderHover: "#525252",
+    // tab
+    activeTabBorderColor: "#333333",
+    activeTabBackground: "#333333",
+    inactiveTabBorderColor: "transparent",
+    inactiveTabBackgroundBase: "transparent",
+    inactiveTabBackgroundHover: "transparent",
+    inactiveTabBackgroundActive: "transparent",
+    activeTabText: customColors?.primaryText ?? "#FFF",
+    inactiveTabTextBase: customColors?.secondaryText ?? "#8C8C8C",
+    inactiveTabHover: customColors?.primaryText ?? "#FFF",
+    // button
+    actionColor: "#FFF",
+    actionColorHover: "rgba(255, 255, 255, 0.8)",
+    actionColorDisabled: "rgba(255, 255, 255, 0.65)",
+    buttonPrimary: accentColor,
+    buttonDisabled: "rgba(255, 255, 255, 0.20)",
+    buttonTextPrimary: "#000000",
+    buttonTextHover: "#000000",
+    buttonTextDisabled: "#000000",
+    buttonWarning: accentColors.red.accentColor,
+    buttonSuccess: "#2EA200",
+    transparent: "transparent",
+    buttonBackgroundTertiary: "#333333",
+    buttonBackgroundHoverTertiary: "#333333",
+    buttonBackgroundDisabledTertiary: "transparent",
+    buttonTextTertiary: "#FFF",
+    buttonTextDisabledTertiary: "rgba(255, 255, 255, 0.65)",
+    buttonBackground: "#FFF",
+    buttonBackgroundHover: "#f2f2f2",
+    buttonBackgroundPressed: "#FFF",
+    buttonBackgroundDisabled: "rgba(255, 255, 255, 0.65)",
+    buttonTextSecondaryDisabled: "rgba(255, 255, 255, 0.65)",
+    buttonTextSecondary: "#FFFFFF",
+    buttonIconBackgroundHover: "#333333",
+    buttonIconBackgroundPressed: "#333333",
+    buttonIconStroke: "rgba(255, 255, 255, 0.35)",
+    buttonBorderTertiary: "transparent",
+    buttonBorderFocusedTertiary: "rgba(255, 255, 255, 0.35)",
+    buttonFocusedOutline: "none",
+    buttonBorderGradient: "none",
+    buttonHoverBorderGradient: "none",
+    buttonDisabledBorderGradient: "none",
+    // TODO: Make common colors when refactoring the design system
+    inputAmountQuickOptionBaseBackground: "#1F1F1F",
+    inputAmountQuickOptionHoverBackground: "#333333",
+    inputAmountQuickOptionActiveBackground: "#333333",
+    inputAmountQuickOptionDisabledBackground: "#333333",
+    inputAmountQuickOptionBaseBorder: "#f2f2f2",
+    inputAmountQuickOptionHoverBorder: "rgba(255, 255, 255, 0.35)",
+    inputAmountQuickOptionActiveBorder: "rgba(255, 255, 255, 0.35)",
+    inputAmountQuickOptionFocusedBorder: "rgba(255, 255, 255, 0.35)",
+    inputAmountFiatDecimalsColor: customColors?.inputAmountFiatDecimalsColor ?? "none",
+    youPayYouReceiveBackground: "#000000",
+    // modalBackground
+    youPayYouReceiveBorder: "#333333",
+    // mediumStroke
+    youPayYouReceivePrimaryText: "#FFF",
+    // primaryText
+    youPayYouReceiveSecondaryText: "#8C8C8C",
+    // secondaryText
+    withdrawalYouWillReceiveLabel: customColors?.withdrawalYouWillReceiveLabel ?? customColors?.primaryText ?? "#FFF",
+    withdrawalYouWillReceiveValueCrypto: customColors?.withdrawalYouWillReceiveValueCrypto ?? customColors?.primaryText ?? "#FFF",
+    withdrawalYouWillReceiveValueUsd: customColors?.withdrawalYouWillReceiveValueUsd ?? customColors?.secondaryText ?? "#8C8C8C",
+    // badges
+    badgeBackgroundSuccess: "rgba(124, 242, 136, 0.1)",
+    badgeBorderSuccess: "rgba(124, 242, 136, 0.2)",
+    badgeTextSuccess: "rgb(124, 242, 136)",
+    newBadgeBackground: "linear-gradient(180deg, rgba(57, 76, 56, 0.55) 0%, rgba(61, 81, 65, 0.55) 100%)",
+    newBadgeBorder: "rgba(122, 221, 122, 0.3)",
+    newBadgeText: "#A4FF9A",
+    approvedBadgeBackground: "linear-gradient(180deg, rgba(236, 255, 234, 0.20) 0%, rgba(228, 255, 233, 0.20) 100%)",
+    approvedBadgeBorder: "rgba(109, 216, 109, 0.08)",
+    approvedBadgeText: "#8FFFA9",
+    failedBadgeBackground: "rgba(255, 61, 61, 0.18)",
+    failedBadgeBorder: "rgba(255, 255, 255, 0.10)",
+    failedBadgeText: "#F88877",
+    announceGradientFrom: "#AAAAAA",
+    announceGradientTo: "#BEBEBE",
+    fiatPendingGradientFrom: "#AAAAAA",
+    fiatPendingGradientTo: "#BEBEBE",
+    fiatSuccessBackgroundFill: "rgba(102, 204, 0, 0.30)",
+    fiatFailedBackgroundFill: "rgba(255, 61, 61, 0.30)",
+    fiatStatusIconBorder: "rgba(255, 255, 255, 0.06)",
+    fiatAccountIconFill: "#002F5E",
+    fiatAccountGradientFrom: "#3A82FE",
+    fiatAccountGradientTo: "#73A7FF",
+    modalHeaderDivider: "#333333",
+    // lightStroke
+    modalFooterDivider: "#333333",
+    // lightStroke
+    spinnerBackground: customColors?.mediumStroke ?? "rgba(0, 0, 0, 0.3)",
+    // 30% buttonTextPrimary
+    spinnerIndicator: customColors?.primaryText ?? "#000",
+    // 100% buttonTextPrimary
+    spinnerBackgroundVerifyAccount: "rgba(0, 0, 0, 0.3)",
+    // 30% buttonTextPrimary
+    spinnerIndicatorVerifyAccount: customColors?.primaryText ?? "#000",
+    // 100% buttonTextPrimary
+    // Override colors
+    ...customColors || {},
+    // option Boxes
+    optionBoxBackground: customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#000",
+    // keeps gradient in SourcePaymentMethodItem if optionBoxBackground differs from modal background
+    optionBoxBackgroundUninteractive: customColors?.optionBoxBackgroundUninteractive ?? "transparent",
+    optionBoxBorderBase: customColors?.optionBoxBorderBase ?? customColors?.mediumStroke ?? "#333333",
+    optionBoxBorderHover: customColors?.optionBoxBorderHover ?? customColors?.mediumStroke ?? "#333333",
+    optionBoxDefaultModeNotActiveBorderBase: customColors?.optionBoxDefaultModeNotActiveBorderBase ?? "transparent",
+    optionBoxDefaultModeNotActiveBorderHover: customColors?.optionBoxDefaultModeNotActiveBorderHover ?? "transparent",
+    dropdownActiveItemBackgroundBase: customColors?.dropdownActiveItemBackgroundBase ?? customColors?.modalBackground ?? "#000000",
+    openDropdownBackgroundColor: customColors?.openDropdownBackgroundColor ?? customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#000",
+    dropdownActiveItemBackgroundHover: customColors?.dropdownActiveItemBackgroundHover ?? customColors?.offBackground ?? "#1F1F1F",
+    dropdownActiveItemBackgroundDisabled: customColors?.dropdownActiveItemBackgroundDisabled ?? "transparent",
+    dropdownActiveItemBorderBase: customColors?.dropdownActiveItemBorderBase ?? customColors?.mediumStroke ?? "#333333",
+    dropdownActiveItemBorderHover: customColors?.dropdownActiveItemBorderHover ?? customColors?.mediumStroke ?? "#333333",
+    dropdownGroupHeader: customColors?.dropdownGroupHeader ?? customColors?.primaryText ?? "#FFF",
+    // primaryText
+    txSummaryBoxBackground: customColors?.txSummaryBoxBackground ?? customColors?.modalBackground ?? "#000",
+    txSummaryBoxBorder: customColors?.txSummaryBoxBorder ?? customColors?.lightStroke ?? "#333333",
+    counterRingColor: customColors?.counterRingColor ?? accentColor,
+    cryptoCashToggleContainerBorderColor: customColors?.cryptoCashToggleContainerBorderColor ?? "transparent",
+    cryptoCashToggleBackground: customColors?.cryptoCashToggleBackground ?? "transparent"
+  },
+  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.24)",
+    dropdown: "0px 0px 0px 1px rgba(255, 255, 255, 0.16), 0px 2px 6px rgba(0, 0, 0, 0.03), 0px 4px 42px rgba(0, 0, 0, 0.06)",
+    notification: "0px 0px 0px 1px rgba(255, 255, 255, 0.20), 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(255, 255, 255, 0.16)",
+    buttonShadow: "none",
+    buttonShadowTertiary: "none",
+    buttonHoverShadow: "none",
+    buttonHoverShadowTertiary: "none",
+    buttonFocusedShadow: "0px 0px 0px 2px rgba(255, 255, 255, 0.25)",
+    buttonFocusedShadowTertiary: "0px 0px 0px 2px rgba(255, 255, 255, 0.25)",
+    buttonDisabledShadow: "none",
+    buttonDisabledShadowTertiary: "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: "dark"
+});
+darkTheme.accentColors = accentColors;
+
+export {
+  darkTheme
+};