♻️✨➕ General update:

  - code refactor
  - added HSV, CMKYK and LAB support
  - added Google Font dependency

.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "ignorePatterns": ["node_modules/", "out/", "build/"],
+  "ignorePatterns": ["node_modules/", "jsdoc/", "build/"],
   "env": {
     "browser": true,
     "es6": true

package.json

@@ -8,7 +8,8 @@
     "build": "npm run min-css && npm run min-js",
     "min-css": "uglify -s build/css/main.css -o build/css/main.css -c",
     "min-js": "uglify -s build/js/main.js -o build/js/main.js",
-    "svg": "svg-sprite -s --symbol-dest=svg-sprite-symbol --symbol-prefix=.svg- --ss=sprite.svg --si --sx --shape-id-generator=svg-%s --dest=src/assets src/assets/svg/*.svg"
+    "svg": "svg-sprite -s --symbol-dest=svg-sprite-symbol --symbol-prefix=.svg- --ss=sprite.svg --si --sx --shape-id-generator=svg-%s --dest=src/assets src/assets/svg/*.svg",
+    "docs": "jsdoc -c .jsdoc.json"
   },
   "author": "",
   "license": "MIT",
@@ -67,7 +68,9 @@
           ]
         },
         "postcss-cssnext": {
-          "browsers": ["last 1 version"],
+          "browsers": [
+            "last 1 version"
+          ],
           "features": {
             "customProperties": false,
             "calc": false
@@ -87,6 +90,9 @@
             "browser"
           ]
         }
+      },
+      "buble": {
+        "objectAssign": "Object.assign"
       }
     }
   }

src/css/bundles/main.css

@@ -5,9 +5,11 @@ $bundle: true
 */
 @import '@simonwep/pickr/dist/themes/nano.min.css';
 @import '../lib/vendor-overrides/pickr';
+@import '../lib/components/header';
+@import '../lib/components/footer';
 @import '../lib/components/buttons';
-@import '../lib/components/color-item';
 @import '../lib/components/inputs';
+@import '../lib/components/color-item';
 @import '../lib/components/toast';
 @import '../lib/utils';
 @import '../lib/style';
@@ -21,8 +23,9 @@ $bundle: true
   --cc-transition-timing: ease-out;
   --cc-transition-duration: 260ms;
 
-  font-family: system-ui;
+  font-family: 'Roboto Mono', monospace;
   font-size: 16px;
+  line-height: 1.618;
 }
 
 * {
@@ -32,8 +35,11 @@ $bundle: true
 }
 
 body {
-  user-select: none;
   font-kerning: none;
+  user-select: none;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
 }
 
 a {

src/css/lib/components/buttons.css

@@ -3,9 +3,11 @@ button {
   font-size: 0.75rem;
   font-family: inherit;
   font-weight: inherit;
+  padding: 0.5rem;
   border: 2px solid var(--cc-border-color);
-  background-color: var(--cc-text-color);
-  color: var(--cc-main-solid-color);
+  background-color: transparent;
+  color: var(--cc-text-color);
+  border-radius: 3px;
   transition: all var(--cc-transition-duration) var(--cc-transition-timing);
   transition-property: color, background-color, border-color, box-shadow;
 
@@ -17,32 +19,23 @@ button {
     background-color: var(--cc-border-color);
     box-shadow: none;
   }
-}
 
-.cc-btn {
-  border-radius: 3px;
-  border: none;
-  padding: 0.5rem 1rem;
+  &.cc-btn {
+    border: none;
 
-  & > * {
-    display: inline-block;
-    vertical-align: middle;
+    & > * {
+      display: inline-block;
+      vertical-align: middle;
+    }
   }
-}
-
-button.cc-btn-icon {
-  width: 64px;
-  height: 64px;
-  border-radius: 50%;
-  padding: 0;
 
-  &.cc-btn-sm {
-    width: 32px;
-    height: 32px;
-    background-color: var(--cc-main-color);
-    color: var(--cc-text-color);
+  &.cc-btn-icon {
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    padding: 0;
 
-    & > svg {
+    & svg {
       display: block;
       margin: 0 auto;
     }

src/css/lib/components/color-item.css

@@ -1,60 +1,62 @@
-:root {
-  --cc-fsd: 10;
-  --cc-color-item-input-font-size: {
-    font-size: calc(100vw / var(--cc-fsd));
-
-    @media (min-width: 1000px) {
-      font-size: calc(1000px / var(--cc-fsd));
-    }
+.color-items {
+  display: grid;
+  grid-template-columns: auto;
+  max-width: 800px;
+  padding-top: 1rem;
+  list-style: none;
+
+  @media (min-width: 768px) {
+    grid-template-columns: [col] 50% [col] 50%;
+    padding-top: 0;
   }
 }
 
-.cc-color-item {
+.color-item {
   display: flex;
+  font-size: 36px;
   min-height: 48px;
+  margin-bottom: 0.5rem;
 
   &.-hex {
-    --cc-fsd: 7;
-    @apply --cc-color-item-input-font-size;
-    margin: -0.1em 0 -0.2em;
-  }
-
-  &.-rgb {
-    --cc-fsd: 12;
-    @apply --cc-color-item-input-font-size;
-  }
+    font-size: 36px;
 
-  &.-hsl {
-    --cc-fsd: 13;
-    @apply --cc-color-item-input-font-size;
-  }
+    & input {
+      text-transform: uppercase;
+    }
 
-  &.-hwb {
-    --cc-fsd: 13;
-    @apply --cc-color-item-input-font-size;
+    @media (min-width: 768px) {
+      font-size: 144px;
+      grid-column: col / span 2;
+      margin: 0;
+    }
   }
 }
 
-/*
-.cc-color-item__label {
+.color-item__btn {
   display: flex;
   align-items: center;
-  font-size: 0.75rem;
-  padding: 0 0.5rem 0 1rem;
 
-  & > span {
-    width: 10px;
-    writing-mode: vertical-lr;
-    transform: rotate(180deg);
+  & button {
+    display: flex;
+    width: 60px;
+
+    & > * {
+      display: flex;
+      align-items: center;
+    }
   }
-}
-*/
 
-.cc-color-item__btn {
-  order: 1;
+  & svg {
+    margin-right: 0.25rem;
+  }
 }
 
-.cc-color-item__input-wrapper {
-  flex: 1;
-  order: 2;
+.color-item__input {
+  display: flex;
+  position: relative;
+  overflow: hidden;
+
+  & input {
+    letter-spacing: -2px;
+  }
 }

src/css/lib/components/footer.css

@@ -0,0 +1,37 @@
+footer {
+  display: flex;
+  font-size: 0.75rem;
+  padding: 1.5rem 1rem 0;
+
+  & > .footer__info {
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding-left: 1rem;
+    margin-left: 1rem;
+
+    & > :not(:last-child) {
+      margin-right: 1rem;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 25%;
+      bottom: 25%;
+      border-left-width: 1px;
+      border-left-style: dotted;
+    }
+
+    @media (min-width: 768px) {
+      padding-left: 2rem;
+      margin-left: 2rem;
+
+      & > :not(:last-child) {
+        margin-right: 1.5rem;
+      }
+    }
+  }
+}
+

src/css/lib/components/header.css

@@ -0,0 +1,6 @@
+header {
+  position: relative;
+  font-style: italic;
+  padding: 0 1rem;
+}
+

src/css/lib/components/inputs.css

@@ -1,13 +1,10 @@
-.cc-input {
+input.cc-input {
   border: none;
   width: 100%;
   font-family: inherit;
   font-size: inherit;
-  padding: 0;
-  margin: 0;
-  font-weight: 900;
-  letter-spacing: -2px;
-  background: rgba(0, 0, 0, 0);
+  font-weight: inherit;
+  background-color: transparent;
   color: inherit;
   outline: none;
   text-overflow: ellipsis;

src/css/lib/components/toast.css

@@ -3,6 +3,7 @@
   position: fixed;
   top: 1rem;
   left: 1rem;
+  max-width: calc(100vw - 2rem);
 
   &.show > .toast {
     opacity: 1;
@@ -11,14 +12,12 @@
 }
 
 .toast {
-  display: inline-block;
-  padding: 0.75rem 1.25rem;
-  font-weight: 400;
+  padding: 0.5rem 1rem;
   background: var(--cc-text-color);
   color: var(--cc-main-color);
   border-radius: 3px;
   opacity: 0;
-  transform: translate3d(-1rem, 0, 0);
+  transform: translate3d(-0.5rem, 0, 0);
   transition: all var(--cc-transition-duration) var(--cc-transition-timing);
   transition-property: opacity, transform;
 }