bootstrap icon indicating copy to clipboard operation
bootstrap copied to clipboard

Consolidate rgb and rgba into single function (rgb)

Open SamuelMiller opened this issue 3 years ago • 3 comments

Prerequisites

Proposal

According to this article (https://dev.to/alvaromontoro/the-ultimate-guide-to-css-colors-2020-edition-1bh1), rather than two separate color functions rgb and rgba (the same for hsl and hsla), the newer simplified format drops the ending alpha "a" suffix and instead uses forward slash "/", merging the two separate functions into one. For example,

/* old notation */
color: rgb(255, 255, 255);
color: rgba(255, 255, 255, 1);

/* new notation */
color: rgb(255 255 255);
color: rgb(255 255 255 / 1);

I suggest Bootstrap consider implementing the newer notation.

Motivation and context

Simplify code. Keep up with the times, man.

SamuelMiller avatar Jul 12 '22 01:07 SamuelMiller

This could be something we tackle in v6. Syntax changes like this could easily break things for folks, and they'd change our functionality for sure on existing color variables.

mdo avatar Jul 12 '22 01:07 mdo

Why can't they be merged using the same "," notation, by using the arguments object?

beetrandahiya avatar Jul 14 '22 01:07 beetrandahiya

The point I was making is I'd want to update our CSS variables and general rgba() usage to both use comma-less syntax. Switching syntax for variable values mid-version is a no-no.

mdo avatar Jul 14 '22 04:07 mdo