Size
Semantic size tokens for widths, heights, and responsive viewport units.
Fractions
--size-quarter25%--size-third33.3%--size-half50%--size-twothirds66.7%--size-threequarters75%--size-full100%Fifths
--size-fifth20%--size-twofifths40%--size-threefifths60%--size-fourfifths80%Viewport units
--size-svw: 100svw;
--size-svh: 100svh;
--size-lvw: 100lvw;
--size-lvh: 100lvh;
--size-dvw: 100dvw;
--size-dvh: 100dvh;
Intrinsic sizing
--size-min: min-content;
--size-max: max-content;
--size-fit: fit-content;
Usage
.sidebar {
width: var(--size-quarter);
}
.hero {
min-height: var(--size-dvh);
}