modal

Dialog components that overlay the main content, focusing user attention on critical information or tasks that require interaction before returning to the main interface.

This documentation is a work in progress and may contain incomplete or outdated information. If you have any feedback or suggestions, please open an issue on GitHub.

Standardized design system values that define consistent visual properties across modal components. These tokens ensure visual coherence while enabling flexible theme customization and brand adaptation for content presentation and interactive workflow interfaces.

Theming Tokens

Design tokens organized by category with color-coded labels indicating their scope and impact level. Each token includes detailed specifications with values, usage guidelines, and customization options for comprehensive modal styling and behavior control.

Legend:

Granular tokens that affect only this component.
Granular tokens that affect other components.
Semantic tokens that affect the whole application.
Base tokens that affect the whole application.

Color

Component Token	Base Token
color.context.default.bg-main	{color.base.context.light.default.bg-main}
color.context.default.fg-main	{color.base.context.light.default.fg-main}
color.context.default.fg-subtle	{color.base.context.light.default.fg-subtle}
color.context.default.border-subtle	{color.base.context.light.default.border-subtle}

Typography

Component Token	Base Token
font.modal.large-title	{font.text.xlarge.strong}
font.modal.large-subtitle	{font.text.medium.normal}
font.modal.medium-title	{font.text.large.strong}
font.modal.medium-subtitle	{font.text.medium.normal}
font.modal.small-title	{font.text.medium.strong}
font.modal.small-subtitle	{font.text.medium.normal}

Sizing

Component Token	Value
size.modal.window-xlarge-w	1140
size.modal.window-large-w	800
size.modal.window-medium-w	560
size.modal.window-xlarge-h	720
size.modal.window-large-h	600
size.modal.window-medium-h	480

Spacing

Component Token	Base Token
space.modal.large-padding-y	{space.unit.32}
space.modal.large-padding-x	{space.unit.32}
space.modal.large-gap	{space.unit.32}
space.modal.medium-padding-y	{space.unit.24}
space.modal.medium-padding-x	{space.unit.24}
space.modal.medium-gap	{space.unit.24}
space.modal.small-padding-y	{space.unit.16}
space.modal.small-padding-x	{space.unit.16}
space.modal.small-gap	{space.unit.16}

Border Width

Component Token	Base Token
borderWidth.modal.main	{borderWidth.context.medium}

Border Radius

Component Token	Base Token
borderRadius.modal.main	{borderRadius.context.medium}

Box Shadow

Component Token	Base Token
shadow.modal.main	{shadow.elevation.default.40}