layering

examples/ThemeSystemDemo.lua

@@ -30,7 +30,7 @@ function ThemeDemo.init()
     y = 50,
     width = 700,
     height = 550,
-    background = Color.new(0.15, 0.15, 0.2, 0.95),
+    backgroundColor = Color.new(0.15, 0.15, 0.2, 0.95),
     border = { top = true, bottom = true, left = true, right = true },
     borderColor = Color.new(0.8, 0.8, 0.8, 1),
     positioning = "flex",
@@ -47,7 +47,7 @@ function ThemeDemo.init()
     textSize = 20,
     textAlign = "center",
     textColor = Color.new(1, 1, 1, 1),
-    background = Color.new(0.2, 0.2, 0.3, 1),
+    backgroundColor = Color.new(0.2, 0.2, 0.3, 1),
   })
 
   -- Status message
@@ -59,7 +59,7 @@ function ThemeDemo.init()
     textSize = 14,
     textAlign = "center",
     textColor = themeLoaded and Color.new(0.3, 0.9, 0.3, 1) or Color.new(0.9, 0.7, 0.3, 1),
-    background = Color.new(0.1, 0.1, 0.15, 0.8),
+    backgroundColor = Color.new(0.1, 0.1, 0.15, 0.8),
     padding = { top = 10, right = 10, bottom = 10, left = 10 },
   })
 
@@ -70,7 +70,7 @@ function ThemeDemo.init()
     positioning = "flex",
     flexDirection = "vertical",
     gap = 15,
-    background = Color.new(0.1, 0.1, 0.15, 0.5),
+    backgroundColor = Color.new(0.1, 0.1, 0.15, 0.5),
     padding = { top = 15, right = 15, bottom = 15, left = 15 },
   })
 
@@ -81,7 +81,7 @@ function ThemeDemo.init()
     positioning = "flex",
     flexDirection = "vertical",
     gap = 10,
-    background = Color.new(0.12, 0.12, 0.17, 1),
+    backgroundColor = Color.new(0.12, 0.12, 0.17, 1),
     padding = { top = 10, right = 10, bottom = 10, left = 10 },
   })
 
@@ -91,7 +91,7 @@ function ThemeDemo.init()
     text = "Example 1: Basic Themed Button",
     textSize = 14,
     textColor = Color.new(0.8, 0.9, 1, 1),
-    background = Color.new(0, 0, 0, 0),
+    backgroundColor = Color.new(0, 0, 0, 0),
   })
 
   -- This button would use theme if loaded
@@ -102,7 +102,7 @@ function ThemeDemo.init()
     text = "Themed Button",
     textAlign = "center",
     textColor = Color.new(1, 1, 1, 1),
-    background = Color.new(0.2, 0.6, 0.9, 0.8),
+    backgroundColor = Color.new(0.2, 0.6, 0.9, 0.8),
     -- theme = "button", -- Uncomment when theme atlas exists
     callback = function(element, event)
       if event.type == "click" then
@@ -118,7 +118,7 @@ function ThemeDemo.init()
     positioning = "flex",
     flexDirection = "vertical",
     gap = 10,
-    background = Color.new(0.12, 0.12, 0.17, 1),
+    backgroundColor = Color.new(0.12, 0.12, 0.17, 1),
     padding = { top = 10, right = 10, bottom = 10, left = 10 },
   })
 
@@ -128,7 +128,7 @@ function ThemeDemo.init()
     text = "Example 2: Button with Hover/Pressed States",
     textSize = 14,
     textColor = Color.new(0.8, 0.9, 1, 1),
-    background = Color.new(0, 0, 0, 0),
+    backgroundColor = Color.new(0, 0, 0, 0),
   })
 
   Gui.new({
@@ -137,7 +137,7 @@ function ThemeDemo.init()
     text = "Hover over or click the button to see state changes (when theme is loaded)",
     textSize = 11,
     textColor = Color.new(0.6, 0.7, 0.8, 1),
-    background = Color.new(0, 0, 0, 0),
+    backgroundColor = Color.new(0, 0, 0, 0),
   })
 
   local stateButton = Gui.new({
@@ -147,7 +147,7 @@ function ThemeDemo.init()
     text = "Interactive Button",
     textAlign = "center",
     textColor = Color.new(1, 1, 1, 1),
-    background = Color.new(0.3, 0.7, 0.4, 0.8),
+    backgroundColor = Color.new(0.3, 0.7, 0.4, 0.8),
     -- theme = "button", -- Will automatically handle hover/pressed states
     callback = function(element, event)
       if event.type == "click" then
@@ -163,7 +163,7 @@ function ThemeDemo.init()
     positioning = "flex",
     flexDirection = "vertical",
     gap = 10,
-    background = Color.new(0.12, 0.12, 0.17, 1),
+    backgroundColor = Color.new(0.12, 0.12, 0.17, 1),
     padding = { top = 10, right = 10, bottom = 10, left = 10 },
   })
 
@@ -173,14 +173,14 @@ function ThemeDemo.init()
     text = "Example 3: Themed Panel/Container",
     textSize = 14,
     textColor = Color.new(0.8, 0.9, 1, 1),
-    background = Color.new(0, 0, 0, 0),
+    backgroundColor = Color.new(0, 0, 0, 0),
   })
 
   local themedPanel = Gui.new({
     parent = example3,
     width = 300,
     height = 80,
-    background = Color.new(0.25, 0.25, 0.35, 0.9),
+    backgroundColor = Color.new(0.25, 0.25, 0.35, 0.9),
     -- theme = "panel", -- Would use panel theme component
     padding = { top = 10, right = 10, bottom = 10, left = 10 },
   })
@@ -191,14 +191,14 @@ function ThemeDemo.init()
     textSize = 12,
     textColor = Color.new(0.9, 0.9, 1, 1),
     textAlign = "center",
-    background = Color.new(0, 0, 0, 0),
+    backgroundColor = Color.new(0, 0, 0, 0),
   })
 
   -- Code example section
   local codeSection = Gui.new({
     parent = self.window,
     height = 40,
-    background = Color.new(0.08, 0.08, 0.12, 1),
+    backgroundColor = Color.new(0.08, 0.08, 0.12, 1),
     padding = { top = 10, right = 10, bottom = 10, left = 10 },
   })
 
@@ -207,7 +207,7 @@ function ThemeDemo.init()
     text = 'Usage: element = Gui.new({ theme = "button", ... })',
     textSize = 12,
     textColor = Color.new(0.5, 0.9, 0.5, 1),
-    background = Color.new(0, 0, 0, 0),
+    backgroundColor = Color.new(0, 0, 0, 0),
   })
 
   return self