Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create and use a unified example color palette #12176

Open
alice-i-cecile opened this issue Feb 28, 2024 · 4 comments
Open

Create and use a unified example color palette #12176

alice-i-cecile opened this issue Feb 28, 2024 · 4 comments
Labels
A-Cross-Cutting Impacts the entire engine A-Editor Graphical tools to make Bevy games C-Examples An addition or correction to our examples C-Usability A targeted quality-of-life change that makes Bevy easier to use D-Straightforward Simple bug fixes and API improvements, docs, test and examples X-Contentious There are nontrivial implications that should be thought through

Comments

@alice-i-cecile
Copy link
Member

What problem does this solve or what need does it fill?

The examples currently use a huge array of colors, for no good reason.

This is hard to modify, distracting and frequently ugly. This problem is particularly bad with text, with everything from fully saturated RED to BLACK to WHITE to 90% grey, 80% grey, GOLD and arbitrarily selected SRGB values being selected.

What solution would you like?

Add a simple bevy color palette to bevy_colors. Include our default clear color in there, and otherwise steal branding colors from the website. Look through the examples and slowly replace all other color palettes.

What alternative(s) have you considered?

Use the tailwind color palette everywhere. It won't be as coherent (since it's very large) or easy to change (since it has an external definition), but at least it won't be as 80s.

Additional context

Encountered during #12163. This work cannot be finalized until that PR is merged.
@alice-i-cecile alice-i-cecile added D-Trivial Nice and easy! A great choice to get started with Bevy C-Examples An addition or correction to our examples C-Usability A targeted quality-of-life change that makes Bevy easier to use A-Editor Graphical tools to make Bevy games labels Feb 28, 2024
@chompaa
Copy link
Member

chompaa commented Feb 28, 2024

I've extracted the following colors from the website, and annotated them with potential names:

  • Baltic Sea #2b2c2f
  • Harp #ececec
  • Kashmir Blue #4a6e91
  • Twilight Lavender #954c72
  • Dodger Blue #4d85ff
  • Saffron Mango #ffc14d
  • Faded Green #7db56e

Hopefully these can be of use.

@alice-i-cecile alice-i-cecile mentioned this issue Feb 28, 2024
Merged
16 tasks
@tomara-x tomara-x mentioned this issue Feb 28, 2024
Open
@rparrett
Copy link
Contributor

I think it would be helpful for discussion to make a distinction between what I would call a "theme" and a "palette."

A "theme" in my eyes might provide constants like:

bevy_light::PRIMARY_BUTTON, bevy_light::PRIMARY_BUTTON_BORDER, bevy_light::DESTRUCTIVE_BUTTON, bevy_dark::BACKGROUND, bevy_dark::FOREGROUND, or whatever. These would provide a semantic mapping to actual color values in a palette.

A "palette" might provide constants like:

bevy::BLUE_(50-950), bevy::PINK_(50-950), bevy::GREY_(50-950) with various shades of hues specific to Bevy's branding.

Is this issue just asking for a palette specific to Bevy's branding? Or are we trying to set up a theme for examples to follow?

@alice-i-cecile
Copy link
Member Author

I'm primarily interested in a theme here. It would be really useful for improving the look and consistency of the examples, and reducing review time bikeshedding colors.

A palette seems like a necessary pre-requisite for that, and a good way to add colors for examples with unusual needs.

@alice-i-cecile alice-i-cecile removed the D-Trivial Nice and easy! A great choice to get started with Bevy label Feb 28, 2024
@alice-i-cecile alice-i-cecile mentioned this issue Mar 1, 2024
Closed
@rparrett rparrett mentioned this issue Mar 6, 2024
Merged
github-merge-queue bot pushed a commit that referenced this issue Mar 6, 2024
@rparrett
Fix "dark grey" colors becoming lighter in various examples (#12333)
d56e167 
# Objective

Fixes #12226

Prior to the `bevy_color` port, `DARK GRAY` used to mean "dark grey."
But it is now lighter than `GRAY`, matching the css4 spec.

## Solution

Change usages of `css::DARK_GRAY` to `Color::srgb(0.25, 0.25, 0.25)` to
restore the examples to their former colors.

With one exception: `display_and_visibility`. I think the new color is
an improvement.

## Note

A lot of these examples could use nicer colors. I'm not trying to revamp
everything here.

The css4 palette is truly a horror. See #12176 and #12080 for some
discussion about alternatives.
spectria-limina pushed a commit to spectria-limina/bevy that referenced this issue Mar 9, 2024
@rparrett @spectria-limina
Fix "dark grey" colors becoming lighter in various examples (bevyengi…
db1219b 
…ne#12333)

# Objective

Fixes bevyengine#12226

Prior to the `bevy_color` port, `DARK GRAY` used to mean "dark grey."
But it is now lighter than `GRAY`, matching the css4 spec.

## Solution

Change usages of `css::DARK_GRAY` to `Color::srgb(0.25, 0.25, 0.25)` to
restore the examples to their former colors.

With one exception: `display_and_visibility`. I think the new color is
an improvement.

## Note

A lot of these examples could use nicer colors. I'm not trying to revamp
everything here.

The css4 palette is truly a horror. See bevyengine#12176 and bevyengine#12080 for some
discussion about alternatives.
@alice-i-cecile alice-i-cecile added A-Cross-Cutting Impacts the entire engine A-Color Color spaces and color math and removed A-Color Color spaces and color math labels May 3, 2024
@alice-i-cecile alice-i-cecile added X-Contentious There are nontrivial implications that should be thought through D-Straightforward Simple bug fixes and API improvements, docs, test and examples labels Jun 10, 2024
@alice-i-cecile
Copy link
Member Author

When tackling this, we should swap our examples to use from_color where it exists, to follow-up #13791

rbwldrf added a commit to NOT-REAL-GAMES/Murder that referenced this issue Oct 30, 2024
@rbwldrf
switching to a subtler color palette
b2623c6 
based on [this unofficial branding palette](bevyengine/bevy#12176 (comment))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
A-Cross-Cutting Impacts the entire engine A-Editor Graphical tools to make Bevy games C-Examples An addition or correction to our examples C-Usability A targeted quality-of-life change that makes Bevy easier to use D-Straightforward Simple bug fixes and API improvements, docs, test and examples X-Contentious There are nontrivial implications that should be thought through
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@rparrett @alice-i-cecile @chompaa