...

18 files changed, 707 insertions, 0 deletions

diff --git a/src/ThemeBuilder/components/stylers/BorderStylerEditor.cpp b/src/ThemeBuilder/components/stylers/BorderStylerEditor.cpp
new file mode 100644
index 00000000..81eb66d3
--- /dev/null
+++ b/src/ThemeBuilder/components/stylers/BorderStylerEditor.cpp
@@ -0,0 +1,100 @@
+#include "BorderStylerEditor.h"
+#include "cru/common/ClonablePtr.h"
+#include "cru/platform/graphics/Brush.h"
+#include "cru/platform/graphics/Factory.h"
+#include "cru/platform/gui/UiApplication.h"
+#include "cru/ui/style/ApplyBorderStyleInfo.h"
+#include "cru/ui/style/Styler.h"
+
+namespace cru::theme_builder::components::stylers {
+BorderStylerEditor::BorderStylerEditor() {
+  SetLabel(u"Border Styler");
+  GetContainer()->AddChild(corner_radius_editor_.GetRootControl());
+  GetContainer()->AddChild(thickness_editor_.GetRootControl());
+  GetContainer()->AddChild(brush_editor_.GetRootControl());
+  GetContainer()->AddChild(foreground_brush_editor_.GetRootControl());
+  GetContainer()->AddChild(background_brush_editor_.GetRootControl());
+
+  thickness_editor_.GetEditor()->SetLabel(u"Thickness");
+  brush_editor_.GetEditor()->SetLabel(u"Border");
+  foreground_brush_editor_.GetEditor()->SetLabel(u"Foreground");
+  background_brush_editor_.GetEditor()->SetLabel(u"Background");
+
+  ConnectChangeEvent(corner_radius_editor_);
+  ConnectChangeEvent(thickness_editor_);
+  ConnectChangeEvent(brush_editor_);
+  ConnectChangeEvent(foreground_brush_editor_);
+  ConnectChangeEvent(background_brush_editor_);
+}
+
+BorderStylerEditor::~BorderStylerEditor() {}
+
+ClonablePtr<ui::style::BorderStyler> BorderStylerEditor::GetValue() {
+  auto graphics_factory =
+      platform::gui::IUiApplication::GetInstance()->GetGraphicsFactory();
+
+  ui::style::ApplyBorderStyleInfo border_style;
+  border_style.border_radius = corner_radius_editor_.GetValue();
+  border_style.border_thickness = thickness_editor_.GetValue();
+
+  if (brush_editor_.IsEnabled()) {
+    border_style.border_brush = graphics_factory->CreateSolidColorBrush(
+        brush_editor_.GetEditor()->GetValue());
+  }
+
+  if (foreground_brush_editor_.IsEnabled()) {
+    border_style.foreground_brush = graphics_factory->CreateSolidColorBrush(
+        foreground_brush_editor_.GetEditor()->GetValue());
+  }
+
+  if (background_brush_editor_.IsEnabled()) {
+    border_style.background_brush = graphics_factory->CreateSolidColorBrush(
+        background_brush_editor_.GetEditor()->GetValue());
+  }
+
+  return ui::style::BorderStyler::Create(border_style);
+}
+
+void BorderStylerEditor::SetValue(ui::style::BorderStyler* styler,
+                                  bool trigger_change) {
+  Expects(styler);
+
+  auto border_style = styler->GetBorderStyle();
+  corner_radius_editor_.SetValue(border_style.border_radius, false);
+  thickness_editor_.SetValue(border_style.border_thickness, false);
+
+  brush_editor_.SetEnabled(border_style.border_brush.has_value(), false);
+  if (border_style.border_brush.has_value()) {
+    brush_editor_.GetEditor()->SetValue(
+        std::dynamic_pointer_cast<platform::graphics::ISolidColorBrush>(
+            border_style.border_brush.value())
+            ->GetColor(),
+        false);
+  }
+
+  foreground_brush_editor_.SetEnabled(border_style.foreground_brush.has_value(),
+                                      false);
+  if (border_style.foreground_brush.has_value()) {
+    foreground_brush_editor_.GetEditor()->SetValue(
+        std::dynamic_pointer_cast<platform::graphics::ISolidColorBrush>(
+            border_style.foreground_brush.value())
+            ->GetColor(),
+        false);
+  }
+
+  background_brush_editor_.SetEnabled(border_style.background_brush.has_value(),
+                                      false);
+  if (border_style.background_brush.has_value()) {
+    background_brush_editor_.GetEditor()->SetValue(
+        std::dynamic_pointer_cast<platform::graphics::ISolidColorBrush>(
+            border_style.background_brush.value())
+            ->GetColor(),
+        false);
+  }
+
+  if (trigger_change) {
+    RaiseChangeEvent();
+  }
+}
+
+}  // namespace cru::theme_builder::components::stylers
diff --git a/src/ThemeBuilder/components/stylers/BorderStylerEditor.h b/src/ThemeBuilder/components/stylers/BorderStylerEditor.h
new file mode 100644
index 00000000..539262d6
--- /dev/null
+++ b/src/ThemeBuilder/components/stylers/BorderStylerEditor.h
@@ -0,0 +1,36 @@
+#pragma once
+#include "../properties/ColorPropertyEditor.h"
+#include "../properties/CornerRadiusPropertyEditor.h"
+#include "../properties/OptionalPropertyEditor.h"
+#include "../properties/ThicknessPropertyEditor.h"
+#include "StylerEditor.h"
+#include "cru/common/ClonablePtr.h"
+
+namespace cru::theme_builder::components::stylers {
+class BorderStylerEditor : public StylerEditor {
+ public:
+  BorderStylerEditor();
+  ~BorderStylerEditor() override;
+
+  ClonablePtr<ui::style::BorderStyler> GetValue();
+  void SetValue(ui::style::BorderStyler* styler, bool trigger_change = true);
+  void SetValue(const ClonablePtr<ui::style::BorderStyler>& styler,
+                bool trigger_change = true) {
+    SetValue(styler.get(), trigger_change);
+  }
+
+  ClonablePtr<ui::style::Styler> GetStyler() override { return GetValue(); }
+
+ private:
+  properties::OptionalPropertyEditor<properties::CornerRadiusPropertyEditor>
+      corner_radius_editor_;
+  properties::OptionalPropertyEditor<properties::ThicknessPropertyEditor>
+      thickness_editor_;
+  properties::OptionalPropertyEditor<properties::ColorPropertyEditor>
+      brush_editor_;
+  properties::OptionalPropertyEditor<properties::ColorPropertyEditor>
+      foreground_brush_editor_;
+  properties::OptionalPropertyEditor<properties::ColorPropertyEditor>
+      background_brush_editor_;
+};
+}  // namespace cru::theme_builder::components::stylers
diff --git a/src/ThemeBuilder/components/stylers/CompoundStylerEditor.cpp b/src/ThemeBuilder/components/stylers/CompoundStylerEditor.cpp
new file mode 100644
index 00000000..6b8a5033
--- /dev/null
+++ b/src/ThemeBuilder/components/stylers/CompoundStylerEditor.cpp
@@ -0,0 +1,105 @@
+#include "CompoundStylerEditor.h"
+#include "BorderStylerEditor.h"
+#include "ContentBrushStylerEditor.h"
+#include "CursorStylerEditor.h"
+#include "FontStylerEditor.h"
+#include "MarginStylerEditor.h"
+#include "PaddingStylerEditor.h"
+#include "PreferredSizeStylerEditor.h"
+#include "cru/common/ClonablePtr.h"
+#include "cru/ui/ThemeManager.h"
+#include "cru/ui/style/Styler.h"
+
+namespace cru::theme_builder::components::stylers {
+CompoundStylerEditor::CompoundStylerEditor() {
+  SetLabel(u"Compound Styler");
+  GetContainer()->AddChild(&children_container_);
+  children_container_.SetFlexDirection(ui::controls::FlexDirection::Vertical);
+  children_container_.SetItemCrossAlign(
+      ui::controls::FlexCrossAlignment::Start);
+
+  GetHeadContainer()->AddChild(add_child_button_.GetRootControl());
+  add_child_button_.GetButton()->GetStyleRuleSet()->SetParent(
+      ui::ThemeManager::GetInstance()->GetResourceStyleRuleSet(
+          u"cru.theme_builder.icon-button.style"));
+  add_child_button_.GetButton()->SetIconWithSvgPathDataStringResourceKey(
+      u"icon.plus", {0, 0, 16, 16});
+  add_child_button_.GetButton()->SetPreferredSize({24, 24});
+  add_child_button_.GetButton()->SetPadding(ui::Thickness(2));
+  add_child_button_.GetButton()->SetIconFillColor(ui::colors::green);
+  add_child_button_.SetMenuItems({u"Compound Styler", u"Border Styler",
+                                  u"Cursor Styler", u"Content Brush Styler",
+                                  u"Font Styler", u"Margin Styler",
+                                  u"Padding Styler", u"Preferred Size Styler"});
+  add_child_button_.MenuItemSelectedEvent()->AddHandler([this](Index index) {
+    std::unique_ptr<StylerEditor> editor;
+    switch (index) {
+      case 0:
+        editor = std::make_unique<CompoundStylerEditor>();
+        break;
+      case 1:
+        editor = std::make_unique<BorderStylerEditor>();
+        break;
+      case 2:
+        editor = std::make_unique<CursorStylerEditor>();
+        break;
+      case 3:
+        editor = std::make_unique<ContentBrushStylerEditor>();
+        break;
+      case 4:
+        editor = std::make_unique<FontStylerEditor>();
+        break;
+      case 5:
+        editor = std::make_unique<MarginStylerEditor>();
+        break;
+      case 6:
+        editor = std::make_unique<PaddingStylerEditor>();
+        break;
+      case 7:
+        editor = std::make_unique<PreferredSizeStylerEditor>();
+        break;
+      default:
+        break;
+    }
+    if (editor) {
+      ConnectChangeEvent(editor.get());
+      editor->RemoveEvent()->AddSpyOnlyHandler([this, c = editor.get()] {
+        auto index = this->children_container_.IndexOf(c->GetRootControl());
+        this->children_.erase(this->children_.begin() + index);
+        this->children_container_.RemoveChildAt(index);
+        RaiseChangeEvent();
+      });
+      children_.push_back(std::move(editor));
+      children_container_.AddChild(editor->GetRootControl());
+      RaiseChangeEvent();
+    }
+  });
+}
+
+CompoundStylerEditor::~CompoundStylerEditor() {}
+
+ClonablePtr<ui::style::CompoundStyler> CompoundStylerEditor::GetValue() {
+  std::vector<ClonablePtr<ui::style::Styler>> children_styler;
+  for (auto& child : children_) {
+    children_styler.push_back(child->GetStyler());
+  }
+  return ui::style::CompoundStyler::Create(std::move(children_styler));
+}
+
+void CompoundStylerEditor::SetValue(ui::style::CompoundStyler* value,
+                                    bool trigger_change) {
+  children_.clear();
+  for (const auto& styler : value->GetChildren()) {
+    auto editor = CreateStylerEditor(styler.get());
+    ConnectChangeEvent(editor.get());
+    editor->RemoveEvent()->AddSpyOnlyHandler([this, c = editor.get()] {
+      auto index = this->children_container_.IndexOf(c->GetRootControl());
+      this->children_.erase(this->children_.begin() + index);
+      this->children_container_.RemoveChildAt(index);
+      RaiseChangeEvent();
+    });
+    children_.push_back(std::move(editor));
+    children_container_.AddChild(children_.back()->GetRootControl());
+  }
+}
+}  // namespace cru::theme_builder::components::stylers
diff --git a/src/ThemeBuilder/components/stylers/CompoundStylerEditor.h b/src/ThemeBuilder/components/stylers/CompoundStylerEditor.h
new file mode 100644
index 00000000..57150e83
--- /dev/null
+++ b/src/ThemeBuilder/components/stylers/CompoundStylerEditor.h
@@ -0,0 +1,30 @@
+#pragma once
+#include "StylerEditor.h"
+#include "cru/common/ClonablePtr.h"
+#include "cru/ui/DeleteLater.h"
+#include "cru/ui/components/PopupButton.h"
+#include "cru/ui/controls/FlexLayout.h"
+#include "cru/ui/style/Styler.h"
+
+namespace cru::theme_builder::components::stylers {
+class CompoundStylerEditor : public StylerEditor {
+ public:
+  CompoundStylerEditor();
+  ~CompoundStylerEditor() override;
+
+ public:
+  ClonablePtr<ui::style::CompoundStyler> GetValue();
+  void SetValue(ui::style::CompoundStyler* styler, bool trigger_change = true);
+  void SetValue(const ClonablePtr<ui::style::CompoundStyler>& styler,
+                bool trigger_change = true) {
+    SetValue(styler.get(), trigger_change);
+  }
+
+  ClonablePtr<ui::style::Styler> GetStyler() override { return GetValue(); }
+
+ private:
+  ui::controls::FlexLayout children_container_;
+  std::vector<ui::DeleteLaterPtr<StylerEditor>> children_;
+  ui::components::PopupMenuIconButton add_child_button_;
+};
+}  // namespace cru::theme_builder::components::stylers
diff --git a/src/ThemeBuilder/components/stylers/ContentBrushStylerEditor.cpp b/src/ThemeBuilder/components/stylers/ContentBrushStylerEditor.cpp
new file mode 100644
index 00000000..bd649c67
--- /dev/null
+++ b/src/ThemeBuilder/components/stylers/ContentBrushStylerEditor.cpp
@@ -0,0 +1,31 @@
+#include "ContentBrushStylerEditor.h"
+#include "cru/platform/graphics/Factory.h"
+#include "cru/platform/gui/UiApplication.h"
+#include "cru/ui/style/Styler.h"
+
+namespace cru::theme_builder::components::stylers {
+ContentBrushStylerEditor::ContentBrushStylerEditor() {
+  GetContainer()->AddChild(color_editor_.GetRootControl());
+
+  ConnectChangeEvent(color_editor_);
+}
+
+ContentBrushStylerEditor::~ContentBrushStylerEditor() {}
+
+ClonablePtr<ui::style::ContentBrushStyler> ContentBrushStylerEditor::GetValue()
+    const {
+  return ui::style::ContentBrushStyler::Create(
+      platform::gui::IUiApplication::GetInstance()
+          ->GetGraphicsFactory()
+          ->CreateSolidColorBrush(color_editor_.GetValue()));
+}
+
+void ContentBrushStylerEditor::SetValue(ui::style::ContentBrushStyler* value,
+                                        bool trigger_change) {
+  color_editor_.SetValue(
+      std::dynamic_pointer_cast<platform::graphics::ISolidColorBrush>(
+          value->GetBrush())
+          ->GetColor(),
+      trigger_change);
+}
+}  // namespace cru::theme_builder::components::stylers
diff --git a/src/ThemeBuilder/components/stylers/ContentBrushStylerEditor.h b/src/ThemeBuilder/components/stylers/ContentBrushStylerEditor.h
new file mode 100644
index 00000000..8385b7c3
--- /dev/null
+++ b/src/ThemeBuilder/components/stylers/ContentBrushStylerEditor.h
@@ -0,0 +1,24 @@
+#pragma once
+#include "../Editor.h"
+#include "../properties/ColorPropertyEditor.h"
+#include "StylerEditor.h"
+#include "cru/common/ClonablePtr.h"
+#include "cru/ui/style/Styler.h"
+
+namespace cru::theme_builder::components::stylers {
+class ContentBrushStylerEditor : public StylerEditor {
+ public:
+  ContentBrushStylerEditor();
+  ~ContentBrushStylerEditor();
+
+ public:
+  ClonablePtr<ui::style::ContentBrushStyler> GetValue() const;
+  void SetValue(ui::style::ContentBrushStyler* value,
+                bool trigger_change = true);
+
+  ClonablePtr<ui::style::Styler> GetStyler() override { return GetValue(); }
+
+ private:
+  properties::ColorPropertyEditor color_editor_;
+};
+}  // namespace cru::theme_builder::components::stylers
diff --git a/src/ThemeBuilder/components/stylers/CursorStylerEditor.cpp b/src/ThemeBuilder/components/stylers/CursorStylerEditor.cpp
new file mode 100644
index 00000000..9984d81a
--- /dev/null
+++ b/src/ThemeBuilder/components/stylers/CursorStylerEditor.cpp
@@ -0,0 +1,65 @@
+#include "CursorStylerEditor.h"
+#include "cru/platform/gui/Cursor.h"
+#include "cru/platform/gui/UiApplication.h"
+
+namespace cru::theme_builder::components::stylers {
+CursorStylerEditor::CursorStylerEditor() {
+  SetLabel(u"Cursor Styler");
+  GetContainer()->AddChild(cursor_select_.GetRootControl());
+
+  cursor_select_.SetLabel(u"Cursor");
+  cursor_select_.SetItems({u"arrow", u"hand", u"ibeam"});
+  cursor_select_.SetSelectedIndex(0);
+
+  ConnectChangeEvent(cursor_select_);
+}
+
+CursorStylerEditor::~CursorStylerEditor() {}
+
+ClonablePtr<ui::style::CursorStyler> CursorStylerEditor::GetValue() {
+  auto cursor_manager =
+      platform::gui::IUiApplication::GetInstance()->GetCursorManager();
+
+  std::shared_ptr<platform::gui::ICursor> cursor;
+
+  switch (cursor_select_.GetSelectedIndex()) {
+    case 0:
+      cursor = cursor_manager->GetSystemCursor(
+          platform::gui::SystemCursorType::Arrow);
+      break;
+    case 1:
+      cursor = cursor_manager->GetSystemCursor(
+          platform::gui::SystemCursorType::Hand);
+      break;
+    case 2:
+      cursor = cursor_manager->GetSystemCursor(
+          platform::gui::SystemCursorType::IBeam);
+      break;
+  }
+
+  return ui::style::CursorStyler::Create(cursor);
+}
+
+void CursorStylerEditor::SetValue(ui::style::CursorStyler* styler,
+                                  bool trigger_change) {
+  auto cursor_manager =
+      platform::gui::IUiApplication::GetInstance()->GetCursorManager();
+
+  auto cursor = styler->GetCursor();
+
+  if (cursor ==
+      cursor_manager->GetSystemCursor(platform::gui::SystemCursorType::Arrow)) {
+    cursor_select_.SetSelectedIndex(0);
+  } else if (cursor == cursor_manager->GetSystemCursor(
+                           platform::gui::SystemCursorType::Hand)) {
+    cursor_select_.SetSelectedIndex(1);
+  } else if (cursor == cursor_manager->GetSystemCursor(
+                           platform::gui::SystemCursorType::IBeam)) {
+    cursor_select_.SetSelectedIndex(2);
+  }
+
+  if (trigger_change) {
+    RaiseChangeEvent();
+  }
+}
+}  // namespace cru::theme_builder::components::stylers
diff --git a/src/ThemeBuilder/components/stylers/CursorStylerEditor.h b/src/ThemeBuilder/components/stylers/CursorStylerEditor.h
new file mode 100644
index 00000000..552619a0
--- /dev/null
+++ b/src/ThemeBuilder/components/stylers/CursorStylerEditor.h
@@ -0,0 +1,24 @@
+#pragma once
+#include "../properties/SelectPropertyEditor.h"
+#include "StylerEditor.h"
+
+namespace cru::theme_builder::components::stylers {
+class CursorStylerEditor : public StylerEditor {
+ public:
+  CursorStylerEditor();
+  ~CursorStylerEditor() override;
+
+ public:
+  ClonablePtr<ui::style::CursorStyler> GetValue();
+  void SetValue(ui::style::CursorStyler* styler, bool trigger_change = true);
+  void SetValue(const ClonablePtr<ui::style::CursorStyler>& styler,
+                bool trigger_change = true) {
+    SetValue(styler.get(), trigger_change);
+  }
+
+  ClonablePtr<ui::style::Styler> GetStyler() override { return GetValue(); }
+
+ private:
+  properties::SelectPropertyEditor cursor_select_;
+};
+}  // namespace cru::theme_builder::components::stylers
diff --git a/src/ThemeBuilder/components/stylers/FontStylerEditor.cpp b/src/ThemeBuilder/components/stylers/FontStylerEditor.cpp
new file mode 100644
index 00000000..9787a4fd
--- /dev/null
+++ b/src/ThemeBuilder/components/stylers/FontStylerEditor.cpp
@@ -0,0 +1,23 @@
+#include "FontStylerEditor.h"
+#include "cru/platform/graphics/Factory.h"
+#include "cru/platform/gui/UiApplication.h"
+#include "cru/ui/style/Styler.h"
+
+namespace cru::theme_builder::components::stylers {
+FontStylerEditor::FontStylerEditor() {
+  GetContainer()->AddChild(font_editor_.GetRootControl());
+
+  ConnectChangeEvent(font_editor_);
+}
+
+FontStylerEditor::~FontStylerEditor() {}
+
+ClonablePtr<ui::style::FontStyler> FontStylerEditor::GetValue() const {
+  return ui::style::FontStyler::Create(font_editor_.GetValue());
+}
+
+void FontStylerEditor::SetValue(ui::style::FontStyler* value,
+                                bool trigger_change) {
+  font_editor_.SetValue(value->GetFont(), trigger_change);
+}
+}  // namespace cru::theme_builder::components::stylers
diff --git a/src/ThemeBuilder/components/stylers/FontStylerEditor.h b/src/ThemeBuilder/components/stylers/FontStylerEditor.h
new file mode 100644
index 00000000..ccd12113
--- /dev/null
+++ b/src/ThemeBuilder/components/stylers/FontStylerEditor.h
@@ -0,0 +1,23 @@
+#pragma once
+#include "../Editor.h"
+#include "../properties/FontPropertyEditor.h"
+#include "StylerEditor.h"
+#include "cru/common/ClonablePtr.h"
+#include "cru/ui/style/Styler.h"
+
+namespace cru::theme_builder::components::stylers {
+class FontStylerEditor : public StylerEditor {
+ public:
+  FontStylerEditor();
+  ~FontStylerEditor();
+
+ public:
+  ClonablePtr<ui::style::FontStyler> GetValue() const;
+  void SetValue(ui::style::FontStyler* value, bool trigger_change = true);
+
+  ClonablePtr<ui::style::Styler> GetStyler() override { return GetValue(); }
+
+ private:
+  properties::FontPropertyEditor font_editor_;
+};
+}  // namespace cru::theme_builder::components::stylers
diff --git a/src/ThemeBuilder/components/stylers/MarginStylerEditor.cpp b/src/ThemeBuilder/components/stylers/MarginStylerEditor.cpp
new file mode 100644
index 00000000..d7d89acb
--- /dev/null
+++ b/src/ThemeBuilder/components/stylers/MarginStylerEditor.cpp
@@ -0,0 +1,28 @@
+#include "MarginStylerEditor.h"
+#include "cru/ui/style/Styler.h"
+
+namespace cru::theme_builder::components::stylers {
+MarginStylerEditor::MarginStylerEditor() {
+  SetLabel(u"Margin Styler");
+  GetContainer()->AddChild(thickness_editor_.GetRootControl());
+
+  thickness_editor_.SetLabel(u"Thickness");
+
+  ConnectChangeEvent(thickness_editor_);
+}
+
+MarginStylerEditor::~MarginStylerEditor() {}
+
+ClonablePtr<ui::style::MarginStyler> MarginStylerEditor::GetValue() {
+  return ui::style::MarginStyler::Create(thickness_editor_.GetValue());
+}
+
+void MarginStylerEditor::SetValue(ui::style::MarginStyler* styler,
+                                  bool trigger_change) {
+  thickness_editor_.SetValue(styler->GetMargin(), false);
+
+  if (trigger_change) {
+    RaiseChangeEvent();
+  }
+}
+}  // namespace cru::theme_builder::components::stylers
diff --git a/src/ThemeBuilder/components/stylers/MarginStylerEditor.h b/src/ThemeBuilder/components/stylers/MarginStylerEditor.h
new file mode 100644
index 00000000..9de6f1a2
--- /dev/null
+++ b/src/ThemeBuilder/components/stylers/MarginStylerEditor.h
@@ -0,0 +1,25 @@
+#pragma once
+#include "../properties/ThicknessPropertyEditor.h"
+#include "StylerEditor.h"
+#include "cru/common/ClonablePtr.h"
+#include "cru/ui/style/Styler.h"
+
+namespace cru::theme_builder::components::stylers {
+class MarginStylerEditor : public StylerEditor {
+ public:
+  MarginStylerEditor();
+  ~MarginStylerEditor() override;
+
+  ClonablePtr<ui::style::MarginStyler> GetValue();
+  void SetValue(ui::style::MarginStyler* styler, bool trigger_change = true);
+  void SetValue(const ClonablePtr<ui::style::MarginStyler>& styler,
+                bool trigger_change = true) {
+    SetValue(styler.get(), trigger_change);
+  }
+
+  ClonablePtr<ui::style::Styler> GetStyler() override { return GetValue(); }
+
+ private:
+  properties::ThicknessPropertyEditor thickness_editor_;
+};
+}  // namespace cru::theme_builder::components::stylers
diff --git a/src/ThemeBuilder/components/stylers/PaddingStylerEditor.cpp b/src/ThemeBuilder/components/stylers/PaddingStylerEditor.cpp
new file mode 100644
index 00000000..476d21f1
--- /dev/null
+++ b/src/ThemeBuilder/components/stylers/PaddingStylerEditor.cpp
@@ -0,0 +1,28 @@
+#include "PaddingStylerEditor.h"
+#include "cru/ui/style/Styler.h"
+
+namespace cru::theme_builder::components::stylers {
+PaddingStylerEditor::PaddingStylerEditor() {
+  SetLabel(u"Padding Styler");
+  GetContainer()->AddChild(thickness_editor_.GetRootControl());
+
+  thickness_editor_.SetLabel(u"Thickness");
+
+  ConnectChangeEvent(thickness_editor_);
+}
+
+PaddingStylerEditor::~PaddingStylerEditor() {}
+
+ClonablePtr<ui::style::PaddingStyler> PaddingStylerEditor::GetValue() {
+  return ui::style::PaddingStyler::Create(thickness_editor_.GetValue());
+}
+
+void PaddingStylerEditor::SetValue(ui::style::PaddingStyler* styler,
+                                   bool trigger_change) {
+  thickness_editor_.SetValue(styler->GetPadding(), false);
+
+  if (trigger_change) {
+    RaiseChangeEvent();
+  }
+}
+}  // namespace cru::theme_builder::components::stylers
diff --git a/src/ThemeBuilder/components/stylers/PaddingStylerEditor.h b/src/ThemeBuilder/components/stylers/PaddingStylerEditor.h
new file mode 100644
index 00000000..b78d310b
--- /dev/null
+++ b/src/ThemeBuilder/components/stylers/PaddingStylerEditor.h
@@ -0,0 +1,25 @@
+#pragma once
+#include "../properties/ThicknessPropertyEditor.h"
+#include "StylerEditor.h"
+#include "cru/common/ClonablePtr.h"
+#include "cru/ui/style/Styler.h"
+
+namespace cru::theme_builder::components::stylers {
+class PaddingStylerEditor : public StylerEditor {
+ public:
+  PaddingStylerEditor();
+  ~PaddingStylerEditor() override;
+
+  ClonablePtr<ui::style::PaddingStyler> GetValue();
+  void SetValue(ui::style::PaddingStyler* styler, bool trigger_change = true);
+  void SetValue(const ClonablePtr<ui::style::PaddingStyler>& styler,
+                bool trigger_change = true) {
+    SetValue(styler.get(), trigger_change);
+  }
+
+  ClonablePtr<ui::style::Styler> GetStyler() override { return GetValue(); }
+
+ private:
+  properties::ThicknessPropertyEditor thickness_editor_;
+};
+}  // namespace cru::theme_builder::components::stylers
diff --git a/src/ThemeBuilder/components/stylers/PreferredSizeStylerEditor.cpp b/src/ThemeBuilder/components/stylers/PreferredSizeStylerEditor.cpp
new file mode 100644
index 00000000..fb713c8c
--- /dev/null
+++ b/src/ThemeBuilder/components/stylers/PreferredSizeStylerEditor.cpp
@@ -0,0 +1,34 @@
+#include "PreferredSizeStylerEditor.h"
+#include "cru/ui/style/Styler.h"
+
+namespace cru::theme_builder::components::stylers {
+PreferredSizeStylerEditor::PreferredSizeStylerEditor() {
+  SetLabel(u"Preferred Size Styler");
+  GetContainer()->AddChild(width_editor_.GetRootControl());
+  GetContainer()->AddChild(height_editor_.GetRootControl());
+
+  width_editor_.SetLabel(u"Width");
+  height_editor_.SetLabel(u"Height");
+
+  ConnectChangeEvent(width_editor_);
+  ConnectChangeEvent(height_editor_);
+}
+
+PreferredSizeStylerEditor::~PreferredSizeStylerEditor() {}
+
+ClonablePtr<ui::style::PreferredSizeStyler>
+PreferredSizeStylerEditor::GetValue() {
+  return ui::style::PreferredSizeStyler::Create(ui::render::MeasureSize{
+      width_editor_.GetValue(), height_editor_.GetValue()});
+}
+
+void PreferredSizeStylerEditor::SetValue(ui::style::PreferredSizeStyler* styler,
+                                         bool trigger_change) {
+  width_editor_.SetValue(styler->GetPreferredSize().width, false);
+  height_editor_.SetValue(styler->GetPreferredSize().height, false);
+
+  if (trigger_change) {
+    RaiseChangeEvent();
+  }
+}
+}  // namespace cru::theme_builder::components::stylers
diff --git a/src/ThemeBuilder/components/stylers/PreferredSizeStylerEditor.h b/src/ThemeBuilder/components/stylers/PreferredSizeStylerEditor.h
new file mode 100644
index 00000000..4a64da10
--- /dev/null
+++ b/src/ThemeBuilder/components/stylers/PreferredSizeStylerEditor.h
@@ -0,0 +1,27 @@
+#pragma once
+#include "../properties/MeasureLengthPropertyEditor.h"
+#include "StylerEditor.h"
+#include "cru/common/ClonablePtr.h"
+#include "cru/ui/style/Styler.h"
+
+namespace cru::theme_builder::components::stylers {
+class PreferredSizeStylerEditor : public StylerEditor {
+ public:
+  PreferredSizeStylerEditor();
+  ~PreferredSizeStylerEditor() override;
+
+  ClonablePtr<ui::style::PreferredSizeStyler> GetValue();
+  void SetValue(ui::style::PreferredSizeStyler* styler,
+                bool trigger_change = true);
+  void SetValue(const ClonablePtr<ui::style::PreferredSizeStyler>& styler,
+                bool trigger_change = true) {
+    SetValue(styler.get(), trigger_change);
+  }
+
+  ClonablePtr<ui::style::Styler> GetStyler() override { return GetValue(); }
+
+ private:
+  properties::MeasureLengthPropertyEditor width_editor_;
+  properties::MeasureLengthPropertyEditor height_editor_;
+};
+}  // namespace cru::theme_builder::components::stylers
diff --git a/src/ThemeBuilder/components/stylers/StylerEditor.cpp b/src/ThemeBuilder/components/stylers/StylerEditor.cpp
new file mode 100644
index 00000000..0348adbd
--- /dev/null
+++ b/src/ThemeBuilder/components/stylers/StylerEditor.cpp
@@ -0,0 +1,63 @@
+#include "StylerEditor.h"
+#include "../Common.h"
+#include "BorderStylerEditor.h"
+#include "CompoundStylerEditor.h"
+#include "ContentBrushStylerEditor.h"
+#include "CursorStylerEditor.h"
+#include "FontStylerEditor.h"
+#include "MarginStylerEditor.h"
+#include "PaddingStylerEditor.h"
+#include "PreferredSizeStylerEditor.h"
+#include "cru/ui/controls/FlexLayout.h"
+#include "cru/ui/render/FlexLayoutRenderObject.h"
+#include "cru/ui/style/Styler.h"
+
+namespace cru::theme_builder::components::stylers {
+StylerEditor::StylerEditor() {}
+
+StylerEditor::~StylerEditor() {}
+
+std::unique_ptr<StylerEditor> CreateStylerEditor(ui::style::Styler* styler) {
+  if (auto compound_styler = dynamic_cast<ui::style::CompoundStyler*>(styler)) {
+    auto result = std::make_unique<CompoundStylerEditor>();
+    result->SetValue(compound_styler);
+    return result;
+  } else if (auto border_styler =
+                 dynamic_cast<ui::style::BorderStyler*>(styler)) {
+    auto editor = std::make_unique<BorderStylerEditor>();
+    editor->SetValue(border_styler);
+    return editor;
+  } else if (auto cursor_styler =
+                 dynamic_cast<ui::style::CursorStyler*>(styler)) {
+    auto editor = std::make_unique<CursorStylerEditor>();
+    editor->SetValue(cursor_styler);
+    return editor;
+  } else if (auto preferred_size_styler =
+                 dynamic_cast<ui::style::PreferredSizeStyler*>(styler)) {
+    auto editor = std::make_unique<PreferredSizeStylerEditor>();
+    editor->SetValue(preferred_size_styler);
+    return editor;
+  } else if (auto margin_styler =
+                 dynamic_cast<ui::style::MarginStyler*>(styler)) {
+    auto editor = std::make_unique<MarginStylerEditor>();
+    editor->SetValue(margin_styler);
+    return editor;
+  } else if (auto padding_styler =
+                 dynamic_cast<ui::style::PaddingStyler*>(styler)) {
+    auto editor = std::make_unique<PaddingStylerEditor>();
+    editor->SetValue(padding_styler);
+    return editor;
+  } else if (auto content_brush_styler =
+                 dynamic_cast<ui::style::ContentBrushStyler*>(styler)) {
+    auto editor = std::make_unique<ContentBrushStylerEditor>();
+    editor->SetValue(content_brush_styler);
+    return editor;
+  } else if (auto font_styler = dynamic_cast<ui::style::FontStyler*>(styler)) {
+    auto editor = std::make_unique<FontStylerEditor>();
+    editor->SetValue(font_styler);
+    return editor;
+  } else {
+    throw Exception(u"Unknown styler type");
+  }
+}
+}  // namespace cru::theme_builder::components::stylers
diff --git a/src/ThemeBuilder/components/stylers/StylerEditor.h b/src/ThemeBuilder/components/stylers/StylerEditor.h
new file mode 100644
index 00000000..8aa52bda
--- /dev/null
+++ b/src/ThemeBuilder/components/stylers/StylerEditor.h
@@ -0,0 +1,16 @@
+#pragma once
+#include "../HeadBodyEditor.h"
+#include "cru/ui/style/Styler.h"
+
+namespace cru::theme_builder::components::stylers {
+class StylerEditor : public HeadBodyEditor {
+ public:
+  StylerEditor();
+  ~StylerEditor() override;
+
+ public:
+  virtual ClonablePtr<ui::style::Styler> GetStyler() = 0;
+};
+
+std::unique_ptr<StylerEditor> CreateStylerEditor(ui::style::Styler* styler);
+}  // namespace cru::theme_builder::components::stylers