:root { /* inputs come from variables.css; see GenerateSpaceScales in naina for the formula. ---------- derived (all unitless) ---------- */ --space-min-width-rem: calc(var(--min-viewport) / 16); --space-max-width-rem: calc(var(--space-max-viewport) / 16); --space-vw-span: calc(var(--space-max-width-rem) - var(--space-min-width-rem)); /* same MaxFontSize/MinFontSize boost applied to every max-viewport size */ --space-max-boost: calc(var(--space-max-font-size) / var(--min-font-size)); --space-min-base: calc(var(--min-font-size) / 16); --space-max-base: calc(var(--space-max-font-size) / 16 * var(--space-max-boost)); /* per-size bounds (unitless rem) */ --sp-3xs-min: calc(var(--space-min-base) * var(--m-3xs)); --sp-3xs-max: calc(var(--space-max-base) * var(--m-3xs)); --sp-2xs-min: calc(var(--space-min-base) * var(--m-2xs)); --sp-2xs-max: calc(var(--space-max-base) * var(--m-2xs)); --sp-xs-min: calc(var(--space-min-base) * var(--m-xs)); --sp-xs-max: calc(var(--space-max-base) * var(--m-xs)); --sp-s-min: calc(var(--space-min-base) * var(--m-s)); --sp-s-max: calc(var(--space-max-base) * var(--m-s)); --sp-m-min: calc(var(--space-min-base) * var(--m-m)); --sp-m-max: calc(var(--space-max-base) * var(--m-m)); --sp-l-min: calc(var(--space-min-base) * var(--m-l)); --sp-l-max: calc(var(--space-max-base) * var(--m-l)); --sp-xl-min: calc(var(--space-min-base) * var(--m-xl)); --sp-xl-max: calc(var(--space-max-base) * var(--m-xl)); --sp-2xl-min: calc(var(--space-min-base) * var(--m-2xl)); --sp-2xl-max: calc(var(--space-max-base) * var(--m-2xl)); --sp-3xl-min: calc(var(--space-min-base) * var(--m-3xl)); --sp-3xl-max: calc(var(--space-max-base) * var(--m-3xl)); /* ---------- fluid clamps ---------- For a pair going from size A at min-viewport to size B at max-viewport: slope = (B-max - A-min) / vw-span yint = A-min - min-width-rem * slope value = clamp(A-min rem, yint rem + slope * 100vw, B-max rem) Singles are just the degenerate case A == B. */ /* singles */ --space-3xs: clamp(calc(var(--sp-3xs-min) * 1rem), calc((var(--sp-3xs-min) - var(--space-min-width-rem) * (var(--sp-3xs-max) - var(--sp-3xs-min)) / var(--space-vw-span)) * 1rem + (var(--sp-3xs-max) - var(--sp-3xs-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-3xs-max) * 1rem)); --space-2xs: clamp(calc(var(--sp-2xs-min) * 1rem), calc((var(--sp-2xs-min) - var(--space-min-width-rem) * (var(--sp-2xs-max) - var(--sp-2xs-min)) / var(--space-vw-span)) * 1rem + (var(--sp-2xs-max) - var(--sp-2xs-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-2xs-max) * 1rem)); --space-xs: clamp(calc(var(--sp-xs-min) * 1rem), calc((var(--sp-xs-min) - var(--space-min-width-rem) * (var(--sp-xs-max) - var(--sp-xs-min)) / var(--space-vw-span)) * 1rem + (var(--sp-xs-max) - var(--sp-xs-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-xs-max) * 1rem)); --space-s: clamp(calc(var(--sp-s-min) * 1rem), calc((var(--sp-s-min) - var(--space-min-width-rem) * (var(--sp-s-max) - var(--sp-s-min)) / var(--space-vw-span)) * 1rem + (var(--sp-s-max) - var(--sp-s-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-s-max) * 1rem)); --space-m: clamp(calc(var(--sp-m-min) * 1rem), calc((var(--sp-m-min) - var(--space-min-width-rem) * (var(--sp-m-max) - var(--sp-m-min)) / var(--space-vw-span)) * 1rem + (var(--sp-m-max) - var(--sp-m-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-m-max) * 1rem)); --space-l: clamp(calc(var(--sp-l-min) * 1rem), calc((var(--sp-l-min) - var(--space-min-width-rem) * (var(--sp-l-max) - var(--sp-l-min)) / var(--space-vw-span)) * 1rem + (var(--sp-l-max) - var(--sp-l-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-l-max) * 1rem)); --space-xl: clamp(calc(var(--sp-xl-min) * 1rem), calc((var(--sp-xl-min) - var(--space-min-width-rem) * (var(--sp-xl-max) - var(--sp-xl-min)) / var(--space-vw-span)) * 1rem + (var(--sp-xl-max) - var(--sp-xl-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-xl-max) * 1rem)); --space-2xl: clamp(calc(var(--sp-2xl-min) * 1rem), calc((var(--sp-2xl-min) - var(--space-min-width-rem) * (var(--sp-2xl-max) - var(--sp-2xl-min)) / var(--space-vw-span)) * 1rem + (var(--sp-2xl-max) - var(--sp-2xl-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-2xl-max) * 1rem)); --space-3xl: clamp(calc(var(--sp-3xl-min) * 1rem), calc((var(--sp-3xl-min) - var(--space-min-width-rem) * (var(--sp-3xl-max) - var(--sp-3xl-min)) / var(--space-vw-span)) * 1rem + (var(--sp-3xl-max) - var(--sp-3xl-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-3xl-max) * 1rem)); /* pairs from 3xs */ --space-3xs-2xs: clamp(calc(var(--sp-3xs-min) * 1rem), calc((var(--sp-3xs-min) - var(--space-min-width-rem) * (var(--sp-2xs-max) - var(--sp-3xs-min)) / var(--space-vw-span)) * 1rem + (var(--sp-2xs-max) - var(--sp-3xs-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-2xs-max) * 1rem)); --space-3xs-xs: clamp(calc(var(--sp-3xs-min) * 1rem), calc((var(--sp-3xs-min) - var(--space-min-width-rem) * (var(--sp-xs-max) - var(--sp-3xs-min)) / var(--space-vw-span)) * 1rem + (var(--sp-xs-max) - var(--sp-3xs-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-xs-max) * 1rem)); --space-3xs-s: clamp(calc(var(--sp-3xs-min) * 1rem), calc((var(--sp-3xs-min) - var(--space-min-width-rem) * (var(--sp-s-max) - var(--sp-3xs-min)) / var(--space-vw-span)) * 1rem + (var(--sp-s-max) - var(--sp-3xs-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-s-max) * 1rem)); --space-3xs-m: clamp(calc(var(--sp-3xs-min) * 1rem), calc((var(--sp-3xs-min) - var(--space-min-width-rem) * (var(--sp-m-max) - var(--sp-3xs-min)) / var(--space-vw-span)) * 1rem + (var(--sp-m-max) - var(--sp-3xs-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-m-max) * 1rem)); --space-3xs-l: clamp(calc(var(--sp-3xs-min) * 1rem), calc((var(--sp-3xs-min) - var(--space-min-width-rem) * (var(--sp-l-max) - var(--sp-3xs-min)) / var(--space-vw-span)) * 1rem + (var(--sp-l-max) - var(--sp-3xs-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-l-max) * 1rem)); --space-3xs-xl: clamp(calc(var(--sp-3xs-min) * 1rem), calc((var(--sp-3xs-min) - var(--space-min-width-rem) * (var(--sp-xl-max) - var(--sp-3xs-min)) / var(--space-vw-span)) * 1rem + (var(--sp-xl-max) - var(--sp-3xs-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-xl-max) * 1rem)); --space-3xs-2xl: clamp(calc(var(--sp-3xs-min) * 1rem), calc((var(--sp-3xs-min) - var(--space-min-width-rem) * (var(--sp-2xl-max) - var(--sp-3xs-min)) / var(--space-vw-span)) * 1rem + (var(--sp-2xl-max) - var(--sp-3xs-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-2xl-max) * 1rem)); --space-3xs-3xl: clamp(calc(var(--sp-3xs-min) * 1rem), calc((var(--sp-3xs-min) - var(--space-min-width-rem) * (var(--sp-3xl-max) - var(--sp-3xs-min)) / var(--space-vw-span)) * 1rem + (var(--sp-3xl-max) - var(--sp-3xs-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-3xl-max) * 1rem)); /* pairs from 2xs */ --space-2xs-xs: clamp(calc(var(--sp-2xs-min) * 1rem), calc((var(--sp-2xs-min) - var(--space-min-width-rem) * (var(--sp-xs-max) - var(--sp-2xs-min)) / var(--space-vw-span)) * 1rem + (var(--sp-xs-max) - var(--sp-2xs-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-xs-max) * 1rem)); --space-2xs-s: clamp(calc(var(--sp-2xs-min) * 1rem), calc((var(--sp-2xs-min) - var(--space-min-width-rem) * (var(--sp-s-max) - var(--sp-2xs-min)) / var(--space-vw-span)) * 1rem + (var(--sp-s-max) - var(--sp-2xs-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-s-max) * 1rem)); --space-2xs-m: clamp(calc(var(--sp-2xs-min) * 1rem), calc((var(--sp-2xs-min) - var(--space-min-width-rem) * (var(--sp-m-max) - var(--sp-2xs-min)) / var(--space-vw-span)) * 1rem + (var(--sp-m-max) - var(--sp-2xs-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-m-max) * 1rem)); --space-2xs-l: clamp(calc(var(--sp-2xs-min) * 1rem), calc((var(--sp-2xs-min) - var(--space-min-width-rem) * (var(--sp-l-max) - var(--sp-2xs-min)) / var(--space-vw-span)) * 1rem + (var(--sp-l-max) - var(--sp-2xs-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-l-max) * 1rem)); --space-2xs-xl: clamp(calc(var(--sp-2xs-min) * 1rem), calc((var(--sp-2xs-min) - var(--space-min-width-rem) * (var(--sp-xl-max) - var(--sp-2xs-min)) / var(--space-vw-span)) * 1rem + (var(--sp-xl-max) - var(--sp-2xs-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-xl-max) * 1rem)); --space-2xs-2xl: clamp(calc(var(--sp-2xs-min) * 1rem), calc((var(--sp-2xs-min) - var(--space-min-width-rem) * (var(--sp-2xl-max) - var(--sp-2xs-min)) / var(--space-vw-span)) * 1rem + (var(--sp-2xl-max) - var(--sp-2xs-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-2xl-max) * 1rem)); --space-2xs-3xl: clamp(calc(var(--sp-2xs-min) * 1rem), calc((var(--sp-2xs-min) - var(--space-min-width-rem) * (var(--sp-3xl-max) - var(--sp-2xs-min)) / var(--space-vw-span)) * 1rem + (var(--sp-3xl-max) - var(--sp-2xs-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-3xl-max) * 1rem)); /* pairs from xs */ --space-xs-s: clamp(calc(var(--sp-xs-min) * 1rem), calc((var(--sp-xs-min) - var(--space-min-width-rem) * (var(--sp-s-max) - var(--sp-xs-min)) / var(--space-vw-span)) * 1rem + (var(--sp-s-max) - var(--sp-xs-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-s-max) * 1rem)); --space-xs-m: clamp(calc(var(--sp-xs-min) * 1rem), calc((var(--sp-xs-min) - var(--space-min-width-rem) * (var(--sp-m-max) - var(--sp-xs-min)) / var(--space-vw-span)) * 1rem + (var(--sp-m-max) - var(--sp-xs-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-m-max) * 1rem)); --space-xs-l: clamp(calc(var(--sp-xs-min) * 1rem), calc((var(--sp-xs-min) - var(--space-min-width-rem) * (var(--sp-l-max) - var(--sp-xs-min)) / var(--space-vw-span)) * 1rem + (var(--sp-l-max) - var(--sp-xs-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-l-max) * 1rem)); --space-xs-xl: clamp(calc(var(--sp-xs-min) * 1rem), calc((var(--sp-xs-min) - var(--space-min-width-rem) * (var(--sp-xl-max) - var(--sp-xs-min)) / var(--space-vw-span)) * 1rem + (var(--sp-xl-max) - var(--sp-xs-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-xl-max) * 1rem)); --space-xs-2xl: clamp(calc(var(--sp-xs-min) * 1rem), calc((var(--sp-xs-min) - var(--space-min-width-rem) * (var(--sp-2xl-max) - var(--sp-xs-min)) / var(--space-vw-span)) * 1rem + (var(--sp-2xl-max) - var(--sp-xs-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-2xl-max) * 1rem)); --space-xs-3xl: clamp(calc(var(--sp-xs-min) * 1rem), calc((var(--sp-xs-min) - var(--space-min-width-rem) * (var(--sp-3xl-max) - var(--sp-xs-min)) / var(--space-vw-span)) * 1rem + (var(--sp-3xl-max) - var(--sp-xs-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-3xl-max) * 1rem)); /* pairs from s */ --space-s-m: clamp(calc(var(--sp-s-min) * 1rem), calc((var(--sp-s-min) - var(--space-min-width-rem) * (var(--sp-m-max) - var(--sp-s-min)) / var(--space-vw-span)) * 1rem + (var(--sp-m-max) - var(--sp-s-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-m-max) * 1rem)); --space-s-l: clamp(calc(var(--sp-s-min) * 1rem), calc((var(--sp-s-min) - var(--space-min-width-rem) * (var(--sp-l-max) - var(--sp-s-min)) / var(--space-vw-span)) * 1rem + (var(--sp-l-max) - var(--sp-s-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-l-max) * 1rem)); --space-s-xl: clamp(calc(var(--sp-s-min) * 1rem), calc((var(--sp-s-min) - var(--space-min-width-rem) * (var(--sp-xl-max) - var(--sp-s-min)) / var(--space-vw-span)) * 1rem + (var(--sp-xl-max) - var(--sp-s-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-xl-max) * 1rem)); --space-s-2xl: clamp(calc(var(--sp-s-min) * 1rem), calc((var(--sp-s-min) - var(--space-min-width-rem) * (var(--sp-2xl-max) - var(--sp-s-min)) / var(--space-vw-span)) * 1rem + (var(--sp-2xl-max) - var(--sp-s-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-2xl-max) * 1rem)); --space-s-3xl: clamp(calc(var(--sp-s-min) * 1rem), calc((var(--sp-s-min) - var(--space-min-width-rem) * (var(--sp-3xl-max) - var(--sp-s-min)) / var(--space-vw-span)) * 1rem + (var(--sp-3xl-max) - var(--sp-s-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-3xl-max) * 1rem)); /* pairs from m */ --space-m-l: clamp(calc(var(--sp-m-min) * 1rem), calc((var(--sp-m-min) - var(--space-min-width-rem) * (var(--sp-l-max) - var(--sp-m-min)) / var(--space-vw-span)) * 1rem + (var(--sp-l-max) - var(--sp-m-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-l-max) * 1rem)); --space-m-xl: clamp(calc(var(--sp-m-min) * 1rem), calc((var(--sp-m-min) - var(--space-min-width-rem) * (var(--sp-xl-max) - var(--sp-m-min)) / var(--space-vw-span)) * 1rem + (var(--sp-xl-max) - var(--sp-m-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-xl-max) * 1rem)); --space-m-2xl: clamp(calc(var(--sp-m-min) * 1rem), calc((var(--sp-m-min) - var(--space-min-width-rem) * (var(--sp-2xl-max) - var(--sp-m-min)) / var(--space-vw-span)) * 1rem + (var(--sp-2xl-max) - var(--sp-m-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-2xl-max) * 1rem)); --space-m-3xl: clamp(calc(var(--sp-m-min) * 1rem), calc((var(--sp-m-min) - var(--space-min-width-rem) * (var(--sp-3xl-max) - var(--sp-m-min)) / var(--space-vw-span)) * 1rem + (var(--sp-3xl-max) - var(--sp-m-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-3xl-max) * 1rem)); /* pairs from l */ --space-l-xl: clamp(calc(var(--sp-l-min) * 1rem), calc((var(--sp-l-min) - var(--space-min-width-rem) * (var(--sp-xl-max) - var(--sp-l-min)) / var(--space-vw-span)) * 1rem + (var(--sp-xl-max) - var(--sp-l-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-xl-max) * 1rem)); --space-l-2xl: clamp(calc(var(--sp-l-min) * 1rem), calc((var(--sp-l-min) - var(--space-min-width-rem) * (var(--sp-2xl-max) - var(--sp-l-min)) / var(--space-vw-span)) * 1rem + (var(--sp-2xl-max) - var(--sp-l-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-2xl-max) * 1rem)); --space-l-3xl: clamp(calc(var(--sp-l-min) * 1rem), calc((var(--sp-l-min) - var(--space-min-width-rem) * (var(--sp-3xl-max) - var(--sp-l-min)) / var(--space-vw-span)) * 1rem + (var(--sp-3xl-max) - var(--sp-l-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-3xl-max) * 1rem)); /* pairs from xl */ --space-xl-2xl: clamp(calc(var(--sp-xl-min) * 1rem), calc((var(--sp-xl-min) - var(--space-min-width-rem) * (var(--sp-2xl-max) - var(--sp-xl-min)) / var(--space-vw-span)) * 1rem + (var(--sp-2xl-max) - var(--sp-xl-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-2xl-max) * 1rem)); --space-xl-3xl: clamp(calc(var(--sp-xl-min) * 1rem), calc((var(--sp-xl-min) - var(--space-min-width-rem) * (var(--sp-3xl-max) - var(--sp-xl-min)) / var(--space-vw-span)) * 1rem + (var(--sp-3xl-max) - var(--sp-xl-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-3xl-max) * 1rem)); /* pairs from 2xl */ --space-2xl-3xl: clamp(calc(var(--sp-2xl-min) * 1rem), calc((var(--sp-2xl-min) - var(--space-min-width-rem) * (var(--sp-3xl-max) - var(--sp-2xl-min)) / var(--space-vw-span)) * 1rem + (var(--sp-3xl-max) - var(--sp-2xl-min)) / var(--space-vw-span) * 100vw), calc(var(--sp-3xl-max) * 1rem)); }