{"_id":"style-js","_rev":"59-1560a1775840ae0dca367d7c41e4c240","name":"style-js","description":"Comprehensive color manipulation classes.","dist-tags":{"latest":"0.0.26"},"versions":{"0.0.1":{"name":"style-js","version":"0.0.1","author":{"name":"Martin Gallagher","email":"martin@mutat.io"},"description":"Comprehensive color manipulation classes.","main":"./src/Style.js","repository":{"type":"git","url":"https://github.com/Mutatio/Style.js.git"},"keywords":["style","css","javascript","rgb","rgba","hsv","hsl","hsla","cielab","xyz","color","colour"],"dependencies":{"type-js":"*","util-js":"*"},"readme":"== Style.js ==\n\nAn easy to use JavaScript library providing CSS preprocessing and a myriad of color manipulation functions.\n\n== CSS Preprocessing ==\n\nStyle.js allows developers to utilize the full power of JavaScript to generate CSS.\n\nExample:\n\n<pre>var color = '#06c';\n\nnew Style({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n});</pre>\n\n''Alternative syntax'':\n\n<pre>var color = '#06c';\n\n({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n}.toStyle());</pre>\n\nResult:\n\n<pre>p {\n\tbackground-color: hsla(210, 100%, 40%, 1);\n\tcolor: hsla(30, 100%, 85%, 1);\n\t-webkit-border-radius: 8px;\n\t-moz-border-radius: 8px;\n\tborder-radius: 8px\n}</pre>\n\nAny valid JavaScript code should work. It's easy to mix in your own functionality:\n\n<pre>// Returns a random color with a high red value, as a hex color code\nfunction getRandomRedColor() {\n\t// Generate random RGB color\n\tvar out = RGB.random();\n\n\t// Minimum red value of 180\n\twhile (out.red < 180) {\n\t\tout = RGB.random();\n\t}\n\n\t// Convert to HSL color space\n\tout = new HSL(out);\n\n\t// Adjust the lightness of the color, note: this might reduce the red value\n\tout.lightness = 45;\n\n\t// Return as hexidecimal\n\treturn out.toHex();\n}\n\nnew Style({\n\t'.randomRed': {\n\t\tbackground_color: getRandomRedColor(),\n\t\tcolor: '#fff'\n\t}\n});</pre>\n\nResult:\n\n<pre>.randomRed {\n\tbackground-color: #bd4028;\n\tcolor: #fff\n}</pre>\n\n=== Nested Styles ===\n\nExample:\n\n<pre>new Style({\n\thtml: {\n\t\tbody: {\n\t\t\theader: {\n\t\t\t\tdiv: {\n\t\t\t\t\tul: {\n\t\t\t\t\t\tli: {\n\t\t\t\t\t\t\tp: {\n\t\t\t\t\t\t\t\tcolor: new RGBA(new Hex('#666')),\n\n\t\t\t\t\t\t\t\t'a, strong': {\n\t\t\t\t\t\t\t\t\tfont_weight: 'bold'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tfooter: {\n\t\t\t\t'background-color': new HSL(new Hex('#ccc'))\n\t\t\t}\n\t\t}\n\t}\n});</pre>\n\nResult:\n\n<pre>html body header div ul li p {\n\tcolor: rgba(102, 102, 102, 1)\n}\n\nhtml body header div ul li p a, html body header div ul li p strong {\n\tfont-weight: bold\n}\n\nhtml body footer {\n\tbackground-color: hsl(0, 0%, 80%)\n}</pre>\n\n=== \"Mixins\" ===\n\nExample:\n\n<pre>function myStyle(width, color) {\n\twidth = !width || !Type.isNumber(width) ? 700 : Math.floor(width);\n\n\tif (!Color.isValid(color)) {\n\t\tcolor = Hex.random();\n\t}\n\n\treturn {\n\t\t// Numeric values automatically converted to \"px\" or the unit set by setDefaultUnit()\n\t\twidth: width,\n\t\tmargin: '0 auto',\n\t\ttext_align: 'left',\n\t\tbackground_color: color.toRGB()\n\t};\n}\n\nvar pageWidth = 800;\n\nnew Style({\n\tbody: {\n\t\ttext_align: 'center',\n\n\t\theader: {}.extend(\n\t\t\tmyStyle(pageWidth, '#06c')\n\t\t),\n\n\t\tdiv: {}.extend(\n\t\t\tmyStyle(pageWidth / 2, '#ccc')\n\t\t),\n\n\t\tfooter: {}.extend(\n\t\t\tmyStyle(pageWidth / 3, '#f30')\n\t\t)\n\t}\n});</pre>\n\nResult:\n\n<pre>body {\n\ttext-align: center\n}\n\nbody header {\n\twidth: 800px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(0, 102, 204)\n}\n\nbody div {\n\twidth: 400px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(204, 204, 204)\n}\n\nbody footer {\n\twidth: 266px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(255, 51, 0)\n}</pre>\n\n=== Inheritance ===\n\nExample:\n\n<pre>// In the beginning, there was nothing\nvar singularity = {};\n\nvar A = {\n\tbody: {\n\t\tfont: \"12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif\",\n\t\tcolor: '#000'.toRGB()\n\t}\n};\n\nvar B = {\n\theader: {\n\t\th1: {\n\t\t\tfont_size: 24,\n\t\t\tcolor: darken(Hex.random(), 0.3)\n\t\t}\n\t}\n};\n\nnew Style(\n\tsingularity.extend(A, B)\n);</pre>\n\nResult:\n\n<pre>body {\n\tfont: 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tcolor: rgb(0, 0, 0)\n}\n\nheader h1 {\n\tfont-size: 24px;\n\tcolor: #206502\n}</pre>\n\n== Color Functionality ==\n\nColor spaces are interchangeable:\n\n<pre>var color = Hex.random();\n\nconsole.log('INPUT: ' + color.toString());\n\ncolor = new RGB(color);\n\nconsole.log(color.toString());\n\ncolor = new XYZ(color);\n\n// Color spaces NOT supported in CSS have no .toString() method\nconsole.log(color);\n\ncolor = new HSL(color);\n\nconsole.log(color.toString());\n\ncolor = new CIELab(color);\n\nconsole.log(color);\n\ncolor = new RGBA(color);\n\nconsole.log(color.toString());\n\ncolor = new CMYK(color);\n\nconsole.log(color);\n\ncolor = new HSLA(color);\n\nconsole.log(color.toString());\n\n/*\n * NOTE: Due to the precision of the JavaScript number type\n * the output might not be *exactly* equal to the input\n *\n * e.g. #ff3300 => #fe3300\n */\nconsole.log('OUTPUT: ' + color.toHex().toString());</pre>\n\nResult:\n\n<pre>INPUT: #6cb84b\nrgb(108, 184, 75)\nXYZ {X: 24.59483120679862, Y: 37.97712451767409, Z: 12.690646072857769}\nhsl(102, 43%, 51%)\nCIELab {L: 68.00495079484631, a: -43.46726006781837, b: 47.13923110320886}\nrgba(108, 184, 75, 1)\nCMYK {cyan: 0.4130662167488027, magenta: 0, yellow: 0.5923735991444304, key: 0.2784016469309353}\nhsla(102, 43%, 51%, 1)\nOUTPUT: #6cb84b</pre>\n\n=== complement() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + complement(color).toString());</pre>\n\nResult:\n\n<pre>#ff3300 => #00cbff</pre>\n\n=== analogous() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + analogous(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #ff004c,#ffb200</pre>\n\n=== split() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + split(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #004cff,#00ffb2</pre>\n\n=== square() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + square(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #4cff00,#00cbff,#b200ff</pre>\n\n=== triad() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + triad(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #3200ff,#00ff32</pre>\n\n=== tetradic() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + tetradic(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #cbff00,#00cbff,#3200ff</pre>","readmeFilename":"README.mediawiki","_id":"style-js@0.0.1","dist":{"shasum":"cc5b3d6dd55b5fbe2a40c0d2d3346163d709bc14","tarball":"https://registry.npmjs.org/style-js/-/style-js-0.0.1.tgz","integrity":"sha512-pdeY3e+bpmIzw7Namww2A93PAJJmWzxdYnjRushjWAXT5PTM5I5cvbUwENMhb965VuO+Vsk99r+7fr5ltF2FQg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEs3SjZP6YKhWiCgfIZINzM4kilW29QUZiM6Yl7SOlqjAiEArcZIx+XP+zE7omiYsGaNiMoJ+S9baK13x4HHmvl2gas="}]},"_npmVersion":"1.1.65","_npmUser":{"name":"mutatio","email":"martin@mutat.io"},"maintainers":[{"name":"mutatio","email":"martin@mutat.io"}],"directories":{}},"0.0.2":{"name":"style-js","version":"0.0.2","author":{"name":"Martin Gallagher","email":"martin@mutat.io"},"description":"Comprehensive color manipulation classes.","main":"./src/Style.js","repository":{"type":"git","url":"https://github.com/Mutatio/Style.js.git"},"keywords":["style","css","javascript","rgb","rgba","hsv","hsl","hsla","cielab","xyz","color","colour"],"dependencies":{"type-js":"*","util-js":"*"},"readme":"== Style.js ==\n\nAn easy to use JavaScript library providing CSS preprocessing and a myriad of color manipulation functions.\n\n== CSS Preprocessing ==\n\nStyle.js allows developers to utilize the full power of JavaScript to generate CSS.\n\nExample:\n\n<pre>var color = '#06c';\n\nnew Style({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n});</pre>\n\n''Alternative syntax'':\n\n<pre>var color = '#06c';\n\n({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n}.toStyle());</pre>\n\nResult:\n\n<pre>p {\n\tbackground-color: hsla(210, 100%, 40%, 1);\n\tcolor: hsla(30, 100%, 85%, 1);\n\t-webkit-border-radius: 8px;\n\t-moz-border-radius: 8px;\n\tborder-radius: 8px\n}</pre>\n\nAny valid JavaScript code should work. It's easy to mix in your own functionality:\n\n<pre>// Returns a random color with a high red value, as a hex color code\nfunction getRandomRedColor() {\n\t// Generate random RGB color\n\tvar out = RGB.random();\n\n\t// Minimum red value of 180\n\twhile (out.red < 180) {\n\t\tout = RGB.random();\n\t}\n\n\t// Convert to HSL color space\n\tout = new HSL(out);\n\n\t// Adjust the lightness of the color, note: this might reduce the red value\n\tout.lightness = 45;\n\n\t// Return as hexidecimal\n\treturn out.toHex();\n}\n\nnew Style({\n\t'.randomRed': {\n\t\tbackground_color: getRandomRedColor(),\n\t\tcolor: '#fff'\n\t}\n});</pre>\n\nResult:\n\n<pre>.randomRed {\n\tbackground-color: #bd4028;\n\tcolor: #fff\n}</pre>\n\n=== Nested Styles ===\n\nExample:\n\n<pre>new Style({\n\thtml: {\n\t\tbody: {\n\t\t\theader: {\n\t\t\t\tdiv: {\n\t\t\t\t\tul: {\n\t\t\t\t\t\tli: {\n\t\t\t\t\t\t\tp: {\n\t\t\t\t\t\t\t\tcolor: new RGBA(new Hex('#666')),\n\n\t\t\t\t\t\t\t\t'a, strong': {\n\t\t\t\t\t\t\t\t\tfont_weight: 'bold'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tfooter: {\n\t\t\t\t'background-color': new HSL(new Hex('#ccc'))\n\t\t\t}\n\t\t}\n\t}\n});</pre>\n\nResult:\n\n<pre>html body header div ul li p {\n\tcolor: rgba(102, 102, 102, 1)\n}\n\nhtml body header div ul li p a, html body header div ul li p strong {\n\tfont-weight: bold\n}\n\nhtml body footer {\n\tbackground-color: hsl(0, 0%, 80%)\n}</pre>\n\n=== \"Mixins\" ===\n\nExample:\n\n<pre>function myStyle(width, color) {\n\twidth = !width || !Type.isNumber(width) ? 700 : Math.floor(width);\n\n\tif (!Color.isValid(color)) {\n\t\tcolor = Hex.random();\n\t}\n\n\treturn {\n\t\t// Numeric values automatically converted to \"px\" or the unit set by setDefaultUnit()\n\t\twidth: width,\n\t\tmargin: '0 auto',\n\t\ttext_align: 'left',\n\t\tbackground_color: color.toRGB()\n\t};\n}\n\nvar pageWidth = 800;\n\nnew Style({\n\tbody: {\n\t\ttext_align: 'center',\n\n\t\theader: {}.extend(\n\t\t\tmyStyle(pageWidth, '#06c')\n\t\t),\n\n\t\tdiv: {}.extend(\n\t\t\tmyStyle(pageWidth / 2, '#ccc')\n\t\t),\n\n\t\tfooter: {}.extend(\n\t\t\tmyStyle(pageWidth / 3, '#f30')\n\t\t)\n\t}\n});</pre>\n\nResult:\n\n<pre>body {\n\ttext-align: center\n}\n\nbody header {\n\twidth: 800px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(0, 102, 204)\n}\n\nbody div {\n\twidth: 400px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(204, 204, 204)\n}\n\nbody footer {\n\twidth: 266px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(255, 51, 0)\n}</pre>\n\n=== Inheritance ===\n\nExample:\n\n<pre>// In the beginning, there was nothing\nvar singularity = {};\n\nvar A = {\n\tbody: {\n\t\tfont: \"12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif\",\n\t\tcolor: '#000'.toRGB()\n\t}\n};\n\nvar B = {\n\theader: {\n\t\th1: {\n\t\t\tfont_size: 24,\n\t\t\tcolor: darken(Hex.random(), 0.3)\n\t\t}\n\t}\n};\n\nnew Style(\n\tsingularity.extend(A, B)\n);</pre>\n\nResult:\n\n<pre>body {\n\tfont: 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tcolor: rgb(0, 0, 0)\n}\n\nheader h1 {\n\tfont-size: 24px;\n\tcolor: #206502\n}</pre>\n\n== Color Functionality ==\n\nColor spaces are interchangeable:\n\n<pre>var color = Hex.random();\n\nconsole.log('INPUT: ' + color.toString());\n\ncolor = new RGB(color);\n\nconsole.log(color.toString());\n\ncolor = new XYZ(color);\n\n// Color spaces NOT supported in CSS have no .toString() method\nconsole.log(color);\n\ncolor = new HSL(color);\n\nconsole.log(color.toString());\n\ncolor = new CIELab(color);\n\nconsole.log(color);\n\ncolor = new RGBA(color);\n\nconsole.log(color.toString());\n\ncolor = new CMYK(color);\n\nconsole.log(color);\n\ncolor = new HSLA(color);\n\nconsole.log(color.toString());\n\n/*\n * NOTE: Due to the precision of the JavaScript number type\n * the output might not be *exactly* equal to the input\n *\n * e.g. #ff3300 => #fe3300\n */\nconsole.log('OUTPUT: ' + color.toHex().toString());</pre>\n\nResult:\n\n<pre>INPUT: #6cb84b\nrgb(108, 184, 75)\nXYZ {X: 24.59483120679862, Y: 37.97712451767409, Z: 12.690646072857769}\nhsl(102, 43%, 51%)\nCIELab {L: 68.00495079484631, a: -43.46726006781837, b: 47.13923110320886}\nrgba(108, 184, 75, 1)\nCMYK {cyan: 0.4130662167488027, magenta: 0, yellow: 0.5923735991444304, key: 0.2784016469309353}\nhsla(102, 43%, 51%, 1)\nOUTPUT: #6cb84b</pre>\n\n=== complement() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + complement(color).toString());</pre>\n\nResult:\n\n<pre>#ff3300 => #00cbff</pre>\n\n=== analogous() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + analogous(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #ff004c,#ffb200</pre>\n\n=== split() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + split(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #004cff,#00ffb2</pre>\n\n=== square() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + square(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #4cff00,#00cbff,#b200ff</pre>\n\n=== triad() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + triad(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #3200ff,#00ff32</pre>\n\n=== tetradic() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + tetradic(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #cbff00,#00cbff,#3200ff</pre>","readmeFilename":"README.mediawiki","_id":"style-js@0.0.2","dist":{"shasum":"f3f0d4c05663c5c1ee90f641f350046e00a9e946","tarball":"https://registry.npmjs.org/style-js/-/style-js-0.0.2.tgz","integrity":"sha512-wPSIze/kyC4TBZmdBt1kKvd6EUe+ARk8LT2qULexY5UV5hsqn6zKqPLBACs0vCfZQOoyCTtYV5qS+64Cc1fvmw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEgiVHXXncnYGMpVZR7YZirkVCStS5Cdz30ROdZOwWXhAiEAlXetyCzHYAaBq/HYuPG+/QTmHZr+fmf+GtkOWLmQZH8="}]},"_npmVersion":"1.1.65","_npmUser":{"name":"mutatio","email":"martin@mutat.io"},"maintainers":[{"name":"mutatio","email":"martin@mutat.io"}],"directories":{}},"0.0.3":{"name":"style-js","version":"0.0.3","author":{"name":"Martin Gallagher","email":"martin@mutat.io"},"description":"Comprehensive color manipulation classes.","main":"./src/Style.js","repository":{"type":"git","url":"https://github.com/Mutatio/Style.js.git"},"keywords":["style","css","javascript","rgb","rgba","hsv","hsl","hsla","cielab","xyz","color","colour"],"dependencies":{"type-js":"*","util-js":"*"},"readme":"== Style.js ==\n\nAn easy to use JavaScript library providing CSS preprocessing and a myriad of color manipulation functions.\n\n== CSS Preprocessing ==\n\nStyle.js allows developers to utilize the full power of JavaScript to generate CSS.\n\nExample:\n\n<pre>var color = '#06c';\n\nnew Style({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n});</pre>\n\n''Alternative syntax'':\n\n<pre>var color = '#06c';\n\n({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n}.toStyle());</pre>\n\nResult:\n\n<pre>p {\n\tbackground-color: hsla(210, 100%, 40%, 1);\n\tcolor: hsla(30, 100%, 85%, 1);\n\t-webkit-border-radius: 8px;\n\t-moz-border-radius: 8px;\n\tborder-radius: 8px\n}</pre>\n\nAny valid JavaScript code should work. It's easy to mix in your own functionality:\n\n<pre>// Returns a random color with a high red value, as a hex color code\nfunction getRandomRedColor() {\n\t// Generate random RGB color\n\tvar out = RGB.random();\n\n\t// Minimum red value of 180\n\twhile (out.red < 180) {\n\t\tout = RGB.random();\n\t}\n\n\t// Convert to HSL color space\n\tout = new HSL(out);\n\n\t// Adjust the lightness of the color, note: this might reduce the red value\n\tout.lightness = 45;\n\n\t// Return as hexidecimal\n\treturn out.toHex();\n}\n\nnew Style({\n\t'.randomRed': {\n\t\tbackground_color: getRandomRedColor(),\n\t\tcolor: '#fff'\n\t}\n});</pre>\n\nResult:\n\n<pre>.randomRed {\n\tbackground-color: #bd4028;\n\tcolor: #fff\n}</pre>\n\n=== Nested Styles ===\n\nExample:\n\n<pre>new Style({\n\thtml: {\n\t\tbody: {\n\t\t\theader: {\n\t\t\t\tdiv: {\n\t\t\t\t\tul: {\n\t\t\t\t\t\tli: {\n\t\t\t\t\t\t\tp: {\n\t\t\t\t\t\t\t\tcolor: new RGBA(new Hex('#666')),\n\n\t\t\t\t\t\t\t\t'a, strong': {\n\t\t\t\t\t\t\t\t\tfont_weight: 'bold'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tfooter: {\n\t\t\t\t'background-color': new HSL(new Hex('#ccc'))\n\t\t\t}\n\t\t}\n\t}\n});</pre>\n\nResult:\n\n<pre>html body header div ul li p {\n\tcolor: rgba(102, 102, 102, 1)\n}\n\nhtml body header div ul li p a, html body header div ul li p strong {\n\tfont-weight: bold\n}\n\nhtml body footer {\n\tbackground-color: hsl(0, 0%, 80%)\n}</pre>\n\n=== \"Mixins\" ===\n\nExample:\n\n<pre>function myStyle(width, color) {\n\twidth = !width || !Type.isNumber(width) ? 700 : Math.floor(width);\n\n\tif (!Color.isValid(color)) {\n\t\tcolor = Hex.random();\n\t}\n\n\treturn {\n\t\t// Numeric values automatically converted to \"px\" or the unit set by setDefaultUnit()\n\t\twidth: width,\n\t\tmargin: '0 auto',\n\t\ttext_align: 'left',\n\t\tbackground_color: color.toRGB()\n\t};\n}\n\nvar pageWidth = 800;\n\nnew Style({\n\tbody: {\n\t\ttext_align: 'center',\n\n\t\theader: {}.extend(\n\t\t\tmyStyle(pageWidth, '#06c')\n\t\t),\n\n\t\tdiv: {}.extend(\n\t\t\tmyStyle(pageWidth / 2, '#ccc')\n\t\t),\n\n\t\tfooter: {}.extend(\n\t\t\tmyStyle(pageWidth / 3, '#f30')\n\t\t)\n\t}\n});</pre>\n\nResult:\n\n<pre>body {\n\ttext-align: center\n}\n\nbody header {\n\twidth: 800px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(0, 102, 204)\n}\n\nbody div {\n\twidth: 400px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(204, 204, 204)\n}\n\nbody footer {\n\twidth: 266px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(255, 51, 0)\n}</pre>\n\n=== Inheritance ===\n\nExample:\n\n<pre>// In the beginning, there was nothing\nvar singularity = {};\n\nvar A = {\n\tbody: {\n\t\tfont: \"12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif\",\n\t\tcolor: '#000'.toRGB()\n\t}\n};\n\nvar B = {\n\theader: {\n\t\th1: {\n\t\t\tfont_size: 24,\n\t\t\tcolor: darken(Hex.random(), 0.3)\n\t\t}\n\t}\n};\n\nnew Style(\n\tsingularity.extend(A, B)\n);</pre>\n\nResult:\n\n<pre>body {\n\tfont: 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tcolor: rgb(0, 0, 0)\n}\n\nheader h1 {\n\tfont-size: 24px;\n\tcolor: #206502\n}</pre>\n\n== Color Functionality ==\n\nColor spaces are interchangeable:\n\n<pre>var color = Hex.random();\n\nconsole.log('INPUT: ' + color.toString());\n\ncolor = new RGB(color);\n\nconsole.log(color.toString());\n\ncolor = new XYZ(color);\n\n// Color spaces NOT supported in CSS have no .toString() method\nconsole.log(color);\n\ncolor = new HSL(color);\n\nconsole.log(color.toString());\n\ncolor = new CIELab(color);\n\nconsole.log(color);\n\ncolor = new RGBA(color);\n\nconsole.log(color.toString());\n\ncolor = new CMYK(color);\n\nconsole.log(color);\n\ncolor = new HSLA(color);\n\nconsole.log(color.toString());\n\n/*\n * NOTE: Due to the precision of the JavaScript number type\n * the output might not be *exactly* equal to the input\n *\n * e.g. #ff3300 => #fe3300\n */\nconsole.log('OUTPUT: ' + color.toHex().toString());</pre>\n\nResult:\n\n<pre>INPUT: #6cb84b\nrgb(108, 184, 75)\nXYZ {X: 24.59483120679862, Y: 37.97712451767409, Z: 12.690646072857769}\nhsl(102, 43%, 51%)\nCIELab {L: 68.00495079484631, a: -43.46726006781837, b: 47.13923110320886}\nrgba(108, 184, 75, 1)\nCMYK {cyan: 0.4130662167488027, magenta: 0, yellow: 0.5923735991444304, key: 0.2784016469309353}\nhsla(102, 43%, 51%, 1)\nOUTPUT: #6cb84b</pre>\n\n=== complement() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + complement(color).toString());</pre>\n\nResult:\n\n<pre>#ff3300 => #00cbff</pre>\n\n=== analogous() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + analogous(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #ff004c,#ffb200</pre>\n\n=== split() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + split(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #004cff,#00ffb2</pre>\n\n=== square() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + square(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #4cff00,#00cbff,#b200ff</pre>\n\n=== triad() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + triad(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #3200ff,#00ff32</pre>\n\n=== tetradic() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + tetradic(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #cbff00,#00cbff,#3200ff</pre>","readmeFilename":"README.mediawiki","_id":"style-js@0.0.3","dist":{"shasum":"fef4e69ad036e7910d2b9f7ef6659a823cc2a2fc","tarball":"https://registry.npmjs.org/style-js/-/style-js-0.0.3.tgz","integrity":"sha512-ysraWlzO+hFTc4Qveii245zZ6weXcbmCGe55RJGP8vrM/Tr24fqG2dJAuw/jJMGGkOd/nBvLsPWTbU4PvBowsQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHBMRMj6wg5DGAMvVQ0kVfBNhZYLKADwB9et2jVhQH1oAiEArPWqRC8vI5sivgBxLrlkVSrW8t8qpDOCdM1IXIJnqJ8="}]},"_npmVersion":"1.1.65","_npmUser":{"name":"mutatio","email":"martin@mutat.io"},"maintainers":[{"name":"mutatio","email":"martin@mutat.io"}],"directories":{}},"0.0.4":{"name":"style-js","version":"0.0.4","author":{"name":"Martin Gallagher","email":"martin@mutat.io"},"description":"Comprehensive color manipulation classes.","main":"./src/Style.js","repository":{"type":"git","url":"https://github.com/Mutatio/Style.js.git"},"keywords":["style","css","javascript","rgb","rgba","hsv","hsl","hsla","cielab","xyz","color","colour"],"dependencies":{"type-js":"*","util-js":"*"},"readme":"== Style.js ==\n\nAn easy to use JavaScript library providing CSS preprocessing and a myriad of color manipulation functions.\n\n== CSS Preprocessing ==\n\nStyle.js allows developers to utilize the full power of JavaScript to generate CSS.\n\nExample:\n\n<pre>var color = '#06c';\n\nnew Style({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n});</pre>\n\n''Alternative syntax'':\n\n<pre>var color = '#06c';\n\n({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n}.toStyle());</pre>\n\nResult:\n\n<pre>p {\n\tbackground-color: hsla(210, 100%, 40%, 1);\n\tcolor: hsla(30, 100%, 85%, 1);\n\t-webkit-border-radius: 8px;\n\t-moz-border-radius: 8px;\n\tborder-radius: 8px\n}</pre>\n\nAny valid JavaScript code should work. It's easy to mix in your own functionality:\n\n<pre>// Returns a random color with a high red value, as a hex color code\nfunction getRandomRedColor() {\n\t// Generate random RGB color\n\tvar out = RGB.random();\n\n\t// Minimum red value of 180\n\twhile (out.red < 180) {\n\t\tout = RGB.random();\n\t}\n\n\t// Convert to HSL color space\n\tout = new HSL(out);\n\n\t// Adjust the lightness of the color, note: this might reduce the red value\n\tout.lightness = 45;\n\n\t// Return as hexidecimal\n\treturn out.toHex();\n}\n\nnew Style({\n\t'.randomRed': {\n\t\tbackground_color: getRandomRedColor(),\n\t\tcolor: '#fff'\n\t}\n});</pre>\n\nResult:\n\n<pre>.randomRed {\n\tbackground-color: #bd4028;\n\tcolor: #fff\n}</pre>\n\n=== Nested Styles ===\n\nExample:\n\n<pre>new Style({\n\thtml: {\n\t\tbody: {\n\t\t\theader: {\n\t\t\t\tdiv: {\n\t\t\t\t\tul: {\n\t\t\t\t\t\tli: {\n\t\t\t\t\t\t\tp: {\n\t\t\t\t\t\t\t\tcolor: new RGBA(new Hex('#666')),\n\n\t\t\t\t\t\t\t\t'a, strong': {\n\t\t\t\t\t\t\t\t\tfont_weight: 'bold'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tfooter: {\n\t\t\t\t'background-color': new HSL(new Hex('#ccc'))\n\t\t\t}\n\t\t}\n\t}\n});</pre>\n\nResult:\n\n<pre>html body header div ul li p {\n\tcolor: rgba(102, 102, 102, 1)\n}\n\nhtml body header div ul li p a, html body header div ul li p strong {\n\tfont-weight: bold\n}\n\nhtml body footer {\n\tbackground-color: hsl(0, 0%, 80%)\n}</pre>\n\n=== \"Mixins\" ===\n\nExample:\n\n<pre>function myStyle(width, color) {\n\twidth = !width || !Type.isNumber(width) ? 700 : Math.floor(width);\n\n\tif (!Color.isValid(color)) {\n\t\tcolor = Hex.random();\n\t}\n\n\treturn {\n\t\t// Numeric values automatically converted to \"px\" or the unit set by setDefaultUnit()\n\t\twidth: width,\n\t\tmargin: '0 auto',\n\t\ttext_align: 'left',\n\t\tbackground_color: color.toRGB()\n\t};\n}\n\nvar pageWidth = 800;\n\nnew Style({\n\tbody: {\n\t\ttext_align: 'center',\n\n\t\theader: {}.extend(\n\t\t\tmyStyle(pageWidth, '#06c')\n\t\t),\n\n\t\tdiv: {}.extend(\n\t\t\tmyStyle(pageWidth / 2, '#ccc')\n\t\t),\n\n\t\tfooter: {}.extend(\n\t\t\tmyStyle(pageWidth / 3, '#f30')\n\t\t)\n\t}\n});</pre>\n\nResult:\n\n<pre>body {\n\ttext-align: center\n}\n\nbody header {\n\twidth: 800px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(0, 102, 204)\n}\n\nbody div {\n\twidth: 400px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(204, 204, 204)\n}\n\nbody footer {\n\twidth: 266px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(255, 51, 0)\n}</pre>\n\n=== Inheritance ===\n\nExample:\n\n<pre>// In the beginning, there was nothing\nvar singularity = {};\n\nvar A = {\n\tbody: {\n\t\tfont: \"12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif\",\n\t\tcolor: '#000'.toRGB()\n\t}\n};\n\nvar B = {\n\theader: {\n\t\th1: {\n\t\t\tfont_size: 24,\n\t\t\tcolor: darken(Hex.random(), 0.3)\n\t\t}\n\t}\n};\n\nnew Style(\n\tsingularity.extend(A, B)\n);</pre>\n\nResult:\n\n<pre>body {\n\tfont: 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tcolor: rgb(0, 0, 0)\n}\n\nheader h1 {\n\tfont-size: 24px;\n\tcolor: #206502\n}</pre>\n\n== Color Functionality ==\n\nColor spaces are interchangeable:\n\n<pre>var color = Hex.random();\n\nconsole.log('INPUT: ' + color.toString());\n\ncolor = new RGB(color);\n\nconsole.log(color.toString());\n\ncolor = new XYZ(color);\n\n// Color spaces NOT supported in CSS have no .toString() method\nconsole.log(color);\n\ncolor = new HSL(color);\n\nconsole.log(color.toString());\n\ncolor = new CIELab(color);\n\nconsole.log(color);\n\ncolor = new RGBA(color);\n\nconsole.log(color.toString());\n\ncolor = new CMYK(color);\n\nconsole.log(color);\n\ncolor = new HSLA(color);\n\nconsole.log(color.toString());\n\n/*\n * NOTE: Due to the precision of the JavaScript number type\n * the output might not be *exactly* equal to the input\n *\n * e.g. #ff3300 => #fe3300\n */\nconsole.log('OUTPUT: ' + color.toHex().toString());</pre>\n\nResult:\n\n<pre>INPUT: #6cb84b\nrgb(108, 184, 75)\nXYZ {X: 24.59483120679862, Y: 37.97712451767409, Z: 12.690646072857769}\nhsl(102, 43%, 51%)\nCIELab {L: 68.00495079484631, a: -43.46726006781837, b: 47.13923110320886}\nrgba(108, 184, 75, 1)\nCMYK {cyan: 0.4130662167488027, magenta: 0, yellow: 0.5923735991444304, key: 0.2784016469309353}\nhsla(102, 43%, 51%, 1)\nOUTPUT: #6cb84b</pre>\n\n=== complement() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + complement(color).toString());</pre>\n\nResult:\n\n<pre>#ff3300 => #00cbff</pre>\n\n=== analogous() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + analogous(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #ff004c,#ffb200</pre>\n\n=== split() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + split(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #004cff,#00ffb2</pre>\n\n=== square() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + square(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #4cff00,#00cbff,#b200ff</pre>\n\n=== triad() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + triad(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #3200ff,#00ff32</pre>\n\n=== tetradic() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + tetradic(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #cbff00,#00cbff,#3200ff</pre>","readmeFilename":"README.mediawiki","_id":"style-js@0.0.4","dist":{"shasum":"218609edce7c436ff577aacc36b1895fe5cbac34","tarball":"https://registry.npmjs.org/style-js/-/style-js-0.0.4.tgz","integrity":"sha512-pcE+xVma1wubK1GbYmzoy1ZD70D2DNh1n9jxnLZ/2T16VLPNFfadfE06wAQu4TBUvCnyNUXf8ye8KY+wRoaxPg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB0v8tLm68PE/MpzASPzHDi4ugQPQX7/qM/E80dSYVkzAiEAmn45L5uecO52DEhgyqC0ucwuoK9HVrlkd3sBnJfltlg="}]},"_npmVersion":"1.1.65","_npmUser":{"name":"mutatio","email":"martin@mutat.io"},"maintainers":[{"name":"mutatio","email":"martin@mutat.io"}],"directories":{}},"0.0.5":{"name":"style-js","version":"0.0.5","author":{"name":"Martin Gallagher","email":"martin@mutat.io"},"description":"Comprehensive color manipulation classes.","main":"./src/Style.js","repository":{"type":"git","url":"https://github.com/Mutatio/Style.js.git"},"keywords":["style","css","javascript","rgb","rgba","hsv","hsl","hsla","cielab","xyz","color","colour"],"dependencies":{"type-js":"*","util-js":"*"},"readme":"== Style.js ==\n\nAn easy to use JavaScript library providing CSS preprocessing and a myriad of color manipulation functions.\n\n== CSS Preprocessing ==\n\nStyle.js allows developers to utilize the full power of JavaScript to generate CSS.\n\nExample:\n\n<pre>var color = '#06c';\n\nnew Style({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n});</pre>\n\n''Alternative syntax'':\n\n<pre>var color = '#06c';\n\n({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n}.toStyle());</pre>\n\nResult:\n\n<pre>p {\n\tbackground-color: hsla(210, 100%, 40%, 1);\n\tcolor: hsla(30, 100%, 85%, 1);\n\t-webkit-border-radius: 8px;\n\t-moz-border-radius: 8px;\n\tborder-radius: 8px\n}</pre>\n\nAny valid JavaScript code should work. It's easy to mix in your own functionality:\n\n<pre>// Returns a random color with a high red value, as a hex color code\nfunction getRandomRedColor() {\n\t// Generate random RGB color\n\tvar out = RGB.random();\n\n\t// Minimum red value of 180\n\twhile (out.red < 180) {\n\t\tout = RGB.random();\n\t}\n\n\t// Convert to HSL color space\n\tout = new HSL(out);\n\n\t// Adjust the lightness of the color, note: this might reduce the red value\n\tout.lightness = 45;\n\n\t// Return as hexidecimal\n\treturn out.toHex();\n}\n\nnew Style({\n\t'.randomRed': {\n\t\tbackground_color: getRandomRedColor(),\n\t\tcolor: '#fff'\n\t}\n});</pre>\n\nResult:\n\n<pre>.randomRed {\n\tbackground-color: #bd4028;\n\tcolor: #fff\n}</pre>\n\n=== Nested Styles ===\n\nExample:\n\n<pre>new Style({\n\thtml: {\n\t\tbody: {\n\t\t\theader: {\n\t\t\t\tdiv: {\n\t\t\t\t\tul: {\n\t\t\t\t\t\tli: {\n\t\t\t\t\t\t\tp: {\n\t\t\t\t\t\t\t\tcolor: new RGBA(new Hex('#666')),\n\n\t\t\t\t\t\t\t\t'a, strong': {\n\t\t\t\t\t\t\t\t\tfont_weight: 'bold'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tfooter: {\n\t\t\t\t'background-color': new HSL(new Hex('#ccc'))\n\t\t\t}\n\t\t}\n\t}\n});</pre>\n\nResult:\n\n<pre>html body header div ul li p {\n\tcolor: rgba(102, 102, 102, 1)\n}\n\nhtml body header div ul li p a, html body header div ul li p strong {\n\tfont-weight: bold\n}\n\nhtml body footer {\n\tbackground-color: hsl(0, 0%, 80%)\n}</pre>\n\n=== \"Mixins\" ===\n\nExample:\n\n<pre>function myStyle(width, color) {\n\twidth = !width || !Type.isNumber(width) ? 700 : Math.floor(width);\n\n\tif (!Color.isValid(color)) {\n\t\tcolor = Hex.random();\n\t}\n\n\treturn {\n\t\t// Numeric values automatically converted to \"px\" or the unit set by setDefaultUnit()\n\t\twidth: width,\n\t\tmargin: '0 auto',\n\t\ttext_align: 'left',\n\t\tbackground_color: color.toRGB()\n\t};\n}\n\nvar pageWidth = 800;\n\nnew Style({\n\tbody: {\n\t\ttext_align: 'center',\n\n\t\theader: {}.extend(\n\t\t\tmyStyle(pageWidth, '#06c')\n\t\t),\n\n\t\tdiv: {}.extend(\n\t\t\tmyStyle(pageWidth / 2, '#ccc')\n\t\t),\n\n\t\tfooter: {}.extend(\n\t\t\tmyStyle(pageWidth / 3, '#f30')\n\t\t)\n\t}\n});</pre>\n\nResult:\n\n<pre>body {\n\ttext-align: center\n}\n\nbody header {\n\twidth: 800px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(0, 102, 204)\n}\n\nbody div {\n\twidth: 400px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(204, 204, 204)\n}\n\nbody footer {\n\twidth: 266px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(255, 51, 0)\n}</pre>\n\n=== Inheritance ===\n\nExample:\n\n<pre>// In the beginning, there was nothing\nvar singularity = {};\n\nvar A = {\n\tbody: {\n\t\tfont: \"12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif\",\n\t\tcolor: '#000'.toRGB()\n\t}\n};\n\nvar B = {\n\theader: {\n\t\th1: {\n\t\t\tfont_size: 24,\n\t\t\tcolor: darken(Hex.random(), 0.3)\n\t\t}\n\t}\n};\n\nnew Style(\n\tsingularity.extend(A, B)\n);</pre>\n\nResult:\n\n<pre>body {\n\tfont: 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tcolor: rgb(0, 0, 0)\n}\n\nheader h1 {\n\tfont-size: 24px;\n\tcolor: #206502\n}</pre>\n\n== Color Functionality ==\n\nColor spaces are interchangeable:\n\n<pre>var color = Hex.random();\n\nconsole.log('INPUT: ' + color.toString());\n\ncolor = new RGB(color);\n\nconsole.log(color.toString());\n\ncolor = new XYZ(color);\n\n// Color spaces NOT supported in CSS have no .toString() method\nconsole.log(color);\n\ncolor = new HSL(color);\n\nconsole.log(color.toString());\n\ncolor = new CIELab(color);\n\nconsole.log(color);\n\ncolor = new RGBA(color);\n\nconsole.log(color.toString());\n\ncolor = new CMYK(color);\n\nconsole.log(color);\n\ncolor = new HSLA(color);\n\nconsole.log(color.toString());\n\n/*\n * NOTE: Due to the precision of the JavaScript number type\n * the output might not be *exactly* equal to the input\n *\n * e.g. #ff3300 => #fe3300\n */\nconsole.log('OUTPUT: ' + color.toHex().toString());</pre>\n\nResult:\n\n<pre>INPUT: #6cb84b\nrgb(108, 184, 75)\nXYZ {X: 24.59483120679862, Y: 37.97712451767409, Z: 12.690646072857769}\nhsl(102, 43%, 51%)\nCIELab {L: 68.00495079484631, a: -43.46726006781837, b: 47.13923110320886}\nrgba(108, 184, 75, 1)\nCMYK {cyan: 0.4130662167488027, magenta: 0, yellow: 0.5923735991444304, key: 0.2784016469309353}\nhsla(102, 43%, 51%, 1)\nOUTPUT: #6cb84b</pre>\n\n=== complement() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + complement(color).toString());</pre>\n\nResult:\n\n<pre>#ff3300 => #00cbff</pre>\n\n=== analogous() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + analogous(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #ff004c,#ffb200</pre>\n\n=== split() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + split(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #004cff,#00ffb2</pre>\n\n=== square() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + square(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #4cff00,#00cbff,#b200ff</pre>\n\n=== triad() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + triad(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #3200ff,#00ff32</pre>\n\n=== tetradic() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + tetradic(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #cbff00,#00cbff,#3200ff</pre>","readmeFilename":"README.mediawiki","_id":"style-js@0.0.5","dist":{"shasum":"4609fda7052cafe357b9ed630b27e5c17b385c4a","tarball":"https://registry.npmjs.org/style-js/-/style-js-0.0.5.tgz","integrity":"sha512-RH/IhyM5Z3hbCJWcKpm20DpUSewrdqXlMlRFUg5Xexqwj7H/7DT5zh1lHjfhkQHLTWhZhyB3nrFEXMOztuVpuw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBuB4TwIDft9pJe1GzOeDJYFtUhxUwm8oCm9VxmdXr0sAiAtQoz5DT4XCP/+sg2X8NY5ap2vcvT2zylEi3YlEoi6gA=="}]},"_npmVersion":"1.1.65","_npmUser":{"name":"mutatio","email":"martin@mutat.io"},"maintainers":[{"name":"mutatio","email":"martin@mutat.io"}],"directories":{}},"0.0.6":{"name":"style-js","version":"0.0.6","author":{"name":"Martin Gallagher","email":"martin@mutat.io"},"description":"Comprehensive color manipulation classes.","main":"./src/Style.js","repository":{"type":"git","url":"https://github.com/Mutatio/Style.js.git"},"keywords":["style","css","javascript","rgb","rgba","hsv","hsl","hsla","cielab","xyz","color","colour"],"dependencies":{"type-js":"*","util-js":"*"},"readme":"== Style.js ==\n\nAn easy to use JavaScript library providing CSS preprocessing and a myriad of color manipulation functions.\n\n== CSS Preprocessing ==\n\nStyle.js allows developers to utilize the full power of JavaScript to generate CSS.\n\nExample:\n\n<pre>var color = '#06c';\n\nnew Style({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n});</pre>\n\n''Alternative syntax'':\n\n<pre>var color = '#06c';\n\n({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n}.toStyle());</pre>\n\nResult:\n\n<pre>p {\n\tbackground-color: hsla(210, 100%, 40%, 1);\n\tcolor: hsla(30, 100%, 85%, 1);\n\t-webkit-border-radius: 8px;\n\t-moz-border-radius: 8px;\n\tborder-radius: 8px\n}</pre>\n\nAny valid JavaScript code should work. It's easy to mix in your own functionality:\n\n<pre>// Returns a random color with a high red value, as a hex color code\nfunction getRandomRedColor() {\n\t// Generate random RGB color\n\tvar out = RGB.random();\n\n\t// Minimum red value of 180\n\twhile (out.red < 180) {\n\t\tout = RGB.random();\n\t}\n\n\t// Convert to HSL color space\n\tout = new HSL(out);\n\n\t// Adjust the lightness of the color, note: this might reduce the red value\n\tout.lightness = 45;\n\n\t// Return as hexidecimal\n\treturn out.toHex();\n}\n\nnew Style({\n\t'.randomRed': {\n\t\tbackground_color: getRandomRedColor(),\n\t\tcolor: '#fff'\n\t}\n});</pre>\n\nResult:\n\n<pre>.randomRed {\n\tbackground-color: #bd4028;\n\tcolor: #fff\n}</pre>\n\n=== Nested Styles ===\n\nExample:\n\n<pre>new Style({\n\thtml: {\n\t\tbody: {\n\t\t\theader: {\n\t\t\t\tdiv: {\n\t\t\t\t\tul: {\n\t\t\t\t\t\tli: {\n\t\t\t\t\t\t\tp: {\n\t\t\t\t\t\t\t\tcolor: new RGBA(new Hex('#666')),\n\n\t\t\t\t\t\t\t\t'a, strong': {\n\t\t\t\t\t\t\t\t\tfont_weight: 'bold'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tfooter: {\n\t\t\t\t'background-color': new HSL(new Hex('#ccc'))\n\t\t\t}\n\t\t}\n\t}\n});</pre>\n\nResult:\n\n<pre>html body header div ul li p {\n\tcolor: rgba(102, 102, 102, 1)\n}\n\nhtml body header div ul li p a, html body header div ul li p strong {\n\tfont-weight: bold\n}\n\nhtml body footer {\n\tbackground-color: hsl(0, 0%, 80%)\n}</pre>\n\n=== \"Mixins\" ===\n\nExample:\n\n<pre>function myStyle(width, color) {\n\twidth = !width || !Type.isNumber(width) ? 700 : Math.floor(width);\n\n\tif (!Color.isValid(color)) {\n\t\tcolor = Hex.random();\n\t}\n\n\treturn {\n\t\t// Numeric values automatically converted to \"px\" or the unit set by setDefaultUnit()\n\t\twidth: width,\n\t\tmargin: '0 auto',\n\t\ttext_align: 'left',\n\t\tbackground_color: color.toRGB()\n\t};\n}\n\nvar pageWidth = 800;\n\nnew Style({\n\tbody: {\n\t\ttext_align: 'center',\n\n\t\theader: {}.extend(\n\t\t\tmyStyle(pageWidth, '#06c')\n\t\t),\n\n\t\tdiv: {}.extend(\n\t\t\tmyStyle(pageWidth / 2, '#ccc')\n\t\t),\n\n\t\tfooter: {}.extend(\n\t\t\tmyStyle(pageWidth / 3, '#f30')\n\t\t)\n\t}\n});</pre>\n\nResult:\n\n<pre>body {\n\ttext-align: center\n}\n\nbody header {\n\twidth: 800px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(0, 102, 204)\n}\n\nbody div {\n\twidth: 400px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(204, 204, 204)\n}\n\nbody footer {\n\twidth: 266px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(255, 51, 0)\n}</pre>\n\n=== Inheritance ===\n\nExample:\n\n<pre>// In the beginning, there was nothing\nvar singularity = {};\n\nvar A = {\n\tbody: {\n\t\tfont: \"12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif\",\n\t\tcolor: '#000'.toRGB()\n\t}\n};\n\nvar B = {\n\theader: {\n\t\th1: {\n\t\t\tfont_size: 24,\n\t\t\tcolor: darken(Hex.random(), 0.3)\n\t\t}\n\t}\n};\n\nnew Style(\n\tsingularity.extend(A, B)\n);</pre>\n\nResult:\n\n<pre>body {\n\tfont: 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tcolor: rgb(0, 0, 0)\n}\n\nheader h1 {\n\tfont-size: 24px;\n\tcolor: #206502\n}</pre>\n\n== Color Functionality ==\n\nColor spaces are interchangeable:\n\n<pre>var color = Hex.random();\n\nconsole.log('INPUT: ' + color.toString());\n\ncolor = new RGB(color);\n\nconsole.log(color.toString());\n\ncolor = new XYZ(color);\n\n// Color spaces NOT supported in CSS have no .toString() method\nconsole.log(color);\n\ncolor = new HSL(color);\n\nconsole.log(color.toString());\n\ncolor = new CIELab(color);\n\nconsole.log(color);\n\ncolor = new RGBA(color);\n\nconsole.log(color.toString());\n\ncolor = new CMYK(color);\n\nconsole.log(color);\n\ncolor = new HSLA(color);\n\nconsole.log(color.toString());\n\n/*\n * NOTE: Due to the precision of the JavaScript number type\n * the output might not be *exactly* equal to the input\n *\n * e.g. #ff3300 => #fe3300\n */\nconsole.log('OUTPUT: ' + color.toHex().toString());</pre>\n\nResult:\n\n<pre>INPUT: #6cb84b\nrgb(108, 184, 75)\nXYZ {X: 24.59483120679862, Y: 37.97712451767409, Z: 12.690646072857769}\nhsl(102, 43%, 51%)\nCIELab {L: 68.00495079484631, a: -43.46726006781837, b: 47.13923110320886}\nrgba(108, 184, 75, 1)\nCMYK {cyan: 0.4130662167488027, magenta: 0, yellow: 0.5923735991444304, key: 0.2784016469309353}\nhsla(102, 43%, 51%, 1)\nOUTPUT: #6cb84b</pre>\n\n=== complement() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + complement(color).toString());</pre>\n\nResult:\n\n<pre>#ff3300 => #00cbff</pre>\n\n=== analogous() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + analogous(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #ff004c,#ffb200</pre>\n\n=== split() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + split(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #004cff,#00ffb2</pre>\n\n=== square() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + square(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #4cff00,#00cbff,#b200ff</pre>\n\n=== triad() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + triad(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #3200ff,#00ff32</pre>\n\n=== tetradic() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + tetradic(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #cbff00,#00cbff,#3200ff</pre>","readmeFilename":"README.mediawiki","_id":"style-js@0.0.6","dist":{"shasum":"c33786c3bcfbdfe92d5dcaa0953c36ed127b6033","tarball":"https://registry.npmjs.org/style-js/-/style-js-0.0.6.tgz","integrity":"sha512-Ju2ILCwTqPKFeXI32aOPnfL8XMcXKNA81PMWmdwF5TogNy9builX4mjV0kt2BXnAqk21bLGaJwBYwA/zEGuy8Q==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGiprbNePGeOttNt1XqHLPViu/4EqiZpyR+8vboV2u00AiEA7yytkiEXZ79N+R1TLzkQRj//E9pNgnJGDxnZXtXjWw8="}]},"_npmVersion":"1.1.65","_npmUser":{"name":"mutatio","email":"martin@mutat.io"},"maintainers":[{"name":"mutatio","email":"martin@mutat.io"}],"directories":{}},"0.0.7":{"name":"style-js","version":"0.0.7","author":{"name":"Martin Gallagher","email":"martin@mutat.io"},"description":"Comprehensive color manipulation classes.","main":"./src/Style.js","repository":{"type":"git","url":"https://github.com/Mutatio/Style.js.git"},"keywords":["style","css","javascript","rgb","rgba","hsv","hsl","hsla","cielab","xyz","color","colour"],"dependencies":{"type-js":"*","util-js":"*"},"readme":"== Style.js ==\n\nAn easy to use JavaScript library providing CSS preprocessing and a myriad of color manipulation functions.\n\n== CSS Preprocessing ==\n\nStyle.js allows developers to utilize the full power of JavaScript to generate CSS.\n\nExample:\n\n<pre>var color = '#06c';\n\nnew Style({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n});</pre>\n\n''Alternative syntax'':\n\n<pre>var color = '#06c';\n\n({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n}.toStyle());</pre>\n\nResult:\n\n<pre>p {\n\tbackground-color: hsla(210, 100%, 40%, 1);\n\tcolor: hsla(30, 100%, 85%, 1);\n\t-webkit-border-radius: 8px;\n\t-moz-border-radius: 8px;\n\tborder-radius: 8px\n}</pre>\n\nAny valid JavaScript code should work. It's easy to mix in your own functionality:\n\n<pre>// Returns a random color with a high red value, as a hex color code\nfunction getRandomRedColor() {\n\t// Generate random RGB color\n\tvar out = RGB.random();\n\n\t// Minimum red value of 180\n\twhile (out.red < 180) {\n\t\tout = RGB.random();\n\t}\n\n\t// Convert to HSL color space\n\tout = new HSL(out);\n\n\t// Adjust the lightness of the color, note: this might reduce the red value\n\tout.lightness = 45;\n\n\t// Return as hexidecimal\n\treturn out.toHex();\n}\n\nnew Style({\n\t'.randomRed': {\n\t\tbackground_color: getRandomRedColor(),\n\t\tcolor: '#fff'\n\t}\n});</pre>\n\nResult:\n\n<pre>.randomRed {\n\tbackground-color: #bd4028;\n\tcolor: #fff\n}</pre>\n\n=== Nested Styles ===\n\nExample:\n\n<pre>new Style({\n\thtml: {\n\t\tbody: {\n\t\t\theader: {\n\t\t\t\tdiv: {\n\t\t\t\t\tul: {\n\t\t\t\t\t\tli: {\n\t\t\t\t\t\t\tp: {\n\t\t\t\t\t\t\t\tcolor: new RGBA(new Hex('#666')),\n\n\t\t\t\t\t\t\t\t'a, strong': {\n\t\t\t\t\t\t\t\t\tfont_weight: 'bold'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tfooter: {\n\t\t\t\t'background-color': new HSL(new Hex('#ccc'))\n\t\t\t}\n\t\t}\n\t}\n});</pre>\n\nResult:\n\n<pre>html body header div ul li p {\n\tcolor: rgba(102, 102, 102, 1)\n}\n\nhtml body header div ul li p a, html body header div ul li p strong {\n\tfont-weight: bold\n}\n\nhtml body footer {\n\tbackground-color: hsl(0, 0%, 80%)\n}</pre>\n\n=== \"Mixins\" ===\n\nExample:\n\n<pre>function myStyle(width, color) {\n\twidth = !width || !Type.isNumber(width) ? 700 : Math.floor(width);\n\n\tif (!Color.isValid(color)) {\n\t\tcolor = Hex.random();\n\t}\n\n\treturn {\n\t\t// Numeric values automatically converted to \"px\" or the unit set by setDefaultUnit()\n\t\twidth: width,\n\t\tmargin: '0 auto',\n\t\ttext_align: 'left',\n\t\tbackground_color: color.toRGB()\n\t};\n}\n\nvar pageWidth = 800;\n\nnew Style({\n\tbody: {\n\t\ttext_align: 'center',\n\n\t\theader: {}.extend(\n\t\t\tmyStyle(pageWidth, '#06c')\n\t\t),\n\n\t\tdiv: {}.extend(\n\t\t\tmyStyle(pageWidth / 2, '#ccc')\n\t\t),\n\n\t\tfooter: {}.extend(\n\t\t\tmyStyle(pageWidth / 3, '#f30')\n\t\t)\n\t}\n});</pre>\n\nResult:\n\n<pre>body {\n\ttext-align: center\n}\n\nbody header {\n\twidth: 800px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(0, 102, 204)\n}\n\nbody div {\n\twidth: 400px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(204, 204, 204)\n}\n\nbody footer {\n\twidth: 266px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(255, 51, 0)\n}</pre>\n\n=== Inheritance ===\n\nExample:\n\n<pre>// In the beginning, there was nothing\nvar singularity = {};\n\nvar A = {\n\tbody: {\n\t\tfont: \"12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif\",\n\t\tcolor: '#000'.toRGB()\n\t}\n};\n\nvar B = {\n\theader: {\n\t\th1: {\n\t\t\tfont_size: 24,\n\t\t\tcolor: darken(Hex.random(), 0.3)\n\t\t}\n\t}\n};\n\nnew Style(\n\tsingularity.extend(A, B)\n);</pre>\n\nResult:\n\n<pre>body {\n\tfont: 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tcolor: rgb(0, 0, 0)\n}\n\nheader h1 {\n\tfont-size: 24px;\n\tcolor: #206502\n}</pre>\n\n== Color Functionality ==\n\nColor spaces are interchangeable:\n\n<pre>var color = Hex.random();\n\nconsole.log('INPUT: ' + color.toString());\n\ncolor = new RGB(color);\n\nconsole.log(color.toString());\n\ncolor = new XYZ(color);\n\n// Color spaces NOT supported in CSS have no .toString() method\nconsole.log(color);\n\ncolor = new HSL(color);\n\nconsole.log(color.toString());\n\ncolor = new CIELab(color);\n\nconsole.log(color);\n\ncolor = new RGBA(color);\n\nconsole.log(color.toString());\n\ncolor = new CMYK(color);\n\nconsole.log(color);\n\ncolor = new HSLA(color);\n\nconsole.log(color.toString());\n\n/*\n * NOTE: Due to the precision of the JavaScript number type\n * the output might not be *exactly* equal to the input\n *\n * e.g. #ff3300 => #fe3300\n */\nconsole.log('OUTPUT: ' + color.toHex().toString());</pre>\n\nResult:\n\n<pre>INPUT: #6cb84b\nrgb(108, 184, 75)\nXYZ {X: 24.59483120679862, Y: 37.97712451767409, Z: 12.690646072857769}\nhsl(102, 43%, 51%)\nCIELab {L: 68.00495079484631, a: -43.46726006781837, b: 47.13923110320886}\nrgba(108, 184, 75, 1)\nCMYK {cyan: 0.4130662167488027, magenta: 0, yellow: 0.5923735991444304, key: 0.2784016469309353}\nhsla(102, 43%, 51%, 1)\nOUTPUT: #6cb84b</pre>\n\n=== complement() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + complement(color).toString());</pre>\n\nResult:\n\n<pre>#ff3300 => #00cbff</pre>\n\n=== analogous() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + analogous(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #ff004c,#ffb200</pre>\n\n=== split() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + split(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #004cff,#00ffb2</pre>\n\n=== square() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + square(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #4cff00,#00cbff,#b200ff</pre>\n\n=== triad() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + triad(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #3200ff,#00ff32</pre>\n\n=== tetradic() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + tetradic(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #cbff00,#00cbff,#3200ff</pre>","readmeFilename":"README.mediawiki","_id":"style-js@0.0.7","dist":{"shasum":"3c0a5924e162cb588ced066cbda3cfe62014dd2d","tarball":"https://registry.npmjs.org/style-js/-/style-js-0.0.7.tgz","integrity":"sha512-/J0WnAYCp9BE6svAeDqg8mADp4jDdwYhTE0GN5GhGz38m5JmzNG8C23JYik6avPQgiebsOb8cU3MErJXwCd5yw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRnAVCnTKe9vUg9FqsoO21VQRqfSBj5JCt+iE8iWUNXQIhAJ877fA2WQGrLULzTz5XIFsCKiwEcXT0ovm6iJd0NMnX"}]},"_npmVersion":"1.1.65","_npmUser":{"name":"mutatio","email":"martin@mutat.io"},"maintainers":[{"name":"mutatio","email":"martin@mutat.io"}],"directories":{}},"0.0.8":{"name":"style-js","version":"0.0.8","author":{"name":"Martin Gallagher","email":"martin@mutat.io"},"description":"Comprehensive color manipulation classes.","main":"./src/Style.js","repository":{"type":"git","url":"https://github.com/Mutatio/Style.js.git"},"keywords":["style","css","javascript","rgb","rgba","hsv","hsl","hsla","cielab","xyz","color","colour"],"dependencies":{"type-js":"*","util-js":"*"},"readme":"== Style.js ==\n\nAn easy to use JavaScript library providing CSS preprocessing and a myriad of color manipulation functions.\n\n== CSS Preprocessing ==\n\nStyle.js allows developers to utilize the full power of JavaScript to generate CSS.\n\nExample:\n\n<pre>var color = '#06c';\n\nnew Style({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n});</pre>\n\n''Alternative syntax'':\n\n<pre>var color = '#06c';\n\n({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n}.toStyle());</pre>\n\nResult:\n\n<pre>p {\n\tbackground-color: hsla(210, 100%, 40%, 1);\n\tcolor: hsla(30, 100%, 85%, 1);\n\t-webkit-border-radius: 8px;\n\t-moz-border-radius: 8px;\n\tborder-radius: 8px\n}</pre>\n\nAny valid JavaScript code should work. It's easy to mix in your own functionality:\n\n<pre>// Returns a random color with a high red value, as a hex color code\nfunction getRandomRedColor() {\n\t// Generate random RGB color\n\tvar out = RGB.random();\n\n\t// Minimum red value of 180\n\twhile (out.red < 180) {\n\t\tout = RGB.random();\n\t}\n\n\t// Convert to HSL color space\n\tout = new HSL(out);\n\n\t// Adjust the lightness of the color, note: this might reduce the red value\n\tout.lightness = 45;\n\n\t// Return as hexidecimal\n\treturn out.toHex();\n}\n\nnew Style({\n\t'.randomRed': {\n\t\tbackground_color: getRandomRedColor(),\n\t\tcolor: '#fff'\n\t}\n});</pre>\n\nResult:\n\n<pre>.randomRed {\n\tbackground-color: #bd4028;\n\tcolor: #fff\n}</pre>\n\n=== Nested Styles ===\n\nExample:\n\n<pre>new Style({\n\thtml: {\n\t\tbody: {\n\t\t\theader: {\n\t\t\t\tdiv: {\n\t\t\t\t\tul: {\n\t\t\t\t\t\tli: {\n\t\t\t\t\t\t\tp: {\n\t\t\t\t\t\t\t\tcolor: new RGBA(new Hex('#666')),\n\n\t\t\t\t\t\t\t\t'a, strong': {\n\t\t\t\t\t\t\t\t\tfont_weight: 'bold'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tfooter: {\n\t\t\t\t'background-color': new HSL(new Hex('#ccc'))\n\t\t\t}\n\t\t}\n\t}\n});</pre>\n\nResult:\n\n<pre>html body header div ul li p {\n\tcolor: rgba(102, 102, 102, 1)\n}\n\nhtml body header div ul li p a, html body header div ul li p strong {\n\tfont-weight: bold\n}\n\nhtml body footer {\n\tbackground-color: hsl(0, 0%, 80%)\n}</pre>\n\n=== \"Mixins\" ===\n\nExample:\n\n<pre>function myStyle(width, color) {\n\twidth = !width || !Type.isNumber(width) ? 700 : Math.floor(width);\n\n\tif (!Color.isValid(color)) {\n\t\tcolor = Hex.random();\n\t}\n\n\treturn {\n\t\t// Numeric values automatically converted to \"px\" or the unit set by setDefaultUnit()\n\t\twidth: width,\n\t\tmargin: '0 auto',\n\t\ttext_align: 'left',\n\t\tbackground_color: color.toRGB()\n\t};\n}\n\nvar pageWidth = 800;\n\nnew Style({\n\tbody: {\n\t\ttext_align: 'center',\n\n\t\theader: {}.extend(\n\t\t\tmyStyle(pageWidth, '#06c')\n\t\t),\n\n\t\tdiv: {}.extend(\n\t\t\tmyStyle(pageWidth / 2, '#ccc')\n\t\t),\n\n\t\tfooter: {}.extend(\n\t\t\tmyStyle(pageWidth / 3, '#f30')\n\t\t)\n\t}\n});</pre>\n\nResult:\n\n<pre>body {\n\ttext-align: center\n}\n\nbody header {\n\twidth: 800px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(0, 102, 204)\n}\n\nbody div {\n\twidth: 400px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(204, 204, 204)\n}\n\nbody footer {\n\twidth: 266px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(255, 51, 0)\n}</pre>\n\n=== Inheritance ===\n\nExample:\n\n<pre>// In the beginning, there was nothing\nvar singularity = {};\n\nvar A = {\n\tbody: {\n\t\tfont: \"12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif\",\n\t\tcolor: '#000'.toRGB()\n\t}\n};\n\nvar B = {\n\theader: {\n\t\th1: {\n\t\t\tfont_size: 24,\n\t\t\tcolor: darken(Hex.random(), 0.3)\n\t\t}\n\t}\n};\n\nnew Style(\n\tsingularity.extend(A, B)\n);</pre>\n\nResult:\n\n<pre>body {\n\tfont: 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tcolor: rgb(0, 0, 0)\n}\n\nheader h1 {\n\tfont-size: 24px;\n\tcolor: #206502\n}</pre>\n\n== Color Functionality ==\n\nColor spaces are interchangeable:\n\n<pre>var color = Hex.random();\n\nconsole.log('INPUT: ' + color.toString());\n\ncolor = new RGB(color);\n\nconsole.log(color.toString());\n\ncolor = new XYZ(color);\n\n// Color spaces NOT supported in CSS have no .toString() method\nconsole.log(color);\n\ncolor = new HSL(color);\n\nconsole.log(color.toString());\n\ncolor = new CIELab(color);\n\nconsole.log(color);\n\ncolor = new RGBA(color);\n\nconsole.log(color.toString());\n\ncolor = new CMYK(color);\n\nconsole.log(color);\n\ncolor = new HSLA(color);\n\nconsole.log(color.toString());\n\n/*\n * NOTE: Due to the precision of the JavaScript number type\n * the output might not be *exactly* equal to the input\n *\n * e.g. #ff3300 => #fe3300\n */\nconsole.log('OUTPUT: ' + color.toHex().toString());</pre>\n\nResult:\n\n<pre>INPUT: #6cb84b\nrgb(108, 184, 75)\nXYZ {X: 24.59483120679862, Y: 37.97712451767409, Z: 12.690646072857769}\nhsl(102, 43%, 51%)\nCIELab {L: 68.00495079484631, a: -43.46726006781837, b: 47.13923110320886}\nrgba(108, 184, 75, 1)\nCMYK {cyan: 0.4130662167488027, magenta: 0, yellow: 0.5923735991444304, key: 0.2784016469309353}\nhsla(102, 43%, 51%, 1)\nOUTPUT: #6cb84b</pre>\n\n=== complement() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + complement(color).toString());</pre>\n\nResult:\n\n<pre>#ff3300 => #00cbff</pre>\n\n=== analogous() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + analogous(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #ff004c,#ffb200</pre>\n\n=== split() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + split(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #004cff,#00ffb2</pre>\n\n=== square() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + square(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #4cff00,#00cbff,#b200ff</pre>\n\n=== triad() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + triad(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #3200ff,#00ff32</pre>\n\n=== tetradic() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + tetradic(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #cbff00,#00cbff,#3200ff</pre>","readmeFilename":"README.mediawiki","_id":"style-js@0.0.8","dist":{"shasum":"a3d24b5275d000d12dbf4133075c383796b8a56d","tarball":"https://registry.npmjs.org/style-js/-/style-js-0.0.8.tgz","integrity":"sha512-OXIShOm2Avj0ou7s1w/356HAMiHmwAmOOBY5y7tDMi0wKtR3jFMUn4mE/jV/O1WMvynz7YDL+iDVvDIY5t8kEg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG3SB+slysaHZOl7W4tBheOgOOvSXJKhcPDwZTnn+wiAAiEAv6dvETWqwYHrx7YvsTwSdpIFMK0qtyDEM3TrY9iS/hw="}]},"_npmVersion":"1.1.65","_npmUser":{"name":"mutatio","email":"martin@mutat.io"},"maintainers":[{"name":"mutatio","email":"martin@mutat.io"}],"directories":{}},"0.0.9":{"name":"style-js","version":"0.0.9","author":{"name":"Martin Gallagher","email":"martin@mutat.io"},"description":"Comprehensive color manipulation classes.","main":"./src/Style.js","repository":{"type":"git","url":"https://github.com/Mutatio/Style.js.git"},"keywords":["style","css","javascript","rgb","rgba","hsv","hsl","hsla","cielab","xyz","color","colour"],"dependencies":{"type-js":"*","util-js":"*"},"readme":"== Style.js ==\n\nAn easy to use JavaScript library providing CSS preprocessing and a myriad of color manipulation functions.\n\n== CSS Preprocessing ==\n\nStyle.js allows developers to utilize the full power of JavaScript to generate CSS.\n\nExample:\n\n<pre>var color = '#06c';\n\nnew Style({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n});</pre>\n\n''Alternative syntax'':\n\n<pre>var color = '#06c';\n\n({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n}.toStyle());</pre>\n\nResult:\n\n<pre>p {\n\tbackground-color: hsla(210, 100%, 40%, 1);\n\tcolor: hsla(30, 100%, 85%, 1);\n\t-webkit-border-radius: 8px;\n\t-moz-border-radius: 8px;\n\tborder-radius: 8px\n}</pre>\n\nAny valid JavaScript code should work. It's easy to mix in your own functionality:\n\n<pre>// Returns a random color with a high red value, as a hex color code\nfunction getRandomRedColor() {\n\t// Generate random RGB color\n\tvar out = RGB.random();\n\n\t// Minimum red value of 180\n\twhile (out.red < 180) {\n\t\tout = RGB.random();\n\t}\n\n\t// Convert to HSL color space\n\tout = new HSL(out);\n\n\t// Adjust the lightness of the color, note: this might reduce the red value\n\tout.lightness = 45;\n\n\t// Return as hexidecimal\n\treturn out.toHex();\n}\n\nnew Style({\n\t'.randomRed': {\n\t\tbackground_color: getRandomRedColor(),\n\t\tcolor: '#fff'\n\t}\n});</pre>\n\nResult:\n\n<pre>.randomRed {\n\tbackground-color: #bd4028;\n\tcolor: #fff\n}</pre>\n\n=== Nested Styles ===\n\nExample:\n\n<pre>new Style({\n\thtml: {\n\t\tbody: {\n\t\t\theader: {\n\t\t\t\tdiv: {\n\t\t\t\t\tul: {\n\t\t\t\t\t\tli: {\n\t\t\t\t\t\t\tp: {\n\t\t\t\t\t\t\t\tcolor: new RGBA(new Hex('#666')),\n\n\t\t\t\t\t\t\t\t'a, strong': {\n\t\t\t\t\t\t\t\t\tfont_weight: 'bold'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tfooter: {\n\t\t\t\t'background-color': new HSL(new Hex('#ccc'))\n\t\t\t}\n\t\t}\n\t}\n});</pre>\n\nResult:\n\n<pre>html body header div ul li p {\n\tcolor: rgba(102, 102, 102, 1)\n}\n\nhtml body header div ul li p a, html body header div ul li p strong {\n\tfont-weight: bold\n}\n\nhtml body footer {\n\tbackground-color: hsl(0, 0%, 80%)\n}</pre>\n\n=== \"Mixins\" ===\n\nExample:\n\n<pre>function myStyle(width, color) {\n\twidth = !width || !Type.isNumber(width) ? 700 : Math.floor(width);\n\n\tif (!Color.isValid(color)) {\n\t\tcolor = Hex.random();\n\t}\n\n\treturn {\n\t\t// Numeric values automatically converted to \"px\" or the unit set by setDefaultUnit()\n\t\twidth: width,\n\t\tmargin: '0 auto',\n\t\ttext_align: 'left',\n\t\tbackground_color: color.toRGB()\n\t};\n}\n\nvar pageWidth = 800;\n\nnew Style({\n\tbody: {\n\t\ttext_align: 'center',\n\n\t\theader: {}.extend(\n\t\t\tmyStyle(pageWidth, '#06c')\n\t\t),\n\n\t\tdiv: {}.extend(\n\t\t\tmyStyle(pageWidth / 2, '#ccc')\n\t\t),\n\n\t\tfooter: {}.extend(\n\t\t\tmyStyle(pageWidth / 3, '#f30')\n\t\t)\n\t}\n});</pre>\n\nResult:\n\n<pre>body {\n\ttext-align: center\n}\n\nbody header {\n\twidth: 800px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(0, 102, 204)\n}\n\nbody div {\n\twidth: 400px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(204, 204, 204)\n}\n\nbody footer {\n\twidth: 266px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(255, 51, 0)\n}</pre>\n\n=== Inheritance ===\n\nExample:\n\n<pre>// In the beginning, there was nothing\nvar singularity = {};\n\nvar A = {\n\tbody: {\n\t\tfont: \"12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif\",\n\t\tcolor: '#000'.toRGB()\n\t}\n};\n\nvar B = {\n\theader: {\n\t\th1: {\n\t\t\tfont_size: 24,\n\t\t\tcolor: darken(Hex.random(), 0.3)\n\t\t}\n\t}\n};\n\nnew Style(\n\tsingularity.extend(A, B)\n);</pre>\n\nResult:\n\n<pre>body {\n\tfont: 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tcolor: rgb(0, 0, 0)\n}\n\nheader h1 {\n\tfont-size: 24px;\n\tcolor: #206502\n}</pre>\n\n== Color Functionality ==\n\nColor spaces are interchangeable:\n\n<pre>var color = Hex.random();\n\nconsole.log('INPUT: ' + color.toString());\n\ncolor = new RGB(color);\n\nconsole.log(color.toString());\n\ncolor = new XYZ(color);\n\n// Color spaces NOT supported in CSS have no .toString() method\nconsole.log(color);\n\ncolor = new HSL(color);\n\nconsole.log(color.toString());\n\ncolor = new CIELab(color);\n\nconsole.log(color);\n\ncolor = new RGBA(color);\n\nconsole.log(color.toString());\n\ncolor = new CMYK(color);\n\nconsole.log(color);\n\ncolor = new HSLA(color);\n\nconsole.log(color.toString());\n\n/*\n * NOTE: Due to the precision of the JavaScript number type\n * the output might not be *exactly* equal to the input\n *\n * e.g. #ff3300 => #fe3300\n */\nconsole.log('OUTPUT: ' + color.toHex().toString());</pre>\n\nResult:\n\n<pre>INPUT: #6cb84b\nrgb(108, 184, 75)\nXYZ {X: 24.59483120679862, Y: 37.97712451767409, Z: 12.690646072857769}\nhsl(102, 43%, 51%)\nCIELab {L: 68.00495079484631, a: -43.46726006781837, b: 47.13923110320886}\nrgba(108, 184, 75, 1)\nCMYK {cyan: 0.4130662167488027, magenta: 0, yellow: 0.5923735991444304, key: 0.2784016469309353}\nhsla(102, 43%, 51%, 1)\nOUTPUT: #6cb84b</pre>\n\n=== complement() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + complement(color).toString());</pre>\n\nResult:\n\n<pre>#ff3300 => #00cbff</pre>\n\n=== analogous() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + analogous(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #ff004c,#ffb200</pre>\n\n=== split() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + split(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #004cff,#00ffb2</pre>\n\n=== square() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + square(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #4cff00,#00cbff,#b200ff</pre>\n\n=== triad() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + triad(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #3200ff,#00ff32</pre>\n\n=== tetradic() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + tetradic(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #cbff00,#00cbff,#3200ff</pre>","readmeFilename":"README.mediawiki","_id":"style-js@0.0.9","dist":{"shasum":"7d0cdee069e6179ffd19185fd53f727c09365643","tarball":"https://registry.npmjs.org/style-js/-/style-js-0.0.9.tgz","integrity":"sha512-Y2weWJ57dTn6tTsWrRbcnfrfezvTv88LkKcHoE7WiiDx141MdnYyrUoxJKLj8OtBeCbfql4zOmwYD3O0Xr6RIw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqj6KeSVP8vtmbY7/e5URH1ZT4qnB0G38BjFcGTSVXgAIgaGEHYscR9WEzunJ019Nw3PxP2shzbZdMK3khxn0np7I="}]},"_npmVersion":"1.1.65","_npmUser":{"name":"mutatio","email":"martin@mutat.io"},"maintainers":[{"name":"mutatio","email":"martin@mutat.io"}],"directories":{}},"0.0.10":{"name":"style-js","version":"0.0.10","author":{"name":"Martin Gallagher","email":"martin@mutat.io"},"description":"Comprehensive color manipulation classes.","main":"./src/Style.js","repository":{"type":"git","url":"https://github.com/Mutatio/Style.js.git"},"keywords":["style","css","javascript","rgb","rgba","hsv","hsl","hsla","cielab","xyz","color","colour"],"dependencies":{"type-js":"*","util-js":"*"},"readme":"== Style.js ==\n\nAn easy to use JavaScript library providing CSS preprocessing and a myriad of color manipulation functions.\n\n== CSS Preprocessing ==\n\nStyle.js allows developers to utilize the full power of JavaScript to generate CSS.\n\nExample:\n\n<pre>var color = '#06c';\n\nnew Style({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n});</pre>\n\n''Alternative syntax'':\n\n<pre>var color = '#06c';\n\n({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n}.toStyle());</pre>\n\nResult:\n\n<pre>p {\n\tbackground-color: hsla(210, 100%, 40%, 1);\n\tcolor: hsla(30, 100%, 85%, 1);\n\t-webkit-border-radius: 8px;\n\t-moz-border-radius: 8px;\n\tborder-radius: 8px\n}</pre>\n\nAny valid JavaScript code should work. It's easy to mix in your own functionality:\n\n<pre>// Returns a random color with a high red value, as a hex color code\nfunction getRandomRedColor() {\n\t// Generate random RGB color\n\tvar out = RGB.random();\n\n\t// Minimum red value of 180\n\twhile (out.red < 180) {\n\t\tout = RGB.random();\n\t}\n\n\t// Convert to HSL color space\n\tout = new HSL(out);\n\n\t// Adjust the lightness of the color, note: this might reduce the red value\n\tout.lightness = 45;\n\n\t// Return as hexidecimal\n\treturn out.toHex();\n}\n\nnew Style({\n\t'.randomRed': {\n\t\tbackground_color: getRandomRedColor(),\n\t\tcolor: '#fff'\n\t}\n});</pre>\n\nResult:\n\n<pre>.randomRed {\n\tbackground-color: #bd4028;\n\tcolor: #fff\n}</pre>\n\n=== Nested Styles ===\n\nExample:\n\n<pre>new Style({\n\thtml: {\n\t\tbody: {\n\t\t\theader: {\n\t\t\t\tdiv: {\n\t\t\t\t\tul: {\n\t\t\t\t\t\tli: {\n\t\t\t\t\t\t\tp: {\n\t\t\t\t\t\t\t\tcolor: new RGBA(new Hex('#666')),\n\n\t\t\t\t\t\t\t\t'a, strong': {\n\t\t\t\t\t\t\t\t\tfont_weight: 'bold'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tfooter: {\n\t\t\t\t'background-color': new HSL(new Hex('#ccc'))\n\t\t\t}\n\t\t}\n\t}\n});</pre>\n\nResult:\n\n<pre>html body header div ul li p {\n\tcolor: rgba(102, 102, 102, 1)\n}\n\nhtml body header div ul li p a, html body header div ul li p strong {\n\tfont-weight: bold\n}\n\nhtml body footer {\n\tbackground-color: hsl(0, 0%, 80%)\n}</pre>\n\n=== \"Mixins\" ===\n\nExample:\n\n<pre>function myStyle(width, color) {\n\twidth = !width || !Type.isNumber(width) ? 700 : Math.floor(width);\n\n\tif (!Color.isValid(color)) {\n\t\tcolor = Hex.random();\n\t}\n\n\treturn {\n\t\t// Numeric values automatically converted to \"px\" or the unit set by setDefaultUnit()\n\t\twidth: width,\n\t\tmargin: '0 auto',\n\t\ttext_align: 'left',\n\t\tbackground_color: color.toRGB()\n\t};\n}\n\nvar pageWidth = 800;\n\nnew Style({\n\tbody: {\n\t\ttext_align: 'center',\n\n\t\theader: {}.extend(\n\t\t\tmyStyle(pageWidth, '#06c')\n\t\t),\n\n\t\tdiv: {}.extend(\n\t\t\tmyStyle(pageWidth / 2, '#ccc')\n\t\t),\n\n\t\tfooter: {}.extend(\n\t\t\tmyStyle(pageWidth / 3, '#f30')\n\t\t)\n\t}\n});</pre>\n\nResult:\n\n<pre>body {\n\ttext-align: center\n}\n\nbody header {\n\twidth: 800px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(0, 102, 204)\n}\n\nbody div {\n\twidth: 400px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(204, 204, 204)\n}\n\nbody footer {\n\twidth: 266px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(255, 51, 0)\n}</pre>\n\n=== Inheritance ===\n\nExample:\n\n<pre>// In the beginning, there was nothing\nvar singularity = {};\n\nvar A = {\n\tbody: {\n\t\tfont: \"12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif\",\n\t\tcolor: '#000'.toRGB()\n\t}\n};\n\nvar B = {\n\theader: {\n\t\th1: {\n\t\t\tfont_size: 24,\n\t\t\tcolor: darken(Hex.random(), 0.3)\n\t\t}\n\t}\n};\n\nnew Style(\n\tsingularity.extend(A, B)\n);</pre>\n\nResult:\n\n<pre>body {\n\tfont: 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tcolor: rgb(0, 0, 0)\n}\n\nheader h1 {\n\tfont-size: 24px;\n\tcolor: #206502\n}</pre>\n\n== Color Functionality ==\n\nColor spaces are interchangeable:\n\n<pre>var color = Hex.random();\n\nconsole.log('INPUT: ' + color.toString());\n\ncolor = new RGB(color);\n\nconsole.log(color.toString());\n\ncolor = new XYZ(color);\n\n// Color spaces NOT supported in CSS have no .toString() method\nconsole.log(color);\n\ncolor = new HSL(color);\n\nconsole.log(color.toString());\n\ncolor = new CIELab(color);\n\nconsole.log(color);\n\ncolor = new RGBA(color);\n\nconsole.log(color.toString());\n\ncolor = new CMYK(color);\n\nconsole.log(color);\n\ncolor = new HSLA(color);\n\nconsole.log(color.toString());\n\n/*\n * NOTE: Due to the precision of the JavaScript number type\n * the output might not be *exactly* equal to the input\n *\n * e.g. #ff3300 => #fe3300\n */\nconsole.log('OUTPUT: ' + color.toHex().toString());</pre>\n\nResult:\n\n<pre>INPUT: #6cb84b\nrgb(108, 184, 75)\nXYZ {X: 24.59483120679862, Y: 37.97712451767409, Z: 12.690646072857769}\nhsl(102, 43%, 51%)\nCIELab {L: 68.00495079484631, a: -43.46726006781837, b: 47.13923110320886}\nrgba(108, 184, 75, 1)\nCMYK {cyan: 0.4130662167488027, magenta: 0, yellow: 0.5923735991444304, key: 0.2784016469309353}\nhsla(102, 43%, 51%, 1)\nOUTPUT: #6cb84b</pre>\n\n=== complement() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + complement(color).toString());</pre>\n\nResult:\n\n<pre>#ff3300 => #00cbff</pre>\n\n=== analogous() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + analogous(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #ff004c,#ffb200</pre>\n\n=== split() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + split(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #004cff,#00ffb2</pre>\n\n=== square() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + square(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #4cff00,#00cbff,#b200ff</pre>\n\n=== triad() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + triad(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #3200ff,#00ff32</pre>\n\n=== tetradic() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + tetradic(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #cbff00,#00cbff,#3200ff</pre>","readmeFilename":"README.mediawiki","_id":"style-js@0.0.10","dist":{"shasum":"e39a5391408a04f96fb37f8d8d7cdd9cebf83435","tarball":"https://registry.npmjs.org/style-js/-/style-js-0.0.10.tgz","integrity":"sha512-bbMMvPxSe5wf1X9hL5Ybksr686mIWaO93Zzbt5nn1M5ukX/ERxR0yDfWTZAuW8Yz8MnMtQXLUjbeg/y7p/lJWQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIArTEZv4KuFJt2Ygiyp60lWWl2iKWGoRvFx07gemF/FpAiEAuLI5aw79O1dGj0T+Hlt2E4rcUnUNKfiLR1QxtGz/OYU="}]},"_npmVersion":"1.1.65","_npmUser":{"name":"mutatio","email":"martin@mutat.io"},"maintainers":[{"name":"mutatio","email":"martin@mutat.io"}],"directories":{}},"0.0.11":{"name":"style-js","version":"0.0.11","author":{"name":"Martin Gallagher","email":"martin@mutat.io"},"description":"Comprehensive color manipulation classes.","main":"./src/Style.js","repository":{"type":"git","url":"https://github.com/Mutatio/Style.js.git"},"keywords":["style","css","javascript","rgb","rgba","hsv","hsl","hsla","cielab","xyz","color","colour"],"dependencies":{"type-js":"*","util-js":"*"},"readme":"== Style.js ==\n\nAn easy to use JavaScript library providing CSS preprocessing and a myriad of color manipulation functions.\n\n== CSS Preprocessing ==\n\nStyle.js allows developers to utilize the full power of JavaScript to generate CSS.\n\nExample:\n\n<pre>var color = '#06c';\n\nnew Style({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n});</pre>\n\n''Alternative syntax'':\n\n<pre>var color = '#06c';\n\n({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n}.toStyle());</pre>\n\nResult:\n\n<pre>p {\n\tbackground-color: hsla(210, 100%, 40%, 1);\n\tcolor: hsla(30, 100%, 85%, 1);\n\t-webkit-border-radius: 8px;\n\t-moz-border-radius: 8px;\n\tborder-radius: 8px\n}</pre>\n\nAny valid JavaScript code should work. It's easy to mix in your own functionality:\n\n<pre>// Returns a random color with a high red value, as a hex color code\nfunction getRandomRedColor() {\n\t// Generate random RGB color\n\tvar out = RGB.random();\n\n\t// Minimum red value of 180\n\twhile (out.red < 180) {\n\t\tout = RGB.random();\n\t}\n\n\t// Convert to HSL color space\n\tout = new HSL(out);\n\n\t// Adjust the lightness of the color, note: this might reduce the red value\n\tout.lightness = 45;\n\n\t// Return as hexidecimal\n\treturn out.toHex();\n}\n\nnew Style({\n\t'.randomRed': {\n\t\tbackground_color: getRandomRedColor(),\n\t\tcolor: '#fff'\n\t}\n});</pre>\n\nResult:\n\n<pre>.randomRed {\n\tbackground-color: #bd4028;\n\tcolor: #fff\n}</pre>\n\n=== Nested Styles ===\n\nExample:\n\n<pre>new Style({\n\thtml: {\n\t\tbody: {\n\t\t\theader: {\n\t\t\t\tdiv: {\n\t\t\t\t\tul: {\n\t\t\t\t\t\tli: {\n\t\t\t\t\t\t\tp: {\n\t\t\t\t\t\t\t\tcolor: new RGBA(new Hex('#666')),\n\n\t\t\t\t\t\t\t\t'a, strong': {\n\t\t\t\t\t\t\t\t\tfont_weight: 'bold'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tfooter: {\n\t\t\t\t'background-color': new HSL(new Hex('#ccc'))\n\t\t\t}\n\t\t}\n\t}\n});</pre>\n\nResult:\n\n<pre>html body header div ul li p {\n\tcolor: rgba(102, 102, 102, 1)\n}\n\nhtml body header div ul li p a, html body header div ul li p strong {\n\tfont-weight: bold\n}\n\nhtml body footer {\n\tbackground-color: hsl(0, 0%, 80%)\n}</pre>\n\n=== \"Mixins\" ===\n\nExample:\n\n<pre>function myStyle(width, color) {\n\twidth = !width || !Type.isNumber(width) ? 700 : Math.floor(width);\n\n\tif (!Color.isValid(color)) {\n\t\tcolor = Hex.random();\n\t}\n\n\treturn {\n\t\t// Numeric values automatically converted to \"px\" or the unit set by setDefaultUnit()\n\t\twidth: width,\n\t\tmargin: '0 auto',\n\t\ttext_align: 'left',\n\t\tbackground_color: color.toRGB()\n\t};\n}\n\nvar pageWidth = 800;\n\nnew Style({\n\tbody: {\n\t\ttext_align: 'center',\n\n\t\theader: {}.extend(\n\t\t\tmyStyle(pageWidth, '#06c')\n\t\t),\n\n\t\tdiv: {}.extend(\n\t\t\tmyStyle(pageWidth / 2, '#ccc')\n\t\t),\n\n\t\tfooter: {}.extend(\n\t\t\tmyStyle(pageWidth / 3, '#f30')\n\t\t)\n\t}\n});</pre>\n\nResult:\n\n<pre>body {\n\ttext-align: center\n}\n\nbody header {\n\twidth: 800px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(0, 102, 204)\n}\n\nbody div {\n\twidth: 400px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(204, 204, 204)\n}\n\nbody footer {\n\twidth: 266px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(255, 51, 0)\n}</pre>\n\n=== Inheritance ===\n\nExample:\n\n<pre>// In the beginning, there was nothing\nvar singularity = {};\n\nvar A = {\n\tbody: {\n\t\tfont: \"12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif\",\n\t\tcolor: '#000'.toRGB()\n\t}\n};\n\nvar B = {\n\theader: {\n\t\th1: {\n\t\t\tfont_size: 24,\n\t\t\tcolor: darken(Hex.random(), 0.3)\n\t\t}\n\t}\n};\n\nnew Style(\n\tsingularity.extend(A, B)\n);</pre>\n\nResult:\n\n<pre>body {\n\tfont: 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tcolor: rgb(0, 0, 0)\n}\n\nheader h1 {\n\tfont-size: 24px;\n\tcolor: #206502\n}</pre>\n\n== Color Functionality ==\n\nColor spaces are interchangeable:\n\n<pre>var color = Hex.random();\n\nconsole.log('INPUT: ' + color.toString());\n\ncolor = new RGB(color);\n\nconsole.log(color.toString());\n\ncolor = new XYZ(color);\n\n// Color spaces NOT supported in CSS have no .toString() method\nconsole.log(color);\n\ncolor = new HSL(color);\n\nconsole.log(color.toString());\n\ncolor = new CIELab(color);\n\nconsole.log(color);\n\ncolor = new RGBA(color);\n\nconsole.log(color.toString());\n\ncolor = new CMYK(color);\n\nconsole.log(color);\n\ncolor = new HSLA(color);\n\nconsole.log(color.toString());\n\n/*\n * NOTE: Due to the precision of the JavaScript number type\n * the output might not be *exactly* equal to the input\n *\n * e.g. #ff3300 => #fe3300\n */\nconsole.log('OUTPUT: ' + color.toHex().toString());</pre>\n\nResult:\n\n<pre>INPUT: #6cb84b\nrgb(108, 184, 75)\nXYZ {X: 24.59483120679862, Y: 37.97712451767409, Z: 12.690646072857769}\nhsl(102, 43%, 51%)\nCIELab {L: 68.00495079484631, a: -43.46726006781837, b: 47.13923110320886}\nrgba(108, 184, 75, 1)\nCMYK {cyan: 0.4130662167488027, magenta: 0, yellow: 0.5923735991444304, key: 0.2784016469309353}\nhsla(102, 43%, 51%, 1)\nOUTPUT: #6cb84b</pre>\n\n=== complement() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + complement(color).toString());</pre>\n\nResult:\n\n<pre>#ff3300 => #00cbff</pre>\n\n=== analogous() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + analogous(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #ff004c,#ffb200</pre>\n\n=== split() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + split(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #004cff,#00ffb2</pre>\n\n=== square() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + square(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #4cff00,#00cbff,#b200ff</pre>\n\n=== triad() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + triad(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #3200ff,#00ff32</pre>\n\n=== tetradic() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + tetradic(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #cbff00,#00cbff,#3200ff</pre>","readmeFilename":"README.mediawiki","_id":"style-js@0.0.11","dist":{"shasum":"6573e794ea2af54b1c033d9ae56a5736e7a7f911","tarball":"https://registry.npmjs.org/style-js/-/style-js-0.0.11.tgz","integrity":"sha512-H/xrcehGZs7pQ1m7LNze8VUiWdN23m6xJbDoNzzz7ROGII3pD+x5N4q/d88WHd8In+E0tsFc7EdLZ4zRpRLoXg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBNcAt0W4e7p4/u+JAJZSnHlkfJwT5Xm1QrQTrx7r2PLAiEA78i9pDyA65FIbuKTbcsGf4GfDQGEofqAO1LNRtTKp6A="}]},"_npmVersion":"1.1.65","_npmUser":{"name":"mutatio","email":"martin@mutat.io"},"maintainers":[{"name":"mutatio","email":"martin@mutat.io"}],"directories":{}},"0.0.12":{"name":"style-js","version":"0.0.12","author":{"name":"Martin Gallagher","email":"martin@mutat.io"},"description":"Comprehensive color manipulation classes.","main":"./src/Style.js","repository":{"type":"git","url":"https://github.com/Mutatio/Style.js.git"},"keywords":["style","css","javascript","rgb","rgba","hsv","hsl","hsla","cielab","xyz","color","colour"],"dependencies":{"type-js":"*","util-js":"*"},"readme":"== Style.js ==\n\nAn easy to use JavaScript library providing CSS preprocessing and a myriad of color manipulation functions.\n\n== CSS Preprocessing ==\n\nStyle.js allows developers to utilize the full power of JavaScript to generate CSS.\n\nExample:\n\n<pre>var color = '#06c';\n\nnew Style({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n});</pre>\n\n''Alternative syntax'':\n\n<pre>var color = '#06c';\n\n({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n}.toStyle());</pre>\n\nResult:\n\n<pre>p {\n\tbackground-color: hsla(210, 100%, 40%, 1);\n\tcolor: hsla(30, 100%, 85%, 1);\n\t-webkit-border-radius: 8px;\n\t-moz-border-radius: 8px;\n\tborder-radius: 8px\n}</pre>\n\nAny valid JavaScript code should work. It's easy to mix in your own functionality:\n\n<pre>// Returns a random color with a high red value, as a hex color code\nfunction getRandomRedColor() {\n\t// Generate random RGB color\n\tvar out = RGB.random();\n\n\t// Minimum red value of 180\n\twhile (out.red < 180) {\n\t\tout = RGB.random();\n\t}\n\n\t// Convert to HSL color space\n\tout = new HSL(out);\n\n\t// Adjust the lightness of the color, note: this might reduce the red value\n\tout.lightness = 45;\n\n\t// Return as hexidecimal\n\treturn out.toHex();\n}\n\nnew Style({\n\t'.randomRed': {\n\t\tbackground_color: getRandomRedColor(),\n\t\tcolor: '#fff'\n\t}\n});</pre>\n\nResult:\n\n<pre>.randomRed {\n\tbackground-color: #bd4028;\n\tcolor: #fff\n}</pre>\n\n=== Nested Styles ===\n\nExample:\n\n<pre>new Style({\n\thtml: {\n\t\tbody: {\n\t\t\theader: {\n\t\t\t\tdiv: {\n\t\t\t\t\tul: {\n\t\t\t\t\t\tli: {\n\t\t\t\t\t\t\tp: {\n\t\t\t\t\t\t\t\tcolor: new RGBA(new Hex('#666')),\n\n\t\t\t\t\t\t\t\t'a, strong': {\n\t\t\t\t\t\t\t\t\tfont_weight: 'bold'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tfooter: {\n\t\t\t\t'background-color': new HSL(new Hex('#ccc'))\n\t\t\t}\n\t\t}\n\t}\n});</pre>\n\nResult:\n\n<pre>html body header div ul li p {\n\tcolor: rgba(102, 102, 102, 1)\n}\n\nhtml body header div ul li p a, html body header div ul li p strong {\n\tfont-weight: bold\n}\n\nhtml body footer {\n\tbackground-color: hsl(0, 0%, 80%)\n}</pre>\n\n=== \"Mixins\" ===\n\nExample:\n\n<pre>function myStyle(width, color) {\n\twidth = !width || !Type.isNumber(width) ? 700 : Math.floor(width);\n\n\tif (!Color.isValid(color)) {\n\t\tcolor = Hex.random();\n\t}\n\n\treturn {\n\t\t// Numeric values automatically converted to \"px\" or the unit set by setDefaultUnit()\n\t\twidth: width,\n\t\tmargin: '0 auto',\n\t\ttext_align: 'left',\n\t\tbackground_color: color.toRGB()\n\t};\n}\n\nvar pageWidth = 800;\n\nnew Style({\n\tbody: {\n\t\ttext_align: 'center',\n\n\t\theader: {}.extend(\n\t\t\tmyStyle(pageWidth, '#06c')\n\t\t),\n\n\t\tdiv: {}.extend(\n\t\t\tmyStyle(pageWidth / 2, '#ccc')\n\t\t),\n\n\t\tfooter: {}.extend(\n\t\t\tmyStyle(pageWidth / 3, '#f30')\n\t\t)\n\t}\n});</pre>\n\nResult:\n\n<pre>body {\n\ttext-align: center\n}\n\nbody header {\n\twidth: 800px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(0, 102, 204)\n}\n\nbody div {\n\twidth: 400px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(204, 204, 204)\n}\n\nbody footer {\n\twidth: 266px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(255, 51, 0)\n}</pre>\n\n=== Inheritance ===\n\nExample:\n\n<pre>// In the beginning, there was nothing\nvar singularity = {};\n\nvar A = {\n\tbody: {\n\t\tfont: \"12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif\",\n\t\tcolor: '#000'.toRGB()\n\t}\n};\n\nvar B = {\n\theader: {\n\t\th1: {\n\t\t\tfont_size: 24,\n\t\t\tcolor: darken(Hex.random(), 0.3)\n\t\t}\n\t}\n};\n\nnew Style(\n\tsingularity.extend(A, B)\n);</pre>\n\nResult:\n\n<pre>body {\n\tfont: 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tcolor: rgb(0, 0, 0)\n}\n\nheader h1 {\n\tfont-size: 24px;\n\tcolor: #206502\n}</pre>\n\n== Color Functionality ==\n\nColor spaces are interchangeable:\n\n<pre>var color = Hex.random();\n\nconsole.log('INPUT: ' + color.toString());\n\ncolor = new RGB(color);\n\nconsole.log(color.toString());\n\ncolor = new XYZ(color);\n\n// Color spaces NOT supported in CSS have no .toString() method\nconsole.log(color);\n\ncolor = new HSL(color);\n\nconsole.log(color.toString());\n\ncolor = new CIELab(color);\n\nconsole.log(color);\n\ncolor = new RGBA(color);\n\nconsole.log(color.toString());\n\ncolor = new CMYK(color);\n\nconsole.log(color);\n\ncolor = new HSLA(color);\n\nconsole.log(color.toString());\n\n/*\n * NOTE: Due to the precision of the JavaScript number type\n * the output might not be *exactly* equal to the input\n *\n * e.g. #ff3300 => #fe3300\n */\nconsole.log('OUTPUT: ' + color.toHex().toString());</pre>\n\nResult:\n\n<pre>INPUT: #6cb84b\nrgb(108, 184, 75)\nXYZ {X: 24.59483120679862, Y: 37.97712451767409, Z: 12.690646072857769}\nhsl(102, 43%, 51%)\nCIELab {L: 68.00495079484631, a: -43.46726006781837, b: 47.13923110320886}\nrgba(108, 184, 75, 1)\nCMYK {cyan: 0.4130662167488027, magenta: 0, yellow: 0.5923735991444304, key: 0.2784016469309353}\nhsla(102, 43%, 51%, 1)\nOUTPUT: #6cb84b</pre>\n\n=== complement() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + complement(color).toString());</pre>\n\nResult:\n\n<pre>#ff3300 => #00cbff</pre>\n\n=== analogous() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + analogous(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #ff004c,#ffb200</pre>\n\n=== split() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + split(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #004cff,#00ffb2</pre>\n\n=== square() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + square(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #4cff00,#00cbff,#b200ff</pre>\n\n=== triad() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + triad(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #3200ff,#00ff32</pre>\n\n=== tetradic() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + tetradic(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #cbff00,#00cbff,#3200ff</pre>","readmeFilename":"README.mediawiki","_id":"style-js@0.0.12","dist":{"shasum":"36c6ef944ddc2b6a375a506d6949632e6cccfe47","tarball":"https://registry.npmjs.org/style-js/-/style-js-0.0.12.tgz","integrity":"sha512-P6H38fspXNzKAYppQRtvlOH2jBQkhZ3Wq0bH/STKOmXJSrakikdFege8GiYP2baQOM/ARyMtcd5hkMdmymHoMg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGK1aAaYZclP01IcDaBcU/yYcNGBl1dK9nR/CXzfpo1eAiBrIzcm7l/pJI4Ct8JD9ybhPgx81riqQR8MkF9gj+6s1g=="}]},"_npmVersion":"1.1.65","_npmUser":{"name":"mutatio","email":"martin@mutat.io"},"maintainers":[{"name":"mutatio","email":"martin@mutat.io"}],"directories":{}},"0.0.13":{"name":"style-js","version":"0.0.13","author":{"name":"Martin Gallagher","email":"martin@mutat.io"},"description":"Comprehensive color manipulation classes.","main":"./src/Style.js","repository":{"type":"git","url":"https://github.com/Mutatio/Style.js.git"},"keywords":["style","css","javascript","rgb","rgba","hsv","hsl","hsla","cielab","xyz","color","colour"],"dependencies":{"type-js":"*","util-js":"*"},"readme":"== Style.js ==\n\nAn easy to use JavaScript library providing CSS preprocessing and a myriad of color manipulation functions.\n\n== CSS Preprocessing ==\n\nStyle.js allows developers to utilize the full power of JavaScript to generate CSS.\n\nExample:\n\n<pre>var color = '#06c';\n\nnew Style({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n});</pre>\n\n''Alternative syntax'':\n\n<pre>var color = '#06c';\n\n({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n}.toStyle());</pre>\n\nResult:\n\n<pre>p {\n\tbackground-color: hsla(210, 100%, 40%, 1);\n\tcolor: hsla(30, 100%, 85%, 1);\n\t-webkit-border-radius: 8px;\n\t-moz-border-radius: 8px;\n\tborder-radius: 8px\n}</pre>\n\nAny valid JavaScript code should work. It's easy to mix in your own functionality:\n\n<pre>// Returns a random color with a high red value, as a hex color code\nfunction getRandomRedColor() {\n\t// Generate random RGB color\n\tvar out = RGB.random();\n\n\t// Minimum red value of 180\n\twhile (out.red < 180) {\n\t\tout = RGB.random();\n\t}\n\n\t// Convert to HSL color space\n\tout = new HSL(out);\n\n\t// Adjust the lightness of the color, note: this might reduce the red value\n\tout.lightness = 45;\n\n\t// Return as hexidecimal\n\treturn out.toHex();\n}\n\nnew Style({\n\t'.randomRed': {\n\t\tbackground_color: getRandomRedColor(),\n\t\tcolor: '#fff'\n\t}\n});</pre>\n\nResult:\n\n<pre>.randomRed {\n\tbackground-color: #bd4028;\n\tcolor: #fff\n}</pre>\n\n=== Nested Styles ===\n\nExample:\n\n<pre>new Style({\n\thtml: {\n\t\tbody: {\n\t\t\theader: {\n\t\t\t\tdiv: {\n\t\t\t\t\tul: {\n\t\t\t\t\t\tli: {\n\t\t\t\t\t\t\tp: {\n\t\t\t\t\t\t\t\tcolor: new RGBA(new Hex('#666')),\n\n\t\t\t\t\t\t\t\t'a, strong': {\n\t\t\t\t\t\t\t\t\tfont_weight: 'bold'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tfooter: {\n\t\t\t\t'background-color': new HSL(new Hex('#ccc'))\n\t\t\t}\n\t\t}\n\t}\n});</pre>\n\nResult:\n\n<pre>html body header div ul li p {\n\tcolor: rgba(102, 102, 102, 1)\n}\n\nhtml body header div ul li p a, html body header div ul li p strong {\n\tfont-weight: bold\n}\n\nhtml body footer {\n\tbackground-color: hsl(0, 0%, 80%)\n}</pre>\n\n=== \"Mixins\" ===\n\nExample:\n\n<pre>function myStyle(width, color) {\n\twidth = !width || !Type.isNumber(width) ? 700 : Math.floor(width);\n\n\tif (!Color.isValid(color)) {\n\t\tcolor = Hex.random();\n\t}\n\n\treturn {\n\t\t// Numeric values automatically converted to \"px\" or the unit set by setDefaultUnit()\n\t\twidth: width,\n\t\tmargin: '0 auto',\n\t\ttext_align: 'left',\n\t\tbackground_color: color.toRGB()\n\t};\n}\n\nvar pageWidth = 800;\n\nnew Style({\n\tbody: {\n\t\ttext_align: 'center',\n\n\t\theader: {}.extend(\n\t\t\tmyStyle(pageWidth, '#06c')\n\t\t),\n\n\t\tdiv: {}.extend(\n\t\t\tmyStyle(pageWidth / 2, '#ccc')\n\t\t),\n\n\t\tfooter: {}.extend(\n\t\t\tmyStyle(pageWidth / 3, '#f30')\n\t\t)\n\t}\n});</pre>\n\nResult:\n\n<pre>body {\n\ttext-align: center\n}\n\nbody header {\n\twidth: 800px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(0, 102, 204)\n}\n\nbody div {\n\twidth: 400px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(204, 204, 204)\n}\n\nbody footer {\n\twidth: 266px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(255, 51, 0)\n}</pre>\n\n=== Inheritance ===\n\nExample:\n\n<pre>// In the beginning, there was nothing\nvar singularity = {};\n\nvar A = {\n\tbody: {\n\t\tfont: \"12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif\",\n\t\tcolor: '#000'.toRGB()\n\t}\n};\n\nvar B = {\n\theader: {\n\t\th1: {\n\t\t\tfont_size: 24,\n\t\t\tcolor: darken(Hex.random(), 0.3)\n\t\t}\n\t}\n};\n\nnew Style(\n\tsingularity.extend(A, B)\n);</pre>\n\nResult:\n\n<pre>body {\n\tfont: 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tcolor: rgb(0, 0, 0)\n}\n\nheader h1 {\n\tfont-size: 24px;\n\tcolor: #206502\n}</pre>\n\n== Color Functionality ==\n\nColor spaces are interchangeable:\n\n<pre>var color = Hex.random();\n\nconsole.log('INPUT: ' + color.toString());\n\ncolor = new RGB(color);\n\nconsole.log(color.toString());\n\ncolor = new XYZ(color);\n\n// Color spaces NOT supported in CSS have no .toString() method\nconsole.log(color);\n\ncolor = new HSL(color);\n\nconsole.log(color.toString());\n\ncolor = new CIELab(color);\n\nconsole.log(color);\n\ncolor = new RGBA(color);\n\nconsole.log(color.toString());\n\ncolor = new CMYK(color);\n\nconsole.log(color);\n\ncolor = new HSLA(color);\n\nconsole.log(color.toString());\n\n/*\n * NOTE: Due to the precision of the JavaScript number type\n * the output might not be *exactly* equal to the input\n *\n * e.g. #ff3300 => #fe3300\n */\nconsole.log('OUTPUT: ' + color.toHex().toString());</pre>\n\nResult:\n\n<pre>INPUT: #6cb84b\nrgb(108, 184, 75)\nXYZ {X: 24.59483120679862, Y: 37.97712451767409, Z: 12.690646072857769}\nhsl(102, 43%, 51%)\nCIELab {L: 68.00495079484631, a: -43.46726006781837, b: 47.13923110320886}\nrgba(108, 184, 75, 1)\nCMYK {cyan: 0.4130662167488027, magenta: 0, yellow: 0.5923735991444304, key: 0.2784016469309353}\nhsla(102, 43%, 51%, 1)\nOUTPUT: #6cb84b</pre>\n\n=== complement() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + complement(color).toString());</pre>\n\nResult:\n\n<pre>#ff3300 => #00cbff</pre>\n\n=== analogous() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + analogous(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #ff004c,#ffb200</pre>\n\n=== split() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + split(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #004cff,#00ffb2</pre>\n\n=== square() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + square(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #4cff00,#00cbff,#b200ff</pre>\n\n=== triad() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + triad(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #3200ff,#00ff32</pre>\n\n=== tetradic() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + tetradic(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #cbff00,#00cbff,#3200ff</pre>","readmeFilename":"README.mediawiki","_id":"style-js@0.0.13","dist":{"shasum":"9bdcc8de9b28b8db10fe9812c29ad069a1db1477","tarball":"https://registry.npmjs.org/style-js/-/style-js-0.0.13.tgz","integrity":"sha512-wIiC5p2GwbmWf9BID1x5RdEyT5ANaWn0ANqu2LPi6UFC7Iv1VZpniRCJSUo1Siou2uytGPJUXXlguaorCvU8bA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwbiaavUulwi6l+y1/oo4C9Fpwnny2XLNlJVO4NbB0wAIgdYqsRbTTGuServtza4Mf8tFmuIuhxm3J/GKHp/Vwxig="}]},"_npmVersion":"1.1.65","_npmUser":{"name":"mutatio","email":"martin@mutat.io"},"maintainers":[{"name":"mutatio","email":"martin@mutat.io"}],"directories":{}},"0.0.14":{"name":"style-js","version":"0.0.14","author":{"name":"Martin Gallagher","email":"martin@mutat.io"},"description":"Comprehensive color manipulation classes.","main":"./src/Style.js","repository":{"type":"git","url":"https://github.com/Mutatio/Style.js.git"},"keywords":["style","css","javascript","rgb","rgba","hsv","hsl","hsla","cielab","xyz","color","colour"],"dependencies":{"type-js":"*","util-js":"*"},"readme":"== Style.js ==\n\nAn easy to use JavaScript library providing CSS preprocessing and a myriad of color manipulation functions.\n\n== CSS Preprocessing ==\n\nStyle.js allows developers to utilize the full power of JavaScript to generate CSS.\n\nExample:\n\n<pre>var color = '#06c';\n\nnew Style({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n});</pre>\n\n''Alternative syntax'':\n\n<pre>var color = '#06c';\n\n({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n}.toStyle());</pre>\n\nResult:\n\n<pre>p {\n\tbackground-color: hsla(210, 100%, 40%, 1);\n\tcolor: hsla(30, 100%, 85%, 1);\n\t-webkit-border-radius: 8px;\n\t-moz-border-radius: 8px;\n\tborder-radius: 8px\n}</pre>\n\nAny valid JavaScript code should work. It's easy to mix in your own functionality:\n\n<pre>// Returns a random color with a high red value, as a hex color code\nfunction getRandomRedColor() {\n\t// Generate random RGB color\n\tvar out = RGB.random();\n\n\t// Minimum red value of 180\n\twhile (out.red < 180) {\n\t\tout = RGB.random();\n\t}\n\n\t// Convert to HSL color space\n\tout = new HSL(out);\n\n\t// Adjust the lightness of the color, note: this might reduce the red value\n\tout.lightness = 45;\n\n\t// Return as hexidecimal\n\treturn out.toHex();\n}\n\nnew Style({\n\t'.randomRed': {\n\t\tbackground_color: getRandomRedColor(),\n\t\tcolor: '#fff'\n\t}\n});</pre>\n\nResult:\n\n<pre>.randomRed {\n\tbackground-color: #bd4028;\n\tcolor: #fff\n}</pre>\n\n=== Nested Styles ===\n\nExample:\n\n<pre>new Style({\n\thtml: {\n\t\tbody: {\n\t\t\theader: {\n\t\t\t\tdiv: {\n\t\t\t\t\tul: {\n\t\t\t\t\t\tli: {\n\t\t\t\t\t\t\tp: {\n\t\t\t\t\t\t\t\tcolor: new RGBA(new Hex('#666')),\n\n\t\t\t\t\t\t\t\t'a, strong': {\n\t\t\t\t\t\t\t\t\tfont_weight: 'bold'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tfooter: {\n\t\t\t\t'background-color': new HSL(new Hex('#ccc'))\n\t\t\t}\n\t\t}\n\t}\n});</pre>\n\nResult:\n\n<pre>html body header div ul li p {\n\tcolor: rgba(102, 102, 102, 1)\n}\n\nhtml body header div ul li p a, html body header div ul li p strong {\n\tfont-weight: bold\n}\n\nhtml body footer {\n\tbackground-color: hsl(0, 0%, 80%)\n}</pre>\n\n=== \"Mixins\" ===\n\nExample:\n\n<pre>function myStyle(width, color) {\n\twidth = !width || !Type.isNumber(width) ? 700 : Math.floor(width);\n\n\tif (!Color.isValid(color)) {\n\t\tcolor = Hex.random();\n\t}\n\n\treturn {\n\t\t// Numeric values automatically converted to \"px\" or the unit set by setDefaultUnit()\n\t\twidth: width,\n\t\tmargin: '0 auto',\n\t\ttext_align: 'left',\n\t\tbackground_color: color.toRGB()\n\t};\n}\n\nvar pageWidth = 800;\n\nnew Style({\n\tbody: {\n\t\ttext_align: 'center',\n\n\t\theader: {}.extend(\n\t\t\tmyStyle(pageWidth, '#06c')\n\t\t),\n\n\t\tdiv: {}.extend(\n\t\t\tmyStyle(pageWidth / 2, '#ccc')\n\t\t),\n\n\t\tfooter: {}.extend(\n\t\t\tmyStyle(pageWidth / 3, '#f30')\n\t\t)\n\t}\n});</pre>\n\nResult:\n\n<pre>body {\n\ttext-align: center\n}\n\nbody header {\n\twidth: 800px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(0, 102, 204)\n}\n\nbody div {\n\twidth: 400px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(204, 204, 204)\n}\n\nbody footer {\n\twidth: 266px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(255, 51, 0)\n}</pre>\n\n=== Inheritance ===\n\nExample:\n\n<pre>// In the beginning, there was nothing\nvar singularity = {};\n\nvar A = {\n\tbody: {\n\t\tfont: \"12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif\",\n\t\tcolor: '#000'.toRGB()\n\t}\n};\n\nvar B = {\n\theader: {\n\t\th1: {\n\t\t\tfont_size: 24,\n\t\t\tcolor: darken(Hex.random(), 0.3)\n\t\t}\n\t}\n};\n\nnew Style(\n\tsingularity.extend(A, B)\n);</pre>\n\nResult:\n\n<pre>body {\n\tfont: 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tcolor: rgb(0, 0, 0)\n}\n\nheader h1 {\n\tfont-size: 24px;\n\tcolor: #206502\n}</pre>\n\n== Color Functionality ==\n\nColor spaces are interchangeable:\n\n<pre>var color = Hex.random();\n\nconsole.log('INPUT: ' + color.toString());\n\ncolor = new RGB(color);\n\nconsole.log(color.toString());\n\ncolor = new XYZ(color);\n\n// Color spaces NOT supported in CSS have no .toString() method\nconsole.log(color);\n\ncolor = new HSL(color);\n\nconsole.log(color.toString());\n\ncolor = new CIELab(color);\n\nconsole.log(color);\n\ncolor = new RGBA(color);\n\nconsole.log(color.toString());\n\ncolor = new CMYK(color);\n\nconsole.log(color);\n\ncolor = new HSLA(color);\n\nconsole.log(color.toString());\n\n/*\n * NOTE: Due to the precision of the JavaScript number type\n * the output might not be *exactly* equal to the input\n *\n * e.g. #ff3300 => #fe3300\n */\nconsole.log('OUTPUT: ' + color.toHex().toString());</pre>\n\nResult:\n\n<pre>INPUT: #6cb84b\nrgb(108, 184, 75)\nXYZ {X: 24.59483120679862, Y: 37.97712451767409, Z: 12.690646072857769}\nhsl(102, 43%, 51%)\nCIELab {L: 68.00495079484631, a: -43.46726006781837, b: 47.13923110320886}\nrgba(108, 184, 75, 1)\nCMYK {cyan: 0.4130662167488027, magenta: 0, yellow: 0.5923735991444304, key: 0.2784016469309353}\nhsla(102, 43%, 51%, 1)\nOUTPUT: #6cb84b</pre>\n\n=== complement() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + complement(color).toString());</pre>\n\nResult:\n\n<pre>#ff3300 => #00cbff</pre>\n\n=== analogous() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + analogous(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #ff004c,#ffb200</pre>\n\n=== split() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + split(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #004cff,#00ffb2</pre>\n\n=== square() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + square(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #4cff00,#00cbff,#b200ff</pre>\n\n=== triad() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + triad(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #3200ff,#00ff32</pre>\n\n=== tetradic() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + tetradic(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #cbff00,#00cbff,#3200ff</pre>","readmeFilename":"README.mediawiki","_id":"style-js@0.0.14","dist":{"shasum":"f399a1fd1bad6bca52813bb6b928894210f3a1c9","tarball":"https://registry.npmjs.org/style-js/-/style-js-0.0.14.tgz","integrity":"sha512-9uWDpJXjNFB4cjZ+/aMNtIYeeUEQiRv5plfDqKzCfnUI0DFzq6irwlGmPFH8DTn9SWK6WFfMjHm/www4NO7j6Q==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUdZlkNxzyNNtnxwo6Q0weinT1xiCLMY1HRNRVraPIOQIhAPl0zW57m2Sm8CkagNdIf6G+NKvVneqycdeBnR9N3nNJ"}]},"_npmVersion":"1.1.65","_npmUser":{"name":"mutatio","email":"martin@mutat.io"},"maintainers":[{"name":"mutatio","email":"martin@mutat.io"}]},"0.0.15":{"name":"style-js","version":"0.0.15","author":{"name":"Martin Gallagher","email":"martin@mutat.io"},"description":"Comprehensive color manipulation classes.","main":"./src/Style.js","repository":{"type":"git","url":"https://github.com/Mutatio/Style.js.git"},"keywords":["style","css","javascript","rgb","rgba","hsv","hsl","hsla","cielab","xyz","color","colour"],"dependencies":{"type-js":"*","util-js":"*"},"readme":"== Style.js ==\n\nAn easy to use JavaScript library providing CSS preprocessing and a myriad of color manipulation functions.\n\n== CSS Preprocessing ==\n\nStyle.js allows developers to utilize the full power of JavaScript to generate CSS.\n\nExample:\n\n<pre>var color = '#06c';\n\nnew Style({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n});</pre>\n\n''Alternative syntax'':\n\n<pre>var color = '#06c';\n\n({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n}.toStyle());</pre>\n\nResult:\n\n<pre>p {\n\tbackground-color: hsla(210, 100%, 40%, 1);\n\tcolor: hsla(30, 100%, 85%, 1);\n\t-webkit-border-radius: 8px;\n\t-moz-border-radius: 8px;\n\tborder-radius: 8px\n}</pre>\n\nAny valid JavaScript code should work. It's easy to mix in your own functionality:\n\n<pre>// Returns a random color with a high red value, as a hex color code\nfunction getRandomRedColor() {\n\t// Generate random RGB color\n\tvar out = RGB.random();\n\n\t// Minimum red value of 180\n\twhile (out.red < 180) {\n\t\tout = RGB.random();\n\t}\n\n\t// Convert to HSL color space\n\tout = new HSL(out);\n\n\t// Adjust the lightness of the color, note: this might reduce the red value\n\tout.lightness = 45;\n\n\t// Return as hexidecimal\n\treturn out.toHex();\n}\n\nnew Style({\n\t'.randomRed': {\n\t\tbackground_color: getRandomRedColor(),\n\t\tcolor: '#fff'\n\t}\n});</pre>\n\nResult:\n\n<pre>.randomRed {\n\tbackground-color: #bd4028;\n\tcolor: #fff\n}</pre>\n\n=== Nested Styles ===\n\nExample:\n\n<pre>new Style({\n\thtml: {\n\t\tbody: {\n\t\t\theader: {\n\t\t\t\tdiv: {\n\t\t\t\t\tul: {\n\t\t\t\t\t\tli: {\n\t\t\t\t\t\t\tp: {\n\t\t\t\t\t\t\t\tcolor: new RGBA(new Hex('#666')),\n\n\t\t\t\t\t\t\t\t'a, strong': {\n\t\t\t\t\t\t\t\t\tfont_weight: 'bold'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tfooter: {\n\t\t\t\t'background-color': new HSL(new Hex('#ccc'))\n\t\t\t}\n\t\t}\n\t}\n});</pre>\n\nResult:\n\n<pre>html body header div ul li p {\n\tcolor: rgba(102, 102, 102, 1)\n}\n\nhtml body header div ul li p a, html body header div ul li p strong {\n\tfont-weight: bold\n}\n\nhtml body footer {\n\tbackground-color: hsl(0, 0%, 80%)\n}</pre>\n\n=== \"Mixins\" ===\n\nExample:\n\n<pre>function myStyle(width, color) {\n\twidth = !width || !Type.isNumber(width) ? 700 : Math.floor(width);\n\n\tif (!Color.isValid(color)) {\n\t\tcolor = Hex.random();\n\t}\n\n\treturn {\n\t\t// Numeric values automatically converted to \"px\" or the unit set by setDefaultUnit()\n\t\twidth: width,\n\t\tmargin: '0 auto',\n\t\ttext_align: 'left',\n\t\tbackground_color: color.toRGB()\n\t};\n}\n\nvar pageWidth = 800;\n\nnew Style({\n\tbody: {\n\t\ttext_align: 'center',\n\n\t\theader: {}.extend(\n\t\t\tmyStyle(pageWidth, '#06c')\n\t\t),\n\n\t\tdiv: {}.extend(\n\t\t\tmyStyle(pageWidth / 2, '#ccc')\n\t\t),\n\n\t\tfooter: {}.extend(\n\t\t\tmyStyle(pageWidth / 3, '#f30')\n\t\t)\n\t}\n});</pre>\n\nResult:\n\n<pre>body {\n\ttext-align: center\n}\n\nbody header {\n\twidth: 800px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(0, 102, 204)\n}\n\nbody div {\n\twidth: 400px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(204, 204, 204)\n}\n\nbody footer {\n\twidth: 266px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(255, 51, 0)\n}</pre>\n\n=== Inheritance ===\n\nExample:\n\n<pre>// In the beginning, there was nothing\nvar singularity = {};\n\nvar A = {\n\tbody: {\n\t\tfont: \"12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif\",\n\t\tcolor: '#000'.toRGB()\n\t}\n};\n\nvar B = {\n\theader: {\n\t\th1: {\n\t\t\tfont_size: 24,\n\t\t\tcolor: darken(Hex.random(), 0.3)\n\t\t}\n\t}\n};\n\nnew Style(\n\tsingularity.extend(A, B)\n);</pre>\n\nResult:\n\n<pre>body {\n\tfont: 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tcolor: rgb(0, 0, 0)\n}\n\nheader h1 {\n\tfont-size: 24px;\n\tcolor: #206502\n}</pre>\n\n== Color Functionality ==\n\nColor spaces are interchangeable:\n\n<pre>var color = Hex.random();\n\nconsole.log('INPUT: ' + color.toString());\n\ncolor = new RGB(color);\n\nconsole.log(color.toString());\n\ncolor = new XYZ(color);\n\n// Color spaces NOT supported in CSS have no .toString() method\nconsole.log(color);\n\ncolor = new HSL(color);\n\nconsole.log(color.toString());\n\ncolor = new CIELab(color);\n\nconsole.log(color);\n\ncolor = new RGBA(color);\n\nconsole.log(color.toString());\n\ncolor = new CMYK(color);\n\nconsole.log(color);\n\ncolor = new HSLA(color);\n\nconsole.log(color.toString());\n\n/*\n * NOTE: Due to the precision of the JavaScript number type\n * the output might not be *exactly* equal to the input\n *\n * e.g. #ff3300 => #fe3300\n */\nconsole.log('OUTPUT: ' + color.toHex().toString());</pre>\n\nResult:\n\n<pre>INPUT: #6cb84b\nrgb(108, 184, 75)\nXYZ {X: 24.59483120679862, Y: 37.97712451767409, Z: 12.690646072857769}\nhsl(102, 43%, 51%)\nCIELab {L: 68.00495079484631, a: -43.46726006781837, b: 47.13923110320886}\nrgba(108, 184, 75, 1)\nCMYK {cyan: 0.4130662167488027, magenta: 0, yellow: 0.5923735991444304, key: 0.2784016469309353}\nhsla(102, 43%, 51%, 1)\nOUTPUT: #6cb84b</pre>\n\n=== complement() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + complement(color).toString());</pre>\n\nResult:\n\n<pre>#ff3300 => #00cbff</pre>\n\n=== analogous() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + analogous(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #ff004c,#ffb200</pre>\n\n=== split() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + split(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #004cff,#00ffb2</pre>\n\n=== square() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + square(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #4cff00,#00cbff,#b200ff</pre>\n\n=== triad() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + triad(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #3200ff,#00ff32</pre>\n\n=== tetradic() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + tetradic(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #cbff00,#00cbff,#3200ff</pre>","readmeFilename":"README.mediawiki","_id":"style-js@0.0.15","dist":{"shasum":"7474e9ab215c130517c7616c0a1c38af128fb787","tarball":"https://registry.npmjs.org/style-js/-/style-js-0.0.15.tgz","integrity":"sha512-6ycdvWj5LipSbsKViLxLX1/uRzUCGo3g3ovRY9u6mPU4RvxCXftW0ELjYI09Ma1WC0QHydA/V3vRUB4NBTCDDQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuZln+8XJdtEljAE9dBxyhINvx37za7kl/5k0MuyXMgAIgQFt1Jhj7oBGqLl23L83F+tIHnnkbmKHprTxpRNtTNC4="}]},"_npmVersion":"1.1.65","_npmUser":{"name":"mutatio","email":"martin@mutat.io"},"maintainers":[{"name":"mutatio","email":"martin@mutat.io"}]},"0.0.16":{"name":"style-js","version":"0.0.16","author":{"name":"Martin Gallagher","email":"martin@mutat.io"},"description":"Comprehensive color manipulation classes.","main":"./src/Style.js","repository":{"type":"git","url":"https://github.com/Mutatio/Style.js.git"},"keywords":["style","css","javascript","rgb","rgba","hsv","hsl","hsla","cielab","xyz","color","colour"],"dependencies":{"type-js":"*","util-js":"*"},"readme":"== Style.js ==\n\nAn easy to use JavaScript library providing CSS preprocessing and a myriad of color manipulation functions.\n\n== CSS Preprocessing ==\n\nStyle.js allows developers to utilize the full power of JavaScript to generate CSS.\n\nExample:\n\n<pre>var color = '#06c';\n\nnew Style({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n});</pre>\n\n''Alternative syntax'':\n\n<pre>var color = '#06c';\n\n({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n}.toStyle());</pre>\n\nResult:\n\n<pre>p {\n\tbackground-color: hsla(210, 100%, 40%, 1);\n\tcolor: hsla(30, 100%, 85%, 1);\n\t-webkit-border-radius: 8px;\n\t-moz-border-radius: 8px;\n\tborder-radius: 8px\n}</pre>\n\nAny valid JavaScript code should work. It's easy to mix in your own functionality:\n\n<pre>// Returns a random color with a high red value, as a hex color code\nfunction getRandomRedColor() {\n\t// Generate random RGB color\n\tvar out = RGB.random();\n\n\t// Minimum red value of 180\n\twhile (out.red < 180) {\n\t\tout = RGB.random();\n\t}\n\n\t// Convert to HSL color space\n\tout = new HSL(out);\n\n\t// Adjust the lightness of the color, note: this might reduce the red value\n\tout.lightness = 45;\n\n\t// Return as hexidecimal\n\treturn out.toHex();\n}\n\nnew Style({\n\t'.randomRed': {\n\t\tbackground_color: getRandomRedColor(),\n\t\tcolor: '#fff'\n\t}\n});</pre>\n\nResult:\n\n<pre>.randomRed {\n\tbackground-color: #bd4028;\n\tcolor: #fff\n}</pre>\n\n=== Nested Styles ===\n\nExample:\n\n<pre>new Style({\n\thtml: {\n\t\tbody: {\n\t\t\theader: {\n\t\t\t\tdiv: {\n\t\t\t\t\tul: {\n\t\t\t\t\t\tli: {\n\t\t\t\t\t\t\tp: {\n\t\t\t\t\t\t\t\tcolor: new RGBA(new Hex('#666')),\n\n\t\t\t\t\t\t\t\t'a, strong': {\n\t\t\t\t\t\t\t\t\tfont_weight: 'bold'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tfooter: {\n\t\t\t\t'background-color': new HSL(new Hex('#ccc'))\n\t\t\t}\n\t\t}\n\t}\n});</pre>\n\nResult:\n\n<pre>html body header div ul li p {\n\tcolor: rgba(102, 102, 102, 1)\n}\n\nhtml body header div ul li p a, html body header div ul li p strong {\n\tfont-weight: bold\n}\n\nhtml body footer {\n\tbackground-color: hsl(0, 0%, 80%)\n}</pre>\n\n=== \"Mixins\" ===\n\nExample:\n\n<pre>function myStyle(width, color) {\n\twidth = !width || !Type.isNumber(width) ? 700 : Math.floor(width);\n\n\tif (!Color.isValid(color)) {\n\t\tcolor = Hex.random();\n\t}\n\n\treturn {\n\t\t// Numeric values automatically converted to \"px\" or the unit set by setDefaultUnit()\n\t\twidth: width,\n\t\tmargin: '0 auto',\n\t\ttext_align: 'left',\n\t\tbackground_color: color.toRGB()\n\t};\n}\n\nvar pageWidth = 800;\n\nnew Style({\n\tbody: {\n\t\ttext_align: 'center',\n\n\t\theader: {}.extend(\n\t\t\tmyStyle(pageWidth, '#06c')\n\t\t),\n\n\t\tdiv: {}.extend(\n\t\t\tmyStyle(pageWidth / 2, '#ccc')\n\t\t),\n\n\t\tfooter: {}.extend(\n\t\t\tmyStyle(pageWidth / 3, '#f30')\n\t\t)\n\t}\n});</pre>\n\nResult:\n\n<pre>body {\n\ttext-align: center\n}\n\nbody header {\n\twidth: 800px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(0, 102, 204)\n}\n\nbody div {\n\twidth: 400px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(204, 204, 204)\n}\n\nbody footer {\n\twidth: 266px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(255, 51, 0)\n}</pre>\n\n=== Inheritance ===\n\nExample:\n\n<pre>// In the beginning, there was nothing\nvar singularity = {};\n\nvar A = {\n\tbody: {\n\t\tfont: \"12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif\",\n\t\tcolor: '#000'.toRGB()\n\t}\n};\n\nvar B = {\n\theader: {\n\t\th1: {\n\t\t\tfont_size: 24,\n\t\t\tcolor: darken(Hex.random(), 0.3)\n\t\t}\n\t}\n};\n\nnew Style(\n\tsingularity.extend(A, B)\n);</pre>\n\nResult:\n\n<pre>body {\n\tfont: 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tcolor: rgb(0, 0, 0)\n}\n\nheader h1 {\n\tfont-size: 24px;\n\tcolor: #206502\n}</pre>\n\n== Color Functionality ==\n\nColor spaces are interchangeable:\n\n<pre>var color = Hex.random();\n\nconsole.log('INPUT: ' + color.toString());\n\ncolor = new RGB(color);\n\nconsole.log(color.toString());\n\ncolor = new XYZ(color);\n\n// Color spaces NOT supported in CSS have no .toString() method\nconsole.log(color);\n\ncolor = new HSL(color);\n\nconsole.log(color.toString());\n\ncolor = new CIELab(color);\n\nconsole.log(color);\n\ncolor = new RGBA(color);\n\nconsole.log(color.toString());\n\ncolor = new CMYK(color);\n\nconsole.log(color);\n\ncolor = new HSLA(color);\n\nconsole.log(color.toString());\n\n/*\n * NOTE: Due to the precision of the JavaScript number type\n * the output might not be *exactly* equal to the input\n *\n * e.g. #ff3300 => #fe3300\n */\nconsole.log('OUTPUT: ' + color.toHex().toString());</pre>\n\nResult:\n\n<pre>INPUT: #6cb84b\nrgb(108, 184, 75)\nXYZ {X: 24.59483120679862, Y: 37.97712451767409, Z: 12.690646072857769}\nhsl(102, 43%, 51%)\nCIELab {L: 68.00495079484631, a: -43.46726006781837, b: 47.13923110320886}\nrgba(108, 184, 75, 1)\nCMYK {cyan: 0.4130662167488027, magenta: 0, yellow: 0.5923735991444304, key: 0.2784016469309353}\nhsla(102, 43%, 51%, 1)\nOUTPUT: #6cb84b</pre>\n\n=== complement() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + complement(color).toString());</pre>\n\nResult:\n\n<pre>#ff3300 => #00cbff</pre>\n\n=== analogous() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + analogous(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #ff004c,#ffb200</pre>\n\n=== split() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + split(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #004cff,#00ffb2</pre>\n\n=== square() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + square(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #4cff00,#00cbff,#b200ff</pre>\n\n=== triad() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + triad(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #3200ff,#00ff32</pre>\n\n=== tetradic() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + tetradic(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #cbff00,#00cbff,#3200ff</pre>","readmeFilename":"README.mediawiki","_id":"style-js@0.0.16","dist":{"shasum":"c9bfae93bfe9cf2e1065234471341232352862eb","tarball":"https://registry.npmjs.org/style-js/-/style-js-0.0.16.tgz","integrity":"sha512-r87FfCLoPvd6CMXpDts+y0bZIi1fpoUvpEftpDDAqiGp4x6AU6EIDt9AhG8+hwduZUBuj85xv8qoANqq+sGrdA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICfR1RWQsdW2RBfjmBJlLUYus4Ti2iENYAHShSkxWrZeAiA8WQD3KN/hfzuHynWdF0F8tmBtbmOIUY9V9KlUzdb9Mg=="}]},"_npmVersion":"1.1.65","_npmUser":{"name":"mutatio","email":"martin@mutat.io"},"maintainers":[{"name":"mutatio","email":"martin@mutat.io"}]},"0.0.17":{"name":"style-js","version":"0.0.17","author":{"name":"Martin Gallagher","email":"martin@mutat.io"},"description":"Comprehensive color manipulation classes.","main":"./src/Style.js","repository":{"type":"git","url":"https://github.com/Mutatio/Style.js.git"},"keywords":["style","css","javascript","rgb","rgba","hsv","hsl","hsla","cielab","xyz","color","colour"],"dependencies":{"type-js":"*","util-js":"*"},"readme":"== Style.js ==\n\nAn easy to use JavaScript library providing CSS preprocessing and a myriad of color manipulation functions.\n\n== CSS Preprocessing ==\n\nStyle.js allows developers to utilize the full power of JavaScript to generate CSS.\n\nExample:\n\n<pre>var color = '#06c';\n\nnew Style({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n});</pre>\n\n''Alternative syntax'':\n\n<pre>var color = '#06c';\n\n({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n}.toStyle());</pre>\n\nResult:\n\n<pre>p {\n\tbackground-color: hsla(210, 100%, 40%, 1);\n\tcolor: hsla(30, 100%, 85%, 1);\n\t-webkit-border-radius: 8px;\n\t-moz-border-radius: 8px;\n\tborder-radius: 8px\n}</pre>\n\nAny valid JavaScript code should work. It's easy to mix in your own functionality:\n\n<pre>// Returns a random color with a high red value, as a hex color code\nfunction getRandomRedColor() {\n\t// Generate random RGB color\n\tvar out = RGB.random();\n\n\t// Minimum red value of 180\n\twhile (out.red < 180) {\n\t\tout = RGB.random();\n\t}\n\n\t// Convert to HSL color space\n\tout = new HSL(out);\n\n\t// Adjust the lightness of the color, note: this might reduce the red value\n\tout.lightness = 45;\n\n\t// Return as hexidecimal\n\treturn out.toHex();\n}\n\nnew Style({\n\t'.randomRed': {\n\t\tbackground_color: getRandomRedColor(),\n\t\tcolor: '#fff'\n\t}\n});</pre>\n\nResult:\n\n<pre>.randomRed {\n\tbackground-color: #bd4028;\n\tcolor: #fff\n}</pre>\n\n=== Nested Styles ===\n\nExample:\n\n<pre>new Style({\n\thtml: {\n\t\tbody: {\n\t\t\theader: {\n\t\t\t\tdiv: {\n\t\t\t\t\tul: {\n\t\t\t\t\t\tli: {\n\t\t\t\t\t\t\tp: {\n\t\t\t\t\t\t\t\tcolor: new RGBA(new Hex('#666')),\n\n\t\t\t\t\t\t\t\t'a, strong': {\n\t\t\t\t\t\t\t\t\tfont_weight: 'bold'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tfooter: {\n\t\t\t\t'background-color': new HSL(new Hex('#ccc'))\n\t\t\t}\n\t\t}\n\t}\n});</pre>\n\nResult:\n\n<pre>html body header div ul li p {\n\tcolor: rgba(102, 102, 102, 1)\n}\n\nhtml body header div ul li p a, html body header div ul li p strong {\n\tfont-weight: bold\n}\n\nhtml body footer {\n\tbackground-color: hsl(0, 0%, 80%)\n}</pre>\n\n=== \"Mixins\" ===\n\nExample:\n\n<pre>function myStyle(width, color) {\n\twidth = !width || !Type.isNumber(width) ? 700 : Math.floor(width);\n\n\tif (!Color.isValid(color)) {\n\t\tcolor = Hex.random();\n\t}\n\n\treturn {\n\t\t// Numeric values automatically converted to \"px\" or the unit set by setDefaultUnit()\n\t\twidth: width,\n\t\tmargin: '0 auto',\n\t\ttext_align: 'left',\n\t\tbackground_color: color.toRGB()\n\t};\n}\n\nvar pageWidth = 800;\n\nnew Style({\n\tbody: {\n\t\ttext_align: 'center',\n\n\t\theader: {}.extend(\n\t\t\tmyStyle(pageWidth, '#06c')\n\t\t),\n\n\t\tdiv: {}.extend(\n\t\t\tmyStyle(pageWidth / 2, '#ccc')\n\t\t),\n\n\t\tfooter: {}.extend(\n\t\t\tmyStyle(pageWidth / 3, '#f30')\n\t\t)\n\t}\n});</pre>\n\nResult:\n\n<pre>body {\n\ttext-align: center\n}\n\nbody header {\n\twidth: 800px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(0, 102, 204)\n}\n\nbody div {\n\twidth: 400px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(204, 204, 204)\n}\n\nbody footer {\n\twidth: 266px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(255, 51, 0)\n}</pre>\n\n=== Inheritance ===\n\nExample:\n\n<pre>// In the beginning, there was nothing\nvar singularity = {};\n\nvar A = {\n\tbody: {\n\t\tfont: \"12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif\",\n\t\tcolor: '#000'.toRGB()\n\t}\n};\n\nvar B = {\n\theader: {\n\t\th1: {\n\t\t\tfont_size: 24,\n\t\t\tcolor: darken(Hex.random(), 0.3)\n\t\t}\n\t}\n};\n\nnew Style(\n\tsingularity.extend(A, B)\n);</pre>\n\nResult:\n\n<pre>body {\n\tfont: 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tcolor: rgb(0, 0, 0)\n}\n\nheader h1 {\n\tfont-size: 24px;\n\tcolor: #206502\n}</pre>\n\n== Color Functionality ==\n\nColor spaces are interchangeable:\n\n<pre>var color = Hex.random();\n\nconsole.log('INPUT: ' + color.toString());\n\ncolor = new RGB(color);\n\nconsole.log(color.toString());\n\ncolor = new XYZ(color);\n\n// Color spaces NOT supported in CSS have no .toString() method\nconsole.log(color);\n\ncolor = new HSL(color);\n\nconsole.log(color.toString());\n\ncolor = new CIELab(color);\n\nconsole.log(color);\n\ncolor = new RGBA(color);\n\nconsole.log(color.toString());\n\ncolor = new CMYK(color);\n\nconsole.log(color);\n\ncolor = new HSLA(color);\n\nconsole.log(color.toString());\n\n/*\n * NOTE: Due to the precision of the JavaScript number type\n * the output might not be *exactly* equal to the input\n *\n * e.g. #ff3300 => #fe3300\n */\nconsole.log('OUTPUT: ' + color.toHex().toString());</pre>\n\nResult:\n\n<pre>INPUT: #6cb84b\nrgb(108, 184, 75)\nXYZ {X: 24.59483120679862, Y: 37.97712451767409, Z: 12.690646072857769}\nhsl(102, 43%, 51%)\nCIELab {L: 68.00495079484631, a: -43.46726006781837, b: 47.13923110320886}\nrgba(108, 184, 75, 1)\nCMYK {cyan: 0.4130662167488027, magenta: 0, yellow: 0.5923735991444304, key: 0.2784016469309353}\nhsla(102, 43%, 51%, 1)\nOUTPUT: #6cb84b</pre>\n\n=== complement() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + complement(color).toString());</pre>\n\nResult:\n\n<pre>#ff3300 => #00cbff</pre>\n\n=== analogous() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + analogous(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #ff004c,#ffb200</pre>\n\n=== split() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + split(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #004cff,#00ffb2</pre>\n\n=== square() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + square(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #4cff00,#00cbff,#b200ff</pre>\n\n=== triad() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + triad(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #3200ff,#00ff32</pre>\n\n=== tetradic() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + tetradic(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #cbff00,#00cbff,#3200ff</pre>","readmeFilename":"README.mediawiki","_id":"style-js@0.0.17","dist":{"shasum":"1da6b241ebe65de46dd24bddcedccb2cd1e8ec97","tarball":"https://registry.npmjs.org/style-js/-/style-js-0.0.17.tgz","integrity":"sha512-Rd7GyL7oTtbrDS+gKmRBA5LkQHtoKDNP0a1VzlT8nsiqtdBiO4JjJcTzgVa8Hjfrhg1Ime6BzSD3WbwuqwUMcQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEhGvN3iHeI8bvBDJ2QAddqAFzJwKJevmW4KanOzOQ2gAiADXs4ifcHiBcmUCYu/dJNGM8KkpD61z+SJ/CMjGO5jSw=="}]},"_npmVersion":"1.1.65","_npmUser":{"name":"mutatio","email":"martin@mutat.io"},"maintainers":[{"name":"mutatio","email":"martin@mutat.io"}]},"0.0.18":{"name":"style-js","version":"0.0.18","author":{"name":"Martin Gallagher","email":"martin@mutat.io"},"description":"Comprehensive color manipulation classes.","main":"./src/Style.js","repository":{"type":"git","url":"https://github.com/Mutatio/Style.js.git"},"keywords":["style","css","javascript","rgb","rgba","hsv","hsl","hsla","cielab","xyz","color","colour"],"dependencies":{"type-js":"*","util-js":"*"},"readme":"== Style.js ==\n\nAn easy to use JavaScript library providing CSS preprocessing and a myriad of color manipulation functions.\n\n== CSS Preprocessing ==\n\nStyle.js allows developers to utilize the full power of JavaScript to generate CSS.\n\nExample:\n\n<pre>var color = '#06c';\n\nnew Style({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n});</pre>\n\n''Alternative syntax'':\n\n<pre>var color = '#06c';\n\n({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n}.toStyle());</pre>\n\nResult:\n\n<pre>p {\n\tbackground-color: hsla(210, 100%, 40%, 1);\n\tcolor: hsla(30, 100%, 85%, 1);\n\t-webkit-border-radius: 8px;\n\t-moz-border-radius: 8px;\n\tborder-radius: 8px\n}</pre>\n\nAny valid JavaScript code should work. It's easy to mix in your own functionality:\n\n<pre>// Returns a random color with a high red value, as a hex color code\nfunction getRandomRedColor() {\n\t// Generate random RGB color\n\tvar out = RGB.random();\n\n\t// Minimum red value of 180\n\twhile (out.red < 180) {\n\t\tout = RGB.random();\n\t}\n\n\t// Convert to HSL color space\n\tout = new HSL(out);\n\n\t// Adjust the lightness of the color, note: this might reduce the red value\n\tout.lightness = 45;\n\n\t// Return as hexidecimal\n\treturn out.toHex();\n}\n\nnew Style({\n\t'.randomRed': {\n\t\tbackground_color: getRandomRedColor(),\n\t\tcolor: '#fff'\n\t}\n});</pre>\n\nResult:\n\n<pre>.randomRed {\n\tbackground-color: #bd4028;\n\tcolor: #fff\n}</pre>\n\n=== Nested Styles ===\n\nExample:\n\n<pre>new Style({\n\thtml: {\n\t\tbody: {\n\t\t\theader: {\n\t\t\t\tdiv: {\n\t\t\t\t\tul: {\n\t\t\t\t\t\tli: {\n\t\t\t\t\t\t\tp: {\n\t\t\t\t\t\t\t\tcolor: new RGBA(new Hex('#666')),\n\n\t\t\t\t\t\t\t\t'a, strong': {\n\t\t\t\t\t\t\t\t\tfont_weight: 'bold'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tfooter: {\n\t\t\t\t'background-color': new HSL(new Hex('#ccc'))\n\t\t\t}\n\t\t}\n\t}\n});</pre>\n\nResult:\n\n<pre>html body header div ul li p {\n\tcolor: rgba(102, 102, 102, 1)\n}\n\nhtml body header div ul li p a, html body header div ul li p strong {\n\tfont-weight: bold\n}\n\nhtml body footer {\n\tbackground-color: hsl(0, 0%, 80%)\n}</pre>\n\n=== \"Mixins\" ===\n\nExample:\n\n<pre>function myStyle(width, color) {\n\twidth = !width || !Type.isNumber(width) ? 700 : Math.floor(width);\n\n\tif (!Color.isValid(color)) {\n\t\tcolor = Hex.random();\n\t}\n\n\treturn {\n\t\t// Numeric values automatically converted to \"px\" or the unit set by setDefaultUnit()\n\t\twidth: width,\n\t\tmargin: '0 auto',\n\t\ttext_align: 'left',\n\t\tbackground_color: color.toRGB()\n\t};\n}\n\nvar pageWidth = 800;\n\nnew Style({\n\tbody: {\n\t\ttext_align: 'center',\n\n\t\theader: {}.extend(\n\t\t\tmyStyle(pageWidth, '#06c')\n\t\t),\n\n\t\tdiv: {}.extend(\n\t\t\tmyStyle(pageWidth / 2, '#ccc')\n\t\t),\n\n\t\tfooter: {}.extend(\n\t\t\tmyStyle(pageWidth / 3, '#f30')\n\t\t)\n\t}\n});</pre>\n\nResult:\n\n<pre>body {\n\ttext-align: center\n}\n\nbody header {\n\twidth: 800px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(0, 102, 204)\n}\n\nbody div {\n\twidth: 400px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(204, 204, 204)\n}\n\nbody footer {\n\twidth: 266px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(255, 51, 0)\n}</pre>\n\n=== Inheritance ===\n\nExample:\n\n<pre>// In the beginning, there was nothing\nvar singularity = {};\n\nvar A = {\n\tbody: {\n\t\tfont: \"12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif\",\n\t\tcolor: '#000'.toRGB()\n\t}\n};\n\nvar B = {\n\theader: {\n\t\th1: {\n\t\t\tfont_size: 24,\n\t\t\tcolor: darken(Hex.random(), 0.3)\n\t\t}\n\t}\n};\n\nnew Style(\n\tsingularity.extend(A, B)\n);</pre>\n\nResult:\n\n<pre>body {\n\tfont: 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tcolor: rgb(0, 0, 0)\n}\n\nheader h1 {\n\tfont-size: 24px;\n\tcolor: #206502\n}</pre>\n\n== Color Functionality ==\n\nColor spaces are interchangeable:\n\n<pre>var color = Hex.random();\n\nconsole.log('INPUT: ' + color.toString());\n\ncolor = new RGB(color);\n\nconsole.log(color.toString());\n\ncolor = new XYZ(color);\n\n// Color spaces NOT supported in CSS have no .toString() method\nconsole.log(color);\n\ncolor = new HSL(color);\n\nconsole.log(color.toString());\n\ncolor = new CIELab(color);\n\nconsole.log(color);\n\ncolor = new RGBA(color);\n\nconsole.log(color.toString());\n\ncolor = new CMYK(color);\n\nconsole.log(color);\n\ncolor = new HSLA(color);\n\nconsole.log(color.toString());\n\n/*\n * NOTE: Due to the precision of the JavaScript number type\n * the output might not be *exactly* equal to the input\n *\n * e.g. #ff3300 => #fe3300\n */\nconsole.log('OUTPUT: ' + color.toHex().toString());</pre>\n\nResult:\n\n<pre>INPUT: #6cb84b\nrgb(108, 184, 75)\nXYZ {X: 24.59483120679862, Y: 37.97712451767409, Z: 12.690646072857769}\nhsl(102, 43%, 51%)\nCIELab {L: 68.00495079484631, a: -43.46726006781837, b: 47.13923110320886}\nrgba(108, 184, 75, 1)\nCMYK {cyan: 0.4130662167488027, magenta: 0, yellow: 0.5923735991444304, key: 0.2784016469309353}\nhsla(102, 43%, 51%, 1)\nOUTPUT: #6cb84b</pre>\n\n=== complement() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + complement(color).toString());</pre>\n\nResult:\n\n<pre>#ff3300 => #00cbff</pre>\n\n=== analogous() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + analogous(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #ff004c,#ffb200</pre>\n\n=== split() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + split(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #004cff,#00ffb2</pre>\n\n=== square() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + square(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #4cff00,#00cbff,#b200ff</pre>\n\n=== triad() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + triad(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #3200ff,#00ff32</pre>\n\n=== tetradic() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + tetradic(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #cbff00,#00cbff,#3200ff</pre>","readmeFilename":"README.mediawiki","_id":"style-js@0.0.18","dist":{"shasum":"9452468b1e4c41a1b2542f8c160b18dda2c2e972","tarball":"https://registry.npmjs.org/style-js/-/style-js-0.0.18.tgz","integrity":"sha512-GnLJqpPg/W2q9o/3ve1N2P8WBkrQwD4FHhji5LYyGk4WWlDtwV/A0LPJe/Kat9YaAcdY4FZf3Yf57TvRFLhh8g==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmiNizKYtTfJjWUjE7BGp3DZLFpTzLPpR+6xvw9E8GcAIgRi2AKn7YABU262qJPo0/KKQRq9gAtzdYMfLvXMhDkdg="}]},"_npmVersion":"1.1.65","_npmUser":{"name":"mutatio","email":"martin@mutat.io"},"maintainers":[{"name":"mutatio","email":"martin@mutat.io"}]},"0.0.19":{"name":"style-js","version":"0.0.19","author":{"name":"Martin Gallagher","email":"martin@mutat.io"},"description":"Comprehensive color manipulation classes.","main":"./src/Style.js","repository":{"type":"git","url":"https://github.com/Mutatio/Style.js.git"},"keywords":["style","css","javascript","rgb","rgba","hsv","hsl","hsla","cielab","xyz","color","colour"],"dependencies":{"type-js":"*","util-js":"*"},"readme":"== Style.js ==\n\nAn easy to use JavaScript library providing CSS preprocessing and a myriad of color manipulation functions.\n\n== CSS Preprocessing ==\n\nStyle.js allows developers to utilize the full power of JavaScript to generate CSS.\n\nExample:\n\n<pre>var color = '#06c';\n\nnew Style({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n});</pre>\n\n''Alternative syntax'':\n\n<pre>var color = '#06c';\n\n({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n}.toStyle());</pre>\n\nResult:\n\n<pre>p {\n\tbackground-color: hsla(210, 100%, 40%, 1);\n\tcolor: hsla(30, 100%, 85%, 1);\n\t-webkit-border-radius: 8px;\n\t-moz-border-radius: 8px;\n\tborder-radius: 8px\n}</pre>\n\nAny valid JavaScript code should work. It's easy to mix in your own functionality:\n\n<pre>// Returns a random color with a high red value, as a hex color code\nfunction getRandomRedColor() {\n\t// Generate random RGB color\n\tvar out = RGB.random();\n\n\t// Minimum red value of 180\n\twhile (out.red < 180) {\n\t\tout = RGB.random();\n\t}\n\n\t// Convert to HSL color space\n\tout = new HSL(out);\n\n\t// Adjust the lightness of the color, note: this might reduce the red value\n\tout.lightness = 45;\n\n\t// Return as hexidecimal\n\treturn out.toHex();\n}\n\nnew Style({\n\t'.randomRed': {\n\t\tbackground_color: getRandomRedColor(),\n\t\tcolor: '#fff'\n\t}\n});</pre>\n\nResult:\n\n<pre>.randomRed {\n\tbackground-color: #bd4028;\n\tcolor: #fff\n}</pre>\n\n=== Nested Styles ===\n\nExample:\n\n<pre>new Style({\n\thtml: {\n\t\tbody: {\n\t\t\theader: {\n\t\t\t\tdiv: {\n\t\t\t\t\tul: {\n\t\t\t\t\t\tli: {\n\t\t\t\t\t\t\tp: {\n\t\t\t\t\t\t\t\tcolor: new RGBA(new Hex('#666')),\n\n\t\t\t\t\t\t\t\t'a, strong': {\n\t\t\t\t\t\t\t\t\tfont_weight: 'bold'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tfooter: {\n\t\t\t\t'background-color': new HSL(new Hex('#ccc'))\n\t\t\t}\n\t\t}\n\t}\n});</pre>\n\nResult:\n\n<pre>html body header div ul li p {\n\tcolor: rgba(102, 102, 102, 1)\n}\n\nhtml body header div ul li p a, html body header div ul li p strong {\n\tfont-weight: bold\n}\n\nhtml body footer {\n\tbackground-color: hsl(0, 0%, 80%)\n}</pre>\n\n=== \"Mixins\" ===\n\nExample:\n\n<pre>function myStyle(width, color) {\n\twidth = !width || !Type.isNumber(width) ? 700 : Math.floor(width);\n\n\tif (!Color.isValid(color)) {\n\t\tcolor = Hex.random();\n\t}\n\n\treturn {\n\t\t// Numeric values automatically converted to \"px\" or the unit set by setDefaultUnit()\n\t\twidth: width,\n\t\tmargin: '0 auto',\n\t\ttext_align: 'left',\n\t\tbackground_color: color.toRGB()\n\t};\n}\n\nvar pageWidth = 800;\n\nnew Style({\n\tbody: {\n\t\ttext_align: 'center',\n\n\t\theader: {}.extend(\n\t\t\tmyStyle(pageWidth, '#06c')\n\t\t),\n\n\t\tdiv: {}.extend(\n\t\t\tmyStyle(pageWidth / 2, '#ccc')\n\t\t),\n\n\t\tfooter: {}.extend(\n\t\t\tmyStyle(pageWidth / 3, '#f30')\n\t\t)\n\t}\n});</pre>\n\nResult:\n\n<pre>body {\n\ttext-align: center\n}\n\nbody header {\n\twidth: 800px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(0, 102, 204)\n}\n\nbody div {\n\twidth: 400px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(204, 204, 204)\n}\n\nbody footer {\n\twidth: 266px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(255, 51, 0)\n}</pre>\n\n=== Inheritance ===\n\nExample:\n\n<pre>// In the beginning, there was nothing\nvar singularity = {};\n\nvar A = {\n\tbody: {\n\t\tfont: \"12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif\",\n\t\tcolor: '#000'.toRGB()\n\t}\n};\n\nvar B = {\n\theader: {\n\t\th1: {\n\t\t\tfont_size: 24,\n\t\t\tcolor: darken(Hex.random(), 0.3)\n\t\t}\n\t}\n};\n\nnew Style(\n\tsingularity.extend(A, B)\n);</pre>\n\nResult:\n\n<pre>body {\n\tfont: 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tcolor: rgb(0, 0, 0)\n}\n\nheader h1 {\n\tfont-size: 24px;\n\tcolor: #206502\n}</pre>\n\n== Color Functionality ==\n\nColor spaces are interchangeable:\n\n<pre>var color = Hex.random();\n\nconsole.log('INPUT: ' + color.toString());\n\ncolor = new RGB(color);\n\nconsole.log(color.toString());\n\ncolor = new XYZ(color);\n\n// Color spaces NOT supported in CSS have no .toString() method\nconsole.log(color);\n\ncolor = new HSL(color);\n\nconsole.log(color.toString());\n\ncolor = new CIELab(color);\n\nconsole.log(color);\n\ncolor = new RGBA(color);\n\nconsole.log(color.toString());\n\ncolor = new CMYK(color);\n\nconsole.log(color);\n\ncolor = new HSLA(color);\n\nconsole.log(color.toString());\n\n/*\n * NOTE: Due to the precision of the JavaScript number type\n * the output might not be *exactly* equal to the input\n *\n * e.g. #ff3300 => #fe3300\n */\nconsole.log('OUTPUT: ' + color.toHex().toString());</pre>\n\nResult:\n\n<pre>INPUT: #6cb84b\nrgb(108, 184, 75)\nXYZ {X: 24.59483120679862, Y: 37.97712451767409, Z: 12.690646072857769}\nhsl(102, 43%, 51%)\nCIELab {L: 68.00495079484631, a: -43.46726006781837, b: 47.13923110320886}\nrgba(108, 184, 75, 1)\nCMYK {cyan: 0.4130662167488027, magenta: 0, yellow: 0.5923735991444304, key: 0.2784016469309353}\nhsla(102, 43%, 51%, 1)\nOUTPUT: #6cb84b</pre>\n\n=== complement() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + complement(color).toString());</pre>\n\nResult:\n\n<pre>#ff3300 => #00cbff</pre>\n\n=== analogous() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + analogous(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #ff004c,#ffb200</pre>\n\n=== split() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + split(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #004cff,#00ffb2</pre>\n\n=== square() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + square(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #4cff00,#00cbff,#b200ff</pre>\n\n=== triad() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + triad(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #3200ff,#00ff32</pre>\n\n=== tetradic() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + tetradic(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #cbff00,#00cbff,#3200ff</pre>","readmeFilename":"README.mediawiki","_id":"style-js@0.0.19","dist":{"shasum":"2fb719d219df972a11508a29338777caa81a24c7","tarball":"https://registry.npmjs.org/style-js/-/style-js-0.0.19.tgz","integrity":"sha512-nxLBXqOekS235iPEHok3RR7x9hz/GoJ04dDnW4c8uQhG4+HuYGpqybx0F2eRVgrV6PT4JMz0Z4pap2eINXZBCQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID7h2RuiQtz2OejJnyASfRnEcgcpHrtlneVehf1jHcvWAiB3WjID5Ea43x4dY4gN0mvZ85qlGbZD1QlFi6zSzfxX8g=="}]},"_npmVersion":"1.1.65","_npmUser":{"name":"mutatio","email":"martin@mutat.io"},"maintainers":[{"name":"mutatio","email":"martin@mutat.io"}]},"0.0.20":{"name":"style-js","version":"0.0.20","author":{"name":"Martin Gallagher","email":"martin@mutat.io"},"description":"Comprehensive color manipulation classes.","main":"./src/Style.js","repository":{"type":"git","url":"https://github.com/Mutatio/Style.js.git"},"keywords":["style","css","javascript","rgb","rgba","hsv","hsl","hsla","cielab","xyz","color","colour"],"dependencies":{"type-js":"*","util-js":"*"},"readme":"== Style.js ==\n\nAn easy to use JavaScript library providing CSS preprocessing and a myriad of color manipulation functions.\n\n== CSS Preprocessing ==\n\nStyle.js allows developers to utilize the full power of JavaScript to generate CSS.\n\nExample:\n\n<pre>var color = '#06c';\n\nnew Style({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n});</pre>\n\n''Alternative syntax'':\n\n<pre>var color = '#06c';\n\n({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n}.toStyle());</pre>\n\nResult:\n\n<pre>p {\n\tbackground-color: hsla(210, 100%, 40%, 1);\n\tcolor: hsla(30, 100%, 85%, 1);\n\t-webkit-border-radius: 8px;\n\t-moz-border-radius: 8px;\n\tborder-radius: 8px\n}</pre>\n\nAny valid JavaScript code should work. It's easy to mix in your own functionality:\n\n<pre>// Returns a random color with a high red value, as a hex color code\nfunction getRandomRedColor() {\n\t// Generate random RGB color\n\tvar out = RGB.random();\n\n\t// Minimum red value of 180\n\twhile (out.red < 180) {\n\t\tout = RGB.random();\n\t}\n\n\t// Convert to HSL color space\n\tout = new HSL(out);\n\n\t// Adjust the lightness of the color, note: this might reduce the red value\n\tout.lightness = 45;\n\n\t// Return as hexidecimal\n\treturn out.toHex();\n}\n\nnew Style({\n\t'.randomRed': {\n\t\tbackground_color: getRandomRedColor(),\n\t\tcolor: '#fff'\n\t}\n});</pre>\n\nResult:\n\n<pre>.randomRed {\n\tbackground-color: #bd4028;\n\tcolor: #fff\n}</pre>\n\n=== Nested Styles ===\n\nExample:\n\n<pre>new Style({\n\thtml: {\n\t\tbody: {\n\t\t\theader: {\n\t\t\t\tdiv: {\n\t\t\t\t\tul: {\n\t\t\t\t\t\tli: {\n\t\t\t\t\t\t\tp: {\n\t\t\t\t\t\t\t\tcolor: new RGBA(new Hex('#666')),\n\n\t\t\t\t\t\t\t\t'a, strong': {\n\t\t\t\t\t\t\t\t\tfont_weight: 'bold'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tfooter: {\n\t\t\t\t'background-color': new HSL(new Hex('#ccc'))\n\t\t\t}\n\t\t}\n\t}\n});</pre>\n\nResult:\n\n<pre>html body header div ul li p {\n\tcolor: rgba(102, 102, 102, 1)\n}\n\nhtml body header div ul li p a, html body header div ul li p strong {\n\tfont-weight: bold\n}\n\nhtml body footer {\n\tbackground-color: hsl(0, 0%, 80%)\n}</pre>\n\n=== \"Mixins\" ===\n\nExample:\n\n<pre>function myStyle(width, color) {\n\twidth = !width || !Type.isNumber(width) ? 700 : Math.floor(width);\n\n\tif (!Color.isValid(color)) {\n\t\tcolor = Hex.random();\n\t}\n\n\treturn {\n\t\t// Numeric values automatically converted to \"px\" or the unit set by setDefaultUnit()\n\t\twidth: width,\n\t\tmargin: '0 auto',\n\t\ttext_align: 'left',\n\t\tbackground_color: color.toRGB()\n\t};\n}\n\nvar pageWidth = 800;\n\nnew Style({\n\tbody: {\n\t\ttext_align: 'center',\n\n\t\theader: {}.extend(\n\t\t\tmyStyle(pageWidth, '#06c')\n\t\t),\n\n\t\tdiv: {}.extend(\n\t\t\tmyStyle(pageWidth / 2, '#ccc')\n\t\t),\n\n\t\tfooter: {}.extend(\n\t\t\tmyStyle(pageWidth / 3, '#f30')\n\t\t)\n\t}\n});</pre>\n\nResult:\n\n<pre>body {\n\ttext-align: center\n}\n\nbody header {\n\twidth: 800px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(0, 102, 204)\n}\n\nbody div {\n\twidth: 400px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(204, 204, 204)\n}\n\nbody footer {\n\twidth: 266px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(255, 51, 0)\n}</pre>\n\n=== Inheritance ===\n\nExample:\n\n<pre>// In the beginning, there was nothing\nvar singularity = {};\n\nvar A = {\n\tbody: {\n\t\tfont: \"12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif\",\n\t\tcolor: '#000'.toRGB()\n\t}\n};\n\nvar B = {\n\theader: {\n\t\th1: {\n\t\t\tfont_size: 24,\n\t\t\tcolor: darken(Hex.random(), 0.3)\n\t\t}\n\t}\n};\n\nnew Style(\n\tsingularity.extend(A, B)\n);</pre>\n\nResult:\n\n<pre>body {\n\tfont: 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tcolor: rgb(0, 0, 0)\n}\n\nheader h1 {\n\tfont-size: 24px;\n\tcolor: #206502\n}</pre>\n\n== Color Functionality ==\n\nColor spaces are interchangeable:\n\n<pre>var color = Hex.random();\n\nconsole.log('INPUT: ' + color.toString());\n\ncolor = new RGB(color);\n\nconsole.log(color.toString());\n\ncolor = new XYZ(color);\n\n// Color spaces NOT supported in CSS have no .toString() method\nconsole.log(color);\n\ncolor = new HSL(color);\n\nconsole.log(color.toString());\n\ncolor = new CIELab(color);\n\nconsole.log(color);\n\ncolor = new RGBA(color);\n\nconsole.log(color.toString());\n\ncolor = new CMYK(color);\n\nconsole.log(color);\n\ncolor = new HSLA(color);\n\nconsole.log(color.toString());\n\n/*\n * NOTE: Due to the precision of the JavaScript number type\n * the output might not be *exactly* equal to the input\n *\n * e.g. #ff3300 => #fe3300\n */\nconsole.log('OUTPUT: ' + color.toHex().toString());</pre>\n\nResult:\n\n<pre>INPUT: #6cb84b\nrgb(108, 184, 75)\nXYZ {X: 24.59483120679862, Y: 37.97712451767409, Z: 12.690646072857769}\nhsl(102, 43%, 51%)\nCIELab {L: 68.00495079484631, a: -43.46726006781837, b: 47.13923110320886}\nrgba(108, 184, 75, 1)\nCMYK {cyan: 0.4130662167488027, magenta: 0, yellow: 0.5923735991444304, key: 0.2784016469309353}\nhsla(102, 43%, 51%, 1)\nOUTPUT: #6cb84b</pre>\n\n=== complement() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + complement(color).toString());</pre>\n\nResult:\n\n<pre>#ff3300 => #00cbff</pre>\n\n=== analogous() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + analogous(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #ff004c,#ffb200</pre>\n\n=== split() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + split(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #004cff,#00ffb2</pre>\n\n=== square() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + square(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #4cff00,#00cbff,#b200ff</pre>\n\n=== triad() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + triad(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #3200ff,#00ff32</pre>\n\n=== tetradic() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + tetradic(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #cbff00,#00cbff,#3200ff</pre>","readmeFilename":"README.mediawiki","_id":"style-js@0.0.20","dist":{"shasum":"8bb61bcad61ff8c313458ad55369b3c660e2039b","tarball":"https://registry.npmjs.org/style-js/-/style-js-0.0.20.tgz","integrity":"sha512-tHR8jFDvtp/CDan+8JFUukSMyUEdd+5DgktD//RGXYY3RR/bFIFTYa9FGBMvHDQ1Y3yqJMOYwIaFvX+MVgWLhg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrc4J0YqKCtq8giZZvtEi8VjanpnZpMd255BBjWAR0ZgIgC9WWP3JBix2KaTxbV24Qbn/tUcRQTi3jv6LXeO4ByoA="}]},"_npmVersion":"1.1.65","_npmUser":{"name":"mutatio","email":"martin@mutat.io"},"maintainers":[{"name":"mutatio","email":"martin@mutat.io"}]},"0.0.21":{"name":"style-js","version":"0.0.21","author":{"name":"Martin Gallagher","email":"martin@mutat.io"},"description":"Comprehensive color manipulation classes.","main":"./src/Style.js","repository":{"type":"git","url":"https://github.com/Mutatio/Style.js.git"},"keywords":["style","css","javascript","rgb","rgba","hsv","hsl","hsla","cielab","xyz","color","colour"],"dependencies":{"type-js":"*","util-js":"*"},"readme":"== Style.js ==\n\nAn easy to use JavaScript library providing CSS preprocessing and a myriad of color manipulation functions.\n\n== CSS Preprocessing ==\n\nStyle.js allows developers to utilize the full power of JavaScript to generate CSS.\n\nExample:\n\n<pre>var color = '#06c';\n\nnew Style({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n});</pre>\n\n''Alternative syntax'':\n\n<pre>var color = '#06c';\n\n({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n}.toStyle());</pre>\n\nResult:\n\n<pre>p {\n\tbackground-color: hsla(210, 100%, 40%, 1);\n\tcolor: hsla(30, 100%, 85%, 1);\n\t-webkit-border-radius: 8px;\n\t-moz-border-radius: 8px;\n\tborder-radius: 8px\n}</pre>\n\nAny valid JavaScript code should work. It's easy to mix in your own functionality:\n\n<pre>// Returns a random color with a high red value, as a hex color code\nfunction getRandomRedColor() {\n\t// Generate random RGB color\n\tvar out = RGB.random();\n\n\t// Minimum red value of 180\n\twhile (out.red < 180) {\n\t\tout = RGB.random();\n\t}\n\n\t// Convert to HSL color space\n\tout = new HSL(out);\n\n\t// Adjust the lightness of the color, note: this might reduce the red value\n\tout.lightness = 45;\n\n\t// Return as hexidecimal\n\treturn out.toHex();\n}\n\nnew Style({\n\t'.randomRed': {\n\t\tbackground_color: getRandomRedColor(),\n\t\tcolor: '#fff'\n\t}\n});</pre>\n\nResult:\n\n<pre>.randomRed {\n\tbackground-color: #bd4028;\n\tcolor: #fff\n}</pre>\n\n=== Nested Styles ===\n\nExample:\n\n<pre>new Style({\n\thtml: {\n\t\tbody: {\n\t\t\theader: {\n\t\t\t\tdiv: {\n\t\t\t\t\tul: {\n\t\t\t\t\t\tli: {\n\t\t\t\t\t\t\tp: {\n\t\t\t\t\t\t\t\tcolor: new RGBA(new Hex('#666')),\n\n\t\t\t\t\t\t\t\t'a, strong': {\n\t\t\t\t\t\t\t\t\tfont_weight: 'bold'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tfooter: {\n\t\t\t\t'background-color': new HSL(new Hex('#ccc'))\n\t\t\t}\n\t\t}\n\t}\n});</pre>\n\nResult:\n\n<pre>html body header div ul li p {\n\tcolor: rgba(102, 102, 102, 1)\n}\n\nhtml body header div ul li p a, html body header div ul li p strong {\n\tfont-weight: bold\n}\n\nhtml body footer {\n\tbackground-color: hsl(0, 0%, 80%)\n}</pre>\n\n=== \"Mixins\" ===\n\nExample:\n\n<pre>function myStyle(width, color) {\n\twidth = !width || !Type.isNumber(width) ? 700 : Math.floor(width);\n\n\tif (!Color.isValid(color)) {\n\t\tcolor = Hex.random();\n\t}\n\n\treturn {\n\t\t// Numeric values automatically converted to \"px\" or the unit set by setDefaultUnit()\n\t\twidth: width,\n\t\tmargin: '0 auto',\n\t\ttext_align: 'left',\n\t\tbackground_color: color.toRGB()\n\t};\n}\n\nvar pageWidth = 800;\n\nnew Style({\n\tbody: {\n\t\ttext_align: 'center',\n\n\t\theader: {}.extend(\n\t\t\tmyStyle(pageWidth, '#06c')\n\t\t),\n\n\t\tdiv: {}.extend(\n\t\t\tmyStyle(pageWidth / 2, '#ccc')\n\t\t),\n\n\t\tfooter: {}.extend(\n\t\t\tmyStyle(pageWidth / 3, '#f30')\n\t\t)\n\t}\n});</pre>\n\nResult:\n\n<pre>body {\n\ttext-align: center\n}\n\nbody header {\n\twidth: 800px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(0, 102, 204)\n}\n\nbody div {\n\twidth: 400px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(204, 204, 204)\n}\n\nbody footer {\n\twidth: 266px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(255, 51, 0)\n}</pre>\n\n=== Inheritance ===\n\nExample:\n\n<pre>// In the beginning, there was nothing\nvar singularity = {};\n\nvar A = {\n\tbody: {\n\t\tfont: \"12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif\",\n\t\tcolor: '#000'.toRGB()\n\t}\n};\n\nvar B = {\n\theader: {\n\t\th1: {\n\t\t\tfont_size: 24,\n\t\t\tcolor: darken(Hex.random(), 0.3)\n\t\t}\n\t}\n};\n\nnew Style(\n\tsingularity.extend(A, B)\n);</pre>\n\nResult:\n\n<pre>body {\n\tfont: 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tcolor: rgb(0, 0, 0)\n}\n\nheader h1 {\n\tfont-size: 24px;\n\tcolor: #206502\n}</pre>\n\n== Color Functionality ==\n\nColor spaces are interchangeable:\n\n<pre>var color = Hex.random();\n\nconsole.log('INPUT: ' + color.toString());\n\ncolor = new RGB(color);\n\nconsole.log(color.toString());\n\ncolor = new XYZ(color);\n\n// Color spaces NOT supported in CSS have no .toString() method\nconsole.log(color);\n\ncolor = new HSL(color);\n\nconsole.log(color.toString());\n\ncolor = new CIELab(color);\n\nconsole.log(color);\n\ncolor = new RGBA(color);\n\nconsole.log(color.toString());\n\ncolor = new CMYK(color);\n\nconsole.log(color);\n\ncolor = new HSLA(color);\n\nconsole.log(color.toString());\n\n/*\n * NOTE: Due to the precision of the JavaScript number type\n * the output might not be *exactly* equal to the input\n *\n * e.g. #ff3300 => #fe3300\n */\nconsole.log('OUTPUT: ' + color.toHex().toString());</pre>\n\nResult:\n\n<pre>INPUT: #6cb84b\nrgb(108, 184, 75)\nXYZ {X: 24.59483120679862, Y: 37.97712451767409, Z: 12.690646072857769}\nhsl(102, 43%, 51%)\nCIELab {L: 68.00495079484631, a: -43.46726006781837, b: 47.13923110320886}\nrgba(108, 184, 75, 1)\nCMYK {cyan: 0.4130662167488027, magenta: 0, yellow: 0.5923735991444304, key: 0.2784016469309353}\nhsla(102, 43%, 51%, 1)\nOUTPUT: #6cb84b</pre>\n\n=== complement() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + complement(color).toString());</pre>\n\nResult:\n\n<pre>#ff3300 => #00cbff</pre>\n\n=== analogous() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + analogous(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #ff004c,#ffb200</pre>\n\n=== split() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + split(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #004cff,#00ffb2</pre>\n\n=== square() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + square(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #4cff00,#00cbff,#b200ff</pre>\n\n=== triad() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + triad(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #3200ff,#00ff32</pre>\n\n=== tetradic() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + tetradic(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #cbff00,#00cbff,#3200ff</pre>","readmeFilename":"README.mediawiki","_id":"style-js@0.0.21","dist":{"shasum":"833c8fb1e90e562473e9da4e208aff41867fc5da","tarball":"https://registry.npmjs.org/style-js/-/style-js-0.0.21.tgz","integrity":"sha512-TNF0C/PcL1zRszZzik5dzJxyxr74ME2AsYXUKzs77yPOmE3K/oEM4bgpHceVhloTftFTV9UvqbDIjvyUdU+n+g==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7xv3AFzgp3K74HEOpQdGax5zYNa9SnCM9ESzWN/0ELAIhAMuKjpPmd9/1AYBR/TnQw+J1K7yr3f8zYkO82ssnv9sD"}]},"_npmVersion":"1.1.66","_npmUser":{"name":"mutatio","email":"martin@mutat.io"},"maintainers":[{"name":"mutatio","email":"martin@mutat.io"}]},"0.0.22":{"name":"style-js","version":"0.0.22","author":{"name":"Martin Gallagher","email":"martin@mutat.io"},"description":"Comprehensive color manipulation classes.","main":"./src/Style.js","repository":{"type":"git","url":"https://github.com/Mutatio/Style.js.git"},"keywords":["style","css","javascript","rgb","rgba","hsv","hsl","hsla","cielab","xyz","color","colour"],"dependencies":{"type-js":"*","util-js":"*"},"readme":"== Style.js ==\n\nAn easy to use JavaScript library providing CSS preprocessing and a myriad of color manipulation functions.\n\n== CSS Preprocessing ==\n\nStyle.js allows developers to utilize the full power of JavaScript to generate CSS.\n\nExample:\n\n<pre>var color = '#06c';\n\nnew Style({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n});</pre>\n\n''Alternative syntax'':\n\n<pre>var color = '#06c';\n\n({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n}.toStyle());</pre>\n\nResult:\n\n<pre>p {\n\tbackground-color: hsla(210, 100%, 40%, 1);\n\tcolor: hsla(30, 100%, 85%, 1);\n\t-webkit-border-radius: 8px;\n\t-moz-border-radius: 8px;\n\tborder-radius: 8px\n}</pre>\n\nAny valid JavaScript code should work. It's easy to mix in your own functionality:\n\n<pre>// Returns a random color with a high red value, as a hex color code\nfunction getRandomRedColor() {\n\t// Generate random RGB color\n\tvar out = RGB.random();\n\n\t// Minimum red value of 180\n\twhile (out.red < 180) {\n\t\tout = RGB.random();\n\t}\n\n\t// Convert to HSL color space\n\tout = new HSL(out);\n\n\t// Adjust the lightness of the color, note: this might reduce the red value\n\tout.lightness = 45;\n\n\t// Return as hexidecimal\n\treturn out.toHex();\n}\n\nnew Style({\n\t'.randomRed': {\n\t\tbackground_color: getRandomRedColor(),\n\t\tcolor: '#fff'\n\t}\n});</pre>\n\nResult:\n\n<pre>.randomRed {\n\tbackground-color: #bd4028;\n\tcolor: #fff\n}</pre>\n\n=== Nested Styles ===\n\nExample:\n\n<pre>new Style({\n\thtml: {\n\t\tbody: {\n\t\t\theader: {\n\t\t\t\tdiv: {\n\t\t\t\t\tul: {\n\t\t\t\t\t\tli: {\n\t\t\t\t\t\t\tp: {\n\t\t\t\t\t\t\t\tcolor: new RGBA(new Hex('#666')),\n\n\t\t\t\t\t\t\t\t'a, strong': {\n\t\t\t\t\t\t\t\t\tfont_weight: 'bold'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tfooter: {\n\t\t\t\t'background-color': new HSL(new Hex('#ccc'))\n\t\t\t}\n\t\t}\n\t}\n});</pre>\n\nResult:\n\n<pre>html body header div ul li p {\n\tcolor: rgba(102, 102, 102, 1)\n}\n\nhtml body header div ul li p a, html body header div ul li p strong {\n\tfont-weight: bold\n}\n\nhtml body footer {\n\tbackground-color: hsl(0, 0%, 80%)\n}</pre>\n\n=== \"Mixins\" ===\n\nExample:\n\n<pre>function myStyle(width, color) {\n\twidth = !width || !Type.isNumber(width) ? 700 : Math.floor(width);\n\n\tif (!Color.isValid(color)) {\n\t\tcolor = Hex.random();\n\t}\n\n\treturn {\n\t\t// Numeric values automatically converted to \"px\" or the unit set by setDefaultUnit()\n\t\twidth: width,\n\t\tmargin: '0 auto',\n\t\ttext_align: 'left',\n\t\tbackground_color: color.toRGB()\n\t};\n}\n\nvar pageWidth = 800;\n\nnew Style({\n\tbody: {\n\t\ttext_align: 'center',\n\n\t\theader: {}.extend(\n\t\t\tmyStyle(pageWidth, '#06c')\n\t\t),\n\n\t\tdiv: {}.extend(\n\t\t\tmyStyle(pageWidth / 2, '#ccc')\n\t\t),\n\n\t\tfooter: {}.extend(\n\t\t\tmyStyle(pageWidth / 3, '#f30')\n\t\t)\n\t}\n});</pre>\n\nResult:\n\n<pre>body {\n\ttext-align: center\n}\n\nbody header {\n\twidth: 800px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(0, 102, 204)\n}\n\nbody div {\n\twidth: 400px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(204, 204, 204)\n}\n\nbody footer {\n\twidth: 266px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(255, 51, 0)\n}</pre>\n\n=== Inheritance ===\n\nExample:\n\n<pre>// In the beginning, there was nothing\nvar singularity = {};\n\nvar A = {\n\tbody: {\n\t\tfont: \"12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif\",\n\t\tcolor: '#000'.toRGB()\n\t}\n};\n\nvar B = {\n\theader: {\n\t\th1: {\n\t\t\tfont_size: 24,\n\t\t\tcolor: darken(Hex.random(), 0.3)\n\t\t}\n\t}\n};\n\nnew Style(\n\tsingularity.extend(A, B)\n);</pre>\n\nResult:\n\n<pre>body {\n\tfont: 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tcolor: rgb(0, 0, 0)\n}\n\nheader h1 {\n\tfont-size: 24px;\n\tcolor: #206502\n}</pre>\n\n== Color Functionality ==\n\nColor spaces are interchangeable:\n\n<pre>var color = Hex.random();\n\nconsole.log('INPUT: ' + color.toString());\n\ncolor = new RGB(color);\n\nconsole.log(color.toString());\n\ncolor = new XYZ(color);\n\n// Color spaces NOT supported in CSS have no .toString() method\nconsole.log(color);\n\ncolor = new HSL(color);\n\nconsole.log(color.toString());\n\ncolor = new CIELab(color);\n\nconsole.log(color);\n\ncolor = new RGBA(color);\n\nconsole.log(color.toString());\n\ncolor = new CMYK(color);\n\nconsole.log(color);\n\ncolor = new HSLA(color);\n\nconsole.log(color.toString());\n\n/*\n * NOTE: Due to the precision of the JavaScript number type\n * the output might not be *exactly* equal to the input\n *\n * e.g. #ff3300 => #fe3300\n */\nconsole.log('OUTPUT: ' + color.toHex().toString());</pre>\n\nResult:\n\n<pre>INPUT: #6cb84b\nrgb(108, 184, 75)\nXYZ {X: 24.59483120679862, Y: 37.97712451767409, Z: 12.690646072857769}\nhsl(102, 43%, 51%)\nCIELab {L: 68.00495079484631, a: -43.46726006781837, b: 47.13923110320886}\nrgba(108, 184, 75, 1)\nCMYK {cyan: 0.4130662167488027, magenta: 0, yellow: 0.5923735991444304, key: 0.2784016469309353}\nhsla(102, 43%, 51%, 1)\nOUTPUT: #6cb84b</pre>\n\n=== complement() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + complement(color).toString());</pre>\n\nResult:\n\n<pre>#ff3300 => #00cbff</pre>\n\n=== analogous() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + analogous(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #ff004c,#ffb200</pre>\n\n=== split() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + split(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #004cff,#00ffb2</pre>\n\n=== square() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + square(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #4cff00,#00cbff,#b200ff</pre>\n\n=== triad() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + triad(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #3200ff,#00ff32</pre>\n\n=== tetradic() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + tetradic(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #cbff00,#00cbff,#3200ff</pre>","readmeFilename":"README.mediawiki","_id":"style-js@0.0.22","dist":{"shasum":"5c4a95d3ddbf4152e88814f6e516d821abf1efa3","tarball":"https://registry.npmjs.org/style-js/-/style-js-0.0.22.tgz","integrity":"sha512-BNrLeK6ET9kVhtDn+dk+7Y5+ZtECLd1Gz1S14/xweXKOTteyszHhObkXtrOpOvgyQqyBGWQWTnmpXV0TtClqrQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUtGcfNyhDufaM19UEZKkD4ftUVorE6cLAkeve+BJjEgIhAMnMACFoMOm4pOP7veg/6w7Quh2qaikqWG/bKT4Ys3fu"}]},"_npmVersion":"1.1.66","_npmUser":{"name":"mutatio","email":"martin@mutat.io"},"maintainers":[{"name":"mutatio","email":"martin@mutat.io"}]},"0.0.23":{"name":"style-js","version":"0.0.23","author":{"name":"Martin Gallagher","email":"martin@mutat.io"},"description":"Comprehensive color manipulation classes.","main":"./src/Style.js","repository":{"type":"git","url":"https://github.com/Mutatio/Style.js.git"},"keywords":["style","css","javascript","rgb","rgba","hsv","hsl","hsla","cielab","xyz","color","colour"],"dependencies":{"type-js":"*","util-js":"*"},"readme":"== Style.js ==\n\nAn easy to use JavaScript library providing CSS preprocessing and a myriad of color manipulation functions.\n\n== CSS Preprocessing ==\n\nStyle.js allows developers to utilize the full power of JavaScript to generate CSS.\n\nExample:\n\n<pre>var color = '#06c';\n\nnew Style({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n});</pre>\n\n''Alternative syntax'':\n\n<pre>var color = '#06c';\n\n({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n}.toStyle());</pre>\n\nResult:\n\n<pre>p {\n\tbackground-color: hsla(210, 100%, 40%, 1);\n\tcolor: hsla(30, 100%, 85%, 1);\n\t-webkit-border-radius: 8px;\n\t-moz-border-radius: 8px;\n\tborder-radius: 8px\n}</pre>\n\nAny valid JavaScript code should work. It's easy to mix in your own functionality:\n\n<pre>// Returns a random color with a high red value, as a hex color code\nfunction getRandomRedColor() {\n\t// Generate random RGB color\n\tvar out = RGB.random();\n\n\t// Minimum red value of 180\n\twhile (out.red < 180) {\n\t\tout = RGB.random();\n\t}\n\n\t// Convert to HSL color space\n\tout = new HSL(out);\n\n\t// Adjust the lightness of the color, note: this might reduce the red value\n\tout.lightness = 45;\n\n\t// Return as hexidecimal\n\treturn out.toHex();\n}\n\nnew Style({\n\t'.randomRed': {\n\t\tbackground_color: getRandomRedColor(),\n\t\tcolor: '#fff'\n\t}\n});</pre>\n\nResult:\n\n<pre>.randomRed {\n\tbackground-color: #bd4028;\n\tcolor: #fff\n}</pre>\n\n=== Nested Styles ===\n\nExample:\n\n<pre>new Style({\n\thtml: {\n\t\tbody: {\n\t\t\theader: {\n\t\t\t\tdiv: {\n\t\t\t\t\tul: {\n\t\t\t\t\t\tli: {\n\t\t\t\t\t\t\tp: {\n\t\t\t\t\t\t\t\tcolor: new RGBA(new Hex('#666')),\n\n\t\t\t\t\t\t\t\t'a, strong': {\n\t\t\t\t\t\t\t\t\tfont_weight: 'bold'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tfooter: {\n\t\t\t\t'background-color': new HSL(new Hex('#ccc'))\n\t\t\t}\n\t\t}\n\t}\n});</pre>\n\nResult:\n\n<pre>html body header div ul li p {\n\tcolor: rgba(102, 102, 102, 1)\n}\n\nhtml body header div ul li p a, html body header div ul li p strong {\n\tfont-weight: bold\n}\n\nhtml body footer {\n\tbackground-color: hsl(0, 0%, 80%)\n}</pre>\n\n=== \"Mixins\" ===\n\nExample:\n\n<pre>function myStyle(width, color) {\n\twidth = !width || !Type.isNumber(width) ? 700 : Math.floor(width);\n\n\tif (!Color.isValid(color)) {\n\t\tcolor = Hex.random();\n\t}\n\n\treturn {\n\t\t// Numeric values automatically converted to \"px\" or the unit set by setDefaultUnit()\n\t\twidth: width,\n\t\tmargin: '0 auto',\n\t\ttext_align: 'left',\n\t\tbackground_color: color.toRGB()\n\t};\n}\n\nvar pageWidth = 800;\n\nnew Style({\n\tbody: {\n\t\ttext_align: 'center',\n\n\t\theader: {}.extend(\n\t\t\tmyStyle(pageWidth, '#06c')\n\t\t),\n\n\t\tdiv: {}.extend(\n\t\t\tmyStyle(pageWidth / 2, '#ccc')\n\t\t),\n\n\t\tfooter: {}.extend(\n\t\t\tmyStyle(pageWidth / 3, '#f30')\n\t\t)\n\t}\n});</pre>\n\nResult:\n\n<pre>body {\n\ttext-align: center\n}\n\nbody header {\n\twidth: 800px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(0, 102, 204)\n}\n\nbody div {\n\twidth: 400px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(204, 204, 204)\n}\n\nbody footer {\n\twidth: 266px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(255, 51, 0)\n}</pre>\n\n=== Inheritance ===\n\nExample:\n\n<pre>// In the beginning, there was nothing\nvar singularity = {};\n\nvar A = {\n\tbody: {\n\t\tfont: \"12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif\",\n\t\tcolor: '#000'.toRGB()\n\t}\n};\n\nvar B = {\n\theader: {\n\t\th1: {\n\t\t\tfont_size: 24,\n\t\t\tcolor: darken(Hex.random(), 0.3)\n\t\t}\n\t}\n};\n\nnew Style(\n\tsingularity.extend(A, B)\n);</pre>\n\nResult:\n\n<pre>body {\n\tfont: 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tcolor: rgb(0, 0, 0)\n}\n\nheader h1 {\n\tfont-size: 24px;\n\tcolor: #206502\n}</pre>\n\n== Color Functionality ==\n\nColor spaces are interchangeable:\n\n<pre>var color = Hex.random();\n\nconsole.log('INPUT: ' + color.toString());\n\ncolor = new RGB(color);\n\nconsole.log(color.toString());\n\ncolor = new XYZ(color);\n\n// Color spaces NOT supported in CSS have no .toString() method\nconsole.log(color);\n\ncolor = new HSL(color);\n\nconsole.log(color.toString());\n\ncolor = new CIELab(color);\n\nconsole.log(color);\n\ncolor = new RGBA(color);\n\nconsole.log(color.toString());\n\ncolor = new CMYK(color);\n\nconsole.log(color);\n\ncolor = new HSLA(color);\n\nconsole.log(color.toString());\n\n/*\n * NOTE: Due to the precision of the JavaScript number type\n * the output might not be *exactly* equal to the input\n *\n * e.g. #ff3300 => #fe3300\n */\nconsole.log('OUTPUT: ' + color.toHex().toString());</pre>\n\nResult:\n\n<pre>INPUT: #6cb84b\nrgb(108, 184, 75)\nXYZ {X: 24.59483120679862, Y: 37.97712451767409, Z: 12.690646072857769}\nhsl(102, 43%, 51%)\nCIELab {L: 68.00495079484631, a: -43.46726006781837, b: 47.13923110320886}\nrgba(108, 184, 75, 1)\nCMYK {cyan: 0.4130662167488027, magenta: 0, yellow: 0.5923735991444304, key: 0.2784016469309353}\nhsla(102, 43%, 51%, 1)\nOUTPUT: #6cb84b</pre>\n\n=== complement() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + complement(color).toString());</pre>\n\nResult:\n\n<pre>#ff3300 => #00cbff</pre>\n\n=== analogous() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + analogous(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #ff004c,#ffb200</pre>\n\n=== split() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + split(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #004cff,#00ffb2</pre>\n\n=== square() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + square(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #4cff00,#00cbff,#b200ff</pre>\n\n=== triad() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + triad(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #3200ff,#00ff32</pre>\n\n=== tetradic() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + tetradic(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #cbff00,#00cbff,#3200ff</pre>","readmeFilename":"README.mediawiki","_id":"style-js@0.0.23","dist":{"shasum":"c416531fa0379884135498a9bd2aef28b820d080","tarball":"https://registry.npmjs.org/style-js/-/style-js-0.0.23.tgz","integrity":"sha512-uOUcarVl7AmOLPrp7xm0tU4B3EV2KMtSLfEVpeqmlMve2f6Hlb9GZf4zEejt6ArAT0x7wiSGdTfV/6gkMO2Fdg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1qQtZVQbdStXCDw0NkxcEK+MjRcf8/9JmiOEyeWPevwIgeUVpCosk66wwDTbgQOXiJS6qI0dh1VdLyMraEAwonu0="}]},"_npmVersion":"1.1.69","_npmUser":{"name":"mutatio","email":"martin@mutat.io"},"maintainers":[{"name":"mutatio","email":"martin@mutat.io"}]},"0.0.24":{"name":"style-js","version":"0.0.24","author":{"name":"Martin Gallagher","email":"martin@mutat.io"},"description":"Comprehensive color manipulation classes.","main":"./src/Style.js","repository":{"type":"git","url":"https://github.com/Mutatio/Style.js.git"},"keywords":["style","css","javascript","rgb","rgba","hsv","hsl","hsla","cielab","xyz","color","colour"],"dependencies":{"type-js":"*","util-js":"*"},"readme":"== Style.js ==\n\nAn easy to use JavaScript library providing CSS preprocessing and a myriad of color manipulation functions.\n\n== CSS Preprocessing ==\n\nStyle.js allows developers to utilize the full power of JavaScript to generate CSS.\n\nExample:\n\n<pre>var color = '#06c';\n\nnew Style({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n});</pre>\n\n''Alternative syntax'':\n\n<pre>var color = '#06c';\n\n({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n}.toStyle());</pre>\n\nResult:\n\n<pre>p {\n\tbackground-color: hsla(210, 100%, 40%, 1);\n\tcolor: hsla(30, 100%, 85%, 1);\n\t-webkit-border-radius: 8px;\n\t-moz-border-radius: 8px;\n\tborder-radius: 8px\n}</pre>\n\nAny valid JavaScript code should work. It's easy to mix in your own functionality:\n\n<pre>// Returns a random color with a high red value, as a hex color code\nfunction getRandomRedColor() {\n\t// Generate random RGB color\n\tvar out = RGB.random();\n\n\t// Minimum red value of 180\n\twhile (out.red < 180) {\n\t\tout = RGB.random();\n\t}\n\n\t// Convert to HSL color space\n\tout = new HSL(out);\n\n\t// Adjust the lightness of the color, note: this might reduce the red value\n\tout.lightness = 45;\n\n\t// Return as hexidecimal\n\treturn out.toHex();\n}\n\nnew Style({\n\t'.randomRed': {\n\t\tbackground_color: getRandomRedColor(),\n\t\tcolor: '#fff'\n\t}\n});</pre>\n\nResult:\n\n<pre>.randomRed {\n\tbackground-color: #bd4028;\n\tcolor: #fff\n}</pre>\n\n=== Nested Styles ===\n\nExample:\n\n<pre>new Style({\n\thtml: {\n\t\tbody: {\n\t\t\theader: {\n\t\t\t\tdiv: {\n\t\t\t\t\tul: {\n\t\t\t\t\t\tli: {\n\t\t\t\t\t\t\tp: {\n\t\t\t\t\t\t\t\tcolor: new RGBA(new Hex('#666')),\n\n\t\t\t\t\t\t\t\t'a, strong': {\n\t\t\t\t\t\t\t\t\tfont_weight: 'bold'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tfooter: {\n\t\t\t\t'background-color': new HSL(new Hex('#ccc'))\n\t\t\t}\n\t\t}\n\t}\n});</pre>\n\nResult:\n\n<pre>html body header div ul li p {\n\tcolor: rgba(102, 102, 102, 1)\n}\n\nhtml body header div ul li p a, html body header div ul li p strong {\n\tfont-weight: bold\n}\n\nhtml body footer {\n\tbackground-color: hsl(0, 0%, 80%)\n}</pre>\n\n=== \"Mixins\" ===\n\nExample:\n\n<pre>function myStyle(width, color) {\n\twidth = !width || !Type.isNumber(width) ? 700 : Math.floor(width);\n\n\tif (!Color.isValid(color)) {\n\t\tcolor = Hex.random();\n\t}\n\n\treturn {\n\t\t// Numeric values automatically converted to \"px\" or the unit set by setDefaultUnit()\n\t\twidth: width,\n\t\tmargin: '0 auto',\n\t\ttext_align: 'left',\n\t\tbackground_color: color.toRGB()\n\t};\n}\n\nvar pageWidth = 800;\n\nnew Style({\n\tbody: {\n\t\ttext_align: 'center',\n\n\t\theader: {}.extend(\n\t\t\tmyStyle(pageWidth, '#06c')\n\t\t),\n\n\t\tdiv: {}.extend(\n\t\t\tmyStyle(pageWidth / 2, '#ccc')\n\t\t),\n\n\t\tfooter: {}.extend(\n\t\t\tmyStyle(pageWidth / 3, '#f30')\n\t\t)\n\t}\n});</pre>\n\nResult:\n\n<pre>body {\n\ttext-align: center\n}\n\nbody header {\n\twidth: 800px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(0, 102, 204)\n}\n\nbody div {\n\twidth: 400px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(204, 204, 204)\n}\n\nbody footer {\n\twidth: 266px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(255, 51, 0)\n}</pre>\n\n=== Inheritance ===\n\nExample:\n\n<pre>// In the beginning, there was nothing\nvar singularity = {};\n\nvar A = {\n\tbody: {\n\t\tfont: \"12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif\",\n\t\tcolor: '#000'.toRGB()\n\t}\n};\n\nvar B = {\n\theader: {\n\t\th1: {\n\t\t\tfont_size: 24,\n\t\t\tcolor: darken(Hex.random(), 0.3)\n\t\t}\n\t}\n};\n\nnew Style(\n\tsingularity.extend(A, B)\n);</pre>\n\nResult:\n\n<pre>body {\n\tfont: 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tcolor: rgb(0, 0, 0)\n}\n\nheader h1 {\n\tfont-size: 24px;\n\tcolor: #206502\n}</pre>\n\n== Color Functionality ==\n\nColor spaces are interchangeable:\n\n<pre>var color = Hex.random();\n\nconsole.log('INPUT: ' + color.toString());\n\ncolor = new RGB(color);\n\nconsole.log(color.toString());\n\ncolor = new XYZ(color);\n\n// Color spaces NOT supported in CSS have no .toString() method\nconsole.log(color);\n\ncolor = new HSL(color);\n\nconsole.log(color.toString());\n\ncolor = new CIELab(color);\n\nconsole.log(color);\n\ncolor = new RGBA(color);\n\nconsole.log(color.toString());\n\ncolor = new CMYK(color);\n\nconsole.log(color);\n\ncolor = new HSLA(color);\n\nconsole.log(color.toString());\n\n/*\n * NOTE: Due to the precision of the JavaScript number type\n * the output might not be *exactly* equal to the input\n *\n * e.g. #ff3300 => #fe3300\n */\nconsole.log('OUTPUT: ' + color.toHex().toString());</pre>\n\nResult:\n\n<pre>INPUT: #6cb84b\nrgb(108, 184, 75)\nXYZ {X: 24.59483120679862, Y: 37.97712451767409, Z: 12.690646072857769}\nhsl(102, 43%, 51%)\nCIELab {L: 68.00495079484631, a: -43.46726006781837, b: 47.13923110320886}\nrgba(108, 184, 75, 1)\nCMYK {cyan: 0.4130662167488027, magenta: 0, yellow: 0.5923735991444304, key: 0.2784016469309353}\nhsla(102, 43%, 51%, 1)\nOUTPUT: #6cb84b</pre>\n\n=== complement() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + complement(color).toString());</pre>\n\nResult:\n\n<pre>#ff3300 => #00cbff</pre>\n\n=== analogous() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + analogous(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #ff004c,#ffb200</pre>\n\n=== split() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + split(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #004cff,#00ffb2</pre>\n\n=== square() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + square(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #4cff00,#00cbff,#b200ff</pre>\n\n=== triad() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + triad(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #3200ff,#00ff32</pre>\n\n=== tetradic() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + tetradic(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #cbff00,#00cbff,#3200ff</pre>","readmeFilename":"README.mediawiki","_id":"style-js@0.0.24","dist":{"shasum":"507d72adee789a48e35568826271265302226776","tarball":"https://registry.npmjs.org/style-js/-/style-js-0.0.24.tgz","integrity":"sha512-J3zzgQVA9kz148RJ/yfrWmr5OmosdymijGk7du2/+PoFaQ0IbB3JZPuQOHYm0GVLuYWsIK3rFzaBz54Wfx9VKA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCB+4Twy1anK0wTniqbmhje0K2dbeil6kTUmO2BASCyZwIgRgb6CXLR1kIHU4+LVhVeBVeZg3QJEA/O3Zj9bXSPwvo="}]},"_from":".","_npmVersion":"1.2.12","_npmUser":{"name":"mutatio","email":"martin@mutat.io"},"maintainers":[{"name":"mutatio","email":"martin@mutat.io"}]},"0.0.25":{"name":"style-js","version":"0.0.25","author":{"name":"Martin Gallagher","email":"martin@mutat.io"},"description":"Comprehensive color manipulation classes.","main":"./src/Style.js","repository":{"type":"git","url":"git://github.com/Mutatio/Style.js.git"},"keywords":["style","css","javascript","rgb","rgba","hsv","hsl","hsla","cielab","xyz","color","colour"],"dependencies":{"type-js":"*","util-js":"*"},"_npmUser":{"name":"mutatio","email":"martin@mutat.io"},"_id":"style-js@0.0.25","devDependencies":{},"optionalDependencies":{},"engines":{"node":"*"},"_engineSupported":true,"_npmVersion":"1.1.4","_nodeVersion":"v0.6.19","_defaultsLoaded":true,"dist":{"shasum":"e99813796ba9d84cb3ccc63250be6dbfca4a76c7","tarball":"https://registry.npmjs.org/style-js/-/style-js-0.0.25.tgz","integrity":"sha512-S0OK8nQDzZ9x5weaBH0z8uUKSbFA0q2KqpSS3b3Tb1titYeYYAZ2Gvzm+L8AHZhGq0VzpTahG1KEJnQcUTTZig==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0WksV4RKb20MOZQwF5aVJEK4SLERWd3uD485JI/4KJAIgCNJXWGyTXvhHH8tyQe/u8CuQ5LbM7ltfswsL2vpE5IE="}]},"maintainers":[{"name":"mutatio","email":"martin@mutat.io"}]},"0.0.26":{"name":"style-js","version":"0.0.26","author":{"name":"Martin Gallagher","email":"martin@mutat.io"},"description":"Comprehensive color manipulation classes.","main":"./src/Style.js","repository":{"type":"git","url":"git://github.com/Mutatio/Style.js.git"},"keywords":["style","css","javascript","rgb","rgba","hsv","hsl","hsla","cielab","xyz","color","colour"],"dependencies":{"type-js":"*","util-js":"*"},"_npmUser":{"name":"mutatio","email":"martin@mutat.io"},"_id":"style-js@0.0.26","devDependencies":{},"optionalDependencies":{},"engines":{"node":"*"},"_engineSupported":true,"_npmVersion":"1.1.4","_nodeVersion":"v0.6.19","_defaultsLoaded":true,"dist":{"shasum":"d12e2ecd263de97f024a126658d55562f483fef7","tarball":"https://registry.npmjs.org/style-js/-/style-js-0.0.26.tgz","integrity":"sha512-w/XlZQx4LA/psVIF9XQt9XS31gLUIWHLNWyvyH7V5Mmz2dEjrcfYZct6QD0yoKA1MNLp6dLZDm45cw0lmvxOyw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvBFG692EQj9ubr0X6J/QgzfctL11wDlGjl0oWUqiNnQIgWWHYOO05cqX8ofgOi79Y5B5ZPTAhszKGG4djsW8w9CA="}]},"maintainers":[{"name":"mutatio","email":"martin@mutat.io"}]}},"readme":"== Style.js ==\n\nAn easy to use JavaScript library providing CSS preprocessing and a myriad of color manipulation functions.\n\n== CSS Preprocessing ==\n\nStyle.js allows developers to utilize the full power of JavaScript to generate CSS.\n\nExample:\n\n<pre>var color = '#06c';\n\nnew Style({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n});</pre>\n\n''Alternative syntax'':\n\n<pre>var color = '#06c';\n\n({\n\tp: {\n\t\tbackground_color: color.toHSLA(),\n\t\tcolor: selectForeground(color).toHSLA()\n\t}.extend(\n\t\tCSS.borderRadius(Math.floor(Math.random() * 11) + 0)\n\t)\n}.toStyle());</pre>\n\nResult:\n\n<pre>p {\n\tbackground-color: hsla(210, 100%, 40%, 1);\n\tcolor: hsla(30, 100%, 85%, 1);\n\t-webkit-border-radius: 8px;\n\t-moz-border-radius: 8px;\n\tborder-radius: 8px\n}</pre>\n\nAny valid JavaScript code should work. It's easy to mix in your own functionality:\n\n<pre>// Returns a random color with a high red value, as a hex color code\nfunction getRandomRedColor() {\n\t// Generate random RGB color\n\tvar out = RGB.random();\n\n\t// Minimum red value of 180\n\twhile (out.red < 180) {\n\t\tout = RGB.random();\n\t}\n\n\t// Convert to HSL color space\n\tout = new HSL(out);\n\n\t// Adjust the lightness of the color, note: this might reduce the red value\n\tout.lightness = 45;\n\n\t// Return as hexidecimal\n\treturn out.toHex();\n}\n\nnew Style({\n\t'.randomRed': {\n\t\tbackground_color: getRandomRedColor(),\n\t\tcolor: '#fff'\n\t}\n});</pre>\n\nResult:\n\n<pre>.randomRed {\n\tbackground-color: #bd4028;\n\tcolor: #fff\n}</pre>\n\n=== Nested Styles ===\n\nExample:\n\n<pre>new Style({\n\thtml: {\n\t\tbody: {\n\t\t\theader: {\n\t\t\t\tdiv: {\n\t\t\t\t\tul: {\n\t\t\t\t\t\tli: {\n\t\t\t\t\t\t\tp: {\n\t\t\t\t\t\t\t\tcolor: new RGBA(new Hex('#666')),\n\n\t\t\t\t\t\t\t\t'a, strong': {\n\t\t\t\t\t\t\t\t\tfont_weight: 'bold'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tfooter: {\n\t\t\t\t'background-color': new HSL(new Hex('#ccc'))\n\t\t\t}\n\t\t}\n\t}\n});</pre>\n\nResult:\n\n<pre>html body header div ul li p {\n\tcolor: rgba(102, 102, 102, 1)\n}\n\nhtml body header div ul li p a, html body header div ul li p strong {\n\tfont-weight: bold\n}\n\nhtml body footer {\n\tbackground-color: hsl(0, 0%, 80%)\n}</pre>\n\n=== \"Mixins\" ===\n\nExample:\n\n<pre>function myStyle(width, color) {\n\twidth = !width || !Type.isNumber(width) ? 700 : Math.floor(width);\n\n\tif (!Color.isValid(color)) {\n\t\tcolor = Hex.random();\n\t}\n\n\treturn {\n\t\t// Numeric values automatically converted to \"px\" or the unit set by setDefaultUnit()\n\t\twidth: width,\n\t\tmargin: '0 auto',\n\t\ttext_align: 'left',\n\t\tbackground_color: color.toRGB()\n\t};\n}\n\nvar pageWidth = 800;\n\nnew Style({\n\tbody: {\n\t\ttext_align: 'center',\n\n\t\theader: {}.extend(\n\t\t\tmyStyle(pageWidth, '#06c')\n\t\t),\n\n\t\tdiv: {}.extend(\n\t\t\tmyStyle(pageWidth / 2, '#ccc')\n\t\t),\n\n\t\tfooter: {}.extend(\n\t\t\tmyStyle(pageWidth / 3, '#f30')\n\t\t)\n\t}\n});</pre>\n\nResult:\n\n<pre>body {\n\ttext-align: center\n}\n\nbody header {\n\twidth: 800px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(0, 102, 204)\n}\n\nbody div {\n\twidth: 400px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(204, 204, 204)\n}\n\nbody footer {\n\twidth: 266px;\n\tmargin: 0 auto;\n\ttext-align: left;\n\tbackground-color: rgb(255, 51, 0)\n}</pre>\n\n=== Inheritance ===\n\nExample:\n\n<pre>// In the beginning, there was nothing\nvar singularity = {};\n\nvar A = {\n\tbody: {\n\t\tfont: \"12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif\",\n\t\tcolor: '#000'.toRGB()\n\t}\n};\n\nvar B = {\n\theader: {\n\t\th1: {\n\t\t\tfont_size: 24,\n\t\t\tcolor: darken(Hex.random(), 0.3)\n\t\t}\n\t}\n};\n\nnew Style(\n\tsingularity.extend(A, B)\n);</pre>\n\nResult:\n\n<pre>body {\n\tfont: 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tcolor: rgb(0, 0, 0)\n}\n\nheader h1 {\n\tfont-size: 24px;\n\tcolor: #206502\n}</pre>\n\n== Color Functionality ==\n\nColor spaces are interchangeable:\n\n<pre>var color = Hex.random();\n\nconsole.log('INPUT: ' + color.toString());\n\ncolor = new RGB(color);\n\nconsole.log(color.toString());\n\ncolor = new XYZ(color);\n\n// Color spaces NOT supported in CSS have no .toString() method\nconsole.log(color);\n\ncolor = new HSL(color);\n\nconsole.log(color.toString());\n\ncolor = new CIELab(color);\n\nconsole.log(color);\n\ncolor = new RGBA(color);\n\nconsole.log(color.toString());\n\ncolor = new CMYK(color);\n\nconsole.log(color);\n\ncolor = new HSLA(color);\n\nconsole.log(color.toString());\n\n/*\n * NOTE: Due to the precision of the JavaScript number type\n * the output might not be *exactly* equal to the input\n *\n * e.g. #ff3300 => #fe3300\n */\nconsole.log('OUTPUT: ' + color.toHex().toString());</pre>\n\nResult:\n\n<pre>INPUT: #6cb84b\nrgb(108, 184, 75)\nXYZ {X: 24.59483120679862, Y: 37.97712451767409, Z: 12.690646072857769}\nhsl(102, 43%, 51%)\nCIELab {L: 68.00495079484631, a: -43.46726006781837, b: 47.13923110320886}\nrgba(108, 184, 75, 1)\nCMYK {cyan: 0.4130662167488027, magenta: 0, yellow: 0.5923735991444304, key: 0.2784016469309353}\nhsla(102, 43%, 51%, 1)\nOUTPUT: #6cb84b</pre>\n\n=== complement() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + complement(color).toString());</pre>\n\nResult:\n\n<pre>#ff3300 => #00cbff</pre>\n\n=== analogous() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + analogous(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #ff004c,#ffb200</pre>\n\n=== split() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + split(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #004cff,#00ffb2</pre>\n\n=== square() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + square(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #4cff00,#00cbff,#b200ff</pre>\n\n=== triad() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + triad(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #3200ff,#00ff32</pre>\n\n=== tetradic() ===\n\nExample:\n\n<pre>var color = new Hex('#f30');\n\nconsole.log(color.toString() + ' => ' + tetradic(color));</pre>\n\nResult:\n\n<pre>#ff3300 => #cbff00,#00cbff,#3200ff</pre>","maintainers":[{"name":"mutatio","email":"martin@mutat.io"}],"time":{"modified":"2022-06-27T01:29:15.997Z","created":"2012-11-09T18:03:54.978Z","0.0.1":"2012-11-09T18:03:57.254Z","0.0.2":"2012-11-09T18:21:31.344Z","0.0.3":"2012-11-16T16:55:50.370Z","0.0.4":"2012-11-16T19:26:48.716Z","0.0.5":"2012-11-16T21:12:50.528Z","0.0.6":"2012-11-16T21:23:28.825Z","0.0.7":"2012-11-17T13:08:21.390Z","0.0.8":"2012-11-19T16:50:45.382Z","0.0.9":"2012-11-21T14:33:01.446Z","0.0.10":"2012-11-21T14:36:32.888Z","0.0.11":"2012-11-21T16:22:12.151Z","0.0.12":"2012-11-21T16:51:51.097Z","0.0.13":"2012-11-21T16:53:48.057Z","0.0.14":"2012-11-21T22:56:47.389Z","0.0.15":"2012-11-21T22:56:56.485Z","0.0.16":"2012-11-22T15:19:47.221Z","0.0.17":"2012-11-22T16:37:51.575Z","0.0.18":"2012-11-25T21:33:03.106Z","0.0.19":"2012-11-25T22:05:00.871Z","0.0.20":"2012-11-26T17:55:13.658Z","0.0.21":"2012-12-05T22:31:52.554Z","0.0.22":"2012-12-11T20:19:01.475Z","0.0.23":"2012-12-25T12:00:48.721Z","0.0.24":"2013-03-08T19:41:02.484Z","0.0.25":"2013-06-17T20:51:00.430Z","0.0.26":"2013-07-01T16:59:24.009Z"},"author":{"name":"Martin Gallagher","email":"martin@mutat.io"},"repository":{"type":"git","url":"git://github.com/Mutatio/Style.js.git"}}