--- /** * Scales — striped pattern overlay drawn with a repeating linear gradient * (1px lines tiled at a configurable size and angle). Without children it * renders as an absolute overlay filling its nearest positioned ancestor; * with children it renders a relative container with the pattern behind * the slotted content. * * Zero client JavaScript. */ interface Props { /** Direction of the stripes. */ orientation?: 'horizontal' | 'vertical' | 'diagonal'; /** Pattern tile size in pixels. */ size?: number; /** Stripe color. Defaults to 10% black (light) / 10% white (dark). */ color?: string; /** Additional classes for the pattern overlay element. */ class?: string; /** Additional classes for the wrapper when children are provided. */ containerClass?: string; } const { orientation = 'diagonal', size = 10, color, class: className, containerClass, } = Astro.props; const ANGLES = { horizontal: '0deg', vertical: '90deg', diagonal: '315deg' }; const style = [ `--scales-size: ${size}px`, `--scales-angle: ${ANGLES[orientation]}`, color ? `--pattern-scales: ${color}` : '', ] .filter(Boolean) .join('; '); const hasContent = Astro.slots.has('default'); --- { hasContent ? (

) : (

Installation

Install dependencies

Add these files

Configuration

Use it

Examples

Horizontal Scales

Vertical Scales

Scales Container