Fix/storage bar contrast

[NishulDhakar]

Closes #3856

Summary

This PR improves the Storage Bar color contrast across all themes (Light, Dark, and Contrast) to meet WCAG 2.1 Level AA non-text contrast requirements (minimum 3:1 ratio).

Problem: The Storage Bar on the Assets page had insufficient contrast (~1.1:1) between the progress indicator ($P5-pink) and its background ($gray), creating accessibility barriers for visually impaired users.

Solution: Updated theme variables and styling to increase contrast between the progress bar and background, and added a visible border that contrasts with the page background.

Changes Made

Variable Updates (variables.scss)

Light Theme:

• Changed progress-bar-background-color from $gray to $light
• Added progress-bar-border-color set to $middle-gray

Dark Theme:

• Changed progress-bar-background-color from $gray to $darker
• Added progress-bar-border-color set to $middle-gray

Contrast Theme:

• Changed progress-bar-background-color from $gray to $darker
• Changed progress-bar-active-color from $P5-pink to $yellow
• Added progress-bar-border-color set to $middle-light

Styling Updates (_asset-size.scss)

• Replaced transparent border with theme-based progress-bar-border-color
• Added border-color: getThemifyVariable('progress-bar-border-color') within the @include themify() block

QA Steps

1. Set up local development environment with AWS S3 configuration.
2. Start the local server and log in
3. Navigate to https://editor.p5js.org/{username}/assets
4. Upload one or more assets to trigger the Storage Bar display
5. Switch between Light, Dark, and Contrast themes using the theme selector
6. Verify:
   • Progress bar has clearly visible contrast against its background
   • Border is visible and provides additional distinction from page background
   • All three themes display correctly with improved accessibility

Screenshots

Before

Light Theme:

Dark Theme:

Contrast Theme:

After

Light Theme:

Dark Theme:

Contrast Theme:

[raclim]

Tagging @runningonsideprojects and @Izzy-Snyder for review whenever you have a moment!

[runningonsideprojects]

Tagging @runningonsideprojects and @Izzy-Snyder for review whenever you have a moment!

sorry it took so long to respond, will be reviewing later tonight! thank you for your patience @raclim @NishulDhakar

[runningonsideprojects]

Confirmed color changes: ✅

Light mode

After you fix the merge conflict issues and provide an explanation to the file changes separate from the storage bar component, this PR looks good to go 👍

[NishulDhakar]

Thanks for the feedback. @runningonsideprojects
I’ve resolved the merge conflicts and added clarification regarding the changes outside the storage bar component.
Please let me know if anything else needs adjustment.

[raclim]

Thanks so much @NishulDhakar and @runningonsideprojects! I've added in a few more comments—please feel free to ask any questions or raise any thoughts about them!

[raclim]

Just wanted to check in here if you're still interested in adding in the requested changes!

[NishulDhakar]

Hey @raclim, I've addressed all the requested changes alphabetized the progress-bar CSS variables and removed the out-of-scope changes from user.test.ts and apiKey.ts.

Please review when you get a chance

[NishulDhakar]

Hey @runningonsideprojects Those deletions were unintentional, they happened due to a bad merge conflict resolution when syncing with develop.

I've now restored the file to match develop exactly and re-applied only the intended progress-bar-* changes across all three themes. The latest commit 0626da3 should have a clean diff with no unrelated deletions. Sorry for the noise.

[runningonsideprojects]

@NishulDhakar just wanted to follow up and ask if you are still interested in working on this PR!

[NishulDhakar]

Hey @runningonsideprojects, thanks for following up,
Yes, I’m still interested in working on this PR. I’ve already cleaned up the unintended merge-conflict changes and restored the deleted variables so the diff now only contains the intended progress-bar contrast fixes.

[runningonsideprojects]

Hey @runningonsideprojects, thanks for following up, Yes, I’m still interested in working on this PR. I’ve already cleaned up the unintended merge-conflict changes and restored the deleted variables so the diff now only contains the intended progress-bar contrast fixes.

Hey @NishulDhakar pls address all reviewer comments so we can move through w/ this PR please!

[NishulDhakar]

Hey @raclim @runningonsideprojects , I've addressed all inline comments and resolved all conversations. The diff is now clean, only the intended progress-bar-* changes across all three themes.

Ready for re-review whenever you get a chance!

[runningonsideprojects]

Hey @raclim @runningonsideprojects , I've addressed all inline comments and resolved all conversations. The diff is now clean, only the intended progress-bar-* changes across all three themes.

Ready for re-review whenever you get a chance!

Hi, as mentioned before please respond to all reviewer comments. you are introducing a change that is not within the purview of the original issue and PR description which warrants explanation:

[NishulDhakar]

Hey @raclim @runningonsideprojects all reviewer comments have been addressed and resolved.

The _functions.scss change was unintentional and has been removed.

The PR now only contains the intended progress-bar-* contrast fixes across _variables.scss and _asset-size.scss.

Ready for final review!