add support for alpha transparency to the custom classes

[sarbbottam]

This is a followup for the PR #341

---

We currently use SASS across the organization and one of the use-case that it facilitates is to control the usage of colors across the organization.

The colors are currently controlled by the use of get-color() function, provided by the base SASS utilities. The get-color() function accepts two arguments, the mandatory first argument is the name of the whitelisted color and and optional second argument is the opacility like so:

...
background-color: get-color(black, .15) // background-color: rbga(0, 0, 0,.15) 
...

There is a fixed set of color name available with their hex values. which can be easily added to the config's custom hash like so:

// acss.config.js
const colors = require('./colors');

const config = {
  custom: {
    ...
  },
};
config.custom = Object.assign(config.custom, colors);

module.exports = config;

The colors.js would be exporting an hash of approved color name and their corresponding hex pair.

const approvedColors = require('org/colors.js');
const colors = _createColorsHash(approvedColors);
module.exports = colors;

If alpha transparency for the above mentioned custom class name is available, one could simply use color.alpha combination in the markup without an explicit entry in the acss.config.js.

---

Otherwise, there needs to be an explicit entry for any unique color.alpha combination in the markup for every color: transparency combination like so:

// acss.config.js
black015: 'rgb(0,0,0,.15)',
black050: 'rgb(0,0,0,.50)'
...

However, it would be better to have only one entry for the color

// acss.config.js
black: '#000'
...

And any transparency combination value can be acheived by prefixing the alpha to the color, like Bg(black.15), Bg(black.50) etc.

Looking forward to your thoughts and guidance.

[sarbbottam]

🔔 @redonkulus @src-code 🙏

[sarbbottam]

🔔 @redonkulus @src-code, please share your thoughts.

[sarbbottam]

Lack of this feature is preventing me from proposing atomizer to my project and I would love to see it being embraced.

[src-code]

Hi @sarbbottam - I'm not in favor of this syntax, because I think it adds unnecessary complexity to custom values, and could break backwards compatibility as well. As I mentioned in my previous comment on the original PR, we don't interpret custom value names today, and I'm not sure we'd want to open that can of worms.

https://github.com/acss-io/atomizer/pull/341#issuecomment-463349976

Sorry for the delay, I'm not terribly active with this project anymore, but will jump in as needed to push out a release.

[sarbbottam]

Thanks @src-code for your thoughts, could we explore other options to make it possible to add alpha transparency w/o explicitly adding then in the config file? Otherwise, for every new color/transparency, developers need to add it to the config which will be tedious and error-prone.

// acss.config.js
black015: 'rgb(0,0,0,.15)',
black050: 'rgb(0,0,0,.50)'

I am more than happy to contribute to facilitate this initiative.

I look forward to your thoughts on the syntax, ergonomics on facilitating alpha transparency on the custom color name.