@datarecce/ui 0.1.28 → 0.1.30

package/dist/mui-theme-CUhybmBq.mjs

@@ -0,0 +1,696 @@
+"use client"
+import { createTheme } from "@mui/material/styles";
+
+//#region recce-source/js/src/components/ui/mui-theme.ts
+/**
+* MUI Theme Configuration for Recce
+*
+* This theme mirrors the existing Chakra UI theme tokens from theme.ts
+* to ensure visual consistency during the migration period.
+*
+* Color palette mappings:
+* - iochmara (custom blue) -> primary
+* - cyan -> secondary
+* - brand (orange) -> custom palette
+* - green -> success
+* - amber -> warning
+* - red -> error
+* - neutral -> grey
+*/
+const white = "#FFFFFF";
+const black = "#000000";
+const colors = {
+	white,
+	black,
+	iochmara: {
+		50: "#EAF3FB",
+		100: "#C4DDF3",
+		200: "#9EC6EB",
+		300: "#79B0E2",
+		400: "#5599D8",
+		500: "#3182CE",
+		600: "#2A6CA7",
+		700: "#225581",
+		800: "#193E5C",
+		900: "#102638",
+		950: "#060E14"
+	},
+	cyan: {
+		50: "#ECFEFF",
+		100: "#CFFAFE",
+		200: "#A5F3FC",
+		300: "#67E8F9",
+		400: "#22D3EE",
+		500: "#06B6D4",
+		600: "#0891B2",
+		700: "#0E7490",
+		800: "#155E75",
+		900: "#164E63",
+		950: "#083344"
+	},
+	neutral: {
+		50: "#FAFAFA",
+		100: "#F5F5F5",
+		200: "#E5E5E5",
+		300: "#D4D4D4",
+		400: "#A3A3A3",
+		500: "#737373",
+		600: "#525252",
+		700: "#404040",
+		800: "#262626",
+		900: "#171717",
+		950: "#0A0A0A"
+	},
+	amber: {
+		50: "#FFFBEB",
+		100: "#FEF3C7",
+		200: "#FDE68A",
+		300: "#FCD34D",
+		400: "#FBBF24",
+		500: "#F59E0B",
+		600: "#D97706",
+		700: "#B45309",
+		800: "#92400E",
+		900: "#78350F",
+		950: "#431407"
+	},
+	yellow: {
+		50: "#FEFCE8",
+		100: "#FEF9C3",
+		200: "#FEF08A",
+		300: "#FDE047",
+		400: "#FACC15",
+		500: "#EAB308",
+		600: "#CA8A04",
+		700: "#A16207",
+		800: "#854D0E",
+		900: "#713F12",
+		950: "#422006"
+	},
+	green: {
+		50: "#F0FDF4",
+		100: "#DCFCE7",
+		200: "#BBF7D0",
+		300: "#86EFAC",
+		400: "#4ADE80",
+		500: "#22C55E",
+		600: "#16A34A",
+		700: "#15803D",
+		800: "#166534",
+		900: "#14532D",
+		950: "#052E16"
+	},
+	red: {
+		50: "#FEF2F2",
+		100: "#FEE2E2",
+		200: "#FECACA",
+		300: "#FCA5A5",
+		400: "#F87171",
+		500: "#EF4444",
+		600: "#DC2626",
+		700: "#B91C1C",
+		800: "#991B1B",
+		900: "#7F1D1D",
+		950: "#450A0A"
+	},
+	rose: {
+		50: "#FFF1F2",
+		100: "#FFE4E6",
+		200: "#FECDD3",
+		300: "#FDA4AF",
+		400: "#FB7185",
+		500: "#F43F5E",
+		600: "#E11D48",
+		700: "#BE123C",
+		800: "#9F1239",
+		900: "#881337",
+		950: "#4C0519"
+	},
+	fuchsia: {
+		50: "#FDF4FF",
+		100: "#FAE8FF",
+		200: "#F5D0FE",
+		300: "#F0ABFC",
+		400: "#E879F9",
+		500: "#D946EF",
+		600: "#C026D3",
+		700: "#A21CAF",
+		800: "#86198F",
+		900: "#701A75",
+		950: "#4A044E"
+	},
+	brand: {
+		50: "#FFDED5",
+		100: "#FFC1B0",
+		200: "#FFA58C",
+		300: "#FF8967",
+		400: "#FF6E42",
+		500: "#FD541E",
+		600: "#F04104",
+		700: "#C93A06",
+		800: "#A23206",
+		900: "#7C2906",
+		950: "#571E05"
+	}
+};
+const semanticColors = {
+	envBase: colors.amber[500],
+	envCurrent: colors.iochmara[500]
+};
+/**
+* Helper to generate button color variants for a given color
+* Creates contained, outlined, and text variant styles
+*/
+function createButtonColorVariants(colorName, colorScale) {
+	return [
+		{
+			props: {
+				color: colorName,
+				variant: "contained"
+			},
+			style: {
+				backgroundColor: colorScale[500],
+				color: white,
+				"&:hover": { backgroundColor: colorScale[600] }
+			}
+		},
+		{
+			props: {
+				color: colorName,
+				variant: "outlined"
+			},
+			style: {
+				borderColor: colorScale[500],
+				color: colorScale[600],
+				"&:hover": {
+					borderColor: colorScale[600],
+					backgroundColor: `${colorScale[50]}80`
+				}
+			}
+		},
+		{
+			props: {
+				color: colorName,
+				variant: "text"
+			},
+			style: {
+				color: colorScale[600],
+				"&:hover": { backgroundColor: `${colorScale[50]}80` }
+			}
+		}
+	];
+}
+/**
+* Helper to generate CircularProgress color variants
+*/
+function createProgressColorVariant(colorName, colorScale) {
+	return {
+		props: { color: colorName },
+		style: { color: colorScale[500] }
+	};
+}
+/**
+* Helper to generate Badge color variants
+*/
+function createBadgeColorVariant(colorName, colorScale) {
+	return {
+		props: { color: colorName },
+		style: { "& .MuiBadge-badge": {
+			backgroundColor: colorScale[500],
+			color: white
+		} }
+	};
+}
+/**
+* Helper to generate Chip color variants
+*/
+function createChipColorVariants(colorName, colorScale) {
+	return [{
+		props: {
+			color: colorName,
+			variant: "filled"
+		},
+		style: {
+			backgroundColor: colorScale[500],
+			color: white,
+			"&:hover": { backgroundColor: colorScale[600] }
+		}
+	}, {
+		props: {
+			color: colorName,
+			variant: "outlined"
+		},
+		style: {
+			borderColor: colorScale[500],
+			color: colorScale[600]
+		}
+	}];
+}
+const buttonColorVariants = [
+	...createButtonColorVariants("iochmara", colors.iochmara),
+	...createButtonColorVariants("cyan", colors.cyan),
+	...createButtonColorVariants("amber", colors.amber),
+	...createButtonColorVariants("green", colors.green),
+	...createButtonColorVariants("red", colors.red),
+	...createButtonColorVariants("rose", colors.rose),
+	...createButtonColorVariants("fuchsia", colors.fuchsia),
+	...createButtonColorVariants("brand", colors.brand)
+];
+const progressColorVariants = [
+	createProgressColorVariant("iochmara", colors.iochmara),
+	createProgressColorVariant("cyan", colors.cyan),
+	createProgressColorVariant("amber", colors.amber),
+	createProgressColorVariant("green", colors.green),
+	createProgressColorVariant("red", colors.red),
+	createProgressColorVariant("rose", colors.rose),
+	createProgressColorVariant("fuchsia", colors.fuchsia),
+	createProgressColorVariant("brand", colors.brand),
+	createProgressColorVariant("neutral", colors.neutral)
+];
+const badgeColorVariants = [
+	createBadgeColorVariant("iochmara", colors.iochmara),
+	createBadgeColorVariant("cyan", colors.cyan),
+	createBadgeColorVariant("amber", colors.amber),
+	createBadgeColorVariant("green", colors.green),
+	createBadgeColorVariant("red", colors.red),
+	createBadgeColorVariant("rose", colors.rose),
+	createBadgeColorVariant("fuchsia", colors.fuchsia),
+	createBadgeColorVariant("brand", colors.brand),
+	createBadgeColorVariant("neutral", colors.neutral)
+];
+const chipColorVariants = [
+	...createChipColorVariants("iochmara", colors.iochmara),
+	...createChipColorVariants("cyan", colors.cyan),
+	...createChipColorVariants("amber", colors.amber),
+	...createChipColorVariants("green", colors.green),
+	...createChipColorVariants("red", colors.red),
+	...createChipColorVariants("rose", colors.rose),
+	...createChipColorVariants("fuchsia", colors.fuchsia),
+	...createChipColorVariants("brand", colors.brand),
+	...createChipColorVariants("neutral", colors.neutral)
+];
+const componentOverrides = {
+	MuiButton: {
+		defaultProps: { disableElevation: true },
+		variants: [{
+			props: { size: "xsmall" },
+			style: {
+				padding: "0 0.5rem",
+				fontSize: "0.75rem",
+				fontWeight: 500,
+				borderRadius: 4,
+				minHeight: "unset",
+				lineHeight: 1.5
+			}
+		}, ...buttonColorVariants],
+		styleOverrides: {
+			root: ({ theme, ownerState }) => ({
+				textTransform: "none",
+				fontWeight: 500,
+				borderRadius: 6,
+				...ownerState.color === "neutral" && ownerState.variant === "contained" && {
+					backgroundColor: colors.neutral[700],
+					color: white,
+					"&:hover": { backgroundColor: colors.neutral[800] }
+				},
+				...ownerState.color === "neutral" && ownerState.variant === "outlined" && {
+					borderColor: theme.palette.mode === "dark" ? colors.neutral[500] : colors.neutral[300],
+					color: theme.palette.mode === "dark" ? colors.neutral[100] : colors.neutral[900],
+					"&:hover": {
+						borderColor: theme.palette.mode === "dark" ? colors.neutral[400] : colors.neutral[400],
+						backgroundColor: theme.palette.mode === "dark" ? colors.neutral[700] : colors.neutral[100]
+					}
+				},
+				...ownerState.color === "neutral" && ownerState.variant === "text" && {
+					color: theme.palette.mode === "dark" ? colors.neutral[200] : colors.neutral[700],
+					"&:hover": { backgroundColor: theme.palette.mode === "dark" ? colors.neutral[700] : colors.neutral[100] }
+				}
+			}),
+			sizeSmall: {
+				padding: "0.25rem 0.75rem",
+				fontSize: "0.875rem"
+			},
+			sizeMedium: {
+				padding: "0.5rem 1rem",
+				fontSize: "1rem"
+			},
+			sizeLarge: {
+				padding: "0.75rem 1.5rem",
+				fontSize: "1.125rem"
+			},
+			contained: { "&:hover": { boxShadow: "none" } },
+			outlined: {
+				borderWidth: "1px",
+				"&:hover": { borderWidth: "1px" }
+			},
+			text: ({ theme }) => ({ "&:hover": { backgroundColor: theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.08)" : "rgba(0, 0, 0, 0.04)" } })
+		}
+	},
+	MuiIconButton: { styleOverrides: {
+		root: { borderRadius: 6 },
+		sizeSmall: { padding: 4 },
+		sizeMedium: { padding: 8 },
+		sizeLarge: { padding: 12 }
+	} },
+	MuiTextField: {
+		defaultProps: {
+			variant: "outlined",
+			size: "small"
+		},
+		styleOverrides: { root: { "& .MuiOutlinedInput-root": { borderRadius: 6 } } }
+	},
+	MuiOutlinedInput: { styleOverrides: {
+		root: {
+			borderRadius: 6,
+			"&:hover .MuiOutlinedInput-notchedOutline": { borderColor: colors.iochmara[400] },
+			"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+				borderColor: colors.iochmara[500],
+				borderWidth: 2
+			}
+		},
+		notchedOutline: ({ theme }) => ({ borderColor: theme.palette.mode === "dark" ? colors.neutral[600] : colors.neutral[300] })
+	} },
+	MuiCheckbox: {
+		defaultProps: { color: "primary" },
+		styleOverrides: { root: { borderRadius: 4 } }
+	},
+	MuiSwitch: { defaultProps: { color: "primary" } },
+	MuiDialog: { styleOverrides: { paper: { borderRadius: 8 } } },
+	MuiDialogTitle: { styleOverrides: { root: {
+		fontWeight: 600,
+		fontSize: "1.125rem"
+	} } },
+	MuiMenu: { styleOverrides: { paper: ({ theme }) => ({
+		borderRadius: 8,
+		boxShadow: theme.shadows[3]
+	}) } },
+	MuiMenuItem: { styleOverrides: { root: ({ theme }) => ({
+		fontSize: "0.875rem",
+		padding: "0.5rem 0.75rem",
+		"&:hover": { backgroundColor: theme.palette.mode === "dark" ? colors.neutral[600] : colors.neutral[100] },
+		"&.Mui-selected": {
+			backgroundColor: theme.palette.mode === "dark" ? colors.iochmara[900] : colors.iochmara[50],
+			"&:hover": { backgroundColor: theme.palette.mode === "dark" ? colors.iochmara[800] : colors.iochmara[100] }
+		}
+	}) } },
+	MuiChip: {
+		variants: [{
+			props: { size: "xsmall" },
+			style: {
+				height: 20,
+				fontSize: "0.625rem"
+			}
+		}, ...chipColorVariants],
+		styleOverrides: {
+			root: {
+				borderRadius: 6,
+				fontWeight: 500
+			},
+			sizeSmall: {
+				height: 24,
+				fontSize: "0.75rem"
+			},
+			sizeMedium: {
+				height: 32,
+				fontSize: "0.875rem"
+			}
+		}
+	},
+	MuiTooltip: { styleOverrides: {
+		tooltip: ({ theme }) => ({
+			backgroundColor: theme.palette.mode === "dark" ? colors.neutral[700] : colors.neutral[800],
+			fontSize: "0.75rem",
+			padding: "0.25rem 0.5rem",
+			borderRadius: 4
+		}),
+		arrow: ({ theme }) => ({ color: theme.palette.mode === "dark" ? colors.neutral[700] : colors.neutral[800] })
+	} },
+	MuiAlert: { styleOverrides: {
+		root: { borderRadius: 6 },
+		standardSuccess: ({ theme }) => ({
+			backgroundColor: theme.palette.mode === "dark" ? colors.green[900] : colors.green[50],
+			color: theme.palette.mode === "dark" ? colors.green[200] : colors.green[800]
+		}),
+		standardWarning: ({ theme }) => ({
+			backgroundColor: theme.palette.mode === "dark" ? colors.amber[900] : colors.amber[50],
+			color: theme.palette.mode === "dark" ? colors.amber[200] : colors.amber[800]
+		}),
+		standardError: ({ theme }) => ({
+			backgroundColor: theme.palette.mode === "dark" ? colors.red[900] : colors.red[50],
+			color: theme.palette.mode === "dark" ? colors.red[200] : colors.red[800]
+		}),
+		standardInfo: ({ theme }) => ({
+			backgroundColor: theme.palette.mode === "dark" ? colors.iochmara[900] : colors.iochmara[50],
+			color: theme.palette.mode === "dark" ? colors.iochmara[200] : colors.iochmara[800]
+		})
+	} },
+	MuiTabs: { styleOverrides: { indicator: { height: 2 } } },
+	MuiTab: { styleOverrides: { root: {
+		textTransform: "none",
+		fontWeight: 500,
+		minHeight: 48
+	} } },
+	MuiAvatar: { styleOverrides: { root: { fontWeight: 500 } } },
+	MuiBadge: {
+		variants: badgeColorVariants,
+		styleOverrides: { badge: {
+			fontWeight: 500,
+			fontSize: "0.75rem"
+		} }
+	},
+	MuiCircularProgress: {
+		defaultProps: { color: "primary" },
+		variants: progressColorVariants
+	},
+	MuiLink: {
+		defaultProps: {
+			underline: "hover",
+			fontWeight: 500
+		},
+		styleOverrides: { root: {
+			color: colors.iochmara[600],
+			textDecorationColor: colors.iochmara[300],
+			"&:hover": { color: colors.iochmara[700] }
+		} }
+	},
+	MuiPaper: { styleOverrides: { rounded: { borderRadius: 8 } } },
+	MuiPopover: { styleOverrides: { paper: ({ theme }) => ({
+		borderRadius: 8,
+		boxShadow: theme.shadows[3]
+	}) } },
+	MuiDivider: { styleOverrides: { root: ({ theme }) => ({ borderColor: theme.palette.mode === "dark" ? colors.neutral[700] : colors.neutral[200] }) } },
+	MuiBreadcrumbs: { styleOverrides: { separator: ({ theme }) => ({ color: theme.palette.mode === "dark" ? colors.neutral[500] : colors.neutral[400] }) } }
+};
+const baseThemeOptions = {
+	palette: {
+		primary: {
+			main: colors.iochmara[500],
+			light: colors.iochmara[300],
+			dark: colors.iochmara[600],
+			contrastText: white
+		},
+		secondary: {
+			main: colors.cyan[500],
+			light: colors.cyan[400],
+			dark: colors.cyan[600],
+			contrastText: white
+		},
+		success: {
+			main: colors.green[500],
+			light: colors.green[400],
+			dark: colors.green[600],
+			contrastText: white
+		},
+		warning: {
+			main: colors.amber[500],
+			light: colors.amber[400],
+			dark: colors.amber[600],
+			contrastText: white
+		},
+		error: {
+			main: colors.red[500],
+			light: colors.red[400],
+			dark: colors.red[600],
+			contrastText: white
+		},
+		grey: {
+			50: colors.neutral[50],
+			100: colors.neutral[100],
+			200: colors.neutral[200],
+			300: colors.neutral[300],
+			400: colors.neutral[400],
+			500: colors.neutral[500],
+			600: colors.neutral[600],
+			700: colors.neutral[700],
+			800: colors.neutral[800],
+			900: colors.neutral[900]
+		}
+	},
+	typography: {
+		fontFamily: "ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
+		fontWeightLight: 300,
+		fontWeightRegular: 400,
+		fontWeightMedium: 500,
+		fontWeightBold: 700,
+		h1: {
+			fontWeight: 700,
+			fontSize: "2.25rem",
+			lineHeight: 1.2
+		},
+		h2: {
+			fontWeight: 700,
+			fontSize: "1.875rem",
+			lineHeight: 1.2
+		},
+		h3: {
+			fontWeight: 600,
+			fontSize: "1.5rem",
+			lineHeight: 1.3
+		},
+		h4: {
+			fontWeight: 600,
+			fontSize: "1.25rem",
+			lineHeight: 1.4
+		},
+		h5: {
+			fontWeight: 600,
+			fontSize: "1.125rem",
+			lineHeight: 1.4
+		},
+		h6: {
+			fontWeight: 600,
+			fontSize: "1rem",
+			lineHeight: 1.5
+		},
+		body1: {
+			fontSize: "0.875rem",
+			lineHeight: 1.5
+		},
+		body2: {
+			fontSize: "0.75rem",
+			lineHeight: 1.5
+		},
+		button: {
+			textTransform: "none",
+			fontWeight: 500
+		}
+	},
+	shape: { borderRadius: 6 },
+	spacing: 4,
+	components: componentOverrides
+};
+const lightThemeOptions = {
+	...baseThemeOptions,
+	palette: {
+		...baseThemeOptions.palette,
+		mode: "light",
+		background: {
+			default: white,
+			paper: white
+		},
+		text: {
+			primary: colors.neutral[900],
+			secondary: colors.neutral[600]
+		}
+	}
+};
+const darkThemeOptions = {
+	...baseThemeOptions,
+	palette: {
+		...baseThemeOptions.palette,
+		mode: "dark",
+		background: {
+			default: colors.neutral[900],
+			paper: colors.neutral[800]
+		},
+		text: {
+			primary: colors.neutral[50],
+			secondary: colors.neutral[400]
+		}
+	}
+};
+const lightTheme = createTheme(lightThemeOptions);
+const darkTheme = createTheme(darkThemeOptions);
+const muiTheme = lightTheme;
+function createPaletteColor(colorScale) {
+	return {
+		main: colorScale[500],
+		light: colorScale[300],
+		dark: colorScale[600],
+		contrastText: white
+	};
+}
+const customPaletteAdditions = {
+	brand: createPaletteColor(colors.brand),
+	iochmara: {
+		main: colors.iochmara[500],
+		light: colors.iochmara[50],
+		dark: colors.iochmara[700],
+		contrastText: white
+	},
+	cyan: createPaletteColor(colors.cyan),
+	amber: createPaletteColor(colors.amber),
+	green: createPaletteColor(colors.green),
+	red: createPaletteColor(colors.red),
+	rose: createPaletteColor(colors.rose),
+	fuchsia: createPaletteColor(colors.fuchsia),
+	neutral: {
+		main: colors.neutral[500],
+		light: colors.neutral[300],
+		dark: colors.neutral[600],
+		contrastText: white
+	},
+	envBase: semanticColors.envBase,
+	envCurrent: semanticColors.envCurrent
+};
+Object.assign(lightTheme.palette, customPaletteAdditions);
+Object.assign(darkTheme.palette, customPaletteAdditions);
+/**
+* Semantic variant mappings from Chakra-style tokens to scale values
+* These map semantic names to numeric scale values in the color palette
+*/
+const semanticVariantMap = {
+	solid: 600,
+	subtle: 50,
+	muted: 200,
+	emphasized: 500,
+	focusRing: 400,
+	light: 300
+};
+/**
+* Color aliases - map Chakra color names to our color palette
+*/
+const colorAliases = {
+	orange: "amber",
+	gray: "neutral"
+};
+/**
+* Token lookup function to mimic Chakra UI's token API
+* Usage: token("colors.green.solid") => "#16A34A"
+*/
+function token(path) {
+	const parts = path.split(".");
+	if (parts[0] === "colors" && parts.length >= 3) {
+		let colorName = parts[1];
+		const variant = parts[2];
+		if (colorName in colorAliases) colorName = colorAliases[colorName];
+		if (colorName === "white") return white;
+		if (colorName === "black") return black;
+		if (colorName in semanticColors) {
+			const semantic = semanticColors[colorName];
+			if (typeof semantic === "object" && variant in semantic) return semantic[variant];
+		}
+		if (colorName in colors) {
+			const color = colors[colorName];
+			if (typeof color === "object" && variant in color) return color[variant];
+			if (variant in semanticVariantMap) {
+				const scaleValue = semanticVariantMap[variant];
+				if (typeof color === "object" && scaleValue in color) return color[scaleValue];
+			}
+		}
+	}
+}
+
+//#endregion
+export { semanticColors as a, muiTheme as i, darkTheme as n, token as o, lightTheme as r, colors as t };
+//# sourceMappingURL=mui-theme-CUhybmBq.mjs.map