feat(mui): soft-SaaS component defaults (pill buttons, 16px cards, pill chips)

Adds MuiButton, MuiCard, and MuiChip styleOverrides to the theme: pill-shaped
buttons (borderRadius 999) with a red-gradient containedPrimary, 16px soft-
shadow cards, and pill chips. Driven by a new failing test first (TDD).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
BOHA
2026-06-06 19:05:01 +02:00
parent b5df88b62d
commit d2e368a05e
2 changed files with 31 additions and 0 deletions

View File

@@ -25,4 +25,11 @@ describe("MUI theme", () => {
it("uses the base radius of 10", () => { it("uses the base radius of 10", () => {
expect(theme.shape.borderRadius).toBe(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);
});
}); });

View File

@@ -47,6 +47,30 @@ export const theme = createTheme({
h6: { fontFamily: FONT_HEADING, fontWeight: 700 }, h6: { fontFamily: FONT_HEADING, fontWeight: 700 },
button: { textTransform: "none", fontWeight: 600 }, button: { textTransform: "none", fontWeight: 600 },
}, },
components: {
MuiButton: {
defaultProps: { disableElevation: true },
styleOverrides: {
root: { borderRadius: 999, paddingInline: "0.95rem" },
containedPrimary: {
backgroundImage: "linear-gradient(135deg, #e23a3a, #c01f1f)",
boxShadow: "0 5px 14px rgba(214,48,49,0.32)",
},
},
},
MuiCard: {
styleOverrides: {
root: {
borderRadius: 16,
boxShadow:
"0 6px 20px rgba(20,20,40,0.06), 0 1px 2px rgba(0,0,0,0.03)",
},
},
},
MuiChip: {
styleOverrides: { root: { borderRadius: 999, fontWeight: 700 } },
},
},
}); });
export const fonts = { export const fonts = {