import { getContrastRatio } from "@mui/material/styles"; import { getTheme } from "./theme"; // Contract tests for text/button pairs, not snapshots of particular brand hex values. describe.each(["light", "dark"] as const)("%s semantic contrast", mode => { const palette = getTheme(mode).colorSchemes[mode].palette; test.each(["primary", "secondary", "success", "warning", "error", "info"])("%s supports text and filled actions", role => { const color = palette[role]; for (const surface of [palette.background.default, palette.background.paper, palette.background.elevated ?? palette.background.paper]) { expect(getContrastRatio(color.main, surface)).toBeGreaterThanOrEqual(4.5); } for (const fill of [color.main, color.dark]) { expect(getContrastRatio(color.contrastText, fill)).toBeGreaterThanOrEqual(4.5); } }); test("focus and essential control boundaries contrast with all application surfaces", () => { for (const surface of [palette.background.default, palette.background.paper, palette.background.elevated]) { expect(getContrastRatio(palette.focus.main, surface)).toBeGreaterThanOrEqual(3); expect(getContrastRatio(palette.border.default, surface)).toBeGreaterThanOrEqual(3); } expect(getContrastRatio(palette.focus.inverse, palette.navigation.background)).toBeGreaterThanOrEqual(3); expect(palette.action.selected).not.toBe(palette.action.hover); }); });