adobe/spectrum-css

Color Handle delivery sensitive to CSS inclusion order.

Westbrook opened this issue · 1 comments

Westbrook commented

The mark up for a Color Handle is as follows:

<div class="spectrum-ColorHandle spectrum-OpacityCheckerboard" is-disabled" style="--spectrum-picked-color: rgba(255, 0, 0, 0.5); position: absolute; inset-block: 50%; inset-inline: 50%">
  <div class="spectrum-ColorHandle-inner"></div>
</div>

With both the spectrum-ColorHandle and the spectrum-OpacityCheckerboard classes applied to the host element the rules within those selectors will race depending on how CSS is deployed in a consuming application. Specifically, the size rules for .spectrum-OpacityCheckerboard:

.spectrum-OpacityCheckerboard {
    inline-size: 100%;
    block-size: 100%;
}

Can overwright those of .spectrum-ColorHandle:

.spectrum-ColorHandle {
    inline-size: var(--mod-colorhandle-size, var(--spectrum-colorhandle-size));
    block-size: var(--mod-colorhandle-size, var(--spectrum-colorhandle-size));
}