@funkit/connect
Version:
Funkit Connect SDK elevates DeFi apps via web2 sign-ins and one-click checkouts.
194 lines (191 loc) • 7.73 kB
JavaScript
"use client";
import {
baseTheme
} from "./chunk-RJAD5CZH.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",
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",
// 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)",
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)",
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: "rgba(255, 255, 255, 0.3)",
// 30% buttonTextPrimary
spinnerIndicator: "#FFF",
// 100% buttonTextPrimary
spinnerBackgroundVerifyAccount: "rgba(255, 255, 255, 0.3)",
// 30% buttonTextPrimary
spinnerIndicatorVerifyAccount: "#FFF",
// 100% buttonTextPrimary
// Override colors
...customColors || {},
// option Boxes
optionBoxBackground: customColors?.optionBoxBackground ?? customColors?.modalBackground ?? "#FFF"
// keeps gradient in SourcePaymentMethodItem if optionBoxBackground differs from modal background
},
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
};