Skip to content
PorabuildHeroGPUI component library
v0.14.0 · Apache-2.0
HeroGPUI

Colors

Color Area

Pick saturation and lightness from a two-dimensional gradient.

Rust
use herogpui::components::color_picker::ColorArea;

ColorArea on docs.rsSource at v0.14.0

Usage

Showing Usage, live: HeroGPUI compiled to WebAssembly. The canvas has no accessibility tree; each example's description and code below carry the same information.

Usage

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust
use herogpui::prelude::ColorArea;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

let value = self.picker_color;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![ColorArea::new("color-area", value)
        .default_value(value)
        .into_any_element()])

With Dots

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust
use herogpui::prelude::ColorArea;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

let value = self.picker_color;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![ColorArea::new("color-area-dots", value)
        .show_dots(true)
        .into_any_element()])

Color Space & Channels

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust
use herogpui::prelude::{ColorArea, ColorChannel, ColorSpace};
use herogpui::gpui::prelude::*;
use herogpui::gpui::{px, rgb};
use herogpui::gpui;

let value = self.picker_color;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(vec![
        ColorArea::new("color-area-hsb", value)
            .color_space(ColorSpace::Hsb)
            .x_channel(ColorChannel::Saturation)
            .y_channel(ColorChannel::Brightness)
            .size(px(160.), px(120.))
            .into_any_element(),
        ColorArea::new("color-area-rgb", value)
            .color_space(ColorSpace::Rgb)
            .x_channel(ColorChannel::Red)
            .y_channel(ColorChannel::Green)
            .size(px(160.), px(120.))
            .into_any_element(),
    ])

Controlled

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust
use herogpui::prelude::{ActiveTheme, ColorArea, ColorSwatch, PickerColor};
use herogpui::gpui::prelude::*;
use herogpui::gpui::{App, px};
use herogpui::gpui;

let value = self.picker_color;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![
        ColorArea::new("color-area-controlled", value)
            .size(px(180.), px(120.))
            .on_change(cx.listener(|this, c: &PickerColor, _, cx| {
                this.picker_color = *c;
                cx.notify();
            }))
            .into_any_element(),
        gpui::div()
            .flex()
            .flex_wrap()
            .items_center()
            .justify_center()
            .gap(px(12.))
            .children(vec![
                        ColorSwatch::new(value).into_any_element(),
                        para(&format!("Value: {}", value.to_hex()), cx),
                    ])
            .into_any_element(),
    ])

Also calls para (included when you copy).

Render Function

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust
use herogpui::prelude::ColorArea;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

let value = self.picker_color;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![ColorArea::new("color-area-render-state", value)
        .default_value(value)
        .thumb(|state| {
            gpui::div()
                .absolute()
                .inset_0()
                .flex()
                .items_center()
                .justify_center()
                .child(
                    gpui::div()
                        .size(px(if state.is_dragging { 6. } else { 4. }))
                        .rounded_full()
                        .bg(if state.is_hovered {
                            gpui::black()
                        } else {
                            gpui::white()
                        }),
                )
                .into_any_element()
        })
        .into_any_element()])

Saturation & brightness

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust
use herogpui::prelude::{ActiveTheme, ColorArea, PickerColor};
use herogpui::gpui::prelude::*;
use herogpui::gpui::{App, px};
use herogpui::gpui;

let value = self.picker_color;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![
        ColorArea::new("color-area-main", value)
            .on_change(cx.listener(|this, c: &PickerColor, _, cx| {
                this.picker_color = *c;
                cx.notify();
            }))
            .into_any_element(),
        para(&format!("Value: {}", value.to_hex()), cx),
    ])

Also calls para (included when you copy).

Disabled

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust
use herogpui::prelude::ColorArea;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

let value = self.picker_color;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![ColorArea::new("color-area-disabled", value)
        .size(px(180.), px(120.))
        .is_disabled(true)
        .into_any_element()])

Helpers used by these examples

Plain functions over the public API, defined once here and copied with each example that calls them.

para
fn para(text: &str, cx: &App) -> gpui::AnyElement {
    let colors = cx.colors();
    gpui::div()
        .text_size(px(14.5))
        .line_height(px(24.))
        .text_color(colors.foreground)
        .max_w(px(720.))
        .child(text.to_owned())
        .into_any_element()
}

Anatomy

Rust types

ColorArea

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

Customization

Shared appearance belongs on ThemeBuilder::components and .recipe("name"). Typed builders change how Color Area looks at one call site. Every builder also carries sx for placement, width and flex: it takes GPUI's own styling methods and refines them over the component's root after the theme, so an instance override wins. Behaviour builders live in the API reference below.

Styling

Color Area styling
MethodValuesDescription
size(width, height)Partialstring / render closureBrowser classes and root-element substitution are unavailable; size provides the desktop geometry customization point.
Rust
// The one slot for caller-owned low-level styling: GPUI's
// styling methods, refined over the root element last.
.sx(|el| {
    el.bg(gpui::rgba(0xffa500ff))             // background
        .text_color(gpui::rgba(0x000000ff))   // text
        .w(gpui::px(13.))                     // size
        .h(gpui::px(12.))
})

API reference

Against HeroUI v3.2.6: 17 entries ported, 3 partial, 2 not ported. Partial rows are marked in the tables; entries not ported are listed under each table with the reason.

Builders

Color Area builders
BuilderValuesDefaultDescription
new(id, PickerColor)string | Color—Controlled color; pointer and keyboard changes wait for owner acceptance.
default_value(PickerColor)string | Color—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)ColorChannelColorChannel::SaturationSelects the horizontal channel and its pinned step/range.
y_channel(ColorChannel)ColorChannelColorChannel::BrightnessSelects the vertical channel, increasing toward the top.
color_space(ColorSpace)ColorSpace—Selects HSB, HSL, or RGB channel interpretation and default axes.
is_disabled(bool)true | falsefalseDims the complete area and removes focus, pointer, and keyboard interaction.
show_dots(bool)true | falsefalseOverlays the eight-pixel precision grid.
thumb(render)PartialAnyElement | render closureColorArea.ThumbThe monolithic area always owns the thumb; its child render state is exposed through the thumb builder.
size(width, height)Partialstring / render closure—Browser classes and root-element substitution are unavailable; size provides the desktop geometry customization point.
Not ported2 HeroUI entries not ported
Color Area builders not ported
HeroUI v3Why it is not ported
ColorArea.Thumb.classNameBrowser class customization is unavailable.
ColorArea.Thumb.styleBrowser inline-style render functions are unavailable.

Parts

Color Area parts
PartDescription
ColorAreaTwo-dimensional gradient, value owner, focus target, and pointer/keyboard interaction surface.
ColorAreaPositioned current-color indicator with live render state and drag geometry.

States

Color Area states
StateBuilderDescription
Disabledis_disabledWhole-control opacity applies and every interaction/render-state flag is masked except disabled.
Draggingdragging keyed statePointer down grows the thumb from 16px to 20px and reaches the thumb render state even when the color is unchanged.
Hoveredthumb_hovered keyed stateThe stable thumb owner reports hover without placing listeners above a changing animation id.
FocusedColorAreaThumbStatePointer and keyboard focus are reported from the area focus handle.
Focus visiblewith_focus_ring(thumb)Keyboard-origin focus rings the thumb, not the whole gradient, and reaches render state.
Color FieldColor PickerColor SliderColor SwatchColor Swatch Picker