pdm-ui-kit 0.1.50 → 0.3.0

package/src/lib/styles/tokens.css

@@ -0,0 +1,182 @@
+/**
+ * PDM UI Kit - CSS Design Tokens
+ * 
+ * Este archivo define los tokens de diseño centralizados que los componentes
+ * consumen via CSS custom properties (variables CSS).
+ * 
+ * USO:
+ * 1. Importar en el proyecto consumidor: @import 'pdm-ui-kit/styles';
+ * 2. O copiar las variables al CSS base del consumidor
+ * 
+ * TOKENS DEFINIDOS:
+ * - Colores: background, foreground, primary, secondary, muted, accent, destructive, etc.
+ * - Bordes: border, input, ring
+ * - Radio: radius
+ * - Charts: --chart-1 a --chart-4
+ */
+
+:root {
+  /* ============================================
+   * COLORES BASE
+   * ============================================ */
+  
+  /* Background - Color de fondo principal */
+  --background: 0 0% 100%;
+  
+  /* Foreground - Color de texto principal */
+  --foreground: 222.2 84% 4.9%;
+  
+  /* ============================================
+   * COLORES DE COMPONENTE
+   * ============================================ */
+  
+  /* Card - Fondo para tarjetas y contenedores elevados */
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  
+  /* Popover - Fondo para elementos flotantes */
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  
+  /* Primary - Color primario de la marca */
+  --primary: 221.2 83.2% 53.3%;
+  --primary-foreground: 210 40% 98%;
+  
+  /* Secondary - Color secundario */
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  
+  /* Muted - Elementos discretos/silueteados */
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  
+  /* Accent - Acentos y elementos destacados */
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  
+  /* Destructive - Acciones destructivas (borrar, error) */
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  
+  /* ============================================
+   * BORDES Y INPUTS
+   * ============================================ */
+  
+  /* Border - Bordes de componentes */
+  --border: 214.3 31.8% 91.4%;
+  
+  /* Input - Bordes de campos de entrada */
+  --input: 214.3 31.8% 91.4%;
+  
+  /* Ring - Anillos de focus/accessibility */
+  --ring: 221.2 83.2% 53.3%;
+  
+  /* ============================================
+   * RADIO DE BORDES
+   * ============================================ */
+  
+  --radius: 0.5rem;
+  
+  /* ============================================
+   * COLORES DE CHARTS (para pdm-chart)
+   * ============================================ */
+  
+  --chart-1: 12 76% 61%;
+  --chart-2: 173 58% 39%;
+  --chart-3: 197 37% 24%;
+  --chart-4: 43 74% 66%;
+  --chart-5: 27 87% 67%;
+  
+  /* ============================================
+   * VARIANTES DARK MODE (opcional)
+   * ============================================ */
+  
+  /* Descomentar para dark mode:
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+  }
+  */
+}
+
+/**
+ * CONFIGURACIÓN TAILWIND (para el proyecto consumidor)
+ * 
+ * Agregar en tailwind.config.js:
+ * 
+ * module.exports = {
+ *   content: [
+ *     // ... otros paths
+ *     'node_modules/pdm-ui-kit/**/*.{ts,html}',
+ *   ],
+ *   theme: {
+ *     extend: {
+ *       colors: {
+ *         background: 'hsl(var(--background))',
+ *         foreground: 'hsl(var(--foreground))',
+ *         card: {
+ *           DEFAULT: 'hsl(var(--card))',
+ *           foreground: 'hsl(var(--card-foreground))'
+ *         },
+ *         popover: {
+ *           DEFAULT: 'hsl(var(--popover))',
+ *           foreground: 'hsl(var(--popover-foreground))'
+ *         },
+ *         primary: {
+ *           DEFAULT: 'hsl(var(--primary))',
+ *           foreground: 'hsl(var(--primary-foreground))'
+ *         },
+ *         secondary: {
+ *           DEFAULT: 'hsl(var(--secondary))',
+ *           foreground: 'hsl(var(--secondary-foreground))'
+ *         },
+ *         muted: {
+ *           DEFAULT: 'hsl(var(--muted))',
+ *           foreground: 'hsl(var(--muted-foreground))'
+ *         },
+ *         accent: {
+ *           DEFAULT: 'hsl(var(--accent))',
+ *           foreground: 'hsl(var(--accent-foreground))'
+ *         },
+ *         destructive: {
+ *           DEFAULT: 'hsl(var(--destructive))',
+ *           foreground: 'hsl(var(--destructive-foreground))'
+ *         },
+ *         border: 'hsl(var(--border))',
+ *         input: 'hsl(var(--input))',
+ *         ring: 'hsl(var(--ring))',
+ *         chart: {
+ *           '1': 'hsl(var(--chart-1))',
+ *           '2': 'hsl(var(--chart-2))',
+ *           '3': 'hsl(var(--chart-3))',
+ *           '4': 'hsl(var(--chart-4))',
+ *           '5': 'hsl(var(--chart-5))',
+ *         }
+ *       },
+ *       borderRadius: {
+ *         lg: 'var(--radius)',
+ *         md: 'calc(var(--radius) - 2px)',
+ *         sm: 'calc(var(--radius) - 4px)'
+ *       }
+ *     }
+ *   },
+ *   plugins: [require('tailwindcss-animate')]
+ * }
+ */