@psnext/design-system 1.4.0 → 1.5.1

package/dist/styles/base.css

@@ -3,55 +3,61 @@
    shares the same baseline (border color, focus outline, page
    surface). Lives in @layer base, so component/app utilities still
    override it per-element.
+
+   Add class="ds-no-base" to any element to punch a hole in these
+   defaults — that element and its entire subtree are excluded.
+   Multiple holes are independent (Swiss cheese, not a donut).
    ============================================================ */
 
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
+@scope (html) to (.ds-no-base) {
+  @layer base {
+    * {
+      @apply border-border outline-ring/50;
+    }
+    body {
+      @apply bg-background text-foreground;
+    }
 
-  /* Raw heading tags pick up the heading type scale by default (Tailwind's
-     preflight otherwise resets h1–h6 to inherit). h1–h4 are Regular, h5–h6
-     Medium — matching the Heading primitive. In @layer base, so any utility
-     class (text-2xl, font-bold, the Heading component's size classes, …) still
-     overrides per element. */
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-family: var(--font-heading);
-    font-weight: 400;
-  }
-  h1 {
-    font-size: var(--heading-1-font-size);
-    line-height: var(--heading-1-line-height);
-  }
-  h2 {
-    font-size: var(--heading-2-font-size);
-    line-height: var(--heading-2-line-height);
-  }
-  h3 {
-    font-size: var(--heading-3-font-size);
-    line-height: var(--heading-3-line-height);
-  }
-  h4 {
-    font-size: var(--heading-4-font-size);
-    line-height: var(--heading-4-line-height);
-  }
-  h5 {
-    font-size: var(--heading-5-font-size);
-    line-height: var(--heading-5-line-height);
-    font-weight: 500;
-  }
-  h6 {
-    font-size: var(--heading-6-font-size);
-    line-height: var(--heading-6-line-height);
-    font-weight: 500;
+    /* Raw heading tags pick up the heading type scale by default (Tailwind's
+       preflight otherwise resets h1–h6 to inherit). h1–h4 are Regular, h5–h6
+       Medium — matching the Heading primitive. In @layer base, so any utility
+       class (text-2xl, font-bold, the Heading component's size classes, …) still
+       overrides per element. */
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-family: var(--font-heading);
+      font-weight: 400;
+    }
+    h1 {
+      font-size: var(--heading-1-font-size);
+      line-height: var(--heading-1-line-height);
+    }
+    h2 {
+      font-size: var(--heading-2-font-size);
+      line-height: var(--heading-2-line-height);
+    }
+    h3 {
+      font-size: var(--heading-3-font-size);
+      line-height: var(--heading-3-line-height);
+    }
+    h4 {
+      font-size: var(--heading-4-font-size);
+      line-height: var(--heading-4-line-height);
+    }
+    h5 {
+      font-size: var(--heading-5-font-size);
+      line-height: var(--heading-5-line-height);
+      font-weight: 500;
+    }
+    h6 {
+      font-size: var(--heading-6-font-size);
+      line-height: var(--heading-6-line-height);
+      font-weight: 500;
+    }
   }
 }
 

package/dist/styles/typography.css

@@ -9,128 +9,133 @@
    `class` is component-managed and left alone. Bare tags (what a
    markdown renderer emits) get a readable default here.
 
+   Gated by @scope (html) to (.ds-no-base) — add ds-no-base to any
+   element to punch a hole in these defaults for that subtree.
+
    `@layer base` so component/app utilities always win. All values
    come from the design-system tokens.
    ============================================================ */
 
-@layer base {
-  /* ── Vertical rhythm (block flow) ─────────────────────────── */
-  :where(p, ul, ol, blockquote, pre, table, hr, figure):not([class]):not([data-slot]) {
-    margin-block: 0 1rem;
-  }
-  :where(h1, h2, h3, h4, h5, h6):not([class]):not([data-slot]) {
-    margin-block: 1.5rem 0.5rem;
-  }
-  /* No leading gap on the first block of a flow container. */
-  :where(p, ul, ol, blockquote, pre, table, hr, figure, h1, h2, h3, h4, h5, h6):not(
-      [class]
-    ):first-child {
-    margin-block-start: 0;
-  }
+@scope (html) to (.ds-no-base) {
+  @layer base {
+    /* ── Vertical rhythm (block flow) ─────────────────────────── */
+    :where(p, ul, ol, blockquote, pre, table, hr, figure):not([class]):not([data-slot]) {
+      margin-block: 0 1rem;
+    }
+    :where(h1, h2, h3, h4, h5, h6):not([class]):not([data-slot]) {
+      margin-block: 1.5rem 0.5rem;
+    }
+    /* No leading gap on the first block of a flow container. */
+    :where(p, ul, ol, blockquote, pre, table, hr, figure, h1, h2, h3, h4, h5, h6):not(
+        [class]
+      ):first-child {
+      margin-block-start: 0;
+    }
 
-  /* ── Paragraph / inline text ──────────────────────────────── */
-  p:not([class]):not([data-slot]) {
-    font-size: var(--paragraph-regular-font-size);
-    line-height: var(--paragraph-regular-line-height);
-  }
-  a:not([class]):not([data-slot]) {
-    color: inherit;
-    text-decoration: underline;
-    text-underline-offset: 2px;
-  }
-  a:not([class]):not([data-slot]):hover {
-    text-decoration-thickness: 2px;
-  }
-  strong:not([class]):not([data-slot]),
-  b:not([class]):not([data-slot]) {
-    font-weight: 600;
-  }
-  em:not([class]):not([data-slot]),
-  i:not([class]):not([data-slot]) {
-    font-style: italic;
-  }
-  small:not([class]):not([data-slot]) {
-    font-size: var(--paragraph-small-font-size);
-  }
+    /* ── Paragraph / inline text ──────────────────────────────── */
+    p:not([class]):not([data-slot]) {
+      font-size: var(--paragraph-regular-font-size);
+      line-height: var(--paragraph-regular-line-height);
+    }
+    a:not([class]):not([data-slot]) {
+      color: inherit;
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+    a:not([class]):not([data-slot]):hover {
+      text-decoration-thickness: 2px;
+    }
+    strong:not([class]):not([data-slot]),
+    b:not([class]):not([data-slot]) {
+      font-weight: 600;
+    }
+    em:not([class]):not([data-slot]),
+    i:not([class]):not([data-slot]) {
+      font-style: italic;
+    }
+    small:not([class]):not([data-slot]) {
+      font-size: var(--paragraph-small-font-size);
+    }
 
-  /* ── Lists ────────────────────────────────────────────────── */
-  ul:not([class]):not([data-slot]),
-  ol:not([class]):not([data-slot]) {
-    padding-inline-start: 1.5rem;
-  }
-  ul:not([class]):not([data-slot]) {
-    list-style: disc;
-  }
-  ol:not([class]):not([data-slot]) {
-    list-style: decimal;
-  }
-  li:not([class]):not([data-slot]) {
-    margin-block: 0.25rem;
-  }
-  /* Nested lists tighten up and lose the extra block margin. */
-  :where(ul, ol):not([class]):not([data-slot]) :where(ul, ol):not([class]):not([data-slot]) {
-    margin-block: 0.25rem 0;
-  }
+    /* ── Lists ────────────────────────────────────────────────── */
+    ul:not([class]):not([data-slot]),
+    ol:not([class]):not([data-slot]) {
+      padding-inline-start: 1.5rem;
+    }
+    ul:not([class]):not([data-slot]) {
+      list-style: disc;
+    }
+    ol:not([class]):not([data-slot]) {
+      list-style: decimal;
+    }
+    li:not([class]):not([data-slot]) {
+      margin-block: 0.25rem;
+    }
+    /* Nested lists tighten up and lose the extra block margin. */
+    :where(ul, ol):not([class]):not([data-slot]) :where(ul, ol):not([class]):not([data-slot]) {
+      margin-block: 0.25rem 0;
+    }
 
-  /* ── Code ─────────────────────────────────────────────────── */
-  code:not([class]):not([data-slot]),
-  kbd:not([class]):not([data-slot]),
-  samp:not([class]):not([data-slot]) {
-    font-family: var(--font-definitions-font-family-monospace);
-    font-size: 0.875em;
-  }
-  /* Inline code chip (a bare <code> not inside a <pre>). */
-  :not(pre) > code:not([class]):not([data-slot]) {
-    border-radius: var(--rounded-sm);
-    background-color: var(--muted);
-    padding: 0.125rem 0.375rem;
-  }
-  pre:not([class]):not([data-slot]) {
-    overflow-x: auto;
-    border-radius: var(--rounded-lg);
-    background-color: var(--muted);
-    padding: 1rem;
-    font-size: var(--paragraph-small-font-size);
-    line-height: var(--paragraph-small-line-height);
-  }
-  pre:not([class]):not([data-slot]) code {
-    font-family: var(--font-definitions-font-family-monospace);
-    background-color: transparent;
-    padding: 0;
-  }
+    /* ── Code ─────────────────────────────────────────────────── */
+    code:not([class]):not([data-slot]),
+    kbd:not([class]):not([data-slot]),
+    samp:not([class]):not([data-slot]) {
+      font-family: var(--font-definitions-font-family-monospace);
+      font-size: 0.875em;
+    }
+    /* Inline code chip (a bare <code> not inside a <pre>). */
+    :not(pre) > code:not([class]):not([data-slot]) {
+      border-radius: var(--rounded-sm);
+      background-color: var(--muted);
+      padding: 0.125rem 0.375rem;
+    }
+    pre:not([class]):not([data-slot]) {
+      overflow-x: auto;
+      border-radius: var(--rounded-lg);
+      background-color: var(--muted);
+      padding: 1rem;
+      font-size: var(--paragraph-small-font-size);
+      line-height: var(--paragraph-small-line-height);
+    }
+    pre:not([class]):not([data-slot]) code {
+      font-family: var(--font-definitions-font-family-monospace);
+      background-color: transparent;
+      padding: 0;
+    }
 
-  /* ── Blockquote ───────────────────────────────────────────── */
-  blockquote:not([class]):not([data-slot]) {
-    border-inline-start: 3px solid var(--border);
-    padding-inline-start: 1rem;
-    color: var(--muted-foreground);
-    font-style: italic;
-  }
+    /* ── Blockquote ───────────────────────────────────────────── */
+    blockquote:not([class]):not([data-slot]) {
+      border-inline-start: 3px solid var(--border);
+      padding-inline-start: 1rem;
+      color: var(--muted-foreground);
+      font-style: italic;
+    }
 
-  /* ── Rule / media ─────────────────────────────────────────── */
-  hr:not([class]):not([data-slot]) {
-    border: 0;
-    border-top: 1px solid var(--border);
-  }
-  img:not([class]):not([data-slot]),
-  video:not([class]):not([data-slot]) {
-    max-width: 100%;
-    height: auto;
-    border-radius: var(--rounded-lg);
-  }
+    /* ── Rule / media ─────────────────────────────────────────── */
+    hr:not([class]):not([data-slot]) {
+      border: 0;
+      border-top: 1px solid var(--border);
+    }
+    img:not([class]):not([data-slot]),
+    video:not([class]):not([data-slot]) {
+      max-width: 100%;
+      height: auto;
+      border-radius: var(--rounded-lg);
+    }
 
-  /* ── Tables ───────────────────────────────────────────────── */
-  table:not([class]):not([data-slot]) {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: var(--paragraph-small-font-size);
-  }
-  :where(th, td):not([class]):not([data-slot]) {
-    border-bottom: 1px solid var(--border);
-    padding: 0.5rem 0.75rem;
-    text-align: start;
-  }
-  th:not([class]):not([data-slot]) {
-    font-weight: 600;
+    /* ── Tables ───────────────────────────────────────────────── */
+    table:not([class]):not([data-slot]) {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: var(--paragraph-small-font-size);
+    }
+    :where(th, td):not([class]):not([data-slot]) {
+      border-bottom: 1px solid var(--border);
+      padding: 0.5rem 0.75rem;
+      text-align: start;
+    }
+    th:not([class]):not([data-slot]) {
+      font-weight: 600;
+    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@psnext/design-system",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "description": "Sapient AI Products design system — primitives, patterns, and layouts.",
   "license": "UNLICENSED",
   "private": false,