Skip to content

Modern JS: replaces occurrences of rgba and hsla #164

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
teoli2003 opened this issue Dec 7, 2023 · 5 comments · Fixed by #195
Closed

Modern JS: replaces occurrences of rgba and hsla #164

teoli2003 opened this issue Dec 7, 2023 · 5 comments · Fixed by #195
Labels
chore A routine task. effort: medium Task is a medium effort. good first issue A good issue for newcomers to get started with. help wanted If you know something about this, we would love your help! idle Issues and pull requests with no activity for three months.

Comments

@teoli2003
Copy link
Contributor

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 teoli2003 added help wanted If you know something about this, we would love your help! good first issue A good issue for newcomers to get started with. chore A routine task. effort: medium Task is a medium effort. labels Dec 7, 2023
@pragyamishra56
Copy link

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

@teoli2003
Copy link
Contributor Author

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
Copy link

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!

@github-actions github-actions bot added the idle Issues and pull requests with no activity for three months. label Mar 7, 2024
@Jay-Karia
Copy link

Is this still an issue?
I can contribute

@github-actions github-actions bot removed the idle Issues and pull requests with no activity for three months. label Jul 26, 2024
@bsmth
Copy link
Member

bsmth commented Aug 2, 2024

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

@OnkarRuikar OnkarRuikar mentioned this issue Aug 28, 2024
Merged
@github-actions github-actions bot added the idle Issues and pull requests with no activity for three months. label Sep 1, 2024
@bsmth bsmth closed this as completed in #195 Sep 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
chore A routine task. effort: medium Task is a medium effort. good first issue A good issue for newcomers to get started with. help wanted If you know something about this, we would love your help! idle Issues and pull requests with no activity for three months.
Projects
MDN Issue Board
Status: Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: convert rgba() to rgb() OnkarRuikar/css-examples
4 participants
@teoli2003 @bsmth @Jay-Karia @pragyamishra56