wmk-color-palette v0.1.8

wmk-color-palette

npm install --save-dev wmk-color-palette

ColorPalette

Create a color palatte by passing an array of objects. Colors passed without names will inherit names from NameThatColor.

const colors = [
  // Primary Color
  { value: "#FA8D39", group: "orange", primary: true },
  // Secondary Color
  { value: "#FF9E54", group: "orange", secondary: true },
  // Tertiary Color
  { value: "#B39985", group: "brown", tertiary: true },
  // Accent Color
  { value: "#059AAD", group: "blue", accent: true },
  // Co-Accent Color
  { value: "#39E4FA", group: "blue", coaccent: true },
  // Global Black Color
  { value: "#3a3a3a", group: "black", black: true },
  // Global Text Color
  { value: "#4c4c4c", group: "gray", text: true },
  // Global White Color
  { value: "#fcfcfc", group: "white", reverse: true },
];
const theme = new ColorPalette(colors);

Methods

hover(name, amount, flip)

Given a color name, will return a color lighter or darker to a specified amount. Default value is 0.2

If flip is true, returns dark instead of light and vice-versa

return "#HEX_STRING";

Get global aliases as Color class objects

These functions will return a Color object (made from npm color), so any of the methods of the class are available.

primary()

return Color();

secondary()

return Color();

tertiary()

return Color();

accent()

return Color();

coaccent()

return Color();

text()

return Color();

getColor(name)

return Color();

Get CSS-ready strings

hex(name)

return "#HEX_STRING";

rgb(name)

return "rgb(string)";

rgba(name)

return "rgba(string,alpha)";

Gradient

Instantiation

Pass an array of color, stop, a gradient type (linear or radial). If linear, third argument is degrees (default 180deg).

export const ButtonFlashGradient = new Gradient(
  [
    [colors.rgba("primary", 0), 50],
    [colors.rgba("primary"), 50],
  ],
  false,
  0
);

Methods

Get CSS-ready string

grad()

Returns CSS string with fallback:

background: rgb(228, 140, 43);
background: linear-gradient(
  180deg,
  rgba(228, 140, 43, 1) 0%,
  rgba(255, 213, 0, 1) 50%,
  rgba(241, 90, 36, 1) 100%
);