Extend Radix Color palette to include a 0th step

[psirenny]

See this issue in Radix Colors for more information: radix-ui/colors#29

The idea is based on two observations:

• Dark mode is missing a very dark Radix app background color. Tailwindcss introduced a 950 shade to address this problem.
• Light mode uses white instead of a color step for the app background color because the colors are too dark.

This suggests that there's a missing color step for app backgrounds.

[psirenny]

@ThomasSeaver I think you ran into a problem with not having enough background colors to choose from in dark mode, so I'm curious to hear your thoughts. I don't know enough about color theory to know a good way of deriving the 0th step, but I can try to eyeball it.

[ThomasSeaver]

totally agree, a lot of the components I've seen use white in a way that black isn't directly interchangeable in dark-mode, and I think there's some step missing (950 seems to indicate that)

I will say although we've already run into that (falling-back to bg-black) I think what I ran into was that a pop-over needed to exist on top of two different background levels, which required the popover to be bg-gray-3 which upset the scale for all the selectable + pressable components inside it. Maybe a solution for that would have been replacing bg-black and bg-gray-1 with the hypothetical bg-gray-0, which would allow the rest of the components to shift back down and use the scale appropriately. Either way I think we would benefit from a 0th background-level; just having those two does feel limiting occasionally, though I'm sure a UX person could come in and tell me why that's wrong and needing more than two is actually a design problem 😆

[psirenny]

Oh yea, I completely forgot about input background colors! That makes me further convinced there's a missing color step 😄

though I'm sure a UX person could come in and tell me why that's wrong and needing more than two is actually a design problem 😆

Perhaps we should be making more use of black-a and white-a overlays. I just looked at how TailwindUI handles inputs in dark mode and they're using a white overlay: https://tailwindui.com/components/marketing/sections/newsletter-sections