@databiosphere/findable-ui 41.2.0 → 42.0.0

package/src/theme/components/muiAlert.ts

@@ -1,123 +1,122 @@
-import { Components, Theme } from "@mui/material";
+import { Components } from "@mui/material";
 import { ErrorIcon } from "../../components/common/CustomIcon/components/ErrorIcon/errorIcon";
 import { InfoIcon } from "../../components/common/CustomIcon/components/InfoIcon/infoIcon";
 import { SuccessIcon } from "../../components/common/CustomIcon/components/SuccessIcon/successIcon";
 import { WarningIcon } from "../../components/common/CustomIcon/components/WarningIcon/warningIcon";
 import { COLOR_MIXES } from "../../styles/common/constants/colorMixes";
+import { FONT } from "../../styles/common/constants/font";
+import { PALETTE } from "../../styles/common/constants/palette";
 import { SIZE } from "../../styles/common/constants/size";
 import { COLOR, SEVERITY, VARIANT } from "../../styles/common/mui/alert";
 import { FONT_SIZE } from "../../styles/common/mui/icon";
-import { TEXT_BODY_500 } from "../common/typography";
 
-export const MuiAlert = (theme: Theme): Components["MuiAlert"] => {
-  return {
-    defaultProps: {
-      elevation: 1,
-      iconMapping: {
-        error: ErrorIcon({ fontSize: FONT_SIZE.SMALL }),
-        info: InfoIcon({ fontSize: FONT_SIZE.SMALL }),
-        success: SuccessIcon({ fontSize: FONT_SIZE.SMALL }),
-        warning: WarningIcon({ fontSize: FONT_SIZE.SMALL }),
-      },
-      size: SIZE.MEDIUM,
+export const MuiAlert: Components["MuiAlert"] = {
+  defaultProps: {
+    elevation: 1,
+    iconMapping: {
+      error: ErrorIcon({ fontSize: FONT_SIZE.SMALL }),
+      info: InfoIcon({ fontSize: FONT_SIZE.SMALL }),
+      success: SuccessIcon({ fontSize: FONT_SIZE.SMALL }),
+      warning: WarningIcon({ fontSize: FONT_SIZE.SMALL }),
     },
-    styleOverrides: {
-      icon: {
-        opacity: 1,
-        padding: 0,
-      },
-      message: {
-        ...theme.typography[TEXT_BODY_500], // default size - "medium"
-        display: "grid",
-        gap: 4,
-        padding: 0,
-      },
-      root: {
-        alignItems: "flex-start",
-        borderRadius: 8,
-        color: theme.palette.ink.main,
-        padding: 16,
-        variants: [
-          {
-            props: { severity: SEVERITY.ERROR },
-            style: {
-              backgroundColor: theme.palette.alert.lightest,
-              border: `1px solid ${COLOR_MIXES.ALERT_MAIN_32}`,
-              // eslint-disable-next-line sort-keys -- disabling key order for readability
-              "& .MuiAlert-icon": {
-                color: theme.palette.alert.main,
-              },
+    size: SIZE.MEDIUM,
+  },
+  styleOverrides: {
+    icon: {
+      opacity: 1,
+      padding: 0,
+    },
+    message: {
+      display: "grid",
+      font: FONT.BODY_500,
+      gap: 4,
+      padding: 0,
+    },
+    root: {
+      alignItems: "flex-start",
+      borderRadius: 8,
+      color: PALETTE.INK_MAIN,
+      padding: 16,
+      variants: [
+        {
+          props: { severity: SEVERITY.ERROR },
+          style: {
+            backgroundColor: PALETTE.ALERT_LIGHTEST,
+            border: `1px solid ${COLOR_MIXES.ALERT_MAIN_32}`,
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "& .MuiAlert-icon": {
+              color: PALETTE.ALERT_MAIN,
             },
           },
-          {
-            props: { severity: SEVERITY.INFO },
-            style: {
-              backgroundColor: theme.palette.info.lightest,
-              border: `1px solid ${COLOR_MIXES.INFO_MAIN_32}`,
-              // eslint-disable-next-line sort-keys -- disabling key order for readability
-              "& .MuiAlert-icon": {
-                color: theme.palette.info.main,
-              },
+        },
+        {
+          props: { severity: SEVERITY.INFO },
+          style: {
+            backgroundColor: PALETTE.INFO_LIGHTEST,
+            border: `1px solid ${COLOR_MIXES.INFO_MAIN_32}`,
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "& .MuiAlert-icon": {
+              color: PALETTE.INFO_MAIN,
             },
           },
-          {
-            props: { severity: SEVERITY.SUCCESS },
-            style: {
-              backgroundColor: theme.palette.success.lightest,
-              border: `1px solid ${COLOR_MIXES.SUCCESS_MAIN_32}`,
-              // eslint-disable-next-line sort-keys -- disabling key order for readability
-              "& .MuiAlert-icon": {
-                color: theme.palette.success.main,
-              },
+        },
+        {
+          props: { severity: SEVERITY.SUCCESS },
+          style: {
+            backgroundColor: PALETTE.SUCCESS_LIGHTEST,
+            border: `1px solid ${COLOR_MIXES.SUCCESS_MAIN_32}`,
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "& .MuiAlert-icon": {
+              color: PALETTE.SUCCESS_MAIN,
             },
           },
-          {
-            props: { severity: SEVERITY.WARNING },
-            style: {
-              backgroundColor: theme.palette.warning.lightest,
-              border: `1px solid ${COLOR_MIXES.WARNING_MAIN_32}`,
-              // eslint-disable-next-line sort-keys -- disabling key order for readability
-              "& .MuiAlert-icon": {
-                color: theme.palette.warning.main,
-              },
+        },
+        {
+          props: { severity: SEVERITY.WARNING },
+          style: {
+            backgroundColor: PALETTE.WARNING_LIGHTEST,
+            border: `1px solid ${COLOR_MIXES.WARNING_MAIN_32}`,
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "& .MuiAlert-icon": {
+              color: PALETTE.WARNING_MAIN,
             },
           },
-          {
-            props: { color: COLOR.INK },
-            style: {
-              backgroundColor: theme.palette.ink.main,
-              color: theme.palette.common.white,
-              // eslint-disable-next-line sort-keys -- disabling key order for readability
-              ".MuiLink-root": {
-                color: theme.palette.common.white,
-              },
+        },
+        {
+          props: { color: COLOR.INK },
+          style: {
+            backgroundColor: PALETTE.INK_MAIN,
+            color: PALETTE.COMMON_WHITE,
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            ".MuiLink-root": {
+              color: PALETTE.COMMON_WHITE,
             },
           },
-          {
-            props: { color: COLOR.PRIMARY },
-            style: {
-              backgroundColor: theme.palette.primary.main,
-              color: theme.palette.common.white,
-              // eslint-disable-next-line sort-keys -- disabling key order for readability
-              ".MuiLink-root": {
-                color: theme.palette.common.white,
-              },
+        },
+        {
+          props: { color: COLOR.PRIMARY },
+          style: {
+            backgroundColor: PALETTE.PRIMARY_MAIN,
+            color: PALETTE.COMMON_WHITE,
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            ".MuiLink-root": {
+              color: PALETTE.COMMON_WHITE,
             },
           },
-          {
-            props: { color: COLOR.SMOKE },
-            style: {
-              backgroundColor: theme.palette.smoke.light,
-            },
+        },
+        {
+          props: { color: COLOR.SMOKE },
+          style: {
+            backgroundColor: PALETTE.SMOKE_LIGHT,
           },
-          {
-            props: { variant: VARIANT.FILLED },
-            style: {
-              border: "none",
-            },
+        },
+        {
+          props: { variant: VARIANT.FILLED },
+          style: {
+            border: "none",
           },
-        ],
-      },
+        },
+      ],
     },
-  };
+  },
 };

package/src/theme/components/muiAlertTitle.ts

@@ -1,10 +1,10 @@
 import { Components } from "@mui/material";
-import { TEXT_BODY_500 } from "../common/typography";
+import { TYPOGRAPHY_PROPS } from "../../styles/common/mui/typography";
 
 export const MuiAlertTitle: Components["MuiAlertTitle"] = {
   defaultProps: {
     gutterBottom: false,
-    variant: TEXT_BODY_500,
+    variant: TYPOGRAPHY_PROPS.VARIANT.BODY_500,
   },
   styleOverrides: {
     root: {

package/src/theme/components/muiTableCell.ts

@@ -1,56 +1,53 @@
-import { Components, Theme } from "@mui/material";
+import { Components } from "@mui/material";
+import { FONT } from "../../styles/common/constants/font";
 import { PALETTE } from "../../styles/common/constants/palette";
 import { TABLE_CELL_PROPS } from "../../styles/common/mui/tableCell";
-import { TEXT_BODY_400, TEXT_BODY_SMALL_500 } from "../common/typography";
 
-export const MuiTableCell = (theme: Theme): Components["MuiTableCell"] => {
-  const paletteSmoke = theme.palette.smoke;
-  const typography = theme.typography;
-  return {
-    defaultProps: {},
-    styleOverrides: {
-      root: {
-        minHeight: 56,
-        stickyHeader: {
-          boxShadow: `0 1px 0 ${paletteSmoke.main}`,
+export const MuiTableCell: Components["MuiTableCell"] = {
+  defaultProps: {},
+  styleOverrides: {
+    root: {
+      minHeight: 56,
+      stickyHeader: {
+        boxShadow: `0 1px 0 ${PALETTE.SMOKE_MAIN}`,
+      },
+      variants: [
+        {
+          props: { size: TABLE_CELL_PROPS.SIZE.MEDIUM },
+          style: { padding: "10px 16px" },
         },
-        variants: [
-          {
-            props: { size: TABLE_CELL_PROPS.SIZE.MEDIUM },
-            style: { padding: "10px 16px" },
-          },
-          {
-            props: { size: TABLE_CELL_PROPS.SIZE.SMALL },
-            style: { padding: "8px 16px" },
-          },
-          {
-            props: { padding: TABLE_CELL_PROPS.PADDING.CHECKBOX },
-            style: { paddingRight: 0, width: "unset" },
-          },
-          {
-            props: { padding: TABLE_CELL_PROPS.PADDING.NONE },
-            style: { padding: 0 },
-          },
-          {
-            props: { variant: TABLE_CELL_PROPS.VARIANT.BODY },
-            style: {
-              ...typography[TEXT_BODY_400],
-              "& mark": {
-                backgroundColor: PALETTE.WARNING_LIGHT,
-                color: "inherit",
-                padding: "2px 0",
-              },
+        {
+          props: { size: TABLE_CELL_PROPS.SIZE.SMALL },
+          style: { padding: "8px 16px" },
+        },
+        {
+          props: { padding: TABLE_CELL_PROPS.PADDING.CHECKBOX },
+          style: { paddingRight: 0, width: "unset" },
+        },
+        {
+          props: { padding: TABLE_CELL_PROPS.PADDING.NONE },
+          style: { padding: 0 },
+        },
+        {
+          props: { variant: TABLE_CELL_PROPS.VARIANT.BODY },
+          style: {
+            font: FONT.BODY_400,
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "& mark": {
+              backgroundColor: PALETTE.WARNING_LIGHT,
+              color: "inherit",
+              padding: "2px 0",
             },
           },
-          {
-            props: { variant: TABLE_CELL_PROPS.VARIANT.HEAD },
-            style: {
-              ...typography[TEXT_BODY_SMALL_500],
-              backgroundColor: paletteSmoke.lightest,
-            },
+        },
+        {
+          props: { variant: TABLE_CELL_PROPS.VARIANT.HEAD },
+          style: {
+            backgroundColor: PALETTE.SMOKE_LIGHTEST,
+            font: FONT.BODY_SMALL_500,
           },
-        ],
-      },
+        },
+      ],
     },
-  };
+  },
 };

package/src/theme/theme.ts

@@ -1,15 +1,11 @@
 import { createTheme, Theme, ThemeOptions } from "@mui/material";
 import { deepmerge } from "@mui/utils";
-import * as B from "./common/breakpoints";
-import * as C from "./common/components";
-import * as P from "./common/palette";
+import { breakpoints } from "./common/breakpoints";
+import { components } from "./common/components";
+import { fontStyles } from "./common/fontStyles";
+import { palette } from "./common/palette";
 import { shadows } from "./common/shadows";
-import * as T from "./common/typography";
-import * as M from "./components";
-
-export interface ThemeProps {
-  theme: Theme;
-}
+import { typography } from "./common/typography";
 
 /**
  * Returns a generated theme with customization.
@@ -17,111 +13,33 @@ export interface ThemeProps {
  * @returns theme with custom theme overrides.
  */
 export function createAppTheme(customOptions: ThemeOptions = {}): Theme {
+  // Clone custom options to avoid mutation.
+  const options = { ...customOptions };
+
+  // Create base theme.
+  const baseTheme = createTheme({
+    breakpoints: breakpoints(options),
+    typography: fontStyles(options),
+  });
+
+  // Remove breakpoints from custom options.
+  delete options.breakpoints;
+
   // Generate default theme with custom overrides.
-  const theme = createTheme(
+  return createTheme(
     deepmerge(
       {
-        breakpoints: {
-          values: {
-            lg: B.desktop,
-            md: B.desktopSm,
-            sm: B.tablet,
-            xs: B.mobile,
-          },
-        },
+        app: { fontFamily: baseTheme.typography.fontFamily },
+        breakpoints: baseTheme.breakpoints,
+        components,
+        cssVarPrefix: "",
         cssVariables: true,
-        palette: {
-          alert: P.alert,
-          background: P.background,
-          common: P.common,
-          info: P.info,
-          ink: P.ink,
-          primary: P.primary,
-          smoke: P.smoke,
-          success: P.success,
-          text: P.text,
-          warning: P.warning,
-        },
+        palette,
         shadows,
         spacing: 4,
-        typography: {
-          [T.TEXT_BODY_400]: T.textBody400,
-          [T.TEXT_BODY_400_2_LINES]: T.textBody4002Lines,
-          [T.TEXT_BODY_500]: T.textBody500,
-          [T.TEXT_BODY_500_2_LINES]: T.textBody5002Lines,
-          [T.TEXT_BODY_LARGE_400]: T.textBodyLarge400,
-          [T.TEXT_BODY_LARGE_400_2_LINES]: T.textBodyLarge4002Lines,
-          [T.TEXT_BODY_LARGE_500]: T.textBodyLarge500,
-          [T.TEXT_BODY_SMALL_400]: T.textBodySmall400,
-          [T.TEXT_BODY_SMALL_400_2_LINES]: T.textBodySmall4002Lines,
-          [T.TEXT_BODY_SMALL_500]: T.textBodySmall500,
-          [T.TEXT_HEADING]: T.textHeading,
-          [T.TEXT_HEADING_LARGE]: T.textHeadingLarge,
-          [T.TEXT_HEADING_SMALL]: T.textHeadingSmall,
-          [T.TEXT_HEADING_XLARGE]: T.textHeadingXLarge,
-          [T.TEXT_HEADING_XSMALL]: T.textHeadingXSmall,
-          [T.TEXT_UPPERCASE_500]: T.textUppercase500,
-          fontFamily: T.fontFamily,
-        },
+        typography: typography(baseTheme),
       },
-      customOptions
+      options
     )
   );
-
-  // Theme components.
-  theme.components = {
-    MuiAccordion: C.MuiAccordion(theme),
-    MuiAccordionDetails: C.MuiAccordionDetails,
-    MuiAccordionSummary: C.MuiAccordionSummary,
-    MuiAlert: M.MuiAlert(theme),
-    MuiAlertTitle: M.MuiAlertTitle,
-    MuiAppBar: C.MuiAppBar,
-    MuiBackdrop: C.MuiBackdrop,
-    MuiBreadcrumbs: C.MuiBreadcrumbs(theme),
-    MuiButton: C.MuiButton(theme),
-    MuiButtonBase: C.MuiButtonBase(theme),
-    MuiButtonGroup: M.MuiButtonGroup,
-    MuiCard: C.MuiCard,
-    MuiCheckbox: C.MuiCheckbox(theme),
-    MuiChip: C.MuiChip(theme),
-    MuiCircularProgress: C.MuiCircularProgress(theme),
-    MuiCssBaseline: C.MuiCssBaseline(theme),
-    MuiDialog: C.MuiDialog,
-    MuiDialogActions: C.MuiDialogActions,
-    MuiDialogContent: C.MuiDialogContent(theme),
-    MuiDialogTitle: C.MuiDialogTitle(theme),
-    MuiDivider: C.MuiDivider(theme),
-    MuiDrawer: C.MuiDrawer,
-    MuiFormControlLabel: C.MuiFormControlLabel(theme),
-    MuiFormGroup: C.MuiFormGroup,
-    MuiFormHelperText: C.MuiFormHelperText(theme),
-    MuiIconButton: C.MuiIconButton(theme),
-    MuiInputBase: C.MuiInputBase(theme),
-    MuiLink: C.MuiLink,
-    MuiListItemButton: C.MuiListItemButton(theme),
-    MuiListItemText: C.MuiListItemText,
-    MuiListSubheader: C.MuiListSubheader(theme),
-    MuiMenuItem: C.MuiMenuItem(theme),
-    MuiOutlinedInput: C.MuiOutlinedInput(theme),
-    MuiPaper: C.MuiPaper(theme),
-    MuiRadio: C.MuiRadio(theme),
-    MuiSelect: C.MuiSelect,
-    MuiSvgIcon: C.MuiSvgIcon(theme),
-    MuiTab: C.MuiTab(theme),
-    MuiTableCell: M.MuiTableCell(theme),
-    MuiTableSortLabel: C.MuiTableSortLabel,
-    MuiTabs: C.MuiTabs(theme),
-    MuiToggleButton: C.MuiToggleButton(theme),
-    MuiToggleButtonGroup: C.MuiToggleButtonGroup(theme),
-    MuiToolbar: C.MuiToolbar,
-    MuiTooltip: C.MuiTooltip(theme),
-    MuiTypography: C.MuiTypography,
-  };
-
-  return theme;
 }
-
-/**
- * Default theme without customization.
- */
-export const defaultTheme: Theme = createAppTheme();

package/src/theme/types.ts

@@ -0,0 +1,5 @@
+import { Theme } from "@mui/material";
+
+export interface ThemeProps {
+  theme: Theme;
+}