@stainless-api/ui-primitives 0.1.0-beta.0

package/src/styles/typography.css

@@ -0,0 +1,199 @@
+@layer stl-ui {
+  /* Typography - Stainless */
+  :root {
+    --stl-ui-typography-font: 'Geist', system-ui, sans-serif;
+    --stl-ui-typography-font-mono: 'Geist Mono', ui-monospace, monospace;
+    --stl-ui-typography-line-height: 1.5;
+    --stl-ui-typography-line-height-headings: 1.2;
+
+    --stl-ui-typography-text-body: var(--stl-ui-type-scale-text);
+    --stl-ui-typography-text-body-sm: var(--stl-ui-type-scale-text-sm);
+    --stl-ui-typography-text-body-xs: var(--stl-ui-type-scale-text-xs);
+
+    --stl-ui-typography-text-code: var(--stl-ui-type-scale-text-sm);
+    --stl-ui-typography-text-code-sm: var(--stl-ui-type-scale-text-xs);
+
+    --stl-ui-typography-text-h1: var(--stl-ui-type-scale-text-5xl);
+    --stl-ui-typography-text-h2: var(--stl-ui-type-scale-text-4xl);
+    --stl-ui-typography-text-h3: var(--stl-ui-type-scale-text-3xl);
+    --stl-ui-typography-text-h4: var(--stl-ui-type-scale-text-2xl);
+    --stl-ui-typography-text-h5: var(--stl-ui-type-scale-text-xl);
+
+    --stl-ui-type-scale-text-xs: 12px;
+    --stl-ui-type-scale-text-sm: 14px;
+    --stl-ui-type-scale-text: 16px;
+    --stl-ui-type-scale-text-lg: 18px;
+    --stl-ui-type-scale-text-xl: 20px;
+    --stl-ui-type-scale-text-2xl: 24px;
+    --stl-ui-type-scale-text-3xl: 29px;
+    --stl-ui-type-scale-text-4xl: 35px;
+    --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;
+
+      * {
+        margin: 0;
+      }
+
+      p {
+        margin-top: 16px;
+      }
+
+      p,
+      li {
+        color: var(--stl-ui-foreground-secondary);
+      }
+
+      strong {
+        color: var(--stl-ui-foreground);
+      }
+
+      aside {
+        p,
+        li {
+          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;
+      }
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        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;
+
+        margin-top: 64px;
+      }
+
+      h2 {
+        /* Heading 2/Medium */
+        font-size: var(--stl-ui-typography-text-h2);
+        letter-spacing: -0.03em;
+        margin-top: 48px;
+      }
+
+      h3 {
+        /* Heading 3/Medium */
+        font-size: var(--stl-ui-typography-text-h3);
+        letter-spacing: -0.02em;
+        margin-top: 40px;
+      }
+
+      h4 {
+        /* Heading 4/Medium */
+        font-size: var(--stl-ui-typography-text-h4);
+        letter-spacing: -0.02em;
+        margin-top: 32px;
+      }
+
+      h5 {
+        /* Heading 5/Medium */
+        font-size: var(--stl-ui-typography-text-h5);
+        letter-spacing: -0.02em;
+        margin-top: 24px;
+      }
+
+      li {
+        &:not(:last-child) {
+          margin-bottom: 8px;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        p,
+        a {
+          &:first-child {
+            display: inline;
+          }
+        }
+      }
+
+      ol,
+      ul {
+        padding-left: 26px;
+      }
+
+      ol,
+      ul,
+      aside,
+      img,
+      svg,
+      figure,
+      details {
+        margin-top: 16px;
+      }
+
+      :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);
+      }
+
+      /* Escape hatch for non-prose content */
+      .stl-ui-not-prose * {
+        all: revert-layer;
+      }
+    }
+  }
+}

package/src/styles.css

@@ -0,0 +1,11 @@
+@import './styles/scales.css';
+@import './styles/swatches.css';
+@import './styles/typography.css';
+@import './styles/layout.css';
+@import './styles/theme.css';
+@import './styles/starlight-compat.css';
+
+@import './components/button.css';
+@import './components/dropdown-button.css';
+@import './components/callout.css';
+@import './components/details.css';

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "declaration": true,
+    "declarationDir": "dist",
+    "outDir": "dist",
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "moduleResolution": "Node",
+    "skipLibCheck": true,
+    "strict": true
+  },
+  "include": ["src"]
+}