apply jellybeans color scheme

This commit is contained in:
Armin 2026-08-06 16:21:51 +02:00
commit a45006c201
3 changed files with 48 additions and 23 deletions

View file

@ -21,6 +21,16 @@ juce::ColourGradient orangeGradient (const juce::Rectangle<float>& area)
colours::accent.darker (0.35f), bottom,
false);
}
juce::ColourGradient sectionGradient (const juce::Rectangle<float>& area)
{
const auto top = area.getTopLeft().translated (area.getWidth() * 0.5f, 0.0f);
const auto bottom = area.getBottomLeft().translated (area.getWidth() * 0.5f, 0.0f);
return juce::ColourGradient (colours::section, top,
colours::section.darker (0.35f), bottom,
false);
}
} // namespace
//==============================================================================
@ -896,7 +906,7 @@ void MonostepAudioProcessorEditor::paintContent (juce::Graphics& g)
const int capY = first.getY() - 13;
const juce::Rectangle<float> legend (capX - 6.0f, capY - 4.0f, (float) capW + 12.0f, 12.0f);
g.setGradientFill (orangeGradient (legend));
g.setGradientFill (sectionGradient (legend));
g.fillRoundedRectangle (legend, 3.0f);
g.setFont (font (9.0f).boldened());
@ -905,7 +915,7 @@ void MonostepAudioProcessorEditor::paintContent (juce::Graphics& g)
auto box = groupBox (first, last, pad);
box.setLeft (box.getX() - leftPad);
g.setColour (colours::accent.withAlpha (0.30f));
g.setColour (colours::section.withAlpha (0.30f));
g.drawRoundedRectangle (box, 3.0f, 1.0f);
};

View file

@ -8,18 +8,22 @@ namespace monostep
namespace colours
{
inline const juce::Colour bg (0xFF131519);
inline const juce::Colour panel (0xFF1C1F25);
inline const juce::Colour grid (0xFF262B33);
inline const juce::Colour gridLight (0xFF2E343E);
inline const juce::Colour text (0xFFC9CDD4);
inline const juce::Colour textDim (0xFF6E7683);
inline const juce::Colour accent (0xFFE8A33D);
inline const juce::Colour accent2 (0xFFE8A33D);
inline const juce::Colour accentDim (0xFF7A5A26);
inline const juce::Colour activeCell (0xFF3A6EA5);
inline const juce::Colour selected (0xFFF0F4F8);
inline const juce::Colour playMarker (0xFFE5484D);
// Jellybeans terminal palette
inline const juce::Colour bg (0xFF121212);
inline const juce::Colour panel (0xFF1A1A1A);
inline const juce::Colour grid (0xFF222222);
inline const juce::Colour gridLight (0xFF2B2B2B);
inline const juce::Colour text (0xFFDEDEDE);
inline const juce::Colour textDim (0xFF929292);
inline const juce::Colour accent (0xFFE27373); // red - active toggles/buttons, value labels
inline const juce::Colour note (0xFFBDDEAB); // green - matrix note cells
inline const juce::Colour slide (0xFFFFBA7B); // yellow - matrix slide row
inline const juce::Colour section (0xFF97BEDC); // blue - section pills and borders
inline const juce::Colour highlight (0xFF94B979); // darker green - general highlight
inline const juce::Colour activeCell (0xFF94B979);
inline const juce::Colour selected (0xFFDEDEDE);
inline const juce::Colour playMarker (0xFFE27373);
}
inline const juce::Font font (float height)

View file

@ -86,8 +86,19 @@ void SequencerMatrix::paint (juce::Graphics& g)
g.setColour (colours::bg);
g.fillRect (bounds.toFloat());
// slightly darker rows for the black keys on a piano keyboard
g.setColour (colours::bg.darker (0.45f));
for (int r = 0; r < numRows; ++r)
{
const int pc = ((semitoneForRow (r) % 12) + 12) % 12;
const bool isBlackKey = pc == 1 || pc == 3 || pc == 6 || pc == 8 || pc == 10;
if (isBlackKey)
g.fillRect (ox, oy + r * cellH, (float) bounds.getWidth(), cellH);
}
// selected column highlight
g.setColour (colours::selected.withAlpha (0.02f));
g.setColour (colours::highlight.withAlpha (0.06f));
g.fillRect (ox + selectedStep * cellW, oy, cellW, (float) bounds.getHeight());
// play position column highlight (drawn before cells so notes stay vivid)
@ -175,8 +186,8 @@ void SequencerMatrix::paint (juce::Graphics& g)
// cell body: keep a visible top->bottom gradient in both states. The selected
// note is brighter overall, but still holds its gradient (a flat bright fill
// would read as "no gradient").
const juce::Colour noteTop = isSelected ? colours::accent.brighter (0.2f) : colours::accent;
const juce::Colour noteBottom = colours::accent.darker (0.3f);
const juce::Colour noteTop = isSelected ? colours::note.brighter (0.2f) : colours::note;
const juce::Colour noteBottom = colours::note.darker (0.3f);
juce::ColourGradient grad (noteTop,
cell.getTopLeft().translated (cell.getWidth() * 0.5f, 0.0f),
@ -199,7 +210,7 @@ void SequencerMatrix::paint (juce::Graphics& g)
// --- slide row (bottom row) ----------------------------------------------
const float slideY = oy + numRows * cellH;
g.setColour (colours::accentDim);
g.setColour (colours::slide.darker (0.45f));
g.drawHorizontalLine (juce::roundToInt (slideY - 1.0f), ox, ox + (float) bounds.getWidth());
g.setFont (font (9.0f));
@ -218,9 +229,9 @@ void SequencerMatrix::paint (juce::Graphics& g)
cellW - 3.0f, cellH - 3.0f);
// match the gradient style of the note cells
juce::ColourGradient grad (colours::accent,
juce::ColourGradient grad (colours::slide,
cell.getTopLeft().translated (cell.getWidth() * 0.5f, 0.0f),
colours::accent.darker (0.3f),
colours::slide.darker (0.3f),
cell.getBottomLeft().translated (cell.getWidth() * 0.5f, 0.0f),
false);
g.setGradientFill (grad);
@ -238,7 +249,7 @@ void SequencerMatrix::paint (juce::Graphics& g)
// --- accent row (bottom row) ----------------------------------------------
const float accentY = oy + (numRows + 1) * cellH;
g.setColour (colours::accentDim);
g.setColour (colours::accent.darker (0.45f));
g.drawHorizontalLine (juce::roundToInt (accentY - 1.0f), ox, ox + (float) bounds.getWidth());
g.setFont (font (9.0f));
@ -258,9 +269,9 @@ void SequencerMatrix::paint (juce::Graphics& g)
const bool isSelected = (i == selectedStep);
juce::ColourGradient agrad (isSelected ? colours::accent2.brighter (0.2f) : colours::accent2,
juce::ColourGradient agrad (isSelected ? colours::highlight.brighter (0.2f) : colours::highlight,
cell.getTopLeft().translated (cell.getWidth() * 0.5f, 0.0f),
colours::accent2.darker (0.3f),
colours::highlight.darker (0.3f),
cell.getBottomLeft().translated (cell.getWidth() * 0.5f, 0.0f),
false);