@psnext/design-system 1.5.0 → 1.5.1

package/dist/styles/typography.css

@@ -9,88 +9,87 @@
    `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.
+   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 {
-  body:not(.ds-no-base) {
+@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]) {
+    :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]) {
+    :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(
+    :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]) {
+    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]) {
+    a:not([class]):not([data-slot]) {
       color: inherit;
       text-decoration: underline;
       text-underline-offset: 2px;
     }
-    & a:not([class]):not([data-slot]):hover {
+    a:not([class]):not([data-slot]):hover {
       text-decoration-thickness: 2px;
     }
-    & strong:not([class]):not([data-slot]),
-    & b:not([class]):not([data-slot]) {
+    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]) {
+    em:not([class]):not([data-slot]),
+    i:not([class]):not([data-slot]) {
       font-style: italic;
     }
-    & small:not([class]):not([data-slot]) {
+    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]) {
+    ul:not([class]):not([data-slot]),
+    ol:not([class]):not([data-slot]) {
       padding-inline-start: 1.5rem;
     }
-    & ul:not([class]):not([data-slot]) {
+    ul:not([class]):not([data-slot]) {
       list-style: disc;
     }
-    & ol:not([class]):not([data-slot]) {
+    ol:not([class]):not([data-slot]) {
       list-style: decimal;
     }
-    & li:not([class]):not([data-slot]) {
+    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]) {
+    :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]) {
+    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]) {
+    :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]) {
+    pre:not([class]):not([data-slot]) {
       overflow-x: auto;
       border-radius: var(--rounded-lg);
       background-color: var(--muted);
@@ -98,14 +97,14 @@
       font-size: var(--paragraph-small-font-size);
       line-height: var(--paragraph-small-line-height);
     }
-    & pre:not([class]):not([data-slot]) code {
+    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]) {
+    blockquote:not([class]):not([data-slot]) {
       border-inline-start: 3px solid var(--border);
       padding-inline-start: 1rem;
       color: var(--muted-foreground);
@@ -113,29 +112,29 @@
     }
 
     /* ── Rule / media ─────────────────────────────────────────── */
-    & hr:not([class]):not([data-slot]) {
+    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]) {
+    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]) {
+    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]) {
+    :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]) {
+    th:not([class]):not([data-slot]) {
       font-weight: 600;
     }
   }

package/package.json

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