From 4e53c7a8f8ae132b162b10d9a1de2d61cc2bc3fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lu=C3=ADs=20M=2E=20R=2E=20Guimar=C3=A3es?= <100025288+luismrguimaraes@users.noreply.github.com> Date: Sun, 25 Aug 2024 01:47:19 +0100 Subject: [PATCH] Component colours improvement (#1180) * improve component colours * update sst-jucegui commit --- libs/sst/sst-jucegui | 2 +- src-ui/json-assets/themes/test-colors.json | 3 + .../themes/wireframe-dark-hicontrast.json | 3 + src-ui/json-assets/themes/wireframe-dark.json | 5 +- .../json-assets/themes/wireframe-light.json | 3 + src-ui/theme/ColorMap.cpp | 3 + src-ui/theme/ColorMap.h | 3 + src-ui/theme/ThemeApplier.cpp | 92 +++++++++++++++---- 8 files changed, 95 insertions(+), 19 deletions(-) diff --git a/libs/sst/sst-jucegui b/libs/sst/sst-jucegui index b8c3c428..d04372a4 160000 --- a/libs/sst/sst-jucegui +++ b/libs/sst/sst-jucegui @@ -1 +1 @@ -Subproject commit b8c3c428dac70fb5c5aac3be4e10fc25716b361c +Subproject commit d04372a42c73c7b3eeb7f7ddc9eae27704bffc93 diff --git a/src-ui/json-assets/themes/test-colors.json b/src-ui/json-assets/themes/test-colors.json index 52284cec..a4ee47ff 100644 --- a/src-ui/json-assets/themes/test-colors.json +++ b/src-ui/json-assets/themes/test-colors.json @@ -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", diff --git a/src-ui/json-assets/themes/wireframe-dark-hicontrast.json b/src-ui/json-assets/themes/wireframe-dark-hicontrast.json index e28f39d9..a2c148b0 100644 --- a/src-ui/json-assets/themes/wireframe-dark-hicontrast.json +++ b/src-ui/json-assets/themes/wireframe-dark-hicontrast.json @@ -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", diff --git a/src-ui/json-assets/themes/wireframe-dark.json b/src-ui/json-assets/themes/wireframe-dark.json index ed67d9de..243b78a3 100644 --- a/src-ui/json-assets/themes/wireframe-dark.json +++ b/src-ui/json-assets/themes/wireframe-dark.json @@ -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", @@ -32,4 +35,4 @@ "warning_1a": "#ffd67272", "warning_1b": "#ff8a0000" } -] +] \ No newline at end of file diff --git a/src-ui/json-assets/themes/wireframe-light.json b/src-ui/json-assets/themes/wireframe-light.json index bfb772ae..e7444212 100644 --- a/src-ui/json-assets/themes/wireframe-light.json +++ b/src-ui/json-assets/themes/wireframe-light.json @@ -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", diff --git a/src-ui/theme/ColorMap.cpp b/src-ui/theme/ColorMap.cpp index eb41aa07..ce534b48 100644 --- a/src-ui/theme/ColorMap.cpp +++ b/src-ui/theme/ColorMap.cpp @@ -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); diff --git a/src-ui/theme/ColorMap.h b/src-ui/theme/ColorMap.h index 2c5750cc..2c70d234 100644 --- a/src-ui/theme/ColorMap.h +++ b/src-ui/theme/ColorMap.h @@ -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, diff --git a/src-ui/theme/ThemeApplier.cpp b/src-ui/theme/ThemeApplier.cpp index 5100431a..1aad55aa 100644 --- a/src-ui/theme/ThemeApplier.cpp +++ b/src-ui/theme/ThemeApplier.cpp @@ -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() @@ -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 @@ -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() @@ -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 @@ -195,6 +207,8 @@ void ThemeApplier::applyZoneMultiScreenModulationTheme(juce::Component *toThis) map.addCustomClass(detail::edit::zone::ModulationMultiSwitch); map.addCustomClass(detail::edit::zone::ModulationVSlider); map.addCustomClass(detail::edit::zone::ModulationKnob); + map.addCustomClass( + detail::edit::zone::ModulationDraggableTextEditableValue); populateSharedGroupZoneMultiModulation(map); map.applyMapTo(toThis); } @@ -202,6 +216,7 @@ void ThemeApplier::applyZoneMultiScreenTheme(juce::Component *toThis) { jstl::CustomTypeMap map; map.addCustomClass(jcmp::NamedPanel::Styles::styleClass); + map.addCustomClass(jcmp::MultiSwitch::Styles::styleClass); map.applyMapTo(toThis); } @@ -210,9 +225,11 @@ void ThemeApplier::applyGroupMultiScreenModulationTheme(juce::Component *toThis) jstl::CustomTypeMap map; map.addCustomClass(detail::edit::group::ModulationNamedPanel); map.addCustomClass(detail::edit::group::ModulationMultiSwitch); - map.addCustomClass(detail::edit::group::NamedPanel); + map.addCustomClass(detail::edit::group::ModulationNamedPanel); map.addCustomClass(detail::edit::group::ModulationVSlider); map.addCustomClass(detail::edit::group::ModulationKnob); + map.addCustomClass( + detail::edit::group::ModulationDraggableTextEditableValue); populateSharedGroupZoneMultiModulation(map); map.applyMapTo(toThis); } @@ -222,6 +239,8 @@ void ThemeApplier::applyGroupMultiScreenTheme(juce::Component *toThis) map.addCustomClass(detail::edit::group::MultiSwitch); map.addCustomClass(detail::edit::group::NamedPanel); map.addCustomClass(detail::edit::group::Knob); + map.addCustomClass( + detail::edit::group::DraggableTextEditableValue); map.applyMapTo(toThis); } @@ -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, @@ -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)); @@ -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)); @@ -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); @@ -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 { @@ -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 @@ -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)); @@ -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