[color-swatch] Add support for color difference (Delta E) and contrast

[DmitrySharabin]

(in terms of design, related to #96; and is also its evolution)

The main features are:

• Add support for the vs color to calculate deltas and contrast against
• The info attribute now allows specific algorithms to be used to calculate DeltaE and contrast. Some usage examples: info="deltaE2000, WCAG21 contrast", info="Contrast: Michelson contrast", info="DeltaE: deltaEITP, DeltaPhi: DeltaPhi contrast" (when specifying the contrast method, the word contrast is mandatory)
• Add some new props (infoCoords, infoOther, etc) to get the advantage of caching (provided by NudeElement) and make code more DRY
• The code is more forgiving when wrong coords and/or algorithms for deltas and contrast are specified
• Not a breaking change

To see it in action: https://deploy-preview-119--color-elements.netlify.app/src/color-swatch/#the-vs-attribute

[netlify[bot]]

✅ Deploy Preview for color-elements ready!

Name	Link
🔨 Latest commit	4109c43dfe395283d6b68e6b04ea60a5774d1dfc
🔍 Latest deploy log	https://app.netlify.com/sites/color-elements/deploys/6745c64b86039b000881132f
😎 Deploy Preview	https://deploy-preview-119--color-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[LeaVerou]

Why do we have two different syntaxes to parameterize what algorithm is used? For ΔE we use the function name (deltaE2000) but for contrast we use space separated identifiers. We should pick one syntax and go with it.

Also, thinking of how extends to the color scale case, do we want to be duplicating colors all over the place? Or do we want some way to "link" to another <color-swatch> somewhere else? But then how does this work in the <color-scale> case where there is no (light DOM) <color-swatch> to link to?

[DmitrySharabin]

Why do we have two different syntaxes to parameterize what algorithm is used? For ΔE we use the function name (deltaE2000) but for contrast we use space separated identifiers. We should pick one syntax and go with it.

I just thought of another option. What if we adopt the way we used to specify color space and coordinate in one go and do the same thing with ΔE and contrast? For example, info="deltaE.2000, contrast.WCAG21". It's aligned with the rest of the info value (if specified) and makes it look more “balanced,” if I can say so.

Also, thinking of how extends to the color scale case, do we want to be duplicating colors all over the place? Or do we want some way to "link" to another <color-swatch> somewhere else? But then how does this work in the <color-scale> case where there is no (light DOM) <color-swatch> to link to?

Interesting. I need to think about it.

[LeaVerou]

Why do we have two different syntaxes to parameterize what algorithm is used? For ΔE we use the function name (deltaE2000) but for contrast we use space separated identifiers. We should pick one syntax and go with it.

I just thought of another option. What if we adopt the way we used to specify color space and coordinate in one go and do the same thing with ΔE and contrast? For example, info="deltaE.2000, contrast.WCAG21". It's aligned with the rest of the info value (if specified) and makes it look more “balanced,” if I can say so.

I like it!

[DmitrySharabin]

Updated usage examples: info="deltaE.2000, contrast.WCAG21", info="Contrast: contrast.Michelson", info="DeltaE: deltaE.ITP, DeltaPhi: contrast.DeltaPhi"

[DmitrySharabin]

There's so much happening around <color-swatch> now:

• 171

• 167

• this one

I wonder what PR we should get done and merge first. There will definitely be merge conflicts. 😭