@datametria/vue-components/src/styles/design-tokens.css

DATAMETRIA Vue.js 3 Component Library with Multi-Brand Theming - 51 components + 10 composables with theming support, WCAG 2.2 AA, dark mode, responsive system

: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;
  }
}