@databiosphere/findable-ui 42.0.0 → 42.1.0

package/.release-please-manifest.json

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

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## [42.1.0](https://github.com/DataBiosphere/findable-ui/compare/v42.0.1...v42.1.0) (2025-08-13)
+
+
+### Features
+
+* create typography to css helper function ([#625](https://github.com/DataBiosphere/findable-ui/issues/625)) ([#626](https://github.com/DataBiosphere/findable-ui/issues/626)) ([2a78f7a](https://github.com/DataBiosphere/findable-ui/commit/2a78f7aa256617f9f1f058b2979849e865a668a0))
+
+
+### Bug Fixes
+
+* fix category group filter label line height ([#627](https://github.com/DataBiosphere/findable-ui/issues/627)) ([#628](https://github.com/DataBiosphere/findable-ui/issues/628)) ([3bb93ce](https://github.com/DataBiosphere/findable-ui/commit/3bb93ce6f8cd4ad316d08809626638b45e238b56))
+* fix pagination summary spacing ([#623](https://github.com/DataBiosphere/findable-ui/issues/623)) ([#624](https://github.com/DataBiosphere/findable-ui/issues/624)) ([b1bfd1f](https://github.com/DataBiosphere/findable-ui/commit/b1bfd1f6c4f1a7d53524ec8d584a97b9cd1dbe83))
+* revert typography theme styles ([#630](https://github.com/DataBiosphere/findable-ui/issues/630)) ([#631](https://github.com/DataBiosphere/findable-ui/issues/631)) ([e9f037b](https://github.com/DataBiosphere/findable-ui/commit/e9f037b8e5c759533f7cb491e7b080c5496f6474))
+
+## [42.0.1](https://github.com/DataBiosphere/findable-ui/compare/v42.0.0...v42.0.1) (2025-08-12)
+
+
+### Bug Fixes
+
+* update any typography header fonts using css vars with breakpoint overrides ([#620](https://github.com/DataBiosphere/findable-ui/issues/620)) ([#621](https://github.com/DataBiosphere/findable-ui/issues/621)) ([468fb09](https://github.com/DataBiosphere/findable-ui/commit/468fb09cb367a98c20fd70949cc857ce17db2dd4))
+
 ## [42.0.0](https://github.com/DataBiosphere/findable-ui/compare/v41.2.0...v42.0.0) (2025-08-12)
 
 

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

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 import { FONT } from "../../../../styles/common/constants/font";
 import { PALETTE } from "../../../../styles/common/constants/palette";
-import { bpDownSm, bpUpSm } from "../../../../styles/common/mixins/breakpoints";
+import { bpDownSm } from "../../../../styles/common/mixins/breakpoints";
 import { FluidPaper } from "../../../common/Paper/components/FluidPaper/fluidPaper";
 import { MarkdownRenderer } from "../../../MarkdownRenderer/markdownRenderer";
 export const StyledFluidPaper = styled(FluidPaper) `
@@ -32,11 +32,6 @@ export const StyledMarkdownRenderer = styled(MarkdownRenderer) `
     font: ${FONT.HEADING_SMALL};
     font-size: 18px;
     line-height: 26px;
-
-    ${bpUpSm} {
-      font-size: 18px;
-      line-height: 26px;
-    }
   }
 
   hr {
@@ -46,6 +41,6 @@ export const StyledMarkdownRenderer = styled(MarkdownRenderer) `
   }
 
   p {
-    font: inherit;
+    font: ${FONT.BODY_400_2_LINES};
   }
 `;

package/lib/components/Filter/components/Filters/filters.js

@@ -53,7 +53,7 @@ export const Filters = ({ categoryFilters, className, disabled = false, onFilter
     }, [windowHeight]);
     return (React.createElement(FilterList, { className: className, "data-testid": TEST_IDS.FILTERS, disabled: disabled, height: height, ref: filterListRef, surfaceType: surfaceType }, categoryFilters.map(({ categoryViews, label }, i) => (React.createElement(Fragment, { key: i },
         i !== 0 && React.createElement(Divider, null),
-        label && (React.createElement(StyledTypography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.UPPERCASE_500 }, label)),
+        label && (React.createElement(StyledTypography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.UPPERCASE_500 }, label)),
         categoryViews.map((categoryView) => (React.createElement(Filter, { key: categoryView.key, categorySection: label, categoryView: categoryView, closeAncestor: onClose, onFilter: onFilter, surfaceType: surfaceType, trackFilterOpened: trackFilterOpened, tags: renderFilterTags(categoryView, onFilter) }))))))));
 };
 /**

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

@@ -1,3 +1,4 @@
+import { Typography } from "@mui/material";
 import { FiltersProps } from "./filters";
 interface Props {
     height: number;
@@ -6,9 +7,5 @@ export declare const Filters: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & Props & Pick<FiltersProps, "disabled" | "surfaceType">, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledTypography: 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" | "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 StyledTypography: typeof Typography;
 export {};

package/lib/components/Support/components/SupportRequest/components/SupportRequestForm/supportRequestForm.js

@@ -11,7 +11,7 @@ import Dropzone from "../Dropzone/dropzone";
 import { DEFAULT_FORM_STATE, DRAGGING_STYLE, MAX_ATTACHMENT_SIZE, OPTIONS, VALIDATION_SCHEMA, } from "./common/constants";
 import { FORM_CONTROL_LABEL, FORM_CONTROL_NAME, } from "./common/entities";
 import { createSupportRequest, uploadAttachment } from "./common/utils";
-import { Section, Title } from "./supportRequestForm.styles";
+import { Section } from "./supportRequestForm.styles";
 export const SupportRequestForm = ({ setFormSubmitted, supportRequest, }) => {
     const [formState, setFormState] = useState(DEFAULT_FORM_STATE);
     const [errorFields, setErrorFields] = useState();
@@ -132,7 +132,7 @@ export const SupportRequestForm = ({ setFormSubmitted, supportRequest, }) => {
     return (React.createElement(Dropzone, { activeStyle: DRAGGING_STYLE, disabled: Boolean(formState[FORM_CONTROL_NAME.ATTACHMENT_TOKEN]), maxSize: MAX_ATTACHMENT_SIZE, multiple: false, onDropAccepted: onAttachmentDropped, onDropRejected: onAttachmentRejected }, ({ isDragActive, open }) => (React.createElement(GridPaper, null,
         React.createElement(Section, null,
             React.createElement(SectionContent, null,
-                React.createElement(Title, null, "Contact Us"),
+                React.createElement(Typography, { component: "h3", variant: TYPOGRAPHY_PROPS.VARIANT.HEADING_SMALL }, "Contact Us"),
                 React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, "We\u2019re here to help and answer any questions you might have. We look forward to hearing from you!"))),
         React.createElement(Section, null,
             React.createElement(Input, { error: isFieldError(formState, errorFields, FORM_CONTROL_NAME.NAME), isFilled: Boolean(formState[FORM_CONTROL_NAME.NAME]), label: FORM_CONTROL_LABEL.NAME, name: FORM_CONTROL_NAME.NAME, onBlur: onBlur, onChange: onInputChange }),

package/lib/components/Support/components/SupportRequest/components/SupportRequestForm/supportRequestForm.styles.d.ts

@@ -1,7 +1,3 @@
-export declare const Title: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
 export declare const Section: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/lib/components/Support/components/SupportRequest/components/SupportRequestForm/supportRequestForm.styles.js

@@ -1,10 +1,5 @@
 import styled from "@emotion/styled";
-import { FONT } from "../../../../../../styles/common/constants/font";
 import { GridPaperSection } from "../../../../../common/Section/section.styles";
-export const Title = styled.h3 `
-  font: ${FONT.HEADING_SMALL};
-  margin: 0;
-`;
 export const Section = styled(GridPaperSection) `
   min-width: 0;
 `;

package/lib/components/Table/components/PaginationSummary/paginationSummary.js

@@ -6,10 +6,13 @@ export const PaginationSummary = ({ firstResult, lastResult, totalResult, }) =>
     return (React.createElement(Fade, { in: totalResult > 0, unmountOnExit: true },
         React.createElement("div", { "data-testid": TEST_IDS.TABLE_PAGINATION_RESULTS },
             React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, "Results"),
+            " ",
             React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_500 },
                 firstResult,
                 " - ",
                 lastResult),
+            " ",
             React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, "of"),
+            " ",
             React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_500 }, totalResult))));
 };

package/lib/styles/common/mixins/typography.d.ts

@@ -0,0 +1,8 @@
+import { SerializedStyles } from "@emotion/react";
+import { ThemeProps } from "../../../theme/types";
+/**
+ * Returns typography style for the given variant.
+ * @param variant - Typography variant key from the theme configuration.
+ * @returns Typography styles.
+ */
+export declare function typographyToCSS(variant: keyof ThemeProps["theme"]["typography"]): (props: ThemeProps) => SerializedStyles;

package/lib/styles/common/mixins/typography.js

@@ -0,0 +1,11 @@
+import { css } from "@emotion/react";
+/**
+ * Returns typography style for the given variant.
+ * @param variant - Typography variant key from the theme configuration.
+ * @returns Typography styles.
+ */
+export function typographyToCSS(variant) {
+    return (props) => {
+        return css(props.theme.typography[variant]);
+    };
+}

package/lib/theme/common/components.js

@@ -267,9 +267,9 @@ const MuiButton = {
             props: {
                 variant: "backNav", // associated with "nav" variant.
             },
-            style: {
+            style: ({ theme }) => ({
+                ...theme.typography["heading-small"],
                 color: PALETTE.INK_MAIN,
-                font: FONT.HEADING_SMALL,
                 minWidth: 0,
                 textTransform: "capitalize",
                 whiteSpace: "nowrap",
@@ -277,7 +277,7 @@ const MuiButton = {
                 "&:hover": {
                     backgroundColor: PALETTE.SMOKE_LIGHT,
                 },
-            },
+            }),
         },
         {
             props: {
@@ -549,9 +549,9 @@ const MuiDialogContent = {
 const MuiDialogTitle = {
     styleOverrides: {
         root: ({ theme }) => ({
+            ...theme.typography.heading,
             alignItems: "center",
             display: "grid",
-            font: FONT.HEADING,
             gridAutoFlow: "column",
             padding: 20,
             [bpUpSm({ theme })]: {},

package/lib/theme/common/typography.js

@@ -57,9 +57,11 @@ const heading = (theme) => ({
     fontFamily: "Inter",
     fontSize: "20px",
     fontWeight: 500,
+    letterSpacing: "-0.2px",
     lineHeight: "28px",
     [bpUpSm({ theme })]: {
         fontSize: "24px",
+        letterSpacing: "-0.4px",
         lineHeight: "32px",
     },
 });
@@ -67,9 +69,11 @@ const headingLarge = (theme) => ({
     fontFamily: "Inter",
     fontSize: "24px",
     fontWeight: 500,
+    letterSpacing: "-0.4px",
     lineHeight: "32px",
     [bpUpSm({ theme })]: {
-        fontSize: "32px",
+        fontSize: "30px",
+        letterSpacing: "-0.8px",
         lineHeight: "40px",
     },
 });
@@ -80,6 +84,7 @@ const headingSmall = (theme) => ({
     lineHeight: "26px",
     [bpUpSm({ theme })]: {
         fontSize: "20px",
+        letterSpacing: "-0.2px",
         lineHeight: "28px",
     },
 });
@@ -91,8 +96,8 @@ const headingXLarge = (theme) => ({
     lineHeight: "40px",
     [bpUpSm({ theme })]: {
         fontSize: "40px",
-        letterSpacing: "-0.4px",
-        lineHeight: "48px",
+        letterSpacing: "-1.4px",
+        lineHeight: "56px",
     },
 });
 const headingXSmall = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "42.0.0",
+  "version": "42.1.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/components/DataDictionary/components/Description/description.styles.ts

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 import { FONT } from "../../../../styles/common/constants/font";
 import { PALETTE } from "../../../../styles/common/constants/palette";
-import { bpDownSm, bpUpSm } from "../../../../styles/common/mixins/breakpoints";
+import { bpDownSm } from "../../../../styles/common/mixins/breakpoints";
 import { FluidPaper } from "../../../common/Paper/components/FluidPaper/fluidPaper";
 import { MarkdownRenderer } from "../../../MarkdownRenderer/markdownRenderer";
 
@@ -34,11 +34,6 @@ export const StyledMarkdownRenderer = styled(MarkdownRenderer)`
     font: ${FONT.HEADING_SMALL};
     font-size: 18px;
     line-height: 26px;
-
-    ${bpUpSm} {
-      font-size: 18px;
-      line-height: 26px;
-    }
   }
 
   hr {
@@ -48,6 +43,6 @@ export const StyledMarkdownRenderer = styled(MarkdownRenderer)`
   }
 
   p {
-    font: inherit;
+    font: ${FONT.BODY_400_2_LINES};
   }
 `;

package/src/components/Filter/components/Filters/filters.styles.ts

@@ -42,4 +42,4 @@ export const Filters = styled("div")<
 
 export const StyledTypography = styled(Typography)`
   padding: 8px;
-`;
+` as typeof Typography;

package/src/components/Filter/components/Filters/filters.tsx

@@ -103,6 +103,7 @@ export const Filters = ({
           {label && (
             <StyledTypography
               color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+              component="div"
               variant={TYPOGRAPHY_PROPS.VARIANT.UPPERCASE_500}
             >
               {label}

package/src/components/Support/components/SupportRequest/components/SupportRequestForm/supportRequestForm.styles.ts

@@ -1,12 +1,6 @@
 import styled from "@emotion/styled";
-import { FONT } from "../../../../../../styles/common/constants/font";
 import { GridPaperSection } from "../../../../../common/Section/section.styles";
 
-export const Title = styled.h3`
-  font: ${FONT.HEADING_SMALL};
-  margin: 0;
-`;
-
 export const Section = styled(GridPaperSection)`
   min-width: 0;
 `;

package/src/components/Support/components/SupportRequest/components/SupportRequestForm/supportRequestForm.tsx

@@ -34,7 +34,7 @@ import {
   RequestValue,
 } from "./common/entities";
 import { createSupportRequest, uploadAttachment } from "./common/utils";
-import { Section, Title } from "./supportRequestForm.styles";
+import { Section } from "./supportRequestForm.styles";
 
 export interface SupportRequestFormProps {
   setFormSubmitted: Dispatch<SetStateAction<boolean>>;
@@ -183,7 +183,12 @@ export const SupportRequestForm = ({
         <GridPaper>
           <Section>
             <SectionContent>
-              <Title>Contact Us</Title>
+              <Typography
+                component="h3"
+                variant={TYPOGRAPHY_PROPS.VARIANT.HEADING_SMALL}
+              >
+                Contact Us
+              </Typography>
               <Typography
                 color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
                 variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}

package/src/components/Table/components/PaginationSummary/paginationSummary.tsx

@@ -19,11 +19,11 @@ export const PaginationSummary = ({
       <div data-testid={TEST_IDS.TABLE_PAGINATION_RESULTS}>
         <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>
           Results
-        </Typography>
+        </Typography>{" "}
         <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_500}>
           {firstResult} - {lastResult}
-        </Typography>
-        <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>of</Typography>
+        </Typography>{" "}
+        <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>of</Typography>{" "}
         <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_500}>
           {totalResult}
         </Typography>

package/src/styles/common/mixins/typography.ts

@@ -0,0 +1,15 @@
+import { css, SerializedStyles } from "@emotion/react";
+import { ThemeProps } from "../../../theme/types";
+
+/**
+ * Returns typography style for the given variant.
+ * @param variant - Typography variant key from the theme configuration.
+ * @returns Typography styles.
+ */
+export function typographyToCSS(
+  variant: keyof ThemeProps["theme"]["typography"]
+) {
+  return (props: ThemeProps): SerializedStyles => {
+    return css(props.theme.typography[variant]);
+  };
+}

package/src/theme/common/components.ts

@@ -109,7 +109,7 @@ const MuiBreadcrumbs: Components["MuiBreadcrumbs"] = {
   },
 };
 
-const MuiButton: Components["MuiButton"] = {
+const MuiButton: Components<Theme>["MuiButton"] = {
   defaultProps: {
     disableRipple: true,
     disableTouchRipple: true,
@@ -276,9 +276,9 @@ const MuiButton: Components["MuiButton"] = {
       props: {
         variant: "backNav", // associated with "nav" variant.
       },
-      style: {
+      style: ({ theme }) => ({
+        ...theme.typography["heading-small"],
         color: PALETTE.INK_MAIN,
-        font: FONT.HEADING_SMALL,
         minWidth: 0,
         textTransform: "capitalize",
         whiteSpace: "nowrap",
@@ -286,7 +286,7 @@ const MuiButton: Components["MuiButton"] = {
         "&:hover": {
           backgroundColor: PALETTE.SMOKE_LIGHT,
         },
-      },
+      }),
     },
     {
       props: {
@@ -568,9 +568,9 @@ const MuiDialogContent: Components["MuiDialogContent"] = {
 const MuiDialogTitle: Components<Theme>["MuiDialogTitle"] = {
   styleOverrides: {
     root: ({ theme }) => ({
+      ...theme.typography.heading,
       alignItems: "center",
       display: "grid",
-      font: FONT.HEADING,
       gridAutoFlow: "column",
       padding: 20,
       [bpUpSm({ theme })]: {},

package/src/theme/common/typography.ts

@@ -72,9 +72,11 @@ const heading = (theme: Theme): TypographyStyle => ({
   fontFamily: "Inter",
   fontSize: "20px",
   fontWeight: 500,
+  letterSpacing: "-0.2px",
   lineHeight: "28px",
   [bpUpSm({ theme })]: {
     fontSize: "24px",
+    letterSpacing: "-0.4px",
     lineHeight: "32px",
   },
 });
@@ -83,9 +85,11 @@ const headingLarge = (theme: Theme): TypographyStyle => ({
   fontFamily: "Inter",
   fontSize: "24px",
   fontWeight: 500,
+  letterSpacing: "-0.4px",
   lineHeight: "32px",
   [bpUpSm({ theme })]: {
-    fontSize: "32px",
+    fontSize: "30px",
+    letterSpacing: "-0.8px",
     lineHeight: "40px",
   },
 });
@@ -97,6 +101,7 @@ const headingSmall = (theme: Theme): TypographyStyle => ({
   lineHeight: "26px",
   [bpUpSm({ theme })]: {
     fontSize: "20px",
+    letterSpacing: "-0.2px",
     lineHeight: "28px",
   },
 });
@@ -109,8 +114,8 @@ const headingXLarge = (theme: Theme): TypographyStyle => ({
   lineHeight: "40px",
   [bpUpSm({ theme })]: {
     fontSize: "40px",
-    letterSpacing: "-0.4px",
-    lineHeight: "48px",
+    letterSpacing: "-1.4px",
+    lineHeight: "56px",
   },
 });