[n400]

Overview

Follow-up to #657. In dark mode, a view's primary color only set --mdhui-color-primary, the fill token. Charts, progress bars, and goal rings read -mark, so in a view with its own dark primary color they fell back to the scheme's blue (reported on CareEvolution/MyDataHelpsViewBuilder#650). When the brand has a darkMode value, Layout now sets -mark from it in dark as well. A plain-string brand or a light-only object reused in dark still drives fills only.

Links and other -text uses stay on the scheme's blue in dark, on purpose. No one dark value works for both duties: a color that carries white text on a button needs a luminance of 0.183 or less, and a color readable as small text on the dark card needs 0.256 or more. The pink #E91E63 from the ViewBuilder report is 4.35:1 under white text and 3.55:1 on the card, so it passes the 3:1 mark floor and fails the 4.5:1 text floor. If we want brand-colored links in dark, that is a second color: a primaryTextColor prop here and a picker for it in ViewBuilder.

Security

• I have ensured no secure credentials or sensitive information remain in code, metadata, comments, etc.
  • .storybook/preview.js is untouched.
  • There are no temporary testing changes.
• These changes do not introduce any security risks: a CSS custom property changes value.

Testing

• This change can be adequately tested using the MDH Storybook.

Any story wrapped in Layout, dark scheme, with a primaryColor of { lightMode: X, darkMode: Y }: chart lines, progress bars, and goal rings take Y; buttons take Y; links stay blue. With a plain string or { lightMode: X }: buttons take X, charts and links stay blue. Light mode is unchanged. Unit tests in __tests__/components/presentational/Layout/Layout.test.tsx cover the five cases.

Documentation

• This change does not impact documentation or Storybook.

[aws-amplify-us-east-1]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-680.d1xp2kmk6zrv44.amplifyapp.com

[Copilot]

🟢 Approval recommended

The implementation matches the described token behavior and is adequately covered by focused tests.

0 open findings

What changed in this PR

Updates dark-mode brand styling so explicit dark brand colors also drive chart and progress marks while text remains scheme-colored.

Changes:

• Adds conditional dark-mode primary-mark styling.
• Expands Layout token tests across color configurations.

File	Description
src/​components/​presentational/​Layout/​Layout.tsx	Applies explicit dark brand colors to marks.
__tests__/​components/​presentational/​Layout/​Layout.test.tsx	Verifies fill, mark, and text token behavior.

🧠 Review effort: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[chrisnowak]

This will be disruptive to existing views no? If someone has selected a brand color in places now it's going to change to blue.

So I think we need to consider backwards compatibility and not making breaking changes; I think like for some things adding blue next to a brand color also might look broken and not intentional?

Like this doesn't look right I think but is what people will get now

[chrisnowak]

I'm sure there's a way to manage backwards compatibility here (e.g. by having a separate text color you can set); for now we could make the behavior the same and then add that override separately in view builder?

[n400]

yes, i would really like to add some warnings/notes in the ui to alert the user to the color accessibility reqs, but i didnt want to increase scope too much. editing this pr to add the text tokens for backwards compatibility and will then introduce a new pr

[n400]

per Chris's feedback, I changed this so the brand drives text and marks in dark mode too, which puts it back to how 4.2.2 behaved. One color still can't pass contrast as both a primary button fill and as text on a dark card, so the plan is a separate dark text color with a picker in ViewBuilder and contrast warnings in the UI: #681.