@databiosphere/findable-ui 41.2.0 → 42.0.0

package/src/components/Layout/components/Sidebar/components/SidebarButton/sidebarButton.styles.ts

@@ -1,33 +1,30 @@
 import styled from "@emotion/styled";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
 import {
-  mediaDesktopSmallUp,
-  mediaTabletUp,
+  bpUpMd,
+  bpUpSm,
 } from "../../../../../../styles/common/mixins/breakpoints";
-import {
-  primaryMain,
-  white,
-} from "../../../../../../styles/common/mixins/colors";
 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/src/components/Layout/components/Sidebar/components/SidebarDrawer/sidebarDrawer.styles.ts

@@ -1,17 +1,14 @@
 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%;
@@ -23,7 +20,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/src/components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel.tsx

@@ -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 interface SidebarLabelProps {
   label: string;
@@ -8,7 +8,10 @@ export interface SidebarLabelProps {
 
 export const SidebarLabel = ({ label }: SidebarLabelProps): JSX.Element => {
   return (
-    <Typography component="div" variant={TEXT_BODY_LARGE_500}>
+    <Typography
+      component="div"
+      variant={TYPOGRAPHY_PROPS.VARIANT.BODY_LARGE_500}
+    >
       {label}
     </Typography>
   );

package/src/components/Layout/components/Sidebar/components/SidebarPositioner/sidebarPositioner.styles.ts

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { mediaDesktopSmallUp } from "../../../../../../styles/common/mixins/breakpoints";
+import { bpUpMd } from "../../../../../../styles/common/mixins/breakpoints";
 
 interface Props {
   headerHeight: number;
@@ -11,7 +11,7 @@ export const SidebarPositioner = styled("div")<Props>`
   overflow: visible;
   padding: 16px 0;
 
-  ${mediaDesktopSmallUp} {
+  ${bpUpMd} {
     max-height: 100vh;
     overflow: auto;
     padding: ${({ headerHeight }) => headerHeight}px 0 0;

package/src/components/Layout/components/Sidebar/components/SidebarTools/sidebarTools.styles.ts

@@ -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;
@@ -12,7 +12,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/src/components/Layout/components/Sidebar/sidebar.styles.ts

@@ -1,9 +1,9 @@
 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/src/components/Layout/components/Sidebar/sidebar.tsx

@@ -5,7 +5,6 @@ import {
   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";
@@ -13,11 +12,8 @@ import { Sidebar as PermanentSidebar } from "./sidebar.styles";
 
 export const Sidebar = ({ children }: ChildrenProps): JSX.Element => {
   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 }
@@ -25,10 +21,10 @@ export const Sidebar = ({ children }: ChildrenProps): JSX.Element => {
 
   // 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 (
     <Bar {...barProps}>

package/src/components/Links/components/Link/link.tsx

@@ -6,6 +6,7 @@ import {
 import NLink from "next/link";
 import React, { ReactNode } from "react";
 import { isValidUrl } from "../../../../common/utils";
+import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 import { CopyToClipboard } from "../../../common/CopyToClipboard/copyToClipboard";
 import { TypographyProps } from "../../../common/Typography/common/entities";
 import { BaseComponentProps } from "../../../types";
@@ -97,7 +98,7 @@ export const Link = ({
   return (
     <MTypography
       component="span"
-      variant="inherit"
+      variant={TYPOGRAPHY_PROPS.VARIANT.INHERIT}
       {...TypographyProps}
       {...props}
     >

package/src/components/Loading/loading.styles.ts

@@ -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, LoadingPanelStyle } from "./loading";
 
@@ -49,7 +49,7 @@ export const LoadingPaper = styled(Paper)<Props>`
     css`
       border-radius: 8px;
 
-      ${theme.breakpoints.down(TABLET)} {
+      ${bpDownSm({ theme })} {
         border-left: none;
         border-radius: 0;
         border-right: none;

package/src/components/Loading/loading.tsx

@@ -1,5 +1,6 @@
 import { Fade, SvgIconProps, 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, PaperPanelStyle } from "../common/Paper/paper";
 import { LoadingPaper, LoadingPositioner } from "./loading.styles";
@@ -56,7 +57,11 @@ export const Loading = ({
       <LoadingPositioner panelStyle={panelStyle}>
         <LoadingPaper panelStyle={panelStyle}>
           <LoadingIcon color="primary" fontSize={iconSize} />
-          {text && <Typography variant="text-body-400">{text}</Typography>}
+          {text && (
+            <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>
+              {text}
+            </Typography>
+          )}
         </LoadingPaper>
       </LoadingPositioner>
     </Fade>

package/src/components/Login/components/Section/components/Consent/consent.styles.ts

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

package/src/components/Login/components/Section/components/Consent/consent.tsx

@@ -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";
@@ -24,7 +24,9 @@ export const Consent = ({
         icon={isError ? <UncheckedErrorIcon /> : <UncheckedIcon />}
         onChange={handleConsent}
       />
-      <Typography variant={TEXT_BODY_400}>{children}</Typography>
+      <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>
+        {children}
+      </Typography>
     </StyledGrid>
   );
 };

package/src/components/Login/components/Section/components/Warning/warning.tsx

@@ -14,7 +14,7 @@ export const Warning = ({
       className={className}
       color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
       mt={6}
-      variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400}
+      variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400}
       {...props}
     >
       {children}

package/src/components/Login/login.styles.ts

@@ -1,9 +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`
@@ -20,7 +17,7 @@ export const LoginSection = styled(Section)`
   gap: 24px 0;
   padding: 32px;
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${bpUpSm} {
     padding: 32px;
   }
 `;
@@ -37,20 +34,9 @@ export const LoginSectionActions = styled(SectionActions)`
   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};
-`;
+` as typeof Typography;

package/src/components/Login/login.tsx

@@ -2,6 +2,7 @@ import { Checkbox, Typography } from "@mui/material";
 import React, { ChangeEvent, useCallback, useState } from "react";
 import { useAuth } from "../../providers/authentication/auth/hook";
 import { ProviderId } from "../../providers/authentication/common/types";
+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";
@@ -12,10 +13,8 @@ import {
   LoginAgreement,
   LoginSection,
   LoginSectionActions,
-  LoginText,
-  LoginWarning,
   LoginWrapper,
-  TermsOfService,
+  StyledTypography,
 } from "./login.styles";
 import { Props } from "./types";
 
@@ -55,10 +54,21 @@ export const Login = <P,>({
       <RoundedPaper>
         <LoginSection>
           <SectionContent>
-            <Typography color="ink.main" component="h3" variant="text-heading">
+            <Typography
+              color={TYPOGRAPHY_PROPS.COLOR.INK_MAIN}
+              component="h3"
+              variant={TYPOGRAPHY_PROPS.VARIANT.HEADING}
+            >
               {title}
             </Typography>
-            {text && <LoginText>{text}</LoginText>}
+            {text && (
+              <Typography
+                component="div"
+                variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}
+              >
+                {text}
+              </Typography>
+            )}
           </SectionContent>
           <LoginSectionActions>
             {termsOfService && (
@@ -68,7 +78,12 @@ export const Login = <P,>({
                   icon={isError ? <UncheckedErrorIcon /> : <UncheckedIcon />}
                   onChange={handleChange}
                 />
-                <TermsOfService>{termsOfService}</TermsOfService>
+                <StyledTypography
+                  component="div"
+                  variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}
+                >
+                  {termsOfService}
+                </StyledTypography>
               </LoginAgreement>
             )}
             {providers?.map((provider) => (
@@ -83,7 +98,15 @@ export const Login = <P,>({
           </LoginSectionActions>
         </LoginSection>
       </RoundedPaper>
-      {warning && <LoginWarning>{warning}</LoginWarning>}
+      {warning && (
+        <Typography
+          color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+          component="div"
+          variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400}
+        >
+          {warning}
+        </Typography>
+      )}
     </LoginWrapper>
   );
 };

package/src/components/MarkdownRenderer/components/Table/table.styles.ts

@@ -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;
@@ -30,8 +30,8 @@ export const StyledTable = styled("table")`
   }
 
   th {
-    ${textBody500}
     border-bottom: 1px solid ${PALETTE.SMOKE_MAIN};
+    font: ${FONT.BODY_500};
   }
 
   td {

package/src/components/MarkdownRenderer/markdownRenderer.tsx

@@ -74,7 +74,7 @@ export const MarkdownRenderer = ({
     return (
       <Typography
         color={TYPOGRAPHY_PROPS.COLOR.ERROR}
-        variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400}
+        variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400}
       >
         {error}
       </Typography>

package/src/components/NoResults/noResults.styles.ts

@@ -1,10 +1,10 @@
 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. */
 `;
 

package/src/components/NoResults/noResults.tsx

@@ -24,7 +24,7 @@ export const NoResults = ({
           {description && (
             <Typography
               color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
-              variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES}
+              variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES}
             >
               {description}
             </Typography>

package/src/components/Project/components/Contacts/contacts.tsx

@@ -1,6 +1,7 @@
 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";
@@ -16,7 +17,12 @@ export const Contacts = ({ contacts }: ContactsProps): JSX.Element => {
       {contacts ? (
         contacts.map(({ email, institution, name }, c) => (
           <SectionContentListItem key={`${name}${c}`}>
-            <Typography variant="text-body-500-2lines">{name}</Typography>
+            <Typography
+              fontWeight={500}
+              variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES}
+            >
+              {name}
+            </Typography>
             {institution && <span>{institution}</span>}
             {email && (
               <Link href={`mailto:${email}`} legacyBehavior passHref>

package/src/components/Project/components/Details/details.tsx

@@ -1,5 +1,6 @@
 import { Typography } from "@mui/material";
 import React, { Fragment } from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 import {
   Key,
   KeyValuePairs,
@@ -18,10 +19,14 @@ export interface DetailsProps {
  * 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: { children: Key }): JSX.Element {
-  return <Typography color="ink.light">{props.children}</Typography>;
+  return (
+    <Typography color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}>
+      {props.children}
+    </Typography>
+  );
 }
 
 export const Details = ({

package/src/components/Project/components/SupplementaryLinks/supplementaryLinks.styles.ts

@@ -1,4 +1,5 @@
 import styled from "@emotion/styled";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 
 export const SupplementaryList = styled.div`
   display: grid;
@@ -7,7 +8,7 @@ export const SupplementaryList = styled.div`
 `;
 
 export const Marker = styled.span`
-  color: ${({ theme }) => theme.palette.primary.main};
+  color: ${PALETTE.PRIMARY_MAIN};
   text-align: right;
 `;
 

package/src/components/Stepper/components/Step/components/StepContent/stepContent.styles.ts

@@ -1,6 +1,6 @@
 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)`
@@ -8,7 +8,7 @@ export const StyledStepContent = styled(StepContent)`
     .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/src/components/Stepper/components/Step/components/StepIcon/components/CompletedIcon/completedIcon.styles.ts

@@ -1,9 +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 {
@@ -12,8 +9,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/src/components/Stepper/components/Step/components/StepIcon/stepIcon.styles.ts

@@ -1,31 +1,27 @@
 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/src/components/Stepper/components/Step/components/StepLabel/components/Label/constants.ts

@@ -4,5 +4,5 @@ import { TYPOGRAPHY_PROPS as MUI_TYPOGRAPHY_PROPS } from "../../../../../../../.
 export const TYPOGRAPHY_PROPS: TypographyProps = {
   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/src/components/Stepper/components/Step/components/StepLabel/components/Optional/constants.ts

@@ -3,5 +3,5 @@ import { TYPOGRAPHY_PROPS as MUI_TYPOGRAPHY_PROPS } from "../../../../../../../.
 
 export const TYPOGRAPHY_PROPS: TypographyProps = {
   color: MUI_TYPOGRAPHY_PROPS.COLOR.INK_LIGHT,
-  variant: MUI_TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400,
+  variant: MUI_TYPOGRAPHY_PROPS.VARIANT.BODY_400,
 };

package/src/components/Stepper/components/Step/step.styles.ts

@@ -1,13 +1,13 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Step } from "@mui/material";
-import { smokeLightest, white } from "../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 import { sectionPadding } from "../../../common/Section/section.styles";
 
 export const StyledStep = styled(Step)`
   &.MuiStep-root {
     &.MuiStep-vertical {
-      background-color: ${smokeLightest};
+      background-color: ${PALETTE.SMOKE_LIGHTEST};
 
       .MuiStepLabel-root {
         ${sectionPadding};
@@ -20,13 +20,13 @@ export const StyledStep = styled(Step)`
       }
 
       &.Mui-completed {
-        background-color: ${white};
+        background-color: ${PALETTE.COMMON_WHITE};
       }
 
-      ${(props) =>
-        props.active &&
+      ${({ active }) =>
+        active &&
         css`
-          background-color: ${white(props)};
+          background-color: ${PALETTE.COMMON_WHITE};
         `};
     }
   }