@encorekit/web-sdk 2.0.1 → 2.0.2

package/types/ui/styles.d.ts

@@ -26,16 +26,26 @@ export declare const BREAKPOINTS: {
  * track Figma frame 18304:2399 (393×852). Where they disagree the Figma wins — see
  * the PR for the itemised list. Web has no SDUI engine, so every value is hand-tracked.
  *
- * SHEET BACKGROUND, three layers, top-most first:
- *   1. The Figma's radial glow — a 346px circle of #B728F5 @ 12%, Gaussian-blurred
- *      (stdDeviation 102), centred at (189, −38), just above the top edge. Rendered
- *      as a soft radial rather than a real blur: a filter would cost a full-surface
- *      repaint for what is a completely static wash.
- *   2. The variant's accent wash — its four stops, 0.14 → 0.05 → 0 → 0.
- *   3. The variant's base canvas — surface → surface → background → background.
- *   Layers 2 and 3 are the variant's two stacked full-bleed gradients. Alpha is only
- *   ever composited against layer 3, never the host page's backdrop: an accent tint
- *   over an unknown ground is what rendered near-black in night mode (backend #426).
+ * SHEET BACKGROUND IS FLAT — a deliberate divergence from both the Figma and the
+ * variant, on Junaid's call. The sheet used to layer the Figma's radial brand glow
+ * over the variant's two stacked full-bleed gradients (an accent wash and a
+ * surface → background canvas); all of it is gone. `.thankyou--reward` now declares
+ * no background at all, exactly like the base `.thankyou`, so the sheet inherits the
+ * modal's `--encore-bg-color` and follows a publisher's theme instead of a colour
+ * this file paints. The brand custom properties stay — they feed the dot, the arrow
+ * focus ring, the CTA gradient and the card tint, none of which are background.
+ *
+ * `isolation: isolate` went with the layers. It was there so the confetti canvas
+ * (z-index 0) and the content (z-index 1) resolved inside the reward root rather than
+ * the modal's stacking context. Measured in Chrome after the removal: the topmost
+ * element over the title, the close button and the CTA is identical with and without
+ * it, because the canvas and the content are positioned siblings whose own z-indexes
+ * already order them, and the close button's z-index 10 still wins either way.
+ * `position: relative` STAYS — it is the canvas's declared positioning context for
+ * `inset: 0`. Its box happens to measure the same without it today only because the
+ * reward root exactly fills the modal; that coincidence ends the moment the modal
+ * scrolls, at which point `inset: 0` would size to the modal's viewport instead of
+ * the sheet.
  *
  * TEXT COLOUR stays on theme tokens rather than the Figma's #292D32 / #051E34. The
  * variant's own dark-mode note is explicit that every mode-derived colour must remain
@@ -59,17 +69,17 @@ export declare const BREAKPOINTS: {
  *
  * DESKTOP WIDTH. The design is a 393-wide phone frame; on the desktop modal
  * (max-width 800) the content column holds 393 and centres, so the hero keeps its
- * proportions instead of stranding a 210px card in an 800px sheet. The background
- * stays full-bleed — only the content column is constrained. Content sits at
+ * proportions instead of stranding a 210px card in an 800px sheet. Content sits at
  * z-index 1 so it clears the confetti canvas, matching the variant's zStack order
- * (gradients → confetti → content).
+ * (confetti → content).
  */
 /**
  * The reward sheet's brand pair, read off the Figma (frame 18304:2399).
  *
  * `#B728F5 → #6515ED` is the primary CTA's gradient (node 18304:2417, 98.22°), and
- * `#B728F5` is also the active dot and the radial glow behind the header — one accent
- * for the whole surface, which is why it is one variable rather than three literals.
+ * `#B728F5` is also the active dot, the arrow focus ring and the card-tint default —
+ * one accent for the whole surface, which is why it is one variable rather than three
+ * literals. It no longer paints any background: the sheet is flat (see above).
  *
  * NOT `--encore-primary-color`. `streaksCarousel.json` fills this CTA with a FLAT
  * `accent` (the publisher's brand colour) at `cornerRadius: 12`; the Figma shows this

package/types/ui/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAWH,eAAO,MAAM,OAAO;;;CAGV,CAAC;AAGX,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAEX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AAEH;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,YAAY,CAAC;AACtC,eAAO,MAAM,iBAAiB,YAAY,CAAC;AAC3C,6DAA6D;AAC7D,eAAO,MAAM,gBAAgB,YAAY,CAAC;AAE1C;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB;;;;IAI/B,0FAA0F;;CAElF,CAAC;AAEX;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA8qDD;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,GAAE,cAAmB,GAAG,IAAI,CAgB7D;AAED;;GAEG;AACH,wBAAgB,YAAY,IAAI,IAAI,CAMnC;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,CAUvD;AAED;;GAEG;AACH,wBAAgB,EAAE,CAAC,GAAG,OAAO,EAAE,MAAM,EAAE,GAAG,MAAM,CAE/C;AAED;;GAEG;AACH,wBAAgB,GAAG,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAE7C"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAWH,eAAO,MAAM,OAAO;;;CAGV,CAAC;AAGX,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAEX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AAEH;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,YAAY,YAAY,CAAC;AACtC,eAAO,MAAM,iBAAiB,YAAY,CAAC;AAC3C,6DAA6D;AAC7D,eAAO,MAAM,gBAAgB,YAAY,CAAC;AAE1C;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB;;;;IAI/B,0FAA0F;;CAElF,CAAC;AAEX;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAwpDD;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,GAAE,cAAmB,GAAG,IAAI,CAgB7D;AAED;;GAEG;AACH,wBAAgB,YAAY,IAAI,IAAI,CAMnC;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,CAUvD;AAED;;GAEG;AACH,wBAAgB,EAAE,CAAC,GAAG,OAAO,EAAE,MAAM,EAAE,GAAG,MAAM,CAE/C;AAED;;GAEG;AACH,wBAAgB,GAAG,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAE7C"}