Refactor Colors and decouple color name from value for theming.

[minimit]

Hello I've an idea for colors.

I find that I don't need all the different colors values, I usually need one or two variants of colors. My proposition is this, ditch all red green etc.. colors, or make them optional. Instead set a accent color, or if you prefer extensibility a primary and secondary color.

colors: {
  transparent: 'transparent',
  current: 'currentColor',
  black: '#000',
  white: '#fff',
  gray: {
    50: '#FCFDFF',
    100: '#FAFCFF',
    200: '#F2F6FF',
    300: '#EAF1FF',
    400: '#DBE7FF',
    500: '#CBDCFF',
    600: '#B7C6E6',
    700: '#7A8499',
    800: '#5B6373',
    900: '#3D424D',
  },
  accent: {
    50: '#F2F8FF',
    100: '#E6F2FF',
    200: '#BFDDFF',
    300: '#99C9FF',
    400: '#4DA1FF',
    500: '#0078FF',
    600: '#006CE6',
    700: '#004899',
    800: '#003673',
    900: '#00244D',
  },
},

This way not only the file size will be smaller, but more importantly when theming you don't need to change all occurrence of red- etc.. in the markup, or change the red etc.. in the tailwind settings (you would end up with red color names for colors not anymore red). You just change tailwind settings colors for accent or primary and secondary. You decouple color name from value for theming.

For special colors you can set success and error etc.. colors in the same way, since you don't have red and green colors.

colors: {
  success: '#48bb78',
  error: '#f56565',
},

What do you think guys?

[simonswiss]

Hey!

What you described would work really well as a preset you can reuse across all your projects!

This is a great approach, but bakes in a lot more opinion in a project than the default, "prototype with everything" config. Sometimes you just want to have access to all the colors under the sun when starting a project and operating in "discovery" mode.

That said, customising and culling down colors is absolutely a good idea and something we recommend on a per-project/brand basis!

[minimit]

Yea I guess it's the way to go