[css-backgrounds] [css-text-decor] box-/text-shadow longhands

[valtlai]

The box-shadow and text-shadow properties currently don’t have longhand properties.

Should there be a box-shadow-color property, for example? It could be used to change just the color of a box shadow without respecifying the other values, or animating/transitioning just the color even if the some other values changed too.

I know these are already possible with custom properties and @property/CSS.registerProperty(), but the longhands would make things much terser.

Example

@property --box-shadow-color {
   syntax: '';
   inherits: false;
   initial-value: currentcolor;
}

div {
   box-shadow: 0 0 0
      var(--box-shadow-spread, 2px)
      var(--box-shadow-color);
   transition: --box-shadow-color 0.5s;
}

div:hover {
   --box-shadow-spread: 10px;
   --box-shadow-color: lime;
}

(Live demo)

Could be just:

div {
   box-shadow: 0 0 0 2px currentcolor;
   transition: box-shadow-color 0.5s;
}

div:hover {
   box-shadow-spread: 10px;
   box-shadow-color: lime;
}

[SebastianZ]

This is a duplicate of #4431. And I totally agree that those properties should have longhands.

Sebastian

[valtlai]

Oh, I don’t know why I didn’t found that, but I’ll close this issue now.