UNPKG

@syncognito/maya

Version:

Maya Design System - Shared tokens and platform-specific components

268 lines 8.53 kB
export declare const typography: { readonly fontSize: { readonly xs: "0.75rem"; readonly sm: "0.875rem"; readonly base: "1rem"; readonly lg: "1.125rem"; readonly xl: "1.25rem"; readonly '2xl': "1.5rem"; readonly '3xl': "1.875rem"; readonly '4xl': "2.25rem"; }; readonly fontWeight: { readonly normal: "400"; readonly medium: "500"; readonly semibold: "600"; readonly bold: "700"; }; readonly lineHeight: { readonly tight: 1.25; readonly normal: 1.4; readonly relaxed: 1.6; }; readonly fontFamily: { readonly sans: "Inter, system-ui, sans-serif"; readonly mono: "JetBrains Mono, monospace"; }; }; export declare const spacing: { readonly xs: "0.25rem"; readonly sm: "0.5rem"; readonly md: "0.75rem"; readonly lg: "1rem"; readonly xl: "1.5rem"; readonly '2xl': "2rem"; readonly '3xl': "3rem"; readonly '4xl': "4rem"; readonly button: { readonly padding: { readonly sm: "0.375rem 0.75rem"; readonly md: "0.5rem 1rem"; readonly lg: "0.75rem 1.5rem"; }; readonly gap: "0.5rem"; }; readonly card: { readonly padding: "1rem"; readonly gap: "0.75rem"; }; readonly form: { readonly gap: "0.75rem"; readonly padding: "1rem"; }; readonly table: { readonly padding: "0.5rem"; readonly gap: "0.25rem"; }; }; export declare const shadows: { readonly none: "none"; readonly sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"; readonly md: "0 2px 4px -1px rgba(0, 0, 0, 0.1)"; readonly lg: "0 4px 6px -1px rgba(0, 0, 0, 0.1)"; readonly xl: "0 8px 15px -3px rgba(0, 0, 0, 0.1)"; readonly component: { readonly button: { readonly default: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"; readonly hover: "0 2px 4px -1px rgba(0, 0, 0, 0.1)"; }; readonly card: { readonly default: "0 1px 3px 0 rgba(0, 0, 0, 0.1)"; readonly elevated: "0 4px 6px -1px rgba(0, 0, 0, 0.1)"; }; readonly modal: { readonly default: "0 10px 25px -5px rgba(0, 0, 0, 0.1)"; }; readonly dropdown: { readonly default: "0 4px 6px -1px rgba(0, 0, 0, 0.1)"; }; }; }; export declare const webSharedTokens: { readonly colors: { readonly brand: { readonly primary: "#7408C2"; readonly primaryLight: "#9B4DD9"; readonly primaryDark: "#5A0A9A"; readonly primarySubtle: "#F0E6FF"; }; readonly semantic: { readonly success: { readonly main: "#22c55e"; readonly light: "#86efac"; readonly dark: "#16a34a"; }; readonly warning: { readonly main: "#f59e0b"; readonly light: "#fde047"; readonly dark: "#d97706"; }; readonly error: { readonly main: "#ef4444"; readonly light: "#fca5a5"; readonly dark: "#dc2626"; }; readonly info: { readonly main: "#3b82f6"; readonly light: "#93c5fd"; readonly dark: "#2563eb"; }; }; readonly surface: { readonly primary: "#ffffff"; readonly secondary: "#f9fafb"; readonly tertiary: "#f3f4f6"; readonly elevated: "#ffffff"; }; readonly text: { readonly primary: "#111827"; readonly secondary: "#6b7280"; readonly tertiary: "#9ca3af"; readonly inverse: "#ffffff"; readonly disabled: "#d1d5db"; readonly brand: "#7408C2"; }; readonly border: { readonly primary: "#e5e7eb"; readonly secondary: "#f3f4f6"; readonly focus: "#7408C2"; readonly error: "#fca5a5"; readonly success: "#86efac"; }; readonly interactive: { readonly hover: "#F0E6FF"; readonly active: "#E6D6FF"; readonly focus: "#F8F0FF"; readonly disabled: "#f9fafb"; }; readonly status: { readonly online: "#22c55e"; readonly offline: "#6b7280"; readonly busy: "#f59e0b"; readonly away: "#f59e0b"; }; readonly priority: { readonly low: "#22c55e"; readonly medium: "#f59e0b"; readonly high: "#ef4444"; readonly urgent: "#dc2626"; }; readonly category: { readonly work: "#3b82f6"; readonly personal: "#7408C2"; readonly health: "#22c55e"; readonly finance: "#f59e0b"; readonly education: "#8b5cf6"; readonly travel: "#06b6d4"; }; }; readonly borderRadius: { readonly none: 0; readonly sm: 2; readonly md: 4; readonly lg: 8; readonly xl: 12; readonly full: 9999; }; readonly zIndex: { readonly base: 0; readonly dropdown: 1000; readonly modal: 2000; readonly tooltip: 3000; readonly overlay: 4000; readonly toast: 5000; }; readonly animation: { readonly fast: "150ms"; readonly normal: "300ms"; readonly slow: "500ms"; readonly easing: { readonly ease: "ease"; readonly easeIn: "ease-in"; readonly easeOut: "ease-out"; readonly easeInOut: "ease-in-out"; }; }; readonly typography: { readonly fontSize: { readonly xs: "0.75rem"; readonly sm: "0.875rem"; readonly base: "1rem"; readonly lg: "1.125rem"; readonly xl: "1.25rem"; readonly '2xl': "1.5rem"; readonly '3xl': "1.875rem"; readonly '4xl': "2.25rem"; }; readonly fontWeight: { readonly normal: "400"; readonly medium: "500"; readonly semibold: "600"; readonly bold: "700"; }; readonly lineHeight: { readonly tight: 1.25; readonly normal: 1.4; readonly relaxed: 1.6; }; readonly fontFamily: { readonly sans: "Inter, system-ui, sans-serif"; readonly mono: "JetBrains Mono, monospace"; }; }; readonly spacing: { readonly xs: "0.25rem"; readonly sm: "0.5rem"; readonly md: "0.75rem"; readonly lg: "1rem"; readonly xl: "1.5rem"; readonly '2xl': "2rem"; readonly '3xl': "3rem"; readonly '4xl': "4rem"; readonly button: { readonly padding: { readonly sm: "0.375rem 0.75rem"; readonly md: "0.5rem 1rem"; readonly lg: "0.75rem 1.5rem"; }; readonly gap: "0.5rem"; }; readonly card: { readonly padding: "1rem"; readonly gap: "0.75rem"; }; readonly form: { readonly gap: "0.75rem"; readonly padding: "1rem"; }; readonly table: { readonly padding: "0.5rem"; readonly gap: "0.25rem"; }; }; readonly shadows: { readonly none: "none"; readonly sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"; readonly md: "0 2px 4px -1px rgba(0, 0, 0, 0.1)"; readonly lg: "0 4px 6px -1px rgba(0, 0, 0, 0.1)"; readonly xl: "0 8px 15px -3px rgba(0, 0, 0, 0.1)"; readonly component: { readonly button: { readonly default: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"; readonly hover: "0 2px 4px -1px rgba(0, 0, 0, 0.1)"; }; readonly card: { readonly default: "0 1px 3px 0 rgba(0, 0, 0, 0.1)"; readonly elevated: "0 4px 6px -1px rgba(0, 0, 0, 0.1)"; }; readonly modal: { readonly default: "0 10px 25px -5px rgba(0, 0, 0, 0.1)"; }; readonly dropdown: { readonly default: "0 4px 6px -1px rgba(0, 0, 0, 0.1)"; }; }; }; }; export type WebSharedTokens = typeof webSharedTokens; //# sourceMappingURL=tokens.d.ts.map