Skip to content
Designer Decisions

ColorVizOptions

Available options for Color Visualizations.

export type ColorVizOptions = {
    contrast: string;
    mode?: ShowContentMode;
    content?: string;
};


export type ShowContentMode = 'typeface' | 'text';

When rendering color decisions you can configure visualization by providing the options prop.

<ShowColorValueDecision d="Brand Black" viz="..." options={options} />

༶ contrast

Define the color applied to the opposite layer.

<ShowDecision d="Action Contrast Color" size="m" viz="fg" options={{ contrast: '#000000' }} />
Gg
#faf8f8

༶ mode

Define the content type.

Available only when viz is set to visualize either the decision value as fg or bg.

<ShowDecision
    d="Action Contrast Color"
    size="m"
    viz="fg"
    options={{ mode: 'text', contrast: '#333333' }}
/>
An old wooden gate creaked in protest as it opened to an unfamiliar visitor. The moon broke through the clouds, revealing a path that had not been there before. He hesitated, the key heavy in his palm
#faf8f8

Refer to ShowContentMode for available content modes.

༶ content

Override the default content for typeface or text content types.

Available only when viz is set to visualize either the decision value as fg or bg.

<ShowDecision d="Brand Blue" size="s" viz="fg" options={{ mode: 'text', contrast: '#000000' }} />
<ShowDecision
    d="Action Contrast Color"
    size="s"
    viz="fg"
    options={{ mode: 'text', contrast: '#000000', content: 'Lorem Ipsum' }}
/>
Aa
#16b2dd
Lorem Ipsum
#faf8f8