diff --git a/__tests__/components/presentational/Layout/Layout.test.tsx b/__tests__/components/presentational/Layout/Layout.test.tsx index ed39f77b7..06e1c5295 100644 --- a/__tests__/components/presentational/Layout/Layout.test.tsx +++ b/__tests__/components/presentational/Layout/Layout.test.tsx @@ -32,21 +32,27 @@ describe('Layout brand color tokens', () => { expect(globalCss()).toContain('--mdhui-color-primary-text: #00693E'); }); - it('drives only the fill in dark for a plain-string brand', async () => { + it('drives fill and foreground in dark for a plain-string brand', async () => { await renderLayout(); expect(globalCss()).toContain('--mdhui-color-primary: #00693E'); - expect(globalCss()).not.toContain('--mdhui-color-primary-text: #00693E'); + expect(globalCss()).toContain('--mdhui-color-primary-text: #00693E'); }); - it('puts an explicit dark value on fills only — dark links keep the scheme grade', async () => { + it('uses the dark value for both tokens in dark', async () => { await renderLayout(); expect(globalCss()).toContain('--mdhui-color-primary: #00B068'); - expect(globalCss()).not.toContain('--mdhui-color-primary-text: #00B068'); + expect(globalCss()).toContain('--mdhui-color-primary-text: #00B068'); + expect(globalCss()).not.toContain('#00693E'); }); - it('treats an object without a dark value the same way in dark', async () => { + it('falls back to the light value in dark when no dark value is given', async () => { await renderLayout(); expect(globalCss()).toContain('--mdhui-color-primary: #00693E'); - expect(globalCss()).not.toContain('--mdhui-color-primary-text: #00693E'); + expect(globalCss()).toContain('--mdhui-color-primary-text: #00693E'); + }); + + it('leaves marks to follow text', async () => { + await renderLayout(); + expect(globalCss()).not.toContain('--mdhui-color-primary-mark: #00B068'); }); }); diff --git a/src/components/presentational/Layout/Layout.tsx b/src/components/presentational/Layout/Layout.tsx index 46e2bafa4..32266718b 100644 --- a/src/components/presentational/Layout/Layout.tsx +++ b/src/components/presentational/Layout/Layout.tsx @@ -61,15 +61,11 @@ export default function Layout(props: LayoutProps) { // One Global for scheme + brand: Emotion orders tags by mount order, so a runtime // scheme toggle would land the scheme tag after a separate brand tag and clobber it. const schemeStyles = context.colorScheme == "dark" ? darkColorScheme : lightColorScheme; - // The brand color renders exactly as given; the library never alters it. In light it - // drives both tokens, as it always has. In dark it drives only fills, and links keep - // the scheme's readable grade: no single dark value can be both a fill under white - // text and legible text on the card, so text needs its own color, not this one. const brand = props.primaryColor ? resolveColor(colorScheme, props.primaryColor) : undefined; const brandStyles = brand ? css` :root { --mdhui-color-primary: ${brand}; - ${colorScheme === "light" ? `--mdhui-color-primary-text: ${brand};` : ""} + --mdhui-color-primary-text: ${brand}; }` : undefined; return (