diff --git a/client/src/const/theme.ts b/client/src/const/theme.ts index a93c4c9..d658cce 100644 --- a/client/src/const/theme.ts +++ b/client/src/const/theme.ts @@ -35,10 +35,15 @@ const theme = createTheme({ lineHeight: "16px", letterSpacing: "0em", }, - caption: { + caption1: { fontSize: "12px", lineHeight: "16px", }, + caption2: { + fontSize: "10px", + lineHeight: "12px", + letterSpacing: "0em", + }, fontWeightRegular: 400, fontWeightBold: 700, @@ -91,11 +96,15 @@ const theme = createTheme({ declare module "@mui/material/styles" { interface TypographyVariants { label: React.CSSProperties; + caption1: React.CSSProperties; + caption2: React.CSSProperties; } // allow configuration using `createTheme` interface TypographyVariantsOptions { label?: React.CSSProperties; + caption1?: React.CSSProperties; + caption2?: React.CSSProperties; } } @@ -103,10 +112,13 @@ declare module "@mui/material/styles" { declare module "@mui/material/Typography" { interface TypographyPropsVariantOverrides { label: true; + caption1: true; + caption2: true; h3: false; h4: false; h5: false; h6: false; + caption: false; body2: false; } } diff --git a/client/src/stories/Design_system/Typography.stories.tsx b/client/src/stories/Design_system/Typography.stories.tsx index b9f3593..6f5921f 100644 --- a/client/src/stories/Design_system/Typography.stories.tsx +++ b/client/src/stories/Design_system/Typography.stories.tsx @@ -14,7 +14,8 @@ const meta = { "body", "button", "label", - "caption", + "caption1", + "caption2", ], default: "body", control: { type: "select" }, @@ -81,9 +82,15 @@ export const Label: Story = { variant: "label", }, }; -export const Caption: Story = { +export const Caption1: Story = { args: { ...Heading1.args, - variant: "caption", + variant: "caption1", + }, +}; +export const Caption2: Story = { + args: { + ...Heading1.args, + variant: "caption2", }, };