@galaxy-io/dls 1.0.3

package/dist/theme/GalaxyTheme.d.ts

@@ -0,0 +1,36 @@
+import { type PropsWithChildren } from "react";
+import { GalaxyTheme } from "./constants";
+import type { Theme } from "./types";
+declare const ThemeProvider: import("react").ComponentType<{
+    children: React.ReactNode;
+    theme?: Theme | undefined;
+}>, withTheme: <Props extends {
+    theme: Theme;
+}, C>(WrappedComponent: import("react").ComponentType<Props> & C) => import("react").ComponentType<import("@callstack/react-theme-provider").$Without<Props, "theme"> & {
+    theme?: import("@callstack/react-theme-provider").$DeepPartial<Theme> | undefined;
+}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<Props> & C, {}>, useTheme: <T = Theme>(overrides?: import("@callstack/react-theme-provider").$DeepPartial<T> | undefined) => T;
+export interface ThemeDetector {
+    detectInitialTheme(): Promise<GalaxyTheme.DARK | GalaxyTheme.LIGHT>;
+    onThemeChange(callback: (theme: GalaxyTheme.DARK | GalaxyTheme.LIGHT) => void): () => void;
+}
+export declare const BrowserThemeDetector: ThemeDetector;
+interface GalaxyThemeContextValue {
+    theme: Theme;
+    galaxyTheme: Exclude<GalaxyTheme, GalaxyTheme.SYSTEM>;
+    selectedTheme: GalaxyTheme;
+    systemTheme: GalaxyTheme.DARK | GalaxyTheme.LIGHT;
+    isSystemThemeSupported: boolean;
+    setTheme: (theme: GalaxyTheme) => void;
+}
+interface GalaxyThemeProviderProps {
+    initialTheme?: GalaxyTheme;
+    storageKey?: string;
+    themeDetector?: ThemeDetector;
+    storage?: {
+        get: (key: string) => GalaxyTheme | null;
+        set: (key: string, theme: GalaxyTheme) => void;
+    };
+}
+declare const GalaxyThemeProvider: ({ children, initialTheme, storageKey, themeDetector, storage, }: PropsWithChildren<GalaxyThemeProviderProps>) => import("react").JSX.Element;
+export declare const useGalaxyTheme: () => GalaxyThemeContextValue;
+export { GalaxyThemeProvider, ThemeProvider, useTheme, withTheme };

package/dist/theme/GalaxyTheme.js

@@ -0,0 +1,107 @@
+import { DEFAULT_THEME, GALAXY_THEME_MAP, GALAXY_THEME_STORAGE_KEY, GalaxyTheme } from "./constants.js";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { createTheming } from "@callstack/react-theme-provider";
+import { jsx } from "react/jsx-runtime";
+//#region src/theme/GalaxyTheme.tsx
+var { ThemeProvider, withTheme, useTheme } = createTheming(DEFAULT_THEME);
+var BrowserThemeDetector = {
+	detectInitialTheme: () => {
+		if (typeof window !== "undefined" && window.matchMedia) {
+			const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+			return Promise.resolve(isDark ? GalaxyTheme.DARK : GalaxyTheme.LIGHT);
+		}
+		return Promise.resolve(GalaxyTheme.DARK);
+	},
+	onThemeChange: (callback) => {
+		if (typeof window === "undefined" || !window.matchMedia) return () => {};
+		const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+		const handler = (e) => {
+			callback(e.matches ? GalaxyTheme.DARK : GalaxyTheme.LIGHT);
+		};
+		if (mediaQuery.addEventListener) {
+			mediaQuery.addEventListener("change", handler);
+			return () => mediaQuery.removeEventListener("change", handler);
+		}
+		return () => {};
+	}
+};
+var GalaxyThemeContext = createContext(void 0);
+var GalaxyThemeProvider = ({ children, initialTheme, storageKey = GALAXY_THEME_STORAGE_KEY, themeDetector = BrowserThemeDetector, storage }) => {
+	const [systemTheme, setSystemTheme] = useState(() => {
+		return GalaxyTheme.DARK;
+	});
+	const [isSystemThemeSupported] = useState(() => {
+		if (typeof window === "undefined") return false;
+		return true;
+	});
+	const [selectedTheme, setSelectedTheme] = useState(() => {
+		if (storage) {
+			const stored = storage.get(storageKey);
+			if (stored && Object.values(GalaxyTheme).includes(stored)) return stored;
+		}
+		if (initialTheme) return initialTheme;
+		return GalaxyTheme.SYSTEM;
+	});
+	useEffect(() => {
+		if (typeof window === "undefined" || !themeDetector) return;
+		let mounted = true;
+		let cleanup;
+		const initializeThemeDetection = async () => {
+			try {
+				const initialTheme = await themeDetector.detectInitialTheme();
+				if (!mounted) return;
+				setSystemTheme(initialTheme);
+			} catch (error) {
+				console.error("[GalaxyTheme] Failed to detect initial theme:", error);
+				setSystemTheme(GalaxyTheme.DARK);
+			}
+			try {
+				cleanup = themeDetector.onThemeChange((newTheme) => {
+					if (mounted) setSystemTheme(newTheme);
+				});
+			} catch (error) {
+				console.error("[GalaxyTheme] Failed to set up theme change listener:", error);
+			}
+		};
+		initializeThemeDetection();
+		return () => {
+			mounted = false;
+			if (cleanup) cleanup();
+		};
+	}, [themeDetector]);
+	const resolvedTheme = selectedTheme === GalaxyTheme.SYSTEM ? systemTheme : selectedTheme;
+	const setTheme = useCallback((theme) => {
+		setSelectedTheme(theme);
+		if (storage) storage.set(storageKey, theme);
+	}, [storage, storageKey]);
+	const actualTheme = GALAXY_THEME_MAP[resolvedTheme] || GALAXY_THEME_MAP[GalaxyTheme.DARK];
+	const value = useMemo(() => ({
+		theme: actualTheme,
+		galaxyTheme: resolvedTheme,
+		selectedTheme,
+		systemTheme,
+		isSystemThemeSupported,
+		setTheme
+	}), [
+		actualTheme,
+		resolvedTheme,
+		selectedTheme,
+		systemTheme,
+		isSystemThemeSupported,
+		setTheme
+	]);
+	return /* @__PURE__ */ jsx(GalaxyThemeContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx(ThemeProvider, {
+			theme: value.theme,
+			children
+		})
+	});
+};
+var useGalaxyTheme = () => {
+	const context = useContext(GalaxyThemeContext);
+	if (context === void 0) throw new Error("useGalaxyTheme must be used within a GalaxyThemeProvider");
+	return context;
+};
+//#endregion
+export { BrowserThemeDetector, GalaxyThemeProvider, ThemeProvider, useGalaxyTheme, useTheme, withTheme };

package/dist/theme/constants.d.ts

@@ -0,0 +1,13 @@
+import type { SelectInputOption } from "../inputs/SelectInput";
+import type { Theme } from "./types";
+export declare const GALAXY_THEME_STORAGE_KEY = "galaxy:theme";
+export declare enum GalaxyTheme {
+    SYSTEM = "SYSTEM",
+    DARK = "DARK",
+    LIGHT = "LIGHT"
+}
+export declare const GALAXY_DARK_THEME: Theme;
+export declare const GALAXY_LIGHT_THEME: Theme;
+export declare const GALAXY_THEME_OPTIONS: SelectInputOption[];
+export declare const GALAXY_THEME_MAP: Record<Exclude<GalaxyTheme, GalaxyTheme.SYSTEM>, Theme>;
+export declare const DEFAULT_THEME: Theme;

package/dist/theme/constants.js

@@ -0,0 +1,43 @@
+import { GALAXY_FONT } from "./typography.js";
+import { GALAXY_DARK_COLOR } from "./variants/dark.js";
+import { GALAXY_LIGHT_COLOR } from "./variants/light.js";
+//#region src/theme/constants.ts
+var GALAXY_THEME_STORAGE_KEY = "galaxy:theme";
+var GalaxyTheme = /* @__PURE__ */ function(GalaxyTheme) {
+	GalaxyTheme["SYSTEM"] = "SYSTEM";
+	GalaxyTheme["DARK"] = "DARK";
+	GalaxyTheme["LIGHT"] = "LIGHT";
+	return GalaxyTheme;
+}({});
+var GALAXY_DARK_THEME = {
+	color: GALAXY_DARK_COLOR,
+	font: GALAXY_FONT
+};
+var GALAXY_LIGHT_THEME = {
+	color: GALAXY_LIGHT_COLOR,
+	font: GALAXY_FONT
+};
+var GALAXY_THEME_OPTIONS = [
+	{
+		id: "SYSTEM",
+		label: "System",
+		value: "SYSTEM"
+	},
+	{
+		id: "DARK",
+		label: "Dark",
+		value: "DARK"
+	},
+	{
+		id: "LIGHT",
+		label: "Light",
+		value: "LIGHT"
+	}
+];
+var GALAXY_THEME_MAP = {
+	["DARK"]: GALAXY_DARK_THEME,
+	["LIGHT"]: GALAXY_LIGHT_THEME
+};
+var DEFAULT_THEME = GALAXY_DARK_THEME;
+//#endregion
+export { DEFAULT_THEME, GALAXY_DARK_THEME, GALAXY_LIGHT_THEME, GALAXY_THEME_MAP, GALAXY_THEME_OPTIONS, GALAXY_THEME_STORAGE_KEY, GalaxyTheme };

package/dist/theme/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./GalaxyTheme";
+export * from "./constants";
+export * from "./types";
+export * from "./typography";
+export * from "./variants/dark";
+export * from "./variants/light";

package/dist/theme/index.js

@@ -0,0 +1,6 @@
+import { GALAXY_FONT } from "./typography.js";
+import { GALAXY_DARK_COLOR } from "./variants/dark.js";
+import { GALAXY_LIGHT_COLOR } from "./variants/light.js";
+import { DEFAULT_THEME, GALAXY_DARK_THEME, GALAXY_LIGHT_THEME, GALAXY_THEME_MAP, GALAXY_THEME_OPTIONS, GALAXY_THEME_STORAGE_KEY, GalaxyTheme } from "./constants.js";
+import { BrowserThemeDetector, GalaxyThemeProvider, ThemeProvider, useGalaxyTheme, useTheme, withTheme } from "./GalaxyTheme.js";
+export { BrowserThemeDetector, DEFAULT_THEME, GALAXY_DARK_COLOR, GALAXY_DARK_THEME, GALAXY_FONT, GALAXY_LIGHT_COLOR, GALAXY_LIGHT_THEME, GALAXY_THEME_MAP, GALAXY_THEME_OPTIONS, GALAXY_THEME_STORAGE_KEY, GalaxyTheme, GalaxyThemeProvider, ThemeProvider, useGalaxyTheme, useTheme, withTheme };

package/dist/theme/types.d.ts

@@ -0,0 +1,174 @@
+export type ThemeTextColor = {
+    primary: string;
+    primaryAlt: string;
+    secondary: string;
+    secondaryAlt: string;
+    tertiary: string;
+    tertiaryAlt: string;
+    success: string;
+    warning: string;
+    error: string;
+    pink: string;
+    orange: string;
+    yellow: string;
+    lime: string;
+    green: string;
+    blue: string;
+    teal: string;
+    purple: string;
+    disabled: string;
+    galaxy: string;
+    galaxyAlt: string;
+};
+export type ThemeBackgroundColor = {
+    base: string;
+    baseAlt: string;
+    primary: string;
+    primaryAlt: string;
+    secondary: string;
+    secondaryAlt: string;
+    tertiary: string;
+    tertiaryAlt: string;
+    success: string;
+    successAlt: string;
+    warning: string;
+    warningAlt: string;
+    error: string;
+    errorAlt: string;
+    pink: string;
+    pinkAlt: string;
+    orange: string;
+    orangeAlt: string;
+    yellow: string;
+    yellowAlt: string;
+    lime: string;
+    limeAlt: string;
+    blue: string;
+    blueAlt: string;
+    teal: string;
+    tealAlt: string;
+    purple: string;
+    purpleAlt: string;
+    disabled: string;
+    disabledAlt: string;
+    galaxy: string;
+    galaxyAlt: string;
+};
+export type ThemeBorderColor = {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    selected: string;
+    success: string;
+    warning: string;
+    error: string;
+    disabled: string;
+    pink: string;
+    orange: string;
+    yellow: string;
+    lime: string;
+    blue: string;
+    teal: string;
+    purple: string;
+    galaxy: string;
+    galaxyAlt: string;
+};
+export type ThemeIconColor = {
+    primary: string;
+    primaryAlt: string;
+    secondary: string;
+    secondaryAlt: string;
+    tertiary: string;
+    tertiaryAlt: string;
+    success: string;
+    warning: string;
+    error: string;
+    pink: string;
+    orange: string;
+    yellow: string;
+    lime: string;
+    blue: string;
+    teal: string;
+    purple: string;
+    disabled: string;
+    galaxy: string;
+    galaxyAlt: string;
+};
+export type ThemeOpacityColor = {
+    bw100: string;
+    bw100Alt: string;
+    bw80: string;
+    bw80Alt: string;
+    bw64: string;
+    bw64Alt: string;
+    bw48: string;
+    bw48Alt: string;
+    bw32: string;
+    bw32Alt: string;
+    bw24: string;
+    bw24Alt: string;
+    bw16: string;
+    bw16Alt: string;
+    bw12: string;
+    bw12Alt: string;
+    bw8: string;
+    bw8Alt: string;
+    b4: string;
+    b4Alt: string;
+    bw0: string;
+    bw0Alt: string;
+};
+export type ThemeFontWeight = {
+    regular: number;
+    medium: number;
+};
+export type ThemeFontSize = {
+    caption: string;
+    body_sm: string;
+    body_md: string;
+    body_lg: string;
+    heading_sm: string;
+    heading_md: string;
+    heading_lg: string;
+};
+export type ThemeFontHeight = {
+    caption: string;
+    body_sm: string;
+    body_md: string;
+    body_lg: string;
+    heading_sm: string;
+    heading_md: string;
+    heading_lg: string;
+};
+export type ThemeFontSpacing = {
+    caption: string;
+    body_sm: string;
+    body_md: string;
+    body_lg: string;
+    heading_sm: string;
+    heading_md: string;
+    heading_lg: string;
+};
+export type ThemeFont = {
+    family: string;
+    weight: ThemeFontWeight;
+    size: ThemeFontSize;
+    height: ThemeFontHeight;
+    spacing: ThemeFontSpacing;
+};
+export type Theme = {
+    color: {
+        text: ThemeTextColor;
+        background: ThemeBackgroundColor;
+        border: ThemeBorderColor;
+        icon: ThemeIconColor;
+        opacity: ThemeOpacityColor;
+    };
+    font: {
+        sans: ThemeFont;
+        mono: ThemeFont;
+    };
+};
+export type PropsWithTheme<P = unknown> = P & {
+    theme: Theme;
+};

package/dist/theme/typography.d.ts

@@ -0,0 +1,2 @@
+import type { Theme } from "./types";
+export declare const GALAXY_FONT: Theme["font"];

package/dist/theme/typography.js

@@ -0,0 +1,73 @@
+//#region src/theme/typography.ts
+var GALAXY_FONT = {
+	sans: {
+		family: "\"ABC Diatype\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
+		weight: {
+			regular: 400,
+			medium: 500
+		},
+		size: {
+			caption: "10px",
+			body_sm: "12px",
+			body_md: "13px",
+			body_lg: "14px",
+			heading_sm: "16px",
+			heading_md: "20px",
+			heading_lg: "24px"
+		},
+		height: {
+			caption: "12px",
+			body_sm: "14px",
+			body_md: "15px",
+			body_lg: "16px",
+			heading_sm: "18px",
+			heading_md: "22px",
+			heading_lg: "26px"
+		},
+		spacing: {
+			caption: "0.1px",
+			body_sm: "0.12px",
+			body_md: "0.13px",
+			body_lg: "0.14px",
+			heading_sm: "0.16px",
+			heading_md: "0.20px",
+			heading_lg: "0.24px"
+		}
+	},
+	mono: {
+		family: "\"Berkeley Mono\", ui-monospace, \"SFMono-Regular\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
+		weight: {
+			regular: 400,
+			medium: 500
+		},
+		size: {
+			caption: "10px",
+			body_sm: "11px",
+			body_md: "12px",
+			body_lg: "13px",
+			heading_sm: "15px",
+			heading_md: "18px",
+			heading_lg: "21px"
+		},
+		height: {
+			caption: "12px",
+			body_sm: "13px",
+			body_md: "15px",
+			body_lg: "16px",
+			heading_sm: "17px",
+			heading_md: "20px",
+			heading_lg: "23px"
+		},
+		spacing: {
+			caption: "0.1px",
+			body_sm: "0.12px",
+			body_md: "0.13px",
+			body_lg: "0.14px",
+			heading_sm: "0.16px",
+			heading_md: "0.20px",
+			heading_lg: "0.24px"
+		}
+	}
+};
+//#endregion
+export { GALAXY_FONT };

package/dist/theme/variants/dark.d.ts

@@ -0,0 +1,2 @@
+import type { Theme } from "../types";
+export declare const GALAXY_DARK_COLOR: Theme["color"];

package/dist/theme/variants/dark.js

@@ -0,0 +1,125 @@
+//#region src/theme/variants/dark.ts
+var GALAXY_DARK_COLOR = {
+	text: {
+		primary: "#ffffff",
+		primaryAlt: "#101010",
+		secondary: "#acacac",
+		secondaryAlt: "#3f3f3f",
+		tertiary: "#868686",
+		tertiaryAlt: "#9e9e9e",
+		success: "#6ee4b0",
+		warning: "#ffb265",
+		error: "#ff6881",
+		pink: "#f3a8e5",
+		orange: "#ffd2a8",
+		yellow: "#fff7aa",
+		lime: "#d5f2a7",
+		green: "#6ee4b0",
+		blue: "#99cffd",
+		teal: "#bde8ee",
+		purple: "#b7b1f1",
+		disabled: "#4d4d4d",
+		galaxy: "#0059B8",
+		galaxyAlt: "#0060c8"
+	},
+	background: {
+		base: "#131313",
+		baseAlt: "#ffffff",
+		primary: "#161616",
+		primaryAlt: "#fafafa",
+		secondary: "#242424",
+		secondaryAlt: "#f0f0f0",
+		tertiary: "#1B1B1B",
+		tertiaryAlt: "#f5f5f5",
+		success: "#1d3329",
+		successAlt: "#327056",
+		warning: "#3f2e19",
+		warningAlt: "#B66A1E",
+		error: "#3d1f24",
+		errorAlt: "#AA3247",
+		pink: "#361c23",
+		pinkAlt: "#f8e6f7",
+		orange: "#3d2a12",
+		orangeAlt: "#ffe6d2",
+		yellow: "#404022",
+		yellowAlt: "#faf8d2",
+		lime: "#263017",
+		limeAlt: "#e4f8c5",
+		blue: "#232f3b",
+		blueAlt: "#e6f2ff",
+		teal: "#2a393c",
+		tealAlt: "#e6f7f9",
+		purple: "#272442",
+		purpleAlt: "#f2f0ff",
+		disabled: "#1e1e1e",
+		disabledAlt: "#ffffff",
+		galaxy: "#0059B8",
+		galaxyAlt: "#0060c8"
+	},
+	border: {
+		primary: "#2c2c2c",
+		secondary: "#3a3a3a",
+		tertiary: "#4a4a4a",
+		selected: "#777777",
+		success: "#3aa175",
+		warning: "#aa6d2f",
+		error: "#ac4757",
+		disabled: "#2e2e2e",
+		pink: "#a8527e",
+		orange: "#b3722e",
+		yellow: "#a09b3f",
+		lime: "#d5f2a7",
+		blue: "#3f6ea5",
+		teal: "#3a8a8f",
+		purple: "#b7b1f1",
+		galaxy: "#0059B8",
+		galaxyAlt: "#0060c8"
+	},
+	icon: {
+		primary: "#ffffff",
+		primaryAlt: "#000000",
+		secondary: "#acacac",
+		secondaryAlt: "#000000",
+		tertiary: "#868686",
+		tertiaryAlt: "#000000",
+		success: "#55c393",
+		warning: "#ffb265",
+		error: "#f3506b",
+		pink: "#f3a8ef",
+		orange: "#ffd2a8",
+		yellow: "#fff7aa",
+		lime: "#d5f2a7",
+		blue: "#99cffd",
+		teal: "#bde8ee",
+		purple: "#b7b1f1",
+		disabled: "#4d4d4d",
+		galaxy: "#0059B8",
+		galaxyAlt: "#0060c8"
+	},
+	opacity: {
+		bw100: "rgba(0, 0, 0, 1)",
+		bw100Alt: "rgba(255, 255, 255, 1)",
+		bw80: "rgba(0, 0, 0, 0.8)",
+		bw80Alt: "rgba(255, 255, 255, 0.8)",
+		bw64: "rgba(0, 0, 0, 0.64)",
+		bw64Alt: "rgba(255, 255, 255, 0.64)",
+		bw48: "rgba(0, 0, 0, 0.48)",
+		bw48Alt: "rgba(255, 255, 255, 0.48)",
+		bw32: "rgba(0, 0, 0, 0.32)",
+		bw32Alt: "rgba(255, 255, 255, 0.32)",
+		bw24: "rgba(0, 0, 0, 0.24)",
+		bw24Alt: "rgba(255, 255, 255, 0.24)",
+		bw16: "rgba(0, 0, 0, 0.16)",
+		bw16Alt: "rgba(255, 255, 255, 0.16)",
+		bw12: "rgba(0, 0, 0, 0.12)",
+		bw12Alt: "rgba(255, 255, 255, 0.12)",
+		bw8: "rgba(0, 0, 0, 0.08)",
+		bw8Alt: "rgba(255, 255, 255, 0.08)",
+		b4: "rgba(0, 0, 0, 0.04)",
+		b4Alt: "rgba(255, 255, 255, 0.04)",
+		bw0: "rgba(0, 0, 0, 0)",
+		bw0Alt: "rgba(255, 255, 255, 0)"
+	}
+};
+//#endregion
+export { GALAXY_DARK_COLOR };

package/dist/theme/variants/light.d.ts

@@ -0,0 +1,2 @@
+import type { Theme } from "../types";
+export declare const GALAXY_LIGHT_COLOR: Theme["color"];