Size

Semantic size tokens for widths, heights, and responsive viewport units.

Fractions

--size-quarter

25%

--size-third

33.3%

--size-half

50%

--size-twothirds

66.7%

--size-threequarters

75%

--size-full

100%

--size-fifth

20%

--size-twofifths

40%

--size-threefifths

60%

--size-fourfifths

80%

--size-svw: 100svw;
--size-svh: 100svh;
--size-lvw: 100lvw;
--size-lvh: 100lvh;
--size-dvw: 100dvw;
--size-dvh: 100dvh;

--size-min: min-content;
--size-max: max-content;
--size-fit: fit-content;

.sidebar {
  width: var(--size-quarter);
}

.hero {
  min-height: var(--size-dvh);
}