Skip to main content

Sistema de Diseño

Tema Chakra UI​

Configuración Base​

// src/theme/theme.ts
export const theme = extendTheme({
  colors: {
    brand: {
      50: '#E6F3FF',
      100: '#BAE0FF',
      500: '#0070F3',
      900: '#003D7A'
    },
    navy: {
      50: '#F7FAFC',
      100: '#EDF2F7',
      800: '#1A202C',
      900: '#171923'
    }
  },
  fonts: {
    heading: 'DM Sans, sans-serif',
    body: 'DM Sans, sans-serif'
  },
  components: {
    Button: {
      baseStyle: {
        fontWeight: 'bold',
        borderRadius: 'lg'
      },
      variants: {
        brand: {
          bg: 'brand.500',
          color: 'white',
          _hover: { bg: 'brand.600' }
        }
      }
    }
  }
});

Responsive Design​

// Breakpoints Chakra UI
const breakpoints = {
  sm: '30em',    // 480px
  md: '48em',    // 768px
  lg: '62em',    // 992px
  xl: '80em',    // 1280px
  '2xl': '96em'  // 1536px
};

// Ejemplo de uso
<Box
  display={{ base: 'none', md: 'block' }}
  w={{ base: '100%', lg: '300px' }}
  p={{ base: 4, md: 6 }}
>
  Content
</Box>

Paleta de Colores​

Colores Principales​

  • Brand Blue: #0070F3
  • Navy Dark: #1A202C
  • Gray Light: #F7FAFC
  • Success: #48BB78
  • Warning: #ED8936
  • Error: #F56565

Esquema de Grises​

gray: {
  50: '#F7FAFC',
  100: '#EDF2F7',
  200: '#E2E8F0',
  300: '#CBD5E0',
  400: '#A0AEC0',
  500: '#718096',
  600: '#4A5568',
  700: '#2D3748',
  800: '#1A202C',
  900: '#171923'
}

Tipografía​

Fuentes​

  • Primary: DM Sans
  • Secondary: Inter
  • Monospace: Fira Code

Escala Tipográfica​

fontSizes: {
  xs: '0.75rem',
  sm: '0.875rem',
  md: '1rem',
  lg: '1.125rem',
  xl: '1.25rem',
  '2xl': '1.5rem',
  '3xl': '1.875rem',
  '4xl': '2.25rem',
  '5xl': '3rem'
}

Espaciado​

Sistema de Espaciado​

space: {
  px: '1px',
  0.5: '0.125rem',
  1: '0.25rem',
  1.5: '0.375rem',
  2: '0.5rem',
  2.5: '0.625rem',
  3: '0.75rem',
  3.5: '0.875rem',
  4: '1rem',
  5: '1.25rem',
  6: '1.5rem',
  7: '1.75rem',
  8: '2rem',
  9: '2.25rem',
  10: '2.5rem',
  12: '3rem',
  14: '3.5rem',
  16: '4rem',
  20: '5rem',
  24: '6rem',
  28: '7rem',
  32: '8rem'
}

Componentes Base​

Botones​

<Button colorScheme="brand" size="md" variant="solid">
  Botón Primario
</Button>

<Button colorScheme="gray" size="md" variant="outline">
  Botón Secundario
</Button>

<Button colorScheme="red" size="sm" variant="ghost">
  Botón de Texto
</Button>

Cards​

<Card>
  <CardHeader>
    <Heading size="md">Título de la Card</Heading>
  </CardHeader>
  <CardBody>
    <Text>Contenido de la card</Text>
  </CardBody>
  <CardFooter>
    <Button>Acción</Button>
  </CardFooter>
</Card>

Formularios​

<FormControl isRequired>
  <FormLabel>Email</FormLabel>
  <Input type="email" />
  <FormHelperText>Texto de ayuda opcional</FormHelperText>
  <FormErrorMessage>Error message</FormErrorMessage>
</FormControl>

Iconografía​

Librería de Iconos​

  • React Icons: react-icons/hi, react-icons/md
  • Chakra UI Icons: ChevronDownIcon, AddIcon, etc.

Tamaños Estándar​

iconSizes: {
  sm: '12px',
  md: '16px',
  lg: '20px',
  xl: '24px',
  '2xl': '32px'
}

Animaciones​

Transiciones​

transition: {
  property: 'all',
  duration: '0.2s',
  easing: 'ease-in-out'
}

Animaciones con Framer Motion​

import { motion } from 'framer-motion';

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3 }}
>
  Contenido animado
</motion.div>

Patrones de Diseño​

Layout Containers​

  • Container: Ancho máximo centrado
  • VStack/HStack: Layouts verticales/horizontales
  • Grid: Layouts de grilla
  • Flex: Layouts flexibles
  • Sidebar: Navegación lateral
  • Breadcrumb: Navegación de migas
  • Tabs: Navegación por pestañas
  • Stepper: Navegación paso a paso

Data Display​

  • Table: Tablas de datos
  • Card: Tarjetas de información
  • List: Listas de elementos
  • Badge: Etiquetas y estados