@datametria/vue-components 1.1.1 → 1.1.3

package/src/styles/design-tokens.css

@@ -1,31 +1,623 @@
-:root {
-  --dm-primary: #0072CE;
-  --dm-secondary: #4B0078;
-  --dm-success: #10b981;
-  --dm-error: #ef4444;
-  --dm-warning: #f59e0b;
-  
-  --dm-gray-50: #f9fafb;
-  --dm-gray-100: #f3f4f6;
-  --dm-gray-700: #374151;
-  --dm-gray-900: #111827;
-  
-  --dm-space-2: 0.5rem;
-  --dm-space-3: 0.75rem;
-  --dm-space-4: 1rem;
-  
-  --dm-text-sm: 0.875rem;
-  --dm-text-base: 1rem;
-  --dm-text-lg: 1.125rem;
-  
-  --dm-radius: 0.375rem;
-  --dm-transition: 200ms ease-in-out;
-  --dm-focus-ring: 0 0 0 3px rgba(0, 114, 206, 0.1);
-}
-
-@media (max-width: 640px) {
-  :root {
-    --dm-text-sm: 0.8rem;
-    --dm-text-base: 0.9rem;
-  }
-}
+:root {
+  --dm-primary: #0072CE;
+  --dm-secondary: #4B0078;
+  --dm-success: #10b981;
+  --dm-error: #ef4444;
+  --dm-warning: #f59e0b;
+  --dm-info: #06b6d4;
+  
+  --dm-gray-50: #f9fafb;
+  --dm-gray-100: #f3f4f6;
+  --dm-gray-700: #374151;
+  --dm-gray-900: #111827;
+  
+  /* Gradientes corporativos */
+  --gradient-primary: linear-gradient(135deg, #0072CE 0%, #005ba3 100%);
+  --gradient-secondary: linear-gradient(135deg, #4B0078 0%, #3a005c 100%);
+  --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+  
+  /* Bordas temáticas */
+  --border-success: #10b981;
+  --border-warning: #f59e0b;
+  --border-info: #06b6d4;
+  --border-feature: #8b5cf6;
+  --border-error: #ef4444;
+  
+  --dm-space-2: 0.5rem;
+  --dm-space-3: 0.75rem;
+  --dm-space-4: 1rem;
+  
+  --dm-text-sm: 0.875rem;
+  --dm-text-base: 1rem;
+  --dm-text-lg: 1.125rem;
+  
+  /* Fluid typography */
+  --dm-text-xs-fluid: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
+  --dm-text-sm-fluid: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
+  --dm-text-base-fluid: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
+  --dm-text-lg-fluid: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
+  --dm-text-xl-fluid: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
+  --dm-text-2xl-fluid: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
+  --dm-text-3xl-fluid: clamp(1.875rem, 1.6rem + 1.375vw, 2.25rem);
+  
+  --dm-radius: 0.375rem;
+  --dm-transition: 200ms ease-in-out;
+  --dm-focus-ring: 0 0 0 3px rgba(0, 114, 206, 0.1);
+  
+  /* Accessibility Scale (default 1.0, range 0.8-2.0) */
+  --user-scale: 1.0;
+  
+  /* Scaled typography */
+  --dm-text-sm-scaled: calc(var(--dm-text-sm) * var(--user-scale));
+  --dm-text-base-scaled: calc(var(--dm-text-base) * var(--user-scale));
+  --dm-text-lg-scaled: calc(var(--dm-text-lg) * var(--user-scale));
+  
+  /* Scaled spacing */
+  --dm-space-2-scaled: calc(var(--dm-space-2) * var(--user-scale));
+  --dm-space-3-scaled: calc(var(--dm-space-3) * var(--user-scale));
+  --dm-space-4-scaled: calc(var(--dm-space-4) * var(--user-scale));
+  
+  /* Shimmer animation */
+  --shimmer-bg: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
+  --shimmer-duration: 1.5s;
+  
+  /* Enhanced transitions */
+  --transition-fast: 150ms ease-out;
+  --transition-normal: 200ms ease-in-out;
+  --transition-slow: 300ms ease-in-out;
+  --transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --transition-smooth: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  
+  /* Responsive breakpoints */
+  --breakpoint-xs: 475px;
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+  
+  /* Fluid spacing system */
+  --space-xs-fluid: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
+  --space-sm-fluid: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
+  --space-md-fluid: clamp(1rem, 0.8rem + 1vw, 1.5rem);
+  --space-lg-fluid: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
+  --space-xl-fluid: clamp(2rem, 1.6rem + 2vw, 3rem);
+  --space-2xl-fluid: clamp(2.5rem, 2rem + 2.5vw, 3.75rem);
+  
+  /* Fluid border radius */
+  --radius-sm-fluid: clamp(0.125rem, 0.1rem + 0.125vw, 0.25rem);
+  --radius-md-fluid: clamp(0.375rem, 0.3rem + 0.375vw, 0.5rem);
+  --radius-lg-fluid: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
+  --radius-xl-fluid: clamp(0.75rem, 0.6rem + 0.75vw, 1rem);
+  
+  /* Container max-widths */
+  --container-xs: 475px;
+  --container-sm: 640px;
+  --container-md: 768px;
+  --container-lg: 1024px;
+  --container-xl: 1280px;
+  --container-2xl: 1536px;
+  
+  /* Grid system */
+  --grid-cols-1: repeat(1, minmax(0, 1fr));
+  --grid-cols-2: repeat(2, minmax(0, 1fr));
+  --grid-cols-3: repeat(3, minmax(0, 1fr));
+  --grid-cols-4: repeat(4, minmax(0, 1fr));
+  --grid-cols-6: repeat(6, minmax(0, 1fr));
+  --grid-cols-12: repeat(12, minmax(0, 1fr));
+  
+  /* Responsive grid gaps */
+  --gap-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
+  --gap-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1rem);
+  --gap-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
+  --gap-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
+  --gap-xl: clamp(2rem, 1.6rem + 2vw, 2.5rem);
+}
+}
+
+/* Dark Mode Variables */
+[data-theme="dark"] {
+  --dm-primary: #3b82f6;
+  --dm-secondary: #8b5cf6;
+  --dm-success: #22c55e;
+  --dm-error: #f87171;
+  --dm-warning: #fbbf24;
+  --dm-info: #38bdf8;
+  
+  --dm-bg-primary: #111827;
+  --dm-bg-secondary: #1f2937;
+  --dm-text-primary: #f9fafb;
+  --dm-text-secondary: #d1d5db;
+  
+  --dm-gray-50: #1f2937;
+  --dm-gray-100: #374151;
+  --dm-gray-700: #d1d5db;
+  --dm-gray-900: #f9fafb;
+  
+  /* Dark mode gradients */
+  --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+  --gradient-secondary: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+  --gradient-success: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
+  --gradient-warning: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
+  
+  /* Dark mode borders */
+  --border-success: #22c55e;
+  --border-warning: #fbbf24;
+  --border-info: #38bdf8;
+  --border-feature: #a78bfa;
+  --border-error: #f87171;
+  
+  /* Dark mode shimmer */
+  --shimmer-bg: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
+}
+
+/* Shimmer Animation */
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+.shimmer {
+  background: var(--dm-gray-200, #e5e7eb);
+  background-image: var(--shimmer-bg);
+  background-size: 200% 100%;
+  background-repeat: no-repeat;
+  animation: shimmer var(--shimmer-duration) ease-in-out infinite;
+}
+
+[data-theme="dark"] .shimmer {
+  background: var(--dm-gray-700, #374151);
+}
+
+/* Enhanced transition utilities */
+.transition-fast {
+  transition: all var(--transition-fast);
+}
+
+.transition-normal {
+  transition: all var(--transition-normal);
+}
+
+.transition-slow {
+  transition: all var(--transition-slow);
+}
+
+.transition-bounce {
+  transition: all var(--transition-bounce);
+}
+
+.transition-smooth {
+  transition: all var(--transition-smooth);
+}
+
+/* Fade transitions */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity var(--transition-normal);
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* Slide transitions */
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all var(--transition-smooth);
+}
+
+.slide-up-enter-from {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+
+.slide-down-enter-active,
+.slide-down-leave-active {
+  transition: all var(--transition-smooth);
+}
+
+.slide-down-enter-from {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+
+.slide-down-leave-to {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+/* Scale transitions */
+.scale-enter-active,
+.scale-leave-active {
+  transition: all var(--transition-bounce);
+}
+
+.scale-enter-from,
+.scale-leave-to {
+  opacity: 0;
+  transform: scale(0.9);
+}
+
+/* Respect user motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  .shimmer {
+    animation: none;
+  }
+  
+  .transition-fast,
+  .transition-normal,
+  .transition-slow,
+  .transition-bounce,
+  .transition-smooth {
+    transition: none;
+  }
+  
+  .fade-enter-active,
+  .fade-leave-active,
+  .slide-up-enter-active,
+  .slide-up-leave-active,
+  .slide-down-enter-active,
+  .slide-down-leave-active,
+  .scale-enter-active,
+  .scale-leave-active {
+    transition: none;
+  }
+}
+
+/* Responsive breakpoints */
+@media (min-width: 475px) {
+  .xs\:block { display: block; }
+  .xs\:hidden { display: none; }
+  .xs\:text-sm { font-size: var(--dm-text-sm); }
+  .xs\:text-base { font-size: var(--dm-text-base); }
+}
+
+@media (min-width: 640px) {
+  .sm\:block { display: block; }
+  .sm\:hidden { display: none; }
+  .sm\:text-sm { font-size: var(--dm-text-sm); }
+  .sm\:text-base { font-size: var(--dm-text-base); }
+  .sm\:text-lg { font-size: var(--dm-text-lg); }
+}
+
+@media (min-width: 768px) {
+  .md\:block { display: block; }
+  .md\:hidden { display: none; }
+  .md\:text-sm { font-size: var(--dm-text-sm); }
+  .md\:text-base { font-size: var(--dm-text-base); }
+  .md\:text-lg { font-size: var(--dm-text-lg); }
+  .md\:text-xl { font-size: 1.25rem; }
+}
+
+@media (min-width: 1024px) {
+  .lg\:block { display: block; }
+  .lg\:hidden { display: none; }
+  .lg\:text-sm { font-size: var(--dm-text-sm); }
+  .lg\:text-base { font-size: var(--dm-text-base); }
+  .lg\:text-lg { font-size: var(--dm-text-lg); }
+  .lg\:text-xl { font-size: 1.25rem; }
+  .lg\:text-2xl { font-size: 1.5rem; }
+}
+
+@media (min-width: 1280px) {
+  .xl\:block { display: block; }
+  .xl\:hidden { display: none; }
+  .xl\:text-lg { font-size: var(--dm-text-lg); }
+  .xl\:text-xl { font-size: 1.25rem; }
+  .xl\:text-2xl { font-size: 1.5rem; }
+  .xl\:text-3xl { font-size: 1.875rem; }
+}
+
+@media (min-width: 1536px) {
+  .\32xl\:block { display: block; }
+  .\32xl\:hidden { display: none; }
+  .\32xl\:text-xl { font-size: 1.25rem; }
+  .\32xl\:text-2xl { font-size: 1.5rem; }
+  .\32xl\:text-3xl { font-size: 1.875rem; }
+  .\32xl\:text-4xl { font-size: 2.25rem; }
+}
+
+/* Container queries */
+.container-query {
+  container-type: inline-size;
+}
+
+@container (min-width: 320px) {
+  .cq-xs\:block { display: block; }
+  .cq-xs\:hidden { display: none; }
+  .cq-xs\:text-sm { font-size: var(--dm-text-sm); }
+}
+
+@container (min-width: 480px) {
+  .cq-sm\:block { display: block; }
+  .cq-sm\:hidden { display: none; }
+  .cq-sm\:text-base { font-size: var(--dm-text-base); }
+}
+
+@container (min-width: 640px) {
+  .cq-md\:block { display: block; }
+  .cq-md\:hidden { display: none; }
+  .cq-md\:text-lg { font-size: var(--dm-text-lg); }
+}
+
+@container (min-width: 768px) {
+  .cq-lg\:block { display: block; }
+  .cq-lg\:hidden { display: none; }
+  .cq-lg\:text-xl { font-size: 1.25rem; }
+}
+
+/* Aspect ratio utilities */
+.aspect-square {
+  aspect-ratio: 1 / 1;
+}
+
+.aspect-video {
+  aspect-ratio: 16 / 9;
+}
+
+.aspect-photo {
+  aspect-ratio: 4 / 3;
+}
+
+.aspect-portrait {
+  aspect-ratio: 3 / 4;
+}
+
+.aspect-wide {
+  aspect-ratio: 21 / 9;
+}
+
+.aspect-golden {
+  aspect-ratio: 1.618 / 1;
+}
+
+/* Fallback for browsers without aspect-ratio support */
+@supports not (aspect-ratio: 1 / 1) {
+  .aspect-square::before {
+    content: '';
+    display: block;
+    padding-top: 100%;
+  }
+  
+  .aspect-video::before {
+    content: '';
+    display: block;
+    padding-top: 56.25%; /* 9/16 * 100% */
+  }
+  
+  .aspect-photo::before {
+    content: '';
+    display: block;
+    padding-top: 75%; /* 3/4 * 100% */
+  }
+  
+  .aspect-portrait::before {
+    content: '';
+    display: block;
+    padding-top: 133.33%; /* 4/3 * 100% */
+  }
+  
+  .aspect-wide::before {
+    content: '';
+    display: block;
+    padding-top: 42.86%; /* 9/21 * 100% */
+  }
+  
+  .aspect-golden::before {
+    content: '';
+    display: block;
+    padding-top: 61.8%; /* 1/1.618 * 100% */
+  }
+}
+
+/* Enhanced responsive utilities */
+.container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--space-sm-fluid);
+  padding-right: var(--space-sm-fluid);
+}
+
+@media (min-width: 475px) {
+  .container { max-width: var(--container-xs); }
+}
+
+@media (min-width: 640px) {
+  .container { max-width: var(--container-sm); }
+}
+
+@media (min-width: 768px) {
+  .container { max-width: var(--container-md); }
+}
+
+@media (min-width: 1024px) {
+  .container { max-width: var(--container-lg); }
+}
+
+@media (min-width: 1280px) {
+  .container { max-width: var(--container-xl); }
+}
+
+@media (min-width: 1536px) {
+  .container { max-width: var(--container-2xl); }
+}
+
+/* Responsive grid system */
+.grid {
+  display: grid;
+  gap: var(--gap-md);
+}
+
+.grid-cols-1 { grid-template-columns: var(--grid-cols-1); }
+.grid-cols-2 { grid-template-columns: var(--grid-cols-2); }
+.grid-cols-3 { grid-template-columns: var(--grid-cols-3); }
+.grid-cols-4 { grid-template-columns: var(--grid-cols-4); }
+.grid-cols-6 { grid-template-columns: var(--grid-cols-6); }
+.grid-cols-12 { grid-template-columns: var(--grid-cols-12); }
+
+/* Responsive grid columns */
+@media (min-width: 640px) {
+  .sm\:grid-cols-1 { grid-template-columns: var(--grid-cols-1); }
+  .sm\:grid-cols-2 { grid-template-columns: var(--grid-cols-2); }
+  .sm\:grid-cols-3 { grid-template-columns: var(--grid-cols-3); }
+  .sm\:grid-cols-4 { grid-template-columns: var(--grid-cols-4); }
+}
+
+@media (min-width: 768px) {
+  .md\:grid-cols-1 { grid-template-columns: var(--grid-cols-1); }
+  .md\:grid-cols-2 { grid-template-columns: var(--grid-cols-2); }
+  .md\:grid-cols-3 { grid-template-columns: var(--grid-cols-3); }
+  .md\:grid-cols-4 { grid-template-columns: var(--grid-cols-4); }
+  .md\:grid-cols-6 { grid-template-columns: var(--grid-cols-6); }
+}
+
+@media (min-width: 1024px) {
+  .lg\:grid-cols-1 { grid-template-columns: var(--grid-cols-1); }
+  .lg\:grid-cols-2 { grid-template-columns: var(--grid-cols-2); }
+  .lg\:grid-cols-3 { grid-template-columns: var(--grid-cols-3); }
+  .lg\:grid-cols-4 { grid-template-columns: var(--grid-cols-4); }
+  .lg\:grid-cols-6 { grid-template-columns: var(--grid-cols-6); }
+  .lg\:grid-cols-12 { grid-template-columns: var(--grid-cols-12); }
+}
+
+/* Fluid spacing utilities */
+.space-xs { margin: var(--space-xs-fluid); }
+.space-sm { margin: var(--space-sm-fluid); }
+.space-md { margin: var(--space-md-fluid); }
+.space-lg { margin: var(--space-lg-fluid); }
+.space-xl { margin: var(--space-xl-fluid); }
+.space-2xl { margin: var(--space-2xl-fluid); }
+
+.p-xs { padding: var(--space-xs-fluid); }
+.p-sm { padding: var(--space-sm-fluid); }
+.p-md { padding: var(--space-md-fluid); }
+.p-lg { padding: var(--space-lg-fluid); }
+.p-xl { padding: var(--space-xl-fluid); }
+.p-2xl { padding: var(--space-2xl-fluid); }
+
+.gap-xs { gap: var(--gap-xs); }
+.gap-sm { gap: var(--gap-sm); }
+.gap-md { gap: var(--gap-md); }
+.gap-lg { gap: var(--gap-lg); }
+.gap-xl { gap: var(--gap-xl); }
+
+/* Fluid border radius utilities */
+.rounded-sm { border-radius: var(--radius-sm-fluid); }
+.rounded-md { border-radius: var(--radius-md-fluid); }
+.rounded-lg { border-radius: var(--radius-lg-fluid); }
+.rounded-xl { border-radius: var(--radius-xl-fluid); }
+
+/* Responsive text alignment */
+.text-left { text-align: left; }
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+
+@media (min-width: 640px) {
+  .sm\:text-left { text-align: left; }
+  .sm\:text-center { text-align: center; }
+  .sm\:text-right { text-align: right; }
+}
+
+@media (min-width: 768px) {
+  .md\:text-left { text-align: left; }
+  .md\:text-center { text-align: center; }
+  .md\:text-right { text-align: right; }
+}
+
+@media (min-width: 1024px) {
+  .lg\:text-left { text-align: left; }
+  .lg\:text-center { text-align: center; }
+  .lg\:text-right { text-align: right; }
+}
+
+/* Responsive flexbox utilities */
+.flex { display: flex; }
+.flex-col { flex-direction: column; }
+.flex-row { flex-direction: row; }
+.flex-wrap { flex-wrap: wrap; }
+.flex-nowrap { flex-wrap: nowrap; }
+
+.justify-start { justify-content: flex-start; }
+.justify-center { justify-content: center; }
+.justify-end { justify-content: flex-end; }
+.justify-between { justify-content: space-between; }
+.justify-around { justify-content: space-around; }
+.justify-evenly { justify-content: space-evenly; }
+
+.items-start { align-items: flex-start; }
+.items-center { align-items: center; }
+.items-end { align-items: flex-end; }
+.items-stretch { align-items: stretch; }
+
+@media (min-width: 640px) {
+  .sm\:flex { display: flex; }
+  .sm\:flex-col { flex-direction: column; }
+  .sm\:flex-row { flex-direction: row; }
+  .sm\:justify-start { justify-content: flex-start; }
+  .sm\:justify-center { justify-content: center; }
+  .sm\:justify-end { justify-content: flex-end; }
+  .sm\:justify-between { justify-content: space-between; }
+}
+
+@media (min-width: 768px) {
+  .md\:flex { display: flex; }
+  .md\:flex-col { flex-direction: column; }
+  .md\:flex-row { flex-direction: row; }
+  .md\:justify-start { justify-content: flex-start; }
+  .md\:justify-center { justify-content: center; }
+  .md\:justify-end { justify-content: flex-end; }
+  .md\:justify-between { justify-content: space-between; }
+}
+
+@media (min-width: 1024px) {
+  .lg\:flex { display: flex; }
+  .lg\:flex-col { flex-direction: column; }
+  .lg\:flex-row { flex-direction: row; }
+  .lg\:justify-start { justify-content: flex-start; }
+  .lg\:justify-center { justify-content: center; }
+  .lg\:justify-end { justify-content: flex-end; }
+  .lg\:justify-between { justify-content: space-between; }
+}
+
+/* Mobile-first responsive adjustments */
+@media (max-width: 640px) {
+  :root {
+    --dm-text-sm: 0.8rem;
+    --dm-text-base: 0.9rem;
+    --dm-space-2: 0.375rem;
+    --dm-space-3: 0.625rem;
+    --dm-space-4: 0.875rem;
+  }
+  
+  .container {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+
+@media (max-width: 475px) {
+  :root {
+    --dm-text-sm: 0.75rem;
+    --dm-text-base: 0.875rem;
+    --dm-space-2: 0.25rem;
+    --dm-space-3: 0.5rem;
+    --dm-space-4: 0.75rem;
+  }
+  
+  .container {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}