Function: createTheme()
createTheme(
__namedParameters?):ThemeBundle
Defined in: createTheme.ts:96
Creates a theme bundle with an optional alternate color mode.
The extends param is the idiomatic way to build on a built-in theme:
it inherits the base tokens and the dark-mode alternate automatically.
Parameters
| Parameter | Type | Description |
|---|---|---|
__namedParameters | { alternate?: ModeOverride | null; base?: ThemeTokens; baseMode?: "light" | "dark"; extends?: ThemeBundle; overrides?: { core?: { border?: { style?: { dashed?: string; dotted?: string; none?: string; solid?: string; }; width?: { default?: string; focused?: string; none?: string; selected?: string; }; }; breakpoints?: { 2xl?: string; lg?: string; md?: string; sm?: string; xl?: string; }; colors?: {[key: string]: { 0?: string; 100?: string; 1000?: string; 200?: string; 300?: string; 400?: string; 50?: string; 500?: string; 600?: string; 700?: string; 800?: string; 900?: string; } | undefined; brand?: { 0?: string; 100?: string; 1000?: string; 200?: string; 300?: string; 400?: string; 50?: string; 500?: string; 600?: string; 700?: string; 800?: string; 900?: string; }; neutral?: { 0?: string; 100?: string; 1000?: string; 200?: string; 300?: string; 400?: string; 50?: string; 500?: string; 600?: string; 700?: string; 800?: string; 900?: string; }; }; dataviz?: { opacity?: { context?: number; muted?: number; uncertainty?: number; }; pattern?: { 1?: string; 2?: string; 3?: string; 4?: string; 5?: string; 6?: string; }; shape?: { 1?: string; 2?: string; 3?: string; 4?: string; 5?: string; 6?: string; 7?: string; 8?: string; }; stroke?: { dashed?: string; dotted?: string; solid?: string; }; }; elevation?: { emphatic?: {[key: string]: string | undefined; }; level?: {[key: string]: string | undefined; }; }; font?: { family?: { mono?: string; sans?: string; serif?: string; }; leading?: { normal?: number; relaxed?: number; snug?: number; tight?: number; }; numeric?: { lining?: string; normal?: string; oldstyle?: string; ordinal?: string; proportional?: string; slashedZero?: string; tabular?: string; }; optical?: { auto?: string; none?: string; }; scale?: { display?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; }; text?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; }; }; tracking?: { normal?: string; tight?: string; wide?: string; }; weight?: { bold?: number; medium?: number; regular?: number; semibold?: number; }; }; motion?: { duration?: { lg?: string; md?: string; none?: string; sm?: string; xl?: string; xs?: string; }; easing?: { enter?: string; exit?: 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; xl?: string; }; sizing?: { behavior?: { auto?: string; fit?: string; full?: string; max?: string; min?: string; }; hit?: { coarse?: { base?: ...; min?: ...; prominent?: ...; }; fine?: { base?: ...; min?: ...; prominent?: ...; }; }; ramp?: { layout?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; }; ui?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; 7?: ...; 8?: ...; }; }; relative?: { em?: string; rem?: string; }; viewport?: { height?: { full?: ...; }; width?: { full?: ...; }; }; }; spacing?: { 0?: string; 1?: string; 12?: string; 16?: string; 2?: string; 3?: string; 4?: string; 6?: string; 8?: string; engine?: { unit?: string; unitCq?: string; }; }; zIndex?: { level?: { 0?: number; 1?: number; 2?: number; 3?: number; 4?: number; }; }; }; semantic?: { border?: { divider?: { style?: `{core.border.${(...)}}`; width?: `{core.border.${(...)}}`; }; outline?: { control?: { style?: ...; width?: ...; }; selected?: { style?: ...; width?: ...; }; surface?: { style?: ...; width?: ...; }; }; }; colors?: { action?: { accent?: { background?: ...; border?: ...; text?: ...; }; muted?: { background?: ...; border?: ...; text?: ...; }; negative?: { background?: ...; border?: ...; text?: ...; }; primary?: { background?: ...; border?: ...; text?: ...; }; secondary?: { background?: ...; border?: ...; text?: ...; }; }; feedback?: { caution?: { background?: ...; border?: ...; text?: ...; }; muted?: { background?: ...; border?: ...; text?: ...; }; negative?: { background?: ...; border?: ...; text?: ...; }; positive?: { background?: ...; border?: ...; text?: ...; }; primary?: { background?: ...; border?: ...; text?: ...; }; }; informational?: { 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?: { 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?: ...; }; muted?: { background?: ...; border?: ...; text?: ...; }; primary?: { background?: ...; border?: ...; text?: ...; }; secondary?: { background?: ...; border?: ...; text?: ...; }; }; }; dataviz?: { color?: { reference?: { baseline?: ...; target?: ...; }; scale?: { diverging?: ...; sequential?: ...; }; series?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; 7?: ...; 8?: ...; }; state?: { highlight?: ...; muted?: ...; selected?: ...; }; status?: { missing?: ...; na?: ...; suppressed?: ...; }; }; encoding?: { opacity?: { context?: ...; muted?: ...; uncertainty?: ...; }; pattern?: { series?: ...; }; shape?: { series?: ...; }; stroke?: { forecast?: ...; reference?: ...; uncertainty?: ...; }; }; geo?: { context?: { boundary?: ...; label?: ...; muted?: ...; }; state?: { focus?: ...; selection?: ...; }; }; }; elevation?: { surface?: { blocking?: `{core.elevation.${(...)}}`; flat?: `{core.elevation.${(...)}}`; overlay?: `{core.elevation.${(...)}}`; raised?: `{core.elevation.${(...)}}`; }; tonal?: { blocking?: `{core.colors.${(...)}}`; overlay?: `{core.colors.${(...)}}`; raised?: `{core.colors.${(...)}}`; }; }; focus?: { ring?: { color?: `{semantic.${(...)}}`; style?: `{core.border.${(...)}}`; width?: `{core.border.${(...)}}`; }; }; motion?: { decorative?: { duration?: `{core.motion.${(...)}}`; easing?: `{core.motion.${(...)}}`; }; emphasis?: { duration?: `{core.motion.${(...)}}`; easing?: `{core.motion.${(...)}}`; }; feedback?: { duration?: `{core.motion.${(...)}}`; easing?: `{core.motion.${(...)}}`; }; transition?: { enter?: { duration?: ...; easing?: ...; }; exit?: { duration?: ...; easing?: ...; }; }; }; opacity?: { disabled?: `{core.opacity.${string}}`; loading?: `{core.opacity.${string}}`; scrim?: `{core.opacity.${string}}`; }; overlay?: { scrim?: string; }; radii?: { control?: `{core.radii.${string}}`; round?: `{core.radii.${string}}`; surface?: `{core.radii.${string}}`; }; sizing?: { hit?: { base?: `{core.sizing.${(...)}}`; min?: `{core.sizing.${(...)}}`; prominent?: `{core.sizing.${(...)}}`; }; icon?: { lg?: `{core.sizing.${(...)}}`; md?: `{core.sizing.${(...)}}`; sm?: `{core.sizing.${(...)}}`; }; identity?: { lg?: `{core.sizing.${(...)}}`; md?: `{core.sizing.${(...)}}`; sm?: `{core.sizing.${(...)}}`; xl?: `{core.sizing.${(...)}}`; }; measure?: { reading?: string; }; surface?: { maxWidth?: `{core.sizing.${(...)}}`; }; viewport?: { height?: { full?: ...; }; width?: { full?: ...; }; }; }; spacing?: { gap?: { inline?: { lg?: ...; md?: ...; sm?: ...; xl?: ...; xs?: ...; }; stack?: { lg?: ...; md?: ...; sm?: ...; xl?: ...; xs?: ...; }; }; gutter?: { page?: string; section?: string; }; 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?: { layer?: { base?: `{core.zIndex.${(...)}}`; blocking?: `{core.zIndex.${(...)}}`; overlay?: `{core.zIndex.${(...)}}`; sticky?: `{core.zIndex.${(...)}}`; transient?: `{core.zIndex.${(...)}}`; }; }; }; }; } | - |
__namedParameters.alternate? | ModeOverride | null | Semantic remapping overrides for the opposite mode. Defaults to darkAlternate when not provided (and no extends). Pass null to opt out of any alternate (single-mode theme). |
__namedParameters.base? | ThemeTokens | Base theme to extend. Defaults to extends.base or baseTheme. |
__namedParameters.baseMode? | "light" | "dark" | Which mode the base represents. Defaults to extends.baseMode or 'light'. |
__namedParameters.extends? | ThemeBundle | Parent bundle to inherit from. base, baseMode, and alternate all default to the parent's values — including dark-mode inheritance. extends is a reserved word in JS — destructured as parentBundle in the implementation. |
__namedParameters.overrides? | { core?: { border?: { style?: { dashed?: string; dotted?: string; none?: string; solid?: string; }; width?: { default?: string; focused?: string; none?: string; selected?: string; }; }; breakpoints?: { 2xl?: string; lg?: string; md?: string; sm?: string; xl?: string; }; colors?: {[key: string]: { 0?: string; 100?: string; 1000?: string; 200?: string; 300?: string; 400?: string; 50?: string; 500?: string; 600?: string; 700?: string; 800?: string; 900?: string; } | undefined; brand?: { 0?: string; 100?: string; 1000?: string; 200?: string; 300?: string; 400?: string; 50?: string; 500?: string; 600?: string; 700?: string; 800?: string; 900?: string; }; neutral?: { 0?: string; 100?: string; 1000?: string; 200?: string; 300?: string; 400?: string; 50?: string; 500?: string; 600?: string; 700?: string; 800?: string; 900?: string; }; }; dataviz?: { opacity?: { context?: number; muted?: number; uncertainty?: number; }; pattern?: { 1?: string; 2?: string; 3?: string; 4?: string; 5?: string; 6?: string; }; shape?: { 1?: string; 2?: string; 3?: string; 4?: string; 5?: string; 6?: string; 7?: string; 8?: string; }; stroke?: { dashed?: string; dotted?: string; solid?: string; }; }; elevation?: { emphatic?: {[key: string]: string | undefined; }; level?: {[key: string]: string | undefined; }; }; font?: { family?: { mono?: string; sans?: string; serif?: string; }; leading?: { normal?: number; relaxed?: number; snug?: number; tight?: number; }; numeric?: { lining?: string; normal?: string; oldstyle?: string; ordinal?: string; proportional?: string; slashedZero?: string; tabular?: string; }; optical?: { auto?: string; none?: string; }; scale?: { display?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; }; text?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; }; }; tracking?: { normal?: string; tight?: string; wide?: string; }; weight?: { bold?: number; medium?: number; regular?: number; semibold?: number; }; }; motion?: { duration?: { lg?: string; md?: string; none?: string; sm?: string; xl?: string; xs?: string; }; easing?: { enter?: string; exit?: 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; xl?: string; }; sizing?: { behavior?: { auto?: string; fit?: string; full?: string; max?: string; min?: string; }; hit?: { coarse?: { base?: ...; min?: ...; prominent?: ...; }; fine?: { base?: ...; min?: ...; prominent?: ...; }; }; ramp?: { layout?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; }; ui?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; 7?: ...; 8?: ...; }; }; relative?: { em?: string; rem?: string; }; viewport?: { height?: { full?: ...; }; width?: { full?: ...; }; }; }; spacing?: { 0?: string; 1?: string; 12?: string; 16?: string; 2?: string; 3?: string; 4?: string; 6?: string; 8?: string; engine?: { unit?: string; unitCq?: string; }; }; zIndex?: { level?: { 0?: number; 1?: number; 2?: number; 3?: number; 4?: number; }; }; }; semantic?: { border?: { divider?: { style?: `{core.border.${(...)}}`; width?: `{core.border.${(...)}}`; }; outline?: { control?: { style?: ...; width?: ...; }; selected?: { style?: ...; width?: ...; }; surface?: { style?: ...; width?: ...; }; }; }; colors?: { action?: { accent?: { background?: ...; border?: ...; text?: ...; }; muted?: { background?: ...; border?: ...; text?: ...; }; negative?: { background?: ...; border?: ...; text?: ...; }; primary?: { background?: ...; border?: ...; text?: ...; }; secondary?: { background?: ...; border?: ...; text?: ...; }; }; feedback?: { caution?: { background?: ...; border?: ...; text?: ...; }; muted?: { background?: ...; border?: ...; text?: ...; }; negative?: { background?: ...; border?: ...; text?: ...; }; positive?: { background?: ...; border?: ...; text?: ...; }; primary?: { background?: ...; border?: ...; text?: ...; }; }; informational?: { 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?: { 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?: ...; }; muted?: { background?: ...; border?: ...; text?: ...; }; primary?: { background?: ...; border?: ...; text?: ...; }; secondary?: { background?: ...; border?: ...; text?: ...; }; }; }; dataviz?: { color?: { reference?: { baseline?: ...; target?: ...; }; scale?: { diverging?: ...; sequential?: ...; }; series?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; 7?: ...; 8?: ...; }; state?: { highlight?: ...; muted?: ...; selected?: ...; }; status?: { missing?: ...; na?: ...; suppressed?: ...; }; }; encoding?: { opacity?: { context?: ...; muted?: ...; uncertainty?: ...; }; pattern?: { series?: ...; }; shape?: { series?: ...; }; stroke?: { forecast?: ...; reference?: ...; uncertainty?: ...; }; }; geo?: { context?: { boundary?: ...; label?: ...; muted?: ...; }; state?: { focus?: ...; selection?: ...; }; }; }; elevation?: { surface?: { blocking?: `{core.elevation.${(...)}}`; flat?: `{core.elevation.${(...)}}`; overlay?: `{core.elevation.${(...)}}`; raised?: `{core.elevation.${(...)}}`; }; tonal?: { blocking?: `{core.colors.${(...)}}`; overlay?: `{core.colors.${(...)}}`; raised?: `{core.colors.${(...)}}`; }; }; focus?: { ring?: { color?: `{semantic.${(...)}}`; style?: `{core.border.${(...)}}`; width?: `{core.border.${(...)}}`; }; }; motion?: { decorative?: { duration?: `{core.motion.${(...)}}`; easing?: `{core.motion.${(...)}}`; }; emphasis?: { duration?: `{core.motion.${(...)}}`; easing?: `{core.motion.${(...)}}`; }; feedback?: { duration?: `{core.motion.${(...)}}`; easing?: `{core.motion.${(...)}}`; }; transition?: { enter?: { duration?: ...; easing?: ...; }; exit?: { duration?: ...; easing?: ...; }; }; }; opacity?: { disabled?: `{core.opacity.${string}}`; loading?: `{core.opacity.${string}}`; scrim?: `{core.opacity.${string}}`; }; overlay?: { scrim?: string; }; radii?: { control?: `{core.radii.${string}}`; round?: `{core.radii.${string}}`; surface?: `{core.radii.${string}}`; }; sizing?: { hit?: { base?: `{core.sizing.${(...)}}`; min?: `{core.sizing.${(...)}}`; prominent?: `{core.sizing.${(...)}}`; }; icon?: { lg?: `{core.sizing.${(...)}}`; md?: `{core.sizing.${(...)}}`; sm?: `{core.sizing.${(...)}}`; }; identity?: { lg?: `{core.sizing.${(...)}}`; md?: `{core.sizing.${(...)}}`; sm?: `{core.sizing.${(...)}}`; xl?: `{core.sizing.${(...)}}`; }; measure?: { reading?: string; }; surface?: { maxWidth?: `{core.sizing.${(...)}}`; }; viewport?: { height?: { full?: ...; }; width?: { full?: ...; }; }; }; spacing?: { gap?: { inline?: { lg?: ...; md?: ...; sm?: ...; xl?: ...; xs?: ...; }; stack?: { lg?: ...; md?: ...; sm?: ...; xl?: ...; xs?: ...; }; }; gutter?: { page?: string; section?: string; }; 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?: { layer?: { base?: `{core.zIndex.${(...)}}`; blocking?: `{core.zIndex.${(...)}}`; overlay?: `{core.zIndex.${(...)}}`; sticky?: `{core.zIndex.${(...)}}`; transient?: `{core.zIndex.${(...)}}`; }; }; }; } | Brand overrides applied to the base theme. |
__namedParameters.overrides.core? | { border?: { style?: { dashed?: string; dotted?: string; none?: string; solid?: string; }; width?: { default?: string; focused?: string; none?: string; selected?: string; }; }; breakpoints?: { 2xl?: string; lg?: string; md?: string; sm?: string; xl?: string; }; colors?: {[key: string]: { 0?: string; 100?: string; 1000?: string; 200?: string; 300?: string; 400?: string; 50?: string; 500?: string; 600?: string; 700?: string; 800?: string; 900?: string; } | undefined; brand?: { 0?: string; 100?: string; 1000?: string; 200?: string; 300?: string; 400?: string; 50?: string; 500?: string; 600?: string; 700?: string; 800?: string; 900?: string; }; neutral?: { 0?: string; 100?: string; 1000?: string; 200?: string; 300?: string; 400?: string; 50?: string; 500?: string; 600?: string; 700?: string; 800?: string; 900?: string; }; }; dataviz?: { opacity?: { context?: number; muted?: number; uncertainty?: number; }; pattern?: { 1?: string; 2?: string; 3?: string; 4?: string; 5?: string; 6?: string; }; shape?: { 1?: string; 2?: string; 3?: string; 4?: string; 5?: string; 6?: string; 7?: string; 8?: string; }; stroke?: { dashed?: string; dotted?: string; solid?: string; }; }; elevation?: { emphatic?: {[key: string]: string | undefined; }; level?: {[key: string]: string | undefined; }; }; font?: { family?: { mono?: string; sans?: string; serif?: string; }; leading?: { normal?: number; relaxed?: number; snug?: number; tight?: number; }; numeric?: { lining?: string; normal?: string; oldstyle?: string; ordinal?: string; proportional?: string; slashedZero?: string; tabular?: string; }; optical?: { auto?: string; none?: string; }; scale?: { display?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; }; text?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; }; }; tracking?: { normal?: string; tight?: string; wide?: string; }; weight?: { bold?: number; medium?: number; regular?: number; semibold?: number; }; }; motion?: { duration?: { lg?: string; md?: string; none?: string; sm?: string; xl?: string; xs?: string; }; easing?: { enter?: string; exit?: 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; xl?: string; }; sizing?: { behavior?: { auto?: string; fit?: string; full?: string; max?: string; min?: string; }; hit?: { coarse?: { base?: ...; min?: ...; prominent?: ...; }; fine?: { base?: ...; min?: ...; prominent?: ...; }; }; ramp?: { layout?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; }; ui?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; 7?: ...; 8?: ...; }; }; relative?: { em?: string; rem?: string; }; viewport?: { height?: { full?: ...; }; width?: { full?: ...; }; }; }; spacing?: { 0?: string; 1?: string; 12?: string; 16?: string; 2?: string; 3?: string; 4?: string; 6?: string; 8?: string; engine?: { unit?: string; unitCq?: string; }; }; zIndex?: { level?: { 0?: number; 1?: number; 2?: number; 3?: number; 4?: number; }; }; } | - |
__namedParameters.overrides.core.border? | { style?: { dashed?: string; dotted?: string; none?: string; solid?: string; }; width?: { default?: string; focused?: string; none?: string; selected?: string; }; } | - |
__namedParameters.overrides.core.border.style? | { dashed?: string; dotted?: string; none?: string; solid?: string; } | - |
__namedParameters.overrides.core.border.style.dashed? | string | - |
__namedParameters.overrides.core.border.style.dotted? | string | - |
__namedParameters.overrides.core.border.style.none? | string | - |
__namedParameters.overrides.core.border.style.solid? | string | - |
__namedParameters.overrides.core.border.width? | { default?: string; focused?: string; none?: string; selected?: string; } | - |
__namedParameters.overrides.core.border.width.default? | string | - |
__namedParameters.overrides.core.border.width.focused? | string | - |
__namedParameters.overrides.core.border.width.none? | string | - |
__namedParameters.overrides.core.border.width.selected? | string | - |
__namedParameters.overrides.core.breakpoints? | { 2xl?: string; lg?: string; md?: string; sm?: string; xl?: string; } | Viewport threshold scale. Core-only — no semantic layer. See CoreBreakpoints |
__namedParameters.overrides.core.breakpoints.2xl? | string | - |
__namedParameters.overrides.core.breakpoints.lg? | string | - |
__namedParameters.overrides.core.breakpoints.md? | string | - |
__namedParameters.overrides.core.breakpoints.sm? | string | - |
__namedParameters.overrides.core.breakpoints.xl? | string | - |
__namedParameters.overrides.core.colors? | {[key: string]: { 0?: string; 100?: string; 1000?: string; 200?: string; 300?: string; 400?: string; 50?: string; 500?: string; 600?: string; 700?: string; 800?: string; 900?: string; } | undefined; brand?: { 0?: string; 100?: string; 1000?: string; 200?: string; 300?: string; 400?: string; 50?: string; 500?: string; 600?: string; 700?: string; 800?: string; 900?: string; }; neutral?: { 0?: string; 100?: string; 1000?: string; 200?: string; 300?: string; 400?: string; 50?: string; 500?: string; 600?: string; 700?: string; 800?: string; 900?: string; }; } | - |
__namedParameters.overrides.core.colors.brand? | { 0?: string; 100?: string; 1000?: string; 200?: string; 300?: string; 400?: string; 50?: string; 500?: string; 600?: string; 700?: string; 800?: string; 900?: string; } | Primary brand identity color scale. |
__namedParameters.overrides.core.colors.brand.0? | string | - |
__namedParameters.overrides.core.colors.brand.100? | string | - |
__namedParameters.overrides.core.colors.brand.1000? | string | - |
__namedParameters.overrides.core.colors.brand.200? | string | - |
__namedParameters.overrides.core.colors.brand.300? | string | - |
__namedParameters.overrides.core.colors.brand.400? | string | - |
__namedParameters.overrides.core.colors.brand.50? | string | - |
__namedParameters.overrides.core.colors.brand.500? | string | - |
__namedParameters.overrides.core.colors.brand.600? | string | - |
__namedParameters.overrides.core.colors.brand.700? | string | - |
__namedParameters.overrides.core.colors.brand.800? | string | - |
__namedParameters.overrides.core.colors.brand.900? | string | - |
__namedParameters.overrides.core.colors.neutral? | { 0?: string; 100?: string; 1000?: string; 200?: string; 300?: string; 400?: string; 50?: string; 500?: string; 600?: string; 700?: string; 800?: string; 900?: string; } | Zero-saturation anchor scale (greyscale/slate). Provides surfaces, text contrast, dividers, and subdued UI. Named neutral by convention — not a semantic role, purely a palette family. Use step 0 for white-end and step 1000 for black-end. |
__namedParameters.overrides.core.colors.neutral.0? | string | - |
__namedParameters.overrides.core.colors.neutral.100? | string | - |
__namedParameters.overrides.core.colors.neutral.1000? | string | - |
__namedParameters.overrides.core.colors.neutral.200? | string | - |
__namedParameters.overrides.core.colors.neutral.300? | string | - |
__namedParameters.overrides.core.colors.neutral.400? | string | - |
__namedParameters.overrides.core.colors.neutral.50? | string | - |
__namedParameters.overrides.core.colors.neutral.500? | string | - |
__namedParameters.overrides.core.colors.neutral.600? | string | - |
__namedParameters.overrides.core.colors.neutral.700? | string | - |
__namedParameters.overrides.core.colors.neutral.800? | string | - |
__namedParameters.overrides.core.colors.neutral.900? | string | - |
__namedParameters.overrides.core.dataviz? | { opacity?: { context?: number; muted?: number; uncertainty?: number; }; pattern?: { 1?: string; 2?: string; 3?: string; 4?: string; 5?: string; 6?: string; }; shape?: { 1?: string; 2?: string; 3?: string; 4?: string; 5?: string; 6?: string; 7?: string; 8?: string; }; stroke?: { dashed?: string; dotted?: string; solid?: string; }; } | Data Visualization extension — analytical color palettes and non-color encoding primitives. Optional: omit when the theme does not support dataviz. |
__namedParameters.overrides.core.dataviz.opacity? | { context?: number; muted?: number; uncertainty?: number; } | Analytical opacity primitives. Distinct from foundation opacity — used as encoding channels, not UI effects. |
__namedParameters.overrides.core.dataviz.opacity.context? | number | Geographic/spatial context reduction behind overlays. |
__namedParameters.overrides.core.dataviz.opacity.muted? | number | De-emphasis of non-highlighted data marks. |
__namedParameters.overrides.core.dataviz.opacity.uncertainty? | number | Visual signal of estimated or uncertain data. |
__namedParameters.overrides.core.dataviz.pattern? | { 1?: string; 2?: string; 3?: string; 4?: string; 5?: string; 6?: string; } | Fill patterns for area/region differentiation (e.g. 'diagonal-stripes'). |
__namedParameters.overrides.core.dataviz.pattern.1? | string | - |
__namedParameters.overrides.core.dataviz.pattern.2? | string | - |
__namedParameters.overrides.core.dataviz.pattern.3? | string | - |
__namedParameters.overrides.core.dataviz.pattern.4? | string | - |
__namedParameters.overrides.core.dataviz.pattern.5? | string | - |
__namedParameters.overrides.core.dataviz.pattern.6? | string | - |
__namedParameters.overrides.core.dataviz.shape? | { 1?: string; 2?: string; 3?: string; 4?: string; 5?: string; 6?: string; 7?: string; 8?: string; } | Mark shapes for categorical differentiation (e.g. 'circle', 'square'). |
__namedParameters.overrides.core.dataviz.shape.1? | string | - |
__namedParameters.overrides.core.dataviz.shape.2? | string | - |
__namedParameters.overrides.core.dataviz.shape.3? | string | - |
__namedParameters.overrides.core.dataviz.shape.4? | string | - |
__namedParameters.overrides.core.dataviz.shape.5? | string | - |
__namedParameters.overrides.core.dataviz.shape.6? | string | - |
__namedParameters.overrides.core.dataviz.shape.7? | string | - |
__namedParameters.overrides.core.dataviz.shape.8? | string | - |
__namedParameters.overrides.core.dataviz.stroke? | { dashed?: string; dotted?: string; solid?: string; } | Stroke dash patterns as SVG-compatible dash-array strings. |
__namedParameters.overrides.core.dataviz.stroke.dashed? | string | - |
__namedParameters.overrides.core.dataviz.stroke.dotted? | string | - |
__namedParameters.overrides.core.dataviz.stroke.solid? | string | - |
__namedParameters.overrides.core.elevation? | { emphatic?: {[key: string]: string | undefined; }; level?: {[key: string]: string | undefined; }; } | - |
__namedParameters.overrides.core.elevation.emphatic? | {[key: string]: string | undefined; } | High-opacity shadow recipes for surfaces needing stronger depth contrast. Mode-agnostic: expresses shadow weight, not a mode label. Themes include this ramp when a dark alternate requires higher-opacity recipes. |
__namedParameters.overrides.core.elevation.level? | {[key: string]: string | undefined; } | Base shadow recipes — standard opacity, light-surface defaults. |
__namedParameters.overrides.core.font? | { family?: { mono?: string; sans?: string; serif?: string; }; leading?: { normal?: number; relaxed?: number; snug?: number; tight?: number; }; numeric?: { lining?: string; normal?: string; oldstyle?: string; ordinal?: string; proportional?: string; slashedZero?: string; tabular?: string; }; optical?: { auto?: string; none?: string; }; scale?: { display?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; }; text?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; }; }; tracking?: { normal?: string; tight?: string; wide?: string; }; weight?: { bold?: number; medium?: number; regular?: number; semibold?: number; }; } | - |
__namedParameters.overrides.core.font.family? | { mono?: string; sans?: string; serif?: string; } | - |
__namedParameters.overrides.core.font.family.mono? | string | - |
__namedParameters.overrides.core.font.family.sans? | string | - |
__namedParameters.overrides.core.font.family.serif? | string | - |
__namedParameters.overrides.core.font.leading? | { normal?: number; relaxed?: number; snug?: number; tight?: number; } | - |
__namedParameters.overrides.core.font.leading.normal? | number | - |
__namedParameters.overrides.core.font.leading.relaxed? | number | - |
__namedParameters.overrides.core.font.leading.snug? | number | - |
__namedParameters.overrides.core.font.leading.tight? | number | - |
__namedParameters.overrides.core.font.numeric? | { lining?: string; normal?: string; oldstyle?: string; ordinal?: string; proportional?: string; slashedZero?: string; tabular?: string; } | - |
__namedParameters.overrides.core.font.numeric.lining? | string | - |
__namedParameters.overrides.core.font.numeric.normal? | string | - |
__namedParameters.overrides.core.font.numeric.oldstyle? | string | - |
__namedParameters.overrides.core.font.numeric.ordinal? | string | - |
__namedParameters.overrides.core.font.numeric.proportional? | string | - |
__namedParameters.overrides.core.font.numeric.slashedZero? | string | - |
__namedParameters.overrides.core.font.numeric.tabular? | string | - |
__namedParameters.overrides.core.font.optical? | { auto?: string; none?: string; } | - |
__namedParameters.overrides.core.font.optical.auto? | string | - |
__namedParameters.overrides.core.font.optical.none? | string | - |
__namedParameters.overrides.core.font.scale? | { display?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; }; text?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; }; } | Responsive font size scale. See CoreFontScale |
__namedParameters.overrides.core.font.scale.display? | { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; } | Headings, titles, and high-hierarchy display text |
__namedParameters.overrides.core.font.scale.display.1? | ... | - |
__namedParameters.overrides.core.font.scale.display.2? | ... | - |
__namedParameters.overrides.core.font.scale.display.3? | ... | - |
__namedParameters.overrides.core.font.scale.display.4? | ... | - |
__namedParameters.overrides.core.font.scale.display.5? | ... | - |
__namedParameters.overrides.core.font.scale.display.6? | ... | - |
__namedParameters.overrides.core.font.scale.text? | { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; } | Body text, labels, and dense UI typography |
__namedParameters.overrides.core.font.scale.text.1? | ... | - |
__namedParameters.overrides.core.font.scale.text.2? | ... | - |
__namedParameters.overrides.core.font.scale.text.3? | ... | - |
__namedParameters.overrides.core.font.scale.text.4? | ... | - |
__namedParameters.overrides.core.font.scale.text.5? | ... | - |
__namedParameters.overrides.core.font.scale.text.6? | ... | - |
__namedParameters.overrides.core.font.tracking? | { normal?: string; tight?: string; wide?: string; } | - |
__namedParameters.overrides.core.font.tracking.normal? | string | - |
__namedParameters.overrides.core.font.tracking.tight? | string | - |
__namedParameters.overrides.core.font.tracking.wide? | string | - |
__namedParameters.overrides.core.font.weight? | { bold?: number; medium?: number; regular?: number; semibold?: number; } | - |
__namedParameters.overrides.core.font.weight.bold? | number | - |
__namedParameters.overrides.core.font.weight.medium? | number | - |
__namedParameters.overrides.core.font.weight.regular? | number | - |
__namedParameters.overrides.core.font.weight.semibold? | number | - |
__namedParameters.overrides.core.motion? | { duration?: { lg?: string; md?: string; none?: string; sm?: string; xl?: string; xs?: string; }; easing?: { enter?: string; exit?: string; linear?: string; standard?: string; }; } | - |
__namedParameters.overrides.core.motion.duration? | { lg?: string; md?: string; none?: string; sm?: string; xl?: string; xs?: string; } | - |
__namedParameters.overrides.core.motion.duration.lg? | string | - |
__namedParameters.overrides.core.motion.duration.md? | string | - |
__namedParameters.overrides.core.motion.duration.none? | string | - |
__namedParameters.overrides.core.motion.duration.sm? | string | - |
__namedParameters.overrides.core.motion.duration.xl? | string | - |
__namedParameters.overrides.core.motion.duration.xs? | string | - |
__namedParameters.overrides.core.motion.easing? | { enter?: string; exit?: string; linear?: string; standard?: string; } | - |
__namedParameters.overrides.core.motion.easing.enter? | string | - |
__namedParameters.overrides.core.motion.easing.exit? | string | - |
__namedParameters.overrides.core.motion.easing.linear? | string | - |
__namedParameters.overrides.core.motion.easing.standard? | string | - |
__namedParameters.overrides.core.opacity? | { 0?: number; 100?: number; 25?: number; 50?: number; 75?: number; } | - |
__namedParameters.overrides.core.opacity.0? | number | - |
__namedParameters.overrides.core.opacity.100? | number | - |
__namedParameters.overrides.core.opacity.25? | number | - |
__namedParameters.overrides.core.opacity.50? | number | - |
__namedParameters.overrides.core.opacity.75? | number | - |
__namedParameters.overrides.core.radii? | { full?: string; lg?: string; md?: string; none?: string; sm?: string; xl?: string; } | - |
__namedParameters.overrides.core.radii.full? | string | Fully-rounded intent (9999px). Expresses shape intent — perfect circles still depend on element dimensions. |
__namedParameters.overrides.core.radii.lg? | string | - |
__namedParameters.overrides.core.radii.md? | string | - |
__namedParameters.overrides.core.radii.none? | string | - |
__namedParameters.overrides.core.radii.sm? | string | - |
__namedParameters.overrides.core.radii.xl? | string | - |
__namedParameters.overrides.core.sizing? | { behavior?: { auto?: string; fit?: string; full?: string; max?: string; min?: string; }; hit?: { coarse?: { base?: ...; min?: ...; prominent?: ...; }; fine?: { base?: ...; min?: ...; prominent?: ...; }; }; ramp?: { layout?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; }; ui?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; 7?: ...; 8?: ...; }; }; relative?: { em?: string; rem?: string; }; viewport?: { height?: { full?: ...; }; width?: { full?: ...; }; }; } | - |
__namedParameters.overrides.core.sizing.behavior? | { auto?: string; fit?: string; full?: string; max?: string; min?: string; } | - |
__namedParameters.overrides.core.sizing.behavior.auto? | string | - |
__namedParameters.overrides.core.sizing.behavior.fit? | string | - |
__namedParameters.overrides.core.sizing.behavior.full? | string | - |
__namedParameters.overrides.core.sizing.behavior.max? | string | - |
__namedParameters.overrides.core.sizing.behavior.min? | string | - |
__namedParameters.overrides.core.sizing.hit? | { coarse?: { base?: ...; min?: ...; prominent?: ...; }; fine?: { base?: ...; min?: ...; prominent?: ...; }; } | - |
__namedParameters.overrides.core.sizing.hit.coarse? | { base?: ...; min?: ...; prominent?: ...; } | Coarse pointer (touch) hit targets |
__namedParameters.overrides.core.sizing.hit.coarse.base? | ... | - |
__namedParameters.overrides.core.sizing.hit.coarse.min? | ... | - |
__namedParameters.overrides.core.sizing.hit.coarse.prominent? | ... | - |
__namedParameters.overrides.core.sizing.hit.fine? | { base?: ...; min?: ...; prominent?: ...; } | Fine pointer (mouse/trackpad) hit targets |
__namedParameters.overrides.core.sizing.hit.fine.base? | ... | - |
__namedParameters.overrides.core.sizing.hit.fine.min? | ... | - |
__namedParameters.overrides.core.sizing.hit.fine.prominent? | ... | - |
__namedParameters.overrides.core.sizing.ramp? | { layout?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; }; ui?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; 7?: ...; 8?: ...; }; } | - |
__namedParameters.overrides.core.sizing.ramp.layout? | { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; } | - |
__namedParameters.overrides.core.sizing.ramp.layout.1? | ... | - |
__namedParameters.overrides.core.sizing.ramp.layout.2? | ... | - |
__namedParameters.overrides.core.sizing.ramp.layout.3? | ... | - |
__namedParameters.overrides.core.sizing.ramp.layout.4? | ... | - |
__namedParameters.overrides.core.sizing.ramp.layout.5? | ... | - |
__namedParameters.overrides.core.sizing.ramp.layout.6? | ... | - |
__namedParameters.overrides.core.sizing.ramp.ui? | { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; 7?: ...; 8?: ...; } | - |
__namedParameters.overrides.core.sizing.ramp.ui.1? | ... | - |
__namedParameters.overrides.core.sizing.ramp.ui.2? | ... | - |
__namedParameters.overrides.core.sizing.ramp.ui.3? | ... | - |
__namedParameters.overrides.core.sizing.ramp.ui.4? | ... | - |
__namedParameters.overrides.core.sizing.ramp.ui.5? | ... | - |
__namedParameters.overrides.core.sizing.ramp.ui.6? | ... | - |
__namedParameters.overrides.core.sizing.ramp.ui.7? | ... | - |
__namedParameters.overrides.core.sizing.ramp.ui.8? | ... | - |
__namedParameters.overrides.core.sizing.relative? | { em?: string; rem?: string; } | - |
__namedParameters.overrides.core.sizing.relative.em? | string | - |
__namedParameters.overrides.core.sizing.relative.rem? | string | - |
__namedParameters.overrides.core.sizing.viewport? | { height?: { full?: ...; }; width?: { full?: ...; }; } | - |
__namedParameters.overrides.core.sizing.viewport.height? | { full?: ...; } | - |
__namedParameters.overrides.core.sizing.viewport.height.full? | ... | - |
__namedParameters.overrides.core.sizing.viewport.width? | { full?: ...; } | - |
__namedParameters.overrides.core.sizing.viewport.width.full? | ... | - |
__namedParameters.overrides.core.spacing? | { 0?: string; 1?: string; 12?: string; 16?: string; 2?: string; 3?: string; 4?: string; 6?: string; 8?: string; engine?: { unit?: string; unitCq?: string; }; } | - |
__namedParameters.overrides.core.spacing.0? | string | - |
__namedParameters.overrides.core.spacing.1? | string | - |
__namedParameters.overrides.core.spacing.12? | string | - |
__namedParameters.overrides.core.spacing.16? | string | - |
__namedParameters.overrides.core.spacing.2? | string | - |
__namedParameters.overrides.core.spacing.3? | string | - |
__namedParameters.overrides.core.spacing.4? | string | - |
__namedParameters.overrides.core.spacing.6? | string | - |
__namedParameters.overrides.core.spacing.8? | string | - |
__namedParameters.overrides.core.spacing.engine? | { unit?: string; unitCq?: string; } | Responsive engine primitives — internal, not for direct component use |
__namedParameters.overrides.core.spacing.engine.unit? | string | Responsive base unit — container-first clamp formula |
__namedParameters.overrides.core.spacing.engine.unitCq? | string | Optional container-aware variant |
__namedParameters.overrides.core.zIndex? | { level?: { 0?: number; 1?: number; 2?: number; 3?: number; 4?: number; }; } | - |
__namedParameters.overrides.core.zIndex.level? | { 0?: number; 1?: number; 2?: number; 3?: number; 4?: number; } | - |
__namedParameters.overrides.core.zIndex.level.0? | number | - |
__namedParameters.overrides.core.zIndex.level.1? | number | - |
__namedParameters.overrides.core.zIndex.level.2? | number | - |
__namedParameters.overrides.core.zIndex.level.3? | number | - |
__namedParameters.overrides.core.zIndex.level.4? | number | - |
__namedParameters.overrides.semantic? | { border?: { divider?: { style?: `{core.border.${(...)}}`; width?: `{core.border.${(...)}}`; }; outline?: { control?: { style?: ...; width?: ...; }; selected?: { style?: ...; width?: ...; }; surface?: { style?: ...; width?: ...; }; }; }; colors?: { action?: { accent?: { background?: ...; border?: ...; text?: ...; }; muted?: { background?: ...; border?: ...; text?: ...; }; negative?: { background?: ...; border?: ...; text?: ...; }; primary?: { background?: ...; border?: ...; text?: ...; }; secondary?: { background?: ...; border?: ...; text?: ...; }; }; feedback?: { caution?: { background?: ...; border?: ...; text?: ...; }; muted?: { background?: ...; border?: ...; text?: ...; }; negative?: { background?: ...; border?: ...; text?: ...; }; positive?: { background?: ...; border?: ...; text?: ...; }; primary?: { background?: ...; border?: ...; text?: ...; }; }; informational?: { 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?: { 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?: ...; }; muted?: { background?: ...; border?: ...; text?: ...; }; primary?: { background?: ...; border?: ...; text?: ...; }; secondary?: { background?: ...; border?: ...; text?: ...; }; }; }; dataviz?: { color?: { reference?: { baseline?: ...; target?: ...; }; scale?: { diverging?: ...; sequential?: ...; }; series?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; 7?: ...; 8?: ...; }; state?: { highlight?: ...; muted?: ...; selected?: ...; }; status?: { missing?: ...; na?: ...; suppressed?: ...; }; }; encoding?: { opacity?: { context?: ...; muted?: ...; uncertainty?: ...; }; pattern?: { series?: ...; }; shape?: { series?: ...; }; stroke?: { forecast?: ...; reference?: ...; uncertainty?: ...; }; }; geo?: { context?: { boundary?: ...; label?: ...; muted?: ...; }; state?: { focus?: ...; selection?: ...; }; }; }; elevation?: { surface?: { blocking?: `{core.elevation.${(...)}}`; flat?: `{core.elevation.${(...)}}`; overlay?: `{core.elevation.${(...)}}`; raised?: `{core.elevation.${(...)}}`; }; tonal?: { blocking?: `{core.colors.${(...)}}`; overlay?: `{core.colors.${(...)}}`; raised?: `{core.colors.${(...)}}`; }; }; focus?: { ring?: { color?: `{semantic.${(...)}}`; style?: `{core.border.${(...)}}`; width?: `{core.border.${(...)}}`; }; }; motion?: { decorative?: { duration?: `{core.motion.${(...)}}`; easing?: `{core.motion.${(...)}}`; }; emphasis?: { duration?: `{core.motion.${(...)}}`; easing?: `{core.motion.${(...)}}`; }; feedback?: { duration?: `{core.motion.${(...)}}`; easing?: `{core.motion.${(...)}}`; }; transition?: { enter?: { duration?: ...; easing?: ...; }; exit?: { duration?: ...; easing?: ...; }; }; }; opacity?: { disabled?: `{core.opacity.${string}}`; loading?: `{core.opacity.${string}}`; scrim?: `{core.opacity.${string}}`; }; overlay?: { scrim?: string; }; radii?: { control?: `{core.radii.${string}}`; round?: `{core.radii.${string}}`; surface?: `{core.radii.${string}}`; }; sizing?: { hit?: { base?: `{core.sizing.${(...)}}`; min?: `{core.sizing.${(...)}}`; prominent?: `{core.sizing.${(...)}}`; }; icon?: { lg?: `{core.sizing.${(...)}}`; md?: `{core.sizing.${(...)}}`; sm?: `{core.sizing.${(...)}}`; }; identity?: { lg?: `{core.sizing.${(...)}}`; md?: `{core.sizing.${(...)}}`; sm?: `{core.sizing.${(...)}}`; xl?: `{core.sizing.${(...)}}`; }; measure?: { reading?: string; }; surface?: { maxWidth?: `{core.sizing.${(...)}}`; }; viewport?: { height?: { full?: ...; }; width?: { full?: ...; }; }; }; spacing?: { gap?: { inline?: { lg?: ...; md?: ...; sm?: ...; xl?: ...; xs?: ...; }; stack?: { lg?: ...; md?: ...; sm?: ...; xl?: ...; xs?: ...; }; }; gutter?: { page?: string; section?: string; }; 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?: { layer?: { base?: `{core.zIndex.${(...)}}`; blocking?: `{core.zIndex.${(...)}}`; overlay?: `{core.zIndex.${(...)}}`; sticky?: `{core.zIndex.${(...)}}`; transient?: `{core.zIndex.${(...)}}`; }; }; } | - |
__namedParameters.overrides.semantic.border? | { divider?: { style?: `{core.border.${(...)}}`; width?: `{core.border.${(...)}}`; }; outline?: { control?: { style?: ...; width?: ...; }; selected?: { style?: ...; width?: ...; }; surface?: { style?: ...; width?: ...; }; }; } | - |
__namedParameters.overrides.semantic.border.divider? | { style?: `{core.border.${(...)}}`; width?: `{core.border.${(...)}}`; } | Structural separator between content groups (low emphasis). Use when splitting list rows, sections, toolbar regions, or grouped fields — anywhere the line separates without enclosing. Pair with a low-emphasis color (informational.muted.border.default); do not use to enclose a surface or control — those are outline.surface / outline.control. |
__namedParameters.overrides.semantic.border.divider.style? | `{core.border.${(...)}}` | - |
__namedParameters.overrides.semantic.border.divider.width? | `{core.border.${(...)}}` | - |
__namedParameters.overrides.semantic.border.outline? | { control?: { style?: ...; width?: ...; }; selected?: { style?: ...; width?: ...; }; surface?: { style?: ...; width?: ...; }; } | - |
__namedParameters.overrides.semantic.border.outline.control? | { style?: ...; width?: ...; } | Boundary of an interactive control (button, input, toggle, chip, segmented item). Use when the element is interactive and needs a visible edge at rest. Pair with {ux}.{role}.border.{state} colors per FSL UX context; do not use for containing surfaces — those are outline.surface. |
__namedParameters.overrides.semantic.border.outline.control.style? | ... | - |
__namedParameters.overrides.semantic.border.outline.control.width? | ... | - |
__namedParameters.overrides.semantic.border.outline.selected? | { style?: ...; width?: ...; } | Stronger-thickness boundary expressing selected / current state. Use when selection or current-item status is communicated by line weight (active tab, selected row, chosen card). Resolves to a width strictly greater than outline.{surface,control}. Do not use for keyboard focus — that is semantic.focus.ring. |
__namedParameters.overrides.semantic.border.outline.selected.style? | ... | - |
__namedParameters.overrides.semantic.border.outline.selected.width? | ... | - |
__namedParameters.overrides.semantic.border.outline.surface? | { style?: ...; width?: ...; } | Boundary of a containing surface (card, panel, dialog, menu, grouped region). Use when the element contains other content and needs a visible edge. Pair with informational.{role}.border.{state} colors and (optionally) semantic.elevation.surface.*; do not use for interactive controls — those are outline.control. |
__namedParameters.overrides.semantic.border.outline.surface.style? | ... | - |
__namedParameters.overrides.semantic.border.outline.surface.width? | ... | - |
__namedParameters.overrides.semantic.colors? | { action?: { accent?: { background?: ...; border?: ...; text?: ...; }; muted?: { background?: ...; border?: ...; text?: ...; }; negative?: { background?: ...; border?: ...; text?: ...; }; primary?: { background?: ...; border?: ...; text?: ...; }; secondary?: { background?: ...; border?: ...; text?: ...; }; }; feedback?: { caution?: { background?: ...; border?: ...; text?: ...; }; muted?: { background?: ...; border?: ...; text?: ...; }; negative?: { background?: ...; border?: ...; text?: ...; }; positive?: { background?: ...; border?: ...; text?: ...; }; primary?: { background?: ...; border?: ...; text?: ...; }; }; informational?: { 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?: { 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?: ...; }; muted?: { background?: ...; border?: ...; text?: ...; }; primary?: { background?: ...; border?: ...; text?: ...; }; secondary?: { background?: ...; border?: ...; text?: ...; }; }; } | - |
__namedParameters.overrides.semantic.colors.action? | { accent?: { background?: ...; border?: ...; text?: ...; }; muted?: { background?: ...; border?: ...; text?: ...; }; negative?: { background?: ...; border?: ...; text?: ...; }; primary?: { background?: ...; border?: ...; text?: ...; }; secondary?: { background?: ...; border?: ...; text?: ...; }; } | Anything the user triggers — buttons, toggles, menu items, action icons. Pick when the user is about to act. |
__namedParameters.overrides.semantic.colors.action.accent? | { background?: ...; border?: ...; text?: ...; } | Highlighted action that draws attention without being the main path ("Try the new…" promo button). |
__namedParameters.overrides.semantic.colors.action.accent.background? | ... | Fills and surface backgrounds. Use for any colored area larger than a line. |
__namedParameters.overrides.semantic.colors.action.accent.border? | ... | Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.borders.* instead — this dimension is colour only. |
__namedParameters.overrides.semantic.colors.action.accent.text? | ... | Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor. |
__namedParameters.overrides.semantic.colors.action.muted? | { background?: ...; border?: ...; text?: ...; } | Low-priority action — helper button, optional control, dismiss / cancel ghost. |
__namedParameters.overrides.semantic.colors.action.muted.background? | ... | Fills and surface backgrounds. Use for any colored area larger than a line. |
__namedParameters.overrides.semantic.colors.action.muted.border? | ... | Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.borders.* instead — this dimension is colour only. |
__namedParameters.overrides.semantic.colors.action.muted.text? | ... | Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor. |
__namedParameters.overrides.semantic.colors.action.negative? | { background?: ...; border?: ...; text?: ...; } | Action whose intent is adverse: failure, invalid result, or destructive consequence (delete, cancel paid plan). Outcome (success / warning) lives in feedback.*, not here. |
__namedParameters.overrides.semantic.colors.action.negative.background? | ... | Fills and surface backgrounds. Use for any colored area larger than a line. |
__namedParameters.overrides.semantic.colors.action.negative.border? | ... | Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.borders.* instead — this dimension is colour only. |
__namedParameters.overrides.semantic.colors.action.negative.text? | ... | Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor. |
__namedParameters.overrides.semantic.colors.action.primary? | { background?: ...; border?: ...; text?: ...; } | The single most important action on the view. Only one primary per {ux} per view — if two compete, the loser is secondary. |
__namedParameters.overrides.semantic.colors.action.primary.background? | ... | Fills and surface backgrounds. Use for any colored area larger than a line. |
__namedParameters.overrides.semantic.colors.action.primary.border? | ... | Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.borders.* instead — this dimension is colour only. |
__namedParameters.overrides.semantic.colors.action.primary.text? | ... | Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor. |
__namedParameters.overrides.semantic.colors.action.secondary? | { background?: ...; border?: ...; text?: ...; } | Alternative action that coexists with the primary one. Use when two actions share the surface and neither dominates. |
__namedParameters.overrides.semantic.colors.action.secondary.background? | ... | Fills and surface backgrounds. Use for any colored area larger than a line. |
__namedParameters.overrides.semantic.colors.action.secondary.border? | ... | Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.borders.* instead — this dimension is colour only. |
__namedParameters.overrides.semantic.colors.action.secondary.text? | ... | Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor. |
__namedParameters.overrides.semantic.colors.feedback? | { caution?: { background?: ...; border?: ...; text?: ...; }; muted?: { background?: ...; border?: ...; text?: ...; }; negative?: { background?: ...; border?: ...; text?: ...; }; positive?: { background?: ...; border?: ...; text?: ...; }; primary?: { background?: ...; border?: ...; text?: ...; }; } | Surfaces that report the outcome of an action or system event — toasts, alerts, banners, inline validation. Pick when the system is reporting back. |
__namedParameters.overrides.semantic.colors.feedback.caution? | { background?: ...; border?: ...; text?: ...; } | Feedback reporting risk that needs attention but does not block the user. |
__namedParameters.overrides.semantic.colors.feedback.caution.background? | ... | Fills and surface backgrounds. Use for any colored area larger than a line. |
__namedParameters.overrides.semantic.colors.feedback.caution.border? | ... | Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.borders.* instead — this dimension is colour only. |
__namedParameters.overrides.semantic.colors.feedback.caution.text? | ... | Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor. |
__namedParameters.overrides.semantic.colors.feedback.muted? | { background?: ...; border?: ...; text?: ...; } | Quiet feedback that should not steal attention — inline hints, low-priority status text. |
__namedParameters.overrides.semantic.colors.feedback.muted.background? | ... | Fills and surface backgrounds. Use for any colored area larger than a line. |
__namedParameters.overrides.semantic.colors.feedback.muted.border? | ... | Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.borders.* instead — this dimension is colour only. |
__namedParameters.overrides.semantic.colors.feedback.muted.text? | ... | Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor. |
__namedParameters.overrides.semantic.colors.feedback.negative? | { background?: ...; border?: ...; text?: ...; } | Feedback reporting failure or an invalid system state. |
__namedParameters.overrides.semantic.colors.feedback.negative.background? | ... | Fills and surface backgrounds. Use for any colored area larger than a line. |
__namedParameters.overrides.semantic.colors.feedback.negative.border? | ... | Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.borders.* instead — this dimension is colour only. |
__namedParameters.overrides.semantic.colors.feedback.negative.text? | ... | Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor. |
__namedParameters.overrides.semantic.colors.feedback.positive? | { background?: ...; border?: ...; text?: ...; } | Feedback reporting success, completion, or validity confirmed. |
__namedParameters.overrides.semantic.colors.feedback.positive.background? | ... | Fills and surface backgrounds. Use for any colored area larger than a line. |
__namedParameters.overrides.semantic.colors.feedback.positive.border? | ... | Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.borders.* instead — this dimension is colour only. |
__namedParameters.overrides.semantic.colors.feedback.positive.text? | ... | Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor. |
__namedParameters.overrides.semantic.colors.feedback.primary? | { background?: ...; border?: ...; text?: ...; } | Neutral / informational feedback that carries no valence — "Auto-saved", "Connected". |
__namedParameters.overrides.semantic.colors.feedback.primary.background? | ... | Fills and surface backgrounds. Use for any colored area larger than a line. |
__namedParameters.overrides.semantic.colors.feedback.primary.border? | ... | Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.borders.* instead — this dimension is colour only. |
__namedParameters.overrides.semantic.colors.feedback.primary.text? | ... | Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor. |
__namedParameters.overrides.semantic.colors.informational? | { 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?: ...; }; } | Presentational surfaces — hold, group, layer, frame, or display content; never drive a transaction. Body text, page backgrounds, cards, panels, dialogs, dividers, list rows, accordions. Interactivity is not a tiebreaker: a focusable Card or expandable accordion is still informational — its purpose is presentational. Focusability is covered by semantic.focus.ring.*; disclosure by the expanded state. |
__namedParameters.overrides.semantic.colors.informational.accent? | { background?: ...; border?: ...; text?: ...; } | Highlighted content that draws attention without being the main path — featured callout, promo tile. |
__namedParameters.overrides.semantic.colors.informational.accent.background? | ... | Fills and surface backgrounds. Use for any colored area larger than a line. |
__namedParameters.overrides.semantic.colors.informational.accent.border? | ... | Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.borders.* instead — this dimension is colour only. |
__namedParameters.overrides.semantic.colors.informational.accent.text? | ... | Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor. |
__namedParameters.overrides.semantic.colors.informational.caution? | { background?: ...; border?: ...; text?: ...; } | Informational surface or text carrying caution — warning panel, advisory note. |
__namedParameters.overrides.semantic.colors.informational.caution.background? | ... | Fills and surface backgrounds. Use for any colored area larger than a line. |
__namedParameters.overrides.semantic.colors.informational.caution.border? | ... | Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.borders.* instead — this dimension is colour only. |
__namedParameters.overrides.semantic.colors.informational.caution.text? | ... | Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor. |
__namedParameters.overrides.semantic.colors.informational.muted? | { background?: ...; border?: ...; text?: ...; } | Low-priority content — helper text, dividers, captions, metadata. |
__namedParameters.overrides.semantic.colors.informational.muted.background? | ... | Fills and surface backgrounds. Use for any colored area larger than a line. |
__namedParameters.overrides.semantic.colors.informational.muted.border? | ... | Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.borders.* instead — this dimension is colour only. |
__namedParameters.overrides.semantic.colors.informational.muted.text? | ... | Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor. |
__namedParameters.overrides.semantic.colors.informational.negative? | { background?: ...; border?: ...; text?: ...; } | Informational surface or text reporting failure or invalid state — error empty state, broken-state panel. |
__namedParameters.overrides.semantic.colors.informational.negative.background? | ... | Fills and surface backgrounds. Use for any colored area larger than a line. |
__namedParameters.overrides.semantic.colors.informational.negative.border? | ... | Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.borders.* instead — this dimension is colour only. |
__namedParameters.overrides.semantic.colors.informational.negative.text? | ... | Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor. |
__namedParameters.overrides.semantic.colors.informational.positive? | { background?: ...; border?: ...; text?: ...; } | Informational surface or text reporting success / completion (e.g. "All up to date" empty state). |
__namedParameters.overrides.semantic.colors.informational.positive.background? | ... | Fills and surface backgrounds. Use for any colored area larger than a line. |
__namedParameters.overrides.semantic.colors.informational.positive.border? | ... | Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.borders.* instead — this dimension is colour only. |
__namedParameters.overrides.semantic.colors.informational.positive.text? | ... | Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor. |
__namedParameters.overrides.semantic.colors.informational.primary? | { background?: ...; border?: ...; text?: ...; } | Dominant content / surface on the view — page background, main panel, the card the user is reading. |
__namedParameters.overrides.semantic.colors.informational.primary.background? | ... | Fills and surface backgrounds. Use for any colored area larger than a line. |
__namedParameters.overrides.semantic.colors.informational.primary.border? | ... | Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.borders.* instead — this dimension is colour only. |
__namedParameters.overrides.semantic.colors.informational.primary.text? | ... | Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor. |
__namedParameters.overrides.semantic.colors.informational.secondary? | { background?: ...; border?: ...; text?: ...; } | Supporting content / surface coexisting with primary — sidebar panel, secondary card. |
__namedParameters.overrides.semantic.colors.informational.secondary.background? | ... | Fills and surface backgrounds. Use for any colored area larger than a line. |
__namedParameters.overrides.semantic.colors.informational.secondary.border? | ... | Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.borders.* instead — this dimension is colour only. |
__namedParameters.overrides.semantic.colors.informational.secondary.text? | ... | Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor. |
__namedParameters.overrides.semantic.colors.input? | { caution?: { background?: ...; border?: ...; text?: ...; }; muted?: { background?: ...; border?: ...; text?: ...; }; negative?: { background?: ...; border?: ...; text?: ...; }; positive?: { background?: ...; border?: ...; text?: ...; }; primary?: { background?: ...; border?: ...; text?: ...; }; secondary?: { background?: ...; border?: ...; text?: ...; }; } | Anything the user enters or selects data into — text fields, selects, checkboxes, radios. Pick when the user is about to type / pick a value. |
__namedParameters.overrides.semantic.colors.input.caution? | { background?: ...; border?: ...; text?: ...; } | Input whose value carries risk that needs attention but does not block submission. |
__namedParameters.overrides.semantic.colors.input.caution.background? | ... | Fills and surface backgrounds. Use for any colored area larger than a line. |
__namedParameters.overrides.semantic.colors.input.caution.border? | ... | Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.borders.* instead — this dimension is colour only. |
__namedParameters.overrides.semantic.colors.input.caution.text? | ... | Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor. |
__namedParameters.overrides.semantic.colors.input.muted? | { background?: ...; border?: ...; text?: ...; } | Low-priority input — quiet text field, ghost search, optional metadata input. |
__namedParameters.overrides.semantic.colors.input.muted.background? | ... | Fills and surface backgrounds. Use for any colored area larger than a line. |
__namedParameters.overrides.semantic.colors.input.muted.border? | ... | Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.borders.* instead — this dimension is colour only. |
__namedParameters.overrides.semantic.colors.input.muted.text? | ... | Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor. |
__namedParameters.overrides.semantic.colors.input.negative? | { background?: ...; border?: ...; text?: ...; } | Input whose value failed validation — maps from React Aria isInvalid. Validation failure is not a state on primary; it selects this role (FSL Lexicon §5). |
__namedParameters.overrides.semantic.colors.input.negative.background? | ... | Fills and surface backgrounds. Use for any colored area larger than a line. |
__namedParameters.overrides.semantic.colors.input.negative.border? | ... | Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.borders.* instead — this dimension is colour only. |
__namedParameters.overrides.semantic.colors.input.negative.text? | ... | Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor. |
__namedParameters.overrides.semantic.colors.input.positive? | { background?: ...; border?: ...; text?: ...; } | Input whose value reports success / completion / validity confirmed (e.g. "available" username field after async check). |
__namedParameters.overrides.semantic.colors.input.positive.background? | ... | Fills and surface backgrounds. Use for any colored area larger than a line. |
__namedParameters.overrides.semantic.colors.input.positive.border? | ... | Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.borders.* instead — this dimension is colour only. |
__namedParameters.overrides.semantic.colors.input.positive.text? | ... | Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor. |
__namedParameters.overrides.semantic.colors.input.primary? | { background?: ...; border?: ...; text?: ...; } | Default input role — the brand-influenced active style for the canonical control on the form. |
__namedParameters.overrides.semantic.colors.input.primary.background? | ... | Fills and surface backgrounds. Use for any colored area larger than a line. |
__namedParameters.overrides.semantic.colors.input.primary.border? | ... | Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.borders.* instead — this dimension is colour only. |
__namedParameters.overrides.semantic.colors.input.primary.text? | ... | Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor. |
__namedParameters.overrides.semantic.colors.input.secondary? | { background?: ...; border?: ...; text?: ...; } | Alternative input role coexisting with primary — e.g. a secondary search field on the same surface. |
__namedParameters.overrides.semantic.colors.input.secondary.background? | ... | Fills and surface backgrounds. Use for any colored area larger than a line. |
__namedParameters.overrides.semantic.colors.input.secondary.border? | ... | Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.borders.* instead — this dimension is colour only. |
__namedParameters.overrides.semantic.colors.input.secondary.text? | ... | Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor. |
__namedParameters.overrides.semantic.colors.navigation? | { accent?: { background?: ...; border?: ...; text?: ...; }; muted?: { background?: ...; border?: ...; text?: ...; }; primary?: { background?: ...; border?: ...; text?: ...; }; secondary?: { background?: ...; border?: ...; text?: ...; }; } | Anything that moves the user between views or sections — links, tabs, breadcrumbs, pagination. Pick when the user is about to go somewhere. |
__namedParameters.overrides.semantic.colors.navigation.accent? | { background?: ...; border?: ...; text?: ...; } | Highlighted nav item that draws attention without being the main path — "What's new", featured destination. |
__namedParameters.overrides.semantic.colors.navigation.accent.background? | ... | Fills and surface backgrounds. Use for any colored area larger than a line. |
__namedParameters.overrides.semantic.colors.navigation.accent.border? | ... | Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.borders.* instead — this dimension is colour only. |
__namedParameters.overrides.semantic.colors.navigation.accent.text? | ... | Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor. |
__namedParameters.overrides.semantic.colors.navigation.muted? | { background?: ...; border?: ...; text?: ...; } | Low-priority nav — footer links, breadcrumb separators, optional sub-items. |
__namedParameters.overrides.semantic.colors.navigation.muted.background? | ... | Fills and surface backgrounds. Use for any colored area larger than a line. |
__namedParameters.overrides.semantic.colors.navigation.muted.border? | ... | Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.borders.* instead — this dimension is colour only. |
__namedParameters.overrides.semantic.colors.navigation.muted.text? | ... | Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor. |
__namedParameters.overrides.semantic.colors.navigation.primary? | { background?: ...; border?: ...; text?: ...; } | The dominant navigation surface on the view — main top nav, primary sidebar. |
__namedParameters.overrides.semantic.colors.navigation.primary.background? | ... | Fills and surface backgrounds. Use for any colored area larger than a line. |
__namedParameters.overrides.semantic.colors.navigation.primary.border? | ... | Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.borders.* instead — this dimension is colour only. |
__namedParameters.overrides.semantic.colors.navigation.primary.text? | ... | Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor. |
__namedParameters.overrides.semantic.colors.navigation.secondary? | { background?: ...; border?: ...; text?: ...; } | Secondary navigation that coexists with the primary one — sub-nav, in-page tabs. |
__namedParameters.overrides.semantic.colors.navigation.secondary.background? | ... | Fills and surface backgrounds. Use for any colored area larger than a line. |
__namedParameters.overrides.semantic.colors.navigation.secondary.border? | ... | Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.borders.* instead — this dimension is colour only. |
__namedParameters.overrides.semantic.colors.navigation.secondary.text? | ... | Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor. |
__namedParameters.overrides.semantic.dataviz? | { color?: { reference?: { baseline?: ...; target?: ...; }; scale?: { diverging?: ...; sequential?: ...; }; series?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; 7?: ...; 8?: ...; }; state?: { highlight?: ...; muted?: ...; selected?: ...; }; status?: { missing?: ...; na?: ...; suppressed?: ...; }; }; encoding?: { opacity?: { context?: ...; muted?: ...; uncertainty?: ...; }; pattern?: { series?: ...; }; shape?: { series?: ...; }; stroke?: { forecast?: ...; reference?: ...; uncertainty?: ...; }; }; geo?: { context?: { boundary?: ...; label?: ...; muted?: ...; }; state?: { focus?: ...; selection?: ...; }; }; } | Data Visualization extension — semantic roles for analytical color, non-color encodings, and geospatial overlays. Optional: omit when the theme does not support dataviz. This is the public API of the dataviz extension. Components consume these tokens; never core.dataviz.* directly. |
__namedParameters.overrides.semantic.dataviz.color? | { reference?: { baseline?: ...; target?: ...; }; scale?: { diverging?: ...; sequential?: ...; }; series?: { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; 7?: ...; 8?: ...; }; state?: { highlight?: ...; muted?: ...; selected?: ...; }; status?: { missing?: ...; na?: ...; suppressed?: ...; }; } | - |
__namedParameters.overrides.semantic.dataviz.color.reference? | { baseline?: ...; target?: ...; } | - |
__namedParameters.overrides.semantic.dataviz.color.reference.baseline? | ... | Color for a baseline or reference level (e.g. average, goal). |
__namedParameters.overrides.semantic.dataviz.color.reference.target? | ... | Color for a target or objective line. |
__namedParameters.overrides.semantic.dataviz.color.scale? | { diverging?: ...; sequential?: ...; } | - |
__namedParameters.overrides.semantic.dataviz.color.scale.diverging? | ... | Midpoint comparison — 7 named positions around a true center. Only use when the data has a meaningful midpoint (zero, baseline, target). |
__namedParameters.overrides.semantic.dataviz.color.scale.sequential? | ... | Ordered magnitude — 7 steps from low (1) to high (7). Use for quantitative ranges and progressive intensity. |
__namedParameters.overrides.semantic.dataviz.color.series? | { 1?: ...; 2?: ...; 3?: ...; 4?: ...; 5?: ...; 6?: ...; 7?: ...; 8?: ...; } | Categorical series identity — 8 named, unordered roles. Use for nominal categories, named series, distinct groups. |
__namedParameters.overrides.semantic.dataviz.color.series.1? | ... | - |
__namedParameters.overrides.semantic.dataviz.color.series.2? | ... | - |
__namedParameters.overrides.semantic.dataviz.color.series.3? | ... | - |
__namedParameters.overrides.semantic.dataviz.color.series.4? | ... | - |
__namedParameters.overrides.semantic.dataviz.color.series.5? | ... | - |
__namedParameters.overrides.semantic.dataviz.color.series.6? | ... | - |
__namedParameters.overrides.semantic.dataviz.color.series.7? | ... | - |
__namedParameters.overrides.semantic.dataviz.color.series.8? | ... | - |
__namedParameters.overrides.semantic.dataviz.color.state? | { highlight?: ...; muted?: ...; selected?: ...; } | - |
__namedParameters.overrides.semantic.dataviz.color.state.highlight? | ... | Emphasized / highlighted data mark. |
__namedParameters.overrides.semantic.dataviz.color.state.muted? | ... | De-emphasized / non-highlighted data mark. |
__namedParameters.overrides.semantic.dataviz.color.state.selected? | ... | User-selected or actively focused data mark. |
__namedParameters.overrides.semantic.dataviz.color.status? | { missing?: ...; na?: ...; suppressed?: ...; } | - |
__namedParameters.overrides.semantic.dataviz.color.status.missing? | ... | Value is absent or unavailable. |
__namedParameters.overrides.semantic.dataviz.color.status.na? | ... | Value is structurally absent (not measured or not applicable). |
__namedParameters.overrides.semantic.dataviz.color.status.suppressed? | ... | Value is withheld for confidentiality or publication rules. |
__namedParameters.overrides.semantic.dataviz.encoding? | { opacity?: { context?: ...; muted?: ...; uncertainty?: ...; }; pattern?: { series?: ...; }; shape?: { series?: ...; }; stroke?: { forecast?: ...; reference?: ...; uncertainty?: ...; }; } | - |
__namedParameters.overrides.semantic.dataviz.encoding.opacity? | { context?: ...; muted?: ...; uncertainty?: ...; } | - |
__namedParameters.overrides.semantic.dataviz.encoding.opacity.context? | ... | Opacity for contextual elements behind overlay data. |
__namedParameters.overrides.semantic.dataviz.encoding.opacity.muted? | ... | Opacity for de-emphasized (non-highlighted) data marks. |
__namedParameters.overrides.semantic.dataviz.encoding.opacity.uncertainty? | ... | Opacity for representing estimated or uncertain data visually. |
__namedParameters.overrides.semantic.dataviz.encoding.pattern? | { series?: ...; } | - |
__namedParameters.overrides.semantic.dataviz.encoding.pattern.series? | ... | Series identity through fill texture — use for filled marks and overlays. |
__namedParameters.overrides.semantic.dataviz.encoding.shape? | { series?: ...; } | - |
__namedParameters.overrides.semantic.dataviz.encoding.shape.series? | ... | Series identity through mark shape — use for redundant differentiation. |
__namedParameters.overrides.semantic.dataviz.encoding.stroke? | { forecast?: ...; reference?: ...; uncertainty?: ...; } | - |
__namedParameters.overrides.semantic.dataviz.encoding.stroke.forecast? | ... | Stroke style for projected or forward-looking data segments. |
__namedParameters.overrides.semantic.dataviz.encoding.stroke.reference? | ... | Stroke style for analytical reference guides or baselines. |
__namedParameters.overrides.semantic.dataviz.encoding.stroke.uncertainty? | ... | Stroke style for uncertain or estimated bounds. |
__namedParameters.overrides.semantic.dataviz.geo? | { context?: { boundary?: ...; label?: ...; muted?: ...; }; state?: { focus?: ...; selection?: ...; }; } | - |
__namedParameters.overrides.semantic.dataviz.geo.context? | { boundary?: ...; label?: ...; muted?: ...; } | - |
__namedParameters.overrides.semantic.dataviz.geo.context.boundary? | ... | Color for supportive boundary lines (region outlines, coastlines). |
__namedParameters.overrides.semantic.dataviz.geo.context.label? | ... | Color for contextual geographic labels (city names, region labels). |
__namedParameters.overrides.semantic.dataviz.geo.context.muted? | ... | Reduced background wash for geographic base layer. |
__namedParameters.overrides.semantic.dataviz.geo.state? | { focus?: ...; selection?: ...; } | - |
__namedParameters.overrides.semantic.dataviz.geo.state.focus? | ... | Fill or stroke for spatially focused region (keyboard / pointer focus). |
__namedParameters.overrides.semantic.dataviz.geo.state.selection? | ... | Fill or stroke for a spatially selected region. |
__namedParameters.overrides.semantic.elevation? | { surface?: { blocking?: `{core.elevation.${(...)}}`; flat?: `{core.elevation.${(...)}}`; overlay?: `{core.elevation.${(...)}}`; raised?: `{core.elevation.${(...)}}`; }; tonal?: { blocking?: `{core.colors.${(...)}}`; overlay?: `{core.colors.${(...)}}`; raised?: `{core.colors.${(...)}}`; }; } | - |
__namedParameters.overrides.semantic.elevation.surface? | { blocking?: `{core.elevation.${(...)}}`; flat?: `{core.elevation.${(...)}}`; overlay?: `{core.elevation.${(...)}}`; raised?: `{core.elevation.${(...)}}`; } | Shadow-based surface strata — the primary depth contract. Maps each stratum to a shadow recipe (core elevation reference). |
__namedParameters.overrides.semantic.elevation.surface.blocking? | `{core.elevation.${(...)}}` | Dialogs and blocking sheets |
__namedParameters.overrides.semantic.elevation.surface.flat? | `{core.elevation.${(...)}}` | Surfaces flush with the page |
__namedParameters.overrides.semantic.elevation.surface.overlay? | `{core.elevation.${(...)}}` | Dropdowns, popovers, floating surfaces |
__namedParameters.overrides.semantic.elevation.surface.raised? | `{core.elevation.${(...)}}` | Cards and panels |
__namedParameters.overrides.semantic.elevation.tonal? | { blocking?: `{core.colors.${(...)}}`; overlay?: `{core.colors.${(...)}}`; raised?: `{core.colors.${(...)}}`; } | Tonal overlay tokens — optional surface color treatments paired with shadows to preserve depth perception in dark or heavily-colored themes. Each token typically resolves to a color overlay (e.g., color-mix, rgba surface). Omit when the product does not use tonal elevation. When present, must cover the same strata that carry visible shadows. See elevation.md — "Surface + Shadow" |
__namedParameters.overrides.semantic.elevation.tonal.blocking? | `{core.colors.${(...)}}` | Tonal surface treatment paired with surface.blocking. Use when the blocking stratum (dialogs, sheets) needs the strongest tonal separation from the page beneath the scrim. Pair with surface.blocking and semantic.overlay.scrim; resolves to the strongest tonal overlay in the contract. |
__namedParameters.overrides.semantic.elevation.tonal.overlay? | `{core.colors.${(...)}}` | Tonal surface treatment paired with surface.overlay. Use when the overlay stratum (dropdowns, popovers) needs reinforced tonal lift over the page beneath. Pair with surface.overlay; resolves to a stronger overlay than tonal.raised. |
__namedParameters.overrides.semantic.elevation.tonal.raised? | `{core.colors.${(...)}}` | Tonal surface treatment paired with surface.raised. Use when the raised stratum needs an additional color overlay (typical in dark themes where shadow alone is insufficient). Pair with surface.raised; do not use without the matching shadow contract. |
__namedParameters.overrides.semantic.focus? | { ring?: { color?: `{semantic.${(...)}}`; style?: `{core.border.${(...)}}`; width?: `{core.border.${(...)}}`; }; } | - |
__namedParameters.overrides.semantic.focus.ring? | { color?: `{semantic.${(...)}}`; style?: `{core.border.${(...)}}`; width?: `{core.border.${(...)}}`; } | - |
__namedParameters.overrides.semantic.focus.ring.color? | `{semantic.${(...)}}` | System-wide focus ring colour — cross-cutting infrastructure (model.md §6). Use this when the component has no obvious FSL Entity Kind (focusable Card, profile chip, custom widget). For components with a clear {ux}, prefer {ux}.{role}.border.focused instead. Must reference a semantic token so mode overrides remap it automatically. |
__namedParameters.overrides.semantic.focus.ring.style? | `{core.border.${(...)}}` | - |
__namedParameters.overrides.semantic.focus.ring.width? | `{core.border.${(...)}}` | - |
__namedParameters.overrides.semantic.motion? | { decorative?: { duration?: `{core.motion.${(...)}}`; easing?: `{core.motion.${(...)}}`; }; emphasis?: { duration?: `{core.motion.${(...)}}`; easing?: `{core.motion.${(...)}}`; }; feedback?: { duration?: `{core.motion.${(...)}}`; easing?: `{core.motion.${(...)}}`; }; transition?: { enter?: { duration?: ...; easing?: ...; }; exit?: { duration?: ...; easing?: ...; }; }; } | - |
__namedParameters.overrides.semantic.motion.decorative? | { duration?: `{core.motion.${(...)}}`; easing?: `{core.motion.${(...)}}`; } | Ambient, non-essential motion (loops, parallax, idle flourishes). Use only when motion is never required for understanding the UI. Always disabled by default in static or reduced-motion themes; do not use for any motion the user must perceive to operate the interface. |
__namedParameters.overrides.semantic.motion.decorative.duration? | `{core.motion.${(...)}}` | - |
__namedParameters.overrides.semantic.motion.decorative.easing? | `{core.motion.${(...)}}` | - |
__namedParameters.overrides.semantic.motion.emphasis? | { duration?: `{core.motion.${(...)}}`; easing?: `{core.motion.${(...)}}`; } | Attention-drawing motion for a relevant in-place change. Use when the user must notice that something changed (status update, value reconciliation, error appearing on a field). Stronger than feedback; do not use for routine state changes — that is feedback. May collapse to minimal motion in static themes. |
__namedParameters.overrides.semantic.motion.emphasis.duration? | `{core.motion.${(...)}}` | - |
__namedParameters.overrides.semantic.motion.emphasis.easing? | `{core.motion.${(...)}}` | - |
__namedParameters.overrides.semantic.motion.feedback? | { duration?: `{core.motion.${(...)}}`; easing?: `{core.motion.${(...)}}`; } | Immediate response to a discrete user input on a single element. Use when animating hover, press, toggle, or small confirmation tweaks (color/scale/opacity changes on the element itself). Do not use for elements entering or leaving the layout — those are transition.enter / transition.exit. |
__namedParameters.overrides.semantic.motion.feedback.duration? | `{core.motion.${(...)}}` | - |
__namedParameters.overrides.semantic.motion.feedback.easing? | `{core.motion.${(...)}}` | - |
__namedParameters.overrides.semantic.motion.transition? | { enter?: { duration?: ...; easing?: ...; }; exit?: { duration?: ...; easing?: ...; }; } | - |
__namedParameters.overrides.semantic.motion.transition.enter? | { duration?: ...; easing?: ...; } | Element appearing into rest position (overlay, surface, revealed content). Use when an element transitions from hidden/absent to visible. Pair with transition.exit on the inverse phase; do not use for the resting element's response to input — that is feedback. |
__namedParameters.overrides.semantic.motion.transition.enter.duration? | ... | - |
__namedParameters.overrides.semantic.motion.transition.enter.easing? | ... | - |
__namedParameters.overrides.semantic.motion.transition.exit? | { duration?: ...; easing?: ...; } | Element leaving rest position (overlay closing, content dismissing). Use when an element transitions from visible to hidden/absent. Symmetric counterpart of transition.enter; the exit phase is shorter by default to keep dismissal feeling responsive. |
__namedParameters.overrides.semantic.motion.transition.exit.duration? | ... | - |
__namedParameters.overrides.semantic.motion.transition.exit.easing? | ... | - |
__namedParameters.overrides.semantic.opacity? | { disabled?: `{core.opacity.${string}}`; loading?: `{core.opacity.${string}}`; scrim?: `{core.opacity.${string}}`; } | - |
__namedParameters.overrides.semantic.opacity.disabled? | `{core.opacity.${string}}` | Dimming for image-like media in a disabled state (avatars, thumbnails, illustrations). Use when the disabled element has no semantic color contract that can carry the state (i.e. it is a visual asset, not a control). Do not use for disabled controls or text — those consume {ux}.{role}.{dimension}.disabled color tokens, which carry the contrast guarantees opacity cannot. |
__namedParameters.overrides.semantic.opacity.loading? | `{core.opacity.${string}}` | De-emphasis veil for content during in-flight asynchronous work. Use when content must remain visible (so the user keeps spatial context) while a fetch / mutation / long task is pending. Do not use for permanent disabled state — that is disabled. Remove the moment the work resolves. |
__namedParameters.overrides.semantic.opacity.scrim? | `{core.opacity.${string}}` | Backdrop dimming for a blocking foreground layer. Use when rendering the layer that sits behind a modal, dialog, drawer, or sheet to attenuate the page underneath. Pair with semantic.overlay.scrim (the colored backdrop fill); do not use on the foreground surface itself — that surface stays fully opaque. |
__namedParameters.overrides.semantic.overlay? | { scrim?: string; } | - |
__namedParameters.overrides.semantic.overlay.scrim? | string | Modal backdrop color — full CSS color including alpha. |
__namedParameters.overrides.semantic.radii? | { control?: `{core.radii.${string}}`; round?: `{core.radii.${string}}`; surface?: `{core.radii.${string}}`; } | - |
__namedParameters.overrides.semantic.radii.control? | `{core.radii.${string}}` | Radius for interactive controls and touchable UI elements. |
__namedParameters.overrides.semantic.radii.round? | `{core.radii.${string}}` | Full-round shape intent for pills, capsules, and circular affordances. |
__namedParameters.overrides.semantic.radii.surface? | `{core.radii.${string}}` | Radius for surfaces that contain or group content. |
__namedParameters.overrides.semantic.sizing? | { hit?: { base?: `{core.sizing.${(...)}}`; min?: `{core.sizing.${(...)}}`; prominent?: `{core.sizing.${(...)}}`; }; icon?: { lg?: `{core.sizing.${(...)}}`; md?: `{core.sizing.${(...)}}`; sm?: `{core.sizing.${(...)}}`; }; identity?: { lg?: `{core.sizing.${(...)}}`; md?: `{core.sizing.${(...)}}`; sm?: `{core.sizing.${(...)}}`; xl?: `{core.sizing.${(...)}}`; }; measure?: { reading?: string; }; surface?: { maxWidth?: `{core.sizing.${(...)}}`; }; viewport?: { height?: { full?: ...; }; width?: { full?: ...; }; }; } | - |
__namedParameters.overrides.semantic.sizing.hit? | { base?: `{core.sizing.${(...)}}`; min?: `{core.sizing.${(...)}}`; prominent?: `{core.sizing.${(...)}}`; } | Ergonomic hit targets. Each token resolves to the fine-pointer value. The CSS output layer (toCssVars) automatically injects coarse-pointer overrides inside @media (any-pointer: coarse) — no component code needed. Fine-pointer values (core.sizing.hit.fine.*) may use clamp(floor, preferred, max) where floor is a fixed Npx ergonomic minimum — this guarantees accessibility while allowing themes to express density preferences (e.g. via the rem scale). Coarse-pointer values (core.sizing.hit.coarse.*) are always fixed px. |
__namedParameters.overrides.semantic.sizing.hit.base? | `{core.sizing.${(...)}}` | Default interactive area for standard buttons, inputs, and toggles. Pick when no other step applies. |
__namedParameters.overrides.semantic.sizing.hit.min? | `{core.sizing.${(...)}}` | Minimum interactive area for small / secondary targets (icon-only buttons, toolbar items). Enforce via min-width / min-height; not a visual size. |
__namedParameters.overrides.semantic.sizing.hit.prominent? | `{core.sizing.${(...)}}` | Prominent interactive area for high-emphasis or low-density targets (CTAs, dialog actions). |
__namedParameters.overrides.semantic.sizing.icon? | { lg?: `{core.sizing.${(...)}}`; md?: `{core.sizing.${(...)}}`; sm?: `{core.sizing.${(...)}}`; } | Visual glyph dimensions. Set on the icon element itself; never used to gate the hit target that wraps it (that is hit.*). |
__namedParameters.overrides.semantic.sizing.icon.lg? | `{core.sizing.${(...)}}` | Prominent glyph — emphasis or feature icons. |
__namedParameters.overrides.semantic.sizing.icon.md? | `{core.sizing.${(...)}}` | Default glyph — pick this when no other step applies. |
__namedParameters.overrides.semantic.sizing.icon.sm? | `{core.sizing.${(...)}}` | Compact glyph — dense UI, inline indicators, list-row icons. |
__namedParameters.overrides.semantic.sizing.identity? | { lg?: `{core.sizing.${(...)}}`; md?: `{core.sizing.${(...)}}`; sm?: `{core.sizing.${(...)}}`; xl?: `{core.sizing.${(...)}}`; } | Visual identity object dimensions (avatars, profile photos, brand marks, entity logos). Carries the visual size only — the surrounding hit target, if any, is sized via hit.*. |
__namedParameters.overrides.semantic.sizing.identity.lg? | `{core.sizing.${(...)}}` | Prominent identity — profile cards, feature surfaces. |
__namedParameters.overrides.semantic.sizing.identity.md? | `{core.sizing.${(...)}}` | Default identity — toolbar, navigation, standard avatar slots. |
__namedParameters.overrides.semantic.sizing.identity.sm? | `{core.sizing.${(...)}}` | Compact identity — list rows, dense lists, mention chips. |
__namedParameters.overrides.semantic.sizing.identity.xl? | `{core.sizing.${(...)}}` | Hero identity — landing surfaces, brand-leading sections. |
__namedParameters.overrides.semantic.sizing.measure? | { reading?: string; } | - |
__namedParameters.overrides.semantic.sizing.measure.reading? | string | Typed as RawValue by design: ch units cannot be expressed as a core token reference. Override with a validated character-based clamp() expression only — never px or rem. |
__namedParameters.overrides.semantic.sizing.surface? | { maxWidth?: `{core.sizing.${(...)}}`; } | - |
__namedParameters.overrides.semantic.sizing.surface.maxWidth? | `{core.sizing.${(...)}}` | Maximum width of a structural surface (page shell, content column, card / panel / dialog wrapper). Use as max-width on the outer surface wrapper. Pair with gutter.page for inline padding; do not use for line-length readability — that is measure.reading. |
__namedParameters.overrides.semantic.sizing.viewport? | { height?: { full?: ...; }; width?: { full?: ...; }; } | - |
__namedParameters.overrides.semantic.sizing.viewport.height? | { full?: ...; } | - |
__namedParameters.overrides.semantic.sizing.viewport.height.full? | ... | Full-height layouts using dynamic viewport units (100dvh). Use intentionally — only when a region must occupy the full viewport height (app shells, full-screen modals, mobile splash regions). Do not use 100vh directly — dynamic units handle mobile chrome correctly. |
__namedParameters.overrides.semantic.sizing.viewport.width? | { full?: ...; } | - |
__namedParameters.overrides.semantic.sizing.viewport.width.full? | ... | Full-width layouts using dynamic viewport units (100dvw). Use intentionally — only when a region must span the full viewport width (full-bleed banners, edge-to-edge surfaces). Do not use 100vw directly — dynamic units avoid scrollbar overflow. |
__namedParameters.overrides.semantic.spacing? | { gap?: { inline?: { lg?: ...; md?: ...; sm?: ...; xl?: ...; xs?: ...; }; stack?: { lg?: ...; md?: ...; sm?: ...; xl?: ...; xs?: ...; }; }; gutter?: { page?: string; section?: string; }; inset?: { control?: { lg?: ...; md?: ...; sm?: ...; }; surface?: { lg?: ...; md?: ...; sm?: ...; }; }; separation?: { interactive?: { min?: ...; }; }; } | - |
__namedParameters.overrides.semantic.spacing.gap? | { inline?: { lg?: ...; md?: ...; sm?: ...; xl?: ...; xs?: ...; }; stack?: { lg?: ...; md?: ...; sm?: ...; xl?: ...; xs?: ...; }; } | Distance between siblings (CSS gap on Flex/Grid containers). Use when laying out a sequence of sibling elements; never for internal padding (that is inset.*) and never for page/section structural padding (that is gutter.*). |
__namedParameters.overrides.semantic.spacing.gap.inline? | { lg?: ...; md?: ...; sm?: ...; xl?: ...; xs?: ...; } | Horizontal grouping between inline siblings (icon + label, toolbar items, chip rows). Use when items flow along the inline axis as a visual group. gap.inline.xs is visual-only — never use it between independently focusable interactive targets (use separation.interactive.min instead). |
__namedParameters.overrides.semantic.spacing.gap.inline.lg? | ... | Spacious inline grouping — same magnitude as gap.stack.md. |
__namedParameters.overrides.semantic.spacing.gap.inline.md? | ... | Looser inline grouping — same magnitude as gap.stack.sm. |
__namedParameters.overrides.semantic.spacing.gap.inline.sm? | ... | Inline grouping — same magnitude as gap.stack.xs. |
__namedParameters.overrides.semantic.spacing.gap.inline.xl? | ... | Wide inline grouping — same magnitude as gap.stack.lg. |
__namedParameters.overrides.semantic.spacing.gap.inline.xs? | ... | Visual-only tight grouping (icon + label inside a single target). Never between focusable targets — use separation.interactive.min. |
__namedParameters.overrides.semantic.spacing.gap.stack? | { lg?: ...; md?: ...; sm?: ...; xl?: ...; xs?: ...; } | Vertical rhythm between stacked siblings (column layouts, lists, form fields). Use when items flow along the block axis and rhythm carries hierarchy. Pair with gap.inline for horizontal groupings; do not use for items arranged along the inline axis — those are gap.inline. |
__namedParameters.overrides.semantic.spacing.gap.stack.lg? | ... | Roomy vertical rhythm — separating distinct content clusters within a surface. |
__namedParameters.overrides.semantic.spacing.gap.stack.md? | ... | Default vertical rhythm — pick this when no other step applies. |
__namedParameters.overrides.semantic.spacing.gap.stack.sm? | ... | Medium vertical rhythm — sibling lines inside a form group. |
__namedParameters.overrides.semantic.spacing.gap.stack.xl? | ... | Section-level rhythm — separating major sections of a page. |
__namedParameters.overrides.semantic.spacing.gap.stack.xs? | ... | Tight vertical rhythm — micro-clusters within a single field. |
__namedParameters.overrides.semantic.spacing.gutter? | { page?: string; section?: string; } | Structural outer padding for page-level and section-level layout regions. page and section may use a clamp() expression with embedded {token.path} refs (e.g. clamp({core.space.4}, {core.space.6}, {core.space.12})). Typed as RawValue to allow both simple refs and responsive clamp expressions. |
__namedParameters.overrides.semantic.spacing.gutter.page? | string | Outer padding bounding the page's content column. Use as inline padding on the top-level page container. Bounded clamp() contract by spec; do not use for inner sections — that is gutter.section. |
__namedParameters.overrides.semantic.spacing.gutter.section? | string | Outer padding separating a section's content from its parent's gutter. Use on inner section wrappers nested inside a gutter.page container. Bounded clamp() contract by spec; resolves tighter than gutter.page. |
__namedParameters.overrides.semantic.spacing.inset? | { control?: { lg?: ...; md?: ...; sm?: ...; }; surface?: { lg?: ...; md?: ...; sm?: ...; }; } | Internal padding inside an element (CSS padding). Use when the spacing lives between an element's edge and its own content; never for the distance between siblings — that is gap.*. |
__namedParameters.overrides.semantic.spacing.inset.control? | { lg?: ...; md?: ...; sm?: ...; } | Padding inside an interactive control (button, input, chip, toggle). Use on elements with a hit target and a single inner content cluster. Pair with inset.surface on the containing surface; do not use for containing surfaces — those are inset.surface. |
__namedParameters.overrides.semantic.spacing.inset.control.lg? | ... | Roomy step — prominent controls / spacious surfaces. |
__namedParameters.overrides.semantic.spacing.inset.control.md? | ... | Default step — standard controls and surfaces. Pick this when no other step applies. |
__namedParameters.overrides.semantic.spacing.inset.control.sm? | ... | Compact step — tight controls / dense surfaces. |
__namedParameters.overrides.semantic.spacing.inset.surface? | { lg?: ...; md?: ...; sm?: ...; } | Padding inside a containing surface (card, panel, dialog, menu, section). Use on elements that contain other content blocks and need a margin between their edge and the inner cluster. Must be ≥ inset.control at the same step (validation rule); do not use for the inner controls themselves — those are inset.control. |
__namedParameters.overrides.semantic.spacing.inset.surface.lg? | ... | Roomy step — prominent controls / spacious surfaces. |
__namedParameters.overrides.semantic.spacing.inset.surface.md? | ... | Default step — standard controls and surfaces. Pick this when no other step applies. |
__namedParameters.overrides.semantic.spacing.inset.surface.sm? | ... | Compact step — tight controls / dense surfaces. |
__namedParameters.overrides.semantic.spacing.separation? | { interactive?: { min?: ...; }; } | Ergonomic separation between independently actionable targets in dense clusters. May use a clamp() expression with an embedded {token.path} ref (e.g. clamp(8px, {core.space.2}, 12px)). |
__namedParameters.overrides.semantic.spacing.separation.interactive? | { min?: ...; } | - |
__namedParameters.overrides.semantic.spacing.separation.interactive.min? | ... | Minimum gap between adjacent interactive targets (toolbar buttons, paginator arrows, segmented controls, dense menu items). Use only between elements the user can click/tap/focus independently. Do not use for visual-only groupings — that is gap.inline.xs. |
__namedParameters.overrides.semantic.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?: ...; }; }; } | - |
__namedParameters.overrides.semantic.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?: ...; }; } | Default reading text — paragraphs, descriptions, long-form content. Use for any text the user will read rather than scan or select. Optimized for readability; do not use for short UI strings or labels — those are label. |
__namedParameters.overrides.semantic.text.body.lg? | { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; } | Largest step of this family — strongest hierarchy within the family. Use for the most prominent instance of this role on the surface. |
__namedParameters.overrides.semantic.text.body.lg.fontFamily? | ... | - |
__namedParameters.overrides.semantic.text.body.lg.fontOpticalSizing? | ... | - |
__namedParameters.overrides.semantic.text.body.lg.fontSize? | ... | - |
__namedParameters.overrides.semantic.text.body.lg.fontVariantNumeric? | ... | - |
__namedParameters.overrides.semantic.text.body.lg.fontWeight? | ... | - |
__namedParameters.overrides.semantic.text.body.lg.letterSpacing? | ... | - |
__namedParameters.overrides.semantic.text.body.lg.lineHeight? | ... | - |
__namedParameters.overrides.semantic.text.body.md? | { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; } | Default step of this family — the unmarked choice. Use unless the surface explicitly calls for lg or sm. |
__namedParameters.overrides.semantic.text.body.md.fontFamily? | ... | - |
__namedParameters.overrides.semantic.text.body.md.fontOpticalSizing? | ... | - |
__namedParameters.overrides.semantic.text.body.md.fontSize? | ... | - |
__namedParameters.overrides.semantic.text.body.md.fontVariantNumeric? | ... | - |
__namedParameters.overrides.semantic.text.body.md.fontWeight? | ... | - |
__namedParameters.overrides.semantic.text.body.md.letterSpacing? | ... | - |
__namedParameters.overrides.semantic.text.body.md.lineHeight? | ... | - |
__namedParameters.overrides.semantic.text.body.sm? | { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; } | Smallest step of this family — compact / dense usage. Use when space is constrained or when the text is secondary within the role. |
__namedParameters.overrides.semantic.text.body.sm.fontFamily? | ... | - |
__namedParameters.overrides.semantic.text.body.sm.fontOpticalSizing? | ... | - |
__namedParameters.overrides.semantic.text.body.sm.fontSize? | ... | - |
__namedParameters.overrides.semantic.text.body.sm.fontVariantNumeric? | ... | - |
__namedParameters.overrides.semantic.text.body.sm.fontWeight? | ... | - |
__namedParameters.overrides.semantic.text.body.sm.letterSpacing? | ... | - |
__namedParameters.overrides.semantic.text.body.sm.lineHeight? | ... | - |
__namedParameters.overrides.semantic.text.code? | { md?: { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; }; sm?: { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; }; } | Monospaced text for code snippets, logs, identifiers, or technical data. Use whenever the text must align by character cell or distinguish similar glyphs (Il1O0). Do not use for UI strings that merely look technical — that is body or label. |
__namedParameters.overrides.semantic.text.code.md? | { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; } | Default step of this family — the unmarked choice. |
__namedParameters.overrides.semantic.text.code.md.fontFamily? | ... | - |
__namedParameters.overrides.semantic.text.code.md.fontOpticalSizing? | ... | - |
__namedParameters.overrides.semantic.text.code.md.fontSize? | ... | - |
__namedParameters.overrides.semantic.text.code.md.fontVariantNumeric? | ... | - |
__namedParameters.overrides.semantic.text.code.md.fontWeight? | ... | - |
__namedParameters.overrides.semantic.text.code.md.letterSpacing? | ... | - |
__namedParameters.overrides.semantic.text.code.md.lineHeight? | ... | - |
__namedParameters.overrides.semantic.text.code.sm? | { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; } | Smallest step of this family — compact / dense usage. |
__namedParameters.overrides.semantic.text.code.sm.fontFamily? | ... | - |
__namedParameters.overrides.semantic.text.code.sm.fontOpticalSizing? | ... | - |
__namedParameters.overrides.semantic.text.code.sm.fontSize? | ... | - |
__namedParameters.overrides.semantic.text.code.sm.fontVariantNumeric? | ... | - |
__namedParameters.overrides.semantic.text.code.sm.fontWeight? | ... | - |
__namedParameters.overrides.semantic.text.code.sm.letterSpacing? | ... | - |
__namedParameters.overrides.semantic.text.code.sm.lineHeight? | ... | - |
__namedParameters.overrides.semantic.text.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?: ...; }; } | High-impact hero text — landing surfaces and prominent page headers. Use sparingly; reserved for the single most important text on a page. Pair with headline for the next hierarchy step; do not use for section headings inside content — those are headline. |
__namedParameters.overrides.semantic.text.display.lg? | { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; } | Largest step of this family — strongest hierarchy within the family. Use for the most prominent instance of this role on the surface. |
__namedParameters.overrides.semantic.text.display.lg.fontFamily? | ... | - |
__namedParameters.overrides.semantic.text.display.lg.fontOpticalSizing? | ... | - |
__namedParameters.overrides.semantic.text.display.lg.fontSize? | ... | - |
__namedParameters.overrides.semantic.text.display.lg.fontVariantNumeric? | ... | - |
__namedParameters.overrides.semantic.text.display.lg.fontWeight? | ... | - |
__namedParameters.overrides.semantic.text.display.lg.letterSpacing? | ... | - |
__namedParameters.overrides.semantic.text.display.lg.lineHeight? | ... | - |
__namedParameters.overrides.semantic.text.display.md? | { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; } | Default step of this family — the unmarked choice. Use unless the surface explicitly calls for lg or sm. |
__namedParameters.overrides.semantic.text.display.md.fontFamily? | ... | - |
__namedParameters.overrides.semantic.text.display.md.fontOpticalSizing? | ... | - |
__namedParameters.overrides.semantic.text.display.md.fontSize? | ... | - |
__namedParameters.overrides.semantic.text.display.md.fontVariantNumeric? | ... | - |
__namedParameters.overrides.semantic.text.display.md.fontWeight? | ... | - |
__namedParameters.overrides.semantic.text.display.md.letterSpacing? | ... | - |
__namedParameters.overrides.semantic.text.display.md.lineHeight? | ... | - |
__namedParameters.overrides.semantic.text.display.sm? | { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; } | Smallest step of this family — compact / dense usage. Use when space is constrained or when the text is secondary within the role. |
__namedParameters.overrides.semantic.text.display.sm.fontFamily? | ... | - |
__namedParameters.overrides.semantic.text.display.sm.fontOpticalSizing? | ... | - |
__namedParameters.overrides.semantic.text.display.sm.fontSize? | ... | - |
__namedParameters.overrides.semantic.text.display.sm.fontVariantNumeric? | ... | - |
__namedParameters.overrides.semantic.text.display.sm.fontWeight? | ... | - |
__namedParameters.overrides.semantic.text.display.sm.letterSpacing? | ... | - |
__namedParameters.overrides.semantic.text.display.sm.lineHeight? | ... | - |
__namedParameters.overrides.semantic.text.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?: ...; }; } | Section or page headings that structure scanning of the document. Use for the primary headings inside content (page title, major section breaks). Below display in hierarchy, above title. Do not use for surface chrome (card / panel / dialog headers) — those are title. |
__namedParameters.overrides.semantic.text.headline.lg? | { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; } | Largest step of this family — strongest hierarchy within the family. Use for the most prominent instance of this role on the surface. |
__namedParameters.overrides.semantic.text.headline.lg.fontFamily? | ... | - |
__namedParameters.overrides.semantic.text.headline.lg.fontOpticalSizing? | ... | - |
__namedParameters.overrides.semantic.text.headline.lg.fontSize? | ... | - |
__namedParameters.overrides.semantic.text.headline.lg.fontVariantNumeric? | ... | - |
__namedParameters.overrides.semantic.text.headline.lg.fontWeight? | ... | - |
__namedParameters.overrides.semantic.text.headline.lg.letterSpacing? | ... | - |
__namedParameters.overrides.semantic.text.headline.lg.lineHeight? | ... | - |
__namedParameters.overrides.semantic.text.headline.md? | { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; } | Default step of this family — the unmarked choice. Use unless the surface explicitly calls for lg or sm. |
__namedParameters.overrides.semantic.text.headline.md.fontFamily? | ... | - |
__namedParameters.overrides.semantic.text.headline.md.fontOpticalSizing? | ... | - |
__namedParameters.overrides.semantic.text.headline.md.fontSize? | ... | - |
__namedParameters.overrides.semantic.text.headline.md.fontVariantNumeric? | ... | - |
__namedParameters.overrides.semantic.text.headline.md.fontWeight? | ... | - |
__namedParameters.overrides.semantic.text.headline.md.letterSpacing? | ... | - |
__namedParameters.overrides.semantic.text.headline.md.lineHeight? | ... | - |
__namedParameters.overrides.semantic.text.headline.sm? | { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; } | Smallest step of this family — compact / dense usage. Use when space is constrained or when the text is secondary within the role. |
__namedParameters.overrides.semantic.text.headline.sm.fontFamily? | ... | - |
__namedParameters.overrides.semantic.text.headline.sm.fontOpticalSizing? | ... | - |
__namedParameters.overrides.semantic.text.headline.sm.fontSize? | ... | - |
__namedParameters.overrides.semantic.text.headline.sm.fontVariantNumeric? | ... | - |
__namedParameters.overrides.semantic.text.headline.sm.fontWeight? | ... | - |
__namedParameters.overrides.semantic.text.headline.sm.letterSpacing? | ... | - |
__namedParameters.overrides.semantic.text.headline.sm.lineHeight? | ... | - |
__namedParameters.overrides.semantic.text.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?: ...; }; } | Short UI strings — field labels, button text, badges, metadata, captions. Use for compact, scan-only text that names or describes adjacent UI. Do not use for prose the user must read in sequence — that is body. |
__namedParameters.overrides.semantic.text.label.lg? | { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; } | Largest step of this family — strongest hierarchy within the family. Use for the most prominent instance of this role on the surface. |
__namedParameters.overrides.semantic.text.label.lg.fontFamily? | ... | - |
__namedParameters.overrides.semantic.text.label.lg.fontOpticalSizing? | ... | - |
__namedParameters.overrides.semantic.text.label.lg.fontSize? | ... | - |
__namedParameters.overrides.semantic.text.label.lg.fontVariantNumeric? | ... | - |
__namedParameters.overrides.semantic.text.label.lg.fontWeight? | ... | - |
__namedParameters.overrides.semantic.text.label.lg.letterSpacing? | ... | - |
__namedParameters.overrides.semantic.text.label.lg.lineHeight? | ... | - |
__namedParameters.overrides.semantic.text.label.md? | { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; } | Default step of this family — the unmarked choice. Use unless the surface explicitly calls for lg or sm. |
__namedParameters.overrides.semantic.text.label.md.fontFamily? | ... | - |
__namedParameters.overrides.semantic.text.label.md.fontOpticalSizing? | ... | - |
__namedParameters.overrides.semantic.text.label.md.fontSize? | ... | - |
__namedParameters.overrides.semantic.text.label.md.fontVariantNumeric? | ... | - |
__namedParameters.overrides.semantic.text.label.md.fontWeight? | ... | - |
__namedParameters.overrides.semantic.text.label.md.letterSpacing? | ... | - |
__namedParameters.overrides.semantic.text.label.md.lineHeight? | ... | - |
__namedParameters.overrides.semantic.text.label.sm? | { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; } | Smallest step of this family — compact / dense usage. Use when space is constrained or when the text is secondary within the role. |
__namedParameters.overrides.semantic.text.label.sm.fontFamily? | ... | - |
__namedParameters.overrides.semantic.text.label.sm.fontOpticalSizing? | ... | - |
__namedParameters.overrides.semantic.text.label.sm.fontSize? | ... | - |
__namedParameters.overrides.semantic.text.label.sm.fontVariantNumeric? | ... | - |
__namedParameters.overrides.semantic.text.label.sm.fontWeight? | ... | - |
__namedParameters.overrides.semantic.text.label.sm.letterSpacing? | ... | - |
__namedParameters.overrides.semantic.text.label.sm.lineHeight? | ... | - |
__namedParameters.overrides.semantic.text.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?: ...; }; } | Titles for surfaces — cards, panels, dialogs, sheets, menus, structured sections. Use as the heading of a contained surface, not the heading of a content section. Pair with body / label inside the same surface; do not use for top-level page or document headings — those are headline / display. |
__namedParameters.overrides.semantic.text.title.lg? | { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; } | Largest step of this family — strongest hierarchy within the family. Use for the most prominent instance of this role on the surface. |
__namedParameters.overrides.semantic.text.title.lg.fontFamily? | ... | - |
__namedParameters.overrides.semantic.text.title.lg.fontOpticalSizing? | ... | - |
__namedParameters.overrides.semantic.text.title.lg.fontSize? | ... | - |
__namedParameters.overrides.semantic.text.title.lg.fontVariantNumeric? | ... | - |
__namedParameters.overrides.semantic.text.title.lg.fontWeight? | ... | - |
__namedParameters.overrides.semantic.text.title.lg.letterSpacing? | ... | - |
__namedParameters.overrides.semantic.text.title.lg.lineHeight? | ... | - |
__namedParameters.overrides.semantic.text.title.md? | { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; } | Default step of this family — the unmarked choice. Use unless the surface explicitly calls for lg or sm. |
__namedParameters.overrides.semantic.text.title.md.fontFamily? | ... | - |
__namedParameters.overrides.semantic.text.title.md.fontOpticalSizing? | ... | - |
__namedParameters.overrides.semantic.text.title.md.fontSize? | ... | - |
__namedParameters.overrides.semantic.text.title.md.fontVariantNumeric? | ... | - |
__namedParameters.overrides.semantic.text.title.md.fontWeight? | ... | - |
__namedParameters.overrides.semantic.text.title.md.letterSpacing? | ... | - |
__namedParameters.overrides.semantic.text.title.md.lineHeight? | ... | - |
__namedParameters.overrides.semantic.text.title.sm? | { fontFamily?: ...; fontOpticalSizing?: ...; fontSize?: ...; fontVariantNumeric?: ...; fontWeight?: ...; letterSpacing?: ...; lineHeight?: ...; } | Smallest step of this family — compact / dense usage. Use when space is constrained or when the text is secondary within the role. |
__namedParameters.overrides.semantic.text.title.sm.fontFamily? | ... | - |
__namedParameters.overrides.semantic.text.title.sm.fontOpticalSizing? | ... | - |
__namedParameters.overrides.semantic.text.title.sm.fontSize? | ... | - |
__namedParameters.overrides.semantic.text.title.sm.fontVariantNumeric? | ... | - |
__namedParameters.overrides.semantic.text.title.sm.fontWeight? | ... | - |
__namedParameters.overrides.semantic.text.title.sm.letterSpacing? | ... | - |
__namedParameters.overrides.semantic.text.title.sm.lineHeight? | ... | - |
__namedParameters.overrides.semantic.zIndex? | { layer?: { base?: `{core.zIndex.${(...)}}`; blocking?: `{core.zIndex.${(...)}}`; overlay?: `{core.zIndex.${(...)}}`; sticky?: `{core.zIndex.${(...)}}`; transient?: `{core.zIndex.${(...)}}`; }; } | - |
__namedParameters.overrides.semantic.zIndex.layer? | { base?: `{core.zIndex.${(...)}}`; blocking?: `{core.zIndex.${(...)}}`; overlay?: `{core.zIndex.${(...)}}`; sticky?: `{core.zIndex.${(...)}}`; transient?: `{core.zIndex.${(...)}}`; } | - |
__namedParameters.overrides.semantic.zIndex.layer.base? | `{core.zIndex.${(...)}}` | Page content in normal document flow. Use when the element participates in the default application stratum and has no claim above sibling content. Do not use to "reset" stacking inside a component — local layering is the component's own concern. |
__namedParameters.overrides.semantic.zIndex.layer.blocking? | `{core.zIndex.${(...)}}` | Surfaces that sit above other overlays and prevent interaction behind them. Use when building dialogs, sheets, or blocking drawers paired with a scrim. Pair with semantic.overlay.scrim and semantic.opacity.scrim; do not use for non-blocking floating panels — those are overlay. |
__namedParameters.overrides.semantic.zIndex.layer.overlay? | `{core.zIndex.${(...)}}` | Non-blocking floating surfaces above sticky and base content. Use when building dropdowns, menus, popovers, or floating panels that the user can dismiss by interacting elsewhere. Do not use for surfaces that block the page behind them — those are blocking. |
__namedParameters.overrides.semantic.zIndex.layer.sticky? | `{core.zIndex.${(...)}}` | Anchored bars that follow scroll while staying inside the app stack. Use when building sticky headers, sticky navigation, or persistent anchored toolbars. Pair with position: sticky; do not use for non-anchored floating surfaces — those are overlay. |
__namedParameters.overrides.semantic.zIndex.layer.transient? | `{core.zIndex.${(...)}}` | Highest application-controlled stratum before the browser top layer. Use when building transient notifications that must surface above any other app stratum (toasts, tooltip-like transient overlays). Do not use for persistent UI — transient implies the element is short-lived and self-dismissing. |
Returns
Example
// Path A — default foundation (light base + dark alternate included)
const myTheme = createTheme();
<ThemeProvider theme={myTheme} />
// Path B — custom brand overrides (dark mode still included)
const myTheme = createTheme({
overrides: { core: { colors: { brand: { 500: '#FF0000' } } } },
});
// Path C — custom semantic dark alternate
const myTheme = createTheme({
overrides: { core: { colors: { brand: { 500: '#FF0000' } } } },
alternate: {
semantic: {
colors: { informational: { primary: { background: { default: '{core.colors.neutral.900}' } } } },
},
},
});
// Path D — single-mode theme (no dark alternate)
const myTheme = createTheme({ alternate: null });