@jinaan/uikit 0.1.4 → 0.1.6

package/styles.css

@@ -61,6 +61,8 @@
   --table-row-hover: #f6f6f7;
   --table-row-selected: #ececee;
   --table-accent: var(--primary);
+  /* Card divider: a touch brighter than the card's outer shell in both themes. */
+  --card-divider: color-mix(in oklab, var(--table-container-bg) 90%, white);
   /* Table geometry (theme-independent). */
   --table-radius-outer: 1.5rem;
   --table-radius-panel: 1.25rem;
@@ -136,6 +138,7 @@
   --dialog-panel-shadow:
     0 1px 2px rgb(19 19 22 / 0.06),
     0 10px 28px -14px rgb(19 19 22 / 0.2);
+  --dialog-noise-opacity: 0.04;
 
   /* Settings danger-zone shell (Clerk red-tinted surface). */
   --settings-danger-bg: #fff5f4;
@@ -241,6 +244,7 @@
   --dialog-panel-shadow:
     inset 0 1px 0 rgb(255 255 255 / 0.04),
     0 12px 32px -16px rgb(0 0 0 / 0.6);
+  --dialog-noise-opacity: 0.065;
 
   --settings-danger-bg: #240b0a;
 }
@@ -309,6 +313,7 @@
   --color-table-row-hover: var(--table-row-hover);
   --color-table-row-selected: var(--table-row-selected);
   --color-table-accent: var(--table-accent);
+  --color-card-divider: var(--card-divider);
 }
 
 @utility font-numeric {
@@ -335,6 +340,14 @@
       inset 0 0 0 1px var(--button-inner-border, transparent);
   }
 
+  /* Dropdown/select surface: same top gloss and inset hairline as buttons. */
+  .menu-surface {
+    box-shadow:
+      var(--shadow-md),
+      inset 0 1px 0.5px 0 var(--button-inner),
+      inset 0 0 0 1px var(--button-inner-border, transparent);
+  }
+
   /*
    * Light-theme definition for filled buttons: a subtle inset hairline keeps
    * the surface readable on white, where a white gloss has no contrast.
@@ -389,6 +402,68 @@
   }
 }
 
+/* Dialog motion + texture: caller-origin flight, centered fallback, noise. */
+@keyframes dialog-fly-in {
+  from {
+    opacity: 0;
+    transform: translate3d(
+        var(--dialog-dx, 0px),
+        var(--dialog-dy, 0px),
+        0
+      ) scale(var(--dialog-sx, 1), var(--dialog-sy, 1));
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+
+@keyframes dialog-pop-in {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 0, 0) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+
+.dialog-fly-in {
+  animation: dialog-fly-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
+  backface-visibility: hidden;
+  will-change: transform, opacity;
+}
+
+.dialog-pop-in {
+  animation: dialog-pop-in 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
+  backface-visibility: hidden;
+  will-change: transform, opacity;
+}
+
+@keyframes dialog-fly-out {
+  from {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate3d(0, calc(50vh + 50%), 0) scale(0.98);
+  }
+}
+
+.dialog-closing {
+  animation: dialog-fly-out 240ms cubic-bezier(0.4, 0, 1, 1) both;
+  backface-visibility: hidden;
+  will-change: transform, opacity;
+}
+
+.dialog-noise {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
+  background-size: 160px 160px;
+  opacity: var(--dialog-noise-opacity);
+}
+
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,