e511e203b9
Buttons: 150ms press scale(0.97) + ripple; contained-primary hover lift + glow (gradient can't transition so animate transform/shadow/filter). Outlined inputs: soft brand focus ring fades in 200ms + outline color transition. Cards/chips: shadow transitions. Honors prefers-reduced-motion. Easing matches legacy cubic-bezier(0.4,0,0.2,1). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
62 lines
2.2 KiB
TypeScript
62 lines
2.2 KiB
TypeScript
import { describe, it, expect } from "vitest";
|
|
import { theme } from "./theme";
|
|
|
|
/** Minimal palette shape used by the colorSchemes assertions below. */
|
|
interface SchemesPalette {
|
|
primary: { main: string };
|
|
background: { default: string; paper: string };
|
|
error: { main: string };
|
|
success: { main: string };
|
|
}
|
|
interface ColorScheme {
|
|
palette: SchemesPalette;
|
|
}
|
|
interface ThemeWithColorSchemes {
|
|
colorSchemes: { light: ColorScheme; dark: ColorScheme };
|
|
}
|
|
|
|
/** Single typed assertion so every `colorSchemes.*` access below is checked. */
|
|
const themedSchemes = (theme as unknown as ThemeWithColorSchemes).colorSchemes;
|
|
|
|
describe("MUI theme", () => {
|
|
it("uses the brand fonts", () => {
|
|
expect(theme.typography.fontFamily).toContain("Plus Jakarta Sans");
|
|
expect(String(theme.typography.h1.fontFamily)).toContain("Urbanist");
|
|
});
|
|
|
|
it("maps the brand red per color scheme", () => {
|
|
expect(themedSchemes.light.palette.primary.main).toBe("#c73030");
|
|
expect(themedSchemes.dark.palette.primary.main).toBe("#d63031");
|
|
});
|
|
|
|
it("maps the refreshed light canvas + paper", () => {
|
|
expect(themedSchemes.light.palette.background.default).toBe("#f4f3f1");
|
|
expect(themedSchemes.light.palette.background.paper).toBe("#ffffff");
|
|
});
|
|
|
|
it("maps semantic colors per scheme", () => {
|
|
expect(themedSchemes.light.palette.error.main).toBe("#b91c1c");
|
|
expect(themedSchemes.dark.palette.success.main).toBe("#22c55e");
|
|
});
|
|
|
|
it("uses the base radius of 10", () => {
|
|
expect(theme.shape.borderRadius).toBe(10);
|
|
});
|
|
|
|
it("makes buttons pill-shaped and cards 16px by default", () => {
|
|
const btn = theme.components?.MuiButton?.styleOverrides?.root as any;
|
|
expect(btn?.borderRadius).toBe(999);
|
|
const card = theme.components?.MuiCard?.styleOverrides?.root as any;
|
|
expect(card?.borderRadius).toBe(16);
|
|
});
|
|
|
|
it("adds 200-300ms interaction motion (press + focus ring)", () => {
|
|
const btn = theme.components?.MuiButton?.styleOverrides?.root as any;
|
|
expect(btn?.transition).toContain("transform");
|
|
expect(btn?.["&:active"]?.transform).toBe("scale(0.97)");
|
|
const input = theme.components?.MuiOutlinedInput?.styleOverrides
|
|
?.root as any;
|
|
expect(input?.["&.Mui-focused"]?.boxShadow).toContain("rgba");
|
|
});
|
|
});
|