@databiosphere/findable-ui 41.1.0 → 42.0.0

package/src/components/Layout/components/Header/components/Content/components/Slogan/slogan.styles.ts

@@ -1,19 +1,19 @@
 import styled from "@emotion/styled";
 import { Divider as MDivider } from "@mui/material";
-import { mediaDesktopSmallUp } from "../../../../../../../../styles/common/mixins/breakpoints";
+import { bpUpMd } from "../../../../../../../../styles/common/mixins/breakpoints";
 
 export const Slogan = styled.div`
   padding: 8px 24px;
 
-  .MuiTypography-text-body-400 {
+  .MuiTypography-body-400 {
     display: block;
   }
 
-  ${mediaDesktopSmallUp} {
+  ${bpUpMd} {
     flex: none;
     padding: 0;
 
-    .MuiTypography-text-body-400 {
+    .MuiTypography-body-400 {
       font-size: 12px;
       line-height: 18px;
       max-width: 180px;

package/src/components/Layout/components/Header/components/Content/components/Slogan/slogan.tsx

@@ -1,6 +1,6 @@
 import { Typography } from "@mui/material";
 import React, { CSSProperties, forwardRef, ReactNode } from "react";
-import { TEXT_BODY_400 } from "../../../../../../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../../styles/common/mui/typography";
 import { Slogan as CatchPhrase } from "./slogan.styles";
 
 export interface SloganProps {
@@ -16,7 +16,10 @@ export const Slogan = forwardRef<HTMLDivElement, SloganProps>(function Slogan(
   return (
     <CatchPhrase ref={ref} style={style}>
       {typeof slogan === "string" ? (
-        <Typography className={className} variant={TEXT_BODY_400}>
+        <Typography
+          className={className}
+          variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}
+        >
           {slogan}
         </Typography>
       ) : (

package/src/components/Layout/components/Header/header.styles.ts

@@ -1,7 +1,7 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { AppBar as MAppBar } from "@mui/material";
-import { smokeMain } from "../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 import { HEADER_HEIGHT } from "./common/constants";
 
 // See https://github.com/emotion-js/emotion/issues/1105.
@@ -10,7 +10,7 @@ const ignoreSsrWarning =
   "/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */";
 
 export const AppBar = styled(MAppBar)`
-  border-bottom: 1px solid ${smokeMain};
+  border-bottom: 1px solid ${PALETTE.SMOKE_MAIN};
 
   &.MuiPaper-elevation0 {
     border-bottom: 1px solid transparent;

package/src/components/Layout/components/Nav/components/NavBarHero/navBarHero.styles.ts

@@ -1,4 +1,5 @@
 import styled from "@emotion/styled";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
 
 export const NavBarHero = styled.div`
   display: grid;
@@ -18,7 +19,7 @@ export const HeroLogo = styled.span`
 `;
 
 export const HeroText = styled.span`
-  color: ${({ theme }) => theme.palette.ink.light};
+  color: ${PALETTE.INK_LIGHT};
   display: block;
   font-size: 12px;
   line-height: 18px;

package/src/components/Layout/components/Nav/nav.styles.ts

@@ -1,10 +1,7 @@
 import styled from "@emotion/styled";
 import { List as MList } from "@mui/material";
-import {
-  textBody400,
-  textBody500,
-  textUppercase500,
-} from "../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../styles/common/constants/font";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 
 export const NavBar = styled.div`
   .MuiDivider-root {
@@ -30,24 +27,25 @@ export const List = styled(MList)`
       }
 
       .MuiListItemText-root {
-        ${textBody400};
+        font: ${FONT.BODY_400};
       }
 
       &.Mui-disabled {
-        color: ${({ theme }) => theme.palette.ink.light};
+        color: ${PALETTE.INK_LIGHT};
         margin-top: 20px;
         opacity: 1;
 
         .MuiListItemText-root {
-          ${textUppercase500};
+          font: ${FONT.UPPERCASE_500};
+          text-transform: uppercase;
         }
       }
 
       &.Mui-selected {
-        color: ${({ theme }) => theme.palette.primary.main};
+        color: ${PALETTE.PRIMARY_MAIN};
 
         .MuiListItemText-root {
-          ${textBody500};
+          font: ${FONT.BODY_500};
         }
       }
     }

package/src/components/Layout/components/Outline/components/ContentsTab/contentsTab.styles.ts

@@ -1,17 +1,18 @@
 import styled from "@emotion/styled";
 import { Tab } from "@mui/material";
-import { inkLight } from "../../../../../../styles/common/mixins/colors";
-import { textUppercase500 } from "../../../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../../../styles/common/constants/font";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
 import { tab } from "../../outline.styles";
 
 export const StyledTab = styled(Tab)`
   ${tab};
 
   && {
-    ${textUppercase500};
     align-items: center;
     align-self: flex-start;
-    color: ${inkLight};
+    color: ${PALETTE.INK_LIGHT};
+    font: ${FONT.UPPERCASE_500};
     pointer-events: none;
+    text-transform: uppercase;
   }
 `;

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

@@ -1,11 +1,8 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Tab as MTab, Tabs as MTabs, TabProps } from "@mui/material";
-import { inkMain, smokeMain } from "../../../../styles/common/mixins/colors";
-import {
-  textBody500,
-  textBodySmall400,
-} from "../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../styles/common/constants/font";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 
 interface Props extends TabProps {
   depth: number;
@@ -25,7 +22,7 @@ export const tab = css`
 
 export const StyledTabs = styled(MTabs)`
   align-self: flex-start;
-  box-shadow: inset 1px 0 ${smokeMain};
+  box-shadow: inset 1px 0 ${PALETTE.SMOKE_MAIN};
   margin: 0;
   max-width: 242px;
   padding: 0;
@@ -49,18 +46,18 @@ export const StyledTab = styled(MTab, {
   shouldForwardProp: (prop) => prop !== "depth",
 })<Props>`
   ${tab};
-  color: ${inkMain};
+  color: ${PALETTE.INK_MAIN};
 
-  ${(props) =>
-    props.depth === 2 &&
+  ${({ depth }) =>
+    depth === 2 &&
     css`
-      ${textBody500(props)};
+      font: ${FONT.BODY_500};
     `};
 
-  ${(props) =>
-    props.depth === 3 &&
+  ${({ depth }) =>
+    depth === 3 &&
     css`
-      ${textBodySmall400(props)};
+      font: ${FONT.BODY_SMALL_400};
       margin-left: 16px;
       padding: 8px 24px;
     `};

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>