Add colors.

+ example.

ftxui/CMakeLists.txt

@@ -6,21 +6,23 @@ add_library(ftxui
   src/ftxui/component/component_direction.cpp
   src/ftxui/component/component_horizontal.cpp
   src/ftxui/component/component_vertical.cpp
-  src/ftxui/component/toggle.cpp
   src/ftxui/component/menu.cpp
+  src/ftxui/component/toggle.cpp
   src/ftxui/dom/bold.cpp
-  src/ftxui/dom/dim.cpp
-  src/ftxui/dom/underlined.cpp
-  src/ftxui/dom/inverted.cpp
+  src/ftxui/dom/color.cpp
   src/ftxui/dom/composite_decorator.cpp
+  src/ftxui/dom/dim.cpp
   src/ftxui/dom/flex.cpp
   src/ftxui/dom/frame.cpp
   src/ftxui/dom/frame.cpp
   src/ftxui/dom/gauge.cpp
   src/ftxui/dom/hbox.cpp
+  src/ftxui/dom/inverted.cpp
   src/ftxui/dom/node.cpp
+  src/ftxui/dom/node_decorator.cpp
   src/ftxui/dom/separator.cpp
   src/ftxui/dom/text.cpp
+  src/ftxui/dom/underlined.cpp
   src/ftxui/dom/vbox.cpp
   src/ftxui/screen.cpp
   src/ftxui/screen_interactive.cpp

ftxui/include/ftxui/color.hpp

@@ -0,0 +1,40 @@
+#ifndef FTXUI_COLOR_H_
+#define FTXUI_COLOR_H_
+
+#include <cstdint>
+
+namespace ftxui {
+
+enum class Color : uint8_t {
+  // --- Transparent -----
+  Default = 39,
+
+  // --- Grayscale -----
+  Black = 30,
+  GrayDark = 90,
+  GrayLight = 37,
+  White = 97,
+
+  // --- Hue -----
+  Blue = 34,
+  BlueLight = 94,
+
+  Cyan = 36,
+  CyanLight = 96,
+
+  Green = 32,
+  GreenLight = 92,
+
+  Magenta = 35,
+  MagentaLight = 95,
+
+  Red = 31,
+  RedLight = 91,
+
+  Yellow = 33,
+  YellowLight = 93,
+};
+
+};  // namespace ftxui
+
+#endif /* end of include guard: FTXUI_COLOR_H_ */

ftxui/include/ftxui/dom/elements.hpp

@@ -1,6 +1,7 @@
 #ifndef FTXUI_DOM_ELEMENTS_HPP
 #define FTXUI_DOM_ELEMENTS_HPP
 
+#include "ftxui/color.hpp"
 #include "ftxui/dom/node.hpp"
 
 namespace ftxui {
@@ -27,6 +28,8 @@ Element bold(Element);
 Element dim(Element);
 Element inverted(Element);
 Element underlined(Element);
+Element color(Color, Element);
+Element bgcolor(Color, Element);
 
 // --- Decorator ---
 Element hcenter(Element);

ftxui/include/ftxui/screen.hpp

@@ -5,6 +5,8 @@
 #include <vector>
 #include <memory>
 
+#include <ftxui/color.hpp>
+
 namespace ftxui {
 namespace dom {
   class Node;
@@ -16,6 +18,8 @@ struct Pixel {
   bool inverted = false;
   bool underlined = false;
   bool dim = false;
+  Color background_color = Color::Default;
+  Color foreground_color = Color::Default;
 };
 
 class Screen {

ftxui/src/ftxui/dom/bold.cpp

@@ -1,24 +1,14 @@
-#include "ftxui/dom/node.hpp"
+#include "ftxui/dom/node_decorator.hpp"
 #include "ftxui/dom/elements.hpp"
 
 namespace ftxui {
 namespace dom {
 
-class Bold : public Node {
+class Bold : public NodeDecorator {
  public:
-  Bold(Children children) : Node(std::move(children)) {}
+  Bold(Children children) : NodeDecorator(std::move(children)) {}
   ~Bold() override {}
 
-  void ComputeRequirement() override {
-    Node::ComputeRequirement();
-    requirement_ = children[0]->requirement();
-  }
-
-  void SetBox(Box box) override {
-    Node::SetBox(box);
-    children[0]->SetBox(box);
-  }
-
   void Render(Screen& screen) override {
     Node::Render(screen);
     for (int y = box_.top; y <= box_.bottom; ++y) {

ftxui/src/ftxui/dom/color.cpp

@@ -0,0 +1,51 @@
+#include "ftxui/dom/node_decorator.hpp"
+#include "ftxui/dom/elements.hpp"
+
+namespace ftxui {
+namespace dom {
+
+class BgColor : public NodeDecorator {
+ public:
+  BgColor(Children children, Color color)
+      : NodeDecorator(std::move(children)), color_(color) {}
+
+  void Render(Screen& screen) override {
+    NodeDecorator::Render(screen);
+    for (int y = box_.top; y <= box_.bottom; ++y) {
+      for (int x = box_.left; x <= box_.right; ++x) {
+        screen.PixelAt(x, y).background_color = color_;
+      }
+    }
+  }
+
+  Color color_;
+};
+
+class FgColor : public NodeDecorator {
+ public:
+  FgColor(Children children, Color color)
+      : NodeDecorator(std::move(children)), color_(color) {}
+  ~FgColor() override {}
+
+  void Render(Screen& screen) override {
+    NodeDecorator::Render(screen);
+    for (int y = box_.top; y <= box_.bottom; ++y) {
+      for (int x = box_.left; x <= box_.right; ++x) {
+        screen.PixelAt(x, y).foreground_color = color_;
+      }
+    }
+  }
+
+  Color color_;
+};
+
+std::unique_ptr<Node> color(Color c, Child child) {
+  return std::make_unique<FgColor>(unpack(std::move(child)), c);
+}
+
+std::unique_ptr<Node> bgcolor(Color c, Child child) {
+  return std::make_unique<BgColor>(unpack(std::move(child)), c);
+}
+
+};  // namespace dom
+};  // namespace ftxui

ftxui/src/ftxui/dom/dim.cpp

@@ -1,24 +1,14 @@
-#include "ftxui/dom/node.hpp"
+#include "ftxui/dom/node_decorator.hpp"
 #include "ftxui/dom/elements.hpp"
 
 namespace ftxui {
 namespace dom {
 
-class Dim : public Node {
+class Dim : public NodeDecorator {
  public:
-  Dim(Children children) : Node(std::move(children)) {}
+  Dim(Children children) : NodeDecorator(std::move(children)) {}
   ~Dim() override {}
 
-  void ComputeRequirement() override {
-    Node::ComputeRequirement();
-    requirement_ = children[0]->requirement();
-  }
-
-  void SetBox(Box box) override {
-    Node::SetBox(box);
-    children[0]->SetBox(box);
-  }
-
   void Render(Screen& screen) override {
     Node::Render(screen);
     for (int y = box_.top; y <= box_.bottom; ++y) {

ftxui/src/ftxui/dom/inverted.cpp

@@ -1,24 +1,14 @@
-#include "ftxui/dom/node.hpp"
+#include "ftxui/dom/node_decorator.hpp"
 #include "ftxui/dom/elements.hpp"
 
 namespace ftxui {
 namespace dom {
 
-class Inverted : public Node {
+class Inverted : public NodeDecorator {
  public:
-  Inverted(Children children) : Node(std::move(children)) {}
+  Inverted(Children children) : NodeDecorator(std::move(children)) {}
   ~Inverted() override {}
 
-  void ComputeRequirement() override {
-    Node::ComputeRequirement();
-    requirement_ = children[0]->requirement();
-  }
-
-  void SetBox(Box box) override {
-    Node::SetBox(box);
-    children[0]->SetBox(box);
-  }
-
   void Render(Screen& screen) override {
     Node::Render(screen);
     for (int y = box_.top; y <= box_.bottom; ++y) {

ftxui/src/ftxui/dom/node_decorator.cpp

@@ -0,0 +1,17 @@
+#include "ftxui/dom/node_decorator.hpp"
+
+namespace ftxui {
+namespace dom {
+
+void NodeDecorator::ComputeRequirement() {
+  Node::ComputeRequirement();
+  requirement_ = children[0]->requirement();
+}
+
+void NodeDecorator::SetBox(Box box) {
+  Node::SetBox(box);
+  children[0]->SetBox(box);
+}
+
+};  // namespace dom
+};  // namespace ftxui

ftxui/src/ftxui/dom/node_decorator.hpp

@@ -0,0 +1,22 @@
+#ifndef FTXUI_DOM_NODE_DECORATOR_H_
+#define FTXUI_DOM_NODE_DECORATOR_H_
+
+#include "ftxui/dom/node.hpp"
+#include "ftxui/dom/elements.hpp"
+
+namespace ftxui {
+namespace dom {
+
+// Helper class.
+class NodeDecorator : public Node {
+ public:
+  NodeDecorator(Children children) : Node(std::move(children)) {}
+  ~NodeDecorator() override {}
+  void ComputeRequirement() override;
+  void SetBox(Box box) override;
+};
+
+};  // namespace dom
+};  // namespace ftxui
+
+#endif /* end of include guard: FTXUI_DOM_NODE_DECORATOR_H_ */

ftxui/src/ftxui/dom/underlined.cpp

@@ -1,29 +1,19 @@
-#include "ftxui/dom/node.hpp"
+#include "ftxui/dom/node_decorator.hpp"
 #include "ftxui/dom/elements.hpp"
 
 namespace ftxui {
 namespace dom {
 
-class Underlined : public Node {
+class Underlined : public NodeDecorator {
  public:
-  Underlined(Children children) : Node(std::move(children)) {}
+  Underlined(Children children) : NodeDecorator(std::move(children)) {}
   ~Underlined() override {}
 
-  void ComputeRequirement() override {
-    Node::ComputeRequirement();
-    requirement_ = children[0]->requirement();
-  }
-
-  void SetBox(Box box) override {
-    Node::SetBox(box);
-    children[0]->SetBox(box);
-  }
-
   void Render(Screen& screen) override {
     Node::Render(screen);
     for (int y = box_.top; y <= box_.bottom; ++y) {
       for (int x = box_.left; x <= box_.right; ++x) {
-        screen.PixelAt(x,y).underlined = true; 
+        screen.PixelAt(x, y).underlined = true;
       }
     }
   }

ftxui/src/ftxui/screen.cpp

@@ -12,7 +12,7 @@ Screen::Screen(size_t dimx, size_t dimy)
 
 std::string Screen::ToString() {
   std::wstringstream ss;
-  
+
   Pixel previous_pixel;
 
   for (size_t y = 0; y < dimy_; ++y) {
@@ -45,6 +45,16 @@ std::string Screen::ToString() {
           ss << L"\e[22m";
         }
       }
+      if (pixels_[y][x].foreground_color != previous_pixel.foreground_color) {
+        ss << L"\e[" + to_wstring(std::to_string(
+                           (uint8_t)pixels_[y][x].foreground_color)) +
+                  L"m";
+      }
+      if (pixels_[y][x].background_color != previous_pixel.background_color) {
+        ss << L"\e[" + to_wstring(std::to_string(
+                           10 + (uint8_t)pixels_[y][x].background_color)) +
+                  L"m";
+      }
       ss << pixels_[y][x].character;
       previous_pixel = pixels_[y][x];
     }
@@ -77,7 +87,7 @@ Screen Screen::TerminalOutput(std::unique_ptr<dom::Node>& element) {
 
 std::string Screen::ResetPosition() {
   std::stringstream ss;
-  for(size_t y = 1; y<dimy_; ++y) {
+  for (size_t y = 1; y < dimy_; ++y) {
     ss << "\e[2K\r\e[1A";
   }
   return ss.str();