I might be totally getting the wrong idea of classes but this is what I want to do.
I have a load of different colours each with their own set of shades. Each colour is made up of an array of R,G,B. I want to be able to create new colours and then access different formatted properties, like css rgba.
class Color {
constructor(dark, light, white, id) {
this.dark = dark;
this.light = light;
this.white = white;
}
rgba(shade, opacity = 1) {
return `rgba(${this[shade].join(", ")}, ${opacity})`;
}
}
const pink = new Color(
[226, 155, 166], [240, 214, 219], [250, 245, 246]
);
//get rgba css string for a shade
console.log(pink.rgba("light"));This works but it would be more initiative to be able to do something like this to access the css rgba string. Is this possible?
const rgba = pink.light.rgba();
Use another class or object, and transform the constructor arguments into that instead of assigning strings to this.dark, etc.
const makeShade = arr => ({
rgba: (opacity = 1) => `rgba(${arr.join(", ")}, ${opacity})`
});
class Color {
constructor(dark, light, white, id) {
this.dark = makeShade(dark);
this.light = makeShade(light);
this.white = makeShade(white);
}
}
const pink = new Color(
[226, 155, 166], [240, 214, 219], [250, 245, 246]
);
//get rgba css string for a shade
console.log(pink.light.rgba());