[Swatch] background-color prevents gradients from the outside

[Westbrook]

https://github.com/adobe/spectrum-css/blob/ed6a68d0dd209ee0c993de10367789aab27151fe/components/swatch/index.css#L225

As seen in https://opensource.adobe.com/spectrum-css/swatch.html#gradient this statement requires that swatches representing non-flat colors have their internals reached into in order to prevent the value of the swatch to users. If this was background instead, it should support both use cases.

synced to jira: https://jira.corp.adobe.com/browse/CSS-204

[castastrophe]

@Westbrook Just wanted to follow-up and make sure this was addressed in the most recent updates to Swatch before I close out this ticket. Thank you!

[Westbrook]

I don't currently see this working in the CSS docs site with the following code:

<div class="spectrum-Swatch spectrum-Swatch--sizeM" tabindex="0" style="--spectrum-picked-color: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);">
  <div class=" spectrum-OpacityCheckerboard spectrum-Swatch-fill">
    
  </div>
</div>