@databiosphere/findable-ui 41.2.0 → 42.0.0

package/src/components/Layout/components/ContentLayout/contentLayout.styles.ts

@@ -1,17 +1,11 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 import {
-  media1366Up,
-  mediaDesktopSmallUp,
-  mediaTabletDown,
+  bpDownSm,
+  bpUp1366,
+  bpUpMd,
 } from "../../../../styles/common/mixins/breakpoints";
-import {
-  smokeLight,
-  smokeLightest,
-  smokeMain,
-  white,
-} from "../../../../styles/common/mixins/colors";
-import { ThemeProps } from "../../../../theme/theme";
 import { PanelBackgroundColor } from "./common/entities";
 
 const CONTENT_MAX_WIDTH = 756;
@@ -20,13 +14,10 @@ const NAV_MAX_WIDTH = 232;
 const PADDING = 24;
 const PADDING_Y = PADDING;
 
-const COLOR: Record<
-  PanelBackgroundColor,
-  ({ theme }: ThemeProps) => string | undefined
-> = {
-  DEFAULT: white,
-  SMOKE_LIGHT: smokeLight,
-  SMOKE_LIGHTEST: smokeLightest,
+const COLOR: Record<PanelBackgroundColor, string | undefined> = {
+  DEFAULT: PALETTE.COMMON_WHITE,
+  SMOKE_LIGHT: PALETTE.SMOKE_LIGHT,
+  SMOKE_LIGHTEST: PALETTE.SMOKE_LIGHTEST,
 };
 
 interface LayoutProps {
@@ -40,8 +31,7 @@ interface GridProps {
 }
 
 export const ContentLayout = styled.div<LayoutProps>`
-  background-color: ${({ panelColor, theme }) =>
-    getPanelBackgroundColor(theme, panelColor)};
+  background-color: ${({ panelColor }) => getPanelBackgroundColor(panelColor)};
   display: grid;
   flex: 1;
   grid-template-areas: "content";
@@ -49,7 +39,7 @@ export const ContentLayout = styled.div<LayoutProps>`
   height: 100%;
   margin: 0 auto;
 
-  ${mediaDesktopSmallUp} {
+  ${bpUpMd} {
     ${({ hasNavigation }) =>
       hasNavigation
         ? css`
@@ -64,7 +54,7 @@ export const ContentLayout = styled.div<LayoutProps>`
           `};
   }
 
-  ${media1366Up} {
+  ${bpUp1366} {
     grid-template-areas: "navigation content outline";
     grid-template-columns:
       ${NAV_GRID_WIDTH}px
@@ -73,17 +63,13 @@ export const ContentLayout = styled.div<LayoutProps>`
   }
 `;
 
-const content = ({
-  headerHeight,
-  panelColor,
-  theme,
-}: GridProps & ThemeProps) => css`
-  background-color: ${getPanelBackgroundColor(theme, panelColor)};
+const content = ({ headerHeight, panelColor }: GridProps) => css`
+  background-color: ${getPanelBackgroundColor(panelColor)};
   padding-top: ${headerHeight}px;
 `;
 
-const navigation = ({ panelColor, theme }: GridProps & ThemeProps) => css`
-  background-color: ${getPanelBackgroundColor(theme, panelColor)};
+const navigation = ({ panelColor }: GridProps) => css`
+  background-color: ${getPanelBackgroundColor(panelColor)};
 `;
 
 const positioner = ({ headerHeight }: GridProps) => css`
@@ -96,11 +82,11 @@ const positioner = ({ headerHeight }: GridProps) => css`
 
 export const NavigationGrid = styled.div<GridProps>`
   ${navigation};
-  box-shadow: inset -1px 0 ${smokeMain};
+  box-shadow: inset -1px 0 ${PALETTE.SMOKE_MAIN};
   display: none;
   grid-area: navigation;
 
-  ${mediaDesktopSmallUp} {
+  ${bpUpMd} {
     display: block;
   }
 `;
@@ -116,7 +102,7 @@ export const OutlineGrid = styled("div")<GridProps>`
   display: none;
   grid-area: outline;
 
-  ${media1366Up} {
+  ${bpUp1366} {
     display: block;
   }
 `;
@@ -139,7 +125,7 @@ export const Content = styled.div`
   max-width: ${CONTENT_MAX_WIDTH}px;
   padding: ${PADDING_Y}px 40px;
 
-  ${mediaTabletDown} {
+  ${bpDownSm} {
     padding: ${PADDING_Y}px 16px;
   }
 `;
@@ -153,13 +139,11 @@ export const Outline = styled.div`
 
 /**
  * Returns the background color for the panel.
- * @param theme - Theme.
  * @param panelColor - Panel color.
  * @returns background color for the panel.
  */
 function getPanelBackgroundColor(
-  theme: ThemeProps["theme"],
   panelColor?: PanelBackgroundColor
 ): string | undefined {
-  return panelColor ? COLOR[panelColor]({ theme }) : undefined;
+  return panelColor ? COLOR[panelColor] : undefined;
 }

package/src/components/Layout/components/Footer/components/VersionInfo/components/Tooltip/components/Title/title.tsx

@@ -1,7 +1,7 @@
 import { Typography } from "@mui/material";
 import React from "react";
 import { useConfig } from "../../../../../../../../../../hooks/useConfig";
-import { TEXT_BODY_SMALL_400_2_LINES } from "../../../../../../../../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../../../../styles/common/mui/typography";
 import { Link } from "../../../../../../../../../Links/components/Link/link";
 import { VersionInfoProps } from "../../../../types";
 import { getGitHash, getVersion } from "../../../../utils";
@@ -17,7 +17,10 @@ export const Title = ({
   if (!versionInfo) return null;
   const { buildDate, catalog, gitHash, version } = versionInfo;
   return (
-    <Typography component="div" variant={TEXT_BODY_SMALL_400_2_LINES}>
+    <Typography
+      component="div"
+      variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400_2_LINES}
+    >
       {buildDate && (
         <div>
           <span>Build Date: </span>

package/src/components/Layout/components/Footer/components/VersionInfo/versionInfo.styles.ts

@@ -1,11 +1,11 @@
 import styled from "@emotion/styled";
 import { Chip } from "@mui/material";
-import { inkLight } from "../../../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
 
 export const StyledChip = styled(Chip)`
   align-self: center;
   border-radius: 4px;
   .MuiChip-label {
-    color: ${inkLight};
+    color: ${PALETTE.INK_LIGHT};
   }
 `;

package/src/components/Layout/components/Footer/footer.styles.ts

@@ -1,8 +1,8 @@
 import styled from "@emotion/styled";
 import { AppBar as MAppBar } from "@mui/material";
-import { mediaTabletUp } from "../../../../styles/common/mixins/breakpoints";
-import { inkMain, smokeMain } from "../../../../styles/common/mixins/colors";
-import { textBodySmall400 } 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";
 import { Socials as DXSocials } from "../../../common/Socials/socials";
 import { Link as DXLink } from "../../../Links/components/Link/link";
 
@@ -19,7 +19,7 @@ export const AppBar = styled(MAppBar)`
     padding: 0 16px;
   }
 
-  ${mediaTabletUp} {
+  ${bpUpSm} {
     padding: 0;
 
     .MuiToolbar-root {
@@ -37,23 +37,23 @@ export const Links = styled.div`
   flex-direction: column;
   gap: 24px;
 
-  ${mediaTabletUp} {
+  ${bpUpSm} {
     flex-direction: row;
   }
 `;
 
 export const Link = styled(DXLink)`
-  ${textBodySmall400};
   align-items: center;
-  color: ${inkMain};
+  color: ${PALETTE.INK_MAIN};
   display: flex;
+  font: ${FONT.BODY_SMALL_400};
 `;
 
 export const Socials = styled(DXSocials)`
   gap: 8px;
   .MuiIconButton-root {
     &:hover {
-      background-color: ${smokeMain};
+      background-color: ${PALETTE.SMOKE_MAIN};
     }
   }
 `;

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.styles.ts

@@ -6,6 +6,7 @@ import {
   MenuItem,
   Typography,
 } from "@mui/material";
+import { PALETTE } from "../../../../../../../../../../../../styles/common/constants/palette";
 
 export const AuthenticationMenu = styled(MMenu)`
   margin: 4px 0;
@@ -18,7 +19,7 @@ export const UserIcon = styled(MIconButton)`
 export const UserSummary = styled(MenuItem)`
   display: block;
   cursor: inherit;
-  border-bottom: 1px solid ${({ theme }) => theme.palette.smoke.main};
+  border-bottom: 1px solid ${PALETTE.SMOKE_MAIN};
   padding-bottom: ${({ theme }) => theme.spacing(4)};
   margin-bottom: ${({ theme }) => theme.spacing(2)};
 

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Content/components/Navigation/navigation.styles.ts

@@ -1,8 +1,5 @@
 import styled from "@emotion/styled";
-import {
-  textBody500,
-  textBodyLarge500,
-} from "../../../../../../../../../../../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../../../../../../../../../../../styles/common/constants/font";
 import { Navigation as DXNavigation } from "../../../../../../../Navigation/navigation";
 
 export const Navigation = styled(DXNavigation)`
@@ -15,7 +12,7 @@ export const Navigation = styled(DXNavigation)`
 
   .MuiButton-activeNav,
   .MuiButton-nav {
-    ${textBodyLarge500};
+    font: ${FONT.BODY_LARGE_500};
     justify-content: space-between;
     padding: 12px 24px;
 
@@ -30,7 +27,7 @@ export const DrawerNavigation = styled(Navigation)`
 
   .MuiButton-activeNav,
   .MuiButton-nav {
-    ${textBody500};
+    font: ${FONT.BODY_500};
     padding: 14px 24px;
   }
 `;

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/searchBar.styles.ts

@@ -1,9 +1,6 @@
 import styled from "@emotion/styled";
 import { Dialog, Input } from "@mui/material";
-import {
-  inkLight,
-  smokeMain,
-} from "../../../../../../../../../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../../../../../../../../../styles/common/constants/palette";
 import { IconButton } from "../../../../../../../../../../../common/IconButton/iconButton";
 
 interface Props {
@@ -31,16 +28,16 @@ export const SearchForm = styled.form`
 `;
 
 export const SearchInput = styled(Input)`
-  border-bottom: 1px solid ${smokeMain};
+  border-bottom: 1px solid ${PALETTE.SMOKE_MAIN};
   height: 40px;
   padding: 0;
 
   &&.Mui-focused ::placeholder {
-    color: ${inkLight};
+    color: ${PALETTE.INK_LIGHT};
     opacity: 1;
   }
 `;
 
 export const ClearButton = styled(IconButton)`
-  color: ${inkLight};
+  color: ${PALETTE.INK_LIGHT};
 ` as typeof IconButton;

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/navigationDrawer.styles.ts

@@ -1,23 +1,21 @@
 import styled from "@emotion/styled";
 import { Dialog as MDialog } from "@mui/material";
-import { inkLight } from "../../../../../../../../../../styles/common/mixins/colors";
-import {
-  textBody400,
-  textUppercase500,
-} from "../../../../../../../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../../../../../../../styles/common/constants/font";
+import { PALETTE } from "../../../../../../../../../../styles/common/constants/palette";
 import { Button as DXButton } from "../../../../../../../../../common/Button/button";
 
 export const Dialog = styled(MDialog)`
   + .MuiDialog-root {
     .MuiButton-activeNav,
     .MuiButton-nav {
-      ${textBody400};
+      font: ${FONT.BODY_400};
       padding: 6px 48px;
 
       &.Mui-disabled {
-        ${textUppercase500};
-        color: ${inkLight};
+        color: ${PALETTE.INK_LIGHT};
+        font: ${FONT.UPPERCASE_500};
         margin-top: 20px;
+        text-transform: uppercase;
         opacity: 1;
       }
 

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.styles.ts

@@ -1,11 +1,7 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { MenuItem as MMenuItem, Popper as MPopper } from "@mui/material";
-import {
-  inkLight,
-  smokeLight,
-  smokeMain,
-} from "../../../../../../../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../../../../../../../styles/common/constants/palette";
 import { Button as DXButton } from "../../../../../../../../../common/Button/button";
 
 interface Props {
@@ -16,7 +12,7 @@ export const StyledPopper = styled(MPopper)`
   z-index: 1300;
 
   .MuiPaper-menu {
-    border-color: ${smokeMain};
+    border-color: ${PALETTE.SMOKE_MAIN};
     margin: 4px 0;
     max-height: calc(100vh - 96px);
     max-width: 324px;
@@ -49,18 +45,18 @@ export const StyledPopper = styled(MPopper)`
           }
 
           .MuiListItemText-secondary {
-            color: ${inkLight};
+            color: ${PALETTE.INK_LIGHT};
             white-space: normal;
           }
         }
 
         &.Mui-disabled {
-          color: ${inkLight};
+          color: ${PALETTE.INK_LIGHT};
           opacity: 1;
         }
 
         &.Mui-selected {
-          background-color: ${smokeLight};
+          background-color: ${PALETTE.SMOKE_LIGHT};
         }
       }
 
@@ -87,10 +83,10 @@ export const Button = styled(DXButton, {
   shouldForwardProp: (prop) => prop !== "isActive",
 })<Props>`
   // Button is "active" i.e. menu is open.
-  ${(props) =>
-    props.isActive &&
+  ${({ isActive }) =>
+    isActive &&
     css`
-      background-color: ${smokeLight(props)};
+      background-color: ${PALETTE.SMOKE_LIGHT};
     `};
 `;
 

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenuItems/navigationMenuItems.tsx

@@ -7,12 +7,7 @@ import {
 } from "@mui/material";
 import Link from "next/link";
 import React, { Fragment, ReactNode } from "react";
-import {
-  TEXT_BODY_400,
-  TEXT_BODY_500,
-  TEXT_BODY_SMALL_400_2_LINES,
-  TEXT_UPPERCASE_500,
-} from "../../../../../../../../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../../../../styles/common/mui/typography";
 import {
   ANCHOR_TARGET,
   REL_ATTRIBUTE,
@@ -88,13 +83,13 @@ export const NavigationMenuItems = ({
                   primaryTypographyProps={{
                     variant: url
                       ? description
-                        ? TEXT_BODY_500
-                        : TEXT_BODY_400
-                      : TEXT_UPPERCASE_500,
+                        ? TYPOGRAPHY_PROPS.VARIANT.BODY_500
+                        : TYPOGRAPHY_PROPS.VARIANT.BODY_400
+                      : TYPOGRAPHY_PROPS.VARIANT.UPPERCASE_500,
                   }}
                   secondary={description}
                   secondaryTypographyProps={{
-                    variant: TEXT_BODY_SMALL_400_2_LINES,
+                    variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400_2_LINES,
                   }}
                 />
               </MMenuItem>

package/src/components/Layout/components/Header/components/Content/components/Navigation/navigation.styles.ts

@@ -1,6 +1,6 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { textBody500 } from "../../../../../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../../../../../styles/common/constants/font";
 
 interface Props {
   isMenuIn: boolean;
@@ -22,7 +22,7 @@ export const Navigation = styled("div")<Props>`
 
   .MuiButton-activeNav,
   .MuiButton-nav {
-    ${textBody500};
+    font: ${FONT.BODY_500};
     padding: 6px 12px;
 
     .MuiButton-endIcon {

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;
     `};