Skip to content

refactor(form): use semantic tokens and fix dark control backgrounds #90

Description

@joshsadam

Problem

Form controls still use raw neutral-*, primary-*, and hard-coded black/white focus outlines.

The highest-priority violation is in checkbox/radio shared styles: controls use dark:bg-neutral-950, but the design docs reserve neutral-950 for dense inset regions like the data grid body, not everyday form controls.

Switch styles also drift from the new system. They use raw neutral/primary classes and black/white peer focus outlines.

What we will build

Form controls that use semantic colour tokens, correct dark-mode surfaces, and the shared focus ring.

How we will build it

  • Update app/components/pathogen/form/form_styles.rb.
  • Update app/components/pathogen/form/switch_styles.rb.
  • Confirm radio_button_styles.rb continues to inherit the corrected shared control styles.
  • Replace label/help text colours with --pvc-color-text and --pvc-color-text-muted where equivalent.
  • Replace control borders/surfaces with --pvc-color-border, --pvc-color-border-strong, --pvc-color-surface, and --pvc-color-surface-muted where appropriate.
  • Replace dark:bg-neutral-950 on everyday controls with a regular surface token.
  • Replace focus-visible:outline-black / outline-white and peer equivalents with outline-[var(--pvc-color-focus)].
  • Map checked/accent states to --pvc-color-accent / --pvc-color-accent-solid as appropriate.
  • Keep native HTML controls and public APIs unchanged.
  • Touch form previews only where needed to demonstrate corrected component states. Broader Lookbook aesthetic cleanup is tracked separately.

Testing

  • Checkbox label, help text, checked, disabled, hover, and focus states in light and dark mode.
  • Radio label, help text, checked, disabled, hover, and focus states in light and dark mode.
  • Switch label, state text, checked, disabled, hover, and focus states in light and dark mode.
  • Dark controls no longer use neutral-950 backgrounds.
  • Focus is visible and distinct on keyboard tab through sample form previews.
  • Relevant form component tests pass.
  • pnpm run build:css:check passes if class generation changes the CSS artifact.

Not in scope

  • New form components or builder API changes.
  • Broad preview restyling beyond the component states needed here.
  • Host-app form migrations.

Done when

Form controls match the Foundations colour, focus, and dark-mode rules, and the form-related dark-mode checklist items pass.

Depends on: #88
Design docs: docs/lookbook/design_system/01-design-contract.md.erb (Forms, Focus And Keyboard); docs/lookbook/design_system/03-dark-mode.md.erb (The Five Qualities In Dark Mode, Check Before Merge)

Metadata

Metadata

Assignees

No one assigned

    Labels

    accessibilityenhancementNew feature or requestrubyPull requests that update ruby code

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions