add theme to init
This commit is contained in:
Michael Freno
167
themes/space.lua
167
themes/space.lua
@@ -1,45 +1,176 @@
|
||||
-- Space Theme
|
||||
-- All images are 256x256 with perfectly centered 9-slice regions
|
||||
|
||||
local Color = require("FlexLove").Color
|
||||
|
||||
return {
|
||||
name = "Space Theme",
|
||||
|
||||
components = {
|
||||
-- Panel component
|
||||
panel = {
|
||||
atlas = "themes/space/panel-compressed.png",
|
||||
regions = {},
|
||||
regions = {
|
||||
-- Equal-sized regions for 256x256 image (85-86-85 split)
|
||||
-- Top row
|
||||
topLeft = { x = 0, y = 0, w = 85, h = 85 },
|
||||
topCenter = { x = 85, y = 0, w = 86, h = 85 },
|
||||
topRight = { x = 171, y = 0, w = 85, h = 85 },
|
||||
-- Middle row (stretchable)
|
||||
middleLeft = { x = 0, y = 85, w = 85, h = 86 },
|
||||
middleCenter = { x = 85, y = 85, w = 86, h = 86 },
|
||||
middleRight = { x = 171, y = 85, w = 85, h = 86 },
|
||||
-- Bottom row
|
||||
bottomLeft = { x = 0, y = 171, w = 85, h = 85 },
|
||||
bottomCenter = { x = 85, y = 171, w = 86, h = 85 },
|
||||
bottomRight = { x = 171, y = 171, w = 85, h = 85 },
|
||||
},
|
||||
stretch = {
|
||||
horizontal = { "topCenter", "middleCenter", "bottomCenter" },
|
||||
vertical = { "middleLeft", "middleCenter", "middleRight" },
|
||||
},
|
||||
},
|
||||
|
||||
-- Button component with states
|
||||
button = {
|
||||
atlas = "themes/space/interactive-compressed.png",
|
||||
regions = {},
|
||||
regions = {
|
||||
topLeft = { x = 0, y = 0, w = 85, h = 85 },
|
||||
topCenter = { x = 85, y = 0, w = 86, h = 85 },
|
||||
topRight = { x = 171, y = 0, w = 85, h = 85 },
|
||||
middleLeft = { x = 0, y = 85, w = 85, h = 86 },
|
||||
middleCenter = { x = 85, y = 85, w = 86, h = 86 },
|
||||
middleRight = { x = 171, y = 85, w = 85, h = 86 },
|
||||
bottomLeft = { x = 0, y = 171, w = 85, h = 85 },
|
||||
bottomCenter = { x = 85, y = 171, w = 86, h = 85 },
|
||||
bottomRight = { x = 171, y = 171, w = 85, h = 85 },
|
||||
},
|
||||
stretch = {
|
||||
horizontal = { "topCenter", "middleCenter", "bottomCenter" },
|
||||
vertical = { "middleLeft", "middleCenter", "middleRight" },
|
||||
},
|
||||
states = {
|
||||
hover = {
|
||||
atlas = "themes/interactive_hover-compressed.png",
|
||||
regions = { ... },
|
||||
atlas = "themes/space/interactive-hovered-compressed.png",
|
||||
regions = {
|
||||
topLeft = { x = 0, y = 0, w = 85, h = 85 },
|
||||
topCenter = { x = 85, y = 0, w = 86, h = 85 },
|
||||
topRight = { x = 171, y = 0, w = 85, h = 85 },
|
||||
middleLeft = { x = 0, y = 85, w = 85, h = 86 },
|
||||
middleCenter = { x = 85, y = 85, w = 86, h = 86 },
|
||||
middleRight = { x = 171, y = 85, w = 85, h = 86 },
|
||||
bottomLeft = { x = 0, y = 171, w = 85, h = 85 },
|
||||
bottomCenter = { x = 85, y = 171, w = 86, h = 85 },
|
||||
bottomRight = { x = 171, y = 171, w = 85, h = 85 },
|
||||
},
|
||||
stretch = {
|
||||
horizontal = { "topCenter", "middleCenter", "bottomCenter" },
|
||||
vertical = { "middleLeft", "middleCenter", "middleRight" },
|
||||
},
|
||||
},
|
||||
pressed = {
|
||||
atlas = "themes/interactive_pressed-compressed.png",
|
||||
regions = { ... },
|
||||
atlas = "themes/space/interactive-pressed-compressed.png",
|
||||
regions = {
|
||||
topLeft = { x = 0, y = 0, w = 85, h = 85 },
|
||||
topCenter = { x = 85, y = 0, w = 86, h = 85 },
|
||||
topRight = { x = 171, y = 0, w = 85, h = 85 },
|
||||
middleLeft = { x = 0, y = 85, w = 85, h = 86 },
|
||||
middleCenter = { x = 85, y = 85, w = 86, h = 86 },
|
||||
middleRight = { x = 171, y = 85, w = 85, h = 86 },
|
||||
bottomLeft = { x = 0, y = 171, w = 85, h = 85 },
|
||||
bottomCenter = { x = 85, y = 171, w = 86, h = 85 },
|
||||
bottomRight = { x = 171, y = 171, w = 85, h = 85 },
|
||||
},
|
||||
stretch = {
|
||||
horizontal = { "topCenter", "middleCenter", "bottomCenter" },
|
||||
vertical = { "middleLeft", "middleCenter", "middleRight" },
|
||||
},
|
||||
},
|
||||
disabled = {
|
||||
atlas = "themes/interactive_disabled-compressed.png",
|
||||
regions = { ... },
|
||||
atlas = "themes/space/interactive-disabled-compressed.png",
|
||||
regions = {
|
||||
topLeft = { x = 0, y = 0, w = 85, h = 85 },
|
||||
topCenter = { x = 85, y = 0, w = 86, h = 85 },
|
||||
topRight = { x = 171, y = 0, w = 85, h = 85 },
|
||||
middleLeft = { x = 0, y = 85, w = 85, h = 86 },
|
||||
middleCenter = { x = 85, y = 85, w = 86, h = 86 },
|
||||
middleRight = { x = 171, y = 85, w = 85, h = 86 },
|
||||
bottomLeft = { x = 0, y = 171, w = 85, h = 85 },
|
||||
bottomCenter = { x = 85, y = 171, w = 86, h = 85 },
|
||||
bottomRight = { x = 171, y = 171, w = 85, h = 85 },
|
||||
},
|
||||
stretch = {
|
||||
horizontal = { "topCenter", "middleCenter", "bottomCenter" },
|
||||
vertical = { "middleLeft", "middleCenter", "middleRight" },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
-- Input component with active and disabled states
|
||||
input = {
|
||||
atlas = "themes/space/interactive-compressed.png",
|
||||
regions = {},
|
||||
regions = {
|
||||
topLeft = { x = 0, y = 0, w = 85, h = 85 },
|
||||
topCenter = { x = 85, y = 0, w = 86, h = 85 },
|
||||
topRight = { x = 171, y = 0, w = 85, h = 85 },
|
||||
middleLeft = { x = 0, y = 85, w = 85, h = 86 },
|
||||
middleCenter = { x = 85, y = 85, w = 86, h = 86 },
|
||||
middleRight = { x = 171, y = 85, w = 85, h = 86 },
|
||||
bottomLeft = { x = 0, y = 171, w = 85, h = 85 },
|
||||
bottomCenter = { x = 85, y = 171, w = 86, h = 85 },
|
||||
bottomRight = { x = 171, y = 171, w = 85, h = 85 },
|
||||
},
|
||||
stretch = {
|
||||
horizontal = { "topCenter", "middleCenter", "bottomCenter" },
|
||||
vertical = { "middleLeft", "middleCenter", "middleRight" },
|
||||
},
|
||||
states = {
|
||||
hover = {
|
||||
atlas = "themes/interactive_hover-compressed.png",
|
||||
regions = { ... },
|
||||
},
|
||||
pressed = {
|
||||
atlas = "themes/interactive_pressed-compressed.png",
|
||||
regions = { ... },
|
||||
active = {
|
||||
atlas = "themes/space/interactive-hovered-compressed.png",
|
||||
regions = {
|
||||
topLeft = { x = 0, y = 0, w = 85, h = 85 },
|
||||
topCenter = { x = 85, y = 0, w = 86, h = 85 },
|
||||
topRight = { x = 171, y = 0, w = 85, h = 85 },
|
||||
middleLeft = { x = 0, y = 85, w = 85, h = 86 },
|
||||
middleCenter = { x = 85, y = 85, w = 86, h = 86 },
|
||||
middleRight = { x = 171, y = 85, w = 85, h = 86 },
|
||||
bottomLeft = { x = 0, y = 171, w = 85, h = 85 },
|
||||
bottomCenter = { x = 85, y = 171, w = 86, h = 85 },
|
||||
bottomRight = { x = 171, y = 171, w = 85, h = 85 },
|
||||
},
|
||||
stretch = {
|
||||
horizontal = { "topCenter", "middleCenter", "bottomCenter" },
|
||||
vertical = { "middleLeft", "middleCenter", "middleRight" },
|
||||
},
|
||||
},
|
||||
disabled = {
|
||||
atlas = "themes/interactive_disabled-compressed.png",
|
||||
regions = { ... },
|
||||
atlas = "themes/space/interactive-disabled-compressed.png",
|
||||
regions = {
|
||||
topLeft = { x = 0, y = 0, w = 85, h = 85 },
|
||||
topCenter = { x = 85, y = 0, w = 86, h = 85 },
|
||||
topRight = { x = 171, y = 0, w = 85, h = 85 },
|
||||
middleLeft = { x = 0, y = 85, w = 85, h = 86 },
|
||||
middleCenter = { x = 85, y = 85, w = 86, h = 86 },
|
||||
middleRight = { x = 171, y = 85, w = 85, h = 86 },
|
||||
bottomLeft = { x = 0, y = 171, w = 85, h = 85 },
|
||||
bottomCenter = { x = 85, y = 171, w = 86, h = 85 },
|
||||
bottomRight = { x = 171, y = 171, w = 85, h = 85 },
|
||||
},
|
||||
stretch = {
|
||||
horizontal = { "topCenter", "middleCenter", "bottomCenter" },
|
||||
vertical = { "middleLeft", "middleCenter", "middleRight" },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
-- Optional: Theme colors
|
||||
colors = {
|
||||
primary = Color.new(0.08, 0.75, 0.95), -- bright cyan-blue glow for accents and highlights
|
||||
secondary = Color.new(0.15, 0.20, 0.25), -- deep steel-gray background for panels
|
||||
text = Color.new(0.80, 0.90, 1.00), -- soft cool-white for general text
|
||||
textDark = Color.new(0.35, 0.40, 0.45), -- dimmed gray-blue for secondary text
|
||||
},
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user