Theming

Theming with Design Module

The Design module (RGXDesign) provides a cohesive visual palette, backdrop templates, and widget factories for building consistent addon UIs.

---

Color Palette

Key	Hex	Usage
primary	#58be81	Primary accent, active borders, highlights
accent	#bc6fa8	Secondary accent, special elements
surface	#1a1a2e	Surface/panel backgrounds
background	#16213e	Main frame backgrounds
text	#e0e0e0	Primary text color
subtext	#a0a0a0	Muted/secondary text
success	#4caf50	Success states, positive values
warning	#ff9800	Warning states, caution
error	#f44336	Error states, negative values
border	#333355	Default border color
borderActive	#58be81	Focused/active border (matches primary)
hover	#2a2a4e	Hover highlight background

Accessing Palette Colors

local Design = RGX:GetDesign()
local Colors = RGX:GetColors()

-- Via Design palette table
local primary = Design.palette.primary  -- {r, g, b, a}

-- Via Colors module (some palette colors are mirrored)
local success = Colors:Get("success")

---

Backdrop Templates

Variants

Variant	Background	Border	Use Case
dark	surface + low alpha	border	Main frames, panels
panel	background + medium alpha	border	Sub-panels, sections
solid	background + full alpha	border	Solid containers
border	transparent	borderActive	Border-only frames

Design:ApplyBackdrop(frame, variant)

Apply a backdrop template to any frame:

local Design = RGX:GetDesign()

Design:ApplyBackdrop(myFrame, "dark")
Design:ApplyBackdrop(myPanel, "panel")
Design:ApplyBackdrop(myContainer, "solid")
Design:ApplyBackdrop(myBorder, "border")

Each variant sets SetBackdrop() and SetBackdropColor() + SetBackdropBorderColor() with the palette values.

---

Widget Factories

Design:CreateFrame(parent, opts) → Frame

Create a styled frame with backdrop already applied:

local frame = Design:CreateFrame(parent, {
    width = 400,
    height = 300,
    backdrop = "dark",  -- default: "dark"
})

Design:CreateButton(parent, opts) → Button

Create a styled button:

local btn = Design:CreateButton(parent, {
    text = "Click Me",
    width = 120,
    height = 28,
    onClick = function()
    print("Clicked!")
    end,
})

The button uses the primary color for hover state and palette colors for text/border.

Design:CreateSectionHeader(parent, text) → FontString

Create a styled section header with the primary accent color:

local header = Design:CreateSectionHeader(parent, "Appearance")
header:SetPoint("TOPLEFT", 10, -10)

Design:CreateDivider(parent) → Texture

Create a horizontal divider line using the border color:

local divider = Design:CreateDivider(parent)
divider:SetPoint("TOPLEFT", 10, -30)
divider:SetPoint("TOPRIGHT", -10, -30)

Design:CreateSection(parent, opts) → Frame

Create a section container with header and padding:

local section = Design:CreateSection(parent, {
    title = "Font Settings",
    padding = 10,
})
-- Add controls to section
UI:CreateSlider(section, { label = "Size", min = 8, max = 24 })

Design:RGBToHex(r, g, b) → string

Convert RGB values (0-1 range) to a hex string:

local hex = Design:RGBToHex(0.345, 0.745, 0.506)
-- → "58be81"

---

Font Conventions

When theming with RGXDesign, use these font conventions for consistency:

Element	Recommended Font	Size	Flags
Main title	Inter-Bold	18-24	OUTLINE or THICKOUTLINE
Section header	Inter-SemiBold	14-16	OUTLINE
Body text	Inter-Regular	11-13	""
Small/caption	Inter-Light	9-10	""
Button text	Inter-Medium	12-13	OUTLINE
Tooltip	Inter-Regular	12	""

local Fonts = RGX:GetFonts()
Fonts:FromTemplate(titleText, "title")
Fonts:FromTemplate(bodyText, "body")
Fonts:FromTemplate(smallText, "small")

---

Combined Theming Example

local RGX = _G.RGXFramework
RGX:OnReady(function()
    local Design = RGX:GetDesign()
    local Fonts = RGX:GetFonts()
    local Colors = RGX:GetColors()
    local UI = RGX:GetUI()

    -- Main frame
    local frame = Design:CreateFrame(UIParent, {
        width = 350,
        height = 250,
        backdrop = "dark",
    })
    frame:SetPoint("CENTER")

    -- Section
    local section = Design:CreateSection(frame, {
        title = "Settings",
        padding = 12,
    })
    section:SetPoint("TOPLEFT", 10, -10)
    section:SetPoint("BOTTOMRIGHT", -10, 10)

    -- Header
    local header = Design:CreateSectionHeader(section, "Configuration")
    header:SetPoint("TOPLEFT", 0, 0)

    -- Divider
    local divider = Design:CreateDivider(section)
    divider:SetPoint("TOPLEFT", 0, -20)
    divider:SetPoint("TOPRIGHT", 0, -20)

    -- Controls
    UI:CreateToggle(section, {
        label = "Enable",
        value = true,
        onChange = function(v) print("Toggled:", v) end,
    })

    -- Colored text
    local status = section:CreateFontString(nil, "OVERLAY")
    Fonts:Apply(status, "Inter-Regular", 12, "")
    status:SetPoint("BOTTOMLEFT", 0, 0)
    status:SetText(Colors:Wrap("Ready", "success"))
end)