@databiosphere/findable-ui 41.2.0 → 42.0.0

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

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

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

@@ -5,27 +5,39 @@ type TypographyPropsOptions = {
   VARIANT: typeof VARIANT;
 };
 
-const COLOR: Record<string, TypographyOwnProps["color"]> = {
+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",
+} as const satisfies Record<string, TypographyOwnProps["color"]>;
 
-const VARIANT: Record<string, TypographyOwnProps["variant"]> = {
+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",
+} as const satisfies Record<string, TypographyOwnProps["variant"]>;
 
 export const TYPOGRAPHY_PROPS: TypographyPropsOptions = {
   COLOR,

package/src/theme/common/breakpoints.ts

@@ -1,41 +1,19 @@
-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.
  */
-enum BREAKPOINTS {
-  DESKTOP = 1440,
-  DESKTOP_SM = 1280,
-  MOBILE = 0,
-  TABLET = 768,
-}
-
-/**
- * Breakpoint key constants
- */
-const BREAKPOINT_KEY: Record<keyof typeof BREAKPOINTS, Breakpoint> = {
-  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)`;
+export const breakpoints = (
+  themeOptions: ThemeOptions
+): ThemeOptions["breakpoints"] => ({
+  values: {
+    lg: 1440,
+    md: 1280,
+    sm: 768,
+    xs: 0,
+    ...themeOptions.breakpoints?.values,
+  },
+});