Alpha Transparency about colors

[colmtuite]

The idea is that the opaque and alpha scales are interchangeable, since they match almost perfectly.

Sometimes you need a color to be transparent, so it works well on coloured backgrounds for example. Let's say you have a text field with a light gray border, we'll use Mauve for this example. You use step mauve7 here for the border. That border will work well on a white background in light mode, or a dark background in dark mode.

But the border won't look great on a purple background for example. So you can use mauveA7, which is transparent. Now your text field border will work well on any background because it blends in, but it still looks the same as mauve7 on white/dark backgrounds.

Sometimes you need opaque colors, sometimes transparent. Now you have the option.

[binyamin]

@colmtuite Can you please explain this in the docs (on the website)?

[inwardmovement]

It would be great also to provide and example showing a visual comparison with/without alpha color, to show in what cases it's relevant to use the alpha version.

[PhilGarb]

Thank you for that explanation. That makes a lot of sense to me and sounds very helpful.