@pantheon-systems/puck-css 0.12.0 → 0.14.0

package/src/data/data-list-block/data-list.css

@@ -0,0 +1,314 @@
+/**
+ * DataListBlock presentation styles.
+ *
+ * Plain CSS with semantic, consumer-overridable class names — deliberately no
+ * Tailwind, so rendering never depends on a consumer's utility build scanning
+ * this package. Every colour, space, radius, and type value routes through a
+ * `--p1-datalist-*` property so a host can retheme the block without touching
+ * these rules; each one resolves to the matching PDS token, then to a literal
+ * for hosts that don't load PDS (the published page is one of those).
+ *
+ * Deliberately absent: `font-family`. These components render on the customer's
+ * own site, so type inherits from their page. Pinning it to the PDS font would
+ * also make the editor canvas — where PDS *is* loaded — disagree with the
+ * published page it is previewing.
+ */
+
+.p1-datalist,
+.p1-datalist-cards,
+.p1-datalist-listing,
+.p1-datalist-rows {
+  /* Colour. PDS resolves foreground to two tiers, so subtitle and teaser share
+     `foreground-default-secondary`; they stay separate properties here so a host
+     that wants them distinct can say so. */
+  --p1-datalist-color-text: var(--pds-color-foreground-default, #0f172a);
+  --p1-datalist-color-text-muted: var(--pds-color-foreground-default-secondary, #64748b);
+  --p1-datalist-color-text-body: var(--pds-color-foreground-default-secondary, #475569);
+  --p1-datalist-color-border: var(--pds-color-border-default, #e2e8f0);
+  --p1-datalist-color-surface-muted: var(--pds-color-surface-default-secondary, #f1f5f9);
+  --p1-datalist-color-scrim: rgb(0 0 0 / 0.5);
+  --p1-datalist-color-backdrop-text: var(--pds-color-foreground-reverse, #ffffff);
+
+  /* Space */
+  --p1-datalist-space-item-gap: var(--pds-spacing-m, 1rem);
+  --p1-datalist-space-group-gap: var(--pds-spacing-xl, 1.5rem);
+  --p1-datalist-space-card-padding: var(--pds-spacing-s, 0.75rem);
+  --p1-datalist-space-listing-padding: var(--pds-spacing-m, 1rem);
+  --p1-datalist-space-row-padding: var(--pds-spacing-s, 0.75rem);
+  --p1-datalist-space-row-padding-compact: var(--pds-spacing-2xs, 0.5rem);
+  --p1-datalist-space-row-gap: var(--pds-spacing-s, 0.75rem);
+  --p1-datalist-space-empty-padding: var(--pds-spacing-2xl, 2rem);
+  --p1-datalist-space-text-tight: var(--pds-spacing-4xs, 0.25rem);
+  --p1-datalist-space-text-loose: var(--pds-spacing-2xs, 0.5rem);
+
+  /* Line & radius */
+  --p1-datalist-border-width: var(--pds-border-width-default, 1px);
+  --p1-datalist-border-width-placeholder: var(--pds-border-width-thicker, 2px);
+  --p1-datalist-radius: var(--pds-border-radius-card, 0.5rem);
+  --p1-datalist-radius-thumbnail: var(--pds-border-radius-default, 0.25rem);
+
+  /* Type */
+  --p1-datalist-font-size-s: var(--pds-typography-size-s, 0.875rem);
+  --p1-datalist-font-size-l: var(--pds-typography-size-l, 1.125rem);
+  --p1-datalist-font-size-xl: var(--pds-typography-size-xl, 1.25rem);
+  --p1-datalist-font-weight-bold: var(--pds-typography-fw-bold, 700);
+  --p1-datalist-font-weight-semibold: var(--pds-typography-fw-semibold, 600);
+}
+
+/* ============================================
+   Block shell (heading, groups, empty state)
+   ============================================ */
+
+.p1-datalist__heading {
+  margin: 0 0 var(--p1-datalist-space-item-gap);
+  font-size: var(--p1-datalist-font-size-xl);
+  font-weight: var(--p1-datalist-font-weight-bold);
+  color: var(--p1-datalist-color-text);
+}
+
+.p1-datalist__empty {
+  padding: var(--p1-datalist-space-empty-padding);
+  border: var(--p1-datalist-border-width-placeholder) dashed
+    var(--p1-datalist-color-border);
+  border-radius: var(--p1-datalist-radius);
+  text-align: center;
+  color: var(--p1-datalist-color-text-muted);
+}
+
+.p1-datalist__groups {
+  display: flex;
+  flex-direction: column;
+  gap: var(--p1-datalist-space-group-gap);
+}
+
+.p1-datalist__group-label {
+  margin: 0 0 var(--p1-datalist-space-card-padding);
+  font-size: var(--p1-datalist-font-size-l);
+  font-weight: var(--p1-datalist-font-weight-semibold);
+  color: var(--p1-datalist-color-text-body);
+}
+
+.p1-datalist__more {
+  margin-top: var(--p1-datalist-space-card-padding);
+  font-size: var(--p1-datalist-font-size-s);
+  text-align: center;
+  color: var(--p1-datalist-color-text-muted);
+}
+
+/* ============================================
+   Shared item primitives
+   ============================================ */
+
+.p1-datalist-media {
+  overflow: hidden;
+  background: var(--p1-datalist-color-surface-muted);
+}
+
+.p1-datalist-media__img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.p1-datalist-item__icon {
+  display: inline-block;
+  margin-bottom: var(--p1-datalist-space-text-tight);
+  font-size: var(--p1-datalist-font-size-l);
+}
+
+.p1-datalist-item__title {
+  font-weight: var(--p1-datalist-font-weight-bold);
+  color: var(--p1-datalist-color-text);
+}
+
+.p1-datalist-item__subtitle {
+  margin-top: var(--p1-datalist-space-text-tight);
+  font-size: var(--p1-datalist-font-size-s);
+  color: var(--p1-datalist-color-text-muted);
+}
+
+.p1-datalist-item__teaser {
+  margin-top: var(--p1-datalist-space-text-loose);
+  font-size: var(--p1-datalist-font-size-s);
+  color: var(--p1-datalist-color-text-body);
+}
+
+/* ============================================
+   Grid mode — Cards
+   ============================================ */
+
+.p1-datalist-cards {
+  display: grid;
+  gap: var(--p1-datalist-space-item-gap);
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.p1-datalist-cards[data-columns='1'] { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.p1-datalist-cards[data-columns='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.p1-datalist-cards[data-columns='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.p1-datalist-cards[data-columns='4'] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.p1-datalist-cards[data-columns='5'] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+.p1-datalist-cards[data-columns='6'] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+
+.p1-datalist-cards__card {
+  position: relative;
+  overflow: hidden;
+  border: var(--p1-datalist-border-width) solid var(--p1-datalist-color-border);
+  border-radius: var(--p1-datalist-radius);
+}
+
+.p1-datalist-cards__card--horizontal {
+  display: flex;
+}
+
+.p1-datalist-cards__backdrop {
+  position: absolute;
+  inset: 0;
+  background-position: center;
+  background-size: cover;
+}
+
+.p1-datalist-cards__scrim {
+  position: absolute;
+  inset: 0;
+  background: var(--p1-datalist-color-scrim);
+}
+
+.p1-datalist-cards__body {
+  position: relative;
+}
+
+.p1-datalist-cards__body--horizontal {
+  flex: 1;
+  min-width: 0;
+}
+
+.p1-datalist-cards__body--backdrop {
+  z-index: 1;
+  color: var(--p1-datalist-color-backdrop-text);
+}
+
+/* Backdrop cards sit on an image, so the text tokens give way to the
+   overlay colour rather than the surface palette. */
+.p1-datalist-cards__body--backdrop .p1-datalist-item__title,
+.p1-datalist-cards__body--backdrop .p1-datalist-item__subtitle,
+.p1-datalist-cards__body--backdrop .p1-datalist-item__teaser {
+  color: inherit;
+}
+
+.p1-datalist-cards__content {
+  flex: 1;
+  padding: var(--p1-datalist-space-card-padding);
+}
+
+.p1-datalist-cards__media--stacked {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+}
+
+.p1-datalist-cards__media--side {
+  width: 6rem;
+  height: auto;
+  flex-shrink: 0;
+}
+
+/* ============================================
+   List mode — Listing
+   ============================================ */
+
+.p1-datalist-listing {
+  display: flex;
+  flex-direction: column;
+  gap: var(--p1-datalist-space-item-gap);
+}
+
+.p1-datalist-listing--narrow {
+  max-width: 42rem;
+  margin-inline: auto;
+}
+
+.p1-datalist-listing__item {
+  display: flex;
+  overflow: hidden;
+  border: var(--p1-datalist-border-width) solid var(--p1-datalist-color-border);
+  border-radius: var(--p1-datalist-radius);
+}
+
+.p1-datalist-listing__item--reversed {
+  flex-direction: row-reverse;
+}
+
+.p1-datalist-listing__media {
+  width: 12rem;
+  height: auto;
+  flex-shrink: 0;
+}
+
+.p1-datalist-listing__content {
+  flex: 1;
+  padding: var(--p1-datalist-space-listing-padding);
+}
+
+.p1-datalist-listing__content .p1-datalist-item__title {
+  font-size: var(--p1-datalist-font-size-l);
+}
+
+.p1-datalist-listing__content .p1-datalist-item__teaser {
+  font-size: inherit;
+}
+
+/* ============================================
+   Table mode — Rows
+   ============================================ */
+
+.p1-datalist-rows {
+  border: var(--p1-datalist-border-width) solid var(--p1-datalist-color-border);
+  border-radius: var(--p1-datalist-radius);
+}
+
+.p1-datalist-rows__row {
+  display: flex;
+  align-items: center;
+  gap: var(--p1-datalist-space-row-gap);
+  padding: var(--p1-datalist-space-row-padding);
+}
+
+.p1-datalist-rows[data-density='compact'] .p1-datalist-rows__row {
+  padding: var(--p1-datalist-space-row-padding-compact);
+}
+
+.p1-datalist-rows[data-density='compact'] .p1-datalist-rows__content {
+  font-size: var(--p1-datalist-font-size-s);
+}
+
+.p1-datalist-rows__row + .p1-datalist-rows__row {
+  border-top: var(--p1-datalist-border-width) solid
+    var(--p1-datalist-color-border);
+}
+
+.p1-datalist-rows__media {
+  width: 46px;
+  height: 46px;
+  flex-shrink: 0;
+  border-radius: var(--p1-datalist-radius-thumbnail);
+}
+
+.p1-datalist-rows__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.p1-datalist-rows__content .p1-datalist-item__icon {
+  margin-bottom: 0;
+  margin-right: var(--p1-datalist-space-text-tight);
+  font-size: var(--p1-datalist-font-size-s);
+}
+
+.p1-datalist-rows__content .p1-datalist-item__subtitle {
+  margin-top: 0;
+}
+
+.p1-datalist-rows__content .p1-datalist-item__teaser {
+  margin-top: var(--p1-datalist-space-text-tight);
+}

package/src/pds/theme/PuckEditorTheme.css

@@ -1,6 +1,6 @@
 /* PDS canvas isolation: pds-core.css is loaded via document.adoptedStyleSheets
-   in CSSApp.tsx so it is invisible to Puck's canvas iframe scanner.
-   See CSSApp.tsx for the full explanation. */
+   in P1App.tsx so it is invisible to Puck's canvas iframe scanner.
+   See P1App.tsx for the full explanation. */
 
 /**
  * PDS v2 Theme for Puck Editor
@@ -14,7 +14,7 @@
  * across Puck's native chrome (drag handles, drop-zone highlights, field
  * chrome, selection outlines).
  *
- * Prerequisites: PDSv2 CSS is loaded automatically by CSSApp.tsx via
+ * Prerequisites: PDSv2 CSS is loaded automatically by P1App.tsx via
  *   document.adoptedStyleSheets — no host-app import required.
  */
 
@@ -118,7 +118,7 @@
   border-radius: var(--pds-border-radius-button, 3.5rem);
 }
 
-/* Sidebar + plugin rail backgrounds — scoped to the editor wrapper added by CSSApp.tsx */
+/* Sidebar + plugin rail backgrounds — scoped to the editor wrapper added by P1App.tsx */
 .puck-editor-theme [class*="_PuckLayout-nav_"],
 .puck-editor-theme [class*="_Sidebar"] {
   background: var(--pds-color-surface-default-secondary, oklch(0.9702 0 0));
@@ -298,7 +298,7 @@
   overflow: hidden;
 }
 
-/* ── Editor chrome text/background reset (PCC-3456) ──────────────────────
+/* ── Editor chrome text/background reset ──────────────────────
  *
  * 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:

package/src/styles.css

@@ -63,7 +63,7 @@
 }
 
 /* ============================================
-   Version Preview Read-Only Inspector (PCC-3422)
+   Version Preview Read-Only Inspector
    ============================================ */
 
 /* Fields guard: dims all fields and removes interaction (inert attr handles the rest) */

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

@@ -1,195 +0,0 @@
-/**
- * Tests for PuckEditorTheme.css
- *
- * Verifies that the CSS file contains the correct --puck-* to --pds-*
- * variable mappings that retheme Puck's native chrome using PDSv2 tokens.
- *
- * Strategy: read the CSS file directly via fs — the mappings are a static
- * authoring concern, not runtime behaviour, so content assertions are the
- * right layer of confidence here.
- */
-
-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');
-
-function readThemeCSS(): string {
-  return readFileSync(p1Path, 'utf-8');
-}
-
-describe('PuckEditorTheme.css', () => {
-  it('exists and is non-empty', () => {
-    const css = readThemeCSS();
-    expect(css.length).toBeGreaterThan(0);
-  });
-
-  it('applies all mappings within the .puck-editor-theme scope class', () => {
-    const css = readThemeCSS();
-    expect(css).toContain('.puck-editor-theme');
-  });
-
-  describe('neutral color mappings', () => {
-    it('maps --puck-color-white to PDS background default', () => {
-      const css = readThemeCSS();
-      expect(css).toContain('--puck-color-white');
-      expect(css).toContain('var(--pds-color-surface-default)');
-    });
-
-    it('maps --puck-color-black to PDS foreground default', () => {
-      const css = readThemeCSS();
-      expect(css).toContain('--puck-color-black');
-      expect(css).toContain('var(--pds-color-foreground-default)');
-    });
-  });
-
-  describe('grey scale mappings', () => {
-    it('maps --puck-color-grey-01 to PDS secondary background', () => {
-      const css = readThemeCSS();
-      expect(css).toContain('--puck-color-grey-01');
-      expect(css).toContain('var(--pds-color-surface-default-secondary)');
-    });
-
-    it('maps --puck-color-grey-03 to PDS secondary foreground', () => {
-      const css = readThemeCSS();
-      expect(css).toMatch(
-        /--puck-color-grey-03:\s*var\(--pds-color-foreground-default-secondary\)/,
-      );
-    });
-
-    it('maps --puck-color-grey-05 to PDS input border', () => {
-      const css = readThemeCSS();
-      expect(css).toContain('--puck-color-grey-05');
-      expect(css).toContain('var(--pds-color-border-input)');
-    });
-
-    it('maps --puck-color-grey-09 to PDS secondary foreground', () => {
-      const css = readThemeCSS();
-      expect(css).toContain('--puck-color-grey-09');
-      expect(css).toContain('var(--pds-color-foreground-default-secondary)');
-    });
-
-    it('maps --puck-color-grey-11 to PDS foreground default', () => {
-      const css = readThemeCSS();
-      expect(css).toContain('--puck-color-grey-11');
-      expect(css).toContain('var(--pds-color-foreground-default)');
-    });
-
-    it('uses an oklch fallback for grey-02 (no direct PDS token)', () => {
-      const css = readThemeCSS();
-      expect(css).toContain('--puck-color-grey-02');
-      expect(css).toMatch(/--puck-color-grey-02:\s*oklch/);
-    });
-
-    it('uses an oklch fallback for grey-04 (no direct PDS token)', () => {
-      const css = readThemeCSS();
-      expect(css).toContain('--puck-color-grey-04');
-      expect(css).toMatch(/--puck-color-grey-04:\s*oklch/);
-    });
-  });
-
-  describe('interactive color mappings', () => {
-    it('maps --puck-color-azure-04 to PDS foreground default (not purple interactive-link)', () => {
-      const css = readThemeCSS();
-      expect(css).toContain('--puck-color-azure-04');
-      // PDS v2 interactive-link-default is purple — we intentionally map to
-      // fg-default (near-black) to avoid purple in the UI.
-      expect(css).toContain('--puck-color-azure-04: var(--pds-color-foreground-default)');
-    });
-
-    it('maps --puck-color-azure-05 to PDS foreground default (not purple interactive-link)', () => {
-      const css = readThemeCSS();
-      expect(css).toContain('--puck-color-azure-05');
-      expect(css).toContain('--puck-color-azure-05: var(--pds-color-foreground-default)');
-    });
-  });
-
-  describe('status color mappings', () => {
-    it('maps --puck-color-rose-04 to PDS critical foreground', () => {
-      const css = readThemeCSS();
-      expect(css).toContain('--puck-color-rose-04');
-      expect(css).toContain('var(--pds-color-status-critical-foreground)');
-    });
-
-    it('maps --puck-color-green-04 to PDS success foreground', () => {
-      const css = readThemeCSS();
-      expect(css).toContain('--puck-color-green-04');
-      expect(css).toContain('var(--pds-color-status-success-foreground)');
-    });
-  });
-
-  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();
-      expect(css).toContain('--puck-font-family');
-      expect(css).toContain('var(--pds-typography-ff-default)');
-    });
-
-    it('maps --puck-font-family-monospaced to PDS code font family', () => {
-      const css = readThemeCSS();
-      expect(css).toContain('--puck-font-family-monospaced');
-      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-foreground-default[^)]*\)[^}]*background:\s*var\(--pds-color-surface-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('paints the sticky richtext toolbar so scrolled content does not show through', () => {
-      const css = readThemeCSS();
-      // The toolbar wrapper is position:sticky with no background; without an
-      // opaque fill the ProseMirror text scrolls under it and bleeds through.
-      expect(css).toMatch(
-        /\.puck-editor-theme \[class\*="_RichTextEditor-menu_"\]\s*\{[^}]*background:\s*var\(--puck-color-white\)[^}]*\}/,
-      );
-    });
-
-    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*\{/);
-    });
-  });
-});