/** * @zendir/ui - Design Tokens (core scalars) * * Exportable design tokens for use in CSS and JavaScript. * Based on Astro UX Design System. * * These are the shared scalar primitives (spacing, radius, typography, * shadows, animation) plus the base color reference table. Status colors * are sourced from the Astro UXDS ramps in tokens/palettes so there is a * single source of truth for severity values across the whole system. */ export declare const colors: { readonly status: { readonly critical: "#FF3838"; readonly serious: "#FFB302"; readonly caution: "#FCE83A"; readonly normal: "#56F000"; readonly standby: "#2DCCFF"; readonly off: "#A4ABB6"; }; readonly statusLightFill: { readonly critical: "#FF2A04"; readonly serious: "#FFAF3D"; readonly caution: "#FAD800"; readonly normal: "#00E200"; readonly standby: "#64D9FF"; readonly off: "#7B8089"; }; readonly statusLightBorder: { readonly critical: "#661102"; readonly serious: "#664618"; readonly caution: "#645600"; readonly normal: "#005A00"; readonly standby: "#285766"; readonly off: "#3C3E42"; }; readonly background: { readonly dark: { readonly base: "#101923"; readonly surface: "#1b2d3e"; readonly elevated: "#243647"; readonly overlay: "rgba(0, 0, 0, 0.7)"; }; readonly light: { readonly base: "#f5f6f9"; readonly surface: "#ffffff"; readonly elevated: "#ffffff"; readonly overlay: "rgba(0, 0, 0, 0.5)"; }; }; readonly text: { readonly dark: { readonly primary: "#ffffff"; readonly secondary: "#9ea7ad"; readonly tertiary: "#6b7175"; readonly muted: "#52595f"; }; readonly light: { readonly primary: "#1b2d3e"; readonly secondary: "#4c5a67"; readonly tertiary: "#7a8891"; readonly muted: "#a4adb5"; }; }; readonly accent: { readonly primary: "#4dacff"; readonly secondary: "#3d8ddb"; readonly tertiary: "#2e6eb3"; }; readonly border: { readonly dark: { readonly default: "#3c4b5a"; readonly muted: "#2b3d4e"; readonly focus: "#4dacff"; }; readonly light: { readonly default: "#c4c8cc"; readonly muted: "#e1e4e8"; readonly focus: "#4dacff"; }; }; }; export declare const spacing: { readonly xs: "4px"; readonly sm: "8px"; readonly md: "16px"; readonly lg: "24px"; readonly xl: "32px"; readonly xxl: "48px"; }; export declare const borderRadius: { readonly none: "0"; readonly sm: "2px"; readonly md: "4px"; readonly lg: "8px"; readonly xl: "16px"; readonly full: "9999px"; }; /** * Typography tokens following AstroUXDS Design System * @see https://www.astrouxds.com/foundations/typography/ * * Font weights per Astro spec: 300 (Light), 400 (Regular), 500 (Medium), 700 (Bold) * Note: Astro does NOT use 600 (semibold) - use 500 (medium) or 700 (bold) instead */ export declare const typography: { readonly fontFamily: { /** Heading font: Sora (Zendir Brand Standard) */ readonly heading: "\"Sora\", \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif"; /** Primary font: Public Sans (Zendir Brand Standard) */ readonly primary: "\"Public Sans\", \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif"; /** Monospace font: Roboto Mono for data/code */ readonly mono: "\"Roboto Mono\", \"SF Mono\", \"Consolas\", \"Liberation Mono\", monospace"; }; readonly fontSize: { readonly micro: "0.5625rem"; readonly xxs: "0.625rem"; readonly xs: "0.75rem"; readonly sm: "0.875rem"; readonly base: "1rem"; readonly md: "1.125rem"; readonly lg: "1.25rem"; readonly xl: "1.5rem"; readonly xxl: "2.125rem"; readonly xxxl: "3rem"; readonly display: "3.75rem"; }; /** * Font weights per AstroUXDS specification * Only 300, 400, 500, 700 are officially supported */ readonly fontWeight: { readonly light: 300; readonly normal: 400; readonly regular: 400; readonly medium: 500; readonly bold: 700; /** @deprecated Use medium (500) instead - Astro spec only supports 300, 400, 500, 700 */ readonly semibold: 500; }; readonly lineHeight: { readonly tight: 1.25; readonly normal: 1.5; readonly relaxed: 1.75; }; }; export declare const shadows: { readonly none: "none"; readonly sm: "0 1px 2px rgba(0, 0, 0, 0.3)"; readonly md: "0 2px 8px rgba(0, 0, 0, 0.3)"; readonly lg: "0 4px 16px rgba(0, 0, 0, 0.3)"; readonly xl: "0 8px 32px rgba(0, 0, 0, 0.4)"; readonly glow: "0 0 20px rgba(77, 172, 255, 0.4)"; }; export declare const animation: { readonly fast: "150ms ease"; readonly normal: "250ms ease"; readonly slow: "400ms ease"; };