(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.