Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
af01ba3
[color-swatch] Add support for color difference (Delta E) and contrast
DmitrySharabin Oct 16, 2024
a8c44fd
[color-swatch] Remove redundant dependency
DmitrySharabin Oct 16, 2024
450275c
Rename: `deltaE` → `delta` (class name and CSS variable)
DmitrySharabin Oct 16, 2024
846ef80
Provide DeltaE and contrast algorithms similar to color coords (i.e.,…
DmitrySharabin Oct 18, 2024
6e56efd
Move generated content to CSS
DmitrySharabin Oct 24, 2024
bd99c90
Fix the docs
DmitrySharabin Nov 26, 2024
a839910
Add comments
DmitrySharabin Dec 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 23 additions & 1 deletion src/color-swatch/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ If used as a property and is not defined via the `label` attribute, its value is
### 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 (deltaE) and contrast between the current color and another one (specified via [the `vs` attribute](./#the-vs-attribute)).

```html
<color-swatch info="oklch.l, oklch.c, oklch.h" size="large">
Expand All @@ -213,6 +213,25 @@ The `info` attribute plays quite nicely with the `--details-style: compact` styl
<color-swatch size="large" info="oklch.l, oklch.c, oklch.h" style="--details-style: compact">oklch(70% 0.25 138)</color-swatch>
```

### The `vs` attribute

You can calculate the difference (deltaE) and contrast between the current color and another one.
To do so, provide the new color via the `vs` attribute and specify one of the [supported algorithms for calculating the difference](https://colorjs.io/docs/color-difference#delta-e-e) ([contrast](https://colorjs.io/docs/contrast) or both) between two colors inside [the `info` attribute](./#the-info-attribute).

```html
<color-swatch info="deltaE.2000, WCAG21: contrast.WCAG21" vs="white" size="large">
oklch(70% 0.25 138)
</color-swatch>
```

If color coords are also specified, the deltas on a coord-by-coord basis will be shown:

```html
<color-swatch info="oklch.l, oklch.c, oklch.h, deltaE.2000, WCAG21: contrast.WCAG21" vs="white" size="large">
oklch(70% 0.25 138)
</color-swatch>
```

### With slot content

Before and after:
Expand Down Expand Up @@ -316,6 +335,7 @@ If you don’t, the `<html>` element will be used.
| `value` | `value` | `string` | - | The current value of the swatch. |
| `label` | `label` | `string` | - | The label of the swatch (e.g., color name). Defaults to the element text content. |
| `size` | - | `large` | - | The size of the swatch. Currently, it is used only to make a large swatch. |
| `vs` | `vs` | `Color` &#124; `string` | - | The second color to use when calculating the difference (delta) and contrast with the current color. |
| `property` | `property` | `string` | - | CSS property to bind to. |
| `scope` | `scope` | `string` | `:root` | CSS selector to use as the scope for the specified CSS property. |
| `gamuts` | `gamuts` | `string` | `srgb, p3, rec2020: P3+, prophoto: PP` | Comma-separated list of gamuts to be used by the gamut indicator. |
Expand All @@ -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. |
Copy link
Member

Choose a reason for hiding this comment

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

I don't understand what these mean.


### Parts

Expand Down
45 changes: 41 additions & 4 deletions src/color-swatch/color-swatch.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%));
Copy link
Member

Choose a reason for hiding this comment

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

Nit: you don't need commas.


position: relative;
display: inline-flex;
Expand Down Expand Up @@ -64,29 +66,64 @@ slot {
[part="info"] {
margin: 0;
display: inline-flex;
display: none;
gap: .5em;

&:is(:host([size="large"]) &) {
display: grid;
grid-template-columns: max-content auto;
grid-template-columns: repeat(3, max-content);
gap: .1em .2em;
font-size: max(9px, 80%);
justify-content: start;

.coord {
& > * {
grid-column: 1 / -1;
}

.data {
display: contents;

dd:not(.delta, :has(~ dd)) {
grid-column: span 2;
}
}
}

.coord {
.data {
display: flex;
gap: .2em;

dd {
margin: 0;
font-weight: bold;
font-variant-numeric: tabular-nums;

&.delta {
color: var(--_delta-color);

&::before {
content: "(";
}

&::after {
content: ")";
}

&.positive {
--_delta-color: var(--_positive-delta-color);

&::before {
content: "(+";
}
}

&.negative {
--_delta-color: var(--_negative-delta-color);
}

&:not(.angle)::after {
content: "%)";
}
}
}
}
}
Expand Down
Loading