@bsginstitute/bsg-integra 0.0.1

package/src/lib/tokens/typography.css

@@ -0,0 +1,200 @@
+@theme {
+  /* ============================================
+     Font Families
+     ============================================ */
+  --font-family-sans: "Inter", sans-serif;
+
+  --font-family-serif:
+    ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+
+  --font-family-mono: "Fira Code", monospace;
+
+  /* Alias para compatibilidad */
+  --font-family-base: var(--font-family-sans);
+  --font-family-heading: var(--font-family-sans);
+  --font-family-code: var(--font-family-mono);
+
+  /* ============================================
+     Font Sizes
+     ============================================ */
+  --font-size-xs: 0.75rem; /* 12px */
+  --font-size-sm: 0.875rem; /* 14px */
+  --font-size-base: 1rem; /* 16px */
+  --font-size-lg: 1.125rem; /* 18px */
+  --font-size-xl: 1.25rem; /* 20px */
+  --font-size-2xl: 1.5rem; /* 24px */
+  --font-size-3xl: 1.875rem; /* 30px */
+  --font-size-4xl: 2.25rem; /* 36px */
+  --font-size-5xl: 3rem; /* 48px */
+  --font-size-6xl: 3.75rem; /* 60px */
+  --font-size-7xl: 4.5rem; /* 72px */
+  --font-size-8xl: 6rem; /* 96px */
+  --font-size-9xl: 8rem; /* 128px */
+
+  /* ============================================
+     Font Weights
+     ============================================ */
+  --font-weight-thin: 100;
+  --font-weight-extralight: 200;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-weight-black: 900;
+
+  /* Alias semánticos */
+  --font-weight-base: var(--font-weight-normal);
+  --font-weight-heading: var(--font-weight-bold);
+
+  /* ============================================
+     Line Heights
+     ============================================ */
+  --line-height-none: 1;
+  --line-height-tight: 1.25;
+  --line-height-snug: 1.375;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.625;
+  --line-height-loose: 2;
+
+  /* Alias semánticos */
+  --line-height-base: var(--line-height-normal);
+  --line-height-heading: var(--line-height-tight);
+
+  /* ============================================
+     Letter Spacing (Tracking)
+     ============================================ */
+  --letter-spacing-tighter: -0.05em;
+  --letter-spacing-tight: -0.025em;
+  --letter-spacing-normal: 0em;
+  --letter-spacing-wide: 0.025em;
+  --letter-spacing-wider: 0.05em;
+  --letter-spacing-widest: 0.1em;
+
+  /* Alias semánticos */
+  --letter-spacing-base: var(--letter-spacing-normal);
+  --letter-spacing-heading: var(--letter-spacing-tight);
+
+  /* ============================================
+     Tokens Semánticos - Headings
+     Uso: Títulos y encabezados principales
+     ============================================ */
+
+  /* Display - Títulos extra grandes (Hero sections) */
+  --typography-display-size: var(--font-size-7xl);
+  --typography-display-weight: var(--font-weight-extrabold);
+  --typography-display-line-height: var(--line-height-none);
+  --typography-display-letter-spacing: var(--letter-spacing-tighter);
+
+  /* Heading 1 */
+  --typography-h1-size: var(--font-size-5x l);
+  --typography-h1-weight: var(--font-weight-bold);
+  --typography-h1-line-height: var(--line-height-tight);
+  --typography-h1-letter-spacing: var(--letter-spacing-tight);
+
+  /* Heading 2 */
+  --typography-h2-size: var(--font-size-4xl);
+  --typography-h2-weight: var(--font-weight-bold);
+  --typography-h2-line-height: var(--line-height-tight);
+  --typography-h2-letter-spacing: var(--letter-spacing-tight);
+
+  /* Heading 3 */
+  --typography-h3-size: var(--font-size-3xl);
+  --typography-h3-weight: var(--font-weight-semibold);
+  --typography-h3-line-height: var(--line-height-snug);
+  --typography-h3-letter-spacing: var(--letter-spacing-normal);
+
+  /* Heading 4 */
+  --typography-h4-size: var(--font-size-2xl);
+  --typography-h4-weight: var(--font-weight-semibold);
+  --typography-h4-line-height: var(--line-height-snug);
+  --typography-h4-letter-spacing: var(--letter-spacing-normal);
+
+  /* Heading 5 */
+  --typography-h5-size: var(--font-size-xl);
+  --typography-h5-weight: var(--font-weight-semibold);
+  --typography-h5-line-height: var(--line-height-normal);
+  --typography-h5-letter-spacing: var(--letter-spacing-normal);
+
+  /* Heading 6 */
+  --typography-h6-size: var(--font-size-lg);
+  --typography-h6-weight: var(--font-weight-semibold);
+  --typography-h6-line-height: var(--line-height-normal);
+  --typography-h6-letter-spacing: var(--letter-spacing-normal);
+
+  /* ============================================
+     Tokens Semánticos - Body Text
+     Uso: Contenido principal y párrafos
+     ============================================ */
+
+  /* Large Body */
+  --typography-body-lg-size: var(--font-size-lg);
+  --typography-body-lg-weight: var(--font-weight-normal);
+  --typography-body-lg-line-height: var(--line-height-relaxed);
+  --typography-body-lg-letter-spacing: var(--letter-spacing-normal);
+
+  /* Base Body */
+  --typography-body-size: var(--font-size-base);
+  --typography-body-weight: var(--font-weight-normal);
+  --typography-body-line-height: var(--line-height-normal);
+  --typography-body-letter-spacing: var(--letter-spacing-normal);
+
+  /* Small Body */
+  --typography-body-sm-size: var(--font-size-sm);
+  --typography-body-sm-weight: var(--font-weight-normal);
+  --typography-body-sm-line-height: var(--line-height-normal);
+  --typography-body-sm-letter-spacing: var(--letter-spacing-normal);
+
+  /* ============================================
+     Tokens Semánticos - Utility Text
+     Uso: Labels, captions, overlines
+     ============================================ */
+
+  /* Label - Para etiquetas de formularios */
+  --typography-label-size: var(--font-size-sm);
+  --typography-label-weight: var(--font-weight-medium);
+  --typography-label-line-height: var(--line-height-normal);
+  --typography-label-letter-spacing: var(--letter-spacing-normal);
+
+  /* Caption - Texto pequeño descriptivo */
+  --typography-caption-size: var(--font-size-xs);
+  --typography-caption-weight: var(--font-weight-normal);
+  --typography-caption-line-height: var(--line-height-normal);
+  --typography-caption-letter-spacing: var(--letter-spacing-normal);
+
+  /* Overline - Texto categórico superior */
+  --typography-overline-size: var(--font-size-xs);
+  --typography-overline-weight: var(--font-weight-semibold);
+  --typography-overline-line-height: var(--line-height-normal);
+  --typography-overline-letter-spacing: var(--letter-spacing-widest);
+
+  /* ============================================
+     Tokens Semánticos - Interactive Elements
+     Uso: Botones, links, tabs
+     ============================================ */
+
+  /* Button Large */
+  --typography-button-lg-size: var(--font-size-lg);
+  --typography-button-lg-weight: var(--font-weight-semibold);
+  --typography-button-lg-line-height: var(--line-height-tight);
+  --typography-button-lg-letter-spacing: var(--letter-spacing-normal);
+
+  /* Button Base */
+  --typography-button-size: var(--font-size-base);
+  --typography-button-weight: var(--font-weight-semibold);
+  --typography-button-line-height: var(--line-height-tight);
+  --typography-button-letter-spacing: var(--letter-spacing-normal);
+
+  /* Button Small */
+  --typography-button-sm-size: var(--font-size-sm);
+  --typography-button-sm-weight: var(--font-weight-semibold);
+  --typography-button-sm-line-height: var(--line-height-tight);
+  --typography-button-sm-letter-spacing: var(--letter-spacing-normal);
+
+  /* Link */
+  --typography-link-size: inherit;
+  --typography-link-weight: var(--font-weight-medium);
+  --typography-link-line-height: inherit;
+  --typography-link-letter-spacing: inherit;
+}

package/src/lib/tokens/z-index.css

@@ -0,0 +1,316 @@
+@theme {
+  /* ============================================
+     Z-Index Scale - Sistema de Capas
+
+     Filosofía:
+     - Usar valores espaciados (100, 200, 300) para permitir capas intermedias
+     - Nombres semánticos en lugar de números mágicos
+     - Jerarquía clara y predecible
+     - Evitar valores arbitrariamente altos (9999, 999999)
+
+     Regla general:
+     Cuanto más cerca del usuario, mayor el z-index
+     ============================================ */
+
+  /* ============================================
+     Base Scale - Valores Primitivos
+     ============================================ */
+
+  /* Valores negativos - Elementos de fondo */
+  --z-index-negative: -1;
+  --z-index-behind: -10;
+
+  /* Base layer - Contenido normal (default) */
+  --z-index-base: 0;
+  --z-index-default: 0;
+
+  /* Low elevation - Elementos ligeramente elevados */
+  --z-index-low: 10;
+
+  /* Medium elevation - Elementos moderadamente elevados */
+  --z-index-medium: 100;
+
+  /* High elevation - Elementos muy elevados */
+  --z-index-high: 1000;
+
+  /* Critical elevation - Elementos críticos */
+  --z-index-critical: 10000;
+
+  /* ============================================
+     Content Layers - Capas de Contenido
+     0-99: Elementos de contenido estándar
+     ============================================ */
+
+  /* Background decorations */
+  --z-index-decoration: var(--z-index-negative);
+  --z-index-background-pattern: -5;
+
+  /* Content base */
+  --z-index-content: var(--z-index-base);
+
+  /* Sticky elements */
+  --z-index-sticky: 10;
+  --z-index-sticky-content: 20;
+
+  /* Fixed background elements */
+  --z-index-fixed-background: 30;
+
+  /* ============================================
+     Navigation Layers
+     100-199: Elementos de navegación
+     ============================================ */
+
+  /* Header/Navbar */
+  --z-index-header: 100;
+  --z-index-navbar: 100;
+
+  /* Sidebar */
+  --z-index-sidebar: 110;
+
+  /* Tab bar */
+  --z-index-tabbar: 120;
+
+  /* Bottom navigation */
+  --z-index-bottom-nav: 130;
+
+  /* Floating action button */
+  --z-index-fab: 140;
+
+  /* App bar */
+  --z-index-appbar: 150;
+
+  /* ============================================
+     Overlay Layers
+     200-299: Elementos que cubren contenido
+     ============================================ */
+
+  /* Backdrop/Overlay base */
+  --z-index-backdrop: 200;
+  --z-index-overlay: 200;
+
+  /* Drawer overlay */
+  --z-index-drawer-overlay: 210;
+
+  /* Scrim (overlay semi-transparente) */
+  --z-index-scrim: 220;
+
+  /* ============================================
+     Dropdown/Popover Layers
+     300-499: Elementos flotantes contextuales
+     ============================================ */
+
+  /* Dropdown menu */
+  --z-index-dropdown: 300;
+
+  /* Select dropdown */
+  --z-index-select: 310;
+
+  /* Combobox */
+  --z-index-combobox: 320;
+
+  /* Autocomplete */
+  --z-index-autocomplete: 330;
+
+  /* Context menu */
+  --z-index-context-menu: 340;
+
+  /* Popover */
+  --z-index-popover: 350;
+
+  /* Datepicker */
+  --z-index-datepicker: 360;
+
+  /* Color picker */
+  --z-index-colorpicker: 370;
+
+  /* Menu cascading (submenus) */
+  --z-index-submenu: 380;
+
+  /* ============================================
+     Tooltip Layers
+     500-599: Tooltips y hints
+     ============================================ */
+
+  /* Tooltip base */
+  --z-index-tooltip: 500;
+
+  /* Tooltip con backdrop */
+  --z-index-tooltip-backdrop: 510;
+
+  /* Hint/Tour overlay */
+  --z-index-hint: 520;
+
+  /* ============================================
+     Dialog/Modal Layers
+     1000-1999: Modales y diálogos
+     ============================================ */
+
+  /* Modal backdrop */
+  --z-index-modal-backdrop: 1000;
+
+  /* Modal base */
+  --z-index-modal: 1010;
+  --z-index-dialog: 1010;
+
+  /* Sheet (bottom/side sheet) */
+  --z-index-sheet: 1020;
+
+  /* Alert dialog */
+  --z-index-alert-dialog: 1030;
+
+  /* Confirmation dialog */
+  --z-index-confirm-dialog: 1040;
+
+  /* Full screen modal */
+  --z-index-fullscreen-modal: 1050;
+
+  /* ============================================
+     Toast/Notification Layers
+     2000-2999: Notificaciones y mensajes
+     ============================================ */
+
+  /* Toast base */
+  --z-index-toast: 2000;
+  --z-index-snackbar: 2000;
+
+  /* Notification */
+  --z-index-notification: 2010;
+
+  /* Alert banner */
+  --z-index-alert: 2020;
+
+  /* System banner */
+  --z-index-banner: 2030;
+
+  /* ============================================
+     Loading/Progress Layers
+     3000-3999: Indicadores de carga
+     ============================================ */
+
+  /* Loading overlay */
+  --z-index-loading: 3000;
+
+  /* Progress bar (fixed) */
+  --z-index-progress: 3010;
+
+  /* Skeleton loader overlay */
+  --z-index-skeleton-overlay: 3020;
+
+  /* Splash screen */
+  --z-index-splash: 3030;
+
+  /* ============================================
+     Utility Layers
+     4000-4999: Utilidades y overlays especiales
+     ============================================ */
+
+  /* Image lightbox backdrop */
+  --z-index-lightbox-backdrop: 4000;
+
+  /* Image lightbox */
+  --z-index-lightbox: 4010;
+
+  /* Video player overlay controls */
+  --z-index-video-controls: 4020;
+
+  /* Picture-in-picture */
+  --z-index-pip: 4030;
+
+  /* Screenshot overlay */
+  --z-index-screenshot: 4040;
+
+  /* ============================================
+     Debug/Dev Layers
+     5000-5999: Herramientas de desarrollo
+     ============================================ */
+
+  /* Dev tools overlay */
+  --z-index-devtools: 5000;
+
+  /* Debug panel */
+  --z-index-debug: 5010;
+
+  /* Inspector */
+  --z-index-inspector: 5020;
+
+  /* Performance overlay */
+  --z-index-performance: 5030;
+
+  /* ============================================
+     Critical/System Layers
+     10000+: Elementos críticos del sistema
+     ============================================ */
+
+  /* Cookie consent banner */
+  --z-index-cookie-consent: 10000;
+
+  /* GDPR notice */
+  --z-index-gdpr-notice: 10010;
+
+  /* Emergency alert */
+  --z-index-emergency: 10020;
+
+  /* System maintenance banner */
+  --z-index-system-banner: 10030;
+
+  /* Browser compatibility warning */
+  --z-index-browser-warning: 10040;
+
+  /* Tutorial overlay (first-time user) */
+  --z-index-tutorial: 10050;
+
+  /* Onboarding overlay */
+  --z-index-onboarding: 10060;
+
+  /* ============================================
+     Maximum Layer - Uso extremadamente raro
+     ============================================ */
+  --z-index-maximum: 99999;
+}
+
+/* ============================================
+   Stacking Context Documentation
+
+   IMPORTANTE: Crear un nuevo stacking context puede afectar el z-index.
+
+   Propiedades que crean stacking context:
+   - position: relative/absolute/fixed/sticky con z-index != auto
+   - opacity < 1
+   - transform != none
+   - filter != none
+   - perspective != none
+   - clip-path != none
+   - isolation: isolate
+   - will-change con ciertas propiedades
+
+   Buenas prácticas:
+   1. Usar tokens semánticos en lugar de valores numéricos directos
+   2. Agrupar componentes relacionados en el mismo rango
+   3. Dejar espacio entre rangos para futuras inserciones
+   4. Documentar cualquier uso de z-index fuera de este sistema
+   5. Evitar z-index: 9999 u otros valores arbitrariamente altos
+
+   Debugging:
+   Para visualizar capas, usa:
+   * { outline: 1px solid rgba(255, 0, 0, 0.1); }
+
+   O en DevTools:
+   Chrome: Layers panel
+   Firefox: 3D View
+   ============================================ */
+
+/* ============================================
+   Helper Classes (Opcional)
+   Descomentar si deseas clases utility
+   ============================================ */
+
+/*
+.z-base { z-index: var(--z-index-base); }
+.z-sticky { z-index: var(--z-index-sticky); }
+.z-header { z-index: var(--z-index-header); }
+.z-dropdown { z-index: var(--z-index-dropdown); }
+.z-tooltip { z-index: var(--z-index-tooltip); }
+.z-modal { z-index: var(--z-index-modal); }
+.z-toast { z-index: var(--z-index-toast); }
+.z-loading { z-index: var(--z-index-loading); }
+*/

package/src/styles.css

@@ -0,0 +1,69 @@
+/* ============================================
+   Tailwind CSS
+   ============================================ */
+@import "tailwindcss";
+
+/* Escanear archivos TypeScript para clases de Tailwind */
+@source "./lib/**/*.ts";
+@source "./stories/**/*.ts";
+
+/* Configurar dark mode para .dark */
+@variant dark (.dark &);
+
+/* ============================================
+   Importar Fuentes desde Google Fonts
+   ============================================ */
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&family=Fira+Code:wght@300;400;500;600;700&display=swap");
+
+/* ============================================
+   Tokens de Diseño
+   ============================================ */
+
+/* Tokens de Color (OKLCH) */
+@import "./lib/tokens/colors.css";
+
+/* Tokens de Temas (Claro/Oscuro) */
+@import "./lib/tokens/themes.css";
+
+/* Tokens de Espaciado */
+@import "./lib/tokens/spacing.css";
+
+/* Tokens de Tipografía */
+@import "./lib/tokens/typography.css";
+
+/* Tokens de Animaciones */
+@import "./lib/tokens/animations.css";
+
+/* Tokens de Bordes */
+@import "./lib/tokens/borders.css";
+
+/* Tokens de Sombras */
+@import "./lib/tokens/shadows.css";
+
+/* Tokens de Breakpoints y Media Queries */
+@import "./lib/tokens/breakpoints.css";
+
+/* Tokens de Z-Index */
+@import "./lib/tokens/z-index.css";
+
+/* ============================================
+   Estilos Base
+   ============================================ */
+
+/* Aplicar fuente por defecto al body */
+body {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-normal);
+  color: var(--color-foreground-default);
+  background-color: var(--color-background-default);
+}
+
+/* Estilos para código */
+code,
+pre,
+kbd,
+samp {
+  font-family: var(--font-family-mono);
+}