@qtalo/qt-ui-library 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qtalo/qt-ui-library",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/styles/styles.css

@@ -75,7 +75,7 @@
   --color-neutral-900-variant-2: #1f1f1f;
 
   --color-brand-primary: #6558fd;
-  
+
   --color-primary-400: #abaaff;
   --color-primary-400-variant-1: #abaaff;
   --color-primary-500: #6558fd;
@@ -374,3 +374,53 @@ body {
   }
 }
 
+/* Skeleton theme */
+
+:root {
+  --skeleton-base: var(--color-neutral-300-variant-3);
+  --skeleton-highlight: var(--color-neutral-500-variant-4);
+  --skeleton-duration: 4s;
+}
+
+/* Shimmer animation */
+
+@keyframes skeleton-shimmer {
+  from {
+    background-position-x: 200%;
+  }
+  to {
+    background-position-x: -200%;
+  }
+}
+
+/* Skeleton block */
+
+.skeleton {
+  position: relative;
+  overflow: hidden;
+
+  /* Base surface */
+  background-color: var(--skeleton-base);
+
+  /* Shimmer layer */
+  background-image: linear-gradient(
+    110deg,
+    transparent 15%,
+    var(--skeleton-highlight) 50%,
+    transparent 85%
+  );
+
+  background-size: 200% 100%;
+  background-attachment: fixed;
+
+  animation: skeleton-shimmer var(--skeleton-duration) linear infinite;
+}
+
+/* Reduced motion support */
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton {
+    animation: none;
+    background-image: none;
+  }
+}