@databiosphere/findable-ui 41.2.0 → 42.0.0

package/src/theme/common/fontStyles.ts

@@ -0,0 +1,17 @@
+import { ThemeOptions, TypographyVariantsOptions } from "@mui/material";
+
+/**
+ * Extracts fontFamily from theme options for base theme creation.
+ * Ensures custom fontFamily is properly configured for CSS variables and theme typography.
+ * @param themeOptions - Theme Options.
+ * @returns Object containing fontFamily (custom or default "Inter").
+ */
+export const fontStyles = (
+  themeOptions: ThemeOptions
+): Pick<TypographyVariantsOptions, "fontFamily"> => {
+  const typography = themeOptions.typography || {};
+
+  if ("fontFamily" in typography) return { fontFamily: typography.fontFamily };
+
+  return { fontFamily: "Inter" };
+};

package/src/theme/common/palette.ts

@@ -1,25 +1,21 @@
-import { PaletteColorOptions } from "@mui/material";
-import { CommonColors, TypeBackground, TypeText } from "@mui/material/styles";
+import {
+  CommonColors,
+  PaletteColorOptions,
+  PaletteOptions,
+  TypeBackground,
+  TypeText,
+} from "@mui/material";
 
-/**
- * Palette "Alert"
- */
 const ALERT = {
   LIGHT: "#FED3D1",
   LIGHTEST: "#FFF4F4",
   MAIN: "#B42318",
 };
 
-/**
- * Palette "Background"
- */
 const BACKGROUND = {
   DEFAULT: "#F6F6F7",
 };
 
-/**
- * Palette "Info"
- */
 const INFO = {
   CONTRAST_TEXT: "#00729C",
   LIGHT: "#97D6EA",
@@ -27,26 +23,17 @@ const INFO = {
   MAIN: "#00729C",
 };
 
-/**
- * Palette "Ink"
- */
 const INK = {
   LIGHT: "#637381",
   MAIN: "#212B36",
 };
 
-/**
- * Palette "Primary"
- */
 const PRIMARY = {
   DARK: "#005EA9",
   LIGHTEST: "#E6EFF6",
   MAIN: "#1C7CC7",
 };
 
-/**
- * Palette "Smoke"
- */
 const SMOKE = {
   DARK: "#C4CDD5",
   LIGHT: "#F6F6F7",
@@ -54,25 +41,16 @@ const SMOKE = {
   MAIN: "#E1E3E5",
 };
 
-/**
- * Palette "Success"
- */
 const SUCCESS = {
   LIGHT: "#AEE9D1",
   LIGHTEST: "#F1F8F5",
   MAIN: "#287555",
 };
 
-/**
- * Palette "Text"
- */
 const TEXT = {
   PRIMARY: "#212B36",
 };
 
-/**
- * Palette "Warning"
- */
 const WARNING = {
   CONTRAST_TEXT: "#B54708",
   LIGHT: "#FFD79D",
@@ -80,103 +58,80 @@ const WARNING = {
   MAIN: "#B54708",
 };
 
-/**
- * Default "Black"
- */
 const BLACK = {
   DEFAULT: "#000000",
 };
 
-/**
- * Default "White"
- */
 const WHITE = {
   DEFAULT: "#ffffff",
 };
 
-/**
- * Palette Option "Alert"
- */
-export const alert: PaletteColorOptions = {
+const alert: PaletteColorOptions = {
   light: ALERT.LIGHT,
   lightest: ALERT.LIGHTEST,
   main: ALERT.MAIN,
 };
 
-/**
- * Palette Option "Background"
- */
-export const background: Pick<TypeBackground, "default"> = {
+const background: Pick<TypeBackground, "default"> = {
   default: BACKGROUND.DEFAULT,
 };
 
-/**
- * Palette Option "Common"
- */
-export const common: CommonColors = {
+const common: CommonColors = {
   black: BLACK.DEFAULT,
   white: WHITE.DEFAULT,
 };
 
-/**
- * Palette Option "Info"
- */
-export const info: PaletteColorOptions = {
+const info: PaletteColorOptions = {
   contrastText: INFO.CONTRAST_TEXT,
   light: INFO.LIGHT,
   lightest: INFO.LIGHTEST,
   main: INFO.MAIN,
 };
 
-/**
- * Palette Option "Ink"
- */
-export const ink: PaletteColorOptions = {
+const ink: PaletteColorOptions = {
   light: INK.LIGHT,
   main: INK.MAIN,
 };
 
-/**
- * Palette Option "Primary"
- */
-export const primary: PaletteColorOptions = {
+const primary: PaletteColorOptions = {
   dark: PRIMARY.DARK,
   lightest: PRIMARY.LIGHTEST,
   main: PRIMARY.MAIN,
 };
 
-/**
- * Palette Option "Smoke"
- */
-export const smoke: PaletteColorOptions = {
+const smoke: PaletteColorOptions = {
   dark: SMOKE.DARK,
   light: SMOKE.LIGHT,
   lightest: SMOKE.LIGHTEST,
   main: SMOKE.MAIN,
 };
 
-/**
- * Palette Option "Success"
- */
-export const success: PaletteColorOptions = {
+const success: PaletteColorOptions = {
   light: SUCCESS.LIGHT,
   lightest: SUCCESS.LIGHTEST,
   main: SUCCESS.MAIN,
 };
 
-/**
- * Palette Option "Text"
- */
-export const text: Pick<TypeText, "primary"> = {
+const text: Pick<TypeText, "primary"> = {
   primary: TEXT.PRIMARY,
 };
 
-/**
- * Palette Option "Warning"
- */
-export const warning: PaletteColorOptions = {
+const warning: PaletteColorOptions = {
   contrastText: WARNING.CONTRAST_TEXT,
   light: WARNING.LIGHT,
   lightest: WARNING.LIGHTEST,
   main: WARNING.MAIN,
 };
+
+export const palette: PaletteOptions = {
+  alert,
+  background,
+  common,
+  info,
+  ink,
+  primary,
+  smoke,
+  success,
+  text,
+  warning,
+};

package/src/theme/common/typography.ts

@@ -1,211 +1,149 @@
-import { CSSProperties } from "@mui/material";
-import { tabletUp } from "./breakpoints";
-
-/**
- * Typography constants.
- */
-export const fontFamily = "Inter";
-const TYPOGRAPHY = {
-  TEXT_BODY_400: "text-body-400",
-  TEXT_BODY_400_2_LINES: "text-body-400-2lines",
-  TEXT_BODY_500: "text-body-500",
-  TEXT_BODY_500_2_LINES: "text-body-500-2lines",
-  TEXT_BODY_LARGE_400: "text-body-large-400",
-  TEXT_BODY_LARGE_400_2_LINES: "text-body-large-400-2lines",
-  TEXT_BODY_LARGE_500: "text-body-large-500",
-  TEXT_BODY_SMALL_400: "text-body-small-400",
-  TEXT_BODY_SMALL_400_2_LINES: "text-body-small-400-2lines",
-  TEXT_BODY_SMALL_500: "text-body-small-500",
-  TEXT_HEADING: "text-heading",
-  TEXT_HEADING_LARGE: "text-heading-large",
-  TEXT_HEADING_SMALL: "text-heading-small",
-  TEXT_HEADING_XLARGE: "text-heading-xlarge",
-  TEXT_HEADING_XSMALL: "text-heading-xsmall",
-  TEXT_UPPERCASE_500: "text-uppercase-500",
-} as const;
-export const {
-  TEXT_BODY_400,
-  TEXT_BODY_400_2_LINES,
-  TEXT_BODY_500,
-  TEXT_BODY_500_2_LINES,
-  TEXT_BODY_LARGE_400,
-  TEXT_BODY_LARGE_400_2_LINES,
-  TEXT_BODY_LARGE_500,
-  TEXT_BODY_SMALL_400,
-  TEXT_BODY_SMALL_400_2_LINES,
-  TEXT_BODY_SMALL_500,
-  TEXT_HEADING,
-  TEXT_HEADING_LARGE,
-  TEXT_HEADING_SMALL,
-  TEXT_HEADING_XLARGE,
-  TEXT_HEADING_XSMALL,
-  TEXT_UPPERCASE_500,
-} = TYPOGRAPHY;
-
-/**
- * Typography Option "text-body-400"
- */
-export const textBody400: CSSProperties = {
-  fontSize: 14,
+import {
+  Theme,
+  TypographyStyle,
+  TypographyVariantsOptions,
+} from "@mui/material";
+import { bpUpSm } from "../../styles/common/mixins/breakpoints";
+
+const body400: TypographyStyle = {
+  fontFamily: "Inter",
+  fontSize: "14px",
   fontWeight: 400,
   lineHeight: "20px",
 };
 
-/**
- * Typography Option "text-body-400-2lines"
- */
-export const textBody4002Lines: CSSProperties = {
-  fontSize: 14,
+const body4002Lines: TypographyStyle = {
+  fontFamily: "Inter",
+  fontSize: "14px",
   fontWeight: 400,
   lineHeight: "24px",
 };
 
-/**
- * Typography Option "text-body-500"
- */
-export const textBody500: CSSProperties = {
-  fontSize: 14,
+const body500: TypographyStyle = {
+  fontFamily: "Inter",
+  fontSize: "14px",
   fontWeight: 500,
   lineHeight: "20px",
 };
 
-/**
- * Typography Option "text-body-500-2lines"
- */
-export const textBody5002Lines: CSSProperties = {
-  fontSize: 14,
-  fontWeight: 500,
-  lineHeight: "24px",
-};
-
-/**
- * Typography Option "text-body-large-400"
- */
-export const textBodyLarge400: CSSProperties = {
-  fontSize: 16,
+const bodyLarge400: TypographyStyle = {
+  fontFamily: "Inter",
+  fontSize: "16px",
   fontWeight: 400,
   lineHeight: "24px",
 };
 
-/**
- * Typography Option "text-body-large-400-2lines"
- */
-export const textBodyLarge4002Lines: CSSProperties = {
-  fontSize: 16,
+const bodyLarge4002Lines: TypographyStyle = {
+  fontFamily: "Inter",
+  fontSize: "16px",
   fontWeight: 400,
   lineHeight: "28px",
 };
 
-/**
- * Typography Option "text-body-large-500"
- */
-export const textBodyLarge500: CSSProperties = {
-  fontSize: 16,
+const bodyLarge500: TypographyStyle = {
+  fontFamily: "Inter",
+  fontSize: "16px",
   fontWeight: 500,
   lineHeight: "24px",
 };
 
-/**
- * Typography Option "text-body-small-400"
- */
-export const textBodySmall400: CSSProperties = {
-  fontSize: 13,
+const bodySmall400: TypographyStyle = {
+  fontFamily: "Inter",
+  fontSize: "13px",
   fontWeight: 400,
   lineHeight: "16px",
 };
 
-/**
- * Typography Option "text-body-small-400-2lines"
- */
-export const textBodySmall4002Lines: CSSProperties = {
-  fontSize: 13,
+const bodySmall4002Lines: TypographyStyle = {
+  fontFamily: "Inter",
+  fontSize: "13px",
   fontWeight: 400,
   lineHeight: "20px",
 };
 
-/**
- * Typography Option "text-body-small-500"
- */
-export const textBodySmall500: CSSProperties = {
-  fontSize: 13,
+const bodySmall500: TypographyStyle = {
+  fontFamily: "Inter",
+  fontSize: "13px",
   fontWeight: 500,
   lineHeight: "16px",
 };
 
-/**
- * Typography Option "text-heading"
- */
-export const textHeading: CSSProperties = {
-  fontSize: 20,
+const heading = (theme: Theme): TypographyStyle => ({
+  fontFamily: "Inter",
+  fontSize: "20px",
   fontWeight: 500,
-  letterSpacing: "-0.2px",
   lineHeight: "28px",
-  [tabletUp]: {
-    fontSize: 24,
-    letterSpacing: "-0.4px",
+  [bpUpSm({ theme })]: {
+    fontSize: "24px",
     lineHeight: "32px",
   },
-};
+});
 
-/**
- * Typography Option "text-heading-large"
- */
-export const textHeadingLarge: CSSProperties = {
-  fontSize: 24,
+const headingLarge = (theme: Theme): TypographyStyle => ({
+  fontFamily: "Inter",
+  fontSize: "24px",
   fontWeight: 500,
-  letterSpacing: "-0.4px",
   lineHeight: "32px",
-  [tabletUp]: {
-    fontSize: 30,
-    letterSpacing: "-0.8px",
+  [bpUpSm({ theme })]: {
+    fontSize: "32px",
     lineHeight: "40px",
   },
-};
+});
 
-/**
- * Typography Option "text-heading-small"
- */
-export const textHeadingSmall: CSSProperties = {
-  fontSize: 18,
+const headingSmall = (theme: Theme): TypographyStyle => ({
+  fontFamily: "Inter",
+  fontSize: "18px",
   fontWeight: 500,
   lineHeight: "26px",
-  [tabletUp]: {
-    fontSize: 20,
-    letterSpacing: "-0.2px",
+  [bpUpSm({ theme })]: {
+    fontSize: "20px",
     lineHeight: "28px",
   },
-};
+});
 
-/**
- * Typography Option "text-heading-xlarge"
- */
-export const textHeadingXLarge: CSSProperties = {
-  fontSize: 30,
+const headingXLarge = (theme: Theme): TypographyStyle => ({
+  fontFamily: "Inter",
+  fontSize: "30px",
   fontWeight: 500,
   letterSpacing: "-0.8px",
   lineHeight: "40px",
-  [tabletUp]: {
-    fontSize: 40,
-    letterSpacing: "-1.4px",
-    lineHeight: "56px",
+  [bpUpSm({ theme })]: {
+    fontSize: "40px",
+    letterSpacing: "-0.4px",
+    lineHeight: "48px",
   },
-};
+});
 
-/**
- * Typography Option "text-heading-xsmall"
- */
-export const textHeadingXSmall: CSSProperties = {
-  fontSize: 16,
+const headingXSmall: TypographyStyle = {
+  fontFamily: "Inter",
+  fontSize: "16px",
   fontWeight: 500,
   lineHeight: "24px",
 };
 
-/**
- * Typography Option "text-uppercase-500"
- */
-export const textUppercase500: CSSProperties = {
-  fontSize: 12,
+const uppercase500: TypographyStyle = {
+  fontFamily: "Inter",
+  fontSize: "12px",
   fontWeight: 500,
   lineHeight: "16px",
   textTransform: "uppercase",
 };
+
+export const typography = (theme: Theme): TypographyVariantsOptions => ({
+  "body-400": body400,
+  "body-400-2lines": body4002Lines,
+  "body-500": body500,
+  "body-large-400": bodyLarge400,
+  "body-large-400-2lines": bodyLarge4002Lines,
+  "body-large-500": bodyLarge500,
+  "body-small-400": bodySmall400,
+  "body-small-400-2lines": bodySmall4002Lines,
+  "body-small-500": bodySmall500,
+  fontFamily: theme.typography.fontFamily,
+  heading: heading(theme),
+  "heading-large": headingLarge(theme),
+  "heading-small": headingSmall(theme),
+  "heading-xlarge": headingXLarge(theme),
+  "heading-xsmall": headingXSmall,
+  "uppercase-500": uppercase500,
+});