@zendir/ui 0.5.0 → 0.6.1

package/dist/tokens/themes.js

@@ -0,0 +1,704 @@
+import { electricBlue, neutral, ultraviolet } from "./palettes/zendir.js";
+import { astroStatus } from "./palettes/astro.js";
+import { green, red, yellow } from "./palettes/tailwind.js";
+//#region src/tokens/themes.ts
+var animationTokens = {
+	fast: "all 150ms cubic-bezier(0.4, 0, 0.2, 1)",
+	normal: "all 250ms cubic-bezier(0.4, 0, 0.2, 1)",
+	slow: "all 400ms cubic-bezier(0.4, 0, 0.2, 1)",
+	spring: "all 300ms cubic-bezier(0.34, 1.56, 0.64, 1)",
+	easing: {
+		default: "cubic-bezier(0.4, 0, 0.2, 1)",
+		in: "ease-in",
+		out: "ease-out",
+		inOut: "ease-in-out"
+	},
+	duration: {
+		instant: 0,
+		fast: 150,
+		normal: 250,
+		slow: 400
+	}
+};
+animationTokens.easing;
+var focusTokensDark = {
+	color: "#4dacff",
+	width: "2px",
+	offset: "2px",
+	ring: "0 0 0 2px #4dacff",
+	style: {
+		outline: "2px solid #4dacff",
+		outlineOffset: "2px"
+	}
+};
+var focusTokensLight = {
+	color: "#0066cc",
+	width: "2px",
+	offset: "2px",
+	ring: "0 0 0 2px #0066cc",
+	style: {
+		outline: "2px solid #0066cc",
+		outlineOffset: "2px"
+	}
+};
+var focusTokensPurpleHue = {
+	color: "#8b5cf6",
+	width: "2px",
+	offset: "2px",
+	ring: "0 0 0 2px #8b5cf6",
+	style: {
+		outline: "2px solid #8b5cf6",
+		outlineOffset: "2px"
+	}
+};
+var shadowsDark = {
+	none: "none",
+	sm: "0 1px 2px rgba(0, 0, 0, 0.3)",
+	md: "0 4px 8px rgba(0, 0, 0, 0.4)",
+	lg: "0 8px 16px rgba(0, 0, 0, 0.5)",
+	xl: "0 16px 32px rgba(0, 0, 0, 0.6)",
+	glow: (color) => `0 0 20px ${color}40, 0 0 40px ${color}20`
+};
+var shadowsLight = {
+	none: "none",
+	sm: "0 1px 2px rgba(0, 0, 0, 0.1)",
+	md: "0 4px 8px rgba(0, 0, 0, 0.15)",
+	lg: "0 8px 16px rgba(0, 0, 0, 0.2)",
+	xl: "0 16px 32px rgba(0, 0, 0, 0.25)",
+	glow: (color) => `0 0 20px ${color}30, 0 0 40px ${color}15`
+};
+var layoutTokens = {
+	card: {
+		padding: "16px",
+		gap: "24px",
+		gapCompact: "16px",
+		heading: {
+			iconSize: 18,
+			iconSizeCompact: 16,
+			titleFontSize: "1rem",
+			titleFontSizeChart: "0.875rem",
+			titleFontWeight: 500,
+			gap: 8
+		}
+	},
+	section: {
+		headerPaddingBottom: "8px",
+		headerMarginBottom: "0px",
+		contentPaddingTop: "8px"
+	},
+	form: {
+		fieldGap: "12px",
+		inlineGap: "12px",
+		groupPadding: "12px",
+		groupGap: "12px",
+		labelGap: "3px"
+	},
+	surface: {
+		padding: "12px",
+		borderRadius: "12px",
+		gap: "8px"
+	}
+};
+var astroThemeDark = {
+	colors: {
+		background: {
+			base: "#101923",
+			surface: "#1b2d3e",
+			elevated: "#243b53",
+			overlay: "rgba(16, 25, 35, 0.95)"
+		},
+		border: {
+			default: "#2b659b",
+			muted: "#172635",
+			focus: "#4dacff"
+		},
+		text: {
+			primary: "#ffffff",
+			secondary: "#b7c5d3",
+			tertiary: "#8fa4b7",
+			muted: "#8fa4b7",
+			inverse: "#1b2d3e"
+		},
+		status: { ...astroStatus },
+		semantic: {
+			success: "#56f000",
+			warning: "#fce83a",
+			error: "#ff3838",
+			info: "#4dacff"
+		},
+		accent: {
+			primary: "#4dacff",
+			secondary: "#56f000",
+			tertiary: "#a371f7"
+		},
+		interactive: {
+			default: "#4dacff",
+			hover: "#92cbff",
+			active: "#0066cc",
+			disabled: "#6b7280"
+		}
+	},
+	spacing: {
+		xxs: "2px",
+		xs: "4px",
+		sm: "8px",
+		smd: "12px",
+		md: "16px",
+		mdl: "20px",
+		lg: "24px",
+		xl: "32px",
+		xxl: "48px"
+	},
+	borderRadius: {
+		none: "0",
+		xs: "1px",
+		sm: "2px",
+		md: "4px",
+		lg: "8px",
+		xl: "12px",
+		full: "9999px"
+	},
+	elementSize: {
+		sm: "28px",
+		md: "36px",
+		lg: "44px"
+	},
+	typography: {
+		/**
+		* Font families per AstroUXDS specification
+		* @see https://www.astrouxds.com/foundations/typography/
+		*/
+		fontFamily: {
+			/** Primary font: Roboto with comprehensive system fallbacks */
+			primary: "\"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
+			/** Heading font: Roboto per AstroUXDS (matches primary). */
+			heading: "\"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
+			/** Monospace font: Roboto Mono for data/code with system fallbacks */
+			mono: "\"Roboto Mono\", \"SF Mono\", \"Consolas\", \"Liberation Mono\", monospace"
+		},
+		display: {
+			1: {
+				fontSize: "3.75rem",
+				fontWeight: 300,
+				letterSpacing: "-0.5px",
+				lineHeight: "4.375rem"
+			},
+			2: {
+				fontSize: "3rem",
+				fontWeight: 400,
+				letterSpacing: "0",
+				lineHeight: "3.5rem"
+			}
+		},
+		heading: {
+			1: {
+				fontSize: "2.125rem",
+				fontWeight: 400,
+				letterSpacing: "0.25px",
+				lineHeight: "2.5rem"
+			},
+			"1Bold": {
+				fontSize: "2.125rem",
+				fontWeight: 700,
+				letterSpacing: "0.25px",
+				lineHeight: "2rem"
+			},
+			2: {
+				fontSize: "1.5rem",
+				fontWeight: 400,
+				letterSpacing: "0",
+				lineHeight: "1.75rem"
+			},
+			3: {
+				fontSize: "1.25rem",
+				fontWeight: 500,
+				letterSpacing: "0.15px",
+				lineHeight: "1.5rem"
+			},
+			4: {
+				fontSize: "1.25rem",
+				fontWeight: 300,
+				letterSpacing: "0.15px",
+				lineHeight: "1.5rem"
+			},
+			5: {
+				fontSize: "1.125rem",
+				fontWeight: 400,
+				letterSpacing: "0",
+				lineHeight: "1.5rem"
+			},
+			6: {
+				fontSize: "1.125rem",
+				fontWeight: 300,
+				letterSpacing: "0",
+				lineHeight: "1.5rem"
+			}
+		},
+		body: {
+			1: {
+				fontSize: "1rem",
+				fontWeight: 400,
+				letterSpacing: "0.5px",
+				lineHeight: "1.5rem"
+			},
+			"1Bold": {
+				fontSize: "1rem",
+				fontWeight: 700,
+				letterSpacing: "0.5px",
+				lineHeight: "1.5rem"
+			},
+			2: {
+				fontSize: "0.875rem",
+				fontWeight: 400,
+				letterSpacing: "0.5px",
+				lineHeight: "1.25rem"
+			},
+			"2Bold": {
+				fontSize: "0.875rem",
+				fontWeight: 700,
+				letterSpacing: "0.5px",
+				lineHeight: "1.25rem"
+			},
+			3: {
+				fontSize: "0.75rem",
+				fontWeight: 400,
+				letterSpacing: "0",
+				lineHeight: "1rem"
+			},
+			"3Bold": {
+				fontSize: "0.75rem",
+				fontWeight: 700,
+				letterSpacing: "0",
+				lineHeight: "1rem"
+			}
+		},
+		control: {
+			1: {
+				fontSize: "1rem",
+				fontWeight: 400,
+				letterSpacing: "0.5px",
+				lineHeight: "1.25rem"
+			},
+			"1Bold": {
+				fontSize: "1rem",
+				fontWeight: 700,
+				letterSpacing: "0.5px",
+				lineHeight: "1.25rem"
+			}
+		},
+		fontSize: {
+			micro: "0.5625rem",
+			xxs: "0.625rem",
+			xs: "0.625rem",
+			sm: "0.75rem",
+			base: "0.875rem",
+			md: "0.875rem",
+			lg: "1rem",
+			xl: "1.25rem",
+			xxl: "1.5rem",
+			xxxl: "2.125rem"
+		},
+		/**
+		* Font weights per AstroUXDS specification
+		* Only 300, 400, 500, 700 are officially supported
+		* @see https://www.astrouxds.com/foundations/typography/
+		*/
+		fontWeight: {
+			light: 300,
+			normal: 400,
+			medium: 500,
+			/** @deprecated Use medium (500) instead - Astro spec only supports 300, 400, 500, 700 */
+			semibold: 500,
+			bold: 700
+		},
+		lineHeight: {
+			tight: "1.25rem",
+			normal: "1.5rem",
+			relaxed: "1.75rem"
+		},
+		letterSpacing: {
+			tight: "-0.5px",
+			normal: "0",
+			wide: "0.5px"
+		}
+	},
+	shadows: shadowsDark,
+	animation: animationTokens,
+	focus: focusTokensDark,
+	layout: layoutTokens
+};
+var astroThemeLight = {
+	colors: {
+		background: {
+			base: "#eaeef4",
+			surface: "#f5f8fc",
+			elevated: "#ffffff",
+			overlay: "rgba(234, 238, 244, 0.95)"
+		},
+		border: {
+			default: "#2b659b",
+			muted: "#d1d5db",
+			focus: "#0066cc"
+		},
+		text: {
+			primary: "#1b2d3e",
+			secondary: "#51667c",
+			tertiary: "#556a7c",
+			muted: "#556a7c",
+			inverse: "#ffffff"
+		},
+		status: { ...astroStatus },
+		semantic: {
+			success: "#56f000",
+			warning: "#fce83a",
+			error: "#ff3838",
+			info: "#4dacff"
+		},
+		accent: {
+			primary: "#0066cc",
+			secondary: "#56f000",
+			tertiary: "#7c3aed"
+		},
+		interactive: {
+			default: "#0066cc",
+			hover: "#0052a3",
+			active: "#003d7a",
+			disabled: "#a4abb6"
+		}
+	},
+	spacing: astroThemeDark.spacing,
+	borderRadius: astroThemeDark.borderRadius,
+	elementSize: astroThemeDark.elementSize,
+	typography: astroThemeDark.typography,
+	shadows: shadowsLight,
+	animation: animationTokens,
+	focus: focusTokensLight,
+	layout: layoutTokens
+};
+var hybridTheme = {
+	colors: {
+		background: {
+			base: "#09090b",
+			surface: "rgba(24, 24, 27, 0.98)",
+			elevated: "rgba(39, 39, 42, 0.98)",
+			overlay: "rgba(0, 0, 0, 0.85)"
+		},
+		border: {
+			default: "rgba(139, 92, 246, 0.3)",
+			muted: "rgba(63, 63, 70, 0.5)",
+			focus: "#8b5cf6"
+		},
+		text: {
+			primary: "#ffffff",
+			secondary: "#a1a1aa",
+			tertiary: "#8e8e96",
+			muted: "#8e8e96",
+			inverse: "#09090b"
+		},
+		status: { ...astroStatus },
+		semantic: {
+			success: "#56f000",
+			warning: "#fce83a",
+			error: "#ff3838",
+			info: "#8b5cf6"
+		},
+		accent: {
+			primary: "#8b5cf6",
+			secondary: "#a78bfa",
+			tertiary: "#7c3aed"
+		},
+		interactive: {
+			default: "#8b5cf6",
+			hover: "#a78bfa",
+			active: "#7c3aed",
+			disabled: "#52525b"
+		}
+	},
+	spacing: astroThemeDark.spacing,
+	borderRadius: {
+		none: "0",
+		xs: "2px",
+		sm: "4px",
+		md: "6px",
+		lg: "10px",
+		xl: "14px",
+		full: "9999px"
+	},
+	elementSize: astroThemeDark.elementSize,
+	typography: astroThemeDark.typography,
+	shadows: {
+		...shadowsDark,
+		glow: (color) => `0 0 20px ${color}50, 0 0 40px ${color}25, 0 4px 12px ${color}20`
+	},
+	animation: animationTokens,
+	focus: focusTokensPurpleHue,
+	layout: layoutTokens
+};
+var purpleHueTheme = {
+	colors: {
+		background: {
+			base: "#0a0a0f",
+			surface: "rgba(18, 18, 28, 0.98)",
+			elevated: "rgba(28, 28, 42, 0.98)",
+			overlay: "rgba(0, 0, 0, 0.9)"
+		},
+		border: {
+			default: "rgba(139, 92, 246, 0.25)",
+			muted: "rgba(55, 48, 82, 0.5)",
+			focus: "#8b5cf6"
+		},
+		text: {
+			primary: "#fafafa",
+			secondary: "#a1a1aa",
+			tertiary: "#8e8e96",
+			muted: "#8e8e96",
+			inverse: "#0a0a0f"
+		},
+		status: { ...astroStatus },
+		semantic: {
+			success: "#56f000",
+			warning: "#fce83a",
+			error: "#ff3838",
+			info: "#a78bfa"
+		},
+		accent: {
+			primary: "#8b5cf6",
+			secondary: "#a78bfa",
+			tertiary: "#7c3aed"
+		},
+		interactive: {
+			default: "#8b5cf6",
+			hover: "#a78bfa",
+			active: "#7c3aed",
+			disabled: "#52525b"
+		}
+	},
+	spacing: astroThemeDark.spacing,
+	borderRadius: {
+		none: "0",
+		xs: "2px",
+		sm: "4px",
+		md: "6px",
+		lg: "10px",
+		xl: "14px",
+		full: "9999px"
+	},
+	elementSize: astroThemeDark.elementSize,
+	typography: astroThemeDark.typography,
+	shadows: {
+		...shadowsDark,
+		glow: (color) => `0 0 25px ${color}60, 0 0 50px ${color}30, 0 4px 16px ${color}25`
+	},
+	animation: animationTokens,
+	focus: { ...focusTokensPurpleHue },
+	layout: layoutTokens
+};
+var nebulaBase = "#070A18";
+var nebulaElevated = "#121B36";
+var nebulaTheme = {
+	colors: {
+		background: {
+			base: nebulaBase,
+			surface: neutral[900],
+			elevated: nebulaElevated,
+			overlay: "rgba(7, 10, 24, 0.9)"
+		},
+		border: {
+			default: neutral[800],
+			muted: nebulaElevated,
+			focus: ultraviolet[500]
+		},
+		text: {
+			primary: neutral[50],
+			secondary: neutral[300],
+			tertiary: neutral[400],
+			muted: neutral[500],
+			inverse: nebulaBase
+		},
+		status: { ...astroStatus },
+		semantic: {
+			success: green[500],
+			warning: yellow[500],
+			error: red[500],
+			info: electricBlue[500]
+		},
+		accent: {
+			primary: ultraviolet[500],
+			secondary: ultraviolet[400],
+			tertiary: ultraviolet[600]
+		},
+		interactive: {
+			default: ultraviolet[500],
+			hover: ultraviolet[400],
+			active: ultraviolet[700],
+			disabled: neutral[600]
+		}
+	},
+	spacing: astroThemeDark.spacing,
+	borderRadius: {
+		none: "0",
+		xs: "2px",
+		sm: "4px",
+		md: "7px",
+		lg: "10px",
+		xl: "14px",
+		full: "9999px"
+	},
+	elementSize: astroThemeDark.elementSize,
+	typography: astroThemeDark.typography,
+	shadows: {
+		...shadowsDark,
+		glow: (color) => `0 0 25px ${color}60, 0 0 50px ${color}30, 0 4px 16px ${color}25`
+	},
+	animation: animationTokens,
+	focus: { ...focusTokensPurpleHue },
+	layout: layoutTokens
+};
+var transparentTheme = {
+	colors: {
+		background: {
+			base: "rgba(8, 12, 20, 0.95)",
+			surface: "rgba(15, 20, 35, 0.85)",
+			elevated: "rgba(25, 35, 55, 0.80)",
+			overlay: "rgba(0, 0, 0, 0.75)"
+		},
+		border: {
+			default: "rgba(139, 92, 246, 0.25)",
+			muted: "rgba(139, 92, 246, 0.15)",
+			focus: "#8b5cf6",
+			fadedBoxShadow: "inset 0 1px 0 rgba(139, 92, 246, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.05), inset 1px 0 0 rgba(139, 92, 246, 0.06), inset -1px 0 0 rgba(139, 92, 246, 0.06)"
+		},
+		text: {
+			primary: "#f0f4f8",
+			secondary: "#94a3b8",
+			tertiary: "#7b8da1",
+			muted: "#7b8da1",
+			inverse: "#0f172a"
+		},
+		status: { ...astroStatus },
+		semantic: {
+			success: "#56f000",
+			warning: "#fce83a",
+			error: "#ff3838",
+			info: "#8b5cf6"
+		},
+		accent: {
+			primary: "#8b5cf6",
+			secondary: "#a78bfa",
+			tertiary: "#7c3aed"
+		},
+		interactive: {
+			default: "#8b5cf6",
+			hover: "#a78bfa",
+			active: "#7c3aed",
+			disabled: "#475569",
+			transparentDefault: "rgba(139, 92, 246, 0.12)",
+			transparentHover: "rgba(139, 92, 246, 0.32)",
+			transparentInputBg: "rgba(139, 92, 246, 0.08)"
+		}
+	},
+	spacing: astroThemeDark.spacing,
+	borderRadius: {
+		none: "0",
+		xs: "2px",
+		sm: "4px",
+		md: "8px",
+		lg: "12px",
+		xl: "16px",
+		full: "9999px"
+	},
+	elementSize: astroThemeDark.elementSize,
+	typography: astroThemeDark.typography,
+	shadows: {
+		...shadowsDark,
+		glow: (color) => `0 0 30px ${color}50, 0 0 60px ${color}25, 0 4px 20px rgba(0,0,0,0.4)`
+	},
+	animation: animationTokens,
+	focus: {
+		color: "#8b5cf6",
+		width: "2px",
+		offset: "2px",
+		ring: "0 0 0 2px #8b5cf6",
+		style: {
+			outline: "2px solid #8b5cf6",
+			outlineOffset: "2px"
+		}
+	},
+	layout: layoutTokens
+};
+var transparentMinimalTheme = {
+	colors: {
+		background: {
+			base: "rgba(8, 12, 20, 0.95)",
+			surface: "rgba(15, 20, 35, 0.85)",
+			elevated: "rgba(25, 35, 55, 0.80)",
+			overlay: "rgba(0, 0, 0, 0.75)"
+		},
+		border: {
+			default: "rgba(139, 92, 246, 0.25)",
+			muted: "rgba(139, 92, 246, 0.15)",
+			focus: "#8b5cf6",
+			fadedBoxShadow: "inset 0 1px 0 rgba(139, 92, 246, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.1), inset 1px 0 0 rgba(139, 92, 246, 0.05), inset -1px 0 0 rgba(139, 92, 246, 0.05)"
+		},
+		text: {
+			primary: "#f0f4f8",
+			secondary: "#94a3b8",
+			tertiary: "#7b8da1",
+			muted: "#7b8da1",
+			inverse: "#0f172a"
+		},
+		status: { ...astroStatus },
+		semantic: {
+			success: "#56f000",
+			warning: "#fce83a",
+			error: "#ff3838",
+			info: "#8b5cf6"
+		},
+		accent: {
+			primary: "#8b5cf6",
+			secondary: "#a78bfa",
+			tertiary: "#7c3aed"
+		},
+		interactive: {
+			default: "#8b5cf6",
+			hover: "#a78bfa",
+			active: "#7c3aed",
+			disabled: "#475569",
+			transparentDefault: "rgba(139, 92, 246, 0.12)",
+			transparentHover: "rgba(139, 92, 246, 0.32)",
+			transparentInputBg: "rgba(139, 92, 246, 0.08)"
+		}
+	},
+	spacing: astroThemeDark.spacing,
+	borderRadius: {
+		none: "0",
+		xs: "2px",
+		sm: "4px",
+		md: "8px",
+		lg: "12px",
+		xl: "16px",
+		full: "9999px"
+	},
+	elementSize: astroThemeDark.elementSize,
+	typography: astroThemeDark.typography,
+	shadows: {
+		...shadowsDark,
+		glow: (color) => `0 0 30px ${color}50, 0 0 60px ${color}25, 0 4px 20px rgba(0,0,0,0.4)`
+	},
+	animation: animationTokens,
+	focus: {
+		color: "#8b5cf6",
+		width: "2px",
+		offset: "2px",
+		ring: "0 0 0 2px #8b5cf6",
+		style: {
+			outline: "2px solid #8b5cf6",
+			outlineOffset: "2px"
+		}
+	},
+	layout: layoutTokens
+};
+//#endregion
+export { animationTokens, astroThemeDark, astroThemeLight, focusTokensDark, focusTokensLight, focusTokensPurpleHue, hybridTheme, layoutTokens, nebulaTheme, purpleHueTheme, shadowsDark, shadowsLight, transparentMinimalTheme, transparentTheme };
+
+//# sourceMappingURL=themes.js.map