Размеры и отступы

Обе шкалы растут от базового шага --base: 4px: --size-Nx — габариты элементов (высоты контролов, диаметры аватаров), --space-Nx — промежутки (паддинги, гапы). Число в имени — множитель шага: --size-9x = 36px, --space-1-5x = 6px.

Размеры

Габариты элементов — высоты, ширины, диаметры

VariableValuePreviewDescription
--size-1xcalc(var(--size) * 1)= 4px-
--size-2xcalc(var(--size) * 2)= 8px-
--size-3xcalc(var(--size) * 3)= 12px-
--size-4xcalc(var(--size) * 4)= 16px-
--size-5xcalc(var(--size) * 5)= 20px-
--size-6xcalc(var(--size) * 6)= 24px-
--size-7xcalc(var(--size) * 7)= 28px-
--size-8xcalc(var(--size) * 8)= 32px-
--size-9xcalc(var(--size) * 9)= 36px-
--size-10xcalc(var(--size) * 10)= 40px-
--size-11xcalc(var(--size) * 11)= 44px-
--size-12xcalc(var(--size) * 12)= 48px-
--size-13xcalc(var(--size) * 13)= 52px-
--size-14xcalc(var(--size) * 14)= 56px-
--size-15xcalc(var(--size) * 15)= 60px-
--size-16xcalc(var(--size) * 16)= 64px-
--size-17xcalc(var(--size) * 17)= 68px-
--size-18xcalc(var(--size) * 18)= 72px-
--size-19xcalc(var(--size) * 19)= 76px-
--size-20xcalc(var(--size) * 20)= 80px-
--size-21xcalc(var(--size) * 21)= 84px-
--size-22xcalc(var(--size) * 22)= 88px-
--size-23xcalc(var(--size) * 23)= 92px-
--size-24xcalc(var(--size) * 24)= 96px-
--size-25xcalc(var(--size) * 25)= 100px-
--size-26xcalc(var(--size) * 26)= 104px-
--size-27xcalc(var(--size) * 27)= 108px-
--size-28xcalc(var(--size) * 28)= 112px-
--size-29xcalc(var(--size) * 29)= 116px-
--size-30xcalc(var(--size) * 30)= 120px-
--size-31xcalc(var(--size) * 31)= 124px-
--size-32xcalc(var(--size) * 32)= 128px-
--size-33xcalc(var(--size) * 33)= 132px-
--size-34xcalc(var(--size) * 34)= 136px-
--size-35xcalc(var(--size) * 35)= 140px-
--size-36xcalc(var(--size) * 36)= 144px-
--size-37xcalc(var(--size) * 37)= 148px-
--size-38xcalc(var(--size) * 38)= 152px-
--size-39xcalc(var(--size) * 39)= 156px-

Отступы

Промежутки — паддинги, гапы, маргины

VariableValuePreviewDescription
--space-0-5xcalc(var(--space) * 0.5)= 2px-
--space-1xcalc(var(--space) * 1)= 4px-
--space-1-5xcalc(var(--space) * 1.5)= 6px-
--space-2xcalc(var(--space) * 2)= 8px-
--space-3xcalc(var(--space) * 3)= 12px-
--space-3-5xcalc(var(--space) * 3.5)= 14px-
--space-4xcalc(var(--space) * 4)= 16px-
--space-5xcalc(var(--space) * 5)= 20px-
--space-6xcalc(var(--space) * 6)= 24px-
--space-7xcalc(var(--space) * 7)= 28px-
--space-8xcalc(var(--space) * 8)= 32px-
--space-9xcalc(var(--space) * 9)= 36px-
--space-10xcalc(var(--space) * 10)= 40px-
--space-11xcalc(var(--space) * 11)= 44px-
--space-12xcalc(var(--space) * 12)= 48px-