@grupor5/raya 0.1.0

package/src/styles/globals.css

@@ -0,0 +1,404 @@
+/**
+ * RAYA DESIGN SYSTEM - GLOBALS.CSS
+ * -------------------------------------------------------------------
+ * Este archivo es el corazón del sistema de diseño. Define las bases
+ * sobre las cuales se construyen todos los componentes y layouts.
+ *
+ * Principios Clave:
+ * 1. Globalidad: Solo contiene estilos y variables que aplican a todo el sistema.
+ * 2. Tokens: Centraliza los design tokens como variables CSS para consistencia.
+ * 3. Reset: Utiliza Tailwind's Preflight (@tailwind base) para normalizar estilos.
+ * 4. Documentación: Está estructurado y comentado para ser auto-explicativo.
+ */
+
+/* 1. FUENTES EXTERNAS */
+/* ------------------------------------------------------------------- */
+/* Importa la familia tipográfica principal del sistema (Rubik). */
+@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
+
+
+/* 2. RESET Y NORMALIZACIÓN (TAILWIND PREFLIGHT) */
+/* ------------------------------------------------------------------- */
+/* @tailwind base: Inyecta Preflight, un conjunto de estilos base que
+ * resetea y normaliza las inconsistencias entre navegadores. Elimina
+ * márgenes por defecto y establece una base limpia.
+ */
+@tailwind base;
+
+/* @tailwind components: Inyecta las clases de componentes de Tailwind. */
+@tailwind components;
+
+/* @tailwind utilities: Inyecta las clases de utilidad de Tailwind. */
+@tailwind utilities;
+
+
+/* 3. CAPA BASE - ESTILOS Y VARIABLES GLOBALES */
+/* ------------------------------------------------------------------- */
+@layer base {
+  
+  /* 3.1. VARIABLES CSS (CUSTOM PROPERTIES) */
+  /* ----------------------------------------------------------------- */
+  /* :root define los tokens de diseño como variables CSS, permitiendo
+   * consistencia, fácil mantenimiento y theming (ej. modo oscuro).
+   */
+  :root {
+    
+    /* A. PALETA DE COLORES */
+    /* ------------------------------------------------------------- */
+    /* Colores base para el tema claro (light mode). */
+    --background: 0 0% 100%;
+    --foreground: 258 12% 28%; /* primary-900 */
+    --card: 0 0% 100%;
+    --card-foreground: 258 12% 28%; /* primary-900 */
+    --popover: 0 0% 100%;
+    --popover-foreground: 258 12% 28%; /* primary-900 */
+    
+    /* Colores Primarios */
+    --primary: 270 12% 14%; /* primary.1200 */
+    --primary-foreground: 0 0% 100%;
+    --primary-pressed: 258 12% 28%; /* primary.900 */
+    
+    /* Colores Secundarios */
+    --secondary: 286 46% 55%; /* secondary.600 */
+    --secondary-foreground: 0 0% 100%;
+    
+    /* Colores Neutros y de Apoyo */
+    --muted: 0 0% 98%; /* neutral-100 */
+    --muted-foreground: 0 9% 72%; /* neutral-500 */
+    --accent: 250 11% 36%; /* primary-800 */
+    --accent-foreground: 0 0% 96%;
+    
+    /* Colores de Estado (Semánticos) */
+    --destructive: 0 79% 51%; /* red-600 */
+    --destructive-foreground: 0 0% 96%;
+    
+    /* Colores para Bordes e Inputs */
+    --border: 0 9% 90%; /* neutral-200 */
+    --input: 0 9% 90%; /* neutral-200 */
+    --ring: 270 12% 14%; /* primary-1200 - Usado para estados de foco (focus) */
+
+    /* B. SISTEMA DE TIPOGRAFÍA */
+    /* ------------------------------------------------------------- */
+    --font-primary: 'Rubik', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell;
+    
+    /* Pesos de Fuente (Font Weights) */
+    --font-weight-light: 300;
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    
+    /* Escala Tipográfica (Font Size) */
+    --text-display-l: 2.5rem;      /* 40px */
+    --text-heading-xl: 2.25rem;    /* 36px */
+    --text-heading-lg: 2rem;       /* 32px */
+    --text-heading-md: 1.75rem;    /* 28px */
+    --text-heading-sm: 1.5rem;     /* 24px */
+    --text-subheading-lg: 1.25rem; /* 20px */
+    --text-subheading-md: 1.125rem;/* 18px */
+    --text-subheading-sm: 1rem;    /* 16px */
+    --text-body-bold-lg: 1.125rem; /* 18px */
+    --text-body-bold-md: 1rem;     /* 16px */
+    --text-body-bold-sm: 0.875rem; /* 14px */
+    --text-body-bold-xs: 0.75rem;  /* 12px */
+    --text-body-lg: 1.125rem;      /* 18px */
+    --text-body-md: 1rem;          /* 16px */
+    --text-body-sm: 0.875rem;      /* 14px */
+    --text-body-xs: 0.75rem;       /* 12px */
+    --text-caption-c1: 0.75rem;    /* 12px */
+    
+    /* Alturas de Línea (Line Height) */
+    --leading-display-l: 3.25rem;  /* 52px */
+    --leading-heading-xl: 2.75rem; /* 44px */
+    --leading-heading-lg: 2.5rem;  /* 40px */
+    --leading-heading-md: 2.25rem; /* 36px */
+    --leading-heading-sm: 2rem;    /* 32px */
+    --leading-subheading-lg: 1.75rem; /* 28px */
+    --leading-subheading-md: 1.5rem;  /* 24px */
+    --leading-subheading-sm: 1.25rem; /* 20px */
+    --leading-body-lg: 1.75rem;    /* 28px */
+    --leading-body-md: 1.5rem;     /* 24px */
+    --leading-body-sm: 1.25rem;    /* 20px */
+    --leading-body-xs: 1.25rem;    /* 20px */
+    --leading-caption-c1: 1.125rem;/* 18px */
+    
+    /* Espaciado entre Letras (Letter Spacing) */
+    --tracking-normal: 0px;
+    --tracking-caption: 4px;
+
+    /* C. SISTEMA DE ESPACIADO (SPACING) */
+    /* ------------------------------------------------------------- */
+    /* Basado en una unidad base de 4px para consistencia rítmica. */
+    --spacing-base: 0.25rem;   /* 4px */
+    --spacing-xs: 0.25rem;     /* 4px */
+    --spacing-s: 0.5rem;       /* 8px */
+    --spacing-m: 1rem;         /* 16px */
+    --spacing-l: 1.5rem;       /* 24px */
+    --spacing-xl: 2rem;        /* 32px */
+    --spacing-2xl: 2.5rem;     /* 40px */
+    --spacing-3xl: 3rem;       /* 48px */
+    --spacing-4xl: 3.5rem;     /* 56px */
+
+    /* D. SISTEMA DE EFECTOS (SOMBRAS) */
+    /* ------------------------------------------------------------- */
+    --effect-s: 0 1px 2px rgba(0, 0, 0, 0.05);
+    --effect-m: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --effect-l: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+
+    /* E. SISTEMA DE BORDES (STROKE & RADIUS) */
+    /* ------------------------------------------------------------- */
+    /* Anchos de Borde */
+    --stroke-1: 1px;
+    --stroke-2: 2px;
+    
+    /* Colores de Borde */
+    --stroke-color-default: hsl(var(--border));
+    --stroke-color-muted: hsl(var(--muted));
+    --stroke-color-primary: hsl(var(--primary));
+    --stroke-color-destructive: hsl(var(--destructive));
+    --stroke-color-focus: hsl(var(--ring));
+    --stroke-color-focus-border: #c07ad4; /* secondary-500 */
+    
+    /* Radios de Borde */
+    --radius: 0.75rem;
+
+    /* F. SISTEMA DE LAYOUT Y GRID */
+    /* ------------------------------------------------------------- */
+    /* Breakpoints para diseño responsivo. */
+    --breakpoint-mobile: 0px;
+    --breakpoint-tablet: 768px;
+    --breakpoint-desktop: 1024px;
+    
+    /* Columnas del Grid */
+    --grid-columns-mobile: 4;
+    --grid-columns-tablet: 8;
+    --grid-columns-desktop: 12;
+    
+    /* Márgenes del Grid */
+    --grid-margin-mobile: 16px;
+    --grid-margin-tablet: 20px;
+    --grid-margin-desktop: 24px;
+    
+    /* Gutters (espacio entre columnas) */
+    --grid-gutter-mobile: 16px;
+    --grid-gutter-tablet: 20px;
+    --grid-gutter-desktop: 24px;
+    
+    /* Anchos Máximos de Contenedor */
+    --container-sm: 640px;
+    --container-md: 768px;
+    --container-lg: 1024px;
+    --container-xl: 1280px;
+    --container-2xl: 1536px;
+  }
+
+  /* 3.2. DEFINICIÓN DEL TEMA OSCURO (DARK MODE) */
+  /* ----------------------------------------------------------------- */
+  /* Sobrescribe las variables CSS para el tema oscuro. */
+  .dark {
+    /* Paleta de Colores - Dark Mode */
+    --background: 260 10% 20%; /* primary-1000 */
+    --foreground: 0 0% 96%;
+    --card: 260 10% 20%; /* primary-1000 */
+    --card-foreground: 0 0% 96%;
+    --popover: 260 10% 20%; /* primary-1000 */
+    --popover-foreground: 0 0% 96%;
+    
+    --primary: 254 11% 46%; /* primary-700 */
+    --primary-foreground: 260 10% 20%; /* primary-1000 */
+    
+    --secondary: 287 46% 65%; /* secondary-500 */
+    --secondary-foreground: 260 10% 20%; /* primary-1000 */
+    
+    --muted: 250 11% 36%; /* primary-800 */
+    --muted-foreground: 0 9% 72%; /* neutral-400 */
+    --accent: 250 11% 36%; /* primary-800 */
+    --accent-foreground: 0 0% 96%;
+    
+    --destructive: 0 79% 51%; /* red-600 */
+    --destructive-foreground: 0 0% 96%;
+    
+    --border: 254 11% 46%; /* primary-700 */
+    --input: 254 11% 46%; /* primary-700 */
+    --ring: 254 11% 46%; /* primary-700 */
+
+    /* Efectos - Dark Mode */
+    --effect-s: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --effect-m: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+    --effect-l: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
+  }
+}
+
+
+/* 4. ESTILOS BASE Y TIPOGRAFÍA */
+/* ------------------------------------------------------------------- */
+@layer base {
+  /* 4.1. ESTILOS GLOBALES (RESET ADICIONAL) */
+  /* ----------------------------------------------------------------- */
+  /* Define box-sizing y aplica el color de borde por defecto. */
+  * {
+    @apply border-border;
+  }
+  
+  /* 4.2. ESTILOS PARA EL BODY */
+  /* ----------------------------------------------------------------- */
+  /* Establece la tipografía, color de fondo y de texto base. */
+  body {
+    @apply bg-background text-foreground;
+    font-family: var(--font-primary);
+    font-size: var(--text-body-md);
+    line-height: var(--leading-body-md);
+    font-weight: var(--font-weight-regular);
+  }
+  
+  /* 4.3. CLASES DE UTILIDAD PARA TIPOGRAFÍA */
+  /* ----------------------------------------------------------------- */
+  /* Aunque Tailwind genera utilidades (ej. .text-lg), definimos
+   * clases semánticas (ej. .text-heading-lg) que agrupan tamaño,
+   * peso y altura de línea para mantener la consistencia.
+   */
+  
+  /* Display Scale */
+  .text-display-l { 
+    font-size: var(--text-display-l); 
+    line-height: var(--leading-display-l); 
+    font-weight: var(--font-weight-bold); 
+    letter-spacing: var(--tracking-normal);
+  }
+  
+  /* Heading Scale */
+  .text-heading-xl { 
+    font-size: var(--text-heading-xl); 
+    line-height: var(--leading-heading-xl); 
+    font-weight: var(--font-weight-bold); 
+    letter-spacing: var(--tracking-normal);
+  }
+  .text-heading-lg { 
+    font-size: var(--text-heading-lg); 
+    line-height: var(--leading-heading-lg); 
+    font-weight: var(--font-weight-bold); 
+    letter-spacing: var(--tracking-normal);
+  }
+  .text-heading-md { 
+    font-size: var(--text-heading-md); 
+    line-height: var(--leading-heading-md); 
+    font-weight: var(--font-weight-bold); 
+    letter-spacing: var(--tracking-normal);
+  }
+  .text-heading-sm { 
+    font-size: var(--text-heading-sm); 
+    line-height: var(--leading-heading-sm); 
+    font-weight: var(--font-weight-bold); 
+    letter-spacing: var(--tracking-normal);
+  }
+  
+  /* Subheading Scale */
+  .text-subheading-lg { 
+    font-size: var(--text-subheading-lg); 
+    line-height: var(--leading-subheading-lg); 
+    font-weight: var(--font-weight-bold); 
+    letter-spacing: var(--tracking-normal);
+  }
+  .text-subheading-md { 
+    font-size: var(--text-subheading-md); 
+    line-height: var(--leading-subheading-md); 
+    font-weight: var(--font-weight-bold); 
+    letter-spacing: var(--tracking-normal);
+  }
+  .text-subheading-sm { 
+    font-size: var(--text-subheading-sm); 
+    line-height: var(--leading-subheading-sm); 
+    font-weight: var(--font-weight-bold); 
+    letter-spacing: var(--tracking-normal);
+  }
+  
+  /* Body Bold Scale */
+  .text-body-bold-lg { 
+    font-size: var(--text-body-bold-lg); 
+    line-height: var(--leading-body-lg); 
+    font-weight: var(--font-weight-semibold); 
+    letter-spacing: var(--tracking-normal);
+  }
+  .text-body-bold-md { 
+    font-size: var(--text-body-bold-md); 
+    line-height: var(--leading-body-md); 
+    font-weight: var(--font-weight-semibold); 
+    letter-spacing: var(--tracking-normal);
+  }
+  .text-body-bold-sm { 
+    font-size: var(--text-body-bold-sm); 
+    line-height: var(--leading-body-sm); 
+    font-weight: var(--font-weight-semibold); 
+    letter-spacing: var(--tracking-normal);
+  }
+  .text-body-bold-xs { 
+    font-size: var(--text-body-bold-xs); 
+    line-height: var(--leading-body-xs); 
+    font-weight: var(--font-weight-semibold); 
+    letter-spacing: var(--tracking-normal);
+  }
+  
+  /* Body Regular Scale */
+  .text-body-lg { 
+    font-size: var(--text-body-lg); 
+    line-height: var(--leading-body-lg); 
+    font-weight: var(--font-weight-regular); 
+    letter-spacing: var(--tracking-normal);
+  }
+  .text-body-md { 
+    font-size: var(--text-body-md); 
+    line-height: var(--leading-body-md); 
+    font-weight: var(--font-weight-regular); 
+    letter-spacing: var(--tracking-normal);
+  }
+  .text-body-sm { 
+    font-size: var(--text-body-sm); 
+    line-height: var(--leading-body-sm); 
+    font-weight: var(--font-weight-regular); 
+    letter-spacing: var(--tracking-normal);
+  }
+  .text-body-xs { 
+    font-size: var(--text-body-xs); 
+    line-height: var(--leading-body-xs); 
+    font-weight: var(--font-weight-regular); 
+    letter-spacing: var(--tracking-normal);
+  }
+  
+  /* Caption Scale */
+  .text-caption-c1 { 
+    font-size: var(--text-caption-c1); 
+    line-height: var(--leading-caption-c1); 
+    font-weight: var(--font-weight-regular); 
+    letter-spacing: var(--tracking-caption);
+  }
+  
+  /* Font weight utilities */
+  .font-light { font-weight: var(--font-weight-light); }
+  .font-regular { font-weight: var(--font-weight-regular); }
+  .font-medium { font-weight: var(--font-weight-medium); }
+  .font-semibold { font-weight: var(--font-weight-semibold); }
+  .font-bold { font-weight: var(--font-weight-bold); }
+  
+  /* Letter spacing utilities */
+  .tracking-normal { letter-spacing: var(--tracking-normal); }
+  .tracking-caption { letter-spacing: var(--tracking-caption); }
+}
+
+/* 5. OTROS GLOBALES Y CONSIDERACIONES */
+/* ------------------------------------------------------------------- */
+/*
+ * ESTADOS (FOCUS, HOVER, ETC.):
+ * Tailwind maneja los estados a través de variantes (ej. hover:bg-blue-500).
+ * Los estilos de foco visibles son cruciales para la accesibilidad y
+ * se gestionan con las utilidades `ring` y la variable `--ring`.
+ *
+ * ACCESIBILIDAD (A11Y):
+ * Se promueve el uso de clases como `sr-only` para contenido accesible
+ * solo a lectores de pantalla. El contraste de color es gestionado
+ * por los tokens de color.
+ *
+ * ANIMACIONES Y TRANSICIONES:
+ * Las animaciones globales se definen como keyframes en tailwind.config.js
+ * y se aplican con utilidades. Las transiciones base se aplican a los
+ * componentes para suavizar cambios de estado.
+ */ 

package/src/templates/AuthLayout.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+
+interface AuthLayoutProps {
+  children: ReactNode;
+}
+
+export function AuthLayout({ children }: AuthLayoutProps) {
+  return (
+    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <main>{children}</main>
+    </div>
+  );
+}

package/src/templates/index.ts

@@ -0,0 +1 @@
+export * from './AuthLayout';

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,27 @@
+import { ReactNode, createContext, useContext, useState } from 'react';
+
+type Theme = 'light' | 'dark';
+
+interface ThemeContextType {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setTheme] = useState<Theme>('light');
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme(): ThemeContextType {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}

package/src/theme/index.ts

@@ -0,0 +1,2 @@
+export * from './ThemeProvider';
+export * from './useTheme';

package/src/theme/useTheme.ts

@@ -0,0 +1 @@
+export { useTheme } from './ThemeProvider';

package/src/tokens/badge.ts

@@ -0,0 +1,39 @@
+import { colors } from './colors';
+
+export const badgeTokens = {
+  colors: {
+    inProgress: {
+      text: colors.secondary[600],
+      background: colors.secondary[200],
+    },
+    success: {
+      text: colors.green[600],
+      background: colors.green[100],
+    },
+    pending: {
+      text: colors.primary[700],
+      background: colors.primary[200],
+    },
+    danger: {
+      text: colors.neutral[10],
+      background: colors.red[400],
+    },
+    default: {
+      text: colors.secondary[1000],
+      background: colors.secondary[1100],
+      textOnSolid: colors.secondary[200],
+    },
+  },
+  sizes: {
+    sm: '12px',
+    md: '14px',
+    lg: '16px',
+  },
+  padding: {
+    vertical: '4px',
+    horizontal: '12px',
+  },
+  icon: {
+    size: '16px',
+  }
+};