tinct
v0.1.4
Published
Color management
Downloads
44
Readme
Tinct
Usage
Tinct comes loaded some default colors, so you can start right away. To get a color, simply retrieve it as follows
const green = Tinct.green;
Custom swatches
Customizing the color scheme is easy:
const swatch = new Swatch({
name: 'awesomeSwatch',
colors: {
red: new Color("#FF0000"),
green: new Color("#00FF00"),
blue: new Color("#0000FF")
},
shades: {
black: new Color("#000000"),
white: new Color("#FFFFFF")
}
});
Tinct.loadSwatch(swatch);
Tinct supports loading multiple swatches. In the previous example, you can still request Tinct.purple
as it comes with the default swatch. If you want to remove the basic swatch, you can call either of the functions below, depending on your use-case.
Tinct.removeSwatch('basic');
Tinct.removeAllSwatches();
Custom shaders
Adding a custom shader is similar to adding a custom swatch.
const shader = new Shader({
name: 'awesomeShader',
nameStyle: 'prefix',
shaders: {
awesome: (color, manager) => {
// Do whatever you want to
}
}
});
Tinct.loadShaderPack(shader);
Once you've loaded this shader, you can request Tinct.awesomeRed
.
Again, we support loading multiple shaders. If you want to remove a shader, you can call either function below.
Tinct.removeShaderPack('basic');
Tinct.removeAllShaderPacks();
Color destructuring
To determine what color is requested, Tinct tries to find a color name in the name you provide. What is left before and after the match are used as shaders. So the string awesomeRed500
is matched as red
, with the awesome
and 500
shaders.
Note that this causes confusion with colors as extraLightBlue
, as Tinct can interpret this as lightBlue
with the extra
shader when a lightBlue
color is loaded.