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