├── .gitignore ├── .npmignore ├── LICENSE.txt ├── README.md ├── demo.png ├── dist ├── palette.css └── palette.min.js ├── gulpfile.js ├── index.js ├── package.json ├── palette.gif ├── src └── palette.js └── style └── palette.sass /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jotavejv/palette-js/b58a3b14ec116a3e5f24784bea34323d2e096016/.npmignore -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2017 João Victor Santos 2 | https://github.com/jotavejv/palette-js 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining 5 | a copy of this software and associated documentation files (the 6 | "Software"), to deal in the Software without restriction, including 7 | without limitation the rights to use, copy, modify, merge, publish, 8 | distribute, sublicense, and/or sell copies of the Software, and to 9 | permit persons to whom the Software is furnished to do so, subject to 10 | the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 17 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 19 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 20 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 21 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Palette-js 2 | 3 | Are you building a Design System or just a style guide? So, **palettejs** may help you! 4 | 5 | Add a beautiful palette colors to your project with a single line of code. 6 | 7 | This JS source code is a modern es2015, so keep it in mind for browser support. 8 | 9 | ## How to install 10 | 11 | ```js 12 | npm install palette-js 13 | ``` 14 | OR 15 | 16 | Just import the CDN source code 17 | ```html 18 | 19 | ``` 20 | ## How does it work 21 | 22 | The JS code will inject to your project the required CSS style for the list of colors that you will add to the plugin. Then it will create a list of colors inside of the parent selector that you need especify. 23 | The JS handle **copy to clipboard** for you too! Just click at any color and it will add that especific color to your clipboard :) 24 | 25 | 26 | ## How to use 27 | 28 | You need especify a **array** of colors and the especific parent selector that will wrap these colors. 29 | 30 | ```js 31 | const colors = [ 32 | "aquamarine", 33 | "pink", 34 | "darkturquoise", 35 | "steelblue", 36 | "cadetblue", 37 | "lightblue", 38 | "lightsalmon", 39 | "teal", 40 | "darkseagreen", 41 | "khaki", 42 | "lightcoral", 43 | "lightgray", 44 | "coral", 45 | "slategray", 46 | "gray", 47 | "lightseagreen" 48 | ]; 49 | 50 | palette(colors, document.querySelector(".example")); 51 | ``` 52 | Codepen link **[Demo](https://codepen.io/jotavejv/pen/wezbwy/)** 53 | 54 | ![demo](palette.gif "demo") 55 | 56 | ![demo](demo.png "demo") 57 | 58 | 59 | -------------------------------------------------------------------------------- /demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jotavejv/palette-js/b58a3b14ec116a3e5f24784bea34323d2e096016/demo.png -------------------------------------------------------------------------------- /dist/palette.css: -------------------------------------------------------------------------------- 1 | #paletteUI{margin:0;padding:0;font-size:12px;width:100%;display:flex;flex-wrap:wrap;justify-content:center;list-style:none}#paletteUI li{font-family:"Arial", "sans-serif";cursor:pointer;margin:10px;position:relative;background-size:100% 75% !important;width:140px;height:120px;padding:5px;box-sizing:border-box;border-radius:4px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,0.1);transition:all .15s ease-in-out}#paletteUI li:hover{box-shadow:0 2px 20px rgba(0,0,0,0.15)}#paletteUI li input{position:absolute;bottom:5%;white-space:nowrap;overflow:hidden;display:block;width:90%;text-overflow:ellipsis;color:#666;border:none;pointer-events:none;background:transparent}#paletteUI li input::selection{background:transparent}#paletteUI li:after{display:flex;align-items:center;justify-content:center;height:80%;opacity:0;content:'Copied!';letter-spacing:1px;text-align:center;color:#fff;font-size:8px;text-transform:uppercase;text-shadow:0 1px rgba(0,0,0,0.2)}#paletteUI li.copy:after{animation:copy 1.6s ease-in-out both}@keyframes copy{0%{opacity:0;transform:translateY(10px)}15%,80%{transform:translateY(0);opacity:1}100%{opacity:0;transform:translateY(-10px)}} 2 | -------------------------------------------------------------------------------- /dist/palette.min.js: -------------------------------------------------------------------------------- 1 | "use strict";const palette=(t,e)=>{function n(){Array.from(document.querySelectorAll("#paletteUI li")).forEach(t=>{t.classList.remove("copy")})}let o=`\n\t\t\n `;e.innerHTML=o,o&&Array.from(document.querySelectorAll("#paletteUI li")).forEach(t=>{t.addEventListener("click",t=>{let e=t.target;e.querySelector("input").select(),n();try{document.execCommand("copy"),e.classList.add("copy")}catch(t){console.log("Unable to copy",t)}})})},style="#paletteUI{margin:0;padding:0;font-size:12px;width:100%;display:flex;flex-wrap:wrap;justify-content:center;list-style:none}#paletteUI li{font-family:'Arial', 'sans-serif';cursor:pointer;margin:10px;position:relative;background-size:100% 75% !important;width:140px;height:120px;padding:5px;box-sizing:border-box;border-radius:4px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,0.1);transition:all .15s ease-in-out}#paletteUI li:hover{box-shadow:0 2px 20px rgba(0,0,0,0.15)}#paletteUI li input{position:absolute;bottom:5%;white-space:nowrap;overflow:hidden;display:block;width:90%;text-overflow:ellipsis;color:#666;border:none;pointer-events:none;background:transparent}#paletteUI li input::selection{background:transparent}#paletteUI li:after{display:flex;align-items:center;justify-content:center;height:80%;opacity:0;content:'Copied!';letter-spacing:1px;text-align:center;color:#fff;font-size:8px;text-transform:uppercase;text-shadow:0 1px rgba(0,0,0,0.2)}#paletteUI li.copy:after{animation:copy 1.6s ease-in-out both}@keyframes copy{0%{opacity:0;transform:translateY(10px)}15%,80%{transform:translateY(0);opacity:1}100%{opacity:0;transform:translateY(-10px)}}";!function(t){var e=document.createElement("style");e.innerHTML=t,document.body.appendChild(e)}(style); -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var sass = require('gulp-sass'); 5 | var minify = require('gulp-minify'); 6 | 7 | gulp.task('sass', function () { 8 | return gulp.src('./style/**/*.sass') 9 | .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)) 10 | .pipe(gulp.dest('./dist/')); 11 | }); 12 | 13 | gulp.task('sass:watch', function () { 14 | gulp.watch('./style/**/*.sass', ['sass']); 15 | }); 16 | 17 | 18 | gulp.task('default',["sass:watch"], function(){}); 19 | 20 | gulp.task('minify', function() { 21 | gulp.src('src/*.js') 22 | .pipe(minify({ 23 | ext:{ 24 | min:'.min.js' 25 | }, 26 | exclude: ['tasks'], 27 | ignoreFiles: ['-min.js'] 28 | })) 29 | .pipe(gulp.dest('dist')) 30 | }); 31 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const palette = (colors, renderElement) => { 4 | let template = ` 5 | 9 | `; 10 | renderElement.innerHTML = template; 11 | 12 | function removeCopyClass() { 13 | Array.from(document.querySelectorAll("#paletteUI li")).forEach(item => { 14 | item.classList.remove("copy"); 15 | }); 16 | } 17 | if (template) { 18 | Array.from(document.querySelectorAll("#paletteUI li")).forEach(item => { 19 | item.addEventListener("click", event => { 20 | let $item = event.target; 21 | let copyElement = $item.querySelector("input"); 22 | copyElement.select(); 23 | removeCopyClass(); 24 | try { 25 | document.execCommand("copy"); 26 | $item.classList.add("copy"); 27 | } catch (err) { 28 | console.log("Unable to copy", err); 29 | } 30 | }); 31 | }); 32 | } 33 | }; 34 | 35 | 36 | const style = "#paletteUI{margin:0;padding:0;font-size:12px;width:100%;display:flex;flex-wrap:wrap;justify-content:center;list-style:none}#paletteUI li{font-family:'Arial', 'sans-serif';cursor:pointer;margin:10px;position:relative;background-size:100% 75% !important;width:140px;height:120px;padding:5px;box-sizing:border-box;border-radius:4px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,0.1);transition:all .15s ease-in-out}#paletteUI li:hover{box-shadow:0 2px 20px rgba(0,0,0,0.15)}#paletteUI li input{position:absolute;bottom:5%;white-space:nowrap;overflow:hidden;display:block;width:90%;text-overflow:ellipsis;color:#666;border:none;pointer-events:none;background:transparent}#paletteUI li input::selection{background:transparent}#paletteUI li:after{display:flex;align-items:center;justify-content:center;height:80%;opacity:0;content:'Copied!';letter-spacing:1px;text-align:center;color:#fff;font-size:8px;text-transform:uppercase;text-shadow:0 1px rgba(0,0,0,0.2)}#paletteUI li.copy:after{animation:copy 1.6s ease-in-out both}@keyframes copy{0%{opacity:0;transform:translateY(10px)}15%,80%{transform:translateY(0);opacity:1}100%{opacity:0;transform:translateY(-10px)}}"; 37 | 38 | (function addStyleString(str) { 39 | var node = document.createElement('style'); 40 | node.innerHTML = str; 41 | document.body.appendChild(node); 42 | })(style); 43 | 44 | 45 | module.exports = palette; 46 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "palette-js", 3 | "version": "1.0.3", 4 | "description": "\"palette ui colors creator\"", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/jotavejv/palette-js.git" 12 | }, 13 | "keywords": [ 14 | "color", 15 | "UI", 16 | "design", 17 | "css" 18 | ], 19 | "author": "jotavejv", 20 | "license": "ISC", 21 | "bugs": { 22 | "url": "https://github.com/jotavejv/palette-js/issues" 23 | }, 24 | "homepage": "https://github.com/jotavejv/palette-js#readme", 25 | "devDependencies": { 26 | "gulp": "^3.9.1", 27 | "gulp-minify": "^1.0.0", 28 | "gulp-sass": "^3.1.0" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /palette.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jotavejv/palette-js/b58a3b14ec116a3e5f24784bea34323d2e096016/palette.gif -------------------------------------------------------------------------------- /src/palette.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const palette = (colors, renderElement) => { 4 | let template = ` 5 | 9 | `; 10 | renderElement.innerHTML = template; 11 | 12 | function removeCopyClass() { 13 | Array.from(document.querySelectorAll("#paletteUI li")).forEach(item => { 14 | item.classList.remove("copy"); 15 | }); 16 | } 17 | if (template) { 18 | Array.from(document.querySelectorAll("#paletteUI li")).forEach(item => { 19 | item.addEventListener("click", event => { 20 | let $item = event.target; 21 | let copyElement = $item.querySelector("input"); 22 | copyElement.select(); 23 | removeCopyClass(); 24 | try { 25 | document.execCommand("copy"); 26 | $item.classList.add("copy"); 27 | } catch (err) { 28 | console.log("Unable to copy", err); 29 | } 30 | }); 31 | }); 32 | } 33 | }; 34 | 35 | 36 | const style = "#paletteUI{margin:0;padding:0;font-size:12px;width:100%;display:flex;flex-wrap:wrap;justify-content:center;list-style:none}#paletteUI li{font-family:'Arial', 'sans-serif';cursor:pointer;margin:10px;position:relative;background-size:100% 75% !important;width:140px;height:120px;padding:5px;box-sizing:border-box;border-radius:4px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,0.1);transition:all .15s ease-in-out}#paletteUI li:hover{box-shadow:0 2px 20px rgba(0,0,0,0.15)}#paletteUI li input{position:absolute;bottom:5%;white-space:nowrap;overflow:hidden;display:block;width:90%;text-overflow:ellipsis;color:#666;border:none;pointer-events:none;background:transparent}#paletteUI li input::selection{background:transparent}#paletteUI li:after{display:flex;align-items:center;justify-content:center;height:80%;opacity:0;content:'Copied!';letter-spacing:1px;text-align:center;color:#fff;font-size:8px;text-transform:uppercase;text-shadow:0 1px rgba(0,0,0,0.2)}#paletteUI li.copy:after{animation:copy 1.6s ease-in-out both}@keyframes copy{0%{opacity:0;transform:translateY(10px)}15%,80%{transform:translateY(0);opacity:1}100%{opacity:0;transform:translateY(-10px)}}"; 37 | 38 | (function addStyleString(str) { 39 | var node = document.createElement('style'); 40 | node.innerHTML = str; 41 | document.body.appendChild(node); 42 | })(style); 43 | -------------------------------------------------------------------------------- /style/palette.sass: -------------------------------------------------------------------------------- 1 | #paletteUI 2 | margin: 0 3 | padding: 0 4 | font-size: 12px 5 | width: 100% 6 | display: flex 7 | flex-wrap: wrap 8 | justify-content: center 9 | list-style: none 10 | li 11 | font-family: "Arial", "sans-serif" 12 | cursor: pointer 13 | margin: 10px 14 | position: relative 15 | background-size: 100% 75% !important 16 | width: 140px 17 | height: 120px 18 | padding: 5px 19 | box-sizing: border-box 20 | border-radius: 4px 21 | overflow: hidden 22 | box-shadow: 0 1px 4px rgba(black, .1) 23 | transition: all .15s ease-in-out 24 | &:hover 25 | box-shadow: 0 2px 20px rgba(black,.15) 26 | input 27 | position: absolute 28 | bottom: 5% 29 | white-space: nowrap 30 | overflow: hidden 31 | display: block 32 | width: 90% 33 | text-overflow: ellipsis 34 | color: #666 35 | border: none 36 | pointer-events: none 37 | background: transparent 38 | &::selection 39 | background: transparent 40 | &:after 41 | display: flex 42 | align-items: center 43 | justify-content: center 44 | height: 80% 45 | opacity: 0 46 | content: 'Copied!' 47 | letter-spacing: 1px 48 | text-align: center 49 | color: #fff 50 | font-size: 8px 51 | text-transform: uppercase 52 | text-shadow: 0 1px rgba(black, .2) 53 | 54 | &.copy:after 55 | animation: copy 1.6s ease-in-out both 56 | 57 | @keyframes copy 58 | 0% 59 | opacity: 0 60 | transform: translateY(10px) 61 | 15%,80% 62 | transform: translateY(0) 63 | opacity: 1 64 | 100% 65 | opacity: 0 66 | transform: translateY(-10px) 67 | --------------------------------------------------------------------------------