Function: createTheme()

createTheme(__namedParameters): ThemeTokensV2

Defined in: createTheme.ts:85

Creates a fully resolved theme by merging partial overrides into a base theme.

Parameters

__namedParameters

base?

ThemeTokensV2 = defaultTheme

Base theme to extend. Defaults to defaultTheme.

overrides?

{ core?: { borders?: { style?: { dashed?: string; dotted?: string; none?: string; solid?: string; }; width?: { 0?: string; hairline?: string; md?: string; sm?: string; }; }; breakpoints?: { 2xl?: string; lg?: string; md?: string; sm?: string; xl?: string; xs?: string; }; colors?: {[key: string]: { accent?: string; complimentary?: string; darkNeutral?: string; lightNeutral?: string; main?: string; } | { black?: string; gray100?: string; gray200?: string; gray300?: string; gray50?: string; gray500?: string; gray700?: string; gray900?: string; white?: string; } | { 100?: string; 200?: string; 300?: string; 400?: string; 500?: string; 600?: string; 700?: string; } | undefined; brand?: { accent?: string; complimentary?: string; darkNeutral?: string; lightNeutral?: string; main?: string; }; neutral?: { black?: string; gray100?: string; gray200?: string; gray300?: string; gray50?: string; gray500?: string; gray700?: string; gray900?: string; white?: string; }; red?: { 100?: string; 200?: string; 300?: string; 400?: string; 500?: string; 600?: string; 700?: string; }; }; elevation?: { level?: { 0?: string; 1?: string; 2?: string; 3?: string; 4?: string; 5?: string; }; }; font?: { family?: { mono?: string; sans?: string; serif?: string; }; leading?: { normal?: number; relaxed?: number; snug?: number; tight?: number; }; numeric?: { proportional?: string; tabular?: string; }; opticalSizing?: { auto?: string; none?: string; }; tracking?: { normal?: string; tight?: string; wide?: string; }; weight?: { bold?: number; medium?: number; regular?: number; semibold?: number; }; }; motion?: { duration?: { lg?: string; md?: string; sm?: string; xl?: string; xs?: string; }; easing?: { accelerate?: string; decelerate?: string; linear?: string; standard?: string; }; }; opacity?: { 0?: number; 100?: number; 25?: number; 50?: number; 75?: number; }; radii?: { full?: string; lg?: string; md?: string; none?: string; sm?: string; xs?: string; }; size?: { behavior?: { auto?: string; fit?: string; full?: string; max?: string; min?: string; }; ramp?: { layout?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; }; ui?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; 7?: ...; 8?: ...; }; }; relative?: { em?: string; rem?: string; }; viewport?: { heightFull?: string; widthFull?: string; }; }; space?: { 0?: string; 1?: string; 12?: string; 16?: string; 2?: string; 3?: string; 4?: string; 6?: string; 8?: string; unit?: string; unitCq?: string; }; type?: { ramp?: { display?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; }; text?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; }; }; }; zIndex?: { base?: number; dropdown?: number; modal?: number; overlay?: number; sticky?: number; toast?: number; tooltip?: number; }; }; semantic?: { border?: { divider?: { style?: `{${(...)}}`; width?: `{${(...)}}`; }; focus?: { style?: `{${(...)}}`; width?: `{${(...)}}`; }; input?: { style?: `{${(...)}}`; width?: `{${(...)}}`; }; outline?: { style?: `{${(...)}}`; width?: `{${(...)}}`; }; }; colors?: { action?: { accent?: { background?: ...; border?: ...; text?: ...; }; caution?: { background?: ...; border?: ...; text?: ...; }; muted?: { background?: ...; border?: ...; text?: ...; }; negative?: { background?: ...; border?: ...; text?: ...; }; positive?: { background?: ...; border?: ...; text?: ...; }; primary?: { background?: ...; border?: ...; text?: ...; }; secondary?: { background?: ...; border?: ...; text?: ...; }; }; analytics?: { accent?: { background?: ...; border?: ...; text?: ...; }; caution?: { background?: ...; border?: ...; text?: ...; }; muted?: { background?: ...; border?: ...; text?: ...; }; negative?: { background?: ...; border?: ...; text?: ...; }; positive?: { background?: ...; border?: ...; text?: ...; }; primary?: { background?: ...; border?: ...; text?: ...; }; secondary?: { background?: ...; border?: ...; text?: ...; }; }; commerce?: { accent?: { background?: ...; border?: ...; text?: ...; }; caution?: { background?: ...; border?: ...; text?: ...; }; muted?: { background?: ...; border?: ...; text?: ...; }; negative?: { background?: ...; border?: ...; text?: ...; }; positive?: { background?: ...; border?: ...; text?: ...; }; primary?: { background?: ...; border?: ...; text?: ...; }; secondary?: { background?: ...; border?: ...; text?: ...; }; }; content?: { accent?: { background?: ...; border?: ...; text?: ...; }; caution?: { background?: ...; border?: ...; text?: ...; }; muted?: { background?: ...; border?: ...; text?: ...; }; negative?: { background?: ...; border?: ...; text?: ...; }; positive?: { background?: ...; border?: ...; text?: ...; }; primary?: { background?: ...; border?: ...; text?: ...; }; secondary?: { background?: ...; border?: ...; text?: ...; }; }; discovery?: { accent?: { background?: ...; border?: ...; text?: ...; }; caution?: { background?: ...; border?: ...; text?: ...; }; muted?: { background?: ...; border?: ...; text?: ...; }; negative?: { background?: ...; border?: ...; text?: ...; }; positive?: { background?: ...; border?: ...; text?: ...; }; primary?: { background?: ...; border?: ...; text?: ...; }; secondary?: { background?: ...; border?: ...; text?: ...; }; }; feedback?: { accent?: { background?: ...; border?: ...; text?: ...; }; caution?: { background?: ...; border?: ...; text?: ...; }; muted?: { background?: ...; border?: ...; text?: ...; }; negative?: { background?: ...; border?: ...; text?: ...; }; positive?: { background?: ...; border?: ...; text?: ...; }; primary?: { background?: ...; border?: ...; text?: ...; }; secondary?: { background?: ...; border?: ...; text?: ...; }; }; gamification?: { accent?: { background?: ...; border?: ...; text?: ...; }; caution?: { background?: ...; border?: ...; text?: ...; }; muted?: { background?: ...; border?: ...; text?: ...; }; negative?: { background?: ...; border?: ...; text?: ...; }; positive?: { background?: ...; border?: ...; text?: ...; }; primary?: { background?: ...; border?: ...; text?: ...; }; secondary?: { background?: ...; border?: ...; text?: ...; }; }; guidance?: { accent?: { background?: ...; border?: ...; text?: ...; }; caution?: { background?: ...; border?: ...; text?: ...; }; muted?: { background?: ...; border?: ...; text?: ...; }; negative?: { background?: ...; border?: ...; text?: ...; }; positive?: { background?: ...; border?: ...; text?: ...; }; primary?: { background?: ...; border?: ...; text?: ...; }; secondary?: { background?: ...; border?: ...; text?: ...; }; }; input?: { accent?: { background?: ...; border?: ...; text?: ...; }; caution?: { background?: ...; border?: ...; text?: ...; }; muted?: { background?: ...; border?: ...; text?: ...; }; negative?: { background?: ...; border?: ...; text?: ...; }; positive?: { background?: ...; border?: ...; text?: ...; }; primary?: { background?: ...; border?: ...; text?: ...; }; secondary?: { background?: ...; border?: ...; text?: ...; }; }; navigation?: { accent?: { background?: ...; border?: ...; text?: ...; }; caution?: { background?: ...; border?: ...; text?: ...; }; muted?: { background?: ...; border?: ...; text?: ...; }; negative?: { background?: ...; border?: ...; text?: ...; }; positive?: { background?: ...; border?: ...; text?: ...; }; primary?: { background?: ...; border?: ...; text?: ...; }; secondary?: { background?: ...; border?: ...; text?: ...; }; }; social?: { accent?: { background?: ...; border?: ...; text?: ...; }; caution?: { background?: ...; border?: ...; text?: ...; }; muted?: { background?: ...; border?: ...; text?: ...; }; negative?: { background?: ...; border?: ...; text?: ...; }; positive?: { background?: ...; border?: ...; text?: ...; }; primary?: { background?: ...; border?: ...; text?: ...; }; secondary?: { background?: ...; border?: ...; text?: ...; }; }; }; elevation?: { dragged?: `{${string}}`; flat?: `{${string}}`; modal?: `{${string}}`; overlay?: `{${string}}`; raised?: `{${string}}`; resting?: `{${string}}`; top?: `{${string}}`; }; motion?: { decorative?: { slow?: { duration?: ...; easing?: ...; }; }; feedback?: { fast?: { duration?: ...; easing?: ...; }; }; navigation?: { standard?: { duration?: ...; easing?: ...; }; }; }; opacity?: { feedback?: { disabled?: { text?: ...; }; }; overlay?: { backdrop?: { opacity?: ...; }; spinner?: { opacity?: ...; }; }; }; radii?: { avatar?: `{${string}}`; control?: `{${string}}`; pill?: `{${string}}`; surface?: `{${string}}`; toast?: `{${string}}`; }; sizing?: { hit?: { default?: string; min?: string; prominent?: string; }; icon?: { lg?: `{${(...)}}`; md?: `{${(...)}}`; sm?: `{${(...)}}`; }; identity?: { lg?: `{${(...)}}`; md?: `{${(...)}}`; sm?: `{${(...)}}`; xl?: `{${(...)}}`; }; measure?: { reading?: string; }; surface?: { maxWidth?: `{${(...)}}`; }; viewport?: { height?: { full?: ...; }; }; }; spacing?: { gap?: { inline?: { lg?: ...; md?: ...; sm?: ...; xs?: ...; }; stack?: { lg?: ...; md?: ...; sm?: ...; xl?: ...; xs?: ...; }; }; gutter?: { page?: `{${(...)}}`; section?: `{${(...)}}`; }; inset?: { control?: { lg?: ...; md?: ...; sm?: ...; }; surface?: { lg?: ...; md?: ...; sm?: ...; }; }; separation?: { interactive?: { min?: ...; }; }; }; text?: { body?: { lg?: { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; }; md?: { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; }; sm?: { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; }; }; code?: { md?: { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; }; sm?: { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; }; }; display?: { lg?: { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; }; md?: { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; }; sm?: { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; }; }; headline?: { lg?: { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; }; md?: { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; }; sm?: { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; }; }; label?: { lg?: { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; }; md?: { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; }; sm?: { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; }; }; title?: { lg?: { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; }; md?: { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; }; sm?: { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; }; }; }; zIndex?: { dropdownMenu?: `{${string}}`; modal?: `{${string}}`; modalOverlay?: `{${string}}`; navigation?: `{${string}}`; toast?: `{${string}}`; }; }; } = {}

string

Accent color for emphasis and call-to-action elements

overrides.core.colors.brand.complimentary?

string

Secondary brand color that complements the main color

overrides.core.colors.brand.darkNeutral?

string

Dark neutral for text and strong contrast

overrides.core.colors.brand.lightNeutral?

string

Light neutral for backgrounds and subtle elements

overrides.core.colors.brand.main?

string

overrides.core.space.8?

string

overrides.core.space.unit?

string

Responsive engine — container-first clamp formula

overrides.core.space.unitCq?

string

Optional container-aware unit

overrides.core.type?

{ ramp?: { display?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; }; text?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; }; }; }

overrides.core.type.ramp?

{ display?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; }; text?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; }; }

overrides.core.type.ramp.display?

{ 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; }

overrides.semantic.colors.discovery?

overrides.semantic.colors.feedback?

overrides.semantic.colors.gamification?

overrides.semantic.colors.guidance?

overrides.semantic.colors.input?

overrides.semantic.colors.navigation?

overrides.semantic.colors.social?

...

overrides.semantic.text.display?

overrides.semantic.text.headline?

overrides.semantic.text.label?

`{${string}}`

Returns

ThemeTokensV2

A complete ThemeTokensV2 with all tokens resolved.

Example

// Extend the default theme with brand colors
const myTheme = createTheme({
  overrides: {
    core: { colors: { brand: { main: '#FF0000' } } },
  },
});

// Extend another theme (theme inheritance)
const childTheme = createTheme({
  base: parentTheme,
  overrides: {
    core: { radii: { sm: '8px' } },
  },
});

Parameters​

__namedParameters​

base?​

overrides?​

overrides.core?​

overrides.core.borders?​

overrides.core.borders.style?​

overrides.core.borders.style.dashed?​

overrides.core.borders.style.dotted?​

overrides.core.borders.style.none?​

overrides.core.borders.style.solid?​

overrides.core.borders.width?​

overrides.core.borders.width.0?​

overrides.core.borders.width.hairline?​

overrides.core.borders.width.md?​

overrides.core.borders.width.sm?​

overrides.core.breakpoints?​

overrides.core.breakpoints.2xl?​

overrides.core.breakpoints.lg?​

overrides.core.breakpoints.md?​

overrides.core.breakpoints.sm?​

overrides.core.breakpoints.xl?​

overrides.core.breakpoints.xs?​

overrides.core.colors?​

overrides.core.colors.brand?​

overrides.core.colors.brand.accent?​

overrides.core.colors.brand.complimentary?​

overrides.core.colors.brand.darkNeutral?​

overrides.core.colors.brand.lightNeutral?​

overrides.core.colors.brand.main?​

overrides.core.colors.neutral?​

overrides.core.colors.neutral.black?​

overrides.core.colors.neutral.gray100?​

overrides.core.colors.neutral.gray200?​

overrides.core.colors.neutral.gray300?​

overrides.core.colors.neutral.gray50?​

overrides.core.colors.neutral.gray500?​

overrides.core.colors.neutral.gray700?​

overrides.core.colors.neutral.gray900?​

overrides.core.colors.neutral.white?​

overrides.core.colors.red?​

overrides.core.colors.red.100?​

overrides.core.colors.red.200?​

overrides.core.colors.red.300?​

overrides.core.colors.red.400?​

overrides.core.colors.red.500?​

overrides.core.colors.red.600?​

overrides.core.colors.red.700?​

overrides.core.elevation?​

overrides.core.elevation.level?​

overrides.core.elevation.level.0?​

overrides.core.elevation.level.1?​

overrides.core.elevation.level.2?​

overrides.core.elevation.level.3?​

overrides.core.elevation.level.4?​

overrides.core.elevation.level.5?​

overrides.core.font?​

overrides.core.font.family?​

overrides.core.font.family.mono?​

overrides.core.font.family.sans?​

overrides.core.font.family.serif?​

overrides.core.font.leading?​

overrides.core.font.leading.normal?​

overrides.core.font.leading.relaxed?​

overrides.core.font.leading.snug?​

overrides.core.font.leading.tight?​

overrides.core.font.numeric?​

overrides.core.font.numeric.proportional?​

overrides.core.font.numeric.tabular?​

overrides.core.font.opticalSizing?​

overrides.core.font.opticalSizing.auto?​

overrides.core.font.opticalSizing.none?​

overrides.core.font.tracking?​

overrides.core.font.tracking.normal?​

overrides.core.font.tracking.tight?​

overrides.core.font.tracking.wide?​

overrides.core.font.weight?​

overrides.core.font.weight.bold?​

overrides.core.font.weight.medium?​

overrides.core.font.weight.regular?​

Parameters

__namedParameters

base?

overrides?

overrides.core?

overrides.core.borders?

overrides.core.borders.style?

overrides.core.borders.style.dashed?

overrides.core.borders.style.dotted?

overrides.core.borders.style.none?

overrides.core.borders.style.solid?

overrides.core.borders.width?

overrides.core.borders.width.0?

overrides.core.borders.width.hairline?

overrides.core.borders.width.md?

overrides.core.borders.width.sm?

overrides.core.breakpoints?

overrides.core.breakpoints.2xl?

overrides.core.breakpoints.lg?

overrides.core.breakpoints.md?

overrides.core.breakpoints.sm?

overrides.core.breakpoints.xl?

overrides.core.breakpoints.xs?

overrides.core.colors?

overrides.core.colors.brand?

overrides.core.colors.brand.accent?

overrides.core.colors.brand.complimentary?

overrides.core.colors.brand.darkNeutral?

overrides.core.colors.brand.lightNeutral?

overrides.core.colors.brand.main?

overrides.core.colors.neutral?

overrides.core.colors.neutral.black?

overrides.core.colors.neutral.gray100?

overrides.core.colors.neutral.gray200?

overrides.core.colors.neutral.gray300?

overrides.core.colors.neutral.gray50?

overrides.core.colors.neutral.gray500?

overrides.core.colors.neutral.gray700?

overrides.core.colors.neutral.gray900?

overrides.core.colors.neutral.white?

overrides.core.colors.red?

overrides.core.colors.red.100?

overrides.core.colors.red.200?

overrides.core.colors.red.300?

overrides.core.colors.red.400?

overrides.core.colors.red.500?

overrides.core.colors.red.600?

overrides.core.colors.red.700?

overrides.core.elevation?

overrides.core.elevation.level?

overrides.core.elevation.level.0?

overrides.core.elevation.level.1?

overrides.core.elevation.level.2?

overrides.core.elevation.level.3?

overrides.core.elevation.level.4?

overrides.core.elevation.level.5?

overrides.core.font?

overrides.core.font.family?

overrides.core.font.family.mono?

overrides.core.font.family.sans?

overrides.core.font.family.serif?

overrides.core.font.leading?

overrides.core.font.leading.normal?

overrides.core.font.leading.relaxed?

overrides.core.font.leading.snug?

overrides.core.font.leading.tight?

overrides.core.font.numeric?

overrides.core.font.numeric.proportional?

overrides.core.font.numeric.tabular?

overrides.core.font.opticalSizing?

overrides.core.font.opticalSizing.auto?

overrides.core.font.opticalSizing.none?

overrides.core.font.tracking?

overrides.core.font.tracking.normal?

overrides.core.font.tracking.tight?

overrides.core.font.tracking.wide?

overrides.core.font.weight?

overrides.core.font.weight.bold?

overrides.core.font.weight.medium?

overrides.core.font.weight.regular?