@eventuras/ratio-ui 1.0.0

package/src/tokens/Spacing.stories.tsx

@@ -0,0 +1,142 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import type { Space } from './spacing';
+import { buildSpacingClasses } from './spacing';
+
+const spacingSteps = [
+  { name: '3xs', label: '3XS' },
+  { name: '2xs', label: '2XS' },
+  { name: 'xs', label: 'XS' },
+  { name: 's', label: 'S' },
+  { name: 'm', label: 'M' },
+  { name: 'l', label: 'L' },
+  { name: 'xl', label: 'XL' },
+  { name: '2xl', label: '2XL' },
+  { name: '3xl', label: '3XL' },
+];
+
+const AllSpacing = () => (
+  <div className="p-6 max-w-5xl">
+    <h2 className="text-lg font-bold mb-1">Spacing Tokens</h2>
+    <p className="text-sm text-text-muted mb-6">
+      Fluid spacing scale powered by <code className="bg-neutral-100 dark:bg-neutral-800 px-1 rounded">clamp()</code> — adapts to viewport width.
+    </p>
+
+    <div className="space-y-3">
+      {spacingSteps.map(({ name, label }) => (
+        <div key={name} className="flex items-center gap-4">
+          <span className="text-xs font-mono text-text-subtle w-20 shrink-0">--space-{name}</span>
+          <span className="text-xs text-text-muted w-8 shrink-0 text-right">{label}</span>
+          <div
+            className="h-6 rounded bg-primary-400"
+            style={{ width: `var(--space-${name})` }}
+          />
+        </div>
+      ))}
+    </div>
+
+    <h3 className="text-sm font-semibold mt-8 mb-3">Spacing Demo</h3>
+    <p className="text-xs text-text-muted mb-3">
+      Boxes with increasing gap using each spacing token.
+    </p>
+    <div className="space-y-4">
+      {spacingSteps.map(({ name, label }) => (
+        <div key={name} className="flex items-center">
+          <span className="text-xs font-mono text-text-subtle w-20 shrink-0">gap: {label}</span>
+          <div className="flex" style={{ gap: `var(--space-${name})` }}>
+            <div className="h-8 w-8 rounded bg-primary-300" />
+            <div className="h-8 w-8 rounded bg-primary-400" />
+            <div className="h-8 w-8 rounded bg-primary-500" />
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+const meta: Meta = {
+  title: 'Tokens/Spacing',
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Overview: Story = {
+  render: () => <AllSpacing />,
+};
+
+/* ------------------------------------------------------------------ */
+/*  Semantic spacing scale (Space type)                               */
+/* ------------------------------------------------------------------ */
+
+const semanticSteps: { value: Space; css: string; tailwind: string }[] = [
+  { value: 'none', css: '—',          tailwind: 'p-0 / gap-0' },
+  { value: 'xs',   css: '--space-xs', tailwind: 'p-xs / gap-xs' },
+  { value: 'sm',   css: '--space-s',  tailwind: 'p-sm / gap-sm' },
+  { value: 'md',   css: '--space-m',  tailwind: 'p-md / gap-md' },
+  { value: 'lg',   css: '--space-l',  tailwind: 'p-lg / gap-lg' },
+  { value: 'xl',   css: '--space-xl', tailwind: 'p-xl / gap-xl' },
+];
+
+const SemanticScale = () => (
+  <div className="p-6 max-w-5xl">
+    <h2 className="text-lg font-bold mb-1">Semantic Spacing Scale</h2>
+    <p className="text-sm text-text-muted mb-6">
+      The 6-step <code className="bg-neutral-100 dark:bg-neutral-800 px-1 rounded">Space</code> type
+      used by <code className="bg-neutral-100 dark:bg-neutral-800 px-1 rounded">SpacingProps</code> (padding, margin, gap).
+      Backed by fluid CSS tokens.
+    </p>
+
+    {/* Visual scale */}
+    <div className="space-y-3 mb-8">
+      {semanticSteps.map(({ value, css, tailwind }) => (
+        <div key={value} className="flex items-center gap-4">
+          <span className="text-xs font-mono text-text-subtle w-10 shrink-0">{value}</span>
+          <span className="text-xs font-mono text-text-subtle w-24 shrink-0">{css}</span>
+          <div
+            className="h-6 rounded bg-primary-400"
+            style={{ width: value === 'none' ? '2px' : `var(--spacing-${value})` }}
+          />
+          <span className="text-[10px] font-mono text-text-subtle">{tailwind}</span>
+        </div>
+      ))}
+    </div>
+
+    {/* Gap demo */}
+    <h3 className="text-sm font-semibold mb-3">Gap demo</h3>
+    <p className="text-xs text-text-muted mb-3">
+      Each row uses <code className="bg-neutral-100 dark:bg-neutral-800 px-1 rounded">buildSpacingClasses({'{ gap: value }'})</code>.
+    </p>
+    <div className="space-y-4">
+      {semanticSteps.map(({ value }) => (
+        <div key={value} className="flex items-center">
+          <span className="text-xs font-mono text-text-subtle w-10 shrink-0">{value}</span>
+          <div className={`flex ${buildSpacingClasses({ gap: value })}`}>
+            <div className="h-8 w-8 rounded bg-primary-300" />
+            <div className="h-8 w-8 rounded bg-primary-400" />
+            <div className="h-8 w-8 rounded bg-primary-500" />
+          </div>
+        </div>
+      ))}
+    </div>
+
+    {/* Padding demo */}
+    <h3 className="text-sm font-semibold mt-8 mb-3">Padding demo</h3>
+    <div className="space-y-3">
+      {semanticSteps.filter(s => s.value !== 'none').map(({ value }) => (
+        <div key={value} className="flex items-center gap-4">
+          <span className="text-xs font-mono text-text-subtle w-10 shrink-0">{value}</span>
+          <div className={`inline-block bg-primary-100 dark:bg-primary-900 rounded border border-primary-300 ${buildSpacingClasses({ padding: value })}`}>
+            <div className="h-6 w-20 rounded bg-primary-400 text-[10px] font-mono text-white flex items-center justify-center">
+              content
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+export const SemanticSpacing: Story = {
+  name: 'Semantic Scale (Space type)',
+  render: () => <SemanticScale />,
+};

package/src/tokens/Typography.stories.tsx

@@ -0,0 +1,75 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+const fontSizes = [
+  { name: 'xs', label: 'Extra Small' },
+  { name: 'sm', label: 'Small' },
+  { name: 'base', label: 'Base' },
+  { name: 'lg', label: 'Large' },
+  { name: 'xl', label: 'Extra Large' },
+  { name: '2xl', label: '2XL' },
+  { name: '3xl', label: '3XL' },
+  { name: '4xl', label: '4XL' },
+  { name: '5xl', label: '5XL' },
+  { name: '6xl', label: '6XL' },
+];
+
+const fonts = [
+  { name: 'sans', css: 'var(--font-sans)', role: 'Body text (--font-body)' },
+  { name: 'serif', css: 'var(--font-serif)', role: 'Display headings (--font-display)' },
+  { name: 'mono', css: 'var(--font-mono)', role: 'Code' },
+];
+
+const AllTypography = () => (
+  <div className="p-6 max-w-5xl">
+    <h2 className="text-lg font-bold mb-1">Typography Tokens</h2>
+    <p className="text-sm text-text-muted mb-6">
+      Fluid type scale powered by <code className="bg-neutral-100 dark:bg-neutral-800 px-1 rounded">clamp()</code> — scales smoothly between viewport sizes.
+    </p>
+
+    <h3 className="text-sm font-semibold mb-3">Font Families</h3>
+    <div className="space-y-4 mb-8">
+      {fonts.map(({ name, css, role }) => (
+        <div key={name} className="flex items-baseline gap-4">
+          <span className="text-xs font-mono text-text-subtle w-16 shrink-0">--font-{name}</span>
+          <span className="text-xl" style={{ fontFamily: css }}>
+            The quick brown fox jumps over the lazy dog
+          </span>
+          <span className="text-xs text-text-subtle shrink-0">{role}</span>
+        </div>
+      ))}
+    </div>
+
+    <h3 className="text-sm font-semibold mb-3">Type Scale</h3>
+    <div className="space-y-3">
+      {fontSizes.map(({ name, label }) => (
+        <div key={name} className="flex items-baseline gap-4 border-b border-neutral-200 dark:border-neutral-800 pb-2">
+          <span className="text-xs font-mono text-text-subtle w-24 shrink-0">--font-size-{name}</span>
+          <span style={{ fontSize: `var(--font-size-${name})` }}>
+            {label} — Aa Bb Cc 123
+          </span>
+        </div>
+      ))}
+    </div>
+
+    <h3 className="text-sm font-semibold mt-8 mb-3">Heading Hierarchy</h3>
+    <div className="space-y-2 [&_h1]:mt-0 [&_h2]:mt-0 [&_h3]:mt-0 [&_h4]:mt-0 [&_h5]:mt-0 [&_h6]:mt-0">
+      <h1>Heading 1 — Display serif</h1>
+      <h2>Heading 2 — Display serif</h2>
+      <h3>Heading 3 — Display serif</h3>
+      <h4>Heading 4 — Body sans</h4>
+      <h5>Heading 5 — Body sans</h5>
+      <h6>Heading 6 — Body sans</h6>
+    </div>
+  </div>
+);
+
+const meta: Meta = {
+  title: 'Tokens/Typography',
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Overview: Story = {
+  render: () => <AllTypography />,
+};

package/src/tokens/border.css

@@ -0,0 +1,7 @@
+@theme {
+  /* Border radius */
+  --radius-sm: 0.25rem;
+  --radius: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+}

package/src/tokens/borders.ts

@@ -0,0 +1,70 @@
+/**
+ * Border types and class builder
+ */
+
+import type { Color } from './colors';
+
+export type BorderVariant = 'default' | 'strong' | 'subtle';
+
+export interface BorderProps {
+  border?: boolean | BorderVariant;
+  borderColor?: 'default' | 'subtle' | 'strong' | Color;
+  radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+}
+
+const radiusMap: Record<NonNullable<BorderProps['radius']>, string> = {
+  none: 'rounded-none',
+  sm: 'rounded-sm',
+  md: 'rounded',
+  lg: 'rounded-lg',
+  xl: 'rounded-xl',
+  full: 'rounded-full',
+};
+
+const borderColorMap: Record<NonNullable<BorderProps['borderColor']>, string> = {
+  default: 'border-border-1',
+  subtle: 'border-border-1',
+  strong: 'border-border-2',
+  neutral: 'border-neutral-300',
+  primary: 'border-primary-400',
+  secondary: 'border-secondary-400',
+  accent: 'border-accent-400',
+  success: 'border-success-border',
+  warning: 'border-warning-border',
+  error: 'border-error-border',
+  info: 'border-info-border',
+};
+
+export function buildBorderClasses(props: BorderProps): string {
+  const classes: string[] = [];
+
+  if (props.border) {
+    const variant = props.border === true ? 'default' : props.border;
+    switch (variant) {
+      case 'default':
+        classes.push('border');
+        break;
+      case 'strong':
+        classes.push('border-2');
+        break;
+      case 'subtle':
+        classes.push('border border-dashed');
+        break;
+    }
+
+    // Default border color when none specified
+    if (!props.borderColor) {
+      classes.push('border-border-1');
+    }
+  }
+
+  if (props.borderColor) {
+    classes.push(borderColorMap[props.borderColor]);
+  }
+
+  if (props.radius) {
+    classes.push(radiusMap[props.radius]);
+  }
+
+  return classes.join(' ');
+}

package/src/tokens/colors.ts

@@ -0,0 +1,29 @@
+/**
+ * Shared color and status types
+ */
+
+/** Full semantic color palette */
+export type Color =
+  | 'neutral'
+  | 'primary'
+  | 'secondary'
+  | 'accent'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'info';
+
+/** Status subset — for components that signal state (Panel, Badge, etc.) */
+export type Status = 'neutral' | 'success' | 'warning' | 'error' | 'info';
+
+/** Background color classes for surface components (Section, Card, etc.) */
+export const surfaceBgClasses: Record<Color, string> = {
+  neutral: 'bg-neutral-50 dark:bg-neutral-900',
+  primary: 'bg-primary-50 dark:bg-primary-950',
+  secondary: 'bg-secondary-50 dark:bg-secondary-950',
+  accent: 'bg-accent-50 dark:bg-accent-950',
+  success: 'bg-success-bg',
+  warning: 'bg-warning-bg',
+  error: 'bg-error-bg',
+  info: 'bg-info-bg',
+};

package/src/tokens/index.css

@@ -0,0 +1,5 @@
+/* Import all design tokens */
+@import "./theme.css";
+@import "./typography.css";
+@import "./spacing.css";
+@import "./border.css";

package/src/tokens/index.ts

@@ -0,0 +1,3 @@
+export { type Space, type SpacingProps, buildSpacingClasses, extractSpacingProps } from './spacing';
+export { type BorderVariant, type BorderProps, buildBorderClasses } from './borders';
+export { type Color, type Status } from './colors';

package/src/tokens/spacing.css

@@ -0,0 +1,19 @@
+@theme {
+  /* Fluid spacing - @link https://utopia.fyi/space/calculator */
+  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
+  --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
+  --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
+  --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
+  --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
+  --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
+  --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
+  --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
+  --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
+
+  /* Semantic spacing scale for Tailwind utilities (p-xs, gap-md, m-lg, etc.) */
+  --spacing-xs: var(--space-xs);
+  --spacing-sm: var(--space-s);
+  --spacing-md: var(--space-m);
+  --spacing-lg: var(--space-l);
+  --spacing-xl: var(--space-xl);
+}

package/src/tokens/spacing.ts

@@ -0,0 +1,65 @@
+/** 6-step semantic spacing scale backed by fluid CSS tokens */
+export type Space = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface SpacingProps {
+  padding?: Space;
+  paddingX?: Space;
+  paddingY?: Space;
+  paddingTop?: Space;
+  paddingBottom?: Space;
+  margin?: Space;
+  marginX?: Space;
+  marginY?: Space;
+  marginTop?: Space;
+  marginBottom?: Space;
+  gap?: Space;
+}
+
+/** Maps a Space token to the Tailwind suffix (matches --spacing-* keys) */
+const spaceValue: Record<Space, string> = {
+  none: '0',
+  xs: 'xs',
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg',
+  xl: 'xl',
+};
+
+const spacingKeys: readonly (keyof SpacingProps)[] = [
+  'padding', 'paddingX', 'paddingY', 'paddingTop', 'paddingBottom',
+  'margin', 'marginX', 'marginY', 'marginTop', 'marginBottom',
+  'gap',
+];
+
+/** Split SpacingProps from remaining props. Useful for forwarding HTML attrs without leaking spacing keys to the DOM. */
+export function extractSpacingProps<T extends SpacingProps>(
+  props: T,
+): [SpacingProps, Omit<T, keyof SpacingProps>] {
+  const spacing: Partial<SpacingProps> = {};
+  const rest = { ...props };
+  for (const key of spacingKeys) {
+    if (key in rest) {
+      (spacing as any)[key] = rest[key];
+      delete (rest as any)[key];
+    }
+  }
+  return [spacing as SpacingProps, rest as Omit<T, keyof SpacingProps>];
+}
+
+export function buildSpacingClasses(props: SpacingProps): string {
+  const classes: string[] = [];
+
+  if (props.padding) classes.push(`p-${spaceValue[props.padding]}`);
+  if (props.paddingX) classes.push(`px-${spaceValue[props.paddingX]}`);
+  if (props.paddingY) classes.push(`py-${spaceValue[props.paddingY]}`);
+  if (props.paddingTop) classes.push(`pt-${spaceValue[props.paddingTop]}`);
+  if (props.paddingBottom) classes.push(`pb-${spaceValue[props.paddingBottom]}`);
+  if (props.margin) classes.push(`m-${spaceValue[props.margin]}`);
+  if (props.marginX) classes.push(`mx-${spaceValue[props.marginX]}`);
+  if (props.marginY) classes.push(`my-${spaceValue[props.marginY]}`);
+  if (props.marginTop) classes.push(`mt-${spaceValue[props.marginTop]}`);
+  if (props.marginBottom) classes.push(`mb-${spaceValue[props.marginBottom]}`);
+  if (props.gap) classes.push(`gap-${spaceValue[props.gap]}`);
+
+  return classes.join(' ');
+}