npm - @databiosphere/findable-ui - Versions diffs - 41.2.0 → 42.0.0 - Mend

@databiosphere/findable-ui 41.2.0 → 42.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (464) hide show

package/lib/styles/common/constants/colorMixes.js CHANGED Viewed

@@ -16,6 +16,7 @@ export const COLOR_MIXES = {
     INK_MAIN_64: `color-mix(in srgb, ${PALETTE.INK_MAIN} 64%, transparent)`,
     INK_MAIN_80: `color-mix(in srgb, ${PALETTE.INK_MAIN} 80%, transparent)`,
     PRIMARY_DARK_08: `color-mix(in srgb, ${PALETTE.PRIMARY_DARK} 8%, transparent)`,
+    PRIMARY_MAIN_90: `color-mix(in srgb, ${PALETTE.PRIMARY_MAIN} 90%, transparent)`,
     SUCCESS_MAIN_32: `color-mix(in srgb, ${PALETTE.SUCCESS_MAIN} 32%, transparent)`,
     WARNING_MAIN_32: `color-mix(in srgb, ${PALETTE.WARNING_MAIN} 32%, transparent)`,
 };

package/lib/styles/common/constants/font.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+export declare const FONT: {
+    readonly BODY_400: "var(--font-body-400)";
+    readonly BODY_400_2_LINES: "var(--font-body-400-2lines)";
+    readonly BODY_500: "var(--font-body-500)";
+    readonly BODY_LARGE_400: "var(--font-body-large-400)";
+    readonly BODY_LARGE_400_2_LINES: "var(--font-body-large-400-2lines)";
+    readonly BODY_LARGE_500: "var(--font-body-large-500)";
+    readonly BODY_SMALL_400: "var(--font-body-small-400)";
+    readonly BODY_SMALL_400_2_LINES: "var(--font-body-small-400-2lines)";
+    readonly BODY_SMALL_500: "var(--font-body-small-500)";
+    readonly HEADING: "var(--font-heading)";
+    readonly HEADING_LARGE: "var(--font-heading-large)";
+    readonly HEADING_SMALL: "var(--font-heading-small)";
+    readonly HEADING_XLARGE: "var(--font-heading-xlarge)";
+    readonly HEADING_XSMALL: "var(--font-heading-xsmall)";
+    readonly INHERIT: "var(--font-inherit)";
+    readonly UPPERCASE_500: "var(--font-uppercase-500)";
+};

package/lib/styles/common/constants/font.js ADDED Viewed

@@ -0,0 +1,18 @@
+export const FONT = {
+    BODY_400: `var(--font-body-400)`,
+    BODY_400_2_LINES: `var(--font-body-400-2lines)`,
+    BODY_500: `var(--font-body-500)`,
+    BODY_LARGE_400: `var(--font-body-large-400)`,
+    BODY_LARGE_400_2_LINES: `var(--font-body-large-400-2lines)`,
+    BODY_LARGE_500: `var(--font-body-large-500)`,
+    BODY_SMALL_400: `var(--font-body-small-400)`,
+    BODY_SMALL_400_2_LINES: `var(--font-body-small-400-2lines)`,
+    BODY_SMALL_500: `var(--font-body-small-500)`,
+    HEADING: `var(--font-heading)`,
+    HEADING_LARGE: `var(--font-heading-large)`,
+    HEADING_SMALL: `var(--font-heading-small)`,
+    HEADING_XLARGE: `var(--font-heading-xlarge)`,
+    HEADING_XSMALL: `var(--font-heading-xsmall)`,
+    INHERIT: `var(--font-inherit)`,
+    UPPERCASE_500: `var(--font-uppercase-500)`,
+};

package/lib/styles/common/constants/palette.d.ts CHANGED Viewed

@@ -1,47 +1,47 @@
 export declare const PALETTE: {
-    readonly ALERT_LIGHT: "var(--mui-palette-alert-light)";
-    readonly ALERT_LIGHTEST: "var(--mui-palette-alert-lightest)";
-    readonly ALERT_MAIN: "var(--mui-palette-alert-main)";
-    readonly BACKGROUND_DEFAULT: "var(--mui-palette-background-default)";
-    readonly BACKGROUND_PAPER: "var(--mui-palette-background-paper)";
-    readonly COMMON_BACKGROUND: "var(--mui-palette-common-background)";
-    readonly COMMON_BLACK: "var(--mui-palette-common-black)";
-    readonly COMMON_WHITE: "var(--mui-palette-common-white)";
-    readonly ERROR_CONTRAST_TEXT: "var(--mui-palette-error-contrastText)";
-    readonly ERROR_DARK: "var(--mui-palette-error-dark)";
-    readonly ERROR_LIGHT: "var(--mui-palette-error-light)";
-    readonly ERROR_MAIN: "var(--mui-palette-error-main)";
-    readonly INFO_CONTRAST_TEXT: "var(--mui-palette-info-contrastText)";
-    readonly INFO_DARK: "var(--mui-palette-info-dark)";
-    readonly INFO_LIGHT: "var(--mui-palette-info-light)";
-    readonly INFO_LIGHTEST: "var(--mui-palette-info-lightest)";
-    readonly INFO_MAIN: "var(--mui-palette-info-main)";
-    readonly INK_LIGHT: "var(--mui-palette-ink-light)";
-    readonly INK_MAIN: "var(--mui-palette-ink-main)";
-    readonly PRIMARY_CONTRAST_TEXT: "var(--mui-palette-primary-contrastText)";
-    readonly PRIMARY_DARK: "var(--mui-palette-primary-dark)";
-    readonly PRIMARY_LIGHT: "var(--mui-palette-primary-light)";
-    readonly PRIMARY_LIGHTEST: "var(--mui-palette-primary-lightest)";
-    readonly PRIMARY_MAIN: "var(--mui-palette-primary-main)";
-    readonly SECONDARY_CONTRAST_TEXT: "var(--mui-palette-secondary-contrastText)";
-    readonly SECONDARY_DARK: "var(--mui-palette-secondary-dark)";
-    readonly SECONDARY_LIGHT: "var(--mui-palette-secondary-light)";
-    readonly SECONDARY_MAIN: "var(--mui-palette-secondary-main)";
-    readonly SMOKE_DARK: "var(--mui-palette-smoke-dark)";
-    readonly SMOKE_LIGHT: "var(--mui-palette-smoke-light)";
-    readonly SMOKE_LIGHTEST: "var(--mui-palette-smoke-lightest)";
-    readonly SMOKE_MAIN: "var(--mui-palette-smoke-main)";
-    readonly SUCCESS_CONTRAST_TEXT: "var(--mui-palette-success-contrastText)";
-    readonly SUCCESS_DARK: "var(--mui-palette-success-dark)";
-    readonly SUCCESS_LIGHT: "var(--mui-palette-success-light)";
-    readonly SUCCESS_LIGHTEST: "var(--mui-palette-success-lightest)";
-    readonly SUCCESS_MAIN: "var(--mui-palette-success-main)";
-    readonly TEXT_DISABLED: "var(--mui-palette-text-disabled)";
-    readonly TEXT_PRIMARY: "var(--mui-palette-text-primary)";
-    readonly TEXT_SECONDARY: "var(--mui-palette-text-secondary)";
-    readonly WARNING_CONTRAST_TEXT: "var(--mui-palette-warning-contrastText)";
-    readonly WARNING_DARK: "var(--mui-palette-warning-dark)";
-    readonly WARNING_LIGHT: "var(--mui-palette-warning-light)";
-    readonly WARNING_LIGHTEST: "var(--mui-palette-warning-lightest)";
-    readonly WARNING_MAIN: "var(--mui-palette-warning-main)";
+    readonly ALERT_LIGHT: "var(--palette-alert-light)";
+    readonly ALERT_LIGHTEST: "var(--palette-alert-lightest)";
+    readonly ALERT_MAIN: "var(--palette-alert-main)";
+    readonly BACKGROUND_DEFAULT: "var(--palette-background-default)";
+    readonly BACKGROUND_PAPER: "var(--palette-background-paper)";
+    readonly COMMON_BACKGROUND: "var(--palette-common-background)";
+    readonly COMMON_BLACK: "var(--palette-common-black)";
+    readonly COMMON_WHITE: "var(--palette-common-white)";
+    readonly ERROR_CONTRAST_TEXT: "var(--palette-error-contrastText)";
+    readonly ERROR_DARK: "var(--palette-error-dark)";
+    readonly ERROR_LIGHT: "var(--palette-error-light)";
+    readonly ERROR_MAIN: "var(--palette-error-main)";
+    readonly INFO_CONTRAST_TEXT: "var(--palette-info-contrastText)";
+    readonly INFO_DARK: "var(--palette-info-dark)";
+    readonly INFO_LIGHT: "var(--palette-info-light)";
+    readonly INFO_LIGHTEST: "var(--palette-info-lightest)";
+    readonly INFO_MAIN: "var(--palette-info-main)";
+    readonly INK_LIGHT: "var(--palette-ink-light)";
+    readonly INK_MAIN: "var(--palette-ink-main)";
+    readonly PRIMARY_CONTRAST_TEXT: "var(--palette-primary-contrastText)";
+    readonly PRIMARY_DARK: "var(--palette-primary-dark)";
+    readonly PRIMARY_LIGHT: "var(--palette-primary-light)";
+    readonly PRIMARY_LIGHTEST: "var(--palette-primary-lightest)";
+    readonly PRIMARY_MAIN: "var(--palette-primary-main)";
+    readonly SECONDARY_CONTRAST_TEXT: "var(--palette-secondary-contrastText)";
+    readonly SECONDARY_DARK: "var(--palette-secondary-dark)";
+    readonly SECONDARY_LIGHT: "var(--palette-secondary-light)";
+    readonly SECONDARY_MAIN: "var(--palette-secondary-main)";
+    readonly SMOKE_DARK: "var(--palette-smoke-dark)";
+    readonly SMOKE_LIGHT: "var(--palette-smoke-light)";
+    readonly SMOKE_LIGHTEST: "var(--palette-smoke-lightest)";
+    readonly SMOKE_MAIN: "var(--palette-smoke-main)";
+    readonly SUCCESS_CONTRAST_TEXT: "var(--palette-success-contrastText)";
+    readonly SUCCESS_DARK: "var(--palette-success-dark)";
+    readonly SUCCESS_LIGHT: "var(--palette-success-light)";
+    readonly SUCCESS_LIGHTEST: "var(--palette-success-lightest)";
+    readonly SUCCESS_MAIN: "var(--palette-success-main)";
+    readonly TEXT_DISABLED: "var(--palette-text-disabled)";
+    readonly TEXT_PRIMARY: "var(--palette-text-primary)";
+    readonly TEXT_SECONDARY: "var(--palette-text-secondary)";
+    readonly WARNING_CONTRAST_TEXT: "var(--palette-warning-contrastText)";
+    readonly WARNING_DARK: "var(--palette-warning-dark)";
+    readonly WARNING_LIGHT: "var(--palette-warning-light)";
+    readonly WARNING_LIGHTEST: "var(--palette-warning-lightest)";
+    readonly WARNING_MAIN: "var(--palette-warning-main)";
 };

package/lib/styles/common/constants/palette.js CHANGED Viewed

@@ -1,47 +1,47 @@
 export const PALETTE = {
-    ALERT_LIGHT: `var(--mui-palette-alert-light)`,
-    ALERT_LIGHTEST: `var(--mui-palette-alert-lightest)`,
-    ALERT_MAIN: `var(--mui-palette-alert-main)`,
-    BACKGROUND_DEFAULT: `var(--mui-palette-background-default)`,
-    BACKGROUND_PAPER: `var(--mui-palette-background-paper)`,
-    COMMON_BACKGROUND: `var(--mui-palette-common-background)`,
-    COMMON_BLACK: `var(--mui-palette-common-black)`,
-    COMMON_WHITE: `var(--mui-palette-common-white)`,
-    ERROR_CONTRAST_TEXT: `var(--mui-palette-error-contrastText)`,
-    ERROR_DARK: `var(--mui-palette-error-dark)`,
-    ERROR_LIGHT: `var(--mui-palette-error-light)`,
-    ERROR_MAIN: `var(--mui-palette-error-main)`,
-    INFO_CONTRAST_TEXT: `var(--mui-palette-info-contrastText)`,
-    INFO_DARK: `var(--mui-palette-info-dark)`,
-    INFO_LIGHT: `var(--mui-palette-info-light)`,
-    INFO_LIGHTEST: `var(--mui-palette-info-lightest)`,
-    INFO_MAIN: `var(--mui-palette-info-main)`,
-    INK_LIGHT: `var(--mui-palette-ink-light)`,
-    INK_MAIN: `var(--mui-palette-ink-main)`,
-    PRIMARY_CONTRAST_TEXT: `var(--mui-palette-primary-contrastText)`,
-    PRIMARY_DARK: `var(--mui-palette-primary-dark)`,
-    PRIMARY_LIGHT: `var(--mui-palette-primary-light)`,
-    PRIMARY_LIGHTEST: `var(--mui-palette-primary-lightest)`,
-    PRIMARY_MAIN: `var(--mui-palette-primary-main)`,
-    SECONDARY_CONTRAST_TEXT: `var(--mui-palette-secondary-contrastText)`,
-    SECONDARY_DARK: `var(--mui-palette-secondary-dark)`,
-    SECONDARY_LIGHT: `var(--mui-palette-secondary-light)`,
-    SECONDARY_MAIN: `var(--mui-palette-secondary-main)`,
-    SMOKE_DARK: `var(--mui-palette-smoke-dark)`,
-    SMOKE_LIGHT: `var(--mui-palette-smoke-light)`,
-    SMOKE_LIGHTEST: `var(--mui-palette-smoke-lightest)`,
-    SMOKE_MAIN: `var(--mui-palette-smoke-main)`,
-    SUCCESS_CONTRAST_TEXT: `var(--mui-palette-success-contrastText)`,
-    SUCCESS_DARK: `var(--mui-palette-success-dark)`,
-    SUCCESS_LIGHT: `var(--mui-palette-success-light)`,
-    SUCCESS_LIGHTEST: `var(--mui-palette-success-lightest)`,
-    SUCCESS_MAIN: `var(--mui-palette-success-main)`,
-    TEXT_DISABLED: `var(--mui-palette-text-disabled)`,
-    TEXT_PRIMARY: `var(--mui-palette-text-primary)`,
-    TEXT_SECONDARY: `var(--mui-palette-text-secondary)`,
-    WARNING_CONTRAST_TEXT: `var(--mui-palette-warning-contrastText)`,
-    WARNING_DARK: `var(--mui-palette-warning-dark)`,
-    WARNING_LIGHT: `var(--mui-palette-warning-light)`,
-    WARNING_LIGHTEST: `var(--mui-palette-warning-lightest)`,
-    WARNING_MAIN: `var(--mui-palette-warning-main)`,
+    ALERT_LIGHT: `var(--palette-alert-light)`,
+    ALERT_LIGHTEST: `var(--palette-alert-lightest)`,
+    ALERT_MAIN: `var(--palette-alert-main)`,
+    BACKGROUND_DEFAULT: `var(--palette-background-default)`,
+    BACKGROUND_PAPER: `var(--palette-background-paper)`,
+    COMMON_BACKGROUND: `var(--palette-common-background)`,
+    COMMON_BLACK: `var(--palette-common-black)`,
+    COMMON_WHITE: `var(--palette-common-white)`,
+    ERROR_CONTRAST_TEXT: `var(--palette-error-contrastText)`,
+    ERROR_DARK: `var(--palette-error-dark)`,
+    ERROR_LIGHT: `var(--palette-error-light)`,
+    ERROR_MAIN: `var(--palette-error-main)`,
+    INFO_CONTRAST_TEXT: `var(--palette-info-contrastText)`,
+    INFO_DARK: `var(--palette-info-dark)`,
+    INFO_LIGHT: `var(--palette-info-light)`,
+    INFO_LIGHTEST: `var(--palette-info-lightest)`,
+    INFO_MAIN: `var(--palette-info-main)`,
+    INK_LIGHT: `var(--palette-ink-light)`,
+    INK_MAIN: `var(--palette-ink-main)`,
+    PRIMARY_CONTRAST_TEXT: `var(--palette-primary-contrastText)`,
+    PRIMARY_DARK: `var(--palette-primary-dark)`,
+    PRIMARY_LIGHT: `var(--palette-primary-light)`,
+    PRIMARY_LIGHTEST: `var(--palette-primary-lightest)`,
+    PRIMARY_MAIN: `var(--palette-primary-main)`,
+    SECONDARY_CONTRAST_TEXT: `var(--palette-secondary-contrastText)`,
+    SECONDARY_DARK: `var(--palette-secondary-dark)`,
+    SECONDARY_LIGHT: `var(--palette-secondary-light)`,
+    SECONDARY_MAIN: `var(--palette-secondary-main)`,
+    SMOKE_DARK: `var(--palette-smoke-dark)`,
+    SMOKE_LIGHT: `var(--palette-smoke-light)`,
+    SMOKE_LIGHTEST: `var(--palette-smoke-lightest)`,
+    SMOKE_MAIN: `var(--palette-smoke-main)`,
+    SUCCESS_CONTRAST_TEXT: `var(--palette-success-contrastText)`,
+    SUCCESS_DARK: `var(--palette-success-dark)`,
+    SUCCESS_LIGHT: `var(--palette-success-light)`,
+    SUCCESS_LIGHTEST: `var(--palette-success-lightest)`,
+    SUCCESS_MAIN: `var(--palette-success-main)`,
+    TEXT_DISABLED: `var(--palette-text-disabled)`,
+    TEXT_PRIMARY: `var(--palette-text-primary)`,
+    TEXT_SECONDARY: `var(--palette-text-secondary)`,
+    WARNING_CONTRAST_TEXT: `var(--palette-warning-contrastText)`,
+    WARNING_DARK: `var(--palette-warning-dark)`,
+    WARNING_LIGHT: `var(--palette-warning-light)`,
+    WARNING_LIGHTEST: `var(--palette-warning-lightest)`,
+    WARNING_MAIN: `var(--palette-warning-main)`,
 };

package/lib/styles/common/constants/shadows.js CHANGED Viewed

@@ -1,5 +1,5 @@
 export const SHADOWS = {
-    "00": `var(--mui-shadows-0)`,
-    "01": `var(--mui-shadows-1)`,
-    "02": `var(--mui-shadows-2)`,
+    "00": `var(--shadows-0)`,
+    "01": `var(--shadows-1)`,
+    "02": `var(--shadows-2)`,
 };

package/lib/styles/common/mixins/breakpoints.d.ts CHANGED Viewed

@@ -1,9 +1,11 @@
-import { ThemeProps } from "../../../theme/theme";
+import { ThemeProps } from "../../../theme/types";
 export declare const bpDown820: ({ theme }: ThemeProps) => string;
 export declare const bpDown1024: ({ theme }: ThemeProps) => string;
-export declare const mediaDesktopSmallDown: ({ theme }: ThemeProps) => string;
-export declare const mediaDesktopSmallUp: ({ theme }: ThemeProps) => string;
-export declare const mediaDesktopUp: ({ theme }: ThemeProps) => string;
-export declare const mediaTabletDown: ({ theme }: ThemeProps) => string;
-export declare const mediaTabletUp: ({ theme }: ThemeProps) => string;
-export declare const media1366Up: ({ theme }: ThemeProps) => string;
+export declare const bpUp1366: ({ theme }: ThemeProps) => string;
+export declare const bpDownLg: ({ theme }: ThemeProps) => string;
+export declare const bpDownMd: ({ theme }: ThemeProps) => string;
+export declare const bpDownSm: ({ theme }: ThemeProps) => string;
+export declare const bpUpLg: ({ theme }: ThemeProps) => string;
+export declare const bpUpMd: ({ theme }: ThemeProps) => string;
+export declare const bpUpSm: ({ theme }: ThemeProps) => string;
+export declare const bpUpXs: ({ theme }: ThemeProps) => string;

package/lib/styles/common/mixins/breakpoints.js CHANGED Viewed

@@ -1,9 +1,10 @@
-import { DESKTOP, DESKTOP_SM, TABLET } from "../../../theme/common/breakpoints";
 export const bpDown820 = ({ theme }) => theme.breakpoints.down(820);
 export const bpDown1024 = ({ theme }) => theme.breakpoints.down(1024);
-export const mediaDesktopSmallDown = ({ theme }) => theme.breakpoints.down(DESKTOP_SM);
-export const mediaDesktopSmallUp = ({ theme }) => theme.breakpoints.up(DESKTOP_SM);
-export const mediaDesktopUp = ({ theme }) => theme.breakpoints.up(DESKTOP);
-export const mediaTabletDown = ({ theme }) => theme.breakpoints.down(TABLET);
-export const mediaTabletUp = ({ theme }) => theme.breakpoints.up(TABLET);
-export const media1366Up = ({ theme }) => theme.breakpoints.up(1366);
+export const bpUp1366 = ({ theme }) => theme.breakpoints.up(1366);
+export const bpDownLg = ({ theme }) => theme.breakpoints.down("lg");
+export const bpDownMd = ({ theme }) => theme.breakpoints.down("md");
+export const bpDownSm = ({ theme }) => theme.breakpoints.down("sm");
+export const bpUpLg = ({ theme }) => theme.breakpoints.up("lg");
+export const bpUpMd = ({ theme }) => theme.breakpoints.up("md");
+export const bpUpSm = ({ theme }) => theme.breakpoints.up("sm");
+export const bpUpXs = ({ theme }) => theme.breakpoints.up("xs");

package/lib/styles/common/mui/typography.d.ts CHANGED Viewed

@@ -1,9 +1,38 @@
-import { TypographyOwnProps } from "@mui/material";
 type TypographyPropsOptions = {
     COLOR: typeof COLOR;
     VARIANT: typeof VARIANT;
 };
-declare const COLOR: Record<string, TypographyOwnProps["color"]>;
-declare const VARIANT: Record<string, TypographyOwnProps["variant"]>;
+declare const COLOR: {
+    readonly ERROR: "error";
+    readonly INFO: "info";
+    readonly INHERIT: "inherit";
+    readonly INK_LIGHT: "ink.light";
+    readonly INK_MAIN: "ink.main";
+    readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
+    readonly SUCCESS: "success";
+    readonly TEXT_DISABLED: "textDisabled";
+    readonly TEXT_PRIMARY: "textPrimary";
+    readonly TEXT_SECONDARY: "textSecondary";
+    readonly WARNING: "warning";
+};
+declare const VARIANT: {
+    readonly BODY_400: "body-400";
+    readonly BODY_400_2_LINES: "body-400-2lines";
+    readonly BODY_500: "body-500";
+    readonly BODY_LARGE_400: "body-large-400";
+    readonly BODY_LARGE_400_2_LINES: "body-large-400-2lines";
+    readonly BODY_LARGE_500: "body-large-500";
+    readonly BODY_SMALL_400: "body-small-400";
+    readonly BODY_SMALL_400_2_LINES: "body-small-400-2lines";
+    readonly BODY_SMALL_500: "body-small-500";
+    readonly HEADING: "heading";
+    readonly HEADING_LARGE: "heading-large";
+    readonly HEADING_SMALL: "heading-small";
+    readonly HEADING_XLARGE: "heading-xlarge";
+    readonly HEADING_XSMALL: "heading-xsmall";
+    readonly INHERIT: "inherit";
+    readonly UPPERCASE_500: "uppercase-500";
+};
 export declare const TYPOGRAPHY_PROPS: TypographyPropsOptions;
 export {};

package/lib/styles/common/mui/typography.js CHANGED Viewed

@@ -1,22 +1,34 @@
 const COLOR = {
     ERROR: "error",
+    INFO: "info",
     INHERIT: "inherit",
     INK_LIGHT: "ink.light",
     INK_MAIN: "ink.main",
     PRIMARY: "primary",
+    SECONDARY: "secondary",
+    SUCCESS: "success",
+    TEXT_DISABLED: "textDisabled",
+    TEXT_PRIMARY: "textPrimary",
+    TEXT_SECONDARY: "textSecondary",
+    WARNING: "warning",
 };
 const VARIANT = {
+    BODY_400: "body-400",
+    BODY_400_2_LINES: "body-400-2lines",
+    BODY_500: "body-500",
+    BODY_LARGE_400: "body-large-400",
+    BODY_LARGE_400_2_LINES: "body-large-400-2lines",
+    BODY_LARGE_500: "body-large-500",
+    BODY_SMALL_400: "body-small-400",
+    BODY_SMALL_400_2_LINES: "body-small-400-2lines",
+    BODY_SMALL_500: "body-small-500",
+    HEADING: "heading",
+    HEADING_LARGE: "heading-large",
+    HEADING_SMALL: "heading-small",
+    HEADING_XLARGE: "heading-xlarge",
+    HEADING_XSMALL: "heading-xsmall",
     INHERIT: "inherit",
-    TEXT_BODY_400: "text-body-400",
-    TEXT_BODY_400_2_LINES: "text-body-400-2lines",
-    TEXT_BODY_500: "text-body-500",
-    TEXT_BODY_LARGE_500: "text-body-large-500",
-    TEXT_BODY_SMALL_400: "text-body-small-400",
-    TEXT_BODY_SMALL_500: "text-body-small-500",
-    TEXT_HEADING_LARGE: "text-heading-large",
-    TEXT_HEADING_SMALL: "text-heading-small",
-    TEXT_HEADING_XSMALL: "text-heading-xsmall",
-    TEXT_UPPERCASE_500: "text-uppercase-500",
+    UPPERCASE_500: "uppercase-500",
 };
 export const TYPOGRAPHY_PROPS = {
     COLOR,

package/lib/theme/common/breakpoints.d.ts CHANGED Viewed

@@ -1,29 +1,8 @@
-import { Breakpoint } from "@mui/material";
+import { ThemeOptions } from "@mui/material";
 /**
- * Breakpoints
+ * Creates breakpoint configuration for theme creation.
+ * Merges default breakpoint values with any custom breakpoints provided in theme options.
+ * @param themeOptions - Theme options.
+ * @returns Breakpoint configuration object with values for xs, sm, md, lg breakpoints.
  */
-declare enum BREAKPOINTS {
-    DESKTOP = 1440,
-    DESKTOP_SM = 1280,
-    MOBILE = 0,
-    TABLET = 768
-}
-export declare const DESKTOP: Breakpoint;
-export declare const DESKTOP_SM: Breakpoint;
-export declare const MOBILE: Breakpoint;
-export declare const TABLET: Breakpoint;
-/**
- * Breakpoints constants
- */
-export declare const desktop = BREAKPOINTS.DESKTOP;
-export declare const desktopSm = BREAKPOINTS.DESKTOP_SM;
-export declare const mobile = BREAKPOINTS.MOBILE;
-export declare const tablet = BREAKPOINTS.TABLET;
-/**
- * Breakpoints queries
- */
-export declare const desktopUp = "@media (min-width: 1440px)";
-export declare const desktopSmUp = "@media (min-width: 1280px)";
-export declare const mobileUp = "@media (min-width: 0px)";
-export declare const tabletUp = "@media (min-width: 768px)";
-export {};
+export declare const breakpoints: (themeOptions: ThemeOptions) => ThemeOptions["breakpoints"];

package/lib/theme/common/breakpoints.js CHANGED Viewed

@@ -1,37 +1,15 @@
 /**
- * Breakpoints
- */
-var BREAKPOINTS;
-(function (BREAKPOINTS) {
-    BREAKPOINTS[BREAKPOINTS["DESKTOP"] = 1440] = "DESKTOP";
-    BREAKPOINTS[BREAKPOINTS["DESKTOP_SM"] = 1280] = "DESKTOP_SM";
-    BREAKPOINTS[BREAKPOINTS["MOBILE"] = 0] = "MOBILE";
-    BREAKPOINTS[BREAKPOINTS["TABLET"] = 768] = "TABLET";
-})(BREAKPOINTS || (BREAKPOINTS = {}));
-/**
- * Breakpoint key constants
- */
-const BREAKPOINT_KEY = {
-    DESKTOP: "lg",
-    DESKTOP_SM: "md",
-    MOBILE: "xs",
-    TABLET: "sm",
-};
-export const DESKTOP = BREAKPOINT_KEY.DESKTOP;
-export const DESKTOP_SM = BREAKPOINT_KEY.DESKTOP_SM;
-export const MOBILE = BREAKPOINT_KEY.MOBILE;
-export const TABLET = BREAKPOINT_KEY.TABLET;
-/**
- * Breakpoints constants
- */
-export const desktop = BREAKPOINTS.DESKTOP;
-export const desktopSm = BREAKPOINTS.DESKTOP_SM;
-export const mobile = BREAKPOINTS.MOBILE;
-export const tablet = BREAKPOINTS.TABLET;
-/**
- * Breakpoints queries
- */
-export const desktopUp = `@media (min-width: ${desktop}px)`;
-export const desktopSmUp = `@media (min-width: ${desktopSm}px)`;
-export const mobileUp = `@media (min-width: ${mobile}px)`;
-export const tabletUp = `@media (min-width: ${tablet}px)`;
+ * Creates breakpoint configuration for theme creation.
+ * Merges default breakpoint values with any custom breakpoints provided in theme options.
+ * @param themeOptions - Theme options.
+ * @returns Breakpoint configuration object with values for xs, sm, md, lg breakpoints.
+ */
+export const breakpoints = (themeOptions) => ({
+    values: {
+        lg: 1440,
+        md: 1280,
+        sm: 768,
+        xs: 0,
+        ...themeOptions.breakpoints?.values,
+    },
+});