generate_fluid_scale
Generate viewport-aware fluid scales using CSS clamp() to create responsive design tokens that scale between minimum and maximum sizes.
Instructions
Generate fluid/responsive scales using CSS clamp(). Creates viewport-aware tokens that scale between min/max sizes. Based on Utopia fluid typography methodology.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| unit | No | CSS unit | rem |
| ratio | No | Modular ratio for multi-step scales (e.g., 1.25) | |
| steps | No | Number of scale steps | |
| maxSize | Yes | Maximum size (at maxViewport) | |
| minSize | Yes | Minimum size (at minViewport) | |
| labelPrefix | No | Label prefix (e.g., 'fluid-space') | |
| maxViewport | No | Maximum viewport width (px) | |
| minViewport | No | Minimum viewport width (px) |