[BD-46] feat: removed white background on Stepper.Header component

[PKulkoRaccoonGang]

Description

Issue: #2342

Deploy Preview

Stepper component

Merge Checklist

• If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
• Does your change adhere to the documented style conventions?
• Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
• Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
• Were your changes tested in the example app?
• Is there adequate test coverage for your changes?
• Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please add wittjeff and adamstankiewicz as reviewers on this PR.

Post-merge Checklist

• Verify your changes were released to NPM at the expected version.
• If you'd like, share your contribution in #show-and-tell.
• 🎉 🙌 Celebrate! Thanks for your contribution.

[openedx-webhooks]

Thanks for the pull request, @PKulkoRaccoonGang!

When this pull request is ready, tag your edX technical lead.

[netlify]

✅ Deploy Preview for paragon-openedx ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	4b68892
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx/deploys/647f48f8468ec7000807fde4
😎 Deploy Preview	https://deploy-preview-2358--paragon-openedx.netlify.app/components/stepper
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[codecov]

Codecov Report

Patch coverage has no change and project coverage change: +0.01 🎉

Comparison is base (088eab4) 91.38% compared to head (4b68892) 91.40%.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2358      +/-   ##
==========================================
+ Coverage   91.38%   91.40%   +0.01%     
==========================================
  Files         234      234              
  Lines        4120     4129       +9     
  Branches      982      986       +4     
==========================================
+ Hits         3765     3774       +9     
  Misses        348      348              
  Partials        7        7              

see 5 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

[monteri]

I would just use $stepper-header-step-error-bubble-color since it is very complicated one. Although we want to reference as much as possible I think there should be a limit for depth. Otherwise it will be hard to override or to track where its origin.

[PKulkoRaccoonGang]

Thanks

[monteri]

I would reduce the name to 5 words max. In this case readability of variable is complicated, although the idea as I understand is to make it more clear what this value means.

[PKulkoRaccoonGang]

It`s interesting to think. Today we don't have special rules for naming SCSS variables. I agree with your idea about the unreadability of long names in SCSS variables. Unfortunately, in this case, I can't come up with a good combination for this variable (using 5 words). Would you happen to have any suggestions for this?

[adamstankiewicz]

Nice refactor with the addition of the _variables.scss file :)

[question] Curious, will we need to create or do we already have these stepper SCSS variables as design tokens / CSS variables?

[openedx-webhooks]

@PKulkoRaccoonGang 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.

[PKulkoRaccoonGang]

Nice refactor with the addition of the _variables.scss file :)

[question] Curious, will we need to create or do we already have these stepper SCSS variables as design tokens / CSS variables?

Thanks @adamstankiewicz 👍
It will be necessary to create

[edx-semantic-release]

🎉 This PR is included in version 20.43.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀