@funkit/connect
Version:
Funkit Connect SDK elevates DeFi apps via web2 sign-ins and one-click checkouts.
253 lines (250 loc) • 12.9 kB
JavaScript
"use client";
import {
baseTheme
} from "./chunk-4YEAUICE.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",
secondaryBackground: "#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
optionBoxBorderedBackground: customColors?.optionBoxBorderedBackground ?? customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#000",
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",
modalBackgroundCheckoutComplete: customColors?.modalBackgroundCheckoutComplete ?? customColors?.modalBackground ?? "#000",
counterRingColor: customColors?.counterRingColor ?? accentColor,
cryptoCashToggleContainerBorderColor: customColors?.cryptoCashToggleContainerBorderColor ?? "transparent",
cryptoCashToggleBackground: customColors?.cryptoCashToggleBackground ?? "transparent",
qrCodeBackground: customColors?.qrCodeBackground ?? customColors?.modalBackground ?? "#000000",
qrCodeForeground: customColors?.qrCodeForeground ?? customColors?.primaryText ?? "#FFFFFF"
},
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
};