studio-engine 0.54.1 → 0.55.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b79896d29716fe1408c39d86c9e2d19d4e6dc12dd28749ff85054c29e5ba9a77
-  data.tar.gz: 033a9a7e0e4799ef5ed0522e3fb6b6d1652ab4239d7de625add1e24ac81a5386
+  metadata.gz: 203b2f8cf1001d19c7ffb24c778ab0f1bdcb0b9aafa59762ded0ea5689eb2423
+  data.tar.gz: a6dbf4164a79cd6b5de2a9cbee178e5455e55c619dfa7197f0db08ba398aaf5b
 SHA512:
-  metadata.gz: dcd13075e85ee744c86ec901f62e749320f916a72c7c04b1530a5715dcdbcec3adcaa39dc1b8236327bc5a2de4238ef1585cf42853444ff92eeae0ff7cfcc702
-  data.tar.gz: 6d242c947ec1d582202bb53652091f6ab4ed111cadfa721aab578df1f89f7b8b9a9bdb4bcd9f57b5b8a15ba9d8c9200b2358668ec2058d59f0c210072e93a79a
+  metadata.gz: 0bb5c9bebe4977fef13ab139729ebbc5c560b52f31e573d153e63a00a8a40b970519ac783ad51b45773661e182f5dc848e424b4922e5748117c29560fdfc2b20
+  data.tar.gz: 4e16f3663bb43a61139cac420af9a2c265f91c5c5a6f708c32edf1ad5d1e92c6a559b545b148b4e134afe90d614a81de527906988a122b8326b9ae9ef881e6be

data/CHANGELOG.md

@@ -4,6 +4,33 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+### Added
+
+- **`.studio-team-glow` rings a host that paints its own background**, and can
+  carry **two colors**.
+
+  The ring previously needed an opaque CHILD in front to cover its middle,
+  because both wedge layers are pseudo-elements at `z-index: -1 / -2` and CSS
+  paints an element's background BEFORE its negative-z descendants. A live board
+  card cannot supply that child: Turbo targets the card element itself for
+  replace and remove, so a wrapper host is orphaned every time a card leaves the
+  board. The primitive now cuts the host's own box out of both layers
+  (`padding` + `mask-composite`, the trick §1's `.studio-border-glow` already
+  used), so the ring works on the card directly.
+
+  **No-op for the wrapper shape** — its child was already covering that
+  interior. Verified side by side against both live consumers
+  (`style/_modal_specimen` and the hub's release-phase-meter): pixel-equivalent
+  before and after.
+
+  `--studio-team-glow-color-b` colors the SECOND of the two opposed wedges and
+  defaults to the first, so one-color callers see no change and a caller with a
+  pair to show — a Pokémon's two types — gets one per wedge.
+
+  The bloom twin needed care: a mask applies AFTER a filter, so its box carries a
+  transparent border twice the blur radius and its wedges stop at the padding
+  box. Without that room the halo ends on a hard line at its own edge.
+
 ### Fixed
 
 - **`.conic-surface` keeps its wash inside its own box.** The wash was an

data/app/assets/tailwind/studio_engine/engine-motion.css

@@ -507,38 +507,56 @@
 }
 
 /* =============================================================================
-   9b. studio-team-glow — single-color rotating "selected card" ring glow
+   9b. studio-team-glow — rotating "selected card" ring glow, one or two colors
    Ported from turf-monster's per-team selected-card glow (.holo-border-glow):
-   a single-color conic-gradient ring rotates around the element's edge, with a
-   blurred bloom twin behind it. DISTINCT from .studio-border-glow (an animated
-   RAINBOW border) and .studio-glow (a static soft box-shadow halo) — this is the
-   "this card is selected / live" ring, tinted one color.
+   a conic-gradient ring rotates around the element's edge, with a blurred bloom
+   twin behind it. DISTINCT from .studio-border-glow (an animated RAINBOW border)
+   and .studio-glow (a static soft box-shadow halo) — this is the "this card is
+   selected / live" ring.
 
    The color is a CSS var (default the CTA role, so purple on McRitchie Studio),
-   just like TM's per-team --glow-c. The wedge is swept by animating a registered
+   just like TM's per-team --glow-c. TWO opposed wedges travel the edge, and they
+   can carry two colors: --studio-team-glow-color-b defaults to the first, so a
+   one-color caller sees no change, and a caller with a pair to show (a Pokémon's
+   two types) gets one per wedge. The wedges are swept by animating a registered
    @property angle (rotating the GRADIENT, not the element — so no oversized-child
    clipping trick is needed). Opacity is a var (--studio-team-glow-opacity) with a
    transition, so a consumer can fade the glow in/out (the living style guide
    slides it between step cards as a modal's step machine advances).
 
-   THE HOST IS A BARE WRAPPER, NOT THE CARD. Both wedge layers are pseudo-elements
-   at z-index -1 / -2, and CSS paints an element's own background FIRST, then its
-   negative-z descendants on top of it (CSS 2.1 Appendix E, steps 1 and 2). So a
-   background on the HOST cannot cover the wedges — they wash its whole face, and
-   the ring is gone. What covers the middle is an opaque CHILD in front: in-flow
-   descendants paint later (step 3), leaving only the thickness-wide band around
-   the edge. That is TM's holo-wrap / holo-card split, and it is what both
-   consumers ship — the engine's style/_modal_specimen (bare glow wrapper + the
-   opaque .card article) and the hub's release-phase-meter (bare host + the bar's
-   own fill). Demoing it the other way is what shipped a washed card to
-   admin/style; the host also must NOT be clipped by an overflow-hidden ancestor
-   near its border.
-
-   Usage:  <div class="studio-team-glow rounded-xl">
-             <div class="rounded-xl bg-surface p-5">Selected</div>
-           </div>
-           red glow:  style="--studio-team-glow-color: #E11D48"
-   Tune:   --studio-team-glow-color / -opacity / -speed / -thickness / -bloom
+   THE HOST MAY CARRY ITS OWN BACKGROUND — the ring cuts the host's box out of
+   both wedge layers, so only the band around the edge paints. That hole is what
+   makes the primitive work in the two shapes its consumers need:
+
+     · the WRAPPER shape (TM's holo-wrap / holo-card split) — a bare host with an
+       opaque child in front. The engine's style/_modal_specimen and the hub's
+       release-phase-meter both ship this. Unchanged by the hole: the child was
+       already covering that interior.
+     · the CARD shape — the host IS the opaque surface. This is what a live board
+       card needs, because it cannot take a wrapper at all: Turbo targets the card
+       element for both replace and remove, so a wrapper is orphaned every time a
+       card leaves the board.
+
+   Without the hole the card shape is impossible, and not for a tunable reason:
+   both layers are pseudo-elements at z-index -1 / -2, and CSS paints an element's
+   own background FIRST, then its negative-z descendants ON TOP of it (CSS 2.1
+   Appendix E, steps 1 and 2) — so a background on the host is covered BY the
+   wedges, and the ring becomes a wash across the whole face. Only a child, or
+   this hole, can cover the middle.
+
+   The host must still NOT be clipped by an overflow-hidden ancestor near its
+   border, or the ring is cut off with it.
+
+   Usage:  <div class="studio-team-glow rounded-xl bg-surface p-5">Selected</div>
+           wrapper shape, when the face is its own element:
+             <div class="studio-team-glow rounded-xl">
+               <div class="rounded-xl bg-surface p-5">Selected</div>
+             </div>
+           red glow:   style="--studio-team-glow-color: #E11D48"
+           two types:  style="--studio-team-glow-color: #F08030;
+                              --studio-team-glow-color-b: #6890F0"
+   Tune:   --studio-team-glow-color / -color-b / -opacity / -speed / -thickness /
+           -bloom
    ========================================================================== */
 @property --studio-team-glow-angle {
   syntax: "<angle>";
@@ -547,6 +565,11 @@
 }
 .studio-team-glow {
   --studio-team-glow-color: var(--color-cta);
+  /* The SECOND wedge's color. Defaults to the first, so a one-color caller sees
+     no change; a caller with two colors to show (a Pokémon's two types, a pair of
+     brand colors) gets one per wedge. Resolved on this element, so an inline
+     --studio-team-glow-color override feeds this default too. */
+  --studio-team-glow-color-b: var(--studio-team-glow-color);
   --studio-team-glow-opacity: 1;
   --studio-team-glow-speed: 4s;
   --studio-team-glow-thickness: 4px;
@@ -571,14 +594,47 @@
     var(--studio-team-glow-color) 12%,
     transparent 33%,
     transparent 50%,
-    var(--studio-team-glow-color) 62%,
+    var(--studio-team-glow-color-b) 62%,
     transparent 83%
   );
   animation: studio-team-glow-spin var(--studio-team-glow-speed) linear infinite;
+  /* THE HOST'S OWN BOX IS PUNCHED OUT of both wedge layers, so what paints is the
+     band around the edge and nothing else. `padding` makes each layer's CONTENT
+     box exactly the host's box; mask-composite then removes that box from the
+     layer — the same mask trick §1's .studio-border-glow uses.
+     Why it is here: an opaque child in front covers the middle only when the host
+     CAN take a child. A live board card cannot — Turbo targets the card element
+     itself for replace and remove, so a wrapper is orphaned on every remove. With
+     the hole cut here the ring rides the card directly. For a wrapper host this
+     changes nothing visible: the child was already covering that interior. */
+  padding: var(--studio-team-glow-thickness);
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
 }
 .studio-team-glow::after {
-  /* Blurred bloom twin, a touch larger. */
-  inset: calc(-1 * (var(--studio-team-glow-thickness) + 4px));
+  /* Blurred bloom twin, a touch larger: its wedges reach 4px PAST the ring, which
+     is what makes the bloom read as a halo, not a soft edge on the ring. Drop the
+     4px and every WRAPPER consumer's ring visibly lightens (measured: 26% of the
+     pixels on style/_modal_specimen, 13% on the hub's release-phase-meter). The
+     box then carries a transparent BORDER of bloom-reach on top of that, and the
+     mask still holes out the host's box — so the blur
+     spreads outward into that reach and is cut where it has already faded, while
+     the inward half is cut at the host's edge (invisible: that edge is either the
+     card's own or the wrapper child's). Mask applies AFTER filter, which is why
+     the reach has to out-measure the blur — without it the halo ends on a hard
+     line at the layer's own box. */
+  inset: calc(-1 * (var(--studio-team-glow-thickness) + 4px + var(--studio-team-glow-bloom) * 2));
+  padding: calc(var(--studio-team-glow-thickness) + 4px);
+  border: calc(var(--studio-team-glow-bloom) * 2) solid transparent;
+  /* The wedges stop at the padding box (host + ring + the 4px); the border is empty
+     room the blur is allowed to spread into. */
+  background-clip: padding-box;
   z-index: -2;
   filter: blur(var(--studio-team-glow-bloom)) saturate(1.35);
 }

data/app/views/style/_tricks.html.erb

@@ -272,7 +272,7 @@
       <h3 class="text-xl font-bold text-heading">Effects</h3>
       <p class="text-muted text-sm">
         The <code class="font-mono text-2xs">engine-motion.css</code> visual-effect primitives beyond motion -
-        gradient text, a soft glow halo, a single-color rotating <strong>selection glow</strong>
+        gradient text, a soft glow halo, a one- or two-color rotating <strong>selection glow</strong>
         (ported from Turf Monster's selected-team-card ring), frosted glass, and a conic wash. Each is
         themed through the role tokens and tunable via CSS-var knobs.
       </p>
@@ -297,22 +297,18 @@
         </div>
       <% end %>
 
-      <%# The glow host is a BARE wrapper and the opaque face is a CHILD. The ring
-          pseudos sit at z-index -1/-2, and a negative-z descendant paints ABOVE its
-          host's own background — so a background on the HOST washes the whole card
-          face and there is no ring left. The child in front is what covers the
-          middle, exactly as TM's holo-wrap / holo-card split does. See
-          engine-motion.css §9b. %>
+      <%# The CARD shape: the host carries its own background and the ring still
+          rings, because the primitive punches the host's box out of both wedge
+          layers. The WRAPPER shape (bare host + opaque child) is staged by the
+          Modals section's glow cards — both are documented in engine-motion.css
+          §9b. Two wedges travel the edge, so a pair of colors reads as a pair. %>
       <%= render layout: "style/specimen",
-            locals: { klass: ".studio-team-glow  (knob: --studio-team-glow-color)",
-                      usage: %(<div class="studio-team-glow rounded-xl">\n  <div class="rounded-xl bg-surface p-5">Selected</div>\n</div>) } do %>
+            locals: { klass: ".studio-team-glow  (knobs: --studio-team-glow-color / -color-b)",
+                      usage: %(<div class="studio-team-glow rounded-xl bg-surface p-5">Selected</div>\n<div class="studio-team-glow rounded-xl bg-surface p-5"\n     style="--studio-team-glow-color: #F08030; --studio-team-glow-color-b: #6890F0">Fire / Flying</div>) } do %>
         <div class="flex flex-wrap items-center justify-center gap-6">
-          <div class="studio-team-glow rounded-xl">
-            <div class="rounded-xl bg-surface border border-subtle px-5 py-4 text-sm font-semibold text-heading text-center">Selected</div>
-          </div>
-          <div class="studio-team-glow rounded-xl" style="--studio-team-glow-color: #E11D48">
-            <div class="rounded-xl bg-surface border border-subtle px-5 py-4 text-sm font-semibold text-heading text-center">Ravens</div>
-          </div>
+          <div class="studio-team-glow rounded-xl bg-surface border border-subtle px-5 py-4 text-sm font-semibold text-heading text-center">Selected</div>
+          <div class="studio-team-glow rounded-xl bg-surface border border-subtle px-5 py-4 text-sm font-semibold text-heading text-center"
+               style="--studio-team-glow-color: #F08030; --studio-team-glow-color-b: #6890F0">Fire / Flying</div>
         </div>
       <% end %>
 

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.54.1"
+  VERSION = "0.55.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.54.1
+  version: 0.55.0
 platform: ruby
 authors:
 - Alex McRitchie