Styling NativeWind y Tokens

Configuración clave

• babel.config.js con nativewind/babel.
• metro.config.js con withNativeWind.
• tailwind.config.js con preset de nativewind.

Principios de estilo

• Paridad visual obligatoria con web.
• Ajuste permitido solo para densidad, safe area y ergonomía táctil.
• Mantener semántica de color y jerarquía tipográfica de Boost.

Canon operativo dashboard shell

• Header/top strip: #000000.
• Fondo app: #171717.
• Bottom nav: fondo #000000, pill redondeada, sombra inferior equivalente a #FFFFFF14.
• Bottom nav icon set en orden: cartera, catálogo, agenda, interacciones (mismos assets canónicos de web).

Tipografía

• Poppins como fuente base.
• Escala equivalente a web, adaptada al viewport móvil.
• No usar tamaños menores a 12sp para texto funcional.

Escala operativa recomendada

• text-19: títulos de módulo.
• text-16: títulos de bloque/card.
• text-14: labels y valores de formulario.
• text-12: metadatos, estados secundarios y texto helper.

Layout y spacing

• Contenedor primario por pantalla: px-7 pt-6.
• Search principal: h-16 rounded-[18px].
• Cards de contenido denso: rounded-[16px] o rounded-[18px].
• Inputs base en formularios: h-12 rounded-[14px..18px].

Implementación obligatoria

• En pantallas con shell mobile usar UI_IDENTITY desde:
  • /Users/macuser/Desktop/crm-monorepo/apps/native/components/ui-identity.ts
• Baselines reutilizables:
  • pageContainer para padding base.
  • searchBar y searchPlaceholder para búsqueda principal.
  • moduleTitle, sectionTitle, label, value, metadata para jerarquía tipográfica.
• Si una pantalla requiere excepción de tamaño, debe justificarse en PR y actualizar este documento.

Reglas de consistencia

• Si una pantalla reutiliza shell mobile (MobileTopBar, MobileBottomNav, MobileDrawer), mantener exactamente la misma densidad de top spacing y search.
• Reducir outliers tipográficos heredados de web desktop al portar tablas/detalles a mobile.
• No mezclar más de dos alturas de control en un mismo formulario sin requisito de UX explícito.

Iconografía

• Consumir iconos desde @repo/icons/native.
• Evitar íconos inline duplicados si ya existe el canónico compartido.
• Dashboard nativo usa wrappers generados desde packages/icons/assets/dashboard para paridad 1:1.