@cranberry-money/shared-constants

export declare const DESIGN_TOKENS: { readonly colors: { readonly semantic: { readonly positive: "#16a34a"; readonly negative: "#dc2626"; readonly neutral: "#6B7280"; }; readonly financial: { readonly positive: "#16a34a"; readonly negative: "#dc2626"; readonly distribution: "#6366f1"; }; readonly chartUI: { readonly dateText: "#8b95a1"; readonly gridLines: "rgba(156, 163, 175, 0.3)"; readonly tooltipBackground: "rgba(17, 24, 39, 0.8)"; readonly portfolioLine: "#38bdf8"; readonly pointerStrip: "rgba(255, 255, 255, 0.15)"; readonly tooltip: { readonly background: "#374151"; readonly titleColor: "#f3f4f6"; readonly bodyColor: "#d1d5db"; readonly borderColor: "#6b7280"; }; readonly tickColor: "#9CA3AF"; readonly gridColor: "#374151"; readonly lineColor: "#60A5FA"; readonly lineBackground: "rgba(96, 165, 250, 0.1)"; }; readonly interactive: { readonly default: "#4f46e5"; readonly defaultSubtle: "#6366f1"; readonly hover: "#4338ca"; readonly hoverSubtle: "#818cf8"; readonly pressed: "#3730a3"; readonly active: "#818cf8"; readonly disabled: "#4a5568"; readonly disabledText: "#64748b"; readonly selected: { readonly background: "#312e814D"; readonly border: "#4f46e5"; readonly text: "#fafbfc"; readonly icon: "#4f46e5"; }; readonly focus: { readonly ring: "#6366f1"; readonly background: "#312e811A"; }; }; readonly badge: { readonly success: { readonly background: "#14532d80"; readonly text: "#86efac"; }; readonly warning: { readonly background: "#92400e80"; readonly text: "#fcd34d"; }; readonly error: { readonly background: "#7f1d1d80"; readonly text: "#fca5a5"; }; readonly info: { readonly background: "#2a3441"; readonly text: "#e4e7ea"; }; readonly neutral: { readonly background: "#1a2332"; readonly text: "#8b95a1"; }; }; readonly assetType: { readonly etf: "#818cf8"; readonly fund: "#d97706"; readonly crypto: "#16a34a"; readonly stablecoin: "#0284c7"; readonly stock: "#8b95a1"; }; readonly status: { readonly success: { readonly icon: "#4ade80"; readonly text: "#16a34a"; readonly border: "#15803d"; }; readonly error: { readonly icon: "#f87171"; readonly text: "#f87171"; readonly border: "#b91c1c"; }; readonly warning: { readonly icon: "#fbbf24"; readonly text: "#fbbf24"; readonly border: "#d97706"; readonly background: "#92400e"; }; readonly info: { readonly icon: "#7dd3fc"; readonly text: "#38bdf8"; readonly border: "#0284c7"; }; }; readonly form: { readonly placeholder: "#8b95a1"; readonly error: "#f87171"; readonly errorBackground: "#7f1d1d80"; readonly border: "#334155"; readonly borderFocus: "#6366f1"; readonly borderError: "#b91c1c"; }; readonly decorative: { readonly icon: "#7dd3fc"; readonly iconSubtle: "#38bdf8"; }; readonly chain: { readonly ethereum: "#627eea"; readonly bitcoin: "#f7931a"; }; readonly button: { readonly sizes: { readonly small: { readonly height: 40; readonly paddingHorizontal: 16; readonly fontSize: 14; readonly iconSize: 16; readonly gap: 6; }; readonly medium: { readonly height: 48; readonly paddingHorizontal: 24; readonly fontSize: 16; readonly iconSize: 20; readonly gap: 8; }; readonly large: { readonly height: 56; readonly paddingHorizontal: 32; readonly fontSize: 18; readonly iconSize: 24; readonly gap: 10; }; }; readonly variants: { readonly primary: { readonly background: "#818cf8"; readonly backgroundHover: "#4338ca"; readonly backgroundPressed: "#3730a3"; readonly backgroundDisabled: "#4a5568"; readonly text: "#ffffff"; readonly textDisabled: "#64748b"; readonly borderColor: "transparent"; }; readonly secondary: { readonly background: "#4a5568"; readonly backgroundHover: "#243247"; readonly backgroundPressed: "#4a5568"; readonly backgroundDisabled: "#4a5568"; readonly text: "#fafbfc"; readonly textDisabled: "#64748b"; readonly borderColor: "#334155"; }; readonly ghost: { readonly background: "transparent"; readonly backgroundHover: "#2a3441"; readonly backgroundPressed: "#1a2332"; readonly backgroundDisabled: "transparent"; readonly text: "#4f46e5"; readonly textDisabled: "#64748b"; readonly borderColor: "transparent"; }; readonly danger: { readonly background: "#dc2626"; readonly backgroundHover: "#b91c1c"; readonly backgroundPressed: "#7f1d1d"; readonly backgroundDisabled: "#4a5568"; readonly text: "#ffffff"; readonly textDisabled: "#64748b"; readonly borderColor: "transparent"; }; }; readonly borderWidth: 1; readonly borderRadius: 12; readonly fontWeight: "600"; readonly shadow: { readonly shadowColor: "#000"; readonly shadowOffset: { readonly width: 0; readonly height: 1; }; readonly shadowOpacity: 0.05; readonly shadowRadius: 2; readonly elevation: 1; }; }; readonly surface: { readonly primary: "#0c1426"; readonly secondary: "#1a2332"; readonly tertiary: "#2a3441"; readonly quaternary: "#4a5568"; readonly elevated: "#243247"; readonly transparent: "transparent"; readonly alpha: { readonly 100: "rgba(12, 20, 38, 0.1)"; readonly 200: "rgba(12, 20, 38, 0.2)"; readonly 300: "rgba(12, 20, 38, 0.3)"; readonly 500: "rgba(12, 20, 38, 0.5)"; readonly 700: "rgba(12, 20, 38, 0.7)"; readonly 900: "rgba(12, 20, 38, 0.9)"; }; }; readonly content: { readonly primary: "#fafbfc"; readonly secondary: "#e4e7ea"; readonly body: "#cbd2d8"; readonly muted: "#8b95a1"; readonly subtle: "#64748b"; }; readonly primary: { readonly 100: "#e0e7ff"; readonly 200: "#c7d2fe"; readonly 300: "#a5b4fc"; readonly 400: "#818cf8"; readonly 500: "#6366f1"; readonly 600: "#4f46e5"; readonly 700: "#4338ca"; readonly 800: "#3730a3"; readonly 900: "#312e81"; readonly alpha: { readonly 100: "#312e811A"; readonly 200: "#312e8133"; readonly 300: "#312e814D"; readonly 500: "#312e8180"; }; }; readonly success: { readonly 300: "#86efac"; readonly 400: "#4ade80"; readonly 500: "#22c55e"; readonly 600: "#16a34a"; readonly 700: "#15803d"; readonly 800: "#166534"; readonly 900: "#14532d"; readonly subtle: "#f0fdf4"; }; readonly error: { readonly 300: "#fca5a5"; readonly 400: "#f87171"; readonly 500: "#ef4444"; readonly 600: "#dc2626"; readonly 700: "#b91c1c"; readonly 800: "#991b1b"; readonly 900: "#7f1d1d"; readonly subtle: "#fef2f2"; readonly backgroundSubtle: "rgba(220, 38, 38, 0.1)"; }; readonly warning: { readonly 300: "#fcd34d"; readonly 400: "#fbbf24"; readonly 500: "#eab308"; readonly 600: "#d97706"; readonly 700: "#b45309"; readonly 900: "#92400e"; }; readonly info: { readonly 300: "#7dd3fc"; readonly 400: "#38bdf8"; readonly 600: "#0284c7"; readonly 700: "#0369a1"; readonly 900: "#0c4a6e"; }; readonly border: { readonly default: "#334155"; readonly subtle: "#1e293b"; readonly strong: "#475569"; readonly hover: "#475569"; readonly focus: { readonly primary: "#6366f1"; readonly subtle: "#6b7280"; }; }; readonly accent: { readonly primary: "#ec4899"; readonly warm: "#f97316"; }; readonly utility: { readonly white: "#ffffff"; readonly black: "#000000"; readonly transparent: "transparent"; }; readonly chart: readonly ["#3B82F6", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6", "#EC4899"]; readonly chartText: readonly ["#93C5FD", "#6EE7B7", "#FDE68A", "#FCA5A5", "#C4B5FD", "#FBCFE8"]; }; readonly spacing: { readonly xs: 4; readonly sm: 8; readonly md: 16; readonly lg: 24; readonly xl: 32; readonly xxl: 48; readonly xxxl: 64; readonly xxxxl: 80; }; readonly borderRadius: { readonly none: 0; readonly sm: 4; readonly md: 8; readonly lg: 12; readonly xl: 16; readonly xxl: 24; readonly full: 9999; }; readonly fontSize: { readonly xs: 12; readonly sm: 14; readonly base: 16; readonly lg: 18; readonly xl: 20; readonly xxl: 24; readonly xxxl: 30; readonly xxxxl: 36; readonly xxxxxl: 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 layout: { readonly transparentHeaderPadding: 110; readonly screenBottomPadding: 40; readonly bottomTabBarHeight: 100; readonly screenHeaderHeight: 160; }; 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)"; }; }; readonly icon: { readonly sizes: { readonly xs: 12; readonly sm: 16; readonly md: 20; readonly lg: 24; readonly xl: 32; readonly xxl: 48; readonly hero: 40; readonly display: 64; }; readonly weights: { readonly thin: "thin"; readonly light: "light"; readonly regular: "regular"; readonly bold: "bold"; readonly fill: "fill"; }; readonly defaultWeight: "regular"; readonly colors: { readonly default: "#8b95a1"; readonly primary: "#fafbfc"; readonly secondary: "#e4e7ea"; readonly muted: "#64748b"; readonly success: "#4ade80"; readonly error: "#f87171"; readonly warning: "#fbbf24"; readonly info: "#7dd3fc"; readonly decorative: "#7dd3fc"; readonly interactive: "#818cf8"; readonly interactiveDefault: "#4f46e5"; readonly interactiveHover: "#4338ca"; readonly accent: "#ec4899"; readonly warm: "#f97316"; }; }; }; 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; export type Icon = typeof DESIGN_TOKENS.icon; //# sourceMappingURL=design-tokens.d.ts.map