feathers_gallery.rs

//! This example shows off the various Bevy Feathers widgets.

use bevy::{
    color::palettes,
    ecs::VariantDefaults,
    feathers::{
        constants::{fonts, icons},
        containers::*,
        controls::*,
        cursor::{EntityCursor, OverrideCursor},
        dark_theme::create_dark_theme,
        display::{icon, label, label_dim, label_small},
        font_styles::InheritableFont,
        palette,
        rounded_corners::RoundedCorners,
        theme::{ThemeBackgroundColor, ThemedText, UiTheme},
        tokens, FeathersPlugins,
    },
    input_focus::{tab_navigation::TabGroup, AutoFocus, InputFocus},
    prelude::*,
    text::{EditableText, TextEdit, TextEditChange},
    ui::{Checked, InteractionDisabled, Selected},
    ui_widgets::{
        checkbox_self_update, listbox_update_selection, radio_self_update, slider_self_update,
        Activate, ActivateOnPress, RadioGroup, SliderPrecision, SliderStep, SliderValue,
        ValueChange,
    },
    window::SystemCursorIcon,
};

/// A struct to hold the state of various widgets shown in the demo.
#[derive(Resource)]
struct DemoWidgetStates {
    rgb_color: Srgba,
    hsl_color: Hsla,
    scalar_prop: f32,
    vec3_prop: Vec3,
}

#[derive(Component, Clone, Copy, PartialEq, FromTemplate)]
enum SwatchType {
    #[default]
    Rgb,
    Hsl,
}

#[derive(Component, Clone, Copy, Default)]
struct HexColorInput;

#[derive(Component, Clone, Copy, Default)]
struct DemoDisabledButton;

#[derive(Component, Clone, Copy, Default)]
struct DemoScalarField;

#[derive(Component, Clone, Copy, Default, VariantDefaults)]
enum DemoVec3Field {
    #[default]
    X,
    Y,
    Z,
}

fn main() {
    App::new()
        .add_plugins((DefaultPlugins, FeathersPlugins))
        .insert_resource(UiTheme(create_dark_theme()))
        .insert_resource(DemoWidgetStates {
            rgb_color: palettes::tailwind::EMERALD_800.with_alpha(0.7),
            hsl_color: palettes::tailwind::AMBER_800.into(),
            scalar_prop: 7.0,
            vec3_prop: Vec3::new(10.1, 7.124, 100.0),
        })
        .add_systems(Startup, scene.spawn())
        .add_systems(Update, update_colors)
        .run();
}

fn scene() -> impl SceneList {
    bsn_list![Camera2d, demo_root()]
}

fn demo_root() -> impl Scene {
    bsn! {
        Node {
            width: percent(100),
            height: percent(100),
            align_items: AlignItems::Start,
            justify_content: JustifyContent::Start,
            display: Display::Flex,
            flex_direction: FlexDirection::Row,
            column_gap: px(8),
        }
        TabGroup
        ThemeBackgroundColor(tokens::WINDOW_BG)
        Children[
            demo_column_1(),
            demo_column_2(),
        ]
    }
}

fn demo_column_1() -> impl Scene {
    bsn! {
        Node {
            display: Display::Flex,
            flex_direction: FlexDirection::Column,
            align_items: AlignItems::Stretch,
            justify_content: JustifyContent::Start,
            padding: px(8),
            row_gap: px(8),
            width: percent(30),
            min_width: px(200),
        }
        Children [
            (
                Node {
                    display: Display::Flex,
                    flex_direction: FlexDirection::Row,
                    align_items: AlignItems::Center,
                    justify_content: JustifyContent::Start,
                    column_gap: px(8),
                }
                Children [
                    (
                        @FeathersButton {
                            @caption: bsn! { Text("Normal") ThemedText }
                        }
                        Node {
                            flex_grow: 1.0,
                        }
                        AccessibleLabel("Normal")
                        on(|_activate: On<Activate>| {
                            info!("Normal button clicked!");
                        })
                        AutoFocus
                    ),
                    (
                        @FeathersButton {
                            @caption: bsn! { Text("Disabled") ThemedText },
                        }
                        Node {
                            flex_grow: 1.0,
                        }
                        AccessibleLabel("Disabled")
                        InteractionDisabled
                        DemoDisabledButton
                        on(|_activate: On<Activate>| {
                            info!("Disabled button clicked!");
                        })
                    ),
                    (
                        @FeathersButton {
                            @caption: bsn! { Text("Primary") ThemedText },
                            @variant: ButtonVariant::Primary,
                        }
                        AccessibleLabel("Primary")
                        Node {
                            flex_grow: 1.0,
                        }
                        on(|_activate: On<Activate>| {
                            info!("Primary button clicked!");
                        })
                    ),
                    (
                        @FeathersMenu
                        Children [
                            (
                                @FeathersMenuButton {
                                    @caption: bsn! { Text("Menu") ThemedText }
                                }
                                AccessibleLabel("Menu Example")
                                Node {
                                    flex_grow: 1.0,
                                }
                            ),
                            (
                                @FeathersMenuPopup
                                Children [
                                    (
                                        @FeathersMenuItem {
                                            @caption: bsn! { Text("MenuItem 1") ThemedText }
                                        }
                                        on(|_: On<Activate>| {
                                            info!("Menu item 1 clicked!");
                                        })
                                    ),
                                    (
                                        @FeathersMenuItem {
                                            @caption: bsn! { Text("MenuItem 2") ThemedText }
                                        }
                                        on(|_: On<Activate>| {
                                            info!("Menu item 2 clicked!");
                                        })
                                    ),
                                    @FeathersMenuDivider,
                                    (
                                        @FeathersMenuItem {
                                            @caption: bsn! { Text("MenuItem 3") ThemedText }
                                        }
                                        on(|_: On<Activate>| {
                                            info!("Menu item 3 clicked!");
                                        })
                                    )
                                ]
                            )
                        ]
                    )
                ]
            ),
            (
                Node {
                    display: Display::Flex,
                    flex_direction: FlexDirection::Row,
                    align_items: AlignItems::Center,
                    justify_content: JustifyContent::Start,
                    column_gap: px(1),
                }
                Children [
                    (
                        @FeathersButton {
                            @caption: bsn! { Text("Left") ThemedText },
                            @corners: RoundedCorners::Left,
                        }
                        Node {
                            flex_grow: 1.0,
                        }
                        AccessibleLabel("Left")
                        on(|_activate: On<Activate>| {
                            info!("Left button clicked!");
                        })
                    ),
                    (
                        @FeathersButton {
                            @caption: bsn! { Text("Center") ThemedText },
                            @corners: RoundedCorners::None,
                        }
                        Node {
                            flex_grow: 1.0,
                        }
                        AccessibleLabel("Center")
                        on(|_activate: On<Activate>| {
                            info!("Center button clicked!");
                        })
                    ),
                    (
                        @FeathersButton {
                            @caption: bsn! { Text("Right") ThemedText },
                            @variant: ButtonVariant::Primary,
                            @corners: RoundedCorners::Right,
                        }
                        Node {
                            flex_grow: 1.0,
                        }
                        AccessibleLabel("Right")
                        on(|_activate: On<Activate>| {
                            info!("Right button clicked!");
                        })
                    ),
                ]
            ),
            (
                @FeathersButton
                on(|_activate: On<Activate>, mut ovr: ResMut<OverrideCursor>| {
                    ovr.0 = if ovr.0.is_some() {
                        None
                    } else {
                        Some(EntityCursor::System(SystemCursorIcon::Wait))
                    };
                    info!("Override cursor button clicked!");
                })
                Children [ (Text("Toggle override") ThemedText) ]
            ),
            (
                @FeathersCheckbox {
                    @caption: bsn! { Text("Checkbox") ThemedText }
                }
                Checked
                AccessibleLabel("Checkbox Example")
                on(
                    |change: On<ValueChange<bool>>,
                        query: Query<Entity, With<DemoDisabledButton>>,
                        mut commands: Commands| {
                        info!("Checkbox clicked!");
                        let mut button = commands.entity(query.single().unwrap());
                        if change.value {
                            button.insert(InteractionDisabled);
                        } else {
                            button.remove::<InteractionDisabled>();
                        }
                        let mut checkbox = commands.entity(change.source);
                        if change.value {
                            checkbox.insert(Checked);
                        } else {
                            checkbox.remove::<Checked>();
                        }
                    }
                )
            ),
            (
                @FeathersCheckbox {
                    @caption: bsn! { Text("Fast Click Checkbox") ThemedText }
                }
                ActivateOnPress
                AccessibleLabel("Fast Click Checkbox Example")
                on(
                    |change: On<ValueChange<bool>>,
                     mut commands: Commands| {
                        info!("Checkbox clicked!");
                        let mut checkbox = commands.entity(change.source);
                        if change.value {
                            checkbox.insert(Checked);
                        } else {
                            checkbox.remove::<Checked>();
                        }
                    }
                )
            ),
            (
                @FeathersCheckbox {
                    @caption: bsn! { Text("Disabled") ThemedText },
                }
                InteractionDisabled
                AccessibleLabel("Disabled Checkbox Example")
                on(|_change: On<ValueChange<bool>>| {
                    warn!("Disabled checkbox clicked!");
                })
            ),
            (
                @FeathersCheckbox {
                    @caption: bsn! { Text("Checked+Disabled") ThemedText }
                }
                InteractionDisabled
                Checked
                AccessibleLabel("Disabled and Checked Checkbox Example")
                on(|_change: On<ValueChange<bool>>| {
                    warn!("Disabled checkbox clicked!");
                })
            ),
            (
                Node {
                    display: Display::Flex,
                    flex_direction: FlexDirection::Row,
                    align_items: AlignItems::Center,
                    justify_content: JustifyContent::Start,
                    column_gap: px(8),
                }
                Children [
                    (
                        Node {
                            display: Display::Flex,
                            flex_direction: FlexDirection::Column,
                            row_gap: px(4),
                        }
                        RadioGroup
                        on(radio_self_update)
                        Children [
                            (
                                @FeathersRadio {
                                    @caption: bsn! { Text("One") ThemedText }
                                }
                                Checked
                            ),
                            @FeathersRadio {
                                @caption: bsn! { Text("Two") ThemedText }
                            },
                            (
                                @FeathersRadio {
                                    @caption: bsn! { Text("Fast Click") ThemedText }
                                }
                                ActivateOnPress
                            ),
                            (
                                @FeathersRadio {
                                    @caption: bsn! { Text("Disabled") ThemedText }
                                }
                                InteractionDisabled
                            ),
                        ]
                    )
                ]
            ),
            (
                Node {
                    display: Display::Flex,
                    flex_direction: FlexDirection::Row,
                    align_items: AlignItems::Center,
                    justify_content: JustifyContent::Start,
                    column_gap: px(8),
                }
                Children [
                    (@FeathersToggleSwitch on(checkbox_self_update)),
                    (@FeathersToggleSwitch ActivateOnPress on(checkbox_self_update)),
                    (@FeathersToggleSwitch InteractionDisabled on(checkbox_self_update)),
                    (@FeathersToggleSwitch InteractionDisabled Checked on(checkbox_self_update)),
                    (@FeathersDisclosureToggle on(checkbox_self_update)),
                ]
            ),
            (
                @FeathersSlider {
                    @max: 100.0,
                    @value: 20.0,
                }
                SliderStep(10.)
                SliderPrecision(2)
                on(slider_self_update)
            ),
            (
                Node {
                    display: Display::Flex,
                    flex_direction: FlexDirection::Row,
                    align_items: AlignItems::Center,
                    justify_content: JustifyContent::SpaceBetween,
                    column_gap: px(4),
                }
                Children [
                    label("Srgba"),
                    // Spacer
                    flex_spacer(),
                    // Text input
                    (
                        @FeathersTextInputContainer
                        Node {
                            flex_grow: 0.
                            padding: { px(4).left() },
                        }
                        Children [
                            (
                                @FeathersTextInput {
                                    @visible_width: 10f32,
                                    @max_characters: 9usize,
                                }
                                InheritableFont {
                                    font: fonts::MONO
                                }
                                HexColorInput
                                on(handle_hex_color_change)
                            )
                        ]
                    )
                    (@FeathersColorSwatch SwatchType::Rgb),
                ]
            ),
            (
                @FeathersColorPlane::RedBlue
                on(|change: On<ValueChange<Vec2>>, mut color: ResMut<DemoWidgetStates>| {
                    color.rgb_color.red = change.value.x;
                    color.rgb_color.blue = change.value.y;
                })
            ),
            (
                @FeathersColorSlider {
                    @value: 0.5,
                    @channel: ColorChannel::Red
                }
                AccessibleLabel("Red Channel")
                on(|change: On<ValueChange<f32>>, mut color: ResMut<DemoWidgetStates>| {
                    color.rgb_color.red = change.value;
                })
            ),
            (
                @FeathersColorSlider {
                    @value: 0.5,
                    @channel: ColorChannel::Green
                }
                AccessibleLabel("Green Channel")
                on(|change: On<ValueChange<f32>>, mut color: ResMut<DemoWidgetStates>| {
                    color.rgb_color.green = change.value;
                })
            ),
            (
                @FeathersColorSlider {
                    @value: 0.5,
                    @channel: ColorChannel::Blue
                }
                AccessibleLabel("Blue Channel")
                on(|change: On<ValueChange<f32>>, mut color: ResMut<DemoWidgetStates>| {
                    color.rgb_color.blue = change.value;
                })
            ),
            (
                @FeathersColorSlider {
                    @value: 0.5,
                    @channel: ColorChannel::Alpha
                }
                AccessibleLabel("Alpha Channel")
                on(|change: On<ValueChange<f32>>, mut color: ResMut<DemoWidgetStates>| {
                    color.rgb_color.alpha = change.value;
                })
            ),
            (
                Node {
                    display: Display::Flex,
                    align_items: AlignItems::Center,
                    flex_direction: FlexDirection::Row,
                    justify_content: JustifyContent::SpaceBetween,
                }
                Children [
                    label("Hsl"),
                    (@FeathersColorSwatch SwatchType::Hsl)
                ]
            ),
            (
                @FeathersColorSlider {
                    @value: 0.5,
                    @channel: ColorChannel::HslHue
                }
                AccessibleLabel("Hue Channel")
                on(|change: On<ValueChange<f32>>, mut color: ResMut<DemoWidgetStates>| {
                    color.hsl_color.hue = change.value;
                })
            ),
            (
                @FeathersColorSlider {
                    @value: 0.5,
                    @channel: ColorChannel::HslSaturation
                }
                AccessibleLabel("Saturation Channel")
                on(|change: On<ValueChange<f32>>, mut color: ResMut<DemoWidgetStates>| {
                    color.hsl_color.saturation = change.value;
                })
            ),
            (
                @FeathersColorSlider {
                    @value: 0.5,
                    @channel: ColorChannel::HslLightness
                }
                AccessibleLabel("Lightness Channel")
                on(|change: On<ValueChange<f32>>, mut color: ResMut<DemoWidgetStates>| {
                    color.hsl_color.lightness = change.value;
                })
            )
        ]
    }
}

fn demo_column_2() -> impl Scene {
    bsn! {
        Node {
            display: Display::Flex,
            flex_direction: FlexDirection::Column,
            align_items: AlignItems::Stretch,
            justify_content: JustifyContent::Start,
            padding: px(8),
            row_gap: px(8),
            width: percent(30),
            min_width: px(200),
        }
        Children [
            (
                pane() Children [
                    pane_header() Children [
                        @FeathersToolButton {
                            @variant: ButtonVariant::Primary,
                        } Children [
                            (Text("\u{0398}") ThemedText)
                        ],
                        pane_header_divider(),
                        @FeathersToolButton {
                            @variant: ButtonVariant::Plain,
                        } Children [
                            (Text("\u{00BC}") ThemedText)
                        ],
                        @FeathersToolButton {
                            @variant: ButtonVariant::Plain,
                        } Children [
                            (Text("\u{00BD}") ThemedText)
                        ],
                        @FeathersToolButton {
                            @variant: ButtonVariant::Plain,
                        } Children [
                            (Text("\u{00BE}") ThemedText)
                        ],
                        pane_header_divider(),
                        @FeathersToolButton {
                            @variant: ButtonVariant::Plain,
                        } Children [
                            icon(icons::CHEVRON_DOWN)
                        ],
                        flex_spacer(),
                        @FeathersToolButton {
                            @variant: ButtonVariant::Plain,
                        } Children [
                            icon(icons::X)
                        ],
                    ],
                    (
                        pane_body() Children [
                            label_dim("A standard editor pane"),
                            subpane() Children [
                                subpane_header() Children [
                                    (Text("Left") ThemedText),
                                    (Text("Center") ThemedText),
                                    (Text("Right") ThemedText)
                                ],
                                subpane_body() Children [
                                    label_dim("A standard sub-pane"),
                                    group()
                                    Children [
                                        group_header() Children [
                                            (Text("Group") ThemedText),
                                        ],
                                        group_body()
                                        Children [
                                            label("A standard group"),
                                            label_small("Scalar property"),
                                            (
                                                @FeathersNumberInput
                                                DemoScalarField
                                                Node {
                                                    flex_grow: 1.0,
                                                    max_width: px(100),
                                                }
                                                on(
                                                    |value_change: On<ValueChange<f32>>,
                                                    mut states: ResMut<DemoWidgetStates>| {
                                                    if value_change.is_final {
                                                        states.scalar_prop = value_change.value;
                                                    }
                                                })
                                            ),
                                            label_small("Scalar property (copy)"),
                                            (
                                                @FeathersNumberInput
                                                DemoScalarField
                                                Node {
                                                    flex_grow: 1.0,
                                                    max_width: px(100),
                                                }
                                                on(
                                                    |value_change: On<ValueChange<f32>>,
                                                    mut states: ResMut<DemoWidgetStates>| {
                                                    if value_change.is_final {
                                                        states.scalar_prop = value_change.value;
                                                    }
                                                })
                                            ),
                                            label_small("Vec3 property"),
                                            Node {
                                                display: Display::Flex,
                                                flex_direction: FlexDirection::Row,
                                                column_gap: px(6),
                                                align_items: AlignItems::Center,
                                                justify_content: JustifyContent::SpaceBetween,
                                            }
                                            Children [
                                                (
                                                    @FeathersNumberInput {
                                                        @sigil_color: tokens::TEXT_INPUT_X_AXIS,
                                                        @label_text: "X",
                                                    }
                                                    DemoVec3Field::X
                                                    Node {
                                                        flex_grow: 1.0,
                                                    }
                                                    BorderColor::all(palette::X_AXIS)
                                                    on(
                                                        |value_change: On<ValueChange<f32>>,
                                                        mut states: ResMut<DemoWidgetStates>| {
                                                        if value_change.is_final {
                                                            states.vec3_prop.x = value_change.value;
                                                        }
                                                    })
                                                ),
                                                (
                                                    @FeathersNumberInput {
                                                        @sigil_color: tokens::TEXT_INPUT_Y_AXIS,
                                                        @label_text: "Y",
                                                    }
                                                    DemoVec3Field::Y
                                                    Node {
                                                        flex_grow: 1.0,
                                                    }
                                                    on(
                                                        |value_change: On<ValueChange<f32>>,
                                                        mut states: ResMut<DemoWidgetStates>| {
                                                        if value_change.is_final {
                                                            states.vec3_prop.y = value_change.value;
                                                        }
                                                    })
                                                ),
                                                (
                                                    @FeathersNumberInput {
                                                        @sigil_color: tokens::TEXT_INPUT_Z_AXIS,
                                                        @label_text: "Z",
                                                    }
                                                    DemoVec3Field::Z
                                                    Node {
                                                        flex_grow: 1.0,
                                                    }
                                                    on(
                                                        |value_change: On<ValueChange<f32>>,
                                                        mut states: ResMut<DemoWidgetStates>| {
                                                        if value_change.is_final {
                                                            states.vec3_prop.z = value_change.value;
                                                        }
                                                    })
                                                ),
                                            ],
                                        ],
                                    ]
                                ],
                            ]
                        ]
                    ),
                ]
            ),
            subpane() Children [
                subpane_header() Children [
                    (Text("List") ThemedText),
                ],
                subpane_body() Children [
                    @FeathersListView {
                        @rows: {bsn_list![
                            @FeathersListRow Children [(Text("First World") ThemedText)],
                            @FeathersListRow Selected Children [(Text("Second Nature") ThemedText)],
                            @FeathersListRow Children [(Text("Third Degree") ThemedText)],
                            @FeathersListRow InteractionDisabled Children [(Text("Fourth Wall") ThemedText)],
                            @FeathersListRow Children [(Text("Fifth Column") ThemedText)],
                            @FeathersListRow Children [(Text("Sixth Sense") ThemedText)],
                            @FeathersListRow Children [(Text("Seventh Heaven") ThemedText)],
                            @FeathersListRow Children [(Text("Eighth Wonder") ThemedText)],
                            @FeathersListRow Children [(Text("Ninth Inning") ThemedText)],
                            @FeathersListRow Children [(Text("Tenth Amendment") ThemedText)],
                            @FeathersListRow Children [(Text("Eleventh Hour") ThemedText)],
                            @FeathersListRow Children [(Text("Twelfth Night") ThemedText)],
                        ]}
                    }
                    Node {
                        max_height: px(130)
                    }
                    on(listbox_update_selection)
                ],
            ]
        ]
    }
}

fn update_colors(
    states: Res<DemoWidgetStates>,
    mut sliders: Query<(Entity, &ColorSlider, &mut SliderBaseColor)>,
    mut swatches: Query<(&mut ColorSwatchValue, &SwatchType), With<FeathersColorSwatch>>,
    mut color_planes: Query<&mut ColorPlaneValue, With<FeathersColorPlane>>,
    q_text_input: Single<(Entity, &mut EditableText), With<HexColorInput>>,
    q_scalar_input: Query<Entity, With<DemoScalarField>>,
    q_vec3_input: Query<(Entity, &DemoVec3Field)>,
    mut commands: Commands,
    focus: Res<InputFocus>,
) {
    if states.is_changed() {
        for (slider_ent, slider, mut base) in sliders.iter_mut() {
            match slider.channel {
                ColorChannel::Red => {
                    base.0 = states.rgb_color.into();
                    commands
                        .entity(slider_ent)
                        .insert(SliderValue(states.rgb_color.red));
                }
                ColorChannel::Green => {
                    base.0 = states.rgb_color.into();
                    commands
                        .entity(slider_ent)
                        .insert(SliderValue(states.rgb_color.green));
                }
                ColorChannel::Blue => {
                    base.0 = states.rgb_color.into();
                    commands
                        .entity(slider_ent)
                        .insert(SliderValue(states.rgb_color.blue));
                }
                ColorChannel::HslHue => {
                    base.0 = states.hsl_color.into();
                    commands
                        .entity(slider_ent)
                        .insert(SliderValue(states.hsl_color.hue));
                }
                ColorChannel::HslSaturation => {
                    base.0 = states.hsl_color.into();
                    commands
                        .entity(slider_ent)
                        .insert(SliderValue(states.hsl_color.saturation));
                }
                ColorChannel::HslLightness => {
                    base.0 = states.hsl_color.into();
                    commands
                        .entity(slider_ent)
                        .insert(SliderValue(states.hsl_color.lightness));
                }
                ColorChannel::Alpha => {
                    base.0 = states.rgb_color.into();
                    commands
                        .entity(slider_ent)
                        .insert(SliderValue(states.rgb_color.alpha));
                }
            }
        }

        for (mut swatch_value, swatch_type) in swatches.iter_mut() {
            swatch_value.0 = match swatch_type {
                SwatchType::Rgb => states.rgb_color.into(),
                SwatchType::Hsl => states.hsl_color.into(),
            };
        }

        for mut plane_value in color_planes.iter_mut() {
            plane_value.0.x = states.rgb_color.red;
            plane_value.0.y = states.rgb_color.blue;
            plane_value.0.z = states.rgb_color.green;
        }

        // Only update the hex input field when it's not focused, otherwise it interferes
        // with typing.
        let (input_ent, mut editable_text) = q_text_input.into_inner();
        if Some(input_ent) != focus.get() {
            editable_text.queue_edit(TextEdit::SelectAll);
            editable_text.queue_edit(TextEdit::Insert(states.rgb_color.to_hex().into()));
        }

        for scalar_input_ent in q_scalar_input.iter() {
            commands.trigger(UpdateNumberInput {
                entity: scalar_input_ent,
                value: NumberInputValue::F32(states.scalar_prop),
            });
        }

        for (vec3_input_ent, axis) in q_vec3_input.iter() {
            let new_value = match axis {
                DemoVec3Field::X => states.vec3_prop.x,
                DemoVec3Field::Y => states.vec3_prop.y,
                DemoVec3Field::Z => states.vec3_prop.z,
            };

            commands.trigger(UpdateNumberInput {
                entity: vec3_input_ent,
                value: NumberInputValue::F32(new_value),
            });
        }
    }
}

fn handle_hex_color_change(
    _change: On<TextEditChange>,
    q_text_input: Single<&EditableText, With<HexColorInput>>,
    mut colors: ResMut<DemoWidgetStates>,
) {
    let editable_text = *q_text_input;
    if let Ok(color) = Srgba::hex(editable_text.value().to_string())
        && color != colors.rgb_color
    {
        colors.rgb_color = color;
    }
}