ColorVizName

Available visualizations for ShowColorViz.

export type ColorVizName = 'swatch' | 'fg' | 'bg';

When rendering color decisions you can chose a different visualization by setting the viz prop to one of these.

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

Type Values

`swatch` (default)

Flat color surface.

No options.

<ShowDecision d="Brand Pink" size="m" viz="swatch" />

#d45084

`fg`

Render the decision value as the foreground content color.

<ShowDecision d="Brand Pink" size="m" viz="fg" options={{ contrast: 'oklch(24% 0.08 257)' }} />

#d45084

Refer to ColorVizOptions for details on options.

`bg`

Render the decision value as the background with custom element(s) on top.

<ShowDecision
    d="Action Color"
    size="m"
    viz="bg"
    options={{ mode: 'text', contrast: 'oklch(99% 0.002 345)' }}
/>

They exchanged a glance, unspoken understanding passing between them. A pair of squirrels ran for cover while the fox wrestled the wind. The tall grass swayed lazily, whispering secrets only the wind

#9c2e5c