@cellarnode/ui 0.16.9 → 0.17.1

package/src/theme/tokens.css

@@ -61,6 +61,12 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
+  /* Skeleton tokens (Phase 0: orchestrated loading system) */
+  --color-skeleton-base: var(--color-muted);
+  --color-skeleton-shimmer: var(--color-muted);
+  --color-skeleton-shimmer-peak: color-mix(in oklch, var(--color-muted), white 35%);
+  --color-skeleton-accent: color-mix(in oklch, var(--color-primary) 40%, transparent);
+
   --radius-sm: calc(var(--radius) - 6px);
   --radius-md: calc(var(--radius) - 3px);
   --radius-lg: var(--radius);
@@ -516,6 +522,76 @@
   }
 }
 
+@keyframes skeleton-pulse {
+  0%, 100% { opacity: 0.65; }
+  50%      { opacity: 0.30; }
+}
+
+@keyframes skeleton-shimmer {
+  0%   { background-position: 150% 0; }
+  100% { background-position: -50% 0; }
+}
+
+@keyframes skeleton-cascade-enter {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes skeleton-refetch-pulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.7; }
+}
+
+/* ============================================================
+   Skeleton motion rules (Phase 0)
+   Selectors match data-attrs emitted by ui/src/skeleton primitives.
+   ============================================================ */
+
+[data-skeleton] {
+  border-radius: var(--radius-sm);
+  background: var(--color-skeleton-base);
+}
+
+[data-skeleton][data-tier="inline"] {
+  animation: skeleton-pulse 1.8s ease-in-out infinite;
+}
+
+[data-skeleton][data-tier="data"] {
+  background: linear-gradient(
+    100deg,
+    var(--color-skeleton-shimmer) 25%,
+    var(--color-skeleton-shimmer-peak) 50%,
+    var(--color-skeleton-shimmer) 75%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+}
+
+[data-skeleton][data-tier="hero"] {
+  background: linear-gradient(
+    100deg,
+    var(--color-skeleton-shimmer) 25%,
+    var(--color-skeleton-shimmer-peak) 48%,
+    var(--color-skeleton-accent) 52%,
+    var(--color-skeleton-shimmer) 75%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.8s ease-in-out infinite;
+  animation-delay: var(--skeleton-delay, 0ms);
+}
+
+[data-skeleton-card][data-tier="hero"] {
+  opacity: 0;
+  transform: translateY(6px);
+  animation: skeleton-cascade-enter 500ms ease-out forwards;
+  animation-delay: var(--skeleton-delay, 0ms);
+  isolation: isolate;
+}
+
+[data-refetch-pulse] {
+  animation: skeleton-refetch-pulse 1.5s ease-in-out infinite;
+}
+
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
@@ -525,4 +601,21 @@
     transition-duration: 0.01ms !important;
     scroll-behavior: auto !important;
   }
+
+  [data-skeleton] {
+    animation: none !important;
+    background: var(--color-muted) !important;
+    opacity: 0.7;
+  }
+
+  [data-skeleton-card] {
+    animation: none !important;
+    opacity: 1 !important;
+    transform: none !important;
+  }
+
+  [data-refetch-pulse] {
+    animation: none !important;
+    opacity: 1 !important;
+  }
 }