(v2) Color range of 0-950 doesn't match the tailwind convention. Please switch to 50-950 for clarity and convention

[resticker]

Description

Tailwind uses the convention that 50 is the lightest and 950 is the darkest (50-950 range).

See: Tailwind Customizing Color Docs

However, the current gluestack color scheme is set up with 0 as the lightest color and 950 is the darkest color (0-950 range). I.e.:

export const config = {
  light: vars({
    '--color-primary-0': '179 179 179',
    '--color-primary-50': '153 153 153',
    '--color-primary-100': '128 128 128',
    '--color-primary-200': '115 115 115',
    '--color-primary-300': '102 102 102',
    '--color-primary-400': '82 82 82',
    '--color-primary-500': '51 51 51',
    '--color-primary-600': '41 41 41',
    '--color-primary-700': '31 31 31',
    '--color-primary-800': '13 13 13',
    '--color-primary-900': '10 10 10',
    '--color-primary-950': '8 8 8',
    },
   ... (other colors)
};

Problem Statement

There are several reasons why I think gluestack should conform to the conventional 50-950 range:

1. We don't include 1000, so it doesn't make sense for 0 to be included. 1000 (from what I understand) would be 100% black (which would have no color tint), which means that 0 should be 0% black (which would also have zero color tint). The current gluestack color scheme doesn't treat 0 this way, though. Currently gluestack uses 0 to represent "the lightest variation of this color", which is what 50 is designed to be (again, from my understanding). It's confusing that 0 has any color tint
2. Tools built to create color shades are designed with 50-950 in mind. Just search for tailwind shade generator in Google, but here are some top results: Example 1, Example 2, Example 3, Example 4. Note: This reason is what prompted me to make this feature request. It's been frustrating to try and manipulate the colors to fit the 0-950 range.
3. It's an unnecessary mental shift for devs coming from the standard 50-950 range.
4. 11 shades is sufficient for the default color scheme. The standard 50-950 range is 11 shades of color. Do we really need another shade to manage? 0-950 is 12 shades, which means yet another color devs have to manage.
5. Gluestack is closely associated with tailwind (see mentions of "tailwind" on the homepage and in the docs), so it should follow Tailwind conventions as closely as possible to reduce friction for developers.

Proposed Solution or API

1. Leave the 500 color the same and regenerate the colors with 50 as the lightest in the default color scheme.
2. Update gluestack components to match

Alternatives

No response

Additional Information

No response

[resticker]

Found a couple palette generators (palettes and huey) that support any number of shades.

Also, it makes me think that my logic that 1000 = full black may be a bit mistaken. 0 would still be colorless, but I suppose 1000 isn't necessarily full black 😀. So all the reasons (besides the first half of #1 lol) listed above still seem valid.

[rajat693]

hey @resticker , Thanks for reporting the issue. We will have a look.

[tanishabiswas]

We appreciate you taking the time to share your thoughts on the gluestack color scheme.

We know that Tailwind follows the 50-950 convention, with 50 being the lightest and 950 the darkest shade. That said, our choice to adopt the 0-950 range is rooted in a few key reasons:

1. Broader Spectrum: By starting with 0 as the lightest shade, we can offer more nuanced control over color variations, which is vital for achieving specific design goals.

2. Dark Mode Optimization: The 0-950 range is especially advantageous for dark mode design. It provides finer control over lighter shades, ensuring elements remain visually distinct and accessible in low-light settings, which is crucial for creating a seamless and user-friendly dark mode experience.

That being said, we’re always listening to our community. If we receive a significant number of requests around this, we’ll definitely circle back to reassess and consider adjustments.

[resticker]

Just trying to help out 😃.

If those are the two main reasons for using a 0-shade, might I suggest that for:

1. Broader Spectrum: Use a 25- shade or some other non-zero shade less than 50-. My understanding is that 0- represents colorless. See what tailwind did back in 2020: "We’ve added an extra light 50 shade for every color". They added a shade between 0 and 100 to make a lighter variant. The shade number number represents "how much" color there is. If you adopt 0- as a shade, then what happens if you need an even lighter color? You can't really go negative. If you use 25- (or 10-, or 5-), you have room to make even lighter (or darker) variations, for almost infinitely nuanced control. That way you have a much broader spectrum available to you.

2. Dark Mode Optimization: "It provides finer control over lighter shades" is helped by using a low non-zero shade (like 25-), since it provides an even broader spectrum than 0-.

Working with the gluestack color system was a bit frustrating (see problems 2 & 3 above) and confusing* for me, but I figure it's a new library so some wrinkles should be anticipated! 😎

*0- shade was unintuitive, since it's seemed to shift the spectrum down and did not convey "fully colorless". Also 0- shade interacts in a unintuitively with the dark theme.

Your work is appreciated, and I imagine you all are very busy with this project and others. Just please consider conforming the color scheme to the tailwind convention (0 = colorless, low numbers = light, 1000+ is either black or nearly black) to solve the problems in the original feature request. Then this project will be even more rewarding to future devs that want to use gluestack in their projects 😄

[mgray88]

I just wanted to second @resticker's statements, 0-950 is difficult to work with and does not jive well with tailwind theming