@thednp/color-picker 0.0.2-alpha5 → 1.0.1

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 #000 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/cp.d.ts

@@ -334,12 +334,6 @@ declare module "color-picker/src/js/color-picker" {
         format: CP.ColorFormats;
         /** Shows the `ColorPicker` dropdown. */
         showPicker(): void;
-        /**
-         * The `Space` & `Enter` keys specific event listener.
-         * Toggle visibility of the `ColorPicker` / the presets menu, showing one will hide the other.
-         * @param {KeyboardEvent} e
-         * @this {ColorPicker}
-         */
         /**
          * Toggle the `ColorPicker` dropdown visibility.
          * @param {Event=} e
@@ -354,10 +348,10 @@ declare module "color-picker/src/js/color-picker" {
         toggleMenu(this: ColorPicker, e?: Event | undefined): void;
         /**
          * The `ColorPicker` click event listener for the colour menu presets / defaults.
-         * @param {Partial<Event>} e
+         * @param {Event} e
          * @this {ColorPicker}
          */
-        menuClickHandler(this: ColorPicker, e: Partial<Event>): void;
+        menuClickHandler(this: ColorPicker, e: Event): void;
         /**
          * The `ColorPicker` keyboard event listener for menu navigation.
          * @param {KeyboardEvent} e
@@ -366,21 +360,21 @@ declare module "color-picker/src/js/color-picker" {
         menuKeyHandler(this: ColorPicker, e: KeyboardEvent): void;
         /**
          * The `ColorPicker` *touchstart* / *mousedown* events listener for control knobs.
-         * @param {TouchEvent} e
+         * @param {PointerEvent} e
          * @this {ColorPicker}
          */
-        pointerDown(this: ColorPicker, e: TouchEvent): void;
+        pointerDown(this: ColorPicker, e: PointerEvent): void;
         /**
          * The `ColorPicker` *touchmove* / *mousemove* events listener for control knobs.
-         * @param {TouchEvent} e
+         * @param {PointerEvent} e
          */
-        pointerMove(e: TouchEvent): void;
+        pointerMove(e: PointerEvent): void;
         /**
          * The `ColorPicker` *touchend* / *mouseup* events listener for control knobs.
-         * @param {TouchEvent} e
+         * @param {PointerEvent} e
          * @this {ColorPicker}
          */
-        pointerUp(this: ColorPicker, { target }: TouchEvent): void;
+        pointerUp(this: ColorPicker, { target }: PointerEvent): void;
         /**
          * Updates `ColorPicker` control positions on:
          * * initialization
@@ -422,7 +416,7 @@ declare module "color-picker/src/js/color-picker" {
         colorMenu: HTMLElement;
         /** @type {HTMLInputElement[]} */
         inputs: HTMLInputElement[];
-        controls: Element | HTMLElement;
+        controls: any;
         /** @type {(HTMLElement | Element)[]} */
         controlKnobs: (HTMLElement | Element)[];
         /** @type {(HTMLElement)[]} */
@@ -508,14 +502,34 @@ declare module "color-picker/src/js/color-picker" {
     import ColorPalette from "color-picker/src/js/color-palette";
     import Color from "color-picker/src/js/color";
 }
+declare module "color-picker/src/js/util/toggleCEAttr" {
+    /**
+     * A small utility to toggle `ColorPickerElement` attributes
+     * when `connectedCallback` or `disconnectedCallback` methods
+     * are called and helps the instance keep its value and settings instact.
+     *
+     * @param {CP.ColorPickerElement} self ColorPickerElement instance
+     * @param {Function=} callback when `true`, attributes are added
+     *
+     * @example
+     * const attributes = [
+     *   // essentials
+     *   'value', 'format',
+     *   // presets menus
+     *   'color-presets', 'color-keywords',
+     *   // labels
+     *   'color-labels', 'component-labels',
+     * ];
+     */
+    export default function toggleCEAttr(self: CP.ColorPickerElement, callback?: Function | undefined): void;
+}
 declare module "color-picker/src/js/color-picker-element" {
     export default ColorPickerElement;
     /**
      * `ColorPickerElement` Web Component.
      * @example
      * <label for="UNIQUE_ID">Label</label>
-     * <color-picker>
-     *   <input id="UNIQUE_ID" value="red" format="hex" class="color-preview btn-appearance">
+     * <color-picker data-id="UNIQUE_ID" data-value="red" data-format="hex">
      * </color-picker>
      * // or
      * <label for="UNIQUE_ID">Label</label>

package/types/index.d.ts

@@ -18,7 +18,6 @@ export {
   InitCallback,
 } from './source/types';
 
-import './cp';
 import { default as Color } from "color-picker/src/js/color";
 import { default as ColorPalette } from "color-picker/src/js/color-palette";
 import { default as ColorPicker } from "color-picker/src/js/color-picker";
@@ -43,6 +42,3 @@ declare module "@thednp/color-picker/src/js/color-picker" {
 declare module "@thednp/color-picker/src/js/color-picker-element" {
   export default ColorPickerElement;
 }
-
-export * as SHORTER from "shorter-js";
-export * as EventListener from "event-listener.js";

package/types/source/source.ts

@@ -1,4 +1,3 @@
-// export { default as Color } from "../../types/source/types";
 export { default as Color } from "../../src/js/color";
 export { default as ColorPalette } from "../../src/js/color-palette";
 export { default as ColorPicker } from "../../src/js/color-picker";

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;