semantic-colorizer v0.2.0

Semantic Colorizer

Semantic colorizer is a typescript tool to help you name your colors semantically. For example, success could be a set of colors used for responding positively with color to a user's interaction.

There are some predefined names suggested for you:

• primary
• secondary
• success
• accent
• warning
• error
• light
• dark

However, you can of course define more.

Each of these color sets allows for up to nine color shades to be defined within it, these are denoted using the strings one to nine.

The colorizer allows for color definition in:

• hex
• hsl
• hsv
• hwb
• rgb
• cmyk

A standard definition would look something like this:

new Colorizer({
  success: {
    hex: {
      one: "333333",
      two: "AAAAAA",
    },
  },
  accent: {
    hex: {
      one: "333333",
      two: "AAAAAA",
      three: "BBBBBB",
    },
  },
  warning: {
    hex: {
      one: "333333",
      two: "AAAAAA",
      three: "BBBBBB",
    },
  }
});

let colors = new Colorizer({
    hex: {
      success: {
        one: "333333",
        two: "AAAAAA",
      },
      accent: {
        one: "333333",
        two: "AAAAAA",
        three: "BBBBBB",
      },
      warning: {
        one: "333333",
        two: "AAAAAA",
        three: "BBBBBB",
      },
    },
  });

export const getColoriser = () => colors;