Skip to content

[DRAFT] Centralize Styling to allow for Themes #2109

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Zoooombie wants to merge 6 commits into
base: dev
Choose a base branch
from
Draft

[DRAFT] Centralize Styling to allow for Themes #2109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
093abeb
[WIP] add core styling functionality
Jun 6, 2026
e89912a
[WIP] apply styling to primary components
Jun 6, 2026
e07ec9c
Merge commit 'a663437dc9723f6aa0831c20aa7ec4a01241de08' into feature/…
Jun 6, 2026
d1a299c
[CLEAN] cleanup leftovers in style.lua
Jun 6, 2026
d67c111
[WIP] add font of tooltips + calcs tab to style. add pathControl to s…
Jun 7, 2026
2fcfed0
[WIP] add parts of calc section & breakdown to style
Jun 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 23 additions & 15 deletions src/Classes/ButtonControl.lua
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,40 +40,48 @@ function ButtonClass:Draw(viewPort, noTooltip)
local enabled = self:IsEnabled()
local mOver = self:IsMouseOver()
local locked = self:GetProperty("locked")
-- Button-Border
if not enabled then
SetDrawColor(0.33, 0.33, 0.33)
elseif mOver or locked then
SetDrawColor(1, 1, 1)
SetDrawStyle('button_border_disabled')
elseif mOver then
SetDrawStyle('button_border_hover')
elseif locked then
SetDrawStyle('button_border_toggled')
else
SetDrawColor(0.5, 0.5, 0.5)
SetDrawStyle('button_border')
end
DrawImage(nil, x, y, width, height)
-- Button-Fill
if not enabled then
SetDrawColor(0, 0, 0)
SetDrawStyle('button_background_disabled')
elseif self.clicked and mOver then
SetDrawColor(0.5, 0.5, 0.5)
elseif mOver or locked then
SetDrawColor(0.33, 0.33, 0.33)
SetDrawStyle('button_background_clicked')
elseif locked then
SetDrawStyle('button_background_toggled')
elseif mOver then
SetDrawStyle('button_background_hover')
else
SetDrawColor(0, 0, 0)
SetDrawStyle('button_background')
end
DrawImage(nil, x + 1, y + 1, width - 2, height - 2)
-- Button-Image
if self.image then
if enabled then
SetDrawColor(1, 1, 1)
SetDrawStyle('button_image')
else
SetDrawColor(0.33, 0.33, 0.33)
SetDrawStyle('button_image_disabled')
end
DrawImage(self.image, x + 2, y + 2, width - 4, height - 4)
if self.clicked and mOver then
SetDrawColor(1, 1, 1, 0.5)
SetDrawStyle('button_image_overlay_clicked')
DrawImage(nil, x + 1, y + 1, width - 2, height - 2)
end
end
-- Button-Text
if enabled then
SetDrawColor(1, 1, 1)
SetDrawStyle('text_button')
else
SetDrawColor(0.33, 0.33, 0.33)
SetDrawStyle('text_button_disabled')
end
local label = self:GetProperty("label")
if label == "+" then
Expand All @@ -86,7 +94,7 @@ function ButtonClass:Draw(viewPort, noTooltip)
DrawImageQuad(nil, x + width * 0.7, y + height * 0.2, x + width * 0.8, y + height * 0.3, x + width * 0.3, y + height * 0.8, x + width * 0.2, y + height * 0.7)
else
local overSize = self.overSizeText or 0
DrawString(x + width / 2, y + 2 - overSize, "CENTER_X", height - 4 + overSize * 2, "VAR", label)
StyledDrawString(x + width / 2, y + 2 - overSize, "CENTER_X", height - 4 + overSize * 2, 'text_button', label)
end
if mOver then
if not noTooltip or self.forceTooltip then
Expand Down
32 changes: 16 additions & 16 deletions src/Classes/CalcBreakdownControl.lua
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,9 @@ function CalcBreakdownClass:SetBreakdownData(displayData, pinned)
for _, line in ipairs(section.lines) do
local _, num = string.gsub(line, "%d%d%d%d", "") -- count how many commas will be added
if main.showThousandsSeparators and num > 0 then
section.width = m_max(section.width, DrawStringWidth(section.textSize, "VAR", line) + 8 + (4 * num))
section.width = m_max(section.width, StyledDrawStringWidth(section.textSize, 'text_calc_breakdown', line) + 8 + (4 * num))
else
section.width = m_max(section.width, DrawStringWidth(section.textSize, "VAR", line) + 8)
section.width = m_max(section.width, StyledDrawStringWidth(section.textSize, 'text_calc_breakdown', line) + 8)
end
end
section.height = #section.lines * section.textSize + 4
Expand All @@ -86,9 +86,9 @@ function CalcBreakdownClass:SetBreakdownData(displayData, pinned)
if row[col.key] then
local _, num = string.gsub(row[col.key], "%d%d%d%d", "") -- count how many commas will be added
if main.showThousandsSeparators and num > 0 then
col.width = m_max(col.width or 0, DrawStringWidth(16, "VAR", col.label) + 6, DrawStringWidth(12, "VAR", row[col.key]) + 6 + (4 * num))
col.width = m_max(col.width or 0, StyledDrawStringWidth(16, 'text_calc_breakdown', col.label) + 6, StyledDrawStringWidth(12, 'text_calc_breakdown', row[col.key]) + 6 + (4 * num))
else
col.width = m_max(col.width or 0, DrawStringWidth(16, "VAR", col.label) + 6, DrawStringWidth(12, "VAR", row[col.key]) + 6)
col.width = m_max(col.width or 0, StyledDrawStringWidth(16, 'text_calc_breakdown', col.label) + 6, StyledDrawStringWidth(12, 'text_calc_breakdown', row[col.key]) + 6)
end
end
end
Expand All @@ -98,11 +98,11 @@ function CalcBreakdownClass:SetBreakdownData(displayData, pinned)
end
section.height = #section.rowList * 14 + 20
if section.label then
self.contentWidth = m_max(self.contentWidth, 6 + DrawStringWidth(16, "VAR", section.label..":"))
self.contentWidth = m_max(self.contentWidth, 6 + StyledDrawStringWidth(16, 'text_calc_breakdown', section.label..":"))
section.height = section.height + 16
end
if section.footer then
self.contentWidth = m_max(self.contentWidth, 6 + DrawStringWidth(12, "VAR", section.footer))
self.contentWidth = m_max(self.contentWidth, 6 + StyledDrawStringWidth(12, 'text_calc_breakdown', section.footer))
local _, lines = string.gsub(section.footer, "\n", "\n") -- counts newlines in the string
section.height = section.height + 12 * (lines + 1)
end
Expand Down Expand Up @@ -548,7 +548,7 @@ function CalcBreakdownClass:DrawBreakdownTable(viewPort, x, y, section)
local cursorX, cursorY = GetCursorPos()
if section.label then
-- Draw table label if able
DrawString(x + 2, y, "LEFT", 16, "VAR", "^7"..section.label..":")
StyledDrawString(x + 2, y, "LEFT", 16, 'text_calc_breakdown', "^7"..section.label..":")
y = y + 16
end
local colX = x + 4
Expand All @@ -562,7 +562,7 @@ function CalcBreakdownClass:DrawBreakdownTable(viewPort, x, y, section)
DrawImage(nil, colX - 2, y, 1, section.height - (section.label and 16 or 0) - (section.footer and 12 or 0))
end
SetDrawColor(1, 1, 1)
DrawString(colX, y + 2, "LEFT", 16, "VAR", col.label)
StyledDrawString(colX, y + 2, "LEFT", 16, 'text_calc_breakdown', col.label)
colX = colX + col.width
end
end
Expand All @@ -578,18 +578,18 @@ function CalcBreakdownClass:DrawBreakdownTable(viewPort, x, y, section)
local _, notes = string.gsub(row[col.key], " to ", " ") -- counts " to " in the string
local _, paren = string.gsub(row[col.key], "%b()", " ") -- counts parenthesis in the string
if (alpha == 0 or notes > 0 or paren > 0) and col.right then
DrawString(col.x + col.width - 4, rowY + 1, "RIGHT_X", 12, "VAR", "^7"..formatNumSep(tostring(row[col.key])))
StyledDrawString(col.x + col.width - 4, rowY + 1, "RIGHT_X", 12, 'text_calc_breakdown', "^7"..formatNumSep(tostring(row[col.key])))
elseif (alpha == 0 or notes > 0 or paren > 0) then
DrawString(col.x, rowY + 1, "LEFT", 12, "VAR", "^7"..formatNumSep(tostring(row[col.key])))
StyledDrawString(col.x, rowY + 1, "LEFT", 12, 'text_calc_breakdown', "^7"..formatNumSep(tostring(row[col.key])))
else
DrawString(col.x, rowY + 1, "LEFT", 12, "VAR", "^7"..tostring(row[col.key]))
StyledDrawString(col.x, rowY + 1, "LEFT", 12, 'text_calc_breakdown', "^7"..tostring(row[col.key]))
end
local ttFunc = row[col.key.."Tooltip"]
local ttNode = row[col.key.."Node"]
if (ttFunc or ttNode) and cursorY >= viewPort.y + 2 and cursorY < viewPort.y + viewPort.height - 2 and cursorX >= col.x and cursorY >= rowY and cursorX < col.x + col.width and cursorY < rowY + 14 then
-- Mouse is over the cell, draw highlighting lines and show the tooltip/node location
SetDrawLayer(nil, 15)
SetDrawColor(0, 1, 0)
SetDrawStyle('calc_breakdown_border_hover')
DrawImage(nil, col.x - 2, rowY - 1, col.width, 1)
DrawImage(nil, col.x - 2, rowY + 13, col.width, 1)
if ttFunc then
Expand Down Expand Up @@ -624,7 +624,7 @@ function CalcBreakdownClass:DrawBreakdownTable(viewPort, x, y, section)
end
if section.footer then
-- Draw table footer if able
DrawString(x + 2, rowY, "LEFT", 12, "VAR", "^7"..section.footer)
StyledDrawString(x + 2, rowY, "LEFT", 12, 'text_calc_breakdown', "^7"..section.footer)
end
end

Expand Down Expand Up @@ -694,9 +694,9 @@ function CalcBreakdownClass:Draw(viewPort)
-- Draw border (this is put in sub layer 11 so it draws over the contents, in case they don't fit the screen)
SetDrawLayer(nil, 11)
if self.pinned then
SetDrawColor(0.25, 1, 0.25)
SetDrawStyle('calc_breakdown_tooltip_border_pinned')
else
SetDrawColor(0.33, 0.66, 0.33)
SetDrawStyle('calc_breakdown_tooltip_border')
end
DrawImage(nil, x, y, width, 2)
DrawImage(nil, x, y + height - 2, width, 2)
Expand All @@ -713,7 +713,7 @@ function CalcBreakdownClass:Draw(viewPort)
for i, line in ipairs(section.lines) do
SetDrawColor(1, 1, 1)
local _, dec = string.gsub(line, "%.%d%d.", " ") -- counts decimals with 2 or more digits
DrawString(x + 4, lineY, "LEFT", section.textSize, "VAR", formatNumSep(line))
StyledDrawString(x + 4, lineY, "LEFT", section.textSize, 'text_calc_breakdown', formatNumSep(line))
lineY = lineY + section.textSize
end
elseif section.type == "TABLE" then
Expand Down
27 changes: 14 additions & 13 deletions src/Classes/CalcSectionControl.lua
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,7 @@ function CalcSectionClass:Draw(viewPort, noTooltip)
SetDrawLayer(nil, -10)
SetDrawColor(self.colour)
DrawImage(nil, x, y, width, height)
SetDrawColor(0.10, 0.10, 0.10)
SetDrawStyle('calc_section_background')
DrawImage(nil, x + 2, y + 2, width - 4, height - 4)

local primary = true
Expand All @@ -237,16 +237,17 @@ function CalcSectionClass:Draw(viewPort, noTooltip)
SetDrawColor(0.10, 0.10, 0.10)
-- Draw label
if not self.enabled then
DrawString(x + 3, lineY + 3, "LEFT", 16, "VAR BOLD", "^8"..subSec.label)
SetDrawStyle('text_calc_section_title_disabled')
StyledDrawString(x + 3, lineY + 3, "LEFT", 16, 'text_calc_section_title_disabled', subSec.label)
else
local textColor = "^7"
local textColor = GetStyleColor('text_calc_section_title')
if self.calcsTab:SearchMatch(subSec.label) then
textColor = colorCodes.HIGHLIGHT
end
DrawString(x + 3, lineY + 3, "LEFT", 16, "VAR BOLD", textColor..subSec.label..":")
StyledDrawString(x + 3, lineY + 3, "LEFT", 16, 'text_calc_section_title', textColor..subSec.label..":")
if subSec.data.extra then
local x = x + 3 + DrawStringWidth(16, "VAR BOLD", subSec.label) + 10
DrawString(x, lineY + 3, "LEFT", 16, "VAR", "^7"..formatCalcStr(subSec.data.extra, actor))
local x = x + 3 + StyledDrawStringWidth(16, 'text_calc_section_title', subSec.label) + 10
StyledDrawString(x, lineY + 3, "LEFT", 16, 'text_calc_section_title_value', GetStyleColor('text_calc_section_title_value')..formatCalcStr(subSec.data.extra, actor))
end
end
-- Draw line below label
Expand All @@ -269,17 +270,17 @@ function CalcSectionClass:Draw(viewPort, noTooltip)
for _, rowData in ipairs(subSec.data) do
if rowData.enabled then
rows = rows + 1
local textColor = "^7"
local textColor = GetStyleColor('text_calc_section_label')
if rowData.color then
textColor = rowData.color
end
if rowData.label then
SetDrawColor(rowData.bgCol or "^0")
SetDrawColor(rowData.bgCol or GetStyleColor('calc_section_label_background'))
DrawImage(nil, x + 2, lineY + 2, 130, 18)
if self.calcsTab:SearchMatch(rowData.label) then
textColor = colorCodes.HIGHLIGHT
end
DrawString(x + 132, lineY + 2, "RIGHT_X", 16, "VAR", textColor..rowData.label..":")
StyledDrawString(x + 132, lineY + 2, "RIGHT_X", 16, 'text_calc_section_label', textColor..rowData.label..":")
end
for colour, colData in ipairs(rowData) do
-- Draw column separator at the left end of the cell
Expand All @@ -291,17 +292,17 @@ function CalcSectionClass:Draw(viewPort, noTooltip)
end
if self.calcsTab.displayData == colData then
-- This is the display stat, draw a green border around this cell
SetDrawColor(0.25, 1, 0.25)
SetDrawStyle('calc_breakdown_border_hover')
DrawImage(nil, colData.x + 2, colData.y, colData.width - 2, colData.height)
SetDrawColor(rowData.bgCol or "^0")
SetDrawColor(rowData.bgCol or GetStyleColor('calc_section_value_background_hover'))
DrawImage(nil, colData.x + 3, colData.y + 1, colData.width - 4, colData.height - 2)
else
SetDrawColor(rowData.bgCol or "^0")
SetDrawColor(rowData.bgCol or GetStyleColor('calc_section_value_background'))
DrawImage(nil, colData.x + 2, colData.y, colData.width - 2, colData.height)
end
local textSize = rowData.textSize or 14
SetViewport(colData.x + 3, colData.y, colData.width - 4, colData.height)
DrawString(1, 9 - textSize/2, "LEFT", textSize, "VAR", "^7"..formatCalcStr(colData.format, actor, colData))
StyledDrawString(1, 9 - textSize/2, "LEFT", textSize, 'text_calc_section_value', GetStyleColor('text_calc_section_value')..formatCalcStr(colData.format, actor, colData))
SetViewport()
end
end
Expand Down
46 changes: 25 additions & 21 deletions src/Classes/CheckBoxControl.lua
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ local CheckBoxClass = newClass("CheckBoxControl", "Control", "TooltipHost", func
self.Control(anchor, rect)
self.TooltipHost(tooltipText)
self.label = label
self.labelWidth = DrawStringWidth(self.width - 4, "VAR", label or "") + 5
self.labelWidth = StyledDrawStringWidth(self.width - 4, 'text_label', label or "") + 5
self.changeFunc = changeFunc
self.state = initialState
self.checkImage = nil
Expand Down Expand Up @@ -36,62 +36,66 @@ function CheckBoxClass:Draw(viewPort, noTooltip)
local size = self.width
local enabled = self:IsEnabled()
local mOver = self:IsMouseOver()
-- Checkbox-Border
if not enabled then
SetDrawColor(0.33, 0.33, 0.33)
SetDrawStyle('checkbox_border_disabled')
elseif mOver then
SetDrawColor(1, 1, 1)
SetDrawStyle('checkbox_border_hover')
elseif self.borderFunc then
local r, g, b = self.borderFunc()
SetDrawColor(r, g, b)
SetDrawStyle('checkbox'..self.borderFunc())
elseif self.checkImage and self.state then
SetDrawColor(0.75, 0.75, 0.75)
-- TODO: why different border when using image instead of checkmark?
SetDrawStyle('checkbox_border_toggled')
else
SetDrawColor(0.5, 0.5, 0.5)
SetDrawStyle('checkbox_border')
end
DrawImage(nil, x, y, size, size)
-- Checkbox-Fill
if not enabled then
SetDrawColor(0, 0, 0)
SetDrawStyle('checkbox_background_disabled')
elseif self.clicked and mOver then
SetDrawColor(0.5, 0.5, 0.5)
SetDrawStyle('checkbox_background_clicked')
elseif mOver then
SetDrawColor(0.33, 0.33, 0.33)
SetDrawStyle('checkbox_background_hover')
else
SetDrawColor(0, 0, 0)
SetDrawStyle('checkbox_background')
end
DrawImage(nil, x + 1, y + 1, size - 2, size - 2)
-- Checkbox-Checkmark
if self.checkImage then
if self.state then
if not enabled then
SetDrawColor(0.33, 0.33, 0.33)
SetDrawStyle('checkbox_checkimage_disabled')
elseif mOver then
SetDrawColor(2, 2, 2)
SetDrawStyle('checkbox_checkimage_hover')
else
SetDrawColor(1, 1, 1)
SetDrawStyle('checkbox_checkimage_toggled')
end
else
SetDrawColor(0.5, 0.5, 0.5)
SetDrawStyle('checkbox_checkimage')
end
DrawImage(self.checkImage.handle, x + 1, y + 1, size - 2, size - 2, self.checkImage[1])
else
if self.state then
if not enabled then
SetDrawColor(0.33, 0.33, 0.33)
SetDrawStyle('checkbox_checkmark_disabled')
elseif mOver then
SetDrawColor(1, 1, 1)
SetDrawStyle('checkbox_checkmark_hover')
else
SetDrawColor(0.75, 0.75, 0.75)
SetDrawStyle('checkbox_checkmark')
end
main:DrawCheckMark(x + size/2, y + size/2, size * 0.8)
end
end
-- Checkbox-Label-Text
if enabled then
SetDrawColor(1, 1, 1)
SetDrawStyle('text_label')
else
SetDrawColor(0.33, 0.33, 0.33)
SetDrawStyle('text_disabled')
end
local label = self:GetProperty("label")
if label then
DrawString(x - 5, y + 2, "RIGHT_X", size - 4, "VAR", label)
StyledDrawString(x - 5, y + 2, "RIGHT_X", size - 4, 'text_label', label)
end
if mOver and not noTooltip then
SetDrawLayer(nil, 100)
Expand Down
13 changes: 8 additions & 5 deletions src/Classes/ConfigTab.lua
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ local ConfigTabClass = newClass("ConfigTab", "UndoHandler", "ControlHost", "Cont
self.controls.setSelect.enabled = function()
return #self.configSetOrderList > 1
end
self.controls.setLabel = new("LabelControl", { "RIGHT", self.controls.setSelect, "LEFT" }, { -2, 0, 0, 16 }, "^7Config set:")
self.controls.setLabel = new("LabelControl", { "RIGHT", self.controls.setSelect, "LEFT" }, { -2, 0, 0, 16 }, "Config set:")
self.controls.setManage = new("ButtonControl", { "LEFT", self.controls.setSelect, "RIGHT" }, { 4, 0, 90, 20 }, "Manage...", function()
self:OpenConfigSetManagePopup()
end)
Expand Down Expand Up @@ -548,7 +548,7 @@ local ConfigTabClass = newClass("ConfigTab", "UndoHandler", "ControlHost", "Cont
end
local labelControl = control
if varData.label and varData.type ~= "check" then
labelControl = new("LabelControl", {"RIGHT",control,"LEFT"}, {-4, 0, 0, DrawStringWidth(14, "VAR", varData.label) > 228 and 12 or 14}, "^7"..varData.label)
labelControl = new("LabelControl", {"RIGHT",control,"LEFT"}, {-4, 0, 0, StyledDrawStringWidth(14, 'text_label', varData.label) > 228 and 12 or 14}, varData.label)
t_insert(self.controls, labelControl)
end
if varData.var then
Expand Down Expand Up @@ -582,11 +582,14 @@ local ConfigTabClass = newClass("ConfigTab", "UndoHandler", "ControlHost", "Cont
local def = self:GetDefaultState(varData.var, type(cur))
if cur ~= nil and cur ~= def then
if not shown then
return 0.753, 0.502, 0.502
-- highlight changed but empty?
return '_border_highlight_negative'
end
return 0.451, 0.576, 0.702
-- highlight changed
return '_border_highlight'
end
return 0.5, 0.5, 0.5
-- no highlight
return '_border'
end
end

Expand Down
Loading