@databiosphere/findable-ui 41.2.0 → 42.0.0

package/lib/theme/common/fontStyles.d.ts

@@ -0,0 +1,8 @@
+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 declare const fontStyles: (themeOptions: ThemeOptions) => Pick<TypographyVariantsOptions, "fontFamily">;

package/lib/theme/common/fontStyles.js

@@ -0,0 +1,12 @@
+/**
+ * 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) => {
+    const typography = themeOptions.typography || {};
+    if ("fontFamily" in typography)
+        return { fontFamily: typography.fontFamily };
+    return { fontFamily: "Inter" };
+};

package/lib/theme/common/palette.d.ts

@@ -1,42 +1,2 @@
-import { PaletteColorOptions } from "@mui/material";
-import { CommonColors, TypeBackground, TypeText } from "@mui/material/styles";
-/**
- * Palette Option "Alert"
- */
-export declare const alert: PaletteColorOptions;
-/**
- * Palette Option "Background"
- */
-export declare const background: Pick<TypeBackground, "default">;
-/**
- * Palette Option "Common"
- */
-export declare const common: CommonColors;
-/**
- * Palette Option "Info"
- */
-export declare const info: PaletteColorOptions;
-/**
- * Palette Option "Ink"
- */
-export declare const ink: PaletteColorOptions;
-/**
- * Palette Option "Primary"
- */
-export declare const primary: PaletteColorOptions;
-/**
- * Palette Option "Smoke"
- */
-export declare const smoke: PaletteColorOptions;
-/**
- * Palette Option "Success"
- */
-export declare const success: PaletteColorOptions;
-/**
- * Palette Option "Text"
- */
-export declare const text: Pick<TypeText, "primary">;
-/**
- * Palette Option "Warning"
- */
-export declare const warning: PaletteColorOptions;
+import { PaletteOptions } from "@mui/material";
+export declare const palette: PaletteOptions;

package/lib/theme/common/palette.js

@@ -1,159 +1,108 @@
-/**
- * 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",
     LIGHTEST: "#F2FAFC",
     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",
     LIGHTEST: "#FAFBFB",
     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",
     LIGHTEST: "#FFFAEB",
     MAIN: "#B54708",
 };
-/**
- * Default "Black"
- */
 const BLACK = {
     DEFAULT: "#000000",
 };
-/**
- * Default "White"
- */
 const WHITE = {
     DEFAULT: "#ffffff",
 };
-/**
- * Palette Option "Alert"
- */
-export const alert = {
+const alert = {
     light: ALERT.LIGHT,
     lightest: ALERT.LIGHTEST,
     main: ALERT.MAIN,
 };
-/**
- * Palette Option "Background"
- */
-export const background = {
+const background = {
     default: BACKGROUND.DEFAULT,
 };
-/**
- * Palette Option "Common"
- */
-export const common = {
+const common = {
     black: BLACK.DEFAULT,
     white: WHITE.DEFAULT,
 };
-/**
- * Palette Option "Info"
- */
-export const info = {
+const info = {
     contrastText: INFO.CONTRAST_TEXT,
     light: INFO.LIGHT,
     lightest: INFO.LIGHTEST,
     main: INFO.MAIN,
 };
-/**
- * Palette Option "Ink"
- */
-export const ink = {
+const ink = {
     light: INK.LIGHT,
     main: INK.MAIN,
 };
-/**
- * Palette Option "Primary"
- */
-export const primary = {
+const primary = {
     dark: PRIMARY.DARK,
     lightest: PRIMARY.LIGHTEST,
     main: PRIMARY.MAIN,
 };
-/**
- * Palette Option "Smoke"
- */
-export const smoke = {
+const smoke = {
     dark: SMOKE.DARK,
     light: SMOKE.LIGHT,
     lightest: SMOKE.LIGHTEST,
     main: SMOKE.MAIN,
 };
-/**
- * Palette Option "Success"
- */
-export const success = {
+const success = {
     light: SUCCESS.LIGHT,
     lightest: SUCCESS.LIGHTEST,
     main: SUCCESS.MAIN,
 };
-/**
- * Palette Option "Text"
- */
-export const text = {
+const text = {
     primary: TEXT.PRIMARY,
 };
-/**
- * Palette Option "Warning"
- */
-export const warning = {
+const warning = {
     contrastText: WARNING.CONTRAST_TEXT,
     light: WARNING.LIGHT,
     lightest: WARNING.LIGHTEST,
     main: WARNING.MAIN,
 };
+export const palette = {
+    alert,
+    background,
+    common,
+    info,
+    ink,
+    primary,
+    smoke,
+    success,
+    text,
+    warning,
+};

package/lib/theme/common/typography.d.ts

@@ -1,70 +1,2 @@
-import { CSSProperties } from "@mui/material";
-/**
- * Typography constants.
- */
-export declare const fontFamily = "Inter";
-export declare const 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";
-/**
- * Typography Option "text-body-400"
- */
-export declare const textBody400: CSSProperties;
-/**
- * Typography Option "text-body-400-2lines"
- */
-export declare const textBody4002Lines: CSSProperties;
-/**
- * Typography Option "text-body-500"
- */
-export declare const textBody500: CSSProperties;
-/**
- * Typography Option "text-body-500-2lines"
- */
-export declare const textBody5002Lines: CSSProperties;
-/**
- * Typography Option "text-body-large-400"
- */
-export declare const textBodyLarge400: CSSProperties;
-/**
- * Typography Option "text-body-large-400-2lines"
- */
-export declare const textBodyLarge4002Lines: CSSProperties;
-/**
- * Typography Option "text-body-large-500"
- */
-export declare const textBodyLarge500: CSSProperties;
-/**
- * Typography Option "text-body-small-400"
- */
-export declare const textBodySmall400: CSSProperties;
-/**
- * Typography Option "text-body-small-400-2lines"
- */
-export declare const textBodySmall4002Lines: CSSProperties;
-/**
- * Typography Option "text-body-small-500"
- */
-export declare const textBodySmall500: CSSProperties;
-/**
- * Typography Option "text-heading"
- */
-export declare const textHeading: CSSProperties;
-/**
- * Typography Option "text-heading-large"
- */
-export declare const textHeadingLarge: CSSProperties;
-/**
- * Typography Option "text-heading-small"
- */
-export declare const textHeadingSmall: CSSProperties;
-/**
- * Typography Option "text-heading-xlarge"
- */
-export declare const textHeadingXLarge: CSSProperties;
-/**
- * Typography Option "text-heading-xsmall"
- */
-export declare const textHeadingXSmall: CSSProperties;
-/**
- * Typography Option "text-uppercase-500"
- */
-export declare const textUppercase500: CSSProperties;
+import { Theme, TypographyVariantsOptions } from "@mui/material";
+export declare const typography: (theme: Theme) => TypographyVariantsOptions;

package/lib/theme/common/typography.js

@@ -1,176 +1,128 @@
-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",
-};
-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 = {
-    fontSize: 14,
+import { bpUpSm } from "../../styles/common/mixins/breakpoints";
+const body400 = {
+    fontFamily: "Inter",
+    fontSize: "14px",
     fontWeight: 400,
     lineHeight: "20px",
 };
-/**
- * Typography Option "text-body-400-2lines"
- */
-export const textBody4002Lines = {
-    fontSize: 14,
+const body4002Lines = {
+    fontFamily: "Inter",
+    fontSize: "14px",
     fontWeight: 400,
     lineHeight: "24px",
 };
-/**
- * Typography Option "text-body-500"
- */
-export const textBody500 = {
-    fontSize: 14,
+const body500 = {
+    fontFamily: "Inter",
+    fontSize: "14px",
     fontWeight: 500,
     lineHeight: "20px",
 };
-/**
- * Typography Option "text-body-500-2lines"
- */
-export const textBody5002Lines = {
-    fontSize: 14,
-    fontWeight: 500,
-    lineHeight: "24px",
-};
-/**
- * Typography Option "text-body-large-400"
- */
-export const textBodyLarge400 = {
-    fontSize: 16,
+const bodyLarge400 = {
+    fontFamily: "Inter",
+    fontSize: "16px",
     fontWeight: 400,
     lineHeight: "24px",
 };
-/**
- * Typography Option "text-body-large-400-2lines"
- */
-export const textBodyLarge4002Lines = {
-    fontSize: 16,
+const bodyLarge4002Lines = {
+    fontFamily: "Inter",
+    fontSize: "16px",
     fontWeight: 400,
     lineHeight: "28px",
 };
-/**
- * Typography Option "text-body-large-500"
- */
-export const textBodyLarge500 = {
-    fontSize: 16,
+const bodyLarge500 = {
+    fontFamily: "Inter",
+    fontSize: "16px",
     fontWeight: 500,
     lineHeight: "24px",
 };
-/**
- * Typography Option "text-body-small-400"
- */
-export const textBodySmall400 = {
-    fontSize: 13,
+const bodySmall400 = {
+    fontFamily: "Inter",
+    fontSize: "13px",
     fontWeight: 400,
     lineHeight: "16px",
 };
-/**
- * Typography Option "text-body-small-400-2lines"
- */
-export const textBodySmall4002Lines = {
-    fontSize: 13,
+const bodySmall4002Lines = {
+    fontFamily: "Inter",
+    fontSize: "13px",
     fontWeight: 400,
     lineHeight: "20px",
 };
-/**
- * Typography Option "text-body-small-500"
- */
-export const textBodySmall500 = {
-    fontSize: 13,
+const bodySmall500 = {
+    fontFamily: "Inter",
+    fontSize: "13px",
     fontWeight: 500,
     lineHeight: "16px",
 };
-/**
- * Typography Option "text-heading"
- */
-export const textHeading = {
-    fontSize: 20,
+const heading = (theme) => ({
+    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 = {
-    fontSize: 24,
+});
+const headingLarge = (theme) => ({
+    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 = {
-    fontSize: 18,
+});
+const headingSmall = (theme) => ({
+    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 = {
-    fontSize: 30,
+});
+const headingXLarge = (theme) => ({
+    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 = {
-    fontSize: 16,
+});
+const headingXSmall = {
+    fontFamily: "Inter",
+    fontSize: "16px",
     fontWeight: 500,
     lineHeight: "24px",
 };
-/**
- * Typography Option "text-uppercase-500"
- */
-export const textUppercase500 = {
-    fontSize: 12,
+const uppercase500 = {
+    fontFamily: "Inter",
+    fontSize: "12px",
     fontWeight: 500,
     lineHeight: "16px",
     textTransform: "uppercase",
 };
+export const typography = (theme) => ({
+    "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,
+});

package/lib/theme/components/muiAlert.d.ts

@@ -1,2 +1,2 @@
-import { Components, Theme } from "@mui/material";
-export declare const MuiAlert: (theme: Theme) => Components["MuiAlert"];
+import { Components } from "@mui/material";
+export declare const MuiAlert: Components["MuiAlert"];