@databiosphere/findable-ui 41.2.0 → 42.0.0

package/lib/components/Layout/components/Footer/components/VersionInfo/components/Tooltip/components/Title/title.js

@@ -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 { getGitHash, getVersion } from "../../../../utils";
 import { LINK_PROPS } from "./constants";
@@ -11,7 +11,7 @@ export const Title = ({ versionInfo, }) => {
     if (!versionInfo)
         return null;
     const { buildDate, catalog, gitHash, version } = versionInfo;
-    return (React.createElement(Typography, { component: "div", variant: TEXT_BODY_SMALL_400_2_LINES },
+    return (React.createElement(Typography, { component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400_2_LINES },
         buildDate && (React.createElement("div", null,
             React.createElement("span", null, "Build Date: "),
             React.createElement("span", null, buildDate))),

package/lib/components/Layout/components/Footer/components/VersionInfo/versionInfo.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledChip: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material").ChipSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "label" | "style" | "size" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "variant" | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled" | "slots" | "slotProps"> & {
+}, "label" | "style" | "size" | "className" | "classes" | "children" | "disabled" | "sx" | "tabIndex" | "color" | "variant" | "slots" | "slotProps" | "icon" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Footer/components/VersionInfo/versionInfo.styles.js

@@ -1,10 +1,10 @@
 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/lib/components/Layout/components/Footer/footer.styles.js

@@ -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";
 export const AppBar = styled(MAppBar) `
@@ -18,7 +18,7 @@ export const AppBar = styled(MAppBar) `
     padding: 0 16px;
   }
 
-  ${mediaTabletUp} {
+  ${bpUpSm} {
     padding: 0;
 
     .MuiToolbar-root {
@@ -35,21 +35,21 @@ 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/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.styles.d.ts

@@ -3,21 +3,21 @@ export declare const AuthenticationMenu: import("@emotion/styled").StyledCompone
 }, {}, {}>;
 export declare const UserIcon: import("@emotion/styled").StyledComponent<import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "style" | "size" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "action" | "loading" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "loadingIndicator" | "edge"> & {
+}, "style" | "size" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableFocusRipple" | "edge" | "loading" | "loadingIndicator"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const UserSummary: import("@emotion/styled").StyledComponent<import("@mui/material").MenuItemOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     ref?: ((instance: HTMLLIElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "style" | "className" | "classes" | "children" | "sx" | "tabIndex" | "autoFocus" | "disabled" | "action" | "selected" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "dense" | "disableGutters" | "divider"> & {
+}, "style" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "autoFocus" | "selected" | "disableGutters" | "dense" | "divider"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const UserNames: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "p" | "style" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "className" | "classes" | "children" | "color" | "fontSize" | "sx" | "display" | "fontFamily" | "fontStyle" | "fontWeight" | "letterSpacing" | "overflow" | "visibility" | "align" | "bgcolor" | "border" | "boxShadow" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "padding" | "paddingBlock" | "paddingInline" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+}, "p" | "style" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "className" | "classes" | "children" | "sx" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "align" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const StyledAvatar: import("@emotion/styled").StyledComponent<import("@mui/material").AvatarOwnProps & import("@mui/material").AvatarSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "style" | "className" | "classes" | "children" | "sx" | "alt" | "src" | "sizes" | "srcSet" | "variant" | "slots" | "slotProps" | "imgProps"> & {
+}, "style" | "className" | "classes" | "children" | "sx" | "alt" | "src" | "variant" | "slots" | "slotProps" | "imgProps" | "sizes" | "srcSet"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.styles.js

@@ -1,5 +1,6 @@
 import styled from "@emotion/styled";
 import { Avatar, IconButton as MIconButton, Menu as MMenu, MenuItem, Typography, } from "@mui/material";
+import { PALETTE } from "../../../../../../../../../../../../styles/common/constants/palette";
 export const AuthenticationMenu = styled(MMenu) `
   margin: 4px 0;
 `;
@@ -9,7 +10,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/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/Button/button.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "style" | "size" | "href" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "action" | "loading" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loadingIndicator" | "loadingPosition" | "startIcon" | "variant"> & {
+}, "style" | "size" | "href" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableFocusRipple" | "loading" | "loadingIndicator" | "variant" | "disableElevation" | "endIcon" | "fullWidth" | "loadingPosition" | "startIcon"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Content/components/Navigation/navigation.styles.js

@@ -1,5 +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) `
   display: flex;
@@ -11,7 +11,7 @@ export const Navigation = styled(DXNavigation) `
 
   .MuiButton-activeNav,
   .MuiButton-nav {
-    ${textBodyLarge500};
+    font: ${FONT.BODY_LARGE_500};
     justify-content: space-between;
     padding: 12px 24px;
 
@@ -25,7 +25,7 @@ export const DrawerNavigation = styled(Navigation) `
 
   .MuiButton-activeNav,
   .MuiButton-nav {
-    ${textBody500};
+    font: ${FONT.BODY_500};
     padding: 14px 24px;
   }
 `;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/Button/button.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "style" | "size" | "href" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "action" | "loading" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loadingIndicator" | "loadingPosition" | "startIcon" | "variant"> & {
+}, "style" | "size" | "href" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableFocusRipple" | "loading" | "loadingIndicator" | "variant" | "disableElevation" | "endIcon" | "fullWidth" | "loadingPosition" | "startIcon"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/searchBar.styles.js

@@ -1,6 +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";
 export const SearchBar = styled(Dialog, {
     shouldForwardProp: (prop) => prop !== "yOffset",
@@ -21,15 +21,15 @@ export const SearchForm = styled.form `
   padding: 12px 16px;
 `;
 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};
 `;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/navigationDrawer.styles.js

@@ -1,19 +1,20 @@
 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/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.styles.d.ts

@@ -9,7 +9,7 @@ export declare const Button: import("@emotion/styled").StyledComponent<Omit<impo
 } & Props, {}, {}>;
 export declare const StyledMenuItem: import("@emotion/styled").StyledComponent<import("@mui/material").MenuItemOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     ref?: ((instance: HTMLLIElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "style" | "className" | "classes" | "children" | "sx" | "tabIndex" | "autoFocus" | "disabled" | "action" | "selected" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "dense" | "disableGutters" | "divider"> & {
+}, "style" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "autoFocus" | "selected" | "disableGutters" | "dense" | "divider"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export {};

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.styles.js

@@ -1,13 +1,13 @@
 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";
 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;
@@ -40,18 +40,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};
         }
       }
 
@@ -77,9 +77,9 @@ export const Button = styled(DXButton, {
     shouldForwardProp: (prop) => prop !== "isActive",
 }) `
   // Button is "active" i.e. menu is open.
-  ${(props) => props.isActive &&
+  ${({ isActive }) => isActive &&
     css `
-      background-color: ${smokeLight(props)};
+      background-color: ${PALETTE.SMOKE_LIGHT};
     `};
 `;
 export const StyledMenuItem = styled(MMenuItem) `

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenuItems/navigationMenuItems.js

@@ -1,7 +1,7 @@
 import { Divider, ListItemIcon, ListItemText, Link as MLink, MenuItem as MMenuItem, } from "@mui/material";
 import Link from "next/link";
 import React, { Fragment } 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, } from "../../../../../../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../../../../../../Links/common/utils";
 import { isNavigationLinkSelected } from "../../common/utils";
@@ -18,11 +18,11 @@ export const NavigationMenuItems = ({ closeMenu, menuItems, pathname, }) => {
                 React.createElement(ListItemText, { primary: label, 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,
                     } })),
             divider && React.createElement(Divider, null)));
     })));

package/lib/components/Layout/components/Header/components/Content/components/Navigation/navigation.styles.js

@@ -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";
 export const Navigation = styled("div") `
   display: flex;
   flex: unset;
@@ -16,7 +16,7 @@ export const Navigation = styled("div") `
 
   .MuiButton-activeNav,
   .MuiButton-nav {
-    ${textBody500};
+    font: ${FONT.BODY_500};
     padding: 6px 12px;
 
     .MuiButton-endIcon {

package/lib/components/Layout/components/Header/components/Content/components/Slogan/slogan.js

@@ -1,7 +1,7 @@
 import { Typography } from "@mui/material";
 import React, { forwardRef } 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 const Slogan = forwardRef(function Slogan({ className, slogan, style }, ref) {
-    return (React.createElement(CatchPhrase, { ref: ref, style: style }, typeof slogan === "string" ? (React.createElement(Typography, { className: className, variant: TEXT_BODY_400 }, slogan)) : (slogan)));
+    return (React.createElement(CatchPhrase, { ref: ref, style: style }, typeof slogan === "string" ? (React.createElement(Typography, { className: className, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, slogan)) : (slogan)));
 });

package/lib/components/Layout/components/Header/components/Content/components/Slogan/slogan.styles.d.ts

@@ -4,6 +4,6 @@ export declare const Slogan: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Divider: import("@emotion/styled").StyledComponent<import("@mui/material").DividerOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & {
     ref?: ((instance: HTMLHRElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHRElement> | null | undefined;
-}, "style" | "className" | "classes" | "children" | "sx" | "orientation" | "textAlign" | "variant" | "absolute" | "light" | "flexItem"> & {
+}, "style" | "className" | "classes" | "children" | "sx" | "textAlign" | "variant" | "absolute" | "orientation" | "flexItem" | "light"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Slogan/slogan.styles.js

@@ -1,18 +1,18 @@
 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/lib/components/Layout/components/Header/header.styles.js

@@ -1,13 +1,13 @@
 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.
 // See https://github.com/emotion-js/emotion/releases/tag/%40emotion%2Fcache%4011.10.2.
 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/lib/components/Layout/components/Nav/components/NavBarHero/navBarHero.styles.js

@@ -1,4 +1,5 @@
 import styled from "@emotion/styled";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
 export const NavBarHero = styled.div `
   display: grid;
   gap: 8px 0;
@@ -15,7 +16,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/lib/components/Layout/components/Nav/nav.styles.d.ts

@@ -4,6 +4,6 @@ export declare const NavBar: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const List: import("@emotion/styled").StyledComponent<import("@mui/material").ListOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
     ref?: ((instance: HTMLUListElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLUListElement> | null | undefined;
-}, "style" | "className" | "classes" | "children" | "sx" | "dense" | "subheader" | "disablePadding"> & {
+}, "style" | "className" | "classes" | "children" | "sx" | "dense" | "disablePadding" | "subheader"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Nav/nav.styles.js

@@ -1,6 +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 {
     margin: 20px 0;
@@ -24,24 +25,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/lib/components/Layout/components/Outline/components/ContentsTab/contentsTab.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledTab: import("@emotion/styled").StyledComponent<import("@mui/material").TabOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "label" | "style" | "value" | "className" | "classes" | "children" | "sx" | "tabIndex" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "icon" | "wrapped" | "iconPosition"> & {
+}, "label" | "style" | "value" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "icon" | "iconPosition" | "wrapped"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Outline/components/ContentsTab/contentsTab.styles.js

@@ -1,16 +1,17 @@
 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/lib/components/Layout/components/Outline/outline.styles.d.ts

@@ -5,12 +5,12 @@ interface Props extends TabProps {
 export declare const tab: import("@emotion/react").SerializedStyles;
 export declare const StyledTabs: import("@emotion/styled").StyledComponent<import("@mui/material").TabsOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "style" | "value" | "className" | "classes" | "children" | "sx" | "orientation" | "aria-label" | "aria-labelledby" | "onChange" | "action" | "variant" | "slots" | "slotProps" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & {
+}, "style" | "value" | "className" | "classes" | "action" | "children" | "sx" | "aria-label" | "aria-labelledby" | "onChange" | "variant" | "slots" | "slotProps" | "orientation" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const StyledTab: import("@emotion/styled").StyledComponent<import("@mui/material").TabOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "label" | "style" | "value" | "className" | "classes" | "children" | "sx" | "tabIndex" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "icon" | "wrapped" | "iconPosition"> & {
+}, "label" | "style" | "value" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "icon" | "iconPosition" | "wrapped"> & {
     theme?: import("@emotion/react").Theme;
 } & Props, {}, {}>;
 export {};

package/lib/components/Layout/components/Outline/outline.styles.js

@@ -1,8 +1,8 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Tab as MTab, Tabs as MTabs } 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";
 export const tab = css `
   align-items: flex-start;
   margin: 0;
@@ -16,7 +16,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;
@@ -39,16 +39,16 @@ export const StyledTab = styled(MTab, {
     shouldForwardProp: (prop) => prop !== "depth",
 }) `
   ${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;
     `};