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

package/src/styles/starlight-compat.css

@@ -1,160 +0,0 @@
-:root {
-  /* Layout and Typography */
-  --sl-font: var(--stl-ui-typography-font);
-  --sl-font-mono: var(--stl-ui-typography-font-mono);
-  --sl-line-height: var(--stl-ui-typography-line-height);
-
-  /* Headings */
-  --sl-text-h1: var(--stl-ui-typography-text-h1);
-  --sl-text-h2: var(--stl-ui-typography-text-h2);
-  --sl-text-h3: var(--stl-ui-typography-text-h3);
-  --sl-text-h4: var(--stl-ui-typography-text-h4);
-  --sl-text-h5: var(--stl-ui-typography-text-h5);
-
-  /* Colors */
-  --sl-color-bg: var(--stl-ui-background);
-  --sl-color-bg-sidebar: var(--stl-ui-background);
-  --sl-color-bg-ui: var(--stl-ui-card-background);
-  --sl-color-bg-nav: var(--stl-ui-background);
-  --sl-color-bg-inline-code: var(--stl-ui-muted-background);
-  --sl-color-bg-accent: var(--stl-ui-accent-background);
-
-  --sl-color-text: var(--stl-ui-foreground);
-  --sl-color-text-secondary: var(--stl-ui-foreground-secondary);
-  --sl-color-text-tertiary: var(--stl-ui-foreground-muted);
-  --sl-color-text-accent: var(--stl-ui-foreground-accent);
-  --sl-color-hairline: var(--stl-ui-border);
-  --sl-color-hairline-light: var(--stl-ui-border-muted);
-  --sl-color-hairline-shade: var(--stl-ui-border-emphasis);
-  --sl-color-text-invert: var(--stl-ui-inverse-foreground);
-
-  /* Primary colors */
-  --sl-color-red-low: var(--stl-ui-swatch-red-faint);
-  --sl-color-red: var(--stl-ui-swatch-red-base);
-  --sl-color-red-high: var(--stl-ui-swatch-red-base);
-
-  --sl-color-green-low: var(--stl-ui-swatch-green-faint);
-  --sl-color-green: var(--stl-ui-swatch-green-base);
-  --sl-color-green-high: var(--stl-ui-swatch-green-base);
-
-  --sl-color-blue-low: var(--stl-ui-swatch-blue-faint);
-  --sl-color-blue: var(--stl-ui-swatch-blue-base);
-  --sl-color-blue-high: var(--stl-ui-swatch-blue-base);
-
-  --sl-color-orange-low: var(--stl-ui-swatch-orange-faint);
-  --sl-color-orange: var(--stl-ui-swatch-orange-base);
-  --sl-color-orange-high: var(--stl-ui-swatch-orange-base);
-
-  --sl-color-purple-low: var(--stl-ui-swatch-purple-faint);
-  --sl-color-purple: var(--stl-ui-swatch-purple-base);
-  --sl-color-purple-high: var(--stl-ui-swatch-purple-base);
-
-  --sl-color-teal-low: var(--stl-ui-swatch-teal-faint);
-  --sl-color-teal: var(--stl-ui-swatch-teal-base);
-  --sl-color-teal-high: var(--stl-ui-swatch-teal-base);
-
-  --sl-color-magenta-low: var(--stl-ui-swatch-pink-faint);
-  --sl-color-magenta: var(--stl-ui-swatch-pink-base);
-  --sl-color-magenta-high: var(--stl-ui-swatch-pink-base);
-
-  --sl-color-yellow-low: var(--stl-ui-swatch-yellow-faint);
-  --sl-color-yellow: var(--stl-ui-swatch-yellow-base);
-  --sl-color-yellow-high: var(--stl-ui-swatch-yellow-base);
-}
-
-/* Starlight Compatibility */
-.stl-ui-prose {
-  :is(h1, h2, h3, h4, h5) code {
-    font-size: 0.9em;
-    font-weight: inherit;
-  }
-  /* TODO: Disable starlight headingLinks and replace with our own */
-  /* Duplicate styles from h1–5 in typography; TODO: move to mixins after adopting preprocessor */
-  .sl-heading-wrapper.level-h1 {
-    font-size: var(--stl-ui-typography-text-h1);
-    letter-spacing: -0.03em;
-    margin-top: 64px;
-    line-height: var(--stl-ui-typography-line-height-headings);
-  }
-  .sl-heading-wrapper.level-h2 {
-    font-size: var(--stl-ui-typography-text-h2);
-    letter-spacing: -0.03em;
-    margin-top: 48px;
-    line-height: var(--stl-ui-typography-line-height-headings);
-  }
-
-  .sl-heading-wrapper.level-h3 {
-    font-size: var(--stl-ui-typography-text-h3);
-    letter-spacing: -0.02em;
-    margin-top: 40px;
-    line-height: var(--stl-ui-typography-line-height-headings);
-  }
-  .sl-heading-wrapper.level-h4 {
-    font-size: var(--stl-ui-typography-text-h4);
-    letter-spacing: -0.02em;
-    margin-top: 32px;
-    line-height: var(--stl-ui-typography-line-height-headings);
-  }
-  .sl-heading-wrapper.level-h5 {
-    font-size: var(--stl-ui-typography-text-h5);
-    letter-spacing: -0.02em;
-    margin-top: 24px;
-    line-height: var(--stl-ui-typography-line-height-headings);
-  }
-  .sl-heading-wrapper {
-    --sl-anchor-icon-size: 0.8em;
-  }
-  /* TODO: replace with an icon that matches Stainless branding */
-  .sl-anchor-link svg {
-    margin-top: 0;
-  }
-}
-
-/* TODO: remove these */
-.stl-ui-prose {
-  /* Tab component */
-  starlight-tabs {
-    a {
-      text-decoration: none;
-      line-height: unset;
-      color: var(--stl-ui-foreground);
-
-      &[aria-selected='true'] {
-        color: var(--stl-ui-foreground-accent);
-        font-weight: normal;
-      }
-    }
-
-    ol,
-    ul {
-      &:not(.stl-ui-not-prose *) {
-        padding-left: 0;
-      }
-    }
-
-    li:not(.stl-ui-not-prose *) {
-      margin-bottom: -2px;
-      &:not(:last-child) {
-        margin-bottom: -2px;
-      }
-
-      a:first-child {
-        display: flex;
-      }
-    }
-  }
-
-  /* Pagination Links */
-
-  .pagination-links {
-    a {
-      color: var(--stl-ui-foreground);
-    }
-  }
-
-  .starlight-aside {
-    svg {
-      margin-top: 0;
-    }
-  }
-}

package/src/styles/swatches.css

@@ -1,87 +0,0 @@
-@layer stl-ui.tokens {
-  /* --stl-ui-swatch-es - Light */
-  :root {
-    --stl-ui-swatch-gray-gray-1: var(--stl-ui-gray-800);
-    --stl-ui-swatch-gray-gray-2: var(--stl-ui-gray-700);
-    --stl-ui-swatch-gray-gray-3: var(--stl-ui-gray-600);
-    --stl-ui-swatch-gray-gray-4: var(--stl-ui-gray-500);
-    --stl-ui-swatch-gray-gray-5: var(--stl-ui-gray-400);
-    --stl-ui-swatch-gray-gray-6: var(--stl-ui-gray-300);
-    --stl-ui-swatch-gray-gray-7: var(--stl-ui-gray-200);
-    --stl-ui-swatch-gray-gray-8: var(--stl-ui-gray-100);
-    --stl-ui-swatch-gray-gray-9: var(--stl-ui-gray-50);
-    --stl-ui-swatch-gray-black: var(--stl-ui-gray-950);
-    --stl-ui-swatch-gray-white: rgb(255, 255, 255);
-
-    --stl-ui-swatch-accent-base: var(--stl-ui-accent-600);
-    --stl-ui-swatch-accent-muted: var(--stl-ui-accent-200);
-    --stl-ui-swatch-accent-faint: var(--stl-ui-accent-50);
-    --stl-ui-swatch-red-base: var(--stl-ui-red-600);
-    --stl-ui-swatch-red-muted: var(--stl-ui-red-200);
-    --stl-ui-swatch-red-faint: var(--stl-ui-red-50);
-    --stl-ui-swatch-green-base: var(--stl-ui-green-600);
-    --stl-ui-swatch-green-muted: var(--stl-ui-green-200);
-    --stl-ui-swatch-green-faint: var(--stl-ui-green-50);
-    --stl-ui-swatch-blue-base: var(--stl-ui-blue-600);
-    --stl-ui-swatch-blue-muted: var(--stl-ui-blue-200);
-    --stl-ui-swatch-blue-faint: var(--stl-ui-blue-50);
-    --stl-ui-swatch-orange-base: var(--stl-ui-orange-600);
-    --stl-ui-swatch-orange-muted: var(--stl-ui-orange-200);
-    --stl-ui-swatch-orange-faint: var(--stl-ui-orange-50);
-    --stl-ui-swatch-purple-base: var(--stl-ui-purple-600);
-    --stl-ui-swatch-purple-muted: var(--stl-ui-purple-200);
-    --stl-ui-swatch-purple-faint: var(--stl-ui-purple-50);
-    --stl-ui-swatch-cyan-base: var(--stl-ui-cyan-600);
-    --stl-ui-swatch-cyan-muted: var(--stl-ui-cyan-200);
-    --stl-ui-swatch-cyan-faint: var(--stl-ui-cyan-50);
-    --stl-ui-swatch-pink-base: var(--stl-ui-pink-600);
-    --stl-ui-swatch-pink-muted: var(--stl-ui-pink-200);
-    --stl-ui-swatch-pink-faint: var(--stl-ui-pink-50);
-    --stl-ui-swatch-yellow-base: var(--stl-ui-yellow-600);
-    --stl-ui-swatch-yellow-muted: var(--stl-ui-yellow-200);
-    --stl-ui-swatch-yellow-faint: var(--stl-ui-yellow-50);
-  }
-
-  /* --stl-ui-swatch-es - Dark */
-  :root[data-theme='dark'] {
-    --stl-ui-swatch-gray-gray-1: var(--stl-ui-gray-100);
-    --stl-ui-swatch-gray-gray-2: var(--stl-ui-gray-200);
-    --stl-ui-swatch-gray-gray-3: var(--stl-ui-gray-300);
-    --stl-ui-swatch-gray-gray-4: var(--stl-ui-gray-400);
-    --stl-ui-swatch-gray-gray-5: var(--stl-ui-gray-500);
-    --stl-ui-swatch-gray-gray-6: var(--stl-ui-gray-600);
-    --stl-ui-swatch-gray-gray-7: var(--stl-ui-gray-700);
-    --stl-ui-swatch-gray-gray-8: var(--stl-ui-gray-800);
-    --stl-ui-swatch-gray-gray-9: var(--stl-ui-gray-900);
-    --stl-ui-swatch-gray-black: var(--stl-ui-gray-950);
-    --stl-ui-swatch-gray-white: rgb(255, 255, 255);
-
-    --stl-ui-swatch-accent-base: var(--stl-ui-accent-500);
-    --stl-ui-swatch-accent-muted: var(--stl-ui-accent-900);
-    --stl-ui-swatch-accent-faint: var(--stl-ui-accent-950);
-    --stl-ui-swatch-red-base: var(--stl-ui-red-500);
-    --stl-ui-swatch-red-muted: var(--stl-ui-red-900);
-    --stl-ui-swatch-red-faint: var(--stl-ui-red-950);
-    --stl-ui-swatch-green-base: var(--stl-ui-green-500);
-    --stl-ui-swatch-green-muted: var(--stl-ui-green-900);
-    --stl-ui-swatch-green-faint: var(--stl-ui-green-950);
-    --stl-ui-swatch-blue-base: var(--stl-ui-blue-500);
-    --stl-ui-swatch-blue-muted: var(--stl-ui-blue-900);
-    --stl-ui-swatch-blue-faint: var(--stl-ui-blue-950);
-    --stl-ui-swatch-orange-base: var(--stl-ui-orange-500);
-    --stl-ui-swatch-orange-muted: var(--stl-ui-orange-900);
-    --stl-ui-swatch-orange-faint: var(--stl-ui-orange-950);
-    --stl-ui-swatch-purple-base: var(--stl-ui-purple-500);
-    --stl-ui-swatch-purple-muted: var(--stl-ui-purple-900);
-    --stl-ui-swatch-purple-faint: var(--stl-ui-purple-950);
-    --stl-ui-swatch-cyan-base: var(--stl-ui-cyan-500);
-    --stl-ui-swatch-cyan-muted: var(--stl-ui-cyan-900);
-    --stl-ui-swatch-cyan-faint: var(--stl-ui-cyan-950);
-    --stl-ui-swatch-pink-base: var(--stl-ui-pink-500);
-    --stl-ui-swatch-pink-muted: var(--stl-ui-pink-900);
-    --stl-ui-swatch-pink-faint: var(--stl-ui-pink-950);
-    --stl-ui-swatch-yellow-base: var(--stl-ui-yellow-500);
-    --stl-ui-swatch-yellow-muted: var(--stl-ui-yellow-900);
-    --stl-ui-swatch-yellow-faint: var(--stl-ui-yellow-950);
-  }
-}

package/src/styles/theme.css

@@ -1,49 +0,0 @@
-@layer stl-ui.tokens {
-  /* Swatches - 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);
-    --stl-ui-foreground: var(--stl-ui-swatch-gray-gray-1);
-    --stl-ui-foreground-secondary: var(--stl-ui-swatch-gray-gray-3);
-    --stl-ui-foreground-muted: var(--stl-ui-swatch-gray-gray-4);
-    --stl-ui-foreground-accent: var(--stl-ui-swatch-accent-base);
-    --stl-ui-border: var(--stl-ui-swatch-gray-gray-7);
-    --stl-ui-border-muted: var(--stl-ui-swatch-gray-gray-8);
-    --stl-ui-border-emphasis: var(--stl-ui-swatch-gray-gray-6);
-    --stl-ui-inverse-background: var(--stl-ui-swatch-gray-gray-1);
-    --stl-ui-inverse-foreground: var(--stl-ui-swatch-gray-white);
-    --stl-ui-accent-background: var(--stl-ui-swatch-accent-base);
-    --stl-ui-accent-foreground: var(--stl-ui-swatch-gray-white);
-    --stl-ui-accent-muted-background: var(--stl-ui-swatch-accent-faint);
-    --stl-ui-accent-muted-foreground: var(--stl-ui-swatch-accent-base);
-    --stl-ui-accent-border: var(--stl-ui-swatch-accent-muted);
-    --stl-ui-accent-border-muted: var(--stl-ui-swatch-accent-faint);
-    --stl-ui-accent-border-emphasis: var(--stl-ui-swatch-accent-base);
-    --stl-ui-overlay-background: #0000000d;
-  }
-
-  /* Swatches - Dark */
-  :root[data-theme='dark'] {
-    --stl-ui-background: var(--stl-ui-swatch-gray-black);
-    --stl-ui-card-background: var(--stl-ui-swatch-gray-gray-9);
-    --stl-ui-muted-background: var(--stl-ui-swatch-gray-gray-9);
-    --stl-ui-foreground: var(--stl-ui-swatch-gray-gray-1);
-    --stl-ui-foreground-secondary: var(--stl-ui-swatch-gray-gray-3);
-    --stl-ui-foreground-muted: var(--stl-ui-swatch-gray-gray-4);
-    --stl-ui-foreground-accent: var(--stl-ui-swatch-accent-base);
-    --stl-ui-border: var(--stl-ui-swatch-gray-gray-8);
-    --stl-ui-border-muted: var(--stl-ui-swatch-gray-gray-9);
-    --stl-ui-border-emphasis: var(--stl-ui-swatch-gray-gray-7);
-    --stl-ui-inverse-background: var(--stl-ui-swatch-gray-gray-1);
-    --stl-ui-inverse-foreground: var(--stl-ui-swatch-gray-black);
-    --stl-ui-accent-background: var(--stl-ui-swatch-accent-base);
-    --stl-ui-accent-foreground: var(--stl-ui-swatch-gray-white);
-    --stl-ui-accent-muted-background: var(--stl-ui-swatch-accent-faint);
-    --stl-ui-accent-muted-foreground: var(--stl-ui-swatch-accent-base);
-    --stl-ui-accent-border: var(--stl-ui-swatch-accent-muted);
-    --stl-ui-accent-border-muted: var(--stl-ui-swatch-accent-faint);
-    --stl-ui-accent-border-emphasis: var(--stl-ui-swatch-accent-base);
-    --stl-ui-overlay-background: #00000080;
-  }
-}

package/src/styles/typography.css

@@ -1,183 +0,0 @@
-/* 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;
-    --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 */
-body {
-  font-family: var(--stl-ui-typography-font);
-  font-feature-settings:
-    'ss01' on,
-    'ss03' on,
-    'ss04' on,
-    'ss06' on,
-    'ss08' on;
-}
-
-.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;
-  }
-
-  p,
-  li {
-    &:not(.stl-ui-not-prose *) {
-      color: var(--stl-ui-foreground-secondary);
-    }
-  }
-
-  strong:not(.stl-ui-not-prose *) {
-    color: var(--stl-ui-foreground);
-  }
-
-  aside:not(.stl-ui-not-prose *) {
-    p,
-    li {
-      color: var(--stl-ui-foreground);
-    }
-  }
-
-  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:not(.stl-ui-not-prose *) {
-    /* Heading 1/Medium */
-    font-size: var(--stl-ui-typography-text-h1);
-    letter-spacing: -0.03em;
-
-    margin-top: 64px;
-  }
-
-  h2:not(.stl-ui-not-prose *) {
-    /* Heading 2/Medium */
-    font-size: var(--stl-ui-typography-text-h2);
-    letter-spacing: -0.03em;
-
-    margin-top: 48px;
-  }
-
-  h3:not(.stl-ui-not-prose *) {
-    /* Heading 3/Medium */
-    font-size: var(--stl-ui-typography-text-h3);
-    letter-spacing: -0.02em;
-    margin-top: 40px;
-  }
-
-  h4:not(.stl-ui-not-prose *) {
-    /* Heading 4/Medium */
-    font-size: var(--stl-ui-typography-text-h4);
-    letter-spacing: -0.02em;
-    margin-top: 32px;
-  }
-
-  h5:not(.stl-ui-not-prose *) {
-    /* Heading 5/Medium */
-    font-size: var(--stl-ui-typography-text-h5);
-    letter-spacing: -0.02em;
-    margin-top: 24px;
-  }
-
-  li:not(.stl-ui-not-prose *) {
-    &:not(:last-child) {
-      margin-bottom: 8px;
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    p,
-    a {
-      &:first-child {
-        display: inline;
-      }
-    }
-  }
-
-  ol,
-  ul {
-    &:not(.stl-ui-not-prose *) {
-      padding-left: 26px;
-    }
-  }
-
-  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

@@ -1,11 +0,0 @@
-@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/accordion.css';

package/tsconfig.json

@@ -1,11 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "noEmit": false,
-    "declaration": true,
-    "declarationDir": "dist",
-    "outDir": "dist",
-    "jsx": "react-jsx",
-  },
-  "include": ["src"]
-}