@databiosphere/findable-ui 41.2.0 → 42.0.0

package/lib/theme/components/muiAlert.js

@@ -3,119 +3,118 @@ import { InfoIcon } from "../../components/common/CustomIcon/components/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) => {
-    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 = {
+    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/lib/theme/components/muiAlertTitle.js

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

package/lib/theme/components/muiTableCell.d.ts

@@ -1,2 +1,2 @@
-import { Components, Theme } from "@mui/material";
-export declare const MuiTableCell: (theme: Theme) => Components["MuiTableCell"];
+import { Components } from "@mui/material";
+export declare const MuiTableCell: Components["MuiTableCell"];

package/lib/theme/components/muiTableCell.js

@@ -1,54 +1,51 @@
+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) => {
-    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 = {
+    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/lib/theme/theme.d.ts

@@ -1,14 +1,7 @@
 import { Theme, ThemeOptions } from "@mui/material";
-export interface ThemeProps {
-    theme: Theme;
-}
 /**
  * Returns a generated theme with customization.
  * @param customOptions - Custom theme option overrides.
  * @returns theme with custom theme overrides.
  */
 export declare function createAppTheme(customOptions?: ThemeOptions): Theme;
-/**
- * Default theme without customization.
- */
-export declare const defaultTheme: Theme;

package/lib/theme/theme.js

@@ -1,114 +1,36 @@
 import { createTheme } 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";
+import { typography } from "./common/typography";
 /**
  * Returns a generated theme with customization.
  * @param customOptions - Custom theme option overrides.
  * @returns theme with custom theme overrides.
  */
 export function createAppTheme(customOptions = {}) {
+    // 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(deepmerge({
-        breakpoints: {
-            values: {
-                lg: B.desktop,
-                md: B.desktopSm,
-                sm: B.tablet,
-                xs: B.mobile,
-            },
-        },
+    return createTheme(deepmerge({
+        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,
-        },
-    }, customOptions));
-    // 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;
+        typography: typography(baseTheme),
+    }, options));
 }
-/**
- * Default theme without customization.
- */
-export const defaultTheme = createAppTheme();

package/lib/theme/types.d.ts

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

package/lib/theme/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "41.2.0",
+  "version": "42.0.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/components/DataDictionary/components/Description/description.styles.ts

@@ -1,17 +1,14 @@
 import styled from "@emotion/styled";
+import { FONT } from "../../../../styles/common/constants/font";
 import { PALETTE } from "../../../../styles/common/constants/palette";
-import {
-  mediaTabletDown,
-  mediaTabletUp,
-} from "../../../../styles/common/mixins/breakpoints";
-import { textHeadingSmall } from "../../../../styles/common/mixins/fonts";
+import { bpDownSm, bpUpSm } from "../../../../styles/common/mixins/breakpoints";
 import { FluidPaper } from "../../../common/Paper/components/FluidPaper/fluidPaper";
 import { MarkdownRenderer } from "../../../MarkdownRenderer/markdownRenderer";
 
 export const StyledFluidPaper = styled(FluidPaper)`
   padding: 20px;
 
-  ${mediaTabletDown} {
+  ${bpDownSm} {
     padding: 20px 16px;
   }
 `;
@@ -34,11 +31,11 @@ export const StyledMarkdownRenderer = styled(MarkdownRenderer)`
   }
 
   h2 {
-    ${textHeadingSmall};
+    font: ${FONT.HEADING_SMALL};
     font-size: 18px;
     line-height: 26px;
 
-    ${mediaTabletUp} {
+    ${bpUpSm} {
       font-size: 18px;
       line-height: 26px;
     }

package/src/components/DataDictionary/components/Entity/entity.styles.ts

@@ -1,13 +1,13 @@
 import styled from "@emotion/styled";
 import { Typography } from "@mui/material";
-import { mediaTabletDown } from "../../../../styles/common/mixins/breakpoints";
+import { bpDownSm } from "../../../../styles/common/mixins/breakpoints";
 
 export const StyledTypography = styled(Typography)`
   &:hover a {
     opacity: 1;
   }
 
-  ${mediaTabletDown} {
+  ${bpDownSm} {
     margin: 0 16px;
   }
 ` as typeof Typography;

package/src/components/DataDictionary/components/Entity/entity.tsx

@@ -30,7 +30,7 @@ export const Entity = <T extends RowData = Attribute>({
         <StyledTypography
           component="h3"
           id={classKey}
-          variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL}
+          variant={TYPOGRAPHY_PROPS.VARIANT.HEADING_SMALL}
         >
           {cls.title} <AnchorLink anchorLink={classKey} />
         </StyledTypography>
@@ -38,7 +38,7 @@ export const Entity = <T extends RowData = Attribute>({
           <Typography
             color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
             component="div"
-            variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES}
+            variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES}
           >
             {cls.description}
           </Typography>

package/src/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.styles.ts

@@ -3,7 +3,7 @@ import { LayoutSpacing } from "../../../../../../hooks/UseLayoutSpacing/types";
 import { PALETTE } from "../../../../../../styles/common/constants/palette";
 import {
   bpDown1024,
-  mediaTabletDown,
+  bpDownSm,
 } from "../../../../../../styles/common/mixins/breakpoints";
 import { LAYOUT_SPACING } from "../../constants";
 
@@ -31,7 +31,7 @@ export const Layout = styled("div")<LayoutSpacing>`
     position: relative;
   }
 
-  ${mediaTabletDown} {
+  ${bpDownSm} {
     margin: 0 16px;
   }
 `;

package/src/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.styles.ts

@@ -2,7 +2,7 @@ import styled from "@emotion/styled";
 import { LayoutSpacing } from "../../../../../../hooks/UseLayoutSpacing/types";
 import {
   bpDown1024,
-  mediaTabletDown,
+  bpDownSm,
 } from "../../../../../../styles/common/mixins/breakpoints";
 
 export const Layout = styled("div")<LayoutSpacing>`
@@ -20,7 +20,7 @@ export const Layout = styled("div")<LayoutSpacing>`
     position: relative;
   }
 
-  ${mediaTabletDown} {
+  ${bpDownSm} {
     margin: 0 16px;
   }
 `;

package/src/components/DataDictionary/components/Outline/outline.styles.ts

@@ -1,22 +1,18 @@
 import styled from "@emotion/styled";
-import {
-  inkLight,
-  inkMain,
-  smokeDark,
-} from "../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 import { Outline } from "../../../Layout/components/Outline/outline";
 
 export const StyledOutline = styled(Outline)`
   &.MuiTabs-root {
     .MuiTab-root {
-      color: ${inkLight};
+      color: ${PALETTE.INK_LIGHT};
 
       &.Mui-selected {
-        color: ${inkMain};
+        color: ${PALETTE.INK_MAIN};
       }
 
       &.Mui-disabled {
-        color: ${smokeDark};
+        color: ${PALETTE.SMOKE_DARK};
         opacity: 1;
       }
     }