@obvi/blueprint 1.2.0 → 1.3.1

package/dist/blueprint.css

@@ -181,9 +181,21 @@
     --bp-hatch-gap: 7px;
     --bp-hatch: repeating-linear-gradient(
       -45deg,
-      var(--bp-ink-faint) 0 var(--bp-stroke),
-      oklch(0 0 0 / 0) var(--bp-stroke) var(--bp-hatch-gap)
+      var(--bp-ink-faint) 0,
+      var(--bp-ink-faint) var(--bp-stroke),
+      oklch(0 0 0 / 0) var(--bp-stroke),
+      oklch(0 0 0 / 0) var(--bp-hatch-gap)
     );
+    /* Fixed fullscreen scrims in WebKit rasterize more predictably when the
+       hatch is tiled through a mask on a pseudo-element instead of painted
+       directly as a repeating gradient on the fixed layer itself. */
+    --bp-hatch-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath d='M-1 8L8 -1' stroke='%23000' stroke-width='1' stroke-linecap='square' shape-rendering='crispEdges'/%3E%3C/svg%3E");
+    /* Hatch line color for the masked ::before treatment used on non-fixed
+       hatch surfaces (preflight gate, empty state, rejected choice cards).
+       Tracks the --bp-hatch gradient line color per theme (ink-faint in
+       light, edge in dark) so swapping the soft diagonal gradient for the
+       crisp deterministic mask never shifts the rendered color. */
+    --bp-hatch-ink: var(--bp-ink-faint);
     /* Drafting board — a faint dot-grid backdrop that marks INTERACTIVE
        component surfaces (choice, preflight, choice-record, source, mock,
        gallery): a second axis distinct from the diagonal --bp-hatch (which
@@ -216,11 +228,16 @@
     --bp-board-card-pad: var(--bp-space-4);
     --bp-board-card-radius: var(--bp-radius-8);
     /* Modal scrim wash — darker than --bp-ink-soft so floated panels (search
-       palette, lightbox, expanded mock) read clearly over the page. Always
-       pair with --bp-hatch:
-         background-color: var(--bp-scrim);
-         background-image: var(--bp-hatch); */
+       palette, lightbox, expanded mock) read clearly over the page. The wash
+       is painted as a SOLID background-image layer (--bp-scrim-fill), not as
+       background-color: WebKit/Safari can drop a semi-transparent oklch
+       background-color while still painting gradient background-image layers,
+       which left the wash faint/absent there while the hatch texture kept
+       drawing. Fixed fullscreen overlays pair this fill on the host with the
+       diagonal hatch on a masked pseudo-element (see --bp-hatch-mask) so the
+       repeating gradient itself is not rasterized on the fixed layer. */
     --bp-scrim: oklch(0 0 0 / 0.58);
+    --bp-scrim-fill: linear-gradient(var(--bp-scrim), var(--bp-scrim));
     --bp-edge: var(--obvious-border-subtle, oklch(0 0 0 / 0.08));
     --bp-ink-line: var(--obvious-border-default, oklch(0 0 0 / 0.16));
     --bp-text: var(--obvious-text-primary, oklch(0 0 0 / 0.92));
@@ -437,9 +454,14 @@
        rejected-choice fills keep texture without brightening the wash. */
     --bp-hatch: repeating-linear-gradient(
       -45deg,
-      var(--bp-edge) 0 var(--bp-stroke),
-      oklch(0 0 0 / 0) var(--bp-stroke) var(--bp-hatch-gap)
+      var(--bp-edge) 0,
+      var(--bp-edge) var(--bp-stroke),
+      oklch(0 0 0 / 0) var(--bp-stroke),
+      oklch(0 0 0 / 0) var(--bp-hatch-gap)
     );
+    /* Dark hatch line color = --bp-edge (matches the dark --bp-hatch gradient
+       above), keeping the masked ::before faithful to the gradient in dark. */
+    --bp-hatch-ink: var(--bp-edge);
     --bp-paper: var(--bp-gray-950);
     --bp-bg: oklch(0.15 0 0); /* the desk sits darker than the sheet, so the page lifts */
     --bp-edge: oklch(1 0 0 / 0.08);
@@ -1481,7 +1503,10 @@
     --bp-tick: var(--bp-ink);
     --bp-tick-len: 16px;
     --bp-tick-wt: 2.5px;
-    --bp-callout-fill: var(--bp-hatch);
+    /* Hatch is painted by the crisp masked ::before (shared hatch-mask rule),
+       leaving the corner tick stack on the host. */
+    --bp-callout-fill: none;
+    isolation: isolate;
     background-color: var(--bp-fill-hi);
   }
   /* Reference = enumerated values (subdued, soft ticks). */
@@ -1807,7 +1832,10 @@
   }
   :where(.bp-choice--stack:has(.bp-choice__pick:checked)) :where(.bp-choice__card:not(:has(.bp-choice__pick:checked))) {
     opacity: 0.62;
-    background-image: var(--bp-hatch);
+    /* Hatch is painted by the crisp masked ::before (shared hatch-mask rule),
+       not a diagonal gradient — the gradient anti-aliases differently in
+       WebKit vs Chromium. The card is already position:relative. */
+    isolation: isolate;
   }
   :where(.bp-choice--stack:has(.bp-choice__pick:checked)) :where(.bp-choice__card:not(:has(.bp-choice__pick:checked))) :where(.bp-choice__card-rejected) {
     display: inline-flex;
@@ -1839,7 +1867,8 @@
   }
   :where(.bp-choice--resolved) :where(.bp-choice__card:not([data-resolved])) {
     opacity: 0.62;
-    background-image: var(--bp-hatch);
+    /* Crisp masked ::before hatch (cross-engine parity), see hatch-mask rule. */
+    isolation: isolate;
   }
   :where(.bp-choice--resolved) :where(.bp-choice__card:not([data-resolved])) :where(.bp-choice__card-rejected) {
     display: inline-flex;
@@ -1903,7 +1932,9 @@
     opacity: 0.5;
   }
   :where(.bp-choice--gallery:has(.bp-choice__pick:checked)) :where(.bp-choice__mock:not(:has(.bp-choice__pick:checked))) :where(.bp-choice__mock-frame) {
-    background-image: var(--bp-hatch);
+    /* Crisp masked ::before hatch (cross-engine parity), see hatch-mask rule. */
+    position: relative;
+    isolation: isolate;
   }
   :where(.bp-choice--gallery:has(.bp-choice__pick:checked)) :where(.bp-choice__mock:not(:has(.bp-choice__pick:checked))) :where(.bp-choice__mock-rejected) {
     display: inline-flex;
@@ -2061,12 +2092,17 @@
     accent-color: var(--bp-button-primary-fg);
   }
   :where(.bp-preflight__gate) {
+    /* position + isolation host the masked hatch ::before (see the shared
+       hatch-mask rule near the overlay scrims) without leaking its negative
+       z-index behind ancestors. The crisp mask replaces the diagonal
+       repeating-gradient, which WebKit and Chromium anti-alias differently. */
+    position: relative;
+    isolation: isolate;
     margin: var(--bp-space-3);
     border: 1px dashed var(--bp-ink-line);
     border-radius: var(--bp-radius-0);
     padding: var(--bp-space-4);
     text-align: center;
-    background-image: var(--bp-hatch);
     color: var(--bp-text-secondary);
   }
   :where(.bp-preflight__gate-ready) {
@@ -3243,9 +3279,75 @@
     display: grid;
     place-items: center;
     padding: clamp(var(--bp-space-4), 4vw, var(--bp-space-7));
-    background-color: var(--bp-scrim);
-    background-image: var(--bp-hatch);
+    /* Fixed fullscreen overlays need BOTH Safari mitigations:
+       1. the wash stays on the host as --bp-scrim-fill so WebKit paints it;
+       2. the hatch moves to a masked pseudo-element so the repeating gradient
+          itself is not rasterized on the fixed layer. */
+    background-image: var(--bp-scrim-fill);
+    isolation: isolate;
+  }
+  :where(.bp-mock.is-expanded, .bp-lightbox)::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    pointer-events: none;
+    background-color: var(--bp-ink-faint);
+    -webkit-mask-image: var(--bp-hatch-mask);
+    mask-image: var(--bp-hatch-mask);
+    -webkit-mask-size: var(--bp-hatch-gap) var(--bp-hatch-gap);
+    mask-size: var(--bp-hatch-gap) var(--bp-hatch-gap);
+    -webkit-mask-repeat: repeat;
+    mask-repeat: repeat;
+    -webkit-mask-position: 0 0;
+    mask-position: 0 0;
+  }
+
+  /* ---- Non-fixed hatch surfaces: crisp masked hatch -----------------
+     The invariant callout, preflight gate, empty state, and rejected choice
+     cards/frames used to paint the diagonal hatch as
+     `background-image: var(--bp-hatch)`.
+     WebKit and Chromium anti-alias that 45deg hard-edged repeating gradient
+     differently — the cross-engine pixel diff showed thousands of low-delta
+     fringe pixels along every stroke. The same crisp SVG mask used on the
+     fixed overlay scrims fixes it deterministically: a 7x7 crispEdges stripe
+     (--bp-hatch-mask) tiled over a flat --bp-hatch-ink fill, so both engines
+     rasterize identical on/off pixels. --bp-hatch-ink tracks the gradient's
+     per-theme line color (ink-faint light / edge dark) so the swap is color
+     faithful. Each host sets position + isolation (see those rules) so this
+     negative-z-index ::before paints above the host fill and below content
+     without escaping the card. */
+  :where(
+    .bp-callout--invariant,
+    .bp-preflight__gate,
+    .wp-empty,
+    .bp-choice--stack:has(.bp-choice__pick:checked)
+      .bp-choice__card:not(:has(.bp-choice__pick:checked)),
+    .bp-choice--resolved .bp-choice__card:not([data-resolved]),
+    .bp-choice--gallery:has(.bp-choice__pick:checked)
+      .bp-choice__mock:not(:has(.bp-choice__pick:checked))
+      .bp-choice__mock-frame
+  )::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    pointer-events: none;
+    background-color: var(--bp-hatch-ink);
+    -webkit-mask-image: var(--bp-hatch-mask);
+    mask-image: var(--bp-hatch-mask);
+    -webkit-mask-size: var(--bp-hatch-gap) var(--bp-hatch-gap);
+    mask-size: var(--bp-hatch-gap) var(--bp-hatch-gap);
+    -webkit-mask-repeat: repeat;
+    mask-repeat: repeat;
+    -webkit-mask-position: 0 0;
+    mask-position: 0 0;
   }
+  /* Resolved preflight clears its gate hatch (gate-ready copy replaces it). */
+  :where(.bp-preflight--ready) :where(.bp-preflight__gate)::before {
+    content: none;
+  }
+
   :where(.bp-mock.is-expanded) :where(.bp-mock__frame) {
     width: min(100%, 1120px);
     max-height: 100%;
@@ -3385,8 +3487,8 @@
     justify-items: center;
     gap: var(--bp-space-3);
     padding: var(--bp-lightbox-pad);
-    background-color: var(--bp-scrim);
-    background-image: var(--bp-hatch);
+    background-image: var(--bp-scrim-fill);
+    isolation: isolate;
   }
   :where(.bp-lightbox.is-open) {
     display: grid;
@@ -4155,10 +4257,18 @@
     height: 26px;
     background: var(--bp-fill-amb);
     border-radius: var(--bp-radius-0);
+    /* Explicit four-stop syntax: WebKit mis-resolves the compact
+       multi-position stop shorthand (`color A B`) when A/B are calc()
+       expressions over a custom property (--span), producing sparse or
+       bunched column lines. Splitting each compact stop into two explicit
+       stops removes the shorthand and renders identically in both engines.
+       Same expansion the --bp-hatch token uses. */
     background-image: repeating-linear-gradient(
       to right,
-      oklch(0 0 0 / 0) 0 calc(100% / var(--span, 10) - 1px),
-      var(--bp-edge) calc(100% / var(--span, 10) - 1px) calc(100% / var(--span, 10))
+      oklch(0 0 0 / 0) 0,
+      oklch(0 0 0 / 0) calc(100% / var(--span, 10) - 1px),
+      var(--bp-edge) calc(100% / var(--span, 10) - 1px),
+      var(--bp-edge) calc(100% / var(--span, 10))
     );
   }
   :where(.wp-gantt__bar) {
@@ -4221,7 +4331,10 @@
     border: 1px dashed var(--bp-ink-line);
     border-radius: var(--bp-radius-0);
     background-color: var(--bp-fill-amb);
-    background-image: var(--bp-hatch);
+    /* Hatch via the crisp masked ::before instead of the diagonal gradient
+       (cross-engine AA parity). position + isolation host it. */
+    position: relative;
+    isolation: isolate;
     color: var(--bp-text-secondary);
   }
   :where(.wp-empty__art) { color: var(--bp-ink-soft); margin-bottom: var(--bp-space-1); }
@@ -4286,10 +4399,16 @@
     margin: 0;
   }
   /* Expanded mock floats fullscreen (position: fixed): collapse the host so
-     no empty dotted mat is left behind in the document flow. */
+     no empty dotted mat is left behind in the document flow, and clear any
+     host clipping / board paint so browsers that clip fixed descendants
+     through overflow-hidden ancestors still show the overlay fullscreen. */
   :where(bp-mock:has(.bp-mock.is-expanded)) {
     margin: 0;
     padding: 0;
+    overflow: visible;
+    border-radius: 0;
+    background-color: oklch(1 0 0 / 0);
+    background-image: none;
   }
 
   /* Single-surface specimens read as ONE continuous paper card on the mat;
@@ -4308,17 +4427,19 @@
     background-color: var(--bp-paper);
     background-image: linear-gradient(var(--bp-fill-amb), var(--bp-fill-amb));
   }
-  /* Rejected / set-aside cards use opacity, so the whole card (incl. its
-     hatch) goes translucent and the board bleeds through. Keep the set-aside
-     read via hatch + tag, not element opacity. */
+  /* Rejected / set-aside cards stay fully opaque on the board (opacity:1),
+     so the set-aside read comes from the hatch + tag, not element opacity.
+     The hatch is painted by the crisp masked ::before (shared hatch-mask
+     rule) rather than the diagonal gradient — isolation keeps that ::before's
+     negative z-index inside the card. */
   :where(
     .bp-choice--stack:has(.bp-choice__pick:checked)
       .bp-choice__card:not(:has(.bp-choice__pick:checked)),
     .bp-choice--resolved .bp-choice__card:not([data-resolved])
   ) {
     opacity: 1;
+    isolation: isolate;
     background-color: var(--bp-paper);
-    background-image: var(--bp-hatch);
   }
   :where(
     .bp-choice--gallery:has(.bp-choice__pick:checked)
@@ -4331,8 +4452,9 @@
       .bp-choice__mock:not(:has(.bp-choice__pick:checked))
       .bp-choice__mock-frame
   ) {
+    position: relative;
+    isolation: isolate;
     background-color: var(--bp-paper);
-    background-image: var(--bp-hatch);
   }
 
   /* The compare disclosure sits between transparent siblings (gallery /
@@ -5069,8 +5191,11 @@ body > .site-nav .site-nav__theme:hover {
    ===================================================================== */
 
 /* Modal scrim. Hidden until .is-open; centers the panel near the top of the
-   viewport, the way command palettes sit. Sits above all docs chrome. Uses
-   the same drafting scrim as .bp-lightbox (--bp-scrim + --bp-hatch). */
+   viewport, the way command palettes sit. Sits above all docs chrome. Uses the
+   same drafting scrim as .bp-lightbox: the wash paints on the host as
+   --bp-scrim-fill while the diagonal hatch sits on a masked pseudo-element.
+   This keeps both Safari fixes alive: WebKit paints the solid wash reliably,
+   and the repeating hatch is not rasterized directly on the fixed layer. */
 .docs-search-overlay {
   position: fixed;
   inset: 0;
@@ -5080,8 +5205,24 @@ body > .site-nav .site-nav__theme:hover {
   align-items: flex-start;
   padding: clamp(var(--bp-space-5), 12vh, var(--bp-space-7)) var(--bp-space-4)
     var(--bp-space-4);
-  background-color: var(--bp-scrim);
-  background-image: var(--bp-hatch);
+  background-image: var(--bp-scrim-fill);
+  isolation: isolate;
+}
+.docs-search-overlay::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background-color: var(--bp-ink-faint);
+  -webkit-mask-image: var(--bp-hatch-mask);
+  mask-image: var(--bp-hatch-mask);
+  -webkit-mask-size: var(--bp-hatch-gap) var(--bp-hatch-gap);
+  mask-size: var(--bp-hatch-gap) var(--bp-hatch-gap);
+  -webkit-mask-repeat: repeat;
+  mask-repeat: repeat;
+  -webkit-mask-position: 0 0;
+  mask-position: 0 0;
 }
 .docs-search-overlay.is-open {
   display: flex;