Skip to content

Commit

Permalink
Component colours improvement (#1180)
Browse files Browse the repository at this point in the history 
* improve component colours

* update sst-jucegui commit
  • Loading branch information
@luismrguimaraes
luismrguimaraes authored Aug 25, 2024
1 parent a40da0d commit 4e53c7a
Show file tree
Hide file tree
Showing 8 changed files with 95 additions and 19 deletions.
2 changes: 1 addition & 1 deletion libs/sst/sst-jucegui
Submodule sst-jucegui updated 4 files
+6 −4 include/sst/jucegui/components/DraggableTextEditableValue.h
+6 −9 src/sst/jucegui/components/DraggableTextEditableValue.cpp
+0 −1 src/sst/jucegui/components/MultiSwitch.cpp
+0 −10 src/sst/jucegui/style/StyleSheet.cpp
3 changes: 3 additions & 0 deletions src-ui/json-assets/themes/test-colors.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@
{
"accent_1a": "#ffda70d6",
"accent_1b": "#ffffc0cb",
"accent_1b_alpha_a": "#14ffc0cb",
"accent_1b_alpha_b": "#52ffc0cb",
"accent_1b_alpha_c": "#80ffc0cb",
"accent_2a": "#ff61c4a3",
"accent_2a_alpha_a": "#ff4f9f84",
"accent_2a_alpha_b": "#ff4f9f84",
Expand Down
3 changes: 3 additions & 0 deletions src-ui/json-assets/themes/wireframe-dark-hicontrast.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@
{
"accent_1a": "#ffffb949",
"accent_1b": "#ffd09030",
"accent_1b_alpha_a": "#14d09030",
"accent_1b_alpha_b": "#52d09030",
"accent_1b_alpha_c": "#80d09030",
"accent_2a": "#ff2788d6",
"accent_2a_alpha_a": "#142788d6",
"accent_2a_alpha_b": "#522788d6",
Expand Down
5 changes: 4 additions & 1 deletion src-ui/json-assets/themes/wireframe-dark.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@
{
"accent_1a": "#ffffb949",
"accent_1b": "#ffd09030",
"accent_1b_alpha_a": "#14d09030",
"accent_1b_alpha_b": "#52d09030",
"accent_1b_alpha_c": "#80d09030",
"accent_2a": "#ff2788d6",
"accent_2a_alpha_a": "#142788d6",
"accent_2a_alpha_b": "#522788d6",
Expand All @@ -32,4 +35,4 @@
"warning_1a": "#ffd67272",
"warning_1b": "#ff8a0000"
}
]
]
3 changes: 3 additions & 0 deletions src-ui/json-assets/themes/wireframe-light.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@
{
"accent_1a": "#ff268bd2",
"accent_1b": "#ff2aa198",
"accent_1b_alpha_a": "#142aa198",
"accent_1b_alpha_b": "#522aa198",
"accent_1b_alpha_c": "#802aa198",
"accent_2a": "#ff2788d6",
"accent_2a_alpha_a": "#142788d6",
"accent_2a_alpha_b": "#522788d6",
Expand Down
3 changes: 3 additions & 0 deletions src-ui/theme/ColorMap.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,9 @@ std::string keyName(ColorMap::Colors c)
{
C(accent_1a);
C(accent_1b);
C(accent_1b_alpha_a);
C(accent_1b_alpha_b);
C(accent_1b_alpha_c);
C(accent_2a);
C(accent_2a_alpha_a);
C(accent_2a_alpha_b);
Expand Down
3 changes: 3 additions & 0 deletions src-ui/theme/ColorMap.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,9 @@ struct ColorMap
{
accent_1a,
accent_1b,
accent_1b_alpha_a,
accent_1b_alpha_b,
accent_1b_alpha_c,
accent_2a,
accent_2a_alpha_a,
accent_2a_alpha_b,
Expand Down
92 changes: 75 additions & 17 deletions src-ui/theme/ThemeApplier.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,8 @@ static constexpr sheet_t::Class ModulationMultiSwitch{"multi.zone.modulation.mul
static constexpr sheet_t::Class ModulationNamedPanel{"multi.zone.modulation.namedpanel"};
static constexpr sheet_t::Class ModulationVSlider{"multi.zone.modulation.vslider"};
static constexpr sheet_t::Class ModulationKnob{"multi.zone.modulation.knob"};
static constexpr sheet_t::Class ModulationDraggableTextEditableValue{
"multi.zone.modulation.draggabletexteditablevalue"};

void applyColors(const sheet_t::ptr_t &, const ColorMap &);
void init()
Expand All @@ -93,6 +95,8 @@ void init()
sheet_t::addClass(ModulationNamedPanel).withBaseClass(jcmp::NamedPanel::Styles::styleClass);
sheet_t::addClass(ModulationVSlider).withBaseClass(jcmp::VSlider::Styles::styleClass);
sheet_t::addClass(ModulationKnob).withBaseClass(jcmp::Knob::Styles::styleClass);
sheet_t::addClass(ModulationDraggableTextEditableValue)
.withBaseClass(jcmp::DraggableTextEditableValue::Styles::styleClass);
}

} // namespace zone
Expand All @@ -105,8 +109,12 @@ static constexpr sheet_t::Class NamedPanel{"multi.group.namedpanel"};
static constexpr sheet_t::Class ModulationNamedPanel{"multi.group.modulation.namedpanel"};
static constexpr sheet_t::Class Knob{"multi.group.knob"};
static constexpr sheet_t::Class VSlider{"multi.group.vslider"};
static constexpr sheet_t::Class DraggableTextEditableValue{
"multi.group.draggabletexteditablevalue"};
static constexpr sheet_t::Class ModulationKnob{"multi.group.modulation.knob"};
static constexpr sheet_t::Class ModulationVSlider{"multi.group.modulation.vslider"};
static constexpr sheet_t::Class ModulationDraggableTextEditableValue{
"multi.group.modulation.draggabletexteditablevalue"};

void applyColors(const sheet_t::ptr_t &, const ColorMap &);
void init()
Expand All @@ -118,8 +126,12 @@ void init()

sheet_t::addClass(Knob).withBaseClass(jcmp::Knob::Styles::styleClass);
sheet_t::addClass(VSlider).withBaseClass(jcmp::VSlider::Styles::styleClass);
sheet_t::addClass(DraggableTextEditableValue)
.withBaseClass(jcmp::DraggableTextEditableValue::Styles::styleClass);
sheet_t::addClass(ModulationKnob).withBaseClass(Knob);
sheet_t::addClass(ModulationVSlider).withBaseClass(VSlider);
sheet_t::addClass(ModulationDraggableTextEditableValue)
.withBaseClass(DraggableTextEditableValue);
}

} // namespace group
Expand Down Expand Up @@ -195,13 +207,16 @@ void ThemeApplier::applyZoneMultiScreenModulationTheme(juce::Component *toThis)
map.addCustomClass<jcmp::MultiSwitch>(detail::edit::zone::ModulationMultiSwitch);
map.addCustomClass<jcmp::VSlider>(detail::edit::zone::ModulationVSlider);
map.addCustomClass<jcmp::Knob>(detail::edit::zone::ModulationKnob);
map.addCustomClass<jcmp::DraggableTextEditableValue>(
detail::edit::zone::ModulationDraggableTextEditableValue);
populateSharedGroupZoneMultiModulation(map);
map.applyMapTo(toThis);
}
void ThemeApplier::applyZoneMultiScreenTheme(juce::Component *toThis)
{
jstl::CustomTypeMap map;
map.addCustomClass<jcmp::NamedPanel>(jcmp::NamedPanel::Styles::styleClass);
map.addCustomClass<jcmp::MultiSwitch>(jcmp::MultiSwitch::Styles::styleClass);
map.applyMapTo(toThis);
}

Expand All @@ -210,9 +225,11 @@ void ThemeApplier::applyGroupMultiScreenModulationTheme(juce::Component *toThis)
jstl::CustomTypeMap map;
map.addCustomClass<jcmp::NamedPanel>(detail::edit::group::ModulationNamedPanel);
map.addCustomClass<jcmp::MultiSwitch>(detail::edit::group::ModulationMultiSwitch);
map.addCustomClass<jcmp::NamedPanel>(detail::edit::group::NamedPanel);
map.addCustomClass<jcmp::NamedPanel>(detail::edit::group::ModulationNamedPanel);
map.addCustomClass<jcmp::VSlider>(detail::edit::group::ModulationVSlider);
map.addCustomClass<jcmp::Knob>(detail::edit::group::ModulationKnob);
map.addCustomClass<jcmp::DraggableTextEditableValue>(
detail::edit::group::ModulationDraggableTextEditableValue);
populateSharedGroupZoneMultiModulation(map);
map.applyMapTo(toThis);
}
Expand All @@ -222,6 +239,8 @@ void ThemeApplier::applyGroupMultiScreenTheme(juce::Component *toThis)
map.addCustomClass<jcmp::MultiSwitch>(detail::edit::group::MultiSwitch);
map.addCustomClass<jcmp::NamedPanel>(detail::edit::group::NamedPanel);
map.addCustomClass<jcmp::Knob>(detail::edit::group::Knob);
map.addCustomClass<jcmp::DraggableTextEditableValue>(
detail::edit::group::DraggableTextEditableValue);
map.applyMapTo(toThis);
}

Expand Down Expand Up @@ -302,11 +321,13 @@ void applyColors(const sheet_t::ptr_t &base, const ColorMap &cols)

base->setColour(ValueBearing::styleClass, ValueBearing::value, cols.get(ColorMap::accent_1b));
base->setColour(ValueBearing::styleClass, ValueBearing::value_hover,
cols.getHover(ColorMap::accent_1a));
cols.getHover(ColorMap::accent_1b));
base->setColour(ValueBearing::styleClass, ValueBearing::valuelabel,
cols.get(ColorMap::generic_content_medium));
base->setColour(ValueBearing::styleClass, ValueBearing::valuelabel_hover,
cols.getHover(ColorMap::generic_content_medium));
base->setColour(ValueBearing::styleClass, ValueBearing::valuebg,
cols.get(ColorMap::accent_1b_alpha_a));

base->setColour(ValueGutter::styleClass, ValueGutter::gutter, cols.get(ColorMap::gutter_2));
base->setColour(ValueGutter::styleClass, ValueGutter::gutter_hover,
Expand All @@ -325,7 +346,7 @@ void applyColors(const sheet_t::ptr_t &base, const ColorMap &cols)
base->setColour(GraphicalHandle::styleClass, GraphicalHandle::handle,
cols.get(ColorMap::generic_content_high));
base->setColour(GraphicalHandle::styleClass, GraphicalHandle::handle_hover,
cols.get(ColorMap::generic_content_high).brighter(0.1));
cols.getHover(ColorMap::generic_content_high));
base->setColour(GraphicalHandle::styleClass, GraphicalHandle::handle_outline,
cols.get(ColorMap::generic_content_high).brighter(0.1));

Expand All @@ -339,13 +360,14 @@ void applyColors(const sheet_t::ptr_t &base, const ColorMap &cols)
cols.get(ColorMap::warning_1b));

base->setColour(jcmp::DraggableTextEditableValue::Styles::styleClass,
jcmp::DraggableTextEditableValue::Styles::background_editing,
cols.get(ColorMap::bg_3));
jcmp::DraggableTextEditableValue::Styles::background,
cols.get(ColorMap::accent_1b_alpha_a));
base->setColour(jcmp::DraggableTextEditableValue::Styles::styleClass,
jcmp::DraggableTextEditableValue::Styles::background_hover,
cols.getHover(ColorMap::accent_1b_alpha_a));

base->setColour(jcmp::MultiSwitch::Styles::styleClass, jcmp::MultiSwitch::Styles::background,
cols.get(ColorMap::bg_2));
base->setColour(jcmp::MultiSwitch::Styles::styleClass, jcmp::MultiSwitch::Styles::valuebg,
cols.get(ColorMap::bg_1));
base->setColour(jcmp::MultiSwitch::Styles::styleClass,
jcmp::MultiSwitch::Styles::unselected_hover, cols.getHover(ColorMap::bg_2));

Expand Down Expand Up @@ -377,6 +399,15 @@ void applyColors(const sheet_t::ptr_t &base, const ColorMap &cols)
base->setColour(jcmp::MenuButton::Styles::styleClass, jcmp::MenuButton::Styles::menuarrow_hover,
cols.get(ColorMap::accent_1a));

base->setColour(jcmp::HSliderFilled::Styles::styleClass, jcmp::HSliderFilled::Styles::value,
cols.get(ColorMap::accent_1b));
base->setColour(jcmp::HSliderFilled::Styles::styleClass,
jcmp::HSliderFilled::Styles::value_hover, cols.getHover(ColorMap::accent_1b));
base->setColour(jcmp::HSliderFilled::Styles::styleClass, jcmp::HSliderFilled::Styles::handle,
cols.get(ColorMap::accent_1a));
base->setColour(jcmp::HSliderFilled::Styles::styleClass,
jcmp::HSliderFilled::Styles::handle_hover, cols.getHover(ColorMap::accent_1a));

auto interMed = connectors::resources::loadTypeface("fonts/Inter/static/Inter-Medium.ttf");
base->replaceFontsWithTypeface(interMed);

Expand All @@ -399,14 +430,18 @@ void applyColors(const sheet_t::ptr_t &base, const ColorMap &cols)
cols.get(ColorMap::accent_2a));

base->setColour(ModulationHSliderFilled, jcmp::HSliderFilled::Styles::value,
cols.get(ColorMap::accent_2a));
cols.get(ColorMap::accent_2b));
base->setColour(ModulationHSliderFilled, jcmp::HSliderFilled::Styles::value_hover,
cols.getHover(ColorMap::accent_2b));
base->setColour(ModulationHSliderFilled, jcmp::HSliderFilled::Styles::handle,
cols.get(ColorMap::accent_2a));
base->setColour(ModulationHSliderFilled, jcmp::HSliderFilled::Styles::handle_hover,
cols.getHover(ColorMap::accent_2a));

base->setColour(ModulationToggle, jcmp::ToggleButton::Styles::value,
cols.get(ColorMap::accent_2a));
base->setColour(ModulationToggle, jcmp::ToggleButton::Styles::value_hover,
cols.get(ColorMap::accent_2a).brighter(0.1));
cols.getHover(ColorMap::accent_2a));
}
namespace zone
{
Expand All @@ -425,14 +460,29 @@ void applyColors(const sheet_t::ptr_t &base, const ColorMap &cols)

base->setColour(ModulationVSlider, jcmp::VSlider::Styles::value, cols.get(ColorMap::accent_2a));
base->setColour(ModulationVSlider, jcmp::VSlider::Styles::value_hover,
cols.get(ColorMap::accent_2a).brighter(0.1));
cols.getHover(ColorMap::accent_2a));

base->setColour(ModulationKnob, jcmp::Knob::Styles::value, cols.get(ColorMap::accent_2a));
base->setColour(ModulationKnob, jcmp::Knob::Styles::value_hover,
cols.get(ColorMap::accent_2a).brighter(0.1));
cols.getHover(ColorMap::accent_2a));

base->setColour(ModulationNamedPanel, jcmp::NamedPanel::Styles::selectedtab,
cols.get(ColorMap::accent_2a));

base->setColour(ModulationDraggableTextEditableValue,
jcmp::DraggableTextEditableValue::Styles::value, cols.get(ColorMap::accent_2a));
base->setColour(ModulationDraggableTextEditableValue,
jcmp::DraggableTextEditableValue::Styles::value_hover,
cols.getHover(ColorMap::accent_2a));
base->setColour(ModulationDraggableTextEditableValue,
jcmp::DraggableTextEditableValue::Styles::background,
cols.get(ColorMap::accent_2a_alpha_a));
base->setColour(ModulationDraggableTextEditableValue,
jcmp::DraggableTextEditableValue::Styles::background_hover,
cols.getHover(ColorMap::accent_2a_alpha_a));

base->setColour(jcmp::MultiSwitch::Styles::styleClass, jcmp::MultiSwitch::Styles::valuebg,
cols.get(ColorMap::accent_1b_alpha_a));
}
} // namespace zone
namespace group
Expand All @@ -449,8 +499,7 @@ void applyColors(const sheet_t::ptr_t &base, const ColorMap &cols)
cols.get(ColorMap::gutter_3));
base->setColour(MultiSwitch, jcmp::MultiSwitch::Styles::unselected_hover,
cols.getHover(ColorMap::gutter_3));
base->setColour(jcmp::MultiSwitch::Styles::styleClass, jcmp::MultiSwitch::Styles::valuebg,
cols.get(ColorMap::bg_1));
base->setColour(MultiSwitch, jcmp::MultiSwitch::Styles::valuebg, cols.get(ColorMap::bg_1));

base->setColour(ModulationMultiSwitch, jcmp::MultiSwitch::Styles::value,
cols.get(ColorMap::accent_2a));
Expand Down Expand Up @@ -479,14 +528,23 @@ void applyColors(const sheet_t::ptr_t &base, const ColorMap &cols)

base->setColour(ModulationVSlider, jcmp::VSlider::Styles::value, cols.get(ColorMap::accent_2a));
base->setColour(ModulationVSlider, jcmp::VSlider::Styles::value_hover,
cols.get(ColorMap::accent_2a).brighter(0.1));
cols.getHover(ColorMap::accent_2a));

base->setColour(ModulationKnob, jcmp::Knob::Styles::value, cols.get(ColorMap::accent_2a));
base->setColour(ModulationKnob, jcmp::Knob::Styles::value_hover,
cols.get(ColorMap::accent_2a).brighter(0.1));
cols.getHover(ColorMap::accent_2a));

base->setColour(ModulationNamedPanel, jcmp::NamedPanel::Styles::selectedtab,
cols.get(ColorMap::accent_2a));
base->setColour(ModulationDraggableTextEditableValue,
jcmp::DraggableTextEditableValue::Styles::value, cols.get(ColorMap::accent_2a));
base->setColour(ModulationDraggableTextEditableValue,
jcmp::DraggableTextEditableValue::Styles::value_hover,
cols.getHover(ColorMap::accent_2a));
base->setColour(ModulationDraggableTextEditableValue,
jcmp::DraggableTextEditableValue::Styles::background,
cols.get(ColorMap::accent_2a_alpha_a));
base->setColour(ModulationDraggableTextEditableValue,
jcmp::DraggableTextEditableValue::Styles::background_hover,
cols.getHover(ColorMap::accent_2a_alpha_a));
}
} // namespace group
} // namespace edit
Expand Down

0 comments on commit 4e53c7a

Please sign in to comment.