cesnimda
25 lines
1.4 KiB
TypeScript
25 lines
1.4 KiB
TypeScript
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);
|
|
});
|
|
});
|