@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/theme/GalaxyTheme.js

@@ -1,119 +0,0 @@
-import { GalaxyTheme } from "./types.js";
-import { DEFAULT_THEME, GALAXY_THEME_MAP, GALAXY_THEME_STORAGE_KEY } 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);
-/** Default detector — reads `prefers-color-scheme`. Falls back to DARK off-browser. */
-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);
-/**
-* Root provider. Wrap the app once, above everything that renders DLS.
-*
-* Resolves `SYSTEM` to the OS theme and feeds the token set to every
-* `withTheme(styled.x)` component. Without it `useGalaxyTheme()` throws.
-*/
-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,
-		activeTheme: 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
-		})
-	});
-};
-/**
-* Read the active theme, the user's preference, and `setTheme`.
-* Throws when called outside a `GalaxyThemeProvider`.
-*/
-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

@@ -1,8 +0,0 @@
-import type { SelectInputOption } from "../inputs/SelectInput";
-import { GalaxyTheme, type Theme } from "./types";
-export declare const GALAXY_THEME_STORAGE_KEY = "galaxy:theme";
-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

@@ -1,38 +0,0 @@
-import { GalaxyTheme } from "./types.js";
-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 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: GalaxyTheme.SYSTEM,
-		label: "System",
-		value: GalaxyTheme.SYSTEM
-	},
-	{
-		id: GalaxyTheme.DARK,
-		label: "Dark",
-		value: GalaxyTheme.DARK
-	},
-	{
-		id: GalaxyTheme.LIGHT,
-		label: "Light",
-		value: GalaxyTheme.LIGHT
-	}
-];
-var GALAXY_THEME_MAP = {
-	[GalaxyTheme.DARK]: GALAXY_DARK_THEME,
-	[GalaxyTheme.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 };

package/dist/theme/index.d.ts

@@ -1,6 +0,0 @@
-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

@@ -1,7 +0,0 @@
-import { GalaxyTheme } from "./types.js";
-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 } 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

@@ -1,195 +0,0 @@
-/** Theme preference. `SYSTEM` follows the OS and resolves to `DARK` or `LIGHT`. */
-export declare enum GalaxyTheme {
-    SYSTEM = "SYSTEM",
-    DARK = "DARK",
-    LIGHT = "LIGHT"
-}
-/** Text colors. Target of `TextVariant`; `*Alt` inverts against the theme. */
-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;
-};
-/** Surface colors. `base`/`primary`/`secondary` are the neutral stack; accents are for status only. */
-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;
-};
-/** Border colors. Always paired with a `0.5px solid` hairline — DLS uses borders, not shadows. */
-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;
-};
-/** Icon colors. Target of `IconVariant`. */
-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;
-};
-/** Black/white overlay tints. `bw<N>` is N% opacity; `*Alt` is the inverse. */
-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;
-};
-/** Numeric font weights. Target of `TextWeight`. */
-export type ThemeFontWeight = {
-    regular: number;
-    medium: number;
-};
-/** Font sizes per `TextSize` step. */
-export type ThemeFontSize = {
-    caption: string;
-    body_sm: string;
-    body_md: string;
-    body_lg: string;
-    heading_sm: string;
-    heading_md: string;
-    heading_lg: string;
-};
-/** Line heights per `TextSize` step. */
-export type ThemeFontHeight = {
-    caption: string;
-    body_sm: string;
-    body_md: string;
-    body_lg: string;
-    heading_sm: string;
-    heading_md: string;
-    heading_lg: string;
-};
-/** Letter spacing per `TextSize` step. */
-export type ThemeFontSpacing = {
-    caption: string;
-    body_sm: string;
-    body_md: string;
-    body_lg: string;
-    heading_sm: string;
-    heading_md: string;
-    heading_lg: string;
-};
-/** One font family plus its full metric scale. */
-export type ThemeFont = {
-    family: string;
-    weight: ThemeFontWeight;
-    size: ThemeFontSize;
-    height: ThemeFontHeight;
-    spacing: ThemeFontSpacing;
-};
-/**
- * The resolved token set for the active theme. Reach it via `useGalaxyTheme()`,
- * or as the `theme` prop inside a `withTheme(styled.x)` component.
- */
-export type Theme = {
-    color: {
-        text: ThemeTextColor;
-        background: ThemeBackgroundColor;
-        border: ThemeBorderColor;
-        icon: ThemeIconColor;
-        opacity: ThemeOpacityColor;
-    };
-    font: {
-        sans: ThemeFont;
-        mono: ThemeFont;
-    };
-};
-/** Adds the injected `theme` prop to a styled component's own props. */
-export type PropsWithTheme<P = unknown> = P & {
-    theme: Theme;
-};

package/dist/theme/types.js

@@ -1,10 +0,0 @@
-//#region src/theme/types.ts
-/** Theme preference. `SYSTEM` follows the OS and resolves to `DARK` or `LIGHT`. */
-var GalaxyTheme = /* @__PURE__ */ function(GalaxyTheme) {
-	GalaxyTheme["SYSTEM"] = "SYSTEM";
-	GalaxyTheme["DARK"] = "DARK";
-	GalaxyTheme["LIGHT"] = "LIGHT";
-	return GalaxyTheme;
-}({});
-//#endregion
-export { GalaxyTheme };

package/dist/theme/typography.d.ts

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

package/dist/theme/typography.js

@@ -1,73 +0,0 @@
-//#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

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

package/dist/theme/variants/dark.js

@@ -1,125 +0,0 @@
-//#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: "#005EFF",
-		galaxyAlt: "#3075FF"
-	},
-	background: {
-		base: "#141415",
-		baseAlt: "#ffffff",
-		primary: "#161617",
-		primaryAlt: "#fafafa",
-		secondary: "#1c1c1d",
-		secondaryAlt: "#f0f0f0",
-		tertiary: "#1a1a1b",
-		tertiaryAlt: "#f5f5f5",
-		success: "#1d3329",
-		successAlt: "#2f8f64",
-		warning: "#3f2e19",
-		warningAlt: "#c4882a",
-		error: "#3d1f24",
-		errorAlt: "#d63d4e",
-		pink: "#3a1f2e",
-		pinkAlt: "#f8e6f7",
-		orange: "#3d2a12",
-		orangeAlt: "#ffe6d2",
-		yellow: "#443c1e",
-		yellowAlt: "#faf8d2",
-		lime: "#2b3619",
-		limeAlt: "#e4f8c5",
-		blue: "#232f3b",
-		blueAlt: "#e6f2ff",
-		teal: "#2a393c",
-		tealAlt: "#e6f7f9",
-		purple: "#272442",
-		purpleAlt: "#f2f0ff",
-		disabled: "#29292a",
-		disabledAlt: "#ffffff",
-		galaxy: "#005EFF",
-		galaxyAlt: "#3075FF"
-	},
-	border: {
-		primary: "#2b2b2c",
-		secondary: "#39393a",
-		tertiary: "#49494a",
-		selected: "#787879",
-		success: "#3aa175",
-		warning: "#b98a2e",
-		error: "#c94e55",
-		disabled: "#39393a",
-		pink: "#ea8ad2",
-		orange: "#f5a55c",
-		yellow: "#edd043",
-		lime: "#bfe06a",
-		blue: "#4c9eff",
-		teal: "#5fd0c3",
-		purple: "#a79af2",
-		galaxy: "#005EFF",
-		galaxyAlt: "#3075FF"
-	},
-	icon: {
-		primary: "#ffffff",
-		primaryAlt: "#000000",
-		secondary: "#acacac",
-		secondaryAlt: "#000000",
-		tertiary: "#868686",
-		tertiaryAlt: "#000000",
-		success: "#4cb782",
-		warning: "#ffb265",
-		error: "#f6525c",
-		pink: "#f3a8e5",
-		orange: "#ffd2a8",
-		yellow: "#fff7aa",
-		lime: "#d5f2a7",
-		blue: "#99cffd",
-		teal: "#bde8ee",
-		purple: "#b7b1f1",
-		disabled: "#4d4d4d",
-		galaxy: "#005EFF",
-		galaxyAlt: "#3075FF"
-	},
-	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

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