Color Swatch

ColorSwatch on docs.rs Source 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

An element expression with window: &mut Window and cx: &mut App in scope.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15use herogpui::prelude::{ColorSwatch, PickerColor};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(vec![ColorSwatch::new(
        PickerColor::from_hex("#0085F5").unwrap_or_default(),
    )
    .into_any_element()])

A swatch has an accessible colour name. A desktop GPUI surface has no screen-reader tree, so the name is shown as a caption instead of announced. An element expression with window: &mut Window and cx: &mut App in scope.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40use herogpui::prelude::{ColorSwatch, PickerColor};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![
        gpui::div()
            .flex()
            .flex_wrap()
            .items_center()
            .justify_center()
            .gap(px(12.))
            .children(palette()
                        .into_iter()
                        .map(|c| {
                            let hex = c.to_hex();
                            ColorSwatch::new(c)
                                .into_any_element()
                        }))
            .into_any_element(),
        gpui::div()
            .flex()
            .flex_wrap()
            .items_center()
            .justify_center()
            .gap(px(12.))
            .children(vec![ColorSwatch::new(
                                 PickerColor::from_hex("#0085F5").unwrap_or_default(),
                             )
                             .id("color-swatch-brand-blue")
                             .color_name("Brand blue")
                                 .into_any_element()])
            .into_any_element(),
    ])

Expand code

Also calls palette (included when you copy).

Sizes

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

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17use herogpui::prelude::{ColorSwatch, SizeXl};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(SizeXl::ALL
        .iter()
        .map(|s| {
            ColorSwatch::new(self.picker_color).size(*s)
                .into_any_element()
        }))

Shapes

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

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19use herogpui::prelude::{ColorSwatch, SizeXl, SwatchShape};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(SwatchShape::ALL
        .iter()
        .map(|shape| {
            ColorSwatch::new(self.picker_color)
                .size(SizeXl::Lg)
                .shape(*shape)
                .into_any_element()
        }))

Expand code

Palette

An element expression with window: &mut Window and cx: &mut App in scope.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14use herogpui::prelude::{ColorSwatch, PickerColor, SizeXl};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(palette()
        .into_iter()
        .map(|c| ColorSwatch::new(c).size(SizeXl::Lg)))

Also calls palette (included when you copy).

Alpha

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

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22use herogpui::prelude::{ColorSwatch, SizeXl};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(vec![
        ColorSwatch::new(self.picker_color.with_alpha(1.0))
            .size(SizeXl::Lg)
            .into_any_element(),
        ColorSwatch::new(self.picker_color.with_alpha(0.5))
            .size(SizeXl::Lg)
            .into_any_element(),
        ColorSwatch::new(self.picker_color.with_alpha(0.15))
            .size(SizeXl::Lg)
            .into_any_element(),
    ])

Expand code

Helpers used by these examples

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

palette

1
2
3
4
5
6
7
8
9/// The demo palette used by the color pages.
fn palette() -> Vec<PickerColor> {
    [
        "#0085F5", "#17C964", "#F5A524", "#F31260", "#7828C8", "#0E8AAA", "#71717A", "#18181B",
    ]
    .into_iter()
    .filter_map(PickerColor::from_hex)
    .collect()
}

Anatomy

Rust types

ColorSwatch

Color Swatch 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 Swatch 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 Swatch styling
Method	Values	Description
`shape(SwatchShape)`	`SwatchShape::Circle \| SwatchShape::Square`	Selects a circular or rounded-square swatch.
`size(SizeXl)`	`SizeXl::Xs \| SizeXl::Sm \| SizeXl::Md \| SizeXl::Lg \| SizeXl::Xl`	Selects the 16, 24, 32, 36 or 40px swatch size.

Rust

1
2
3
4
5
6
7
8// 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: 6 entries ported, 1 partial, 3 not ported. Partial rows are marked in the tables; entries not ported are listed under each table with the reason.

Builders

Color Swatch builders
Builder	Values	Default	Description
`new(PickerColor) / color(PickerColor)`	`string \| Color`	—	Color value displayed by the swatch.
`id(ElementId)`	`string`	—	Optional GPUI identity. A named swatch reports role=img, using color_name when supplied and hex otherwise; an unnamed preview produces no AccessKit node.
`color_name(text)`	`string`	—	Overrides the generated accessible color name for a named swatch.
`shape(SwatchShape)`	`SwatchShape::Circle \| SwatchShape::Square`	`SwatchShape::Circle`	Selects a circular or rounded-square swatch.
`size(SizeXl)`	`SizeXl::Xs \| SizeXl::Sm \| SizeXl::Md \| SizeXl::Lg \| SizeXl::Xl`	`SizeXl::Md`	Selects the 16, 24, 32, 36 or 40px swatch size.
`color_name(text) + id(ElementId)`Partial	`string`	—	A named swatch reports role=img; color_name supplies the accessible name in this port.

Not ported3 HeroUI entries not ported

Color Swatch builders not ported
HeroUI v3	Why it is not ported
`ColorSwatch.className`	Browser styles are unavailable.
`ColorSwatch.style`	Browser inline styles and style render functions are unavailable.
`ColorSwatch.render`	Root-element substitution has no GPUI equivalent.

Parts

Color Swatch parts
Part	Description
`ColorSwatch`	Color preview with a transparency backdrop, border, size, and shape.

Color Area Color Field Color Picker Color Slider Color Swatch Picker

Usage

Usage

Transparency

Accessibility

Sizes

Shapes

Palette

Alpha

Helpers used by these examples

Anatomy

Customization

Styling

API reference

Builders

Parts

Usage

Usage

Transparency

Accessibility

Sizes

Shapes

Palette

Alpha

Helpers used by these examples

Anatomy

Customization

Styling

API reference

Builders

Parts

Related components