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:
@@ -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);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -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 = {
|
||||||
|
|||||||
Reference in New Issue
Block a user