77 lines
3.3 KiB
TypeScript
77 lines
3.3 KiB
TypeScript
/**
|
|
* Fiber Direkt — Shared Theme Utilities
|
|
*
|
|
* Extracts the repeated sectionBgMap / headingColor / bodyColor logic
|
|
* that was duplicated across 15+ block components into a single source of truth.
|
|
*
|
|
* Usage in any block:
|
|
* import { sectionBg, isExplicitDark, headingColor, bodyColor, mutedColor } from '@/utilities/fdTheme'
|
|
*
|
|
* const bg = sectionBg(sectionBackground)
|
|
* const dark = isExplicitDark(sectionBackground)
|
|
* const hClr = headingColor(dark)
|
|
*/
|
|
|
|
/* ── Section backgrounds ─────────────────────────────────────────────── */
|
|
|
|
const sectionBgMap: Record<string, string> = {
|
|
white: 'bg-white dark:bg-fd-navy',
|
|
gray: 'bg-fd-gray-light dark:bg-fd-navy',
|
|
navy: 'bg-fd-navy',
|
|
yellow: 'bg-fd-yellow',
|
|
navyGradient: 'bg-gradient-to-br from-fd-navy via-[#153350] to-fd-navy',
|
|
transparent: 'bg-transparent',
|
|
}
|
|
|
|
export const sectionBg = (bg?: string | null): string =>
|
|
sectionBgMap[bg || 'white'] || sectionBgMap.white
|
|
|
|
/* ── Dark detection ──────────────────────────────────────────────────── */
|
|
|
|
export const isExplicitDark = (bg?: string | null): boolean =>
|
|
bg === 'navy' || bg === 'navyGradient'
|
|
|
|
/* ── Text colors ─────────────────────────────────────────────────────── */
|
|
|
|
/** Heading: yellow on dark, navy on light (auto-adapts to OS dark mode) */
|
|
export const headingColor = (dark: boolean): string =>
|
|
dark ? 'text-fd-yellow' : 'text-fd-navy dark:text-fd-yellow'
|
|
|
|
/** Body: white on dark, navy on light */
|
|
export const bodyColor = (dark: boolean): string =>
|
|
dark ? 'text-white' : 'text-fd-navy dark:text-white'
|
|
|
|
/** Muted / secondary body text */
|
|
export const mutedColor = (dark: boolean): string =>
|
|
dark ? 'text-white/60' : 'text-fd-navy/60 dark:text-white/60'
|
|
|
|
/** Subdued body (80% opacity) */
|
|
export const bodySubduedColor = (dark: boolean): string =>
|
|
dark ? 'text-white/80' : 'text-fd-navy/80 dark:text-white/80'
|
|
|
|
/** Border color */
|
|
export const borderColor = (dark: boolean): string =>
|
|
dark ? 'border-white/20' : 'border-fd-navy/10 dark:border-white/20'
|
|
|
|
/** Link color */
|
|
export const linkColor = (dark: boolean): string =>
|
|
dark
|
|
? 'underline underline-offset-2 hover:text-fd-yellow transition-colors'
|
|
: 'underline underline-offset-2 hover:text-fd-navy dark:hover:text-fd-yellow transition-colors'
|
|
|
|
/** Label text (for form labels etc.) */
|
|
export const labelColor = (dark: boolean): string =>
|
|
dark ? 'text-white' : 'text-fd-navy dark:text-white'
|
|
|
|
/** Error text */
|
|
export const errorColor = (dark: boolean): string =>
|
|
dark ? 'text-red-300' : 'text-red-600 dark:text-red-300'
|
|
|
|
/* ── Responsive border-radius ────────────────────────────────────────── */
|
|
|
|
/** Signature FD card radius — responsive so 375px screens don't get capsule cards */
|
|
export const fdCardRadius = 'rounded-[32px] md:rounded-[50px] lg:rounded-[70px]'
|
|
|
|
/** Smaller radius for sub-elements (images inside cards, data tables, etc.) */
|
|
export const fdCardRadiusSm = 'rounded-[20px] md:rounded-[30px] lg:rounded-[40px]'
|