Skip to content

Form validation and helper colours from CSS variables - #365

Merged
rolandbanks merged 1 commit into
mainfrom
feature/form-validation-colours
Nov 12, 2026
Merged

rolandbanks merged 1 commit into
mainfrom
feature/form-validation-colours

Conversation

@rolandbanks

Copy link
Copy Markdown
Contributor

PDForm's validation and helper colours come from CSS variables a host can set, so a theme can make a form calm instead of Bootstrap's fixed pinks, yellows, greens and cyan. Every default is the colour drawn before, so existing hosts see no change.

  • Label of a field with errors: --pd-form-title-error-bg, --pd-form-title-error-color
  • Label edge: --pd-form-title-edge-width (default 0), --pd-form-title-required-edge-color, --pd-form-title-invalid-edge-color; the label carries pd-form-title-required or pd-form-title-invalid beside alert-danger
  • Validation indicator: --pd-form-status-{valid,required,invalid}-{bg,color}, with a pd-form-status class
  • Helper icons (help link, helper, copy, header help): --pd-form-helper-color, replacing Bootstrap's text-info
  • Field error message: --pd-form-error-color, replacing text-danger
  • Footer error count: --pd-form-footer-error-* (colour, icon, background, border width and colour, edge, padding, radius), replacing text-danger
  • Dark mode: under Bootstrap 5.3's data-bs-theme="dark", the editor frame takes Bootstrap's dark border colour instead of a light grey

The new PDForm 6 (Colours) demo page switches each group on and off, with a Dark switch, and the PDForm documentation lists every variable.

Tests: new PDFormBodyTests.Colours (label state classes, status class, helper classes), header and footer class checks, and stylesheet default rows in ThemeVariableStylesheetTests. Full suite: 4,801 passed.

🤖 Generated with Claude Code

PDForm's label, validation indicator, helper icons, field error message and footer error count read --pd-form-* variables, each defaulting to the colour drawn before. A label can show a coloured edge, and carries pd-form-title-required or pd-form-title-invalid to tell a field still waiting for a value from a wrong one; the indicator carries pd-form-status. The Bootstrap text-info and text-danger classes, which no theme could override, are gone from PDFormBody, PDFormHeader and PDFormFooter. Under Bootstrap 5.3's dark mode the editor frame takes Bootstrap's dark border colour. The PDForm 6 demo page switches groups of the variables on and off, and the documentation lists them.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@rolandbanks
rolandbanks merged commit 96ff528 into main Nov 12, 2026
3 of 4 checks passed
@rolandbanks
rolandbanks deleted the feature/form-validation-colours branch November 12, 2026 05:46
@codacy-production

codacy-production Bot commented Nov 12, 2026 •

Copy link
Copy Markdown

Not up to standards ⛔

🔴 Issues 2 medium

Alerts:
⚠ 2 issues (≤ 0 issues of at least minor severity)

Results:
2 new issues

Category Results
BestPractice 1 medium
ErrorProne 1 medium

View in Codacy

🟢 Metrics 13 complexity · 2 duplication

Metric Results
Complexity 13
Duplication 2

View in Codacy

🟢 Coverage 100.00% diff coverage · +0.00% coverage variation

Metric Results
Coverage variation ✅ +0.00% coverage variation
Diff coverage ✅ 100.00% diff coverage

View coverage diff in Codacy

Coverage variation details
Coverable lines Covered lines Coverage
Common ancestor commit (8e8a077) 19392 19261 99.32%
Head commit (eeddfc5) 19400 (+8) 19269 (+8) 99.32% (+0.00%)

Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: <coverage of head commit> - <coverage of common ancestor commit>

Diff coverage details
Coverable lines Covered lines Diff coverage
Pull request (#365) 9 9 100.00%

Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: <covered lines added or modified>/<coverable lines added or modified> * 100%

AI Reviewer: run a review on demand. To trigger the first review automatically, go to your organization or repository integration settings. AI can make mistakes. Always validate suggestions.

Run reviewer

TIP This summary will be updated as you push new changes.

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