@databiosphere/findable-ui 41.2.0 → 42.0.0

package/tests/theme.test.ts

@@ -0,0 +1,465 @@
+import {
+  createTheme,
+  CssVarsTheme,
+  Palette,
+  PaletteColor,
+  Theme,
+  ThemeOptions,
+  ThemeVars,
+  TypographyStyle,
+} from "@mui/material";
+import { components as componentsValues } from "../src/theme/common/components";
+import { palette as paletteValues } from "../src/theme/common/palette";
+import { typography as typographyValues } from "../src/theme/common/typography";
+import { createAppTheme } from "../src/theme/theme";
+
+type GenericRecord<T = unknown> = Record<string, T>;
+
+const CUSTOM_BODY_400: TypographyStyle = {
+  fontSize: "80px",
+};
+
+const CUSTOM_BREAKPOINTS = {
+  values: {
+    lg: 1280,
+    md: 1024,
+    sm: 600,
+    xl: 1600,
+    xs: 0,
+  },
+};
+
+const CUSTOM_PALETTE_PRIMARY = {
+  main: "#00ffb6",
+};
+
+const DEFAULT_BODY_400: TypographyStyle = {
+  fontFamily: "Inter",
+  fontSize: "14px",
+  fontWeight: 400,
+  lineHeight: "20px",
+};
+
+const DEFAULT_BREAKPOINTS = {
+  values: {
+    lg: 1440,
+    md: 1280,
+    sm: 768,
+    xs: 0,
+  },
+};
+
+const DEFAULT_PALETTE_ALERT = {
+  light: "#FED3D1",
+  lightest: "#FFF4F4",
+  main: "#B42318",
+};
+
+const DEFAULT_PALETTE_BACKGROUND = {
+  default: "#F6F6F7",
+};
+
+const DEFAULT_PALETTE_INFO = {
+  contrastText: "#00729C",
+  light: "#97D6EA",
+  lightest: "#F2FAFC",
+  main: "#00729C",
+};
+
+const DEFAULT_PALETTE_INK = {
+  light: "#637381",
+  main: "#212B36",
+};
+
+const DEFAULT_PALETTE_PRIMARY = {
+  dark: "#005EA9",
+  lightest: "#E6EFF6",
+  main: "#1C7CC7",
+};
+
+const DEFAULT_PALETTE_SMOKE = {
+  dark: "#C4CDD5",
+  light: "#F6F6F7",
+  lightest: "#FAFBFB",
+  main: "#E1E3E5",
+};
+
+const DEFAULT_PALETTE_SUCCESS = {
+  light: "#AEE9D1",
+  lightest: "#F1F8F5",
+  main: "#287555",
+};
+
+const DEFAULT_PALETTE_TEXT = {
+  primary: "#212B36",
+};
+
+const DEFAULT_PALETTE_WARNING = {
+  contrastText: "#B54708",
+  light: "#FFD79D",
+  lightest: "#FFFAEB",
+  main: "#B54708",
+};
+
+const DEFAULT_SHADOWS = [
+  "none",
+  "0 1px 4px 0 #00000012",
+  "0 8px 8px -4px #10182808, 0 20px 24px -4px #10182814",
+];
+
+const CUSTOM_OPTIONS: ThemeOptions = {
+  breakpoints: CUSTOM_BREAKPOINTS,
+  palette: { primary: CUSTOM_PALETTE_PRIMARY },
+  typography: {
+    "body-400": CUSTOM_BODY_400,
+    fontFamily: "Roboto",
+  },
+};
+
+describe("Theme Configuration", () => {
+  let baseTheme: Theme;
+  let theme: Theme;
+  let customTheme: Theme;
+
+  beforeEach(() => {
+    baseTheme = createTheme();
+    theme = createAppTheme();
+    customTheme = createAppTheme(CUSTOM_OPTIONS);
+  });
+
+  describe("CSS Variables", () => {
+    it("should have css variables enabled", () => {
+      expect("vars" in theme).toBe(true);
+    });
+  });
+
+  describe("CSS Variables Configuration", () => {
+    let vars: CssVarsTheme["vars"];
+
+    beforeEach(() => {
+      vars = theme.vars;
+      expect(vars).toBeDefined();
+    });
+
+    it("should have custom 'app' var exposed as CSS variables", () => {
+      const appValue = vars.app?.fontFamily;
+      expect(appValue).toBeDefined();
+      expect(appValue).toContain(theme.typography.fontFamily);
+    });
+
+    it("should have fonts exposed as CSS variables", () => {
+      expect(vars.font).toBeDefined();
+
+      Object.keys(typographyValues(baseTheme))
+        .filter(filterTypographyVariants)
+        .forEach((variant) => {
+          // Test the variant exists in both theme and vars.
+          expect(variant in theme.typography).toBe(true);
+          expect(variant in vars.font).toBe(true);
+
+          const typography = theme.typography as unknown as GenericRecord;
+          const font = vars.font as unknown as GenericRecord;
+
+          // Get the font and typography variable value.
+          const fontValue = font[variant];
+          const typographyValue = typography[variant] as TypographyStyle;
+
+          // Ensure the font family is defined.
+          expect(typographyValue.fontFamily).toBeDefined();
+
+          // Check variable pattern.
+          expect(fontValue).toMatch(new RegExp(`^var\\(--font-${variant}`));
+
+          // Check font size and line height format.
+          expect(fontValue).toMatch(/\d+px\/\d+px/);
+
+          // Check ends with font-family.
+          expect(fontValue).toMatch(
+            new RegExp(`${typographyValue.fontFamily}\\)$`)
+          );
+
+          // Full pattern test.
+          expect(fontValue).toMatch(
+            new RegExp(
+              `^var\\(--font-${variant},\\s+\\d+\\s+\\d+px\\/\\d+px\\s+${typographyValue.fontFamily}\\)$`
+            )
+          );
+        });
+    });
+
+    it("should have palette colors exposed as CSS variables", () => {
+      expect(vars.palette).toBeDefined();
+
+      Object.keys(paletteValues).forEach((color) => {
+        // Test the color exists in both theme and vars.
+        expect(color in theme.palette).toBe(true);
+        expect(color in vars.palette).toBe(true);
+
+        const palette = theme.palette;
+        const paletteColor = palette[color as keyof Palette];
+        const varsPalette = vars.palette;
+        const varsColor = varsPalette[color as keyof ThemeVars["palette"]];
+
+        // We only expect the return varsColor to be an object.
+        expect(varsColor).toBeInstanceOf(Object);
+
+        Object.entries(paletteColor).forEach(([shade, value]) => {
+          // Test the shade exists in the vars.
+          expect(shade in (varsColor as object)).toBe(true);
+
+          // Full pattern test.
+          expect((vars.palette as any)[color][shade]).toEqual(
+            `var(--palette-${color}-${shade}, ${value})`
+          );
+        });
+      });
+    });
+
+    it("should have shadow values exposed as CSS variables", () => {
+      expect(vars.shadows).toBeDefined();
+      vars.shadows.forEach((shadow, i) => {
+        // Full pattern test.
+        expect(shadow).toEqual(`var(--shadows-${i}, ${theme.shadows[i]})`);
+      });
+    });
+  });
+
+  describe("Breakpoint Configuration", () => {
+    it("should use default breakpoint values when no custom options provided", () => {
+      expect(theme.breakpoints.values).toEqual(DEFAULT_BREAKPOINTS.values);
+    });
+
+    it("should override breakpoints when custom values provided", () => {
+      expect(customTheme.breakpoints.values).toEqual(CUSTOM_BREAKPOINTS.values);
+    });
+  });
+
+  describe("Components Configuration", () => {
+    it("should initialize with default components settings", () => {
+      expect(theme.components).toBeDefined();
+    });
+
+    it("should apply configured components variants", () => {
+      expect(componentsValues).toBeDefined();
+      Object.keys(componentsValues!).forEach((component) => {
+        expect(component in theme.components!).toBe(true);
+      });
+    });
+
+    it("should override MuiToolbar component breakpoints when custom values provided", () => {
+      // Get the component styleOverrides.
+      const styleOverrides = customTheme.components?.MuiToolbar?.styleOverrides;
+      expect(styleOverrides).toBeDefined();
+
+      // The root property should be a function that receives theme.
+      const rootFunction = styleOverrides?.root;
+      expect(typeof rootFunction).toBe("function");
+
+      if (typeof rootFunction === "function") {
+        // Call the function with the custom theme to get the computed styles.
+        const computedStyles = rootFunction({
+          ownerState: {},
+          theme: customTheme,
+        });
+
+        // Verify that the computed styles contain the custom breakpoint values.
+        // The breakpoint functions should generate media queries using custom values.
+        expect(computedStyles).toBeDefined();
+
+        const styleKeys = Object.keys(computedStyles!);
+
+        // Confirm that breakpoint-based custom styles are present.
+        expect(
+          hasBreakpointKey(styleKeys, CUSTOM_BREAKPOINTS.values.xs)
+        ).toBeTruthy();
+        expect(
+          hasBreakpointKey(styleKeys, CUSTOM_BREAKPOINTS.values.lg)
+        ).toBeTruthy();
+      }
+    });
+  });
+
+  describe("Palette Configuration", () => {
+    it("should initialize with default palette settings", () => {
+      expect(theme.palette).toBeDefined();
+    });
+
+    it("should apply default alert colors", () => {
+      expect("alert" in theme.palette).toBe(true);
+      validatePaletteColor(theme.palette.alert, DEFAULT_PALETTE_ALERT);
+    });
+
+    it("should apply default background color", () => {
+      expect(theme.palette.background.default).toEqual(
+        DEFAULT_PALETTE_BACKGROUND.default
+      );
+    });
+
+    it("should apply default info colors", () => {
+      expect("info" in theme.palette).toBe(true);
+      validatePaletteColor(theme.palette.info, DEFAULT_PALETTE_INFO);
+    });
+
+    it("should apply default ink colors", () => {
+      expect("ink" in theme.palette).toBe(true);
+      validatePaletteColor(theme.palette.ink, DEFAULT_PALETTE_INK);
+    });
+
+    it("should apply default primary color", () => {
+      validatePaletteColor(theme.palette.primary, DEFAULT_PALETTE_PRIMARY);
+    });
+
+    it("should apply default smoke colors", () => {
+      expect("smoke" in theme.palette).toBe(true);
+      validatePaletteColor(theme.palette.smoke, DEFAULT_PALETTE_SMOKE);
+    });
+
+    it("should apply default success color", () => {
+      validatePaletteColor(theme.palette.success, DEFAULT_PALETTE_SUCCESS);
+    });
+
+    it("should apply default text color", () => {
+      expect(theme.palette.text.primary).toEqual(DEFAULT_PALETTE_TEXT.primary);
+    });
+
+    it("should apply default warning colors", () => {
+      validatePaletteColor(theme.palette.warning, DEFAULT_PALETTE_WARNING);
+    });
+
+    it("should apply custom primary color when specified", () => {
+      expect(customTheme.palette.primary.main).toEqual(
+        CUSTOM_PALETTE_PRIMARY.main
+      );
+      // Validate that primary dark and lightest are not overridden.
+      validatePaletteColor(customTheme.palette.primary, {
+        dark: DEFAULT_PALETTE_PRIMARY.dark,
+        lightest: DEFAULT_PALETTE_PRIMARY.lightest,
+      });
+    });
+  });
+
+  describe("Shadow Configuration", () => {
+    it("should initialize with default shadow settings", () => {
+      expect(theme.shadows).toBeDefined();
+    });
+
+    it("should have the correct number of shadows", () => {
+      expect(theme.shadows.length).toBe(25);
+    });
+
+    it("should have the correct default shadow values", () => {
+      expect(theme.shadows[0]).toBe(DEFAULT_SHADOWS[0]);
+      expect(theme.shadows[1]).toBe(DEFAULT_SHADOWS[1]);
+      expect(theme.shadows[2]).toBe(DEFAULT_SHADOWS[2]);
+    });
+  });
+
+  describe("Typography Configuration", () => {
+    it("should initialize with default typography settings", () => {
+      expect(theme.typography).toBeDefined();
+    });
+
+    it("should apply configured typography variants", () => {
+      Object.keys(typographyValues(baseTheme))
+        .filter(filterTypographyVariants)
+        .forEach((variant) => {
+          expect(variant in theme.typography).toBe(true);
+        });
+    });
+
+    it("should apply configured body-400 typography styles", () => {
+      expect("body-400" in theme.typography).toBe(true);
+      validateTypographyStyle(theme.typography["body-400"], DEFAULT_BODY_400);
+    });
+
+    it("should override body-400 typography styles when custom values provided", () => {
+      expect("body-400" in customTheme.typography).toBe(true);
+      validateTypographyStyle(
+        customTheme.typography["body-400"],
+        CUSTOM_BODY_400
+      );
+    });
+
+    it("should apply custom body-400 styles to CSS variables", () => {
+      const fontValue = customTheme.vars?.font?.["body-400"];
+      const variant = customTheme.typography["body-400"];
+      expect(fontValue).toBeDefined();
+      expect(fontValue).toContain(variant.fontSize);
+    });
+
+    it("should apply custom fontFamily to CSS variables", () => {
+      const appValue = customTheme.vars?.app?.fontFamily;
+      const fontFamily = customTheme.typography.fontFamily;
+      expect(appValue).toBeDefined();
+      expect(appValue).toContain(fontFamily);
+    });
+  });
+});
+
+/**
+ * Filters typography variant keys to exclude specific predefined variant types.
+ * @param value - The typography variant key to be evaluated.
+ * @returns Returns true if the variant key is not among the excluded keys; otherwise false.
+ */
+function filterTypographyVariants(value: string): boolean {
+  return !/fontFamily|fontSize|fontWeightLight|fontWeightRegular|fontWeightMedium|fontWeightBold|htmlFontSize|allVariants/.test(
+    value
+  );
+}
+
+/**
+ * Checks if a style key exists for a given breakpoint.
+ * @param keys - Style keys.
+ * @param breakpoint - Breakpoint.
+ * @returns True if the style key exists for the given breakpoint, false otherwise.
+ */
+function hasBreakpointKey(keys: string[], breakpoint: number): boolean {
+  return keys.some(
+    (key) => /^@media/.test(key) && key.includes(String(breakpoint))
+  );
+}
+
+/**
+ * Type guard to check if a value is a PaletteColor.
+ * @param color - Color.
+ * @returns True if the color is a valid PaletteColor, false otherwise.
+ */
+function isPaletteColor(color: unknown): color is PaletteColor {
+  return (
+    color !== null &&
+    typeof color === "object" &&
+    "light" in color &&
+    "main" in color
+  );
+}
+
+/**
+ * Validates that a palette color (like theme.palette.alert)
+ * has the expected values for given keys.
+ * @param actual - Actual palette color object to validate.
+ * @param expected - An object containing the expected key-value pairs.
+ */
+function validatePaletteColor(
+  actual: unknown,
+  expected: Record<string, string>
+): void {
+  expect(isPaletteColor(actual)).toBe(true);
+  for (const [key, value] of Object.entries(expected)) {
+    expect((actual as Record<string, unknown>)[key]).toEqual(value);
+  }
+}
+
+/**
+ * Validates that a typography variant (like theme.typography["body-400"])
+ * has the expected typography style values.
+ * @param actual - Actual typography style to validate.
+ * @param expected - Expected typography style values.
+ */
+export function validateTypographyStyle(
+  actual: TypographyStyle,
+  expected: TypographyStyle
+): void {
+  for (const [key, value] of Object.entries(expected)) {
+    expect(actual[key]).toEqual(value);
+  }
+}

package/tests/tsconfig.json

@@ -4,5 +4,5 @@
     "rootDir": "../"
   },
   "extends": "../tsconfig.json",
-  "include": ["./**/*.ts"]
+  "include": ["./**/*.ts", "../types/*.d.ts"]
 }

package/types/data-explorer-ui.d.ts

@@ -122,6 +122,20 @@ declare module "@mui/material/Tabs" {
 /* eslint-disable sonarjs/no-duplicate-string  -- ignoring duplicate strings here */
 
 declare module "@mui/material/styles" {
+  interface CssVarsTheme {
+    vars: CssVarsTheme["vars"] & {
+      app?: {
+        fontFamily?: string;
+      };
+    };
+  }
+
+  interface ThemeVars {
+    app?: {
+      fontFamily?: string;
+    };
+  }
+
   interface BreakpointOverrides {
     lg: true;
     md: true;
@@ -150,42 +164,53 @@ declare module "@mui/material/styles" {
     lightest?: string;
   }
 
+  interface Theme {
+    app?: {
+      fontFamily?: string;
+    };
+  }
+
+  interface ThemeOptions {
+    app?: {
+      fontFamily?: string;
+    };
+  }
+
   interface TypographyVariants {
-    "text-body-400": TypographyStyleOptions;
-    "text-body-400-2lines": TypographyStyleOptions;
-    "text-body-500": TypographyStyleOptions;
-    "text-body-500-2lines": TypographyStyleOptions;
-    "text-body-large-400": TypographyStyleOptions;
-    "text-body-large-400-2lines": TypographyStyleOptions;
-    "text-body-large-500": TypographyStyleOptions;
-    "text-body-small-400": TypographyStyleOptions;
-    "text-body-small-400-2lines": TypographyStyleOptions;
-    "text-body-small-500": TypographyStyleOptions;
-    "text-heading": TypographyStyleOptions;
-    "text-heading-large": TypographyStyleOptions;
-    "text-heading-small": TypographyStyleOptions;
-    "text-heading-xlarge": TypographyStyleOptions;
-    "text-heading-xsmall": TypographyStyleOptions;
-    "text-uppercase-500": TypographyStyleOptions;
+    "body-400": TypographyStyleOptions;
+    "body-400-2lines": TypographyStyleOptions;
+    "body-500": TypographyStyleOptions;
+    "body-large-400": TypographyStyleOptions;
+    "body-large-400-2lines": TypographyStyleOptions;
+    "body-large-500": TypographyStyleOptions;
+    "body-small-400": TypographyStyleOptions;
+    "body-small-400-2lines": TypographyStyleOptions;
+    "body-small-500": TypographyStyleOptions;
+    heading: TypographyStyleOptions;
+    "heading-large": TypographyStyleOptions;
+    "heading-small": TypographyStyleOptions;
+    "heading-xlarge": TypographyStyleOptions;
+    "heading-xsmall": TypographyStyleOptions;
+    "uppercase-500": TypographyStyleOptions;
   }
 
   interface TypographyVariantsOptions {
-    "text-body-400"?: TypographyStyleOptions;
-    "text-body-400-2lines"?: TypographyStyleOptions;
-    "text-body-500"?: TypographyStyleOptions;
-    "text-body-500-2lines"?: TypographyStyleOptions;
-    "text-body-large-400"?: TypographyStyleOptions;
-    "text-body-large-400-2lines"?: TypographyStyleOptions;
-    "text-body-large-500"?: TypographyStyleOptions;
-    "text-body-small-400"?: TypographyStyleOptions;
-    "text-body-small-400-2lines"?: TypographyStyleOptions;
-    "text-body-small-500"?: TypographyStyleOptions;
-    "text-heading"?: TypographyStyleOptions;
-    "text-heading-large"?: TypographyStyleOptions;
-    "text-heading-small"?: TypographyStyleOptions;
-    "text-heading-xlarge"?: TypographyStyleOptions;
-    "text-heading-xsmall"?: TypographyStyleOptions;
-    "text-uppercase-500"?: TypographyStyleOptions;
+    "body-400"?: TypographyStyleOptions;
+    "body-400-2lines"?: TypographyStyleOptions;
+    "body-500"?: TypographyStyleOptions;
+    "body-500-2lines"?: TypographyStyleOptions;
+    "body-large-400"?: TypographyStyleOptions;
+    "body-large-400-2lines"?: TypographyStyleOptions;
+    "body-large-500"?: TypographyStyleOptions;
+    "body-small-400"?: TypographyStyleOptions;
+    "body-small-400-2lines"?: TypographyStyleOptions;
+    "body-small-500"?: TypographyStyleOptions;
+    heading?: TypographyStyleOptions;
+    "heading-large"?: TypographyStyleOptions;
+    "heading-small"?: TypographyStyleOptions;
+    "heading-xlarge"?: TypographyStyleOptions;
+    "heading-xsmall"?: TypographyStyleOptions;
+    "uppercase-500"?: TypographyStyleOptions;
   }
 }
 
@@ -193,22 +218,22 @@ declare module "@mui/material/styles" {
 
 declare module "@mui/material/Typography" {
   interface TypographyPropsVariantOverrides {
-    "text-body-400": true;
-    "text-body-400-2lines": true;
-    "text-body-500": true;
-    "text-body-500-2lines": true;
-    "text-body-large-400": true;
-    "text-body-large-400-2lines": true;
-    "text-body-large-500": true;
-    "text-body-small-400": true;
-    "text-body-small-400-2lines": true;
-    "text-body-small-500": true;
-    "text-heading": true;
-    "text-heading-large": true;
-    "text-heading-small": true;
-    "text-heading-xlarge": true;
-    "text-heading-xsmall": true;
-    "text-uppercase-500": true;
+    "body-400": true;
+    "body-400-2lines": true;
+    "body-500": true;
+    "body-500-2lines": true;
+    "body-large-400": true;
+    "body-large-400-2lines": true;
+    "body-large-500": true;
+    "body-small-400": true;
+    "body-small-400-2lines": true;
+    "body-small-500": true;
+    heading: true;
+    "heading-large": true;
+    "heading-small": true;
+    "heading-xlarge": true;
+    "heading-xsmall": true;
+    "uppercase-500": true;
   }
 }
 

package/lib/styles/common/mixins/colors.d.ts

@@ -1,25 +0,0 @@
-import { CommonColors, PaletteColor } from "@mui/material/styles";
-import { ThemeProps } from "../../../theme/theme";
-export declare const alertLight: ({ theme }: ThemeProps) => PaletteColor["light"];
-export declare const alertLightest: ({ theme, }: ThemeProps) => PaletteColor["lightest"];
-export declare const alertMain: ({ theme }: ThemeProps) => PaletteColor["main"];
-export declare const errorMain: ({ theme }: ThemeProps) => PaletteColor["main"];
-export declare const infoLight: ({ theme }: ThemeProps) => PaletteColor["light"];
-export declare const infoLightest: ({ theme }: ThemeProps) => PaletteColor["lightest"];
-export declare const infoMain: ({ theme }: ThemeProps) => PaletteColor["main"];
-export declare const inkLight: ({ theme }: ThemeProps) => PaletteColor["light"];
-export declare const inkMain: ({ theme }: ThemeProps) => PaletteColor["main"];
-export declare const primaryDark: ({ theme }: ThemeProps) => PaletteColor["dark"];
-export declare const primaryLightest: ({ theme, }: ThemeProps) => PaletteColor["lightest"];
-export declare const primaryMain: ({ theme }: ThemeProps) => PaletteColor["main"];
-export declare const smokeDark: ({ theme }: ThemeProps) => PaletteColor["dark"];
-export declare const smokeLight: ({ theme }: ThemeProps) => PaletteColor["light"];
-export declare const smokeLightest: ({ theme, }: ThemeProps) => PaletteColor["lightest"];
-export declare const smokeMain: ({ theme }: ThemeProps) => PaletteColor["main"];
-export declare const successLight: ({ theme }: ThemeProps) => PaletteColor["light"];
-export declare const successLightest: ({ theme, }: ThemeProps) => PaletteColor["lightest"];
-export declare const successMain: ({ theme }: ThemeProps) => PaletteColor["main"];
-export declare const warningLight: ({ theme }: ThemeProps) => PaletteColor["light"];
-export declare const warningLightest: ({ theme, }: ThemeProps) => PaletteColor["lightest"];
-export declare const warningMain: ({ theme }: ThemeProps) => PaletteColor["main"];
-export declare const white: ({ theme }: ThemeProps) => CommonColors["white"];

package/lib/styles/common/mixins/colors.js

@@ -1,32 +0,0 @@
-// Alert
-export const alertLight = ({ theme }) => theme.palette.alert.light;
-export const alertLightest = ({ theme, }) => theme.palette.alert.lightest;
-export const alertMain = ({ theme }) => theme.palette.alert.main;
-// Error
-export const errorMain = ({ theme }) => theme.palette.error.main;
-// Info
-export const infoLight = ({ theme }) => theme.palette.info.light;
-export const infoLightest = ({ theme }) => theme.palette.info.lightest;
-export const infoMain = ({ theme }) => theme.palette.info.main;
-// Ink
-export const inkLight = ({ theme }) => theme.palette.ink.light;
-export const inkMain = ({ theme }) => theme.palette.ink.main;
-// Primary
-export const primaryDark = ({ theme }) => theme.palette.primary.dark;
-export const primaryLightest = ({ theme, }) => theme.palette.primary.lightest;
-export const primaryMain = ({ theme }) => theme.palette.primary.main;
-// Smoke
-export const smokeDark = ({ theme }) => theme.palette.smoke.dark;
-export const smokeLight = ({ theme }) => theme.palette.smoke.light;
-export const smokeLightest = ({ theme, }) => theme.palette.smoke.lightest;
-export const smokeMain = ({ theme }) => theme.palette.smoke.main;
-// Success
-export const successLight = ({ theme }) => theme.palette.success.light;
-export const successLightest = ({ theme, }) => theme.palette.success.lightest;
-export const successMain = ({ theme }) => theme.palette.success.main;
-// Warning
-export const warningLight = ({ theme }) => theme.palette.warning.light;
-export const warningLightest = ({ theme, }) => theme.palette.warning.lightest;
-export const warningMain = ({ theme }) => theme.palette.warning.main;
-// White
-export const white = ({ theme }) => theme.palette.common.white;