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

package/src/styles/swatches.css

@@ -1,87 +0,0 @@
-@layer stl-ui {
-  /* --stl-ui-swatch-es - Light */
-  :root[data-theme='light'] {
-    --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 {
-  /* Swatches - Light */
-  :root[data-theme='light'] {
-    --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,195 +0,0 @@
-@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;
-
-      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

@@ -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/details.css';

package/tsconfig.json

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