Refactor challenges to use `currentColor`

[jasminexie]

CSS currentColor is supported by all modern browsers. We can use this for

• border-color
• background color of pseudo-elements
• SVG fill

Currently, none of the existing challenges have used this value. I know there are many cases in the existing challenges that can be refactored to use this; some of these challenges have used CSS custom properties instead for the three use cases:

:root {
  --color-primary: blue
}

button {
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

It would be great if the existing challenges use currentColor - even better if this helps reduce CSS code size. PRs welcome.

[jazzninja]

hey @jasminexie , are you just looking to refactor all 100 challenges to use currentColor in place of your --color css variable for the noted properties (border-color, background color of pseudo-elements, and SVG fill)? I'll fork the repo and start updating, should be able to submit a PR relatively quick. Let me know if i'm understanding your open issue correctly, thanks.

[lailahgrant]

i would like to contribute to this!!!

[jasminexie]

hey @jasminexie , are you just looking to refactor all 100 challenges to use currentColor in place of your --color css variable for the noted properties (border-color, background color of pseudo-elements, and SVG fill)? I'll fork the repo and start updating, should be able to submit a PR relatively quick. Let me know if i'm understanding your open issue correctly, thanks.

Yes, exactly! ❤️ But I understand that

1. Not all challenges are applicable
2. Refactoring everything in one PR can take a lot of time

So I'll accept PRs that refactor one or more of these challenges.

i would like to contribute to this!!!

Thank you! Look through them and open a PR.

---

Due to the nature of this issue I won't assign this to any one person. If you are willing to contribute, you can start by refactoring one or more challenges, and commit your changes with a message similar to

refactor(021): use currentColor for XXX

And open a PR for any number of challenges refactored.

[lailahgrant]

hi @jasminexie , how do I continue with this?? thanks

[jasminexie]

hi @jasminexie , how do I continue with this?? thanks

Hi! If you want to contribute, you can start by cloning this repo and run it. Look through the source code of some challenges (with special attention to border-color, svg fill, and backgrounds of pseudo elements) and see if there are any properties that can be changed to use currentColor.

This is originally a project to help me and my team members learn CSS (and to help other people work towards their Hacktoberfest goals) but it works as a standalone boilerplate to create and debug any small CSS animation. If you're interested in participating in the 100 Days CSS challenge you can head off to 100 Days CSS and have a look at the amazing work there.

Any contributions are welcome here, but now that Hacktoberfest is over I encourage you to write your own responses to these challenges! Have fun 😄