@caratlogic/design-system 0.1.47 → 0.1.48

package/dist/source.css

@@ -17,6 +17,9 @@
  * `animate-shimmer` (used by SquareSkeleton / ShimmerTable) is generated. */
 @theme {
   --animate-shimmer: shimmer 1.6s ease-in-out infinite;
+  --animate-loader-gem: loader-gem 2.4s ease-in-out infinite;
+  --animate-loader-ring: loader-ring 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
+  --animate-loader-sheen: loader-sheen 2.4s ease-in-out infinite;
 }
 
 @keyframes shimmer {
@@ -24,3 +27,33 @@
     transform: translateX(100%);
   }
 }
+
+/* BrandLoader: the gem winds up, springs out with a glow, wobbles and settles;
+ * two rings ripple out behind it and a sheen crosses it. The gem is laid out at
+ * its popped size and scaled down from there, so the browser never enlarges its
+ * bitmap and the logo stays sharp at the peak. */
+@keyframes loader-gem {
+  0%, 80%, 100% { transform: scale(0.77); filter: drop-shadow(0 0 0 transparent); }
+  12% { transform: scale(0.63); filter: drop-shadow(0 0 0 transparent); }
+  22% {
+    transform: scale(1);
+    filter: drop-shadow(0 0 18px color-mix(in oklab, var(--primary) 55%, transparent));
+  }
+  30% { transform: scale(0.71); }
+  37% { transform: scale(0.85); }
+  44% {
+    transform: scale(0.77);
+    filter: drop-shadow(0 0 8px color-mix(in oklab, var(--primary) 25%, transparent));
+  }
+}
+
+@keyframes loader-ring {
+  0%, 18% { transform: scale(0.85); opacity: 0; }
+  22% { transform: scale(0.95); opacity: 0.6; }
+  85%, 100% { transform: scale(4.6); opacity: 0; }
+}
+
+@keyframes loader-sheen {
+  0%, 30% { background-position: 150% 0; }
+  60%, 100% { background-position: -50% 0; }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caratlogic/design-system",
-  "version": "0.1.47",
+  "version": "0.1.48",
   "description": "Carat Logic Design System",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",