Luna UI Documentation

Sizing utilities — width, height, combined size, min/max constraints, plus margin and padding (documented at the bottom of this page; there is no separate spacing page).

USS variables

The original Luna theme defined a --length-{value} variable scale that other stylesheets reference.

⚠️ Not shipped anymore. Current Luna builds removed the --length-* definitions from the main theme (LibLength.uss was deleted), but two shipped stylesheets still consume them: LibFontSize.uss (the text-* size classes) and LibPosition.uss (the top/right/bottom/left classes). The size/margin/padding utility classes on this page are unaffected — they use literal px values. If you use the font-size or position classes, define the variables in your own USS:

css

:root {
  --length-0: 0;
  --length-1: 1px;
  --length-2: 2px;
  --length-4: 4px;
  /* …one entry per value below, e.g. --length-16: 16px; --length-128: 128px; */
  --length-384: 384px;

  /* "-neg" suffix for negative values: */
  --length-20-neg: -20px;
  --length-128-neg: -128px;
}

Values: 0, 1, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 24, 28, 30, 32, 36, 40, 44, 48, 56, 64, 80, 96, 112, 128, 144, 160, 176, 192, 208, 224, 240, 256, 288, 320, 384 (extend further if you need more). 18 and 30 are consumed only by the text-lg / text-3xl font-size classes — no size or offset class uses them. Usage:

css

.example {
    width: var(--length-16); /* 16px */
    margin: var(--length-128-neg); /* -128px */
}

Utility Classes

Variants

The size/width/height families (including their min/max variants) come in two flavors — fixed pixel values and percentages. Margin and padding are pixel-only — no m-50p/p-25p style classes exist:

Variant	Values
Pixel	0, 1, 2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 80, 96, 112, 128, 144, 160, 176, 192, 208, 224, 240, 256, 288, 320, 384
Percentage (5% steps)	5p, 10p, 15p, 20p, 25p, 30p, 35p, 40p, 45p, 50p, 55p, 60p, 65p, 70p, 75p, 80p, 85p, 90p, 95p, 100p
Percentage (extra)	33p (33.33%), 66p (66.67%), full (100%)

Coverage differs per family: size- and the four min/max width/height families (w-min-, w-max-, h-min-, h-max-) additionally go up to 1024 (448, 512, 640, 768, 896, 1024), while size-min-/size-max- stop at 384; margin/padding stop at 256, skip 52/60, and have no percentage variants.

⚠️ Two shipped quirks: (1) the 448 and 512 min/max classes (w-min-448, w-min-512, w-max-448, w-max-512, h-min-448, h-min-512, h-max-448, h-max-512) are all typo'd to 384px — e.g. .w-max-512 { max-width: 384px; } — so they silently clamp at 384px until fixed upstream. (2) The plain size- family ships .size-100 instead of .size-100p, so size-100p doesn't exist — use size-full (or size-100) for 100%.

Size

Sets both width and height to the same value.

html

<engine:VisualElement class="size-128" />
<engine:VisualElement class="size-25p" />
<!-- full (or 100) means 100% — size-100p doesn't exist for this family -->
<engine:VisualElement class="size-full" />

Min/Max Size

Sets both min/max width and height to the same value.

html

<!-- Set min-width and min-height -->
<engine:VisualElement class="size-min-128" />
<engine:VisualElement class="size-min-50p" />
<!-- Set max-width and max-height -->
<engine:VisualElement class="size-max-128" />
<engine:VisualElement class="size-max-50p" />

Width

html

<!-- Set width -->
<engine:VisualElement class="w-128" />
<engine:VisualElement class="w-66p" />

⚠️ .w-80p / .h-80p ship broken. In current Luna builds both carry a typo (width: 580% / height: 580%). Use one-line rules in your own USS (.w-80p { width: 80%; } / .h-80p { height: 80%; }) to correct them until fixed upstream. The same 580% typo affects the eight -80p/-80p-neg position-offset classes — see Layout.

Min/Max Width

html

<!-- Set min-width -->
<engine:VisualElement class="w-min-128" />
<!-- Set max-width (448/512 currently clamp to 384px — see the coverage caveat above) -->
<engine:VisualElement class="w-max-384" />

Height

html

<!-- Set height -->
<engine:VisualElement class="h-128" />
<engine:VisualElement class="h-66p" />

Min/Max Height

html

<!-- Set min-height -->
<engine:VisualElement class="h-min-128" />
<!-- Set max-height (448/512 currently clamp to 384px — see the coverage caveat above) -->
<engine:VisualElement class="h-max-384" />

Margin

html

<!-- Set margin -->
<engine:VisualElement class="m-16" />
<!-- Set margin top -->
<engine:VisualElement class="mt-16" />
<!-- Set margin bottom -->
<engine:VisualElement class="mb-16" />
<!-- Set margin right -->
<engine:VisualElement class="mr-16" />
<!-- Set margin left -->
<engine:VisualElement class="ml-16" />

Padding

html

<!-- Set padding -->
<engine:VisualElement class="p-16" />
<!-- Set padding top -->
<engine:VisualElement class="pt-16" />
<!-- Set padding bottom -->
<engine:VisualElement class="pb-16" />
<!-- Set padding right -->
<engine:VisualElement class="pr-16" />
<!-- Set padding left -->
<engine:VisualElement class="pl-16" />

Size

USS variables

Utility Classes

Variants

Size

Min/Max Size

Width

Min/Max Width

Height

Min/Max Height

Margin

Padding

See also