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]

We've recently made changes to alphabetize all the css variables in file—would you be able to update your changes with the new sorting preference?

[raclim]

The changes in this file and apiKey.ts seem to be outside of the scope of the original issue, which focuses on updating the color contrast within the asset storage bar. Ideally, we want to make sure that pull requests stay within the purview of each issue to make tracking and reviewing changes easier.

Would you be able to remove the additions to these two files?

[raclim]

Noted in comment for user.test.ts

[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!