@stainless-api/ui-primitives 0.1.0-beta.7 → 0.1.0-beta.9

package/src/styles/theme.css

@@ -1,6 +1,6 @@
-@layer stl-ui {
+@layer stl-ui.tokens {
   /* Swatches - Light */
-  :root[data-theme='light'] {
+  :root {
     --stl-ui-background: var(--stl-ui-swatch-gray-white);
     --stl-ui-card-background: var(--stl-ui-swatch-gray-white);
     --stl-ui-muted-background: var(--stl-ui-swatch-gray-gray-8);

package/src/styles/typography.css

@@ -1,5 +1,5 @@
-@layer stl-ui {
-  /* Typography - Stainless */
+/* Typography - Stainless */
+@layer stl-ui.tokens {
   :root {
     --stl-ui-typography-font: 'Geist', system-ui, sans-serif;
     --stl-ui-typography-font-mono: 'Geist Mono', ui-monospace, monospace;
@@ -30,166 +30,154 @@
     --stl-ui-type-scale-text-5xl: 42px;
     --stl-ui-type-scale-text-6xl: 64px;
   }
+}
 
-  /* Prose exists in its own sub-layer for easy reverting */
-  @layer typography {
-    body {
-      font-family: var(--stl-ui-typography-font);
-      font-feature-settings:
-        'ss01' on,
-        'ss03' on,
-        'ss04' on,
-        'ss06' on,
-        'ss08' on;
-    }
-
-    .stl-ui-prose {
-      color: var(--stl-ui-foreground-secondary);
-
-      /* Body/Regular */
-      font-size: var(--stl-ui-typography-text-body);
-      font-style: normal;
-      font-weight: 400;
-      line-height: var(--stl-ui-typography-line-height);
-      letter-spacing: -0.01em;
-
-      p {
-        margin-top: 16px;
-      }
+/* Prose exists in its own sub-layer for easy reverting */
+body {
+  font-family: var(--stl-ui-typography-font);
+  font-feature-settings:
+    'ss01' on,
+    'ss03' on,
+    'ss04' on,
+    'ss06' on,
+    'ss08' on;
+}
 
-      p,
-      li {
-        color: var(--stl-ui-foreground-secondary);
-      }
+.stl-ui-prose {
+  p:not(.stl-ui-not-prose *) {
+    color: var(--stl-ui-foreground-secondary);
+    font-weight: 400;
+    line-height: var(--stl-ui-typography-line-height);
+    letter-spacing: -0.01em;
+    font-size: var(--stl-ui-typography-text-body);
+    margin-top: 16px;
+  }
 
-      strong {
-        color: var(--stl-ui-foreground);
-      }
+  p,
+  li {
+    &:not(.stl-ui-not-prose *) {
+      color: var(--stl-ui-foreground-secondary);
+    }
+  }
 
-      aside {
-        p,
-        li {
-          color: var(--stl-ui-foreground);
-        }
-      }
+  strong:not(.stl-ui-not-prose *) {
+    color: var(--stl-ui-foreground);
+  }
 
-      a {
-        color: var(--stl-ui-foreground-accent);
-
-        /* Body/Link */
-        font-weight: 600;
-        text-decoration-line: underline;
-        text-decoration-style: solid;
-        text-decoration-skip-ink: auto;
-        text-decoration-thickness: auto;
-        text-underline-offset: auto;
-        text-underline-position: from-font;
-      }
+  aside:not(.stl-ui-not-prose *) {
+    p,
+    li {
+      color: var(--stl-ui-foreground);
+    }
+  }
 
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    &:not(.stl-ui-not-prose *) {
+      &,
+      * {
         color: var(--stl-ui-foreground);
         font-weight: 500;
         line-height: var(--stl-ui-typography-line-height-headings);
       }
+    }
+  }
 
-      h1 {
-        /* Heading 1/Medium */
-        font-size: var(--stl-ui-typography-text-h1);
-        letter-spacing: -0.03em;
+  h1:not(.stl-ui-not-prose *) {
+    /* Heading 1/Medium */
+    font-size: var(--stl-ui-typography-text-h1);
+    letter-spacing: -0.03em;
 
-        margin-top: 64px;
-      }
+    margin-top: 64px;
+  }
 
-      h2 {
-        /* Heading 2/Medium */
-        font-size: var(--stl-ui-typography-text-h2);
-        letter-spacing: -0.03em;
-        margin-top: 48px;
-      }
+  h2:not(.stl-ui-not-prose *) {
+    /* Heading 2/Medium */
+    font-size: var(--stl-ui-typography-text-h2);
+    letter-spacing: -0.03em;
 
-      h3 {
-        /* Heading 3/Medium */
-        font-size: var(--stl-ui-typography-text-h3);
-        letter-spacing: -0.02em;
-        margin-top: 40px;
-      }
+    margin-top: 48px;
+  }
 
-      h4 {
-        /* Heading 4/Medium */
-        font-size: var(--stl-ui-typography-text-h4);
-        letter-spacing: -0.02em;
-        margin-top: 32px;
-      }
+  h3:not(.stl-ui-not-prose *) {
+    /* Heading 3/Medium */
+    font-size: var(--stl-ui-typography-text-h3);
+    letter-spacing: -0.02em;
+    margin-top: 40px;
+  }
 
-      h5 {
-        /* Heading 5/Medium */
-        font-size: var(--stl-ui-typography-text-h5);
-        letter-spacing: -0.02em;
-        margin-top: 24px;
-      }
+  h4:not(.stl-ui-not-prose *) {
+    /* Heading 4/Medium */
+    font-size: var(--stl-ui-typography-text-h4);
+    letter-spacing: -0.02em;
+    margin-top: 32px;
+  }
 
-      li {
-        &:not(:last-child) {
-          margin-bottom: 8px;
-        }
-
-        h1,
-        h2,
-        h3,
-        h4,
-        h5,
-        p,
-        a {
-          &:first-child {
-            display: inline;
-          }
-        }
-      }
+  h5:not(.stl-ui-not-prose *) {
+    /* Heading 5/Medium */
+    font-size: var(--stl-ui-typography-text-h5);
+    letter-spacing: -0.02em;
+    margin-top: 24px;
+  }
 
-      ol,
-      ul {
-        padding-left: 26px;
-      }
+  li:not(.stl-ui-not-prose *) {
+    &:not(:last-child) {
+      margin-bottom: 8px;
+    }
 
-      ol,
-      ul,
-      aside,
-      img,
-      svg,
-      figure,
-      details {
-        margin-top: 16px;
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    p,
+    a {
+      &:first-child {
+        display: inline;
       }
+    }
+  }
 
-      :not(pre) > code {
-        color: var(--stl-ui-foreground);
-        font-feature-settings:
-          'ss01' on,
-          'ss03' on,
-          'ss04' on,
-          'ss06' on;
-
-        /* Code/Regular */
-        font-family: var(--stl-ui-typography-font-mono);
-        font-size: var(--stl-ui-typography-text-body-sm);
-        font-style: normal;
-        font-weight: 400;
-        line-height: 150%; /* 21px */
-
-        padding: 0 4px;
-        background-color: oklch(from var(--stl-ui-foreground) l c h / 0.1);
-        border-radius: var(--stl-ui-layout-border-radius-xs);
-      }
+  ol,
+  ul {
+    &:not(.stl-ui-not-prose *) {
+      padding-left: 26px;
+    }
+  }
 
-      /* Escape hatch for non-prose content */
-      .stl-ui-not-prose * {
-        all: revert-layer;
-      }
+  ol,
+  ul,
+  aside,
+  img,
+  svg,
+  figure,
+  details {
+    &:not(.stl-ui-not-prose *) {
+      margin-top: 16px;
     }
   }
+
+  :where(:not(pre) > code):not(.stl-ui-not-prose *) {
+    color: var(--stl-ui-foreground);
+    font-feature-settings:
+      'ss01' on,
+      'ss03' on,
+      'ss04' on,
+      'ss06' on;
+
+    /* Code/Regular */
+    font-family: var(--stl-ui-typography-font-mono);
+    font-size: var(--stl-ui-typography-text-body-sm);
+    font-style: normal;
+    font-weight: 400;
+    line-height: 150%; /* 21px */
+
+    padding: 0 4px;
+    background-color: oklch(from var(--stl-ui-foreground) l c h / 0.1);
+    border-radius: var(--stl-ui-layout-border-radius-xs);
+  }
 }

package/src/styles.css

@@ -6,5 +6,6 @@
 @import './styles/starlight-compat.css';
 
 @import './components/button.css';
+@import './components/dropdown-button.css';
 @import './components/callout.css';
-@import './components/details.css';
+@import './components/accordion.css';

package/tsconfig.json

@@ -1,15 +1,11 @@
 {
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
+    "noEmit": false,
     "declaration": true,
     "declarationDir": "dist",
     "outDir": "dist",
     "jsx": "react-jsx",
-    "esModuleInterop": true,
-    "moduleResolution": "Node",
-    "skipLibCheck": true,
-    "strict": true
   },
   "include": ["src"]
 }

package/src/components/DetailsGroup.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-
-export type DetailsGroupProps = React.ComponentProps<'div'>;
-
-export function DetailsGroup({ className, children, ...props }: DetailsGroupProps) {
-  const classes = clsx('stl-ui-details-group', className);
-
-  // TODO: boolean `exclusive` prop assigns a unique `name` to each of the child <details> elements
-  // For now this can be handled by the user
-
-  return (
-    <div className={classes} {...props}>
-      {children}
-    </div>
-  );
-}

package/src/components/details.css

@@ -1,124 +0,0 @@
-/* revert starlight details styles */
-@layer starlight.content {
-  /* artificially increase specificity to outcompete selectors in the same layer whose styles we want to revert */
-  .stl-ui-prose .sl-markdown-content.sl-markdown-content.sl-markdown-content {
-    details,
-    summary,
-    summary::before,
-    summary::marker {
-      all: revert-layer;
-    }
-  }
-}
-
-@layer stl-ui.components {
-  .stl-ui-prose {
-    details {
-      --stl-ui-details-padding: 12px;
-      --stl-ui-details-content-padding-bottom: 4px;
-      --stl-ui-details-marker-size: 1em;
-      --stl-ui-details-marker-margin: calc((1lh - var(--stl-ui-details-marker-size)) / 2);
-      --stl-ui-details-row-gap: 8px;
-      --stl-ui-details-summary-column-gap: 8px;
-      --stl-ui-details-border-radius: var(--stl-ui-layout-border-radius);
-      /* left inset to make content line up with summary content (after chevron) */
-      --stl-ui--internal--details-padding-start: calc(
-        var(--stl-ui-details-padding)
-        + var(--stl-ui-details-marker-size)
-        + var(--stl-ui-details-marker-margin) * 2
-        + var(--stl-ui-details-summary-column-gap)
-      );
-
-      background-color: var(--stl-ui-card-background);
-      border: 1px solid var(--stl-ui-border);
-      border-radius: var(--stl-ui-details-border-radius);
-      font-size: var(--stl-ui-typography-text-body);
-
-      padding: var(--stl-ui-details-padding);
-      /* indent content to line up with left edge of summary content */
-      padding-inline-start: var(--stl-ui--internal--details-padding-start);
-
-      summary {
-        display: block;
-        list-style: none;
-
-        /* summary extends to the edges of the element in order to increase click target */
-        padding: var(--stl-ui-details-padding);
-        padding-inline-start: var(--stl-ui--internal--details-padding-start);
-        margin: calc(-1 * var(--stl-ui-details-padding));
-        margin-inline-start: calc(-1 * var(--stl-ui--internal--details-padding-start));
-
-        cursor: pointer;
-        font-weight: 500;
-
-        border-radius: var(--stl-ui-details-border-radius);
-
-        &::before {
-          content: '';
-          width: var(--stl-ui-details-marker-size);
-          height: var(--stl-ui-details-marker-size);
-          margin: var(--stl-ui-details-marker-margin);
-          background-color: currentColor;
-          display: block;
-          position: absolute;
-          --stl-ui-details--internal--marker-width: calc(var(--stl-ui-details-marker-size) + var(--stl-ui-details-marker-margin) * 2);
-          --stl-ui-details--internal--summary-marker-transform: translateX(calc(-1 * var(--stl-ui-details--internal--marker-width) - var(--stl-ui-details-summary-column-gap)));
-          transform: var(--stl-ui-details--internal--summary-marker-transform);
-
-          --lucide-chevron-right: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tcmlnaHQtaWNvbiBsdWNpZGUtY2hldnJvbi1yaWdodCI+PHBhdGggZD0ibTkgMTggNi02LTYtNiIvPjwvc3ZnPg==');
-          mask-image: var(--lucide-chevron-right);
-          mask-size: contain;
-          mask-repeat: no-repeat;
-
-          transition: transform 0.1s ease-out;
-        }
-
-        & > :first-child {
-          margin-top: 0;
-        }
-      }
-
-      &[open] {
-        padding-bottom: calc(var(--stl-ui-details-padding) + var(--stl-ui-details-content-padding-bottom));
-
-        summary {
-          /* padding-bottom shouldn’t extend beyond the row gap while open, i.e. we shouldn’t be negative-margin-placing content overlapping summary */
-          --stl-ui--internal--summary-padding-bottom: min(var(--stl-ui-details-padding), var(--stl-ui-details-row-gap));
-          padding-bottom: var(--stl-ui--internal--summary-padding-bottom);
-          margin-bottom: calc(var(--stl-ui-details-row-gap) - var(--stl-ui--internal--summary-padding-bottom));
-          border-bottom-left-radius: 0;
-          border-bottom-right-radius: 0;
-
-          &::before {
-            transform: var(--stl-ui-details--internal--summary-marker-transform) rotate(90deg);
-          }
-        }
-      }
-
-      summary + * {
-        margin-top: 0;
-      }
-    }
-  }
-
-  .stl-ui-details-group {
-    & > details:has(+ details) {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-      summary {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-    }
-    & > details + details {
-      margin-top: 0;
-      border-top: 0;
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      summary {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-      }
-    }
-  }
-}