@bsginstitute/bsg-integra 0.0.1

package/src/lib/tokens/breakpoints.css

@@ -0,0 +1,541 @@
+@theme {
+  /* ============================================
+     Breakpoints - Sistema Responsive
+
+     Filosofía: Mobile-First
+     - Diseñar para mobile primero
+     - Usar min-width para breakpoints ascendentes
+     - Valores basados en dispositivos comunes
+
+     Convención:
+     - Breakpoint = valor mínimo del rango
+     - Usar em en lugar de px para accesibilidad (zoom)
+     - 1em = 16px (default browser)
+     ============================================ */
+
+  /* ============================================
+     Breakpoint Values - Valores Base
+     Basados en research de dispositivos comunes
+     ============================================ */
+
+  /* Extra Small - Mobile portrait (320px+) */
+  --breakpoint-xs: 20rem; /* 320px */
+
+  /* Small - Mobile landscape (640px+) */
+  --breakpoint-sm: 40rem; /* 640px */
+
+  /* Medium - Tablet portrait (768px+) */
+  --breakpoint-md: 48rem; /* 768px */
+
+  /* Large - Tablet landscape / Small desktop (1024px+) */
+  --breakpoint-lg: 64rem; /* 1024px */
+
+  /* Extra Large - Desktop (1280px+) */
+  --breakpoint-xl: 80rem; /* 1280px */
+
+  /* 2X Large - Large desktop (1536px+) */
+  --breakpoint-2xl: 96rem; /* 1536px */
+
+  /* 3X Large - Extra large desktop (1920px+) */
+  --breakpoint-3xl: 120rem; /* 1920px */
+
+  /* 4X Large - Ultra wide (2560px+) */
+  --breakpoint-4xl: 160rem; /* 2560px */
+
+  /* ============================================
+     Semantic Breakpoint Aliases
+     Nombres descriptivos basados en dispositivos
+     ============================================ */
+
+  --breakpoint-mobile: var(--breakpoint-xs);
+  --breakpoint-mobile-landscape: var(--breakpoint-sm);
+  --breakpoint-tablet: var(--breakpoint-md);
+  --breakpoint-tablet-landscape: var(--breakpoint-lg);
+  --breakpoint-desktop: var(--breakpoint-xl);
+  --breakpoint-desktop-large: var(--breakpoint-2xl);
+  --breakpoint-desktop-xl: var(--breakpoint-3xl);
+  --breakpoint-ultrawide: var(--breakpoint-4xl);
+
+  /* ============================================
+     Container Max-Widths
+     Anchos máximos para contenedores en cada breakpoint
+     ============================================ */
+
+  --container-max-width-xs: 100%;
+  --container-max-width-sm: 40rem; /* 640px */
+  --container-max-width-md: 48rem; /* 768px */
+  --container-max-width-lg: 64rem; /* 1024px */
+  --container-max-width-xl: 80rem; /* 1280px */
+  --container-max-width-2xl: 96rem; /* 1536px */
+  --container-max-width-3xl: 120rem; /* 1920px */
+
+  /* ============================================
+     Grid Columns por Breakpoint
+     Sistema de columnas responsive
+     ============================================ */
+
+  --grid-columns-xs: 4;
+  --grid-columns-sm: 6;
+  --grid-columns-md: 8;
+  --grid-columns-lg: 12;
+  --grid-columns-xl: 12;
+  --grid-columns-2xl: 12;
+
+  /* ============================================
+     Spacing por Breakpoint
+     Gutters y padding responsivos
+     ============================================ */
+
+  --container-padding-xs: var(--spacing-4, 1rem); /* 16px */
+  --container-padding-sm: var(--spacing-6, 1.5rem); /* 24px */
+  --container-padding-md: var(--spacing-8, 2rem); /* 32px */
+  --container-padding-lg: var(--spacing-12, 3rem); /* 48px */
+  --container-padding-xl: var(--spacing-16, 4rem); /* 64px */
+}
+
+/* ============================================
+   Media Query Mixins (Custom Properties)
+
+   Nota: CSS no soporta media queries en variables directamente,
+   pero podemos documentar los valores aquí y usar @custom-media
+   cuando tenga soporte completo.
+
+   Por ahora, usa estos valores en tus media queries:
+   ============================================ */
+
+/* ============================================
+   Mobile-First Media Queries (Min-Width)
+   Uso: Estilos que se aplican desde el breakpoint hacia arriba
+   ============================================ */
+
+/* Extra Small and up (320px+) - Mobile portrait */
+@media (min-width: 20rem) {
+  :root {
+    --current-breakpoint: "xs";
+  }
+}
+
+/* Small and up (640px+) - Mobile landscape */
+@media (min-width: 40rem) {
+  :root {
+    --current-breakpoint: "sm";
+  }
+}
+
+/* Medium and up (768px+) - Tablet portrait */
+@media (min-width: 48rem) {
+  :root {
+    --current-breakpoint: "md";
+  }
+}
+
+/* Large and up (1024px+) - Tablet landscape */
+@media (min-width: 64rem) {
+  :root {
+    --current-breakpoint: "lg";
+  }
+}
+
+/* Extra Large and up (1280px+) - Desktop */
+@media (min-width: 80rem) {
+  :root {
+    --current-breakpoint: "xl";
+  }
+}
+
+/* 2X Large and up (1536px+) - Large desktop */
+@media (min-width: 96rem) {
+  :root {
+    --current-breakpoint: "2xl";
+  }
+}
+
+/* 3X Large and up (1920px+) - Extra large desktop */
+@media (min-width: 120rem) {
+  :root {
+    --current-breakpoint: "3xl";
+  }
+}
+
+/* 4X Large and up (2560px+) - Ultra wide */
+@media (min-width: 160rem) {
+  :root {
+    --current-breakpoint: "4xl";
+  }
+}
+
+/* ============================================
+   Desktop-First Media Queries (Max-Width)
+   Uso: Estilos que se aplican hasta el breakpoint
+   ============================================ */
+
+/* Small and down - Mobile only (< 640px) */
+@media (max-width: 39.9375rem) {
+  /* 639px - justo antes de sm */
+  :root {
+    --viewport-category: "mobile";
+  }
+}
+
+/* Medium and down - Mobile + Tablet portrait (< 768px) */
+@media (max-width: 47.9375rem) {
+  /* 767px - justo antes de md */
+  :root {
+    --viewport-category: "small-screen";
+  }
+}
+
+/* Large and down - No desktop (< 1024px) */
+@media (max-width: 63.9375rem) {
+  /* 1023px - justo antes de lg */
+  :root {
+    --viewport-category: "tablet-or-smaller";
+  }
+}
+
+/* XL and down - No large desktop (< 1280px) */
+@media (max-width: 79.9375rem) {
+  /* 1279px - justo antes de xl */
+  :root {
+    --viewport-category: "laptop-or-smaller";
+  }
+}
+
+/* ============================================
+   Range Media Queries (Between)
+   Uso: Estilos que se aplican solo en un rango específico
+   ============================================ */
+
+/* Only Small (640px - 767px) - Mobile landscape only */
+@media (min-width: 40rem) and (max-width: 47.9375rem) {
+  :root {
+    --viewport-range: "sm-only";
+  }
+}
+
+/* Only Medium (768px - 1023px) - Tablet portrait only */
+@media (min-width: 48rem) and (max-width: 63.9375rem) {
+  :root {
+    --viewport-range: "md-only";
+  }
+}
+
+/* Only Large (1024px - 1279px) - Tablet landscape only */
+@media (min-width: 64rem) and (max-width: 79.9375rem) {
+  :root {
+    --viewport-range: "lg-only";
+  }
+}
+
+/* Only XL (1280px - 1535px) - Desktop only */
+@media (min-width: 80rem) and (max-width: 95.9375rem) {
+  :root {
+    --viewport-range: "xl-only";
+  }
+}
+
+/* ============================================
+   Orientation Media Queries
+   ============================================ */
+
+@media (orientation: portrait) {
+  :root {
+    --orientation: "portrait";
+  }
+}
+
+@media (orientation: landscape) {
+  :root {
+    --orientation: "landscape";
+  }
+}
+
+/* ============================================
+   Pixel Density Media Queries
+   Para imágenes retina y high-DPI
+   ============================================ */
+
+/* Standard resolution (1x) */
+@media (min-resolution: 1dppx) {
+  :root {
+    --pixel-density: "1x";
+  }
+}
+
+/* Retina / High-DPI (2x) */
+@media (min-resolution: 2dppx) {
+  :root {
+    --pixel-density: "2x";
+  }
+}
+
+/* Ultra High-DPI (3x) */
+@media (min-resolution: 3dppx) {
+  :root {
+    --pixel-density: "3x";
+  }
+}
+
+/* ============================================
+   Hover Capability
+   Detecta si el dispositivo soporta hover
+   ============================================ */
+
+/* Touch devices (no hover) */
+@media (hover: none) {
+  :root {
+    --has-hover: "false";
+    /* Aumentar tamaños de click targets */
+    --min-tap-size: 44px; /* iOS guideline */
+  }
+}
+
+/* Devices with hover capability */
+@media (hover: hover) {
+  :root {
+    --has-hover: "true";
+    --min-tap-size: 32px;
+  }
+}
+
+/* ============================================
+   Pointer Precision
+   Detecta precisión del pointer (touch vs mouse)
+   ============================================ */
+
+/* Coarse pointer (touch) */
+@media (pointer: coarse) {
+  :root {
+    --pointer-type: "coarse";
+    --pointer-precision: "low";
+  }
+}
+
+/* Fine pointer (mouse, stylus) */
+@media (pointer: fine) {
+  :root {
+    --pointer-type: "fine";
+    --pointer-precision: "high";
+  }
+}
+
+/* ============================================
+   Color Scheme Preference
+   ============================================ */
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --preferred-color-scheme: "light";
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --preferred-color-scheme: "dark";
+  }
+}
+
+/* ============================================
+   Contrast Preference
+   ============================================ */
+
+@media (prefers-contrast: more) {
+  :root {
+    --preferred-contrast: "more";
+    /* Aumentar contraste de colores */
+    --min-contrast-ratio: 7; /* WCAG AAA */
+  }
+}
+
+@media (prefers-contrast: less) {
+  :root {
+    --preferred-contrast: "less";
+  }
+}
+
+/* ============================================
+   Transparency Preference
+   ============================================ */
+
+@media (prefers-reduced-transparency: reduce) {
+  :root {
+    --reduced-transparency: "true";
+    /* Eliminar opacity en elementos críticos */
+  }
+}
+
+/* ============================================
+   Data Saver Mode
+   ============================================ */
+
+@media (prefers-reduced-data: reduce) {
+  :root {
+    --reduced-data: "true";
+    /* Cargar imágenes de menor calidad */
+    /* Deshabilitar autoplay de videos */
+  }
+}
+
+/* ============================================
+   Container Queries
+   Permite componentes responsive independientes del viewport
+
+   Uso:
+   .container {
+     container-type: inline-size;
+     container-name: card;
+   }
+
+   @container card (min-width: 400px) {
+     .card-content { flex-direction: row; }
+   }
+   ============================================ */
+
+/* Container query breakpoints (en px por simplicidad) */
+@media (min-width: 1px) {
+  :root {
+    /* Valores sugeridos para container queries */
+    --container-xs: 20rem; /* 320px */
+    --container-sm: 24rem; /* 384px */
+    --container-md: 28rem; /* 448px */
+    --container-lg: 32rem; /* 512px */
+    --container-xl: 36rem; /* 576px */
+    --container-2xl: 42rem; /* 672px */
+  }
+}
+
+/* ============================================
+   Print Media Query
+   Estilos específicos para impresión
+   ============================================ */
+
+@media print {
+  :root {
+    --media-type: "print";
+
+    /* Ajustes para impresión */
+    --print-font-size: 12pt;
+    --print-line-height: 1.5;
+  }
+
+  /* Ocultar elementos innecesarios en impresión */
+  .no-print,
+  .navigation,
+  .sidebar,
+  .footer,
+  button,
+  .interactive {
+    display: none !important;
+  }
+
+  /* Asegurar fondos blancos */
+  * {
+    background: white !important;
+    color: black !important;
+  }
+
+  /* Evitar saltos de página dentro de elementos */
+  .keep-together {
+    page-break-inside: avoid;
+  }
+
+  /* Links: mostrar URL */
+  a[href]:after {
+    content: " (" attr(href) ")";
+  }
+}
+
+/* ============================================
+   Screen Reader Only
+   No es un media query, pero útil para accesibilidad
+   ============================================ */
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* ============================================
+   DOCUMENTACIÓN DE USO
+
+   Mobile-First Approach (Recomendado):
+   -----------------------------------
+   .element {
+     // Estilos para mobile (base)
+     font-size: 14px;
+   }
+
+   @media (min-width: 48rem) { // md
+     .element {
+       font-size: 16px; // tablet y arriba
+     }
+   }
+
+   @media (min-width: 80rem) { // xl
+     .element {
+       font-size: 18px; // desktop y arriba
+     }
+   }
+
+   Desktop-First Approach (Legacy):
+   -------------------------------
+   .element {
+     font-size: 18px; // desktop por defecto
+   }
+
+   @media (max-width: 79.9375rem) { // < xl
+     .element {
+       font-size: 16px; // tablet
+     }
+   }
+
+   @media (max-width: 47.9375rem) { // < md
+     .element {
+       font-size: 14px; // mobile
+     }
+   }
+
+   Range Queries:
+   -------------
+   @media (min-width: 48rem) and (max-width: 63.9375rem) {
+     .element {
+       // Solo en tablets (md-only)
+     }
+   }
+
+   Container Queries (Moderno):
+   ---------------------------
+   .card-container {
+     container-type: inline-size;
+     container-name: card;
+   }
+
+   @container card (min-width: 400px) {
+     .card-layout {
+       display: grid;
+       grid-template-columns: 1fr 2fr;
+     }
+   }
+
+   Feature Detection:
+   -----------------
+   @media (hover: hover) {
+     .button:hover {
+       // Solo en dispositivos con hover
+     }
+   }
+
+   @media (pointer: coarse) {
+     .button {
+       // Targets más grandes para touch
+       min-height: 44px;
+     }
+   }
+   ============================================ */