@databiosphere/findable-ui 41.2.0 → 42.0.0

package/lib/components/Layout/components/Sidebar/components/SidebarButton/sidebarButton.styles.js

@@ -1,25 +1,25 @@
 import styled from "@emotion/styled";
-import { mediaDesktopSmallUp, mediaTabletUp, } from "../../../../../../styles/common/mixins/breakpoints";
-import { primaryMain, white, } from "../../../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
+import { bpUpMd, bpUpSm, } from "../../../../../../styles/common/mixins/breakpoints";
 import { ButtonSecondary } from "../../../../../common/Button/components/ButtonSecondary/buttonSecondary";
 export const SidebarButton = styled(ButtonSecondary) `
   grid-column: 1 / -1;
   padding: 10px;
 
-  ${mediaTabletUp} {
+  ${bpUpSm} {
     grid-column: 2;
     justify-self: flex-end;
   }
 
-  ${mediaDesktopSmallUp} {
+  ${bpUpMd} {
     display: none;
   }
 `;
 export const Badge = styled.div `
   align-items: center;
-  background-color: ${primaryMain};
+  background-color: ${PALETTE.PRIMARY_MAIN};
   border-radius: 10px;
-  color: ${white};
+  color: ${PALETTE.COMMON_WHITE};
   display: flex;
   flex: none;
   font-size: 12px;

package/lib/components/Layout/components/Sidebar/components/SidebarDrawer/sidebarDrawer.styles.js

@@ -1,13 +1,13 @@
 import styled from "@emotion/styled";
 import { Popover as MPopover } from "@mui/material";
-import { mediaDesktopSmallDown } from "../../../../../../styles/common/mixins/breakpoints";
-import { smokeLight, white, } from "../../../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
+import { bpDownMd } from "../../../../../../styles/common/mixins/breakpoints";
 import { IconButton as DXIconButton } from "../../../../../common/IconButton/iconButton";
 export const TemporarySidebar = styled(MPopover) `
   &.MuiPopover-root {
-    ${mediaDesktopSmallDown} {
+    ${bpDownMd} {
       & .MuiPaper-root {
-        background-color: ${smokeLight};
+        background-color: ${PALETTE.SMOKE_LIGHT};
         box-shadow: 0 1px 4px 0 transparent; // required; possible bug - box shadow "none" affects rendering of main content.
         height: 100%;
         max-height: 100%;
@@ -18,7 +18,7 @@ export const TemporarySidebar = styled(MPopover) `
   }
 `;
 export const IconButton = styled(DXIconButton) `
-  color: ${white};
+  color: ${PALETTE.COMMON_WHITE};
   left: calc(100% + 4px);
   position: absolute;
   top: 4px;

package/lib/components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel.js

@@ -1,6 +1,6 @@
 import { Typography } from "@mui/material";
 import React from "react";
-import { TEXT_BODY_LARGE_500 } from "../../../../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 export const SidebarLabel = ({ label }) => {
-    return (React.createElement(Typography, { component: "div", variant: TEXT_BODY_LARGE_500 }, label));
+    return (React.createElement(Typography, { component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_LARGE_500 }, label));
 };

package/lib/components/Layout/components/Sidebar/components/SidebarPositioner/sidebarPositioner.styles.js

@@ -1,12 +1,12 @@
 import styled from "@emotion/styled";
-import { mediaDesktopSmallUp } from "../../../../../../styles/common/mixins/breakpoints";
+import { bpUpMd } from "../../../../../../styles/common/mixins/breakpoints";
 export const SidebarPositioner = styled("div") `
   box-sizing: border-box;
   height: 100%;
   overflow: visible;
   padding: 16px 0;
 
-  ${mediaDesktopSmallUp} {
+  ${bpUpMd} {
     max-height: 100vh;
     overflow: auto;
     padding: ${({ headerHeight }) => headerHeight}px 0 0;

package/lib/components/Layout/components/Sidebar/components/SidebarTools/sidebarTools.styles.js

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { mediaDesktopSmallUp } from "../../../../../../styles/common/mixins/breakpoints";
+import { bpUpMd } from "../../../../../../styles/common/mixins/breakpoints";
 export const SidebarTools = styled.div `
   display: grid;
   gap: 8px 0;
@@ -11,7 +11,7 @@ export const SidebarTools = styled.div `
     grid-column: 1 / -1; // SearchAllFilters component to utilize full width of the grid.
   }
 
-  ${mediaDesktopSmallUp} {
+  ${bpUpMd} {
     padding: 8px 16px;
   }
 `;

package/lib/components/Layout/components/Sidebar/sidebar.js

@@ -1,25 +1,24 @@
 import React, { useEffect } from "react";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
 import { TEST_IDS } from "../../../../tests/testIds";
-import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
 import { useDrawer } from "../../../common/Drawer/provider/hook";
 import { SidebarDrawer } from "./components/SidebarDrawer/sidebarDrawer";
 import { SidebarPositioner } from "./components/SidebarPositioner/sidebarPositioner";
 import { Sidebar as PermanentSidebar } from "./sidebar.styles";
 export const Sidebar = ({ children }) => {
     const { onClose, open } = useDrawer();
-    const desktopSmDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, DESKTOP_SM);
-    const drawerSidebar = desktopSmDown;
+    const bpDownMd = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "md");
+    const drawerSidebar = bpDownMd;
     const Bar = drawerSidebar ? SidebarDrawer : PermanentSidebar;
     const barProps = drawerSidebar
         ? { onClose, open }
         : { "data-testid": TEST_IDS.SIDEBAR };
     // Closes an open, controlled drawer sidebar with a change of breakpoint.
     useEffect(() => {
-        if (open && !desktopSmDown) {
+        if (open && !bpDownMd) {
             onClose();
         }
-    }, [desktopSmDown, onClose, open]);
+    }, [bpDownMd, onClose, open]);
     return (React.createElement(Bar, { ...barProps },
         React.createElement(SidebarPositioner, null, children)));
 };

package/lib/components/Layout/components/Sidebar/sidebar.styles.js

@@ -1,8 +1,8 @@
 import styled from "@emotion/styled";
-import { smokeMain } from "../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 export const Sidebar = styled.div `
   align-self: stretch;
-  border-right: 1px solid ${smokeMain};
+  border-right: 1px solid ${PALETTE.SMOKE_MAIN};
   box-sizing: content-box;
   width: 264px;
 `;

package/lib/components/Links/components/Link/link.js

@@ -2,6 +2,7 @@ import { Link as MLink, Typography as MTypography, } from "@mui/material";
 import NLink from "next/link";
 import React from "react";
 import { isValidUrl } from "../../../../common/utils";
+import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 import { CopyToClipboard } from "../../../common/CopyToClipboard/copyToClipboard";
 import { ANCHOR_TARGET, REL_ATTRIBUTE } from "../../common/entities";
 import { isClientSideNavigation, isURLObjectWithHrefAndQuery, isURLString, } from "../../common/utils";
@@ -26,5 +27,5 @@ export const Link = ({ className, copyable = false, label, noWrap = false, onCli
         }
     }
     /* Invalid URL */
-    return (React.createElement(MTypography, { component: "span", variant: "inherit", ...TypographyProps, ...props }, label));
+    return (React.createElement(MTypography, { component: "span", variant: TYPOGRAPHY_PROPS.VARIANT.INHERIT, ...TypographyProps, ...props }, label));
 };

package/lib/components/Loading/loading.js

@@ -1,5 +1,6 @@
 import { Fade, Typography } from "@mui/material";
 import React from "react";
+import { TYPOGRAPHY_PROPS } from "../../styles/common/mui/typography";
 import { LoadingIcon } from "../common/CustomIcon/components/LoadingIcon/loadingIcon";
 import { PAPER_PANEL_STYLE } from "../common/Paper/paper";
 import { LoadingPaper, LoadingPositioner } from "./loading.styles";
@@ -15,7 +16,7 @@ export const Loading = ({ appear = true, autoPosition = true, iconSize = "large"
         React.createElement(LoadingPositioner, { panelStyle: panelStyle },
             React.createElement(LoadingPaper, { panelStyle: panelStyle },
                 React.createElement(LoadingIcon, { color: "primary", fontSize: iconSize }),
-                text && React.createElement(Typography, { variant: "text-body-400" }, text)))));
+                text && (React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, text))))));
 };
 /**
  * Callback fired before the "entering" status is applied.

package/lib/components/Loading/loading.styles.js

@@ -1,7 +1,7 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { COLOR_MIXES } from "../../styles/common/constants/colorMixes";
-import { TABLET } from "../../theme/common/breakpoints";
+import { bpDownSm } from "../../styles/common/mixins/breakpoints";
 import { Paper, PAPER_PANEL_STYLE } from "../common/Paper/paper";
 import { LOADING_PANEL_STYLE } from "./loading";
 export const LoadingPositioner = styled.div `
@@ -40,7 +40,7 @@ export const LoadingPaper = styled(Paper) `
     css `
       border-radius: 8px;
 
-      ${theme.breakpoints.down(TABLET)} {
+      ${bpDownSm({ theme })} {
         border-left: none;
         border-radius: 0;
         border-right: none;

package/lib/components/Login/components/Button/button.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "style" | "size" | "href" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "action" | "loading" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loadingIndicator" | "loadingPosition" | "startIcon" | "variant"> & {
+}, "style" | "size" | "href" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableFocusRipple" | "loading" | "loadingIndicator" | "variant" | "disableElevation" | "endIcon" | "fullWidth" | "loadingPosition" | "startIcon"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Login/components/Section/components/Consent/consent.js

@@ -1,6 +1,6 @@
 import { Checkbox, Typography } from "@mui/material";
 import React from "react";
-import { TEXT_BODY_400 } from "../../../../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { UncheckedErrorIcon } from "../../../../../common/CustomIcon/components/UncheckedErrorIcon/uncheckedErrorIcon";
 import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
@@ -10,5 +10,5 @@ export const Consent = ({ children, className, handleConsent, isDisabled, isErro
         return null;
     return (React.createElement(StyledGrid, { className: className, ...props },
         React.createElement(Checkbox, { checkedIcon: React.createElement(CheckedIcon, null), icon: isError ? React.createElement(UncheckedErrorIcon, null) : React.createElement(UncheckedIcon, null), onChange: handleConsent }),
-        React.createElement(Typography, { variant: TEXT_BODY_400 }, children)));
+        React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, children)));
 };

package/lib/components/Login/components/Section/components/Consent/consent.styles.d.ts

@@ -2,6 +2,6 @@ export declare const StyledGrid: import("@emotion/styled").StyledComponent<impor
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
 } & import("@mui/system").SystemProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "sx" | ("p" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "color" | "fontSize" | "display" | "fontFamily" | "fontStyle" | "fontWeight" | "letterSpacing" | "overflow" | "visibility" | "bgcolor" | "border" | "boxShadow" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "padding" | "paddingBlock" | "paddingInline" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | keyof import("@mui/material").GridBaseProps> & {
+}, "sx" | ("p" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | keyof import("@mui/material").GridBaseProps> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Login/components/Section/components/Consent/consent.styles.js

@@ -6,7 +6,7 @@ export const StyledGrid = styled(Grid) `
   display: flex;
   gap: 12px;
 
-  .MuiTypography-text-body-400 {
+  .MuiTypography-body-400 {
     .MuiLink-root {
       color: inherit;
     }

package/lib/components/Login/components/Section/components/Warning/warning.js

@@ -4,5 +4,5 @@ import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography
 export const Warning = ({ children, className, ...props /* Mui TypographyOwnProps */ }) => {
     if (!children)
         return null;
-    return (React.createElement(Typography, { className: className, color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, mt: 6, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400, ...props }, children));
+    return (React.createElement(Typography, { className: className, color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, mt: 6, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400, ...props }, children));
 };

package/lib/components/Login/login.js

@@ -1,13 +1,14 @@
 import { Checkbox, Typography } from "@mui/material";
 import React, { useCallback, useState } from "react";
 import { useAuth } from "../../providers/authentication/auth/hook";
+import { TYPOGRAPHY_PROPS } from "../../styles/common/mui/typography";
 import { CheckedIcon } from "../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { UncheckedErrorIcon } from "../common/CustomIcon/components/UncheckedErrorIcon/uncheckedErrorIcon";
 import { UncheckedIcon } from "../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
 import { RoundedPaper } from "../common/Paper/paper.styles";
 import { SectionContent } from "../common/Section/section.styles";
 import { Button } from "./components/Button/button";
-import { LoginAgreement, LoginSection, LoginSectionActions, LoginText, LoginWarning, LoginWrapper, TermsOfService, } from "./login.styles";
+import { LoginAgreement, LoginSection, LoginSectionActions, LoginWrapper, StyledTypography, } from "./login.styles";
 export const Login = ({ providers = [], termsOfService, text, title, warning, }) => {
     const { service: { requestLogin } = {} } = useAuth();
     const [isError, setIsError] = useState(false);
@@ -31,12 +32,12 @@ export const Login = ({ providers = [], termsOfService, text, title, warning, })
         React.createElement(RoundedPaper, null,
             React.createElement(LoginSection, null,
                 React.createElement(SectionContent, null,
-                    React.createElement(Typography, { color: "ink.main", component: "h3", variant: "text-heading" }, title),
-                    text && React.createElement(LoginText, null, text)),
+                    React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_MAIN, component: "h3", variant: TYPOGRAPHY_PROPS.VARIANT.HEADING }, title),
+                    text && (React.createElement(Typography, { component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, text))),
                 React.createElement(LoginSectionActions, null,
                     termsOfService && (React.createElement(LoginAgreement, null,
                         React.createElement(Checkbox, { checkedIcon: React.createElement(CheckedIcon, null), icon: isError ? React.createElement(UncheckedErrorIcon, null) : React.createElement(UncheckedIcon, null), onChange: handleChange }),
-                        React.createElement(TermsOfService, null, termsOfService))),
+                        React.createElement(StyledTypography, { component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, termsOfService))),
                     providers?.map((provider) => (React.createElement(Button, { key: provider.id, endIcon: "icon" in provider && provider.icon, onClick: () => onLogin(provider.id) }, provider.name)))))),
-        warning && React.createElement(LoginWarning, null, warning)));
+        warning && (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400 }, warning))));
 };

package/lib/components/Login/login.styles.d.ts

@@ -1,3 +1,4 @@
+import { Typography } from "@mui/material";
 export declare const LoginWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -18,15 +19,4 @@ export declare const LoginSectionActions: import("@emotion/styled").StyledCompon
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
-export declare const LoginText: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TermsOfService: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const LoginWarning: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledTypography: typeof Typography;

package/lib/components/Login/login.styles.js

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
-import { textBody400, textBodySmall400, } from "../../styles/common/mixins/fonts";
-import { TABLET } from "../../theme/common/breakpoints";
+import { Typography } from "@mui/material";
+import { bpUpSm } from "../../styles/common/mixins/breakpoints";
 import { Section, SectionActions } from "../common/Section/section.styles";
 export const LoginWrapper = styled.div `
   box-sizing: content-box;
@@ -15,7 +15,7 @@ export const LoginSection = styled(Section) `
   gap: 24px 0;
   padding: 32px;
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${bpUpSm} {
     padding: 32px;
   }
 `;
@@ -29,18 +29,9 @@ export const LoginSectionActions = styled(SectionActions) `
   flex-direction: column;
   gap: 16px 0;
 `;
-export const LoginText = styled.div `
-  ${textBody400};
-`;
-export const TermsOfService = styled.div `
-  ${textBody400};
-
+export const StyledTypography = styled(Typography) `
   a {
     color: inherit;
     text-decoration: underline;
   }
 `;
-export const LoginWarning = styled.div `
-  ${textBodySmall400};
-  color: ${({ theme }) => theme.palette.ink.light};
-`;

package/lib/components/MarkdownRenderer/components/Table/table.styles.js

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
+import { FONT } from "../../../../styles/common/constants/font";
 import { PALETTE } from "../../../../styles/common/constants/palette";
-import { textBody500 } from "../../../../styles/common/mixins/fonts";
 export const StyledTable = styled("table") `
   border-collapse: collapse;
   margin: 16px 0;
@@ -29,8 +29,8 @@ export const StyledTable = styled("table") `
   }
 
   th {
-    ${textBody500}
     border-bottom: 1px solid ${PALETTE.SMOKE_MAIN};
+    font: ${FONT.BODY_500};
   }
 
   td {

package/lib/components/MarkdownRenderer/markdownRenderer.js

@@ -54,6 +54,6 @@ export const MarkdownRenderer = ({ className, components: componentOptions = COM
         };
     }, [components, regex, value]);
     if (error)
-        return (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.ERROR, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400 }, error));
+        return (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.ERROR, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400 }, error));
     return React.createElement(StyledContainer, { className: className }, element);
 };

package/lib/components/NoResults/noResults.js

@@ -13,6 +13,6 @@ export const NoResults = ({ actions, description, Paper, title, }) => {
             React.createElement(StatusIcon, { priority: PRIORITY.LOW, StatusIcon: SearchOffIcon }),
             React.createElement(StyledSectionContent, null,
                 React.createElement(SectionTitle, { title: title }),
-                description && (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES }, description))),
+                description && (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES }, description))),
             actions && React.createElement(SectionActions, null, actions))));
 };

package/lib/components/NoResults/noResults.styles.js

@@ -1,9 +1,9 @@
 import styled from "@emotion/styled";
-import { white } from "../../styles/common/mixins/colors";
+import { PALETTE } from "../../styles/common/constants/palette";
 import { Section, SectionContent } from "../common/Section/section.styles";
 export const StyledSection = styled(Section) `
   align-items: center;
-  background-color: ${white};
+  background-color: ${PALETTE.COMMON_WHITE};
   padding: 40px !important; /* Overrides section padding. */
 `;
 export const StyledSectionContent = styled(SectionContent) `

package/lib/components/Project/components/Contacts/contacts.js

@@ -1,12 +1,13 @@
 import { Link as EmailLink, Typography } from "@mui/material";
 import Link from "next/link";
 import React from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 import { CollapsableSection } from "../../../common/Section/components/CollapsableSection/collapsableSection";
 import { SectionDetailsEmpty } from "../../../common/Section/components/SectionDetailsEmpty/sectionDetailsEmpty";
 import { SectionContentListItem } from "../../../common/Section/section.styles";
 export const Contacts = ({ contacts }) => {
     return (React.createElement(CollapsableSection, { collapsable: true, title: "Contact" }, contacts ? (contacts.map(({ email, institution, name }, c) => (React.createElement(SectionContentListItem, { key: `${name}${c}` },
-        React.createElement(Typography, { variant: "text-body-500-2lines" }, name),
+        React.createElement(Typography, { fontWeight: 500, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES }, name),
         institution && React.createElement("span", null, institution),
         email && (React.createElement(Link, { href: `mailto:${email}`, legacyBehavior: true, passHref: true },
             React.createElement(EmailLink, null, email))))))) : (React.createElement(SectionDetailsEmpty, null))));

package/lib/components/Project/components/Details/details.js

@@ -1,5 +1,6 @@
 import { Typography } from "@mui/material";
 import React, { Fragment } from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 import { KeyValuePairs, } from "../../../common/KeyValuePairs/keyValuePairs";
 import { CollapsableSection } from "../../../common/Section/components/CollapsableSection/collapsableSection";
 import { SectionDetailsEmpty } from "../../../common/Section/components/SectionDetailsEmpty/sectionDetailsEmpty";
@@ -8,10 +9,10 @@ import { Stack } from "../../../common/Stack/stack";
  * Wrapper element around the key.
  * @param props - Set of values accepted by this component as props.
  * @param props.children - Key component children.
- * @returns typography component with color "ink.light".
+ * @returns typography component.
  */
 function renderKey(props) {
-    return React.createElement(Typography, { color: "ink.light" }, props.children);
+    return (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT }, props.children));
 }
 export const Details = ({ keyValuePairs, title, }) => {
     return (React.createElement(CollapsableSection, { collapsable: true, title: title }, keyValuePairs ? (React.createElement(KeyValuePairs, { KeyElType: renderKey, keyValuePairs: keyValuePairs, KeyValuesElType: Fragment, KeyValueElType: Stack })) : (React.createElement(SectionDetailsEmpty, null))));

package/lib/components/Project/components/SupplementaryLinks/supplementaryLinks.styles.js

@@ -1,11 +1,12 @@
 import styled from "@emotion/styled";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 export const SupplementaryList = styled.div `
   display: grid;
   gap: 0 4px;
   grid-template-columns: auto 1fr;
 `;
 export const Marker = styled.span `
-  color: ${({ theme }) => theme.palette.primary.main};
+  color: ${PALETTE.PRIMARY_MAIN};
   text-align: right;
 `;
 export const SupplementaryLink = styled.span `

package/lib/components/Stepper/components/Step/components/StepContent/stepContent.styles.js

@@ -1,13 +1,13 @@
 import styled from "@emotion/styled";
 import { StepContent } from "@mui/material";
-import { smokeMain } from "../../../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
 import { sectionPadding } from "../../../../../common/Section/section.styles";
 export const StyledStepContent = styled(StepContent) `
   &.MuiStepContent-root {
     .MuiCollapse-wrapperInner.MuiCollapse-vertical {
       > .MuiGrid-root {
         ${sectionPadding};
-        border-top: 1px solid ${smokeMain};
+        border-top: 1px solid ${PALETTE.SMOKE_MAIN};
         display: grid;
         gap: 24px;
         justify-items: flex-start;

package/lib/components/Stepper/components/Step/components/StepIcon/components/CompletedIcon/completedIcon.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledSvgIcon: import("@emotion/styled").StyledComponent<import("@mui/material").SvgIconOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
     ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, "style" | "className" | "classes" | "children" | "color" | "fontSize" | "htmlColor" | "inheritViewBox" | "shapeRendering" | "sx" | "titleAccess" | "viewBox"> & {
+}, "style" | "className" | "classes" | "children" | "sx" | "color" | "fontSize" | "shapeRendering" | "viewBox" | "htmlColor" | "inheritViewBox" | "titleAccess"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Stepper/components/Step/components/StepIcon/components/CompletedIcon/completedIcon.styles.js

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { SvgIcon } from "@mui/material";
-import { inkLight, smokeDark, } from "../../../../../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../../../../../styles/common/constants/palette";
 export const StyledSvgIcon = styled(SvgIcon) `
   &.MuiSvgIcon-root {
     border-radius: 50%;
@@ -8,8 +8,8 @@ export const StyledSvgIcon = styled(SvgIcon) `
     padding: 4px;
 
     &.Mui-completed {
-      border: 2px solid ${smokeDark};
-      color: ${inkLight};
+      border: 2px solid ${PALETTE.SMOKE_DARK};
+      color: ${PALETTE.INK_LIGHT};
     }
   }
 `;

package/lib/components/Stepper/components/Step/components/StepIcon/stepIcon.styles.js

@@ -1,26 +1,26 @@
 import styled from "@emotion/styled";
 import { StepIcon } from "@mui/material";
-import { inkLight, primaryMain, smokeDark, } from "../../../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
 export const StyledStepIcon = styled(StepIcon) `
   &.MuiSvgIcon-root {
-    border: 2px solid ${smokeDark};
+    border: 2px solid ${PALETTE.SMOKE_DARK};
     border-radius: 50%;
     color: transparent;
     height: 32px;
     width: 32px;
 
     .MuiStepIcon-text {
-      fill: ${inkLight};
+      fill: ${PALETTE.INK_LIGHT};
       font-size: 13px;
       font-weight: 600;
       line-height: 24px;
     }
 
     &.Mui-active {
-      border-color: ${primaryMain};
+      border-color: ${PALETTE.PRIMARY_MAIN};
 
       .MuiStepIcon-text {
-        fill: ${primaryMain};
+        fill: ${PALETTE.PRIMARY_MAIN};
       }
     }
   }

package/lib/components/Stepper/components/Step/components/StepLabel/components/Label/constants.js

@@ -2,5 +2,5 @@ import { TYPOGRAPHY_PROPS as MUI_TYPOGRAPHY_PROPS } from "../../../../../../../.
 export const TYPOGRAPHY_PROPS = {
     color: MUI_TYPOGRAPHY_PROPS.COLOR.INK_MAIN,
     component: "div",
-    variant: MUI_TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_XSMALL,
+    variant: MUI_TYPOGRAPHY_PROPS.VARIANT.HEADING_XSMALL,
 };

package/lib/components/Stepper/components/Step/components/StepLabel/components/Label/label.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledTypography: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "p" | "style" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "className" | "classes" | "children" | "color" | "fontSize" | "sx" | "display" | "fontFamily" | "fontStyle" | "fontWeight" | "letterSpacing" | "overflow" | "visibility" | "align" | "bgcolor" | "border" | "boxShadow" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "padding" | "paddingBlock" | "paddingInline" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+}, "p" | "style" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "className" | "classes" | "children" | "sx" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "align" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Stepper/components/Step/components/StepLabel/components/Optional/constants.js

@@ -1,5 +1,5 @@
 import { TYPOGRAPHY_PROPS as MUI_TYPOGRAPHY_PROPS } from "../../../../../../../../styles/common/mui/typography";
 export const TYPOGRAPHY_PROPS = {
     color: MUI_TYPOGRAPHY_PROPS.COLOR.INK_LIGHT,
-    variant: MUI_TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400,
+    variant: MUI_TYPOGRAPHY_PROPS.VARIANT.BODY_400,
 };

package/lib/components/Stepper/components/Step/step.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledStep: import("@emotion/styled").StyledComponent<import("@mui/material").StepOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "style" | "className" | "classes" | "children" | "sx" | "disabled" | "expanded" | "index" | "active" | "last" | "completed"> & {
+}, "style" | "className" | "classes" | "children" | "disabled" | "sx" | "last" | "expanded" | "active" | "index" | "completed"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;