Resolving progress bar fill issue

[mrwrite]

Summary

Fixed the visible fill issue. The progress bar fill was likely present but invisible because it used
an old token alias without a reliable fallback.

Changed:

• /learn progress bars now use active semantic token colors with fallbacks.
• /learn/courses/:courseId progress bar does the same.
• Width still uses the normalized percentage value, so 33 renders as width: 33%.

Verification:

• Focused tests: 14 SUCCESS
• npm run build: passed
• Existing Sass deprecation warnings remain unchanged.

Motivation

Why is this change needed?

Type of Change

• Documentation
• Frontend
• Backend
• Tests
• Accessibility
• Demo
• Curriculum/community review
• Other

Test Plan

List the checks you ran.

• Backend tests
• Frontend build
• Frontend unit tests
• Demo smoke test
• Manual review
• Not run. Explain below.

If you could not run a check, explain why:

Screenshots

Add screenshots for visible UI changes.

Accessibility Check

Describe any accessibility impact, including keyboard, contrast, labels, readable text, and mobile layout where relevant.

Community or Curriculum Impact

Does this affect educator review, historical accuracy, source quality, learner experience, community language, or contribution flow?

Notes

Anything maintainers should know?

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
echoed	Ready	Preview, Comment	Jul 11, 2026 2:38pm