Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

ui-kit: Toggle inline transitions override reduced-motion styling

Closed
  • Is something wrong?
#2,166 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
65/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
css, typescript
Domain
frontend

Research direction

The inline transition declarations are on the track and knob in packages/ui-kit/src/primitives/Toggle.tsx near line 64, and the reduced-motion rule is at packages/ui-kit/src/tokens.css line 1461. Start by reading how the inline styles are set and why the stylesheet's transition: none loses to them. Done means that with reduced motion on, track and knob show no running transition after toggling, ordinary motion keeps the existing transition, and the existing browser harness assertions pass in both modes. Add a ui-kit patch changeset.

Written by the indexing model from the issue text.

Description

agent-ready area: ui-kit priority: p2 type: fix

Context

The real Chromium Storage walkthrough exposed an existing Toggle reduced-motion mismatch. Toggle (packages/ui-kit/src/primitives/Toggle.tsx:64) sets inline transition: background .18s ease on its track and transition: left .18s ease on its knob. The reduced-motion rule at packages/ui-kit/src/tokens.css:1461 declares transition: none, but normal stylesheet declarations do not override those inline declarations.

Pinned offline Chromium with reducedMotion: "reduce" returned matchMedia("(prefers-reduced-motion: reduce)").matches === true and a computed track transition duration of 0.18s. The attempted assertion expected 0s and failed on that value, not during module loading. Found while verifying #2059; its new history/table is static and this existing Toggle issue is independent of Storage policy.

Out of scope

No Storage sampling/forecast/notification changes, new motion policy or redesign of the switch.

Scope

Make the existing Toggle track and knob obey the established reduced-motion rule without changing ordinary-mode behavior or hit targets. Audit other instances of this inline-transition override in the touched primitive.

Acceptance criteria

  • Under reduced motion, both track and knob have no running transition when toggled.
  • Ordinary motion preserves the intended track/knob transition.
  • Keyboard operation, accessible name/checked state and 44px hit area remain intact.

Verification

Use the existing pinned offline browser harness. Assert real computed styles and state changes in both motion modes. Mutate the reduced-motion fix, observe the named assertion fail, restore, and run focused preflight plus selected hosted proof.

Contract impact

Existing behavior repair; no public API changes. Include a ui-kit patch changeset.

Dominant language
TypeScript
Stars
1
Forks
0
Avg merge
5h 38m
Merged PRs (30d)
960

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from schlessera/brain-kit

All issues in schlessera/brain-kit

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.