@databiosphere/findable-ui 41.2.0 → 42.0.0

package/src/components/common/KeyValuePairs/components/KeyElType/keyElType.tsx

@@ -10,7 +10,7 @@ export const KeyElType = ({
   children,
   color = TYPOGRAPHY_PROPS.COLOR.INK_LIGHT,
   component = "div",
-  variant = TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES,
+  variant = TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES,
   ...props /* MuiTypographyProps */
 }: TypographyProps): JSX.Element => {
   return (

package/src/components/common/KeyValuePairs/components/ValueElType/valueElType.tsx

@@ -9,7 +9,7 @@ import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
 export const ValueElType = ({
   children,
   component = "div",
-  variant = TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES,
+  variant = TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES,
   ...props /* MuiTypographyProps */
 }: TypographyProps): JSX.Element => {
   return (

package/src/components/common/LoginDialog/constants.ts

@@ -11,7 +11,7 @@ import { TYPOGRAPHY_PROPS } from "../../../styles/common/mui/typography";
 export const DIALOG_CONTENT_TEXT_PROPS: DialogContentTextProps = {
   color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT,
   component: "div",
-  variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400,
+  variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400,
 };
 
 export const DIALOG_PROPS: Partial<DialogProps> = {
@@ -19,7 +19,7 @@ export const DIALOG_PROPS: Partial<DialogProps> = {
 };
 
 export const DIALOG_TITLE_PROPS: DialogTitleProps = {
-  variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL,
+  variant: TYPOGRAPHY_PROPS.VARIANT.HEADING_SMALL,
 };
 
 export const ICON_BUTTON_PROPS: IconButtonProps = {

package/src/components/common/MDXMarkdown/components/Section/mdxSection.styles.ts

@@ -1,9 +1,5 @@
 import styled from "@emotion/styled";
-import {
-  textBody4002Lines,
-  textBody500,
-  textBodyLarge500,
-} from "../../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../../styles/common/constants/font";
 
 export const SectionContent = styled.div`
   h3,
@@ -12,16 +8,16 @@ export const SectionContent = styled.div`
   }
 
   h3 {
-    ${textBodyLarge500};
+    font: ${FONT.BODY_LARGE_500};
   }
 
   h4 {
-    ${textBody500};
+    font: ${FONT.BODY_500};
     margin-top: 20px;
   }
 
   p {
-    ${textBody4002Lines};
+    font: ${FONT.BODY_400_2_LINES};
     margin: 0 0 8px;
   }
 

package/src/components/common/Paper/components/FluidPaper/fluidPaper.styles.ts

@@ -1,9 +1,9 @@
 import styled from "@emotion/styled";
-import { mediaTabletDown } from "../../../../../styles/common/mixins/breakpoints";
+import { bpDownSm } from "../../../../../styles/common/mixins/breakpoints";
 import { RoundedPaper } from "../RoundedPaper/roundedPaper";
 
 export const StyledPaper = styled(RoundedPaper)`
-  ${mediaTabletDown} {
+  ${bpDownSm} {
     border-left: none;
     border-radius: 0;
     border-right: none;

package/src/components/common/Paper/paper.styles.ts

@@ -1,5 +1,6 @@
 import styled from "@emotion/styled";
-import { TABLET } from "../../../theme/common/breakpoints";
+import { PALETTE } from "../../../styles/common/constants/palette";
+import { bpDownSm } from "../../../styles/common/mixins/breakpoints";
 import { Paper } from "./paper";
 
 /**
@@ -35,7 +36,7 @@ export const RoundedPaper = styled(Paper)`
 /* eslint-enable valid-jsdoc -- disable require param */
 export const FluidPaper = styled(RoundedPaper)`
   & {
-    ${({ theme }) => theme.breakpoints.down(TABLET)} {
+    ${bpDownSm} {
       border-left: none;
       border-radius: 0;
       border-right: none;
@@ -53,25 +54,24 @@ const ignoreSsrWarning =
  * Grid paper - typically used as a parent (grid) container.
  * The background color with the grid cap property create the grid "lines" between each grid item.
  */
-export const GridPaper = styled.div(({ theme }) => ({
-  backgroundColor: `${theme.palette.smoke.main}`,
-  borderRadius: "inherit", // Inherit parent container border radius.
-  display: "grid",
-  gap: "1px",
-  // First child - not <style/> - inherits top left and right border radius.
-  [`> *:first-child:not(style)${ignoreSsrWarning}`]: {
-    borderTopLeftRadius: "inherit",
-    borderTopRightRadius: "inherit",
-  },
-  // First child - after <style/> - inherits top left and right border radius.
-  [`> style:first-child + *${ignoreSsrWarning}`]: {
-    borderTopLeftRadius: "inherit",
-    borderTopRightRadius: "inherit",
-  },
-  // Last child inherits bottom left and right border radius.
-  // eslint-disable-next-line sort-keys -- disabling key order for readability
-  "> *:last-child": {
-    borderBottomLeftRadius: "inherit",
-    borderBottomRightRadius: "inherit",
-  },
-}));
+export const GridPaper = styled.div`
+  background-color: ${PALETTE.SMOKE_MAIN};
+  border-radius: inherit;
+  display: grid;
+  gap: 1px;
+
+  > *:first-child:not(style)${ignoreSsrWarning} {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  > style:first-child + *${ignoreSsrWarning} {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  > *:last-child {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+`;

package/src/components/common/Progress/components/CircularProgress/components/CircularProgressTrack/circularProgressTrack.styles.ts

@@ -1,33 +1,27 @@
 import styled from "@emotion/styled";
 import { CircularProgress as MCircularProgress } from "@mui/material";
-import {
-  alertLight,
-  infoLight,
-  smokeLight,
-  successLight,
-  warningLight,
-} from "../../../../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../../../../styles/common/constants/palette";
 
 export const CircularProgress = styled(MCircularProgress)`
-  color: ${smokeLight};
+  color: ${PALETTE.SMOKE_LIGHT};
   left: 0;
   position: absolute;
   top: 0;
   z-index: 0;
 
   &.MuiCircularProgress-colorAlert {
-    color: ${alertLight};
+    color: ${PALETTE.ALERT_LIGHT};
   }
 
   &.MuiCircularProgress-colorInfo {
-    color: ${infoLight};
+    color: ${PALETTE.INFO_LIGHT};
   }
 
   &.MuiCircularProgress-colorSuccess {
-    color: ${successLight};
+    color: ${PALETTE.SUCCESS_LIGHT};
   }
 
   &.MuiCircularProgress-colorWarning {
-    color: ${warningLight};
+    color: ${PALETTE.WARNING_LIGHT};
   }
 `;

package/src/components/common/Section/components/CollapsableSection/collapsableSection.styles.ts

@@ -1,15 +1,16 @@
 import styled from "@emotion/styled";
 import { ButtonBase, Typography } from "@mui/material";
-import { TABLET } from "../../../../../theme/common/breakpoints";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
+import { bpUpSm } from "../../../../../styles/common/mixins/breakpoints";
 
 export const CollapsableSection = styled.div`
-  background-color: ${({ theme }) => theme.palette.common.white};
+  background-color: ${PALETTE.COMMON_WHITE};
   display: flex;
   flex-direction: column;
   min-width: 0; /* required to ellipsis any flex child */
   padding: 4px 0;
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${bpUpSm} {
     gap: 8px;
     padding: 20px;
   }
@@ -20,7 +21,7 @@ export const SectionSummary = styled(ButtonBase)`
   justify-content: space-between;
   padding: 16px;
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${bpUpSm} {
     padding: 0;
   }
 `;
@@ -32,7 +33,7 @@ export const SectionText = styled(Typography)`
   gap: 16px;
   padding: 0 16px 16px;
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${bpUpSm} {
     padding: 0;
   }
 ` as typeof Typography;

package/src/components/common/Section/components/CollapsableSection/collapsableSection.tsx

@@ -5,7 +5,7 @@ import {
   BREAKPOINT_FN_NAME,
   useBreakpointHelper,
 } from "../../../../../hooks/useBreakpointHelper";
-import { TABLET } from "../../../../../theme/common/breakpoints";
+import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
 import { SectionTitle } from "../SectionTitle/sectionTitle";
 import {
   CollapsableSection as Section,
@@ -24,14 +24,17 @@ export const CollapsableSection = ({
   collapsable = false,
   title,
 }: CollapsableSectionProps): JSX.Element => {
-  const mobile = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, TABLET);
+  const bpDownSm = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "sm");
   const [expanded, setExpanded] = useState<boolean>(false);
   const [transitionDuration, setTransitionDuration] =
     useState<CollapseProps["timeout"]>(0);
-  const disabled = !mobile || !collapsable;
+  const disabled = !bpDownSm || !collapsable;
   const ExpandIcon = expanded ? RemoveRounded : AddRounded;
   const SectionContent = (
-    <SectionText component="div" variant="text-body-400-2lines">
+    <SectionText
+      component="div"
+      variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES}
+    >
       {children}
     </SectionText>
   );
@@ -42,14 +45,14 @@ export const CollapsableSection = ({
 
   // Toggles expanded state on change of media breakpoint.
   useEffect(() => {
-    setExpanded(!mobile);
-  }, [mobile]);
+    setExpanded(!bpDownSm);
+  }, [bpDownSm]);
 
   // Sets collapseTimeout state on change of media breakpoint.
   // Delays setting transitionDuration state for mobile breakpoint to facilitate the immediate transition from
   // tablet to mobile.
   useEffect(() => {
-    if (mobile) {
+    if (bpDownSm) {
       const duration = setTimeout(() => {
         setTransitionDuration("auto");
       }, 100);
@@ -59,7 +62,7 @@ export const CollapsableSection = ({
     } else {
       setTransitionDuration(0);
     }
-  }, [mobile]);
+  }, [bpDownSm]);
 
   return (
     <Section>

package/src/components/common/Section/components/SectionTitle/sectionTitle.tsx

@@ -1,5 +1,6 @@
 import { Typography } from "@mui/material";
 import React from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
 
 export interface SectionTitleProps {
   className?: string;
@@ -14,9 +15,9 @@ export const SectionTitle = ({
     <Typography
       align="left"
       className={className}
-      color="ink.main"
+      color={TYPOGRAPHY_PROPS.COLOR.INK_MAIN}
       component="h3"
-      variant="text-body-large-500"
+      variant={TYPOGRAPHY_PROPS.VARIANT.BODY_LARGE_500}
     >
       {title}
     </Typography>

package/src/components/common/Section/section.styles.ts

@@ -1,9 +1,9 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Typography } from "@mui/material";
-import { mediaTabletUp } from "../../../styles/common/mixins/breakpoints";
-import { white } from "../../../styles/common/mixins/colors";
-import { ThemeProps } from "../../../theme/theme";
+import { PALETTE } from "../../../styles/common/constants/palette";
+import { bpUpSm } from "../../../styles/common/mixins/breakpoints";
+import { ThemeProps } from "../../../theme/types";
 
 export const sectionMargin = css`
   margin: 20px 16px;
@@ -20,7 +20,7 @@ export const sectionMarginXsm = css`
 export const sectionPadding = ({ theme }: ThemeProps) => css`
   padding: 20px 16px;
 
-  ${mediaTabletUp({ theme })} {
+  ${bpUpSm({ theme })} {
     padding: 20px;
   }
 `;
@@ -34,7 +34,7 @@ export const Section = styled.div`
 
 // Basic section with white background - typically used as a direct descendant of GridPaper component.
 export const GridPaperSection = styled(Section)`
-  background-color: ${white};
+  background-color: ${PALETTE.COMMON_WHITE};
 `;
 
 export const SectionContent = styled.div`

package/src/components/common/Socials/socials.styles.ts

@@ -1,15 +1,15 @@
 import styled from "@emotion/styled";
 import { IconButton as MIconButton } from "@mui/material";
-import { inkLight, smokeLight } from "../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../styles/common/constants/palette";
 
 export const Socials = styled.div`
   display: flex;
 `;
 
 export const IconButton = styled(MIconButton)`
-  color: ${inkLight};
+  color: ${PALETTE.INK_LIGHT};
 
   &:hover {
-    background-color: ${smokeLight};
+    background-color: ${PALETTE.SMOKE_LIGHT};
   }
 ` as typeof MIconButton;

package/src/components/common/StatusIcon/statusIcon.styles.ts

@@ -1,5 +1,6 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
+import { PALETTE } from "../../../styles/common/constants/palette";
 import { PRIORITY, Priority } from "./statusIcon";
 
 interface Props {
@@ -15,36 +16,36 @@ export const StatusCircle = styled.div<Props>`
   width: 72px;
 
   // Normal priority.
-  ${({ priority, theme }) =>
+  ${({ priority }) =>
     priority === PRIORITY.NORMAL &&
     css`
-      background-color: ${theme.palette.info.lightest};
-      color: ${theme.palette.info.main};
+      background-color: ${PALETTE.INFO_LIGHTEST};
+      color: ${PALETTE.INFO_MAIN};
     `};
 
   // Low priority.
-  ${({ priority, theme }) =>
+  ${({ priority }) =>
     priority === PRIORITY.LOW &&
     css`
-      background-color: ${theme.palette.warning.lightest};
-      color: ${theme.palette.warning.main};
+      background-color: ${PALETTE.WARNING_LIGHTEST};
+      color: ${PALETTE.WARNING_MAIN};
     `};
 
   // Medium priority.
-  ${({ priority, theme }) =>
+  ${({ priority }) =>
     priority === PRIORITY.MEDIUM &&
     css`
-      background-color: ${theme.palette.warning.light};
+      background-color: ${PALETTE.WARNING_LIGHT};
       border: 3px solid white;
-      color: ${theme.palette.warning.main};
+      color: ${PALETTE.WARNING_MAIN};
     `};
 
   // High priority.
-  ${({ priority, theme }) =>
+  ${({ priority }) =>
     priority === PRIORITY.HIGH &&
     css`
-      background-color: ${theme.palette.alert.light};
+      background-color: ${PALETTE.ALERT_LIGHT};
       border: 3px solid white;
-      color: ${theme.palette.alert.main};
+      color: ${PALETTE.ALERT_MAIN};
     `};
 `;

package/src/components/common/Tag/tag.styles.ts

@@ -1,13 +1,14 @@
 import styled from "@emotion/styled";
+import { PALETTE } from "../../../styles/common/constants/palette";
 import { Tag } from "./tag";
 
 export const TagDefault = styled(Tag)`
-  background-color: ${({ theme }) => theme.palette.smoke.main};
+  background-color: ${PALETTE.SMOKE_MAIN};
   border-radius: 4px;
   padding: 2px 6px;
 `;
 
 export const TagWarning = styled(TagDefault)`
-  background-color: ${({ theme }) => theme.palette.warning.light};
-  color: ${({ theme }) => theme.palette.warning.main};
+  background-color: ${PALETTE.WARNING_LIGHT};
+  color: ${PALETTE.WARNING_MAIN};
 `;

package/src/components/common/Tag/tag.tsx

@@ -1,15 +1,18 @@
-import { Typography } from "@mui/material";
-import React, { ReactNode } from "react";
+import { Typography, TypographyProps } from "@mui/material";
+import React from "react";
+import { TYPOGRAPHY_PROPS } from "../../../styles/common/mui/typography";
+import { BaseComponentProps } from "../../types";
 
-export interface TagProps {
-  children: ReactNode;
-  className?: string;
-}
-
-export const Tag = ({ children, className }: TagProps): JSX.Element => {
+export const Tag = ({
+  className,
+  ...props
+}: BaseComponentProps & TypographyProps): JSX.Element => {
   return (
-    <Typography className={className} component="span" variant="text-body-500">
-      {children}
-    </Typography>
+    <Typography
+      className={className}
+      component="span"
+      variant={TYPOGRAPHY_PROPS.VARIANT.BODY_500}
+      {...props}
+    />
   );
 };

package/src/components/common/Title/title.tsx

@@ -17,7 +17,7 @@ export const Title = ({
       className={className}
       color={TYPOGRAPHY_PROPS.COLOR.INK_MAIN}
       component="h1"
-      variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_LARGE}
+      variant={TYPOGRAPHY_PROPS.VARIANT.HEADING_LARGE}
       {...props}
     >
       {children}

package/src/components/common/Typography/TypographyWordBreak/TypographyWordBreak.tsx

@@ -1,5 +1,6 @@
 import { Typography } from "@mui/material";
 import React, { ReactNode } from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 
 export interface TypographyWordBreakProps {
   children: ReactNode;
@@ -13,7 +14,7 @@ export const TypographyWordBreak = ({
     <Typography
       component="span"
       sx={{ wordBreak: "break-word" }}
-      variant="inherit"
+      variant={TYPOGRAPHY_PROPS.VARIANT.INHERIT}
       {...props}
     >
       {children}

package/src/styles/common/constants/app.ts

@@ -0,0 +1,3 @@
+export const APP = {
+  FONT_FAMILY: `var(--app-fontFamily)`,
+} as const;

package/src/styles/common/constants/colorMixes.ts

@@ -17,6 +17,7 @@ export const COLOR_MIXES = {
   INK_MAIN_64: `color-mix(in srgb, ${PALETTE.INK_MAIN} 64%, transparent)`,
   INK_MAIN_80: `color-mix(in srgb, ${PALETTE.INK_MAIN} 80%, transparent)`,
   PRIMARY_DARK_08: `color-mix(in srgb, ${PALETTE.PRIMARY_DARK} 8%, transparent)`,
+  PRIMARY_MAIN_90: `color-mix(in srgb, ${PALETTE.PRIMARY_MAIN} 90%, transparent)`,
   SUCCESS_MAIN_32: `color-mix(in srgb, ${PALETTE.SUCCESS_MAIN} 32%, transparent)`,
   WARNING_MAIN_32: `color-mix(in srgb, ${PALETTE.WARNING_MAIN} 32%, transparent)`,
 };

package/src/styles/common/constants/font.ts

@@ -0,0 +1,18 @@
+export const FONT = {
+  BODY_400: `var(--font-body-400)`,
+  BODY_400_2_LINES: `var(--font-body-400-2lines)`,
+  BODY_500: `var(--font-body-500)`,
+  BODY_LARGE_400: `var(--font-body-large-400)`,
+  BODY_LARGE_400_2_LINES: `var(--font-body-large-400-2lines)`,
+  BODY_LARGE_500: `var(--font-body-large-500)`,
+  BODY_SMALL_400: `var(--font-body-small-400)`,
+  BODY_SMALL_400_2_LINES: `var(--font-body-small-400-2lines)`,
+  BODY_SMALL_500: `var(--font-body-small-500)`,
+  HEADING: `var(--font-heading)`,
+  HEADING_LARGE: `var(--font-heading-large)`,
+  HEADING_SMALL: `var(--font-heading-small)`,
+  HEADING_XLARGE: `var(--font-heading-xlarge)`,
+  HEADING_XSMALL: `var(--font-heading-xsmall)`,
+  INHERIT: `var(--font-inherit)`,
+  UPPERCASE_500: `var(--font-uppercase-500)`,
+} as const;

package/src/styles/common/constants/palette.ts

@@ -1,47 +1,47 @@
 export const PALETTE = {
-  ALERT_LIGHT: `var(--mui-palette-alert-light)`,
-  ALERT_LIGHTEST: `var(--mui-palette-alert-lightest)`,
-  ALERT_MAIN: `var(--mui-palette-alert-main)`,
-  BACKGROUND_DEFAULT: `var(--mui-palette-background-default)`,
-  BACKGROUND_PAPER: `var(--mui-palette-background-paper)`,
-  COMMON_BACKGROUND: `var(--mui-palette-common-background)`,
-  COMMON_BLACK: `var(--mui-palette-common-black)`,
-  COMMON_WHITE: `var(--mui-palette-common-white)`,
-  ERROR_CONTRAST_TEXT: `var(--mui-palette-error-contrastText)`,
-  ERROR_DARK: `var(--mui-palette-error-dark)`,
-  ERROR_LIGHT: `var(--mui-palette-error-light)`,
-  ERROR_MAIN: `var(--mui-palette-error-main)`,
-  INFO_CONTRAST_TEXT: `var(--mui-palette-info-contrastText)`,
-  INFO_DARK: `var(--mui-palette-info-dark)`,
-  INFO_LIGHT: `var(--mui-palette-info-light)`,
-  INFO_LIGHTEST: `var(--mui-palette-info-lightest)`,
-  INFO_MAIN: `var(--mui-palette-info-main)`,
-  INK_LIGHT: `var(--mui-palette-ink-light)`,
-  INK_MAIN: `var(--mui-palette-ink-main)`,
-  PRIMARY_CONTRAST_TEXT: `var(--mui-palette-primary-contrastText)`,
-  PRIMARY_DARK: `var(--mui-palette-primary-dark)`,
-  PRIMARY_LIGHT: `var(--mui-palette-primary-light)`,
-  PRIMARY_LIGHTEST: `var(--mui-palette-primary-lightest)`,
-  PRIMARY_MAIN: `var(--mui-palette-primary-main)`,
-  SECONDARY_CONTRAST_TEXT: `var(--mui-palette-secondary-contrastText)`,
-  SECONDARY_DARK: `var(--mui-palette-secondary-dark)`,
-  SECONDARY_LIGHT: `var(--mui-palette-secondary-light)`,
-  SECONDARY_MAIN: `var(--mui-palette-secondary-main)`,
-  SMOKE_DARK: `var(--mui-palette-smoke-dark)`,
-  SMOKE_LIGHT: `var(--mui-palette-smoke-light)`,
-  SMOKE_LIGHTEST: `var(--mui-palette-smoke-lightest)`,
-  SMOKE_MAIN: `var(--mui-palette-smoke-main)`,
-  SUCCESS_CONTRAST_TEXT: `var(--mui-palette-success-contrastText)`,
-  SUCCESS_DARK: `var(--mui-palette-success-dark)`,
-  SUCCESS_LIGHT: `var(--mui-palette-success-light)`,
-  SUCCESS_LIGHTEST: `var(--mui-palette-success-lightest)`,
-  SUCCESS_MAIN: `var(--mui-palette-success-main)`,
-  TEXT_DISABLED: `var(--mui-palette-text-disabled)`,
-  TEXT_PRIMARY: `var(--mui-palette-text-primary)`,
-  TEXT_SECONDARY: `var(--mui-palette-text-secondary)`,
-  WARNING_CONTRAST_TEXT: `var(--mui-palette-warning-contrastText)`,
-  WARNING_DARK: `var(--mui-palette-warning-dark)`,
-  WARNING_LIGHT: `var(--mui-palette-warning-light)`,
-  WARNING_LIGHTEST: `var(--mui-palette-warning-lightest)`,
-  WARNING_MAIN: `var(--mui-palette-warning-main)`,
+  ALERT_LIGHT: `var(--palette-alert-light)`,
+  ALERT_LIGHTEST: `var(--palette-alert-lightest)`,
+  ALERT_MAIN: `var(--palette-alert-main)`,
+  BACKGROUND_DEFAULT: `var(--palette-background-default)`,
+  BACKGROUND_PAPER: `var(--palette-background-paper)`,
+  COMMON_BACKGROUND: `var(--palette-common-background)`,
+  COMMON_BLACK: `var(--palette-common-black)`,
+  COMMON_WHITE: `var(--palette-common-white)`,
+  ERROR_CONTRAST_TEXT: `var(--palette-error-contrastText)`,
+  ERROR_DARK: `var(--palette-error-dark)`,
+  ERROR_LIGHT: `var(--palette-error-light)`,
+  ERROR_MAIN: `var(--palette-error-main)`,
+  INFO_CONTRAST_TEXT: `var(--palette-info-contrastText)`,
+  INFO_DARK: `var(--palette-info-dark)`,
+  INFO_LIGHT: `var(--palette-info-light)`,
+  INFO_LIGHTEST: `var(--palette-info-lightest)`,
+  INFO_MAIN: `var(--palette-info-main)`,
+  INK_LIGHT: `var(--palette-ink-light)`,
+  INK_MAIN: `var(--palette-ink-main)`,
+  PRIMARY_CONTRAST_TEXT: `var(--palette-primary-contrastText)`,
+  PRIMARY_DARK: `var(--palette-primary-dark)`,
+  PRIMARY_LIGHT: `var(--palette-primary-light)`,
+  PRIMARY_LIGHTEST: `var(--palette-primary-lightest)`,
+  PRIMARY_MAIN: `var(--palette-primary-main)`,
+  SECONDARY_CONTRAST_TEXT: `var(--palette-secondary-contrastText)`,
+  SECONDARY_DARK: `var(--palette-secondary-dark)`,
+  SECONDARY_LIGHT: `var(--palette-secondary-light)`,
+  SECONDARY_MAIN: `var(--palette-secondary-main)`,
+  SMOKE_DARK: `var(--palette-smoke-dark)`,
+  SMOKE_LIGHT: `var(--palette-smoke-light)`,
+  SMOKE_LIGHTEST: `var(--palette-smoke-lightest)`,
+  SMOKE_MAIN: `var(--palette-smoke-main)`,
+  SUCCESS_CONTRAST_TEXT: `var(--palette-success-contrastText)`,
+  SUCCESS_DARK: `var(--palette-success-dark)`,
+  SUCCESS_LIGHT: `var(--palette-success-light)`,
+  SUCCESS_LIGHTEST: `var(--palette-success-lightest)`,
+  SUCCESS_MAIN: `var(--palette-success-main)`,
+  TEXT_DISABLED: `var(--palette-text-disabled)`,
+  TEXT_PRIMARY: `var(--palette-text-primary)`,
+  TEXT_SECONDARY: `var(--palette-text-secondary)`,
+  WARNING_CONTRAST_TEXT: `var(--palette-warning-contrastText)`,
+  WARNING_DARK: `var(--palette-warning-dark)`,
+  WARNING_LIGHT: `var(--palette-warning-light)`,
+  WARNING_LIGHTEST: `var(--palette-warning-lightest)`,
+  WARNING_MAIN: `var(--palette-warning-main)`,
 } as const;

package/src/styles/common/constants/shadows.ts

@@ -1,5 +1,5 @@
 export const SHADOWS = {
-  "00": `var(--mui-shadows-0)`,
-  "01": `var(--mui-shadows-1)`,
-  "02": `var(--mui-shadows-2)`,
+  "00": `var(--shadows-0)`,
+  "01": `var(--shadows-1)`,
+  "02": `var(--shadows-2)`,
 };