Sistema de Diseño y Hojas de Estilos (CSS)

Este directorio centraliza las directivas y variables del lenguaje de diseño visual de BaP Framework, permitiendo modularidad y adaptabilidad de temas de color nativamente.

Archivos de Estilos (Directorio ./src/style/)

1. Colores y Temas (./src/style/colors.css)

Define las variables CSS (Custom Properties) para el control del viewport y la interfaz gráfica. Los colores se dividen mediante clases aplicadas en la etiqueta body:

• Modo Claro (.light-mode): Fondo claro con tipografía Midnight Blue y sombras suaves.
• Modo Oscuro (.dark-mode): Fondo Midnight Blue oscuro con tipografía de alto contraste en cian eléctrico.

Variables clave expuestas para desarrollo:

:root {
  --accent-color: #62aec4; /* Turquesa/Cian Eléctrico */
  --accent-color-hover: #4e9ab0;
  --platinum-color: #eaece9; /* Gris Platino */
}

.light-mode {
  --bg-color: #ffffff;
  --font-color: #111825;
}

.dark-mode {
  --bg-color: #111825;
  --font-color: #eaece9;
}

2. Tipografía y Estilos Base (./src/style/main.css)

Carga los recursos tipográficos desde Google Fonts e inicializa márgenes globales y transiciones:

• Space Grotesk: Fuente sans-serif de estilo tecnológico utilizada para títulos principales (h1-h6), menús y marcas.
• Plus Jakarta Sans: Fuente legible y optimizada para lectura de párrafos de texto y elementos de formulario.

3. Formularios y Botones (./src/style/forms.css)

Estandariza los controles interactivos de inputs, checkboxes y botones. Ofrece clases comunes:

• .as-btn: Estilo base para elementos que deben lucir como botones.
• .primary / .btn-secondary: Variaciones de énfasis y color de fondo.

4. Encabezados (./src/style/titles.css)

Establece la escala y el peso tipográfico de los títulos para mantener la jerarquía de lectura.

5. Cuadros de Alerta (Callout)

Mensajes destacados para guiar al usuario. Soporta el estilo por defecto (.bap-callout) y variaciones de sistema (.docs-callout):

<!-- Caja de contenido destacado general (bap-callout) -->
<div class="bap-callout">
  <strong>💡 Nota Importante:</strong>
  Cuadro de llamada general de color cian para sugerencias.
</div>

<!-- Caja de advertencia para documentación (docs-callout warning) -->
<div class="docs-callout warning">
  <strong>⚠️ Advertencia Crítica:</strong>
  Indica problemas, APIs deprecadas o errores.
</div>

6. Tablas Estilizadas

Tablas de datos y especificaciones limpias con cabeceras contrastadas y líneas divisorias:

<table>
  <thead>
    <tr>
      <th>Parámetro</th>
      <th>Tipo</th>
      <th>Descripción</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>name</code></td>
      <td><code>String</code></td>
      <td>Nombre único del recurso estático.</td>
    </tr>
  </tbody>
</table>

7. Ruta de Navegación (Breadcrumbs)

Componente de ubicación que genera barras diagonales de separación dinámicamente usando selectores CSS nativos:

<nav class="breadcrumbs">
  <a href="/">Inicio</a>
  <a href="/pages/style/">Documentación</a>
  <a href="#" class="active">Diseño</a>
</nav>

Tres Reglas de Arquitectura CSS

Para asegurar un desarrollo escalable, unificado y un código HTML limpio, todo desarrollo en BaP debe apegarse estrictamente a estas tres directivas:

Referencias Cruzadas e Integración

• Carga en el Componente de Cabecera: El componente <bap-header> expuesto en /pages/components/ escucha los clics del selector de temas y alterna la clase en el body para propagar los colores del viewport definidos en colors.css.
• Compilación Gulp: La tarea de optimización en ./gulpfile.js unifica, autodefíne prefijos de navegadores y minifica estas hojas de estilo. En producción, omite la generación de Source Maps.