@jinaan/uikit 0.1.3 → 0.1.5

package/styles.css

@@ -11,8 +11,16 @@
  * Values mirror the Clerk "Ceramic" system captured in docs/design-reference.md.
  */
 :root {
-  --canvas: #fafafb;
-  --surface: #ffffff;
+  /* Clerk shell: white page, gray-50 chrome/cards. */
+  --page: #ffffff;
+  --canvas: #ffffff;
+  --surface: #fafafb;
+  --chrome: #fafafb;
+  --chrome-border: #ececee;
+  --tab: #5f5f6f;
+  --tab-active: #131316;
+  --tab-underline: #131316;
+  --subnav-active: #ececee;
   --elevated: #f6f6f7;
   --fg: #131316;
   --fg-muted: #5f5f6f;
@@ -53,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;
@@ -128,6 +138,10 @@
   --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;
 
   /* Third-party brand marks (identity providers). */
   --brand-google-blue: #4285f4;
@@ -141,8 +155,16 @@
 }
 
 .dark {
-  --canvas: #131316;
-  --surface: #1b1b1f;
+  /* Clerk shell: page gray-1400, chrome/cards gray-1500. */
+  --page: #19191c;
+  --canvas: #1b1b1f;
+  --surface: #111113;
+  --chrome: #121213;
+  --chrome-border: #232328;
+  --tab: #adadb7;
+  --tab-active: #fcfcfc;
+  --tab-underline: #fcfcfc;
+  --subnav-active: #2b2b34;
   --elevated: #232328;
   --fg: #fcfcfc;
   --fg-muted: #adadb7;
@@ -222,11 +244,21 @@
   --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;
 }
 
 @theme inline {
+  --color-page: var(--page);
   --color-canvas: var(--canvas);
   --color-surface: var(--surface);
+  --color-chrome: var(--chrome);
+  --color-chrome-border: var(--chrome-border);
+  --color-tab: var(--tab);
+  --color-tab-active: var(--tab-active);
+  --color-tab-underline: var(--tab-underline);
+  --color-subnav-active: var(--subnav-active);
   --color-elevated: var(--elevated);
   --color-fg: var(--fg);
   --color-muted: var(--fg-muted);
@@ -281,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 {
@@ -307,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.
@@ -361,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,