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.

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

bevy_color: Add Tailwind palette #12080

Merged
merged 4 commits into from
Mar 18, 2024
Merged

Conversation

rparrett
Copy link
Contributor

@rparrett rparrett commented Feb 24, 2024

Objective

Give Bevy a well-designed built-in color palette for users to use while prototyping or authoring Bevy examples.

Solution

Generate (playground, gist) consts from Tailwind (mit license) json.

Discussion

Are there other popular alternatives we should be looking at? Something new and fancy involving a really long acronym like CIELUVLCh? I'm not a tailwind user or color expert, but I really like the way it's broken up into distinct but plentiful hue and lightness groups.

It beats needing some shades of red, scrolling through the current palette, choosing a few of CRIMSON, MAROON, RED, TOMATO at random and calling it a day.

The best information I was able to dig up about the Tailwind palette is from this thread: https://twitter.com/steveschoger/status/1303795136703410180. Here are some key excerpts:

Tried to the "perceptually uniform" thing for Tailwind UI.
Ultimately, it just resulted in a bunch of useless shades for colors like yellow and green that are inherently brighter.

With that said you're guaranteed to get a contrast ratio of 4.5:1 when using any 700 shade (in some cases 600) on a 100 shade of the same hue.

We just spent a lot of time looking at sites to figure out which colors are popular and tried to fill all the gaps.
Even the lime green is questionable but felt there needed to be something in between the jump from yellow to green 😅

@IceSentry
Copy link
Contributor

IceSentry commented Feb 24, 2024

I'm pretty sure we should include the tailwind license in the file and maybe also mention it in the docs. It's just MIT so it's compatible, with us but not sure about the apache case.

@IceSentry
Copy link
Contributor

IceSentry commented Feb 24, 2024

Here's how I did that in an old crate of mine https://github.com/IceSentry/bevy_ui_styled/blob/master/src/colors.rs

It was copied from here https://github.com/tailwindlabs/tailwindcss/blob/master/LICENSE

Copy link
Contributor

@IceSentry IceSentry left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll approve, but I think we'll want @cart involved here because of the license situation. It's a bit of an edge case if someone wants to use bevy with the apache license they can't use that module I guess. I honestly don't know enough about licensing.

@alice-i-cecile alice-i-cecile added C-Enhancement A new feature A-Rendering Drawing game state to the screen S-Ready-For-Final-Review This PR has been approved by the community. It's ready for a maintainer to consider merging it labels Feb 24, 2024
@alice-i-cecile alice-i-cecile added the X-Controversial There is active debate or serious implications around merging this PR label Feb 24, 2024
@alice-i-cecile alice-i-cecile added this to the 0.14 milestone Feb 24, 2024
@alice-i-cecile
Copy link
Member

I'm pretty firmly of the opinion that this is fine from a licensing perspective. MIT allows users to relicense the code (as long as they provide attribution and a copy of the license). It doesn't include a patent grant, but this is a color palette: I don't think that's a relevant concern.

@soqb
Copy link
Contributor

soqb commented Feb 25, 2024

don't want to hamper any progress here, but couldn't this very easily be a standalone community crate?

this is of course true for the other palettes, but at least the css and stand-alone modules are more "ubiquitous".

the actual implementation is solid, though.

@alice-i-cecile
Copy link
Member

don't want to hamper any progress here, but couldn't this very easily be a standalone community crate?

It definitely could, but I'd like to have access to at least one "good" color palette: it's really painful trying to build nice examples and dev tools with only hand-authored magic values and the terrible CSS colors.

@rparrett
Copy link
Contributor Author

rparrett commented Feb 25, 2024

don't want to hamper any progress here, but couldn't this very easily be a standalone community crate?
this is of course true for the other palettes, but at least the css and stand-alone modules are more "ubiquitous".

Definitely. There are a few existing examples I know of:
https://github.com/guimcaballero/bevy_contrib_colors
https://lib.rs/crates/bevy_ui_styled

Which I am choosing to interpret as a sign that there is demand for this. IMO, the CSS palette we do provide may be ubiquitous, but it is also next to useless and is actively harming the look and feel of our examples and our users' projects. I suppose that's being a bit dramatic.

I would still be very open to providing a single better "bevy palette" instead, but the way the palettes were modularized in the new bevy_color makes PR very easy and I don't know of / don't know how to create a better palette.

@soqb
Copy link
Contributor

soqb commented Feb 26, 2024

yep. you've convinced me.

@viridia
Copy link
Contributor

viridia commented Feb 28, 2024

I want to point out that it's pretty easy to algorithmically generate a good-looking palette, similar to Tailwind, Material Design, or whatever framework du jour you prefer, especially if you use Oklch to do the calculations, which gives you consistent lightness across different hues.

github-merge-queue bot pushed a commit that referenced this pull request Mar 6, 2024
# 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 pull request Mar 9, 2024
…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.
@viridia
Copy link
Contributor

viridia commented Mar 16, 2024

BTW, I think the tailwind palette is fine. Yes, there are other palettes - MaterialUI, NextUI, Bootstrap, etc., but they are all about the same. We don't need more than one, and people know the name Tailwind, it has brand recognition.

BTW, the NextUI palette is interesting, it's a bit funkier than most, you can see that none of the colors are "pure" tones - for example the reds have just a hint of purple in them, they are not a fire engine red that most other palettes would have.

@alice-i-cecile alice-i-cecile removed the X-Controversial There is active debate or serious implications around merging this PR label Mar 18, 2024
@alice-i-cecile alice-i-cecile added this pull request to the merge queue Mar 18, 2024
Merged via the queue into bevyengine:main with commit 289a02c Mar 18, 2024
26 checks passed
@BD103 BD103 added the A-Color Color spaces and color math label May 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-Color Color spaces and color math A-Rendering Drawing game state to the screen C-Enhancement A new feature S-Ready-For-Final-Review This PR has been approved by the community. It's ready for a maintainer to consider merging it
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants