Color Area — HeroGPUI

Usage

Live example

Rust

1use herogpui::prelude::ColorArea;
2
3ColorArea::new("color-area", value)
4    .default_value(value)

Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.

Rust types

ColorArea

Color Area is assembled from these builders. The API reference lists each one.

Appearance builders and theme tokens Color Area uses.

Color Area styling
Style	Description
`224x224 + size(width, height) + soft_radius`	The default desktop area is the 224px square with 16px corners; size can override both axes.
`border(theme border)`	Uses a theme border rather than the translucent inner shadow.
`show_dots 8px grid`	Two-pixel translucent dots are centered in an eight-pixel grid because GPUI has no repeating radial background.
`16px + rounded(12) + border(3)`	Idle size, circular radius, white border, and current-color fill match.
`color_area_thumb_motion`	A listener-free visual child interpolates the current size, preserves reversal position, and switches directly under reduced motion.
`COLOR_AREA_THUMB_DRAGGING_PX`	Active drag size is 20px while the stable owner keeps hover continuity.
`with_focus_ring(thumb)`	The shared status ring is applied to the animated thumb visual.

Color Area builders
Builder	Type	Default	Description
`new(id, PickerColor)`	`id, PickerColor`	—	Controlled color; pointer and keyboard changes wait for owner acceptance.
`default_value(PickerColor)`	`PickerColor`	—	Seeds picker-owned color state once.
`on_change(callback)`	`Fn(color: Color) -> ()`	—	Reports each changed pointer coordinate or keyboard step.
`on_change_end(callback)`	`Fn(color: Color) -> ()`	—	Reports once on pointer release and once for each completed keyboard change.
`x_channel(ColorChannel)`	`ColorChannel`	`ColorChannel::Saturation`	Selects the horizontal channel and its pinned step/range.
`y_channel(ColorChannel)`	`ColorChannel`	`ColorChannel::Brightness`	Selects the vertical channel, increasing toward the top.
`color_space(ColorSpace)`	`ColorSpace`	—	Selects HSB, HSL, or RGB channel interpretation and default axes.
`is_disabled(bool)`	`bool`	`false`	Dims the complete area and removes focus, pointer, and keyboard interaction.
`show_dots(bool)`	`bool`	`false`	Overlays the eight-pixel precision grid.
`thumb(render)`	`AnyElement \| render closure`	`ColorArea.Thumb`	The monolithic area always owns the thumb; its child render state is exposed through the thumb builder.
`size(width, height)`	`width, height`	—	Browser classes and root-element substitution are unavailable; size provides the desktop geometry customization point.

Color Area parts
Part	Description
`ColorArea`	Two-dimensional gradient, value owner, focus target, and pointer/keyboard interaction surface.
`ColorArea`	Positioned current-color indicator with live render state and drag geometry.

Color Area states
Builder	State	Description
`is_disabled`	`Disabled`	Whole-control opacity applies and every interaction/render-state flag is masked except disabled.
`dragging keyed state + ColorAreaThumbState`	`Dragging`	Pointer down grows the thumb from 16px to 20px and reaches the thumb render state even when the color is unchanged.
`thumb_hovered keyed state`	`Hovered`	The stable thumb owner reports hover without placing listeners above a changing animation id.
`ColorAreaThumbState`	`Focused`	Pointer and keyboard focus are reported from the area focus handle.
`with_focus_ring(thumb) + focus_visible`	`Focus visible`	Keyboard-origin focus rings the thumb, not the whole gradient, and reaches render state.