feat: Contextually change stat color

[kjgoodrick]

📝 Summary

With this PR it possible to manually swap the color of the triangle in the mo.stat UI element. Previously the color was always green for increases and always red for decreases, but sometimes a decrease is "good" and one may want to display a green downwards facing triangle.

🔍 Description of Changes

The stat function now has a color argument that accepts the literals "positive" (green) or "negative" (red) to allow the user to set the color manually. If not specified the color will be as it is now, green for increase and red for decrease.

📋 Checklist

• I have read the contributor guidelines.
• For large changes, or changes that affect the public API: this change was discussed or approved through an issue, on Discord, or the community discussions (Please provide a link if applicable). https://discord.com/channels/1059888774789730424/1059891311190229082/1438631478178353232
• I have added tests for the changes made.
• I have run the code and verified that it works as expected.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
marimo-docs	Ready	Preview	Comment	Nov 18, 2025 1:03am

[Light2Dark]

Thanks! Feel free to disagree, would it be more intuitive if the API is just
reverse_color=True or invert_color?

[kjgoodrick]

Thanks for suggesting that, I do think it’s less confusing to use reverse_color. I will update the PR.

[Light2Dark]

@mscolnick, fyi on the API change.

[Light2Dark]

thank you! using var will raise pre-commit issues, we should use let / const instead. this snippet should help clean it up.

  const fillColors = {
    increase: "var(--grass-8)",
    decrease: "var(--red-8)",
  };

  const strokeColors = {
    increase: "var(--grass-9)",
    decrease: "var(--red-9)",
  };

...
             <TriangleIcon
                className="w-4 h-4 mr-1 p-0.5"
                fill={reverseColor ? fillColors.decrease : fillColors.increase}
                stroke={
                  reverseColor ? strokeColors.decrease : strokeColors.increase
                }
              />

[akshayka]

Thanks for the contribution — concept makes sense, but I have a comment on the API.

[akshayka]

This API is too imperative. We should prefer something more semantic or declarative.

For example, goal: Literal["increase", "decrease"],

mo.stat(value=10, direction="increase", goal="increase")

which leaves room for the "goal" to affect other behaviors in the future instead of just reversing a color. This is more legible than reverse_color=True (Reverse color of what? Why do I want to reverse colors).

[kjgoodrick]

Thanks for this suggestion, after reading it I totally agree. I have updated the PR changing the parameter name to target_direction to make it clear that the target is associated with the direction. To keep the current behavior I set the default target to "increase". This has also simplified the implementation, so great comment.

[akshayka]

Thanks, this is better! One comment

[akshayka]

The comment for target_direction could benefit from being more verbose. Without more context it is difficult to understand the difference between direction and target_direction

[akshayka]

Thanks for the changes, this looks great to me!

@dmadisetti, can you review this from an API owner's perspective?