Skip to content

Refactor/stop hover css tokens#7405

Open
nehayadav827 wants to merge 2 commits into
sugarlabs:masterfrom
nehayadav827:refactor/stop-hover-css-tokens
Open

Refactor/stop hover css tokens#7405
nehayadav827 wants to merge 2 commits into
sugarlabs:masterfrom
nehayadav827:refactor/stop-hover-css-tokens

Conversation

@nehayadav827
Copy link
Copy Markdown

Summary

This PR introduces CSS design tokens for stop icon and hover colors and migrates related toolbar/activity theme color reads away from the legacy platformColor object.

It also updates the AI debugger Jest fixture to reflect the existing explicit-consent behavior so the full Jest suite passes on this branch.

No behavioral changes intended.


Changes

css/tokens.css

Added new theme-aware CSS custom properties:

  • --mb-stop-icon-color
  • --mb-hover-color

for:

  • light theme
  • dark theme
  • high-contrast theme

css/themes.css

  • imports tokens.css

js/toolbar.js

Replaced:

  • platformColor.stopIconcolor
  • platformColor.hoverColor

with CSS token lookups using getComputedStyle().

js/activity.js

Replaced all remaining:

  • platformColor.stopIconcolor

reads with CSS token lookups.

js/widgets/tests/aidebugger.test.js

Updated AI debugger consent-flow tests to reflect the existing explicit-consent requirement before sending project data.


Validation

Verification

Confirmed that:

  • toolbar/activity now read stop and hover colors from CSS tokens
  • no targeted platformColor.stopIconcolor or platformColor.hoverColor references remain
  • stop buttons continue rendering correctly in the UI after pressing Play

Automated checks

  • npm test

    • 160 suites passed
    • 5349 tests passed
  • npm run lint

    • passes with existing repository warnings only
  • npx prettier --check

    • all matched files use Prettier code style

Attached screenshots include:

  • commit/stat summary of the migration
  • grep verification showing removal of targeted platformColor references
Screenshot 2026-05-20 200723
  • token definitions and themes.css import
Screenshot 2026-05-20 200756

PR Category

  • Bug Fix
  • Feature
  • Performance
  • Tests
  • Documentation

Issue

Partially addresses #6606

@github-actions github-actions Bot added feature Adds new functionality tests Adds or updates test coverage size/M Medium: 50-249 lines changed area/javascript Changes to JS source files area/css Changes to CSS/SASS style files area/tests Changes to test files labels May 20, 2026
@github-actions
Copy link
Copy Markdown
Contributor

🧪 Jest Test Results

✅ All Jest tests passed! This PR is ready to merge.

Coverage: Statements: 48.04% | Branches: 39.52% | Functions: 52.82% | Lines: 48.44%
Master Coverage: Statements: 48.11% | Branches: 39.52% | Functions: 52.84% | Lines: 48.52%

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/css Changes to CSS/SASS style files area/javascript Changes to JS source files area/tests Changes to test files feature Adds new functionality size/M Medium: 50-249 lines changed tests Adds or updates test coverage

Projects

Development

Successfully merging this pull request may close these issues.

1 participant