chore: [STMS-4895] Add Typography component

Author: SiriusCrain

packages/ui/package.json

@@ -15,7 +15,7 @@
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006 --no-open",
     "build-storybook": "storybook build"
   },
   "dependencies": {

packages/ui/src/Typography/Typography.stories.tsx

@@ -0,0 +1,32 @@
+import { Typography } from "./Typography";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+const meta: Meta<typeof Typography> = {
+  title: "Components/Typography",
+  component: Typography,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Typography>;
+
+export const Primary: Story = {
+  args: {
+    children: "Typography",
+  },
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+      <Typography variant="h1">Heading 1</Typography>
+      <Typography variant="h2">Heading 2</Typography>
+      <Typography variant="h3">Heading 3</Typography>
+      <Typography variant="h4">Heading 4</Typography>
+      <Typography variant="h5">Heading 5</Typography>
+      <Typography variant="h6">Heading 6</Typography>
+      <Typography variant="body">Body</Typography>
+      <Typography variant="body-semibold">Body-semibold</Typography>
+      <Typography variant="hint">Hint</Typography>
+    </div>
+  ),
+};

packages/ui/src/Typography/Typography.tsx

@@ -0,0 +1,38 @@
+import MuiTypography from "@mui/material/Typography";
+import type { TypographyProps as MuiTypographyProps } from "@mui/material/Typography";
+import React from "react";
+
+declare module "@mui/material/styles" {
+  interface TypographyVariants {
+    body: React.CSSProperties;
+    "body-semibold": React.CSSProperties;
+    hint: React.CSSProperties;
+  }
+
+  interface TypographyVariantsOptions {
+    body?: React.CSSProperties;
+    "body-semibold"?: React.CSSProperties;
+    hint?: React.CSSProperties;
+  }
+}
+
+declare module "@mui/material/Typography" {
+  interface TypographyPropsVariantOverrides {
+    body: true;
+    "body-semibold": true;
+    hint: true;
+    body1: false;
+    body2: false;
+    button: false;
+    overline: false;
+    subtitle1: false;
+    subtitle2: false;
+    caption: false;
+  }
+}
+
+export type TypographyProps = MuiTypographyProps;
+
+export const Typography: React.FC<TypographyProps> = (props) => {
+  return <MuiTypography {...props} />;
+};

packages/ui/src/Typography/typographyOptions.tsx

@@ -0,0 +1,119 @@
+import type {
+  Breakpoints,
+  TypographyVariantsOptions,
+} from "@mui/material/styles";
+
+export function createTypographyOptions(
+  breakpoints: Breakpoints,
+): TypographyVariantsOptions {
+  const xsOnly = breakpoints.only("xs");
+
+  return {
+    fontSize: 14,
+    fontWeightLight: 300,
+    fontWeightRegular: 400,
+    fontWeightMedium: 500,
+    fontWeightBold: 600,
+    fontFamily: '"Inter", sans-serif',
+
+    h1: {
+      fontSize: "32px",
+      lineHeight: "40px",
+      fontWeight: 700,
+      [xsOnly]: {
+        fontSize: "28px",
+        lineHeight: "36px",
+      },
+    },
+
+    h2: {
+      fontSize: "24px",
+      lineHeight: "28px",
+      fontWeight: 500,
+      [xsOnly]: {
+        fontSize: "22px",
+        lineHeight: "26px",
+      },
+    },
+
+    h3: {
+      fontSize: "20px",
+      lineHeight: "28px",
+      fontWeight: 500,
+      [xsOnly]: {
+        fontSize: "20px",
+        lineHeight: "26px",
+      },
+    },
+
+    h4: {
+      fontSize: "16px",
+      lineHeight: "24px",
+      fontWeight: 500,
+      [xsOnly]: {
+        fontSize: "17px",
+        lineHeight: "26px",
+      },
+    },
+
+    h5: {
+      fontSize: "14px",
+      lineHeight: "22px",
+      fontWeight: 600,
+      [xsOnly]: {
+        fontSize: "16px",
+        lineHeight: "26px",
+      },
+    },
+
+    h6: {
+      fontSize: "12px",
+      lineHeight: "16px",
+      fontWeight: 700,
+      letterSpacing: "0.1em",
+      textTransform: "uppercase",
+      [xsOnly]: {
+        fontSize: "14px",
+        lineHeight: "20px",
+      },
+    },
+
+    body: {
+      fontSize: "14px",
+      lineHeight: "20px",
+      fontWeight: 600,
+      [xsOnly]: {
+        fontSize: "16px",
+        lineHeight: "26px",
+      },
+    },
+
+    "body-semibold": {
+      fontSize: "14px",
+      lineHeight: "20px",
+      fontWeight: 400,
+      [xsOnly]: {
+        fontSize: "16px",
+        lineHeight: "26px",
+      },
+    },
+
+    hint: {
+      fontSize: "12px",
+      lineHeight: "18px",
+      fontWeight: 400,
+      [xsOnly]: {
+        fontSize: "14px",
+        lineHeight: "20px",
+      },
+    },
+
+    body1: undefined,
+    body2: undefined,
+    button: undefined,
+    overline: undefined,
+    subtitle1: undefined,
+    subtitle2: undefined,
+    caption: undefined,
+  };
+}

packages/ui/src/createTheme.ts

@@ -1,8 +1,11 @@
 import { type ColorSystemOptions } from "@mui/material";
 import { createTheme as createMuiTheme } from "@mui/material/styles";
 import { Color, ColorDark } from "./color";
+import { createTypographyOptions } from "./Typography/typographyOptions";
 
 export function createTheme() {
+  const basicTheme = createMuiTheme();
+
   const theme = createMuiTheme({
     colorSchemes: {
       light: {
@@ -15,13 +18,14 @@ export function createTheme() {
     cssVariables: {
       colorSchemeSelector: ".sd-theme-%s",
     },
+    typography: createTypographyOptions(basicTheme.breakpoints),
   });
 
   return theme;
 }
 
 function createPalette(
-  colorScheme: "light" | "dark"
+  colorScheme: "light" | "dark",
 ): ColorSystemOptions["palette"] {
   const color = colorScheme === "light" ? Color : ColorDark;