@databiosphere/findable-ui 42.0.0 → 42.0.1

package/.release-please-manifest.json

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

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "42.0.0",
+  "version": "42.0.1",
   "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/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/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 })]: {},