@databiosphere/findable-ui 41.2.0 → 42.0.0

package/src/components/common/Banner/banner.styles.ts

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 import { Alert } from "@mui/material";
-import { mediaDesktopUp } from "../../../styles/common/mixins/breakpoints";
-import { textBodySmall400 } from "../../../styles/common/mixins/fonts";
+import { FONT } from "../../../styles/common/constants/font";
+import { bpUpLg } from "../../../styles/common/mixins/breakpoints";
 
 export const StyledAlert = styled(Alert)`
   justify-content: center;
@@ -9,9 +9,9 @@ export const StyledAlert = styled(Alert)`
   text-align: center;
 
   .MuiAlert-message {
-    ${textBodySmall400};
     align-self: center;
     flex: 1;
+    font: ${FONT.BODY_SMALL_400};
 
     .MuiLink-root {
       color: inherit;
@@ -23,7 +23,7 @@ export const StyledAlert = styled(Alert)`
     padding: 0;
   }
 
-  ${mediaDesktopUp} {
+  ${bpUpLg} {
     padding: 8px 16px;
   }
 `;

package/src/components/common/Banner/components/CookieBanner/cookieBanner.styles.ts

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 import { Alert } from "@mui/material";
-import { mediaTabletUp } from "../../../../../styles/common/mixins/breakpoints";
-import { textBody400 } from "../../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../../styles/common/constants/font";
+import { bpUpSm } from "../../../../../styles/common/mixins/breakpoints";
 
 export const StyledAlert = styled(Alert)`
   bottom: 0;
@@ -14,7 +14,7 @@ export const StyledAlert = styled(Alert)`
   z-index: 1100; // Above support fab, below support form.
 
   .MuiAlert-message {
-    ${textBody400};
+    font: ${FONT.BODY_400};
   }
 
   .MuiAlert-action {
@@ -25,7 +25,7 @@ export const StyledAlert = styled(Alert)`
     padding: 0;
   }
 
-  ${mediaTabletUp} {
+  ${bpUpSm} {
     box-sizing: content-box;
     margin: 16px;
     max-width: 400px;

package/src/components/common/Button/components/HelpIconButton/helpIconButton.styles.ts

@@ -1,8 +1,9 @@
 import styled from "@emotion/styled";
 import { ButtonBase } from "@mui/material";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
 
 export const HelpIconButton = styled(ButtonBase)`
   align-self: flex-start;
-  color: ${({ theme }) => theme.palette.ink.light};
+  color: ${PALETTE.INK_LIGHT};
   vertical-align: bottom; // Vertical alignment is required to align the icon with text styles "textBody400".
 ` as typeof ButtonBase;

package/src/components/common/Button/components/NavigationButton/navigationButton.styles.ts

@@ -1,5 +1,6 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
 import { Button as DXButton } from "../../button";
 
 interface Props {
@@ -9,20 +10,20 @@ interface Props {
 export const Button = styled(DXButton, {
   shouldForwardProp: (prop) => prop !== "isActive",
 })<Props>`
-  background-color: ${({ theme }) => theme.palette.common.white};
+  background-color: ${PALETTE.COMMON_WHITE};
   color: inherit;
   padding: 6px 6px 6px 12px;
 
   &:active,
   &:hover {
-    background-color: ${({ theme }) => theme.palette.smoke.light};
+    background-color: ${PALETTE.SMOKE_LIGHT};
   }
 
   // Button is "active" i.e. menu is open.
-  ${({ isActive, theme }) =>
+  ${({ isActive }) =>
     isActive &&
     css`
-      background-color: ${theme.palette.smoke.light};
+      background-color: ${PALETTE.SMOKE_LIGHT};
     `};
 
   .MuiButton-endIcon {

package/src/components/common/Card/card.styles.ts

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { TABLET } from "../../../theme/common/breakpoints";
+import { bpUpSm } from "../../../styles/common/mixins/breakpoints";
 import { SectionContent } from "../Section/section.styles";
 
 export const CardSection = styled.div`
@@ -7,7 +7,7 @@ export const CardSection = styled.div`
   gap: 16px;
   padding: 20px 16px;
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${bpUpSm} {
     padding: 20px;
   }
 `;

package/src/components/common/Card/components/CardActions/cardActions.styles.ts

@@ -1,9 +1,9 @@
 import styled from "@emotion/styled";
-import { textBody500 } from "../../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../../styles/common/constants/font";
 
 export const CardActions = styled.div`
-  ${textBody500};
   align-items: center;
   display: flex;
+  font: ${FONT.BODY_500};
   gap: 16px;
 `;

package/src/components/common/Card/components/CardSecondaryText/cardSecondaryText.tsx

@@ -1,22 +1,13 @@
-import { Typography } from "@mui/material";
-import React, { ReactNode } from "react";
-import { TEXT_BODY_SMALL_400_2_LINES } from "../../../../../theme/common/typography";
+import { Typography, TypographyProps } from "@mui/material";
+import React from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
 
-export interface CardSecondaryTextProps {
-  children: ReactNode;
-}
-
-export const CardSecondaryText = ({
-  children,
-  ...props /* Spread props to allow for Mui TypographyProps specific prop overrides e.g. "variant". */
-}: CardSecondaryTextProps): JSX.Element => {
+export const CardSecondaryText = (props: TypographyProps): JSX.Element => {
   return (
     <Typography
-      color="ink.light"
-      variant={TEXT_BODY_SMALL_400_2_LINES}
+      color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+      variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400_2_LINES}
       {...props}
-    >
-      {children}
-    </Typography>
+    />
   );
 };

package/src/components/common/Card/components/CardSecondaryTitle/cardSecondaryTitle.styles.ts

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { Typography } from "@mui/material";
 
-export const CardSecondaryTitle = styled(Typography)`
+export const StyledTypography = styled(Typography)`
   margin-top: -4px;
 `;

package/src/components/common/Card/components/CardSecondaryTitle/cardSecondaryTitle.tsx

@@ -1,22 +1,14 @@
-import React, { ReactNode } from "react";
-import { TEXT_BODY_SMALL_400_2_LINES } from "../../../../../theme/common/typography";
-import { CardSecondaryTitle as SecondaryTitle } from "./cardSecondaryTitle.styles";
+import { TypographyProps } from "@mui/material";
+import React from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
+import { StyledTypography } from "./cardSecondaryTitle.styles";
 
-export interface CardSecondaryTitleProps {
-  children: ReactNode;
-}
-
-export const CardSecondaryTitle = ({
-  children,
-  ...props /* Spread props to allow for Mui TypographyProps specific prop overrides e.g. "variant". */
-}: CardSecondaryTitleProps): JSX.Element => {
+export const CardSecondaryTitle = (props: TypographyProps): JSX.Element => {
   return (
-    <SecondaryTitle
-      color="ink.light"
-      variant={TEXT_BODY_SMALL_400_2_LINES}
+    <StyledTypography
+      color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+      variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400_2_LINES}
       {...props}
-    >
-      {children}
-    </SecondaryTitle>
+    />
   );
 };

package/src/components/common/Card/components/CardText/cardText.tsx

@@ -1,18 +1,12 @@
-import { Typography } from "@mui/material";
-import React, { ReactNode } from "react";
-import { TEXT_BODY_400_2_LINES } from "../../../../../theme/common/typography";
+import { Typography, TypographyProps } from "@mui/material";
+import React from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
 
-export interface CardTextProps {
-  children: ReactNode;
-}
-
-export const CardText = ({
-  children,
-  ...props /* Spread props to allow for Mui TypographyProps specific prop overrides e.g. "variant". */
-}: CardTextProps): JSX.Element => {
+export const CardText = (props: TypographyProps): JSX.Element => {
   return (
-    <Typography variant={TEXT_BODY_400_2_LINES} {...props}>
-      {children}
-    </Typography>
+    <Typography
+      variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES}
+      {...props}
+    />
   );
 };

package/src/components/common/Card/components/CardTitle/cardTitle.tsx

@@ -1,18 +1,13 @@
-import { Typography } from "@mui/material";
-import React, { ReactNode } from "react";
-import { TEXT_BODY_LARGE_500 } from "../../../../../theme/common/typography";
+import { Typography, TypographyProps } from "@mui/material";
+import React from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
 
-export interface CardTitleProps {
-  children: ReactNode;
-}
-
-export const CardTitle = ({
-  children,
-  ...props /* Spread props to allow for Mui TypographyProps specific prop overrides e.g. "variant". */
-}: CardTitleProps): JSX.Element => {
+export const CardTitle = (props: TypographyProps): JSX.Element => {
   return (
-    <Typography component="h4" variant={TEXT_BODY_LARGE_500} {...props}>
-      {children}
-    </Typography>
+    <Typography
+      component="h4"
+      variant={TYPOGRAPHY_PROPS.VARIANT.BODY_LARGE_500}
+      {...props}
+    />
   );
 };

package/src/components/common/Code/code.styles.ts

@@ -1,20 +1,21 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { textBody500 } from "../../../styles/common/mixins/fonts";
-import { ThemeProps } from "../../../theme/theme";
+import { COLOR_MIXES } from "../../../styles/common/constants/colorMixes";
+import { FONT } from "../../../styles/common/constants/font";
+import { PALETTE } from "../../../styles/common/constants/palette";
+import { ThemeProps } from "../../../theme/types";
 
 interface Props {
   copied: boolean;
 }
 
 const copy = (props: ThemeProps) => css`
-  ${textBody500(props)};
   align-items: center;
   border-radius: inherit;
-  color: ${props.theme.palette.common.white};
+  color: ${PALETTE.COMMON_WHITE};
   content: "";
   display: flex;
-  font-family: ${props.theme.typography.fontFamily};
+  font: ${FONT.BODY_500};
   height: 100%;
   justify-content: center;
   left: 0;
@@ -26,7 +27,7 @@ const copy = (props: ThemeProps) => css`
 `;
 
 export const CodeBlock = styled("pre")<Props>`
-  background-color: ${({ theme }) => theme.palette.info.lightest};
+  background-color: ${PALETTE.INFO_LIGHTEST};
   border-radius: 4px;
   cursor: pointer;
   margin: 16px 0;
@@ -38,22 +39,22 @@ export const CodeBlock = styled("pre")<Props>`
   }
 
   // Copy to Clipboard!
-  ${({ copied, theme }) =>
+  ${({ copied }) =>
     !copied &&
     css`
       &:hover::after {
-        background-color: ${theme.palette.primary.main}e6;
+        background-color: ${COLOR_MIXES.PRIMARY_MAIN_90};
         content: "Copy to Clipboard";
         opacity: 1;
       }
     `};
 
   // Copied!
-  ${({ copied, theme }) =>
+  ${({ copied }) =>
     copied &&
     css`
       &::after {
-        background-color: ${theme.palette.primary.main};
+        background-color: ${PALETTE.PRIMARY_MAIN};
         content: "Copied!";
         opacity: 1;
       }

package/src/components/common/Dot/dot.styles.ts

@@ -1,8 +1,9 @@
 import styled from "@emotion/styled";
+import { PALETTE } from "../../../styles/common/constants/palette";
 
 export const DotSeparator = styled("span")`
   align-self: center;
-  background-color: ${({ theme }) => theme.palette.ink.light};
+  background-color: ${PALETTE.INK_LIGHT};
   border-radius: 50%;
   display: block;
   flex: none;

package/src/components/common/Form/components/Input/input.styles.ts

@@ -1,7 +1,7 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { FormControl } from "@mui/material";
-import { inkLight, inkMain } from "../../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
 
 interface Props {
   isFilled?: boolean;
@@ -25,7 +25,7 @@ export const InputFormControl = styled(FormControl, {
 
     input::placeholder,
     textarea::placeholder {
-      color: ${inkLight};
+      color: ${PALETTE.INK_LIGHT};
       opacity: 0.8;
     }
 
@@ -37,12 +37,12 @@ export const InputFormControl = styled(FormControl, {
     }
 
     // Input filled.
-    ${({ isFilled, ...props }) =>
+    ${({ isFilled }) =>
       isFilled &&
       css`
         & .MuiOutlinedInput-input,
         .MuiSvgIcon-root {
-          color: ${inkMain(props)};
+          color: ${PALETTE.INK_MAIN};
         }
       `};
   }

package/src/components/common/Form/components/Input/input.tsx

@@ -4,7 +4,7 @@ import {
   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 { InputFormControl } from "./input.styles";
 
 /**
@@ -25,7 +25,11 @@ export const Input = ({
 }: InputProps): JSX.Element => {
   return (
     <InputFormControl className={className} isFilled={isFilled}>
-      {label && <Typography variant={TEXT_BODY_400}>{label}</Typography>}
+      {label && (
+        <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>
+          {label}
+        </Typography>
+      )}
       <OutlinedInput
         fullWidth
         inputProps={{ autoComplete: "off", spellCheck: false }}

package/src/components/common/Form/components/Select/select.styles.ts

@@ -1,7 +1,7 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { FormControl } from "@mui/material";
-import { inkMain } from "../../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
 
 interface Props {
   isFilled: boolean;
@@ -15,12 +15,12 @@ export const InputFormControl = styled(FormControl, {
   gap: 4px;
 
   // Input filled.
-  ${({ isFilled, ...props }) =>
+  ${({ isFilled }) =>
     isFilled &&
     css`
       & .MuiOutlinedInput-input,
       .MuiSvgIcon-root {
-        color: ${inkMain(props)};
+        color: ${PALETTE.INK_MAIN};
       }
     `};
 `;

package/src/components/common/Form/components/Select/select.tsx

@@ -4,7 +4,7 @@ import {
   Typography,
 } from "@mui/material";
 import React, { ReactNode } from "react";
-import { TEXT_BODY_400 } from "../../../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
 import { InputFormControl } from "./select.styles";
 
 /**
@@ -28,7 +28,11 @@ export const Select = ({
 }: SelectProps): JSX.Element => {
   return (
     <InputFormControl className={className} isFilled={isFilled}>
-      {label && <Typography variant={TEXT_BODY_400}>{label}</Typography>}
+      {label && (
+        <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>
+          {label}
+        </Typography>
+      )}
       <MSelect fullWidth inputProps={{ onBlur }} size="small" {...props}>
         {children}
       </MSelect>

package/src/components/common/Form/components/UploadFile/uploadFile.styles.ts

@@ -1,14 +1,7 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { ButtonBase } from "@mui/material";
-import {
-  errorMain,
-  infoLightest,
-  infoMain,
-  inkMain,
-  smokeDark,
-  smokeLight,
-} from "../../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
 
 interface Props {
   isAttached: boolean;
@@ -21,8 +14,8 @@ export const Button = styled(ButtonBase, {
     prop !== "isAttached" && prop !== "isDragActive" && prop !== "isError",
 })<Props>`
   align-items: center;
-  background-color: ${smokeLight};
-  border: 1px dashed ${smokeDark};
+  background-color: ${PALETTE.SMOKE_LIGHT};
+  border: 1px dashed ${PALETTE.SMOKE_DARK};
   border-radius: 4px;
   display: flex;
   gap: 8px;
@@ -32,23 +25,23 @@ export const Button = styled(ButtonBase, {
   padding: 10px 12px;
 
   // Drag active.
-  ${({ isDragActive, theme }) =>
+  ${({ isDragActive }) =>
     isDragActive &&
     css`
-      background-color: ${infoLightest({ theme })};
-      border: 1px dashed ${infoMain({ theme })};
+      background-color: ${PALETTE.INFO_LIGHTEST};
+      border: 1px dashed ${PALETTE.INFO_MAIN};
     `};
 
   // Error.
-  ${({ isDragActive, isError, theme }) =>
+  ${({ isDragActive, isError }) =>
     isError &&
     !isDragActive &&
     css`
-      border: 1px dashed ${errorMain({ theme })};
+      border: 1px dashed ${PALETTE.ERROR_MAIN};
     `};
 
-  .MuiTypography-text-body-400 {
-    color: ${inkMain};
+  .MuiTypography-body-400 {
+    color: ${PALETTE.INK_MAIN};
     opacity: 0.8;
     overflow: hidden;
     text-overflow: ellipsis;

package/src/components/common/Form/components/UploadFile/uploadFile.tsx

@@ -2,7 +2,7 @@ import { CloseRounded } from "@mui/icons-material";
 import { FormHelperText, Typography } from "@mui/material";
 import React from "react";
 import { DropzoneState } from "react-dropzone";
-import { TEXT_BODY_400 } from "../../../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
 import { Loading, LOADING_PANEL_STYLE } from "../../../../Loading/loading";
 import { FormState } from "../../../../Support/components/SupportRequest/components/SupportRequestForm/common/entities";
 import { ErrorIcon } from "../../../CustomIcon/components/ErrorIcon/errorIcon";
@@ -38,7 +38,11 @@ export const UploadFile = ({
   const isAttached = Boolean(attachmentToken);
   return (
     <InputFormControl className={className} error={error}>
-      {label && <Typography variant={TEXT_BODY_400}>{label}</Typography>}
+      {label && (
+        <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>
+          {label}
+        </Typography>
+      )}
       <Button
         isAttached={isAttached}
         isDragActive={isDragActive}
@@ -50,7 +54,7 @@ export const UploadFile = ({
           loading={attachmentUploading}
           panelStyle={LOADING_PANEL_STYLE.INHERIT}
         />
-        <Typography variant={TEXT_BODY_400}>
+        <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>
           {isAttached ? (
             attachmentName
           ) : (

package/src/components/common/IconBadge/iconBadge.styles.ts

@@ -1,15 +1,6 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import {
-  alertLightest,
-  alertMain,
-  infoLightest,
-  infoMain,
-  successLightest,
-  successMain,
-  warningLightest,
-  warningMain,
-} from "../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../styles/common/constants/palette";
 import { ICON_BADGE_COLOR, IconBadgeColor } from "./iconBadge";
 
 interface Props {
@@ -25,34 +16,34 @@ export const Circle = styled.div<Props>`
   width: 72px;
 
   // Alert.
-  ${({ color, ...props }) =>
+  ${({ color }) =>
     color === ICON_BADGE_COLOR.ALERT &&
     css`
-      background-color: ${alertLightest(props)};
-      color: ${alertMain(props)};
+      background-color: ${PALETTE.ALERT_LIGHTEST};
+      color: ${PALETTE.ALERT_MAIN};
     `};
 
   // Info.
-  ${({ color, ...props }) =>
+  ${({ color }) =>
     color === ICON_BADGE_COLOR.INFO &&
     css`
-      background-color: ${infoLightest(props)};
-      color: ${infoMain(props)};
+      background-color: ${PALETTE.INFO_LIGHTEST};
+      color: ${PALETTE.INFO_MAIN};
     `};
 
   // Success.
-  ${({ color, ...props }) =>
+  ${({ color }) =>
     color === ICON_BADGE_COLOR.SUCCESS &&
     css`
-      background-color: ${successLightest(props)};
-      color: ${successMain(props)};
+      background-color: ${PALETTE.SUCCESS_LIGHTEST};
+      color: ${PALETTE.SUCCESS_MAIN};
     `};
 
   // Warning.
-  ${({ color, ...props }) =>
+  ${({ color }) =>
     color === ICON_BADGE_COLOR.WARNING &&
     css`
-      background-color: ${warningLightest(props)};
-      color: ${warningMain(props)};
+      background-color: ${PALETTE.WARNING_LIGHTEST};
+      color: ${PALETTE.WARNING_MAIN};
     `};
 `;

package/src/components/common/IconButton/iconButton.styles.ts

@@ -1,7 +1,7 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { IconButton as MIconButton } from "@mui/material";
-import { smokeLightest } from "../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../styles/common/constants/palette";
 
 interface Props {
   open: boolean;
@@ -10,11 +10,11 @@ interface Props {
 export const Button = styled(MIconButton, {
   shouldForwardProp: (prop) => prop !== "open",
 })<Props>`
-  ${({ open, ...props }) =>
+  ${({ open }) =>
     open &&
     css`
       &.MuiIconButton-root {
-        background-color: ${smokeLightest(props)};
+        background-color: ${PALETTE.SMOKE_LIGHTEST};
       }
     `}
 `;

package/src/components/common/Input/input.styles.ts

@@ -1,6 +1,7 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { FormControl, OutlinedInput } from "@mui/material";
+import { PALETTE } from "../../../styles/common/constants/palette";
 
 interface Props {
   isFilled: boolean;
@@ -25,12 +26,12 @@ export const InputField = styled(OutlinedInput, {
   }
 
   // Input filled.
-  ${({ isFilled, theme }) =>
+  ${({ isFilled }) =>
     isFilled &&
     css`
       .MuiOutlinedInput-input,
       .MuiSvgIcon-root {
-        color: ${theme.palette.ink.main};
+        color: ${PALETTE.INK_MAIN};
       }
     `};
 `;

package/src/components/common/Input/input.tsx

@@ -1,6 +1,6 @@
 import { Typography } from "@mui/material";
 import React, { ChangeEvent, ElementType } from "react";
-import { TEXT_BODY_400 } from "../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../styles/common/mui/typography";
 import { SetSearchTermFn } from "../../Filter/common/entities";
 import { InputField, InputFormControl } from "./input.styles";
 
@@ -42,7 +42,11 @@ export const Input = ({
 }: InputProps): JSX.Element => {
   return (
     <InputFormControl className={className}>
-      {label && <Typography variant={TEXT_BODY_400}>{label}</Typography>}
+      {label && (
+        <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>
+          {label}
+        </Typography>
+      )}
       <InputField
         autoFocus
         fullWidth