@vifui/styles 0.4.0-alpha.6

package/utilities/index.css

@@ -0,0 +1,488 @@
+/**
+ * Utility Classes
+ * Custom utilities for VifUI components
+ */
+
+@layer utilities {
+  /* ============================================ */
+  /* Status Utilities */
+  /* ============================================ */
+
+  .status-focused {
+    outline: 2px solid var(--focus);
+    outline-offset: var(--ring-offset-width);
+  }
+
+  .status-disabled {
+    opacity: var(--disabled-opacity);
+    cursor: var(--cursor-disabled);
+    pointer-events: none;
+  }
+
+  .status-pending {
+    @apply pointer-events-none opacity-60;
+  }
+
+  /* ============================================ */
+  /* Shadow Utilities */
+  /* ============================================ */
+
+  .shadow-xs {
+    box-shadow: var(--shadow-xs);
+  }
+
+  .shadow-sm {
+    box-shadow: var(--shadow-sm);
+  }
+
+  .shadow-md {
+    box-shadow: var(--shadow-md);
+  }
+
+  .shadow-lg {
+    box-shadow: var(--shadow-lg);
+  }
+
+  .shadow-xl {
+    box-shadow: var(--shadow-xl);
+  }
+
+  .shadow-2xl {
+    box-shadow: var(--shadow-2xl);
+  }
+
+  .shadow-surface {
+    box-shadow: var(--surface-shadow);
+  }
+
+  .shadow-overlay {
+    box-shadow: var(--overlay-shadow);
+  }
+
+  .shadow-card {
+    box-shadow: var(--card-shadow);
+  }
+
+  /* ============================================ */
+  /* Scrollbar Styling */
+  /* ============================================ */
+
+  .vif-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar) transparent;
+  }
+
+  .vif-scrollbar::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .vif-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .vif-scrollbar::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar);
+    border-radius: var(--radius);
+  }
+
+  .vif-scrollbar::-webkit-scrollbar-thumb:hover {
+    background-color: var(--muted);
+  }
+
+  /* Thin scrollbar variant */
+  .vif-scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar) transparent;
+  }
+
+  .vif-scrollbar-thin::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+
+  .vif-scrollbar-thin::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .vif-scrollbar-thin::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar);
+    border-radius: var(--radius-full);
+  }
+
+  /* Hide scrollbar but keep functionality */
+  .vif-scrollbar-hide {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .vif-scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* ============================================ */
+  /* Animation Utilities */
+  /* ============================================ */
+
+  .vif-animate-fade-in {
+    animation: vif-fade-in var(--transition-fast) var(--ease-smooth);
+  }
+
+  .vif-animate-fade-out {
+    animation: vif-fade-out var(--transition-fast) var(--ease-smooth);
+  }
+
+  .vif-animate-scale-in {
+    animation: vif-scale-in var(--transition-base) var(--ease-out);
+  }
+
+  .vif-animate-scale-out {
+    animation: vif-scale-out var(--transition-base) var(--ease-in);
+  }
+
+  .vif-animate-slide-up {
+    animation: vif-slide-up var(--transition-base) var(--ease-out);
+  }
+
+  .vif-animate-slide-down {
+    animation: vif-slide-down var(--transition-base) var(--ease-out);
+  }
+
+  .vif-animate-slide-left {
+    animation: vif-slide-left var(--transition-base) var(--ease-out);
+  }
+
+  .vif-animate-slide-right {
+    animation: vif-slide-right var(--transition-base) var(--ease-out);
+  }
+
+  .vif-animate-bounce {
+    animation: vif-bounce 600ms var(--ease-bounce);
+  }
+
+  .vif-animate-spin {
+    animation: vif-spin 1s linear infinite;
+  }
+
+  .vif-animate-pulse {
+    animation: vif-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  /* ============================================ */
+  /* Keyframes */
+  /* ============================================ */
+
+  @keyframes vif-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes vif-fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes vif-scale-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes vif-scale-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+
+  @keyframes vif-slide-up {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes vif-slide-down {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes vif-slide-left {
+    from {
+      opacity: 0;
+      transform: translateX(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes vif-slide-right {
+    from {
+      opacity: 0;
+      transform: translateX(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes vif-bounce {
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
+  }
+
+  @keyframes vif-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes vif-pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+
+  /* ============================================ */
+  /* Transition Utilities */
+  /* ============================================ */
+
+  .vif-transition-fast {
+    transition-duration: var(--transition-fast);
+  }
+
+  .vif-transition-base {
+    transition-duration: var(--transition-base);
+  }
+
+  .vif-transition-slow {
+    transition-duration: var(--transition-slow);
+  }
+
+  .vif-transition-colors {
+    transition-property: color, background-color, border-color, fill, stroke;
+    transition-duration: var(--transition-base);
+    transition-timing-function: var(--ease-smooth);
+  }
+
+  .vif-transition-transform {
+    transition-property: transform;
+    transition-duration: var(--transition-base);
+    transition-timing-function: var(--ease-out);
+  }
+
+  .vif-transition-all {
+    transition-property: all;
+    transition-duration: var(--transition-base);
+    transition-timing-function: var(--ease-smooth);
+  }
+
+  /* ============================================ */
+  /* Surface Utilities */
+  /* ============================================ */
+
+  .vif-surface {
+    background-color: var(--surface);
+    color: var(--surface-foreground);
+  }
+
+  .vif-overlay {
+    background-color: var(--overlay);
+    color: var(--overlay-foreground);
+  }
+
+  /* ============================================ */
+  /* Backdrop Utilities */
+  /* ============================================ */
+
+  .vif-backdrop {
+    @apply fixed inset-0 z-50 bg-black/50;
+    backdrop-filter: blur(4px);
+  }
+
+  .vif-backdrop-light {
+    @apply fixed inset-0 z-50 bg-black/20;
+    backdrop-filter: blur(2px);
+  }
+
+  .vif-backdrop-dark {
+    @apply fixed inset-0 z-50 bg-black/80;
+    backdrop-filter: blur(8px);
+  }
+
+  /* ============================================ */
+  /* Focus Ring Utilities */
+  /* ============================================ */
+
+  .vif-focus-ring {
+    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2;
+  }
+
+  .vif-focus-ring-inset {
+    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary;
+  }
+
+  /* ============================================ */
+  /* Truncate Text Utilities */
+  /* ============================================ */
+
+  .vif-truncate-1 {
+    display: -webkit-box;
+    line-clamp: 1;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .vif-truncate-2 {
+    display: -webkit-box;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .vif-truncate-3 {
+    display: -webkit-box;
+    line-clamp: 3;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  /* ============================================ */
+  /* Glass Effect (Modern UI) */
+  /* ============================================ */
+
+  .vif-glass {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px) saturate(180%);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
+
+  .dark .vif-glass {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  /* ============================================ */
+  /* Hover Utilities (Vuesax style) */
+  /* ============================================ */
+
+  .vif-hover-lift {
+    transition: transform var(--transition-base) var(--ease-out);
+  }
+
+  .vif-hover-lift:hover {
+    transform: translateY(-2px);
+  }
+
+  .vif-hover-scale {
+    transition: transform var(--transition-base) var(--ease-out);
+  }
+
+  .vif-hover-scale:hover {
+    transform: scale(1.05);
+  }
+
+  /* ============================================ */
+  /* Skeleton Loading */
+  /* ============================================ */
+
+  .vif-skeleton {
+    @apply animate-pulse bg-default;
+    border-radius: var(--radius);
+  }
+
+  .vif-skeleton-shimmer {
+    @apply relative overflow-hidden bg-default;
+    border-radius: var(--radius);
+  }
+
+  .vif-skeleton-shimmer::after {
+    content: "";
+    @apply absolute inset-0;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, 0.3),
+      transparent
+    );
+    animation: vif-shimmer 1.5s infinite;
+  }
+
+  @keyframes vif-shimmer {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+}
+
+/* ============================================ */
+/* Motion Reduce (Accessibility) */
+/* ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+
+  .vif-animate-fade-in,
+  .vif-animate-scale-in,
+  .vif-animate-slide-up,
+  .vif-animate-slide-down,
+  .vif-animate-slide-left,
+  .vif-animate-slide-right,
+  .vif-animate-bounce {
+    animation: none !important;
+  }
+}