codeforlife 2.6.1

package/src/theme/components/MuiButton.ts

@@ -0,0 +1,70 @@
+import { buttonClasses } from "@mui/material"
+
+import { includesClassNames } from "../../utils/theme"
+import typography from "../typography"
+import type Components from "./_components"
+
+const MuiButton: Components["MuiButton"] = {
+  defaultProps: {
+    variant: "contained",
+    size: "medium",
+  },
+  styleOverrides: {
+    root: ({ ownerState }) => ({
+      color: "black",
+      textTransform: "none",
+      textAlign: "center",
+      borderRadius: "0px",
+      padding: "11px 12px",
+      height: "42px",
+      whiteSpace: "nowrap",
+      width: "fit-content",
+      minWidth: "150px",
+      boxShadow: "none",
+      ...(ownerState.size === "small" && {
+        height: "27px",
+        padding: "4.5px 9px",
+        letterSpacing: "0",
+      }),
+      ...(includesClassNames(ownerState, ["body"]) && {
+        marginBottom: typography.body1?.marginBottom,
+      }),
+    }),
+    contained: ({ ownerState }) => ({
+      backgroundColor: "#ffd23b",
+      "&:hover": {
+        backgroundColor: "#ffc709",
+        boxShadow: [
+          "0px 6px 10px 0px rgba(0, 0, 0, 0.14)",
+          "0px 1px 18px 0px rgba(0, 0, 0, 0.12)",
+          "0px 3px 5px 0px rgba(0, 0, 0, 0.2);",
+        ].join(),
+      },
+      [`&.${buttonClasses.disabled}`]: {
+        backgroundColor: "#ffe382",
+        color: "#7A5F01",
+      },
+      ...(includesClassNames(ownerState, ["alert"]) && {
+        color: "white",
+        backgroundColor: "#ff0000",
+        "&:hover": {
+          backgroundColor: "#df0531",
+        },
+        [`&.${buttonClasses.disabled}`]: {
+          backgroundColor: "#E76A6A",
+          color: "white",
+        },
+      }),
+    }),
+    outlined: {
+      border: "2px solid #eab502",
+      "&:hover": {
+        border: "2px solid #eab502",
+        backgroundColor: "transparent",
+        textDecoration: "underline",
+      },
+    },
+  },
+}
+
+export default MuiButton

package/src/theme/components/MuiCardActions.tsx

@@ -0,0 +1,12 @@
+import spacing from "../spacing"
+import type Components from "./_components"
+
+const MuiCardActions: Components["MuiCardActions"] = {
+  styleOverrides: {
+    root: {
+      padding: spacing(2),
+    },
+  },
+}
+
+export default MuiCardActions

package/src/theme/components/MuiCheckbox.ts

@@ -0,0 +1,12 @@
+import type Components from "./_components"
+
+const MuiCheckbox: Components["MuiCheckbox"] = {
+  styleOverrides: {
+    root: {
+      paddingLeft: "0px",
+      marginLeft: "-2px",
+    },
+  },
+}
+
+export default MuiCheckbox

package/src/theme/components/MuiContainer.ts

@@ -0,0 +1,19 @@
+import spacing from "../spacing"
+import type Components from "./_components"
+import { getFlexStyleOverrides } from "./_components"
+
+const MuiContainer: Components["MuiContainer"] = {
+  defaultProps: {
+    maxWidth: "lg",
+  },
+  styleOverrides: {
+    root: ({ ownerState }) => ({
+      ...getFlexStyleOverrides(ownerState),
+      paddingLeft: spacing(2, true),
+      paddingRight: spacing(2, true),
+      padding: spacing(7),
+    }),
+  },
+}
+
+export default MuiContainer

package/src/theme/components/MuiDialog.tsx

@@ -0,0 +1,16 @@
+import type Components from "./_components"
+
+const MuiDialog: Components["MuiDialog"] = {
+  defaultProps: {
+    maxWidth: "sm",
+  },
+  styleOverrides: {
+    paper: {
+      borderRadius: "0px !important",
+      padding: "24px",
+      alignItems: "center",
+    },
+  },
+}
+
+export default MuiDialog

package/src/theme/components/MuiFormControlLabel.ts

@@ -0,0 +1,18 @@
+import { typographyClasses } from "@mui/material"
+
+import { form } from "../typography"
+import type Components from "./_components"
+
+const MuiFormControlLabel: Components["MuiFormControlLabel"] = {
+  styleOverrides: {
+    root: {
+      [`.${typographyClasses.root}`]: {
+        ...form,
+        marginBottom: 0,
+      },
+      margin: 0,
+    },
+  },
+}
+
+export default MuiFormControlLabel

package/src/theme/components/MuiFormHelperText.ts

@@ -0,0 +1,12 @@
+import { form } from "../typography"
+import type Components from "./_components"
+
+const MuiFormHelperText: Components["MuiFormHelperText"] = {
+  styleOverrides: {
+    root: {
+      ...form,
+    },
+  },
+}
+
+export default MuiFormHelperText

package/src/theme/components/MuiGrid2.ts

@@ -0,0 +1,16 @@
+import type Components from "./_components"
+import { getFlexStyleOverrides } from "./_components"
+
+const MuiGrid2: Components["MuiGrid2"] = {
+  defaultProps: {
+    disableEqualOverflow: true,
+    // padding: 0 // TODO: normalize padding.
+  },
+  styleOverrides: {
+    root: ({ ownerState }) => ({
+      ...getFlexStyleOverrides(ownerState),
+    }),
+  },
+}
+
+export default MuiGrid2

package/src/theme/components/MuiInputBase.ts

@@ -0,0 +1,14 @@
+import typography from "../typography"
+import type Components from "./_components"
+
+const MuiInputBase: Components["MuiInputBase"] = {
+  styleOverrides: {
+    root: {
+      backgroundColor: "white",
+      marginBottom: 0,
+      color: typography.body1?.color,
+    },
+  },
+}
+
+export default MuiInputBase

package/src/theme/components/MuiLink.ts

@@ -0,0 +1,41 @@
+import { includesClassNames } from "../../utils/theme"
+import typography from "../typography"
+import type Components from "./_components"
+
+const MuiLink: Components["MuiLink"] = {
+  defaultProps: {
+    underline: "none", // BUG: if not set, MUI fails to run.
+    color: "inherit",
+  },
+  styleOverrides: {
+    root: ({ ownerState }) => ({
+      cursor: "pointer",
+      ...(includesClassNames(ownerState, ["no-decor"])
+        ? {
+            ":hover": {
+              textDecoration: "underline",
+            },
+          }
+        : {
+            textDecoration: "underline",
+            ":hover": {
+              fontWeight: "bold",
+            },
+          }),
+      ...(includesClassNames(ownerState, ["back-to"]) && {
+        textDecoration: "none",
+        display: "inline-block",
+        marginBottom: typography.body1?.marginBottom,
+        ":hover": {
+          fontWeight: "bold",
+          textDecoration: "underline",
+        },
+        ":before": {
+          content: '"< Back to "',
+        },
+      }),
+    }),
+  },
+}
+
+export default MuiLink

package/src/theme/components/MuiList.ts

@@ -0,0 +1,12 @@
+import type Components from "./_components"
+
+const MuiList: Components["MuiList"] = {
+  styleOverrides: {
+    root: {
+      paddingTop: 0,
+      paddingBottom: 0,
+    },
+  },
+}
+
+export default MuiList

package/src/theme/components/MuiListItemText.ts

@@ -0,0 +1,18 @@
+import { listItemTextClasses } from "@mui/material"
+
+import { includesClassNames } from "../../utils/theme"
+import type Components from "./_components"
+
+const MuiListItemText: Components["MuiListItemText"] = {
+  styleOverrides: {
+    root: ({ ownerState }) => ({
+      ...(includesClassNames(ownerState, ["last"]) && {
+        [`.${listItemTextClasses.primary}`]: {
+          marginBottom: 0,
+        },
+      }),
+    }),
+  },
+}
+
+export default MuiListItemText

package/src/theme/components/MuiMenu.ts

@@ -0,0 +1,14 @@
+import type Components from "./_components"
+
+const MuiMenu: Components["MuiMenu"] = {
+  styleOverrides: {
+    paper: {
+      borderRadius: 0,
+    },
+    list: {
+      padding: 0,
+    },
+  },
+}
+
+export default MuiMenu

package/src/theme/components/MuiMenuItem.ts

@@ -0,0 +1,15 @@
+import { includesClassNames } from "../../utils/theme"
+import type Components from "./_components"
+
+const MuiMenuItem: Components["MuiMenuItem"] = {
+  styleOverrides: {
+    root: ({ ownerState }) => ({
+      ...(includesClassNames(ownerState, ["header"]) && {
+        pointerEvents: "none",
+        fontWeight: "bold",
+      }),
+    }),
+  },
+}
+
+export default MuiMenuItem

package/src/theme/components/MuiSelect.ts

@@ -0,0 +1,16 @@
+import { type StyleOverridesWithRoot } from "./_components"
+import type Components from "./_components"
+
+const MuiSelect: Components["MuiSelect"] = {
+  defaultProps: {
+    color: "black",
+  },
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  styleOverrides: {
+    root: {
+      borderRadius: "0px",
+    },
+  } as StyleOverridesWithRoot<"MuiSelect">,
+}
+
+export default MuiSelect

package/src/theme/components/MuiTab.ts

@@ -0,0 +1,29 @@
+import { tabClasses } from "@mui/material"
+
+import type Components from "./_components"
+import { primary } from "../colors"
+
+const MuiTab: Components["MuiTab"] = {
+  styleOverrides: {
+    root: {
+      textTransform: "none",
+      fontSize: "16px",
+      fontWeight: 600,
+      minWidth: "150px",
+      border: "2px solid white",
+      [`&.${tabClasses.selected}`]: {
+        color: primary[300],
+        backgroundColor: "white",
+        cursor: "default",
+      },
+      [`:not(.${tabClasses.selected})`]: {
+        color: "white",
+        ":hover": {
+          textDecoration: "underline",
+        },
+      },
+    },
+  },
+}
+
+export default MuiTab

package/src/theme/components/MuiTable.ts

@@ -0,0 +1,29 @@
+import { tableCellClasses } from "@mui/material"
+
+import { includesClassNames } from "../../utils/theme"
+import typography from "../typography"
+import type Components from "./_components"
+
+const MuiTable: Components["MuiTable"] = {
+  styleOverrides: {
+    root: ({ ownerState }) => ({
+      borderStyle: "hidden",
+      overflowX: "auto",
+      [`.${tableCellClasses.root}`]: {
+        border: "2px solid white",
+      },
+      ...(includesClassNames(ownerState, ["text"]) && {
+        borderStyle: "unset",
+        display: "block",
+        [`.${tableCellClasses.root}`]: {
+          border: "1px solid #DDD",
+        },
+      }),
+      ...(includesClassNames(ownerState, ["body"]) && {
+        marginBottom: typography.body1?.marginBottom,
+      }),
+    }),
+  },
+}
+
+export default MuiTable

package/src/theme/components/MuiTableBody.ts

@@ -0,0 +1,15 @@
+import { includesClassNames } from "../../utils/theme"
+import type Components from "./_components"
+
+const MuiTableBody: Components["MuiTableBody"] = {
+  styleOverrides: {
+    root: ({ ownerState }) => ({
+      backgroundColor: "#F1ECEC",
+      ...(includesClassNames(ownerState, ["text"]) && {
+        backgroundColor: "white",
+      }),
+    }),
+  },
+}
+
+export default MuiTableBody

package/src/theme/components/MuiTableHead.ts

@@ -0,0 +1,26 @@
+import { typographyClasses, tableCellClasses } from "@mui/material"
+
+import { includesClassNames } from "../../utils/theme"
+import type Components from "./_components"
+
+const MuiTableHead: Components["MuiTableHead"] = {
+  styleOverrides: {
+    root: ({ ownerState }) => ({
+      backgroundColor: "#6E7171",
+      ...(includesClassNames(ownerState, ["light"]) && {
+        backgroundColor: "#9A9C9E",
+      }),
+      [`.${typographyClasses.root}`]: {
+        color: "white",
+        fontWeight: 600,
+        marginBottom: 0,
+      },
+      [`.${tableCellClasses.head}`]: {
+        color: "white",
+        fontWeight: 600,
+      },
+    }),
+  },
+}
+
+export default MuiTableHead

package/src/theme/components/MuiTabs.ts

@@ -0,0 +1,26 @@
+import { tabClasses } from "@mui/material"
+
+import type Components from "./_components"
+
+const MuiTabs: Components["MuiTabs"] = {
+  defaultProps: {
+    variant: "scrollable",
+    scrollButtons: true,
+    allowScrollButtonsMobile: true,
+  },
+  styleOverrides: {
+    root: ({ ownerState }) => ({
+      ...(ownerState !== undefined && // NOTE: this is a bug with MUI
+        [undefined, "horizontal"].includes(ownerState.orientation) && {
+          [`.${tabClasses.root}:not(:last-of-type)`]: {
+            marginRight: "30px",
+          },
+        }),
+    }),
+    indicator: {
+      display: "none",
+    },
+  },
+}
+
+export default MuiTabs

package/src/theme/components/MuiTextField.ts

@@ -0,0 +1,86 @@
+import {
+  filledInputClasses,
+  formHelperTextClasses,
+  formLabelClasses,
+  inputBaseClasses,
+  inputClasses,
+  outlinedInputClasses,
+  svgIconClasses,
+} from "@mui/material"
+
+import { includesClassNames } from "../../utils/theme"
+import palette from "../palette"
+import typography from "../typography"
+import type Components from "./_components"
+
+const MuiTextField: Components["MuiTextField"] = {
+  defaultProps: {
+    size: "small",
+    variant: "filled",
+  },
+  styleOverrides: {
+    root: ({ ownerState }) => ({
+      width: "100%",
+      backgroundColor: "transparent",
+      [`& > .${inputBaseClasses.root}`]: {
+        ...(ownerState.disabled
+          ? {
+              [`.${inputBaseClasses.disabled}`]: {
+                color: `${typography.body1!.color} !important`,
+                "-webkit-text-fill-color": "unset",
+              },
+              border: "0px !important",
+              borderRadius: "0px !important",
+              // @ts-expect-error
+              backgroundColor: `${palette.info!.main} !important`,
+            }
+          : {
+              border: "1px solid black !important",
+              borderRadius: "0px !important",
+              backgroundColor: "white !important",
+            }),
+      },
+      [`& > .${inputBaseClasses.root}.${inputBaseClasses.error}`]: {
+        // @ts-expect-error
+        border: `1px solid ${palette.error!.main} !important`,
+      },
+      [`& .${outlinedInputClasses.root}.${inputClasses.focused} > fieldset`]: {
+        borderColor: "black !important",
+      },
+      [`.${svgIconClasses.root}`]: {
+        color: `${typography.body1!.color} !important`,
+      },
+      [`.${filledInputClasses.root}::after`]: {
+        borderColor: `${typography.body1!.color} !important`,
+      },
+      [`.${formLabelClasses.root}`]: {
+        color: `${typography.body1!.color} !important`,
+      },
+      [`.${formHelperTextClasses.root}`]: {
+        fontSize: "12px !important",
+      },
+      ...(ownerState.multiline === true && {
+        ...((includesClassNames(ownerState, ["resize"]) ||
+          includesClassNames(ownerState, ["resize-both"])) && {
+          width: "auto",
+          [`.${inputClasses.inputMultiline}`]: {
+            resize: "both",
+          },
+        }),
+        ...(includesClassNames(ownerState, ["resize-horizontal"]) && {
+          width: "auto",
+          [`.${inputClasses.inputMultiline}`]: {
+            resize: "horizontal",
+          },
+        }),
+        ...(includesClassNames(ownerState, ["resize-vertical"]) && {
+          [`.${inputClasses.inputMultiline}`]: {
+            resize: "vertical",
+          },
+        }),
+      }),
+    }),
+  },
+}
+
+export default MuiTextField

package/src/theme/components/MuiToolbar.ts

@@ -0,0 +1,11 @@
+import type Components from "./_components"
+
+const MuiToolbar: Components["MuiToolbar"] = {
+  styleOverrides: {
+    root: {
+      padding: "15px 0px !important",
+    },
+  },
+}
+
+export default MuiToolbar

package/src/theme/components/MuiTypography.ts

@@ -0,0 +1,12 @@
+import type Components from "./_components"
+import { getFontStyleOverrides } from "./_components"
+
+const MuiTypography: Components["MuiTypography"] = {
+  styleOverrides: {
+    root: ({ ownerState }) => ({
+      ...getFontStyleOverrides(ownerState),
+    }),
+  },
+}
+
+export default MuiTypography

package/src/theme/components/_components.ts

@@ -0,0 +1,93 @@
+import {
+  type CSSObject,
+  type ComponentsOverrides,
+  type ComponentsPropsList,
+  type Theme,
+  type ThemeOptions,
+} from "@mui/material"
+import { type CommonProps } from "@mui/material/OverridableComponent"
+import { type OverridesStyleRules } from "@mui/material/styles/overrides"
+
+import {
+  getClassNames,
+  includesClassNames,
+  matchClassNames,
+} from "../../utils/theme"
+import typography from "../typography"
+
+export default interface Components
+  extends NonNullable<ThemeOptions["components"]> {}
+
+export type StyleOverridesWithRoot<
+  Component extends keyof ComponentsOverrides<Theme>,
+> = ComponentsOverrides<Theme>[Component] & {
+  root: OverridesStyleRules<"root", Component, Theme>["root"]
+}
+
+export type OwnerState<ComponentName extends keyof ComponentsPropsList> =
+  ComponentsPropsList[ComponentName] & Record<string, unknown>
+
+export function getFlexStyleOverrides(props: CommonProps): CSSObject {
+  const styleOverrides: CSSObject = {}
+
+  const classNames = getClassNames(props)
+
+  if (classNames.some(className => className.startsWith("flex-"))) {
+    styleOverrides.display = "flex"
+    if (includesClassNames(classNames, ["flex-center"])) {
+      styleOverrides.justifyContent = "center"
+      styleOverrides.alignItems = "center"
+    } else if (includesClassNames(classNames, ["flex-center-x"])) {
+      styleOverrides.justifyContent = "center"
+      styleOverrides.alignItems = "start"
+    } else if (includesClassNames(classNames, ["flex-center-y"])) {
+      styleOverrides.justifyContent = "start"
+      styleOverrides.alignItems = "center"
+    } else if (includesClassNames(classNames, ["flex-end"])) {
+      styleOverrides.justifyContent = "end"
+      styleOverrides.alignItems = "end"
+    } else if (includesClassNames(classNames, ["flex-end-x"])) {
+      styleOverrides.justifyContent = "end"
+      styleOverrides.alignItems = "start"
+    } else if (includesClassNames(classNames, ["flex-end-y"])) {
+      styleOverrides.justifyContent = "start"
+      styleOverrides.alignItems = "end"
+    }
+  }
+
+  return styleOverrides
+}
+
+export function getFontStyleOverrides(props: CommonProps): CSSObject {
+  let styleOverrides: CSSObject = {}
+
+  const classNames = getClassNames(props)
+
+  if (includesClassNames(classNames, ["nowrap-ellipsis"])) {
+    styleOverrides.whiteSpace = "nowrap"
+    styleOverrides.overflow = "hidden"
+    styleOverrides.textOverflow = "ellipsis"
+  }
+
+  ;["h1", "h2", "h3", "h4", "h5", "h6", "body1", "body2"]
+    .filter(className => className in typography)
+    .forEach(className => {
+      // @ts-expect-error
+      const typographyClass = typography[className]
+
+      if (includesClassNames(classNames, [className])) {
+        styleOverrides = { ...styleOverrides, ...typographyClass }
+      }
+
+      matchClassNames(classNames, new RegExp(`^${className}-(\\w+)$`)).forEach(
+        match => {
+          const prop = match[1]
+          if (prop in typographyClass) {
+            styleOverrides[prop] = typographyClass[prop]
+          }
+        },
+      )
+    })
+
+  return styleOverrides
+}