jgrogan/stuff-from-scratch
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add initial token theming.

Browse source
This commit is contained in:
jmsgrogan 2023-01-17 13:01:59 +00:00
parent 3d37a7244b
commit 1f85954e98
34 changed files with 406 additions and 253 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/ui/ui_elements/CMakeLists.txt
View file

@ -25,8 +25,13 @@ list(APPEND LIB_INCLUDES
widgets/BoxGeometry.cpp
widgets/WidgetState.h
widgets/WidgetState.cpp
style/Theme.h
style/Theme.cpp
style/ThemeManager.h
style/ThemeManager.cpp
style/ITheme.h
style/LightTheme.h
style/LightTheme.cpp
style/ColorPalette.h
style/ColorPalette.cpp
)
add_library(${MODULE_NAME} SHARED ${LIB_INCLUDES})

55
src/ui/ui_elements/style/ColorPalette.cpp Normal file
View file

@ -0,0 +1,55 @@
#include "ColorPalette.h"
const std::unordered_map<ColorPaletteToken, std::string> ColorPalette::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"},
};
Color ColorPalette::getColor(ColorPaletteToken token)
{
if (auto iter = mPaletteColors.find(token); iter != mPaletteColors.end())
{
return Color(iter->second);
}
else
{
return Color();
}
}

60
src/ui/ui_elements/style/ColorPalette.h Normal file
View file

@ -0,0 +1,60 @@
#pragma once
#include "Color.h"
#include <unordered_map>
#include <string>
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
};
class ColorPalette
{
public:
static Color getColor(ColorPaletteToken token);
private:
static const std::unordered_map<ColorPaletteToken, std::string> mPaletteColors;
};

46
src/ui/ui_elements/style/ITheme.h Normal file
View file

@ -0,0 +1,46 @@
#pragma once
#include "ColorPalette.h"
namespace ThemeToken
{
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
};
}
class ITheme
{
public:
virtual Color getColor(ThemeToken::SystemToken token) const = 0;
};

48
src/ui/ui_elements/style/LightTheme.cpp Normal file
View file

@ -0,0 +1,48 @@
#include "LightTheme.h"
#include "ColorPalette.h"
const std::unordered_map<ThemeToken::SystemToken, ColorPaletteToken> LightTheme::mPalette = {
{ThemeToken::SystemToken::Primary, ColorPaletteToken::Primary_40},
{ThemeToken::SystemToken::Primary_Container, ColorPaletteToken::Primary_90},
{ThemeToken::SystemToken::Secondary, ColorPaletteToken::Secondary_40},
{ThemeToken::SystemToken::Secondary_Container, ColorPaletteToken::Secondary_90},
{ThemeToken::SystemToken::Tertiary, ColorPaletteToken::Tertiary_40},
{ThemeToken::SystemToken::Tertiary_Container, ColorPaletteToken::Tertiary_90},
{ThemeToken::SystemToken::Surface, ColorPaletteToken::Neutral_99},
{ThemeToken::SystemToken::Surface_Variant, ColorPaletteToken::Neutral_Variant_90},
{ThemeToken::SystemToken::Background, ColorPaletteToken::Neutral_99},
{ThemeToken::SystemToken::Error, ColorPaletteToken::Error_40},
{ThemeToken::SystemToken::Error_Container, ColorPaletteToken::Error_90},
{ThemeToken::SystemToken::On_Primary, ColorPaletteToken::Primary_100},
{ThemeToken::SystemToken::On_Primary_Container, ColorPaletteToken::Primary_10},
{ThemeToken::SystemToken::On_Secondary, ColorPaletteToken::Secondary_100},
{ThemeToken::SystemToken::On_Secondary_Container, ColorPaletteToken::Secondary_10},
{ThemeToken::SystemToken::On_Tertiary, ColorPaletteToken::Tertiary_100},
{ThemeToken::SystemToken::On_Tertiary_Container, ColorPaletteToken::Tertiary_10},
{ThemeToken::SystemToken::On_Surface, ColorPaletteToken::Neutral_10},
{ThemeToken::SystemToken::On_Surface_Variant, ColorPaletteToken::Neutral_Variant_30},
{ThemeToken::SystemToken::On_Error, ColorPaletteToken::Error_100},
{ThemeToken::SystemToken::On_Error_Container, ColorPaletteToken::Error_10},
{ThemeToken::SystemToken::On_Background, ColorPaletteToken::Neutral_10},
{ThemeToken::SystemToken::Outline, ColorPaletteToken::Neutral_Variant_50},
{ThemeToken::SystemToken::Ouline_Variant, ColorPaletteToken::Neutral_Variant_80},
{ThemeToken::SystemToken::Shadow, ColorPaletteToken::Neutral_0},
{ThemeToken::SystemToken::Surface_Tint_Color, ColorPaletteToken::Primary_40},
{ThemeToken::SystemToken::Inverse_Surface, ColorPaletteToken::Neutral_20},
{ThemeToken::SystemToken::Inverse_On_Surface, ColorPaletteToken::Neutral_95},
{ThemeToken::SystemToken::Inverse_Primary, ColorPaletteToken::Primary_80},
{ThemeToken::SystemToken::Scrim, ColorPaletteToken::Neutral_0},
};
Color LightTheme::getColor(ThemeToken::SystemToken token) const
{
if (auto iter = mPalette.find(token); iter != mPalette.end())
{
return ColorPalette::getColor(iter->second);
}
else
{
return Color();
}
}

15
src/ui/ui_elements/style/LightTheme.h Normal file
View file

@ -0,0 +1,15 @@
#pragma once
#include "ITheme.h"
#include "Color.h"
#include <unordered_map>
class LightTheme : public ITheme
{
public:
Color getColor(ThemeToken::SystemToken token) const override;
private:
static const std::unordered_map<ThemeToken::SystemToken, ColorPaletteToken> mPalette;
};

26
src/ui/ui_elements/style/Theme.cpp
View file

@ -1,26 +0,0 @@
#include "Theme.h"
Color Theme::getBackgroundPrimary()
{
return {245, 245, 245};
}
Color Theme::getBannerBackground()
{
return {181, 189, 200};
}
Color Theme::getButtonPrimaryBackground()
{
return {200, 200, 200};
}
Color Theme::getButtonPrimaryPressed()
{
return {};
}
Color Theme::getTextPrimary()
{
return {};
}

169
src/ui/ui_elements/style/Theme.h
View file

@ -1,173 +1,14 @@
#include "Color.h"
#include "ITheme.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
class ThemeManager
{
public:
static Color getBackgroundPrimary();
Color getColor(ThemeToken::SystemToken token) const;
static Color getBannerBackground();
static Color getButtonPrimaryBackground();
static Color getButtonPrimaryPressed();
static Color getTextPrimary();
private:
std::unique_ptr<ITheme> mActiveTheme;
};

17
src/ui/ui_elements/style/ThemeManager.cpp Normal file
View file

@ -0,0 +1,17 @@
#include "ThemeManager.h"
#include "LightTheme.h"
ThemeManager::ThemeManager()
{
mTheme = std::make_unique<LightTheme>();
}
Color ThemeManager::getColor(ThemeToken::SystemToken token) const
{
return mTheme->getColor(token);
}

12
src/ui/ui_elements/style/ThemeManager.h Normal file
View file

@ -0,0 +1,12 @@
#pragma once
#include "ITheme.h"
class ThemeManager
{
public:
ThemeManager();
Color getColor(ThemeToken::SystemToken token) const;
private:
std::unique_ptr<ITheme> mTheme;
};

20
src/ui/ui_elements/ui_events/PaintEvent.cpp
View file

@ -1,7 +1,9 @@
#include "PaintEvent.h"
PaintEvent::PaintEvent()
: UiEvent()
PaintEvent::PaintEvent(ThemeManager* themesManager, FontsManager* fontsManager)
: UiEvent(),
mThemeManager(themesManager),
mFontsManager(fontsManager)
{
mType = UiEvent::Type::Paint;
}
@ -11,8 +13,18 @@ PaintEvent::~PaintEvent()
}
std::unique_ptr<PaintEvent> PaintEvent::Create()
std::unique_ptr<PaintEvent> PaintEvent::Create(ThemeManager* themesManager, FontsManager* fontsManager)
{
return std::make_unique<PaintEvent>();
return std::make_unique<PaintEvent>(themesManager, fontsManager);
}
ThemeManager* PaintEvent::getThemesManager() const
{
return mThemeManager;
}
FontsManager* PaintEvent::getFontsManager() const
{
return mFontsManager;
}

14
src/ui/ui_elements/ui_events/PaintEvent.h
View file

@ -4,13 +4,23 @@
#include "UiEvent.h"
class ThemeManager;
class FontsManager;
class PaintEvent : public UiEvent
{
public:
PaintEvent();
PaintEvent(ThemeManager* themesManager, FontsManager* fontsManager);
static std::unique_ptr<PaintEvent> Create(ThemeManager* themesManager, FontsManager* fontsManager);
~PaintEvent();
static std::unique_ptr<PaintEvent> Create();
ThemeManager* getThemesManager() const;
FontsManager* getFontsManager() const;
private:
ThemeManager* mThemeManager{ nullptr };
FontsManager* mFontsManager{ nullptr };
};
using PaintEventUPtr = std::unique_ptr<PaintEvent>;

15
src/ui/ui_elements/widgets/Widget.cpp
View file

@ -9,6 +9,7 @@
#include "TextNode.h"
#include "TransformNode.h"
#include "RootNode.h"
#include "ThemeManager.h"
#include "Window.h"
#include "FileLogger.h"
@ -22,8 +23,8 @@ Widget::Widget()
mRootNode(std::make_unique<TransformNode>()),
mChildren(),
mBorderThickness(0),
mBackgroundColor(Color(255, 255, 255)),
mBorderColor(Color(0, 0, 0)),
mBackground(ThemeToken::SystemToken::Primary),
mBorder(ThemeToken::SystemToken::Outline),
mVisible(true)
{
mName = "Widget";
@ -65,11 +66,11 @@ TransformNode* Widget::getRootNode() const
void Widget::setBackgroundColor(const Color& color)
void Widget::setBackground(ThemeToken::SystemToken token)
{
if (mBackgroundColor != color)
if (mBackground != token)
{
mBackgroundColor = color;
mBackground = token;
mMaterialDirty = true;
}
}
@ -239,8 +240,8 @@ void Widget::updateBackground(const PaintEvent* event)
if (mMaterialDirty)
{
mBackgroundNode->setFillColor(mBackgroundColor);
mBackgroundNode->setStrokeColor(mBorderColor);
mBackgroundNode->setFillColor(event->getThemesManager()->getColor(mBackground));
mBackgroundNode->setStrokeColor(event->getThemesManager()->getColor(mBorder));
mBackgroundNode->setStrokeThickness(mBorderThickness);
}

9
src/ui/ui_elements/widgets/Widget.h
View file

@ -1,7 +1,7 @@
#pragma once
#include "FontItem.h"
#include "Color.h"
#include "ITheme.h"
#include "WidgetState.h"
#include "BoxGeometry.h"
@ -47,7 +47,7 @@ public:
virtual bool onKeyboardEvent(const KeyboardEvent* event);
void setBackgroundColor(const Color& color);
void setBackground(ThemeToken::SystemToken token);
void setVisible(bool visible);
@ -78,8 +78,9 @@ protected:
std::vector<std::unique_ptr<Widget> > mChildren;
unsigned mBorderThickness{0};
Color mBackgroundColor;
Color mBorderColor;
ThemeToken::SystemToken mBackground;
ThemeToken::SystemToken mBorder;
bool mVisible{true};
std::unique_ptr<RectangleNode> mBackgroundNode;