The watch icon that MW core uses (for watching the entire page) has the following states:
- Not watching: not filled, blue outline (blue fits with the context: tabs are all blue)
- Not watching + hover: not filled, yellow outline
- Watching: filled blue, blue outline
- Watching + hover: hover state is filled blue, yellow outline
- Transition: spinning version of the not watching state (hence the nickname Mario Galaxy star)
The watch icon that Flow uses (for watching individual topics) has the following states:
- Not watching: not filled, gray outline (gray fits with the context: other icons and text there are also gray)
- Not watching + hover: not filled, light green outline
- Watching: dark green fill
- Watching + hover: light green fill
- Transition: mouse cursor is busy
This is inconsistent even just because the watch stars for the page and for topics are different; they shouldn't be. {T56307} tried to resolve this by putting the green watch star in core, but that kind of blew up and went nowhere.
But apart from the fact that we shouldn't be using two different watch stars, there are also inconsistencies in the watch star flow uses:
- It uses green, but green is the color for constructive. Watching a page isn't constructive, it's progressive, like editing is
- It also uses green (more green in fact, because of the fill) to unwatch a page; you'd expect the inverse of a constructive action to be destructive, not also constructive
- It uses two different shades of green
- When not watching, the default state is gray and the hover state is green, but when watching, the default state is green and the hover state is light green; I'd expect the non-hover state to be gray (but filled) instead
I would propose reconsidering both and establishing common patterns. Vector has a different style right now (the watch star is surrounded by lots of other blue things for instance), but if we moved to a design with patterns like "filled for watching, no fill for not watching; one base color and one hover color that are the same between states; use of progressive instead of constructive colors" then we can apply the same principles to both watch stars without unifying their aesthetics just yet. Then when Vector is revised to not be stuck in 2009, we can actually use the same watch stars.
One specific idea I'll throw out there for the Flow watch star is to use gray as the base color and blue as the hover color, with the star being filled when watching and unfilled when not. That would be more consistent with the Vector watch star, but still be appropriate for the context (the Flow watch star is surrounded by gray things).