Skip to content

feat: add instance-wide card themes for light and dark mode - #1868

Draft
thomasbeaudry wants to merge 1 commit into
mainfrom
feat/instance-card-color
Draft

thomasbeaudry wants to merge 1 commit into
mainfrom
feat/instance-card-color

Conversation

@thomasbeaudry

Copy link
Copy Markdown
Collaborator

Not ready to be merged. Draft for testing and review: the light mode colors are still being decided, and the full e2e suite has not been run on this branch.

What changed

Every in-app page now sits on an InstanceCard, which draws nothing by default. Admins can color these cards from Application Settings, with a separate choice for light and dark mode:

  • Light: Paper, Ivory, Fog, Silver, Mist, Heather
  • Dark: Midnight, Graphite, Charcoal, Steel, Mist, Heather
  • Both: No Color, or a custom hex

The picker reuses the login branding page's swatches. This adds lightCardTheme, darkCardTheme, customCardColorLight and customCardColorDark to the setup state.

Page submit buttons are now compact, because a full-width button reads as a bar once the card around it is invisible. Forms in dialogs and sheets keep the full width.

The dashboard takes no instance color, and start session keeps the page color inside a thin card. Login, password reset, setup, the form render page and the gateway are unchanged. apps/web/AGENTS.md documents the rules.

Verification

  • pnpm lint passes.
  • Unit tests cover card-color, InstanceCard, Layout, the settings page, the setup schema and the setup service. The only failure is the WalkthroughProvider test that already fails on main (Unit suite fails on main: walkthrough test queries the pre-rename button label #1865). That failure also fails pnpm test:coverage; the only uncovered lines are that button's click handler.
  • e2e: testing/src/specs/instance-card-color.spec.ts, plus updates to admin-instrument-repos.spec.ts and the settings page object.

Before merging

  • Settle the light mode palette.
  • Run the full pnpm test:e2e. Only the affected specs have run, on a stack without a gateway, so the two /about tests failed there. One earlier run also had failures on /admin/settings and /datahub/instruments that did not recur in two reruns of the spec, and the cause was not found.
  • /session/remote-assignment and the /group/*, datahub detail and /upload pages have no card color e2e coverage.
  • Decide the settings card width: this branch uses 684px, while main had changed it to max-w-4xl.

Co-Authored-By: Claude Opus 5.5

Put in-app pages on a card an administrator can color per mode from the
application settings, and shrink page submit buttons that read as bars
once the card around them is invisible.

Co-Authored-By: Claude Opus 5.5

This branch has not been deployed

No deployments
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