### Hytale UI Style Configuration Examples

Source: https://github.com/underscore95/hytale-ui-docs/blob/main/docs/UIElements/Label.md

These examples demonstrate the syntax and common properties used for styling UI elements in Hytale. They cover font size, text color, alignment, and text rendering options. Some examples utilize predefined variables or include alpha transparency for colors.

```plaintext
(FontSize:16,RenderBold:true,RenderUppercase:true,TextColor:#a6afba,VerticalAlignment:Center,HorizontalAlignment:Center)
(FontSize:12,TextColor:@DefaultLabelColor)
(RenderBold:true,FontSize:11,VerticalAlignment:Center,HorizontalAlignment:Center)
(HorizontalAlignment:Center,VerticalAlignment:Center,RenderBold:true,)
(VerticalAlignment:Center,TextColor:#6b8399,FontSize:13)
(Alignment:Center,FontSize:18,RenderItalics:false,TextColor:#4f5f72(0.8),Wrap:true)
(RenderBold:true,FontSize:18,VerticalAlignment:Center,HorizontalAlignment:Center,TextColor:#a1b2bf)
(FontSize:15,RenderBold:true,Wrap:true)
(Alignment:Center,FontSize:12,RenderBold:true,TextColor:#919191)
[SubtitleStyle](Variables/SubtitleStyle.md)
(RenderBold:true,TextColor:#bb3333)
(FontSize:18,TextColor:#dee2ee,FontName:"Secondary",RenderUppercase:true,HorizontalAlignment:Center)
(FontSize:12,TextColor:#afafafff,RenderItalics:true,HorizontalAlignment:Center)
(RenderUppercase:true,RenderBold:true,FontSize:11,TextColor:#c2d3de)
(...$C.@DefaultLabelStyle,FontSize:12,TextColor:#6a7d8f)
(...@TitleStyle,FontName:"Default",RenderBold:true,TextColor:#b4c8c9,LetterSpacing:0.5,VerticalAlignment:End)
[TypeDescriptionStyle](Variables/TypeDescriptionStyle.md)
[AttributeLabelStyle](Variables/AttributeLabelStyle.md)
(RenderBold:true)
(FontSize:14,TextColor:#e66431,RenderBold:true,Wrap:true)
(RenderBold:true,FontSize:18)
(FontName:"Secondary",FontSize:16,RenderBold:true,RenderUppercase:true,TextColor:#ffffff,HorizontalAlignment:Center)
(FontSize:13,TextColor:#96a9be(0.6),VerticalAlignment:Center,HorizontalAlignment:End)
(FontSize:11,TextColor:#7a9cc6)
(FontSize:18,RenderBold:true,RenderUppercase:true,TextColor:#ca9f37,HorizontalAlignment:Center)
(FontSize:12,VerticalAlignment:Center,HorizontalAlignment:Center,TextColor:#42a942)
(FontSize:13,TextColor:#ffffff,RenderBold:true)
(FontSize:20,HorizontalAlignment:Center)
(RenderBold:true,Alignment:Center,TextColor:#ffffe6,FontName:"Secondary",FontSize:24)
(TextColor:#696969,HorizontalAlignment:Center,Wrap:true,FontSize:12)
(FontSize:14,RenderBold:false,TextColor:#a6afba,VerticalAlignment:Center,HorizontalAlignment:Center)
(HorizontalAlignment:Center,VerticalAlignment:Center,TextColor:#6c7886)
[LabelStyle](Variables/LabelStyle.md)
(FontSize:18,RenderBold:true,RenderUppercase:true,TextColor:#d13b57,HorizontalAlignment:Center)
[SectionValueStyle](Variables/SectionValueStyle.md)
(RenderBold:true,FontSize:18,TextColor:#ffffff(0.8),RenderUppercase:true,HorizontalAlignment:End)
(FontSize:14,TextColor:#96a9be,Wrap:true)
(...$C.@DefaultLabelStyle,HorizontalAlignment:Center,VerticalAlignment:Center,TextColor:#ff6b6b)
(Alignment:Center,FontSize:24,RenderBold:true,RenderUppercase:true,TextColor:#96a9be,FontName:"Secondary")
(Wrap:true,TextColor:#819395,FontSize:14)
(FontSize:13,TextColor:#bebebe,RenderBold:true)
(FontSize:12,RenderBold:true,RenderUppercase:true,TextColor:#a6afba,VerticalAlignment:Start)
[PlayerCountStyle](Variables/PlayerCountStyle.md)
(...@TitleLabelStyle,TextColor:#ffffff)
(RenderBold:true,TextColor:#57be2b)
(TextColor:#96a9be,FontSize:14,RenderBold:true,RenderUppercase:true)
(Wrap:true)
(FontSize:18,TextColor:#96a9be,VerticalAlignment:Center)
(VerticalAlignment:Center,HorizontalAlignment:Center,TextColor:#96a9be,RenderUppercase:true,FontSize:21,RenderBold:true)
(FontSize:14,TextColor:#c94949,RenderBold:true,VerticalAlignment:Center)
(RenderBold:true,TextColor:#3864d7)
[MaxLabelStyle](Variables/MaxLabelStyle.md)
(...$C.@DefaultLabelStyle,VerticalAlignment:Center,Wrap:true)
(FontName:"Secondary",RenderBold:true,FontSize:26,TextColor:#ffffff,HorizontalAlignment:Center)
(TextColor:@PrimaryTextColor,FontSize:14)
(TextColor:#94969a,RenderBold:true,HorizontalAlignment:Center,Wrap:true)
(TextColor:#ff6b6b,FontSize:14,Wrap:true)
(Wrap:true,Alignment:Center)
(RenderBold:true,VerticalAlignment:Center,FontSize:17,TextColor:#ccd3dd,HorizontalAlignment:Center)
(FontSize:12,TextColor:#7a8a9a,HorizontalAlignment:End,VerticalAlignment:Center,)
(FontSize:$ObjectiveCommon.@FontSize,RenderBold:true,RenderUppercase:true,TextColor:$ObjectiveCommon.@Gray,LetterSpacing:$ObjectiveCommon.@LetterSpacing)
(FontSize:16,RenderBold:true,RenderUppercase:true,TextColor:#a6afba,VerticalAlignment:Center)
(TextColor:#e66431,RenderBold:true,Wrap:true)
(FontSize:13,TextColor:#3d913f,HorizontalAlignment:Center,VerticalAlignment:Center,)
(FontSize:12,TextColor:#ffffff(0.8))
(Alignment:Center,FontSize:12,Wrap:true)
(TextColor:FontSize:14,RenderBold:true,RenderUppercase:true)
(HorizontalAlignment:End,TextColor:#595959,FontSize:13)
(FontSize:10,TextColor:#696969,Wrap:true,RenderItalics:true)
(TextColor:#96a9be,FontSize:16,Wrap:true)
```

--------------------------------

### TextButtonStyle Field Examples

Source: https://github.com/underscore95/hytale-ui-docs/blob/main/docs/Types/TextButtonStyle.md

Provides various examples of how to define the TextButtonStyle, including background, label style, and texture paths. These examples demonstrate different configurations for buttons.

```hytale-ui-script
(LabelStyle: (...@ButtonLabelStyleSelected), LabelMaskTexturePath: "../../Common/TextGradient.png")
(Background: PatchStyle(TexturePath: "Common/Buttons/Destructive.png", Border: @ButtonBorder), LabelStyle: @DefaultButtonLabelStyle)
(Background: (TexturePath: "Common/ButtonSmall.png", Border: 6), LabelStyle: @SmallButtonLabelStyle)
(
    Background: #ffffff(0.3),
    LabelStyle: (
      VerticalAlignment: Center
    )
  )
(Background: PatchStyle(TexturePath: "Common/Buttons/Secondary.png", Border: @ButtonBorder), LabelStyle: @SecondaryButtonLabelStyle)
(Background: @PrimaryButtonDefaultBackground, LabelStyle: @PrimaryButtonLabelStyle)
(LabelStyle: @NavigationItemSelectedStyle, LabelMaskTexturePath: "../../Common/TextGradient.png", Background: (TexturePath: "SecondaryTabHighlight.png"))
(LabelStyle: @NavigationItemSelectedStyle, LabelMaskTexturePath: "../../Common/TextGradient.png")
(Background: @ServerBrowserButtonDefaultBackground, LabelStyle: @PrimaryButtonLabelStyle)
(Background: $Common.@PrimaryButtonDefaultBackground, LabelStyle: @TypeButtonLabelStyle)
(Background: PatchStyle(TexturePath: "Common/Buttons/Destructive.png", Border: @ButtonBorderSize), LabelStyle: @PrimaryButtonLabelStyle)
(Background: PatchStyle(TexturePath: "Common/Buttons/Secondary.png", Border: @ButtonBorderSize), LabelStyle: @SmallSecondaryButtonLabelStyle)
(Background: PatchStyle(TexturePath: "ProcessingOnButton.png", Border: $Common.@ButtonBorderSize), LabelStyle: $Common.@SecondaryButtonLabelStyle)
(Background: PatchStyle(Color: #222222(0.3)), LabelStyle: @TagTextButtonLabelStyle)
(LabelStyle: @ButtonLabelStyle)
(LabelStyle: @HeaderTextButtonLabelStyle)
(Background: PatchStyle(TexturePath: "Common/Buttons/Tertiary.png", Border: @ButtonBorder), LabelStyle: @SecondaryButtonLabelStyle)
(LabelStyle: @NavigationItemStyle)
(Background: PatchStyle(TexturePath: "Common/Buttons/Tertiary.png", Border: @ButtonBorderSize), LabelStyle: @SecondaryButtonLabelStyle)
(Background: @ServerBrowserButtonPressedBackground, LabelStyle: @PrimaryButtonLabelStyle)
(
    Background: #ffffff(0.05),
    LabelStyle: (
      VerticalAlignment: Center
    )
  )
(Background: @DefaultButtonDefaultBackground, LabelStyle: @DefaultButtonLabelStyle)
(Background: PatchStyle(TexturePath: "Common/Buttons/Secondary.png", Border: @ButtonBorder), LabelStyle: @SmallSecondaryButtonLabelStyle)
(LabelStyle: (...@ButtonLabelStyle, TextColor: #ffffffff), LabelMaskTexturePath: "MenuButtonLabelGradient.png")
(LabelStyle: (...@SecondaryButtonLabelStyle, TextColor: #ffffffff), LabelMaskTexturePath: "HomeButtonLabelGradient.png")
(Background: PatchStyle(TexturePath: "Common/Buttons/Secondary.png", Border: @ButtonBorderSize), LabelStyle: @SecondaryButtonLabelStyle)
(LabelStyle: (...@ButtonLabelStyle, TextColor: #ffffffff), LabelMaskTexturePath: "HomeButtonLabelGradient.png")
(
    LabelStyle: @NavigationButtonLabelStyle
  )
```

--------------------------------

### Example DropdownBoxStyle Configurations

Source: https://github.com/underscore95/hytale-ui-docs/blob/main/docs/Types/DropdownBoxStyle.md

Demonstrates various configurations for DropdownBoxStyle, including default, hovered, and pressed states for backgrounds and arrows, as well as label and panel styling. These examples showcase how to define visual and functional aspects of dropdown elements.

```lua
-- DefaultBackground Example:
-- (TexturePath: "Common/Dropdown.png", Border: 16)

-- HoveredBackground Examples:
-- (TexturePath: "Common/DropdownHovered.png", Border: 16)
-- (TexturePath: "Common/DropdownAltHovered.png", Border: 16)

-- PressedBackground Examples:
-- (TexturePath: "Common/DropdownAltHovered.png", Border: 16)
-- (TexturePath: "Common/DropdownPressed.png", Border: 16)

-- DefaultArrowTexturePath Examples:
-- "Common/DefaultDropdownCaret.png"
-- "Common/AltDropdownCaretDown.png"
-- "Common/DropdownCaret.png"

-- HoveredArrowTexturePath Examples:
-- "Common/DefaultDropdownCaret.png"
-- "Common/AltDropdownCaretDown.png"
-- "Common/DropdownCaret.png"

-- PressedArrowTexturePath Examples:
-- "Common/AltDropdownCaretUp.png"
-- "Common/PressedDropdownCaret.png"
-- "Common/DropdownPressedCaret.png"

-- ArrowWidth Examples:
-- 12
-- 13
-- 9

-- ArrowHeight Examples:
-- 18
-- 7

-- LabelStyle Examples:
-- (TextColor: #96a9be, RenderBold: true, VerticalAlignment: Center, FontSize: 18)
-- (
--           ...$Common.@DefaultDropdownBoxLabelStyle,
--           FontSize: 16,
--           RenderBold: true,
--           RenderUppercase: false
--         )
-- [DefaultDropdownBoxLabelStyle](Variables/DefaultDropdownBoxLabelStyle.md)

-- EntryLabelStyle Examples:
-- [DefaultDropdownBoxEntryLabelStyle](Variables/DefaultDropdownBoxEntryLabelStyle.md)
-- (RenderUppercase: false)

-- NoItemsLabelStyle Example:
-- (...@DefaultDropdownBoxEntryLabelStyle, TextColor: #b7cedd(0.5))

-- SelectedEntryLabelStyle Example:
-- (...@DefaultDropdownBoxEntryLabelStyle, RenderBold: true)

-- HorizontalPadding Examples:
-- 8
-- 14

-- PanelScrollbarStyle Example:
-- [DefaultScrollbarStyle](Variables/DefaultScrollbarStyle.md)

-- PanelBackground Examples:
-- (TexturePath: "Common/DropdownBox.png", Border: 16)
-- (TexturePath: "Common/TitledDropdownBox.png", Border: 57)

-- PanelPadding Examples:
-- 6
-- 29

-- PanelAlign Examples:
-- Bottom
-- Right

-- PanelOffset Example:
-- 7

-- EntryHeight Example:
-- 31

-- EntriesInViewport Example:
-- 10

-- HorizontalEntryPadding Example:
-- 7

-- HoveredEntryBackground Examples:
-- (Color: #0a0f17)
-- (Color: #252e48)

-- PressedEntryBackground Examples:
-- (Color: #0f1621)
-- (Color: #232b44)

-- Sounds Example:
-- $Sounds.@DropdownBox

-- EntrySounds Example:
-- $Sounds.@ButtonsLight

-- FocusOutlineSize Example:
-- 1

-- FocusOutlineColor Example:
-- #ffffff(0.4)

-- Alternate DefaultBackground Example:
-- (TexturePath: "Common/DropdownAlt.png", Border: 16)

-- Alternate HoveredBackground Example:
-- (TexturePath: "Common/DropdownAltHovered.png", Border: 16)

-- Alternate PressedBackground Example:
-- (TexturePath: "Common/DropdownAltHovered.png", Border: 16)

-- Alternate DefaultArrowTexturePath Example:
-- "Common/AltDropdownCaretDown.png"

-- Alternate HoveredArrowTexturePath Example:
-- "Common/AltDropdownCaretDown.png"

-- Alternate PressedArrowTexturePath Example:
-- "Common/AltDropdownCaretUp.png"

-- Alternate ArrowWidth Example:
-- 12

-- Alternate ArrowHeight Example:
-- 7

-- PanelTitleLabelStyle Example:
-- LabelStyle(TextColor: #96a9be, RenderBold: true, RenderUppercase: true, VerticalAlignment: Center, FontSize: 13)

-- Alternate PanelPadding Example:
-- 29

-- Alternate PanelAlign Example:
-- Bottom

-- Alternate PanelBackground Example:
-- (TexturePath: "Common/TitledDropdownBox.png", Border: 57)

-- Alternate HoveredEntryBackground Example:
-- (Color: #252e48)

-- Alternate PressedEntryBackground Example:
-- (Color: #232b44)

-- Alternate Sounds Example:
-- $Sounds.@DropdownBox

-- FileDropdownBoxStyle Example:
@DefaultFileDropdownBoxStyle = FileDropdownBoxStyle(
  DefaultBackground: (TexturePath: "Common/Dropdown.png", Border: 16)
)

-- Alternate DropdownBoxStyle DefaultBackground Example:
-- (...@DefaultDropdownBoxStyle,  DefaultBackground: (TexturePath: "Common/DropdownAlt.png", Border: 16))

-- PanelTitleLabelStyle Example:
-- LabelStyle(TextColor: #96a9be, RenderBold: true, RenderUppercase: true, VerticalAlignment: Center, FontSize: 13)

-- Alternate SelectedEntryLabelStyle Example:
-- (...$Common.@DefaultDropdownBoxStyle,        SelectedEntryLabelStyle: (RenderUppercase: false, RenderBold: true, FontSize: 16))

-- PanelWidth Examples:
-- 200
-- 100
-- 256

```

--------------------------------

### Localization Key Format and Examples

Source: https://context7.com/underscore95/hytale-ui-docs/llms.txt

Illustrates the format for localization keys in Hytale UI, which are prefixed with `%`. Examples show how to apply these keys for text content, tooltips, placeholders, and panel titles.

```HytaleUI
// Localization key format
Text: %client.namespace.key.subkey

// Examples of localization keys
Text: %client.mainMenu.worlds.worldName
TooltipText: %client.inventory.character.tooltip.toggleBackpack
PlaceholderText: %client.general.searchField.placeholder
PanelTitleText: %client.myAvatar.dropdown.filterBy
```

--------------------------------

### Complete UI Layout Example in HytaleUI

Source: https://context7.com/underscore95/hytale-ui-docs/llms.txt

A comprehensive example demonstrating a UI layout structure using various Hytale UI elements like Group, Label, CheckBox, Slider, and TextButton. It showcases layout modes, styling, and localization.

```HytaleUI
Group {
  Background: (TexturePath: "Common/ContainerFullPatch.png", Border: 20),
  LayoutMode: TopScrolling,
  Anchor: (Width: 500, Height: 600),
  Padding: (Full: 20),
  ScrollbarStyle: $Common.@DefaultScrollbarStyle,

  // Title label
  Label {
    Style: (
      FontSize: 24,
      TextColor: #dee2ef,
      FontName: "Secondary",
      RenderUppercase: true,
      HorizontalAlignment: Center
    ),
    Text: %client.settings.title,
    Anchor: (Height: 40)
  },

  // Settings row with checkbox
  Group {
    LayoutMode: Left,
    Anchor: (Height: 40),
    Padding: (Vertical: 8),

    Label {
      Style: $C.@DefaultLabelStyle,
      Text: %client.mainMenu.worlds.settings.pvp,
      Anchor: (FlexWeight: 1)
    },

    CheckBox {
      Style: $Common.@DefaultCheckBoxStyle,
      Anchor: (Width: 22, Height: 22)
    }
  },

  // Slider row
  Group {
    LayoutMode: Left,
    Anchor: (Height: 50),
    Padding: (Vertical: 8),

    Label {
      Style: $C.@DefaultLabelStyle,
      Text: %client.mainMenu.worlds.settings.dayDuration,
      Anchor: (Width: 150)
    },

    Slider {
      Style: $Common.@DefaultSliderStyle,
      Anchor: (Height: 5, FlexWeight: 1),
      Min: 0,
      Max: 100,
      Step: 1
    }
  },

  // Action buttons
  Group {
    LayoutMode: Right,
    Anchor: (Height: 60),
    Padding: (Top: 20),

    TextButton {
      Style: $Common.@SecondaryTextButtonStyle,
      Text: %client.general.cancel,
      Anchor: (Width: 100, Height: 40)
    },

    TextButton {
      Style: $Common.@PrimaryTextButtonStyle,
      Text: %client.general.save,
      Anchor: (Width: 100, Height: 40, Left: 10)
    }
  }
}
```

--------------------------------

### ButtonStyle Default Field Examples

Source: https://github.com/underscore95/hytale-ui-docs/blob/main/docs/Types/ButtonStyle.md

Provides example values for the 'Default' background style of a Button. These examples showcase various ways to define backgrounds, including direct image paths, texture paths with borders, and color definitions.

```hytale-ui-config
(Background: "../IconGeneralSettings.png")
(Background: @PrimaryButtonDefaultBackground)
(Background: (TexturePath: "../Common/OptionBackgroundPatch.png", Border: 16))
(Background: "../IconGeneralSettingsActivated.png")
(Background: "GameModeTileDisabled.png")
(Background: (TexturePath: "RandomizationUnlockedIcon.png"))
(Background: PatchStyle(TexturePath: "Common/Buttons/Destructive.png", Border: @ButtonBorderSize))
(Background: "CharacterPanelButton.png")
(Background: @DefaultButtonDefaultBackground)
(Background: "../IconMaskSettingsActivated.png")
(Background: (TexturePath: "MatchHairColorsIconOn.png"))
(Background: PatchStyle(TexturePath: "Common/Buttons/Secondary.png", Border: @ButtonBorderSize))
(Background: (TexturePath: "ServerRowBackgroundDefault.png", Border: 8))
(Background: PatchStyle(TexturePath: "Common/Buttons/Secondary.png", Border: @ButtonBorder))
(Background: "../IconMaskSettings.png")
(Background: PatchStyle(TexturePath: "Common/Buttons/Tertiary.png", Border: @ButtonBorderSize))
(Background: "GameModeTile.png")
(Background: $Common.@InputBoxSelectedBackground)
(Background: "GameModeTileSelected.png")
(Background: (Color: #00000000))
(Background: PatchStyle(TexturePath: "Common/Buttons/Tertiary.png", Border: @ButtonBorder))
(Background: @PrimarySquareButtonDefaultBackground)
(Background: $Common.@InputBoxBackground)
(Background: "CharacterPanelButtonActive.png")
(Background: (TexturePath: "../../Common/InputBoxSelected.png", Border: 16))
(Background: PatchStyle(TexturePath: "Common/Buttons/Destructive.png", Border: @ButtonBorder))
(Background: (TexturePath: "MatchHairColorsIconOff.png"))
(Background: (TexturePath: "../../Common/InputBox.png", Border: 16))
(Background: (TexturePath: "RandomizationLockedIcon.png"))
(Background: (TexturePath: "../Common/InputBoxSelected.png", Border: 16))
```

--------------------------------

### ButtonStyle Hovered Field Examples

Source: https://github.com/underscore95/hytale-ui-docs/blob/main/docs/Types/ButtonStyle.md

Provides example values for the 'Hovered' background style of a Button. These examples demonstrate how to define visual changes when a button is hovered over, using image paths, patch styles, and color overlays.

```hytale-ui-config
(Background: PatchStyle(TexturePath: "Common/Buttons/Secondary_Hovered.png", Border: @ButtonBorder))
(Background: "../IconGeneralSettingsActivated.png")
(Background: (TexturePath: "../../Common/InputBoxHovered.png", Border: 16))
(Background: (TexturePath: "RandomizationUnlockedIconHovered.png"))
(Background: (Color: #ffffff10))
(Background: PatchStyle(TexturePath: "Common/Buttons/Tertiary_Hovered.png", Border: @ButtonBorderSize))
(Background: (TexturePath: "ServerRowBackgroundHovered.png", Border: 8))
(Background: PatchStyle(TexturePath: "Common/Buttons/Destructive_Hovered.png", Border: @ButtonBorderSize))
(Background: PatchStyle(TexturePath: "Common/Buttons/Secondary_Hovered.png", Border: @ButtonBorderSize))
(Background: (TexturePath: "MatchHairColorsIconOffHovered.png"))
(Background: PatchStyle(TexturePath: "Common/Buttons/Destructive_Hovered.png", Border: @ButtonBorder))
(Background: "../IconMaskSettingsActivated.png")
(Background: @PrimarySquareButtonHoveredBackground)
(Background: @PrimaryButtonHoveredBackground)
(Background: "../IconGeneralSettingsHovered.png")
(Background: (TexturePath: "../Common/OptionBackgroundPatch.png", Border: 16, Color: #ffffff(0.7)))
(Background: PatchStyle(TexturePath: "Common/Buttons/Tertiary_Hovered.png", Border: @ButtonBorder))
(Background: "GameModeTileHovered.png")
(Background: @DefaultButtonHoveredBackground)
(Background: "../IconMaskSettingsHovered.png")
```

--------------------------------

### TooltipText Examples

Source: https://github.com/underscore95/hytale-ui-docs/blob/main/docs/UIElements/Group.md

Specifies the text content for tooltips. Uses localization keys for dynamic text.

```plaintext
%client.inventory.crafting.ingredient.tooltip.pullingFromChests
%server.memories.general.undiscovered.tooltipText
%client.map.playerList.inWorld
%client.inventory.character.tooltip.disabledBackpack
%client.settings.bindings.clear
%client.inventory.character.tooltip.disabledMemories
```

--------------------------------

### ButtonStyle Pressed Field Examples

Source: https://github.com/underscore95/hytale-ui-docs/blob/main/docs/Types/ButtonStyle.md

Provides example values for the 'Pressed' background style of a Button. These examples illustrate how to define the button's appearance when it is being clicked or pressed, using various image and color configurations.

```hytale-ui-config
(Background: @PrimarySquareButtonPressedBackground)
(Background: PatchStyle(TexturePath: "Common/Buttons/Destructive_Pressed.png", Border: @ButtonBorderSize))
(Background: (TexturePath: "../../Common/InputBoxPressed.png", Border: 16))
(Background: PatchStyle(TexturePath: "Common/Buttons/Tertiary_Pressed.png", Border: @ButtonBorder))
(Background: @DefaultButtonPressedBackground)
(Background: @PrimaryButtonPressedBackground)
(Background: (TexturePath: "ServerRowBackgroundDefault.png", Border: 8))
(Background: (TexturePath: "../Common/OptionBackgroundPatch.png", Border: 16, Color: #ffffff(0.85)))
(Background: PatchStyle(TexturePath: "Common/Buttons/Destructive_Pressed.png", Border: @ButtonBorder))
(Background: PatchStyle(TexturePath: "Common/Buttons/Secondary_Pressed.png", Border: @ButtonBorder))
(Background: PatchStyle(TexturePath: "Common/Buttons/Tertiary_Pressed.png", Border: @ButtonBorderSize))
(Background: (Color: #ffffff08))
(Background: PatchStyle(TexturePath: "Common/Buttons/Secondary_Pressed.png", Border: @ButtonBorderSize))
```

--------------------------------

### TextTooltipStyle Examples

Source: https://github.com/underscore95/hytale-ui-docs/blob/main/docs/UIElements/Group.md

Configures the visual style of text tooltips, including maximum width and label font size/wrapping.

```plaintext
(...$Common.@ButtonTextTooltipStyle,MaxWidth:300,LabelStyle:(FontSize:14,Wrap:true))
$C.@DefaultTextTooltipStyle
$Common.@DefaultTextTooltipStyle
$Common.@ButtonTextTooltipStyle
```

--------------------------------

### ItemGridStyle Fields and Example Values

Source: https://github.com/underscore95/hytale-ui-docs/blob/main/docs/Types/ItemGridStyle.md

This snippet outlines the various fields within the ItemGridStyle type, providing example values for each. These fields control aspects like slot size, spacing, icon display, and sound effects. Some values reference other UI elements or variables.

```hytale-ui
SlotSpacing: [DefaultItemSlotSpacing] | 64 | 46 | 72 | 48
SlotSize: [DefaultItemSlotSize] | 64 | 46 | 72 | 48
SlotIconSize: 64 | 42
SlotBackground: "Pages/Inventory/Slot.png" | [SlotPatch] | "../BlockSelectorSlotBackground.png"
QuantityPopupSlotOverlay: "Pages/Inventory/QuantityPopupSlotOverlay.png"
BrokenSlotBackgroundOverlay: "Pages/Inventory/SlotItemBrokenCracksOverlay.png"
BrokenSlotIconOverlay: "Pages/Inventory/SlotItemBrokenIconOverlay.png"
DefaultItemIcon: "Pages/Inventory/UnknownItemIcon.png"
DurabilityBar: "Pages/Inventory/DurabilityBar.png"
DurabilityBarBackground: "Pages/Inventory/DurabilityBarBackground.png"
DurabilityBarAnchor: (
    Bottom: 10,
    Left: 13,
    Width: 48,
    Height: 2
  )
DurabilityBarColorStart: "#a63232"
DurabilityBarColorEnd: "#63b649"
CursedIconPatch: "Pages/Inventory/CursedSpiral.png"
CursedIconAnchor: (
    Bottom: 67,
    Left: 46,
    Width: 21,
    Height: 21
  )
ItemStackHoveredSound: (
    SoundPath: $Sounds.@ButtonsLightHover,
    Volume: 6
  )
ItemStackActivateSound: (
    SoundPath: $Sounds.@ButtonsLightActivate,
    Volume: 4,
    MinPitch: -0.2,
    MaxPitch: 0.2
  )
...$InGame.@DefaultItemGridStyle, SlotSize: 48
...$InGame.@DefaultItemGridStyle, SlotSpacing: 4 | 18
```

--------------------------------

### Variable Usage Examples in HytaleUI

Source: https://context7.com/underscore95/hytale-ui-docs/llms.txt

Demonstrates how to reference and use variables in Hytale UI definitions, including styles, colors, dimensions, and sounds, using the `$Namespace.@VariableName` syntax.

```HytaleUI
// Reference a style variable
Style: $Common.@DefaultButtonStyle

// Reference a color variable
TextColor: $Common.@DisabledColor

// Reference a dimension variable
Height: $Common.@PrimaryButtonHeight

// Reference a sound variable
Sounds: $Sounds.@ButtonsLight
```

--------------------------------

### TextButton Style Examples

Source: https://github.com/underscore95/hytale-ui-docs/blob/main/docs/UIElements/TextButton.md

Examples of how to define the visual style and associated sounds for a TextButton. This includes referencing predefined styles, setting label properties like font size and alignment, and configuring background textures for different states (default, hovered, pressed).

```hytale-ui-script
(
  ...@TagTextButtonStyle,
  Sounds:(...$Sounds.@ButtonsLight, ...@Sounds)
)
```

```hytale-ui-script
(Default:(LabelStyle:(HorizontalAlignment:Center,VerticalAlignment:Center,RenderBold:true,FontSize:18)))

```

```hytale-ui-script
(
  ...@ServerBrowserTopTextButtonStyle,
  Sounds:(...$Sounds.@ButtonsLight, ...@Sounds)
)
```

```hytale-ui-script
[NavigationButtonStyle](Variables/NavigationButtonStyle.md)
```

```hytale-ui-script
(
  ...@DestructiveTextButtonStyle,
  Sounds:(...$Sounds.@ButtonsDestructive, ...@Sounds)
)
```

```hytale-ui-script
[TypeButtonStyle](Variables/TypeButtonStyle.md)
```

```hytale-ui-script
(
  ...@SecondaryButtonStyle,
  Sounds:(...$Sounds.@ButtonsMain, ...@Sounds)
)
```

```hytale-ui-script
(
  ...@CancelTextButtonStyle,
  Sounds:(...$Sounds.@ButtonsCancel, ...@Sounds)
)
```

```hytale-ui-script
(
  ...@SecondaryTextButtonStyle,
  Sounds:(...$Sounds.@ButtonsLight, ...@Sounds)
)
```

```hytale-ui-script
(
  ...$Common.@DefaultTextButtonStyle,
  Sounds:(...$Common.@ButtonSounds, $Sounds.@RespawnActivate)
)
```

```hytale-ui-script
(
  ...@ButtonStyle,
  Sounds:(...$Sounds.@ButtonsMain, ...@Sounds)
)
```

```hytale-ui-script
(
  Sounds:$Sounds.@ButtonsLight,
  Default:(LabelStyle:(...@CategoryButtonLabelStyle),Background:(TexturePath:"Tiles/TileDefault.png",Border:8),),
  Hovered:(LabelStyle:(...@CategoryButtonLabelStyle),Background:(TexturePath:"Tiles/TileHovered.png",Border:8),)
)
```

```hytale-ui-script
(
  ...@ButtonStyle,
  Sounds:(...$Sounds.@ButtonsLight, ...@Sounds)
)
```

```hytale-ui-script
(
  ...@HeaderTextButtonStyle,
  Sounds:(Activate:(SoundPath:$Sounds.@Tick,Volume:6),MouseHover:(SoundPath:$Sounds.@ButtonsLightHover,Volume:6))
)
```

```hytale-ui-script
(Default:(LabelStyle:(VerticalAlignment:Center,FontSize:14)),Hovered:(LabelStyle:(VerticalAlignment:Center,FontSize:14),Background:#000000(0.15)),Pressed:(LabelStyle:(VerticalAlignment:Center,FontSize:14),Background:#000000(0.5)))
```

```hytale-ui-script
(
  Sounds:$Sounds.@ButtonsLight,
  Default:(LabelStyle:(Wrap:true,HorizontalAlignment:Center,VerticalAlignment:Center,),Background:(TexturePath:"Tiles/TileDefault.png",Border:8),),
  Hovered:(LabelStyle:(Wrap:true,HorizontalAlignment:Center,VerticalAlignment:Center,),Background:(TexturePath:"Tiles/TileHovered.png",Border:8),)
)
```

```hytale-ui-script
(
  ...@PrimaryTextButtonStyle,
  Sounds:(...$Sounds.@ButtonsLight, ...@Sounds)
)
```

```hytale-ui-script
(Default:(LabelStyle:@LabelStyle),Hovered:(LabelStyle:(...@LabelStyle,TextColor:#babec6)),Sounds:(Activate:(SoundPath:$Sounds.@Tick,Volume:6),MouseHover:(SoundPath:$Sounds.@ButtonsLightHover,Volume:6)))
```

```hytale-ui-script
(
  ...@SmallSecondaryTextButtonStyle,
  Sounds:(...$Sounds.@ButtonsLight, ...@Sounds)
)
```

```hytale-ui-script
$Common.@PrimaryTextButtonStyle
```

```hytale-ui-script
(
  ...@DefaultTextButtonStyle,
  Sounds:(...$Sounds.@ButtonsLight, ...@Sounds)
)
```

```hytale-ui-script
(Sounds:$Sounds.@ButtonsLight,Default:(LabelStyle:(Wrap:true,HorizontalAlignment:Center,VerticalAlignment:Center,),Background:(TexturePath:"Tiles/TileSelected.png",Border:8),))
```

```hytale-ui-script
(
  ...@TertiaryTextButtonStyle,
  Sounds:(...$Sounds.@ButtonsLight, ...@Sounds)
)
```

```hytale-ui-script
[HeaderTextButtonStyle](Variables/HeaderTextButtonStyle.md)
```

```hytale-ui-script
[ButtonStyle](Variables/ButtonStyle.md)
```

--------------------------------

### ScrollbarStyle Examples

Source: https://github.com/underscore95/hytale-ui-docs/blob/main/docs/UIElements/Group.md

Defines the appearance and behavior of scrollbars. Supports default styles, custom configurations, and conditional visibility.

```plaintext
$Common.@DefaultPlaceholderScrollbarStyle
(Spacing:0,Size:0)
(...$Common.@DefaultScrollbarStyle,OnlyVisibleWhenHovered:true)
$C.@DefaultScrollbarStyle
[ScrollbarStyle](Variables/ScrollbarStyle.md)
$Common.@DefaultScrollbarStyle
$Common.@DefaultExtraSpacingScrollbarStyle
```

--------------------------------

### TextTooltipShowDelay Example

Source: https://github.com/underscore95/hytale-ui-docs/blob/main/docs/UIElements/Group.md

Sets the delay in seconds before a text tooltip is displayed. Accepts a floating-point number.

```plaintext
0.1
```

--------------------------------

### Background Image Example

Source: https://github.com/underscore95/hytale-ui-docs/blob/main/docs/UIElements/Group.md

A workaround to prevent background corner bleeding by specifying a background image. Accepts a file path string.

```plaintext
"EAScreenshot.png"
```

--------------------------------

### TextButton Anchor Examples

Source: https://github.com/underscore95/hytale-ui-docs/blob/main/docs/UIElements/TextButton.md

Examples demonstrating how to configure the anchor properties for a TextButton, which controls its size and position within its parent container. This includes setting explicit height and width, as well as relative positioning using offsets and references to other UI elements or variables.

```hytale-ui-script
(Height:45)
```

```hytale-ui-script
(Height:33)
```

```hytale-ui-script
(Top:@SpacingTop,Bottom:10,Height:45)
```

```hytale-ui-script
(Height:50)
```

```hytale-ui-script
(...@Anchor,Height:@DefaultButtonHeight)
```

```hytale-ui-script
(Height:32,Width:128,Top:@FuelSlotSize+15)
```

```hytale-ui-script
(Width:220,Height:40,Left:36,Bottom:40)
```

```hytale-ui-script
(...@Anchor,Height:@SmallButtonHeight)
```

```hytale-ui-script
(Width:20)
```

```hytale-ui-script
(Height:$Common.@PrimaryButtonHeight,Horizontal:8)
```

```hytale-ui-script
(...@Anchor,Height:@PrimaryButtonHeight)
```

```hytale-ui-script
(Width:32,Height:32,Left:30)
```

```hytale-ui-script
(...@Anchor,Height:$Common.@PrimaryButtonHeight)
```

```hytale-ui-script
(Top:10,Height:60)
```

```hytale-ui-script
(Width:275,Left:8)
```

--------------------------------

### TextButton Text Content Examples

Source: https://github.com/underscore95/hytale-ui-docs/blob/main/docs/UIElements/TextButton.md

Examples of the text content that can be displayed on a TextButton. This includes literal strings, localized text keys prefixed with '%', and references to external text definitions.

```hytale-ui-script
""+%client.mainMenu.navigation.worlds+""
```

```hytale-ui-script
""+%client.mainMenu.servers.groups.lan+""
```

```hytale-ui-script
""+%client.mainMenu.navigation.settings+""
```

```hytale-ui-script
"Craft"
```

```hytale-ui-script
%server.customUI.respawnPage.respawn
```

```hytale-ui-script
""+%client.mainMenu.servers.groups.favorite+""
```

```hytale-ui-script
"x"
```

```hytale-ui-script
%client.devTools.options
```

```hytale-ui-script
%client.feedback.type.feedback
```

```hytale-ui-script
""+%client.mainMenu.navigation.minigames+""
```

```hytale-ui-script
"<"
```

```hytale-ui-script
""+%client.mainMenu.navigation.avatar+""
```

```hytale-ui-script
""+%client.mainMenu.navigation.shop+""
```

```hytale-ui-script
">"
```

```hytale-ui-script
""+%client.mainMenu.navigation.servers+""
```

```hytale-ui-script
%client.feedback.type.bugreport
```

```hytale-ui-script
[Text](Variables/Text.md)
```

--------------------------------

### FlexWeight Examples

Source: https://github.com/underscore95/hytale-ui-docs/blob/main/docs/UIElements/Group.md

Defines the flex weight for UI elements, controlling their proportional size within a flex container. Values are typically integers.

```plaintext
5
4
1
```

--------------------------------

### Predefined Style References

Source: https://github.com/underscore95/hytale-ui-docs/blob/main/docs/UIElements/Label.md

These snippets show how to reference predefined style variables within the Hytale UI system. This allows for consistent styling across different UI elements by reusing common style configurations.

```Hytale UI Styling
[ServerNameStyle](Variables/ServerNameStyle.md)
```

```Hytale UI Styling
[RowHintTextStyle](Variables/RowHintTextStyle.md)
```

```Hytale UI Styling
[DefaultLabelStyle](Variables/DefaultLabelStyle.md)
```

--------------------------------

### Visible Examples

Source: https://github.com/underscore95/hytale-ui-docs/blob/main/docs/UIElements/Group.md

Controls the visibility of UI elements. Can be set to boolean values (true/false) or references to other visibility variables.

```plaintext
true
[Visible](Variables/Visible.md)
[ShowIcon](Variables/ShowIcon.md)
false
```

--------------------------------

### Referencing Stylesheets

Source: https://github.com/underscore95/hytale-ui-docs/blob/main/docs/UIElements/Label.md

This snippet shows how to reference predefined styles from different modules or variables within the Hytale UI system. This allows for consistent styling across various UI components by reusing common style definitions.

```Hytale UI Styling
[BindingLabelStyle](Variables/BindingLabelStyle.md)
```

```Hytale UI Styling
[HeadingStyle](Variables/HeadingStyle.md)
```

```Hytale UI Styling
[MotdStyle](Variables/MotdStyle.md)
```

```Hytale UI Styling
[ColumnHeadingStyle](Variables/ColumnHeadingStyle.md)
```

--------------------------------

### Configure Text Styles

Source: https://github.com/underscore95/hytale-ui-docs/blob/main/docs/UIElements/Label.md

These snippets demonstrate how to configure various text styling properties for UI elements. They cover font size, color, alignment, and rendering attributes like bold, italics, and uppercase. These are typically used within a UI framework's styling system.

```Hytale UI Styling
(FontSize:20,VerticalAlignment:Center,HorizontalAlignment:Center,FontName:"Secondary")
```

```Hytale UI Styling
(...$Label.@DefaultLabelStyle,HorizontalAlignment:Center)
```

```Hytale UI Styling
(FontSize:11,RenderBold:true,Alignment:Center)
```

```Hytale UI Styling
(FontSize:13,TextColor:#c0c0c0bb,HorizontalAlignment:End)
```

```Hytale UI Styling
(RenderBold:true,Alignment:Center,TextColor:#ffffe6,FontName:"Secondary",FontSize:12)
```

```Hytale UI Styling
(FontSize:14,RenderBold:true,TextColor:#ffffff)
```

```Hytale UI Styling
(FontSize:14,TextColor:#96a9be,Wrap:true,HorizontalAlignment:Center)
```

```Hytale UI Styling
(...$Common.@DefaultLabelStyle,Wrap:true)
```

```Hytale UI Styling
(TextColor:#838383,FontSize:14)
```

```Hytale UI Styling
(FontSize:18,Wrap:true,HorizontalAlignment:Center,TextColor:#949ba8)
```

```Hytale UI Styling
(TextColor:#838383,FontSize:14,RenderItalics:true)
```

```Hytale UI Styling
(FontSize:15,TextColor:#b7b8b9,VerticalAlignment:Center)
```

```Hytale UI Styling
(FontSize:16,TextColor:#96a9be,HorizontalAlignment:Center)
```

```Hytale UI Styling
(RenderBold:true,VerticalAlignment:Center,FontSize:15,RenderUppercase:true,TextColor:#ccd3dd,HorizontalAlignment:Center)
```

```Hytale UI Styling
(...@DefaultLabelStyle,VerticalAlignment:Center)
```

```Hytale UI Styling
(FontSize:18,TextColor:#919191)
```

```Hytale UI Styling
(...$C.@DefaultLabelStyle,VerticalAlignment:Center)
```

```Hytale UI Styling
(Wrap:true,TextColor:#868585,FontSize:12,HorizontalAlignment:Center)
```

```Hytale UI Styling
(RenderBold:true,RenderUppercase:true,VerticalAlignment:Center,FontSize:15,TextColor:#cfd6e0,FontName:"Secondary",HorizontalAlignment:@Alignment,LetterSpacing:0)
```

```Hytale UI Styling
(RenderBold:true,FontSize:10,RenderUppercase:true)
```

```Hytale UI Styling
(TextColor:#696969,FontSize:14,Wrap:true)
```

```Hytale UI Styling
(FontSize:14,TextColor:#cc4444,HorizontalAlignment:Center,VerticalAlignment:Center,RenderBold:true,)
```

```Hytale UI Styling
(Alignment:Center,FontSize:18,RenderItalics:false,TextColor:#96a9be,Wrap:true)
```

```Hytale UI Styling
(...$C.@DefaultLabelStyle,HorizontalAlignment:Center,Wrap:true,FontSize:16)
```

```Hytale UI Styling
(...@TitleStyle,FontName:"Default",RenderBold:true,TextColor:#b4c8c9,LetterSpacing:0.5)
```

```Hytale UI Styling
(FontSize:11,HorizontalAlignment:End)
```

```Hytale UI Styling
(FontSize:11,TextColor:#bebebe)
```

```Hytale UI Styling
(FontSize:13,RenderBold:true,TextColor:#ffffff)
```

```Hytale UI Styling
(...$Label.@DefaultLabelStyle,HorizontalAlignment:End)
```

```Hytale UI Styling
(HorizontalAlignment:Start,VerticalAlignment:Center,RenderBold:true,RenderUppercase:true,TextColor:#878e9c,FontSize:13)
```

```Hytale UI Styling
(FontSize:16,TextColor:#e2d8d8,HorizontalAlignment:End,VerticalAlignment:End,RenderBold:true,)
```

```Hytale UI Styling
(VerticalAlignment:Center,TextColor:#96a9be,FontSize:18,RenderBold:true,RenderUppercase:true)
```

```Hytale UI Styling
(...@MemoryCounterStyle,TextColor:#39f493)
```

```Hytale UI Styling
(FontSize:12,TextColor:#ffffff(0.9))
```

```Hytale UI Styling
$Container.@SubtitleStyle
```

```Hytale UI Styling
(Alignment:Center,FontSize:16,RenderBold:true,RenderUppercase:true)
```

```Hytale UI Styling
(...@MemoryTitleStyle,HorizontalAlignment:Center,Wrap:true)
```

```Hytale UI Styling
(TextColor:#ffffff(0.2),RenderItalics:true)
```

```Hytale UI Styling
(FontSize:18,RenderUppercase:true,RenderBold:true,HorizontalAlignment:Center,TextColor:#94969a)
```

```Hytale UI Styling
(FontSize:16,Wrap:true,TextColor:#ffffff(0.85),HorizontalAlignment:Center)
```

```Hytale UI Styling
(HorizontalAlignment:End,TextColor:@PrimaryCursedColor,OutlineColor:#b051ef22,FontSize:14)
```

```Hytale UI Styling
(HorizontalAlignment:Center,FontSize:18,TextColor:#96a9be,Wrap:true)
```

```Hytale UI Styling
(FontSize:13,TextColor:#96a9be(0.5))
```

```Hytale UI Styling
(...$Label.@DefaultLabelStyle,FontSize:14,TextColor:#ffffff,RenderBold:true,RenderUppercase:true,LetterSpacing:1)
```

```Hytale UI Styling
(RenderBold:true,VerticalAlignment:Center,FontSize:15,TextColor:#afc2c3,HorizontalAlignment:@Alignment)
```

```Hytale UI Styling
(HorizontalAlignment:Center,TextColor:#d3dee3,FontSize:32,RenderBold:true,RenderUppercase:true)
```

```Hytale UI Styling
(VerticalAlignment:Center,TextColor:#c2d3de,FontSize:18,RenderBold:true)
```

```Hytale UI Styling
(HorizontalAlignment:Center,VerticalAlignment:End,RenderBold:true,TextColor:#ecf5f7,RenderUppercase:true,FontSize:20)
```

```Hytale UI Styling
(RenderBold:true,TextColor:#8f99b4)
```

```Hytale UI Styling
(FontSize:10,TextColor:#5f5440,VerticalAlignment:End)
```

```Hytale UI Styling
(OutlineColor:#000000(0.1))
```

```Hytale UI Styling
(FontSize:11,TextColor:#ffffff(0.8))
```

```Hytale UI Styling
(FontSize:13,RenderBold:true,RenderUppercase:true,TextColor:#878e9c)
```

```Hytale UI Styling
(FontSize:13,TextColor:#ffffff(0.85))
```

```Hytale UI Styling
(RenderUppercase:true,RenderBold:true,FontSize:12,TextColor:#c5cdd9,HorizontalAlignment:Center)
```

```Hytale UI Styling
(TextColor:#d4a574,FontSize:14,VerticalAlignment:Center,Wrap:true)
```

```Hytale UI Styling
(TextColor:#819395,FontSize:15,HorizontalAlignment:Center,VerticalAlignment:Center)
```

```Hytale UI Styling
(VerticalAlignment:Center,RenderBold:true,FontSize:15,Wrap:true)
```

```Hytale UI Styling
(HorizontalAlignment:Center,TextColor:#667382,FontSize:18)
```

```Hytale UI Styling
(TextColor:#819395,FontSize:15,HorizontalAlignment:Center,VerticalAlignment:Center,RenderBold:false)
```

```Hytale UI Styling
(TextColor:#ffffff(0.8),FontSize:14)
```

```Hytale UI Styling
(FontSize:13,RenderBold:true,RenderUppercase:true,TextColor:#7a9cc6)
```

```Hytale UI Styling
(FontSize:38,LetterSpacing:1.8,FontName:"Secondary",RenderBold:true,HorizontalAlignment:Center,RenderUppercase:true)
```

```Hytale UI Styling
(FontSize:18,VerticalAlignment:Center,Wrap:true)
```

```Hytale UI Styling
(FontSize:12,RenderBold:true,TextColor:#878e9c,VerticalAlignment:Center)
```

```Hytale UI Styling
(FontSize:15,TextColor:#ffffff,HorizontalAlignment:End,VerticalAlignment:End,RenderBold:true,)
```