@adobe/spectrum-css/dist/components/colorhandle/index-vars.css

The Spectrum CSS top-level backwards compatible package

.spectrum-ColorHandle {
  --spectrum-colorhandle-background-offset: calc(-1 * var(--spectrum-global-dimension-static-size-25, 2px));
  --spectrum-colorhandle-checkerboard-size: var(--spectrum-global-dimension-static-size-100, 8px);

  --spectrum-colorhandle-animation-duration: var(--spectrum-global-animation-duration-100, 130ms);
  --spectrum-colorhandle-animation-easing: ease-in-out;

  --spectrum-colorhandle-hitarea-size: var(--spectrum-global-dimension-size-300);
}

.spectrum-ColorHandle.is-focused,
.spectrum-ColorHandle.focus-ring {
  width: calc(var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) * 2);
  height: calc(var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) * 2);

  margin-left: calc(-1 * var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));
  margin-top: calc(-1 * var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));
}

.spectrum-ColorHandle {
  display: block;
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  width: var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200));
  height: var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200));

  margin-left: calc(-1 * var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) / 2);
  margin-top: calc(-1 * var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) / 2);

  border-width: var(--spectrum-colorhandle-inner-border-size, var(--spectrum-global-dimension-static-size-25));
  border-style: solid;

  background-size:
    var(--spectrum-global-dimension-static-size-200, 16px)
    var(--spectrum-global-dimension-static-size-200, 16px);
  background-position:
    var(--spectrum-colorhandle-background-offset) var(--spectrum-colorhandle-background-offset),
    var(--spectrum-colorhandle-background-offset) calc(var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset)),
    calc(var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset)) calc(-1 * var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset)),
    calc(-1 * var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset)) var(--spectrum-colorhandle-background-offset);

  transition:
    width var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),
    height var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),
    border-width var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),
    margin-left var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),
    margin-top var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing);
}

.spectrum-ColorHandle,
  .spectrum-ColorHandle:after {
    border-radius: 100%;
  }

.spectrum-ColorHandle:after {
    content: '';
    left: calc(50% - var(--spectrum-colorhandle-hitarea-size) / 2);
    top: calc(50% - var(--spectrum-colorhandle-hitarea-size) / 2);
    position: absolute;
    display: block;
    width: var(--spectrum-colorhandle-hitarea-size);
    height: var(--spectrum-colorhandle-hitarea-size);
  }

.spectrum-ColorHandle.is-disabled {
    pointer-events: none;
  }

.spectrum-ColorHandle-color {
  border-radius: 100%;
  width: 100%;
  height: 100%;
}

.spectrum-ColorHandle {
  --spectrum-colorhandle-background-offset: calc(-1 * var(--spectrum-global-dimension-static-size-25, 2px));
  --spectrum-colorhandle-checkerboard-size: var(--spectrum-global-dimension-static-size-100, 8px);
  --spectrum-colorhandle-outer-border-color: rgba(0, 0, 0, 0.42);
}

.spectrum-ColorHandle {
  border-color: var(--spectrum-colorhandle-inner-border-color, var(--spectrum-global-color-static-white));
  box-shadow: 0 0 0 var(--spectrum-colorhandle-outer-border-size, var(--spectrum-global-dimension-static-size-10)) var(--spectrum-colorhandle-outer-border-color, var(--spectrum-alias-colorhandle-outer-border-color));

  background-color: var(--spectrum-global-color-static-white, rgb(255, 255, 255));
  background-image:
    linear-gradient(-45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 75.5%),
    linear-gradient(45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 75.5%),
    linear-gradient(-45deg, var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 25.5%, transparent 25.5%),
    linear-gradient(45deg, var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 25.5%, transparent 25.5%);
}

.spectrum-ColorHandle.is-disabled {
    border-color: var(--spectrum-colorhandle-inner-border-color-disabled, var(--spectrum-global-color-gray-400));
    background: var(--spectrum-colorhandle-fill-color-disabled, var(--spectrum-global-color-gray-300));
    box-shadow: none;
  }

.spectrum-ColorHandle.is-disabled .spectrum-ColorHandle-color {
      display: none;
    }

.spectrum-ColorHandle-color {
  box-shadow: inset 0 0 0 var(--spectrum-colorhandle-outer-border-size, var(--spectrum-global-dimension-static-size-10)) var(--spectrum-colorhandle-outer-border-color, var(--spectrum-alias-colorhandle-outer-border-color));
}

@media (forced-colors: active) {
  .spectrum-ColorHandle {
    --spectrum-colorhandle-inner-border-color-disabled : GrayText;
    --spectrum-colorhandle-fill-color-disabled: Canvas;
    --spectrum-colorhandle-inner-border-color: CanvasText;
  }
    .spectrum-ColorHandle.is-disabled {
      forced-color-adjust: none;
    }
}