@syncognito/maya
Version:
Maya Design System - Shared tokens and platform-specific components
268 lines • 8.53 kB
TypeScript
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