feat(branding): multi-tenant org branding (logo, name, colours) with validation and AA contrast

[onejasonn]

Summary

Organizations can now configure a custom logo, name, primary colour and accent colour that theme their PayD portal. ThemeProvider already stored an OrgBrandConfig and mapped it to --brand-* CSS tokens, but nothing let an org set it, logoUrl was never rendered, and brand values were written into CSS unvalidated. This PR closes those gaps.

Changes

1. Validation and contrast (src/utils/brand.ts, ThemeProvider)

• Only valid hex colours (#rgb or #rrggbb, normalised) are written into --brand-primary, --brand-accent and --brand-header-bg. Anything else, such as red; background:url(x), is ignored and the default myworkpay-inspired tokens apply.
• The new --brand-on-primary token is set to white or deep navy (#0b1b3a), whichever gives the higher WCAG contrast on the org's primary colour. Text on a brand fill stays readable whatever colour an org picks.
• Logo URLs: only https: and raster data:image/(png|jpeg|gif|webp) URIs are accepted. javascript:, http: (mixed content) and SVG data URIs are rejected.
• Org name: trimmed and capped at 60 characters.

2. Settings UI (src/components/BrandingSettings.tsx, in Settings)

• Fields: organization name, logo URL, and primary and accent colours, each with a native colour picker plus a hex text input.
• Live preview: a solid CTA button ("Run payroll") and an arrow-style secondary link ("View details →"), matching the myworkpay design language, plus the button text's contrast ratio with an AA or below-AA label.
• Accessibility:
  • every input has a <label>
  • invalid fields get aria-invalid and a role="alert" message, and Save is disabled
  • saving announces "Branding saved." through a polite role="status"
  • all controls are keyboard-operable with visible focus-visible rings
• Reset to PayD default clears the org branding.
• Responsive: a single column at 375px and two columns from md. Uses the existing card glass, --surface-hi and --border-hi tokens, so it follows light and dark mode.

3. Branded header (src/components/BrandLogo.tsx, used in AppLayout)

• Shows the org's logo (alt="<Org> logo") and/or name when configured, with the name truncated on narrow screens. A screen-reader-only ", powered by PayD" is included.
• Falls back to the PayD wordmark when branding isn't configured, or if the logo fails to load (onError).

Tests

• utils/__tests__/brand.test.ts:
  • hex validation and normalisation, including an injection-style string
  • contrast ratios (21:1 black on white), and that the readable-text picker keeps AA on sample brand colours
  • the logo URL allow and deny list, and org-name trimming and capping
• __tests__/ThemeProvider.test.tsx:
  • the existing brand test now also checks --brand-on-primary
  • a new test checks that a non-hex stored colour is not written to CSS
• components/__tests__/BrandingSettings.test.tsx:
  • saving updates the header logo and the CSS token, and persists
  • an unsafe logo URL shows an error and disables Save
  • reset restores the PayD wordmark
    Closes Add multi-tenant branding support #1505
    Closes Complete i18n coverage audit for en/es locales #1506
    Closes Add a global search component with cmd+k shortcut #1503
    Closes Redesign organization/billing/security settings pages #1504
    These weren't run locally because there's no node_modules in my checkout, so vitest will run them in CI.

Notes

• Branding is persisted per browser through the existing payd-org-brand storage used by ThemeProvider. When an org-settings API endpoint exists, the same setBrandConfig call can be fed from it so the branding follows the organization across devices.

Commits

1. feat(branding): validate org brand values and keep AA contrast
2. feat(branding): org branding settings and branded header logo

[drips-wave]

@onejasonn Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits