@thednp/color-picker 2.0.1 → 2.0.3

package/src/scss/color-picker.scss

@@ -1,536 +0,0 @@
-@import "variables";
-
-*, *::before, *::after {
-  box-sizing: border-box;
-}
-
-/* :host */
-.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 * 1%);
-
-        --#{$name}-#{$lvl}: #{$rgba};
-
-        // --#{$name}-#{$lvl}: #{rgba($color, $lvl * 1%)};
-      }
-    }
-  }
-
-  --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 {
-  outline: none;
-}
-
-/* color-dropdown */
-.color-dropdown {
-  position: absolute;
-  z-index: 50;
-  display: none;
-  flex-direction: column;
-  width: min-content;
-  padding: .5rem;
-  color: var(--dropdown-color);
-  background: var(--dropdown-bg);
-  border-radius: .5rem;
-  box-shadow: var(--dropdown-shadow);
-  opacity: 0;
-  transition: var(--dropdown-transition);
-}
-
-.color-dropdown.picker { left: 0; }
-
-.color-dropdown.menu {
-  right: 0;
-  max-height: 230px;
-}
-
-.open .color-dropdown.top {
-  top: auto;
-  bottom: 100%;
-}
-.color-dropdown.bottom { top: 100%; }
-
-.open .color-dropdown.top,
-.open .color-dropdown.bottom {
-  display: flex;
-}
-
-.color-dropdown.show {
-  opacity: 1;
-}
-.color-dropdown.show.top { transform: translate(0, -5px); }
-.color-dropdown.show.bottom { transform: translate(0, 5px); }
-
-/* color-controls */
-.color-controls {
-  display: none;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  width: max-content;
-}
-
-/* btn-appearance */
-.btn-appearance {
-  width: 100%;
-
-  // height: 1.5rem;
-  padding: .6rem 1rem;
-  font-size: 1rem;
-  line-height: 1.5;
-  border: 0;
-  border-radius: .25rem;
-  outline: none;
-  appearance: none;
-
-  // transition-duration: .33s;
-  // transition-property: box-shadow, border;
-  transition: var(--btn-transition);
-}
-
-.btn-appearance:focus,
-.btn-appearance:hover {
-  box-shadow: 0 0 0 3px var(--black-15);
-}
-
-/* color-preview */
-.color-preview {
-  box-shadow: 0 0 0 1px rgba(120,120,120,33%) inset;
-  direction: ltr; /* color value can never be rtl */
-}
-
-.txt-dark .color-preview {
-  color: var(--white-75);
-}
-
-.txt-dark .color-preview:focus {
-  box-shadow: 0 0 0 1px #fff inset, 0 0 0 3px var(--black-15);
-}
-
-.txt-dark .color-preview::placeholder {
-  color: var(--white-50);
-}
-
-.txt-light .color-preview {
-  color: var(--black-75);
-}
-
-.txt-light .color-preview:focus {
-  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: var(--black-50);
-}
-
-/* picker-toggle */
-.picker-toggle {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-}
-
-.open .picker-toggle {
-  z-index: -1;
-}
-
-/* menu-toggle */
-.menu-toggle {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: flex;
-  width: 3rem;
-  height: 100%;
-  padding: 0 .25rem;
-  cursor: pointer;
-  border: 0;
-  border-radius: 0 .25rem .25rem 0;
-}
-
-.txt-light .menu-toggle {
-  background: var(--black-50);
-
-  &:focus {
-    background: var(--black-75);
-  }
-}
-
-.txt-dark .menu-toggle {
-  background: var(--white-33);
-
-  &:focus {
-    background: var(--white-50);
-  }
-}
-
-.menu-toggle svg {
-  width: auto;
-  height: 100%;
-}
-
-/* scrollable */
-.scrollable {
-  overflow: hidden auto;
-
-  // overflow-x: hidden;
-  // overflow-y: auto;
-  scrollbar-width: thin;
-}
-
-.scrollable::-webkit-scrollbar {
-  width: .5rem;
-}
-
-.scrollable::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-.scrollable::-webkit-scrollbar-thumb {
-  width: .5rem;
-  background-color: transparent;
-  background-clip: content-box;
-  border: 0;
-}
-
-.scrollable:hover::-webkit-scrollbar-thumb {
-  background-color: var(--dropdown-scrollbar-bg);
-}
-
-.scrollable::-webkit-scrollbar-thumb:hover {
-  background-color: var(--dropdown-scrollbar-bg-hover);
-}
-
-/* color-defaults */
-.color-defaults {
-  display: none;
-
-  // flex-wrap: ;
-  flex-flow: column wrap;
-  margin: 0;
-  list-style: none;
-  padding-inline: 0; // Firefox
-}
-
-.color-dropdown.menu .color-defaults,
-.color-dropdown.picker .color-controls {
-  display: flex;
-}
-
-// .color-dropdown.menu {
-//   max-height: 230px;
-// }
-
-.color-defaults .color-option {
-  padding: .25rem .5rem;
-  color: inherit;
-}
-
-.color-option {
-  cursor: pointer;
-}
-
-.color-defaults .color-option:focus,
-.color-defaults .color-option:hover {
-  color: var(--option-color-hover);
-  background: var(--option-bg-hover);
-  outline: none;
-}
-
-.color-defaults .color-option:active,
-.color-defaults .color-option.active {
-  color: var(--option-color-active);
-  background: var(--option-bg-active);
-}
-
-/* color-options grid */
-.color-options {
-  --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);
-}
-
-.color-options.scrollable {
-  height: var(--grid-height);
-  margin: 0 -.5rem 0 0; // 0.5rem is the scrollbar width
-  overflow-y: scroll;
-  transition: var(--options-transition);
-}
-
-// .color-options.scrollable:hover {
-.color-dropdown.menu:hover .scrollable {
-  height: var(--grid-hover-height);
-}
-
-.color-options + .color-defaults {
-  margin-top: .25rem;
-}
-
-.multiline + .color-defaults {
-  flex-flow: row wrap;
-
-  .color-option {
-    padding: .25rem .33rem; font-size: 12px;
-  }
-}
-
-.color-options .color-option {
-  // hide any text
-  position: relative;
-  width: var(--grid-item-size);
-  height: var(--grid-item-size);
-  overflow: hidden;
-  color: rgba(0,0,0,0%);
-
-  &:active, &:focus {
-    outline: none;
-    box-shadow: 0 0 0 4px rgba(125,125,125,75%) inset;
-  }
-}
-
-// .color-options .color-option:active,
-// .color-options .color-option:focus {
-//   outline: none;
-// }
-
-.color-options .color-option::before {
-  position: absolute;
-  inset: 0;
-}
-
-.color-options .color-option:hover::before,
-.color-options .color-option:active::before,
-.color-options .color-option:focus::before {
-  content: "";
-  border: 3px solid var(--white-75);
-  mix-blend-mode: difference;
-}
-
-// .color-options .color-option {
-//   &:active, &:focus {
-//     outline: none;
-//     box-shadow: 0 0 0 4px rgba(125,125,125,75%) inset;
-//   }
-// }
-
-.color-options .color-option.active {
-  &::after {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 4px;
-    height: 4px;
-    margin: -2px 0 0 -2px;
-    content: "";
-    border-radius: 4px;
-  }
-}
-
-.txt-dark .color-options .color-option.active::after {
-  box-shadow: 0 0 0 4px var(--white-90);
-}
-
-.txt-light .color-options .color-option.active::after {
-  box-shadow: 0 0 0 4px var(--black-90);
-}
-
-/* color-form */
-.color-form {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  padding: .25rem 0 0;
-  font: 12px sans-serif;
-}
-
-.color-form.hex { max-width: initial; }
-
-.color-form > * {
-  flex: 1 0 0%;
-  width: 17.5%;
-  max-width: 17.5%;
-}
-
-.color-form label {
-  width: 7.5%;
-  max-width: 7.5%;
-  text-align: center;
-}
-
-.color-input {
-  color: inherit;
-  text-align: right;
-  background: transparent;
-  border: var(--input-border);
-  outline: none;
-}
-
-.color-input.hex {
-  width: 92.5%;
-  max-width: 92.5%;
-}
-
-.color-input:active,
-.color-input:focus {
-  background: var(--input-bg-hover);
-  border: var(--input-border-hover);
-}
-
-/* visual control */
-.visual-control {
-  height: 230px;
-
-  /* important for mobile devices */
-  touch-action: none;
-  box-shadow: var(--visual-shadow);
-}
-
-.visual-control1 {
-  width: 230px;
-}
-
-.visual-control2,
-.visual-control3 {
-  width: 21px;
-  cursor: ns-resize;
-}
-
-@media (width >= 980px) {
-  .visual-control { height: 300px; }
-  .visual-control1 { width: 300px; }
-}
-
-.color-control {
-  position: relative;
-  display: inline-block;
-}
-
-.color-slider {
-  left: 0;
-  width: calc(100% - 2px);
-  cursor: ns-resize;
-}
-
-.color-control + .color-control {
-  margin-left: .5rem;
-}
-
-/* knob */
-.knob {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 7px;
-
-  /* important for mobile devices */
-  touch-action: none;
-  user-select: none;
-  background-color: var(--knob-bg);
-  border: var(--knob-border);
-  border-radius: 5px;
-  outline: none;
-  will-change: transform;
-}
-
-.knob:hover {
-  box-shadow: var(--knob-shadow-hover);
-}
-
-.knob:focus,
-.knob:active {
-  z-index: 1;
-  box-shadow: var(--knob-shadow-active);
-}
-
-/* color-pointer */
-.color-pointer {
-  width: 7px;
-  background-color: transparent;
-  border: 0;
-}
-
-.txt-dark .color-pointer {
-  box-shadow: 0 0 0 5px var(--white-50);
-}
-
-.txt-light .color-pointer {
-  box-shadow: 0 0 0 5px var(--black-50);
-}
-
-.txt-dark .color-pointer:hover {
-  box-shadow: 0 0 0 5px var(--white-75);
-}
-
-.txt-light .color-pointer:hover {
-  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 var(--white-90);
-}
-
-.txt-light .color-pointer:focus,
-.txt-light .color-pointer:active {
-  box-shadow: 0 0 0 5px var(--black-90);
-}
-
-/* utility */
-.v-hidden {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  clip: rect(0,0,0,0) !important;
-  white-space: nowrap !important;
-  border: 0 !important;
-}

package/src/ts/colorPalette.ts

@@ -1,89 +0,0 @@
-import Color from '@thednp/color';
-// import { isNumber } from '@thednp/shorty';
-
-/**
- * Returns a color palette with a given set of parameters.
- *
- * @example
- * new ColorPalette(0, 12, 10, 80);
- * // => { hue: 0, hueSteps: 12, lightSteps: 10, saturation: 80, colors: Array<Color> }
- */
-export default class ColorPalette {
-  public static Color = Color;
-  hue: number;
-  hueSteps: number;
-  lightSteps: number;
-  saturation: number;
-  colors: Color[];
-  /**
-   * The `hue` parameter is optional, which would be set to 0.
-   * * `args.hue` the starting Hue [0, 360]
-   * * `args.hueSteps` Hue Steps Count [5, 24]
-   * * `args.lightSteps` Lightness Steps Count [5, 12]
-   * * `args.saturation` Saturation [0, 100]
-   */
-  constructor(...args: [number?, number?, number?, number?]) {
-    let hue = 0;
-    let hueSteps = 12;
-    let lightSteps = 10;
-    let lightnessArray = [0.5];
-    let saturation = 100;
-    // if (!args.every(n => isNumber(n))) throw TypeError('ColorPalette only accepts numbers.');
-
-    if (args.length === 4) {
-      [hue, hueSteps, lightSteps, saturation] = args as [number, number, number, number];
-    } else if (args.length === 3) {
-      [hue, hueSteps, lightSteps] = args as [number, number, number];
-    } else if (args.length === 2) {
-      [hueSteps, lightSteps] = args as [number, number];
-      if ([hueSteps, lightSteps].some(n => n < 1)) {
-        throw TypeError('ColorPalette: the two minimum arguments must be numbers higher than 0.');
-      }
-    }
-
-    const colors: Color[] = [];
-    const hueStep = 360 / hueSteps;
-    const half = Color.roundPart((lightSteps - (lightSteps % 2 ? 1 : 0)) / 2);
-    const steps1To13 = [0.25, 0.2, 0.15, 0.11, 0.09, 0.075];
-    const lightSets = [
-      [1, 2, 3],
-      [4, 5],
-      [6, 7],
-      [8, 9],
-      [10, 11],
-      [12, 13],
-    ];
-    const closestSet = lightSets.find(set => set.includes(lightSteps));
-
-    // find a lightStep that won't go beyond black and white
-    // something within the [10-90] range of lightness
-    const lightStep = closestSet
-      ? steps1To13[lightSets.indexOf(closestSet)]
-      : 100 / (lightSteps + (lightSteps % 2 ? 0 : 1)) / 100;
-
-    // light tints
-    for (let i = 1; i < half + 1; i += 1) {
-      lightnessArray = [...lightnessArray, 0.5 + lightStep * i];
-    }
-
-    // dark tints
-    for (let i = 1; i < lightSteps - half; i += 1) {
-      lightnessArray = [0.5 - lightStep * i, ...lightnessArray];
-    }
-
-    // feed `colors` Array
-    for (let i = 0; i < hueSteps; i += 1) {
-      const currentHue = ((hue + i * hueStep) % 360) / 360;
-      lightnessArray.forEach(l => {
-        const newColor = new Color({ h: currentHue, s: 1, l });
-        colors.push(saturation < 100 ? newColor.saturate(saturation - 100) : newColor);
-      });
-    }
-
-    this.hue = hue;
-    this.hueSteps = hueSteps;
-    this.lightSteps = lightSteps;
-    this.saturation = saturation;
-    this.colors = colors;
-  }
-}