Widget gets the name pickr

index.html

@@ -8,8 +8,8 @@
     <title>Color Picker</title>
 
     <!-- CSS STYLESHEETS -->
-    <link href="https://fonts.googleapis.com/css?family=Montserrat:200,400" rel="stylesheet">
-    <link href="dist/color-picker.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:200,400,500" rel="stylesheet">
+    <link href="dist/pickr.min.css" rel="stylesheet">
     <link href="gh-page/styles.css" rel="stylesheet">
 </head>
 
@@ -25,7 +25,7 @@ <h1>Flat color picker</h1>
     </main>
 
 
-    <script src="dist/color-picker.min.js"></script>
+    <script src="dist/pickr.min.js"></script>
     <script src="gh-page/script.js"></script>
 </body>
 

package.json

@@ -1,8 +1,8 @@
 {
     "name": "color-picker",
     "version": "0.0.1",
-    "description": "UX Color picker",
-    "main": "color-picker.js",
+    "description": "Flat, Simple, Hackable Color-Picker.",
+    "main": "dist/pickr.js",
     "scripts": {
         "build": "webpack --mode production",
         "dev": "webpack-dev-server --mode development"

src/js/color-picker.js → src/js/pickr.js

@@ -5,15 +5,15 @@
  */
 
 // Import styles
-import './../scss/color-picker.scss';
+import '../scss/pickr.scss';
 
 // Imports
 import * as _ from './lib/utils';
 import {HSLaColor} from './lib/hslacolor';
 import Moveable from './helper/moveable';
 import Selectable from './helper/selectable';
 
-class ColorPicker {
+class Pickr {
 
     constructor(opt) {
 
@@ -350,14 +350,14 @@ function create(o) {
 }
 
 // Static methods
-ColorPicker.utils = {
+Pickr.utils = {
     on: _.on,
     off: _.off,
     createElementFromString: _.createElementFromString
 };
 
 // Create instance via method
-ColorPicker.create = (options) => new ColorPicker(options);
+Pickr.create = (options) => new Pickr(options);
 
 // Export
-module.exports = ColorPicker;
+module.exports = Pickr;

webpack.config.js

@@ -5,17 +5,17 @@ module.exports = {
 
     plugins: [
         new MiniCssExtractPlugin({
-            filename: 'color-picker.min.css'
+            filename: 'pickr.min.css'
         })
     ],
 
-    entry: './src/js/color-picker.js',
+    entry: './src/js/pickr.js',
 
     output: {
         path: __dirname + '/dist',
         publicPath: 'dist/',
-        filename: 'color-picker.min.js',
-        library: 'ColorPicker',
+        filename: 'pickr.min.js',
+        library: 'Pickr',
         libraryTarget: 'umd'
     },