tharikida-ui
Version:
A modern, lightweight React UI component library with built-in theming, accessibility, and full TypeScript support. Create beautiful, responsive, and customizable web apps faster with ready-to-use components for any project.
75 lines (74 loc) • 3.47 kB
JavaScript
"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { createContext, useContext } from "react";
const defaultTheme = {
primaryColor: "#2ecc71",
secondaryColor: "#3498db",
hoverColor: "#62f39f",
textColor: "#000000",
backgroundColor: "#fff",
fontSize: 16,
fontFamily: "Montserrat, sans-serif",
spacingfactor: 4,
borderColor: "#000000",
shadowColor: "#000000",
cornerRadius: 0,
borderWidth: "1px",
borderStyle: "solid",
fontWeight: "normal",
lineHeight: "normal",
letterSpacing: "normal",
transitionDuration: "0.3s",
padding: "10px",
margin: "0px",
shadowOffsetX: "4px",
shadowOffsetY: "2px",
shadowBlur: "0px",
shadowSpread: "0px",
shadowInset: false,
};
const ThemeContext = createContext(defaultTheme);
export const ThemeProvider = ({ children, primaryColor, secondaryColor, textColor, backgroundColor, fontSize, fontFamily, spacingfactor, borderColor, shadowColor, cornerRadius, borderWidth, borderStyle, fontWeight, lineHeight, letterSpacing, transitionDuration, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginTop, marginRight, marginBottom, marginLeft, shadowOffsetX, shadowOffsetY, shadowBlur, shadowSpread, shadowInset, hoverColor, }) => {
const theme = {
primaryColor: primaryColor || defaultTheme.primaryColor,
secondaryColor: secondaryColor || defaultTheme.secondaryColor,
textColor: textColor || defaultTheme.textColor,
backgroundColor: backgroundColor || defaultTheme.backgroundColor,
fontSize: fontSize || defaultTheme.fontSize,
fontFamily: fontFamily || defaultTheme.fontFamily,
spacingfactor: spacingfactor || defaultTheme.spacingfactor,
borderColor: borderColor || defaultTheme.borderColor,
shadowColor: shadowColor || defaultTheme.shadowColor,
cornerRadius: typeof cornerRadius === "number"
? cornerRadius
: defaultTheme.cornerRadius,
borderWidth: borderWidth ?? defaultTheme.borderWidth,
borderStyle: borderStyle ?? defaultTheme.borderStyle,
fontWeight: fontWeight ?? defaultTheme.fontWeight,
lineHeight: lineHeight ?? defaultTheme.lineHeight,
letterSpacing: letterSpacing ?? defaultTheme.letterSpacing,
transitionDuration: transitionDuration ?? defaultTheme.transitionDuration,
padding: padding ?? defaultTheme.padding,
paddingTop: paddingTop ?? undefined,
paddingRight: paddingRight ?? undefined,
paddingBottom: paddingBottom ?? undefined,
paddingLeft: paddingLeft ?? undefined,
margin: margin ?? defaultTheme.margin,
marginTop: marginTop ?? undefined,
marginRight: marginRight ?? undefined,
marginBottom: marginBottom ?? undefined,
marginLeft: marginLeft ?? undefined,
shadowOffsetX: shadowOffsetX ?? defaultTheme.shadowOffsetX,
shadowOffsetY: shadowOffsetY ?? defaultTheme.shadowOffsetY,
shadowBlur: shadowBlur ?? defaultTheme.shadowBlur,
shadowSpread: shadowSpread ?? defaultTheme.shadowSpread,
shadowInset: shadowInset ?? defaultTheme.shadowInset,
hoverColor: hoverColor || defaultTheme.hoverColor,
};
return (_jsx(ThemeContext.Provider, { value: theme, children: children }));
};
export const useTheme = () => {
const context = useContext(ThemeContext);
return context;
};
export default ThemeProvider;