39 lines
1.5 KiB
TypeScript
39 lines
1.5 KiB
TypeScript
import { createTheme, type MantineColorsTuple, type MantineThemeOverride } from '@mantine/core'
|
|
import { generateColors } from '@mantine/colors-generator'
|
|
import base from './base.json'
|
|
import active from './active.json'
|
|
import { palettes } from './palettes'
|
|
|
|
export type Palette = {
|
|
name: string
|
|
description?: string
|
|
primaryColor?: string
|
|
bases?: Record<string, string>
|
|
}
|
|
|
|
// Each palette extends the shared base (fonts, radius, component defaults) and
|
|
// auto-expands its `bases` hexes into full 10-shade Mantine scales, so a palette
|
|
// only declares one colour per semantic role. Deterministic, so a previewed
|
|
// palette and a persisted one render identically.
|
|
export const buildTheme = (palette: Palette): MantineThemeOverride => {
|
|
const colors: Record<string, MantineColorsTuple> = Object.fromEntries(
|
|
Object.entries(palette.bases ?? {}).map(([role, hex]) => [role, generateColors(hex)]),
|
|
)
|
|
return createTheme({
|
|
...(base as MantineThemeOverride),
|
|
...(palette.primaryColor ? { primaryColor: palette.primaryColor } : {}),
|
|
...(Object.keys(colors).length ? { colors } : {}),
|
|
})
|
|
}
|
|
|
|
export const themes: Record<string, MantineThemeOverride> = Object.fromEntries(
|
|
Object.entries(palettes).map(([id, palette]) => [id, buildTheme(palette as Palette)]),
|
|
)
|
|
|
|
export { palettes }
|
|
export const activeId = active.id
|
|
export const activeTheme: MantineThemeOverride = themes[active.id] ?? themes.default
|
|
|
|
// Back-compat: existing imports of `theme` resolve to the active palette.
|
|
export const theme = activeTheme
|