Initial color palette

apps/notes_tk/CMakeLists.txt

@@ -54,12 +54,12 @@ endif()
 
 if(DEPENDENCIES_FOUND)
 target_include_directories(${APP_NAME} PUBLIC
-    "${CMAKE_CURRENT_SOURCE_DIR}/text_editor"
-    "${CMAKE_CURRENT_SOURCE_DIR}/audio_editor"
-    "${CMAKE_CURRENT_SOURCE_DIR}/image_editor"
-    "${CMAKE_CURRENT_SOURCE_DIR}/web_client"
-    "${CMAKE_CURRENT_SOURCE_DIR}/canvas"
-    "${CMAKE_CURRENT_SOURCE_DIR}/mesh_viewer"
+    ${CMAKE_CURRENT_SOURCE_DIR}/text_editor
+    ${CMAKE_CURRENT_SOURCE_DIR}/audio_editor
+    ${CMAKE_CURRENT_SOURCE_DIR}/image_editor
+    ${CMAKE_CURRENT_SOURCE_DIR}/web_client
+    ${CMAKE_CURRENT_SOURCE_DIR}/canvas
+    ${CMAKE_CURRENT_SOURCE_DIR}/mesh_viewer
                               )
 target_link_libraries(${APP_NAME} PUBLIC ui_controls client windows console core network database geometry audio web)
 set_property(TARGET ${APP_NAME} PROPERTY FOLDER apps)

src/ui/ui_elements/CMakeLists.txt

@@ -21,6 +21,8 @@ list(APPEND LIB_INCLUDES
         ui_events/ResizeEvent.cpp
         widgets/Widget.h
         widgets/Widget.cpp
+		widgets/BoxGeometry.h
+        widgets/BoxGeometry.cpp
 		widgets/WidgetState.h
         widgets/WidgetState.cpp
 		style/Theme.h

src/ui/ui_elements/style/Theme.h

@@ -1,5 +1,163 @@
 #include "Color.h"
 
+#include <unordered_map>
+
+// Ref https://m3.material.io/styles/color/the-color-system/tokens
+
+enum class ColorPaletteToken
+{
+    Primary_10,
+    Primary_20,
+    Primary_30,
+    Primary_40,
+    Primary_80,
+    Primary_90,
+    Primary_100,
+    Secondary_10,
+    Secondary_20,
+    Secondary_30,
+    Secondary_40,
+    Secondary_80,
+    Secondary_90,
+    Secondary_100,
+    Tertiary_10,
+    Tertiary_20,
+    Tertiary_30,
+    Tertiary_40,
+    Tertiary_80,
+    Tertiary_90,
+    Tertiary_100,
+    Neutral_0,
+    Neutral_10,
+    Neutral_20,
+    Neutral_30,
+    Neutral_80,
+    Neutral_90,
+    Neutral_95,
+    Neutral_99,
+    Neutral_Variant_30,
+    Neutral_Variant_50,
+    Neutral_Variant_60,
+    Neutral_Variant_80,
+    Neutral_Variant_90,
+    Error_10,
+    Error_20,
+    Error_30,
+    Error_40,
+    Error_80,
+    Error_90,
+    Error_100
+};
+
+std::unordered_map<ColorPaletteToken, std::string> mPaletteColors = {
+    {ColorPaletteToken::Primary_10, "#21005E"},
+    {ColorPaletteToken::Primary_20, "#371E73"},
+    {ColorPaletteToken::Primary_30, "#4F378B"},
+    {ColorPaletteToken::Primary_40, "#6750A4"},
+    {ColorPaletteToken::Primary_80, "#D0BCFF"},
+    {ColorPaletteToken::Primary_90, "#EADDFF"},
+    {ColorPaletteToken::Primary_100, "#FFFFFF"},
+    {ColorPaletteToken::Secondary_10, "#1E192B"},
+    {ColorPaletteToken::Secondary_20, "#332D41"},
+    {ColorPaletteToken::Secondary_30, "#4A4458"},
+    {ColorPaletteToken::Secondary_40, "#625B71"},
+    {ColorPaletteToken::Secondary_80, "#CCC2DC"},
+    {ColorPaletteToken::Secondary_90, "#E8DEF8"},
+    {ColorPaletteToken::Secondary_100, "#FFFFFF"},
+    {ColorPaletteToken::Tertiary_10, "#370B1E"},
+    {ColorPaletteToken::Tertiary_20, "#492532"},
+    {ColorPaletteToken::Tertiary_30, "#633B48"},
+    {ColorPaletteToken::Tertiary_40, "#7D5260"},
+    {ColorPaletteToken::Tertiary_80, "#EFB8C8"},
+    {ColorPaletteToken::Tertiary_90, "#FFD8E4"},
+    {ColorPaletteToken::Tertiary_100, "#FFFFFF"},
+    {ColorPaletteToken::Neutral_0, "#000000"},
+    {ColorPaletteToken::Neutral_10, "#1C1B1F"},
+    {ColorPaletteToken::Neutral_20, "#313033"},
+    {ColorPaletteToken::Neutral_90, "#E6E1E5"},
+    {ColorPaletteToken::Neutral_95, "#F4EFF4"},
+    {ColorPaletteToken::Neutral_99, "#FFFBFE"},
+    {ColorPaletteToken::Neutral_Variant_30, "#49454F"},
+    {ColorPaletteToken::Neutral_Variant_50, "#79747E"},
+    {ColorPaletteToken::Neutral_Variant_60, "#938F99"},
+    {ColorPaletteToken::Neutral_Variant_80, "#CAC4D0"},
+    {ColorPaletteToken::Neutral_Variant_90, "#E7E0EC"},
+    {ColorPaletteToken::Error_10, "#410E0B"},
+    {ColorPaletteToken::Error_20, "#601410"},
+    {ColorPaletteToken::Error_30, "#8C1D18"},
+    {ColorPaletteToken::Error_40, "#B3261E"},
+    {ColorPaletteToken::Error_80, "#F2B8B5"},
+    {ColorPaletteToken::Error_90, "#F9DEDC"},
+    {ColorPaletteToken::Error_100, "#FFFFFF"},
+};
+
+enum class SystemToken
+{
+    Primary,
+    Primary_Container,
+    Secondary,
+    Secondary_Container,
+    Tertiary,
+    Tertiary_Container,
+    Surface,
+    Surface_Variant,
+    Background,
+    Error,
+    Error_Container,
+    On_Primary,
+    On_Primary_Container,
+    On_Secondary,
+    On_Secondary_Container,
+    On_Tertiary,
+    On_Tertiary_Container,
+    On_Surface,
+    On_Surface_Variant,
+    On_Error,
+    On_Error_Container,
+    On_Background,
+    Outline,
+    Ouline_Variant,
+    Shadow,
+    Surface_Tint_Color,
+    Inverse_Surface,
+    Inverse_On_Surface,
+    Inverse_Primary,
+    Scrim
+};
+
+std::unordered_map<SystemToken, ColorPaletteToken> mLightTheme = {
+    {SystemToken::Primary, ColorPaletteToken::Primary_40},
+    {SystemToken::Primary_Container, ColorPaletteToken::Primary_90},
+    {SystemToken::Secondary, ColorPaletteToken::Secondary_40},
+    {SystemToken::Secondary_Container, ColorPaletteToken::Secondary_90},
+    {SystemToken::Tertiary, ColorPaletteToken::Tertiary_40},
+    {SystemToken::Tertiary_Container, ColorPaletteToken::Tertiary_90},
+    {SystemToken::Surface, ColorPaletteToken::Neutral_99},
+    {SystemToken::Surface_Variant, ColorPaletteToken::Neutral_Variant_90},
+    {SystemToken::Background, ColorPaletteToken::Neutral_99},
+    {SystemToken::Error, ColorPaletteToken::Error_40},
+    {SystemToken::Error_Container, ColorPaletteToken::Error_90},
+    {SystemToken::On_Primary, ColorPaletteToken::Primary_100},
+    {SystemToken::On_Primary_Container, ColorPaletteToken::Primary_10},
+    {SystemToken::On_Secondary, ColorPaletteToken::Secondary_100},
+    {SystemToken::On_Secondary_Container, ColorPaletteToken::Secondary_10},
+    {SystemToken::On_Tertiary, ColorPaletteToken::Tertiary_100},
+    {SystemToken::On_Tertiary_Container, ColorPaletteToken::Tertiary_10},
+    {SystemToken::On_Surface, ColorPaletteToken::Neutral_10},
+    {SystemToken::On_Surface_Variant, ColorPaletteToken::Neutral_Variant_30},
+    {SystemToken::On_Error, ColorPaletteToken::Error_100},
+    {SystemToken::On_Error_Container, ColorPaletteToken::Error_10},
+    {SystemToken::On_Background, ColorPaletteToken::Neutral_10},
+    {SystemToken::Outline, ColorPaletteToken::Neutral_Variant_50},
+    {SystemToken::Ouline_Variant, ColorPaletteToken::Neutral_Variant_80},
+    {SystemToken::Shadow, ColorPaletteToken::Neutral_0},
+    {SystemToken::Surface_Tint_Color, ColorPaletteToken::Primary_40},
+    {SystemToken::Inverse_Surface, ColorPaletteToken::Neutral_20},
+    {SystemToken::Inverse_On_Surface, ColorPaletteToken::Neutral_95},
+    {SystemToken::Inverse_Primary, ColorPaletteToken::Primary_80},
+    {SystemToken::Scrim, ColorPaletteToken::Neutral_0},
+};
+
 class Theme
 {
 public:

src/ui/ui_elements/widgets/BoxGeometry.cpp

@@ -0,0 +1,117 @@
+#include "BoxGeometry.h"
+
+BoxGeometry::BoxGeometry()
+	: mLocation(DiscretePoint(0, 0)),
+		mSize({ 100, 0, 0, 100, 0, 0 }),
+		mPadding(),
+		mMargin()
+{
+
+}
+
+
+BoundedSize BoxGeometry::getSize() const
+{
+	return mSize;
+}
+
+const DiscretePoint& BoxGeometry::getLocation() const
+{
+	return mLocation;
+}
+
+void BoxGeometry::setSize(const BoundedSize& size)
+{
+	if (size != mSize)
+	{
+		mSize = size;
+		mTransformDirty = true;
+	}
+}
+
+void BoxGeometry::setMargin(unsigned margin)
+{
+	setMargin({ margin, margin, margin, margin });
+}
+
+void BoxGeometry::setMargin(const BoundaryOffset& margin)
+{
+	if (margin != mMargin)
+	{
+		mMargin = margin;
+		mTransformDirty = true;
+	}
+}
+
+void BoxGeometry::setPadding(unsigned padding)
+{
+	setPadding({ padding, padding, padding, padding });
+}
+
+void BoxGeometry::setPadding(const BoundaryOffset& padding)
+{
+    if (padding != mPadding)
+    {
+        mPadding = padding;
+        mTransformDirty = true;
+    }
+}
+
+void BoxGeometry::setBounds(unsigned width, unsigned height)
+{
+    if (mSize.mMaxWidth > 0 && width > mSize.mMaxWidth)
+    {
+        width = mSize.mMaxWidth;
+    }
+
+    if (mSize.mMaxHeight > 0 && height > mSize.mMaxHeight)
+    {
+        height = mSize.mMaxHeight;
+    }
+
+    if (width != mSize.mWidth || height != mSize.mHeight)
+    {
+        mTransformDirty = true;
+        mSize.mWidth = width;
+        mSize.mHeight = height;
+    }
+}
+
+void BoxGeometry::setLocation(const DiscretePoint& loc)
+{
+    if (mLocation != loc)
+    {
+        mLocation = loc;
+        mTransformDirty = true;
+    }
+}
+
+void BoxGeometry::setMaxWidth(unsigned maxWidth)
+{
+    if (mSize.mMaxWidth != maxWidth)
+    {
+        mTransformDirty = true;
+        mSize.mMaxWidth = maxWidth;
+    }
+}
+
+bool BoxGeometry::contains(const DiscretePoint& loc) const
+{
+    if (loc.getX() < mLocation.getX())
+    {
+        return false;
+    }
+    if (loc.getX() > mLocation.getX() + mSize.mWidth)
+    {
+        return false;
+    }
+    if (loc.getY() > mLocation.getY() + mSize.mHeight)
+    {
+        return false;
+    }
+    if (loc.getY() < mLocation.getY())
+    {
+        return false;
+    }
+    return true;
+}

src/ui/ui_elements/widgets/BoxGeometry.h

@@ -0,0 +1,85 @@
+#pragma once
+
+#include "DiscretePoint.h"
+
+struct BoundaryOffset
+{
+    bool operator==(const BoundaryOffset& rhs) const
+    {
+        return (mLeft == rhs.mLeft)
+            && (mRight == rhs.mRight)
+            && (mTop == rhs.mTop)
+            && (mBottom == rhs.mBottom);
+    }
+    bool operator!=(const BoundaryOffset& rhs) const
+    {
+        return !operator==(rhs);
+    }
+
+    unsigned mLeft = 0;
+    unsigned mRight = 0;
+    unsigned mTop = 0;
+    unsigned mBottom = 0;
+};
+
+struct BoundedSize
+{
+    bool operator==(const BoundedSize& rhs) const
+    {
+        return (mWidth == rhs.mWidth)
+            && (mMaxWidth == rhs.mMaxWidth)
+            && (mMinWidth == rhs.mMinWidth)
+            && (mHeight == rhs.mHeight)
+            && (mMaxHeight == rhs.mMaxHeight)
+            && (mMinHeight == rhs.mMinHeight);
+    }
+    bool operator!=(const BoundedSize& rhs) const
+    {
+        return !operator==(rhs);
+    }
+
+    unsigned mWidth = 0;
+    unsigned mMaxWidth = 0;
+    unsigned mMinWidth = 0;
+    unsigned mHeight = 0;
+    unsigned mMaxHeight = 0;
+    unsigned mMinHeight = 0;
+};
+
+class BoxGeometry
+{
+public:
+    BoxGeometry();
+
+    virtual ~BoxGeometry() = default;
+
+    bool contains(const DiscretePoint& loc) const;
+
+    BoundedSize getSize() const;
+
+    const DiscretePoint& getLocation() const;
+
+    void setBounds(unsigned width, unsigned height);
+
+    void setSize(const BoundedSize& size);
+
+    void setMaxWidth(unsigned maxWidth);
+
+    void setMargin(unsigned margin);
+
+    void setMargin(const BoundaryOffset& margin);
+
+    void setPadding(unsigned padding);
+
+    void setPadding(const BoundaryOffset& padding);
+
+    void setLocation(const DiscretePoint& loc);
+
+protected:
+    DiscretePoint mLocation;
+    BoundedSize mSize;
+    BoundaryOffset mPadding;
+    BoundaryOffset mMargin;
+
+    bool mTransformDirty{ true };
+};

src/ui/ui_elements/widgets/Widget.cpp

@@ -18,10 +18,7 @@
 #include <iostream>
 
 Widget::Widget()
-    : mLocation(DiscretePoint(0, 0)),
-      mSize({100, 0, 0, 100, 0, 0}),
-      mPadding(),
-      mMargin(),
+    : BoxGeometry(),
       mRootNode(std::make_unique<TransformNode>()),
       mChildren(),
       mBorderThickness(0),
@@ -50,77 +47,23 @@ void Widget::addWidget(WidgetUPtr widget)
     mChildren.push_back(std::move(widget));
 }
 
-Widget::BoundedSize Widget::getSize() const
+void Widget::setName(const std::string& name)
 {
-    return mSize;
+    mName = name;
 }
 
-const DiscretePoint& Widget::getLocation() const
+const std::string& Widget::getName() const
 {
-    return mLocation;
+    return mName;
 }
 
+
 TransformNode* Widget::getRootNode() const
 {
     return mRootNode.get();
 }
 
-void Widget::setSize(const BoundedSize& size)
-{
-    if (size != mSize)
-    {
-        mSize = size;
-        mTransformDirty = true;
-    }
-}
 
-void Widget::setMargin(unsigned margin)
-{
-    setMargin({margin, margin, margin, margin});
-}
-
-void Widget::setMargin(const BoundaryOffset& margin)
-{
-    if (margin != mMargin)
-    {
-        mMargin = margin;
-        mTransformDirty = true;
-    }
-}
-
-void Widget::setPadding(unsigned padding)
-{
-    setPadding({padding, padding, padding, padding});
-}
-
-void Widget::setPadding(const BoundaryOffset& padding)
-{
-    if (padding != mPadding)
-    {
-        mPadding = padding;
-        mTransformDirty = true;
-    }
-}
-
-void Widget::setBounds(unsigned width, unsigned height)
-{
-    if (mSize.mMaxWidth > 0 && width > mSize.mMaxWidth)
-    {
-        width = mSize.mMaxWidth;
-    }
-
-    if (mSize.mMaxHeight > 0 && height > mSize.mMaxHeight)
-    {
-        height = mSize.mMaxHeight;
-    }
-
-    if (width != mSize.mWidth || height != mSize.mHeight)
-    {
-        mTransformDirty = true;
-        mSize.mWidth = width;
-        mSize.mHeight = height;
-    }
-}
 
 void Widget::setBackgroundColor(const Color& color)
 {
@@ -131,15 +74,6 @@ void Widget::setBackgroundColor(const Color& color)
     }
 }
 
-void Widget::setLocation(const DiscretePoint& loc)
-{
-    if (mLocation != loc)
-    {
-        mLocation = loc;
-        mTransformDirty = true;
-    }
-}
-
 void Widget::setVisible(bool visible)
 {
     if (mVisible != visible)
@@ -176,15 +110,6 @@ bool Widget::needsUpdate() const
     return false;
 }
 
-void Widget::setMaxWidth(unsigned maxWidth)
-{
-    if (mSize.mMaxWidth != maxWidth)
-    {
-        mTransformDirty = true;
-        mSize.mMaxWidth = maxWidth;
-    }
-}
-
 void Widget::doPaint(const PaintEvent* event)
 {
     updateBackground(event);
@@ -236,27 +161,6 @@ void Widget::updateChildLocations()
     }
 }
 
-bool Widget::contains(const DiscretePoint& loc) const
-{
-    if(loc.getX() < mLocation.getX())
-    {
-        return false;
-    }
-    if(loc.getX() > mLocation.getX() + mSize.mWidth)
-    {
-        return false;
-    }
-    if(loc.getY() > mLocation.getY() + mSize.mHeight)
-    {
-        return false;
-    }
-    if(loc.getY() < mLocation.getY())
-    {
-        return false;
-    }
-    return true;
-}
-
 bool Widget::onKeyboardEvent(const KeyboardEvent* event)
 {
     bool inChild = false;

src/ui/ui_elements/widgets/Widget.h

@@ -1,8 +1,9 @@
 #pragma once
 
-#include "DiscretePoint.h"
 #include "FontItem.h"
 #include "Color.h"
+#include "WidgetState.h"
+#include "BoxGeometry.h"
 
 #include <memory>
 #include <vector>
@@ -21,55 +22,9 @@ namespace mt
 class Window;
 }
 
-class Widget
+class Widget : public BoxGeometry
 {
 public:
-    struct BoundaryOffset
-    {
-        bool operator==(const BoundaryOffset& rhs) const
-        {
-           return (mLeft == rhs.mLeft)
-           && (mRight == rhs.mRight)
-           && (mTop == rhs.mTop)
-           && (mBottom == rhs.mBottom);
-        }
-        bool operator!=(const BoundaryOffset& rhs) const
-        {
-          return !operator==(rhs);
-        }
-
-        unsigned mLeft = 0;
-        unsigned mRight = 0;
-        unsigned mTop = 0;
-        unsigned mBottom = 0;
-    };
-
-    struct BoundedSize
-    {
-        bool operator==(const BoundedSize& rhs) const
-        {
-           return (mWidth == rhs.mWidth)
-           && (mMaxWidth == rhs.mMaxWidth)
-           && (mMinWidth == rhs.mMinWidth)
-           && (mHeight == rhs.mHeight)
-           && (mMaxHeight == rhs.mMaxHeight)
-           && (mMinHeight == rhs.mMinHeight);
-        }
-        bool operator!=(const BoundedSize& rhs) const
-        {
-          return !operator==(rhs);
-        }
-
-        unsigned mWidth = 0;
-        unsigned mMaxWidth = 0;
-        unsigned mMinWidth = 0;
-        unsigned mHeight = 0;
-        unsigned mMaxHeight = 0;
-        unsigned mMinHeight = 0;
-    };
-
-public:
-
     Widget();
 
     virtual ~Widget();
@@ -78,11 +33,13 @@ public:
 
     virtual void addWidget(std::unique_ptr<Widget> widget);
 
-    BoundedSize getSize() const;
-
     TransformNode* getRootNode() const;
 
-    const DiscretePoint& getLocation() const;
+    const std::string& getName() const;
+
+    mt::Window* getTopLevelWindow() const;
+
+    bool needsUpdate() const;
 
     virtual void onPaintEvent(const PaintEvent* event);
 
@@ -90,44 +47,14 @@ public:
 
     virtual bool onKeyboardEvent(const KeyboardEvent* event);
 
-    bool contains(const DiscretePoint& loc) const;
-
     void setBackgroundColor(const Color& color);
 
-    void setBounds(unsigned width, unsigned height);
-
-    void setSize(const BoundedSize& size);
-
-    void setMaxWidth(unsigned maxWidth);
-
-    void setMargin(unsigned margin);
-
-    void setMargin(const BoundaryOffset& margin);
-
-    void setPadding(unsigned padding);
-
-    void setPadding(const BoundaryOffset& padding);
-
-    void setLocation(const DiscretePoint& loc);
-
     void setVisible(bool visible);
 
-    void setName(const std::string& name)
-    {
-        mName = name;
-    }
-
-    const std::string& getName() const
-    {
-        return mName;
-    }
-
-    bool needsUpdate() const;
+    void setName(const std::string& name);
 
     void setWindow(mt::Window* window);
 
-    mt::Window* getTopLevelWindow() const;
-
 protected:
     virtual bool onMyKeyboardEvent(const KeyboardEvent* event);
 
@@ -147,13 +74,9 @@ protected:
 
     mt::Window* getWindow() const;
 
-    DiscretePoint mLocation;
-    BoundedSize mSize;
-    BoundaryOffset mPadding;
-    BoundaryOffset mMargin;
-
     std::unique_ptr<TransformNode> mRootNode;
     std::vector<std::unique_ptr<Widget> > mChildren;
+
     unsigned mBorderThickness{0};
     Color mBackgroundColor;
     Color mBorderColor;
@@ -161,7 +84,6 @@ protected:
 
     std::unique_ptr<RectangleNode> mBackgroundNode;
 
-    bool mTransformDirty{true};
     bool mMaterialDirty{true};
     bool mVisibilityDirty{true};
 

src/ui/ui_elements/widgets/WidgetState.h

@@ -0,0 +1,9 @@
+#pragma once
+
+struct WidgetState
+{
+	bool mIsSelected{ false };
+	bool mIsHovered{ false };
+	bool mIsPressed{ false };
+	bool mIsFocused{ false };			
+};