You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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)
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 reserveneutral-950for 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
app/components/pathogen/form/form_styles.rb.app/components/pathogen/form/switch_styles.rb.radio_button_styles.rbcontinues to inherit the corrected shared control styles.--pvc-color-textand--pvc-color-text-mutedwhere equivalent.--pvc-color-border,--pvc-color-border-strong,--pvc-color-surface, and--pvc-color-surface-mutedwhere appropriate.dark:bg-neutral-950on everyday controls with a regular surface token.focus-visible:outline-black/outline-whiteand peer equivalents withoutline-[var(--pvc-color-focus)].--pvc-color-accent/--pvc-color-accent-solidas appropriate.Testing
neutral-950backgrounds.pnpm run build:css:checkpasses if class generation changes the CSS artifact.Not in scope
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)