Documentation/content/ui-systems/ui-styles.en.md

title, type, weight

title	type	weight
UI Styles	docs	14

This page documents the styling system for Hytale UI widgets.

Style States

Interactive widgets support multiple states:

State	When Applied
Default	Normal state
Hovered	Mouse over widget
Pressed	Mouse button held
Disabled	Widget is disabled

Style: (
  Default: (Background: "Button.png"),
  Hovered: (Background: "ButtonHovered.png"),
  Pressed: (Background: "ButtonPressed.png"),
  Disabled: (Background: "ButtonDisabled.png")
);

LabelStyle

Text styling for Label widgets.

@MyLabelStyle = LabelStyle(
  FontSize: 16,
  FontName: "Default",           // or "Secondary"
  TextColor: #ffffff,
  RenderBold: true,
  RenderUppercase: false,
  LetterSpacing: 0,
  Wrap: false,
  HorizontalAlignment: Center,   // Start, Center, End
  VerticalAlignment: Center,     // Top, Center, Bottom
  OutlineColor: #000000(0.5)
);

Label {
  Style: @MyLabelStyle;
}

LabelStyle Properties

Property	Type	Description
FontSize	number	Text size
FontName	string	Font family ("Default", "Secondary")
TextColor	color	Text color
RenderBold	bool	Bold text
RenderUppercase	bool	Force uppercase
LetterSpacing	number	Space between characters
Wrap	bool	Enable text wrapping
HorizontalAlignment	enum	Start, Center, End
VerticalAlignment	enum	Top, Center, Bottom
OutlineColor	color	Text outline color
Alignment	enum	Shorthand for both alignments (Center)

ButtonStyle

Styling for Button widgets (without text).

@MyButtonStyle = ButtonStyle(
  Default: (Background: (TexturePath: "Button.png", Border: 12)),
  Hovered: (Background: (TexturePath: "ButtonHovered.png", Border: 12)),
  Pressed: (Background: (TexturePath: "ButtonPressed.png", Border: 12)),
  Disabled: (Background: (TexturePath: "ButtonDisabled.png", Border: 12)),
  Sounds: @ButtonSounds
);

Button {
  Style: @MyButtonStyle;
}

Button State Properties

Property	Type	Description
Background	PatchStyle	Background appearance

TextButtonStyle

Styling for TextButton widgets.

@MyTextButtonStyle = TextButtonStyle(
  Default: (
    Background: (TexturePath: "Button.png", Border: 12),
    LabelStyle: (FontSize: 17, TextColor: #bfcdd5, RenderBold: true)
  ),
  Hovered: (
    Background: (TexturePath: "ButtonHovered.png", Border: 12),
    LabelStyle: (FontSize: 17, TextColor: #ffffff, RenderBold: true)
  ),
  Pressed: (
    Background: (TexturePath: "ButtonPressed.png", Border: 12),
    LabelStyle: (FontSize: 17, TextColor: #aaaaaa, RenderBold: true)
  ),
  Disabled: (
    Background: (TexturePath: "ButtonDisabled.png", Border: 12),
    LabelStyle: (FontSize: 17, TextColor: #797b7c, RenderBold: true)
  ),
  Sounds: @ButtonSounds
);

TextButton State Properties

Property	Type	Description
Background	PatchStyle	Background appearance
LabelStyle	LabelStyle	Text styling

PatchStyle

9-patch texture configuration for stretchable backgrounds.

@MyPatchStyle = PatchStyle(
  TexturePath: "Panel.png",
  Border: 16                    // Uniform border
);

@MyPatchStyle2 = PatchStyle(
  TexturePath: "Button.png",
  HorizontalBorder: 80,         // Left/right border
  VerticalBorder: 12            // Top/bottom border
);

// With color tint
@ColoredPatch = PatchStyle(
  Color: #ff0000(0.5)           // Semi-transparent red
);

PatchStyle Properties

Property	Type	Description
TexturePath	string	Path to texture file
Border	number	Uniform 9-patch border
HorizontalBorder	number	Left/right 9-patch border
VerticalBorder	number	Top/bottom 9-patch border
Color	color	Solid color (instead of texture)

InputFieldStyle

Styling for text input fields.

@MyInputStyle = InputFieldStyle(
  TextColor: #ffffff,
  FontSize: 16
);

@MyPlaceholderStyle = InputFieldStyle(
  TextColor: #6e7da1
);

TextField {
  Style: @MyInputStyle;
  PlaceholderStyle: @MyPlaceholderStyle;
}

SliderStyle

Styling for slider controls.

@MySliderStyle = SliderStyle(
  Background: (TexturePath: "SliderBackground.png", Border: 2),
  Handle: "SliderHandle.png",
  HandleWidth: 16,
  HandleHeight: 16,
  Sounds: (
    Activate: (SoundPath: "SliderTick.ogg", Volume: 10),
    MouseHover: (SoundPath: "Hover.ogg", Volume: 6)
  )
);

SliderStyle Properties

Property	Type	Description
Background	PatchStyle	Track background
Handle	string	Handle texture path
HandleWidth	number	Handle width
HandleHeight	number	Handle height
Sounds	object	Sound effects

CheckBoxStyle

Styling for checkbox controls.

@MyCheckBoxStyle = CheckBoxStyle(
  Unchecked: (
    DefaultBackground: (Color: #00000000),
    HoveredBackground: (Color: #ffffff20),
    PressedBackground: (Color: #ffffff10),
    DisabledBackground: (Color: #424242),
    ChangedSound: (SoundPath: "Untick.ogg", Volume: 6)
  ),
  Checked: (
    DefaultBackground: (TexturePath: "Checkmark.png"),
    HoveredBackground: (TexturePath: "Checkmark.png"),
    PressedBackground: (TexturePath: "Checkmark.png"),
    ChangedSound: (SoundPath: "Tick.ogg", Volume: 6)
  )
);

DropdownBoxStyle

Styling for dropdown menus.

@MyDropdownStyle = DropdownBoxStyle(
  DefaultBackground: (TexturePath: "Dropdown.png", Border: 16),
  HoveredBackground: (TexturePath: "DropdownHovered.png", Border: 16),
  PressedBackground: (TexturePath: "DropdownPressed.png", Border: 16),
  DefaultArrowTexturePath: "DropdownCaret.png",
  HoveredArrowTexturePath: "DropdownCaret.png",
  PressedArrowTexturePath: "DropdownCaretPressed.png",
  ArrowWidth: 13,
  ArrowHeight: 18,
  LabelStyle: (TextColor: #96a9be, FontSize: 13),
  EntryLabelStyle: (TextColor: #b7cedd),
  SelectedEntryLabelStyle: (TextColor: #b7cedd, RenderBold: true),
  HorizontalPadding: 8,
  PanelBackground: (TexturePath: "DropdownBox.png", Border: 16),
  PanelPadding: 6,
  PanelAlign: Right,                // or Bottom
  PanelOffset: 7,
  EntryHeight: 31,
  EntriesInViewport: 10,
  HoveredEntryBackground: (Color: #0a0f17),
  PressedEntryBackground: (Color: #0f1621),
  Sounds: @DropdownBoxSounds,
  EntrySounds: @ButtonSounds
);

ScrollbarStyle

Styling for scrollbars.

@MyScrollbarStyle = ScrollbarStyle(
  Spacing: 6,
  Size: 6,
  Background: (TexturePath: "Scrollbar.png", Border: 3),
  Handle: (TexturePath: "ScrollbarHandle.png", Border: 3),
  HoveredHandle: (TexturePath: "ScrollbarHandleHovered.png", Border: 3),
  DraggedHandle: (TexturePath: "ScrollbarHandleDragged.png", Border: 3),
  OnlyVisibleWhenHovered: false
);

TabNavigationStyle

Styling for tab navigation.

@TabStyle = TabStyleState(
  Background: "Tab.png",
  Overlay: "TabOverlay.png",
  IconAnchor: (Width: 44, Height: 44),
  Anchor: (Width: 82, Height: 62)
);

@MyTabsStyle = TabNavigationStyle(
  TabStyle: (
    Default: @TabStyle,
    Hovered: (...@TabStyle, Background: "TabHovered.png"),
    Pressed: (...@TabStyle, Background: "TabPressed.png")
  ),
  SelectedTabStyle: (
    Default: (
      ...@TabStyle,
      Overlay: "TabSelectedOverlay.png"
    )
  ),
  TabSounds: @TabSounds,
  SeparatorAnchor: (Width: 5, Height: 34),
  SeparatorBackground: "TabSeparator.png"
);

TextTooltipStyle

Styling for text tooltips.

@MyTooltipStyle = TextTooltipStyle(
  Background: (TexturePath: "TooltipBackground.png", Border: 24),
  MaxWidth: 400,
  LabelStyle: (Wrap: true, FontSize: 16),
  Padding: 24
);

Sound Definitions

Sounds are defined as objects with audio properties.

@ButtonSounds = (
  Activate: (
    SoundPath: "Sounds/ButtonActivate.ogg",
    Volume: 6,
    MinPitch: -0.2,
    MaxPitch: 0.2
  ),
  MouseHover: (
    SoundPath: "Sounds/ButtonHover.ogg",
    Volume: 6
  )
);

@DropdownBoxSounds = DropdownBoxSounds(
  Activate: (SoundPath: "Tick.ogg", Volume: 6),
  MouseHover: (SoundPath: "Hover.ogg", Volume: 6),
  Close: (SoundPath: "Untick.ogg", Volume: 6)
);

Sound Properties

Property	Type	Description
SoundPath	string	Path to audio file
Volume	number	Volume level (can be negative)
MinPitch	number	Minimum pitch variation
MaxPitch	number	Maximum pitch variation

Style Inheritance

Use the spread operator to extend styles:

@BaseButtonStyle = TextButtonStyle(
  Default: (Background: @DefaultBg, LabelStyle: @DefaultLabel),
  Hovered: (Background: @HoveredBg, LabelStyle: @DefaultLabel),
  Pressed: (Background: @PressedBg, LabelStyle: @DefaultLabel),
  Sounds: @ButtonSounds
);

@DestructiveButtonStyle = TextButtonStyle(
  ...@BaseButtonStyle,
  Default: (...@BaseButtonStyle.Default, Background: @DestructiveBg),
  Sounds: @DestructiveSounds
);