workaround

The --sl-focus-ring-color variable doesn't have this issue because it is coded to adapt to primary color:

So to fix --sl-input-focus-ring-color without hard coding a color I mapped it like so in my app styles:

  --sl-input-focus-ring-color: var(--sl-focus-ring-color);

Ah, that's better!

from shoelace.

I thought about this too, but noticed that it may be difficult to pick a "one-fits-all" color. I ended up using --sl-color-primary-300 as an input focus ring color, which is different from your choice:

--sl-input-focus-ring-color: var(--sl-color-primary-300);

I wonder if it makes more sense to add a bit more coverage for the input focus ring to https://shoelace.style/getting-started/customizing.

from shoelace.

This was done before color-mix() was widely available because the focus ring used transparency. We've already solved this in Web Awesome, so I'm going to close this out :)

from shoelace.

@claviska That's really Awesome to know. Thanks!

from shoelace.