@draftbit/theme 49.5.1-312cdf.2

package/src/Provider.tsx

@@ -0,0 +1,124 @@
+import React from "react";
+import { Dimensions, Platform } from "react-native";
+import createThemeValuesProxy from "./createThemeValuesProxy";
+import DefaultTheme from "./DefaultTheme";
+import { Breakpoints, ReadTheme, ValidatedTheme } from "./types";
+
+type ThemeContextType = {
+  theme: ReadTheme;
+  changeTheme: (themeName: string) => void;
+};
+
+const ThemeContext = React.createContext<ThemeContextType>({
+  theme: DefaultTheme,
+  changeTheme: () => {},
+});
+
+type ProviderProps = {
+  themes: ValidatedTheme[];
+  breakpoints: Breakpoints;
+  initialThemeName: string;
+};
+
+const Provider: React.FC<React.PropsWithChildren<ProviderProps>> = ({
+  themes,
+  breakpoints,
+  initialThemeName,
+  children,
+}) => {
+  const initialTheme =
+    themes.find((theme) => theme.name === initialThemeName) ?? DefaultTheme;
+
+  const [currentTheme, setCurrentTheme] = React.useState(initialTheme);
+  const [deviceWidth, setDeviceWidth] = React.useState(
+    Dimensions.get("window").width
+  );
+
+  React.useEffect(() => {
+    const listener = Dimensions.addEventListener("change", ({ window }) =>
+      setDeviceWidth(window.width)
+    );
+    return () => {
+      listener.remove();
+    };
+  });
+
+  const changeTheme = (themeName: string) => {
+    const theme = themes.find((theme) => theme.name === themeName);
+    if (!theme) {
+      console.warn(
+        "Theme with name",
+        themeName,
+        "not found. Make sure it's passed into the top level ThemeProvider"
+      );
+      return;
+    }
+    setCurrentTheme(theme);
+  };
+
+  const proxiedTheme: ReadTheme = React.useMemo(
+    () => ({
+      ...currentTheme,
+      colors: {
+        branding: createThemeValuesProxy(
+          currentTheme.colors.branding,
+          breakpoints,
+          deviceWidth,
+          Platform.OS
+        ),
+        text: createThemeValuesProxy(
+          currentTheme.colors.text,
+          breakpoints,
+          deviceWidth,
+          Platform.OS
+        ),
+        background: createThemeValuesProxy(
+          currentTheme.colors.background,
+          breakpoints,
+          deviceWidth,
+          Platform.OS
+        ),
+        foreground: createThemeValuesProxy(
+          currentTheme.colors.foreground,
+          breakpoints,
+          deviceWidth,
+          Platform.OS
+        ),
+        border: createThemeValuesProxy(
+          currentTheme.colors.border,
+          breakpoints,
+          deviceWidth,
+          Platform.OS
+        ),
+      },
+    }),
+    [currentTheme, deviceWidth, breakpoints]
+  );
+
+  return (
+    <ThemeContext.Provider value={{ theme: proxiedTheme, changeTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+const useTheme = (): ReadTheme => {
+  const { theme } = React.useContext(ThemeContext);
+  return theme;
+};
+
+const useChangeTheme = (): ((themeName: string) => void) => {
+  const { changeTheme } = React.useContext(ThemeContext);
+  return changeTheme;
+};
+
+const withTheme = <Props extends { theme: ReadTheme }>(
+  Component: React.ComponentType<Props>
+): React.ComponentType<Omit<Props, "theme">> => {
+  return (props: Omit<Props, "theme">) => {
+    const { theme } = React.useContext(ThemeContext);
+    return <Component {...(props as Props)} theme={theme} />;
+  };
+};
+
+export { Provider, useTheme, useChangeTheme, withTheme };

package/src/createTheme.js

@@ -0,0 +1,17 @@
+import merge from "deepmerge";
+import { validateBreakpoints, validatePalettes, validateTheme, } from "./validators";
+export default function createTheme({ breakpoints, palettes, theme, baseTheme, }) {
+    validateBreakpoints(breakpoints);
+    validatePalettes(palettes);
+    validateTheme(theme);
+    let resultTheme = theme;
+    if (baseTheme) {
+        validateTheme(baseTheme);
+        resultTheme = merge(baseTheme, theme);
+    }
+    return {
+        ...resultTheme,
+        validated: true,
+    };
+}
+//# sourceMappingURL=createTheme.js.map

package/src/createTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createTheme.js","sourceRoot":"","sources":["createTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,WAAW,CAAC;AAO9B,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,aAAa,GACd,MAAM,cAAc,CAAC;AAEtB,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,WAAW,EACX,QAAQ,EACR,KAAK,EACL,SAAS,GAMV;IACC,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACjC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC3B,aAAa,CAAC,KAAK,CAAC,CAAC;IAErB,IAAI,WAAW,GAAG,KAAK,CAAC;IAExB,IAAI,SAAS,EAAE;QACb,aAAa,CAAC,SAAS,CAAC,CAAC;QACzB,WAAW,GAAG,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;KACvC;IAED,OAAO;QACL,GAAG,WAAW;QACd,SAAS,EAAE,IAAI;KAChB,CAAC;AACJ,CAAC"}

package/src/createTheme.ts

@@ -0,0 +1,40 @@
+import merge from "deepmerge";
+import type {
+  Breakpoints,
+  Theme,
+  ValidatedTheme,
+  ColorPalettes,
+} from "./types";
+import {
+  validateBreakpoints,
+  validatePalettes,
+  validateTheme,
+} from "./validators";
+
+export default function createTheme({
+  breakpoints,
+  palettes,
+  theme,
+  baseTheme,
+}: {
+  breakpoints: Breakpoints;
+  palettes: ColorPalettes;
+  theme: Theme;
+  baseTheme?: Theme;
+}): ValidatedTheme {
+  validateBreakpoints(breakpoints);
+  validatePalettes(palettes);
+  validateTheme(theme);
+
+  let resultTheme = theme;
+
+  if (baseTheme) {
+    validateTheme(baseTheme);
+    resultTheme = merge(baseTheme, theme);
+  }
+
+  return {
+    ...resultTheme,
+    validated: true,
+  };
+}

package/src/createThemeValuesProxy.js

@@ -0,0 +1,96 @@
+import { isObject } from "lodash";
+/**
+ * Creates a proxy for theme value objects to select a value whenever
+ * multiple values are provided for different platforms and/or breakpoints
+ *
+ * Ex: {color: {ios: "blue", android: "red"}}
+ *      -> theme.color returns "blue" when the platform is ios and "red" when android
+ */
+export default function createThemeValuesProxy(value, breakpoints, deviceWidth, devicePlatform) {
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    return new Proxy(value, {
+        get: (target, key) => {
+            const currentValue = target[key];
+            if (!isObject(currentValue)) {
+                return currentValue;
+            }
+            else {
+                const platformKeys = ["ios", "android", "web", "macos", "windows"];
+                const breakpointKeys = Object.keys(breakpoints);
+                const keysType = getKeysType(currentValue, platformKeys, breakpointKeys);
+                if (keysType === "default") {
+                    return createThemeValuesProxy(currentValue, breakpoints, deviceWidth, devicePlatform);
+                }
+                else if (keysType === "platform") {
+                    return getPlatformValue(currentValue, breakpoints, deviceWidth, devicePlatform);
+                }
+                else if (keysType === "breakpoint") {
+                    return getBreakpointValue(currentValue, breakpoints, deviceWidth, devicePlatform);
+                }
+                else {
+                    return undefined;
+                }
+            }
+        },
+        set: () => {
+            throw new Error("Theme is read only, cannot be modified at runtime");
+        },
+    });
+}
+function getKeysType(value, platformKeys, breakpointKeys) {
+    const hasPlatformKeys = platformKeys.some((key) => value[key] !== undefined);
+    const hasBreakpointKeys = breakpointKeys.some((key) => value[key] !== undefined);
+    const hasUserDefinedKeys = Object.keys(value).some((key) => !platformKeys.includes(key) &&
+        !breakpointKeys.includes(key) &&
+        key !== "default");
+    if (!onlyOneTrue(hasPlatformKeys, hasBreakpointKeys, hasUserDefinedKeys) &&
+        !allFalse(hasPlatformKeys, hasBreakpointKeys, hasUserDefinedKeys)) {
+        throw new Error("Cannot mix usage of platform keys, breakpoint keys, and custom defined keys on the same level");
+    }
+    else if (hasPlatformKeys) {
+        return "platform";
+    }
+    else if (hasBreakpointKeys) {
+        return "breakpoint";
+    }
+    else {
+        return "default";
+    }
+}
+function onlyOneTrue(a, b, c) {
+    return [a, b, c].filter((x) => x).length === 1;
+}
+function allFalse(a, b, c) {
+    return [a, b, c].filter((x) => x).length === 0;
+}
+function getPlatformValue(value, breakpoints, deviceWidth, devicePlatform) {
+    var _a;
+    const currentPlatformValue = (_a = value[devicePlatform]) !== null && _a !== void 0 ? _a : value.default;
+    if (!isObject(currentPlatformValue)) {
+        return currentPlatformValue;
+    }
+    else {
+        return createThemeValuesProxy(currentPlatformValue, breakpoints, deviceWidth, devicePlatform);
+    }
+}
+function getBreakpointValue(value, breakpoints, deviceWidth, devicePlatform) {
+    var _a;
+    const keysToBreakpointValue = Object.keys(value).map((key) => [key, breakpoints[key]]);
+    const orderedBreakpoints = keysToBreakpointValue.sort(([_, val]) => val);
+    let currentBreakpointKey = "";
+    for (const [breakpointKey, breakpointValue] of orderedBreakpoints) {
+        if (deviceWidth >= breakpointValue) {
+            currentBreakpointKey = breakpointKey;
+        }
+    }
+    const currentBreakpointValue = (_a = value[currentBreakpointKey]) !== null && _a !== void 0 ? _a : value.default;
+    if (!isObject(currentBreakpointValue)) {
+        return currentBreakpointValue;
+    }
+    else {
+        return createThemeValuesProxy(currentBreakpointValue, breakpoints, deviceWidth, devicePlatform);
+    }
+}
+//# sourceMappingURL=createThemeValuesProxy.js.map

package/src/createThemeValuesProxy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createThemeValuesProxy.js","sourceRoot":"","sources":["createThemeValuesProxy.ts"],"names":[],"mappings":"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"}

package/src/createThemeValuesProxy.ts

@@ -0,0 +1,156 @@
+import { ThemeValues, Breakpoints } from "./types";
+import { Platform } from "react-native";
+import { isObject } from "lodash";
+
+/**
+ * Creates a proxy for theme value objects to select a value whenever
+ * multiple values are provided for different platforms and/or breakpoints
+ *
+ * Ex: {color: {ios: "blue", android: "red"}}
+ *      -> theme.color returns "blue" when the platform is ios and "red" when android
+ */
+export default function createThemeValuesProxy(
+  value: ThemeValues | undefined,
+  breakpoints: Breakpoints,
+  deviceWidth: number,
+  devicePlatform: typeof Platform.OS
+): any /* return type 'any' to allow arbitrary object references (object.example.another.there) */ {
+  if (value === undefined || value === null) {
+    return undefined;
+  }
+  return new Proxy(value, {
+    get: (
+      target: ThemeValues,
+      key: string
+    ): string | number | ThemeValues | undefined => {
+      const currentValue = target[key];
+      if (!isObject(currentValue)) {
+        return currentValue;
+      } else {
+        const platformKeys = ["ios", "android", "web", "macos", "windows"];
+        const breakpointKeys = Object.keys(breakpoints);
+        const keysType = getKeysType(
+          currentValue,
+          platformKeys,
+          breakpointKeys
+        );
+
+        if (keysType === "default") {
+          return createThemeValuesProxy(
+            currentValue,
+            breakpoints,
+            deviceWidth,
+            devicePlatform
+          );
+        } else if (keysType === "platform") {
+          return getPlatformValue(
+            currentValue,
+            breakpoints,
+            deviceWidth,
+            devicePlatform
+          );
+        } else if (keysType === "breakpoint") {
+          return getBreakpointValue(
+            currentValue,
+            breakpoints,
+            deviceWidth,
+            devicePlatform
+          );
+        } else {
+          return undefined;
+        }
+      }
+    },
+    set: () => {
+      throw new Error("Theme is read only, cannot be modified at runtime");
+    },
+  });
+}
+
+function getKeysType(
+  value: ThemeValues,
+  platformKeys: string[],
+  breakpointKeys: string[]
+): "platform" | "breakpoint" | "default" {
+  const hasPlatformKeys = platformKeys.some((key) => value[key] !== undefined);
+  const hasBreakpointKeys = breakpointKeys.some(
+    (key) => value[key] !== undefined
+  );
+  const hasUserDefinedKeys = Object.keys(value).some(
+    (key) =>
+      !platformKeys.includes(key) &&
+      !breakpointKeys.includes(key) &&
+      key !== "default"
+  );
+
+  if (
+    !onlyOneTrue(hasPlatformKeys, hasBreakpointKeys, hasUserDefinedKeys) &&
+    !allFalse(hasPlatformKeys, hasBreakpointKeys, hasUserDefinedKeys)
+  ) {
+    throw new Error(
+      "Cannot mix usage of platform keys, breakpoint keys, and custom defined keys on the same level"
+    );
+  } else if (hasPlatformKeys) {
+    return "platform";
+  } else if (hasBreakpointKeys) {
+    return "breakpoint";
+  } else {
+    return "default";
+  }
+}
+
+function onlyOneTrue(a: boolean, b: boolean, c: boolean) {
+  return [a, b, c].filter((x) => x).length === 1;
+}
+
+function allFalse(a: boolean, b: boolean, c: boolean) {
+  return [a, b, c].filter((x) => x).length === 0;
+}
+
+function getPlatformValue(
+  value: ThemeValues,
+  breakpoints: Breakpoints,
+  deviceWidth: number,
+  devicePlatform: typeof Platform.OS
+) {
+  const currentPlatformValue = value[devicePlatform] ?? value.default;
+  if (!isObject(currentPlatformValue)) {
+    return currentPlatformValue;
+  } else {
+    return createThemeValuesProxy(
+      currentPlatformValue,
+      breakpoints,
+      deviceWidth,
+      devicePlatform
+    );
+  }
+}
+
+function getBreakpointValue(
+  value: ThemeValues,
+  breakpoints: Breakpoints,
+  deviceWidth: number,
+  devicePlatform: typeof Platform.OS
+) {
+  const keysToBreakpointValue: [string, number][] = Object.keys(value).map(
+    (key) => [key, breakpoints[key]]
+  );
+  const orderedBreakpoints = keysToBreakpointValue.sort(([_, val]) => val);
+  let currentBreakpointKey = "";
+  for (const [breakpointKey, breakpointValue] of orderedBreakpoints) {
+    if (deviceWidth >= breakpointValue) {
+      currentBreakpointKey = breakpointKey;
+    }
+  }
+  const currentBreakpointValue = value[currentBreakpointKey] ?? value.default;
+  if (!isObject(currentBreakpointValue)) {
+    return currentBreakpointValue;
+  } else {
+    return createThemeValuesProxy(
+      currentBreakpointValue,
+      breakpoints,
+      deviceWidth,
+      devicePlatform
+    );
+  }
+}

package/src/index.js

@@ -0,0 +1,4 @@
+export { default as DefaultTheme } from "./DefaultTheme";
+export { default as createTheme } from "./createTheme";
+export { Provider as ThemeProvider, useChangeTheme, useTheme, withTheme, } from "./Provider";
+//# sourceMappingURL=index.js.map

package/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQzD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EACL,QAAQ,IAAI,aAAa,EACzB,cAAc,EACd,QAAQ,EACR,SAAS,GACV,MAAM,YAAY,CAAC"}

package/src/index.ts

@@ -0,0 +1,15 @@
+export { default as DefaultTheme } from "./DefaultTheme";
+export type {
+  Theme,
+  ReadTheme,
+  ValidatedTheme,
+  Breakpoints,
+  ColorPalettes,
+} from "./types";
+export { default as createTheme } from "./createTheme";
+export {
+  Provider as ThemeProvider,
+  useChangeTheme,
+  useTheme,
+  withTheme,
+} from "./Provider";

package/src/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":""}

package/src/types.ts

@@ -0,0 +1,41 @@
+export type ThemeValues = {
+  [key: string]: string | number | ThemeValues;
+};
+
+export type Theme = {
+  name: string;
+  colors: {
+    branding?: ThemeValues;
+    text?: ThemeValues;
+    background?: ThemeValues;
+    foreground?: ThemeValues;
+    border?: ThemeValues;
+  };
+  typography: { [key: string]: any }; //TODO: Update theme to support typography. Left as 'any' for legacy support until updated and migrated
+};
+
+export type ValidatedTheme = Theme & {
+  validated: true;
+};
+
+export type ReadTheme = Theme & {
+  colors: {
+    branding?: any;
+    text?: any;
+    background?: any;
+    foreground?: any;
+    border?: any;
+  };
+};
+
+export type ColorPaletteValues = {
+  [key: string]: string;
+};
+
+export type ColorPalettes = {
+  [key: string]: ColorPaletteValues;
+};
+
+export type Breakpoints = {
+  [key: string]: number;
+};

package/src/validators.js

@@ -0,0 +1,52 @@
+export function validatePalettes(palettes) {
+    for (const key of Object.keys(palettes)) {
+        if (typeof key !== "string") {
+            throw new Error(`Invalid palettes object, ${key} is not a string`);
+        }
+        for (const [innerKey, value] of Object.entries(palettes[key])) {
+            if (typeof innerKey !== "string") {
+                throw new Error(`Invalid palette color key, ${innerKey} is not a string`);
+            }
+            if (typeof value !== "string") {
+                throw new Error(`Invalid palette color value, ${value} is not a string`);
+            }
+        }
+    }
+}
+export function validateBreakpoints(breakpoints) {
+    for (const [key, value] of Object.entries(breakpoints)) {
+        if (typeof key !== "string") {
+            throw new Error(`Invalid breakpoint key, ${key} is not a string`);
+        }
+        if (typeof value !== "number") {
+            throw new Error(`Invalid breakpoint value, ${value} is not a number`);
+        }
+    }
+}
+export function validateTheme(theme) {
+    function validateThemeValues(themeValue) {
+        if (themeValue === undefined || themeValue === null) {
+            return;
+        }
+        for (const [key, value] of Object.entries(themeValue)) {
+            if (typeof key !== "string") {
+                throw new Error(`Invalid theme key, ${key} is not a string`);
+            }
+            if (value === undefined || value === null) {
+                continue;
+            }
+            else if (typeof value === "object") {
+                validateThemeValues(value);
+            }
+            else if (typeof value !== "string" && typeof value !== "number") {
+                throw new Error(`Invalid theme value, ${value} is not a string, number, or object`);
+            }
+        }
+    }
+    validateThemeValues(theme.colors.branding);
+    validateThemeValues(theme.colors.text);
+    validateThemeValues(theme.colors.foreground);
+    validateThemeValues(theme.colors.background);
+    validateThemeValues(theme.colors.border);
+}
+//# sourceMappingURL=validators.js.map

package/src/validators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validators.js","sourceRoot":"","sources":["validators.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,gBAAgB,CAAC,QAAuB;IACtD,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;QACvC,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;YAC3B,MAAM,IAAI,KAAK,CAAC,4BAA4B,GAAG,kBAAkB,CAAC,CAAC;SACpE;QACD,KAAK,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE;YAC7D,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;gBAChC,MAAM,IAAI,KAAK,CACb,8BAA8B,QAAQ,kBAAkB,CACzD,CAAC;aACH;YACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;gBAC7B,MAAM,IAAI,KAAK,CACb,gCAAgC,KAAK,kBAAkB,CACxD,CAAC;aACH;SACF;KACF;AACH,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,WAAwB;IAC1D,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;QACtD,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;YAC3B,MAAM,IAAI,KAAK,CAAC,2BAA2B,GAAG,kBAAkB,CAAC,CAAC;SACnE;QACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,MAAM,IAAI,KAAK,CAAC,6BAA6B,KAAK,kBAAkB,CAAC,CAAC;SACvE;KACF;AACH,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,KAAY;IACxC,SAAS,mBAAmB,CAAC,UAAwB;QACnD,IAAI,UAAU,KAAK,SAAS,IAAI,UAAU,KAAK,IAAI,EAAE;YACnD,OAAO;SACR;QACD,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;YACrD,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;gBAC3B,MAAM,IAAI,KAAK,CAAC,sBAAsB,GAAG,kBAAkB,CAAC,CAAC;aAC9D;YACD,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,EAAE;gBACzC,SAAS;aACV;iBAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;gBACpC,mBAAmB,CAAC,KAAK,CAAC,CAAC;aAC5B;iBAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;gBACjE,MAAM,IAAI,KAAK,CACb,wBAAwB,KAAK,qCAAqC,CACnE,CAAC;aACH;SACF;IACH,CAAC;IACD,mBAAmB,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC3C,mBAAmB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACvC,mBAAmB,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAC7C,mBAAmB,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAC7C,mBAAmB,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AAC3C,CAAC"}

package/src/validators.ts

@@ -0,0 +1,59 @@
+import { ColorPalettes, Breakpoints, Theme, ThemeValues } from "./types";
+
+export function validatePalettes(palettes: ColorPalettes) {
+  for (const key of Object.keys(palettes)) {
+    if (typeof key !== "string") {
+      throw new Error(`Invalid palettes object, ${key} is not a string`);
+    }
+    for (const [innerKey, value] of Object.entries(palettes[key])) {
+      if (typeof innerKey !== "string") {
+        throw new Error(
+          `Invalid palette color key, ${innerKey} is not a string`
+        );
+      }
+      if (typeof value !== "string") {
+        throw new Error(
+          `Invalid palette color value, ${value} is not a string`
+        );
+      }
+    }
+  }
+}
+
+export function validateBreakpoints(breakpoints: Breakpoints) {
+  for (const [key, value] of Object.entries(breakpoints)) {
+    if (typeof key !== "string") {
+      throw new Error(`Invalid breakpoint key, ${key} is not a string`);
+    }
+    if (typeof value !== "number") {
+      throw new Error(`Invalid breakpoint value, ${value} is not a number`);
+    }
+  }
+}
+
+export function validateTheme(theme: Theme) {
+  function validateThemeValues(themeValue?: ThemeValues) {
+    if (themeValue === undefined || themeValue === null) {
+      return;
+    }
+    for (const [key, value] of Object.entries(themeValue)) {
+      if (typeof key !== "string") {
+        throw new Error(`Invalid theme key, ${key} is not a string`);
+      }
+      if (value === undefined || value === null) {
+        continue;
+      } else if (typeof value === "object") {
+        validateThemeValues(value);
+      } else if (typeof value !== "string" && typeof value !== "number") {
+        throw new Error(
+          `Invalid theme value, ${value} is not a string, number, or object`
+        );
+      }
+    }
+  }
+  validateThemeValues(theme.colors.branding);
+  validateThemeValues(theme.colors.text);
+  validateThemeValues(theme.colors.foreground);
+  validateThemeValues(theme.colors.background);
+  validateThemeValues(theme.colors.border);
+}