Luna UI Documentation

The Palette Generator builds full-range color palettes (50–950 ramps per color, plus neutrals) and exports them as USS files you drop into a Luna Unity project. This page covers the round-trip from web tool → palette files → component classes in your scene.

1. Generate a palette

Open /tools/palette-generator. Pick a preset or build one from scratch. The tool produces:

One color ramp per palette color (e.g. red-50 through red-950).
One neutral ramp for grays (neutral-50 through neutral-950).

Adjust hue, saturation, and lightness offsets per ramp until you're happy.

2. Pick which templates to export

The USS Export panel shows a list of templates:

color-variables.uss — the base file. Defines every --color-{name}-{tone} variable. Always export this.
Component templates — UButton_Colors.uss, USlider_Colors.uss, UToggle_Colors.uss, etc. Each maps per-color selectors (.btn.red, .unity-toggle.coral, Slider.fill-sky) to the component's internal CSS variables (--btn-bg, --color-slider-fill). The full selector-per-component table is on Colors → Component templates.

Toggle off any template you don't use to keep the bundle small.

3. Download

Click "Download all". You get a zip containing the templates you selected, all already wired to reference var(--color-{name}-{tone}).

4. Drop into Unity

Place the files under Assets/UI/Theme/Colors/ (or wherever fits your project layout):

Assets/UI/Theme/Colors/
├── color-variables.uss
├── UButton_Colors.uss
├── USlider_Colors.uss
└── ...

5. Wire into your TSS theme

Open the TSS theme assigned to your PanelSettings (typically a copy of CupkekGamesMainTheme.tss — see Theme Stack). Add @import lines at the top, color-variables.uss first, then each component template:

css

@import url("/Assets/UI/Theme/Colors/color-variables.uss");
@import url("/Assets/UI/Theme/Colors/UButton_Colors.uss");
@import url("/Assets/UI/Theme/Colors/USlider_Colors.uss");

Order matters: component templates reference variables defined in color-variables.uss. Import the variables first.

6. Use the color classes

Add the color class the template's selector expects:

xml

<engine:Button text="Buy" class="btn red"/>
<engine:Toggle label="Notifications" class="coral"/>
<engine:Slider class="fill-sky dragger-sky focus-sky"/>

Three patterns to note (all from the shipped templates — see the full selector table):

Button needs both the structure class and the color: .btn.red matches class="btn red".
Toggle (and other restyled Unity controls) already carries its built-in unity-toggle class, so the bare color word completes the .unity-toggle.coral selector — class="coral" is enough.
Slider routes fill, dragger, and focus separately via prefixed classes (Slider.fill-{color}, Slider.dragger-{color}, Slider.focus-{color}), so you stack fill-sky dragger-sky focus-sky — the same pattern the GameFull sample's audio sliders use, with violet (fill-violet dragger-violet focus-violet).

The structure class defines layout; the color class routes palette variables into the component's internal vars. Switch a control's color by changing one class — no per-element style overrides.

Effects (glow, gradient)

The Luna effects system (luna-fx-* classes) uses the same pattern. The effect template sets the effect's color and gradient stop variables per palette color, using the compound .luna-fx.{color} selector — the color is the same plain color word as everywhere else, scoped to elements that carry the luna-fx marker:

css

.luna-fx.yellow {
    /* Gradient tones — consumed by .luna-fx-clay / bar / matte. */
    --luna-fx-grad-tone-1: var(--color-yellow-300);
    --luna-fx-grad-tone-2: var(--color-yellow-400);
    --luna-fx-grad-tone-3: var(--color-yellow-500);
    /* …plus hover/active steps and inner/shine/flash colors */
}

Stack with effect tier classes:

xml

<engine:VisualElement class="luna-fx luna-fx-shadow-md yellow"/>

The effect templates ship in the same export bundle as the component templates — toggle them on in step 2.

Next steps

Colors — the deeper companion page: every export tab, the tone-mapping editor, chromatic vs neutral modes, and the full component-selector table
Theme Stack — where the exported files sit in the @import chain, and how to keep overrides safe across package updates
UI Effects — the luna-fx-* effect classes your exported effect colors drive

Palette Export