npm - @pantheon-systems/puck-css - Versions diffs - 0.8.0 → 0.9.0 - Mend

@pantheon-systems/puck-css 0.8.0 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (356) hide show

package/src/pds/theme/PuckEditorTheme.css CHANGED Viewed

@@ -142,6 +142,10 @@
   --puck-color-grey-04: var(--pds-color-fg-default);
 }
+.puck-editor-theme [class*="_Sidebar"] {
+  scrollbar-gutter: stable;
+}
 /* ── Plugin rail nav icon normalization ─────────────────────────────────── */
 /* All icons in the left nav rail must be a uniform 20×20px.
    Puck's native SVGs, PDS Icon SVGs, and our mask-image pseudo-elements
@@ -277,3 +281,80 @@
   background-color: #000000 !important;
   color: #ffffff !important;
 }
+/* ── Canvas: grey gutter around a rounded page ────────────────────────────
+   The canvas (_PuckCanvas_) already has a grey background (grey-11), but in
+   full-screen mode Puck zeroes its padding so the page fills it edge-to-edge
+   and the grey never shows. Restoring a little padding reveals that grey as
+   a gutter around the page; rounding the inner _PuckCanvas-root_ gives the
+   floating-page look. The [class*="_PuckCanvas_"] selector matches only the
+   outer element (children use a hyphen after "Canvas"); higher specificity
+   than Puck's own ._PuckCanvas--fullScreen_ so the padding wins. */
+.puck-editor-theme [class*="_PuckCanvas_"] {
+  padding: 8px;
+}
+.puck-editor-theme [class*="_PuckCanvas-root_"] {
+  border-radius: 8px;
+  overflow: hidden;
+}
+/* ── Editor chrome text/background reset (PCC-3456) ──────────────────────
+ *
+ * Root cause: recent design-library "dark-canon" token waves make the host
+ * app's own body dark (e.g. body { color: var(--color-text); background:
+ * var(--color-surface) }, resolving to white-on-black). Puck ships plenty of
+ * chrome elements — e.g. @puckeditor/core's ._DrawerItem-name_ — that declare
+ * no color of their own and simply inherit whatever the ambient text color
+ * is. Nothing between <body> and those elements (including Puck's own
+ * `._Puck_` root, which sets layout vars but no color) intercepts that
+ * inheritance, so the new dark host theme cascades straight through and
+ * turns chrome text white-on-light — unreadable.
+ *
+ * Fix: pin an explicit light foreground/background on `.puck-editor-theme`
+ * itself using the same PDS light-theme tokens already used elsewhere in
+ * this file (grey-11/12 above), matching the pds `data-rm-theme="light"`
+ * editor chrome regardless of whatever theme the host page's <body> is on.
+ * `color` inherits down through every chrome descendant that doesn't set
+ * its own, exactly reversing the leak.
+ *
+ * Scoping: this file is a real <style>/<link> stylesheet in the parent
+ * document (unlike pds-core.css, which is loaded via adoptedStyleSheets
+ * specifically to stay invisible to Puck — see P1App.tsx), so Puck's canvas
+ * iframe scanner (`collectStyles()`) DOES copy it into the preview iframe's
+ * document, same as every other rule here. Scoping to `.puck-editor-theme`
+ * (never a bare `body` selector) is what keeps that copy inert: the iframe
+ * renders the previewed page's own DOM, which has no `.puck-editor-theme`
+ * element in it, so the selector simply never matches there and the
+ * preview keeps the site's own (possibly dark) theme untouched. A bare
+ * `body { color: #111; background: #fff }` rule — as originally proposed —
+ * would instead match the iframe's own <body> directly once copied in,
+ * forcing every preview into a light theme regardless of the real site's
+ * design and reintroducing the same class of leak in the opposite
+ * direction.
+ */
+.puck-editor-theme {
+  color: var(--pds-color-fg-default, #23232d);
+  background: var(--pds-color-bg-default, #fff);
+}
+/* ── AI chat panel: fill the inspector rail ──────────────────────────────────
+ * `SidebarSection-content` is a block container and Puck's fields <form> has no
+ * height of its own, so the panel stopped at its content height with the
+ * composer floating mid-rail. Flex columns carry the rail's height down to it;
+ * `min-height: 0` keeps the scrolling inside the transcript.
+ *
+ * Scoped to the panel's marker attribute: the ordinary field list relies on
+ * natural flow in the rail's scroll container, and stretching it would clip.
+ */
+.puck-editor-theme [class*='_SidebarSection_']:has([data-p1-ai-panel]) {
+  height: 100%;
+  min-height: 0;
+}
+.puck-editor-theme [class*='_SidebarSection-content_']:has([data-p1-ai-panel]),
+.puck-editor-theme [class*='_PuckFields_']:has([data-p1-ai-panel]) {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}

package/src/pds/theme/PuckEditorTheme.test.ts CHANGED Viewed

@@ -9,10 +9,10 @@
  * right layer of confidence here.
  */
-import { describe, it, expect } from 'vitest';
 import { readFileSync } from 'fs';
 import { dirname, join } from 'path';
 import { fileURLToPath } from 'url';
+import { describe, it, expect } from 'vitest';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const p1Path = join(__dirname, 'PuckEditorTheme.css');
@@ -121,6 +121,21 @@ describe('PuckEditorTheme.css', () => {
     });
   });
+  describe('canvas layout', () => {
+    it('reveals the canvas grey background as a gutter via padding', () => {
+      const css = readThemeCSS();
+      // Matches only the outer _PuckCanvas_ element (children use a hyphen).
+      expect(css).toMatch(/\[class\*="_PuckCanvas_"\]\s*\{[^}]*padding:\s*8px/);
+    });
+    it('rounds and clips the inner page (_PuckCanvas-root_)', () => {
+      const css = readThemeCSS();
+      expect(css).toMatch(
+        /\[class\*="_PuckCanvas-root_"\]\s*\{[^}]*border-radius:\s*8px[^}]*overflow:\s*hidden/,
+      );
+    });
+  });
   describe('typography mappings', () => {
     it('maps --puck-font-family to PDS default font family', () => {
       const css = readThemeCSS();
@@ -134,4 +149,38 @@ describe('PuckEditorTheme.css', () => {
       expect(css).toContain('var(--pds-typography-ff-code)');
     });
   });
+  describe('editor chrome text/background reset (PCC-3456)', () => {
+    it('pins an explicit light foreground and background on .puck-editor-theme itself', () => {
+      const css = readThemeCSS();
+      // Must be the bare `.puck-editor-theme` selector (not an attribute-scoped
+      // descendant), so `color` inherits down to every chrome element that
+      // declares no color of its own (e.g. @puckeditor/core's _DrawerItem-name_).
+      expect(css).toMatch(
+        /(?<![^\s{};])\.puck-editor-theme\s*\{[^}]*color:\s*var\(--pds-color-fg-default[^)]*\)[^}]*background:\s*var\(--pds-color-bg-default[^)]*\)[^}]*\}/,
+      );
+    });
+    it('reserves the sidebar scrollbar gutter so expanding a field group does not reflow', () => {
+      const css = readThemeCSS();
+      // The sidebar is the scroll container, so an arriving scrollbar reclaims
+      // its width and shifts every field. Reserving the gutter is what keeps a
+      // collapsible field group from moving the panel when it expands.
+      expect(css).toMatch(
+        /\.puck-editor-theme \[class\*="_Sidebar"\]\s*\{[^}]*scrollbar-gutter:\s*stable[^}]*\}/,
+      );
+    });
+    it('does not use a bare body selector, which would leak into the preview iframe', () => {
+      const css = readThemeCSS();
+      // The preview iframe renders its own <body>. Because this stylesheet is a
+      // real <style>/<link> tag that Puck's collectStyles() copies into that
+      // iframe, a bare `body { ... }` rule here would match the iframe's body
+      // directly and force every previewed page into this light theme.
+      // Strip comments first — the file's explanatory comments intentionally
+      // quote a `body { ... }` example of what NOT to do.
+      const cssWithoutComments = css.replace(/\/\*[\s\S]*?\*\//g, '');
+      expect(cssWithoutComments).not.toMatch(/(^|\s|\})body\s*\{/);
+    });
+  });
 });