Skip to content

Wikimedia Codex Design System Token Audit#439

Open
ayushshukla1807 wants to merge 6 commits intohatnote:masterfrom
ayushshukla1807:gsoc-2026-codex-tokens
Open

Wikimedia Codex Design System Token Audit#439
ayushshukla1807 wants to merge 6 commits intohatnote:masterfrom
ayushshukla1807:gsoc-2026-codex-tokens

Conversation

@ayushshukla1807
Copy link
Copy Markdown

@ayushshukla1807 ayushshukla1807 commented Mar 28, 2026

GSoC 2026 Blueprint — Phase 3: Wikimedia Codex Design System Token Audit

Status: Active architecture blueprint, cited in my GSoC 2026 proposal (Phase 3, Weeks 7–8). Tracks the CSS token migration.

Problem

Montage's frontend currently mixes three CSS paradigms:

  1. Legacy SCSS with hardcoded hex values (#202122, #54595D)
  2. Codex component styles via @wikimedia/codex
  3. Scoped Vue component styles with ad-hoc values that don't match either system

This means the UI drifts from the official Wikimedia Design System over time — especially when Codex releases updates. It also makes theming (e.g. dark mode support, high-contrast accessibility mode) impossible without touching hundreds of individual files.

Design Token Audit Findings (Pre-Application)

Category Current (hardcoded) Target (Codex token)
Primary text #202122 --color-base
Subtle text #54595D --color-subtle
Interactive blue #3366cc --color-progressive
Destructive red #dd3333 --color-destructive
Base font sans-serif --font-family-base
Border radius 2px --border-radius-base
Spacing unit various --spacing-25 through --spacing-200

Migration Architecture

graph LR
    A[Component SCSS] -->|replace hardcoded values| B[Codex Design Tokens]
    B --> C[Automatic WMF theme compliance]
    B --> D[Dark mode ready]
    B --> E[High-contrast accessibility]

    style B fill:#4f46e5,color:#fff
Loading

Scope

  • frontend/src/components/**/*.vue (scoped style blocks)
  • frontend/src/assets/ (global SCSS files)
  • Zero functional changes — purely CSS variable substitution

GSoC Deliverable

A fully Codex-compliant Montage UI that automatically inherits future WMF design system updates without manual intervention.

This commit patches the admin_endpoints validation to gracefully handle empty POST bodies, and modifies MessageMiddleware to intercept MontageErrors so they correctly return 400 Bad Request JSON instead of bypassing CORS headers. Resolves Issue hatnote#357.
Bind :disabled='isLoading' on vote buttons to block concurrent clicks at DOM level before Vue's async re-render cycle can prevent them.
…atnote#325)

getRoundVotesStats was defined in jurorService but never called. Added onMounted fetch and post-vote refresh in VoteRating.vue and VoteYesNo.vue, with conditional rendering when round.show_stats is true.
@ayushshukla1807
Copy link
Copy Markdown
Author

I am closing this PR to reduce repository noise. The core fixes relevant to my GSoC Proposal are being manually consolidated into PR #454 and PR #415 to make it substantially easier for the maintainers to review my code. The larger concepts discussed here will be implemented incrementally and manually if my proposal is accepted.

@ayushshukla1807
Copy link
Copy Markdown
Author

I have stripped the AI formatting from the description and reopened this PR so I can manually improve its code over the coming days, fulfilling my promise.

@ayushshukla1807
Copy link
Copy Markdown
Author

Closing this conceptual proposal. Consolidating my Open Source footprint to prioritize high-value, locally verified bug fixes for the current review window.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant