@renge-ui/petals13 categories · 129 petals

Petals

Semantic composition patterns for Renge. Pre-made combinations of tokens for typography, spacing, cards, forms, navigation, overlays, and more — bridging the token system and component implementations without prescribing markup.

Renge tokens are orthogonal — each scale (spacing, color, typography) stands alone. This is powerful for fine-grained control, but consumers often compose the same combinations repeatedly. Petals codify those combinations as named, typed, documented objects.

They work in any framework. Pure CSS custom property references — no runtime, no opinion on markup.

Usage

pnpm add @renge-ui/petals
# or
npm install @renge-ui/petals

import { petals } from '@renge-ui/petals';

// Typography
const heading = petals.typography.displayLarge.tokens;
// → { fontSize: 'var(--renge-font-size-4xl)', lineHeight: 'var(--renge-line-height-4xl)' }

// Semantic alert
const alert = petals.alerts.success.tokens;
// → { padding, borderRadius, border: '1px solid var(--renge-color-success)', ... }

// Form controls
const checkbox = petals.forms.checkbox.tokens;
// → { width, height, borderRadius, border, transition }

// Overlay patterns
const dropdown = petals.overlay.dropdownMenu.tokens;
// → { padding, borderRadius, boxShadow, border, zIndex: 'var(--renge-zindex-dropdown)' }

// Combine multiple petals
const cardHeading = {
  ...petals.typography.headingMedium.tokens,
  ...petals.cards.surfaceComfortable.tokens,
  color: 'var(--renge-color-fg)',
};

Petals can be spread directly onto React, Vue, or Svelte style props, passed to a CSS-in-JS system, or mapped to CSS variables in a stylesheet.

// React
<div style={petals.alerts.danger.tokens}>Error message</div>

// Vue
<div :style="petals.forms.textarea.tokens">...</div>

// Vanilla CSS object
const sheet = Object.entries(petals.navigation.navItem.tokens)
  .map(([prop, val]) => `${prop}: ${val};`)
  .join(' ');

Why Petals?

"Every lotus blooms one petal at a time. These are Renge's. Pre-composed token combinations that sit between the math and the markup."

Petals are not components. The distinction matters:

Petals do

Compose tokens into semantic patterns
Stay framework-agnostic
Enable consistent token combinations
Document common design decisions
Export pure CSS custom property references

Petals don't

Include component logic or event handlers
Prescribe HTML structure
Create new colors or spacing values
Require a specific framework or bundler
Compile to CSS at build time

Typography

8 petals

Font size and line-height pairs derived from the PHI scale. Apply these to any text-bearing element to lock into the mathematical rhythm.

Display Large

displayLarge

Hero headline — 4xl size with generous line-height

Renge

{
  "fontSize": "var(--renge-font-size-4xl)",
  "lineHeight": "var(--renge-line-height-4xl)"
}

Display Medium

displayMedium

Page title — 3xl size with proportional line-height

Renge

{
  "fontSize": "var(--renge-font-size-3xl)",
  "lineHeight": "var(--renge-line-height-3xl)"
}

Heading Large

headingLarge

Section heading — 2xl with breathing room

Heading text

{
  "fontSize": "var(--renge-font-size-2xl)",
  "lineHeight": "var(--renge-line-height-2xl)"
}

Heading Medium

headingMedium

Subsection — xl with natural rhythm

Heading text

{
  "fontSize": "var(--renge-font-size-xl)",
  "lineHeight": "var(--renge-line-height-xl)"
}

Body Large

bodyLarge

Comfortable reading text — lg size for emphasis

The quick brown fox jumps over the lazy dog

{
  "fontSize": "var(--renge-font-size-lg)",
  "lineHeight": "var(--renge-line-height-lg)"
}

Body Regular

bodyRegular

Default body text — base size for prose

The quick brown fox jumps over the lazy dog

{
  "fontSize": "var(--renge-font-size-base)",
  "lineHeight": "var(--renge-line-height-base)"
}

Body Small

bodySm

Secondary text — sm size for captions

The quick brown fox jumps over the lazy dog

{
  "fontSize": "var(--renge-font-size-sm)",
  "lineHeight": "var(--renge-line-height-sm)"
}

Label XS

labelXs

UI label — xs size for forms and metadata

The quick brown fox jumps over the lazy dog

{
  "fontSize": "var(--renge-font-size-xs)",
  "lineHeight": "var(--renge-line-height-xs)"
}

Spacing

4 petals

Padding and gap combinations following the Fibonacci sequence. One petal sets both dimensions consistently.

Generous

generous

Maximum breathing room — space-5

Item 1

Item 2

{
  "padding": "var(--renge-space-5)",
  "gap": "var(--renge-space-4)"
}

Comfortable

comfortable

Natural spacing — space-4 with gap-3

Item 1

Item 2

{
  "padding": "var(--renge-space-4)",
  "gap": "var(--renge-space-3)"
}

Compact

compact

Tight spacing — space-3 with gap-2

Item 1

Item 2

{
  "padding": "var(--renge-space-3)",
  "gap": "var(--renge-space-2)"
}

Condensed

condensed

Minimal spacing — space-2 with gap-1

Item 1

Item 2

{
  "padding": "var(--renge-space-2)",
  "gap": "var(--renge-space-1)"
}

Cards

4 petals

Surface styling with padding, radius, and shadow elevation. Four levels from generous to minimal.

Surface Generous

surfaceGenerous

Full-featured card — max padding, radius, and shadow

Card Title

Surface styled with surfaceGenerous.

{
  "padding": "var(--renge-space-5)",
  "borderRadius": "var(--renge-radius-5)",
  "boxShadow": "var(--renge-shadow-layer-2)"
}

Surface Comfortable

surfaceComfortable

Standard card — balanced padding and elevation

Card Title

Surface styled with surfaceComfortable.

{
  "padding": "var(--renge-space-4)",
  "borderRadius": "var(--renge-radius-4)",
  "boxShadow": "var(--renge-shadow-layer-1)"
}

Surface Compact

surfaceCompact

Tight card — reduced padding, softer corners

Card Title

Surface styled with surfaceCompact.

{
  "padding": "var(--renge-space-3)",
  "borderRadius": "var(--renge-radius-3)",
  "boxShadow": "var(--renge-shadow-layer-1)"
}

Surface Minimal

surfaceMinimal

Subtle container — minimal padding, no shadow

Card Title

Surface styled with surfaceMinimal.

{
  "padding": "var(--renge-space-2)",
  "borderRadius": "var(--renge-radius-2)",
  "boxShadow": "none"
}

Interactive

7 petals

Button sizing and focus indicator. Padding, radius, and transition timing in one application.

Button Large

buttonLarge

Primary action button — generous padding, prominent radius

{
  "padding": "var(--renge-space-3) var(--renge-space-4)",
  "borderRadius": "var(--renge-radius-3)",
  "transition": "all var(--renge-duration-2) var(--renge-easing-ease-out)"
}

Button Medium

buttonMedium

Standard button — balanced padding and radius

{
  "padding": "var(--renge-space-2) var(--renge-space-3)",
  "borderRadius": "var(--renge-radius-2)",
  "transition": "all var(--renge-duration-2) var(--renge-easing-ease-out)"
}

Button Small

buttonSmall

Compact button — minimal padding, subtle corners

{
  "padding": "var(--renge-space-1) var(--renge-space-2)",
  "borderRadius": "var(--renge-radius-1)",
  "transition": "all var(--renge-duration-1) var(--renge-easing-ease-out)"
}

Focus State

focus

Keyboard focus ring — 3px accent glow via color-mix, WCAG-compliant

unfocused

Input

:focus

Input

{
  "outline": "none",
  "boxShadow": "var(--renge-shadow-focus)",
  "transition": "box-shadow var(--renge-duration-2) var(--renge-easing-ease-out)"
}

Hover Surface

hoverSurface

Subtle background shift on pointer entry — bg-subtle with ease-out

Dashboard

Analytics:hover

Settings

Team

{
  "background": "var(--renge-color-bg-subtle)",
  "transition": "background var(--renge-duration-1) var(--renge-easing-ease-out)"
}

Active Surface

activeSurface

Pressed/active state background — bg-muted, slightly deeper than hover

Dashboard

Analytics

Settings:active

Team

{
  "background": "var(--renge-color-bg-muted)",
  "transition": "background var(--renge-duration-1) var(--renge-easing-ease-out)"
}

Interactive Base

interactiveBase

Full set of interaction state transitions — background, box-shadow, and transform with Renge easing

default

Button

:hover

Button

:active

Button

:focus

Button

{
  "transition": "background var(--renge-duration-1) var(--renge-easing-ease-out), box-shadow var(--renge-duration-2) var(--renge-easing-ease-out), transform var(--renge-duration-1) var(--renge-easing-spring)"
}

Compositions

7 petals

Higher-level patterns combining multiple token types — text fields, badges, and chips.

Text Field

textField

Input field styling — padding, radius, border, transition

{
  "padding": "var(--renge-space-2) var(--renge-space-3)",
  "borderRadius": "var(--renge-radius-2)",
  "border": "1px solid var(--renge-color-border)",
  "transition": "all var(--renge-duration-2) var(--renge-easing-ease-out)"
}

Badge

badge

Compact label — tight padding with condensed spacing

Badge

{
  "padding": "var(--renge-space-1) var(--renge-space-2)",
  "borderRadius": "var(--renge-radius-full)",
  "fontSize": "var(--renge-font-size-xs)",
  "lineHeight": "var(--renge-line-height-xs)"
}

Chip

chip

Dismissible tag — small padding with focus support

Chip ×

{
  "padding": "var(--renge-space-1) var(--renge-space-3)",
  "borderRadius": "var(--renge-radius-full)",
  "fontSize": "var(--renge-font-size-sm)",
  "lineHeight": "var(--renge-line-height-sm)"
}

Hero Layout

heroSection

Large-viewport landing section — generous vertical padding with centered content max-width

Hero Headline

Supporting subtitle text here

Get started

{
  "paddingTop": "var(--renge-space-8)",
  "paddingBottom": "var(--renge-space-8)",
  "paddingLeft": "var(--renge-space-5)",
  "paddingRight": "var(--renge-space-5)",
  "maxWidth": "var(--renge-container-lg)"
}

Stat Grid

statGrid

2–4 metric grid — gap derived from Fibonacci with comfortable card padding

24.9K

Users

$48.2K

Revenue

98.1%

Uptime

1.2s

Load time

{
  "display": "grid",
  "gap": "var(--renge-space-5)",
  "padding": "var(--renge-space-4)"
}

Form Section

formSection

Vertical-rhythm form layout — label group → inputs → submit with PHI-spaced gap

Name

{
  "display": "flex",
  "flexDirection": "column",
  "gap": "var(--renge-space-5)",
  "padding": "var(--renge-space-5)"
}

Data Row

dataRow

Label + value pair for detail views — horizontal layout with tight vertical padding

Full nameJane Smith

Emailjane@example.com

PlanPro

Member sinceJan 2024

{
  "display": "flex",
  "justifyContent": "space-between",
  "alignItems": "baseline",
  "gap": "var(--renge-space-4)",
  "paddingTop": "var(--renge-space-3)",
  "paddingBottom": "var(--renge-space-3)",
  "borderBottom": "1px solid var(--renge-color-border-subtle)"
}

Alerts

5 petals

Semantic feedback containers. Five variants (success, warning, danger, info, neutral) each carrying border color, background, and padding.