@justai/cuts 0.53.0 → 0.54.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.53.0",
+  "version": "0.54.0",
   "description": "A persona's named parts — the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {

package/src/Posts.astro

@@ -118,20 +118,35 @@ const vars = [
     margin-inline: -16px;
     border-radius: 0;
     cursor: pointer;
-    transition: background 0.15s var(--ease-out);
+    transition: background 0.15s var(--ease-out), transform 0.15s var(--ease-out),
+      border-radius 0.15s var(--ease-out);
   }
-  /* The card's own material, and all three ingredients of it rather than just the fill — because on dark
-     `--card-bg` and `--surface` are THE SAME VALUE (#1c1c228c), so a fill alone would have been invisible
-     against the column it sits in. The catalogue cards get away with it because their border, their blur and
-     their shadow do the separating there; measured from tokens.css, not guessed.
+  /* THE FILL LIVES IN ITS OWN PROPERTY, and that is not tidiness — it is the difference between a hover and
+     no hover. A color-mix over a bare --card-bg (no fallback) written straight into `background` is an
+     INVALID declaration for a persona that never defined --card-bg, and an invalid declaration is dropped, so
+     those pages would answer the cursor with nothing at all. Here the fallback sits inside the mix, so the
+     value is always valid; the defaults mirror app.zone's own tokens per scheme.
+     (app.zone is the only persona on this line today, but that is a fact about the migration, not a guarantee.)
 
-     The hairline is an INSET shadow rather than a border: a real border would add a pixel to the box on
-     hover and nudge everything below it. */
+     55% rather than the full card colour, and no hairline. The full-strength version was measured at 7
+     luminance steps of lift in light, and it read as a slab competing with the text — the inset hairline was
+     doing most of that. At 55% the lift is 4 in light and still 9 in dark, so it calms down where it was loud
+     without disappearing where it was already subtle. 35% was tried and rejected: 2 steps in dark, which on a
+     bright screen is nothing.
+
+     The radius and the scale are why it now invites rather than announces. They only exist on hover — at rest
+     the post has no box to round. */
   .post:hover {
-    background: var(--card-bg, color-mix(in srgb, var(--text) 3.5%, transparent));
-    box-shadow: inset 0 0 0 1px var(--border);
+    background: color-mix(in srgb, var(--card-bg, rgba(255, 255, 255, 0.06)) 55%, transparent);
     backdrop-filter: var(--card-blur, none);
     -webkit-backdrop-filter: var(--card-blur, none);
+    border-radius: 14px;
+    transform: scale(1.006);
+  }
+  /* The light default is white because that is what --card-bg is there; the dark default is a faint white
+     overlay because on dark --card-bg equals --surface, which is the column, so copying it would vanish. */
+  @media (prefers-color-scheme: light) {
+    .post:hover { background: color-mix(in srgb, var(--card-bg, #fff) 55%, transparent); }
   }
   .post + .post { border-block-start: 1px solid var(--border); }