Fluid Tokens

Overview

@purposeUI uses the clamp() function to define fluid, responsive tokens for properties like font-size, padding, margin, gap, border-radius, and blur. This allows values to scale between a minimum and maximum based on viewport width, reducing reliance on media queries and improving consistency.

A custom SCSS mixin, fluid(), is used to simplify this. It takes two arguments—min and max—and returns a clamp() expression with a calculated viewport-based value between them. This makes fluid sizing easy to apply and consistent across the codebase.

Mixin Usage

@use "../mixins" as *;

.eyebrow {
  font-size: fluid(12px, 24px);
}

// Use with interpolation
.is-blurred {
  filter: blur(#{fluid(2px, 4px)});
}

Defaults

// tokens.scss

// used for font-size utilities
font-size: (
  xs: fluid(10px, 12px),
  sm: fluid(12px, 14px),
  md: fluid(14px, 16px),
  ml: fluid(16px, 18px),
  lg: fluid(18px, 22px),
  xl: fluid(22px, 26px),
  2xl: fluid(26px, 32px),
  3xl: fluid(32px, 40px),
  4xl: fluid(38px, 52px),
  5xl: fluid(44px, 64px),
  6xl: fluid(48px, 80px),
  7xl: fluid(56px, 96px),
),

// used for border-radius utilities
radius: (
  zero: 0,
  xs: fluid(2px, 4px),
  sm: fluid(4px, 8px),
  md: fluid(8px, 12px),
  ml: fluid(10px, 16px),
  lg: fluid(16px, 24px),
  xl: fluid(20px, 32px),
  max: 1e5px,
),

// Used for filters and backdrop-filters utilities
blur: (
  xs: blur(#{fluid(1px, 2px)}),
  sm: blur(#{fluid(2px, 4px)}),
  md: blur(#{fluid(4px, 6px)}),
  ml: blur(#{fluid(5px, 8px)}),
  lg: blur(#{fluid(8px, 12px)}),
  xl: blur(#{fluid(10px, 16px)}),
),

// used for margin, padding, gap, top/right/bottom/left, flex-basis utilities
size: (
  auto: auto,
  zero: 0px,
  3xs: fluid(1px, 2px),
  2xs: fluid(2px, 4px),
  xs: fluid(3px, 6px),
  sm: fluid(4px, 8px),
  md: fluid(8px, 12px),
  ml: fluid(10px, 16px),
  lg: fluid(14px, 20px),
  xl: fluid(16px, 24px),
  2xl: fluid(20px, 32px),
  3xl: fluid(24px, 40px),
  4xl: fluid(30px, 48px),
  5xl: fluid(36px, 56px),
  6xl: fluid(42px, 64px),
  7xl: fluid(48px, 72px),
  8xl: fluid(56px, 80px),
  9xl: fluid(64px, 96px),
  10xl: fluid(80px, 120px),
  max: 1e5px,
),