I'm not sure if this behavior should be consistent across all components. Some components (Button, binary inputs, etc) do something when pressed (active), so it's somewhat important to show a distinction between when the component is active vs. focused. Often, the thing that happens when the component is pressed happens intentionally on mouseup - for example, if you mousedown on a MenuItem, then move your mouse outside of that MenuItem before releasing it, you will not select the MenuItem.

Other components, like TextInput and TextArea, do nothing when pressed - all that matters is the focus state. I don't think it's helpful to show a different state between mousedown and mouseup since it doesn't do anything. And, if you mousedown on a TextInput then move the mouse outside of it before releasing it, you will still end up focused on the TextInput. IMO, these components don't need special active styles.

Select is a gray area - it does do something when pressed, but the mousedown/mouseup behavior is currently not consistent between the Vue version (which does not use the native <select> element) and the CSS-only version (which does). With the Vue version, the menu opens on mouseup. With the CSS-only one, it opens on mousedown. We may want to make this component consistent with itself at the very least (and, in that case, we should likely mimic the default browser behavior).

+1 to @AnneT's comment. Different component behaviours for different user experience feedback needs.
I'd suggest to decline this task.