@eventuras/ratio-ui 1.0.0

package/src/global.css

@@ -0,0 +1,333 @@
+/**
+ * Ratio UI - Complete styling
+ * Includes Tailwind, design tokens, fonts, and base styles
+ */
+
+/* Fonts */
+@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;600&family=Source+Serif+4:wght@400;600;700&display=swap");
+
+/* Tailwind + plugins */
+@import "tailwindcss";
+@plugin 'tailwindcss-react-aria-components';
+@source '**/*.tsx';
+
+/* Dark mode variant */
+@custom-variant dark (&:where(html[data-theme="dark"] &, body[data-theme="dark"] &, [data-theme="dark"] *));
+
+/* Design tokens */
+@import "./tokens/index.css";
+
+/* Base styles */
+@layer base {
+  /* Prevent FOUC during theme initialization */
+  html {
+    opacity: 0;
+    font-size: var(--font-size-base);
+  }
+
+  html[data-theme="dark"],
+  html[data-theme="light"] {
+    opacity: 1;
+  }
+
+  main {
+    @apply grow;
+  }
+
+  /* Typography - base styles for semantic HTML */
+  html {
+    font-family: var(--font-body);
+  }
+
+  body {
+    font-family: var(--font-body);
+    line-height: 1.6;
+    letter-spacing: 0;
+  }
+
+  h1,
+  h2,
+  h3 {
+    /* Display warmth */
+    font-family: var(--font-display);
+    font-weight: 650;
+    line-height: 1.12;
+    letter-spacing: -0.02em;
+  }
+
+  h4,
+  h5,
+  h6 {
+    /* Keep smaller headings crisp */
+    font-family: var(--font-body);
+    font-weight: 600;
+    line-height: 1.25;
+    letter-spacing: -0.01em;
+  }
+
+  h1 {
+    font-size: var(--font-size-6xl);
+    margin-top: var(--space-2xl);
+    margin-bottom: var(--space-xs);
+  }
+
+  h2 {
+    font-size: var(--font-size-4xl);
+    margin-top: var(--space-xl);
+    margin-bottom: var(--space-2xs);
+  }
+
+  h3 {
+    font-size: var(--font-size-2xl);
+    margin-top: var(--space-md);
+    margin-bottom: var(--space-3xs);
+  }
+
+  h4 {
+    font-size: var(--font-size-base);
+    font-weight: 650;
+    margin-top: var(--space-s);
+    margin-bottom: 0;
+  }
+
+  h5 {
+    font-size: var(--font-size-base);
+    margin-top: var(--space-s);
+    margin-bottom: 0;
+  }
+
+  h6 {
+    font-size: var(--font-size-base);
+    margin-top: var(--space-s);
+    margin-bottom: 0;
+    text-transform: none;
+  }
+
+  /* Reduce gap when headings stack (e.g. h2 immediately followed by h3) */
+  :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
+    margin-top: var(--space-xs);
+  }
+
+  /* Keep text tight against its heading */
+  :is(h1, h2, h3, h4, h5, h6) + p {
+    margin-top: 0;
+  }
+
+  p {
+    margin-top: var(--space-s);
+    margin-bottom: var(--space-s);
+    max-width: 70ch;
+  }
+}
+
+@layer base {
+  body {
+    @apply h-full m-0 flex flex-col min-h-screen antialiased;
+    overflow-x: hidden;
+  }
+
+  /* Main animated gradient background */
+  body::before {
+    content: "";
+    position: fixed;
+    inset: -15%;
+    z-index: -1;
+    pointer-events: none;
+    will-change: transform;
+
+    background-image:
+      /* Organic blob 1 - Ocean teal */
+      radial-gradient(
+        ellipse 1200px 800px at 15% 20%,
+        rgba(91, 163, 181, 0.3),
+        transparent 75%
+      ),
+
+      /* Organic blob 2 - Sunny yellow */
+      radial-gradient(
+        ellipse 900px 1100px at 85% 15%,
+        rgba(255, 194, 32, 0.22),
+        transparent 80%
+      ),
+
+      /* Warm accent - Terracotta */
+      radial-gradient(
+        ellipse 700px 600px at 75% 80%,
+        rgba(244, 137, 109, 0.18),
+        transparent 85%
+      ),
+
+      /* Support color - subtle sage */
+      radial-gradient(
+        ellipse 1000px 700px at 25% 75%,
+        rgba(159, 183, 176, 0.15),
+        transparent 88%
+      ),
+
+      /* Spotlight effect (subtle white glow) */
+      radial-gradient(
+        circle 600px at 50% 10%,
+        rgba(255, 255, 255, 0.14),
+        transparent 75%
+      ),
+
+      /* Fine grain texture */
+      radial-gradient(
+        1px 1px,
+        rgba(22, 20, 18, 0.05),
+        transparent 60%
+      );
+
+    background-size: auto, auto, auto, auto, auto, 5px 5px;
+    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
+    background-blend-mode: normal, normal, normal, normal, screen, multiply;
+    background-color: #fafcfd;
+
+    /* Elegant mask to blend edges */
+    -webkit-mask-image: radial-gradient(
+      130% 130% at 50% 30%,
+      #000 52%,
+      transparent 90%
+    );
+    mask-image: radial-gradient(
+      130% 130% at 50% 30%,
+      #000 52%,
+      transparent 90%
+    );
+  }
+
+  /* Dark mode variant - more dramatic and moody */
+  :root[data-theme="dark"] body::before {
+    background-image:
+      /* Ocean teal - deeper */
+      radial-gradient(
+        ellipse 1300px 900px at 12% 18%,
+        rgba(58, 114, 135, 0.35),
+        transparent 78%
+      ),
+
+      /* Sunny yellow - warmer glow */
+      radial-gradient(
+        ellipse 800px 1000px at 88% 12%,
+        rgba(187, 99, 9, 0.25),
+        transparent 82%
+      ),
+
+      /* Terracotta - warm bottom accent */
+      radial-gradient(
+        ellipse 800px 700px at 72% 85%,
+        rgba(200, 93, 63, 0.22),
+        transparent 84%
+      ),
+
+      /* Support sage - subtle atmospheric */
+      radial-gradient(
+        ellipse 1100px 800px at 28% 78%,
+        rgba(76, 101, 96, 0.18),
+        transparent 86%
+      ),
+
+      /* Subtle highlight */
+      radial-gradient(
+        circle 500px at 50% 8%,
+        rgba(255, 255, 255, 0.06),
+        transparent 78%
+      ),
+
+      /* Grain - more visible in dark */
+      radial-gradient(
+        1px 1px,
+        rgba(250, 247, 243, 0.08),
+        transparent 60%
+      );
+
+    background-size: auto, auto, auto, auto, auto, 5px 5px;
+    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
+    background-blend-mode: normal, normal, normal, normal, screen, screen;
+    background-color: #08141a;
+  }
+
+  /* Smooth organic drift animation */
+  @media (prefers-reduced-motion: no-preference) {
+    body::before {
+      animation: losol-organic-flow 90s ease-in-out infinite alternate;
+    }
+
+    :root[data-theme="dark"] body::before {
+      animation-duration: 110s;
+    }
+
+    @keyframes losol-organic-flow {
+      0% {
+        transform: translate3d(0, 0, 0) scale(1);
+      }
+      33% {
+        transform: translate3d(25px, -15px, 0) scale(1.02);
+      }
+      66% {
+        transform: translate3d(-20px, 20px, 0) scale(0.98);
+      }
+      100% {
+        transform: translate3d(15px, -10px, 0) scale(1.01);
+      }
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    body::before {
+      animation: none !important;
+    }
+  }
+
+  /* Optional: Add a secondary layer for extra depth */
+  body::after {
+    content: "";
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    pointer-events: none;
+    opacity: 0.4;
+
+    background-image:
+      /* Subtle mesh pattern overlay */
+      repeating-linear-gradient(
+        0deg,
+        transparent,
+        transparent 2px,
+        rgba(22, 20, 18, 0.01) 2px,
+        rgba(22, 20, 18, 0.01) 4px
+      ),
+      repeating-linear-gradient(
+        90deg,
+        transparent,
+        transparent 2px,
+        rgba(22, 20, 18, 0.01) 2px,
+        rgba(22, 20, 18, 0.01) 4px
+      );
+  }
+
+  :root[data-theme="dark"] body::after {
+    opacity: 0.2;
+    background-image:
+      repeating-linear-gradient(
+        0deg,
+        transparent,
+        transparent 2px,
+        rgba(250, 247, 243, 0.015) 2px,
+        rgba(250, 247, 243, 0.015) 4px
+      ),
+      repeating-linear-gradient(
+        90deg,
+        transparent,
+        transparent 2px,
+        rgba(250, 247, 243, 0.015) 2px,
+        rgba(250, 247, 243, 0.015) 4px
+      );
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    body::after {
+      display: none;
+    }
+  }
+}

package/src/tokens/Border.stories.tsx

@@ -0,0 +1,129 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import type { BorderProps } from './borders';
+import { buildBorderClasses } from './borders';
+
+const radii = [
+  { name: 'sm', token: '--radius-sm' },
+  { name: 'default', token: '--radius' },
+  { name: 'lg', token: '--radius-lg' },
+  { name: 'xl', token: '--radius-xl' },
+  { name: 'full', token: '9999px' },
+];
+
+const AllBorders = () => (
+  <div className="p-6 max-w-5xl">
+    <h2 className="text-lg font-bold mb-1">Border Tokens</h2>
+    <p className="text-sm text-text-muted mb-6">Border radius scale.</p>
+
+    <h3 className="text-sm font-semibold mb-3">Radius</h3>
+    <div className="flex gap-6 items-end">
+      {radii.map(({ name, token }) => (
+        <div key={name} className="flex flex-col items-center gap-2">
+          <div
+            className="h-20 w-20"
+            style={{
+              borderRadius: token.startsWith('--') ? `var(${token})` : token,
+              backgroundColor: 'var(--color-primary-400)',
+              border: '2px solid var(--color-primary-600)',
+            }}
+          />
+          <span className="text-xs font-mono text-text-subtle">
+            {token.startsWith('--') ? token : 'rounded-full'}
+          </span>
+          <span className="text-xs text-text-muted">{name}</span>
+        </div>
+      ))}
+    </div>
+
+    <h3 className="text-sm font-semibold mt-8 mb-3">Border Colors</h3>
+    <div className="flex gap-4">
+      <div className="flex flex-col items-center gap-2">
+        <div
+          className="h-16 w-32 rounded-lg"
+          style={{ border: '2px solid var(--border-1)' }}
+        />
+        <span className="text-xs font-mono text-text-subtle">--border-1</span>
+        <span className="text-xs text-text-muted">Default</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <div
+          className="h-16 w-32 rounded-lg"
+          style={{ border: '2px solid var(--border-2)' }}
+        />
+        <span className="text-xs font-mono text-text-subtle">--border-2</span>
+        <span className="text-xs text-text-muted">Emphasis</span>
+      </div>
+    </div>
+  </div>
+);
+
+const meta: Meta = {
+  title: 'Tokens/Borders',
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Overview: Story = {
+  render: () => <AllBorders />,
+};
+
+/* ------------------------------------------------------------------ */
+/*  BorderProps API                                                   */
+/* ------------------------------------------------------------------ */
+
+const BorderBox = ({ label, props }: { label: string; props: BorderProps }) => (
+  <div className="flex flex-col items-center gap-2">
+    <div className={`h-20 w-32 bg-neutral-50 dark:bg-neutral-900 ${buildBorderClasses(props)}`} />
+    <span className="text-xs font-mono text-text-subtle text-center">{label}</span>
+  </div>
+);
+
+const BorderPropsDemo = () => (
+  <div className="p-6 max-w-5xl">
+    <h2 className="text-lg font-bold mb-1">BorderProps API</h2>
+    <p className="text-sm text-text-muted mb-6">
+      Typed border props: <code className="bg-neutral-100 dark:bg-neutral-800 px-1 rounded">border</code>,{' '}
+      <code className="bg-neutral-100 dark:bg-neutral-800 px-1 rounded">borderColor</code>,{' '}
+      <code className="bg-neutral-100 dark:bg-neutral-800 px-1 rounded">radius</code>.
+    </p>
+
+    {/* Border variants */}
+    <h3 className="text-sm font-semibold mb-3">Variants</h3>
+    <div className="flex gap-6 mb-8 flex-wrap">
+      <BorderBox label='border={true}' props={{ border: true, radius: 'md' }} />
+      <BorderBox label='border="default"' props={{ border: 'default', radius: 'md' }} />
+      <BorderBox label='border="strong"' props={{ border: 'strong', radius: 'md' }} />
+      <BorderBox label='border="subtle"' props={{ border: 'subtle', radius: 'md' }} />
+    </div>
+
+    {/* Border colors */}
+    <h3 className="text-sm font-semibold mb-3">Colors</h3>
+    <div className="flex gap-4 mb-8 flex-wrap">
+      {(['default', 'subtle', 'strong', 'primary', 'success', 'warning', 'error', 'info'] as const).map(color => (
+        <BorderBox
+          key={color}
+          label={`borderColor="${color}"`}
+          props={{ border: true, borderColor: color, radius: 'md' }}
+        />
+      ))}
+    </div>
+
+    {/* Radius scale */}
+    <h3 className="text-sm font-semibold mb-3">Radius</h3>
+    <div className="flex gap-6 flex-wrap">
+      {(['none', 'sm', 'md', 'lg', 'xl', 'full'] as const).map(r => (
+        <BorderBox
+          key={r}
+          label={`radius="${r}"`}
+          props={{ border: true, radius: r }}
+        />
+      ))}
+    </div>
+  </div>
+);
+
+export const PropAPI: Story = {
+  name: 'BorderProps API',
+  render: () => <BorderPropsDemo />,
+};

package/src/tokens/Colors.stories.tsx

@@ -0,0 +1,170 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+type ScaleConfig = {
+  label: string;
+  steps: number[];
+  /** Tailwind bg classes keyed by step — needed because dynamic class names aren't scanned */
+  bg: Record<number, string>;
+};
+
+/* Tailwind classes must be written out statically so the scanner picks them up */
+const scales: Record<string, ScaleConfig> = {
+  primary: {
+    label: 'Primary — Ocean Teal',
+    steps: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
+    bg: {
+      50: 'bg-primary-50', 100: 'bg-primary-100', 200: 'bg-primary-200', 300: 'bg-primary-300',
+      400: 'bg-primary-400', 500: 'bg-primary-500', 600: 'bg-primary-600', 700: 'bg-primary-700',
+      800: 'bg-primary-800', 900: 'bg-primary-900', 950: 'bg-primary-950',
+    },
+  },
+  secondary: {
+    label: 'Secondary — Sunny Yellow',
+    steps: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
+    bg: {
+      50: 'bg-secondary-50', 100: 'bg-secondary-100', 200: 'bg-secondary-200', 300: 'bg-secondary-300',
+      400: 'bg-secondary-400', 500: 'bg-secondary-500', 600: 'bg-secondary-600', 700: 'bg-secondary-700',
+      800: 'bg-secondary-800', 900: 'bg-secondary-900', 950: 'bg-secondary-950',
+    },
+  },
+  accent: {
+    label: 'Accent — Warm Terracotta',
+    steps: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
+    bg: {
+      50: 'bg-accent-50', 100: 'bg-accent-100', 200: 'bg-accent-200', 300: 'bg-accent-300',
+      400: 'bg-accent-400', 500: 'bg-accent-500', 600: 'bg-accent-600', 700: 'bg-accent-700',
+      800: 'bg-accent-800', 900: 'bg-accent-900', 950: 'bg-accent-950',
+    },
+  },
+  neutral: {
+    label: 'Neutral',
+    steps: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
+    bg: {
+      50: 'bg-neutral-50', 100: 'bg-neutral-100', 200: 'bg-neutral-200', 300: 'bg-neutral-300',
+      400: 'bg-neutral-400', 500: 'bg-neutral-500', 600: 'bg-neutral-600', 700: 'bg-neutral-700',
+      800: 'bg-neutral-800', 900: 'bg-neutral-900', 950: 'bg-neutral-950',
+    },
+  },
+  success: {
+    label: 'Success — Mint Green',
+    steps: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
+    bg: {
+      50: 'bg-success-50', 100: 'bg-success-100', 200: 'bg-success-200', 300: 'bg-success-300',
+      400: 'bg-success-400', 500: 'bg-success-500', 600: 'bg-success-600', 700: 'bg-success-700',
+      800: 'bg-success-800', 900: 'bg-success-900', 950: 'bg-success-950',
+    },
+  },
+  warning: {
+    label: 'Warning — Amber',
+    steps: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
+    bg: {
+      50: 'bg-warning-50', 100: 'bg-warning-100', 200: 'bg-warning-200', 300: 'bg-warning-300',
+      400: 'bg-warning-400', 500: 'bg-warning-500', 600: 'bg-warning-600', 700: 'bg-warning-700',
+      800: 'bg-warning-800', 900: 'bg-warning-900', 950: 'bg-warning-950',
+    },
+  },
+  error: {
+    label: 'Error — Coral Red',
+    steps: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
+    bg: {
+      50: 'bg-error-50', 100: 'bg-error-100', 200: 'bg-error-200', 300: 'bg-error-300',
+      400: 'bg-error-400', 500: 'bg-error-500', 600: 'bg-error-600', 700: 'bg-error-700',
+      800: 'bg-error-800', 900: 'bg-error-900', 950: 'bg-error-950',
+    },
+  },
+  info: {
+    label: 'Info — Sky Blue',
+    steps: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
+    bg: {
+      50: 'bg-info-50', 100: 'bg-info-100', 200: 'bg-info-200', 300: 'bg-info-300',
+      400: 'bg-info-400', 500: 'bg-info-500', 600: 'bg-info-600', 700: 'bg-info-700',
+      800: 'bg-info-800', 900: 'bg-info-900', 950: 'bg-info-950',
+    },
+  },
+  support: {
+    label: 'Support — Sage Green',
+    steps: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
+    bg: {
+      50: 'bg-support-50', 100: 'bg-support-100', 200: 'bg-support-200', 300: 'bg-support-300',
+      400: 'bg-support-400', 500: 'bg-support-500', 600: 'bg-support-600', 700: 'bg-support-700',
+      800: 'bg-support-800', 900: 'bg-support-900', 950: 'bg-support-950',
+    },
+  },
+};
+
+const Swatch = ({ name, step, bgClass }: { name: string; step: number; bgClass: string }) => (
+  <div className="flex flex-col items-center gap-1">
+    <div className={`h-12 w-full rounded border border-neutral-300 dark:border-neutral-700 ${bgClass}`} />
+    <span className="text-xs font-mono text-text-muted">{step}</span>
+    <span className="text-[10px] font-mono text-text-subtle">{name}-{step}</span>
+  </div>
+);
+
+const ColorScale = ({ name, config }: { name: string; config: ScaleConfig }) => (
+  <div className="mb-8">
+    <h3 className="text-sm font-semibold mb-2">{config.label}</h3>
+    <div className="grid grid-cols-11 gap-1">
+      {config.steps.map((step) => (
+        <Swatch key={step} name={name} step={step} bgClass={config.bg[step] ?? ''} />
+      ))}
+    </div>
+  </div>
+);
+
+/* Opacity demo — static class names for Tailwind scanner */
+const OpacityDemo = () => (
+  <div className="mb-8">
+    <h3 className="text-sm font-semibold mb-2">Opacity Modifiers</h3>
+    <p className="text-xs text-text-muted mb-3">
+      With oklch in <code className="bg-neutral-100 dark:bg-neutral-800 px-1 rounded">@theme</code>,
+      opacity modifiers like <code className="bg-neutral-100 dark:bg-neutral-800 px-1 rounded">bg-primary-500/50</code> work at build time.
+    </p>
+    <div className="flex gap-2 items-end">
+      <div className="flex flex-col items-center gap-1">
+        <div className="h-12 w-16 rounded bg-primary-500" />
+        <span className="text-xs font-mono text-text-muted">100%</span>
+      </div>
+      <div className="flex flex-col items-center gap-1">
+        <div className="h-12 w-16 rounded bg-primary-500/75" />
+        <span className="text-xs font-mono text-text-muted">75%</span>
+      </div>
+      <div className="flex flex-col items-center gap-1">
+        <div className="h-12 w-16 rounded bg-primary-500/50" />
+        <span className="text-xs font-mono text-text-muted">50%</span>
+      </div>
+      <div className="flex flex-col items-center gap-1">
+        <div className="h-12 w-16 rounded bg-primary-500/25" />
+        <span className="text-xs font-mono text-text-muted">25%</span>
+      </div>
+      <div className="flex flex-col items-center gap-1">
+        <div className="h-12 w-16 rounded bg-primary-500/10" />
+        <span className="text-xs font-mono text-text-muted">10%</span>
+      </div>
+    </div>
+  </div>
+);
+
+const AllColors = () => (
+  <div className="p-6 max-w-5xl">
+    <h2 className="text-lg font-bold mb-1">Color Tokens</h2>
+    <p className="text-sm text-text-muted mb-6">
+      Color scales defined in oklch. Supports Tailwind v4 opacity modifiers.
+    </p>
+    <OpacityDemo />
+    {Object.entries(scales).map(([name, config]) => (
+      <ColorScale key={name} name={name} config={config} />
+    ))}
+  </div>
+);
+
+const meta: Meta = {
+  title: 'Tokens/Colors',
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Palette: Story = {
+  render: () => <AllColors />,
+};