[csswg-drafts] [css-color] @color-space, a user-defined default for color space interpolation (#9638)

chriskirknielsen has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-color] @color-space, a user-defined default for color space interpolation ==
Recent updates in CSS allow us to specify color spaces, for example in `*-gradient(in lab, …)` or `color-mix(in oklch, …)`. These are very useful to art-direct our colors (especially for gradients).

While gradients existed before CSS opened the syntax to a specific color space, `color-mix()` came after (I think?) and has a required first parameter of the color space to use. This makes author intent clear, however given the habit of omitting it for gradients, I am usually caught by surprise (after a hundred times, is it still a surprise? yes) that `color-mix(white, hotpink)` does not work, and requires a color space. ([with the intent to make it optional](https://github.com/w3c/csswg-drafts/issues/6051#issuecomment-788234373) — maybe this is the same idea?)


# At-rule syntax
I would like to propose the ability to define a document-level color space, which would follow the same kind of syntax as `@charset` or `@namespace`:

```css
@color-space oklch;
```

And this would also let you use custom profiles:

```css
@color-profile --swop5c {
  src: url("https://example.org/SWOP2006_Coated5v2.icc");
}

@color-space --swop5c;
```

# Standard property syntax

Alternatively, to avoid adding more at-rules and having this "all or nothing" approach, we could instead use a classic property that would inherit, either `color-space` (or `color-interpolation`?):

```css
:root {
  color-space: oklch;
}
```

# Examples

Either way, you would then be able to omit the color space in `color-mix`, and it would default to the value defined with `@color-space` or `color-space`:

```css
a {
  color: color-mix(rebeccapurple, blue);
  background-image: linear-gradient(to right, hotpink, white);
}
```

You could overwrite the default color space by explicitly specifying it:

```css
a {
  color: color-mix(in srgb, rebeccapurple, blue);
  background-image: linear-gradient(to right in hsl, hotpink, white);
}
```

Or, if you were to drop in a component that needs a different color space for all its contents, you could, if we went with the property approach, provide a value within that component:

```css
stylish-component {
  color-space: lab;
}

stylish-component a {
  color: color-mix(gold, black);
  background-image: linear-gradient(to bottom right, pink, white);
}
```

You could of course just write `:root { --myspace: srgb; }` and use it like `color: color-mix(in var(--myspace), red, blue)` but that is a different use-case, and defeats the "omit" objective I have in mind.

I have looked through issues here for a similar proposal, but did not find one. Either I didn't dig deep enough, or this is already planned in another issue and makes my addition unnecessary — I apologise if that is the case. And while I'd rather you didn't, you are allowed to think I'm an idiot for forgetting the color space when using `color-mix`.

I guess it's just a matter of getting into that habit, but since there seemed to be a future goal of omitting the color space in the first place (and I don't know what the roadblocks were), it might be good to get a conversation started around how this might look.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9638 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 26 November 2023 02:47:01 UTC