Merge pull request #14 from arvindcheenu/2.0

✨ New in v.2.0 : Lose some features, Gain even more!

examples/index.js

@@ -1,55 +1,4 @@
-import Matercolor from '../src/index.js';
-
-const PurplePalette = new Matercolor ('#6200EE');
-console.log ('\n\nPALETTE CLASS\n\n');
-console.log (JSON.stringify (PurplePalette, null, 2));
-// Matercolor {color: "#6200EE", options: Object, palette: function (), constructor: Object}
-console.log ('\n\nPALETTE OBJECT\n\n');
-console.log (JSON.stringify (PurplePalette.palette (), null, 2));
-/**
- * Object {primary: Object}
-    primary: Object
-      50: Object
-      100: Object
-      200: Object
-      300: Object
-      400: Object
-      500: Object
-      600: Object
-      700: Object
-      800: Object
-      900: Object
-      A100: Object
-      A200: Object
-      A400: Object
-      A700: Object
-    secondary : Object 
-      50: Object
-      100: Object
-      200: Object
-      300: Object
-      400: Object
-      500: Object
-      600: Object
-      700: Object
-      800: Object
-      900: Object
-      A100: Object
-      A200: Object
-      A400: Object
-      A700: Object
-*/
-
-console.log ('\n\nPRIMARY PALETTE SHADES\n\n');
-console.log (JSON.stringify (PurplePalette.shades ('primary'), null, 2));
-// Object {light: Object, main: Object, dark: Object}
-console.log ('\n\nPRIMARY PALETTE ACCENTS\n\n');
-console.log (JSON.stringify (PurplePalette.accents ('primary'), null, 2));
-// Object {A100: Object, A200: Object, A400: Object, A700: Object}
-
-console.log ('\n\nSECONDARY PALETTE SHADES\n\n');
-console.log (JSON.stringify (PurplePalette.shades ('secondary'), null, 2));
-// Object {light: Object, main: Object, dark: Object}
-console.log ('\n\nSECONDARY PALETTE ACCENTS\n\n');
-console.log (JSON.stringify (PurplePalette.accents ('secondary'), null, 2));
-// Object {A100: Object, A200: Object, A400: Object, A700: Object}
+const Matercolor = require ('../dist/index.js');
+const Purple = new Matercolor ('#6200EE', {showContrastText: true});
+console.log ('\n\n PALETTE OBJECT\n\n');
+console.log (JSON.stringify (Purple.palette, null, 2));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matercolors",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "A tiny, zero-dependency libary for building harmonious material palettes for any color.",
   "main": "dist/index.js",
   "umd:main": "dist/index.umd.js",
@@ -12,6 +12,7 @@
     "build": "microbundle --name Matercolor --compress --raw true",
     "lint": "standard --fix",
     "test": "ava",
+    "demo": "node ./examples/index.js",
     "coverage": "nyc npm run test"
   },
   "ava": {

src/color.utils.js

@@ -1,49 +1,4 @@
 /* eslint-disable no-bitwise */
-export function RGBToHSL (rgb) {
-  const r = rgb.r / 255
-  const g = rgb.g / 255
-  const b = rgb.b / 255
-  const cmin = Math.min(r, g, b)
-  const cmax = Math.max(r, g, b)
-  const delta = cmax - cmin
-  let h = 0
-  let s = 0
-  let l = 0
-  if (delta === 0) h = 0
-  else if (cmax === r) h = ((g - b) / delta) % 6
-  else if (cmax === g) h = (b - r) / delta + 2
-  else h = (r - g) / delta + 4
-  h = Math.round(h * 60)
-  if (h < 0) h += 360
-  l = (cmax + cmin) / 2
-  s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1))
-  s = +(s * 100).toFixed(1)
-  l = +(l * 100).toFixed(1)
-  return {
-    h,
-    s,
-    l,
-    string: `hsl(${h},${s}%,${l}%)`
-  }
-}
-export function RGBToCYMK (rgb) {
-  const r = rgb.r / 255
-  const g = rgb.g / 255
-  const b = rgb.b / 255
-  let k = Math.min(1 - r, 1 - g, 1 - b)
-  const c = parseFloat((((1 - r - k) / (1 - k) || 0) * 100).toFixed(4))
-  const m = parseFloat((((1 - g - k) / (1 - k) || 0) * 100).toFixed(4))
-  const y = parseFloat((((1 - b - k) / (1 - k) || 0) * 100).toFixed(4))
-  k *= 100
-  k = parseFloat(k.toFixed(4))
-  return {
-    c,
-    y,
-    m,
-    k,
-    string: `cymk(${c}%,${y}%,${m}%,${k}%)`
-  }
-}
 export function hexToRgba (hex) {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
   return result
@@ -70,11 +25,12 @@ export function rgbToHex (r, g, b) {
   return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`
 }
 export function getContrastText ({ r, g, b }, threshold) {
-  const contrast = (Math.round(r * 299) + Math.round(g * 587) + Math.round(b * 114)) / 1000
+  const contrast =
+    (Math.round(r * 299) + Math.round(g * 587) + Math.round(b * 114)) / 1000
   return contrast >= threshold ? 'black' : 'white'
 }
 
-export function getComplementary (hex) {
+export function rotateColorBy (hex, rotationAmount) {
   const rgb = hexToRgba(hex)
   let r = rgb.r / 255.0
   let g = rgb.g / 255.0
@@ -85,7 +41,8 @@ export function getComplementary (hex) {
   let s
   const l = (max + min) / 2.0
   if (max === min) {
-    h = 0; s = 0 // achromatic
+    h = 0
+    s = 0 // achromatic
   } else {
     const d = max - min
     s = l > 0.5 ? d / (2.0 - max - min) : d / (max + min)
@@ -101,13 +58,15 @@ export function getComplementary (hex) {
   }
   h = h / 6.2832 * 360.0 + 0
   // Shift hue to opposite side of wheel and convert to [0-1] value
-  h += 180
+  h += rotationAmount
   if (h > 360) {
     h -= 360
   }
   h /= 360
   if (s === 0) {
-    r = l; g = l; b = l // achromatic
+    r = l
+    g = l
+    b = l // achromatic
   } else {
     const hue2rgb = function hue2rgb (p, q, T) {
       let t = T

src/global.constants.js

@@ -19,5 +19,6 @@ export const defaultOptions = {
   threshold: 128,
   light: 200,
   main: 500,
-  dark: 700
+  dark: 700,
+  showContrastText: false
 }

src/index.js

@@ -1,98 +1,89 @@
 import { keys, defaultOptions } from './global.constants.js'
 import {
-  normalizeRGB, rgbToHex, hexToRgba, RGBToCYMK, RGBToHSL, getContrastText, getComplementary
+  normalizeRGB,
+  rgbToHex,
+  hexToRgba,
+  getContrastText,
+  rotateColorBy
 } from './color.utils.js'
 import { createPallete } from './goldenPalettes.js'
 export default class Matercolor {
   constructor (color, options) {
+    this.palette = {}
     this.color = color
-    const complementary = getComplementary(color)
-    this.complementary = () => complementary
     this.options = options
       ? Object.assign(defaultOptions, options)
       : defaultOptions
-    const paletteObject = {}
-    this.palette = () => paletteObject
-    this.getPalette()
+    this.complementary = () => rotateColorBy(this.color, 180)
+    this.firstAnalogous = () => rotateColorBy(this.color, -30)
+    this.secondAnalogous = () => rotateColorBy(this.color, 30)
+    this.firstTriadic = () => rotateColorBy(this.color, 60)
+    this.secondTriadic = () => rotateColorBy(this.color, 120)
+    this.palette.primary = this.makePalette('primary')
+    this.palette.complementary = this.makePalette('complementary')
+    this.palette.analogous = {}
+    this.palette.analogous.first = this.makePalette('firstAnalogous')
+    this.palette.analogous.second = this.makePalette('secondAnalogous')
+    this.palette.triadic = {}
+    this.palette.triadic.first = this.makePalette('firstTriadic')
+    this.palette.triadic.second = this.makePalette('secondTriadic')
   }
 
-  shades (paletteType) {
-    return {
-      light: this.palette()[paletteType][this.options.light],
-      main: this.palette()[paletteType][this.options.main],
-      dark: this.palette()[paletteType][this.options.dark]
+  makePalette (paletteName) {
+    const localObject = {}
+    let Color
+    if (paletteName === 'primary') {
+      Color = hexToRgba(this.color)
+    } else if (paletteName === 'complementary') {
+      Color = hexToRgba(this.complementary())
+    } else if (paletteName === 'firstAnalogous') {
+      Color = hexToRgba(this.firstAnalogous())
+    } else if (paletteName === 'secondAnalogous') {
+      Color = hexToRgba(this.secondAnalogous())
+    } else if (paletteName === 'analogous') {
+      const analogousObject = {}
+      analogousObject.first = this.makePalette('firstAnalogous')
+      analogousObject.second = this.makePalette('secondAnalogous')
+      return analogousObject
+    } else if (paletteName === 'firstTriadic') {
+      Color = hexToRgba(this.firstTriadic())
+    } else if (paletteName === 'secondTriadic') {
+      Color = hexToRgba(this.secondTriadic())
+    } else if (paletteName === 'triadic') {
+      const triadicObject = {}
+      triadicObject.first = this.makePalette('firstTriadic')
+      triadicObject.second = this.makePalette('secondTriadic')
+      return triadicObject
     }
-  }
-
-  accents (paletteType) {
-    return {
-      A100: this.palette()[paletteType].A100,
-      A200: this.palette()[paletteType].A200,
-      A400: this.palette()[paletteType].A400,
-      A700: this.palette()[paletteType].A700
-    }
-  }
-
-  getPalette () {
-    this.palette().primary = {}
-    this.palette().secondary = {}
-    const primaryPalette = createPallete(
-      normalizeRGB(hexToRgba(this.color))
-    ).map(u => rgbToHex(
-      Math.round(u.red * 255),
-      Math.round(u.green * 255),
-      Math.round(u.blue * 255)
-    ))
-    const primaryAccents = createPallete(
-      normalizeRGB(hexToRgba(this.color)),
-      true
-    ).map(u => rgbToHex(
-      Math.round(u.red * 255),
-      Math.round(u.green * 255),
-      Math.round(u.blue * 255)
-    ))
-    const secondaryPalette = createPallete(
-      normalizeRGB(hexToRgba(this.complementary()))
-    ).map(u => rgbToHex(
-      Math.round(u.red * 255),
-      Math.round(u.green * 255),
-      Math.round(u.blue * 255)
-    ))
-    const secondaryAccents = createPallete(
-      normalizeRGB(hexToRgba(this.complementary())),
-      true
-    ).map(u => rgbToHex(
-      Math.round(u.red * 255),
-      Math.round(u.green * 255),
-      Math.round(u.blue * 255)
-    ))
-    primaryPalette.push(...primaryAccents)
-    for (let i = 0; i < keys.length; i += 1) {
-      const colorObject = {}
-      colorObject.hex = primaryPalette[i]
-      colorObject.rgb = hexToRgba(primaryPalette[i])
-      colorObject.rgb.string = `rgb(${colorObject.rgb.r},${colorObject.rgb.g},${colorObject.rgb.b})`
-      colorObject.hsl = RGBToHSL(colorObject.rgb)
-      colorObject.cymk = RGBToCYMK(colorObject.rgb)
-      colorObject.contrastText = getContrastText(
-        colorObject.rgb,
-        this.options.threshold
+    const newPalette = createPallete(normalizeRGB(Color)).map(u =>
+      rgbToHex(
+        Math.round(u.red * 255),
+        Math.round(u.green * 255),
+        Math.round(u.blue * 255)
       )
-      this.palette().primary[keys[i]] = colorObject
-    }
-    secondaryPalette.push(...secondaryAccents)
-    for (let i = 0; i < keys.length; i += 1) {
-      const colorObject = {}
-      colorObject.hex = secondaryPalette[i]
-      colorObject.rgb = hexToRgba(secondaryPalette[i])
-      colorObject.rgb.string = `rgb(${colorObject.rgb.r},${colorObject.rgb.g},${colorObject.rgb.b})`
-      colorObject.hsl = RGBToHSL(colorObject.rgb)
-      colorObject.cymk = RGBToCYMK(colorObject.rgb)
-      colorObject.contrastText = getContrastText(
-        colorObject.rgb,
-        this.options.threshold
+    )
+    const newAccents = createPallete(normalizeRGB(Color), true).map(u =>
+      rgbToHex(
+        Math.round(u.red * 255),
+        Math.round(u.green * 255),
+        Math.round(u.blue * 255)
       )
-      this.palette().secondary[keys[i]] = colorObject
+    )
+    newPalette.push(...newAccents)
+    for (let i = 0; i < keys.length; i += 1) {
+      let colorObject = {}
+      if (this.options.showContrastText) {
+        colorObject.hex = newPalette[i]
+        const rgb = hexToRgba(newPalette[i])
+        colorObject.contrastText = getContrastText(
+          rgb,
+          this.options.threshold
+        )
+      } else {
+        colorObject = newPalette[i]
+      }
+      localObject[keys[i]] = colorObject
     }
+    return localObject
   }
 }

test/color.utils/componentToHex.function.test.js

@@ -1,5 +1,5 @@
-import test from "ava"
-import { componentToHex } from "../../src/color.utils"
+import test from 'ava'
+import { componentToHex } from '../../src/color.utils'
 test('left pads zero if single digit hex', t => {
-  t.is(componentToHex("f"), "0f")
-})
+  t.is(componentToHex('f'), '0f')
+})