@iclips/ui 0.0.18 → 1.0.0

package/styles/globals.css

@@ -0,0 +1,694 @@
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --font-size: 16px;
+  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+  /* Typography Scale */
+  --text-xs: 0.75rem;
+  /* 12px */
+  --text-sm: 0.875rem;
+  /* 14px */
+  --text-base: 1rem;
+  /* 16px */
+  --text-lg: 1.125rem;
+  /* 18px */
+  --text-xl: 1.25rem;
+  /* 20px */
+  --text-2xl: 1.5rem;
+  /* 24px */
+  --text-3xl: 1.875rem;
+  /* 30px */
+  --text-4xl: 2.25rem;
+  /* 36px */
+
+  /* Custom Color Palette - Base Colors */
+  /* Grays */
+  --gray-50: #F2F6FA;
+  --gray-100: #E9EEF5;
+  --gray-200: #DAE1EB;
+  --gray-300: #C5CDD9;
+  --gray-400: #9BA5B3;
+  --gray-500: #697280;
+  --gray-600: #464E59;
+  --gray-700: #2F3640;
+  --gray-800: #1A1F26;
+  --gray-900: #000000;
+  --white: #FFFFFF;
+
+  /* Purple (Primary Brand Color) */
+  --purple-50: #F6E9FF;
+  --purple-100: #DAA6FF;
+  --purple-200: #BB6DF2;
+  --purple-500: #7F26BF;
+  --purple-600: #5B158C;
+  --purple-700: #420F66;
+
+  /* Blue */
+  --blue-50: #E2E9FF;
+  --blue-100: #AABCF2;
+  --blue-200: #667FCC;
+  --blue-500: #1C2F8C;
+  --blue-600: #0F1E66;
+  --blue-700: #061040;
+
+  /* Cyan */
+  --cyan-50: #D8EFFF;
+  --cyan-100: #8CCFFF;
+  --cyan-200: #3DA7F2;
+  --cyan-500: #0086E6;
+  --cyan-600: #0053A6;
+  --cyan-700: #003066;
+
+  /* Teal */
+  --teal-50: #D4F5F5;
+  --teal-100: #9DF2F2;
+  --teal-200: #5CE6E6;
+  --teal-500: #14CCCC;
+  --teal-600: #00A7A7;
+  --teal-700: #045659;
+
+  /* Green */
+  --green-50: #D3FBDD;
+  --green-100: #91F2AA;
+  --green-200: #57D977;
+  --green-500: #24B347;
+  --green-600: #007F2A;
+  --green-700: #004D19;
+
+  /* Yellow */
+  --yellow-50: #FFF7CC;
+  --yellow-100: #FFDD99;
+  --yellow-200: #FFC859;
+  --yellow-500: #FAB325;
+  --yellow-600: #E6960B;
+  --yellow-700: #CC7C04;
+
+  /* Orange */
+  --orange-50: #FFECE1;
+  --orange-100: #FFB68C;
+  --orange-200: #FF8E4C;
+  --orange-500: #F26924;
+  --orange-600: #E64D0B;
+  --orange-700: #BF3000;
+
+  /* Red */
+  --red-50: #FFE9EC;
+  --red-100: #FFB2B9;
+  --red-200: #FF5967;
+  --red-500: #F22435;
+  --red-600: #CC0A1A;
+  --red-700: #99000D;
+
+  /* Pink */
+  --pink-50: #FFECF9;
+  --pink-100: #FFB2E8;
+  --pink-200: #FF66CC;
+  --pink-500: #E62EA8;
+  --pink-600: #BF0A89;
+  --pink-700: #99086D;
+
+  /* Semantic Colors - Light Mode */
+  --background: var(--white);
+  --foreground: var(--gray-800);
+  --card: var(--white);
+  --card-foreground: var(--gray-800);
+  --popover: var(--white);
+  --popover-foreground: var(--gray-800);
+  --primary: var(--purple-500);
+  --primary-foreground: var(--white);
+  --secondary: var(--purple-50);
+  --secondary-foreground: var(--purple-700);
+  --muted: var(--gray-100);
+  --muted-foreground: var(--gray-500);
+  --accent: var(--purple-50);
+  --accent-foreground: var(--purple-600);
+  --destructive: var(--red-500);
+  --destructive-foreground: var(--white);
+  --success: var(--green-500);
+  --success-foreground: var(--white);
+  --warning: var(--yellow-500);
+  --warning-foreground: var(--gray-800);
+  --info: var(--cyan-500);
+  --info-foreground: var(--white);
+  --border: var(--gray-200);
+  --input: transparent;
+  --input-background: var(--gray-50);
+  --switch-background: var(--gray-300);
+  --ring: var(--purple-500);
+  --font-weight-medium: 500;
+  --font-weight-normal: 400;
+
+  /* Charts - Acessibilidade melhorada com Balanceamento Óptico */
+  --chart-1: var(--purple-500);
+  /* Brand Color (Vibrante) */
+  --chart-2: var(--cyan-600);
+  /* Darkened for contrast */
+  --chart-3: var(--green-600);
+  /* Darkened for contrast */
+  --chart-4: var(--orange-600);
+  /* Darkened for contrast */
+  --chart-5: var(--pink-600);
+  /* Darkened for contrast */
+
+  /* Border Radius */
+  --radius: 0.625rem;
+
+  /* Sidebar */
+  --sidebar: var(--white);
+  --sidebar-foreground: var(--gray-800);
+  --sidebar-primary: var(--purple-500);
+  --sidebar-primary-foreground: var(--white);
+  --sidebar-accent: var(--purple-50);
+  --sidebar-accent-foreground: var(--purple-700);
+  --sidebar-border: var(--gray-200);
+  --sidebar-ring: var(--purple-500);
+}
+
+.dark {
+  /* Semantic Colors - Dark Mode */
+  --background: var(--gray-800);
+  --foreground: var(--gray-50);
+  --card: var(--gray-700);
+  --card-foreground: var(--gray-50);
+  --popover: var(--gray-700);
+  --popover-foreground: var(--gray-50);
+  --primary: var(--purple-200);
+  --primary-foreground: var(--gray-900);
+  --secondary: var(--gray-700);
+  --secondary-foreground: var(--gray-50);
+  --muted: var(--gray-600);
+  --muted-foreground: var(--gray-300);
+  --accent: var(--purple-700);
+  --accent-foreground: var(--purple-100);
+  --destructive: var(--red-600);
+  --destructive-foreground: var(--white);
+  --success: var(--green-600);
+  --success-foreground: var(--white);
+  --warning: var(--yellow-600);
+  --warning-foreground: var(--white);
+  --info: var(--cyan-600);
+  --info-foreground: var(--white);
+  --border: var(--gray-600);
+  --input: var(--gray-600);
+  --input-background: var(--gray-700);
+  --switch-background: var(--gray-600);
+  --ring: var(--purple-200);
+
+  /* Charts - Dark Mode */
+  --chart-1: var(--purple-200);
+  --chart-2: var(--cyan-200);
+  --chart-3: var(--green-200);
+  --chart-4: var(--orange-200);
+  --chart-5: var(--pink-200);
+
+  /* Sidebar - Dark Mode */
+  --sidebar: var(--gray-800);
+  --sidebar-foreground: var(--gray-50);
+  --sidebar-primary: var(--purple-200);
+  --sidebar-primary-foreground: var(--gray-900);
+  --sidebar-accent: var(--gray-700);
+  --sidebar-accent-foreground: var(--purple-100);
+  --sidebar-border: var(--gray-600);
+  --sidebar-ring: var(--purple-200);
+}
+
+@theme inline {
+  /* Semantic Colors */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-input-background: var(--input-background);
+  --color-switch-background: var(--switch-background);
+  --color-ring: var(--ring);
+
+  /* Charts */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  /* Border Radius */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  /* Sidebar */
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Raw Color Palette */
+  --color-gray-50: var(--gray-50);
+  --color-gray-100: var(--gray-100);
+  --color-gray-200: var(--gray-200);
+  --color-gray-300: var(--gray-300);
+  --color-gray-400: var(--gray-400);
+  --color-gray-500: var(--gray-500);
+  --color-gray-600: var(--gray-600);
+  --color-gray-700: var(--gray-700);
+  --color-gray-800: var(--gray-800);
+  --color-purple-50: var(--purple-50);
+  --color-purple-100: var(--purple-100);
+  --color-purple-200: var(--purple-200);
+  --color-purple-500: var(--purple-500);
+  --color-purple-600: var(--purple-600);
+  --color-purple-700: var(--purple-700);
+  --color-blue-50: var(--blue-50);
+  --color-blue-100: var(--blue-100);
+  --color-blue-200: var(--blue-200);
+  --color-blue-500: var(--blue-500);
+  --color-blue-600: var(--blue-600);
+  --color-blue-700: var(--blue-700);
+  --color-cyan-50: var(--cyan-50);
+  --color-cyan-100: var(--cyan-100);
+  --color-cyan-200: var(--cyan-200);
+  --color-cyan-500: var(--cyan-500);
+  --color-cyan-600: var(--cyan-600);
+  --color-cyan-700: var(--cyan-700);
+  --color-teal-50: var(--teal-50);
+  --color-teal-100: var(--teal-100);
+  --color-teal-200: var(--teal-200);
+  --color-teal-500: var(--teal-500);
+  --color-teal-600: var(--teal-600);
+  --color-teal-700: var(--teal-700);
+  --color-green-50: var(--green-50);
+  --color-green-100: var(--green-100);
+  --color-green-200: var(--green-200);
+  --color-green-500: var(--green-500);
+  --color-green-600: var(--green-600);
+  --color-green-700: var(--green-700);
+  --color-yellow-50: var(--yellow-50);
+  --color-yellow-100: var(--yellow-100);
+  --color-yellow-200: var(--yellow-200);
+  --color-yellow-500: var(--yellow-500);
+  --color-yellow-600: var(--yellow-600);
+  --color-yellow-700: var(--yellow-700);
+  --color-orange-50: var(--orange-50);
+  --color-orange-100: var(--orange-100);
+  --color-orange-200: var(--orange-200);
+  --color-orange-500: var(--orange-500);
+  --color-orange-600: var(--orange-600);
+  --color-orange-700: var(--orange-700);
+  --color-red-50: var(--red-50);
+  --color-red-100: var(--red-100);
+  --color-red-200: var(--red-200);
+  --color-red-500: var(--red-500);
+  --color-red-600: var(--red-600);
+  --color-red-700: var(--red-700);
+  --color-pink-50: var(--pink-50);
+  --color-pink-100: var(--pink-100);
+  --color-pink-200: var(--pink-200);
+  --color-pink-500: var(--pink-500);
+  --color-pink-600: var(--pink-600);
+  --color-pink-700: var(--pink-700);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/**
+ * Base typography. This is not applied to elements which have an ancestor with a Tailwind text class.
+ */
+@layer base {
+  :where(:not(:has([class*=' text-']), :not(:has([class^='text-'])))) {
+    h1 {
+      font-size: var(--text-2xl);
+      font-weight: var(--font-weight-medium);
+      line-height: 1.5;
+    }
+
+    h2 {
+      font-size: var(--text-xl);
+      font-weight: var(--font-weight-medium);
+      line-height: 1.5;
+    }
+
+    h3 {
+      font-size: var(--text-lg);
+      font-weight: var(--font-weight-medium);
+      line-height: 1.5;
+    }
+
+    h4 {
+      font-size: var(--text-base);
+      font-weight: var(--font-weight-medium);
+      line-height: 1.5;
+    }
+
+    p {
+      font-size: var(--text-base);
+      font-weight: var(--font-weight-normal);
+      line-height: 1.5;
+    }
+
+    label {
+      font-size: var(--text-base);
+      font-weight: var(--font-weight-medium);
+      line-height: 1.5;
+    }
+
+    button {
+      font-size: var(--text-base);
+      font-weight: var(--font-weight-medium);
+      line-height: 1.5;
+    }
+
+    input {
+      font-size: var(--text-base);
+      font-weight: var(--font-weight-normal);
+      line-height: 1.5;
+    }
+  }
+}
+
+html {
+  font-size: var(--font-size);
+}
+
+/* ============================================
+   Micro-Animations (Premium)
+   ============================================ */
+
+/* Keyframes */
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+@keyframes scale-in {
+  0% {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes scale-out {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+}
+
+@keyframes shake {
+
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translateX(-4px);
+  }
+
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translateX(4px);
+  }
+}
+
+@keyframes checkmark-draw {
+  0% {
+    stroke-dashoffset: 24;
+  }
+
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes success-pop {
+  0% {
+    transform: scale(0);
+  }
+
+  50% {
+    transform: scale(1.2);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes slide-up-fade {
+  0% {
+    transform: translateY(8px);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-down-fade {
+  0% {
+    transform: translateY(-8px);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Animation Utility Classes */
+.animate-shimmer {
+  animation: shimmer 2s infinite linear;
+  background: linear-gradient(90deg,
+      var(--muted) 0%,
+      var(--accent) 50%,
+      var(--muted) 100%);
+  background-size: 200% 100%;
+}
+
+.animate-scale-in {
+  animation: scale-in 200ms ease-out;
+}
+
+.animate-scale-out {
+  animation: scale-out 200ms ease-in;
+}
+
+.animate-shake {
+  animation: shake 500ms ease-in-out;
+}
+
+.animate-success-pop {
+  animation: success-pop 400ms ease-out;
+}
+
+.animate-slide-up {
+  animation: slide-up-fade 200ms ease-out;
+}
+
+.animate-slide-down {
+  animation: slide-down-fade 200ms ease-out;
+}
+
+/* Interactive Micro-Animations */
+.interactive-scale {
+  transition: transform 150ms ease, box-shadow 150ms ease;
+}
+
+.interactive-scale:hover {
+  transform: scale(1.02);
+}
+
+.interactive-scale:active {
+  transform: scale(0.98);
+}
+
+/* Button Premium Hover */
+.btn-premium {
+  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.btn-premium:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(127, 38, 191, 0.25);
+}
+
+.btn-premium:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 4px rgba(127, 38, 191, 0.15);
+}
+
+/* Card Premium Hover */
+.card-premium {
+  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.card-premium:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+}
+
+/* Skeleton Shimmer Effect */
+.skeleton-shimmer {
+  background: linear-gradient(90deg,
+      var(--accent) 0%,
+      var(--muted) 20%,
+      var(--accent) 40%,
+      var(--accent) 100%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+/* ============================================
+   Print Styles
+   ============================================ */
+
+@media print {
+
+  /* Ocultar elementos desnecessários na impressão */
+  .no-print {
+    display: none !important;
+  }
+
+  /* Forçar impressão em cores */
+  * {
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+    color-adjust: exact !important;
+  }
+
+  /* Configuração da página */
+  @page {
+    margin: 2cm;
+    size: A4 portrait;
+  }
+
+  /* Evitar quebras de página indesejadas */
+  .avoid-break {
+    page-break-inside: avoid !important;
+    break-inside: avoid !important;
+  }
+
+  /* Quebra de página forçada */
+  .page-break {
+    page-break-before: always !important;
+    break-before: page !important;
+  }
+
+  /* Layout específico para tabelas */
+  table {
+    page-break-inside: auto !important;
+  }
+
+  tr {
+    page-break-inside: avoid !important;
+    page-break-after: auto !important;
+  }
+
+  thead {
+    display: table-header-group !important;
+  }
+
+  tfoot {
+    display: table-footer-group !important;
+  }
+
+  /* Remover sombras e bordas arredondadas para impressão limpa */
+  .contract-template,
+  .print-template {
+    box-shadow: none !important;
+    border-radius: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+
+  /* Garantir que textos primários sejam visíveis */
+  .text-primary {
+    color: #7F26BF !important;
+  }
+
+  /* Garantir bordas visíveis */
+  .border-primary {
+    border-color: #7F26BF !important;
+  }
+
+  /* Ajustar cores de fundo para impressão */
+  .bg-gray-50,
+  .bg-gray-100 {
+    background-color: #F2F6FA !important;
+  }
+
+  /* Ocultar elementos interativos */
+  button:not(.print-keep),
+  .hover\:opacity-100,
+  [role="button"]:not(.print-keep) {
+    display: none !important;
+  }
+
+  /* Garantir que cabeçalhos e rodapés sejam impressos */
+  .print-header,
+  .print-footer {
+    display: block !important;
+  }
+
+  /* Ajustar espaçamentos para impressão */
+  body {
+    background: white !important;
+    color: black !important;
+  }
+}