@frank-auth/react
Version:
Flexible and customizable React UI components for Frank Authentication
253 lines (252 loc) • 6.68 kB
JavaScript
import { generateColorPalette as o, ThemeUtils as p } from "../utils/theme.js";
import { DEFAULT_COLOR_PALETTE as a, DEFAULT_THEME_CONFIG as n } from "./defaults.js";
var y = Object.defineProperty, d = (t, e, r) => e in t ? y(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, c = (t, e, r) => d(t, typeof e != "symbol" ? e + "" : e, r);
function h(t) {
const e = {
...t.colors,
// Invert background colors
background: "#0f172a",
foreground: "#f8fafc",
card: "#1e293b",
cardForeground: "#f8fafc",
popover: "#1e293b",
popoverForeground: "#f8fafc",
muted: "#334155",
mutedForeground: "#94a3b8",
accent: "#334155",
accentForeground: "#f8fafc",
border: "#334155",
input: "#334155",
ring: t.palette.primary.DEFAULT
};
return {
...t,
mode: "dark",
colors: e,
palette: {
...t.palette,
// Adjust primary colors for dark mode
primary: {
...t.palette.primary,
DEFAULT: t.colors.primary[400],
foreground: "#000000"
},
// Adjust secondary colors for dark mode
secondary: {
...t.palette.secondary,
DEFAULT: t.colors.secondary[400],
foreground: "#000000"
}
}
};
}
const u = {
...n,
colors: {
...n.colors,
primary: o("#3b82f6")
},
palette: {
...a,
primary: o("#3b82f6")
}
}, l = {
...n,
colors: {
...n.colors,
primary: o("#8b5cf6"),
secondary: o("#6366f1")
},
palette: {
...a,
primary: o("#8b5cf6"),
secondary: o("#6366f1")
}
}, g = {
...n,
colors: {
...n.colors,
primary: o("#10b981"),
secondary: o("#059669")
},
palette: {
...a,
primary: o("#10b981"),
secondary: o("#059669")
}
}, T = {
...n,
colors: {
...n.colors,
primary: o("#f97316").DEFAULT,
secondary: o("#ea580c").DEFAULT
},
palette: {
...a,
primary: o("#f97316"),
secondary: o("#ea580c")
}
}, E = {
...n,
colors: {
...n.colors,
primary: o("#ec4899").DEFAULT,
secondary: o("#db2777").DEFAULT
},
palette: {
...a,
primary: o("#ec4899"),
secondary: o("#db2777")
}
}, F = {
blue: u,
purple: l,
green: g,
orange: T,
pink: E
};
class m {
constructor(e) {
c(this, "currentTheme"), c(this, "systemPreference"), c(this, "listeners", /* @__PURE__ */ new Set()), this.currentTheme = this.mergeTheme(n, e), this.systemPreference = this.detectSystemPreference(), typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
this.systemPreference = this.detectSystemPreference(), this.updateTheme();
});
}
/**
* Get current theme
*/
getTheme() {
return { ...this.currentTheme };
}
/**
* Set theme configuration
*/
setTheme(e) {
this.currentTheme = this.mergeTheme(this.currentTheme, e), this.updateTheme();
}
/**
* Apply a theme preset
*/
applyPreset(e) {
this.currentTheme = { ...F[e] }, this.updateTheme();
}
/**
* Set theme mode
*/
setMode(e) {
this.currentTheme.mode = e, this.updateTheme();
}
/**
* Get effective theme mode (resolves 'system' to 'light' or 'dark')
*/
getEffectiveMode() {
return this.currentTheme.mode === "system" ? this.systemPreference === "dark" ? "dark" : "light" : this.currentTheme.mode === "dark" ? "dark" : "light";
}
/**
* Apply branding colors to theme
*/
applyBranding(e) {
e.colors?.primary && (this.currentTheme.palette.primary = o(e.colors.primary)), e.colors?.secondary && (this.currentTheme.palette.secondary = o(e.colors.secondary)), e.fonts?.primary && (this.currentTheme.typography.fontFamily.sans = [
e.fonts.primary,
...this.currentTheme.typography.fontFamily.sans
]), this.updateTheme();
}
/**
* Generate CSS variables for the current theme
*/
generateCSSVariables() {
const e = this.getResolvedTheme();
return p.generateCSSVariables(e);
}
/**
* Apply theme to DOM
*/
applyToDOM() {
if (typeof document > "u") return;
const e = this.generateCSSVariables(), r = document.documentElement;
Object.entries(e).forEach(([i, f]) => {
r.style.setProperty(i, f);
});
const s = this.getEffectiveMode();
r.classList.remove("light", "dark"), r.classList.add(s);
}
/**
* Subscribe to theme changes
*/
subscribe(e) {
return this.listeners.add(e), () => {
this.listeners.delete(e);
};
}
// Private methods
detectSystemPreference() {
return typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
mergeTheme(e, r) {
return r ? {
...e,
...r,
colors: { ...e.colors, ...r.colors },
typography: {
...e.typography,
...r.typography,
fontFamily: { ...e.typography.fontFamily, ...r.typography?.fontFamily },
fontSize: { ...e.typography.fontSize, ...r.typography?.fontSize },
fontWeight: { ...e.typography.fontWeight, ...r.typography?.fontWeight }
},
spacing: { ...e.spacing, ...r.spacing },
borderRadius: { ...e.borderRadius, ...r.borderRadius },
shadows: { ...e.shadows, ...r.shadows },
animations: {
...e.animations,
...r.animations,
duration: { ...e.animations.duration, ...r.animations?.duration },
timingFunction: { ...e.animations.timingFunction, ...r.animations?.timingFunction },
keyframes: { ...e.animations.keyframes, ...r.animations?.keyframes }
}
} : { ...e };
}
getResolvedTheme() {
return this.getEffectiveMode() === "dark" && this.currentTheme.mode !== "dark" ? h(this.currentTheme) : this.currentTheme;
}
updateTheme() {
this.applyToDOM(), this.listeners.forEach((e) => e(this.currentTheme));
}
}
function P(t) {
return new m(t);
}
function L(t) {
const r = new m(t).generateCSSVariables();
return `:root {
${Object.entries(r).map(([s, i]) => `${s}: ${i};`).join(`
`)}
}`;
}
function _(t) {
try {
if (t.colors) {
const e = ["primary", "secondary", "background", "foreground"];
for (const r of e)
if (!(r in t.colors))
return !1;
}
return !(t.typography && t.typography.fontFamily && !Array.isArray(t.typography.fontFamily.sans));
} catch {
return !1;
}
}
export {
u as BLUE_THEME,
n as DEFAULT_THEME_CONFIG,
g as GREEN_THEME,
T as ORANGE_THEME,
E as PINK_THEME,
l as PURPLE_THEME,
F as THEME_PRESETS,
m as ThemeManager,
h as createDarkTheme,
P as createThemeManager,
L as getThemeCSS,
_ as validateTheme
};
//# sourceMappingURL=theme.js.map