Color Component Control Sets

Elements Custom Components
1

After looking at the color control further, I’ve noticing a few things:

  • Would like a default color set that includes both pure white & pure black, maybe repurpose Black & White for this, as are unused placeholders

  • Need a built-in way to set opacity on colors, preferable in rgba

  • Need a way to setup a custom color set in a control so it shows up in the color dropdown

  • Red & Rose color sets are so similar that really no need for both, I think Rose has a better looking upper range

  • Gray seems to have blue tint in it - maybe rename to Gray Blue

2

Black, White, and Transparent are available for use in classes (so you can hard code bg-black text-white for example), but they are not currently available via the themeColor control as single colors.

All themes will ship with black and white color palettes , so for now you can use those for black and white colors.

I am going to discourage hard coding anything as the idea is the user can select the colours they want/need, and it should be tied to the available colours in the Theme Studio.

We are aware of this, but it won’t make in to version 1.0.

You will need to add a control to your component if you want the user to set the colour opacity.

Components cannot do this by design.

A user can add colors in the Theme Studio.

Themes can ship with custom color palettes.

This are the standard tailwind colours, we won’t be changing or renaming them for compatibility reasons. We want all tailwind code to “just work” in Elements.

However, Themes can override the default color palettes (but they cannot be removed).

2 Likes
3

@bon
Hi Ben,
Re: custom color set:

Just thinking ahead, this will probably feel pretty restrictive for devs, as we are all used to setting defaults in everything and they will want to create a custom set - the default sets just seem too limiting.

4

Components can default to any color shade in of the color palettes.

If components set custom inline/one-off colors then there will be no design consistency - for example: the user wouldn’t be able to update a color across their entire project.

The system we have setup with colors in the Theme Studio gives control to the user: they can change colors and switch themes anytime they want and know that everything will “just work”.

5

I wasn’t implying a user couldn’t update whatever the default is set to. Those color sets are probably just an array or plist entry & a custom one could be ingested into the dropdown. At least initially, a component would have a custom color, until the user wants something else :wink:

6

Hey @Bill,

Tailwind includes an expertly-crafted default color palette out-of-the-box - you should take advantage of that and use it — Customizing Colors - Tailwind CSS

All components need to work out of the box. If you set colours that are not part of the default Tailwind set, then you’ll break compatibility with themes (we have three sample ones now, but there will be A LOT).

A good starting guide is to use “Brand” for things like buttons, and “Text” for the text colours, and “Surface” for background colours.

Check this video below to see this magic working in practice. Notice how the theme can switch between dark and light themes, this is because I’ve set the correct Tailwind colours!!!