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

DmitrySharabin · 2024-10-16T12:27:55Z

(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 · 2024-10-16T12:28:13Z

✅ Deploy Preview for color-elements ready!

Name	Link
🔨 Latest commit	`a839910`
🔍 Latest deploy log	https://app.netlify.com/sites/color-elements/deploys/67615741b4baae0008ac514a
😎 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 · 2024-10-16T17:34:34Z

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 · 2024-10-16T21:11:03Z

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 · 2024-10-18T03:33:18Z

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 · 2024-10-18T14:26:17Z

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

LeaVerou · 2024-10-24T13:12:56Z

src/color-swatch/README.md

@@ -131,7 +131,7 @@ future_swatch_container.append(swatch);
 ### The `info` attribute

 You can use the `info` attribute to show information about the color.
-Currently, the only type of information supported is color coords (in any color space), but more will be added in the future.
+Currently, the types of information supported are color coords (in any color space), the difference (delta) and contrast between the current color and another one (specified via [the `vs` attribute](./#the-vs-attribute)).


Suggested change

Currently, the types of information supported are color coords (in any color space), the difference (delta) and contrast between the current color and another one (specified via [the `vs` attribute](./#the-vs-attribute)).

Currently, the types of information supported are color coords (in any color space), the difference (deltaE) and contrast between the current color and another one (specified via [the `vs` attribute](./#the-vs-attribute)).

delta and deltaE are different things.

That said, we may want to think about how to support actual deltas (e.g. hue difference)

We already do it in the PR (see the colorDeltas prop). For hues, we constrain angles using the shorter arc.

src/color-swatch/README.md

DmitrySharabin · 2024-11-26T13:13:05Z

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

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

LeaVerou

Could you add comments above the new props about what kind of info they include? I haven't looked at this in a while and I'm a bit lost

… `method.algorithm`)

Weird formatting issue

DmitrySharabin · 2024-12-16T18:25:11Z

Could you add comments above the new props about what kind of info they include? I haven't looked at this in a while and I'm a bit lost

Done. Please let me know if I need to add some more.

Co-authored-by: Lea Verou <[email protected]>

LeaVerou · 2024-12-23T18:52:55Z

src/color-swatch/README.md

@@ -338,6 +358,8 @@ These properties are read-only.
 | `--transparency-cell-size` | `<length>` | The size of the cells of the transparency gradient. |
 | `--transparcency-background` | `<color>` | The background color of the transparency gradient. |
 | `--transparency-darkness` | `<percentage>` | The opacity of the black color used for dark parts of the transparency gradient. |
+| `--positive-delta-color` | `<color>` | The color used for the positive color difference in color coords. |
+| `--negative-delta-color` | `<color>` | The color used for the negative color difference in color coords. |


I don't understand what these mean.

LeaVerou · 2024-12-23T18:53:17Z

src/color-swatch/color-swatch.css

@@ -7,6 +7,8 @@
 		0 0 / calc(2 * var(--_transparency-cell-size)) calc(2 * var(--_transparency-cell-size))
 		content-box border-box var(--_transparency-background)
 	);
+	--_positive-delta-color: var(--positive-delta-color, hsl(120, 80%, 25%));
+	--_negative-delta-color: var(--negative-delta-color, hsl(0, 85%, 40%));


Nit: you don't need commas.

LeaVerou · 2024-12-23T18:54:03Z

src/color-swatch/color-swatch.js

+			},
+		},
+		/**
+		 * Specified deltaE and contrast


should this be "or contrast"?

DmitrySharabin requested a review from LeaVerou October 16, 2024 12:30

DmitrySharabin force-pushed the deltas-and-contrast branch from f52e3a9 to fa9fad2 Compare October 17, 2024 10:51

DmitrySharabin force-pushed the deltas-and-contrast branch from fa9fad2 to e92f8d5 Compare October 18, 2024 13:35

DmitrySharabin force-pushed the deltas-and-contrast branch 2 times, most recently from 0f4034e to fbce8cf Compare October 24, 2024 12:54

LeaVerou reviewed Oct 24, 2024

View reviewed changes

src/color-swatch/README.md Outdated Show resolved Hide resolved

DmitrySharabin force-pushed the deltas-and-contrast branch from fbce8cf to 4109c43 Compare November 26, 2024 12:59

DmitrySharabin requested a review from LeaVerou November 26, 2024 13:16

DmitrySharabin force-pushed the deltas-and-contrast branch from 4109c43 to ff34d4c Compare November 28, 2024 10:53

LeaVerou reviewed Dec 5, 2024

View reviewed changes

DmitrySharabin added 5 commits December 16, 2024 18:35

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

af01ba3

[color-swatch] Remove redundant dependency

a8c44fd

Rename: deltaE → delta (class name and CSS variable)

450275c

Provide DeltaE and contrast algorithms similar to color coords (i.e.,…

846ef80

… `method.algorithm`)

Move generated content to CSS

6e56efd

Weird formatting issue

DmitrySharabin force-pushed the deltas-and-contrast branch from ff34d4c to ac79559 Compare December 16, 2024 17:35

DmitrySharabin and others added 2 commits December 17, 2024 11:46

Fix the docs

bd99c90

Co-authored-by: Lea Verou <[email protected]>

Add comments

a839910

DmitrySharabin force-pushed the deltas-and-contrast branch 2 times, most recently from 0f303aa to a839910 Compare December 17, 2024 10:49

LeaVerou reviewed Dec 23, 2024

View reviewed changes

src/color-swatch/color-swatch.js

},

},

/**

* Specified deltaE and contrast

Copy link

Member

LeaVerou Dec 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should this be "or contrast"?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

DmitrySharabin commented Oct 16, 2024 •

edited

Loading

netlify bot commented Oct 16, 2024 •

edited

Loading

LeaVerou commented Oct 16, 2024

DmitrySharabin commented Oct 16, 2024

LeaVerou commented Oct 18, 2024

DmitrySharabin commented Oct 18, 2024

LeaVerou Oct 24, 2024

LeaVerou Oct 24, 2024

DmitrySharabin Nov 26, 2024

DmitrySharabin commented Nov 26, 2024

LeaVerou left a comment •

edited

Loading

DmitrySharabin commented Dec 16, 2024

LeaVerou Dec 23, 2024

LeaVerou Dec 23, 2024

LeaVerou Dec 23, 2024

	Currently, the types of information supported are color coords (in any color space), the difference (delta) and contrast between the current color and another one (specified via [the `vs` attribute](./#the-vs-attribute)).
	Currently, the types of information supported are color coords (in any color space), the difference (deltaE) and contrast between the current color and another one (specified via [the `vs` attribute](./#the-vs-attribute)).

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

Are you sure you want to change the base?

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

Conversation

DmitrySharabin commented Oct 16, 2024 • edited Loading

netlify bot commented Oct 16, 2024 • edited Loading

✅ Deploy Preview for color-elements ready!

LeaVerou commented Oct 16, 2024

DmitrySharabin commented Oct 16, 2024

LeaVerou commented Oct 18, 2024

DmitrySharabin commented Oct 18, 2024

LeaVerou Oct 24, 2024

Choose a reason for hiding this comment

LeaVerou Oct 24, 2024

Choose a reason for hiding this comment

DmitrySharabin Nov 26, 2024

Choose a reason for hiding this comment

DmitrySharabin commented Nov 26, 2024

LeaVerou left a comment • edited Loading

Choose a reason for hiding this comment

DmitrySharabin commented Dec 16, 2024

LeaVerou Dec 23, 2024

Choose a reason for hiding this comment

LeaVerou Dec 23, 2024

Choose a reason for hiding this comment

LeaVerou Dec 23, 2024

Choose a reason for hiding this comment

DmitrySharabin commented Oct 16, 2024 •

edited

Loading

netlify bot commented Oct 16, 2024 •

edited

Loading

LeaVerou left a comment •

edited

Loading