Styling

Luna styles every control with two classes: a structure class (btn, unity-toggle, component-progress-bar, …) that defines layout, padding, and shape, and a color class (red, coral, slate, …) that routes palette tokens into the component's internal variables. To make any of it yours you never edit package files — write your own USS, @import it after the main theme in your TSS, and your rules win the cascade while package updates keep flowing underneath.

The pages below are the reference for that system — the theme layers first, then the Tailwind-style one-property utility classes you stack onto VisualElements:

• Theme Stack — how the layers compose: Panel Settings → TSS → @imported USS, where to override what, and copying the theme out of Samples/ so re-imports can't overwrite it.
• Colors — the --color-{name}-{tone} token system: 32 chromatic ramps plus 3 neutral ramps, 11 tones each, browsable with click-to-copy.
• Palette Export — the round-trip from the web Palette Generator to USS in your project: color variables, utility classes, and per-component color templates wired into your TSS.
• Size — the --length-{value} variables plus width / height / min-max / margin / padding utility classes.
• Layout — position, flex (direction, grow/shrink, align, justify), and aspect-ratio utilities.
• Text — the --font-* variable overrides plus text-color and font-size utility classes.
• Cursor — cursor-{value} classes and variables to swap the pointer on hover.
• Border — border width, radius, and color utilities (border-8 rounded-lg border-red-400).

Where next

The classes are only half the story — see them applied:

• Components — every built-in restyle and custom Luna control, and how the structure + color classes pair on each one.
• Views — the pre-built screens (menus, dialogue, inventory); recolor and resize them with exactly the classes above.