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

Start adding themed buttons.

Browse source
This commit is contained in:
jmsgrogan 2023-01-18 10:47:13 +00:00
parent dfbc87cb09
commit 942cc2539c
18 changed files with 781 additions and 173 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -32,6 +32,12 @@ list(APPEND LIB_INCLUDES
style/LightTheme.cpp
style/ColorPalette.h
style/ColorPalette.cpp
style/FontTokens.h
style/FontTokens.cpp
style/ElevationTokens.h
style/OpacityTokens.h
IconNode.h
IconNode.cpp
)
add_library(${MODULE_NAME} SHARED ${LIB_INCLUDES})
@ -43,7 +49,7 @@ target_include_directories(${MODULE_NAME} PUBLIC
${CMAKE_CURRENT_SOURCE_DIR}/ui_events
${CMAKE_CURRENT_SOURCE_DIR}/desktop_elements
)
target_link_libraries(${MODULE_NAME} PUBLIC core geometry graphics visual_elements image)
target_link_libraries(${MODULE_NAME} PUBLIC core geometry graphics visual_elements image web)
set_property(TARGET ${MODULE_NAME} PROPERTY FOLDER src/ui)

0
src/ui/ui_elements/IconNode.cpp Normal file
View file

0
src/ui/ui_elements/IconNode.h Normal file
View file

82
src/ui/ui_elements/style/ColorPalette.cpp
View file

@ -1,48 +1,48 @@
#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"},
const std::unordered_map<Theme::Ref::Color, std::string> ColorPalette::mPaletteColors = {
{Theme::Ref::Color::Primary_10, "#21005E"},
{Theme::Ref::Color::Primary_20, "#371E73"},
{Theme::Ref::Color::Primary_30, "#4F378B"},
{Theme::Ref::Color::Primary_40, "#6750A4"},
{Theme::Ref::Color::Primary_80, "#D0BCFF"},
{Theme::Ref::Color::Primary_90, "#EADDFF"},
{Theme::Ref::Color::Primary_100, "#FFFFFF"},
{Theme::Ref::Color::Secondary_10, "#1E192B"},
{Theme::Ref::Color::Secondary_20, "#332D41"},
{Theme::Ref::Color::Secondary_30, "#4A4458"},
{Theme::Ref::Color::Secondary_40, "#625B71"},
{Theme::Ref::Color::Secondary_80, "#CCC2DC"},
{Theme::Ref::Color::Secondary_90, "#E8DEF8"},
{Theme::Ref::Color::Secondary_100, "#FFFFFF"},
{Theme::Ref::Color::Tertiary_10, "#370B1E"},
{Theme::Ref::Color::Tertiary_20, "#492532"},
{Theme::Ref::Color::Tertiary_30, "#633B48"},
{Theme::Ref::Color::Tertiary_40, "#7D5260"},
{Theme::Ref::Color::Tertiary_80, "#EFB8C8"},
{Theme::Ref::Color::Tertiary_90, "#FFD8E4"},
{Theme::Ref::Color::Tertiary_100, "#FFFFFF"},
{Theme::Ref::Color::Neutral_0, "#000000"},
{Theme::Ref::Color::Neutral_10, "#1C1B1F"},
{Theme::Ref::Color::Neutral_20, "#313033"},
{Theme::Ref::Color::Neutral_90, "#E6E1E5"},
{Theme::Ref::Color::Neutral_95, "#F4EFF4"},
{Theme::Ref::Color::Neutral_99, "#FFFBFE"},
{Theme::Ref::Color::Neutral_Variant_30, "#49454F"},
{Theme::Ref::Color::Neutral_Variant_50, "#79747E"},
{Theme::Ref::Color::Neutral_Variant_60, "#938F99"},
{Theme::Ref::Color::Neutral_Variant_80, "#CAC4D0"},
{Theme::Ref::Color::Neutral_Variant_90, "#E7E0EC"},
{Theme::Ref::Color::Error_10, "#410E0B"},
{Theme::Ref::Color::Error_20, "#601410"},
{Theme::Ref::Color::Error_30, "#8C1D18"},
{Theme::Ref::Color::Error_40, "#B3261E"},
{Theme::Ref::Color::Error_80, "#F2B8B5"},
{Theme::Ref::Color::Error_90, "#F9DEDC"},
{Theme::Ref::Color::Error_100, "#FFFFFF"},
};
Color ColorPalette::getColor(ColorPaletteToken token)
Color ColorPalette::getColor(Theme::Ref::Color token)
{
if (auto iter = mPaletteColors.find(token); iter != mPaletteColors.end())
{

96
src/ui/ui_elements/style/ColorPalette.h
View file

@ -5,56 +5,62 @@
#include <unordered_map>
#include <string>
enum class ColorPaletteToken
namespace Theme
{
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
};
namespace Ref
{
enum class Color
{
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);
static Color getColor(Theme::Ref::Color token);
private:
static const std::unordered_map<ColorPaletteToken, std::string> mPaletteColors;
static const std::unordered_map<Theme::Ref::Color, std::string> mPaletteColors;
};

43
src/ui/ui_elements/style/ElevationTokens.h Normal file
View file

@ -0,0 +1,43 @@
#pragma once
namespace Theme
{
namespace Sys
{
enum class Elevation
{
Level_0,
Level_1,
Level_2,
Level_3,
Level_4,
Level_5,
};
}
}
class ElevationToken
{
public:
static unsigned getValue(Theme::Sys::Elevation token)
{
switch (token)
{
case Theme::Sys::Elevation::Level_0:
return 0;
case Theme::Sys::Elevation::Level_1:
return 1;
case Theme::Sys::Elevation::Level_2:
return 3;
case Theme::Sys::Elevation::Level_3:
return 6;
case Theme::Sys::Elevation::Level_4:
return 8;
case Theme::Sys::Elevation::Level_5:
return 12;
default:
return 0;
}
}
};

0
src/ui/ui_elements/style/FontTokens.cpp Normal file
View file

72
src/ui/ui_elements/style/FontTokens.h Normal file
View file

@ -0,0 +1,72 @@
#pragma once
#include <string>
namespace Theme
{
namespace Ref
{
namespace Typeface
{
enum class Font
{
Plain,
Brand
};
enum class Weight
{
Weight_Regular,
Weight_Medium
};
}
};
};
namespace Theme
{
namespace Sys
{
enum class Typescale
{
Display_Large,
Display_Medium,
Display_Small,
Headline_Large,
Headline_Medium,
Headline_Small,
Title_Large,
Title_Medium,
Title_Small,
Label_Large,
Label_Medium,
Label_Small,
Body_Large,
Body_Medium,
Body_Small,
Label_Large,
Label_Medium,
Label_Small
};
};
};
class FontTokens
{
static std::string getFont(Theme::Ref::Typeface::Font font);
static Theme::Ref::Typeface::Font getFont(Theme::Sys::Typescale typescale);
static unsigned getLineHeight(Theme::Sys::Typescale typescale);
static unsigned getSize(Theme::Sys::Typescale typescale);
static unsigned getTracking(Theme::Sys::Typescale typescale);
static unsigned getWeight(Theme::Ref::Typeface::Font font);
static Theme::Ref::Typeface::Font getWeight(Theme::Sys::Typescale typescale);
};

72
src/ui/ui_elements/style/ITheme.h
View file

@ -2,45 +2,49 @@
#include "ColorPalette.h"
namespace ThemeToken
namespace Theme
{
enum class SystemToken
namespace Sys
{
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
};
enum class Color
{
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,
None
};
}
}
class ITheme
{
public:
virtual Color getColor(ThemeToken::SystemToken token) const = 0;
virtual Color getColor(Theme::Sys::Color token) const = 0;
};

64
src/ui/ui_elements/style/LightTheme.cpp
View file

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

4
src/ui/ui_elements/style/LightTheme.h
View file

@ -8,8 +8,8 @@
class LightTheme : public ITheme
{
public:
Color getColor(ThemeToken::SystemToken token) const override;
Color getColor(Theme::Sys::Color token) const override;
private:
static const std::unordered_map<ThemeToken::SystemToken, ColorPaletteToken> mPalette;
static const std::unordered_map<Theme::Sys::Color, Theme::Ref::Color> mPalette;
};

39
src/ui/ui_elements/style/OpacityTokens.h Normal file
View file

@ -0,0 +1,39 @@
#pragma once
namespace Theme
{
namespace Sys
{
namespace StateLayerOpacity
{
enum class State
{
Hover,
Focus,
Pressed,
Dragged
};
}
}
}
class OpacityTokens
{
public:
static float getValue(Theme::Sys::StateLayerOpacity::State token)
{
switch (token)
{
case Theme::Sys::StateLayerOpacity::State::Hover:
return 0.08;
case Theme::Sys::StateLayerOpacity::State::Focus:
return 0.12;
case Theme::Sys::StateLayerOpacity::State::Pressed:
return 0.12;
case Theme::Sys::StateLayerOpacity::State::Dragged:
return 0.16;
default:
return 0.0;
}
}
};

14
src/ui/ui_elements/widgets/WidgetState.h
View file

@ -1,9 +1,11 @@
#pragma once
struct WidgetState
enum class WidgetState
{
bool mIsSelected{ false };
bool mIsHovered{ false };
bool mIsPressed{ false };
bool mIsFocused{ false };
};
ENABLED,
DISABLED,
HOVERED,
FOCUSED,
PRESSED,
SELECTED
};