@databiosphere/findable-ui 41.2.0 → 42.0.0

package/src/components/Filter/components/Filters/filters.styles.ts

@@ -1,8 +1,8 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Typography } from "@mui/material";
-import { inkMain } from "../../../../styles/common/mixins/colors";
-import { textBody500 } from "../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../styles/common/constants/font";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 import { SURFACE_TYPE } from "../surfaces/types";
 import { FiltersProps } from "./filters";
 
@@ -13,8 +13,8 @@ interface Props {
 export const Filters = styled("div")<
   Props & Pick<FiltersProps, "disabled" | "surfaceType">
 >`
-  ${textBody500};
-  color: ${inkMain};
+  color: ${PALETTE.INK_MAIN};
+  font: ${FONT.BODY_500};
   height: ${({ height }) => height}px;
   margin: 8px 0;
   overflow: auto;

package/src/components/Filter/components/Filters/filters.tsx

@@ -103,7 +103,7 @@ export const Filters = ({
           {label && (
             <StyledTypography
               color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
-              variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_UPPERCASE_500}
+              variant={TYPOGRAPHY_PROPS.VARIANT.UPPERCASE_500}
             >
               {label}
             </StyledTypography>

package/src/components/Filter/components/HighlightedLabel/highlightedLabel.styles.ts

@@ -1,5 +1,6 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 
 interface MatchHighlightProps {
   leftOpen: boolean;
@@ -7,7 +8,7 @@ interface MatchHighlightProps {
 }
 
 export const MatchHighlight = styled.mark<MatchHighlightProps>`
-  background: ${({ theme }) => theme.palette.warning.light};
+  background: ${PALETTE.WARNING_LIGHT};
   color: inherit;
   padding: 2px 0;
 

package/src/components/Filter/components/SearchAllFilters/components/AutocompletePopper/autocompletePopper.styles.ts

@@ -1,12 +1,12 @@
 import styled from "@emotion/styled";
 import { Popper as MPopper } from "@mui/material";
-import { mediaDesktopSmallDown } from "../../../../../../styles/common/mixins/breakpoints";
-import { smokeLight } from "../../../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
+import { bpDownMd } from "../../../../../../styles/common/mixins/breakpoints";
 
 export const AutocompletePopper = styled(MPopper)`
-  ${mediaDesktopSmallDown} {
+  ${bpDownMd} {
     .MuiPaper-root {
-      background-color: ${smokeLight};
+      background-color: ${PALETTE.SMOKE_LIGHT};
 
       .MuiList-root {
         margin: 0;

package/src/components/Filter/components/SearchAllFilters/components/VariableSizeList/VariableSizeList.tsx

@@ -21,7 +21,6 @@ import {
 } from "../../../../../../hooks/useBreakpointHelper";
 import { OnFilterFn } from "../../../../../../hooks/useCategoryFilter";
 import { useWindowResize } from "../../../../../../hooks/useWindowResize";
-import { DESKTOP_SM } from "../../../../../../theme/common/breakpoints";
 import {
   LIST_ITEM_HEIGHT,
   LIST_MARGIN,
@@ -132,10 +131,7 @@ export const VariableSizeList = forwardRef<
 ): JSX.Element {
   const filteredItems = applyMenuFilter(selectCategoryViews, searchTerm);
   let resizeRequired = true;
-  const desktopSmDown = useBreakpointHelper(
-    BREAKPOINT_FN_NAME.DOWN,
-    DESKTOP_SM
-  );
+  const bpDownMd = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "md");
   const { height: windowHeight } = useWindowResize();
   const [height, setHeight] = useState<number>(initHeight);
   const itemSizeByItemKeyRef = useRef<ItemSizeByItemKey>(new Map());
@@ -157,10 +153,10 @@ export const VariableSizeList = forwardRef<
           outerRef.current,
           innerRef.current,
           windowHeight,
-          desktopSmDown
+          bpDownMd
         )
       );
-  }, [desktopSmDown, windowHeight]);
+  }, [bpDownMd, windowHeight]);
 
   // Clears VariableSizeList cache (offsets and measurements) when values are updated (filtered).
   // Facilitates correct positioning of list items when list is updated.
@@ -202,7 +198,7 @@ export const VariableSizeList = forwardRef<
                   outerRef.current,
                   innerRef.current,
                   windowHeight,
-                  desktopSmDown
+                  bpDownMd
                 )
               );
             }
@@ -270,18 +266,18 @@ function applyMenuFilter(
  * @param outerListElem - Outer list element to reference list position from.
  * @param innerListElem - Element containing list items.
  * @param windowHeight - Window height.
- * @param desktopSmDown - True if viewport is small desktop or smaller.
+ * @param bpDownMd - True if viewport is "md" or smaller.
  * @returns calculated height.
  */
 function calculateListHeight(
   outerListElem: HTMLDivElement,
   innerListElem: HTMLUListElement,
   windowHeight: number,
-  desktopSmDown: boolean
+  bpDownMd: boolean
 ): number {
   // Calculate max possible list height, based on window height and top position of the list element.
   const maxHeight = windowHeight - outerListElem.getBoundingClientRect().top;
-  if (desktopSmDown) {
+  if (bpDownMd) {
     return maxHeight;
   }
   // Grab the first and last element in the list.

package/src/components/Filter/components/SearchAllFilters/components/VariableSizeListItem/variableSizeListItem.tsx

@@ -8,8 +8,8 @@ import {
 import React, { useEffect, useRef } from "react";
 import { VIEW_KIND } from "../../../../../../common/categories/views/types";
 import { OnFilterFn } from "../../../../../../hooks/useCategoryFilter";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 import { TEST_IDS } from "../../../../../../tests/testIds";
-import { TEXT_BODY_SMALL_400 } from "../../../../../../theme/common/typography";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
 import { FilterNoResultsFound } from "../../../FilterNoResultsFound/filterNoResultsFound";
@@ -83,9 +83,9 @@ export default function VariableSizeListItem({
           }
           secondary={
             <Typography
-              color="ink.light"
+              color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
               data-testid={TEST_IDS.FILTER_COUNT}
-              variant={TEXT_BODY_SMALL_400}
+              variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400}
             >
               {count}
             </Typography>

package/src/components/Filter/components/SearchAllFilters/searchAllFilters.styles.ts

@@ -1,13 +1,13 @@
 import styled from "@emotion/styled";
 import { Autocomplete as MAutocomplete } from "@mui/material";
-import { inkMain } from "../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 
 export const Autocomplete = styled(MAutocomplete)`
   &.Mui-expanded {
     .MuiOutlinedInput-root {
       .MuiIconButton-root {
         .MuiSvgIcon-root {
-          color: ${inkMain};
+          color: ${PALETTE.INK_MAIN};
         }
       }
     }

package/src/components/Filter/components/SearchAllFilters/searchAllFilters.tsx

@@ -20,7 +20,6 @@ import {
 } from "../../../../hooks/useBreakpointHelper";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 import { TEST_IDS } from "../../../../tests/testIds";
-import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
 import { useDrawer } from "../../../common/Drawer/provider/hook";
 import { SearchCloseButton } from "../SearchAllFiltersSearch/components/SearchCloseButton/searchCloseButton";
 import { SearchAllFiltersSearch } from "../SearchAllFiltersSearch/searchAllFiltersSearch";
@@ -83,7 +82,7 @@ export const SearchAllFilters = ({
   onFilter,
 }: SearchAllFiltersProps): JSX.Element => {
   const { open: isDrawerOpen } = useDrawer();
-  const desktopSmUp = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
+  const bpUpMd = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, "md");
   const autocompleteRef = useRef<HTMLDivElement>(null);
   const [open, setOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
@@ -91,9 +90,9 @@ export const SearchAllFilters = ({
     isSelectCategoryView(view)
   );
 
-  // Handles background scroll action (desktop only).
+  // Handles background scroll action ("md" and up).
   const handleBackgroundScroll = (overflowStyle: OVERFLOW_STYLE): void => {
-    if (desktopSmUp) {
+    if (bpUpMd) {
       setElementsOverflowStyle(
         [
           document.querySelector(SELECTOR.BODY),
@@ -160,13 +159,13 @@ export const SearchAllFilters = ({
       }}
     >
       <Autocomplete
-        clearOnBlur={desktopSmUp}
+        clearOnBlur={bpUpMd}
         data-testid={TEST_IDS.SEARCH_ALL_FILTERS}
         filterOptions={(options): string[] => options}
         freeSolo
         ListboxComponent={Listbox}
-        onBlur={desktopSmUp ? onCloseSearch : undefined}
-        onClose={desktopSmUp ? onCloseSearch : undefined}
+        onBlur={bpUpMd ? onCloseSearch : undefined}
+        onClose={bpUpMd ? onCloseSearch : undefined}
         onFocus={onOpenSearch}
         onOpen={onOpen}
         open={open}
@@ -186,7 +185,7 @@ export const SearchAllFilters = ({
             },
           })
         }
-        slotProps={desktopSmUp ? DEFAULT_SLOT_PROPS : DRAWER_SLOT_PROPS}
+        slotProps={bpUpMd ? DEFAULT_SLOT_PROPS : DRAWER_SLOT_PROPS}
       />
     </ListboxContext.Provider>
   );

package/src/components/Filter/components/SearchAllFiltersSearch/components/SearchCloseButton/searchCloseButton.tsx

@@ -5,18 +5,14 @@ import {
   BREAKPOINT_FN_NAME,
   useBreakpointHelper,
 } from "../../../../../../hooks/useBreakpointHelper";
-import { DESKTOP_SM } from "../../../../../../theme/common/breakpoints";
 import { ListboxContext } from "../../../SearchAllFilters/searchAllFilters";
 
 export const SearchCloseButton = (): JSX.Element => {
-  const desktopSmDown = useBreakpointHelper(
-    BREAKPOINT_FN_NAME.DOWN,
-    DESKTOP_SM
-  );
+  const bpDownMd = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "md");
   const { onClearSearch, onCloseSearch, open, searchTerm } =
     useContext(ListboxContext);
-  const showButton = open && (desktopSmDown || searchTerm);
-  const onClickFn = desktopSmDown ? onCloseSearch : onClearSearch;
+  const showButton = open && (bpDownMd || searchTerm);
+  const onClickFn = bpDownMd ? onCloseSearch : onClearSearch;
   return (
     <Fragment>
       {showButton && (

package/src/components/Filter/components/SearchAllFiltersSearch/searchAllFiltersSearch.styles.ts

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { TextField } from "@mui/material";
-import { inkLight, inkMain } from "../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 
 export const InputField = styled(TextField)`
   && {
@@ -10,7 +10,7 @@ export const InputField = styled(TextField)`
 
     .MuiInputBase-root {
       & ::placeholder {
-        color: ${inkLight};
+        color: ${PALETTE.INK_LIGHT};
         opacity: 0.8;
       }
 
@@ -26,7 +26,7 @@ export const InputField = styled(TextField)`
         padding: 0 0 0 12px;
 
         .MuiAutocomplete-input {
-          color: ${inkMain};
+          color: ${PALETTE.INK_MAIN};
           padding: 10px 14px 10px 0;
         }
       }

package/src/components/Filter/components/VariableSizeListItem/variableSizeListItem.tsx

@@ -9,8 +9,8 @@ import { VIEW_KIND } from "../../../../common/categories/views/types";
 import { CategoryKey } from "../../../../common/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 import { SELECT_CATEGORY_KEY } from "../../../../providers/exploreState/constants";
+import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 import { TEST_IDS } from "../../../../tests/testIds";
-import { TEXT_BODY_SMALL_400 } from "../../../../theme/common/typography";
 import { CheckedIcon } from "../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { UncheckedIcon } from "../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
 import { FilterMenuSearchMatch } from "../../common/entities";
@@ -74,9 +74,9 @@ export default function VariableSizeListItem({
         secondary={
           categoryKey !== SELECT_CATEGORY_KEY.SAVED_FILTERS && (
             <Typography
-              color="ink.light"
+              color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
               data-testid={TEST_IDS.FILTER_COUNT}
-              variant={TEXT_BODY_SMALL_400}
+              variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400}
             >
               {count}
             </Typography>

package/src/components/Filter/components/controls/Controls/controls.tsx

@@ -17,7 +17,7 @@ export const Controls = ({
 }: BaseComponentProps & Pick<SurfaceProps, "onFilter">): JSX.Element | null => {
   return (
     <StyledGrid className={className} container>
-      <Typography variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_LARGE_500}>
+      <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_LARGE_500}>
         Filters
       </Typography>
       <MButton

package/src/components/Filter/components/surfaces/drawer/components/ButtonBase/buttonBase.styles.ts

@@ -1,11 +1,11 @@
 import styled from "@emotion/styled";
 import { ButtonBase } from "@mui/material";
-import { textBodyLarge500 } from "../../../../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../../../../styles/common/constants/font";
 
 export const StyledButtonBase = styled(ButtonBase)`
-  ${textBodyLarge500}
   align-items: center;
   display: flex;
+  font: ${FONT.BODY_LARGE_500};
   gap: 8px;
   justify-content: flex-start;
   padding: 12px 16px;

package/src/components/Filter/components/views/select/components/ListItemText/components/Count/count.tsx

@@ -13,7 +13,7 @@ export const Count = ({
       className={className}
       color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
       data-testid={testId}
-      variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400}
+      variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400}
       {...props}
     />
   );

package/src/components/Filter/components/views/select/components/ListItemText/components/Term/term.tsx

@@ -12,7 +12,7 @@ export const Term = ({
     <Typography
       className={className}
       data-testid={testId}
-      variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400}
+      variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}
       {...props}
     />
   );

package/src/components/Index/components/EntityView/components/controls/ExportButton/exportButton.styles.ts

@@ -1,9 +1,9 @@
 import styled from "@emotion/styled";
 import { Box } from "@mui/material";
-import { mediaTabletDown } from "../../../../../../../styles/common/mixins/breakpoints";
+import { bpDownSm } from "../../../../../../../styles/common/mixins/breakpoints";
 
 export const StyledBox = styled(Box)`
-  ${mediaTabletDown} {
+  ${bpDownSm} {
     display: none;
   }
 `;

package/src/components/Index/components/EntityView/components/controls/FilterButton/filterButton.styles.ts

@@ -1,9 +1,9 @@
 import styled from "@emotion/styled";
 import { Button } from "@mui/material";
-import { mediaDesktopSmallUp } from "../../../../../../../styles/common/mixins/breakpoints";
+import { bpUpMd } from "../../../../../../../styles/common/mixins/breakpoints";
 
 export const StyledButton = styled(Button)`
-  ${mediaDesktopSmallUp} {
+  ${bpUpMd} {
     display: none;
   }
 `;

package/src/components/Index/components/EntityView/components/layout/Summary/summary.styles.ts

@@ -1,5 +1,6 @@
 import styled from "@emotion/styled";
 import { Grid } from "@mui/material";
+import { bpDown1024 } from "../../../../../../../styles/common/mixins/breakpoints";
 import { Dot } from "../../../../../../common/Dot/dot";
 
 export const StyledGrid = styled(Grid)`
@@ -9,7 +10,7 @@ export const StyledGrid = styled(Grid)`
   max-width: fit-content;
   padding: 12px 16px;
 
-  ${({ theme }) => theme.breakpoints.down(1024)} {
+  ${bpDown1024} {
     display: none;
   }
 `;

package/src/components/Index/components/EntityView/components/layout/Summary/summary.tsx

@@ -23,12 +23,12 @@ export const Summary = ({
       {summaries.map(([count, label], i) => (
         <Fragment key={i}>
           {i !== 0 && <StyledDot />}
-          <Typography variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_500}>
+          <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_500}>
             {count}
           </Typography>
           <Typography
             color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
-            variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400}
+            variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400}
           >
             {label}
           </Typography>

package/src/components/Index/components/EntityView/components/slots/EntityViewSlot/entityViewSlot.styles.ts

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { Grid } from "@mui/material";
-import { mediaTabletDown } from "../../../../../../../styles/common/mixins/breakpoints";
+import { bpDownSm } from "../../../../../../../styles/common/mixins/breakpoints";
 
 export const StyledGrid = styled(Grid)`
   display: grid;
@@ -11,7 +11,7 @@ export const StyledGrid = styled(Grid)`
     display: none;
   }
 
-  ${mediaTabletDown} {
+  ${bpDownSm} {
     margin: 16px 0;
   }
 `;

package/src/components/Index/components/EntityView/components/views/ChartView/chartView.tsx

@@ -35,7 +35,7 @@ export const ChartView = ({
       <StyledGrid data-testid={testId} ref={chartViewRef}>
         {selectCategoryViews.map(({ key, label, values }) => (
           <StyledGridPaperSection key={key}>
-            <Typography variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL}>
+            <Typography variant={TYPOGRAPHY_PROPS.VARIANT.HEADING_SMALL}>
               {entityName} by {label}
             </Typography>
             <Chart selectCategoryValueViews={values} width={width} />

package/src/components/Index/components/EntityView/components/views/ChartView/components/Chart/chart.styles.ts

@@ -1,11 +1,11 @@
 import styled from "@emotion/styled";
 import { Button } from "@mui/material";
-import { mediaTabletDown } from "../../../../../../../../../styles/common/mixins/breakpoints";
-import { textBodySmall400 } from "../../../../../../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../../../../../../styles/common/constants/font";
+import { bpDownSm } from "../../../../../../../../../styles/common/mixins/breakpoints";
 import { BarX } from "../../../../../../../../Plot/components/BarX/barX";
 
 export const StyledBarX = styled(BarX)`
-  ${textBodySmall400};
+  font: ${FONT.BODY_SMALL_400};
 
   svg {
     g.x-axis {
@@ -18,7 +18,7 @@ export const StyledBarX = styled(BarX)`
           text-anchor: end;
         }
 
-        ${mediaTabletDown} {
+        ${bpDownSm} {
           display: none;
           &:nth-of-type(1),
           &:nth-last-of-type(1) {

package/src/components/Index/index.styles.ts

@@ -2,7 +2,7 @@ import styled from "@emotion/styled";
 import { Grid } from "@mui/material";
 import { LayoutSpacing } from "../../hooks/UseLayoutSpacing/types";
 import { PALETTE } from "../../styles/common/constants/palette";
-import { mediaTabletDown } from "../../styles/common/mixins/breakpoints";
+import { bpDownSm } from "../../styles/common/mixins/breakpoints";
 import { FluidPaper } from "../common/Paper/components/FluidPaper/fluidPaper";
 
 export const StyledGridEntityView = styled(Grid, {
@@ -63,7 +63,7 @@ export const StyledGridEntityList = styled(Grid)`
   margin: 16px;
   overflow: hidden;
 
-  ${mediaTabletDown} {
+  ${bpDownSm} {
     margin: 16px 0;
   }
 `;

package/src/components/Layout/components/BackPage/backPageView.styles.ts

@@ -1,6 +1,7 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { TABLET } from "../../../../theme/common/breakpoints";
+import { PALETTE } from "../../../../styles/common/constants/palette";
+import { bpDownSm, bpUpSm } from "../../../../styles/common/mixins/breakpoints";
 import { Sections } from "../../../common/Sections/sections";
 
 export const BackPageView = styled.div`
@@ -11,7 +12,7 @@ export const BackPageView = styled.div`
   margin: 0 16px;
   padding: 24px 0;
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${bpUpSm} {
     grid-template-columns: repeat(12, 1fr);
     margin: 0 auto;
     max-width: min(calc(100% - 32px), 1232px);
@@ -29,7 +30,7 @@ export const BackPageHero = styled.div`
 export const BackPageTabs = styled.div`
   grid-column: 1 / -1;
 
-  ${({ theme }) => theme.breakpoints.down(TABLET)} {
+  ${bpDownSm} {
     margin-left: -16px;
     margin-right: -16px;
   }
@@ -45,7 +46,7 @@ export const BackPageContent = styled.div`
   margin-left: -16px;
   margin-right: -16px;
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${bpUpSm} {
     display: grid;
     gap: 16px;
     grid-template-columns: inherit;
@@ -61,11 +62,11 @@ export const BackPageContent = styled.div`
 // - mobile - a gridded, flat paper environment, each section stacked with a 1px gap, and
 // - tablet - a main and side column arrangement, and within each column, a gridded, rounded paper environment, each section stacked with a 1px gap.
 export const DetailPageOverviewContent = styled(BackPageContent)`
-  background-color: ${({ theme }) => theme.palette.smoke.main};
+  background-color: ${PALETTE.SMOKE_MAIN};
   gap: 1px;
   padding: 1px 0;
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${bpUpSm} {
     background-color: transparent;
     padding: 0;
   }
@@ -93,14 +94,14 @@ export const BackPageContentSingleColumn = styled(BackPageContentColumn)`
 
 // Main column.
 export const BackPageContentMainColumn = styled(BackPageContentColumn)`
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${bpUpSm} {
     ${mainColumn};
   }
 `;
 
 // Side column.
 export const BackPageContentSideColumn = styled(BackPageContentColumn)`
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${bpUpSm} {
     ${sideColumn};
   }
 `;
@@ -115,7 +116,7 @@ export const DetailPageOverviewContentMainColumn = styled(Sections)`
     display: contents; // required to override nested GridPaper.
   }
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${bpUpSm} {
     align-self: flex-start;
     display: grid;
     ${mainColumn};
@@ -137,7 +138,7 @@ export const DetailPageOverviewContentSideColumn = styled(Sections)`
     display: contents; // required to override nested GridPaper.
   }
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${bpUpSm} {
     align-self: flex-start;
     display: grid;
     ${sideColumn};

package/src/components/Layout/components/BackPage/components/BackPageHero/backPageHero.styles.ts

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { Stack } from "@mui/material";
-import { mediaTabletUp } from "../../../../../../styles/common/mixins/breakpoints";
+import { bpUpSm } from "../../../../../../styles/common/mixins/breakpoints";
 import { CallToActionButton as CTAButton } from "../../../../../common/Button/components/CallToActionButton/callToActionButton";
 
 export const BackPageHeroHeadline = styled.div`
@@ -10,7 +10,7 @@ export const BackPageHeroHeadline = styled.div`
     grid-column: 1 / -1; // Title and breadcrumbs consume full width of available grid.
   }
 
-  ${mediaTabletUp} {
+  ${bpUpSm} {
     display: flex;
     flex: 1;
     gap: 88px;
@@ -29,7 +29,7 @@ export const CallToActionButton = styled(CTAButton)`
   align-self: center;
   justify-self: flex-start;
 
-  ${mediaTabletUp} {
+  ${bpUpSm} {
     justify-self: flex-end;
   }
 `;

package/src/components/Layout/components/BackPage/components/BackPageHero/components/Actions/actions.styles.ts

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { mediaTabletUp } from "../../../../../../../../styles/common/mixins/breakpoints";
+import { bpUpSm } from "../../../../../../../../styles/common/mixins/breakpoints";
 
 export const BackPageHeroActions = styled.div`
   align-items: center;
@@ -8,7 +8,7 @@ export const BackPageHeroActions = styled.div`
   gap: 16px;
   justify-self: flex-start;
 
-  ${mediaTabletUp} {
+  ${bpUpSm} {
     justify-self: flex-end;
   }
 `;

package/src/components/Layout/components/BackPage/components/BackPageHero/components/SubTitle/subTitle.tsx

@@ -1,6 +1,6 @@
 import { Typography } from "@mui/material";
 import React, { ReactNode } from "react";
-import { TEXT_BODY_SMALL_400 } from "../../../../../../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../../styles/common/mui/typography";
 
 export interface SubTitleProps {
   subTitle?: ReactNode;
@@ -13,7 +13,11 @@ export const SubTitle = ({
   return (
     <>
       {typeof subTitle === "string" ? (
-        <Typography color="ink.light" variant={TEXT_BODY_SMALL_400} {...props}>
+        <Typography
+          color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+          variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400}
+          {...props}
+        >
           {subTitle}
         </Typography>
       ) : (