@frank-auth/react
Version:
Flexible and customizable React UI components for Frank Authentication
383 lines (382 loc) • 9.55 kB
JavaScript
import { useCallback as d, useMemo as f } from "react";
import { useTheme as U } from "../provider/theme-provider.js";
import { useAuth as w } from "./use-auth.js";
const T = {
blue: {
colors: {
primary: {
50: "#eff6ff",
100: "#dbeafe",
200: "#bfdbfe",
300: "#93c5fd",
400: "#60a5fa",
500: "#3b82f6",
600: "#2563eb",
700: "#1d4ed8",
800: "#1e40af",
900: "#1e3a8a",
950: "#172554",
DEFAULT: "#3b82f6",
foreground: "#ffffff"
}
}
},
purple: {
colors: {
primary: {
50: "#faf5ff",
100: "#f3e8ff",
200: "#e9d5ff",
300: "#d8b4fe",
400: "#c084fc",
500: "#a855f7",
600: "#9333ea",
700: "#7c3aed",
800: "#6b21a8",
900: "#581c87",
950: "#3b0764",
DEFAULT: "#a855f7",
foreground: "#ffffff"
}
}
},
green: {
colors: {
primary: {
50: "#f0fdf4",
100: "#dcfce7",
200: "#bbf7d0",
300: "#86efac",
400: "#4ade80",
500: "#22c55e",
600: "#16a34a",
700: "#15803d",
800: "#166534",
900: "#14532d",
950: "#052e16",
DEFAULT: "#22c55e",
foreground: "#ffffff"
}
}
},
orange: {
colors: {
primary: {
50: "#fff7ed",
100: "#ffedd5",
200: "#fed7aa",
300: "#fdba74",
400: "#fb923c",
500: "#f97316",
600: "#ea580c",
700: "#c2410c",
800: "#9a3412",
900: "#7c2d12",
950: "#431407",
DEFAULT: "#f97316",
foreground: "#ffffff"
}
}
},
pink: {
colors: {
primary: {
50: "#fdf2f8",
100: "#fce7f3",
200: "#fbcfe8",
300: "#f9a8d4",
400: "#f472b6",
500: "#ec4899",
600: "#db2777",
700: "#be185d",
800: "#9d174d",
900: "#831843",
950: "#500724",
DEFAULT: "#ec4899",
foreground: "#ffffff"
}
}
},
red: {
colors: {
primary: {
50: "#fef2f2",
100: "#fee2e2",
200: "#fecaca",
300: "#fca5a5",
400: "#f87171",
500: "#ef4444",
600: "#dc2626",
700: "#b91c1c",
800: "#991b1b",
900: "#7f1d1d",
950: "#450a0a",
DEFAULT: "#ef4444",
foreground: "#ffffff"
}
}
},
gray: {
colors: {
primary: {
50: "#f9fafb",
100: "#f3f4f6",
200: "#e5e7eb",
300: "#d1d5db",
400: "#9ca3af",
500: "#6b7280",
600: "#4b5563",
700: "#374151",
800: "#1f2937",
900: "#111827",
950: "#030712",
DEFAULT: "#6b7280",
foreground: "#ffffff"
}
}
}
};
function b() {
const e = U(), { activeOrganization: l } = w(), t = d(() => {
e.mode === "light" ? e.setMode("dark") : e.mode === "dark" ? e.setMode("system") : e.setMode("light");
}, [e]), n = d(() => e.setMode("light"), [e]), a = d(() => e.setMode("dark"), [e]), o = d(() => e.setMode("system"), [e]), r = f(() => e.theme.colors, [e.theme.colors]), c = f(() => r.primary.DEFAULT, [r.primary]), y = f(() => r.secondary.DEFAULT, [r.secondary]), m = f(() => r.background, [r.background]), g = f(() => r.foreground, [r.foreground]), p = f(() => e.theme.typography, [e.theme.typography]), F = f(() => p.fontFamily.sans, [p.fontFamily.sans]), h = f(() => e.theme.spacing, [e.theme.spacing]), S = f(() => e.theme.borderRadius, [e.theme.borderRadius]), C = f(() => e.theme.shadows, [e.theme.shadows]), M = d((s, i) => {
const u = r[s];
return u ? i && typeof u == "object" ? u[i] || u.DEFAULT || "" : typeof u == "string" ? u : u.DEFAULT || "" : "";
}, [r]), z = d((s) => {
const i = p.fontSize[s];
return Array.isArray(i) ? i[0] : i || "";
}, [p.fontSize]), L = d((s) => h[s] || "", [h]), E = d((s) => S[s] || "", [S]), A = d((s) => C[s] || "", [C]), R = d((s) => {
const i = T[s];
i && e.setTheme(i);
}, [e]), B = f(() => Object.keys(T), []), D = d((s) => {
if (s.settings?.branding) {
const i = {
primaryColor: s.settings.branding.primaryColor,
secondaryColor: s.settings.branding.secondaryColor,
logo: s.logoUrl,
favicon: s.settings.branding.favicon,
customCSS: s.settings.branding.customCSS
};
e.applyBranding(i);
}
}, [e]), k = f(() => !!(e.organizationBranding?.primaryColor || e.organizationBranding?.logo || e.organizationBranding?.customCSS), [e.organizationBranding]);
return {
// Theme state
theme: e.theme,
mode: e.mode,
effectiveMode: e.effectiveMode,
isSystemMode: e.isSystemMode,
isCustomized: e.isCustomized,
// CSS variables and styling
cssVariables: e.cssVariables,
generateCSS: e.generateCSS,
// Theme management
setTheme: e.setTheme,
setMode: e.setMode,
resetTheme: e.resetTheme,
// Organization branding
organizationBranding: e.organizationBranding,
applyBranding: e.applyBranding,
applyOrganizationBranding: D,
isCustomBranded: k,
// Color management
colors: r,
primaryColor: c,
secondaryColor: y,
backgroundColor: m,
foregroundColor: g,
// Typography
typography: p,
fontFamily: F,
// Spacing and layout
spacing: h,
borderRadius: S,
shadows: C,
// Utilities
getColorValue: M,
getFontSize: z,
getSpacing: L,
getBorderRadius: E,
getShadow: A,
// Mode switching
toggleMode: t,
setLightMode: n,
setDarkMode: a,
setSystemMode: o,
// Theme presets
applyPreset: R,
availablePresets: B
};
}
function $() {
const {
colors: e,
primaryColor: l,
secondaryColor: t,
backgroundColor: n,
foregroundColor: a,
getColorValue: o,
setTheme: r,
theme: c
} = b(), y = d((g) => {
r({
colors: {
...c.colors,
primary: {
...c.colors.primary,
DEFAULT: g
}
}
});
}, [r, c.colors]), m = d((g) => {
r({
colors: {
...c.colors,
secondary: {
...c.colors.secondary,
DEFAULT: g
}
}
});
}, [r, c.colors]);
return {
colors: e,
primaryColor: l,
secondaryColor: t,
backgroundColor: n,
foregroundColor: a,
getColorValue: o,
setPrimaryColor: y,
setSecondaryColor: m,
// Color palette helpers
getPrimaryShade: (g) => o("primary", g),
getSecondaryShade: (g) => o("secondary", g),
getSuccessColor: () => o("success"),
getWarningColor: () => o("warning"),
getDangerColor: () => o("danger"),
getInfoColor: () => o("info")
};
}
function x() {
const {
typography: e,
fontFamily: l,
getFontSize: t,
setTheme: n,
theme: a
} = b(), o = d((r) => {
n({
typography: {
...a.typography,
fontFamily: {
...a.typography.fontFamily,
sans: r
}
}
});
}, [n, a.typography]);
return {
typography: e,
fontFamily: l,
getFontSize: t,
setFontFamily: o,
// Typography helpers
fontSizes: e.fontSize,
fontWeights: e.fontWeight,
lineHeights: e.lineHeight,
letterSpacing: e.letterSpacing,
// Quick size getters
getSmallSize: () => t("sm"),
getBaseSize: () => t("base"),
getLargeSize: () => t("lg"),
getXLSize: () => t("xl")
};
}
function O() {
const {
spacing: e,
borderRadius: l,
shadows: t,
getSpacing: n,
getBorderRadius: a,
getShadow: o
} = b();
return {
spacing: e,
borderRadius: l,
shadows: t,
getSpacing: n,
getBorderRadius: a,
getShadow: o,
// Spacing helpers
getSmallSpacing: () => n("sm"),
getMediumSpacing: () => n("md"),
getLargeSpacing: () => n("lg"),
// Border radius helpers
getSmallRadius: () => a("sm"),
getMediumRadius: () => a("md"),
getLargeRadius: () => a("lg"),
getFullRadius: () => a("full"),
// Shadow helpers
getSmallShadow: () => o("sm"),
getMediumShadow: () => o("md"),
getLargeShadow: () => o("lg")
};
}
function W() {
const {
cssVariables: e,
generateCSS: l,
getColorValue: t,
getFontSize: n,
getSpacing: a,
getBorderRadius: o,
getShadow: r
} = b(), c = d((m) => m({
colors: { get: t },
fontSize: { get: n },
spacing: { get: a },
borderRadius: { get: o },
shadows: { get: r }
}), [t, n, a, o, r]), y = d((m) => e[`--${m.replace(".", "-")}`] || "", [e]);
return {
cssVariables: e,
generateCSS: l,
createStyles: c,
getThemeValue: y,
// Pre-built common styles
cardStyles: {
backgroundColor: t("card"),
color: t("cardForeground"),
borderRadius: o("lg"),
boxShadow: r("md"),
padding: a("lg")
},
buttonStyles: {
backgroundColor: t("primary"),
color: t("primaryForeground"),
borderRadius: o("md"),
padding: `${a("sm")} ${a("md")}`,
fontSize: n("base"),
fontWeight: "500",
border: "none",
cursor: "pointer"
},
inputStyles: {
backgroundColor: t("input"),
color: t("foreground"),
border: `1px solid ${t("border")}`,
borderRadius: o("md"),
padding: a("sm"),
fontSize: n("base")
}
};
}
export {
b as useTheme,
$ as useThemeColors,
O as useThemeLayout,
W as useThemeStyles,
x as useThemeTypography
};
//# sourceMappingURL=use-theme.js.map