Modern JS: replaces occurrences of `rgba` and `hsla`

[teoli2003]

There are quite a few occurrences of rgba and hsla in the repo.

We should only use the modern syntax of rgb and hsl. (No need to update the tools directory, they would need much more work if we want to keep them…)

[pragyamishra56]

@teoli2003 Sir, Could you assign me this issue? I want to fix this

[teoli2003]

You shouldn't ask this in several issues. I've already assigned the previous request to you, so start with it. Also you don't need to ask for permission, you can just create the PRs.

[pragyamishra56]

Thanks for raising this concern! I understand the importance of using modern syntax consistently. I'll take the initiative to update the occurrences of rgba and hsla to the modern rgb and hsl syntax throughout the repository. I'll exclude the tools directory as per your suggestion, focusing on maintaining consistency in the main codebase. Appreciate your vigilance on this matter!

[Jay-Karia]

Is this still an issue? I can contribute

[bsmth]

Is this still an issue? I can contribute

For rgba, there are the following occurrences (is CSS) excluding the tools and editable-samples dir:

RGBA

``` ./path/offset-path.html: border: 4px solid rgba(0, 0, 0, 0.1); ./path/offset-path.html: border: 4px solid rgba(0,0,0,0.1); ./box-alignment/flexbox/gap.html: background-color: rgba(96, 139, 168, 0.2); ./box-alignment/flexbox/auto-margins.html: background-color: rgba(96, 139, 168, 0.2); ./box-alignment/overview/flex-align-items.html: background-color: rgba(96, 139, 168, 0.2); ./box-alignment/overview/grid-gap.html: background-color: rgba(96, 139, 168, 0.2); ./box-alignment/overview/grid-align-items.html: background-color: rgba(96, 139, 168, 0.2); ./overscroll-behavior/overscroll-behavior-x.html: rgba(0, 0, 0, 0) 0px, ./overscroll-behavior/overscroll-behavior-x.html: rgba(0, 0, 0, 0) 19px, ./overscroll-behavior/overscroll-behavior-x.html: rgba(0, 0, 0, 0.5) 20px ./overscroll-behavior/overscroll-behavior-x.html: rgba(0, 0, 0, 0) 0px, ./overscroll-behavior/overscroll-behavior-x.html: rgba(0, 0, 0, 0) 19px, ./overscroll-behavior/overscroll-behavior-x.html: rgba(0, 0, 0, 0.5) 20px ./overscroll-behavior/overscroll-behavior-x.html: background-color: rgba(255, 0, 0, 0.5); ./flexbox/order/order.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/order/flex-direction.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/order/negative-order.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/order/usecase-order.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/basics/flex-shorthands.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/basics/the-flex-container.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/basics/simple-example.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/basics/flex-properties.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/basics/simple-example-anon.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/basics/flex-direction.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/basics/align-items.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/basics/flex-wrap.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/basics/justify-content.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/basics/flex-flow.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/browsers/inline-block.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/browsers/vertical-align.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/browsers/float.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/browsers/table-cell.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/use-cases/input-button.html: background-color: rgba(96, 139, 168, 0.5); ./flexbox/use-cases/input-button.html: background-color: rgba(96, 139, 168, 1); ./flexbox/use-cases/center.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/use-cases/navigation-flex.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/use-cases/split-navigation.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/use-cases/cards.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/use-cases/label-input-button.html: background-color: rgba(96, 139, 168, 0.5); ./flexbox/use-cases/label-input-button.html: background-color: rgba(96, 139, 168, 1); ./flexbox/use-cases/navigation.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/relationship/floats.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/relationship/writing-modes.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/relationship/grid-layout.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/relationship/display-contents.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/relationship/flex-layout.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/alignment/align-content-column.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/alignment/justify-content-writing-mode.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/alignment/align-self.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/alignment/justify-content-reverse.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/alignment/intro.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/alignment/auto-margins.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/alignment/align-content.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/alignment/align-self-column.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/alignment/align-items.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/alignment/justify-content-column.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/alignment/justify-content.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/wrapping/grid-example.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/wrapping/column-wrap.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/wrapping/gaps.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/wrapping/row-wrap.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/wrapping/wrapped-visibility-collapse.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/wrapping/flex-grid.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/wrapping/row-reverse-wrap.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/wrapping/visibility-collapse.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/ratios/flex-grow-ratios.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/ratios/flex-shrink-ratios.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/ratios/flex-shrink.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/ratios/flex-shrink-min-content.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/ratios/flex-grow.html: background-color: rgba(96, 139, 168, 0.2); ./flexbox/ratios/flex-basis.html: background-color: rgba(96, 139, 168, 0.2); ./logical/margin-longhands.html: background-color: rgba(96, 139, 168, 0.2); ./logical/intro-grid-example.html: border: 2px solid rgba(96, 139, 168, 0.4); ./logical/intro-grid-example.html: background-color: rgba(96, 139, 168, 0.2); ./logical/float.html: background-color: rgba(96, 139, 168, 0.2); ./logical/intro-feature-queries.html: border: 2px solid rgba(96, 139, 168, 0.4); ./logical/intro-feature-queries.html: background-color: rgba(96, 139, 168, 0.2); ./logical/size-max.html: background-color: rgba(96, 139, 168, 0.2); ./logical/positioning-inset.html: background-color: rgba(96, 139, 168, 0.2); ./logical/padding-longhands.html: background-color: rgba(96, 139, 168, 0.2); ./logical/size-min.html: background-color: rgba(96, 139, 168, 0.2); ./logical/size-resize.html: background-color: rgba(96, 139, 168, 0.2); ./logical/size-inline-block.html: background-color: rgba(96, 139, 168, 0.2); ./logical/border-longhands.html: background-color: rgba(96, 139, 168, 0.2); ./display/multi-keyword/inline-block.html: background-color: rgba(0, 0, 0, 0.4); ./display/multi-keyword/inline-block.html: background-color: rgba(0,0,0,.4); ./display/multi-keyword/inline-flex.html: background-color: rgba(96, 139, 168, 0.2); ./display/multi-keyword/multi-keyword-flex.html: background-color: rgba(96, 139, 168, 0.2); ./howto/box-shadow-button.html: box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.8); ./howto/box-shadow-button.html: box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8); ./howto/text-shadow.html: text-shadow: 2px 4px 4px rgba(46, 91, 173, 0.6); ./howto/text-shadow.html: text-shadow: 2px 4px 4px rgba(46,91,173,0.6); ./howto/opacity.html: background-color: rgba(0, 0, 0, 0.5); ./howto/opacity.html: background-color: rgba(0,0,0,.5); ./modules/transforms.html: outline: 1px solid rgba(0, 0, 0, 0.35); ./modules/transforms.html: background-color: rgba(240, 0, 0, 0.5); ./modules/transforms.html: background: rgba(90, 90, 90, 0.7); ./modules/transforms.html: background: rgba(0, 210, 0, 0.7); ./modules/transforms.html: background: rgba(210, 0, 0, 0.7); ./modules/transforms.html: background: rgba(0, 0, 210, 0.7); ./modules/transforms.html: background: rgba(210, 210, 0, 0.7); ./modules/transforms.html: background: rgba(210, 0, 210, 0.7); ./modules/animation.html: 0 20px 20px rgba(125 125 125 / 0.5); ./modules/backgrounds.html: inset 5px 5px 5px rgba(0, 0, 0, 0.4), ./modules/backgrounds.html: inset -5px -5px 5px rgba(0, 0, 0, 0.4), ./modules/backgrounds.html: 5px 5px 5px rgba(0, 0, 0, 0.4), ./modules/backgrounds.html: -5px -5px 5px rgba(0, 0, 0, 0.4); ./grid/subgrid/gap.html: background-color: rgba(0, 0, 0, 0.5); ./grid/subgrid/gap.html: background-color: rgba(0,0,0,.5); ./grid/subgrid/adding-line-names.html: background-color: rgba(0, 0, 0, 0.5); ./grid/subgrid/adding-line-names.html: background-color: rgba(0,0,0,.5); ```

For hsla, it looks like this is all:

./houdini/css_painting_api/example-boxbg.html:        --boxColor: hsla(55, 90%, 60%, 1);
./houdini/css_painting_api/example-boxbg.html:        --boxColor: hsla(155, 90%, 60%, 1);
./houdini/css_painting_api/example-boxbg.html:        --boxColor: hsla(255, 90%, 60%, 1);