Function: createDeepThemeOverride()

createDeepThemeOverride(baseTheme: ThemeConfig, deepOverrides: { animation?: { duration?: { fast?: string; normal?: string; slow?: string; }; easing?: { easeIn?: string; easeInOut?: string; easeOut?: string; linear?: string; }; }; borderRadius?: { full?: string; lg?: string; md?: string; none?: string; sm?: string; xl?: string; }; colors?: { background?: { default?: string; elevated?: string; paper?: string; primary?: string; secondary?: string; }; border?: { default?: string; disabled?: string; error?: string; focus?: string; hover?: string; success?: string; warning?: string; }; hover?: { background?: string; border?: string; primary?: string; secondary?: string; text?: string; }; primary?: { error?: string; info?: string; primary?: string; secondary?: string; success?: string; warning?: string; }; status?: { down?: string; paused?: string; pending?: string; unknown?: string; up?: string; }; text?: { disabled?: string; error?: string; inverse?: string; muted?: string; primary?: string; success?: string; warning?: string; }; }; components?: { button?: { borderRadius?: string; fontSize?: string; fontWeight?: number; padding?: string; }; card?: { borderRadius?: string; padding?: string; shadow?: string; }; input?: { borderRadius?: string; fontSize?: string; padding?: string; }; modal?: { backdropColor?: string; borderRadius?: string; shadow?: string; }; }; shadows?: { lg?: string; md?: string; none?: string; sm?: string; xl?: string; }; spacing?: { lg?: string; md?: string; sm?: string; xl?: string; xs?: string; xxl?: string; xxs?: string; }; typography?: { fontFamily?: { body?: string; heading?: string; mono?: string; }; fontSize?: { body?: string; caption?: string; h1?: string; h2?: string; h3?: string; h4?: string; h5?: string; h6?: string; large?: string; small?: string; }; fontWeight?: { bold?: number; light?: number; medium?: number; normal?: number; semibold?: number; }; lineHeight?: { body?: string; heading?: string; tight?: string; }; }; }): ThemeConfig

Defined in: shared/types/themeConfig.ts:871

Creates a deeply customized theme using PartialDeep pattern for maximum flexibility.

Parameters

baseTheme

ThemeConfig

Base theme configuration

deepOverrides

Deep partial overrides using PartialDeep pattern

animation?

{ duration?: { fast?: string; normal?: string; slow?: string; }; easing?: { easeIn?: string; easeInOut?: string; easeOut?: string; linear?: string; }; }

Animation and transition configuration

animation.duration?

{ fast?: string; normal?: string; slow?: string; }

Animation duration values

animation.duration.fast?

string

animation.duration.normal?

string

animation.duration.slow?

string

animation.easing?

{ easeIn?: string; easeInOut?: string; easeOut?: string; linear?: string; }

Animation easing functions

animation.easing.easeIn?

string

animation.easing.easeInOut?

string

animation.easing.easeOut?

string

animation.easing.linear?

string

borderRadius?

{ full?: string; lg?: string; md?: string; none?: string; sm?: string; xl?: string; }

Border radius configuration

borderRadius.full?

string

Full/circular border radius

borderRadius.lg?

string

Large border radius

borderRadius.md?

string

Medium border radius

borderRadius.none?

string

No border radius

borderRadius.sm?

string

Small border radius

borderRadius.xl?

string

Extra large border radius

colors?

{ background?: { default?: string; elevated?: string; paper?: string; primary?: string; secondary?: string; }; border?: { default?: string; disabled?: string; error?: string; focus?: string; hover?: string; success?: string; warning?: string; }; hover?: { background?: string; border?: string; primary?: string; secondary?: string; text?: string; }; primary?: { error?: string; info?: string; primary?: string; secondary?: string; success?: string; warning?: string; }; status?: { down?: string; paused?: string; pending?: string; unknown?: string; up?: string; }; text?: { disabled?: string; error?: string; inverse?: string; muted?: string; primary?: string; success?: string; warning?: string; }; }

Color configuration

colors.background?

{ default?: string; elevated?: string; paper?: string; primary?: string; secondary?: string; }

Background color configuration

colors.background.default?

string

Default background color

colors.background.elevated?

string

Elevated surface background color

colors.background.paper?

string

Paper/card background color

colors.background.primary?

string

Primary background color

colors.background.secondary?

string

Secondary background color

colors.border?

{ default?: string; disabled?: string; error?: string; focus?: string; hover?: string; success?: string; warning?: string; }

Border color configuration

colors.border.default?

string

Default border color

colors.border.disabled?

string

Disabled state border color

colors.border.error?

string

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Error state border color

colors.border.focus?

string

Focus state border color

colors.border.hover?

string

Hover state border color

colors.border.success?

string

Success state border color

colors.border.warning?

string

Warning state border color

colors.hover?

{ background?: string; border?: string; primary?: string; secondary?: string; text?: string; }

Hover state color configuration

colors.hover.background?

string

Background color on hover

colors.hover.border?

string

Border color on hover

colors.hover.primary?

string

Primary color on hover

colors.hover.secondary?

string

Secondary color on hover

colors.hover.text?

string

Text color on hover

colors.primary?

{ error?: string; info?: string; primary?: string; secondary?: string; success?: string; warning?: string; }

Primary color palette

colors.primary.error?

string

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Error state color

colors.primary.info?

string

Info state color

colors.primary.primary?

string

Primary brand color

colors.primary.secondary?

string

Secondary brand color

colors.primary.success?

string

Success state color

colors.primary.warning?

string

Warning state color

colors.status?

{ down?: string; paused?: string; pending?: string; unknown?: string; up?: string; }

Status indicator colors

colors.status.down?

string

Down/error status color

colors.status.paused?

string

Paused status color

colors.status.pending?

string

Pending status color

colors.status.unknown?

string

Unknown status color

colors.status.up?

string

Up/success status color

colors.text?

{ disabled?: string; error?: string; inverse?: string; muted?: string; primary?: string; success?: string; warning?: string; }

Text color configuration

colors.text.disabled?

string

Disabled text color

colors.text.error?

string

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Error text color

colors.text.inverse?

string

Inverse text color (for dark backgrounds)

colors.text.muted?

string

Muted/secondary text color

colors.text.primary?

string

Primary text color

colors.text.success?

string

Success text color

colors.text.warning?

string

Warning text color

components?

{ button?: { borderRadius?: string; fontSize?: string; fontWeight?: number; padding?: string; }; card?: { borderRadius?: string; padding?: string; shadow?: string; }; input?: { borderRadius?: string; fontSize?: string; padding?: string; }; modal?: { backdropColor?: string; borderRadius?: string; shadow?: string; }; }

Component-specific styling

components.button?

{ borderRadius?: string; fontSize?: string; fontWeight?: number; padding?: string; }

Button component styling

components.button.borderRadius?

string

components.button.fontSize?

string

components.button.fontWeight?

number

components.button.padding?

string

components.card?

{ borderRadius?: string; padding?: string; shadow?: string; }

Card component styling

components.card.borderRadius?

string

components.card.padding?

string

components.card.shadow?

string

components.input?

{ borderRadius?: string; fontSize?: string; padding?: string; }

Input component styling

components.input.borderRadius?

string

components.input.fontSize?

string

components.input.padding?

string

components.modal?

{ backdropColor?: string; borderRadius?: string; shadow?: string; }

Modal component styling

components.modal.backdropColor?

string

components.modal.borderRadius?

string

components.modal.shadow?

string

shadows?

{ lg?: string; md?: string; none?: string; sm?: string; xl?: string; }

Shadow configuration

shadows.lg?

string

Large shadow

shadows.md?

string

Medium shadow

shadows.none?

string

No shadow

shadows.sm?

string

Small shadow

shadows.xl?

string

Extra large shadow

spacing?

{ lg?: string; md?: string; sm?: string; xl?: string; xs?: string; xxl?: string; xxs?: string; }

Spacing configuration

spacing.lg?

string

Large spacing value

spacing.md?

string

Medium spacing value

spacing.sm?

string

Small spacing value

spacing.xl?

string

Extra large spacing value

spacing.xs?

string

Extra small spacing value

spacing.xxl?

string

Extra extra large spacing value

spacing.xxs?

string

Extra extra small spacing value

typography?

{ fontFamily?: { body?: string; heading?: string; mono?: string; }; fontSize?: { body?: string; caption?: string; h1?: string; h2?: string; h3?: string; h4?: string; h5?: string; h6?: string; large?: string; small?: string; }; fontWeight?: { bold?: number; light?: number; medium?: number; normal?: number; semibold?: number; }; lineHeight?: { body?: string; heading?: string; tight?: string; }; }

Typography configuration

typography.fontFamily?

{ body?: string; heading?: string; mono?: string; }

Font family configuration

typography.fontFamily.body?

string

typography.fontFamily.heading?

string

typography.fontFamily.mono?

string

typography.fontSize?

{ body?: string; caption?: string; h1?: string; h2?: string; h3?: string; h4?: string; h5?: string; h6?: string; large?: string; small?: string; }

Font size configuration

typography.fontSize.body?

string

typography.fontSize.caption?

string

typography.fontSize.h1?

string

typography.fontSize.h2?

string

typography.fontSize.h3?

string

typography.fontSize.h4?

string

typography.fontSize.h5?

string

typography.fontSize.h6?

string

typography.fontSize.large?

string

typography.fontSize.small?

string

typography.fontWeight?

{ bold?: number; light?: number; medium?: number; normal?: number; semibold?: number; }

Font weight configuration

typography.fontWeight.bold?

number

typography.fontWeight.light?

number

typography.fontWeight.medium?

number

typography.fontWeight.normal?

number

typography.fontWeight.semibold?

number

typography.lineHeight?

{ body?: string; heading?: string; tight?: string; }

Line height configuration

typography.lineHeight.body?

string

typography.lineHeight.heading?

string

typography.lineHeight.tight?

string

Returns

ThemeConfig

Theme configuration with deeply merged overrides

Remarks

Uses type-fest's PartialDeep to allow modification of any nested property without requiring complete object structures. This is ideal for fine-grained theme customization where only specific values need to be changed.

Example

const customTheme = createDeepThemeOverride(baseTheme, {
    colors: {
        text: { primary: "#1a1a1a" }, // Only change text primary color
        background: { primary: "#ffffff" }, // Only change background primary
    },
    typography: {
        fontSize: { h1: "40px" }, // Only change h1 font size
    },
});