@cranberry-money/shared-constants

/** * Design tokens for consistent styling across platforms * These values can be used in both React (CSS) and React Native (StyleSheet) */ export declare const DESIGN_TOKENS: { readonly colors: { readonly surface: { readonly primary: "#0c1426"; readonly secondary: "#1a2332"; readonly tertiary: "#2a3441"; readonly quaternary: "#4a5568"; readonly elevated: "#243247"; }; readonly content: { readonly primary: "#fafbfc"; readonly secondary: "#e4e7ea"; readonly body: "#cbd2d8"; readonly muted: "#8b95a1"; readonly subtle: "#64748b"; }; readonly primary: { readonly 100: "#e0e7ff"; readonly 300: "#a5b4fc"; readonly 400: "#818cf8"; readonly 500: "#6366f1"; readonly 600: "#4f46e5"; readonly 700: "#4338ca"; readonly 800: "#3730a3"; readonly 900: "#312e81"; }; readonly success: { readonly 300: "#86efac"; readonly 400: "#4ade80"; readonly 600: "#16a34a"; readonly 700: "#15803d"; readonly 900: "#14532d"; }; readonly error: { readonly 300: "#fca5a5"; readonly 400: "#f87171"; readonly 600: "#dc2626"; readonly 700: "#b91c1c"; readonly 900: "#7f1d1d"; readonly subtle: "#fef2f2"; }; readonly warning: { readonly 300: "#fbbf24"; readonly 600: "#d97706"; readonly 900: "#92400e"; }; readonly info: { readonly 400: "#38bdf8"; readonly 600: "#0284c7"; }; readonly border: { readonly default: "#334155"; readonly subtle: "#1e293b"; readonly strong: "#475569"; readonly focus: { readonly primary: "#6366f1"; readonly subtle: "#6b7280"; }; }; readonly accent: { readonly secondary: "#ec4899"; readonly warm: "#f97316"; readonly teal: "#14b8a6"; readonly violet: "#8b5cf6"; }; readonly financial: { readonly positive: "#10b981"; readonly negative: "#ef4444"; readonly distribution: "#8b5cf6"; }; readonly utility: { readonly white: "#ffffff"; readonly black: "#000000"; readonly transparent: "transparent"; }; readonly chart: readonly ["#3B82F6", "#EF4444", "#10B981", "#F59E0B", "#8B5CF6", "#EC4899", "#06B6D4", "#84CC16", "#F97316", "#6366F1"]; readonly semantic: { readonly positive: "#10B981"; readonly negative: "#EF4444"; readonly neutral: "#6B7280"; }; }; readonly spacing: { readonly xs: 4; readonly sm: 8; readonly md: 16; readonly lg: 24; readonly xl: 32; readonly '2xl': 48; readonly '3xl': 64; readonly '4xl': 80; }; readonly borderRadius: { readonly none: 0; readonly sm: 4; readonly md: 8; readonly lg: 12; readonly xl: 16; readonly '2xl': 24; readonly full: 9999; }; readonly fontSize: { readonly xs: 12; readonly sm: 14; readonly base: 16; readonly lg: 18; readonly xl: 20; readonly '2xl': 24; readonly '3xl': 30; readonly '4xl': 36; readonly '5xl': 48; }; readonly fontWeight: { readonly normal: "400"; readonly medium: "500"; readonly semibold: "600"; readonly bold: "700"; }; readonly lineHeight: { readonly tight: 1.25; readonly normal: 1.5; readonly relaxed: 1.75; readonly loose: 2; }; readonly zIndex: { readonly base: 0; readonly dropdown: 1000; readonly sticky: 1020; readonly fixed: 1030; readonly backdrop: 1040; readonly modal: 1050; readonly popover: 1060; readonly tooltip: 1070; }; readonly animation: { readonly duration: { readonly instant: 0; readonly fast: 150; readonly normal: 300; readonly slow: 500; }; readonly easing: { readonly linear: "linear"; readonly easeIn: "ease-in"; readonly easeOut: "ease-out"; readonly easeInOut: "ease-in-out"; }; }; readonly shadows: { readonly sm: { readonly shadowColor: "#000"; readonly shadowOffset: { readonly width: 0; readonly height: 1; }; readonly shadowOpacity: 0.05; readonly shadowRadius: 2; readonly elevation: 1; readonly web: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"; }; readonly md: { readonly shadowColor: "#000"; readonly shadowOffset: { readonly width: 0; readonly height: 2; }; readonly shadowOpacity: 0.1; readonly shadowRadius: 4; readonly elevation: 3; readonly web: "0 2px 4px 0 rgba(0, 0, 0, 0.1)"; }; readonly lg: { readonly shadowColor: "#000"; readonly shadowOffset: { readonly width: 0; readonly height: 4; }; readonly shadowOpacity: 0.15; readonly shadowRadius: 8; readonly elevation: 5; readonly web: "0 4px 8px 0 rgba(0, 0, 0, 0.15)"; }; readonly xl: { readonly shadowColor: "#000"; readonly shadowOffset: { readonly width: 0; readonly height: 8; }; readonly shadowOpacity: 0.2; readonly shadowRadius: 16; readonly elevation: 8; readonly web: "0 8px 16px 0 rgba(0, 0, 0, 0.2)"; }; }; }; export type Colors = typeof DESIGN_TOKENS.colors; export type Spacing = typeof DESIGN_TOKENS.spacing; export type BorderRadius = typeof DESIGN_TOKENS.borderRadius; export type FontSize = typeof DESIGN_TOKENS.fontSize; export type FontWeight = typeof DESIGN_TOKENS.fontWeight; export type Shadow = typeof DESIGN_TOKENS.shadows; //# sourceMappingURL=design-tokens.d.ts.map