@smart-coder-labs/apple-design-system 1.0.0

package/dist/tokens.js

@@ -0,0 +1,265 @@
+/**
+ * 🍏 Apple Design System Tokens
+ * Inspirado en macOS, iOS y VisionOS
+ *
+ * Filosofía: Minimalismo, elegancia, espacio negativo amplio
+ */
+export const tokens = {
+    // 🎨 PALETA DE COLORES
+    colors: {
+        // Neutrales (Light Mode)
+        light: {
+            background: {
+                primary: '#FFFFFF',
+                secondary: '#F5F5F7',
+                tertiary: '#E8E8ED',
+                elevated: '#FFFFFF',
+            },
+            surface: {
+                primary: '#FFFFFF',
+                secondary: '#F5F5F7',
+                glass: 'rgba(255, 255, 255, 0.72)',
+                glassDark: 'rgba(255, 255, 255, 0.85)',
+            },
+            text: {
+                primary: '#1D1D1F',
+                secondary: '#6E6E73',
+                tertiary: '#86868B',
+                quaternary: '#A1A1A6',
+                inverse: '#FFFFFF',
+            },
+            border: {
+                primary: 'rgba(0, 0, 0, 0.08)',
+                secondary: 'rgba(0, 0, 0, 0.04)',
+                focus: 'rgba(0, 125, 250, 0.4)',
+            },
+            accent: {
+                blue: '#007AFF',
+                blueHover: '#0051D5',
+                blueActive: '#004FC4',
+                blueTint: 'rgba(0, 122, 255, 0.1)',
+            },
+            status: {
+                success: '#34C759',
+                warning: '#FF9500',
+                error: '#FF3B30',
+                info: '#5AC8FA',
+            },
+        },
+        // Neutrales (Dark Mode)
+        dark: {
+            background: {
+                primary: '#000000',
+                secondary: '#1C1C1E',
+                tertiary: '#2C2C2E',
+                elevated: '#1C1C1E',
+            },
+            surface: {
+                primary: '#1C1C1E',
+                secondary: '#2C2C2E',
+                glass: 'rgba(28, 28, 30, 0.72)',
+                glassDark: 'rgba(28, 28, 30, 0.85)',
+            },
+            text: {
+                primary: '#FFFFFF',
+                secondary: '#98989D',
+                tertiary: '#6E6E73',
+                quaternary: '#48484A',
+                inverse: '#000000',
+            },
+            border: {
+                primary: 'rgba(255, 255, 255, 0.12)',
+                secondary: 'rgba(255, 255, 255, 0.06)',
+                focus: 'rgba(10, 132, 255, 0.6)',
+            },
+            accent: {
+                blue: '#0A84FF',
+                blueHover: '#409CFF',
+                blueActive: '#5EB0FF',
+                blueTint: 'rgba(10, 132, 255, 0.15)',
+            },
+            status: {
+                success: '#32D74B',
+                warning: '#FF9F0A',
+                error: '#FF453A',
+                info: '#64D2FF',
+            },
+        },
+    },
+    // 📐 TIPOGRAFÍA
+    typography: {
+        fontFamily: {
+            base: '-apple-system, BlinkMacSystemFont, "Inter", "SF Pro Display", "Segoe UI", Roboto, sans-serif',
+            mono: '"SF Mono", "Monaco", "Cascadia Code", "Courier New", monospace',
+        },
+        fontSize: {
+            xs: '0.6875rem', // 11px
+            sm: '0.8125rem', // 13px
+            base: '0.9375rem', // 15px
+            lg: '1.0625rem', // 17px
+            xl: '1.25rem', // 20px
+            '2xl': '1.5rem', // 24px
+            '3xl': '1.875rem', // 30px
+            '4xl': '2.25rem', // 36px
+            '5xl': '3rem', // 48px
+            '6xl': '3.75rem', // 60px
+        },
+        fontWeight: {
+            regular: '400',
+            medium: '500',
+            semibold: '600',
+            bold: '700',
+        },
+        lineHeight: {
+            tight: '1.2',
+            normal: '1.5',
+            relaxed: '1.75',
+        },
+        letterSpacing: {
+            tight: '-0.02em',
+            normal: '0',
+            wide: '0.01em',
+        },
+    },
+    // 🔲 BORDER RADIUS
+    radius: {
+        none: '0',
+        xs: '4px',
+        sm: '8px',
+        md: '12px',
+        lg: '16px',
+        xl: '20px',
+        '2xl': '24px',
+        full: '9999px',
+    },
+    // 🌫️ SHADOWS
+    shadows: {
+        none: 'none',
+        xs: '0 1px 2px rgba(0, 0, 0, 0.04)',
+        sm: '0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04)',
+        md: '0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04)',
+        lg: '0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06)',
+        xl: '0 16px 48px rgba(0, 0, 0, 0.16), 0 8px 24px rgba(0, 0, 0, 0.08)',
+        // Dark mode shadows
+        dark: {
+            xs: '0 1px 2px rgba(0, 0, 0, 0.24)',
+            sm: '0 2px 8px rgba(0, 0, 0, 0.32), 0 1px 4px rgba(0, 0, 0, 0.24)',
+            md: '0 4px 16px rgba(0, 0, 0, 0.40), 0 2px 8px rgba(0, 0, 0, 0.32)',
+            lg: '0 8px 32px rgba(0, 0, 0, 0.48), 0 4px 16px rgba(0, 0, 0, 0.40)',
+            xl: '0 16px 48px rgba(0, 0, 0, 0.56), 0 8px 24px rgba(0, 0, 0, 0.48)',
+        },
+    },
+    // 💨 BLUR
+    blur: {
+        none: '0',
+        sm: '4px',
+        md: '8px',
+        lg: '16px',
+        xl: '24px',
+        '2xl': '40px',
+    },
+    // 🎭 OPACITY
+    opacity: {
+        disabled: '0.4',
+        hover: '0.8',
+        glass: '0.72',
+        glassDark: '0.85',
+    },
+    // 📏 SPACING
+    spacing: {
+        0: '0',
+        1: '0.25rem', // 4px
+        2: '0.5rem', // 8px
+        3: '0.75rem', // 12px
+        4: '1rem', // 16px
+        5: '1.25rem', // 20px
+        6: '1.5rem', // 24px
+        8: '2rem', // 32px
+        10: '2.5rem', // 40px
+        12: '3rem', // 48px
+        16: '4rem', // 64px
+        20: '5rem', // 80px
+        24: '6rem', // 96px
+        32: '8rem', // 128px
+    },
+    // ⚡ ANIMACIONES
+    motion: {
+        // Duraciones
+        duration: {
+            instant: '100ms',
+            fast: '160ms',
+            normal: '220ms',
+            slow: '260ms',
+            slower: '320ms',
+        },
+        // Easing curves (Apple-like)
+        easing: {
+            // Cubic bezier elegante tipo Apple
+            standard: 'cubic-bezier(0.16, 1, 0.3, 1)',
+            entrance: 'cubic-bezier(0, 0, 0.3, 1)',
+            exit: 'cubic-bezier(0.7, 0, 1, 1)',
+            // Springs suaves
+            spring: {
+                gentle: {
+                    type: 'spring',
+                    stiffness: 300,
+                    damping: 30,
+                    mass: 0.8,
+                },
+                bouncy: {
+                    type: 'spring',
+                    stiffness: 400,
+                    damping: 25,
+                    mass: 0.6,
+                },
+                snappy: {
+                    type: 'spring',
+                    stiffness: 500,
+                    damping: 35,
+                    mass: 0.5,
+                },
+            },
+        },
+        // Variantes de animación comunes
+        variants: {
+            fadeIn: {
+                initial: { opacity: 0 },
+                animate: { opacity: 1 },
+                exit: { opacity: 0 },
+            },
+            scaleIn: {
+                initial: { opacity: 0, scale: 0.96 },
+                animate: { opacity: 1, scale: 1 },
+                exit: { opacity: 0, scale: 0.96 },
+            },
+            slideUp: {
+                initial: { opacity: 0, y: 8 },
+                animate: { opacity: 1, y: 0 },
+                exit: { opacity: 0, y: 8 },
+            },
+            slideDown: {
+                initial: { opacity: 0, y: -8 },
+                animate: { opacity: 1, y: 0 },
+                exit: { opacity: 0, y: -8 },
+            },
+        },
+    },
+    // 📱 BREAKPOINTS
+    breakpoints: {
+        sm: '640px',
+        md: '768px',
+        lg: '1024px',
+        xl: '1280px',
+        '2xl': '1536px',
+    },
+    // 🎯 Z-INDEX
+    zIndex: {
+        base: '0',
+        dropdown: '1000',
+        sticky: '1100',
+        modal: '1200',
+        popover: '1300',
+        tooltip: '1400',
+    },
+};
+//# sourceMappingURL=tokens.js.map

package/dist/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../tokens.ts"],"names":[],"mappings":"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"}