Colors

UI Framework includes a default color palette out-of-the-box that is a great starting point.

Default Colors: SLATE, GRAY, ZINC, NEUTRAL, STONE, RED, ORANGE, AMBER, YELLOW, LIME, GREEN, EMERALD, TEAL, CYAN, SKY, BLUE, INDIGO, VIOLET, PURPLE, FUCHSIA, PINK, and ROSE.

Additional color slots include BASE, PRIMARY, and SECONDARY. If you want to use custom colors while retaining the UI framework's functionality, you can override these colors through USS.

Color tones

Each color has 11 tones, from light to dark: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950.

Each tone has a semi-transparent variant.

/* Color Red, Tone 500 */
.example {
color: var(--color-red-500);
}
/* Color Red, Tone 500, Half Opacity */
.example {
color: var(--color-red-500-half);
}

Default colors for Button

USS Variables

You can use uss variables while styling your elements.

.example {
  background-color: var(--color-primary-50);
  border-color: var(--color-slate-900);
  color: var(--color-lime-900);
  -unity-background-image-tint-color: var(--color-gray-500);
}

USS Classes

There are various utility classes so you don't have to write custom USS class every time.

In addition to default LunaUI colors, each of the below has a transparent, white and black variant.

.example-transparent {
  color: transparent;
}
.example-white {
  color: rgb(255 255 255);
}
.example-black {
  color: rgb(0,0,0);
}

Background Color

Format: bg-color-tone

<engine:VisualElement class="bg-transparent" />
<engine:VisualElement class="bg-red-500" />
<engine:VisualElement class="bg-red-500-half" />

Border Color

Format: border-color-tone

<engine:VisualElement class="border-white" />
<engine:VisualElement class="border-red-500" />
<engine:VisualElement class="border-red-500-half" />

Image Tint

Format: tint-color-tone

<engine:VisualElement class="tint-black" />
<engine:VisualElement class="tint-red-500" />
<engine:VisualElement class="tint-red-500-half" />

Text Color

Format: text-color-tone

<engine:VisualElement class="text-black" />
<engine:VisualElement class="text-red-500" />
<engine:VisualElement class="text-red-500-half" />

UIColor Class

Constructor

Name	Type	Description
name	UIColorName	The name of the color
value	UIColorValue	The value/tone of the color

Public Methods

GetUssClassBG

public string GetUssClassBG();

// Set background color of an element
myVisualElement.AddToClassList(myColor.GetUssClassBG());

GetUssClassBorder

public string GetUssClassBorder();

// Set border color of an element
myVisualElement.AddToClassList(myColor.GetUssClassBorder());

GetUssClassText

public string GetUssClassText();

// Set text color of an element
myVisualElement.AddToClassList(myColor.GetUssClassText());

GetColor

public Color GetColor(VisualElement element);