More header UI theming (#1061)

1. Add functions to make highlight labels
2. Fix up the VU meter to not look not like the wireframe
3. Some other tweaks to track closer to wf

src-ui/components/HeaderRegion.cpp

@@ -148,6 +148,9 @@ HeaderRegion::HeaderRegion(SCXTEditor *e) : HasEditor(e)
     addAndMakeVisible(*ramLevel);
 
     editor->themeApplier.applyHeaderTheme(this);
+    editor->themeApplier.setLabelToHighlight(cpuLevel.get());
+    editor->themeApplier.setLabelToHighlight(ramLevel.get());
+    editor->themeApplier.applyHeaderSCButtonTheme(scMenu.get());
 }
 
 HeaderRegion::~HeaderRegion()
@@ -174,22 +177,22 @@ void HeaderRegion::resized()
 
     scMenu->setBounds(b.withTrimmedLeft(1148).withWidth(24));
 
-    cpuLabel->setBounds(b.withTrimmedLeft(979).withWidth(20).withHeight(12));
-    ramLabel->setBounds(b.withTrimmedLeft(979).withWidth(20).withHeight(12).translated(0, 12));
+    cpuLabel->setBounds(b.withTrimmedLeft(979).withWidth(20).withHeight(14));
+    ramLabel->setBounds(b.withTrimmedLeft(979).withWidth(20).withHeight(14).translated(0, 14));
 
-    cpuLevel->setBounds(b.withTrimmedLeft(1002).withWidth(35).withHeight(12));
-    ramLevel->setBounds(b.withTrimmedLeft(1002).withWidth(35).withHeight(12).translated(0, 12));
+    cpuLevel->setBounds(b.withTrimmedLeft(1002).withWidth(35).withHeight(14));
+    ramLevel->setBounds(b.withTrimmedLeft(1002).withWidth(35).withHeight(14).translated(0, 14));
 
-    vuMeter->setBounds(b.withTrimmedLeft(1048).withWidth(96));
+    vuMeter->setBounds(b.withTrimmedLeft(1048).withWidth(96).withHeight(28));
 }
 
 void HeaderRegion::setVULevel(float L, float R)
 {
     if (vuMeter)
     {
-        float ub = 1.4f;
-        auto nvuL = sqrt(std::clamp(L, 0.f, ub)) / sqrt(ub);
-        auto nvuR = sqrt(std::clamp(R, 0.f, ub)) / sqrt(ub);
+        float ub = 8.f;
+        auto nvuL = sqrt(std::clamp(L, 0.f, ub)); // sqrt(ub);
+        auto nvuR = sqrt(std::clamp(R, 0.f, ub)); // sqrt(ub);
 
         if (std::fabs(nvuL - vuLevel[0]) + std::fabs(nvuR - vuLevel[1]) > 1e-6)
         {

src-ui/theme/ThemeApplier.cpp

@@ -130,15 +130,24 @@ static constexpr sheet_t::Class TextPushButton{"header.textbutton"};
 static constexpr sheet_t::Class ToggleButton{"header.togglebutton"};
 static constexpr sheet_t::Class MenuButton{"header.menubutton"};
 static constexpr sheet_t::Class GlyphButton{"header.menubutton"};
-void applyColors(const sheet_t::ptr_t &, const ColorMap &);
+static constexpr sheet_t::Class GlyphButtonAccent{"header.menubutton.accent"};
+void applyColorsAndFonts(const sheet_t::ptr_t &, const ColorMap &, const ThemeApplier &);
 void init()
 {
     sheet_t::addClass(TextPushButton).withBaseClass(jcmp::TextPushButton::Styles::styleClass);
     sheet_t::addClass(ToggleButton).withBaseClass(jcmp::ToggleButton::Styles::styleClass);
     sheet_t::addClass(MenuButton).withBaseClass(jcmp::MenuButton::Styles::styleClass);
     sheet_t::addClass(GlyphButton).withBaseClass(jcmp::GlyphButton::Styles::styleClass);
+    sheet_t::addClass(GlyphButtonAccent).withBaseClass(GlyphButton);
 }
 } // namespace header
+namespace util
+{
+static constexpr sheet_t::Class LabelHighlight("util.label.highlight");
+void applyColors(const sheet_t::ptr_t &, const ColorMap &);
+
+void init() { sheet_t::addClass(LabelHighlight).withBaseClass(jcmp::Label::Styles::styleClass); }
+} // namespace util
 } // namespace detail
 
 ThemeApplier::ThemeApplier()
@@ -151,6 +160,7 @@ ThemeApplier::ThemeApplier()
         detail::multi::zone::init();
         detail::multi::group::init();
         detail::header::init();
+        detail::util::init();
         detailInitialized = true;
     }
     colors = ColorMap::createColorMap(ColorMap::WIREFRAME);
@@ -162,7 +172,8 @@ void ThemeApplier::recolorStylesheet(const sst::jucegui::style::StyleSheet::ptr_
     detail::multi::applyColors(s, *colors);
     detail::multi::zone::applyColors(s, *colors);
     detail::multi::group::applyColors(s, *colors);
-    detail::header::applyColors(s, *colors);
+    detail::header::applyColorsAndFonts(s, *colors, *this);
+    detail::util::applyColors(s, *colors);
 }
 
 void ThemeApplier::recolorStylesheetWith(std::unique_ptr<ColorMap> &&c, const sheet_t::ptr_t &s)
@@ -219,7 +230,17 @@ void ThemeApplier::applyHeaderTheme(juce::Component *toThis)
     map.applyMapTo(toThis);
 }
 
-juce::Font ThemeApplier::interMediumFor(int ht)
+void ThemeApplier::setLabelToHighlight(sst::jucegui::style::StyleConsumer *s)
+{
+    s->setCustomClass(detail::util::LabelHighlight);
+}
+
+void ThemeApplier::applyHeaderSCButtonTheme(sst::jucegui::style::StyleConsumer *s)
+{
+    s->setCustomClass(detail::header::GlyphButtonAccent);
+}
+
+juce::Font ThemeApplier::interMediumFor(int ht) const
 {
     static auto interMed =
         connectors::resources::loadTypeface("fonts/Inter/static/Inter-Medium.ttf");
@@ -442,17 +463,34 @@ void applyColors(const sheet_t::ptr_t &base, const ColorMap &cols)
 } // namespace multi
 namespace header
 {
-void applyColors(const sheet_t::ptr_t &base, const ColorMap &cols)
+void applyColorsAndFonts(const sheet_t::ptr_t &base, const ColorMap &cols, const ThemeApplier &t)
 {
     base->setColour(TextPushButton, jcmp::TextPushButton::Styles::fill, cols.get(ColorMap::bg_2));
     base->setColour(TextPushButton, jcmp::TextPushButton::Styles::fill_hover,
                     cols.get(ColorMap::bg_3));
+    base->setFont(TextPushButton, jcmp::TextPushButton::Styles::labelfont, t.interMediumFor(14));
     base->setColour(ToggleButton, jcmp::ToggleButton::Styles::fill, cols.get(ColorMap::bg_2));
     base->setColour(ToggleButton, jcmp::ToggleButton::Styles::fill_hover, cols.get(ColorMap::bg_3));
+    base->setFont(ToggleButton, jcmp::ToggleButton::Styles::labelfont, t.interMediumFor(14));
     base->setColour(MenuButton, jcmp::MenuButton::Styles::fill, cols.get(ColorMap::bg_2));
+    base->setFont(MenuButton, jcmp::MenuButton::Styles::labelfont, t.interMediumFor(14));
     base->setColour(GlyphButton, jcmp::GlyphButton::Styles::fill, cols.get(ColorMap::bg_2));
     base->setColour(GlyphButton, jcmp::GlyphButton::Styles::fill_hover, cols.get(ColorMap::bg_3));
+
+    base->setColour(GlyphButtonAccent, jcmp::GlyphButton::Styles::labelcolor,
+                    cols.get(ColorMap::accent_1a));
+    base->setColour(GlyphButtonAccent, jcmp::GlyphButton::Styles::labelcolor_hover,
+                    cols.get(ColorMap::accent_1a));
 }
 } // namespace header
+
+namespace util
+{
+void applyColors(const sheet_t::ptr_t &base, const ColorMap &cols)
+{
+    base->setColour(LabelHighlight, jcmp::Label::Styles::labelcolor,
+                    cols.get(ColorMap::generic_content_highest));
+}
+} // namespace util
 } // namespace detail
 } // namespace scxt::ui::theme

src-ui/theme/ThemeApplier.h

@@ -32,6 +32,7 @@
 
 #include <juce_gui_basics/juce_gui_basics.h>
 #include <sst/jucegui/style/StyleSheet.h>
+#include <sst/jucegui/components/Label.h>
 
 #include "ColorMap.h"
 
@@ -53,10 +54,14 @@ struct ThemeApplier
     void applyMixerEffectTheme(juce::Component *toThis);
     void applyMixerChannelTheme(juce::Component *toThis);
     void applyHeaderTheme(juce::Component *toThis);
+    void applyHeaderSCButtonTheme(sst::jucegui::style::StyleConsumer *);
+
+    // Some utilities to move single items
+    void setLabelToHighlight(sst::jucegui::style::StyleConsumer *);
 
     const std::unique_ptr<ColorMap> &colorMap() { return colors; }
 
-    juce::Font interMediumFor(int ht);
+    juce::Font interMediumFor(int ht) const;
 
   protected:
     std::unique_ptr<ColorMap> colors;