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 (