Skip to content

Commit 90b4154

Browse files
alice-i-cecilealice-i-cecile
authored
Improve default colors for text_input widgets (#23960)
# Objective - Text input is one of the headline feature in Bevy 0.19. - Our defaults are currently very ugly, and shown across our user-facing text examples. - Good default matter for user perception of quality, and to make quick prototyping easier. - Additionally, the layout in the text_input example is erratic in a way that looks poorly made. Fixes #23955. ## Solution 1. Clean up the default colors for text input by picking boring, uncontroversial tailwind colors. 2. Change the css::YELLOW borders in our text input examples to something neutral that looks nice with our background. 3. Fix up the layout for the `text_input` example so it's both simpler and looks much better. ## Testing `cargo run --example text_input` ## Showcase Before: <img width="873" height="773" alt="image" src="https://github.com/user-attachments/assets/bcc70bf6-e6b1-4bf4-b671-7924ac24e984" /> After: <img width="757" height="274" alt="image" src="https://github.com/user-attachments/assets/e1a3e325-b3a7-4a9b-831e-6886e6a818fc" />
1 parent dca740e commit 90b4154

8 files changed

Lines changed: 42 additions & 45 deletions

File tree

‎crates/bevy_feathers/src/dark_theme.rs‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -259,10 +259,7 @@ pub fn create_dark_theme() -> ThemeProps {
259259
),
260260
(tokens::TEXT_INPUT_CURSOR, palette::ACCENT.lighter(0.2)),
261261
(tokens::TEXT_INPUT_SELECTION, palette::ACCENT),
262-
(
263-
tokens::TEXT_INPUT_SELECTION_UNFOCUSED,
264-
palette::ACCENT.lighter(0.2),
265-
),
262+
(tokens::TEXT_INPUT_SELECTION_UNFOCUSED, palette::TRANSPARENT),
266263
(tokens::TEXT_INPUT_X_AXIS, palette::X_AXIS),
267264
(tokens::TEXT_INPUT_Y_AXIS, palette::Y_AXIS),
268265
(tokens::TEXT_INPUT_Z_AXIS, palette::Z_AXIS),

‎crates/bevy_feathers/src/palette.rs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
//! The Feathers standard color palette.
22
use bevy_color::Color;
33

4+
/// <div style="background-color: transparent; width: 10px; padding: 10px; border: 1px solid;"></div>
5+
pub const TRANSPARENT: Color = Color::oklcha(0.0, 0.0, 0.0, 0.0);
46
/// <div style="background-color: #000000; width: 10px; padding: 10px; border: 1px solid;"></div>
57
pub const BLACK: Color = Color::oklcha(0.0, 0.0, 0.0, 1.0);
68
/// <div style="background-color: #1F1F24; width: 10px; padding: 10px; border: 1px solid;"></div> - window background

‎crates/bevy_text/src/cursor.rs‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
use bevy_color::{
2-
palettes::css::{BLUE, GREEN, RED},
2+
palettes::tailwind::{SKY_300, SKY_400, SLATE_700},
33
Color,
44
};
55
use bevy_ecs::component::Component;
@@ -17,6 +17,9 @@ pub struct TextCursorStyle {
1717
/// Background color of selected text
1818
pub selection_color: Color,
1919
/// Background color of unfocused selected text
20+
///
21+
/// In many applications, this is completely transparent.
22+
/// This reduces visual clutter of de-emphasized text inputs.
2023
pub unfocused_selection_color: Color,
2124
/// If some, overrides the color of selected text
2225
pub selected_text_color: Option<Color>,
@@ -25,9 +28,9 @@ pub struct TextCursorStyle {
2528
impl Default for TextCursorStyle {
2629
fn default() -> Self {
2730
Self {
28-
color: RED.into(),
29-
selection_color: Color::from(GREEN),
30-
unfocused_selection_color: Color::from(BLUE),
31+
color: Color::from(SLATE_700),
32+
selection_color: Color::from(SKY_300),
33+
unfocused_selection_color: Color::from(SKY_400),
3134
selected_text_color: None,
3235
}
3336
}

‎examples/ui/text/editable_text_filter.rs‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
//! Demonstrates a minimal [`EditableTextFilter`] with an 8-character hex input.
22
3-
use bevy::color::palettes::css::{DARK_SLATE_GRAY, YELLOW};
3+
use bevy::color::palettes::css::DARK_SLATE_GRAY;
4+
use bevy::color::palettes::tailwind::SLATE_300;
45
use bevy::input_focus::AutoFocus;
56
use bevy::prelude::*;
67
use bevy::text::{EditableText, EditableTextFilter, TextCursorStyle};
@@ -39,7 +40,7 @@ fn setup(mut commands: Commands) {
3940
EditableTextFilter::new(|c| c.is_ascii_hexdigit()),
4041
TextFont::from_font_size(32.),
4142
BackgroundColor(DARK_SLATE_GRAY.into()),
42-
BorderColor::all(YELLOW),
43+
BorderColor::all(SLATE_300),
4344
AutoFocus,
4445
));
4546
});

‎examples/ui/text/ime_support.rs‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
//! To use IME input, the system must have fonts installed that support the target script.
77
//! This example uses [`FontSource::SansSerif`], which resolves to a system sans-serif font.
88
//! On systems without e.g. CJK fonts installed, CJK input will render as boxes or question marks.
9-
use bevy::color::palettes::css::{DARK_GREY, YELLOW};
9+
use bevy::color::palettes::css::DARK_GREY;
10+
use bevy::color::palettes::tailwind::SLATE_300;
1011
use bevy::input_focus::{
1112
tab_navigation::{TabGroup, TabIndex, TabNavigationPlugin},
1213
InputFocus,
@@ -59,7 +60,7 @@ fn setup(mut commands: Commands) {
5960
font_size: FontSize::Px(32.0),
6061
..default()
6162
},
62-
BorderColor::from(Color::from(YELLOW)),
63+
BorderColor::from(Color::from(SLATE_300)),
6364
EditableText::default(),
6465
TextCursorStyle::default(),
6566
TabIndex(0),

‎examples/ui/text/multiline_text_input.rs‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
//! Demonstrates a single, minimal multiline [`EditableText`] widget.
22
3-
use bevy::color::palettes::css::{DARK_SLATE_GRAY, YELLOW};
3+
use bevy::color::palettes::css::DARK_SLATE_GRAY;
4+
use bevy::color::palettes::tailwind::SLATE_300;
45
use bevy::input::keyboard::{Key, KeyboardInput};
56
use bevy::input_focus::tab_navigation::{TabGroup, TabIndex, TabNavigationPlugin};
67
use bevy::input_focus::{AutoFocus, FocusedInput};
@@ -73,7 +74,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
7374
..default()
7475
},
7576
BackgroundColor(DARK_SLATE_GRAY.into()),
76-
BorderColor::all(YELLOW),
77+
BorderColor::all(SLATE_300),
7778
MultilineInput,
7879
TabIndex(0),
7980
AutoFocus,
@@ -134,7 +135,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
134135
..default()
135136
},
136137
BackgroundColor(DARK_SLATE_GRAY.into()),
137-
BorderColor::all(YELLOW),
138+
BorderColor::all(SLATE_300),
138139
EditableText::new("8"),
139140
EditableTextFilter::new(|c| c.is_ascii_digit()),
140141
TextCursorStyle {
@@ -215,7 +216,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
215216
..default()
216217
},
217218
BackgroundColor(DARK_SLATE_GRAY.into()),
218-
BorderColor::all(YELLOW),
219+
BorderColor::all(SLATE_300),
219220
EditableText::new("30"),
220221
EditableTextFilter::new(|c| c.is_ascii_digit()),
221222
TextCursorStyle {

‎examples/ui/text/multiple_text_inputs.rs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
//! that is kept synchronized with the [`EditableText`]'s contents by the [`synchronize_output_text`] system, and the third column is updated
55
//! by the [`submit_text`] system when the user submits the [`EditableText`]'s text by pressing `Ctrl` + `Enter`.
66
7-
use bevy::color::palettes::css::YELLOW;
7+
use bevy::color::palettes::tailwind::SLATE_300;
88
use bevy::input::keyboard::Key;
99
use bevy::input_focus::AutoFocus;
1010
use bevy::input_focus::{
@@ -103,7 +103,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
103103
BackgroundColor(bevy::color::palettes::css::DARK_GREY.into()),
104104
TextInputRow(row),
105105
TabIndex(row as i32),
106-
BorderColor::all(YELLOW),
106+
BorderColor::all(SLATE_300),
107107
));
108108
if row == 0 {
109109
input.insert(AutoFocus);
@@ -229,7 +229,7 @@ fn update_row_border_colors(
229229

230230
for (row, mut border_color, is_input) in &mut row_borders {
231231
let mut color = if is_input {
232-
YELLOW.into()
232+
SLATE_300.into()
233233
} else {
234234
Color::WHITE
235235
};

‎examples/ui/text/text_input.rs‎

Lines changed: 18 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@
2222
//! To enable this feature in your own project, add the `system_clipboard` feature to your list of enabled features for `bevy` in your `Cargo.toml`.
2323
//!
2424
//! See the module documentation for [`editable_text`](bevy::ui_widgets::editable_text) for more details.
25-
use bevy::color::palettes::css::{DARK_GREY, YELLOW};
25+
use bevy::color::palettes::css::DARK_GREY;
26+
use bevy::color::palettes::tailwind::SLATE_300;
2627
use bevy::input_focus::AutoFocus;
2728
use bevy::input_focus::{
2829
tab_navigation::{TabGroup, TabIndex, TabNavigationPlugin},
@@ -44,44 +45,38 @@ fn main() {
4445
struct TextOutput;
4546

4647
fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
47-
// Set up a camera
48-
// We need a camera to see the UI
4948
commands.spawn(Camera2d);
5049

51-
// Create a root UI node, so we can place the input above the output in a column
5250
let root = commands
5351
.spawn(Node {
54-
display: Display::Block,
52+
display: Display::Flex,
53+
flex_direction: FlexDirection::Column,
54+
padding: px(20).all(),
55+
row_gap: px(16),
5556
..default()
5657
})
5758
.id();
5859

5960
let text_instructions = commands
6061
.spawn((
61-
Node {
62-
width: px(400),
63-
height: px(100),
64-
..Default::default()
65-
},
66-
BorderColor::from(Color::from(YELLOW)),
6762
Text::new("Ctrl+Enter to submit text"),
6863
TextFont {
6964
font: asset_server.load("fonts/FiraSans-Bold.ttf").into(),
7065
font_size: FontSize::Px(30.0),
7166
..default()
7267
},
73-
UiTransform::from_translation(Val2::ZERO),
7468
))
7569
.id();
7670

77-
let text_input_left = build_input_text(&mut commands, true, 30.0);
78-
let text_input_right = build_input_text(&mut commands, false, 50.0);
71+
let text_input_left = build_input_text(&mut commands, true, 24.0);
72+
let text_input_right = build_input_text(&mut commands, false, 24.0);
7973

8074
let input_container = commands
8175
.spawn((
8276
Node {
8377
display: Display::Flex,
8478
align_items: AlignItems::Start,
79+
column_gap: px(16),
8580
..default()
8681
},
8782
AutoFocus,
@@ -93,23 +88,21 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
9388
let text_output = commands
9489
.spawn((
9590
Node {
96-
width: px(400),
97-
height: px(100),
98-
border: px(5).all(),
91+
width: px(416),
92+
border: px(2).all(),
93+
padding: px(8).all(),
9994
..Default::default()
10095
},
101-
BorderColor::from(Color::from(YELLOW)),
102-
Text::new("testing"),
96+
BorderColor::from(Color::from(SLATE_300)),
97+
Text::new(""),
10398
TextOutput,
10499
TextFont {
105-
font_size: FontSize::Px(70.0),
100+
font_size: FontSize::Px(24.0),
106101
..default()
107102
},
108-
UiTransform::from_translation(Val2::px(5.0, 200.0)),
109103
))
110104
.id();
111105

112-
// Assemble our hierarchy
113106
commands
114107
.entity(input_container)
115108
.add_children(&[text_input_left, text_input_right]);
@@ -124,11 +117,11 @@ fn build_input_text(commands: &mut Commands, is_left: bool, font_size: f32) -> E
124117
.spawn((
125118
Node {
126119
width: px(200),
127-
border: px(5).all(),
128-
padding: px(5).all(),
120+
border: px(2).all(),
121+
padding: px(8).all(),
129122
..Default::default()
130123
},
131-
BorderColor::from(Color::from(YELLOW)),
124+
BorderColor::from(Color::from(SLATE_300)),
132125
Name::new(if is_left { "Left" } else { "Right" }),
133126
EditableText {
134127
max_characters: (!is_left).then_some(7),
@@ -141,7 +134,6 @@ fn build_input_text(commands: &mut Commands, is_left: bool, font_size: f32) -> E
141134
TextCursorStyle::default(),
142135
TabIndex(if is_left { 0 } else { 1 }),
143136
BackgroundColor(DARK_GREY.into()),
144-
UiTransform::from_translation(Val2::px(if is_left { 0.0 } else { 300.0 }, 50.0)),
145137
))
146138
.id()
147139
}

0 commit comments

Comments
 (0)