163 lines
3.9 KiB
Markdown
163 lines
3.9 KiB
Markdown
# 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
|
|
```tsx
|
|
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
|
|
```tsx
|
|
className="px-2.5 py-2.5 rounded-lg hover:bg-white/10 active:bg-white/5 transition-all duration-200"
|
|
```
|
|
|
|
### Cards
|
|
```tsx
|
|
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
|
|
```tsx
|
|
hover:bg-white/10
|
|
hover:shadow-xl
|
|
hover:scale-105
|
|
active:scale-95
|
|
```
|
|
|
|
## Focus States
|
|
```tsx
|
|
focus:outline-none
|
|
focus:ring-2
|
|
focus:ring-white/20
|
|
focus:ring-offset-2
|
|
focus:ring-offset-gray-900
|
|
```
|
|
|
|
## Estados Disabled
|
|
```tsx
|
|
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
|
|
```tsx
|
|
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
|
|
|