System

import { createRengeTheme } from "@renge-ui/tokens";

const theme = createRengeTheme({
  profile:    "ocean",   // 'ocean' | 'earth' | 'twilight' | 'fire' | 'void' | 'leaf'
  mode:       "light",   // 'light' | 'dark'
  baseUnit:   4,         // Spacing multiplier in px — try 6 for denser UIs
  typeBase:   16,        // Root font size in px
  scaleRatio: 1.618,     // Typography scale ratio (φ = golden ratio)
  variance:   0,         // 0–1 tolerance drift (0 = exact math, deterministic)
  selector:   ":root",   // CSS selector to wrap the variables in
});

// theme.css   — full :root { --renge-* ... } string, ready to inject
// theme.vars  — Record<string, string> of every --renge-* variable
// theme.config — resolved config with all defaults applied

import { rengeVars } from "@renge-ui/tokens";

// Color (22 semantic tokens, profile-reactive)
rengeVars.color.bg            // "var(--renge-color-bg)"
rengeVars.color.accent        // "var(--renge-color-accent)"
rengeVars.color.danger        // "var(--renge-color-danger)"

// Spacing (Fibonacci × baseUnit, steps 0–10)
rengeVars.space[3]   // "var(--renge-space-3)"  → 12px (Fib 3 × 4)
rengeVars.space[5]   // "var(--renge-space-5)"  → 32px (Fib 8 × 4)

// Typography (PHI scale, 8 steps)
rengeVars.fontSize.base       // "var(--renge-font-size-base)"
rengeVars.fontSize.lg         // "var(--renge-font-size-lg)"
rengeVars.lineHeight.base     // "var(--renge-line-height-base)"

// Motion (Fibonacci × 100ms, steps 0–10)
rengeVars.duration[2]         // "var(--renge-duration-2)"  → 200ms
rengeVars.duration[5]         // "var(--renge-duration-5)"  → 800ms
rengeVars.easing.out          // "var(--renge-easing-ease-out)"
rengeVars.easing.spring       // "var(--renge-easing-spring)"

// Radius (Fibonacci × baseUnit, steps none/1–5/full)
rengeVars.radius[2]           // "var(--renge-radius-2)"   → 8px
rengeVars.radius.full         // "var(--renge-radius-full)" → pill

// Layout (PHI-derived containers, Fibonacci column min-widths, φ aspect ratios)
rengeVars.container.sm        // "var(--renge-container-sm)"  → 524px (200 × φ²)
rengeVars.container.lg        // "var(--renge-container-lg)"  → 1371px (200 × φ⁴)
rengeVars.colMin.sm           // "var(--renge-col-min-sm)"    → 272px (34 × 8px)
rengeVars.aspect.golden       // "var(--renge-aspect-golden)" → 1.618034 (φ)
rengeVars.aspect.vertical     // "var(--renge-aspect-vertical)" → 0.618034 (1/φ)

import { createRengeTheme, rengeVars } from "@renge-ui/tokens";

const theme = createRengeTheme({ profile: "earth", mode: "light" });

const aliases: [string, string][] = [
  ["--color-bg-primary",   rengeVars.color.bg],
  ["--color-bg-secondary", rengeVars.color.bgSubtle],
  ["--color-primary",      rengeVars.color.accent],
  ["--color-error",        rengeVars.color.danger],
  ["--space-sm",           rengeVars.space[2]],
  ["--space-md",           rengeVars.space[4]],
];

const aliasCSS = `:root {
${aliases.map(([k, v]) => `  ${k}: ${v};`).join("\n")}
}`;
document.head.insertAdjacentHTML("beforeend", `<style>${theme.css}\n${aliasCSS}</style>`);

rengeVars.container.sm   // "var(--renge-container-sm)"   → 524px  (200 × φ²)
rengeVars.container.md   // "var(--renge-container-md)"   → 847px  (200 × φ³)
rengeVars.container.lg   // "var(--renge-container-lg)"   → 1371px (200 × φ⁴) ← default
rengeVars.container.xl   // "var(--renge-container-xl)"   → 2218px (200 × φ⁵)
rengeVars.container.full // "var(--renge-container-full)" → 100%

rengeVars.colMin.xs   // "var(--renge-col-min-xs)" → 168px (Fib 21 × 8)
rengeVars.colMin.sm   // "var(--renge-col-min-sm)" → 272px (Fib 34 × 8)
rengeVars.colMin.md   // "var(--renge-col-min-md)" → 440px (Fib 55 × 8)
rengeVars.colMin.lg   // "var(--renge-col-min-lg)" → 712px (Fib 89 × 8)

rengeVars.aspect.square   // "var(--renge-aspect-square)"   → 1
rengeVars.aspect.golden   // "var(--renge-aspect-golden)"   → 1.618034 (φ)
rengeVars.aspect.vertical // "var(--renge-aspect-vertical)" → 0.618034 (1/φ)
rengeVars.aspect.video    // "var(--renge-aspect-video)"    → 1.777778 (16/9)
rengeVars.aspect.classic  // "var(--renge-aspect-classic)"  → 1.333333 (4/3)

{/* animation prop — typed to AnimationName */}
<Heading level={2} animation="breathe">Living proportion.</Heading>
<Text size="lg" animation="float">Natural mathematics.</Text>
<Card animation="bloom"><Text>Enters with bloom.</Text></Card>
<Button animation="pulse">Subscribe</Button>

{/* Any element — via CSS variable */}
<div style={{ animation: "var(--renge-animation-spiral-in)" }}>
  Custom element.
</div>

{/* Combine with duration tokens for speed control */}
<div style={{
  animation: "var(--renge-animation-float)",
  animationDuration: "var(--renge-duration-7)",  // 2100ms — faster than default
}}>
  Faster float.
</div>

{/* Tailwind utility classes */}
<div class="ease-renge-ease-out duration-renge-3 transition-all">
  Entrances.
</div>

{/* CSS directly */}
.my-element {
  transition: transform var(--renge-duration-3) var(--renge-easing-ease-out);
}

{/* rengeVars — no string construction */}
import { rengeVars } from "@renge-ui/tokens";
style={{ transition: `opacity ${rengeVars.duration[3]} ${rengeVars.easing.out}` }}