neoris/AvanzaCast
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
AvanzaCast/docs/TAILWIND_STYLES_GUIDE.md

3.9 KiB
Raw Blame History

Guía de Estilos Tailwind CSS - Studio Panel

Actualización: 2025-11-10

Se ha aplicado Tailwind CSS de forma consistente en todo el studio-panel, siguiendo el patrón establecido en broadcast-panel.

Principios de Diseño

Colores Base

  • Fondo principal: bg-[#1f1f1f] (gris oscuro)
  • Fondo secundario: bg-gray-900
  • Gradientes: bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900
  • Bordes sutiles: border-white/[0.04] a border-white/[0.12]
  • Superficies elevadas: bg-white/[0.02] a bg-white/[0.06]

Texto

  • Primario: text-white
  • Secundario: text-white/80
  • Terciario: text-white/60
  • Muted: text-gray-400

Espaciado Consistente

  • Padding pequeño: px-3 py-2 o p-3
  • Padding medio: px-4 py-2.5 o p-4
  • Padding grande: px-6 py-3 o p-6
  • Gaps: gap-2, gap-3, gap-4

Bordes y Radios

  • Border radius estándar: rounded-lg (0.5rem)
  • Border radius pequeño: rounded-md (0.375rem)
  • Border radius extra: rounded-xl (0.75rem)
  • Border radius completo: rounded-full

Sombras

  • Sombra ligera: shadow-sm
  • Sombra media: shadow-md
  • Sombra grande: shadow-lg
  • Sombra extra: shadow-xl y shadow-2xl
  • Sombras de color: shadow-blue-500/20, shadow-red-500/20

Componentes Actualizados

Header

className="bg-[#1f1f1f] shadow-md border-b border-white/[0.04]"

Button

  • Default: Fondo semitransparente con hover
  • Primary: Gradiente azul con sombra
  • Ghost: Transparente con hover sutil
  • Danger: Gradiente rojo con sombra

IconButton

className="px-2.5 py-2.5 rounded-lg hover:bg-white/10 active:bg-white/5 transition-all duration-200"

Cards

className="bg-white/[0.02] border border-white/[0.06] rounded-lg p-6 hover:bg-white/[0.04] hover:border-white/[0.12] transition-all duration-200"

Transiciones Estándar

Duración

  • Rápida: duration-150
  • Normal: duration-200
  • Lenta: duration-300

Propiedades

  • Colores: transition-colors
  • Todo: transition-all
  • Opacidad: transition-opacity

Hover States

hover:bg-white/10
hover:shadow-xl
hover:scale-105
active:scale-95

Focus States

focus:outline-none 
focus:ring-2 
focus:ring-white/20 
focus:ring-offset-2 
focus:ring-offset-gray-900

Estados Disabled

disabled:opacity-50 
disabled:cursor-not-allowed 
disabled:pointer-events-none

Mejores Prácticas

  1. Usar clases utilitarias en lugar de CSS personalizado
  2. Mantener consistencia con espaciado (múltiplos de 4px)
  3. Aplicar transiciones a elementos interactivos
  4. Usar opacidad para variaciones de color (white/10, white/60)
  5. Gradientes sutiles para profundidad visual
  6. Sombras contextuales con colores de acento

Paleta de Colores Acento

Blue (Primary)

  • from-blue-600 to-blue-500
  • hover:from-blue-500 hover:to-blue-400
  • shadow-blue-500/20

Red (Danger/Record)

  • from-red-600 to-red-500
  • hover:from-red-500 hover:to-red-400
  • shadow-red-500/20

Green (Success)

  • bg-green-400
  • shadow-green-400/50

Yellow (Warning)

  • bg-yellow-400
  • shadow-yellow-400/50

Responsive Design

Breakpoints

  • sm: - 640px
  • md: - 768px
  • lg: - 1024px
  • xl: - 1280px

Grid Patterns

grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4

Archivos Modificados

  • src/components/Header.tsx
  • src/components/header/Brand.tsx
  • src/components/header/LiveBadge.tsx
  • src/components/header/RecordButton.tsx
  • src/components/ui/Button.tsx
  • src/components/ui/IconButton.tsx
  • src/components/figma/FigmaHeader.tsx
  • src/components/figma/PersonCard.tsx
  • src/components/figma/MediaGrid.tsx
  • src/App.tsx

Validación

✅ TypeCheck: OK ✅ Lint: OK ✅ Consistencia visual con broadcast-panel ✅ Transiciones suaves aplicadas ✅ Estados hover/focus/active implementados