@databiosphere/findable-ui 41.2.0 → 42.0.0

package/src/components/DataDictionary/components/Tooltip/components/Title/constants.ts

@@ -1,11 +1,6 @@
-import { StackProps, TypographyProps } from "@mui/material";
+import { StackProps } from "@mui/material";
 
 export const STACK_PROPS: StackProps = {
   spacing: 2,
   useFlexGap: true,
 };
-
-export const TYPOGRAPHY_PROPS: TypographyProps = {
-  color: "ink.light",
-  component: "div",
-};

package/src/components/DataDictionary/components/Tooltip/components/Title/title.tsx

@@ -1,8 +1,8 @@
 import { Stack, 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";
 import { BaseComponentProps } from "../../../../../types";
-import { STACK_PROPS, TYPOGRAPHY_PROPS } from "./constants";
+import { STACK_PROPS } from "./constants";
 import { TitleProps } from "./types";
 
 export const Title = ({
@@ -12,8 +12,12 @@ export const Title = ({
 }: BaseComponentProps & Required<TitleProps>): JSX.Element => {
   return (
     <Stack {...STACK_PROPS} className={className}>
-      <Typography variant={TEXT_BODY_LARGE_500}>{title}</Typography>
-      <Typography {...TYPOGRAPHY_PROPS}>{description}</Typography>
+      <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_LARGE_500}>
+        {title}
+      </Typography>
+      <Typography color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT} component="div">
+        {description}
+      </Typography>
     </Stack>
   );
 };

package/src/components/DataDictionary/components/Tooltip/constants.ts

@@ -1,12 +1,13 @@
 import { TooltipProps } from "@mui/material";
-import { TEXT_BODY_SMALL_400_2_LINES } from "../../../../theme/common/typography";
+import { FONT } from "../../../../styles/common/constants/font";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 
 export const TOOLTIP_PROPS: Omit<TooltipProps, "children" | "title"> = {
   arrow: true,
   disableInteractive: true,
   enterNextDelay: 250,
   slotProps: {
-    arrow: { sx: (theme) => ({ color: theme.palette.common.white }) },
+    arrow: { sx: { color: PALETTE.COMMON_WHITE } },
     popper: {
       modifiers: [
         { name: "offset", options: { offset: [0, 2] } },
@@ -14,13 +15,13 @@ export const TOOLTIP_PROPS: Omit<TooltipProps, "children" | "title"> = {
       ],
     },
     tooltip: {
-      sx: (theme) => ({
-        ...theme.typography[TEXT_BODY_SMALL_400_2_LINES],
-        backgroundColor: theme.palette.common.white,
+      sx: {
+        backgroundColor: PALETTE.COMMON_WHITE,
         borderRadius: 2,
-        color: theme.palette.ink.main,
+        color: PALETTE.INK_MAIN,
+        font: FONT.BODY_SMALL_400_2_LINES,
         padding: 4,
-      }),
+      },
     },
   },
 };

package/src/components/DataDictionary/dataDictionary.styles.ts

@@ -1,8 +1,5 @@
 import styled from "@emotion/styled";
-import {
-  bpDown1024,
-  mediaTabletDown,
-} from "../../styles/common/mixins/breakpoints";
+import { bpDown1024, bpDownSm } from "../../styles/common/mixins/breakpoints";
 
 export const View = styled("div")`
   column-gap: 24px;
@@ -17,7 +14,7 @@ export const View = styled("div")`
     margin: 0 16px;
   }
 
-  ${mediaTabletDown} {
+  ${bpDownSm} {
     margin: 0;
   }
 `;

package/src/components/Detail/components/Table/table.tsx

@@ -16,7 +16,6 @@ import {
   BREAKPOINT_FN_NAME,
   useBreakpointHelper,
 } from "../../../../hooks/useBreakpointHelper";
-import { TABLET } from "../../../../theme/common/breakpoints";
 import { arrIncludesSome } from "../../../Table/columnDef/columnFilters/filterFn";
 import { COLUMN_DEF } from "../../../Table/common/columnDef";
 import { ROW_DIRECTION } from "../../../Table/common/entities";
@@ -52,9 +51,9 @@ export const Table = <T extends RowData>({
   tableOptions,
   tableView,
 }: TableProps<T>): JSX.Element => {
-  const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, TABLET);
+  const bpDownSm = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "sm");
   const rowDirection =
-    collapsable && tabletDown ? ROW_DIRECTION.VERTICAL : ROW_DIRECTION.DEFAULT;
+    collapsable && bpDownSm ? ROW_DIRECTION.VERTICAL : ROW_DIRECTION.DEFAULT;
   const { table, tableContainer } = tableView || {};
   const { stickyHeader = false } = table || {};
   const { sx: tableContainerSx } = tableContainer || {};

package/src/components/Error/error.styles.ts

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
-import { textBody4002Lines } from "../../styles/common/mixins/fonts";
-import { TABLET } from "../../theme/common/breakpoints";
+import { FONT } from "../../styles/common/constants/font";
+import { bpUpSm } from "../../styles/common/mixins/breakpoints";
 import { Section, sectionMarginXsm } from "../common/Section/section.styles";
 
 interface Props {
@@ -29,7 +29,7 @@ export const ErrorSection = styled(Section)`
   align-items: center;
   padding: 0;
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${bpUpSm} {
     padding: 0;
   }
 `;
@@ -40,7 +40,7 @@ export const SectionContent = styled.div`
 
 export const ErrorCode = styled.div`
   ${sectionMarginXsm}
-  ${textBody4002Lines}
+  font: ${FONT.BODY_400_2_LINES};
   font-family: "Roboto Mono", monospace;
   font-size: 12px;
   overflow-wrap: anywhere;

package/src/components/Error/error.tsx

@@ -4,6 +4,7 @@ import React from "react";
 import { useExploreState } from "../../hooks/useExploreState";
 import { ExploreActionKind } from "../../providers/exploreState";
 import { useLayoutDimensions } from "../../providers/layoutDimensions/hook";
+import { TYPOGRAPHY_PROPS } from "../../styles/common/mui/typography";
 import { ButtonPrimary } from "../common/Button/components/ButtonPrimary/buttonPrimary";
 import { AlertIcon } from "../common/CustomIcon/components/AlertIcon/alertIcon";
 import { Grid } from "../common/Grid/grid";
@@ -31,7 +32,10 @@ const ErrorMessage = ({
   title,
 }: ErrorDetailSectionProps): JSX.Element => (
   <Content>
-    <Typography component="h3" variant="text-body-large-500">
+    <Typography
+      component="h3"
+      variant={TYPOGRAPHY_PROPS.VARIANT.BODY_LARGE_500}
+    >
       {title}
     </Typography>
     <RoundedPaper>
@@ -70,10 +74,13 @@ export const Error = ({
         <ErrorSection>
           <StatusIcon priority={PRIORITY.HIGH} StatusIcon={AlertIcon} />
           <SectionContent>
-            <Typography component="h1" variant="text-heading-xlarge">
+            <Typography
+              component="h1"
+              variant={TYPOGRAPHY_PROPS.VARIANT.HEADING_XLARGE}
+            >
               Error
             </Typography>
-            <Typography variant="text-body-large-400">
+            <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_LARGE_400}>
               An error occurred processing your request
             </Typography>
           </SectionContent>

package/src/components/Export/components/ExportForm/exportForm.styles.ts

@@ -1,10 +1,10 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { FormControl as MFormControl } from "@mui/material";
-import { mediaTabletUp } from "../../../../styles/common/mixins/breakpoints";
-import { inkMain, smokeMain } from "../../../../styles/common/mixins/colors";
-import { textBodyLarge500 } from "../../../../styles/common/mixins/fonts";
-import { ThemeProps } from "../../../../theme/theme";
+import { FONT } from "../../../../styles/common/constants/font";
+import { PALETTE } from "../../../../styles/common/constants/palette";
+import { bpUpSm } from "../../../../styles/common/mixins/breakpoints";
+import { ThemeProps } from "../../../../theme/types";
 import {
   sectionMargin,
   sectionMarginSm,
@@ -12,7 +12,7 @@ import {
 
 export const margin = ({ theme }: ThemeProps) => css`
   ${sectionMargin}
-  ${mediaTabletUp({ theme })} {
+  ${bpUpSm({ theme })} {
     ${sectionMarginSm}
   }
 `;
@@ -24,9 +24,9 @@ export const FormControl = styled(MFormControl)`
     gap: 16px;
 
     .MuiFormLabel-root {
-      ${textBodyLarge500};
-      color: ${inkMain};
+      color: ${PALETTE.INK_MAIN};
       display: block;
+      font: ${FONT.BODY_LARGE_500};
     }
 
     .MuiFormHelperText-root {
@@ -52,7 +52,7 @@ export const TableFormControl = styled(FormControl)`
     .MuiFormLabel-root {
       margin: 16px;
 
-      ${mediaTabletUp} {
+      ${bpUpSm} {
         margin: 16px 20px;
       }
     }
@@ -64,7 +64,7 @@ export const TableFormControl = styled(FormControl)`
     .MuiFormHelperText-root {
       margin: 16px;
 
-      ${mediaTabletUp} {
+      ${bpUpSm} {
         margin: 16px 20px;
       }
     }
@@ -81,7 +81,7 @@ export const TableFormControl = styled(FormControl)`
         min-height: 48px;
         padding: 14px 16px;
 
-        ${mediaTabletUp} {
+        ${bpUpSm} {
           padding: 14px 20px;
         }
       }
@@ -90,8 +90,8 @@ export const TableFormControl = styled(FormControl)`
 `;
 
 export const GridPaper = styled.div`
-  background-color: ${smokeMain};
-  border-color: ${smokeMain};
+  background-color: ${PALETTE.SMOKE_MAIN};
+  border-color: ${PALETTE.SMOKE_MAIN};
   border-style: solid;
   border-width: 1px 0 1px 0;
   display: grid;

package/src/components/Export/components/ExportMethod/exportMethod.styles.ts

@@ -1,13 +1,6 @@
 import styled from "@emotion/styled";
-import { inkLight } from "../../../../styles/common/mixins/colors";
-import { textBodySmall4002Lines } from "../../../../styles/common/mixins/fonts";
 import { ButtonPrimary } from "../../../common/Button/components/ButtonPrimary/buttonPrimary";
 
 export const ExportButton = styled(ButtonPrimary)`
   text-transform: none; // overrides MuiButton theme text-transform "capitalize".
 `;
-
-export const SectionFootnote = styled.div`
-  ${textBodySmall4002Lines}
-  color: ${inkLight};
-`;

package/src/components/Export/components/ExportMethod/exportMethod.tsx

@@ -2,6 +2,7 @@ import { Tooltip, Typography } from "@mui/material";
 import Link from "next/link";
 import React, { ReactNode } from "react";
 import { useDownloadStatus } from "../../../../hooks/useDownloadStatus";
+import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 import { FluidPaper } from "../../../common/Paper/paper.styles";
 import { SectionTitle } from "../../../common/Section/components/SectionTitle/sectionTitle";
 import {
@@ -10,7 +11,7 @@ import {
   SectionContent,
 } from "../../../common/Section/section.styles";
 import { TrackingProps } from "../../../types";
-import { ExportButton, SectionFootnote } from "./exportMethod.styles";
+import { ExportButton } from "./exportMethod.styles";
 
 export interface ExportMethodProps extends TrackingProps {
   buttonLabel: string;
@@ -36,7 +37,9 @@ export const ExportMethod = ({
       <Section>
         <SectionContent>
           <SectionTitle title={title} />
-          <Typography variant="text-body-400-2lines">{description}</Typography>
+          <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES}>
+            {description}
+          </Typography>
         </SectionContent>
         <SectionActions>
           <Tooltip arrow title={message}>
@@ -58,7 +61,15 @@ export const ExportMethod = ({
             </span>
           </Tooltip>
         </SectionActions>
-        {footnote && <SectionFootnote>{footnote}</SectionFootnote>}
+        {footnote && (
+          <Typography
+            color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+            component="div"
+            variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400_2_LINES}
+          >
+            {footnote}
+          </Typography>
+        )}
       </Section>
     </FluidPaper>
   );

package/src/components/Export/components/ExportSummary/exportSummary.styles.ts

@@ -1,14 +1,15 @@
 import styled from "@emotion/styled";
-import { textBody4002Lines } from "../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../styles/common/constants/font";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 
 export const Label = styled.div`
-  ${textBody4002Lines};
-  color: ${({ theme }) => theme.palette.ink.light};
+  color: ${PALETTE.INK_LIGHT};
+  font: ${FONT.BODY_400_2_LINES};
 `;
 
 export const Values = styled.div`
-  ${textBody4002Lines};
   display: flex;
+  font: ${FONT.BODY_400_2_LINES};
   flex-wrap: wrap;
   gap: 0 8px;
 
@@ -17,6 +18,6 @@ export const Values = styled.div`
   }
 
   code {
-    color: ${({ theme }) => theme.palette.ink.light};
+    color: ${PALETTE.INK_LIGHT};
   }
 `;

package/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/formStep.styles.ts

@@ -4,7 +4,7 @@ import { SectionContent as DXSectionContent } from "../../terraSetUpForm.styles"
 export const SectionContent = styled(DXSectionContent)`
   gap: 2px;
 
-  .MuiTypography-text-body-500 {
+  .MuiTypography-body-500 {
     margin: 2px 0;
   }
 `;

package/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/formStep.tsx

@@ -1,9 +1,6 @@
 import { StepIcon, Typography } from "@mui/material";
 import React, { ReactNode } from "react";
-import {
-  TEXT_BODY_400_2_LINES,
-  TEXT_BODY_500,
-} from "../../../../../../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../../styles/common/mui/typography";
 import { FormStatusCompletedIcon } from "../../../../../../../common/CustomIcon/components/FormStatusCompletedIcon/formStatusCompletedIcon";
 import {
   Section,
@@ -42,17 +39,21 @@ export const FormStep = ({
       </SectionStatus>
       <SectionContent>
         <Typography
-          color={active ? "ink.main" : "ink.light"}
+          color={
+            active
+              ? TYPOGRAPHY_PROPS.COLOR.INK_MAIN
+              : TYPOGRAPHY_PROPS.COLOR.INK_LIGHT
+          }
           component="h4"
-          variant={TEXT_BODY_500}
+          variant={TYPOGRAPHY_PROPS.VARIANT.BODY_500}
         >
           {title}
         </Typography>
         {active && (
           <Typography
-            color="ink.light"
+            color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
             component="div"
-            variant={TEXT_BODY_400_2_LINES}
+            variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES}
           >
             {text}
           </Typography>

package/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/terraSetUpForm.styles.ts

@@ -1,15 +1,10 @@
 import styled from "@emotion/styled";
-import {
-  inkLight,
-  smokeMain,
-  successMain,
-  white,
-} from "../../../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
 import { sectionPadding } from "../../../../../common/Section/section.styles";
 
 export const Section = styled("div")`
   ${sectionPadding};
-  background-color: ${white};
+  background-color: ${PALETTE.COMMON_WHITE};
   display: grid;
   gap: 16px;
   grid-template-columns: auto 1fr;
@@ -20,7 +15,7 @@ export const SectionContent = styled("div")`
   gap: 4px;
   grid-row: 1;
 
-  .MuiTypography-text-body-400-2lines {
+  .MuiTypography-body-400-2lines {
     p {
       margin: 0;
     }
@@ -34,27 +29,27 @@ export const SectionStatus = styled("div")`
   line-height: 0;
 
   .MuiSvgIcon-fontSizeMedium {
-    color: ${successMain};
+    color: ${PALETTE.SUCCESS_MAIN};
   }
 
   .MuiStepIcon-root {
-    border: 2px solid ${smokeMain};
+    border: 2px solid ${PALETTE.SMOKE_MAIN};
     border-radius: 50%;
-    color: ${white};
+    color: ${PALETTE.COMMON_WHITE};
 
     .MuiStepIcon-text {
-      fill: ${smokeMain};
+      fill: ${PALETTE.SMOKE_MAIN};
       font-size: 14px;
       font-weight: 700;
       line-height: 20px;
     }
 
     &.Mui-active {
-      border: 2px solid ${inkLight};
-      color: ${white};
+      border: 2px solid ${PALETTE.INK_LIGHT};
+      color: ${PALETTE.COMMON_WHITE};
 
       .MuiStepIcon-text {
-        fill: ${inkLight};
+        fill: ${PALETTE.INK_LIGHT};
       }
     }
   }

package/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/terraSetUpForm.tsx

@@ -7,7 +7,7 @@ import {
 } from "../../../../../../hooks/authentication/terra/useAuthenticationForm";
 import { useAuth } from "../../../../../../providers/authentication/auth/hook";
 import { AUTH_STATUS } from "../../../../../../providers/authentication/auth/types";
-import { TEXT_BODY_400_2_LINES } from "../../../../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 import {
   FluidPaper,
   GridPaper,
@@ -31,7 +31,10 @@ export const TerraSetUpForm = (): JSX.Element | null => {
         <Section>
           <SectionContent>
             <SectionTitle title="Complete your setup" />
-            <Typography color="ink.light" variant={TEXT_BODY_400_2_LINES}>
+            <Typography
+              color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+              variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES}
+            >
               Follow these steps to unlock the full potential of the data
               explorer.
             </Typography>

package/src/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/manifestDownloadEntity.styles.ts

@@ -1,16 +1,16 @@
 import styled from "@emotion/styled";
 import { TableContainer as MTableContainer } from "@mui/material";
-import { mediaTabletUp } from "../../../../../../styles/common/mixins/breakpoints";
-import { white } from "../../../../../../styles/common/mixins/colors";
-import { textBodyLarge500 } from "../../../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../../../styles/common/constants/font";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
+import { bpUpSm } from "../../../../../../styles/common/mixins/breakpoints";
 
 export const SectionTitle = styled("h4")`
-  ${textBodyLarge500}
-  background-color: ${white};
+  background-color: ${PALETTE.COMMON_WHITE};
+  font: ${FONT.BODY_LARGE_500};
   margin: 0;
   padding: 20px 16px;
 
-  ${mediaTabletUp} {
+  ${bpUpSm} {
     padding: 20px;
   }
 `;
@@ -25,7 +25,7 @@ export const TableContainer = styled(MTableContainer)`
     min-height: 56px;
   }
 
-  ${mediaTabletUp} {
+  ${bpUpSm} {
     td,
     th {
       padding: 12px 20px;

package/src/components/Export/export.styles.ts

@@ -1,9 +1,9 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { mediaTabletUp } from "../../styles/common/mixins/breakpoints";
-import { inkLight } from "../../styles/common/mixins/colors";
-import { textBodySmall4002Lines } from "../../styles/common/mixins/fonts";
-import { ThemeProps } from "../../theme/theme";
+import { FONT } from "../../styles/common/constants/font";
+import { PALETTE } from "../../styles/common/constants/palette";
+import { bpUpSm } from "../../styles/common/mixins/breakpoints";
+import { ThemeProps } from "../../theme/types";
 import { SectionContent as MDXSectionContent } from "../common/MDXMarkdown/components/Section/mdxSection.styles";
 import {
   SectionActions as DXSectionActions,
@@ -12,7 +12,7 @@ import {
 
 export const sectionMargin = ({ theme }: ThemeProps) => css`
   ${sectionMarginXsm}
-  ${mediaTabletUp({ theme })} {
+  ${bpUpSm({ theme })} {
     margin: 16px 20px;
   }
 `;
@@ -35,6 +35,6 @@ export const SectionActions = styled(DXSectionActions)`
 
 export const SectionFootnote = styled.div`
   ${sectionMargin}
-  ${textBodySmall4002Lines}
-  color: ${inkLight};
+  color: ${PALETTE.INK_LIGHT};
+  font: ${FONT.BODY_SMALL_400_2_LINES};
 `;

package/src/components/Filter/components/FilterLabel/filterLabel.styles.ts

@@ -2,7 +2,6 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Button } from "@mui/material";
 import { PALETTE } from "../../../../styles/common/constants/palette";
-import { inkLight, smokeMain } from "../../../../styles/common/mixins/colors";
 import { SURFACE_TYPE } from "../surfaces/types";
 import { FilterLabelProps } from "./filterLabel";
 
@@ -17,7 +16,7 @@ export const StyledButton = styled(Button, {
   text-align: left;
 
   :hover {
-    background-color: ${smokeMain};
+    background-color: ${PALETTE.SMOKE_MAIN};
   }
 
   &.Mui-disabled {
@@ -25,7 +24,7 @@ export const StyledButton = styled(Button, {
   }
 
   & .MuiButton-endIcon {
-    color: ${inkLight};
+    color: ${PALETTE.INK_LIGHT};
     margin-right: -4px;
     transform: rotate(-90deg);
   }

package/src/components/Filter/components/FilterMenuSearch/filterMenuSearch.styles.ts

@@ -1,6 +1,6 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { inkLight } from "../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 import { Input } from "../../../common/Input/input";
 import { SURFACE_TYPE } from "../surfaces/types";
 import { FilterMenuSearchProps } from "./filterMenuSearch";
@@ -11,7 +11,7 @@ export const StyledInput = styled(Input, {
   padding: 0 16px;
 
   .MuiOutlinedInput-input {
-    color: ${inkLight};
+    color: ${PALETTE.INK_LIGHT};
   }
 
   ${({ surfaceType }) =>

package/src/components/Filter/components/FilterNoResultsFound/filterNoResultsFound.tsx

@@ -1,5 +1,6 @@
 import { Typography } from "@mui/material";
 import React, { forwardRef } from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 import { ButtonTextPrimary } from "../../../common/Button/components/ButtonTextPrimary/buttonTextPrimary";
 import { FilterNoResultsFound as FilterNoResults } from "./filterNoResultsFound.styles";
 
@@ -18,15 +19,15 @@ export const FilterNoResultsFound = forwardRef<
 ): JSX.Element {
   return (
     <FilterNoResults ref={ref}>
-      <Typography component="div" variant="text-body-500">
+      <Typography component="div" variant={TYPOGRAPHY_PROPS.VARIANT.BODY_500}>
         No results found!
       </Typography>
       <Typography
+        color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
         component="div"
-        color="ink.light"
         mb={onClearSearchTerm ? 2 : 0}
         mt={1}
-        variant="text-body-400"
+        variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}
       >
         Try adjusting your search or filter to find what you’re looking for.
       </Typography>

package/src/components/Filter/components/FilterRange/filterRange.styles.ts

@@ -1,7 +1,7 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
+import { FONT } from "../../../../styles/common/constants/font";
 import { PALETTE } from "../../../../styles/common/constants/palette";
-import { textBody400 } from "../../../../styles/common/mixins/fonts";
 import { SURFACE_TYPE } from "../surfaces/types";
 import { FilterRangeProps } from "./types";
 
@@ -44,8 +44,8 @@ export const StyledForm = styled("form")<Pick<FilterRangeProps, "surfaceType">>`
       grid-template-rows: subgrid;
 
       .MuiInputLabel-root {
-        ${textBody400};
         color: ${PALETTE.INK_MAIN};
+        font: ${FONT.BODY_400};
         max-width: unset;
         position: relative;
         transform: unset;

package/src/components/Filter/components/FilterTag/filterTag.styles.ts

@@ -1,6 +1,7 @@
 import styled from "@emotion/styled";
 import { Chip } from "@mui/material";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 
 export const SupersededTag = styled(Chip)`
-  background-color: ${({ theme }) => theme.palette.smoke.dark};
+  background-color: ${PALETTE.SMOKE_DARK};
 `;