@mitodl/smoot-design 1.0.0

package/src/types/theme.d.ts

@@ -0,0 +1,106 @@
+import type { Theme as MuiTheme } from "@mui/material/styles"
+import "@emotion/react"
+import "@emotion/styled"
+import "./typography"
+
+export interface ColorGroup {
+  main: string
+  highlight: string
+  contrastText: string
+}
+
+interface CustomTheme {
+  transitionDuration: string
+  shadow: string
+  colors: {
+    mitRed: string
+    silverGray: string
+    brightRed: string
+    black: string
+    white: string
+    darkGray2: string
+    darkGray1: string
+    silverGrayDark: string
+    silverGrayLight: string
+    lightGray2: string
+    lightGray1: string
+    navGray: string
+    darkPink: string
+    pink: string
+    lightPink: string
+    darkPurple: string
+    purple: string
+    lightPurple: string
+    darkBlue: string
+    blue: string
+    lightBlue: string
+    darkGreen: string
+    green: string
+    lightGreen: string
+    darkRed: string
+    red: string
+    lightRed: string
+    orange: string
+    yellow: string
+  }
+  dimensions: {
+    headerHeight: string
+    headerHeightSm: string
+  }
+  LinkAdapter?: React.ElementType
+}
+
+/* https://mui.com/material-ui/customization/theming/#typescript */
+declare module "@mui/material/styles" {
+  interface Theme {
+    custom: CustomTheme
+  }
+
+  interface ThemeOptions {
+    custom: CustomTheme
+  }
+
+  interface PaletteColor {
+    active?: string
+  }
+
+  interface SimplePaletteColorOptions {
+    active?: string
+  }
+}
+
+declare module "@mui/material/Button" {
+  interface ButtonPropsSizeOverrides {
+    medium: false
+  }
+}
+
+declare module "@mui/material/InputBase" {
+  interface InputBasePropsSizeOverrides {
+    hero: true
+    large: true
+  }
+}
+
+declare module "@mui/material/Chip" {
+  interface ChipPropsSizeOverrides {
+    large: true
+    medium: true
+    small: false
+  }
+
+  interface ChipPropsVariantOverrides {
+    filled: true
+    outlined: true
+    outlinedWhite: true
+    dark: true
+    darker: true
+    gray: true
+  }
+}
+
+declare module "@emotion/react" {
+  export interface Theme extends MuiTheme {
+    custom: CustomTheme
+  }
+}

package/src/types/typography.d.ts

@@ -0,0 +1,54 @@
+import "@mui/material/styles"
+
+declare module "@mui/material/styles" {
+  interface TypographyVariants {
+    h1: React.CSSProperties
+    h2: React.CSSProperties
+    h3: React.CSSProperties
+    h4: React.CSSProperties
+    h5: React.CSSProperties
+    body1: React.CSSProperties
+    body2: React.CSSProperties
+    body3: React.CSSProperties
+    body4: React.CSSProperties
+    subtitle1: React.CSSProperties
+    subtitle2: React.CSSProperties
+    subtitle3: React.CSSProperties
+    subtitle4: React.CSSProperties
+    buttonLarge: React.CSSProperties
+    button: React.CSSProperties
+    buttonSmall: React.CSSProperties
+  }
+  interface TypographyVariantsOptions {
+    h1: React.CSSProperties
+    h2: React.CSSProperties
+    h3: React.CSSProperties
+    h4: React.CSSProperties
+    h5: React.CSSProperties
+    body1: React.CSSProperties
+    body2: React.CSSProperties
+    body3: React.CSSProperties
+    body4: React.CSSProperties
+    subtitle1: React.CSSProperties
+    subtitle2: React.CSSProperties
+    subtitle3: React.CSSProperties
+    subtitle4: React.CSSProperties
+    buttonLarge: React.CSSProperties
+    button: React.CSSProperties
+    buttonSmall: React.CSSProperties
+  }
+}
+
+declare module "@mui/material/Typography" {
+  interface TypographyPropsVariantOverrides {
+    body1: true
+    body2: true
+    body3: true
+    body4: true
+    subtitle1: true
+    subtitle2: true
+    subtitle3: true
+    subtitle4: true
+    button: true
+  }
+}

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "incremental": true,
+    "composite": true,
+    "target": "es6",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "lib": ["es2020", "dom"],
+    "jsx": "react",
+    "strict": true,
+    "declaration": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "preserveWatchOutput": true,
+    "types": ["node", "jest", "@testing-library/jest-dom", "jest-extended"],
+    "outDir": "./dist/esm",
+    "rootDir": "./src",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
+}