css-examples icon indicating copy to clipboard operation
css-examples copied to clipboard
verified publisher icon mdn

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

Open teoli2003 opened this issue 2 years ago • 3 comments

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…)

teoli2003 avatar Dec 07 '23 08:12 teoli2003

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

pragyamishra56 avatar Jan 05 '24 07:01 pragyamishra56

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.

teoli2003 avatar Jan 05 '24 07:01 teoli2003

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!

pragyamishra56 avatar Jan 06 '24 01:01 pragyamishra56

Is this still an issue? I can contribute

Jay-Karia avatar Jul 26 '24 11:07 Jay-Karia

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);

bsmth avatar Aug 02 '24 08:08 bsmth