@thednp/color-picker 0.0.2 → 1.0.0

package/src/scss/color-picker.scss

@@ -1,8 +1,43 @@
+@import "variables";
+
 /* :host */
 color-picker,
 .color-picker {
   position: relative;
   display: flex;
+
+  @each $name in "white", "black" {
+    @each $lvl in $transparency-levels {
+      @if (type-of($name) == "string" and type-of($lvl) == "number") {
+        $color: #fff;
+        @if $name == "black" {
+          $color: #000;
+        }
+        $rgba: rgba($color, $lvl * .01);
+        --#{$name}-#{$lvl}: #{$rgba};
+      }
+    }
+  }
+  --dropdown-transition: #{$dropdown-transition};
+  --btn-transition: #{$btn-transition};
+  --options-transition: #{$options-transition};
+  --dropdown-bg: var(--black-75);
+  --dropdown-color: var(--white-75);
+  --dropdown-shadow: 0 6px 12px var(--black-33);
+  --dropdown-scrollbar-bg: var(--white-33);
+  --dropdown-scrollbar-bg-hover: var(--white-50);
+  --knob-bg: #000;
+  --knob-border: 1px solid var(--white-90);
+  --knob-shadow-hover: 0 0 0 6px var(--white-50);
+  --knob-shadow-active: 0 0 0 6px var(--white-90);
+  --input-border: 1px solid var(--white-15);
+  --input-border-hover: 1px solid var(--white-33);
+  --input-bg-hover: var(--black-15);
+  --option-color-hover: var(--black-75);
+  --option-bg-hover: var(--white-50);
+  --option-color-active: var(--black-75);
+  --option-bg-active: var(--white-90);
+  --visual-shadow: 0 0 0 1px var(--white-15) inset;
 }
 
 color-picker:focus,
@@ -18,12 +53,12 @@ color-picker:focus,
   flex-direction: column;
   width: min-content;
   padding: .5rem;
-  color: rgba(255,255,255,.8);
-  background: rgba(0,0,0,.75);
+  color: var(--dropdown-color);
+  background: var(--dropdown-bg);
   border-radius: .5rem;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, .4);
+  box-shadow: var(--dropdown-shadow);
   opacity: 0;
-  transition: transform .33s ease, opacity .33s ease;
+  transition: var(--dropdown-transition);
 }
 
 .color-dropdown.picker { left: 0; }
@@ -65,12 +100,13 @@ color-picker:focus,
   border-radius: .25rem;
   outline: none;
   appearance: none;
-  transition-duration: .33s;
-  transition-property: box-shadow, border;
+  // transition-duration: .33s;
+  // transition-property: box-shadow, border;
+  transition: var(--btn-transition);
 }
 .btn-appearance:focus,
 .btn-appearance:hover {
-  box-shadow: 0 0 0 3px rgba(0,0,0,.15);
+  box-shadow: 0 0 0 3px var(--black-15);
 }
 
 /* color-preview */
@@ -80,23 +116,23 @@ color-picker:focus,
 }
 
 .txt-dark .color-preview {
-  color: rgba(255,255,255,.8);
+  color: var(--white-75);
 }
 .txt-dark .color-preview:focus {
-  box-shadow: 0 0 0 1px rgb(255,255,255) inset, 0 0 0 3px rgba(0,0,0,.15);
+  box-shadow: 0 0 0 1px #fff inset, 0 0 0 3px var(--black-15);
 }
 .txt-dark .color-preview::placeholder {
-  color: rgba(255,255,255,.6);
+  color: var(--white-50);
 }
 .txt-light .color-preview {
-  color: rgba(0,0,0,.8);
+  color: var(--black-75);
 }
 .txt-light .color-preview:focus {
-  color: rgba(0,0,0,.8);
-  box-shadow: 0 0 0 1px rgba(0,0,0,.5) inset, 0 0 0 3px rgba(0,0,0,.15);
+  color: var(--black-75);
+  box-shadow: 0 0 0 1px var(--black-50) inset, 0 0 0 3px var(--black-15);
 }
 .txt-light .color-preview::placeholder {
-  color: rgba(0,0,0,.6);
+  color: var(--black-50);
 }
 
 /* picker-toggle */
@@ -128,18 +164,18 @@ color-picker:focus,
   border-radius: 0 .25rem .25rem 0;
 }
 .txt-light .menu-toggle {
-  background: rgba(0,0,0,.5);
+  background: var(--black-50);
 }
 .txt-light .menu-toggle:focus,
 .txt-light .menu-toggle:focus {
-  background: rgba(0,0,0,.7);
+  background: var(--black-75);
 }
 .txt-dark .menu-toggle {
-  background: rgba(255,255,255,.33);
+  background: var(--white-33);
 }
 .txt-dark .menu-toggle:focus,
 .txt-dark .menu-toggle:focus {
-  background: rgba(255,255,255,.5);
+  background: var(--white-50);
 }
 .menu-toggle svg {
   width: auto;
@@ -168,11 +204,11 @@ color-picker:focus,
 }
 
 .scrollable:hover::-webkit-scrollbar-thumb {
-  background-color: rgba(255,255,255,.33);
+  background-color: var(--dropdown-scrollbar-bg);
 }
 
 .scrollable::-webkit-scrollbar-thumb:hover {
-  background-color: #fff;
+  background-color: var(--dropdown-scrollbar-bg-hover);
 }
 
 /* color-defaults */
@@ -205,27 +241,28 @@ color-picker:focus,
 
 .color-defaults .color-option:focus,
 .color-defaults .color-option:hover {
-  background: rgba(255,255,255,.3);
+  color: var(--option-color-hover);
+  background: var(--option-bg-hover);
   outline: none;
 }
 
 .color-defaults .color-option:active,
 .color-defaults .color-option.active {
-  color: #000;
-  background: #fff;
+  color: var(--option-color-active);
+  background: var(--option-bg-active);
 }
 
 /* color-options grid */
 .color-options {
-  display: grid;
-  padding: 0;
-  margin: 0;
-  list-style: none;
   --grid-item-size: 2rem; // grid item width / height
   --grid-fit: 5; // grid columns
   --grid-gap: .25rem; // grid vertical / horizontal spacing
   --grid-height: auto; // default height
   --grid-hover-height: auto; // height on hover
+  display: grid;
+  padding: 0;
+  margin: 0;
+  list-style: none;
   grid-template-columns: repeat(var(--grid-fit), var(--grid-item-size));
   grid-template-rows: repeat(auto-fill, var(--grid-item-size));
   gap: var(--grid-gap);
@@ -234,7 +271,7 @@ color-picker:focus,
   height: var(--grid-height);
   margin: 0 -.5rem 0 0; // 0.5rem is the scrollbar width
   overflow-y: scroll;
-  transition: height .33s ease;
+  transition: var(--options-transition);
 }
 .color-options.scrollable:hover {
   height: var(--grid-hover-height);
@@ -272,7 +309,7 @@ color-picker:focus,
 .color-options .color-option:active::before,
 .color-options .color-option:focus::before {
   content: "";
-  border: 3px solid rgba(255,255,255.3,.75);
+  border: 3px solid var(--white-75);
   mix-blend-mode: difference;
 }
 
@@ -294,10 +331,10 @@ color-picker:focus,
   }
 }
 .txt-dark .color-options .color-option.active:after {
-  box-shadow: 0 0 0 4px rgba(255,255,255,.9);
+  box-shadow: 0 0 0 4px var(--white-90);
 }
 .txt-light .color-options .color-option.active:after {
-  box-shadow: 0 0 0 4px rgba(0,0,0,.9);
+  box-shadow: 0 0 0 4px var(--black-90);
 }
 
 /* color-form */
@@ -328,25 +365,27 @@ color-picker:focus,
   color: inherit;
   text-align: right;
   background: transparent;
-  border: 1px solid rgba(255,255,255,.15);
+  border: var(--input-border);
   outline: none;
 }
 
 .color-input.hex {
   width: 92.5%;
   max-width: 92.5%;
-  /* width: calc(100% - 4% - 1rem); */
 }
 
 .color-input:active,
 .color-input:focus {
-  background: rgba(0,0,0,.25);
-  border: 1px solid rgba(255,255,255,.33);
+  background: var(--input-bg-hover);
+  border: var(--input-border-hover);
 }
 
 /* visual control */
 .visual-control {
   height: 150px;
+  /* important for mobile devices */
+  touch-action: none;
+  box-shadow: var(--visual-shadow);
 }
 
 .visual-control1 {
@@ -389,20 +428,22 @@ color-picker:focus,
   top: 0;
   left: 0;
   height: 7px;
+  /* important for mobile devices */
+  touch-action: none;
   user-select: none;
-  background-color: #000;
-  border: 1px solid #fff;
+  background-color: var(--knob-bg);
+  border: var(--knob-border);
   border-radius: 5px;
   outline: none;
   will-change: transform;
 }
 .knob:hover {
-  box-shadow: 0 0 0 6px rgba(255,255,255,.5);
+  box-shadow: var(--knob-shadow-hover);
 }
 .knob:focus,
 .knob:active {
   z-index: 1;
-  box-shadow: 0 0 0 6px rgba(255,255,255,.9);
+  box-shadow: var(--knob-shadow-active);
 }
 
 /* color-pointer */
@@ -413,26 +454,26 @@ color-picker:focus,
 }
 
 .txt-dark .color-pointer {
-  box-shadow: 0 0 0 5px rgba(255,255,255,.5);
+  box-shadow: 0 0 0 5px var(--white-50);
 }
 .txt-light .color-pointer {
-  box-shadow: 0 0 0 5px rgba(0,0,0,.5);
+  box-shadow: 0 0 0 5px var(--black-50);
 }
 
 .txt-dark .color-pointer:hover {
-  box-shadow: 0 0 0 5px rgba(255,255,255,.75);
+  box-shadow: 0 0 0 5px var(--white-75);
 }
 .txt-light .color-pointer:hover {
-  box-shadow: 0 0 0 5px rgba(0,0,0,.75);
+  box-shadow: 0 0 0 5px var(--black-75);
 }
 
 .txt-dark .color-pointer:focus,
 .txt-dark .color-pointer:active {
-  box-shadow: 0 0 0 5px rgba(255,255,255,.9);
+  box-shadow: 0 0 0 5px var(--white-90);
 }
 .txt-light .color-pointer:focus,
 .txt-light .color-pointer:active {
-  box-shadow: 0 0 0 5px rgba(0,0,0,.9);
+  box-shadow: 0 0 0 5px var(--black-90);
 }
 
 /* utility */

package/types/index.d.ts

@@ -45,4 +45,4 @@ declare module "@thednp/color-picker/src/js/color-picker-element" {
 }
 
 export * as SHORTER from "shorter-js";
-export * as EventListener from "event-listener.js";
+export * as EventListener from "@thednp/event-listener";

package/types/source/types.d.ts

@@ -32,9 +32,6 @@ export interface RGBA extends RGB {
  * @link https://en.wikibooks.org/wiki/Color_Models:_RGB,_HSV,_HSL#HSL
  */
 export interface HSL {
-  // h: number | string;
-  // s: number | string;
-  // l: number | string;
   h: number;
   s: number;
   l: number;
@@ -79,12 +76,17 @@ export interface ColorPickerOptions {
   colorLabels?: string[];
   componentLabels?: Record<string, string>;
   format?: ColorFormats;
-  colorPresets?: string[];
+  colorPresets?: string[] | {
+    hue: number,
+    lightSteps: number,
+    hueSteps: number,
+    colors: string[],
+  };
   colorKeywords?: string[];
 }
 
 export type ColorInput = string | RGB | RGBA | HSL | HSLA | HSV | HSVA | HWB | ColorObject;
 export type ColorFormats = string | 'rgb' | 'hex' | 'hex3' | 'hex4' | 'hex6' | 'hex8' | 'hsl' | 'hsv' | 'hwb';
 
-export type GetInstance<T> = (element: string | HTMLInputElement) => T | null;
-export type InitCallback<T> = (element: string | HTMLInputElement) => T;
+export type GetInstance<T, ET> = (target: ET | string, component: string) => T | null;
+export type InitCallback<T> = (element: HTMLInputElement | string ) => T;