✨ #RRGGBBAA support

noeldelgado · Feb 21, 2020 · a80b545 · a80b545
1 parent 90cff5a
commit a80b545
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/src/css/lib/style.css b/src/css/lib/style.css
@@ -1,7 +1,16 @@
-html,
-body { height: 100%; }
+html {
+  height: 100%;
+  /**
+   * CSS gradient checkerboard pattern
+   * https://stackoverflow.com/questions/35361986/css-gradient-checkerboard-pattern
+   */
+  background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+}
 
 body {
+  min-height: 100%;
   line-height: 1;
   font-weight: 800;
 

diff --git a/src/js/lib/app.js b/src/js/lib/app.js
@@ -107,7 +107,8 @@ export default class App {
             theme: 'nano',
             position: 'right',
             components: {
-                hue: true
+                hue: true,
+                opacity: true
             }
         });
     }
@@ -230,18 +231,18 @@ export default class App {
         const { preventHistoryUpdate, preventElementUpdate } = params;
 
         app.color = Color(color);
+        app.pickr.setColor(color);
 
-        let hex = app.color.hex();
+        let hex = app.pickr.getColor().toHEXA().toString();
         let rgb = app.color.rgb().string();
-        let hsl = app.color.hsl().round().string();
-        let hwb = app.color.hwb().round().string();
+        let hsl = app.color.hsl().string(0);
+        let hwb = app.color.hwb().string(0);
         let [ r, g, b] = app.color.unitArray();
 
         let isLight = app.color.isLight();
         let textColor = app.color.mix(Color(isLight ? '#000' : '#fff'), 0.8);
         let borderColor = app.color.mix(Color(isLight ? '#000' : '#fff'), 0.2);
 
-        app.pickr.setColor(hex);
 
         if (preventElementUpdate !== app.ui.hexInput.element) {
             app.ui.hexInput.setValue(hex);