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:

colors.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 classes (.btn.red, .slider.coral) to the component's internal CSS variables (--btn-bg, --slider-fill-color).

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/
├── colors.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 USS Setup). Add @import lines at the top, colors.uss first, then each component template:

css

@import url("/Assets/UI/Theme/Colors/colors.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 colors.uss. Import the variables first.

6. Use the color classes

Add the color name as a class alongside your component class:

xml

<engine:Button text="Buy" class="btn red"/>
<engine:Toggle label="Notifications" class="toggle coral"/>
<engine:Slider class="slider sky"/>

The component class defines structure; the color class routes palette variables into the component's internal vars. Switch a button'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. Effect-related templates set the effect's color and gradient stop variables per palette color:

css

.luna-fx-yellow {
    --luna-fx-grad-tone-1: var(--color-yellow-x00);
    --luna-fx-grad-tone-2: var(--color-yellow-x00);
    --luna-fx-grad-tone-3: var(--color-yellow-x00);
}

Stack with effect tier classes:

xml

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

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

Palette Export