@databiosphere/findable-ui 41.1.0 → 42.0.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "41.1.0"
+  ".": "42.0.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Changelog
 
+## [42.0.0](https://github.com/DataBiosphere/findable-ui/compare/v41.2.0...v42.0.0) (2025-08-12)
+
+
+### ⚠ BREAKING CHANGES
+
+* refactor breakpoints.ts - limit public surface area ([#428](https://github.com/DataBiosphere/findable-ui/issues/428)) (#616)
+* refactor components.ts - limit exposure of each component to the theme ([#427](https://github.com/DataBiosphere/findable-ui/issues/427)) (#615)
+* refactor theme palette to reference css var ([#426](https://github.com/DataBiosphere/findable-ui/issues/426)) (#614)
+* refactor palette.ts - limit exposure of each palette to the theme ([#425](https://github.com/DataBiosphere/findable-ui/issues/425)) (#613)
+* update theme with css variable prefix value ([#608](https://github.com/DataBiosphere/findable-ui/issues/608)) (#612)
+* refactor typography.ts - limit public surface area ([#422](https://github.com/DataBiosphere/findable-ui/issues/422)) (#609)
+
+### Features
+
+* refactor typography.ts - limit public surface area ([#422](https://github.com/DataBiosphere/findable-ui/issues/422)) ([#609](https://github.com/DataBiosphere/findable-ui/issues/609)) ([f0d3386](https://github.com/DataBiosphere/findable-ui/commit/f0d3386957e43202435af08aafe85e9005d1d1c6))
+
+
+### Code Refactoring
+
+* refactor breakpoints.ts - limit public surface area ([#428](https://github.com/DataBiosphere/findable-ui/issues/428)) ([#616](https://github.com/DataBiosphere/findable-ui/issues/616)) ([c64b874](https://github.com/DataBiosphere/findable-ui/commit/c64b8744497b3ae1b77c12a392ad8f25720eaaa5))
+* refactor components.ts - limit exposure of each component to the theme ([#427](https://github.com/DataBiosphere/findable-ui/issues/427)) ([#615](https://github.com/DataBiosphere/findable-ui/issues/615)) ([d26cfb2](https://github.com/DataBiosphere/findable-ui/commit/d26cfb255e2864724fbf980b194fa2e03df8c1d1))
+* refactor palette.ts - limit exposure of each palette to the theme ([#425](https://github.com/DataBiosphere/findable-ui/issues/425)) ([#613](https://github.com/DataBiosphere/findable-ui/issues/613)) ([103ad30](https://github.com/DataBiosphere/findable-ui/commit/103ad305b8bc2734d5d3e239e0f0eac527247cb7))
+* refactor theme palette to reference css var ([#426](https://github.com/DataBiosphere/findable-ui/issues/426)) ([#614](https://github.com/DataBiosphere/findable-ui/issues/614)) ([2517349](https://github.com/DataBiosphere/findable-ui/commit/2517349e47cee9616b9d80964586959c9a6eb1c6))
+* update theme with css variable prefix value ([#608](https://github.com/DataBiosphere/findable-ui/issues/608)) ([#612](https://github.com/DataBiosphere/findable-ui/issues/612)) ([1c25d59](https://github.com/DataBiosphere/findable-ui/commit/1c25d59a6749a6f35ce4ff540e2fe0642f2d984c))
+
+## [41.2.0](https://github.com/DataBiosphere/findable-ui/compare/v41.1.0...v41.2.0) (2025-08-01)
+
+
+### Features
+
+* chart view - show more link for long tail charts ([#446](https://github.com/DataBiosphere/findable-ui/issues/446)) ([#606](https://github.com/DataBiosphere/findable-ui/issues/606)) ([fb035d8](https://github.com/DataBiosphere/findable-ui/commit/fb035d8bbb5ac47ef656ef7403ac271ffdb7e0af))
+
 ## [41.1.0](https://github.com/DataBiosphere/findable-ui/compare/v41.0.0...v41.1.0) (2025-07-31)
 
 

package/lib/components/DataDictionary/components/Description/description.styles.d.ts

@@ -1,6 +1,6 @@
 export declare const StyledFluidPaper: import("@emotion/styled").StyledComponent<import("../../../types").BaseComponentProps & import("@mui/material").PaperOwnProps & 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" | "elevation" | "square" | "variant"> & {
+}, "style" | "className" | "classes" | "children" | "sx" | "square" | "elevation" | "variant"> & {
     component?: React.ElementType;
 } & {
     theme?: import("@emotion/react").Theme;

package/lib/components/DataDictionary/components/Description/description.styles.js

@@ -1,13 +1,13 @@
 import styled from "@emotion/styled";
+import { FONT } from "../../../../styles/common/constants/font";
 import { PALETTE } from "../../../../styles/common/constants/palette";
-import { mediaTabletDown, mediaTabletUp, } from "../../../../styles/common/mixins/breakpoints";
-import { textHeadingSmall } from "../../../../styles/common/mixins/fonts";
+import { bpDownSm, bpUpSm } from "../../../../styles/common/mixins/breakpoints";
 import { FluidPaper } from "../../../common/Paper/components/FluidPaper/fluidPaper";
 import { MarkdownRenderer } from "../../../MarkdownRenderer/markdownRenderer";
 export const StyledFluidPaper = styled(FluidPaper) `
   padding: 20px;
 
-  ${mediaTabletDown} {
+  ${bpDownSm} {
     padding: 20px 16px;
   }
 `;
@@ -29,11 +29,11 @@ export const StyledMarkdownRenderer = styled(MarkdownRenderer) `
   }
 
   h2 {
-    ${textHeadingSmall};
+    font: ${FONT.HEADING_SMALL};
     font-size: 18px;
     line-height: 26px;
 
-    ${mediaTabletUp} {
+    ${bpUpSm} {
       font-size: 18px;
       line-height: 26px;
     }

package/lib/components/DataDictionary/components/Entity/entity.js

@@ -16,10 +16,10 @@ export const Entity = ({ row, table, }) => {
         return null;
     return (React.createElement(Grid, { ...GRID_PROPS, rowGap: 4 },
         React.createElement(Grid, { ...GRID_PROPS, rowGap: 1 },
-            React.createElement(StyledTypography, { component: "h3", id: classKey, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL },
+            React.createElement(StyledTypography, { component: "h3", id: classKey, variant: TYPOGRAPHY_PROPS.VARIANT.HEADING_SMALL },
                 cls.title,
                 " ",
                 React.createElement(AnchorLink, { anchorLink: classKey })),
-            cls.description && (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES }, cls.description))),
+            cls.description && (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES }, cls.description))),
         React.createElement(Table, { row: row, table: table })));
 };

package/lib/components/DataDictionary/components/Entity/entity.styles.js

@@ -1,12 +1,12 @@
 import styled from "@emotion/styled";
 import { Typography } from "@mui/material";
-import { mediaTabletDown } from "../../../../styles/common/mixins/breakpoints";
+import { bpDownSm } from "../../../../styles/common/mixins/breakpoints";
 export const StyledTypography = styled(Typography) `
   &:hover a {
     opacity: 1;
   }
 
-  ${mediaTabletDown} {
+  ${bpDownSm} {
     margin: 0 16px;
   }
 `;

package/lib/components/DataDictionary/components/Filters/components/ColumnFilterTags/columnFilterTags.styles.d.ts

@@ -2,6 +2,6 @@ export declare const StyledGrid: import("@emotion/styled").StyledComponent<impor
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
 } & import("@mui/system").SystemProps<import("@mui/material").Theme> & 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;
-}, "sx" | ("p" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "color" | "fontSize" | "display" | "fontFamily" | "fontStyle" | "fontWeight" | "letterSpacing" | "overflow" | "visibility" | "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") | keyof import("@mui/material").GridBaseProps> & {
+}, "sx" | ("p" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "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") | keyof import("@mui/material").GridBaseProps> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/DataDictionary/components/Filters/filters.styles.d.ts

@@ -2,6 +2,6 @@ export declare const StyledGrid: import("@emotion/styled").StyledComponent<impor
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
 } & import("@mui/system").SystemProps<import("@mui/material").Theme> & 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;
-}, "sx" | ("p" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "color" | "fontSize" | "display" | "fontFamily" | "fontStyle" | "fontWeight" | "letterSpacing" | "overflow" | "visibility" | "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") | keyof import("@mui/material").GridBaseProps> & {
+}, "sx" | ("p" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "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") | keyof import("@mui/material").GridBaseProps> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.styles.js

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { PALETTE } from "../../../../../../styles/common/constants/palette";
-import { bpDown1024, mediaTabletDown, } from "../../../../../../styles/common/mixins/breakpoints";
+import { bpDown1024, bpDownSm, } from "../../../../../../styles/common/mixins/breakpoints";
 import { LAYOUT_SPACING } from "../../constants";
 const PB = LAYOUT_SPACING.FILTERS_PADDING_BOTTOM; /* bottom padding */
 const PT = LAYOUT_SPACING.FILTERS_PADDING_TOP; /* top padding */
@@ -25,7 +25,7 @@ export const Layout = styled("div") `
     position: relative;
   }
 
-  ${mediaTabletDown} {
+  ${bpDownSm} {
     margin: 0 16px;
   }
 `;

package/lib/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.styles.js

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { bpDown1024, mediaTabletDown, } from "../../../../../../styles/common/mixins/breakpoints";
+import { bpDown1024, bpDownSm, } from "../../../../../../styles/common/mixins/breakpoints";
 export const Layout = styled("div") `
   grid-column: 1 / -1;
   grid-row: 1;
@@ -15,7 +15,7 @@ export const Layout = styled("div") `
     position: relative;
   }
 
-  ${mediaTabletDown} {
+  ${bpDownSm} {
     margin: 0 16px;
   }
 `;

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

@@ -1,17 +1,17 @@
 import styled from "@emotion/styled";
-import { inkLight, inkMain, smokeDark, } from "../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 import { Outline } from "../../../Layout/components/Outline/outline";
 export const StyledOutline = styled(Outline) `
   &.MuiTabs-root {
     .MuiTab-root {
-      color: ${inkLight};
+      color: ${PALETTE.INK_LIGHT};
 
       &.Mui-selected {
-        color: ${inkMain};
+        color: ${PALETTE.INK_MAIN};
       }
 
       &.Mui-disabled {
-        color: ${smokeDark};
+        color: ${PALETTE.SMOKE_DARK};
         opacity: 1;
       }
     }

package/lib/components/DataDictionary/components/Table/table.styles.d.ts

@@ -1,6 +1,6 @@
 export declare const StyledFluidPaper: import("@emotion/styled").StyledComponent<import("../../../types").BaseComponentProps & import("@mui/material").PaperOwnProps & 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" | "elevation" | "square" | "variant"> & {
+}, "style" | "className" | "classes" | "children" | "sx" | "square" | "elevation" | "variant"> & {
     component?: React.ElementType;
 } & {
     theme?: import("@emotion/react").Theme;

package/lib/components/DataDictionary/components/Title/title.styles.d.ts

@@ -1,6 +1,6 @@
 export declare const StyledTitle: 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"> & {
     component?: React.ElementType;
 } & {
     theme?: import("@emotion/react").Theme;

package/lib/components/DataDictionary/components/Tooltip/components/Title/constants.d.ts

@@ -1,3 +1,2 @@
-import { StackProps, TypographyProps } from "@mui/material";
+import { StackProps } from "@mui/material";
 export declare const STACK_PROPS: StackProps;
-export declare const TYPOGRAPHY_PROPS: TypographyProps;

package/lib/components/DataDictionary/components/Tooltip/components/Title/constants.js

@@ -2,7 +2,3 @@ export const STACK_PROPS = {
     spacing: 2,
     useFlexGap: true,
 };
-export const TYPOGRAPHY_PROPS = {
-    color: "ink.light",
-    component: "div",
-};

package/lib/components/DataDictionary/components/Tooltip/components/Title/title.js

@@ -1,9 +1,9 @@
 import { Stack, Typography } from "@mui/material";
 import React from "react";
-import { TEXT_BODY_LARGE_500 } from "../../../../../../theme/common/typography";
-import { STACK_PROPS, TYPOGRAPHY_PROPS } from "./constants";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
+import { STACK_PROPS } from "./constants";
 export const Title = ({ className, description, title, }) => {
     return (React.createElement(Stack, { ...STACK_PROPS, className: className },
-        React.createElement(Typography, { variant: TEXT_BODY_LARGE_500 }, title),
-        React.createElement(Typography, { ...TYPOGRAPHY_PROPS }, description)));
+        React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_LARGE_500 }, title),
+        React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div" }, description)));
 };

package/lib/components/DataDictionary/components/Tooltip/constants.js

@@ -1,10 +1,11 @@
-import { TEXT_BODY_SMALL_400_2_LINES } from "../../../../theme/common/typography";
+import { FONT } from "../../../../styles/common/constants/font";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 export const TOOLTIP_PROPS = {
     arrow: true,
     disableInteractive: true,
     enterNextDelay: 250,
     slotProps: {
-        arrow: { sx: (theme) => ({ color: theme.palette.common.white }) },
+        arrow: { sx: { color: PALETTE.COMMON_WHITE } },
         popper: {
             modifiers: [
                 { name: "offset", options: { offset: [0, 2] } },
@@ -12,13 +13,13 @@ export const TOOLTIP_PROPS = {
             ],
         },
         tooltip: {
-            sx: (theme) => ({
-                ...theme.typography[TEXT_BODY_SMALL_400_2_LINES],
-                backgroundColor: theme.palette.common.white,
+            sx: {
+                backgroundColor: PALETTE.COMMON_WHITE,
                 borderRadius: 2,
-                color: theme.palette.ink.main,
+                color: PALETTE.INK_MAIN,
+                font: FONT.BODY_SMALL_400_2_LINES,
                 padding: 4,
-            }),
+            },
         },
     },
 };

package/lib/components/DataDictionary/dataDictionary.styles.js

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { bpDown1024, mediaTabletDown, } from "../../styles/common/mixins/breakpoints";
+import { bpDown1024, bpDownSm } from "../../styles/common/mixins/breakpoints";
 export const View = styled("div") `
   column-gap: 24px;
   display: grid;
@@ -13,7 +13,7 @@ export const View = styled("div") `
     margin: 0 16px;
   }
 
-  ${mediaTabletDown} {
+  ${bpDownSm} {
     margin: 0;
   }
 `;

package/lib/components/Detail/components/Table/table.js

@@ -2,7 +2,6 @@ import { TableContainer, } from "@mui/material";
 import { getCoreRowModel, useReactTable, } from "@tanstack/react-table";
 import React from "react";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
-import { TABLET } from "../../../../theme/common/breakpoints";
 import { arrIncludesSome } from "../../../Table/columnDef/columnFilters/filterFn";
 import { COLUMN_DEF } from "../../../Table/common/columnDef";
 import { ROW_DIRECTION } from "../../../Table/common/entities";
@@ -13,8 +12,8 @@ import { GridTable } from "../../../Table/table.styles";
 import { generateColumnDefinitions } from "./common/utils";
 import { TableBody } from "./components/TableBody/tableBody";
 export const Table = ({ className, collapsable = true, columns, gridTemplateColumns, items, tableOptions, tableView, }) => {
-    const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, TABLET);
-    const rowDirection = collapsable && tabletDown ? ROW_DIRECTION.VERTICAL : ROW_DIRECTION.DEFAULT;
+    const bpDownSm = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "sm");
+    const rowDirection = collapsable && bpDownSm ? ROW_DIRECTION.VERTICAL : ROW_DIRECTION.DEFAULT;
     const { table, tableContainer } = tableView || {};
     const { stickyHeader = false } = table || {};
     const { sx: tableContainerSx } = tableContainer || {};

package/lib/components/Error/error.js

@@ -4,6 +4,7 @@ import React from "react";
 import { useExploreState } from "../../hooks/useExploreState";
 import { ExploreActionKind } from "../../providers/exploreState";
 import { useLayoutDimensions } from "../../providers/layoutDimensions/hook";
+import { TYPOGRAPHY_PROPS } from "../../styles/common/mui/typography";
 import { ButtonPrimary } from "../common/Button/components/ButtonPrimary/buttonPrimary";
 import { AlertIcon } from "../common/CustomIcon/components/AlertIcon/alertIcon";
 import { Grid } from "../common/Grid/grid";
@@ -12,7 +13,7 @@ import { SectionContent as Content, SectionActions, } from "../common/Section/se
 import { PRIORITY, StatusIcon } from "../common/StatusIcon/statusIcon";
 import { Error as CustomError, ErrorCode, ErrorLayout, ErrorSection, SectionContent, } from "./error.styles";
 const ErrorMessage = ({ detail, title, }) => (React.createElement(Content, null,
-    React.createElement(Typography, { component: "h3", variant: "text-body-large-500" }, title),
+    React.createElement(Typography, { component: "h3", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_LARGE_500 }, title),
     React.createElement(RoundedPaper, null,
         React.createElement(ErrorCode, null, detail))));
 export const Error = ({ errorMessage, onReset, requestUrlMessage, rootPath, }) => {
@@ -30,8 +31,8 @@ export const Error = ({ errorMessage, onReset, requestUrlMessage, rootPath, }) =
             React.createElement(ErrorSection, null,
                 React.createElement(StatusIcon, { priority: PRIORITY.HIGH, StatusIcon: AlertIcon }),
                 React.createElement(SectionContent, null,
-                    React.createElement(Typography, { component: "h1", variant: "text-heading-xlarge" }, "Error"),
-                    React.createElement(Typography, { variant: "text-body-large-400" }, "An error occurred processing your request")),
+                    React.createElement(Typography, { component: "h1", variant: TYPOGRAPHY_PROPS.VARIANT.HEADING_XLARGE }, "Error"),
+                    React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_LARGE_400 }, "An error occurred processing your request")),
                 rootPath && (React.createElement(SectionActions, null,
                     React.createElement(Link, { href: rootPath, legacyBehavior: true, passHref: true },
                         React.createElement(ButtonPrimary, { onClick: handleToHomePageClicked, href: "passHref" }, "To Homepage"))))),

package/lib/components/Error/error.styles.js

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
-import { textBody4002Lines } from "../../styles/common/mixins/fonts";
-import { TABLET } from "../../theme/common/breakpoints";
+import { FONT } from "../../styles/common/constants/font";
+import { bpUpSm } from "../../styles/common/mixins/breakpoints";
 import { Section, sectionMarginXsm } from "../common/Section/section.styles";
 export const ErrorLayout = styled("div", {
     shouldForwardProp: (prop) => prop !== "offset",
@@ -22,7 +22,7 @@ export const ErrorSection = styled(Section) `
   align-items: center;
   padding: 0;
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${bpUpSm} {
     padding: 0;
   }
 `;
@@ -31,7 +31,7 @@ export const SectionContent = styled.div `
 `;
 export const ErrorCode = styled.div `
   ${sectionMarginXsm}
-  ${textBody4002Lines}
+  font: ${FONT.BODY_400_2_LINES};
   font-family: "Roboto Mono", monospace;
   font-size: 12px;
   overflow-wrap: anywhere;

package/lib/components/Export/components/ExportForm/exportForm.styles.d.ts

@@ -1,13 +1,13 @@
-import { ThemeProps } from "../../../../theme/theme";
+import { ThemeProps } from "../../../../theme/types";
 export declare const margin: ({ theme }: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const FormControl: import("@emotion/styled").StyledComponent<import("@mui/material").FormControlOwnProps & 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" | "size" | "className" | "classes" | "children" | "color" | "sx" | "disabled" | "required" | "error" | "margin" | "fullWidth" | "variant" | "hiddenLabel" | "focused"> & {
+}, "style" | "size" | "className" | "classes" | "children" | "disabled" | "sx" | "color" | "margin" | "error" | "variant" | "required" | "fullWidth" | "focused" | "hiddenLabel"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const TableFormControl: import("@emotion/styled").StyledComponent<import("@mui/material").FormControlOwnProps & 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" | "size" | "className" | "classes" | "children" | "color" | "sx" | "disabled" | "required" | "error" | "margin" | "fullWidth" | "variant" | "hiddenLabel" | "focused"> & {
+}, "style" | "size" | "className" | "classes" | "children" | "disabled" | "sx" | "color" | "margin" | "error" | "variant" | "required" | "fullWidth" | "focused" | "hiddenLabel"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const GridPaper: import("@emotion/styled").StyledComponent<{

package/lib/components/Export/components/ExportForm/exportForm.styles.js

@@ -1,13 +1,13 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { FormControl as MFormControl } from "@mui/material";
-import { mediaTabletUp } from "../../../../styles/common/mixins/breakpoints";
-import { inkMain, smokeMain } from "../../../../styles/common/mixins/colors";
-import { textBodyLarge500 } 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 { sectionMargin, sectionMarginSm, } from "../../../common/Section/section.styles";
 export const margin = ({ theme }) => css `
   ${sectionMargin}
-  ${mediaTabletUp({ theme })} {
+  ${bpUpSm({ theme })} {
     ${sectionMarginSm}
   }
 `;
@@ -18,9 +18,9 @@ export const FormControl = styled(MFormControl) `
     gap: 16px;
 
     .MuiFormLabel-root {
-      ${textBodyLarge500};
-      color: ${inkMain};
+      color: ${PALETTE.INK_MAIN};
       display: block;
+      font: ${FONT.BODY_LARGE_500};
     }
 
     .MuiFormHelperText-root {
@@ -45,7 +45,7 @@ export const TableFormControl = styled(FormControl) `
     .MuiFormLabel-root {
       margin: 16px;
 
-      ${mediaTabletUp} {
+      ${bpUpSm} {
         margin: 16px 20px;
       }
     }
@@ -57,7 +57,7 @@ export const TableFormControl = styled(FormControl) `
     .MuiFormHelperText-root {
       margin: 16px;
 
-      ${mediaTabletUp} {
+      ${bpUpSm} {
         margin: 16px 20px;
       }
     }
@@ -74,7 +74,7 @@ export const TableFormControl = styled(FormControl) `
         min-height: 48px;
         padding: 14px 16px;
 
-        ${mediaTabletUp} {
+        ${bpUpSm} {
           padding: 14px 20px;
         }
       }
@@ -82,8 +82,8 @@ export const TableFormControl = styled(FormControl) `
   }
 `;
 export const GridPaper = styled.div `
-  background-color: ${smokeMain};
-  border-color: ${smokeMain};
+  background-color: ${PALETTE.SMOKE_MAIN};
+  border-color: ${PALETTE.SMOKE_MAIN};
   border-style: solid;
   border-width: 1px 0 1px 0;
   display: grid;

package/lib/components/Export/components/ExportMethod/exportMethod.js

@@ -2,20 +2,21 @@ import { Tooltip, Typography } from "@mui/material";
 import Link from "next/link";
 import React from "react";
 import { useDownloadStatus } from "../../../../hooks/useDownloadStatus";
+import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 import { FluidPaper } from "../../../common/Paper/paper.styles";
 import { SectionTitle } from "../../../common/Section/components/SectionTitle/sectionTitle";
 import { Section, SectionActions, SectionContent, } from "../../../common/Section/section.styles";
-import { ExportButton, SectionFootnote } from "./exportMethod.styles";
+import { ExportButton } from "./exportMethod.styles";
 export const ExportMethod = ({ buttonLabel, description, footnote, isAccessible = true, route, title, trackingId, }) => {
     const { disabled, message } = useDownloadStatus();
     return (React.createElement(FluidPaper, null,
         React.createElement(Section, null,
             React.createElement(SectionContent, null,
                 React.createElement(SectionTitle, { title: title }),
-                React.createElement(Typography, { variant: "text-body-400-2lines" }, description)),
+                React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES }, description)),
             React.createElement(SectionActions, null,
                 React.createElement(Tooltip, { arrow: true, title: message },
                     React.createElement("span", null,
                         React.createElement(Link, { href: route, legacyBehavior: true, passHref: true }, trackingId ? (React.createElement(ExportButton, { disabled: disabled || !isAccessible, id: trackingId }, buttonLabel)) : (React.createElement(ExportButton, { disabled: disabled || !isAccessible }, buttonLabel)))))),
-            footnote && React.createElement(SectionFootnote, null, footnote))));
+            footnote && (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400_2_LINES }, footnote)))));
 };

package/lib/components/Export/components/ExportMethod/exportMethod.styles.d.ts

@@ -1,7 +1,3 @@
 export declare const ExportButton: import("@emotion/styled").StyledComponent<Omit<import("../../../common/Button/button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
-export declare const SectionFootnote: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/Export/components/ExportMethod/exportMethod.styles.js

@@ -1,11 +1,5 @@
 import styled from "@emotion/styled";
-import { inkLight } from "../../../../styles/common/mixins/colors";
-import { textBodySmall4002Lines } from "../../../../styles/common/mixins/fonts";
 import { ButtonPrimary } from "../../../common/Button/components/ButtonPrimary/buttonPrimary";
 export const ExportButton = styled(ButtonPrimary) `
   text-transform: none; // overrides MuiButton theme text-transform "capitalize".
 `;
-export const SectionFootnote = styled.div `
-  ${textBodySmall4002Lines}
-  color: ${inkLight};
-`;

package/lib/components/Export/components/ExportSummary/exportSummary.styles.js

@@ -1,12 +1,13 @@
 import styled from "@emotion/styled";
-import { textBody4002Lines } from "../../../../styles/common/mixins/fonts";
+import { FONT } from "../../../../styles/common/constants/font";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 export const Label = styled.div `
-  ${textBody4002Lines};
-  color: ${({ theme }) => theme.palette.ink.light};
+  color: ${PALETTE.INK_LIGHT};
+  font: ${FONT.BODY_400_2_LINES};
 `;
 export const Values = styled.div `
-  ${textBody4002Lines};
   display: flex;
+  font: ${FONT.BODY_400_2_LINES};
   flex-wrap: wrap;
   gap: 0 8px;
 
@@ -15,6 +16,6 @@ export const Values = styled.div `
   }
 
   code {
-    color: ${({ theme }) => theme.palette.ink.light};
+    color: ${PALETTE.INK_LIGHT};
   }
 `;

package/lib/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/formStep.js

@@ -1,6 +1,6 @@
 import { StepIcon, Typography } from "@mui/material";
 import React from "react";
-import { TEXT_BODY_400_2_LINES, TEXT_BODY_500, } from "../../../../../../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../../styles/common/mui/typography";
 import { FormStatusCompletedIcon } from "../../../../../../../common/CustomIcon/components/FormStatusCompletedIcon/formStatusCompletedIcon";
 import { Section, SectionActions, SectionStatus, } from "../../terraSetUpForm.styles";
 import { SectionContent } from "./formStep.styles";
@@ -9,7 +9,9 @@ export const FormStep = ({ action, active, completed, step, text, title, }) => {
         React.createElement(SectionStatus, null,
             React.createElement(StepIcon, { active: active, completed: completed, icon: completed ? React.createElement(FormStatusCompletedIcon, { fontSize: "medium" }) : step })),
         React.createElement(SectionContent, null,
-            React.createElement(Typography, { color: active ? "ink.main" : "ink.light", component: "h4", variant: TEXT_BODY_500 }, title),
-            active && (React.createElement(Typography, { color: "ink.light", component: "div", variant: TEXT_BODY_400_2_LINES }, text))),
+            React.createElement(Typography, { color: active
+                    ? TYPOGRAPHY_PROPS.COLOR.INK_MAIN
+                    : TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "h4", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_500 }, title),
+            active && (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES }, text))),
         active && React.createElement(SectionActions, null, action)));
 };

package/lib/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/formStep.styles.js

@@ -3,7 +3,7 @@ import { SectionContent as DXSectionContent } from "../../terraSetUpForm.styles"
 export const SectionContent = styled(DXSectionContent) `
   gap: 2px;
 
-  .MuiTypography-text-body-500 {
+  .MuiTypography-body-500 {
     margin: 2px 0;
   }
 `;