@psnext/design-system 1.4.0 → 1.5.0

package/dist/styles/typography.css

@@ -9,128 +9,134 @@
    `class` is component-managed and left alone. Bare tags (what a
    markdown renderer emits) get a readable default here.
 
+   Also gated by body:not(.ds-no-base) — apps incrementally migrating
+   to the design system can add that class to opt out of all base defaults.
+
    `@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;
-  }
+  body:not(.ds-no-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.0",
   "description": "Sapient AI Products design system — primitives, patterns, and layouts.",
   "license": "UNLICENSED",
   "private": false,