Refine MAPLE visual system and shared surfaces#51
Open
tripledoublev wants to merge 28 commits intofeat/ballot-questionsfrom
Open
Refine MAPLE visual system and shared surfaces#51tripledoublev wants to merge 28 commits intofeat/ballot-questionsfrom
tripledoublev wants to merge 28 commits intofeat/ballot-questionsfrom
Conversation
tripledoublev
force-pushed
the
visual-system-refinement
branch
from
68c6a09 to
41873e7
Compare
The firestore mock wrappers call mockDoc(...args) / mockGetDoc(...args), but the jest.fn signatures were zero-arg, failing typecheck with TS2556. Type the mocks as (..._args: unknown[]) so the rest spread matches. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Maple tokens were previously duplicated: SCSS variables in bootstrap.scss (compile-time, consumed by Bootstrap overrides) and CSS custom properties in globals.css (runtime, consumed by components). The two layers had no structural link — notably, Bootstrap's input focus ring was never wired to --maple-focus-ring, so inputs rendered a pink $primary-derived ring. Define tokens as SCSS variables in bootstrap.scss, wire them into Bootstrap overrides ($input-btn-focus-box-shadow now uses $maple-focus-ring), and emit them as CSS custom properties from the same :root block. Remove the duplicate :root block from globals.css. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replace all $bq-* / --bq-* tokens and ballot-question-* class names with app-wide maple primitives. Add shared utility classes for surfaces, eyebrows, icon chips, nav links, and pill links. Made-with: Cursor
Tokenize ballot status colors, add inverse overlay tokens, fix legacy our-team CSS, prune unused :root emissions, scope .btn padding/weight to primary/secondary variants, and remove dead code in CommitteeHearing. Made-with: Cursor
Remove the old 7-state model (legislature, qualifying, certified, ballot, enacted, failed, withdrawn) and finalize the new 4 states: expectedOnBallot, failedToAppear, rejected, accepted. Updates the runtype union, status helpers, and STATUS_STYLES map to match.
- Emit --maple-focus-border to :root (was SCSS-only, unavailable at runtime)
- Rename --mobile-nav-link-* to --maple-nav-link-* for naming consistency
- Add semantic color palette tokens (--maple-color-{blue,green,red,gray}-subtle-*)
- Wire status tokens as aliases of the palette layer instead of raw hex values
- Update globals.css comment and nav link token references to match rename
Migrate all remaining instances of raw brand and surface colors to CSS custom property references: - #1a3185 → var(--maple-brand-primary) - #12266f → var(--maple-brand-primary-strong) - #c71e32 / #902323 → var(--maple-brand-danger) - #ffffff → var(--maple-surface-base) or var(--maple-text-inverse) - #f1f1f1 → var(--maple-surface-muted) Files: BillStatusCard, StyledEditProfileComponents, HeroHeader.module.css, StyledNewsfeedComponents, PolicyPage.module.css, Tabs, UserFilterDropdown, SponsorsAndCommittees, ResourcesCard, Transcriptions, PaginationButtons
Replace stale status values ("ballot", "certified") with valid ones from
the new 4-state model ("expectedOnBallot").
Define font-weight (normal/medium/semibold/bold) and line-height (tight/base/loose) as SCSS variables and emit them to :root as CSS custom properties, making them available to styled-components at runtime.
…mponents Replace hardcoded font-weight and line-height values with var(--maple-font-weight-*) and var(--maple-line-height-*) tokens.
Replace ad-hoc values (0.35rem, 0.375rem, 0.4rem, 0.62rem, 0.8rem, 0.9rem, 9px) in BrowseBallotQuestions and HearingSidebar with the nearest var(--maple-space-*) token.
Cover three previously undocumented component areas: - BrowseBallotQuestions: Default, Empty, and SingleStatus variants - ResourcesCard: Default - HearingSidebar: Default, NoDate, and Empty variants
tripledoublev
force-pushed
the
visual-system-refinement
branch
from
5121b24 to
3b8ba36
Compare
Use the current 4-state ballot question lifecycle in the integration fixture so syncBallotQuestions passes validation and CI can seed the test document again. Made-with: Cursor
7 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR is a visual-system refactor, not a redesign. It introduces an app-wide token layer and applies it through shared primitives, buttons, shell components, and key detail-page surfaces to make MAPLE feel more consistent and intentional without changing page structure or core flows.
The goal is to establish a maintainable styling foundation first, then use that foundation to improve the look and feel across high-visibility parts of the app.
What changed
--maple-*design tokens inglobals.css, with compatibility aliases for existing ballot-question tokens to avoid breaking current BQ stylingWhat was explicitly kept out of scope
Testing
/,/bills,/testimony,/ballotQuestions, representative bill detail, representative ballot question detailProvisional decisions to follow up
--maple-surface-page: #eae7e7preserves the current body background for now and is intentionally marked provisional for later retuning once page/base/muted surface relationships can be adjusted togetherrgba(94, 114, 228, ...)was carried forward from the ballot-question work; whether that becomes app-wide accent language or remains BQ-specific should be confirmed in a later pass